@angular/aria 22.0.0-next.7 → 22.0.0-rc.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (96) hide show
  1. package/fesm2022/_accordion-chunk.mjs +11 -1
  2. package/fesm2022/_accordion-chunk.mjs.map +1 -1
  3. package/fesm2022/_click-event-manager-chunk.mjs +1 -1
  4. package/fesm2022/_deferred-content-chunk.mjs +6 -6
  5. package/fesm2022/_list-chunk.mjs +4 -1
  6. package/fesm2022/_list-chunk.mjs.map +1 -1
  7. package/fesm2022/_list-navigation-chunk.mjs +1 -1
  8. package/fesm2022/_list-typeahead-chunk.mjs +1 -1
  9. package/fesm2022/_menu-chunk.mjs +10 -1
  10. package/fesm2022/_menu-chunk.mjs.map +1 -1
  11. package/fesm2022/{_combobox-listbox-chunk.mjs → _option-chunk.mjs} +13 -50
  12. package/fesm2022/_option-chunk.mjs.map +1 -0
  13. package/fesm2022/_tabs-chunk.mjs +1 -1
  14. package/fesm2022/_toolbar-widget-group-chunk.mjs +10 -1
  15. package/fesm2022/_toolbar-widget-group-chunk.mjs.map +1 -1
  16. package/fesm2022/_transforms-chunk.mjs +8 -0
  17. package/fesm2022/_transforms-chunk.mjs.map +1 -0
  18. package/fesm2022/{_combobox-tree-chunk.mjs → _tree-chunk.mjs} +8 -48
  19. package/fesm2022/_tree-chunk.mjs.map +1 -0
  20. package/fesm2022/{_signal-like-chunk.mjs → _violations-chunk.mjs} +60 -2
  21. package/fesm2022/_violations-chunk.mjs.map +1 -0
  22. package/fesm2022/_widget-chunk.mjs +46 -15
  23. package/fesm2022/_widget-chunk.mjs.map +1 -1
  24. package/fesm2022/accordion.mjs +116 -89
  25. package/fesm2022/accordion.mjs.map +1 -1
  26. package/fesm2022/aria.mjs +1 -1
  27. package/fesm2022/aria.mjs.map +1 -1
  28. package/fesm2022/combobox-testing.mjs +79 -0
  29. package/fesm2022/combobox-testing.mjs.map +1 -0
  30. package/fesm2022/combobox.mjs +273 -307
  31. package/fesm2022/combobox.mjs.map +1 -1
  32. package/fesm2022/grid-testing.mjs +8 -0
  33. package/fesm2022/grid-testing.mjs.map +1 -1
  34. package/fesm2022/grid.mjs +75 -87
  35. package/fesm2022/grid.mjs.map +1 -1
  36. package/fesm2022/listbox-testing.mjs +4 -0
  37. package/fesm2022/listbox-testing.mjs.map +1 -1
  38. package/fesm2022/listbox.mjs +192 -215
  39. package/fesm2022/listbox.mjs.map +1 -1
  40. package/fesm2022/menu-testing.mjs +11 -0
  41. package/fesm2022/menu-testing.mjs.map +1 -1
  42. package/fesm2022/menu.mjs +60 -66
  43. package/fesm2022/menu.mjs.map +1 -1
  44. package/fesm2022/private.mjs +19 -13
  45. package/fesm2022/private.mjs.map +1 -1
  46. package/fesm2022/tabs.mjs +172 -115
  47. package/fesm2022/tabs.mjs.map +1 -1
  48. package/fesm2022/toolbar-testing.mjs +5 -1
  49. package/fesm2022/toolbar-testing.mjs.map +1 -1
  50. package/fesm2022/toolbar.mjs +41 -30
  51. package/fesm2022/toolbar.mjs.map +1 -1
  52. package/fesm2022/tree-testing.mjs +12 -0
  53. package/fesm2022/tree-testing.mjs.map +1 -1
  54. package/fesm2022/tree.mjs +126 -156
  55. package/fesm2022/tree.mjs.map +1 -1
  56. package/package.json +6 -6
  57. package/types/_accordion-chunk.d.ts +4 -2
  58. package/types/_collection-chunk.d.ts +42 -0
  59. package/types/_expansion-chunk.d.ts +1 -1
  60. package/types/_grid-chunk.d.ts +11 -3
  61. package/types/_keyboard-event-manager-chunk.d.ts +1 -1
  62. package/types/_list-chunk.d.ts +1 -1
  63. package/types/_list-navigation-chunk.d.ts +1 -1
  64. package/types/_listbox-chunk.d.ts +1 -1
  65. package/types/_menu-chunk.d.ts +3 -1
  66. package/types/_tabs-chunk.d.ts +1 -1
  67. package/types/_toolbar-chunk.d.ts +3 -1
  68. package/types/_tree-chunk.d.ts +1 -1
  69. package/types/accordion.d.ts +10 -18
  70. package/types/combobox-testing.d.ts +63 -0
  71. package/types/combobox.d.ts +96 -193
  72. package/types/grid-testing.d.ts +4 -0
  73. package/types/grid.d.ts +99 -103
  74. package/types/listbox-testing.d.ts +25 -0
  75. package/types/listbox.d.ts +53 -62
  76. package/types/menu-testing.d.ts +6 -0
  77. package/types/menu.d.ts +17 -23
  78. package/types/private.d.ts +26 -137
  79. package/types/tabs.d.ts +69 -80
  80. package/types/toolbar-testing.d.ts +4 -0
  81. package/types/toolbar.d.ts +6 -12
  82. package/types/tree-testing.d.ts +8 -0
  83. package/types/tree.d.ts +7 -20
  84. package/fesm2022/_combobox-chunk.mjs +0 -478
  85. package/fesm2022/_combobox-chunk.mjs.map +0 -1
  86. package/fesm2022/_combobox-listbox-chunk.mjs.map +0 -1
  87. package/fesm2022/_combobox-tree-chunk.mjs.map +0 -1
  88. package/fesm2022/_element-chunk.mjs +0 -6
  89. package/fesm2022/_element-chunk.mjs.map +0 -1
  90. package/fesm2022/_signal-like-chunk.mjs.map +0 -1
  91. package/fesm2022/simple-combobox.mjs +0 -443
  92. package/fesm2022/simple-combobox.mjs.map +0 -1
  93. package/types/_combobox-chunk.d.ts +0 -224
  94. package/types/_element-chunk.d.ts +0 -10
  95. package/types/_signal-like-chunk.d.ts +0 -14
  96. package/types/simple-combobox.d.ts +0 -124
