@radix-ng/primitives 0.10.0 → 0.11.0

package/fesm2022/radix-ng-primitives-toggle-group.mjs

@@ -56,10 +56,10 @@ class RdxToggleGroupButtonDirective {
     updateDisabled() {
         // TODO
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: RdxToggleGroupButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.1.2", type: RdxToggleGroupButtonDirective, isStandalone: true, selector: "button[rdxToggleGroupButton]", inputs: { value: "value", disabled: ["disabled", "disabled", booleanAttribute] }, host: { attributes: { "role": "radio" }, listeners: { "click": "toggle()" }, properties: { "attr.aria-checked": "checked", "attr.aria-disabled": "disabled || toggleGroup.disabled", "attr.data-disabled": "disabled || toggleGroup.disabled", "attr.data-state": "checked ? \"on\" : \"off\"", "attr.data-orientation": "toggleGroup.orientation" } }, providers: [{ provide: RdxToggleGroupButtonToken, useExisting: RdxToggleGroupButtonDirective }], usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: RdxToggleGroupButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.2.1", type: RdxToggleGroupButtonDirective, isStandalone: true, selector: "button[rdxToggleGroupButton]", inputs: { value: "value", disabled: ["disabled", "disabled", booleanAttribute] }, host: { attributes: { "role": "radio" }, listeners: { "click": "toggle()" }, properties: { "attr.aria-checked": "checked", "attr.aria-disabled": "disabled || toggleGroup.disabled", "attr.data-disabled": "disabled || toggleGroup.disabled", "attr.data-state": "checked ? \"on\" : \"off\"", "attr.data-orientation": "toggleGroup.orientation" } }, providers: [{ provide: RdxToggleGroupButtonToken, useExisting: RdxToggleGroupButtonDirective }], usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: RdxToggleGroupButtonDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: RdxToggleGroupButtonDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'button[rdxToggleGroupButton]',
@@ -180,13 +180,13 @@ class RdxToggleGroupMultiDirective {
         this.disabled = isDisabled;
         this.buttons?.forEach((button) => button.updateDisabled());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: RdxToggleGroupMultiDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.1.2", type: RdxToggleGroupMultiDirective, isStandalone: true, selector: "[rdxToggleGroupMulti]", inputs: { value: ["rdxToggleGroupMultiValue", "value"], orientation: ["rdxToggleGroupMultiOrientation", "orientation"], disabled: ["rdxToggleGroupMultiDisabled", "disabled", booleanAttribute], wrap: ["rdxToggleGroupMultiWrap", "wrap", booleanAttribute], valueChange: ["rdxToggleGroupMultiValueChange", "valueChange"] }, host: { attributes: { "role": "group" }, listeners: { "focusout": "onTouched?.()" }, properties: { "attr.data-orientation": "orientation" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: RdxToggleGroupMultiDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.2.1", type: RdxToggleGroupMultiDirective, isStandalone: true, selector: "[rdxToggleGroupMulti]", inputs: { value: ["rdxToggleGroupMultiValue", "value"], orientation: ["rdxToggleGroupMultiOrientation", "orientation"], disabled: ["rdxToggleGroupMultiDisabled", "disabled", booleanAttribute], wrap: ["rdxToggleGroupMultiWrap", "wrap", booleanAttribute], valueChange: ["rdxToggleGroupMultiValueChange", "valueChange"] }, host: { attributes: { "role": "group" }, listeners: { "focusout": "onTouched?.()" }, properties: { "attr.data-orientation": "orientation" } }, providers: [
             { provide: RdxToggleGroupToken, useExisting: RdxToggleGroupMultiDirective },
             { provide: NG_VALUE_ACCESSOR, useExisting: RdxToggleGroupMultiDirective, multi: true }
         ], queries: [{ propertyName: "buttons", predicate: RdxToggleGroupButtonToken }], usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: RdxToggleGroupMultiDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: RdxToggleGroupMultiDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxToggleGroupMulti]',
