Elgato_dark/angular
1
0
Fork 0
mirror of https://github.com/angular/angular synced 2026-05-24 09:28:37 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

docs: update cross-repo adev docs

Browse source 
Updated Angular adev cross repo docs files.
This commit is contained in:
Angular Robot 2025-11-13 17:36:39 +00:00 committed by Jessica Janiuk
parent 4f6f9b8e8d
commit 2406172d50
9 changed files with 665 additions and 389 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
adev/src/content/aria/_build-info.json
View file

@ -1,4 +1,4 @@
{
"branchName": "refs/heads/21.0.x",
"sha": "1d7b4eb287c0e29934b0e002aa68938381f451a9"
"sha": "e10738cca18ddd114d98d97c82414c9892c5fac7"
}

176
adev/src/content/aria/aria-accordion.json
View file

@ -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<div ngAccordionPanel panelId=\"unique-id-1\">\n <ng-template ngAccordionContent>\n <p>This content is lazily rendered and will be shown when the panel is expanded.</p>\n </ng-template>\n</div>\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 * <div ngAccordionPanel panelId=\"unique-id-1\">\n * <ng-template ngAccordionContent>\n * <p>This content is lazily rendered and will be shown when the panel is expanded.</p>\n * </ng-template>\n * </div>\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<any>",
"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<button ngAccordionTrigger panelId=\"unique-id-1\">\n Accordion Trigger Text\n</button>\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 * <button ngAccordionTrigger panelId=\"unique-id-1\">\n * Accordion Trigger Text\n * </button>\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<div ngAccordionGroup [multiExpandable]=\"true\" [(expandedPanels)]=\"expandedItems\">\n <div class=\"accordion-item\">\n <h3>\n <button ngAccordionTrigger panelId=\"item-1\">Item 1</button>\n </h3>\n <div ngAccordionPanel panelId=\"item-1\">\n <ng-template ngAccordionContent>\n <p>Content for Item 1.</p>\n </ng-template>\n </div>\n </div>\n <div class=\"accordion-item\">\n <h3>\n <button ngAccordionTrigger panelId=\"item-2\">Item 2</button>\n </h3>\n <div ngAccordionPanel panelId=\"item-2\">\n <ng-template ngAccordionContent>\n <p>Content for Item 2.</p>\n </ng-template>\n </div>\n </div>\n</div>\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 * <div ngAccordionGroup [multiExpandable]=\"true\" [(expandedPanels)]=\"expandedItems\">\n * <div class=\"accordion-item\">\n * <h3>\n * <button ngAccordionTrigger panelId=\"item-1\">Item 1</button>\n * </h3>\n * <div ngAccordionPanel panelId=\"item-1\">\n * <ng-template ngAccordionContent>\n * <p>Content for Item 1.</p>\n * </ng-template>\n * </div>\n * </div>\n * <div class=\"accordion-item\">\n * <h3>\n * <button ngAccordionTrigger panelId=\"item-2\">Item 2</button>\n * </h3>\n * <div ngAccordionPanel panelId=\"item-2\">\n * <ng-template ngAccordionContent>\n * <p>Content for Item 2.</p>\n * </ng-template>\n * </div>\n * </div>\n * </div>\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<div ngAccordionPanel panelId=\"unique-id-1\">\n <ng-template ngAccordionContent>\n <p>This is the content that will be displayed inside the panel.</p>\n </ng-template>\n</div>\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 * <div ngAccordionPanel panelId=\"unique-id-1\">\n * <ng-template ngAccordionContent>\n * <p>This is the content that will be displayed inside the panel.</p>\n * </ng-template>\n * </div>\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"

50
adev/src/content/aria/aria-combobox.json
View file

