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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (41) hide show
  1. package/_adev_assets/aria-accordion.json +439 -55
  2. package/_adev_assets/aria-combobox.json +343 -35
  3. package/_adev_assets/aria-grid.json +345 -77
  4. package/_adev_assets/aria-listbox.json +113 -33
  5. package/_adev_assets/aria-menu.json +366 -141
  6. package/_adev_assets/aria-tabs.json +261 -77
  7. package/_adev_assets/aria-toolbar.json +72 -33
  8. package/_adev_assets/aria-tree.json +169 -26
  9. package/fesm2022/_widget-chunk.mjs +388 -57
  10. package/fesm2022/_widget-chunk.mjs.map +1 -1
  11. package/fesm2022/accordion.mjs +121 -68
  12. package/fesm2022/accordion.mjs.map +1 -1
  13. package/fesm2022/aria.mjs +1 -1
  14. package/fesm2022/aria.mjs.map +1 -1
  15. package/fesm2022/combobox.mjs +132 -21
  16. package/fesm2022/combobox.mjs.map +1 -1
  17. package/fesm2022/grid.mjs +198 -61
  18. package/fesm2022/grid.mjs.map +1 -1
  19. package/fesm2022/listbox.mjs +42 -31
  20. package/fesm2022/listbox.mjs.map +1 -1
  21. package/fesm2022/menu.mjs +173 -67
  22. package/fesm2022/menu.mjs.map +1 -1
  23. package/fesm2022/private.mjs +415 -439
  24. package/fesm2022/private.mjs.map +1 -1
  25. package/fesm2022/tabs.mjs +86 -55
  26. package/fesm2022/tabs.mjs.map +1 -1
  27. package/fesm2022/toolbar.mjs +13 -25
  28. package/fesm2022/toolbar.mjs.map +1 -1
  29. package/fesm2022/tree.mjs +86 -44
  30. package/fesm2022/tree.mjs.map +1 -1
  31. package/package.json +2 -2
  32. package/types/_grid-chunk.d.ts +216 -35
  33. package/types/accordion.d.ts +133 -34
  34. package/types/combobox.d.ts +145 -12
  35. package/types/grid.d.ts +149 -31
  36. package/types/listbox.d.ts +58 -26
  37. package/types/menu.d.ts +130 -46
  38. package/types/private.d.ts +210 -250
  39. package/types/tabs.d.ts +119 -39
  40. package/types/toolbar.d.ts +49 -29
  41. package/types/tree.d.ts +113 -41
@@ -9,6 +9,16 @@
9
9
  "isAbstract": false,
10
10
  "entryType": "directive",
11
11
  "members": [
12
+ {
13
+ "name": "element",
14
+ "type": "HTMLElement",
15
+ "memberType": "property",
16
+ "memberTags": [
17
+ "readonly"
18
+ ],
19
+ "description": "A reference to the host element.",
20
+ "jsdocTags": []
21
+ },
12
22
  {
13
23
  "name": "textDirection",
14
24
  "type": "any",
@@ -49,7 +59,7 @@
49
59
  "memberTags": [
50
60
  "input"
51
61
  ],
52
- "description": "Whether to allow disabled items to receive focus.",
62
+ "description": "Whether to allow disabled items to receive focus. When `true`, disabled items are\nfocusable but not interactive. When `false`, disabled items are skipped during navigation.",
53
63
  "jsdocTags": [],
54
64
  "inputAlias": "softDisabled",
55
65
  "isRequiredInput": false
@@ -217,9 +227,14 @@
217
227
  "name": "V"
218
228
  }
219
229
  ],
