mirror of
https://github.com/angular/angular.git
synced 2026-09-14 13:54:52 +08:00
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:
@@ -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>
|
||||
|
||||
@@ -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
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user