@nuraly/lumenui 0.2.1 → 0.3.2

package/dist/src/components/radio-group/controllers/focus.controller.d.ts

@@ -0,0 +1,98 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { FocusController } from '../interfaces/focus-controller.interface.js';
+/**
+ * Controller that manages focus state and focus handling for radio groups
+ * Implements proper focus management with accessibility compliance
+ *
+ * Features:
+ * - Tracks focused radio option index
+ * - Manages focus state transitions
+ * - Provides focus/blur methods for programmatic control
+ * - Handles roving tabindex for accessibility
+ *
+ * @example
+ * ```typescript
+ * const controller = new RadioFocusController(hostElement);
+ * controller.setFocusedOption(1); // Focus second option
+ * controller.focus(); // Programmatically focus the group
+ * ```
+ */
+export declare class RadioFocusController implements FocusController {
+    private host;
+    private _focusedIndex;
+    private _hasFocus;
+    private boundFocusInHandler;
+    private boundFocusOutHandler;
+    /**
+     * Creates a new RadioFocusController instance
+     * Sets up event handlers for focus management
+     *
+     * @param host - The host radio element
+     */
+    constructor(host: any);
+    /**
+     * Called when the host element is connected to the DOM
+     * Sets up focus event listeners for the radio group
+     */
+    hostConnected(): void;
+    /**
+     * Called when the host element is disconnected from the DOM
+     * Removes focus event listeners to prevent memory leaks
+     */
+    hostDisconnected(): void;
+    /**
+     * Gets the index of the currently focused radio option
+     *
+     * @returns The focused option index, -1 if none focused
+     *
+     * @example
+     * ```typescript
+     * const index = controller.focusedIndex;
+     * console.log(`Option ${index} is focused`);
+     * ```
+     */
+    get focusedIndex(): number;
+    /**
+     * Checks if the radio group currently has focus
+     *
+     * @returns True if any option in the group has focus, false otherwise
+     *
+     * @example
+     * ```typescript
+     * if (controller.hasFocus) {
+     *   console.log('Radio group is focused');
+     * }
+     * ```
+     */
+    get hasFocus(): boolean;
+    /**
+     * Sets the focused option by index
+     * Updates internal state and triggers re-render if needed
+     *
+     * @param index - The index of the option to focus
+     *
+     * @example
+     * ```typescript
+     * controller.setFocusedOption(2); // Focus third option
+     * ```
+     */
+    setFocusedOption(index: number): void;
+    /**
+     * Get the currently focused option index (method version for interface compliance)
+     * @returns The focused option index or -1 if none focused
+     */
+    getFocusedIndex(): number;
+    clearFocus(): void;
+    private handleFocusIn;
+    private handleFocusOut;
+    focus(): void;
+    blur(): void;
+    private focusOptionAtIndex;
+    updateTabIndices(focusedIndex?: number): void;
+    hostUpdated(): void;
+}
+//# sourceMappingURL=focus.controller.d.ts.map

package/dist/src/components/radio-group/controllers/focus.controller.js

