feat(stepper): Merge initial prototype of stepper into the upstream stepper branch.

src/cdk/public_api.ts

@@ -15,3 +15,4 @@ export * from './portal/index';
 export * from './rxjs/index';
 export * from './observe-content/index';
 export * from './keyboard/index';
+export * from './stepper/index';

src/cdk/stepper/index.ts

@@ -0,0 +1,24 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {NgModule} from '@angular/core';
+import {CdkStepper} from './stepper';
+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],
+    declarations: [CdkStep, CdkStepper, CdkStepLabel]
+})
+export class CdkStepperModule {}
+
+export * from './stepper';
+export * from './step';
+export * from './step-label';

src/cdk/stepper/step-label.ts

@@ -0,0 +1,18 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {Directive, TemplateRef, ViewContainerRef} from '@angular/core';
+import {TemplatePortalDirective} from '../portal';
+@Directive({
+    selector: '[cdk-step-label]',
+})
+export class CdkStepLabel extends TemplatePortalDirective {
+    constructor(templateRef: TemplateRef<any>, viewContainerRef: ViewContainerRef) {
+        super(templateRef, viewContainerRef);
+    }
+}

src/cdk/stepper/step.html

@@ -0,0 +1 @@
+<ng-template><ng-content></ng-content></ng-template>

src/cdk/stepper/step.ts

@@ -0,0 +1,56 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {
+    Component, ContentChild, Directive, Input, OnInit, TemplateRef, ViewChild,
+    ViewContainerRef
+} from '@angular/core';
+import {CdkStepLabel} from './step-label';
+
+@Component({
+    selector: '[cdk-step]',
+    templateUrl: 'step.html',
+})
+export class CdkStep {
+    @ContentChild(CdkStepLabel) stepLabel: CdkStepLabel;
+    @ViewChild(TemplateRef) content: TemplateRef<any>;
+
+    /** Label of the step. */
+    @Input()
+    label: string;
+
+    /** Whether the step is optional or not. */
+    @Input() 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;
+    }
+    private _selected: boolean = false;
+
+    /** Whether the step has been completed. */
+    get completed() { return this._completed; }
+    set completed(value: boolean) {
+        this._completed = value;
+    }
+    private _completed: boolean = false;
+}

src/cdk/stepper/stepper.ts

