@angular/cdk 21.0.0-next.8 → 21.0.0-rc.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (124) hide show
  1. package/_adev_assets/cdk_drag_drop.json +13 -12
  2. package/_adev_assets/cdk_testing.json +15 -25
  3. package/_adev_assets/cdk_testing_protractor.json +1 -1
  4. package/_adev_assets/cdk_testing_selenium_webdriver.json +1 -1
  5. package/_adev_assets/cdk_testing_testbed.json +1 -1
  6. package/fesm2022/_a11y-module-chunk.mjs +755 -869
  7. package/fesm2022/_a11y-module-chunk.mjs.map +1 -1
  8. package/fesm2022/_activedescendant-key-manager-chunk.mjs +8 -8
  9. package/fesm2022/_activedescendant-key-manager-chunk.mjs.map +1 -1
  10. package/fesm2022/_array-chunk.mjs +1 -1
  11. package/fesm2022/_array-chunk.mjs.map +1 -1
  12. package/fesm2022/_breakpoints-observer-chunk.mjs +149 -152
  13. package/fesm2022/_breakpoints-observer-chunk.mjs.map +1 -1
  14. package/fesm2022/_css-pixel-value-chunk.mjs +4 -5
  15. package/fesm2022/_css-pixel-value-chunk.mjs.map +1 -1
  16. package/fesm2022/_data-source-chunk.mjs +2 -8
  17. package/fesm2022/_data-source-chunk.mjs.map +1 -1
  18. package/fesm2022/_directionality-chunk.mjs +54 -54
  19. package/fesm2022/_directionality-chunk.mjs.map +1 -1
  20. package/fesm2022/_dispose-view-repeater-strategy-chunk.mjs +25 -36
  21. package/fesm2022/_dispose-view-repeater-strategy-chunk.mjs.map +1 -1
  22. package/fesm2022/_element-chunk.mjs +6 -17
  23. package/fesm2022/_element-chunk.mjs.map +1 -1
  24. package/fesm2022/_fake-event-detection-chunk.mjs +3 -17
  25. package/fesm2022/_fake-event-detection-chunk.mjs.map +1 -1
  26. package/fesm2022/_focus-key-manager-chunk.mjs +10 -14
  27. package/fesm2022/_focus-key-manager-chunk.mjs.map +1 -1
  28. package/fesm2022/_focus-monitor-chunk.mjs +376 -566
  29. package/fesm2022/_focus-monitor-chunk.mjs.map +1 -1
  30. package/fesm2022/_id-generator-chunk.mjs +36 -27
  31. package/fesm2022/_id-generator-chunk.mjs.map +1 -1
  32. package/fesm2022/_keycodes-chunk.mjs +9 -9
  33. package/fesm2022/_keycodes-chunk.mjs.map +1 -1
  34. package/fesm2022/_list-key-manager-chunk.mjs +248 -336
  35. package/fesm2022/_list-key-manager-chunk.mjs.map +1 -1
  36. package/fesm2022/_overlay-module-chunk.mjs +2534 -2948
  37. package/fesm2022/_overlay-module-chunk.mjs.map +1 -1
  38. package/fesm2022/_passive-listeners-chunk.mjs +10 -22
  39. package/fesm2022/_passive-listeners-chunk.mjs.map +1 -1
  40. package/fesm2022/_platform-chunk.mjs +42 -65
  41. package/fesm2022/_platform-chunk.mjs.map +1 -1
  42. package/fesm2022/_recycle-view-repeater-strategy-chunk.mjs +78 -134
  43. package/fesm2022/_recycle-view-repeater-strategy-chunk.mjs.map +1 -1
  44. package/fesm2022/_scrolling-chunk.mjs +44 -85
  45. package/fesm2022/_scrolling-chunk.mjs.map +1 -1
  46. package/fesm2022/_selection-model-chunk.mjs +138 -209
  47. package/fesm2022/_selection-model-chunk.mjs.map +1 -1
  48. package/fesm2022/_shadow-dom-chunk.mjs +21 -35
  49. package/fesm2022/_shadow-dom-chunk.mjs.map +1 -1
  50. package/fesm2022/_style-loader-chunk.mjs +50 -37
  51. package/fesm2022/_style-loader-chunk.mjs.map +1 -1
  52. package/fesm2022/_test-environment-chunk.mjs +2 -14
  53. package/fesm2022/_test-environment-chunk.mjs.map +1 -1
  54. package/fesm2022/_tree-key-manager-chunk.mjs +229 -308
  55. package/fesm2022/_tree-key-manager-chunk.mjs.map +1 -1
  56. package/fesm2022/_typeahead-chunk.mjs +52 -74
  57. package/fesm2022/_typeahead-chunk.mjs.map +1 -1
  58. package/fesm2022/_unique-selection-dispatcher-chunk.mjs +43 -40
  59. package/fesm2022/_unique-selection-dispatcher-chunk.mjs.map +1 -1
  60. package/fesm2022/a11y.mjs +351 -449
  61. package/fesm2022/a11y.mjs.map +1 -1
  62. package/fesm2022/accordion.mjs +254 -192
  63. package/fesm2022/accordion.mjs.map +1 -1
  64. package/fesm2022/bidi.mjs +121 -64
  65. package/fesm2022/bidi.mjs.map +1 -1
  66. package/fesm2022/cdk.mjs +1 -2
  67. package/fesm2022/cdk.mjs.map +1 -1
  68. package/fesm2022/clipboard.mjs +208 -186
  69. package/fesm2022/clipboard.mjs.map +1 -1
  70. package/fesm2022/coercion-private.mjs +4 -8
  71. package/fesm2022/coercion-private.mjs.map +1 -1
  72. package/fesm2022/coercion.mjs +11 -29
  73. package/fesm2022/coercion.mjs.map +1 -1
  74. package/fesm2022/dialog.mjs +660 -808
  75. package/fesm2022/dialog.mjs.map +1 -1
  76. package/fesm2022/drag-drop.mjs +3347 -4286
  77. package/fesm2022/drag-drop.mjs.map +1 -1
  78. package/fesm2022/keycodes.mjs +4 -8
  79. package/fesm2022/keycodes.mjs.map +1 -1
  80. package/fesm2022/layout.mjs +44 -26
  81. package/fesm2022/layout.mjs.map +1 -1
  82. package/fesm2022/listbox.mjs +841 -895
  83. package/fesm2022/listbox.mjs.map +1 -1
  84. package/fesm2022/menu.mjs +1942 -1858
  85. package/fesm2022/menu.mjs.map +1 -1
  86. package/fesm2022/observers-private.mjs +88 -106
  87. package/fesm2022/observers-private.mjs.map +1 -1
  88. package/fesm2022/observers.mjs +262 -184
  89. package/fesm2022/observers.mjs.map +1 -1
  90. package/fesm2022/overlay.mjs +72 -68
  91. package/fesm2022/overlay.mjs.map +1 -1
  92. package/fesm2022/platform.mjs +43 -54
  93. package/fesm2022/platform.mjs.map +1 -1
  94. package/fesm2022/portal.mjs +402 -560
  95. package/fesm2022/portal.mjs.map +1 -1
  96. package/fesm2022/private.mjs +38 -10
  97. package/fesm2022/private.mjs.map +1 -1
  98. package/fesm2022/scrolling.mjs +1323 -1400
  99. package/fesm2022/scrolling.mjs.map +1 -1
  100. package/fesm2022/stepper.mjs +758 -590
  101. package/fesm2022/stepper.mjs.map +1 -1
  102. package/fesm2022/table.mjs +2327 -2319
  103. package/fesm2022/table.mjs.map +1 -1
  104. package/fesm2022/testing-selenium-webdriver.mjs +252 -325
  105. package/fesm2022/testing-selenium-webdriver.mjs.map +1 -1
  106. package/fesm2022/testing-testbed.mjs +592 -709
  107. package/fesm2022/testing-testbed.mjs.map +1 -1
  108. package/fesm2022/testing.mjs +368 -889
  109. package/fesm2022/testing.mjs.map +1 -1
  110. package/fesm2022/text-field.mjs +459 -388
  111. package/fesm2022/text-field.mjs.map +1 -1
  112. package/fesm2022/tree.mjs +1483 -1731
  113. package/fesm2022/tree.mjs.map +1 -1
  114. package/overlay/_index.scss +28 -0
  115. package/overlay-prebuilt.css +1 -1
  116. package/package.json +1 -1
  117. package/schematics/ng-add/index.js +1 -1
  118. package/types/_harness-environment-chunk.d.ts +1 -2
  119. package/types/_overlay-module-chunk.d.ts +59 -7
  120. package/types/_portal-directives-chunk.d.ts +2 -18
  121. package/types/accordion.d.ts +3 -1
  122. package/types/dialog.d.ts +1 -1
  123. package/types/overlay.d.ts +6 -2
  124. package/types/portal.d.ts +1 -1
