@angular/aria 21.0.2 → 21.0.4
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 +108 -0
- package/fesm2022/_accordion-chunk.mjs.map +1 -0
- package/fesm2022/_combobox-chunk.mjs +425 -0
- package/fesm2022/_combobox-chunk.mjs.map +1 -0
- package/fesm2022/_combobox-listbox-chunk.mjs +240 -0
- package/fesm2022/_combobox-listbox-chunk.mjs.map +1 -0
- package/fesm2022/_combobox-tree-chunk.mjs +331 -0
- package/fesm2022/_combobox-tree-chunk.mjs.map +1 -0
- package/fesm2022/_deferred-content-chunk.mjs +124 -0
- package/fesm2022/_deferred-content-chunk.mjs.map +1 -0
- package/fesm2022/_expansion-chunk.mjs +41 -0
- package/fesm2022/_expansion-chunk.mjs.map +1 -0
- package/fesm2022/_list-chunk.mjs +287 -0
- package/fesm2022/_list-chunk.mjs.map +1 -0
- package/fesm2022/_list-navigation-chunk.mjs +116 -0
- package/fesm2022/_list-navigation-chunk.mjs.map +1 -0
- package/fesm2022/_menu-chunk.mjs +515 -0
- package/fesm2022/_menu-chunk.mjs.map +1 -0
- package/fesm2022/_pointer-event-manager-chunk.mjs +54 -0
- package/fesm2022/_pointer-event-manager-chunk.mjs.map +1 -0
- package/fesm2022/_signal-like-chunk.mjs +118 -0
- package/fesm2022/_signal-like-chunk.mjs.map +1 -0
- package/fesm2022/_tabs-chunk.mjs +159 -0
- package/fesm2022/_tabs-chunk.mjs.map +1 -0
- package/fesm2022/_toolbar-widget-group-chunk.mjs +148 -0
- package/fesm2022/_toolbar-widget-group-chunk.mjs.map +1 -0
- package/fesm2022/_widget-chunk.mjs +5 -246
- package/fesm2022/_widget-chunk.mjs.map +1 -1
- package/fesm2022/accordion.mjs +73 -55
- package/fesm2022/accordion.mjs.map +1 -1
- package/fesm2022/aria.mjs +1 -1
- package/fesm2022/aria.mjs.map +1 -1
- package/fesm2022/combobox.mjs +166 -153
- package/fesm2022/combobox.mjs.map +1 -1
- package/fesm2022/grid.mjs +287 -261
- package/fesm2022/grid.mjs.map +1 -1
- package/fesm2022/listbox.mjs +211 -197
- package/fesm2022/listbox.mjs.map +1 -1
- package/fesm2022/menu.mjs +308 -286
- package/fesm2022/menu.mjs.map +1 -1
- package/fesm2022/private.mjs +15 -2329
- package/fesm2022/private.mjs.map +1 -1
- package/fesm2022/tabs.mjs +221 -199
- package/fesm2022/tabs.mjs.map +1 -1
- package/fesm2022/toolbar.mjs +64 -48
- package/fesm2022/toolbar.mjs.map +1 -1
- package/fesm2022/tree.mjs +54 -44
- package/fesm2022/tree.mjs.map +1 -1
- package/package.json +2 -2
- package/types/_accordion-chunk.d.ts +100 -0
- package/types/_combobox-chunk.d.ts +194 -0
- package/types/_deferred-content-chunk.d.ts +42 -0
- package/types/_expansion-chunk.d.ts +40 -0
- package/types/_grid-chunk.d.ts +43 -250
- package/types/_keyboard-event-manager-chunk.d.ts +68 -0
- package/types/_list-chunk.d.ts +211 -0
- package/types/_list-navigation-chunk.d.ts +119 -0
- package/types/_listbox-chunk.d.ts +107 -0
- package/types/_menu-chunk.d.ts +267 -0
- package/types/_pointer-event-manager-chunk.d.ts +34 -0
- package/types/_tabs-chunk.d.ts +153 -0
- package/types/_toolbar-chunk.d.ts +124 -0
- package/types/_tree-chunk.d.ts +185 -0
- package/types/accordion.d.ts +65 -54
- package/types/aria.d.ts +1 -1
- package/types/combobox.d.ts +86 -56
- package/types/grid.d.ts +47 -32
- package/types/listbox.d.ts +22 -7
- package/types/menu.d.ts +135 -117
- package/types/private.d.ts +28 -1376
- package/types/tabs.d.ts +109 -88
- package/types/toolbar.d.ts +77 -66
- package/types/tree.d.ts +118 -104
- package/_adev_assets/aria-accordion.json +0 -743
- package/_adev_assets/aria-combobox.json +0 -603
- package/_adev_assets/aria-grid.json +0 -893
- package/_adev_assets/aria-listbox.json +0 -540
- package/_adev_assets/aria-menu.json +0 -1049
- package/_adev_assets/aria-tabs.json +0 -880
- package/_adev_assets/aria-toolbar.json +0 -545
- package/_adev_assets/aria-tree.json +0 -853
package/types/tabs.d.ts
CHANGED
|
@@ -1,59 +1,68 @@
|
|
|
1
|
-
import * as _angular_cdk_bidi from '@angular/cdk/bidi';
|
|
2
1
|
import * as _angular_core from '@angular/core';
|
|
3
2
|
import { OnInit, OnDestroy } from '@angular/core';
|
|
4
|
-
import * as
|
|
5
|
-
import
|
|
3
|
+
import * as _angular_aria_private from '@angular/aria/private';
|
|
4
|
+
import * as _angular_aria_private_public_api from '@angular/aria/private/public-api';
|
|
5
|
+
import * as _angular_cdk_bidi from '@angular/cdk/bidi';
|
|
6
|
+
import { TabPattern, TabListPattern, TabPanelPattern } from './_tabs-chunk.js';
|
|
7
|
+
import { DeferredContentAware, DeferredContent } from './_deferred-content-chunk.js';
|
|
8
|
+
import './_keyboard-event-manager-chunk.js';
|
|
9
|
+
import './_list-navigation-chunk.js';
|
|
10
|
+
import './_pointer-event-manager-chunk.js';
|
|
11
|
+
import './_expansion-chunk.js';
|
|
6
12
|
|
|
7
13
|
interface HasElement {
|
|
8
14
|
element: HTMLElement;
|
|
9
15
|
}
|
|
16
|
+
|
|
10
17
|
/**
|
|
11
|
-
* A
|
|
18
|
+
* A selectable tab in a TabList.
|
|
12
19
|
*
|
|
13
|
-
* The `
|
|
14
|
-
*
|
|
15
|
-
* `ngTab`, and `ngTabPanel` directives.
|
|
20
|
+
* The `ngTab` directive represents an individual tab control within an `ngTabList`. It
|
|
21
|
+
* requires a `value` that uniquely identifies it and links it to a corresponding `ngTabPanel`.
|
|
16
22
|
*
|
|
17
23
|
* ```html
|
|
18
|
-
* <
|
|
19
|
-
*
|
|
20
|
-
*
|
|
21
|
-
* <li ngTab value="tab2">Tab 2</li>
|
|
22
|
-
* <li ngTab value="tab3">Tab 3</li>
|
|
23
|
-
* </ul>
|
|
24
|
-
*
|
|
25
|
-
* <div ngTabPanel value="tab1">
|
|
26
|
-
* <ng-template ngTabContent>Content for Tab 1</ng-template>
|
|
27
|
-
* </div>
|
|
28
|
-
* <div ngTabPanel value="tab2">
|
|
29
|
-
* <ng-template ngTabContent>Content for Tab 2</ng-template>
|
|
30
|
-
* </div>
|
|
31
|
-
* <div ngTabPanel value="tab3">
|
|
32
|
-
* <ng-template ngTabContent>Content for Tab 3</ng-template>
|
|
33
|
-
* </div>
|
|
34
|
-
* </div>
|
|
24
|
+
* <li ngTab value="myTabId" [disabled]="isTabDisabled">
|
|
25
|
+
* My Tab Label
|
|
26
|
+
* </li>
|
|
35
27
|
* ```
|
|
36
28
|
*
|
|
37
29
|
* @developerPreview 21.0
|
|
30
|
+
*
|
|
31
|
+
* @see [Tabs](guide/aria/tabs)
|
|
38
32
|
*/
|
|
39
|
-
declare class
|
|
33
|
+
declare class Tab implements HasElement, OnInit, OnDestroy {
|
|
40
34
|
/** A reference to the host element. */
|
|
41
35
|
private readonly _elementRef;
|
|
42
36
|
/** A reference to the host element. */
|
|
43
37
|
readonly element: HTMLElement;
|
|
44
|
-
/** The
|
|
45
|
-
private readonly
|
|
46
|
-
/** The
|
|
47
|
-
private readonly
|
|
48
|
-
/**
|
|
49
|
-
readonly
|
|
50
|
-
/** The
|
|
51
|
-
readonly
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
38
|
+
/** The parent Tabs. */
|
|
39
|
+
private readonly _tabs;
|
|
40
|
+
/** The parent TabList. */
|
|
41
|
+
private readonly _tabList;
|
|
42
|
+
/** A unique identifier for the widget. */
|
|
43
|
+
readonly id: _angular_core.InputSignal<string>;
|
|
44
|
+
/** The parent TabList UIPattern. */
|
|
45
|
+
private readonly _tablistPattern;
|
|
46
|
+
/** The TabPanel UIPattern associated with the tab */
|
|
47
|
+
private readonly _tabpanelPattern;
|
|
48
|
+
/** Whether a tab is disabled. */
|
|
49
|
+
readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
50
|
+
/** The remote tabpanel unique identifier. */
|
|
51
|
+
readonly value: _angular_core.InputSignal<string>;
|
|
52
|
+
/** Whether the tab is active. */
|
|
53
|
+
readonly active: _angular_core.Signal<boolean>;
|
|
54
|
+
/** Whether the tab is selected. */
|
|
55
|
+
readonly selected: _angular_core.Signal<boolean>;
|
|
56
|
+
/** The Tab UIPattern. */
|
|
57
|
+
readonly _pattern: TabPattern;
|
|
58
|
+
/** Opens this tab panel. */
|
|
59
|
+
open(): void;
|
|
60
|
+
ngOnInit(): void;
|
|
61
|
+
ngOnDestroy(): void;
|
|
62
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<Tab, never>;
|
|
63
|
+
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>;
|
|
56
64
|
}
|
|
65
|
+
|
|
57
66
|
/**
|
|
58
67
|
* A TabList container.
|
|
59
68
|
*
|
|
@@ -69,6 +78,8 @@ declare class Tabs {
|
|
|
69
78
|
* ```
|
|
70
79
|
*
|
|
71
80
|
* @developerPreview 21.0
|
|
81
|
+
*
|
|
82
|
+
* @see [Tabs](guide/aria/tabs)
|
|
72
83
|
*/
|
|
73
84
|
declare class TabList implements OnInit, OnDestroy {
|
|
74
85
|
/** A reference to the host element. */
|
|
@@ -82,7 +93,7 @@ declare class TabList implements OnInit, OnDestroy {
|
|
|
82
93
|
/** Text direction. */
|
|
83
94
|
readonly textDirection: _angular_core.WritableSignal<_angular_cdk_bidi.Direction>;
|
|
84
95
|
/** The Tab UIPatterns of the child Tabs. */
|
|
85
|
-
readonly _tabPatterns: _angular_core.Signal<TabPattern[]>;
|
|
96
|
+
readonly _tabPatterns: _angular_core.Signal<_angular_aria_private_public_api.TabPattern[]>;
|
|
86
97
|
/** Whether the tablist is vertically or horizontally oriented. */
|
|
87
98
|
readonly orientation: _angular_core.InputSignal<"vertical" | "horizontal">;
|
|
88
99
|
/** Whether focus should wrap when navigating. */
|
|
@@ -123,52 +134,7 @@ declare class TabList implements OnInit, OnDestroy {
|
|
|
123
134
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<TabList, never>;
|
|
124
135
|
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>;
|
|
125
136
|
}
|
|
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
|
-
*/
|
|
140
|
-
declare class Tab implements HasElement, OnInit, OnDestroy {
|
|
141
|
-
/** A reference to the host element. */
|
|
142
|
-
private readonly _elementRef;
|
|
143
|
-
/** A reference to the host element. */
|
|
144
|
-
readonly element: HTMLElement;
|
|
145
|
-
/** The parent Tabs. */
|
|
146
|
-
private readonly _tabs;
|
|
147
|
-
/** The parent TabList. */
|
|
148
|
-
private readonly _tabList;
|
|
149
|
-
/** A unique identifier for the widget. */
|
|
150
|
-
readonly id: _angular_core.InputSignal<string>;
|
|
151
|
-
/** The parent TabList UIPattern. */
|
|
152
|
-
private readonly _tablistPattern;
|
|
153
|
-
/** The TabPanel UIPattern associated with the tab */
|
|
154
|
-
private readonly _tabpanelPattern;
|
|
155
|
-
/** Whether a tab is disabled. */
|
|
156
|
-
readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
157
|
-
/** The remote tabpanel unique identifier. */
|
|
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>;
|
|
163
|
-
/** The Tab UIPattern. */
|
|
164
|
-
readonly _pattern: TabPattern;
|
|
165
|
-
/** Opens this tab panel. */
|
|
166
|
-
open(): void;
|
|
167
|
-
ngOnInit(): void;
|
|
168
|
-
ngOnDestroy(): void;
|
|
169
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<Tab, 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>;
|
|
171
|
-
}
|
|
137
|
+
|
|
172
138
|
/**
|
|
173
139
|
* A TabPanel container for the resources of layered content associated with a tab.
|
|
174
140
|
*
|
|
@@ -185,6 +151,8 @@ declare class Tab implements HasElement, OnInit, OnDestroy {
|
|
|
185
151
|
* ```
|
|
186
152
|
*
|
|
187
153
|
* @developerPreview 21.0
|
|
154
|
+
*
|
|
155
|
+
* @see [Tabs](guide/aria/tabs)
|
|
188
156
|
*/
|
|
189
157
|
declare class TabPanel implements OnInit, OnDestroy {
|
|
190
158
|
/** A reference to the host element. */
|
|
@@ -194,7 +162,7 @@ declare class TabPanel implements OnInit, OnDestroy {
|
|
|
194
162
|
/** The DeferredContentAware host directive. */
|
|
195
163
|
private readonly _deferredContentAware;
|
|
196
164
|
/** The parent Tabs. */
|
|
197
|
-
private readonly
|
|
165
|
+
private readonly _tabs;
|
|
198
166
|
/** A global unique identifier for the tab. */
|
|
199
167
|
readonly id: _angular_core.InputSignal<string>;
|
|
200
168
|
/** The Tab UIPattern associated with the tabpanel */
|
|
@@ -209,8 +177,59 @@ declare class TabPanel implements OnInit, OnDestroy {
|
|
|
209
177
|
ngOnInit(): void;
|
|
210
178
|
ngOnDestroy(): void;
|
|
211
179
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<TabPanel, never>;
|
|
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
|
|
180
|
+
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 DeferredContentAware; inputs: { "preserveContent": "preserveContent"; }; outputs: {}; }]>;
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
/**
|
|
184
|
+
* A Tabs container.
|
|
185
|
+
*
|
|
186
|
+
* The `ngTabs` directive represents a set of layered sections of content. It acts as the
|
|
187
|
+
* overarching container for a tabbed interface, coordinating the behavior of `ngTabList`,
|
|
188
|
+
* `ngTab`, and `ngTabPanel` directives.
|
|
189
|
+
*
|
|
190
|
+
* ```html
|
|
191
|
+
* <div ngTabs>
|
|
192
|
+
* <ul ngTabList [(selectedTab)]="selectedTabValue">
|
|
193
|
+
* <li ngTab value="tab1">Tab 1</li>
|
|
194
|
+
* <li ngTab value="tab2">Tab 2</li>
|
|
195
|
+
* <li ngTab value="tab3">Tab 3</li>
|
|
196
|
+
* </ul>
|
|
197
|
+
*
|
|
198
|
+
* <div ngTabPanel value="tab1">
|
|
199
|
+
* <ng-template ngTabContent>Content for Tab 1</ng-template>
|
|
200
|
+
* </div>
|
|
201
|
+
* <div ngTabPanel value="tab2">
|
|
202
|
+
* <ng-template ngTabContent>Content for Tab 2</ng-template>
|
|
203
|
+
* </div>
|
|
204
|
+
* <div ngTabPanel value="tab3">
|
|
205
|
+
* <ng-template ngTabContent>Content for Tab 3</ng-template>
|
|
206
|
+
* </div>
|
|
207
|
+
* </div>
|
|
208
|
+
* ```
|
|
209
|
+
*
|
|
210
|
+
* @developerPreview 21.0
|
|
211
|
+
*
|
|
212
|
+
* @see [Tabs](guide/aria/tabs)
|
|
213
|
+
*/
|
|
214
|
+
declare class Tabs {
|
|
215
|
+
/** A reference to the host element. */
|
|
216
|
+
private readonly _elementRef;
|
|
217
|
+
/** A reference to the host element. */
|
|
218
|
+
readonly element: HTMLElement;
|
|
219
|
+
/** The TabList nested inside of the container. */
|
|
220
|
+
private readonly _tablist;
|
|
221
|
+
/** The TabPanels nested inside of the container. */
|
|
222
|
+
private readonly _unorderedPanels;
|
|
223
|
+
/** The Tab UIPattern of the child Tabs. */
|
|
224
|
+
readonly _tabPatterns: _angular_core.Signal<_angular_aria_private.TabPattern[] | undefined>;
|
|
225
|
+
/** The TabPanel UIPattern of the child TabPanels. */
|
|
226
|
+
readonly _unorderedTabpanelPatterns: _angular_core.Signal<_angular_aria_private.TabPanelPattern[]>;
|
|
227
|
+
_register(child: TabList | TabPanel): void;
|
|
228
|
+
_unregister(child: TabList | TabPanel): void;
|
|
229
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<Tabs, never>;
|
|
230
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<Tabs, "[ngTabs]", ["ngTabs"], {}, {}, never, never, true, never>;
|
|
213
231
|
}
|
|
232
|
+
|
|
214
233
|
/**
|
|
215
234
|
* A TabContent container for the lazy-loaded content.
|
|
216
235
|
*
|
|
@@ -227,10 +246,12 @@ declare class TabPanel implements OnInit, OnDestroy {
|
|
|
227
246
|
* ```
|
|
228
247
|
*
|
|
229
248
|
* @developerPreview 21.0
|
|
249
|
+
*
|
|
250
|
+
* @see [Tabs](guide/aria/tabs)
|
|
230
251
|
*/
|
|
231
252
|
declare class TabContent {
|
|
232
253
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<TabContent, never>;
|
|
233
|
-
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TabContent, "ng-template[ngTabContent]", ["ngTabContent"], {}, {}, never, never, true, [{ directive: typeof
|
|
254
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TabContent, "ng-template[ngTabContent]", ["ngTabContent"], {}, {}, never, never, true, [{ directive: typeof DeferredContent; inputs: {}; outputs: {}; }]>;
|
|
234
255
|
}
|
|
235
256
|
|
|
236
|
-
export { Tab, TabContent, TabList, TabPanel, Tabs };
|
|
257
|
+
export { Tab, TabContent, TabList, TabPanel, Tabs, DeferredContent as ɵɵDeferredContent, DeferredContentAware as ɵɵDeferredContentAware };
|
package/types/toolbar.d.ts
CHANGED
|
@@ -1,65 +1,42 @@
|
|
|
1
|
+
import * as _angular_aria_private_public_api from '@angular/aria/private/public-api';
|
|
1
2
|
import * as _angular_core from '@angular/core';
|
|
2
3
|
import { OnInit, OnDestroy } from '@angular/core';
|
|
3
4
|
import * as _angular_cdk_bidi from '@angular/cdk/bidi';
|
|
4
|
-
import { ToolbarWidgetPattern, ToolbarPattern
|
|
5
|
+
import { ToolbarWidgetGroupPattern, ToolbarWidgetPattern, ToolbarPattern } from './_toolbar-chunk.js';
|
|
6
|
+
import './_list-navigation-chunk.js';
|
|
7
|
+
import './_list-chunk.js';
|
|
5
8
|
|
|
6
9
|
/**
|
|
7
|
-
* A toolbar
|
|
8
|
-
*
|
|
9
|
-
* and focus management. It supports various orientations and disabled states.
|
|
10
|
-
*
|
|
11
|
-
* ```html
|
|
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
|
-
* </div>
|
|
22
|
-
* ```
|
|
10
|
+
* A directive that groups toolbar widgets, used for more complex widgets like radio groups
|
|
11
|
+
* that have their own internal navigation.
|
|
23
12
|
*
|
|
24
13
|
* @developerPreview 21.0
|
|
14
|
+
*
|
|
15
|
+
* @see [Toolbar](guide/aria/toolbar)
|
|
25
16
|
*/
|
|
26
|
-
declare class
|
|
17
|
+
declare class ToolbarWidgetGroup<V> {
|
|
27
18
|
/** A reference to the host element. */
|
|
28
19
|
private readonly _elementRef;
|
|
29
20
|
/** A reference to the host element. */
|
|
30
21
|
readonly element: HTMLElement;
|
|
31
|
-
/** The
|
|
22
|
+
/** The parent Toolbar. */
|
|
23
|
+
private readonly _toolbar;
|
|
24
|
+
/** The list of child widgets within the group. */
|
|
32
25
|
private readonly _widgets;
|
|
33
|
-
/**
|
|
34
|
-
readonly
|
|
35
|
-
/**
|
|
36
|
-
readonly _itemPatterns: _angular_core.Signal<ToolbarWidgetPattern<V>[]>;
|
|
37
|
-
/** Whether the toolbar is vertically or horizontally oriented. */
|
|
38
|
-
readonly orientation: _angular_core.InputSignal<"vertical" | "horizontal">;
|
|
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>;
|
|
44
|
-
/** Whether the toolbar is disabled. */
|
|
26
|
+
/** The parent Toolbar UIPattern. */
|
|
27
|
+
private readonly _toolbarPattern;
|
|
28
|
+
/** Whether the widget group is disabled. */
|
|
45
29
|
readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
46
|
-
/**
|
|
47
|
-
readonly
|
|
48
|
-
/**
|
|
49
|
-
readonly
|
|
50
|
-
/** The
|
|
51
|
-
readonly _pattern:
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
constructor();
|
|
55
|
-
_onFocus(): void;
|
|
56
|
-
_register(widget: ToolbarWidget<V>): void;
|
|
57
|
-
_unregister(widget: ToolbarWidget<V>): void;
|
|
58
|
-
/** Finds the toolbar item associated with a given element. */
|
|
59
|
-
private _getItem;
|
|
60
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<Toolbar<any>, never>;
|
|
61
|
-
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; }; "values": { "alias": "values"; "required": false; "isSignal": true; }; }, { "values": "valuesChange"; }, never, never, true, never>;
|
|
30
|
+
/** The list of toolbar items within the group. */
|
|
31
|
+
private readonly _itemPatterns;
|
|
32
|
+
/** Whether the group allows multiple widgets to be selected. */
|
|
33
|
+
readonly multi: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
34
|
+
/** The ToolbarWidgetGroup UIPattern. */
|
|
35
|
+
readonly _pattern: ToolbarWidgetGroupPattern<ToolbarWidgetPattern<V>, V>;
|
|
36
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<ToolbarWidgetGroup<any>, never>;
|
|
37
|
+
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>;
|
|
62
38
|
}
|
|
39
|
+
|
|
63
40
|
/**
|
|
64
41
|
* A widget within a toolbar.
|
|
65
42
|
*
|
|
@@ -74,6 +51,8 @@ declare class Toolbar<V> {
|
|
|
74
51
|
* ```
|
|
75
52
|
*
|
|
76
53
|
* @developerPreview 21.0
|
|
54
|
+
*
|
|
55
|
+
* @see [Toolbar](guide/aria/toolbar)
|
|
77
56
|
*/
|
|
78
57
|
declare class ToolbarWidget<V> implements OnInit, OnDestroy {
|
|
79
58
|
/** A reference to the host element. */
|
|
@@ -85,13 +64,13 @@ declare class ToolbarWidget<V> implements OnInit, OnDestroy {
|
|
|
85
64
|
/** A unique identifier for the widget. */
|
|
86
65
|
readonly id: _angular_core.InputSignal<string>;
|
|
87
66
|
/** The parent Toolbar UIPattern. */
|
|
88
|
-
readonly _toolbarPattern: _angular_core.Signal<ToolbarPattern<
|
|
67
|
+
readonly _toolbarPattern: _angular_core.Signal<_angular_aria_private_public_api.ToolbarPattern<V>>;
|
|
89
68
|
/** Whether the widget is disabled. */
|
|
90
69
|
readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
91
70
|
/** Whether the widget is 'hard' disabled, which is different from `aria-disabled`. A hard disabled widget cannot receive focus. */
|
|
92
71
|
readonly hardDisabled: _angular_core.Signal<boolean>;
|
|
93
72
|
/** The optional ToolbarWidgetGroup this widget belongs to. */
|
|
94
|
-
readonly _group: ToolbarWidgetGroup<
|
|
73
|
+
readonly _group: ToolbarWidgetGroup<V> | null;
|
|
95
74
|
/** The value associated with the widget. */
|
|
96
75
|
readonly value: _angular_core.InputSignal<V>;
|
|
97
76
|
/** Whether the widget is currently active (focused). */
|
|
@@ -106,33 +85,65 @@ declare class ToolbarWidget<V> implements OnInit, OnDestroy {
|
|
|
106
85
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<ToolbarWidget<any>, never>;
|
|
107
86
|
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>;
|
|
108
87
|
}
|
|
88
|
+
|
|
109
89
|
/**
|
|
110
|
-
* A
|
|
111
|
-
*
|
|
90
|
+
* A toolbar widget container for a group of interactive widgets, such as
|
|
91
|
+
* buttons or radio groups. It provides a single point of reference for keyboard navigation
|
|
92
|
+
* and focus management. It supports various orientations and disabled states.
|
|
93
|
+
*
|
|
94
|
+
* ```html
|
|
95
|
+
* <div ngToolbar orientation="horizontal" [wrap]="true">
|
|
96
|
+
* <button ngToolbarWidget value="save">Save</button>
|
|
97
|
+
* <button ngToolbarWidget value="print">Print</button>
|
|
98
|
+
*
|
|
99
|
+
* <div ngToolbarWidgetGroup [(value)]="selectedAlignment">
|
|
100
|
+
* <button ngToolbarWidget value="left">Left</button>
|
|
101
|
+
* <button ngToolbarWidget value="center">Center</button>
|
|
102
|
+
* <button ngToolbarWidget value="right">Right</button>
|
|
103
|
+
* </div>
|
|
104
|
+
* </div>
|
|
105
|
+
* ```
|
|
112
106
|
*
|
|
113
107
|
* @developerPreview 21.0
|
|
108
|
+
*
|
|
109
|
+
* @see [Toolbar](guide/aria/toolbar)
|
|
114
110
|
*/
|
|
115
|
-
declare class
|
|
111
|
+
declare class Toolbar<V> {
|
|
116
112
|
/** A reference to the host element. */
|
|
117
113
|
private readonly _elementRef;
|
|
118
114
|
/** A reference to the host element. */
|
|
119
115
|
readonly element: HTMLElement;
|
|
120
|
-
/** The
|
|
121
|
-
private readonly _toolbar;
|
|
122
|
-
/** The list of child widgets within the group. */
|
|
116
|
+
/** The TabList nested inside of the container. */
|
|
123
117
|
private readonly _widgets;
|
|
124
|
-
/**
|
|
125
|
-
|
|
126
|
-
/**
|
|
118
|
+
/** Text direction. */
|
|
119
|
+
readonly textDirection: _angular_core.WritableSignal<_angular_cdk_bidi.Direction>;
|
|
120
|
+
/** Sorted UIPatterns of the child widgets */
|
|
121
|
+
readonly _itemPatterns: _angular_core.Signal<_angular_aria_private_public_api.ToolbarWidgetPattern<V>[]>;
|
|
122
|
+
/** Whether the toolbar is vertically or horizontally oriented. */
|
|
123
|
+
readonly orientation: _angular_core.InputSignal<"vertical" | "horizontal">;
|
|
124
|
+
/**
|
|
125
|
+
* Whether to allow disabled items to receive focus. When `true`, disabled items are
|
|
126
|
+
* focusable but not interactive. When `false`, disabled items are skipped during navigation.
|
|
127
|
+
*/
|
|
128
|
+
softDisabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
129
|
+
/** Whether the toolbar is disabled. */
|
|
127
130
|
readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
128
|
-
/**
|
|
129
|
-
|
|
130
|
-
/**
|
|
131
|
-
readonly
|
|
132
|
-
/** The
|
|
133
|
-
readonly _pattern:
|
|
134
|
-
|
|
135
|
-
|
|
131
|
+
/** Whether focus should wrap when navigating. */
|
|
132
|
+
readonly wrap: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
133
|
+
/** The values of the selected widgets within the toolbar. */
|
|
134
|
+
readonly values: _angular_core.ModelSignal<V[]>;
|
|
135
|
+
/** The toolbar UIPattern. */
|
|
136
|
+
readonly _pattern: ToolbarPattern<V>;
|
|
137
|
+
/** Whether the toolbar has received focus yet. */
|
|
138
|
+
private _hasBeenFocused;
|
|
139
|
+
constructor();
|
|
140
|
+
_onFocus(): void;
|
|
141
|
+
_register(widget: ToolbarWidget<V>): void;
|
|
142
|
+
_unregister(widget: ToolbarWidget<V>): void;
|
|
143
|
+
/** Finds the toolbar item associated with a given element. */
|
|
144
|
+
private _getItem;
|
|
145
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<Toolbar<any>, never>;
|
|
146
|
+
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; }; "values": { "alias": "values"; "required": false; "isSignal": true; }; }, { "values": "valuesChange"; }, never, never, true, never>;
|
|
136
147
|
}
|
|
137
148
|
|
|
138
149
|
export { Toolbar, ToolbarWidget, ToolbarWidgetGroup };
|