@radix-ng/primitives 0.51.0 → 1.0.0-beta.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/fesm2022/radix-ng-primitives-accordion.mjs +105 -38
- package/fesm2022/radix-ng-primitives-accordion.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-alert-dialog.mjs +221 -129
- package/fesm2022/radix-ng-primitives-alert-dialog.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-arrow.mjs +20 -4
- package/fesm2022/radix-ng-primitives-arrow.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-aspect-ratio.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-avatar.mjs +54 -61
- package/fesm2022/radix-ng-primitives-avatar.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-button.mjs +123 -0
- package/fesm2022/radix-ng-primitives-button.mjs.map +1 -0
- package/fesm2022/radix-ng-primitives-calendar.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-checkbox.mjs +378 -54
- package/fesm2022/radix-ng-primitives-checkbox.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-collapsible.mjs +182 -81
- package/fesm2022/radix-ng-primitives-collapsible.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-collection.mjs +40 -57
- package/fesm2022/radix-ng-primitives-collection.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-config.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-context-menu.mjs +140 -424
- package/fesm2022/radix-ng-primitives-context-menu.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-core.mjs +735 -744
- package/fesm2022/radix-ng-primitives-core.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-cropper.mjs +1 -0
- package/fesm2022/radix-ng-primitives-cropper.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-date-field.mjs +51 -45
- package/fesm2022/radix-ng-primitives-date-field.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-dialog.mjs +655 -327
- package/fesm2022/radix-ng-primitives-dialog.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-dismissable-layer.mjs +70 -46
- package/fesm2022/radix-ng-primitives-dismissable-layer.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-drawer.mjs +1059 -0
- package/fesm2022/radix-ng-primitives-drawer.mjs.map +1 -0
- package/fesm2022/radix-ng-primitives-editable.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-field.mjs +363 -0
- package/fesm2022/radix-ng-primitives-field.mjs.map +1 -0
- package/fesm2022/radix-ng-primitives-fieldset.mjs +79 -0
- package/fesm2022/radix-ng-primitives-fieldset.mjs.map +1 -0
- package/fesm2022/radix-ng-primitives-focus-scope.mjs +23 -8
- package/fesm2022/radix-ng-primitives-focus-scope.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-input.mjs +172 -0
- package/fesm2022/radix-ng-primitives-input.mjs.map +1 -0
- package/fesm2022/radix-ng-primitives-label.mjs +6 -6
- package/fesm2022/radix-ng-primitives-label.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-menu.mjs +1480 -344
- package/fesm2022/radix-ng-primitives-menu.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-menubar.mjs +290 -162
- package/fesm2022/radix-ng-primitives-menubar.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-meter.mjs +271 -0
- package/fesm2022/radix-ng-primitives-meter.mjs.map +1 -0
- package/fesm2022/radix-ng-primitives-navigation-menu.mjs +1052 -1553
- package/fesm2022/radix-ng-primitives-navigation-menu.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-number-field.mjs +1102 -367
- package/fesm2022/radix-ng-primitives-number-field.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-pagination.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-popover.mjs +978 -989
- package/fesm2022/radix-ng-primitives-popover.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-popper.mjs +91 -41
- package/fesm2022/radix-ng-primitives-popper.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-portal.mjs +34 -10
- package/fesm2022/radix-ng-primitives-portal.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-presence.mjs +134 -246
- package/fesm2022/radix-ng-primitives-presence.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-preview-card.mjs +997 -0
- package/fesm2022/radix-ng-primitives-preview-card.mjs.map +1 -0
- package/fesm2022/radix-ng-primitives-progress.mjs +223 -84
- package/fesm2022/radix-ng-primitives-progress.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-radio.mjs +191 -51
- package/fesm2022/radix-ng-primitives-radio.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-roving-focus.mjs +96 -50
- package/fesm2022/radix-ng-primitives-roving-focus.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-select.mjs +791 -509
- package/fesm2022/radix-ng-primitives-select.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-separator.mjs +12 -35
- package/fesm2022/radix-ng-primitives-separator.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-slider.mjs +969 -717
- package/fesm2022/radix-ng-primitives-slider.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-stepper.mjs +15 -19
- package/fesm2022/radix-ng-primitives-stepper.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-switch.mjs +125 -113
- package/fesm2022/radix-ng-primitives-switch.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-tabs.mjs +381 -108
- package/fesm2022/radix-ng-primitives-tabs.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-time-field.mjs +55 -46
- package/fesm2022/radix-ng-primitives-time-field.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-toggle-group.mjs +121 -247
- package/fesm2022/radix-ng-primitives-toggle-group.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-toggle.mjs +98 -61
- package/fesm2022/radix-ng-primitives-toggle.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-toolbar.mjs +303 -92
- package/fesm2022/radix-ng-primitives-toolbar.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-tooltip.mjs +690 -1071
- package/fesm2022/radix-ng-primitives-tooltip.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-visually-hidden.mjs +25 -66
- package/fesm2022/radix-ng-primitives-visually-hidden.mjs.map +1 -1
- package/meter/README.md +3 -0
- package/navigation-menu/README.md +2 -1
- package/package.json +31 -18
- package/portal/README.md +2 -0
- package/preview-card/README.md +3 -0
- package/schematics/collection.json +1 -0
- package/schematics/ng-add/index.d.ts +3 -2
- package/schematics/ng-add/index.js +62 -31
- package/schematics/ng-add/index.js.map +1 -1
- package/schematics/ng-add/package-config.d.ts +4 -2
- package/schematics/ng-add/package-config.js +10 -2
- package/schematics/ng-add/package-config.js.map +1 -1
- package/schematics/ng-add/schema.d.ts +3 -0
- package/schematics/ng-add/schema.js +3 -0
- package/schematics/ng-add/schema.js.map +1 -0
- package/schematics/ng-add/schema.json +14 -0
- package/select/README.md +2 -0
- package/types/radix-ng-primitives-accordion.d.ts +48 -14
- package/types/radix-ng-primitives-alert-dialog.d.ts +95 -38
- package/types/radix-ng-primitives-arrow.d.ts +1 -1
- package/types/radix-ng-primitives-aspect-ratio.d.ts +1 -1
- package/types/radix-ng-primitives-avatar.d.ts +7 -11
- package/types/radix-ng-primitives-button.d.ts +73 -0
- package/types/radix-ng-primitives-calendar.d.ts +1 -2
- package/types/radix-ng-primitives-checkbox.d.ts +201 -32
- package/types/radix-ng-primitives-collapsible.d.ts +112 -39
- package/types/radix-ng-primitives-collection.d.ts +38 -34
- package/types/radix-ng-primitives-config.d.ts +1 -1
- package/types/radix-ng-primitives-context-menu.d.ts +60 -116
- package/types/radix-ng-primitives-core.d.ts +307 -236
- package/types/radix-ng-primitives-cropper.d.ts +2 -2
- package/types/radix-ng-primitives-date-field.d.ts +38 -23
- package/types/radix-ng-primitives-dialog.d.ts +282 -165
- package/types/radix-ng-primitives-dismissable-layer.d.ts +15 -7
- package/types/radix-ng-primitives-drawer.d.ts +448 -0
- package/types/radix-ng-primitives-editable.d.ts +1 -1
- package/types/radix-ng-primitives-field.d.ts +373 -0
- package/types/radix-ng-primitives-fieldset.d.ts +48 -0
- package/types/radix-ng-primitives-focus-scope.d.ts +13 -5
- package/types/radix-ng-primitives-input.d.ts +87 -0
- package/types/radix-ng-primitives-label.d.ts +0 -1
- package/types/radix-ng-primitives-menu.d.ts +572 -99
- package/types/radix-ng-primitives-menubar.d.ts +60 -50
- package/types/radix-ng-primitives-meter.d.ts +193 -0
- package/types/radix-ng-primitives-navigation-menu.d.ts +422 -340
- package/types/radix-ng-primitives-number-field.d.ts +405 -145
- package/types/radix-ng-primitives-pagination.d.ts +2 -2
- package/types/radix-ng-primitives-popover.d.ts +365 -351
- package/types/radix-ng-primitives-popper.d.ts +49 -9
- package/types/radix-ng-primitives-portal.d.ts +14 -6
- package/types/radix-ng-primitives-presence.d.ts +28 -76
- package/types/radix-ng-primitives-preview-card.d.ts +359 -0
- package/types/radix-ng-primitives-progress.d.ts +174 -48
- package/types/radix-ng-primitives-radio.d.ts +55 -25
- package/types/radix-ng-primitives-roving-focus.d.ts +30 -21
- package/types/radix-ng-primitives-select.d.ts +475 -177
- package/types/radix-ng-primitives-separator.d.ts +7 -32
- package/types/radix-ng-primitives-slider.d.ts +315 -201
- package/types/radix-ng-primitives-stepper.d.ts +5 -7
- package/types/radix-ng-primitives-switch.d.ts +86 -71
- package/types/radix-ng-primitives-tabs.d.ts +213 -79
- package/types/radix-ng-primitives-time-field.d.ts +42 -27
- package/types/radix-ng-primitives-toggle-group.d.ts +85 -164
- package/types/radix-ng-primitives-toggle.d.ts +43 -53
- package/types/radix-ng-primitives-toolbar.d.ts +163 -38
- package/types/radix-ng-primitives-tooltip.d.ts +347 -384
- package/types/radix-ng-primitives-visually-hidden.d.ts +19 -19
- package/dropdown-menu/README.md +0 -1
- package/fesm2022/radix-ng-primitives-dropdown-menu.mjs +0 -581
- package/fesm2022/radix-ng-primitives-dropdown-menu.mjs.map +0 -1
- package/fesm2022/radix-ng-primitives-hover-card.mjs +0 -1238
- package/fesm2022/radix-ng-primitives-hover-card.mjs.map +0 -1
- package/fesm2022/radix-ng-primitives-select2.mjs +0 -897
- package/fesm2022/radix-ng-primitives-select2.mjs.map +0 -1
- package/fesm2022/radix-ng-primitives-tooltip2.mjs +0 -735
- package/fesm2022/radix-ng-primitives-tooltip2.mjs.map +0 -1
- package/hover-card/README.md +0 -3
- package/select2/README.md +0 -3
- package/tooltip2/README.md +0 -3
- package/types/radix-ng-primitives-dropdown-menu.d.ts +0 -171
- package/types/radix-ng-primitives-hover-card.d.ts +0 -471
- package/types/radix-ng-primitives-select2.d.ts +0 -511
- package/types/radix-ng-primitives-tooltip2.d.ts +0 -325
|
@@ -1,106 +1,121 @@
|
|
|
1
|
-
import * as i0 from '@angular/core';
|
|
2
|
-
import { InputSignalWithTransform, Signal, InputSignal } from '@angular/core';
|
|
3
|
-
import { BooleanInput } from '@angular/cdk/coercion';
|
|
4
|
-
import * as i1 from '@radix-ng/primitives/core';
|
|
5
|
-
import { RdxControlValueAccessor } from '@radix-ng/primitives/core';
|
|
6
1
|
import * as _radix_ng_primitives_switch from '@radix-ng/primitives/switch';
|
|
2
|
+
import * as _angular_core from '@angular/core';
|
|
3
|
+
import { Signal } from '@angular/core';
|
|
4
|
+
import * as i1 from '@radix-ng/primitives/core';
|
|
5
|
+
import { RdxFormCheckboxControl, RdxControlValueAccessor, BooleanInput } from '@radix-ng/primitives/core';
|
|
7
6
|
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
7
|
+
/**
|
|
8
|
+
* The hidden native checkbox that mirrors the switch state for form submission and screen readers.
|
|
9
|
+
*
|
|
10
|
+
* @see https://base-ui.com/react/components/switch
|
|
11
|
+
*/
|
|
12
|
+
declare class RdxSwitchInput {
|
|
13
|
+
protected readonly rootContext: _radix_ng_primitives_switch.RdxSwitchContext;
|
|
14
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxSwitchInput, never>;
|
|
15
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxSwitchInput, "input[rdxSwitchInput]", ["rdxSwitchInput"], {}, {}, never, never, true, never>;
|
|
16
16
|
}
|
|
17
|
-
|
|
18
|
-
declare const provideSwitchRootContext: (useFactory: () => SwitchContext) => i0.Provider;
|
|
17
|
+
|
|
19
18
|
/**
|
|
20
|
-
*
|
|
19
|
+
* A control that toggles between on and off.
|
|
20
|
+
*
|
|
21
|
+
* @see https://base-ui.com/react/components/switch
|
|
21
22
|
*/
|
|
22
|
-
declare class
|
|
23
|
+
declare class RdxSwitchRoot implements RdxFormCheckboxControl {
|
|
24
|
+
/** @ignore */
|
|
23
25
|
protected readonly cva: RdxControlValueAccessor<boolean | undefined>;
|
|
24
|
-
readonly id: InputSignal<string>;
|
|
26
|
+
readonly id: _angular_core.InputSignal<string>;
|
|
25
27
|
/**
|
|
26
|
-
*
|
|
28
|
+
* The state of the switch when it is initially rendered. Use when you do not need to control its state.
|
|
27
29
|
*
|
|
28
30
|
* @default false
|
|
29
|
-
* @group Props
|
|
30
|
-
*/
|
|
31
|
-
readonly required: InputSignalWithTransform<boolean, BooleanInput>;
|
|
32
|
-
/**
|
|
33
|
-
* Establishes relationships between the component and label(s) where its value should be one or more element IDs.
|
|
34
|
-
* @default null
|
|
35
|
-
* @group Props
|
|
36
31
|
*/
|
|
37
|
-
readonly
|
|
32
|
+
readonly defaultChecked: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
|
|
38
33
|
/**
|
|
39
|
-
*
|
|
40
|
-
* @default null
|
|
41
|
-
* @group Props
|
|
34
|
+
* The controlled checked state. Use with `(onCheckedChange)` or two-way `[(checked)]`.
|
|
42
35
|
*/
|
|
43
|
-
readonly
|
|
36
|
+
readonly checked: _angular_core.ModelSignal<boolean>;
|
|
44
37
|
/**
|
|
45
|
-
*
|
|
38
|
+
* When `true`, prevents the user from interacting with the switch.
|
|
39
|
+
*
|
|
46
40
|
* @default false
|
|
47
|
-
* @group Props
|
|
48
41
|
*/
|
|
49
|
-
readonly
|
|
42
|
+
readonly disabled: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
|
|
50
43
|
/**
|
|
51
|
-
*
|
|
52
|
-
*
|
|
53
|
-
* @group Props
|
|
54
|
-
*/
|
|
55
|
-
readonly checked: i0.ModelSignal<boolean>;
|
|
56
|
-
/**
|
|
57
|
-
* When `true`, prevents the user from interacting with the switch.
|
|
44
|
+
* When `true`, the switch is focusable but cannot be toggled.
|
|
45
|
+
*
|
|
58
46
|
* @default false
|
|
59
|
-
* @group Props
|
|
60
47
|
*/
|
|
61
|
-
readonly
|
|
48
|
+
readonly readonly: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
|
|
62
49
|
/**
|
|
63
|
-
*
|
|
50
|
+
* When `true`, the switch must be on before the owning form can be submitted.
|
|
64
51
|
*
|
|
65
|
-
* @
|
|
66
|
-
* @group Emits
|
|
52
|
+
* @default false
|
|
67
53
|
*/
|
|
68
|
-
readonly
|
|
54
|
+
readonly required: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
|
|
55
|
+
/** Name of the hidden form input rendered by `[rdxSwitchInput]`. */
|
|
56
|
+
readonly name: _angular_core.InputSignal<string | undefined>;
|
|
69
57
|
/**
|
|
70
|
-
*
|
|
71
|
-
*
|
|
72
|
-
*
|
|
58
|
+
* Value submitted with the form when the switch is on.
|
|
59
|
+
*
|
|
60
|
+
* Bound publicly as `[value]`; the TS member is named `submitValue` so the
|
|
61
|
+
* directive can satisfy `RdxFormCheckboxControl`, whose contract reserves a
|
|
62
|
+
* `value` member for `RdxFormValueControl` and forbids it on checkbox-style
|
|
63
|
+
* controls.
|
|
64
|
+
*
|
|
65
|
+
* @default 'on'
|
|
73
66
|
*/
|
|
67
|
+
readonly submitValue: _angular_core.InputSignal<string>;
|
|
68
|
+
readonly ariaLabelledBy: _angular_core.InputSignal<string | undefined>;
|
|
69
|
+
readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
|
|
70
|
+
/** Event handler called when the checked state of the switch changes. */
|
|
71
|
+
readonly onCheckedChange: _angular_core.OutputEmitterRef<boolean>;
|
|
72
|
+
/** @ignore */
|
|
73
|
+
readonly checkedState: _angular_core.Signal<boolean>;
|
|
74
|
+
/** @ignore */
|
|
75
|
+
protected readonly isDisabled: _angular_core.Signal<boolean>;
|
|
76
|
+
/** @ignore Toggles the checked state unless disabled or read-only. */
|
|
74
77
|
toggle(): void;
|
|
75
|
-
static ɵfac:
|
|
76
|
-
static ɵdir:
|
|
78
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxSwitchRoot, never>;
|
|
79
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxSwitchRoot, "button[rdxSwitchRoot]", ["rdxSwitchRoot"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; "defaultChecked": { "alias": "defaultChecked"; "required": false; "isSignal": true; }; "checked": { "alias": "checked"; "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; }; "submitValue": { "alias": "value"; "required": false; "isSignal": true; }; "ariaLabelledBy": { "alias": "aria-labelledby"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; }, { "checked": "checkedChange"; "onCheckedChange": "onCheckedChange"; }, never, never, true, [{ directive: typeof i1.RdxControlValueAccessor; inputs: { "value": "checked"; "disabled": "disabled"; }; outputs: {}; }]>;
|
|
77
80
|
}
|
|
78
81
|
|
|
79
82
|
/**
|
|
80
|
-
*
|
|
83
|
+
* The moving part of the switch that indicates whether it is on or off.
|
|
84
|
+
*
|
|
85
|
+
* @see https://base-ui.com/react/components/switch
|
|
81
86
|
*/
|
|
82
|
-
declare class
|
|
83
|
-
protected readonly rootContext: _radix_ng_primitives_switch.
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
static ɵfac: i0.ɵɵFactoryDeclaration<RdxSwitchInputDirective, never>;
|
|
87
|
-
static ɵdir: i0.ɵɵDirectiveDeclaration<RdxSwitchInputDirective, "input[rdxSwitchInput]", ["rdxSwitchInput"], {}, {}, never, never, true, never>;
|
|
87
|
+
declare class RdxSwitchThumb {
|
|
88
|
+
protected readonly rootContext: _radix_ng_primitives_switch.RdxSwitchContext;
|
|
89
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxSwitchThumb, never>;
|
|
90
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxSwitchThumb, "span[rdxSwitchThumb]", ["rdxSwitchThumb"], {}, {}, never, never, true, never>;
|
|
88
91
|
}
|
|
89
92
|
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
93
|
+
interface RdxSwitchContext {
|
|
94
|
+
/** Whether the switch is on. */
|
|
95
|
+
readonly checked: Signal<boolean>;
|
|
96
|
+
/** Whether the switch is disabled. */
|
|
97
|
+
readonly disabled: Signal<boolean>;
|
|
98
|
+
/** Whether the switch is read-only (focusable, but cannot be toggled). */
|
|
99
|
+
readonly readonly: Signal<boolean>;
|
|
100
|
+
/** Whether the switch must be on to submit the owning form. */
|
|
101
|
+
readonly required: Signal<boolean>;
|
|
102
|
+
/** Name of the hidden form input. */
|
|
103
|
+
readonly name: Signal<string | undefined>;
|
|
104
|
+
/** Value submitted with the form when the switch is on. */
|
|
105
|
+
readonly value: Signal<string>;
|
|
106
|
+
readonly ariaLabel: Signal<string | undefined>;
|
|
107
|
+
readonly ariaLabelledBy: Signal<string | undefined>;
|
|
108
|
+
markAsTouched(): void;
|
|
97
109
|
}
|
|
110
|
+
declare const injectSwitchContext: (optional?: boolean) => RdxSwitchContext | null;
|
|
111
|
+
declare const provideSwitchContext: (useFactory: () => RdxSwitchContext) => _angular_core.Provider;
|
|
98
112
|
|
|
113
|
+
declare const switchImports: (typeof RdxSwitchInput | typeof RdxSwitchRoot | typeof RdxSwitchThumb)[];
|
|
99
114
|
declare class RdxSwitchModule {
|
|
100
|
-
static ɵfac:
|
|
101
|
-
static ɵmod:
|
|
102
|
-
static ɵinj:
|
|
115
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxSwitchModule, never>;
|
|
116
|
+
static ɵmod: _angular_core.ɵɵNgModuleDeclaration<RdxSwitchModule, never, [typeof RdxSwitchRoot, typeof RdxSwitchInput, typeof RdxSwitchThumb], [typeof RdxSwitchRoot, typeof RdxSwitchInput, typeof RdxSwitchThumb]>;
|
|
117
|
+
static ɵinj: _angular_core.ɵɵInjectorDeclaration<RdxSwitchModule>;
|
|
103
118
|
}
|
|
104
119
|
|
|
105
|
-
export {
|
|
106
|
-
export type {
|
|
120
|
+
export { RdxSwitchInput, RdxSwitchModule, RdxSwitchRoot, RdxSwitchThumb, injectSwitchContext, provideSwitchContext, switchImports };
|
|
121
|
+
export type { RdxSwitchContext };
|
|
@@ -1,113 +1,247 @@
|
|
|
1
1
|
import * as _angular_core from '@angular/core';
|
|
2
|
-
import {
|
|
2
|
+
import { Signal } from '@angular/core';
|
|
3
|
+
import * as i1 from '@radix-ng/primitives/presence';
|
|
4
|
+
import * as _radix_ng_primitives_core from '@radix-ng/primitives/core';
|
|
5
|
+
import { DataOrientation, BooleanInput } from '@radix-ng/primitives/core';
|
|
3
6
|
import * as _radix_ng_primitives_tabs from '@radix-ng/primitives/tabs';
|
|
4
|
-
import * as i1 from '@radix-ng/primitives/roving-focus';
|
|
5
|
-
import { BooleanInput } from '@angular/cdk/coercion';
|
|
7
|
+
import * as i1$1 from '@radix-ng/primitives/roving-focus';
|
|
6
8
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
orientation?: string;
|
|
20
|
-
/**
|
|
21
|
-
* The direction of navigation between toolbar items.
|
|
22
|
-
*/
|
|
23
|
-
dir?: string;
|
|
24
|
-
/**
|
|
25
|
-
* Whether a tab is activated automatically or manually.
|
|
26
|
-
* @defaultValue automatic
|
|
27
|
-
* */
|
|
28
|
-
activationMode?: 'automatic' | 'manual';
|
|
9
|
+
/**
|
|
10
|
+
* Structural directive that mounts the tab panel contents only while the panel is active,
|
|
11
|
+
* unmounting them once the exit animation finishes. Apply it inside an `[rdxTabsPanel]` to get
|
|
12
|
+
* Base UI's default unmounting behavior; combine with `keepMounted` on the panel to keep the
|
|
13
|
+
* contents mounted instead.
|
|
14
|
+
*
|
|
15
|
+
* The presence state is read from the parent panel through {@link RdxPresenceDirective}.
|
|
16
|
+
*/
|
|
17
|
+
declare class RdxTabsPanelPresence {
|
|
18
|
+
constructor();
|
|
19
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxTabsPanelPresence, never>;
|
|
20
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxTabsPanelPresence, "ng-template[rdxTabsPanelPresence]", never, {}, {}, never, never, true, [{ directive: typeof i1.RdxPresenceDirective; inputs: {}; outputs: {}; }]>;
|
|
29
21
|
}
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
22
|
+
|
|
23
|
+
/**
|
|
24
|
+
* The direction in which the active tab moved relative to the previously active tab.
|
|
25
|
+
* Mirrors Base UI's `Tabs.Tab.ActivationDirection`.
|
|
26
|
+
*/
|
|
27
|
+
type RdxTabsActivationDirection = 'left' | 'right' | 'up' | 'down' | 'none';
|
|
28
|
+
/** A value that identifies a tab / panel pair. */
|
|
29
|
+
type RdxTabsValue = string | number | null;
|
|
30
|
+
|
|
31
|
+
/**
|
|
32
|
+
* Groups the tabs and the corresponding panels.
|
|
33
|
+
*
|
|
34
|
+
* @see https://base-ui.com/react/components/tabs
|
|
35
|
+
*/
|
|
36
|
+
declare class RdxTabsRoot {
|
|
37
|
+
/** @ignore */
|
|
38
|
+
readonly baseId: string;
|
|
33
39
|
/**
|
|
34
|
-
* The
|
|
40
|
+
* The value of the currently selected tab. Use together with `(onValueChange)` for controlled state.
|
|
35
41
|
*/
|
|
36
|
-
readonly value: _angular_core.ModelSignal<
|
|
37
|
-
readonly defaultValue: _angular_core.InputSignal<string | undefined>;
|
|
42
|
+
readonly value: _angular_core.ModelSignal<RdxTabsValue | undefined>;
|
|
38
43
|
/**
|
|
39
|
-
*
|
|
44
|
+
* The value of the tab that should be initially selected when uncontrolled.
|
|
40
45
|
*/
|
|
41
|
-
readonly
|
|
46
|
+
readonly defaultValue: _angular_core.InputSignal<RdxTabsValue | undefined>;
|
|
42
47
|
/**
|
|
43
|
-
* The orientation
|
|
48
|
+
* The orientation the tabs are laid out. Controls arrow-key navigation
|
|
49
|
+
* (left/right vs. up/down).
|
|
50
|
+
*
|
|
51
|
+
* @default 'horizontal'
|
|
44
52
|
*/
|
|
45
53
|
readonly orientation: _angular_core.InputSignal<DataOrientation>;
|
|
46
|
-
readonly dir: _angular_core.InputSignal<string>;
|
|
47
54
|
/**
|
|
48
|
-
* Event
|
|
55
|
+
* Event emitted when the selected tab changes.
|
|
49
56
|
*/
|
|
50
|
-
readonly onValueChange: _angular_core.OutputEmitterRef<
|
|
51
|
-
|
|
52
|
-
|
|
57
|
+
readonly onValueChange: _angular_core.OutputEmitterRef<RdxTabsValue>;
|
|
58
|
+
/** @ignore Set by `[rdxTabsList]`. */
|
|
59
|
+
readonly activateOnFocus: _angular_core.WritableSignal<boolean>;
|
|
60
|
+
/** @ignore Set by `[rdxTabsList]`. */
|
|
61
|
+
readonly tabListElement: _angular_core.WritableSignal<HTMLElement | null>;
|
|
62
|
+
/** @ignore */
|
|
63
|
+
readonly activationDirection: _angular_core.WritableSignal<RdxTabsActivationDirection>;
|
|
64
|
+
constructor();
|
|
53
65
|
/** @ignore */
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
static
|
|
66
|
+
setValue(value: RdxTabsValue): void;
|
|
67
|
+
private computeDirection;
|
|
68
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxTabsRoot, never>;
|
|
69
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxTabsRoot, "[rdxTabsRoot]", ["rdxTabsRoot"], { "value": { "alias": "value"; "required": false; "isSignal": true; }; "defaultValue": { "alias": "defaultValue"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "onValueChange": "onValueChange"; }, never, never, true, never>;
|
|
57
70
|
}
|
|
58
71
|
|
|
59
|
-
|
|
60
|
-
|
|
72
|
+
/**
|
|
73
|
+
* Groups the individual tab buttons and manages keyboard navigation.
|
|
74
|
+
*
|
|
75
|
+
* @see https://base-ui.com/react/components/tabs
|
|
76
|
+
*/
|
|
77
|
+
declare class RdxTabsList {
|
|
78
|
+
protected readonly rootContext: _radix_ng_primitives_tabs.RdxTabsRootContext;
|
|
79
|
+
private readonly elementRef;
|
|
80
|
+
private readonly rovingFocusGroup;
|
|
61
81
|
/**
|
|
62
|
-
*
|
|
82
|
+
* Whether a tab is activated when it receives focus (automatic activation).
|
|
83
|
+
* When `false`, tabs are only activated on click or Enter/Space.
|
|
84
|
+
*
|
|
85
|
+
* @default false
|
|
63
86
|
*/
|
|
64
|
-
readonly
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
87
|
+
readonly activateOnFocus: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
88
|
+
/**
|
|
89
|
+
* Whether keyboard navigation should loop from the last tab back to the first.
|
|
90
|
+
*
|
|
91
|
+
* @default true
|
|
92
|
+
*/
|
|
93
|
+
readonly loopFocus: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
94
|
+
constructor();
|
|
95
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxTabsList, never>;
|
|
96
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxTabsList, "[rdxTabsList]", ["rdxTabsList"], { "activateOnFocus": { "alias": "activateOnFocus"; "required": false; "isSignal": true; }; "loopFocus": { "alias": "loopFocus"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1$1.RdxRovingFocusGroupDirective; inputs: {}; outputs: {}; }]>;
|
|
70
97
|
}
|
|
71
98
|
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
99
|
+
/**
|
|
100
|
+
* An individual interactive tab button that activates its corresponding panel.
|
|
101
|
+
*
|
|
102
|
+
* @see https://base-ui.com/react/components/tabs
|
|
103
|
+
*/
|
|
104
|
+
declare class RdxTabsTab {
|
|
105
|
+
protected readonly rootContext: _radix_ng_primitives_tabs.RdxTabsRootContext;
|
|
106
|
+
private readonly rovingFocusItem;
|
|
107
|
+
/**
|
|
108
|
+
* A unique value that associates the tab with a panel.
|
|
109
|
+
*/
|
|
110
|
+
readonly value: _angular_core.InputSignal<RdxTabsValue>;
|
|
111
|
+
/**
|
|
112
|
+
* When `true`, prevents the user from interacting with the tab.
|
|
113
|
+
*/
|
|
114
|
+
readonly disabled: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
|
|
115
|
+
/** @ignore */
|
|
116
|
+
protected readonly tabId: _angular_core.Signal<string>;
|
|
117
|
+
/** @ignore */
|
|
118
|
+
protected readonly panelId: _angular_core.Signal<string>;
|
|
119
|
+
/** @ignore */
|
|
120
|
+
protected readonly active: _angular_core.Signal<boolean>;
|
|
121
|
+
constructor();
|
|
122
|
+
/** @ignore */
|
|
123
|
+
protected onMouseDown(event: MouseEvent): void;
|
|
124
|
+
/** @ignore */
|
|
125
|
+
protected onKeyDown(event: KeyboardEvent): void;
|
|
126
|
+
/** @ignore */
|
|
127
|
+
protected onFocus(): void;
|
|
128
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxTabsTab, never>;
|
|
129
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxTabsTab, "[rdxTabsTab]", ["rdxTabsTab"], { "value": { "alias": "value"; "required": true; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1$1.RdxRovingFocusItemDirective; inputs: { "allowShiftKey": "allowShiftKey"; }; outputs: {}; }]>;
|
|
79
130
|
}
|
|
80
131
|
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
132
|
+
/**
|
|
133
|
+
* A panel displayed when its corresponding tab is active.
|
|
134
|
+
*
|
|
135
|
+
* By default the panel stays in the DOM and is toggled with the `hidden` attribute. To unmount the
|
|
136
|
+
* contents while inactive (Base UI's default `keepMounted: false`), nest a `*rdxTabsPanelPresence`
|
|
137
|
+
* structural directive inside it; set `keepMounted` to keep the contents mounted regardless.
|
|
138
|
+
*
|
|
139
|
+
* @see https://base-ui.com/react/components/tabs
|
|
140
|
+
*/
|
|
141
|
+
declare class RdxTabsPanel {
|
|
142
|
+
private readonly elementRef;
|
|
143
|
+
protected readonly rootContext: _radix_ng_primitives_tabs.RdxTabsRootContext;
|
|
144
|
+
/**
|
|
145
|
+
* A unique value that associates the panel with a tab.
|
|
146
|
+
*/
|
|
147
|
+
readonly value: _angular_core.InputSignal<RdxTabsValue>;
|
|
87
148
|
/**
|
|
88
|
-
*
|
|
149
|
+
* Keep the panel contents mounted in the DOM while inactive (the contents are still hidden).
|
|
150
|
+
* Only relevant together with `*rdxTabsPanelPresence`, which otherwise unmounts them.
|
|
151
|
+
*
|
|
152
|
+
* @default false
|
|
89
153
|
*/
|
|
90
|
-
readonly
|
|
154
|
+
readonly keepMounted: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
155
|
+
private readonly transition;
|
|
156
|
+
/** Reactive enter/exit transition phase (`'starting'` | `'ending'` | `undefined`). */
|
|
157
|
+
readonly transitionStatus: _angular_core.Signal<_radix_ng_primitives_core.RdxTransitionStatus>;
|
|
158
|
+
/** @ignore */
|
|
159
|
+
protected readonly panelId: _angular_core.Signal<string>;
|
|
160
|
+
/** @ignore */
|
|
161
|
+
protected readonly tabId: _angular_core.Signal<string>;
|
|
162
|
+
/** Whether this panel's tab is currently selected. */
|
|
163
|
+
readonly active: _angular_core.Signal<boolean>;
|
|
164
|
+
/** `true` once a `*rdxTabsPanelPresence` child takes over mounting. */
|
|
165
|
+
private readonly hasPresence;
|
|
91
166
|
/**
|
|
92
|
-
*
|
|
167
|
+
* Whether the contents should be present for `*rdxTabsPanelPresence`. Flips with `active` so the
|
|
168
|
+
* presence directive owns the exit-animation timing (it keeps the node mounted until its exit
|
|
169
|
+
* `@keyframes` finishes); `keepMounted` keeps them mounted regardless.
|
|
93
170
|
*/
|
|
94
|
-
readonly
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
171
|
+
readonly present: _angular_core.Signal<boolean>;
|
|
172
|
+
/**
|
|
173
|
+
* The `hidden` attribute value. The panel is shown while active or while its exit transition
|
|
174
|
+
* runs. When a presence child unmounts the contents we no longer force `hidden` (the empty
|
|
175
|
+
* element renders nothing), unless `keepMounted` keeps the inactive contents around.
|
|
176
|
+
*/
|
|
177
|
+
protected readonly hidden: _angular_core.Signal<boolean>;
|
|
178
|
+
/** @ignore Index of the panel, derived from the order of its associated tab. */
|
|
179
|
+
protected readonly index: _angular_core.Signal<number | null>;
|
|
180
|
+
private previousActive;
|
|
181
|
+
private isFirstRun;
|
|
98
182
|
constructor();
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
static
|
|
103
|
-
|
|
183
|
+
/** @ignore Called by `RdxTabsPanelPresence` so the panel stops forcing `hidden`. */
|
|
184
|
+
markHasPresence(): void;
|
|
185
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxTabsPanel, never>;
|
|
186
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxTabsPanel, "[rdxTabsPanel]", ["rdxTabsPanel"], { "value": { "alias": "value"; "required": true; "isSignal": true; }; "keepMounted": { "alias": "keepMounted"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
interface TabGeometry {
|
|
190
|
+
top: number;
|
|
191
|
+
right: number;
|
|
192
|
+
bottom: number;
|
|
193
|
+
left: number;
|
|
194
|
+
width: number;
|
|
195
|
+
height: number;
|
|
196
|
+
}
|
|
197
|
+
/**
|
|
198
|
+
* A visual element that tracks the position and size of the active tab. Exposes the active tab
|
|
199
|
+
* geometry as CSS variables (`--active-tab-{top,right,bottom,left,width,height}`) so it can be
|
|
200
|
+
* animated with CSS.
|
|
201
|
+
*
|
|
202
|
+
* @see https://base-ui.com/react/components/tabs
|
|
203
|
+
*/
|
|
204
|
+
declare class RdxTabsIndicator {
|
|
205
|
+
protected readonly rootContext: _radix_ng_primitives_tabs.RdxTabsRootContext;
|
|
206
|
+
private readonly destroyRef;
|
|
207
|
+
/** @ignore */
|
|
208
|
+
protected readonly geometry: _angular_core.WritableSignal<TabGeometry | null>;
|
|
209
|
+
constructor();
|
|
210
|
+
private scheduleMeasure;
|
|
211
|
+
private measure;
|
|
212
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxTabsIndicator, never>;
|
|
213
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxTabsIndicator, "[rdxTabsIndicator]", ["rdxTabsIndicator"], {}, {}, never, never, true, never>;
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
interface RdxTabsRootContext {
|
|
217
|
+
/** Stable id used to derive tab / panel ids. */
|
|
218
|
+
readonly baseId: string;
|
|
219
|
+
/** The value of the currently selected tab. */
|
|
220
|
+
readonly value: Signal<RdxTabsValue | undefined>;
|
|
221
|
+
/** The orientation of the tabs. */
|
|
222
|
+
readonly orientation: Signal<DataOrientation>;
|
|
223
|
+
/** Direction the selection moved relative to the previously active tab. */
|
|
224
|
+
readonly activationDirection: Signal<RdxTabsActivationDirection>;
|
|
225
|
+
/** Whether tabs are activated on focus (set by the list). */
|
|
226
|
+
readonly activateOnFocus: Signal<boolean>;
|
|
227
|
+
/** The `[rdxTabsList]` host element, used to resolve tab order and indicator geometry. */
|
|
228
|
+
readonly tabListElement: Signal<HTMLElement | null>;
|
|
229
|
+
/** Select a tab by value. No-op when the value is unchanged. */
|
|
230
|
+
setValue(value: RdxTabsValue): void;
|
|
231
|
+
/** Mirror the list's `activateOnFocus` input onto the root context. */
|
|
232
|
+
setActivateOnFocus(value: boolean): void;
|
|
233
|
+
/** Register the list host element. */
|
|
234
|
+
setTabListElement(element: HTMLElement | null): void;
|
|
104
235
|
}
|
|
236
|
+
declare const injectTabsRootContext: (optional?: boolean) => RdxTabsRootContext | null;
|
|
237
|
+
declare const provideTabsRootContext: (useFactory: () => RdxTabsRootContext) => _angular_core.Provider;
|
|
105
238
|
|
|
239
|
+
declare const tabsImports: (typeof RdxTabsPanelPresence)[];
|
|
106
240
|
declare class RdxTabsModule {
|
|
107
241
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxTabsModule, never>;
|
|
108
|
-
static ɵmod: _angular_core.ɵɵNgModuleDeclaration<RdxTabsModule, never, [typeof
|
|
242
|
+
static ɵmod: _angular_core.ɵɵNgModuleDeclaration<RdxTabsModule, never, [typeof RdxTabsRoot, typeof RdxTabsList, typeof RdxTabsTab, typeof RdxTabsPanel, typeof RdxTabsPanelPresence, typeof RdxTabsIndicator], [typeof RdxTabsRoot, typeof RdxTabsList, typeof RdxTabsTab, typeof RdxTabsPanel, typeof RdxTabsPanelPresence, typeof RdxTabsIndicator]>;
|
|
109
243
|
static ɵinj: _angular_core.ɵɵInjectorDeclaration<RdxTabsModule>;
|
|
110
244
|
}
|
|
111
245
|
|
|
112
|
-
export {
|
|
113
|
-
export type {
|
|
246
|
+
export { RdxTabsIndicator, RdxTabsList, RdxTabsModule, RdxTabsPanel, RdxTabsPanelPresence, RdxTabsRoot, RdxTabsTab, injectTabsRootContext, provideTabsRootContext, tabsImports };
|
|
247
|
+
export type { RdxTabsActivationDirection, RdxTabsRootContext, RdxTabsValue };
|