@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.
- package/fesm2022/_accordion-chunk.mjs +1 -1
- package/fesm2022/_accordion-chunk.mjs.map +1 -1
- package/fesm2022/_click-event-manager-chunk.mjs +1 -1
- package/fesm2022/_click-event-manager-chunk.mjs.map +1 -1
- package/fesm2022/{_signal-like-chunk.mjs → _collection-chunk.mjs} +51 -3
- package/fesm2022/_collection-chunk.mjs.map +1 -0
- package/fesm2022/_deferred-content-chunk.mjs +16 -14
- package/fesm2022/_deferred-content-chunk.mjs.map +1 -1
- package/fesm2022/_expansion-chunk.mjs.map +1 -1
- package/fesm2022/_list-chunk.mjs +4 -1
- package/fesm2022/_list-chunk.mjs.map +1 -1
- package/fesm2022/_list-navigation-chunk.mjs +4 -2
- package/fesm2022/_list-navigation-chunk.mjs.map +1 -1
- package/fesm2022/_list-typeahead-chunk.mjs +1 -1
- package/fesm2022/_list-typeahead-chunk.mjs.map +1 -1
- package/fesm2022/_menu-chunk.mjs +1 -1
- package/fesm2022/_menu-chunk.mjs.map +1 -1
- package/fesm2022/{_combobox-listbox-chunk.mjs → _option-chunk.mjs} +6 -50
- package/fesm2022/_option-chunk.mjs.map +1 -0
- package/fesm2022/_tabs-chunk.mjs +22 -47
- package/fesm2022/_tabs-chunk.mjs.map +1 -1
- package/fesm2022/_toolbar-widget-group-chunk.mjs +1 -1
- package/fesm2022/_toolbar-widget-group-chunk.mjs.map +1 -1
- package/fesm2022/_transforms-chunk.mjs +8 -0
- package/fesm2022/_transforms-chunk.mjs.map +1 -0
- package/fesm2022/{_combobox-tree-chunk.mjs → _tree-chunk.mjs} +3 -48
- package/fesm2022/_tree-chunk.mjs.map +1 -0
- package/fesm2022/_widget-chunk.mjs +84 -21
- package/fesm2022/_widget-chunk.mjs.map +1 -1
- package/fesm2022/accordion-testing.mjs.map +1 -1
- package/fesm2022/accordion.mjs +32 -57
- package/fesm2022/accordion.mjs.map +1 -1
- package/fesm2022/aria.mjs +1 -1
- package/fesm2022/aria.mjs.map +1 -1
- package/fesm2022/combobox-testing.mjs +79 -0
- package/fesm2022/combobox-testing.mjs.map +1 -0
- package/fesm2022/combobox.mjs +287 -296
- package/fesm2022/combobox.mjs.map +1 -1
- package/fesm2022/grid-testing.mjs +80 -0
- package/fesm2022/grid-testing.mjs.map +1 -0
- package/fesm2022/grid.mjs +113 -86
- package/fesm2022/grid.mjs.map +1 -1
- package/fesm2022/listbox-testing.mjs +4 -0
- package/fesm2022/listbox-testing.mjs.map +1 -1
- package/fesm2022/listbox.mjs +231 -225
- package/fesm2022/listbox.mjs.map +1 -1
- package/fesm2022/menu-testing.mjs +11 -0
- package/fesm2022/menu-testing.mjs.map +1 -1
- package/fesm2022/menu.mjs +66 -84
- package/fesm2022/menu.mjs.map +1 -1
- package/fesm2022/private.mjs +166 -9
- package/fesm2022/private.mjs.map +1 -1
- package/fesm2022/tabs-testing.mjs.map +1 -1
- package/fesm2022/tabs.mjs +241 -222
- package/fesm2022/tabs.mjs.map +1 -1
- package/fesm2022/toolbar-testing.mjs +5 -1
- package/fesm2022/toolbar-testing.mjs.map +1 -1
- package/fesm2022/toolbar.mjs +23 -33
- package/fesm2022/toolbar.mjs.map +1 -1
- package/fesm2022/tree-testing.mjs +12 -0
- package/fesm2022/tree-testing.mjs.map +1 -1
- package/fesm2022/tree.mjs +160 -156
- package/fesm2022/tree.mjs.map +1 -1
- package/package.json +10 -2
- package/types/_accordion-chunk.d.ts +2 -2
- package/types/_collection-chunk.d.ts +42 -0
- package/types/_expansion-chunk.d.ts +1 -1
- package/types/_grid-chunk.d.ts +23 -9
- package/types/_keyboard-event-manager-chunk.d.ts +1 -1
- package/types/_list-chunk.d.ts +1 -1
- package/types/_list-navigation-chunk.d.ts +1 -1
- package/types/_listbox-chunk.d.ts +1 -1
- package/types/_menu-chunk.d.ts +1 -1
- package/types/_tabs-chunk.d.ts +8 -43
- package/types/_toolbar-chunk.d.ts +1 -1
- package/types/_tree-chunk.d.ts +1 -1
- package/types/accordion.d.ts +7 -13
- package/types/combobox-testing.d.ts +63 -0
- package/types/combobox.d.ts +96 -192
- package/types/grid-testing.d.ts +83 -0
- package/types/grid.d.ts +102 -90
- package/types/listbox-testing.d.ts +25 -0
- package/types/listbox.d.ts +60 -63
- package/types/menu-testing.d.ts +6 -0
- package/types/menu.d.ts +24 -17
- package/types/private.d.ts +115 -133
- package/types/tabs.d.ts +26 -24
- package/types/toolbar-testing.d.ts +4 -0
- package/types/toolbar.d.ts +5 -6
- package/types/tree-testing.d.ts +8 -0
- package/types/tree.d.ts +11 -15
- package/fesm2022/_combobox-chunk.mjs +0 -429
- package/fesm2022/_combobox-chunk.mjs.map +0 -1
- package/fesm2022/_combobox-listbox-chunk.mjs.map +0 -1
- package/fesm2022/_combobox-tree-chunk.mjs.map +0 -1
- package/fesm2022/_element-chunk.mjs +0 -6
- package/fesm2022/_element-chunk.mjs.map +0 -1
- package/fesm2022/_pointer-event-manager-chunk.mjs +0 -54
- package/fesm2022/_pointer-event-manager-chunk.mjs.map +0 -1
- package/fesm2022/_signal-like-chunk.mjs.map +0 -1
- package/resources/code-examples.db +0 -0
- package/types/_combobox-chunk.d.ts +0 -194
- package/types/_element-chunk.d.ts +0 -10
- package/types/_pointer-event-manager-chunk.d.ts +0 -34
- package/types/_signal-like-chunk.d.ts +0 -14
package/fesm2022/combobox.mjs
CHANGED
|
@@ -1,65 +1,15 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import {
|
|
3
|
-
import
|
|
4
|
-
import { DeferredContentAware, DeferredContent } from '
|
|
5
|
-
|
|
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
|
-
|
|
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
|
-
|
|
56
|
-
|
|
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
|
-
|
|
20
|
+
softDisabled = input(true, {
|
|
71
21
|
...(ngDevMode ? {
|
|
72
|
-
debugName: "
|
|
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
|
-
|
|
89
|
-
|
|
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
|
-
|
|
94
|
-
|
|
95
|
-
|
|
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
|
-
|
|
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
|
-
|
|
114
|
-
this.
|
|
115
|
-
|
|
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
|
-
|
|
119
|
-
this.
|
|
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.
|
|
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.
|
|
131
|
-
version: "22.0.0-next.
|
|
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
|
-
|
|
137
|
-
classPropertyName: "
|
|
138
|
-
publicName: "
|
|
96
|
+
disabled: {
|
|
97
|
+
classPropertyName: "disabled",
|
|
98
|
+
publicName: "disabled",
|
|
139
99
|
isSignal: true,
|
|
140
100
|
isRequired: false,
|
|
141
101
|
transformFunction: null
|
|
142
102
|
},
|
|
143
|
-
|
|
144
|
-
classPropertyName: "
|
|
145
|
-
publicName: "
|
|
103
|
+
softDisabled: {
|
|
104
|
+
classPropertyName: "softDisabled",
|
|
105
|
+
publicName: "softDisabled",
|
|
146
106
|
isSignal: true,
|
|
147
107
|
isRequired: false,
|
|
148
108
|
transformFunction: null
|
|
149
109
|
},
|
|
150
|
-
|
|
151
|
-
classPropertyName: "
|
|
152
|
-
publicName: "
|
|
110
|
+
alwaysExpanded: {
|
|
111
|
+
classPropertyName: "alwaysExpanded",
|
|
112
|
+
publicName: "alwaysExpanded",
|
|
153
113
|
isSignal: true,
|
|
154
114
|
isRequired: false,
|
|
155
115
|
transformFunction: null
|
|
156
116
|
},
|
|
157
|
-
|
|
158
|
-
classPropertyName: "
|
|
159
|
-
publicName: "
|
|
117
|
+
tabIndex: {
|
|
118
|
+
classPropertyName: "tabIndex",
|
|
119
|
+
publicName: "tabindex",
|
|
160
120
|
isSignal: true,
|
|
161
121
|
isRequired: false,
|
|
162
122
|
transformFunction: null
|
|
163
123
|
},
|
|
164
|
-
|
|
165
|
-
classPropertyName: "
|
|
166
|
-
publicName: "
|
|
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
|
-
"
|
|
178
|
-
"focusout": "_pattern.onFocusOut($event)"
|
|
159
|
+
"input": "_pattern.onInput($event)"
|
|
179
160
|
},
|
|
180
161
|
properties: {
|
|
181
|
-
"attr.
|
|
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
|
-
|
|
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.
|
|
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
|
-
'
|
|
219
|
-
'
|
|
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
|
-
'(
|
|
223
|
-
|
|
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
|
-
|
|
234
|
-
type: i0.
|
|
235
|
-
args: [
|
|
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
|
-
|
|
217
|
+
softDisabled: [{
|
|
240
218
|
type: i0.Input,
|
|
241
219
|
args: [{
|
|
242
220
|
isSignal: true,
|
|
243
|
-
alias: "
|
|
221
|
+
alias: "softDisabled",
|
|
244
222
|
required: false
|
|
245
223
|
}]
|
|
246
224
|
}],
|
|
247
|
-
|
|
225
|
+
alwaysExpanded: [{
|
|
248
226
|
type: i0.Input,
|
|
249
227
|
args: [{
|
|
250
228
|
isSignal: true,
|
|
251
|
-
alias: "
|
|
229
|
+
alias: "alwaysExpanded",
|
|
252
230
|
required: false
|
|
253
231
|
}]
|
|
254
232
|
}],
|
|
255
|
-
|
|
233
|
+
tabIndex: [{
|
|
256
234
|
type: i0.Input,
|
|
257
235
|
args: [{
|
|
258
236
|
isSignal: true,
|
|
259
|
-
alias: "
|
|
237
|
+
alias: "tabindex",
|
|
260
238
|
required: false
|
|
261
239
|
}]
|
|
262
240
|
}],
|
|
263
|
-
|
|
241
|
+
expanded: [{
|
|
264
242
|
type: i0.Input,
|
|
265
243
|
args: [{
|
|
266
244
|
isSignal: true,
|
|
267
|
-
alias: "
|
|
245
|
+
alias: "expanded",
|
|
268
246
|
required: false
|
|
269
247
|
}]
|
|
248
|
+
}, {
|
|
249
|
+
type: i0.Output,
|
|
250
|
+
args: ["expandedChange"]
|
|
270
251
|
}],
|
|
271
|
-
|
|
252
|
+
value: [{
|
|
272
253
|
type: i0.Input,
|
|
273
254
|
args: [{
|
|
274
255
|
isSignal: true,
|
|
275
|
-
alias: "
|
|
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
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
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
|
-
|
|
290
|
-
|
|
291
|
-
this.
|
|
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
|
-
|
|
306
|
-
this.
|
|
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.
|
|
314
|
+
version: "22.0.0-next.10",
|
|
311
315
|
ngImport: i0,
|
|
312
|
-
type:
|
|
316
|
+
type: ComboboxPopup,
|
|
313
317
|
deps: [],
|
|
314
318
|
target: i0.ɵɵFactoryTarget.Directive
|
|
315
319
|
});
|
|
316
320
|
static ɵdir = i0.ɵɵngDeclareDirective({
|
|
317
|
-
minVersion: "
|
|
318
|
-
version: "22.0.0-next.
|
|
319
|
-
type:
|
|
321
|
+
minVersion: "17.1.0",
|
|
322
|
+
version: "22.0.0-next.10",
|
|
323
|
+
type: ComboboxPopup,
|
|
320
324
|
isStandalone: true,
|
|
321
|
-
selector: "
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
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
|
-
|
|
328
|
-
|
|
334
|
+
popupType: {
|
|
335
|
+
classPropertyName: "popupType",
|
|
336
|
+
publicName: "popupType",
|
|
337
|
+
isSignal: true,
|
|
338
|
+
isRequired: false,
|
|
339
|
+
transformFunction: null
|
|
329
340
|
}
|
|
330
341
|
},
|
|
331
|
-
|
|
342
|
+
providers: [{
|
|
343
|
+
provide: COMBOBOX_POPUP,
|
|
344
|
+
useExisting: ComboboxPopup
|
|
345
|
+
}],
|
|
346
|
+
exportAs: ["ngComboboxPopup"],
|
|
332
347
|
hostDirectives: [{
|
|
333
|
-
directive:
|
|
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.
|
|
355
|
+
version: "22.0.0-next.10",
|
|
341
356
|
ngImport: i0,
|
|
342
|
-
type:
|
|
357
|
+
type: ComboboxPopup,
|
|
343
358
|
decorators: [{
|
|
344
359
|
type: Directive,
|
|
345
360
|
args: [{
|
|
346
|
-
selector: '
|
|
347
|
-
exportAs: '
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
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
|
-
|
|
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
|
|
390
|
+
class ComboboxWidget {
|
|
360
391
|
_elementRef = inject(ElementRef);
|
|
392
|
+
_popup = inject(COMBOBOX_POPUP);
|
|
361
393
|
element = this._elementRef.nativeElement;
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
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.
|
|
368
|
-
this.
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
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.
|
|
431
|
+
version: "22.0.0-next.10",
|
|
382
432
|
ngImport: i0,
|
|
383
|
-
type:
|
|
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.
|
|
390
|
-
type:
|
|
439
|
+
version: "22.0.0-next.10",
|
|
440
|
+
type: ComboboxWidget,
|
|
391
441
|
isStandalone: true,
|
|
392
|
-
selector: "
|
|
442
|
+
selector: "[ngComboboxWidget]",
|
|
393
443
|
inputs: {
|
|
394
|
-
|
|
395
|
-
classPropertyName: "
|
|
396
|
-
publicName: "
|
|
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
|
-
|
|
407
|
-
"
|
|
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: ["
|
|
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.
|
|
464
|
+
version: "22.0.0-next.10",
|
|
427
465
|
ngImport: i0,
|
|
428
|
-
type:
|
|
466
|
+
type: ComboboxWidget,
|
|
429
467
|
decorators: [{
|
|
430
468
|
type: Directive,
|
|
431
469
|
args: [{
|
|
432
|
-
selector: '
|
|
433
|
-
exportAs: '
|
|
470
|
+
selector: '[ngComboboxWidget]',
|
|
471
|
+
exportAs: 'ngComboboxWidget',
|
|
434
472
|
host: {
|
|
435
|
-
'
|
|
436
|
-
'
|
|
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
|
-
|
|
480
|
+
activeDescendant: [{
|
|
450
481
|
type: i0.Input,
|
|
451
482
|
args: [{
|
|
452
483
|
isSignal: true,
|
|
453
|
-
alias: "
|
|
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
|
-
|
|
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
|