@radix-ng/primitives 1.0.3 → 1.0.5
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/fesm2022/radix-ng-primitives-accordion.mjs +77 -80
- package/fesm2022/radix-ng-primitives-accordion.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-checkbox.mjs +6 -7
- package/fesm2022/radix-ng-primitives-checkbox.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-composite.mjs +27 -3
- package/fesm2022/radix-ng-primitives-composite.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-radio.mjs +135 -149
- package/fesm2022/radix-ng-primitives-radio.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-switch.mjs +24 -10
- package/fesm2022/radix-ng-primitives-switch.mjs.map +1 -1
- package/package.json +1 -1
- package/types/radix-ng-primitives-accordion.d.ts +92 -89
- package/types/radix-ng-primitives-checkbox.d.ts +3 -4
- package/types/radix-ng-primitives-composite.d.ts +2 -0
- package/types/radix-ng-primitives-radio.d.ts +100 -65
- package/types/radix-ng-primitives-switch.d.ts +3 -2
|
@@ -1,83 +1,33 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import {
|
|
2
|
+
import { InputSignalWithTransform, InputSignal, ModelSignal, Signal, WritableSignal, ElementRef } from '@angular/core';
|
|
3
3
|
import * as _radix_ng_primitives_accordion from '@radix-ng/primitives/accordion';
|
|
4
|
-
import * as i1 from '@radix-ng/primitives/collapsible';
|
|
5
4
|
import * as _radix_ng_primitives_core from '@radix-ng/primitives/core';
|
|
6
|
-
import { BooleanInput, DataOrientation, AcceptableValue } from '@radix-ng/primitives/core';
|
|
7
|
-
import * as
|
|
8
|
-
|
|
9
|
-
declare class RdxAccordionContentDirective {
|
|
10
|
-
protected readonly rootContext: _radix_ng_primitives_accordion.AccordionRootContext;
|
|
11
|
-
protected readonly itemContext: _radix_ng_primitives_accordion.AccordionItemContext;
|
|
12
|
-
static ɵfac: i0.ɵɵFactoryDeclaration<RdxAccordionContentDirective, never>;
|
|
13
|
-
static ɵdir: i0.ɵɵDirectiveDeclaration<RdxAccordionContentDirective, "[rdxAccordionContent]", never, {}, {}, never, never, true, [{ directive: typeof i1.RdxCollapsiblePanelDirective; inputs: {}; outputs: {}; }]>;
|
|
14
|
-
}
|
|
5
|
+
import { BooleanInput, DataOrientation, AcceptableValue, RdxCancelableChangeEventDetails } from '@radix-ng/primitives/core';
|
|
6
|
+
import * as i1 from '@radix-ng/primitives/composite';
|
|
7
|
+
import * as i1$1 from '@radix-ng/primitives/collapsible';
|
|
15
8
|
|
|
16
9
|
declare class RdxAccordionHeaderDirective {
|
|
17
|
-
protected readonly rootContext: _radix_ng_primitives_accordion.AccordionRootContext;
|
|
18
10
|
protected readonly itemContext: _radix_ng_primitives_accordion.AccordionItemContext;
|
|
19
11
|
static ɵfac: i0.ɵɵFactoryDeclaration<RdxAccordionHeaderDirective, never>;
|
|
20
12
|
static ɵdir: i0.ɵɵDirectiveDeclaration<RdxAccordionHeaderDirective, "[rdxAccordionHeader]", never, {}, {}, never, never, true, never>;
|
|
21
13
|
}
|
|
22
14
|
|
|
23
|
-
|
|
24
|
-
type
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
currentElement: ElementRef<HTMLElement>;
|
|
31
|
-
value: Signal<string | undefined>;
|
|
32
|
-
updateOpen: () => void;
|
|
33
|
-
index: Signal<number>;
|
|
34
|
-
};
|
|
35
|
-
declare const injectAccordionItemContext: _radix_ng_primitives_core.InjectContext<AccordionItemContext>;
|
|
36
|
-
declare const provideAccordionItemContext: (useFactory: () => AccordionItemContext) => i0.Provider;
|
|
37
|
-
/**
|
|
38
|
-
* @group Components
|
|
39
|
-
*/
|
|
40
|
-
declare class RdxAccordionItemDirective {
|
|
41
|
-
readonly elementRef: ElementRef<HTMLElement>;
|
|
42
|
-
private readonly collapsibleContext;
|
|
43
|
-
private readonly listItem;
|
|
44
|
-
protected readonly rootContext: _radix_ng_primitives_accordion.AccordionRootContext;
|
|
45
|
-
/**
|
|
46
|
-
* A string value for the accordion item. All items within an accordion should use a unique value.
|
|
47
|
-
* @group Props
|
|
48
|
-
*/
|
|
49
|
-
readonly value: i0.InputSignal<string | undefined>;
|
|
50
|
-
/**
|
|
51
|
-
* Whether or not an accordion item is disabled from user interaction.
|
|
52
|
-
* When `true`, prevents the user from interacting with the item.
|
|
53
|
-
* @group Props
|
|
54
|
-
*/
|
|
55
|
-
readonly disabled: i0.InputSignalWithTransform<boolean, BooleanInput>;
|
|
56
|
-
/**
|
|
57
|
-
* Event handler called when the panel open state changes.
|
|
58
|
-
* @group Emits
|
|
59
|
-
*/
|
|
60
|
-
readonly onOpenChange: i0.OutputEmitterRef<boolean>;
|
|
61
|
-
readonly isDisabled: Signal<boolean>;
|
|
62
|
-
readonly open: Signal<boolean>;
|
|
63
|
-
readonly dataState: Signal<RdxAccordionItemState>;
|
|
64
|
-
/** Set by the trigger; links the content's `aria-labelledby` to the trigger `id`. */
|
|
65
|
-
readonly triggerId: WritableSignal<string>;
|
|
66
|
-
readonly index: Signal<number>;
|
|
67
|
-
constructor();
|
|
68
|
-
updateOpen: () => void;
|
|
69
|
-
static ɵfac: i0.ɵɵFactoryDeclaration<RdxAccordionItemDirective, never>;
|
|
70
|
-
static ɵdir: i0.ɵɵDirectiveDeclaration<RdxAccordionItemDirective, "[rdxAccordionItem]", ["rdxAccordionItem"], { "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "onOpenChange": "onOpenChange"; }, never, never, true, [{ directive: typeof i1.RdxCollapsibleRootDirective; inputs: { "disabled": "disabled"; "open": "open"; }; outputs: {}; }, { directive: typeof i2.RdxCompositeListItem; inputs: {}; outputs: {}; }]>;
|
|
15
|
+
/** The reason an accordion value change was requested. */
|
|
16
|
+
type RdxAccordionValueChangeReason = 'trigger-press' | 'none';
|
|
17
|
+
type RdxAccordionValueChangeEventDetails = RdxCancelableChangeEventDetails<RdxAccordionValueChangeReason>;
|
|
18
|
+
/** Payload of {@link RdxAccordionRootDirective.onValueChange}, mirroring Base UI's `(value, eventDetails)`. */
|
|
19
|
+
interface RdxAccordionValueChangeEvent {
|
|
20
|
+
value: AcceptableValue | AcceptableValue[] | undefined;
|
|
21
|
+
eventDetails: RdxAccordionValueChangeEventDetails;
|
|
71
22
|
}
|
|
72
|
-
|
|
73
23
|
type AccordionRootContext = {
|
|
74
24
|
disabled: InputSignalWithTransform<boolean, BooleanInput>;
|
|
75
25
|
orientation: InputSignal<DataOrientation>;
|
|
76
26
|
value: ModelSignal<AcceptableValue | AcceptableValue[] | undefined>;
|
|
77
|
-
collapsible: Signal<boolean>;
|
|
78
27
|
isSingle: Signal<boolean>;
|
|
79
28
|
keepMounted: InputSignalWithTransform<boolean, BooleanInput>;
|
|
80
|
-
|
|
29
|
+
hiddenUntilFound: InputSignalWithTransform<boolean, BooleanInput>;
|
|
30
|
+
changeModelValue: (value: string, event?: Event) => void;
|
|
81
31
|
};
|
|
82
32
|
declare const injectAccordionRootContext: _radix_ng_primitives_core.InjectContext<AccordionRootContext>;
|
|
83
33
|
declare const provideAccordionRootContext: (useFactory: () => AccordionRootContext) => i0.Provider;
|
|
@@ -85,7 +35,6 @@ declare const provideAccordionRootContext: (useFactory: () => AccordionRootConte
|
|
|
85
35
|
* @group Components
|
|
86
36
|
*/
|
|
87
37
|
declare class RdxAccordionRootDirective {
|
|
88
|
-
readonly id: InputSignal<string>;
|
|
89
38
|
/** Whether the Accordion is disabled.
|
|
90
39
|
* @defaultValue false
|
|
91
40
|
* @group Props
|
|
@@ -116,23 +65,8 @@ declare class RdxAccordionRootDirective {
|
|
|
116
65
|
*/
|
|
117
66
|
readonly value: ModelSignal<AcceptableValue | AcceptableValue[] | undefined>;
|
|
118
67
|
/**
|
|
119
|
-
*
|
|
120
|
-
*
|
|
121
|
-
*
|
|
122
|
-
* @defaultValue false
|
|
123
|
-
* @group Props
|
|
124
|
-
*/
|
|
125
|
-
readonly collapsible: InputSignalWithTransform<boolean, BooleanInput>;
|
|
126
|
-
/**
|
|
127
|
-
* Determines whether a "single" or "multiple" items can be selected at a time.
|
|
128
|
-
*
|
|
129
|
-
* @defaultValue 'single'
|
|
130
|
-
* @group Props
|
|
131
|
-
*/
|
|
132
|
-
readonly type: InputSignal<"multiple" | "single">;
|
|
133
|
-
/**
|
|
134
|
-
* Allow multiple panels to be open simultaneously.
|
|
135
|
-
* Takes precedence over `type` when `true`.
|
|
68
|
+
* Allow multiple panels to be open simultaneously. In single mode an open item can always be
|
|
69
|
+
* closed by clicking its trigger again (Base UI parity — there is no separate `collapsible`).
|
|
136
70
|
*
|
|
137
71
|
* @defaultValue false
|
|
138
72
|
* @group Props
|
|
@@ -156,33 +90,102 @@ declare class RdxAccordionRootDirective {
|
|
|
156
90
|
*/
|
|
157
91
|
readonly keepMounted: InputSignalWithTransform<boolean, BooleanInput>;
|
|
158
92
|
/**
|
|
159
|
-
*
|
|
93
|
+
* Allow collapsed panels to remain mounted (but hidden) so the browser's in-page search
|
|
94
|
+
* can find and reveal them. Mirrors Base UI's `hiddenUntilFound`.
|
|
95
|
+
*
|
|
96
|
+
* @defaultValue false
|
|
97
|
+
* @group Props
|
|
98
|
+
*/
|
|
99
|
+
readonly hiddenUntilFound: InputSignalWithTransform<boolean, BooleanInput>;
|
|
100
|
+
/**
|
|
101
|
+
* Event handler called when the expanded value changes. Emits the next value plus a cancelable
|
|
102
|
+
* `eventDetails` (Base UI parity); call `eventDetails.cancel()` to reject the change.
|
|
160
103
|
* @group Emits
|
|
161
104
|
*/
|
|
162
|
-
readonly onValueChange: i0.OutputEmitterRef<
|
|
105
|
+
readonly onValueChange: i0.OutputEmitterRef<RdxAccordionValueChangeEvent>;
|
|
163
106
|
readonly isSingle: Signal<boolean>;
|
|
164
107
|
constructor();
|
|
165
|
-
changeModelValue: (newValue: string) => void;
|
|
108
|
+
changeModelValue: (newValue: string, event?: Event) => void;
|
|
166
109
|
private isValueEqualOrExist;
|
|
167
110
|
private isEqual;
|
|
168
111
|
static ɵfac: i0.ɵɵFactoryDeclaration<RdxAccordionRootDirective, never>;
|
|
169
|
-
static ɵdir: i0.ɵɵDirectiveDeclaration<RdxAccordionRootDirective, "[rdxAccordionRoot]", ["rdxAccordionRoot"], { "
|
|
112
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<RdxAccordionRootDirective, "[rdxAccordionRoot]", ["rdxAccordionRoot"], { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "defaultValue": { "alias": "defaultValue"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "loopFocus": { "alias": "loopFocus"; "required": false; "isSignal": true; }; "keepMounted": { "alias": "keepMounted"; "required": false; "isSignal": true; }; "hiddenUntilFound": { "alias": "hiddenUntilFound"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "onValueChange": "onValueChange"; }, never, never, true, [{ directive: typeof i1.RdxCompositeList; inputs: {}; outputs: {}; }]>;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
/** Payload of {@link RdxAccordionItemDirective.onOpenChange}, mirroring Base UI's `(open, eventDetails)`. */
|
|
116
|
+
interface RdxAccordionItemOpenChangeEvent {
|
|
117
|
+
open: boolean;
|
|
118
|
+
eventDetails: RdxAccordionValueChangeEventDetails;
|
|
119
|
+
}
|
|
120
|
+
type AccordionItemContext = {
|
|
121
|
+
open: Signal<boolean>;
|
|
122
|
+
disabled: Signal<boolean>;
|
|
123
|
+
triggerId: WritableSignal<string>;
|
|
124
|
+
dataDisabled: Signal<boolean>;
|
|
125
|
+
currentElement: ElementRef<HTMLElement>;
|
|
126
|
+
value: Signal<string | undefined>;
|
|
127
|
+
updateOpen: () => void;
|
|
128
|
+
index: Signal<number>;
|
|
129
|
+
};
|
|
130
|
+
declare const injectAccordionItemContext: _radix_ng_primitives_core.InjectContext<AccordionItemContext>;
|
|
131
|
+
declare const provideAccordionItemContext: (useFactory: () => AccordionItemContext) => i0.Provider;
|
|
132
|
+
/**
|
|
133
|
+
* @group Components
|
|
134
|
+
*/
|
|
135
|
+
declare class RdxAccordionItemDirective {
|
|
136
|
+
readonly elementRef: ElementRef<HTMLElement>;
|
|
137
|
+
private readonly collapsibleContext;
|
|
138
|
+
private readonly listItem;
|
|
139
|
+
protected readonly rootContext: _radix_ng_primitives_accordion.AccordionRootContext;
|
|
140
|
+
/**
|
|
141
|
+
* A string value for the accordion item. All items within an accordion should use a unique value.
|
|
142
|
+
* @group Props
|
|
143
|
+
*/
|
|
144
|
+
readonly value: i0.InputSignal<string | undefined>;
|
|
145
|
+
/**
|
|
146
|
+
* Whether or not an accordion item is disabled from user interaction.
|
|
147
|
+
* When `true`, prevents the user from interacting with the item.
|
|
148
|
+
* @group Props
|
|
149
|
+
*/
|
|
150
|
+
readonly disabled: i0.InputSignalWithTransform<boolean, BooleanInput>;
|
|
151
|
+
/**
|
|
152
|
+
* Event handler called when the panel open state changes. Emits `{ open, eventDetails }`
|
|
153
|
+
* (Base UI parity).
|
|
154
|
+
* @group Emits
|
|
155
|
+
*/
|
|
156
|
+
readonly onOpenChange: i0.OutputEmitterRef<RdxAccordionItemOpenChangeEvent>;
|
|
157
|
+
readonly isDisabled: Signal<boolean>;
|
|
158
|
+
readonly open: Signal<boolean>;
|
|
159
|
+
/** Set by the trigger; links the content's `aria-labelledby` to the trigger `id`. */
|
|
160
|
+
readonly triggerId: WritableSignal<string>;
|
|
161
|
+
readonly index: Signal<number>;
|
|
162
|
+
constructor();
|
|
163
|
+
updateOpen: () => void;
|
|
164
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<RdxAccordionItemDirective, never>;
|
|
165
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<RdxAccordionItemDirective, "[rdxAccordionItem]", ["rdxAccordionItem"], { "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "onOpenChange": "onOpenChange"; }, never, never, true, [{ directive: typeof i1$1.RdxCollapsibleRootDirective; inputs: { "disabled": "disabled"; "open": "open"; }; outputs: {}; }, { directive: typeof i1.RdxCompositeListItem; inputs: {}; outputs: {}; }]>;
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
declare class RdxAccordionPanelDirective {
|
|
169
|
+
protected readonly rootContext: _radix_ng_primitives_accordion.AccordionRootContext;
|
|
170
|
+
protected readonly itemContext: _radix_ng_primitives_accordion.AccordionItemContext;
|
|
171
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<RdxAccordionPanelDirective, never>;
|
|
172
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<RdxAccordionPanelDirective, "[rdxAccordionPanel]", never, {}, {}, never, never, true, [{ directive: typeof i1$1.RdxCollapsiblePanelDirective; inputs: {}; outputs: {}; }]>;
|
|
170
173
|
}
|
|
171
174
|
|
|
172
175
|
declare class RdxAccordionTriggerDirective {
|
|
173
176
|
protected readonly rootContext: _radix_ng_primitives_accordion.AccordionRootContext;
|
|
174
177
|
protected readonly itemContext: _radix_ng_primitives_accordion.AccordionItemContext;
|
|
175
178
|
constructor();
|
|
176
|
-
changeItem(): void;
|
|
179
|
+
changeItem(event: Event): void;
|
|
177
180
|
static ɵfac: i0.ɵɵFactoryDeclaration<RdxAccordionTriggerDirective, never>;
|
|
178
181
|
static ɵdir: i0.ɵɵDirectiveDeclaration<RdxAccordionTriggerDirective, "[rdxAccordionTrigger]", never, {}, {}, never, never, true, never>;
|
|
179
182
|
}
|
|
180
183
|
|
|
181
184
|
declare class RdxAccordionModule {
|
|
182
185
|
static ɵfac: i0.ɵɵFactoryDeclaration<RdxAccordionModule, never>;
|
|
183
|
-
static ɵmod: i0.ɵɵNgModuleDeclaration<RdxAccordionModule, never, [typeof
|
|
186
|
+
static ɵmod: i0.ɵɵNgModuleDeclaration<RdxAccordionModule, never, [typeof RdxAccordionHeaderDirective, typeof RdxAccordionItemDirective, typeof RdxAccordionPanelDirective, typeof RdxAccordionRootDirective, typeof RdxAccordionTriggerDirective], [typeof RdxAccordionHeaderDirective, typeof RdxAccordionItemDirective, typeof RdxAccordionPanelDirective, typeof RdxAccordionRootDirective, typeof RdxAccordionTriggerDirective]>;
|
|
184
187
|
static ɵinj: i0.ɵɵInjectorDeclaration<RdxAccordionModule>;
|
|
185
188
|
}
|
|
186
189
|
|
|
187
|
-
export {
|
|
188
|
-
export type { AccordionItemContext, AccordionRootContext,
|
|
190
|
+
export { RdxAccordionHeaderDirective, RdxAccordionItemDirective, RdxAccordionModule, RdxAccordionPanelDirective, RdxAccordionRootDirective, RdxAccordionTriggerDirective, injectAccordionItemContext, injectAccordionRootContext, provideAccordionItemContext, provideAccordionRootContext };
|
|
191
|
+
export type { AccordionItemContext, AccordionRootContext, RdxAccordionItemOpenChangeEvent, RdxAccordionValueChangeEvent, RdxAccordionValueChangeEventDetails, RdxAccordionValueChangeReason };
|
|
@@ -157,12 +157,11 @@ declare class RdxCheckboxRootDirective implements RdxFormCheckboxControl {
|
|
|
157
157
|
*/
|
|
158
158
|
readonly disabled: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
|
|
159
159
|
/**
|
|
160
|
-
* Whether the user should be unable to tick or untick the checkbox.
|
|
160
|
+
* Whether the user should be unable to tick or untick the checkbox. Bound in templates as
|
|
161
|
+
* `readOnly` (Base UI spelling); the TS member stays `readonly` to satisfy `RdxFormCheckboxControl`.
|
|
161
162
|
* @group Props
|
|
162
163
|
*/
|
|
163
164
|
readonly readonly: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
|
|
164
|
-
/** Alias matching Base UI's `readOnly` prop spelling. */
|
|
165
|
-
readonly readOnly: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
|
|
166
165
|
/**
|
|
167
166
|
* Whether or not the checkbox is required.
|
|
168
167
|
* @group Props
|
|
@@ -215,7 +214,7 @@ declare class RdxCheckboxRootDirective implements RdxFormCheckboxControl {
|
|
|
215
214
|
private setOptionalAttribute;
|
|
216
215
|
private setBooleanAttribute;
|
|
217
216
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxCheckboxRootDirective, never>;
|
|
218
|
-
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxCheckboxRootDirective, "[rdxCheckboxRoot]", never, { "checked": { "alias": "checked"; "required": false; "isSignal": true; }; "defaultChecked": { "alias": "defaultChecked"; "required": false; "isSignal": true; }; "indeterminate": { "alias": "indeterminate"; "required": false; "isSignal": true; }; "submitValue": { "alias": "value"; "required": false; "isSignal": true; }; "uncheckedValue": { "alias": "uncheckedValue"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "
|
|
217
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxCheckboxRootDirective, "[rdxCheckboxRoot]", never, { "checked": { "alias": "checked"; "required": false; "isSignal": true; }; "defaultChecked": { "alias": "defaultChecked"; "required": false; "isSignal": true; }; "indeterminate": { "alias": "indeterminate"; "required": false; "isSignal": true; }; "submitValue": { "alias": "value"; "required": false; "isSignal": true; }; "uncheckedValue": { "alias": "uncheckedValue"; "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; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "parent": { "alias": "parent"; "required": false; "isSignal": true; }; "form": { "alias": "form"; "required": false; "isSignal": true; }; }, { "checked": "checkedChange"; "indeterminate": "indeterminateChange"; "onCheckedChange": "onCheckedChange"; }, never, never, true, [{ directive: typeof _radix_ng_primitives_core.RdxControlValueAccessor; inputs: { "value": "checked"; "disabled": "disabled"; }; outputs: {}; }]>;
|
|
219
218
|
}
|
|
220
219
|
|
|
221
220
|
type RdxCheckboxGroupValueChangeReason = 'none';
|
|
@@ -150,6 +150,8 @@ declare class RdxCompositeRoot {
|
|
|
150
150
|
setHighlightedIndex(index: number, shouldScrollIntoView?: boolean): void;
|
|
151
151
|
relayKeyboardEvent(event: KeyboardEvent): void;
|
|
152
152
|
protected handleKeydown(event: KeyboardEvent): void;
|
|
153
|
+
/** Select the whole value when focus lands on a native text input item (Base UI parity). */
|
|
154
|
+
protected handleFocusIn(event: FocusEvent): void;
|
|
153
155
|
private handleCompositeKeydown;
|
|
154
156
|
private getNextIndex;
|
|
155
157
|
private elements;
|
|
@@ -1,41 +1,48 @@
|
|
|
1
1
|
import * as _angular_core from '@angular/core';
|
|
2
|
-
import {
|
|
2
|
+
import { Signal } from '@angular/core';
|
|
3
|
+
import * as _radix_ng_primitives_core from '@radix-ng/primitives/core';
|
|
4
|
+
import { RdxFormValueControl, BooleanInput, RdxCancelableChangeEventDetails } from '@radix-ng/primitives/core';
|
|
3
5
|
import { ControlValueAccessor } from '@angular/forms';
|
|
4
|
-
import { BooleanInput, RdxFormValueControl, RdxCancelableChangeEventDetails } from '@radix-ng/primitives/core';
|
|
5
6
|
import * as i1 from '@radix-ng/primitives/composite';
|
|
6
|
-
import * as
|
|
7
|
+
import * as _radix_ng_primitives_radio from '@radix-ng/primitives/radio';
|
|
7
8
|
|
|
8
9
|
type RdxRadioValueChangeReason = 'none';
|
|
9
|
-
interface RadioGroupProps {
|
|
10
|
-
value: ModelSignal<string | null>;
|
|
11
|
-
defaultValue: InputSignal<string | undefined>;
|
|
12
|
-
name: InputSignal<string | undefined>;
|
|
13
|
-
form: InputSignal<string | undefined>;
|
|
14
|
-
disabled: InputSignalWithTransform<boolean, BooleanInput>;
|
|
15
|
-
readonly: InputSignalWithTransform<boolean, BooleanInput>;
|
|
16
|
-
required: InputSignalWithTransform<boolean, BooleanInput>;
|
|
17
|
-
disabledState: Signal<boolean>;
|
|
18
|
-
}
|
|
19
|
-
interface RadioGroupDirective extends RadioGroupProps {
|
|
20
|
-
select(value: string | null, event?: Event, reason?: RdxRadioValueChangeReason): void;
|
|
21
|
-
onTouched(): void;
|
|
22
|
-
setArrowNavigation(value: boolean): void;
|
|
23
|
-
isArrowNavigation(): boolean;
|
|
24
|
-
}
|
|
25
10
|
|
|
26
11
|
type RdxRadioValueChangeEventDetails = RdxCancelableChangeEventDetails<RdxRadioValueChangeReason>;
|
|
27
12
|
interface RdxRadioValueChangeEvent {
|
|
28
13
|
value: string;
|
|
29
14
|
eventDetails: RdxRadioValueChangeEventDetails;
|
|
30
15
|
}
|
|
31
|
-
|
|
16
|
+
interface RadioRootContext {
|
|
17
|
+
value: Signal<string | null>;
|
|
18
|
+
disabledState: Signal<boolean>;
|
|
19
|
+
readonly: Signal<boolean>;
|
|
20
|
+
required: Signal<boolean>;
|
|
21
|
+
name: Signal<string | undefined>;
|
|
22
|
+
form: Signal<string | undefined>;
|
|
23
|
+
select(value: string | null, event?: Event, reason?: RdxRadioValueChangeReason): void;
|
|
24
|
+
setArrowNavigation(value: boolean): void;
|
|
25
|
+
isArrowNavigation(): boolean;
|
|
26
|
+
}
|
|
27
|
+
declare const injectRadioRootContext: _radix_ng_primitives_core.InjectContext<RadioRootContext>;
|
|
28
|
+
declare const provideRadioRootContext: (useFactory: () => RadioRootContext) => _angular_core.Provider;
|
|
29
|
+
declare class RdxRadioGroupDirective implements ControlValueAccessor, RdxFormValueControl<string | null> {
|
|
32
30
|
private readonly elementRef;
|
|
33
31
|
private readonly compositeRoot;
|
|
32
|
+
/**
|
|
33
|
+
* The selected value. Deliberately typed as `string` (not Base UI's generic `Value`):
|
|
34
|
+
* a radio group maps onto native radio inputs whose form value is a string, so values are
|
|
35
|
+
* the option identifiers. Use the string key of your option as the value.
|
|
36
|
+
*/
|
|
34
37
|
readonly value: _angular_core.ModelSignal<string | null>;
|
|
35
38
|
readonly defaultValue: _angular_core.InputSignal<string | undefined>;
|
|
36
39
|
readonly name: _angular_core.InputSignal<string | undefined>;
|
|
37
40
|
readonly form: _angular_core.InputSignal<string | undefined>;
|
|
38
41
|
readonly disabled: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
|
|
42
|
+
/**
|
|
43
|
+
* Whether the user should be unable to select a different radio button. Bound in templates as
|
|
44
|
+
* `readOnly` (Base UI spelling); the TS member stays `readonly` for cross-primitive consistency.
|
|
45
|
+
*/
|
|
39
46
|
readonly readonly: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
|
|
40
47
|
readonly required: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
|
|
41
48
|
/**
|
|
@@ -43,7 +50,7 @@ declare class RdxRadioGroupDirective implements RadioGroupProps, RadioGroupDirec
|
|
|
43
50
|
*/
|
|
44
51
|
readonly onValueChange: _angular_core.OutputEmitterRef<RdxRadioValueChangeEvent>;
|
|
45
52
|
private readonly disable;
|
|
46
|
-
readonly disabledState:
|
|
53
|
+
readonly disabledState: Signal<boolean>;
|
|
47
54
|
private readonly arrowNavigation;
|
|
48
55
|
private readonly itemMetadata;
|
|
49
56
|
private readonly disabledIndices;
|
|
@@ -87,31 +94,85 @@ declare class RdxRadioGroupDirective implements RadioGroupProps, RadioGroupDirec
|
|
|
87
94
|
setArrowNavigation(value: boolean): void;
|
|
88
95
|
isArrowNavigation(): boolean;
|
|
89
96
|
protected onKeydown(): void;
|
|
97
|
+
/**
|
|
98
|
+
* Marks the control touched when focus leaves the whole group (Base UI `RadioGroup` parity and the
|
|
99
|
+
* ADR 0004 CVA strategy) — moving focus between items stays inside, so `relatedTarget` is checked.
|
|
100
|
+
*/
|
|
101
|
+
protected onFocusOut(event: FocusEvent): void;
|
|
90
102
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxRadioGroupDirective, never>;
|
|
91
|
-
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxRadioGroupDirective, "[rdxRadioRoot]", ["rdxRadioRoot"], { "value": { "alias": "value"; "required": false; "isSignal": true; }; "defaultValue": { "alias": "defaultValue"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "form": { "alias": "form"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "
|
|
103
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxRadioGroupDirective, "[rdxRadioRoot]", ["rdxRadioRoot"], { "value": { "alias": "value"; "required": false; "isSignal": true; }; "defaultValue": { "alias": "defaultValue"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "form": { "alias": "form"; "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; }; }, { "value": "valueChange"; "onValueChange": "onValueChange"; }, never, never, true, [{ directive: typeof i1.RdxCompositeRoot; inputs: {}; outputs: {}; }]>;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
declare class RdxRadioIndicatorDirective {
|
|
107
|
+
protected readonly itemContext: _radix_ng_primitives_radio.RadioItemContext;
|
|
108
|
+
/** Keep the indicator in the DOM when unchecked so CSS exit animations can play. */
|
|
109
|
+
readonly keepMounted: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
|
|
110
|
+
protected readonly isVisible: _angular_core.Signal<boolean>;
|
|
111
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxRadioIndicatorDirective, never>;
|
|
112
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxRadioIndicatorDirective, "[rdxRadioIndicator]", ["rdxRadioIndicator"], { "keepMounted": { "alias": "keepMounted"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
/**
|
|
116
|
+
* The hidden native radio input that mirrors the item state for form submission, native validation,
|
|
117
|
+
* and `<label>` activation. Place it inside an `rdxRadioItem`.
|
|
118
|
+
*
|
|
119
|
+
* @see https://base-ui.com/react/components/radio
|
|
120
|
+
*/
|
|
121
|
+
declare class RdxRadioItemInputDirective {
|
|
122
|
+
private readonly rootContext;
|
|
123
|
+
private readonly itemContext;
|
|
124
|
+
private readonly input;
|
|
125
|
+
readonly name: _angular_core.Signal<string | undefined>;
|
|
126
|
+
readonly form: _angular_core.Signal<string | undefined>;
|
|
127
|
+
readonly value: _angular_core.Signal<string | undefined>;
|
|
128
|
+
readonly checked: _angular_core.Signal<boolean>;
|
|
129
|
+
readonly required: _angular_core.Signal<boolean>;
|
|
130
|
+
readonly disabled: _angular_core.Signal<boolean>;
|
|
131
|
+
constructor();
|
|
132
|
+
/**
|
|
133
|
+
* Selects this item when the native input is checked — covers `<label>` activation,
|
|
134
|
+
* where clicking the label toggles the hidden radio input rather than the visible item.
|
|
135
|
+
* `select()` is a no-op when the value is already current, so the programmatic
|
|
136
|
+
* `change` dispatched above does not re-trigger selection.
|
|
137
|
+
* @ignore
|
|
138
|
+
*/
|
|
139
|
+
protected onInputChange(event: Event): void;
|
|
140
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxRadioItemInputDirective, never>;
|
|
141
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxRadioItemInputDirective, "input[rdxRadioItemInput]", ["rdxRadioItemInput"], {}, {}, never, never, true, never>;
|
|
92
142
|
}
|
|
93
143
|
|
|
94
|
-
|
|
95
|
-
|
|
144
|
+
interface RadioItemContext {
|
|
145
|
+
value: Signal<string>;
|
|
146
|
+
checkedState: Signal<boolean>;
|
|
147
|
+
disabledState: Signal<boolean>;
|
|
148
|
+
readonlyState: Signal<boolean>;
|
|
149
|
+
requiredState: Signal<boolean>;
|
|
150
|
+
}
|
|
151
|
+
declare const injectRadioItemContext: _radix_ng_primitives_core.InjectContext<RadioItemContext>;
|
|
152
|
+
declare const provideRadioItemContext: (useFactory: () => RadioItemContext) => _angular_core.Provider;
|
|
96
153
|
declare class RdxRadioItemDirective {
|
|
97
|
-
private readonly
|
|
98
|
-
private readonly elementRef;
|
|
99
|
-
private readonly renderer;
|
|
154
|
+
private readonly rootContext;
|
|
100
155
|
private readonly compositeItem;
|
|
101
|
-
private readonly
|
|
102
|
-
private readonly inputElement;
|
|
103
|
-
private previousCheckedState;
|
|
156
|
+
private readonly elementRef;
|
|
104
157
|
readonly value: _angular_core.InputSignal<string>;
|
|
105
158
|
readonly id: _angular_core.InputSignal<string | undefined>;
|
|
106
159
|
readonly required: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
|
|
107
160
|
readonly disabled: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
|
|
161
|
+
/**
|
|
162
|
+
* Whether the user should be unable to select this radio button. Bound in templates as
|
|
163
|
+
* `readOnly` (Base UI spelling); the TS member stays `readonly` for cross-primitive consistency.
|
|
164
|
+
*/
|
|
108
165
|
readonly readonly: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
readonly
|
|
166
|
+
/**
|
|
167
|
+
* Whether the host is a native `<button>`. Detected from the host tag (unlike Base UI's explicit
|
|
168
|
+
* `nativeButton` prop, the rendered element is statically known in Angular templates), and used to
|
|
169
|
+
* apply `type="button"` and the native `disabled` attribute.
|
|
170
|
+
*/
|
|
171
|
+
protected readonly isNativeButton: boolean;
|
|
172
|
+
readonly disabledState: Signal<boolean>;
|
|
173
|
+
readonly readonlyState: Signal<boolean>;
|
|
174
|
+
readonly requiredState: Signal<boolean>;
|
|
175
|
+
readonly checkedState: Signal<boolean>;
|
|
115
176
|
private readonly ARROW_KEYS;
|
|
116
177
|
constructor();
|
|
117
178
|
/** @ignore */
|
|
@@ -123,35 +184,9 @@ declare class RdxRadioItemDirective {
|
|
|
123
184
|
/** @ignore */
|
|
124
185
|
onFocus(event?: FocusEvent): void;
|
|
125
186
|
private isAllowedArrowKey;
|
|
126
|
-
private createHiddenInput;
|
|
127
|
-
private syncHiddenInput;
|
|
128
|
-
private setOptionalAttribute;
|
|
129
|
-
private setBooleanAttribute;
|
|
130
187
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxRadioItemDirective, never>;
|
|
131
|
-
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxRadioItemDirective, "[rdxRadioItem]", ["rdxRadioItem"], { "value": { "alias": "value"; "required": true; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "
|
|
132
|
-
}
|
|
133
|
-
|
|
134
|
-
declare class RdxRadioIndicatorDirective {
|
|
135
|
-
protected readonly radioGroup: RadioGroupDirective;
|
|
136
|
-
protected readonly radioItem: RdxRadioItemDirective;
|
|
137
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxRadioIndicatorDirective, never>;
|
|
138
|
-
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxRadioIndicatorDirective, "[rdxRadioIndicator]", ["rdxRadioIndicator"], {}, {}, never, never, true, never>;
|
|
139
|
-
}
|
|
140
|
-
|
|
141
|
-
declare class RdxRadioItemInputDirective {
|
|
142
|
-
private readonly radioItem;
|
|
143
|
-
private readonly radioGroup;
|
|
144
|
-
private readonly input;
|
|
145
|
-
readonly name: _angular_core.Signal<string | undefined>;
|
|
146
|
-
readonly form: _angular_core.Signal<string | undefined>;
|
|
147
|
-
readonly value: _angular_core.Signal<string | undefined>;
|
|
148
|
-
readonly checked: _angular_core.Signal<boolean>;
|
|
149
|
-
readonly required: _angular_core.Signal<boolean>;
|
|
150
|
-
readonly disabled: _angular_core.Signal<boolean>;
|
|
151
|
-
constructor();
|
|
152
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxRadioItemInputDirective, never>;
|
|
153
|
-
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxRadioItemInputDirective, "input[rdxRadioItemInput]", ["rdxRadioItemInput"], {}, {}, never, never, true, [{ directive: typeof i1$1.RdxVisuallyHiddenDirective; inputs: { "feature": "feature"; }; outputs: {}; }]>;
|
|
188
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxRadioItemDirective, "[rdxRadioItem]", ["rdxRadioItem"], { "value": { "alias": "value"; "required": true; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readOnly"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1.RdxCompositeItem; inputs: {}; outputs: {}; }]>;
|
|
154
189
|
}
|
|
155
190
|
|
|
156
|
-
export { RdxRadioGroupDirective, RdxRadioIndicatorDirective, RdxRadioItemDirective, RdxRadioItemInputDirective,
|
|
157
|
-
export type { RdxRadioValueChangeEvent, RdxRadioValueChangeEventDetails, RdxRadioValueChangeReason };
|
|
191
|
+
export { RdxRadioGroupDirective, RdxRadioIndicatorDirective, RdxRadioItemDirective, RdxRadioItemInputDirective, injectRadioItemContext, injectRadioRootContext, provideRadioItemContext, provideRadioRootContext };
|
|
192
|
+
export type { RadioItemContext, RadioRootContext, RdxRadioValueChangeEvent, RdxRadioValueChangeEventDetails, RdxRadioValueChangeReason };
|
|
@@ -15,7 +15,7 @@ declare class RdxSwitchInput {
|
|
|
15
15
|
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxSwitchInput, "input[rdxSwitchInput]", ["rdxSwitchInput"], {}, {}, never, never, true, never>;
|
|
16
16
|
}
|
|
17
17
|
|
|
18
|
-
type RdxSwitchCheckedChangeReason = '
|
|
18
|
+
type RdxSwitchCheckedChangeReason = 'none';
|
|
19
19
|
type RdxSwitchCheckedChangeEventDetails = RdxCancelableChangeEventDetails<RdxSwitchCheckedChangeReason>;
|
|
20
20
|
interface RdxSwitchCheckedChangeEvent {
|
|
21
21
|
checked: boolean;
|
|
@@ -35,7 +35,7 @@ declare class RdxSwitchRoot implements RdxFormCheckboxControl {
|
|
|
35
35
|
*
|
|
36
36
|
* @default false
|
|
37
37
|
*/
|
|
38
|
-
readonly defaultChecked: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
|
|
38
|
+
readonly defaultChecked: _angular_core.InputSignalWithTransform<boolean | undefined, BooleanInput>;
|
|
39
39
|
/**
|
|
40
40
|
* The controlled checked state. Use with `(onCheckedChange)` or two-way `[(checked)]`.
|
|
41
41
|
*/
|
|
@@ -79,6 +79,7 @@ declare class RdxSwitchRoot implements RdxFormCheckboxControl {
|
|
|
79
79
|
readonly checkedState: _angular_core.Signal<boolean>;
|
|
80
80
|
/** @ignore */
|
|
81
81
|
protected readonly isDisabled: _angular_core.Signal<boolean>;
|
|
82
|
+
constructor();
|
|
82
83
|
/** @ignore Toggles the checked state unless disabled or read-only. */
|
|
83
84
|
toggle(event?: Event): void;
|
|
84
85
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxSwitchRoot, never>;
|