From 8a1e000c55a35c39e525aa4be5d5de2cd33effb6 Mon Sep 17 00:00:00 2001 From: Ji Won Shin Date: Fri, 21 Jul 2017 15:16:45 -0700 Subject: [PATCH 1/3] Create stepper button directives to enable adding buttons to stepper --- src/cdk/stepper/index.ts | 6 ++-- src/cdk/stepper/stepper-button.ts | 38 +++++++++++++++++++++ src/demo-app/stepper/stepper-demo.html | 12 +++++++ src/lib/core/compatibility/compatibility.ts | 4 +++ src/lib/stepper/index.ts | 8 +++-- src/lib/stepper/stepper-button.ts | 35 +++++++++++++++++++ src/lib/stepper/stepper-horizontal.html | 5 --- src/lib/stepper/stepper-vertical.html | 6 ---- 8 files changed, 99 insertions(+), 15 deletions(-) create mode 100644 src/cdk/stepper/stepper-button.ts create mode 100644 src/lib/stepper/stepper-button.ts diff --git a/src/cdk/stepper/index.ts b/src/cdk/stepper/index.ts index 58ccf40404b2..cfb2fec4dc26 100644 --- a/src/cdk/stepper/index.ts +++ b/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'; diff --git a/src/cdk/stepper/stepper-button.ts b/src/cdk/stepper/stepper-button.ts new file mode 100644 index 000000000000..af2bf13f46f6 --- /dev/null +++ b/src/cdk/stepper/stepper-button.ts @@ -0,0 +1,38 @@ +/** + * @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'; + +@Directive({ + selector: 'button[cdkStepperNext]', + host: { + '(click)': '_onClick()', + } +}) +export class CdkStepperNext { + constructor(private _stepper: CdkStepper) { } + + _onClick(): void { + this._stepper.next(); + } +} + +@Directive({ + selector: 'button[cdkStepperPrevious]', + host: { + '(click)': '_onClick()', + } +}) +export class CdkStepperPrevious { + constructor(private _stepper: CdkStepper) { } + + _onClick(): void { + this._stepper.previous(); + } +} diff --git a/src/demo-app/stepper/stepper-demo.html b/src/demo-app/stepper/stepper-demo.html index 6b7b9944da9d..89d64a58574f 100644 --- a/src/demo-app/stepper/stepper-demo.html +++ b/src/demo-app/stepper/stepper-demo.html @@ -4,6 +4,10 @@

Horizontal Stepper Demo

+
+ + +
@@ -14,6 +18,10 @@

Horizontal Stepper Demo with Templated Label

+
+ + +
@@ -23,5 +31,9 @@

Vertical Stepper Demo

