@radix-ng/primitives 0.51.0 → 1.0.0-beta.0

package/types/radix-ng-primitives-radio.d.ts

@@ -1,27 +1,36 @@
 import * as _angular_core from '@angular/core';
-import { InputSignalWithTransform, ModelSignal, Signal, OnInit, InjectionToken } from '@angular/core';
-import { BooleanInput } from '@angular/cdk/coercion';
+import { ModelSignal, InputSignal, InputSignalWithTransform, Signal, InjectionToken } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
+import { BooleanInput, RdxFormValueControl } from '@radix-ng/primitives/core';
 import * as i1 from '@radix-ng/primitives/roving-focus';
 import { Orientation } from '@radix-ng/primitives/roving-focus';
 import * as i1$1 from '@radix-ng/primitives/visually-hidden';
 
 interface RadioGroupProps {
-    name?: string;
-    disabled?: InputSignalWithTransform<boolean, BooleanInput>;
-    defaultValue?: string;
     value: ModelSignal<string | null>;
-    disableState: Signal<boolean>;
+    defaultValue: InputSignal<string | undefined>;
+    name: InputSignal<string | undefined>;
+    form: InputSignal<string | undefined>;
+    disabled: InputSignalWithTransform<boolean, BooleanInput>;
+    readonly: InputSignalWithTransform<boolean, BooleanInput>;
+    required: InputSignalWithTransform<boolean, BooleanInput>;
+    orientation: InputSignal<Orientation | undefined>;
+    disabledState: Signal<boolean>;
 }
 interface RadioGroupDirective extends RadioGroupProps {
     select(value: string | null): void;
     onTouched(): void;
+    setArrowNavigation(value: boolean): void;
+    isArrowNavigation(): boolean;
 }
 
