@nuraly/lumenui 0.1.0 → 0.2.2

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

@@ -0,0 +1,10 @@
+import { ReactiveControllerHost } from 'lit';
+import { SelectBaseController, SelectHost, ErrorHandler } from '../interfaces/index.js';
+import { BaseComponentController } from '@nuralyui/common/controllers';
+/**
+ * Abstract base controller class that implements common functionality
+ * for all select component controllers
+ */
+export declare abstract class BaseSelectController extends BaseComponentController<SelectHost & ReactiveControllerHost> implements SelectBaseController, ErrorHandler {
+}
+//# sourceMappingURL=base.controller.d.ts.map

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

@@ -0,0 +1,8 @@
+import { BaseComponentController } from '@nuralyui/common/controllers';
+/**
+ * Abstract base controller class that implements common functionality
+ * for all select component controllers
+ */
+export class BaseSelectController extends BaseComponentController {
+}
+//# sourceMappingURL=base.controller.js.map

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

@@ -0,0 +1,76 @@
+import { DropdownController, DropdownPosition, DropdownSpace } from '../interfaces/index.js';
+import { BaseSelectController } from './base.controller.js';
+/**
+ * Dropdown controller manages dropdown positioning, visibility, and interactions
+ */
+export declare class SelectDropdownController extends BaseSelectController implements DropdownController {
+    private _isOpen;
+    private _position;
+    private _dropdownElement;
+    private _triggerElement;
+    /**
+     * Check if dropdown is open
+     */
+    get isOpen(): boolean;
+    /**
+     * Get current dropdown position
+     */
+    get position(): DropdownPosition;
+    /**
+     * Open the dropdown
+     */
+    open(): void;
+    /**
+     * Close the dropdown
+     */
+    close(): void;
+    /**
+     * Toggle dropdown visibility
+     */
+    toggle(): void;
+    /**
+     * Focus the search input if searchable is enabled
+     */
+    private focusSearchInput;
+    /**
+     * Calculate optimal dropdown placement using fixed positioning
+     */
+    calculatePosition(): void;
+    /**
+     * Reset dropdown position
+     */
+    resetPosition(): void;
+    /**
+     * Set dropdown and trigger element references
+     */
+    setElements(dropdownElement: HTMLElement, triggerElement: HTMLElement): void;
+    /**
+     * Find dropdown and trigger elements
+     */
+    private findElements;
+    /**
+     * Apply calculated position to dropdown element using fixed positioning
+     */
+    private applyPosition;
+    /**
+     * Calculate available space around trigger
+     */
+    getAvailableSpace(): DropdownSpace;
+    /**
+     * Handle window resize to recalculate position
+     */
+    private handleResize;
+    /**
+     * Handle scroll to manage dropdown visibility and position
+     */
+    private handleScroll;
+    /**
+     * Host connected lifecycle
+     */
+    hostConnected(): void;
+    /**
+     * Host disconnected lifecycle
+     */
+    hostDisconnected(): void;
+}
+//# sourceMappingURL=dropdown.controller.d.ts.map

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