@@ -14,619 +14,787 @@ import './_list-key-manager-chunk.mjs';
14
14
  import './_typeahead-chunk.mjs';
15
15
 
16
16
  class CdkStepHeader {
17
- _elementRef = inject(ElementRef);
18
- constructor() { }
19
- /** Focuses the step header. */
20
- focus() {
21
- this._elementRef.nativeElement.focus();
22
- }
23
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: CdkStepHeader, deps: [], target: i0.ɵɵFactoryTarget.Directive });
24
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.0-next.2", type: CdkStepHeader, isStandalone: true, selector: "[cdkStepHeader]", host: { attributes: { "role": "tab" } }, ngImport: i0 });
17
+ _elementRef = inject(ElementRef);
18
+ constructor() {}
19
+ focus() {
20
+ this._elementRef.nativeElement.focus();
21
+ }
22
+ static ɵfac = i0.ɵɵngDeclareFactory({
23
+ minVersion: "12.0.0",
24
+ version: "20.2.0-next.2",
25
+ ngImport: i0,
26
+ type: CdkStepHeader,
27
+ deps: [],
28
+ target: i0.ɵɵFactoryTarget.Directive
29
+ });
30
+ static ɵdir = i0.ɵɵngDeclareDirective({
31
+ minVersion: "14.0.0",
32
+ version: "20.2.0-next.2",
33
+ type: CdkStepHeader,
34
+ isStandalone: true,
35
+ selector: "[cdkStepHeader]",
36
+ host: {
37
+ attributes: {
38
+ "role": "tab"
39
+ }
40
+ },
41
+ ngImport: i0
42
+ });
25
43
  }
26
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: CdkStepHeader, decorators: [{
27
- type: Directive,
28
- args: [{
29
- selector: '[cdkStepHeader]',
30
- host: {
31
- 'role': 'tab',
32
- },
33
- }]
34
- }], ctorParameters: () => [] });
44
+ i0.ɵɵngDeclareClassMetadata({
45
+ minVersion: "12.0.0",
46
+ version: "20.2.0-next.2",
47
+ ngImport: i0,
48
+ type: CdkStepHeader,
49
+ decorators: [{
50
+ type: Directive,
51
+ args: [{
52
+ selector: '[cdkStepHeader]',
53
+ host: {
54
+ 'role': 'tab'
55
+ }
56
+ }]
57
+ }],
58
+ ctorParameters: () => []
59
+ });
35
60
 
36
61
  class CdkStepLabel {
37
- template = inject(TemplateRef);
38
- constructor() { }
39
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: CdkStepLabel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
40
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.0-next.2", type: CdkStepLabel, isStandalone: true, selector: "[cdkStepLabel]", ngImport: i0 });
62
+ template = inject(TemplateRef);
63
+ constructor() {}
64
+ static ɵfac = i0.ɵɵngDeclareFactory({
65
+ minVersion: "12.0.0",
66
+ version: "20.2.0-next.2",
67
+ ngImport: i0,
68
+ type: CdkStepLabel,
69
+ deps: [],
70
+ target: i0.ɵɵFactoryTarget.Directive
71
+ });
72
+ static ɵdir = i0.ɵɵngDeclareDirective({
73
+ minVersion: "14.0.0",
74
+ version: "20.2.0-next.2",
75
+ type: CdkStepLabel,
76
+ isStandalone: true,
77
+ selector: "[cdkStepLabel]",
78
+ ngImport: i0
79
+ });
41
80
  }
42
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: CdkStepLabel, decorators: [{
43
- type: Directive,
44
- args: [{
45
- selector: '[cdkStepLabel]',
46
- }]
47
- }], ctorParameters: () => [] });
81
+ i0.ɵɵngDeclareClassMetadata({
82
+ minVersion: "12.0.0",
83
+ version: "20.2.0-next.2",
84
+ ngImport: i0,
85
+ type: CdkStepLabel,
86
+ decorators: [{
87
+ type: Directive,
88
+ args: [{
89
+ selector: '[cdkStepLabel]'
90
+ }]
91
+ }],
92
+ ctorParameters: () => []
93
+ });
48
94
 
49
- /** Change event emitted on selection changes. */
50
95
  class StepperSelectionEvent {
51
- /** Index of the step now selected. */
52
- selectedIndex;
53
- /** Index of the step previously selected. */
54
- previouslySelectedIndex;
55
- /** The step instance now selected. */
56
- selectedStep;
57
- /** The step instance previously selected. */
58
- previouslySelectedStep;
96
+ selectedIndex;
97
+ previouslySelectedIndex;
98
+ selectedStep;
99
+ previouslySelectedStep;
59
100
  }
60
- /** Enum to represent the different states of the steps. */
61
101
  const STEP_STATE = {
62
- NUMBER: 'number',
63
- EDIT: 'edit',
64
- DONE: 'done',
65
- ERROR: 'error',
102
+ NUMBER: 'number',
103
+ EDIT: 'edit',
104
+ DONE: 'done',
105
+ ERROR: 'error'
66
106
  };
67
- /** InjectionToken that can be used to specify the global stepper options. */
68
107
  const STEPPER_GLOBAL_OPTIONS = new InjectionToken('STEPPER_GLOBAL_OPTIONS');