@@ -312,13 +312,13 @@ class RdxToggleGroupDirective {
         this.disabled = isDisabled;
         this.buttons?.forEach((button) => button.updateDisabled());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: RdxToggleGroupDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.1.2", type: RdxToggleGroupDirective, isStandalone: true, selector: "[rdxToggleGroup]", inputs: { value: "value", orientation: "orientation", disabled: ["disabled", "disabled", booleanAttribute], wrap: ["wrap", "wrap", booleanAttribute], valueChange: "valueChange" }, host: { attributes: { "role": "group" }, listeners: { "focusout": "onTouched?.()" }, properties: { "attr.data-orientation": "orientation" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: RdxToggleGroupDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.2.1", type: RdxToggleGroupDirective, isStandalone: true, selector: "[rdxToggleGroup]", inputs: { value: "value", orientation: "orientation", disabled: ["disabled", "disabled", booleanAttribute], wrap: ["wrap", "wrap", booleanAttribute], valueChange: "valueChange" }, host: { attributes: { "role": "group" }, listeners: { "focusout": "onTouched?.()" }, properties: { "attr.data-orientation": "orientation" } }, providers: [
             { provide: RdxToggleGroupToken, useExisting: RdxToggleGroupDirective },
             { provide: NG_VALUE_ACCESSOR, useExisting: RdxToggleGroupDirective, multi: true }
         ], queries: [{ propertyName: "buttons", predicate: RdxToggleGroupButtonToken }], usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: RdxToggleGroupDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: RdxToggleGroupDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxToggleGroup]',

package/fesm2022/radix-ng-primitives-toggle.mjs

