@angular/cdk-experimental 21.0.0-next.4 → 21.0.0-next.6
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/{accordion2.mjs → _accordion-chunk.mjs} +4 -3
- package/fesm2022/_accordion-chunk.mjs.map +1 -0
- package/fesm2022/_combobox-chunk.mjs +278 -0
- package/fesm2022/_combobox-chunk.mjs.map +1 -0
- package/fesm2022/{option.mjs → _combobox-listbox-chunk.mjs} +55 -8
- package/fesm2022/_combobox-listbox-chunk.mjs.map +1 -0
- package/fesm2022/_combobox-tree-chunk.mjs +398 -0
- package/fesm2022/_combobox-tree-chunk.mjs.map +1 -0
- package/fesm2022/{expansion.mjs → _expansion-chunk.mjs} +2 -2
- package/fesm2022/_expansion-chunk.mjs.map +1 -0
- package/fesm2022/{list.mjs → _list-chunk.mjs} +9 -5
- package/fesm2022/_list-chunk.mjs.map +1 -0
- package/fesm2022/_list-navigation-chunk.mjs +131 -0
- package/fesm2022/_list-navigation-chunk.mjs.map +1 -0
- package/fesm2022/{list-navigation.mjs → _pointer-event-manager-chunk.mjs} +2 -118
- package/fesm2022/_pointer-event-manager-chunk.mjs.map +1 -0
- package/fesm2022/{polyfill.mjs → _polyfill-chunk.mjs} +1 -1
- package/fesm2022/_polyfill-chunk.mjs.map +1 -0
- package/fesm2022/{tabs2.mjs → _tabs-chunk.mjs} +4 -4
- package/fesm2022/_tabs-chunk.mjs.map +1 -0
- package/fesm2022/_toolbar-chunk.mjs +273 -0
- package/fesm2022/_toolbar-chunk.mjs.map +1 -0
- package/fesm2022/_toolbar-radio-group-chunk.mjs +222 -0
- package/fesm2022/_toolbar-radio-group-chunk.mjs.map +1 -0
- package/fesm2022/accordion.mjs +4 -3
- package/fesm2022/accordion.mjs.map +1 -1
- package/fesm2022/cdk-experimental.mjs +1 -1
- package/fesm2022/cdk-experimental.mjs.map +1 -1
- package/fesm2022/column-resize.mjs +1 -1
- package/fesm2022/combobox.mjs +99 -308
- package/fesm2022/combobox.mjs.map +1 -1
- package/fesm2022/deferred-content.mjs +6 -7
- package/fesm2022/deferred-content.mjs.map +1 -1
- package/fesm2022/listbox.mjs +53 -12
- package/fesm2022/listbox.mjs.map +1 -1
- package/fesm2022/popover-edit.mjs +1 -1
- package/fesm2022/radio-group.mjs +42 -47
- package/fesm2022/radio-group.mjs.map +1 -1
- package/fesm2022/tabs.mjs +5 -4
- package/fesm2022/tabs.mjs.map +1 -1
- package/fesm2022/toolbar.mjs +69 -19
- package/fesm2022/toolbar.mjs.map +1 -1
- package/fesm2022/tree.mjs +57 -344
- package/fesm2022/tree.mjs.map +1 -1
- package/fesm2022/ui-patterns.mjs +11 -8
- package/fesm2022/ui-patterns.mjs.map +1 -1
- package/package.json +18 -18
- package/{accordion.d.d.ts → types/_accordion-chunk.d.ts} +3 -2
- package/types/_combobox-chunk.d.ts +138 -0
- package/{expansion.d.d.ts → types/_expansion-chunk.d.ts} +2 -2
- package/{list.d.d.ts → types/_list-chunk.d.ts} +4 -2
- package/{pointer-event-manager.d.d.ts → types/_list-navigation-chunk.d.ts} +7 -96
- package/{listbox.d.d.ts → types/_listbox-chunk.d.ts} +8 -4
- package/types/_pointer-event-manager-chunk.d.ts +98 -0
- package/types/_radio-group-chunk.d.ts +92 -0
- package/{tabs.d.d.ts → types/_tabs-chunk.d.ts} +4 -3
- package/types/_toolbar-chunk.d.ts +150 -0
- package/types/_tree-chunk.d.ts +139 -0
- package/{accordion/index.d.ts → types/accordion.d.ts} +4 -3
- package/types/combobox.d.ts +54 -0
- package/{deferred-content/index.d.ts → types/deferred-content.d.ts} +3 -3
- package/{listbox/index.d.ts → types/listbox.d.ts} +15 -5
- package/{radio-group/index.d.ts → types/radio-group.d.ts} +21 -23
- package/{tabs/index.d.ts → types/tabs.d.ts} +5 -4
- package/types/toolbar.d.ts +115 -0
- package/{tree/index.d.ts → types/tree.d.ts} +17 -137
- package/types/ui-patterns.d.ts +157 -0
- package/combobox/index.d.ts +0 -94
- package/fesm2022/accordion2.mjs.map +0 -1
- package/fesm2022/expansion.mjs.map +0 -1
- package/fesm2022/list-navigation.mjs.map +0 -1
- package/fesm2022/list.mjs.map +0 -1
- package/fesm2022/option.mjs.map +0 -1
- package/fesm2022/polyfill.mjs.map +0 -1
- package/fesm2022/radio-group2.mjs +0 -143
- package/fesm2022/radio-group2.mjs.map +0 -1
- package/fesm2022/tabs2.mjs.map +0 -1
- package/fesm2022/toolbar2.mjs +0 -224
- package/fesm2022/toolbar2.mjs.map +0 -1
- package/radio-group.d.d.ts +0 -80
- package/toolbar/index.d.ts +0 -91
- package/toolbar.d.d.ts +0 -136
- package/ui-patterns/index.d.ts +0 -9
- /package/{index.d.ts → types/cdk-experimental.d.ts} +0 -0
- /package/{column-resize/index.d.ts → types/column-resize.d.ts} +0 -0
- /package/{popover-edit/index.d.ts → types/popover-edit.d.ts} +0 -0
- /package/{scrolling/index.d.ts → types/scrolling.d.ts} +0 -0
- /package/{selection/index.d.ts → types/selection.d.ts} +0 -0
- /package/{table-scroll-container/index.d.ts → types/table-scroll-container.d.ts} +0 -0
package/fesm2022/toolbar2.mjs
DELETED
|
@@ -1,224 +0,0 @@
|
|
|
1
|
-
import { computed, signal } from '@angular/core';
|
|
2
|
-
import { List } from './list.mjs';
|
|
3
|
-
import { PointerEventManager, KeyboardEventManager } from './list-navigation.mjs';
|
|
4
|
-
|
|
5
|
-
/** Represents a radio button within a radio group. */
|
|
6
|
-
class RadioButtonPattern {
|
|
7
|
-
inputs;
|
|
8
|
-
/** A unique identifier for the radio button. */
|
|
9
|
-
id;
|
|
10
|
-
/** The value associated with the radio button. */
|
|
11
|
-
value;
|
|
12
|
-
/** The position of the radio button within the group. */
|
|
13
|
-
index = computed(() => this.group()?.listBehavior.inputs.items().indexOf(this) ?? -1);
|
|
14
|
-
/** Whether the radio button is currently the active one (focused). */
|
|
15
|
-
active = computed(() => this.group()?.listBehavior.inputs.activeItem() === this);
|
|
16
|
-
/** Whether the radio button is selected. */
|
|
17
|
-
selected = computed(() => !!this.group()?.listBehavior.inputs.value().includes(this.value()));
|
|
18
|
-
/** Whether the radio button is disabled. */
|
|
19
|
-
disabled;
|
|
20
|
-
/** A reference to the parent radio group. */
|
|
21
|
-
group;
|
|
22
|
-
/** The tabindex of the radio button. */
|
|
23
|
-
tabindex = computed(() => this.group()?.listBehavior.getItemTabindex(this));
|
|
24
|
-
/** The HTML element associated with the radio button. */
|
|
25
|
-
element;
|
|
26
|
-
/** The search term for typeahead. */
|
|
27
|
-
searchTerm = () => ''; // Radio groups do not support typeahead.
|
|
28
|
-
constructor(inputs) {
|
|
29
|
-
this.inputs = inputs;
|
|
30
|
-
this.id = inputs.id;
|
|
31
|
-
this.value = inputs.value;
|
|
32
|
-
this.group = inputs.group;
|
|
33
|
-
this.element = inputs.element;
|
|
34
|
-
this.disabled = inputs.disabled;
|
|
35
|
-
}
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
/** Controls the state of a toolbar. */
|
|
39
|
-
class ToolbarPattern {
|
|
40
|
-
inputs;
|
|
41
|
-
/** The list behavior for the toolbar. */
|
|
42
|
-
listBehavior;
|
|
43
|
-
/** Whether the tablist is vertically or horizontally oriented. */
|
|
44
|
-
orientation;
|
|
45
|
-
/** Whether the toolbar is disabled. */
|
|
46
|
-
disabled = computed(() => this.listBehavior.disabled());
|
|
47
|
-
/** The tabindex of the toolbar (if using activedescendant). */
|
|
48
|
-
tabindex = computed(() => this.listBehavior.tabindex());
|
|
49
|
-
/** The id of the current active widget (if using activedescendant). */
|
|
50
|
-
activedescendant = computed(() => this.listBehavior.activedescendant());
|
|
51
|
-
/** The key used to navigate to the previous widget. */
|
|
52
|
-
prevKey = computed(() => {
|
|
53
|
-
if (this.inputs.orientation() === 'vertical') {
|
|
54
|
-
return 'ArrowUp';
|
|
55
|
-
}
|
|
56
|
-
return this.inputs.textDirection() === 'rtl' ? 'ArrowRight' : 'ArrowLeft';
|
|
57
|
-
});
|
|
58
|
-
/** The key used to navigate to the next widget. */
|
|
59
|
-
nextKey = computed(() => {
|
|
60
|
-
if (this.inputs.orientation() === 'vertical') {
|
|
61
|
-
return 'ArrowDown';
|
|
62
|
-
}
|
|
63
|
-
return this.inputs.textDirection() === 'rtl' ? 'ArrowLeft' : 'ArrowRight';
|
|
64
|
-
});
|
|
65
|
-
/** The alternate key used to navigate to the previous widget */
|
|
66
|
-
altPrevKey = computed(() => {
|
|
67
|
-
if (this.inputs.orientation() === 'vertical') {
|
|
68
|
-
return this.inputs.textDirection() === 'rtl' ? 'ArrowRight' : 'ArrowLeft';
|
|
69
|
-
}
|
|
70
|
-
return 'ArrowUp';
|
|
71
|
-
});
|
|
72
|
-
/** The alternate key used to navigate to the next widget. */
|
|
73
|
-
altNextKey = computed(() => {
|
|
74
|
-
if (this.inputs.orientation() === 'vertical') {
|
|
75
|
-
return this.inputs.textDirection() === 'rtl' ? 'ArrowLeft' : 'ArrowRight';
|
|
76
|
-
}
|
|
77
|
-
return 'ArrowDown';
|
|
78
|
-
});
|
|
79
|
-
/** The keydown event manager for the toolbar. */
|
|
80
|
-
keydown = computed(() => {
|
|
81
|
-
const manager = new KeyboardEventManager();
|
|
82
|
-
const activeItem = this.inputs.activeItem();
|
|
83
|
-
const isRadioButton = activeItem instanceof RadioButtonPattern;
|
|
84
|
-
if (isRadioButton) {
|
|
85
|
-
manager
|
|
86
|
-
.on(' ', () => this.selectRadioButton())
|
|
87
|
-
.on('Enter', () => this.selectRadioButton())
|
|
88
|
-
.on(this.altNextKey, () => activeItem?.group()?.listBehavior.next())
|
|
89
|
-
.on(this.altPrevKey, () => activeItem?.group()?.listBehavior.prev());
|
|
90
|
-
}
|
|
91
|
-
else {
|
|
92
|
-
manager.on(this.altNextKey, () => this.listBehavior.next());
|
|
93
|
-
manager.on(this.altPrevKey, () => this.listBehavior.prev());
|
|
94
|
-
}
|
|
95
|
-
return manager
|
|
96
|
-
.on(this.prevKey, () => this.listBehavior.prev())
|
|
97
|
-
.on(this.nextKey, () => this.listBehavior.next())
|
|
98
|
-
.on('Home', () => this.listBehavior.first())
|
|
99
|
-
.on('End', () => this.listBehavior.last());
|
|
100
|
-
});
|
|
101
|
-
selectRadioButton() {
|
|
102
|
-
const activeItem = this.inputs.activeItem();
|
|
103
|
-
// activeItem must be a radio button
|
|
104
|
-
const group = activeItem.group();
|
|
105
|
-
if (group && !group.readonly() && !group.disabled()) {
|
|
106
|
-
group.listBehavior.selectOne();
|
|
107
|
-
}
|
|
108
|
-
}
|
|
109
|
-
/** The pointerdown event manager for the toolbar. */
|
|
110
|
-
pointerdown = computed(() => new PointerEventManager().on(e => this.goto(e)));
|
|
111
|
-
/** Navigates to the widget associated with the given pointer event. */
|
|
112
|
-
goto(event) {
|
|
113
|
-
const item = this._getItem(event);
|
|
114
|
-
if (!item)
|
|
115
|
-
return;
|
|
116
|
-
if (item instanceof RadioButtonPattern) {
|
|
117
|
-
const group = item.group();
|
|
118
|
-
if (group && !group.disabled()) {
|
|
119
|
-
group.listBehavior.goto(item, { selectOne: !group.readonly() });
|
|
120
|
-
}
|
|
121
|
-
}
|
|
122
|
-
else {
|
|
123
|
-
this.listBehavior.goto(item);
|
|
124
|
-
}
|
|
125
|
-
}
|
|
126
|
-
/** Handles keydown events for the toolbar. */
|
|
127
|
-
onKeydown(event) {
|
|
128
|
-
if (!this.disabled()) {
|
|
129
|
-
this.keydown().handle(event);
|
|
130
|
-
}
|
|
131
|
-
}
|
|
132
|
-
/** Handles pointerdown events for the toolbar. */
|
|
133
|
-
onPointerdown(event) {
|
|
134
|
-
if (!this.disabled()) {
|
|
135
|
-
this.pointerdown().handle(event);
|
|
136
|
-
}
|
|
137
|
-
}
|
|
138
|
-
/** Finds the Toolbar Widget associated with a pointer event target. */
|
|
139
|
-
_getItem(e) {
|
|
140
|
-
if (!(e.target instanceof HTMLElement)) {
|
|
141
|
-
return undefined;
|
|
142
|
-
}
|
|
143
|
-
// Assumes the target or its ancestor has role="radio" or role="button"
|
|
144
|
-
const element = e.target.closest('[role="button"], [role="radio"]');
|
|
145
|
-
return this.inputs.items().find(i => i.element() === element);
|
|
146
|
-
}
|
|
147
|
-
constructor(inputs) {
|
|
148
|
-
this.inputs = inputs;
|
|
149
|
-
this.orientation = inputs.orientation;
|
|
150
|
-
this.listBehavior = new List({
|
|
151
|
-
...inputs,
|
|
152
|
-
multi: () => false,
|
|
153
|
-
selectionMode: () => 'explicit',
|
|
154
|
-
value: signal([]),
|
|
155
|
-
typeaheadDelay: () => 0, // Toolbar widgets do not support typeahead.
|
|
156
|
-
});
|
|
157
|
-
}
|
|
158
|
-
/**
|
|
159
|
-
* Sets the toolbar to its default initial state.
|
|
160
|
-
*
|
|
161
|
-
* Sets the active index to the selected widget if one exists and is focusable.
|
|
162
|
-
* Otherwise, sets the active index to the first focusable widget.
|
|
163
|
-
*/
|
|
164
|
-
setDefaultState() {
|
|
165
|
-
let firstItem = null;
|
|
166
|
-
for (const item of this.inputs.items()) {
|
|
167
|
-
if (this.listBehavior.isFocusable(item)) {
|
|
168
|
-
if (!firstItem) {
|
|
169
|
-
firstItem = item;
|
|
170
|
-
}
|
|
171
|
-
if (item instanceof RadioButtonPattern && item.selected()) {
|
|
172
|
-
this.inputs.activeItem.set(item);
|
|
173
|
-
return;
|
|
174
|
-
}
|
|
175
|
-
}
|
|
176
|
-
}
|
|
177
|
-
if (firstItem) {
|
|
178
|
-
this.inputs.activeItem.set(firstItem);
|
|
179
|
-
}
|
|
180
|
-
}
|
|
181
|
-
/** Validates the state of the toolbar and returns a list of accessibility violations. */
|
|
182
|
-
validate() {
|
|
183
|
-
const violations = [];
|
|
184
|
-
if (this.inputs.skipDisabled()) {
|
|
185
|
-
for (const item of this.inputs.items()) {
|
|
186
|
-
if (item instanceof RadioButtonPattern && item.selected() && item.disabled()) {
|
|
187
|
-
violations.push("Accessibility Violation: A selected radio button inside the toolbar is disabled while 'skipDisabled' is true, making the selection unreachable via keyboard.");
|
|
188
|
-
}
|
|
189
|
-
}
|
|
190
|
-
}
|
|
191
|
-
return violations;
|
|
192
|
-
}
|
|
193
|
-
}
|
|
194
|
-
class ToolbarWidgetPattern {
|
|
195
|
-
inputs;
|
|
196
|
-
/** A unique identifier for the widget. */
|
|
197
|
-
id;
|
|
198
|
-
/** The html element that should receive focus. */
|
|
199
|
-
element;
|
|
200
|
-
/** Whether the widget is disabled. */
|
|
201
|
-
disabled;
|
|
202
|
-
/** A reference to the parent toolbar. */
|
|
203
|
-
parentToolbar;
|
|
204
|
-
/** The tabindex of the widgdet. */
|
|
205
|
-
tabindex = computed(() => this.inputs.parentToolbar().listBehavior.getItemTabindex(this));
|
|
206
|
-
/** The text used by the typeahead search. */
|
|
207
|
-
searchTerm = () => ''; // Unused because toolbar does not support typeahead.
|
|
208
|
-
/** The value associated with the widget. */
|
|
209
|
-
value = () => ''; // Unused because toolbar does not support selection.
|
|
210
|
-
/** The position of the widget within the toolbar. */
|
|
211
|
-
index = computed(() => this.parentToolbar()?.inputs.items().indexOf(this) ?? -1);
|
|
212
|
-
/** Whether the widget is currently the active one (focused). */
|
|
213
|
-
active = computed(() => this.parentToolbar()?.inputs.activeItem() === this);
|
|
214
|
-
constructor(inputs) {
|
|
215
|
-
this.inputs = inputs;
|
|
216
|
-
this.id = inputs.id;
|
|
217
|
-
this.element = inputs.element;
|
|
218
|
-
this.disabled = inputs.disabled;
|
|
219
|
-
this.parentToolbar = inputs.parentToolbar;
|
|
220
|
-
}
|
|
221
|
-
}
|
|
222
|
-
|
|
223
|
-
export { RadioButtonPattern, ToolbarPattern, ToolbarWidgetPattern };
|
|
224
|
-
//# sourceMappingURL=toolbar2.mjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"toolbar2.mjs","sources":["../../../../../k8-fastbuild-ST-199a4f3c4e20/bin/src/cdk-experimental/ui-patterns/radio-group/radio-button.ts","../../../../../k8-fastbuild-ST-199a4f3c4e20/bin/src/cdk-experimental/ui-patterns/toolbar/toolbar.ts"],"sourcesContent":["/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.dev/license\n */\n\nimport {computed} from '@angular/core';\nimport {SignalLike} from '../behaviors/signal-like/signal-like';\nimport {List, ListItem} from '../behaviors/list/list';\n\n/**\n * Represents the properties exposed by a toolbar widget that need to be accessed by a radio group.\n * This exists to avoid circular dependency errors between the toolbar and radio button.\n */\ntype ToolbarWidgetLike = {\n id: SignalLike<string>;\n index: SignalLike<number>;\n element: SignalLike<HTMLElement>;\n disabled: SignalLike<boolean>;\n searchTerm: SignalLike<any>;\n value: SignalLike<any>;\n};\n\n/**\n * Represents the properties exposed by a radio group that need to be accessed by a radio button.\n * This exists to avoid circular dependency errors between the radio group and radio button.\n */\ninterface RadioGroupLike<V> {\n /** The list behavior for the radio group. */\n listBehavior: List<RadioButtonPattern<V> | ToolbarWidgetLike, V>;\n /** Whether the list is readonly */\n readonly: SignalLike<boolean>;\n /** Whether the radio group is disabled. */\n disabled: SignalLike<boolean>;\n}\n\n/** Represents the required inputs for a radio button in a radio group. */\nexport interface RadioButtonInputs<V> extends Omit<ListItem<V>, 'searchTerm' | 'index'> {\n /** A reference to the parent radio group. */\n group: SignalLike<RadioGroupLike<V> | undefined>;\n}\n\n/** Represents a radio button within a radio group. */\nexport class RadioButtonPattern<V> {\n /** A unique identifier for the radio button. */\n id: SignalLike<string>;\n\n /** The value associated with the radio button. */\n value: SignalLike<V>;\n\n /** The position of the radio button within the group. */\n index: SignalLike<number> = computed(\n () => this.group()?.listBehavior.inputs.items().indexOf(this) ?? -1,\n );\n\n /** Whether the radio button is currently the active one (focused). */\n active = computed(() => this.group()?.listBehavior.inputs.activeItem() === this);\n\n /** Whether the radio button is selected. */\n selected: SignalLike<boolean> = computed(\n () => !!this.group()?.listBehavior.inputs.value().includes(this.value()),\n );\n\n /** Whether the radio button is disabled. */\n disabled: SignalLike<boolean>;\n\n /** A reference to the parent radio group. */\n group: SignalLike<RadioGroupLike<V> | undefined>;\n\n /** The tabindex of the radio button. */\n tabindex = computed(() => this.group()?.listBehavior.getItemTabindex(this));\n\n /** The HTML element associated with the radio button. */\n element: SignalLike<HTMLElement>;\n\n /** The search term for typeahead. */\n readonly searchTerm = () => ''; // Radio groups do not support typeahead.\n\n constructor(readonly inputs: RadioButtonInputs<V>) {\n this.id = inputs.id;\n this.value = inputs.value;\n this.group = inputs.group;\n this.element = inputs.element;\n this.disabled = inputs.disabled;\n }\n}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.dev/license\n */\n\nimport {computed, signal} from '@angular/core';\nimport {KeyboardEventManager, PointerEventManager} from '../behaviors/event-manager';\nimport {SignalLike} from '../behaviors/signal-like/signal-like';\nimport {RadioButtonPattern} from '../radio-group/radio-button';\nimport {List, ListInputs, ListItem} from '../behaviors/list/list';\n\n/** Represents the required inputs for a toolbar. */\nexport type ToolbarInputs<V> = Omit<\n ListInputs<ToolbarWidgetPattern | RadioButtonPattern<V>, V>,\n 'multi' | 'typeaheadDelay' | 'value' | 'selectionMode'\n>;\n\n/** Controls the state of a toolbar. */\nexport class ToolbarPattern<V> {\n /** The list behavior for the toolbar. */\n listBehavior: List<ToolbarWidgetPattern | RadioButtonPattern<V>, V>;\n\n /** Whether the tablist is vertically or horizontally oriented. */\n readonly orientation: SignalLike<'vertical' | 'horizontal'>;\n\n /** Whether the toolbar is disabled. */\n disabled = computed(() => this.listBehavior.disabled());\n\n /** The tabindex of the toolbar (if using activedescendant). */\n tabindex = computed(() => this.listBehavior.tabindex());\n\n /** The id of the current active widget (if using activedescendant). */\n activedescendant = computed(() => this.listBehavior.activedescendant());\n\n /** The key used to navigate to the previous widget. */\n prevKey = computed(() => {\n if (this.inputs.orientation() === 'vertical') {\n return 'ArrowUp';\n }\n return this.inputs.textDirection() === 'rtl' ? 'ArrowRight' : 'ArrowLeft';\n });\n\n /** The key used to navigate to the next widget. */\n nextKey = computed(() => {\n if (this.inputs.orientation() === 'vertical') {\n return 'ArrowDown';\n }\n return this.inputs.textDirection() === 'rtl' ? 'ArrowLeft' : 'ArrowRight';\n });\n\n /** The alternate key used to navigate to the previous widget */\n altPrevKey = computed(() => {\n if (this.inputs.orientation() === 'vertical') {\n return this.inputs.textDirection() === 'rtl' ? 'ArrowRight' : 'ArrowLeft';\n }\n return 'ArrowUp';\n });\n\n /** The alternate key used to navigate to the next widget. */\n altNextKey = computed(() => {\n if (this.inputs.orientation() === 'vertical') {\n return this.inputs.textDirection() === 'rtl' ? 'ArrowLeft' : 'ArrowRight';\n }\n return 'ArrowDown';\n });\n\n /** The keydown event manager for the toolbar. */\n keydown = computed(() => {\n const manager = new KeyboardEventManager();\n\n const activeItem = this.inputs.activeItem();\n const isRadioButton = activeItem instanceof RadioButtonPattern;\n\n if (isRadioButton) {\n manager\n .on(' ', () => this.selectRadioButton())\n .on('Enter', () => this.selectRadioButton())\n .on(this.altNextKey, () => activeItem?.group()?.listBehavior.next())\n .on(this.altPrevKey, () => activeItem?.group()?.listBehavior.prev());\n } else {\n manager.on(this.altNextKey, () => this.listBehavior.next());\n manager.on(this.altPrevKey, () => this.listBehavior.prev());\n }\n\n return manager\n .on(this.prevKey, () => this.listBehavior.prev())\n .on(this.nextKey, () => this.listBehavior.next())\n .on('Home', () => this.listBehavior.first())\n .on('End', () => this.listBehavior.last());\n });\n\n selectRadioButton() {\n const activeItem = this.inputs.activeItem() as RadioButtonPattern<V>;\n\n // activeItem must be a radio button\n const group = activeItem!.group();\n if (group && !group.readonly() && !group.disabled()) {\n group.listBehavior.selectOne();\n }\n }\n\n /** The pointerdown event manager for the toolbar. */\n pointerdown = computed(() => new PointerEventManager().on(e => this.goto(e)));\n\n /** Navigates to the widget associated with the given pointer event. */\n goto(event: PointerEvent) {\n const item = this._getItem(event);\n if (!item) return;\n\n if (item instanceof RadioButtonPattern) {\n const group = item.group();\n if (group && !group.disabled()) {\n group.listBehavior.goto(item, {selectOne: !group.readonly()});\n }\n } else {\n this.listBehavior.goto(item);\n }\n }\n\n /** Handles keydown events for the toolbar. */\n onKeydown(event: KeyboardEvent) {\n if (!this.disabled()) {\n this.keydown().handle(event);\n }\n }\n\n /** Handles pointerdown events for the toolbar. */\n onPointerdown(event: PointerEvent) {\n if (!this.disabled()) {\n this.pointerdown().handle(event);\n }\n }\n\n /** Finds the Toolbar Widget associated with a pointer event target. */\n private _getItem(e: PointerEvent): RadioButtonPattern<V> | ToolbarWidgetPattern | undefined {\n if (!(e.target instanceof HTMLElement)) {\n return undefined;\n }\n\n // Assumes the target or its ancestor has role=\"radio\" or role=\"button\"\n const element = e.target.closest('[role=\"button\"], [role=\"radio\"]');\n return this.inputs.items().find(i => i.element() === element);\n }\n\n constructor(readonly inputs: ToolbarInputs<V>) {\n this.orientation = inputs.orientation;\n\n this.listBehavior = new List({\n ...inputs,\n multi: () => false,\n selectionMode: () => 'explicit',\n value: signal([] as any),\n typeaheadDelay: () => 0, // Toolbar widgets do not support typeahead.\n });\n }\n\n /**\n * Sets the toolbar to its default initial state.\n *\n * Sets the active index to the selected widget if one exists and is focusable.\n * Otherwise, sets the active index to the first focusable widget.\n */\n setDefaultState() {\n let firstItem: RadioButtonPattern<V> | ToolbarWidgetPattern | null = null;\n\n for (const item of this.inputs.items()) {\n if (this.listBehavior.isFocusable(item)) {\n if (!firstItem) {\n firstItem = item;\n }\n if (item instanceof RadioButtonPattern && item.selected()) {\n this.inputs.activeItem.set(item);\n return;\n }\n }\n }\n\n if (firstItem) {\n this.inputs.activeItem.set(firstItem);\n }\n }\n\n /** Validates the state of the toolbar and returns a list of accessibility violations. */\n validate(): string[] {\n const violations: string[] = [];\n\n if (this.inputs.skipDisabled()) {\n for (const item of this.inputs.items()) {\n if (item instanceof RadioButtonPattern && item.selected() && item.disabled()) {\n violations.push(\n \"Accessibility Violation: A selected radio button inside the toolbar is disabled while 'skipDisabled' is true, making the selection unreachable via keyboard.\",\n );\n }\n }\n }\n return violations;\n }\n}\n\n/** Represents the required inputs for a toolbar widget in a toolbar. */\nexport interface ToolbarWidgetInputs extends Omit<ListItem<any>, 'searchTerm' | 'value' | 'index'> {\n /** A reference to the parent toolbar. */\n parentToolbar: SignalLike<ToolbarPattern<null>>;\n}\n\nexport class ToolbarWidgetPattern {\n /** A unique identifier for the widget. */\n id: SignalLike<string>;\n\n /** The html element that should receive focus. */\n readonly element: SignalLike<HTMLElement>;\n\n /** Whether the widget is disabled. */\n disabled: SignalLike<boolean>;\n\n /** A reference to the parent toolbar. */\n parentToolbar: SignalLike<ToolbarPattern<null> | undefined>;\n\n /** The tabindex of the widgdet. */\n tabindex = computed(() => this.inputs.parentToolbar().listBehavior.getItemTabindex(this));\n\n /** The text used by the typeahead search. */\n readonly searchTerm = () => ''; // Unused because toolbar does not support typeahead.\n\n /** The value associated with the widget. */\n readonly value = () => '' as any; // Unused because toolbar does not support selection.\n\n /** The position of the widget within the toolbar. */\n index = computed(() => this.parentToolbar()?.inputs.items().indexOf(this) ?? -1);\n\n /** Whether the widget is currently the active one (focused). */\n active = computed(() => this.parentToolbar()?.inputs.activeItem() === this);\n\n constructor(readonly inputs: ToolbarWidgetInputs) {\n this.id = inputs.id;\n this.element = inputs.element;\n this.disabled = inputs.disabled;\n this.parentToolbar = inputs.parentToolbar;\n }\n}\n"],"names":[],"mappings":"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"}
|
package/radio-group.d.d.ts
DELETED
|
@@ -1,80 +0,0 @@
|
|
|
1
|
-
import * as _angular_core from '@angular/core';
|
|
2
|
-
import { SignalLike, KeyboardEventManager, PointerEventManager } from './pointer-event-manager.d.js';
|
|
3
|
-
import { ListInputs, List } from './list.d.js';
|
|
4
|
-
import { RadioButtonPattern } from './toolbar.d.js';
|
|
5
|
-
|
|
6
|
-
/** Represents the required inputs for a radio group. */
|
|
7
|
-
type RadioGroupInputs<V> = Omit<ListInputs<RadioButtonPattern<V>, V>, 'multi' | 'selectionMode' | 'wrap' | 'typeaheadDelay'> & {
|
|
8
|
-
/** Whether the radio group is disabled. */
|
|
9
|
-
disabled: SignalLike<boolean>;
|
|
10
|
-
/** Whether the radio group is readonly. */
|
|
11
|
-
readonly: SignalLike<boolean>;
|
|
12
|
-
/** Parent toolbar of radio group */
|
|
13
|
-
toolbar: SignalLike<ToolbarLike<V> | undefined>;
|
|
14
|
-
};
|
|
15
|
-
/**
|
|
16
|
-
* Represents the properties exposed by a toolbar widget that need to be accessed by a radio group.
|
|
17
|
-
* This exists to avoid circular dependency errors between the toolbar and radio button.
|
|
18
|
-
*/
|
|
19
|
-
type ToolbarWidgetLike = {
|
|
20
|
-
id: SignalLike<string>;
|
|
21
|
-
index: SignalLike<number>;
|
|
22
|
-
element: SignalLike<HTMLElement>;
|
|
23
|
-
disabled: SignalLike<boolean>;
|
|
24
|
-
searchTerm: SignalLike<any>;
|
|
25
|
-
value: SignalLike<any>;
|
|
26
|
-
};
|
|
27
|
-
/**
|
|
28
|
-
* Represents the properties exposed by a toolbar that need to be accessed by a radio group.
|
|
29
|
-
* This exists to avoid circular dependency errors between the toolbar and radio button.
|
|
30
|
-
*/
|
|
31
|
-
interface ToolbarLike<V> {
|
|
32
|
-
listBehavior: List<RadioButtonPattern<V> | ToolbarWidgetLike, V>;
|
|
33
|
-
orientation: SignalLike<'vertical' | 'horizontal'>;
|
|
34
|
-
disabled: SignalLike<boolean>;
|
|
35
|
-
}
|
|
36
|
-
/** Controls the state of a radio group. */
|
|
37
|
-
declare class RadioGroupPattern<V> {
|
|
38
|
-
readonly inputs: RadioGroupInputs<V>;
|
|
39
|
-
/** The list behavior for the radio group. */
|
|
40
|
-
readonly listBehavior: List<RadioButtonPattern<V> | ToolbarWidgetLike, V>;
|
|
41
|
-
/** Whether the radio group is vertically or horizontally oriented. */
|
|
42
|
-
orientation: SignalLike<'vertical' | 'horizontal'>;
|
|
43
|
-
/** Whether the radio group is disabled. */
|
|
44
|
-
disabled: _angular_core.Signal<boolean>;
|
|
45
|
-
/** The currently selected radio button. */
|
|
46
|
-
selectedItem: _angular_core.Signal<ToolbarWidgetLike | RadioButtonPattern<V>>;
|
|
47
|
-
/** Whether the radio group is readonly. */
|
|
48
|
-
readonly: _angular_core.Signal<boolean>;
|
|
49
|
-
/** The tabindex of the radio group. */
|
|
50
|
-
tabindex: _angular_core.Signal<0 | -1>;
|
|
51
|
-
/** The id of the current active radio button (if using activedescendant). */
|
|
52
|
-
activedescendant: _angular_core.Signal<string | undefined>;
|
|
53
|
-
/** The key used to navigate to the previous radio button. */
|
|
54
|
-
prevKey: _angular_core.Signal<"ArrowUp" | "ArrowRight" | "ArrowLeft">;
|
|
55
|
-
/** The key used to navigate to the next radio button. */
|
|
56
|
-
nextKey: _angular_core.Signal<"ArrowRight" | "ArrowLeft" | "ArrowDown">;
|
|
57
|
-
/** The keydown event manager for the radio group. */
|
|
58
|
-
keydown: _angular_core.Signal<KeyboardEventManager<KeyboardEvent>>;
|
|
59
|
-
/** The pointerdown event manager for the radio group. */
|
|
60
|
-
pointerdown: _angular_core.Signal<PointerEventManager<PointerEvent>>;
|
|
61
|
-
constructor(inputs: RadioGroupInputs<V>);
|
|
62
|
-
/** Handles keydown events for the radio group. */
|
|
63
|
-
onKeydown(event: KeyboardEvent): void;
|
|
64
|
-
/** Handles pointerdown events for the radio group. */
|
|
65
|
-
onPointerdown(event: PointerEvent): void;
|
|
66
|
-
/**
|
|
67
|
-
* Sets the radio group to its default initial state.
|
|
68
|
-
*
|
|
69
|
-
* Sets the active index to the selected radio button if one exists and is focusable.
|
|
70
|
-
* Otherwise, sets the active index to the first focusable radio button.
|
|
71
|
-
*/
|
|
72
|
-
setDefaultState(): void;
|
|
73
|
-
/** Validates the state of the radio group and returns a list of accessibility violations. */
|
|
74
|
-
validate(): string[];
|
|
75
|
-
/** Finds the RadioButtonPattern associated with a pointer event target. */
|
|
76
|
-
private _getItem;
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
export { RadioGroupPattern };
|
|
80
|
-
export type { RadioGroupInputs, ToolbarLike };
|
package/toolbar/index.d.ts
DELETED
|
@@ -1,91 +0,0 @@
|
|
|
1
|
-
import * as _angular_core from '@angular/core';
|
|
2
|
-
import { Signal, OnInit, OnDestroy } from '@angular/core';
|
|
3
|
-
import * as _angular_cdk_bidi from '@angular/cdk/bidi';
|
|
4
|
-
import { RadioButtonPattern, ToolbarWidgetPattern, ToolbarPattern } from '../toolbar.d.js';
|
|
5
|
-
import '../pointer-event-manager.d.js';
|
|
6
|
-
import '../list.d.js';
|
|
7
|
-
|
|
8
|
-
/** Interface for a radio button that can be used with a toolbar. Based on radio-button in ui-patterns */
|
|
9
|
-
interface CdkRadioButtonInterface<V> {
|
|
10
|
-
/** The HTML element associated with the radio button. */
|
|
11
|
-
element: Signal<HTMLElement>;
|
|
12
|
-
/** Whether the radio button is disabled. */
|
|
13
|
-
disabled: Signal<boolean>;
|
|
14
|
-
pattern: RadioButtonPattern<V>;
|
|
15
|
-
}
|
|
16
|
-
/**
|
|
17
|
-
* A toolbar widget container.
|
|
18
|
-
*
|
|
19
|
-
* Widgets such as radio groups or buttons are nested within a toolbar to allow for a single
|
|
20
|
-
* place of reference for focus and navigation. The CdkToolbar is meant to be used in conjunction
|
|
21
|
-
* with CdkToolbarWidget and CdkRadioGroup as follows:
|
|
22
|
-
*
|
|
23
|
-
* ```html
|
|
24
|
-
* <div cdkToolbar>
|
|
25
|
-
* <button cdkToolbarWidget>Button</button>
|
|
26
|
-
* <div cdkRadioGroup>
|
|
27
|
-
* <label cdkRadioButton value="1">Option 1</label>
|
|
28
|
-
* <label cdkRadioButton value="2">Option 2</label>
|
|
29
|
-
* <label cdkRadioButton value="3">Option 3</label>
|
|
30
|
-
* </div>
|
|
31
|
-
* </div>
|
|
32
|
-
* ```
|
|
33
|
-
*/
|
|
34
|
-
declare class CdkToolbar<V> {
|
|
35
|
-
/** A reference to the toolbar element. */
|
|
36
|
-
private readonly _elementRef;
|
|
37
|
-
/** The CdkTabList nested inside of the container. */
|
|
38
|
-
private readonly _cdkWidgets;
|
|
39
|
-
/** A signal wrapper for directionality. */
|
|
40
|
-
textDirection: _angular_core.WritableSignal<_angular_cdk_bidi.Direction>;
|
|
41
|
-
/** Sorted UIPatterns of the child widgets */
|
|
42
|
-
items: Signal<(RadioButtonPattern<V> | ToolbarWidgetPattern)[]>;
|
|
43
|
-
/** Whether the toolbar is vertically or horizontally oriented. */
|
|
44
|
-
orientation: _angular_core.InputSignal<"vertical" | "horizontal">;
|
|
45
|
-
/** Whether disabled items in the group should be skipped when navigating. */
|
|
46
|
-
skipDisabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
47
|
-
/** Whether the toolbar is disabled. */
|
|
48
|
-
disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
49
|
-
/** Whether focus should wrap when navigating. */
|
|
50
|
-
readonly wrap: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
51
|
-
/** The toolbar UIPattern. */
|
|
52
|
-
pattern: ToolbarPattern<V>;
|
|
53
|
-
/** Whether the toolbar has received focus yet. */
|
|
54
|
-
private _hasFocused;
|
|
55
|
-
onFocus(): void;
|
|
56
|
-
constructor();
|
|
57
|
-
register(widget: CdkRadioButtonInterface<V> | CdkToolbarWidget): void;
|
|
58
|
-
unregister(widget: CdkRadioButtonInterface<V> | CdkToolbarWidget): void;
|
|
59
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<CdkToolbar<any>, never>;
|
|
60
|
-
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<CdkToolbar<any>, "[cdkToolbar]", ["cdkToolbar"], { "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>;
|
|
61
|
-
}
|
|
62
|
-
/**
|
|
63
|
-
* A widget within a toolbar.
|
|
64
|
-
*
|
|
65
|
-
* A widget is anything that is within a toolbar. It should be applied to any native HTML element
|
|
66
|
-
* that has the purpose of acting as a widget navigatable within a toolbar.
|
|
67
|
-
*/
|
|
68
|
-
declare class CdkToolbarWidget implements OnInit, OnDestroy {
|
|
69
|
-
/** A reference to the widget element. */
|
|
70
|
-
private readonly _elementRef;
|
|
71
|
-
/** The parent CdkToolbar. */
|
|
72
|
-
private readonly _cdkToolbar;
|
|
73
|
-
/** A unique identifier for the widget. */
|
|
74
|
-
private readonly _generatedId;
|
|
75
|
-
/** A unique identifier for the widget. */
|
|
76
|
-
protected id: Signal<string>;
|
|
77
|
-
/** The parent Toolbar UIPattern. */
|
|
78
|
-
protected parentToolbar: Signal<ToolbarPattern<any>>;
|
|
79
|
-
/** A reference to the widget element to be focused on navigation. */
|
|
80
|
-
element: Signal<any>;
|
|
81
|
-
/** Whether the widget is disabled. */
|
|
82
|
-
disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
83
|
-
readonly hardDisabled: Signal<boolean>;
|
|
84
|
-
pattern: ToolbarWidgetPattern;
|
|
85
|
-
ngOnInit(): void;
|
|
86
|
-
ngOnDestroy(): void;
|
|
87
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<CdkToolbarWidget, never>;
|
|
88
|
-
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<CdkToolbarWidget, "[cdkToolbarWidget]", ["cdkToolbarWidget"], { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
export { CdkToolbar, CdkToolbarWidget };
|
package/toolbar.d.d.ts
DELETED
|
@@ -1,136 +0,0 @@
|
|
|
1
|
-
import * as _angular_core from '@angular/core';
|
|
2
|
-
import { SignalLike, KeyboardEventManager, PointerEventManager } from './pointer-event-manager.d.js';
|
|
3
|
-
import { ListItem, List, ListInputs } from './list.d.js';
|
|
4
|
-
|
|
5
|
-
/**
|
|
6
|
-
* Represents the properties exposed by a toolbar widget that need to be accessed by a radio group.
|
|
7
|
-
* This exists to avoid circular dependency errors between the toolbar and radio button.
|
|
8
|
-
*/
|
|
9
|
-
type ToolbarWidgetLike = {
|
|
10
|
-
id: SignalLike<string>;
|
|
11
|
-
index: SignalLike<number>;
|
|
12
|
-
element: SignalLike<HTMLElement>;
|
|
13
|
-
disabled: SignalLike<boolean>;
|
|
14
|
-
searchTerm: SignalLike<any>;
|
|
15
|
-
value: SignalLike<any>;
|
|
16
|
-
};
|
|
17
|
-
/**
|
|
18
|
-
* Represents the properties exposed by a radio group that need to be accessed by a radio button.
|
|
19
|
-
* This exists to avoid circular dependency errors between the radio group and radio button.
|
|
20
|
-
*/
|
|
21
|
-
interface RadioGroupLike<V> {
|
|
22
|
-
/** The list behavior for the radio group. */
|
|
23
|
-
listBehavior: List<RadioButtonPattern<V> | ToolbarWidgetLike, V>;
|
|
24
|
-
/** Whether the list is readonly */
|
|
25
|
-
readonly: SignalLike<boolean>;
|
|
26
|
-
/** Whether the radio group is disabled. */
|
|
27
|
-
disabled: SignalLike<boolean>;
|
|
28
|
-
}
|
|
29
|
-
/** Represents the required inputs for a radio button in a radio group. */
|
|
30
|
-
interface RadioButtonInputs<V> extends Omit<ListItem<V>, 'searchTerm' | 'index'> {
|
|
31
|
-
/** A reference to the parent radio group. */
|
|
32
|
-
group: SignalLike<RadioGroupLike<V> | undefined>;
|
|
33
|
-
}
|
|
34
|
-
/** Represents a radio button within a radio group. */
|
|
35
|
-
declare class RadioButtonPattern<V> {
|
|
36
|
-
readonly inputs: RadioButtonInputs<V>;
|
|
37
|
-
/** A unique identifier for the radio button. */
|
|
38
|
-
id: SignalLike<string>;
|
|
39
|
-
/** The value associated with the radio button. */
|
|
40
|
-
value: SignalLike<V>;
|
|
41
|
-
/** The position of the radio button within the group. */
|
|
42
|
-
index: SignalLike<number>;
|
|
43
|
-
/** Whether the radio button is currently the active one (focused). */
|
|
44
|
-
active: _angular_core.Signal<boolean>;
|
|
45
|
-
/** Whether the radio button is selected. */
|
|
46
|
-
selected: SignalLike<boolean>;
|
|
47
|
-
/** Whether the radio button is disabled. */
|
|
48
|
-
disabled: SignalLike<boolean>;
|
|
49
|
-
/** A reference to the parent radio group. */
|
|
50
|
-
group: SignalLike<RadioGroupLike<V> | undefined>;
|
|
51
|
-
/** The tabindex of the radio button. */
|
|
52
|
-
tabindex: _angular_core.Signal<0 | -1 | undefined>;
|
|
53
|
-
/** The HTML element associated with the radio button. */
|
|
54
|
-
element: SignalLike<HTMLElement>;
|
|
55
|
-
/** The search term for typeahead. */
|
|
56
|
-
readonly searchTerm: () => string;
|
|
57
|
-
constructor(inputs: RadioButtonInputs<V>);
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
/** Represents the required inputs for a toolbar. */
|
|
61
|
-
type ToolbarInputs<V> = Omit<ListInputs<ToolbarWidgetPattern | RadioButtonPattern<V>, V>, 'multi' | 'typeaheadDelay' | 'value' | 'selectionMode'>;
|
|
62
|
-
/** Controls the state of a toolbar. */
|
|
63
|
-
declare class ToolbarPattern<V> {
|
|
64
|
-
readonly inputs: ToolbarInputs<V>;
|
|
65
|
-
/** The list behavior for the toolbar. */
|
|
66
|
-
listBehavior: List<ToolbarWidgetPattern | RadioButtonPattern<V>, V>;
|
|
67
|
-
/** Whether the tablist is vertically or horizontally oriented. */
|
|
68
|
-
readonly orientation: SignalLike<'vertical' | 'horizontal'>;
|
|
69
|
-
/** Whether the toolbar is disabled. */
|
|
70
|
-
disabled: _angular_core.Signal<boolean>;
|
|
71
|
-
/** The tabindex of the toolbar (if using activedescendant). */
|
|
72
|
-
tabindex: _angular_core.Signal<0 | -1>;
|
|
73
|
-
/** The id of the current active widget (if using activedescendant). */
|
|
74
|
-
activedescendant: _angular_core.Signal<string | undefined>;
|
|
75
|
-
/** The key used to navigate to the previous widget. */
|
|
76
|
-
prevKey: _angular_core.Signal<"ArrowUp" | "ArrowRight" | "ArrowLeft">;
|
|
77
|
-
/** The key used to navigate to the next widget. */
|
|
78
|
-
nextKey: _angular_core.Signal<"ArrowRight" | "ArrowLeft" | "ArrowDown">;
|
|
79
|
-
/** The alternate key used to navigate to the previous widget */
|
|
80
|
-
altPrevKey: _angular_core.Signal<"ArrowUp" | "ArrowRight" | "ArrowLeft">;
|
|
81
|
-
/** The alternate key used to navigate to the next widget. */
|
|
82
|
-
altNextKey: _angular_core.Signal<"ArrowRight" | "ArrowLeft" | "ArrowDown">;
|
|
83
|
-
/** The keydown event manager for the toolbar. */
|
|
84
|
-
keydown: _angular_core.Signal<KeyboardEventManager<KeyboardEvent>>;
|
|
85
|
-
selectRadioButton(): void;
|
|
86
|
-
/** The pointerdown event manager for the toolbar. */
|
|
87
|
-
pointerdown: _angular_core.Signal<PointerEventManager<PointerEvent>>;
|
|
88
|
-
/** Navigates to the widget associated with the given pointer event. */
|
|
89
|
-
goto(event: PointerEvent): void;
|
|
90
|
-
/** Handles keydown events for the toolbar. */
|
|
91
|
-
onKeydown(event: KeyboardEvent): void;
|
|
92
|
-
/** Handles pointerdown events for the toolbar. */
|
|
93
|
-
onPointerdown(event: PointerEvent): void;
|
|
94
|
-
/** Finds the Toolbar Widget associated with a pointer event target. */
|
|
95
|
-
private _getItem;
|
|
96
|
-
constructor(inputs: ToolbarInputs<V>);
|
|
97
|
-
/**
|
|
98
|
-
* Sets the toolbar to its default initial state.
|
|
99
|
-
*
|
|
100
|
-
* Sets the active index to the selected widget if one exists and is focusable.
|
|
101
|
-
* Otherwise, sets the active index to the first focusable widget.
|
|
102
|
-
*/
|
|
103
|
-
setDefaultState(): void;
|
|
104
|
-
/** Validates the state of the toolbar and returns a list of accessibility violations. */
|
|
105
|
-
validate(): string[];
|
|
106
|
-
}
|
|
107
|
-
/** Represents the required inputs for a toolbar widget in a toolbar. */
|
|
108
|
-
interface ToolbarWidgetInputs extends Omit<ListItem<any>, 'searchTerm' | 'value' | 'index'> {
|
|
109
|
-
/** A reference to the parent toolbar. */
|
|
110
|
-
parentToolbar: SignalLike<ToolbarPattern<null>>;
|
|
111
|
-
}
|
|
112
|
-
declare class ToolbarWidgetPattern {
|
|
113
|
-
readonly inputs: ToolbarWidgetInputs;
|
|
114
|
-
/** A unique identifier for the widget. */
|
|
115
|
-
id: SignalLike<string>;
|
|
116
|
-
/** The html element that should receive focus. */
|
|
117
|
-
readonly element: SignalLike<HTMLElement>;
|
|
118
|
-
/** Whether the widget is disabled. */
|
|
119
|
-
disabled: SignalLike<boolean>;
|
|
120
|
-
/** A reference to the parent toolbar. */
|
|
121
|
-
parentToolbar: SignalLike<ToolbarPattern<null> | undefined>;
|
|
122
|
-
/** The tabindex of the widgdet. */
|
|
123
|
-
tabindex: _angular_core.Signal<0 | -1>;
|
|
124
|
-
/** The text used by the typeahead search. */
|
|
125
|
-
readonly searchTerm: () => string;
|
|
126
|
-
/** The value associated with the widget. */
|
|
127
|
-
readonly value: () => any;
|
|
128
|
-
/** The position of the widget within the toolbar. */
|
|
129
|
-
index: _angular_core.Signal<number>;
|
|
130
|
-
/** Whether the widget is currently the active one (focused). */
|
|
131
|
-
active: _angular_core.Signal<boolean>;
|
|
132
|
-
constructor(inputs: ToolbarWidgetInputs);
|
|
133
|
-
}
|
|
134
|
-
|
|
135
|
-
export { RadioButtonPattern, ToolbarPattern, ToolbarWidgetPattern };
|
|
136
|
-
export type { RadioButtonInputs, ToolbarInputs, ToolbarWidgetInputs };
|
package/ui-patterns/index.d.ts
DELETED
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
export { ListboxInputs, ListboxPattern, OptionInputs, OptionPattern } from '../listbox.d.js';
|
|
2
|
-
export { RadioGroupInputs, RadioGroupPattern, ToolbarLike } from '../radio-group.d.js';
|
|
3
|
-
export { RadioButtonInputs, RadioButtonPattern, ToolbarInputs, ToolbarPattern, ToolbarWidgetInputs, ToolbarWidgetPattern } from '../toolbar.d.js';
|
|
4
|
-
export { SignalLike, WritableSignalLike, convertGetterSetterToWritableSignalLike } from '../pointer-event-manager.d.js';
|
|
5
|
-
export { TabInputs, TabListInputs, TabListPattern, TabPanelInputs, TabPanelPattern, TabPattern } from '../tabs.d.js';
|
|
6
|
-
export { AccordionGroupInputs, AccordionGroupPattern, AccordionPanelInputs, AccordionPanelPattern, AccordionTriggerInputs, AccordionTriggerPattern } from '../accordion.d.js';
|
|
7
|
-
import '@angular/core';
|
|
8
|
-
import '../list.d.js';
|
|
9
|
-
import '../expansion.d.js';
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|