diff --git a/src/cdk/stepper/stepper.ts b/src/cdk/stepper/stepper.ts index 31242d557228..b765d6c2f262 100644 --- a/src/cdk/stepper/stepper.ts +++ b/src/cdk/stepper/stepper.ts @@ -20,7 +20,8 @@ import { Component, ContentChild, ViewChild, - TemplateRef + TemplateRef, + ViewEncapsulation } from '@angular/core'; import {LEFT_ARROW, RIGHT_ARROW, ENTER, SPACE} from '@angular/cdk/keycodes'; import {CdkStepLabel} from './step-label'; @@ -53,7 +54,8 @@ export class StepperSelectionEvent { @Component({ selector: 'cdk-step', - templateUrl: 'step.html' + templateUrl: 'step.html', + encapsulation: ViewEncapsulation.None }) export class CdkStep { /** Template for step label if it exists. */ @@ -77,6 +79,35 @@ export class CdkStep { @Input() label: string; + @Input() + get editable() { return this._editable; } + set editable(value: any) { + this._editable = coerceBooleanProperty(value); + } + private _editable = true; + + /** Whether the completion of step is optional or not. */ + @Input() + get optional() { return this._optional; } + set optional(value: any) { + this._optional = coerceBooleanProperty(value); + } + private _optional = false; + + /** Return whether step is completed or not. */ + @Input() + get completed() { + return this._customCompleted == null ? this._defaultCompleted : this._customCompleted; + } + set completed(value: any) { + this._customCompleted = coerceBooleanProperty(value); + } + private _customCompleted: boolean | null = null; + + private get _defaultCompleted() { + return this._stepControl ? this._stepControl.valid && this.interacted : this.interacted; + } + constructor(private _stepper: CdkStepper) { } /** Selects this step component. */ @@ -109,7 +140,8 @@ export class CdkStepper { @Input() get selectedIndex() { return this._selectedIndex; } set selectedIndex(index: number) { - if (this._anyControlsInvalid(index)) { + if (this._anyControlsInvalid(index) + || index < this._selectedIndex && !this._steps.toArray()[index].editable) { // remove focus from clicked step header if the step is not able to be selected this._stepHeader.toArray()[index].nativeElement.blur(); } else if (this._selectedIndex != index) { @@ -134,7 +166,7 @@ export class CdkStepper { _focusIndex: number = 0; /** Used to track unique ID for each stepper component. */ - private _groupId: number; + _groupId: number; constructor() { this._groupId = nextId++; @@ -172,6 +204,16 @@ export class CdkStepper { } } + /** Returns the type of icon to be displayed. */ + _getIndicatorType(index: number): 'number' | 'edit' | 'done' { + const step = this._steps.toArray()[index]; + if (!step.completed || this._selectedIndex == index) { + return 'number'; + } else { + return step.editable ? 'edit' : 'done'; + } + } + private _emitStepperSelectionEvent(newIndex: number): void { const stepsArray = this._steps.toArray(); this.selectionChange.emit({ diff --git a/src/demo-app/stepper/stepper-demo.html b/src/demo-app/stepper/stepper-demo.html index 70dd6ab6b81b..dbbc6b501ed1 100644 --- a/src/demo-app/stepper/stepper-demo.html +++ b/src/demo-app/stepper/stepper-demo.html @@ -19,13 +19,13 @@

Linear Vertical Stepper Demo using a single form

- + -
Fill out your phone number
+
Fill out your email address
 - - This field is required + + The input is invalid.
@@ -62,12 +62,12 @@

Linear Horizontal Stepper Demo using a different form for each step

- -
+ + Fill out your phone number - - This field is required + + The input is invalid
@@ -88,30 +88,28 @@

Linear Horizontal Stepper Demo using a different form for each step

Vertical Stepper Demo

+Make steps non-editable - + Fill out your name - This field is required - This field is required
- +
Fill out your phone number
 - This field is required
@@ -119,13 +117,12 @@

Vertical Stepper Demo

 - +
Fill out your address
 - This field is required
@@ -148,12 +145,10 @@

Horizontal Stepper Demo

Fill out your name - This field is required - This field is required
@@ -161,12 +156,9 @@

Horizontal Stepper Demo

- -
Fill out your phone number
- + Fill out your phone number - This field is required
@@ -175,12 +167,9 @@

Horizontal Stepper Demo

- -
Fill out your address
- + Fill out your address - This field is required
diff --git a/src/demo-app/stepper/stepper-demo.ts b/src/demo-app/stepper/stepper-demo.ts index c4f546f0dfed..2c7ed6f7ce92 100644 --- a/src/demo-app/stepper/stepper-demo.ts +++ b/src/demo-app/stepper/stepper-demo.ts @@ -1,6 +1,8 @@ import {Component} from '@angular/core'; import {FormBuilder, FormGroup, Validators} from '@angular/forms'; +const EMAIL_REGEX = /^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/; + @Component({ moduleId: module.id, selector: 'stepper-demo', @@ -10,9 +12,10 @@ import {FormBuilder, FormGroup, Validators} from '@angular/forms'; export class StepperDemo { formGroup: FormGroup; isNonLinear = false; + isNonEditable = false; nameFormGroup: FormGroup; - phoneFormGroup: FormGroup; + emailFormGroup: FormGroup; steps = [ {label: 'Confirm your name', content: 'Last name, First name.'}, @@ -34,8 +37,8 @@ export class StepperDemo { lastNameFormCtrl: ['', Validators.required], }), this._formBuilder.group({ - phoneFormCtrl: [''], - }) + emailFormCtrl: ['', Validators.pattern(EMAIL_REGEX)] + }), ]) }); @@ -44,8 +47,8 @@ export class StepperDemo { lastNameCtrl: ['', Validators.required], }); - this.phoneFormGroup = this._formBuilder.group({ - phoneCtrl: ['', Validators.required] + this.emailFormGroup = this._formBuilder.group({ + emailCtrl: ['', Validators.pattern(EMAIL_REGEX)] }); } } diff --git a/src/lib/stepper/_stepper-theme.scss b/src/lib/stepper/_stepper-theme.scss index d61eb4715996..ed5042d3b031 100644 --- a/src/lib/stepper/_stepper-theme.scss +++ b/src/lib/stepper/_stepper-theme.scss @@ -7,30 +7,29 @@ $background: map-get($theme, background); $primary: map-get($theme, primary); - .mat-horizontal-stepper-header, .mat-vertical-stepper-header { - + .mat-step-header { &:focus, &:hover { background-color: mat-color($background, hover); } - .mat-stepper-label { + .mat-step-label-active { color: mat-color($foreground, text); } - .mat-stepper-index { + .mat-step-label-inactive, + .mat-step-optional { + color: mat-color($foreground, disabled-text); + } + + .mat-step-icon { background-color: mat-color($primary); color: mat-color($primary, default-contrast); } - &[aria-selected='false'] { - .mat-stepper-label { - color: mat-color($foreground, disabled-text); - } - - .mat-stepper-index { - background-color: mat-color($foreground, disabled-text); - } + .mat-step-icon-not-touched { + background-color: mat-color($foreground, disabled-text); + color: mat-color($primary, default-contrast); } } diff --git a/src/lib/stepper/index.ts b/src/lib/stepper/index.ts index de1802347449..416ee5d2295a 100644 --- a/src/lib/stepper/index.ts +++ b/src/lib/stepper/index.ts @@ -17,13 +17,22 @@ import {CdkStepperModule} from '@angular/cdk/stepper'; import {MdCommonModule} from '../core'; import {MdStepLabel} from './step-label'; import {MdStepperNext, MdStepperPrevious} from './stepper-button'; +import {MdIconModule} from '../icon/index'; +import {MdStepHeader} from './step-header'; @NgModule({ - imports: [MdCommonModule, CommonModule, PortalModule, MdButtonModule, CdkStepperModule], + imports: [ + MdCommonModule, + CommonModule, + PortalModule, + MdButtonModule, + CdkStepperModule, + MdIconModule + ], exports: [MdCommonModule, MdHorizontalStepper, MdVerticalStepper, MdStep, MdStepLabel, MdStepper, - MdStepperNext, MdStepperPrevious], + MdStepperNext, MdStepperPrevious, MdStepHeader], declarations: [MdHorizontalStepper, MdVerticalStepper, MdStep, MdStepLabel, MdStepper, - MdStepperNext, MdStepperPrevious], + MdStepperNext, MdStepperPrevious, MdStepHeader], }) export class MdStepperModule {} @@ -32,3 +41,4 @@ export * from './stepper-vertical'; export * from './step-label'; export * from './stepper'; export * from './stepper-button'; +export * from './step-header'; diff --git a/src/lib/stepper/step-header.html b/src/lib/stepper/step-header.html new file mode 100644 index 000000000000..3f2310862f6f --- /dev/null +++ b/src/lib/stepper/step-header.html @@ -0,0 +1,17 @@ +
+ {{index + 1}} + create + done +
+
+ + + + +
{{label}}
+ +
Optional
+
+ diff --git a/src/lib/stepper/step-header.scss b/src/lib/stepper/step-header.scss new file mode 100644 index 000000000000..94496b4adcfc --- /dev/null +++ b/src/lib/stepper/step-header.scss @@ -0,0 +1,46 @@ +$mat-stepper-label-header-height: 24px !default; +$mat-stepper-label-min-width: 50px !default; +$mat-stepper-side-gap: 24px !default; +$mat-vertical-stepper-content-margin: 36px !default; +$mat-stepper-line-gap: 8px !default; +$mat-step-optional-font-size: 12px; +$mat-step-header-icon-size: 16px !default; + +:host { + display: flex; +} + +.mat-step-optional { + font-size: $mat-step-optional-font-size; +} + +.mat-step-icon, +.mat-step-icon-not-touched { + border-radius: 50%; + height: $mat-stepper-label-header-height; + width: $mat-stepper-label-header-height; + align-items: center; + justify-content: center; + display: flex; +} + +.mat-step-icon .mat-icon { + font-size: $mat-step-header-icon-size; + height: $mat-step-header-icon-size; + width: $mat-step-header-icon-size; +} + +.mat-step-label-active, +.mat-step-label-inactive { + display: inline-block; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + min-width: $mat-stepper-label-min-width; + vertical-align: middle; +} + +.mat-step-text-label { + text-overflow: ellipsis; + overflow: hidden; +} diff --git a/src/lib/stepper/step-header.ts b/src/lib/stepper/step-header.ts new file mode 100644 index 000000000000..14901227f698 --- /dev/null +++ b/src/lib/stepper/step-header.ts @@ -0,0 +1,73 @@ +/** + * @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, Input, ViewEncapsulation} from '@angular/core'; +import {coerceBooleanProperty, coerceNumberProperty} from '@angular/cdk/coercion'; +import {MdStepLabel} from './step-label'; + +@Component({ + selector: 'md-step-header, mat-step-header', + templateUrl: 'step-header.html', + styleUrls: ['step-header.css'], + host: { + 'class': 'mat-step-header', + 'role': 'tab', + }, + encapsulation: ViewEncapsulation.None +}) +export class MdStepHeader { + /** Icon for the given step. */ + @Input() + icon: string; + + /** Label of the given step. */ + @Input() + label: MdStepLabel | string; + + /** Index of the given step. */ + @Input() + get index() { return this._index; } + set index(value: any) { + this._index = coerceNumberProperty(value); + } + private _index: number; + + /** Whether the given step is selected. */ + @Input() + get selected() { return this._selected; } + set selected(value: any) { + this._selected = coerceBooleanProperty(value); + } + private _selected: boolean; + + /** Whether the given step label is active. */ + @Input() + get active() { return this._active; } + set active(value: any) { + this._active = coerceBooleanProperty(value); + } + private _active: boolean; + + /** Whether the given step is optional. */ + @Input() + get optional() { return this._optional; } + set optional(value: any) { + this._optional = coerceBooleanProperty(value); + } + private _optional: boolean; + + /** Returns string label of given step if it is a text label. */ + get _stringLabel(): string | null { + return this.label instanceof MdStepLabel ? null : this.label; + } + + /** Returns MdStepLabel if the label of given step is a template label. */ + get _templateLabel(): MdStepLabel | null { + return this.label instanceof MdStepLabel ? this.label : null; + } +} diff --git a/src/lib/stepper/stepper-horizontal.html b/src/lib/stepper/stepper-horizontal.html index 6472a981ff9b..5e2d2ea80fa7 100644 --- a/src/lib/stepper/stepper-horizontal.html +++ b/src/lib/stepper/stepper-horizontal.html @@ -1,29 +1,23 @@
- - + +
+
-
current', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')) ]) ], - providers: [{provide: MdStepper, useExisting: MdVerticalStepper}] + providers: [{provide: MdStepper, useExisting: MdVerticalStepper}], + encapsulation: ViewEncapsulation.None }) export class MdVerticalStepper extends MdStepper { } diff --git a/src/lib/stepper/stepper.scss b/src/lib/stepper/stepper.scss index c91bf3dc4c88..8f443c1f5d63 100644 --- a/src/lib/stepper/stepper.scss +++ b/src/lib/stepper/stepper.scss @@ -2,7 +2,6 @@ $mat-horizontal-stepper-header-height: 72px !default; $mat-stepper-label-header-height: 24px !default; -$mat-stepper-label-min-width: 50px !default; $mat-stepper-side-gap: 24px !default; $mat-vertical-stepper-content-margin: 36px !default; $mat-stepper-line-width: 1px !default; @@ -12,21 +11,9 @@ $mat-stepper-line-gap: 8px !default; display: block; } -.mat-stepper-label { - display: inline-flex; - white-space: nowrap; +.mat-step-header { overflow: hidden; - // TODO(jwshin): text-overflow does not work as expected. - text-overflow: ellipsis; - min-width: $mat-stepper-label-min-width; -} - -.mat-stepper-index { - border-radius: 50%; - height: $mat-stepper-label-header-height; - width: $mat-stepper-label-header-height; - text-align: center; - line-height: $mat-stepper-label-header-height; + outline: none; } .mat-horizontal-stepper-header-container { @@ -35,17 +22,25 @@ $mat-stepper-line-gap: 8px !default; align-items: center; } +.mat-stepper-horizontal-line { + border-top-width: $mat-stepper-line-width; + border-top-style: solid; + flex: auto; + height: 0; + margin: 0 $mat-stepper-line-gap - $mat-stepper-side-gap; + min-width: $mat-stepper-line-gap + $mat-stepper-side-gap; +} + .mat-horizontal-stepper-header { - display: inline-flex; - line-height: $mat-horizontal-stepper-header-height; + display: flex; + height: $mat-horizontal-stepper-header-height; overflow: hidden; align-items: center; - outline: none; padding: 0 $mat-stepper-side-gap; - .mat-stepper-index { + .mat-step-icon, + .mat-step-icon-not-touched { margin-right: $mat-stepper-line-gap; - display: inline-block; flex: none; } } @@ -54,22 +49,14 @@ $mat-stepper-line-gap: 8px !default; display: flex; align-items: center; padding: $mat-stepper-side-gap; - outline: none; + max-height: $mat-stepper-label-header-height; - .mat-stepper-index { + .mat-step-icon, + .mat-step-icon-not-touched { margin-right: $mat-vertical-stepper-content-margin - $mat-stepper-side-gap; } } -.mat-stepper-horizontal-line { - border-top-width: $mat-stepper-line-width; - border-top-style: solid; - flex: auto; - height: 0; - margin: 0 $mat-stepper-line-gap - $mat-stepper-side-gap; - min-width: $mat-stepper-line-gap + $mat-stepper-side-gap; -} - .mat-horizontal-stepper-content { overflow: hidden; diff --git a/src/lib/stepper/stepper.spec.ts b/src/lib/stepper/stepper.spec.ts index 7e266674638a..ca3025b606fb 100644 --- a/src/lib/stepper/stepper.spec.ts +++ b/src/lib/stepper/stepper.spec.ts @@ -11,6 +11,8 @@ import {dispatchKeyboardEvent} from '@angular/cdk/testing'; import {ENTER, LEFT_ARROW, RIGHT_ARROW, SPACE} from '@angular/cdk/keycodes'; import {MdStepper} from './stepper'; +const EMAIL_REGEX = /^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/; + describe('MdHorizontalStepper', () => { beforeEach(async(() => { TestBed.configureTestingModule({ @@ -42,7 +44,7 @@ describe('MdHorizontalStepper', () => { it('should change selected index on header click', () => { let stepHeaders = fixture.debugElement.queryAll(By.css('.mat-horizontal-stepper-header')); - checkSelectionChangeOnHeaderClick(stepperComponent, fixture, stepHeaders); + assertSelectionChangeOnHeaderClick(stepperComponent, fixture, stepHeaders); }); it('should set the "tablist" role on stepper', () => { @@ -52,34 +54,44 @@ describe('MdHorizontalStepper', () => { it('should set aria-expanded of content correctly', () => { let stepContents = fixture.debugElement.queryAll(By.css(`.mat-horizontal-stepper-content`)); - checkExpandedContent(stepperComponent, fixture, stepContents); + assertCorrectAriaExpandedAttribute(stepperComponent, fixture, stepContents); }); it('should display the correct label', () => { - checkCorrectLabel(stepperComponent, fixture); + assertCorrectStepLabel(stepperComponent, fixture); }); it('should go to next available step when the next button is clicked', () => { - checkNextStepperButton(stepperComponent, fixture); + assertNextStepperButtonClick(stepperComponent, fixture); }); it('should go to previous available step when the previous button is clicked', () => { - checkPreviousStepperButton(stepperComponent, fixture); + assertPreviousStepperButtonClick(stepperComponent, fixture); }); it('should set the correct step position for animation', () => { - checkStepPosition(stepperComponent, fixture); + assertCorrectStepPosition(stepperComponent, fixture); }); it('should support keyboard events to move and select focus', () => { let stepHeaders = fixture.debugElement.queryAll(By.css('.mat-horizontal-stepper-header')); - checkKeyboardEvent(stepperComponent, fixture, stepHeaders); + assertCorrectKeyboardInteraction(stepperComponent, fixture, stepHeaders); }); it('should not set focus on header of selected step if header is not clicked', () => { - let stepHeaderEl = fixture.debugElement - .queryAll(By.css('.mat-horizontal-stepper-header'))[1].nativeElement; - checkStepHeaderFocusNotCalled(stepHeaderEl, stepperComponent, fixture); + assertStepHeaderFocusNotCalled(stepperComponent, fixture); + }); + + it('should only be able to return to a previous step if it is editable', () => { + assertEditableStepChange(stepperComponent, fixture); + }); + + it('should set create icon if step is editable and completed', () => { + assertCorrectStepIcon(stepperComponent, fixture, true, 'edit'); + }); + + it('should set done icon if step is not editable and is completed', () => { + assertCorrectStepIcon(stepperComponent, fixture, false, 'done'); }); }); @@ -109,13 +121,15 @@ describe('MdHorizontalStepper', () => { let stepHeaderEl = fixture.debugElement .queryAll(By.css('.mat-horizontal-stepper-header'))[1].nativeElement; - checkLinearStepperValidity(stepHeaderEl, stepperComponent, testComponent, fixture); + assertLinearStepperValidity(stepHeaderEl, stepperComponent, testComponent, fixture); }); it('should not focus step header upon click if it is not able to be selected', () => { - let stepHeaderEl = fixture.debugElement - .queryAll(By.css('.mat-horizontal-stepper-header'))[1].nativeElement; - checkStepHeaderBlur(stepHeaderEl, fixture); + assertStepHeaderBlurred(fixture); + }); + + it('should be able to move to next step even when invalid if current step is optional', () => { + assertOptionalStepValidity(stepperComponent, testComponent, fixture); }); }); }); @@ -151,7 +165,7 @@ describe('MdVerticalStepper', () => { it('should change selected index on header click', () => { let stepHeaders = fixture.debugElement.queryAll(By.css('.mat-vertical-stepper-header')); - checkSelectionChangeOnHeaderClick(stepperComponent, fixture, stepHeaders); + assertSelectionChangeOnHeaderClick(stepperComponent, fixture, stepHeaders); }); @@ -162,34 +176,44 @@ describe('MdVerticalStepper', () => { it('should set aria-expanded of content correctly', () => { let stepContents = fixture.debugElement.queryAll(By.css(`.mat-vertical-stepper-content`)); - checkExpandedContent(stepperComponent, fixture, stepContents); + assertCorrectAriaExpandedAttribute(stepperComponent, fixture, stepContents); }); it('should display the correct label', () => { - checkCorrectLabel(stepperComponent, fixture); + assertCorrectStepLabel(stepperComponent, fixture); }); it('should go to next available step when the next button is clicked', () => { - checkNextStepperButton(stepperComponent, fixture); + assertNextStepperButtonClick(stepperComponent, fixture); }); it('should go to previous available step when the previous button is clicked', () => { - checkPreviousStepperButton(stepperComponent, fixture); + assertPreviousStepperButtonClick(stepperComponent, fixture); }); it('should set the correct step position for animation', () => { - checkStepPosition(stepperComponent, fixture); + assertCorrectStepPosition(stepperComponent, fixture); }); it('should support keyboard events to move and select focus', () => { let stepHeaders = fixture.debugElement.queryAll(By.css('.mat-vertical-stepper-header')); - checkKeyboardEvent(stepperComponent, fixture, stepHeaders); + assertCorrectKeyboardInteraction(stepperComponent, fixture, stepHeaders); }); it('should not set focus on header of selected step if header is not clicked', () => { - let stepHeaderEl = fixture.debugElement - .queryAll(By.css('.mat-vertical-stepper-header'))[1].nativeElement; - checkStepHeaderFocusNotCalled(stepHeaderEl, stepperComponent, fixture); + assertStepHeaderFocusNotCalled(stepperComponent, fixture); + }); + + it('should only be able to return to a previous step if it is editable', () => { + assertEditableStepChange(stepperComponent, fixture); + }); + + it('should set create icon if step is editable and completed', () => { + assertCorrectStepIcon(stepperComponent, fixture, true, 'edit'); + }); + + it('should set done icon if step is not editable and is completed', () => { + assertCorrectStepIcon(stepperComponent, fixture, false, 'done'); }); }); @@ -220,18 +244,21 @@ describe('MdVerticalStepper', () => { let stepHeaderEl = fixture.debugElement .queryAll(By.css('.mat-vertical-stepper-header'))[1].nativeElement; - checkLinearStepperValidity(stepHeaderEl, stepperComponent, testComponent, fixture); + assertLinearStepperValidity(stepHeaderEl, stepperComponent, testComponent, fixture); }); it('should not focus step header upon click if it is not able to be selected', () => { - let stepHeaderEl = fixture.debugElement - .queryAll(By.css('.mat-vertical-stepper-header'))[1].nativeElement; - checkStepHeaderBlur(stepHeaderEl, fixture); + assertStepHeaderBlurred(fixture); + }); + + it('should be able to move to next step even when invalid if current step is optional', () => { + assertOptionalStepValidity(stepperComponent, testComponent, fixture); }); }); }); -function checkSelectionChangeOnHeaderClick(stepperComponent: MdStepper, +/** Asserts that `selectedIndex` updates correctly when header of another step is clicked. */ +function assertSelectionChangeOnHeaderClick(stepperComponent: MdStepper, fixture: ComponentFixture, stepHeaders: DebugElement[]) { expect(stepperComponent.selectedIndex).toBe(0); @@ -251,7 +278,8 @@ function checkSelectionChangeOnHeaderClick(stepperComponent: MdStepper, expect(stepperComponent.selectedIndex).toBe(2); } -function checkExpandedContent(stepperComponent: MdStepper, +/** Asserts that 'aria-expanded' attribute is correct for expanded content of step. */ +function assertCorrectAriaExpandedAttribute(stepperComponent: MdStepper, fixture: ComponentFixture, stepContents: DebugElement[]) { let firstStepContentEl = stepContents[0].nativeElement; @@ -265,7 +293,8 @@ function checkExpandedContent(stepperComponent: MdStepper, expect(secondStepContentEl.getAttribute('aria-expanded')).toBe('true'); } -function checkCorrectLabel(stepperComponent: MdStepper, fixture: ComponentFixture) { +/** Asserts that step has correct label. */ +function assertCorrectStepLabel(stepperComponent: MdStepper, fixture: ComponentFixture) { let selectedLabel = fixture.nativeElement.querySelector('[aria-selected="true"]'); expect(selectedLabel.textContent).toMatch('Step 1'); @@ -282,7 +311,8 @@ function checkCorrectLabel(stepperComponent: MdStepper, fixture: ComponentFixtur expect(selectedLabel.textContent).toMatch('New Label'); } -function checkNextStepperButton(stepperComponent: MdStepper, fixture: ComponentFixture) { +/** Asserts that clicking on MdStepperNext button updates `selectedIndex` correctly. */ +function assertNextStepperButtonClick(stepperComponent: MdStepper, fixture: ComponentFixture) { expect(stepperComponent.selectedIndex).toBe(0); let nextButtonNativeEl = fixture.debugElement @@ -307,7 +337,9 @@ function checkNextStepperButton(stepperComponent: MdStepper, fixture: ComponentF expect(stepperComponent.selectedIndex).toBe(2); } -function checkPreviousStepperButton(stepperComponent: MdStepper, fixture: ComponentFixture) { +/** Asserts that clicking on MdStepperPrevious button updates `selectedIndex` correctly. */ +function assertPreviousStepperButtonClick(stepperComponent: MdStepper, + fixture: ComponentFixture) { expect(stepperComponent.selectedIndex).toBe(0); stepperComponent.selectedIndex = 2; @@ -333,7 +365,8 @@ function checkPreviousStepperButton(stepperComponent: MdStepper, fixture: Compon expect(stepperComponent.selectedIndex).toBe(0); } -function checkStepPosition(stepperComponent: MdStepper, fixture: ComponentFixture) { +/** Asserts that step position is correct for animation. */ +function assertCorrectStepPosition(stepperComponent: MdStepper, fixture: ComponentFixture) { expect(stepperComponent._getAnimationDirection(0)).toBe('current'); expect(stepperComponent._getAnimationDirection(1)).toBe('next'); expect(stepperComponent._getAnimationDirection(2)).toBe('next'); @@ -353,7 +386,8 @@ function checkStepPosition(stepperComponent: MdStepper, fixture: ComponentFixtur expect(stepperComponent._getAnimationDirection(2)).toBe('current'); } -function checkKeyboardEvent(stepperComponent: MdStepper, +/** Asserts that keyboard interaction works correctly. */ +function assertCorrectKeyboardInteraction(stepperComponent: MdStepper, fixture: ComponentFixture, stepHeaders: DebugElement[]) { expect(stepperComponent._focusIndex).toBe(0); @@ -411,9 +445,11 @@ function checkKeyboardEvent(stepperComponent: MdStepper, 'Expected index of selected step to change to index of focused step after SPACE event.'); } -function checkStepHeaderFocusNotCalled(stepHeaderEl: HTMLElement, - stepperComponent: MdStepper, - fixture: ComponentFixture) { +/** Asserts that step selection change using stepper buttons does not focus step header. */ +function assertStepHeaderFocusNotCalled(stepperComponent: MdStepper, + fixture: ComponentFixture) { + let stepHeaderEl = fixture.debugElement + .queryAll(By.css('md-step-header'))[1].nativeElement; let nextButtonNativeEl = fixture.debugElement .queryAll(By.directive(MdStepperNext))[0].nativeElement; spyOn(stepHeaderEl, 'focus'); @@ -424,7 +460,10 @@ function checkStepHeaderFocusNotCalled(stepHeaderEl: HTMLElement, expect(stepHeaderEl.focus).not.toHaveBeenCalled(); } -function checkLinearStepperValidity(stepHeaderEl: HTMLElement, +/** + * Asserts that linear stepper does not allow step selection change if current step is not valid. + */ +function assertLinearStepperValidity(stepHeaderEl: HTMLElement, stepperComponent: MdStepper, testComponent: LinearMdHorizontalStepperApp | LinearMdVerticalStepperApp, @@ -449,7 +488,10 @@ function checkLinearStepperValidity(stepHeaderEl: HTMLElement, expect(stepperComponent.selectedIndex).toBe(1); } -function checkStepHeaderBlur(stepHeaderEl: HTMLElement, fixture: ComponentFixture) { +/** Asserts that step header focus is blurred if the step cannot be selected upon header click. */ +function assertStepHeaderBlurred(fixture: ComponentFixture) { + let stepHeaderEl = fixture.debugElement + .queryAll(By.css('md-step-header'))[1].nativeElement; spyOn(stepHeaderEl, 'blur'); stepHeaderEl.click(); fixture.detectChanges(); @@ -457,6 +499,81 @@ function checkStepHeaderBlur(stepHeaderEl: HTMLElement, fixture: ComponentFixtur expect(stepHeaderEl.blur).toHaveBeenCalled(); } +/** Asserts that it is only possible to go back to a previous step if the step is editable. */ +function assertEditableStepChange(stepperComponent: MdStepper, + fixture: ComponentFixture) { + stepperComponent.selectedIndex = 1; + stepperComponent._steps.toArray()[0].editable = false; + let previousButtonNativeEl = fixture.debugElement + .queryAll(By.directive(MdStepperPrevious))[1].nativeElement; + previousButtonNativeEl.click(); + fixture.detectChanges(); + + expect(stepperComponent.selectedIndex).toBe(1); + + stepperComponent._steps.toArray()[0].editable = true; + previousButtonNativeEl.click(); + fixture.detectChanges(); + + expect(stepperComponent.selectedIndex).toBe(0); +} + +/** + * Asserts that it is possible to skip an optional step in linear stepper if there is no input + * or the input is valid. + */ +function assertOptionalStepValidity(stepperComponent: MdStepper, + testComponent: LinearMdHorizontalStepperApp | LinearMdVerticalStepperApp, + fixture: ComponentFixture) { + testComponent.oneGroup.get('oneCtrl')!.setValue('input'); + testComponent.twoGroup.get('twoCtrl')!.setValue('input'); + stepperComponent.selectedIndex = 2; + fixture.detectChanges(); + + expect(stepperComponent.selectedIndex).toBe(2); + expect(testComponent.threeGroup.get('threeCtrl')!.valid).toBe(true); + + let nextButtonNativeEl = fixture.debugElement + .queryAll(By.directive(MdStepperNext))[2].nativeElement; + nextButtonNativeEl.click(); + fixture.detectChanges(); + + expect(stepperComponent.selectedIndex) + .toBe(3, 'Expected selectedIndex to change when optional step input is empty.'); + + stepperComponent.selectedIndex = 2; + testComponent.threeGroup.get('threeCtrl')!.setValue('input'); + nextButtonNativeEl.click(); + fixture.detectChanges(); + + expect(testComponent.threeGroup.get('threeCtrl')!.valid).toBe(false); + expect(stepperComponent.selectedIndex) + .toBe(2, 'Expected selectedIndex to remain unchanged when optional step input is invalid.'); + + testComponent.threeGroup.get('threeCtrl')!.setValue('123@gmail.com'); + nextButtonNativeEl.click(); + fixture.detectChanges(); + + expect(testComponent.threeGroup.get('threeCtrl')!.valid).toBe(true); + expect(stepperComponent.selectedIndex) + .toBe(3, 'Expected selectedIndex to change when optional step input is valid.'); +} + +/** Asserts that step header set the correct icon depending on the state of step. */ +function assertCorrectStepIcon(stepperComponent: MdStepper, + fixture: ComponentFixture, + isEditable: boolean, + icon: String) { + let nextButtonNativeEl = fixture.debugElement + .queryAll(By.directive(MdStepperNext))[0].nativeElement; + expect(stepperComponent._getIndicatorType(0)).toBe('number'); + stepperComponent._steps.toArray()[0].editable = isEditable; + nextButtonNativeEl.click(); + fixture.detectChanges(); + + expect(stepperComponent._getIndicatorType(0)).toBe(icon); +} + @Component({ template: ` @@ -517,12 +634,28 @@ class SimpleMdHorizontalStepperApp {
+ +
+ Step two + + + +
+ + +
+
+ + + Done + ` }) class LinearMdHorizontalStepperApp { oneGroup: FormGroup; twoGroup: FormGroup; + threeGroup: FormGroup; ngOnInit() { this.oneGroup = new FormGroup({ @@ -531,6 +664,9 @@ class LinearMdHorizontalStepperApp { this.twoGroup = new FormGroup({ twoCtrl: new FormControl('', Validators.required) }); + this.threeGroup = new FormGroup({ + threeCtrl: new FormControl('', Validators.pattern(EMAIL_REGEX)) + }); } } @@ -594,12 +730,28 @@ class SimpleMdVerticalStepperApp {
+ +
+ Step two + + + +
+ + +
+
+ + + Done + ` }) class LinearMdVerticalStepperApp { oneGroup: FormGroup; twoGroup: FormGroup; + threeGroup: FormGroup; ngOnInit() { this.oneGroup = new FormGroup({ @@ -608,5 +760,8 @@ class LinearMdVerticalStepperApp { this.twoGroup = new FormGroup({ twoCtrl: new FormControl('', Validators.required) }); + this.threeGroup = new FormGroup({ + threeCtrl: new FormControl('', Validators.pattern(EMAIL_REGEX)) + }); } } diff --git a/src/lib/stepper/stepper.ts b/src/lib/stepper/stepper.ts index 5a0dd890fa89..9492a4a32a8d 100644 --- a/src/lib/stepper/stepper.ts +++ b/src/lib/stepper/stepper.ts @@ -19,8 +19,9 @@ import { Optional, QueryList, SkipSelf, - ViewChildren -}from '@angular/core'; + ViewChildren, + ViewEncapsulation +} from '@angular/core'; import {MdStepLabel} from './step-label'; import { defaultErrorStateMatcher, @@ -29,12 +30,14 @@ import { ErrorStateMatcher } from '../core/error/error-options'; import {FormControl, FormGroupDirective, NgForm} from '@angular/forms'; +import {MdStepHeader} from './step-header'; @Component({ moduleId: module.id, selector: 'md-step, mat-step', templateUrl: 'step.html', - providers: [{provide: MD_ERROR_GLOBAL_OPTIONS, useExisting: MdStep}] + providers: [{provide: MD_ERROR_GLOBAL_OPTIONS, useExisting: MdStep}], + encapsulation: ViewEncapsulation.None }) export class MdStep extends CdkStep implements ErrorOptions { /** Content for step label given by or . */ @@ -66,7 +69,7 @@ export class MdStep extends CdkStep implements ErrorOptions { export class MdStepper extends CdkStepper implements ErrorOptions { /** The list of step headers of the steps in the stepper. */ - @ViewChildren('stepHeader') _stepHeader: QueryList; + @ViewChildren(MdStepHeader, {read: ElementRef}) _stepHeader: QueryList; /** Steps that the stepper holds. */ @ContentChildren(MdStep) _steps: QueryList;