@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.
Files changed (59) hide show
  1. package/collapsible/src/collapsible-content.directive.d.ts +1 -1
  2. package/collapsible/src/collapsible-root.directive.d.ts +11 -11
  3. package/dialog/src/dialog-close.directive.d.ts +1 -1
  4. package/fesm2022/radix-ng-primitives-collapsible.mjs +20 -27
  5. package/fesm2022/radix-ng-primitives-collapsible.mjs.map +1 -1
  6. package/fesm2022/radix-ng-primitives-dialog.mjs +2 -3
  7. package/fesm2022/radix-ng-primitives-dialog.mjs.map +1 -1
  8. package/fesm2022/radix-ng-primitives-presence.mjs +250 -0
  9. package/fesm2022/radix-ng-primitives-presence.mjs.map +1 -0
  10. package/fesm2022/radix-ng-primitives-separator.mjs +1 -1
  11. package/fesm2022/radix-ng-primitives-separator.mjs.map +1 -1
  12. package/fesm2022/radix-ng-primitives-slider.mjs +101 -72
  13. package/fesm2022/radix-ng-primitives-slider.mjs.map +1 -1
  14. package/fesm2022/radix-ng-primitives-toggle-group.mjs +137 -280
  15. package/fesm2022/radix-ng-primitives-toggle-group.mjs.map +1 -1
  16. package/fesm2022/radix-ng-primitives-toggle.mjs +15 -2
  17. package/fesm2022/radix-ng-primitives-toggle.mjs.map +1 -1
  18. package/fesm2022/radix-ng-primitives-toolbar.mjs +155 -0
  19. package/fesm2022/radix-ng-primitives-toolbar.mjs.map +1 -0
  20. package/hover-card/src/hover-card-root.directive.d.ts +4 -4
  21. package/package.json +17 -8
  22. package/popover/src/popover-root.directive.d.ts +4 -4
  23. package/presence/index.d.ts +4 -0
  24. package/presence/src/presence.d.ts +42 -0
  25. package/presence/src/transitions/transition.collapse.d.ts +15 -0
  26. package/presence/src/transitions/transition.toast.d.ts +3 -0
  27. package/presence/src/types.d.ts +15 -0
  28. package/presence/src/utils.d.ts +42 -0
  29. package/schematics/collection.json +11 -0
  30. package/schematics/ng-add/index.d.ts +7 -0
  31. package/schematics/ng-add/index.js +31 -0
  32. package/schematics/ng-add/index.js.map +1 -0
  33. package/schematics/ng-add/schema.d.ts +3 -0
  34. package/schematics/ng-add/schema.js +3 -0
  35. package/schematics/ng-add/schema.js.map +1 -0
  36. package/separator/src/separator.directive.d.ts +1 -1
  37. package/slider/src/slider-horizontal.component.d.ts +6 -7
  38. package/slider/src/slider-impl.directive.d.ts +6 -7
  39. package/slider/src/slider-root.component.d.ts +78 -4
  40. package/slider/src/slider-vertical.component.d.ts +6 -7
  41. package/toggle/src/toggle.directive.d.ts +14 -1
  42. package/toggle-group/index.d.ts +1 -1
  43. package/toggle-group/src/toggle-group-item.directive.d.ts +20 -28
  44. package/toggle-group/src/toggle-group-item.token.d.ts +1 -0
  45. package/toggle-group/src/toggle-group-without-focus.directive.d.ts +69 -0
  46. package/toggle-group/src/toggle-group.directive.d.ts +26 -43
  47. package/toggle-group/src/toggle-group.token.d.ts +8 -4
  48. package/toolbar/README.md +3 -0
  49. package/toolbar/index.d.ts +19 -0
  50. package/toolbar/src/toolbar-button.directive.d.ts +11 -0
  51. package/toolbar/src/toolbar-link.directive.d.ts +7 -0
  52. package/toolbar/src/toolbar-root.directive.d.ts +8 -0
  53. package/toolbar/src/toolbar-root.token.d.ts +5 -0
  54. package/toolbar/src/toolbar-separator.directive.d.ts +6 -0
  55. package/toolbar/src/toolbar-toggle-group.directive.d.ts +6 -0
  56. package/toolbar/src/toolbar-toggle-item.directive.d.ts +6 -0
  57. package/tooltip/src/tooltip-root.directive.d.ts +4 -4
  58. package/compodoc/documentation.json +0 -39701
  59. 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,3 @@
