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

package/types/tree.d.ts

@@ -1,73 +1,99 @@
 import * as _angular_cdk_bidi from '@angular/cdk/bidi';
 import * as _angular_core from '@angular/core';
-import { Signal, OnInit, OnDestroy } from '@angular/core';
-import * as i1 from '@angular/aria/deferred-content';
-import { DeferredContentAware } from '@angular/aria/deferred-content';
-import { TreePattern, TreeItemPattern } from '@angular/aria/private';
+import { OnInit, OnDestroy, Signal } from '@angular/core';
+import * as i1 from '@angular/aria/private';
+import { TreePattern, DeferredContentAware, TreeItemPattern } from '@angular/aria/private';
 import { ComboboxPopup } from './combobox.js';
 
 interface HasElement {
-    element: Signal<HTMLElement>;
+    element: HTMLElement;
 }
 /**
- * A Tree container.
- *
- * Transforms nested lists into an accessible, ARIA-compliant tree structure.
+ * A container that transforms nested lists into an accessible, ARIA-compliant tree structure.
+ * It manages the overall state of the tree, including selection, expansion, and keyboard
+ * navigation.
  *
  * ```html
  * <ul ngTree [(value)]="selectedItems" [multi]="true">
- *   <li ngTreeItem [value]="'leaf1'">Leaf Item 1</li>
- *   <li ngTreeItem [value]="'parent1'">
- *     Parent Item 1
- *     <ul ngTreeItemGroup [value]="'parent1'">
- *       <ng-template ngTreeItemGroupContent>
- *         <li ngTreeItem [value]="'child1.1'">Child Item 1.1</li>
- *         <li ngTreeItem [value]="'child1.2'">Child Item 1.2</li>
- *       </ng-template>
- *     </ul>
- *   </li>
- *   <li ngTreeItem [value]="'leaf2'" [disabled]="true">Disabled Leaf Item 2</li>
+ *   <ng-template
+ *     [ngTemplateOutlet]="treeNodes"
+ *     [ngTemplateOutletContext]="{nodes: treeData, parent: tree}"
+ *   />
  * </ul>
+ *
+ * <ng-template #treeNodes let-nodes="nodes" let-parent="parent">
+ *   @for (node of nodes; track node.name) {
+ *     <li ngTreeItem [parent]="parent" [value]="node.name" [label]="node.name">
+ *       {{ node.name }}
+ *       @if (node.children) {
+ *         <ul role="group">
+ *           <ng-template ngTreeItemGroup [ownedBy]="treeItem" #group="ngTreeItemGroup">
+ *             <ng-template
+ *               [ngTemplateOutlet]="treeNodes"
+ *               [ngTemplateOutletContext]="{nodes: node.children, parent: group}"
+ *             />
+ *           </ng-template>
+ *         </ul>
+ *       }
+ *     </li>
+ *   }
+ * </ng-template>
  * ```
+ *
+ * @developerPreview 21.0
  */
 declare class Tree<V> {
-    /** A unique identifier for the tree. */
-    private readonly _generatedId;
-    /** A unique identifier for the tree. */
-    protected id: Signal<string>;
+    /** A reference to the host element. */
+    private readonly _elementRef;
+    /** A reference to the host element. */
+    readonly element: HTMLElement;
     /** A reference to the parent combobox popup, if one exists. */
     private readonly _popup;
-    /** A reference to the tree element. */
-    private readonly _elementRef;
     /** All TreeItem instances within this tree. */
     private readonly _unorderedItems;
+    /** A unique identifier for the tree. */
+    readonly id: _angular_core.InputSignal<string>;
     /** Orientation of the tree. */
     readonly orientation: _angular_core.InputSignal<"vertical" | "horizontal">;
     /** Whether multi-selection is allowed. */
     readonly multi: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /** Whether the tree is disabled. */
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    /** The selection strategy used by the tree. */
+    /**
+     * The selection strategy used by the tree.
+     * - `explicit`: Items are selected explicitly by the user (e.g., via click or spacebar).
+     * - `follow`: The focused item is automatically selected.
+     */
     readonly selectionMode: _angular_core.InputSignal<"explicit" | "follow">;
-    /** The focus strategy used by the tree. */
+    /**
+     * The focus strategy used by the tree.
+     * - `roving`: Focus is moved to the active item using `tabindex`.
+     * - `activedescendant`: Focus remains on the tree container, and `aria-activedescendant` is used to indicate the active item.
+     */
     readonly focusMode: _angular_core.InputSignal<"roving" | "activedescendant">;
     /** Whether navigation wraps. */
     readonly wrap: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    /** Whether to skip disabled items during navigation. */
-    readonly skipDisabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    /** Typeahead delay. */
+    /**
+     * Whether to allow disabled items to receive focus. When `true`, disabled items are
+     * focusable but not interactive. When `false`, disabled items are skipped during navigation.
+     */
+    readonly softDisabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** The delay in seconds before the typeahead search is reset. */
     readonly typeaheadDelay: _angular_core.InputSignal<number>;
-    /** Selected item values. */
-    readonly value: _angular_core.ModelSignal<V[]>;
+    /** The values of the currently selected items. */
+    readonly values: _angular_core.ModelSignal<V[]>;
     /** Text direction. */
     readonly textDirection: _angular_core.WritableSignal<_angular_cdk_bidi.Direction>;
     /** Whether the tree is in navigation mode. */
-    readonly nav: _angular_core.InputSignal<boolean>;
-    /** The aria-current type. */
+    readonly nav: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * The `aria-current` type. It can be used in navigation trees to indicate the currently active item.
+     * See https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-current for more details.
+     */
     readonly currentType: _angular_core.InputSignal<"page" | "step" | "location" | "date" | "time" | "true" | "false">;
     /** The UI pattern for the tree. */
     readonly _pattern: TreePattern<V>;
-    /** Whether the tree has received focus yet. */
+    /** Whether the tree has received focus since it was rendered. */
     private _hasFocused;
     constructor();
     onFocus(): void;
@@ -75,20 +101,32 @@ declare class Tree<V> {
     unregister(child: TreeItem<V>): void;
     scrollActiveItemIntoView(options?: ScrollIntoViewOptions): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<Tree<any>, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<Tree<any>, "[ngTree]", ["ngTree"], { "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "multi": { "alias": "multi"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "selectionMode": { "alias": "selectionMode"; "required": false; "isSignal": true; }; "focusMode": { "alias": "focusMode"; "required": false; "isSignal": true; }; "wrap": { "alias": "wrap"; "required": false; "isSignal": true; }; "skipDisabled": { "alias": "skipDisabled"; "required": false; "isSignal": true; }; "typeaheadDelay": { "alias": "typeaheadDelay"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "nav": { "alias": "nav"; "required": false; "isSignal": true; }; "currentType": { "alias": "currentType"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, [{ directive: typeof ComboboxPopup; inputs: {}; outputs: {}; }]>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<Tree<any>, "[ngTree]", ["ngTree"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "multi": { "alias": "multi"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "selectionMode": { "alias": "selectionMode"; "required": false; "isSignal": true; }; "focusMode": { "alias": "focusMode"; "required": false; "isSignal": true; }; "wrap": { "alias": "wrap"; "required": false; "isSignal": true; }; "softDisabled": { "alias": "softDisabled"; "required": false; "isSignal": true; }; "typeaheadDelay": { "alias": "typeaheadDelay"; "required": false; "isSignal": true; }; "values": { "alias": "values"; "required": false; "isSignal": true; }; "nav": { "alias": "nav"; "required": false; "isSignal": true; }; "currentType": { "alias": "currentType"; "required": false; "isSignal": true; }; }, { "values": "valuesChange"; }, never, never, true, [{ directive: typeof ComboboxPopup; inputs: {}; outputs: {}; }]>;
 }
 /**
- * A selectable and expandable Tree Item in a Tree.
+ * A selectable and expandable item in an `ngTree`.
+ *
+ * The `ngTreeItem` directive represents an individual node within an `ngTree`. It can be
+ * selected, expanded (if it has children), and disabled. The `parent` input establishes
+ * the hierarchical relationship within the tree.
+ *
+ * ```html
+ * <li ngTreeItem [parent]="parentTreeOrGroup" value="item-id" label="Item Label">
+ *   Item Label
+ * </li>
+ * ```
+ *
+ * @developerPreview 21.0
  */
 declare class TreeItem<V> extends DeferredContentAware implements OnInit, OnDestroy, HasElement {
-    /** A reference to the tree item element. */
+    /** A reference to the host element. */
     private readonly _elementRef;
-    /** A unique identifier for the tree item. */
-    private readonly _id;
+    /** A reference to the host element. */
+    readonly element: HTMLElement;
     /** The owned tree item group. */
     private readonly _group;
-    /** The host native element. */
-    readonly element: Signal<any>;
+    /** A unique identifier for the tree item. */
+    readonly id: _angular_core.InputSignal<string>;
     /** The value of the tree item. */
     readonly value: _angular_core.InputSignal<V>;
     /** The parent tree root or tree item group. */
@@ -97,12 +135,24 @@ declare class TreeItem<V> extends DeferredContentAware implements OnInit, OnDest
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /** Whether the tree item is selectable. */
     readonly selectable: _angular_core.InputSignal<boolean>;
+    /** Whether the tree item is expanded. */
+    readonly expanded: _angular_core.ModelSignal<boolean>;
     /** Optional label for typeahead. Defaults to the element's textContent. */
     readonly label: _angular_core.InputSignal<string | undefined>;
     /** Search term for typeahead. */
-    readonly searchTerm: Signal<any>;
+    readonly searchTerm: Signal<string>;
     /** The tree root. */
     readonly tree: Signal<Tree<V>>;
+    /** Whether the item is active. */
+    readonly active: Signal<boolean>;
+    /** The level of the current item in a tree. */
+    readonly level: Signal<number>;
+    /** Whether the item is selected. */
+    readonly selected: Signal<boolean | undefined>;
+    /** Whether this item is visible due to all of its parents being expanded. */
+    readonly visible: Signal<boolean>;
+    /** Whether the tree is expanded. Use this value for aria-expanded. */
+    protected readonly _expanded: Signal<boolean | undefined>;
     /** The UI pattern for this item. */
     _pattern: TreeItemPattern<V>;
     constructor();
@@ -111,12 +161,33 @@ declare class TreeItem<V> extends DeferredContentAware implements OnInit, OnDest
     register(group: TreeItemGroup<V>): void;
     unregister(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TreeItem<any>, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TreeItem<any>, "[ngTreeItem]", ["ngTreeItem"], { "value": { "alias": "value"; "required": true; "isSignal": true; }; "parent": { "alias": "parent"; "required": true; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "selectable": { "alias": "selectable"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TreeItem<any>, "[ngTreeItem]", ["ngTreeItem"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": true; "isSignal": true; }; "parent": { "alias": "parent"; "required": true; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "selectable": { "alias": "selectable"; "required": false; "isSignal": true; }; "expanded": { "alias": "expanded"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; }, { "expanded": "expandedChange"; }, never, never, true, never>;
 }
 /**
- * Contains children tree itmes.
+ * Group that contains children tree items.
+ *
+ * The `ngTreeItemGroup` structural directive should be applied to an `ng-template` that
+ * wraps the child `ngTreeItem` elements. It is used to define a group of children for an
+ * expandable `ngTreeItem`. The `ownedBy` input links the group to its parent `ngTreeItem`.
+ *
+ * ```html
+ * <li ngTreeItem [value]="'parent-id'">
+ *   Parent Item
+ *   <ul role="group">
+ *     <ng-template ngTreeItemGroup [ownedBy]="parentTreeItemRef">
+ *       <li ngTreeItem [value]="'child-id'">Child Item</li>
+ *     </ng-template>
+ *   </ul>
+ * </li>
+ * ```
+ *
+ * @developerPreview 21.0
  */
 declare class TreeItemGroup<V> implements OnInit, OnDestroy {
+    /** A reference to the host element. */
+    private readonly _elementRef;
+    /** A reference to the host element. */
+    readonly element: HTMLElement;
     /** The DeferredContent host directive. */
     private readonly _deferredContent;
     /** All groupable items that are descendants of the group. */

package/_adev_assets/aria-radio-group.json

@@ -1,389 +0,0 @@
-{
-  "repo": "angular/components",
-  "moduleLabel": "@angular/aria/radio-group",
-  "moduleName": "@angular/aria/radio-group",
-  "normalizedModuleName": "angular_aria_radio-group",
-  "entries": [
-    {
-      "name": "RadioGroup",
-      "isAbstract": false,
-      "entryType": "undecorated_class",
-      "members": [
-        {
-          "name": "textDirection",
-          "type": "any",
-          "memberType": "property",
-          "memberTags": [
-            "protected"
-          ],
-          "description": "A signal wrapper for directionality.",
-          "jsdocTags": []
-        },
-        {
-          "name": "items",
-          "type": "any",
-          "memberType": "property",
-          "memberTags": [
-            "protected"
-          ],
-          "description": "The RadioButton UIPatterns of the child RadioButtons.",
-          "jsdocTags": []
-        },
-        {
-          "name": "orientation",
-          "type": "any",
-          "memberType": "property",
-          "memberTags": [
-            "readonly"
-          ],
-          "description": "Whether the radio group is vertically or horizontally oriented.",
-          "jsdocTags": []
-        },
-        {
-          "name": "skipDisabled",
-          "type": "any",
-          "memberType": "property",
-          "memberTags": [
-            "readonly"
-          ],
-          "description": "Whether disabled items in the group should be skipped when navigating.",
-          "jsdocTags": []
-        },
-        {
-          "name": "focusMode",
-          "type": "any",
-          "memberType": "property",
-          "memberTags": [
-            "readonly"
-          ],
-          "description": "The focus strategy used by the radio group.",
-          "jsdocTags": []
-        },
-        {
-          "name": "disabled",
-          "type": "any",
-          "memberType": "property",
-          "memberTags": [
-            "readonly"
-          ],
-          "description": "Whether the radio group is disabled.",
-          "jsdocTags": []
-        },
-        {
-          "name": "readonly",
-          "type": "any",
-          "memberType": "property",
-          "memberTags": [
-            "readonly"
-          ],
-          "description": "Whether the radio group is readonly.",
-          "jsdocTags": []
-        },
-        {
-          "name": "value",
-          "type": "any",
-          "memberType": "property",
-          "memberTags": [
-            "readonly"
-          ],
-          "description": "The value of the currently selected radio button.",
-          "jsdocTags": []
-        },
-        {
-          "name": "onFocus",
-          "signatures": [
-            {
-              "name": "onFocus",
-              "entryType": "function",
-              "description": "",
-              "generics": [],
-              "isNewType": false,
-              "jsdocTags": [],
-              "params": [],
-              "rawComment": "",
-              "returnType": "void"
-            }
-          ],
-          "implementation": {
-            "params": [],
-            "isNewType": false,
-            "returnType": "void",
-            "generics": [],
-            "name": "onFocus",
-            "description": "",
-            "entryType": "function",
-            "jsdocTags": [],
-            "rawComment": ""
-          },
-          "entryType": "function",
-          "description": "",
-          "jsdocTags": [],
-          "rawComment": "",
-          "memberType": "method",
-          "memberTags": []
-        }
-      ],
-      "generics": [
-        {
-          "name": "V"
-        }
-      ],
-      "description": "A radio button group container.\n\nRadio groups are used to group multiple radio buttons or radio group labels so they function as\na single form control. The RadioGroup is meant to be used in conjunction with RadioButton\nas follows:\n\n```html\n<div ngRadioGroup>\n  <div ngRadioButton value=\"1\">Option 1</div>\n  <div ngRadioButton value=\"2\">Option 2</div>\n  <div ngRadioButton value=\"3\">Option 3</div>\n</div>\n```",
-      "jsdocTags": [],
-      "rawComment": "/**\n * A radio button group container.\n *\n * Radio groups are used to group multiple radio buttons or radio group labels so they function as\n * a single form control. The RadioGroup is meant to be used in conjunction with RadioButton\n * as follows:\n *\n * ```html\n * <div ngRadioGroup>\n *   <div ngRadioButton value=\"1\">Option 1</div>\n *   <div ngRadioButton value=\"2\">Option 2</div>\n *   <div ngRadioButton value=\"3\">Option 3</div>\n * </div>\n * ```\n */",
-      "implements": [],
-      "source": {
-        "filePath": "/src/aria/radio-group/radio-group.ts",
-        "startLine": 84,
-        "endLine": 200
-      }
-    },
-    {
-      "name": "RadioButton",
-      "isAbstract": false,
-      "entryType": "directive",
-      "members": [
-        {
-          "name": "id",
-          "type": "any",
-          "memberType": "property",
-          "memberTags": [
-            "readonly"
-          ],
-          "description": "A unique identifier for the radio button.",
-          "jsdocTags": []
-        },
-        {
-          "name": "value",
-          "type": "any",
-          "memberType": "property",
-          "memberTags": [
-            "readonly",
-            "input"
-          ],
-          "description": "The value associated with the radio button.",
-          "jsdocTags": [],
-          "inputAlias": "value",
-          "isRequiredInput": true
-        },
-        {
-          "name": "group",
-          "type": "any",
-          "memberType": "property",
-          "memberTags": [
-            "readonly"
-          ],
-          "description": "The parent RadioGroup UIPattern.",
-          "jsdocTags": []
-        },
-        {
-          "name": "element",
-          "type": "any",
-          "memberType": "property",
-          "memberTags": [],
-          "description": "A reference to the radio button element to be focused on navigation.",
-          "jsdocTags": []
-        },
-        {
-          "name": "disabled",
-          "type": "any",
-          "memberType": "property",
-          "memberTags": [
-            "input"
-          ],
-          "description": "Whether the radio button is disabled.",
-          "jsdocTags": [],
-          "inputAlias": "disabled",
-          "isRequiredInput": false
-        },
-        {
-          "name": "selected",
-          "type": "any",
-          "memberType": "property",
-          "memberTags": [
-            "readonly"
-          ],
-          "description": "Whether the radio button is selected.",
-          "jsdocTags": []
-        }
-      ],
-      "generics": [
-        {
-          "name": "V"
-        }
-      ],
-      "description": "A selectable radio button in a RadioGroup.",
-      "jsdocTags": [],
-      "rawComment": "/** A selectable radio button in a RadioGroup. */",
-      "implements": [],
-      "isStandalone": true,
-      "selector": "[ngRadioButton]",
-      "exportAs": [
-        "ngRadioButton"
-      ],
-      "source": {
-        "filePath": "/src/aria/radio-group/radio-group.ts",
-        "startLine": 203,
-        "endLine": 252
-      }
-    }
-  ],
-  "symbols": [
-    [
-      "afterRenderEffect",
-      "@angular/core"
-    ],
-    [
-      "booleanAttribute",
-      "@angular/core"
-    ],
-    [
-      "computed",
-      "@angular/core"
-    ],
-    [
-      "contentChildren",
-      "@angular/core"
-    ],
-    [
-      "Directive",
-      "@angular/core"
-    ],
-    [
-      "ElementRef",
-      "@angular/core"
-    ],
-    [
-      "inject",
-      "@angular/core"
-    ],
-    [
-      "input",
-      "@angular/core"
-    ],
-    [
-      "linkedSignal",
-      "@angular/core"
-    ],
-    [
-      "model",
-      "@angular/core"
-    ],
-    [
-      "signal",
-      "@angular/core"
-    ],
-    [
-      "WritableSignal",
-      "@angular/core"
-    ],
-    [
-      "RadioButtonPattern",
-      "@angular/aria/private"
-    ],
-    [
-      "RadioGroupInputs",
-      "@angular/aria/private"
-    ],
-    [
-      "RadioGroupPattern",
-      "@angular/aria/private"
-    ],
-    [
-      "ToolbarRadioGroupInputs",
-      "@angular/aria/private"
-    ],
-    [
-      "ToolbarRadioGroupPattern",
-      "@angular/aria/private"
-    ],
-    [
-      "Directionality",
-      "@angular/cdk/bidi"
-    ],
-    [
-      "_IdGenerator",
-      "@angular/cdk/a11y"
-    ],
-    [
-      "ToolbarWidgetGroup",
-      "@angular/aria/toolbar"
-    ],
-    [
-      "RadioGroup",
-      "@angular/aria/radio-group"
-    ],
-    [
-      "RadioButton",
-      "@angular/aria/radio-group"
-    ],
-    [
-      "RadioGroup",
-      "@angular/aria/radio-group"
-    ],
-    [
-      "RadioGroup.textDirection",
-      "@angular/aria/radio-group"
-    ],
-    [
-      "RadioGroup.items",
-      "@angular/aria/radio-group"
-    ],
-    [
-      "RadioGroup.orientation",
-      "@angular/aria/radio-group"
-    ],
-    [
-      "RadioGroup.skipDisabled",
-      "@angular/aria/radio-group"
-    ],
-    [
-      "RadioGroup.focusMode",
-      "@angular/aria/radio-group"
-    ],
-    [
-      "RadioGroup.disabled",
-      "@angular/aria/radio-group"
-    ],
-    [
-      "RadioGroup.readonly",
-      "@angular/aria/radio-group"
-    ],
-    [
-      "RadioGroup.value",
-      "@angular/aria/radio-group"
-    ],
-    [
-      "RadioGroup.onFocus",
-      "@angular/aria/radio-group"
-    ],
-    [
-      "RadioButton",
-      "@angular/aria/radio-group"
-    ],
-    [
-      "RadioButton.id",
-      "@angular/aria/radio-group"
-    ],
-    [
-      "RadioButton.value",
-      "@angular/aria/radio-group"
-    ],
-    [
-      "RadioButton.group",
-      "@angular/aria/radio-group"
-    ],
-    [
-      "RadioButton.element",
-      "@angular/aria/radio-group"
-    ],
-    [
-      "RadioButton.disabled",
-      "@angular/aria/radio-group"
-    ],
-    [
-      "RadioButton.selected",
-      "@angular/aria/radio-group"
-    ]
-  ]
-}