@@ -0,0 +1,216 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Controller that manages focus state and focus handling for radio groups
+ * Implements proper focus management with accessibility compliance
+ *
+ * Features:
+ * - Tracks focused radio option index
+ * - Manages focus state transitions
+ * - Provides focus/blur methods for programmatic control
+ * - Handles roving tabindex for accessibility
+ *
+ * @example
+ * ```typescript
+ * const controller = new RadioFocusController(hostElement);
+ * controller.setFocusedOption(1); // Focus second option
+ * controller.focus(); // Programmatically focus the group
+ * ```
+ */
+export class RadioFocusController {
+    /**
+     * Creates a new RadioFocusController instance
+     * Sets up event handlers for focus management
+     *
+     * @param host - The host radio element
+     */
+    constructor(host) {
+        this._focusedIndex = -1;
+        this._hasFocus = false;
+        this.host = host;
+        this.boundFocusInHandler = this.handleFocusIn.bind(this);
+        this.boundFocusOutHandler = this.handleFocusOut.bind(this);
+        host.addController(this);
+    }
+    /**
+     * Called when the host element is connected to the DOM
+     * Sets up focus event listeners for the radio group
+     */
+    hostConnected() {
+        this.host.addEventListener('focusin', this.boundFocusInHandler);
+        this.host.addEventListener('focusout', this.boundFocusOutHandler);
+    }
+    /**
+     * Called when the host element is disconnected from the DOM
+     * Removes focus event listeners to prevent memory leaks
+     */
+    hostDisconnected() {
+        this.host.removeEventListener('focusin', this.boundFocusInHandler);
+        this.host.removeEventListener('focusout', this.boundFocusOutHandler);
+    }
+    /**
+     * Gets the index of the currently focused radio option
+     *
+     * @returns The focused option index, -1 if none focused
+     *
+     * @example
+     * ```typescript
+     * const index = controller.focusedIndex;
+     * console.log(`Option ${index} is focused`);
+     * ```
+     */
+    get focusedIndex() {
+        return this._focusedIndex;
+    }
+    /**
+     * Checks if the radio group currently has focus
+     *
+     * @returns True if any option in the group has focus, false otherwise
+     *
+     * @example
+     * ```typescript
+     * if (controller.hasFocus) {
+     *   console.log('Radio group is focused');
+     * }
+     * ```
+     */
+    get hasFocus() {
+        return this._hasFocus;
+    }
+    /**
+     * Sets the focused option by index
+     * Updates internal state and triggers re-render if needed
+     *
+     * @param index - The index of the option to focus
+     *
+     * @example
+     * ```typescript
+     * controller.setFocusedOption(2); // Focus third option
+     * ```
+     */
+    setFocusedOption(index) {
+        const oldIndex = this._focusedIndex;
+        this._focusedIndex = index;
+        if (oldIndex !== index) {
+            this.host.requestUpdate();
+        }
+    }
+    /**
+     * Get the currently focused option index (method version for interface compliance)
+     * @returns The focused option index or -1 if none focused
+     */
+    getFocusedIndex() {
+        return this._focusedIndex;
+    }
+    clearFocus() {
+        this._focusedIndex = -1;
+        this._hasFocus = false;
+        this.host.requestUpdate();
+    }
+    // Event handlers
+    handleFocusIn(event) {
+        var _a;
+        this._hasFocus = true;
+        // Determine which option received focus
+        const target = event.target;
+        if (target && target.matches('input[type="radio"], nr-button[role="radio"]')) {
+            const inputs = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('input[type="radio"], nr-button[role="radio"]');
+            if (inputs) {
+                const index = Array.from(inputs).indexOf(target);
+                if (index !== -1) {
+                    this.setFocusedOption(index);
+                }
+            }
+        }
+        this.host.requestUpdate();
+    }
+    handleFocusOut(event) {
+        const relatedTarget = event.relatedTarget;
+        const host = this.host;
+        // Check if focus is moving outside the radio group
+        if (!relatedTarget || !host.contains(relatedTarget)) {
+            this._hasFocus = false;
+            this.host.requestUpdate();
+        }
+    }
+    // Programmatic focus methods
+    focus() {
+        const options = this.host.options;
+        const selectedValue = this.host.value;
+        // Focus the selected option if one exists
+        const selectedIndex = options.findIndex((option) => option.value === selectedValue);
+        if (selectedIndex !== -1) {
+            this.focusOptionAtIndex(selectedIndex);
+            return;
+        }
+        // Otherwise focus the first non-disabled option
+        const firstEnabledIndex = options.findIndex((option) => !option.disabled);
+        if (firstEnabledIndex !== -1) {
+            this.focusOptionAtIndex(firstEnabledIndex);
+        }
+    }
+    blur() {
+        const host = this.host;
+        const shadowRoot = host.shadowRoot;
+        if (!shadowRoot)
+            return;
+        // Find and blur any focused radio input or button
+        const focusedElement = shadowRoot.querySelector('input[type="radio"]:focus, nr-button[role="radio"]:focus');
+        if (focusedElement && typeof focusedElement.blur === 'function') {
+            focusedElement.blur();
+        }
+    }
+    focusOptionAtIndex(index) {
+        const host = this.host;
+        const shadowRoot = host.shadowRoot;
+        if (!shadowRoot)
+            return;
+        // Update tab indices first
+        this.updateTabIndices(index);
+        // Focus the element at the specified index
+        const radioInputs = shadowRoot.querySelectorAll('input[type="radio"]');
+        if (radioInputs[index]) {
+            radioInputs[index].focus();
+            return;
+        }
+        const buttons = shadowRoot.querySelectorAll('nr-button[role="radio"]');
+        if (buttons[index]) {
+            buttons[index].focus();
+            return;
+        }
+    }
+    // Tab index management for proper keyboard navigation
+    updateTabIndices(focusedIndex) {
+        const host = this.host;
+        const shadowRoot = host.shadowRoot;
+        if (!shadowRoot)
+            return;
+        const options = this.host.options;
+        const selectedValue = this.host.value;
+        // Determine which option should be tabbable
+        let tabbableIndex = focusedIndex;
+        if (tabbableIndex === undefined) {
+            // If no specific index, use selected option or first enabled option
+            const selectedIndex = options.findIndex((option) => option.value === selectedValue);
+            tabbableIndex = selectedIndex !== -1 ? selectedIndex : options.findIndex((option) => !option.disabled);
+        }
+        // Update radio inputs
+        const radioInputs = shadowRoot.querySelectorAll('input[type="radio"]');
+        radioInputs.forEach((input, index) => {
+            input.tabIndex = index === tabbableIndex ? 0 : -1;
+        });
+        // Update buttons (for button-style radio)
+        const buttons = shadowRoot.querySelectorAll('nr-button[role="radio"]');
+        buttons.forEach((button, index) => {
+            button.tabIndex = index === tabbableIndex ? 0 : -1;
+        });
+    }
+    // Method to be called after rendering to update tab indices
+    hostUpdated() {
+        this.updateTabIndices();
+    }
+}
+//# sourceMappingURL=focus.controller.js.map