@@ -17,10 +17,10 @@ class RdxToggleDirective {
             this.onPressedChange.emit(this.pressed());
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: RdxToggleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.1.2", type: RdxToggleDirective, isStandalone: true, selector: "button[rdxToggle]", inputs: { defaultPressed: { classPropertyName: "defaultPressed", publicName: "defaultPressed", isSignal: true, isRequired: false, transformFunction: null }, pressed: { classPropertyName: "pressed", publicName: "pressed", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pressed: "pressedChange", onPressedChange: "onPressedChange" }, host: { attributes: { "type": "button" }, listeners: { "click": "toggle()" }, properties: { "attr.aria-pressed": "pressed()", "attr.data-state": "pressed() ? \"on\" : \"off\"", "attr.data-disabled": "disabled()" } }, exportAs: ["rdxToggle"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: RdxToggleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.1", type: RdxToggleDirective, isStandalone: true, selector: "button[rdxToggle]", inputs: { defaultPressed: { classPropertyName: "defaultPressed", publicName: "defaultPressed", isSignal: true, isRequired: false, transformFunction: null }, pressed: { classPropertyName: "pressed", publicName: "pressed", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pressed: "pressedChange", onPressedChange: "onPressedChange" }, host: { attributes: { "type": "button" }, listeners: { "click": "toggle()" }, properties: { "attr.aria-pressed": "pressed()", "attr.data-state": "pressed() ? \"on\" : \"off\"", "attr.data-disabled": "disabled()" } }, exportAs: ["rdxToggle"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: RdxToggleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: RdxToggleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'button[rdxToggle]',

package/label/src/label.directive.d.ts

@@ -1,15 +1,21 @@
+import { InputSignal } from '@angular/core';
 import * as i0 from "@angular/core";
 export declare class RdxLabelDirective {
-    readonly id: import("@angular/core").InputSignal<string>;
+    /**
+     * @type string
+     * @default 'rdx-label-{idIterator}'
+     */
+    readonly id: InputSignal<string>;
     /**
      * @ignore
      */
     protected readonly elementId: import("@angular/core").Signal<string | null>;
     /**
      * The id of the element the label is associated with.
-     * @default '-'
+     * @type string
+     * @default false
      */
-    readonly htmlFor: import("@angular/core").InputSignal<string>;
+    readonly htmlFor: InputSignal<string>;
     /**
      * @ignore
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@radix-ng/primitives",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "license": "MIT",
   "publishConfig": {
     "access": "public"

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

@@ -1,7 +1,9 @@
+import { RdxRadioItemDirective } from './radio-item.directive';
+import { RadioGroupDirective } from './radio-tokens';
 import * as i0 from "@angular/core";
 export declare class RdxRadioIndicatorDirective {
-    protected readonly radioGroup: import("./radio-root.directive").RdxRadioGroupDirective;
-    protected readonly radioItem: import("./radio-item.directive").RdxRadioItemDirective;
+    protected readonly radioGroup: RadioGroupDirective;
+    protected readonly radioItem: RdxRadioItemDirective;
     static ɵfac: i0.ɵɵFactoryDeclaration<RdxRadioIndicatorDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<RdxRadioIndicatorDirective, "[RadioIndicator]", ["RadioIndicator"], {}, {}, never, never, true, never>;
 }

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

@@ -1,15 +1,20 @@
-import { InjectionToken } from '@angular/core';
+import { FocusableOption } from '@angular/cdk/a11y';
+import { ElementRef, InjectionToken, OnInit } from '@angular/core';
 import * as i0 from "@angular/core";
 export declare const RdxRadioItemToken: InjectionToken<RdxRadioItemDirective>;
 export declare function injectRadioItem(): RdxRadioItemDirective;
-export declare class RdxRadioItemDirective {
-    protected readonly radioGroup: import("./radio-root.directive").RdxRadioGroupDirective;
+export declare class RdxRadioItemDirective implements FocusableOption, OnInit {
+    private readonly radioGroup;
+    readonly element: ElementRef<any>;
     id: string;
     value: string;
     disabled: boolean;
-    _onKeydown(event: KeyboardEvent): void;
-    _onFocus(): void;
+    get tabIndex(): number;
+    get checked(): boolean;
+    ngOnInit(): void;
+    focus(): void;
     _onClick(): void;
+    _onBlur(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<RdxRadioItemDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<RdxRadioItemDirective, "[RadioItem]", ["RadioItem"], { "id": { "alias": "id"; "required": false; }; "value": { "alias": "value"; "required": true; }; "disabled": { "alias": "disabled"; "required": false; }; }, {}, never, never, true, never>;
     static ngAcceptInputType_disabled: unknown;

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

@@ -1,19 +1,17 @@
-import { EventEmitter, InjectionToken } from '@angular/core';
+import { AfterContentInit, EventEmitter, OnDestroy, QueryList } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
+import { RdxRadioItemDirective } from './radio-item.directive';
+import { RadioGroupDirective, RadioGroupProps } from './radio-tokens';
 import * as i0 from "@angular/core";
-export declare const RdxRadioGroupToken: InjectionToken<RdxRadioGroupDirective>;
-export declare function injectRadioGroup(): RdxRadioGroupDirective;
-interface RadioGroupProps {
-    name?: string;
-    disabled?: boolean;
-    defaultValue?: string;
-    value?: string;
-    onValueChange?: EventEmitter<string>;
-}
-export declare class RdxRadioGroupDirective implements RadioGroupProps, ControlValueAccessor {
+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;
+    defaultValue?: string;
     /**
      * The orientation of the radio group only vertical.
      * Horizontal radio buttons can sometimes be challenging to scan and localize.
@@ -28,14 +26,14 @@ export declare class RdxRadioGroupDirective implements RadioGroupProps, ControlV
     readonly onValueChange: EventEmitter<string>;
     /**
      * The callback function to call when the value of the radio group changes.
-     * @internal
      */
-    private onChange?;
+    private onChange;
     /**
      * The callback function to call when the radio group is touched.
-     * @internal
      */
-    private onTouched?;
+    onTouched: () => void;
+    ngAfterContentInit(): void;
+    ngOnDestroy(): void;
     /**
      * Select a radio item.
      * @param value The value of the radio item to select.
@@ -63,9 +61,12 @@ export declare class RdxRadioGroupDirective implements RadioGroupProps, ControlV
     /**
      * When focus leaves the radio group.
      */
-    _onFocusout(): void;
+    _onFocusin(event: FocusEvent): void;
+    _onKeydown(event: KeyboardEvent): void;
+    private selectFocusedItem;
+    private updateActiveItem;
+    private tabNavigation;
     static ɵfac: i0.ɵɵFactoryDeclaration<RdxRadioGroupDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<RdxRadioGroupDirective, "div[RadioRoot]", ["RadioRoot"], { "value": { "alias": "value"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "dir": { "alias": "dir"; "required": false; }; }, { "onValueChange": "onValueChange"; }, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<RdxRadioGroupDirective, "div[RadioRoot]", ["RadioRoot"], { "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;
 }
-export {};

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

@@ -0,0 +1,12 @@
+import { InjectionToken } from '@angular/core';
+export interface RadioGroupProps {
+    name?: string;
+    disabled?: boolean;
+    defaultValue?: string;
+    value?: string;
+}
+export interface RadioGroupDirective extends RadioGroupProps {
+    select(value: string): void;
+    onTouched(): void;
+}
+export declare const RDX_RADIO_GROUP: InjectionToken<RadioGroupDirective>;