@angular/aria 21.0.3 → 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.
Files changed (76) hide show
  1. package/fesm2022/_accordion-chunk.mjs +108 -0
  2. package/fesm2022/_accordion-chunk.mjs.map +1 -0
  3. package/fesm2022/_combobox-chunk.mjs +2 -2
  4. package/fesm2022/_combobox-chunk.mjs.map +1 -1
  5. package/fesm2022/_combobox-listbox-chunk.mjs +4 -286
  6. package/fesm2022/_combobox-listbox-chunk.mjs.map +1 -1
  7. package/fesm2022/_combobox-tree-chunk.mjs +331 -0
  8. package/fesm2022/_combobox-tree-chunk.mjs.map +1 -0
  9. package/fesm2022/_deferred-content-chunk.mjs +124 -0
  10. package/fesm2022/_deferred-content-chunk.mjs.map +1 -0
  11. package/fesm2022/_expansion-chunk.mjs +41 -0
  12. package/fesm2022/_expansion-chunk.mjs.map +1 -0
  13. package/fesm2022/_list-chunk.mjs +287 -0
  14. package/fesm2022/_list-chunk.mjs.map +1 -0
  15. package/fesm2022/_list-navigation-chunk.mjs +1 -1
  16. package/fesm2022/_list-navigation-chunk.mjs.map +1 -1
  17. package/fesm2022/_menu-chunk.mjs +515 -0
  18. package/fesm2022/_menu-chunk.mjs.map +1 -0
  19. package/fesm2022/_pointer-event-manager-chunk.mjs +2 -82
  20. package/fesm2022/_pointer-event-manager-chunk.mjs.map +1 -1
  21. package/fesm2022/_signal-like-chunk.mjs +118 -0
  22. package/fesm2022/_signal-like-chunk.mjs.map +1 -0
  23. package/fesm2022/_tabs-chunk.mjs +159 -0
  24. package/fesm2022/_tabs-chunk.mjs.map +1 -0
  25. package/fesm2022/_toolbar-widget-group-chunk.mjs +148 -0
  26. package/fesm2022/_toolbar-widget-group-chunk.mjs.map +1 -0
  27. package/fesm2022/_widget-chunk.mjs +3 -2
  28. package/fesm2022/_widget-chunk.mjs.map +1 -1
  29. package/fesm2022/accordion.mjs +57 -52
  30. package/fesm2022/accordion.mjs.map +1 -1
  31. package/fesm2022/aria.mjs +1 -1
  32. package/fesm2022/aria.mjs.map +1 -1
  33. package/fesm2022/combobox.mjs +77 -40
  34. package/fesm2022/combobox.mjs.map +1 -1
  35. package/fesm2022/grid.mjs +70 -68
  36. package/fesm2022/grid.mjs.map +1 -1
  37. package/fesm2022/listbox.mjs +49 -47
  38. package/fesm2022/listbox.mjs.map +1 -1
  39. package/fesm2022/menu.mjs +69 -65
  40. package/fesm2022/menu.mjs.map +1 -1
  41. package/fesm2022/private.mjs +13 -1402
  42. package/fesm2022/private.mjs.map +1 -1
  43. package/fesm2022/tabs.mjs +49 -41
  44. package/fesm2022/tabs.mjs.map +1 -1
  45. package/fesm2022/toolbar.mjs +49 -45
  46. package/fesm2022/toolbar.mjs.map +1 -1
  47. package/fesm2022/tree.mjs +52 -44
  48. package/fesm2022/tree.mjs.map +1 -1
  49. package/package.json +2 -2
  50. package/types/_accordion-chunk.d.ts +100 -0
  51. package/types/_combobox-chunk.d.ts +187 -91
  52. package/types/_deferred-content-chunk.d.ts +42 -0
  53. package/types/_expansion-chunk.d.ts +40 -0
  54. package/types/_grid-chunk.d.ts +41 -41
  55. package/types/_keyboard-event-manager-chunk.d.ts +68 -0
  56. package/types/_list-chunk.d.ts +8 -9
  57. package/types/_list-navigation-chunk.d.ts +8 -101
  58. package/types/_listbox-chunk.d.ts +17 -16
  59. package/types/_menu-chunk.d.ts +267 -0
  60. package/types/_pointer-event-manager-chunk.d.ts +34 -0
  61. package/types/_tabs-chunk.d.ts +153 -0
  62. package/types/_toolbar-chunk.d.ts +124 -0
  63. package/types/_tree-chunk.d.ts +185 -0
  64. package/types/accordion.d.ts +13 -5
  65. package/types/aria.d.ts +1 -1
  66. package/types/combobox.d.ts +122 -6
  67. package/types/grid.d.ts +10 -0
  68. package/types/listbox.d.ts +17 -5
  69. package/types/menu.d.ts +23 -5
  70. package/types/private.d.ts +25 -885
  71. package/types/tabs.d.ts +24 -8
  72. package/types/toolbar.d.ts +12 -4
  73. package/types/tree.d.ts +16 -5
  74. package/fesm2022/_combobox-popup-chunk.mjs +0 -46
  75. package/fesm2022/_combobox-popup-chunk.mjs.map +0 -1
  76. package/types/_combobox-chunk.d2.ts +0 -193
@@ -1,1406 +1,17 @@
1
1
  export { ComboboxDialogPattern, ComboboxPattern } from './_combobox-chunk.mjs';
2
- import { List } from './_combobox-listbox-chunk.mjs';
3
2
  export { ComboboxListboxPattern, ListboxPattern, OptionPattern } from './_combobox-listbox-chunk.mjs';
4
- import * as i0 from '@angular/core';
5
- import { computed, signal, model, Directive, inject, TemplateRef, ViewContainerRef, afterRenderEffect } from '@angular/core';
6
- import { KeyboardEventManager, PointerEventManager, Modifier } from './_pointer-event-manager-chunk.mjs';
7
- import { ListFocus, ListNavigation } from './_list-navigation-chunk.mjs';
3
+ export { MenuBarPattern, MenuItemPattern, MenuPattern, MenuTriggerPattern } from './_menu-chunk.mjs';
4
+ export { untracked } from '@angular/core/primitives/signals';
5
+ export { computed, convertGetterSetterToWritableSignalLike, linkedSignal, signal } from './_signal-like-chunk.mjs';
6
+ export { TabListPattern, TabPanelPattern, TabPattern } from './_tabs-chunk.mjs';
7
+ export { ToolbarPattern, ToolbarWidgetGroupPattern, ToolbarWidgetPattern } from './_toolbar-widget-group-chunk.mjs';
8
+ export { AccordionGroupPattern, AccordionPanelPattern, AccordionTriggerPattern } from './_accordion-chunk.mjs';
9
+ export { ComboboxTreePattern, TreeItemPattern, TreePattern } from './_combobox-tree-chunk.mjs';
8
10
  export { GridCellPattern, GridCellWidgetPattern, GridPattern, GridRowPattern } from './_widget-chunk.mjs';