@@ -15,24 +15,49 @@ interface ListboxHarnessFilters extends BaseHarnessFilters {
15
15
  disabled?: boolean;
16
16
  }
17
17
 
18
+ /** Harness for interacting with a standard ngOption in tests. */
18
19
  declare class ListboxOptionHarness extends ComponentHarness {
19
20
  static hostSelector: string;
21
+ /**
22
+ * Gets a `HarnessPredicate` that can be used to search for an option
23
+ * with specific attributes.
24
+ * @param options Options for filtering which option instances are considered a match.
25
+ * @return a `HarnessPredicate` configured with the given options.
26
+ */
20
27
  static with(options?: ListboxOptionHarnessFilters): HarnessPredicate<ListboxOptionHarness>;
28
+ /** Whether the option is selected. */
21
29
  isSelected(): Promise<boolean>;
30
+ /** Whether the option is disabled. */
22
31
  isDisabled(): Promise<boolean>;
32
+ /** Gets the option's text. */
23
33
  getText(): Promise<string>;
34
+ /** Clicks the option to toggle its selected state. */
24
35
  click(): Promise<void>;
25
36
  }
37
+ /** Harness for interacting with a standard ngListbox in tests. */
26
38
  declare class ListboxHarness extends ComponentHarness {
27
39
  static hostSelector: string;
40
+ /**
41
+ * Gets a `HarnessPredicate` that can be used to search for a listbox
42
+ * with specific attributes.
43
+ * @param options Options for filtering which listbox instances are considered a match.
44
+ * @return a `HarnessPredicate` configured with the given options.
45
+ */
28
46
  static with(options?: ListboxHarnessFilters): HarnessPredicate<ListboxHarness>;
47
+ /** Gets the orientation of the listbox. */
29
48
  getOrientation(): Promise<'vertical' | 'horizontal'>;
49
+ /** Whether the listbox is multiselectable. */
30
50
  isMulti(): Promise<boolean>;
51
+ /** Whether the listbox is disabled. */
31
52
  isDisabled(): Promise<boolean>;
53
+ /** Gets the options inside the listbox. */
32
54
  getOptions(filters?: ListboxOptionHarnessFilters): Promise<ListboxOptionHarness[]>;
55
+ /** Focuses the listbox container. */
33
56
  focus(): Promise<void>;
34
57
  /** Blurs the listbox container. */
35
58
  blur(): Promise<void>;
59
+ /** Gets the ID of the active option. */
60
+ getActiveDescendantId(): Promise<string | null>;
36
61
  }
37
62
 
38
63
  export { ListboxHarness, ListboxOptionHarness };
@@ -1,16 +1,57 @@
1
1
  import * as _angular_cdk_bidi from '@angular/cdk/bidi';
2
2
  import * as _angular_core from '@angular/core';
3
- import { Signal } from '@angular/core';
3
+ import { OnInit, OnDestroy, Signal } from '@angular/core';
4
4
  import { OptionPattern, ListboxPattern } from './_listbox-chunk.js';
5
- import { ComboboxPopup } from './combobox.js';
6
- export { Combobox as ɵɵCombobox, ComboboxDialog as ɵɵComboboxDialog, ComboboxInput as ɵɵComboboxInput, ComboboxPopupContainer as ɵɵComboboxPopupContainer } from './combobox.js';
7
- import './_signal-like-chunk.js';
5
+ import { SortedCollection } from './_collection-chunk.js';
8
6
  import './_list-chunk.js';
9
7
  import './_list-navigation-chunk.js';
10
8
  import './_keyboard-event-manager-chunk.js';
11
9
  import './_click-event-manager-chunk.js';
