From 2406172d50b0cfb2960e6763eb2bef91ae76fb4c Mon Sep 17 00:00:00 2001 From: Angular Robot Date: Thu, 13 Nov 2025 17:36:39 +0000 Subject: [PATCH] docs: update cross-repo adev docs Updated Angular adev cross repo docs files. --- adev/src/content/aria/_build-info.json | 2 +- adev/src/content/aria/aria-accordion.json | 176 ++++++----- adev/src/content/aria/aria-combobox.json | 50 ++-- adev/src/content/aria/aria-grid.json | 338 ++++++++++++++++++---- adev/src/content/aria/aria-listbox.json | 37 ++- adev/src/content/aria/aria-menu.json | 48 +-- adev/src/content/aria/aria-tabs.json | 269 ++++++++--------- adev/src/content/aria/aria-toolbar.json | 24 +- adev/src/content/aria/aria-tree.json | 110 ++++--- 9 files changed, 665 insertions(+), 389 deletions(-) diff --git a/adev/src/content/aria/_build-info.json b/adev/src/content/aria/_build-info.json index 9ff852dfcb4..bdba65d5773 100644 --- a/adev/src/content/aria/_build-info.json +++ b/adev/src/content/aria/_build-info.json @@ -1,4 +1,4 @@ { "branchName": "refs/heads/21.0.x", - "sha": "1d7b4eb287c0e29934b0e002aa68938381f451a9" + "sha": "e10738cca18ddd114d98d97c82414c9892c5fac7" } \ No newline at end of file diff --git a/adev/src/content/aria/aria-accordion.json b/adev/src/content/aria/aria-accordion.json index 5953af9ad15..71675212ee5 100755 --- a/adev/src/content/aria/aria-accordion.json +++ b/adev/src/content/aria/aria-accordion.json @@ -9,11 +9,23 @@ "isAbstract": false, "entryType": "undecorated_class", "members": [ + { + "name": "id", + "type": "any", + "memberType": "property", + "memberTags": [ + "readonly" + ], + "description": "A global unique identifier for the panel.", + "jsdocTags": [] + }, { "name": "panelId", "type": "any", "memberType": "property", - "memberTags": [], + "memberTags": [ + "readonly" + ], "description": "A local unique identifier for the panel, used to match with its trigger's `panelId`.", "jsdocTags": [] }, @@ -138,19 +150,19 @@ } ], "generics": [], - "description": "Represents the content panel of an accordion item. It is controlled by an\nassociated `AccordionTrigger`.", + "description": "The content panel of an accordion item that is conditionally visible.\n\nThis directive is a container for the content that is shown or hidden. It requires\na `panelId` that must match the `panelId` of its corresponding `ngAccordionTrigger`.\nThe content within the panel should be provided using an `ng-template` with the\n`ngAccordionContent` directive so that the content is not rendered on the page until the trigger\nis expanded. It applies `role=\"region\"` for accessibility and uses the `inert` attribute to hide\nits content from assistive technologies when not visible.\n\n```html\n
\n \n

This content is lazily rendered and will be shown when the panel is expanded.

\n \n
\n```", "jsdocTags": [ { "name": "developerPreview", "comment": "21.0" } ], - "rawComment": "/**\n * Represents the content panel of an accordion item. It is controlled by an\n * associated `AccordionTrigger`.\n *\n * @developerPreview 21.0\n */", + "rawComment": "/**\n * The content panel of an accordion item that is conditionally visible.\n *\n * This directive is a container for the content that is shown or hidden. It requires\n * a `panelId` that must match the `panelId` of its corresponding `ngAccordionTrigger`.\n * The content within the panel should be provided using an `ng-template` with the\n * `ngAccordionContent` directive so that the content is not rendered on the page until the trigger\n * is expanded. It applies `role=\"region\"` for accessibility and uses the `inert` attribute to hide\n * its content from assistive technologies when not visible.\n *\n * ```html\n *
\n * \n *

This content is lazily rendered and will be shown when the panel is expanded.