220
- "description": "A toolbar widget container.\n\nWidgets such as radio groups or buttons are nested within a toolbar to allow for a single\nplace of reference for focus and navigation. The Toolbar is meant to be used in conjunction\nwith ToolbarWidget and RadioGroup as follows:\n\n```html\n<div ngToolbar>\n <button ngToolbarWidget>Button</button>\n <div ngRadioGroup>\n <label ngRadioButton value=\"1\">Option 1</label>\n <label ngRadioButton value=\"2\">Option 2</label>\n <label ngRadioButton value=\"3\">Option 3</label>\n </div>\n</div>\n```",
221
- "jsdocTags": [],
222
- "rawComment": "/**\n * A toolbar widget container.\n *\n * Widgets such as radio groups or buttons are nested within a toolbar to allow for a single\n * place of reference for focus and navigation. The Toolbar is meant to be used in conjunction\n * with ToolbarWidget and RadioGroup as follows:\n *\n * ```html\n * <div ngToolbar>\n * <button ngToolbarWidget>Button</button>\n * <div ngRadioGroup>\n * <label ngRadioButton value=\"1\">Option 1</label>\n * <label ngRadioButton value=\"2\">Option 2</label>\n * <label ngRadioButton value=\"3\">Option 3</label>\n * </div>\n * </div>\n * ```\n */",
230
+ "description": "A toolbar widget container for a group of interactive widgets, such as\nbuttons or radio groups. It provides a single point of reference for keyboard navigation\nand focus management. It supports various orientations and disabled states.\n\n```html\n<div ngToolbar orientation=\"horizontal\" [wrap]=\"true\">\n <button ngToolbarWidget value=\"save\">Save</button>\n <button ngToolbarWidget value=\"print\">Print</button>\n\n <div ngToolbarWidgetGroup [(value)]=\"selectedAlignment\">\n <button ngToolbarWidget value=\"left\">Left</button>\n <button ngToolbarWidget value=\"center\">Center</button>\n <button ngToolbarWidget value=\"right\">Right</button>\n </div>\n</div>\n```",
231
+ "jsdocTags": [
232
+ {
233
+ "name": "developerPreview",
234
+ "comment": "21.0"
235
+ }
236
+ ],
237
+ "rawComment": "/**\n * A toolbar widget container for a group of interactive widgets, such as\n * buttons or radio groups. It provides a single point of reference for keyboard navigation\n * and focus management. It supports various orientations and disabled states.\n *\n * ```html\n * <div ngToolbar orientation=\"horizontal\" [wrap]=\"true\">\n * <button ngToolbarWidget value=\"save\">Save</button>\n * <button ngToolbarWidget value=\"print\">Print</button>\n *\n * <div ngToolbarWidgetGroup [(value)]=\"selectedAlignment\">\n * <button ngToolbarWidget value=\"left\">Left</button>\n * <button ngToolbarWidget value=\"center\">Center</button>\n * <button ngToolbarWidget value=\"right\">Right</button>\n * </div>\n * </div>\n * ```\n *\n * @developerPreview 21.0\n */",
223
238
  "implements": [],
224
239
  "isStandalone": true,
225
240
  "selector": "[ngToolbar]",
@@ -228,8 +243,8 @@
228
243
  ],
229
244
  "source": {
230
245
  "filePath": "/src/aria/toolbar/toolbar.ts",
231
- "startLine": 63,
232
- "endLine": 158
246
+ "startLine": 64,
247
+ "endLine": 164
233
248
  }
234
249
  },