@ -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<div ngCombobox filterMode=\"highlight\">\n <input\n ngComboboxInput\n placeholder=\"Search for a state...\"\n [(value)]=\"searchString\"\n />\n\n <ng-template ngComboboxPopupContainer>\n <div ngListbox [(value)]=\"selectedValue\">",
"jsdocTags": [
{
"name": "for",
"comment": "(option of filteredOptions(); track option) {\n<div ngOption [value]=\"option\" [label]=\"option\">\n<span>{{option}}</span>\n</div>\n}\n</div>\n</ng-template>\n</div>\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 * <div ngCombobox filterMode=\"highlight\">\n * <input\n * ngComboboxInput\n * placeholder=\"Search for a state...\"\n * [(value)]=\"searchString\"\n * />\n *\n * <ng-template ngComboboxPopupContainer>\n * <div ngListbox [(value)]=\"selectedValue\">\n * @for (option of filteredOptions(); track option) {\n * <div ngOption [value]=\"option\" [label]=\"option\">\n * <span>{{option}}</span>\n * </div>\n * }\n * </div>\n * </ng-template>\n * </div>\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 `<input>` element within an `ngCombobox`\ncontainer. It automatically handles keyboard interactions, such as opening the\npopup and navigating through the options.\n\n```html\n<input\n ngComboboxInput\n placeholder=\"Search...\"\n [(value)]=\"searchString\"\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 `<input>` 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 * <input\n * ngComboboxInput\n * placeholder=\"Search...\"\n * [(value)]=\"searchString\"\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<ng-template ngComboboxPopupContainer>\n <div ngListbox [(value)]=\"selectedValue\">\n <!-- ... options ... -->\n </div>\n</ng-template>\n```\n\nWhen using CdkOverlay, this directive can be replaced by `cdkConnectedOverlay`.\n\n```html\n<ng-template\n [cdkConnectedOverlay]=\"{origin: inputElement, usePopover: 'inline' matchWidth: true}\"\n [cdkConnectedOverlayOpen]=\"combobox.expanded()\">\n <div ngListbox [(value)]=\"selectedValue\">\n <!-- ... options ... -->\n </div>\n</ng-template>\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 * <ng-template ngComboboxPopupContainer>\n * <div ngListbox [(value)]=\"selectedValue\">\n * <!-- ... options ... -->\n * </div>\n * </ng-template>\n * ```\n *\n * When using CdkOverlay, this directive can be replaced by `cdkConnectedOverlay`.\n *\n * ```html\n * <ng-template\n * [cdkConnectedOverlay]=\"{origin: inputElement, usePopover: 'inline' matchWidth: true}\"\n * [cdkConnectedOverlayOpen]=\"combobox.expanded()\">\n * <div ngListbox [(value)]=\"selectedValue\">\n * <!-- ... options ... -->\n * </div>\n * </ng-template>\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 `<dialog>` 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<ng-template ngComboboxPopupContainer>\n <dialog ngComboboxDialog class=\"example-dialog\">\n <!-- ... dialog content ... -->\n </dialog>\n</ng-template>\n```",
"jsdocTags": [
{
"name": "developerPreview",
"comment": "21.0"
}
],
"rawComment": "/**\n * @developerPreview 21.0\n */",
"rawComment": "/**\n * Integrates a native `<dialog>` 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 * <ng-template ngComboboxPopupContainer>\n * <dialog ngComboboxDialog class=\"example-dialog\">\n * <!-- ... dialog content ... -->\n * </dialog>\n * </ng-template>\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
}
}
],

338
adev/src/content/aria/aria-grid.json
View file

@ -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<table ngGrid [multi]=\"true\" [enableSelection]=\"true\">",
"jsdocTags": [
{
"name": "for",
"comment": "(row of gridData; track row) {\n<tr ngGridRow>"
},
{
"name": "for",
"comment": "(cell of row; track cell) {\n <td ngGridCell [disabled]=\"cell.disabled\">\n {{cell.value}}\n </td>\n}\n</tr>\n}\n</table>\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 * <table ngGrid [multi]=\"true\" [enableSelection]=\"true\">\n * @for (row of gridData; track row) {\n * <tr ngGridRow>\n * @for (cell of row; track cell) {\n * <td ngGridCell [disabled]=\"cell.disabled\">\n * {{cell.value}}\n * </td>\n * }\n * </tr>\n * }\n * </table>\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<tr ngGridRow>\n <!-- ... cells ... -->\n</tr>\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 * <tr ngGridRow>\n * <!-- ... cells ... -->\n * </tr>\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<td ngGridCell [disabled]=\"isDisabled\" [(selected)]=\"isSelected\">\n Cell Content\n</td>\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 * <td ngGridCell [disabled]=\"isDisabled\" [(selected)]=\"isSelected\">\n * Cell Content\n * </td>\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<boolean>",
"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<td ngGridCell>\n <button ngGridCellWidget>Click Me</button>\n</td>\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 * <td ngGridCell>\n * <button ngGridCellWidget>Click Me</button>\n * </td>\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"
]
]

37
adev/src/content/aria/aria-listbox.json
View file

