@radix-ng/primitives 0.18.2 → 0.20.0

package/radio/src/radio-item.directive.d.ts

@@ -1,21 +1,30 @@
-import { FocusableOption } from '@angular/cdk/a11y';
-import { ElementRef, InjectionToken, OnInit } from '@angular/core';
+import { BooleanInput } from '@angular/cdk/coercion';
+import { InjectionToken, OnInit } from '@angular/core';
 import * as i0 from "@angular/core";
+import * as i1 from "@radix-ng/primitives/roving-focus";
 export declare const RdxRadioItemToken: InjectionToken<RdxRadioItemDirective>;
 export declare function injectRadioItem(): RdxRadioItemDirective;
-export declare class RdxRadioItemDirective implements FocusableOption, OnInit {
+export declare class RdxRadioItemDirective implements OnInit {
     private readonly radioGroup;
-    readonly element: ElementRef<any>;
-    id: string;
-    value: string;
-    disabled: boolean;
-    get tabIndex(): number;
-    get checked(): boolean;
+    private readonly elementRef;
+    readonly value: import("@angular/core").InputSignal<string>;
+    readonly id: import("@angular/core").InputSignal<string | undefined>;
+    readonly required: import("@angular/core").InputSignal<boolean | undefined>;
+    readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, BooleanInput>;
+    protected readonly disabledState: import("@angular/core").Signal<boolean>;
+    readonly checkedState: import("@angular/core").Signal<boolean>;
+    private readonly ARROW_KEYS;
+    private readonly isArrowKeyPressedSignal;
+    /** @ignore */
     ngOnInit(): void;
-    focus(): void;
-    _onClick(): void;
-    _onBlur(): void;
+    /** @ignore */
+    onClick(): void;
+    /** @ignore */
+    onKeyDown(event: KeyboardEvent): void;
+    /** @ignore */
+    onKeyUp(): void;
+    /** @ignore */
+    onFocus(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<RdxRadioItemDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<RdxRadioItemDirective, "[rdxRadioItem]", ["rdxRadioItem"], { "id": { "alias": "id"; "required": false; }; "value": { "alias": "value"; "required": true; }; "disabled": { "alias": "disabled"; "required": false; }; }, {}, never, never, true, never>;
-    static ngAcceptInputType_disabled: unknown;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<RdxRadioItemDirective, "[rdxRadioItem]", ["rdxRadioItem"], { "value": { "alias": "value"; "required": true; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1.RdxRovingFocusItemDirective; inputs: { "tabStopId": "id"; "focusable": "focusable"; "active": "active"; "allowShiftKey": "allowShiftKey"; }; outputs: {}; }]>;
 }

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

@@ -1,72 +1,57 @@
-import { AfterContentInit, EventEmitter, OnDestroy, QueryList } from '@angular/core';
+import { BooleanInput } from '@angular/cdk/coercion';
 import { ControlValueAccessor } from '@angular/forms';
-import { RdxRadioItemDirective } from './radio-item.directive';
+import { Orientation } from '@radix-ng/primitives/roving-focus';
 import { RadioGroupDirective, RadioGroupProps } from './radio-tokens';
 import * as i0 from "@angular/core";
-export declare class RdxRadioGroupDirective implements RadioGroupProps, RadioGroupDirective, ControlValueAccessor, AfterContentInit, OnDestroy {
-    radioItems: QueryList<RdxRadioItemDirective>;
-    private focusKeyManager;
-    private destroy$;
-    name?: string | undefined;
-    value?: string;
-    disabled: boolean;
-    dir?: string;
+import * as i1 from "@radix-ng/primitives/roving-focus";
+export declare class RdxRadioGroupDirective implements RadioGroupProps, RadioGroupDirective, ControlValueAccessor {
+    readonly value: import("@angular/core").ModelSignal<string | null>;
+    readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, BooleanInput>;
     defaultValue?: string;
-    /**
-     * The orientation of the radio group only vertical.
-     * Horizontal radio buttons can sometimes be challenging to scan and localize.
-     * The horizontal arrangement of radio buttons may also lead to difficulties in determining which
-     * label corresponds to which button: whether the label is above or below the button.
-     * @default 'vertical'
-     */
-    readonly _orientation = "vertical";
+    readonly required: import("@angular/core").InputSignalWithTransform<boolean, BooleanInput>;
+    readonly orientation: import("@angular/core").InputSignal<Orientation | undefined>;
     /**
      * Event handler called when the value changes.
      */
-    readonly onValueChange: EventEmitter<string>;
+    readonly onValueChange: import("@angular/core").OutputEmitterRef<string>;
+    private readonly disable;
+    readonly disableState: import("@angular/core").Signal<boolean>;
     /**
      * The callback function to call when the value of the radio group changes.
      */
     private onChange;
     /**
      * The callback function to call when the radio group is touched.
+     * @ignore
      */
     onTouched: () => void;
-    ngAfterContentInit(): void;
-    ngOnDestroy(): void;
     /**
      * Select a radio item.
      * @param value The value of the radio item to select.
+     * @ignore
      */
     select(value: string): void;
     /**
      * Update the value of the radio group.
      * @param value The new value of the radio group.
-     * @internal
+     * @ignore
      */
     writeValue(value: string): void;
     /**
      * Register a callback function to call when the value of the radio group changes.
      * @param fn The callback function to call when the value of the radio group changes.
-     * @internal
+     * @ignore
      */
     registerOnChange(fn: (value: string) => void): void;
+    /** @ignore */
     registerOnTouched(fn: () => void): void;
     /**
      * Set the disabled state of the radio group.
      * @param isDisabled Whether the radio group is disabled.
-     * @internal
+     * @ignore
      */
     setDisabledState(isDisabled: boolean): void;
-    /**
-     * When focus leaves the radio group.
-     */
-    protected onFocusin(event: FocusEvent): void;
-    protected onKeydown(event: KeyboardEvent): void;
-    private selectFocusedItem;
-    private updateActiveItem;
-    private tabNavigation;
+    protected onKeydown(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<RdxRadioGroupDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<RdxRadioGroupDirective, "[rdxRadioRoot]", ["rdxRadioRoot"], { "value": { "alias": "value"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "dir": { "alias": "dir"; "required": false; }; "defaultValue": { "alias": "defaultValue"; "required": false; }; }, { "onValueChange": "onValueChange"; }, ["radioItems"], never, true, never>;
-    static ngAcceptInputType_disabled: unknown;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<RdxRadioGroupDirective, "[rdxRadioRoot]", ["rdxRadioRoot"], { "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "defaultValue": { "alias": "defaultValue"; "required": false; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "onValueChange": "onValueChange"; }, never, never, true, [{ directive: typeof i1.RdxRovingFocusGroupDirective; inputs: { "dir": "dir"; "orientation": "orientation"; "loop": "loop"; }; outputs: {}; }]>;
 }

package/radio/src/radio-tokens.d.ts

@@ -1,12 +1,14 @@
-import { InjectionToken } from '@angular/core';
+import { BooleanInput } from '@angular/cdk/coercion';
+import { InjectionToken, InputSignalWithTransform, ModelSignal, Signal } from '@angular/core';
 export interface RadioGroupProps {
     name?: string;
-    disabled?: boolean;
+    disabled?: InputSignalWithTransform<boolean, BooleanInput>;
     defaultValue?: string;
-    value?: string;
+    value: ModelSignal<string | null>;
+    disableState: Signal<boolean>;
 }
 export interface RadioGroupDirective extends RadioGroupProps {
-    select(value: string): void;
+    select(value: string | null): void;
     onTouched(): void;
 }
 export declare const RDX_RADIO_GROUP: InjectionToken<RadioGroupDirective>;

package/roving-focus/README.md

@@ -0,0 +1,3 @@
+# @radix-ng/primitives/roving-focus
+
+Secondary entry point of `@radix-ng/primitives`.

package/roving-focus/index.d.ts

@@ -0,0 +1,3 @@
+export * from './src/roving-focus-group.directive';
+export * from './src/roving-focus-item.directive';
+export type { Direction, Orientation } from './src/utils';

package/roving-focus/src/roving-focus-group.directive.d.ts

@@ -0,0 +1,50 @@
+import { EventEmitter } from '@angular/core';
+import { Direction, Orientation } from './utils';
+import * as i0 from "@angular/core";
+export declare class RdxRovingFocusGroupDirective {
+    private readonly ngZone;
+    private readonly elementRef;
+    orientation: Orientation | undefined;
+    dir: Direction;
+    loop: boolean;
+    preventScrollOnEntryFocus: boolean;
+    entryFocus: EventEmitter<Event>;
+    currentTabStopIdChange: EventEmitter<string | null>;
+    /** @ignore */
+    readonly currentTabStopId: import("@angular/core").WritableSignal<string | null>;
+    /** @ignore */
+    readonly focusableItems: import("@angular/core").WritableSignal<HTMLElement[]>;
+    private readonly isClickFocus;
+    private readonly isTabbingBackOut;
+    private readonly focusableItemsCount;
+    /** @ignore */
+    get dataOrientation(): Orientation;
+    /** @ignore */
+    get tabIndex(): 0 | -1;
+    /** @ignore */
+    handleBlur(): void;
+    /** @ignore */
+    handleMouseUp(): void;
+    /** @ignore */
+    handleFocus(event: FocusEvent): void;
+    /** @ignore */
+    handleMouseDown(): void;
+    /** @ignore */
+    onItemFocus(tabStopId: string): void;
+    /** @ignore */
+    onItemShiftTab(): void;
+    /** @ignore */
+    onFocusableItemAdd(): void;
+    /** @ignore */
+    onFocusableItemRemove(): void;
+    /** @ignore */
+    registerItem(item: HTMLElement): void;
+    /** @ignore */
+    unregisterItem(item: HTMLElement): void;
+    /** @ignore */
+    getFocusableItemsCount(): number;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RdxRovingFocusGroupDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<RdxRovingFocusGroupDirective, "[rdxRovingFocusGroup]", never, { "orientation": { "alias": "orientation"; "required": false; }; "dir": { "alias": "dir"; "required": false; }; "loop": { "alias": "loop"; "required": false; }; "preventScrollOnEntryFocus": { "alias": "preventScrollOnEntryFocus"; "required": false; }; }, { "entryFocus": "entryFocus"; "currentTabStopIdChange": "currentTabStopIdChange"; }, never, never, true, never>;
+    static ngAcceptInputType_loop: unknown;
+    static ngAcceptInputType_preventScrollOnEntryFocus: unknown;
+}

package/roving-focus/src/roving-focus-item.directive.d.ts

@@ -0,0 +1,50 @@
+import { OnDestroy, OnInit } from '@angular/core';
+import { RdxRovingFocusGroupDirective } from './roving-focus-group.directive';
+import * as i0 from "@angular/core";
+export declare class RdxRovingFocusItemDirective implements OnInit, OnDestroy {
+    private readonly elementRef;
+    private readonly ngZone;
+    protected readonly parent: RdxRovingFocusGroupDirective;
+    focusable: boolean;
+    active: boolean;
+    tabStopId: string;
+    allowShiftKey: boolean;
+    private readonly id;
+    /** @ignore */
+    readonly isCurrentTabStop: import("@angular/core").Signal<boolean>;
+    /**
+     * Lifecycle hook triggered on initialization.
+     * Registers the element with the parent roving focus group if it is focusable.
+     * @ignore
+     */
+    ngOnInit(): void;
+    /**
+     * Lifecycle hook triggered on destruction.
+     * Unregisters the element from the parent roving focus group if it is focusable.
+     * @ignore
+     */
+    ngOnDestroy(): void;
+    /**
+     * Determines the `tabIndex` of the element.
+     * Returns `0` if the element is the current tab stop; otherwise, returns `-1`.
+     * @ignore
+     */
+    get tabIndex(): 0 | -1;
+    /** @ignore */
+    handleMouseDown(event: MouseEvent): void;
+    /** @ignore */
+    onFocus(): void;
+    /**
+     * Handles the `keydown` event for keyboard navigation within the roving focus group.
+     * Supports navigation based on orientation and direction, and focuses appropriate elements.
+     *
+     * @param event The `KeyboardEvent` object.
+     * @ignore
+     */
+    handleKeydown(event: KeyboardEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RdxRovingFocusItemDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<RdxRovingFocusItemDirective, "[rdxRovingFocusItem]", never, { "focusable": { "alias": "focusable"; "required": false; }; "active": { "alias": "active"; "required": false; }; "tabStopId": { "alias": "tabStopId"; "required": false; }; "allowShiftKey": { "alias": "allowShiftKey"; "required": false; }; }, {}, never, never, true, never>;
+    static ngAcceptInputType_focusable: unknown;
+    static ngAcceptInputType_active: unknown;
+    static ngAcceptInputType_allowShiftKey: unknown;
+}

package/roving-focus/src/utils.d.ts

@@ -0,0 +1,19 @@
+export type Orientation = 'horizontal' | 'vertical';
+export type Direction = 'ltr' | 'rtl';
+export declare const ENTRY_FOCUS = "rovingFocusGroup.onEntryFocus";
+export declare const EVENT_OPTIONS: {
+    bubbles: boolean;
+    cancelable: boolean;
+};
+type FocusIntent = 'first' | 'last' | 'prev' | 'next';
+export declare const MAP_KEY_TO_FOCUS_INTENT: Record<string, FocusIntent>;
+export declare function getDirectionAwareKey(key: string, dir?: Direction): string;
+export declare function getFocusIntent(event: KeyboardEvent, orientation?: Orientation, dir?: Direction): FocusIntent | undefined;
+export declare function focusFirst(candidates: HTMLElement[], preventScroll?: boolean, rootNode?: Document | ShadowRoot): void;
+/**
+ * Wraps an array around itself at a given start index
+ * Example: `wrapArray(['a', 'b', 'c', 'd'], 2) === ['c', 'd', 'a', 'b']`
+ */
+export declare function wrapArray<T>(array: T[], startIndex: number): T[];
+export declare function generateId(): string;
+export {};

package/select/src/select-item.directive.d.ts

@@ -30,15 +30,21 @@ export declare class RdxSelectItemDirective implements Highlightable {
     private _disabled;
     get viewValue(): string;
     constructor();
-    /** Gets the label to be used when determining whether the option should be focused. */
+    /** Gets the label to be used when determining whether the option should be focused.
+     * @ignore
+     */
     getLabel(): string;
     /**
      * `Selects the option while indicating the selection came from the user. Used to
      * determine if the select's view -> model callback should be invoked.`
+     * @ignore
      */
     selectViaInteraction(): void;
+    /** @ignore */
     handleKeydown(event: KeyboardEvent): void;
+    /** @ignore */
     setActiveStyles(): void;
+    /** @ignore */
     setInactiveStyles(): void;
     protected onPointerMove(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<RdxSelectItemDirective, never>;

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

@@ -2,5 +2,5 @@ import * as i0 from "@angular/core";
 import * as i1 from "@radix-ng/primitives/visually-hidden";
 export declare class RdxToggleInputDirective {
     static ɵfac: i0.ɵɵFactoryDeclaration<RdxToggleInputDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<RdxToggleInputDirective, "[rdxToggleInput]", ["rdxToggleInput"], {}, {}, never, never, true, [{ directive: typeof i1.RdxVisuallyHiddenInputDirective; inputs: { "name": "name"; "required": "required"; }; outputs: {}; }]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<RdxToggleInputDirective, "[rdxToggleInput]", ["rdxToggleInput"], {}, {}, never, never, true, [{ directive: typeof i1.RdxVisuallyHiddenInputDirective; inputs: { "name": "name"; "required": "required"; "value": "value"; }; outputs: {}; }]>;
 }