1 | (function (global, factory) {
|
---|
2 | typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/cdk/a11y'), require('@angular/cdk/bidi'), require('@angular/cdk/coercion'), require('@angular/cdk/keycodes'), require('@angular/common'), require('@angular/core'), require('@angular/cdk/platform'), require('rxjs'), require('rxjs/operators')) :
|
---|
3 | typeof define === 'function' && define.amd ? define('@angular/cdk/stepper', ['exports', '@angular/cdk/a11y', '@angular/cdk/bidi', '@angular/cdk/coercion', '@angular/cdk/keycodes', '@angular/common', '@angular/core', '@angular/cdk/platform', 'rxjs', 'rxjs/operators'], factory) :
|
---|
4 | (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.ng = global.ng || {}, global.ng.cdk = global.ng.cdk || {}, global.ng.cdk.stepper = {}), global.ng.cdk.a11y, global.ng.cdk.bidi, global.ng.cdk.coercion, global.ng.cdk.keycodes, global.ng.common, global.ng.core, global.ng.cdk.platform, global.rxjs, global.rxjs.operators));
|
---|
5 | }(this, (function (exports, a11y, bidi, coercion, keycodes, common, core, platform, rxjs, operators) { 'use strict';
|
---|
6 |
|
---|
7 | /**
|
---|
8 | * @license
|
---|
9 | * Copyright Google LLC All Rights Reserved.
|
---|
10 | *
|
---|
11 | * Use of this source code is governed by an MIT-style license that can be
|
---|
12 | * found in the LICENSE file at https://angular.io/license
|
---|
13 | */
|
---|
14 | var CdkStepHeader = /** @class */ (function () {
|
---|
15 | function CdkStepHeader(_elementRef) {
|
---|
16 | this._elementRef = _elementRef;
|
---|
17 | }
|
---|
18 | /** Focuses the step header. */
|
---|
19 | CdkStepHeader.prototype.focus = function () {
|
---|
20 | this._elementRef.nativeElement.focus();
|
---|
21 | };
|
---|
22 | return CdkStepHeader;
|
---|
23 | }());
|
---|
24 | CdkStepHeader.decorators = [
|
---|
25 | { type: core.Directive, args: [{
|
---|
26 | selector: '[cdkStepHeader]',
|
---|
27 | host: {
|
---|
28 | 'role': 'tab',
|
---|
29 | },
|
---|
30 | },] }
|
---|
31 | ];
|
---|
32 | CdkStepHeader.ctorParameters = function () { return [
|
---|
33 | { type: core.ElementRef }
|
---|
34 | ]; };
|
---|
35 |
|
---|
36 | /**
|
---|
37 | * @license
|
---|
38 | * Copyright Google LLC All Rights Reserved.
|
---|
39 | *
|
---|
40 | * Use of this source code is governed by an MIT-style license that can be
|
---|
41 | * found in the LICENSE file at https://angular.io/license
|
---|
42 | */
|
---|
43 | var CdkStepLabel = /** @class */ (function () {
|
---|
44 | function CdkStepLabel(/** @docs-private */ template) {
|
---|
45 | this.template = template;
|
---|
46 | }
|
---|
47 | return CdkStepLabel;
|
---|
48 | }());
|
---|
49 | CdkStepLabel.decorators = [
|
---|
50 | { type: core.Directive, args: [{
|
---|
51 | selector: '[cdkStepLabel]',
|
---|
52 | },] }
|
---|
53 | ];
|
---|
54 | CdkStepLabel.ctorParameters = function () { return [
|
---|
55 | { type: core.TemplateRef }
|
---|
56 | ]; };
|
---|
57 |
|
---|
58 | /**
|
---|
59 | * @license
|
---|
60 | * Copyright Google LLC All Rights Reserved.
|
---|
61 | *
|
---|
62 | * Use of this source code is governed by an MIT-style license that can be
|
---|
63 | * found in the LICENSE file at https://angular.io/license
|
---|
64 | */
|
---|
65 | /** Used to generate unique ID for each stepper component. */
|
---|
66 | var nextId = 0;
|
---|
67 | /** Change event emitted on selection changes. */
|
---|
68 | var StepperSelectionEvent = /** @class */ (function () {
|
---|
69 | function StepperSelectionEvent() {
|
---|
70 | }
|
---|
71 | return StepperSelectionEvent;
|
---|
72 | }());
|
---|
73 | /** Enum to represent the different states of the steps. */
|
---|
74 | var STEP_STATE = {
|
---|
75 | NUMBER: 'number',
|
---|
76 | EDIT: 'edit',
|
---|
77 | DONE: 'done',
|
---|
78 | ERROR: 'error'
|
---|
79 | };
|
---|
80 | /** InjectionToken that can be used to specify the global stepper options. */
|
---|
81 | var STEPPER_GLOBAL_OPTIONS = new core.InjectionToken('STEPPER_GLOBAL_OPTIONS');
|
---|
82 | var CdkStep = /** @class */ (function () {
|
---|
83 | function CdkStep(_stepper, stepperOptions) {
|
---|
84 | this._stepper = _stepper;
|
---|
85 | /** Whether user has attempted to move away from the step. */
|
---|
86 | this.interacted = false;
|
---|
87 | /** Emits when the user has attempted to move away from the step. */
|
---|
88 | this.interactedStream = new core.EventEmitter();
|
---|
89 | this._editable = true;
|
---|
90 | this._optional = false;
|
---|
91 | this._completedOverride = null;
|
---|
92 | this._customError = null;
|
---|
93 | this._stepperOptions = stepperOptions ? stepperOptions : {};
|
---|
94 | this._displayDefaultIndicatorType = this._stepperOptions.displayDefaultIndicatorType !== false;
|
---|
95 | }
|
---|
96 | Object.defineProperty(CdkStep.prototype, "editable", {
|
---|
97 | /** Whether the user can return to this step once it has been marked as completed. */
|
---|
98 | get: function () {
|
---|
99 | return this._editable;
|
---|
100 | },
|
---|
101 | set: function (value) {
|
---|
102 | this._editable = coercion.coerceBooleanProperty(value);
|
---|
103 | },
|
---|
104 | enumerable: false,
|
---|
105 | configurable: true
|
---|
106 | });
|
---|
107 | Object.defineProperty(CdkStep.prototype, "optional", {
|
---|
108 | /** Whether the completion of step is optional. */
|
---|
109 | get: function () {
|
---|
110 | return this._optional;
|
---|
111 | },
|
---|
112 | set: function (value) {
|
---|
113 | this._optional = coercion.coerceBooleanProperty(value);
|
---|
114 | },
|
---|
115 | enumerable: false,
|
---|
116 | configurable: true
|
---|
117 | });
|
---|
118 | Object.defineProperty(CdkStep.prototype, "completed", {
|
---|
119 | /** Whether step is marked as completed. */
|
---|
120 | get: function () {
|
---|
121 | return this._completedOverride == null ? this._getDefaultCompleted() : this._completedOverride;
|
---|
122 | },
|
---|
123 | set: function (value) {
|
---|
124 | this._completedOverride = coercion.coerceBooleanProperty(value);
|
---|
125 | },
|
---|
126 | enumerable: false,
|
---|
127 | configurable: true
|
---|
128 | });
|
---|
129 | CdkStep.prototype._getDefaultCompleted = function () {
|
---|
130 | return this.stepControl ? this.stepControl.valid && this.interacted : this.interacted;
|
---|
131 | };
|
---|
132 | Object.defineProperty(CdkStep.prototype, "hasError", {
|
---|
133 | /** Whether step has an error. */
|
---|
134 | get: function () {
|
---|
135 | return this._customError == null ? this._getDefaultError() : this._customError;
|
---|
136 | },
|
---|
137 | set: function (value) {
|
---|
138 | this._customError = coercion.coerceBooleanProperty(value);
|
---|
139 | },
|
---|
140 | enumerable: false,
|
---|
141 | configurable: true
|
---|
142 | });
|
---|
143 | CdkStep.prototype._getDefaultError = function () {
|
---|
144 | return this.stepControl && this.stepControl.invalid && this.interacted;
|
---|
145 | };
|
---|
146 | /** Selects this step component. */
|
---|
147 | CdkStep.prototype.select = function () {
|
---|
148 | this._stepper.selected = this;
|
---|
149 | };
|
---|
150 | /** Resets the step to its initial state. Note that this includes resetting form data. */
|
---|
151 | CdkStep.prototype.reset = function () {
|
---|
152 | this.interacted = false;
|
---|
153 | if (this._completedOverride != null) {
|
---|
154 | this._completedOverride = false;
|
---|
155 | }
|
---|
156 | if (this._customError != null) {
|
---|
157 | this._customError = false;
|
---|
158 | }
|
---|
159 | if (this.stepControl) {
|
---|
160 | this.stepControl.reset();
|
---|
161 | }
|
---|
162 | };
|
---|
163 | CdkStep.prototype.ngOnChanges = function () {
|
---|
164 | // Since basically all inputs of the MatStep get proxied through the view down to the
|
---|
165 | // underlying MatStepHeader, we have to make sure that change detection runs correctly.
|
---|
166 | this._stepper._stateChanged();
|
---|
167 | };
|
---|
168 | CdkStep.prototype._markAsInteracted = function () {
|
---|
169 | if (!this.interacted) {
|
---|
170 | this.interacted = true;
|
---|
171 | this.interactedStream.emit(this);
|
---|
172 | }
|
---|
173 | };
|
---|
174 | /** Determines whether the error state can be shown. */
|
---|
175 | CdkStep.prototype._showError = function () {
|
---|
176 | var _a;
|
---|
177 | // We want to show the error state either if the user opted into/out of it using the
|
---|
178 | // global options, or if they've explicitly set it through the `hasError` input.
|
---|
179 | return (_a = this._stepperOptions.showError) !== null && _a !== void 0 ? _a : this._customError != null;
|
---|
180 | };
|
---|
181 | return CdkStep;
|
---|
182 | }());
|
---|
183 | CdkStep.decorators = [
|
---|
184 | { type: core.Component, args: [{
|
---|
185 | selector: 'cdk-step',
|
---|
186 | exportAs: 'cdkStep',
|
---|
187 | template: '<ng-template><ng-content></ng-content></ng-template>',
|
---|
188 | encapsulation: core.ViewEncapsulation.None,
|
---|
189 | changeDetection: core.ChangeDetectionStrategy.OnPush
|
---|
190 | },] }
|
---|
191 | ];
|
---|
192 | CdkStep.ctorParameters = function () { return [
|
---|
193 | { type: CdkStepper, decorators: [{ type: core.Inject, args: [core.forwardRef(function () { return CdkStepper; }),] }] },
|
---|
194 | { type: undefined, decorators: [{ type: core.Optional }, { type: core.Inject, args: [STEPPER_GLOBAL_OPTIONS,] }] }
|
---|
195 | ]; };
|
---|
196 | CdkStep.propDecorators = {
|
---|
197 | stepLabel: [{ type: core.ContentChild, args: [CdkStepLabel,] }],
|
---|
198 | content: [{ type: core.ViewChild, args: [core.TemplateRef, { static: true },] }],
|
---|
199 | stepControl: [{ type: core.Input }],
|
---|
200 | interactedStream: [{ type: core.Output, args: ['interacted',] }],
|
---|
201 | label: [{ type: core.Input }],
|
---|
202 | errorMessage: [{ type: core.Input }],
|
---|
203 | ariaLabel: [{ type: core.Input, args: ['aria-label',] }],
|
---|
204 | ariaLabelledby: [{ type: core.Input, args: ['aria-labelledby',] }],
|
---|
205 | state: [{ type: core.Input }],
|
---|
206 | editable: [{ type: core.Input }],
|
---|
207 | optional: [{ type: core.Input }],
|
---|
208 | completed: [{ type: core.Input }],
|
---|
209 | hasError: [{ type: core.Input }]
|
---|
210 | };
|
---|
211 | var CdkStepper = /** @class */ (function () {
|
---|
212 | function CdkStepper(_dir, _changeDetectorRef, _elementRef,
|
---|
213 | /**
|
---|
214 | * @deprecated No longer in use, to be removed.
|
---|
215 | * @breaking-change 13.0.0
|
---|
216 | */
|
---|
217 | _document) {
|
---|
218 | this._dir = _dir;
|
---|
219 | this._changeDetectorRef = _changeDetectorRef;
|
---|
220 | this._elementRef = _elementRef;
|
---|
221 | /** Emits when the component is destroyed. */
|
---|
222 | this._destroyed = new rxjs.Subject();
|
---|
223 | /** Steps that belong to the current stepper, excluding ones from nested steppers. */
|
---|
224 | this.steps = new core.QueryList();
|
---|
225 | /** List of step headers sorted based on their DOM order. */
|
---|
226 | this._sortedHeaders = new core.QueryList();
|
---|
227 | this._linear = false;
|
---|
228 | this._selectedIndex = 0;
|
---|
229 | /** Event emitted when the selected step has changed. */
|
---|
230 | this.selectionChange = new core.EventEmitter();
|
---|
231 | /**
|
---|
232 | * @deprecated To be turned into a private property. Use `orientation` instead.
|
---|
233 | * @breaking-change 13.0.0
|
---|
234 | */
|
---|
235 | this._orientation = 'horizontal';
|
---|
236 | this._groupId = nextId++;
|
---|
237 | }
|
---|
238 | Object.defineProperty(CdkStepper.prototype, "linear", {
|
---|
239 | /** Whether the validity of previous steps should be checked or not. */
|
---|
240 | get: function () {
|
---|
241 | return this._linear;
|
---|
242 | },
|
---|
243 | set: function (value) {
|
---|
244 | this._linear = coercion.coerceBooleanProperty(value);
|
---|
245 | },
|
---|
246 | enumerable: false,
|
---|
247 | configurable: true
|
---|
248 | });
|
---|
249 | Object.defineProperty(CdkStepper.prototype, "selectedIndex", {
|
---|
250 | /** The index of the selected step. */
|
---|
251 | get: function () {
|
---|
252 | return this._selectedIndex;
|
---|
253 | },
|
---|
254 | set: function (index) {
|
---|
255 | var _a;
|
---|
256 | var newIndex = coercion.coerceNumberProperty(index);
|
---|
257 | if (this.steps && this._steps) {
|
---|
258 | // Ensure that the index can't be out of bounds.
|
---|
259 | if (!this._isValidIndex(index) && (typeof ngDevMode === 'undefined' || ngDevMode)) {
|
---|
260 | throw Error('cdkStepper: Cannot assign out-of-bounds value to `selectedIndex`.');
|
---|
261 | }
|
---|
262 | (_a = this.selected) === null || _a === void 0 ? void 0 : _a._markAsInteracted();
|
---|
263 | if (this._selectedIndex !== newIndex && !this._anyControlsInvalidOrPending(newIndex) &&
|
---|
264 | (newIndex >= this._selectedIndex || this.steps.toArray()[newIndex].editable)) {
|
---|
265 | this._updateSelectedItemIndex(index);
|
---|
266 | }
|
---|
267 | }
|
---|
268 | else {
|
---|
269 | this._selectedIndex = newIndex;
|
---|
270 | }
|
---|
271 | },
|
---|
272 | enumerable: false,
|
---|
273 | configurable: true
|
---|
274 | });
|
---|
275 | Object.defineProperty(CdkStepper.prototype, "selected", {
|
---|
276 | /** The step that is selected. */
|
---|
277 | get: function () {
|
---|
278 | return this.steps ? this.steps.toArray()[this.selectedIndex] : undefined;
|
---|
279 | },
|
---|
280 | set: function (step) {
|
---|
281 | this.selectedIndex = (step && this.steps) ? this.steps.toArray().indexOf(step) : -1;
|
---|
282 | },
|
---|
283 | enumerable: false,
|
---|
284 | configurable: true
|
---|
285 | });
|
---|
286 | Object.defineProperty(CdkStepper.prototype, "orientation", {
|
---|
287 | /** Orientation of the stepper. */
|
---|
288 | get: function () { return this._orientation; },
|
---|
289 | set: function (value) {
|
---|
290 | // This is a protected method so that `MatSteppter` can hook into it.
|
---|
291 | this._orientation = value;
|
---|
292 | if (this._keyManager) {
|
---|
293 | this._keyManager.withVerticalOrientation(value === 'vertical');
|
---|
294 | }
|
---|
295 | },
|
---|
296 | enumerable: false,
|
---|
297 | configurable: true
|
---|
298 | });
|
---|
299 | CdkStepper.prototype.ngAfterContentInit = function () {
|
---|
300 | var _this = this;
|
---|
301 | this._steps.changes
|
---|
302 | .pipe(operators.startWith(this._steps), operators.takeUntil(this._destroyed))
|
---|
303 | .subscribe(function (steps) {
|
---|
304 | _this.steps.reset(steps.filter(function (step) { return step._stepper === _this; }));
|
---|
305 | _this.steps.notifyOnChanges();
|
---|
306 | });
|
---|
307 | };
|
---|
308 | CdkStepper.prototype.ngAfterViewInit = function () {
|
---|
309 | var _this = this;
|
---|
310 | // If the step headers are defined outside of the `ngFor` that renders the steps, like in the
|
---|
311 | // Material stepper, they won't appear in the `QueryList` in the same order as they're
|
---|
312 | // rendered in the DOM which will lead to incorrect keyboard navigation. We need to sort
|
---|
313 | // them manually to ensure that they're correct. Alternatively, we can change the Material
|
---|
314 | // template to inline the headers in the `ngFor`, but that'll result in a lot of
|
---|
315 | // code duplciation. See #23539.
|
---|
316 | this._stepHeader.changes
|
---|
317 | .pipe(operators.startWith(this._stepHeader), operators.takeUntil(this._destroyed))
|
---|
318 | .subscribe(function (headers) {
|
---|
319 | _this._sortedHeaders.reset(headers.toArray().sort(function (a, b) {
|
---|
320 | var documentPosition = a._elementRef.nativeElement.compareDocumentPosition(b._elementRef.nativeElement);
|
---|
321 | // `compareDocumentPosition` returns a bitmask so we have to use a bitwise operator.
|
---|
322 | // https://developer.mozilla.org/en-US/docs/Web/API/Node/compareDocumentPosition
|
---|
323 | // tslint:disable-next-line:no-bitwise
|
---|
324 | return documentPosition & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1;
|
---|
325 | }));
|
---|
326 | _this._sortedHeaders.notifyOnChanges();
|
---|
327 | });
|
---|
328 | // Note that while the step headers are content children by default, any components that
|
---|
329 | // extend this one might have them as view children. We initialize the keyboard handling in
|
---|
330 | // AfterViewInit so we're guaranteed for both view and content children to be defined.
|
---|
331 | this._keyManager = new a11y.FocusKeyManager(this._sortedHeaders)
|
---|
332 | .withWrap()
|
---|
333 | .withHomeAndEnd()
|
---|
334 | .withVerticalOrientation(this._orientation === 'vertical');
|
---|
335 | (this._dir ? this._dir.change : rxjs.of())
|
---|
336 | .pipe(operators.startWith(this._layoutDirection()), operators.takeUntil(this._destroyed))
|
---|
337 | .subscribe(function (direction) { return _this._keyManager.withHorizontalOrientation(direction); });
|
---|
338 | this._keyManager.updateActiveItem(this._selectedIndex);
|
---|
339 | // No need to `takeUntil` here, because we're the ones destroying `steps`.
|
---|
340 | this.steps.changes.subscribe(function () {
|
---|
341 | if (!_this.selected) {
|
---|
342 | _this._selectedIndex = Math.max(_this._selectedIndex - 1, 0);
|
---|
343 | }
|
---|
344 | });
|
---|
345 | // The logic which asserts that the selected index is within bounds doesn't run before the
|
---|
346 | // steps are initialized, because we don't how many steps there are yet so we may have an
|
---|
347 | // invalid index on init. If that's the case, auto-correct to the default so we don't throw.
|
---|
348 | if (!this._isValidIndex(this._selectedIndex)) {
|
---|
349 | this._selectedIndex = 0;
|
---|
350 | }
|
---|
351 | };
|
---|
352 | CdkStepper.prototype.ngOnDestroy = function () {
|
---|
353 | this.steps.destroy();
|
---|
354 | this._sortedHeaders.destroy();
|
---|
355 | this._destroyed.next();
|
---|
356 | this._destroyed.complete();
|
---|
357 | };
|
---|
358 | /** Selects and focuses the next step in list. */
|
---|
359 | CdkStepper.prototype.next = function () {
|
---|
360 | this.selectedIndex = Math.min(this._selectedIndex + 1, this.steps.length - 1);
|
---|
361 | };
|
---|
362 | /** Selects and focuses the previous step in list. */
|
---|
363 | CdkStepper.prototype.previous = function () {
|
---|
364 | this.selectedIndex = Math.max(this._selectedIndex - 1, 0);
|
---|
365 | };
|
---|
366 | /** Resets the stepper to its initial state. Note that this includes clearing form data. */
|
---|
367 | CdkStepper.prototype.reset = function () {
|
---|
368 | this._updateSelectedItemIndex(0);
|
---|
369 | this.steps.forEach(function (step) { return step.reset(); });
|
---|
370 | this._stateChanged();
|
---|
371 | };
|
---|
372 | /** Returns a unique id for each step label element. */
|
---|
373 | CdkStepper.prototype._getStepLabelId = function (i) {
|
---|
374 | return "cdk-step-label-" + this._groupId + "-" + i;
|
---|
375 | };
|
---|
376 | /** Returns unique id for each step content element. */
|
---|
377 | CdkStepper.prototype._getStepContentId = function (i) {
|
---|
378 | return "cdk-step-content-" + this._groupId + "-" + i;
|
---|
379 | };
|
---|
380 | /** Marks the component to be change detected. */
|
---|
381 | CdkStepper.prototype._stateChanged = function () {
|
---|
382 | this._changeDetectorRef.markForCheck();
|
---|
383 | };
|
---|
384 | /** Returns position state of the step with the given index. */
|
---|
385 | CdkStepper.prototype._getAnimationDirection = function (index) {
|
---|
386 | var position = index - this._selectedIndex;
|
---|
387 | if (position < 0) {
|
---|
388 | return this._layoutDirection() === 'rtl' ? 'next' : 'previous';
|
---|
389 | }
|
---|
390 | else if (position > 0) {
|
---|
391 | return this._layoutDirection() === 'rtl' ? 'previous' : 'next';
|
---|
392 | }
|
---|
393 | return 'current';
|
---|
394 | };
|
---|
395 | /** Returns the type of icon to be displayed. */
|
---|
396 | CdkStepper.prototype._getIndicatorType = function (index, state) {
|
---|
397 | if (state === void 0) { state = STEP_STATE.NUMBER; }
|
---|
398 | var step = this.steps.toArray()[index];
|
---|
399 | var isCurrentStep = this._isCurrentStep(index);
|
---|
400 | return step._displayDefaultIndicatorType ? this._getDefaultIndicatorLogic(step, isCurrentStep) :
|
---|
401 | this._getGuidelineLogic(step, isCurrentStep, state);
|
---|
402 | };
|
---|
403 | CdkStepper.prototype._getDefaultIndicatorLogic = function (step, isCurrentStep) {
|
---|
404 | if (step._showError() && step.hasError && !isCurrentStep) {
|
---|
405 | return STEP_STATE.ERROR;
|
---|
406 | }
|
---|
407 | else if (!step.completed || isCurrentStep) {
|
---|
408 | return STEP_STATE.NUMBER;
|
---|
409 | }
|
---|
410 | else {
|
---|
411 | return step.editable ? STEP_STATE.EDIT : STEP_STATE.DONE;
|
---|
412 | }
|
---|
413 | };
|
---|
414 | CdkStepper.prototype._getGuidelineLogic = function (step, isCurrentStep, state) {
|
---|
415 | if (state === void 0) { state = STEP_STATE.NUMBER; }
|
---|
416 | if (step._showError() && step.hasError && !isCurrentStep) {
|
---|
417 | return STEP_STATE.ERROR;
|
---|
418 | }
|
---|
419 | else if (step.completed && !isCurrentStep) {
|
---|
420 | return STEP_STATE.DONE;
|
---|
421 | }
|
---|
422 | else if (step.completed && isCurrentStep) {
|
---|
423 | return state;
|
---|
424 | }
|
---|
425 | else if (step.editable && isCurrentStep) {
|
---|
426 | return STEP_STATE.EDIT;
|
---|
427 | }
|
---|
428 | else {
|
---|
429 | return state;
|
---|
430 | }
|
---|
431 | };
|
---|
432 | CdkStepper.prototype._isCurrentStep = function (index) {
|
---|
433 | return this._selectedIndex === index;
|
---|
434 | };
|
---|
435 | /** Returns the index of the currently-focused step header. */
|
---|
436 | CdkStepper.prototype._getFocusIndex = function () {
|
---|
437 | return this._keyManager ? this._keyManager.activeItemIndex : this._selectedIndex;
|
---|
438 | };
|
---|
439 | CdkStepper.prototype._updateSelectedItemIndex = function (newIndex) {
|
---|
440 | var stepsArray = this.steps.toArray();
|
---|
441 | this.selectionChange.emit({
|
---|
442 | selectedIndex: newIndex,
|
---|
443 | previouslySelectedIndex: this._selectedIndex,
|
---|
444 | selectedStep: stepsArray[newIndex],
|
---|
445 | previouslySelectedStep: stepsArray[this._selectedIndex],
|
---|
446 | });
|
---|
447 | // If focus is inside the stepper, move it to the next header, otherwise it may become
|
---|
448 | // lost when the active step content is hidden. We can't be more granular with the check
|
---|
449 | // (e.g. checking whether focus is inside the active step), because we don't have a
|
---|
450 | // reference to the elements that are rendering out the content.
|
---|
451 | this._containsFocus() ? this._keyManager.setActiveItem(newIndex) :
|
---|
452 | this._keyManager.updateActiveItem(newIndex);
|
---|
453 | this._selectedIndex = newIndex;
|
---|
454 | this._stateChanged();
|
---|
455 | };
|
---|
456 | CdkStepper.prototype._onKeydown = function (event) {
|
---|
457 | var hasModifier = keycodes.hasModifierKey(event);
|
---|
458 | var keyCode = event.keyCode;
|
---|
459 | var manager = this._keyManager;
|
---|
460 | if (manager.activeItemIndex != null && !hasModifier &&
|
---|
461 | (keyCode === keycodes.SPACE || keyCode === keycodes.ENTER)) {
|
---|
462 | this.selectedIndex = manager.activeItemIndex;
|
---|
463 | event.preventDefault();
|
---|
464 | }
|
---|
465 | else {
|
---|
466 | manager.onKeydown(event);
|
---|
467 | }
|
---|
468 | };
|
---|
469 | CdkStepper.prototype._anyControlsInvalidOrPending = function (index) {
|
---|
470 | if (this._linear && index >= 0) {
|
---|
471 | return this.steps.toArray().slice(0, index).some(function (step) {
|
---|
472 | var control = step.stepControl;
|
---|
473 | var isIncomplete = control ? (control.invalid || control.pending || !step.interacted) : !step.completed;
|
---|
474 | return isIncomplete && !step.optional && !step._completedOverride;
|
---|
475 | });
|
---|
476 | }
|
---|
477 | return false;
|
---|
478 | };
|
---|
479 | CdkStepper.prototype._layoutDirection = function () {
|
---|
480 | return this._dir && this._dir.value === 'rtl' ? 'rtl' : 'ltr';
|
---|
481 | };
|
---|
482 | /** Checks whether the stepper contains the focused element. */
|
---|
483 | CdkStepper.prototype._containsFocus = function () {
|
---|
484 | var stepperElement = this._elementRef.nativeElement;
|
---|
485 | var focusedElement = platform._getFocusedElementPierceShadowDom();
|
---|
486 | return stepperElement === focusedElement || stepperElement.contains(focusedElement);
|
---|
487 | };
|
---|
488 | /** Checks whether the passed-in index is a valid step index. */
|
---|
489 | CdkStepper.prototype._isValidIndex = function (index) {
|
---|
490 | return index > -1 && (!this.steps || index < this.steps.length);
|
---|
491 | };
|
---|
492 | return CdkStepper;
|
---|
493 | }());
|
---|
494 | CdkStepper.decorators = [
|
---|
495 | { type: core.Directive, args: [{
|
---|
496 | selector: '[cdkStepper]',
|
---|
497 | exportAs: 'cdkStepper',
|
---|
498 | },] }
|
---|
499 | ];
|
---|
500 | CdkStepper.ctorParameters = function () { return [
|
---|
501 | { type: bidi.Directionality, decorators: [{ type: core.Optional }] },
|
---|
502 | { type: core.ChangeDetectorRef },
|
---|
503 | { type: core.ElementRef },
|
---|
504 | { type: undefined, decorators: [{ type: core.Inject, args: [common.DOCUMENT,] }] }
|
---|
505 | ]; };
|
---|
506 | CdkStepper.propDecorators = {
|
---|
507 | _steps: [{ type: core.ContentChildren, args: [CdkStep, { descendants: true },] }],
|
---|
508 | _stepHeader: [{ type: core.ContentChildren, args: [CdkStepHeader, { descendants: true },] }],
|
---|
509 | linear: [{ type: core.Input }],
|
---|
510 | selectedIndex: [{ type: core.Input }],
|
---|
511 | selected: [{ type: core.Input }],
|
---|
512 | selectionChange: [{ type: core.Output }],
|
---|
513 | orientation: [{ type: core.Input }]
|
---|
514 | };
|
---|
515 |
|
---|
516 | /**
|
---|
517 | * @license
|
---|
518 | * Copyright Google LLC All Rights Reserved.
|
---|
519 | *
|
---|
520 | * Use of this source code is governed by an MIT-style license that can be
|
---|
521 | * found in the LICENSE file at https://angular.io/license
|
---|
522 | */
|
---|
523 | /** Button that moves to the next step in a stepper workflow. */
|
---|
524 | var CdkStepperNext = /** @class */ (function () {
|
---|
525 | function CdkStepperNext(_stepper) {
|
---|
526 | this._stepper = _stepper;
|
---|
527 | /** Type of the next button. Defaults to "submit" if not specified. */
|
---|
528 | this.type = 'submit';
|
---|
529 | }
|
---|
530 | // We have to use a `HostListener` here in order to support both Ivy and ViewEngine.
|
---|
531 | // In Ivy the `host` bindings will be merged when this class is extended, whereas in
|
---|
532 | // ViewEngine they're overwritten.
|
---|
533 | // TODO(crisbeto): we move this back into `host` once Ivy is turned on by default.
|
---|
534 | // tslint:disable-next-line:no-host-decorator-in-concrete
|
---|
535 | CdkStepperNext.prototype._handleClick = function () {
|
---|
536 | this._stepper.next();
|
---|
537 | };
|
---|
538 | return CdkStepperNext;
|
---|
539 | }());
|
---|
540 | CdkStepperNext.decorators = [
|
---|
541 | { type: core.Directive, args: [{
|
---|
542 | selector: 'button[cdkStepperNext]',
|
---|
543 | host: {
|
---|
544 | '[type]': 'type',
|
---|
545 | }
|
---|
546 | },] }
|
---|
547 | ];
|
---|
548 | CdkStepperNext.ctorParameters = function () { return [
|
---|
549 | { type: CdkStepper }
|
---|
550 | ]; };
|
---|
551 | CdkStepperNext.propDecorators = {
|
---|
552 | type: [{ type: core.Input }],
|
---|
553 | _handleClick: [{ type: core.HostListener, args: ['click',] }]
|
---|
554 | };
|
---|
555 | /** Button that moves to the previous step in a stepper workflow. */
|
---|
556 | var CdkStepperPrevious = /** @class */ (function () {
|
---|
557 | function CdkStepperPrevious(_stepper) {
|
---|
558 | this._stepper = _stepper;
|
---|
559 | /** Type of the previous button. Defaults to "button" if not specified. */
|
---|
560 | this.type = 'button';
|
---|
561 | }
|
---|
562 | // We have to use a `HostListener` here in order to support both Ivy and ViewEngine.
|
---|
563 | // In Ivy the `host` bindings will be merged when this class is extended, whereas in
|
---|
564 | // ViewEngine they're overwritten.
|
---|
565 | // TODO(crisbeto): we move this back into `host` once Ivy is turned on by default.
|
---|
566 | // tslint:disable-next-line:no-host-decorator-in-concrete
|
---|
567 | CdkStepperPrevious.prototype._handleClick = function () {
|
---|
568 | this._stepper.previous();
|
---|
569 | };
|
---|
570 | return CdkStepperPrevious;
|
---|
571 | }());
|
---|
572 | CdkStepperPrevious.decorators = [
|
---|
573 | { type: core.Directive, args: [{
|
---|
574 | selector: 'button[cdkStepperPrevious]',
|
---|
575 | host: {
|
---|
576 | '[type]': 'type',
|
---|
577 | }
|
---|
578 | },] }
|
---|
579 | ];
|
---|
580 | CdkStepperPrevious.ctorParameters = function () { return [
|
---|
581 | { type: CdkStepper }
|
---|
582 | ]; };
|
---|
583 | CdkStepperPrevious.propDecorators = {
|
---|
584 | type: [{ type: core.Input }],
|
---|
585 | _handleClick: [{ type: core.HostListener, args: ['click',] }]
|
---|
586 | };
|
---|
587 |
|
---|
588 | /**
|
---|
589 | * @license
|
---|
590 | * Copyright Google LLC All Rights Reserved.
|
---|
591 | *
|
---|
592 | * Use of this source code is governed by an MIT-style license that can be
|
---|
593 | * found in the LICENSE file at https://angular.io/license
|
---|
594 | */
|
---|
595 | var CdkStepperModule = /** @class */ (function () {
|
---|
596 | function CdkStepperModule() {
|
---|
597 | }
|
---|
598 | return CdkStepperModule;
|
---|
599 | }());
|
---|
600 | CdkStepperModule.decorators = [
|
---|
601 | { type: core.NgModule, args: [{
|
---|
602 | imports: [bidi.BidiModule],
|
---|
603 | exports: [
|
---|
604 | CdkStep,
|
---|
605 | CdkStepper,
|
---|
606 | CdkStepHeader,
|
---|
607 | CdkStepLabel,
|
---|
608 | CdkStepperNext,
|
---|
609 | CdkStepperPrevious,
|
---|
610 | ],
|
---|
611 | declarations: [
|
---|
612 | CdkStep,
|
---|
613 | CdkStepper,
|
---|
614 | CdkStepHeader,
|
---|
615 | CdkStepLabel,
|
---|
616 | CdkStepperNext,
|
---|
617 | CdkStepperPrevious,
|
---|
618 | ]
|
---|
619 | },] }
|
---|
620 | ];
|
---|
621 |
|
---|
622 | /**
|
---|
623 | * @license
|
---|
624 | * Copyright Google LLC All Rights Reserved.
|
---|
625 | *
|
---|
626 | * Use of this source code is governed by an MIT-style license that can be
|
---|
627 | * found in the LICENSE file at https://angular.io/license
|
---|
628 | */
|
---|
629 |
|
---|
630 | /**
|
---|
631 | * Generated bundle index. Do not edit.
|
---|
632 | */
|
---|
633 |
|
---|
634 | exports.CdkStep = CdkStep;
|
---|
635 | exports.CdkStepHeader = CdkStepHeader;
|
---|
636 | exports.CdkStepLabel = CdkStepLabel;
|
---|
637 | exports.CdkStepper = CdkStepper;
|
---|
638 | exports.CdkStepperModule = CdkStepperModule;
|
---|
639 | exports.CdkStepperNext = CdkStepperNext;
|
---|
640 | exports.CdkStepperPrevious = CdkStepperPrevious;
|
---|
641 | exports.STEPPER_GLOBAL_OPTIONS = STEPPER_GLOBAL_OPTIONS;
|
---|
642 | exports.STEP_STATE = STEP_STATE;
|
---|
643 | exports.StepperSelectionEvent = StepperSelectionEvent;
|
---|
644 |
|
---|
645 | Object.defineProperty(exports, '__esModule', { value: true });
|
---|
646 |
|
---|
647 | })));
|
---|
648 | //# sourceMappingURL=cdk-stepper.umd.js.map
|
---|