feat(material/stepper): allow for orientation to be changed dynamically (#22139)

Combines `mat-vertical-stepper` and `mat-horizontal-stepper` into a single `mat-stepper`
class in order to allow for the orientation to be changed dynamically. Also deprecates
`MatVerticalStepper` and `MatHorizontalStepper`.

This is a reimplementation of #9173, however this time I took a different approach which should
make it easier to maintain and eventually remove the two separate steppers. It should result in a
smaller bundle as well. The main differences are:

1. Rather than have 3 components (`MatStepper`, `MatVerticalStepper` and `MatHorizontalStepper`),
these changes combine everything into `MatStepper` while `MatVerticalStepper` and
`MatHorizontalStepper` are only used as injection tokens for backwards compatibility. The `selector`
and `exportAs` of `MatStepper` is changed to match the two individual steppers and the orientation
is inferred from the tag name. This will make it much easier to remove the deprecated directives.
Furthermore, it should result in a smaller bundle since the template and styles only need to be
inlined in one place.
2. `MatVerticalStepper` and `MatHorizontalStepper` are turned into very basic directives that have
the same public API as `MatStepper` and they proxy everything to it. This is primarily so that if
somebody managed to get a hold of a `MatVerticalStepper` or `MatHorizontalStepper` instance, or
they used the old classes to type their own code, it wouldn't result in a breaking change.

Relates to #7700.

Author: crisbeto

src/cdk/stepper/stepper.ts

@@ -315,11 +315,16 @@ export class CdkStepper implements AfterContentInit, AfterViewInit, OnDestroy {
   /** Used to track unique ID for each stepper component. */
   _groupId: number;
 
-  // Note that this isn't an `Input` so it doesn't bleed into the Material stepper.
   /** Orientation of the stepper. */
+  @Input()
   get orientation(): StepperOrientation { return this._orientation; }
   set orientation(value: StepperOrientation) {
-    this._updateOrientation(value);
+    // This is a protected method so that `MatSteppter` can hook into it.
+    this._orientation = value;
+
+    if (this._keyManager) {
+      this._keyManager.withVerticalOrientation(value === 'vertical');
+    }
   }
 
   /**
@@ -432,16 +437,6 @@ export class CdkStepper implements AfterContentInit, AfterViewInit, OnDestroy {
                                                this._getGuidelineLogic(step, isCurrentStep, state);
   }
 
-  /** Updates the stepper orientation. */
-  protected _updateOrientation(value: StepperOrientation) {
-    // This is a protected method so that `MatSteppter` can hook into it.
-    this._orientation = value;
-
-    if (this._keyManager) {
-      this._keyManager.withVerticalOrientation(value === 'vertical');
-    }
-  }
-
   private _getDefaultIndicatorLogic(step: CdkStep, isCurrentStep: boolean): StepState {
     if (step._showError && step.hasError && !isCurrentStep) {
       return STEP_STATE.ERROR;

src/dev-app/stepper/stepper-demo.html

@@ -4,6 +4,9 @@
 <p>
   <mat-checkbox [(ngModel)]="disableRipple">Disable header ripple</mat-checkbox>
 </p>
+<p>
+  <mat-checkbox [(ngModel)]="isVertical">Vertical</mat-checkbox>
+</p>
 <p>
   <button mat-stroked-button (click)="showLabelBottom = !showLabelBottom">
     Toggle label position
@@ -18,10 +21,15 @@
   </mat-form-field>
 </p>
 
-<h3>Linear Vertical Stepper Demo using a single form</h3>
+<h3>Linear Stepper Demo using a single form</h3>
 <form [formGroup]="formGroup">
-  <mat-vertical-stepper #linearVerticalStepper="matVerticalStepper" formArrayName="formArray"
-                        [linear]="!isNonLinear" [disableRipple]="disableRipple" [color]="theme">
+  <mat-stepper
+    #linearStepper="matVerticalStepper"
+    formArrayName="formArray"
+    [orientation]="isVertical ? 'vertical' : 'horizontal'"
+    [linear]="!isNonLinear"
+    [disableRipple]="disableRipple"
+    [color]="theme">
     <mat-step formGroupName="0" [stepControl]="formArray?.get([0]) === null ? undefined! : formArray?.get([0])!">
       <ng-template matStepLabel>Fill out your name</ng-template>
       <mat-form-field>
@@ -61,10 +69,10 @@ <h3>Linear Vertical Stepper Demo using a single form</h3>
       Everything seems correct.
       <div>
         <button mat-button>Done</button>
-        <button type="button" mat-button (click)="linearVerticalStepper.reset()">Reset</button>
+        <button type="button" mat-button (click)="linearStepper.reset()">Reset</button>
       </div>
     </mat-step>
-  </mat-vertical-stepper>
+  </mat-stepper>
 </form>
 
 <h3>Linear Horizontal Stepper Demo using a different form for each step</h3>

src/dev-app/stepper/stepper-demo.ts

@@ -21,6 +21,7 @@ export class StepperDemo implements OnInit {
   isNonEditable = false;
   disableRipple = false;
   showLabelBottom = false;
+  isVertical = false;
 
   nameFormGroup: FormGroup;
   emailFormGroup: FormGroup;

src/material/stepper/public-api.ts

@@ -6,6 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+export {StepperOrientation} from '@angular/cdk/stepper';
 export * from './stepper-module';
 export * from './step-label';
 export * from './stepper';

src/material/stepper/stepper-animations.ts

@@ -23,7 +23,7 @@ export const matStepperAnimations: {
   readonly verticalStepTransition: AnimationTriggerMetadata;
 } = {
   /** Animation that transitions the step along the X axis in a horizontal stepper. */
-  horizontalStepTransition: trigger('stepTransition', [
+  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,
@@ -34,7 +34,7 @@ export const matStepperAnimations: {
   ]),
 
   /** Animation that transitions the step along the Y axis in a vertical stepper. */
-  verticalStepTransition: trigger('stepTransition', [
+  verticalStepTransition: trigger('verticalStepTransition', [
     state('previous', style({height: '0px', visibility: 'hidden'})),
     state('next', style({height: '0px', visibility: 'hidden'})),
     // Transition to `inherit`, rather than `visible`,

src/material/stepper/stepper-horizontal.html

@@ -34,8 +34,6 @@ import {MatStepContent} from './step-content';
   ],
   exports: [
     MatCommonModule,
-    MatHorizontalStepper,
-    MatVerticalStepper,
     MatStep,
     MatStepLabel,
     MatStepper,

src/material/stepper/stepper-module.ts

@@ -0,0 +1,74 @@
+<ng-container [ngSwitch]="orientation">
+  <!-- Horizontal stepper -->
+  <ng-container *ngSwitchCase="'horizontal'">
+    <div class="mat-horizontal-stepper-header-container">
+      <ng-container *ngFor="let step of steps; let i = index; let isLast = last">
+        <ng-container
+          [ngTemplateOutlet]="stepTemplate"
+          [ngTemplateOutletContext]="{step: step, i: i}"></ng-container>
+        <div *ngIf="!isLast" class="mat-stepper-horizontal-line"></div>
+      </ng-container>
+    </div>
+
+    <div class="mat-horizontal-content-container">
+      <div *ngFor="let step of steps; let i = index"
+           class="mat-horizontal-stepper-content" role="tabpanel"
+           [@horizontalStepTransition]="_getAnimationDirection(i)"
+           (@horizontalStepTransition.done)="_animationDone.next($event)"
+           [id]="_getStepContentId(i)"
+           [attr.aria-labelledby]="_getStepLabelId(i)"
+           [attr.aria-expanded]="selectedIndex === i">
+        <ng-container [ngTemplateOutlet]="step.content"></ng-container>
+      </div>
+    </div>
+  </ng-container>
+
+  <!-- Vertical stepper -->
+  <ng-container *ngSwitchCase="'vertical'">
+    <div class="mat-step" *ngFor="let step of steps; let i = index; let isLast = last">
+      <ng-container
+        [ngTemplateOutlet]="stepTemplate"
+        [ngTemplateOutletContext]="{step: step, i: i}"></ng-container>
+      <div class="mat-vertical-content-container" [class.mat-stepper-vertical-line]="!isLast">
+        <div class="mat-vertical-stepper-content" role="tabpanel"
+             [@verticalStepTransition]="_getAnimationDirection(i)"
+             (@verticalStepTransition.done)="_animationDone.next($event)"
+             [id]="_getStepContentId(i)"
+             [attr.aria-labelledby]="_getStepLabelId(i)"
+             [attr.aria-expanded]="selectedIndex === i">
+          <div class="mat-vertical-content">
+            <ng-container [ngTemplateOutlet]="step.content"></ng-container>
+          </div>
+        </div>
+      </div>
+    </div>
+  </ng-container>
+
+</ng-container>
+
+<!-- Common step templating -->
+<ng-template let-step="step" let-i="i" #stepTemplate>
+  <mat-step-header
+    [class.mat-horizontal-stepper-header]="orientation === 'horizontal'"
+    [class.mat-vertical-stepper-header]="orientation === 'vertical'"
+    (click)="step.select()"
+    (keydown)="_onKeydown($event)"
+    [tabIndex]="_getFocusIndex() === i ? 0 : -1"
+    [id]="_getStepLabelId(i)"
+    [attr.aria-posinset]="i + 1"
+    [attr.aria-setsize]="steps.length"
+    [attr.aria-controls]="_getStepContentId(i)"
+    [attr.aria-selected]="selectedIndex == i"
+    [attr.aria-label]="step.ariaLabel || null"
+    [attr.aria-labelledby]="(!step.ariaLabel && step.ariaLabelledby) ? step.ariaLabelledby : null"
+    [index]="i"
+    [state]="_getIndicatorType(i, step.state)"
+    [label]="step.stepLabel || step.label"
+    [selected]="selectedIndex === i"
+    [active]="step.completed || selectedIndex === i || !linear"
+    [optional]="step.optional"
+    [errorMessage]="step.errorMessage"
+    [iconOverrides]="_iconOverrides"
+    [disableRipple]="disableRipple"
+    [color]="step.color || color"></mat-step-header>
+</ng-template>