@angular/aria 22.0.0-next.6 → 22.0.0-next.8

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 (105) hide show
  1. package/fesm2022/_accordion-chunk.mjs +1 -1
  2. package/fesm2022/_accordion-chunk.mjs.map +1 -1
  3. package/fesm2022/_click-event-manager-chunk.mjs +1 -1
  4. package/fesm2022/_click-event-manager-chunk.mjs.map +1 -1
  5. package/fesm2022/{_signal-like-chunk.mjs → _collection-chunk.mjs} +51 -3
  6. package/fesm2022/_collection-chunk.mjs.map +1 -0
  7. package/fesm2022/_deferred-content-chunk.mjs +16 -14
  8. package/fesm2022/_deferred-content-chunk.mjs.map +1 -1
  9. package/fesm2022/_expansion-chunk.mjs.map +1 -1
  10. package/fesm2022/_list-chunk.mjs +4 -1
  11. package/fesm2022/_list-chunk.mjs.map +1 -1
  12. package/fesm2022/_list-navigation-chunk.mjs +4 -2
  13. package/fesm2022/_list-navigation-chunk.mjs.map +1 -1
  14. package/fesm2022/_list-typeahead-chunk.mjs +1 -1
  15. package/fesm2022/_list-typeahead-chunk.mjs.map +1 -1
  16. package/fesm2022/_menu-chunk.mjs +1 -1
  17. package/fesm2022/_menu-chunk.mjs.map +1 -1
  18. package/fesm2022/{_combobox-listbox-chunk.mjs → _option-chunk.mjs} +6 -50
  19. package/fesm2022/_option-chunk.mjs.map +1 -0
  20. package/fesm2022/_tabs-chunk.mjs +22 -47
  21. package/fesm2022/_tabs-chunk.mjs.map +1 -1
  22. package/fesm2022/_toolbar-widget-group-chunk.mjs +1 -1
  23. package/fesm2022/_toolbar-widget-group-chunk.mjs.map +1 -1
  24. package/fesm2022/_transforms-chunk.mjs +8 -0
  25. package/fesm2022/_transforms-chunk.mjs.map +1 -0
  26. package/fesm2022/{_combobox-tree-chunk.mjs → _tree-chunk.mjs} +3 -48
  27. package/fesm2022/_tree-chunk.mjs.map +1 -0
  28. package/fesm2022/_widget-chunk.mjs +84 -21
  29. package/fesm2022/_widget-chunk.mjs.map +1 -1
  30. package/fesm2022/accordion-testing.mjs.map +1 -1
  31. package/fesm2022/accordion.mjs +32 -57
  32. package/fesm2022/accordion.mjs.map +1 -1
  33. package/fesm2022/aria.mjs +1 -1
  34. package/fesm2022/aria.mjs.map +1 -1
  35. package/fesm2022/combobox-testing.mjs +79 -0
  36. package/fesm2022/combobox-testing.mjs.map +1 -0
  37. package/fesm2022/combobox.mjs +287 -296
  38. package/fesm2022/combobox.mjs.map +1 -1
  39. package/fesm2022/grid-testing.mjs +80 -0
  40. package/fesm2022/grid-testing.mjs.map +1 -0
  41. package/fesm2022/grid.mjs +113 -86
  42. package/fesm2022/grid.mjs.map +1 -1
  43. package/fesm2022/listbox-testing.mjs +4 -0
  44. package/fesm2022/listbox-testing.mjs.map +1 -1
  45. package/fesm2022/listbox.mjs +231 -225
  46. package/fesm2022/listbox.mjs.map +1 -1
  47. package/fesm2022/menu-testing.mjs +11 -0
  48. package/fesm2022/menu-testing.mjs.map +1 -1
  49. package/fesm2022/menu.mjs +66 -84
  50. package/fesm2022/menu.mjs.map +1 -1
  51. package/fesm2022/private.mjs +166 -9
  52. package/fesm2022/private.mjs.map +1 -1
  53. package/fesm2022/tabs-testing.mjs.map +1 -1
  54. package/fesm2022/tabs.mjs +241 -222
  55. package/fesm2022/tabs.mjs.map +1 -1
  56. package/fesm2022/toolbar-testing.mjs +5 -1
  57. package/fesm2022/toolbar-testing.mjs.map +1 -1
  58. package/fesm2022/toolbar.mjs +23 -33
  59. package/fesm2022/toolbar.mjs.map +1 -1
  60. package/fesm2022/tree-testing.mjs +12 -0
  61. package/fesm2022/tree-testing.mjs.map +1 -1
  62. package/fesm2022/tree.mjs +160 -156
  63. package/fesm2022/tree.mjs.map +1 -1
  64. package/package.json +10 -2
  65. package/types/_accordion-chunk.d.ts +2 -2
  66. package/types/_collection-chunk.d.ts +42 -0
  67. package/types/_expansion-chunk.d.ts +1 -1
  68. package/types/_grid-chunk.d.ts +23 -9
  69. package/types/_keyboard-event-manager-chunk.d.ts +1 -1
  70. package/types/_list-chunk.d.ts +1 -1
  71. package/types/_list-navigation-chunk.d.ts +1 -1
  72. package/types/_listbox-chunk.d.ts +1 -1
  73. package/types/_menu-chunk.d.ts +1 -1
  74. package/types/_tabs-chunk.d.ts +8 -43
  75. package/types/_toolbar-chunk.d.ts +1 -1
  76. package/types/_tree-chunk.d.ts +1 -1
  77. package/types/accordion.d.ts +7 -13
  78. package/types/combobox-testing.d.ts +63 -0
  79. package/types/combobox.d.ts +96 -192
  80. package/types/grid-testing.d.ts +83 -0
  81. package/types/grid.d.ts +102 -90
  82. package/types/listbox-testing.d.ts +25 -0
  83. package/types/listbox.d.ts +60 -63
  84. package/types/menu-testing.d.ts +6 -0
  85. package/types/menu.d.ts +24 -17
  86. package/types/private.d.ts +115 -133
  87. package/types/tabs.d.ts +26 -24
  88. package/types/toolbar-testing.d.ts +4 -0
  89. package/types/toolbar.d.ts +5 -6
  90. package/types/tree-testing.d.ts +8 -0
  91. package/types/tree.d.ts +11 -15
  92. package/fesm2022/_combobox-chunk.mjs +0 -429
  93. package/fesm2022/_combobox-chunk.mjs.map +0 -1
  94. package/fesm2022/_combobox-listbox-chunk.mjs.map +0 -1
  95. package/fesm2022/_combobox-tree-chunk.mjs.map +0 -1
  96. package/fesm2022/_element-chunk.mjs +0 -6
  97. package/fesm2022/_element-chunk.mjs.map +0 -1
  98. package/fesm2022/_pointer-event-manager-chunk.mjs +0 -54
  99. package/fesm2022/_pointer-event-manager-chunk.mjs.map +0 -1
  100. package/fesm2022/_signal-like-chunk.mjs.map +0 -1
  101. package/resources/code-examples.db +0 -0
  102. package/types/_combobox-chunk.d.ts +0 -194
  103. package/types/_element-chunk.d.ts +0 -10
  104. package/types/_pointer-event-manager-chunk.d.ts +0 -34
  105. package/types/_signal-like-chunk.d.ts +0 -14