@@ -0,0 +1,281 @@
+import { BaseSelectController } from './base.controller.js';
+import { calculateFixedPosition, applyFixedPosition, applyHeightConstraints, resetDropdownPosition, isTriggerInViewport } from '../../../shared/utils/dropdown-positioning.js';
+/**
+ * Dropdown controller manages dropdown positioning, visibility, and interactions
+ */
+export class SelectDropdownController extends BaseSelectController {
+    constructor() {
+        super(...arguments);
+        this._isOpen = false;
+        this._position = { top: 0, left: 0, width: 0, placement: 'bottom' };
+        this._dropdownElement = null;
+        this._triggerElement = null;
+        /**
+         * Handle window resize to recalculate position
+         */
+        this.handleResize = () => {
+            if (this._isOpen) {
+                this.calculatePosition();
+            }
+        };
+        /**
+         * Handle scroll to manage dropdown visibility and position
+         */
+        this.handleScroll = () => {
+            if (this._isOpen && this._triggerElement) {
+                // Close dropdown if trigger is scrolled out of view
+                if (!isTriggerInViewport(this._triggerElement)) {
+                    this.close();
+                }
+                else {
+                    // With fixed positioning, we need to recalculate position on scroll
+                    // to keep the dropdown aligned with the trigger
+                    this.calculatePosition();
+                }
+            }
+        };
+    }
+    /**
+     * Check if dropdown is open
+     */
+    get isOpen() {
+        return this._isOpen;
+    }
+    /**
+     * Get current dropdown position
+     */
+    get position() {
+        return Object.assign({}, this._position);
+    }
+    /**
+     * Open the dropdown
+     */
+    open() {
+        try {
+            if (!this._isOpen) {
+                this._isOpen = true;
+                this.host.show = true;
+                this.requestUpdate();
+                // Always refresh elements before calculating position
+                this.findElements();
+                // Calculate position after DOM update
+                setTimeout(() => {
+                    this.calculatePosition();
+                }, 10);
+                // Notify host to setup event listeners
+                if (this.host && typeof this.host.setupEventListeners === 'function') {
+                    setTimeout(() => {
+                        this.host.setupEventListeners();
+                    }, 50);
+                }
+                // Focus search input if searchable
+                this.focusSearchInput();
+                this.dispatchEvent(new CustomEvent('nr-dropdown-open', {
+                    bubbles: true,
+                    composed: true,
+                }));
+            }
+        }
+        catch (error) {
+            this.handleError(error, 'open');
+        }
+    }
+    /**
+     * Close the dropdown
+     */
+    close() {
+        try {
+            if (this._isOpen) {
+                this._isOpen = false;
+                this.host.show = false;
+                this.resetPosition();
+                this.requestUpdate();
+                // Notify host to remove event listeners
+                if (this.host && typeof this.host.removeEventListeners === 'function') {
+                    this.host.removeEventListeners();
+                }
+                this.dispatchEvent(new CustomEvent('nr-dropdown-close', {
+                    bubbles: true,
+                    composed: true,
+                }));
+            }
+        }
+        catch (error) {
+            this.handleError(error, 'close');
+        }
+    }
+    /**
+     * Toggle dropdown visibility
+     */
+    toggle() {
+        if (this._isOpen) {
+            this.close();
+        }
+        else {
+            this.open();
+        }
+    }
+    /**
+     * Focus the search input if searchable is enabled
+     */
+    focusSearchInput() {
+        try {
+            // Check if the host has searchable enabled
+            const host = this.host;
+            if (host && host.searchable) {
+                // Wait for the DOM to update and the input to be rendered
+                setTimeout(() => {
+                    var _a;
+                    const searchInput = (_a = host.querySelector) === null || _a === void 0 ? void 0 : _a.call(host, '.search-input');
+                    if (searchInput && typeof searchInput.focus === 'function') {
+                        searchInput.focus();
+                    }
+                }, 100); // Slightly longer delay to ensure the input is fully rendered
+            }
+        }
+        catch (error) {
+            // Silently handle any focus errors to avoid breaking the dropdown
+            console.warn('Failed to focus search input:', error);
+        }
+    }
+    /**
+     * Calculate optimal dropdown placement using fixed positioning
+     */
+    calculatePosition() {
+        try {
+            if (!this._dropdownElement || !this._triggerElement) {
+                this.findElements();
+            }
+            if (!this._dropdownElement || !this._triggerElement) {
+                return;
+            }
+            // Use shared positioning utility
+            const position = calculateFixedPosition(this._triggerElement, this._dropdownElement, { offset: 4, viewportMargin: 8 });
+            // Store the calculated position
+            this._position = position;
+            this.applyPosition();
+        }
+        catch (error) {
+            this.handleError(error, 'calculatePosition');
+        }
+    }
+    /**
+     * Reset dropdown position
+     */
+    resetPosition() {
+        try {
+            if (this._dropdownElement) {
+                resetDropdownPosition(this._dropdownElement);
+                // Only remove max-height if host doesn't have a custom maxHeight
+                const customMaxHeight = this.host.maxHeight;
+                if (!customMaxHeight) {
+                    this._dropdownElement.style.removeProperty('max-height');
+                }
+            }
+        }
+        catch (error) {
+            this.handleError(error, 'resetPosition');
+        }
+    }
+    /**
+     * Set dropdown and trigger element references
+     */
+    setElements(dropdownElement, triggerElement) {
+        this._dropdownElement = dropdownElement;
+        this._triggerElement = triggerElement;
+    }
+    /**
+     * Find dropdown and trigger elements
+     */
+    findElements() {
+        try {
+            const hostElement = this._host;
+            // First priority: use the elements that were explicitly set via setElements()
+            // This ensures each instance gets its own elements
+            if (hostElement.optionsElement && hostElement.wrapper) {
+                this._dropdownElement = hostElement.optionsElement;
+                this._triggerElement = hostElement.wrapper;
+                return;
+            }
+            // Fallback: try to find from Light DOM
+            if (hostElement.querySelector) {
+                this._dropdownElement = hostElement.querySelector('.options');
+                this._triggerElement = hostElement.querySelector('.wrapper');
+            }
+        }
+        catch (error) {
+            this.handleError(error, 'findElements');
+        }
+    }
+    /**
+     * Apply calculated position to dropdown element using fixed positioning
+     */
+    applyPosition() {
+        var _a;
+        try {
+            if (!this._dropdownElement || !this._triggerElement) {
+                return;
+            }
+            // Check if host has a custom maxHeight set
+            const hostMaxHeight = this.host.maxHeight;
+            // Check if CSS max-height is set to auto via CSS custom property
+            const computedStyle = getComputedStyle(this._dropdownElement);
+            const cssMaxHeight = (_a = computedStyle.getPropertyValue('--nuraly-select-local-dropdown-max-height')) === null || _a === void 0 ? void 0 : _a.trim();
+            const isAutoHeight = cssMaxHeight === 'auto' || (!hostMaxHeight && cssMaxHeight === 'auto');
+            // Apply fixed positioning using shared utility
+            applyFixedPosition(this._dropdownElement, this._position, '9999');
+            // Handle max-height based on configuration
+            if (!hostMaxHeight && !isAutoHeight) {
+                this._dropdownElement.style.maxHeight = 'none';
+            }
+            // Apply height constraints using shared utility
+            if (hostMaxHeight) {
+                applyHeightConstraints(this._dropdownElement, this._triggerElement, this._position.placement, { viewportMargin: 10, maxHeight: hostMaxHeight });
+            }
+            else if (isAutoHeight) {
+                // If max-height is set to auto, don't constrain the dropdown
+                this._dropdownElement.style.removeProperty('max-height');
+                this._dropdownElement.style.overflowY = 'visible';
+            }
+            else {
+                applyHeightConstraints(this._dropdownElement, this._triggerElement, this._position.placement, { viewportMargin: 10 });
+            }
+        }
+        catch (error) {
+            this.handleError(error, 'applyPosition');
+        }
+    }
+    /**
+     * Calculate available space around trigger
+     */
+    getAvailableSpace() {
+        var _a, _b;
+        if (!this._triggerElement) {
+            return { above: 0, below: 0, left: 0, right: 0 };
+        }
+        const triggerRect = this._triggerElement.getBoundingClientRect();
+        const viewportHeight = ((_a = window.visualViewport) === null || _a === void 0 ? void 0 : _a.height) || window.innerHeight;
+        const viewportWidth = ((_b = window.visualViewport) === null || _b === void 0 ? void 0 : _b.width) || window.innerWidth;
+        return {
+            above: triggerRect.top,
+            below: viewportHeight - triggerRect.bottom,
+            left: triggerRect.left,
+            right: viewportWidth - triggerRect.right,
+        };
+    }
+    /**
+     * Host connected lifecycle
+     */
+    hostConnected() {
+        window.addEventListener('resize', this.handleResize);
+        window.addEventListener('scroll', this.handleScroll, true);
+    }
+    /**
+     * Host disconnected lifecycle
+     */
+    hostDisconnected() {
+        window.removeEventListener('resize', this.handleResize);
+        window.removeEventListener('scroll', this.handleScroll, true);
+    }
+}
+//# sourceMappingURL=dropdown.controller.js.map

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

