@radix-ng/primitives 1.0.10 → 1.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +26 -5
- package/fesm2022/radix-ng-primitives-autocomplete.mjs +24 -16
- package/fesm2022/radix-ng-primitives-autocomplete.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-checkbox.mjs +55 -7
- package/fesm2022/radix-ng-primitives-checkbox.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-combobox.mjs +35 -18
- package/fesm2022/radix-ng-primitives-combobox.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-composite.mjs +221 -36
- package/fesm2022/radix-ng-primitives-composite.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-core.mjs +181 -21
- package/fesm2022/radix-ng-primitives-core.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-date-field.mjs +11 -5
- package/fesm2022/radix-ng-primitives-date-field.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-field.mjs +127 -23
- package/fesm2022/radix-ng-primitives-field.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-form.mjs +35 -4
- package/fesm2022/radix-ng-primitives-form.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-input.mjs +87 -15
- package/fesm2022/radix-ng-primitives-input.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-menu.mjs +34 -7
- package/fesm2022/radix-ng-primitives-menu.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-popper.mjs +80 -11
- package/fesm2022/radix-ng-primitives-popper.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-scroll-area.mjs +6 -3
- package/fesm2022/radix-ng-primitives-scroll-area.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-select.mjs +36 -12
- package/fesm2022/radix-ng-primitives-select.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-signal-forms.mjs +27 -11
- package/fesm2022/radix-ng-primitives-signal-forms.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-time-field.mjs +12 -6
- package/fesm2022/radix-ng-primitives-time-field.mjs.map +1 -1
- package/package.json +8 -3
- package/types/radix-ng-primitives-autocomplete.d.ts +7 -2
- package/types/radix-ng-primitives-checkbox.d.ts +10 -1
- package/types/radix-ng-primitives-combobox.d.ts +29 -2
- package/types/radix-ng-primitives-composite.d.ts +48 -2
- package/types/radix-ng-primitives-core.d.ts +152 -94
- package/types/radix-ng-primitives-date-field.d.ts +7 -4
- package/types/radix-ng-primitives-field.d.ts +55 -8
- package/types/radix-ng-primitives-form.d.ts +9 -0
- package/types/radix-ng-primitives-input.d.ts +10 -2
- package/types/radix-ng-primitives-menu.d.ts +45 -4
- package/types/radix-ng-primitives-navigation-menu.d.ts +2 -2
- package/types/radix-ng-primitives-popover.d.ts +2 -2
- package/types/radix-ng-primitives-popper.d.ts +60 -15
- package/types/radix-ng-primitives-preview-card.d.ts +2 -2
- package/types/radix-ng-primitives-select.d.ts +17 -3
- package/types/radix-ng-primitives-signal-forms.d.ts +22 -8
- package/types/radix-ng-primitives-time-field.d.ts +9 -6
- package/types/radix-ng-primitives-tooltip.d.ts +2 -2
|
@@ -92,6 +92,8 @@ interface ComboboxEngineConfig {
|
|
|
92
92
|
items: Signal<readonly AcceptableValue[] | undefined>;
|
|
93
93
|
/** Filter: `undefined` → default contains; a function → custom; `null` → built-in filtering off. */
|
|
94
94
|
filter: Signal<ComboboxFilter | null | undefined>;
|
|
95
|
+
/** Locale for the default `contains` collator; `undefined` → the runtime's default locale. */
|
|
96
|
+
locale: Signal<Intl.LocalesArgument>;
|
|
95
97
|
/** Maximum number of matching items to show (`-1` = no limit). */
|
|
96
98
|
limit: Signal<number>;
|
|
97
99
|
/** Whether the list is a 2D grid (row/column arrow navigation). Defaults off for plain lists. */
|
|
@@ -226,6 +228,8 @@ declare const context: () => {
|
|
|
226
228
|
readonly: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
227
229
|
requiredState: _angular_core.Signal<boolean>;
|
|
228
230
|
invalidState: _angular_core.Signal<boolean>;
|
|
231
|
+
pendingState: _angular_core.Signal<boolean>;
|
|
232
|
+
validState: _angular_core.Signal<boolean | null>;
|
|
229
233
|
touchedState: _angular_core.Signal<boolean>;
|
|
230
234
|
dirtyState: _angular_core.Signal<boolean>;
|
|
231
235
|
openOnInputClick: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
@@ -301,6 +305,8 @@ declare const injectComboboxRootContext: _radix_ng_primitives_core.InjectContext
|
|
|
301
305
|
readonly: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
302
306
|
requiredState: _angular_core.Signal<boolean>;
|
|
303
307
|
invalidState: _angular_core.Signal<boolean>;
|
|
308
|
+
pendingState: _angular_core.Signal<boolean>;
|
|
309
|
+
validState: _angular_core.Signal<boolean | null>;
|
|
304
310
|
touchedState: _angular_core.Signal<boolean>;
|
|
305
311
|
dirtyState: _angular_core.Signal<boolean>;
|
|
306
312
|
openOnInputClick: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
@@ -375,6 +381,8 @@ declare const provideComboboxRootContext: (useFactory: () => {
|
|
|
375
381
|
readonly: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
376
382
|
requiredState: _angular_core.Signal<boolean>;
|
|
377
383
|
invalidState: _angular_core.Signal<boolean>;
|
|
384
|
+
pendingState: _angular_core.Signal<boolean>;
|
|
385
|
+
validState: _angular_core.Signal<boolean | null>;
|
|
378
386
|
touchedState: _angular_core.Signal<boolean>;
|
|
379
387
|
dirtyState: _angular_core.Signal<boolean>;
|
|
380
388
|
openOnInputClick: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
@@ -514,6 +522,8 @@ declare class RdxComboboxRoot extends RdxFormUiControlBase implements ControlVal
|
|
|
514
522
|
* - `null`: built-in filtering disabled (the consumer controls which items exist).
|
|
515
523
|
*/
|
|
516
524
|
readonly filter: _angular_core.InputSignal<ComboboxFilter | null | undefined>;
|
|
525
|
+
/** Locale for the default `contains` filter's string comparison. Defaults to the runtime locale. */
|
|
526
|
+
readonly locale: _angular_core.InputSignal<Intl.LocalesArgument>;
|
|
517
527
|
/** Maximum number of matching items to show. `-1` (default) means no limit. */
|
|
518
528
|
readonly limit: _angular_core.InputSignalWithTransform<number, unknown>;
|
|
519
529
|
/**
|
|
@@ -557,6 +567,8 @@ declare class RdxComboboxRoot extends RdxFormUiControlBase implements ControlVal
|
|
|
557
567
|
readonly requiredState: _angular_core.Signal<boolean>;
|
|
558
568
|
/** @ignore */
|
|
559
569
|
readonly invalidState: _angular_core.Signal<boolean>;
|
|
570
|
+
readonly pendingState: _angular_core.Signal<boolean>;
|
|
571
|
+
readonly validState: _angular_core.Signal<boolean | null>;
|
|
560
572
|
/** @ignore */
|
|
561
573
|
readonly touchedState: _angular_core.Signal<boolean>;
|
|
562
574
|
/** @ignore */
|
|
@@ -648,7 +660,7 @@ declare class RdxComboboxRoot extends RdxFormUiControlBase implements ControlVal
|
|
|
648
660
|
registerOnTouched(fn: () => void): void;
|
|
649
661
|
setDisabledState(isDisabled: boolean): void;
|
|
650
662
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxComboboxRoot, never>;
|
|
651
|
-
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxComboboxRoot, "[rdxComboboxRoot]", ["rdxComboboxRoot"], { "value": { "alias": "value"; "required": false; "isSignal": true; }; "defaultValue": { "alias": "defaultValue"; "required": false; "isSignal": true; }; "inputValue": { "alias": "inputValue"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; "defaultOpen": { "alias": "defaultOpen"; "required": false; "isSignal": true; }; "multipleInput": { "alias": "multiple"; "required": false; "isSignal": true; }; "selectionMode": { "alias": "selectionMode"; "required": false; "isSignal": true; }; "fillInputOnItemPress": { "alias": "fillInputOnItemPress"; "required": false; "isSignal": true; }; "dirInput": { "alias": "dir"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readOnly": { "alias": "readOnly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "loopFocus": { "alias": "loopFocus"; "required": false; "isSignal": true; }; "autoHighlight": { "alias": "autoHighlight"; "required": false; "isSignal": true; }; "highlightItemOnHover": { "alias": "highlightItemOnHover"; "required": false; "isSignal": true; }; "keepHighlight": { "alias": "keepHighlight"; "required": false; "isSignal": true; }; "openOnInputClick": { "alias": "openOnInputClick"; "required": false; "isSignal": true; }; "modal": { "alias": "modal"; "required": false; "isSignal": true; }; "submitOnItemClick": { "alias": "submitOnItemClick"; "required": false; "isSignal": true; }; "filter": { "alias": "filter"; "required": false; "isSignal": true; }; "limit": { "alias": "limit"; "required": false; "isSignal": true; }; "items": { "alias": "items"; "required": false; "isSignal": true; }; "virtualized": { "alias": "virtualized"; "required": false; "isSignal": true; }; "grid": { "alias": "grid"; "required": false; "isSignal": true; }; "isItemEqualToValue": { "alias": "isItemEqualToValue"; "required": false; "isSignal": true; }; "itemToStringLabel": { "alias": "itemToStringLabel"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "inputValue": "inputValueChange"; "open": "openChange"; "onValueChange": "onValueChange"; "onInputValueChange": "onInputValueChange"; "onOpenChange": "onOpenChange"; "onItemHighlighted": "onItemHighlighted"; "onOpenChangeComplete": "onOpenChangeComplete"; }, never, never, true, [{ directive: typeof i1.RdxPopper; inputs: {}; outputs: {}; }]>;
|
|
663
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxComboboxRoot, "[rdxComboboxRoot]", ["rdxComboboxRoot"], { "value": { "alias": "value"; "required": false; "isSignal": true; }; "defaultValue": { "alias": "defaultValue"; "required": false; "isSignal": true; }; "inputValue": { "alias": "inputValue"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; "defaultOpen": { "alias": "defaultOpen"; "required": false; "isSignal": true; }; "multipleInput": { "alias": "multiple"; "required": false; "isSignal": true; }; "selectionMode": { "alias": "selectionMode"; "required": false; "isSignal": true; }; "fillInputOnItemPress": { "alias": "fillInputOnItemPress"; "required": false; "isSignal": true; }; "dirInput": { "alias": "dir"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readOnly": { "alias": "readOnly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "loopFocus": { "alias": "loopFocus"; "required": false; "isSignal": true; }; "autoHighlight": { "alias": "autoHighlight"; "required": false; "isSignal": true; }; "highlightItemOnHover": { "alias": "highlightItemOnHover"; "required": false; "isSignal": true; }; "keepHighlight": { "alias": "keepHighlight"; "required": false; "isSignal": true; }; "openOnInputClick": { "alias": "openOnInputClick"; "required": false; "isSignal": true; }; "modal": { "alias": "modal"; "required": false; "isSignal": true; }; "submitOnItemClick": { "alias": "submitOnItemClick"; "required": false; "isSignal": true; }; "filter": { "alias": "filter"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "limit": { "alias": "limit"; "required": false; "isSignal": true; }; "items": { "alias": "items"; "required": false; "isSignal": true; }; "virtualized": { "alias": "virtualized"; "required": false; "isSignal": true; }; "grid": { "alias": "grid"; "required": false; "isSignal": true; }; "isItemEqualToValue": { "alias": "isItemEqualToValue"; "required": false; "isSignal": true; }; "itemToStringLabel": { "alias": "itemToStringLabel"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "inputValue": "inputValueChange"; "open": "openChange"; "onValueChange": "onValueChange"; "onInputValueChange": "onInputValueChange"; "onOpenChange": "onOpenChange"; "onItemHighlighted": "onItemHighlighted"; "onOpenChangeComplete": "onOpenChangeComplete"; }, never, never, true, [{ directive: typeof i1.RdxPopper; inputs: {}; outputs: {}; }]>;
|
|
652
664
|
}
|
|
653
665
|
|
|
654
666
|
/**
|
|
@@ -687,6 +699,8 @@ declare class RdxComboboxInput {
|
|
|
687
699
|
readonly: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
688
700
|
requiredState: _angular_core.Signal<boolean>;
|
|
689
701
|
invalidState: _angular_core.Signal<boolean>;
|
|
702
|
+
pendingState: _angular_core.Signal<boolean>;
|
|
703
|
+
validState: _angular_core.Signal<boolean | null>;
|
|
690
704
|
touchedState: _angular_core.Signal<boolean>;
|
|
691
705
|
dirtyState: _angular_core.Signal<boolean>;
|
|
692
706
|
openOnInputClick: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
@@ -752,7 +766,6 @@ declare class RdxComboboxInput {
|
|
|
752
766
|
readonly id: _angular_core.InputSignal<string>;
|
|
753
767
|
/** Marks the input as invalid independently of any Field state. */
|
|
754
768
|
readonly invalid: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
|
|
755
|
-
protected readonly invalidState: _angular_core.Signal<boolean>;
|
|
756
769
|
/**
|
|
757
770
|
* Tri-state *displayed* validity: the enclosing Field's gated `validState` when inside a `rdxFieldRoot`
|
|
758
771
|
* (so a field whose `validationMode` defers display (e.g. `onBlur`) keeps the input neutral until revealed), else the input's
|
|
@@ -809,6 +822,8 @@ declare class RdxComboboxInputGroup {
|
|
|
809
822
|
readonly: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
810
823
|
requiredState: _angular_core.Signal<boolean>;
|
|
811
824
|
invalidState: _angular_core.Signal<boolean>;
|
|
825
|
+
pendingState: _angular_core.Signal<boolean>;
|
|
826
|
+
validState: _angular_core.Signal<boolean | null>;
|
|
812
827
|
touchedState: _angular_core.Signal<boolean>;
|
|
813
828
|
dirtyState: _angular_core.Signal<boolean>;
|
|
814
829
|
openOnInputClick: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
@@ -929,6 +944,8 @@ declare class RdxComboboxTrigger {
|
|
|
929
944
|
readonly: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
930
945
|
requiredState: _angular_core.Signal<boolean>;
|
|
931
946
|
invalidState: _angular_core.Signal<boolean>;
|
|
947
|
+
pendingState: _angular_core.Signal<boolean>;
|
|
948
|
+
validState: _angular_core.Signal<boolean | null>;
|
|
932
949
|
touchedState: _angular_core.Signal<boolean>;
|
|
933
950
|
dirtyState: _angular_core.Signal<boolean>;
|
|
934
951
|
openOnInputClick: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
@@ -1030,6 +1047,8 @@ declare class RdxComboboxClear {
|
|
|
1030
1047
|
readonly: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1031
1048
|
requiredState: _angular_core.Signal<boolean>;
|
|
1032
1049
|
invalidState: _angular_core.Signal<boolean>;
|
|
1050
|
+
pendingState: _angular_core.Signal<boolean>;
|
|
1051
|
+
validState: _angular_core.Signal<boolean | null>;
|
|
1033
1052
|
touchedState: _angular_core.Signal<boolean>;
|
|
1034
1053
|
dirtyState: _angular_core.Signal<boolean>;
|
|
1035
1054
|
openOnInputClick: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
@@ -1160,6 +1179,8 @@ declare class RdxComboboxBackdrop {
|
|
|
1160
1179
|
readonly: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1161
1180
|
requiredState: _angular_core.Signal<boolean>;
|
|
1162
1181
|
invalidState: _angular_core.Signal<boolean>;
|
|
1182
|
+
pendingState: _angular_core.Signal<boolean>;
|
|
1183
|
+
validState: _angular_core.Signal<boolean | null>;
|
|
1163
1184
|
touchedState: _angular_core.Signal<boolean>;
|
|
1164
1185
|
dirtyState: _angular_core.Signal<boolean>;
|
|
1165
1186
|
openOnInputClick: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
@@ -1262,6 +1283,8 @@ declare class RdxComboboxPopup {
|
|
|
1262
1283
|
readonly: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1263
1284
|
requiredState: _angular_core.Signal<boolean>;
|
|
1264
1285
|
invalidState: _angular_core.Signal<boolean>;
|
|
1286
|
+
pendingState: _angular_core.Signal<boolean>;
|
|
1287
|
+
validState: _angular_core.Signal<boolean | null>;
|
|
1265
1288
|
touchedState: _angular_core.Signal<boolean>;
|
|
1266
1289
|
dirtyState: _angular_core.Signal<boolean>;
|
|
1267
1290
|
openOnInputClick: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
@@ -1371,6 +1394,8 @@ declare class RdxComboboxList {
|
|
|
1371
1394
|
readonly: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1372
1395
|
requiredState: _angular_core.Signal<boolean>;
|
|
1373
1396
|
invalidState: _angular_core.Signal<boolean>;
|
|
1397
|
+
pendingState: _angular_core.Signal<boolean>;
|
|
1398
|
+
validState: _angular_core.Signal<boolean | null>;
|
|
1374
1399
|
touchedState: _angular_core.Signal<boolean>;
|
|
1375
1400
|
dirtyState: _angular_core.Signal<boolean>;
|
|
1376
1401
|
openOnInputClick: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
@@ -1621,6 +1646,8 @@ declare class RdxComboboxEmpty {
|
|
|
1621
1646
|
readonly: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1622
1647
|
requiredState: _angular_core.Signal<boolean>;
|
|
1623
1648
|
invalidState: _angular_core.Signal<boolean>;
|
|
1649
|
+
pendingState: _angular_core.Signal<boolean>;
|
|
1650
|
+
validState: _angular_core.Signal<boolean | null>;
|
|
1624
1651
|
touchedState: _angular_core.Signal<boolean>;
|
|
1625
1652
|
dirtyState: _angular_core.Signal<boolean>;
|
|
1626
1653
|
openOnInputClick: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
@@ -77,14 +77,43 @@ declare const provideRdxCompositeListContext: (useFactory: () => RdxCompositeLis
|
|
|
77
77
|
*/
|
|
78
78
|
declare class RdxCompositeList {
|
|
79
79
|
readonly elementRef: ElementRef<HTMLElement>;
|
|
80
|
-
|
|
80
|
+
/**
|
|
81
|
+
* Stable element → registration map. Kept as a plain (mutable) Map so a registration is an O(1)
|
|
82
|
+
* `set`/`delete` instead of re-creating the whole array on every mount — with N items each
|
|
83
|
+
* registering, an array copy per item is an O(n^2) mount. `registrationTick` is the reactive
|
|
84
|
+
* trigger: bumped on every register/unregister so `items` re-derives. Mirrors Base UI's composite
|
|
85
|
+
* list (stable map + `mapTick`).
|
|
86
|
+
*/
|
|
87
|
+
private readonly registrations;
|
|
88
|
+
private readonly registrationTick;
|
|
89
|
+
/**
|
|
90
|
+
* Bumped when registered items are moved in the DOM without re-registering
|
|
91
|
+
* (e.g. an `@for` reorder that reuses views). Angular does not re-run the item
|
|
92
|
+
* registration effect on such moves, so `registeredItems` is unchanged and the
|
|
93
|
+
* document-order sort would go stale; a MutationObserver detects the move and
|
|
94
|
+
* bumps this tick to force `items` to re-sort. Mirrors Base UI's composite list.
|
|
95
|
+
*/
|
|
96
|
+
private readonly reorderTick;
|
|
81
97
|
/** Emits when the ordered item map changes. */
|
|
82
98
|
readonly onMapChange: _angular_core.OutputEmitterRef<Map<HTMLElement, RdxCompositeMetadata>>;
|
|
83
99
|
/** Items registered with this list, sorted in DOM order. */
|
|
84
100
|
readonly items: _angular_core.Signal<RdxCompositeItemRegistration<RdxCompositeItemMetadata>[]>;
|
|
101
|
+
/**
|
|
102
|
+
* Element → document-order index. Depends only on `items()` (not on any item's metadata), so
|
|
103
|
+
* `indexOf` is an O(1) lookup and rebuilds only when the item set/order changes — the mount hot
|
|
104
|
+
* path where N items each read their index. Keeping metadata out of it avoids invalidating every
|
|
105
|
+
* item's index when a single item's metadata changes.
|
|
106
|
+
*/
|
|
107
|
+
private readonly indexMap;
|
|
85
108
|
/** Ordered metadata keyed by item element. */
|
|
86
109
|
readonly itemMap: _angular_core.Signal<Map<HTMLElement, RdxCompositeMetadata>>;
|
|
87
110
|
constructor();
|
|
111
|
+
/**
|
|
112
|
+
* Watches the smallest containers that bound the registered items and re-sorts
|
|
113
|
+
* when a move inverts their document order. Re-established whenever the item set
|
|
114
|
+
* changes; a no-op where `MutationObserver` is unavailable (SSR).
|
|
115
|
+
*/
|
|
116
|
+
private observeItemReordering;
|
|
88
117
|
registerItem<Metadata extends RdxCompositeItemMetadata>(item: RdxCompositeItemRegistration<Metadata>): () => void;
|
|
89
118
|
indexOf(element: HTMLElement): number;
|
|
90
119
|
elements(): HTMLElement[];
|
|
@@ -139,6 +168,8 @@ declare class RdxCompositeRoot {
|
|
|
139
168
|
readonly items: _angular_core.Signal<_radix_ng_primitives_composite.RdxCompositeItemRegistration<_radix_ng_primitives_composite.RdxCompositeItemMetadata>[]>;
|
|
140
169
|
readonly itemMap: _angular_core.Signal<Map<HTMLElement, RdxCompositeMetadata>>;
|
|
141
170
|
constructor();
|
|
171
|
+
/** Move the roving tab stop to the first enabled item when the highlighted one is disabled. */
|
|
172
|
+
private moveHighlightOffDisabledItem;
|
|
142
173
|
indexOf(element: HTMLElement): number;
|
|
143
174
|
setOrientation(value: RdxCompositeOrientation): void;
|
|
144
175
|
setLoopFocus(value: boolean): void;
|
|
@@ -163,9 +194,24 @@ declare const ACTIVE_COMPOSITE_ITEM = "data-composite-item-active";
|
|
|
163
194
|
declare const ARROW_KEYS: Set<string>;
|
|
164
195
|
declare const COMPOSITE_KEYS: Set<string>;
|
|
165
196
|
declare const MODIFIER_KEYS: RdxCompositeModifierKey[];
|
|
197
|
+
declare function compareNodeDocumentPosition(a: Node, b: Node): number;
|
|
166
198
|
declare function sortByDocumentPosition<T extends {
|
|
167
199
|
element: HTMLElement;
|
|
168
200
|
}>(items: readonly T[]): T[];
|
|
201
|
+
/**
|
|
202
|
+
* Smallest set of container elements whose child order can change the relative
|
|
203
|
+
* order of the given (already document-sorted) nodes. Observing each adjacent
|
|
204
|
+
* pair's common ancestor catches both direct item moves and wrapper moves at the
|
|
205
|
+
* boundary, mirroring Base UI's composite list observer.
|
|
206
|
+
*/
|
|
207
|
+
declare function getAdjacentNodeRoots(nodes: readonly Element[]): Set<Element>;
|
|
208
|
+
/**
|
|
209
|
+
* Whether a batch of mutations moved a node (removed then re-added in the same
|
|
210
|
+
* batch, or reparented so a removed node is still connected) rather than a pure
|
|
211
|
+
* add/remove. Pure adds/removals re-sort through register/unregister and cannot
|
|
212
|
+
* change the relative order of the remaining items.
|
|
213
|
+
*/
|
|
214
|
+
declare function hasMovedNode(entries: readonly MutationRecord[]): boolean;
|
|
169
215
|
declare function isModifierKeySet(event: KeyboardEvent, allowedModifierKeys: readonly RdxCompositeModifierKey[]): boolean;
|
|
170
216
|
declare function isNativeTextInput(target: EventTarget | null): target is HTMLInputElement | HTMLTextAreaElement;
|
|
171
217
|
declare function getCompositeNavigationKeys(orientation: RdxCompositeOrientation, dir: Direction): {
|
|
@@ -193,5 +239,5 @@ declare class RdxCompositeModule {
|
|
|
193
239
|
static ɵinj: _angular_core.ɵɵInjectorDeclaration<RdxCompositeModule>;
|
|
194
240
|
}
|
|
195
241
|
|
|
196
|
-
export { ACTIVE_COMPOSITE_ITEM, ARROW_KEYS, COMPOSITE_KEYS, MODIFIER_KEYS, RdxCompositeItem, RdxCompositeList, RdxCompositeListItem, RdxCompositeModule, RdxCompositeRoot, compositeImports, findNonDisabledListIndex, getCompositeNavigationKeys, getMaxListIndex, getMinListIndex, injectRdxCompositeListContext, injectRdxCompositeRootContext, isElementDisabled, isElementVisible, isIndexOutOfListBounds, isListIndexDisabled, isModifierKeySet, isNativeTextInput, provideRdxCompositeListContext, provideRdxCompositeRootContext, scrollIntoViewIfNeeded, shouldKeepNativeTextInputBehavior, sortByDocumentPosition };
|
|
242
|
+
export { ACTIVE_COMPOSITE_ITEM, ARROW_KEYS, COMPOSITE_KEYS, MODIFIER_KEYS, RdxCompositeItem, RdxCompositeList, RdxCompositeListItem, RdxCompositeModule, RdxCompositeRoot, compareNodeDocumentPosition, compositeImports, findNonDisabledListIndex, getAdjacentNodeRoots, getCompositeNavigationKeys, getMaxListIndex, getMinListIndex, hasMovedNode, injectRdxCompositeListContext, injectRdxCompositeRootContext, isElementDisabled, isElementVisible, isIndexOutOfListBounds, isListIndexDisabled, isModifierKeySet, isNativeTextInput, provideRdxCompositeListContext, provideRdxCompositeRootContext, scrollIntoViewIfNeeded, shouldKeepNativeTextInputBehavior, sortByDocumentPosition };
|
|
197
243
|
export type { RdxCompositeItemMetadata, RdxCompositeItemRegistration, RdxCompositeListContext, RdxCompositeMetadata, RdxCompositeModifierKey, RdxCompositeOrientation, RdxCompositeRootContext };
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import {
|
|
2
|
+
import { InputSignal, InputSignalWithTransform, ModelSignal, OutputRef, Signal, Type, Provider, WritableSignal, ProviderToken, InjectionToken, OutputEmitterRef, Injector, ElementRef, EffectRef, EffectCleanupRegisterFn, CreateEffectOptions } from '@angular/core';
|
|
3
3
|
import { ControlValueAccessor } from '@angular/forms';
|
|
4
4
|
import { DateValue, Time, CalendarDateTime, ZonedDateTime } from '@internationalized/date';
|
|
5
5
|
import * as _radix_ng_primitives_core from '@radix-ng/primitives/core';
|
|
@@ -101,6 +101,114 @@ declare class RdxControlValueAccessor<T> implements ControlValueAccessor {
|
|
|
101
101
|
*/
|
|
102
102
|
declare function injectControlValueAccessor<T>(): RdxControlValueAccessor<T>;
|
|
103
103
|
|
|
104
|
+
/**
|
|
105
|
+
* Local mirror of Angular Signal Forms' control contracts
|
|
106
|
+
* (`@angular/forms/signals`, stable in Angular 22).
|
|
107
|
+
*
|
|
108
|
+
* These interfaces intentionally do **not** import from `@angular/forms/signals`,
|
|
109
|
+
* so control entries do not pull that optional integration into their public
|
|
110
|
+
* dependency graph. Primitives can still declare `implements RdxFormValueControl<T>` /
|
|
111
|
+
* `implements RdxFormCheckboxControl`; the mirror locks the public surface (the
|
|
112
|
+
* required `value` / `checked` signal) and catches naming regressions on CI — e.g.
|
|
113
|
+
* a rewrite renaming `value` → `modelValue` (as the slider once had) would no
|
|
114
|
+
* longer type-check.
|
|
115
|
+
*
|
|
116
|
+
* Optional state types are widened only where Radix NG controls legitimately
|
|
117
|
+
* differ from Angular's exact types (e.g. `input<string>()` produces
|
|
118
|
+
* `string | undefined`, and boolean inputs carry a coercion transform).
|
|
119
|
+
*
|
|
120
|
+
* The real Angular types stay isolated in `@radix-ng/primitives/signal-forms`.
|
|
121
|
+
* See ADR 0018 and `.claude/skills/project-knowledge/references/signal-forms-readiness.md`.
|
|
122
|
+
*/
|
|
123
|
+
/** An optional control-state member exposed as an Angular input signal (with or without a coercion transform). */
|
|
124
|
+
type RdxFormStateInput<T> = InputSignal<T> | InputSignalWithTransform<T, any>;
|
|
125
|
+
/**
|
|
126
|
+
* Minimal stand-in for Angular's `ValidationError`. The real type is a tagged
|
|
127
|
+
* union (`RequiredValidationError`, `PatternValidationError`, …); this keeps a
|
|
128
|
+
* shared shape until the v22 type is available.
|
|
129
|
+
*/
|
|
130
|
+
interface RdxValidationError {
|
|
131
|
+
readonly kind: string;
|
|
132
|
+
readonly message?: string;
|
|
133
|
+
}
|
|
134
|
+
/** Optional state shared by value and checkbox controls (mirror of Angular's `FormUiControl`). */
|
|
135
|
+
interface RdxFormUiControl {
|
|
136
|
+
readonly disabled?: RdxFormStateInput<boolean>;
|
|
137
|
+
readonly readonly?: RdxFormStateInput<boolean>;
|
|
138
|
+
readonly required?: RdxFormStateInput<boolean>;
|
|
139
|
+
readonly invalid?: RdxFormStateInput<boolean>;
|
|
140
|
+
readonly hidden?: RdxFormStateInput<boolean>;
|
|
141
|
+
readonly pending?: RdxFormStateInput<boolean>;
|
|
142
|
+
/**
|
|
143
|
+
* Touched status the form writes into the control.
|
|
144
|
+
*
|
|
145
|
+
* The two API generations disagree on the notification half: the 21.x
|
|
146
|
+
* experimental implementation listens to a `touched` **model**'s
|
|
147
|
+
* `touchedChange` output, while stable Angular 22 reverted to a plain
|
|
148
|
+
* `touched` input plus a separate {@link touch} output. A `model()` set on
|
|
149
|
+
* blur **plus** an emitted `touch` output satisfies both (`ModelSignal`
|
|
150
|
+
* extends `InputSignalWithTransform`, so it type-checks as the 22 input).
|
|
151
|
+
*/
|
|
152
|
+
readonly touched?: ModelSignal<boolean> | RdxFormStateInput<boolean> | OutputRef<boolean>;
|
|
153
|
+
readonly dirty?: RdxFormStateInput<boolean>;
|
|
154
|
+
readonly name?: RdxFormStateInput<string | undefined>;
|
|
155
|
+
readonly errors?: RdxFormStateInput<readonly RdxValidationError[]>;
|
|
156
|
+
readonly minLength?: RdxFormStateInput<number | undefined>;
|
|
157
|
+
readonly maxLength?: RdxFormStateInput<number | undefined>;
|
|
158
|
+
readonly pattern?: RdxFormStateInput<readonly RegExp[]>;
|
|
159
|
+
/** Notifies the form the control was touched (stable Angular 22 contract; ignored by 21.x). */
|
|
160
|
+
readonly touch?: OutputRef<void>;
|
|
161
|
+
/** Resets the control's UI state (optional method added in stable Angular 22). */
|
|
162
|
+
reset?(): void;
|
|
163
|
+
}
|
|
164
|
+
/**
|
|
165
|
+
* Mirror of `FormValueControl<TValue>` — a control that edits a single value via
|
|
166
|
+
* `value = model<TValue>()`. It must **not** expose `checked`.
|
|
167
|
+
*/
|
|
168
|
+
interface RdxFormValueControl<TValue> extends RdxFormUiControl {
|
|
169
|
+
readonly value: ModelSignal<TValue>;
|
|
170
|
+
readonly checked?: undefined;
|
|
171
|
+
readonly min?: RdxFormStateInput<NonNullable<TValue> | undefined>;
|
|
172
|
+
readonly max?: RdxFormStateInput<NonNullable<TValue> | undefined>;
|
|
173
|
+
}
|
|
174
|
+
/**
|
|
175
|
+
* Mirror of `FormCheckboxControl` — a control that toggles via
|
|
176
|
+
* `checked = model<boolean>()`. It must **not** expose `value`.
|
|
177
|
+
*/
|
|
178
|
+
interface RdxFormCheckboxControl extends RdxFormUiControl {
|
|
179
|
+
readonly checked: ModelSignal<boolean>;
|
|
180
|
+
readonly value?: undefined;
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
/**
|
|
184
|
+
* Form state owned by an Angular Reactive Forms or template-driven `NgControl` on the same host
|
|
185
|
+
* element. `connected` stays false for standalone and Signal Forms controls.
|
|
186
|
+
*
|
|
187
|
+
* @ignore
|
|
188
|
+
*/
|
|
189
|
+
interface RdxNgControlState {
|
|
190
|
+
readonly connected: Signal<boolean>;
|
|
191
|
+
readonly name: Signal<string | undefined>;
|
|
192
|
+
readonly value: Signal<unknown>;
|
|
193
|
+
readonly valid: Signal<boolean>;
|
|
194
|
+
readonly invalid: Signal<boolean>;
|
|
195
|
+
readonly pending: Signal<boolean>;
|
|
196
|
+
readonly disabled: Signal<boolean>;
|
|
197
|
+
readonly errors: Signal<readonly RdxValidationError[]>;
|
|
198
|
+
readonly dirty: Signal<boolean>;
|
|
199
|
+
readonly touched: Signal<boolean>;
|
|
200
|
+
}
|
|
201
|
+
/**
|
|
202
|
+
* Lazily connects to the same-host `NgControl` without creating a circular dependency while Angular
|
|
203
|
+
* is resolving its `ControlValueAccessor`. The unified `AbstractControl.events` stream mirrors
|
|
204
|
+
* programmatic value, status, validation, and interaction-state changes as well as user-driven ones.
|
|
205
|
+
*
|
|
206
|
+
* Must be called in an injection context.
|
|
207
|
+
*
|
|
208
|
+
* @ignore
|
|
209
|
+
*/
|
|
210
|
+
declare function injectNgControlState(): RdxNgControlState;
|
|
211
|
+
|
|
104
212
|
/**
|
|
105
213
|
* Include in the providers section of a component which utilizes ControlValueAccessor to redundant code.
|
|
106
214
|
*
|
|
@@ -461,7 +569,7 @@ type UseDateFieldProps = {
|
|
|
461
569
|
disabled: Signal<boolean>;
|
|
462
570
|
readonly: Signal<boolean>;
|
|
463
571
|
part: SegmentPart;
|
|
464
|
-
modelValue: ModelSignal<DateValue |
|
|
572
|
+
modelValue: ModelSignal<DateValue | null> | WritableSignal<DateValue | null>;
|
|
465
573
|
focusNext: () => void;
|
|
466
574
|
};
|
|
467
575
|
type SegmentAttrProps = {
|
|
@@ -784,86 +892,7 @@ declare function isEqual(a: any, b: any): boolean;
|
|
|
784
892
|
declare function provideExistingToken<T>(token: ProviderToken<T>, type: Type<T>): Provider;
|
|
785
893
|
|
|
786
894
|
/**
|
|
787
|
-
*
|
|
788
|
-
* (`@angular/forms/signals`, stable in Angular 22).
|
|
789
|
-
*
|
|
790
|
-
* These interfaces intentionally do **not** import from `@angular/forms/signals`
|
|
791
|
-
* so primitives can declare `implements RdxFormValueControl<T>` /
|
|
792
|
-
* `implements RdxFormCheckboxControl` while the library baseline is still on
|
|
793
|
-
* Angular 21, where the real API is experimental. They mirror Angular's contract
|
|
794
|
-
* closely enough to lock the public surface (the required `value` / `checked`
|
|
795
|
-
* signal) and catch naming regressions on CI — e.g. a rewrite renaming
|
|
796
|
-
* `value` → `modelValue` (as the slider once had) would no longer type-check.
|
|
797
|
-
*
|
|
798
|
-
* Optional state types are widened only where Radix NG controls legitimately
|
|
799
|
-
* differ from Angular's exact types (e.g. `input<string>()` produces
|
|
800
|
-
* `string | undefined`, and boolean inputs carry a coercion transform).
|
|
801
|
-
*
|
|
802
|
-
* Replace with the real imports once the baseline moves to Angular 22.
|
|
803
|
-
* See `.claude/skills/project-knowledge/references/signal-forms-readiness.md`.
|
|
804
|
-
*/
|
|
805
|
-
/** An optional control-state member exposed as an Angular input signal (with or without a coercion transform). */
|
|
806
|
-
type RdxFormStateInput<T> = InputSignal<T> | InputSignalWithTransform<T, any>;
|
|
807
|
-
/**
|
|
808
|
-
* Minimal stand-in for Angular's `ValidationError`. The real type is a tagged
|
|
809
|
-
* union (`RequiredValidationError`, `PatternValidationError`, …); this keeps a
|
|
810
|
-
* shared shape until the v22 type is available.
|
|
811
|
-
*/
|
|
812
|
-
interface RdxValidationError {
|
|
813
|
-
readonly kind: string;
|
|
814
|
-
readonly message?: string;
|
|
815
|
-
}
|
|
816
|
-
/** Optional state shared by value and checkbox controls (mirror of Angular's `FormUiControl`). */
|
|
817
|
-
interface RdxFormUiControl {
|
|
818
|
-
readonly disabled?: RdxFormStateInput<boolean>;
|
|
819
|
-
readonly readonly?: RdxFormStateInput<boolean>;
|
|
820
|
-
readonly required?: RdxFormStateInput<boolean>;
|
|
821
|
-
readonly invalid?: RdxFormStateInput<boolean>;
|
|
822
|
-
readonly hidden?: RdxFormStateInput<boolean>;
|
|
823
|
-
readonly pending?: RdxFormStateInput<boolean>;
|
|
824
|
-
/**
|
|
825
|
-
* Touched status the form writes into the control.
|
|
826
|
-
*
|
|
827
|
-
* The two API generations disagree on the notification half: the 21.x
|
|
828
|
-
* experimental implementation listens to a `touched` **model**'s
|
|
829
|
-
* `touchedChange` output, while stable Angular 22 reverted to a plain
|
|
830
|
-
* `touched` input plus a separate {@link touch} output. A `model()` set on
|
|
831
|
-
* blur **plus** an emitted `touch` output satisfies both (`ModelSignal`
|
|
832
|
-
* extends `InputSignalWithTransform`, so it type-checks as the 22 input).
|
|
833
|
-
*/
|
|
834
|
-
readonly touched?: ModelSignal<boolean> | RdxFormStateInput<boolean> | OutputRef<boolean>;
|
|
835
|
-
readonly dirty?: RdxFormStateInput<boolean>;
|
|
836
|
-
readonly name?: RdxFormStateInput<string | undefined>;
|
|
837
|
-
readonly errors?: RdxFormStateInput<readonly RdxValidationError[]>;
|
|
838
|
-
readonly minLength?: RdxFormStateInput<number | undefined>;
|
|
839
|
-
readonly maxLength?: RdxFormStateInput<number | undefined>;
|
|
840
|
-
readonly pattern?: RdxFormStateInput<readonly RegExp[]>;
|
|
841
|
-
/** Notifies the form the control was touched (stable Angular 22 contract; ignored by 21.x). */
|
|
842
|
-
readonly touch?: OutputRef<void>;
|
|
843
|
-
/** Resets the control's UI state (optional method added in stable Angular 22). */
|
|
844
|
-
reset?(): void;
|
|
845
|
-
}
|
|
846
|
-
/**
|
|
847
|
-
* Mirror of `FormValueControl<TValue>` — a control that edits a single value via
|
|
848
|
-
* `value = model<TValue>()`. It must **not** expose `checked`.
|
|
849
|
-
*/
|
|
850
|
-
interface RdxFormValueControl<TValue> extends RdxFormUiControl {
|
|
851
|
-
readonly value: ModelSignal<TValue>;
|
|
852
|
-
readonly checked?: undefined;
|
|
853
|
-
readonly min?: RdxFormStateInput<NonNullable<TValue> | undefined>;
|
|
854
|
-
readonly max?: RdxFormStateInput<NonNullable<TValue> | undefined>;
|
|
855
|
-
}
|
|
856
|
-
/**
|
|
857
|
-
* Mirror of `FormCheckboxControl` — a control that toggles via
|
|
858
|
-
* `checked = model<boolean>()`. It must **not** expose `value`.
|
|
859
|
-
*/
|
|
860
|
-
interface RdxFormCheckboxControl extends RdxFormUiControl {
|
|
861
|
-
readonly checked: ModelSignal<boolean>;
|
|
862
|
-
readonly value?: undefined;
|
|
863
|
-
}
|
|
864
|
-
|
|
865
|
-
/**
|
|
866
|
-
* Optional form-control UI state derived from a control's `invalid`/`errors`/`touched`/`dirty`
|
|
895
|
+
* Optional form-control UI state derived from a control's `invalid`/`pending`/`errors`/`touched`/`dirty`
|
|
867
896
|
* inputs (the optional members of Signal Forms' `FormUiControl`), plus the two mutators every
|
|
868
897
|
* control needs.
|
|
869
898
|
*
|
|
@@ -872,6 +901,12 @@ interface RdxFormCheckboxControl extends RdxFormUiControl {
|
|
|
872
901
|
interface RdxFormUiState {
|
|
873
902
|
/** Invalid when the `invalid` input is set or the `errors` list is non-empty. */
|
|
874
903
|
readonly invalidState: Signal<boolean>;
|
|
904
|
+
/** Whether asynchronous validation is still settling. Pending is neither valid nor invalid. */
|
|
905
|
+
readonly pendingState: Signal<boolean>;
|
|
906
|
+
/** Tri-state validity: valid / invalid / neutral while pending or disabled. */
|
|
907
|
+
readonly validState: Signal<boolean | null>;
|
|
908
|
+
/** Explicit control errors merged with same-host Angular Forms errors. */
|
|
909
|
+
readonly errorsState: Signal<readonly RdxValidationError[]>;
|
|
875
910
|
/** Whether the control has been touched (reflects the `touched` model). */
|
|
876
911
|
readonly touchedState: Signal<boolean>;
|
|
877
912
|
/** Whether the value changed from its initial value — external `dirty` OR internal tracking. */
|
|
@@ -880,6 +915,10 @@ interface RdxFormUiState {
|
|
|
880
915
|
markAsTouched(): void;
|
|
881
916
|
/** Flag the control dirty after a value change (feeds {@link dirtyState}). */
|
|
882
917
|
markDirty(): void;
|
|
918
|
+
/** Clear control-owned touched/dirty state when a form resets it. */
|
|
919
|
+
resetInteractionState?(): void;
|
|
920
|
+
/** Clear only control-owned dirty state when the form marks the field pristine. */
|
|
921
|
+
resetDirtyState?(): void;
|
|
883
922
|
}
|
|
884
923
|
/** Minimal `ControlValueAccessor` surface the form-UI state bridges for the dual (Reactive/template) path. */
|
|
885
924
|
interface RdxFormUiTouchTarget {
|
|
@@ -888,20 +927,24 @@ interface RdxFormUiTouchTarget {
|
|
|
888
927
|
/** Inputs a control passes to {@link createFormUiState} — its own `FormUiControl` signals. */
|
|
889
928
|
interface RdxFormUiStateOptions {
|
|
890
929
|
readonly invalid: Signal<boolean>;
|
|
930
|
+
/** Optional for backwards compatibility with custom controls authored before pending support. */
|
|
931
|
+
readonly pending?: Signal<boolean>;
|
|
891
932
|
readonly errors: Signal<readonly RdxValidationError[]>;
|
|
892
933
|
readonly touched: ModelSignal<boolean>;
|
|
893
934
|
readonly touch: OutputEmitterRef<void>;
|
|
894
935
|
readonly dirty: Signal<boolean>;
|
|
936
|
+
/** Same-host Reactive/template-driven form interaction state, when one is present. */
|
|
937
|
+
readonly ngControlState?: RdxNgControlState | null;
|
|
895
938
|
/**
|
|
896
939
|
* The control's `ControlValueAccessor`, if it has one (dual controls — switch, number-field, …).
|
|
897
|
-
* Omit or pass `null` for Signal-Forms-only controls without a CVA (e.g.
|
|
940
|
+
* Omit or pass `null` for Signal-Forms-only controls without a CVA (e.g. date-field).
|
|
898
941
|
*/
|
|
899
942
|
readonly cva?: RdxFormUiTouchTarget | null;
|
|
900
943
|
}
|
|
901
944
|
/**
|
|
902
945
|
* Builds the shared form-UI state and its mutators from a control's input signals, removing the
|
|
903
|
-
* per-control copy-paste of the
|
|
904
|
-
*
|
|
946
|
+
* per-control copy-paste of the validation/interaction computeds and the `markAsTouched`/`markDirty`
|
|
947
|
+
* logic.
|
|
905
948
|
*
|
|
906
949
|
* **Why the inputs stay on the control (not in here):** Angular's compiler only discovers
|
|
907
950
|
* `input()`/`model()` declared as field initializers, and Signal Forms binds form-written state
|
|
@@ -919,6 +962,8 @@ declare function createFormUiState(options: RdxFormUiStateOptions): RdxFormUiSta
|
|
|
919
962
|
*/
|
|
920
963
|
interface RdxFormUiStateContext {
|
|
921
964
|
invalidState: Signal<boolean>;
|
|
965
|
+
pendingState: Signal<boolean>;
|
|
966
|
+
validState: Signal<boolean | null>;
|
|
922
967
|
touchedState: Signal<boolean>;
|
|
923
968
|
dirtyState: Signal<boolean>;
|
|
924
969
|
markAsTouched: () => void;
|
|
@@ -939,14 +984,14 @@ declare const RDX_FIELD_VALIDITY: InjectionToken<Signal<boolean | null>>;
|
|
|
939
984
|
/**
|
|
940
985
|
* Tri-state display validity: when inside a `Field` the field's gated `validState` is the **single
|
|
941
986
|
* source** (the control reflects it, including its `validationMode` neutral state); standalone, the
|
|
942
|
-
* control's own
|
|
987
|
+
* control's own tri-state validity (pending is neutral).
|
|
943
988
|
*
|
|
944
989
|
* **Contract:** inside a `Field` a control's own `invalid` / `errors` inputs are **not** displayed — the
|
|
945
990
|
* Field owns displayed validity. Drive validity through the Field instead: bind `rdxSignalField`
|
|
946
991
|
* (Signal Forms), or set `[invalid]` on `rdxFieldRoot`. The control's own `invalid`/`errors` are for
|
|
947
992
|
* standalone use.
|
|
948
993
|
*/
|
|
949
|
-
declare function resolveDisplayValid(fieldValidity: Signal<boolean | null> | null, ownInvalid: Signal<boolean>): boolean | null;
|
|
994
|
+
declare function resolveDisplayValid(fieldValidity: Signal<boolean | null> | null, ownInvalid: Signal<boolean>, ownPending?: Signal<boolean>): boolean | null;
|
|
950
995
|
/**
|
|
951
996
|
* Provide a control's {@link RdxFormUiState} on its host element so {@link RdxFormUiStateHost} can
|
|
952
997
|
* reflect it. Pair with `hostDirectives: [RdxFormUiStateHost]`:
|
|
@@ -985,7 +1030,7 @@ declare class RdxFormUiStateHost {
|
|
|
985
1030
|
}
|
|
986
1031
|
/**
|
|
987
1032
|
* Abstract base that declares the optional `FormUiControl` state inputs
|
|
988
|
-
* (`invalid`/`errors`/`touched`/`dirty` + the `touch` output) once and builds the control's
|
|
1033
|
+
* (`invalid`/`pending`/`errors`/`touched`/`dirty` + the `touch` output) once and builds the control's
|
|
989
1034
|
* {@link RdxFormUiState} from them, so a control directive can inherit the whole surface with a
|
|
990
1035
|
* single `extends` instead of re-declaring it.
|
|
991
1036
|
*
|
|
@@ -1002,6 +1047,8 @@ declare class RdxFormUiStateHost {
|
|
|
1002
1047
|
declare abstract class RdxFormUiControlBase {
|
|
1003
1048
|
/** Whether the control is invalid. A non-empty {@link errors} list also marks it invalid. */
|
|
1004
1049
|
readonly invalid: i0.InputSignalWithTransform<boolean, BooleanInput>;
|
|
1050
|
+
/** Whether async validation is pending. Pending controls publish neither `data-valid` nor `data-invalid`. */
|
|
1051
|
+
readonly pending: i0.InputSignalWithTransform<boolean, BooleanInput>;
|
|
1005
1052
|
/** Whether the control has been touched. A `model()` so Signal Forms can write it; set on blur/focus-out. */
|
|
1006
1053
|
readonly touched: ModelSignal<boolean>;
|
|
1007
1054
|
/** Whether the value changed from its initial value. Merged with internal tracking. */
|
|
@@ -1010,8 +1057,12 @@ declare abstract class RdxFormUiControlBase {
|
|
|
1010
1057
|
readonly errors: i0.InputSignal<readonly RdxValidationError[]>;
|
|
1011
1058
|
/** Emits when the control is touched, notifying Signal Forms (stable Angular 22 contract). */
|
|
1012
1059
|
readonly touch: OutputEmitterRef<void>;
|
|
1060
|
+
private readonly ngControlState;
|
|
1013
1061
|
/** The shared form-UI state derived from the inputs above. Call `formUi.markDirty()` on value change. */
|
|
1014
1062
|
readonly formUi: RdxFormUiState;
|
|
1063
|
+
/** Validation errors from the control inputs and a same-host Reactive/template-driven form control. */
|
|
1064
|
+
readonly validationErrors: Signal<readonly RdxValidationError[]>;
|
|
1065
|
+
constructor();
|
|
1015
1066
|
/** The enclosing Field's tri-state display validity, if any. `protected` so a control whose own
|
|
1016
1067
|
* invalidity is richer than `formUi.invalidState` (e.g. date/time-field add a parse check) can build
|
|
1017
1068
|
* its own `displayValid` from it. */
|
|
@@ -1019,19 +1070,26 @@ declare abstract class RdxFormUiControlBase {
|
|
|
1019
1070
|
/**
|
|
1020
1071
|
* Tri-state *displayed* validity for controls that bind their own host attributes (radio, switch,
|
|
1021
1072
|
* number-field): the enclosing Field's gated state when inside a `rdxFieldRoot`, else this control's
|
|
1022
|
-
* own
|
|
1073
|
+
* own validity (`formUi.pendingState` is neutral; otherwise `formUi.invalidState` is binary). Bind
|
|
1074
|
+
* `data-valid`/`data-invalid`/`aria-invalid` to
|
|
1023
1075
|
* this so a neutral field shows neither. Controls whose `invalidState` is richer than
|
|
1024
|
-
* `formUi.invalidState` override this with
|
|
1076
|
+
* `formUi.invalidState` override this with
|
|
1077
|
+
* `resolveDisplayValid(this.fieldValidity, this.invalidState, this.formUi.pendingState)`.
|
|
1025
1078
|
*/
|
|
1026
1079
|
readonly displayValid: Signal<boolean | null>;
|
|
1027
1080
|
/**
|
|
1028
1081
|
* Override to bridge the control's `ControlValueAccessor` into `markAsTouched` (dual controls —
|
|
1029
1082
|
* return `injectControlValueAccessor()` or a `{ markAsTouched }` adapter). Default: no CVA
|
|
1030
|
-
* (Signal-Forms-only controls such as
|
|
1083
|
+
* (Signal-Forms-only controls such as date-field).
|
|
1031
1084
|
*/
|
|
1032
1085
|
protected formUiTouchTarget(): RdxFormUiTouchTarget | null;
|
|
1086
|
+
/**
|
|
1087
|
+
* Reset control-owned interaction state. Angular Signal Forms calls this optional custom-control
|
|
1088
|
+
* hook from `FieldState.reset()` after restoring the field value.
|
|
1089
|
+
*/
|
|
1090
|
+
reset(): void;
|
|
1033
1091
|
static ɵfac: i0.ɵɵFactoryDeclaration<RdxFormUiControlBase, never>;
|
|
1034
|
-
static ɵdir: i0.ɵɵDirectiveDeclaration<RdxFormUiControlBase, never, never, { "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "dirty": { "alias": "dirty"; "required": false; "isSignal": true; }; "errors": { "alias": "errors"; "required": false; "isSignal": true; }; }, { "touched": "touchedChange"; "touch": "touch"; }, never, never, true, never>;
|
|
1092
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<RdxFormUiControlBase, never, never, { "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "pending": { "alias": "pending"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "dirty": { "alias": "dirty"; "required": false; "isSignal": true; }; "errors": { "alias": "errors"; "required": false; "isSignal": true; }; }, { "touched": "touchedChange"; "touch": "touch"; }, never, never, true, never>;
|
|
1035
1093
|
}
|
|
1036
1094
|
|
|
1037
1095
|
/**
|
|
@@ -2056,5 +2114,5 @@ declare enum RdxPositionAlign {
|
|
|
2056
2114
|
End = "end"
|
|
2057
2115
|
}
|
|
2058
2116
|
|
|
2059
|
-
export { A, ALT, ARROW_DOWN, ARROW_LEFT, ARROW_RIGHT, ARROW_UP, ASTERISK, BACKSPACE, CAPS_LOCK, CONTROL, CTRL, DELETE, DOCS_BASE_URL, END, ENTER, ESCAPE, F1, F10, F11, F12, F2, F3, F4, F5, F6, F7, F8, F9, HOME, META, P, PAGE_DOWN, PAGE_UP, RDX_DEFAULT_VALIDATION_MODE, RDX_FIELD_VALIDITY, RDX_FLOATING_REGISTRATION, RDX_FLOATING_ROOT_CONTEXT, RDX_FLOATING_TREE, RDX_FORM_UI_STATE, RDX_INTERNAL_BACKDROP_ATTR, RDX_SCROLL_LOCKED_ATTR, RdxControlValueAccessor, RdxFloatingNode, RdxFloatingNodeRegistration, RdxFloatingRegistrationContext, RdxFloatingRootContext, RdxFloatingTree, RdxFormUiControlBase, RdxFormUiStateHost, RdxIdGenerator, RdxLiveAnnouncer, RdxPositionAlign, RdxPositionSide, RdxTriggerRegistry, SHIFT, SPACE, SPACE_CODE, TAB, TIME_GRANULARITIES, a, areAllDaysBetweenValid, clamp, createCancelableChangeEventDetails, createContent, createContext, createFloatingEvents, createFloatingRootContext, createFormUiState, createFormatter, createMonth, createMonths, docsUrl, elementSize, formUiStateContext, getActiveElement, getDaysBetween, getDaysInMonth, getDefaultDate, getDefaultTime, getLastFirstDayOfWeek, getMaxTransitionDuration, getNextLastDayOfWeek, getOptsByGranularity, getPlaceholder, getSegmentElements, getWeekNumber, handleAndDispatchCustomEvent, handleCalendarInitialFocus, hasTime, initializeSegmentValues, injectControlValueAccessor, injectDocument, injectFloatingRootContext, injectId, isAcceptableSegmentKey, isAfter, isAfterOrSame, isBefore, isBeforeOrSame, isBetween, isBetweenInclusive, isCalendarDateTime, isEqual, isItemEqualToValue, isNullish, isNumberString, isSegmentNavigationKey, isValidationRevealed, isZonedDateTime, itemToStringLabel, itemToStringValue, j, k, n, normalizeDateStep, normalizeHour12, normalizeHourCycle, p, provideExistingToken, provideFloatingRegistration, provideFloatingRootContext, provideFloatingTree, provideFormUiState, provideValueAccessor, rdxCheckLabelElement, rdxCheckTriggerElement, rdxDevError, rdxDevWarning, resetRdxDevWarnings, resizeEffect, resolveDisplayValid, resolveFloatingTree, roundToStepPrecision, segmentBuilders, setupInternalBackdrop, snapValueToStep, syncSegmentValues, syncTimeSegmentValues, toDate, useAnchoredScrollLock, useArrowNavigation, useDateField, useFilter, useGraceArea, useListHighlight, usePointerDrag, useScrollLock, useTransitionStatus, watch };
|
|
2060
|
-
export type { AcceptableValue, AnyExceptLiteral, AriaLivePoliteness, BooleanInput, CreateMonthProps, DataOrientation, DateAndTimeSegmentObj, DateFormatterOptions, DateMatcher, DateRange, DateSegmentObj, DateSegmentPart, DateStep, DayPeriod, Direction, EditableSegmentPart, FilterPredicates, Formatter, Granularity, HourCycle, InjectContext, ItemValueComparator, ListHighlight, Month, NonEditableSegmentPart, Nullable, NumberInput, PlaceholderMap, RdxAnchoredScrollLockOptions, RdxCancelableChangeEventDetails, RdxCancelableChangeEventTransaction, RdxFloatingEventMap, RdxFloatingEvents, RdxFloatingLifecycle, RdxFloatingNodeInit, RdxFloatingParentOverride, RdxFloatingRegistrationReader, RdxFloatingRegistrationStatus, RdxFloatingRootContextEventMap, RdxFloatingRootContextInit, RdxFormCheckboxControl, RdxFormStateInput, RdxFormUiControl, RdxFormUiState, RdxFormUiStateContext, RdxFormUiStateOptions, RdxFormUiTouchTarget, RdxFormValueControl, RdxInternalBackdropOptions, RdxPointerDragHandlers, RdxScrollLockOptions, RdxTransitionStatus, RdxTransitionStatusRef, RdxValidationError, RdxValidationInteraction, RdxValidationMode, SafeFunction, SegmentContentObj, SegmentPart, SegmentValueObj, TimeGranularity, TimeSegmentObj, TimeSegmentPart, TimeValue, UseDateFieldProps, UseFilterOptions, UseListHighlightOptions };
|
|
2117
|
+
export { A, ALT, ARROW_DOWN, ARROW_LEFT, ARROW_RIGHT, ARROW_UP, ASTERISK, BACKSPACE, CAPS_LOCK, CONTROL, CTRL, DELETE, DOCS_BASE_URL, END, ENTER, ESCAPE, F1, F10, F11, F12, F2, F3, F4, F5, F6, F7, F8, F9, HOME, META, P, PAGE_DOWN, PAGE_UP, RDX_DEFAULT_VALIDATION_MODE, RDX_FIELD_VALIDITY, RDX_FLOATING_REGISTRATION, RDX_FLOATING_ROOT_CONTEXT, RDX_FLOATING_TREE, RDX_FORM_UI_STATE, RDX_INTERNAL_BACKDROP_ATTR, RDX_SCROLL_LOCKED_ATTR, RdxControlValueAccessor, RdxFloatingNode, RdxFloatingNodeRegistration, RdxFloatingRegistrationContext, RdxFloatingRootContext, RdxFloatingTree, RdxFormUiControlBase, RdxFormUiStateHost, RdxIdGenerator, RdxLiveAnnouncer, RdxPositionAlign, RdxPositionSide, RdxTriggerRegistry, SHIFT, SPACE, SPACE_CODE, TAB, TIME_GRANULARITIES, a, areAllDaysBetweenValid, clamp, createCancelableChangeEventDetails, createContent, createContext, createFloatingEvents, createFloatingRootContext, createFormUiState, createFormatter, createMonth, createMonths, docsUrl, elementSize, formUiStateContext, getActiveElement, getDaysBetween, getDaysInMonth, getDefaultDate, getDefaultTime, getLastFirstDayOfWeek, getMaxTransitionDuration, getNextLastDayOfWeek, getOptsByGranularity, getPlaceholder, getSegmentElements, getWeekNumber, handleAndDispatchCustomEvent, handleCalendarInitialFocus, hasTime, initializeSegmentValues, injectControlValueAccessor, injectDocument, injectFloatingRootContext, injectId, injectNgControlState, isAcceptableSegmentKey, isAfter, isAfterOrSame, isBefore, isBeforeOrSame, isBetween, isBetweenInclusive, isCalendarDateTime, isEqual, isItemEqualToValue, isNullish, isNumberString, isSegmentNavigationKey, isValidationRevealed, isZonedDateTime, itemToStringLabel, itemToStringValue, j, k, n, normalizeDateStep, normalizeHour12, normalizeHourCycle, p, provideExistingToken, provideFloatingRegistration, provideFloatingRootContext, provideFloatingTree, provideFormUiState, provideValueAccessor, rdxCheckLabelElement, rdxCheckTriggerElement, rdxDevError, rdxDevWarning, resetRdxDevWarnings, resizeEffect, resolveDisplayValid, resolveFloatingTree, roundToStepPrecision, segmentBuilders, setupInternalBackdrop, snapValueToStep, syncSegmentValues, syncTimeSegmentValues, toDate, useAnchoredScrollLock, useArrowNavigation, useDateField, useFilter, useGraceArea, useListHighlight, usePointerDrag, useScrollLock, useTransitionStatus, watch };
|
|
2118
|
+
export type { AcceptableValue, AnyExceptLiteral, AriaLivePoliteness, BooleanInput, CreateMonthProps, DataOrientation, DateAndTimeSegmentObj, DateFormatterOptions, DateMatcher, DateRange, DateSegmentObj, DateSegmentPart, DateStep, DayPeriod, Direction, EditableSegmentPart, FilterPredicates, Formatter, Granularity, HourCycle, InjectContext, ItemValueComparator, ListHighlight, Month, NonEditableSegmentPart, Nullable, NumberInput, PlaceholderMap, RdxAnchoredScrollLockOptions, RdxCancelableChangeEventDetails, RdxCancelableChangeEventTransaction, RdxFloatingEventMap, RdxFloatingEvents, RdxFloatingLifecycle, RdxFloatingNodeInit, RdxFloatingParentOverride, RdxFloatingRegistrationReader, RdxFloatingRegistrationStatus, RdxFloatingRootContextEventMap, RdxFloatingRootContextInit, RdxFormCheckboxControl, RdxFormStateInput, RdxFormUiControl, RdxFormUiState, RdxFormUiStateContext, RdxFormUiStateOptions, RdxFormUiTouchTarget, RdxFormValueControl, RdxInternalBackdropOptions, RdxNgControlState, RdxPointerDragHandlers, RdxScrollLockOptions, RdxTransitionStatus, RdxTransitionStatusRef, RdxValidationError, RdxValidationInteraction, RdxValidationMode, SafeFunction, SegmentContentObj, SegmentPart, SegmentValueObj, TimeGranularity, TimeSegmentObj, TimeSegmentPart, TimeValue, UseDateFieldProps, UseFilterOptions, UseListHighlightOptions };
|