@radix-ng/primitives 1.0.0-beta.2 → 1.0.0-beta.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +1 -1
- package/README.md +76 -6
- package/fesm2022/radix-ng-primitives-accordion.mjs +5 -3
- package/fesm2022/radix-ng-primitives-accordion.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-alert-dialog.mjs +31 -24
- package/fesm2022/radix-ng-primitives-alert-dialog.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-autocomplete.mjs +1744 -0
- package/fesm2022/radix-ng-primitives-autocomplete.mjs.map +1 -0
- package/fesm2022/radix-ng-primitives-calendar.mjs +5 -3
- package/fesm2022/radix-ng-primitives-calendar.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-combobox.mjs +1399 -606
- package/fesm2022/radix-ng-primitives-combobox.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-config.mjs +13 -4
- package/fesm2022/radix-ng-primitives-config.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-context-menu.mjs +51 -10
- package/fesm2022/radix-ng-primitives-context-menu.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-core.mjs +1345 -64
- package/fesm2022/radix-ng-primitives-core.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-date-field.mjs +5 -3
- package/fesm2022/radix-ng-primitives-date-field.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-dialog.mjs +271 -145
- package/fesm2022/radix-ng-primitives-dialog.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-direction-provider.mjs +70 -0
- package/fesm2022/radix-ng-primitives-direction-provider.mjs.map +1 -0
- package/fesm2022/radix-ng-primitives-dismissable-layer.mjs +519 -184
- package/fesm2022/radix-ng-primitives-dismissable-layer.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-drawer.mjs +154 -64
- package/fesm2022/radix-ng-primitives-drawer.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-field.mjs +3 -2
- package/fesm2022/radix-ng-primitives-field.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-floating-focus-manager.mjs +517 -0
- package/fesm2022/radix-ng-primitives-floating-focus-manager.mjs.map +1 -0
- package/fesm2022/radix-ng-primitives-focus-scope.mjs +296 -70
- package/fesm2022/radix-ng-primitives-focus-scope.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-menu.mjs +894 -299
- package/fesm2022/radix-ng-primitives-menu.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-menubar.mjs +32 -4
- package/fesm2022/radix-ng-primitives-menubar.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-navigation-menu.mjs +176 -207
- package/fesm2022/radix-ng-primitives-navigation-menu.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-popover.mjs +250 -250
- package/fesm2022/radix-ng-primitives-popover.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-popper.mjs +94 -45
- package/fesm2022/radix-ng-primitives-popper.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-portal.mjs +107 -17
- package/fesm2022/radix-ng-primitives-portal.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-presence.mjs +262 -79
- package/fesm2022/radix-ng-primitives-presence.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-preview-card.mjs +172 -218
- package/fesm2022/radix-ng-primitives-preview-card.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-roving-focus.mjs +4 -2
- package/fesm2022/radix-ng-primitives-roving-focus.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-scroll-area.mjs +5 -4
- package/fesm2022/radix-ng-primitives-scroll-area.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-select.mjs +303 -234
- package/fesm2022/radix-ng-primitives-select.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-slider.mjs +5 -3
- package/fesm2022/radix-ng-primitives-slider.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-stepper.mjs +5 -3
- package/fesm2022/radix-ng-primitives-stepper.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-time-field.mjs +5 -3
- package/fesm2022/radix-ng-primitives-time-field.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-toast.mjs +15 -36
- package/fesm2022/radix-ng-primitives-toast.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-toggle-group.mjs +5 -3
- package/fesm2022/radix-ng-primitives-toggle-group.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-toolbar.mjs +5 -3
- package/fesm2022/radix-ng-primitives-toolbar.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-tooltip.mjs +105 -145
- package/fesm2022/radix-ng-primitives-tooltip.mjs.map +1 -1
- package/package.json +14 -1
- package/types/radix-ng-primitives-accordion.d.ts +4 -3
- package/types/radix-ng-primitives-alert-dialog.d.ts +17 -11
- package/types/radix-ng-primitives-autocomplete.d.ts +661 -0
- package/types/radix-ng-primitives-calendar.d.ts +5 -3
- package/types/radix-ng-primitives-combobox.d.ts +727 -293
- package/types/radix-ng-primitives-config.d.ts +1 -1
- package/types/radix-ng-primitives-context-menu.d.ts +15 -5
- package/types/radix-ng-primitives-core.d.ts +762 -14
- package/types/radix-ng-primitives-date-field.d.ts +3 -2
- package/types/radix-ng-primitives-dialog.d.ts +107 -55
- package/types/radix-ng-primitives-direction-provider.d.ts +41 -0
- package/types/radix-ng-primitives-dismissable-layer.d.ts +147 -99
- package/types/radix-ng-primitives-drawer.d.ts +49 -22
- package/types/radix-ng-primitives-field.d.ts +1 -0
- package/types/radix-ng-primitives-floating-focus-manager.d.ts +175 -0
- package/types/radix-ng-primitives-focus-scope.d.ts +132 -1
- package/types/radix-ng-primitives-menu.d.ts +204 -112
- package/types/radix-ng-primitives-navigation-menu.d.ts +61 -101
- package/types/radix-ng-primitives-popover.d.ts +82 -115
- package/types/radix-ng-primitives-popper.d.ts +46 -10
- package/types/radix-ng-primitives-portal.d.ts +53 -8
- package/types/radix-ng-primitives-presence.d.ts +98 -17
- package/types/radix-ng-primitives-preview-card.d.ts +63 -95
- package/types/radix-ng-primitives-roving-focus.d.ts +7 -6
- package/types/radix-ng-primitives-scroll-area.d.ts +2 -2
- package/types/radix-ng-primitives-select.d.ts +192 -158
- package/types/radix-ng-primitives-slider.d.ts +5 -4
- package/types/radix-ng-primitives-stepper.d.ts +4 -3
- package/types/radix-ng-primitives-time-field.d.ts +3 -2
- package/types/radix-ng-primitives-toast.d.ts +7 -7
- package/types/radix-ng-primitives-toggle-group.d.ts +5 -4
- package/types/radix-ng-primitives-toolbar.d.ts +3 -2
- package/types/radix-ng-primitives-tooltip.d.ts +48 -84
|
@@ -0,0 +1,661 @@
|
|
|
1
|
+
import * as _angular_core from '@angular/core';
|
|
2
|
+
import * as _radix_ng_primitives_combobox from '@radix-ng/primitives/combobox';
|
|
3
|
+
import { RdxComboboxOpenChange, ComboboxItemHighlightedDetails, ComboboxInputLayout, ComboboxItemRef, RdxComboboxOpenChangeReason, ComboboxHighlightReason } from '@radix-ng/primitives/combobox';
|
|
4
|
+
export { ComboboxHighlightReason as AutocompleteHighlightReason, ComboboxItemHighlightedDetails as AutocompleteItemHighlightedDetails } from '@radix-ng/primitives/combobox';
|
|
5
|
+
import * as _radix_ng_primitives_core from '@radix-ng/primitives/core';
|
|
6
|
+
import { AcceptableValue, RdxFloatingRootContext, Direction, BooleanInput, ItemValueComparator } from '@radix-ng/primitives/core';
|
|
7
|
+
import { ControlValueAccessor } from '@angular/forms';
|
|
8
|
+
import * as i1 from '@radix-ng/primitives/popper';
|
|
9
|
+
import { RdxPopperContentWrapper } from '@radix-ng/primitives/popper';
|
|
10
|
+
import * as _radix_ng_primitives_autocomplete from '@radix-ng/primitives/autocomplete';
|
|
11
|
+
import * as i2 from '@radix-ng/primitives/dismissable-layer';
|
|
12
|
+
import * as _radix_ng_primitives_types_radix_ng_primitives_core from '@radix-ng/primitives/types/radix-ng-primitives-core';
|
|
13
|
+
|
|
14
|
+
/**
|
|
15
|
+
* Optional positioning anchor for the popup. Put it on the element the popup should align to — for
|
|
16
|
+
* example a wrapper that holds the input plus an icon/clear button. When present it takes precedence
|
|
17
|
+
* over the input. Reuses the combobox anchor behavior.
|
|
18
|
+
*
|
|
19
|
+
* @group Components
|
|
20
|
+
*/
|
|
21
|
+
declare class RdxAutocompleteAnchor {
|
|
22
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxAutocompleteAnchor, never>;
|
|
23
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxAutocompleteAnchor, "[rdxAutocompleteAnchor]", ["rdxAutocompleteAnchor"], {}, {}, never, never, true, [{ directive: typeof _radix_ng_primitives_combobox.RdxComboboxAnchor; inputs: {}; outputs: {}; }]>;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
/**
|
|
27
|
+
* Autocomplete filtering / inline-completion behavior, mirroring Base UI's `mode`:
|
|
28
|
+
* - `'list'` (default): items are filtered by the query; the input text never changes from the active item.
|
|
29
|
+
* - `'both'`: items are filtered **and** the input is inline-completed from the active item.
|
|
30
|
+
* - `'inline'`: items are static (not filtered) but the input is inline-completed from the active item.
|
|
31
|
+
* - `'none'`: items are static and the input is never changed from the active item.
|
|
32
|
+
*/
|
|
33
|
+
type AutocompleteMode = 'list' | 'both' | 'inline' | 'none';
|
|
34
|
+
/**
|
|
35
|
+
* A custom filter predicate, matching Base UI's signature: the item's raw value (the object for object
|
|
36
|
+
* items), the query, and an `itemToString` resolver. Value-first lets one filter match strings and
|
|
37
|
+
* objects alike (fuzzy / multi-key). The same shape as the shared combobox engine's `ComboboxFilter`.
|
|
38
|
+
*/
|
|
39
|
+
type AutocompleteFilter = (itemValue: AcceptableValue, query: string, itemToString?: (itemValue: AcceptableValue) => string) => boolean;
|
|
40
|
+
/** Why the input value changed, mirroring Base UI's `onValueChange` details. */
|
|
41
|
+
type AutocompleteChangeReason = 'input-change' | 'item-press' | 'input-clear' | 'none';
|
|
42
|
+
/** Payload of {@link RdxAutocompleteRoot.onValueChange}: the new value and why it changed. */
|
|
43
|
+
interface AutocompleteValueChangeDetails {
|
|
44
|
+
/** The new input value. */
|
|
45
|
+
value: string;
|
|
46
|
+
/** What caused the change (e.g. skip `'item-press'` to avoid overwriting an external value). */
|
|
47
|
+
reason: AutocompleteChangeReason;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
/**
|
|
51
|
+
* Root of an Autocomplete — a text input with a filtered list of suggestions. A thin configuration over
|
|
52
|
+
* the shared combobox engine (ADR 0014) with `selectionMode: 'none'`, so its value **is** the input
|
|
53
|
+
* string: typing, selecting an item, or clearing all change a single string value. Implements
|
|
54
|
+
* `ControlValueAccessor` (the form value is the input string).
|
|
55
|
+
*
|
|
56
|
+
* @group Components
|
|
57
|
+
*/
|
|
58
|
+
declare class RdxAutocompleteRoot implements ControlValueAccessor {
|
|
59
|
+
private readonly injector;
|
|
60
|
+
/** Per-popup floating root context (ADR 0015) — `open` / `triggers` / reference for the dismissal engine. */
|
|
61
|
+
readonly floatingContext: RdxFloatingRootContext;
|
|
62
|
+
/** The input text. This is the form value (controlled / uncontrolled via {@link defaultValue}). */
|
|
63
|
+
readonly value: _angular_core.ModelSignal<string>;
|
|
64
|
+
/** Initial input text when uncontrolled. */
|
|
65
|
+
readonly defaultValue: _angular_core.InputSignal<string | undefined>;
|
|
66
|
+
/** Whether the popup is open. */
|
|
67
|
+
readonly open: _angular_core.ModelSignal<boolean>;
|
|
68
|
+
/** Initial open state when uncontrolled. */
|
|
69
|
+
readonly defaultOpen: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
70
|
+
/** Filtering / inline-completion behavior. See {@link AutocompleteMode}. */
|
|
71
|
+
readonly mode: _angular_core.InputSignal<AutocompleteMode>;
|
|
72
|
+
/** Text direction. */
|
|
73
|
+
readonly dirInput: _angular_core.InputSignal<Direction | undefined>;
|
|
74
|
+
readonly dir: _angular_core.Signal<Direction>;
|
|
75
|
+
/** Whether the autocomplete is disabled. */
|
|
76
|
+
readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
77
|
+
/** Whether the autocomplete is read-only. */
|
|
78
|
+
readonly readOnly: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
79
|
+
/** Whether a value is required (for forms). */
|
|
80
|
+
readonly required: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
81
|
+
/** Whether keyboard navigation wraps at the list boundaries. */
|
|
82
|
+
readonly loopFocus: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
83
|
+
/**
|
|
84
|
+
* Auto-highlight behavior (matches Base UI):
|
|
85
|
+
* - `false` (default): never auto-highlight;
|
|
86
|
+
* - `true` (also the bare `autoHighlight` attribute): highlight the first match as the query changes;
|
|
87
|
+
* - `'always'`: keep the first navigable item highlighted whenever the popup is open.
|
|
88
|
+
*/
|
|
89
|
+
readonly autoHighlight: _angular_core.InputSignalWithTransform<boolean | "always", BooleanInput>;
|
|
90
|
+
/** Resolved auto-highlight mode. */
|
|
91
|
+
readonly autoHighlightMode: _angular_core.Signal<"input-change" | "always" | "off">;
|
|
92
|
+
/** Whether moving the pointer over an item highlights it. */
|
|
93
|
+
readonly highlightItemOnHover: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
94
|
+
/** Whether a pointer-driven highlight is kept when the cursor leaves the list. */
|
|
95
|
+
readonly keepHighlight: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
96
|
+
/** Whether clicking the input opens the popup. Defaults to `false` (Base UI default). */
|
|
97
|
+
readonly openOnInputClick: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
98
|
+
/** Whether the popup is modal: locks page scroll and makes outside content inert while open. */
|
|
99
|
+
readonly modal: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
100
|
+
/** Whether selecting an item requests submit of the closest form. */
|
|
101
|
+
readonly submitOnItemClick: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
102
|
+
/** Whether the list is laid out as a 2D grid (enables row/column arrow navigation). */
|
|
103
|
+
readonly grid: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
104
|
+
/**
|
|
105
|
+
* Filter applied to items against the input query (only when {@link mode} is `'list'` / `'both'`).
|
|
106
|
+
* `undefined` → locale-aware contains; a function → custom `(value, query, itemToString)`; `null` →
|
|
107
|
+
* built-in filtering disabled.
|
|
108
|
+
*/
|
|
109
|
+
readonly filter: _angular_core.InputSignal<AutocompleteFilter | null | undefined>;
|
|
110
|
+
/** Maximum number of matching items to show. `-1` (default) means no limit. */
|
|
111
|
+
readonly limit: _angular_core.InputSignalWithTransform<number, unknown>;
|
|
112
|
+
/** The full set of item values for {@link virtualized} mode. */
|
|
113
|
+
readonly items: _angular_core.InputSignal<readonly AcceptableValue[] | undefined>;
|
|
114
|
+
/** Whether the list is externally virtualized (navigation runs over {@link items} by index). */
|
|
115
|
+
readonly virtualized: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
116
|
+
/** How item values are compared for equality (a comparator function or an object key). Base UI prop name. */
|
|
117
|
+
readonly isItemEqualToValue: _angular_core.InputSignal<ItemValueComparator<AcceptableValue> | undefined>;
|
|
118
|
+
/** Converts an item value to its string label (filter text + input text on selection). */
|
|
119
|
+
readonly itemToStringValue: _angular_core.InputSignal<((value: AcceptableValue) => string) | undefined>;
|
|
120
|
+
/** Emits when the input value changes (typing, selection, or clear), with the reason. */
|
|
121
|
+
readonly onValueChange: _angular_core.OutputEmitterRef<AutocompleteValueChangeDetails>;
|
|
122
|
+
/** Emits when the popup opens or closes. */
|
|
123
|
+
readonly onOpenChange: _angular_core.OutputEmitterRef<RdxComboboxOpenChange>;
|
|
124
|
+
/** Emits as the highlight moves, with the item's value, its index in {@link filteredItems}, and the reason. */
|
|
125
|
+
readonly onItemHighlighted: _angular_core.OutputEmitterRef<ComboboxItemHighlightedDetails>;
|
|
126
|
+
/** Emits after the open/close transition (including any exit animation) finishes. */
|
|
127
|
+
readonly onOpenChangeComplete: _angular_core.OutputEmitterRef<boolean>;
|
|
128
|
+
/** Constant signals exposed to the combobox context (autocomplete is always single-value). */
|
|
129
|
+
readonly alwaysFalse: _angular_core.WritableSignal<boolean>;
|
|
130
|
+
readonly noneMode: _angular_core.WritableSignal<"none">;
|
|
131
|
+
private readonly cvaDisabled;
|
|
132
|
+
readonly disabledState: _angular_core.Signal<boolean>;
|
|
133
|
+
readonly requiredState: _angular_core.Signal<boolean>;
|
|
134
|
+
private readonly preventUnmountOnClose;
|
|
135
|
+
readonly present: _angular_core.Signal<boolean>;
|
|
136
|
+
/** Whether built-in filtering applies in the current mode (`list` / `both`). */
|
|
137
|
+
private readonly filteringMode;
|
|
138
|
+
/** Whether inline completion applies in the current mode (`both` / `inline`). */
|
|
139
|
+
readonly inlineMode: _angular_core.Signal<boolean>;
|
|
140
|
+
/**
|
|
141
|
+
* Whether the input text is a fresh user query rather than a committed selection's label. While
|
|
142
|
+
* `false` (just opened, or showing a committed selection), the list is unfiltered; it flips `true`
|
|
143
|
+
* on the first keystroke.
|
|
144
|
+
*/
|
|
145
|
+
private readonly typed;
|
|
146
|
+
/** The text the user actually typed, used as the filter query. */
|
|
147
|
+
readonly query: _angular_core.Signal<string>;
|
|
148
|
+
/** The shared engine: item registry, filtering, highlight navigation (grid), inline, transition. */
|
|
149
|
+
private readonly engine;
|
|
150
|
+
/** What the input element displays: the inline preview if any, else the committed value. */
|
|
151
|
+
readonly displayValue: _angular_core.Signal<string>;
|
|
152
|
+
get listId(): string;
|
|
153
|
+
get labelId(): _angular_core.Signal<string | undefined>;
|
|
154
|
+
get inputElement(): _angular_core.Signal<HTMLInputElement | null>;
|
|
155
|
+
setInputElement(el: HTMLInputElement | null): void;
|
|
156
|
+
setInputLayout(layout: ComboboxInputLayout): void;
|
|
157
|
+
setPopupMounted(value: boolean): void;
|
|
158
|
+
get inputLayout(): _angular_core.Signal<ComboboxInputLayout>;
|
|
159
|
+
get openedByTouch(): _angular_core.Signal<boolean>;
|
|
160
|
+
get popupMounted(): _angular_core.Signal<boolean>;
|
|
161
|
+
get highlight(): _radix_ng_primitives_core.ListHighlight<ComboboxItemRef>;
|
|
162
|
+
get highlightedItem(): _angular_core.Signal<ComboboxItemRef | null>;
|
|
163
|
+
get highlightedIndex(): _angular_core.Signal<number>;
|
|
164
|
+
get activeId(): _angular_core.Signal<string | undefined>;
|
|
165
|
+
get filteredItems(): _angular_core.Signal<readonly AcceptableValue[]>;
|
|
166
|
+
get visibleCount(): _angular_core.Signal<number>;
|
|
167
|
+
get inlinePreview(): _angular_core.Signal<string | null>;
|
|
168
|
+
get transitionStatus(): _angular_core.Signal<_radix_ng_primitives_core.RdxTransitionStatus>;
|
|
169
|
+
get registerTransitionElement(): (element: HTMLElement) => () => void;
|
|
170
|
+
get triggerElement(): HTMLElement | null;
|
|
171
|
+
private onChange?;
|
|
172
|
+
private onTouched?;
|
|
173
|
+
constructor();
|
|
174
|
+
setSuppressInline(value: boolean): void;
|
|
175
|
+
/** Opens the popup for browsing (resets the query to "pristine" and selects the input text). */
|
|
176
|
+
openForBrowse(reason?: RdxComboboxOpenChangeReason, event?: Event): void;
|
|
177
|
+
/** Opens the popup and highlights the given edge once the list mounts. */
|
|
178
|
+
openAndHighlight(edge: 'first' | 'last', reason?: RdxComboboxOpenChangeReason, event?: Event): void;
|
|
179
|
+
/** Whether the item's value/label matches the current input value (combobox context contract). */
|
|
180
|
+
isSelectedValue(value: AcceptableValue): boolean;
|
|
181
|
+
setOpen(open: boolean, reason?: RdxComboboxOpenChangeReason, event?: Event): boolean;
|
|
182
|
+
closePopup(revert?: boolean, reason?: RdxComboboxOpenChangeReason, event?: Event): void;
|
|
183
|
+
/** Updates the input text from user typing (marks it a fresh query, emits change). */
|
|
184
|
+
setQuery(value: string): void;
|
|
185
|
+
labelFor(value: AcceptableValue): string;
|
|
186
|
+
itemId(index: number): string;
|
|
187
|
+
isVisible(item: ComboboxItemRef): boolean;
|
|
188
|
+
registerItem(item: ComboboxItemRef): void;
|
|
189
|
+
unregisterItem(item: ComboboxItemRef): void;
|
|
190
|
+
handleSelect(item: ComboboxItemRef, event?: Event): void;
|
|
191
|
+
/** Selects the filtered item at `index` (virtualized mode). */
|
|
192
|
+
selectIndex(index: number, event?: Event): void;
|
|
193
|
+
/** Commits a selection: the input value becomes the item's label, the popup closes. */
|
|
194
|
+
private commitSelection;
|
|
195
|
+
private maybeSubmit;
|
|
196
|
+
selectHighlighted(event?: Event): void;
|
|
197
|
+
navigateByKeyboard(direction: 1 | -1, event?: Event): void;
|
|
198
|
+
moveDown(): void;
|
|
199
|
+
moveUp(): void;
|
|
200
|
+
moveRight(): void;
|
|
201
|
+
moveLeft(): void;
|
|
202
|
+
highlightFirst(reason?: ComboboxHighlightReason): void;
|
|
203
|
+
highlightLast(reason?: ComboboxHighlightReason): void;
|
|
204
|
+
highlightIndex(index: number, reason: ComboboxHighlightReason): void;
|
|
205
|
+
setHighlight(item: ComboboxItemRef, reason: ComboboxHighlightReason): void;
|
|
206
|
+
clearHighlightState(): void;
|
|
207
|
+
isKeyboardActive(): boolean;
|
|
208
|
+
setKeyboardActive(value: boolean): void;
|
|
209
|
+
clearValue(): void;
|
|
210
|
+
focusInput(): void;
|
|
211
|
+
markAsTouched(): void;
|
|
212
|
+
private commitValue;
|
|
213
|
+
private createOpenChangeEvent;
|
|
214
|
+
private resolveOpenChangeTrigger;
|
|
215
|
+
writeValue(value: string | null): void;
|
|
216
|
+
registerOnChange(fn: (value: string) => void): void;
|
|
217
|
+
registerOnTouched(fn: () => void): void;
|
|
218
|
+
setDisabledState(isDisabled: boolean): void;
|
|
219
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxAutocompleteRoot, never>;
|
|
220
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxAutocompleteRoot, "[rdxAutocompleteRoot]", ["rdxAutocompleteRoot"], { "value": { "alias": "value"; "required": false; "isSignal": true; }; "defaultValue": { "alias": "defaultValue"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; "defaultOpen": { "alias": "defaultOpen"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "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; }; "grid": { "alias": "grid"; "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; }; "isItemEqualToValue": { "alias": "isItemEqualToValue"; "required": false; "isSignal": true; }; "itemToStringValue": { "alias": "itemToStringValue"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "open": "openChange"; "onValueChange": "onValueChange"; "onOpenChange": "onOpenChange"; "onItemHighlighted": "onItemHighlighted"; "onOpenChangeComplete": "onOpenChangeComplete"; }, never, never, true, [{ directive: typeof i1.RdxPopper; inputs: {}; outputs: {}; }]>;
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
/**
|
|
224
|
+
* An accessible label for the autocomplete. Registers its id so the input (and trigger) reference it
|
|
225
|
+
* via `aria-labelledby`. Reuses the combobox label behavior.
|
|
226
|
+
*
|
|
227
|
+
* @group Components
|
|
228
|
+
*/
|
|
229
|
+
declare class RdxAutocompleteLabel {
|
|
230
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxAutocompleteLabel, never>;
|
|
231
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxAutocompleteLabel, "[rdxAutocompleteLabel]", ["rdxAutocompleteLabel"], {}, {}, never, never, true, [{ directive: typeof _radix_ng_primitives_combobox.RdxComboboxLabel; inputs: {}; outputs: {}; }]>;
|
|
232
|
+
}
|
|
233
|
+
|
|
234
|
+
/**
|
|
235
|
+
* Optional wrapper around the input and its adornments (icon, clear, trigger). Mirrors the input's
|
|
236
|
+
* state via `data-*` so the whole group can be styled together (focus ring, disabled, etc.).
|
|
237
|
+
*
|
|
238
|
+
* @group Components
|
|
239
|
+
*/
|
|
240
|
+
declare class RdxAutocompleteInputGroup {
|
|
241
|
+
protected readonly root: RdxAutocompleteRoot;
|
|
242
|
+
protected readonly dataAttr: (value: boolean) => "" | undefined;
|
|
243
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxAutocompleteInputGroup, never>;
|
|
244
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxAutocompleteInputGroup, "[rdxAutocompleteInputGroup]", ["rdxAutocompleteInputGroup"], {}, {}, never, never, true, never>;
|
|
245
|
+
}
|
|
246
|
+
|
|
247
|
+
/**
|
|
248
|
+
* The autocomplete text input. Holds DOM focus at all times; the highlighted option is referenced via
|
|
249
|
+
* `aria-activedescendant`. In `both` / `inline` modes it shows the active item's inline completion
|
|
250
|
+
* with the completed suffix selected. Integrates with Field for labeling and validation state.
|
|
251
|
+
*
|
|
252
|
+
* @group Components
|
|
253
|
+
*/
|
|
254
|
+
declare class RdxAutocompleteInput {
|
|
255
|
+
protected readonly root: RdxAutocompleteRoot;
|
|
256
|
+
private readonly element;
|
|
257
|
+
private readonly fieldRootContext;
|
|
258
|
+
/** The input id; Field labels and descriptions reference it for accessible relationships. */
|
|
259
|
+
readonly id: _angular_core.InputSignal<string>;
|
|
260
|
+
/** Marks the input as invalid independently of any Field state. */
|
|
261
|
+
readonly invalid: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
|
|
262
|
+
protected readonly ariaAutocomplete: _angular_core.Signal<_radix_ng_primitives_autocomplete.AutocompleteMode>;
|
|
263
|
+
protected readonly invalidState: _angular_core.Signal<boolean>;
|
|
264
|
+
protected readonly disabledState: _angular_core.Signal<boolean>;
|
|
265
|
+
protected readonly requiredState: _angular_core.Signal<boolean>;
|
|
266
|
+
protected readonly filledState: _angular_core.Signal<boolean>;
|
|
267
|
+
protected readonly focusedState: _angular_core.Signal<boolean>;
|
|
268
|
+
protected readonly describedBy: _angular_core.Signal<string | undefined>;
|
|
269
|
+
constructor();
|
|
270
|
+
/** Whether an IME composition is in progress (CJK). While composing, don't filter or select. */
|
|
271
|
+
protected composing: boolean;
|
|
272
|
+
onInput(event: Event): void;
|
|
273
|
+
onCompositionEnd(event: CompositionEvent): void;
|
|
274
|
+
private commitInput;
|
|
275
|
+
onClick(event: MouseEvent): void;
|
|
276
|
+
onFocus(): void;
|
|
277
|
+
onBlur(): void;
|
|
278
|
+
onKeydown(event: KeyboardEvent): void;
|
|
279
|
+
protected readonly dataAttr: (value: boolean) => "" | undefined;
|
|
280
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxAutocompleteInput, never>;
|
|
281
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxAutocompleteInput, "input[rdxAutocompleteInput]", ["rdxAutocompleteInput"], { "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 i2.RdxFloatingInsideElement; inputs: {}; outputs: {}; }]>;
|
|
282
|
+
}
|
|
283
|
+
|
|
284
|
+
/**
|
|
285
|
+
* Renders the current input value as text. Useful for a read-only display of the committed value.
|
|
286
|
+
* Read `slotText()` in the template. Exposes `data-placeholder` while the value is empty.
|
|
287
|
+
*
|
|
288
|
+
* @example
|
|
289
|
+
* <span #value="rdxAutocompleteValue" rdxAutocompleteValue placeholder="Empty">{{ value.slotText() }}</span>
|
|
290
|
+
*
|
|
291
|
+
* @group Components
|
|
292
|
+
*/
|
|
293
|
+
declare class RdxAutocompleteValue {
|
|
294
|
+
private readonly root;
|
|
295
|
+
/** Text shown when the value is empty. */
|
|
296
|
+
readonly placeholder: _angular_core.InputSignal<string | undefined>;
|
|
297
|
+
readonly isEmpty: _angular_core.Signal<boolean>;
|
|
298
|
+
/** The current input value, or the `placeholder` when empty. */
|
|
299
|
+
readonly slotText: _angular_core.Signal<string>;
|
|
300
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxAutocompleteValue, never>;
|
|
301
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxAutocompleteValue, "[rdxAutocompleteValue]", ["rdxAutocompleteValue"], { "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
302
|
+
}
|
|
303
|
+
|
|
304
|
+
/**
|
|
305
|
+
* Toggles the autocomplete popup. Reuses the combobox trigger: a `tabindex="-1"` toggle when the input
|
|
306
|
+
* sits outside the popup, or the focusable `role="combobox"` control when the input is inside it.
|
|
307
|
+
*
|
|
308
|
+
* @group Components
|
|
309
|
+
*/
|
|
310
|
+
declare class RdxAutocompleteTrigger {
|
|
311
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxAutocompleteTrigger, never>;
|
|
312
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxAutocompleteTrigger, "button[rdxAutocompleteTrigger]", ["rdxAutocompleteTrigger"], {}, {}, never, never, true, [{ directive: typeof _radix_ng_primitives_combobox.RdxComboboxTrigger; inputs: {}; outputs: {}; }]>;
|
|
313
|
+
}
|
|
314
|
+
|
|
315
|
+
/**
|
|
316
|
+
* Decorative icon inside the trigger. Hidden from assistive technology. Reuses the combobox icon.
|
|
317
|
+
*
|
|
318
|
+
* @group Components
|
|
319
|
+
*/
|
|
320
|
+
declare class RdxAutocompleteIcon {
|
|
321
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxAutocompleteIcon, never>;
|
|
322
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxAutocompleteIcon, "[rdxAutocompleteIcon]", ["rdxAutocompleteIcon"], {}, {}, never, never, true, [{ directive: typeof _radix_ng_primitives_combobox.RdxComboboxIcon; inputs: {}; outputs: {}; }]>;
|
|
323
|
+
}
|
|
324
|
+
|
|
325
|
+
/**
|
|
326
|
+
* Clears the input value. Hidden when there is nothing to clear.
|
|
327
|
+
*
|
|
328
|
+
* @group Components
|
|
329
|
+
*/
|
|
330
|
+
declare class RdxAutocompleteClear {
|
|
331
|
+
protected readonly root: RdxAutocompleteRoot;
|
|
332
|
+
protected readonly isEmpty: _angular_core.Signal<boolean>;
|
|
333
|
+
/** Disabled when the control is disabled or read-only (clearing is a mutation). */
|
|
334
|
+
protected readonly isDisabled: _angular_core.Signal<boolean>;
|
|
335
|
+
onClick(): void;
|
|
336
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxAutocompleteClear, never>;
|
|
337
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxAutocompleteClear, "button[rdxAutocompleteClear]", ["rdxAutocompleteClear"], {}, {}, never, never, true, [{ directive: typeof i2.RdxFloatingInsideElement; inputs: {}; outputs: {}; }]>;
|
|
338
|
+
}
|
|
339
|
+
|
|
340
|
+
/**
|
|
341
|
+
* Structural directive that teleports the autocomplete popup into a container (default
|
|
342
|
+
* `document.body`) while the autocomplete is open, keeping it mounted until any CSS exit `@keyframes`
|
|
343
|
+
* finishes. Composes the structural {@link RdxComboboxPortal} (which reads the open state from the
|
|
344
|
+
* combobox root context provided by `RdxAutocompleteRoot`).
|
|
345
|
+
*
|
|
346
|
+
* Apply it with the `*` microsyntax on the positioner —
|
|
347
|
+
* `<div *rdxAutocompletePortal rdxAutocompletePositioner>` — or as an explicit
|
|
348
|
+
* `<ng-template rdxAutocompletePortal>`. For a custom container use the explicit form with `[container]`.
|
|
349
|
+
*
|
|
350
|
+
* @group Components
|
|
351
|
+
*/
|
|
352
|
+
declare class RdxAutocompletePortal {
|
|
353
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxAutocompletePortal, never>;
|
|
354
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxAutocompletePortal, "ng-template[rdxAutocompletePortal]", ["rdxAutocompletePortal"], {}, {}, never, never, true, [{ directive: typeof _radix_ng_primitives_combobox.RdxComboboxPortal; inputs: { "container": "container"; }; outputs: {}; }]>;
|
|
355
|
+
}
|
|
356
|
+
/**
|
|
357
|
+
* Dev-mode guard: `rdxAutocompletePortal` is now structural, so the old `<div rdxAutocompletePortal>`
|
|
358
|
+
* markup would silently stop portaling — fail loudly instead.
|
|
359
|
+
*
|
|
360
|
+
* @group Components
|
|
361
|
+
*/
|
|
362
|
+
declare class RdxAutocompletePortalMisuseGuard {
|
|
363
|
+
constructor();
|
|
364
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxAutocompletePortalMisuseGuard, never>;
|
|
365
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxAutocompletePortalMisuseGuard, "[rdxAutocompletePortal]:not(ng-template)", never, {}, {}, never, never, true, never>;
|
|
366
|
+
}
|
|
367
|
+
|
|
368
|
+
/**
|
|
369
|
+
* An overlay rendered beneath the popup in `modal` mode. Exposes `data-open` / `data-closed` for
|
|
370
|
+
* animation. Reuses the combobox backdrop.
|
|
371
|
+
*
|
|
372
|
+
* @group Components
|
|
373
|
+
*/
|
|
374
|
+
declare class RdxAutocompleteBackdrop {
|
|
375
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxAutocompleteBackdrop, never>;
|
|
376
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxAutocompleteBackdrop, "[rdxAutocompleteBackdrop]", ["rdxAutocompleteBackdrop"], {}, {}, never, never, true, [{ directive: typeof _radix_ng_primitives_combobox.RdxComboboxBackdrop; inputs: {}; outputs: {}; }]>;
|
|
377
|
+
}
|
|
378
|
+
|
|
379
|
+
/**
|
|
380
|
+
* Positions the autocomplete popup relative to the input anchor using the popper engine.
|
|
381
|
+
*
|
|
382
|
+
* A "thin" positioner (ADR 0012): it inherits the full popper positioning surface — the inputs
|
|
383
|
+
* (`side`, `sideOffset`, `align`, …), the `placed` output, and the host bindings — from
|
|
384
|
+
* {@link RdxPopperContentWrapper}, and only declares autocomplete's Base UI-aligned defaults through
|
|
385
|
+
* the config provider (the same building block the combobox positioner uses).
|
|
386
|
+
*
|
|
387
|
+
* @group Components
|
|
388
|
+
*/
|
|
389
|
+
declare class RdxAutocompletePositioner extends RdxPopperContentWrapper {
|
|
390
|
+
constructor();
|
|
391
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxAutocompletePositioner, never>;
|
|
392
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxAutocompletePositioner, "[rdxAutocompletePositioner]", ["rdxAutocompletePositioner"], {}, {}, never, never, true, never>;
|
|
393
|
+
}
|
|
394
|
+
|
|
395
|
+
/**
|
|
396
|
+
* The popup surface. Composes the popper content (for `data-side` / `data-align`) and a dismissable
|
|
397
|
+
* layer for outside-dismiss. It does **not** trap focus — focus stays in the input throughout. When
|
|
398
|
+
* the input lives **inside** the popup (the "input in popup" / emoji-picker pattern), it moves focus
|
|
399
|
+
* to the input once the popup is positioned.
|
|
400
|
+
*
|
|
401
|
+
* @group Components
|
|
402
|
+
*/
|
|
403
|
+
declare class RdxAutocompletePopup {
|
|
404
|
+
protected readonly root: RdxAutocompleteRoot;
|
|
405
|
+
private readonly floatingContext;
|
|
406
|
+
private readonly registration;
|
|
407
|
+
private readonly popper;
|
|
408
|
+
private readonly element;
|
|
409
|
+
constructor();
|
|
410
|
+
/**
|
|
411
|
+
* Base UI focus handoff: if focus lands on the popup or the list (the `tabindex="-1"` programmatic
|
|
412
|
+
* focus targets), hand it back to the input so arrow-key navigation (`aria-activedescendant`) keeps
|
|
413
|
+
* working. Skipped for a touch interaction, where focus is parked on the popup to keep the Android
|
|
414
|
+
* virtual keyboard closed.
|
|
415
|
+
*/
|
|
416
|
+
onFocusIn(event: FocusEvent): void;
|
|
417
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxAutocompletePopup, never>;
|
|
418
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxAutocompletePopup, "[rdxAutocompletePopup]", ["rdxAutocompletePopup"], {}, {}, never, never, true, [{ directive: typeof i1.RdxPopperContent; inputs: {}; outputs: {}; }, { directive: typeof _radix_ng_primitives_core.RdxFloatingNodeRegistration; inputs: {}; outputs: {}; }]>;
|
|
419
|
+
}
|
|
420
|
+
|
|
421
|
+
/**
|
|
422
|
+
* An optional arrow that points from the popup to the anchor. Composes the popper arrow directly
|
|
423
|
+
* (the same building block the combobox arrow uses).
|
|
424
|
+
*
|
|
425
|
+
* @group Components
|
|
426
|
+
*/
|
|
427
|
+
declare class RdxAutocompleteArrow {
|
|
428
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxAutocompleteArrow, never>;
|
|
429
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxAutocompleteArrow, "[rdxAutocompleteArrow]", ["rdxAutocompleteArrow"], {}, {}, never, never, true, [{ directive: typeof i1.RdxPopperArrow; inputs: { "width": "width"; "height": "height"; }; outputs: {}; }]>;
|
|
430
|
+
}
|
|
431
|
+
|
|
432
|
+
/**
|
|
433
|
+
* The listbox (or grid) container for suggestions. Carries the id referenced by the input's
|
|
434
|
+
* `aria-controls`, and switches its role to `grid` when the root has `grid` enabled.
|
|
435
|
+
*
|
|
436
|
+
* @group Components
|
|
437
|
+
*/
|
|
438
|
+
declare class RdxAutocompleteList {
|
|
439
|
+
protected readonly root: RdxAutocompleteRoot;
|
|
440
|
+
onKeydown(event: KeyboardEvent): void;
|
|
441
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxAutocompleteList, never>;
|
|
442
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxAutocompleteList, "[rdxAutocompleteList]", ["rdxAutocompleteList"], {}, {}, never, never, true, never>;
|
|
443
|
+
}
|
|
444
|
+
|
|
445
|
+
/**
|
|
446
|
+
* A row in a grid-layout autocomplete list. Groups the items in one row so the root can navigate by
|
|
447
|
+
* row (ArrowUp / ArrowDown) and within a row (ArrowLeft / ArrowRight). Only meaningful when the root
|
|
448
|
+
* has `grid` enabled; the root resolves an item's row from its nearest `[rdxAutocompleteRow]` ancestor.
|
|
449
|
+
*
|
|
450
|
+
* @group Components
|
|
451
|
+
*/
|
|
452
|
+
declare class RdxAutocompleteRow {
|
|
453
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxAutocompleteRow, never>;
|
|
454
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxAutocompleteRow, "[rdxAutocompleteRow]", ["rdxAutocompleteRow"], {}, {}, never, never, true, never>;
|
|
455
|
+
}
|
|
456
|
+
|
|
457
|
+
/**
|
|
458
|
+
* A visual separator between groups of suggestions (`role="separator"`). Reuses the combobox separator.
|
|
459
|
+
*
|
|
460
|
+
* @group Components
|
|
461
|
+
*/
|
|
462
|
+
declare class RdxAutocompleteSeparator {
|
|
463
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxAutocompleteSeparator, never>;
|
|
464
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxAutocompleteSeparator, "[rdxAutocompleteSeparator]", ["rdxAutocompleteSeparator"], {}, {}, never, never, true, [{ directive: typeof _radix_ng_primitives_combobox.RdxComboboxSeparator; inputs: {}; outputs: {}; }]>;
|
|
465
|
+
}
|
|
466
|
+
|
|
467
|
+
/**
|
|
468
|
+
* A selectable suggestion. Registers itself with the root for filtering and navigation. Highlight is
|
|
469
|
+
* virtual (`data-highlighted` + `aria-activedescendant` on the input) — items never take DOM focus.
|
|
470
|
+
* Selecting an item writes its text into the input. Unlike the combobox item, the `value` is optional;
|
|
471
|
+
* when omitted, selection falls back to the option's text content (autocomplete's value is the input string).
|
|
472
|
+
*
|
|
473
|
+
* @group Components
|
|
474
|
+
*/
|
|
475
|
+
declare class RdxAutocompleteItem implements ComboboxItemRef {
|
|
476
|
+
private readonly rootContext;
|
|
477
|
+
readonly element: HTMLElement;
|
|
478
|
+
readonly id: string;
|
|
479
|
+
/**
|
|
480
|
+
* The explicit `[value]`, or `undefined` when omitted. Read the resolved {@link value} instead —
|
|
481
|
+
* it falls back to the text content only when no value was bound (so explicit falsy values like
|
|
482
|
+
* `0` / `''` / `null` are preserved for the filter and selection).
|
|
483
|
+
*/
|
|
484
|
+
readonly valueInput: _angular_core.InputSignal<AcceptableValue | undefined>;
|
|
485
|
+
/** Explicit text matched against the query and written to the input. Defaults to text content. */
|
|
486
|
+
readonly textValueInput: _angular_core.InputSignal<string>;
|
|
487
|
+
/** Whether the option is disabled. */
|
|
488
|
+
readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
489
|
+
/** The option's index in the list. Required in virtualized mode. */
|
|
490
|
+
readonly index: _angular_core.InputSignal<number | undefined>;
|
|
491
|
+
protected readonly virtualized: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
492
|
+
private readonly autoTextValue;
|
|
493
|
+
readonly textValue: _angular_core.Signal<string>;
|
|
494
|
+
/**
|
|
495
|
+
* The option's effective value: the explicit `[value]` if bound (preserving `0` / `''` / `null`),
|
|
496
|
+
* otherwise the text content (autocomplete's value is the input string). Only an absent input —
|
|
497
|
+
* `undefined` — falls back, so a custom filter still sees the real `itemValue` for falsy values.
|
|
498
|
+
*/
|
|
499
|
+
readonly value: _angular_core.Signal<AcceptableValue>;
|
|
500
|
+
protected readonly elementId: _angular_core.Signal<string>;
|
|
501
|
+
protected readonly ariaSetSize: _angular_core.Signal<number | undefined>;
|
|
502
|
+
protected readonly ariaPosInSet: _angular_core.Signal<number | undefined>;
|
|
503
|
+
/** The nearest enclosing grid row, if any (drives the `gridcell` role). */
|
|
504
|
+
private readonly row;
|
|
505
|
+
/** `gridcell` only when actually inside a `RdxAutocompleteRow` of a grid list; otherwise `option`. */
|
|
506
|
+
protected readonly role: _angular_core.Signal<"gridcell" | "option">;
|
|
507
|
+
readonly isVisible: _angular_core.Signal<boolean>;
|
|
508
|
+
readonly isSelected: _angular_core.Signal<boolean>;
|
|
509
|
+
readonly isHighlighted: _angular_core.Signal<boolean>;
|
|
510
|
+
private readonly group;
|
|
511
|
+
constructor();
|
|
512
|
+
private pointerDownStarted;
|
|
513
|
+
onPointerDown(event: MouseEvent): void;
|
|
514
|
+
onMouseDown(event: MouseEvent): void;
|
|
515
|
+
onMouseUp(event: MouseEvent): void;
|
|
516
|
+
onClick(): void;
|
|
517
|
+
private commitSelection;
|
|
518
|
+
onPointerMove(): void;
|
|
519
|
+
onPointerLeave(event: PointerEvent): void;
|
|
520
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxAutocompleteItem, never>;
|
|
521
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxAutocompleteItem, "[rdxAutocompleteItem]", ["rdxAutocompleteItem"], { "valueInput": { "alias": "value"; "required": false; "isSignal": true; }; "textValueInput": { "alias": "textValue"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "index": { "alias": "index"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
522
|
+
}
|
|
523
|
+
|
|
524
|
+
/**
|
|
525
|
+
* Renders only when its item is selected (e.g. a checkmark). Reuses the combobox item indicator,
|
|
526
|
+
* which reads the item context provided by {@link RdxAutocompleteItem}.
|
|
527
|
+
*
|
|
528
|
+
* @group Components
|
|
529
|
+
*/
|
|
530
|
+
declare class RdxAutocompleteItemIndicator {
|
|
531
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxAutocompleteItemIndicator, never>;
|
|
532
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxAutocompleteItemIndicator, "[rdxAutocompleteItemIndicator]", ["rdxAutocompleteItemIndicator"], {}, {}, never, never, true, [{ directive: typeof _radix_ng_primitives_combobox.RdxComboboxItemIndicator; inputs: {}; outputs: {}; }]>;
|
|
533
|
+
}
|
|
534
|
+
|
|
535
|
+
/**
|
|
536
|
+
* Groups related options under a shared label. Hides itself when all of its items are filtered out.
|
|
537
|
+
* Reuses the combobox group (and exposes the combobox group context for the label + items).
|
|
538
|
+
*
|
|
539
|
+
* @group Components
|
|
540
|
+
*/
|
|
541
|
+
declare class RdxAutocompleteGroup {
|
|
542
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxAutocompleteGroup, never>;
|
|
543
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxAutocompleteGroup, "[rdxAutocompleteGroup]", ["rdxAutocompleteGroup"], {}, {}, never, never, true, [{ directive: typeof _radix_ng_primitives_combobox.RdxComboboxGroup; inputs: {}; outputs: {}; }]>;
|
|
544
|
+
}
|
|
545
|
+
|
|
546
|
+
/**
|
|
547
|
+
* Accessible label for a {@link RdxAutocompleteGroup}. Wires itself up via `aria-labelledby`. Reuses
|
|
548
|
+
* the combobox group label.
|
|
549
|
+
*
|
|
550
|
+
* @group Components
|
|
551
|
+
*/
|
|
552
|
+
declare class RdxAutocompleteGroupLabel {
|
|
553
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxAutocompleteGroupLabel, never>;
|
|
554
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxAutocompleteGroupLabel, "[rdxAutocompleteGroupLabel]", ["rdxAutocompleteGroupLabel"], {}, {}, never, never, true, [{ directive: typeof _radix_ng_primitives_combobox.RdxComboboxGroupLabel; inputs: {}; outputs: {}; }]>;
|
|
555
|
+
}
|
|
556
|
+
|
|
557
|
+
/**
|
|
558
|
+
* A polite, atomic live region announcing the "no results" message. Like the combobox empty part, the
|
|
559
|
+
* element stays mounted and visible at all times (never hidden/unmounted) so the transition to empty is
|
|
560
|
+
* announced; only its projected content is rendered conditionally.
|
|
561
|
+
*
|
|
562
|
+
* @group Components
|
|
563
|
+
*/
|
|
564
|
+
declare class RdxAutocompleteEmpty {
|
|
565
|
+
protected readonly rootContext: {
|
|
566
|
+
listId: string;
|
|
567
|
+
labelId: _angular_core.Signal<string | undefined>;
|
|
568
|
+
setLabelId: (id: string | undefined) => void;
|
|
569
|
+
dir: _angular_core.Signal<_radix_ng_primitives_types_radix_ng_primitives_core.Direction>;
|
|
570
|
+
value: _angular_core.ModelSignal<_radix_ng_primitives_combobox.ComboboxValue>;
|
|
571
|
+
inputValue: _angular_core.ModelSignal<string>;
|
|
572
|
+
open: _angular_core.ModelSignal<boolean>;
|
|
573
|
+
present: _angular_core.Signal<boolean>;
|
|
574
|
+
multiple: _angular_core.Signal<boolean>;
|
|
575
|
+
selectionMode: _angular_core.Signal<"none" | "single" | "multiple">;
|
|
576
|
+
disabledState: _angular_core.Signal<boolean>;
|
|
577
|
+
readonly: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
578
|
+
requiredState: _angular_core.Signal<boolean>;
|
|
579
|
+
openOnInputClick: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
580
|
+
modal: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
581
|
+
virtualized: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
582
|
+
grid: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
583
|
+
filteredItems: _angular_core.Signal<readonly _radix_ng_primitives_types_radix_ng_primitives_core.AcceptableValue[]>;
|
|
584
|
+
highlightedItem: _angular_core.Signal<_radix_ng_primitives_combobox.ComboboxItemRef | null>;
|
|
585
|
+
highlightedIndex: _angular_core.Signal<number>;
|
|
586
|
+
activeId: _angular_core.Signal<string | undefined>;
|
|
587
|
+
itemId: (index: number) => string;
|
|
588
|
+
isKeyboardActive: () => boolean;
|
|
589
|
+
setKeyboardActive: (value: boolean) => void;
|
|
590
|
+
transitionStatus: _angular_core.Signal<_radix_ng_primitives_types_radix_ng_primitives_core.RdxTransitionStatus>;
|
|
591
|
+
registerTransitionElement: (element: HTMLElement) => () => void;
|
|
592
|
+
visibleCount: _angular_core.Signal<number>;
|
|
593
|
+
isVisible: (item: _radix_ng_primitives_combobox.ComboboxItemRef) => boolean;
|
|
594
|
+
isSelected: (value: _radix_ng_primitives_types_radix_ng_primitives_core.AcceptableValue) => boolean;
|
|
595
|
+
registerItem: (item: _radix_ng_primitives_combobox.ComboboxItemRef) => void;
|
|
596
|
+
unregisterItem: (item: _radix_ng_primitives_combobox.ComboboxItemRef) => void;
|
|
597
|
+
highlight: _radix_ng_primitives_types_radix_ng_primitives_core.ListHighlight<_radix_ng_primitives_combobox.ComboboxItemRef>;
|
|
598
|
+
highlightNext: () => void;
|
|
599
|
+
highlightPrevious: () => void;
|
|
600
|
+
highlightNextColumn: () => void;
|
|
601
|
+
highlightPreviousColumn: () => void;
|
|
602
|
+
highlightFirst: () => void;
|
|
603
|
+
highlightLast: () => void;
|
|
604
|
+
highlightIndex: (index: number, reason: _radix_ng_primitives_combobox.ComboboxHighlightReason) => void;
|
|
605
|
+
setHighlight: (item: _radix_ng_primitives_combobox.ComboboxItemRef, reason: _radix_ng_primitives_combobox.ComboboxHighlightReason) => void;
|
|
606
|
+
clearHighlight: () => void;
|
|
607
|
+
highlightItemOnHover: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
608
|
+
keepHighlight: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
609
|
+
inputElement: _angular_core.Signal<HTMLInputElement | null>;
|
|
610
|
+
setInputElement: (el: HTMLInputElement | null) => void;
|
|
611
|
+
inputLayout: _angular_core.Signal<_radix_ng_primitives_combobox.ComboboxInputLayout>;
|
|
612
|
+
setInputLayout: (layout: _radix_ng_primitives_combobox.ComboboxInputLayout) => void;
|
|
613
|
+
openedByTouch: _angular_core.Signal<boolean>;
|
|
614
|
+
setOpenedByTouch: (value: boolean) => void;
|
|
615
|
+
popupMounted: _angular_core.Signal<boolean>;
|
|
616
|
+
setPopupMounted: (value: boolean) => void;
|
|
617
|
+
registerTrigger: (el: HTMLElement | null) => void;
|
|
618
|
+
focusInput: () => void;
|
|
619
|
+
openPopup: (reason?: _radix_ng_primitives_combobox.RdxComboboxOpenChangeReason, event?: Event) => boolean;
|
|
620
|
+
openForBrowse: (reason?: _radix_ng_primitives_combobox.RdxComboboxOpenChangeReason, event?: Event) => void;
|
|
621
|
+
closePopup: (revert?: boolean, reason?: _radix_ng_primitives_combobox.RdxComboboxOpenChangeReason, event?: Event) => void;
|
|
622
|
+
setInputValue: (value: string) => void;
|
|
623
|
+
openAndHighlight: (edge: "first" | "last", reason?: _radix_ng_primitives_combobox.RdxComboboxOpenChangeReason, event?: Event) => void;
|
|
624
|
+
navigateByKeyboard: (direction: 1 | -1, event?: Event) => void;
|
|
625
|
+
select: (item: _radix_ng_primitives_combobox.ComboboxItemRef, event?: Event) => void;
|
|
626
|
+
selectIndex: (index: number, event?: Event) => void;
|
|
627
|
+
selectHighlighted: (event?: Event) => void;
|
|
628
|
+
clearSelection: () => void;
|
|
629
|
+
removeValue: (value: _radix_ng_primitives_types_radix_ng_primitives_core.AcceptableValue) => void;
|
|
630
|
+
removeLastValue: () => void;
|
|
631
|
+
registerChipsNav: (fn: (() => boolean) | null) => void;
|
|
632
|
+
focusLastChip: () => boolean;
|
|
633
|
+
labelFor: (value: _radix_ng_primitives_types_radix_ng_primitives_core.AcceptableValue) => string;
|
|
634
|
+
markAsTouched: () => void;
|
|
635
|
+
};
|
|
636
|
+
/** Whether no items match the current query (drives projection of the message). */
|
|
637
|
+
protected readonly isEmpty: _angular_core.Signal<boolean>;
|
|
638
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxAutocompleteEmpty, never>;
|
|
639
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<RdxAutocompleteEmpty, "[rdxAutocompleteEmpty]", ["rdxAutocompleteEmpty"], {}, {}, never, ["*"], true, never>;
|
|
640
|
+
}
|
|
641
|
+
|
|
642
|
+
/**
|
|
643
|
+
* A polite live region for async status (loading, result counts) announced without moving focus.
|
|
644
|
+
* Reuses the combobox status region.
|
|
645
|
+
*
|
|
646
|
+
* @group Components
|
|
647
|
+
*/
|
|
648
|
+
declare class RdxAutocompleteStatus {
|
|
649
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxAutocompleteStatus, never>;
|
|
650
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxAutocompleteStatus, "[rdxAutocompleteStatus]", ["rdxAutocompleteStatus"], {}, {}, never, never, true, [{ directive: typeof _radix_ng_primitives_combobox.RdxComboboxStatus; inputs: {}; outputs: {}; }]>;
|
|
651
|
+
}
|
|
652
|
+
|
|
653
|
+
declare const _importsAutocomplete: (typeof RdxAutocompleteAnchor)[];
|
|
654
|
+
declare class RdxAutocompleteModule {
|
|
655
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxAutocompleteModule, never>;
|
|
656
|
+
static ɵmod: _angular_core.ɵɵNgModuleDeclaration<RdxAutocompleteModule, never, [typeof RdxAutocompleteRoot, typeof RdxAutocompleteAnchor, typeof RdxAutocompleteLabel, typeof RdxAutocompleteInputGroup, typeof RdxAutocompleteInput, typeof RdxAutocompleteValue, typeof RdxAutocompleteTrigger, typeof RdxAutocompleteIcon, typeof RdxAutocompleteClear, typeof RdxAutocompletePortal, typeof RdxAutocompletePortalMisuseGuard, typeof RdxAutocompleteBackdrop, typeof RdxAutocompletePositioner, typeof RdxAutocompletePopup, typeof RdxAutocompleteArrow, typeof RdxAutocompleteList, typeof RdxAutocompleteRow, typeof RdxAutocompleteSeparator, typeof RdxAutocompleteItem, typeof RdxAutocompleteItemIndicator, typeof RdxAutocompleteGroup, typeof RdxAutocompleteGroupLabel, typeof RdxAutocompleteEmpty, typeof RdxAutocompleteStatus], [typeof RdxAutocompleteRoot, typeof RdxAutocompleteAnchor, typeof RdxAutocompleteLabel, typeof RdxAutocompleteInputGroup, typeof RdxAutocompleteInput, typeof RdxAutocompleteValue, typeof RdxAutocompleteTrigger, typeof RdxAutocompleteIcon, typeof RdxAutocompleteClear, typeof RdxAutocompletePortal, typeof RdxAutocompletePortalMisuseGuard, typeof RdxAutocompleteBackdrop, typeof RdxAutocompletePositioner, typeof RdxAutocompletePopup, typeof RdxAutocompleteArrow, typeof RdxAutocompleteList, typeof RdxAutocompleteRow, typeof RdxAutocompleteSeparator, typeof RdxAutocompleteItem, typeof RdxAutocompleteItemIndicator, typeof RdxAutocompleteGroup, typeof RdxAutocompleteGroupLabel, typeof RdxAutocompleteEmpty, typeof RdxAutocompleteStatus]>;
|
|
657
|
+
static ɵinj: _angular_core.ɵɵInjectorDeclaration<RdxAutocompleteModule>;
|
|
658
|
+
}
|
|
659
|
+
|
|
660
|
+
export { RdxAutocompleteAnchor, RdxAutocompleteArrow, RdxAutocompleteBackdrop, RdxAutocompleteClear, RdxAutocompleteEmpty, RdxAutocompleteGroup, RdxAutocompleteGroupLabel, RdxAutocompleteIcon, RdxAutocompleteInput, RdxAutocompleteInputGroup, RdxAutocompleteItem, RdxAutocompleteItemIndicator, RdxAutocompleteLabel, RdxAutocompleteList, RdxAutocompleteModule, RdxAutocompletePopup, RdxAutocompletePortal, RdxAutocompletePortalMisuseGuard, RdxAutocompletePositioner, RdxAutocompleteRoot, RdxAutocompleteRow, RdxAutocompleteSeparator, RdxAutocompleteStatus, RdxAutocompleteTrigger, RdxAutocompleteValue, _importsAutocomplete };
|
|
661
|
+
export type { AutocompleteChangeReason, AutocompleteFilter, AutocompleteMode, AutocompleteValueChangeDetails };
|