235
250
  {
@@ -237,6 +252,16 @@
237
252
  "isAbstract": false,
238
253
  "entryType": "directive",
239
254
  "members": [
255
+ {
256
+ "name": "element",
257
+ "type": "HTMLElement",
258
+ "memberType": "property",
259
+ "memberTags": [
260
+ "readonly"
261
+ ],
262
+ "description": "A reference to the host element.",
263
+ "jsdocTags": []
264
+ },
240
265
  {
241
266
  "name": "id",
242
267
  "type": "any",
@@ -260,16 +285,6 @@
260
285
  "description": "The parent Toolbar UIPattern.",
261
286
  "jsdocTags": []
262
287
  },
263
- {
264
- "name": "element",
265
- "type": "any",
266
- "memberType": "property",
267
- "memberTags": [
268
- "readonly"
269
- ],
270
- "description": "A reference to the widget element to be focused on navigation.",
271
- "jsdocTags": []
272
- },
273
288
  {
274
289
  "name": "disabled",
275
290
  "type": "any",
@@ -408,9 +423,14 @@
408
423
  "name": "V"
409
424
  }
410
425
  ],
411
- "description": "A widget within a toolbar.\n\nA widget is anything that is within a toolbar. It should be applied to any native HTML element\nthat has the purpose of acting as a widget navigatable within a toolbar.",
412
- "jsdocTags": [],
413
- "rawComment": "/**\n * A widget within a toolbar.\n *\n * A widget is anything that is within a toolbar. It should be applied to any native HTML element\n * that has the purpose of acting as a widget navigatable within a toolbar.\n */",
426
+ "description": "A widget within a toolbar.\n\nThe `ngToolbarWidget` directive should be applied to any native HTML element that acts\nas an interactive widget within an `ngToolbar` or `ngToolbarWidgetGroup`. It enables\nkeyboard navigation and selection within the toolbar.\n\n```html\n<button ngToolbarWidget value=\"action-id\" [disabled]=\"isDisabled\">\n Perform Action\n</button>\n```",
427
+ "jsdocTags": [
428
+ {
429
+ "name": "developerPreview",
430
+ "comment": "21.0"
431
+ }
432
+ ],
433
+ "rawComment": "/**\n * A widget within a toolbar.\n *\n * The `ngToolbarWidget` directive should be applied to any native HTML element that acts\n * as an interactive widget within an `ngToolbar` or `ngToolbarWidgetGroup`. It enables\n * keyboard navigation and selection within the toolbar.\n *\n * ```html\n * <button ngToolbarWidget value=\"action-id\" [disabled]=\"isDisabled\">\n * Perform Action\n * </button>\n * ```\n *\n * @developerPreview 21.0\n */",
414
434
  "implements": [
415
435
  "OnInit",
416
436
  "OnDestroy"
@@ -422,8 +442,8 @@
422
442
  ],
423
443
  "source": {
424
444
  "filePath": "/src/aria/toolbar/toolbar.ts",
425
- "startLine": 166,
426
- "endLine": 234
445
+ "startLine": 181,
446
+ "endLine": 245
427
447
  }
428
448
  },
429
449
  {
@@ -431,6 +451,16 @@
431
451
  "isAbstract": false,
432
452
  "entryType": "directive",
433
453
  "members": [
454
+ {
455
+ "name": "element",
456
+ "type": "HTMLElement",
457
+ "memberType": "property",
458
+ "memberTags": [
459
+ "readonly"
460
+ ],
461
+ "description": "A reference to the host element.",
462
+ "jsdocTags": []
463
+ },
434
464
  {
435
465
  "name": "toolbar",
436
466
  "type": "any",
@@ -483,9 +513,14 @@
483
513
  "name": "V"
484
514
  }
485
515
  ],
486
- "description": "A directive that groups toolbar widgets, used for more complex widgets like radio groups that\nhave their own internal navigation.",
487
- "jsdocTags": [],
488
- "rawComment": "/**\n * A directive that groups toolbar widgets, used for more complex widgets like radio groups that\n * have their own internal navigation.\n */",
516
+ "description": "A directive that groups toolbar widgets, used for more complex widgets like radio groups\nthat have their own internal navigation.",
517
+ "jsdocTags": [
518
+ {
519
+ "name": "developerPreview",
520
+ "comment": "21.0"
521
+ }
522
+ ],
523
+ "rawComment": "/**\n * A directive that groups toolbar widgets, used for more complex widgets like radio groups\n * that have their own internal navigation.\n *\n * @developerPreview 21.0\n */",
489
524
  "implements": [],
490
525
  "isStandalone": true,
491
526
  "selector": "[ngToolbarWidgetGroup]",
@@ -494,8 +529,8 @@
494
529
  ],
495
530
  "source": {
496
531
  "filePath": "/src/aria/toolbar/toolbar.ts",
497
- "startLine": 240,
498
- "endLine": 268
532
+ "startLine": 253,
533
+ "endLine": 284
499
534
  }
500
535
  }
501
536
  ],