-declare class RdxRadioGroupDirective implements RadioGroupProps, RadioGroupDirective, ControlValueAccessor {
+declare class RdxRadioGroupDirective implements RadioGroupProps, RadioGroupDirective, ControlValueAccessor, RdxFormValueControl<string | null> {
     readonly value: _angular_core.ModelSignal<string | null>;
+    readonly defaultValue: _angular_core.InputSignal<string | undefined>;
+    readonly name: _angular_core.InputSignal<string | undefined>;
+    readonly form: _angular_core.InputSignal<string | undefined>;
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
-    defaultValue?: string;
+    readonly readonly: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
     readonly required: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
     readonly orientation: _angular_core.InputSignal<Orientation | undefined>;
     /**
@@ -29,7 +38,8 @@ declare class RdxRadioGroupDirective implements RadioGroupProps, RadioGroupDirec
      */
     readonly onValueChange: _angular_core.OutputEmitterRef<string>;
     private readonly disable;
-    readonly disableState: _angular_core.Signal<boolean>;
+    readonly disabledState: _angular_core.Signal<boolean>;
+    private readonly arrowNavigation;
     /**
      * The callback function to call when the value of the radio group changes.
      */
@@ -39,24 +49,25 @@ declare class RdxRadioGroupDirective implements RadioGroupProps, RadioGroupDirec
      * @ignore
      */
     onTouched: () => void;
+    constructor();
     /**
      * Select a radio item.
      * @param value The value of the radio item to select.
      * @ignore
      */
-    select(value: string): void;
+    select(value: string | null): void;
     /**
      * Update the value of the radio group.
      * @param value The new value of the radio group.
      * @ignore
      */
-    writeValue(value: string): void;
+    writeValue(value: string | null): 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.
      * @ignore
      */
-    registerOnChange(fn: (value: string) => void): void;
+    registerOnChange(fn: (value: string | null) => void): void;
     /** @ignore */
     registerOnTouched(fn: () => void): void;
     /**
@@ -65,26 +76,36 @@ declare class RdxRadioGroupDirective implements RadioGroupProps, RadioGroupDirec
      * @ignore
      */
     setDisabledState(isDisabled: boolean): void;
+    setArrowNavigation(value: boolean): void;
+    isArrowNavigation(): boolean;
     protected onKeydown(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxRadioGroupDirective, never>;
-    static ɵdir: _angular_core.ɵɵ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: {}; }]>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxRadioGroupDirective, "[rdxRadioRoot]", ["rdxRadioRoot"], { "value": { "alias": "value"; "required": false; "isSignal": true; }; "defaultValue": { "alias": "defaultValue"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "form": { "alias": "form"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "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: {}; }]>;
 }
 
 declare const RdxRadioItemToken: InjectionToken<RdxRadioItemDirective>;
 declare function injectRadioItem(): RdxRadioItemDirective;
-declare class RdxRadioItemDirective implements OnInit {
+declare class RdxRadioItemDirective {
     private readonly radioGroup;
     private readonly elementRef;
+    private readonly renderer;
+    private readonly rovingFocusItem;
+    private readonly destroyRef;
+    private readonly inputElement;
+    private previousCheckedState;
     readonly value: _angular_core.InputSignal<string>;
     readonly id: _angular_core.InputSignal<string | undefined>;
-    readonly required: _angular_core.InputSignal<boolean | undefined>;
+    readonly required: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
-    protected readonly disabledState: _angular_core.Signal<boolean>;
+    readonly readonly: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    readonly nativeButton: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    readonly nativeButtonState: _angular_core.Signal<boolean>;
+    readonly disabledState: _angular_core.Signal<boolean>;
+    readonly readonlyState: _angular_core.Signal<boolean>;
+    readonly requiredState: _angular_core.Signal<boolean>;
     readonly checkedState: _angular_core.Signal<boolean>;
     private readonly ARROW_KEYS;
-    private readonly isArrowKeyPressedSignal;
-    /** @ignore */
-    ngOnInit(): void;
+    constructor();
     /** @ignore */
     onClick(): void;
     /** @ignore */
@@ -93,8 +114,13 @@ declare class RdxRadioItemDirective implements OnInit {
     onKeyUp(): void;
     /** @ignore */
     onFocus(): void;
+    private isAllowedArrowKey;
+    private createHiddenInput;
+    private syncHiddenInput;
+    private setOptionalAttribute;
+    private setBooleanAttribute;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxRadioItemDirective, never>;
-    static ɵdir: _angular_core.ɵɵ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: {}; }]>;
+    static ɵdir: _angular_core.ɵɵ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; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "nativeButton": { "alias": "nativeButton"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1.RdxRovingFocusItemDirective; inputs: { "tabStopId": "id"; "focusable": "focusable"; "active": "active"; "allowShiftKey": "allowShiftKey"; }; outputs: {}; }]>;
 }
 
 declare class RdxRadioIndicatorDirective {
@@ -106,13 +132,17 @@ declare class RdxRadioIndicatorDirective {
 
 declare class RdxRadioItemInputDirective {
     private readonly radioItem;
-    readonly name: _angular_core.InputSignal<string | undefined>;
+    private readonly radioGroup;
+    private readonly input;
+    readonly name: _angular_core.Signal<string | undefined>;
+    readonly form: _angular_core.Signal<string | undefined>;
     readonly value: _angular_core.Signal<string | undefined>;
-    readonly checked: _angular_core.Signal<true | undefined>;
-    readonly required: _angular_core.InputSignal<boolean | undefined>;
-    readonly disabled: _angular_core.InputSignal<boolean | undefined>;
+    readonly checked: _angular_core.Signal<boolean>;
+    readonly required: _angular_core.Signal<boolean>;
+    readonly disabled: _angular_core.Signal<boolean>;
+    constructor();
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxRadioItemInputDirective, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxRadioItemInputDirective, "[rdxRadioItemInput]", ["rdxRadioItemInput"], { "name": { "alias": "name"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1$1.RdxVisuallyHiddenDirective; inputs: { "feature": "feature"; }; outputs: {}; }]>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxRadioItemInputDirective, "input[rdxRadioItemInput]", ["rdxRadioItemInput"], {}, {}, never, never, true, [{ directive: typeof i1$1.RdxVisuallyHiddenDirective; inputs: { "feature": "feature"; }; outputs: {}; }]>;
 }
 
 export { RdxRadioGroupDirective, RdxRadioIndicatorDirective, RdxRadioItemDirective, RdxRadioItemInputDirective, RdxRadioItemToken, injectRadioItem };

package/types/radix-ng-primitives-roving-focus.d.ts

@@ -1,5 +1,5 @@
 import * as _angular_core from '@angular/core';
-import { BooleanInput } from '@angular/cdk/coercion';
+import { BooleanInput } from '@radix-ng/primitives/core';
 import * as _radix_ng_primitives_roving_focus from '@radix-ng/primitives/roving-focus';
 
 type Orientation = 'horizontal' | 'vertical';
@@ -14,10 +14,8 @@ declare const rootContext: () => {
     focusableItems: _angular_core.WritableSignal<HTMLElement[]>;
     onItemFocus: (tabStopId: string) => void;
     onItemShiftTab: () => void;
-    onFocusableItemAdd: () => void;
-    onFocusableItemRemove: () => void;
-    registerItem: (item: HTMLElement) => void;
-    unregisterItem: (item: HTMLElement) => void;
+    registerItem: (item: HTMLElement, tabStopId: string) => void;
+    unregisterItem: (item: HTMLElement, tabStopId: string) => void;
 };
 type RovingFocusGroupContext = ReturnType<typeof rootContext>;
 declare const injectRovingFocusGroupContext: (optional?: boolean) => {
@@ -28,10 +26,8 @@ declare const injectRovingFocusGroupContext: (optional?: boolean) => {
     focusableItems: _angular_core.WritableSignal<HTMLElement[]>;
     onItemFocus: (tabStopId: string) => void;
     onItemShiftTab: () => void;
-    onFocusableItemAdd: () => void;
-    onFocusableItemRemove: () => void;
-    registerItem: (item: HTMLElement) => void;
-    unregisterItem: (item: HTMLElement) => void;
+    registerItem: (item: HTMLElement, tabStopId: string) => void;
+    unregisterItem: (item: HTMLElement, tabStopId: string) => void;
 } | null;
 declare const provideRovingFocusGroupContext: (useFactory: () => {
     loop: _angular_core.Signal<boolean>;
@@ -41,10 +37,8 @@ declare const provideRovingFocusGroupContext: (useFactory: () => {
     focusableItems: _angular_core.WritableSignal<HTMLElement[]>;
     onItemFocus: (tabStopId: string) => void;
     onItemShiftTab: () => void;
-    onFocusableItemAdd: () => void;
-    onFocusableItemRemove: () => void;
-    registerItem: (item: HTMLElement) => void;
-    unregisterItem: (item: HTMLElement) => void;
+    registerItem: (item: HTMLElement, tabStopId: string) => void;
+    unregisterItem: (item: HTMLElement, tabStopId: string) => void;
 }) => _angular_core.Provider;
 /**
  * @group Components
@@ -52,6 +46,7 @@ declare const provideRovingFocusGroupContext: (useFactory: () => {
 declare class RdxRovingFocusGroupDirective {
     private readonly isBrowser;
     private readonly elementRef;
+    private readonly destroyRef;
     /**
      * The orientation of the group. Mainly so arrow navigation is done accordingly (left & right vs. up & down)
      */
@@ -95,12 +90,17 @@ declare class RdxRovingFocusGroupDirective {
     readonly focusableItems: _angular_core.WritableSignal<HTMLElement[]>;
     protected readonly isClickFocus: _angular_core.WritableSignal<boolean>;
     readonly isTabbingBackOut: _angular_core.WritableSignal<boolean>;
-    readonly focusableItemsCount: _angular_core.WritableSignal<number>;
+    private readonly itemIds;
+    private isDestroyed;
     constructor();
     setOrientation(value: Orientation): void;
     setDir(value: Direction): void;
     setLoop(value: boolean): void;
     /** @ignore */
+    registerItem(item: HTMLElement, tabStopId: string): void;
+    /** @ignore */
+    unregisterItem(item: HTMLElement, tabStopId: string): void;
+    /** @ignore */
     handleMouseUp(): void;
     /** @ignore */
     handleFocus(event: Event): void;
@@ -113,8 +113,11 @@ declare class RdxRovingFocusGroupDirective {
  */
 declare class RdxRovingFocusItemDirective {
     private readonly isBrowser;
-    private readonly destroyRef;
     private readonly elementRef;
+    /**
+     * The enclosing roving-focus group. Optional: when the item is used outside a group
+     * (e.g. a standalone Toggle), it degrades to a plain element and does not manage focus.
+     */
     protected readonly rootContext: {
         loop: _angular_core.Signal<boolean>;
         dir: _angular_core.Signal<_radix_ng_primitives_roving_focus.Direction>;
@@ -123,18 +126,16 @@ declare class RdxRovingFocusItemDirective {
         focusableItems: _angular_core.WritableSignal<HTMLElement[]>;
         onItemFocus: (tabStopId: string) => void;
         onItemShiftTab: () => void;
-        onFocusableItemAdd: () => void;
-        onFocusableItemRemove: () => void;
-        registerItem: (item: HTMLElement) => void;
-        unregisterItem: (item: HTMLElement) => void;
-    };
+        registerItem: (item: HTMLElement, tabStopId: string) => void;
+        unregisterItem: (item: HTMLElement, tabStopId: string) => void;
+    } | null;
     /**
      * When false, item will not be focusable.
      * @group Props
      */
     readonly focusableInput: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
     /**
-     * When `true`, item will be initially focused.
+     * When `true`, marks the item as the active one, so it is preferred when focus enters the group.
      * @group Props
      */
     readonly activeInput: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
@@ -147,16 +148,24 @@ declare class RdxRovingFocusItemDirective {
      * @group Props
      */
     readonly allowShiftKey: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    private readonly generatedId;
     protected readonly id: _angular_core.Signal<string>;
     protected readonly isCurrentTabStop: _angular_core.Signal<boolean>;
     protected readonly focusable: _angular_core.WritableSignal<boolean>;
     protected readonly active: _angular_core.WritableSignal<boolean>;
     private readonly tabStopId;
+    /**
+     * The roving tabindex. Without a group the item keeps its natural tab order (`null`); inside a
+     * group exactly one focusable item is a tab stop (`0`), the rest are reachable only via arrows (`-1`).
+     */
+    protected readonly tabindex: _angular_core.Signal<-1 | 0 | null>;
     constructor();
     setFocusable(value: boolean): void;
     setActive(value: boolean): void;
     setTabStopId(value: string): void;
     /** @ignore */
+    onFocus(): void;
+    /** @ignore */
     handleMouseDown(event: Event): void;
     /**
      * Handles the `keydown` event for keyboard navigation within the roving focus group.