feat(stepper): Create stepper button directives to enable adding buttons to stepper (#5951)

* Create stepper button directives to enable adding buttons to stepper

* Changes made based on review

* Minor changes with click handlers

Author: jwshinjwshin

src/cdk/stepper/index.ts

@@ -10,13 +10,15 @@ import {NgModule} from '@angular/core';
 import {CdkStepper, CdkStep} from './stepper';
 import {CommonModule} from '@angular/common';
 import {CdkStepLabel} from './step-label';
+import {CdkStepperNext, CdkStepperPrevious} from './stepper-button';
 
 @NgModule({
   imports: [CommonModule],
-  exports: [CdkStep, CdkStepper, CdkStepLabel],
-  declarations: [CdkStep, CdkStepper, CdkStepLabel]
+  exports: [CdkStep, CdkStepper, CdkStepLabel, CdkStepperNext, CdkStepperPrevious],
+  declarations: [CdkStep, CdkStepper, CdkStepLabel, CdkStepperNext, CdkStepperPrevious]
 })
 export class CdkStepperModule {}
 
 export * from './stepper';
 export * from './step-label';
+export * from './stepper-button';

src/cdk/stepper/stepper-button.ts

@@ -0,0 +1,28 @@
+/**
+ * @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} from '@angular/core';
+import {CdkStepper} from './stepper';
+
+/** Button that moves to the next step in a stepper workflow. */
+@Directive({
+  selector: 'button[cdkStepperNext]',
+  host: {'(click)': '_stepper.next()'}
+})
+export class CdkStepperNext {
+  constructor(public _stepper: CdkStepper) { }
+}
+
+/** Button that moves to the previous step in a stepper workflow. */
+@Directive({
+  selector: 'button[cdkStepperPrevious]',
+  host: {'(click)': '_stepper.previous()'}
+})
+export class CdkStepperPrevious {
+  constructor(public _stepper: CdkStepper) { }
+}

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

@@ -4,6 +4,10 @@ <h2>Horizontal Stepper Demo</h2>
     <md-input-container>
       <input mdInput placeholder="Answer" [(ngModel)]="step.content">
     </md-input-container>
+    <div>
+      <button md-button mdStepperPrevious>Back</button>
+      <button md-button mdStepperNext>Next</button>
+    </div>
   </md-step>
 </md-horizontal-stepper>
 
@@ -14,6 +18,10 @@ <h2>Horizontal Stepper Demo with Templated Label</h2>
     <md-input-container>
       <input mdInput placeholder="Answer" [(ngModel)]="step.content">
     </md-input-container>
+    <div>
+      <button md-button mdStepperPrevious>Back</button>
+      <button md-button mdStepperNext>Next</button>
+    </div>
   </md-step>
 </md-horizontal-stepper>
 
@@ -23,5 +31,9 @@ <h2>Vertical Stepper Demo</h2>
     <md-input-container>
       <input mdInput placeholder="Answer" [(ngModel)]="step.content">
     </md-input-container>
+    <div>
+      <button md-button mdStepperPrevious>Back</button>
+      <button md-button mdStepperNext>Next</button>
+    </div>
   </md-step>
 </md-vertical-stepper>

src/lib/core/compatibility/compatibility.ts

@@ -40,6 +40,8 @@ export const MAT_ELEMENTS_SELECTOR = `
   [matLine],
   [matRowDef],
   [matStepLabel],
+  [matStepperNext],
+  [matStepperPrevious],
   [matTabLabel],
   [matTabLink],
   [matTabNav],
@@ -121,6 +123,8 @@ export const MD_ELEMENTS_SELECTOR = `
   [mdLine],
   [mdRowDef],
   [mdStepLabel],
+  [mdStepperNext],
+  [mdStepperPrevious],
   [mdTabLabel],
   [mdTabLink],
   [mdTabNav],

src/lib/stepper/index.ts

@@ -16,15 +16,19 @@ import {MdStep, MdStepper} from './stepper';
 import {CdkStepperModule} from '@angular/cdk';
 import {MdCommonModule} from '../core';
 import {MdStepLabel} from './step-label';
+import {MdStepperNext, MdStepperPrevious} from './stepper-button';
 
 @NgModule({
   imports: [MdCommonModule, CommonModule, PortalModule, MdButtonModule, CdkStepperModule],
-  exports: [MdCommonModule, MdHorizontalStepper, MdVerticalStepper, MdStep, MdStepLabel, MdStepper],
-  declarations: [MdHorizontalStepper, MdVerticalStepper, MdStep, MdStepLabel, MdStepper],
+  exports: [MdCommonModule, MdHorizontalStepper, MdVerticalStepper, MdStep, MdStepLabel, MdStepper,
+    MdStepperNext, MdStepperPrevious],
+  declarations: [MdHorizontalStepper, MdVerticalStepper, MdStep, MdStepLabel, MdStepper,
+    MdStepperNext, MdStepperPrevious],
 })
 export class MdStepperModule {}
 
 export * from './stepper-horizontal';
 export * from './stepper-vertical';
 export * from './step-label';
 export * from './stepper';
+export * from './stepper-button';

src/lib/stepper/stepper-button.ts

@@ -0,0 +1,27 @@
+/**
+ * @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} from '@angular/core';
+import {CdkStepper, CdkStepperNext, CdkStepperPrevious} from '@angular/cdk';
+import {MdStepper} from './stepper';
+
+/** Button that moves to the next step in a stepper workflow. */
+@Directive({
+  selector: 'button[mdStepperNext], button[matStepperNext]',
+  host: {'(click)': '_stepper.next()'},
+  providers: [{provide: CdkStepper, useExisting: MdStepper}]
+})
+export class MdStepperNext extends CdkStepperNext { }
+
+/** Button that moves to the previous step in a stepper workflow. */
+@Directive({
+  selector: 'button[mdStepperPrevious], button[matStepperPrevious]',
+  host: {'(click)': '_stepper.previous()'},
+  providers: [{provide: CdkStepper, useExisting: MdStepper}]
+})
+export class MdStepperPrevious extends CdkStepperPrevious { }

src/lib/stepper/stepper-horizontal.html

@@ -28,8 +28,3 @@
      [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>
-</div>

src/lib/stepper/stepper-vertical.html

@@ -25,11 +25,5 @@
        [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>
-    </div>
   </div>
 </div>