feat(stepper): create stepper global options and update logic in _getIndicatorType

Author: arodr967

src/cdk/stepper/stepper.ts

@@ -30,6 +30,7 @@ import {
   TemplateRef,
   ViewChild,
   ViewEncapsulation,
+  InjectionToken,
 } from '@angular/core';
 import {AbstractControl} from '@angular/forms';
 import {CdkStepLabel} from './step-label';
@@ -64,7 +65,7 @@ export class StepperSelectionEvent {
 }
 
 /** The state of each step. */
-export type StepState = 'number' | 'edit' | 'done' | 'error';
+export type StepState = 'number' | 'edit' | 'done' | 'error' | string;
 
 /** Enum to represent the different states of the steps. */
 export const STEP_STATE = {
@@ -74,6 +75,26 @@ export const STEP_STATE = {
   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 floating labels. */
+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 use the Material UI guidelines when
+   * displaying the icons or not.
+   * Default behavior is assumed to be false.
+   */
+  useGuidelines?: boolean;
+}
+
 @Component({
   moduleId: module.id,
   selector: 'cdk-step',
@@ -83,6 +104,10 @@ export const STEP_STATE = {
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class CdkStep implements OnChanges {
+  private _stepperOptions: StepperOptions;
+  _showError: boolean;
+  _useGuidelines: boolean;
+
   /** Template for step label if it exists. */
   @ContentChild(CdkStepLabel) stepLabel: CdkStepLabel;
 
@@ -110,6 +135,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; }
@@ -126,51 +154,42 @@ export class CdkStep implements OnChanges {
   }
   private _optional = false;
 
-  /** State of the step. */
-  @Input()
-  get state(): StepState | string | null { return this._state; }
-  set state(value: StepState | string | null) {
-    this._state = value;
-  }
-  private _state: StepState | string | null = null;
-
-  /** Whether to show the step is in an error state. */
-  @Input()
-  get showError(): boolean { return this._showError; }
-  set showError(value: boolean) {
-    this._showError = value;
-  }
-  private _showError: boolean = false;
-
   /** 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 get _defaultCompleted() {
+  private _getDefaultCompleted() {
     return this.stepControl ? this.stepControl.valid && this.interacted : this.interacted;
   }
 
   /** Whether step has error. */
   @Input()
   get hasError(): boolean {
-    return this._customError == null ? this._getDefaultError : this._customError;
+    return this._customError || this._getDefaultError();
   }
   set hasError(value: boolean) {
     this._customError = coerceBooleanProperty(value);
   }
   private _customError: boolean | null = null;
 
-  private get _getDefaultError() {
+  private _getDefaultError() {
     return this.stepControl && this.stepControl.invalid;
   }
 
-  constructor(@Inject(forwardRef(() => CdkStepper)) private _stepper: CdkStepper) { }
+  constructor(
+    @Inject(forwardRef(() => CdkStepper)) private _stepper: CdkStepper,
+    @Optional() @Inject(MAT_STEPPER_GLOBAL_OPTIONS) stepperOptions: StepperOptions
+  ) {
+    this._stepperOptions = stepperOptions ? stepperOptions : {};
+    this._showError = !!this._stepperOptions.showError;
+    this._useGuidelines = !!this._stepperOptions.useGuidelines;
+  }
 
   /** Selects this step component. */
   select(): void {
@@ -331,20 +350,38 @@ export class CdkStepper implements AfterViewInit, OnDestroy {
   }
 
   /** Returns the type of icon to be displayed. */
-  _getIndicatorType(index: number, state: StepState | string | null = null): StepState | string {
+  _getIndicatorType(index: number, state: StepState = STEP_STATE.NUMBER): StepState {
     const step = this._steps.toArray()[index];
     const isCurrentStep = this._isCurrentStep(index);
 
-    if (step.showError && step.hasError && !isCurrentStep) {
+    if (step._useGuidelines) {
+      return this._getGuidelineLogic(step, isCurrentStep, state);
+    } else {
+      return this._getDefaultIndicatorLogic(step, isCurrentStep);
+    }
+  }
+
+  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 || STEP_STATE.NUMBER;
+      return state;
     } else if (step.editable && isCurrentStep) {
       return STEP_STATE.EDIT;
     } else {
-      return state || STEP_STATE.NUMBER;
+      return state;
     }
   }
 

src/lib/stepper/stepper.ts

@@ -7,7 +7,7 @@
  */
 
 import {Directionality} from '@angular/cdk/bidi';
-import {CdkStep, CdkStepper, StepContentPositionState} from '@angular/cdk/stepper';
+import {CdkStep, CdkStepper, StepContentPositionState, MAT_STEPPER_GLOBAL_OPTIONS, StepperOptions} from '@angular/cdk/stepper';
 import {AnimationEvent} from '@angular/animations';
 import {
   AfterContentInit,
@@ -51,8 +51,9 @@ export class MatStep extends CdkStep implements ErrorStateMatcher {
   @ContentChild(MatStepLabel) stepLabel: MatStepLabel;
 
   constructor(@Inject(forwardRef(() => MatStepper)) stepper: MatStepper,
-              @SkipSelf() private _errorStateMatcher: ErrorStateMatcher) {
-    super(stepper);
+              @SkipSelf() private _errorStateMatcher: ErrorStateMatcher,
+              @Optional() @Inject(MAT_STEPPER_GLOBAL_OPTIONS) stepperOptions: StepperOptions) {
+    super(stepper, stepperOptions);
   }
 
   /** Custom error state matcher that additionally checks for validity of interacted form. */