Skip to content

Commit aee0abf

Browse files
jwshinjwshinjwshinjwshin
committed
Updated vertical stepper + added comments
1 parent 34ac69e commit aee0abf

File tree

12 files changed

+79
-102
lines changed

12 files changed

+79
-102
lines changed

‎src/cdk/stepper/step.ts‎

Lines changed: 3 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -10,21 +10,17 @@ import {
1010
Component, ContentChild, Directive, Input, OnInit, TemplateRef, ViewChild,
1111
ViewContainerRef
1212
} from '@angular/core';
13-
import {CdkStepLabel} from "./step-label";
13+
import {CdkStepLabel} from './step-label';
1414

1515
@Component({
1616
selector: '[cdk-step]',
1717
templateUrl: 'step.html',
18-
host: {
19-
'(keydown)': '_onKeydown($event)'
20-
},
2118
})
2219
export class CdkStep {
23-
2420
@ContentChild(CdkStepLabel) stepLabel: CdkStepLabel;
2521
@ViewChild(TemplateRef) content: TemplateRef<any>;
26-
// @ViewChild(PortalHostDirective) _portalHost: PortalHostDirective;
2722

23+
/** Label of the step. */
2824
@Input()
2925
label: string;
3026

@@ -34,6 +30,7 @@ export class CdkStep {
3430
/** Whether the step is editable or not. */
3531
@Input() editable: boolean = true;
3632

33+
/** Whether the step is the last one in the list. */
3734
isLast: boolean = false;
3835

3936
// /** Whether the step is active. */
@@ -56,15 +53,4 @@ export class CdkStep {
5653
this._completed = value;
5754
}
5855
private _completed: boolean = false;
59-
60-
61-
// /** The portal that will be the hosted content of the step */
62-
// private _contentPortal: TemplatePortal | null = null;
63-
// get content(): TemplatePortal | null { return this._contentPortal; }
64-
65-
// constructor(private _viewContainerRef: ViewContainerRef) {}
66-
//
67-
// ngOnInit() {
68-
// this._contentPortal = new TemplatePortal(this.stepContent, this._viewContainerRef);
69-
// }
7056
}

‎src/cdk/stepper/stepper.scss‎

Lines changed: 0 additions & 7 deletions
This file was deleted.

‎src/cdk/stepper/stepper.ts‎

Lines changed: 18 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,10 @@ import {Observable} from 'rxjs/Observable';
1515
import {map} from 'rxjs/operator/map';
1616
import {LEFT_ARROW, RIGHT_ARROW, ENTER, TAB} from '../keyboard/keycodes';
1717

18+
/** Used to generate unique ID for each stepper component. */
1819
let nextId = 0;
1920

21+
/** Change event emitted on focus or selection changes. */
2022
export class CdkStepEvent {
2123
index: number;
2224
step: CdkStep;
@@ -25,27 +27,18 @@ export class CdkStepEvent {
2527
@Directive({
2628
selector: '[cdkStepper]',
2729
host: {
28-
//'(focus)': '_onFocus()',
2930
'(keydown)': '_onKeydown($event)'
3031
},
3132
})
3233
export class CdkStepper {
33-
34-
get focusIndex(): number {return this._focusIndex; }
35-
private _focusIndex: number = 0;
36-
3734
@ContentChildren(CdkStep) _steps: QueryList<CdkStep>;
3835

3936
@ViewChildren('stepHeader') _stepHeader: QueryList<ElementRef>;
4037

41-
@ViewChildren('stepButton') _stepButton: QueryList<ElementRef>;
42-
4338
/** The index of the currently selected step. */
4439
@Input()
4540
set selectedIndex(value: number) {
4641
this._selectedIndex = value;
47-
//this.selectedStep = this._steps.toArray()[this._selectedIndex];
48-
//this.stepEvent.emit(this._emitstepEvent());
4942
}
5043
get selectedIndex(): number { return this._selectedIndex; }
5144
private _selectedIndex: number;
@@ -65,45 +58,35 @@ export class CdkStepper {
6558
/** Event emitted when the selected step has changed. */
6659
@Output() stepEvent = new EventEmitter<CdkStepEvent>();
6760

61+
/** Event emitted when the focused step has changed. */
6862
@Output() focusChange = new EventEmitter<CdkStepEvent>();
6963

64+
/** The step that is currently selected. */
7065
get selectedStep(): CdkStep {
7166
return this._steps.toArray()[this._selectedIndex];
7267
}
7368
private _selectedStep: CdkStep;
7469

70+
/** The index of the step that the focus is currently on. */
71+
get focusIndex(): number {return this._focusIndex; }
72+
private _focusIndex: number = 0;
73+
7574
private _groupId: number;
7675

7776
constructor() {
7877
this._groupId = nextId++;
7978
}
80-
// _keyManager: FocusKeyManager;
81-
82-
//selectedIndex: number = 0;
83-
84-
// ngAfterContentChecked() {
85-
// this._steps.toArray()[this._selectedIndex].selected = true;
86-
// }
87-
88-
// constructor(private _element: ElementRef) { }
89-
//
90-
// ngAfterContentInit(): void {
91-
// this._keyManager = new FocusKeyManager(this._steps).withWrap();
92-
// }
9379

80+
/** Selects and focuses the provided step. */
9481
selectStep(step: CdkStep): void {
95-
//if (!step.active) { return; }
96-
this._selectedIndex = this.indexOf(step);
82+
let stepsArray = this._steps.toArray();
83+
this._selectedIndex = stepsArray.indexOf(step);
9784
this.stepEvent.emit(this._emitStepEvent(this._selectedIndex));
9885
this._focusIndex = this._selectedIndex;
9986
this._setStepFocus();
10087
}
10188

102-
indexOf(step: CdkStep): number {
103-
let stepsArray = this._steps.toArray();
104-
return stepsArray.indexOf(step);
105-
}
106-
89+
/** Selects and focuses the next step in list. */
10790
nextStep(): void {
10891
if (this._selectedIndex == this._steps.length - 1) { return; }
10992
this._selectedIndex++;
@@ -112,6 +95,7 @@ export class CdkStepper {
11295
this._setStepFocus();
11396
}
11497

98+
/** Selects and focuses the previous step in list. */
11599
previousStep(): void {
116100
if (this._selectedIndex == 0) { return; }
117101
this._selectedIndex--;
@@ -120,10 +104,12 @@ export class CdkStepper {
120104
this._setStepFocus();
121105
}
122106

107+
/** Returns a unique id for each step label element. */
123108
_getStepLabelId(i: number): string {
124109
return `mat-step-label-${this._groupId}-${i}`;
125110
}
126111

112+
/** Returns a unique id for each step content element. */
127113
_getStepContentId(i: number): string {
128114
return `mat-step-content-${this._groupId}-${i}`;
129115
}
@@ -133,12 +119,9 @@ export class CdkStepper {
133119
event.index = index;
134120
event.step = this._steps.toArray()[this._selectedIndex];
135121
this._selectedStep = event.step;
136-
//this._focusIndex = this._selectedIndex;
137-
//this._setStepFocus();
138122
return event;
139123
}
140124

141-
142125
_onKeydown(event: KeyboardEvent) {
143126
switch (event.keyCode) {
144127
case RIGHT_ARROW:
@@ -158,16 +141,13 @@ export class CdkStepper {
158141
this._emitStepEvent(this._selectedIndex);
159142
break;
160143
}
161-
if (event.keyCode != TAB) event.preventDefault();
144+
if (event.keyCode != TAB) {
145+
event.preventDefault();
146+
}
162147
}
163148

164149
_setStepFocus() {
165150
this._stepHeader.toArray()[this._focusIndex].nativeElement.focus();
166151
this.focusChange.emit(this._emitStepEvent(this._selectedIndex));
167152
}
168-
169-
// _onFocus() {
170-
// //this._keyManager.setFirstItemActive();
171-
// this._element.nativeElement.focus();
172-
// }
173153
}

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
<h2>Horizontal Stepper Demo</h2>
22
<mat-horizontal-stepper [(selectedIndex)]="horizontalActiveIndex">
33
<mat-step *ngFor="let step of steps" [label]="step.label">
4-
<div>{{step.content}}</div>
4+
<md-input-container>
5+
<input mdInput placeholder="Answer" [(ngModel)]="step.content">
6+
</md-input-container>
57
</mat-step>
68
</mat-horizontal-stepper>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import {Component} from '@angular/core';
44
moduleId: module.id,
55
selector: 'stepper-demo',
66
templateUrl: 'stepper-demo.html',
7-
//styleUrls: ['stepper-demo.scss'],
7+
styleUrls: ['stepper-demo.scss'],
88
})
99
export class StepperDemo {
1010
verticalActiveIndex = 0;

‎src/lib/stepper/step.html‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1 @@
1-
<!--<ng-template><ng-template cdkPortalHost></ng-template></ng-template>-->
21
<ng-template><ng-content></ng-content></ng-template>

‎src/lib/stepper/step.ts‎

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,18 @@
1-
import {Component, ContentChild, TemplateRef, ViewChild} from "@angular/core";
2-
import {CdkStep} from "@angular/cdk";
3-
import {MdStepLabel} from "./step-label";
1+
/**
2+
* @license
3+
* Copyright Google Inc. All Rights Reserved.
4+
*
5+
* Use of this source code is governed by an MIT-style license that can be
6+
* found in the LICENSE file at https://angular.io/license
7+
*/
8+
9+
import {Component, ContentChild, TemplateRef, ViewChild} from '@angular/core';
10+
import {CdkStep} from '@angular/cdk';
11+
import {MdStepLabel} from './step-label';
412
@Component({
513
moduleId: module.id,
6-
selector: 'mat-step',
14+
selector: 'md-step, mat-step',
715
templateUrl: 'step.html',
8-
//viewProviders: [CdkStep],
916
inputs: ['label'],
1017
})
1118
export class MdStep extends CdkStep {
@@ -14,4 +21,4 @@ export class MdStep extends CdkStep {
1421

1522
/** Template inside the MdStep view that contains an <ng-content>. */
1623
@ViewChild(TemplateRef) content: TemplateRef<any>;
17-
}
24+
}

‎src/lib/stepper/stepper-horizontal.html‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,11 @@
1111
<div *ngIf="!step.active" class="inactive-step">{{i + 1}}</div>
1212

1313
<div class="mat-step-label">
14+
<!-- If there is a label template, use it. -->
1415
<ng-template [ngIf]="step.stepLabel">
1516
<ng-template [cdkPortalHost]="step.stepLabel"></ng-template>
1617
</ng-template>
18+
<!-- It there is no label template, fall back to the text label. -->
1719
<ng-template [ngIf]="!step.stepLabel">
1820
<div>{{step.label}}</div>
1921
</ng-template>
@@ -27,12 +29,10 @@
2729
class="mat-stepper-horizontal" role="tabpanel"
2830
[id]="_getStepContentId(i)"
2931
[attr.aria-labelledby]="_getStepLabelId(i)"
30-
[attr.aria-selected]="selectedIndex == i"
31-
[tabIndex]="0">
32+
[attr.aria-expanded]="selectedIndex == i">
3233
<ng-container [ngTemplateOutlet]="step.content"></ng-container>
3334
</div>
34-
<div #stepButton>
35-
<button md-button (click)="previousStep()">Back</button>
36-
<button md-button (click)="nextStep()">Next</button>
37-
<button md-button>Cancel</button>
38-
</div>
35+
<div>
36+
<button md-button (click)="previousStep()">Back</button>
37+
<button md-button (click)="nextStep()">Next</button>
38+
</div>

‎src/lib/stepper/stepper-horizontal.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,11 @@
77
*/
88

99
import {Component, ContentChildren, QueryList} from '@angular/core';
10-
import {MdStep} from "./step";
11-
import {CdkStepper} from "@angular/cdk";
10+
import {MdStep} from './step';
11+
import {CdkStepper} from '@angular/cdk';
1212
@Component({
1313
moduleId: module.id,
14-
selector: 'mat-horizontal-stepper',
14+
selector: 'md-horizontal-stepper, mat-horizontal-stepper',
1515
templateUrl: 'stepper-horizontal.html',
1616
styleUrls: ['stepper.scss'],
1717
inputs: ['selectedIndex'],

‎src/lib/stepper/stepper-vertical.html‎

Lines changed: 27 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,38 @@
11
<div class="mat-stepper-container">
22
<div *ngFor="let step of _steps; let i = index" class="mat-step" role="tablist">
3-
<div class="mat-step-header" role="tab"
3+
<div #stepHeader class="mat-step-header" role="tab"
4+
[id]="_getStepLabelId(i)"
5+
[attr.aria-controls]="_getStepContentId(i)"
46
[attr.aria-selected]="selectedIndex == i"
5-
[tabIndex]="selectedIndex == i ? 0 : -1"
6-
(click)="selectStep(step)">
7-
<div *ngIf="step.active" class="activeStep">{{indexOf(step) + 1}}</div>
8-
<div *ngIf="!step.active" class="inactiveStep">{{indexOf(step) + 1}}</div>
7+
[tabIndex]="focusIndex == i ? 0 : -1"
8+
(click)="selectStep(step)"
9+
(keydown)="_onKeydown($event)">
10+
<div *ngIf="step.active" class="activeStep">{{i + 1}}</div>
11+
<div *ngIf="!step.active" class="inactiveStep">{{i + 1}}</div>
912

10-
<ng-template [ngIf]="step.stepLabel">
11-
<ng-template [cdkPortalHost]="step.stepLabel"></ng-template>
12-
</ng-template>
13-
<ng-template [ngIf]="!step.stepLabel">
14-
<div class="mat-step-label">{{step.label}}</div>
15-
</ng-template>
13+
<div class="mat-step-label">
14+
<!-- If there is a label template, use it. -->
15+
<ng-template [ngIf]="step.stepLabel">
16+
<ng-template [cdkPortalHost]="step.stepLabel"></ng-template>
17+
</ng-template>
18+
<!-- It there is no label template, fall back to the text label. -->
19+
<ng-template [ngIf]="!step.stepLabel">
20+
<div>{{step.label}}</div>
21+
</ng-template>
22+
</div>
1623

1724
</div>
1825
<div *ngIf="!step.isLast" class="connector-line"></div>
19-
<div *ngIf="indexOf(step) == selectedIndex" role="tabpanel">
26+
<div *ngIf="i == selectedIndex" role="tabpanel"
27+
[id]="_getStepContentId(i)"
28+
[attr.aria-labelledby]="_getStepLabelId(i)"
29+
[attr.aria-expanded]="selectedIndex == i">
2030
<ng-container [ngTemplateOutlet]="step.content"></ng-container>
21-
<div>
22-
<button md-button (click)="previousStep()">Back</button>
23-
<button md-button (click)="nextStep()">Next</button>
24-
<button md-button>Cancel</button>
25-
</div>
31+
</div>
32+
<div>
33+
<button md-button (click)="previousStep()">Back</button>
34+
<button md-button (click)="nextStep()">Next</button>
35+
<button md-button>Cancel</button>
2636
</div>
2737
</div>
2838
</div>

0 commit comments

Comments
 (0)