@@ -532,10 +567,6 @@
532
567
  "signal",
533
568
  "@angular/core"
534
569
  ],
535
- [
536
- "Signal",
537
- "@angular/core"
538
- ],
539
570
  [
540
571
  "OnInit",
541
572
  "@angular/core"
@@ -588,6 +619,10 @@
588
619
  "Toolbar",
589
620
  "@angular/aria/toolbar"
590
621
  ],
622
+ [
623
+ "Toolbar.element",
624
+ "@angular/aria/toolbar"
625
+ ],
591
626
  [
592
627
  "Toolbar.textDirection",
593
628
  "@angular/aria/toolbar"
@@ -629,15 +664,15 @@
629
664
  "@angular/aria/toolbar"
630
665
  ],
631
666
  [
632
- "ToolbarWidget.id",
667
+ "ToolbarWidget.element",
633
668
  "@angular/aria/toolbar"
634
669
  ],
635
670
  [
636
- "ToolbarWidget.toolbar",
671
+ "ToolbarWidget.id",
637
672
  "@angular/aria/toolbar"
638
673
  ],
639
674
  [
640
- "ToolbarWidget.element",
675
+ "ToolbarWidget.toolbar",
641
676
  "@angular/aria/toolbar"
642
677
  ],
643
678
  [
@@ -676,6 +711,10 @@
676
711
  "ToolbarWidgetGroup",
677
712
  "@angular/aria/toolbar"
678
713
  ],
