@nuraly/lumenui 0.1.0 → 0.2.2

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

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

@@ -0,0 +1,369 @@
+import { BaseSelectController } from './base.controller.js';
+/**
+ * Keyboard controller handles keyboard navigation and interactions
+ */
+export class SelectKeyboardController extends BaseSelectController {
+    constructor(host, selectionController, dropdownController) {
+        super(host);
+        this.selectionController = selectionController;
+        this.dropdownController = dropdownController;
+        this._focusedIndex = -1;
+        this._hasKeyboardNavigated = false;
+    }
+    /**
+     * Handle keydown events
+     */
+    handleKeyDown(event) {
+        try {
+            const isSearchInputFocused = this.isSearchInputFocused();
+            switch (event.key) {
+                case 'ArrowDown':
+                    event.preventDefault();
+                    if (this.dropdownController.isOpen) {
+                        this.navigateNext();
+                    }
+                    else {
+                        this.openDropdown();
+                    }
+                    break;
+                case 'ArrowUp':
+                    event.preventDefault();
+                    if (this.dropdownController.isOpen) {
+                        this.navigatePrevious();
+                    }
+                    else {
+                        this.openDropdown();
+                    }
+                    break;
+                case 'Enter':
+                    if (this.dropdownController.isOpen) {
+                        // If search input is focused and there's a focused option, select it
+                        if (isSearchInputFocused && this._focusedIndex >= 0) {
+                            event.preventDefault();
+                            this.selectFocused();
+                        }
+                        else if (!isSearchInputFocused) {
+                            // Normal option selection when not in search input
+                            event.preventDefault();
+                            this.selectFocused();
+                        }
+                        // If search input is focused and no option is selected, let the input handle Enter
+                    }
+                    else {
+                        event.preventDefault();
+                        this.openDropdown();
+                    }
+                    break;
+                case ' ':
+                    // Only handle space for non-search scenarios to allow typing in search
+                    if (!isSearchInputFocused) {
+                        event.preventDefault();
+                        if (this.dropdownController.isOpen) {
+                            this.selectFocused();
+                        }
+                        else {
+                            this.openDropdown();
+                        }
+                    }
+                    break;
+                case 'Escape':
+                    event.preventDefault();
+                    this.closeDropdown();
+                    break;
+                case 'Tab':
+                    this.closeDropdown();
+                    break;
+                case 'Home':
+                    if (this.dropdownController.isOpen) {
+                        event.preventDefault();
+                        this.setFocusedIndex(0);
+                    }
+                    break;
+                case 'End':
+                    if (this.dropdownController.isOpen) {
+                        event.preventDefault();
+                        this.setFocusedIndex(this.host.options.length - 1);
+                    }
+                    break;
+                default:
+                    // Handle alphanumeric keys for quick selection
+                    if (event.key.length === 1 && /[a-zA-Z0-9]/.test(event.key)) {
+                        this.handleAlphanumericKey(event.key.toLowerCase());
+                    }
+                    break;
+            }
+        }
+        catch (error) {
+            this.handleError(error, 'handleKeyDown');
+        }
+    }
+    /**
+     * Navigate to next option
+     */
+    navigateNext() {
+        try {
+            const options = this.getNavigableOptions();
+            if (options.length === 0)
+                return;
+            // If search input is focused, reset and start from first option
+            if (this.isSearchInputFocused()) {
+                // Check if this is the first navigation from search (no previous keyboard focus)
+                if (this._focusedIndex < 0 || !this._hasKeyboardNavigated) {
+                    this._hasKeyboardNavigated = true;
+                    this.setFocusedIndex(0);
+                    return;
+                }
+            }
+            let nextIndex = this._focusedIndex + 1;
+            if (nextIndex >= options.length) {
+                nextIndex = 0; // Wrap to first option
+            }
+            this.setFocusedIndex(nextIndex);
+        }
+        catch (error) {
+            this.handleError(error, 'navigateNext');
+        }
+    }
+    /**
+     * Navigate to previous option
+     */
+    navigatePrevious() {
+        try {
+            const options = this.getNavigableOptions();
+            if (options.length === 0)
+                return;
+            // If search input is focused, reset and start from last option
+            if (this.isSearchInputFocused()) {
+                // Check if this is the first navigation from search (no previous keyboard focus)
+                if (this._focusedIndex < 0 || !this._hasKeyboardNavigated) {
+                    this._hasKeyboardNavigated = true;
+                    this.setFocusedIndex(options.length - 1);
+                    return;
+                }
+            }
+            let previousIndex = this._focusedIndex - 1;
+            if (previousIndex < 0) {
+                previousIndex = options.length - 1; // Wrap to last option
+            }
+            this.setFocusedIndex(previousIndex);
+        }
+        catch (error) {
+            this.handleError(error, 'navigatePrevious');
+        }
+    }
+    /**
+     * Select the currently focused option
+     */
+    selectFocused() {
+        try {
+            const options = this.getNavigableOptions();
+            const focusedOption = options[this._focusedIndex];
+            if (focusedOption && !this.selectionController.isOptionDisabled(focusedOption)) {
+                this.selectionController.selectOption(focusedOption);
+                // Close dropdown for single selection
+                if (!this.host.multiple) {
+                    this.closeDropdown();
+                }
+            }
+        }
+        catch (error) {
+            this.handleError(error, 'selectFocused');
+        }
+    }
+    /**
+     * Open dropdown
+     */
+    openDropdown() {
+        try {
+            this.dropdownController.open();
+            // Reset keyboard navigation flag when dropdown opens
+            this._hasKeyboardNavigated = false;
+            // Don't set initial focus - let keyboard navigation handle it
+            this._focusedIndex = -1;
+        }
+        catch (error) {
+            this.handleError(error, 'openDropdown');
+        }
+    }
+    /**
+     * Close dropdown
+     */
+    closeDropdown() {
+        try {
+            this.dropdownController.close();
+            this._focusedIndex = -1;
+            this._hasKeyboardNavigated = false;
+        }
+        catch (error) {
+            this.handleError(error, 'closeDropdown');
+        }
+    }
+    /**
+     * Set focused option index
+     */
+    setFocusedIndex(index) {
+        try {
+            const options = this.getNavigableOptions();
+            if (index >= 0 && index < options.length) {
+                this._focusedIndex = index;
+                this.dispatchFocusEvent(options[index], index);
+                this.requestUpdate();
+                // Scroll the focused option into view
+                this.scrollToFocusedOption(index);
+            }
+        }
+        catch (error) {
+            this.handleError(error, 'setFocusedIndex');
+        }
+    }
+    /**
+     * Scroll the focused option into view
+     */
+    scrollToFocusedOption(index) {
+        var _a;
+        try {
+            const host = this.host;
+            const dropdownElement = (_a = host.querySelector) === null || _a === void 0 ? void 0 : _a.call(host, '.options');
+            if (!dropdownElement) {
+                return;
+            }
+            // Wait for the DOM to update with the focused class
+            setTimeout(() => {
+                const focusedOption = dropdownElement.querySelector('.option.focused');
+                if (focusedOption) {
+                    // Use scrollIntoView with smooth behavior
+                    focusedOption.scrollIntoView({
+                        behavior: 'smooth',
+                        block: 'nearest',
+                        inline: 'nearest'
+                    });
+                }
+                else {
+                    // Fallback: scroll based on option index and estimated height
+                    const optionHeight = 40; // Estimated option height in pixels
+                    const containerHeight = dropdownElement.clientHeight;
+                    const scrollTop = dropdownElement.scrollTop;
+                    const optionTop = index * optionHeight;
+                    const optionBottom = optionTop + optionHeight;
+                    const visibleTop = scrollTop;
+                    const visibleBottom = scrollTop + containerHeight;
+                    if (optionTop < visibleTop) {
+                        // Option is above visible area, scroll up
+                        dropdownElement.scrollTo({
+                            top: optionTop,
+                            behavior: 'smooth'
+                        });
+                    }
+                    else if (optionBottom > visibleBottom) {
+                        // Option is below visible area, scroll down
+                        dropdownElement.scrollTo({
+                            top: optionBottom - containerHeight,
+                            behavior: 'smooth'
+                        });
+                    }
+                }
+            }, 10); // Small delay to ensure DOM updates
+        }
+        catch (error) {
+            // Silently handle scroll errors to avoid breaking navigation
+            console.warn('Failed to scroll to focused option:', error);
+        }
+    }
+    /**
+     * Get focused option index
+     */
+    get focusedIndex() {
+        return this._focusedIndex;
+    }
+    /**
+     * Get focused option
+     */
+    get focusedOption() {
+        const options = this.getNavigableOptions();
+        return options[this._focusedIndex];
+    }
+    /**
+     * Handle alphanumeric key press for quick selection
+     */
+    handleAlphanumericKey(key) {
+        try {
+            const options = this.getNavigableOptions();
+            const startIndex = this._focusedIndex + 1;
+            // Search from current position forward
+            for (let i = 0; i < options.length; i++) {
+                const index = (startIndex + i) % options.length;
+                const option = options[index];
+                if (option.label.toLowerCase().startsWith(key)) {
+                    this.setFocusedIndex(index);
+                    if (!this.dropdownController.isOpen) {
+                        this.openDropdown();
+                    }
+                    break;
+                }
+            }
+        }
+        catch (error) {
+            this.handleError(error, 'handleAlphanumericKey');
+        }
+    }
+    /**
+     * Get options that can be navigated (not disabled)
+     */
+    getNavigableOptions() {
+        const host = this.host;
+        if (!host.options || !Array.isArray(host.options)) {
+            return [];
+        }
+        // Use filtered options if search is active
+        let optionsToUse = host.options;
+        if (host.searchable && host.searchQuery && typeof host.getFilteredOptions === 'function') {
+            optionsToUse = host.getFilteredOptions();
+        }
+        return optionsToUse.filter((option) => !option.disabled);
+    }
+    /**
+     * Dispatch focus event
+     */
+    dispatchFocusEvent(option, index) {
+        const detail = {
+            focusedOption: option,
+            focusedIndex: index,
+        };
+        this.dispatchEvent(new CustomEvent('nr-select-focus', {
+            detail,
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    /**
+     * Check if the search input currently has focus
+     */
+    isSearchInputFocused() {
+        var _a;
+        try {
+            const host = this.host;
+            if (!host.searchable) {
+                return false;
+            }
+            const searchInput = (_a = host.querySelector) === null || _a === void 0 ? void 0 : _a.call(host, '.search-input');
+            if (!searchInput) {
+                return false;
+            }
+            // Check if the search input or its internal input element has focus
+            return document.activeElement === searchInput ||
+                searchInput.contains(document.activeElement);
+        }
+        catch (error) {
+            return false;
+        }
+    }
+    /**
+     * Reset focused index when dropdown closes
+     */
+    hostUpdated() {
+        if (!this.dropdownController.isOpen && this._focusedIndex !== -1) {
+            this._focusedIndex = -1;
+        }
+    }
+}
+//# sourceMappingURL=keyboard.controller.js.map