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

Currently we have a limitation on the Material stepper that doesn't allow its orientation
to be changed dynamically, because we have two different components for it.

The CDK stepper doesn't have this limitation and people may end up extending it to
implement their own steppers which support changing orientations.

These changes add some logic to ensure that changing the orientation works as expected
and to ensure that the orientation of the Material stepper doesn't change.

Fixes #21874.

Author: crisbeto

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;