|
| 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 { |
| 10 | + ContentChildren, |
| 11 | + EventEmitter, |
| 12 | + Input, |
| 13 | + Output, |
| 14 | + QueryList, |
| 15 | + Directive, |
| 16 | + // This import is only used to define a generic type. The current TypeScript version incorrectly |
| 17 | + // considers such imports as unused (https://github.com/Microsoft/TypeScript/issues/14953) |
| 18 | + // tslint:disable-next-line:no-unused-variable |
| 19 | + ElementRef, |
| 20 | + Component, |
| 21 | + ContentChild, |
| 22 | + ViewChild, |
| 23 | + TemplateRef, |
| 24 | + ViewEncapsulation, Optional |
| 25 | +} from '@angular/core'; |
| 26 | +import {LEFT_ARROW, RIGHT_ARROW, ENTER, SPACE} from '@angular/cdk/keycodes'; |
| 27 | +import {CdkStepLabel} from './step-label'; |
| 28 | +import {coerceBooleanProperty} from '@angular/cdk/coercion'; |
| 29 | +import {AbstractControl} from '@angular/forms'; |
| 30 | +import {Directionality} from '@angular/cdk/bidi'; |
| 31 | + |
| 32 | +/** Used to generate unique ID for each stepper component. */ |
| 33 | +let nextId = 0; |
| 34 | + |
| 35 | +/** |
| 36 | + * Position state of the content of each step in stepper that is used for transitioning |
| 37 | + * the content into correct position upon step selection change. |
| 38 | + */ |
| 39 | +export type StepContentPositionState = 'previous' | 'current' | 'next'; |
| 40 | + |
| 41 | +/** Change event emitted on selection changes. */ |
| 42 | +export class StepperSelectionEvent { |
| 43 | + /** Index of the step now selected. */ |
| 44 | + selectedIndex: number; |
| 45 | + |
| 46 | + /** Index of the step previously selected. */ |
| 47 | + previouslySelectedIndex: number; |
| 48 | + |
| 49 | + /** The step instance now selected. */ |
| 50 | + selectedStep: CdkStep; |
| 51 | + |
| 52 | + /** The step instance previously selected. */ |
| 53 | + previouslySelectedStep: CdkStep; |
| 54 | +} |
| 55 | + |
| 56 | +@Component({ |
| 57 | + selector: 'cdk-step', |
| 58 | + templateUrl: 'step.html', |
| 59 | + encapsulation: ViewEncapsulation.None |
| 60 | +}) |
| 61 | +export class CdkStep { |
| 62 | + /** Template for step label if it exists. */ |
| 63 | + @ContentChild(CdkStepLabel) stepLabel: CdkStepLabel; |
| 64 | + |
| 65 | + /** Template for step content. */ |
| 66 | + @ViewChild(TemplateRef) content: TemplateRef<any>; |
| 67 | + |
| 68 | + /** The top level abstract control of the step. */ |
| 69 | + @Input() |
| 70 | + get stepControl() { return this._stepControl; } |
| 71 | + set stepControl(control: AbstractControl) { |
| 72 | + this._stepControl = control; |
| 73 | + } |
| 74 | + private _stepControl: AbstractControl; |
| 75 | + |
| 76 | + /** Whether user has seen the expanded step content or not . */ |
| 77 | + interacted = false; |
| 78 | + |
| 79 | + /** Label of the step. */ |
| 80 | + @Input() |
| 81 | + label: string; |
| 82 | + |
| 83 | + @Input() |
| 84 | + get editable() { return this._editable; } |
| 85 | + set editable(value: any) { |
| 86 | + this._editable = coerceBooleanProperty(value); |
| 87 | + } |
| 88 | + private _editable = true; |
| 89 | + |
| 90 | + /** Whether the completion of step is optional or not. */ |
| 91 | + @Input() |
| 92 | + get optional() { return this._optional; } |
| 93 | + set optional(value: any) { |
| 94 | + this._optional = coerceBooleanProperty(value); |
| 95 | + } |
| 96 | + private _optional = false; |
| 97 | + |
| 98 | + /** Return whether step is completed or not. */ |
| 99 | + @Input() |
| 100 | + get completed() { |
| 101 | + return this._customCompleted == null ? this._defaultCompleted : this._customCompleted; |
| 102 | + } |
| 103 | + set completed(value: any) { |
| 104 | + this._customCompleted = coerceBooleanProperty(value); |
| 105 | + } |
| 106 | + private _customCompleted: boolean | null = null; |
| 107 | + |
| 108 | + private get _defaultCompleted() { |
| 109 | + return this._stepControl ? this._stepControl.valid && this.interacted : this.interacted; |
| 110 | + } |
| 111 | + |
| 112 | + constructor(private _stepper: CdkStepper) { } |
| 113 | + |
| 114 | + /** Selects this step component. */ |
| 115 | + select(): void { |
| 116 | + this._stepper.selected = this; |
| 117 | + } |
| 118 | +} |
| 119 | + |
| 120 | +@Directive({ |
| 121 | + selector: '[cdkStepper]', |
| 122 | +}) |
| 123 | +export class CdkStepper { |
| 124 | + /** The list of step components that the stepper is holding. */ |
| 125 | + @ContentChildren(CdkStep) _steps: QueryList<CdkStep>; |
| 126 | + |
| 127 | + /** The list of step headers of the steps in the stepper. */ |
| 128 | + _stepHeader: QueryList<ElementRef>; |
| 129 | + |
| 130 | + /** Whether the validity of previous steps should be checked or not. */ |
| 131 | + @Input() |
| 132 | + get linear() { return this._linear; } |
| 133 | + set linear(value: any) { this._linear = coerceBooleanProperty(value); } |
| 134 | + private _linear = false; |
| 135 | + |
| 136 | + /** The index of the selected step. */ |
| 137 | + @Input() |
| 138 | + get selectedIndex() { return this._selectedIndex; } |
| 139 | + set selectedIndex(index: number) { |
| 140 | + if (this._anyControlsInvalid(index) |
| 141 | + || index < this._selectedIndex && !this._steps.toArray()[index].editable) { |
| 142 | + // remove focus from clicked step header if the step is not able to be selected |
| 143 | + this._stepHeader.toArray()[index].nativeElement.blur(); |
| 144 | + } else if (this._selectedIndex != index) { |
| 145 | + this._emitStepperSelectionEvent(index); |
| 146 | + this._focusIndex = this._selectedIndex; |
| 147 | + } |
| 148 | + } |
| 149 | + private _selectedIndex: number = 0; |
| 150 | + |
| 151 | + /** The step that is selected. */ |
| 152 | + @Input() |
| 153 | + get selected() { return this._steps[this.selectedIndex]; } |
| 154 | + set selected(step: CdkStep) { |
| 155 | + let index = this._steps.toArray().indexOf(step); |
| 156 | + this.selectedIndex = index; |
| 157 | + } |
| 158 | + |
| 159 | + /** Event emitted when the selected step has changed. */ |
| 160 | + @Output() selectionChange = new EventEmitter<StepperSelectionEvent>(); |
| 161 | + |
| 162 | + /** The index of the step that the focus can be set. */ |
| 163 | + _focusIndex: number = 0; |
| 164 | + |
| 165 | + /** Used to track unique ID for each stepper component. */ |
| 166 | + _groupId: number; |
| 167 | + |
| 168 | + constructor(@Optional() private _dir: Directionality) { |
| 169 | + this._groupId = nextId++; |
| 170 | + } |
| 171 | + |
| 172 | + /** Selects and focuses the next step in list. */ |
| 173 | + next(): void { |
| 174 | + this.selectedIndex = Math.min(this._selectedIndex + 1, this._steps.length - 1); |
| 175 | + } |
| 176 | + |
| 177 | + /** Selects and focuses the previous step in list. */ |
| 178 | + previous(): void { |
| 179 | + this.selectedIndex = Math.max(this._selectedIndex - 1, 0); |
| 180 | + } |
| 181 | + |
| 182 | + /** Returns a unique id for each step label element. */ |
| 183 | + _getStepLabelId(i: number): string { |
| 184 | + return `mat-step-label-${this._groupId}-${i}`; |
| 185 | + } |
| 186 | + |
| 187 | + /** Returns unique id for each step content element. */ |
| 188 | + _getStepContentId(i: number): string { |
| 189 | + return `mat-step-content-${this._groupId}-${i}`; |
| 190 | + } |
| 191 | + |
| 192 | + /** Returns position state of the step with the given index. */ |
| 193 | + _getAnimationDirection(index: number): StepContentPositionState { |
| 194 | + const position = index - this._selectedIndex; |
| 195 | + if (position < 0) { |
| 196 | + return 'previous'; |
| 197 | + } else if (position > 0) { |
| 198 | + return 'next'; |
| 199 | + } else { |
| 200 | + return 'current'; |
| 201 | + } |
| 202 | + } |
| 203 | + |
| 204 | + /** Returns the type of icon to be displayed. */ |
| 205 | + _getIndicatorType(index: number): 'number' | 'edit' | 'done' { |
| 206 | + const step = this._steps.toArray()[index]; |
| 207 | + if (!step.completed || this._selectedIndex == index) { |
| 208 | + return 'number'; |
| 209 | + } else { |
| 210 | + return step.editable ? 'edit' : 'done'; |
| 211 | + } |
| 212 | + } |
| 213 | + |
| 214 | + private _emitStepperSelectionEvent(newIndex: number): void { |
| 215 | + const stepsArray = this._steps.toArray(); |
| 216 | + this.selectionChange.emit({ |
| 217 | + selectedIndex: newIndex, |
| 218 | + previouslySelectedIndex: this._selectedIndex, |
| 219 | + selectedStep: stepsArray[newIndex], |
| 220 | + previouslySelectedStep: stepsArray[this._selectedIndex], |
| 221 | + }); |
| 222 | + this._selectedIndex = newIndex; |
| 223 | + } |
| 224 | + |
| 225 | + _onKeydown(event: KeyboardEvent) { |
| 226 | + switch (event.keyCode) { |
| 227 | + case RIGHT_ARROW: |
| 228 | + if (this._dir && this._dir.value === 'rtl') { |
| 229 | + this._focusStep((this._focusIndex + this._steps.length - 1) % this._steps.length); |
| 230 | + } else { |
| 231 | + this._focusStep((this._focusIndex + 1) % this._steps.length); |
| 232 | + } |
| 233 | + break; |
| 234 | + case LEFT_ARROW: |
| 235 | + if (this._dir && this._dir.value === 'rtl') { |
| 236 | + this._focusStep((this._focusIndex + 1) % this._steps.length); |
| 237 | + } else { |
| 238 | + this._focusStep((this._focusIndex + this._steps.length - 1) % this._steps.length); |
| 239 | + } |
| 240 | + break; |
| 241 | + case SPACE: |
| 242 | + case ENTER: |
| 243 | + this.selectedIndex = this._focusIndex; |
| 244 | + break; |
| 245 | + default: |
| 246 | + // Return to avoid calling preventDefault on keys that are not explicitly handled. |
| 247 | + return; |
| 248 | + } |
| 249 | + event.preventDefault(); |
| 250 | + } |
| 251 | + |
| 252 | + private _focusStep(index: number) { |
| 253 | + this._focusIndex = index; |
| 254 | + this._stepHeader.toArray()[this._focusIndex].nativeElement.focus(); |
| 255 | + } |
| 256 | + |
| 257 | + private _anyControlsInvalid(index: number): boolean { |
| 258 | + const stepsArray = this._steps.toArray(); |
| 259 | + stepsArray[this._selectedIndex].interacted = true; |
| 260 | + if (this._linear) { |
| 261 | + return stepsArray.slice(0, index).some(step => step.stepControl.invalid); |
| 262 | + } |
| 263 | + return false; |
| 264 | + } |
| 265 | +} |
0 commit comments