69
108
  class CdkStep {
70
- _stepperOptions;
71
- _stepper = inject(CdkStepper);
72
- _displayDefaultIndicatorType;
73
- /** Template for step label if it exists. */
74
- stepLabel;
75
- /** Forms that have been projected into the step. */
76
- _childForms;
77
- /** Template for step content. */
78
- content;
79
- /** The top level abstract control of the step. */
80
- stepControl;
81
- /** Whether user has attempted to move away from the step. */
82
- get interacted() {
83
- return this._interacted();
84
- }
85
- set interacted(value) {
86
- this._interacted.set(value);
87
- }
88
- _interacted = signal(false, ...(ngDevMode ? [{ debugName: "_interacted" }] : []));
89
- /** Emits when the user has attempted to move away from the step. */
90
- interactedStream = new EventEmitter();
91
- /** Plain text label of the step. */
92
- label;
93
- /** Error message to display when there's an error. */
94
- errorMessage;
95
- /** Aria label for the tab. */
96
- ariaLabel;
97
- /**
98
- * Reference to the element that the tab is labelled by.
99
- * Will be cleared if `aria-label` is set at the same time.
100
- */
101
- ariaLabelledby;
102
- /** State of the step. */
103
- get state() {
104
- return this._state();
105
- }
106
- set state(value) {
107
- this._state.set(value);
108
- }
109
- _state = signal(undefined, ...(ngDevMode ? [{ debugName: "_state" }] : []));
110
- /** Whether the user can return to this step once it has been marked as completed. */
111
- get editable() {
112
- return this._editable();
113
- }
114
- set editable(value) {
115
- this._editable.set(value);
116
- }
117
- _editable = signal(true, ...(ngDevMode ? [{ debugName: "_editable" }] : []));
118
- /** Whether the completion of step is optional. */
119
- optional = false;
120
- /** Whether step is marked as completed. */
121
- get completed() {
122
- const override = this._completedOverride();
123
- const interacted = this._interacted();
124
- if (override != null) {
125
- return override;
126
- }
127
- return interacted && (!this.stepControl || this.stepControl.valid);
128
- }
129
- set completed(value) {
130
- this._completedOverride.set(value);
131
- }
132
- _completedOverride = signal(null, ...(ngDevMode ? [{ debugName: "_completedOverride" }] : []));
133
- /** Current index of the step within the stepper. */
134
- index = signal(-1, ...(ngDevMode ? [{ debugName: "index" }] : []));
135
- /** Whether the step is selected. */
136
- isSelected = computed(() => this._stepper.selectedIndex === this.index(), ...(ngDevMode ? [{ debugName: "isSelected" }] : []));
137
- /** Type of indicator that should be shown for the step. */
138
- indicatorType = computed(() => {
139
- const selected = this.isSelected();
140
- const completed = this.completed;
141
- const defaultState = this._state() ?? STEP_STATE.NUMBER;
142
- const editable = this._editable();
143
- if (this._showError() && this.hasError && !selected) {
144
- return STEP_STATE.ERROR;
145
- }
146
- if (this._displayDefaultIndicatorType) {
147
- if (!completed || selected) {
148
- return STEP_STATE.NUMBER;
149
- }
150
- return editable ? STEP_STATE.EDIT : STEP_STATE.DONE;
151
- }
152
- else {
153
- if (completed && !selected) {
154
- return STEP_STATE.DONE;
155
- }
156
- else if (completed && selected) {
157
- return defaultState;
158
- }
159
- return editable && selected ? STEP_STATE.EDIT : defaultState;
160
- }
161
- }, ...(ngDevMode ? [{ debugName: "indicatorType" }] : []));
162
- /** Whether the user can navigate to the step. */
163
- isNavigable = computed(() => {
164
- const isSelected = this.isSelected();
165
- const isCompleted = this.completed;
166
- return isCompleted || isSelected || !this._stepper.linear;
167
- }, ...(ngDevMode ? [{ debugName: "isNavigable" }] : []));
168
- /** Whether step has an error. */
169
- get hasError() {
170
- const customError = this._customError();
171
- return customError == null ? this._getDefaultError() : customError;
172
- }
173
- set hasError(value) {
174
- this._customError.set(value);
175
- }
176
- _customError = signal(null, ...(ngDevMode ? [{ debugName: "_customError" }] : []));
177
- _getDefaultError() {
178
- return this.interacted && !!this.stepControl?.invalid;
179
- }
180
- constructor() {
181
- const stepperOptions = inject(STEPPER_GLOBAL_OPTIONS, { optional: true });
182
- this._stepperOptions = stepperOptions ? stepperOptions : {};
183
- this._displayDefaultIndicatorType = this._stepperOptions.displayDefaultIndicatorType !== false;
184
- }
185
- /** Selects this step component. */
186
- select() {
187
- this._stepper.selected = this;
188
- }
189
- /** Resets the step to its initial state. Note that this includes resetting form data. */
190
- reset() {
191
- this._interacted.set(false);
192
- if (this._completedOverride() != null) {
193
- this._completedOverride.set(false);
194
- }
195
- if (this._customError() != null) {
196
- this._customError.set(false);
197
- }
198
- if (this.stepControl) {
199
- // Reset the forms since the default error state matchers will show errors on submit and we
200
- // want the form to be back to its initial state (see #29781). Submitted state is on the
201
- // individual directives, rather than the control, so we need to reset them ourselves.
202
- this._childForms?.forEach(form => form.resetForm?.());
203
- this.stepControl.reset();
204
- }
205
- }
206
- ngOnChanges() {
207
- // Since basically all inputs of the MatStep get proxied through the view down to the
208
- // underlying MatStepHeader, we have to make sure that change detection runs correctly.
209
- this._stepper._stateChanged();
210
- }
211
- _markAsInteracted() {
212
- if (!this._interacted()) {
213
- this._interacted.set(true);
214
- this.interactedStream.emit(this);
215
- }
216
- }
217
- /** Determines whether the error state can be shown. */
218
- _showError() {
219
- // We want to show the error state either if the user opted into/out of it using the
220
- // global options, or if they've explicitly set it through the `hasError` input.
221
- return this._stepperOptions.showError ?? this._customError() != null;
222
- }
223
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: CdkStep, deps: [], target: i0.ɵɵFactoryTarget.Component });
224
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.2.0-next.2", type: CdkStep, isStandalone: true, selector: "cdk-step", inputs: { stepControl: "stepControl", label: "label", errorMessage: "errorMessage", ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"], state: "state", editable: ["editable", "editable", booleanAttribute], optional: ["optional", "optional", booleanAttribute], completed: ["completed", "completed", booleanAttribute], hasError: ["hasError", "hasError", booleanAttribute] }, outputs: { interactedStream: "interacted" }, queries: [{ propertyName: "stepLabel", first: true, predicate: CdkStepLabel, descendants: true }, { propertyName: "_childForms", predicate:
225
- // Note: we look for `ControlContainer` here, because both `NgForm` and `FormGroupDirective`
226
- // provides themselves as such, but we don't want to have a concrete reference to both of
227
- // the directives. The type is marked as `Partial` in case we run into a class that provides
228
- // itself as `ControlContainer` but doesn't have the same interface as the directives.
229
- ControlContainer, descendants: true }], viewQueries: [{ propertyName: "content", first: true, predicate: TemplateRef, descendants: true, static: true }], exportAs: ["cdkStep"], usesOnChanges: true, ngImport: i0, template: '<ng-template><ng-content/></ng-template>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
109
+ _stepperOptions;
110
+ _stepper = inject(CdkStepper);
111
+ _displayDefaultIndicatorType;
112
+ stepLabel;
113
+ _childForms;
114
+ content;
115
+ stepControl;
116
+ get interacted() {
117
+ return this._interacted();
118
+ }
119
+ set interacted(value) {
120
+ this._interacted.set(value);
121
+ }
122
+ _interacted = signal(false, ...(ngDevMode ? [{
123
+ debugName: "_interacted"
124
+ }] : []));
125
+ interactedStream = new EventEmitter();
126
+ label;
127
+ errorMessage;
128
+ ariaLabel;
129
+ ariaLabelledby;
130
+ get state() {
131
+ return this._state();
132
+ }
133
+ set state(value) {
134
+ this._state.set(value);
135
+ }
136
+ _state = signal(undefined, ...(ngDevMode ? [{
137
+ debugName: "_state"
138
+ }] : []));
139
+ get editable() {
140
+ return this._editable();
141
+ }
142
+ set editable(value) {
143
+ this._editable.set(value);
144
+ }
145
+ _editable = signal(true, ...(ngDevMode ? [{
146
+ debugName: "_editable"
147
+ }] : []));
148
+ optional = false;
149
+ get completed() {
150
+ const override = this._completedOverride();
151
+ const interacted = this._interacted();
152
+ if (override != null) {
153
+ return override;
154
+ }
155
+ return interacted && (!this.stepControl || this.stepControl.valid);
156
+ }
157
+ set completed(value) {
158
+ this._completedOverride.set(value);
159
+ }
160
+ _completedOverride = signal(null, ...(ngDevMode ? [{
161
+ debugName: "_completedOverride"
162
+ }] : []));
163
+ index = signal(-1, ...(ngDevMode ? [{
164
+ debugName: "index"
165
+ }] : []));
166
+ isSelected = computed(() => this._stepper.selectedIndex === this.index(), ...(ngDevMode ? [{
167
+ debugName: "isSelected"
168
+ }] : []));
169
+ indicatorType = computed(() => {
170
+ const selected = this.isSelected();
171
+ const completed = this.completed;
172
+ const defaultState = this._state() ?? STEP_STATE.NUMBER;
173
+ const editable = this._editable();
174
+ if (this._showError() && this.hasError && !selected) {
175
+ return STEP_STATE.ERROR;
176
+ }
177
+ if (this._displayDefaultIndicatorType) {
178
+ if (!completed || selected) {
179
+ return STEP_STATE.NUMBER;
180
+ }
181
+ return editable ? STEP_STATE.EDIT : STEP_STATE.DONE;
182
+ } else {
183
+ if (completed && !selected) {
184
+ return STEP_STATE.DONE;
185
+ } else if (completed && selected) {
186
+ return defaultState;
187
+ }
188
+ return editable && selected ? STEP_STATE.EDIT : defaultState;
189
+ }
190
+ }, ...(ngDevMode ? [{
191
+ debugName: "indicatorType"
192
+ }] : []));
193
+ isNavigable = computed(() => {
194
+ const isSelected = this.isSelected();
195
+ const isCompleted = this.completed;
196
+ return isCompleted || isSelected || !this._stepper.linear;
197
+ }, ...(ngDevMode ? [{
198
+ debugName: "isNavigable"
199
+ }] : []));
200
+ get hasError() {
201
+ const customError = this._customError();
202
+ return customError == null ? this._getDefaultError() : customError;
203
+ }
204
+ set hasError(value) {
205
+ this._customError.set(value);
206
+ }
207
+ _customError = signal(null, ...(ngDevMode ? [{
208
+ debugName: "_customError"
209
+ }] : []));
210
+ _getDefaultError() {
211
+ return this.interacted && !!this.stepControl?.invalid;
212
+ }
213
+ constructor() {
214
+ const stepperOptions = inject(STEPPER_GLOBAL_OPTIONS, {
215
+ optional: true
216
+ });
217
+ this._stepperOptions = stepperOptions ? stepperOptions : {};
218
+ this._displayDefaultIndicatorType = this._stepperOptions.displayDefaultIndicatorType !== false;
219
+ }
220
+ select() {
221
+ this._stepper.selected = this;
222
+ }
223
+ reset() {
224
+ this._interacted.set(false);
225
+ if (this._completedOverride() != null) {
226
+ this._completedOverride.set(false);
227
+ }
228
+ if (this._customError() != null) {
229
+ this._customError.set(false);
230
+ }
231
+ if (this.stepControl) {
232
+ this._childForms?.forEach(form => form.resetForm?.());
233
+ this.stepControl.reset();
234
+ }
235
+ }
236
+ ngOnChanges() {
237
+ this._stepper._stateChanged();
238
+ }
239
+ _markAsInteracted() {
240
+ if (!this._interacted()) {
241
+ this._interacted.set(true);
242
+ this.interactedStream.emit(this);
243
+ }
244
+ }
245
+ _showError() {
246
+ return this._stepperOptions.showError ?? this._customError() != null;
247
+ }
248
+ static ɵfac = i0.ɵɵngDeclareFactory({
249
+ minVersion: "12.0.0",
250
+ version: "20.2.0-next.2",
251
+ ngImport: i0,
252
+ type: CdkStep,
253
+ deps: [],
254
+ target: i0.ɵɵFactoryTarget.Component
255
+ });
256
+ static ɵcmp = i0.ɵɵngDeclareComponent({
257
+ minVersion: "16.1.0",
258
+ version: "20.2.0-next.2",
259
+ type: CdkStep,
260
+ isStandalone: true,
261
+ selector: "cdk-step",
262
+ inputs: {
263
+ stepControl: "stepControl",
264
+ label: "label",
265
+ errorMessage: "errorMessage",
266
+ ariaLabel: ["aria-label", "ariaLabel"],
267
+ ariaLabelledby: ["aria-labelledby", "ariaLabelledby"],
268
+ state: "state",
269
+ editable: ["editable", "editable", booleanAttribute],
270
+ optional: ["optional", "optional", booleanAttribute],
271
+ completed: ["completed", "completed", booleanAttribute],
272
+ hasError: ["hasError", "hasError", booleanAttribute]
273
+ },
274
+ outputs: {
275
+ interactedStream: "interacted"
276
+ },
277
+ queries: [{
278
+ propertyName: "stepLabel",
279
+ first: true,
280
+ predicate: CdkStepLabel,
281
+ descendants: true
282
+ }, {
283
+ propertyName: "_childForms",
284
+ predicate: ControlContainer,
285
+ descendants: true
286
+ }],
287
+ viewQueries: [{
288
+ propertyName: "content",
289
+ first: true,
290
+ predicate: TemplateRef,
291
+ descendants: true,
292
+ static: true
293
+ }],
294
+ exportAs: ["cdkStep"],
295
+ usesOnChanges: true,
296
+ ngImport: i0,
297
+ template: '<ng-template><ng-content/></ng-template>',
298
+ isInline: true,
299
+ changeDetection: i0.ChangeDetectionStrategy.OnPush,
300
+ encapsulation: i0.ViewEncapsulation.None
301
+ });
230
302
  }
