Add select() for step component + refactor to avoid circular dependency + support cycling using arrow keys

Author: jwshinjwshin

src/cdk/stepper/index.ts

@@ -7,9 +7,8 @@
  */
 
 import {NgModule} from '@angular/core';
-import {CdkStepper} from './stepper';
+import {CdkStepper, CdkStep} from './stepper';
 import {CommonModule} from '@angular/common';
-import {CdkStep} from './step';
 import {CdkStepLabel} from './step-label';
 import {PortalModule} from '../portal';
 
@@ -21,5 +20,4 @@ import {PortalModule} from '../portal';
 export class CdkStepperModule {}
 
 export * from './stepper';
-export * from './step';
 export * from './step-label';

src/cdk/stepper/step-label.ts

@@ -9,7 +9,7 @@
 import {Directive, TemplateRef} from '@angular/core';
 
 @Directive({
-  selector: '[cdk-step-label]',
+  selector: 'cdkStepLabel',
 })
 export class CdkStepLabel {
   constructor(public template: TemplateRef<any>) { }

src/cdk/stepper/step.ts

@@ -14,13 +14,14 @@ import {
   QueryList,
   Directive,
   ViewChildren,
-  // tslint doesn't recognize `ElementRef` is used since it's only used as a generic.
-  // tslint:disable-next-line
-  ElementRef
+  // 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, Component, ContentChild, ViewChild, TemplateRef
 } from '@angular/core';
-import {CdkStep} from './step';
 import {LEFT_ARROW, RIGHT_ARROW, ENTER, SPACE} from '../keyboard/keycodes';
 import {coerceNumberProperty} from '../coercion/number-property';
+import {CdkStepLabel} from './step-label';
 
 /** Used to generate unique ID for each stepper component. */
 let nextId = 0;
@@ -33,12 +34,38 @@ export class CdkStepperSelectionEvent {
   /** The index of the step that was previously selected. */
   oldIndex: number;
 
-  /** The step component that is selected ruing this change event. */
-  step: CdkStep;
+  /** The new step component that is selected ruing this change event. */
+  newStep: CdkStep;
+
+  /** The step component that was previously selected. */
+  oldStep: CdkStep;
+}
+
+@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;
+
+  constructor(private _stepper: CdkStepper) { }
+
+  /** Selects this step component. */
+  select(): void {
+    this._stepper.select(this);
+  }
 }
 
 @Directive({
-  selector: 'cdk-stepper',
+  selector: 'cdkStepper',
   host: {
     '(focus)': '_setStepfocused()',
     '(keydown)': '_onKeydown($event)',
@@ -62,9 +89,10 @@ export class CdkStepper {
   /** Event emitted when the selected step has changed. */
   @Output() selectionChange = new EventEmitter<CdkStepperSelectionEvent>();
 
-  /** The index of the step that the focus is currently on. */
+  /** The index of the step that the focus can be set. */
   _focusIndex: number = 0;
 
+  /** Used to track unique ID for each stepper component. */
   private _groupId: number;
 
   constructor() {
@@ -74,28 +102,25 @@ export class CdkStepper {
   /** Selects and focuses the provided step. */
   select(step: CdkStep | number): void {
     if (typeof step == 'number') {
-      this.selectionChange.emit(this._createStepperSelectionEvent(step, this._selectedIndex));
+      this._emitStepperSelectionEvent(step, this._selectedIndex);
     } else {
       let stepsArray = this._steps.toArray();
-      this.selectionChange.emit(
-          this._createStepperSelectionEvent(stepsArray.indexOf(step), this._selectedIndex));
+      this._emitStepperSelectionEvent(stepsArray.indexOf(step), this._selectedIndex);
     }
     this._setStepFocused(this._selectedIndex);
   }
 
   /** Selects and focuses the next step in list. */
   next(): void {
     if (this._selectedIndex == this._steps.length - 1) { return; }
-    this.selectionChange.emit(
-        this._createStepperSelectionEvent(this._selectedIndex + 1, this._selectedIndex));
+    this._emitStepperSelectionEvent(this._selectedIndex + 1, this._selectedIndex);
     this._setStepFocused(this._selectedIndex);
   }
 
   /** Selects and focuses the previous step in list. */
   previous(): void {
     if (this._selectedIndex == 0) { return; }
-    this.selectionChange.emit(
-        this._createStepperSelectionEvent(this._selectedIndex - 1, this._selectedIndex));
+    this._emitStepperSelectionEvent(this._selectedIndex - 1, this._selectedIndex);
     this._setStepFocused(this._selectedIndex);
   }
 
@@ -104,36 +129,41 @@ export class CdkStepper {
     return `mat-step-label-${this._groupId}-${i}`;
   }
 
-  /** Returns a unique id for each step content element. */
+  /** Returns nique id for each step content element. */
   _getStepContentId(i: number): string {
     return `mat-step-content-${this._groupId}-${i}`;
   }
 
-  private _createStepperSelectionEvent(newIndex: number,
-                                       oldIndex: number): CdkStepperSelectionEvent {
+  private _emitStepperSelectionEvent(newIndex: number,
+                                       oldIndex: number): void {
     this._selectedIndex = newIndex;
     const event = new CdkStepperSelectionEvent();
     event.newIndex = newIndex;
     event.oldIndex = oldIndex;
-    event.step = this._steps.toArray()[this._selectedIndex];
-    return event;
+    event.oldStep = this._steps.toArray()[oldIndex];
+    event.newStep = this._steps.toArray()[this._selectedIndex];
+    this.selectionChange.emit(event);
   }
 
   _onKeydown(event: KeyboardEvent) {
     switch (event.keyCode) {
       case RIGHT_ARROW:
         if (this._focusIndex != this._steps.length - 1) {
           this._setStepFocused(this._focusIndex + 1);
+        } else {
+          this._setStepFocused(0);
         }
         break;
       case LEFT_ARROW:
         if (this._focusIndex != 0) {
           this._setStepFocused(this._focusIndex - 1);
+        } else {
+          this._setStepFocused(this._steps.length - 1);
         }
         break;
       case SPACE:
       case ENTER:
-        this._createStepperSelectionEvent(this._focusIndex, this._selectedIndex);
+        this._emitStepperSelectionEvent(this._focusIndex, this._selectedIndex);
         break;
       default:
         return;

src/cdk/stepper/stepper.ts

@@ -13,18 +13,20 @@ import {MdButtonModule} from '../button/index';
 import {MdHorizontalStepper} from './stepper-horizontal';
 import {MdVerticalStepper} from './stepper-vertical';
 import {MdStep} from './step';
+import {MdStepper} from './stepper';
 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],
-  declarations: [MdHorizontalStepper, MdVerticalStepper, MdStep, MdStepLabel]
+  exports: [MdCommonModule, MdHorizontalStepper, MdVerticalStepper, MdStep, MdStepLabel, MdStepper],
+  declarations: [MdHorizontalStepper, MdVerticalStepper, MdStep, MdStepLabel, MdStepper],
 })
 export class MdStepperModule {}
 
 export * from './stepper-horizontal';
 export * from './stepper-vertical';
 export * from './step';
 export * from './step-label';
+export * from './stepper';

src/lib/stepper/index.ts

@@ -13,7 +13,7 @@ import {CdkStepLabel} from '@angular/cdk';
   selector: '[md-step-label], [mat-step-label]',
 })
 export class MdStepLabel extends CdkStepLabel {
-  constructor(public template: TemplateRef<any>) {
+  constructor(template: TemplateRef<any>) {
     super(template);
   }
 }

src/lib/stepper/step-label.ts

@@ -9,6 +9,7 @@
 import {Component, ContentChild, TemplateRef, ViewChild} from '@angular/core';
 import {CdkStep} from '@angular/cdk';
 import {MdStepLabel} from './step-label';
+import {MdStepper} from './stepper';
 
 @Component({
   moduleId: module.id,
@@ -21,4 +22,8 @@ export class MdStep extends CdkStep {
 
   /** Template inside the MdStep view that contains an <ng-content>. */
   @ViewChild(TemplateRef) content: TemplateRef<any>;
+
+  constructor(mdStepper: MdStepper) {
+    super(mdStepper);
+  }
 }

src/lib/stepper/step.ts

@@ -1,38 +1,38 @@
 <div class="mat-stepper-container">
-    <div *ngFor="let step of _steps; let i = index" class="mat-step" role="tablist">
-        <div #stepHeader class="mat-step-header" role="tab"
-             [id]="_getStepLabelId(i)"
-             [attr.aria-controls]="_getStepContentId(i)"
-             [attr.aria-selected]="selectedIndex == i"
-             [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>
+  <div *ngFor="let step of _steps; let i = index; let isLast = last"
+       class="mat-step" role="tablist">
+    <div #stepHeader class="mat-step-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 [ngClass]="{'active-step' : step.active, 'inactive-step' : !step.active}">
+        {{i + 1}}
+      </div>
 
-            <div class="mat-step-label">
-                <!-- If there is a label template, use it. -->
-                <ng-template [ngIf]="step.stepLabel">
-                    <ng-container [ngTemplateOutlet]="step.stepLabel.template"></ng-container>
-                </ng-template>
-                <!-- It there is no label template, fall back to the text label. -->
-                <ng-template [ngIf]="!step.stepLabel">
-                    <div>{{step.label}}</div>
-                </ng-template>
-            </div>
+      <div class="mat-step-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>
 
-        </ng-template>
-        <div *ngIf="!step._isLast" class="connector-line"></div>
+      </ng-template>
+      <div *ngIf="!isLast" class="connector-line"></div>
     </div>
-</div>
-<div *ngFor="let step of _steps; let i = index"
-    class="mat-stepper-horizontal" role="tabpanel"
-    [id]="_getStepContentId(i)"
-    [attr.aria-labelledby]="_getStepLabelId(i)"
-    [attr.aria-expanded]="selectedIndex == i">
+  </div>
+  <div *ngFor="let step of _steps; let i = index"
+       class="mat-stepper-horizontal" role="tabpanel"
+       [id]="_getStepContentId(i)"
+       [attr.aria-labelledby]="_getStepLabelId(i)"
+       [attr.aria-expanded]="selectedIndex == i">
     <ng-container [ngTemplateOutlet]="step.content"></ng-container>
-</div>
-<div>
+  </div>
+  <div>
     <button md-button (click)="previous()">Back</button>
     <button md-button (click)="next()">Next</button>
+  </div>
 </div>

src/lib/stepper/stepper-horizontal.html

@@ -6,17 +6,19 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Component, ContentChildren, QueryList} from '@angular/core';
+import {Component, ContentChildren, forwardRef, QueryList} from '@angular/core';
 import {MdStep} from './step';
-import {CdkStepper} from '@angular/cdk';
+import {MdStepper} from './stepper';
 
 @Component({
   moduleId: module.id,
   selector: 'md-horizontal-stepper, mat-horizontal-stepper',
   templateUrl: 'stepper-horizontal.html',
   styleUrls: ['stepper.scss'],
   inputs: ['selectedIndex'],
+  providers: [{ provide: MdStepper, useExisting: forwardRef(() => MdHorizontalStepper) }]
 })
-export class MdHorizontalStepper extends CdkStepper {
+export class MdHorizontalStepper extends MdStepper {
+  /** Steps that the horizontal stepper holds. */
   @ContentChildren(MdStep) _steps: QueryList<MdStep>;
 }