714
+ [
715
+ "ToolbarWidgetGroup.element",
716
+ "@angular/aria/toolbar"
717
+ ],
679
718
  [
680
719
  "ToolbarWidgetGroup.toolbar",
681
720
  "@angular/aria/toolbar"
@@ -9,12 +9,22 @@
9
9
  "isAbstract": false,
10
10
  "entryType": "undecorated_class",
11
11
  "members": [
12
+ {
13
+ "name": "element",
14
+ "type": "HTMLElement",
15
+ "memberType": "property",
16
+ "memberTags": [
17
+ "readonly"
18
+ ],
19
+ "description": "A reference to the host element.",
20
+ "jsdocTags": []
21
+ },
12
22
  {
13
23
  "name": "id",
14
24
  "type": "any",
15
25
  "memberType": "property",
16
26
  "memberTags": [
17
- "protected"
27
+ "readonly"
18
28
  ],
19
29
  "description": "A unique identifier for the tree.",
20
30
  "jsdocTags": []
@@ -56,7 +66,7 @@
56
66
  "memberTags": [
57
67
  "readonly"
58
68
  ],
59
- "description": "The selection strategy used by the tree.",
69
+ "description": "The selection strategy used by the tree.\n- `explicit`: Items are selected explicitly by the user (e.g., via click or spacebar).\n- `follow`: The focused item is automatically selected.",
60
70
  "jsdocTags": []
61
71
  },
62
72
  {
@@ -66,7 +76,7 @@
66
76
  "memberTags": [
67
77
  "readonly"
68
78
  ],
69
- "description": "The focus strategy used by the tree.",
79
+ "description": "The focus strategy used by the tree.\n- `roving`: Focus is moved to the active item using `tabindex`.\n- `activedescendant`: Focus remains on the tree container, and `aria-activedescendant` is used to indicate the active item.",
70
80
  "jsdocTags": []
71
81
  },
72
82
  {
@@ -86,7 +96,7 @@
86
96
  "memberTags": [
87
97
  "readonly"
88
98
  ],
89
- "description": "Whether to allow disabled items to receive focus.",
99
+ "description": "Whether to allow disabled items to receive focus. When `true`, disabled items are\nfocusable but not interactive. When `false`, disabled items are skipped during navigation.",
90
100
  "jsdocTags": []
91
101
  },
92
102
  {
@@ -96,17 +106,17 @@
96
106
  "memberTags": [
97
107
  "readonly"
98
108
  ],
99
- "description": "Typeahead delay.",
109
+ "description": "The delay in seconds before the typeahead search is reset.",
100
110
  "jsdocTags": []
101
111
  },
102
112
  {
103
- "name": "value",
113
+ "name": "values",
104
114
  "type": "any",
105
115
  "memberType": "property",
106
116
  "memberTags": [
107
117
  "readonly"
108
118
  ],
109
- "description": "Selected item values.",
119
+ "description": "The values of the currently selected items.",
110
120
  "jsdocTags": []
111
121
  },
112
122
  {
@@ -136,7 +146,7 @@
136
146
  "memberTags": [
137
147
  "readonly"
138
148
  ],
139
- "description": "The aria-current type.",
149
+ "description": "The `aria-current` type. It can be used in navigation trees to indicate the currently active item.\nSee https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-current for more details.",
140
150
  "jsdocTags": []
141
151
  },
142
152
  {
@@ -325,14 +335,27 @@
325
335
  "name": "V"
326
336
  }
327
337
  ],
328
- "description": "A Tree container.\n\nTransforms nested lists into an accessible, ARIA-compliant tree structure.\n\n```html\n<ul ngTree [(value)]=\"selectedItems\" [multi]=\"true\">\n <li ngTreeItem [value]=\"'leaf1'\">Leaf Item 1</li>\n <li ngTreeItem [value]=\"'parent1'\">\n Parent Item 1\n <ul ngTreeItemGroup [value]=\"'parent1'\">\n <ng-template ngTreeItemGroupContent>\n <li ngTreeItem [value]=\"'child1.1'\">Child Item 1.1</li>\n <li ngTreeItem [value]=\"'child1.2'\">Child Item 1.2</li>\n </ng-template>\n </ul>\n </li>\n <li ngTreeItem [value]=\"'leaf2'\" [disabled]=\"true\">Disabled Leaf Item 2</li>\n</ul>\n```",
329
- "jsdocTags": [],
330
- "rawComment": "/**\n * A Tree container.\n *\n * Transforms nested lists into an accessible, ARIA-compliant tree structure.\n *\n * ```html\n * <ul ngTree [(value)]=\"selectedItems\" [multi]=\"true\">\n * <li ngTreeItem [value]=\"'leaf1'\">Leaf Item 1</li>\n * <li ngTreeItem [value]=\"'parent1'\">\n * Parent Item 1\n * <ul ngTreeItemGroup [value]=\"'parent1'\">\n * <ng-template ngTreeItemGroupContent>\n * <li ngTreeItem [value]=\"'child1.1'\">Child Item 1.1</li>\n * <li ngTreeItem [value]=\"'child1.2'\">Child Item 1.2</li>\n * </ng-template>\n * </ul>\n * </li>\n * <li ngTreeItem [value]=\"'leaf2'\" [disabled]=\"true\">Disabled Leaf Item 2</li>\n * </ul>\n * ```\n */",
338
+ "description": "A container that transforms nested lists into an accessible, ARIA-compliant tree structure.\nIt manages the overall state of the tree, including selection, expansion, and keyboard\nnavigation.\n\n```html\n<ul ngTree [(value)]=\"selectedItems\" [multi]=\"true\">\n <ng-template\n [ngTemplateOutlet]=\"treeNodes\"\n [ngTemplateOutletContext]=\"{nodes: treeData, parent: tree}\"\n />\n</ul>\n\n<ng-template #treeNodes let-nodes=\"nodes\" let-parent=\"parent\">",
339
+ "jsdocTags": [
340
+ {
341
+ "name": "for",
342
+ "comment": "(node of nodes; track node.name) {\n<li ngTreeItem [parent]=\"parent\" [value]=\"node.name\" [label]=\"node.name\">\n{{ node.name }}"
343
+ },
344
+ {
345
+ "name": "if",
346
+ "comment": "(node.children) {\n <ul role=\"group\">\n <ng-template ngTreeItemGroup [ownedBy]=\"treeItem\" #group=\"ngTreeItemGroup\">\n <ng-template\n [ngTemplateOutlet]=\"treeNodes\"\n [ngTemplateOutletContext]=\"{nodes: node.children, parent: group}\"\n />\n </ng-template>\n </ul>\n}\n</li>\n}\n</ng-template>\n```"
347
+ },
348
+ {
349
+ "name": "developerPreview",
350
+ "comment": "21.0"
351
+ }
352
+ ],
353
+ "rawComment": "/**\n * A container that transforms nested lists into an accessible, ARIA-compliant tree structure.\n * It manages the overall state of the tree, including selection, expansion, and keyboard\n * navigation.\n *\n * ```html\n * <ul ngTree [(value)]=\"selectedItems\" [multi]=\"true\">\n * <ng-template\n * [ngTemplateOutlet]=\"treeNodes\"\n * [ngTemplateOutletContext]=\"{nodes: treeData, parent: tree}\"\n * />\n * </ul>\n *\n * <ng-template #treeNodes let-nodes=\"nodes\" let-parent=\"parent\">\n * @for (node of nodes; track node.name) {\n * <li ngTreeItem [parent]=\"parent\" [value]=\"node.name\" [label]=\"node.name\">\n * {{ node.name }}\n * @if (node.children) {\n * <ul role=\"group\">\n * <ng-template ngTreeItemGroup [ownedBy]=\"treeItem\" #group=\"ngTreeItemGroup\">\n * <ng-template\n * [ngTemplateOutlet]=\"treeNodes\"\n * [ngTemplateOutletContext]=\"{nodes: node.children, parent: group}\"\n * />\n * </ng-template>\n * </ul>\n * }\n * </li>\n * }\n * </ng-template>\n * ```\n *\n * @developerPreview 21.0\n */",
331
354
  "implements": [],
332
355
  "source": {
333
356
  "filePath": "/src/aria/tree/tree.ts",
334
- "startLine": 70,
335
- "endLine": 213
357
+ "startLine": 83,
358
+ "endLine": 240
336
359
  }
337
360
  },
