Several name changes, etc based on review

Author: jwshinjwshin

src/cdk/stepper/index.ts

@@ -10,10 +10,9 @@ import {NgModule} from '@angular/core';
 import {CdkStepper, CdkStep} from './stepper';
 import {CommonModule} from '@angular/common';
 import {CdkStepLabel} from './step-label';
-import {PortalModule} from '../portal';
 
 @NgModule({
-  imports: [CommonModule, PortalModule],
+  imports: [CommonModule],
   exports: [CdkStep, CdkStepper, CdkStepLabel],
   declarations: [CdkStep, CdkStepper, CdkStepLabel]
 })

src/cdk/stepper/stepper.ts

@@ -13,7 +13,6 @@ import {
   Output,
   QueryList,
   Directive,
-  ViewChildren,
   // This import is only used to define a generic type. The current TypeScript version incorrectly
   // considers such imports as unused (https://github.com/Microsoft/TypeScript/issues/14953)
   // tslint:disable-next-line:no-unused-variable
@@ -31,16 +30,16 @@ let nextId = 0;
 
 /** Change event emitted on selection changes. */
 export class CdkStepperSelectionEvent {
-  /** The index of the step that is newly selected during this change event. */
+  /** Index of the step now selected. */
   selectedIndex: number;
 
-  /** The index of the step that was previously selected. */
+  /** Index of the step previously selected. */
   previouslySelectedIndex: number;
 
-  /** The new step component that is selected ruing this change event. */
+  /** The step instance now selected. */
   selectedStep: CdkStep;
 
-  /** The step component that was previously selected. */
+  /** The step instance previously selected. */
   previouslySelectedStep: CdkStep;
 }
 
@@ -70,7 +69,7 @@ export class CdkStep {
 @Directive({
   selector: 'cdk-stepper',
   host: {
-    '(focus)': '_setStepFocused()',
+    '(focus)': '_focusStep()',
     '(keydown)': '_onKeydown($event)',
   },
 })
@@ -82,18 +81,19 @@ export class CdkStepper {
   _stepHeader: QueryList<ElementRef>;
 
   /** The index of the selected step. */
+  @Input()
   get selectedIndex() { return this._selectedIndex; }
   set selectedIndex(index: number) {
     if (this._selectedIndex != index) {
       this._emitStepperSelectionEvent(index);
-      this._setStepFocused(this._selectedIndex);
+      this._focusStep(this._selectedIndex);
     }
   }
   private _selectedIndex: number = 0;
 
-  /** Returns the step that is selected. */
+  /** The step that is selected. */
+  @Input()
   get selected() { return this._steps[this.selectedIndex]; }
-  /** Sets selectedIndex as the index of the provided step. */
   set selected(step: CdkStep) {
     let index = this._steps.toArray().indexOf(step);
     this.selectedIndex = index;
@@ -146,10 +146,10 @@ export class CdkStepper {
   _onKeydown(event: KeyboardEvent) {
     switch (event.keyCode) {
       case RIGHT_ARROW:
-        this._setStepFocused((this._focusIndex + 1) % this._steps.length);
+        this._focusStep((this._focusIndex + 1) % this._steps.length);
         break;
       case LEFT_ARROW:
-        this._setStepFocused((this._focusIndex + this._steps.length - 1) % this._steps.length);
+        this._focusStep((this._focusIndex + this._steps.length - 1) % this._steps.length);
         break;
       case SPACE:
       case ENTER:
@@ -162,7 +162,7 @@ export class CdkStepper {
     event.preventDefault();
   }
 
-  private _setStepFocused(index: number) {
+  private _focusStep(index: number) {
     this._focusIndex = index;
     this._stepHeader.toArray()[this._focusIndex].nativeElement.focus();
   }

src/lib/stepper/stepper-horizontal.html

@@ -1,34 +1,34 @@
-<div *ngFor="let step of _steps; let i = index; let isLast = last">
-  <div #stepHeader class="mat-stepper-header" role="tab"
-       [id]="_getStepLabelId(i)"
-       [attr.aria-controls]="_getStepContentId(i)"
-       [attr.aria-selected]="selectedIndex == i"
-       [tabIndex]="_focusIndex == i ? 0 : -1"
-       (click)="step.select()"
-       (keydown)="_onKeydown($event)">
-    <div class="mat-stepper-index">
-      {{i + 1}}
-    </div>
-
-    <div class="mat-stepper-label">
-      <!-- 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 #stepHeader *ngFor="let step of _steps; let i = index; let isLast = last"
+     class="mat-stepper-header" role="tab"
+     [id]="_getStepLabelId(i)"
+     [attr.aria-controls]="_getStepContentId(i)"
+     [attr.aria-selected]="selectedIndex == i"
+     [tabIndex]="_focusIndex == i ? 0 : -1"
+     (click)="step.select()"
+     (keydown)="_onKeydown($event)">
+  <div class="mat-stepper-index">
+    {{i + 1}}
+  </div>
 
-    </ng-template>
-    <div *ngIf="!isLast" class="connector-line"></div>
+  <div class="mat-stepper-label">
+    <!-- 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 *ngIf="!isLast" class="connector-line"></div>
 </div>
+
 <div *ngFor="let step of _steps; let i = index"
      class="mat-stepper-content" role="tabpanel"
      [id]="_getStepContentId(i)"
      [attr.aria-labelledby]="_getStepLabelId(i)"
      [attr.aria-expanded]="selectedIndex == i">
   <ng-container [ngTemplateOutlet]="step.content"></ng-container>
 </div>
+<!-- TODO(jwshin): Remove these buttons when stepper-button directives are created. -->
 <div>
   <button md-button (click)="previous()">Back</button>
   <button md-button (click)="next()">Next</button>

src/lib/stepper/stepper-horizontal.ts

@@ -20,7 +20,7 @@ import {MdStepper} from './stepper';
     'class': 'mat-stepper-horizontal',
     'role': 'tablist',
   },
-  providers: [{ provide: MdStepper, useExisting: MdHorizontalStepper }]
+  providers: [{provide: MdStepper, useExisting: MdHorizontalStepper}]
 })
 export class MdHorizontalStepper extends MdStepper {
   /** Steps that the horizontal stepper holds. */

src/lib/stepper/stepper-vertical.html

@@ -25,6 +25,8 @@
        [attr.aria-labelledby]="_getStepLabelId(i)"
        [attr.aria-expanded]="selectedIndex == i">
     <ng-container [ngTemplateOutlet]="step.content"></ng-container>
+
+    <!-- TODO(jwshin): Remove these buttons when stepper-button directives are created. -->
     <div>
       <button md-button (click)="previous()">Back</button>
       <button md-button (click)="next()">Next</button>

src/lib/stepper/stepper-vertical.ts

@@ -20,7 +20,7 @@ import {MdStepper} from './stepper';
     'class': 'mat-stepper-vertical',
     'role': 'tablist',
   },
-  providers: [{ provide: MdStepper, useExisting: MdVerticalStepper }]
+  providers: [{provide: MdStepper, useExisting: MdVerticalStepper}]
 })
 export class MdVerticalStepper extends MdStepper {
   /** Steps that the vertical stepper holds. */

src/lib/stepper/stepper.ts

@@ -7,7 +7,14 @@
  */
 
 import {CdkStepper} from '@angular/cdk';
-import {ElementRef, QueryList, ViewChildren} from '@angular/core';
+import {
+  // This import is only used to define a generic type. The current TypeScript version incorrectly
+  // considers such imports as unused (https://github.com/Microsoft/TypeScript/issues/14953)
+  // tslint:disable-next-line:no-unused-variable
+  ElementRef,
+  QueryList,
+  ViewChildren
+}from '@angular/core';
 
 export class MdStepper extends CdkStepper {
   @ViewChildren('stepHeader') _stepHeader: QueryList<ElementRef>;