fixup! fix(material/stepper): switch away from animations module

Author: crisbeto

src/material/stepper/stepper.scss

@@ -203,6 +203,10 @@
     transform: none;
     height: auto;
   }
+
+  .mat-stepper-horizontal:not(.mat-stepper-animating) &.mat-horizontal-stepper-content-current {
+    overflow: visible;
+  }
 }
 
 .mat-horizontal-content-container {

src/material/stepper/stepper.ts

@@ -9,6 +9,7 @@
 import {CdkStep, CdkStepper} from '@angular/cdk/stepper';
 import {
   AfterContentInit,
+  AfterViewInit,
   ANIMATION_MODULE_TYPE,
   ChangeDetectionStrategy,
   Component,
@@ -23,6 +24,7 @@ import {
   Output,
   QueryList,
   Renderer2,
+  signal,
   TemplateRef,
   ViewChildren,
   ViewContainerRef,
@@ -127,6 +129,7 @@ export class MatStep extends CdkStep implements ErrorStateMatcher, AfterContentI
     '[class.mat-stepper-label-position-bottom]':
       'orientation === "horizontal" && labelPosition == "bottom"',
     '[class.mat-stepper-header-position-bottom]': 'headerPosition === "bottom"',
+    '[class.mat-stepper-animating]': '_isAnimating()',
     '[style.--mat-stepper-animation-duration]': '_getAnimationDuration()',
     '[attr.aria-orientation]': 'orientation',
     'role': 'tablist',
@@ -136,11 +139,12 @@ export class MatStep extends CdkStep implements ErrorStateMatcher, AfterContentI
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [NgTemplateOutlet, MatStepHeader],
 })
-export class MatStepper extends CdkStepper implements AfterContentInit, OnDestroy {
+export class MatStepper extends CdkStepper implements AfterViewInit, AfterContentInit, OnDestroy {
   private _ngZone = inject(NgZone);
   private _renderer = inject(Renderer2);
   private _animationsModule = inject(ANIMATION_MODULE_TYPE, {optional: true});
   private _cleanupTransition: (() => void) | undefined;
+  protected _isAnimating = signal(false);
 
   /** The list of step headers of the steps in the stepper. */
   @ViewChildren(MatStepHeader) override _stepHeader: QueryList<MatStepHeader> = undefined!;
@@ -223,7 +227,9 @@ export class MatStepper extends CdkStepper implements AfterContentInit, OnDestro
     this.selectedIndexChange.pipe(takeUntil(this._destroyed)).subscribe(() => {
       const duration = this._getAnimationDuration();
       if (duration === '0ms' || duration === '0s') {
-        this.animationDone.emit();
+        this._onAnimationDone();
+      } else {
+        this._isAnimating.set(true);
       }
     });
 
@@ -244,6 +250,35 @@ export class MatStepper extends CdkStepper implements AfterContentInit, OnDestro
     });
   }
 
+  override ngAfterViewInit(): void {
+    super.ngAfterViewInit();
+
+    // Prior to #30314 the stepper had animation `done` events bound to each animated container.
+    // The animations module was firing them on initialization and for each subsequent animation.
+    // Since the events were bound in the template, it had the unintended side-effect of triggering
+    // change detection as well. It appears that this side-effect ended up being load-bearing,
+    // because it was ensuring that the content elements (e.g. `matStepLabel`) that are defined
+    // in sub-components actually get picked up in a timely fashion. This subscription simulates
+    // the same change detection by using `queueMicrotask` similarly to the animations module.
+    if (typeof queueMicrotask === 'function') {
+      let hasEmittedInitial = false;
+      this._animatedContainers.changes
+        .pipe(startWith(null), takeUntil(this._destroyed))
+        .subscribe(() =>
+          queueMicrotask(() => {
+            // Simulate the initial `animationDone` event
+            // that gets emitted by the animations module.
+            if (!hasEmittedInitial) {
+              hasEmittedInitial = true;
+              this.animationDone.emit();
+            }
+
+            this._stateChanged();
+          }),
+        );
+    }
+  }
+
   override ngOnDestroy(): void {
     super.ngOnDestroy();
     this._cleanupTransition?.();
@@ -292,7 +327,12 @@ export class MatStepper extends CdkStepper implements AfterContentInit, OnDestro
       this._animatedContainers.find(ref => ref.nativeElement === target);
 
     if (shouldEmit) {
-      this.animationDone.emit();
+      this._onAnimationDone();
     }
   };
+
+  private _onAnimationDone() {
+    this._isAnimating.set(false);
+    this.animationDone.emit();
+  }
 }

tools/public_api_guard/material/stepper.md

@@ -34,6 +34,7 @@ import { Subject } from 'rxjs';
 import { TemplatePortal } from '@angular/cdk/portal';
 import { TemplateRef } from '@angular/core';
 import { ThemePalette } from '@angular/material/core';
+import { WritableSignal } from '@angular/core';
 
 // @public
 export const MAT_STEPPER_INTL_PROVIDER: {
@@ -116,7 +117,7 @@ export class MatStepLabel extends CdkStepLabel {
 }
 
 // @public (undocumented)
-export class MatStepper extends CdkStepper implements AfterContentInit, OnDestroy {
+export class MatStepper extends CdkStepper implements AfterViewInit, AfterContentInit, OnDestroy {
     constructor(...args: unknown[]);
     _animatedContainers: QueryList<ElementRef>;
     readonly animationDone: EventEmitter<void>;
@@ -129,11 +130,15 @@ export class MatStepper extends CdkStepper implements AfterContentInit, OnDestro
     headerPosition: 'top' | 'bottom';
     _iconOverrides: Record<string, TemplateRef<MatStepperIconContext>>;
     _icons: QueryList<MatStepperIcon>;
+    // (undocumented)
+    protected _isAnimating: WritableSignal<boolean>;
     protected _isServer: boolean;
     labelPosition: 'bottom' | 'end';
     // (undocumented)
     ngAfterContentInit(): void;
     // (undocumented)
+    ngAfterViewInit(): void;
+    // (undocumented)
     ngOnDestroy(): void;
     _stepHeader: QueryList<MatStepHeader>;
     // (undocumented)