@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,14 +1,15 @@
|
|
|
1
1
|
import * as _angular_core from '@angular/core';
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import { ComboboxItemHighlightedDetails, ComboboxItemRef, ComboboxHighlightReason } from '@radix-ng/primitives/combobox';
|
|
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';
|
|
5
4
|
export { ComboboxHighlightReason as AutocompleteHighlightReason, ComboboxItemHighlightedDetails as AutocompleteItemHighlightedDetails } from '@radix-ng/primitives/combobox';
|
|
6
5
|
import * as _radix_ng_primitives_core from '@radix-ng/primitives/core';
|
|
7
|
-
import { AcceptableValue, Direction, BooleanInput, ItemValueComparator } from '@radix-ng/primitives/core';
|
|
6
|
+
import { AcceptableValue, RdxFloatingRootContext, Direction, BooleanInput, ItemValueComparator } from '@radix-ng/primitives/core';
|
|
8
7
|
import { ControlValueAccessor } from '@angular/forms';
|
|
9
|
-
import * as i1
|
|
8
|
+
import * as i1 from '@radix-ng/primitives/popper';
|
|
9
|
+
import { RdxPopperContentWrapper } from '@radix-ng/primitives/popper';
|
|
10
10
|
import * as _radix_ng_primitives_autocomplete from '@radix-ng/primitives/autocomplete';
|
|
11
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';
|
|
12
13
|
|
|
13
14
|
/**
|
|
14
15
|
* Optional positioning anchor for the popup. Put it on the element the popup should align to — for
|
|
@@ -19,7 +20,7 @@ import * as i2 from '@radix-ng/primitives/dismissable-layer';
|
|
|
19
20
|
*/
|
|
20
21
|
declare class RdxAutocompleteAnchor {
|
|
21
22
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxAutocompleteAnchor, never>;
|
|
22
|
-
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxAutocompleteAnchor, "[rdxAutocompleteAnchor]", ["rdxAutocompleteAnchor"], {}, {}, never, never, true, [{ directive: typeof
|
|
23
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxAutocompleteAnchor, "[rdxAutocompleteAnchor]", ["rdxAutocompleteAnchor"], {}, {}, never, never, true, [{ directive: typeof _radix_ng_primitives_combobox.RdxComboboxAnchor; inputs: {}; outputs: {}; }]>;
|
|
23
24
|
}
|
|
24
25
|
|
|
25
26
|
/**
|
|
@@ -31,10 +32,11 @@ declare class RdxAutocompleteAnchor {
|
|
|
31
32
|
*/
|
|
32
33
|
type AutocompleteMode = 'list' | 'both' | 'inline' | 'none';
|
|
33
34
|
/**
|
|
34
|
-
* A custom filter predicate
|
|
35
|
-
*
|
|
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`.
|
|
36
38
|
*/
|
|
37
|
-
type AutocompleteFilter = (
|
|
39
|
+
type AutocompleteFilter = (itemValue: AcceptableValue, query: string, itemToString?: (itemValue: AcceptableValue) => string) => boolean;
|
|
38
40
|
/** Why the input value changed, mirroring Base UI's `onValueChange` details. */
|
|
39
41
|
type AutocompleteChangeReason = 'input-change' | 'item-press' | 'input-clear' | 'none';
|
|
40
42
|
/** Payload of {@link RdxAutocompleteRoot.onValueChange}: the new value and why it changed. */
|
|
@@ -46,16 +48,17 @@ interface AutocompleteValueChangeDetails {
|
|
|
46
48
|
}
|
|
47
49
|
|
|
48
50
|
/**
|
|
49
|
-
* Root of an Autocomplete — a text input with a filtered list of suggestions.
|
|
50
|
-
* engine with `selectionMode: 'none'`, so its value **is** the input
|
|
51
|
-
* item, or clearing all change a single string value.
|
|
52
|
-
* completion, and highlight-model navigation, and provides them to the combobox parts. Implements
|
|
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
|
|
53
54
|
* `ControlValueAccessor` (the form value is the input string).
|
|
54
55
|
*
|
|
55
56
|
* @group Components
|
|
56
57
|
*/
|
|
57
58
|
declare class RdxAutocompleteRoot implements ControlValueAccessor {
|
|
58
59
|
private readonly injector;
|
|
60
|
+
/** Per-popup floating root context (ADR 0015) — `open` / `triggers` / reference for the dismissal engine. */
|
|
61
|
+
readonly floatingContext: RdxFloatingRootContext;
|
|
59
62
|
/** The input text. This is the form value (controlled / uncontrolled via {@link defaultValue}). */
|
|
60
63
|
readonly value: _angular_core.ModelSignal<string>;
|
|
61
64
|
/** Initial input text when uncontrolled. */
|
|
@@ -67,7 +70,8 @@ declare class RdxAutocompleteRoot implements ControlValueAccessor {
|
|
|
67
70
|
/** Filtering / inline-completion behavior. See {@link AutocompleteMode}. */
|
|
68
71
|
readonly mode: _angular_core.InputSignal<AutocompleteMode>;
|
|
69
72
|
/** Text direction. */
|
|
70
|
-
readonly
|
|
73
|
+
readonly dirInput: _angular_core.InputSignal<Direction | undefined>;
|
|
74
|
+
readonly dir: _angular_core.Signal<Direction>;
|
|
71
75
|
/** Whether the autocomplete is disabled. */
|
|
72
76
|
readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
73
77
|
/** Whether the autocomplete is read-only. */
|
|
@@ -85,17 +89,9 @@ declare class RdxAutocompleteRoot implements ControlValueAccessor {
|
|
|
85
89
|
readonly autoHighlight: _angular_core.InputSignalWithTransform<boolean | "always", BooleanInput>;
|
|
86
90
|
/** Resolved auto-highlight mode. */
|
|
87
91
|
readonly autoHighlightMode: _angular_core.Signal<"input-change" | "always" | "off">;
|
|
88
|
-
/**
|
|
89
|
-
* Whether moving the pointer over an item highlights it. `true` (default) paints `data-highlighted`
|
|
90
|
-
* on hover; `false` suppresses hover-driven highlight entirely, letting CSS `:hover` stay distinct
|
|
91
|
-
* from the `data-highlighted` (keyboard) state. Clicking an item still selects it.
|
|
92
|
-
*/
|
|
92
|
+
/** Whether moving the pointer over an item highlights it. */
|
|
93
93
|
readonly highlightItemOnHover: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
94
|
-
/**
|
|
95
|
-
* Whether a pointer-driven highlight is kept when the cursor leaves the list. `false` (default)
|
|
96
|
-
* clears the highlight on pointer-leave; `true` retains the last hovered item highlighted. Keyboard
|
|
97
|
-
* navigation and auto-highlight are unaffected.
|
|
98
|
-
*/
|
|
94
|
+
/** Whether a pointer-driven highlight is kept when the cursor leaves the list. */
|
|
99
95
|
readonly keepHighlight: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
100
96
|
/** Whether clicking the input opens the popup. Defaults to `false` (Base UI default). */
|
|
101
97
|
readonly openOnInputClick: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
@@ -107,134 +103,100 @@ declare class RdxAutocompleteRoot implements ControlValueAccessor {
|
|
|
107
103
|
readonly grid: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
108
104
|
/**
|
|
109
105
|
* Filter applied to items against the input query (only when {@link mode} is `'list'` / `'both'`).
|
|
110
|
-
*
|
|
111
|
-
* -
|
|
112
|
-
* - `null`: built-in filtering disabled (the consumer controls which items exist).
|
|
106
|
+
* `undefined` → locale-aware contains; a function → custom `(value, query, itemToString)`; `null` →
|
|
107
|
+
* built-in filtering disabled.
|
|
113
108
|
*/
|
|
114
109
|
readonly filter: _angular_core.InputSignal<AutocompleteFilter | null | undefined>;
|
|
115
110
|
/** Maximum number of matching items to show. `-1` (default) means no limit. */
|
|
116
111
|
readonly limit: _angular_core.InputSignalWithTransform<number, unknown>;
|
|
117
|
-
/**
|
|
118
|
-
* The full set of item values, used as the source of truth for filtering and navigation in
|
|
119
|
-
* {@link virtualized} mode (where only a window of `RdxAutocompleteItem` is mounted).
|
|
120
|
-
*/
|
|
112
|
+
/** The full set of item values for {@link virtualized} mode. */
|
|
121
113
|
readonly items: _angular_core.InputSignal<readonly AcceptableValue[] | undefined>;
|
|
122
114
|
/** Whether the list is externally virtualized (navigation runs over {@link items} by index). */
|
|
123
115
|
readonly virtualized: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
124
|
-
/** How item values are compared for equality (function or object key). */
|
|
125
|
-
readonly
|
|
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>;
|
|
126
118
|
/** Converts an item value to its string label (filter text + input text on selection). */
|
|
127
119
|
readonly itemToStringValue: _angular_core.InputSignal<((value: AcceptableValue) => string) | undefined>;
|
|
128
120
|
/** Emits when the input value changes (typing, selection, or clear), with the reason. */
|
|
129
121
|
readonly onValueChange: _angular_core.OutputEmitterRef<AutocompleteValueChangeDetails>;
|
|
130
122
|
/** Emits when the popup opens or closes. */
|
|
131
|
-
readonly onOpenChange: _angular_core.OutputEmitterRef<
|
|
123
|
+
readonly onOpenChange: _angular_core.OutputEmitterRef<RdxComboboxOpenChange>;
|
|
132
124
|
/** Emits as the highlight moves, with the item's value, its index in {@link filteredItems}, and the reason. */
|
|
133
125
|
readonly onItemHighlighted: _angular_core.OutputEmitterRef<ComboboxItemHighlightedDetails>;
|
|
134
126
|
/** Emits after the open/close transition (including any exit animation) finishes. */
|
|
135
127
|
readonly onOpenChangeComplete: _angular_core.OutputEmitterRef<boolean>;
|
|
136
|
-
private readonly transition;
|
|
137
|
-
/** Open/close transition phase, for `data-starting-style` / `data-ending-style`. */
|
|
138
|
-
readonly transitionStatus: _angular_core.Signal<_radix_ng_primitives_core.RdxTransitionStatus>;
|
|
139
|
-
/** Registers the popup element whose animation determines transition completion. */
|
|
140
|
-
readonly registerTransitionElement: (element: HTMLElement) => () => void;
|
|
141
|
-
readonly listId: string;
|
|
142
|
-
readonly labelId: _angular_core.WritableSignal<string | undefined>;
|
|
143
|
-
readonly inputElement: _angular_core.WritableSignal<HTMLInputElement | null>;
|
|
144
128
|
/** Constant signals exposed to the combobox context (autocomplete is always single-value). */
|
|
145
129
|
readonly alwaysFalse: _angular_core.WritableSignal<boolean>;
|
|
146
130
|
readonly noneMode: _angular_core.WritableSignal<"none">;
|
|
147
131
|
private readonly cvaDisabled;
|
|
148
132
|
readonly disabledState: _angular_core.Signal<boolean>;
|
|
149
133
|
readonly requiredState: _angular_core.Signal<boolean>;
|
|
150
|
-
private readonly
|
|
151
|
-
|
|
134
|
+
private readonly preventUnmountOnClose;
|
|
135
|
+
readonly present: _angular_core.Signal<boolean>;
|
|
136
|
+
/** Whether built-in filtering applies in the current mode (`list` / `both`). */
|
|
152
137
|
private readonly filteringMode;
|
|
153
|
-
/** Whether inline completion applies in the current mode. */
|
|
138
|
+
/** Whether inline completion applies in the current mode (`both` / `inline`). */
|
|
154
139
|
readonly inlineMode: _angular_core.Signal<boolean>;
|
|
155
140
|
/**
|
|
156
141
|
* Whether the input text is a fresh user query rather than a committed selection's label. While
|
|
157
|
-
* `false` (just opened, or showing a committed selection), the list is unfiltered
|
|
158
|
-
*
|
|
142
|
+
* `false` (just opened, or showing a committed selection), the list is unfiltered; it flips `true`
|
|
143
|
+
* on the first keystroke.
|
|
159
144
|
*/
|
|
160
145
|
private readonly typed;
|
|
161
146
|
/** The text the user actually typed, used as the filter query. */
|
|
162
147
|
readonly query: _angular_core.Signal<string>;
|
|
163
|
-
/**
|
|
164
|
-
readonly
|
|
148
|
+
/** The shared engine: item registry, filtering, highlight navigation (grid), inline, transition. */
|
|
149
|
+
private readonly engine;
|
|
165
150
|
/** What the input element displays: the inline preview if any, else the committed value. */
|
|
166
151
|
readonly displayValue: _angular_core.Signal<string>;
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
* What to highlight once the list has mounted (items register asynchronously after opening):
|
|
187
|
-
* an end edge, or `'first-match'` (the first item whose label starts with the query — used by
|
|
188
|
-
* auto-highlight so inline completion lands on a real prefix match even when the list is static).
|
|
189
|
-
*/
|
|
190
|
-
private readonly pendingHighlightEdge;
|
|
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;
|
|
191
171
|
private onChange?;
|
|
192
172
|
private onTouched?;
|
|
193
173
|
constructor();
|
|
194
|
-
private recomputeInlinePreview;
|
|
195
174
|
setSuppressInline(value: boolean): void;
|
|
196
175
|
/** Opens the popup for browsing (resets the query to "pristine" and selects the input text). */
|
|
197
|
-
openForBrowse(): void;
|
|
176
|
+
openForBrowse(reason?: RdxComboboxOpenChangeReason, event?: Event): void;
|
|
198
177
|
/** Opens the popup and highlights the given edge once the list mounts. */
|
|
199
|
-
openAndHighlight(edge: 'first' | 'last'): void;
|
|
200
|
-
/** Whether the item matches the active query (ignores the `limit` cap). */
|
|
201
|
-
private matchesFilter;
|
|
202
|
-
/** Whether the item is shown in the list (matches the query and is within `limit`). */
|
|
203
|
-
isVisible(item: ComboboxItemRef): boolean;
|
|
204
|
-
/** The first visible, navigable item whose label starts with the query (for inline completion). */
|
|
205
|
-
private firstMatchItem;
|
|
206
|
-
/** The first visible, navigable item (auto-highlight fallback when no prefix match exists). */
|
|
207
|
-
private firstVisibleNavigable;
|
|
208
|
-
/** Resolves a pending edge to a virtualized index. */
|
|
209
|
-
private resolveVirtualizedEdge;
|
|
210
|
-
private keyboardActive;
|
|
211
|
-
isKeyboardActive(): boolean;
|
|
212
|
-
setKeyboardActive(value: boolean): void;
|
|
178
|
+
openAndHighlight(edge: 'first' | 'last', reason?: RdxComboboxOpenChangeReason, event?: Event): void;
|
|
213
179
|
/** Whether the item's value/label matches the current input value (combobox context contract). */
|
|
214
180
|
isSelectedValue(value: AcceptableValue): boolean;
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
setOpen(open: boolean): void;
|
|
218
|
-
closePopup(revert?: boolean): void;
|
|
181
|
+
setOpen(open: boolean, reason?: RdxComboboxOpenChangeReason, event?: Event): boolean;
|
|
182
|
+
closePopup(revert?: boolean, reason?: RdxComboboxOpenChangeReason, event?: Event): void;
|
|
219
183
|
/** Updates the input text from user typing (marks it a fresh query, emits change). */
|
|
220
184
|
setQuery(value: string): void;
|
|
221
|
-
/** Selects all input text so the next keystroke replaces a committed label. */
|
|
222
|
-
selectInputText(): void;
|
|
223
185
|
labelFor(value: AcceptableValue): string;
|
|
224
|
-
/** Label text for a raw item value (virtualized mode, no DOM element to read from). */
|
|
225
|
-
private textFor;
|
|
226
|
-
/** Deterministic id for the item at `index` in virtualized mode (matches `aria-activedescendant`). */
|
|
227
186
|
itemId(index: number): string;
|
|
228
|
-
|
|
187
|
+
isVisible(item: ComboboxItemRef): boolean;
|
|
188
|
+
registerItem(item: ComboboxItemRef): void;
|
|
189
|
+
unregisterItem(item: ComboboxItemRef): void;
|
|
190
|
+
handleSelect(item: ComboboxItemRef, event?: Event): void;
|
|
229
191
|
/** Selects the filtered item at `index` (virtualized mode). */
|
|
230
|
-
selectIndex(index: number): void;
|
|
192
|
+
selectIndex(index: number, event?: Event): void;
|
|
231
193
|
/** Commits a selection: the input value becomes the item's label, the popup closes. */
|
|
232
194
|
private commitSelection;
|
|
233
195
|
private maybeSubmit;
|
|
234
|
-
selectHighlighted(): void;
|
|
196
|
+
selectHighlighted(event?: Event): void;
|
|
197
|
+
navigateByKeyboard(direction: 1 | -1, event?: Event): void;
|
|
235
198
|
moveDown(): void;
|
|
236
199
|
moveUp(): void;
|
|
237
|
-
/** Grid: move to the next cell in DOM order. Non-grid: no-op (caret movement). */
|
|
238
200
|
moveRight(): void;
|
|
239
201
|
moveLeft(): void;
|
|
240
202
|
highlightFirst(reason?: ComboboxHighlightReason): void;
|
|
@@ -242,24 +204,20 @@ declare class RdxAutocompleteRoot implements ControlValueAccessor {
|
|
|
242
204
|
highlightIndex(index: number, reason: ComboboxHighlightReason): void;
|
|
243
205
|
setHighlight(item: ComboboxItemRef, reason: ComboboxHighlightReason): void;
|
|
244
206
|
clearHighlightState(): void;
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
private gridVertical;
|
|
248
|
-
/** Visible items grouped into rows by their nearest `[rdxAutocompleteRow]` ancestor (DOM order). */
|
|
249
|
-
private gridRows;
|
|
207
|
+
isKeyboardActive(): boolean;
|
|
208
|
+
setKeyboardActive(value: boolean): void;
|
|
250
209
|
clearValue(): void;
|
|
251
|
-
/** The trigger element, used as a focus fallback when the input lives inside the popup. */
|
|
252
|
-
triggerElement: HTMLElement | null;
|
|
253
210
|
focusInput(): void;
|
|
254
|
-
restoreFocusAfterSelect(): void;
|
|
255
211
|
markAsTouched(): void;
|
|
256
212
|
private commitValue;
|
|
213
|
+
private createOpenChangeEvent;
|
|
214
|
+
private resolveOpenChangeTrigger;
|
|
257
215
|
writeValue(value: string | null): void;
|
|
258
216
|
registerOnChange(fn: (value: string) => void): void;
|
|
259
217
|
registerOnTouched(fn: () => void): void;
|
|
260
218
|
setDisabledState(isDisabled: boolean): void;
|
|
261
219
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxAutocompleteRoot, never>;
|
|
262
|
-
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; }; "
|
|
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: {}; }]>;
|
|
263
221
|
}
|
|
264
222
|
|
|
265
223
|
/**
|
|
@@ -270,7 +228,7 @@ declare class RdxAutocompleteRoot implements ControlValueAccessor {
|
|
|
270
228
|
*/
|
|
271
229
|
declare class RdxAutocompleteLabel {
|
|
272
230
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxAutocompleteLabel, never>;
|
|
273
|
-
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxAutocompleteLabel, "[rdxAutocompleteLabel]", ["rdxAutocompleteLabel"], {}, {}, never, never, true, [{ directive: typeof
|
|
231
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxAutocompleteLabel, "[rdxAutocompleteLabel]", ["rdxAutocompleteLabel"], {}, {}, never, never, true, [{ directive: typeof _radix_ng_primitives_combobox.RdxComboboxLabel; inputs: {}; outputs: {}; }]>;
|
|
274
232
|
}
|
|
275
233
|
|
|
276
234
|
/**
|
|
@@ -314,13 +272,13 @@ declare class RdxAutocompleteInput {
|
|
|
314
272
|
onInput(event: Event): void;
|
|
315
273
|
onCompositionEnd(event: CompositionEvent): void;
|
|
316
274
|
private commitInput;
|
|
317
|
-
onClick(): void;
|
|
275
|
+
onClick(event: MouseEvent): void;
|
|
318
276
|
onFocus(): void;
|
|
319
277
|
onBlur(): void;
|
|
320
278
|
onKeydown(event: KeyboardEvent): void;
|
|
321
279
|
protected readonly dataAttr: (value: boolean) => "" | undefined;
|
|
322
280
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxAutocompleteInput, never>;
|
|
323
|
-
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
|
|
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: {}; }]>;
|
|
324
282
|
}
|
|
325
283
|
|
|
326
284
|
/**
|
|
@@ -344,14 +302,14 @@ declare class RdxAutocompleteValue {
|
|
|
344
302
|
}
|
|
345
303
|
|
|
346
304
|
/**
|
|
347
|
-
* Toggles the autocomplete popup.
|
|
348
|
-
*
|
|
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.
|
|
349
307
|
*
|
|
350
308
|
* @group Components
|
|
351
309
|
*/
|
|
352
310
|
declare class RdxAutocompleteTrigger {
|
|
353
311
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxAutocompleteTrigger, never>;
|
|
354
|
-
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxAutocompleteTrigger, "button[rdxAutocompleteTrigger]", ["rdxAutocompleteTrigger"], {}, {}, never, never, true, [{ directive: typeof
|
|
312
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxAutocompleteTrigger, "button[rdxAutocompleteTrigger]", ["rdxAutocompleteTrigger"], {}, {}, never, never, true, [{ directive: typeof _radix_ng_primitives_combobox.RdxComboboxTrigger; inputs: {}; outputs: {}; }]>;
|
|
355
313
|
}
|
|
356
314
|
|
|
357
315
|
/**
|
|
@@ -361,7 +319,7 @@ declare class RdxAutocompleteTrigger {
|
|
|
361
319
|
*/
|
|
362
320
|
declare class RdxAutocompleteIcon {
|
|
363
321
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxAutocompleteIcon, never>;
|
|
364
|
-
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxAutocompleteIcon, "[rdxAutocompleteIcon]", ["rdxAutocompleteIcon"], {}, {}, never, never, true, [{ directive: typeof
|
|
322
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxAutocompleteIcon, "[rdxAutocompleteIcon]", ["rdxAutocompleteIcon"], {}, {}, never, never, true, [{ directive: typeof _radix_ng_primitives_combobox.RdxComboboxIcon; inputs: {}; outputs: {}; }]>;
|
|
365
323
|
}
|
|
366
324
|
|
|
367
325
|
/**
|
|
@@ -372,9 +330,11 @@ declare class RdxAutocompleteIcon {
|
|
|
372
330
|
declare class RdxAutocompleteClear {
|
|
373
331
|
protected readonly root: RdxAutocompleteRoot;
|
|
374
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>;
|
|
375
335
|
onClick(): void;
|
|
376
336
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxAutocompleteClear, never>;
|
|
377
|
-
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxAutocompleteClear, "button[rdxAutocompleteClear]", ["rdxAutocompleteClear"], {}, {}, never, never, true, [{ directive: typeof i2.
|
|
337
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxAutocompleteClear, "button[rdxAutocompleteClear]", ["rdxAutocompleteClear"], {}, {}, never, never, true, [{ directive: typeof i2.RdxFloatingInsideElement; inputs: {}; outputs: {}; }]>;
|
|
378
338
|
}
|
|
379
339
|
|
|
380
340
|
/**
|
|
@@ -391,7 +351,7 @@ declare class RdxAutocompleteClear {
|
|
|
391
351
|
*/
|
|
392
352
|
declare class RdxAutocompletePortal {
|
|
393
353
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxAutocompletePortal, never>;
|
|
394
|
-
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxAutocompletePortal, "ng-template[rdxAutocompletePortal]", ["rdxAutocompletePortal"], {}, {}, never, never, true, [{ directive: typeof
|
|
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: {}; }]>;
|
|
395
355
|
}
|
|
396
356
|
/**
|
|
397
357
|
* Dev-mode guard: `rdxAutocompletePortal` is now structural, so the old `<div rdxAutocompletePortal>`
|
|
@@ -413,30 +373,23 @@ declare class RdxAutocompletePortalMisuseGuard {
|
|
|
413
373
|
*/
|
|
414
374
|
declare class RdxAutocompleteBackdrop {
|
|
415
375
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxAutocompleteBackdrop, never>;
|
|
416
|
-
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxAutocompleteBackdrop, "[rdxAutocompleteBackdrop]", ["rdxAutocompleteBackdrop"], {}, {}, never, never, true, [{ directive: typeof
|
|
376
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxAutocompleteBackdrop, "[rdxAutocompleteBackdrop]", ["rdxAutocompleteBackdrop"], {}, {}, never, never, true, [{ directive: typeof _radix_ng_primitives_combobox.RdxComboboxBackdrop; inputs: {}; outputs: {}; }]>;
|
|
417
377
|
}
|
|
418
378
|
|
|
419
379
|
/**
|
|
420
|
-
* Positions the popup relative to the input anchor using the popper engine.
|
|
421
|
-
*
|
|
422
|
-
* positioning inputs
|
|
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).
|
|
423
386
|
*
|
|
424
387
|
* @group Components
|
|
425
388
|
*/
|
|
426
|
-
declare class RdxAutocompletePositioner {
|
|
427
|
-
|
|
428
|
-
readonly sideOffset: _angular_core.InputSignalWithTransform<number, unknown>;
|
|
429
|
-
readonly align: _angular_core.InputSignal<"center" | "end" | "start">;
|
|
430
|
-
readonly alignOffset: _angular_core.InputSignalWithTransform<number, unknown>;
|
|
431
|
-
readonly arrowPadding: _angular_core.InputSignalWithTransform<number, unknown>;
|
|
432
|
-
readonly avoidCollisions: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
433
|
-
readonly collisionBoundary: _angular_core.InputSignal<ElementRef<HTMLElement> | ElementRef<HTMLElement>[] | undefined>;
|
|
434
|
-
readonly collisionPadding: _angular_core.InputSignal<number | Partial<Record<"top" | "right" | "bottom" | "left", number>>>;
|
|
435
|
-
readonly sticky: _angular_core.InputSignal<"always" | "partial">;
|
|
436
|
-
readonly hideWhenDetached: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
437
|
-
readonly updatePositionStrategy: _angular_core.InputSignal<"always" | "optimized">;
|
|
389
|
+
declare class RdxAutocompletePositioner extends RdxPopperContentWrapper {
|
|
390
|
+
constructor();
|
|
438
391
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxAutocompletePositioner, never>;
|
|
439
|
-
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxAutocompletePositioner, "[rdxAutocompletePositioner]", ["rdxAutocompletePositioner"], {
|
|
392
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxAutocompletePositioner, "[rdxAutocompletePositioner]", ["rdxAutocompletePositioner"], {}, {}, never, never, true, never>;
|
|
440
393
|
}
|
|
441
394
|
|
|
442
395
|
/**
|
|
@@ -449,12 +402,20 @@ declare class RdxAutocompletePositioner {
|
|
|
449
402
|
*/
|
|
450
403
|
declare class RdxAutocompletePopup {
|
|
451
404
|
protected readonly root: RdxAutocompleteRoot;
|
|
452
|
-
private readonly
|
|
405
|
+
private readonly floatingContext;
|
|
406
|
+
private readonly registration;
|
|
453
407
|
private readonly popper;
|
|
454
408
|
private readonly element;
|
|
455
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;
|
|
456
417
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxAutocompletePopup, never>;
|
|
457
|
-
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxAutocompletePopup, "[rdxAutocompletePopup]", ["rdxAutocompletePopup"], {}, {}, never, never, true, [{ directive: typeof i1
|
|
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: {}; }]>;
|
|
458
419
|
}
|
|
459
420
|
|
|
460
421
|
/**
|
|
@@ -465,7 +426,7 @@ declare class RdxAutocompletePopup {
|
|
|
465
426
|
*/
|
|
466
427
|
declare class RdxAutocompleteArrow {
|
|
467
428
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxAutocompleteArrow, never>;
|
|
468
|
-
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxAutocompleteArrow, "[rdxAutocompleteArrow]", ["rdxAutocompleteArrow"], {}, {}, never, never, true, [{ directive: typeof i1
|
|
429
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxAutocompleteArrow, "[rdxAutocompleteArrow]", ["rdxAutocompleteArrow"], {}, {}, never, never, true, [{ directive: typeof i1.RdxPopperArrow; inputs: { "width": "width"; "height": "height"; }; outputs: {}; }]>;
|
|
469
430
|
}
|
|
470
431
|
|
|
471
432
|
/**
|
|
@@ -476,6 +437,7 @@ declare class RdxAutocompleteArrow {
|
|
|
476
437
|
*/
|
|
477
438
|
declare class RdxAutocompleteList {
|
|
478
439
|
protected readonly root: RdxAutocompleteRoot;
|
|
440
|
+
onKeydown(event: KeyboardEvent): void;
|
|
479
441
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxAutocompleteList, never>;
|
|
480
442
|
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxAutocompleteList, "[rdxAutocompleteList]", ["rdxAutocompleteList"], {}, {}, never, never, true, never>;
|
|
481
443
|
}
|
|
@@ -492,6 +454,16 @@ declare class RdxAutocompleteRow {
|
|
|
492
454
|
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxAutocompleteRow, "[rdxAutocompleteRow]", ["rdxAutocompleteRow"], {}, {}, never, never, true, never>;
|
|
493
455
|
}
|
|
494
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
|
+
|
|
495
467
|
/**
|
|
496
468
|
* A selectable suggestion. Registers itself with the root for filtering and navigation. Highlight is
|
|
497
469
|
* virtual (`data-highlighted` + `aria-activedescendant` on the input) — items never take DOM focus.
|
|
@@ -504,8 +476,12 @@ declare class RdxAutocompleteItem implements ComboboxItemRef {
|
|
|
504
476
|
private readonly rootContext;
|
|
505
477
|
readonly element: HTMLElement;
|
|
506
478
|
readonly id: string;
|
|
507
|
-
/**
|
|
508
|
-
|
|
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>;
|
|
509
485
|
/** Explicit text matched against the query and written to the input. Defaults to text content. */
|
|
510
486
|
readonly textValueInput: _angular_core.InputSignal<string>;
|
|
511
487
|
/** Whether the option is disabled. */
|
|
@@ -515,20 +491,34 @@ declare class RdxAutocompleteItem implements ComboboxItemRef {
|
|
|
515
491
|
protected readonly virtualized: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
516
492
|
private readonly autoTextValue;
|
|
517
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>;
|
|
518
500
|
protected readonly elementId: _angular_core.Signal<string>;
|
|
519
501
|
protected readonly ariaSetSize: _angular_core.Signal<number | undefined>;
|
|
520
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">;
|
|
521
507
|
readonly isVisible: _angular_core.Signal<boolean>;
|
|
522
508
|
readonly isSelected: _angular_core.Signal<boolean>;
|
|
523
509
|
readonly isHighlighted: _angular_core.Signal<boolean>;
|
|
524
510
|
private readonly group;
|
|
525
511
|
constructor();
|
|
512
|
+
private pointerDownStarted;
|
|
526
513
|
onPointerDown(event: MouseEvent): void;
|
|
527
|
-
|
|
514
|
+
onMouseDown(event: MouseEvent): void;
|
|
515
|
+
onMouseUp(event: MouseEvent): void;
|
|
516
|
+
onClick(): void;
|
|
517
|
+
private commitSelection;
|
|
528
518
|
onPointerMove(): void;
|
|
529
519
|
onPointerLeave(event: PointerEvent): void;
|
|
530
520
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxAutocompleteItem, never>;
|
|
531
|
-
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxAutocompleteItem, "[rdxAutocompleteItem]", ["rdxAutocompleteItem"], { "
|
|
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>;
|
|
532
522
|
}
|
|
533
523
|
|
|
534
524
|
/**
|
|
@@ -539,7 +529,7 @@ declare class RdxAutocompleteItem implements ComboboxItemRef {
|
|
|
539
529
|
*/
|
|
540
530
|
declare class RdxAutocompleteItemIndicator {
|
|
541
531
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxAutocompleteItemIndicator, never>;
|
|
542
|
-
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxAutocompleteItemIndicator, "[rdxAutocompleteItemIndicator]", ["rdxAutocompleteItemIndicator"], {}, {}, never, never, true, [{ directive: typeof
|
|
532
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxAutocompleteItemIndicator, "[rdxAutocompleteItemIndicator]", ["rdxAutocompleteItemIndicator"], {}, {}, never, never, true, [{ directive: typeof _radix_ng_primitives_combobox.RdxComboboxItemIndicator; inputs: {}; outputs: {}; }]>;
|
|
543
533
|
}
|
|
544
534
|
|
|
545
535
|
/**
|
|
@@ -550,7 +540,7 @@ declare class RdxAutocompleteItemIndicator {
|
|
|
550
540
|
*/
|
|
551
541
|
declare class RdxAutocompleteGroup {
|
|
552
542
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxAutocompleteGroup, never>;
|
|
553
|
-
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxAutocompleteGroup, "[rdxAutocompleteGroup]", ["rdxAutocompleteGroup"], {}, {}, never, never, true, [{ directive: typeof
|
|
543
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxAutocompleteGroup, "[rdxAutocompleteGroup]", ["rdxAutocompleteGroup"], {}, {}, never, never, true, [{ directive: typeof _radix_ng_primitives_combobox.RdxComboboxGroup; inputs: {}; outputs: {}; }]>;
|
|
554
544
|
}
|
|
555
545
|
|
|
556
546
|
/**
|
|
@@ -561,17 +551,92 @@ declare class RdxAutocompleteGroup {
|
|
|
561
551
|
*/
|
|
562
552
|
declare class RdxAutocompleteGroupLabel {
|
|
563
553
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxAutocompleteGroupLabel, never>;
|
|
564
|
-
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxAutocompleteGroupLabel, "[rdxAutocompleteGroupLabel]", ["rdxAutocompleteGroupLabel"], {}, {}, never, never, true, [{ directive: typeof
|
|
554
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxAutocompleteGroupLabel, "[rdxAutocompleteGroupLabel]", ["rdxAutocompleteGroupLabel"], {}, {}, never, never, true, [{ directive: typeof _radix_ng_primitives_combobox.RdxComboboxGroupLabel; inputs: {}; outputs: {}; }]>;
|
|
565
555
|
}
|
|
566
556
|
|
|
567
557
|
/**
|
|
568
|
-
*
|
|
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.
|
|
569
561
|
*
|
|
570
562
|
* @group Components
|
|
571
563
|
*/
|
|
572
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>;
|
|
573
638
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxAutocompleteEmpty, never>;
|
|
574
|
-
static
|
|
639
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<RdxAutocompleteEmpty, "[rdxAutocompleteEmpty]", ["rdxAutocompleteEmpty"], {}, {}, never, ["*"], true, never>;
|
|
575
640
|
}
|
|
576
641
|
|
|
577
642
|
/**
|
|
@@ -582,15 +647,15 @@ declare class RdxAutocompleteEmpty {
|
|
|
582
647
|
*/
|
|
583
648
|
declare class RdxAutocompleteStatus {
|
|
584
649
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxAutocompleteStatus, never>;
|
|
585
|
-
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxAutocompleteStatus, "[rdxAutocompleteStatus]", ["rdxAutocompleteStatus"], {}, {}, never, never, true, [{ directive: typeof
|
|
650
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxAutocompleteStatus, "[rdxAutocompleteStatus]", ["rdxAutocompleteStatus"], {}, {}, never, never, true, [{ directive: typeof _radix_ng_primitives_combobox.RdxComboboxStatus; inputs: {}; outputs: {}; }]>;
|
|
586
651
|
}
|
|
587
652
|
|
|
588
653
|
declare const _importsAutocomplete: (typeof RdxAutocompleteAnchor)[];
|
|
589
654
|
declare class RdxAutocompleteModule {
|
|
590
655
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxAutocompleteModule, never>;
|
|
591
|
-
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 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 RdxAutocompleteItem, typeof RdxAutocompleteItemIndicator, typeof RdxAutocompleteGroup, typeof RdxAutocompleteGroupLabel, typeof RdxAutocompleteEmpty, typeof RdxAutocompleteStatus]>;
|
|
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]>;
|
|
592
657
|
static ɵinj: _angular_core.ɵɵInjectorDeclaration<RdxAutocompleteModule>;
|
|
593
658
|
}
|
|
594
659
|
|
|
595
|
-
export { RdxAutocompleteAnchor, RdxAutocompleteArrow, RdxAutocompleteBackdrop, RdxAutocompleteClear, RdxAutocompleteEmpty, RdxAutocompleteGroup, RdxAutocompleteGroupLabel, RdxAutocompleteIcon, RdxAutocompleteInput, RdxAutocompleteInputGroup, RdxAutocompleteItem, RdxAutocompleteItemIndicator, RdxAutocompleteLabel, RdxAutocompleteList, RdxAutocompleteModule, RdxAutocompletePopup, RdxAutocompletePortal, RdxAutocompletePortalMisuseGuard, RdxAutocompletePositioner, RdxAutocompleteRoot, RdxAutocompleteRow, RdxAutocompleteStatus, RdxAutocompleteTrigger, RdxAutocompleteValue, _importsAutocomplete };
|
|
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 };
|
|
596
661
|
export type { AutocompleteChangeReason, AutocompleteFilter, AutocompleteMode, AutocompleteValueChangeDetails };
|