@nuraly/lumenui 0.2.1 → 0.2.2

package/dist/src/components/select/controllers/event.controller.js

@@ -0,0 +1,113 @@
+import { BaseSelectController } from './base.controller.js';
+/**
+ * Event controller manages all event handling for the select component
+ */
+export class SelectEventController extends BaseSelectController {
+    constructor() {
+        super(...arguments);
+        /**
+         * Handles clicks on the select trigger element
+         */
+        this.handleTriggerClick = (event) => {
+            if (this.host.disabled)
+                return;
+            event.preventDefault();
+            event.stopPropagation(); // Prevent window click handler from interfering
+            this.host.toggleDropdown();
+        };
+        /**
+         * Handles clicks on individual options
+         */
+        this.handleOptionClick = (event, option) => {
+            event.stopPropagation();
+            if (option.disabled)
+                return;
+            // Use toggleOption for multi-select to allow deselecting
+            if (this.host.multiple) {
+                this.host.toggleOption(option);
+            }
+            else {
+                this.host.selectOption(option);
+                // Auto-close dropdown for single selection mode
+                this.host.closeDropdown();
+            }
+        };
+        /**
+         * Handles removal of selected tags in multiple selection mode
+         */
+        this.handleTagRemove = (event, option) => {
+            event.stopPropagation();
+            this.host.unselectOption(option);
+        };
+        /**
+         * Handles the clear all selections button
+         */
+        this.handleClearAll = (event) => {
+            event.stopPropagation();
+            this.host.clearSelection();
+        };
+        /**
+         * Handles keyboard navigation and interactions
+         */
+        this.handleKeyDown = (event) => {
+            // Delegate to keyboard controller
+            const keyboardController = this.host.keyboardController;
+            if (keyboardController) {
+                keyboardController.handleKeyDown(event);
+            }
+        };
+        /**
+         * Handles focus events
+         */
+        this.handleFocus = () => {
+            // Delegate to focus controller
+            const focusController = this.host.focusController;
+            if (focusController) {
+                focusController.handleFocus();
+            }
+        };
+        /**
+         * Handles blur events
+         */
+        this.handleBlur = () => {
+            // Delegate to focus controller
+            const focusController = this.host.focusController;
+            if (focusController) {
+                focusController.handleBlur();
+            }
+            // Dropdown closing is managed by window click handler for better UX
+        };
+        /**
+         * Handles clicks outside the component to close dropdown
+         * Uses composedPath() to properly detect clicks on slotted content
+         */
+        this.handleWindowClick = (event) => {
+            const path = event.composedPath();
+            // Check if click is inside the host element using composed path
+            // This works correctly with shadow DOM and slotted content
+            if (!path.includes(this.host)) {
+                this.host.closeDropdown();
+            }
+        };
+    }
+    /**
+     * Sets up global event listeners (called when dropdown opens)
+     */
+    setupEventListeners() {
+        window.addEventListener('click', this.handleWindowClick);
+    }
+    /**
+     * Removes global event listeners (called on disconnect or dropdown close)
+     */
+    removeEventListeners() {
+        window.removeEventListener('click', this.handleWindowClick);
+    }
+    /**
+     * Cleanup when host disconnects
+     */
+    hostDisconnected() {
+        super.hostDisconnected();
+        this.removeEventListeners();
+    }
+}
+//# sourceMappingURL=event.controller.js.map

package/dist/src/components/select/controllers/focus.controller.d.ts

@@ -0,0 +1,79 @@
+import { FocusController } from '../interfaces/index.js';
+import { BaseSelectController } from './base.controller.js';
+import { SelectOption } from '../select.types.js';
+/**
+ * Focus controller manages focus states and focus-related interactions
+ */
+export declare class SelectFocusController extends BaseSelectController implements FocusController {
+    private _focusedIndex;
+    private _hasFocus;
+    /**
+     * Get currently focused option index
+     */
+    get focusedIndex(): number;
+    /**
+     * Get currently focused option
+     */
+    getFocusedOption(): SelectOption | undefined;
+    /**
+     * Check if component has focus
+     */
+    get hasFocus(): boolean;
+    /**
+     * Set focused option by index
+     */
+    setFocusedOption(index: number): void;
+    /**
+     * Focus the select component
+     */
+    focus(): void;
+    /**
+     * Blur the select component
+     */
+    blur(): void;
+    /**
+     * Focus next option
+     */
+    focusNext(): void;
+    /**
+     * Focus previous option
+     */
+    focusPrevious(): void;
+    /**
+     * Focus first option
+     */
+    focusFirst(): void;
+    /**
+     * Focus last option
+     */
+    focusLast(): void;
+    /**
+     * Clear focus
+     */
+    clearFocus(): void;
+    /**
+     * Handle focus event from host
+     */
+    handleFocus(): void;
+    /**
+     * Handle blur event from host
+     */
+    handleBlur(): void;
+    /**
+     * Get next focusable option index
+     */
+    private getNextFocusableIndex;
+    /**
+     * Get previous focusable option index
+     */
+    private getPreviousFocusableIndex;
+    /**
+     * Find option index by value
+     */
+    findOptionIndex(value: string): number;
+    /**
+     * Focus option by value
+     */
+    focusOptionByValue(value: string): void;
+}
+//# sourceMappingURL=focus.controller.d.ts.map