@ -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<ul ngListbox>\n <li [value]=\"1\" ngOption>Item 1</li>\n <li [value]=\"2\" ngOption>Item 2</li>\n <li [value]=\"3\" ngOption>Item 3</li>\n</ul>\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<ul ngListbox [(value)]=\"selectedItems\" [multi]=\"true\" orientation=\"vertical\">",
"jsdocTags": [
{
"name": "for",
"comment": "(item of items; track item.id) {\n<li ngOption [value]=\"item.id\" [label]=\"item.name\" [disabled]=\"item.disabled\">\n{{item.name}}\n</li>\n}\n</ul>\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 * <ul ngListbox>\n * <li [value]=\"1\" ngOption>Item 1</li>\n * <li [value]=\"2\" ngOption>Item 2</li>\n * <li [value]=\"3\" ngOption>Item 3</li>\n * </ul>\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 * <ul ngListbox [(value)]=\"selectedItems\" [multi]=\"true\" orientation=\"vertical\">\n * @for (item of items; track item.id) {\n * <li ngOption [value]=\"item.id\" [label]=\"item.name\" [disabled]=\"item.disabled\">\n * {{item.name}}\n * </li>\n * }\n * </ul>\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., `<li>`, `<div>`) 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<li ngOption value=\"item-id\" label=\"Item Name\">\n Item Name\n</li>\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., `<li>`, `<div>`) 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 * <li ngOption value=\"item-id\" label=\"Item Name\">\n * Item Name\n * </li>\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
}
}
],

48
adev/src/content/aria/aria-menu.json
View file

@ -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<button ngMenuTrigger [menu]=\"myMenu\">Open Menu</button>\n\n<div ngMenu #myMenu=\"ngMenu\">\n <div ngMenuItem>Item 1</div>\n <div ngMenuItem>Item 2</div>\n</div>\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 * <button ngMenuTrigger [menu]=\"myMenu\">Open Menu</button>\n *\n * <div ngMenu #myMenu=\"ngMenu\">\n * <div ngMenuItem>Item 1</div>\n * <div ngMenuItem>Item 2</div>\n * </div>\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<button ngMenuTrigger menu=\"menu\">Options</button>\n\n<div ngMenu #menu=\"ngMenu\">\n <div ngMenuItem>Star</div>\n <div ngMenuItem>Edit</div>\n <div ngMenuItem>Delete</div>\n</div>\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<button ngMenuTrigger [menu]=\"myMenu\">Options</button>\n\n<div ngMenu #myMenu=\"ngMenu\">\n <div ngMenuItem>Star</div>\n <div ngMenuItem>Edit</div>\n <div ngMenuItem [submenu]=\"subMenu\">More</div>\n</div>\n\n<div ngMenu #subMenu=\"ngMenu\">\n <div ngMenuItem>Sub Item 1</div>\n <div ngMenuItem>Sub Item 2</div>\n</div>\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 * <button ngMenuTrigger menu=\"menu\">Options</button>\n *\n * <div ngMenu #menu=\"ngMenu\">\n * <div ngMenuItem>Star</div>\n * <div ngMenuItem>Edit</div>\n * <div ngMenuItem>Delete</div>\n * </div>\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 * <button ngMenuTrigger [menu]=\"myMenu\">Options</button>\n *\n * <div ngMenu #myMenu=\"ngMenu\">\n * <div ngMenuItem>Star</div>\n * <div ngMenuItem>Edit</div>\n * <div ngMenuItem [submenu]=\"subMenu\">More</div>\n * </div>\n *\n * <div ngMenu #subMenu=\"ngMenu\">\n * <div ngMenuItem>Sub Item 1</div>\n * <div ngMenuItem>Sub Item 2</div>\n * </div>\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<div ngMenuBar>\n <button ngMenuTrigger [menu]=\"fileMenu\">File</button>\n <button ngMenuTrigger [menu]=\"editMenu\">Edit</button>\n</div>\n\n<div ngMenu #fileMenu=\"ngMenu\">\n <div ngMenuItem>New</div>\n <div ngMenuItem>Open</div>\n</div>\n\n<div ngMenu #editMenu=\"ngMenu\">\n <div ngMenuItem>Cut</div>\n <div ngMenuItem>Copy</div>\n</div>\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 * <div ngMenuBar>\n * <button ngMenuTrigger [menu]=\"fileMenu\">File</button>\n * <button ngMenuTrigger [menu]=\"editMenu\">Edit</button>\n * </div>\n *\n * <div ngMenu #fileMenu=\"ngMenu\">\n * <div ngMenuItem>New</div>\n * <div ngMenuItem>Open</div>\n * </div>\n *\n * <div ngMenu #editMenu=\"ngMenu\">\n * <div ngMenuItem>Cut</div>\n * <div ngMenuItem>Copy</div>\n * </div>\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<div ngMenuItem (onSelect)=\"doAction()\">Action Item</div>\n\n<div ngMenuItem [submenu]=\"anotherMenu\">Submenu Trigger</div>\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 * <div ngMenuItem (onSelect)=\"doAction()\">Action Item</div>\n *\n * <div ngMenuItem [submenu]=\"anotherMenu\">Submenu Trigger</div>\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<div ngMenu #myMenu=\"ngMenu\">\n <ng-template ngMenuContent>\n <div ngMenuItem>Lazy Item 1</div>\n <div ngMenuItem>Lazy Item 2</div>\n </ng-template>\n</div>\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 * <div ngMenu #myMenu=\"ngMenu\">\n * <ng-template ngMenuContent>\n * <div ngMenuItem>Lazy Item 1</div>\n * <div ngMenuItem>Lazy Item 2</div>\n * </ng-template>\n * </div>\n * ```\n *\n * @developerPreview 21.0\n */",
"implements": [],
"source": {
"filePath": "/src/aria/menu/menu.ts",
"startLine": 451,
"endLine": 456
"startLine": 499,
"endLine": 504
}
}
],