+
+ + +
diff --git a/src/lib/core/compatibility/compatibility.ts b/src/lib/core/compatibility/compatibility.ts index 3b6f0bf3cda5..17b877583d02 100644 --- a/src/lib/core/compatibility/compatibility.ts +++ b/src/lib/core/compatibility/compatibility.ts @@ -35,6 +35,8 @@ export const MAT_ELEMENTS_SELECTOR = ` [matDialogTitle], [matLine], [matStepLabel], + [matStepperNext], + [matStepperPrevious], [matTabLabel], [matTabLink], [matTabNav], @@ -105,6 +107,8 @@ export const MD_ELEMENTS_SELECTOR = ` [mdDialogTitle], [mdLine], [mdStepLabel], + [mdStepperNext], + [mdStepperPrevious], [mdTabLabel], [mdTabLink], [mdTabNav], diff --git a/src/lib/stepper/index.ts b/src/lib/stepper/index.ts index 844198c1e7cb..8fffc8b2a28e 100644 --- a/src/lib/stepper/index.ts +++ b/src/lib/stepper/index.ts @@ -16,11 +16,14 @@ 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 {} @@ -28,3 +31,4 @@ export * from './stepper-horizontal'; export * from './stepper-vertical'; export * from './step-label'; export * from './stepper'; +export * from './stepper-button'; diff --git a/src/lib/stepper/stepper-button.ts b/src/lib/stepper/stepper-button.ts new file mode 100644 index 000000000000..fd71af78c560 --- /dev/null +++ b/src/lib/stepper/stepper-button.ts @@ -0,0 +1,35 @@ +/** + * @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 {CdkStepperNext, CdkStepperPrevious} from '@angular/cdk'; +import {MdStepper} from './stepper'; + +@Directive({ + selector: 'button[mdStepperNext], button[matStepperNext]', + host: { + '(click)': '_onClick()', + } +}) +export class MdStepperNext extends CdkStepperNext { + constructor(mdStepper: MdStepper) { + super(mdStepper); + } +} + +@Directive({ + selector: 'button[mdStepperPrevious], button[matStepperPrevious]', + host: { + '(click)': '_onClick()', + } +}) +export class MdStepperPrevious extends CdkStepperPrevious { + constructor(mdStepper: MdStepper) { + super(mdStepper); + } +} diff --git a/src/lib/stepper/stepper-horizontal.html b/src/lib/stepper/stepper-horizontal.html index 937de1074045..e69836b862f1 100644 --- a/src/lib/stepper/stepper-horizontal.html +++ b/src/lib/stepper/stepper-horizontal.html @@ -28,8 +28,3 @@ [attr.aria-expanded]="selectedIndex == i"> - -
- - -
diff --git a/src/lib/stepper/stepper-vertical.html b/src/lib/stepper/stepper-vertical.html index 1ea8ef9e6789..993ea0cdb04d 100644 --- a/src/lib/stepper/stepper-vertical.html +++ b/src/lib/stepper/stepper-vertical.html @@ -25,11 +25,5 @@ [attr.aria-labelledby]="_getStepLabelId(i)" [attr.aria-expanded]="selectedIndex == i"> - - -
- - -
From 477ed8f857b4a346ff8252b03807330c71e22abb Mon Sep 17 00:00:00 2001 From: Ji Won Shin Date: Tue, 25 Jul 2017 14:11:12 -0700 Subject: [PATCH 2/3] Changes made based on review --- src/cdk/stepper/stepper-button.ts | 2 ++ src/lib/stepper/stepper-button.ts | 22 +++++++++------------- 2 files changed, 11 insertions(+), 13 deletions(-) diff --git a/src/cdk/stepper/stepper-button.ts b/src/cdk/stepper/stepper-button.ts index af2bf13f46f6..ad6311668603 100644 --- a/src/cdk/stepper/stepper-button.ts +++ b/src/cdk/stepper/stepper-button.ts @@ -9,6 +9,7 @@ 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: { @@ -23,6 +24,7 @@ export class CdkStepperNext { } } +/** Button that moves to the previous step in a stepper workflow. */ @Directive({ selector: 'button[cdkStepperPrevious]', host: { diff --git a/src/lib/stepper/stepper-button.ts b/src/lib/stepper/stepper-button.ts index fd71af78c560..903e7d979159 100644 --- a/src/lib/stepper/stepper-button.ts +++ b/src/lib/stepper/stepper-button.ts @@ -7,29 +7,25 @@ */ import {Directive} from '@angular/core'; -import {CdkStepperNext, CdkStepperPrevious} from '@angular/cdk'; +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)': '_onClick()', - } + }, + providers: [{provide: CdkStepper, useExisting: MdStepper}], }) -export class MdStepperNext extends CdkStepperNext { - constructor(mdStepper: MdStepper) { - super(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)': '_onClick()', - } + }, + providers: [{provide: CdkStepper, useExisting: MdStepper}] }) -export class MdStepperPrevious extends CdkStepperPrevious { - constructor(mdStepper: MdStepper) { - super(mdStepper); - } -} +export class MdStepperPrevious extends CdkStepperPrevious { } From ca3ea464236a94252e463453ee9b5b30d0423850 Mon Sep 17 00:00:00 2001 From: Ji Won Shin Date: Tue, 25 Jul 2017 17:04:49 -0700 Subject: [PATCH 3/3] Minor changes with click handlers --- src/cdk/stepper/stepper-button.ts | 20 ++++---------------- src/lib/stepper/stepper-button.ts | 10 +++------- 2 files changed, 7 insertions(+), 23 deletions(-) diff --git a/src/cdk/stepper/stepper-button.ts b/src/cdk/stepper/stepper-button.ts index ad6311668603..c63d8c822eef 100644 --- a/src/cdk/stepper/stepper-button.ts +++ b/src/cdk/stepper/stepper-button.ts @@ -12,29 +12,17 @@ import {CdkStepper} from './stepper'; /** Button that moves to the next step in a stepper workflow. */ @Directive({ selector: 'button[cdkStepperNext]', - host: { - '(click)': '_onClick()', - } + host: {'(click)': '_stepper.next()'} }) export class CdkStepperNext { - constructor(private _stepper: CdkStepper) { } - - _onClick(): void { - this._stepper.next(); - } + constructor(public _stepper: CdkStepper) { } } /** Button that moves to the previous step in a stepper workflow. */ @Directive({ selector: 'button[cdkStepperPrevious]', - host: { - '(click)': '_onClick()', - } + host: {'(click)': '_stepper.previous()'} }) export class CdkStepperPrevious { - constructor(private _stepper: CdkStepper) { } - - _onClick(): void { - this._stepper.previous(); - } + constructor(public _stepper: CdkStepper) { } } diff --git a/src/lib/stepper/stepper-button.ts b/src/lib/stepper/stepper-button.ts index 903e7d979159..d17d72fe3f04 100644 --- a/src/lib/stepper/stepper-button.ts +++ b/src/lib/stepper/stepper-button.ts @@ -13,19 +13,15 @@ import {MdStepper} from './stepper'; /** Button that moves to the next step in a stepper workflow. */ @Directive({ selector: 'button[mdStepperNext], button[matStepperNext]', - host: { - '(click)': '_onClick()', - }, - providers: [{provide: CdkStepper, useExisting: MdStepper}], + 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)': '_onClick()', - }, + host: {'(click)': '_stepper.previous()'}, providers: [{provide: CdkStepper, useExisting: MdStepper}] }) export class MdStepperPrevious extends CdkStepperPrevious { }