231
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: CdkStep, decorators: [{
232
- type: Component,
233
- args: [{
234
- selector: 'cdk-step',
235
- exportAs: 'cdkStep',
236
- template: '<ng-template><ng-content/></ng-template>',
237
- encapsulation: ViewEncapsulation.None,
238
- changeDetection: ChangeDetectionStrategy.OnPush,
239
- }]
240
- }], ctorParameters: () => [], propDecorators: { stepLabel: [{
241
- type: ContentChild,
242
- args: [CdkStepLabel]
243
- }], _childForms: [{
244
- type: ContentChildren,
245
- args: [
246
- // Note: we look for `ControlContainer` here, because both `NgForm` and `FormGroupDirective`
247
- // provides themselves as such, but we don't want to have a concrete reference to both of
248
- // the directives. The type is marked as `Partial` in case we run into a class that provides
249
- // itself as `ControlContainer` but doesn't have the same interface as the directives.
250
- ControlContainer,
251
- {
252
- descendants: true,
253
- }]
254
- }], content: [{
255
- type: ViewChild,
256
- args: [TemplateRef, { static: true }]
257
- }], stepControl: [{
258
- type: Input
259
- }], interactedStream: [{
260
- type: Output,
261
- args: ['interacted']
262
- }], label: [{
263
- type: Input
264
- }], errorMessage: [{
265
- type: Input
266
- }], ariaLabel: [{
267
- type: Input,
268
- args: ['aria-label']
269
- }], ariaLabelledby: [{
270
- type: Input,
271
- args: ['aria-labelledby']
272
- }], state: [{
273
- type: Input
274
- }], editable: [{
275
- type: Input,
276
- args: [{ transform: booleanAttribute }]
277
- }], optional: [{
278
- type: Input,
279
- args: [{ transform: booleanAttribute }]
280
- }], completed: [{
281
- type: Input,
282
- args: [{ transform: booleanAttribute }]
283
- }], hasError: [{
284
- type: Input,
285
- args: [{ transform: booleanAttribute }]
286
- }] } });
303
+ i0.ɵɵngDeclareClassMetadata({
304
+ minVersion: "12.0.0",
305
+ version: "20.2.0-next.2",
306
+ ngImport: i0,
307
+ type: CdkStep,
308
+ decorators: [{
309
+ type: Component,
310
+ args: [{
311
+ selector: 'cdk-step',
312
+ exportAs: 'cdkStep',
313
+ template: '<ng-template><ng-content/></ng-template>',
314
+ encapsulation: ViewEncapsulation.None,
315
+ changeDetection: ChangeDetectionStrategy.OnPush
316
+ }]
317
+ }],
318
+ ctorParameters: () => [],
319
+ propDecorators: {
320
+ stepLabel: [{
321
+ type: ContentChild,
322
+ args: [CdkStepLabel]
323
+ }],
324
+ _childForms: [{
325
+ type: ContentChildren,
326
+ args: [ControlContainer, {
327
+ descendants: true
328
+ }]
329
+ }],
330
+ content: [{
331
+ type: ViewChild,
332
+ args: [TemplateRef, {
333
+ static: true
334
+ }]
335
+ }],
336
+ stepControl: [{
337
+ type: Input
338
+ }],
339
+ interactedStream: [{
340
+ type: Output,
341
+ args: ['interacted']
342
+ }],
343
+ label: [{
344
+ type: Input
345
+ }],
346
+ errorMessage: [{
347
+ type: Input
348
+ }],
349
+ ariaLabel: [{
350
+ type: Input,
351
+ args: ['aria-label']
352
+ }],
353
+ ariaLabelledby: [{
354
+ type: Input,
355
+ args: ['aria-labelledby']
356
+ }],
357
+ state: [{
358
+ type: Input
359
+ }],
360
+ editable: [{
361
+ type: Input,
362
+ args: [{
363
+ transform: booleanAttribute
364
+ }]
365
+ }],
366
+ optional: [{
367
+ type: Input,
368
+ args: [{
369
+ transform: booleanAttribute
370
+ }]
371
+ }],
372
+ completed: [{
373
+ type: Input,
374
+ args: [{
375
+ transform: booleanAttribute
376
+ }]
377
+ }],
378
+ hasError: [{
379
+ type: Input,
380
+ args: [{
381
+ transform: booleanAttribute
382
+ }]
383
+ }]
384
+ }
385
+ });
287
386
  class CdkStepper {
288
- _dir = inject(Directionality, { optional: true });
289
- _changeDetectorRef = inject(ChangeDetectorRef);
290
- _elementRef = inject(ElementRef);
291
- /** Emits when the component is destroyed. */
292
- _destroyed = new Subject();
293
- /** Used for managing keyboard focus. */
294
- _keyManager;
295
- /** Full list of steps inside the stepper, including inside nested steppers. */
296
- _steps;
297
- /** Steps that belong to the current stepper, excluding ones from nested steppers. */
298
- steps = new QueryList();
299
- /** The list of step headers of the steps in the stepper. */
300
- _stepHeader;
301
- /** List of step headers sorted based on their DOM order. */
302
- _sortedHeaders = new QueryList();
303
- /** Whether the validity of previous steps should be checked or not. */
304
- linear = false;
305
- /** The index of the selected step. */
306
- get selectedIndex() {
307
- return this._selectedIndex();
308
- }
309
- set selectedIndex(index) {
310
- if (this._steps) {
311
- // Ensure that the index can't be out of bounds.
312
- if (!this._isValidIndex(index) && (typeof ngDevMode === 'undefined' || ngDevMode)) {
313
- throw Error('cdkStepper: Cannot assign out-of-bounds value to `selectedIndex`.');
314
- }
315
- if (this.selectedIndex !== index) {
316
- this.selected?._markAsInteracted();
317
- if (!this._anyControlsInvalidOrPending(index) &&
318
- (index >= this.selectedIndex || this.steps.toArray()[index].editable)) {
319
- this._updateSelectedItemIndex(index);
320
- }
321
- }
387
+ _dir = inject(Directionality, {
388
+ optional: true
389
+ });
390
+ _changeDetectorRef = inject(ChangeDetectorRef);
391
+ _elementRef = inject(ElementRef);
392
+ _destroyed = new Subject();
393
+ _keyManager;
394
+ _steps;
395
+ steps = new QueryList();
396
+ _stepHeader;
397
+ _sortedHeaders = new QueryList();
398
+ linear = false;
399
+ get selectedIndex() {
400
+ return this._selectedIndex();
401
+ }
402
+ set selectedIndex(index) {
403
+ if (this._steps) {
404
+ if (!this._isValidIndex(index) && (typeof ngDevMode === 'undefined' || ngDevMode)) {
405
+ throw Error('cdkStepper: Cannot assign out-of-bounds value to `selectedIndex`.');
406
+ }
407
+ if (this.selectedIndex !== index) {
408
+ this.selected?._markAsInteracted();
409
+ if (!this._anyControlsInvalidOrPending(index) && (index >= this.selectedIndex || this.steps.toArray()[index].editable)) {
410
+ this._updateSelectedItemIndex(index);
322
411
  }
323
- else {
324
- this._selectedIndex.set(index);
325
- }
326
- }
327
- _selectedIndex = signal(0, ...(ngDevMode ? [{ debugName: "_selectedIndex" }] : []));
328
- /** The step that is selected. */
329
- get selected() {
330
- return this.steps ? this.steps.toArray()[this.selectedIndex] : undefined;
331
- }
332
- set selected(step) {
333
- this.selectedIndex = step && this.steps ? this.steps.toArray().indexOf(step) : -1;
334
- }
335
- /** Event emitted when the selected step has changed. */
336
- selectionChange = new EventEmitter();
337
- /** Output to support two-way binding on `[(selectedIndex)]` */
338
- selectedIndexChange = new EventEmitter();
339
- /** Used to track unique ID for each stepper component. */
340
- _groupId = inject(_IdGenerator).getId('cdk-stepper-');
341
- /** Orientation of the stepper. */
342
- get orientation() {
343
- return this._orientation;
344
- }
345
- set orientation(value) {
346
- // This is a protected method so that `MatStepper` can hook into it.
347
- this._orientation = value;
348
- if (this._keyManager) {
349
- this._keyManager.withVerticalOrientation(value === 'vertical');
350
- }
351
- }
352
- _orientation = 'horizontal';
353
- constructor() { }
354
- ngAfterContentInit() {
355
- this._steps.changes
356
- .pipe(startWith(this._steps), takeUntil(this._destroyed))
357
- .subscribe((steps) => {
358
- this.steps.reset(steps.filter(step => step._stepper === this));
359
- this.steps.forEach((step, index) => step.index.set(index));
360
- this.steps.notifyOnChanges();
361
- });
362
- }
363
- ngAfterViewInit() {
364
- // If the step headers are defined outside of the `ngFor` that renders the steps, like in the
365
- // Material stepper, they won't appear in the `QueryList` in the same order as they're
366
- // rendered in the DOM which will lead to incorrect keyboard navigation. We need to sort
367
- // them manually to ensure that they're correct. Alternatively, we can change the Material
368
- // template to inline the headers in the `ngFor`, but that'll result in a lot of
369
- // code duplication. See #23539.
370
- this._stepHeader.changes
371
- .pipe(startWith(this._stepHeader), takeUntil(this._destroyed))
372
- .subscribe((headers) => {
373
- this._sortedHeaders.reset(headers.toArray().sort((a, b) => {
374
- const documentPosition = a._elementRef.nativeElement.compareDocumentPosition(b._elementRef.nativeElement);
375
- // `compareDocumentPosition` returns a bitmask so we have to use a bitwise operator.
376
- // https://developer.mozilla.org/en-US/docs/Web/API/Node/compareDocumentPosition
377
- // tslint:disable-next-line:no-bitwise
378
- return documentPosition & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1;
379
- }));
380
- this._sortedHeaders.notifyOnChanges();
381
- });
382
- // Note that while the step headers are content children by default, any components that
383
- // extend this one might have them as view children. We initialize the keyboard handling in
384
- // AfterViewInit so we're guaranteed for both view and content children to be defined.
385
- this._keyManager = new FocusKeyManager(this._sortedHeaders)
386
- .withWrap()
387
- .withHomeAndEnd()
388
- .withVerticalOrientation(this._orientation === 'vertical');
389
- // The selected index may have changed between when the component was created and when the
390
- // key manager was initialized. Use `updateActiveItem` so it's correct, but it doesn't steal
391
- // away focus from the user.
392
- this._keyManager.updateActiveItem(this.selectedIndex);
393
- (this._dir ? this._dir.change : of())
394
- .pipe(startWith(this._layoutDirection()), takeUntil(this._destroyed))
395
- .subscribe(direction => this._keyManager?.withHorizontalOrientation(direction));
396
- this._keyManager.updateActiveItem(this.selectedIndex);
397
- // No need to `takeUntil` here, because we're the ones destroying `steps`.
398
- this.steps.changes.subscribe(() => {
399
- if (!this.selected) {
400
- this._selectedIndex.set(Math.max(this.selectedIndex - 1, 0));
401
- }
402
- });
403
- // The logic which asserts that the selected index is within bounds doesn't run before the
404
- // steps are initialized, because we don't how many steps there are yet so we may have an
405
- // invalid index on init. If that's the case, auto-correct to the default so we don't throw.
406
- if (!this._isValidIndex(this.selectedIndex)) {
407
- this._selectedIndex.set(0);
408
- }
409
- // For linear step and selected index is greater than zero,
410
- // set all the previous steps to interacted so that we can navigate to previous steps.
411
- if (this.linear && this.selectedIndex > 0) {
412
- const visitedSteps = this.steps.toArray().slice(0, this._selectedIndex());
413
- for (const step of visitedSteps) {
414
- step._markAsInteracted();
415
- }
416
- }
417
- }
418
- ngOnDestroy() {
419
- this._keyManager?.destroy();
420
- this.steps.destroy();
421
- this._sortedHeaders.destroy();
422
- this._destroyed.next();
423
- this._destroyed.complete();
424
- }
425
- /** Selects and focuses the next step in list. */
426
- next() {
427
- this.selectedIndex = Math.min(this._selectedIndex() + 1, this.steps.length - 1);
428
- }
429
- /** Selects and focuses the previous step in list. */
430
- previous() {
431
- this.selectedIndex = Math.max(this._selectedIndex() - 1, 0);
432
- }
433
- /** Resets the stepper to its initial state. Note that this includes clearing form data. */
434
- reset() {
435
- this._updateSelectedItemIndex(0);
436
- this.steps.forEach(step => step.reset());
437
- this._stateChanged();
438
- }
439
- /** Returns a unique id for each step label element. */
440
- _getStepLabelId(i) {
441
- return `${this._groupId}-label-${i}`;
442
- }
443
- /** Returns unique id for each step content element. */
444
- _getStepContentId(i) {
445
- return `${this._groupId}-content-${i}`;
446
- }
447
- /** Marks the component to be change detected. */
448
- _stateChanged() {
449
- this._changeDetectorRef.markForCheck();
450
- }
451
- /** Returns position state of the step with the given index. */
452
- _getAnimationDirection(index) {
453
- const position = index - this._selectedIndex();
454
- if (position < 0) {
455
- return this._layoutDirection() === 'rtl' ? 'next' : 'previous';
456
- }
457
- else if (position > 0) {
458
- return this._layoutDirection() === 'rtl' ? 'previous' : 'next';
459
- }
460
- return 'current';
461
- }
462
- /** Returns the index of the currently-focused step header. */
463
- _getFocusIndex() {
464
- return this._keyManager ? this._keyManager.activeItemIndex : this._selectedIndex();
465
- }
466
- _updateSelectedItemIndex(newIndex) {
467
- const stepsArray = this.steps.toArray();
468
- const selectedIndex = this._selectedIndex();
469
- this.selectionChange.emit({
470
- selectedIndex: newIndex,
471
- previouslySelectedIndex: selectedIndex,
472
- selectedStep: stepsArray[newIndex],
473
- previouslySelectedStep: stepsArray[selectedIndex],
474
- });
475
- // If focus is inside the stepper, move it to the next header, otherwise it may become
476
- // lost when the active step content is hidden. We can't be more granular with the check
477
- // (e.g. checking whether focus is inside the active step), because we don't have a
478
- // reference to the elements that are rendering out the content.
479
- if (this._keyManager) {
480
- this._containsFocus()
481
- ? this._keyManager.setActiveItem(newIndex)
482
- : this._keyManager.updateActiveItem(newIndex);
483
- }
484
- this._selectedIndex.set(newIndex);
485
- this.selectedIndexChange.emit(newIndex);
486
- this._stateChanged();
487
- }
488
- _onKeydown(event) {
489
- const hasModifier = hasModifierKey(event);
490
- const keyCode = event.keyCode;
491
- const manager = this._keyManager;
492
- if (manager?.activeItemIndex != null &&
493
- !hasModifier &&
494
- (keyCode === SPACE || keyCode === ENTER)) {
495
- this.selectedIndex = manager.activeItemIndex;
496
- event.preventDefault();
497
- }
498
- else {
499
- manager?.setFocusOrigin('keyboard').onKeydown(event);
500
- }
501
- }
502
- _anyControlsInvalidOrPending(index) {
503
- if (this.linear && index >= 0) {
504
- return this.steps
505
- .toArray()
506
- .slice(0, index)
507
- .some(step => {
508
- const control = step.stepControl;
509
- const isIncomplete = control
510
- ? control.invalid || control.pending || !step.interacted
511
- : !step.completed;
512
- return isIncomplete && !step.optional && !step._completedOverride();
513
- });
514
- }
515
- return false;
516
- }
517
- _layoutDirection() {
518
- return this._dir && this._dir.value === 'rtl' ? 'rtl' : 'ltr';
519
- }
520
- /** Checks whether the stepper contains the focused element. */
521
- _containsFocus() {
522
- const stepperElement = this._elementRef.nativeElement;
523
- const focusedElement = _getFocusedElementPierceShadowDom();
524
- return stepperElement === focusedElement || stepperElement.contains(focusedElement);
525
- }
526
- /** Checks whether the passed-in index is a valid step index. */
527
- _isValidIndex(index) {
528
- return index > -1 && (!this.steps || index < this.steps.length);
529
- }
530
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: CdkStepper, deps: [], target: i0.ɵɵFactoryTarget.Directive });
531
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.2.0-next.2", type: CdkStepper, isStandalone: true, selector: "[cdkStepper]", inputs: { linear: ["linear", "linear", booleanAttribute], selectedIndex: ["selectedIndex", "selectedIndex", numberAttribute], selected: "selected", orientation: "orientation" }, outputs: { selectionChange: "selectionChange", selectedIndexChange: "selectedIndexChange" }, queries: [{ propertyName: "_steps", predicate: CdkStep, descendants: true }, { propertyName: "_stepHeader", predicate: CdkStepHeader, descendants: true }], exportAs: ["cdkStepper"], ngImport: i0 });
412
+ }
413
+ } else {
414
+ this._selectedIndex.set(index);
415
+ }
416
+ }
417
+ _selectedIndex = signal(0, ...(ngDevMode ? [{
418
+ debugName: "_selectedIndex"
419
+ }] : []));
420
+ get selected() {
421
+ return this.steps ? this.steps.toArray()[this.selectedIndex] : undefined;
422
+ }
423
+ set selected(step) {
424
+ this.selectedIndex = step && this.steps ? this.steps.toArray().indexOf(step) : -1;
425
+ }
426
+ selectionChange = new EventEmitter();
427
+ selectedIndexChange = new EventEmitter();
428
+ _groupId = inject(_IdGenerator).getId('cdk-stepper-');
429
+ get orientation() {
430
+ return this._orientation;
431
+ }
432
+ set orientation(value) {
433
+ this._orientation = value;
434
+ if (this._keyManager) {
435
+ this._keyManager.withVerticalOrientation(value === 'vertical');
436
+ }
437
+ }
438
+ _orientation = 'horizontal';
439
+ constructor() {}
440
+ ngAfterContentInit() {
441
+ this._steps.changes.pipe(startWith(this._steps), takeUntil(this._destroyed)).subscribe(steps => {
442
+ this.steps.reset(steps.filter(step => step._stepper === this));
443
+ this.steps.forEach((step, index) => step.index.set(index));
444
+ this.steps.notifyOnChanges();
445
+ });
446
+ }
447
+ ngAfterViewInit() {
448
+ this._stepHeader.changes.pipe(startWith(this._stepHeader), takeUntil(this._destroyed)).subscribe(headers => {
449
+ this._sortedHeaders.reset(headers.toArray().sort((a, b) => {
450
+ const documentPosition = a._elementRef.nativeElement.compareDocumentPosition(b._elementRef.nativeElement);
451
+ return documentPosition & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1;
452
+ }));
453
+ this._sortedHeaders.notifyOnChanges();
454
+ });
455
+ this._keyManager = new FocusKeyManager(this._sortedHeaders).withWrap().withHomeAndEnd().withVerticalOrientation(this._orientation === 'vertical');
456
+ this._keyManager.updateActiveItem(this.selectedIndex);
457
+ (this._dir ? this._dir.change : of()).pipe(startWith(this._layoutDirection()), takeUntil(this._destroyed)).subscribe(direction => this._keyManager?.withHorizontalOrientation(direction));
458
+ this._keyManager.updateActiveItem(this.selectedIndex);
459
+ this.steps.changes.subscribe(() => {
460
+ if (!this.selected) {
461
+ this._selectedIndex.set(Math.max(this.selectedIndex - 1, 0));
462
+ }
463
+ });
464
+ if (!this._isValidIndex(this.selectedIndex)) {
465
+ this._selectedIndex.set(0);
466
+ }
467
+ if (this.linear && this.selectedIndex > 0) {
468
+ const visitedSteps = this.steps.toArray().slice(0, this._selectedIndex());
469
+ for (const step of visitedSteps) {
470
+ step._markAsInteracted();
471
+ }
472
+ }
473
+ }
474
+ ngOnDestroy() {
475
+ this._keyManager?.destroy();
476
+ this.steps.destroy();
477
+ this._sortedHeaders.destroy();
478
+ this._destroyed.next();
479
+ this._destroyed.complete();
480
+ }
481
+ next() {
482
+ this.selectedIndex = Math.min(this._selectedIndex() + 1, this.steps.length - 1);
483
+ }
484
+ previous() {
485
+ this.selectedIndex = Math.max(this._selectedIndex() - 1, 0);
486
+ }
487
+ reset() {
488
+ this._updateSelectedItemIndex(0);
489
+ this.steps.forEach(step => step.reset());
490
+ this._stateChanged();
491
+ }
492
+ _getStepLabelId(i) {
493
+ return `${this._groupId}-label-${i}`;
494
+ }
495
+ _getStepContentId(i) {
496
+ return `${this._groupId}-content-${i}`;
497
+ }
498
+ _stateChanged() {
499
+ this._changeDetectorRef.markForCheck();
500
+ }
501
+ _getAnimationDirection(index) {
502
+ const position = index - this._selectedIndex();
503
+ if (position < 0) {
504
+ return this._layoutDirection() === 'rtl' ? 'next' : 'previous';
505
+ } else if (position > 0) {
506
+ return this._layoutDirection() === 'rtl' ? 'previous' : 'next';
507
+ }
508
+ return 'current';
509
+ }
510
+ _getFocusIndex() {
511
+ return this._keyManager ? this._keyManager.activeItemIndex : this._selectedIndex();
512
+ }
513
+ _updateSelectedItemIndex(newIndex) {
514
+ const stepsArray = this.steps.toArray();
515
+ const selectedIndex = this._selectedIndex();
516
+ this.selectionChange.emit({
517
+ selectedIndex: newIndex,
518
+ previouslySelectedIndex: selectedIndex,
519
+ selectedStep: stepsArray[newIndex],
520
+ previouslySelectedStep: stepsArray[selectedIndex]
521
+ });
522
+ if (this._keyManager) {
523
+ this._containsFocus() ? this._keyManager.setActiveItem(newIndex) : this._keyManager.updateActiveItem(newIndex);
524
+ }
525
+ this._selectedIndex.set(newIndex);
526
+ this.selectedIndexChange.emit(newIndex);
527
+ this._stateChanged();
528
+ }
529
+ _onKeydown(event) {
530
+ const hasModifier = hasModifierKey(event);
531
+ const keyCode = event.keyCode;
532
+ const manager = this._keyManager;
533
+ if (manager?.activeItemIndex != null && !hasModifier && (keyCode === SPACE || keyCode === ENTER)) {
534
+ this.selectedIndex = manager.activeItemIndex;
535
+ event.preventDefault();
536
+ } else {
537
+ manager?.setFocusOrigin('keyboard').onKeydown(event);
538
+ }
539
+ }
540
+ _anyControlsInvalidOrPending(index) {
541
+ if (this.linear && index >= 0) {
542
+ return this.steps.toArray().slice(0, index).some(step => {
543
+ const control = step.stepControl;
544
+ const isIncomplete = control ? control.invalid || control.pending || !step.interacted : !step.completed;
545
+ return isIncomplete && !step.optional && !step._completedOverride();
546
+ });
547
+ }
548
+ return false;
549
+ }
550
+ _layoutDirection() {
551
+ return this._dir && this._dir.value === 'rtl' ? 'rtl' : 'ltr';
552
+ }
553
+ _containsFocus() {
554
+ const stepperElement = this._elementRef.nativeElement;
555
+ const focusedElement = _getFocusedElementPierceShadowDom();
556
+ return stepperElement === focusedElement || stepperElement.contains(focusedElement);
557
+ }
558
+ _isValidIndex(index) {
559
+ return index > -1 && (!this.steps || index < this.steps.length);
560
+ }
561
+ static ɵfac = i0.ɵɵngDeclareFactory({
562
+ minVersion: "12.0.0",
563
+ version: "20.2.0-next.2",
564
+ ngImport: i0,
565
+ type: CdkStepper,
566
+ deps: [],
567
+ target: i0.ɵɵFactoryTarget.Directive
568
+ });
569
+ static ɵdir = i0.ɵɵngDeclareDirective({
570
+ minVersion: "16.1.0",
571
+ version: "20.2.0-next.2",
572
+ type: CdkStepper,
573
+ isStandalone: true,
574
+ selector: "[cdkStepper]",
575
+ inputs: {
576
+ linear: ["linear", "linear", booleanAttribute],
577
+ selectedIndex: ["selectedIndex", "selectedIndex", numberAttribute],
578
+ selected: "selected",
579
+ orientation: "orientation"
580
+ },
581
+ outputs: {
582
+ selectionChange: "selectionChange",
583
+ selectedIndexChange: "selectedIndexChange"
584
+ },
585
+ queries: [{
586
+ propertyName: "_steps",
587
+ predicate: CdkStep,
588
+ descendants: true
589
+ }, {
590
+ propertyName: "_stepHeader",
591
+ predicate: CdkStepHeader,
592
+ descendants: true
593
+ }],
594
+ exportAs: ["cdkStepper"],
595
+ ngImport: i0
596
+ });
532
597
  }