@@ -1,65 +1,15 @@
1
1
  import * as i0 from '@angular/core';
2
- import { InjectionToken, inject, signal, Directive, ElementRef, contentChild, input, booleanAttribute, computed, afterRenderEffect, model, untracked } from '@angular/core';
3
- import { Directionality } from '@angular/cdk/bidi';
4
- import { DeferredContentAware, DeferredContent } from './_deferred-content-chunk.mjs';
5
- import { ComboboxPattern, ComboboxDialogPattern } from './_combobox-chunk.mjs';
6
- import './_signal-like-chunk.mjs';
7
- import '@angular/core/primitives/signals';
8
- import './_pointer-event-manager-chunk.mjs';
2
+ import { inject, Renderer2, ElementRef, signal, input, booleanAttribute, model, computed, afterRenderEffect, Directive, InjectionToken } from '@angular/core';
3
+ import * as i1 from '@angular/aria/private';
4
+ import { DeferredContentAware, tabIndexTransform, ComboboxPattern, DeferredContent, ComboboxPopupPattern } from '@angular/aria/private';
5
+ export { DeferredContent as ɵɵDeferredContent, DeferredContentAware as ɵɵDeferredContentAware } from './_deferred-content-chunk.mjs';
9
6
 
10
- const COMBOBOX = new InjectionToken('COMBOBOX');
11
-
12
- class ComboboxPopup {
13
- combobox = inject(COMBOBOX, {
14
- optional: true
15
- });
16
- _controls = signal(undefined, ...(ngDevMode ? [{
17
- debugName: "_controls"
18
- }] : []));
19
- static ɵfac = i0.ɵɵngDeclareFactory({
20
- minVersion: "12.0.0",
21
- version: "22.0.0-next.6",
22
- ngImport: i0,
23
- type: ComboboxPopup,
24
- deps: [],
25
- target: i0.ɵɵFactoryTarget.Directive
26
- });
27
- static ɵdir = i0.ɵɵngDeclareDirective({
28
- minVersion: "14.0.0",
29
- version: "22.0.0-next.6",
30
- type: ComboboxPopup,
31
- isStandalone: true,
32
- selector: "[ngComboboxPopup]",
33
- exportAs: ["ngComboboxPopup"],
34
- ngImport: i0
35
- });
36
- }
37
- i0.ɵɵngDeclareClassMetadata({
38
- minVersion: "12.0.0",
39
- version: "22.0.0-next.6",
40
- ngImport: i0,
41
- type: ComboboxPopup,
42
- decorators: [{
43
- type: Directive,
44
- args: [{
45
- selector: '[ngComboboxPopup]',
46
- exportAs: 'ngComboboxPopup'
47
- }]
48
- }]
49
- });
50
-
51
- class Combobox {
52
- textDirection = inject(Directionality).valueSignal.asReadonly();
7
+ class Combobox extends DeferredContentAware {
8
+ _renderer = inject(Renderer2);
53
9
  _elementRef = inject(ElementRef);
54
10
  element = this._elementRef.nativeElement;
55
- _deferredContentAware = inject(DeferredContentAware, {
56
- optional: true
57
- });
58
- popup = contentChild(ComboboxPopup, ...(ngDevMode ? [{
59
- debugName: "popup"
60
- }] : []));
61
- filterMode = input('manual', ...(ngDevMode ? [{
62
- debugName: "filterMode"
11
+ _popup = signal(undefined, ...(ngDevMode ? [{
12
+ debugName: "_popup"
63
13
  }] : []));
64
14
  disabled = input(false, {
65
15
  ...(ngDevMode ? {
@@ -67,142 +17,167 @@ class Combobox {
67
17
  } : {}),
68
18
  transform: booleanAttribute
69
19
  });
70
- readonly = input(false, {
20
+ softDisabled = input(true, {
71
21
  ...(ngDevMode ? {
72
- debugName: "readonly"
22
+ debugName: "softDisabled"
73
23
  } : {}),
74
24
  transform: booleanAttribute
75
25
  });
76
- firstMatch = input(undefined, ...(ngDevMode ? [{
77
- debugName: "firstMatch"
78
- }] : []));
79
- expanded = computed(() => this.alwaysExpanded() || this._pattern.expanded(), ...(ngDevMode ? [{
80
- debugName: "expanded"
81
- }] : []));
82
26
  alwaysExpanded = input(false, {
83
27
  ...(ngDevMode ? {
84
28
  debugName: "alwaysExpanded"
85
29
  } : {}),
86
30
  transform: booleanAttribute
87
31
  });
88
- inputElement = computed(() => this._pattern.inputs.inputEl(), ...(ngDevMode ? [{
89
- debugName: "inputElement"
32
+ tabIndex = input(undefined, {
33
+ ...(ngDevMode ? {
34
+ debugName: "tabIndex"
35
+ } : {}),
36
+ alias: 'tabindex',
37
+ transform: tabIndexTransform
38
+ });
39
+ expanded = model(false, ...(ngDevMode ? [{
40
+ debugName: "expanded"
41
+ }] : []));
42
+ value = model('', ...(ngDevMode ? [{
43
+ debugName: "value"
44
+ }] : []));
45
+ inlineSuggestion = input(undefined, ...(ngDevMode ? [{
46
+ debugName: "inlineSuggestion"
90
47
  }] : []));
91
48
  _pattern = new ComboboxPattern({
92
49
  ...this,
93
- textDirection: this.textDirection,
94
- disabled: this.disabled,
95
- readonly: this.readonly,
96
- inputValue: signal(''),
97
- inputEl: signal(undefined),
98
- containerEl: () => this._elementRef.nativeElement,
99
- popupControls: () => this.popup()?._controls()
50
+ element: () => this.element,
51
+ expandable: () => true,
52
+ popup: computed(() => this._popup()?._pattern)
100
53
  });
101
54
  constructor() {
55
+ super();
56
+ afterRenderEffect(() => this._pattern.keyboardEventRelayEffect());
57
+ afterRenderEffect(() => this._pattern.closePopupOnBlurEffect());
102
58
  afterRenderEffect(() => {
103
- if (this.alwaysExpanded()) {
104
- this._pattern.expanded.set(true);
105
- }
106
- });
107
- afterRenderEffect(() => {
108
- if (!this._deferredContentAware?.contentVisible() && (this._pattern.isFocused() || this.alwaysExpanded())) {
109
- this._deferredContentAware?.contentVisible.set(true);
110
- }
59
+ this.contentVisible.set(this._pattern.isExpanded());
111
60
  });
61
+ if (this._pattern.isEditable()) {
62
+ afterRenderEffect(() => {
63
+ this._renderer.setProperty(this.element, 'value', this.value());
64
+ });
65
+ afterRenderEffect(() => {
66
+ this._pattern.highlightEffect();
67
+ });
68
+ }
112
69
  }
113
- open() {
114
- this._pattern.open({
115
- selected: true
116
- });
70
+ ngOnInit() {
71
+ if (this.alwaysExpanded()) {
72
+ this.expanded.set(true);
73
+ }
74
+ }
75
+ _registerPopup(popup) {
76
+ this._popup.set(popup);
117
77
  }
118
- close() {
119
- this._pattern.close();
78
+ _unregisterPopup() {
79
+ this._popup.set(undefined);
120
80
  }
121
81
  static ɵfac = i0.ɵɵngDeclareFactory({
122
82
  minVersion: "12.0.0",
123
- version: "22.0.0-next.6",
83
+ version: "22.0.0-next.10",
124
84
  ngImport: i0,
125
85
  type: Combobox,
126
86
  deps: [],
127
87
  target: i0.ɵɵFactoryTarget.Directive
128
88
  });
129
89
  static ɵdir = i0.ɵɵngDeclareDirective({
130
- minVersion: "17.2.0",
131
- version: "22.0.0-next.6",
90
+ minVersion: "17.1.0",
91
+ version: "22.0.0-next.10",
132
92
  type: Combobox,
133
93
  isStandalone: true,
134
94
  selector: "[ngCombobox]",
135
95
  inputs: {
136
- filterMode: {
137
- classPropertyName: "filterMode",
138
- publicName: "filterMode",
96
+ disabled: {
97
+ classPropertyName: "disabled",
98
+ publicName: "disabled",
139
99
  isSignal: true,
140
100
  isRequired: false,
141
101
  transformFunction: null
142
102
  },
143
- disabled: {
144
- classPropertyName: "disabled",
145
- publicName: "disabled",
103
+ softDisabled: {
104
+ classPropertyName: "softDisabled",
105
+ publicName: "softDisabled",
146
106
  isSignal: true,
147
107
  isRequired: false,
148
108
  transformFunction: null
149
109
  },
150
- readonly: {
151
- classPropertyName: "readonly",
152
- publicName: "readonly",
110
+ alwaysExpanded: {
111
+ classPropertyName: "alwaysExpanded",
112
+ publicName: "alwaysExpanded",
153
113
  isSignal: true,
154
114
  isRequired: false,
155
115
  transformFunction: null
156
116
  },
157
- firstMatch: {
158
- classPropertyName: "firstMatch",
159
- publicName: "firstMatch",
117
+ tabIndex: {
118
+ classPropertyName: "tabIndex",
119
+ publicName: "tabindex",
160
120
  isSignal: true,
161
121
  isRequired: false,
162
122
  transformFunction: null
163
123
  },
164
- alwaysExpanded: {
165
- classPropertyName: "alwaysExpanded",
166
- publicName: "alwaysExpanded",
124
+ expanded: {
125
+ classPropertyName: "expanded",
126
+ publicName: "expanded",
127
+ isSignal: true,
128
+ isRequired: false,
129
+ transformFunction: null
130
+ },
131
+ value: {
132
+ classPropertyName: "value",
133
+ publicName: "value",
134
+ isSignal: true,
135
+ isRequired: false,
136
+ transformFunction: null
137
+ },
138
+ inlineSuggestion: {
139
+ classPropertyName: "inlineSuggestion",
140
+ publicName: "inlineSuggestion",
167
141
  isSignal: true,
168
142
  isRequired: false,
169
143
  transformFunction: null
170
144
  }
171
145
  },
146
+ outputs: {
147
+ expanded: "expandedChange",
148
+ value: "valueChange"
149
+ },
172
150
  host: {
151
+ attributes: {
152
+ "role": "combobox"
153
+ },
173
154
  listeners: {
174
- "input": "_pattern.onInput($event)",
175
155
  "keydown": "_pattern.onKeydown($event)",
156
+ "focusin": "_pattern.onFocusin()",
157
+ "focusout": "_pattern.onFocusout($event)",
176
158
  "click": "_pattern.onClick($event)",
177
- "focusin": "_pattern.onFocusIn()",
178
- "focusout": "_pattern.onFocusOut($event)"
159
+ "input": "_pattern.onInput($event)"
179
160
  },
180
161
  properties: {
181
- "attr.data-expanded": "expanded()"
162
+ "attr.aria-autocomplete": "_pattern.autocomplete()",
163
+ "attr.aria-disabled": "_pattern.disabled()",
164
+ "attr.aria-expanded": "_pattern.isExpanded()",
165
+ "attr.aria-activedescendant": "_pattern.activeDescendant()",
166
+ "attr.aria-controls": "_pattern.popupId()",
167
+ "attr.aria-haspopup": "_pattern.popupType()",
168
+ "attr.tabindex": "disabled() && !softDisabled() ? -1 : (tabIndex() !== undefined ? tabIndex() : 0)",
169
+ "attr.disabled": "disabled() && !softDisabled() ? \"\" : null",
170
+ "attr.readonly": "disabled() && _pattern.isEditable() ? \"\" : null"
182
171
  }
183
172
  },
184
- providers: [{
185
- provide: COMBOBOX,
186
- useExisting: Combobox
187
- }],
188
- queries: [{
189
- propertyName: "popup",
190
- first: true,
191
- predicate: ComboboxPopup,
192
- descendants: true,
193
- isSignal: true
194
- }],
195
173
  exportAs: ["ngCombobox"],
196
- hostDirectives: [{
197
- directive: DeferredContentAware,
198
- inputs: ["preserveContent", "preserveContent"]
199
- }],
174
+ usesInheritance: true,
200
175
  ngImport: i0
201
176
  });
202
177
  }
203
178
  i0.ɵɵngDeclareClassMetadata({
204
179
  minVersion: "12.0.0",
205
- version: "22.0.0-next.6",
180
+ version: "22.0.0-next.10",
206
181
  ngImport: i0,
207
182
  type: Combobox,
208
183
  decorators: [{
@@ -210,292 +185,308 @@ i0.ɵɵngDeclareClassMetadata({
210
185
  args: [{
211
186
  selector: '[ngCombobox]',
212
187
  exportAs: 'ngCombobox',
213
- hostDirectives: [{
214
- directive: DeferredContentAware,
215
- inputs: ['preserveContent']
216
- }],
217
188
  host: {
218
- '[attr.data-expanded]': 'expanded()',
219
- '(input)': '_pattern.onInput($event)',
189
+ 'role': 'combobox',
190
+ '[attr.aria-autocomplete]': '_pattern.autocomplete()',
191
+ '[attr.aria-disabled]': '_pattern.disabled()',
192
+ '[attr.aria-expanded]': '_pattern.isExpanded()',
193
+ '[attr.aria-activedescendant]': '_pattern.activeDescendant()',
194
+ '[attr.aria-controls]': '_pattern.popupId()',
195
+ '[attr.aria-haspopup]': '_pattern.popupType()',
196
+ '[attr.tabindex]': 'disabled() && !softDisabled() ? -1 : (tabIndex() !== undefined ? tabIndex() : 0)',
197
+ '[attr.disabled]': 'disabled() && !softDisabled() ? "" : null',
198
+ '[attr.readonly]': 'disabled() && _pattern.isEditable() ? "" : null',
220
199
  '(keydown)': '_pattern.onKeydown($event)',
200
+ '(focusin)': '_pattern.onFocusin()',
201
+ '(focusout)': '_pattern.onFocusout($event)',
221
202
  '(click)': '_pattern.onClick($event)',
222
- '(focusin)': '_pattern.onFocusIn()',
223
- '(focusout)': '_pattern.onFocusOut($event)'
224
- },
225
- providers: [{
226
- provide: COMBOBOX,
227
- useExisting: Combobox
228
- }]
203
+ '(input)': '_pattern.onInput($event)'
204
+ }
229
205
  }]
230
206
  }],
231
207
  ctorParameters: () => [],
232
208
  propDecorators: {
233
- popup: [{
234
- type: i0.ContentChild,
235
- args: [i0.forwardRef(() => ComboboxPopup), {
236
- isSignal: true
209
+ disabled: [{
210
+ type: i0.Input,
211
+ args: [{
212
+ isSignal: true,
213
+ alias: "disabled",
214
+ required: false
237
215
  }]
238
216
  }],
239
- filterMode: [{
217
+ softDisabled: [{
240
218
  type: i0.Input,
241
219
  args: [{
242
220
  isSignal: true,
243
- alias: "filterMode",
221
+ alias: "softDisabled",
244
222
  required: false
245
223
  }]
246
224
  }],
247
- disabled: [{
225
+ alwaysExpanded: [{
248
226
  type: i0.Input,
249
227
  args: [{
250
228
  isSignal: true,
251
- alias: "disabled",
229
+ alias: "alwaysExpanded",
252
230
  required: false
253
231
  }]
254
232
  }],
255
- readonly: [{
233
+ tabIndex: [{
256
234
  type: i0.Input,
257
235
  args: [{
258
236
  isSignal: true,
259
- alias: "readonly",
237
+ alias: "tabindex",
260
238
  required: false
261
239
  }]
262
240
  }],
263
- firstMatch: [{
241
+ expanded: [{
264
242
  type: i0.Input,
265
243
  args: [{
266
244
  isSignal: true,
267
- alias: "firstMatch",
245
+ alias: "expanded",
268
246
  required: false
269
247
  }]
248
+ }, {
249
+ type: i0.Output,
250
+ args: ["expandedChange"]
270
251
  }],
271
- alwaysExpanded: [{
252
+ value: [{
272
253
  type: i0.Input,
273
254
  args: [{
274
255
  isSignal: true,
275
- alias: "alwaysExpanded",
256
+ alias: "value",
257
+ required: false
258
+ }]
259
+ }, {
260
+ type: i0.Output,
261
+ args: ["valueChange"]
262
+ }],
263
+ inlineSuggestion: [{
264
+ type: i0.Input,
265
+ args: [{
266
+ isSignal: true,
267
+ alias: "inlineSuggestion",
276
268
  required: false
277
269
  }]
278
270
  }]
279
271
  }
280
272
  });
281
273
 
282
- class ComboboxDialog {
283
- _elementRef = inject(ElementRef);
284
- element = this._elementRef.nativeElement;
285
- combobox = inject(Combobox);
286
- _popup = inject(ComboboxPopup, {
287
- optional: true
274
+ const COMBOBOX_POPUP = new InjectionToken('COMBOBOX_POPUP');
275
+
276
+ class ComboboxPopup {
277
+ _deferredContent = inject(DeferredContent);
278
+ combobox = input.required(...(ngDevMode ? [{
279
+ debugName: "combobox"
280
+ }] : []));
281
+ _widget = signal(undefined, ...(ngDevMode ? [{
282
+ debugName: "_widget"
283
+ }] : []));
284
+ controlTarget = computed(() => this._widget()?.element, ...(ngDevMode ? [{
285
+ debugName: "controlTarget"
286
+ }] : []));
287
+ popupId = computed(() => this._widget()?.popupId(), ...(ngDevMode ? [{
288
+ debugName: "popupId"
289
+ }] : []));
290
+ activeDescendant = computed(() => this._widget()?.activeDescendant(), ...(ngDevMode ? [{
291
+ debugName: "activeDescendant"
292
+ }] : []));
293
+ popupType = input('listbox', ...(ngDevMode ? [{
294
+ debugName: "popupType"
295
+ }] : []));
296
+ _pattern = new ComboboxPopupPattern({
297
+ ...this
288
298
  });
289
- _pattern;
290
- constructor() {
291
- this._pattern = new ComboboxDialogPattern({
292
- id: () => '',
293
- element: () => this._elementRef.nativeElement,
294
- combobox: this.combobox._pattern
295
- });
296
- if (this._popup) {
297
- this._popup._controls.set(this._pattern);
298
- }
299
- afterRenderEffect(() => {
300
- if (this._elementRef) {
301
- this.combobox._pattern.expanded() ? this._elementRef.nativeElement.showModal() : this._elementRef.nativeElement.close();
302
- }
303
- });
299
+ ngOnInit() {
300
+ this.combobox()._registerPopup(this);
301
+ this._deferredContent.deferredContentAware.set(this.combobox());
304
302
  }
305
- close() {
306
- this._popup?.combobox?._pattern.close();
303
+ ngOnDestroy() {
304
+ this.combobox()._unregisterPopup();
305
+ }
306
+ _registerWidget(widget) {
307
+ this._widget.set(widget);
308
+ }
309
+ _unregisterWidget() {
310
+ this._widget.set(undefined);
307
311
  }
308
312
  static ɵfac = i0.ɵɵngDeclareFactory({
309
313
  minVersion: "12.0.0",
310
- version: "22.0.0-next.6",
314
+ version: "22.0.0-next.10",
311
315
  ngImport: i0,
312
- type: ComboboxDialog,
316
+ type: ComboboxPopup,
313
317
  deps: [],
314
318
  target: i0.ɵɵFactoryTarget.Directive
315
319
  });
316
320
  static ɵdir = i0.ɵɵngDeclareDirective({
317
- minVersion: "14.0.0",
318
- version: "22.0.0-next.6",
319
- type: ComboboxDialog,
321
+ minVersion: "17.1.0",
322
+ version: "22.0.0-next.10",
323
+ type: ComboboxPopup,
320
324
  isStandalone: true,
321
- selector: "dialog[ngComboboxDialog]",
322
- host: {
323
- listeners: {
324
- "keydown": "_pattern.onKeydown($event)",
325
- "click": "_pattern.onClick($event)"
325
+ selector: "ng-template[ngComboboxPopup]",
326
+ inputs: {
327
+ combobox: {
328
+ classPropertyName: "combobox",
329
+ publicName: "combobox",
330
+ isSignal: true,
331
+ isRequired: true,
332
+ transformFunction: null
326
333
  },
327
- properties: {
328
- "attr.data-open": "combobox._pattern.expanded()"
334
+ popupType: {
335
+ classPropertyName: "popupType",
336
+ publicName: "popupType",
337
+ isSignal: true,
338
+ isRequired: false,
339
+ transformFunction: null
329
340
  }
330
341
  },
331
- exportAs: ["ngComboboxDialog"],
342
+ providers: [{
343
+ provide: COMBOBOX_POPUP,
344
+ useExisting: ComboboxPopup
345
+ }],
346
+ exportAs: ["ngComboboxPopup"],
332
347
  hostDirectives: [{
333
- directive: ComboboxPopup
348
+ directive: i1.DeferredContent
334
349
  }],
335
350
  ngImport: i0
336
351
  });
337
352
  }
338
353
  i0.ɵɵngDeclareClassMetadata({
339
354
  minVersion: "12.0.0",
340
- version: "22.0.0-next.6",
355
+ version: "22.0.0-next.10",
341
356
  ngImport: i0,
342
- type: ComboboxDialog,
357
+ type: ComboboxPopup,
343
358
  decorators: [{
344
359
  type: Directive,
345
360
  args: [{
346
- selector: 'dialog[ngComboboxDialog]',
347
- exportAs: 'ngComboboxDialog',
348
- host: {
349
- '[attr.data-open]': 'combobox._pattern.expanded()',
350
- '(keydown)': '_pattern.onKeydown($event)',
351
- '(click)': '_pattern.onClick($event)'
352
- },
353
- hostDirectives: [ComboboxPopup]
361
+ selector: 'ng-template[ngComboboxPopup]',
362
+ exportAs: 'ngComboboxPopup',
363
+ hostDirectives: [DeferredContent],
364
+ providers: [{
365
+ provide: COMBOBOX_POPUP,
366
+ useExisting: ComboboxPopup
367
+ }]
354
368
  }]
355
369
  }],
356
- ctorParameters: () => []
370
+ propDecorators: {
371
+ combobox: [{
372
+ type: i0.Input,
373
+ args: [{
374
+ isSignal: true,
375
+ alias: "combobox",
376
+ required: true
377
+ }]
378
+ }],
379
+ popupType: [{
380
+ type: i0.Input,
381
+ args: [{
382
+ isSignal: true,
383
+ alias: "popupType",
384
+ required: false
385
+ }]
386
+ }]
387
+ }
357
388
  });
358
389
 
359
- class ComboboxInput {
390
+ class ComboboxWidget {
360
391
  _elementRef = inject(ElementRef);
392
+ _popup = inject(COMBOBOX_POPUP);
361
393
  element = this._elementRef.nativeElement;
362
- combobox = inject(Combobox);
363
- value = model('', ...(ngDevMode ? [{
364
- debugName: "value"
394
+ popupId = signal(undefined, ...(ngDevMode ? [{
395
+ debugName: "popupId"
396
+ }] : []));
397
+ activeDescendant = input(undefined, ...(ngDevMode ? [{
398
+ debugName: "activeDescendant"
365
399
  }] : []));
400
+ _observer;
366
401
  constructor() {
367
- this.combobox._pattern.inputs.inputEl.set(this._elementRef.nativeElement);
368
- this.combobox._pattern.inputs.inputValue = this.value;
369
- const controls = this.combobox.popup()?._controls();
370
- if (controls instanceof ComboboxDialogPattern) {
371
- return;
372
- }
373
- afterRenderEffect(() => {
374
- this.value();
375
- controls?.items();
376
- untracked(() => this.combobox._pattern.onFilter());
402
+ const el = this.element;
403
+ this._observer = new MutationObserver(mutations => {
404
+ for (const mutation of mutations) {
405
+ if (mutation.attributeName === 'id') {
406
+ this.popupId.set(el.id);
407
+ }
408
+ }
409
+ });
410
+ this._observer.observe(el, {
411
+ attributes: true,
412
+ attributeFilter: ['id']
377
413
  });
378
414
  }
415
+ ngOnInit() {
416
+ this.popupId.set(this.element.id);
417
+ this._popup._registerWidget(this);
418
+ }
419
+ ngOnDestroy() {
420
+ this._observer?.disconnect();
421
+ this._popup._unregisterWidget();
422
+ }
423
+ onFocusin() {
424
+ this._popup._pattern.onFocusin();
425
+ }
426
+ onFocusout(event) {
427
+ this._popup._pattern.onFocusout(event);
428
+ }
379
429
  static ɵfac = i0.ɵɵngDeclareFactory({
380
430
  minVersion: "12.0.0",
381
- version: "22.0.0-next.6",
431
+ version: "22.0.0-next.10",
382
432
  ngImport: i0,
383
- type: ComboboxInput,
433
+ type: ComboboxWidget,
384
434
  deps: [],
385
435
  target: i0.ɵɵFactoryTarget.Directive
386
436
  });
387
437
  static ɵdir = i0.ɵɵngDeclareDirective({
388
438
  minVersion: "17.1.0",
389
- version: "22.0.0-next.6",
390
- type: ComboboxInput,
439
+ version: "22.0.0-next.10",
440
+ type: ComboboxWidget,
391
441
  isStandalone: true,
392
- selector: "input[ngComboboxInput]",
442
+ selector: "[ngComboboxWidget]",
393
443
  inputs: {
394
- value: {
395
- classPropertyName: "value",
396
- publicName: "value",
444
+ activeDescendant: {
445
+ classPropertyName: "activeDescendant",
446
+ publicName: "activeDescendant",
397
447
  isSignal: true,
398
448
  isRequired: false,
399
449
  transformFunction: null
400
450
  }
401
451
  },
402
- outputs: {
403
- value: "valueChange"
404
- },
405
452
  host: {
406
- attributes: {
407
- "role": "combobox"
408
- },
409
- properties: {
410
- "value": "value()",
411
- "attr.aria-disabled": "combobox._pattern.disabled()",
412
- "attr.aria-expanded": "combobox._pattern.expanded()",
413
- "attr.aria-activedescendant": "combobox._pattern.activeDescendant()",
414
- "attr.aria-controls": "combobox._pattern.popupId()",
415
- "attr.aria-haspopup": "combobox._pattern.hasPopup()",
416
- "attr.aria-autocomplete": "combobox._pattern.autocomplete()",
417
- "attr.readonly": "combobox._pattern.readonly()"
453
+ listeners: {
454
+ "focusin": "onFocusin()",
455
+ "focusout": "onFocusout($event)"
418
456
  }
419
457
  },
420
- exportAs: ["ngComboboxInput"],
458
+ exportAs: ["ngComboboxWidget"],
421
459
  ngImport: i0
422
460
  });
423
461
  }
424
462
  i0.ɵɵngDeclareClassMetadata({
425
463
  minVersion: "12.0.0",
426
- version: "22.0.0-next.6",
464
+ version: "22.0.0-next.10",
427
465
  ngImport: i0,
428
- type: ComboboxInput,
466
+ type: ComboboxWidget,
429
467
  decorators: [{
430
468
  type: Directive,
431
469
  args: [{
432
- selector: 'input[ngComboboxInput]',
433
- exportAs: 'ngComboboxInput',
470
+ selector: '[ngComboboxWidget]',
471
+ exportAs: 'ngComboboxWidget',
434
472
  host: {
435
- 'role': 'combobox',
436
- '[value]': 'value()',
437
- '[attr.aria-disabled]': 'combobox._pattern.disabled()',
438
- '[attr.aria-expanded]': 'combobox._pattern.expanded()',
439
- '[attr.aria-activedescendant]': 'combobox._pattern.activeDescendant()',
440
- '[attr.aria-controls]': 'combobox._pattern.popupId()',
441
- '[attr.aria-haspopup]': 'combobox._pattern.hasPopup()',
442
- '[attr.aria-autocomplete]': 'combobox._pattern.autocomplete()',
443
- '[attr.readonly]': 'combobox._pattern.readonly()'
473
+ '(focusin)': 'onFocusin()',
474
+ '(focusout)': 'onFocusout($event)'
444
475
  }
445
476
  }]
446
477
  }],
447
478
  ctorParameters: () => [],
448
479
  propDecorators: {
449
- value: [{
480
+ activeDescendant: [{
450
481
  type: i0.Input,
451
482
  args: [{
452
483
  isSignal: true,
453
- alias: "value",
484
+ alias: "activeDescendant",
454
485
  required: false
455
486
  }]
456
- }, {
457
- type: i0.Output,
458
- args: ["valueChange"]
459
487
  }]
460
488
  }
461
489
  });
462
490
 
463
- class ComboboxPopupContainer {
464
- static ɵfac = i0.ɵɵngDeclareFactory({
465
- minVersion: "12.0.0",
466
- version: "22.0.0-next.6",
467
- ngImport: i0,
468
- type: ComboboxPopupContainer,
469
- deps: [],
470
- target: i0.ɵɵFactoryTarget.Directive
471
- });
472
- static ɵdir = i0.ɵɵngDeclareDirective({
473
- minVersion: "14.0.0",
474
- version: "22.0.0-next.6",
475
- type: ComboboxPopupContainer,
476
- isStandalone: true,
477
- selector: "ng-template[ngComboboxPopupContainer]",
478
- exportAs: ["ngComboboxPopupContainer"],
479
- hostDirectives: [{
480
- directive: DeferredContent
481
- }],
482
- ngImport: i0
483
- });
484
- }
485
- i0.ɵɵngDeclareClassMetadata({
486
- minVersion: "12.0.0",
487
- version: "22.0.0-next.6",
488
- ngImport: i0,
489
- type: ComboboxPopupContainer,
490
- decorators: [{
491
- type: Directive,
492
- args: [{
493
- selector: 'ng-template[ngComboboxPopupContainer]',
494
- exportAs: 'ngComboboxPopupContainer',
495
- hostDirectives: [DeferredContent]
496
- }]
497
- }]
498
- });
499
-
500
- export { Combobox, ComboboxDialog, ComboboxInput, ComboboxPopup, ComboboxPopupContainer, DeferredContent as ɵɵDeferredContent, DeferredContentAware as ɵɵDeferredContentAware };
491
+ export { Combobox, ComboboxPopup, ComboboxWidget };
501
492
  //# sourceMappingURL=combobox.mjs.map