package/dist/src/components/radio-group/controllers/group.controller.d.ts

@@ -0,0 +1,140 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { RadioButtonOption } from '../radio-group.types.js';
+import { SelectionController, RadioHost } from '../interfaces/index.js';
+/**
+ * Controller that manages radio group state and selection logic
+ * Implements type-safe selection operations with proper error handling
+ *
+ * @example
+ * ```typescript
+ * const controller = new RadioGroupController(hostElement);
+ * controller.selectOption(option); // Type-safe selection
+ * ```
+ */
+export declare class RadioGroupController implements SelectionController {
+    readonly host: RadioHost;
+    constructor(host: RadioHost & {
+        dispatchEvent: (event: Event) => void;
+    });
+    /**
+     * Called when the host element is connected to the DOM
+     * Initializes the default selection if provided
+     *
+     * @fires change - When default value is set automatically
+     */
+    hostConnected(): void;
+    /**
+     * Called when the host element is disconnected from the DOM
+     * Performs cleanup operations
+     */
+    hostDisconnected(): void;
+    /**
+     * Selects a radio option and dispatches change events
+     * Implements proper error handling for disabled options
+     *
+     * @param option - The radio option to select
+     * @throws {Error} When option is disabled or invalid
+     * @fires change - When selection changes successfully
+     *
+     * @example
+     * ```typescript
+     * controller.selectOption({ value: 'option1', label: 'Option 1' });
+     * ```
+     */
+    selectOption(option: RadioButtonOption): void;
+    /**
+     * Gets the currently selected radio option
+     *
+     * @returns The selected option object or undefined if none selected
+     *
+     * @example
+     * ```typescript
+     * const selected = controller.getSelectedOption();
+     * console.log(selected?.label); // "Option 1"
+     * ```
+     */
+    getSelectedOption(): RadioButtonOption | undefined;
+    /**
+     * Checks if a specific option is currently selected
+     *
+     * @param option - The option to check
+     * @returns True if the option is selected, false otherwise
+     *
+     * @example
+     * ```typescript
+     * const isSelected = controller.isOptionSelected(option);
+     * ```
+     */
+    isOptionSelected(option: RadioButtonOption): boolean;
+    /**
+     * Checks if a specific option is disabled
+     * Takes into account both global disabled state and option-specific disabled state
+     *
+     * @param option - The option to check
+     * @returns True if the option is disabled, false otherwise
+     *
+     * @example
+     * ```typescript
+     * if (!controller.isOptionDisabled(option)) {
+     *   controller.selectOption(option);
+     * }
+     * ```
+     */
+    isOptionDisabled(option: RadioButtonOption): boolean;
+    /**
+     * Gets form data for native form submission
+     * Returns key-value pair suitable for FormData
+     *
+     * @returns Object with form field name and selected value
+     *
+     * @example
+     * ```typescript
+     * const formData = controller.getFormData();
+     * // { "radioGroup": "selectedValue" }
+     * ```
+     */
+    getFormData(): {
+        [key: string]: string;
+    };
+    /**
+     * Resets the radio group to its default value
+     * Triggers re-render to update the UI
+     *
+     * @fires change - When reset changes the selected value
+     *
+     * @example
+     * ```typescript
+     * controller.reset(); // Resets to defaultValue or empty
+     * ```
+     */
+    reset(): void;
+    /**
+     * Gets the currently selected value as a string
+     * Convenience method for accessing the raw value
+     *
+     * @returns The selected value string, empty string if none selected
+     *
+     * @example
+     * ```typescript
+     * const value = controller.getSelectedValue();
+     * console.log(value); // "option1"
+     * ```
+     */
+    getSelectedValue(): string;
+    /**
+     * Dispatches a change event when selection changes
+     * Creates a custom event with detailed information about the change
+     *
+     * @param option - The newly selected option
+     * @param oldValue - The previously selected value
+     * @fires change - Custom event with selection details
+     *
+     * @private
+     */
+    private dispatchChangeEvent;
+}
+//# sourceMappingURL=group.controller.d.ts.map

