@radix-ng/primitives 1.0.0-beta.2 → 1.0.0-beta.4
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.
- package/LICENSE +1 -1
- package/README.md +76 -6
- package/fesm2022/radix-ng-primitives-accordion.mjs +5 -3
- package/fesm2022/radix-ng-primitives-accordion.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-alert-dialog.mjs +31 -24
- package/fesm2022/radix-ng-primitives-alert-dialog.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-autocomplete.mjs +1744 -0
- package/fesm2022/radix-ng-primitives-autocomplete.mjs.map +1 -0
- package/fesm2022/radix-ng-primitives-calendar.mjs +5 -3
- package/fesm2022/radix-ng-primitives-calendar.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-combobox.mjs +1399 -606
- package/fesm2022/radix-ng-primitives-combobox.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-config.mjs +13 -4
- package/fesm2022/radix-ng-primitives-config.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-context-menu.mjs +51 -10
- package/fesm2022/radix-ng-primitives-context-menu.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-core.mjs +1345 -64
- package/fesm2022/radix-ng-primitives-core.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-date-field.mjs +5 -3
- package/fesm2022/radix-ng-primitives-date-field.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-dialog.mjs +271 -145
- package/fesm2022/radix-ng-primitives-dialog.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-direction-provider.mjs +70 -0
- package/fesm2022/radix-ng-primitives-direction-provider.mjs.map +1 -0
- package/fesm2022/radix-ng-primitives-dismissable-layer.mjs +519 -184
- package/fesm2022/radix-ng-primitives-dismissable-layer.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-drawer.mjs +154 -64
- package/fesm2022/radix-ng-primitives-drawer.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-field.mjs +3 -2
- package/fesm2022/radix-ng-primitives-field.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-floating-focus-manager.mjs +517 -0
- package/fesm2022/radix-ng-primitives-floating-focus-manager.mjs.map +1 -0
- package/fesm2022/radix-ng-primitives-focus-scope.mjs +296 -70
- package/fesm2022/radix-ng-primitives-focus-scope.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-menu.mjs +894 -299
- package/fesm2022/radix-ng-primitives-menu.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-menubar.mjs +32 -4
- package/fesm2022/radix-ng-primitives-menubar.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-navigation-menu.mjs +176 -207
- package/fesm2022/radix-ng-primitives-navigation-menu.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-popover.mjs +250 -250
- package/fesm2022/radix-ng-primitives-popover.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-popper.mjs +94 -45
- package/fesm2022/radix-ng-primitives-popper.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-portal.mjs +107 -17
- package/fesm2022/radix-ng-primitives-portal.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-presence.mjs +262 -79
- package/fesm2022/radix-ng-primitives-presence.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-preview-card.mjs +172 -218
- package/fesm2022/radix-ng-primitives-preview-card.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-roving-focus.mjs +4 -2
- package/fesm2022/radix-ng-primitives-roving-focus.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-scroll-area.mjs +5 -4
- package/fesm2022/radix-ng-primitives-scroll-area.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-select.mjs +303 -234
- package/fesm2022/radix-ng-primitives-select.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-slider.mjs +5 -3
- package/fesm2022/radix-ng-primitives-slider.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-stepper.mjs +5 -3
- package/fesm2022/radix-ng-primitives-stepper.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-time-field.mjs +5 -3
- package/fesm2022/radix-ng-primitives-time-field.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-toast.mjs +15 -36
- package/fesm2022/radix-ng-primitives-toast.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-toggle-group.mjs +5 -3
- package/fesm2022/radix-ng-primitives-toggle-group.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-toolbar.mjs +5 -3
- package/fesm2022/radix-ng-primitives-toolbar.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-tooltip.mjs +105 -145
- package/fesm2022/radix-ng-primitives-tooltip.mjs.map +1 -1
- package/package.json +14 -1
- package/types/radix-ng-primitives-accordion.d.ts +4 -3
- package/types/radix-ng-primitives-alert-dialog.d.ts +17 -11
- package/types/radix-ng-primitives-autocomplete.d.ts +661 -0
- package/types/radix-ng-primitives-calendar.d.ts +5 -3
- package/types/radix-ng-primitives-combobox.d.ts +727 -293
- package/types/radix-ng-primitives-config.d.ts +1 -1
- package/types/radix-ng-primitives-context-menu.d.ts +15 -5
- package/types/radix-ng-primitives-core.d.ts +762 -14
- package/types/radix-ng-primitives-date-field.d.ts +3 -2
- package/types/radix-ng-primitives-dialog.d.ts +107 -55
- package/types/radix-ng-primitives-direction-provider.d.ts +41 -0
- package/types/radix-ng-primitives-dismissable-layer.d.ts +147 -99
- package/types/radix-ng-primitives-drawer.d.ts +49 -22
- package/types/radix-ng-primitives-field.d.ts +1 -0
- package/types/radix-ng-primitives-floating-focus-manager.d.ts +175 -0
- package/types/radix-ng-primitives-focus-scope.d.ts +132 -1
- package/types/radix-ng-primitives-menu.d.ts +204 -112
- package/types/radix-ng-primitives-navigation-menu.d.ts +61 -101
- package/types/radix-ng-primitives-popover.d.ts +82 -115
- package/types/radix-ng-primitives-popper.d.ts +46 -10
- package/types/radix-ng-primitives-portal.d.ts +53 -8
- package/types/radix-ng-primitives-presence.d.ts +98 -17
- package/types/radix-ng-primitives-preview-card.d.ts +63 -95
- package/types/radix-ng-primitives-roving-focus.d.ts +7 -6
- package/types/radix-ng-primitives-scroll-area.d.ts +2 -2
- package/types/radix-ng-primitives-select.d.ts +192 -158
- package/types/radix-ng-primitives-slider.d.ts +5 -4
- package/types/radix-ng-primitives-stepper.d.ts +4 -3
- package/types/radix-ng-primitives-time-field.d.ts +3 -2
- package/types/radix-ng-primitives-toast.d.ts +7 -7
- package/types/radix-ng-primitives-toggle-group.d.ts +5 -4
- package/types/radix-ng-primitives-toolbar.d.ts +3 -2
- package/types/radix-ng-primitives-tooltip.d.ts +48 -84
|
@@ -1,14 +1,15 @@
|
|
|
1
1
|
import * as _angular_core from '@angular/core';
|
|
2
|
-
import { Signal,
|
|
2
|
+
import { Signal, Injector } from '@angular/core';
|
|
3
3
|
import * as i1 from '@radix-ng/primitives/popper';
|
|
4
|
+
import { RdxPopperContentWrapper } from '@radix-ng/primitives/popper';
|
|
4
5
|
import * as _radix_ng_primitives_core from '@radix-ng/primitives/core';
|
|
5
|
-
import { AcceptableValue, Direction, ItemValueComparator,
|
|
6
|
+
import { AcceptableValue, RdxFloatingRootContext, Direction, BooleanInput, ItemValueComparator, RdxCancelableChangeEventDetails } from '@radix-ng/primitives/core';
|
|
6
7
|
import { ControlValueAccessor } from '@angular/forms';
|
|
7
8
|
import * as _radix_ng_primitives_combobox from '@radix-ng/primitives/combobox';
|
|
8
9
|
import * as i1$1 from '@radix-ng/primitives/dismissable-layer';
|
|
9
10
|
import * as _radix_ng_primitives_types_radix_ng_primitives_core from '@radix-ng/primitives/types/radix-ng-primitives-core';
|
|
10
11
|
import * as i1$2 from '@radix-ng/primitives/portal';
|
|
11
|
-
import
|
|
12
|
+
import { RdxPortalContainer } from '@radix-ng/primitives/portal';
|
|
12
13
|
|
|
13
14
|
/**
|
|
14
15
|
* Optional positioning anchor for the popup. Put it on the element the popup should align to — for
|
|
@@ -24,12 +25,10 @@ declare class RdxComboboxAnchor {
|
|
|
24
25
|
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxComboboxAnchor, "[rdxComboboxAnchor]", ["rdxComboboxAnchor"], {}, {}, never, never, true, [{ directive: typeof i1.RdxPopperAnchor; inputs: {}; outputs: {}; }]>;
|
|
25
26
|
}
|
|
26
27
|
|
|
27
|
-
/** The value a combobox can hold: a single value, an array (multiple mode), or nothing. */
|
|
28
|
-
type ComboboxValue = AcceptableValue | AcceptableValue[];
|
|
29
28
|
/**
|
|
30
|
-
* A combobox item, registered with the
|
|
31
|
-
* selection. Implemented by `RdxComboboxItem
|
|
32
|
-
* avoid a circular import.
|
|
29
|
+
* A combobox item, registered with the engine so it participates in filtering, navigation, and
|
|
30
|
+
* selection. Implemented by `RdxComboboxItem` (and `RdxAutocompleteItem`); the engine depends only on
|
|
31
|
+
* this structural shape to avoid a circular import.
|
|
33
32
|
*/
|
|
34
33
|
interface ComboboxItemRef {
|
|
35
34
|
/** The option's element id, exposed via `aria-activedescendant` when highlighted. */
|
|
@@ -43,49 +42,189 @@ interface ComboboxItemRef {
|
|
|
43
42
|
/** Whether the option is disabled. */
|
|
44
43
|
readonly disabled: Signal<boolean>;
|
|
45
44
|
}
|
|
46
|
-
/**
|
|
47
|
-
|
|
45
|
+
/**
|
|
46
|
+
* A custom filter predicate, matching Base UI's signature: the item's raw value (the object for object
|
|
47
|
+
* items), the query, and an `itemToString` resolver that converts a value to its display/match text.
|
|
48
|
+
* Value-first lets one filter match strings and objects alike (fuzzy / multi-key); the resolver gives
|
|
49
|
+
* the text when needed. The shared engine contract; autocomplete's filter is the same shape.
|
|
50
|
+
*/
|
|
51
|
+
type ComboboxFilter = (itemValue: AcceptableValue, query: string, itemToString?: (itemValue: AcceptableValue) => string) => boolean;
|
|
48
52
|
/** Why the highlight moved: keyboard navigation, pointer hover, or a programmatic change. */
|
|
49
53
|
type ComboboxHighlightReason = 'keyboard' | 'pointer' | 'none';
|
|
50
|
-
/**
|
|
54
|
+
/**
|
|
55
|
+
* Where the text input sits relative to the popup (Base UI's `inputInsidePopup`). `unknown` until an
|
|
56
|
+
* input mounts — so a Trigger whose input lives in a not-yet-opened popup is still `Tab`-reachable.
|
|
57
|
+
*/
|
|
58
|
+
type ComboboxInputLayout = 'unknown' | 'inside' | 'outside';
|
|
59
|
+
/** Payload of the highlight-changed emit. */
|
|
51
60
|
interface ComboboxItemHighlightedDetails {
|
|
52
61
|
/** The highlighted item's value, or `null` when the highlight is cleared. */
|
|
53
62
|
value: AcceptableValue | null;
|
|
54
63
|
/**
|
|
55
64
|
* The highlighted item's index in the visible/filtered list (`-1` when cleared). In virtualized
|
|
56
|
-
* mode this is the index into {@link
|
|
57
|
-
* `scrollToIndex` so the item mounts before it needs DOM focus.
|
|
65
|
+
* mode this is the index into {@link ComboboxEngine.filteredItems}.
|
|
58
66
|
*/
|
|
59
67
|
index: number;
|
|
60
68
|
/** What caused the highlight to move. */
|
|
61
69
|
reason: ComboboxHighlightReason;
|
|
62
70
|
}
|
|
71
|
+
/** The reactive inputs and callbacks a root hands the engine. */
|
|
72
|
+
interface ComboboxEngineConfig {
|
|
73
|
+
/** Injection context for the engine's effects/hooks. */
|
|
74
|
+
injector: Injector;
|
|
75
|
+
/** Prefix for the generated list id (e.g. `'rdx-combobox-list-'`). */
|
|
76
|
+
listIdPrefix: string;
|
|
77
|
+
/** CSS selector of the popup, used to decide focus restoration after a selection. */
|
|
78
|
+
popupSelector: string;
|
|
79
|
+
/** Whether the popup is open (the root owns the model; the engine only reads it). */
|
|
80
|
+
open: Signal<boolean>;
|
|
81
|
+
/** The active query string (the root derives it from its own typed/value semantics). */
|
|
82
|
+
query: Signal<string>;
|
|
83
|
+
/** Whether built-in filtering applies (always `true` for combobox; mode-gated for autocomplete). */
|
|
84
|
+
filteringEnabled: Signal<boolean>;
|
|
85
|
+
/** Whether keyboard navigation wraps at the list boundaries. */
|
|
86
|
+
loopFocus: Signal<boolean>;
|
|
87
|
+
/** Resolved auto-highlight mode. */
|
|
88
|
+
autoHighlightMode: Signal<'off' | 'input-change' | 'always'>;
|
|
89
|
+
/** Whether the list is externally virtualized (navigation runs over {@link items} by index). */
|
|
90
|
+
virtualized: Signal<boolean>;
|
|
91
|
+
/** Full set of item values for virtualized mode; `undefined` for DOM-driven lists. */
|
|
92
|
+
items: Signal<readonly AcceptableValue[] | undefined>;
|
|
93
|
+
/** Filter: `undefined` → default contains; a function → custom; `null` → built-in filtering off. */
|
|
94
|
+
filter: Signal<ComboboxFilter | null | undefined>;
|
|
95
|
+
/** Maximum number of matching items to show (`-1` = no limit). */
|
|
96
|
+
limit: Signal<number>;
|
|
97
|
+
/** Whether the list is a 2D grid (row/column arrow navigation). Defaults off for plain lists. */
|
|
98
|
+
grid: Signal<boolean>;
|
|
99
|
+
/** Resolves an item element to its enclosing row element (e.g. the nearest `[rdxComboboxRow]`). */
|
|
100
|
+
rowOf: (element: HTMLElement) => Element | null;
|
|
101
|
+
/**
|
|
102
|
+
* Whether inline completion is active (autocomplete `both` / `inline` modes). When on, the engine
|
|
103
|
+
* maintains an {@link ComboboxEngine.inlinePreview} that mirrors the highlighted item's label into
|
|
104
|
+
* the input. Always `false` for combobox (it never inline-completes).
|
|
105
|
+
*/
|
|
106
|
+
inlineMode: Signal<boolean>;
|
|
107
|
+
/**
|
|
108
|
+
* Resolves a raw item value to its display/match text — the `itemToString` Base UI passes to the
|
|
109
|
+
* filter. DOM-aware (finds a mounted item by value and returns its text) so it works for both
|
|
110
|
+
* DOM-driven and virtualized lists.
|
|
111
|
+
*/
|
|
112
|
+
itemToString: (value: AcceptableValue) => string;
|
|
113
|
+
/** Emits when the highlight moves (the root wires this to its `onItemHighlighted` output). */
|
|
114
|
+
onItemHighlighted: (details: ComboboxItemHighlightedDetails) => void;
|
|
115
|
+
/** Emits when open changes (skips the initial run); the root wires its `onOpenChange` output. */
|
|
116
|
+
onOpenChange: (open: boolean) => void;
|
|
117
|
+
/** Called after the open/close transition (including any exit animation) finishes. */
|
|
118
|
+
onOpenChangeComplete: (open: boolean) => void;
|
|
119
|
+
}
|
|
120
|
+
/**
|
|
121
|
+
* The shared Combobox engine (ADR 0014): item registry, filtering, highlight-model navigation,
|
|
122
|
+
* open/close transition, and the reactive effects that tie them together — everything Combobox and
|
|
123
|
+
* Autocomplete have in common. Value/selection semantics, open orchestration, and forms integration
|
|
124
|
+
* stay in each root; the root configures the engine and reads its state for the DI context.
|
|
125
|
+
*
|
|
126
|
+
* Must be called in an injection context (it runs effects and `inject`-based hooks).
|
|
127
|
+
*
|
|
128
|
+
* @internal Not part of the public API — exported only for the autocomplete entry; may change without notice.
|
|
129
|
+
*/
|
|
130
|
+
declare function useComboboxEngine(config: ComboboxEngineConfig): {
|
|
131
|
+
listId: string;
|
|
132
|
+
labelId: Signal<string | undefined>;
|
|
133
|
+
setLabelId(id: string | undefined): void;
|
|
134
|
+
inputElement: Signal<HTMLInputElement | null>;
|
|
135
|
+
setInputElement(el: HTMLInputElement | null): void;
|
|
136
|
+
inputLayout: Signal<ComboboxInputLayout>;
|
|
137
|
+
setInputLayout(layout: ComboboxInputLayout): void;
|
|
138
|
+
openedByTouch: Signal<boolean>;
|
|
139
|
+
setOpenedByTouch(value: boolean): void;
|
|
140
|
+
popupMounted: Signal<boolean>;
|
|
141
|
+
setPopupMounted(value: boolean): void;
|
|
142
|
+
readonly triggerElement: HTMLElement | null;
|
|
143
|
+
setTrigger(el: HTMLElement | null): void;
|
|
144
|
+
orderedItems: Signal<ComboboxItemRef[]>;
|
|
145
|
+
visibleItems: Signal<ComboboxItemRef[]>;
|
|
146
|
+
visibleCount: Signal<number>;
|
|
147
|
+
filteredItems: Signal<readonly AcceptableValue[]>;
|
|
148
|
+
isVisible: (item: ComboboxItemRef) => boolean;
|
|
149
|
+
registerItem(item: ComboboxItemRef): void;
|
|
150
|
+
unregisterItem(item: ComboboxItemRef): void;
|
|
151
|
+
highlight: _radix_ng_primitives_core.ListHighlight<ComboboxItemRef>;
|
|
152
|
+
highlightedItem: Signal<ComboboxItemRef | null>;
|
|
153
|
+
highlightedIndex: Signal<number>;
|
|
154
|
+
activeId: Signal<string | undefined>;
|
|
155
|
+
itemId: (index: number) => string;
|
|
156
|
+
setHighlightReason(reason: ComboboxHighlightReason): void;
|
|
157
|
+
setPendingHighlightEdge(edge: "first" | "last" | "first-match" | null): void;
|
|
158
|
+
/** Transient inline-completion preview (autocomplete inline modes); `null` when inactive. */
|
|
159
|
+
inlinePreview: Signal<string | null>;
|
|
160
|
+
/** Suppress inline completion for the current edit (e.g. while a delete key is held). */
|
|
161
|
+
setSuppressInline(value: boolean): void;
|
|
162
|
+
/** Clear the inline preview synchronously (on select / clear / close, before the effect runs). */
|
|
163
|
+
clearInlinePreview(): void;
|
|
164
|
+
highlightNext(reason?: ComboboxHighlightReason): void;
|
|
165
|
+
highlightPrevious(reason?: ComboboxHighlightReason): void;
|
|
166
|
+
highlightNextColumn(reason?: ComboboxHighlightReason): void;
|
|
167
|
+
highlightPreviousColumn(reason?: ComboboxHighlightReason): void;
|
|
168
|
+
highlightFirst(reason?: ComboboxHighlightReason): void;
|
|
169
|
+
highlightLast(reason?: ComboboxHighlightReason): void;
|
|
170
|
+
highlightIndex(index: number, reason: ComboboxHighlightReason): void;
|
|
171
|
+
setHighlight(item: ComboboxItemRef, reason: ComboboxHighlightReason): void;
|
|
172
|
+
clearHighlightState(): void;
|
|
173
|
+
isKeyboardActive(): boolean;
|
|
174
|
+
setKeyboardActive(value: boolean): void;
|
|
175
|
+
transitionStatus: Signal<_radix_ng_primitives_core.RdxTransitionStatus>;
|
|
176
|
+
registerTransitionElement: (element: HTMLElement) => () => void;
|
|
177
|
+
focusInput(): void;
|
|
178
|
+
selectInputText(): void;
|
|
179
|
+
/**
|
|
180
|
+
* Restore focus after a selection: the input when it sits outside the popup, otherwise the
|
|
181
|
+
* trigger. Skipped when the consumer moved focus during the `onValueChange` callback — pass the
|
|
182
|
+
* `document.activeElement` captured *before* the emit so we don't clobber a consumer's choice
|
|
183
|
+
* (e.g. focusing an external message field after inserting an emoji).
|
|
184
|
+
*/
|
|
185
|
+
restoreFocusAfterSelect(previousActiveElement: Element | null): void;
|
|
186
|
+
};
|
|
187
|
+
|
|
188
|
+
/** The value a combobox can hold: a single value, an array (multiple mode), or nothing. */
|
|
189
|
+
type ComboboxValue = AcceptableValue | AcceptableValue[];
|
|
190
|
+
type RdxComboboxOpenChangeReason = 'trigger-press' | 'input-press' | 'list-navigation' | 'input-change' | 'input-clear' | 'item-press' | 'outside-press' | 'focus-out' | 'escape-key' | 'close-press' | 'cancel-open' | 'none';
|
|
191
|
+
type RdxComboboxOpenChangeEventDetails = RdxCancelableChangeEventDetails<RdxComboboxOpenChangeReason>;
|
|
192
|
+
interface RdxComboboxOpenChange {
|
|
193
|
+
open: boolean;
|
|
194
|
+
reason: RdxComboboxOpenChangeReason;
|
|
195
|
+
event: Event;
|
|
196
|
+
trigger: HTMLElement | undefined;
|
|
197
|
+
eventDetails: RdxComboboxOpenChangeEventDetails;
|
|
198
|
+
}
|
|
199
|
+
|
|
63
200
|
declare const context: () => {
|
|
64
201
|
listId: string;
|
|
65
|
-
labelId: _angular_core.
|
|
202
|
+
labelId: _angular_core.Signal<string | undefined>;
|
|
66
203
|
setLabelId: (id: string | undefined) => void;
|
|
67
|
-
dir: _angular_core.
|
|
204
|
+
dir: _angular_core.Signal<Direction>;
|
|
68
205
|
value: _angular_core.ModelSignal<ComboboxValue>;
|
|
69
206
|
inputValue: _angular_core.ModelSignal<string>;
|
|
70
207
|
open: _angular_core.ModelSignal<boolean>;
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
208
|
+
present: _angular_core.Signal<boolean>;
|
|
209
|
+
multiple: _angular_core.Signal<boolean>;
|
|
210
|
+
selectionMode: _angular_core.Signal<"none" | "single" | "multiple">;
|
|
211
|
+
disabledState: _angular_core.Signal<boolean>;
|
|
74
212
|
readonly: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
75
|
-
requiredState: Signal<boolean>;
|
|
213
|
+
requiredState: _angular_core.Signal<boolean>;
|
|
76
214
|
openOnInputClick: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
77
215
|
modal: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
78
216
|
virtualized: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
217
|
+
grid: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
218
|
+
filteredItems: _angular_core.Signal<readonly AcceptableValue[]>;
|
|
219
|
+
highlightedItem: _angular_core.Signal<ComboboxItemRef | null>;
|
|
220
|
+
highlightedIndex: _angular_core.Signal<number>;
|
|
221
|
+
activeId: _angular_core.Signal<string | undefined>;
|
|
83
222
|
itemId: (index: number) => string;
|
|
84
223
|
isKeyboardActive: () => boolean;
|
|
85
224
|
setKeyboardActive: (value: boolean) => void;
|
|
86
|
-
transitionStatus: Signal<_radix_ng_primitives_core.RdxTransitionStatus>;
|
|
225
|
+
transitionStatus: _angular_core.Signal<_radix_ng_primitives_core.RdxTransitionStatus>;
|
|
87
226
|
registerTransitionElement: (element: HTMLElement) => () => void;
|
|
88
|
-
visibleCount: Signal<number>;
|
|
227
|
+
visibleCount: _angular_core.Signal<number>;
|
|
89
228
|
isVisible: (item: ComboboxItemRef) => boolean;
|
|
90
229
|
isSelected: (value: AcceptableValue) => boolean;
|
|
91
230
|
registerItem: (item: ComboboxItemRef) => void;
|
|
@@ -93,23 +232,34 @@ declare const context: () => {
|
|
|
93
232
|
highlight: _radix_ng_primitives_core.ListHighlight<ComboboxItemRef>;
|
|
94
233
|
highlightNext: () => void;
|
|
95
234
|
highlightPrevious: () => void;
|
|
235
|
+
highlightNextColumn: () => void;
|
|
236
|
+
highlightPreviousColumn: () => void;
|
|
96
237
|
highlightFirst: () => void;
|
|
97
238
|
highlightLast: () => void;
|
|
98
239
|
highlightIndex: (index: number, reason: ComboboxHighlightReason) => void;
|
|
99
240
|
setHighlight: (item: ComboboxItemRef, reason: ComboboxHighlightReason) => void;
|
|
100
241
|
clearHighlight: () => void;
|
|
101
|
-
|
|
242
|
+
highlightItemOnHover: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
243
|
+
keepHighlight: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
244
|
+
inputElement: _angular_core.Signal<HTMLInputElement | null>;
|
|
102
245
|
setInputElement: (el: HTMLInputElement | null) => void;
|
|
103
|
-
|
|
246
|
+
inputLayout: _angular_core.Signal<ComboboxInputLayout>;
|
|
247
|
+
setInputLayout: (layout: ComboboxInputLayout) => void;
|
|
248
|
+
openedByTouch: _angular_core.Signal<boolean>;
|
|
249
|
+
setOpenedByTouch: (value: boolean) => void;
|
|
250
|
+
popupMounted: _angular_core.Signal<boolean>;
|
|
251
|
+
setPopupMounted: (value: boolean) => void;
|
|
252
|
+
registerTrigger: (el: HTMLElement | null) => void;
|
|
104
253
|
focusInput: () => void;
|
|
105
|
-
openPopup: () =>
|
|
106
|
-
openForBrowse: () => void;
|
|
107
|
-
closePopup: (revert?: boolean) => void;
|
|
254
|
+
openPopup: (reason?: RdxComboboxOpenChangeReason, event?: Event) => boolean;
|
|
255
|
+
openForBrowse: (reason?: RdxComboboxOpenChangeReason, event?: Event) => void;
|
|
256
|
+
closePopup: (revert?: boolean, reason?: RdxComboboxOpenChangeReason, event?: Event) => void;
|
|
108
257
|
setInputValue: (value: string) => void;
|
|
109
|
-
openAndHighlight: (edge: "first" | "last") => void;
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
258
|
+
openAndHighlight: (edge: "first" | "last", reason?: RdxComboboxOpenChangeReason, event?: Event) => void;
|
|
259
|
+
navigateByKeyboard: (direction: 1 | -1, event?: Event) => void;
|
|
260
|
+
select: (item: ComboboxItemRef, event?: Event) => void;
|
|
261
|
+
selectIndex: (index: number, event?: Event) => void;
|
|
262
|
+
selectHighlighted: (event?: Event) => void;
|
|
113
263
|
clearSelection: () => void;
|
|
114
264
|
removeValue: (value: AcceptableValue) => void;
|
|
115
265
|
removeLastValue: () => void;
|
|
@@ -121,30 +271,32 @@ declare const context: () => {
|
|
|
121
271
|
type RdxComboboxRootContext = ReturnType<typeof context>;
|
|
122
272
|
declare const injectComboboxRootContext: _radix_ng_primitives_core.InjectContext<{
|
|
123
273
|
listId: string;
|
|
124
|
-
labelId: _angular_core.
|
|
274
|
+
labelId: _angular_core.Signal<string | undefined>;
|
|
125
275
|
setLabelId: (id: string | undefined) => void;
|
|
126
|
-
dir: _angular_core.
|
|
276
|
+
dir: _angular_core.Signal<Direction>;
|
|
127
277
|
value: _angular_core.ModelSignal<ComboboxValue>;
|
|
128
278
|
inputValue: _angular_core.ModelSignal<string>;
|
|
129
279
|
open: _angular_core.ModelSignal<boolean>;
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
280
|
+
present: _angular_core.Signal<boolean>;
|
|
281
|
+
multiple: _angular_core.Signal<boolean>;
|
|
282
|
+
selectionMode: _angular_core.Signal<"none" | "single" | "multiple">;
|
|
283
|
+
disabledState: _angular_core.Signal<boolean>;
|
|
133
284
|
readonly: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
134
|
-
requiredState: Signal<boolean>;
|
|
285
|
+
requiredState: _angular_core.Signal<boolean>;
|
|
135
286
|
openOnInputClick: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
136
287
|
modal: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
137
288
|
virtualized: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
289
|
+
grid: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
290
|
+
filteredItems: _angular_core.Signal<readonly AcceptableValue[]>;
|
|
291
|
+
highlightedItem: _angular_core.Signal<ComboboxItemRef | null>;
|
|
292
|
+
highlightedIndex: _angular_core.Signal<number>;
|
|
293
|
+
activeId: _angular_core.Signal<string | undefined>;
|
|
142
294
|
itemId: (index: number) => string;
|
|
143
295
|
isKeyboardActive: () => boolean;
|
|
144
296
|
setKeyboardActive: (value: boolean) => void;
|
|
145
|
-
transitionStatus: Signal<_radix_ng_primitives_core.RdxTransitionStatus>;
|
|
297
|
+
transitionStatus: _angular_core.Signal<_radix_ng_primitives_core.RdxTransitionStatus>;
|
|
146
298
|
registerTransitionElement: (element: HTMLElement) => () => void;
|
|
147
|
-
visibleCount: Signal<number>;
|
|
299
|
+
visibleCount: _angular_core.Signal<number>;
|
|
148
300
|
isVisible: (item: ComboboxItemRef) => boolean;
|
|
149
301
|
isSelected: (value: AcceptableValue) => boolean;
|
|
150
302
|
registerItem: (item: ComboboxItemRef) => void;
|
|
@@ -152,23 +304,34 @@ declare const injectComboboxRootContext: _radix_ng_primitives_core.InjectContext
|
|
|
152
304
|
highlight: _radix_ng_primitives_core.ListHighlight<ComboboxItemRef>;
|
|
153
305
|
highlightNext: () => void;
|
|
154
306
|
highlightPrevious: () => void;
|
|
307
|
+
highlightNextColumn: () => void;
|
|
308
|
+
highlightPreviousColumn: () => void;
|
|
155
309
|
highlightFirst: () => void;
|
|
156
310
|
highlightLast: () => void;
|
|
157
311
|
highlightIndex: (index: number, reason: ComboboxHighlightReason) => void;
|
|
158
312
|
setHighlight: (item: ComboboxItemRef, reason: ComboboxHighlightReason) => void;
|
|
159
313
|
clearHighlight: () => void;
|
|
160
|
-
|
|
314
|
+
highlightItemOnHover: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
315
|
+
keepHighlight: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
316
|
+
inputElement: _angular_core.Signal<HTMLInputElement | null>;
|
|
161
317
|
setInputElement: (el: HTMLInputElement | null) => void;
|
|
162
|
-
|
|
318
|
+
inputLayout: _angular_core.Signal<ComboboxInputLayout>;
|
|
319
|
+
setInputLayout: (layout: ComboboxInputLayout) => void;
|
|
320
|
+
openedByTouch: _angular_core.Signal<boolean>;
|
|
321
|
+
setOpenedByTouch: (value: boolean) => void;
|
|
322
|
+
popupMounted: _angular_core.Signal<boolean>;
|
|
323
|
+
setPopupMounted: (value: boolean) => void;
|
|
324
|
+
registerTrigger: (el: HTMLElement | null) => void;
|
|
163
325
|
focusInput: () => void;
|
|
164
|
-
openPopup: () =>
|
|
165
|
-
openForBrowse: () => void;
|
|
166
|
-
closePopup: (revert?: boolean) => void;
|
|
326
|
+
openPopup: (reason?: RdxComboboxOpenChangeReason, event?: Event) => boolean;
|
|
327
|
+
openForBrowse: (reason?: RdxComboboxOpenChangeReason, event?: Event) => void;
|
|
328
|
+
closePopup: (revert?: boolean, reason?: RdxComboboxOpenChangeReason, event?: Event) => void;
|
|
167
329
|
setInputValue: (value: string) => void;
|
|
168
|
-
openAndHighlight: (edge: "first" | "last") => void;
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
330
|
+
openAndHighlight: (edge: "first" | "last", reason?: RdxComboboxOpenChangeReason, event?: Event) => void;
|
|
331
|
+
navigateByKeyboard: (direction: 1 | -1, event?: Event) => void;
|
|
332
|
+
select: (item: ComboboxItemRef, event?: Event) => void;
|
|
333
|
+
selectIndex: (index: number, event?: Event) => void;
|
|
334
|
+
selectHighlighted: (event?: Event) => void;
|
|
172
335
|
clearSelection: () => void;
|
|
173
336
|
removeValue: (value: AcceptableValue) => void;
|
|
174
337
|
removeLastValue: () => void;
|
|
@@ -179,30 +342,32 @@ declare const injectComboboxRootContext: _radix_ng_primitives_core.InjectContext
|
|
|
179
342
|
}>;
|
|
180
343
|
declare const provideComboboxRootContext: (useFactory: () => {
|
|
181
344
|
listId: string;
|
|
182
|
-
labelId: _angular_core.
|
|
345
|
+
labelId: _angular_core.Signal<string | undefined>;
|
|
183
346
|
setLabelId: (id: string | undefined) => void;
|
|
184
|
-
dir: _angular_core.
|
|
347
|
+
dir: _angular_core.Signal<Direction>;
|
|
185
348
|
value: _angular_core.ModelSignal<ComboboxValue>;
|
|
186
349
|
inputValue: _angular_core.ModelSignal<string>;
|
|
187
350
|
open: _angular_core.ModelSignal<boolean>;
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
351
|
+
present: _angular_core.Signal<boolean>;
|
|
352
|
+
multiple: _angular_core.Signal<boolean>;
|
|
353
|
+
selectionMode: _angular_core.Signal<"none" | "single" | "multiple">;
|
|
354
|
+
disabledState: _angular_core.Signal<boolean>;
|
|
191
355
|
readonly: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
192
|
-
requiredState: Signal<boolean>;
|
|
356
|
+
requiredState: _angular_core.Signal<boolean>;
|
|
193
357
|
openOnInputClick: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
194
358
|
modal: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
195
359
|
virtualized: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
360
|
+
grid: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
361
|
+
filteredItems: _angular_core.Signal<readonly AcceptableValue[]>;
|
|
362
|
+
highlightedItem: _angular_core.Signal<ComboboxItemRef | null>;
|
|
363
|
+
highlightedIndex: _angular_core.Signal<number>;
|
|
364
|
+
activeId: _angular_core.Signal<string | undefined>;
|
|
200
365
|
itemId: (index: number) => string;
|
|
201
366
|
isKeyboardActive: () => boolean;
|
|
202
367
|
setKeyboardActive: (value: boolean) => void;
|
|
203
|
-
transitionStatus: Signal<_radix_ng_primitives_core.RdxTransitionStatus>;
|
|
368
|
+
transitionStatus: _angular_core.Signal<_radix_ng_primitives_core.RdxTransitionStatus>;
|
|
204
369
|
registerTransitionElement: (element: HTMLElement) => () => void;
|
|
205
|
-
visibleCount: Signal<number>;
|
|
370
|
+
visibleCount: _angular_core.Signal<number>;
|
|
206
371
|
isVisible: (item: ComboboxItemRef) => boolean;
|
|
207
372
|
isSelected: (value: AcceptableValue) => boolean;
|
|
208
373
|
registerItem: (item: ComboboxItemRef) => void;
|
|
@@ -210,23 +375,34 @@ declare const provideComboboxRootContext: (useFactory: () => {
|
|
|
210
375
|
highlight: _radix_ng_primitives_core.ListHighlight<ComboboxItemRef>;
|
|
211
376
|
highlightNext: () => void;
|
|
212
377
|
highlightPrevious: () => void;
|
|
378
|
+
highlightNextColumn: () => void;
|
|
379
|
+
highlightPreviousColumn: () => void;
|
|
213
380
|
highlightFirst: () => void;
|
|
214
381
|
highlightLast: () => void;
|
|
215
382
|
highlightIndex: (index: number, reason: ComboboxHighlightReason) => void;
|
|
216
383
|
setHighlight: (item: ComboboxItemRef, reason: ComboboxHighlightReason) => void;
|
|
217
384
|
clearHighlight: () => void;
|
|
218
|
-
|
|
385
|
+
highlightItemOnHover: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
386
|
+
keepHighlight: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
387
|
+
inputElement: _angular_core.Signal<HTMLInputElement | null>;
|
|
219
388
|
setInputElement: (el: HTMLInputElement | null) => void;
|
|
220
|
-
|
|
389
|
+
inputLayout: _angular_core.Signal<ComboboxInputLayout>;
|
|
390
|
+
setInputLayout: (layout: ComboboxInputLayout) => void;
|
|
391
|
+
openedByTouch: _angular_core.Signal<boolean>;
|
|
392
|
+
setOpenedByTouch: (value: boolean) => void;
|
|
393
|
+
popupMounted: _angular_core.Signal<boolean>;
|
|
394
|
+
setPopupMounted: (value: boolean) => void;
|
|
395
|
+
registerTrigger: (el: HTMLElement | null) => void;
|
|
221
396
|
focusInput: () => void;
|
|
222
|
-
openPopup: () =>
|
|
223
|
-
openForBrowse: () => void;
|
|
224
|
-
closePopup: (revert?: boolean) => void;
|
|
397
|
+
openPopup: (reason?: RdxComboboxOpenChangeReason, event?: Event) => boolean;
|
|
398
|
+
openForBrowse: (reason?: RdxComboboxOpenChangeReason, event?: Event) => void;
|
|
399
|
+
closePopup: (revert?: boolean, reason?: RdxComboboxOpenChangeReason, event?: Event) => void;
|
|
225
400
|
setInputValue: (value: string) => void;
|
|
226
|
-
openAndHighlight: (edge: "first" | "last") => void;
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
401
|
+
openAndHighlight: (edge: "first" | "last", reason?: RdxComboboxOpenChangeReason, event?: Event) => void;
|
|
402
|
+
navigateByKeyboard: (direction: 1 | -1, event?: Event) => void;
|
|
403
|
+
select: (item: ComboboxItemRef, event?: Event) => void;
|
|
404
|
+
selectIndex: (index: number, event?: Event) => void;
|
|
405
|
+
selectHighlighted: (event?: Event) => void;
|
|
230
406
|
clearSelection: () => void;
|
|
231
407
|
removeValue: (value: AcceptableValue) => void;
|
|
232
408
|
removeLastValue: () => void;
|
|
@@ -236,14 +412,17 @@ declare const provideComboboxRootContext: (useFactory: () => {
|
|
|
236
412
|
markAsTouched: () => void;
|
|
237
413
|
}) => _angular_core.Provider;
|
|
238
414
|
/**
|
|
239
|
-
* Root of a Combobox — a filterable select. Owns selection, input text, open state,
|
|
240
|
-
* highlight-model navigation
|
|
241
|
-
*
|
|
415
|
+
* Root of a Combobox — a filterable select. Owns selection, input text, open state, and the forms
|
|
416
|
+
* integration, and delegates filtering / highlight-model navigation / the open-close transition to the
|
|
417
|
+
* shared {@link useComboboxEngine} (ADR 0014). Exposes everything to the parts through
|
|
418
|
+
* {@link RdxComboboxRootContext}. Implements `ControlValueAccessor`.
|
|
242
419
|
*
|
|
243
420
|
* @group Components
|
|
244
421
|
*/
|
|
245
422
|
declare class RdxComboboxRoot implements ControlValueAccessor {
|
|
246
423
|
private readonly injector;
|
|
424
|
+
/** Per-popup floating root context (ADR 0015) — `open` / `triggers` / reference for the dismissal engine. */
|
|
425
|
+
readonly floatingContext: RdxFloatingRootContext;
|
|
247
426
|
/** Selected value(s). A single value in single mode, an array in `multiple` mode. */
|
|
248
427
|
readonly value: _angular_core.ModelSignal<ComboboxValue>;
|
|
249
428
|
/** Initial value when uncontrolled. */
|
|
@@ -262,17 +441,18 @@ declare class RdxComboboxRoot implements ControlValueAccessor {
|
|
|
262
441
|
*/
|
|
263
442
|
readonly selectionMode: _angular_core.InputSignal<"none" | "single" | "multiple" | undefined>;
|
|
264
443
|
/** Resolved selection mode. */
|
|
265
|
-
readonly mode: Signal<"none" | "single" | "multiple">;
|
|
444
|
+
readonly mode: _angular_core.Signal<"none" | "single" | "multiple">;
|
|
266
445
|
/** Whether the combobox is in multiple-selection mode. */
|
|
267
|
-
readonly multiple: Signal<boolean>;
|
|
446
|
+
readonly multiple: _angular_core.Signal<boolean>;
|
|
268
447
|
/** In `'none'` mode, whether pressing an item fills the input with its label. */
|
|
269
448
|
readonly fillInputOnItemPress: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
270
449
|
/** Text direction. */
|
|
271
|
-
readonly
|
|
450
|
+
readonly dirInput: _angular_core.InputSignal<Direction | undefined>;
|
|
451
|
+
readonly dir: _angular_core.Signal<Direction>;
|
|
272
452
|
/** Whether the combobox is disabled. */
|
|
273
453
|
readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
274
|
-
/** Whether the combobox is read-only. */
|
|
275
|
-
readonly
|
|
454
|
+
/** Whether the combobox is read-only. Base UI prop name. */
|
|
455
|
+
readonly readOnly: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
276
456
|
/** Whether a value is required (for forms). */
|
|
277
457
|
readonly required: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
278
458
|
/** Whether keyboard navigation wraps at the list boundaries. */
|
|
@@ -280,12 +460,24 @@ declare class RdxComboboxRoot implements ControlValueAccessor {
|
|
|
280
460
|
/**
|
|
281
461
|
* Auto-highlight behavior:
|
|
282
462
|
* - `false` (default): never auto-highlight;
|
|
283
|
-
* - `true` / `'input-change'`: highlight the first match as the query changes;
|
|
463
|
+
* - `true` (also the bare `autoHighlight` attribute) / `'input-change'`: highlight the first match as the query changes;
|
|
284
464
|
* - `'always'`: keep the first navigable item highlighted whenever the popup is open.
|
|
285
465
|
*/
|
|
286
|
-
readonly autoHighlight: _angular_core.
|
|
466
|
+
readonly autoHighlight: _angular_core.InputSignalWithTransform<boolean | "input-change" | "always", BooleanInput>;
|
|
287
467
|
/** Resolved auto-highlight mode. */
|
|
288
|
-
readonly autoHighlightMode: Signal<"
|
|
468
|
+
readonly autoHighlightMode: _angular_core.Signal<"off" | "input-change" | "always">;
|
|
469
|
+
/**
|
|
470
|
+
* Whether moving the pointer over an item highlights it. `true` (default) paints `data-highlighted`
|
|
471
|
+
* on hover; `false` suppresses hover-driven highlight entirely, letting CSS `:hover` stay distinct
|
|
472
|
+
* from the `data-highlighted` (keyboard) state. Clicking an item still selects it.
|
|
473
|
+
*/
|
|
474
|
+
readonly highlightItemOnHover: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
475
|
+
/**
|
|
476
|
+
* Whether a pointer-driven highlight is kept when the cursor leaves the list. `false` (default)
|
|
477
|
+
* clears the highlight on pointer-leave; `true` retains the last hovered item highlighted. Keyboard
|
|
478
|
+
* navigation and auto-highlight are unaffected.
|
|
479
|
+
*/
|
|
480
|
+
readonly keepHighlight: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
289
481
|
/** Whether clicking the input opens the popup. */
|
|
290
482
|
readonly openOnInputClick: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
291
483
|
/** Whether the popup is modal: locks page scroll and makes outside content inert while open. */
|
|
@@ -314,8 +506,14 @@ declare class RdxComboboxRoot implements ControlValueAccessor {
|
|
|
314
506
|
* items outside the rendered window are not skipped by keyboard navigation.
|
|
315
507
|
*/
|
|
316
508
|
readonly virtualized: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
317
|
-
/**
|
|
318
|
-
|
|
509
|
+
/**
|
|
510
|
+
* Whether the list is laid out as a 2D grid: `ArrowUp`/`ArrowDown` move between rows (keeping the
|
|
511
|
+
* column), `ArrowLeft`/`ArrowRight` move within a row. Wrap items in `RdxComboboxRow`; the list
|
|
512
|
+
* switches to `role="grid"`. Not supported together with {@link virtualized}.
|
|
513
|
+
*/
|
|
514
|
+
readonly grid: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
515
|
+
/** How item values are compared for equality (a comparator function or an object key). Base UI prop name. */
|
|
516
|
+
readonly isItemEqualToValue: _angular_core.InputSignal<ItemValueComparator<AcceptableValue> | undefined>;
|
|
319
517
|
/** Converts a value to its display label. Defaults to the matching item's text. */
|
|
320
518
|
readonly itemToStringLabel: _angular_core.InputSignal<((value: AcceptableValue) => string) | undefined>;
|
|
321
519
|
/** Emits when the selection changes. */
|
|
@@ -323,7 +521,7 @@ declare class RdxComboboxRoot implements ControlValueAccessor {
|
|
|
323
521
|
/** Emits when the input text changes. */
|
|
324
522
|
readonly onInputValueChange: _angular_core.OutputEmitterRef<string>;
|
|
325
523
|
/** Emits when the popup opens or closes. */
|
|
326
|
-
readonly onOpenChange: _angular_core.OutputEmitterRef<
|
|
524
|
+
readonly onOpenChange: _angular_core.OutputEmitterRef<RdxComboboxOpenChange>;
|
|
327
525
|
/**
|
|
328
526
|
* Emits as the highlight moves, with the item's value, its index in {@link filteredItems}, and the
|
|
329
527
|
* reason. In virtualized mode, use `index` to call the virtualizer's `scrollToIndex`.
|
|
@@ -331,123 +529,92 @@ declare class RdxComboboxRoot implements ControlValueAccessor {
|
|
|
331
529
|
readonly onItemHighlighted: _angular_core.OutputEmitterRef<ComboboxItemHighlightedDetails>;
|
|
332
530
|
/** Emits after the open/close transition (including any exit animation) finishes. */
|
|
333
531
|
readonly onOpenChangeComplete: _angular_core.OutputEmitterRef<boolean>;
|
|
334
|
-
private readonly transition;
|
|
335
|
-
/** Open/close transition phase, for `data-starting-style` / `data-ending-style`. */
|
|
336
|
-
readonly transitionStatus: Signal<_radix_ng_primitives_core.RdxTransitionStatus>;
|
|
337
|
-
/** Registers the popup element whose animation determines transition completion. */
|
|
338
|
-
readonly registerTransitionElement: (element: HTMLElement) => () => void;
|
|
339
|
-
readonly listId: string;
|
|
340
|
-
readonly labelId: _angular_core.WritableSignal<string | undefined>;
|
|
341
|
-
readonly inputElement: _angular_core.WritableSignal<HTMLInputElement | null>;
|
|
342
532
|
private readonly cvaDisabled;
|
|
343
|
-
readonly disabledState: Signal<boolean>;
|
|
344
|
-
readonly requiredState: Signal<boolean>;
|
|
345
|
-
private readonly
|
|
533
|
+
readonly disabledState: _angular_core.Signal<boolean>;
|
|
534
|
+
readonly requiredState: _angular_core.Signal<boolean>;
|
|
535
|
+
private readonly preventUnmountOnClose;
|
|
536
|
+
readonly present: _angular_core.Signal<boolean>;
|
|
346
537
|
/**
|
|
347
538
|
* Whether the input text is a fresh user query rather than the current selection's label. While
|
|
348
539
|
* `false` (just opened, or showing a selected label), the list is unfiltered so the user can
|
|
349
540
|
* browse; it flips `true` on the first keystroke.
|
|
350
541
|
*/
|
|
351
542
|
private readonly typed;
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
private readonly
|
|
358
|
-
/**
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
/** Edge to highlight once the list has mounted (items register asynchronously after opening). */
|
|
373
|
-
private readonly pendingHighlightEdge;
|
|
543
|
+
/** The active query: the typed text once the user starts typing, otherwise empty (browse mode). */
|
|
544
|
+
private readonly query;
|
|
545
|
+
/** Built-in filtering always applies for combobox (the `none` filter is handled inside the engine). */
|
|
546
|
+
private readonly filteringEnabled;
|
|
547
|
+
/** Combobox never inline-completes (that's an autocomplete mode). */
|
|
548
|
+
private readonly noInline;
|
|
549
|
+
/** The shared engine: item registry, filtering, highlight navigation, and the open-close transition. */
|
|
550
|
+
private readonly engine;
|
|
551
|
+
/** The list element id referenced by `aria-controls` / `aria-activedescendant` (engine-backed). */
|
|
552
|
+
get listId(): string;
|
|
553
|
+
/** The currently highlighted item (engine-backed; read by parts and tests). */
|
|
554
|
+
get highlightedItem(): _angular_core.Signal<ComboboxItemRef | null>;
|
|
555
|
+
/** Number of items the list currently shows (engine-backed). */
|
|
556
|
+
get visibleCount(): _angular_core.Signal<number>;
|
|
557
|
+
/** The filtered item values an external virtualizer should render (engine-backed). */
|
|
558
|
+
get filteredItems(): _angular_core.Signal<readonly AcceptableValue[]>;
|
|
559
|
+
/** Highlighted index into {@link filteredItems} in virtualized mode (engine-backed). */
|
|
560
|
+
get highlightedIndex(): _angular_core.Signal<number>;
|
|
561
|
+
/** The active option's id for `aria-activedescendant` (engine-backed). */
|
|
562
|
+
get activeId(): _angular_core.Signal<string | undefined>;
|
|
374
563
|
private onChange?;
|
|
375
564
|
private onTouched?;
|
|
376
565
|
constructor();
|
|
377
566
|
/** Opens the popup for browsing (resets the query to "pristine" and selects the input text). */
|
|
378
|
-
openForBrowse(): void;
|
|
567
|
+
openForBrowse(reason?: RdxComboboxOpenChangeReason, event?: Event): void;
|
|
379
568
|
/** Opens the popup and highlights the given edge once the list mounts. */
|
|
380
|
-
openAndHighlight(edge: 'first' | 'last'): void;
|
|
381
|
-
/**
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
setKeyboardActive(value: boolean): void;
|
|
569
|
+
openAndHighlight(edge: 'first' | 'last', reason?: RdxComboboxOpenChangeReason, event?: Event): void;
|
|
570
|
+
/**
|
|
571
|
+
* Keyboard list navigation shared by the input and the chips: opens the popup and highlights the
|
|
572
|
+
* leading/trailing edge when closed, otherwise steps the highlight. `direction` is `1` (down) or
|
|
573
|
+
* `-1` (up). Centralized so the input and chip key handlers can't drift apart.
|
|
574
|
+
*/
|
|
575
|
+
navigateByKeyboard(direction: 1 | -1, event?: Event): void;
|
|
388
576
|
isSelected(value: AcceptableValue): boolean;
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
setOpen(open: boolean): void;
|
|
392
|
-
closePopup(revert?: boolean): void;
|
|
577
|
+
setOpen(open: boolean, reason?: RdxComboboxOpenChangeReason, event?: Event): boolean;
|
|
578
|
+
closePopup(revert?: boolean, reason?: RdxComboboxOpenChangeReason, event?: Event): void;
|
|
393
579
|
/** Updates the input text from user typing (marks the query as a fresh user query). */
|
|
394
580
|
setInputValue(value: string): void;
|
|
395
581
|
/** Sets the input text programmatically (a selection label / revert) — not a user query. */
|
|
396
582
|
private setLabel;
|
|
397
|
-
/** Selects all input text so the next keystroke replaces a stale selection label. */
|
|
398
|
-
selectInputText(): void;
|
|
399
583
|
/** Resets the input text to the current selection's label (single mode) or empty. */
|
|
400
584
|
private revertInputValue;
|
|
401
585
|
labelFor(value: AcceptableValue): string;
|
|
402
|
-
|
|
403
|
-
private textFor;
|
|
404
|
-
/** Deterministic id for the item at `index` in virtualized mode (matches `aria-activedescendant`). */
|
|
405
|
-
itemId(index: number): string;
|
|
406
|
-
handleSelect(item: ComboboxItemRef): void;
|
|
586
|
+
handleSelect(item: ComboboxItemRef, event?: Event): void;
|
|
407
587
|
/** Selects the filtered item at `index` (virtualized mode). The label comes from {@link labelFor}. */
|
|
408
|
-
selectIndex(index: number): void;
|
|
588
|
+
selectIndex(index: number, event?: Event): void;
|
|
409
589
|
/** Commits a selection from a resolved value/label, independent of whether a DOM item exists. */
|
|
410
590
|
private handleSelectValue;
|
|
411
591
|
/** Requests submit of the closest form when `submitOnItemClick` is enabled. */
|
|
412
592
|
private maybeSubmit;
|
|
413
|
-
selectHighlighted(): void;
|
|
414
|
-
highlightNext(reason?: ComboboxHighlightReason): void;
|
|
415
|
-
highlightPrevious(reason?: ComboboxHighlightReason): void;
|
|
416
|
-
highlightFirst(reason?: ComboboxHighlightReason): void;
|
|
417
|
-
highlightLast(reason?: ComboboxHighlightReason): void;
|
|
418
|
-
/** Highlights a specific index in virtualized mode (e.g. pointer hover). Ignored if out of range. */
|
|
419
|
-
highlightIndex(index: number, reason: ComboboxHighlightReason): void;
|
|
420
|
-
/** Highlights a DOM-ref item (non-virtualized pointer hover). */
|
|
421
|
-
setHighlight(item: ComboboxItemRef, reason: ComboboxHighlightReason): void;
|
|
422
|
-
/** Clears whichever highlight model is active. */
|
|
423
|
-
clearHighlightState(): void;
|
|
424
|
-
/** Steps the virtualized highlight index by `direction`, wrapping when {@link loopFocus}. */
|
|
425
|
-
private stepIndex;
|
|
593
|
+
selectHighlighted(event?: Event): void;
|
|
426
594
|
clearSelection(): void;
|
|
427
595
|
removeValue(value: AcceptableValue): void;
|
|
428
596
|
removeLastValue(): void;
|
|
429
|
-
/** The trigger element, used as a focus fallback when the input lives inside the popup. */
|
|
430
|
-
triggerElement: HTMLElement | null;
|
|
431
597
|
focusInput(): void;
|
|
432
|
-
/**
|
|
433
|
-
* Restores focus after a selection closes the popup, so the keyboard can reopen it. When the
|
|
434
|
-
* input lives inside the popup it is about to unmount, so focus goes to the trigger instead;
|
|
435
|
-
* otherwise it returns to the input. Done synchronously while the input is still in the DOM.
|
|
436
|
-
*/
|
|
437
|
-
restoreFocusAfterSelect(): void;
|
|
438
598
|
private chipsFocusLast;
|
|
439
599
|
/** Registered by `RdxComboboxChips` so the input can hand keyboard focus to the chips. */
|
|
440
600
|
registerChipsNav(fn: (() => boolean) | null): void;
|
|
441
601
|
/** Moves focus to the last chip, if any. Returns whether a chip was focused. */
|
|
442
602
|
focusLastChip(): boolean;
|
|
443
603
|
markAsTouched(): void;
|
|
604
|
+
/**
|
|
605
|
+
* The single guarded value-mutation point for all user-driven changes (selection toggle, Clear,
|
|
606
|
+
* chip removal, Backspace). Read-only / disabled comboboxes never mutate here — programmatic form
|
|
607
|
+
* writes go through {@link writeValue}, which is intentionally not guarded. (ADR 0014, Finding 1.)
|
|
608
|
+
*/
|
|
444
609
|
private commitValue;
|
|
610
|
+
private createOpenChangeEvent;
|
|
611
|
+
private resolveOpenChangeTrigger;
|
|
445
612
|
writeValue(value: ComboboxValue | null): void;
|
|
446
613
|
registerOnChange(fn: (value: ComboboxValue | null) => void): void;
|
|
447
614
|
registerOnTouched(fn: () => void): void;
|
|
448
615
|
setDisabledState(isDisabled: boolean): void;
|
|
449
616
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxComboboxRoot, never>;
|
|
450
|
-
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxComboboxRoot, "[rdxComboboxRoot]", ["rdxComboboxRoot"], { "value": { "alias": "value"; "required": false; "isSignal": true; }; "defaultValue": { "alias": "defaultValue"; "required": false; "isSignal": true; }; "inputValue": { "alias": "inputValue"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; "defaultOpen": { "alias": "defaultOpen"; "required": false; "isSignal": true; }; "multipleInput": { "alias": "multiple"; "required": false; "isSignal": true; }; "selectionMode": { "alias": "selectionMode"; "required": false; "isSignal": true; }; "fillInputOnItemPress": { "alias": "fillInputOnItemPress"; "required": false; "isSignal": true; }; "
|
|
617
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxComboboxRoot, "[rdxComboboxRoot]", ["rdxComboboxRoot"], { "value": { "alias": "value"; "required": false; "isSignal": true; }; "defaultValue": { "alias": "defaultValue"; "required": false; "isSignal": true; }; "inputValue": { "alias": "inputValue"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; "defaultOpen": { "alias": "defaultOpen"; "required": false; "isSignal": true; }; "multipleInput": { "alias": "multiple"; "required": false; "isSignal": true; }; "selectionMode": { "alias": "selectionMode"; "required": false; "isSignal": true; }; "fillInputOnItemPress": { "alias": "fillInputOnItemPress"; "required": false; "isSignal": true; }; "dirInput": { "alias": "dir"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readOnly": { "alias": "readOnly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "loopFocus": { "alias": "loopFocus"; "required": false; "isSignal": true; }; "autoHighlight": { "alias": "autoHighlight"; "required": false; "isSignal": true; }; "highlightItemOnHover": { "alias": "highlightItemOnHover"; "required": false; "isSignal": true; }; "keepHighlight": { "alias": "keepHighlight"; "required": false; "isSignal": true; }; "openOnInputClick": { "alias": "openOnInputClick"; "required": false; "isSignal": true; }; "modal": { "alias": "modal"; "required": false; "isSignal": true; }; "submitOnItemClick": { "alias": "submitOnItemClick"; "required": false; "isSignal": true; }; "filter": { "alias": "filter"; "required": false; "isSignal": true; }; "limit": { "alias": "limit"; "required": false; "isSignal": true; }; "items": { "alias": "items"; "required": false; "isSignal": true; }; "virtualized": { "alias": "virtualized"; "required": false; "isSignal": true; }; "grid": { "alias": "grid"; "required": false; "isSignal": true; }; "isItemEqualToValue": { "alias": "isItemEqualToValue"; "required": false; "isSignal": true; }; "itemToStringLabel": { "alias": "itemToStringLabel"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "inputValue": "inputValueChange"; "open": "openChange"; "onValueChange": "onValueChange"; "onInputValueChange": "onInputValueChange"; "onOpenChange": "onOpenChange"; "onItemHighlighted": "onItemHighlighted"; "onOpenChangeComplete": "onOpenChangeComplete"; }, never, never, true, [{ directive: typeof i1.RdxPopper; inputs: {}; outputs: {}; }]>;
|
|
451
618
|
}
|
|
452
619
|
|
|
453
620
|
/**
|
|
@@ -473,12 +640,13 @@ declare class RdxComboboxLabel {
|
|
|
473
640
|
declare class RdxComboboxInput {
|
|
474
641
|
protected readonly rootContext: {
|
|
475
642
|
listId: string;
|
|
476
|
-
labelId: _angular_core.
|
|
643
|
+
labelId: _angular_core.Signal<string | undefined>;
|
|
477
644
|
setLabelId: (id: string | undefined) => void;
|
|
478
|
-
dir: _angular_core.
|
|
645
|
+
dir: _angular_core.Signal<_radix_ng_primitives_core.Direction>;
|
|
479
646
|
value: _angular_core.ModelSignal<_radix_ng_primitives_combobox.ComboboxValue>;
|
|
480
647
|
inputValue: _angular_core.ModelSignal<string>;
|
|
481
648
|
open: _angular_core.ModelSignal<boolean>;
|
|
649
|
+
present: _angular_core.Signal<boolean>;
|
|
482
650
|
multiple: _angular_core.Signal<boolean>;
|
|
483
651
|
selectionMode: _angular_core.Signal<"none" | "single" | "multiple">;
|
|
484
652
|
disabledState: _angular_core.Signal<boolean>;
|
|
@@ -487,6 +655,7 @@ declare class RdxComboboxInput {
|
|
|
487
655
|
openOnInputClick: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
488
656
|
modal: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
489
657
|
virtualized: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
658
|
+
grid: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
490
659
|
filteredItems: _angular_core.Signal<readonly _radix_ng_primitives_core.AcceptableValue[]>;
|
|
491
660
|
highlightedItem: _angular_core.Signal<_radix_ng_primitives_combobox.ComboboxItemRef | null>;
|
|
492
661
|
highlightedIndex: _angular_core.Signal<number>;
|
|
@@ -504,23 +673,34 @@ declare class RdxComboboxInput {
|
|
|
504
673
|
highlight: _radix_ng_primitives_core.ListHighlight<_radix_ng_primitives_combobox.ComboboxItemRef>;
|
|
505
674
|
highlightNext: () => void;
|
|
506
675
|
highlightPrevious: () => void;
|
|
676
|
+
highlightNextColumn: () => void;
|
|
677
|
+
highlightPreviousColumn: () => void;
|
|
507
678
|
highlightFirst: () => void;
|
|
508
679
|
highlightLast: () => void;
|
|
509
680
|
highlightIndex: (index: number, reason: _radix_ng_primitives_combobox.ComboboxHighlightReason) => void;
|
|
510
681
|
setHighlight: (item: _radix_ng_primitives_combobox.ComboboxItemRef, reason: _radix_ng_primitives_combobox.ComboboxHighlightReason) => void;
|
|
511
682
|
clearHighlight: () => void;
|
|
683
|
+
highlightItemOnHover: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
684
|
+
keepHighlight: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
512
685
|
inputElement: _angular_core.Signal<HTMLInputElement | null>;
|
|
513
686
|
setInputElement: (el: HTMLInputElement | null) => void;
|
|
514
|
-
|
|
687
|
+
inputLayout: _angular_core.Signal<_radix_ng_primitives_combobox.ComboboxInputLayout>;
|
|
688
|
+
setInputLayout: (layout: _radix_ng_primitives_combobox.ComboboxInputLayout) => void;
|
|
689
|
+
openedByTouch: _angular_core.Signal<boolean>;
|
|
690
|
+
setOpenedByTouch: (value: boolean) => void;
|
|
691
|
+
popupMounted: _angular_core.Signal<boolean>;
|
|
692
|
+
setPopupMounted: (value: boolean) => void;
|
|
693
|
+
registerTrigger: (el: HTMLElement | null) => void;
|
|
515
694
|
focusInput: () => void;
|
|
516
|
-
openPopup: () =>
|
|
517
|
-
openForBrowse: () => void;
|
|
518
|
-
closePopup: (revert?: boolean) => void;
|
|
695
|
+
openPopup: (reason?: _radix_ng_primitives_combobox.RdxComboboxOpenChangeReason, event?: Event) => boolean;
|
|
696
|
+
openForBrowse: (reason?: _radix_ng_primitives_combobox.RdxComboboxOpenChangeReason, event?: Event) => void;
|
|
697
|
+
closePopup: (revert?: boolean, reason?: _radix_ng_primitives_combobox.RdxComboboxOpenChangeReason, event?: Event) => void;
|
|
519
698
|
setInputValue: (value: string) => void;
|
|
520
|
-
openAndHighlight: (edge: "first" | "last") => void;
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
|
|
699
|
+
openAndHighlight: (edge: "first" | "last", reason?: _radix_ng_primitives_combobox.RdxComboboxOpenChangeReason, event?: Event) => void;
|
|
700
|
+
navigateByKeyboard: (direction: 1 | -1, event?: Event) => void;
|
|
701
|
+
select: (item: _radix_ng_primitives_combobox.ComboboxItemRef, event?: Event) => void;
|
|
702
|
+
selectIndex: (index: number, event?: Event) => void;
|
|
703
|
+
selectHighlighted: (event?: Event) => void;
|
|
524
704
|
clearSelection: () => void;
|
|
525
705
|
removeValue: (value: _radix_ng_primitives_core.AcceptableValue) => void;
|
|
526
706
|
removeLastValue: () => void;
|
|
@@ -548,13 +728,103 @@ declare class RdxComboboxInput {
|
|
|
548
728
|
onInput(event: Event): void;
|
|
549
729
|
onCompositionEnd(event: CompositionEvent): void;
|
|
550
730
|
private commitInput;
|
|
551
|
-
onClick(): void;
|
|
731
|
+
onClick(event: MouseEvent): void;
|
|
552
732
|
onFocus(): void;
|
|
553
733
|
onBlur(): void;
|
|
554
734
|
onKeydown(event: KeyboardEvent): void;
|
|
735
|
+
/**
|
|
736
|
+
* From the very start of the input in `multiple` mode, step into the chips. The key that points
|
|
737
|
+
* toward the chips is direction-aware: `ArrowLeft` in LTR, `ArrowRight` in RTL.
|
|
738
|
+
*/
|
|
739
|
+
private maybeStepIntoChips;
|
|
555
740
|
protected readonly dataAttr: (value: boolean) => "" | undefined;
|
|
556
741
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxComboboxInput, never>;
|
|
557
|
-
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxComboboxInput, "input[rdxComboboxInput]", ["rdxComboboxInput"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1.RdxPopperAnchor; inputs: {}; outputs: {}; }, { directive: typeof i1$1.
|
|
742
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxComboboxInput, "input[rdxComboboxInput]", ["rdxComboboxInput"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1.RdxPopperAnchor; inputs: {}; outputs: {}; }, { directive: typeof i1$1.RdxFloatingInsideElement; inputs: {}; outputs: {}; }]>;
|
|
743
|
+
}
|
|
744
|
+
|
|
745
|
+
/**
|
|
746
|
+
* Optional wrapper around the input and its adornments (icon, clear, trigger). Mirrors the combobox
|
|
747
|
+
* state via `data-*` so the whole group can be styled together (focus ring, disabled, etc.).
|
|
748
|
+
*
|
|
749
|
+
* @group Components
|
|
750
|
+
*/
|
|
751
|
+
declare class RdxComboboxInputGroup {
|
|
752
|
+
protected readonly rootContext: {
|
|
753
|
+
listId: string;
|
|
754
|
+
labelId: _angular_core.Signal<string | undefined>;
|
|
755
|
+
setLabelId: (id: string | undefined) => void;
|
|
756
|
+
dir: _angular_core.Signal<_radix_ng_primitives_types_radix_ng_primitives_core.Direction>;
|
|
757
|
+
value: _angular_core.ModelSignal<_radix_ng_primitives_combobox.ComboboxValue>;
|
|
758
|
+
inputValue: _angular_core.ModelSignal<string>;
|
|
759
|
+
open: _angular_core.ModelSignal<boolean>;
|
|
760
|
+
present: _angular_core.Signal<boolean>;
|
|
761
|
+
multiple: _angular_core.Signal<boolean>;
|
|
762
|
+
selectionMode: _angular_core.Signal<"none" | "single" | "multiple">;
|
|
763
|
+
disabledState: _angular_core.Signal<boolean>;
|
|
764
|
+
readonly: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
765
|
+
requiredState: _angular_core.Signal<boolean>;
|
|
766
|
+
openOnInputClick: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
767
|
+
modal: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
768
|
+
virtualized: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
769
|
+
grid: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
770
|
+
filteredItems: _angular_core.Signal<readonly _radix_ng_primitives_types_radix_ng_primitives_core.AcceptableValue[]>;
|
|
771
|
+
highlightedItem: _angular_core.Signal<_radix_ng_primitives_combobox.ComboboxItemRef | null>;
|
|
772
|
+
highlightedIndex: _angular_core.Signal<number>;
|
|
773
|
+
activeId: _angular_core.Signal<string | undefined>;
|
|
774
|
+
itemId: (index: number) => string;
|
|
775
|
+
isKeyboardActive: () => boolean;
|
|
776
|
+
setKeyboardActive: (value: boolean) => void;
|
|
777
|
+
transitionStatus: _angular_core.Signal<_radix_ng_primitives_types_radix_ng_primitives_core.RdxTransitionStatus>;
|
|
778
|
+
registerTransitionElement: (element: HTMLElement) => () => void;
|
|
779
|
+
visibleCount: _angular_core.Signal<number>;
|
|
780
|
+
isVisible: (item: _radix_ng_primitives_combobox.ComboboxItemRef) => boolean;
|
|
781
|
+
isSelected: (value: _radix_ng_primitives_types_radix_ng_primitives_core.AcceptableValue) => boolean;
|
|
782
|
+
registerItem: (item: _radix_ng_primitives_combobox.ComboboxItemRef) => void;
|
|
783
|
+
unregisterItem: (item: _radix_ng_primitives_combobox.ComboboxItemRef) => void;
|
|
784
|
+
highlight: _radix_ng_primitives_types_radix_ng_primitives_core.ListHighlight<_radix_ng_primitives_combobox.ComboboxItemRef>;
|
|
785
|
+
highlightNext: () => void;
|
|
786
|
+
highlightPrevious: () => void;
|
|
787
|
+
highlightNextColumn: () => void;
|
|
788
|
+
highlightPreviousColumn: () => void;
|
|
789
|
+
highlightFirst: () => void;
|
|
790
|
+
highlightLast: () => void;
|
|
791
|
+
highlightIndex: (index: number, reason: _radix_ng_primitives_combobox.ComboboxHighlightReason) => void;
|
|
792
|
+
setHighlight: (item: _radix_ng_primitives_combobox.ComboboxItemRef, reason: _radix_ng_primitives_combobox.ComboboxHighlightReason) => void;
|
|
793
|
+
clearHighlight: () => void;
|
|
794
|
+
highlightItemOnHover: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
795
|
+
keepHighlight: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
796
|
+
inputElement: _angular_core.Signal<HTMLInputElement | null>;
|
|
797
|
+
setInputElement: (el: HTMLInputElement | null) => void;
|
|
798
|
+
inputLayout: _angular_core.Signal<_radix_ng_primitives_combobox.ComboboxInputLayout>;
|
|
799
|
+
setInputLayout: (layout: _radix_ng_primitives_combobox.ComboboxInputLayout) => void;
|
|
800
|
+
openedByTouch: _angular_core.Signal<boolean>;
|
|
801
|
+
setOpenedByTouch: (value: boolean) => void;
|
|
802
|
+
popupMounted: _angular_core.Signal<boolean>;
|
|
803
|
+
setPopupMounted: (value: boolean) => void;
|
|
804
|
+
registerTrigger: (el: HTMLElement | null) => void;
|
|
805
|
+
focusInput: () => void;
|
|
806
|
+
openPopup: (reason?: _radix_ng_primitives_combobox.RdxComboboxOpenChangeReason, event?: Event) => boolean;
|
|
807
|
+
openForBrowse: (reason?: _radix_ng_primitives_combobox.RdxComboboxOpenChangeReason, event?: Event) => void;
|
|
808
|
+
closePopup: (revert?: boolean, reason?: _radix_ng_primitives_combobox.RdxComboboxOpenChangeReason, event?: Event) => void;
|
|
809
|
+
setInputValue: (value: string) => void;
|
|
810
|
+
openAndHighlight: (edge: "first" | "last", reason?: _radix_ng_primitives_combobox.RdxComboboxOpenChangeReason, event?: Event) => void;
|
|
811
|
+
navigateByKeyboard: (direction: 1 | -1, event?: Event) => void;
|
|
812
|
+
select: (item: _radix_ng_primitives_combobox.ComboboxItemRef, event?: Event) => void;
|
|
813
|
+
selectIndex: (index: number, event?: Event) => void;
|
|
814
|
+
selectHighlighted: (event?: Event) => void;
|
|
815
|
+
clearSelection: () => void;
|
|
816
|
+
removeValue: (value: _radix_ng_primitives_types_radix_ng_primitives_core.AcceptableValue) => void;
|
|
817
|
+
removeLastValue: () => void;
|
|
818
|
+
registerChipsNav: (fn: (() => boolean) | null) => void;
|
|
819
|
+
focusLastChip: () => boolean;
|
|
820
|
+
labelFor: (value: _radix_ng_primitives_types_radix_ng_primitives_core.AcceptableValue) => string;
|
|
821
|
+
markAsTouched: () => void;
|
|
822
|
+
};
|
|
823
|
+
/** Whether a value is selected (a non-empty array in multiple mode, or a non-nullish single value). */
|
|
824
|
+
protected readonly filled: _angular_core.Signal<boolean>;
|
|
825
|
+
protected readonly dataAttr: (value: boolean) => "" | undefined;
|
|
826
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxComboboxInputGroup, never>;
|
|
827
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxComboboxInputGroup, "[rdxComboboxInputGroup]", ["rdxComboboxInputGroup"], {}, {}, never, never, true, never>;
|
|
558
828
|
}
|
|
559
829
|
|
|
560
830
|
/**
|
|
@@ -581,19 +851,30 @@ declare class RdxComboboxValue {
|
|
|
581
851
|
}
|
|
582
852
|
|
|
583
853
|
/**
|
|
584
|
-
* Toggles the combobox popup.
|
|
854
|
+
* Toggles the combobox popup. Its semantics depend on the layout (Base UI's `inputInsidePopup`):
|
|
855
|
+
*
|
|
856
|
+
* - **Input outside the popup** (default): a `tabindex="-1"` toggle button (`aria-haspopup="listbox"`)
|
|
857
|
+
* that never steals focus from the input — `Tab` lands directly on the input.
|
|
858
|
+
* - **Input inside the popup** (e.g. a command palette / emoji picker): the trigger becomes the primary
|
|
859
|
+
* `role="combobox"` control — `tabindex="0"` (reachable via `Tab`), `aria-haspopup="dialog"`, and
|
|
860
|
+
* `ArrowDown`/`ArrowUp` open the popup (which moves focus to the inner input and highlights an item).
|
|
861
|
+
*
|
|
862
|
+
* The trigger stays `Tab`-reachable by default and is demoted to `tabindex="-1"` only once an input is
|
|
863
|
+
* detected *outside* the popup — so a trigger whose input lives in a not-yet-opened popup is focusable
|
|
864
|
+
* from the first render (`inputLayout` is `unknown` until that input mounts).
|
|
585
865
|
*
|
|
586
866
|
* @group Components
|
|
587
867
|
*/
|
|
588
868
|
declare class RdxComboboxTrigger {
|
|
589
869
|
protected readonly rootContext: {
|
|
590
870
|
listId: string;
|
|
591
|
-
labelId: _angular_core.
|
|
871
|
+
labelId: _angular_core.Signal<string | undefined>;
|
|
592
872
|
setLabelId: (id: string | undefined) => void;
|
|
593
|
-
dir: _angular_core.
|
|
873
|
+
dir: _angular_core.Signal<_radix_ng_primitives_types_radix_ng_primitives_core.Direction>;
|
|
594
874
|
value: _angular_core.ModelSignal<_radix_ng_primitives_combobox.ComboboxValue>;
|
|
595
875
|
inputValue: _angular_core.ModelSignal<string>;
|
|
596
876
|
open: _angular_core.ModelSignal<boolean>;
|
|
877
|
+
present: _angular_core.Signal<boolean>;
|
|
597
878
|
multiple: _angular_core.Signal<boolean>;
|
|
598
879
|
selectionMode: _angular_core.Signal<"none" | "single" | "multiple">;
|
|
599
880
|
disabledState: _angular_core.Signal<boolean>;
|
|
@@ -602,6 +883,7 @@ declare class RdxComboboxTrigger {
|
|
|
602
883
|
openOnInputClick: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
603
884
|
modal: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
604
885
|
virtualized: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
886
|
+
grid: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
605
887
|
filteredItems: _angular_core.Signal<readonly _radix_ng_primitives_types_radix_ng_primitives_core.AcceptableValue[]>;
|
|
606
888
|
highlightedItem: _angular_core.Signal<_radix_ng_primitives_combobox.ComboboxItemRef | null>;
|
|
607
889
|
highlightedIndex: _angular_core.Signal<number>;
|
|
@@ -619,23 +901,34 @@ declare class RdxComboboxTrigger {
|
|
|
619
901
|
highlight: _radix_ng_primitives_types_radix_ng_primitives_core.ListHighlight<_radix_ng_primitives_combobox.ComboboxItemRef>;
|
|
620
902
|
highlightNext: () => void;
|
|
621
903
|
highlightPrevious: () => void;
|
|
904
|
+
highlightNextColumn: () => void;
|
|
905
|
+
highlightPreviousColumn: () => void;
|
|
622
906
|
highlightFirst: () => void;
|
|
623
907
|
highlightLast: () => void;
|
|
624
908
|
highlightIndex: (index: number, reason: _radix_ng_primitives_combobox.ComboboxHighlightReason) => void;
|
|
625
909
|
setHighlight: (item: _radix_ng_primitives_combobox.ComboboxItemRef, reason: _radix_ng_primitives_combobox.ComboboxHighlightReason) => void;
|
|
626
910
|
clearHighlight: () => void;
|
|
911
|
+
highlightItemOnHover: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
912
|
+
keepHighlight: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
627
913
|
inputElement: _angular_core.Signal<HTMLInputElement | null>;
|
|
628
914
|
setInputElement: (el: HTMLInputElement | null) => void;
|
|
629
|
-
|
|
915
|
+
inputLayout: _angular_core.Signal<_radix_ng_primitives_combobox.ComboboxInputLayout>;
|
|
916
|
+
setInputLayout: (layout: _radix_ng_primitives_combobox.ComboboxInputLayout) => void;
|
|
917
|
+
openedByTouch: _angular_core.Signal<boolean>;
|
|
918
|
+
setOpenedByTouch: (value: boolean) => void;
|
|
919
|
+
popupMounted: _angular_core.Signal<boolean>;
|
|
920
|
+
setPopupMounted: (value: boolean) => void;
|
|
921
|
+
registerTrigger: (el: HTMLElement | null) => void;
|
|
630
922
|
focusInput: () => void;
|
|
631
|
-
openPopup: () =>
|
|
632
|
-
openForBrowse: () => void;
|
|
633
|
-
closePopup: (revert?: boolean) => void;
|
|
923
|
+
openPopup: (reason?: _radix_ng_primitives_combobox.RdxComboboxOpenChangeReason, event?: Event) => boolean;
|
|
924
|
+
openForBrowse: (reason?: _radix_ng_primitives_combobox.RdxComboboxOpenChangeReason, event?: Event) => void;
|
|
925
|
+
closePopup: (revert?: boolean, reason?: _radix_ng_primitives_combobox.RdxComboboxOpenChangeReason, event?: Event) => void;
|
|
634
926
|
setInputValue: (value: string) => void;
|
|
635
|
-
openAndHighlight: (edge: "first" | "last") => void;
|
|
636
|
-
|
|
637
|
-
|
|
638
|
-
|
|
927
|
+
openAndHighlight: (edge: "first" | "last", reason?: _radix_ng_primitives_combobox.RdxComboboxOpenChangeReason, event?: Event) => void;
|
|
928
|
+
navigateByKeyboard: (direction: 1 | -1, event?: Event) => void;
|
|
929
|
+
select: (item: _radix_ng_primitives_combobox.ComboboxItemRef, event?: Event) => void;
|
|
930
|
+
selectIndex: (index: number, event?: Event) => void;
|
|
931
|
+
selectHighlighted: (event?: Event) => void;
|
|
639
932
|
clearSelection: () => void;
|
|
640
933
|
removeValue: (value: _radix_ng_primitives_types_radix_ng_primitives_core.AcceptableValue) => void;
|
|
641
934
|
removeLastValue: () => void;
|
|
@@ -646,9 +939,11 @@ declare class RdxComboboxTrigger {
|
|
|
646
939
|
};
|
|
647
940
|
private readonly element;
|
|
648
941
|
constructor();
|
|
649
|
-
|
|
942
|
+
onPointerDown(event: PointerEvent): void;
|
|
943
|
+
onClick(event: MouseEvent): void;
|
|
944
|
+
onKeydown(event: KeyboardEvent): void;
|
|
650
945
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxComboboxTrigger, never>;
|
|
651
|
-
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxComboboxTrigger, "button[rdxComboboxTrigger]", ["rdxComboboxTrigger"], {}, {}, never, never, true, [{ directive: typeof i1$1.
|
|
946
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxComboboxTrigger, "button[rdxComboboxTrigger]", ["rdxComboboxTrigger"], {}, {}, never, never, true, [{ directive: typeof i1$1.RdxFloatingInsideElement; inputs: {}; outputs: {}; }]>;
|
|
652
947
|
}
|
|
653
948
|
|
|
654
949
|
/**
|
|
@@ -669,12 +964,13 @@ declare class RdxComboboxIcon {
|
|
|
669
964
|
declare class RdxComboboxClear {
|
|
670
965
|
protected readonly rootContext: {
|
|
671
966
|
listId: string;
|
|
672
|
-
labelId: _angular_core.
|
|
967
|
+
labelId: _angular_core.Signal<string | undefined>;
|
|
673
968
|
setLabelId: (id: string | undefined) => void;
|
|
674
|
-
dir: _angular_core.
|
|
969
|
+
dir: _angular_core.Signal<_radix_ng_primitives_types_radix_ng_primitives_core.Direction>;
|
|
675
970
|
value: _angular_core.ModelSignal<_radix_ng_primitives_combobox.ComboboxValue>;
|
|
676
971
|
inputValue: _angular_core.ModelSignal<string>;
|
|
677
972
|
open: _angular_core.ModelSignal<boolean>;
|
|
973
|
+
present: _angular_core.Signal<boolean>;
|
|
678
974
|
multiple: _angular_core.Signal<boolean>;
|
|
679
975
|
selectionMode: _angular_core.Signal<"none" | "single" | "multiple">;
|
|
680
976
|
disabledState: _angular_core.Signal<boolean>;
|
|
@@ -683,6 +979,7 @@ declare class RdxComboboxClear {
|
|
|
683
979
|
openOnInputClick: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
684
980
|
modal: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
685
981
|
virtualized: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
982
|
+
grid: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
686
983
|
filteredItems: _angular_core.Signal<readonly _radix_ng_primitives_types_radix_ng_primitives_core.AcceptableValue[]>;
|
|
687
984
|
highlightedItem: _angular_core.Signal<_radix_ng_primitives_combobox.ComboboxItemRef | null>;
|
|
688
985
|
highlightedIndex: _angular_core.Signal<number>;
|
|
@@ -700,23 +997,34 @@ declare class RdxComboboxClear {
|
|
|
700
997
|
highlight: _radix_ng_primitives_types_radix_ng_primitives_core.ListHighlight<_radix_ng_primitives_combobox.ComboboxItemRef>;
|
|
701
998
|
highlightNext: () => void;
|
|
702
999
|
highlightPrevious: () => void;
|
|
1000
|
+
highlightNextColumn: () => void;
|
|
1001
|
+
highlightPreviousColumn: () => void;
|
|
703
1002
|
highlightFirst: () => void;
|
|
704
1003
|
highlightLast: () => void;
|
|
705
1004
|
highlightIndex: (index: number, reason: _radix_ng_primitives_combobox.ComboboxHighlightReason) => void;
|
|
706
1005
|
setHighlight: (item: _radix_ng_primitives_combobox.ComboboxItemRef, reason: _radix_ng_primitives_combobox.ComboboxHighlightReason) => void;
|
|
707
1006
|
clearHighlight: () => void;
|
|
1007
|
+
highlightItemOnHover: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1008
|
+
keepHighlight: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
708
1009
|
inputElement: _angular_core.Signal<HTMLInputElement | null>;
|
|
709
1010
|
setInputElement: (el: HTMLInputElement | null) => void;
|
|
710
|
-
|
|
1011
|
+
inputLayout: _angular_core.Signal<_radix_ng_primitives_combobox.ComboboxInputLayout>;
|
|
1012
|
+
setInputLayout: (layout: _radix_ng_primitives_combobox.ComboboxInputLayout) => void;
|
|
1013
|
+
openedByTouch: _angular_core.Signal<boolean>;
|
|
1014
|
+
setOpenedByTouch: (value: boolean) => void;
|
|
1015
|
+
popupMounted: _angular_core.Signal<boolean>;
|
|
1016
|
+
setPopupMounted: (value: boolean) => void;
|
|
1017
|
+
registerTrigger: (el: HTMLElement | null) => void;
|
|
711
1018
|
focusInput: () => void;
|
|
712
|
-
openPopup: () =>
|
|
713
|
-
openForBrowse: () => void;
|
|
714
|
-
closePopup: (revert?: boolean) => void;
|
|
1019
|
+
openPopup: (reason?: _radix_ng_primitives_combobox.RdxComboboxOpenChangeReason, event?: Event) => boolean;
|
|
1020
|
+
openForBrowse: (reason?: _radix_ng_primitives_combobox.RdxComboboxOpenChangeReason, event?: Event) => void;
|
|
1021
|
+
closePopup: (revert?: boolean, reason?: _radix_ng_primitives_combobox.RdxComboboxOpenChangeReason, event?: Event) => void;
|
|
715
1022
|
setInputValue: (value: string) => void;
|
|
716
|
-
openAndHighlight: (edge: "first" | "last") => void;
|
|
717
|
-
|
|
718
|
-
|
|
719
|
-
|
|
1023
|
+
openAndHighlight: (edge: "first" | "last", reason?: _radix_ng_primitives_combobox.RdxComboboxOpenChangeReason, event?: Event) => void;
|
|
1024
|
+
navigateByKeyboard: (direction: 1 | -1, event?: Event) => void;
|
|
1025
|
+
select: (item: _radix_ng_primitives_combobox.ComboboxItemRef, event?: Event) => void;
|
|
1026
|
+
selectIndex: (index: number, event?: Event) => void;
|
|
1027
|
+
selectHighlighted: (event?: Event) => void;
|
|
720
1028
|
clearSelection: () => void;
|
|
721
1029
|
removeValue: (value: _radix_ng_primitives_types_radix_ng_primitives_core.AcceptableValue) => void;
|
|
722
1030
|
removeLastValue: () => void;
|
|
@@ -725,31 +1033,52 @@ declare class RdxComboboxClear {
|
|
|
725
1033
|
labelFor: (value: _radix_ng_primitives_types_radix_ng_primitives_core.AcceptableValue) => string;
|
|
726
1034
|
markAsTouched: () => void;
|
|
727
1035
|
};
|
|
1036
|
+
/** Disables just this clear button (in addition to the combobox's own disabled / read-only state). */
|
|
1037
|
+
readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1038
|
+
protected readonly isDisabled: _angular_core.Signal<boolean>;
|
|
1039
|
+
/**
|
|
1040
|
+
* Whether there is nothing to clear, mirroring Base UI's visibility rule: in `none` mode the
|
|
1041
|
+
* button tracks the input text (a pure search field has no selection), otherwise it tracks the
|
|
1042
|
+
* selected value(s).
|
|
1043
|
+
*/
|
|
728
1044
|
protected readonly isEmpty: _angular_core.Signal<boolean>;
|
|
1045
|
+
onPointerDown(event: MouseEvent): void;
|
|
729
1046
|
onClick(): void;
|
|
730
1047
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxComboboxClear, never>;
|
|
731
|
-
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxComboboxClear, "button[rdxComboboxClear]", ["rdxComboboxClear"], {}, {}, never, never, true, [{ directive: typeof i1$1.
|
|
1048
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxComboboxClear, "button[rdxComboboxClear]", ["rdxComboboxClear"], { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1$1.RdxFloatingInsideElement; inputs: {}; outputs: {}; }]>;
|
|
732
1049
|
}
|
|
733
1050
|
|
|
734
1051
|
/**
|
|
735
|
-
*
|
|
1052
|
+
* Structural directive that teleports the combobox popup into a container (default `document.body`)
|
|
1053
|
+
* while the combobox is open, and keeps it mounted until any CSS exit `@keyframes` finishes.
|
|
1054
|
+
*
|
|
1055
|
+
* Apply it with the `*` microsyntax on the positioner —
|
|
1056
|
+
* `<div *rdxComboboxPortal rdxComboboxPositioner>` — or as an explicit `<ng-template rdxComboboxPortal>`.
|
|
1057
|
+
* For a custom container use the explicit form with `[container]`.
|
|
736
1058
|
*
|
|
737
1059
|
* @group Components
|
|
738
1060
|
*/
|
|
739
1061
|
declare class RdxComboboxPortal {
|
|
1062
|
+
/**
|
|
1063
|
+
* Optional container to portal the content into. Defaults to `document.body`. Declared here (and
|
|
1064
|
+
* forwarded to the composed {@link RdxPortalPresence}) so the autocomplete portal can re-expose it
|
|
1065
|
+
* through its own `hostDirectives`.
|
|
1066
|
+
*/
|
|
1067
|
+
readonly container: _angular_core.InputSignal<RdxPortalContainer | undefined>;
|
|
740
1068
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxComboboxPortal, never>;
|
|
741
|
-
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxComboboxPortal, "[rdxComboboxPortal]", ["rdxComboboxPortal"], {}, {}, never, never, true, [{ directive: typeof i1$2.
|
|
1069
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxComboboxPortal, "ng-template[rdxComboboxPortal]", ["rdxComboboxPortal"], { "container": { "alias": "container"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1$2.RdxPortalPresence; inputs: { "container": "container"; }; outputs: {}; }]>;
|
|
742
1070
|
}
|
|
743
|
-
|
|
744
1071
|
/**
|
|
745
|
-
*
|
|
746
|
-
*
|
|
1072
|
+
* Dev-mode guard: `rdxComboboxPortal` used to be an attribute directive on a `<div>`. It is now
|
|
1073
|
+
* structural, so the old `<div rdxComboboxPortal>` markup would silently stop portaling — fail loudly
|
|
1074
|
+
* instead.
|
|
747
1075
|
*
|
|
748
1076
|
* @group Components
|
|
749
1077
|
*/
|
|
750
|
-
declare class
|
|
751
|
-
|
|
752
|
-
static
|
|
1078
|
+
declare class RdxComboboxPortalMisuseGuard {
|
|
1079
|
+
constructor();
|
|
1080
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxComboboxPortalMisuseGuard, never>;
|
|
1081
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxComboboxPortalMisuseGuard, "[rdxComboboxPortal]:not(ng-template)", never, {}, {}, never, never, true, never>;
|
|
753
1082
|
}
|
|
754
1083
|
|
|
755
1084
|
/**
|
|
@@ -762,12 +1091,13 @@ declare class RdxComboboxPortalPresence {
|
|
|
762
1091
|
declare class RdxComboboxBackdrop {
|
|
763
1092
|
protected readonly rootContext: {
|
|
764
1093
|
listId: string;
|
|
765
|
-
labelId: _angular_core.
|
|
1094
|
+
labelId: _angular_core.Signal<string | undefined>;
|
|
766
1095
|
setLabelId: (id: string | undefined) => void;
|
|
767
|
-
dir: _angular_core.
|
|
1096
|
+
dir: _angular_core.Signal<_radix_ng_primitives_types_radix_ng_primitives_core.Direction>;
|
|
768
1097
|
value: _angular_core.ModelSignal<_radix_ng_primitives_combobox.ComboboxValue>;
|
|
769
1098
|
inputValue: _angular_core.ModelSignal<string>;
|
|
770
1099
|
open: _angular_core.ModelSignal<boolean>;
|
|
1100
|
+
present: _angular_core.Signal<boolean>;
|
|
771
1101
|
multiple: _angular_core.Signal<boolean>;
|
|
772
1102
|
selectionMode: _angular_core.Signal<"none" | "single" | "multiple">;
|
|
773
1103
|
disabledState: _angular_core.Signal<boolean>;
|
|
@@ -776,6 +1106,7 @@ declare class RdxComboboxBackdrop {
|
|
|
776
1106
|
openOnInputClick: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
777
1107
|
modal: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
778
1108
|
virtualized: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1109
|
+
grid: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
779
1110
|
filteredItems: _angular_core.Signal<readonly _radix_ng_primitives_types_radix_ng_primitives_core.AcceptableValue[]>;
|
|
780
1111
|
highlightedItem: _angular_core.Signal<_radix_ng_primitives_combobox.ComboboxItemRef | null>;
|
|
781
1112
|
highlightedIndex: _angular_core.Signal<number>;
|
|
@@ -793,23 +1124,34 @@ declare class RdxComboboxBackdrop {
|
|
|
793
1124
|
highlight: _radix_ng_primitives_types_radix_ng_primitives_core.ListHighlight<_radix_ng_primitives_combobox.ComboboxItemRef>;
|
|
794
1125
|
highlightNext: () => void;
|
|
795
1126
|
highlightPrevious: () => void;
|
|
1127
|
+
highlightNextColumn: () => void;
|
|
1128
|
+
highlightPreviousColumn: () => void;
|
|
796
1129
|
highlightFirst: () => void;
|
|
797
1130
|
highlightLast: () => void;
|
|
798
1131
|
highlightIndex: (index: number, reason: _radix_ng_primitives_combobox.ComboboxHighlightReason) => void;
|
|
799
1132
|
setHighlight: (item: _radix_ng_primitives_combobox.ComboboxItemRef, reason: _radix_ng_primitives_combobox.ComboboxHighlightReason) => void;
|
|
800
1133
|
clearHighlight: () => void;
|
|
1134
|
+
highlightItemOnHover: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1135
|
+
keepHighlight: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
801
1136
|
inputElement: _angular_core.Signal<HTMLInputElement | null>;
|
|
802
1137
|
setInputElement: (el: HTMLInputElement | null) => void;
|
|
803
|
-
|
|
1138
|
+
inputLayout: _angular_core.Signal<_radix_ng_primitives_combobox.ComboboxInputLayout>;
|
|
1139
|
+
setInputLayout: (layout: _radix_ng_primitives_combobox.ComboboxInputLayout) => void;
|
|
1140
|
+
openedByTouch: _angular_core.Signal<boolean>;
|
|
1141
|
+
setOpenedByTouch: (value: boolean) => void;
|
|
1142
|
+
popupMounted: _angular_core.Signal<boolean>;
|
|
1143
|
+
setPopupMounted: (value: boolean) => void;
|
|
1144
|
+
registerTrigger: (el: HTMLElement | null) => void;
|
|
804
1145
|
focusInput: () => void;
|
|
805
|
-
openPopup: () =>
|
|
806
|
-
openForBrowse: () => void;
|
|
807
|
-
closePopup: (revert?: boolean) => void;
|
|
1146
|
+
openPopup: (reason?: _radix_ng_primitives_combobox.RdxComboboxOpenChangeReason, event?: Event) => boolean;
|
|
1147
|
+
openForBrowse: (reason?: _radix_ng_primitives_combobox.RdxComboboxOpenChangeReason, event?: Event) => void;
|
|
1148
|
+
closePopup: (revert?: boolean, reason?: _radix_ng_primitives_combobox.RdxComboboxOpenChangeReason, event?: Event) => void;
|
|
808
1149
|
setInputValue: (value: string) => void;
|
|
809
|
-
openAndHighlight: (edge: "first" | "last") => void;
|
|
810
|
-
|
|
811
|
-
|
|
812
|
-
|
|
1150
|
+
openAndHighlight: (edge: "first" | "last", reason?: _radix_ng_primitives_combobox.RdxComboboxOpenChangeReason, event?: Event) => void;
|
|
1151
|
+
navigateByKeyboard: (direction: 1 | -1, event?: Event) => void;
|
|
1152
|
+
select: (item: _radix_ng_primitives_combobox.ComboboxItemRef, event?: Event) => void;
|
|
1153
|
+
selectIndex: (index: number, event?: Event) => void;
|
|
1154
|
+
selectHighlighted: (event?: Event) => void;
|
|
813
1155
|
clearSelection: () => void;
|
|
814
1156
|
removeValue: (value: _radix_ng_primitives_types_radix_ng_primitives_core.AcceptableValue) => void;
|
|
815
1157
|
removeLastValue: () => void;
|
|
@@ -823,25 +1165,20 @@ declare class RdxComboboxBackdrop {
|
|
|
823
1165
|
}
|
|
824
1166
|
|
|
825
1167
|
/**
|
|
826
|
-
* Positions the popup relative to the input anchor using the popper engine.
|
|
827
|
-
*
|
|
1168
|
+
* Positions the combobox popup relative to the input anchor using the popper engine.
|
|
1169
|
+
*
|
|
1170
|
+
* A "thin" positioner (ADR 0012): it inherits the full popper positioning surface — the inputs
|
|
1171
|
+
* (`side`, `sideOffset`, `align`, …), the `placed` output, and the host bindings — from
|
|
1172
|
+
* {@link RdxPopperContentWrapper}, and only declares combobox's Base UI-aligned defaults through the
|
|
1173
|
+
* config provider. `provideRdxPopperContentWrapper` re-wires the `useExisting` alias + context that
|
|
1174
|
+
* the popup and arrow resolve (Angular does not inherit a base directive's `providers`).
|
|
828
1175
|
*
|
|
829
1176
|
* @group Components
|
|
830
1177
|
*/
|
|
831
|
-
declare class RdxComboboxPositioner {
|
|
832
|
-
|
|
833
|
-
readonly sideOffset: _angular_core.InputSignalWithTransform<number, unknown>;
|
|
834
|
-
readonly align: _angular_core.InputSignal<"center" | "start" | "end">;
|
|
835
|
-
readonly alignOffset: _angular_core.InputSignalWithTransform<number, unknown>;
|
|
836
|
-
readonly arrowPadding: _angular_core.InputSignalWithTransform<number, unknown>;
|
|
837
|
-
readonly avoidCollisions: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
838
|
-
readonly collisionBoundary: _angular_core.InputSignal<ElementRef<HTMLElement> | ElementRef<HTMLElement>[] | undefined>;
|
|
839
|
-
readonly collisionPadding: _angular_core.InputSignal<number | Partial<Record<"top" | "right" | "bottom" | "left", number>>>;
|
|
840
|
-
readonly sticky: _angular_core.InputSignal<"always" | "partial">;
|
|
841
|
-
readonly hideWhenDetached: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
842
|
-
readonly updatePositionStrategy: _angular_core.InputSignal<"always" | "optimized">;
|
|
1178
|
+
declare class RdxComboboxPositioner extends RdxPopperContentWrapper {
|
|
1179
|
+
constructor();
|
|
843
1180
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxComboboxPositioner, never>;
|
|
844
|
-
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxComboboxPositioner, "[rdxComboboxPositioner]", ["rdxComboboxPositioner"], {
|
|
1181
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxComboboxPositioner, "[rdxComboboxPositioner]", ["rdxComboboxPositioner"], {}, {}, never, never, true, never>;
|
|
845
1182
|
}
|
|
846
1183
|
|
|
847
1184
|
/**
|
|
@@ -853,12 +1190,13 @@ declare class RdxComboboxPositioner {
|
|
|
853
1190
|
declare class RdxComboboxPopup {
|
|
854
1191
|
protected readonly rootContext: {
|
|
855
1192
|
listId: string;
|
|
856
|
-
labelId: _angular_core.
|
|
1193
|
+
labelId: _angular_core.Signal<string | undefined>;
|
|
857
1194
|
setLabelId: (id: string | undefined) => void;
|
|
858
|
-
dir: _angular_core.
|
|
1195
|
+
dir: _angular_core.Signal<_radix_ng_primitives_core.Direction>;
|
|
859
1196
|
value: _angular_core.ModelSignal<_radix_ng_primitives_combobox.ComboboxValue>;
|
|
860
1197
|
inputValue: _angular_core.ModelSignal<string>;
|
|
861
1198
|
open: _angular_core.ModelSignal<boolean>;
|
|
1199
|
+
present: _angular_core.Signal<boolean>;
|
|
862
1200
|
multiple: _angular_core.Signal<boolean>;
|
|
863
1201
|
selectionMode: _angular_core.Signal<"none" | "single" | "multiple">;
|
|
864
1202
|
disabledState: _angular_core.Signal<boolean>;
|
|
@@ -867,6 +1205,7 @@ declare class RdxComboboxPopup {
|
|
|
867
1205
|
openOnInputClick: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
868
1206
|
modal: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
869
1207
|
virtualized: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1208
|
+
grid: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
870
1209
|
filteredItems: _angular_core.Signal<readonly _radix_ng_primitives_core.AcceptableValue[]>;
|
|
871
1210
|
highlightedItem: _angular_core.Signal<_radix_ng_primitives_combobox.ComboboxItemRef | null>;
|
|
872
1211
|
highlightedIndex: _angular_core.Signal<number>;
|
|
@@ -884,23 +1223,34 @@ declare class RdxComboboxPopup {
|
|
|
884
1223
|
highlight: _radix_ng_primitives_core.ListHighlight<_radix_ng_primitives_combobox.ComboboxItemRef>;
|
|
885
1224
|
highlightNext: () => void;
|
|
886
1225
|
highlightPrevious: () => void;
|
|
1226
|
+
highlightNextColumn: () => void;
|
|
1227
|
+
highlightPreviousColumn: () => void;
|
|
887
1228
|
highlightFirst: () => void;
|
|
888
1229
|
highlightLast: () => void;
|
|
889
1230
|
highlightIndex: (index: number, reason: _radix_ng_primitives_combobox.ComboboxHighlightReason) => void;
|
|
890
1231
|
setHighlight: (item: _radix_ng_primitives_combobox.ComboboxItemRef, reason: _radix_ng_primitives_combobox.ComboboxHighlightReason) => void;
|
|
891
1232
|
clearHighlight: () => void;
|
|
1233
|
+
highlightItemOnHover: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1234
|
+
keepHighlight: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
892
1235
|
inputElement: _angular_core.Signal<HTMLInputElement | null>;
|
|
893
1236
|
setInputElement: (el: HTMLInputElement | null) => void;
|
|
894
|
-
|
|
1237
|
+
inputLayout: _angular_core.Signal<_radix_ng_primitives_combobox.ComboboxInputLayout>;
|
|
1238
|
+
setInputLayout: (layout: _radix_ng_primitives_combobox.ComboboxInputLayout) => void;
|
|
1239
|
+
openedByTouch: _angular_core.Signal<boolean>;
|
|
1240
|
+
setOpenedByTouch: (value: boolean) => void;
|
|
1241
|
+
popupMounted: _angular_core.Signal<boolean>;
|
|
1242
|
+
setPopupMounted: (value: boolean) => void;
|
|
1243
|
+
registerTrigger: (el: HTMLElement | null) => void;
|
|
895
1244
|
focusInput: () => void;
|
|
896
|
-
openPopup: () =>
|
|
897
|
-
openForBrowse: () => void;
|
|
898
|
-
closePopup: (revert?: boolean) => void;
|
|
1245
|
+
openPopup: (reason?: _radix_ng_primitives_combobox.RdxComboboxOpenChangeReason, event?: Event) => boolean;
|
|
1246
|
+
openForBrowse: (reason?: _radix_ng_primitives_combobox.RdxComboboxOpenChangeReason, event?: Event) => void;
|
|
1247
|
+
closePopup: (revert?: boolean, reason?: _radix_ng_primitives_combobox.RdxComboboxOpenChangeReason, event?: Event) => void;
|
|
899
1248
|
setInputValue: (value: string) => void;
|
|
900
|
-
openAndHighlight: (edge: "first" | "last") => void;
|
|
901
|
-
|
|
902
|
-
|
|
903
|
-
|
|
1249
|
+
openAndHighlight: (edge: "first" | "last", reason?: _radix_ng_primitives_combobox.RdxComboboxOpenChangeReason, event?: Event) => void;
|
|
1250
|
+
navigateByKeyboard: (direction: 1 | -1, event?: Event) => void;
|
|
1251
|
+
select: (item: _radix_ng_primitives_combobox.ComboboxItemRef, event?: Event) => void;
|
|
1252
|
+
selectIndex: (index: number, event?: Event) => void;
|
|
1253
|
+
selectHighlighted: (event?: Event) => void;
|
|
904
1254
|
clearSelection: () => void;
|
|
905
1255
|
removeValue: (value: _radix_ng_primitives_core.AcceptableValue) => void;
|
|
906
1256
|
removeLastValue: () => void;
|
|
@@ -909,12 +1259,20 @@ declare class RdxComboboxPopup {
|
|
|
909
1259
|
labelFor: (value: _radix_ng_primitives_core.AcceptableValue) => string;
|
|
910
1260
|
markAsTouched: () => void;
|
|
911
1261
|
};
|
|
912
|
-
private readonly
|
|
1262
|
+
private readonly floatingContext;
|
|
1263
|
+
private readonly registration;
|
|
913
1264
|
private readonly popper;
|
|
914
1265
|
private readonly element;
|
|
915
1266
|
constructor();
|
|
1267
|
+
/**
|
|
1268
|
+
* Base UI focus handoff: if focus lands on the popup or the list (the `tabindex="-1"` programmatic
|
|
1269
|
+
* focus targets), hand it back to the input so arrow-key navigation (`aria-activedescendant`) keeps
|
|
1270
|
+
* working. Skipped for a touch interaction, where focus is intentionally parked on the popup to keep
|
|
1271
|
+
* the Android virtual keyboard closed.
|
|
1272
|
+
*/
|
|
1273
|
+
onFocusIn(event: FocusEvent): void;
|
|
916
1274
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxComboboxPopup, never>;
|
|
917
|
-
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxComboboxPopup, "[rdxComboboxPopup]", ["rdxComboboxPopup"], {}, {}, never, never, true, [{ directive: typeof i1.RdxPopperContent; inputs: {}; outputs: {}; }, { directive: typeof
|
|
1275
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxComboboxPopup, "[rdxComboboxPopup]", ["rdxComboboxPopup"], {}, {}, never, never, true, [{ directive: typeof i1.RdxPopperContent; inputs: {}; outputs: {}; }, { directive: typeof _radix_ng_primitives_core.RdxFloatingNodeRegistration; inputs: {}; outputs: {}; }]>;
|
|
918
1276
|
}
|
|
919
1277
|
|
|
920
1278
|
/**
|
|
@@ -929,19 +1287,22 @@ declare class RdxComboboxArrow {
|
|
|
929
1287
|
}
|
|
930
1288
|
|
|
931
1289
|
/**
|
|
932
|
-
* The listbox container for options. Carries the id referenced by the input's `aria-controls
|
|
1290
|
+
* The listbox container for options. Carries the id referenced by the input's `aria-controls`, exposes
|
|
1291
|
+
* `data-empty` while no options match the current query (Base UI's `ComboboxList` empty state), and
|
|
1292
|
+
* switches its `role` to `grid` when the root has `grid` enabled.
|
|
933
1293
|
*
|
|
934
1294
|
* @group Components
|
|
935
1295
|
*/
|
|
936
1296
|
declare class RdxComboboxList {
|
|
937
1297
|
protected readonly rootContext: {
|
|
938
1298
|
listId: string;
|
|
939
|
-
labelId: _angular_core.
|
|
1299
|
+
labelId: _angular_core.Signal<string | undefined>;
|
|
940
1300
|
setLabelId: (id: string | undefined) => void;
|
|
941
|
-
dir: _angular_core.
|
|
1301
|
+
dir: _angular_core.Signal<_radix_ng_primitives_types_radix_ng_primitives_core.Direction>;
|
|
942
1302
|
value: _angular_core.ModelSignal<_radix_ng_primitives_combobox.ComboboxValue>;
|
|
943
1303
|
inputValue: _angular_core.ModelSignal<string>;
|
|
944
1304
|
open: _angular_core.ModelSignal<boolean>;
|
|
1305
|
+
present: _angular_core.Signal<boolean>;
|
|
945
1306
|
multiple: _angular_core.Signal<boolean>;
|
|
946
1307
|
selectionMode: _angular_core.Signal<"none" | "single" | "multiple">;
|
|
947
1308
|
disabledState: _angular_core.Signal<boolean>;
|
|
@@ -950,6 +1311,7 @@ declare class RdxComboboxList {
|
|
|
950
1311
|
openOnInputClick: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
951
1312
|
modal: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
952
1313
|
virtualized: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1314
|
+
grid: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
953
1315
|
filteredItems: _angular_core.Signal<readonly _radix_ng_primitives_types_radix_ng_primitives_core.AcceptableValue[]>;
|
|
954
1316
|
highlightedItem: _angular_core.Signal<_radix_ng_primitives_combobox.ComboboxItemRef | null>;
|
|
955
1317
|
highlightedIndex: _angular_core.Signal<number>;
|
|
@@ -967,23 +1329,34 @@ declare class RdxComboboxList {
|
|
|
967
1329
|
highlight: _radix_ng_primitives_types_radix_ng_primitives_core.ListHighlight<_radix_ng_primitives_combobox.ComboboxItemRef>;
|
|
968
1330
|
highlightNext: () => void;
|
|
969
1331
|
highlightPrevious: () => void;
|
|
1332
|
+
highlightNextColumn: () => void;
|
|
1333
|
+
highlightPreviousColumn: () => void;
|
|
970
1334
|
highlightFirst: () => void;
|
|
971
1335
|
highlightLast: () => void;
|
|
972
1336
|
highlightIndex: (index: number, reason: _radix_ng_primitives_combobox.ComboboxHighlightReason) => void;
|
|
973
1337
|
setHighlight: (item: _radix_ng_primitives_combobox.ComboboxItemRef, reason: _radix_ng_primitives_combobox.ComboboxHighlightReason) => void;
|
|
974
1338
|
clearHighlight: () => void;
|
|
1339
|
+
highlightItemOnHover: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1340
|
+
keepHighlight: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
975
1341
|
inputElement: _angular_core.Signal<HTMLInputElement | null>;
|
|
976
1342
|
setInputElement: (el: HTMLInputElement | null) => void;
|
|
977
|
-
|
|
1343
|
+
inputLayout: _angular_core.Signal<_radix_ng_primitives_combobox.ComboboxInputLayout>;
|
|
1344
|
+
setInputLayout: (layout: _radix_ng_primitives_combobox.ComboboxInputLayout) => void;
|
|
1345
|
+
openedByTouch: _angular_core.Signal<boolean>;
|
|
1346
|
+
setOpenedByTouch: (value: boolean) => void;
|
|
1347
|
+
popupMounted: _angular_core.Signal<boolean>;
|
|
1348
|
+
setPopupMounted: (value: boolean) => void;
|
|
1349
|
+
registerTrigger: (el: HTMLElement | null) => void;
|
|
978
1350
|
focusInput: () => void;
|
|
979
|
-
openPopup: () =>
|
|
980
|
-
openForBrowse: () => void;
|
|
981
|
-
closePopup: (revert?: boolean) => void;
|
|
1351
|
+
openPopup: (reason?: _radix_ng_primitives_combobox.RdxComboboxOpenChangeReason, event?: Event) => boolean;
|
|
1352
|
+
openForBrowse: (reason?: _radix_ng_primitives_combobox.RdxComboboxOpenChangeReason, event?: Event) => void;
|
|
1353
|
+
closePopup: (revert?: boolean, reason?: _radix_ng_primitives_combobox.RdxComboboxOpenChangeReason, event?: Event) => void;
|
|
982
1354
|
setInputValue: (value: string) => void;
|
|
983
|
-
openAndHighlight: (edge: "first" | "last") => void;
|
|
984
|
-
|
|
985
|
-
|
|
986
|
-
|
|
1355
|
+
openAndHighlight: (edge: "first" | "last", reason?: _radix_ng_primitives_combobox.RdxComboboxOpenChangeReason, event?: Event) => void;
|
|
1356
|
+
navigateByKeyboard: (direction: 1 | -1, event?: Event) => void;
|
|
1357
|
+
select: (item: _radix_ng_primitives_combobox.ComboboxItemRef, event?: Event) => void;
|
|
1358
|
+
selectIndex: (index: number, event?: Event) => void;
|
|
1359
|
+
selectHighlighted: (event?: Event) => void;
|
|
987
1360
|
clearSelection: () => void;
|
|
988
1361
|
removeValue: (value: _radix_ng_primitives_types_radix_ng_primitives_core.AcceptableValue) => void;
|
|
989
1362
|
removeLastValue: () => void;
|
|
@@ -992,28 +1365,41 @@ declare class RdxComboboxList {
|
|
|
992
1365
|
labelFor: (value: _radix_ng_primitives_types_radix_ng_primitives_core.AcceptableValue) => string;
|
|
993
1366
|
markAsTouched: () => void;
|
|
994
1367
|
};
|
|
1368
|
+
onKeydown(event: KeyboardEvent): void;
|
|
995
1369
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxComboboxList, never>;
|
|
996
1370
|
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxComboboxList, "[rdxComboboxList]", ["rdxComboboxList"], {}, {}, never, never, true, never>;
|
|
997
1371
|
}
|
|
998
1372
|
|
|
1373
|
+
/**
|
|
1374
|
+
* A row in a grid-layout combobox list. Groups the items in one row so the root can navigate by row
|
|
1375
|
+
* (`ArrowUp` / `ArrowDown`) and within a row (`ArrowLeft` / `ArrowRight`). Only meaningful when the
|
|
1376
|
+
* root has `grid` enabled; the root resolves an item's row from its nearest `[rdxComboboxRow]` ancestor.
|
|
1377
|
+
*
|
|
1378
|
+
* @group Components
|
|
1379
|
+
*/
|
|
1380
|
+
declare class RdxComboboxRow {
|
|
1381
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxComboboxRow, never>;
|
|
1382
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxComboboxRow, "[rdxComboboxRow]", ["rdxComboboxRow"], {}, {}, never, never, true, never>;
|
|
1383
|
+
}
|
|
1384
|
+
|
|
999
1385
|
declare const itemContext: () => {
|
|
1000
|
-
isSelected:
|
|
1001
|
-
isHighlighted:
|
|
1386
|
+
isSelected: Signal<boolean>;
|
|
1387
|
+
isHighlighted: Signal<boolean>;
|
|
1002
1388
|
disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1003
|
-
value:
|
|
1389
|
+
value: Signal<AcceptableValue>;
|
|
1004
1390
|
};
|
|
1005
1391
|
type RdxComboboxItemContext = ReturnType<typeof itemContext>;
|
|
1006
1392
|
declare const injectComboboxItemContext: _radix_ng_primitives_core.InjectContext<{
|
|
1007
|
-
isSelected:
|
|
1008
|
-
isHighlighted:
|
|
1393
|
+
isSelected: Signal<boolean>;
|
|
1394
|
+
isHighlighted: Signal<boolean>;
|
|
1009
1395
|
disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1010
|
-
value:
|
|
1396
|
+
value: Signal<AcceptableValue>;
|
|
1011
1397
|
}>;
|
|
1012
1398
|
declare const provideComboboxItemContext: (useFactory: () => {
|
|
1013
|
-
isSelected:
|
|
1014
|
-
isHighlighted:
|
|
1399
|
+
isSelected: Signal<boolean>;
|
|
1400
|
+
isHighlighted: Signal<boolean>;
|
|
1015
1401
|
disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1016
|
-
value:
|
|
1402
|
+
value: Signal<AcceptableValue>;
|
|
1017
1403
|
}) => _angular_core.Provider;
|
|
1018
1404
|
/**
|
|
1019
1405
|
* A selectable option. Registers itself with the root for filtering and navigation. Highlight is
|
|
@@ -1038,19 +1424,34 @@ declare class RdxComboboxItem implements ComboboxItemRef {
|
|
|
1038
1424
|
readonly index: _angular_core.InputSignal<number | undefined>;
|
|
1039
1425
|
protected readonly virtualized: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1040
1426
|
private readonly autoTextValue;
|
|
1041
|
-
readonly textValue:
|
|
1427
|
+
readonly textValue: Signal<string>;
|
|
1042
1428
|
/** Host id: deterministic per-index in virtualized mode, otherwise a generated unique id. */
|
|
1043
|
-
protected readonly elementId:
|
|
1044
|
-
protected readonly ariaSetSize:
|
|
1045
|
-
protected readonly ariaPosInSet:
|
|
1046
|
-
|
|
1047
|
-
readonly
|
|
1048
|
-
|
|
1429
|
+
protected readonly elementId: Signal<string>;
|
|
1430
|
+
protected readonly ariaSetSize: Signal<number | undefined>;
|
|
1431
|
+
protected readonly ariaPosInSet: Signal<number | undefined>;
|
|
1432
|
+
/** The nearest enclosing grid row, if any (drives the `gridcell` role). */
|
|
1433
|
+
private readonly row;
|
|
1434
|
+
/** `gridcell` only when actually inside a `RdxComboboxRow` of a grid list; otherwise `option`. */
|
|
1435
|
+
protected readonly role: Signal<"gridcell" | "option">;
|
|
1436
|
+
/**
|
|
1437
|
+
* Whether selection is a meaningful concept here (Base UI's `selectable`). In `selectionMode="none"`
|
|
1438
|
+
* (every autocomplete option, and a pure-search combobox) options carry no selection state, so
|
|
1439
|
+
* `aria-selected` / `data-selected` are omitted entirely rather than rendered as `false`.
|
|
1440
|
+
*/
|
|
1441
|
+
protected readonly selectable: Signal<boolean>;
|
|
1442
|
+
readonly isVisible: Signal<boolean>;
|
|
1443
|
+
readonly isSelected: Signal<boolean>;
|
|
1444
|
+
readonly isHighlighted: Signal<boolean>;
|
|
1049
1445
|
private readonly group;
|
|
1050
1446
|
constructor();
|
|
1447
|
+
private pointerDownStarted;
|
|
1051
1448
|
onPointerDown(event: MouseEvent): void;
|
|
1052
|
-
|
|
1449
|
+
onMouseDown(event: MouseEvent): void;
|
|
1450
|
+
onMouseUp(event: MouseEvent): void;
|
|
1451
|
+
onClick(event: MouseEvent): void;
|
|
1452
|
+
private commitSelection;
|
|
1053
1453
|
onPointerMove(): void;
|
|
1454
|
+
onPointerLeave(event: PointerEvent): void;
|
|
1054
1455
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxComboboxItem, never>;
|
|
1055
1456
|
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxComboboxItem, "[rdxComboboxItem]", ["rdxComboboxItem"], { "value": { "alias": "value"; "required": true; "isSignal": true; }; "textValueInput": { "alias": "textValue"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "index": { "alias": "index"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
1056
1457
|
}
|
|
@@ -1065,7 +1466,7 @@ declare class RdxComboboxItemIndicator {
|
|
|
1065
1466
|
isSelected: _angular_core.Signal<boolean>;
|
|
1066
1467
|
isHighlighted: _angular_core.Signal<boolean>;
|
|
1067
1468
|
disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1068
|
-
value: _angular_core.
|
|
1469
|
+
value: _angular_core.Signal<_radix_ng_primitives_types_radix_ng_primitives_core.AcceptableValue>;
|
|
1069
1470
|
};
|
|
1070
1471
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxComboboxItemIndicator, never>;
|
|
1071
1472
|
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxComboboxItemIndicator, "[rdxComboboxItemIndicator]", ["rdxComboboxItemIndicator"], {}, {}, never, never, true, never>;
|
|
@@ -1119,19 +1520,36 @@ declare class RdxComboboxGroupLabel {
|
|
|
1119
1520
|
}
|
|
1120
1521
|
|
|
1121
1522
|
/**
|
|
1122
|
-
*
|
|
1523
|
+
* A visual separator between groups of options. Carries `role="separator"` with a horizontal
|
|
1524
|
+
* orientation (it divides rows in a vertical list), so assistive tech announces the grouping break.
|
|
1525
|
+
*
|
|
1526
|
+
* @group Components
|
|
1527
|
+
*/
|
|
1528
|
+
declare class RdxComboboxSeparator {
|
|
1529
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxComboboxSeparator, never>;
|
|
1530
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxComboboxSeparator, "[rdxComboboxSeparator]", ["rdxComboboxSeparator"], {}, {}, never, never, true, never>;
|
|
1531
|
+
}
|
|
1532
|
+
|
|
1533
|
+
/**
|
|
1534
|
+
* A polite, atomic live region announcing the "no results" message. Mirrors Base UI: the element
|
|
1535
|
+
* stays **mounted and visible at all times** so screen readers reliably announce the transition to
|
|
1536
|
+
* empty — only its *content* is rendered conditionally (projected when nothing matches, removed
|
|
1537
|
+
* otherwise). It must never be hidden/unmounted (`hidden`, `display:none`, `aria-hidden`, `@if`):
|
|
1538
|
+
* pulling the region out of the accessibility tree at the same instant its text appears is exactly
|
|
1539
|
+
* what suppresses the announcement.
|
|
1123
1540
|
*
|
|
1124
1541
|
* @group Components
|
|
1125
1542
|
*/
|
|
1126
1543
|
declare class RdxComboboxEmpty {
|
|
1127
1544
|
protected readonly rootContext: {
|
|
1128
1545
|
listId: string;
|
|
1129
|
-
labelId: _angular_core.
|
|
1546
|
+
labelId: _angular_core.Signal<string | undefined>;
|
|
1130
1547
|
setLabelId: (id: string | undefined) => void;
|
|
1131
|
-
dir: _angular_core.
|
|
1548
|
+
dir: _angular_core.Signal<_radix_ng_primitives_types_radix_ng_primitives_core.Direction>;
|
|
1132
1549
|
value: _angular_core.ModelSignal<_radix_ng_primitives_combobox.ComboboxValue>;
|
|
1133
1550
|
inputValue: _angular_core.ModelSignal<string>;
|
|
1134
1551
|
open: _angular_core.ModelSignal<boolean>;
|
|
1552
|
+
present: _angular_core.Signal<boolean>;
|
|
1135
1553
|
multiple: _angular_core.Signal<boolean>;
|
|
1136
1554
|
selectionMode: _angular_core.Signal<"none" | "single" | "multiple">;
|
|
1137
1555
|
disabledState: _angular_core.Signal<boolean>;
|
|
@@ -1140,6 +1558,7 @@ declare class RdxComboboxEmpty {
|
|
|
1140
1558
|
openOnInputClick: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1141
1559
|
modal: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1142
1560
|
virtualized: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1561
|
+
grid: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1143
1562
|
filteredItems: _angular_core.Signal<readonly _radix_ng_primitives_types_radix_ng_primitives_core.AcceptableValue[]>;
|
|
1144
1563
|
highlightedItem: _angular_core.Signal<_radix_ng_primitives_combobox.ComboboxItemRef | null>;
|
|
1145
1564
|
highlightedIndex: _angular_core.Signal<number>;
|
|
@@ -1157,23 +1576,34 @@ declare class RdxComboboxEmpty {
|
|
|
1157
1576
|
highlight: _radix_ng_primitives_types_radix_ng_primitives_core.ListHighlight<_radix_ng_primitives_combobox.ComboboxItemRef>;
|
|
1158
1577
|
highlightNext: () => void;
|
|
1159
1578
|
highlightPrevious: () => void;
|
|
1579
|
+
highlightNextColumn: () => void;
|
|
1580
|
+
highlightPreviousColumn: () => void;
|
|
1160
1581
|
highlightFirst: () => void;
|
|
1161
1582
|
highlightLast: () => void;
|
|
1162
1583
|
highlightIndex: (index: number, reason: _radix_ng_primitives_combobox.ComboboxHighlightReason) => void;
|
|
1163
1584
|
setHighlight: (item: _radix_ng_primitives_combobox.ComboboxItemRef, reason: _radix_ng_primitives_combobox.ComboboxHighlightReason) => void;
|
|
1164
1585
|
clearHighlight: () => void;
|
|
1586
|
+
highlightItemOnHover: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1587
|
+
keepHighlight: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1165
1588
|
inputElement: _angular_core.Signal<HTMLInputElement | null>;
|
|
1166
1589
|
setInputElement: (el: HTMLInputElement | null) => void;
|
|
1167
|
-
|
|
1590
|
+
inputLayout: _angular_core.Signal<_radix_ng_primitives_combobox.ComboboxInputLayout>;
|
|
1591
|
+
setInputLayout: (layout: _radix_ng_primitives_combobox.ComboboxInputLayout) => void;
|
|
1592
|
+
openedByTouch: _angular_core.Signal<boolean>;
|
|
1593
|
+
setOpenedByTouch: (value: boolean) => void;
|
|
1594
|
+
popupMounted: _angular_core.Signal<boolean>;
|
|
1595
|
+
setPopupMounted: (value: boolean) => void;
|
|
1596
|
+
registerTrigger: (el: HTMLElement | null) => void;
|
|
1168
1597
|
focusInput: () => void;
|
|
1169
|
-
openPopup: () =>
|
|
1170
|
-
openForBrowse: () => void;
|
|
1171
|
-
closePopup: (revert?: boolean) => void;
|
|
1598
|
+
openPopup: (reason?: _radix_ng_primitives_combobox.RdxComboboxOpenChangeReason, event?: Event) => boolean;
|
|
1599
|
+
openForBrowse: (reason?: _radix_ng_primitives_combobox.RdxComboboxOpenChangeReason, event?: Event) => void;
|
|
1600
|
+
closePopup: (revert?: boolean, reason?: _radix_ng_primitives_combobox.RdxComboboxOpenChangeReason, event?: Event) => void;
|
|
1172
1601
|
setInputValue: (value: string) => void;
|
|
1173
|
-
openAndHighlight: (edge: "first" | "last") => void;
|
|
1174
|
-
|
|
1175
|
-
|
|
1176
|
-
|
|
1602
|
+
openAndHighlight: (edge: "first" | "last", reason?: _radix_ng_primitives_combobox.RdxComboboxOpenChangeReason, event?: Event) => void;
|
|
1603
|
+
navigateByKeyboard: (direction: 1 | -1, event?: Event) => void;
|
|
1604
|
+
select: (item: _radix_ng_primitives_combobox.ComboboxItemRef, event?: Event) => void;
|
|
1605
|
+
selectIndex: (index: number, event?: Event) => void;
|
|
1606
|
+
selectHighlighted: (event?: Event) => void;
|
|
1177
1607
|
clearSelection: () => void;
|
|
1178
1608
|
removeValue: (value: _radix_ng_primitives_types_radix_ng_primitives_core.AcceptableValue) => void;
|
|
1179
1609
|
removeLastValue: () => void;
|
|
@@ -1182,8 +1612,10 @@ declare class RdxComboboxEmpty {
|
|
|
1182
1612
|
labelFor: (value: _radix_ng_primitives_types_radix_ng_primitives_core.AcceptableValue) => string;
|
|
1183
1613
|
markAsTouched: () => void;
|
|
1184
1614
|
};
|
|
1615
|
+
/** Whether no items match the current query (drives projection of the message). */
|
|
1616
|
+
protected readonly isEmpty: _angular_core.Signal<boolean>;
|
|
1185
1617
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxComboboxEmpty, never>;
|
|
1186
|
-
static
|
|
1618
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<RdxComboboxEmpty, "[rdxComboboxEmpty]", ["rdxComboboxEmpty"], {}, {}, never, ["*"], true, never>;
|
|
1187
1619
|
}
|
|
1188
1620
|
|
|
1189
1621
|
/**
|
|
@@ -1198,7 +1630,9 @@ declare class RdxComboboxStatus {
|
|
|
1198
1630
|
|
|
1199
1631
|
/**
|
|
1200
1632
|
* Container for the selected-value chips in `multiple` mode. Sits before the input and coordinates
|
|
1201
|
-
* arrow-key navigation across the chips (the chips themselves handle the key events).
|
|
1633
|
+
* arrow-key navigation across the chips (the chips themselves handle the key events). Uses
|
|
1634
|
+
* `role="toolbar"` (Base UI): it keeps NVDA in focus mode while arrow-navigating the chips, where a
|
|
1635
|
+
* plain `list` would drop into browse mode.
|
|
1202
1636
|
*
|
|
1203
1637
|
* @group Components
|
|
1204
1638
|
*/
|
|
@@ -1211,7 +1645,7 @@ declare class RdxComboboxChips {
|
|
|
1211
1645
|
/** Focuses the last chip. Returns whether there was one. */
|
|
1212
1646
|
focusLast(): boolean;
|
|
1213
1647
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxComboboxChips, never>;
|
|
1214
|
-
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxComboboxChips, "[rdxComboboxChips]", ["rdxComboboxChips"], {}, {}, never, never, true, [{ directive: typeof i1$1.
|
|
1648
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxComboboxChips, "[rdxComboboxChips]", ["rdxComboboxChips"], {}, {}, never, never, true, [{ directive: typeof i1$1.RdxFloatingInsideElement; inputs: {}; outputs: {}; }]>;
|
|
1215
1649
|
}
|
|
1216
1650
|
|
|
1217
1651
|
declare const chipContext: () => {
|
|
@@ -1257,9 +1691,9 @@ declare class RdxComboboxChipRemove {
|
|
|
1257
1691
|
declare const _importsCombobox: (typeof RdxComboboxAnchor)[];
|
|
1258
1692
|
declare class RdxComboboxModule {
|
|
1259
1693
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxComboboxModule, never>;
|
|
1260
|
-
static ɵmod: _angular_core.ɵɵNgModuleDeclaration<RdxComboboxModule, never, [typeof RdxComboboxRoot, typeof RdxComboboxAnchor, typeof RdxComboboxLabel, typeof RdxComboboxInput, typeof RdxComboboxValue, typeof RdxComboboxTrigger, typeof RdxComboboxIcon, typeof RdxComboboxClear, typeof RdxComboboxPortal, typeof
|
|
1694
|
+
static ɵmod: _angular_core.ɵɵNgModuleDeclaration<RdxComboboxModule, never, [typeof RdxComboboxRoot, typeof RdxComboboxAnchor, typeof RdxComboboxLabel, typeof RdxComboboxInput, typeof RdxComboboxInputGroup, typeof RdxComboboxValue, typeof RdxComboboxTrigger, typeof RdxComboboxIcon, typeof RdxComboboxClear, typeof RdxComboboxPortal, typeof RdxComboboxPortalMisuseGuard, typeof RdxComboboxBackdrop, typeof RdxComboboxPositioner, typeof RdxComboboxPopup, typeof RdxComboboxArrow, typeof RdxComboboxList, typeof RdxComboboxRow, typeof RdxComboboxItem, typeof RdxComboboxItemIndicator, typeof RdxComboboxGroup, typeof RdxComboboxGroupLabel, typeof RdxComboboxSeparator, typeof RdxComboboxEmpty, typeof RdxComboboxStatus, typeof RdxComboboxChips, typeof RdxComboboxChip, typeof RdxComboboxChipRemove], [typeof RdxComboboxRoot, typeof RdxComboboxAnchor, typeof RdxComboboxLabel, typeof RdxComboboxInput, typeof RdxComboboxInputGroup, typeof RdxComboboxValue, typeof RdxComboboxTrigger, typeof RdxComboboxIcon, typeof RdxComboboxClear, typeof RdxComboboxPortal, typeof RdxComboboxPortalMisuseGuard, typeof RdxComboboxBackdrop, typeof RdxComboboxPositioner, typeof RdxComboboxPopup, typeof RdxComboboxArrow, typeof RdxComboboxList, typeof RdxComboboxRow, typeof RdxComboboxItem, typeof RdxComboboxItemIndicator, typeof RdxComboboxGroup, typeof RdxComboboxGroupLabel, typeof RdxComboboxSeparator, typeof RdxComboboxEmpty, typeof RdxComboboxStatus, typeof RdxComboboxChips, typeof RdxComboboxChip, typeof RdxComboboxChipRemove]>;
|
|
1261
1695
|
static ɵinj: _angular_core.ɵɵInjectorDeclaration<RdxComboboxModule>;
|
|
1262
1696
|
}
|
|
1263
1697
|
|
|
1264
|
-
export { RdxComboboxAnchor, RdxComboboxArrow, RdxComboboxBackdrop, RdxComboboxChip, RdxComboboxChipRemove, RdxComboboxChips, RdxComboboxClear, RdxComboboxEmpty, RdxComboboxGroup, RdxComboboxGroupLabel, RdxComboboxIcon, RdxComboboxInput, RdxComboboxItem, RdxComboboxItemIndicator, RdxComboboxLabel, RdxComboboxList, RdxComboboxModule, RdxComboboxPopup, RdxComboboxPortal,
|
|
1265
|
-
export type { ComboboxFilter, ComboboxHighlightReason, ComboboxItemHighlightedDetails, ComboboxItemRef, ComboboxValue, RdxComboboxChipContext, RdxComboboxGroupContext, RdxComboboxItemContext, RdxComboboxRootContext };
|
|
1698
|
+
export { RdxComboboxAnchor, RdxComboboxArrow, RdxComboboxBackdrop, RdxComboboxChip, RdxComboboxChipRemove, RdxComboboxChips, RdxComboboxClear, RdxComboboxEmpty, RdxComboboxGroup, RdxComboboxGroupLabel, RdxComboboxIcon, RdxComboboxInput, RdxComboboxInputGroup, RdxComboboxItem, RdxComboboxItemIndicator, RdxComboboxLabel, RdxComboboxList, RdxComboboxModule, RdxComboboxPopup, RdxComboboxPortal, RdxComboboxPortalMisuseGuard, RdxComboboxPositioner, RdxComboboxRoot, RdxComboboxRow, RdxComboboxSeparator, RdxComboboxStatus, RdxComboboxTrigger, RdxComboboxValue, _importsCombobox, injectComboboxChipContext, injectComboboxGroupContext, injectComboboxItemContext, injectComboboxRootContext, provideComboboxChipContext, provideComboboxGroupContext, provideComboboxItemContext, provideComboboxRootContext, useComboboxEngine };
|
|
1699
|
+
export type { ComboboxFilter, ComboboxHighlightReason, ComboboxInputLayout, ComboboxItemHighlightedDetails, ComboboxItemRef, ComboboxValue, RdxComboboxChipContext, RdxComboboxGroupContext, RdxComboboxItemContext, RdxComboboxOpenChange, RdxComboboxOpenChangeEventDetails, RdxComboboxOpenChangeReason, RdxComboboxRootContext };
|