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

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 '', rather than `visible`, because visibility on a child element overrides
     // the one from the parent, making this element focusable inside of a `hidden` element.
@@ -33,7 +33,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 '', rather than `visible`, because visibility on a child element overrides

src/material/stepper/stepper-horizontal.html

@@ -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>

src/material/stepper/stepper-vertical.html

@@ -48,7 +48,7 @@ import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {Observable, Subject} from 'rxjs';
 import {map, take} from 'rxjs/operators';
 import {MatStepHeader, MatStepperModule} from './index';
-import {MatHorizontalStepper, MatStep, MatStepper, MatVerticalStepper} from './stepper';
+import {MatStep, MatStepper} from './stepper';
 import {MatStepperNext, MatStepperPrevious} from './stepper-button';
 import {MatStepperIntl} from './stepper-intl';
 import {MatFormFieldModule} from '@angular/material/form-field';
@@ -81,7 +81,7 @@ describe('MatStepper', () => {
     });
 
     it('should throw when a negative `selectedIndex` is assigned', () => {
-      const stepperComponent: MatVerticalStepper = fixture.debugElement
+      const stepperComponent: MatStepper = fixture.debugElement
           .query(By.css('mat-vertical-stepper'))!.componentInstance;
 
       expect(() => {
@@ -91,7 +91,7 @@ describe('MatStepper', () => {
     });
 
     it('should throw when an out-of-bounds `selectedIndex` is assigned', () => {
-      const stepperComponent: MatVerticalStepper = fixture.debugElement
+      const stepperComponent: MatStepper = fixture.debugElement
           .query(By.css('mat-vertical-stepper'))!.componentInstance;
 
       expect(() => {
@@ -360,7 +360,7 @@ describe('MatStepper', () => {
     });
 
     it('should adjust the index when removing a step before the current one', () => {
-      const stepperComponent: MatVerticalStepper = fixture.debugElement
+      const stepperComponent: MatStepper = fixture.debugElement
           .query(By.css('mat-vertical-stepper'))!.componentInstance;
 
       stepperComponent.selectedIndex = 2;
@@ -395,20 +395,12 @@ describe('MatStepper', () => {
           .every(element => element.classList.contains('mat-focus-indicator'))).toBe(true);
     });
 
-    it('should throw when trying to change the orientation of a stepper', () => {
-      const stepperComponent: MatStepper = fixture.debugElement
-          .query(By.css('mat-vertical-stepper'))!.componentInstance;
-
-      expect(() => stepperComponent.orientation = 'horizontal')
-        .toThrowError('Updating the orientation of a Material stepper is not supported.');
-    });
-
   });
 
   describe('basic stepper when attempting to set the selected step too early', () => {
     it('should not throw', () => {
       const fixture = createComponent(SimpleMatVerticalStepperApp);
-      const stepperComponent: MatVerticalStepper = fixture.debugElement
+      const stepperComponent: MatStepper = fixture.debugElement
           .query(By.css('mat-vertical-stepper'))!.componentInstance;
 
       expect(() => stepperComponent.selected).not.toThrow();
@@ -418,7 +410,7 @@ describe('MatStepper', () => {
   describe('basic stepper when attempting to set the selected step too early', () => {
     it('should not throw', () => {
       const fixture = createComponent(SimpleMatVerticalStepperApp);
-      const stepperComponent: MatVerticalStepper = fixture.debugElement
+      const stepperComponent: MatStepper = fixture.debugElement
           .query(By.css('mat-vertical-stepper'))!.componentInstance;
 
       expect(() => stepperComponent.selected = null!).not.toThrow();
@@ -529,7 +521,7 @@ describe('MatStepper', () => {
   describe('linear stepper', () => {
     let fixture: ComponentFixture<LinearMatVerticalStepperApp>;
     let testComponent: LinearMatVerticalStepperApp;
-    let stepperComponent: MatVerticalStepper;
+    let stepperComponent: MatStepper;
 
     beforeEach(() => {
       fixture = createComponent(LinearMatVerticalStepperApp);
@@ -769,13 +761,13 @@ describe('MatStepper', () => {
 
   describe('linear stepper with a pre-defined selectedIndex', () => {
     let preselectedFixture: ComponentFixture<SimplePreselectedMatHorizontalStepperApp>;
-    let stepper: MatHorizontalStepper;
+    let stepper: MatStepper;
 
     beforeEach(() => {
       preselectedFixture = createComponent(SimplePreselectedMatHorizontalStepperApp);
       preselectedFixture.detectChanges();
       stepper = preselectedFixture.debugElement
-          .query(By.directive(MatHorizontalStepper))!.componentInstance;
+          .query(By.directive(MatStepper))!.componentInstance;
     });
 
     it('should not throw', () => {
@@ -798,8 +790,8 @@ describe('MatStepper', () => {
       noStepControlFixture.detectChanges();
     });
     it('should not move to the next step if the current one is not completed ', () => {
-      const stepper: MatHorizontalStepper = noStepControlFixture.debugElement
-          .query(By.directive(MatHorizontalStepper))!.componentInstance;
+      const stepper: MatStepper = noStepControlFixture.debugElement
+          .query(By.directive(MatStepper))!.componentInstance;
 
       const headers = noStepControlFixture.debugElement
           .queryAll(By.css('.mat-horizontal-stepper-header'));
@@ -825,8 +817,8 @@ describe('MatStepper', () => {
         expect(controlAndBindingFixture.componentInstance.steps[0].control.valid).toBe(true);
         expect(controlAndBindingFixture.componentInstance.steps[0].completed).toBe(false);
 
-        const stepper: MatHorizontalStepper = controlAndBindingFixture.debugElement
-            .query(By.directive(MatHorizontalStepper))!.componentInstance;
+        const stepper: MatStepper = controlAndBindingFixture.debugElement
+            .query(By.directive(MatStepper))!.componentInstance;
 
         const headers = controlAndBindingFixture.debugElement
             .queryAll(By.css('.mat-horizontal-stepper-header'));