269
adev/src/content/aria/aria-tabs.json
View file

@ -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<div ngTabs>\n <ul ngTabList>\n <li ngTab value=\"tab1\">Tab 1</li>\n <li ngTab value=\"tab2\">Tab 2</li>\n <li ngTab value=\"tab3\">Tab 3</li>\n </ul>\n\n <div ngTabPanel value=\"tab1\">\n <ng-template ngTabContent>Tab content 1</ng-template>\n </div>\n <div ngTabPanel value=\"tab2\">\n <ng-template ngTabContent>Tab content 2</ng-template>\n </div>\n <div ngTabPanel value=\"tab3\">\n <ng-template ngTabContent>Tab content 3</ng-template>\n </div>\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<div ngTabs>\n <ul ngTabList [(selectedTab)]=\"selectedTabValue\">\n <li ngTab value=\"tab1\">Tab 1</li>\n <li ngTab value=\"tab2\">Tab 2</li>\n <li ngTab value=\"tab3\">Tab 3</li>\n </ul>\n\n <div ngTabPanel value=\"tab1\">\n <ng-template ngTabContent>Content for Tab 1</ng-template>\n </div>\n <div ngTabPanel value=\"tab2\">\n <ng-template ngTabContent>Content for Tab 2</ng-template>\n </div>\n <div ngTabPanel value=\"tab3\">\n <ng-template ngTabContent>Content for Tab 3</ng-template>\n </div>\n</div>\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 * <div ngTabs>\n * <ul ngTabList>\n * <li ngTab value=\"tab1\">Tab 1</li>\n * <li ngTab value=\"tab2\">Tab 2</li>\n * <li ngTab value=\"tab3\">Tab 3</li>\n * </ul>\n *\n * <div ngTabPanel value=\"tab1\">\n * <ng-template ngTabContent>Tab content 1</ng-template>\n * </div>\n * <div ngTabPanel value=\"tab2\">\n * <ng-template ngTabContent>Tab content 2</ng-template>\n * </div>\n * <div ngTabPanel value=\"tab3\">\n * <ng-template ngTabContent>Tab content 3</ng-template>\n * </div>\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 * <div ngTabs>\n * <ul ngTabList [(selectedTab)]=\"selectedTabValue\">\n * <li ngTab value=\"tab1\">Tab 1</li>\n * <li ngTab value=\"tab2\">Tab 2</li>\n * <li ngTab value=\"tab3\">Tab 3</li>\n * </ul>\n *\n * <div ngTabPanel value=\"tab1\">\n * <ng-template ngTabContent>Content for Tab 1</ng-template>\n * </div>\n * <div ngTabPanel value=\"tab2\">\n * <ng-template ngTabContent>Content for Tab 2</ng-template>\n * </div>\n * <div ngTabPanel value=\"tab3\">\n * <ng-template ngTabContent>Content for Tab 3</ng-template>\n * </div>\n * </div>\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<ul ngTabList [(selectedTab)]=\"mySelectedTab\" orientation=\"horizontal\" selectionMode=\"explicit\">\n <li ngTab value=\"first\">First Tab</li>\n <li ngTab value=\"second\">Second Tab</li>\n</ul>\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 * <ul ngTabList [(selectedTab)]=\"mySelectedTab\" orientation=\"horizontal\" selectionMode=\"explicit\">\n * <li ngTab value=\"first\">First Tab</li>\n * <li ngTab value=\"second\">Second Tab</li>\n * </ul>\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<li ngTab value=\"myTabId\" [disabled]=\"isTabDisabled\">\n My Tab Label\n</li>\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 * <li ngTab value=\"myTabId\" [disabled]=\"isTabDisabled\">\n * My Tab Label\n * </li>\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<div ngTabPanel value=\"myTabId\">\n <ng-template ngTabContent>\n <!-- Content for the tab panel -->\n </ng-template>\n</div>\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 * <div ngTabPanel value=\"myTabId\">\n * <ng-template ngTabContent>\n * <!-- Content for the tab panel -->\n * </ng-template>\n * </div>\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<div ngTabPanel value=\"myTabId\">\n <ng-template ngTabContent>\n <p>This content will be loaded when 'myTabId' is selected.</p>\n </ng-template>\n</div>\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 * <div ngTabPanel value=\"myTabId\">\n * <ng-template ngTabContent>\n * <p>This content will be loaded when 'myTabId' is selected.</p>\n * </ng-template>\n * </div>\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"

