@nuraly/lumenui 0.2.1 → 0.2.2

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

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

@@ -0,0 +1,71 @@
+import { nothing, TemplateResult } from 'lit';
+import { SelectOption } from '../select.types.js';
+import { SearchController } from '../interfaces/index.js';
+import { BaseSelectController } from './base.controller.js';
+/**
+ * Search controller manages search/filter functionality for the select component
+ */
+export declare class SelectSearchController extends BaseSelectController implements SearchController {
+    private _searchQuery;
+    /**
+     * Get current search query
+     */
+    get searchQuery(): string;
+    /**
+     * Check if search is active
+     */
+    get hasSearch(): boolean;
+    /**
+     * Set search query and trigger update
+     */
+    setSearchQuery(query: string): void;
+    /**
+     * Search for options with given query
+     */
+    search(query: string): void;
+    /**
+     * Clear search query
+     */
+    clearSearch(): void;
+    /**
+     * Filter options based on current search query
+     */
+    getFilteredOptions(options: SelectOption[]): SelectOption[];
+    /**
+     * Handle search input changes
+     */
+    handleSearchInput: (event: CustomEvent) => void;
+    /**
+     * Handle search clear button click
+     */
+    handleSearchClear: () => void;
+    /**
+     * Handle search input key events
+     */
+    handleSearchKeyDown: (event: KeyboardEvent) => void;
+    /**
+     * Render search input when searchable is enabled
+     */
+    renderSearchInput(): TemplateResult | typeof nothing;
+    /**
+     * Render "no results" message when search returns no results
+     */
+    renderNoResults(): TemplateResult;
+    /**
+     * Check if there are no search results
+     */
+    hasNoResults(options: SelectOption[]): boolean;
+    /**
+     * Get search query from the component (useful for external access)
+     */
+    getCurrentQuery(): string;
+    /**
+     * Update internal query to match host's searchQuery on updates
+     */
+    hostUpdated(): void;
+    /**
+     * Reset search state when component initializes
+     */
+    hostConnected(): void;
+}
+//# sourceMappingURL=search.controller.d.ts.map

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

