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