24
adev/src/content/aria/aria-toolbar.json
View file

@ -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<div ngToolbar>\n <button ngToolbarWidget>Button</button>\n <div ngRadioGroup>\n <label ngRadioButton value=\"1\">Option 1</label>\n <label ngRadioButton value=\"2\">Option 2</label>\n <label ngRadioButton value=\"3\">Option 3</label>\n </div>\n</div>\n```",
"description": "A toolbar widget container for a group of interactive widgets, such as\nbuttons or radio groups. It provides a single point of reference for keyboard navigation\nand focus management. It supports various orientations and disabled states.\n\n```html\n<div ngToolbar orientation=\"horizontal\" [wrap]=\"true\">\n <button ngToolbarWidget value=\"save\">Save</button>\n <button ngToolbarWidget value=\"print\">Print</button>\n\n <div ngToolbarWidgetGroup [(value)]=\"selectedAlignment\">\n <button ngToolbarWidget value=\"left\">Left</button>\n <button ngToolbarWidget value=\"center\">Center</button>\n <button ngToolbarWidget value=\"right\">Right</button>\n </div>\n</div>\n```",
"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 * <div ngToolbar>\n * <button ngToolbarWidget>Button</button>\n * <div ngRadioGroup>\n * <label ngRadioButton value=\"1\">Option 1</label>\n * <label ngRadioButton value=\"2\">Option 2</label>\n * <label ngRadioButton value=\"3\">Option 3</label>\n * </div>\n * </div>\n * ```\n *\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 * <div ngToolbar orientation=\"horizontal\" [wrap]=\"true\">\n * <button ngToolbarWidget value=\"save\">Save</button>\n * <button ngToolbarWidget value=\"print\">Print</button>\n *\n * <div ngToolbarWidgetGroup [(value)]=\"selectedAlignment\">\n * <button ngToolbarWidget value=\"left\">Left</button>\n * <button ngToolbarWidget value=\"center\">Center</button>\n * <button ngToolbarWidget value=\"right\">Right</button>\n * </div>\n * </div>\n * ```\n *\n * @developerPreview 21.0\n */",
"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<button ngToolbarWidget value=\"action-id\" [disabled]=\"isDisabled\">\n Perform Action\n</button>\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 * <button ngToolbarWidget value=\"action-id\" [disabled]=\"isDisabled\">\n * Perform Action\n * </button>\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
}
}
],

110
adev/src/content/aria/aria-tree.json
View file

