Code changes based on review + test name changes

Author: jwshinjwshin

src/cdk/stepper/stepper.ts

@@ -93,7 +93,16 @@ export class CdkStep {
   private _optional = false;
 
   /** Return whether step is completed or not. */
+  @Input()
   get completed() {
+    return this._customCompleted == null ? this._defaultCompleted : this._customCompleted;
+  }
+  set completed(value: any) {
+    this._customCompleted = coerceBooleanProperty(value);
+  }
+  private _customCompleted: boolean | null = null;
+
+  private get _defaultCompleted() {
     return this._stepControl ? this._stepControl.valid && this.interacted : this.interacted;
   }
 
@@ -193,6 +202,15 @@ export class CdkStepper {
     }
   }
 
+  _getIndicatorType(index: number): 'number' | 'edit' | 'done' {
+    const step = this._steps.toArray()[index];
+    if (!step.completed || this._selectedIndex == index) {
+      return 'number';
+    } else {
+      return step.editable ? 'edit' : 'done';
+    }
+  }
+
   private _emitStepperSelectionEvent(newIndex: number): void {
     const stepsArray = this._steps.toArray();
     this.selectionChange.emit({

src/demo-app/stepper/stepper-demo.html

@@ -19,7 +19,7 @@ <h3>Linear Vertical Stepper Demo using a single form</h3>
       </div>
     </md-step>
 
-    <md-step formGroupName="1" [stepControl]="formArray.get([1])" [optional]="true">
+    <md-step formGroupName="1" [stepControl]="formArray.get([1])" optional>
       <ng-template mdStepLabel>
         <div>Fill out your phone number</div>
       </ng-template>
@@ -62,7 +62,7 @@ <h3>Linear Horizontal Stepper Demo using a different form for each step</h3>
     </form>
   </md-step>
 
-  <md-step [stepControl]="phoneFormGroup">
+  <md-step [stepControl]="phoneFormGroup" optional>
     <form [formGroup]="phoneFormGroup">
       <ng-template mdStepLabel>Fill out your phone number</ng-template>
       <md-form-field>

src/lib/stepper/_stepper-theme.scss

@@ -23,8 +23,7 @@
       color: mat-color($foreground, disabled-text);
     }
 
-    .mat-stepper-index-interacted,
-    .mat-stepper-index-new {
+    .mat-step-indicator {
       background-color: mat-color($primary);
       color: mat-color($primary, default-contrast);
     }
@@ -34,7 +33,7 @@
         color: mat-color($foreground, disabled-text);
       }
 
-      .mat-stepper-index-new {
+      .mat-step-indicator-not-touched {
         background-color: mat-color($foreground, disabled-text);
       }
     }

src/lib/stepper/stepper-horizontal.html

@@ -8,18 +8,16 @@
          [tabIndex]="_focusIndex == i ? 0 : -1"
          (click)="step.select()"
          (keydown)="_onKeydown($event)">
-      <div class="mat-stepper-index-new" *ngIf="!step.completed || selectedIndex == i">
-        {{i + 1}}
-      </div>
-      <div class="mat-stepper-index-interacted" *ngIf="step.completed && selectedIndex != i">
-        <md-icon *ngIf="!step.editable">done</md-icon>
-        <md-icon *ngIf="step.editable">create</md-icon>
+      <div class="mat-step-indicator"
+           [ngSwitch]="_getIndicatorType(i)"
+           [class.mat-step-indicator-not-touched]="_getIndicatorType(i) == 'number'">
+        <span *ngSwitchCase="'number'">{{i + 1}}</span>
+        <md-icon *ngSwitchCase="'edit'">create</md-icon>
+        <md-icon *ngSwitchCase="'done'">done</md-icon>
       </div>
 
-      <div [ngClass]="{
-            'mat-stepper-label-active': step.completed || selectedIndex == i,
-            'mat-stepper-label-inactive': !step.completed && selectedIndex != i
-            }">
+      <div [class.mat-stepper-label-active]="step.completed || selectedIndex == i"
+           [class.mat-stepper-label-inactive]="!step.completed && selectedIndex != i">
         <!-- If there is a label template, use it. -->
         <ng-container *ngIf="step.stepLabel" [ngTemplateOutlet]="step.stepLabel.template">
         </ng-container>

src/lib/stepper/stepper-vertical.html

@@ -6,18 +6,16 @@
        [tabIndex]="_focusIndex == i ? 0 : -1"
        (click)="step.select()"
        (keydown)="_onKeydown($event)">
-    <div class="mat-stepper-index-new" *ngIf="!step.completed || selectedIndex == i">
-      {{i + 1}}
-    </div>
-    <div class="mat-stepper-index-interacted" *ngIf="step.completed && selectedIndex != i">
-      <md-icon *ngIf="!step.editable">done</md-icon>
-      <md-icon *ngIf="step.editable">create</md-icon>
+    <div class="mat-step-indicator"
+         [ngSwitch]="_getIndicatorType(i)"
+         [class.mat-step-indicator-not-touched]="_getIndicatorType(i) == 'number'">
+      <span *ngSwitchCase="'number'">{{i + 1}}</span>
+      <md-icon *ngSwitchCase="'edit'">create</md-icon>
+      <md-icon *ngSwitchCase="'done'">done</md-icon>
     </div>
 
-    <div [ngClass]="{
-            'mat-stepper-label-active': step.completed || selectedIndex == i,
-            'mat-stepper-label-inactive': !step.completed && selectedIndex != i
-            }">
+    <div [class.mat-stepper-label-active]="step.completed || selectedIndex == i"
+         [class.mat-stepper-label-inactive]="!step.completed && selectedIndex != i">
       <!-- If there is a label template, use it. -->
       <ng-container *ngIf="step.stepLabel"[ngTemplateOutlet]="step.stepLabel.template">
       </ng-container>

src/lib/stepper/stepper.scss

@@ -24,8 +24,7 @@ $mat-step-optional-font-size: 12px;
   vertical-align: middle;
 }
 
-.mat-stepper-index-new ,
-.mat-stepper-index-interacted {
+.mat-step-indicator {
   border-radius: 50%;
   height: $mat-stepper-label-header-height;
   width: $mat-stepper-label-header-height;
@@ -48,8 +47,7 @@ $mat-step-optional-font-size: 12px;
   outline: none;
   padding: 0 $mat-stepper-side-gap;
 
-  .mat-stepper-index-new ,
-  .mat-stepper-index-interacted {
+  .mat-step-indicator {
     margin-right: $mat-stepper-line-gap;
     flex: none;
   }
@@ -62,8 +60,7 @@ $mat-step-optional-font-size: 12px;
   outline: none;
   max-height: $mat-stepper-label-header-height;
 
-  .mat-stepper-index-new ,
-  .mat-stepper-index-interacted {
+  .mat-step-indicator {
     margin-right: $mat-vertical-stepper-content-margin - $mat-stepper-side-gap;
   }
 }