338
361
  {
@@ -342,14 +365,27 @@
342
365
  "members": [
343
366
  {
344
367
  "name": "element",
345
- "type": "any",
368
+ "type": "HTMLElement",
346
369
  "memberType": "property",
347
370
  "memberTags": [
348
371
  "readonly"
349
372
  ],
350
- "description": "The host native element.",
373
+ "description": "A reference to the host element.",
351
374
  "jsdocTags": []
352
375
  },
376
+ {
377
+ "name": "id",
378
+ "type": "any",
379
+ "memberType": "property",
380
+ "memberTags": [
381
+ "readonly",
382
+ "input"
383
+ ],
384
+ "description": "A unique identifier for the tree item.",
385
+ "jsdocTags": [],
386
+ "inputAlias": "id",
387
+ "isRequiredInput": false
388
+ },
353
389
  {
354
390
  "name": "value",
355
391
  "type": "any",
@@ -402,6 +438,21 @@
402
438
  "inputAlias": "selectable",
403
439
  "isRequiredInput": false
404
440
  },
441
+ {
442
+ "name": "expanded",
443
+ "type": "any",
444
+ "memberType": "property",
445
+ "memberTags": [
446
+ "readonly",
447
+ "input",
448
+ "output"
449
+ ],
450
+ "description": "Whether the tree item is expanded.",
451
+ "jsdocTags": [],
452
+ "inputAlias": "expanded",
453
+ "isRequiredInput": false,
454
+ "outputAlias": "expandedChange"
455
+ },
405
456
  {
406
457
  "name": "label",
407
458
  "type": "any",
@@ -435,6 +486,46 @@
435
486
  "description": "The tree root.",
436
487
  "jsdocTags": []
437
488
  },
489
+ {
490
+ "name": "active",
491
+ "type": "any",
492
+ "memberType": "property",
493
+ "memberTags": [
494
+ "readonly"
495
+ ],
496
+ "description": "Whether the item is active.",
497
+ "jsdocTags": []
498
+ },
499
+ {
500
+ "name": "level",
501
+ "type": "any",
502
+ "memberType": "property",
503
+ "memberTags": [
504
+ "readonly"
505
+ ],
506
+ "description": "The level of the current item in a tree.",
507
+ "jsdocTags": []
508
+ },
509
+ {
510
+ "name": "selected",
511
+ "type": "any",
512
+ "memberType": "property",
513
+ "memberTags": [
514
+ "readonly"
515
+ ],
516
+ "description": "Whether the item is selected.",
517
+ "jsdocTags": []
518
+ },
519
+ {
520
+ "name": "visible",
521
+ "type": "any",
522
+ "memberType": "property",
523
+ "memberTags": [
524
+ "readonly"
525
+ ],
526
+ "description": "Whether this item is visible due to all of its parents being expanded.",
527
+ "jsdocTags": []
528
+ },
438
529
  {
439
530
  "name": "ngOnInit",
440
531
  "signatures": [
@@ -589,9 +680,14 @@
589
680
  "name": "V"
590
681
  }
591
682
  ],
592
- "description": "A selectable and expandable Tree Item in a Tree.",
593
- "jsdocTags": [],
594
- "rawComment": "/**\n * A selectable and expandable Tree Item in a Tree.\n */",
683
+ "description": "A selectable and expandable item in an `ngTree`.\n\nThe `ngTreeItem` directive represents an individual node within an `ngTree`. It can be\nselected, expanded (if it has children), and disabled. The `parent` input establishes\nthe hierarchical relationship within the tree.\n\n```html\n<li ngTreeItem [parent]=\"parentTreeOrGroup\" value=\"item-id\" label=\"Item Label\">\n Item Label\n</li>\n```",
684
+ "jsdocTags": [
685
+ {
686
+ "name": "developerPreview",
687
+ "comment": "21.0"
688
+ }
689
+ ],
690
+ "rawComment": "/**\n * A selectable and expandable item in an `ngTree`.\n *\n * The `ngTreeItem` directive represents an individual node within an `ngTree`. It can be\n * selected, expanded (if it has children), and disabled. The `parent` input establishes\n * the hierarchical relationship within the tree.\n *\n * ```html\n * <li ngTreeItem [parent]=\"parentTreeOrGroup\" value=\"item-id\" label=\"Item Label\">\n * Item Label\n * </li>\n * ```\n *\n * @developerPreview 21.0\n */",
595
691
  "extends": "DeferredContentAware",
596
692
  "implements": [
597
693
  "OnInit",
@@ -605,8 +701,8 @@
605
701
  ],
606
702
  "source": {
607
703
  "filePath": "/src/aria/tree/tree.ts",
608
- "startLine": 218,
609
- "endLine": 326
704
+ "startLine": 257,
705
+ "endLine": 384
610
706
  }
611
707
  },
612
708
  {
@@ -614,6 +710,16 @@
614
710
  "isAbstract": false,
615
711
  "entryType": "undecorated_class",
616
712
  "members": [
713
+ {
714
+ "name": "element",
715
+ "type": "HTMLElement",
716
+ "memberType": "property",
717
+ "memberTags": [
718
+ "readonly"
719
+ ],
720
+ "description": "A reference to the host element.",
721
+ "jsdocTags": []
722
+ },
617
723
  {
618
724
  "name": "children",
619
725
  "type": "any",
@@ -804,17 +910,22 @@
804
910
  "name": "V"
805
911
  }
806
912
  ],
807
- "description": "Contains children tree itmes.",
808
- "jsdocTags": [],
809
- "rawComment": "/**\n * Contains children tree itmes.\n */",
913
+ "description": "Group that contains children tree items.\n\nThe `ngTreeItemGroup` structural directive should be applied to an `ng-template` that\nwraps the child `ngTreeItem` elements. It is used to define a group of children for an\nexpandable `ngTreeItem`. The `ownedBy` input links the group to its parent `ngTreeItem`.\n\n```html\n<li ngTreeItem [value]=\"'parent-id'\">\n Parent Item\n <ul role=\"group\">\n <ng-template ngTreeItemGroup [ownedBy]=\"parentTreeItemRef\">\n <li ngTreeItem [value]=\"'child-id'\">Child Item</li>\n </ng-template>\n </ul>\n</li>\n```",
914
+ "jsdocTags": [
915
+ {
916
+ "name": "developerPreview",
917
+ "comment": "21.0"
918
+ }
919
+ ],
920
+ "rawComment": "/**\n * Group that contains children tree items.\n *\n * The `ngTreeItemGroup` structural directive should be applied to an `ng-template` that\n * wraps the child `ngTreeItem` elements. It is used to define a group of children for an\n * expandable `ngTreeItem`. The `ownedBy` input links the group to its parent `ngTreeItem`.\n *\n * ```html\n * <li ngTreeItem [value]=\"'parent-id'\">\n * Parent Item\n * <ul role=\"group\">\n * <ng-template ngTreeItemGroup [ownedBy]=\"parentTreeItemRef\">\n * <li ngTreeItem [value]=\"'child-id'\">Child Item</li>\n * </ng-template>\n * </ul>\n * </li>\n * ```\n *\n * @developerPreview 21.0\n */",
810
921
  "implements": [
811
922
  "OnInit",
812
923
  "OnDestroy"
813
924
  ],
814
925
  "source": {
815
926
  "filePath": "/src/aria/tree/tree.ts",
816
- "startLine": 331,
817
- "endLine": 369
927
+ "startLine": 406,
928
+ "endLine": 450
818
929
  }
819
930
  }
820
931
  ],
