@angular/aria 21.0.0-rc.0 → 21.0.0-rc.2

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 (48) hide show
  1. package/_adev_assets/aria-accordion.json +443 -59
  2. package/_adev_assets/aria-combobox.json +345 -37
  3. package/_adev_assets/aria-grid.json +408 -71
  4. package/_adev_assets/aria-listbox.json +115 -35
  5. package/_adev_assets/aria-menu.json +492 -167
  6. package/_adev_assets/aria-tabs.json +272 -88
  7. package/_adev_assets/aria-toolbar.json +151 -133
  8. package/_adev_assets/aria-tree.json +182 -35
  9. package/fesm2022/_widget-chunk.mjs +643 -190
  10. package/fesm2022/_widget-chunk.mjs.map +1 -1
  11. package/fesm2022/accordion.mjs +129 -77
  12. package/fesm2022/accordion.mjs.map +1 -1
  13. package/fesm2022/aria.mjs +1 -1
  14. package/fesm2022/aria.mjs.map +1 -1
  15. package/fesm2022/combobox.mjs +140 -27
  16. package/fesm2022/combobox.mjs.map +1 -1
  17. package/fesm2022/grid.mjs +254 -68
  18. package/fesm2022/grid.mjs.map +1 -1
  19. package/fesm2022/listbox.mjs +54 -44
  20. package/fesm2022/listbox.mjs.map +1 -1
  21. package/fesm2022/menu.mjs +270 -108
  22. package/fesm2022/menu.mjs.map +1 -1
  23. package/fesm2022/private.mjs +752 -785
  24. package/fesm2022/private.mjs.map +1 -1
  25. package/fesm2022/tabs.mjs +101 -71
  26. package/fesm2022/tabs.mjs.map +1 -1
  27. package/fesm2022/toolbar.mjs +87 -64
  28. package/fesm2022/toolbar.mjs.map +1 -1
  29. package/fesm2022/tree.mjs +105 -60
  30. package/fesm2022/tree.mjs.map +1 -1
  31. package/package.json +2 -10
  32. package/types/_grid-chunk.d.ts +326 -83
  33. package/types/accordion.d.ts +134 -35
  34. package/types/combobox.d.ts +146 -13
  35. package/types/grid.d.ts +159 -32
  36. package/types/listbox.d.ts +59 -28
  37. package/types/menu.d.ts +151 -55
  38. package/types/private.d.ts +449 -567
  39. package/types/tabs.d.ts +121 -41
  40. package/types/toolbar.d.ts +74 -51
  41. package/types/tree.d.ts +116 -45
  42. package/_adev_assets/aria-radio-group.json +0 -389
  43. package/fesm2022/deferred-content.mjs +0 -99
  44. package/fesm2022/deferred-content.mjs.map +0 -1
  45. package/fesm2022/radio-group.mjs +0 -338
  46. package/fesm2022/radio-group.mjs.map +0 -1
  47. package/types/deferred-content.d.ts +0 -38
  48. package/types/radio-group.d.ts +0 -84
package/types/tabs.d.ts CHANGED
@@ -1,46 +1,54 @@
1
- import * as _angular_core from '@angular/core';
2
- import { Signal, OnInit, OnDestroy } from '@angular/core';
3
1
  import * as _angular_cdk_bidi from '@angular/cdk/bidi';
2
+ import * as _angular_core from '@angular/core';
3
+ import { OnInit, OnDestroy } from '@angular/core';
4
+ import * as i1 from '@angular/aria/private';
4
5
  import { TabPattern, TabPanelPattern, TabListPattern } from '@angular/aria/private';
5
- import * as i1 from '@angular/aria/deferred-content';
6
6
 
7
7
  interface HasElement {
8
- element: Signal<HTMLElement>;
8
+ element: HTMLElement;
9
9
  }
