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
This commit is contained in:
mmalerba
2019-01-25 11:41:57 -08:00
committed by Andrew Seguin
parent 58254ae419
commit e7b0e40bfa
3 changed files with 23 additions and 43 deletions
+9 -43
View File
@@ -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>
+13
View File
@@ -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;
}
}
+1
View File
@@ -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;