package/dist/src/components/radio-group/controllers/group.controller.js

@@ -0,0 +1,179 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Controller that manages radio group state and selection logic
+ * Implements type-safe selection operations with proper error handling
+ *
+ * @example
+ * ```typescript
+ * const controller = new RadioGroupController(hostElement);
+ * controller.selectOption(option); // Type-safe selection
+ * ```
+ */
+export class RadioGroupController {
+    constructor(host) {
+        this.host = host;
+        host.addController(this);
+    }
+    /**
+     * Called when the host element is connected to the DOM
+     * Initializes the default selection if provided
+     *
+     * @fires change - When default value is set automatically
+     */
+    hostConnected() {
+        // Initialize default selection if provided
+        if (this.host.defaultValue && !this.host.value) {
+            const defaultOption = this.host.options.find((opt) => opt.value === this.host.defaultValue);
+            if (defaultOption && !this.isOptionDisabled(defaultOption)) {
+                this.selectOption(defaultOption);
+            }
+        }
+    }
+    /**
+     * Called when the host element is disconnected from the DOM
+     * Performs cleanup operations
+     */
+    hostDisconnected() {
+        // Cleanup if needed
+    }
+    /**
+     * Selects a radio option and dispatches change events
+     * Implements proper error handling for disabled options
+     *
+     * @param option - The radio option to select
+     * @throws {Error} When option is disabled or invalid
+     * @fires change - When selection changes successfully
+     *
+     * @example
+     * ```typescript
+     * controller.selectOption({ value: 'option1', label: 'Option 1' });
+     * ```
+     */
+    selectOption(option) {
+        if (this.isOptionDisabled(option)) {
+            return;
+        }
+        const oldValue = this.host.value;
+        this.host.value = option.value;
+        // Dispatch change event
+        this.dispatchChangeEvent(option, oldValue);
+        this.host.requestUpdate();
+    }
+    /**
+     * Gets the currently selected radio option
+     *
+     * @returns The selected option object or undefined if none selected
+     *
+     * @example
+     * ```typescript
+     * const selected = controller.getSelectedOption();
+     * console.log(selected?.label); // "Option 1"
+     * ```
+     */
+    getSelectedOption() {
+        return this.host.options.find((option) => option.value === this.host.value);
+    }
+    /**
+     * Checks if a specific option is currently selected
+     *
+     * @param option - The option to check
+     * @returns True if the option is selected, false otherwise
+     *
+     * @example
+     * ```typescript
+     * const isSelected = controller.isOptionSelected(option);
+     * ```
+     */
+    isOptionSelected(option) {
+        return option.value === this.host.value;
+    }
+    /**
+     * Checks if a specific option is disabled
+     * Takes into account both global disabled state and option-specific disabled state
+     *
+     * @param option - The option to check
+     * @returns True if the option is disabled, false otherwise
+     *
+     * @example
+     * ```typescript
+     * if (!controller.isOptionDisabled(option)) {
+     *   controller.selectOption(option);
+     * }
+     * ```
+     */
+    isOptionDisabled(option) {
+        return this.host.disabled || Boolean(option.disabled);
+    }
+    /**
+     * Gets form data for native form submission
+     * Returns key-value pair suitable for FormData
+     *
+     * @returns Object with form field name and selected value
+     *
+     * @example
+     * ```typescript
+     * const formData = controller.getFormData();
+     * // { "radioGroup": "selectedValue" }
+     * ```
+     */
+    getFormData() {
+        return this.host.name ? { [this.host.name]: this.host.value } : {};
+    }
+    /**
+     * Resets the radio group to its default value
+     * Triggers re-render to update the UI
+     *
+     * @fires change - When reset changes the selected value
+     *
+     * @example
+     * ```typescript
+     * controller.reset(); // Resets to defaultValue or empty
+     * ```
+     */
+    reset() {
+        this.host.value = this.host.defaultValue || '';
+        this.host.requestUpdate();
+    }
+    /**
+     * Gets the currently selected value as a string
+     * Convenience method for accessing the raw value
+     *
+     * @returns The selected value string, empty string if none selected
+     *
+     * @example
+     * ```typescript
+     * const value = controller.getSelectedValue();
+     * console.log(value); // "option1"
+     * ```
+     */
+    getSelectedValue() {
+        return this.host.value;
+    }
+    /**
+     * Dispatches a change event when selection changes
+     * Creates a custom event with detailed information about the change
+     *
+     * @param option - The newly selected option
+     * @param oldValue - The previously selected value
+     * @fires change - Custom event with selection details
+     *
+     * @private
+     */
+    dispatchChangeEvent(option, oldValue) {
+        const changeEvent = new CustomEvent('nr-change', {
+            detail: {
+                value: option.value,
+                option: option,
+                oldValue: oldValue
+            },
+            bubbles: true,
+            composed: true
+        });
+        this.host.dispatchEvent(changeEvent);
+    }
+}
+//# sourceMappingURL=group.controller.js.map

