Additional properties for step

Author: jwshinjwshin

src/cdk/stepper/stepper.ts

@@ -77,6 +77,26 @@ export class CdkStep {
   @Input()
   label: string;
 
+  @Input()
+  get editable() { return this._editable; }
+  set editable(value: any) {
+    this._editable = coerceBooleanProperty(value);
+  }
+  private _editable = true;
+
+  /** Whether the completion of step is optional or not. */
+  @Input()
+  get optional() { return this._optional; }
+  set optional(value: any) {
+    this._optional = coerceBooleanProperty(value);
+  }
+  private _optional = false;
+
+  /** Return whether step is completed or not. */
+  get completed() {
+    return this._stepControl ? this._stepControl.valid && this.interacted : this.interacted;
+  }
+
   constructor(private _stepper: CdkStepper) { }
 
   /** Selects this step component. */
@@ -109,6 +129,7 @@ export class CdkStepper {
   @Input()
   get selectedIndex() { return this._selectedIndex; }
   set selectedIndex(index: number) {
+    if (index < this._selectedIndex && !this._steps.toArray()[index].editable) { return; }
     if (this._selectedIndex != index && !this._anyControlsInvalid(index)) {
       this._emitStepperSelectionEvent(index);
       this._focusStep(this._selectedIndex);
@@ -208,7 +229,7 @@ export class CdkStepper {
     const stepsArray = this._steps.toArray();
     stepsArray[this._selectedIndex].interacted = true;
     if (this._linear) {
-      return stepsArray.slice(0, index).some(step => step.stepControl.invalid);
+      return stepsArray.slice(0, index).some(step => step.stepControl.invalid && !step.optional);
     }
     return false;
   }

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

@@ -19,12 +19,12 @@ <h3>Linear Vertical Stepper Demo using a single form</h3>
       </div>
     </md-step>
 
-    <md-step formGroupName="1" [stepControl]="formArray.get([1])">
+    <md-step formGroupName="1" [stepControl]="formArray.get([1])" [optional]="true">
       <ng-template mdStepLabel>
         <div>Fill out your phone number</div>
       </ng-template>
       <md-input-container>
-        <input mdInput placeholder="Phone number" formControlName="phoneFormCtrl">
+        <input mdInput placeholder="Phone number" formControlName="phoneFormCtrl" required>
         <md-error>This field is required</md-error>
       </md-input-container>
       <div>
@@ -88,44 +88,41 @@ <h3>Linear Horizontal Stepper Demo using a different form for each step</h3>
 </md-horizontal-stepper>
 
 <h3>Vertical Stepper Demo</h3>
+<md-checkbox [(ngModel)]="isNonEditable">Make steps non-editable</md-checkbox>
 <md-vertical-stepper>
-  <md-step>
+  <md-step [editable]="!isNonEditable">
     <ng-template mdStepLabel>Fill out your name</ng-template>
     <md-form-field>
       <input mdInput placeholder="First Name">
-      <md-error>This field is required</md-error>
     </md-form-field>
 
     <md-form-field>
       <input mdInput placeholder="Last Name">
-      <md-error>This field is required</md-error>
     </md-form-field>
     <div>
       <button md-button mdStepperNext type="button">Next</button>
     </div>
   </md-step>
 
-  <md-step>
+  <md-step [editable]="!isNonEditable">
     <ng-template mdStepLabel>
       <div>Fill out your phone number</div>
     </ng-template>
     <md-form-field>
       <input mdInput placeholder="Phone number">
-      <md-error>This field is required</md-error>
     </md-form-field>
     <div>
       <button md-button mdStepperPrevious type="button">Back</button>
       <button md-button mdStepperNext type="button">Next</button>
     </div>
   </md-step>
 
-  <md-step>
+  <md-step [editable]="!isNonEditable">
     <ng-template mdStepLabel>
       <div>Fill out your address</div>
     </ng-template>
     <md-form-field>
       <input mdInput placeholder="Address">
-      <md-error>This field is required</md-error>
     </md-form-field>
     <div>
       <button md-button mdStepperPrevious type="button">Back</button>
@@ -148,12 +145,10 @@ <h3>Horizontal Stepper Demo</h3>
     <ng-template mdStepLabel>Fill out your name</ng-template>
     <md-form-field>
       <input mdInput placeholder="First Name">
-      <md-error>This field is required</md-error>
     </md-form-field>
 
     <md-form-field>
       <input mdInput placeholder="Last Name">
-      <md-error>This field is required</md-error>
     </md-form-field>
     <div>
       <button md-button mdStepperNext type="button">Next</button>
@@ -166,7 +161,6 @@ <h3>Horizontal Stepper Demo</h3>
     </ng-template>
     <md-form-field>
       <input mdInput placeholder="Phone number">
-      <md-error>This field is required</md-error>
     </md-form-field>
     <div>
       <button md-button mdStepperPrevious type="button">Back</button>
@@ -180,7 +174,6 @@ <h3>Horizontal Stepper Demo</h3>
     </ng-template>
     <md-form-field>
       <input mdInput placeholder="Address">
-      <md-error>This field is required</md-error>
     </md-form-field>
     <div>
       <button md-button mdStepperPrevious type="button">Back</button>

src/demo-app/stepper/stepper-demo.ts

@@ -10,6 +10,7 @@ import {FormBuilder, FormGroup, Validators} from '@angular/forms';
 export class StepperDemo {
   formGroup: FormGroup;
   isNonLinear = false;
+  isNonEditable = false;
 
   nameFormGroup: FormGroup;
   phoneFormGroup: FormGroup;
@@ -34,7 +35,7 @@ export class StepperDemo {
           lastNameFormCtrl: ['', Validators.required],
         }),
         this._formBuilder.group({
-          phoneFormCtrl: [''],
+          phoneFormCtrl: ['', Validators.required],
         })
       ])
     });

