@radix-ng/primitives 0.27.0 → 0.29.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/collapsible/src/collapsible-content.directive.d.ts +1 -1
- package/collapsible/src/collapsible-root.directive.d.ts +11 -11
- package/dialog/src/dialog-close.directive.d.ts +1 -1
- package/fesm2022/radix-ng-primitives-collapsible.mjs +20 -27
- package/fesm2022/radix-ng-primitives-collapsible.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-dialog.mjs +2 -3
- package/fesm2022/radix-ng-primitives-dialog.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-presence.mjs +250 -0
- package/fesm2022/radix-ng-primitives-presence.mjs.map +1 -0
- package/fesm2022/radix-ng-primitives-separator.mjs +1 -1
- package/fesm2022/radix-ng-primitives-separator.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-slider.mjs +101 -72
- package/fesm2022/radix-ng-primitives-slider.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-toggle-group.mjs +137 -280
- package/fesm2022/radix-ng-primitives-toggle-group.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-toggle.mjs +15 -2
- package/fesm2022/radix-ng-primitives-toggle.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-toolbar.mjs +155 -0
- package/fesm2022/radix-ng-primitives-toolbar.mjs.map +1 -0
- package/hover-card/src/hover-card-root.directive.d.ts +4 -4
- package/package.json +17 -8
- package/popover/src/popover-root.directive.d.ts +4 -4
- package/presence/index.d.ts +4 -0
- package/presence/src/presence.d.ts +42 -0
- package/presence/src/transitions/transition.collapse.d.ts +15 -0
- package/presence/src/transitions/transition.toast.d.ts +3 -0
- package/presence/src/types.d.ts +15 -0
- package/presence/src/utils.d.ts +42 -0
- package/schematics/collection.json +11 -0
- package/schematics/ng-add/index.d.ts +7 -0
- package/schematics/ng-add/index.js +31 -0
- package/schematics/ng-add/index.js.map +1 -0
- 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/separator/src/separator.directive.d.ts +1 -1
- package/slider/src/slider-horizontal.component.d.ts +6 -7
- package/slider/src/slider-impl.directive.d.ts +6 -7
- package/slider/src/slider-root.component.d.ts +78 -4
- package/slider/src/slider-vertical.component.d.ts +6 -7
- package/toggle/src/toggle.directive.d.ts +14 -1
- package/toggle-group/index.d.ts +1 -1
- package/toggle-group/src/toggle-group-item.directive.d.ts +20 -28
- package/toggle-group/src/toggle-group-item.token.d.ts +1 -0
- package/toggle-group/src/toggle-group-without-focus.directive.d.ts +69 -0
- package/toggle-group/src/toggle-group.directive.d.ts +26 -43
- package/toggle-group/src/toggle-group.token.d.ts +8 -4
- package/toolbar/README.md +3 -0
- package/toolbar/index.d.ts +19 -0
- package/toolbar/src/toolbar-button.directive.d.ts +11 -0
- package/toolbar/src/toolbar-link.directive.d.ts +7 -0
- package/toolbar/src/toolbar-root.directive.d.ts +8 -0
- package/toolbar/src/toolbar-root.token.d.ts +5 -0
- package/toolbar/src/toolbar-separator.directive.d.ts +6 -0
- package/toolbar/src/toolbar-toggle-group.directive.d.ts +6 -0
- package/toolbar/src/toolbar-toggle-item.directive.d.ts +6 -0
- package/tooltip/src/tooltip-root.directive.d.ts +4 -4
- package/compodoc/documentation.json +0 -39701
- package/toggle-group/src/toggle-group-multiple.directive.d.ts +0 -99
@@ -0,0 +1,42 @@
|
|
1
|
+
import { NgZone } from '@angular/core';
|
2
|
+
import { Observable } from 'rxjs';
|
3
|
+
/**
|
4
|
+
* Ensures that the observable stream runs inside Angular's NgZone.
|
5
|
+
*
|
6
|
+
* This function is a higher-order function that takes an observable stream as input and ensures
|
7
|
+
* that all emissions, errors, and completion notifications are run inside Angular's NgZone. This
|
8
|
+
* is particularly useful for ensuring that change detection is triggered properly in Angular
|
9
|
+
* applications.
|
10
|
+
*
|
11
|
+
* @template T - The type of the items emitted by the observable.
|
12
|
+
* @param {NgZone} zone - The Angular zone to control the change detection context.
|
13
|
+
* @returns {(source: Observable<T>) => Observable<T>} - A function that takes an observable as input
|
14
|
+
* and returns an observable that runs inside Angular's NgZone.
|
15
|
+
*
|
16
|
+
* Example usage:
|
17
|
+
*
|
18
|
+
* const source$ = of('some value');
|
19
|
+
* const zoned$ = source$.pipe(runInZone(zone));
|
20
|
+
* zoned$.subscribe(value => {
|
21
|
+
* console.log('Value:', value);
|
22
|
+
* });
|
23
|
+
*/
|
24
|
+
declare function runInZone<T>(zone: NgZone): (source: Observable<T>) => Observable<T>;
|
25
|
+
/**
|
26
|
+
* Calculates the total transition duration in milliseconds for a given HTML element.
|
27
|
+
*
|
28
|
+
* This function retrieves the computed style of the specified element and extracts the
|
29
|
+
* transition duration and delay properties. It then converts these values from seconds
|
30
|
+
* to milliseconds and returns their sum, representing the total transition duration.
|
31
|
+
*
|
32
|
+
* @param {HTMLElement} element - The HTML element for which to calculate the transition duration.
|
33
|
+
* @returns {number} - The total transition duration in milliseconds.
|
34
|
+
*
|
35
|
+
* Example usage:
|
36
|
+
*
|
37
|
+
* const durationMs = getTransitionDurationMs(element);
|
38
|
+
* console.log(`Transition duration: ${durationMs} ms`);
|
39
|
+
*/
|
40
|
+
declare function getTransitionDurationMs(element: HTMLElement): number;
|
41
|
+
export { getTransitionDurationMs, runInZone };
|
42
|
+
export declare function triggerReflow(element: HTMLElement): DOMRect;
|
@@ -0,0 +1,11 @@
|
|
1
|
+
{
|
2
|
+
"$schema": "../node_modules/@angular-devkit/schematics/collection-schema.json",
|
3
|
+
"schematics": {
|
4
|
+
"ng-add": {
|
5
|
+
"description": "Add Radix Angular to the application.",
|
6
|
+
"factory": "./ng-add",
|
7
|
+
"schema": "./ng-add/schema.json",
|
8
|
+
"aliases": ["install"]
|
9
|
+
}
|
10
|
+
}
|
11
|
+
}
|
@@ -0,0 +1,7 @@
|
|
1
|
+
import { Rule } from '@angular-devkit/schematics';
|
2
|
+
import { Schema } from './schema';
|
3
|
+
/**
|
4
|
+
* This is executed when `ng add @radix-ng/primitives` is run.
|
5
|
+
* It installs all dependencies in the 'package.json'.
|
6
|
+
*/
|
7
|
+
export default function (options: Schema): Rule;
|
@@ -0,0 +1,31 @@
|
|
1
|
+
"use strict";
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
3
|
+
exports.default = default_1;
|
4
|
+
const schematics_1 = require("@angular-devkit/schematics");
|
5
|
+
const tasks_1 = require("@angular-devkit/schematics/tasks");
|
6
|
+
const package_config_1 = require("@angular/cdk/schematics/ng-add/package-config");
|
7
|
+
const utility_1 = require("@schematics/angular/utility");
|
8
|
+
const DEPENDENCY_VERSIONS = {
|
9
|
+
ANGULAR_CDK: '^19.0.0',
|
10
|
+
RADIX_NG: '^28.0.0'
|
11
|
+
};
|
12
|
+
/**
|
13
|
+
* This is executed when `ng add @radix-ng/primitives` is run.
|
14
|
+
* It installs all dependencies in the 'package.json'.
|
15
|
+
*/
|
16
|
+
function default_1(options) {
|
17
|
+
return async (tree, context) => {
|
18
|
+
const { project } = options;
|
19
|
+
if (project) {
|
20
|
+
const workspace = await (0, utility_1.readWorkspace)(tree);
|
21
|
+
const projectWorkspace = workspace.projects.get(project);
|
22
|
+
if (!projectWorkspace) {
|
23
|
+
throw new schematics_1.SchematicsException(`Unable to find project '${project}' in the workspace`);
|
24
|
+
}
|
25
|
+
}
|
26
|
+
(0, package_config_1.addPackageToPackageJson)(tree, '@angular/cdk', DEPENDENCY_VERSIONS.ANGULAR_CDK);
|
27
|
+
(0, package_config_1.addPackageToPackageJson)(tree, '@radix-ng/primitives', DEPENDENCY_VERSIONS.RADIX_NG);
|
28
|
+
context.addTask(new tasks_1.NodePackageInstallTask());
|
29
|
+
};
|
30
|
+
}
|
31
|
+
//# sourceMappingURL=index.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../packages/primitives/schematics/ng-add/index.ts"],"names":[],"mappings":";;AAeA,4BAkBC;AAjCD,2DAA+F;AAC/F,4DAA0E;AAC1E,kFAAwF;AACxF,yDAA4D;AAG5D,MAAM,mBAAmB,GAAG;IACxB,WAAW,EAAE,SAAS;IACtB,QAAQ,EAAE,SAAS;CACtB,CAAC;AAEF;;;GAGG;AACH,mBAAyB,OAAe;IACpC,OAAO,KAAK,EAAE,IAAU,EAAE,OAAyB,EAAE,EAAE;QACnD,MAAM,EAAE,OAAO,EAAE,GAAG,OAAO,CAAC;QAE5B,IAAI,OAAO,EAAE,CAAC;YACV,MAAM,SAAS,GAAG,MAAM,IAAA,uBAAa,EAAC,IAAI,CAAC,CAAC;YAC5C,MAAM,gBAAgB,GAAG,SAAS,CAAC,QAAQ,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;YAEzD,IAAI,CAAC,gBAAgB,EAAE,CAAC;gBACpB,MAAM,IAAI,gCAAmB,CAAC,2BAA2B,OAAO,oBAAoB,CAAC,CAAC;YAC1F,CAAC;QACL,CAAC;QAED,IAAA,wCAAuB,EAAC,IAAI,EAAE,cAAc,EAAE,mBAAmB,CAAC,WAAW,CAAC,CAAC;QAC/E,IAAA,wCAAuB,EAAC,IAAI,EAAE,sBAAsB,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAC;QAEpF,OAAO,CAAC,OAAO,CAAC,IAAI,8BAAsB,EAAE,CAAC,CAAC;IAClD,CAAC,CAAC;AACN,CAAC"}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"schema.js","sourceRoot":"","sources":["../../../../packages/primitives/schematics/ng-add/schema.ts"],"names":[],"mappings":""}
|
@@ -50,7 +50,7 @@ export declare class RdxSeparatorRootDirective {
|
|
50
50
|
*
|
51
51
|
* @ignore
|
52
52
|
*/
|
53
|
-
protected readonly computedAriaOrientation: import("@angular/core").Signal<"vertical" |
|
53
|
+
protected readonly computedAriaOrientation: import("@angular/core").Signal<"vertical" | undefined>;
|
54
54
|
static ɵfac: i0.ɵɵFactoryDeclaration<RdxSeparatorRootDirective, never>;
|
55
55
|
static ɵdir: i0.ɵɵDirectiveDeclaration<RdxSeparatorRootDirective, "div[rdxSeparatorRoot]", never, { "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "decorative": { "alias": "decorative"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
56
56
|
}
|
@@ -1,5 +1,4 @@
|
|
1
1
|
import { BooleanInput } from '@angular/cdk/coercion';
|
2
|
-
import { EventEmitter } from '@angular/core';
|
3
2
|
import * as i0 from "@angular/core";
|
4
3
|
export declare class RdxSliderHorizontalComponent {
|
5
4
|
private readonly rootContext;
|
@@ -8,15 +7,15 @@ export declare class RdxSliderHorizontalComponent {
|
|
8
7
|
min: number;
|
9
8
|
max: number;
|
10
9
|
className: string;
|
11
|
-
slideStart:
|
12
|
-
slideMove:
|
13
|
-
slideEnd:
|
14
|
-
stepKeyDown:
|
10
|
+
readonly slideStart: import("@angular/core").OutputEmitterRef<number>;
|
11
|
+
readonly slideMove: import("@angular/core").OutputEmitterRef<number>;
|
12
|
+
readonly slideEnd: import("@angular/core").OutputEmitterRef<void>;
|
13
|
+
readonly stepKeyDown: import("@angular/core").OutputEmitterRef<{
|
15
14
|
event: KeyboardEvent;
|
16
15
|
direction: number;
|
17
16
|
}>;
|
18
|
-
endKeyDown:
|
19
|
-
homeKeyDown:
|
17
|
+
readonly endKeyDown: import("@angular/core").OutputEmitterRef<KeyboardEvent>;
|
18
|
+
readonly homeKeyDown: import("@angular/core").OutputEmitterRef<KeyboardEvent>;
|
20
19
|
private readonly sliderElement;
|
21
20
|
private readonly rect;
|
22
21
|
onSlideStart(event: PointerEvent): void;
|
@@ -1,14 +1,13 @@
|
|
1
|
-
import { EventEmitter } from '@angular/core';
|
2
1
|
import { RdxSliderRootComponent } from './slider-root.component';
|
3
2
|
import * as i0 from "@angular/core";
|
4
3
|
export declare class RdxSliderImplDirective {
|
5
4
|
protected readonly rootContext: RdxSliderRootComponent;
|
6
|
-
slideStart:
|
7
|
-
slideMove:
|
8
|
-
slideEnd:
|
9
|
-
homeKeyDown:
|
10
|
-
endKeyDown:
|
11
|
-
stepKeyDown:
|
5
|
+
readonly slideStart: import("@angular/core").OutputEmitterRef<PointerEvent>;
|
6
|
+
readonly slideMove: import("@angular/core").OutputEmitterRef<PointerEvent>;
|
7
|
+
readonly slideEnd: import("@angular/core").OutputEmitterRef<PointerEvent>;
|
8
|
+
readonly homeKeyDown: import("@angular/core").OutputEmitterRef<KeyboardEvent>;
|
9
|
+
readonly endKeyDown: import("@angular/core").OutputEmitterRef<KeyboardEvent>;
|
10
|
+
readonly stepKeyDown: import("@angular/core").OutputEmitterRef<KeyboardEvent>;
|
12
11
|
onKeyDown(event: KeyboardEvent): void;
|
13
12
|
onPointerDown(event: PointerEvent): void;
|
14
13
|
onPointerMove(event: PointerEvent): void;
|
@@ -1,22 +1,96 @@
|
|
1
1
|
import { BooleanInput, NumberInput } from '@angular/cdk/coercion';
|
2
|
-
import {
|
2
|
+
import { OnInit } from '@angular/core';
|
3
3
|
import { RdxSliderOrientationContextService } from './slider-orientation-context.service';
|
4
4
|
import * as i0 from "@angular/core";
|
5
|
+
/**
|
6
|
+
* @group Components
|
7
|
+
*/
|
5
8
|
export declare class RdxSliderRootComponent implements OnInit {
|
6
9
|
/** @ignore */
|
7
10
|
readonly orientationContext: RdxSliderOrientationContextService;
|
11
|
+
/**
|
12
|
+
* The minimum value for the range.
|
13
|
+
*
|
14
|
+
* @group Props
|
15
|
+
* @defaultValue 0
|
16
|
+
*/
|
8
17
|
readonly min: import("@angular/core").InputSignalWithTransform<number, NumberInput>;
|
18
|
+
/**
|
19
|
+
* The maximum value for the range.
|
20
|
+
*
|
21
|
+
* @group Props
|
22
|
+
* @defaultValue 100
|
23
|
+
*/
|
9
24
|
readonly max: import("@angular/core").InputSignalWithTransform<number, NumberInput>;
|
25
|
+
/**
|
26
|
+
* The stepping interval.
|
27
|
+
*
|
28
|
+
* @group Props
|
29
|
+
* @defaultValue 1
|
30
|
+
*/
|
10
31
|
readonly step: import("@angular/core").InputSignalWithTransform<number, NumberInput>;
|
32
|
+
/**
|
33
|
+
* The minimum permitted steps between multiple thumbs.
|
34
|
+
*
|
35
|
+
* @group Props
|
36
|
+
* @defaultValue 0
|
37
|
+
*/
|
11
38
|
readonly minStepsBetweenThumbs: import("@angular/core").InputSignalWithTransform<number, NumberInput>;
|
39
|
+
/**
|
40
|
+
* The orientation of the slider.
|
41
|
+
*
|
42
|
+
* @group Props
|
43
|
+
* @defaultValue 'horizontal'
|
44
|
+
*/
|
12
45
|
readonly orientation: import("@angular/core").InputSignal<"horizontal" | "vertical">;
|
46
|
+
/**
|
47
|
+
* When true, prevents the user from interacting with the slider.
|
48
|
+
*
|
49
|
+
* @group Props
|
50
|
+
* @defaultValue false
|
51
|
+
*/
|
13
52
|
readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, BooleanInput>;
|
53
|
+
/**
|
54
|
+
* Whether the slider is visually inverted.
|
55
|
+
*
|
56
|
+
* @group Props
|
57
|
+
* @defaultValue false
|
58
|
+
*/
|
14
59
|
readonly inverted: import("@angular/core").InputSignalWithTransform<boolean, BooleanInput>;
|
60
|
+
/**
|
61
|
+
* The reading direction of the combobox when applicable.
|
62
|
+
*
|
63
|
+
* @group Props
|
64
|
+
* @defaultValue 'ltr'
|
65
|
+
*/
|
15
66
|
readonly dir: import("@angular/core").InputSignal<"ltr" | "rtl">;
|
16
67
|
className: string;
|
17
|
-
|
18
|
-
|
68
|
+
/**
|
69
|
+
* Style class of the component.
|
70
|
+
*
|
71
|
+
* @group Props
|
72
|
+
*/
|
73
|
+
readonly styleClass: import("@angular/core").InputSignal<string | undefined>;
|
74
|
+
/**
|
75
|
+
* The controlled value of the slider.
|
76
|
+
*
|
77
|
+
* @group Props
|
78
|
+
*/
|
19
79
|
readonly modelValue: import("@angular/core").ModelSignal<number[]>;
|
80
|
+
/**
|
81
|
+
* Event handler called when the slider value changes.
|
82
|
+
*
|
83
|
+
* @group Emits
|
84
|
+
*/
|
85
|
+
readonly valueChange: import("@angular/core").OutputEmitterRef<number[]>;
|
86
|
+
/**
|
87
|
+
* Event handler called when the value changes at the end of an interaction.
|
88
|
+
*
|
89
|
+
* Useful when you only need to capture a final value e.g. to update a backend service.
|
90
|
+
*
|
91
|
+
* @group Emits
|
92
|
+
*/
|
93
|
+
readonly valueCommit: import("@angular/core").OutputEmitterRef<number[]>;
|
20
94
|
/** @ignore */
|
21
95
|
readonly valueIndexToChange: import("@angular/core").ModelSignal<number>;
|
22
96
|
/** @ignore */
|
@@ -45,5 +119,5 @@ export declare class RdxSliderRootComponent implements OnInit {
|
|
45
119
|
/** @ignore */
|
46
120
|
updateValues(value: number, atIndex: number, commit?: boolean): void;
|
47
121
|
static ɵfac: i0.ɵɵFactoryDeclaration<RdxSliderRootComponent, never>;
|
48
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<RdxSliderRootComponent, "rdx-slider", never, { "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "minStepsBetweenThumbs": { "alias": "minStepsBetweenThumbs"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "inverted": { "alias": "inverted"; "required": false; "isSignal": true; }; "dir": { "alias": "dir"; "required": false; "isSignal": true; }; "className": { "alias": "className"; "required": false; }; "modelValue": { "alias": "modelValue"; "required": false; "isSignal": true; }; "valueIndexToChange": { "alias": "valueIndexToChange"; "required": false; "isSignal": true; }; "valuesBeforeSlideStart": { "alias": "valuesBeforeSlideStart"; "required": false; "isSignal": true; }; }, { "
|
122
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<RdxSliderRootComponent, "rdx-slider", never, { "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "minStepsBetweenThumbs": { "alias": "minStepsBetweenThumbs"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "inverted": { "alias": "inverted"; "required": false; "isSignal": true; }; "dir": { "alias": "dir"; "required": false; "isSignal": true; }; "className": { "alias": "className"; "required": false; }; "styleClass": { "alias": "styleClass"; "required": false; "isSignal": true; }; "modelValue": { "alias": "modelValue"; "required": false; "isSignal": true; }; "valueIndexToChange": { "alias": "valueIndexToChange"; "required": false; "isSignal": true; }; "valuesBeforeSlideStart": { "alias": "valuesBeforeSlideStart"; "required": false; "isSignal": true; }; }, { "modelValue": "modelValueChange"; "valueChange": "valueChange"; "valueCommit": "valueCommit"; "valueIndexToChange": "valueIndexToChangeChange"; "valuesBeforeSlideStart": "valuesBeforeSlideStartChange"; }, never, ["*"], true, never>;
|
49
123
|
}
|
@@ -1,5 +1,4 @@
|
|
1
1
|
import { BooleanInput } from '@angular/cdk/coercion';
|
2
|
-
import { EventEmitter } from '@angular/core';
|
3
2
|
import * as i0 from "@angular/core";
|
4
3
|
export declare class RdxSliderVerticalComponent {
|
5
4
|
private readonly rootContext;
|
@@ -8,15 +7,15 @@ export declare class RdxSliderVerticalComponent {
|
|
8
7
|
min: number;
|
9
8
|
max: number;
|
10
9
|
className: string;
|
11
|
-
slideStart:
|
12
|
-
slideMove:
|
13
|
-
slideEnd:
|
14
|
-
stepKeyDown:
|
10
|
+
readonly slideStart: import("@angular/core").OutputEmitterRef<number>;
|
11
|
+
readonly slideMove: import("@angular/core").OutputEmitterRef<number>;
|
12
|
+
readonly slideEnd: import("@angular/core").OutputEmitterRef<void>;
|
13
|
+
readonly stepKeyDown: import("@angular/core").OutputEmitterRef<{
|
15
14
|
event: KeyboardEvent;
|
16
15
|
direction: number;
|
17
16
|
}>;
|
18
|
-
endKeyDown:
|
19
|
-
homeKeyDown:
|
17
|
+
readonly endKeyDown: import("@angular/core").OutputEmitterRef<KeyboardEvent>;
|
18
|
+
readonly homeKeyDown: import("@angular/core").OutputEmitterRef<KeyboardEvent>;
|
20
19
|
private readonly sliderElement;
|
21
20
|
private readonly rect;
|
22
21
|
onSlideStart(event: PointerEvent): void;
|
@@ -25,26 +25,39 @@ export interface ToggleProps {
|
|
25
25
|
}
|
26
26
|
export type DataState = 'on' | 'off';
|
27
27
|
export declare const TOGGLE_VALUE_ACCESSOR: any;
|
28
|
+
/**
|
29
|
+
* @group Components
|
30
|
+
*/
|
28
31
|
export declare class RdxToggleDirective implements ControlValueAccessor {
|
29
32
|
/**
|
30
33
|
* The pressed state of the toggle when it is initially rendered.
|
31
34
|
* Use when you do not need to control its pressed state.
|
35
|
+
*
|
36
|
+
* @group Props
|
32
37
|
*/
|
33
38
|
readonly defaultPressed: import("@angular/core").InputSignalWithTransform<boolean, BooleanInput>;
|
34
39
|
/**
|
35
40
|
* The controlled pressed state of the toggle.
|
36
41
|
* Must be used in conjunction with `onPressedChange`.
|
42
|
+
*
|
43
|
+
* @group Props
|
37
44
|
*/
|
38
45
|
readonly pressed: import("@angular/core").ModelSignal<boolean>;
|
39
46
|
/**
|
40
47
|
* When true, prevents the user from interacting with the toggle.
|
48
|
+
*
|
49
|
+
* @group Props
|
41
50
|
*/
|
42
51
|
readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, BooleanInput>;
|
43
52
|
/** @ignore */
|
53
|
+
readonly disabledModel: import("@angular/core").ModelSignal<boolean>;
|
54
|
+
/** @ignore */
|
44
55
|
readonly disabledState: import("@angular/core").Signal<boolean>;
|
45
56
|
protected readonly dataState: import("@angular/core").Signal<DataState>;
|
46
57
|
/**
|
47
58
|
* Event handler called when the pressed state of the toggle changes.
|
59
|
+
*
|
60
|
+
* @group Emits
|
48
61
|
*/
|
49
62
|
readonly onPressedChange: OutputEmitterRef<boolean>;
|
50
63
|
protected togglePressed(): void;
|
@@ -61,5 +74,5 @@ export declare class RdxToggleDirective implements ControlValueAccessor {
|
|
61
74
|
/** @ignore */
|
62
75
|
setDisabledState(isDisabled: boolean): void;
|
63
76
|
static ɵfac: i0.ɵɵFactoryDeclaration<RdxToggleDirective, never>;
|
64
|
-
static ɵdir: i0.ɵɵDirectiveDeclaration<RdxToggleDirective, "[rdxToggle]", ["rdxToggle"], { "defaultPressed": { "alias": "defaultPressed"; "required": false; "isSignal": true; }; "pressed": { "alias": "pressed"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "pressed": "pressedChange"; "onPressedChange": "onPressedChange"; }, never, never, true, never>;
|
77
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<RdxToggleDirective, "[rdxToggle]", ["rdxToggle"], { "defaultPressed": { "alias": "defaultPressed"; "required": false; "isSignal": true; }; "pressed": { "alias": "pressed"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "disabledModel": { "alias": "disabledModel"; "required": false; "isSignal": true; }; }, { "pressed": "pressedChange"; "disabledModel": "disabledModelChange"; "onPressedChange": "onPressedChange"; }, never, never, true, never>;
|
65
78
|
}
|
package/toggle-group/index.d.ts
CHANGED
@@ -1,5 +1,5 @@
|
|
1
1
|
export * from './src/toggle-group-item.directive';
|
2
2
|
export * from './src/toggle-group-item.token';
|
3
|
-
export * from './src/toggle-group-
|
3
|
+
export * from './src/toggle-group-without-focus.directive';
|
4
4
|
export * from './src/toggle-group.directive';
|
5
5
|
export * from './src/toggle-group.token';
|
@@ -1,45 +1,37 @@
|
|
1
|
-
import {
|
2
|
-
import { OnChanges, SimpleChanges } from '@angular/core';
|
1
|
+
import { BooleanInput } from '@angular/cdk/coercion';
|
3
2
|
import * as i0 from "@angular/core";
|
4
|
-
|
3
|
+
import * as i1 from "@radix-ng/primitives/roving-focus";
|
4
|
+
import * as i2 from "@radix-ng/primitives/toggle";
|
5
|
+
/**
|
6
|
+
* @group Components
|
7
|
+
*/
|
8
|
+
export declare class RdxToggleGroupItemDirective {
|
9
|
+
private readonly rdxToggleDirective;
|
10
|
+
private readonly rdxRovingFocusItemDirective;
|
5
11
|
/**
|
6
12
|
* Access the toggle group.
|
7
13
|
* @ignore
|
8
14
|
*/
|
9
|
-
protected readonly
|
10
|
-
private readonly elementRef;
|
15
|
+
protected readonly rootContext: import("./toggle-group.token").IRdxToggleGroup;
|
11
16
|
/**
|
12
17
|
* The value of this toggle button.
|
18
|
+
*
|
19
|
+
* @group Props
|
13
20
|
*/
|
14
|
-
value: string
|
21
|
+
readonly value: import("@angular/core").InputSignal<string>;
|
15
22
|
/**
|
16
23
|
* Whether this toggle button is disabled.
|
17
|
-
* @
|
24
|
+
* @defaultValue false
|
25
|
+
* @group Props
|
18
26
|
*/
|
19
|
-
disabled: boolean
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
protected get checked(): boolean;
|
24
|
-
/**
|
25
|
-
* @ignore
|
26
|
-
*/
|
27
|
-
ngOnChanges(changes: SimpleChanges): void;
|
28
|
-
/**
|
29
|
-
* @ignore
|
30
|
-
*/
|
31
|
-
focus(): void;
|
27
|
+
readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, BooleanInput>;
|
28
|
+
private readonly isPressed;
|
29
|
+
private readonly isDisabled;
|
30
|
+
constructor();
|
32
31
|
/**
|
33
32
|
* @ignore
|
34
33
|
*/
|
35
34
|
toggle(): void;
|
36
|
-
/**
|
37
|
-
* Ensure the disabled state is propagated to the roving focus item.
|
38
|
-
* @internal
|
39
|
-
* @ignore
|
40
|
-
*/
|
41
|
-
updateDisabled(): void;
|
42
35
|
static ɵfac: i0.ɵɵFactoryDeclaration<RdxToggleGroupItemDirective, never>;
|
43
|
-
static ɵdir: i0.ɵɵDirectiveDeclaration<RdxToggleGroupItemDirective, "[rdxToggleGroupItem]", ["rdxToggleGroupItem"], { "value": { "alias": "value"; "required": true; }; "disabled": { "alias": "disabled"; "required": false; }; }, {}, never, never, true,
|
44
|
-
static ngAcceptInputType_disabled: unknown;
|
36
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<RdxToggleGroupItemDirective, "[rdxToggleGroupItem]", ["rdxToggleGroupItem"], { "value": { "alias": "value"; "required": true; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1.RdxRovingFocusItemDirective; inputs: { "focusable": "focusable"; "active": "active"; "allowShiftKey": "allowShiftKey"; }; outputs: {}; }, { directive: typeof i2.RdxToggleDirective; inputs: { "pressed": "pressed"; "disabled": "disabled"; }; outputs: {}; }]>;
|
45
37
|
}
|
@@ -1,3 +1,4 @@
|
|
1
1
|
import { InjectionToken } from '@angular/core';
|
2
2
|
import type { RdxToggleGroupItemDirective } from './toggle-group-item.directive';
|
3
3
|
export declare const RdxToggleGroupItemToken: InjectionToken<RdxToggleGroupItemDirective>;
|
4
|
+
export declare function injectToggleGroupItem(): RdxToggleGroupItemDirective;
|
@@ -0,0 +1,69 @@
|
|
1
|
+
import { BooleanInput } from '@angular/cdk/coercion';
|
2
|
+
import { ControlValueAccessor } from '@angular/forms';
|
3
|
+
import * as i0 from "@angular/core";
|
4
|
+
export declare class RdxToggleGroupWithoutFocusDirective implements ControlValueAccessor {
|
5
|
+
/**
|
6
|
+
* @ignore
|
7
|
+
*/
|
8
|
+
readonly id: string;
|
9
|
+
/**
|
10
|
+
* @group Props
|
11
|
+
*/
|
12
|
+
readonly value: import("@angular/core").ModelSignal<string | string[] | undefined>;
|
13
|
+
/**
|
14
|
+
* @group Props
|
15
|
+
*/
|
16
|
+
readonly type: import("@angular/core").InputSignal<"single" | "multiple">;
|
17
|
+
/**
|
18
|
+
* Whether the toggle group is disabled.
|
19
|
+
* @defaultValue false
|
20
|
+
* @group Props
|
21
|
+
*/
|
22
|
+
readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, BooleanInput>;
|
23
|
+
/**
|
24
|
+
* Event emitted when the selected toggle button changes.
|
25
|
+
* @group Emits
|
26
|
+
*/
|
27
|
+
readonly onValueChange: import("@angular/core").OutputEmitterRef<string | string[] | undefined>;
|
28
|
+
/**
|
29
|
+
* The value change callback.
|
30
|
+
*/
|
31
|
+
private onChange?;
|
32
|
+
/**
|
33
|
+
* onTouch function registered via registerOnTouch (ControlValueAccessor).
|
34
|
+
*/
|
35
|
+
protected onTouched?: () => void;
|
36
|
+
/**
|
37
|
+
* Toggle a value.
|
38
|
+
* @param value The value to toggle.
|
39
|
+
* @ignore
|
40
|
+
*/
|
41
|
+
toggle(value: string): void;
|
42
|
+
/**
|
43
|
+
* Select a value from Angular forms.
|
44
|
+
* @param value The value to select.
|
45
|
+
* @ignore
|
46
|
+
*/
|
47
|
+
writeValue(value: string): void;
|
48
|
+
/**
|
49
|
+
* Register a callback to be called when the value changes.
|
50
|
+
* @param fn The callback to register.
|
51
|
+
* @ignore
|
52
|
+
*/
|
53
|
+
registerOnChange(fn: (value: string | string[] | undefined) => void): void;
|
54
|
+
/**
|
55
|
+
* Register a callback to be called when the toggle group is touched.
|
56
|
+
* @param fn The callback to register.
|
57
|
+
* @ignore
|
58
|
+
*/
|
59
|
+
registerOnTouched(fn: () => void): void;
|
60
|
+
private readonly accessorDisabled;
|
61
|
+
/**
|
62
|
+
* Set the disabled state of the toggle group.
|
63
|
+
* @param isDisabled Whether the toggle group is disabled.
|
64
|
+
* @ignore
|
65
|
+
*/
|
66
|
+
setDisabledState(isDisabled: boolean): void;
|
67
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<RdxToggleGroupWithoutFocusDirective, never>;
|
68
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<RdxToggleGroupWithoutFocusDirective, "[rdxToggleGroupWithoutFocus]", ["rdxToggleGroupWithoutFocus"], { "value": { "alias": "value"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "onValueChange": "onValueChange"; }, never, never, true, never>;
|
69
|
+
}
|
@@ -1,39 +1,34 @@
|
|
1
|
-
import {
|
1
|
+
import { BooleanInput } from '@angular/cdk/coercion';
|
2
2
|
import { ControlValueAccessor } from '@angular/forms';
|
3
|
-
import type { RdxToggleGroupItemDirective } from './toggle-group-item.directive';
|
4
3
|
import * as i0 from "@angular/core";
|
5
|
-
|
4
|
+
import * as i1 from "@radix-ng/primitives/roving-focus";
|
5
|
+
/**
|
6
|
+
* @group Components
|
7
|
+
*/
|
8
|
+
export declare class RdxToggleGroupDirective implements ControlValueAccessor {
|
6
9
|
/**
|
7
|
-
*
|
10
|
+
* @ignore
|
8
11
|
*/
|
9
|
-
|
12
|
+
readonly id: string;
|
10
13
|
/**
|
11
|
-
*
|
12
|
-
* @default 'horizontal'
|
14
|
+
* @group Props
|
13
15
|
*/
|
14
|
-
|
16
|
+
readonly value: import("@angular/core").ModelSignal<string | string[] | undefined>;
|
15
17
|
/**
|
16
|
-
*
|
17
|
-
* @default false
|
18
|
+
* @group Props
|
18
19
|
*/
|
19
|
-
|
20
|
+
readonly type: import("@angular/core").InputSignal<"single" | "multiple">;
|
20
21
|
/**
|
21
|
-
* Whether the toggle group
|
22
|
-
* @
|
22
|
+
* Whether the toggle group is disabled.
|
23
|
+
* @defaultValue false
|
24
|
+
* @group Props
|
23
25
|
*/
|
24
|
-
|
26
|
+
readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, BooleanInput>;
|
25
27
|
/**
|
26
28
|
* Event emitted when the selected toggle button changes.
|
29
|
+
* @group Emits
|
27
30
|
*/
|
28
|
-
readonly
|
29
|
-
/**
|
30
|
-
* Access the buttons in the toggle group.
|
31
|
-
*/
|
32
|
-
protected buttons?: QueryList<RdxToggleGroupItemDirective>;
|
33
|
-
/**
|
34
|
-
* FocusKeyManager to manage keyboard interactions.
|
35
|
-
*/
|
36
|
-
private keyManager;
|
31
|
+
readonly onValueChange: import("@angular/core").OutputEmitterRef<string | string[] | undefined>;
|
37
32
|
/**
|
38
33
|
* The value change callback.
|
39
34
|
*/
|
@@ -42,49 +37,37 @@ export declare class RdxToggleGroupDirective implements OnChanges, AfterContentI
|
|
42
37
|
* onTouch function registered via registerOnTouch (ControlValueAccessor).
|
43
38
|
*/
|
44
39
|
protected onTouched?: () => void;
|
45
|
-
ngOnChanges(changes: SimpleChanges): void;
|
46
|
-
ngAfterContentInit(): void;
|
47
|
-
protected onFocusIn(): void;
|
48
|
-
protected handleKeydown(event: KeyboardEvent): void;
|
49
|
-
/**
|
50
|
-
* Determine if a value is selected.
|
51
|
-
* @param value The value to check.
|
52
|
-
* @returns Whether the value is selected.
|
53
|
-
* @internal
|
54
|
-
*/
|
55
|
-
isSelected(value: string): boolean;
|
56
40
|
/**
|
57
41
|
* Toggle a value.
|
58
42
|
* @param value The value to toggle.
|
59
|
-
* @
|
43
|
+
* @ignore
|
60
44
|
*/
|
61
45
|
toggle(value: string): void;
|
62
46
|
/**
|
63
47
|
* Select a value from Angular forms.
|
64
48
|
* @param value The value to select.
|
65
|
-
* @
|
49
|
+
* @ignore
|
66
50
|
*/
|
67
51
|
writeValue(value: string): void;
|
68
52
|
/**
|
69
53
|
* Register a callback to be called when the value changes.
|
70
54
|
* @param fn The callback to register.
|
71
|
-
* @
|
55
|
+
* @ignore
|
72
56
|
*/
|
73
|
-
registerOnChange(fn: (value: string |
|
57
|
+
registerOnChange(fn: (value: string | string[] | undefined) => void): void;
|
74
58
|
/**
|
75
59
|
* Register a callback to be called when the toggle group is touched.
|
76
60
|
* @param fn The callback to register.
|
77
|
-
* @
|
61
|
+
* @ignore
|
78
62
|
*/
|
79
63
|
registerOnTouched(fn: () => void): void;
|
64
|
+
private readonly accessorDisabled;
|
80
65
|
/**
|
81
66
|
* Set the disabled state of the toggle group.
|
82
67
|
* @param isDisabled Whether the toggle group is disabled.
|
83
|
-
* @
|
68
|
+
* @ignore
|
84
69
|
*/
|
85
70
|
setDisabledState(isDisabled: boolean): void;
|
86
71
|
static ɵfac: i0.ɵɵFactoryDeclaration<RdxToggleGroupDirective, never>;
|
87
|
-
static ɵdir: i0.ɵɵDirectiveDeclaration<RdxToggleGroupDirective, "[rdxToggleGroup]", ["rdxToggleGroup"], { "value": { "alias": "value"; "required": false; }; "
|
88
|
-
static ngAcceptInputType_disabled: unknown;
|
89
|
-
static ngAcceptInputType_wrap: unknown;
|
72
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<RdxToggleGroupDirective, "[rdxToggleGroup]", ["rdxToggleGroup"], { "value": { "alias": "value"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "onValueChange": "onValueChange"; }, never, never, true, [{ directive: typeof i1.RdxRovingFocusGroupDirective; inputs: { "dir": "dir"; "orientation": "orientation"; "loop": "loop"; }; outputs: {}; }]>;
|
90
73
|
}
|