package/dist/src/components/radio-group/controllers/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+export { RadioGroupController } from './group.controller.js';
+export { RadioKeyboardController } from './keyboard.controller.js';
+export { RadioFocusController } from './focus.controller.js';
+export { RadioValidationController } from './validation.controller.js';
+export { RadioRippleController } from './ripple.controller.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/components/radio-group/controllers/index.js

@@ -0,0 +1,11 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+export { RadioGroupController } from './group.controller.js';
+export { RadioKeyboardController } from './keyboard.controller.js';
+export { RadioFocusController } from './focus.controller.js';
+export { RadioValidationController } from './validation.controller.js';
+export { RadioRippleController } from './ripple.controller.js';
+//# sourceMappingURL=index.js.map

package/dist/src/components/radio-group/controllers/keyboard.controller.d.ts

@@ -0,0 +1,24 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { KeyboardController } from '../interfaces/focus-controller.interface.js';
+/**
+ * Controller that manages keyboard navigation for radio groups
+ * This controller ACTUALLY handles keyboard events instead of being a fake controller
+ */
+export declare class RadioKeyboardController implements KeyboardController {
+    private groupController;
+    private host;
+    private boundKeyDownHandler;
+    constructor(host: any, groupController: any);
+    hostConnected(): void;
+    hostDisconnected(): void;
+    handleKeyDown(event: KeyboardEvent): void;
+    private selectNextOption;
+    private selectPreviousOption;
+    private selectFirstEnabledOption;
+    private selectLastEnabledOption;
+}
+//# sourceMappingURL=keyboard.controller.d.ts.map