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

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

@@ -1,8 +1,10 @@
 <mat-checkbox [(ngModel)]="isNonLinear">Disable linear mode</mat-checkbox>
+<mat-checkbox [(ngModel)]="isVertical">Vertical</mat-checkbox>
 
-<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 formArrayName="formArray" [linear]="!isNonLinear">
+  <mat-stepper [orientation]="isVertical ? 'vertical' : 'horizontal'" formArrayName="formArray"
+    [linear]="!isNonLinear">
     <mat-step formGroupName="0" [stepControl]="formArray?.get([0])">
       <ng-template matStepLabel>Fill out your name</ng-template>
       <mat-form-field>
@@ -40,7 +42,7 @@ <h3>Linear Vertical Stepper Demo using a single form</h3>
         <button mat-button>Done</button>
       </div>
     </mat-step>
-  </mat-vertical-stepper>
+  </mat-stepper>
 </form>
 
 <h3>Linear Horizontal Stepper Demo using a different form for each step</h3>

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

@@ -18,6 +18,7 @@ export class StepperDemo {
   formGroup: FormGroup;
   isNonLinear = false;
   isNonEditable = false;
+  isVertical = true;
 
   nameFormGroup: FormGroup;
   emailFormGroup: FormGroup;

src/lib/stepper/stepper-animations.ts

@@ -0,0 +1,35 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {
+  animate,
+  state,
+  style,
+  transition,
+  trigger,
+  AnimationTriggerMetadata,
+} from '@angular/animations';
+
+/**
+ * Animations used by the Material stepper.
+ * @docs-private
+ */
+export const matStepperAnimations: AnimationTriggerMetadata[] = [
+  trigger('horizontalStepTransition', [
+    state('previous', style({transform: 'translate3d(-100%, 0, 0)', visibility: 'hidden'})),
+    state('current', style({transform: 'none', visibility: 'visible'})),
+    state('next', style({transform: 'translate3d(100%, 0, 0)', visibility: 'hidden'})),
+    transition('* => *', animate('500ms cubic-bezier(0.35, 0, 0.25, 1)'))
+  ]),
+  trigger('verticalStepTransition', [
+    state('previous', style({height: '0px', visibility: 'hidden'})),
+    state('next', style({height: '0px', visibility: 'hidden'})),
+    state('current', style({height: '*', visibility: 'visible'})),
+    transition('* <=> current', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)'))
+  ])
+];

src/lib/stepper/stepper.html

@@ -0,0 +1,59 @@
+<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; context: {$implicit: 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)"
+           [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 *ngSwitchDefault>
+    <div class="mat-step" *ngFor="let step of _steps; let i = index; let isLast = last">
+      <ng-container *ngTemplateOutlet="stepTemplate; context: {$implicit: 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)"
+             [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 let-i="i" #stepTemplate>
+  <mat-step-header [ngClass]="'mat-' + orientation + '-stepper-header'"
+    (click)="step.select()"
+    (keydown)="_onKeydown($event)"
+    [tabIndex]="_focusIndex == i ? 0 : -1"
+    [id]="_getStepLabelId(i)"
+    [attr.aria-controls]="_getStepContentId(i)"
+    [attr.aria-selected]="selectedIndex === i"
+    [index]="i"
+    [icon]="_getIndicatorType(i)"
+    [label]="step.stepLabel || step.label"
+    [selected]="selectedIndex === i"
+    [active]="step.completed || selectedIndex === i || !linear"
+    [optional]="step.optional">
+  </mat-step-header>
+</ng-template>

src/lib/stepper/stepper.ts

@@ -6,29 +6,33 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {animate, state, style, transition, trigger} from '@angular/animations';
 import {CdkStep, CdkStepper} from '@angular/cdk/stepper';
 import {
   AfterContentInit,
   Component,
   ContentChild,
   ContentChildren,
-  Directive,
   ElementRef,
   forwardRef,
   Inject,
+  Input,
   QueryList,
   SkipSelf,
   ViewChildren,
   ViewEncapsulation,
   ChangeDetectionStrategy,
+  OnInit,
 } from '@angular/core';
 import {FormControl, FormGroupDirective, NgForm} from '@angular/forms';
 import {ErrorStateMatcher} from '@angular/material/core';
 import {MatStepHeader} from './step-header';
 import {MatStepLabel} from './step-label';
+import {matStepperAnimations} from './stepper-animations';
 import {takeUntil} from 'rxjs/operators/takeUntil';
 
+/** Possible orientations for the Material stepper. */
+export type MatStepperOrientation = 'horizontal' | 'vertical';
+
 @Component({
   moduleId: module.id,
   selector: 'mat-step',
@@ -61,8 +65,23 @@ export class MatStep extends CdkStep implements ErrorStateMatcher {
   }
 }
 
-@Directive({
-  selector: '[matStepper]'
+@Component({
+  moduleId: module.id,
+  selector: 'mat-stepper, [matStepper]',
+  templateUrl: 'stepper.html',
+  styleUrls: ['stepper.css'],
+  inputs: ['selectedIndex'],
+  exportAs: 'matStepper',
+  encapsulation: ViewEncapsulation.None,
+  preserveWhitespaces: false,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  animations: matStepperAnimations,
+  host: {
+    '[class.mat-stepper-horizontal]': 'orientation === "horizontal"',
+    '[class.mat-stepper-vertical]': 'orientation === "vertical"',
+    '[attr.aria-orientation]': 'orientation',
+    'role': 'tablist',
+  },
 })
 export class MatStepper extends CdkStepper implements AfterContentInit {
   /** The list of step headers of the steps in the stepper. */
@@ -71,6 +90,9 @@ export class MatStepper extends CdkStepper implements AfterContentInit {
   /** Steps that the stepper holds. */
   @ContentChildren(MatStep) _steps: QueryList<MatStep>;
 
+  /** Orientation of the stepper. */
+  @Input() orientation: MatStepperOrientation = 'vertical';
+
   ngAfterContentInit() {
     // Mark the component for change detection whenever the content children query changes
     this._steps.changes.pipe(takeUntil(this._destroyed)).subscribe(() => this._stateChanged());
@@ -79,54 +101,46 @@ export class MatStepper extends CdkStepper implements AfterContentInit {
 
 @Component({
   moduleId: module.id,
+  encapsulation: ViewEncapsulation.None,
+  preserveWhitespaces: false,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  templateUrl: 'stepper.html',
+  styleUrls: ['stepper.css'],
   selector: 'mat-horizontal-stepper',
   exportAs: 'matHorizontalStepper',
-  templateUrl: 'stepper-horizontal.html',
-  styleUrls: ['stepper.css'],
-  inputs: ['selectedIndex'],
+  animations: matStepperAnimations,
+  providers: [{provide: MatStepper, useExisting: MatHorizontalStepper}],
   host: {
     'class': 'mat-stepper-horizontal',
     'aria-orientation': 'horizontal',
     'role': 'tablist',
   },
-  animations: [
-    trigger('stepTransition', [
-      state('previous', style({transform: 'translate3d(-100%, 0, 0)', visibility: 'hidden'})),
-      state('current', style({transform: 'none', visibility: 'visible'})),
-      state('next', style({transform: 'translate3d(100%, 0, 0)', visibility: 'hidden'})),
-      transition('* => *', animate('500ms cubic-bezier(0.35, 0, 0.25, 1)'))
-    ])
-  ],
-  providers: [{provide: MatStepper, useExisting: MatHorizontalStepper}],
-  encapsulation: ViewEncapsulation.None,
-  preserveWhitespaces: false,
-  changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class MatHorizontalStepper extends MatStepper { }
+export class MatHorizontalStepper extends MatStepper implements OnInit {
+  ngOnInit() {
+    this.orientation = 'horizontal';
+  }
+}
 
 @Component({
   moduleId: module.id,
+  encapsulation: ViewEncapsulation.None,
+  preserveWhitespaces: false,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  templateUrl: 'stepper.html',
+  styleUrls: ['stepper.css'],
   selector: 'mat-vertical-stepper',
   exportAs: 'matVerticalStepper',
-  templateUrl: 'stepper-vertical.html',
-  styleUrls: ['stepper.css'],
-  inputs: ['selectedIndex'],
+  providers: [{provide: MatStepper, useExisting: MatVerticalStepper}],
+  animations: matStepperAnimations,
   host: {
     'class': 'mat-stepper-vertical',
     'aria-orientation': 'vertical',
     'role': 'tablist',
   },
-  animations: [
-    trigger('stepTransition', [
-      state('previous', style({height: '0px', visibility: 'hidden'})),
-      state('next', style({height: '0px', visibility: 'hidden'})),
-      state('current', style({height: '*', visibility: 'visible'})),
-      transition('* <=> current', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)'))
-    ])
-  ],
-  providers: [{provide: MatStepper, useExisting: MatVerticalStepper}],
-  encapsulation: ViewEncapsulation.None,
-  preserveWhitespaces: false,
-  changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class MatVerticalStepper extends MatStepper { }
+export class MatVerticalStepper extends MatStepper implements OnInit {
+  ngOnInit() {
+    this.orientation = 'vertical';
+  }
+}