@angular/aria 22.0.0-next.7 → 22.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.
- package/fesm2022/_accordion-chunk.mjs +11 -1
- package/fesm2022/_accordion-chunk.mjs.map +1 -1
- package/fesm2022/_click-event-manager-chunk.mjs +1 -1
- package/fesm2022/_deferred-content-chunk.mjs +6 -6
- package/fesm2022/_list-chunk.mjs +4 -1
- package/fesm2022/_list-chunk.mjs.map +1 -1
- package/fesm2022/_list-navigation-chunk.mjs +1 -1
- package/fesm2022/_list-typeahead-chunk.mjs +1 -1
- package/fesm2022/_menu-chunk.mjs +10 -1
- package/fesm2022/_menu-chunk.mjs.map +1 -1
- package/fesm2022/{_combobox-listbox-chunk.mjs → _option-chunk.mjs} +13 -50
- package/fesm2022/_option-chunk.mjs.map +1 -0
- package/fesm2022/_tabs-chunk.mjs +1 -1
- package/fesm2022/_toolbar-widget-group-chunk.mjs +10 -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} +8 -48
- package/fesm2022/_tree-chunk.mjs.map +1 -0
- package/fesm2022/{_signal-like-chunk.mjs → _violations-chunk.mjs} +60 -2
- package/fesm2022/_violations-chunk.mjs.map +1 -0
- package/fesm2022/_widget-chunk.mjs +46 -15
- package/fesm2022/_widget-chunk.mjs.map +1 -1
- package/fesm2022/accordion.mjs +116 -89
- 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 +273 -307
- package/fesm2022/combobox.mjs.map +1 -1
- package/fesm2022/grid-testing.mjs +8 -0
- package/fesm2022/grid-testing.mjs.map +1 -1
- package/fesm2022/grid.mjs +75 -87
- 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 +192 -215
- 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 +60 -66
- package/fesm2022/menu.mjs.map +1 -1
- package/fesm2022/private.mjs +19 -13
- package/fesm2022/private.mjs.map +1 -1
- package/fesm2022/tabs.mjs +172 -115
- 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 +41 -30
- 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 +126 -156
- package/fesm2022/tree.mjs.map +1 -1
- package/package.json +6 -6
- package/types/_accordion-chunk.d.ts +4 -2
- package/types/_collection-chunk.d.ts +42 -0
- package/types/_expansion-chunk.d.ts +1 -1
- package/types/_grid-chunk.d.ts +11 -3
- 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 +3 -1
- package/types/_tabs-chunk.d.ts +1 -1
- package/types/_toolbar-chunk.d.ts +3 -1
- package/types/_tree-chunk.d.ts +1 -1
- package/types/accordion.d.ts +10 -18
- package/types/combobox-testing.d.ts +63 -0
- package/types/combobox.d.ts +96 -193
- package/types/grid-testing.d.ts +4 -0
- package/types/grid.d.ts +99 -103
- package/types/listbox-testing.d.ts +25 -0
- package/types/listbox.d.ts +53 -62
- package/types/menu-testing.d.ts +6 -0
- package/types/menu.d.ts +17 -23
- package/types/private.d.ts +26 -137
- package/types/tabs.d.ts +69 -80
- package/types/toolbar-testing.d.ts +4 -0
- package/types/toolbar.d.ts +6 -12
- package/types/tree-testing.d.ts +8 -0
- package/types/tree.d.ts +7 -20
- package/fesm2022/_combobox-chunk.mjs +0 -478
- 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/_signal-like-chunk.mjs.map +0 -1
- package/fesm2022/simple-combobox.mjs +0 -443
- package/fesm2022/simple-combobox.mjs.map +0 -1
- package/types/_combobox-chunk.d.ts +0 -224
- package/types/_element-chunk.d.ts +0 -10
- package/types/_signal-like-chunk.d.ts +0 -14
- package/types/simple-combobox.d.ts +0 -124
package/types/combobox.d.ts
CHANGED
|
@@ -1,225 +1,128 @@
|
|
|
1
1
|
import * as _angular_core from '@angular/core';
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import { DeferredContentAware,
|
|
5
|
-
|
|
6
|
-
import './_signal-like-chunk.js';
|
|
7
|
-
import './_list-chunk.js';
|
|
8
|
-
import './_list-navigation-chunk.js';
|
|
2
|
+
import { OnInit, OnDestroy } from '@angular/core';
|
|
3
|
+
import * as i1 from '@angular/aria/private';
|
|
4
|
+
import { ComboboxPopupPattern, DeferredContentAware, ComboboxPattern } from '@angular/aria/private';
|
|
5
|
+
export { DeferredContent as ɵɵDeferredContent, DeferredContentAware as ɵɵDeferredContentAware } from './_deferred-content-chunk.js';
|
|
9
6
|
|
|
10
7
|
/**
|
|
11
|
-
* Identifies an element as a
|
|
8
|
+
* Identifies an element as a widget within a combobox popup.
|
|
12
9
|
*
|
|
13
|
-
* This directive
|
|
14
|
-
*
|
|
15
|
-
*
|
|
16
|
-
* exposing the popup's control pattern to the parent combobox.
|
|
17
|
-
*
|
|
18
|
-
* @developerPreview 21.0
|
|
19
|
-
*
|
|
20
|
-
* @see [Combobox](guide/aria/combobox)
|
|
21
|
-
* @see [Select](guide/aria/select)
|
|
22
|
-
* @see [Multiselect](guide/aria/multiselect)
|
|
23
|
-
* @see [Autocomplete](guide/aria/autocomplete)
|
|
24
|
-
*/
|
|
25
|
-
declare class ComboboxPopup<V> {
|
|
26
|
-
/** The combobox that the popup belongs to. */
|
|
27
|
-
readonly combobox: Combobox<V> | null;
|
|
28
|
-
/** The popup controls exposed to the combobox. */
|
|
29
|
-
readonly _controls: _angular_core.WritableSignal<ComboboxListboxControls<any, V> | ComboboxTreeControls<any, V> | ComboboxDialogPattern | undefined>;
|
|
30
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<ComboboxPopup<any>, never>;
|
|
31
|
-
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ComboboxPopup<any>, "[ngComboboxPopup]", ["ngComboboxPopup"], {}, {}, never, never, true, never>;
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
/**
|
|
35
|
-
* The container element that wraps a combobox input and popup, and orchestrates its behavior.
|
|
36
|
-
*
|
|
37
|
-
* The `ngCombobox` directive is the main entry point for creating a combobox and customizing its
|
|
38
|
-
* behavior. It coordinates the interactions between the `ngComboboxInput` and the popup, which
|
|
39
|
-
* is defined by a `ng-template` with the `ngComboboxPopupContainer` directive. If using the
|
|
40
|
-
* `CdkOverlay`, the `cdkConnectedOverlay` directive takes the place of `ngComboboxPopupContainer`.
|
|
41
|
-
*
|
|
42
|
-
* ```html
|
|
43
|
-
* <div ngCombobox filterMode="highlight">
|
|
44
|
-
* <input
|
|
45
|
-
* ngComboboxInput
|
|
46
|
-
* placeholder="Search for a state..."
|
|
47
|
-
* [(value)]="searchString"
|
|
48
|
-
* />
|
|
49
|
-
*
|
|
50
|
-
* <ng-template ngComboboxPopupContainer>
|
|
51
|
-
* <div ngListbox [(value)]="selectedValue">
|
|
52
|
-
* @for (option of filteredOptions(); track option) {
|
|
53
|
-
* <div ngOption [value]="option" [label]="option">
|
|
54
|
-
* <span>{{option}}</span>
|
|
55
|
-
* </div>
|
|
56
|
-
* }
|
|
57
|
-
* </div>
|
|
58
|
-
* </ng-template>
|
|
59
|
-
* </div>
|
|
60
|
-
* ```
|
|
61
|
-
*
|
|
62
|
-
* @developerPreview 21.0
|
|
63
|
-
*
|
|
64
|
-
* @see [Combobox](guide/aria/combobox)
|
|
65
|
-
* @see [Select](guide/aria/select)
|
|
66
|
-
* @see [Multiselect](guide/aria/multiselect)
|
|
67
|
-
* @see [Autocomplete](guide/aria/autocomplete)
|
|
10
|
+
* This directive should be applied to the element that contains the options or content
|
|
11
|
+
* of the popup. It handles the communication of ID and active descendant information
|
|
12
|
+
* to the combobox.
|
|
68
13
|
*/
|
|
69
|
-
declare class
|
|
70
|
-
/**
|
|
71
|
-
protected readonly textDirection: _angular_core.Signal<_angular_cdk_bidi.Direction>;
|
|
72
|
-
/** The element that the combobox is attached to. */
|
|
14
|
+
declare class ComboboxWidget implements OnInit, OnDestroy {
|
|
15
|
+
/** The element that the popup widget is attached to. */
|
|
73
16
|
private readonly _elementRef;
|
|
74
|
-
|
|
17
|
+
private readonly _popup;
|
|
18
|
+
/** A reference to the popup widget element. */
|
|
75
19
|
readonly element: HTMLElement;
|
|
76
|
-
/** The
|
|
77
|
-
|
|
78
|
-
/** The
|
|
79
|
-
readonly
|
|
80
|
-
|
|
81
|
-
* The filter mode for the combobox.
|
|
82
|
-
* - `manual`: The consumer is responsible for filtering the options.
|
|
83
|
-
* - `auto-select`: The combobox automatically selects the first matching option.
|
|
84
|
-
* - `highlight`: The combobox highlights matching text in the options without changing selection.
|
|
85
|
-
*/
|
|
86
|
-
readonly filterMode: _angular_core.InputSignal<"manual" | "auto-select" | "highlight">;
|
|
87
|
-
/** Whether the combobox is disabled. */
|
|
88
|
-
readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
89
|
-
/** Whether the combobox is read-only. */
|
|
90
|
-
readonly readonly: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
91
|
-
/** The value of the first matching item in the popup. */
|
|
92
|
-
readonly firstMatch: _angular_core.InputSignal<V | undefined>;
|
|
93
|
-
/** Whether the combobox is expanded. */
|
|
94
|
-
readonly expanded: _angular_core.Signal<boolean>;
|
|
95
|
-
/** Whether the combobox popup should always be expanded, regardless of user interaction. */
|
|
96
|
-
readonly alwaysExpanded: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
97
|
-
/** Input element connected to the combobox, if any. */
|
|
98
|
-
readonly inputElement: _angular_core.Signal<HTMLInputElement | undefined>;
|
|
99
|
-
/** The combobox ui pattern. */
|
|
100
|
-
readonly _pattern: ComboboxPattern<any, V>;
|
|
20
|
+
/** The ID of the popup widget. */
|
|
21
|
+
readonly popupId: _angular_core.WritableSignal<string | undefined>;
|
|
22
|
+
/** The ID of the active descendant in the widget. */
|
|
23
|
+
readonly activeDescendant: _angular_core.InputSignal<string | undefined>;
|
|
24
|
+
private _observer;
|
|
101
25
|
constructor();
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
/**
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
26
|
+
ngOnInit(): void;
|
|
27
|
+
ngOnDestroy(): void;
|
|
28
|
+
/** Handles focus in events for the widget. */
|
|
29
|
+
onFocusin(): void;
|
|
30
|
+
/** Handles focus out events for the widget. */
|
|
31
|
+
onFocusout(event: FocusEvent): void;
|
|
32
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<ComboboxWidget, never>;
|
|
33
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ComboboxWidget, "[ngComboboxWidget]", ["ngComboboxWidget"], { "activeDescendant": { "alias": "activeDescendant"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
108
34
|
}
|
|
109
35
|
|
|
110
36
|
/**
|
|
111
|
-
*
|
|
112
|
-
* a
|
|
113
|
-
*
|
|
37
|
+
* A structural directive that marks the `ng-template` to be used as the popup
|
|
38
|
+
* for a combobox. This content is conditionally rendered.
|
|
39
|
+
*
|
|
40
|
+
* The content of the popup can be any element with the `ngComboboxWidget` directive.
|
|
114
41
|
*
|
|
115
42
|
* ```html
|
|
116
|
-
* <ng-template
|
|
117
|
-
* <
|
|
118
|
-
* <!-- ...
|
|
119
|
-
* </
|
|
43
|
+
* <ng-template ngComboboxPopup>
|
|
44
|
+
* <div ngComboboxWidget>
|
|
45
|
+
* <!-- ... options ... -->
|
|
46
|
+
* </div>
|
|
120
47
|
* </ng-template>
|
|
121
48
|
* ```
|
|
122
|
-
*
|
|
123
|
-
* @developerPreview 21.0
|
|
124
|
-
*
|
|
125
|
-
* @see [Combobox](guide/aria/combobox)
|
|
126
|
-
* @see [Select](guide/aria/select)
|
|
127
|
-
* @see [Multiselect](guide/aria/multiselect)
|
|
128
|
-
* @see [Autocomplete](guide/aria/autocomplete)
|
|
129
49
|
*/
|
|
130
|
-
declare class
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
readonly
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
50
|
+
declare class ComboboxPopup implements OnInit, OnDestroy {
|
|
51
|
+
private readonly _deferredContent;
|
|
52
|
+
/** The combobox that the popup belongs to. */
|
|
53
|
+
readonly combobox: _angular_core.InputSignal<Combobox>;
|
|
54
|
+
/** The widget contained within the popup. */
|
|
55
|
+
readonly _widget: _angular_core.WritableSignal<ComboboxWidget | undefined>;
|
|
56
|
+
/** The element that serves as the control target for the popup. */
|
|
57
|
+
readonly controlTarget: _angular_core.Signal<HTMLElement | undefined>;
|
|
58
|
+
/** The ID of the popup. */
|
|
59
|
+
readonly popupId: _angular_core.Signal<string | undefined>;
|
|
60
|
+
/** The ID of the active descendant in the popup. */
|
|
61
|
+
readonly activeDescendant: _angular_core.Signal<string | undefined>;
|
|
62
|
+
/** The type of the popup (e.g., listbox, tree, grid, dialog). */
|
|
63
|
+
readonly popupType: _angular_core.InputSignal<"listbox" | "tree" | "grid" | "dialog">;
|
|
64
|
+
/** The popup pattern. */
|
|
65
|
+
readonly _pattern: ComboboxPopupPattern;
|
|
66
|
+
ngOnInit(): void;
|
|
67
|
+
ngOnDestroy(): void;
|
|
68
|
+
/** Registers a widget with the popup. */
|
|
69
|
+
_registerWidget(widget: ComboboxWidget): void;
|
|
70
|
+
/** Unregisters the widget from the popup. */
|
|
71
|
+
_unregisterWidget(): void;
|
|
72
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<ComboboxPopup, never>;
|
|
73
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ComboboxPopup, "ng-template[ngComboboxPopup]", ["ngComboboxPopup"], { "combobox": { "alias": "combobox"; "required": true; "isSignal": true; }; "popupType": { "alias": "popupType"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1.DeferredContent; inputs: {}; outputs: {}; }]>;
|
|
146
74
|
}
|
|
147
75
|
|
|
148
76
|
/**
|
|
149
|
-
*
|
|
150
|
-
* current value and handling user input for filtering and selection.
|
|
77
|
+
* The container element that wraps a combobox input and popup, and orchestrates its behavior.
|
|
151
78
|
*
|
|
152
|
-
*
|
|
153
|
-
*
|
|
154
|
-
* popup and navigating through the options.
|
|
79
|
+
* The `ngCombobox` directive is the main entry point for creating a combobox and customizing its
|
|
80
|
+
* behavior. It coordinates the interactions between the input and the popup.
|
|
155
81
|
*
|
|
156
82
|
* ```html
|
|
157
|
-
* <
|
|
158
|
-
* ngComboboxInput
|
|
159
|
-
* placeholder="Search..."
|
|
160
|
-
* [(value)]="searchString"
|
|
161
|
-
* />
|
|
162
|
-
* ```
|
|
163
|
-
*
|
|
164
|
-
* @developerPreview 21.0
|
|
83
|
+
* <div ngCombobox [(expanded)]="expanded">
|
|
84
|
+
* <input ngComboboxInput />
|
|
165
85
|
*
|
|
166
|
-
*
|
|
167
|
-
*
|
|
168
|
-
*
|
|
169
|
-
*
|
|
86
|
+
* <ng-template ngComboboxPopup>
|
|
87
|
+
* <div ngComboboxWidget>
|
|
88
|
+
* <!-- ... options ... -->
|
|
89
|
+
* </div>
|
|
90
|
+
* </ng-template>
|
|
91
|
+
* </div>
|
|
92
|
+
* ```
|
|
170
93
|
*/
|
|
171
|
-
declare class
|
|
94
|
+
declare class Combobox extends DeferredContentAware implements OnInit {
|
|
95
|
+
private readonly _renderer;
|
|
172
96
|
/** The element that the combobox is attached to. */
|
|
173
97
|
private readonly _elementRef;
|
|
174
98
|
/** A reference to the input element. */
|
|
175
99
|
readonly element: HTMLElement;
|
|
176
|
-
/** The
|
|
177
|
-
readonly
|
|
178
|
-
/**
|
|
100
|
+
/** The popup associated with the combobox. */
|
|
101
|
+
readonly _popup: _angular_core.WritableSignal<ComboboxPopup | undefined>;
|
|
102
|
+
/** Whether the combobox is disabled. */
|
|
103
|
+
readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
104
|
+
/** Whether the combobox is soft disabled (remains focusable). */
|
|
105
|
+
readonly softDisabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
106
|
+
/** Whether the combobox should always remain expanded. */
|
|
107
|
+
readonly alwaysExpanded: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
108
|
+
/** The tabindex of the combobox. */
|
|
109
|
+
readonly tabIndex: _angular_core.InputSignalWithTransform<number | undefined, string | number | undefined>;
|
|
110
|
+
/** Whether the combobox is expanded. */
|
|
111
|
+
readonly expanded: _angular_core.ModelSignal<boolean>;
|
|
112
|
+
/** The value of the combobox input. */
|
|
179
113
|
readonly value: _angular_core.ModelSignal<string>;
|
|
114
|
+
/** An inline suggestion to be displayed in the input. */
|
|
115
|
+
readonly inlineSuggestion: _angular_core.InputSignal<string | undefined>;
|
|
116
|
+
/** The combobox ui pattern. */
|
|
117
|
+
readonly _pattern: ComboboxPattern;
|
|
180
118
|
constructor();
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
*
|
|
189
|
-
* The content of the popup can be a `ngListbox`, `ngTree`, or `role="dialog"`, allowing for
|
|
190
|
-
* flexible and complex combobox implementations. The consumer is responsible for
|
|
191
|
-
* implementing the filtering logic based on the `ngComboboxInput`'s value.
|
|
192
|
-
*
|
|
193
|
-
* ```html
|
|
194
|
-
* <ng-template ngComboboxPopupContainer>
|
|
195
|
-
* <div ngListbox [(value)]="selectedValue">
|
|
196
|
-
* <!-- ... options ... -->
|
|
197
|
-
* </div>
|
|
198
|
-
* </ng-template>
|
|
199
|
-
* ```
|
|
200
|
-
*
|
|
201
|
-
* When using CdkOverlay, this directive can be replaced by `cdkConnectedOverlay`.
|
|
202
|
-
*
|
|
203
|
-
* ```html
|
|
204
|
-
* <ng-template
|
|
205
|
-
* [cdkConnectedOverlay]="{origin: inputElement, usePopover: 'inline' matchWidth: true}"
|
|
206
|
-
* [cdkConnectedOverlayOpen]="combobox.expanded()">
|
|
207
|
-
* <div ngListbox [(value)]="selectedValue">
|
|
208
|
-
* <!-- ... options ... -->
|
|
209
|
-
* </div>
|
|
210
|
-
* </ng-template>
|
|
211
|
-
* ```
|
|
212
|
-
*
|
|
213
|
-
* @developerPreview 21.0
|
|
214
|
-
*
|
|
215
|
-
* @see [Combobox](guide/aria/combobox)
|
|
216
|
-
* @see [Select](guide/aria/select)
|
|
217
|
-
* @see [Multiselect](guide/aria/multiselect)
|
|
218
|
-
* @see [Autocomplete](guide/aria/autocomplete)
|
|
219
|
-
*/
|
|
220
|
-
declare class ComboboxPopupContainer {
|
|
221
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<ComboboxPopupContainer, never>;
|
|
222
|
-
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ComboboxPopupContainer, "ng-template[ngComboboxPopupContainer]", ["ngComboboxPopupContainer"], {}, {}, never, never, true, [{ directive: typeof DeferredContent; inputs: {}; outputs: {}; }]>;
|
|
119
|
+
ngOnInit(): void;
|
|
120
|
+
/** Registers a popup with the combobox. */
|
|
121
|
+
_registerPopup(popup: ComboboxPopup): void;
|
|
122
|
+
/** Unregisters the popup from the combobox. */
|
|
123
|
+
_unregisterPopup(): void;
|
|
124
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<Combobox, never>;
|
|
125
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<Combobox, "[ngCombobox]", ["ngCombobox"], { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "softDisabled": { "alias": "softDisabled"; "required": false; "isSignal": true; }; "alwaysExpanded": { "alias": "alwaysExpanded"; "required": false; "isSignal": true; }; "tabIndex": { "alias": "tabindex"; "required": false; "isSignal": true; }; "expanded": { "alias": "expanded"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "inlineSuggestion": { "alias": "inlineSuggestion"; "required": false; "isSignal": true; }; }, { "expanded": "expandedChange"; "value": "valueChange"; }, never, never, true, never>;
|
|
223
126
|
}
|
|
224
127
|
|
|
225
|
-
export { Combobox,
|
|
128
|
+
export { Combobox, ComboboxPopup, ComboboxWidget };
|
package/types/grid-testing.d.ts
CHANGED
|
@@ -39,6 +39,10 @@ declare class GridCellHarness extends ContentContainerComponentHarness {
|
|
|
39
39
|
focus(): Promise<void>;
|
|
40
40
|
/** Blurs the cell. */
|
|
41
41
|
blur(): Promise<void>;
|
|
42
|
+
/** Whether the cell is active. */
|
|
43
|
+
isActive(): Promise<boolean>;
|
|
44
|
+
/** Whether the cell is focused. */
|
|
45
|
+
isFocused(): Promise<boolean>;
|
|
42
46
|
}
|
|
43
47
|
/** Harness for interacting with a standard ngGridRow in tests. */
|
|
44
48
|
declare class GridRowHarness extends ComponentHarness {
|
package/types/grid.d.ts
CHANGED
|
@@ -1,97 +1,11 @@
|
|
|
1
1
|
import * as _angular_core from '@angular/core';
|
|
2
|
-
import {
|
|
2
|
+
import { OnInit, OnDestroy, Signal } from '@angular/core';
|
|
3
3
|
import * as _angular_cdk_bidi from '@angular/cdk/bidi';
|
|
4
|
-
import {
|
|
5
|
-
import './
|
|
4
|
+
import { GridCellPattern, GridPattern, GridRowPattern, ElementResolver, GridCellWidgetPattern } from './_grid-chunk.js';
|
|
5
|
+
import { SortedCollection } from './_collection-chunk.js';
|
|
6
6
|
import './_keyboard-event-manager-chunk.js';
|
|
7
7
|
import './_click-event-manager-chunk.js';
|
|
8
8
|
|
|
9
|
-
/**
|
|
10
|
-
* The container for a grid. It provides keyboard navigation and focus management for the grid's
|
|
11
|
-
* rows and cells. It manages the overall behavior of the grid, including focus
|
|
12
|
-
* wrapping, selection, and disabled states.
|
|
13
|
-
*
|
|
14
|
-
* ```html
|
|
15
|
-
* <table ngGrid [multi]="true" [enableSelection]="true">
|
|
16
|
-
* @for (row of gridData; track row) {
|
|
17
|
-
* <tr ngGridRow>
|
|
18
|
-
* @for (cell of row; track cell) {
|
|
19
|
-
* <td ngGridCell [disabled]="cell.disabled">
|
|
20
|
-
* {{cell.value}}
|
|
21
|
-
* </td>
|
|
22
|
-
* }
|
|
23
|
-
* </tr>
|
|
24
|
-
* }
|
|
25
|
-
* </table>
|
|
26
|
-
* ```
|
|
27
|
-
*
|
|
28
|
-
* @developerPreview 21.0
|
|
29
|
-
*
|
|
30
|
-
* @see [Grid](guide/aria/grid)
|
|
31
|
-
*/
|
|
32
|
-
declare class Grid {
|
|
33
|
-
/** A reference to the host element. */
|
|
34
|
-
private readonly _elementRef;
|
|
35
|
-
/** A reference to the host element. */
|
|
36
|
-
readonly element: HTMLElement;
|
|
37
|
-
/** The rows that make up the grid. */
|
|
38
|
-
private readonly _rows;
|
|
39
|
-
/** The UI patterns for the rows in the grid. */
|
|
40
|
-
private readonly _rowPatterns;
|
|
41
|
-
/** Text direction. */
|
|
42
|
-
readonly textDirection: _angular_core.WritableSignal<_angular_cdk_bidi.Direction>;
|
|
43
|
-
/** Whether selection is enabled for the grid. */
|
|
44
|
-
readonly enableSelection: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
45
|
-
/** Whether the grid is disabled. */
|
|
46
|
-
readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
47
|
-
/**
|
|
48
|
-
* Whether to allow disabled items to receive focus. When `true`, disabled items are
|
|
49
|
-
* focusable but not interactive. When `false`, disabled items are skipped during navigation.
|
|
50
|
-
*/
|
|
51
|
-
readonly softDisabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
52
|
-
/**
|
|
53
|
-
* The focus strategy used by the grid.
|
|
54
|
-
* - `roving`: Focus is moved to the active cell using `tabindex`.
|
|
55
|
-
* - `activedescendant`: Focus remains on the grid container, and `aria-activedescendant` is used to indicate the active cell.
|
|
56
|
-
*/
|
|
57
|
-
readonly focusMode: _angular_core.InputSignal<"roving" | "activedescendant">;
|
|
58
|
-
/**
|
|
59
|
-
* The wrapping behavior for keyboard navigation along the row axis.
|
|
60
|
-
* - `continuous`: Navigation wraps from the last row to the first, and vice-versa.
|
|
61
|
-
* - `loop`: Navigation wraps within the current row.
|
|
62
|
-
* - `nowrap`: Navigation stops at the first/last item in the row.
|
|
63
|
-
*/
|
|
64
|
-
readonly rowWrap: _angular_core.InputSignal<"continuous" | "loop" | "nowrap">;
|
|
65
|
-
/**
|
|
66
|
-
* The wrapping behavior for keyboard navigation along the column axis.
|
|
67
|
-
* - `continuous`: Navigation wraps from the last column to the first, and vice-versa.
|
|
68
|
-
* - `loop`: Navigation wraps within the current column.
|
|
69
|
-
* - `nowrap`: Navigation stops at the first/last item in the column.
|
|
70
|
-
*/
|
|
71
|
-
readonly colWrap: _angular_core.InputSignal<"continuous" | "loop" | "nowrap">;
|
|
72
|
-
/** Whether multiple cells in the grid can be selected. */
|
|
73
|
-
readonly multi: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
74
|
-
/**
|
|
75
|
-
* The selection strategy used by the grid.
|
|
76
|
-
* - `follow`: The focused cell is automatically selected.
|
|
77
|
-
* - `explicit`: Cells are selected explicitly by the user (e.g., via click or spacebar).
|
|
78
|
-
*/
|
|
79
|
-
readonly selectionMode: _angular_core.InputSignal<"follow" | "explicit">;
|
|
80
|
-
/** The tabindex of the grid. */
|
|
81
|
-
readonly tabIndex: _angular_core.InputSignalWithTransform<number | undefined, string | number | undefined>;
|
|
82
|
-
/** The UI pattern for the grid. */
|
|
83
|
-
readonly _pattern: GridPattern;
|
|
84
|
-
/** The ID of the active descendant in the grid. */
|
|
85
|
-
readonly activeDescendant: Signal<string | undefined>;
|
|
86
|
-
constructor();
|
|
87
|
-
/** Scrolls the active cell into view. */
|
|
88
|
-
scrollActiveCellIntoView(options?: ScrollIntoViewOptions): void;
|
|
89
|
-
/** Gets the cell pattern for a given element. */
|
|
90
|
-
private _getCell;
|
|
91
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<Grid, never>;
|
|
92
|
-
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<Grid, "[ngGrid]", ["ngGrid"], { "enableSelection": { "alias": "enableSelection"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "softDisabled": { "alias": "softDisabled"; "required": false; "isSignal": true; }; "focusMode": { "alias": "focusMode"; "required": false; "isSignal": true; }; "rowWrap": { "alias": "rowWrap"; "required": false; "isSignal": true; }; "colWrap": { "alias": "colWrap"; "required": false; "isSignal": true; }; "multi": { "alias": "multi"; "required": false; "isSignal": true; }; "selectionMode": { "alias": "selectionMode"; "required": false; "isSignal": true; }; "tabIndex": { "alias": "tabIndex"; "required": false; "isSignal": true; }; }, {}, ["_rows"], never, true, never>;
|
|
93
|
-
}
|
|
94
|
-
|
|
95
9
|
/**
|
|
96
10
|
* Represents a cell within a grid row. It is the primary focusable element
|
|
97
11
|
* within the grid. It can be disabled and can have its selection state managed
|
|
@@ -103,17 +17,13 @@ declare class Grid {
|
|
|
103
17
|
* </td>
|
|
104
18
|
* ```
|
|
105
19
|
*
|
|
106
|
-
* @developerPreview 21.0
|
|
107
|
-
*
|
|
108
20
|
* @see [Grid](guide/aria/grid)
|
|
109
21
|
*/
|
|
110
|
-
declare class GridCell {
|
|
22
|
+
declare class GridCell implements OnInit, OnDestroy {
|
|
111
23
|
private readonly _elementRef;
|
|
112
24
|
private readonly _renderer;
|
|
113
25
|
/** A reference to the host element. */
|
|
114
26
|
readonly element: HTMLElement;
|
|
115
|
-
/** Emits when the cell is activated via Enter/Space (simple widgets only). */
|
|
116
|
-
readonly activated: EventEmitter<KeyboardEvent>;
|
|
117
27
|
/** Whether the cell is currently active (focused). */
|
|
118
28
|
readonly active: Signal<boolean>;
|
|
119
29
|
/** The widget contained within this cell, if any. */
|
|
@@ -152,11 +62,13 @@ declare class GridCell {
|
|
|
152
62
|
/** The UI pattern for the grid cell. */
|
|
153
63
|
readonly _pattern: GridCellPattern;
|
|
154
64
|
constructor();
|
|
65
|
+
ngOnInit(): void;
|
|
66
|
+
ngOnDestroy(): void;
|
|
155
67
|
private _toggleAttribute;
|
|
156
68
|
/** Gets the cell widget pattern for a given element. */
|
|
157
69
|
private _getWidget;
|
|
158
70
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<GridCell, never>;
|
|
159
|
-
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<GridCell, "[ngGridCell]", ["ngGridCell"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; "role": { "alias": "role"; "required": false; "isSignal": true; }; "rowSpan": { "alias": "rowSpan"; "required": false; "isSignal": true; }; "colSpan": { "alias": "colSpan"; "required": false; "isSignal": true; }; "rowIndex": { "alias": "rowIndex"; "required": false; "isSignal": true; }; "colIndex": { "alias": "colIndex"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "selectable": { "alias": "selectable"; "required": false; "isSignal": true; }; "tabindex": { "alias": "tabindex"; "required": false; "isSignal": true; }; }, { "
|
|
71
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<GridCell, "[ngGridCell]", ["ngGridCell"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; "role": { "alias": "role"; "required": false; "isSignal": true; }; "rowSpan": { "alias": "rowSpan"; "required": false; "isSignal": true; }; "colSpan": { "alias": "colSpan"; "required": false; "isSignal": true; }; "rowIndex": { "alias": "rowIndex"; "required": false; "isSignal": true; }; "colIndex": { "alias": "colIndex"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "selectable": { "alias": "selectable"; "required": false; "isSignal": true; }; "tabindex": { "alias": "tabindex"; "required": false; "isSignal": true; }; }, { "selected": "selectedChange"; }, ["_widget"], never, true, never>;
|
|
160
72
|
}
|
|
161
73
|
|
|
162
74
|
/**
|
|
@@ -168,17 +80,15 @@ declare class GridCell {
|
|
|
168
80
|
* </tr>
|
|
169
81
|
* ```
|
|
170
82
|
*
|
|
171
|
-
* @developerPreview 21.0
|
|
172
|
-
*
|
|
173
83
|
* @see [Grid](guide/aria/grid)
|
|
174
84
|
*/
|
|
175
|
-
declare class GridRow {
|
|
85
|
+
declare class GridRow implements OnInit, OnDestroy {
|
|
176
86
|
/** A reference to the host element. */
|
|
177
87
|
private readonly _elementRef;
|
|
178
88
|
/** A reference to the host element. */
|
|
179
89
|
readonly element: HTMLElement;
|
|
180
|
-
/** The
|
|
181
|
-
|
|
90
|
+
/** The collection of cells in this row. */
|
|
91
|
+
readonly _collection: SortedCollection<GridCell>;
|
|
182
92
|
/** The UI patterns for the cells in this row. */
|
|
183
93
|
private readonly _cellPatterns;
|
|
184
94
|
/** The parent grid. */
|
|
@@ -189,8 +99,96 @@ declare class GridRow {
|
|
|
189
99
|
readonly rowIndex: _angular_core.InputSignal<number | undefined>;
|
|
190
100
|
/** The UI pattern for the grid row. */
|
|
191
101
|
readonly _pattern: GridRowPattern;
|
|
102
|
+
constructor();
|
|
103
|
+
ngOnInit(): void;
|
|
104
|
+
ngOnDestroy(): void;
|
|
192
105
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<GridRow, never>;
|
|
193
|
-
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<GridRow, "[ngGridRow]", ["ngGridRow"], { "rowIndex": { "alias": "rowIndex"; "required": false; "isSignal": true; }; }, {},
|
|
106
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<GridRow, "[ngGridRow]", ["ngGridRow"], { "rowIndex": { "alias": "rowIndex"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
/**
|
|
110
|
+
* The container for a grid. It provides keyboard navigation and focus management for the grid's
|
|
111
|
+
* rows and cells. It manages the overall behavior of the grid, including focus
|
|
112
|
+
* wrapping, selection, and disabled states.
|
|
113
|
+
*
|
|
114
|
+
* ```html
|
|
115
|
+
* <table ngGrid [multi]="true" [enableSelection]="true">
|
|
116
|
+
* @for (row of gridData; track row) {
|
|
117
|
+
* <tr ngGridRow>
|
|
118
|
+
* @for (cell of row; track cell) {
|
|
119
|
+
* <td ngGridCell [disabled]="cell.disabled">
|
|
120
|
+
* {{cell.value}}
|
|
121
|
+
* </td>
|
|
122
|
+
* }
|
|
123
|
+
* </tr>
|
|
124
|
+
* }
|
|
125
|
+
* </table>
|
|
126
|
+
* ```
|
|
127
|
+
*
|
|
128
|
+
* @see [Grid](guide/aria/grid)
|
|
129
|
+
*/
|
|
130
|
+
declare class Grid implements OnDestroy {
|
|
131
|
+
/** A reference to the host element. */
|
|
132
|
+
private readonly _elementRef;
|
|
133
|
+
/** A reference to the host element. */
|
|
134
|
+
readonly element: HTMLElement;
|
|
135
|
+
/** The collection of rows in the grid. */
|
|
136
|
+
readonly _collection: SortedCollection<GridRow>;
|
|
137
|
+
/** The UI patterns for the rows in the grid. */
|
|
138
|
+
private readonly _rowPatterns;
|
|
139
|
+
/** Text direction. */
|
|
140
|
+
readonly textDirection: _angular_core.WritableSignal<_angular_cdk_bidi.Direction>;
|
|
141
|
+
/** Whether selection is enabled for the grid. */
|
|
142
|
+
readonly enableSelection: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
143
|
+
/** Whether the grid is disabled. */
|
|
144
|
+
readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
145
|
+
/**
|
|
146
|
+
* Whether to allow disabled items to receive focus. When `true`, disabled items are
|
|
147
|
+
* focusable but not interactive. When `false`, disabled items are skipped during navigation.
|
|
148
|
+
*/
|
|
149
|
+
readonly softDisabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
150
|
+
/**
|
|
151
|
+
* The focus strategy used by the grid.
|
|
152
|
+
* - `roving`: Focus is moved to the active cell using `tabindex`.
|
|
153
|
+
* - `activedescendant`: Focus remains on the grid container, and `aria-activedescendant` is used to indicate the active cell.
|
|
154
|
+
*/
|
|
155
|
+
readonly focusMode: _angular_core.InputSignal<"roving" | "activedescendant">;
|
|
156
|
+
/**
|
|
157
|
+
* The wrapping behavior for keyboard navigation along the row axis.
|
|
158
|
+
* - `continuous`: Navigation wraps from the last row to the first, and vice-versa.
|
|
159
|
+
* - `loop`: Navigation wraps within the current row.
|
|
160
|
+
* - `nowrap`: Navigation stops at the first/last item in the row.
|
|
161
|
+
*/
|
|
162
|
+
readonly rowWrap: _angular_core.InputSignal<"continuous" | "loop" | "nowrap">;
|
|
163
|
+
/**
|
|
164
|
+
* The wrapping behavior for keyboard navigation along the column axis.
|
|
165
|
+
* - `continuous`: Navigation wraps from the last column to the first, and vice-versa.
|
|
166
|
+
* - `loop`: Navigation wraps within the current column.
|
|
167
|
+
* - `nowrap`: Navigation stops at the first/last item in the column.
|
|
168
|
+
*/
|
|
169
|
+
readonly colWrap: _angular_core.InputSignal<"continuous" | "loop" | "nowrap">;
|
|
170
|
+
/** Whether multiple cells in the grid can be selected. */
|
|
171
|
+
readonly multi: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
172
|
+
/**
|
|
173
|
+
* The selection strategy used by the grid.
|
|
174
|
+
* - `follow`: The focused cell is automatically selected.
|
|
175
|
+
* - `explicit`: Cells are selected explicitly by the user (e.g., via click or spacebar).
|
|
176
|
+
*/
|
|
177
|
+
readonly selectionMode: _angular_core.InputSignal<"follow" | "explicit">;
|
|
178
|
+
/** The tabindex of the grid. */
|
|
179
|
+
readonly tabIndex: _angular_core.InputSignalWithTransform<number | undefined, string | number | undefined>;
|
|
180
|
+
/** The UI pattern for the grid. */
|
|
181
|
+
readonly _pattern: GridPattern;
|
|
182
|
+
/** The ID of the active descendant in the grid. */
|
|
183
|
+
readonly activeDescendant: Signal<string | undefined>;
|
|
184
|
+
constructor();
|
|
185
|
+
ngOnDestroy(): void;
|
|
186
|
+
/** Scrolls the active cell into view. */
|
|
187
|
+
scrollActiveCellIntoView(options?: ScrollIntoViewOptions): void;
|
|
188
|
+
/** Gets the cell pattern for a given element. */
|
|
189
|
+
private _getCell;
|
|
190
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<Grid, never>;
|
|
191
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<Grid, "[ngGrid]", ["ngGrid"], { "enableSelection": { "alias": "enableSelection"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "softDisabled": { "alias": "softDisabled"; "required": false; "isSignal": true; }; "focusMode": { "alias": "focusMode"; "required": false; "isSignal": true; }; "rowWrap": { "alias": "rowWrap"; "required": false; "isSignal": true; }; "colWrap": { "alias": "colWrap"; "required": false; "isSignal": true; }; "multi": { "alias": "multi"; "required": false; "isSignal": true; }; "selectionMode": { "alias": "selectionMode"; "required": false; "isSignal": true; }; "tabIndex": { "alias": "tabindex"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
194
192
|
}
|
|
195
193
|
|
|
196
194
|
/**
|
|
@@ -207,8 +205,6 @@ declare class GridRow {
|
|
|
207
205
|
* </td>
|
|
208
206
|
* ```
|
|
209
207
|
*
|
|
210
|
-
* @developerPreview 21.0
|
|
211
|
-
*
|
|
212
208
|
* @see [Grid](guide/aria/grid)
|
|
213
209
|
*/
|
|
214
210
|
declare class GridCellWidget {
|