package/dist/src/components/select/controllers/focus.controller.js

@@ -0,0 +1,230 @@
+import { BaseSelectController } from './base.controller.js';
+/**
+ * Focus controller manages focus states and focus-related interactions
+ */
+export class SelectFocusController extends BaseSelectController {
+    constructor() {
+        super(...arguments);
+        this._focusedIndex = -1;
+        this._hasFocus = false;
+    }
+    /**
+     * Get currently focused option index
+     */
+    get focusedIndex() {
+        return this._focusedIndex;
+    }
+    /**
+     * Get currently focused option
+     */
+    getFocusedOption() {
+        if (this._focusedIndex >= 0 && this._focusedIndex < this.host.options.length) {
+            return this.host.options[this._focusedIndex];
+        }
+        return undefined;
+    }
+    /**
+     * Check if component has focus
+     */
+    get hasFocus() {
+        return this._hasFocus;
+    }
+    /**
+     * Set focused option by index
+     */
+    setFocusedOption(index) {
+        try {
+            if (index >= 0 && index < this.host.options.length) {
+                this._focusedIndex = index;
+                this.requestUpdate();
+                this.dispatchEvent(new CustomEvent('nr-focus-change', {
+                    detail: {
+                        focusedIndex: index,
+                        focusedOption: this.getFocusedOption(),
+                    },
+                    bubbles: true,
+                    composed: true,
+                }));
+            }
+        }
+        catch (error) {
+            this.handleError(error, 'setFocusedOption');
+        }
+    }
+    /**
+     * Focus the select component
+     */
+    focus() {
+        var _a;
+        try {
+            const hostElement = this._host;
+            const focusableElement = (_a = hostElement.querySelector) === null || _a === void 0 ? void 0 : _a.call(hostElement, '.wrapper');
+            if (focusableElement) {
+                focusableElement.focus();
+                this._hasFocus = true;
+                this.requestUpdate();
+                this.dispatchEvent(new CustomEvent('nr-focus', {
+                    bubbles: true,
+                    composed: true,
+                }));
+            }
+        }
+        catch (error) {
+            this.handleError(error, 'focus');
+        }
+    }
+    /**
+     * Blur the select component
+     */
+    blur() {
+        var _a;
+        try {
+            const hostElement = this._host;
+            const focusableElement = (_a = hostElement.querySelector) === null || _a === void 0 ? void 0 : _a.call(hostElement, '.wrapper');
+            if (focusableElement) {
+                focusableElement.blur();
+            }
+            this._hasFocus = false;
+            this._focusedIndex = -1;
+            this.requestUpdate();
+            this.dispatchEvent(new CustomEvent('nr-blur', {
+                bubbles: true,
+                composed: true,
+            }));
+        }
+        catch (error) {
+            this.handleError(error, 'blur');
+        }
+    }
+    /**
+     * Focus next option
+     */
+    focusNext() {
+        try {
+            const nextIndex = this.getNextFocusableIndex(this._focusedIndex);
+            if (nextIndex !== -1) {
+                this.setFocusedOption(nextIndex);
+            }
+        }
+        catch (error) {
+            this.handleError(error, 'focusNext');
+        }
+    }
+    /**
+     * Focus previous option
+     */
+    focusPrevious() {
+        try {
+            const previousIndex = this.getPreviousFocusableIndex(this._focusedIndex);
+            if (previousIndex !== -1) {
+                this.setFocusedOption(previousIndex);
+            }
+        }
+        catch (error) {
+            this.handleError(error, 'focusPrevious');
+        }
+    }
+    /**
+     * Focus first option
+     */
+    focusFirst() {
+        try {
+            const firstIndex = this.getNextFocusableIndex(-1);
+            if (firstIndex !== -1) {
+                this.setFocusedOption(firstIndex);
+            }
+        }
+        catch (error) {
+            this.handleError(error, 'focusFirst');
+        }
+    }
+    /**
+     * Focus last option
+     */
+    focusLast() {
+        try {
+            const lastIndex = this.getPreviousFocusableIndex(this.host.options.length);
+            if (lastIndex !== -1) {
+                this.setFocusedOption(lastIndex);
+            }
+        }
+        catch (error) {
+            this.handleError(error, 'focusLast');
+        }
+    }
+    /**
+     * Clear focus
+     */
+    clearFocus() {
+        this._focusedIndex = -1;
+        this._hasFocus = false;
+        this.requestUpdate();
+    }
+    /**
+     * Handle focus event from host
+     */
+    handleFocus() {
+        this._hasFocus = true;
+        this.requestUpdate();
+    }
+    /**
+     * Handle blur event from host
+     */
+    handleBlur() {
+        this._hasFocus = false;
+        this._focusedIndex = -1;
+        this.requestUpdate();
+    }
+    /**
+     * Get next focusable option index
+     */
+    getNextFocusableIndex(currentIndex) {
+        const options = this.host.options;
+        for (let i = currentIndex + 1; i < options.length; i++) {
+            if (!options[i].disabled) {
+                return i;
+            }
+        }
+        // Wrap around to beginning
+        for (let i = 0; i <= currentIndex; i++) {
+            if (!options[i].disabled) {
+                return i;
+            }
+        }
+        return -1;
+    }
+    /**
+     * Get previous focusable option index
+     */
+    getPreviousFocusableIndex(currentIndex) {
+        const options = this.host.options;
+        for (let i = currentIndex - 1; i >= 0; i--) {
+            if (!options[i].disabled) {
+                return i;
+            }
+        }
+        // Wrap around to end
+        for (let i = options.length - 1; i >= currentIndex; i--) {
+            if (!options[i].disabled) {
+                return i;
+            }
+        }
+        return -1;
+    }
+    /**
+     * Find option index by value
+     */
+    findOptionIndex(value) {
+        return this.host.options.findIndex(option => option.value === value);
+    }
+    /**
+     * Focus option by value
+     */
+    focusOptionByValue(value) {
+        const index = this.findOptionIndex(value);
+        if (index !== -1) {
+            this.setFocusedOption(index);
+        }
+    }
+}
+//# sourceMappingURL=focus.controller.js.map