533
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: CdkStepper, decorators: [{
534
- type: Directive,
535
- args: [{
536
- selector: '[cdkStepper]',
537
- exportAs: 'cdkStepper',
538
- }]
539
- }], ctorParameters: () => [], propDecorators: { _steps: [{
540
- type: ContentChildren,
541
- args: [CdkStep, { descendants: true }]
542
- }], _stepHeader: [{
543
- type: ContentChildren,
544
- args: [CdkStepHeader, { descendants: true }]
545
- }], linear: [{
546
- type: Input,
547
- args: [{ transform: booleanAttribute }]
548
- }], selectedIndex: [{
549
- type: Input,
550
- args: [{ transform: numberAttribute }]
551
- }], selected: [{
552
- type: Input
553
- }], selectionChange: [{
554
- type: Output
555
- }], selectedIndexChange: [{
556
- type: Output
557
- }], orientation: [{
558
- type: Input
559
- }] } });
598
+ i0.ɵɵngDeclareClassMetadata({
599
+ minVersion: "12.0.0",
600
+ version: "20.2.0-next.2",
601
+ ngImport: i0,
602
+ type: CdkStepper,
603
+ decorators: [{
604
+ type: Directive,
605
+ args: [{
606
+ selector: '[cdkStepper]',
607
+ exportAs: 'cdkStepper'
608
+ }]
609
+ }],
610
+ ctorParameters: () => [],
611
+ propDecorators: {
612
+ _steps: [{
613
+ type: ContentChildren,
614
+ args: [CdkStep, {
615
+ descendants: true
616
+ }]
617
+ }],
618
+ _stepHeader: [{
619
+ type: ContentChildren,
620
+ args: [CdkStepHeader, {
621
+ descendants: true
622
+ }]
623
+ }],
624
+ linear: [{
625
+ type: Input,
626
+ args: [{
627
+ transform: booleanAttribute
628
+ }]
629
+ }],
630
+ selectedIndex: [{
631
+ type: Input,
632
+ args: [{
633
+ transform: numberAttribute
634
+ }]
635
+ }],
636
+ selected: [{
637
+ type: Input
638
+ }],
639
+ selectionChange: [{
640
+ type: Output
641
+ }],
642
+ selectedIndexChange: [{
643
+ type: Output
644
+ }],
645
+ orientation: [{
646
+ type: Input
647
+ }]
648
+ }
649
+ });
560
650
 