9
-
10
- class MenuPattern {
11
- inputs;
12
- id;
13
- role = () => 'menu';
14
- disabled = () => this.inputs.disabled();
15
- visible = computed(() => this.inputs.parent() ? !!this.inputs.parent()?.expanded() : true);
16
- listBehavior;
17
- isFocused = signal(false);
18
- hasBeenFocused = signal(false);
19
- hasBeenHovered = signal(false);
20
- _openTimeout;
21
- _closeTimeout;
22
- tabIndex = () => this.listBehavior.tabIndex();
23
- shouldFocus = computed(() => {
24
- const root = this.root();
25
- if (root instanceof MenuTriggerPattern) {
26
- return true;
27
- }
28
- if (root instanceof MenuBarPattern || root instanceof MenuPattern) {
29
- return root.isFocused();
30
- }
31
- return false;
32
- });
33
- _expandKey = computed(() => {
34
- return this.inputs.textDirection() === 'rtl' ? 'ArrowLeft' : 'ArrowRight';
35
- });
36
- _collapseKey = computed(() => {
37
- return this.inputs.textDirection() === 'rtl' ? 'ArrowRight' : 'ArrowLeft';
38
- });
39
- dynamicSpaceKey = computed(() => this.listBehavior.isTyping() ? '' : ' ');
40
- typeaheadRegexp = /^.$/;
41
- root = computed(() => {
42
- const parent = this.inputs.parent();
43
- if (!parent) {
44
- return this;
45
- }
46
- if (parent instanceof MenuTriggerPattern) {
47
- return parent;
48
- }
49
- const grandparent = parent.inputs.parent();
50
- if (grandparent instanceof MenuBarPattern) {
51
- return grandparent;
52
- }
53
- return grandparent?.root();
54
- });
55
- keydownManager = computed(() => {
56
- return new KeyboardEventManager().on('ArrowDown', () => this.next()).on('ArrowUp', () => this.prev()).on('Home', () => this.first()).on('End', () => this.last()).on('Enter', () => this.trigger()).on('Escape', () => this.closeAll()).on(this._expandKey, () => this.expand()).on(this._collapseKey, () => this.collapse()).on(this.dynamicSpaceKey, () => this.trigger()).on(this.typeaheadRegexp, e => this.listBehavior.search(e.key));
57
- });
58
- constructor(inputs) {
59
- this.inputs = inputs;
60
- this.id = inputs.id;
61
- this.listBehavior = new List({
62
- ...inputs,
63
- values: signal([])
64
- });
65
- }
66
- setDefaultState() {
67
- if (!this.inputs.parent()) {
68
- this.listBehavior.goto(this.inputs.items()[0], {
69
- focusElement: false
70
- });
71
- }
72
- }
73
- onKeydown(event) {
74
- this.keydownManager().handle(event);
75
- }
76
- onMouseOver(event) {
77
- if (!this.visible()) {
78
- return;
79
- }
80
- this.hasBeenHovered.set(true);
81
- const item = this.inputs.items().find(i => i.element()?.contains(event.target));
82
- if (!item) {
83
- return;
84
- }
85
- const parent = this.inputs.parent();
86
- const activeItem = this?.inputs.activeItem();
87
- if (parent instanceof MenuItemPattern) {
88
- const grandparent = parent.inputs.parent();
89
- if (grandparent instanceof MenuPattern) {
90
- grandparent._clearTimeouts();
91
- grandparent.listBehavior.goto(parent, {
92
- focusElement: false
93
- });
94
- }
95
- }
96
- if (activeItem && activeItem !== item) {
97
- this._closeItem(activeItem);
98
- }
99
- if (item.expanded()) {
100
- this._clearCloseTimeout();
101
- }
102
- this._openItem(item);
103
- this.listBehavior.goto(item, {
104
- focusElement: this.shouldFocus()
105
- });
106
- }
107
- _closeItem(item) {
108
- this._clearOpenTimeout();
109
- if (!this._closeTimeout) {
110
- this._closeTimeout = setTimeout(() => {
111
- item.close();
112
- this._closeTimeout = undefined;
113
- }, this.inputs.expansionDelay());
114
- }
115
- }
116
- _openItem(item) {
117
- this._clearOpenTimeout();
118
- this._openTimeout = setTimeout(() => {
119
- item.open();
120
- this._openTimeout = undefined;
121
- }, this.inputs.expansionDelay());
122
- }
123
- onMouseOut(event) {
124
- this._clearOpenTimeout();
125
- if (this.isFocused()) {
126
- return;
127
- }
128
- const root = this.root();
129
- const parent = this.inputs.parent();
130
- const relatedTarget = event.relatedTarget;
131
- if (!root || !parent || parent instanceof MenuTriggerPattern) {
132
- return;
133
- }
134
- const grandparent = parent.inputs.parent();
135
- if (!grandparent || grandparent instanceof MenuBarPattern) {
136
- return;
137
- }
138
- if (!grandparent.inputs.element()?.contains(relatedTarget)) {
139
- parent.close();
140
- }
141
- }
142
- onClick(event) {
143
- const relatedTarget = event.target;
144
- const item = this.inputs.items().find(i => i.element()?.contains(relatedTarget));
145
- if (item) {
146
- item.open();
147
- this.listBehavior.goto(item);
148
- this.submit(item);
149
- }
150
- }
151
- onFocusIn() {
152
- this.isFocused.set(true);
153
- this.hasBeenFocused.set(true);
154
- }
155
- onFocusOut(event) {
156
- const parent = this.inputs.parent();
157
- const parentEl = parent?.inputs.element();
158
- const relatedTarget = event.relatedTarget;
159
- if (!relatedTarget) {
160
- this.isFocused.set(false);
161
- this.inputs.parent()?.close({
162
- refocus: true
163
- });
164
- }
165
- if (parent instanceof MenuItemPattern) {
166
- const grandparent = parent.inputs.parent();
167
- const siblings = grandparent?.inputs.items().filter(i => i !== parent);
168
- const item = siblings?.find(i => i.element()?.contains(relatedTarget));
169
- if (item) {
170
- return;
171
- }
172
- }
173
- if (this.visible() && !parentEl?.contains(relatedTarget) && !this.inputs.element()?.contains(relatedTarget)) {
174
- this.isFocused.set(false);
175
- this.inputs.parent()?.close();
176
- }
177
- }
178
- prev() {
179
- this.inputs.activeItem()?.close();
180
- this.listBehavior.prev();
181
- }
182
- next() {
183
- this.inputs.activeItem()?.close();
184
- this.listBehavior.next();
185
- }
186
- first() {
187
- this.inputs.activeItem()?.close();
188
- this.listBehavior.first();
189
- }
190
- last() {
191
- this.inputs.activeItem()?.close();
192
- this.listBehavior.last();
193
- }
194
- trigger() {
195
- this.inputs.activeItem()?.hasPopup() ? this.inputs.activeItem()?.open({
196
- first: true
197
- }) : this.submit();
198
- }
199
- submit(item = this.inputs.activeItem()) {
200
- const root = this.root();
201
- if (item && !item.disabled()) {
202
- const isMenu = root instanceof MenuPattern;
203
- const isMenuBar = root instanceof MenuBarPattern;
204
- const isMenuTrigger = root instanceof MenuTriggerPattern;
205
- if (!item.submenu() && isMenuTrigger) {
206
- root.close({
207
- refocus: true
208
- });
209
- }
210
- if (!item.submenu() && isMenuBar) {
211
- root.close();
212
- root?.inputs.onSelect?.(item.value());
213
- }
214
- if (!item.submenu() && isMenu) {
215
- root.inputs.activeItem()?.close({
216
- refocus: true
217
- });
218
- root?.inputs.onSelect?.(item.value());
219
- }
220
- }
221
- }
222
- collapse() {
223
- const root = this.root();
224
- const parent = this.inputs.parent();
225
- if (parent instanceof MenuItemPattern && !(parent.inputs.parent() instanceof MenuBarPattern)) {
226
- parent.close({
227
- refocus: true
228
- });
229
- } else if (root instanceof MenuBarPattern) {
230
- root.prev();
231
- }
232
- }
233
- expand() {
234
- const root = this.root();
235
- const activeItem = this.inputs.activeItem();
236
- if (activeItem?.submenu()) {
237
- activeItem.open({
238
- first: true
239
- });
240
- } else if (root instanceof MenuBarPattern) {
241
- root.next();
242
- }
243
- }
244
- close() {
245
- this.inputs.parent()?.close();
246
- }
247
- closeAll() {
248
- const root = this.root();
249
- if (root instanceof MenuTriggerPattern) {
250
- root.close({
251
- refocus: true
252
- });
253
- }
254
- if (root instanceof MenuBarPattern) {
255
- root.close();
256
- }
257
- if (root instanceof MenuPattern) {
258
- root.inputs.activeItem()?.close({
259
- refocus: true
260
- });
261
- }
262
- }
263
- _clearTimeouts() {
264
- this._clearOpenTimeout();
265
- this._clearCloseTimeout();
266
- }
267
- _clearOpenTimeout() {
268
- if (this._openTimeout) {
269
- clearTimeout(this._openTimeout);
270
- this._openTimeout = undefined;
271
- }
272
- }
273
- _clearCloseTimeout() {
274
- if (this._closeTimeout) {
275
- clearTimeout(this._closeTimeout);
276
- this._closeTimeout = undefined;
277
- }
278
- }
279
- }
280
- class MenuBarPattern {
281
- inputs;
282
- listBehavior;
283
- tabIndex = () => this.listBehavior.tabIndex();
284
- _nextKey = computed(() => {
285
- return this.inputs.textDirection() === 'rtl' ? 'ArrowLeft' : 'ArrowRight';
286
- });
287
- _previousKey = computed(() => {
288
- return this.inputs.textDirection() === 'rtl' ? 'ArrowRight' : 'ArrowLeft';
289
- });
290
- dynamicSpaceKey = computed(() => this.listBehavior.isTyping() ? '' : ' ');
291
- typeaheadRegexp = /^.$/;
292
- isFocused = signal(false);
293
- hasBeenFocused = signal(false);
294
- disabled = () => this.inputs.disabled();
295
- keydownManager = computed(() => {
296
- return new KeyboardEventManager().on(this._nextKey, () => this.next()).on(this._previousKey, () => this.prev()).on('End', () => this.listBehavior.last()).on('Home', () => this.listBehavior.first()).on('Enter', () => this.inputs.activeItem()?.open({
297
- first: true
298
- })).on('ArrowUp', () => this.inputs.activeItem()?.open({
299
- last: true
300
- })).on('ArrowDown', () => this.inputs.activeItem()?.open({
301
- first: true
302
- })).on(this.dynamicSpaceKey, () => this.inputs.activeItem()?.open({
303
- first: true
304
- })).on(this.typeaheadRegexp, e => this.listBehavior.search(e.key));
305
- });
306
- constructor(inputs) {
307
- this.inputs = inputs;
308
- this.listBehavior = new List(inputs);
309
- }
310
- setDefaultState() {
311
- this.inputs.activeItem.set(this.inputs.items()[0]);
312
- }
313
- onKeydown(event) {
314
- this.keydownManager().handle(event);
315
- }
316
- onClick(event) {
317
- const item = this.inputs.items().find(i => i.element()?.contains(event.target));
318
- if (!item) {
319
- return;
320
- }
321
- this.goto(item);
322
- item.expanded() ? item.close() : item.open();
323
- }
324
- onMouseOver(event) {
325
- const item = this.inputs.items().find(i => i.element()?.contains(event.target));
326
- if (item) {
327
- this.goto(item, {
328
- focusElement: this.isFocused()
329
- });
330
- }
331
- }
332
- onFocusIn() {
333
- this.isFocused.set(true);
334
- this.hasBeenFocused.set(true);
335
- }
336
- onFocusOut(event) {
337
- const relatedTarget = event.relatedTarget;
338
- if (!this.inputs.element()?.contains(relatedTarget)) {
339
- this.isFocused.set(false);
340
- this.close();
341
- }
342
- }
343
- goto(item, opts) {
344
- const prevItem = this.inputs.activeItem();
345
- this.listBehavior.goto(item, opts);
346
- if (prevItem?.expanded()) {
347
- prevItem?.close();
348
- this.inputs.activeItem()?.open();
349
- }
350
- if (item === prevItem) {
351
- if (item.expanded() && item.submenu()?.inputs.activeItem()) {
352
- item.submenu()?.inputs.activeItem()?.close();
353
- item.submenu()?.listBehavior.unfocus();
354
- }
355
- }
356
- }
357
- next() {
358
- const prevItem = this.inputs.activeItem();
359
- this.listBehavior.next();
360
- if (prevItem?.expanded()) {
361
- prevItem?.close();
362
- this.inputs.activeItem()?.open({
363
- first: true
364
- });
365
- }
366
- }
367
- prev() {
368
- const prevItem = this.inputs.activeItem();
369
- this.listBehavior.prev();
370
- if (prevItem?.expanded()) {
371
- prevItem?.close();
372
- this.inputs.activeItem()?.open({
373
- first: true
374
- });
375
- }
376
- }
377
- close() {
378
- this.inputs.activeItem()?.close({
379
- refocus: this.isFocused()
380
- });
381
- }
382
- }
383
- class MenuTriggerPattern {
384
- inputs;
385
- expanded = signal(false);
386
- hasBeenFocused = signal(false);
387
- role = () => 'button';
388
- hasPopup = () => true;
389
- menu;
390
- tabIndex = computed(() => this.expanded() && this.menu()?.inputs.activeItem() ? -1 : 0);
391
- disabled = () => this.inputs.disabled();
392
- keydownManager = computed(() => {
393
- return new KeyboardEventManager().on(' ', () => this.open({
394
- first: true
395
- })).on('Enter', () => this.open({
396
- first: true
397
- })).on('ArrowDown', () => this.open({
398
- first: true
399
- })).on('ArrowUp', () => this.open({
400
- last: true
401
- })).on('Escape', () => this.close({
402
- refocus: true
403
- }));
404
- });
405
- constructor(inputs) {
406
- this.inputs = inputs;
407
- this.menu = this.inputs.menu;
408
- }
409
- onKeydown(event) {
410
- if (!this.inputs.disabled()) {
411
- this.keydownManager().handle(event);
412
- }
413
- }
414
- onClick() {
415
- if (!this.inputs.disabled()) {
416
- this.expanded() ? this.close() : this.open({
417
- first: true
418
- });
419
- }
420
- }
421
- onFocusIn() {
422
- this.hasBeenFocused.set(true);
423
- }
424
- onFocusOut(event) {
425
- const element = this.inputs.element();
426
- const relatedTarget = event.relatedTarget;
427
- if (this.expanded() && !element?.contains(relatedTarget) && !this.inputs.menu()?.inputs.element()?.contains(relatedTarget)) {
428
- this.close();
429
- }
430
- }
431
- open(opts) {
432
- this.expanded.set(true);
433
- if (opts?.first) {
434
- this.inputs.menu()?.first();
435
- } else if (opts?.last) {
436
- this.inputs.menu()?.last();
437
- }
438
- }
439
- close(opts = {}) {
440
- this.expanded.set(false);
441
- this.menu()?.listBehavior.unfocus();
442
- if (opts.refocus) {
443
- this.inputs.element()?.focus();
444
- }
445
- let menuitems = this.inputs.menu()?.inputs.items() ?? [];
446
- while (menuitems.length) {
447
- const menuitem = menuitems.pop();
448
- menuitem?._expanded.set(false);
449
- menuitem?.inputs.parent()?.listBehavior.unfocus();
450
- menuitems = menuitems.concat(menuitem?.submenu()?.inputs.items() ?? []);
451
- }
452
- }
453
- }
454
- class MenuItemPattern {
455
- inputs;
456
- value;
457
- id;
458
- disabled = () => this.inputs.parent()?.disabled() || this.inputs.disabled();
459
- searchTerm;
460
- element;
461
- active = computed(() => this.inputs.parent()?.inputs.activeItem() === this);
462
- hasBeenFocused = signal(false);
463
- tabIndex = computed(() => {
464
- if (this.submenu() && this.submenu()?.inputs.activeItem()) {
465
- return -1;
466
- }
467
- return this.inputs.parent()?.listBehavior.getItemTabindex(this) ?? -1;
468
- });
469
- index = computed(() => this.inputs.parent()?.inputs.items().indexOf(this) ?? -1);
470
- expanded = computed(() => this.submenu() ? this._expanded() : null);
471
- _expanded = signal(false);
472
- controls = signal(undefined);
473
- role = () => 'menuitem';
474
- hasPopup = computed(() => !!this.submenu());
475
- submenu;
476
- selectable;
477
- constructor(inputs) {
478
- this.inputs = inputs;
479
- this.id = inputs.id;
480
- this.value = inputs.value;
481
- this.element = inputs.element;
482
- this.submenu = this.inputs.submenu;
483
- this.searchTerm = inputs.searchTerm;
484
- this.selectable = computed(() => !this.submenu());
485
- }
486
- open(opts) {
487
- if (this.disabled()) {
488
- return;
489
- }
490
- this._expanded.set(true);
491
- if (opts?.first) {
492
- this.submenu()?.first();
493
- }
494
- if (opts?.last) {
495
- this.submenu()?.last();
496
- }
497
- }
498
- close(opts = {}) {
499
- this._expanded.set(false);
500
- if (opts.refocus) {
501
- this.inputs.parent()?.listBehavior.goto(this);
502
- }
503
- let menuitems = this.inputs.submenu()?.inputs.items() ?? [];
504
- while (menuitems.length) {
505
- const menuitem = menuitems.pop();
506
- menuitem?._expanded.set(false);
507
- menuitem?.inputs.parent()?.listBehavior.unfocus();
508
- menuitems = menuitems.concat(menuitem?.submenu()?.inputs.items() ?? []);
509
- const parent = menuitem?.inputs.parent();
510
- if (parent instanceof MenuPattern) {
511
- parent._clearTimeouts();
512
- }
513
- }
514
- }
515
- onFocusIn() {
516
- this.hasBeenFocused.set(true);
517
- }
518
- }
519
-
520
- function convertGetterSetterToWritableSignalLike(getter, setter) {
521
- return Object.assign(getter, {
522
- set: setter,
523
- update: updateCallback => setter(updateCallback(getter()))
524
- });
525
- }
526
-
527
- class ListExpansion {
528
- inputs;
529
- constructor(inputs) {
530
- this.inputs = inputs;
531
- }
532
- open(item) {
533
- if (!this.isExpandable(item)) return false;
534
- if (item.expanded()) return false;
535
- if (!this.inputs.multiExpandable()) {
536
- this.closeAll();
537
- }
538
- item.expanded.set(true);
539
- return true;
540
- }
541
- close(item) {
542
- if (!this.isExpandable(item)) return false;
543
- item.expanded.set(false);
544
- return true;
545
- }
546
- toggle(item) {
547
- return item.expanded() ? this.close(item) : this.open(item);
548
- }
549
- openAll() {
550
- if (this.inputs.multiExpandable()) {
551
- for (const item of this.inputs.items()) {
552
- this.open(item);
553
- }
554
- }
555
- }
556
- closeAll() {
557
- for (const item of this.inputs.items()) {
558
- this.close(item);
559
- }
560
- }
561
- isExpandable(item) {
562
- return !this.inputs.disabled() && !item.disabled() && item.expandable();
563
- }
564
- }
565
-
566
- class LabelControl {
567
- inputs;
568
- label = computed(() => this.inputs.label?.());
569
- labelledBy = computed(() => {
570
- const label = this.label();
571
- const labelledBy = this.inputs.labelledBy?.();
572
- const defaultLabelledBy = this.inputs.defaultLabelledBy();
573
- if (labelledBy && labelledBy.length > 0) {
574
- return labelledBy;
575
- }
576
- if (label) {
577
- return [];
578
- }
579
- return defaultLabelledBy;
580
- });
581
- constructor(inputs) {
582
- this.inputs = inputs;
583
- }
584
- }
585
-
586
- class TabPattern {
587
- inputs;
588
- id = () => this.inputs.id();
589
- index = computed(() => this.inputs.tablist().inputs.items().indexOf(this));
590
- value = () => this.inputs.value();
591
- disabled = () => this.inputs.disabled();
592
- element = () => this.inputs.element();
593
- expandable = () => true;
594
- expanded;
595
- active = computed(() => this.inputs.tablist().inputs.activeItem() === this);
596
- selected = computed(() => this.inputs.tablist().selectedTab() === this);
597
- tabIndex = computed(() => this.inputs.tablist().focusBehavior.getItemTabIndex(this));
598
- controls = computed(() => this.inputs.tabpanel()?.id());
599
- constructor(inputs) {
600
- this.inputs = inputs;
601
- this.expanded = inputs.expanded;
602
- }
603
- open() {
604
- return this.inputs.tablist().open(this);
605
- }
606
- }
607
- class TabPanelPattern {
608
- inputs;
609
- id = () => this.inputs.id();
610
- value = () => this.inputs.value();
611
- labelManager;
612
- hidden = computed(() => this.inputs.tab()?.expanded() === false);
613
- tabIndex = computed(() => this.hidden() ? -1 : 0);
614
- labelledBy = computed(() => this.labelManager.labelledBy().length > 0 ? this.labelManager.labelledBy().join(' ') : undefined);
615
- constructor(inputs) {
616
- this.inputs = inputs;
617
- this.labelManager = new LabelControl({
618
- ...inputs,
619
- defaultLabelledBy: computed(() => this.inputs.tab() ? [this.inputs.tab().id()] : [])
620
- });
621
- }
622
- }
623
- class TabListPattern {
624
- inputs;
625
- focusBehavior;
626
- navigationBehavior;
627
- expansionBehavior;
628
- activeTab = () => this.inputs.activeItem();
629
- selectedTab = signal(undefined);
630
- orientation = () => this.inputs.orientation();
631
- disabled = () => this.inputs.disabled();
632
- tabIndex = computed(() => this.focusBehavior.getListTabIndex());
633
- activeDescendant = computed(() => this.focusBehavior.getActiveDescendant());
634
- followFocus = computed(() => this.inputs.selectionMode() === 'follow');
635
- prevKey = computed(() => {
636
- if (this.inputs.orientation() === 'vertical') {
637
- return 'ArrowUp';
638
- }
639
- return this.inputs.textDirection() === 'rtl' ? 'ArrowRight' : 'ArrowLeft';
640
- });
641
- nextKey = computed(() => {
642
- if (this.inputs.orientation() === 'vertical') {
643
- return 'ArrowDown';
644
- }
645
- return this.inputs.textDirection() === 'rtl' ? 'ArrowLeft' : 'ArrowRight';
646
- });
647
- keydown = computed(() => {
648
- return new KeyboardEventManager().on(this.prevKey, () => this._navigate(() => this.navigationBehavior.prev(), this.followFocus())).on(this.nextKey, () => this._navigate(() => this.navigationBehavior.next(), this.followFocus())).on('Home', () => this._navigate(() => this.navigationBehavior.first(), this.followFocus())).on('End', () => this._navigate(() => this.navigationBehavior.last(), this.followFocus())).on(' ', () => this.open()).on('Enter', () => this.open());
649
- });
650
- pointerdown = computed(() => {
651
- return new PointerEventManager().on(e => this._navigate(() => this.navigationBehavior.goto(this._getItem(e)), true));
652
- });
653
- constructor(inputs) {
654
- this.inputs = inputs;
655
- this.focusBehavior = new ListFocus(inputs);
656
- this.navigationBehavior = new ListNavigation({
657
- ...inputs,
658
- focusManager: this.focusBehavior
659
- });
660
- this.expansionBehavior = new ListExpansion({
661
- ...inputs,
662
- multiExpandable: () => false
663
- });
664
- }
665
- setDefaultState() {
666
- let firstItem;
667
- for (const item of this.inputs.items()) {
668
- if (!this.focusBehavior.isFocusable(item)) continue;
669
- if (firstItem === undefined) {
670
- firstItem = item;
671
- }
672
- if (item.selected()) {
673
- this.inputs.activeItem.set(item);
674
- return;
675
- }
676
- }
677
- if (firstItem !== undefined) {
678
- this.inputs.activeItem.set(firstItem);
679
- }
680
- }
681
- onKeydown(event) {
682
- if (!this.disabled()) {
683
- this.keydown().handle(event);
684
- }
685
- }
686
- onPointerdown(event) {
687
- if (!this.disabled()) {
688
- this.pointerdown().handle(event);
689
- }
690
- }
691
- open(tab) {
692
- tab ??= this.activeTab();
693
- if (typeof tab === 'string') {
694
- tab = this.inputs.items().find(t => t.value() === tab);
695
- }
696
- if (tab === undefined) return false;
697
- const success = this.expansionBehavior.open(tab);
698
- if (success) {
699
- this.selectedTab.set(tab);
700
- }
701
- return success;
702
- }
703
- _navigate(op, shouldExpand = false) {
704
- const success = op();
705
- if (success && shouldExpand) {
706
- this.open();
707
- }
708
- }
709
- _getItem(e) {
710
- if (!(e.target instanceof HTMLElement)) {
711
- return;
712
- }
713
- const element = e.target.closest('[role="tab"]');
714
- return this.inputs.items().find(i => i.element() === element);
715
- }
716
- }
717
-
718
- class ToolbarPattern {
719
- inputs;
720
- listBehavior;
721
- orientation;
722
- softDisabled;
723
- disabled = computed(() => this.listBehavior.disabled());
724
- tabIndex = computed(() => this.listBehavior.tabIndex());
725
- activeDescendant = computed(() => this.listBehavior.activeDescendant());
726
- activeItem = () => this.listBehavior.inputs.activeItem();
727
- _prevKey = computed(() => {
728
- if (this.inputs.orientation() === 'vertical') {
729
- return 'ArrowUp';
730
- }
731
- return this.inputs.textDirection() === 'rtl' ? 'ArrowRight' : 'ArrowLeft';
732
- });
733
- _nextKey = computed(() => {
734
- if (this.inputs.orientation() === 'vertical') {
735
- return 'ArrowDown';
736
- }
737
- return this.inputs.textDirection() === 'rtl' ? 'ArrowLeft' : 'ArrowRight';
738
- });
739
- _altPrevKey = computed(() => {
740
- if (this.inputs.orientation() === 'vertical') {
741
- return this.inputs.textDirection() === 'rtl' ? 'ArrowRight' : 'ArrowLeft';
742
- }
743
- return 'ArrowUp';
744
- });
745
- _altNextKey = computed(() => {
746
- if (this.inputs.orientation() === 'vertical') {
747
- return this.inputs.textDirection() === 'rtl' ? 'ArrowLeft' : 'ArrowRight';
748
- }
749
- return 'ArrowDown';
750
- });
751
- _keydown = computed(() => {
752
- const manager = new KeyboardEventManager();
753
- return manager.on(this._nextKey, () => this.listBehavior.next()).on(this._prevKey, () => this.listBehavior.prev()).on(this._altNextKey, () => this._groupNext()).on(this._altPrevKey, () => this._groupPrev()).on(' ', () => this.select()).on('Enter', () => this.select()).on('Home', () => this.listBehavior.first()).on('End', () => this.listBehavior.last());
754
- });
755
- _groupNext() {
756
- const currGroup = this.inputs.activeItem()?.group();
757
- const nextGroup = this.listBehavior.navigationBehavior.peekNext()?.group();
758
- if (!currGroup) {
759
- return;
760
- }
761
- if (currGroup !== nextGroup) {
762
- this.listBehavior.goto(this.listBehavior.navigationBehavior.peekFirst(currGroup.inputs.items()));
763
- return;
764
- }
765
- this.listBehavior.next();
766
- }
767
- _groupPrev() {
768
- const currGroup = this.inputs.activeItem()?.group();
769
- const nextGroup = this.listBehavior.navigationBehavior.peekPrev()?.group();
770
- if (!currGroup) {
771
- return;
772
- }
773
- if (currGroup !== nextGroup) {
774
- this.listBehavior.goto(this.listBehavior.navigationBehavior.peekLast(currGroup.inputs.items()));
775
- return;
776
- }
777
- this.listBehavior.prev();
778
- }
779
- _goto(e) {
780
- const item = this.inputs.getItem(e.target);
781
- if (item) {
782
- this.listBehavior.goto(item);
783
- this.select();
784
- }
785
- }
786
- select() {
787
- const group = this.inputs.activeItem()?.group();
788
- if (!group?.multi()) {
789
- group?.inputs.items().forEach(i => this.listBehavior.deselect(i));
790
- }
791
- this.listBehavior.toggle();
792
- }
793
- constructor(inputs) {
794
- this.inputs = inputs;
795
- this.orientation = inputs.orientation;
796
- this.softDisabled = inputs.softDisabled;
797
- this.listBehavior = new List({
798
- ...inputs,
799
- multi: () => true,
800
- focusMode: () => 'roving',
801
- selectionMode: () => 'explicit',
802
- typeaheadDelay: () => 0
803
- });
804
- }
805
- onKeydown(event) {
806
- if (this.disabled()) return;
807
- this._keydown().handle(event);
808
- }
809
- onPointerdown(event) {
810
- event.preventDefault();
811
- }
812
- onClick(event) {
813
- if (this.disabled()) return;
814
- this._goto(event);
815
- }
816
- setDefaultState() {
817
- const firstItem = this.listBehavior.navigationBehavior.peekFirst(this.inputs.items());
818
- if (firstItem) {
819
- this.inputs.activeItem.set(firstItem);
820
- }
821
- }
822
- validate() {
823
- const violations = [];
824
- return violations;
825
- }
826
- }
827
-
828
- class ToolbarWidgetPattern {
829
- inputs;
830
- id = () => this.inputs.id();
831
- element = () => this.inputs.element();
832
- disabled = () => this.inputs.disabled() || this.group()?.disabled() || false;
833
- group = () => this.inputs.group();
834
- toolbar = () => this.inputs.toolbar();
835
- tabIndex = computed(() => this.toolbar().listBehavior.getItemTabindex(this));
836
- searchTerm = () => '';
837
- value = () => this.inputs.value();
838
- selectable = () => true;
839
- index = computed(() => this.toolbar().inputs.items().indexOf(this) ?? -1);
840
- selected = computed(() => this.toolbar().listBehavior.inputs.values().includes(this.value()));
841
- active = computed(() => this.toolbar().activeItem() === this);
842
- constructor(inputs) {
843
- this.inputs = inputs;
844
- }
845
- }
846
-
847
- class ToolbarWidgetGroupPattern {
848
- inputs;
849
- disabled = () => this.inputs.disabled();
850
- toolbar = () => this.inputs.toolbar();
851
- multi = () => this.inputs.multi();
852
- searchTerm = () => '';
853
- value = () => '';
854
- selectable = () => true;
855
- element = () => undefined;
856
- constructor(inputs) {
857
- this.inputs = inputs;
858
- }
859
- }
860
-
861
- const focusMode = () => 'roving';
862
- class AccordionGroupPattern {
863
- inputs;
864
- navigationBehavior;
865
- focusBehavior;
866
- expansionBehavior;
867
- constructor(inputs) {
868
- this.inputs = inputs;
869
- this.focusBehavior = new ListFocus({
870
- ...inputs,
871
- focusMode
872
- });
873
- this.navigationBehavior = new ListNavigation({
874
- ...inputs,
875
- focusMode,
876
- focusManager: this.focusBehavior
877
- });
878
- this.expansionBehavior = new ListExpansion({
879
- ...inputs
880
- });
881
- }
882
- prevKey = computed(() => {
883
- if (this.inputs.orientation() === 'vertical') {
884
- return 'ArrowUp';
885
- }
886
- return this.inputs.textDirection() === 'rtl' ? 'ArrowRight' : 'ArrowLeft';
887
- });
888
- nextKey = computed(() => {
889
- if (this.inputs.orientation() === 'vertical') {
890
- return 'ArrowDown';
891
- }
892
- return this.inputs.textDirection() === 'rtl' ? 'ArrowLeft' : 'ArrowRight';
893
- });
894
- keydown = computed(() => {
895
- return new KeyboardEventManager().on(this.prevKey, () => this.navigationBehavior.prev()).on(this.nextKey, () => this.navigationBehavior.next()).on('Home', () => this.navigationBehavior.first()).on('End', () => this.navigationBehavior.last()).on(' ', () => this.toggle()).on('Enter', () => this.toggle());
896
- });
897
- pointerdown = computed(() => {
898
- return new PointerEventManager().on(e => {
899
- const item = this.inputs.getItem(e.target);
900
- if (!item) return;
901
- this.navigationBehavior.goto(item);
902
- this.expansionBehavior.toggle(item);
903
- });
904
- });
905
- onKeydown(event) {
906
- this.keydown().handle(event);
907
- }
908
- onPointerdown(event) {
909
- this.pointerdown().handle(event);
910
- }
911
- onFocus(event) {
912
- const item = this.inputs.getItem(event.target);
913
- if (!item) return;
914
- if (!this.focusBehavior.isFocusable(item)) return;
915
- this.focusBehavior.focus(item);
916
- }
917
- toggle() {
918
- const activeItem = this.inputs.activeItem();
919
- if (activeItem === undefined) return;
920
- this.expansionBehavior.toggle(activeItem);
921
- }
922
- }
923
- class AccordionTriggerPattern {
924
- inputs;
925
- id = () => this.inputs.id();
926
- element = () => this.inputs.element();
927
- expandable = () => true;
928
- expanded;
929
- active = computed(() => this.inputs.accordionGroup().inputs.activeItem() === this);
930
- controls = computed(() => this.inputs.accordionPanel()?.inputs.id());
931
- tabIndex = computed(() => this.inputs.accordionGroup().focusBehavior.isFocusable(this) ? 0 : -1);
932
- disabled = computed(() => this.inputs.disabled() || this.inputs.accordionGroup().inputs.disabled());
933
- hardDisabled = computed(() => this.disabled() && !this.inputs.accordionGroup().inputs.softDisabled());
934
- index = computed(() => this.inputs.accordionGroup().inputs.items().indexOf(this));
935
- constructor(inputs) {
936
- this.inputs = inputs;
937
- this.expanded = inputs.expanded;
938
- }
939
- open() {
940
- this.inputs.accordionGroup().expansionBehavior.open(this);
941
- }
942
- close() {
943
- this.inputs.accordionGroup().expansionBehavior.close(this);
944
- }
945
- toggle() {
946
- this.inputs.accordionGroup().expansionBehavior.toggle(this);
947
- }
948
- }
949
- class AccordionPanelPattern {
950
- inputs;
951
- id;
952
- accordionTrigger;
953
- hidden;
954
- constructor(inputs) {
955
- this.inputs = inputs;
956
- this.id = inputs.id;
957
- this.accordionTrigger = inputs.accordionTrigger;
958
- this.hidden = computed(() => inputs.accordionTrigger()?.expanded() === false);
959
- }
960
- }
961
-
962
- class TreeItemPattern {
963
- inputs;
964
- id = () => this.inputs.id();
965
- value = () => this.inputs.value();
966
- element = () => this.inputs.element();
967
- disabled = () => this.inputs.disabled();
968
- searchTerm = () => this.inputs.searchTerm();
969
- tree = () => this.inputs.tree();
970
- parent = () => this.inputs.parent();
971
- children = () => this.inputs.children();
972
- index = computed(() => this.tree().visibleItems().indexOf(this));
973
- expansionBehavior;
974
- expandable = () => this.inputs.hasChildren();
975
- selectable = () => this.inputs.selectable();
976
- expanded;
977
- level = computed(() => this.parent().level() + 1);
978
- visible = computed(() => this.parent().expanded() && this.parent().visible());
979
- setsize = computed(() => this.parent().children().length);
980
- posinset = computed(() => this.parent().children().indexOf(this) + 1);
981
- active = computed(() => this.tree().activeItem() === this);
982
- tabIndex = computed(() => this.tree().listBehavior.getItemTabindex(this));
983
- selected = computed(() => {
984
- if (this.tree().nav()) {
985
- return undefined;
986
- }
987
- if (!this.selectable()) {
988
- return undefined;
989
- }
990
- return this.tree().values().includes(this.value());
991
- });
992
- current = computed(() => {
993
- if (!this.tree().nav()) {
994
- return undefined;
995
- }
996
- if (!this.selectable()) {
997
- return undefined;
998
- }
999
- return this.tree().values().includes(this.value()) ? this.tree().currentType() : undefined;
1000
- });
1001
- constructor(inputs) {
1002
- this.inputs = inputs;
1003
- this.expanded = inputs.expanded;
1004
- this.expansionBehavior = new ListExpansion({
1005
- ...inputs,
1006
- multiExpandable: () => true,
1007
- items: this.children,
1008
- disabled: computed(() => this.tree()?.disabled() ?? false)
1009
- });
1010
- }
1011
- }
1012
- class TreePattern {
1013
- inputs;
1014
- listBehavior;
1015
- expansionBehavior;
1016
- level = () => 0;
1017
- expanded = () => true;
1018
- visible = () => true;
1019
- tabIndex = computed(() => this.listBehavior.tabIndex());
1020
- activeDescendant = computed(() => this.listBehavior.activeDescendant());
1021
- children = computed(() => this.inputs.allItems().filter(item => item.level() === this.level() + 1));
1022
- visibleItems = computed(() => this.inputs.allItems().filter(item => item.visible()));
1023
- followFocus = computed(() => this.inputs.selectionMode() === 'follow');
1024
- isRtl = computed(() => this.inputs.textDirection() === 'rtl');
1025
- prevKey = computed(() => {
1026
- if (this.inputs.orientation() === 'vertical') {
1027
- return 'ArrowUp';
1028
- }
1029
- return this.isRtl() ? 'ArrowRight' : 'ArrowLeft';
1030
- });
1031
- nextKey = computed(() => {
1032
- if (this.inputs.orientation() === 'vertical') {
1033
- return 'ArrowDown';
1034
- }
1035
- return this.isRtl() ? 'ArrowLeft' : 'ArrowRight';
1036
- });
1037
- collapseKey = computed(() => {
1038
- if (this.inputs.orientation() === 'horizontal') {
1039
- return 'ArrowUp';
1040
- }
1041
- return this.isRtl() ? 'ArrowRight' : 'ArrowLeft';
1042
- });
1043
- expandKey = computed(() => {
1044
- if (this.inputs.orientation() === 'horizontal') {
1045
- return 'ArrowDown';
1046
- }
1047
- return this.isRtl() ? 'ArrowLeft' : 'ArrowRight';
1048
- });
1049
- dynamicSpaceKey = computed(() => this.listBehavior.isTyping() ? '' : ' ');
1050
- typeaheadRegexp = /^.$/;
1051
- keydown = computed(() => {
1052
- const manager = new KeyboardEventManager();
1053
- const list = this.listBehavior;
1054
- manager.on(this.prevKey, () => list.prev({
1055
- selectOne: this.followFocus()
1056
- })).on(this.nextKey, () => list.next({
1057
- selectOne: this.followFocus()
1058
- })).on('Home', () => list.first({
1059
- selectOne: this.followFocus()
1060
- })).on('End', () => list.last({
1061
- selectOne: this.followFocus()
1062
- })).on(this.typeaheadRegexp, e => list.search(e.key, {
1063
- selectOne: this.followFocus()
1064
- })).on(this.expandKey, () => this.expand({
1065
- selectOne: this.followFocus()
1066
- })).on(this.collapseKey, () => this.collapse({
1067
- selectOne: this.followFocus()
1068
- })).on(Modifier.Shift, '*', () => this.expandSiblings());
1069
- if (this.inputs.multi()) {
1070
- manager.on(Modifier.Any, 'Shift', () => list.anchor(this.listBehavior.activeIndex())).on(Modifier.Shift, this.prevKey, () => list.prev({
1071
- selectRange: true
1072
- })).on(Modifier.Shift, this.nextKey, () => list.next({
1073
- selectRange: true
1074
- })).on([Modifier.Ctrl | Modifier.Shift, Modifier.Meta | Modifier.Shift], 'Home', () => list.first({
1075
- selectRange: true,
1076
- anchor: false
1077
- })).on([Modifier.Ctrl | Modifier.Shift, Modifier.Meta | Modifier.Shift], 'End', () => list.last({
1078
- selectRange: true,
1079
- anchor: false
1080
- })).on(Modifier.Shift, 'Enter', () => list.updateSelection({
1081
- selectRange: true,
1082
- anchor: false
1083
- })).on(Modifier.Shift, this.dynamicSpaceKey, () => list.updateSelection({
1084
- selectRange: true,
1085
- anchor: false
1086
- }));
1087
- }
1088
- if (!this.followFocus() && this.inputs.multi()) {
1089
- manager.on(this.dynamicSpaceKey, () => list.toggle()).on('Enter', () => list.toggle(), {
1090
- preventDefault: !this.nav()
1091
- }).on([Modifier.Ctrl, Modifier.Meta], 'A', () => list.toggleAll());
1092
- }
1093
- if (!this.followFocus() && !this.inputs.multi()) {
1094
- manager.on(this.dynamicSpaceKey, () => list.selectOne());
1095
- manager.on('Enter', () => list.selectOne(), {
1096
- preventDefault: !this.nav()
1097
- });
1098
- }
1099
- if (this.inputs.multi() && this.followFocus()) {
1100
- manager.on([Modifier.Ctrl, Modifier.Meta], this.prevKey, () => list.prev()).on([Modifier.Ctrl, Modifier.Meta], this.nextKey, () => list.next()).on([Modifier.Ctrl, Modifier.Meta], this.expandKey, () => this.expand()).on([Modifier.Ctrl, Modifier.Meta], this.collapseKey, () => this.collapse()).on([Modifier.Ctrl, Modifier.Meta], ' ', () => list.toggle()).on([Modifier.Ctrl, Modifier.Meta], 'Enter', () => list.toggle()).on([Modifier.Ctrl, Modifier.Meta], 'Home', () => list.first()).on([Modifier.Ctrl, Modifier.Meta], 'End', () => list.last()).on([Modifier.Ctrl, Modifier.Meta], 'A', () => {
1101
- list.toggleAll();
1102
- list.select();
1103
- });
1104
- }
1105
- return manager;
1106
- });
1107
- pointerdown = computed(() => {
1108
- const manager = new PointerEventManager();
1109
- if (this.multi()) {
1110
- manager.on(Modifier.Shift, e => this.goto(e, {
1111
- selectRange: true
1112
- }));
1113
- }
1114
- if (!this.multi()) {
1115
- return manager.on(e => this.goto(e, {
1116
- selectOne: true
1117
- }));
1118
- }
1119
- if (this.multi() && this.followFocus()) {
1120
- return manager.on(e => this.goto(e, {
1121
- selectOne: true
1122
- })).on(Modifier.Ctrl, e => this.goto(e, {
1123
- toggle: true
1124
- }));
1125
- }
1126
- if (this.multi() && !this.followFocus()) {
1127
- return manager.on(e => this.goto(e, {
1128
- toggle: true
1129
- }));
1130
- }
1131
- return manager;
1132
- });
1133
- id = () => this.inputs.id();
1134
- element = () => this.inputs.element();
1135
- nav = () => this.inputs.nav();
1136
- currentType = () => this.inputs.currentType();
1137
- allItems = () => this.inputs.allItems();
1138
- focusMode = () => this.inputs.focusMode();
1139
- disabled = () => this.inputs.disabled();
1140
- activeItem;
1141
- softDisabled = () => this.inputs.softDisabled();
1142
- wrap = () => this.inputs.wrap();
1143
- orientation = () => this.inputs.orientation();
1144
- textDirection = () => this.textDirection();
1145
- multi = computed(() => this.nav() ? false : this.inputs.multi());
1146
- selectionMode = () => this.inputs.selectionMode();
1147
- typeaheadDelay = () => this.inputs.typeaheadDelay();
1148
- values;
1149
- constructor(inputs) {
1150
- this.inputs = inputs;
1151
- this.activeItem = inputs.activeItem;
1152
- this.values = inputs.values;
1153
- this.listBehavior = new List({
1154
- ...inputs,
1155
- items: this.visibleItems,
1156
- multi: this.multi
1157
- });
1158
- this.expansionBehavior = new ListExpansion({
1159
- multiExpandable: () => true,
1160
- items: this.children,
1161
- disabled: this.disabled
1162
- });
1163
- }
1164
- setDefaultState() {
1165
- let firstItem;
1166
- for (const item of this.allItems()) {
1167
- if (!item.visible()) continue;
1168
- if (!this.listBehavior.isFocusable(item)) continue;
1169
- if (firstItem === undefined) {
1170
- firstItem = item;
1171
- }
1172
- if (item.selected()) {
1173
- this.activeItem.set(item);
1174
- return;
1175
- }
1176
- }
1177
- if (firstItem !== undefined) {
1178
- this.activeItem.set(firstItem);
1179
- }
1180
- }
1181
- onKeydown(event) {
1182
- if (!this.disabled()) {
1183
- this.keydown().handle(event);
1184
- }
1185
- }
1186
- onPointerdown(event) {
1187
- if (!this.disabled()) {
1188
- this.pointerdown().handle(event);
1189
- }
1190
- }
1191
- goto(e, opts) {
1192
- const item = this._getItem(e);
1193
- if (!item) return;
1194
- this.listBehavior.goto(item, opts);
1195
- this.toggleExpansion(item);
1196
- }
1197
- toggleExpansion(item) {
1198
- item ??= this.activeItem();
1199
- if (!item || !this.listBehavior.isFocusable(item)) return;
1200
- if (!item.expandable()) return;
1201
- if (item.expanded()) {
1202
- this.collapse();
1203
- } else {
1204
- this.expansionBehavior.open(item);
1205
- }
1206
- }
1207
- expand(opts) {
1208
- const item = this.activeItem();
1209
- if (!item || !this.listBehavior.isFocusable(item)) return;
1210
- if (item.expandable() && !item.expanded()) {
1211
- this.expansionBehavior.open(item);
1212
- } else if (item.expanded() && item.children().some(item => this.listBehavior.isFocusable(item))) {
1213
- this.listBehavior.next(opts);
1214
- }
1215
- }
1216
- expandSiblings(item) {
1217
- item ??= this.activeItem();
1218
- const siblings = item?.parent()?.children();
1219
- siblings?.forEach(item => this.expansionBehavior.open(item));
1220
- }
1221
- collapse(opts) {
1222
- const item = this.activeItem();
1223
- if (!item || !this.listBehavior.isFocusable(item)) return;
1224
- if (item.expandable() && item.expanded()) {
1225
- this.expansionBehavior.close(item);
1226
- } else if (item.parent() && item.parent() !== this) {
1227
- const parentItem = item.parent();
1228
- if (parentItem instanceof TreeItemPattern && this.listBehavior.isFocusable(parentItem)) {
1229
- this.listBehavior.goto(parentItem, opts);
1230
- }
1231
- }
1232
- }
1233
- _getItem(event) {
1234
- if (!(event.target instanceof HTMLElement)) {
1235
- return;
1236
- }
1237
- const element = event.target.closest('[role="treeitem"]');
1238
- return this.inputs.allItems().find(i => i.element() === element);
1239
- }
1240
- }
1241
-
1242
- class ComboboxTreePattern extends TreePattern {
1243
- inputs;
1244
- isItemCollapsible = () => this.inputs.activeItem()?.parent() instanceof TreeItemPattern;
1245
- role = () => 'tree';
1246
- activeId = computed(() => this.listBehavior.activeDescendant());
1247
- getActiveItem = () => this.inputs.activeItem();
1248
- items = computed(() => this.inputs.allItems());
1249
- tabIndex = () => -1;
1250
- constructor(inputs) {
1251
- if (inputs.combobox()) {
1252
- inputs.multi = () => false;
1253
- inputs.focusMode = () => 'activedescendant';
1254
- inputs.element = inputs.combobox().inputs.inputEl;
1255
- }
1256
- super(inputs);
1257
- this.inputs = inputs;
1258
- }
1259
- onKeydown(_) {}
1260
- onPointerdown(_) {}
1261
- setDefaultState() {}
1262
- focus = item => this.listBehavior.goto(item);
1263
- next = () => this.listBehavior.next();
1264
- prev = () => this.listBehavior.prev();
1265
- last = () => this.listBehavior.last();
1266
- first = () => this.listBehavior.first();
1267
- unfocus = () => this.listBehavior.unfocus();
1268
- select = item => this.listBehavior.select(item);
1269
- toggle = item => this.listBehavior.toggle(item);
1270
- clearSelection = () => this.listBehavior.deselectAll();
1271
- getItem = e => this._getItem(e);
1272
- getSelectedItems = () => this.inputs.allItems().filter(item => item.selected());
1273
- setValue = value => this.inputs.values.set(value ? [value] : []);
1274
- expandItem = () => this.expand();
1275
- collapseItem = () => this.collapse();
1276
- isItemExpandable(item = this.inputs.activeItem()) {
1277
- return item ? item.expandable() : false;
1278
- }
1279
- expandAll = () => this.items().forEach(item => this.expansionBehavior.open(item));
1280
- collapseAll = () => this.items().forEach(item => item.expansionBehavior.close(item));
1281
- isItemSelectable = (item = this.inputs.activeItem()) => {
1282
- return item ? item.selectable() : false;
1283
- };
1284
- }
1285
-
1286
- class DeferredContentAware {
1287
- contentVisible = signal(false, ...(ngDevMode ? [{
1288
- debugName: "contentVisible"
1289
- }] : []));
1290
- preserveContent = model(false, ...(ngDevMode ? [{
1291
- debugName: "preserveContent"
1292
- }] : []));
1293
- static ɵfac = i0.ɵɵngDeclareFactory({
1294
- minVersion: "12.0.0",
1295
- version: "21.0.0",
1296
- ngImport: i0,
1297
- type: DeferredContentAware,
1298
- deps: [],
1299
- target: i0.ɵɵFactoryTarget.Directive
1300
- });
1301
- static ɵdir = i0.ɵɵngDeclareDirective({
1302
- minVersion: "17.1.0",
1303
- version: "21.0.0",
1304
- type: DeferredContentAware,
1305
- isStandalone: true,
1306
- inputs: {
1307
- preserveContent: {
1308
- classPropertyName: "preserveContent",
1309
- publicName: "preserveContent",
1310
- isSignal: true,
1311
- isRequired: false,
1312
- transformFunction: null
1313
- }
1314
- },
1315
- outputs: {
1316
- preserveContent: "preserveContentChange"
1317
- },
1318
- ngImport: i0
1319
- });
1320
- }
1321
- i0.ɵɵngDeclareClassMetadata({
1322
- minVersion: "12.0.0",
1323
- version: "21.0.0",
1324
- ngImport: i0,
1325
- type: DeferredContentAware,
1326
- decorators: [{
1327
- type: Directive
1328
- }],
1329
- propDecorators: {
1330
- preserveContent: [{
1331
- type: i0.Input,
1332
- args: [{
1333
- isSignal: true,
1334
- alias: "preserveContent",
1335
- required: false
1336
- }]
1337
- }, {
1338
- type: i0.Output,
1339
- args: ["preserveContentChange"]
1340
- }]
1341
- }
1342
- });
1343
- class DeferredContent {
1344
- _deferredContentAware = inject(DeferredContentAware, {
1345
- optional: true
1346
- });
1347
- _templateRef = inject(TemplateRef);
1348
- _viewContainerRef = inject(ViewContainerRef);
1349
- _currentViewRef = null;
1350
- _isRendered = false;
1351
- deferredContentAware = signal(this._deferredContentAware, ...(ngDevMode ? [{
1352
- debugName: "deferredContentAware"
1353
- }] : []));
1354
- constructor() {
1355
- afterRenderEffect(() => {
1356
- if (this.deferredContentAware()?.contentVisible()) {
1357
- if (!this._isRendered) {
1358
- this._destroyContent();
1359
- this._currentViewRef = this._viewContainerRef.createEmbeddedView(this._templateRef);
1360
- this._isRendered = true;
1361
- }
1362
- } else if (!this.deferredContentAware()?.preserveContent()) {
1363
- this._destroyContent();
1364
- this._isRendered = false;
1365
- }
1366
- });
1367
- }
1368
- ngOnDestroy() {
1369
- this._destroyContent();
1370
- }
1371
- _destroyContent() {
1372
- const ref = this._currentViewRef;
1373
- if (ref && !ref.destroyed) {
1374
- ref.destroy();
1375
- this._currentViewRef = null;
1376
- }
1377
- }
1378
- static ɵfac = i0.ɵɵngDeclareFactory({
1379
- minVersion: "12.0.0",
1380
- version: "21.0.0",
1381
- ngImport: i0,
1382
- type: DeferredContent,
1383
- deps: [],
1384
- target: i0.ɵɵFactoryTarget.Directive
1385
- });
1386
- static ɵdir = i0.ɵɵngDeclareDirective({
1387
- minVersion: "14.0.0",
1388
- version: "21.0.0",
1389
- type: DeferredContent,
1390
- isStandalone: true,
1391
- ngImport: i0
1392
- });
1393
- }
1394
- i0.ɵɵngDeclareClassMetadata({
1395
- minVersion: "12.0.0",
1396
- version: "21.0.0",
1397
- ngImport: i0,
1398
- type: DeferredContent,
1399
- decorators: [{
1400
- type: Directive
1401
- }],
1402
- ctorParameters: () => []
1403
- });
1404
-
1405
- export { AccordionGroupPattern, AccordionPanelPattern, AccordionTriggerPattern, ComboboxTreePattern, DeferredContent, DeferredContentAware, MenuBarPattern, MenuItemPattern, MenuPattern, MenuTriggerPattern, TabListPattern, TabPanelPattern, TabPattern, ToolbarPattern, ToolbarWidgetGroupPattern, ToolbarWidgetPattern, TreeItemPattern, TreePattern, convertGetterSetterToWritableSignalLike };
11
+ export { DeferredContent, DeferredContentAware } from './_deferred-content-chunk.mjs';
12
+ import './_pointer-event-manager-chunk.mjs';
13
+ import './_list-chunk.mjs';
14
+ import './_list-navigation-chunk.mjs';
15
+ import './_expansion-chunk.mjs';
16
+ import '@angular/core';
1406
17
  //# sourceMappingURL=private.mjs.map