fix(material/stepper): remove remaining animation dependencies

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

Hide file tree

Showing 3 changed files with 140 additions and 49 deletions.
diff --git a/src/material/stepper/BUILD.bazel b/src/material/stepper/BUILD.bazel
@@ -29,7 +29,6 @@ ng_module(
         "//src/cdk/stepper",
         "//src/material/core",
         "//src/material/icon",
-        "@npm//@angular/animations",
         "@npm//@angular/common",
         "@npm//@angular/core",
         "@npm//@angular/forms",

diff --git a/src/material/stepper/stepper-animations.ts b/src/material/stepper/stepper-animations.ts
@@ -5,17 +5,6 @@
  * 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,
-  state,
-  style,
-  transition,
-  trigger,
-  AnimationTriggerMetadata,
-  group,
-  query,
-  animateChild,
-} from '@angular/animations';
 
 /**
  * Animations used by the Material steppers.
@@ -24,46 +13,150 @@ import {
  * @breaking-change 21.0.0
  */
 export const matStepperAnimations: {
-  readonly horizontalStepTransition: AnimationTriggerMetadata;
-  readonly verticalStepTransition: AnimationTriggerMetadata;
+  readonly horizontalStepTransition: any;
+  readonly verticalStepTransition: any;
 } = {
+  // Represents:
+  // trigger('horizontalStepTransition', [
+  //   state('previous', style({transform: 'translate3d(-100%, 0, 0)', visibility: 'hidden'})),
+  //   // Transition to `inherit`, rather than `visible`,
+  //   // because visibility on a child element the one from the parent,
+  //   // making this element focusable inside of a `hidden` element.
+  //   state('current', style({transform: 'none', visibility: 'inherit'})),
+  //   state('next', style({transform: 'translate3d(100%, 0, 0)', visibility: 'hidden'})),
+  //   transition(
+  //     '* => *',
+  //     group([
+  //       animate('{{animationDuration}} cubic-bezier(0.35, 0, 0.25, 1)'),
+  //       query('@*', animateChild(), {optional: true}),
+  //     ]),
+  //     {
+  //       params: {animationDuration: '500ms'},
+  //     },
+  //   ),
+  // ])
+
   /** Animation that transitions the step along the X axis in a horizontal stepper. */
-  horizontalStepTransition: trigger('horizontalStepTransition', [
-    state('previous', style({transform: 'translate3d(-100%, 0, 0)', visibility: 'hidden'})),
-    // Transition to `inherit`, rather than `visible`,
-    // because visibility on a child element the one from the parent,
-    // making this element focusable inside of a `hidden` element.
-    state('current', style({transform: 'none', visibility: 'inherit'})),
-    state('next', style({transform: 'translate3d(100%, 0, 0)', visibility: 'hidden'})),
-    transition(
-      '* => *',
-      group([
-        animate('{{animationDuration}} cubic-bezier(0.35, 0, 0.25, 1)'),
-        query('@*', animateChild(), {optional: true}),
-      ]),
+  horizontalStepTransition: {
+    type: 7,
+    name: 'horizontalStepTransition',
+    definitions: [
+      {
+        type: 0,
+        name: 'previous',
+        styles: {
+          type: 6,
+          styles: {transform: 'translate3d(-100%, 0, 0)', visibility: 'hidden'},
+          offset: null,
+        },
+      },
+      {
+        type: 0,
+        name: 'current',
+        styles: {
+          type: 6,
+          styles: {transform: 'none', visibility: 'inherit'},
+          offset: null,
+        },
+      },
+      {
+        type: 0,
+        name: 'next',
+        styles: {
+          type: 6,
+          styles: {transform: 'translate3d(100%, 0, 0)', visibility: 'hidden'},
+          offset: null,
+        },
+      },
       {
-        params: {'animationDuration': '500ms'},
+        type: 1,
+        expr: '* => *',
+        animation: {
+          type: 3,
+          steps: [
+            {
+              type: 4,
+              styles: null,
+              timings: '{{animationDuration}} cubic-bezier(0.35, 0, 0.25, 1)',
+            },
+            {
+              type: 11,
+              selector: '@*',
+              animation: {type: 9, options: null},
+              options: {optional: true},
+            },
+          ],
+          options: null,
+        },
+        options: {params: {animationDuration: '500ms'}},
       },
-    ),
-  ]),
+    ],
+    options: {},
+  },
+
+  // Represents:
+  // trigger('verticalStepTransition', [
+  //   state('previous', style({height: '0px', visibility: 'hidden'})),
+  //   state('next', style({height: '0px', visibility: 'hidden'})),
+  //   // Transition to `inherit`, rather than `visible`,
+  //   // because visibility on a child element the one from the parent,
+  //   // making this element focusable inside of a `hidden` element.
+  //   state('current', style({height: '*', visibility: 'inherit'})),
+  //   transition(
+  //     '* <=> current',
+  //     group([
+  //       animate('{{animationDuration}} cubic-bezier(0.4, 0.0, 0.2, 1)'),
+  //       query('@*', animateChild(), {optional: true}),
+  //     ]),
+  //     {
+  //       params: {animationDuration: '225ms'},
+  //     },
+  //   ),
+  // ])
 
   /** Animation that transitions the step along the Y axis in a vertical stepper. */
-  verticalStepTransition: trigger('verticalStepTransition', [
-    state('previous', style({height: '0px', visibility: 'hidden'})),
-    state('next', style({height: '0px', visibility: 'hidden'})),
-    // Transition to `inherit`, rather than `visible`,
-    // because visibility on a child element the one from the parent,
-    // making this element focusable inside of a `hidden` element.
-    state('current', style({height: '*', visibility: 'inherit'})),
-    transition(
-      '* <=> current',
-      group([
-        animate('{{animationDuration}} cubic-bezier(0.4, 0.0, 0.2, 1)'),
-        query('@*', animateChild(), {optional: true}),
-      ]),
+  verticalStepTransition: {
+    type: 7,
+    name: 'verticalStepTransition',
+    definitions: [
+      {
+        type: 0,
+        name: 'previous',
+        styles: {type: 6, styles: {'height': '0px', visibility: 'hidden'}, offset: null},
+      },
+      {
+        type: 0,
+        name: 'next',
+        styles: {type: 6, styles: {'height': '0px', visibility: 'hidden'}, offset: null},
+      },
+      {
+        type: 0,
+        name: 'current',
+        styles: {type: 6, styles: {'height': '*', visibility: 'inherit'}, offset: null},
+      },
       {
-        params: {'animationDuration': '225ms'},
+        type: 1,
+        expr: '* <=> current',
+        animation: {
+          type: 3,
+          steps: [
+            {
+              type: 4,
+              styles: null,
+              timings: '{{animationDuration}} cubic-bezier(0.4, 0.0, 0.2, 1)',
+            },
+            {
+              type: 11,
+              selector: '@*',
+              animation: {type: 9, options: null},
+              options: {optional: true},
+            },
+          ],
+          options: null,
+        },
+        options: {params: {animationDuration: '225ms'}},
       },
-    ),
-  ]),
+    ],
+    options: {},
+  },
 };
diff --git a/tools/public_api_guard/material/stepper.md b/tools/public_api_guard/material/stepper.md
@@ -7,7 +7,6 @@
 import { AbstractControl } from '@angular/forms';
 import { AfterContentInit } from '@angular/core';
 import { AfterViewInit } from '@angular/core';
-import { AnimationTriggerMetadata } from '@angular/animations';
 import { CdkStep } from '@angular/cdk/stepper';
 import { CdkStepHeader } from '@angular/cdk/stepper';
 import { CdkStepLabel } from '@angular/cdk/stepper';
@@ -153,8 +152,8 @@ export class MatStepper extends CdkStepper implements AfterViewInit, AfterConten
 
 // @public @deprecated
 export const matStepperAnimations: {
-    readonly horizontalStepTransition: AnimationTriggerMetadata;
-    readonly verticalStepTransition: AnimationTriggerMetadata;
+    readonly horizontalStepTransition: any;
+    readonly verticalStepTransition: any;
 };
 
 // @public