refactor(cdk/stepper): switch to input transforms

Switches inputs in cdk/stepper to use transforms instead of getters/setters.

Author: crisbeto

src/cdk/stepper/stepper.ts

@@ -8,12 +8,6 @@
 
 import {FocusableOption, FocusKeyManager} from '@angular/cdk/a11y';
 import {Direction, Directionality} from '@angular/cdk/bidi';
-import {
-  BooleanInput,
-  coerceBooleanProperty,
-  coerceNumberProperty,
-  NumberInput,
-} from '@angular/cdk/coercion';
 import {ENTER, hasModifierKey, SPACE} from '@angular/cdk/keycodes';
 import {
   AfterViewInit,
@@ -38,6 +32,8 @@ import {
   ViewChild,
   ViewEncapsulation,
   AfterContentInit,
+  booleanAttribute,
+  numberAttribute,
 } from '@angular/core';
 import {_getFocusedElementPierceShadowDom} from '@angular/cdk/platform';
 import {Observable, of as observableOf, Subject} from 'rxjs';
@@ -149,32 +145,18 @@ export class CdkStep implements OnChanges {
   @Input() state: StepState;
 
   /** Whether the user can return to this step once it has been marked as completed. */
-  @Input()
-  get editable(): boolean {
-    return this._editable;
-  }
-  set editable(value: BooleanInput) {
-    this._editable = coerceBooleanProperty(value);
-  }
-  private _editable = true;
+  @Input({transform: booleanAttribute}) editable: boolean = true;
 
   /** Whether the completion of step is optional. */
-  @Input()
-  get optional(): boolean {
-    return this._optional;
-  }
-  set optional(value: BooleanInput) {
-    this._optional = coerceBooleanProperty(value);
-  }
-  private _optional = false;
+  @Input({transform: booleanAttribute}) optional: boolean = false;
 
   /** Whether step is marked as completed. */
-  @Input()
+  @Input({transform: booleanAttribute})
   get completed(): boolean {
     return this._completedOverride == null ? this._getDefaultCompleted() : this._completedOverride;
   }
-  set completed(value: BooleanInput) {
-    this._completedOverride = coerceBooleanProperty(value);
+  set completed(value: boolean) {
+    this._completedOverride = value;
   }
   _completedOverride: boolean | null = null;
 
@@ -183,12 +165,12 @@ export class CdkStep implements OnChanges {
   }
 
   /** Whether step has an error. */
-  @Input()
+  @Input({transform: booleanAttribute})
   get hasError(): boolean {
     return this._customError == null ? this._getDefaultError() : this._customError;
   }
-  set hasError(value: BooleanInput) {
-    this._customError = coerceBooleanProperty(value);
+  set hasError(value: boolean) {
+    this._customError = value;
   }
   private _customError: boolean | null = null;
 
@@ -271,40 +253,31 @@ export class CdkStepper implements AfterContentInit, AfterViewInit, OnDestroy {
   private _sortedHeaders = new QueryList<CdkStepHeader>();
 
   /** Whether the validity of previous steps should be checked or not. */
-  @Input()
-  get linear(): boolean {
-    return this._linear;
-  }
-  set linear(value: BooleanInput) {
-    this._linear = coerceBooleanProperty(value);
-  }
-  private _linear = false;
+  @Input({transform: booleanAttribute}) linear: boolean = false;
 
   /** The index of the selected step. */
-  @Input()
+  @Input({transform: numberAttribute})
   get selectedIndex(): number {
     return this._selectedIndex;
   }
-  set selectedIndex(index: NumberInput) {
-    const newIndex = coerceNumberProperty(index);
-
+  set selectedIndex(index: number) {
     if (this.steps && this._steps) {
       // Ensure that the index can't be out of bounds.
-      if (!this._isValidIndex(newIndex) && (typeof ngDevMode === 'undefined' || ngDevMode)) {
+      if (!this._isValidIndex(index) && (typeof ngDevMode === 'undefined' || ngDevMode)) {
         throw Error('cdkStepper: Cannot assign out-of-bounds value to `selectedIndex`.');
       }
 
       this.selected?._markAsInteracted();
 
       if (
-        this._selectedIndex !== newIndex &&
-        !this._anyControlsInvalidOrPending(newIndex) &&
-        (newIndex >= this._selectedIndex || this.steps.toArray()[newIndex].editable)
+        this._selectedIndex !== index &&
+        !this._anyControlsInvalidOrPending(index) &&
+        (index >= this._selectedIndex || this.steps.toArray()[index].editable)
       ) {
-        this._updateSelectedItemIndex(newIndex);
+        this._updateSelectedItemIndex(index);
       }
     } else {
-      this._selectedIndex = newIndex;
+      this._selectedIndex = index;
     }
   }
   private _selectedIndex = 0;
@@ -551,7 +524,7 @@ export class CdkStepper implements AfterContentInit, AfterViewInit, OnDestroy {
   }
 
   private _anyControlsInvalidOrPending(index: number): boolean {
-    if (this._linear && index >= 0) {
+    if (this.linear && index >= 0) {
       return this.steps
         .toArray()
         .slice(0, index)

tools/public_api_guard/cdk/stepper.md

@@ -6,7 +6,6 @@
 
 import { AfterContentInit } from '@angular/core';
 import { AfterViewInit } from '@angular/core';
-import { BooleanInput } from '@angular/cdk/coercion';
 import { ChangeDetectorRef } from '@angular/core';
 import { Directionality } from '@angular/cdk/bidi';
 import { ElementRef } from '@angular/core';
@@ -15,7 +14,6 @@ import { FocusableOption } from '@angular/cdk/a11y';
 import * as i0 from '@angular/core';
 import * as i5 from '@angular/cdk/bidi';
 import { InjectionToken } from '@angular/core';
-import { NumberInput } from '@angular/cdk/coercion';
 import { Observable } from 'rxjs';
 import { OnChanges } from '@angular/core';
 import { OnDestroy } from '@angular/core';
@@ -29,26 +27,32 @@ export class CdkStep implements OnChanges {
     ariaLabel: string;
     ariaLabelledby: string;
     get completed(): boolean;
-    set completed(value: BooleanInput);
+    set completed(value: boolean);
     // (undocumented)
     _completedOverride: boolean | null;
     content: TemplateRef<any>;
     // (undocumented)
     _displayDefaultIndicatorType: boolean;
-    get editable(): boolean;
-    set editable(value: BooleanInput);
+    editable: boolean;
     errorMessage: string;
     get hasError(): boolean;
-    set hasError(value: BooleanInput);
+    set hasError(value: boolean);
     interacted: boolean;
     readonly interactedStream: EventEmitter<CdkStep>;
     label: string;
     // (undocumented)
     _markAsInteracted(): void;
     // (undocumented)
+    static ngAcceptInputType_completed: unknown;
+    // (undocumented)
+    static ngAcceptInputType_editable: unknown;
+    // (undocumented)
+    static ngAcceptInputType_hasError: unknown;
+    // (undocumented)
+    static ngAcceptInputType_optional: unknown;
+    // (undocumented)
     ngOnChanges(): void;
-    get optional(): boolean;
-    set optional(value: BooleanInput);
+    optional: boolean;
     reset(): void;
     select(): void;
     _showError(): boolean;
@@ -96,10 +100,13 @@ export class CdkStepper implements AfterContentInit, AfterViewInit, OnDestroy {
     _getStepContentId(i: number): string;
     _getStepLabelId(i: number): string;
     _groupId: number;
-    get linear(): boolean;
-    set linear(value: BooleanInput);
+    linear: boolean;
     next(): void;
     // (undocumented)
+    static ngAcceptInputType_linear: unknown;
+    // (undocumented)
+    static ngAcceptInputType_selectedIndex: unknown;
+    // (undocumented)
     ngAfterContentInit(): void;
     // (undocumented)
     ngAfterViewInit(): void;
@@ -114,7 +121,7 @@ export class CdkStepper implements AfterContentInit, AfterViewInit, OnDestroy {
     get selected(): CdkStep | undefined;
     set selected(step: CdkStep | undefined);
     get selectedIndex(): number;
-    set selectedIndex(index: NumberInput);
+    set selectedIndex(index: number);
     readonly selectedIndexChange: EventEmitter<number>;
     readonly selectionChange: EventEmitter<StepperSelectionEvent>;
     _stateChanged(): void;