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

src/cdk/stepper/stepper.ts

@@ -332,6 +332,17 @@ 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. */
+  get orientation(): StepperOrientation { return this._orientation; }
+  set orientation(value: StepperOrientation) {
+    this._updateOrientation(value);
+  }
+
+  /**
+   * @deprecated To be turned into a private property. Use `orientation` instead.
+   * @breaking-change 13.0.0
+   */
   protected _orientation: StepperOrientation = 'horizontal';
 
   constructor(
@@ -439,6 +450,16 @@ 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/material/stepper/BUILD.bazel

@@ -24,6 +24,7 @@ ng_module(
     ] + glob(["**/*.html"]),
     module_name = "@angular/material/stepper",
     deps = [
+        "//src:dev_mode_types",
         "//src/cdk/a11y",
         "//src/cdk/bidi",
         "//src/cdk/portal",

src/material/stepper/stepper.spec.ts

@@ -395,6 +395,14 @@ 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', () => {

src/material/stepper/stepper.ts

@@ -172,6 +172,12 @@ export class MatStepper extends CdkStepper implements AfterContentInit {
     });
   }
 
+  protected _updateOrientation() {
+    if ((typeof ngDevMode === 'undefined' || ngDevMode)) {
+      throw Error('Updating the orientation of a Material stepper is not supported.');
+    }
+  }
+
   static ngAcceptInputType_editable: BooleanInput;
   static ngAcceptInputType_optional: BooleanInput;
   static ngAcceptInputType_completed: BooleanInput;

tools/public_api_guard/cdk/stepper.d.ts

@@ -55,6 +55,8 @@ export declare class CdkStepper implements AfterContentInit, AfterViewInit, OnDe
     _steps: QueryList<CdkStep>;
     get linear(): boolean;
     set linear(value: boolean);
+    get orientation(): StepperOrientation;
+    set orientation(value: StepperOrientation);
     get selected(): CdkStep;
     set selected(step: CdkStep);
     get selectedIndex(): number;
@@ -69,6 +71,7 @@ export declare class CdkStepper implements AfterContentInit, AfterViewInit, OnDe
     _getStepLabelId(i: number): string;
     _onKeydown(event: KeyboardEvent): void;
     _stateChanged(): void;
+    protected _updateOrientation(value: StepperOrientation): void;
     next(): void;
     ngAfterContentInit(): void;
     ngAfterViewInit(): void;

tools/public_api_guard/material/stepper.d.ts

@@ -79,6 +79,7 @@ export declare class MatStepper extends CdkStepper implements AfterContentInit {
     color: ThemePalette;
     disableRipple: boolean;
     readonly steps: QueryList<MatStep>;
+    protected _updateOrientation(): void;
     ngAfterContentInit(): void;
     static ngAcceptInputType_completed: BooleanInput;
     static ngAcceptInputType_editable: BooleanInput;