@nuraly/lumenui 0.2.1 → 0.3.2

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

@@ -0,0 +1,217 @@
+import { BaseSelectController } from './base.controller.js';
+/**
+ * Selection controller manages option selection state and logic
+ */
+export class SelectSelectionController extends BaseSelectController {
+    constructor() {
+        super(...arguments);
+        this._selectedOptions = [];
+        this._initialized = false;
+    }
+    /**
+     * Get currently selected options
+     */
+    getSelectedOptions() {
+        return [...this._selectedOptions];
+    }
+    /**
+     * Get single selected option (for single selection mode)
+     */
+    getSelectedOption() {
+        return this._selectedOptions[0];
+    }
+    /**
+     * Select an option
+     */
+    selectOption(option) {
+        try {
+            if (this.isOptionDisabled(option)) {
+                return;
+            }
+            const isMultiple = this.host.multiple;
+            const previousValue = this.getCurrentValue();
+            if (isMultiple) {
+                // Multiple selection mode
+                if (!this.isOptionSelected(option)) {
+                    this._selectedOptions = [...this._selectedOptions, option];
+                    this.updateHostValue();
+                    this.dispatchChangeEvent(previousValue);
+                }
+            }
+            else {
+                // Single selection mode
+                if (this.isOptionSelected(option)) {
+                    // Deselect if already selected
+                    this._selectedOptions = [];
+                }
+                else {
+                    this._selectedOptions = [option];
+                }
+                this.updateHostValue();
+                this.dispatchChangeEvent(previousValue);
+            }
+            this.requestUpdate();
+        }
+        catch (error) {
+            this.handleError(error, 'selectOption');
+        }
+    }
+    /**
+     * Unselect an option
+     */
+    unselectOption(option) {
+        try {
+            if (this.isOptionSelected(option)) {
+                const previousValue = this.getCurrentValue();
+                this._selectedOptions = this._selectedOptions.filter(selected => selected.value !== option.value);
+                this.updateHostValue();
+                this.dispatchChangeEvent(previousValue);
+                this.requestUpdate();
+            }
+        }
+        catch (error) {
+            this.handleError(error, 'unselectOption');
+        }
+    }
+    /**
+     * Clear all selections
+     */
+    clearSelection() {
+        try {
+            if (this._selectedOptions.length > 0) {
+                const previousValue = this.getCurrentValue();
+                this._selectedOptions = [];
+                this.updateHostValue();
+                this.dispatchChangeEvent(previousValue);
+                this.requestUpdate();
+            }
+        }
+        catch (error) {
+            this.handleError(error, 'clearSelection');
+        }
+    }
+    /**
+     * Check if an option is selected
+     */
+    isOptionSelected(option) {
+        return this._selectedOptions.some(selected => selected.value === option.value);
+    }
+    /**
+     * Check if an option is disabled
+     */
+    isOptionDisabled(option) {
+        return Boolean(option.disabled) || this.host.disabled;
+    }
+    /**
+     * Toggle option selection state
+     */
+    toggleOption(option) {
+        if (this.isOptionSelected(option)) {
+            this.unselectOption(option);
+        }
+        else {
+            this.selectOption(option);
+        }
+    }
+    /**
+     * Initialize selection from host value
+     */
+    initializeFromValue() {
+        try {
+            // Prevent re-initialization
+            if (this._initialized)
+                return;
+            const value = this.host.value;
+            if (!value || (Array.isArray(value) && value.length === 0))
+                return;
+            const values = Array.isArray(value) ? value : [value];
+            const selectedOptions = this.host.options.filter(option => values.includes(option.value));
+            if (selectedOptions.length > 0) {
+                this._selectedOptions = this.host.multiple ? selectedOptions : [selectedOptions[0]];
+                // Don't call updateHostValue during initialization to avoid loops
+                // The host already has the value, no need to update it
+                this.requestUpdate();
+            }
+            this._initialized = true;
+        }
+        catch (error) {
+            this.handleError(error, 'initializeFromValue');
+        }
+    }
+    /**
+     * Update host value property (avoiding infinite loops)
+     */
+    updateHostValue() {
+        var _a;
+        const newValue = this.host.multiple
+            ? this._selectedOptions.map(option => option.value)
+            : ((_a = this._selectedOptions[0]) === null || _a === void 0 ? void 0 : _a.value) || '';
+        // Only update if the value actually changed to avoid infinite loops
+        const currentValue = this.host.value;
+        let valuesEqual = false;
+        if (this.host.multiple) {
+            // For arrays, compare length and contents
+            const currentArray = Array.isArray(currentValue) ? currentValue : [];
+            const newArray = Array.isArray(newValue) ? newValue : [];
+            valuesEqual = currentArray.length === newArray.length &&
+                currentArray.every((val, index) => val === newArray[index]);
+        }
+        else {
+            valuesEqual = currentValue === newValue;
+        }
+        if (!valuesEqual) {
+            this.host.value = newValue;
+        }
+    }
+    /**
+     * Get current value for change event
+     */
+    getCurrentValue() {
+        var _a;
+        if (this.host.multiple) {
+            return this._selectedOptions.map(option => option.value);
+        }
+        return ((_a = this._selectedOptions[0]) === null || _a === void 0 ? void 0 : _a.value) || '';
+    }
+    /**
+     * Dispatch change event
+     */
+    dispatchChangeEvent(previousValue) {
+        const detail = {
+            value: this.getCurrentValue(),
+            selectedOptions: this.getSelectedOptions(),
+            previousValue,
+        };
+        this.dispatchEvent(new CustomEvent('nr-change', {
+            detail,
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    /**
+     * Host update lifecycle
+     */
+    hostUpdated() {
+        // Sync with host's options changes
+        this.syncWithHostOptions();
+    }
+    /**
+     * Sync selected options with current host options
+     */
+    syncWithHostOptions() {
+        try {
+            // Remove selected options that no longer exist in host options
+            this._selectedOptions = this._selectedOptions.filter(selected => this.host.options.some(option => option.value === selected.value));
+            // Update selected option references to current host options
+            this._selectedOptions = this._selectedOptions.map(selected => {
+                const currentOption = this.host.options.find(option => option.value === selected.value);
+                return currentOption || selected;
+            });
+            this.updateHostValue();
+        }
+        catch (error) {
+            this.handleError(error, 'syncWithHostOptions');
+        }
+    }
+}
+//# sourceMappingURL=selection.controller.js.map

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

@@ -0,0 +1,66 @@
+import { ReactiveControllerHost } from 'lit';
+import { ValidationController, ValidationState, SelectHost } from '../interfaces/index.js';
+import { BaseValidationController } from '@nuralyui/common/controllers';
+import { SelectSelectionController } from './selection.controller.js';
+/**
+ * Validation controller manages form validation logic and states
+ */
+export declare class SelectValidationController extends BaseValidationController<SelectHost & ReactiveControllerHost> implements ValidationController {
+    private selectionController;
+    constructor(host: any, selectionController: SelectSelectionController);
+    /**
+     * Override validation state getter to return the enum type
+     */
+    get validationState(): ValidationState;
+    /**
+     * Validate the select component
+     */
+    validate(): boolean;
+    /**
+     * Reset validation state
+     */
+    reset(): void;
+    /**
+     * Get form data for form submission
+     */
+    getFormData(): {
+        [key: string]: string | string[];
+    };
+    /**
+     * Report validity (HTML5 constraint validation API)
+     */
+    reportValidity(): boolean;
+    /**
+     * Set custom validity message
+     */
+    setCustomValidity(message: string): void;
+    /**
+     * Validate on value change
+     */
+    validateOnChange(): void;
+    /**
+     * Validate on blur
+     */
+    validateOnBlur(): void;
+    /**
+     * Set validation result and dispatch event
+     */
+    private setValidationResult;
+    /**
+     * Override to include select-specific detail
+     */
+    protected dispatchValidationEvent(): void;
+    /**
+     * Host updated lifecycle - validate on selection change
+     */
+    hostUpdated(): void;
+    /**
+     * Get validation CSS classes
+     */
+    getValidationClasses(): Record<string, boolean>;
+    /**
+     * Get ARIA attributes for accessibility
+     */
+    getAriaAttributes(): Record<string, string>;
+}
+//# sourceMappingURL=validation.controller.d.ts.map

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

@@ -0,0 +1,189 @@
+import { ValidationState } from '../interfaces/index.js';
+import { BaseValidationController } from '@nuralyui/common/controllers';
+/**
+ * Validation controller manages form validation logic and states
+ */
+export class SelectValidationController extends BaseValidationController {
+    constructor(host, selectionController) {
+        super(host);
+        this.selectionController = selectionController;
+    }
+    /**
+     * Override validation state getter to return the enum type
+     */
+    get validationState() {
+        return this._validationState;
+    }
+    /**
+     * Validate the select component
+     */
+    validate() {
+        try {
+            this._validationState = ValidationState.Pending;
+            const selectedOptions = this.selectionController.getSelectedOptions();
+            const hasValue = selectedOptions.length > 0;
+            // Required field validation
+            if (this.host.required && !hasValue) {
+                this.setValidationResult(false, 'This field is required', ValidationState.Invalid);
+                return false;
+            }
+            // Custom validation logic can be added here
+            this.setValidationResult(true, '', ValidationState.Valid);
+            return true;
+        }
+        catch (error) {
+            this.handleError(error, 'validate');
+            this.setValidationResult(false, 'Validation error occurred', ValidationState.Invalid);
+            return false;
+        }
+    }
+    /**
+     * Reset validation state
+     */
+    reset() {
+        try {
+            this._isValid = true;
+            this._validationMessage = '';
+            this._validationState = ValidationState.Pristine;
+            this.requestUpdate();
+            this.dispatchValidationEvent();
+        }
+        catch (error) {
+            this.handleError(error, 'reset');
+        }
+    }
+    /**
+     * Get form data for form submission
+     */
+    getFormData() {
+        var _a;
+        try {
+            const hostElement = this._host;
+            const name = hostElement.name || hostElement.getAttribute('name') || 'select';
+            const selectedOptions = this.selectionController.getSelectedOptions();
+            if (this.host.multiple) {
+                return { [name]: selectedOptions.map(option => option.value) };
+            }
+            else {
+                return { [name]: ((_a = selectedOptions[0]) === null || _a === void 0 ? void 0 : _a.value) || '' };
+            }
+        }
+        catch (error) {
+            this.handleError(error, 'getFormData');
+            return {};
+        }
+    }
+    /**
+     * Report validity (HTML5 constraint validation API)
+     */
+    reportValidity() {
+        var _a;
+        const isValid = this.validate();
+        if (!isValid) {
+            // Focus the invalid element
+            const hostElement = this._host;
+            const focusableElement = (_a = hostElement.querySelector) === null || _a === void 0 ? void 0 : _a.call(hostElement, '.wrapper');
+            if (focusableElement) {
+                focusableElement.focus();
+            }
+        }
+        return isValid;
+    }
+    /**
+     * Set custom validity message
+     */
+    setCustomValidity(message) {
+        try {
+            if (message) {
+                this.setValidationResult(false, message, ValidationState.Invalid);
+            }
+            else {
+                this.validate();
+            }
+        }
+        catch (error) {
+            this.handleError(error, 'setCustomValidity');
+        }
+    }
+    /**
+     * Validate on value change
+     */
+    validateOnChange() {
+        if (this._validationState !== ValidationState.Pristine) {
+            this.validate();
+        }
+    }
+    /**
+     * Validate on blur
+     */
+    validateOnBlur() {
+        if (this._validationState === ValidationState.Pristine) {
+            this._validationState = ValidationState.Pending;
+        }
+        this.validate();
+    }
+    /**
+     * Set validation result and dispatch event
+     */
+    setValidationResult(isValid, message, state) {
+        const hasChanged = this._isValid !== isValid ||
+            this._validationMessage !== message ||
+            this._validationState !== state;
+        this._isValid = isValid;
+        this._validationMessage = message;
+        this._validationState = state;
+        if (hasChanged) {
+            this.requestUpdate();
+            this.dispatchValidationEvent();
+        }
+    }
+    /**
+     * Override to include select-specific detail
+     */
+    dispatchValidationEvent() {
+        const detail = {
+            isValid: this._isValid,
+            validationMessage: this._validationMessage,
+            validationState: this._validationState,
+        };
+        this.dispatchEvent(new CustomEvent('nr-validation', {
+            detail,
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    /**
+     * Host updated lifecycle - validate on selection change
+     */
+    hostUpdated() {
+        this.validateOnChange();
+    }
+    /**
+     * Get validation CSS classes
+     */
+    getValidationClasses() {
+        return {
+            'valid': this._isValid && this._validationState === ValidationState.Valid,
+            'invalid': !this._isValid && this._validationState === ValidationState.Invalid,
+            'pending': this._validationState === ValidationState.Pending,
+            'pristine': this._validationState === ValidationState.Pristine,
+        };
+    }
+    /**
+     * Get ARIA attributes for accessibility
+     */
+    getAriaAttributes() {
+        const attributes = {};
+        if (this.host.required) {
+            attributes['aria-required'] = 'true';
+        }
+        if (!this._isValid) {
+            attributes['aria-invalid'] = 'true';
+            if (this._validationMessage) {
+                attributes['aria-describedby'] = 'validation-message';
+            }
+        }
+        return attributes;
+    }
+}
+//# sourceMappingURL=validation.controller.js.map

package/dist/src/components/select/interfaces/base-controller.interface.d.ts

@@ -0,0 +1,147 @@
+/**
+ * Base controller interface for select component controllers
+ * All controllers should extend this interface for consistency
+ */
+export interface SelectBaseController {
+    readonly host: SelectHost;
+    handleError?(error: Error, context: string): void;
+}
+/**
+ * Error handling interface for controllers
+ */
+export interface ErrorHandler {
+    handleError(error: Error, context: string): void;
+}
+/**
+ * Host element interface defining the contract between controllers and the select component
+ */
+export interface SelectHost {
+    options: SelectOption[];
+    value: string | string[];
+    disabled: boolean;
+    required: boolean;
+    multiple: boolean;
+    placeholder: string;
+    show: boolean;
+    searchable: boolean;
+    clearable: boolean;
+    searchPlaceholder: string;
+    searchQuery: string;
+    requestUpdate(): void;
+    dispatchEvent(event: Event): boolean;
+    closeDropdown(): void;
+    focus(): void;
+    toggleDropdown(): void;
+    selectOption(option: SelectOption): void;
+    unselectOption(option: SelectOption): void;
+    toggleOption(option: SelectOption): void;
+    clearSelection(): void;
+    contains(element: Element): boolean;
+}
+/**
+ * Selection controller interface for managing option selection
+ */
+export interface SelectionController extends SelectBaseController {
+    getSelectedOptions(): SelectOption[];
+    getSelectedOption(): SelectOption | undefined;
+    selectOption(option: SelectOption): void;
+    unselectOption(option: SelectOption): void;
+    clearSelection(): void;
+    isOptionSelected(option: SelectOption): boolean;
+    isOptionDisabled(option: SelectOption): boolean;
+    toggleOption(option: SelectOption): void;
+}
+/**
+ * Keyboard controller interface for handling keyboard navigation
+ */
+export interface KeyboardController extends SelectBaseController {
+    handleKeyDown(event: KeyboardEvent): void;
+    navigateNext(): void;
+    navigatePrevious(): void;
+    selectFocused(): void;
+    openDropdown(): void;
+    closeDropdown(): void;
+}
+/**
+ * Focus controller interface for managing focus states
+ */
+export interface FocusController extends SelectBaseController {
+    setFocusedOption(index: number): void;
+    getFocusedOption(): SelectOption | undefined;
+    focus(): void;
+    blur(): void;
+    focusNext(): void;
+    focusPrevious(): void;
+    readonly focusedIndex: number;
+}
+/**
+ * Dropdown controller interface for managing dropdown positioning and visibility
+ */
+export interface DropdownController extends SelectBaseController {
+    open(): void;
+    close(): void;
+    toggle(): void;
+    calculatePosition(): void;
+    resetPosition(): void;
+    readonly isOpen: boolean;
+}
+/**
+ * Validation controller interface for form validation
+ */
+export interface ValidationController extends SelectBaseController {
+    validate(): boolean;
+    reset(): void;
+    getFormData(): {
+        [key: string]: string | string[];
+    };
+    readonly isValid: boolean;
+    readonly validationMessage: string;
+}
+/**
+ * Search controller interface for filterable select options
+ */
+export interface SearchController extends SelectBaseController {
+    search(query: string): void;
+    clearSearch(): void;
+    getFilteredOptions(options: SelectOption[]): SelectOption[];
+    readonly searchQuery: string;
+    readonly hasSearch: boolean;
+}
+/**
+ * Event controller interface for handling component events
+ */
+export interface EventController extends SelectBaseController {
+    handleTriggerClick(event: Event): void;
+    handleOptionClick(event: Event, option: SelectOption): void;
+    handleTagRemove(event: Event, option: SelectOption): void;
+    handleClearAll(event: Event): void;
+    handleKeyDown(event: KeyboardEvent): void;
+    handleFocus(): void;
+    handleBlur(): void;
+    handleWindowClick(event: Event): void;
+    setupEventListeners(): void;
+    removeEventListeners(): void;
+}
+/**
+ * Select option interface extending the base option type
+ */
+export interface SelectOption {
+    value: string;
+    label: string;
+    icon?: string;
+    disabled?: boolean;
+    state?: SelectState;
+    message?: string;
+    htmlContent?: string;
+    className?: string;
+    style?: string;
+    title?: string;
+    id?: string;
+    group?: string;
+    description?: string;
+}
+/**
+ * Select state type for validation and visual feedback
+ */
+export type SelectState = 'error' | 'warning' | 'success';
+//# sourceMappingURL=base-controller.interface.d.ts.map

package/dist/src/components/select/interfaces/base-controller.interface.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=base-controller.interface.js.map