@angular/cdk-experimental 21.0.0-next.0 → 21.0.0-next.10

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 (73) hide show
  1. package/fesm2022/{polyfill.mjs → _polyfill-chunk.mjs} +1 -1
  2. package/fesm2022/_polyfill-chunk.mjs.map +1 -0
  3. package/fesm2022/cdk-experimental.mjs +1 -1
  4. package/fesm2022/cdk-experimental.mjs.map +1 -1
  5. package/fesm2022/column-resize.mjs +54 -54
  6. package/fesm2022/column-resize.mjs.map +1 -1
  7. package/fesm2022/popover-edit.mjs +44 -44
  8. package/fesm2022/popover-edit.mjs.map +1 -1
  9. package/fesm2022/scrolling.mjs +7 -7
  10. package/fesm2022/scrolling.mjs.map +1 -1
  11. package/fesm2022/selection.mjs +19 -19
  12. package/fesm2022/selection.mjs.map +1 -1
  13. package/fesm2022/table-scroll-container.mjs +7 -7
  14. package/fesm2022/table-scroll-container.mjs.map +1 -1
  15. package/package.json +10 -45
  16. package/{column-resize/index.d.ts → types/column-resize.d.ts} +37 -37
  17. package/{popover-edit/index.d.ts → types/popover-edit.d.ts} +30 -30
  18. package/{scrolling/index.d.ts → types/scrolling.d.ts} +6 -6
  19. package/{selection/index.d.ts → types/selection.d.ts} +14 -14
  20. package/{table-scroll-container/index.d.ts → types/table-scroll-container.d.ts} +6 -6
  21. package/accordion/index.d.ts +0 -92
  22. package/accordion.d.d.ts +0 -89
  23. package/combobox/index.d.ts +0 -94
  24. package/deferred-content/index.d.ts +0 -37
  25. package/expansion.d.d.ts +0 -71
  26. package/fesm2022/accordion.mjs +0 -192
  27. package/fesm2022/accordion.mjs.map +0 -1
  28. package/fesm2022/accordion2.mjs +0 -152
  29. package/fesm2022/accordion2.mjs.map +0 -1
  30. package/fesm2022/combobox.mjs +0 -340
  31. package/fesm2022/combobox.mjs.map +0 -1
  32. package/fesm2022/deferred-content.mjs +0 -60
  33. package/fesm2022/deferred-content.mjs.map +0 -1
  34. package/fesm2022/expansion.mjs +0 -87
  35. package/fesm2022/expansion.mjs.map +0 -1
  36. package/fesm2022/list-navigation.mjs +0 -263
  37. package/fesm2022/list-navigation.mjs.map +0 -1
  38. package/fesm2022/list.mjs +0 -355
  39. package/fesm2022/list.mjs.map +0 -1
  40. package/fesm2022/listbox.mjs +0 -160
  41. package/fesm2022/listbox.mjs.map +0 -1
  42. package/fesm2022/option.mjs +0 -231
  43. package/fesm2022/option.mjs.map +0 -1
  44. package/fesm2022/polyfill.mjs.map +0 -1
  45. package/fesm2022/radio-group.mjs +0 -202
  46. package/fesm2022/radio-group.mjs.map +0 -1
  47. package/fesm2022/radio-group2.mjs +0 -143
  48. package/fesm2022/radio-group2.mjs.map +0 -1
  49. package/fesm2022/tabs.mjs +0 -299
  50. package/fesm2022/tabs.mjs.map +0 -1
  51. package/fesm2022/tabs2.mjs +0 -211
  52. package/fesm2022/tabs2.mjs.map +0 -1
  53. package/fesm2022/toolbar.mjs +0 -168
  54. package/fesm2022/toolbar.mjs.map +0 -1
  55. package/fesm2022/toolbar2.mjs +0 -224
  56. package/fesm2022/toolbar2.mjs.map +0 -1
  57. package/fesm2022/tree.mjs +0 -631
  58. package/fesm2022/tree.mjs.map +0 -1
  59. package/fesm2022/ui-patterns.mjs +0 -21
  60. package/fesm2022/ui-patterns.mjs.map +0 -1
  61. package/list.d.d.ts +0 -207
  62. package/listbox/index.d.ts +0 -87
  63. package/listbox.d.d.ts +0 -101
  64. package/pointer-event-manager.d.d.ts +0 -189
  65. package/radio-group/index.d.ts +0 -85
  66. package/radio-group.d.d.ts +0 -80
  67. package/tabs/index.d.ts +0 -157
  68. package/tabs.d.d.ts +0 -137
  69. package/toolbar/index.d.ts +0 -89
  70. package/toolbar.d.d.ts +0 -136
  71. package/tree/index.d.ts +0 -273
  72. package/ui-patterns/index.d.ts +0 -9
  73. /package/{index.d.ts → types/cdk-experimental.d.ts} +0 -0
