@radix-ng/primitives 1.0.0-beta.3 → 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/README.md +1 -1
- 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 +3 -2
- package/fesm2022/radix-ng-primitives-alert-dialog.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-autocomplete.mjs +617 -659
- package/fesm2022/radix-ng-primitives-autocomplete.mjs.map +1 -1
- 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 +1305 -572
- 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 +240 -112
- 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 +3 -3
- 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 +861 -286
- 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 +144 -159
- package/fesm2022/radix-ng-primitives-navigation-menu.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-popover.mjs +220 -205
- package/fesm2022/radix-ng-primitives-popover.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-popper.mjs +94 -51
- package/fesm2022/radix-ng-primitives-popper.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-presence.mjs +1 -1
- package/fesm2022/radix-ng-primitives-presence.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-preview-card.mjs +141 -173
- 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 +211 -156
- 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 +73 -110
- package/fesm2022/radix-ng-primitives-tooltip.mjs.map +1 -1
- package/package.json +10 -1
- package/types/radix-ng-primitives-accordion.d.ts +4 -3
- package/types/radix-ng-primitives-autocomplete.d.ts +217 -152
- package/types/radix-ng-primitives-calendar.d.ts +5 -3
- package/types/radix-ng-primitives-combobox.d.ts +672 -283
- 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 +77 -32
- 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-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 +186 -103
- package/types/radix-ng-primitives-navigation-menu.d.ts +37 -75
- package/types/radix-ng-primitives-popover.d.ts +59 -92
- package/types/radix-ng-primitives-popper.d.ts +39 -9
- package/types/radix-ng-primitives-preview-card.d.ts +39 -72
- 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 +145 -108
- 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 +24 -67
|
@@ -1,8 +1,9 @@
|
|
|
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, BooleanInput, ItemValueComparator } from '@radix-ng/primitives/core';
|
|
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';
|
|
@@ -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,6 +232,8 @@ 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;
|
|
@@ -100,18 +241,25 @@ declare const context: () => {
|
|
|
100
241
|
clearHighlight: () => void;
|
|
101
242
|
highlightItemOnHover: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
102
243
|
keepHighlight: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
103
|
-
inputElement: Signal<HTMLInputElement | null>;
|
|
244
|
+
inputElement: _angular_core.Signal<HTMLInputElement | null>;
|
|
104
245
|
setInputElement: (el: HTMLInputElement | null) => void;
|
|
105
|
-
|
|
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;
|
|
106
253
|
focusInput: () => void;
|
|
107
|
-
openPopup: () =>
|
|
108
|
-
openForBrowse: () => void;
|
|
109
|
-
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;
|
|
110
257
|
setInputValue: (value: string) => void;
|
|
111
|
-
openAndHighlight: (edge: "first" | "last") => void;
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
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;
|
|
115
263
|
clearSelection: () => void;
|
|
116
264
|
removeValue: (value: AcceptableValue) => void;
|
|
117
265
|
removeLastValue: () => void;
|
|
@@ -123,30 +271,32 @@ declare const context: () => {
|
|
|
123
271
|
type RdxComboboxRootContext = ReturnType<typeof context>;
|
|
124
272
|
declare const injectComboboxRootContext: _radix_ng_primitives_core.InjectContext<{
|
|
125
273
|
listId: string;
|
|
126
|
-
labelId: _angular_core.
|
|
274
|
+
labelId: _angular_core.Signal<string | undefined>;
|
|
127
275
|
setLabelId: (id: string | undefined) => void;
|
|
128
|
-
dir: _angular_core.
|
|
276
|
+
dir: _angular_core.Signal<Direction>;
|
|
129
277
|
value: _angular_core.ModelSignal<ComboboxValue>;
|
|
130
278
|
inputValue: _angular_core.ModelSignal<string>;
|
|
131
279
|
open: _angular_core.ModelSignal<boolean>;
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
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>;
|
|
135
284
|
readonly: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
136
|
-
requiredState: Signal<boolean>;
|
|
285
|
+
requiredState: _angular_core.Signal<boolean>;
|
|
137
286
|
openOnInputClick: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
138
287
|
modal: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
139
288
|
virtualized: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
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>;
|
|
144
294
|
itemId: (index: number) => string;
|
|
145
295
|
isKeyboardActive: () => boolean;
|
|
146
296
|
setKeyboardActive: (value: boolean) => void;
|
|
147
|
-
transitionStatus: Signal<_radix_ng_primitives_core.RdxTransitionStatus>;
|
|
297
|
+
transitionStatus: _angular_core.Signal<_radix_ng_primitives_core.RdxTransitionStatus>;
|
|
148
298
|
registerTransitionElement: (element: HTMLElement) => () => void;
|
|
149
|
-
visibleCount: Signal<number>;
|
|
299
|
+
visibleCount: _angular_core.Signal<number>;
|
|
150
300
|
isVisible: (item: ComboboxItemRef) => boolean;
|
|
151
301
|
isSelected: (value: AcceptableValue) => boolean;
|
|
152
302
|
registerItem: (item: ComboboxItemRef) => void;
|
|
@@ -154,6 +304,8 @@ declare const injectComboboxRootContext: _radix_ng_primitives_core.InjectContext
|
|
|
154
304
|
highlight: _radix_ng_primitives_core.ListHighlight<ComboboxItemRef>;
|
|
155
305
|
highlightNext: () => void;
|
|
156
306
|
highlightPrevious: () => void;
|
|
307
|
+
highlightNextColumn: () => void;
|
|
308
|
+
highlightPreviousColumn: () => void;
|
|
157
309
|
highlightFirst: () => void;
|
|
158
310
|
highlightLast: () => void;
|
|
159
311
|
highlightIndex: (index: number, reason: ComboboxHighlightReason) => void;
|
|
@@ -161,18 +313,25 @@ declare const injectComboboxRootContext: _radix_ng_primitives_core.InjectContext
|
|
|
161
313
|
clearHighlight: () => void;
|
|
162
314
|
highlightItemOnHover: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
163
315
|
keepHighlight: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
164
|
-
inputElement: Signal<HTMLInputElement | null>;
|
|
316
|
+
inputElement: _angular_core.Signal<HTMLInputElement | null>;
|
|
165
317
|
setInputElement: (el: HTMLInputElement | null) => void;
|
|
166
|
-
|
|
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;
|
|
167
325
|
focusInput: () => void;
|
|
168
|
-
openPopup: () =>
|
|
169
|
-
openForBrowse: () => void;
|
|
170
|
-
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;
|
|
171
329
|
setInputValue: (value: string) => void;
|
|
172
|
-
openAndHighlight: (edge: "first" | "last") => void;
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
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;
|
|
176
335
|
clearSelection: () => void;
|
|
177
336
|
removeValue: (value: AcceptableValue) => void;
|
|
178
337
|
removeLastValue: () => void;
|
|
@@ -183,30 +342,32 @@ declare const injectComboboxRootContext: _radix_ng_primitives_core.InjectContext
|
|
|
183
342
|
}>;
|
|
184
343
|
declare const provideComboboxRootContext: (useFactory: () => {
|
|
185
344
|
listId: string;
|
|
186
|
-
labelId: _angular_core.
|
|
345
|
+
labelId: _angular_core.Signal<string | undefined>;
|
|
187
346
|
setLabelId: (id: string | undefined) => void;
|
|
188
|
-
dir: _angular_core.
|
|
347
|
+
dir: _angular_core.Signal<Direction>;
|
|
189
348
|
value: _angular_core.ModelSignal<ComboboxValue>;
|
|
190
349
|
inputValue: _angular_core.ModelSignal<string>;
|
|
191
350
|
open: _angular_core.ModelSignal<boolean>;
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
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>;
|
|
195
355
|
readonly: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
196
|
-
requiredState: Signal<boolean>;
|
|
356
|
+
requiredState: _angular_core.Signal<boolean>;
|
|
197
357
|
openOnInputClick: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
198
358
|
modal: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
199
359
|
virtualized: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
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>;
|
|
204
365
|
itemId: (index: number) => string;
|
|
205
366
|
isKeyboardActive: () => boolean;
|
|
206
367
|
setKeyboardActive: (value: boolean) => void;
|
|
207
|
-
transitionStatus: Signal<_radix_ng_primitives_core.RdxTransitionStatus>;
|
|
368
|
+
transitionStatus: _angular_core.Signal<_radix_ng_primitives_core.RdxTransitionStatus>;
|
|
208
369
|
registerTransitionElement: (element: HTMLElement) => () => void;
|
|
209
|
-
visibleCount: Signal<number>;
|
|
370
|
+
visibleCount: _angular_core.Signal<number>;
|
|
210
371
|
isVisible: (item: ComboboxItemRef) => boolean;
|
|
211
372
|
isSelected: (value: AcceptableValue) => boolean;
|
|
212
373
|
registerItem: (item: ComboboxItemRef) => void;
|
|
@@ -214,6 +375,8 @@ declare const provideComboboxRootContext: (useFactory: () => {
|
|
|
214
375
|
highlight: _radix_ng_primitives_core.ListHighlight<ComboboxItemRef>;
|
|
215
376
|
highlightNext: () => void;
|
|
216
377
|
highlightPrevious: () => void;
|
|
378
|
+
highlightNextColumn: () => void;
|
|
379
|
+
highlightPreviousColumn: () => void;
|
|
217
380
|
highlightFirst: () => void;
|
|
218
381
|
highlightLast: () => void;
|
|
219
382
|
highlightIndex: (index: number, reason: ComboboxHighlightReason) => void;
|
|
@@ -221,18 +384,25 @@ declare const provideComboboxRootContext: (useFactory: () => {
|
|
|
221
384
|
clearHighlight: () => void;
|
|
222
385
|
highlightItemOnHover: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
223
386
|
keepHighlight: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
224
|
-
inputElement: Signal<HTMLInputElement | null>;
|
|
387
|
+
inputElement: _angular_core.Signal<HTMLInputElement | null>;
|
|
225
388
|
setInputElement: (el: HTMLInputElement | null) => void;
|
|
226
|
-
|
|
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;
|
|
227
396
|
focusInput: () => void;
|
|
228
|
-
openPopup: () =>
|
|
229
|
-
openForBrowse: () => void;
|
|
230
|
-
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;
|
|
231
400
|
setInputValue: (value: string) => void;
|
|
232
|
-
openAndHighlight: (edge: "first" | "last") => void;
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
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;
|
|
236
406
|
clearSelection: () => void;
|
|
237
407
|
removeValue: (value: AcceptableValue) => void;
|
|
238
408
|
removeLastValue: () => void;
|
|
@@ -242,14 +412,17 @@ declare const provideComboboxRootContext: (useFactory: () => {
|
|
|
242
412
|
markAsTouched: () => void;
|
|
243
413
|
}) => _angular_core.Provider;
|
|
244
414
|
/**
|
|
245
|
-
* Root of a Combobox — a filterable select. Owns selection, input text, open state,
|
|
246
|
-
* highlight-model navigation
|
|
247
|
-
*
|
|
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`.
|
|
248
419
|
*
|
|
249
420
|
* @group Components
|
|
250
421
|
*/
|
|
251
422
|
declare class RdxComboboxRoot implements ControlValueAccessor {
|
|
252
423
|
private readonly injector;
|
|
424
|
+
/** Per-popup floating root context (ADR 0015) — `open` / `triggers` / reference for the dismissal engine. */
|
|
425
|
+
readonly floatingContext: RdxFloatingRootContext;
|
|
253
426
|
/** Selected value(s). A single value in single mode, an array in `multiple` mode. */
|
|
254
427
|
readonly value: _angular_core.ModelSignal<ComboboxValue>;
|
|
255
428
|
/** Initial value when uncontrolled. */
|
|
@@ -268,17 +441,18 @@ declare class RdxComboboxRoot implements ControlValueAccessor {
|
|
|
268
441
|
*/
|
|
269
442
|
readonly selectionMode: _angular_core.InputSignal<"none" | "single" | "multiple" | undefined>;
|
|
270
443
|
/** Resolved selection mode. */
|
|
271
|
-
readonly mode: Signal<"none" | "single" | "multiple">;
|
|
444
|
+
readonly mode: _angular_core.Signal<"none" | "single" | "multiple">;
|
|
272
445
|
/** Whether the combobox is in multiple-selection mode. */
|
|
273
|
-
readonly multiple: Signal<boolean>;
|
|
446
|
+
readonly multiple: _angular_core.Signal<boolean>;
|
|
274
447
|
/** In `'none'` mode, whether pressing an item fills the input with its label. */
|
|
275
448
|
readonly fillInputOnItemPress: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
276
449
|
/** Text direction. */
|
|
277
|
-
readonly
|
|
450
|
+
readonly dirInput: _angular_core.InputSignal<Direction | undefined>;
|
|
451
|
+
readonly dir: _angular_core.Signal<Direction>;
|
|
278
452
|
/** Whether the combobox is disabled. */
|
|
279
453
|
readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
280
|
-
/** Whether the combobox is read-only. */
|
|
281
|
-
readonly
|
|
454
|
+
/** Whether the combobox is read-only. Base UI prop name. */
|
|
455
|
+
readonly readOnly: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
282
456
|
/** Whether a value is required (for forms). */
|
|
283
457
|
readonly required: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
284
458
|
/** Whether keyboard navigation wraps at the list boundaries. */
|
|
@@ -289,9 +463,9 @@ declare class RdxComboboxRoot implements ControlValueAccessor {
|
|
|
289
463
|
* - `true` (also the bare `autoHighlight` attribute) / `'input-change'`: highlight the first match as the query changes;
|
|
290
464
|
* - `'always'`: keep the first navigable item highlighted whenever the popup is open.
|
|
291
465
|
*/
|
|
292
|
-
readonly autoHighlight: _angular_core.InputSignalWithTransform<boolean | "
|
|
466
|
+
readonly autoHighlight: _angular_core.InputSignalWithTransform<boolean | "input-change" | "always", BooleanInput>;
|
|
293
467
|
/** Resolved auto-highlight mode. */
|
|
294
|
-
readonly autoHighlightMode: Signal<"
|
|
468
|
+
readonly autoHighlightMode: _angular_core.Signal<"off" | "input-change" | "always">;
|
|
295
469
|
/**
|
|
296
470
|
* Whether moving the pointer over an item highlights it. `true` (default) paints `data-highlighted`
|
|
297
471
|
* on hover; `false` suppresses hover-driven highlight entirely, letting CSS `:hover` stay distinct
|
|
@@ -332,8 +506,14 @@ declare class RdxComboboxRoot implements ControlValueAccessor {
|
|
|
332
506
|
* items outside the rendered window are not skipped by keyboard navigation.
|
|
333
507
|
*/
|
|
334
508
|
readonly virtualized: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
335
|
-
/**
|
|
336
|
-
|
|
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>;
|
|
337
517
|
/** Converts a value to its display label. Defaults to the matching item's text. */
|
|
338
518
|
readonly itemToStringLabel: _angular_core.InputSignal<((value: AcceptableValue) => string) | undefined>;
|
|
339
519
|
/** Emits when the selection changes. */
|
|
@@ -341,7 +521,7 @@ declare class RdxComboboxRoot implements ControlValueAccessor {
|
|
|
341
521
|
/** Emits when the input text changes. */
|
|
342
522
|
readonly onInputValueChange: _angular_core.OutputEmitterRef<string>;
|
|
343
523
|
/** Emits when the popup opens or closes. */
|
|
344
|
-
readonly onOpenChange: _angular_core.OutputEmitterRef<
|
|
524
|
+
readonly onOpenChange: _angular_core.OutputEmitterRef<RdxComboboxOpenChange>;
|
|
345
525
|
/**
|
|
346
526
|
* Emits as the highlight moves, with the item's value, its index in {@link filteredItems}, and the
|
|
347
527
|
* reason. In virtualized mode, use `index` to call the virtualizer's `scrollToIndex`.
|
|
@@ -349,123 +529,92 @@ declare class RdxComboboxRoot implements ControlValueAccessor {
|
|
|
349
529
|
readonly onItemHighlighted: _angular_core.OutputEmitterRef<ComboboxItemHighlightedDetails>;
|
|
350
530
|
/** Emits after the open/close transition (including any exit animation) finishes. */
|
|
351
531
|
readonly onOpenChangeComplete: _angular_core.OutputEmitterRef<boolean>;
|
|
352
|
-
private readonly transition;
|
|
353
|
-
/** Open/close transition phase, for `data-starting-style` / `data-ending-style`. */
|
|
354
|
-
readonly transitionStatus: Signal<_radix_ng_primitives_core.RdxTransitionStatus>;
|
|
355
|
-
/** Registers the popup element whose animation determines transition completion. */
|
|
356
|
-
readonly registerTransitionElement: (element: HTMLElement) => () => void;
|
|
357
|
-
readonly listId: string;
|
|
358
|
-
readonly labelId: _angular_core.WritableSignal<string | undefined>;
|
|
359
|
-
readonly inputElement: _angular_core.WritableSignal<HTMLInputElement | null>;
|
|
360
532
|
private readonly cvaDisabled;
|
|
361
|
-
readonly disabledState: Signal<boolean>;
|
|
362
|
-
readonly requiredState: Signal<boolean>;
|
|
363
|
-
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>;
|
|
364
537
|
/**
|
|
365
538
|
* Whether the input text is a fresh user query rather than the current selection's label. While
|
|
366
539
|
* `false` (just opened, or showing a selected label), the list is unfiltered so the user can
|
|
367
540
|
* browse; it flips `true` on the first keystroke.
|
|
368
541
|
*/
|
|
369
542
|
private readonly typed;
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
private readonly
|
|
376
|
-
/**
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
/** Edge to highlight once the list has mounted (items register asynchronously after opening). */
|
|
391
|
-
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>;
|
|
392
563
|
private onChange?;
|
|
393
564
|
private onTouched?;
|
|
394
565
|
constructor();
|
|
395
566
|
/** Opens the popup for browsing (resets the query to "pristine" and selects the input text). */
|
|
396
|
-
openForBrowse(): void;
|
|
567
|
+
openForBrowse(reason?: RdxComboboxOpenChangeReason, event?: Event): void;
|
|
397
568
|
/** Opens the popup and highlights the given edge once the list mounts. */
|
|
398
|
-
openAndHighlight(edge: 'first' | 'last'): void;
|
|
399
|
-
/**
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
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;
|
|
406
576
|
isSelected(value: AcceptableValue): boolean;
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
setOpen(open: boolean): void;
|
|
410
|
-
closePopup(revert?: boolean): void;
|
|
577
|
+
setOpen(open: boolean, reason?: RdxComboboxOpenChangeReason, event?: Event): boolean;
|
|
578
|
+
closePopup(revert?: boolean, reason?: RdxComboboxOpenChangeReason, event?: Event): void;
|
|
411
579
|
/** Updates the input text from user typing (marks the query as a fresh user query). */
|
|
412
580
|
setInputValue(value: string): void;
|
|
413
581
|
/** Sets the input text programmatically (a selection label / revert) — not a user query. */
|
|
414
582
|
private setLabel;
|
|
415
|
-
/** Selects all input text so the next keystroke replaces a stale selection label. */
|
|
416
|
-
selectInputText(): void;
|
|
417
583
|
/** Resets the input text to the current selection's label (single mode) or empty. */
|
|
418
584
|
private revertInputValue;
|
|
419
585
|
labelFor(value: AcceptableValue): string;
|
|
420
|
-
|
|
421
|
-
private textFor;
|
|
422
|
-
/** Deterministic id for the item at `index` in virtualized mode (matches `aria-activedescendant`). */
|
|
423
|
-
itemId(index: number): string;
|
|
424
|
-
handleSelect(item: ComboboxItemRef): void;
|
|
586
|
+
handleSelect(item: ComboboxItemRef, event?: Event): void;
|
|
425
587
|
/** Selects the filtered item at `index` (virtualized mode). The label comes from {@link labelFor}. */
|
|
426
|
-
selectIndex(index: number): void;
|
|
588
|
+
selectIndex(index: number, event?: Event): void;
|
|
427
589
|
/** Commits a selection from a resolved value/label, independent of whether a DOM item exists. */
|
|
428
590
|
private handleSelectValue;
|
|
429
591
|
/** Requests submit of the closest form when `submitOnItemClick` is enabled. */
|
|
430
592
|
private maybeSubmit;
|
|
431
|
-
selectHighlighted(): void;
|
|
432
|
-
highlightNext(reason?: ComboboxHighlightReason): void;
|
|
433
|
-
highlightPrevious(reason?: ComboboxHighlightReason): void;
|
|
434
|
-
highlightFirst(reason?: ComboboxHighlightReason): void;
|
|
435
|
-
highlightLast(reason?: ComboboxHighlightReason): void;
|
|
436
|
-
/** Highlights a specific index in virtualized mode (e.g. pointer hover). Ignored if out of range. */
|
|
437
|
-
highlightIndex(index: number, reason: ComboboxHighlightReason): void;
|
|
438
|
-
/** Highlights a DOM-ref item (non-virtualized pointer hover). */
|
|
439
|
-
setHighlight(item: ComboboxItemRef, reason: ComboboxHighlightReason): void;
|
|
440
|
-
/** Clears whichever highlight model is active. */
|
|
441
|
-
clearHighlightState(): void;
|
|
442
|
-
/** Steps the virtualized highlight index by `direction`, wrapping when {@link loopFocus}. */
|
|
443
|
-
private stepIndex;
|
|
593
|
+
selectHighlighted(event?: Event): void;
|
|
444
594
|
clearSelection(): void;
|
|
445
595
|
removeValue(value: AcceptableValue): void;
|
|
446
596
|
removeLastValue(): void;
|
|
447
|
-
/** The trigger element, used as a focus fallback when the input lives inside the popup. */
|
|
448
|
-
triggerElement: HTMLElement | null;
|
|
449
597
|
focusInput(): void;
|
|
450
|
-
/**
|
|
451
|
-
* Restores focus after a selection closes the popup, so the keyboard can reopen it. When the
|
|
452
|
-
* input lives inside the popup it is about to unmount, so focus goes to the trigger instead;
|
|
453
|
-
* otherwise it returns to the input. Done synchronously while the input is still in the DOM.
|
|
454
|
-
*/
|
|
455
|
-
restoreFocusAfterSelect(): void;
|
|
456
598
|
private chipsFocusLast;
|
|
457
599
|
/** Registered by `RdxComboboxChips` so the input can hand keyboard focus to the chips. */
|
|
458
600
|
registerChipsNav(fn: (() => boolean) | null): void;
|
|
459
601
|
/** Moves focus to the last chip, if any. Returns whether a chip was focused. */
|
|
460
602
|
focusLastChip(): boolean;
|
|
461
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
|
+
*/
|
|
462
609
|
private commitValue;
|
|
610
|
+
private createOpenChangeEvent;
|
|
611
|
+
private resolveOpenChangeTrigger;
|
|
463
612
|
writeValue(value: ComboboxValue | null): void;
|
|
464
613
|
registerOnChange(fn: (value: ComboboxValue | null) => void): void;
|
|
465
614
|
registerOnTouched(fn: () => void): void;
|
|
466
615
|
setDisabledState(isDisabled: boolean): void;
|
|
467
616
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxComboboxRoot, never>;
|
|
468
|
-
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: {}; }]>;
|
|
469
618
|
}
|
|
470
619
|
|
|
471
620
|
/**
|
|
@@ -491,12 +640,13 @@ declare class RdxComboboxLabel {
|
|
|
491
640
|
declare class RdxComboboxInput {
|
|
492
641
|
protected readonly rootContext: {
|
|
493
642
|
listId: string;
|
|
494
|
-
labelId: _angular_core.
|
|
643
|
+
labelId: _angular_core.Signal<string | undefined>;
|
|
495
644
|
setLabelId: (id: string | undefined) => void;
|
|
496
|
-
dir: _angular_core.
|
|
645
|
+
dir: _angular_core.Signal<_radix_ng_primitives_core.Direction>;
|
|
497
646
|
value: _angular_core.ModelSignal<_radix_ng_primitives_combobox.ComboboxValue>;
|
|
498
647
|
inputValue: _angular_core.ModelSignal<string>;
|
|
499
648
|
open: _angular_core.ModelSignal<boolean>;
|
|
649
|
+
present: _angular_core.Signal<boolean>;
|
|
500
650
|
multiple: _angular_core.Signal<boolean>;
|
|
501
651
|
selectionMode: _angular_core.Signal<"none" | "single" | "multiple">;
|
|
502
652
|
disabledState: _angular_core.Signal<boolean>;
|
|
@@ -505,6 +655,7 @@ declare class RdxComboboxInput {
|
|
|
505
655
|
openOnInputClick: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
506
656
|
modal: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
507
657
|
virtualized: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
658
|
+
grid: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
508
659
|
filteredItems: _angular_core.Signal<readonly _radix_ng_primitives_core.AcceptableValue[]>;
|
|
509
660
|
highlightedItem: _angular_core.Signal<_radix_ng_primitives_combobox.ComboboxItemRef | null>;
|
|
510
661
|
highlightedIndex: _angular_core.Signal<number>;
|
|
@@ -522,6 +673,8 @@ declare class RdxComboboxInput {
|
|
|
522
673
|
highlight: _radix_ng_primitives_core.ListHighlight<_radix_ng_primitives_combobox.ComboboxItemRef>;
|
|
523
674
|
highlightNext: () => void;
|
|
524
675
|
highlightPrevious: () => void;
|
|
676
|
+
highlightNextColumn: () => void;
|
|
677
|
+
highlightPreviousColumn: () => void;
|
|
525
678
|
highlightFirst: () => void;
|
|
526
679
|
highlightLast: () => void;
|
|
527
680
|
highlightIndex: (index: number, reason: _radix_ng_primitives_combobox.ComboboxHighlightReason) => void;
|
|
@@ -531,16 +684,23 @@ declare class RdxComboboxInput {
|
|
|
531
684
|
keepHighlight: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
532
685
|
inputElement: _angular_core.Signal<HTMLInputElement | null>;
|
|
533
686
|
setInputElement: (el: HTMLInputElement | null) => void;
|
|
534
|
-
|
|
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;
|
|
535
694
|
focusInput: () => void;
|
|
536
|
-
openPopup: () =>
|
|
537
|
-
openForBrowse: () => void;
|
|
538
|
-
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;
|
|
539
698
|
setInputValue: (value: string) => void;
|
|
540
|
-
openAndHighlight: (edge: "first" | "last") => void;
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
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;
|
|
544
704
|
clearSelection: () => void;
|
|
545
705
|
removeValue: (value: _radix_ng_primitives_core.AcceptableValue) => void;
|
|
546
706
|
removeLastValue: () => void;
|
|
@@ -568,13 +728,103 @@ declare class RdxComboboxInput {
|
|
|
568
728
|
onInput(event: Event): void;
|
|
569
729
|
onCompositionEnd(event: CompositionEvent): void;
|
|
570
730
|
private commitInput;
|
|
571
|
-
onClick(): void;
|
|
731
|
+
onClick(event: MouseEvent): void;
|
|
572
732
|
onFocus(): void;
|
|
573
733
|
onBlur(): void;
|
|
574
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;
|
|
575
740
|
protected readonly dataAttr: (value: boolean) => "" | undefined;
|
|
576
741
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxComboboxInput, never>;
|
|
577
|
-
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>;
|
|
578
828
|
}
|
|
579
829
|
|
|
580
830
|
/**
|
|
@@ -601,19 +851,30 @@ declare class RdxComboboxValue {
|
|
|
601
851
|
}
|
|
602
852
|
|
|
603
853
|
/**
|
|
604
|
-
* 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).
|
|
605
865
|
*
|
|
606
866
|
* @group Components
|
|
607
867
|
*/
|
|
608
868
|
declare class RdxComboboxTrigger {
|
|
609
869
|
protected readonly rootContext: {
|
|
610
870
|
listId: string;
|
|
611
|
-
labelId: _angular_core.
|
|
871
|
+
labelId: _angular_core.Signal<string | undefined>;
|
|
612
872
|
setLabelId: (id: string | undefined) => void;
|
|
613
|
-
dir: _angular_core.
|
|
873
|
+
dir: _angular_core.Signal<_radix_ng_primitives_types_radix_ng_primitives_core.Direction>;
|
|
614
874
|
value: _angular_core.ModelSignal<_radix_ng_primitives_combobox.ComboboxValue>;
|
|
615
875
|
inputValue: _angular_core.ModelSignal<string>;
|
|
616
876
|
open: _angular_core.ModelSignal<boolean>;
|
|
877
|
+
present: _angular_core.Signal<boolean>;
|
|
617
878
|
multiple: _angular_core.Signal<boolean>;
|
|
618
879
|
selectionMode: _angular_core.Signal<"none" | "single" | "multiple">;
|
|
619
880
|
disabledState: _angular_core.Signal<boolean>;
|
|
@@ -622,6 +883,7 @@ declare class RdxComboboxTrigger {
|
|
|
622
883
|
openOnInputClick: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
623
884
|
modal: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
624
885
|
virtualized: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
886
|
+
grid: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
625
887
|
filteredItems: _angular_core.Signal<readonly _radix_ng_primitives_types_radix_ng_primitives_core.AcceptableValue[]>;
|
|
626
888
|
highlightedItem: _angular_core.Signal<_radix_ng_primitives_combobox.ComboboxItemRef | null>;
|
|
627
889
|
highlightedIndex: _angular_core.Signal<number>;
|
|
@@ -639,6 +901,8 @@ declare class RdxComboboxTrigger {
|
|
|
639
901
|
highlight: _radix_ng_primitives_types_radix_ng_primitives_core.ListHighlight<_radix_ng_primitives_combobox.ComboboxItemRef>;
|
|
640
902
|
highlightNext: () => void;
|
|
641
903
|
highlightPrevious: () => void;
|
|
904
|
+
highlightNextColumn: () => void;
|
|
905
|
+
highlightPreviousColumn: () => void;
|
|
642
906
|
highlightFirst: () => void;
|
|
643
907
|
highlightLast: () => void;
|
|
644
908
|
highlightIndex: (index: number, reason: _radix_ng_primitives_combobox.ComboboxHighlightReason) => void;
|
|
@@ -648,16 +912,23 @@ declare class RdxComboboxTrigger {
|
|
|
648
912
|
keepHighlight: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
649
913
|
inputElement: _angular_core.Signal<HTMLInputElement | null>;
|
|
650
914
|
setInputElement: (el: HTMLInputElement | null) => void;
|
|
651
|
-
|
|
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;
|
|
652
922
|
focusInput: () => void;
|
|
653
|
-
openPopup: () =>
|
|
654
|
-
openForBrowse: () => void;
|
|
655
|
-
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;
|
|
656
926
|
setInputValue: (value: string) => void;
|
|
657
|
-
openAndHighlight: (edge: "first" | "last") => void;
|
|
658
|
-
|
|
659
|
-
|
|
660
|
-
|
|
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;
|
|
661
932
|
clearSelection: () => void;
|
|
662
933
|
removeValue: (value: _radix_ng_primitives_types_radix_ng_primitives_core.AcceptableValue) => void;
|
|
663
934
|
removeLastValue: () => void;
|
|
@@ -668,9 +939,11 @@ declare class RdxComboboxTrigger {
|
|
|
668
939
|
};
|
|
669
940
|
private readonly element;
|
|
670
941
|
constructor();
|
|
671
|
-
|
|
942
|
+
onPointerDown(event: PointerEvent): void;
|
|
943
|
+
onClick(event: MouseEvent): void;
|
|
944
|
+
onKeydown(event: KeyboardEvent): void;
|
|
672
945
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxComboboxTrigger, never>;
|
|
673
|
-
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: {}; }]>;
|
|
674
947
|
}
|
|
675
948
|
|
|
676
949
|
/**
|
|
@@ -691,12 +964,13 @@ declare class RdxComboboxIcon {
|
|
|
691
964
|
declare class RdxComboboxClear {
|
|
692
965
|
protected readonly rootContext: {
|
|
693
966
|
listId: string;
|
|
694
|
-
labelId: _angular_core.
|
|
967
|
+
labelId: _angular_core.Signal<string | undefined>;
|
|
695
968
|
setLabelId: (id: string | undefined) => void;
|
|
696
|
-
dir: _angular_core.
|
|
969
|
+
dir: _angular_core.Signal<_radix_ng_primitives_types_radix_ng_primitives_core.Direction>;
|
|
697
970
|
value: _angular_core.ModelSignal<_radix_ng_primitives_combobox.ComboboxValue>;
|
|
698
971
|
inputValue: _angular_core.ModelSignal<string>;
|
|
699
972
|
open: _angular_core.ModelSignal<boolean>;
|
|
973
|
+
present: _angular_core.Signal<boolean>;
|
|
700
974
|
multiple: _angular_core.Signal<boolean>;
|
|
701
975
|
selectionMode: _angular_core.Signal<"none" | "single" | "multiple">;
|
|
702
976
|
disabledState: _angular_core.Signal<boolean>;
|
|
@@ -705,6 +979,7 @@ declare class RdxComboboxClear {
|
|
|
705
979
|
openOnInputClick: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
706
980
|
modal: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
707
981
|
virtualized: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
982
|
+
grid: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
708
983
|
filteredItems: _angular_core.Signal<readonly _radix_ng_primitives_types_radix_ng_primitives_core.AcceptableValue[]>;
|
|
709
984
|
highlightedItem: _angular_core.Signal<_radix_ng_primitives_combobox.ComboboxItemRef | null>;
|
|
710
985
|
highlightedIndex: _angular_core.Signal<number>;
|
|
@@ -722,6 +997,8 @@ declare class RdxComboboxClear {
|
|
|
722
997
|
highlight: _radix_ng_primitives_types_radix_ng_primitives_core.ListHighlight<_radix_ng_primitives_combobox.ComboboxItemRef>;
|
|
723
998
|
highlightNext: () => void;
|
|
724
999
|
highlightPrevious: () => void;
|
|
1000
|
+
highlightNextColumn: () => void;
|
|
1001
|
+
highlightPreviousColumn: () => void;
|
|
725
1002
|
highlightFirst: () => void;
|
|
726
1003
|
highlightLast: () => void;
|
|
727
1004
|
highlightIndex: (index: number, reason: _radix_ng_primitives_combobox.ComboboxHighlightReason) => void;
|
|
@@ -731,16 +1008,23 @@ declare class RdxComboboxClear {
|
|
|
731
1008
|
keepHighlight: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
732
1009
|
inputElement: _angular_core.Signal<HTMLInputElement | null>;
|
|
733
1010
|
setInputElement: (el: HTMLInputElement | null) => void;
|
|
734
|
-
|
|
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;
|
|
735
1018
|
focusInput: () => void;
|
|
736
|
-
openPopup: () =>
|
|
737
|
-
openForBrowse: () => void;
|
|
738
|
-
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;
|
|
739
1022
|
setInputValue: (value: string) => void;
|
|
740
|
-
openAndHighlight: (edge: "first" | "last") => void;
|
|
741
|
-
|
|
742
|
-
|
|
743
|
-
|
|
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;
|
|
744
1028
|
clearSelection: () => void;
|
|
745
1029
|
removeValue: (value: _radix_ng_primitives_types_radix_ng_primitives_core.AcceptableValue) => void;
|
|
746
1030
|
removeLastValue: () => void;
|
|
@@ -749,10 +1033,19 @@ declare class RdxComboboxClear {
|
|
|
749
1033
|
labelFor: (value: _radix_ng_primitives_types_radix_ng_primitives_core.AcceptableValue) => string;
|
|
750
1034
|
markAsTouched: () => void;
|
|
751
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
|
+
*/
|
|
752
1044
|
protected readonly isEmpty: _angular_core.Signal<boolean>;
|
|
1045
|
+
onPointerDown(event: MouseEvent): void;
|
|
753
1046
|
onClick(): void;
|
|
754
1047
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxComboboxClear, never>;
|
|
755
|
-
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: {}; }]>;
|
|
756
1049
|
}
|
|
757
1050
|
|
|
758
1051
|
/**
|
|
@@ -798,12 +1091,13 @@ declare class RdxComboboxPortalMisuseGuard {
|
|
|
798
1091
|
declare class RdxComboboxBackdrop {
|
|
799
1092
|
protected readonly rootContext: {
|
|
800
1093
|
listId: string;
|
|
801
|
-
labelId: _angular_core.
|
|
1094
|
+
labelId: _angular_core.Signal<string | undefined>;
|
|
802
1095
|
setLabelId: (id: string | undefined) => void;
|
|
803
|
-
dir: _angular_core.
|
|
1096
|
+
dir: _angular_core.Signal<_radix_ng_primitives_types_radix_ng_primitives_core.Direction>;
|
|
804
1097
|
value: _angular_core.ModelSignal<_radix_ng_primitives_combobox.ComboboxValue>;
|
|
805
1098
|
inputValue: _angular_core.ModelSignal<string>;
|
|
806
1099
|
open: _angular_core.ModelSignal<boolean>;
|
|
1100
|
+
present: _angular_core.Signal<boolean>;
|
|
807
1101
|
multiple: _angular_core.Signal<boolean>;
|
|
808
1102
|
selectionMode: _angular_core.Signal<"none" | "single" | "multiple">;
|
|
809
1103
|
disabledState: _angular_core.Signal<boolean>;
|
|
@@ -812,6 +1106,7 @@ declare class RdxComboboxBackdrop {
|
|
|
812
1106
|
openOnInputClick: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
813
1107
|
modal: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
814
1108
|
virtualized: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1109
|
+
grid: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
815
1110
|
filteredItems: _angular_core.Signal<readonly _radix_ng_primitives_types_radix_ng_primitives_core.AcceptableValue[]>;
|
|
816
1111
|
highlightedItem: _angular_core.Signal<_radix_ng_primitives_combobox.ComboboxItemRef | null>;
|
|
817
1112
|
highlightedIndex: _angular_core.Signal<number>;
|
|
@@ -829,6 +1124,8 @@ declare class RdxComboboxBackdrop {
|
|
|
829
1124
|
highlight: _radix_ng_primitives_types_radix_ng_primitives_core.ListHighlight<_radix_ng_primitives_combobox.ComboboxItemRef>;
|
|
830
1125
|
highlightNext: () => void;
|
|
831
1126
|
highlightPrevious: () => void;
|
|
1127
|
+
highlightNextColumn: () => void;
|
|
1128
|
+
highlightPreviousColumn: () => void;
|
|
832
1129
|
highlightFirst: () => void;
|
|
833
1130
|
highlightLast: () => void;
|
|
834
1131
|
highlightIndex: (index: number, reason: _radix_ng_primitives_combobox.ComboboxHighlightReason) => void;
|
|
@@ -838,16 +1135,23 @@ declare class RdxComboboxBackdrop {
|
|
|
838
1135
|
keepHighlight: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
839
1136
|
inputElement: _angular_core.Signal<HTMLInputElement | null>;
|
|
840
1137
|
setInputElement: (el: HTMLInputElement | null) => void;
|
|
841
|
-
|
|
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;
|
|
842
1145
|
focusInput: () => void;
|
|
843
|
-
openPopup: () =>
|
|
844
|
-
openForBrowse: () => void;
|
|
845
|
-
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;
|
|
846
1149
|
setInputValue: (value: string) => void;
|
|
847
|
-
openAndHighlight: (edge: "first" | "last") => void;
|
|
848
|
-
|
|
849
|
-
|
|
850
|
-
|
|
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;
|
|
851
1155
|
clearSelection: () => void;
|
|
852
1156
|
removeValue: (value: _radix_ng_primitives_types_radix_ng_primitives_core.AcceptableValue) => void;
|
|
853
1157
|
removeLastValue: () => void;
|
|
@@ -861,25 +1165,20 @@ declare class RdxComboboxBackdrop {
|
|
|
861
1165
|
}
|
|
862
1166
|
|
|
863
1167
|
/**
|
|
864
|
-
* Positions the popup relative to the input anchor using the popper engine.
|
|
865
|
-
*
|
|
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`).
|
|
866
1175
|
*
|
|
867
1176
|
* @group Components
|
|
868
1177
|
*/
|
|
869
|
-
declare class RdxComboboxPositioner {
|
|
870
|
-
|
|
871
|
-
readonly sideOffset: _angular_core.InputSignalWithTransform<number, unknown>;
|
|
872
|
-
readonly align: _angular_core.InputSignal<"center" | "end" | "start">;
|
|
873
|
-
readonly alignOffset: _angular_core.InputSignalWithTransform<number, unknown>;
|
|
874
|
-
readonly arrowPadding: _angular_core.InputSignalWithTransform<number, unknown>;
|
|
875
|
-
readonly avoidCollisions: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
876
|
-
readonly collisionBoundary: _angular_core.InputSignal<ElementRef<HTMLElement> | ElementRef<HTMLElement>[] | undefined>;
|
|
877
|
-
readonly collisionPadding: _angular_core.InputSignal<number | Partial<Record<"top" | "right" | "bottom" | "left", number>>>;
|
|
878
|
-
readonly sticky: _angular_core.InputSignal<"always" | "partial">;
|
|
879
|
-
readonly hideWhenDetached: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
880
|
-
readonly updatePositionStrategy: _angular_core.InputSignal<"always" | "optimized">;
|
|
1178
|
+
declare class RdxComboboxPositioner extends RdxPopperContentWrapper {
|
|
1179
|
+
constructor();
|
|
881
1180
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxComboboxPositioner, never>;
|
|
882
|
-
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxComboboxPositioner, "[rdxComboboxPositioner]", ["rdxComboboxPositioner"], {
|
|
1181
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxComboboxPositioner, "[rdxComboboxPositioner]", ["rdxComboboxPositioner"], {}, {}, never, never, true, never>;
|
|
883
1182
|
}
|
|
884
1183
|
|
|
885
1184
|
/**
|
|
@@ -891,12 +1190,13 @@ declare class RdxComboboxPositioner {
|
|
|
891
1190
|
declare class RdxComboboxPopup {
|
|
892
1191
|
protected readonly rootContext: {
|
|
893
1192
|
listId: string;
|
|
894
|
-
labelId: _angular_core.
|
|
1193
|
+
labelId: _angular_core.Signal<string | undefined>;
|
|
895
1194
|
setLabelId: (id: string | undefined) => void;
|
|
896
|
-
dir: _angular_core.
|
|
1195
|
+
dir: _angular_core.Signal<_radix_ng_primitives_core.Direction>;
|
|
897
1196
|
value: _angular_core.ModelSignal<_radix_ng_primitives_combobox.ComboboxValue>;
|
|
898
1197
|
inputValue: _angular_core.ModelSignal<string>;
|
|
899
1198
|
open: _angular_core.ModelSignal<boolean>;
|
|
1199
|
+
present: _angular_core.Signal<boolean>;
|
|
900
1200
|
multiple: _angular_core.Signal<boolean>;
|
|
901
1201
|
selectionMode: _angular_core.Signal<"none" | "single" | "multiple">;
|
|
902
1202
|
disabledState: _angular_core.Signal<boolean>;
|
|
@@ -905,6 +1205,7 @@ declare class RdxComboboxPopup {
|
|
|
905
1205
|
openOnInputClick: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
906
1206
|
modal: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
907
1207
|
virtualized: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1208
|
+
grid: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
908
1209
|
filteredItems: _angular_core.Signal<readonly _radix_ng_primitives_core.AcceptableValue[]>;
|
|
909
1210
|
highlightedItem: _angular_core.Signal<_radix_ng_primitives_combobox.ComboboxItemRef | null>;
|
|
910
1211
|
highlightedIndex: _angular_core.Signal<number>;
|
|
@@ -922,6 +1223,8 @@ declare class RdxComboboxPopup {
|
|
|
922
1223
|
highlight: _radix_ng_primitives_core.ListHighlight<_radix_ng_primitives_combobox.ComboboxItemRef>;
|
|
923
1224
|
highlightNext: () => void;
|
|
924
1225
|
highlightPrevious: () => void;
|
|
1226
|
+
highlightNextColumn: () => void;
|
|
1227
|
+
highlightPreviousColumn: () => void;
|
|
925
1228
|
highlightFirst: () => void;
|
|
926
1229
|
highlightLast: () => void;
|
|
927
1230
|
highlightIndex: (index: number, reason: _radix_ng_primitives_combobox.ComboboxHighlightReason) => void;
|
|
@@ -931,16 +1234,23 @@ declare class RdxComboboxPopup {
|
|
|
931
1234
|
keepHighlight: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
932
1235
|
inputElement: _angular_core.Signal<HTMLInputElement | null>;
|
|
933
1236
|
setInputElement: (el: HTMLInputElement | null) => void;
|
|
934
|
-
|
|
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;
|
|
935
1244
|
focusInput: () => void;
|
|
936
|
-
openPopup: () =>
|
|
937
|
-
openForBrowse: () => void;
|
|
938
|
-
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;
|
|
939
1248
|
setInputValue: (value: string) => void;
|
|
940
|
-
openAndHighlight: (edge: "first" | "last") => void;
|
|
941
|
-
|
|
942
|
-
|
|
943
|
-
|
|
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;
|
|
944
1254
|
clearSelection: () => void;
|
|
945
1255
|
removeValue: (value: _radix_ng_primitives_core.AcceptableValue) => void;
|
|
946
1256
|
removeLastValue: () => void;
|
|
@@ -949,12 +1259,20 @@ declare class RdxComboboxPopup {
|
|
|
949
1259
|
labelFor: (value: _radix_ng_primitives_core.AcceptableValue) => string;
|
|
950
1260
|
markAsTouched: () => void;
|
|
951
1261
|
};
|
|
952
|
-
private readonly
|
|
1262
|
+
private readonly floatingContext;
|
|
1263
|
+
private readonly registration;
|
|
953
1264
|
private readonly popper;
|
|
954
1265
|
private readonly element;
|
|
955
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;
|
|
956
1274
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxComboboxPopup, never>;
|
|
957
|
-
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: {}; }]>;
|
|
958
1276
|
}
|
|
959
1277
|
|
|
960
1278
|
/**
|
|
@@ -969,19 +1287,22 @@ declare class RdxComboboxArrow {
|
|
|
969
1287
|
}
|
|
970
1288
|
|
|
971
1289
|
/**
|
|
972
|
-
* 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.
|
|
973
1293
|
*
|
|
974
1294
|
* @group Components
|
|
975
1295
|
*/
|
|
976
1296
|
declare class RdxComboboxList {
|
|
977
1297
|
protected readonly rootContext: {
|
|
978
1298
|
listId: string;
|
|
979
|
-
labelId: _angular_core.
|
|
1299
|
+
labelId: _angular_core.Signal<string | undefined>;
|
|
980
1300
|
setLabelId: (id: string | undefined) => void;
|
|
981
|
-
dir: _angular_core.
|
|
1301
|
+
dir: _angular_core.Signal<_radix_ng_primitives_types_radix_ng_primitives_core.Direction>;
|
|
982
1302
|
value: _angular_core.ModelSignal<_radix_ng_primitives_combobox.ComboboxValue>;
|
|
983
1303
|
inputValue: _angular_core.ModelSignal<string>;
|
|
984
1304
|
open: _angular_core.ModelSignal<boolean>;
|
|
1305
|
+
present: _angular_core.Signal<boolean>;
|
|
985
1306
|
multiple: _angular_core.Signal<boolean>;
|
|
986
1307
|
selectionMode: _angular_core.Signal<"none" | "single" | "multiple">;
|
|
987
1308
|
disabledState: _angular_core.Signal<boolean>;
|
|
@@ -990,6 +1311,7 @@ declare class RdxComboboxList {
|
|
|
990
1311
|
openOnInputClick: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
991
1312
|
modal: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
992
1313
|
virtualized: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1314
|
+
grid: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
993
1315
|
filteredItems: _angular_core.Signal<readonly _radix_ng_primitives_types_radix_ng_primitives_core.AcceptableValue[]>;
|
|
994
1316
|
highlightedItem: _angular_core.Signal<_radix_ng_primitives_combobox.ComboboxItemRef | null>;
|
|
995
1317
|
highlightedIndex: _angular_core.Signal<number>;
|
|
@@ -1007,6 +1329,8 @@ declare class RdxComboboxList {
|
|
|
1007
1329
|
highlight: _radix_ng_primitives_types_radix_ng_primitives_core.ListHighlight<_radix_ng_primitives_combobox.ComboboxItemRef>;
|
|
1008
1330
|
highlightNext: () => void;
|
|
1009
1331
|
highlightPrevious: () => void;
|
|
1332
|
+
highlightNextColumn: () => void;
|
|
1333
|
+
highlightPreviousColumn: () => void;
|
|
1010
1334
|
highlightFirst: () => void;
|
|
1011
1335
|
highlightLast: () => void;
|
|
1012
1336
|
highlightIndex: (index: number, reason: _radix_ng_primitives_combobox.ComboboxHighlightReason) => void;
|
|
@@ -1016,16 +1340,23 @@ declare class RdxComboboxList {
|
|
|
1016
1340
|
keepHighlight: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1017
1341
|
inputElement: _angular_core.Signal<HTMLInputElement | null>;
|
|
1018
1342
|
setInputElement: (el: HTMLInputElement | null) => void;
|
|
1019
|
-
|
|
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;
|
|
1020
1350
|
focusInput: () => void;
|
|
1021
|
-
openPopup: () =>
|
|
1022
|
-
openForBrowse: () => void;
|
|
1023
|
-
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;
|
|
1024
1354
|
setInputValue: (value: string) => void;
|
|
1025
|
-
openAndHighlight: (edge: "first" | "last") => void;
|
|
1026
|
-
|
|
1027
|
-
|
|
1028
|
-
|
|
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;
|
|
1029
1360
|
clearSelection: () => void;
|
|
1030
1361
|
removeValue: (value: _radix_ng_primitives_types_radix_ng_primitives_core.AcceptableValue) => void;
|
|
1031
1362
|
removeLastValue: () => void;
|
|
@@ -1034,28 +1365,41 @@ declare class RdxComboboxList {
|
|
|
1034
1365
|
labelFor: (value: _radix_ng_primitives_types_radix_ng_primitives_core.AcceptableValue) => string;
|
|
1035
1366
|
markAsTouched: () => void;
|
|
1036
1367
|
};
|
|
1368
|
+
onKeydown(event: KeyboardEvent): void;
|
|
1037
1369
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxComboboxList, never>;
|
|
1038
1370
|
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxComboboxList, "[rdxComboboxList]", ["rdxComboboxList"], {}, {}, never, never, true, never>;
|
|
1039
1371
|
}
|
|
1040
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
|
+
|
|
1041
1385
|
declare const itemContext: () => {
|
|
1042
|
-
isSelected:
|
|
1043
|
-
isHighlighted:
|
|
1386
|
+
isSelected: Signal<boolean>;
|
|
1387
|
+
isHighlighted: Signal<boolean>;
|
|
1044
1388
|
disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1045
|
-
value:
|
|
1389
|
+
value: Signal<AcceptableValue>;
|
|
1046
1390
|
};
|
|
1047
1391
|
type RdxComboboxItemContext = ReturnType<typeof itemContext>;
|
|
1048
1392
|
declare const injectComboboxItemContext: _radix_ng_primitives_core.InjectContext<{
|
|
1049
|
-
isSelected:
|
|
1050
|
-
isHighlighted:
|
|
1393
|
+
isSelected: Signal<boolean>;
|
|
1394
|
+
isHighlighted: Signal<boolean>;
|
|
1051
1395
|
disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1052
|
-
value:
|
|
1396
|
+
value: Signal<AcceptableValue>;
|
|
1053
1397
|
}>;
|
|
1054
1398
|
declare const provideComboboxItemContext: (useFactory: () => {
|
|
1055
|
-
isSelected:
|
|
1056
|
-
isHighlighted:
|
|
1399
|
+
isSelected: Signal<boolean>;
|
|
1400
|
+
isHighlighted: Signal<boolean>;
|
|
1057
1401
|
disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1058
|
-
value:
|
|
1402
|
+
value: Signal<AcceptableValue>;
|
|
1059
1403
|
}) => _angular_core.Provider;
|
|
1060
1404
|
/**
|
|
1061
1405
|
* A selectable option. Registers itself with the root for filtering and navigation. Highlight is
|
|
@@ -1080,18 +1424,32 @@ declare class RdxComboboxItem implements ComboboxItemRef {
|
|
|
1080
1424
|
readonly index: _angular_core.InputSignal<number | undefined>;
|
|
1081
1425
|
protected readonly virtualized: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1082
1426
|
private readonly autoTextValue;
|
|
1083
|
-
readonly textValue:
|
|
1427
|
+
readonly textValue: Signal<string>;
|
|
1084
1428
|
/** Host id: deterministic per-index in virtualized mode, otherwise a generated unique id. */
|
|
1085
|
-
protected readonly elementId:
|
|
1086
|
-
protected readonly ariaSetSize:
|
|
1087
|
-
protected readonly ariaPosInSet:
|
|
1088
|
-
|
|
1089
|
-
readonly
|
|
1090
|
-
|
|
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>;
|
|
1091
1445
|
private readonly group;
|
|
1092
1446
|
constructor();
|
|
1447
|
+
private pointerDownStarted;
|
|
1093
1448
|
onPointerDown(event: MouseEvent): void;
|
|
1094
|
-
|
|
1449
|
+
onMouseDown(event: MouseEvent): void;
|
|
1450
|
+
onMouseUp(event: MouseEvent): void;
|
|
1451
|
+
onClick(event: MouseEvent): void;
|
|
1452
|
+
private commitSelection;
|
|
1095
1453
|
onPointerMove(): void;
|
|
1096
1454
|
onPointerLeave(event: PointerEvent): void;
|
|
1097
1455
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxComboboxItem, never>;
|
|
@@ -1108,7 +1466,7 @@ declare class RdxComboboxItemIndicator {
|
|
|
1108
1466
|
isSelected: _angular_core.Signal<boolean>;
|
|
1109
1467
|
isHighlighted: _angular_core.Signal<boolean>;
|
|
1110
1468
|
disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1111
|
-
value: _angular_core.
|
|
1469
|
+
value: _angular_core.Signal<_radix_ng_primitives_types_radix_ng_primitives_core.AcceptableValue>;
|
|
1112
1470
|
};
|
|
1113
1471
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxComboboxItemIndicator, never>;
|
|
1114
1472
|
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxComboboxItemIndicator, "[rdxComboboxItemIndicator]", ["rdxComboboxItemIndicator"], {}, {}, never, never, true, never>;
|
|
@@ -1162,19 +1520,36 @@ declare class RdxComboboxGroupLabel {
|
|
|
1162
1520
|
}
|
|
1163
1521
|
|
|
1164
1522
|
/**
|
|
1165
|
-
*
|
|
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.
|
|
1166
1540
|
*
|
|
1167
1541
|
* @group Components
|
|
1168
1542
|
*/
|
|
1169
1543
|
declare class RdxComboboxEmpty {
|
|
1170
1544
|
protected readonly rootContext: {
|
|
1171
1545
|
listId: string;
|
|
1172
|
-
labelId: _angular_core.
|
|
1546
|
+
labelId: _angular_core.Signal<string | undefined>;
|
|
1173
1547
|
setLabelId: (id: string | undefined) => void;
|
|
1174
|
-
dir: _angular_core.
|
|
1548
|
+
dir: _angular_core.Signal<_radix_ng_primitives_types_radix_ng_primitives_core.Direction>;
|
|
1175
1549
|
value: _angular_core.ModelSignal<_radix_ng_primitives_combobox.ComboboxValue>;
|
|
1176
1550
|
inputValue: _angular_core.ModelSignal<string>;
|
|
1177
1551
|
open: _angular_core.ModelSignal<boolean>;
|
|
1552
|
+
present: _angular_core.Signal<boolean>;
|
|
1178
1553
|
multiple: _angular_core.Signal<boolean>;
|
|
1179
1554
|
selectionMode: _angular_core.Signal<"none" | "single" | "multiple">;
|
|
1180
1555
|
disabledState: _angular_core.Signal<boolean>;
|
|
@@ -1183,6 +1558,7 @@ declare class RdxComboboxEmpty {
|
|
|
1183
1558
|
openOnInputClick: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1184
1559
|
modal: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1185
1560
|
virtualized: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1561
|
+
grid: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1186
1562
|
filteredItems: _angular_core.Signal<readonly _radix_ng_primitives_types_radix_ng_primitives_core.AcceptableValue[]>;
|
|
1187
1563
|
highlightedItem: _angular_core.Signal<_radix_ng_primitives_combobox.ComboboxItemRef | null>;
|
|
1188
1564
|
highlightedIndex: _angular_core.Signal<number>;
|
|
@@ -1200,6 +1576,8 @@ declare class RdxComboboxEmpty {
|
|
|
1200
1576
|
highlight: _radix_ng_primitives_types_radix_ng_primitives_core.ListHighlight<_radix_ng_primitives_combobox.ComboboxItemRef>;
|
|
1201
1577
|
highlightNext: () => void;
|
|
1202
1578
|
highlightPrevious: () => void;
|
|
1579
|
+
highlightNextColumn: () => void;
|
|
1580
|
+
highlightPreviousColumn: () => void;
|
|
1203
1581
|
highlightFirst: () => void;
|
|
1204
1582
|
highlightLast: () => void;
|
|
1205
1583
|
highlightIndex: (index: number, reason: _radix_ng_primitives_combobox.ComboboxHighlightReason) => void;
|
|
@@ -1209,16 +1587,23 @@ declare class RdxComboboxEmpty {
|
|
|
1209
1587
|
keepHighlight: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1210
1588
|
inputElement: _angular_core.Signal<HTMLInputElement | null>;
|
|
1211
1589
|
setInputElement: (el: HTMLInputElement | null) => void;
|
|
1212
|
-
|
|
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;
|
|
1213
1597
|
focusInput: () => void;
|
|
1214
|
-
openPopup: () =>
|
|
1215
|
-
openForBrowse: () => void;
|
|
1216
|
-
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;
|
|
1217
1601
|
setInputValue: (value: string) => void;
|
|
1218
|
-
openAndHighlight: (edge: "first" | "last") => void;
|
|
1219
|
-
|
|
1220
|
-
|
|
1221
|
-
|
|
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;
|
|
1222
1607
|
clearSelection: () => void;
|
|
1223
1608
|
removeValue: (value: _radix_ng_primitives_types_radix_ng_primitives_core.AcceptableValue) => void;
|
|
1224
1609
|
removeLastValue: () => void;
|
|
@@ -1227,8 +1612,10 @@ declare class RdxComboboxEmpty {
|
|
|
1227
1612
|
labelFor: (value: _radix_ng_primitives_types_radix_ng_primitives_core.AcceptableValue) => string;
|
|
1228
1613
|
markAsTouched: () => void;
|
|
1229
1614
|
};
|
|
1615
|
+
/** Whether no items match the current query (drives projection of the message). */
|
|
1616
|
+
protected readonly isEmpty: _angular_core.Signal<boolean>;
|
|
1230
1617
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxComboboxEmpty, never>;
|
|
1231
|
-
static
|
|
1618
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<RdxComboboxEmpty, "[rdxComboboxEmpty]", ["rdxComboboxEmpty"], {}, {}, never, ["*"], true, never>;
|
|
1232
1619
|
}
|
|
1233
1620
|
|
|
1234
1621
|
/**
|
|
@@ -1243,7 +1630,9 @@ declare class RdxComboboxStatus {
|
|
|
1243
1630
|
|
|
1244
1631
|
/**
|
|
1245
1632
|
* Container for the selected-value chips in `multiple` mode. Sits before the input and coordinates
|
|
1246
|
-
* 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.
|
|
1247
1636
|
*
|
|
1248
1637
|
* @group Components
|
|
1249
1638
|
*/
|
|
@@ -1256,7 +1645,7 @@ declare class RdxComboboxChips {
|
|
|
1256
1645
|
/** Focuses the last chip. Returns whether there was one. */
|
|
1257
1646
|
focusLast(): boolean;
|
|
1258
1647
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxComboboxChips, never>;
|
|
1259
|
-
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: {}; }]>;
|
|
1260
1649
|
}
|
|
1261
1650
|
|
|
1262
1651
|
declare const chipContext: () => {
|
|
@@ -1302,9 +1691,9 @@ declare class RdxComboboxChipRemove {
|
|
|
1302
1691
|
declare const _importsCombobox: (typeof RdxComboboxAnchor)[];
|
|
1303
1692
|
declare class RdxComboboxModule {
|
|
1304
1693
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxComboboxModule, never>;
|
|
1305
|
-
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 RdxComboboxPortalMisuseGuard, typeof RdxComboboxBackdrop, typeof RdxComboboxPositioner, typeof RdxComboboxPopup, typeof RdxComboboxArrow, typeof RdxComboboxList, typeof RdxComboboxItem, typeof RdxComboboxItemIndicator, typeof RdxComboboxGroup, typeof RdxComboboxGroupLabel, typeof RdxComboboxEmpty, typeof RdxComboboxStatus, typeof RdxComboboxChips, typeof RdxComboboxChip, typeof RdxComboboxChipRemove], [typeof RdxComboboxRoot, typeof RdxComboboxAnchor, typeof RdxComboboxLabel, typeof RdxComboboxInput, typeof RdxComboboxValue, typeof RdxComboboxTrigger, typeof RdxComboboxIcon, typeof RdxComboboxClear, typeof RdxComboboxPortal, typeof RdxComboboxPortalMisuseGuard, typeof RdxComboboxBackdrop, typeof RdxComboboxPositioner, typeof RdxComboboxPopup, typeof RdxComboboxArrow, typeof RdxComboboxList, typeof RdxComboboxItem, typeof RdxComboboxItemIndicator, typeof RdxComboboxGroup, typeof RdxComboboxGroupLabel, typeof RdxComboboxEmpty, typeof RdxComboboxStatus, typeof RdxComboboxChips, typeof RdxComboboxChip, typeof RdxComboboxChipRemove]>;
|
|
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]>;
|
|
1306
1695
|
static ɵinj: _angular_core.ɵɵInjectorDeclaration<RdxComboboxModule>;
|
|
1307
1696
|
}
|
|
1308
1697
|
|
|
1309
|
-
export { RdxComboboxAnchor, RdxComboboxArrow, RdxComboboxBackdrop, RdxComboboxChip, RdxComboboxChipRemove, RdxComboboxChips, RdxComboboxClear, RdxComboboxEmpty, RdxComboboxGroup, RdxComboboxGroupLabel, RdxComboboxIcon, RdxComboboxInput, RdxComboboxItem, RdxComboboxItemIndicator, RdxComboboxLabel, RdxComboboxList, RdxComboboxModule, RdxComboboxPopup, RdxComboboxPortal, RdxComboboxPortalMisuseGuard, RdxComboboxPositioner, RdxComboboxRoot, RdxComboboxStatus, RdxComboboxTrigger, RdxComboboxValue, _importsCombobox, injectComboboxChipContext, injectComboboxGroupContext, injectComboboxItemContext, injectComboboxRootContext, provideComboboxChipContext, provideComboboxGroupContext, provideComboboxItemContext, provideComboboxRootContext };
|
|
1310
|
-
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 };
|