1
+ export interface Schema {
2
+ project?: string;
3
+ }
@@ -0,0 +1,3 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ //# sourceMappingURL=schema.js.map
@@ -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" | null>;
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: EventEmitter<number>;
12
- slideMove: EventEmitter<number>;
13
- slideEnd: EventEmitter<void>;
14
- stepKeyDown: EventEmitter<{
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: EventEmitter<KeyboardEvent>;
19
- homeKeyDown: EventEmitter<KeyboardEvent>;
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: EventEmitter<PointerEvent>;
7
- slideMove: EventEmitter<PointerEvent>;
8
- slideEnd: EventEmitter<PointerEvent>;
9
- homeKeyDown: EventEmitter<KeyboardEvent>;
10
- endKeyDown: EventEmitter<KeyboardEvent>;
11
- stepKeyDown: EventEmitter<KeyboardEvent>;
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 { EventEmitter, OnInit } from '@angular/core';
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
- valueChange: EventEmitter<number[]>;
18
- valueCommit: EventEmitter<number[]>;
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; }; }, { "valueChange": "valueChange"; "valueCommit": "valueCommit"; "modelValue": "modelValueChange"; "valueIndexToChange": "valueIndexToChangeChange"; "valuesBeforeSlideStart": "valuesBeforeSlideStartChange"; }, never, ["*"], true, never>;
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: EventEmitter<number>;
12
- slideMove: EventEmitter<number>;
13
- slideEnd: EventEmitter<void>;
14
- stepKeyDown: EventEmitter<{
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: EventEmitter<KeyboardEvent>;
19
- homeKeyDown: EventEmitter<KeyboardEvent>;
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
  }
@@ -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-multiple.directive';
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 { FocusableOption } from '@angular/cdk/a11y';
2
- import { OnChanges, SimpleChanges } from '@angular/core';
1
+ import { BooleanInput } from '@angular/cdk/coercion';
3
2
  import * as i0 from "@angular/core";
4
- export declare class RdxToggleGroupItemDirective implements OnChanges, FocusableOption {
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 toggleGroup: import("@radix-ng/primitives/toggle-group").RdxToggleGroupDirective | import("@radix-ng/primitives/toggle-group").RdxToggleGroupMultipleDirective;
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
- * @default false
24
+ * @defaultValue false
25
+ * @group Props
18
26
  */
19
- disabled: boolean;
20
- /**
21
- * Whether this toggle button is checked.
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, never>;
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 { AfterContentInit, EventEmitter, OnChanges, QueryList, SimpleChanges } from '@angular/core';
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
- export declare class RdxToggleGroupDirective implements OnChanges, AfterContentInit, ControlValueAccessor {
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
- * The selected toggle button.
10
+ * @ignore
8
11
  */
9
- value: string | null;
12
+ readonly id: string;
10
13
  /**
11
- * The orientation of the toggle group.
12
- * @default 'horizontal'
14
+ * @group Props
13
15
  */
14
- orientation: 'horizontal' | 'vertical';
16
+ readonly value: import("@angular/core").ModelSignal<string | string[] | undefined>;
15
17
  /**
16
- * Whether the toggle group is disabled.
17
- * @default false
18
+ * @group Props
18
19
  */
19
- disabled: boolean;
20
+ readonly type: import("@angular/core").InputSignal<"single" | "multiple">;
20
21
  /**
21
- * Whether the toggle group roving focus should wrap.
22
- * @default true
22
+ * Whether the toggle group is disabled.
23
+ * @defaultValue false
24
+ * @group Props
23
25
  */
24
- wrap: boolean;
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 valueChange: EventEmitter<string | null>;
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
- * @internal
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
- * @internal
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
- * @internal
55
+ * @ignore
72
56
  */
73
- registerOnChange(fn: (value: string | null) => void): void;
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
- * @internal
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
- * @internal
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; }; "orientation": { "alias": "orientation"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "wrap": { "alias": "wrap"; "required": false; }; "valueChange": { "alias": "valueChange"; "required": false; }; }, {}, ["buttons"], never, true, never>;
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
  }