561
- /** Button that moves to the next step in a stepper workflow. */
562
651
  class CdkStepperNext {
563
- _stepper = inject(CdkStepper);
564
- /** Type of the next button. Defaults to "submit" if not specified. */
565
- type = 'submit';
566
- constructor() { }
567
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: CdkStepperNext, deps: [], target: i0.ɵɵFactoryTarget.Directive });
568
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.0-next.2", type: CdkStepperNext, isStandalone: true, selector: "button[cdkStepperNext]", inputs: { type: "type" }, host: { listeners: { "click": "_stepper.next()" }, properties: { "type": "type" } }, ngImport: i0 });
652
+ _stepper = inject(CdkStepper);
653
+ type = 'submit';
654
+ constructor() {}
655
+ static ɵfac = i0.ɵɵngDeclareFactory({
656
+ minVersion: "12.0.0",
657
+ version: "20.2.0-next.2",
658
+ ngImport: i0,
659
+ type: CdkStepperNext,
660
+ deps: [],
661
+ target: i0.ɵɵFactoryTarget.Directive
662
+ });
663
+ static ɵdir = i0.ɵɵngDeclareDirective({
664
+ minVersion: "14.0.0",
665
+ version: "20.2.0-next.2",
666
+ type: CdkStepperNext,
667
+ isStandalone: true,
668
+ selector: "button[cdkStepperNext]",
669
+ inputs: {
670
+ type: "type"
671
+ },
672
+ host: {
673
+ listeners: {
674
+ "click": "_stepper.next()"
675
+ },
676
+ properties: {
677
+ "type": "type"
678
+ }
679
+ },
680
+ ngImport: i0
681
+ });
569
682
  }
