fix(stepper): ensure step state is not minified (#14933)

* fix(stepper): ensure step state is not minified

* update api goldens

* address feedback

* fix number state

Author: mmalerba

src/lib/stepper/step-header.html

@@ -1,47 +1,13 @@
 <div class="mat-step-header-ripple" mat-ripple [matRippleTrigger]="_getHostElement()"></div>
-<div class="mat-step-icon-state-{{state}} mat-step-icon" [class.mat-step-icon-selected]="selected"
-     [ngSwitch]="state">
-
-  <div class="mat-step-icon-content">
-    <ng-container *ngSwitchCase="'number'" [ngSwitch]="!!(iconOverrides && iconOverrides.number)">
-      <ng-container
-        *ngSwitchCase="true"
-        [ngTemplateOutlet]="iconOverrides.number"
-        [ngTemplateOutletContext]="_getIconContext()"></ng-container>
-      <span *ngSwitchDefault>{{index + 1}}</span>
-    </ng-container>
-
-    <ng-container *ngSwitchCase="'edit'" [ngSwitch]="!!(iconOverrides && iconOverrides.edit)">
-      <ng-container
-        *ngSwitchCase="true"
-        [ngTemplateOutlet]="iconOverrides.edit"
-        [ngTemplateOutletContext]="_getIconContext()"></ng-container>
-      <mat-icon *ngSwitchDefault>create</mat-icon>
-    </ng-container>
-
-    <ng-container *ngSwitchCase="'done'" [ngSwitch]="!!(iconOverrides && iconOverrides.done)">
-      <ng-container
-        *ngSwitchCase="true"
-        [ngTemplateOutlet]="iconOverrides.done"
-        [ngTemplateOutletContext]="_getIconContext()"></ng-container>
-      <mat-icon *ngSwitchDefault>done</mat-icon>
-    </ng-container>
-
-    <ng-container *ngSwitchCase="'error'" [ngSwitch]="!!(iconOverrides && iconOverrides.error)">
-      <ng-container
-        *ngSwitchCase="true"
-        [ngTemplateOutlet]="iconOverrides.error"
-        [ngTemplateOutletContext]="_getIconContext()"></ng-container>
-      <mat-icon *ngSwitchDefault>warning</mat-icon>
-    </ng-container>
-
-    <!-- Custom state. -->
-    <ng-container *ngSwitchDefault [ngSwitch]="!!(iconOverrides && iconOverrides[state])">
-      <ng-container
-        *ngSwitchCase="true"
-        [ngTemplateOutlet]="iconOverrides[state]"
-        [ngTemplateOutletContext]="_getIconContext()"></ng-container>
-      <mat-icon *ngSwitchDefault>{{state}}</mat-icon>
+<div class="mat-step-icon-state-{{state}} mat-step-icon" [class.mat-step-icon-selected]="selected">
+  <div class="mat-step-icon-content" [ngSwitch]="!!(iconOverrides && iconOverrides[state])">
+    <ng-container
+      *ngSwitchCase="true"
+      [ngTemplateOutlet]="iconOverrides[state]"
+      [ngTemplateOutletContext]="_getIconContext()"></ng-container>
+    <ng-container *ngSwitchDefault [ngSwitch]="state">
+      <span *ngSwitchCase="'number'">{{_getDefaultTextForState(state)}}</span>
+      <mat-icon *ngSwitchDefault>{{_getDefaultTextForState(state)}}</mat-icon>
     </ng-container>
   </div>
 </div>

src/lib/stepper/step-header.ts

@@ -101,4 +101,17 @@ export class MatStepHeader extends CdkStepHeader implements OnDestroy {
       optional: this.optional
     };
   }
+
+  _getDefaultTextForState(state: StepState): string {
+    if (state == 'number') {
+      return `${this.index + 1}`;
+    }
+    if (state == 'edit') {
+      return 'create';
+    }
+    if (state == 'error') {
+      return 'warning';
+    }
+    return state;
+  }
 }

tools/public_api_guard/lib/stepper.d.ts

@@ -29,6 +29,7 @@ export declare class MatStepHeader extends CdkStepHeader implements OnDestroy {
     selected: boolean;
     state: StepState;
     constructor(_intl: MatStepperIntl, _focusMonitor: FocusMonitor, _elementRef: ElementRef<HTMLElement>, changeDetectorRef: ChangeDetectorRef);
+    _getDefaultTextForState(state: StepState): string;
     _getHostElement(): HTMLElement;
     _getIconContext(): MatStepperIconContext;
     _stringLabel(): string | null;