ngx-com 0.0.1 → 0.0.4

package/fesm2022/ngx-com-components-radio.mjs

@@ -0,0 +1,621 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, signal, input, model, booleanAttribute, output, linkedSignal, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, DestroyRef, viewChild } from '@angular/core';
+import { cva } from 'class-variance-authority';
+import { NgControl, NgForm, FormGroupDirective } from '@angular/forms';
+import { ErrorStateMatcher } from 'ngx-com/components/form-field';
+
+/**
+ * CVA variants for the visual radio circle.
+ *
+ * Uses `peer` selectors to style based on native input state:
+ * - `peer-checked:` for checked state
+ * - `peer-focus-visible:` for keyboard focus
+ * - `peer-disabled:` for disabled state
+ *
+ * @tokens `--color-border`, `--color-primary`, `--color-primary-hover`,
+ *         `--color-accent`, `--color-accent-hover`,
+ *         `--color-warn`, `--color-warn-hover`,
+ *         `--color-disabled`, `--color-ring`
+ */
+const radioCircleVariants = cva([
+    'com-radio__circle',
+    'inline-flex shrink-0 items-center justify-center',
+    'rounded-full border-2 border-border',
+    'transition-colors duration-150',
+    'peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-ring',
+    'peer-disabled:cursor-not-allowed peer-disabled:border-disabled peer-disabled:bg-disabled',
+], {
+    variants: {
+        variant: {
+            primary: [
+                'peer-checked:border-primary peer-checked:bg-primary peer-checked:text-primary-foreground',
+                'group-hover:border-primary-hover',
+                'peer-checked:group-hover:bg-primary-hover peer-checked:group-hover:border-primary-hover',
+            ],
+            accent: [
+                'peer-checked:border-accent peer-checked:bg-accent peer-checked:text-accent-foreground',
+                'group-hover:border-accent-hover',
+                'peer-checked:group-hover:bg-accent-hover peer-checked:group-hover:border-accent-hover',
+            ],
+            warn: [
+                'peer-checked:border-warn peer-checked:bg-warn peer-checked:text-warn-foreground',
+                'group-hover:border-warn-hover',
+                'peer-checked:group-hover:bg-warn-hover peer-checked:group-hover:border-warn-hover',
+            ],
+        },
+        size: {
+            sm: 'size-4',
+            md: 'size-5',
+            lg: 'size-6',
+        },
+    },
+    defaultVariants: {
+        variant: 'primary',
+        size: 'md',
+    },
+});
+/** Size-based classes for the inner dot indicator. */
+const RADIO_DOT_SIZES = {
+    sm: 'size-1.5',
+    md: 'size-2',
+    lg: 'size-2.5',
+};
+/** Size-based classes for the label content. */
+const RADIO_LABEL_SIZES = {
+    sm: 'text-sm ms-2',
+    md: 'text-base ms-2.5',
+    lg: 'text-lg ms-3',
+};
+/** Base classes for the radio group container. */
+const RADIO_GROUP_BASE = 'com-radio-group__container flex';
+/** Orientation-based classes for the radio group container. */
+const RADIO_GROUP_ORIENTATIONS = {
+    vertical: `${RADIO_GROUP_BASE} flex-col gap-2`,
+    horizontal: `${RADIO_GROUP_BASE} flex-row flex-wrap gap-4`,
+};
+
+/** Auto-incrementing ID counter for unique radio IDs. */
+let nextRadioId = 0;
+/** Generates a unique radio ID. */
+function generateRadioId() {
+    return `com-radio-${nextRadioId++}`;
+}
+/** Auto-incrementing ID counter for unique radio group IDs. */
+let nextGroupId = 0;
+/** Generates a unique radio group ID. */
+function generateRadioGroupId() {
+    return `com-radio-group-${nextGroupId++}`;
+}
+
+/** Injection token for radio group context. */
+const COM_RADIO_GROUP = new InjectionToken('COM_RADIO_GROUP');
+/**
+ * Radio group component that manages a set of radio buttons.
+ *
+ * Provides mutual exclusion, shared name, and roving tabindex keyboard navigation.
+ * Implements `ControlValueAccessor` for Reactive Forms integration.
+ *
+ * @tokens `--color-border`, `--color-primary`, `--color-primary-foreground`, `--color-primary-hover`,
+ *         `--color-accent`, `--color-accent-foreground`, `--color-accent-hover`,
+ *         `--color-warn`, `--color-warn-foreground`, `--color-warn-hover`,
+ *         `--color-disabled`, `--color-disabled-foreground`, `--color-ring`
+ *
+ * @example Basic usage
+ * ```html
+ * <com-radio-group [(value)]="selectedFruit" aria-label="Select a fruit">
+ *   <com-radio value="apple">Apple</com-radio>
+ *   <com-radio value="banana">Banana</com-radio>
+ *   <com-radio value="cherry">Cherry</com-radio>
+ * </com-radio-group>
+ * ```
+ *
+ * @example With reactive forms
+ * ```html
+ * <com-radio-group formControlName="size" aria-label="Select size">
+ *   <com-radio value="sm">Small</com-radio>
+ *   <com-radio value="md">Medium</com-radio>
+ *   <com-radio value="lg">Large</com-radio>
+ * </com-radio-group>
+ * ```
+ *
+ * @example Horizontal orientation
+ * ```html
+ * <com-radio-group [(value)]="color" orientation="horizontal">
+ *   <com-radio value="red">Red</com-radio>
+ *   <com-radio value="green">Green</com-radio>
+ *   <com-radio value="blue">Blue</com-radio>
+ * </com-radio-group>
+ * ```
+ *
+ * @example With variants
+ * ```html
+ * <com-radio-group [(value)]="priority" variant="warn" size="lg">
+ *   <com-radio value="low">Low</com-radio>
+ *   <com-radio value="medium">Medium</com-radio>
+ *   <com-radio value="high">High</com-radio>
+ * </com-radio-group>
+ * ```
+ */
+class ComRadioGroup {
+    /** Optional NgControl for reactive forms integration. */
+    ngControl = inject(NgControl, { optional: true, self: true });
+    /** Error state matcher for determining when to show validation errors. */
+    defaultErrorStateMatcher = inject(ErrorStateMatcher);
+    parentForm = inject(NgForm, { optional: true });
+    parentFormGroup = inject(FormGroupDirective, { optional: true });
+    /** Unique ID for this radio group instance. */
+    uniqueId = generateRadioGroupId();
+    /** ID for the error message element. */
+    errorId = `${this.uniqueId}-error`;
+    /** Registered radio items. */
+    registeredRadios = signal([], ...(ngDevMode ? [{ debugName: "registeredRadios" }] : []));
+    // Inputs
+    name = input(this.uniqueId, ...(ngDevMode ? [{ debugName: "name" }] : []));
+    value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    disabled = model(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    required = input(false, { ...(ngDevMode ? { debugName: "required" } : {}), transform: booleanAttribute });
+    orientation = input('vertical', ...(ngDevMode ? [{ debugName: "orientation" }] : []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    variant = input('primary', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    errorMessage = input('', ...(ngDevMode ? [{ debugName: "errorMessage" }] : []));
+    errorStateMatcher = input(...(ngDevMode ? [undefined, { debugName: "errorStateMatcher" }] : []));
+    /** Internal signal to track when control is touched, used to trigger error state re-evaluation. */
+    _touched = signal(false, ...(ngDevMode ? [{ debugName: "_touched" }] : []));
+    ariaLabel = input(null, { ...(ngDevMode ? { debugName: "ariaLabel" } : {}), alias: 'aria-label' });
+    ariaLabelledby = input(null, { ...(ngDevMode ? { debugName: "ariaLabelledby" } : {}), alias: 'aria-labelledby' });
+    ariaDescribedby = input(null, { ...(ngDevMode ? { debugName: "ariaDescribedby" } : {}), alias: 'aria-describedby' });
+    // Outputs
+    /** Emits when the selection changes, with full event details. */
+    selectionChange = output();
+    /**
+     * Tracks the currently focused radio value for roving tabindex.
+     * Resets to the current selection (or first focusable) when value or radios change.
+     */
+    focusedValueSignal = linkedSignal({ ...(ngDevMode ? { debugName: "focusedValueSignal" } : {}), source: () => ({ value: this.value(), radios: this.registeredRadios() }),
+        computation: ({ value, radios }) => {
+            if (value && radios.some((r) => r.value() === value && !r.isDisabled())) {
+                return value;
+            }
+            const firstFocusable = radios.find((r) => !r.isDisabled());
+            return firstFocusable?.value() ?? null;
+        } });
+    // Computed
+    /**
+     * Computed error state derived from form validation.
+     * Shows errors when control is invalid and touched/submitted.
+     */
+    errorState = computed(() => {
+        // Read _touched to trigger re-evaluation when touched changes
+        this._touched();
+        const matcher = this.errorStateMatcher() ?? this.defaultErrorStateMatcher;
+        const form = this.parentFormGroup ?? this.parentForm;
+        return matcher.isErrorState(this.ngControl?.control ?? null, form);
+    }, ...(ngDevMode ? [{ debugName: "errorState" }] : []));
+    computedAriaDescribedby = computed(() => {
+        const userDescribedby = this.ariaDescribedby();
+        if (this.errorState() && this.errorMessage()) {
+            return userDescribedby ? `${userDescribedby} ${this.errorId}` : this.errorId;
+        }
+        return userDescribedby;
+    }, ...(ngDevMode ? [{ debugName: "computedAriaDescribedby" }] : []));
+    groupClasses = computed(() => RADIO_GROUP_ORIENTATIONS[this.orientation()], ...(ngDevMode ? [{ debugName: "groupClasses" }] : []));
+    // CVA callbacks
+    onChange = () => { };
+    onTouchedCallback = () => { };
+    constructor() {
+        if (this.ngControl) {
+            this.ngControl.valueAccessor = this;
+        }
+    }
+    /** Creates the context object for child radios. */
+    createContext() {
+        return {
+            name: this.name,
+            value: this.value,
+            disabled: this.disabled,
+            size: this.size,
+            variant: this.variant,
+            orientation: this.orientation,
+            focusedValue: this.focusedValueSignal,
+            select: this.select.bind(this),
+            focusNext: this.focusNext.bind(this),
+            focusPrevious: this.focusPrevious.bind(this),
+            register: this.register.bind(this),
+            unregister: this.unregister.bind(this),
+            onTouched: () => this.onTouchedCallback(),
+        };
+    }
+    /** Register a radio item with the group. */
+    register(radio) {
+        this.registeredRadios.update((radios) => [...radios, radio]);
+    }
+    /** Unregister a radio item from the group. */
+    unregister(radio) {
+        this.registeredRadios.update((radios) => radios.filter((r) => r !== radio));
+    }
+    // ControlValueAccessor implementation
+    writeValue(value) {
+        this.value.set(value);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouchedCallback = () => {
+            this._touched.set(true);
+            fn();
+        };
+    }
+    setDisabledState(isDisabled) {
+        this.disabled.set(isDisabled);
+    }
+    // Public API
+    /** Selects a radio by value. */
+    select(newValue) {
+        if (this.disabled()) {
+            return;
+        }
+        this.value.set(newValue);
+        this.focusedValueSignal.set(newValue);
+        this.onChange(newValue);
+        this.selectionChange.emit({ value: newValue });
+    }
+    /** Focuses the next non-disabled radio (with cyclic wrap). */
+    focusNext(currentValue) {
+        const allRadios = this.registeredRadios();
+        const focusableRadios = allRadios.filter((r) => !r.isDisabled());
+        if (focusableRadios.length === 0) {
+            return;
+        }
+        const currentIndex = focusableRadios.findIndex((r) => r.value() === currentValue);
+        const nextIndex = (currentIndex + 1) % focusableRadios.length;
+        const nextRadio = focusableRadios[nextIndex];
+        if (nextRadio) {
+            this.focusedValueSignal.set(nextRadio.value());
+            this.select(nextRadio.value());
+            nextRadio.focus();
+        }
+    }
+    /** Focuses the previous non-disabled radio (with cyclic wrap). */
+    focusPrevious(currentValue) {
+        const allRadios = this.registeredRadios();
+        const focusableRadios = allRadios.filter((r) => !r.isDisabled());
+        if (focusableRadios.length === 0) {
+            return;
+        }
+        const currentIndex = focusableRadios.findIndex((r) => r.value() === currentValue);
+        const prevIndex = (currentIndex - 1 + focusableRadios.length) % focusableRadios.length;
+        const prevRadio = focusableRadios[prevIndex];
+        if (prevRadio) {
+            this.focusedValueSignal.set(prevRadio.value());
+            this.select(prevRadio.value());
+            prevRadio.focus();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComRadioGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ComRadioGroup, isStandalone: true, selector: "com-radio-group", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, errorStateMatcher: { classPropertyName: "errorStateMatcher", publicName: "errorStateMatcher", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", disabled: "disabledChange", selectionChange: "selectionChange" }, host: { properties: { "class.com-radio-group--disabled": "disabled()", "class.com-radio-group--error": "errorState()" }, classAttribute: "com-radio-group block" }, providers: [
+            {
+                provide: COM_RADIO_GROUP,
+                useFactory: () => {
+                    const group = inject(ComRadioGroup);
+                    return group.createContext();
+                },
+            },
+        ], exportAs: ["comRadioGroup"], ngImport: i0, template: `
+    <div
+      role="radiogroup"
+      [class]="groupClasses()"
+      [attr.aria-label]="ariaLabel()"
+      [attr.aria-labelledby]="ariaLabelledby()"
+      [attr.aria-describedby]="computedAriaDescribedby()"
+      [attr.aria-required]="required() || null"
+      [attr.aria-invalid]="errorState() || null"
+    >
+      <ng-content />
+    </div>
+    @if (errorState() && errorMessage()) {
+      <div
+        [id]="errorId"
+        class="com-radio-group__error mt-1.5 text-sm text-warn"
+        role="alert"
+      >
+        {{ errorMessage() }}
+      </div>
+    }
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComRadioGroup, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'com-radio-group',
+                    exportAs: 'comRadioGroup',
+                    template: `
+    <div
+      role="radiogroup"
+      [class]="groupClasses()"
+      [attr.aria-label]="ariaLabel()"
+      [attr.aria-labelledby]="ariaLabelledby()"
+      [attr.aria-describedby]="computedAriaDescribedby()"
+      [attr.aria-required]="required() || null"
+      [attr.aria-invalid]="errorState() || null"
+    >
+      <ng-content />
+    </div>
+    @if (errorState() && errorMessage()) {
+      <div
+        [id]="errorId"
+        class="com-radio-group__error mt-1.5 text-sm text-warn"
+        role="alert"
+      >
+        {{ errorMessage() }}
+      </div>
+    }
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    providers: [
+                        {
+                            provide: COM_RADIO_GROUP,
+                            useFactory: () => {
+                                const group = inject(ComRadioGroup);
+                                return group.createContext();
+                            },
+                        },
+                    ],
+                    host: {
+                        class: 'com-radio-group block',
+                        '[class.com-radio-group--disabled]': 'disabled()',
+                        '[class.com-radio-group--error]': 'errorState()',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], errorStateMatcher: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorStateMatcher", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], ariaDescribedby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-describedby", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }] } });
+
+/**
+ * Production-grade radio component with full accessibility support.
+ *
+ * Uses a native `<input type="radio">` for built-in keyboard handling,
+ * `:checked` pseudo-class, and screen reader support.
+ *
+ * Must be used within a `ComRadioGroup` which manages the selected value
+ * and provides the shared `name` attribute.
+ *
+ * @tokens `--color-border`, `--color-primary`, `--color-primary-foreground`, `--color-primary-hover`,
+ *         `--color-accent`, `--color-accent-foreground`, `--color-accent-hover`,
+ *         `--color-warn`, `--color-warn-foreground`, `--color-warn-hover`,
+ *         `--color-disabled`, `--color-disabled-foreground`, `--color-ring`
+ *
+ * @example Basic usage within a group
+ * ```html
+ * <com-radio-group [(value)]="selectedOption">
+ *   <com-radio value="option1">Option 1</com-radio>
+ *   <com-radio value="option2">Option 2</com-radio>
+ *   <com-radio value="option3">Option 3</com-radio>
+ * </com-radio-group>
+ * ```
+ *
+ * @example Disabled option
+ * ```html
+ * <com-radio-group [(value)]="selected">
+ *   <com-radio value="enabled">Enabled option</com-radio>
+ *   <com-radio value="disabled" [disabled]="true">Disabled option</com-radio>
+ * </com-radio-group>
+ * ```
+ */
+class ComRadio {
+    /** Optional parent radio group context. */
+    group = inject(COM_RADIO_GROUP, {
+        optional: true,
+    });
+    /** DestroyRef for cleanup. */
+    destroyRef = inject(DestroyRef);
+    /** Reference to the native input element. */
+    inputRef = viewChild('inputElement', ...(ngDevMode ? [{ debugName: "inputRef" }] : []));
+    /** Unique ID for this radio instance. */
+    uniqueId = generateRadioId();
+    // Inputs
+    value = input.required(...(ngDevMode ? [{ debugName: "value" }] : []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    variant = input('primary', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    disabled = model(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
+    ariaLabel = input(null, { ...(ngDevMode ? { debugName: "ariaLabel" } : {}), alias: 'aria-label' });
+    ariaLabelledby = input(null, { ...(ngDevMode ? { debugName: "ariaLabelledby" } : {}), alias: 'aria-labelledby' });
+    ariaDescribedby = input(null, { ...(ngDevMode ? { debugName: "ariaDescribedby" } : {}), alias: 'aria-describedby' });
+    // Outputs
+    changed = output();
+    // Computed state
+    inputId = computed(() => this.id() ?? this.uniqueId, ...(ngDevMode ? [{ debugName: "inputId" }] : []));
+    /** Resolve size from group or local input. */
+    resolvedSize = computed(() => this.group?.size() ?? this.size(), ...(ngDevMode ? [{ debugName: "resolvedSize" }] : []));
+    /** Resolve variant from group or local input. */
+    resolvedVariant = computed(() => this.group?.variant() ?? this.variant(), ...(ngDevMode ? [{ debugName: "resolvedVariant" }] : []));
+    /** Whether this radio is checked based on group value. */
+    isChecked = computed(() => {
+        if (!this.group) {
+            return false;
+        }
+        return this.group.value() === this.value();
+    }, ...(ngDevMode ? [{ debugName: "isChecked" }] : []));
+    /** Whether this radio is disabled (from local or group). */
+    isDisabled = computed(() => this.disabled() || (this.group?.disabled() ?? false), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
+    /** Get name from group. */
+    groupName = computed(() => this.group?.name(), ...(ngDevMode ? [{ debugName: "groupName" }] : []));
+    /** Tab index for roving tabindex pattern. */
+    tabIndex = computed(() => {
+        if (this.isDisabled()) {
+            return -1;
+        }
+        if (!this.group) {
+            return 0;
+        }
+        // Roving tabindex: only the selected or first focusable item gets tabindex 0
+        const isSelected = this.isChecked();
+        const isFocusTarget = this.group.focusedValue() === this.value();
+        if (isSelected || isFocusTarget) {
+            return 0;
+        }
+        return -1;
+    }, ...(ngDevMode ? [{ debugName: "tabIndex" }] : []));
+    circleClasses = computed(() => radioCircleVariants({ variant: this.resolvedVariant(), size: this.resolvedSize() }), ...(ngDevMode ? [{ debugName: "circleClasses" }] : []));
+    dotSizeClass = computed(() => RADIO_DOT_SIZES[this.resolvedSize()], ...(ngDevMode ? [{ debugName: "dotSizeClass" }] : []));
+    labelSizeClass = computed(() => RADIO_LABEL_SIZES[this.resolvedSize()], ...(ngDevMode ? [{ debugName: "labelSizeClass" }] : []));
+    ngOnInit() {
+        // Register with the group
+        this.group?.register(this);
+        // Unregister on destroy
+        this.destroyRef.onDestroy(() => {
+            this.group?.unregister(this);
+        });
+    }
+    // Event handlers
+    onInputChange(event) {
+        const input = event.target;
+        if (input.checked && this.group) {
+            this.group.select(this.value());
+            this.changed.emit({ value: this.value(), source: this });
+        }
+    }
+    onBlur() {
+        this.group?.onTouched?.();
+    }
+    onKeyDown(event) {
+        if (!this.group) {
+            return;
+        }
+        const { key } = event;
+        const isVertical = this.group.orientation() === 'vertical';
+        const isHorizontal = this.group.orientation() === 'horizontal';
+        let handled = false;
+        if ((isVertical && key === 'ArrowDown') ||
+            (isHorizontal && key === 'ArrowRight')) {
+            this.group.focusNext(this.value());
+            handled = true;
+        }
+        else if ((isVertical && key === 'ArrowUp') ||
+            (isHorizontal && key === 'ArrowLeft')) {
+            this.group.focusPrevious(this.value());
+            handled = true;
+        }
+        else if (key === ' ') {
+            // Space selects the focused radio
+            if (!this.isChecked()) {
+                this.group.select(this.value());
+                this.changed.emit({ value: this.value(), source: this });
+            }
+            handled = true;
+        }
+        if (handled) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+    }
+    // Public API
+    /** Focuses this radio's input element. */
+    focus() {
+        this.inputRef()?.nativeElement.focus();
+    }
+    /** Selects this radio programmatically. */
+    select() {
+        if (this.isDisabled() || !this.group) {
+            return;
+        }
+        this.group.select(this.value());
+        this.changed.emit({ value: this.value(), source: this });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComRadio, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.0", type: ComRadio, isStandalone: true, selector: "com-radio", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", changed: "changed" }, host: { properties: { "class.com-radio--disabled": "isDisabled()", "class.com-radio--checked": "isChecked()" }, classAttribute: "com-radio inline-block align-middle" }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }], exportAs: ["comRadio"], ngImport: i0, template: `
+    <label
+      class="group relative inline-flex items-center"
+      [class.cursor-pointer]="!isDisabled()"
+      [class.cursor-not-allowed]="isDisabled()"
+    >
+      <span><input
+        #inputElement
+        type="radio"
+        class="peer sr-only"
+        [id]="inputId()"
+        [checked]="isChecked()"
+        [disabled]="isDisabled()"
+        [attr.name]="groupName()"
+        [attr.value]="value()"
+        [attr.aria-label]="ariaLabel()"
+        [attr.aria-labelledby]="ariaLabelledby()"
+        [attr.aria-describedby]="ariaDescribedby()"
+        [attr.tabindex]="tabIndex()"
+        (change)="onInputChange($event)"
+        (blur)="onBlur()"
+        (keydown)="onKeyDown($event)"
+      /></span>
+      <div [class]="circleClasses()">
+        <div
+          class="com-radio__dot rounded-full bg-current transition-transform duration-150 peer-disabled:bg-disabled-foreground"
+          [class]="dotSizeClass()"
+          [class.scale-100]="isChecked()"
+          [class.scale-0]="!isChecked()"
+        ></div>
+      </div>
+      <span
+        class="com-radio__label select-none peer-disabled:cursor-not-allowed peer-disabled:text-disabled-foreground"
+        [class]="labelSizeClass()"
+      >
+        <ng-content />
+      </span>
+    </label>
+  `, isInline: true, styles: [".sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComRadio, decorators: [{
+            type: Component,
+            args: [{ selector: 'com-radio', exportAs: 'comRadio', template: `
+    <label
+      class="group relative inline-flex items-center"
+      [class.cursor-pointer]="!isDisabled()"
+      [class.cursor-not-allowed]="isDisabled()"
+    >
+      <span><input
+        #inputElement
+        type="radio"
+        class="peer sr-only"
+        [id]="inputId()"
+        [checked]="isChecked()"
+        [disabled]="isDisabled()"
+        [attr.name]="groupName()"
+        [attr.value]="value()"
+        [attr.aria-label]="ariaLabel()"
+        [attr.aria-labelledby]="ariaLabelledby()"
+        [attr.aria-describedby]="ariaDescribedby()"
+        [attr.tabindex]="tabIndex()"
+        (change)="onInputChange($event)"
+        (blur)="onBlur()"
+        (keydown)="onKeyDown($event)"
+      /></span>
+      <div [class]="circleClasses()">
+        <div
+          class="com-radio__dot rounded-full bg-current transition-transform duration-150 peer-disabled:bg-disabled-foreground"
+          [class]="dotSizeClass()"
+          [class.scale-100]="isChecked()"
+          [class.scale-0]="!isChecked()"
+        ></div>
+      </div>
+      <span
+        class="com-radio__label select-none peer-disabled:cursor-not-allowed peer-disabled:text-disabled-foreground"
+        [class]="labelSizeClass()"
+      >
+        <ng-content />
+      </span>
+    </label>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        class: 'com-radio inline-block align-middle',
+                        '[class.com-radio--disabled]': 'isDisabled()',
+                        '[class.com-radio--checked]': 'isChecked()',
+                    }, styles: [".sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"] }]
+        }], propDecorators: { inputRef: [{ type: i0.ViewChild, args: ['inputElement', { isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], ariaDescribedby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-describedby", required: false }] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
+
+// Public API for the radio component
+// Main components
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { COM_RADIO_GROUP, ComRadio, ComRadioGroup, RADIO_DOT_SIZES, RADIO_GROUP_ORIENTATIONS, RADIO_LABEL_SIZES, radioCircleVariants };
+//# sourceMappingURL=ngx-com-components-radio.mjs.map