570
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: CdkStepperNext, decorators: [{
571
- type: Directive,
572
- args: [{
573
- selector: 'button[cdkStepperNext]',
574
- host: {
575
- '[type]': 'type',
576
- '(click)': '_stepper.next()',
577
- },
578
- }]
579
- }], ctorParameters: () => [], propDecorators: { type: [{
580
- type: Input
581
- }] } });
582
- /** Button that moves to the previous step in a stepper workflow. */
683
+ i0.ɵɵngDeclareClassMetadata({
684
+ minVersion: "12.0.0",
685
+ version: "20.2.0-next.2",
686
+ ngImport: i0,
687
+ type: CdkStepperNext,
688
+ decorators: [{
689
+ type: Directive,
690
+ args: [{
691
+ selector: 'button[cdkStepperNext]',
692
+ host: {
693
+ '[type]': 'type',
694
+ '(click)': '_stepper.next()'
695
+ }
696
+ }]
697
+ }],
698
+ ctorParameters: () => [],
699
+ propDecorators: {
700
+ type: [{
701
+ type: Input
702
+ }]
703
+ }
704
+ });
583
705
  class CdkStepperPrevious {
584
- _stepper = inject(CdkStepper);
585
- /** Type of the previous button. Defaults to "button" if not specified. */
586
- type = 'button';
587
- constructor() { }
588
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: CdkStepperPrevious, deps: [], target: i0.ɵɵFactoryTarget.Directive });
589
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.0-next.2", type: CdkStepperPrevious, isStandalone: true, selector: "button[cdkStepperPrevious]", inputs: { type: "type" }, host: { listeners: { "click": "_stepper.previous()" }, properties: { "type": "type" } }, ngImport: i0 });
706
+ _stepper = inject(CdkStepper);
707
+ type = 'button';
708
+ constructor() {}
709
+ static ɵfac = i0.ɵɵngDeclareFactory({
710
+ minVersion: "12.0.0",
711
+ version: "20.2.0-next.2",
712
+ ngImport: i0,
713
+ type: CdkStepperPrevious,
714
+ deps: [],
715
+ target: i0.ɵɵFactoryTarget.Directive
716
+ });
717
+ static ɵdir = i0.ɵɵngDeclareDirective({
718
+ minVersion: "14.0.0",
719
+ version: "20.2.0-next.2",
720
+ type: CdkStepperPrevious,
721
+ isStandalone: true,
722
+ selector: "button[cdkStepperPrevious]",
723
+ inputs: {
724
+ type: "type"
725
+ },
726
+ host: {
727
+ listeners: {
728
+ "click": "_stepper.previous()"
729
+ },
730
+ properties: {
731
+ "type": "type"
732
+ }
733
+ },
734
+ ngImport: i0
735
+ });
590
736
  }
