@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.
Files changed (96) hide show
  1. package/fesm2022/_accordion-chunk.mjs +11 -1
  2. package/fesm2022/_accordion-chunk.mjs.map +1 -1
  3. package/fesm2022/_click-event-manager-chunk.mjs +1 -1
  4. package/fesm2022/_deferred-content-chunk.mjs +6 -6
  5. package/fesm2022/_list-chunk.mjs +4 -1
  6. package/fesm2022/_list-chunk.mjs.map +1 -1
  7. package/fesm2022/_list-navigation-chunk.mjs +1 -1
  8. package/fesm2022/_list-typeahead-chunk.mjs +1 -1
  9. package/fesm2022/_menu-chunk.mjs +10 -1
  10. package/fesm2022/_menu-chunk.mjs.map +1 -1
  11. package/fesm2022/{_combobox-listbox-chunk.mjs → _option-chunk.mjs} +13 -50
  12. package/fesm2022/_option-chunk.mjs.map +1 -0
  13. package/fesm2022/_tabs-chunk.mjs +1 -1
  14. package/fesm2022/_toolbar-widget-group-chunk.mjs +10 -1
  15. package/fesm2022/_toolbar-widget-group-chunk.mjs.map +1 -1
  16. package/fesm2022/_transforms-chunk.mjs +8 -0
  17. package/fesm2022/_transforms-chunk.mjs.map +1 -0
  18. package/fesm2022/{_combobox-tree-chunk.mjs → _tree-chunk.mjs} +8 -48
  19. package/fesm2022/_tree-chunk.mjs.map +1 -0
  20. package/fesm2022/{_signal-like-chunk.mjs → _violations-chunk.mjs} +60 -2
  21. package/fesm2022/_violations-chunk.mjs.map +1 -0
  22. package/fesm2022/_widget-chunk.mjs +46 -15
  23. package/fesm2022/_widget-chunk.mjs.map +1 -1
  24. package/fesm2022/accordion.mjs +116 -89
  25. package/fesm2022/accordion.mjs.map +1 -1
  26. package/fesm2022/aria.mjs +1 -1
  27. package/fesm2022/aria.mjs.map +1 -1
  28. package/fesm2022/combobox-testing.mjs +79 -0
  29. package/fesm2022/combobox-testing.mjs.map +1 -0
  30. package/fesm2022/combobox.mjs +273 -307
  31. package/fesm2022/combobox.mjs.map +1 -1
  32. package/fesm2022/grid-testing.mjs +8 -0
  33. package/fesm2022/grid-testing.mjs.map +1 -1
  34. package/fesm2022/grid.mjs +75 -87
  35. package/fesm2022/grid.mjs.map +1 -1
  36. package/fesm2022/listbox-testing.mjs +4 -0
  37. package/fesm2022/listbox-testing.mjs.map +1 -1
  38. package/fesm2022/listbox.mjs +192 -215
  39. package/fesm2022/listbox.mjs.map +1 -1
  40. package/fesm2022/menu-testing.mjs +11 -0
  41. package/fesm2022/menu-testing.mjs.map +1 -1
  42. package/fesm2022/menu.mjs +60 -66
  43. package/fesm2022/menu.mjs.map +1 -1
  44. package/fesm2022/private.mjs +19 -13
  45. package/fesm2022/private.mjs.map +1 -1
  46. package/fesm2022/tabs.mjs +172 -115
  47. package/fesm2022/tabs.mjs.map +1 -1
  48. package/fesm2022/toolbar-testing.mjs +5 -1
  49. package/fesm2022/toolbar-testing.mjs.map +1 -1
  50. package/fesm2022/toolbar.mjs +41 -30
  51. package/fesm2022/toolbar.mjs.map +1 -1
  52. package/fesm2022/tree-testing.mjs +12 -0
  53. package/fesm2022/tree-testing.mjs.map +1 -1
  54. package/fesm2022/tree.mjs +126 -156
  55. package/fesm2022/tree.mjs.map +1 -1
  56. package/package.json +6 -6
  57. package/types/_accordion-chunk.d.ts +4 -2
  58. package/types/_collection-chunk.d.ts +42 -0
  59. package/types/_expansion-chunk.d.ts +1 -1
  60. package/types/_grid-chunk.d.ts +11 -3
  61. package/types/_keyboard-event-manager-chunk.d.ts +1 -1
  62. package/types/_list-chunk.d.ts +1 -1
  63. package/types/_list-navigation-chunk.d.ts +1 -1
  64. package/types/_listbox-chunk.d.ts +1 -1
  65. package/types/_menu-chunk.d.ts +3 -1
  66. package/types/_tabs-chunk.d.ts +1 -1
  67. package/types/_toolbar-chunk.d.ts +3 -1
  68. package/types/_tree-chunk.d.ts +1 -1
  69. package/types/accordion.d.ts +10 -18
  70. package/types/combobox-testing.d.ts +63 -0
  71. package/types/combobox.d.ts +96 -193
  72. package/types/grid-testing.d.ts +4 -0
  73. package/types/grid.d.ts +99 -103
  74. package/types/listbox-testing.d.ts +25 -0
  75. package/types/listbox.d.ts +53 -62
  76. package/types/menu-testing.d.ts +6 -0
  77. package/types/menu.d.ts +17 -23
  78. package/types/private.d.ts +26 -137
  79. package/types/tabs.d.ts +69 -80
  80. package/types/toolbar-testing.d.ts +4 -0
  81. package/types/toolbar.d.ts +6 -12
  82. package/types/tree-testing.d.ts +8 -0
  83. package/types/tree.d.ts +7 -20
  84. package/fesm2022/_combobox-chunk.mjs +0 -478
  85. package/fesm2022/_combobox-chunk.mjs.map +0 -1
  86. package/fesm2022/_combobox-listbox-chunk.mjs.map +0 -1
  87. package/fesm2022/_combobox-tree-chunk.mjs.map +0 -1
  88. package/fesm2022/_element-chunk.mjs +0 -6
  89. package/fesm2022/_element-chunk.mjs.map +0 -1
  90. package/fesm2022/_signal-like-chunk.mjs.map +0 -1
  91. package/fesm2022/simple-combobox.mjs +0 -443
  92. package/fesm2022/simple-combobox.mjs.map +0 -1
  93. package/types/_combobox-chunk.d.ts +0 -224
  94. package/types/_element-chunk.d.ts +0 -10
  95. package/types/_signal-like-chunk.d.ts +0 -14
  96. package/types/simple-combobox.d.ts +0 -124
