API change based on review

angular · Jul 19, 2017 · ef96e2e · ef96e2e
1 parent 78c9eb5
commit ef96e2e
Show file tree

Hide file tree

Showing 7 changed files with 103 additions and 116 deletions.
diff --git a/src/cdk/stepper/stepper.ts b/src/cdk/stepper/stepper.ts
@@ -17,10 +17,13 @@ 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, Component, ContentChild, ViewChild, TemplateRef
+  ElementRef,
+  Component,
+  ContentChild,
+  ViewChild,
+  TemplateRef
 } from '@angular/core';
 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. */
@@ -60,12 +63,12 @@ export class CdkStep {
 
   /** Selects this step component. */
   select(): void {
-    this._stepper.select(this);
+    this._stepper.selected = this;
   }
 }
 
 @Directive({
-  selector: 'cdkStepper',
+  selector: 'cdk-stepper',
   host: {
     '(focus)': '_setStepfocused()',
     '(keydown)': '_onKeydown($event)',
@@ -78,13 +81,22 @@ export class CdkStepper {
   /** The list of step headers of the steps in the stepper. */
   @ViewChildren('stepHeader') _stepHeader: QueryList<ElementRef>;
 
-  /** The index of the currently selected step. */
-  @Input()
+  /** The index of the selected step. */
   get selectedIndex() { return this._selectedIndex; }
-  set selectedIndex(value: any) {
-    this._selectedIndex = coerceNumberProperty(value);
+  set selectedIndex(index: number) {
+    if (this._selectedIndex == index) { return; }
+    this._emitStepperSelectionEvent(index);
+    this._setStepFocused(this._selectedIndex);
+  }
+  private _selectedIndex: number = 0;
+
+  /** Returns the step that is selected. */
+  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;
   }
-  private _selectedIndex: number;
 
   /** Event emitted when the selected step has changed. */
   @Output() selectionChange = new EventEmitter<CdkStepperSelectionEvent>();
@@ -99,29 +111,16 @@ export class CdkStepper {
     this._groupId = nextId++;
   }
 
-  /** Selects and focuses the provided step. */
-  select(step: CdkStep | number): void {
-    if (typeof step == 'number') {
-      this._emitStepperSelectionEvent(step, this._selectedIndex);
-    } else {
-      let stepsArray = this._steps.toArray();
-      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._emitStepperSelectionEvent(this._selectedIndex + 1, this._selectedIndex);
-    this._setStepFocused(this._selectedIndex);
+    this.selectedIndex++;
   }
 
   /** Selects and focuses the previous step in list. */
   previous(): void {
     if (this._selectedIndex == 0) { return; }
-    this._emitStepperSelectionEvent(this._selectedIndex - 1, this._selectedIndex);
-    this._setStepFocused(this._selectedIndex);
+    this.selectedIndex--;
   }
 
   /** Returns a unique id for each step label element. */
@@ -134,38 +133,31 @@ export class CdkStepper {
     return `mat-step-content-${this._groupId}-${i}`;
   }
 
-  private _emitStepperSelectionEvent(newIndex: number,
-                                       oldIndex: number): void {
-    this._selectedIndex = newIndex;
+  private _emitStepperSelectionEvent(newIndex: number): void {
     const event = new CdkStepperSelectionEvent();
+    event.oldIndex = this._selectedIndex;
     event.newIndex = newIndex;
-    event.oldIndex = oldIndex;
-    event.oldStep = this._steps.toArray()[oldIndex];
-    event.newStep = this._steps.toArray()[this._selectedIndex];
+    let stepsArray = this._steps.toArray();
+    event.oldStep = stepsArray[this._selectedIndex];
+    event.newStep = stepsArray[newIndex];
+    this._selectedIndex = newIndex;
     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);
-        }
+        this._setStepFocused((this._focusIndex + 1) % this._steps.length);
         break;
       case LEFT_ARROW:
-        if (this._focusIndex != 0) {
-          this._setStepFocused(this._focusIndex - 1);
-        } else {
-          this._setStepFocused(this._steps.length - 1);
-        }
+        this._setStepFocused((this._focusIndex + this._steps.length - 1) % this._steps.length);
         break;
       case SPACE:
       case ENTER:
-        this._emitStepperSelectionEvent(this._focusIndex, this._selectedIndex);
+        this._emitStepperSelectionEvent(this._focusIndex);
         break;
       default:
+        // Return to avoid calling preventDefault on keys that are not explicitly handled.
         return;
     }
     event.preventDefault();

diff --git a/src/lib/stepper/step.ts b/src/lib/stepper/step.ts
@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Component, ContentChild, TemplateRef, ViewChild} from '@angular/core';
+import {Component, ContentChild} from '@angular/core';
 import {CdkStep} from '@angular/cdk';
 import {MdStepLabel} from './step-label';
 import {MdStepper} from './stepper';
@@ -20,9 +20,6 @@ export class MdStep extends CdkStep {
   /** Content for the step label given by <ng-template mat-step-label>. */
   @ContentChild(MdStepLabel) stepLabel: MdStepLabel;
 
-  /** Template inside the MdStep view that contains an <ng-content>. */
-  @ViewChild(TemplateRef) content: TemplateRef<any>;
-
   constructor(mdStepper: MdStepper) {
     super(mdStepper);
   }

diff --git a/src/lib/stepper/stepper-horizontal.html b/src/lib/stepper/stepper-horizontal.html
@@ -1,38 +1,35 @@
-<div class="mat-stepper-container">
-  <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-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 *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>
 
-      </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>
+
+    </ng-template>
+    <div *ngIf="!isLast" class="connector-line"></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">
-    <ng-container [ngTemplateOutlet]="step.content"></ng-container>
-  </div>
-  <div>
-    <button md-button (click)="previous()">Back</button>
-    <button md-button (click)="next()">Next</button>
-  </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>
+<div>
+  <button md-button (click)="previous()">Back</button>
+  <button md-button (click)="next()">Next</button>
 </div>
diff --git a/src/lib/stepper/stepper-horizontal.ts b/src/lib/stepper/stepper-horizontal.ts
@@ -16,6 +16,10 @@ import {MdStepper} from './stepper';
   templateUrl: 'stepper-horizontal.html',
   styleUrls: ['stepper.scss'],
   inputs: ['selectedIndex'],
+  host: {
+    'class': 'mat-stepper-horizontal',
+    'role': 'tablist',
+  },
   providers: [{ provide: MdStepper, useExisting: forwardRef(() => MdHorizontalStepper) }]
 })
 export class MdHorizontalStepper extends MdStepper {

diff --git a/src/lib/stepper/stepper-vertical.html b/src/lib/stepper/stepper-vertical.html
@@ -1,36 +1,33 @@
-<div class="mat-stepper-container">
-  <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-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 *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 *ngIf="!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>
-        <button md-button (click)="previous()">Back</button>
-        <button md-button (click)="next()">Next</button>
-      </div>
+
+  </div>
+  <div *ngIf="!isLast" class="connector-line"></div>
+  <div 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>
+      <button md-button (click)="previous()">Back</button>
+      <button md-button (click)="next()">Next</button>
     </div>
   </div>
 </div>
diff --git a/src/lib/stepper/stepper-vertical.ts b/src/lib/stepper/stepper-vertical.ts
@@ -16,6 +16,10 @@ import {MdStepper} from './stepper';
   templateUrl: 'stepper-vertical.html',
   styleUrls: ['stepper.scss'],
   inputs: ['selectedIndex'],
+  host: {
+    'class': 'mat-stepper-vertical',
+    'role': 'tablist',
+  },
   providers: [{ provide: MdStepper, useExisting: forwardRef(() => MdVerticalStepper) }]
 })
 export class MdVerticalStepper extends MdStepper {

diff --git a/src/lib/stepper/stepper.scss b/src/lib/stepper/stepper.scss
@@ -1,11 +1,7 @@
-.mat-stepper-horizontal[aria-expanded='false'] {
+.mat-stepper-content[aria-expanded='false'] {
   display:none;
 }
 
-.active-step, .inactive-step {
-  display: inline-block;
-}
-
-.mat-step-label {
+.mat-stepper-index, .mat-stepper-label {
   display: inline-block;
 }