feat(stepper): Create MAT_STEPPER_GLOBAL_OPTIONS InjectionToken

src/cdk/stepper/stepper.ts

@@ -31,6 +31,7 @@ import {
   TemplateRef,
   ViewChild,
   ViewEncapsulation,
+  InjectionToken,
 } from '@angular/core';
 import {DOCUMENT} from '@angular/common';
 import {AbstractControl} from '@angular/forms';
@@ -65,6 +66,37 @@ export class StepperSelectionEvent {
   previouslySelectedStep: CdkStep;
 }
 
+/** The state of each step. */
+export type StepState = 'number' | 'edit' | 'done' | 'error' | string;
+
+/** Enum to represent the different states of the steps. */
+export const STEP_STATE = {
+  NUMBER: 'number',
+  EDIT: 'edit',
+  DONE: 'done',
+  ERROR: 'error'
+};
+
+/** InjectionToken that can be used to specify the global stepper options. */
+export const MAT_STEPPER_GLOBAL_OPTIONS =
+  new InjectionToken<StepperOptions>('mat-stepper-global-options');
+
+/** Configurable options for stepper. */
+export interface StepperOptions {
+  /**
+   * Whether the stepper should display an error state or not.
+   * Default behavior is assumed to be false.
+   */
+  showError?: boolean;
+
+  /**
+   * Whether the stepper should display the default indicator type
+   * or not.
+   * Default behavior is assumed to be true.
+   */
+  displayDefaultIndicatorType?: boolean;
+}
+
 @Component({
   moduleId: module.id,
   selector: 'cdk-step',
@@ -74,6 +106,10 @@ export class StepperSelectionEvent {
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class CdkStep implements OnChanges {
+  private _stepperOptions: StepperOptions;
+  _showError: boolean;
+  _displayDefaultIndicatorType: boolean;
+
   /** Template for step label if it exists. */
   @ContentChild(CdkStepLabel) stepLabel: CdkStepLabel;
 
@@ -89,6 +125,9 @@ export class CdkStep implements OnChanges {
   /** Plain text label of the step. */
   @Input() label: string;
 
+  /** Error message to display when there's an error. */
+  @Input() errorMessage: string;
+
   /** Aria label for the tab. */
   @Input('aria-label') ariaLabel: string;
 
@@ -98,6 +137,9 @@ export class CdkStep implements OnChanges {
    */
   @Input('aria-labelledby') ariaLabelledby: string;
 
+  /** State of the step. */
+  @Input() state: StepState;
+
   /** Whether the user can return to this step once it has been marked as complted. */
   @Input()
   get editable(): boolean { return this._editable; }
@@ -117,18 +159,39 @@ export class CdkStep implements OnChanges {
   /** Whether step is marked as completed. */
   @Input()
   get completed(): boolean {
-    return this._customCompleted == null ? this._defaultCompleted() : this._customCompleted;
+    return this._customCompleted == null ? this._getDefaultCompleted() : this._customCompleted;
   }
   set completed(value: boolean) {
     this._customCompleted = coerceBooleanProperty(value);
   }
   private _customCompleted: boolean | null = null;
 
-  private _defaultCompleted() {
+  private _getDefaultCompleted() {
     return this.stepControl ? this.stepControl.valid && this.interacted : this.interacted;
   }
 
-  constructor(@Inject(forwardRef(() => CdkStepper)) private _stepper: CdkStepper) { }
+  /** Whether step has an error. */
+  @Input()
+  get hasError(): boolean {
+    return this._customError || this._getDefaultError();
+  }
+  set hasError(value: boolean) {
+    this._customError = coerceBooleanProperty(value);
+  }
+  private _customError: boolean | null = null;
+
+  private _getDefaultError() {
+    return this.stepControl && this.stepControl.invalid && this.interacted;
+  }
+
+  /** @breaking-change 8.0.0 remove the `?` after `stepperOptions` */
+  constructor(
+    @Inject(forwardRef(() => CdkStepper)) private _stepper: CdkStepper,
+    @Optional() @Inject(MAT_STEPPER_GLOBAL_OPTIONS) stepperOptions?: StepperOptions) {
+    this._stepperOptions = stepperOptions ? stepperOptions : {};
+    this._displayDefaultIndicatorType = this._stepperOptions.displayDefaultIndicatorType !== false;
+    this._showError = !!this._stepperOptions.showError;
+  }
 
   /** Selects this step component. */
   select(): void {
@@ -143,6 +206,10 @@ export class CdkStep implements OnChanges {
       this._customCompleted = false;
     }
 
+    if (this._customError != null) {
+      this._customError = false;
+    }
+
     if (this.stepControl) {
       this.stepControl.reset();
     }
@@ -301,15 +368,46 @@ export class CdkStepper implements AfterViewInit, OnDestroy {
   }
 
   /** Returns the type of icon to be displayed. */
-  _getIndicatorType(index: number): 'number' | 'edit' | 'done' {
+  _getIndicatorType(index: number, state: StepState = STEP_STATE.NUMBER): StepState {
     const step = this._steps.toArray()[index];
-    if (!step.completed || this._selectedIndex == index) {
-      return 'number';
+    const isCurrentStep = this._isCurrentStep(index);
+
+    return step._displayDefaultIndicatorType
+      ? this._getDefaultIndicatorLogic(step, isCurrentStep)
+      : this._getGuidelineLogic(step, isCurrentStep, state);
+  }
+
+  private _getDefaultIndicatorLogic(step: CdkStep, isCurrentStep: boolean): StepState {
+    if (step._showError && step.hasError && !isCurrentStep) {
+      return STEP_STATE.ERROR;
+    } else if (!step.completed || isCurrentStep) {
+      return STEP_STATE.NUMBER;
+    } else {
+      return step.editable ? STEP_STATE.EDIT : STEP_STATE.DONE;
+    }
+  }
+
+  private _getGuidelineLogic(
+    step: CdkStep,
+    isCurrentStep: boolean,
+    state: StepState = STEP_STATE.NUMBER): StepState {
+    if (step._showError && step.hasError && !isCurrentStep) {
+      return STEP_STATE.ERROR;
+    } else if (step.completed && !isCurrentStep) {
+      return STEP_STATE.DONE;
+    } else if (step.completed && isCurrentStep) {
+      return state;
+    } else if (step.editable && isCurrentStep) {
+      return STEP_STATE.EDIT;
     } else {
-      return step.editable ? 'edit' : 'done';
+      return state;
     }
   }
 
+  private _isCurrentStep(index: number) {
+    return this._selectedIndex === index;
+  }
+
   /** Returns the index of the currently-focused step header. */
   _getFocusIndex() {
     return this._keyManager ? this._keyManager.activeItemIndex : this._selectedIndex;

src/lib/stepper/_stepper-theme.scss

@@ -6,6 +6,7 @@
   $foreground: map-get($theme, foreground);
   $background: map-get($theme, background);
   $primary: map-get($theme, primary);
+  $warn: map-get($theme, warn);
 
   .mat-step-header {
     &.cdk-keyboard-focused,
@@ -20,18 +21,29 @@
     }
 
     .mat-step-icon {
-      background-color: mat-color($primary);
+      background-color: mat-color($foreground, disabled-text);
       color: mat-color($primary, default-contrast);
     }
 
-    .mat-step-icon-not-touched {
-      background-color: mat-color($foreground, disabled-text);
+    .mat-step-icon-selected,
+    .mat-step-icon-state-done,
+    .mat-step-icon-state-edit {
+      background-color: mat-color($primary);
       color: mat-color($primary, default-contrast);
     }
 
+    .mat-step-icon-state-error {
+      background-color: transparent;
+      color: mat-color($warn);
+    }
+
     .mat-step-label.mat-step-label-active {
       color: mat-color($foreground, text);
     }
+
+    .mat-step-label.mat-step-label-error {
+      color: mat-color($warn);
+    }
   }
 
   .mat-stepper-horizontal, .mat-stepper-vertical {
@@ -59,6 +71,14 @@
     };
   }
 
+  .mat-step-sub-label-error {
+    font-weight: normal;
+  }
+
+  .mat-step-label-error {
+    font-size: mat-font-size($config, body-2);
+  }
+
   .mat-step-label-selected {
     font: {
       size: mat-font-size($config, body-2);

src/lib/stepper/step-header.html

@@ -1,8 +1,6 @@
 <div class="mat-step-header-ripple" mat-ripple [matRippleTrigger]="_getHostElement()"></div>
-<div [class.mat-step-icon]="state !== 'number' || selected"
-     [class.mat-step-icon-not-touched]="state == 'number' && !selected"
+<div class="mat-step-icon-state-{{state}} mat-step-icon" [class.mat-step-icon-selected]="selected"
      [ngSwitch]="state">
-
   <ng-container *ngSwitchCase="'number'" [ngSwitch]="!!(iconOverrides && iconOverrides.number)">
     <ng-container
       *ngSwitchCase="true"
@@ -26,16 +24,35 @@
       [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>
+  </ng-container>
 </div>
 <div class="mat-step-label"
      [class.mat-step-label-active]="active"
-     [class.mat-step-label-selected]="selected">
+     [class.mat-step-label-selected]="selected"
+     [class.mat-step-label-error]="state == 'error'">
   <!-- If there is a label template, use it. -->
   <ng-container *ngIf="_templateLabel()" [ngTemplateOutlet]="_templateLabel()!.template">
   </ng-container>
-  <!-- It there is no label template, fall back to the text label. -->
+  <!-- If there is no label template, fall back to the text label. -->
   <div class="mat-step-text-label" *ngIf="_stringLabel()">{{label}}</div>
 
-  <div class="mat-step-optional" *ngIf="optional">{{_intl.optionalLabel}}</div>
+  <div class="mat-step-optional" *ngIf="optional && state != 'error'">{{_intl.optionalLabel}}</div>
+  <div class="mat-step-sub-label-error" *ngIf="state == 'error'">{{errorMessage}}</div>
 </div>
 

src/lib/stepper/step-header.scss

@@ -5,7 +5,7 @@ $mat-stepper-label-min-width: 50px !default;
 $mat-stepper-side-gap: 24px !default;
 $mat-vertical-stepper-content-margin: 36px !default;
 $mat-stepper-line-gap: 8px !default;
-$mat-step-optional-font-size: 12px;
+$mat-step-sub-label-font-size: 12px;
 $mat-step-header-icon-size: 16px !default;
 
 .mat-step-header {
@@ -17,12 +17,12 @@ $mat-step-header-icon-size: 16px !default;
   -webkit-tap-highlight-color: transparent;
 }
 
-.mat-step-optional {
-  font-size: $mat-step-optional-font-size;
+.mat-step-optional,
+.mat-step-sub-label-error {
+  font-size: $mat-step-sub-label-font-size;
 }
 
-.mat-step-icon,
-.mat-step-icon-not-touched {
+.mat-step-icon {
   border-radius: 50%;
   height: $mat-stepper-label-header-height;
   width: $mat-stepper-label-header-height;
@@ -38,6 +38,12 @@ $mat-step-header-icon-size: 16px !default;
   width: $mat-step-header-icon-size;
 }
 
+.mat-step-icon-state-error .mat-icon {
+  font-size: $mat-step-header-icon-size + 8;
+  height: $mat-step-header-icon-size + 8;
+  width: $mat-step-header-icon-size + 8;
+}
+
 .mat-step-label {
   display: inline-block;
   white-space: nowrap;

src/lib/stepper/step-header.ts

@@ -21,7 +21,7 @@ import {Subscription} from 'rxjs';
 import {MatStepLabel} from './step-label';
 import {MatStepperIntl} from './stepper-intl';
 import {MatStepperIconContext} from './stepper-icon';
-
+import {StepState} from '@angular/cdk/stepper';
 
 @Component({
   moduleId: module.id,
@@ -39,11 +39,14 @@ export class MatStepHeader implements OnDestroy {
   private _intlSubscription: Subscription;
 
   /** State of the given step. */
-  @Input() state: string;
+  @Input() state: StepState;
 
   /** Label of the given step. */
   @Input() label: MatStepLabel | string;
 
+  /** Error message to display when there's an error. */
+  @Input() errorMessage: string;
+
   /** Overrides for the header icons, passed in via the stepper. */
   @Input() iconOverrides: {[key: string]: TemplateRef<MatStepperIconContext>};
 

src/lib/stepper/stepper-horizontal.html

@@ -12,11 +12,12 @@
                      [attr.aria-label]="step.ariaLabel || null"
                      [attr.aria-labelledby]="(!step.ariaLabel && step.ariaLabelledby) ? step.ariaLabelledby : null"
                      [index]="i"
-                     [state]="_getIndicatorType(i)"
+                     [state]="_getIndicatorType(i, step.state)"
                      [label]="step.stepLabel || step.label"
                      [selected]="selectedIndex === i"
                      [active]="step.completed || selectedIndex === i || !linear"
                      [optional]="step.optional"
+                     [errorMessage]="step.errorMessage"
                      [iconOverrides]="_iconOverrides">
     </mat-step-header>
     <div *ngIf="!isLast" class="mat-stepper-horizontal-line"></div>

src/lib/stepper/stepper-icon.ts

@@ -7,6 +7,7 @@
  */
 
 import {Directive, Input, TemplateRef} from '@angular/core';
+import {StepState} from '@angular/cdk/stepper';
 
 /** Template context available to an attached `matStepperIcon`. */
 export interface MatStepperIconContext {
@@ -26,7 +27,7 @@ export interface MatStepperIconContext {
 })
 export class MatStepperIcon {
   /** Name of the icon to be overridden. */
-  @Input('matStepperIcon') name: 'edit' | 'done' | 'number';
+  @Input('matStepperIcon') name: StepState;
 
   constructor(public templateRef: TemplateRef<MatStepperIconContext>) {}
 }

src/lib/stepper/stepper-vertical.html

@@ -11,11 +11,12 @@
                    [attr.aria-label]="step.ariaLabel || null"
                    [attr.aria-labelledby]="(!step.ariaLabel && step.ariaLabelledby) ? step.ariaLabelledby : null"
                    [index]="i"
-                   [state]="_getIndicatorType(i)"
+                   [state]="_getIndicatorType(i, step.state)"
                    [label]="step.stepLabel || step.label"
                    [selected]="selectedIndex === i"
                    [active]="step.completed || selectedIndex === i || !linear"
                    [optional]="step.optional"
+                   [errorMessage]="step.errorMessage"
                    [iconOverrides]="_iconOverrides">
   </mat-step-header>