Changes based on review - event properties, selectors, SPACE support, etc. + demo

Author: jwshinjwshin

src/cdk/stepper/step-label.ts

@@ -6,14 +6,11 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Directive, TemplateRef, ViewContainerRef} from '@angular/core';
-import {TemplatePortalDirective} from '../portal';
+import {Directive, TemplateRef} from '@angular/core';
 
 @Directive({
   selector: '[cdk-step-label]',
 })
-export class CdkStepLabel extends TemplatePortalDirective {
-  constructor(templateRef: TemplateRef<any>, viewContainerRef: ViewContainerRef) {
-    super(templateRef, viewContainerRef);
-  }
+export class CdkStepLabel {
+  constructor(public template: TemplateRef<any>) { }
 }

src/cdk/stepper/step.ts

@@ -10,10 +10,9 @@ import {
   Component, ContentChild, Input, TemplateRef, ViewChild
 } from '@angular/core';
 import {CdkStepLabel} from './step-label';
-import {coerceBooleanProperty} from '../coercion/boolean-property';
 
 @Component({
-  selector: '[cdk-step]',
+  selector: 'cdk-step',
   templateUrl: 'step.html',
 })
 export class CdkStep {
@@ -27,22 +26,6 @@ export class CdkStep {
   @Input()
   label: string;
 
-  /** Whether the step is optional or not. */
-  @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()
-  get editable() { return this._editable; }
-  set editable(value: any) {
-    this._editable = coerceBooleanProperty(value);
-  }
-  private _editable: boolean = true;
-
   /** Whether the step is the last one in the list. */
   _isLast: boolean = false;
 }

src/cdk/stepper/stepper.ts

@@ -19,22 +19,28 @@ import {
   ElementRef
 } from '@angular/core';
 import {CdkStep} from './step';
-import {LEFT_ARROW, RIGHT_ARROW, ENTER, TAB} from '../keyboard/keycodes';
+import {LEFT_ARROW, RIGHT_ARROW, ENTER, SPACE} 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 selection changes. */
 export class CdkStepperSelectionEvent {
-  index: number;
+  /** The index of the step that is newly selected during this change event. */
+  newIndex: number;
+
+  /** The index of the step that was previously selected. */
+  oldIndex: number;
+
+  /** The step component that is selected ruing this change event. */
   step: CdkStep;
 }
 
 @Directive({
-  selector: '[cdkStepper]',
+  selector: 'cdk-stepper',
   host: {
-    '(focus)': '_setStepfocus()',
+    '(focus)': '_setStepfocused()',
     '(keydown)': '_onKeydown($event)',
   },
 })
@@ -66,30 +72,31 @@ export class CdkStepper {
   }
 
   /** Selects and focuses the provided step. */
-  select(step: CdkStep): void {
-    let stepsArray = this._steps.toArray();
-    this._selectedIndex = stepsArray.indexOf(step);
-    this.selectionChange.emit(this._createStepperSelectionEvent(this._selectedIndex));
-    this._focusIndex = this._selectedIndex;
-    this._setStepFocus();
+  select(step: CdkStep | number): void {
+    if (typeof step == 'number') {
+      this.selectionChange.emit(this._createStepperSelectionEvent(step, this._selectedIndex));
+    } else {
+      let stepsArray = this._steps.toArray();
+      this.selectionChange.emit(
+          this._createStepperSelectionEvent(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._selectedIndex++;
-    this.selectionChange.emit(this._createStepperSelectionEvent(this._selectedIndex));
-    this._focusIndex = this._selectedIndex;
-    this._setStepFocus();
+    this.selectionChange.emit(
+        this._createStepperSelectionEvent(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._selectedIndex--;
-    this.selectionChange.emit(this._createStepperSelectionEvent(this._selectedIndex));
-    this._focusIndex = this._selectedIndex;
-    this._setStepFocus();
+    this.selectionChange.emit(
+        this._createStepperSelectionEvent(this._selectedIndex - 1, this._selectedIndex));
+    this._setStepFocused(this._selectedIndex);
   }
 
   /** Returns a unique id for each step label element. */
@@ -102,9 +109,12 @@ export class CdkStepper {
     return `mat-step-content-${this._groupId}-${i}`;
   }
 
-  private _createStepperSelectionEvent(index: number): CdkStepperSelectionEvent {
+  private _createStepperSelectionEvent(newIndex: number,
+                                       oldIndex: number): CdkStepperSelectionEvent {
+    this._selectedIndex = newIndex;
     const event = new CdkStepperSelectionEvent();
-    event.index = index;
+    event.newIndex = newIndex;
+    event.oldIndex = oldIndex;
     event.step = this._steps.toArray()[this._selectedIndex];
     return event;
   }
@@ -113,27 +123,26 @@ export class CdkStepper {
     switch (event.keyCode) {
       case RIGHT_ARROW:
         if (this._focusIndex != this._steps.length - 1) {
-          this._focusIndex++;
-          this._setStepFocus();
+          this._setStepFocused(this._focusIndex + 1);
         }
         break;
       case LEFT_ARROW:
         if (this._focusIndex != 0) {
-          this._focusIndex--;
-          this._setStepFocus();
+          this._setStepFocused(this._focusIndex - 1);
         }
         break;
+      case SPACE:
       case ENTER:
-        this._selectedIndex = this._focusIndex;
-        this._createStepperSelectionEvent(this._selectedIndex);
+        this._createStepperSelectionEvent(this._focusIndex, this._selectedIndex);
         break;
+      default:
+        return;
     }
-    if (event.keyCode != TAB) {
-      event.preventDefault();
-    }
+    event.preventDefault();
   }
 
-  private _setStepFocus() {
+  private _setStepFocused(index: number) {
+    this._focusIndex = index;
     this._stepHeader.toArray()[this._focusIndex].nativeElement.focus();
   }
 }

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

@@ -61,14 +61,14 @@ export class DemoApp {
     {name: 'Slider', route: 'slider'},
     {name: 'Slide Toggle', route: 'slide-toggle'},
     {name: 'Snack Bar', route: 'snack-bar'},
+    {name: 'Stepper', route: 'stepper'},
     {name: 'Table', route: 'table'},
     {name: 'Tabs', route: 'tabs'},
     {name: 'Toolbar', route: 'toolbar'},
     {name: 'Tooltip', route: 'tooltip'},
     {name: 'Platform', route: 'platform'},
     {name: 'Style', route: 'style'},
-    {name: 'Typography', route: 'typography'},
-    {name: 'Stepper', route: 'stepper'}
+    {name: 'Typography', route: 'typography'}
   ];
 
   constructor(private _element: ElementRef) {

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

@@ -1,8 +1,27 @@
 <h2>Horizontal Stepper Demo</h2>
 <mat-horizontal-stepper [(selectedIndex)]="horizontalActiveIndex">
-    <mat-step *ngFor="let step of steps" [label]="step.label">
-        <md-input-container>
-            <input mdInput placeholder="Answer" [(ngModel)]="step.content">
-        </md-input-container>
-    </mat-step>
+  <mat-step *ngFor="let step of steps" [label]="step.label">
+    <md-input-container>
+      <input mdInput placeholder="Answer" [(ngModel)]="step.content">
+    </md-input-container>
+  </mat-step>
 </mat-horizontal-stepper>
+
+<h2>Horizontal Stepper Demo with Templated Label</h2>
+<mat-horizontal-stepper [(selectedIndex)]="labelTemplateIndex">
+  <mat-step *ngFor="let step of steps">
+    <ng-template mat-step-label>{{step.label}}</ng-template>
+    <md-input-container>
+      <input mdInput placeholder="Answer" [(ngModel)]="step.content">
+    </md-input-container>
+  </mat-step>
+</mat-horizontal-stepper>
+
+<h2>Vertical Stepper Demo</h2>
+<mat-vertical-stepper [(selectedIndex)]="verticalActiveIndex">
+  <mat-step *ngFor="let step of steps" [label]="step.label">
+    <md-input-container>
+      <input mdInput placeholder="Answer" [(ngModel)]="step.content">
+    </md-input-container>
+  </mat-step>
+</mat-vertical-stepper>

src/lib/stepper/step-label.ts

@@ -6,14 +6,14 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Directive, TemplateRef, ViewContainerRef} from '@angular/core';
+import {Directive, TemplateRef} from '@angular/core';
 import {CdkStepLabel} from '@angular/cdk';
 
 @Directive({
   selector: '[md-step-label], [mat-step-label]',
 })
 export class MdStepLabel extends CdkStepLabel {
-  constructor(templateRef: TemplateRef<any>, viewContainerRef: ViewContainerRef) {
-    super(templateRef, viewContainerRef);
+  constructor(public template: TemplateRef<any>) {
+    super(template);
   }
 }

src/lib/stepper/step.ts

@@ -14,7 +14,6 @@ import {MdStepLabel} from './step-label';
   moduleId: module.id,
   selector: 'md-step, mat-step',
   templateUrl: 'step.html',
-  inputs: ['label'],
 })
 export class MdStep extends CdkStep {
   /** Content for the step label given by <ng-template mat-step-label>. */

src/lib/stepper/stepper-horizontal.html

@@ -13,15 +13,15 @@
             <div class="mat-step-label">
                 <!-- If there is a label template, use it. -->
                 <ng-template [ngIf]="step.stepLabel">
-                    <ng-template [cdkPortalHost]="step.stepLabel"></ng-template>
+                    <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>
+        </ng-template>
         <div *ngIf="!step._isLast" class="connector-line"></div>
     </div>
 </div>

src/lib/stepper/stepper-vertical.html

@@ -7,8 +7,8 @@
              [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>
+            <div *ngIf="step.active" class="active-step">{{i + 1}}</div>
+            <div *ngIf="!step.active" class="inactive-step">{{i + 1}}</div>
 
             <div class="mat-step-label">
                 <!-- If there is a label template, use it. -->

src/lib/stepper/stepper.scss

@@ -1,15 +1,7 @@
-.mat-step-header:focus {
-  background: yellow;
-}
-
 .mat-stepper-horizontal[aria-expanded='false'] {
   display:none;
 }
 
-.mat-stepper-horizontal[aria-expanded='true'] {
-  background: pink;
-}
-
 .active-step, .inactive-step {
   display: inline-block;
 }