10
10
  /**
11
11
  * A Tabs container.
12
12
  *
13
- * Represents a set of layered sections of content. The Tabs is a container meant to be used with
14
- * TabList, Tab, and TabPanel as follows:
13
+ * The `ngTabs` directive represents a set of layered sections of content. It acts as the
14
+ * overarching container for a tabbed interface, coordinating the behavior of `ngTabList`,
15
+ * `ngTab`, and `ngTabPanel` directives.
15
16
  *
16
17
  * ```html
17
18
  * <div ngTabs>
18
- * <ul ngTabList>
19
+ * <ul ngTabList [(selectedTab)]="selectedTabValue">
19
20
  * <li ngTab value="tab1">Tab 1</li>
20
21
  * <li ngTab value="tab2">Tab 2</li>
21
22
  * <li ngTab value="tab3">Tab 3</li>
22
23
  * </ul>
23
24
  *
24
25
  * <div ngTabPanel value="tab1">
25
- * <ng-template ngTabContent>Tab content 1</ng-template>
26
+ * <ng-template ngTabContent>Content for Tab 1</ng-template>
26
27
  * </div>
27
28
  * <div ngTabPanel value="tab2">
28
- * <ng-template ngTabContent>Tab content 2</ng-template>
29
+ * <ng-template ngTabContent>Content for Tab 2</ng-template>
29
30
  * </div>
30
31
  * <div ngTabPanel value="tab3">
31
- * <ng-template ngTabContent>Tab content 3</ng-template>
32
+ * <ng-template ngTabContent>Content for Tab 3</ng-template>
32
33
  * </div>
34
+ * </div>
33
35
  * ```
36
+ *
37
+ * @developerPreview 21.0
34
38
  */