12
- import './_combobox-chunk.js';
13
- import './_deferred-content-chunk.js';
10
+
11
+ /**
12
+ * A selectable option in an `ngListbox`.
13
+ *
14
+ * This directive should be applied to an element (e.g., `<li>`, `<div>`) within an
15
+ * `ngListbox`. The `value` input is used to identify the option, and the `label` input provides
16
+ * the accessible name for the option.
17
+ *
18
+ * ```html
19
+ * <li ngOption value="item-id" label="Item Name">
20
+ * Item Name
21
+ * </li>
22
+ * ```
23
+ *
24
+ * @see [Listbox](guide/aria/listbox)
25
+ * @see [Autocomplete](guide/aria/autocomplete)
26
+ * @see [Select](guide/aria/select)
27
+ * @see [Multiselect](guide/aria/multiselect)
28
+ */
29
+ declare class Option<V> implements OnInit, OnDestroy {
30
+ /** A reference to the host element. */
31
+ readonly element: HTMLElement;
32
+ /** Whether the option is currently active (focused). */
33
+ readonly active: _angular_core.Signal<boolean>;
34
+ /** The parent Listbox. */
35
+ private readonly _listbox;
36
+ /** A unique identifier for the option. */
37
+ readonly id: _angular_core.InputSignal<string>;
38
+ /** The parent Listbox UIPattern. */
39
+ private readonly _listboxPattern;
40
+ /** The value of the option. */
41
+ readonly value: _angular_core.InputSignal<V>;
42
+ /** Whether an item is disabled. */
43
+ readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
44
+ /** The text used by the typeahead search. */
45
+ readonly label: _angular_core.InputSignal<string | undefined>;
46
+ /** Whether the option is selected. */
47
+ readonly selected: _angular_core.Signal<boolean | undefined>;
48
+ /** The Option UIPattern. */
49
+ readonly _pattern: OptionPattern<V>;
50
+ ngOnInit(): void;
51
+ ngOnDestroy(): void;
52
+ static ɵfac: _angular_core.ɵɵFactoryDeclaration<Option<any>, never>;
53
+ static ɵdir: _angular_core.ɵɵDirectiveDeclaration<Option<any>, "[ngOption]", ["ngOption"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; "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>;
54
+ }
14
55
 
15
56
  /**
16
57
  * Represents a container used to display a list of items for a user to select from.
@@ -29,28 +70,22 @@ import './_deferred-content-chunk.js';
29
70
  * </ul>
30
71
  * ```
31
72
  *
32
- * @developerPreview 21.0
33
- *
34
73
  * @see [Listbox](guide/aria/listbox)
35
74
  * @see [Autocomplete](guide/aria/autocomplete)
36
75
  * @see [Select](guide/aria/select)
37
76
  * @see [Multiselect](guide/aria/multiselect)
38
77
  */
39
- declare class Listbox<V> {
78
+ declare class Listbox<V> implements OnDestroy {
40
79
  /** A unique identifier for the listbox. */
41
80
  readonly id: _angular_core.InputSignal<string>;
42
- /** A reference to the parent combobox popup, if one exists. */
43
- private readonly _popup;
44
81
  /** A reference to the host element. */
45
82
  private readonly _elementRef;
46
83
  /** A reference to the host element. */
47
84
  readonly element: HTMLElement;
48
- /** The Options nested inside of the Listbox. */
49
- private readonly _options;
85
+ /** The collection of Options. */
86
+ readonly _collection: SortedCollection<Option<V>>;
50
87
  /** A signal wrapper for directionality. */
51
88
  protected readonly textDirection: Signal<_angular_cdk_bidi.Direction>;
52
- /** The Option UIPatterns of the child Options. */
53
- protected readonly items: Signal<OptionPattern<V>[]>;
54
89
  /** Whether the list is vertically or horizontally oriented. */
55
90
  readonly orientation: _angular_core.InputSignal<"vertical" | "horizontal">;
56
91
  /** Whether multiple items in the list can be selected at once. */
@@ -89,56 +124,12 @@ declare class Listbox<V> {
89
124
  /** The ID of the active descendant in the listbox. */
90
125
  readonly activeDescendant: Signal<string | undefined>;
91
126
  constructor();
127
+ ngOnDestroy(): void;
92
128
  scrollActiveItemIntoView(options?: ScrollIntoViewOptions): void;
93
129
  /** Navigates to the first item in the listbox. */
94
130
  gotoFirst(): void;
95
131
  static ɵfac: _angular_core.ɵɵFactoryDeclaration<Listbox<any>, never>;
96
- static ɵdir: _angular_core.ɵɵDirectiveDeclaration<Listbox<any>, "[ngListbox]", ["ngListbox"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "multi": { "alias": "multi"; "required": false; "isSignal": true; }; "wrap": { "alias": "wrap"; "required": false; "isSignal": true; }; "softDisabled": { "alias": "softDisabled"; "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; }; "tabIndex": { "alias": "tabIndex"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, ["_options"], never, true, [{ directive: typeof ComboboxPopup; inputs: {}; outputs: {}; }]>;
97
- }
98
-
99
- /**
100
- * A selectable option in an `ngListbox`.
101
- *
102
- * This directive should be applied to an element (e.g., `<li>`, `<div>`) within an
103
- * `ngListbox`. The `value` input is used to identify the option, and the `label` input provides
104
- * the accessible name for the option.
105
- *
106
- * ```html
107
- * <li ngOption value="item-id" label="Item Name">
108
- * Item Name
109
- * </li>
110
- * ```
111
- *
112
- * @developerPreview 21.0
113
- *
114
- * @see [Listbox](guide/aria/listbox)
115
- * @see [Autocomplete](guide/aria/autocomplete)
116
- * @see [Select](guide/aria/select)
117
- * @see [Multiselect](guide/aria/multiselect)
118
- */
119
- declare class Option<V> {
120
- /** A reference to the host element. */
121
- readonly element: HTMLElement;
122
- /** Whether the option is currently active (focused). */
123
- readonly active: _angular_core.Signal<boolean>;
124
- /** The parent Listbox. */
125
- private readonly _listbox;
126
- /** A unique identifier for the option. */
127
- readonly id: _angular_core.InputSignal<string>;
128
- /** The parent Listbox UIPattern. */
129
- private readonly _listboxPattern;
130
- /** The value of the option. */
131
- readonly value: _angular_core.InputSignal<V>;
132
- /** Whether an item is disabled. */
133
- readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
134
- /** The text used by the typeahead search. */
135
- readonly label: _angular_core.InputSignal<string | undefined>;
136
- /** Whether the option is selected. */
137
- readonly selected: _angular_core.Signal<boolean | undefined>;
138
- /** The Option UIPattern. */
139
- readonly _pattern: OptionPattern<V>;
140
- static ɵfac: _angular_core.ɵɵFactoryDeclaration<Option<any>, never>;
141
- static ɵdir: _angular_core.ɵɵDirectiveDeclaration<Option<any>, "[ngOption]", ["ngOption"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; "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>;
132
+ static ɵdir: _angular_core.ɵɵDirectiveDeclaration<Listbox<any>, "[ngListbox]", ["ngListbox"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "multi": { "alias": "multi"; "required": false; "isSignal": true; }; "wrap": { "alias": "wrap"; "required": false; "isSignal": true; }; "softDisabled": { "alias": "softDisabled"; "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; }; "tabIndex": { "alias": "tabindex"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
142
133
  }
143
134
 
144
- export { Listbox, Option, ComboboxPopup as ɵɵComboboxPopup };
135
+ export { Listbox, Option };
@@ -29,6 +29,10 @@ declare class MenuItemHarness extends ComponentHarness {
29
29
  click(): Promise<void>;
30
30
  /** Resolves the nested submenu panel associated with this menu item, if any exists. */
31
31
  getSubmenu(): Promise<MenuHarness | null>;
32
+ /** Whether the menu item has focus. */
33
+ isFocused(): Promise<boolean>;
34
+ /** Whether the menu item acts as a submenu trigger. */
35
+ hasSubmenu(): Promise<boolean>;
32
36
  }
33
37
  /** Harness for interacting with a standard ngMenu or ngMenuBar in tests. */
34
38
  declare class MenuHarness extends ComponentHarness {
@@ -38,6 +42,8 @@ declare class MenuHarness extends ComponentHarness {
38
42
  _getTrigger(): Promise<TestElement | null>;
39
43
  /** Checks whether the menu container is visible. */
40
44
  isOpen(): Promise<boolean>;
45
+ /** Whether the menu is a menu bar. */
46
+ isMenuBar(): Promise<boolean>;
41
47
  /** Opens the menu if it is currently closed. */
42
48
  open(): Promise<void>;
43
49
  /** Closes the menu if it is currently open. */
package/types/menu.d.ts CHANGED
@@ -1,9 +1,9 @@
1
1
  import * as _angular_core from '@angular/core';
2
- import { Signal } from '@angular/core';
2
+ import { OnDestroy, OnInit, Signal } from '@angular/core';
3
3
  import * as _angular_cdk_bidi from '@angular/cdk/bidi';
4
4
  import { MenuBarPattern, MenuItemPattern, MenuPattern, MenuTriggerPattern } from './_menu-chunk.js';
5
5
  import { DeferredContentAware, DeferredContent } from './_deferred-content-chunk.js';
6
- import { SignalLike } from './_signal-like-chunk.js';
6
+ import { SortedCollection, SignalLike } from './_collection-chunk.js';
7
7
  import './_keyboard-event-manager-chunk.js';
8
8
  import './_list-chunk.js';
9
9
  import './_list-navigation-chunk.js';
@@ -32,14 +32,12 @@ import './_list-navigation-chunk.js';
32
32
  * </div>
33
33
  * ```
34
34
  *
35
- * @developerPreview 21.0
36
- *
37
35
  * @see [Menu](guide/aria/menu)
38
36
  * @see [MenuBar](guide/aria/menubar)
39
37
  */
40
- declare class MenuBar<V> {
41
- /** The menu items contained in the menubar. */
42
- readonly _allItems: _angular_core.Signal<readonly MenuItem<V>[]>;
38
+ declare class MenuBar<V> implements OnDestroy {
39
+ /** The collection of menu items. */
40
+ readonly _collection: SortedCollection<MenuItem<V>>;
43
41
  readonly _items: SignalLike<MenuItem<V>[]>;
44
42
  /** A reference to the host element. */
45
43
  private readonly _elementRef;
@@ -64,10 +62,11 @@ declare class MenuBar<V> {
64
62
  /** A callback function triggered when a menu item is selected. */
65
63
  readonly itemSelected: _angular_core.OutputEmitterRef<V>;
66
64
  constructor();
65
+ ngOnDestroy(): void;
67
66
  /** Closes the menubar. */
68
67
  close(): void;
69
68
  static ɵfac: _angular_core.ɵɵFactoryDeclaration<MenuBar<any>, never>;
70
- static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MenuBar<any>, "[ngMenuBar]", ["ngMenuBar"], { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "softDisabled": { "alias": "softDisabled"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "wrap": { "alias": "wrap"; "required": false; "isSignal": true; }; "typeaheadDelay": { "alias": "typeaheadDelay"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "itemSelected": "itemSelected"; }, ["_allItems"], never, true, never>;
69
+ static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MenuBar<any>, "[ngMenuBar]", ["ngMenuBar"], { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "softDisabled": { "alias": "softDisabled"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "wrap": { "alias": "wrap"; "required": false; "isSignal": true; }; "typeaheadDelay": { "alias": "typeaheadDelay"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "itemSelected": "itemSelected"; }, never, never, true, never>;
71
70
  }
72
71
 
73
72
  /**
@@ -78,24 +77,22 @@ declare class MenuBar<V> {
78
77
  *
79
78
  * ```html
80
79
  * <div ngMenu (itemSelected)="doAction()">
81
- * <div ngMenuItem >Action Item</div>
80
+ * <div ngMenuItem>Action Item</div>
82
81
  * <div ngMenuItem [submenu]="anotherMenu">Submenu Trigger</div>
83
82
  * </div>
84
83
  * ```
85
84
  *
86
- * @developerPreview 21.0
87
- *
88
85
  * @see [Menu](guide/aria/menu)
89
86
  * @see [MenuBar](guide/aria/menubar)
90
87
  */
91
- declare class MenuItem<V> {
88
+ declare class MenuItem<V> implements OnInit, OnDestroy {
92
89
  /** A reference to the host element. */
93
90
  private readonly _elementRef;
94
91
  /** A reference to the host element. */
95
92
  readonly element: HTMLElement;
96
93
  /** The unique ID of the menu item. */
97
94
  readonly id: _angular_core.InputSignal<string>;
98
- /** The value of the menu item, used as the default aria-label */
95
+ /** The value of the menu item. */
99
96
  readonly value: _angular_core.InputSignal<V>;
100
97
  /** Whether the menu item is disabled. */
101
98
  readonly disabled: _angular_core.InputSignal<boolean>;
@@ -114,6 +111,8 @@ declare class MenuItem<V> {
114
111
  /** The menu item ui pattern instance. */
115
112
  readonly _pattern: MenuItemPattern<V>;
116
113
  constructor();
114
+ ngOnInit(): void;
115
+ ngOnDestroy(): void;
117
116
  /** Opens the submenu focusing on the first menu item. */
118
117
  open(): void;
119
118
  /** Closes the submenu. */
@@ -144,16 +143,14 @@ declare class MenuItem<V> {
144
143
  * </div>
145
144
  * ```
146
145
  *
147
- * @developerPreview 21.0
148
- *
149
146
  * @see [Menu](guide/aria/menu)
150
147
  * @see [MenuBar](guide/aria/menubar)
151
148
  */
152
- declare class Menu<V> {
149
+ declare class Menu<V> implements OnDestroy {
153
150
  /** The DeferredContentAware host directive. */
154
151
  private readonly _deferredContentAware;
155
- /** The menu items contained in the menu. */
156
- readonly _allItems: Signal<readonly MenuItem<V>[]>;
152
+ /** The collection of menu items. */
153
+ readonly _collection: SortedCollection<MenuItem<V>>;
157
154
  /** The menu items that are direct children of this menu. */
158
155
  readonly _items: Signal<MenuItem<V>[]>;
159
156
  /** A reference to the host element. */
@@ -194,10 +191,11 @@ declare class Menu<V> {
194
191
  /** The delay in milliseconds before expanding sub-menus on hover. */
195
192
  readonly expansionDelay: _angular_core.InputSignal<number>;
196
193
  constructor();
194
+ ngOnDestroy(): void;
197
195
  /** Closes the menu. */
198
196
  close(): void;
199
197
  static ɵfac: _angular_core.ɵɵFactoryDeclaration<Menu<any>, never>;
200
- static ɵdir: _angular_core.ɵɵDirectiveDeclaration<Menu<any>, "[ngMenu]", ["ngMenu"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; "wrap": { "alias": "wrap"; "required": false; "isSignal": true; }; "typeaheadDelay": { "alias": "typeaheadDelay"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "expansionDelay": { "alias": "expansionDelay"; "required": false; "isSignal": true; }; }, { "itemSelected": "itemSelected"; }, ["_allItems"], never, true, [{ directive: typeof DeferredContentAware; inputs: { "preserveContent": "preserveContent"; }; outputs: {}; }]>;
198
+ static ɵdir: _angular_core.ɵɵDirectiveDeclaration<Menu<any>, "[ngMenu]", ["ngMenu"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; "wrap": { "alias": "wrap"; "required": false; "isSignal": true; }; "typeaheadDelay": { "alias": "typeaheadDelay"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "expansionDelay": { "alias": "expansionDelay"; "required": false; "isSignal": true; }; }, { "itemSelected": "itemSelected"; }, never, never, true, [{ directive: typeof DeferredContentAware; inputs: { "preserveContent": "preserveContent"; }; outputs: {}; }]>;
201
199
  }
202
200
 
203
201
  /**
@@ -216,8 +214,6 @@ declare class Menu<V> {
216
214
  * </div>
217
215
  * ```
218
216
  *
219
- * @developerPreview 21.0
220
- *
221
217
  * @see [Menu](guide/aria/menu)
222
218
  * @see [MenuBar](guide/aria/menubar)
223
219
  */
@@ -264,8 +260,6 @@ declare class MenuTrigger<V> {
264
260
  * </div>
265
261
  * ```
266
262
  *
267
- * @developerPreview 21.0
268
- *
269
263
  * @see [Menu](guide/aria/menu)
270
264
  * @see [MenuBar](guide/aria/menubar)
271
265
  */
@@ -1,18 +1,13 @@
1
- import { ComboboxPattern, ComboboxListboxControls, ComboboxTreeControls } from './_combobox-chunk.js';
2
- export { ComboboxDialogPattern, ComboboxInputs } from './_combobox-chunk.js';
3
- import { ListboxInputs, OptionPattern, ListboxPattern } from './_listbox-chunk.js';
4
- export { OptionInputs } from './_listbox-chunk.js';
5
- import { SignalLike, WritableSignalLike } from './_signal-like-chunk.js';
6
- export { computed, convertGetterSetterToWritableSignalLike, linkedSignal, signal } from './_signal-like-chunk.js';
1
+ export { ListboxInputs, ListboxPattern, OptionInputs, OptionPattern } from './_listbox-chunk.js';
7
2
  export { MenuBarInputs, MenuBarPattern, MenuInputs, MenuItemInputs, MenuItemPattern, MenuPattern, MenuTriggerInputs, MenuTriggerPattern } from './_menu-chunk.js';
3
+ import { SignalLike, WritableSignalLike } from './_collection-chunk.js';
4
+ export { HasElement, SortedCollection, computed, convertGetterSetterToWritableSignalLike, linkedSignal, signal, sortDirectives } from './_collection-chunk.js';
8
5
  export { TabInputs, TabListInputs, TabListPattern, TabPanelInputs, TabPanelPattern, TabPattern } from './_tabs-chunk.js';
9
6
  export { ToolbarInputs, ToolbarPattern, ToolbarWidgetGroupInputs, ToolbarWidgetGroupPattern, ToolbarWidgetInputs, ToolbarWidgetPattern } from './_toolbar-chunk.js';
10
7
  export { AccordionGroupInputs, AccordionGroupPattern, AccordionTriggerInputs, AccordionTriggerPattern } from './_accordion-chunk.js';
11
- import { TreeInputs, TreeItemPattern, TreePattern } from './_tree-chunk.js';
12
- export { TreeItemInputs } from './_tree-chunk.js';
8
+ export { TreeInputs, TreeItemInputs, TreeItemPattern, TreePattern } from './_tree-chunk.js';
13
9
  export { ElementResolver, GridCellInputs, GridCellPattern, GridCellWidgetInputs, GridCellWidgetPattern, GridInputs, GridPattern, GridRowInputs, GridRowPattern, resolveElement } from './_grid-chunk.js';
14
10
  export { DeferredContent, DeferredContentAware } from './_deferred-content-chunk.js';
15
- export { HasElement, sortDirectives } from './_element-chunk.js';
16
11
  import * as _angular_core from '@angular/core';
17
12
  import { KeyboardEventManager } from './_keyboard-event-manager-chunk.js';
18
13
  import { ClickEventManager } from './_click-event-manager-chunk.js';
@@ -21,127 +16,17 @@ export { untracked } from '@angular/core/primitives/signals';
21
16
  import './_list-chunk.js';
22
17
  import './_list-navigation-chunk.js';
23
18
 
24
- type ComboboxListboxInputs<V> = ListboxInputs<V> & {
25
- /** The combobox controlling the listbox. */
26
- combobox: SignalLike<ComboboxPattern<OptionPattern<V>, V> | undefined>;
27
- };
28
- declare class ComboboxListboxPattern<V> extends ListboxPattern<V> implements ComboboxListboxControls<OptionPattern<V>, V> {
29
- readonly inputs: ComboboxListboxInputs<V>;
30
- /** A unique identifier for the popup. */
31
- readonly id: SignalLike<string>;
32
- /** The ARIA role for the listbox. */
33
- readonly role: SignalLike<"listbox">;
34
- /** The id of the active (focused) item in the listbox. */
35
- readonly activeId: SignalLike<string | undefined>;
36
- /** The list of options in the listbox. */
37
- readonly items: SignalLike<OptionPattern<V>[]>;
38
- /** The tab index for the listbox. Always -1 because the combobox handles focus. */
39
- tabIndex: SignalLike<-1 | 0>;
40
- /** Whether multiple items in the list can be selected at once. */
41
- multi: SignalLike<boolean>;
42
- constructor(inputs: ComboboxListboxInputs<V>);
43
- /** Noop. The combobox handles keydown events. */
44
- onKeydown(_: KeyboardEvent): void;
45
- /** Noop. The combobox handles pointerdown events. */
46
- onClick(_: PointerEvent): void;
47
- /** Noop. The combobox controls the open state. */
48
- setDefaultState(): void;
49
- /** Navigates to the specified item in the listbox. */
50
- readonly focus: (item: OptionPattern<V>, opts?: {
51
- focusElement?: boolean;
52
- }) => void;
53
- /** Navigates to the previous focusable item in the listbox. */
54
- readonly getActiveItem: () => OptionPattern<V> | undefined;
55
- /** Navigates to the next focusable item in the listbox. */
56
- readonly next: () => void;
57
- /** Navigates to the previous focusable item in the listbox. */
58
- readonly prev: () => void;
59
- /** Navigates to the last focusable item in the listbox. */
60
- readonly last: () => void;
61
- /** Navigates to the first focusable item in the listbox. */
62
- readonly first: () => void;
63
- /** Unfocuses the currently focused item in the listbox. */
64
- readonly unfocus: () => void;
65
- /** Selects the specified item in the listbox. */
66
- readonly select: (item?: OptionPattern<V>) => void;
67
- /** Toggles the selection state of the given item in the listbox. */
68
- readonly toggle: (item?: OptionPattern<V>) => void;
69
- /** Clears the selection in the listbox. */
70
- readonly clearSelection: () => void;
71
- /** Retrieves the OptionPattern associated with a pointer event. */
72
- readonly getItem: (e: PointerEvent) => OptionPattern<V> | undefined;
73
- /** Retrieves the currently selected items in the listbox. */
74
- readonly getSelectedItems: () => OptionPattern<V>[];
75
- /** Sets the value of the combobox listbox. */
76
- readonly setValue: (value: V | undefined) => void;
77
- }
19
+ /**
20
+ * Transform function for tabIndex inputs.
21
+ * Returns undefined if the value is undefined, otherwise converts it to a number.
22
+ */
23
+ declare function tabIndexTransform(v: string | number | undefined): number | undefined;
78
24
 
79
- type ComboboxTreeInputs<V> = TreeInputs<V> & {
80
- /** The combobox controlling the tree. */
81
- combobox: SignalLike<ComboboxPattern<TreeItemPattern<V>, V> | undefined>;
82
- };
83
- declare class ComboboxTreePattern<V> extends TreePattern<V> implements ComboboxTreeControls<TreeItemPattern<V>, V> {
84
- readonly inputs: ComboboxTreeInputs<V>;
85
- /** Toggles to expand or collapse a tree item. */
86
- readonly toggleExpansion: (item?: TreeItemPattern<V>) => void;
87
- /** Whether the currently focused item is collapsible. */
88
- readonly isItemCollapsible: () => boolean;
89
- /** The ARIA role for the tree. */
90
- readonly role: () => "tree";
91
- readonly activeId: SignalLike<string | undefined>;
92
- /** Returns the currently active (focused) item in the tree. */
93
- readonly getActiveItem: () => TreeItemPattern<V> | undefined;
94
- /** The list of items in the tree. */
95
- items: SignalLike<TreeItemPattern<V>[]>;
96
- /** The tab index for the tree. Always -1 because the combobox handles focus. */
97
- readonly tabIndex: SignalLike<-1 | 0>;
98
- constructor(inputs: ComboboxTreeInputs<V>);
99
- /** Noop. The combobox handles keydown events. */
100
- onKeydown(_: KeyboardEvent): void;
101
- /** Noop. The combobox handles click events. */
102
- onClick(_: PointerEvent): void;
103
- /** Noop. The combobox controls the open state. */
104
- setDefaultState(): void;
105
- /** Navigates to the specified item in the tree. */
106
- readonly focus: (item: TreeItemPattern<V>) => void;
107
- /** Navigates to the next focusable item in the tree. */
108
- readonly next: () => void;
109
- /** Navigates to the previous focusable item in the tree. */
110
- readonly prev: () => void;
111
- /** Navigates to the last focusable item in the tree. */
112
- readonly last: () => void;
113
- /** Navigates to the first focusable item in the tree. */
114
- readonly first: () => void;
115
- /** Unfocuses the currently focused item in the tree. */
116
- readonly unfocus: () => void;
117
- /** Selects the specified item in the tree or the current active item if not provided. */
118
- readonly select: (item?: TreeItemPattern<V>) => void;
119
- /** Toggles the selection state of the given item in the tree or the current active item if not provided. */
120
- readonly toggle: (item?: TreeItemPattern<V>) => void;
121
- /** Clears the selection in the tree. */
122
- readonly clearSelection: () => void;
123
- /** Retrieves the TreeItemPattern associated with a pointer event. */
124
- readonly getItem: (e: PointerEvent) => TreeItemPattern<V> | undefined;
125
- /** Retrieves the currently selected items in the tree */
126
- readonly getSelectedItems: () => TreeItemPattern<V>[];
127
- /** Sets the value of the combobox tree. */
128
- readonly setValue: (value: V | undefined) => void;
129
- /** Expands the currently focused item if it is expandable, or navigates to the first child. */
130
- readonly expandItem: () => void;
131
- /** Collapses the currently focused item if it is expandable, or navigates to the parent. */
132
- readonly collapseItem: () => void;
133
- /** Whether the specified item or the currently active item is expandable. */
134
- isItemExpandable(item?: TreeItemPattern<V> | undefined): boolean;
135
- /** Expands all of the tree items. */
136
- readonly expandAll: () => void;
137
- /** Collapses all of the tree items. */
138
- readonly collapseAll: () => void;
139
- /** Whether the currently active item is selectable. */
140
- readonly isItemSelectable: (item?: TreeItemPattern<V> | undefined) => boolean;
141
- }
25
+ /** Logs each of the violations to the console as errors, optionally with the host element context. */
26
+ declare function reportViolations(violations: string[], element: Element): void;
142
27
 
143
28
  /** Represents the required inputs for a simple combobox. */
144
- interface SimpleComboboxInputs extends ExpansionItem {
29
+ interface ComboboxInputs extends ExpansionItem {
145
30
  /** Whether the combobox should always remain expanded. */
146
31
  alwaysExpanded: SignalLike<boolean>;
147
32
  /** The value of the combobox. */
@@ -149,15 +34,17 @@ interface SimpleComboboxInputs extends ExpansionItem {
149
34
  /** The element that the combobox is attached to. */
150
35
  element: SignalLike<HTMLElement>;
151
36
  /** The popup associated with the combobox. */
152
- popup: SignalLike<SimpleComboboxPopupPattern | undefined>;
37
+ popup: SignalLike<ComboboxPopupPattern | undefined>;
153
38
  /** An inline suggestion to be displayed in the input. */
154
39
  inlineSuggestion: SignalLike<string | undefined>;
155
40
  /** Whether the combobox is disabled. */
156
41
  disabled: SignalLike<boolean>;
42
+ /** Whether the combobox is soft disabled. */
43
+ softDisabled?: SignalLike<boolean>;
157
44
  }
158
45
  /** Controls the state of a simple combobox. */
159
- declare class SimpleComboboxPattern {
160
- readonly inputs: SimpleComboboxInputs;
46
+ declare class ComboboxPattern {
47
+ readonly inputs: ComboboxInputs;
161
48
  /** The expanded state of the combobox. */
162
49
  readonly isExpanded: _angular_core.Signal<boolean>;
163
50
  /** The value of the combobox. */
@@ -166,6 +53,8 @@ declare class SimpleComboboxPattern {
166
53
  readonly element: () => HTMLElement;
167
54
  /** Whether the combobox is disabled. */
168
55
  readonly disabled: () => boolean;
56
+ /** Whether the combobox is soft disabled. */
57
+ readonly softDisabled: () => boolean;
169
58
  /** An inline suggestion to be displayed in the input. */
170
59
  readonly inlineSuggestion: () => string | undefined;
171
60
  /** The ID of the active descendant in the popup. */
@@ -188,7 +77,7 @@ declare class SimpleComboboxPattern {
188
77
  keydown: _angular_core.Signal<KeyboardEventManager<KeyboardEvent>>;
189
78
  /** The click event manager for the combobox. */
190
79
  click: _angular_core.Signal<ClickEventManager<PointerEvent>>;
191
- constructor(inputs: SimpleComboboxInputs);
80
+ constructor(inputs: ComboboxInputs);
192
81
  /** Handles keydown events for the combobox. */
193
82
  onKeydown(event: KeyboardEvent): void;
194
83
  /** Handles click events for the combobox. */
@@ -207,7 +96,7 @@ declare class SimpleComboboxPattern {
207
96
  closePopupOnBlurEffect(): void;
208
97
  }
209
98
  /** Represents the required inputs for a simple combobox popup. */
210
- interface SimpleComboboxPopupInputs {
99
+ interface ComboboxPopupInputs {
211
100
  /** The type of the popup. */
212
101
  popupType: SignalLike<'listbox' | 'tree' | 'grid' | 'dialog'>;
213
102
  /** The element that serves as the control target for the popup. */
@@ -218,8 +107,8 @@ interface SimpleComboboxPopupInputs {
218
107
  popupId: SignalLike<string | undefined>;
219
108
  }
220
109
  /** Controls the state of a simple combobox popup. */
221
- declare class SimpleComboboxPopupPattern {
222
- readonly inputs: SimpleComboboxPopupInputs;
110
+ declare class ComboboxPopupPattern {
111
+ readonly inputs: ComboboxPopupInputs;
223
112
  /** The type of the popup. */
224
113
  readonly popupType: () => "listbox" | "tree" | "grid" | "dialog";
225
114
  /** The element that serves as the control target for the popup. */
@@ -230,12 +119,12 @@ declare class SimpleComboboxPopupPattern {
230
119
  readonly popupId: () => string | undefined;
231
120
  /** Whether the popup is focused. */
232
121
  readonly isFocused: _angular_core.WritableSignal<boolean>;
233
- constructor(inputs: SimpleComboboxPopupInputs);
122
+ constructor(inputs: ComboboxPopupInputs);
234
123
  /** Handles focus in events for the popup. */
235
124
  onFocusin(): void;
236
125
  /** Handles focus out events for the popup. */
237
126
  onFocusout(event: FocusEvent): void;
238
127
  }
239
128
 
240
- export { ComboboxListboxControls, ComboboxListboxPattern, ComboboxPattern, ComboboxTreeControls, ComboboxTreePattern, ListboxInputs, ListboxPattern, OptionPattern, SignalLike, SimpleComboboxPattern, SimpleComboboxPopupPattern, TreeInputs, TreeItemPattern, TreePattern, WritableSignalLike };
241
- export type { ComboboxListboxInputs, ComboboxTreeInputs, SimpleComboboxInputs, SimpleComboboxPopupInputs };
129
+ export { ComboboxPattern, ComboboxPopupPattern, SignalLike, WritableSignalLike, reportViolations, tabIndexTransform };
130
+ export type { ComboboxInputs, ComboboxPopupInputs };