@radix-ng/primitives 0.27.0 → 0.29.0

package/presence/src/utils.d.ts

@@ -0,0 +1,42 @@
+import { NgZone } from '@angular/core';
+import { Observable } from 'rxjs';
+/**
+ * Ensures that the observable stream runs inside Angular's NgZone.
+ *
+ * This function is a higher-order function that takes an observable stream as input and ensures
+ * that all emissions, errors, and completion notifications are run inside Angular's NgZone. This
+ * is particularly useful for ensuring that change detection is triggered properly in Angular
+ * applications.
+ *
+ * @template T - The type of the items emitted by the observable.
+ * @param {NgZone} zone - The Angular zone to control the change detection context.
+ * @returns {(source: Observable<T>) => Observable<T>} - A function that takes an observable as input
+ * and returns an observable that runs inside Angular's NgZone.
+ *
+ * Example usage:
+ *
+ * const source$ = of('some value');
+ * const zoned$ = source$.pipe(runInZone(zone));
+ * zoned$.subscribe(value => {
+ *   console.log('Value:', value);
+ * });
+ */
+declare function runInZone<T>(zone: NgZone): (source: Observable<T>) => Observable<T>;
+/**
+ * Calculates the total transition duration in milliseconds for a given HTML element.
+ *
+ * This function retrieves the computed style of the specified element and extracts the
+ * transition duration and delay properties. It then converts these values from seconds
+ * to milliseconds and returns their sum, representing the total transition duration.
+ *
+ * @param {HTMLElement} element - The HTML element for which to calculate the transition duration.
+ * @returns {number} - The total transition duration in milliseconds.
+ *
+ * Example usage:
+ *
+ * const durationMs = getTransitionDurationMs(element);
+ * console.log(`Transition duration: ${durationMs} ms`);
+ */
+declare function getTransitionDurationMs(element: HTMLElement): number;
+export { getTransitionDurationMs, runInZone };
+export declare function triggerReflow(element: HTMLElement): DOMRect;

package/schematics/collection.json

@@ -0,0 +1,11 @@
+{
+    "$schema": "../node_modules/@angular-devkit/schematics/collection-schema.json",
+    "schematics": {
+        "ng-add": {
+            "description": "Add Radix Angular to the application.",
+            "factory": "./ng-add",
+            "schema": "./ng-add/schema.json",
+            "aliases": ["install"]
+        }
+    }
+}

package/schematics/ng-add/index.d.ts

@@ -0,0 +1,7 @@
+import { Rule } from '@angular-devkit/schematics';
+import { Schema } from './schema';
+/**
+ * This is executed when `ng add @radix-ng/primitives` is run.
+ * It installs all dependencies in the 'package.json'.
+ */
+export default function (options: Schema): Rule;

package/schematics/ng-add/index.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = default_1;
+const schematics_1 = require("@angular-devkit/schematics");
+const tasks_1 = require("@angular-devkit/schematics/tasks");
+const package_config_1 = require("@angular/cdk/schematics/ng-add/package-config");
+const utility_1 = require("@schematics/angular/utility");
+const DEPENDENCY_VERSIONS = {
+    ANGULAR_CDK: '^19.0.0',
+    RADIX_NG: '^28.0.0'
+};
+/**
+ * This is executed when `ng add @radix-ng/primitives` is run.
+ * It installs all dependencies in the 'package.json'.
+ */
+function default_1(options) {
+    return async (tree, context) => {
+        const { project } = options;
+        if (project) {
+            const workspace = await (0, utility_1.readWorkspace)(tree);
+            const projectWorkspace = workspace.projects.get(project);
+            if (!projectWorkspace) {
+                throw new schematics_1.SchematicsException(`Unable to find project '${project}' in the workspace`);
+            }
+        }
+        (0, package_config_1.addPackageToPackageJson)(tree, '@angular/cdk', DEPENDENCY_VERSIONS.ANGULAR_CDK);
+        (0, package_config_1.addPackageToPackageJson)(tree, '@radix-ng/primitives', DEPENDENCY_VERSIONS.RADIX_NG);
+        context.addTask(new tasks_1.NodePackageInstallTask());
+    };
+}
+//# sourceMappingURL=index.js.map