@@ -1,225 +1,128 @@
1
1
  import * as _angular_core from '@angular/core';
2
- import * as _angular_cdk_bidi from '@angular/cdk/bidi';
3
- import { ComboboxListboxControls, ComboboxTreeControls, ComboboxDialogPattern, ComboboxPattern } from './_combobox-chunk.js';
4
- import { DeferredContentAware, DeferredContent } from './_deferred-content-chunk.js';
5
- import './_keyboard-event-manager-chunk.js';
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 popup for an `ngCombobox`.
8
+ * Identifies an element as a widget within a combobox popup.
12
9
  *
13
- * This directive acts as a bridge, allowing the `ngCombobox` to discover and interact
14
- * with the underlying control (e.g., `ngListbox`, `ngTree`, or `ngComboboxDialog`) that
15
- * manages the options. It's primarily used as a host directive and is responsible for
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 Combobox<V> {
70
- /** A signal wrapper for directionality. */
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
- /** A reference to the combobox element. */
17
+ private readonly _popup;
18
+ /** A reference to the popup widget element. */
75
19
  readonly element: HTMLElement;
76
- /** The DeferredContentAware host directive. */
77
- private readonly _deferredContentAware;
78
- /** The combobox popup. */
79
- readonly popup: _angular_core.Signal<ComboboxPopup<V> | undefined>;
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
- /** Opens the combobox to the selected item. */
103
- open(): void;
104
- /** Closes the combobox. */
105
- close(): void;
106
- static ɵfac: _angular_core.ɵɵFactoryDeclaration<Combobox<any>, never>;
107
- static ɵdir: _angular_core.ɵɵDirectiveDeclaration<Combobox<any>, "[ngCombobox]", ["ngCombobox"], { "filterMode": { "alias": "filterMode"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "firstMatch": { "alias": "firstMatch"; "required": false; "isSignal": true; }; "alwaysExpanded": { "alias": "alwaysExpanded"; "required": false; "isSignal": true; }; }, {}, ["popup"], never, true, [{ directive: typeof DeferredContentAware; inputs: { "preserveContent": "preserveContent"; }; outputs: {}; }]>;
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
- * Integrates a native `<dialog>` element with the combobox, allowing for
112
- * a modal or non-modal popup experience. It handles the opening and closing of the dialog
113
- * based on the combobox's expanded state.
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 ngComboboxPopupContainer>
117
- * <dialog ngComboboxDialog class="example-dialog">
118
- * <!-- ... dialog content ... -->
119
- * </dialog>
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 ComboboxDialog {
131
- /** The dialog element. */
132
- private readonly _elementRef;
133
- /** A reference to the dialog element. */
134
- readonly element: HTMLDialogElement;
135
- /** The combobox that the dialog belongs to. */
136
- readonly combobox: Combobox<any>;
137
- /** The unique identifier for the trigger. */
138
- readonly id: _angular_core.InputSignal<string>;
139
- /** A reference to the parent combobox popup, if one exists. */
140
- private readonly _popup;
141
- readonly _pattern: ComboboxDialogPattern;
142
- constructor();
143
- close(): void;
144
- static ɵfac: _angular_core.ɵɵFactoryDeclaration<ComboboxDialog, never>;
145
- static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ComboboxDialog, "dialog[ngComboboxDialog]", ["ngComboboxDialog"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof ComboboxPopup; inputs: {}; outputs: {}; }]>;
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
- * An input that is part of a combobox. It is responsible for displaying the
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
- * This directive should be applied to an `<input>` element within an `ngCombobox`
153
- * container. It automatically handles keyboard interactions, such as opening the
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
- * <input
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
- * @see [Combobox](guide/aria/combobox)
167
- * @see [Select](guide/aria/select)
168
- * @see [Multiselect](guide/aria/multiselect)
169
- * @see [Autocomplete](guide/aria/autocomplete)
86
+ * <ng-template ngComboboxPopup>
87
+ * <div ngComboboxWidget>
88
+ * <!-- ... options ... -->
89
+ * </div>
90
+ * </ng-template>
91
+ * </div>
92
+ * ```
170
93
  */
171
- declare class ComboboxInput {
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 combobox that the input belongs to. */
177
- readonly combobox: Combobox<any>;
178
- /** The value of the input. */
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
- static ɵfac: _angular_core.ɵɵFactoryDeclaration<ComboboxInput, never>;
182
- static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ComboboxInput, "input[ngComboboxInput]", ["ngComboboxInput"], { "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
183
- }
184
-
185
- /**
186
- * A structural directive that marks the `ng-template` to be used as the popup
187
- * for a combobox. This content is conditionally rendered.
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, ComboboxDialog, ComboboxInput, ComboboxPopup, ComboboxPopupContainer, DeferredContent as ɵɵDeferredContent, DeferredContentAware as ɵɵDeferredContentAware };
128
+ export { Combobox, ComboboxPopup, ComboboxWidget };
@@ -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 { Signal, EventEmitter } from '@angular/core';
2
+ import { OnInit, OnDestroy, Signal } from '@angular/core';
3
3
  import * as _angular_cdk_bidi from '@angular/cdk/bidi';
4
- import { GridPattern, GridCellPattern, GridRowPattern, ElementResolver, GridCellWidgetPattern } from './_grid-chunk.js';
5
- import './_signal-like-chunk.js';
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; }; }, { "activated": "activated"; "selected": "selectedChange"; }, ["_widget"], never, true, never>;
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 cells that make up this row. */
181
- private readonly _cells;
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; }; }, {}, ["_cells"], never, true, never>;
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 {