src/lib/stepper/_stepper-theme.scss

@@ -9,11 +9,17 @@
 
   .mat-horizontal-stepper-header, .mat-vertical-stepper-header {
 
-    .mat-stepper-label {
+    .mat-stepper-label-active {
       color: mat-color($foreground, text);
     }
 
-    .mat-stepper-index {
+    .mat-stepper-label-inactive,
+    .mat-step-optional {
+      color: mat-color($foreground, disabled-text);
+    }
+
+    .mat-stepper-index-interacted,
+    .mat-stepper-index-new {
       background-color: mat-color($primary);
       color: mat-color($primary, default-contrast);
     }
@@ -23,7 +29,7 @@
         color: mat-color($foreground, disabled-text);
       }
 
-      .mat-stepper-index {
+      .mat-stepper-index-new {
         background-color: mat-color($foreground, disabled-text);
       }
     }

src/lib/stepper/index.ts

@@ -17,9 +17,17 @@ import {CdkStepperModule} from '@angular/cdk/stepper';
 import {MdCommonModule} from '../core';
 import {MdStepLabel} from './step-label';
 import {MdStepperNext, MdStepperPrevious} from './stepper-button';
+import {MdIconModule} from '../icon/index';
 
 @NgModule({
-  imports: [MdCommonModule, CommonModule, PortalModule, MdButtonModule, CdkStepperModule],
+  imports: [
+    MdCommonModule,
+    CommonModule,
+    PortalModule,
+    MdButtonModule,
+    CdkStepperModule,
+    MdIconModule
+  ],
   exports: [MdCommonModule, MdHorizontalStepper, MdVerticalStepper, MdStep, MdStepLabel, MdStepper,
     MdStepperNext, MdStepperPrevious],
   declarations: [MdHorizontalStepper, MdVerticalStepper, MdStep, MdStepLabel, MdStepper,

src/lib/stepper/stepper-horizontal.html

@@ -8,16 +8,25 @@
          [tabIndex]="_focusIndex == i ? 0 : -1"
          (click)="step.select()"
          (keydown)="_onKeydown($event)">
-      <div class="mat-stepper-index">
+      <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>
 
-      <div class="mat-stepper-label">
+      <div [ngClass]="{
+            'mat-stepper-label-active': step.completed || selectedIndex == i,
+            '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>
         <!-- It there is no label template, fall back to the text label. -->
         <div *ngIf="!step.stepLabel">{{step.label}}</div>
+
+        <div class="mat-step-optional" *ngIf="step.optional">Optional</div>
       </div>
     </div>
 

src/lib/stepper/stepper-vertical.html

@@ -6,19 +6,28 @@
        [tabIndex]="_focusIndex == i ? 0 : -1"
        (click)="step.select()"
        (keydown)="_onKeydown($event)">
-    <div class="mat-stepper-index">
+    <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>
 
-    <div class="mat-stepper-label">
+    <div [ngClass]="{
+            'mat-stepper-label-active': step.completed || selectedIndex == i,
+            '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>
       <!-- It there is no label template, fall back to the text label. -->
       <div *ngIf="!step.stepLabel">{{step.label}}</div>
-    </div>
 
+      <div class="mat-step-optional" *ngIf="step.optional">Optional</div>
+    </div>
   </div>
+
   <div class="mat-vertical-content-container">
     <div class="mat-vertical-stepper-content" role="tabpanel"
          [@stepTransition]="_getAnimationDirection(i)"

src/lib/stepper/stepper.scss

@@ -11,27 +11,32 @@ $mat-connector-line-width: 1px !default;
 $mat-connector-line-gap: 8px !default;
 $mat-horizontal-connector-line-size: 5% !default;
 $mat-vertical-stepper-margin-top: $mat-stepper-side-gap - $mat-connector-line-gap !default;
+$mat-step-optional-label-font-size: 12px;
 
 :host {
   display: block;
   padding: 0 $mat-stepper-side-gap $mat-stepper-side-gap $mat-stepper-side-gap;
 }
 
-.mat-stepper-label {
-  display: inline-flex;
+.mat-stepper-label-active,
+.mat-stepper-label-inactive {
+  display: inline-block;
   white-space: nowrap;
   overflow: hidden;
   // TODO(jwshin): text-overflow does not work as expected.
   text-overflow: ellipsis;
   min-width: $mat-stepper-label-min-width;
+  vertical-align: middle;
 }
 
-.mat-stepper-index {
+.mat-stepper-index-new ,
+.mat-stepper-index-interacted {
   border-radius: 50%;
   height: $mat-label-header-height;
   width: $mat-label-header-height;
   text-align: center;
   line-height: $mat-label-header-height;
+  display: inline-block;
 }
 
 .mat-horizontal-stepper-header-container {
@@ -41,15 +46,15 @@ $mat-vertical-stepper-margin-top: $mat-stepper-side-gap - $mat-connector-line-ga
 }
 
 .mat-horizontal-stepper-header {
-  display: inline-flex;
-  line-height: $mat-horizontal-stepper-header-height;
+  display: flex;
+  height: $mat-horizontal-stepper-header-height;
   overflow: hidden;
   align-items: center;
   outline: none;
 
-  .mat-stepper-index {
+  .mat-stepper-index-new ,
+  .mat-stepper-index-interacted {
     margin-right: $mat-connector-line-gap;
-    display: inline-block;
     flex: none;
   }
 }
@@ -59,12 +64,18 @@ $mat-vertical-stepper-margin-top: $mat-stepper-side-gap - $mat-connector-line-ga
   align-items: center;
   margin: $mat-connector-line-gap 0;
   outline: none;
+  max-height: $mat-label-header-height;
 
-  .mat-stepper-index {
+  .mat-stepper-index-new ,
+  .mat-stepper-index-interacted {
     margin-right: $mat-vertical-stepper-content-margin;
   }
 }
 
+.mat-step-optional {
+  font-size: $mat-step-optional-label-font-size;
+}
+
 .mat-connector-line {
   border-top-width: $mat-connector-line-width;
   border-top-style: solid;