591
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: CdkStepperPrevious, decorators: [{
592
- type: Directive,
593
- args: [{
594
- selector: 'button[cdkStepperPrevious]',
595
- host: {
596
- '[type]': 'type',
597
- '(click)': '_stepper.previous()',
598
- },
599
- }]
600
- }], ctorParameters: () => [], propDecorators: { type: [{
601
- type: Input
602
- }] } });
737
+ i0.ɵɵngDeclareClassMetadata({
738
+ minVersion: "12.0.0",
739
+ version: "20.2.0-next.2",
740
+ ngImport: i0,
741
+ type: CdkStepperPrevious,
742
+ decorators: [{
743
+ type: Directive,
744
+ args: [{
745
+ selector: 'button[cdkStepperPrevious]',
746
+ host: {
747
+ '[type]': 'type',
748
+ '(click)': '_stepper.previous()'
749
+ }
750
+ }]
751
+ }],
752
+ ctorParameters: () => [],
753
+ propDecorators: {
754
+ type: [{
755
+ type: Input
756
+ }]
757
+ }
758
+ });
603
759
 
604
760
  class CdkStepperModule {
605
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: CdkStepperModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
606
- static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.2.0-next.2", ngImport: i0, type: CdkStepperModule, imports: [BidiModule,
607
- CdkStep,
608
- CdkStepper,
609
- CdkStepHeader,
610
- CdkStepLabel,
611
- CdkStepperNext,
612
- CdkStepperPrevious], exports: [CdkStep, CdkStepper, CdkStepHeader, CdkStepLabel, CdkStepperNext, CdkStepperPrevious] });
613
- static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: CdkStepperModule, imports: [BidiModule] });
761
+ static ɵfac = i0.ɵɵngDeclareFactory({
762
+ minVersion: "12.0.0",
763
+ version: "20.2.0-next.2",
764
+ ngImport: i0,
765
+ type: CdkStepperModule,
766
+ deps: [],
767
+ target: i0.ɵɵFactoryTarget.NgModule
768
+ });
769
+ static ɵmod = i0.ɵɵngDeclareNgModule({
770
+ minVersion: "14.0.0",
771
+ version: "20.2.0-next.2",
772
+ ngImport: i0,
773
+ type: CdkStepperModule,
774
+ imports: [BidiModule, CdkStep, CdkStepper, CdkStepHeader, CdkStepLabel, CdkStepperNext, CdkStepperPrevious],
775
+ exports: [CdkStep, CdkStepper, CdkStepHeader, CdkStepLabel, CdkStepperNext, CdkStepperPrevious]
776
+ });
777
+ static ɵinj = i0.ɵɵngDeclareInjector({
778
+ minVersion: "12.0.0",
779
+ version: "20.2.0-next.2",
780
+ ngImport: i0,
781
+ type: CdkStepperModule,
782
+ imports: [BidiModule]
783
+ });
614
784
  }
615
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: CdkStepperModule, decorators: [{
616
- type: NgModule,
617
- args: [{
618
- imports: [
619
- BidiModule,
620
- CdkStep,
621
- CdkStepper,
622
- CdkStepHeader,
623
- CdkStepLabel,
624
- CdkStepperNext,
625
- CdkStepperPrevious,
626
- ],
627
- exports: [CdkStep, CdkStepper, CdkStepHeader, CdkStepLabel, CdkStepperNext, CdkStepperPrevious],
628
- }]
629
- }] });
785
+ i0.ɵɵngDeclareClassMetadata({
786
+ minVersion: "12.0.0",
787
+ version: "20.2.0-next.2",
788
+ ngImport: i0,
789
+ type: CdkStepperModule,
790
+ decorators: [{
791
+ type: NgModule,
792
+ args: [{
793
+ imports: [BidiModule, CdkStep, CdkStepper, CdkStepHeader, CdkStepLabel, CdkStepperNext, CdkStepperPrevious],
794
+ exports: [CdkStep, CdkStepper, CdkStepHeader, CdkStepLabel, CdkStepperNext, CdkStepperPrevious]
795
+ }]
796
+ }]
797
+ });
630
798
 
631
799
  export { CdkStep, CdkStepHeader, CdkStepLabel, CdkStepper, CdkStepperModule, CdkStepperNext, CdkStepperPrevious, STEPPER_GLOBAL_OPTIONS, STEP_STATE, StepperSelectionEvent };
632
800
  //# sourceMappingURL=stepper.mjs.map