35
39
  declare class Tabs {
40
+ /** A reference to the host element. */
41
+ private readonly _elementRef;
42
+ /** A reference to the host element. */
43
+ readonly element: HTMLElement;
36
44
  /** The TabList nested inside of the container. */
37
45
  private readonly _tablist;
38
46
  /** The TabPanels nested inside of the container. */
39
47
  private readonly _unorderedPanels;
40
48
  /** The Tab UIPattern of the child Tabs. */
41
- tabs: Signal<TabPattern[] | undefined>;
49
+ readonly _tabPatterns: _angular_core.Signal<TabPattern[] | undefined>;
42
50
  /** The TabPanel UIPattern of the child TabPanels. */
43
- unorderedTabpanels: Signal<TabPanelPattern[]>;
51
+ readonly _unorderedTabpanelPatterns: _angular_core.Signal<TabPanelPattern[]>;
44
52
  register(child: TabList | TabPanel): void;
45
53
  deregister(child: TabList | TabPanel): void;
46
54
  static ɵfac: _angular_core.ɵɵFactoryDeclaration<Tabs, never>;
@@ -49,35 +57,57 @@ declare class Tabs {
49
57
  /**
50
58
  * A TabList container.
51
59
  *
52
- * Controls a list of Tab(s).
60
+ * The `ngTabList` directive controls a list of `ngTab` elements. It manages keyboard
61
+ * navigation, selection, and the overall orientation of the tabs. It should be placed
62
+ * within an `ngTabs` container.
63
+ *
64
+ * ```html
65
+ * <ul ngTabList [(selectedTab)]="mySelectedTab" orientation="horizontal" selectionMode="explicit">
66
+ * <li ngTab value="first">First Tab</li>
67
+ * <li ngTab value="second">Second Tab</li>
68
+ * </ul>
69
+ * ```
70
+ *
71
+ * @developerPreview 21.0
53
72
  */
54
73
  declare class TabList implements OnInit, OnDestroy {
55
- /** A reference to the tab list element. */
74
+ /** A reference to the host element. */
56
75
  private readonly _elementRef;
76
+ /** A reference to the host element. */
77
+ readonly element: HTMLElement;
57
78
  /** The parent Tabs. */
58
79
  private readonly _tabs;
59
80
  /** The Tabs nested inside of the TabList. */
60
81
  private readonly _unorderedTabs;
61
- /** The internal tab selection state. */
62
- private readonly _selection;
63
82
  /** Text direction. */
64
83
  readonly textDirection: _angular_core.WritableSignal<_angular_cdk_bidi.Direction>;
65
84
  /** The Tab UIPatterns of the child Tabs. */
66
- readonly tabs: Signal<TabPattern[]>;
85
+ readonly _tabPatterns: _angular_core.Signal<TabPattern[]>;
67
86
  /** Whether the tablist is vertically or horizontally oriented. */
68
87
  readonly orientation: _angular_core.InputSignal<"vertical" | "horizontal">;
69
88
  /** Whether focus should wrap when navigating. */
70
89
  readonly wrap: _angular_core.InputSignalWithTransform<boolean, unknown>;
71
- /** Whether disabled items in the list should be skipped when navigating. */
72
- readonly skipDisabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
73
- /** The focus strategy used by the tablist. */
90
+ /**
91
+ * Whether to allow disabled items to receive focus. When `true`, disabled items are
92
+ * focusable but not interactive. When `false`, disabled items are skipped during navigation.
93
+ */
94
+ readonly softDisabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
95
+ /**
96
+ * The focus strategy used by the tablist.
97
+ * - `roving`: Focus is moved to the active tab using `tabindex`.
98
+ * - `activedescendant`: Focus remains on the tablist container, and `aria-activedescendant` is used to indicate the active tab.
99
+ */
74
100
  readonly focusMode: _angular_core.InputSignal<"roving" | "activedescendant">;
75
- /** The selection strategy used by the tablist. */
101
+ /**
102
+ * The selection strategy used by the tablist.
103
+ * - `follow`: The focused tab is automatically selected.
104
+ * - `explicit`: Tabs are selected explicitly by the user (e.g., via click or spacebar).
105
+ */
76
106
  readonly selectionMode: _angular_core.InputSignal<"follow" | "explicit">;
77
- /** Whether the tablist is disabled. */
78
- readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
79
107
  /** The current selected tab. */
80
108
  readonly selectedTab: _angular_core.ModelSignal<string | undefined>;
109
+ /** Whether the tablist is disabled. */
110
+ readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
81
111
  /** The TabList UIPattern. */
82
112
  readonly _pattern: TabListPattern;
83
113
  /** Whether the tree has received focus yet. */
@@ -88,65 +118,115 @@ declare class TabList implements OnInit, OnDestroy {
88
118
  ngOnDestroy(): void;
89
119
  register(child: Tab): void;
90
120
  deregister(child: Tab): void;
121
+ /** Opens the tab panel with the specified value. */
122
+ open(value: string): boolean;
91
123
  static ɵfac: _angular_core.ɵɵFactoryDeclaration<TabList, never>;
92
- static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TabList, "[ngTabList]", ["ngTabList"], { "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "wrap": { "alias": "wrap"; "required": false; "isSignal": true; }; "skipDisabled": { "alias": "skipDisabled"; "required": false; "isSignal": true; }; "focusMode": { "alias": "focusMode"; "required": false; "isSignal": true; }; "selectionMode": { "alias": "selectionMode"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "selectedTab": { "alias": "selectedTab"; "required": false; "isSignal": true; }; }, { "selectedTab": "selectedTabChange"; }, never, never, true, never>;
124
+ static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TabList, "[ngTabList]", ["ngTabList"], { "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "wrap": { "alias": "wrap"; "required": false; "isSignal": true; }; "softDisabled": { "alias": "softDisabled"; "required": false; "isSignal": true; }; "focusMode": { "alias": "focusMode"; "required": false; "isSignal": true; }; "selectionMode": { "alias": "selectionMode"; "required": false; "isSignal": true; }; "selectedTab": { "alias": "selectedTab"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "selectedTab": "selectedTabChange"; }, never, never, true, never>;
93
125
  }
94
- /** A selectable tab in a TabList. */
126
+ /**
127
+ * A selectable tab in a TabList.
128
+ *
129
+ * The `ngTab` directive represents an individual tab control within an `ngTabList`. It
130
+ * requires a `value` that uniquely identifies it and links it to a corresponding `ngTabPanel`.
131
+ *
132
+ * ```html
133
+ * <li ngTab value="myTabId" [disabled]="isTabDisabled">
134
+ * My Tab Label
135
+ * </li>
136
+ * ```
137
+ *
138
+ * @developerPreview 21.0
139
+ */
95
140
  declare class Tab implements HasElement, OnInit, OnDestroy {
96
- /** A reference to the tab element. */
141
+ /** A reference to the host element. */
97
142
  private readonly _elementRef;
143
+ /** A reference to the host element. */
144
+ readonly element: HTMLElement;
98
145
  /** The parent Tabs. */
99
146
  private readonly _tabs;
100
147
  /** The parent TabList. */
101
148
  private readonly _tabList;
102
- /** A global unique identifier for the tab. */
103
- private readonly _id;
104
- /** The host native element. */
105
- readonly element: Signal<any>;
149
+ /** A unique identifier for the widget. */
150
+ readonly id: _angular_core.InputSignal<string>;
106
151
  /** The parent TabList UIPattern. */
107
- readonly tablist: Signal<TabListPattern>;
152
+ readonly tablist: _angular_core.Signal<TabListPattern>;
108
153
  /** The TabPanel UIPattern associated with the tab */
109
- readonly tabpanel: Signal<TabPanelPattern | undefined>;
154
+ readonly tabpanel: _angular_core.Signal<TabPanelPattern | undefined>;
110
155
  /** Whether a tab is disabled. */
111
156
  readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
112
- /** A local unique identifier for the tab. */
157
+ /** The remote tabpanel unique identifier. */
113
158
  readonly value: _angular_core.InputSignal<string>;
159
+ /** Whether the tab is active. */
160
+ readonly active: _angular_core.Signal<boolean>;
161
+ /** Whether the tab is selected. */
162
+ readonly selected: _angular_core.Signal<boolean>;
114
163
  /** The Tab UIPattern. */
115
164
  readonly _pattern: TabPattern;
165
+ /** Opens this tab panel. */
166
+ open(): void;
116
167
  ngOnInit(): void;
117
168
  ngOnDestroy(): void;
118
169
  static ɵfac: _angular_core.ɵɵFactoryDeclaration<Tab, never>;
119
- static ɵdir: _angular_core.ɵɵDirectiveDeclaration<Tab, "[ngTab]", ["ngTab"], { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
170
+ static ɵdir: _angular_core.ɵɵDirectiveDeclaration<Tab, "[ngTab]", ["ngTab"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
120
171
  }
121
172
  /**
122
173
  * A TabPanel container for the resources of layered content associated with a tab.
123
174
  *
124
- * If a tabpanel is hidden due to its corresponding tab is not activated, the `inert` attribute
125
- * will be applied to the tabpanel element to remove it from the accessibility tree and stop
126
- * all the keyboard and pointer interactions. Note that this does not visually hide the tabpenl
127
- * and a proper styling is required.
175
+ * The `ngTabPanel` directive holds the content for a specific tab. It is linked to an
176
+ * `ngTab` by a matching `value`. If a tab panel is hidden, the `inert` attribute will be
177
+ * applied to remove it from the accessibility tree. Proper styling is required for visual hiding.
178
+ *
179
+ * ```html
180
+ * <div ngTabPanel value="myTabId">
181
+ * <ng-template ngTabContent>
182
+ * <!-- Content for the tab panel -->
183
+ * </ng-template>
184
+ * </div>
185
+ * ```
186
+ *
187
+ * @developerPreview 21.0
128
188
  */
129
189
  declare class TabPanel implements OnInit, OnDestroy {
190
+ /** A reference to the host element. */
191
+ private readonly _elementRef;
192
+ /** A reference to the host element. */
193
+ readonly element: HTMLElement;
130
194
  /** The DeferredContentAware host directive. */
131
195
  private readonly _deferredContentAware;
132
196
  /** The parent Tabs. */
133
197
  private readonly _Tabs;
134
198
  /** A global unique identifier for the tab. */
135
- private readonly _id;
199
+ readonly id: _angular_core.InputSignal<string>;
136
200
  /** The Tab UIPattern associated with the tabpanel */
137
- readonly tab: Signal<TabPattern | undefined>;
201
+ readonly tab: _angular_core.Signal<TabPattern | undefined>;
138
202
  /** A local unique identifier for the tabpanel. */
139
203
  readonly value: _angular_core.InputSignal<string>;
204
+ /** Whether the tab panel is visible. */
205
+ readonly visible: _angular_core.Signal<boolean>;
140
206
  /** The TabPanel UIPattern. */
141
207
  readonly _pattern: TabPanelPattern;
142
208
  constructor();
143
209
  ngOnInit(): void;
144
210
  ngOnDestroy(): void;
145
211
  static ɵfac: _angular_core.ɵɵFactoryDeclaration<TabPanel, never>;
146
- static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TabPanel, "[ngTabPanel]", ["ngTabPanel"], { "value": { "alias": "value"; "required": true; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1.DeferredContentAware; inputs: { "preserveContent": "preserveContent"; }; outputs: {}; }]>;
212
+ static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TabPanel, "[ngTabPanel]", ["ngTabPanel"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": true; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1.DeferredContentAware; inputs: { "preserveContent": "preserveContent"; }; outputs: {}; }]>;
147
213
  }
148
214
  /**
149
215
  * A TabContent container for the lazy-loaded content.
216
+ *
217
+ * This structural directive should be applied to an `ng-template` within an `ngTabPanel`.
218
+ * It enables lazy loading of the tab's content, meaning the content is only rendered
219
+ * when the tab is activated for the first time.
220
+ *
221
+ * ```html
222
+ * <div ngTabPanel value="myTabId">
223
+ * <ng-template ngTabContent>
224
+ * <p>This content will be loaded when 'myTabId' is selected.</p>
225
+ * </ng-template>
226
+ * </div>
227
+ * ```
228
+ *
229
+ * @developerPreview 21.0
150
230
  */
151
231
  declare class TabContent {
152
232
  static ɵfac: _angular_core.ɵɵFactoryDeclaration<TabContent, never>;
@@ -1,39 +1,46 @@
1
1
  import * as _angular_core from '@angular/core';
2
- import { Signal, OnInit, OnDestroy } from '@angular/core';
2
+ import { OnInit, OnDestroy } from '@angular/core';
3
3
  import * as _angular_cdk_bidi from '@angular/cdk/bidi';
4
- import { ToolbarWidgetPattern, ToolbarWidgetGroupPattern, ToolbarPattern, ToolbarWidgetGroupControls } from '@angular/aria/private';
4
+ import { ToolbarWidgetPattern, ToolbarPattern, SignalLike, ToolbarWidgetGroupPattern } from '@angular/aria/private';
5
5
 
6
6
  /**
7
- * A toolbar widget container.
8
- *
9
- * Widgets such as radio groups or buttons are nested within a toolbar to allow for a single
10
- * place of reference for focus and navigation. The Toolbar is meant to be used in conjunction
11
- * with ToolbarWidget and RadioGroup as follows:
7
+ * A toolbar widget container for a group of interactive widgets, such as
8
+ * buttons or radio groups. It provides a single point of reference for keyboard navigation
9
+ * and focus management. It supports various orientations and disabled states.
12
10
  *
13
11
  * ```html
14
- * <div ngToolbar>
15
- * <button ngToolbarWidget>Button</button>
16
- * <div ngRadioGroup>
17
- * <label ngRadioButton value="1">Option 1</label>
18
- * <label ngRadioButton value="2">Option 2</label>
19
- * <label ngRadioButton value="3">Option 3</label>
20
- * </div>
12
+ * <div ngToolbar orientation="horizontal" [wrap]="true">
13
+ * <button ngToolbarWidget value="save">Save</button>
14
+ * <button ngToolbarWidget value="print">Print</button>
15
+ *
16
+ * <div ngToolbarWidgetGroup [(value)]="selectedAlignment">
17
+ * <button ngToolbarWidget value="left">Left</button>
18
+ * <button ngToolbarWidget value="center">Center</button>
19
+ * <button ngToolbarWidget value="right">Right</button>
20
+ * </div>
21
21
  * </div>
22
22
  * ```
23
+ *
24
+ * @developerPreview 21.0
23
25
  */
24
26
  declare class Toolbar<V> {
25
- /** A reference to the toolbar element. */
27
+ /** A reference to the host element. */
26
28
  private readonly _elementRef;
29
+ /** A reference to the host element. */
30
+ readonly element: HTMLElement;
27
31
  /** The TabList nested inside of the container. */
28
32
  private readonly _widgets;
29
- /** A signal wrapper for directionality. */
33
+ /** Text direction. */
30
34
  readonly textDirection: _angular_core.WritableSignal<_angular_cdk_bidi.Direction>;
31
35
  /** Sorted UIPatterns of the child widgets */
32
- readonly items: Signal<(ToolbarWidgetPattern<V> | ToolbarWidgetGroupPattern<V>)[]>;
36
+ readonly items: _angular_core.Signal<ToolbarWidgetPattern<V>[]>;
33
37
  /** Whether the toolbar is vertically or horizontally oriented. */
34
38
  readonly orientation: _angular_core.InputSignal<"vertical" | "horizontal">;
35
- /** Whether disabled items in the group should be skipped when navigating. */
36
- readonly skipDisabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
39
+ /**
40
+ * Whether to allow disabled items to receive focus. When `true`, disabled items are
41
+ * focusable but not interactive. When `false`, disabled items are skipped during navigation.
42
+ */
43
+ softDisabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
37
44
  /** Whether the toolbar is disabled. */
38
45
  readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
39
46
  /** Whether focus should wrap when navigating. */
@@ -41,73 +48,89 @@ declare class Toolbar<V> {
41
48
  /** The toolbar UIPattern. */
42
49
  readonly _pattern: ToolbarPattern<V>;
43
50
  /** Whether the toolbar has received focus yet. */
44
- private _hasFocused;
51
+ private _hasBeenFocused;
45
52
  constructor();
46
53
  onFocus(): void;
47
- register(widget: ToolbarWidget<V> | ToolbarWidgetGroup<V>): void;
48
- unregister(widget: ToolbarWidget<V> | ToolbarWidgetGroup<V>): void;
54
+ register(widget: ToolbarWidget<V>): void;
55
+ unregister(widget: ToolbarWidget<V>): void;
49
56
  /** Finds the toolbar item associated with a given element. */
50
57
  private _getItem;
51
58
  static ɵfac: _angular_core.ɵɵFactoryDeclaration<Toolbar<any>, never>;
52
- static ɵdir: _angular_core.ɵɵDirectiveDeclaration<Toolbar<any>, "[ngToolbar]", ["ngToolbar"], { "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "skipDisabled": { "alias": "skipDisabled"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "wrap": { "alias": "wrap"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
59
+ static ɵdir: _angular_core.ɵɵDirectiveDeclaration<Toolbar<any>, "[ngToolbar]", ["ngToolbar"], { "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "softDisabled": { "alias": "softDisabled"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "wrap": { "alias": "wrap"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
53
60
  }
54
61
  /**
55
62
  * A widget within a toolbar.
56
63
  *
57
- * A widget is anything that is within a toolbar. It should be applied to any native HTML element
58
- * that has the purpose of acting as a widget navigatable within a toolbar.
64
+ * The `ngToolbarWidget` directive should be applied to any native HTML element that acts
65
+ * as an interactive widget within an `ngToolbar` or `ngToolbarWidgetGroup`. It enables
66
+ * keyboard navigation and selection within the toolbar.
67
+ *
68
+ * ```html
69
+ * <button ngToolbarWidget value="action-id" [disabled]="isDisabled">
70
+ * Perform Action
71
+ * </button>
72
+ * ```
73
+ *
74
+ * @developerPreview 21.0
59
75
  */
60
76
  declare class ToolbarWidget<V> implements OnInit, OnDestroy {
61
- /** A reference to the widget element. */
77
+ /** A reference to the host element. */
62
78
  private readonly _elementRef;
79
+ /** A reference to the host element. */
80
+ readonly element: HTMLElement;
63
81
  /** The parent Toolbar. */
64
82
  private readonly _toolbar;
65
83
  /** A unique identifier for the widget. */
66
- private readonly _generatedId;
67
- /** A unique identifier for the widget. */
68
- readonly id: Signal<string>;
84
+ readonly id: _angular_core.InputSignal<string>;
69
85
  /** The parent Toolbar UIPattern. */
70
- readonly toolbar: Signal<ToolbarPattern<any>>;
71
- /** A reference to the widget element to be focused on navigation. */
72
- readonly element: Signal<any>;
86
+ readonly toolbar: _angular_core.Signal<ToolbarPattern<any>>;
73
87
  /** Whether the widget is disabled. */
74
88
  readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
75
89
  /** Whether the widget is 'hard' disabled, which is different from `aria-disabled`. A hard disabled widget cannot receive focus. */
76
- readonly hardDisabled: Signal<boolean>;
90
+ readonly hardDisabled: _angular_core.Signal<boolean>;
91
+ /** The optional ToolbarWidgetGroup this widget belongs to. */
92
+ readonly _group: ToolbarWidgetGroup<any> | null;
93
+ /** The value associated with the widget. */
94
+ readonly value: _angular_core.InputSignal<V>;
95
+ /** Whether the widget is currently active (focused). */
96
+ readonly active: _angular_core.Signal<boolean>;
97
+ /** Whether the widget is selected (only relevant in a selection group). */
98
+ readonly selected: () => boolean;
99
+ readonly group: SignalLike<ToolbarWidgetGroupPattern<ToolbarWidgetPattern<V>, V> | undefined>;
77
100
  /** The ToolbarWidget UIPattern. */
78
101
  readonly _pattern: ToolbarWidgetPattern<V>;
79
102
  ngOnInit(): void;
80
103
  ngOnDestroy(): void;
81
104
  static ɵfac: _angular_core.ɵɵFactoryDeclaration<ToolbarWidget<any>, never>;
82
- static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ToolbarWidget<any>, "[ngToolbarWidget]", ["ngToolbarWidget"], { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
105
+ static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ToolbarWidget<any>, "[ngToolbarWidget]", ["ngToolbarWidget"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
83
106
  }
84
107
  /**
85
- * A directive that groups toolbar widgets, used for more complex widgets like radio groups that
86
- * have their own internal navigation.
108
+ * A directive that groups toolbar widgets, used for more complex widgets like radio groups
109
+ * that have their own internal navigation.
110
+ *
111
+ * @developerPreview 21.0
87
112
  */
88
- declare class ToolbarWidgetGroup<V> implements OnInit, OnDestroy {
89
- /** A reference to the widget element. */
113
+ declare class ToolbarWidgetGroup<V> {
114
+ /** A reference to the host element. */
90
115
  private readonly _elementRef;
116
+ /** A reference to the host element. */
117
+ readonly element: HTMLElement;
91
118
  /** The parent Toolbar. */
92
119
  private readonly _toolbar;
93
- /** A unique identifier for the widget. */
94
- private readonly _generatedId;
95
- /** A unique identifier for the widget. */
96
- readonly id: Signal<string>;
120
+ /** The list of child widgets within the group. */
121
+ private readonly _widgets;
97
122
  /** The parent Toolbar UIPattern. */
98
- readonly toolbar: Signal<ToolbarPattern<any> | undefined>;
99
- /** A reference to the widget element to be focused on navigation. */
100
- readonly element: Signal<any>;
123
+ readonly toolbar: _angular_core.Signal<ToolbarPattern<any> | undefined>;
101
124
  /** Whether the widget group is disabled. */
102
125
  readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
103
- /** The controls that can be performed on the widget group. */
104
- readonly controls: _angular_core.WritableSignal<ToolbarWidgetGroupControls | undefined>;
126
+ /** The list of toolbar items within the group. */
127
+ readonly items: () => ToolbarWidgetPattern<any>[];
128
+ /** Whether the group allows multiple widgets to be selected. */
129
+ readonly multi: _angular_core.InputSignalWithTransform<boolean, unknown>;
105
130
  /** The ToolbarWidgetGroup UIPattern. */
106
- readonly _pattern: ToolbarWidgetGroupPattern<V>;
107
- ngOnInit(): void;
108
- ngOnDestroy(): void;
131
+ readonly _pattern: ToolbarWidgetGroupPattern<ToolbarWidgetPattern<V>, V>;
109
132
  static ɵfac: _angular_core.ɵɵFactoryDeclaration<ToolbarWidgetGroup<any>, never>;
110
- static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ToolbarWidgetGroup<any>, never, never, { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
133
+ static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ToolbarWidgetGroup<any>, "[ngToolbarWidgetGroup]", ["ngToolbarWidgetGroup"], { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "multi": { "alias": "multi"; "required": false; "isSignal": true; }; }, {}, ["_widgets"], never, true, never>;
111
134
  }
112
135
 
113
136
  export { Toolbar, ToolbarWidget, ToolbarWidgetGroup };