@radix-ng/primitives 0.26.0 → 0.28.0

package/presence/src/types.d.ts

@@ -0,0 +1,15 @@
+import { Subject } from 'rxjs';
+type TransitionOptions<T> = {
+    context?: T;
+    animation: boolean;
+    state?: 'continue' | 'stop';
+    transitionTimerDelayMs?: number;
+};
+type TransitionContext<T> = {
+    transition$: Subject<any>;
+    complete: () => void;
+    context: T;
+};
+type TransitionStartFn<T = any> = (element: HTMLElement, animation: boolean, context: T) => TransitionEndFn | void;
+type TransitionEndFn = () => void;
+export { TransitionContext, TransitionEndFn, TransitionOptions, TransitionStartFn };

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/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,4 @@
 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.directive';
 export * from './src/toggle-group.token';

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

@@ -1,45 +1,31 @@
-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";
+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("@radix-ng/primitives/toggle-group").RdxToggleGroupDirective;
     /**
      * The value of this toggle button.
      */
-    value: string;
+    readonly value: import("@angular/core").InputSignal<string>;
     /**
      * Whether this toggle button is disabled.
      * @default false
      */
-    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.directive.d.ts

@@ -1,39 +1,23 @@
-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";
+export declare class RdxToggleGroupDirective implements ControlValueAccessor {
     /**
-     * The selected toggle button.
+     * @ignore
      */
-    value: string | null;
-    /**
-     * The orientation of the toggle group.
-     * @default 'horizontal'
-     */
-    orientation: 'horizontal' | 'vertical';
+    readonly id: string;
+    readonly value: import("@angular/core").ModelSignal<string | string[] | undefined>;
+    readonly type: import("@angular/core").InputSignal<"single" | "multiple">;
     /**
      * Whether the toggle group is disabled.
      * @default false
      */
-    disabled: boolean;
-    /**
-     * Whether the toggle group roving focus should wrap.
-     * @default true
-     */
-    wrap: boolean;
+    readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, BooleanInput>;
     /**
      * Event emitted when the selected toggle button changes.
      */
-    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 +26,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: {}; }]>;
 }

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

@@ -1,5 +1,4 @@
 import { InjectionToken } from '@angular/core';
-import type { RdxToggleGroupMultipleDirective } from './toggle-group-multiple.directive';
 import type { RdxToggleGroupDirective } from './toggle-group.directive';
-export declare const RdxToggleGroupToken: InjectionToken<RdxToggleGroupDirective | RdxToggleGroupMultipleDirective>;
-export declare function injectToggleGroup(): RdxToggleGroupDirective | RdxToggleGroupMultipleDirective;
+export declare const RdxToggleGroupToken: InjectionToken<RdxToggleGroupDirective>;
+export declare function injectToggleGroup(): RdxToggleGroupDirective;

package/tooltip/src/tooltip-content-attributes.component.d.ts