package/dist/src/components/select/controllers/index.d.ts

@@ -0,0 +1,9 @@
+export { BaseSelectController } from './base.controller.js';
+export { SelectSelectionController } from './selection.controller.js';
+export { SelectKeyboardController } from './keyboard.controller.js';
+export { SelectDropdownController } from './dropdown.controller.js';
+export { SelectFocusController } from './focus.controller.js';
+export { SelectValidationController } from './validation.controller.js';
+export { SelectSearchController } from './search.controller.js';
+export { SelectEventController } from './event.controller.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/components/select/controllers/index.js

@@ -0,0 +1,9 @@
+export { BaseSelectController } from './base.controller.js';
+export { SelectSelectionController } from './selection.controller.js';
+export { SelectKeyboardController } from './keyboard.controller.js';
+export { SelectDropdownController } from './dropdown.controller.js';
+export { SelectFocusController } from './focus.controller.js';
+export { SelectValidationController } from './validation.controller.js';
+export { SelectSearchController } from './search.controller.js';
+export { SelectEventController } from './event.controller.js';
+//# sourceMappingURL=index.js.map

package/dist/src/components/select/controllers/keyboard.controller.d.ts

@@ -0,0 +1,75 @@
+import { KeyboardController } from '../interfaces/index.js';
+import { BaseSelectController } from './base.controller.js';
+import { SelectSelectionController } from './selection.controller.js';
+import { SelectDropdownController } from './dropdown.controller.js';
+/**
+ * Keyboard controller handles keyboard navigation and interactions
+ */
+export declare class SelectKeyboardController extends BaseSelectController implements KeyboardController {
+    private selectionController;
+    private dropdownController;
+    private _focusedIndex;
+    private _hasKeyboardNavigated;
+    constructor(host: any, selectionController: SelectSelectionController, dropdownController: SelectDropdownController);
+    /**
+     * Handle keydown events
+     */
+    handleKeyDown(event: KeyboardEvent): void;
+    /**
+     * Navigate to next option
+     */
+    navigateNext(): void;
+    /**
+     * Navigate to previous option
+     */
+    navigatePrevious(): void;
+    /**
+     * Select the currently focused option
+     */
+    selectFocused(): void;
+    /**
+     * Open dropdown
+     */
+    openDropdown(): void;
+    /**
+     * Close dropdown
+     */
+    closeDropdown(): void;
+    /**
+     * Set focused option index
+     */
+    setFocusedIndex(index: number): void;
+    /**
+     * Scroll the focused option into view
+     */
+    private scrollToFocusedOption;
+    /**
+     * Get focused option index
+     */
+    get focusedIndex(): number;
+    /**
+     * Get focused option
+     */
+    get focusedOption(): any;
+    /**
+     * Handle alphanumeric key press for quick selection
+     */
+    private handleAlphanumericKey;
+    /**
+     * Get options that can be navigated (not disabled)
+     */
+    private getNavigableOptions;
+    /**
+     * Dispatch focus event
+     */
+    private dispatchFocusEvent;
+    /**
+     * Check if the search input currently has focus
+     */
+    private isSearchInputFocused;
+    /**
+     * Reset focused index when dropdown closes
+     */
+    hostUpdated(): void;
+}
+//# sourceMappingURL=keyboard.controller.d.ts.map