@@ -0,0 +1,167 @@
+import { html, nothing } from 'lit';
+import { BaseSelectController } from './base.controller.js';
+/**
+ * Search controller manages search/filter functionality for the select component
+ */
+export class SelectSearchController extends BaseSelectController {
+    constructor() {
+        super(...arguments);
+        this._searchQuery = '';
+        /**
+         * Handle search input changes
+         */
+        this.handleSearchInput = (event) => {
+            this.setSearchQuery(event.detail.value || '');
+        };
+        /**
+         * Handle search clear button click
+         */
+        this.handleSearchClear = () => {
+            this.clearSearch();
+        };
+        /**
+         * Handle search input key events
+         */
+        this.handleSearchKeyDown = (event) => {
+            // Handle navigation keys by passing them to keyboard controller
+            if (['ArrowDown', 'ArrowUp', 'Enter', 'Home', 'End'].includes(event.key)) {
+                // Don't stop propagation for navigation keys - let keyboard controller handle them
+                const keyboardController = this.host.keyboardController;
+                if (keyboardController) {
+                    keyboardController.handleKeyDown(event);
+                }
+                return;
+            }
+            // Stop propagation for other keys to prevent them from bubbling up
+            event.stopPropagation();
+            // Handle escape to close dropdown
+            if (event.key === 'Escape') {
+                this.host.closeDropdown();
+                this.host.focus();
+            }
+        };
+    }
+    /**
+     * Get current search query
+     */
+    get searchQuery() {
+        return this._searchQuery;
+    }
+    /**
+     * Check if search is active
+     */
+    get hasSearch() {
+        return this._searchQuery.trim() !== '';
+    }
+    /**
+     * Set search query and trigger update
+     */
+    setSearchQuery(query) {
+        this._searchQuery = query;
+        // Update the host's searchQuery property
+        this.host.searchQuery = query;
+        this.host.requestUpdate();
+    }
+    /**
+     * Search for options with given query
+     */
+    search(query) {
+        this.setSearchQuery(query);
+    }
+    /**
+     * Clear search query
+     */
+    clearSearch() {
+        this.setSearchQuery('');
+    }
+    /**
+     * Filter options based on current search query
+     */
+    getFilteredOptions(options) {
+        if (!this.host.searchable || !this._searchQuery.trim()) {
+            return options;
+        }
+        const query = this._searchQuery.toLowerCase().trim();
+        return options.filter(option => option.label.toLowerCase().includes(query) ||
+            option.value.toLowerCase().includes(query) ||
+            (option.description && option.description.toLowerCase().includes(query)));
+    }
+    /**
+     * Render search input when searchable is enabled
+     */
+    renderSearchInput() {
+        if (!this.host.searchable) {
+            return nothing;
+        }
+        return html `
+      <div class="search-container">
+        <nr-input
+          type="text"
+          class="search-input"
+          placeholder="${this.host.searchPlaceholder}"
+          .value="${this._searchQuery}"
+          allowClear
+          @nr-input="${this.handleSearchInput}"
+          @nr-clear="${this.handleSearchClear}"
+          @keydown="${this.handleSearchKeyDown}"
+          @click="${(e) => e.stopPropagation()}"
+        >
+          <nr-icon 
+            name="search" 
+            class="search-icon" 
+            slot="prefix"
+            aria-hidden="true">
+          </nr-icon>
+        </nr-input>
+      </div>
+    `;
+    }
+    /**
+     * Render "no results" message when search returns no results
+     */
+    renderNoResults() {
+        return html `
+      <div class="no-options" role="option" aria-disabled="true">
+        <div class="no-options-content">
+          <nr-icon 
+            name="search" 
+            class="no-options-icon"
+            aria-hidden="true">
+          </nr-icon>
+          <span class="no-options-text">No results found for "${this._searchQuery}"</span>
+        </div>
+      </div>
+    `;
+    }
+    /**
+     * Check if there are no search results
+     */
+    hasNoResults(options) {
+        return this.host.searchable &&
+            this._searchQuery.trim() !== '' &&
+            this.getFilteredOptions(options).length === 0;
+    }
+    /**
+     * Get search query from the component (useful for external access)
+     */
+    getCurrentQuery() {
+        return this.host.searchQuery || this._searchQuery;
+    }
+    /**
+     * Update internal query to match host's searchQuery on updates
+     */
+    hostUpdated() {
+        super.hostUpdated();
+        if (this.host.searchQuery !== this._searchQuery) {
+            this._searchQuery = this.host.searchQuery;
+        }
+    }
+    /**
+     * Reset search state when component initializes
+     */
+    hostConnected() {
+        super.hostConnected();
+        this._searchQuery = '';
+    }
+}
+//# sourceMappingURL=search.controller.js.map

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

@@ -0,0 +1,67 @@
+import { SelectOption } from '../select.types.js';
+import { SelectionController } from '../interfaces/index.js';
+import { BaseSelectController } from './base.controller.js';
+/**
+ * Selection controller manages option selection state and logic
+ */
+export declare class SelectSelectionController extends BaseSelectController implements SelectionController {
+    private _selectedOptions;
+    private _initialized;
+    /**
+     * Get currently selected options
+     */
+    getSelectedOptions(): SelectOption[];
+    /**
+     * Get single selected option (for single selection mode)
+     */
+    getSelectedOption(): SelectOption | undefined;
+    /**
+     * Select an option
+     */
+    selectOption(option: SelectOption): void;
+    /**
+     * Unselect an option
+     */
+    unselectOption(option: SelectOption): void;
+    /**
+     * Clear all selections
+     */
+    clearSelection(): void;
+    /**
+     * Check if an option is selected
+     */
+    isOptionSelected(option: SelectOption): boolean;
+    /**
+     * Check if an option is disabled
+     */
+    isOptionDisabled(option: SelectOption): boolean;
+    /**
+     * Toggle option selection state
+     */
+    toggleOption(option: SelectOption): void;
+    /**
+     * Initialize selection from host value
+     */
+    initializeFromValue(): void;
+    /**
+     * Update host value property (avoiding infinite loops)
+     */
+    private updateHostValue;
+    /**
+     * Get current value for change event
+     */
+    private getCurrentValue;
+    /**
+     * Dispatch change event
+     */
+    private dispatchChangeEvent;
+    /**
+     * Host update lifecycle
+     */
+    hostUpdated(): void;
+    /**
+     * Sync selected options with current host options
+     */
+    private syncWithHostOptions;
+}
+//# sourceMappingURL=selection.controller.d.ts.map