Changes made based on the review

Author: jwshinjwshin

src/cdk/stepper/index.ts

@@ -12,6 +12,7 @@ import {CommonModule} from '@angular/common';
 import {CdkStep} from './step';
 import {CdkStepLabel} from './step-label';
 import {PortalModule} from '../portal';
+
 @NgModule({
   imports: [CommonModule, PortalModule],
   exports: [CdkStep, CdkStepper, CdkStepLabel],

src/cdk/stepper/step-label.ts

@@ -8,6 +8,7 @@
 
 import {Directive, TemplateRef, ViewContainerRef} from '@angular/core';
 import {TemplatePortalDirective} from '../portal';
+
 @Directive({
   selector: '[cdk-step-label]',
 })

src/cdk/stepper/step.ts

@@ -7,50 +7,42 @@
  */
 
 import {
-  Component, ContentChild, Directive, Input, OnInit, TemplateRef, ViewChild,
-  ViewContainerRef
+  Component, ContentChild, Input, TemplateRef, ViewChild
 } from '@angular/core';
 import {CdkStepLabel} from './step-label';
+import {coerceBooleanProperty} from '../coercion/boolean-property';
 
 @Component({
   selector: '[cdk-step]',
   templateUrl: 'step.html',
 })
 export class CdkStep {
+  /** Template for step label if it exists. */
   @ContentChild(CdkStepLabel) stepLabel: CdkStepLabel;
+
+  /** Template for step content. */
   @ViewChild(TemplateRef) content: TemplateRef<any>;
 
   /** Label of the step. */
   @Input()
   label: string;
 
   /** Whether the step is optional or not. */
-  @Input() optional: boolean = false;
+  @Input()
+  get optional() { return this._optional; }
+  set optional(value: any) {
+    this._optional = coerceBooleanProperty(value);
+  }
+  private _optional: boolean = false;
 
   /** Whether the step is editable or not. */
-  @Input() editable: boolean = true;
-
-  /** Whether the step is the last one in the list. */
-  isLast: boolean = false;
-
-  // /** Whether the step is active. */
-  // get active() { return this._active; }
-  // set active(value: boolean) {
-  //     this._active = value;
-  // }
-  // private _active: boolean = false;
-
-  /** Whether the step has been selected. */
-  get selected(): boolean { return this._selected; }
-  set selected(value: boolean) {
-    this._selected = value;
+  @Input()
+  get editable() { return this._editable; }
+  set editable(value: any) {
+    this._editable = coerceBooleanProperty(value);
   }
-  private _selected: boolean = false;
+  private _editable: boolean = true;
 
-  /** Whether the step has been completed. */
-  get completed() { return this._completed; }
-  set completed(value: boolean) {
-    this._completed = value;
-  }
-  private _completed: boolean = false;
+  /** Whether the step is the last one in the list. */
+  _isLast: boolean = false;
 }

src/cdk/stepper/stepper.ts

@@ -7,69 +7,57 @@
  */
 
 import {
-  Component, ContentChildren, EventEmitter, Input, Output, QueryList, OnInit,
-  AfterViewChecked, AfterViewInit, Directive, ElementRef, ViewChild, ViewChildren
+  ContentChildren,
+  EventEmitter,
+  Input,
+  Output,
+  QueryList,
+  Directive,
+  ViewChildren,
+  // tslint doesn't recognize `ElementRef` is used since it's only used as a generic.
+  // tslint:disable-next-line
+  ElementRef
 } from '@angular/core';
 import {CdkStep} from './step';
-import {Observable} from 'rxjs/Observable';
-import {map} from 'rxjs/operator/map';
 import {LEFT_ARROW, RIGHT_ARROW, ENTER, TAB} from '../keyboard/keycodes';
+import {coerceNumberProperty} from '../coercion/number-property';
 
 /** Used to generate unique ID for each stepper component. */
 let nextId = 0;
 
-/** Change event emitted on focus or selection changes. */
-export class CdkStepEvent {
+/** Change event emitted on selection changes. */
+export class CdkStepperSelectionEvent {
   index: number;
   step: CdkStep;
 }
 
 @Directive({
   selector: '[cdkStepper]',
   host: {
-    '(keydown)': '_onKeydown($event)'
+    '(focus)': '_setStepfocus()',
+    '(keydown)': '_onKeydown($event)',
   },
 })
 export class CdkStepper {
+  /** The list of step components that the stepper is holding. */
   @ContentChildren(CdkStep) _steps: QueryList<CdkStep>;
 
+  /** The list of step headers of the steps in the stepper. */
   @ViewChildren('stepHeader') _stepHeader: QueryList<ElementRef>;
 
   /** The index of the currently selected step. */
   @Input()
-  set selectedIndex(value: number) {
-    this._selectedIndex = value;
+  get selectedIndex() { return this._selectedIndex; }
+  set selectedIndex(value: any) {
+    this._selectedIndex = coerceNumberProperty(value);
   }
-  get selectedIndex(): number { return this._selectedIndex; }
   private _selectedIndex: number;
 
-  /** Optional input to support both linear and non-linear stepper component. */
-  @Input() linear: boolean = true;
-
-  /** Output to enable support for two-way binding on `[(selectedIndex)]` */
-  @Output() get selectedIndexChange(): Observable<number> {
-    return map.call(this.stepEvent, event => event.index);
-  }
-
-  // @Output() get focusIndexChange(): Observable<number> {
-  //     return map.call(this.focusChange, event => event.index);
-  // }
-
   /** Event emitted when the selected step has changed. */
-  @Output() stepEvent = new EventEmitter<CdkStepEvent>();
-
-  /** Event emitted when the focused step has changed. */
-  @Output() focusChange = new EventEmitter<CdkStepEvent>();
-
-  /** The step that is currently selected. */
-  get selectedStep(): CdkStep {
-    return this._steps.toArray()[this._selectedIndex];
-  }
-  private _selectedStep: CdkStep;
+  @Output() selectionChange = new EventEmitter<CdkStepperSelectionEvent>();
 
   /** The index of the step that the focus is currently on. */
-  get focusIndex(): number {return this._focusIndex; }
-  private _focusIndex: number = 0;
+  _focusIndex: number = 0;
 
   private _groupId: number;
 
@@ -78,28 +66,28 @@ export class CdkStepper {
   }
 
   /** Selects and focuses the provided step. */
-  selectStep(step: CdkStep): void {
+  select(step: CdkStep): void {
     let stepsArray = this._steps.toArray();
     this._selectedIndex = stepsArray.indexOf(step);
-    this.stepEvent.emit(this._emitStepEvent(this._selectedIndex));
+    this.selectionChange.emit(this._createStepperSelectionEvent(this._selectedIndex));
     this._focusIndex = this._selectedIndex;
     this._setStepFocus();
   }
 
   /** Selects and focuses the next step in list. */
-  nextStep(): void {
+  next(): void {
     if (this._selectedIndex == this._steps.length - 1) { return; }
     this._selectedIndex++;
-    this.stepEvent.emit(this._emitStepEvent(this._selectedIndex));
+    this.selectionChange.emit(this._createStepperSelectionEvent(this._selectedIndex));
     this._focusIndex = this._selectedIndex;
     this._setStepFocus();
   }
 
   /** Selects and focuses the previous step in list. */
-  previousStep(): void {
+  previous(): void {
     if (this._selectedIndex == 0) { return; }
     this._selectedIndex--;
-    this.stepEvent.emit(this._emitStepEvent(this._selectedIndex));
+    this.selectionChange.emit(this._createStepperSelectionEvent(this._selectedIndex));
     this._focusIndex = this._selectedIndex;
     this._setStepFocus();
   }
@@ -114,11 +102,10 @@ export class CdkStepper {
     return `mat-step-content-${this._groupId}-${i}`;
   }
 
-  private _emitStepEvent(index: number): CdkStepEvent {
-    const event = new CdkStepEvent();
+  private _createStepperSelectionEvent(index: number): CdkStepperSelectionEvent {
+    const event = new CdkStepperSelectionEvent();
     event.index = index;
     event.step = this._steps.toArray()[this._selectedIndex];
-    this._selectedStep = event.step;
     return event;
   }
 
@@ -138,16 +125,15 @@ export class CdkStepper {
         break;
       case ENTER:
         this._selectedIndex = this._focusIndex;
-        this._emitStepEvent(this._selectedIndex);
+        this._createStepperSelectionEvent(this._selectedIndex);
         break;
     }
     if (event.keyCode != TAB) {
       event.preventDefault();
     }
   }
 
-  _setStepFocus() {
+  private _setStepFocus() {
     this._stepHeader.toArray()[this._focusIndex].nativeElement.focus();
-    this.focusChange.emit(this._emitStepEvent(this._selectedIndex));
   }
 }

src/lib/stepper/index.ts

@@ -16,6 +16,7 @@ import {MdStep} from './step';
 import {CdkStepperModule} from '@angular/cdk';
 import {MdCommonModule} from '../core';
 import {MdStepLabel} from './step-label';
+
 @NgModule({
   imports: [MdCommonModule, CommonModule, PortalModule, MdButtonModule, CdkStepperModule],
   exports: [MdCommonModule, MdHorizontalStepper, MdVerticalStepper, MdStep, MdStepLabel],

src/lib/stepper/step-label.ts

@@ -8,6 +8,7 @@
 
 import {Directive, TemplateRef, ViewContainerRef} from '@angular/core';
 import {CdkStepLabel} from '@angular/cdk';
+
 @Directive({
   selector: '[md-step-label], [mat-step-label]',
 })

src/lib/stepper/step.ts

@@ -9,6 +9,7 @@
 import {Component, ContentChild, TemplateRef, ViewChild} from '@angular/core';
 import {CdkStep} from '@angular/cdk';
 import {MdStepLabel} from './step-label';
+
 @Component({
   moduleId: module.id,
   selector: 'md-step, mat-step',

src/lib/stepper/stepper-horizontal.html

@@ -4,8 +4,8 @@
              [id]="_getStepLabelId(i)"
              [attr.aria-controls]="_getStepContentId(i)"
              [attr.aria-selected]="selectedIndex == i"
-             [tabIndex]="focusIndex == i ? 0 : -1"
-             (click)="selectStep(step)"
+             [tabIndex]="_focusIndex == i ? 0 : -1"
+             (click)="select(step)"
              (keydown)="_onKeydown($event)">
             <div *ngIf="step.active" class="active-step">{{i + 1}}</div>
             <div *ngIf="!step.active" class="inactive-step">{{i + 1}}</div>
@@ -22,7 +22,7 @@
             </div>
 
         </div>
-        <div *ngIf="!step.isLast" class="connector-line"></div>
+        <div *ngIf="!step._isLast" class="connector-line"></div>
     </div>
 </div>
 <div *ngFor="let step of _steps; let i = index"
@@ -33,6 +33,6 @@
     <ng-container [ngTemplateOutlet]="step.content"></ng-container>
 </div>
 <div>
-    <button md-button (click)="previousStep()">Back</button>
-    <button md-button (click)="nextStep()">Next</button>
+    <button md-button (click)="previous()">Back</button>
+    <button md-button (click)="next()">Next</button>
 </div>

src/lib/stepper/stepper-horizontal.ts

@@ -9,6 +9,7 @@
 import {Component, ContentChildren, QueryList} from '@angular/core';
 import {MdStep} from './step';
 import {CdkStepper} from '@angular/cdk';
+
 @Component({
   moduleId: module.id,
   selector: 'md-horizontal-stepper, mat-horizontal-stepper',
@@ -18,4 +19,4 @@ import {CdkStepper} from '@angular/cdk';
 })
 export class MdHorizontalStepper extends CdkStepper {
   @ContentChildren(MdStep) _steps: QueryList<MdStep>;
-}
+}

src/lib/stepper/stepper-vertical.html

@@ -4,8 +4,8 @@
              [id]="_getStepLabelId(i)"
              [attr.aria-controls]="_getStepContentId(i)"
              [attr.aria-selected]="selectedIndex == i"
-             [tabIndex]="focusIndex == i ? 0 : -1"
-             (click)="selectStep(step)"
+             [tabIndex]="_focusIndex == i ? 0 : -1"
+             (click)="select(step)"
              (keydown)="_onKeydown($event)">
             <div *ngIf="step.active" class="activeStep">{{i + 1}}</div>
             <div *ngIf="!step.active" class="inactiveStep">{{i + 1}}</div>
@@ -22,17 +22,16 @@
             </div>
 
         </div>
-        <div *ngIf="!step.isLast" class="connector-line"></div>
+        <div *ngIf="!step._isLast" class="connector-line"></div>
         <div *ngIf="i == selectedIndex" role="tabpanel"
              [id]="_getStepContentId(i)"
              [attr.aria-labelledby]="_getStepLabelId(i)"
              [attr.aria-expanded]="selectedIndex == i">
             <ng-container [ngTemplateOutlet]="step.content"></ng-container>
         </div>
-        <div>
-            <button md-button (click)="previousStep()">Back</button>
-            <button md-button (click)="nextStep()">Next</button>
-            <button md-button>Cancel</button>
+        <div *ngIf="i == selectedIndex">
+            <button md-button (click)="previous()">Back</button>
+            <button md-button (click)="next()">Next</button>
         </div>
     </div>
 </div>

src/lib/stepper/stepper-vertical.ts

@@ -9,6 +9,7 @@
 import {Component, ContentChildren, QueryList} from '@angular/core';
 import {MdStep} from './step';
 import {CdkStepper} from '@angular/cdk';
+
 @Component({
   moduleId: module.id,
   selector: 'md-vertical-stepper, mat-vertical-stepper',