@@ -0,0 +1,153 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {
+    Component, ContentChildren, EventEmitter, Input, Output, QueryList, OnInit,
+    AfterViewChecked, AfterViewInit, Directive, ElementRef, ViewChild, ViewChildren
+} 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';
+
+/** Used to generate unique ID for each stepper component. */
+let nextId = 0;
+
+/** Change event emitted on focus or selection changes. */
+export class CdkStepEvent {
+    index: number;
+    step: CdkStep;
+}
+
+@Directive({
+    selector: '[cdkStepper]',
+    host: {
+        '(keydown)': '_onKeydown($event)'
+    },
+})
+export class CdkStepper {
+    @ContentChildren(CdkStep) _steps: QueryList<CdkStep>;
+
+    @ViewChildren('stepHeader') _stepHeader: QueryList<ElementRef>;
+
+    /** The index of the currently selected step. */
+    @Input()
+    set selectedIndex(value: number) {
+        this._selectedIndex = 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;
+
+    /** The index of the step that the focus is currently on. */
+    get focusIndex(): number {return this._focusIndex; }
+    private _focusIndex: number = 0;
+
+    private _groupId: number;
+
+    constructor() {
+        this._groupId = nextId++;
+    }
+
+    /** Selects and focuses the provided step. */
+    selectStep(step: CdkStep): void {
+        let stepsArray = this._steps.toArray();
+        this._selectedIndex = stepsArray.indexOf(step);
+        this.stepEvent.emit(this._emitStepEvent(this._selectedIndex));
+        this._focusIndex = this._selectedIndex;
+        this._setStepFocus();
+    }
+
+    /** Selects and focuses the next step in list. */
+    nextStep(): void {
+        if (this._selectedIndex == this._steps.length - 1) { return; }
+        this._selectedIndex++;
+        this.stepEvent.emit(this._emitStepEvent(this._selectedIndex));
+        this._focusIndex = this._selectedIndex;
+        this._setStepFocus();
+    }
+
+    /** Selects and focuses the previous step in list. */
+    previousStep(): void {
+        if (this._selectedIndex == 0) { return; }
+        this._selectedIndex--;
+        this.stepEvent.emit(this._emitStepEvent(this._selectedIndex));
+        this._focusIndex = this._selectedIndex;
+        this._setStepFocus();
+    }
+
+    /** Returns a unique id for each step label element. */
+    _getStepLabelId(i: number): string {
+        return `mat-step-label-${this._groupId}-${i}`;
+    }
+
+    /** Returns a unique id for each step content element. */
+    _getStepContentId(i: number): string {
+        return `mat-step-content-${this._groupId}-${i}`;
+    }
+
+    private _emitStepEvent(index: number): CdkStepEvent {
+        const event = new CdkStepEvent();
+        event.index = index;
+        event.step = this._steps.toArray()[this._selectedIndex];
+        this._selectedStep = event.step;
+        return event;
+    }
+
+    _onKeydown(event: KeyboardEvent) {
+        switch (event.keyCode) {
+            case RIGHT_ARROW:
+                if (this._focusIndex != this._steps.length - 1) {
+                    this._focusIndex++;
+                    this._setStepFocus();
+                }
+                break;
+            case LEFT_ARROW:
+                if (this._focusIndex != 0) {
+                    this._focusIndex--;
+                    this._setStepFocus();
+                }
+                break;
+            case ENTER:
+                this._selectedIndex = this._focusIndex;
+                this._emitStepEvent(this._selectedIndex);
+                break;
+        }
+        if (event.keyCode != TAB) {
+            event.preventDefault();
+        }
+    }
+
+    _setStepFocus() {
+        this._stepHeader.toArray()[this._focusIndex].nativeElement.focus();
+        this.focusChange.emit(this._emitStepEvent(this._selectedIndex));
+    }
+}

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

@@ -76,10 +76,12 @@ import {
   MdToolbarModule,
   MdTooltipModule,
   OverlayContainer,
-  StyleModule
+  StyleModule,
+  MdStepperModule,
 } from '@angular/material';
 import {CdkTableModule} from '@angular/cdk';
 import {TableHeaderDemo} from './table/table-header-demo';
+import {StepperDemo} from './stepper/stepper-demo';
 
 /**
  * NgModule that includes all Material modules that are required to serve the demo-app.
@@ -118,7 +120,8 @@ import {TableHeaderDemo} from './table/table-header-demo';
     MdTooltipModule,
     MdNativeDateModule,
     CdkTableModule,
-    StyleModule
+    StyleModule,
+    MdStepperModule,
   ]
 })
 export class DemoMaterialModule {}
@@ -184,6 +187,7 @@ export class DemoMaterialModule {}
     PlatformDemo,
     TypographyDemo,
     ExpansionDemo,
+    StepperDemo,
   ],
   providers: [
     {provide: OverlayContainer, useClass: FullscreenOverlayContainer},

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

@@ -67,7 +67,8 @@ export class DemoApp {
     {name: 'Tooltip', route: 'tooltip'},
     {name: 'Platform', route: 'platform'},
     {name: 'Style', route: 'style'},
-    {name: 'Typography', route: 'typography'}
+    {name: 'Typography', route: 'typography'},
+    {name: 'Stepper', route: 'stepper'}
   ];
 
   constructor(private _element: ElementRef) {

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

@@ -36,6 +36,7 @@ import {DatepickerDemo} from '../datepicker/datepicker-demo';
 import {TableDemo} from '../table/table-demo';
 import {TypographyDemo} from '../typography/typography-demo';
 import {ExpansionDemo} from '../expansion/expansion-demo';
+import {StepperDemo} from '../stepper/stepper-demo';
 
 export const DEMO_APP_ROUTES: Routes = [
   {path: '', component: Home},
@@ -74,4 +75,5 @@ export const DEMO_APP_ROUTES: Routes = [
   {path: 'style', component: StyleDemo},
   {path: 'typography', component: TypographyDemo},
   {path: 'expansion', component: ExpansionDemo},
+  {path: 'stepper', component: StepperDemo},
 ];

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

@@ -0,0 +1,8 @@
+<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-horizontal-stepper>

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

@@ -0,0 +1,19 @@
+import {Component} from '@angular/core';
+
+@Component({
+    moduleId: module.id,
+    selector: 'stepper-demo',
+    templateUrl: 'stepper-demo.html',
+    styleUrls: ['stepper-demo.scss'],
+})
+export class StepperDemo {
+    verticalActiveIndex = 0;
+    horizontalActiveIndex = 0;
+    labelTemplateIndex = 0;
+    steps = [
+        {label: 'Confirm your name', content: 'Last name, First name.'},
+        {label: 'Confirm your contact information', content: '123-456-7890'},
+        {label: 'Confirm your address', content: '1600 Amphitheater Pkwy MTV'},
+        {label: 'You are now done', content: 'Finished!'}
+        ];
+}

src/lib/module.ts

@@ -48,6 +48,7 @@ import {MdExpansionModule} from './expansion/index';
 import {MdTableModule} from './table/index';
 import {MdSortModule} from './sort/index';
 import {MdPaginatorModule} from './paginator/index';
+import {MdStepperModule} from './stepper/index';
 
 const MATERIAL_MODULES = [
   MdAutocompleteModule,
@@ -86,7 +87,8 @@ const MATERIAL_MODULES = [
   A11yModule,
   PlatformModule,
   MdCommonModule,
-  ObserveContentModule
+  ObserveContentModule,
+  MdStepperModule,
 ];
 
 /** @deprecated */

src/lib/public_api.ts

@@ -44,3 +44,4 @@ export * from './tabs/index';
 export * from './tabs/tab-nav-bar/index';
 export * from './toolbar/index';
 export * from './tooltip/index';
+export * from './stepper/index';