@@ -11,6 +11,14 @@ export declare class RdxTooltipContentAttributesComponent {
     /** @ignore */
     protected onAnimationEnd(_: AnimationEvent): void;
     /** @ignore */
+    protected pointerenter(): void;
+    /** @ignore */
+    protected pointerleave(): void;
+    /** @ignore */
+    protected focus(): void;
+    /** @ignore */
+    protected blur(): void;
+    /** @ignore */
     private canAnimate;
     static ɵfac: i0.ɵɵFactoryDeclaration<RdxTooltipContentAttributesComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<RdxTooltipContentAttributesComponent, "[rdxTooltipContentAttributes]", never, {}, {}, never, ["*"], true, never>;

package/tooltip/src/tooltip-root.directive.d.ts

@@ -79,7 +79,7 @@ export declare class RdxTooltipRootDirective {
         window: Window & typeof globalThis;
         primitiveConfigs?: import("./utils/types").PrimitiveConfigs;
         onDestroyCallbacks: Set<() => void>;
-        "__#10376@#clickDomRootEventCallbacks": Set<(event: MouseEvent) => void>;
+        "__#11176@#clickDomRootEventCallbacks": Set<(event: MouseEvent) => void>;
         registerPrimitive<T extends object>(primitiveInstance: T): void;
         deregisterPrimitive<T extends object>(primitiveInstance: T): void;
         preventPrimitiveFromCdkEvent<T extends object>(primitiveInstance: T, eventType: import("./utils/types").EventType): void;
@@ -90,9 +90,9 @@ export declare class RdxTooltipRootDirective {
         primitivePreventedFromCdkEvent<T extends object>(primitiveInstance: T, eventType: import("./utils/types").EventType): boolean | undefined;
         addClickDomRootEventCallback(callback: (event: MouseEvent) => void): void;
         removeClickDomRootEventCallback(callback: (event: MouseEvent) => void): boolean;
-        "__#10376@#setPreventPrimitiveFromCdkEvent"<T extends object, R extends import("./utils/types").EventType, K extends import("./utils/types").PrimitiveConfig[`prevent${Capitalize<R>}`]>(primitiveInstance: T, eventType: R, value: K): void;
-        "__#10376@#registerOnDestroyCallbacks"(): void;
-        "__#10376@#listenToClickDomRootEvent"(): void;
+        "__#11176@#setPreventPrimitiveFromCdkEvent"<T extends object, R extends import("./utils/types").EventType, K extends import("./utils/types").PrimitiveConfig[`prevent${Capitalize<R>}`]>(primitiveInstance: T, eventType: R, value: K): void;
+        "__#11176@#registerOnDestroyCallbacks"(): void;
+        "__#11176@#listenToClickDomRootEvent"(): void;
     } | null;
     /** @ignore */
     readonly destroyRef: DestroyRef;

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

@@ -1,99 +0,0 @@
-import { AfterContentInit, EventEmitter, OnChanges, QueryList, SimpleChanges } from '@angular/core';
-import { ControlValueAccessor } from '@angular/forms';
-import type { RdxToggleGroupItemDirective } from './toggle-group-item.directive';
-import * as i0 from "@angular/core";
-export declare class RdxToggleGroupMultipleDirective implements OnChanges, AfterContentInit, ControlValueAccessor {
-    /**
-     * The selected toggle button.
-     */
-    value: ReadonlyArray<string>;
-    /**
-     * The orientation of the toggle group.
-     * @default 'horizontal'
-     */
-    orientation: 'horizontal' | 'vertical';
-    /**
-     * Whether the toggle group is disabled.
-     * @default false
-     */
-    disabled: boolean;
-    /**
-     * Whether the toggle group roving focus should wrap.
-     * @default true
-     */
-    wrap: boolean;
-    /**
-     * Event emitted when the selected toggle button changes.
-     */
-    readonly valueChange: EventEmitter<readonly string[]>;
-    /**
-     * Access the buttons in the toggle group.
-     * @ignore
-     */
-    protected buttons?: QueryList<RdxToggleGroupItemDirective>;
-    /**
-     * FocusKeyManager to manage keyboard interactions.
-     */
-    private keyManager;
-    /**
-     * The value change callback.
-     * @ignore
-     */
-    private onChange?;
-    /**
-     * onTouch function registered via registerOnTouch (ControlValueAccessor).
-     * @ignore
-     */
-    protected onTouched?: () => void;
-    /**
-     * @ignore
-     */
-    ngOnChanges(changes: SimpleChanges): void;
-    /**
-     * @ignore
-     */
-    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.
-     * @ignore
-     */
-    isSelected(value: string): boolean;
-    /**
-     * 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: ReadonlyArray<string>): void;
-    /**
-     * Register a callback to be called when the value changes.
-     * @param fn The callback to register.
-     * @ignore
-     */
-    registerOnChange(fn: (value: ReadonlyArray<string>) => 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;
-    /**
-     * 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<RdxToggleGroupMultipleDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<RdxToggleGroupMultipleDirective, "[rdxToggleGroupMultiple]", ["rdxToggleGroupMultiple"], { "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;
-}