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

Author: crisbeto

src/cdk/stepper/public-api.ts

@@ -7,7 +7,6 @@
  */
 
 export * from './stepper';
-export * from './step-label';
 export * from './stepper-button';
 export * from './stepper-module';
 export * from './step-header';

src/cdk/stepper/step-label.ts

@@ -7,8 +7,7 @@
  */
 
 import {NgModule} from '@angular/core';
-import {CdkStepper, CdkStep} from './stepper';
-import {CdkStepLabel} from './step-label';
+import {CdkStepper, CdkStep, CdkStepLabel} from './stepper';
 import {CdkStepperNext, CdkStepperPrevious} from './stepper-button';
 import {CdkStepHeader} from './step-header';
 import {BidiModule} from '@angular/cdk/bidi';

src/cdk/stepper/stepper-module.ts

@@ -44,7 +44,6 @@ import {Observable, of as observableOf, Subject} from 'rxjs';
 import {startWith, takeUntil} from 'rxjs/operators';
 
 import {CdkStepHeader} from './step-header';
-import {CdkStepLabel} from './step-label';
 
 /**
  * Position state of the content of each step in stepper that is used for transitioning
@@ -100,6 +99,25 @@ export interface StepperOptions {
   displayDefaultIndicatorType?: boolean;
 }
 
+@Directive({selector: '[cdkStepLabel]'})
+export class CdkStepLabel {
+  template = inject<TemplateRef<any>>(TemplateRef);
+
+  constructor(...args: unknown[]);
+
+  constructor() {
+    const step = inject(CdkStep, {optional: true});
+    const stepper = inject(CdkStepper, {optional: true});
+
+    // The content gets passed down into the step header components so we need to
+    // notify the stepper if they come in later or they might not get picked up.
+    if (step) {
+      step.stepLabel = this;
+      stepper?._stateChanged();
+    }
+  }
+}
+
 @Component({
   selector: 'cdk-step',
   exportAs: 'cdkStep',
@@ -113,7 +131,16 @@ export class CdkStep implements OnChanges {
   _displayDefaultIndicatorType: boolean;
 
   /** Template for step label if it exists. */
-  @ContentChild(CdkStepLabel) stepLabel: CdkStepLabel;
+  @ContentChild(CdkStepLabel)
+  get stepLabel() {
+    return this._stepLabel;
+  }
+  set stepLabel(label: CdkStepLabel) {
+    this._stepLabel = label;
+  }
+  protected _stepLabel: CdkStepLabel;
+
+  // stepLabel: CdkStepLabel
 
   /** Forms that have been projected into the step. */
   @ContentChildren(
@@ -122,9 +149,7 @@ export class CdkStep implements OnChanges {
     // the directives. The type is marked as `Partial` in case we run into a class that provides
     // itself as `ControlContainer` but doesn't have the same interface as the directives.
     ControlContainer,
-    {
-      descendants: true,
-    },
+    {descendants: true},
   )
   protected _childForms: QueryList<Partial<NgForm | FormGroupDirective>> | undefined;
 

src/cdk/stepper/stepper.ts

@@ -62,8 +62,14 @@ export class MatStep extends CdkStep implements ErrorStateMatcher, AfterContentI
   private _isSelected = Subscription.EMPTY;
 
   /** Content for step label given by `<ng-template matStepLabel>`. */
-  // We need an initializer here to avoid a TS error.
-  @ContentChild(MatStepLabel) override stepLabel: MatStepLabel = undefined!;
+  @ContentChild(MatStepLabel)
+  override get stepLabel() {
+    return this._stepLabel;
+  }
+  override set stepLabel(label: MatStepLabel) {
+    this._stepLabel = label;
+  }
+  protected override _stepLabel: MatStepLabel = undefined!;
 
   /**
    * Theme color for the particular step. This API is supported in M2 themes

src/material/stepper/stepper.ts

@@ -59,7 +59,10 @@ export class CdkStep implements OnChanges {
     _showError(): boolean;
     state: StepState;
     stepControl: AbstractControl;
-    stepLabel: CdkStepLabel;
+    get stepLabel(): CdkStepLabel;
+    set stepLabel(label: CdkStepLabel);
+    // (undocumented)
+    protected _stepLabel: CdkStepLabel;
     // (undocumented)
     _stepper: CdkStepper;
     // (undocumented)
@@ -143,7 +146,7 @@ export class CdkStepperModule {
     // (undocumented)
     static ɵinj: i0.ɵɵInjectorDeclaration<CdkStepperModule>;
     // (undocumented)
-    static ɵmod: i0.ɵɵNgModuleDeclaration<CdkStepperModule, never, [typeof i1.BidiModule, typeof i2.CdkStep, typeof i2.CdkStepper, typeof i3.CdkStepHeader, typeof i4.CdkStepLabel, typeof i5.CdkStepperNext, typeof i5.CdkStepperPrevious], [typeof i2.CdkStep, typeof i2.CdkStepper, typeof i3.CdkStepHeader, typeof i4.CdkStepLabel, typeof i5.CdkStepperNext, typeof i5.CdkStepperPrevious]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<CdkStepperModule, never, [typeof i1.BidiModule, typeof i2.CdkStep, typeof i2.CdkStepper, typeof i3.CdkStepHeader, typeof i2.CdkStepLabel, typeof i4.CdkStepperNext, typeof i4.CdkStepperPrevious], [typeof i2.CdkStep, typeof i2.CdkStepper, typeof i3.CdkStepHeader, typeof i2.CdkStepLabel, typeof i4.CdkStepperNext, typeof i4.CdkStepperPrevious]>;
 }
 
 // @public

tools/public_api_guard/cdk/stepper.md

@@ -55,7 +55,10 @@ export class MatStep extends CdkStep implements ErrorStateMatcher, AfterContentI
     // (undocumented)
     ngOnDestroy(): void;
     _portal: TemplatePortal;
-    stepLabel: MatStepLabel;
+    get stepLabel(): MatStepLabel;
+    set stepLabel(label: MatStepLabel);
+    // (undocumented)
+    protected _stepLabel: MatStepLabel;
     // (undocumented)
     static ɵcmp: i0.ɵɵComponentDeclaration<MatStep, "mat-step", ["matStep"], { "color": { "alias": "color"; "required": false; }; }, {}, ["stepLabel", "_lazyContent"], ["*"], true, never>;
     // (undocumented)