@ -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<ul ngTree [(values)]=\"selectedItems\" [multi]=\"true\">\n <li ngTreeItem [value]=\"'leaf1'\">Leaf Item 1</li>\n <li ngTreeItem [value]=\"'parent1'\">\n Parent Item 1\n <ul ngTreeItemGroup [value]=\"'parent1'\">\n <ng-template ngTreeItemGroupContent>\n <li ngTreeItem [value]=\"'child1.1'\">Child Item 1.1</li>\n <li ngTreeItem [value]=\"'child1.2'\">Child Item 1.2</li>\n </ng-template>\n </ul>\n </li>\n <li ngTreeItem [value]=\"'leaf2'\" [disabled]=\"true\">Disabled Leaf Item 2</li>\n</ul>\n```",
"description": "A container that transforms nested lists into an accessible, ARIA-compliant tree structure.\nIt manages the overall state of the tree, including selection, expansion, and keyboard\nnavigation.\n\n```html\n<ul ngTree [(value)]=\"selectedItems\" [multi]=\"true\">\n <ng-template\n [ngTemplateOutlet]=\"treeNodes\"\n [ngTemplateOutletContext]=\"{nodes: treeData, parent: tree}\"\n />\n</ul>\n\n<ng-template #treeNodes let-nodes=\"nodes\" let-parent=\"parent\">",
"jsdocTags": [
{
"name": "for",
"comment": "(node of nodes; track node.name) {\n<li ngTreeItem [parent]=\"parent\" [value]=\"node.name\" [label]=\"node.name\">\n{{ node.name }}"
},
{
"name": "if",
"comment": "(node.children) {\n <ul role=\"group\">\n <ng-template ngTreeItemGroup [ownedBy]=\"treeItem\" #group=\"ngTreeItemGroup\">\n <ng-template\n [ngTemplateOutlet]=\"treeNodes\"\n [ngTemplateOutletContext]=\"{nodes: node.children, parent: group}\"\n />\n </ng-template>\n </ul>\n}\n</li>\n}\n</ng-template>\n```"
},
{
"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 * <ul ngTree [(values)]=\"selectedItems\" [multi]=\"true\">\n * <li ngTreeItem [value]=\"'leaf1'\">Leaf Item 1</li>\n * <li ngTreeItem [value]=\"'parent1'\">\n * Parent Item 1\n * <ul ngTreeItemGroup [value]=\"'parent1'\">\n * <ng-template ngTreeItemGroupContent>\n * <li ngTreeItem [value]=\"'child1.1'\">Child Item 1.1</li>\n * <li ngTreeItem [value]=\"'child1.2'\">Child Item 1.2</li>\n * </ng-template>\n * </ul>\n * </li>\n * <li ngTreeItem [value]=\"'leaf2'\" [disabled]=\"true\">Disabled Leaf Item 2</li>\n * </ul>\n * ```\n *\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 * <ul ngTree [(value)]=\"selectedItems\" [multi]=\"true\">\n * <ng-template\n * [ngTemplateOutlet]=\"treeNodes\"\n * [ngTemplateOutletContext]=\"{nodes: treeData, parent: tree}\"\n * />\n * </ul>\n *\n * <ng-template #treeNodes let-nodes=\"nodes\" let-parent=\"parent\">\n * @for (node of nodes; track node.name) {\n * <li ngTreeItem [parent]=\"parent\" [value]=\"node.name\" [label]=\"node.name\">\n * {{ node.name }}\n * @if (node.children) {\n * <ul role=\"group\">\n * <ng-template ngTreeItemGroup [ownedBy]=\"treeItem\" #group=\"ngTreeItemGroup\">\n * <ng-template\n * [ngTemplateOutlet]=\"treeNodes\"\n * [ngTemplateOutletContext]=\"{nodes: node.children, parent: group}\"\n * />\n * </ng-template>\n * </ul>\n * }\n * </li>\n * }\n * </ng-template>\n * ```\n *\n * @developerPreview 21.0\n */",
"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<li ngTreeItem [parent]=\"parentTreeOrGroup\" value=\"item-id\" label=\"Item Label\">\n Item Label\n</li>\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 * <li ngTreeItem [parent]=\"parentTreeOrGroup\" value=\"item-id\" label=\"Item Label\">\n * Item Label\n * </li>\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<li ngTreeItem [value]=\"'parent-id'\">\n Parent Item\n <ul role=\"group\">\n <ng-template ngTreeItemGroup [ownedBy]=\"parentTreeItemRef\">\n <li ngTreeItem [value]=\"'child-id'\">Child Item</li>\n </ng-template>\n </ul>\n</li>\n```",
"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 * <li ngTreeItem [value]=\"'parent-id'\">\n * Parent Item\n * <ul role=\"group\">\n * <ng-template ngTreeItemGroup [ownedBy]=\"parentTreeItemRef\">\n * <li ngTreeItem [value]=\"'child-id'\">Child Item</li>\n * </ng-template>\n * </ul>\n * </li>\n * ```\n *\n * @developerPreview 21.0\n */",
"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"