package/fesm2022/tree.mjs DELETED
@@ -1,631 +0,0 @@
1
- import * as i0 from '@angular/core';
2
- import { computed, signal, input, booleanAttribute, model, inject, afterRenderEffect, Directive, ElementRef } from '@angular/core';
3
- import { _IdGenerator } from '@angular/cdk/a11y';
4
- import { Directionality } from '@angular/cdk/bidi';
5
- import * as i1 from '@angular/cdk-experimental/deferred-content';
6
- import { DeferredContentAware, DeferredContent } from '@angular/cdk-experimental/deferred-content';
7
- import { List } from './list.mjs';
8
- import { ExpansionControl, ListExpansion } from './expansion.mjs';
9
- import { Modifier, KeyboardEventManager, PointerEventManager } from './list-navigation.mjs';
10
-
11
- /**
12
- * Represents an item in a Tree.
13
- */
14
- class TreeItemPattern {
15
- inputs;
16
- /** The position of this item among its siblings. */
17
- index = computed(() => this.tree().visibleItems().indexOf(this));
18
- /** The unique identifier used by the expansion behavior. */
19
- expansionId;
20
- /** Controls expansion for child items. */
21
- expansionManager;
22
- /** Controls expansion for this item. */
23
- expansion;
24
- /** Whether the item is expandable. It's expandable if children item exist. */
25
- expandable;
26
- /** The level of the current item in a tree. */
27
- level = computed(() => this.parent().level() + 1);
28
- /** Whether this item is currently expanded. */
29
- expanded = computed(() => this.expansion.isExpanded());
30
- /** Whether this item is visible. */
31
- visible = computed(() => this.parent().expanded());
32
- /** The number of items under the same parent at the same level. */
33
- setsize = computed(() => this.parent().children().length);
34
- /** The position of this item among its siblings (1-based). */
35
- posinset = computed(() => this.parent().children().indexOf(this) + 1);
36
- /** Whether the item is active. */
37
- active = computed(() => this.tree().activeItem() === this);
38
- /** The tabindex of the item. */
39
- tabindex = computed(() => this.tree().listBehavior.getItemTabindex(this));
40
- /** Whether the item is selected. */
41
- selected = computed(() => {
42
- if (this.tree().nav()) {
43
- return undefined;
44
- }
45
- return this.tree().value().includes(this.value());
46
- });
47
- /** The current type of this item. */
48
- current = computed(() => {
49
- if (!this.tree().nav()) {
50
- return undefined;
51
- }
52
- return this.tree().value().includes(this.value()) ? this.tree().currentType() : undefined;
53
- });
54
- constructor(inputs) {
55
- this.inputs = inputs;
56
- this.id = inputs.id;
57
- this.value = inputs.value;
58
- this.element = inputs.element;
59
- this.disabled = inputs.disabled;
60
- this.searchTerm = inputs.searchTerm;
61
- this.expansionId = inputs.id;
62
- this.tree = inputs.tree;
63
- this.parent = inputs.parent;
64
- this.children = inputs.children;
65
- this.expandable = inputs.hasChildren;
66
- this.expansion = new ExpansionControl({
67
- ...inputs,
68
- expandable: this.expandable,
69
- expansionId: this.expansionId,
70
- expansionManager: this.parent().expansionManager,
71
- });
72
- this.expansionManager = new ListExpansion({
73
- ...inputs,
74
- multiExpandable: () => true,
75
- // TODO(ok7sai): allow pre-expanded tree items.
76
- expandedIds: signal([]),
77
- items: this.children,
78
- disabled: computed(() => this.tree()?.disabled() ?? false),
79
- });
80
- }
81
- }
82
- /** Controls the state and interactions of a tree view. */
83
- class TreePattern {
84
- inputs;
85
- /** The list behavior for the tree. */
86
- listBehavior;
87
- /** Controls expansion for direct children of the tree root (top-level items). */
88
- expansionManager;
89
- /** The root level is 0. */
90
- level = () => 0;
91
- /** The root is always expanded. */
92
- expanded = () => true;
93
- /** The tabindex of the tree. */
94
- tabindex = computed(() => this.listBehavior.tabindex());
95
- /** The id of the current active item. */
96
- activedescendant = computed(() => this.listBehavior.activedescendant());
97
- /** The direct children of the root (top-level tree items). */
98
- children = computed(() => this.inputs.allItems().filter(item => item.level() === this.level() + 1));
99
- /** All currently visible tree items. An item is visible if their parent is expanded. */
100
- visibleItems = computed(() => this.inputs.allItems().filter(item => item.visible()));
101
- /** Whether the tree selection follows focus. */
102
- followFocus = computed(() => this.inputs.selectionMode() === 'follow');
103
- /** The key for navigating to the previous item. */
104
- prevKey = computed(() => {
105
- if (this.inputs.orientation() === 'vertical') {
106
- return 'ArrowUp';
107
- }
108
- return this.inputs.textDirection() === 'rtl' ? 'ArrowRight' : 'ArrowLeft';
109
- });
110
- /** The key for navigating to the next item. */
111
- nextKey = computed(() => {
112
- if (this.inputs.orientation() === 'vertical') {
113
- return 'ArrowDown';
114
- }
115
- return this.inputs.textDirection() === 'rtl' ? 'ArrowLeft' : 'ArrowRight';
116
- });
117
- /** The key for collapsing an item or moving to its parent. */
118
- collapseKey = computed(() => {
119
- if (this.inputs.orientation() === 'horizontal') {
120
- return 'ArrowUp';
121
- }
122
- return this.inputs.textDirection() === 'rtl' ? 'ArrowRight' : 'ArrowLeft';
123
- });
124
- /** The key for expanding an item or moving to its first child. */
125
- expandKey = computed(() => {
126
- if (this.inputs.orientation() === 'horizontal') {
127
- return 'ArrowDown';
128
- }
129
- return this.inputs.textDirection() === 'rtl' ? 'ArrowLeft' : 'ArrowRight';
130
- });
131
- /** Represents the space key. Does nothing when the user is actively using typeahead. */
132
- dynamicSpaceKey = computed(() => (this.listBehavior.isTyping() ? '' : ' '));
133
- /** Regular expression to match characters for typeahead. */
134
- typeaheadRegexp = /^.$/;
135
- /** The keydown event manager for the tree. */
136
- keydown = computed(() => {
137
- const manager = new KeyboardEventManager();
138
- const list = this.listBehavior;
139
- if (!this.followFocus()) {
140
- manager
141
- .on(this.prevKey, () => list.prev())
142
- .on(this.nextKey, () => list.next())
143
- .on('Home', () => list.first())
144
- .on('End', () => list.last())
145
- .on(this.typeaheadRegexp, e => list.search(e.key));
146
- }
147
- if (this.followFocus()) {
148
- manager
149
- .on(this.prevKey, () => list.prev({ selectOne: true }))
150
- .on(this.nextKey, () => list.next({ selectOne: true }))
151
- .on('Home', () => list.first({ selectOne: true }))
152
- .on('End', () => list.last({ selectOne: true }))
153
- .on(this.typeaheadRegexp, e => list.search(e.key, { selectOne: true }));
154
- }
155
- if (this.inputs.multi()) {
156
- manager
157
- // TODO: Tracking the anchor by index can break if the
158
- // tree is expanded or collapsed causing the index to change.
159
- .on(Modifier.Any, 'Shift', () => list.anchor(this.listBehavior.activeIndex()))
160
- .on(Modifier.Shift, this.prevKey, () => list.prev({ selectRange: true }))
161
- .on(Modifier.Shift, this.nextKey, () => list.next({ selectRange: true }))
162
- .on([Modifier.Ctrl | Modifier.Shift, Modifier.Meta | Modifier.Shift], 'Home', () => list.first({ selectRange: true, anchor: false }))
163
- .on([Modifier.Ctrl | Modifier.Shift, Modifier.Meta | Modifier.Shift], 'End', () => list.last({ selectRange: true, anchor: false }))
164
- .on(Modifier.Shift, 'Enter', () => list.updateSelection({ selectRange: true, anchor: false }))
165
- .on(Modifier.Shift, this.dynamicSpaceKey, () => list.updateSelection({ selectRange: true, anchor: false }));
166
- }
167
- if (!this.followFocus() && this.inputs.multi()) {
168
- manager
169
- .on(this.dynamicSpaceKey, () => list.toggle())
170
- .on('Enter', () => list.toggle())
171
- .on([Modifier.Ctrl, Modifier.Meta], 'A', () => list.toggleAll());
172
- }
173
- if (!this.followFocus() && !this.inputs.multi()) {
174
- manager.on(this.dynamicSpaceKey, () => list.toggleOne());
175
- manager.on('Enter', () => list.toggleOne());
176
- }
177
- if (this.inputs.multi() && this.followFocus()) {
178
- manager
179
- .on([Modifier.Ctrl, Modifier.Meta], this.prevKey, () => list.prev())
180
- .on([Modifier.Ctrl, Modifier.Meta], this.nextKey, () => list.next())
181
- .on([Modifier.Ctrl, Modifier.Meta], ' ', () => list.toggle())
182
- .on([Modifier.Ctrl, Modifier.Meta], 'Enter', () => list.toggle())
183
- .on([Modifier.Ctrl, Modifier.Meta], 'Home', () => list.first())
184
- .on([Modifier.Ctrl, Modifier.Meta], 'End', () => list.last())
185
- .on([Modifier.Ctrl, Modifier.Meta], 'A', () => {
186
- list.toggleAll();
187
- list.select(); // Ensure the currect item remains selected.
188
- });
189
- }
190
- manager
191
- .on(this.expandKey, () => this.expand())
192
- .on(this.collapseKey, () => this.collapse())
193
- .on(Modifier.Shift, '*', () => this.expandSiblings());
194
- return manager;
195
- });
196
- /** The pointerdown event manager for the tree. */
197
- pointerdown = computed(() => {
198
- const manager = new PointerEventManager();
199
- if (this.multi()) {
200
- manager.on(Modifier.Shift, e => this.goto(e, { selectRange: true }));
201
- }
202
- if (!this.multi() && this.followFocus()) {
203
- return manager.on(e => this.goto(e, { selectOne: true }));
204
- }
205
- if (!this.multi() && !this.followFocus()) {
206
- return manager.on(e => this.goto(e, { toggle: true }));
207
- }
208
- if (this.multi() && this.followFocus()) {
209
- return manager
210
- .on(e => this.goto(e, { selectOne: true }))
211
- .on(Modifier.Ctrl, e => this.goto(e, { toggle: true }));
212
- }
213
- if (this.multi() && !this.followFocus()) {
214
- return manager.on(e => this.goto(e, { toggle: true }));
215
- }
216
- return manager;
217
- });
218
- constructor(inputs) {
219
- this.inputs = inputs;
220
- this.nav = inputs.nav;
221
- this.currentType = inputs.currentType;
222
- this.allItems = inputs.allItems;
223
- this.focusMode = inputs.focusMode;
224
- this.disabled = inputs.disabled;
225
- this.activeItem = inputs.activeItem;
226
- this.skipDisabled = inputs.skipDisabled;
227
- this.wrap = inputs.wrap;
228
- this.orientation = inputs.orientation;
229
- this.textDirection = inputs.textDirection;
230
- this.multi = computed(() => (this.nav() ? false : this.inputs.multi()));
231
- this.selectionMode = inputs.selectionMode;
232
- this.typeaheadDelay = inputs.typeaheadDelay;
233
- this.value = inputs.value;
234
- this.listBehavior = new List({
235
- ...inputs,
236
- items: this.visibleItems,
237
- multi: this.multi,
238
- });
239
- this.expansionManager = new ListExpansion({
240
- multiExpandable: () => true,
241
- // TODO(ok7sai): allow pre-expanded tree items.
242
- expandedIds: signal([]),
243
- items: this.children,
244
- disabled: this.disabled,
245
- });
246
- }
247
- /**
248
- * Sets the tree to it's default initial state.
249
- *
250
- * Sets the active index of the tree to the first focusable selected tree item if one exists.
251
- * Otherwise, sets focus to the first focusable tree item.
252
- */
253
- setDefaultState() {
254
- let firstItem;
255
- for (const item of this.allItems()) {
256
- if (!item.visible())
257
- continue;
258
- if (!this.listBehavior.isFocusable(item))
259
- continue;
260
- if (firstItem === undefined) {
261
- firstItem = item;
262
- }
263
- if (item.selected()) {
264
- this.activeItem.set(item);
265
- return;
266
- }
267
- }
268
- if (firstItem !== undefined) {
269
- this.activeItem.set(firstItem);
270
- }
271
- }
272
- /** Handles keydown events on the tree. */
273
- onKeydown(event) {
274
- if (!this.disabled()) {
275
- this.keydown().handle(event);
276
- }
277
- }
278
- /** Handles pointerdown events on the tree. */
279
- onPointerdown(event) {
280
- if (!this.disabled()) {
281
- this.pointerdown().handle(event);
282
- }
283
- }
284
- /** Navigates to the given tree item in the tree. */
285
- goto(e, opts) {
286
- const item = this._getItem(e);
287
- if (!item)
288
- return;
289
- this.listBehavior.goto(item, opts);
290
- this.toggleExpansion(item);
291
- }
292
- /** Toggles to expand or collapse a tree item. */
293
- toggleExpansion(item) {
294
- item ??= this.activeItem();
295
- if (!item || !this.listBehavior.isFocusable(item))
296
- return;
297
- if (!item.expandable())
298
- return;
299
- if (item.expanded()) {
300
- this.collapse();
301
- }
302
- else {
303
- item.expansion.open();
304
- }
305
- }
306
- /** Expands a tree item. */
307
- expand(item) {
308
- item ??= this.activeItem();
309
- if (!item || !this.listBehavior.isFocusable(item))
310
- return;
311
- if (item.expandable() && !item.expanded()) {
312
- item.expansion.open();
313
- }
314
- else if (item.expanded() && item.children().length > 0) {
315
- const firstChild = item.children()[0];
316
- if (this.listBehavior.isFocusable(firstChild)) {
317
- this.listBehavior.goto(firstChild);
318
- }
319
- }
320
- }
321
- /** Expands all sibling tree items including itself. */
322
- expandSiblings(item) {
323
- item ??= this.activeItem();
324
- const siblings = item?.parent()?.children();
325
- siblings?.forEach(item => this.expand(item));
326
- }
327
- /** Collapses a tree item. */
328
- collapse(item) {
329
- item ??= this.activeItem();
330
- if (!item || !this.listBehavior.isFocusable(item))
331
- return;
332
- if (item.expandable() && item.expanded()) {
333
- item.expansion.close();
334
- }
335
- else if (item.parent() && item.parent() !== this) {
336
- const parentItem = item.parent();
337
- if (parentItem instanceof TreeItemPattern && this.listBehavior.isFocusable(parentItem)) {
338
- this.listBehavior.goto(parentItem);
339
- }
340
- }
341
- }
342
- /** Retrieves the TreeItemPattern associated with a DOM event, if any. */
343
- _getItem(event) {
344
- if (!(event.target instanceof HTMLElement)) {
345
- return;
346
- }
347
- const element = event.target.closest('[role="treeitem"]');
348
- return this.inputs.allItems().find(i => i.element() === element);
349
- }
350
- }
351
-
352
- /**
353
- * Sort directives by their document order.
354
- */
355
- function sortDirectives(a, b) {
356
- return (a.element().compareDocumentPosition(b.element()) & Node.DOCUMENT_POSITION_PRECEDING) > 0
357
- ? 1
358
- : -1;
359
- }
360
- /**
361
- * A Tree container.
362
- *
363
- * Transforms nested lists into an accessible, ARIA-compliant tree structure.
364
- *
365
- * ```html
366
- * <ul cdkTree [(value)]="selectedItems" [multi]="true">
367
- * <li cdkTreeItem [value]="'leaf1'">Leaf Item 1</li>
368
- * <li cdkTreeItem [value]="'parent1'">
369
- * Parent Item 1
370
- * <ul cdkTreeItemGroup [value]="'parent1'">
371
- * <ng-template cdkTreeItemGroupContent>
372
- * <li cdkTreeItem [value]="'child1.1'">Child Item 1.1</li>
373
- * <li cdkTreeItem [value]="'child1.2'">Child Item 1.2</li>
374
- * </ng-template>
375
- * </ul>
376
- * </li>
377
- * <li cdkTreeItem [value]="'leaf2'" [disabled]="true">Disabled Leaf Item 2</li>
378
- * </ul>
379
- * ```
380
- */
381
- class CdkTree {
382
- /** All CdkTreeItem instances within this tree. */
383
- _unorderedItems = signal(new Set(), ...(ngDevMode ? [{ debugName: "_unorderedItems" }] : []));
384
- /** Orientation of the tree. */
385
- orientation = input('vertical', ...(ngDevMode ? [{ debugName: "orientation" }] : []));
386
- /** Whether multi-selection is allowed. */
387
- multi = input(false, ...(ngDevMode ? [{ debugName: "multi", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
388
- /** Whether the tree is disabled. */
389
- disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
390
- /** The selection strategy used by the tree. */
391
- selectionMode = input('explicit', ...(ngDevMode ? [{ debugName: "selectionMode" }] : []));
392
- /** The focus strategy used by the tree. */
393
- focusMode = input('roving', ...(ngDevMode ? [{ debugName: "focusMode" }] : []));
394
- /** Whether navigation wraps. */
395
- wrap = input(true, ...(ngDevMode ? [{ debugName: "wrap", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
396
- /** Whether to skip disabled items during navigation. */
397
- skipDisabled = input(true, ...(ngDevMode ? [{ debugName: "skipDisabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
398
- /** Typeahead delay. */
399
- typeaheadDelay = input(0.5, ...(ngDevMode ? [{ debugName: "typeaheadDelay" }] : []));
400
- /** Selected item values. */
401
- value = model([], ...(ngDevMode ? [{ debugName: "value" }] : []));
402
- /** Text direction. */
403
- textDirection = inject(Directionality).valueSignal;
404
- /** Whether the tree is in navigation mode. */
405
- nav = input(false, ...(ngDevMode ? [{ debugName: "nav" }] : []));
406
- /** The aria-current type. */
407
- currentType = input('page', ...(ngDevMode ? [{ debugName: "currentType" }] : []));
408
- /** The UI pattern for the tree. */
409
- pattern = new TreePattern({
410
- ...this,
411
- allItems: computed(() => [...this._unorderedItems()].sort(sortDirectives).map(item => item.pattern)),
412
- activeItem: signal(undefined),
413
- });
414
- /** Whether the tree has received focus yet. */
415
- _hasFocused = signal(false, ...(ngDevMode ? [{ debugName: "_hasFocused" }] : []));
416
- constructor() {
417
- afterRenderEffect(() => {
418
- if (!this._hasFocused()) {
419
- this.pattern.setDefaultState();
420
- }
421
- });
422
- }
423
- onFocus() {
424
- this._hasFocused.set(true);
425
- }
426
- register(child) {
427
- this._unorderedItems().add(child);
428
- this._unorderedItems.set(new Set(this._unorderedItems()));
429
- }
430
- unregister(child) {
431
- this._unorderedItems().delete(child);
432
- this._unorderedItems.set(new Set(this._unorderedItems()));
433
- }
434
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0-rc.1", ngImport: i0, type: CdkTree, deps: [], target: i0.ɵɵFactoryTarget.Directive });
435
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.2.0-rc.1", type: CdkTree, isStandalone: true, selector: "[cdkTree]", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, multi: { classPropertyName: "multi", publicName: "multi", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, focusMode: { classPropertyName: "focusMode", publicName: "focusMode", isSignal: true, isRequired: false, transformFunction: null }, wrap: { classPropertyName: "wrap", publicName: "wrap", isSignal: true, isRequired: false, transformFunction: null }, skipDisabled: { classPropertyName: "skipDisabled", publicName: "skipDisabled", isSignal: true, isRequired: false, transformFunction: null }, typeaheadDelay: { classPropertyName: "typeaheadDelay", publicName: "typeaheadDelay", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, nav: { classPropertyName: "nav", publicName: "nav", isSignal: true, isRequired: false, transformFunction: null }, currentType: { classPropertyName: "currentType", publicName: "currentType", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { attributes: { "role": "tree" }, listeners: { "keydown": "pattern.onKeydown($event)", "pointerdown": "pattern.onPointerdown($event)", "focusin": "onFocus()" }, properties: { "attr.aria-orientation": "pattern.orientation()", "attr.aria-multiselectable": "pattern.multi()", "attr.aria-disabled": "pattern.disabled()", "attr.aria-activedescendant": "pattern.activedescendant()", "tabindex": "pattern.tabindex()" }, classAttribute: "cdk-tree" }, exportAs: ["cdkTree"], ngImport: i0 });
436
- }
437
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-rc.1", ngImport: i0, type: CdkTree, decorators: [{
438
- type: Directive,
439
- args: [{
440
- selector: '[cdkTree]',
441
- exportAs: 'cdkTree',
442
- host: {
443
- 'class': 'cdk-tree',
444
- 'role': 'tree',
445
- '[attr.aria-orientation]': 'pattern.orientation()',
446
- '[attr.aria-multiselectable]': 'pattern.multi()',
447
- '[attr.aria-disabled]': 'pattern.disabled()',
448
- '[attr.aria-activedescendant]': 'pattern.activedescendant()',
449
- '[tabindex]': 'pattern.tabindex()',
450
- '(keydown)': 'pattern.onKeydown($event)',
451
- '(pointerdown)': 'pattern.onPointerdown($event)',
452
- '(focusin)': 'onFocus()',
453
- },
454
- }]
455
- }], ctorParameters: () => [] });
456
- /**
457
- * A selectable and expandable Tree Item in a Tree.
458
- */
459
- class CdkTreeItem {
460
- /** A reference to the tree item element. */
461
- _elementRef = inject(ElementRef);
462
- /** A unique identifier for the tree item. */
463
- _id = inject(_IdGenerator).getId('cdk-tree-item-');
464
- /** The owned tree item group. */
465
- _group = signal(undefined, ...(ngDevMode ? [{ debugName: "_group" }] : []));
466
- /** The id of the owned group. */
467
- ownsId = computed(() => this._group()?.id, ...(ngDevMode ? [{ debugName: "ownsId" }] : []));
468
- /** The host native element. */
469
- element = computed(() => this._elementRef.nativeElement, ...(ngDevMode ? [{ debugName: "element" }] : []));
470
- /** The value of the tree item. */
471
- value = input.required(...(ngDevMode ? [{ debugName: "value" }] : []));
472
- /** The parent tree root or tree item group. */
473
- parent = input.required(...(ngDevMode ? [{ debugName: "parent" }] : []));
474
- /** Whether the tree item is disabled. */
475
- disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
476
- /** Optional label for typeahead. Defaults to the element's textContent. */
477
- label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
478
- /** Search term for typeahead. */
479
- searchTerm = computed(() => this.label() ?? this.element().textContent, ...(ngDevMode ? [{ debugName: "searchTerm" }] : []));
480
- /** The tree root. */
481
- tree = computed(() => {
482
- if (this.parent() instanceof CdkTree) {
483
- return this.parent();
484
- }
485
- return this.parent().ownedBy().tree();
486
- }, ...(ngDevMode ? [{ debugName: "tree" }] : []));
487
- /** The UI pattern for this item. */
488
- pattern;
489
- constructor() {
490
- // Updates the visibility of the owned group.
491
- afterRenderEffect(() => {
492
- this._group()?.visible.set(this.pattern.expanded());
493
- });
494
- }
495
- ngOnInit() {
496
- this.parent().register(this);
497
- this.tree().register(this);
498
- const treePattern = computed(() => this.tree().pattern, ...(ngDevMode ? [{ debugName: "treePattern" }] : []));
499
- const parentPattern = computed(() => {
500
- if (this.parent() instanceof CdkTree) {
501
- return treePattern();
502
- }
503
- return this.parent().ownedBy().pattern;
504
- }, ...(ngDevMode ? [{ debugName: "parentPattern" }] : []));
505
- this.pattern = new TreeItemPattern({
506
- ...this,
507
- id: () => this._id,
508
- tree: treePattern,
509
- parent: parentPattern,
510
- children: computed(() => this._group()
511
- ?.children()
512
- .map(item => item.pattern) ?? []),
513
- hasChildren: computed(() => !!this._group()),
514
- });
515
- }
516
- ngOnDestroy() {
517
- this.parent().unregister(this);
518
- this.tree().unregister(this);
519
- }
520
- register(group) {
521
- this._group.set(group);
522
- }
523
- unregister() {
524
- this._group.set(undefined);
525
- }
526
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0-rc.1", ngImport: i0, type: CdkTreeItem, deps: [], target: i0.ɵɵFactoryTarget.Directive });
527
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.2.0-rc.1", type: CdkTreeItem, isStandalone: true, selector: "[cdkTreeItem]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, parent: { classPropertyName: "parent", publicName: "parent", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "treeitem" }, properties: { "class.cdk-active": "pattern.active()", "id": "pattern.id()", "attr.aria-expanded": "pattern.expandable() ? pattern.expanded() : null", "attr.aria-selected": "pattern.selected()", "attr.aria-current": "pattern.current()", "attr.aria-disabled": "pattern.disabled()", "attr.aria-level": "pattern.level()", "attr.aria-owns": "ownsId()", "attr.aria-setsize": "pattern.setsize()", "attr.aria-posinset": "pattern.posinset()", "attr.tabindex": "pattern.tabindex()", "attr.inert": "pattern.visible() ? null : true" }, classAttribute: "cdk-treeitem" }, exportAs: ["cdkTreeItem"], ngImport: i0 });
528
- }
529
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-rc.1", ngImport: i0, type: CdkTreeItem, decorators: [{
530
- type: Directive,
531
- args: [{
532
- selector: '[cdkTreeItem]',
533
- exportAs: 'cdkTreeItem',
534
- host: {
535
- 'class': 'cdk-treeitem',
536
- '[class.cdk-active]': 'pattern.active()',
537
- 'role': 'treeitem',
538
- '[id]': 'pattern.id()',
539
- '[attr.aria-expanded]': 'pattern.expandable() ? pattern.expanded() : null',
540
- '[attr.aria-selected]': 'pattern.selected()',
541
- '[attr.aria-current]': 'pattern.current()',
542
- '[attr.aria-disabled]': 'pattern.disabled()',
543
- '[attr.aria-level]': 'pattern.level()',
544
- '[attr.aria-owns]': 'ownsId()',
545
- '[attr.aria-setsize]': 'pattern.setsize()',
546
- '[attr.aria-posinset]': 'pattern.posinset()',
547
- '[attr.tabindex]': 'pattern.tabindex()',
548
- '[attr.inert]': 'pattern.visible() ? null : true',
549
- },
550
- }]
551
- }], ctorParameters: () => [] });
552
- /**
553
- * Container that designates content as a group.
554
- */
555
- class CdkTreeItemGroup {
556
- /** A reference to the group element. */
557
- _elementRef = inject(ElementRef);
558
- /** The DeferredContentAware host directive. */
559
- _deferredContentAware = inject(DeferredContentAware);
560
- /** All groupable items that are descendants of the group. */
561
- _unorderedItems = signal(new Set(), ...(ngDevMode ? [{ debugName: "_unorderedItems" }] : []));
562
- /** The host native element. */
563
- element = computed(() => this._elementRef.nativeElement, ...(ngDevMode ? [{ debugName: "element" }] : []));
564
- /** Unique ID for the group. */
565
- id = inject(_IdGenerator).getId('cdk-tree-group-');
566
- /** Whether the group is visible. */
567
- visible = signal(true, ...(ngDevMode ? [{ debugName: "visible" }] : []));
568
- /** Child items within this group. */
569
- children = computed(() => [...this._unorderedItems()].sort(sortDirectives), ...(ngDevMode ? [{ debugName: "children" }] : []));
570
- /** Tree item that owns the group. */
571
- ownedBy = input.required(...(ngDevMode ? [{ debugName: "ownedBy" }] : []));
572
- constructor() {
573
- // Connect the group's hidden state to the DeferredContentAware's visibility.
574
- afterRenderEffect(() => {
575
- this._deferredContentAware.contentVisible.set(this.visible());
576
- });
577
- }
578
- ngOnInit() {
579
- this.ownedBy().register(this);
580
- }
581
- ngOnDestroy() {
582
- this.ownedBy().unregister();
583
- }
584
- register(child) {
585
- this._unorderedItems().add(child);
586
- this._unorderedItems.set(new Set(this._unorderedItems()));
587
- }
588
- unregister(child) {
589
- this._unorderedItems().delete(child);
590
- this._unorderedItems.set(new Set(this._unorderedItems()));
591
- }
592
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0-rc.1", ngImport: i0, type: CdkTreeItemGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive });
593
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.2.0-rc.1", type: CdkTreeItemGroup, isStandalone: true, selector: "[cdkTreeItemGroup]", inputs: { ownedBy: { classPropertyName: "ownedBy", publicName: "ownedBy", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "role": "group" }, properties: { "id": "id", "attr.inert": "visible() ? null : true" }, classAttribute: "cdk-treeitem-group" }, exportAs: ["cdkTreeItemGroup"], hostDirectives: [{ directive: i1.DeferredContentAware, inputs: ["preserveContent", "preserveContent"] }], ngImport: i0 });
594
- }
595
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-rc.1", ngImport: i0, type: CdkTreeItemGroup, decorators: [{
596
- type: Directive,
597
- args: [{
598
- selector: '[cdkTreeItemGroup]',
599
- exportAs: 'cdkTreeItemGroup',
600
- hostDirectives: [
601
- {
602
- directive: DeferredContentAware,
603
- inputs: ['preserveContent'],
604
- },
605
- ],
606
- host: {
607
- 'class': 'cdk-treeitem-group',
608
- 'role': 'group',
609
- '[id]': 'id',
610
- '[attr.inert]': 'visible() ? null : true',
611
- },
612
- }]
613
- }], ctorParameters: () => [] });
614
- /**
615
- * A structural directive that marks the `ng-template` to be used as the content
616
- * for a `CdkTreeItemGroup`. This content can be lazily loaded.
617
- */
618
- class CdkTreeItemGroupContent {
619
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0-rc.1", ngImport: i0, type: CdkTreeItemGroupContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
620
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.0-rc.1", type: CdkTreeItemGroupContent, isStandalone: true, selector: "ng-template[cdkTreeItemGroupContent]", hostDirectives: [{ directive: i1.DeferredContent }], ngImport: i0 });
621
- }
622
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-rc.1", ngImport: i0, type: CdkTreeItemGroupContent, decorators: [{
623
- type: Directive,
624
- args: [{
625
- selector: 'ng-template[cdkTreeItemGroupContent]',
626
- hostDirectives: [DeferredContent],
627
- }]
628
- }] });
629
-
630
- export { CdkTree, CdkTreeItem, CdkTreeItemGroup, CdkTreeItemGroupContent };
631
- //# sourceMappingURL=tree.mjs.map