@@ -919,6 +1030,10 @@
919
1030
  "Tree",
920
1031
  "@angular/aria/tree"
921
1032
  ],
1033
+ [
1034
+ "Tree.element",
1035
+ "@angular/aria/tree"
1036
+ ],
922
1037
  [
923
1038
  "Tree.id",
924
1039
  "@angular/aria/tree"
@@ -956,7 +1071,7 @@
956
1071
  "@angular/aria/tree"
957
1072
  ],
958
1073
  [
959
- "Tree.value",
1074
+ "Tree.values",
960
1075
  "@angular/aria/tree"
961
1076
  ],
962
1077
  [
@@ -995,6 +1110,10 @@
995
1110
  "TreeItem.element",
996
1111
  "@angular/aria/tree"
997
1112
  ],
1113
+ [
1114
+ "TreeItem.id",
1115
+ "@angular/aria/tree"
1116
+ ],
998
1117
  [
999
1118
  "TreeItem.value",
1000
1119
  "@angular/aria/tree"
@@ -1011,6 +1130,10 @@
1011
1130
  "TreeItem.selectable",
1012
1131
  "@angular/aria/tree"
1013
1132
  ],
1133
+ [
1134
+ "TreeItem.expanded",
1135
+ "@angular/aria/tree"
1136
+ ],
1014
1137
  [
1015
1138
  "TreeItem.label",
1016
1139
  "@angular/aria/tree"
@@ -1023,6 +1146,22 @@
1023
1146
  "TreeItem.tree",
1024
1147
  "@angular/aria/tree"
1025
1148
  ],
1149
+ [
1150
+ "TreeItem.active",
1151
+ "@angular/aria/tree"
1152
+ ],
1153
+ [
1154
+ "TreeItem.level",
1155
+ "@angular/aria/tree"
1156
+ ],
1157
+ [
1158
+ "TreeItem.selected",
1159
+ "@angular/aria/tree"
1160
+ ],
1161
+ [
1162
+ "TreeItem.visible",
1163
+ "@angular/aria/tree"
1164
+ ],
1026
1165
  [
1027
1166
  "TreeItem.ngOnInit",
1028
1167
  "@angular/aria/tree"
@@ -1043,6 +1182,10 @@
1043
1182
  "TreeItemGroup",
1044
1183
  "@angular/aria/tree"
1045
1184
  ],
1185
+ [
1186
+ "TreeItemGroup.element",
1187
+ "@angular/aria/tree"
1188
+ ],
1046
1189
  [
1047
1190
  "TreeItemGroup.children",
1048
1191
  "@angular/aria/tree"