@@ -0,0 +1,54 @@
+import { SelectOption } from '../select.types.js';
+import { EventController } from '../interfaces/index.js';
+import { BaseSelectController } from './base.controller.js';
+/**
+ * Event controller manages all event handling for the select component
+ */
+export declare class SelectEventController extends BaseSelectController implements EventController {
+    /**
+     * Handles clicks on the select trigger element
+     */
+    handleTriggerClick: (event: Event) => void;
+    /**
+     * Handles clicks on individual options
+     */
+    handleOptionClick: (event: Event, option: SelectOption) => void;
+    /**
+     * Handles removal of selected tags in multiple selection mode
+     */
+    handleTagRemove: (event: Event, option: SelectOption) => void;
+    /**
+     * Handles the clear all selections button
+     */
+    handleClearAll: (event: Event) => void;
+    /**
+     * Handles keyboard navigation and interactions
+     */
+    handleKeyDown: (event: KeyboardEvent) => void;
+    /**
+     * Handles focus events
+     */
+    handleFocus: () => void;
+    /**
+     * Handles blur events
+     */
+    handleBlur: () => void;
+    /**
+     * Handles clicks outside the component to close dropdown
+     * Uses composedPath() to properly detect clicks on slotted content
+     */
+    handleWindowClick: (event: Event) => void;
+    /**
+     * Sets up global event listeners (called when dropdown opens)
+     */
+    setupEventListeners(): void;
+    /**
+     * Removes global event listeners (called on disconnect or dropdown close)
+     */
+    removeEventListeners(): void;
+    /**
+     * Cleanup when host disconnects
+     */
+    hostDisconnected(): void;
+}
+//# sourceMappingURL=event.controller.d.ts.map

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