@angular/aria 21.0.0-next.9 → 21.0.0-rc.0

package/types/grid.d.ts

@@ -0,0 +1,111 @@
+import * as _angular_core from '@angular/core';
+import { Signal } from '@angular/core';
+import { GridPattern, GridRowPattern, GridCellPattern, GridCellWidgetPattern } from './_grid-chunk.js';
+
+/** A directive that provides grid-based navigation and selection behavior. */
+declare class Grid {
+    /** A reference to the host element. */
+    private readonly _elementRef;
+    /** The rows that make up the grid. */
+    private readonly _rows;
+    /** The UI patterns for the rows in the grid. */
+    private readonly _rowPatterns;
+    /** The host native element. */
+    readonly element: Signal<any>;
+    /** Whether selection is enabled for the grid. */
+    readonly enableSelection: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Whether the grid is disabled. */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Whether to skip disabled items during navigation. */
+    readonly skipDisabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** The focus strategy used by the grid. */
+    readonly focusMode: _angular_core.InputSignal<"roving" | "activedescendant">;
+    /** The wrapping behavior for keyboard navigation along the row axis. */
+    readonly rowWrap: _angular_core.InputSignal<"continuous" | "loop" | "nowrap">;
+    /** The wrapping behavior for keyboard navigation along the column axis. */
+    readonly colWrap: _angular_core.InputSignal<"continuous" | "loop" | "nowrap">;
+    /** The UI pattern for the grid. */
+    readonly _pattern: GridPattern;
+    constructor();
+    /** Gets the cell pattern for a given element. */
+    private _getCell;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Grid, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<Grid, "[ngGrid]", ["ngGrid"], { "enableSelection": { "alias": "enableSelection"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "skipDisabled": { "alias": "skipDisabled"; "required": false; "isSignal": true; }; "focusMode": { "alias": "focusMode"; "required": false; "isSignal": true; }; "rowWrap": { "alias": "rowWrap"; "required": false; "isSignal": true; }; "colWrap": { "alias": "colWrap"; "required": false; "isSignal": true; }; }, {}, ["_rows"], never, true, never>;
+}
+/** A directive that represents a row in a grid. */
+declare class GridRow {
+    /** A reference to the host element. */
+    private readonly _elementRef;
+    /** The cells that make up this row. */
+    private readonly _cells;
+    /** The UI patterns for the cells in this row. */
+    private readonly _cellPatterns;
+    /** The parent grid. */
+    private readonly _grid;
+    /** The parent grid UI pattern. */
+    readonly grid: Signal<GridPattern>;
+    /** The host native element. */
+    readonly element: Signal<any>;
+    /** The ARIA role for the row. */
+    readonly role: _angular_core.InputSignal<"row" | "rowheader">;
+    /** The index of this row within the grid. */
+    readonly rowIndex: _angular_core.InputSignal<number | undefined>;
+    /** The UI pattern for the grid row. */
+    readonly _pattern: GridRowPattern;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<GridRow, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<GridRow, "[ngGridRow]", ["ngGridRow"], { "role": { "alias": "role"; "required": false; "isSignal": true; }; "rowIndex": { "alias": "rowIndex"; "required": false; "isSignal": true; }; }, {}, ["_cells"], never, true, never>;
+}
+/** A directive that represents a cell in a grid. */
+declare class GridCell {
+    /** A reference to the host element. */
+    private readonly _elementRef;
+    /** The widget contained within this cell, if any. */
+    private readonly _widgets;
+    /** The UI pattern for the widget in this cell. */
+    private readonly _widgetPattern;
+    /** The parent row. */
+    private readonly _row;
+    /** A unique identifier for the cell. */
+    private readonly _id;
+    /** The host native element. */
+    readonly element: Signal<any>;
+    /** The ARIA role for the cell. */
+    readonly role: _angular_core.InputSignal<"gridcell" | "columnheader">;
+    /** The number of rows the cell should span. */
+    readonly rowSpan: _angular_core.InputSignal<number>;
+    /** The number of columns the cell should span. */
+    readonly colSpan: _angular_core.InputSignal<number>;
+    /** The index of this cell's row within the grid. */
+    readonly rowIndex: _angular_core.InputSignal<number | undefined>;
+    /** The index of this cell's column within the grid. */
+    readonly colIndex: _angular_core.InputSignal<number | undefined>;
+    /** Whether the cell is disabled. */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Whether the cell is selected. */
+    readonly selected: _angular_core.ModelSignal<boolean>;
+    /** Whether the cell is selectable. */
+    readonly selectable: _angular_core.InputSignal<boolean>;
+    /** The UI pattern for the grid cell. */
+    readonly _pattern: GridCellPattern;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<GridCell, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<GridCell, "[ngGridCell]", ["ngGridCell"], { "role": { "alias": "role"; "required": false; "isSignal": true; }; "rowSpan": { "alias": "rowSpan"; "required": false; "isSignal": true; }; "colSpan": { "alias": "colSpan"; "required": false; "isSignal": true; }; "rowIndex": { "alias": "rowIndex"; "required": false; "isSignal": true; }; "colIndex": { "alias": "colIndex"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "selectable": { "alias": "selectable"; "required": false; "isSignal": true; }; }, { "selected": "selectedChange"; }, ["_widgets"], never, true, never>;
+}
+/** A directive that represents a widget inside a grid cell. */
+declare class GridCellWidget {
+    /** A reference to the host element. */
+    private readonly _elementRef;
+    /** The parent cell. */
+    private readonly _cell;
+    /** The host native element. */
+    readonly element: Signal<any>;
+    /** Whether the widget is activated and the grid navigation should be paused. */
+    readonly activate: _angular_core.ModelSignal<boolean>;
+    /** The UI pattern for the grid cell widget. */
+    readonly _pattern: GridCellWidgetPattern;
+    /** Focuses the widget. */
+    focus(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<GridCellWidget, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<GridCellWidget, "[ngGridCellWidget]", ["ngGridCellWidget"], { "activate": { "alias": "activate"; "required": false; "isSignal": true; }; }, { "activate": "activateChange"; }, never, never, true, never>;
+}
+
+export { Grid, GridCell, GridCellWidget, GridRow };

package/types/listbox.d.ts

@@ -1,6 +1,6 @@
 import * as _angular_cdk_bidi from '@angular/cdk/bidi';
 import * as _angular_core from '@angular/core';
-import { OptionPattern, ListboxPattern } from '@angular/aria/ui-patterns';
+import { OptionPattern, ListboxPattern } from '@angular/aria/private';
 import { ComboboxPopup } from './combobox.js';
 import '@angular/aria/deferred-content';
 
@@ -56,11 +56,12 @@ declare class Listbox<V> {
     /** The values of the current selected items. */
     value: _angular_core.ModelSignal<V[]>;
     /** The Listbox UIPattern. */
-    pattern: ListboxPattern<V>;
+    readonly _pattern: ListboxPattern<V>;
     /** Whether the listbox has received focus yet. */
     private _hasFocused;
     constructor();
     onFocus(): void;
+    scrollActiveItemIntoView(options?: ScrollIntoViewOptions): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<Listbox<any>, never>;
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<Listbox<any>, "[ngListbox]", ["ngListbox"], { "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "multi": { "alias": "multi"; "required": false; "isSignal": true; }; "wrap": { "alias": "wrap"; "required": false; "isSignal": true; }; "skipDisabled": { "alias": "skipDisabled"; "required": false; "isSignal": true; }; "focusMode": { "alias": "focusMode"; "required": false; "isSignal": true; }; "selectionMode": { "alias": "selectionMode"; "required": false; "isSignal": true; }; "typeaheadDelay": { "alias": "typeaheadDelay"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, ["_options"], never, true, [{ directive: typeof ComboboxPopup; inputs: {}; outputs: {}; }]>;
 }
@@ -86,8 +87,10 @@ declare class Option<V> {
     disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /** The text used by the typeahead search. */
     label: _angular_core.InputSignal<string | undefined>;
+    /** Whether the option is selected. */
+    readonly selected: _angular_core.Signal<boolean | undefined>;
     /** The Option UIPattern. */
-    pattern: OptionPattern<V>;
+    readonly _pattern: OptionPattern<V>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<Option<any>, never>;
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<Option<any>, "[ngOption]", ["ngOption"], { "value": { "alias": "value"; "required": true; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }

package/types/menu.d.ts

@@ -0,0 +1,158 @@
+import * as _angular_cdk_bidi from '@angular/cdk/bidi';
+import * as _angular_core from '@angular/core';
+import { Signal } from '@angular/core';
+import { MenuTriggerPattern, MenuPattern, MenuItemPattern, SignalLike, MenuBarPattern } from '@angular/aria/private';
+
+/**
+ * A trigger for a menu.
+ *
+ * The menu trigger is used to open and close menus, and can be placed on menu items to connect
+ * sub-menus.
+ */
+declare class MenuTrigger<V> {
+    /** A reference to the menu trigger element. */
+    private readonly _elementRef;
+    /** A reference to the menu element. */
+    readonly element: HTMLButtonElement;
+    /** The submenu associated with the menu trigger. */
+    submenu: _angular_core.InputSignal<Menu<V> | undefined>;
+    /** A callback function triggered when a menu item is selected. */
+    onSubmit: _angular_core.OutputEmitterRef<V>;
+    /** The menu trigger ui pattern instance. */
+    readonly _pattern: MenuTriggerPattern<V>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MenuTrigger<any>, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MenuTrigger<any>, "button[ngMenuTrigger]", ["ngMenuTrigger"], { "submenu": { "alias": "submenu"; "required": false; "isSignal": true; }; }, { "onSubmit": "onSubmit"; }, never, never, true, never>;
+}
+/**
+ * A list of menu items.
+ *
+ * A menu is used to offer a list of menu item choices to users. Menus can be nested within other
+ * menus to create sub-menus.
+ *
+ * ```html
+ * <button ngMenuTrigger menu="menu">Options</button>
+ *
+ * <div ngMenu #menu="ngMenu">
+ *   <div ngMenuItem>Star</div>
+ *   <div ngMenuItem>Edit</div>
+ *   <div ngMenuItem>Delete</div>
+ * </div>
+ * ```
+ */
+declare class Menu<V> {
+    /** The menu items contained in the menu. */
+    readonly _allItems: Signal<readonly MenuItem<V>[]>;
+    /** The menu items that are direct children of this menu. */
+    readonly _items: Signal<MenuItem<V>[]>;
+    /** A reference to the menu element. */
+    private readonly _elementRef;
+    /** A reference to the menu element. */
+    readonly element: HTMLElement;
+    /** The directionality (LTR / RTL) context for the application (or a subtree of it). */
+    private readonly _directionality;
+    /** A signal wrapper for directionality. */
+    readonly textDirection: Signal<_angular_cdk_bidi.Direction>;
+    /** The submenu associated with the menu. */
+    readonly submenu: _angular_core.InputSignal<Menu<V> | undefined>;
+    /** The unique ID of the menu. */
+    readonly id: _angular_core.InputSignal<string>;
+    /** Whether the menu should wrap its items. */
+    readonly wrap: _angular_core.InputSignal<boolean>;
+    /** The delay in seconds before the typeahead buffer is cleared. */
+    readonly typeaheadDelay: _angular_core.InputSignal<number>;
+    /** A reference to the parent menu item or menu trigger. */
+    readonly parent: _angular_core.InputSignal<MenuItem<V> | MenuTrigger<V> | undefined>;
+    /** The menu ui pattern instance. */
+    readonly _pattern: MenuPattern<V>;
+    /**
+     * The menu items as a writable signal.
+     *
+     * TODO(wagnermaciel): This would normally be a computed, but using a computed causes a bug where
+     * sometimes the items array is empty. The bug can be reproduced by switching this to use a
+     * computed and then quickly opening and closing menus in the dev app.
+     */
+    readonly items: () => MenuItemPattern<V>[];
+    /** Whether the menu is visible. */
+    isVisible: Signal<boolean>;
+    /** A callback function triggered when a menu item is selected. */
+    onSubmit: _angular_core.OutputEmitterRef<V>;
+    constructor();
+    /** Closes the menu. */
+    close(opts?: {
+        refocus?: boolean;
+    }): void;
+    /** Closes all parent menus. */
+    closeAll(opts?: {
+        refocus?: boolean;
+    }): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Menu<any>, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<Menu<any>, "[ngMenu]", ["ngMenu"], { "submenu": { "alias": "submenu"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "wrap": { "alias": "wrap"; "required": false; "isSignal": true; }; "typeaheadDelay": { "alias": "typeaheadDelay"; "required": false; "isSignal": true; }; "parent": { "alias": "parent"; "required": false; "isSignal": true; }; }, { "onSubmit": "onSubmit"; }, ["_allItems"], never, true, never>;
+}
+/**
+ * A menu bar of menu items.
+ *
+ * Like the menu, a menubar is used to offer a list of menu item choices to users. However, a
+ * menubar is used to display a persistent, top-level,
+ * always-visible set of menu item choices.
+ */
+declare class MenuBar<V> {
+    /** The menu items contained in the menubar. */
+    readonly _allItems: Signal<readonly MenuItem<V>[]>;
+    readonly _items: SignalLike<MenuItem<V>[]>;
+    /** A reference to the menu element. */
+    private readonly _elementRef;
+    /** A reference to the menubar element. */
+    readonly element: HTMLElement;
+    /** The directionality (LTR / RTL) context for the application (or a subtree of it). */
+    private readonly _directionality;
+    /** A signal wrapper for directionality. */
+    readonly textDirection: Signal<_angular_cdk_bidi.Direction>;
+    /** The value of the menu. */
+    readonly value: _angular_core.ModelSignal<V[]>;
+    /** Whether the menu should wrap its items. */
+    readonly wrap: _angular_core.InputSignal<boolean>;
+    /** The delay in seconds before the typeahead buffer is cleared. */
+    readonly typeaheadDelay: _angular_core.InputSignal<number>;
+    /** The menu ui pattern instance. */
+    readonly _pattern: MenuBarPattern<V>;
+    /** The menu items as a writable signal. */
+    readonly items: _angular_core.WritableSignal<MenuItemPattern<V>[]>;
+    /** A callback function triggered when a menu item is selected. */
+    onSubmit: _angular_core.OutputEmitterRef<V>;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MenuBar<any>, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MenuBar<any>, "[ngMenuBar]", ["ngMenuBar"], { "value": { "alias": "value"; "required": false; "isSignal": true; }; "wrap": { "alias": "wrap"; "required": false; "isSignal": true; }; "typeaheadDelay": { "alias": "typeaheadDelay"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "onSubmit": "onSubmit"; }, ["_allItems"], never, true, never>;
+}
+/**
+ * An item in a Menu.
+ *
+ * Menu items can be used in menus and menubars to represent a choice or action a user can take.
+ */
+declare class MenuItem<V> {
+    /** A reference to the menu item element. */
+    private readonly _elementRef;
+    /** A reference to the menu element. */
+    readonly element: HTMLElement;
+    /** The unique ID of the menu item. */
+    readonly id: _angular_core.InputSignal<string>;
+    /** The value of the menu item. */
+    readonly value: _angular_core.InputSignal<V>;
+    /** Whether the menu item is disabled. */
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    /** The search term associated with the menu item. */
+    readonly searchTerm: _angular_core.ModelSignal<string>;
+    /** A reference to the parent menu. */
+    private readonly _menu;
+    /** A reference to the parent menu bar. */
+    private readonly _menuBar;
+    /** A reference to the parent menu or menubar. */
+    readonly parent: Menu<V> | MenuBar<V> | null;
+    /** The submenu associated with the menu item. */
+    readonly submenu: _angular_core.InputSignal<Menu<V> | undefined>;
+    /** The menu item ui pattern instance. */
+    readonly _pattern: MenuItemPattern<V>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MenuItem<any>, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MenuItem<any>, "[ngMenuItem]", ["ngMenuItem"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": true; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "searchTerm": { "alias": "searchTerm"; "required": false; "isSignal": true; }; "submenu": { "alias": "submenu"; "required": false; "isSignal": true; }; }, { "searchTerm": "searchTermChange"; }, never, never, true, never>;
+}
+
+export { Menu, MenuBar, MenuItem, MenuTrigger };