\n * \n *
\n * ```\n *\n * @developerPreview 21.0\n */", "implements": [], "source": { "filePath": "src/aria/accordion/accordion.ts", - "startLine": 38, - "endLine": 100 + "startLine": 52, + "endLine": 113 } }, { @@ -158,11 +170,35 @@ "isAbstract": false, "entryType": "directive", "members": [ + { + "name": "id", + "type": "any", + "memberType": "property", + "memberTags": [ + "readonly", + "input" + ], + "description": "A unique identifier for the widget.", + "jsdocTags": [], + "inputAlias": "id", + "isRequiredInput": false + }, + { + "name": "element", + "type": "any", + "memberType": "property", + "memberTags": [ + "readonly" + ], + "description": "The host native element.", + "jsdocTags": [] + }, { "name": "panelId", "type": "any", "memberType": "property", "memberTags": [ + "readonly", "input" ], "description": "A local unique identifier for the trigger, used to match with its panel's `panelId`.", @@ -175,6 +211,7 @@ "type": "any", "memberType": "property", "memberTags": [ + "readonly", "input" ], "description": "Whether the trigger is disabled.", @@ -182,6 +219,21 @@ "inputAlias": "disabled", "isRequiredInput": false }, + { + "name": "expanded", + "type": "any", + "memberType": "property", + "memberTags": [ + "readonly", + "input", + "output" + ], + "description": "Whether the corresponding panel is expanded.", + "jsdocTags": [], + "inputAlias": "expanded", + "isRequiredInput": false, + "outputAlias": "expandedChange" + }, { "name": "active", "type": "any", @@ -192,36 +244,6 @@ "description": "Whether the trigger is active.", "jsdocTags": [] }, - { - "name": "expanded", - "type": "any", - "memberType": "property", - "memberTags": [ - "readonly" - ], - "description": "Whether the trigger is expanded.", - "jsdocTags": [] - }, - { - "name": "hardDisabled", - "type": "any", - "memberType": "property", - "memberTags": [ - "readonly" - ], - "description": "Whether this trigger is completely inaccessible.\n\nTODO(ok7sai): Consider move this to UI patterns.", - "jsdocTags": [] - }, - { - "name": "accordionPanel", - "type": "WritableSignal", - "memberType": "property", - "memberTags": [ - "readonly" - ], - "description": "The accordion panel pattern controlled by this trigger. This is set by AccordionGroup.", - "jsdocTags": [] - }, { "name": "expand", "signatures": [ @@ -323,14 +345,14 @@ } ], "generics": [], - "description": "Represents the trigger button for an accordion item. It controls the expansion\nstate of an associated `AccordionPanel`.", + "description": "The trigger that toggles the visibility of its associated `ngAccordionPanel`.\n\nThis directive requires a `panelId` that must match the `panelId` of the `ngAccordionPanel` it\ncontrols. When clicked, it will expand or collapse the panel. It also handles keyboard\ninteractions for navigation within the `ngAccordionGroup`. It applies `role=\"button\"` and manages\n`aria-expanded`, `aria-controls`, and `aria-disabled` attributes for accessibility.\nThe `disabled` input can be used to disable the trigger.\n\n```html\n\n```", "jsdocTags": [ { "name": "developerPreview", "comment": "21.0" } ], - "rawComment": "/**\n * Represents the trigger button for an accordion item. It controls the expansion\n * state of an associated `AccordionPanel`.\n *\n * @developerPreview 21.0\n */", + "rawComment": "/**\n * The trigger that toggles the visibility of its associated `ngAccordionPanel`.\n *\n * This directive requires a `panelId` that must match the `panelId` of the `ngAccordionPanel` it\n * controls. When clicked, it will expand or collapse the panel. It also handles keyboard\n * interactions for navigation within the `ngAccordionGroup`. It applies `role=\"button\"` and manages\n * `aria-expanded`, `aria-controls`, and `aria-disabled` attributes for accessibility.\n * The `disabled` input can be used to disable the trigger.\n *\n * ```html\n * \n * ```\n *\n * @developerPreview 21.0\n */", "implements": [], "isStandalone": true, "selector": "[ngAccordionTrigger]", @@ -339,8 +361,8 @@ ], "source": { "filePath": "src/aria/accordion/accordion.ts", - "startLine": 108, - "endLine": 182 + "startLine": 132, + "endLine": 195 } }, { @@ -348,6 +370,16 @@ "isAbstract": false, "entryType": "directive", "members": [ + { + "name": "element", + "type": "any", + "memberType": "property", + "memberTags": [ + "readonly" + ], + "description": "The host native element.", + "jsdocTags": [] + }, { "name": "textDirection", "type": "any", @@ -363,6 +395,7 @@ "type": "any", "memberType": "property", "memberTags": [ + "readonly", "input" ], "description": "Whether the entire accordion group is disabled.", @@ -375,6 +408,7 @@ "type": "any", "memberType": "property", "memberTags": [ + "readonly", "input" ], "description": "Whether multiple accordion items can be expanded simultaneously.", @@ -382,28 +416,15 @@ "inputAlias": "multiExpandable", "isRequiredInput": false }, - { - "name": "expandedPanels", - "type": "any", - "memberType": "property", - "memberTags": [ - "input", - "output" - ], - "description": "The ids of the current expanded accordion panels.", - "jsdocTags": [], - "inputAlias": "expandedPanels", - "isRequiredInput": false, - "outputAlias": "expandedPanelsChange" - }, { "name": "softDisabled", "type": "any", "memberType": "property", "memberTags": [ + "readonly", "input" ], - "description": "Whether to allow disabled items to receive focus.", + "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.", "jsdocTags": [], "inputAlias": "softDisabled", "isRequiredInput": false @@ -413,6 +434,7 @@ "type": "any", "memberType": "property", "memberTags": [ + "readonly", "input" ], "description": "Whether keyboard navigation should wrap around from the last item to the first, and vice-versa.", @@ -488,14 +510,14 @@ } ], "generics": [], - "description": "Container for a group of accordion items. It manages the overall state and\ninteractions of the accordion, such as keyboard navigation and expansion mode.", + "description": "A container for a group of accordion items. It manages the overall state and\ninteractions of the accordion, such as keyboard navigation and expansion mode.\n\nThe `ngAccordionGroup` serves as the root of a group of accordion triggers and panels,\ncoordinating the behavior of the `ngAccordionTrigger` and `ngAccordionPanel` elements within it.\nIt supports both single and multiple expansion modes.\n\n```html\n
\n
\n

\n \n

\n
\n \n

Content for Item 1.

\n \n
\n
\n
\n

\n \n

\n
\n \n

Content for Item 2.

\n \n
\n
\n
\n```", "jsdocTags": [ { "name": "developerPreview", "comment": "21.0" } ], - "rawComment": "/**\n * Container for a group of accordion items. It manages the overall state and\n * interactions of the accordion, such as keyboard navigation and expansion mode.\n *\n * @developerPreview 21.0\n */", + "rawComment": "/**\n * A container for a group of accordion items. It manages the overall state and\n * interactions of the accordion, such as keyboard navigation and expansion mode.\n *\n * The `ngAccordionGroup` serves as the root of a group of accordion triggers and panels,\n * coordinating the behavior of the `ngAccordionTrigger` and `ngAccordionPanel` elements within it.\n * It supports both single and multiple expansion modes.\n *\n * ```html\n *
\n *
\n *

\n * \n *

\n *
\n * \n *

Content for Item 1.

\n * \n *
\n *
\n *
\n *

\n * \n *

\n *
\n * \n *

Content for Item 2.

\n * \n *
\n *
\n *
\n * ```\n *\n * @developerPreview 21.0\n */", "implements": [], "isStandalone": true, "selector": "[ngAccordionGroup]", @@ -504,8 +526,8 @@ ], "source": { "filePath": "src/aria/accordion/accordion.ts", - "startLine": 190, - "endLine": 263 + "startLine": 232, + "endLine": 326 } }, { @@ -514,19 +536,19 @@ "entryType": "undecorated_class", "members": [], "generics": [], - "description": "A structural directive that marks the `ng-template` to be used as the content\nfor a `AccordionPanel`. This content can be lazily loaded.", + "description": "A structural directive that provides a mechanism for lazily rendering the content for an\n`ngAccordionPanel`.\n\nThis directive should be applied to an `ng-template` inside an `ngAccordionPanel`.\nIt allows the content of the panel to be lazily rendered, improving performance\nby only creating the content when the panel is first expanded.\n\n```html\n
\n \n

This is the content that will be displayed inside the panel.

\n \n
\n```", "jsdocTags": [ { "name": "developerPreview", "comment": "21.0" } ], - "rawComment": "/**\n * A structural directive that marks the `ng-template` to be used as the content\n * for a `AccordionPanel`. This content can be lazily loaded.\n *\n * @developerPreview 21.0\n */", + "rawComment": "/**\n * A structural directive that provides a mechanism for lazily rendering the content for an\n * `ngAccordionPanel`.\n *\n * This directive should be applied to an `ng-template` inside an `ngAccordionPanel`.\n * It allows the content of the panel to be lazily rendered, improving performance\n * by only creating the content when the panel is first expanded.\n *\n * ```html\n *
\n * \n *

This is the content that will be displayed inside the panel.

\n * \n *
\n * ```\n *\n * @developerPreview 21.0\n */", "implements": [], "source": { "filePath": "src/aria/accordion/accordion.ts", - "startLine": 271, - "endLine": 275 + "startLine": 346, + "endLine": 350 } } ], @@ -623,6 +645,10 @@ "AccordionPanel", "@angular/aria/accordion" ], + [ + "AccordionPanel.id", + "@angular/aria/accordion" + ], [ "AccordionPanel.panelId", "@angular/aria/accordion" @@ -651,6 +677,14 @@ "AccordionTrigger", "@angular/aria/accordion" ], + [ + "AccordionTrigger.id", + "@angular/aria/accordion" + ], + [ + "AccordionTrigger.element", + "@angular/aria/accordion" + ], [ "AccordionTrigger.panelId", "@angular/aria/accordion" @@ -659,20 +693,12 @@ "AccordionTrigger.disabled", "@angular/aria/accordion" ], - [ - "AccordionTrigger.active", - "@angular/aria/accordion" - ], [ "AccordionTrigger.expanded", "@angular/aria/accordion" ], [ - "AccordionTrigger.hardDisabled", - "@angular/aria/accordion" - ], - [ - "AccordionTrigger.accordionPanel", + "AccordionTrigger.active", "@angular/aria/accordion" ], [ @@ -691,6 +717,10 @@ "AccordionGroup", "@angular/aria/accordion" ], + [ + "AccordionGroup.element", + "@angular/aria/accordion" + ], [ "AccordionGroup.textDirection", "@angular/aria/accordion" @@ -703,10 +733,6 @@ "AccordionGroup.multiExpandable", "@angular/aria/accordion" ], - [ - "AccordionGroup.expandedPanels", - "@angular/aria/accordion" - ], [ "AccordionGroup.softDisabled", "@angular/aria/accordion" diff --git a/adev/src/content/aria/aria-combobox.json b/adev/src/content/aria/aria-combobox.json index 9268858f46d..2089cf8945b 100755 --- a/adev/src/content/aria/aria-combobox.json +++ b/adev/src/content/aria/aria-combobox.json @@ -34,7 +34,7 @@ "type": "any", "memberType": "property", "memberTags": [], - "description": "The filter mode for the combobox.", + "description": "The filter mode for the combobox.\n- `manual`: The consumer is responsible for filtering the options.\n- `auto-select`: The combobox automatically selects the first matching option.\n- `highlight`: The combobox highlights matching text in the options without changing selection.", "jsdocTags": [] }, { @@ -84,7 +84,7 @@ "memberTags": [ "readonly" ], - "description": "Whether the combobox popup is always expanded.", + "description": "Whether the combobox popup should always be expanded, regardless of user interaction.", "jsdocTags": [] }, { @@ -235,19 +235,23 @@ "name": "V" } ], - "description": "", + "description": "The container element that wraps a combobox input and popup, and orchestrates its behavior.\n\nThe `ngCombobox` directive is the main entry point for creating a combobox and customizing its\nbehavior. It coordinates the interactions between the `ngComboboxInput` and the popup, which\nis defined by a `ng-template` with the `ngComboboxPopupContainer` directive. If using the\n`CdkOverlay`, the `cdkConnectedOverlay` directive takes the place of `ngComboboxPopupContainer`.\n\n```html\n
\n \n\n \n
", "jsdocTags": [ + { + "name": "for", + "comment": "(option of filteredOptions(); track option) {\n
\n{{option}}\n
\n}\n
\n\n
\n```" + }, { "name": "developerPreview", "comment": "21.0" } ], - "rawComment": "/**\n * @developerPreview 21.0\n */", + "rawComment": "/**\n * The container element that wraps a combobox input and popup, and orchestrates its behavior.\n *\n * The `ngCombobox` directive is the main entry point for creating a combobox and customizing its\n * behavior. It coordinates the interactions between the `ngComboboxInput` and the popup, which\n * is defined by a `ng-template` with the `ngComboboxPopupContainer` directive. If using the\n * `CdkOverlay`, the `cdkConnectedOverlay` directive takes the place of `ngComboboxPopupContainer`.\n *\n * ```html\n *
\n * \n *\n * \n *
\n * @for (option of filteredOptions(); track option) {\n *
\n * {{option}}\n *
\n * }\n *
\n * \n *
\n * ```\n *\n * @developerPreview 21.0\n */", "implements": [], "source": { "filePath": "src/aria/combobox/combobox.ts", - "startLine": 37, - "endLine": 145 + "startLine": 64, + "endLine": 177 } }, { @@ -281,14 +285,14 @@ } ], "generics": [], - "description": "", + "description": "An input that is part of a combobox. It is responsible for displaying the\ncurrent value and handling user input for filtering and selection.\n\nThis directive should be applied to an `` element within an `ngCombobox`\ncontainer. It automatically handles keyboard interactions, such as opening the\npopup and navigating through the options.\n\n```html\n\n```", "jsdocTags": [ { "name": "developerPreview", "comment": "21.0" } ], - "rawComment": "/**\n * @developerPreview 21.0\n */", + "rawComment": "/**\n * An input that is part of a combobox. It is responsible for displaying the\n * current value and handling user input for filtering and selection.\n *\n * This directive should be applied to an `` element within an `ngCombobox`\n * container. It automatically handles keyboard interactions, such as opening the\n * popup and navigating through the options.\n *\n * ```html\n * \n * ```\n *\n * @developerPreview 21.0\n */", "implements": [], "isStandalone": true, "selector": "input[ngComboboxInput]", @@ -297,8 +301,8 @@ ], "source": { "filePath": "src/aria/combobox/combobox.ts", - "startLine": 150, - "endLine": 193 + "startLine": 197, + "endLine": 240 } }, { @@ -307,19 +311,19 @@ "entryType": "undecorated_class", "members": [], "generics": [], - "description": "", + "description": "A structural directive that marks the `ng-template` to be used as the popup\nfor a combobox. This content is conditionally rendered.\n\nThe content of the popup can be a `ngListbox`, `ngTree`, or `role=\"dialog\"`, allowing for\nflexible and complex combobox implementations. The consumer is responsible for\nimplementing the filtering logic based on the `ngComboboxInput`'s value.\n\n```html\n\n
\n \n
\n\n```\n\nWhen using CdkOverlay, this directive can be replaced by `cdkConnectedOverlay`.\n\n```html\n\n
\n \n
\n\n```", "jsdocTags": [ { "name": "developerPreview", "comment": "21.0" } ], - "rawComment": "/**\n * @developerPreview 21.0\n */", + "rawComment": "/**\n * A structural directive that marks the `ng-template` to be used as the popup\n * for a combobox. This content is conditionally rendered.\n *\n * The content of the popup can be a `ngListbox`, `ngTree`, or `role=\"dialog\"`, allowing for\n * flexible and complex combobox implementations. The consumer is responsible for\n * implementing the filtering logic based on the `ngComboboxInput`'s value.\n *\n * ```html\n * \n *
\n * \n *
\n * \n * ```\n *\n * When using CdkOverlay, this directive can be replaced by `cdkConnectedOverlay`.\n *\n * ```html\n * \n *
\n * \n *
\n * \n * ```\n *\n * @developerPreview 21.0\n */", "implements": [], "source": { "filePath": "src/aria/combobox/combobox.ts", - "startLine": 198, - "endLine": 203 + "startLine": 272, + "endLine": 277 } }, { @@ -344,7 +348,7 @@ "memberTags": [ "readonly" ], - "description": "The controls the popup exposes to the combobox.", + "description": "The popup controls exposed to the combobox.", "jsdocTags": [] } ], @@ -353,14 +357,14 @@ "name": "V" } ], - "description": "", + "description": "Identifies an element as a popup for an `ngCombobox`.\n\nThis directive acts as a bridge, allowing the `ngCombobox` to discover and interact\nwith the underlying control (e.g., `ngListbox`, `ngTree`, or `ngComboboxDialog`) that\nmanages the options. It's primarily used as a host directive and is responsible for\nexposing the popup's control pattern to the parent combobox.", "jsdocTags": [ { "name": "developerPreview", "comment": "21.0" } ], - "rawComment": "/**\n * @developerPreview 21.0\n */", + "rawComment": "/**\n * Identifies an element as a popup for an `ngCombobox`.\n *\n * This directive acts as a bridge, allowing the `ngCombobox` to discover and interact\n * with the underlying control (e.g., `ngListbox`, `ngTree`, or `ngComboboxDialog`) that\n * manages the options. It's primarily used as a host directive and is responsible for\n * exposing the popup's control pattern to the parent combobox.\n *\n * @developerPreview 21.0\n */", "implements": [], "isStandalone": true, "selector": "[ngComboboxPopup]", @@ -369,8 +373,8 @@ ], "source": { "filePath": "src/aria/combobox/combobox.ts", - "startLine": 208, - "endLine": 223 + "startLine": 289, + "endLine": 304 } }, { @@ -433,14 +437,14 @@ } ], "generics": [], - "description": "", + "description": "Integrates a native `` element with the combobox, allowing for\na modal or non-modal popup experience. It handles the opening and closing of the dialog\nbased on the combobox's expanded state.\n\n```html\n\n \n \n \n\n```", "jsdocTags": [ { "name": "developerPreview", "comment": "21.0" } ], - "rawComment": "/**\n * @developerPreview 21.0\n */", + "rawComment": "/**\n * Integrates a native `` element with the combobox, allowing for\n * a modal or non-modal popup experience. It handles the opening and closing of the dialog\n * based on the combobox's expanded state.\n *\n * ```html\n * \n * \n * \n * \n * \n * ```\n *\n * @developerPreview 21.0\n */", "implements": [], "isStandalone": true, "selector": "dialog[ngComboboxDialog]", @@ -449,8 +453,8 @@ ], "source": { "filePath": "src/aria/combobox/combobox.ts", - "startLine": 228, - "endLine": 275 + "startLine": 321, + "endLine": 368 } } ], diff --git a/adev/src/content/aria/aria-grid.json b/adev/src/content/aria/aria-grid.json index b234813153e..8738117a657 100755 --- a/adev/src/content/aria/aria-grid.json +++ b/adev/src/content/aria/aria-grid.json @@ -63,7 +63,7 @@ "readonly", "input" ], - "description": "Whether to allow disabled items to receive focus.", + "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.", "jsdocTags": [], "inputAlias": "softDisabled", "isRequiredInput": false @@ -76,7 +76,7 @@ "readonly", "input" ], - "description": "The focus strategy used by the grid.", + "description": "The focus strategy used by the grid.\n- `roving`: Focus is moved to the active cell using `tabindex`.\n- `activedescendant`: Focus remains on the grid container, and `aria-activedescendant` is used to indicate the active cell.", "jsdocTags": [], "inputAlias": "focusMode", "isRequiredInput": false @@ -89,7 +89,7 @@ "readonly", "input" ], - "description": "The wrapping behavior for keyboard navigation along the row axis.", + "description": "The wrapping behavior for keyboard navigation along the row axis.\n- `continuous`: Navigation wraps from the last row to the first, and vice-versa.\n- `loop`: Navigation wraps within the current row.\n- `nowrap`: Navigation stops at the first/last item in the row.", "jsdocTags": [], "inputAlias": "rowWrap", "isRequiredInput": false @@ -102,7 +102,7 @@ "readonly", "input" ], - "description": "The wrapping behavior for keyboard navigation along the column axis.", + "description": "The wrapping behavior for keyboard navigation along the column axis.\n- `continuous`: Navigation wraps from the last column to the first, and vice-versa.\n- `loop`: Navigation wraps within the current column.\n- `nowrap`: Navigation stops at the first/last item in the column.", "jsdocTags": [], "inputAlias": "colWrap", "isRequiredInput": false @@ -128,7 +128,7 @@ "readonly", "input" ], - "description": "The selection strategy used by the grid.", + "description": "The selection strategy used by the grid.\n- `follow`: The focused cell is automatically selected.\n- `explicit`: Cells are selected explicitly by the user (e.g., via click or spacebar).", "jsdocTags": [], "inputAlias": "selectionMode", "isRequiredInput": false @@ -148,14 +148,22 @@ } ], "generics": [], - "description": "A directive that provides grid-based navigation and selection behavior.", + "description": "The container for a grid. It provides keyboard navigation and focus management for the grid's\nrows and cells. It manages the overall behavior of the grid, including focus\nwrapping, selection, and disabled states.\n\n```html\n", "jsdocTags": [ + { + "name": "for", + "comment": "(row of gridData; track row) {\n" + }, + { + "name": "for", + "comment": "(cell of row; track cell) {\n \n}\n\n}\n
\n {{cell.value}}\n
\n```" + }, { "name": "developerPreview", "comment": "21.0" } ], - "rawComment": "/**\n * A directive that provides grid-based navigation and selection behavior.\n *\n * @developerPreview 21.0\n */", + "rawComment": "/**\n * The container for a grid. It provides keyboard navigation and focus management for the grid's\n * rows and cells. It manages the overall behavior of the grid, including focus\n * wrapping, selection, and disabled states.\n *\n * ```html\n * \n * @for (row of gridData; track row) {\n * \n * @for (cell of row; track cell) {\n * \n * }\n * \n * }\n *
\n * {{cell.value}}\n *
\n * ```\n *\n * @developerPreview 21.0\n */", "implements": [], "isStandalone": true, "selector": "[ngGrid]", @@ -164,8 +172,8 @@ ], "source": { "filePath": "src/aria/grid/grid.ts", - "startLine": 31, - "endLine": 124 + "startLine": 47, + "endLine": 163 } }, { @@ -193,19 +201,6 @@ "description": "The host native element.", "jsdocTags": [] }, - { - "name": "role", - "type": "any", - "memberType": "property", - "memberTags": [ - "readonly", - "input" - ], - "description": "The ARIA role for the row.", - "jsdocTags": [], - "inputAlias": "role", - "isRequiredInput": false - }, { "name": "rowIndex", "type": "any", @@ -221,14 +216,14 @@ } ], "generics": [], - "description": "A directive that represents a row in a grid.", + "description": "Represents a row within a grid. It is a container for `ngGridCell` directives.\n\n```html\n\n \n\n```", "jsdocTags": [ { "name": "developerPreview", "comment": "21.0" } ], - "rawComment": "/**\n * A directive that represents a row in a grid.\n *\n * @developerPreview 21.0\n */", + "rawComment": "/**\n * Represents a row within a grid. It is a container for `ngGridCell` directives.\n *\n * ```html\n * \n * \n * \n * ```\n *\n * @developerPreview 21.0\n */", "implements": [], "isStandalone": true, "selector": "[ngGridRow]", @@ -237,8 +232,8 @@ ], "source": { "filePath": "src/aria/grid/grid.ts", - "startLine": 131, - "endLine": 171 + "startLine": 176, + "endLine": 214 } }, { @@ -246,6 +241,29 @@ "isAbstract": false, "entryType": "directive", "members": [ + { + "name": "textDirection", + "type": "any", + "memberType": "property", + "memberTags": [ + "readonly" + ], + "description": "Text direction.", + "jsdocTags": [] + }, + { + "name": "id", + "type": "any", + "memberType": "property", + "memberTags": [ + "readonly", + "input" + ], + "description": "A unique identifier for the cell.", + "jsdocTags": [], + "inputAlias": "id", + "isRequiredInput": false + }, { "name": "element", "type": "any", @@ -361,17 +379,56 @@ "jsdocTags": [], "inputAlias": "selectable", "isRequiredInput": false + }, + { + "name": "orientation", + "type": "any", + "memberType": "property", + "memberTags": [ + "readonly", + "input" + ], + "description": "Orientation of the widgets in the cell.", + "jsdocTags": [], + "inputAlias": "orientation", + "isRequiredInput": false + }, + { + "name": "wrap", + "type": "any", + "memberType": "property", + "memberTags": [ + "readonly", + "input" + ], + "description": "Whether widgets navigation wraps.", + "jsdocTags": [], + "inputAlias": "wrap", + "isRequiredInput": false + }, + { + "name": "tabindex", + "type": "any", + "memberType": "property", + "memberTags": [ + "readonly", + "input" + ], + "description": "The tabindex override.", + "jsdocTags": [], + "inputAlias": "tabindex", + "isRequiredInput": false } ], "generics": [], - "description": "A directive that represents a cell in a grid.", + "description": "Represents a cell within a grid row. It is the primary focusable element\nwithin the grid. It can be disabled and can have its selection state managed\nthrough the `selected` input.\n\n```html\n\n Cell Content\n\n```", "jsdocTags": [ { "name": "developerPreview", "comment": "21.0" } ], - "rawComment": "/**\n * A directive that represents a cell in a grid.\n *\n * @developerPreview 21.0\n */", + "rawComment": "/**\n * Represents a cell within a grid row. It is the primary focusable element\n * within the grid. It can be disabled and can have its selection state managed\n * through the `selected` input.\n *\n * ```html\n * \n * Cell Content\n * \n * ```\n *\n * @developerPreview 21.0\n */", "implements": [], "isStandalone": true, "selector": "[ngGridCell]", @@ -380,8 +437,8 @@ ], "source": { "filePath": "src/aria/grid/grid.ts", - "startLine": 178, - "endLine": 251 + "startLine": 229, + "endLine": 340 } }, { @@ -400,32 +457,114 @@ "jsdocTags": [] }, { - "name": "activate", + "name": "id", "type": "any", "memberType": "property", "memberTags": [ "readonly", - "input", - "output" + "input" ], - "description": "Whether the widget is activated and the grid navigation should be paused.", + "description": "A unique identifier for the widget.", "jsdocTags": [], - "inputAlias": "activate", - "isRequiredInput": false, - "outputAlias": "activateChange" + "inputAlias": "id", + "isRequiredInput": false }, { - "name": "focus", + "name": "widgetType", + "type": "any", + "memberType": "property", + "memberTags": [ + "readonly", + "input" + ], + "description": "The type of widget, which determines how it is activated.", + "jsdocTags": [], + "inputAlias": "widgetType", + "isRequiredInput": false + }, + { + "name": "disabled", + "type": "any", + "memberType": "property", + "memberTags": [ + "readonly", + "input" + ], + "description": "Whether the widget is disabled.", + "jsdocTags": [], + "inputAlias": "disabled", + "isRequiredInput": false + }, + { + "name": "focusTarget", + "type": "any", + "memberType": "property", + "memberTags": [ + "readonly", + "input" + ], + "description": "The target that will receive focus instead of the widget.", + "jsdocTags": [], + "inputAlias": "focusTarget", + "isRequiredInput": false + }, + { + "name": "onActivate", + "type": "any", + "memberType": "property", + "memberTags": [ + "readonly", + "output" + ], + "description": "Emits when the widget is activated.", + "jsdocTags": [], + "outputAlias": "onActivate" + }, + { + "name": "onDeactivate", + "type": "any", + "memberType": "property", + "memberTags": [ + "readonly", + "output" + ], + "description": "Emits when the widget is deactivated.", + "jsdocTags": [], + "outputAlias": "onDeactivate" + }, + { + "name": "tabindex", + "type": "any", + "memberType": "property", + "memberTags": [ + "readonly", + "input" + ], + "description": "The tabindex override.", + "jsdocTags": [], + "inputAlias": "tabindex", + "isRequiredInput": false + }, + { + "name": "isActivated", + "type": "Signal", + "memberType": "getter", + "memberTags": [], + "description": "Whether the widget is activated.", + "jsdocTags": [] + }, + { + "name": "activate", "signatures": [ { - "name": "focus", + "name": "activate", "entryType": "function", - "description": "Focuses the widget.", + "description": "Activates the widget.", "generics": [], "isNewType": false, "jsdocTags": [], "params": [], - "rawComment": "/** Focuses the widget. */", + "rawComment": "/** Activates the widget. */", "returnType": "void" } ], @@ -434,29 +573,62 @@ "isNewType": false, "returnType": "void", "generics": [], - "name": "focus", - "description": "Focuses the widget.", + "name": "activate", + "description": "Activates the widget.", "entryType": "function", "jsdocTags": [], - "rawComment": "/** Focuses the widget. */" + "rawComment": "/** Activates the widget. */" }, "entryType": "function", - "description": "Focuses the widget.", + "description": "Activates the widget.", "jsdocTags": [], - "rawComment": "/** Focuses the widget. */", + "rawComment": "/** Activates the widget. */", + "memberType": "method", + "memberTags": [] + }, + { + "name": "deactivate", + "signatures": [ + { + "name": "deactivate", + "entryType": "function", + "description": "Deactivates the widget.", + "generics": [], + "isNewType": false, + "jsdocTags": [], + "params": [], + "rawComment": "/** Deactivates the widget. */", + "returnType": "void" + } + ], + "implementation": { + "params": [], + "isNewType": false, + "returnType": "void", + "generics": [], + "name": "deactivate", + "description": "Deactivates the widget.", + "entryType": "function", + "jsdocTags": [], + "rawComment": "/** Deactivates the widget. */" + }, + "entryType": "function", + "description": "Deactivates the widget.", + "jsdocTags": [], + "rawComment": "/** Deactivates the widget. */", "memberType": "method", "memberTags": [] } ], "generics": [], - "description": "A directive that represents a widget inside a grid cell.", + "description": "Represents an interactive element inside a `GridCell`. It allows for pausing grid navigation to\ninteract with the widget.\n\nWhen the user interacts with the widget (e.g., by typing in an input or opening a menu), grid\nnavigation is temporarily suspended to allow the widget to handle keyboard\nevents.\n\n```html\n\n \n\n```", "jsdocTags": [ { "name": "developerPreview", "comment": "21.0" } ], - "rawComment": "/**\n * A directive that represents a widget inside a grid cell.\n *\n * @developerPreview 21.0\n */", + "rawComment": "/**\n * Represents an interactive element inside a `GridCell`. It allows for pausing grid navigation to\n * interact with the widget.\n *\n * When the user interacts with the widget (e.g., by typing in an input or opening a menu), grid\n * navigation is temporarily suspended to allow the widget to handle keyboard\n * events.\n *\n * ```html\n * \n * \n * \n * ```\n *\n * @developerPreview 21.0\n */", "implements": [], "isStandalone": true, "selector": "[ngGridCellWidget]", @@ -465,8 +637,8 @@ ], "source": { "filePath": "src/aria/grid/grid.ts", - "startLine": 258, - "endLine": 290 + "startLine": 358, + "endLine": 449 } } ], @@ -487,10 +659,6 @@ "computed", "@angular/core" ], - [ - "contentChild", - "@angular/core" - ], [ "contentChildren", "@angular/core" @@ -511,6 +679,10 @@ "input", "@angular/core" ], + [ + "output", + "@angular/core" + ], [ "model", "@angular/core" @@ -599,10 +771,6 @@ "GridRow.element", "@angular/aria/grid" ], - [ - "GridRow.role", - "@angular/aria/grid" - ], [ "GridRow.rowIndex", "@angular/aria/grid" @@ -611,6 +779,14 @@ "GridCell", "@angular/aria/grid" ], + [ + "GridCell.textDirection", + "@angular/aria/grid" + ], + [ + "GridCell.id", + "@angular/aria/grid" + ], [ "GridCell.element", "@angular/aria/grid" @@ -647,6 +823,18 @@ "GridCell.selectable", "@angular/aria/grid" ], + [ + "GridCell.orientation", + "@angular/aria/grid" + ], + [ + "GridCell.wrap", + "@angular/aria/grid" + ], + [ + "GridCell.tabindex", + "@angular/aria/grid" + ], [ "GridCellWidget", "@angular/aria/grid" @@ -655,12 +843,44 @@ "GridCellWidget.element", "@angular/aria/grid" ], + [ + "GridCellWidget.id", + "@angular/aria/grid" + ], + [ + "GridCellWidget.widgetType", + "@angular/aria/grid" + ], + [ + "GridCellWidget.disabled", + "@angular/aria/grid" + ], + [ + "GridCellWidget.focusTarget", + "@angular/aria/grid" + ], + [ + "GridCellWidget.onActivate", + "@angular/aria/grid" + ], + [ + "GridCellWidget.onDeactivate", + "@angular/aria/grid" + ], + [ + "GridCellWidget.tabindex", + "@angular/aria/grid" + ], + [ + "GridCellWidget.isActivated", + "@angular/aria/grid" + ], [ "GridCellWidget.activate", "@angular/aria/grid" ], [ - "GridCellWidget.focus", + "GridCellWidget.deactivate", "@angular/aria/grid" ] ] diff --git a/adev/src/content/aria/aria-listbox.json b/adev/src/content/aria/aria-listbox.json index 5268b514710..d1c74ecf4ea 100755 --- a/adev/src/content/aria/aria-listbox.json +++ b/adev/src/content/aria/aria-listbox.json @@ -14,7 +14,7 @@ "type": "any", "memberType": "property", "memberTags": [ - "protected" + "readonly" ], "description": "A unique identifier for the listbox.", "jsdocTags": [] @@ -68,7 +68,7 @@ "type": "any", "memberType": "property", "memberTags": [], - "description": "Whether to allow disabled items in the list to receive focus.", + "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.", "jsdocTags": [] }, { @@ -76,7 +76,7 @@ "type": "any", "memberType": "property", "memberTags": [], - "description": "The focus strategy used by the list.", + "description": "The focus strategy used by the list.\n- `roving`: Focus is moved to the active item using `tabindex`.\n- `activedescendant`: Focus remains on the listbox container, and `aria-activedescendant` is used to indicate the active item.", "jsdocTags": [] }, { @@ -84,7 +84,7 @@ "type": "any", "memberType": "property", "memberTags": [], - "description": "The selection strategy used by the list.", + "description": "The selection strategy used by the list.\n- `follow`: The focused item is automatically selected.\n- `explicit`: Items are selected explicitly by the user (e.g., via click or spacebar).", "jsdocTags": [] }, { @@ -116,7 +116,7 @@ "type": "any", "memberType": "property", "memberTags": [], - "description": "The values of the current selected items.", + "description": "The values of the currently selected items.", "jsdocTags": [] }, { @@ -240,19 +240,23 @@ "name": "V" } ], - "description": "A listbox container.\n\nListboxes are used to display a list of items for a user to select from. The Listbox is meant\nto be used in conjunction with Option as follows:\n\n```html\n
    \n
  • Item 1
    • \n
  • Item 2
    • \n
  • Item 3
    • \n
\n```", + "description": "Represents a container used to display a list of items for a user to select from.\n\nThe `ngListbox` is meant to be used in conjunction with `ngOption` directives to create a\nselectable list. It supports single and multiple selection modes, as well as various focus and\norientation strategies.\n\n```html\n
    ", "jsdocTags": [ + { + "name": "for", + "comment": "(item of items; track item.id) {\n
  • \n{{item.name}}\n
    • \n}\n
\n```" + }, { "name": "developerPreview", "comment": "21.0" } ], - "rawComment": "/**\n * A listbox container.\n *\n * Listboxes are used to display a list of items for a user to select from. The Listbox is meant\n * to be used in conjunction with Option as follows:\n *\n * ```html\n *
    \n *
  • Item 1
    • \n *
  • Item 2
    • \n *
  • Item 3
    • \n *
\n * ```\n *\n * @developerPreview 21.0\n */", + "rawComment": "/**\n * Represents a container used to display a list of items for a user to select from.\n *\n * The `ngListbox` is meant to be used in conjunction with `ngOption` directives to create a\n * selectable list. It supports single and multiple selection modes, as well as various focus and\n * orientation strategies.\n *\n * ```html\n *
    \n * @for (item of items; track item.id) {\n *
  • \n * {{item.name}}\n *
    • \n * }\n *
\n * ```\n *\n * @developerPreview 21.0\n */", "implements": [], "source": { "filePath": "/src/aria/listbox/listbox.ts", - "startLine": 44, - "endLine": 197 + "startLine": 47, + "endLine": 206 } }, { @@ -265,10 +269,13 @@ "type": "any", "memberType": "property", "memberTags": [ - "protected" + "readonly", + "input" ], "description": "A unique identifier for the option.", - "jsdocTags": [] + "jsdocTags": [], + "inputAlias": "id", + "isRequiredInput": false }, { "name": "searchTerm", @@ -352,14 +359,14 @@ "name": "V" } ], - "description": "A selectable option in a Listbox.", + "description": "A selectable option in an `ngListbox`.\n\nThis directive should be applied to an element (e.g., `
  • `, `
    `) within an\n`ngListbox`. The `value` input is used to identify the option, and the `label` input provides\nthe accessible name for the option.\n\n```html\n
  • \n Item Name\n
    • \n```", "jsdocTags": [ { "name": "developerPreview", "comment": "21.0" } ], - "rawComment": "/**\n * A selectable option in a Listbox.\n *\n * @developerPreview 21.0\n */", + "rawComment": "/**\n * A selectable option in an `ngListbox`.\n *\n * This directive should be applied to an element (e.g., `
  • `, `
    `) within an\n * `ngListbox`. The `value` input is used to identify the option, and the `label` input provides\n * the accessible name for the option.\n *\n * ```html\n *
  • \n * Item Name\n *
    • \n * ```\n *\n * @developerPreview 21.0\n */", "implements": [], "isStandalone": true, "selector": "[ngOption]", @@ -368,8 +375,8 @@ ], "source": { "filePath": "/src/aria/listbox/listbox.ts", - "startLine": 204, - "endLine": 263 + "startLine": 223, + "endLine": 277 } } ], diff --git a/adev/src/content/aria/aria-menu.json b/adev/src/content/aria/aria-menu.json index 4e1f9306ba5..bf12bb5d45b 100755 --- a/adev/src/content/aria/aria-menu.json +++ b/adev/src/content/aria/aria-menu.json @@ -159,14 +159,14 @@ "name": "V" } ], - "description": "A trigger for a menu.\n\nThe menu trigger is used to open and close menus, and can be placed on menu items to connect\nsub-menus.", + "description": "A trigger for a menu.\n\nThe `ngMenuTrigger` directive is used to open and close menus. It can be applied to\nany interactive element (e.g., a button) to associate it with a `ngMenu` instance.\nIt also supports linking to sub-menus when applied to a `ngMenuItem`.\n\n```html\n\n\n
    \n
    Item 1
    \n
    Item 2
    \n
    \n```", "jsdocTags": [ { "name": "developerPreview", "comment": "21.0" } ], - "rawComment": "/**\n * A trigger for a menu.\n *\n * The menu trigger is used to open and close menus, and can be placed on menu items to connect\n * sub-menus.\n *\n * @developerPreview 21.0\n */", + "rawComment": "/**\n * A trigger for a menu.\n *\n * The `ngMenuTrigger` directive is used to open and close menus. It can be applied to\n * any interactive element (e.g., a button) to associate it with a `ngMenu` instance.\n * It also supports linking to sub-menus when applied to a `ngMenuItem`.\n *\n * ```html\n * \n *\n *
    \n *
    Item 1
    \n *
    Item 2
    \n *
    \n * ```\n *\n * @developerPreview 21.0\n */", "implements": [], "isStandalone": true, "selector": "button[ngMenuTrigger]", @@ -175,8 +175,8 @@ ], "source": { "filePath": "/src/aria/menu/menu.ts", - "startLine": 45, - "endLine": 108 + "startLine": 55, + "endLine": 117 } }, { @@ -231,7 +231,7 @@ "memberTags": [ "readonly" ], - "description": "The delay in seconds before the typeahead buffer is cleared.", + "description": "The delay in milliseconds before the typeahead buffer is cleared.", "jsdocTags": [] }, { @@ -299,7 +299,7 @@ "memberTags": [ "readonly" ], - "description": "The delay in seconds before expanding sub-menus on hover.", + "description": "The delay in milliseconds before expanding sub-menus on hover.", "jsdocTags": [] }, { @@ -341,19 +341,19 @@ "name": "V" } ], - "description": "A list of menu items.\n\nA menu is used to offer a list of menu item choices to users. Menus can be nested within other\nmenus to create sub-menus.\n\n```html\n\n\n
    \n
    Star
    \n
    Edit
    \n
    Delete
    \n
    \n```", + "description": "A list of menu items.\n\nA `ngMenu` is used to offer a list of menu item choices to users. Menus can be nested\nwithin other menus to create sub-menus. It works in conjunction with `ngMenuTrigger`\nand `ngMenuItem` directives.\n\n```html\n\n\n
    \n
    Star
    \n
    Edit
    \n
    More
    \n
    \n\n
    \n
    Sub Item 1
    \n
    Sub Item 2
    \n
    \n```", "jsdocTags": [ { "name": "developerPreview", "comment": "21.0" } ], - "rawComment": "/**\n * A list of menu items.\n *\n * A menu is used to offer a list of menu item choices to users. Menus can be nested within other\n * menus to create sub-menus.\n *\n * ```html\n * \n *\n *
    \n *
    Star
    \n *
    Edit
    \n *
    Delete
    \n *
    \n * ```\n *\n * @developerPreview 21.0\n */", + "rawComment": "/**\n * A list of menu items.\n *\n * A `ngMenu` is used to offer a list of menu item choices to users. Menus can be nested\n * within other menus to create sub-menus. It works in conjunction with `ngMenuTrigger`\n * and `ngMenuItem` directives.\n *\n * ```html\n * \n *\n *
    \n *
    Star
    \n *
    Edit
    \n *
    More
    \n *
    \n *\n *
    \n *
    Sub Item 1
    \n *
    Sub Item 2
    \n *
    \n * ```\n *\n * @developerPreview 21.0\n */", "implements": [], "source": { "filePath": "/src/aria/menu/menu.ts", - "startLine": 128, - "endLine": 259 + "startLine": 143, + "endLine": 273 } }, { @@ -416,7 +416,7 @@ "input", "output" ], - "description": "The values of the menu.", + "description": "The values of the currently selected menu items.", "jsdocTags": [], "inputAlias": "values", "isRequiredInput": false, @@ -443,7 +443,7 @@ "readonly", "input" ], - "description": "The delay in seconds before the typeahead buffer is cleared.", + "description": "The delay in milliseconds before the typeahead buffer is cleared.", "jsdocTags": [], "inputAlias": "typeaheadDelay", "isRequiredInput": false @@ -508,14 +508,14 @@ "name": "V" } ], - "description": "A menu bar of menu items.\n\nLike the menu, a menubar is used to offer a list of menu item choices to users. However, a\nmenubar is used to display a persistent, top-level,\nalways-visible set of menu item choices.", + "description": "A menu bar of menu items.\n\nLike the `ngMenu`, a `ngMenuBar` is used to offer a list of menu item choices to users.\nHowever, a menubar is used to display a persistent, top-level, always-visible set of\nmenu item choices, typically found at the top of an application window.\n\n```html\n
    \n \n \n
    \n\n
    \n
    New
    \n
    Open
    \n
    \n\n
    \n
    Cut
    \n
    Copy
    \n
    \n```", "jsdocTags": [ { "name": "developerPreview", "comment": "21.0" } ], - "rawComment": "/**\n * A menu bar of menu items.\n *\n * Like the menu, a menubar is used to offer a list of menu item choices to users. However, a\n * menubar is used to display a persistent, top-level,\n * always-visible set of menu item choices.\n *\n * @developerPreview 21.0\n */", + "rawComment": "/**\n * A menu bar of menu items.\n *\n * Like the `ngMenu`, a `ngMenuBar` is used to offer a list of menu item choices to users.\n * However, a menubar is used to display a persistent, top-level, always-visible set of\n * menu item choices, typically found at the top of an application window.\n *\n * ```html\n *
    \n * \n * \n *
    \n *\n *
    \n *
    New
    \n *
    Open
    \n *
    \n *\n *
    \n *
    Cut
    \n *
    Copy
    \n *
    \n * ```\n *\n * @developerPreview 21.0\n */", "implements": [], "isStandalone": true, "selector": "[ngMenuBar]", @@ -524,8 +524,8 @@ ], "source": { "filePath": "/src/aria/menu/menu.ts", - "startLine": 270, - "endLine": 354 + "startLine": 301, + "endLine": 384 } }, { @@ -722,14 +722,14 @@ "name": "V" } ], - "description": "An item in a Menu.\n\nMenu items can be used in menus and menubars to represent a choice or action a user can take.", + "description": "An item in a Menu.\n\n`ngMenuItem` directives can be used in `ngMenu` and `ngMenuBar` to represent a choice\nor action a user can take. They can also act as triggers for sub-menus.\n\n```html\n
    Action Item
    \n\n
    Submenu Trigger
    \n```", "jsdocTags": [ { "name": "developerPreview", "comment": "21.0" } ], - "rawComment": "/**\n * An item in a Menu.\n *\n * Menu items can be used in menus and menubars to represent a choice or action a user can take.\n *\n * @developerPreview 21.0\n */", + "rawComment": "/**\n * An item in a Menu.\n *\n * `ngMenuItem` directives can be used in `ngMenu` and `ngMenuBar` to represent a choice\n * or action a user can take. They can also act as triggers for sub-menus.\n *\n * ```html\n *
    Action Item
    \n *\n *
    Submenu Trigger
    \n * ```\n *\n * @developerPreview 21.0\n */", "implements": [], "isStandalone": true, "selector": "[ngMenuItem]", @@ -738,8 +738,8 @@ ], "source": { "filePath": "/src/aria/menu/menu.ts", - "startLine": 363, - "endLine": 444 + "startLine": 400, + "endLine": 480 } }, { @@ -748,19 +748,19 @@ "entryType": "undecorated_class", "members": [], "generics": [], - "description": "Defers the rendering of the menu content.", + "description": "Defers the rendering of the menu content.\n\nThis structural directive should be applied to an `ng-template` within a `ngMenu`\nor `ngMenuBar` to lazily render its content only when the menu is opened.\n\n```html\n
    \n \n
    Lazy Item 1
    \n
    Lazy Item 2
    \n     \n
    \n```", "jsdocTags": [ { "name": "developerPreview", "comment": "21.0" } ], - "rawComment": "/**\n * Defers the rendering of the menu content.\n *\n * @developerPreview 21.0\n */", + "rawComment": "/**\n * Defers the rendering of the menu content.\n *\n * This structural directive should be applied to an `ng-template` within a `ngMenu`\n * or `ngMenuBar` to lazily render its content only when the menu is opened.\n *\n * ```html\n *
    \n * \n *
    Lazy Item 1
    \n *
    Lazy Item 2
    \n *     \n *
    \n * ```\n *\n * @developerPreview 21.0\n */", "implements": [], "source": { "filePath": "/src/aria/menu/menu.ts", - "startLine": 451, - "endLine": 456 + "startLine": 499, + "endLine": 504 } } ], diff --git a/adev/src/content/aria/aria-tabs.json b/adev/src/content/aria/aria-tabs.json index a2eab7c967a..728df7b855c 100755 --- a/adev/src/content/aria/aria-tabs.json +++ b/adev/src/content/aria/aria-tabs.json @@ -9,22 +9,6 @@ "isAbstract": false, "entryType": "directive", "members": [ - { - "name": "tabs", - "type": "any", - "memberType": "property", - "memberTags": [], - "description": "The Tab UIPattern of the child Tabs.", - "jsdocTags": [] - }, - { - "name": "unorderedTabpanels", - "type": "any", - "memberType": "property", - "memberTags": [], - "description": "The TabPanel UIPattern of the child TabPanels.", - "jsdocTags": [] - }, { "name": "register", "signatures": [ @@ -122,66 +106,17 @@ "rawComment": "", "memberType": "method", "memberTags": [] - }, - { - "name": "open", - "signatures": [ - { - "name": "open", - "entryType": "function", - "description": "Opens the tab panel with the specified value.", - "generics": [], - "isNewType": false, - "jsdocTags": [], - "params": [ - { - "name": "value", - "description": "", - "type": "string", - "isOptional": false, - "isRestParam": false - } - ], - "rawComment": "/** Opens the tab panel with the specified value. */", - "returnType": "void" - } - ], - "implementation": { - "params": [ - { - "name": "value", - "description": "", - "type": "string", - "isOptional": false, - "isRestParam": false - } - ], - "isNewType": false, - "returnType": "void", - "generics": [], - "name": "open", - "description": "Opens the tab panel with the specified value.", - "entryType": "function", - "jsdocTags": [], - "rawComment": "/** Opens the tab panel with the specified value. */" - }, - "entryType": "function", - "description": "Opens the tab panel with the specified value.", - "jsdocTags": [], - "rawComment": "/** Opens the tab panel with the specified value. */", - "memberType": "method", - "memberTags": [] } ], "generics": [], - "description": "A Tabs container.\n\nRepresents a set of layered sections of content. The Tabs is a container meant to be used with\nTabList, Tab, and TabPanel as follows:\n\n```html\n
    \n
      \n
    • Tab 1
      • \n
    • Tab 2
      • \n
    • Tab 3
      • \n
    \n\n
    \n Tab content 1\n
    \n
    \n Tab content 2\n
    \n
    \n Tab content 3\n
    \n```", + "description": "A Tabs container.\n\nThe `ngTabs` directive represents a set of layered sections of content. It acts as the\noverarching container for a tabbed interface, coordinating the behavior of `ngTabList`,\n`ngTab`, and `ngTabPanel` directives.\n\n```html\n
    \n
      \n
    • Tab 1
      • \n
    • Tab 2
      • \n
    • Tab 3
      • \n
    \n\n
    \n Content for Tab 1\n
    \n
    \n Content for Tab 2\n
    \n
    \n Content for Tab 3\n
    \n
    \n```", "jsdocTags": [ { "name": "developerPreview", "comment": "21.0" } ], - "rawComment": "/**\n * A Tabs container.\n *\n * Represents a set of layered sections of content. The Tabs is a container meant to be used with\n * TabList, Tab, and TabPanel as follows:\n *\n * ```html\n *
    \n *
      \n *
    • Tab 1
      • \n *
    • Tab 2
      • \n *
    • Tab 3
      • \n *
    \n *\n *
    \n * Tab content 1\n *
    \n *
    \n * Tab content 2\n *
    \n *
    \n * Tab content 3\n *
    \n * ```\n *\n * @developerPreview 21.0\n */", + "rawComment": "/**\n * A Tabs container.\n *\n * The `ngTabs` directive represents a set of layered sections of content. It acts as the\n * overarching container for a tabbed interface, coordinating the behavior of `ngTabList`,\n * `ngTab`, and `ngTabPanel` directives.\n *\n * ```html\n *
    \n *
      \n *
    • Tab 1
      • \n *
    • Tab 2
      • \n *
    • Tab 3
      • \n *
    \n *\n *
    \n * Content for Tab 1\n *
    \n *
    \n * Content for Tab 2\n *
    \n *
    \n * Content for Tab 3\n *
    \n *
    \n * ```\n *\n * @developerPreview 21.0\n */", "implements": [], "isStandalone": true, "selector": "[ngTabs]", @@ -190,8 +125,8 @@ ], "source": { "filePath": "/src/aria/tabs/tabs.ts", - "startLine": 74, - "endLine": 124 + "startLine": 75, + "endLine": 115 } }, { @@ -209,16 +144,6 @@ "description": "Text direction.", "jsdocTags": [] }, - { - "name": "tabs", - "type": "any", - "memberType": "property", - "memberTags": [ - "readonly" - ], - "description": "The Tab UIPatterns of the child Tabs.", - "jsdocTags": [] - }, { "name": "orientation", "type": "any", @@ -253,7 +178,7 @@ "readonly", "input" ], - "description": "Whether to allow disabled items to receive focus.", + "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.", "jsdocTags": [], "inputAlias": "softDisabled", "isRequiredInput": false @@ -266,7 +191,7 @@ "readonly", "input" ], - "description": "The focus strategy used by the tablist.", + "description": "The focus strategy used by the tablist.\n- `roving`: Focus is moved to the active tab using `tabindex`.\n- `activedescendant`: Focus remains on the tablist container, and `aria-activedescendant` is used to indicate the active tab.", "jsdocTags": [], "inputAlias": "focusMode", "isRequiredInput": false @@ -279,24 +204,11 @@ "readonly", "input" ], - "description": "The selection strategy used by the tablist.", + "description": "The selection strategy used by the tablist.\n- `follow`: The focused tab is automatically selected.\n- `explicit`: Tabs are selected explicitly by the user (e.g., via click or spacebar).", "jsdocTags": [], "inputAlias": "selectionMode", "isRequiredInput": false }, - { - "name": "disabled", - "type": "any", - "memberType": "property", - "memberTags": [ - "readonly", - "input" - ], - "description": "Whether the tablist is disabled.", - "jsdocTags": [], - "inputAlias": "disabled", - "isRequiredInput": false - }, { "name": "selectedTab", "type": "any", @@ -312,6 +224,19 @@ "isRequiredInput": false, "outputAlias": "selectedTabChange" }, + { + "name": "disabled", + "type": "any", + "memberType": "property", + "memberTags": [ + "readonly", + "input" + ], + "description": "Whether the tablist is disabled.", + "jsdocTags": [], + "inputAlias": "disabled", + "isRequiredInput": false + }, { "name": "onFocus", "signatures": [ @@ -508,17 +433,66 @@ "rawComment": "", "memberType": "method", "memberTags": [] + }, + { + "name": "open", + "signatures": [ + { + "name": "open", + "entryType": "function", + "description": "Opens the tab panel with the specified value.", + "generics": [], + "isNewType": false, + "jsdocTags": [], + "params": [ + { + "name": "value", + "description": "", + "type": "string", + "isOptional": false, + "isRestParam": false + } + ], + "rawComment": "/** Opens the tab panel with the specified value. */", + "returnType": "boolean" + } + ], + "implementation": { + "params": [ + { + "name": "value", + "description": "", + "type": "string", + "isOptional": false, + "isRestParam": false + } + ], + "isNewType": false, + "returnType": "boolean", + "generics": [], + "name": "open", + "description": "Opens the tab panel with the specified value.", + "entryType": "function", + "jsdocTags": [], + "rawComment": "/** Opens the tab panel with the specified value. */" + }, + "entryType": "function", + "description": "Opens the tab panel with the specified value.", + "jsdocTags": [], + "rawComment": "/** Opens the tab panel with the specified value. */", + "memberType": "method", + "memberTags": [] } ], "generics": [], - "description": "A TabList container.\n\nControls a list of Tab(s).", + "description": "A TabList container.\n\nThe `ngTabList` directive controls a list of `ngTab` elements. It manages keyboard\nnavigation, selection, and the overall orientation of the tabs. It should be placed\nwithin an `ngTabs` container.\n\n```html\n
      \n
    • First Tab
      • \n
    • Second Tab
      • \n
    \n```", "jsdocTags": [ { "name": "developerPreview", "comment": "21.0" } ], - "rawComment": "/**\n * A TabList container.\n *\n * Controls a list of Tab(s).\n *\n * @developerPreview 21.0\n */", + "rawComment": "/**\n * A TabList container.\n *\n * The `ngTabList` directive controls a list of `ngTab` elements. It manages keyboard\n * navigation, selection, and the overall orientation of the tabs. It should be placed\n * within an `ngTabs` container.\n *\n * ```html\n *
      \n *
    • First Tab
      • \n *
    • Second Tab
      • \n *
    \n * ```\n *\n * @developerPreview 21.0\n */", "implements": [ "OnInit", "OnDestroy" @@ -531,7 +505,7 @@ "source": { "filePath": "/src/aria/tabs/tabs.ts", "startLine": 133, - "endLine": 235 + "endLine": 256 } }, { @@ -539,6 +513,19 @@ "isAbstract": false, "entryType": "directive", "members": [ + { + "name": "id", + "type": "any", + "memberType": "property", + "memberTags": [ + "readonly", + "input" + ], + "description": "A unique identifier for the widget.", + "jsdocTags": [], + "inputAlias": "id", + "isRequiredInput": false + }, { "name": "element", "type": "any", @@ -590,7 +577,7 @@ "readonly", "input" ], - "description": "A local unique identifier for the tab.", + "description": "The remote tabpanel unique identifier.", "jsdocTags": [], "inputAlias": "value", "isRequiredInput": true @@ -605,16 +592,6 @@ "description": "Whether the tab is active.", "jsdocTags": [] }, - { - "name": "expanded", - "type": "any", - "memberType": "property", - "memberTags": [ - "readonly" - ], - "description": "Whether the tab is expanded.", - "jsdocTags": [] - }, { "name": "selected", "type": "any", @@ -726,14 +703,14 @@ } ], "generics": [], - "description": "A selectable tab in a TabList.", + "description": "A selectable tab in a TabList.\n\nThe `ngTab` directive represents an individual tab control within an `ngTabList`. It\nrequires a `value` that uniquely identifies it and links it to a corresponding `ngTabPanel`.\n\n```html\n
  • \n My Tab Label\n
    • \n```", "jsdocTags": [ { "name": "developerPreview", "comment": "21.0" } ], - "rawComment": "/**\n * A selectable tab in a TabList.\n *\n * @developerPreview 21.0\n */", + "rawComment": "/**\n * A selectable tab in a TabList.\n *\n * The `ngTab` directive represents an individual tab control within an `ngTabList`. It\n * requires a `value` that uniquely identifies it and links it to a corresponding `ngTabPanel`.\n *\n * ```html\n *
  • \n * My Tab Label\n *
    • \n * ```\n *\n * @developerPreview 21.0\n */", "implements": [ "HasElement", "OnInit", @@ -746,8 +723,8 @@ ], "source": { "filePath": "/src/aria/tabs/tabs.ts", - "startLine": 242, - "endLine": 316 + "startLine": 272, + "endLine": 341 } }, { @@ -755,6 +732,16 @@ "isAbstract": false, "entryType": "undecorated_class", "members": [ + { + "name": "id", + "type": "any", + "memberType": "property", + "memberTags": [ + "readonly" + ], + "description": "A global unique identifier for the tab.", + "jsdocTags": [] + }, { "name": "tab", "type": "any", @@ -853,22 +840,22 @@ } ], "generics": [], - "description": "A TabPanel container for the resources of layered content associated with a tab.\n\nIf a tabpanel is hidden due to its corresponding tab is not activated, the `inert` attribute\nwill be applied to the tabpanel element to remove it from the accessibility tree and stop\nall the keyboard and pointer interactions. Note that this does not visually hide the tabpenl\nand a proper styling is required.", + "description": "A TabPanel container for the resources of layered content associated with a tab.\n\nThe `ngTabPanel` directive holds the content for a specific tab. It is linked to an\n`ngTab` by a matching `value`. If a tab panel is hidden, the `inert` attribute will be\napplied to remove it from the accessibility tree. Proper styling is required for visual hiding.\n\n```html\n
    \n \n \n \n
    \n```", "jsdocTags": [ { "name": "developerPreview", "comment": "21.0" } ], - "rawComment": "/**\n * A TabPanel container for the resources of layered content associated with a tab.\n *\n * If a tabpanel is hidden due to its corresponding tab is not activated, the `inert` attribute\n * will be applied to the tabpanel element to remove it from the accessibility tree and stop\n * all the keyboard and pointer interactions. Note that this does not visually hide the tabpenl\n * and a proper styling is required.\n *\n * @developerPreview 21.0\n */", + "rawComment": "/**\n * A TabPanel container for the resources of layered content associated with a tab.\n *\n * The `ngTabPanel` directive holds the content for a specific tab. It is linked to an\n * `ngTab` by a matching `value`. If a tab panel is hidden, the `inert` attribute will be\n * applied to remove it from the accessibility tree. Proper styling is required for visual hiding.\n *\n * ```html\n *
    \n * \n * \n * \n *
    \n * ```\n *\n * @developerPreview 21.0\n */", "implements": [ "OnInit", "OnDestroy" ], "source": { "filePath": "/src/aria/tabs/tabs.ts", - "startLine": 328, - "endLine": 383 + "startLine": 360, + "endLine": 414 } }, { @@ -877,19 +864,19 @@ "entryType": "undecorated_class", "members": [], "generics": [], - "description": "A TabContent container for the lazy-loaded content.", + "description": "A TabContent container for the lazy-loaded content.\n\nThis structural directive should be applied to an `ng-template` within an `ngTabPanel`.\nIt enables lazy loading of the tab's content, meaning the content is only rendered\nwhen the tab is activated for the first time.\n\n```html\n
    \n \n

    This content will be loaded when 'myTabId' is selected.

    \n     \n
    \n```", "jsdocTags": [ { "name": "developerPreview", "comment": "21.0" } ], - "rawComment": "/**\n * A TabContent container for the lazy-loaded content.\n *\n * @developerPreview 21.0\n */", + "rawComment": "/**\n * A TabContent container for the lazy-loaded content.\n *\n * This structural directive should be applied to an `ng-template` within an `ngTabPanel`.\n * It enables lazy loading of the tab's content, meaning the content is only rendered\n * when the tab is activated for the first time.\n *\n * ```html\n *
    \n * \n *

    This content will be loaded when 'myTabId' is selected.

    \n *     \n *
    \n * ```\n *\n * @developerPreview 21.0\n */", "implements": [], "source": { "filePath": "/src/aria/tabs/tabs.ts", - "startLine": 390, - "endLine": 395 + "startLine": 433, + "endLine": 438 } } ], @@ -930,10 +917,6 @@ "model", "@angular/core" ], - [ - "linkedSignal", - "@angular/core" - ], [ "signal", "@angular/core" @@ -998,14 +981,6 @@ "Tabs", "@angular/aria/tabs" ], - [ - "Tabs.tabs", - "@angular/aria/tabs" - ], - [ - "Tabs.unorderedTabpanels", - "@angular/aria/tabs" - ], [ "Tabs.register", "@angular/aria/tabs" @@ -1014,10 +989,6 @@ "Tabs.deregister", "@angular/aria/tabs" ], - [ - "Tabs.open", - "@angular/aria/tabs" - ], [ "TabList", "@angular/aria/tabs" @@ -1026,10 +997,6 @@ "TabList.textDirection", "@angular/aria/tabs" ], - [ - "TabList.tabs", - "@angular/aria/tabs" - ], [ "TabList.orientation", "@angular/aria/tabs" @@ -1051,11 +1018,11 @@ "@angular/aria/tabs" ], [ - "TabList.disabled", + "TabList.selectedTab", "@angular/aria/tabs" ], [ - "TabList.selectedTab", + "TabList.disabled", "@angular/aria/tabs" ], [ @@ -1078,10 +1045,18 @@ "TabList.deregister", "@angular/aria/tabs" ], + [ + "TabList.open", + "@angular/aria/tabs" + ], [ "Tab", "@angular/aria/tabs" ], + [ + "Tab.id", + "@angular/aria/tabs" + ], [ "Tab.element", "@angular/aria/tabs" @@ -1106,10 +1081,6 @@ "Tab.active", "@angular/aria/tabs" ], - [ - "Tab.expanded", - "@angular/aria/tabs" - ], [ "Tab.selected", "@angular/aria/tabs" @@ -1130,6 +1101,10 @@ "TabPanel", "@angular/aria/tabs" ], + [ + "TabPanel.id", + "@angular/aria/tabs" + ], [ "TabPanel.tab", "@angular/aria/tabs" diff --git a/adev/src/content/aria/aria-toolbar.json b/adev/src/content/aria/aria-toolbar.json index 1401bbda004..65afa42d2ec 100755 --- a/adev/src/content/aria/aria-toolbar.json +++ b/adev/src/content/aria/aria-toolbar.json @@ -49,7 +49,7 @@ "memberTags": [ "input" ], - "description": "Whether to allow disabled items to receive focus.", + "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.", "jsdocTags": [], "inputAlias": "softDisabled", "isRequiredInput": false @@ -217,14 +217,14 @@ "name": "V" } ], - "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
    \n \n
    \n \n \n \n
    \n
    \n```", + "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
    \n \n \n\n
    \n \n \n \n
    \n
    \n```", "jsdocTags": [ { "name": "developerPreview", "comment": "21.0" } ], - "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 *
    \n * \n *
    \n * \n * \n * \n *
    \n *
    \n * ```\n *\n * @developerPreview 21.0\n */", + "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 *
    \n * \n * \n *\n *
    \n * \n * \n * \n *
    \n *
    \n * ```\n *\n * @developerPreview 21.0\n */", "implements": [], "isStandalone": true, "selector": "[ngToolbar]", @@ -234,7 +234,7 @@ "source": { "filePath": "/src/aria/toolbar/toolbar.ts", "startLine": 65, - "endLine": 160 + "endLine": 162 } }, { @@ -413,14 +413,14 @@ "name": "V" } ], - "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.", + "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\n```", "jsdocTags": [ { "name": "developerPreview", "comment": "21.0" } ], - "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 *\n * @developerPreview 21.0\n */", + "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 * \n * ```\n *\n * @developerPreview 21.0\n */", "implements": [ "OnInit", "OnDestroy" @@ -432,8 +432,8 @@ ], "source": { "filePath": "/src/aria/toolbar/toolbar.ts", - "startLine": 170, - "endLine": 238 + "startLine": 179, + "endLine": 243 } }, { @@ -493,14 +493,14 @@ "name": "V" } ], - "description": "A directive that groups toolbar widgets, used for more complex widgets like radio groups that\nhave their own internal navigation.", + "description": "A directive that groups toolbar widgets, used for more complex widgets like radio groups\nthat have their own internal navigation.", "jsdocTags": [ { "name": "developerPreview", "comment": "21.0" } ], - "rawComment": "/**\n * A directive that groups toolbar widgets, used for more complex widgets like radio groups that\n * have their own internal navigation.\n *\n * @developerPreview 21.0\n */", + "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 */", "implements": [], "isStandalone": true, "selector": "[ngToolbarWidgetGroup]", @@ -509,8 +509,8 @@ ], "source": { "filePath": "/src/aria/toolbar/toolbar.ts", - "startLine": 246, - "endLine": 274 + "startLine": 251, + "endLine": 276 } } ], diff --git a/adev/src/content/aria/aria-tree.json b/adev/src/content/aria/aria-tree.json index 65d08155e9c..fa7a27920c9 100755 --- a/adev/src/content/aria/aria-tree.json +++ b/adev/src/content/aria/aria-tree.json @@ -14,11 +14,21 @@ "type": "any", "memberType": "property", "memberTags": [ - "protected" + "readonly" ], "description": "A unique identifier for the tree.", "jsdocTags": [] }, + { + "name": "element", + "type": "any", + "memberType": "property", + "memberTags": [ + "readonly" + ], + "description": "The host native element.", + "jsdocTags": [] + }, { "name": "orientation", "type": "any", @@ -56,7 +66,7 @@ "memberTags": [ "readonly" ], - "description": "The selection strategy used by the tree.", + "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.", "jsdocTags": [] }, { @@ -66,7 +76,7 @@ "memberTags": [ "readonly" ], - "description": "The focus strategy used by the tree.", + "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.", "jsdocTags": [] }, { @@ -86,7 +96,7 @@ "memberTags": [ "readonly" ], - "description": "Whether to allow disabled items to receive focus.", + "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.", "jsdocTags": [] }, { @@ -96,7 +106,7 @@ "memberTags": [ "readonly" ], - "description": "Typeahead delay.", + "description": "The delay in seconds before the typeahead search is reset.", "jsdocTags": [] }, { @@ -106,7 +116,7 @@ "memberTags": [ "readonly" ], - "description": "Selected item values.", + "description": "The values of the currently selected items.", "jsdocTags": [] }, { @@ -136,7 +146,7 @@ "memberTags": [ "readonly" ], - "description": "The aria-current type.", + "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.", "jsdocTags": [] }, { @@ -325,19 +335,27 @@ "name": "V" } ], - "description": "A Tree container.\n\nTransforms nested lists into an accessible, ARIA-compliant tree structure.\n\n```html\n
      \n
    • Leaf Item 1
      • \n
    • \n Parent Item 1\n
        \n \n
      • Child Item 1.1
        • \n
      • Child Item 1.2
        • \n         \n
      \n
      • \n
    • Disabled Leaf Item 2
      • \n
    \n```", + "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
      \n \n
    \n\n", "jsdocTags": [ + { + "name": "for", + "comment": "(node of nodes; track node.name) {\n
  • \n{{ node.name }}" + }, + { + "name": "if", + "comment": "(node.children) {\n
      \n \n \n \n
    \n}\n
    • \n}\n    \n```" + }, { "name": "developerPreview", "comment": "21.0" } ], - "rawComment": "/**\n * A Tree container.\n *\n * Transforms nested lists into an accessible, ARIA-compliant tree structure.\n *\n * ```html\n *
      \n *
    • Leaf Item 1
      • \n *
    • \n * Parent Item 1\n *
        \n * \n *
      • Child Item 1.1
        • \n *
      • Child Item 1.2
        • \n *         \n *
      \n *
      • \n *
    • Disabled Leaf Item 2
      • \n *
    \n * ```\n *\n * @developerPreview 21.0\n */", + "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 *
      \n * \n *
    \n *\n * \n * @for (node of nodes; track node.name) {\n *
  • \n * {{ node.name }}\n * @if (node.children) {\n *
      \n * \n * \n * \n *
    \n * }\n *
    • \n * }\n *     \n * ```\n *\n * @developerPreview 21.0\n */", "implements": [], "source": { "filePath": "/src/aria/tree/tree.ts", - "startLine": 72, - "endLine": 215 + "startLine": 83, + "endLine": 237 } }, { @@ -345,6 +363,19 @@ "isAbstract": false, "entryType": "directive", "members": [ + { + "name": "id", + "type": "any", + "memberType": "property", + "memberTags": [ + "readonly", + "input" + ], + "description": "A unique identifier for the tree item.", + "jsdocTags": [], + "inputAlias": "id", + "isRequiredInput": false + }, { "name": "element", "type": "any", @@ -407,6 +438,21 @@ "inputAlias": "selectable", "isRequiredInput": false }, + { + "name": "expanded", + "type": "any", + "memberType": "property", + "memberTags": [ + "readonly", + "input", + "output" + ], + "description": "Whether the tree item is expanded.", + "jsdocTags": [], + "inputAlias": "expanded", + "isRequiredInput": false, + "outputAlias": "expandedChange" + }, { "name": "label", "type": "any", @@ -450,16 +496,6 @@ "description": "Whether the item is active.", "jsdocTags": [] }, - { - "name": "expanded", - "type": "any", - "memberType": "property", - "memberTags": [ - "readonly" - ], - "description": "Whether this item is currently expanded, returning null if not expandable.", - "jsdocTags": [] - }, { "name": "level", "type": "any", @@ -644,14 +680,14 @@ "name": "V" } ], - "description": "A selectable and expandable Tree Item in a Tree.", + "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
  • \n Item Label\n
    • \n```", "jsdocTags": [ { "name": "developerPreview", "comment": "21.0" } ], - "rawComment": "/**\n * A selectable and expandable Tree Item in a Tree.\n *\n * @developerPreview 21.0\n */", + "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 *
  • \n * Item Label\n *
    • \n * ```\n *\n * @developerPreview 21.0\n */", "extends": "DeferredContentAware", "implements": [ "OnInit", @@ -665,8 +701,8 @@ ], "source": { "filePath": "/src/aria/tree/tree.ts", - "startLine": 222, - "endLine": 347 + "startLine": 254, + "endLine": 380 } }, { @@ -864,22 +900,22 @@ "name": "V" } ], - "description": "Contains children tree itmes.", + "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
  • \n Parent Item\n
      \n \n
    • Child Item
      • \n       \n
    \n
    • \n```", "jsdocTags": [ { "name": "developerPreview", "comment": "21.0" } ], - "rawComment": "/**\n * Contains children tree itmes.\n *\n * @developerPreview 21.0\n */", + "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 *
  • \n * Parent Item\n *
      \n * \n *
    • Child Item
      • \n *       \n *
    \n *
    • \n * ```\n *\n * @developerPreview 21.0\n */", "implements": [ "OnInit", "OnDestroy" ], "source": { "filePath": "/src/aria/tree/tree.ts", - "startLine": 354, - "endLine": 392 + "startLine": 402, + "endLine": 440 } } ], @@ -988,6 +1024,10 @@ "Tree.id", "@angular/aria/tree" ], + [ + "Tree.element", + "@angular/aria/tree" + ], [ "Tree.orientation", "@angular/aria/tree" @@ -1056,6 +1096,10 @@ "TreeItem", "@angular/aria/tree" ], + [ + "TreeItem.id", + "@angular/aria/tree" + ], [ "TreeItem.element", "@angular/aria/tree" @@ -1076,6 +1120,10 @@ "TreeItem.selectable", "@angular/aria/tree" ], + [ + "TreeItem.expanded", + "@angular/aria/tree" + ], [ "TreeItem.label", "@angular/aria/tree" @@ -1092,10 +1140,6 @@ "TreeItem.active", "@angular/aria/tree" ], - [ - "TreeItem.expanded", - "@angular/aria/tree" - ], [ "TreeItem.level", "@angular/aria/tree"