package/schematics/ng-add/index.js.map

@@ -0,0 +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"}

package/schematics/ng-add/schema.d.ts

@@ -0,0 +1,3 @@
+export interface Schema {
+    project?: string;
+}

package/schematics/ng-add/schema.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=schema.js.map

package/schematics/ng-add/schema.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"schema.js","sourceRoot":"","sources":["../../../../packages/primitives/schematics/ng-add/schema.ts"],"names":[],"mappings":""}

package/separator/src/separator.directive.d.ts

@@ -50,7 +50,7 @@ export declare class RdxSeparatorRootDirective {
      *
      * @ignore
      */
-    protected readonly computedAriaOrientation: import("@angular/core").Signal<"vertical" | null>;
+    protected readonly computedAriaOrientation: import("@angular/core").Signal<"vertical" | undefined>;
     static ɵfac: i0.ɵɵFactoryDeclaration<RdxSeparatorRootDirective, never>;
     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>;
 }

package/slider/src/slider-horizontal.component.d.ts

@@ -1,5 +1,4 @@
 import { BooleanInput } from '@angular/cdk/coercion';
-import { EventEmitter } from '@angular/core';
 import * as i0 from "@angular/core";
 export declare class RdxSliderHorizontalComponent {
     private readonly rootContext;
@@ -8,15 +7,15 @@ export declare class RdxSliderHorizontalComponent {
     min: number;
     max: number;
     className: string;
-    slideStart: EventEmitter<number>;
-    slideMove: EventEmitter<number>;
-    slideEnd: EventEmitter<void>;
-    stepKeyDown: EventEmitter<{
+    readonly slideStart: import("@angular/core").OutputEmitterRef<number>;
+    readonly slideMove: import("@angular/core").OutputEmitterRef<number>;
+    readonly slideEnd: import("@angular/core").OutputEmitterRef<void>;
+    readonly stepKeyDown: import("@angular/core").OutputEmitterRef<{
         event: KeyboardEvent;
         direction: number;
     }>;
-    endKeyDown: EventEmitter<KeyboardEvent>;
-    homeKeyDown: EventEmitter<KeyboardEvent>;
+    readonly endKeyDown: import("@angular/core").OutputEmitterRef<KeyboardEvent>;
+    readonly homeKeyDown: import("@angular/core").OutputEmitterRef<KeyboardEvent>;
     private readonly sliderElement;
     private readonly rect;
     onSlideStart(event: PointerEvent): void;

package/slider/src/slider-impl.directive.d.ts

@@ -1,14 +1,13 @@
-import { EventEmitter } from '@angular/core';
 import { RdxSliderRootComponent } from './slider-root.component';
 import * as i0 from "@angular/core";
 export declare class RdxSliderImplDirective {
     protected readonly rootContext: RdxSliderRootComponent;
-    slideStart: EventEmitter<PointerEvent>;
-    slideMove: EventEmitter<PointerEvent>;
-    slideEnd: EventEmitter<PointerEvent>;
-    homeKeyDown: EventEmitter<KeyboardEvent>;
-    endKeyDown: EventEmitter<KeyboardEvent>;
-    stepKeyDown: EventEmitter<KeyboardEvent>;
+    readonly slideStart: import("@angular/core").OutputEmitterRef<PointerEvent>;
+    readonly slideMove: import("@angular/core").OutputEmitterRef<PointerEvent>;
+    readonly slideEnd: import("@angular/core").OutputEmitterRef<PointerEvent>;
+    readonly homeKeyDown: import("@angular/core").OutputEmitterRef<KeyboardEvent>;
+    readonly endKeyDown: import("@angular/core").OutputEmitterRef<KeyboardEvent>;
+    readonly stepKeyDown: import("@angular/core").OutputEmitterRef<KeyboardEvent>;
     onKeyDown(event: KeyboardEvent): void;
     onPointerDown(event: PointerEvent): void;
     onPointerMove(event: PointerEvent): void;

package/slider/src/slider-root.component.d.ts

@@ -1,22 +1,96 @@
 import { BooleanInput, NumberInput } from '@angular/cdk/coercion';
-import { EventEmitter, OnInit } from '@angular/core';
+import { OnInit } from '@angular/core';
 import { RdxSliderOrientationContextService } from './slider-orientation-context.service';
 import * as i0 from "@angular/core";
+/**
+ * @group Components
+ */
 export declare class RdxSliderRootComponent implements OnInit {
     /** @ignore */
     readonly orientationContext: RdxSliderOrientationContextService;
+    /**
+     * The minimum value for the range.
+     *
+     * @group Props
+     * @defaultValue 0
+     */
     readonly min: import("@angular/core").InputSignalWithTransform<number, NumberInput>;
+    /**
+     * The maximum value for the range.
+     *
+     * @group Props
+     * @defaultValue 100
+     */
     readonly max: import("@angular/core").InputSignalWithTransform<number, NumberInput>;
+    /**
+     * The stepping interval.
+     *
+     * @group Props
+     * @defaultValue 1
+     */
     readonly step: import("@angular/core").InputSignalWithTransform<number, NumberInput>;
+    /**
+     * The minimum permitted steps between multiple thumbs.
+     *
+     * @group Props
+     * @defaultValue 0
+     */
     readonly minStepsBetweenThumbs: import("@angular/core").InputSignalWithTransform<number, NumberInput>;
+    /**
+     * The orientation of the slider.
+     *
+     * @group Props
+     * @defaultValue 'horizontal'
+     */
     readonly orientation: import("@angular/core").InputSignal<"horizontal" | "vertical">;
+    /**
+     * When true, prevents the user from interacting with the slider.
+     *
+     * @group Props
+     * @defaultValue false
+     */
     readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * Whether the slider is visually inverted.
+     *
+     * @group Props
+     * @defaultValue false
+     */
     readonly inverted: import("@angular/core").InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * The reading direction of the combobox when applicable.
+     *
+     * @group Props
+     * @defaultValue 'ltr'
+     */
     readonly dir: import("@angular/core").InputSignal<"ltr" | "rtl">;
     className: string;
-    valueChange: EventEmitter<number[]>;
-    valueCommit: EventEmitter<number[]>;
+    /**
+     * Style class of the component.
+     *
+     * @group Props
+     */
+    readonly styleClass: import("@angular/core").InputSignal<string | undefined>;
+    /**
+     * The controlled value of the slider.
+     *
+     * @group Props
+     */
     readonly modelValue: import("@angular/core").ModelSignal<number[]>;
+    /**
+     * Event handler called when the slider value changes.
+     *
+     * @group Emits
+     */
+    readonly valueChange: import("@angular/core").OutputEmitterRef<number[]>;
+    /**
+     * Event handler called when the value changes at the end of an interaction.
+     *
+     * Useful when you only need to capture a final value e.g. to update a backend service.
+     *
+     * @group Emits
+     */
+    readonly valueCommit: import("@angular/core").OutputEmitterRef<number[]>;
     /** @ignore */
     readonly valueIndexToChange: import("@angular/core").ModelSignal<number>;
     /** @ignore */
@@ -45,5 +119,5 @@ export declare class RdxSliderRootComponent implements OnInit {
     /** @ignore */
     updateValues(value: number, atIndex: number, commit?: boolean): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<RdxSliderRootComponent, never>;
-    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>;
+    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>;
 }

package/slider/src/slider-vertical.component.d.ts

@@ -1,5 +1,4 @@
 import { BooleanInput } from '@angular/cdk/coercion';
-import { EventEmitter } from '@angular/core';
 import * as i0 from "@angular/core";
 export declare class RdxSliderVerticalComponent {
     private readonly rootContext;
@@ -8,15 +7,15 @@ export declare class RdxSliderVerticalComponent {
     min: number;
     max: number;
     className: string;
-    slideStart: EventEmitter<number>;
-    slideMove: EventEmitter<number>;
-    slideEnd: EventEmitter<void>;
-    stepKeyDown: EventEmitter<{
+    readonly slideStart: import("@angular/core").OutputEmitterRef<number>;
+    readonly slideMove: import("@angular/core").OutputEmitterRef<number>;
+    readonly slideEnd: import("@angular/core").OutputEmitterRef<void>;
+    readonly stepKeyDown: import("@angular/core").OutputEmitterRef<{
         event: KeyboardEvent;
         direction: number;
     }>;
-    endKeyDown: EventEmitter<KeyboardEvent>;
-    homeKeyDown: EventEmitter<KeyboardEvent>;
+    readonly endKeyDown: import("@angular/core").OutputEmitterRef<KeyboardEvent>;
+    readonly homeKeyDown: import("@angular/core").OutputEmitterRef<KeyboardEvent>;
     private readonly sliderElement;
     private readonly rect;
     onSlideStart(event: PointerEvent): void;

package/toggle/src/toggle.directive.d.ts

@@ -25,26 +25,39 @@ export interface ToggleProps {
 }
 export type DataState = 'on' | 'off';
 export declare const TOGGLE_VALUE_ACCESSOR: any;
+/**
+ * @group Components
+ */
 export declare class RdxToggleDirective implements ControlValueAccessor {
     /**
      * The pressed state of the toggle when it is initially rendered.
      * Use when you do not need to control its pressed state.
+     *
+     * @group Props
      */
     readonly defaultPressed: import("@angular/core").InputSignalWithTransform<boolean, BooleanInput>;
     /**
      * The controlled pressed state of the toggle.
      * Must be used in conjunction with `onPressedChange`.
+     *
+     * @group Props
      */
     readonly pressed: import("@angular/core").ModelSignal<boolean>;
     /**
      * When true, prevents the user from interacting with the toggle.
+     *
+     * @group Props
      */
     readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, BooleanInput>;
     /** @ignore */
+    readonly disabledModel: import("@angular/core").ModelSignal<boolean>;
+    /** @ignore */
     readonly disabledState: import("@angular/core").Signal<boolean>;
     protected readonly dataState: import("@angular/core").Signal<DataState>;
     /**
      * Event handler called when the pressed state of the toggle changes.
+     *
+     * @group Emits
      */
     readonly onPressedChange: OutputEmitterRef<boolean>;
     protected togglePressed(): void;
@@ -61,5 +74,5 @@ export declare class RdxToggleDirective implements ControlValueAccessor {
     /** @ignore */
     setDisabledState(isDisabled: boolean): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<RdxToggleDirective, never>;
-    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>;
+    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>;
 }

package/toggle-group/index.d.ts

@@ -1,5 +1,5 @@
 export * from './src/toggle-group-item.directive';
 export * from './src/toggle-group-item.token';
-export * from './src/toggle-group-multiple.directive';
+export * from './src/toggle-group-without-focus.directive';
 export * from './src/toggle-group.directive';
 export * from './src/toggle-group.token';

package/toggle-group/src/toggle-group-item.directive.d.ts

@@ -1,45 +1,37 @@
-import { FocusableOption } from '@angular/cdk/a11y';
-import { OnChanges, SimpleChanges } from '@angular/core';
+import { BooleanInput } from '@angular/cdk/coercion';
 import * as i0 from "@angular/core";
-export declare class RdxToggleGroupItemDirective implements OnChanges, FocusableOption {
+import * as i1 from "@radix-ng/primitives/roving-focus";
+import * as i2 from "@radix-ng/primitives/toggle";
+/**
+ * @group Components
+ */
+export declare class RdxToggleGroupItemDirective {
+    private readonly rdxToggleDirective;
+    private readonly rdxRovingFocusItemDirective;
     /**
      * Access the toggle group.
      * @ignore
      */
-    protected readonly toggleGroup: import("@radix-ng/primitives/toggle-group").RdxToggleGroupDirective | import("@radix-ng/primitives/toggle-group").RdxToggleGroupMultipleDirective;
-    private readonly elementRef;
+    protected readonly rootContext: import("./toggle-group.token").IRdxToggleGroup;
     /**
      * The value of this toggle button.
+     *
+     * @group Props
      */
-    value: string;
+    readonly value: import("@angular/core").InputSignal<string>;
     /**
      * Whether this toggle button is disabled.
-     * @default false
+     * @defaultValue false
+     * @group Props
      */
-    disabled: boolean;
-    /**
-     * Whether this toggle button is checked.
-     */
-    protected get checked(): boolean;
-    /**
-     * @ignore
-     */
-    ngOnChanges(changes: SimpleChanges): void;
-    /**
-     * @ignore
-     */
-    focus(): void;
+    readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, BooleanInput>;
+    private readonly isPressed;
+    private readonly isDisabled;
+    constructor();
     /**
      * @ignore
      */
     toggle(): void;
-    /**
-     * Ensure the disabled state is propagated to the roving focus item.
-     * @internal
-     * @ignore
-     */
-    updateDisabled(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<RdxToggleGroupItemDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<RdxToggleGroupItemDirective, "[rdxToggleGroupItem]", ["rdxToggleGroupItem"], { "value": { "alias": "value"; "required": true; }; "disabled": { "alias": "disabled"; "required": false; }; }, {}, never, never, true, never>;
-    static ngAcceptInputType_disabled: unknown;
+    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: {}; }]>;
 }

package/toggle-group/src/toggle-group-item.token.d.ts

@@ -1,3 +1,4 @@
 import { InjectionToken } from '@angular/core';
 import type { RdxToggleGroupItemDirective } from './toggle-group-item.directive';
 export declare const RdxToggleGroupItemToken: InjectionToken<RdxToggleGroupItemDirective>;
+export declare function injectToggleGroupItem(): RdxToggleGroupItemDirective;

package/toggle-group/src/toggle-group-without-focus.directive.d.ts

@@ -0,0 +1,69 @@
+import { BooleanInput } from '@angular/cdk/coercion';
+import { ControlValueAccessor } from '@angular/forms';
+import * as i0 from "@angular/core";
+export declare class RdxToggleGroupWithoutFocusDirective implements ControlValueAccessor {
+    /**
+     * @ignore
+     */
+    readonly id: string;
+    /**
+     * @group Props
+     */
+    readonly value: import("@angular/core").ModelSignal<string | string[] | undefined>;
+    /**
+     * @group Props
+     */
+    readonly type: import("@angular/core").InputSignal<"single" | "multiple">;
+    /**
+     * Whether the toggle group is disabled.
+     * @defaultValue false
+     * @group Props
+     */
+    readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * Event emitted when the selected toggle button changes.
+     * @group Emits
+     */
+    readonly onValueChange: import("@angular/core").OutputEmitterRef<string | string[] | undefined>;
+    /**
+     * The value change callback.
+     */
+    private onChange?;
+    /**
+     * onTouch function registered via registerOnTouch (ControlValueAccessor).
+     */
+    protected onTouched?: () => void;
+    /**
+     * Toggle a value.
+     * @param value The value to toggle.
+     * @ignore
+     */
+    toggle(value: string): void;
+    /**
+     * Select a value from Angular forms.
+     * @param value The value to select.
+     * @ignore
+     */
+    writeValue(value: string): void;
+    /**
+     * Register a callback to be called when the value changes.
+     * @param fn The callback to register.
+     * @ignore
+     */
+    registerOnChange(fn: (value: string | string[] | undefined) => void): void;
+    /**
+     * Register a callback to be called when the toggle group is touched.
+     * @param fn The callback to register.
+     * @ignore
+     */
+    registerOnTouched(fn: () => void): void;
+    private readonly accessorDisabled;
+    /**
+     * Set the disabled state of the toggle group.
+     * @param isDisabled Whether the toggle group is disabled.
+     * @ignore
+     */
+    setDisabledState(isDisabled: boolean): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RdxToggleGroupWithoutFocusDirective, never>;
+    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>;
+}

package/toggle-group/src/toggle-group.directive.d.ts

@@ -1,39 +1,34 @@
-import { AfterContentInit, EventEmitter, OnChanges, QueryList, SimpleChanges } from '@angular/core';
+import { BooleanInput } from '@angular/cdk/coercion';
 import { ControlValueAccessor } from '@angular/forms';
-import type { RdxToggleGroupItemDirective } from './toggle-group-item.directive';
 import * as i0 from "@angular/core";
-export declare class RdxToggleGroupDirective implements OnChanges, AfterContentInit, ControlValueAccessor {
+import * as i1 from "@radix-ng/primitives/roving-focus";
+/**
+ * @group Components
+ */
+export declare class RdxToggleGroupDirective implements ControlValueAccessor {
     /**
-     * The selected toggle button.
+     * @ignore
      */
-    value: string | null;
+    readonly id: string;
     /**
-     * The orientation of the toggle group.
-     * @default 'horizontal'
+     * @group Props
      */
-    orientation: 'horizontal' | 'vertical';
+    readonly value: import("@angular/core").ModelSignal<string | string[] | undefined>;
     /**
-     * Whether the toggle group is disabled.
-     * @default false
+     * @group Props
      */
-    disabled: boolean;
+    readonly type: import("@angular/core").InputSignal<"single" | "multiple">;
     /**
-     * Whether the toggle group roving focus should wrap.
-     * @default true
+     * Whether the toggle group is disabled.
+     * @defaultValue false
+     * @group Props
      */
-    wrap: boolean;
+    readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, BooleanInput>;
     /**
      * Event emitted when the selected toggle button changes.
+     * @group Emits
      */
-    readonly valueChange: EventEmitter<string | null>;
-    /**
-     * Access the buttons in the toggle group.
-     */
-    protected buttons?: QueryList<RdxToggleGroupItemDirective>;
-    /**
-     * FocusKeyManager to manage keyboard interactions.
-     */
-    private keyManager;
+    readonly onValueChange: import("@angular/core").OutputEmitterRef<string | string[] | undefined>;
     /**
      * The value change callback.
      */
@@ -42,49 +37,37 @@ export declare class RdxToggleGroupDirective implements OnChanges, AfterContentI
      * onTouch function registered via registerOnTouch (ControlValueAccessor).
      */
     protected onTouched?: () => void;
-    ngOnChanges(changes: SimpleChanges): void;
-    ngAfterContentInit(): void;
-    protected onFocusIn(): void;
-    protected handleKeydown(event: KeyboardEvent): void;
-    /**
-     * Determine if a value is selected.
-     * @param value The value to check.
-     * @returns Whether the value is selected.
-     * @internal
-     */
-    isSelected(value: string): boolean;
     /**
      * Toggle a value.
      * @param value The value to toggle.
-     * @internal
+     * @ignore
      */
     toggle(value: string): void;
     /**
      * Select a value from Angular forms.
      * @param value The value to select.
-     * @internal
+     * @ignore
      */
     writeValue(value: string): void;
     /**
      * Register a callback to be called when the value changes.
      * @param fn The callback to register.
-     * @internal
+     * @ignore
      */
-    registerOnChange(fn: (value: string | null) => void): void;
+    registerOnChange(fn: (value: string | string[] | undefined) => void): void;
     /**
      * Register a callback to be called when the toggle group is touched.
      * @param fn The callback to register.
-     * @internal
+     * @ignore
      */
     registerOnTouched(fn: () => void): void;
+    private readonly accessorDisabled;
     /**
      * Set the disabled state of the toggle group.
      * @param isDisabled Whether the toggle group is disabled.
-     * @internal
+     * @ignore
      */
     setDisabledState(isDisabled: boolean): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<RdxToggleGroupDirective, never>;
-    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>;
-    static ngAcceptInputType_disabled: unknown;
-    static ngAcceptInputType_wrap: unknown;
+    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: {}; }]>;
 }