fix(material/expansion): remove remaining animation dependencies

Removes the remaning dependencies on `@angular/animations` from the package.
angular · Feb 3, 2025 · e164e23 · e164e23
1 parent 71c71be
commit e164e23
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 36 deletions.
diff --git a/src/material/expansion/BUILD.bazel b/src/material/expansion/BUILD.bazel
@@ -28,7 +28,6 @@ ng_module(
         "//src/cdk/keycodes",
         "//src/cdk/portal",
         "//src/material/core",
-        "@npm//@angular/animations",
         "@npm//@angular/core",
         "@npm//@angular/platform-browser",
         "@npm//rxjs",

diff --git a/src/material/expansion/expansion-animations.ts b/src/material/expansion/expansion-animations.ts
@@ -5,17 +5,12 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.dev/license
  */
-import {
-  animate,
-  AnimationTriggerMetadata,
-  state,
-  style,
-  transition,
-  trigger,
-} from '@angular/animations';
 
-/** Time and timing curve for expansion panel animations. */
-// Note: Keep this in sync with the Sass variable for the panel header animation.
+/**
+ * Time and timing curve for expansion panel animations.
+ * @deprecated No longer used. Will be removed.
+ * @breaking-change 21.0.0
+ */
 export const EXPANSION_PANEL_ANIMATION_TIMING = '225ms cubic-bezier(0.4,0.0,0.2,1)';
 
 /**
@@ -43,28 +38,79 @@ export const EXPANSION_PANEL_ANIMATION_TIMING = '225ms cubic-bezier(0.4,0.0,0.2,
  * @breaking-change 21.0.0
  */
 export const matExpansionAnimations: {
-  readonly indicatorRotate: AnimationTriggerMetadata;
-  readonly bodyExpansion: AnimationTriggerMetadata;
+  readonly indicatorRotate: any;
+  readonly bodyExpansion: any;
 } = {
+  // Represents:
+  // trigger('indicatorRotate', [
+  //   state('collapsed, void', style({transform: 'rotate(0deg)'})),
+  //   state('expanded', style({transform: 'rotate(180deg)'})),
+  //   transition(
+  //     'expanded <=> collapsed, void => collapsed',
+  //     animate(EXPANSION_PANEL_ANIMATION_TIMING),
+  //   ),
+  // ])
+
   /** Animation that rotates the indicator arrow. */
-  indicatorRotate: trigger('indicatorRotate', [
-    state('collapsed, void', style({transform: 'rotate(0deg)'})),
-    state('expanded', style({transform: 'rotate(180deg)'})),
-    transition(
-      'expanded <=> collapsed, void => collapsed',
-      animate(EXPANSION_PANEL_ANIMATION_TIMING),
-    ),
-  ]),
+  indicatorRotate: {
+    type: 7,
+    name: 'indicatorRotate',
+    definitions: [
+      {
+        type: 0,
+        name: 'collapsed, void',
+        styles: {type: 6, styles: {transform: 'rotate(0deg)'}, offset: null},
+      },
+      {
+        type: 0,
+        name: 'expanded',
+        styles: {type: 6, styles: {transform: 'rotate(180deg)'}, offset: null},
+      },
+      {
+        type: 1,
+        expr: 'expanded <=> collapsed, void => collapsed',
+        animation: {type: 4, styles: null, timings: '225ms cubic-bezier(0.4,0.0,0.2,1)'},
+        options: null,
+      },
+    ],
+    options: {},
+  },
+
+  // Represents:
+  // trigger('bodyExpansion', [
+  //   state('collapsed, void', style({height: '0px', visibility: 'hidden'})),
+  //   // Clear the `visibility` while open, otherwise the content will be visible when placed in
+  //   // a parent that's `visibility: hidden`, because `visibility` doesn't apply to descendants
+  //   // that have a `visibility` of their own (see #27436).
+  //   state('expanded', style({height: '*', visibility: ''})),
+  //   transition(
+  //     'expanded <=> collapsed, void => collapsed',
+  //     animate(EXPANSION_PANEL_ANIMATION_TIMING),
+  //   ),
+  // ])
+
   /** Animation that expands and collapses the panel content. */
-  bodyExpansion: trigger('bodyExpansion', [
-    state('collapsed, void', style({height: '0px', visibility: 'hidden'})),
-    // Clear the `visibility` while open, otherwise the content will be visible when placed in
-    // a parent that's `visibility: hidden`, because `visibility` doesn't apply to descendants
-    // that have a `visibility` of their own (see #27436).
-    state('expanded', style({height: '*', visibility: ''})),
-    transition(
-      'expanded <=> collapsed, void => collapsed',
-      animate(EXPANSION_PANEL_ANIMATION_TIMING),
-    ),
-  ]),
+  bodyExpansion: {
+    type: 7,
+    name: 'bodyExpansion',
+    definitions: [
+      {
+        type: 0,
+        name: 'collapsed, void',
+        styles: {type: 6, styles: {'height': '0px', 'visibility': 'hidden'}, offset: null},
+      },
+      {
+        type: 0,
+        name: 'expanded',
+        styles: {type: 6, styles: {'height': '*', 'visibility': ''}, offset: null},
+      },
+      {
+        type: 1,
+        expr: 'expanded <=> collapsed, void => collapsed',
+        animation: {type: 4, styles: null, timings: '225ms cubic-bezier(0.4,0.0,0.2,1)'},
+        options: null,
+      },
+    ],
+    options: {},
+  },
 };
diff --git a/tools/public_api_guard/material/expansion.md b/tools/public_api_guard/material/expansion.md
@@ -6,7 +6,6 @@
 
 import { AfterContentInit } from '@angular/core';
 import { AfterViewInit } from '@angular/core';
-import { AnimationTriggerMetadata } from '@angular/animations';
 import { CdkAccordion } from '@angular/cdk/accordion';
 import { CdkAccordionItem } from '@angular/cdk/accordion';
 import { ElementRef } from '@angular/core';
@@ -26,7 +25,7 @@ import { Subject } from 'rxjs';
 import { TemplatePortal } from '@angular/cdk/portal';
 import { TemplateRef } from '@angular/core';
 
-// @public
+// @public @deprecated
 export const EXPANSION_PANEL_ANIMATION_TIMING = "225ms cubic-bezier(0.4,0.0,0.2,1)";
 
 // @public
@@ -76,8 +75,8 @@ export type MatAccordionTogglePosition = 'before' | 'after';
 
 // @public @deprecated
 export const matExpansionAnimations: {
-    readonly indicatorRotate: AnimationTriggerMetadata;
-    readonly bodyExpansion: AnimationTriggerMetadata;
+    readonly indicatorRotate: any;
+    readonly bodyExpansion: any;
 };
 
 // @public (undocumented)