@nuraly/lumenui 0.1.0 → 0.2.2

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

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

@@ -0,0 +1,94 @@
+import { SelectOption } from './base-controller.interface.js';
+/**
+ * Selection controller specific interfaces
+ */
+export interface SelectionControllerInterface {
+    selectedOptions: SelectOption[];
+    selectedValues: string[];
+    hasSelection: boolean;
+    canSelectMultiple: boolean;
+}
+/**
+ * Dropdown controller specific interfaces
+ */
+export interface DropdownControllerInterface {
+    isOpen: boolean;
+    position: DropdownPosition;
+    availableSpace: DropdownSpace;
+}
+/**
+ * Focus controller specific interfaces
+ */
+export interface FocusControllerInterface {
+    focusedIndex: number;
+    focusedOption: SelectOption | undefined;
+    hasFocus: boolean;
+}
+/**
+ * Validation controller specific interfaces
+ */
+export interface ValidationControllerInterface {
+    isValid: boolean;
+    validationMessage: string;
+    validationState: ValidationState;
+    hasValidation: boolean;
+}
+/**
+ * Search controller specific interfaces
+ */
+export interface SearchControllerInterface {
+    searchQuery: string;
+    filteredOptions: SelectOption[];
+    hasActiveSearch: boolean;
+    matchedCount: number;
+}
+/**
+ * Dropdown positioning types
+ */
+export interface DropdownPosition {
+    top: number;
+    left: number;
+    width: number;
+    placement: 'bottom' | 'top';
+}
+/**
+ * Available space calculation
+ */
+export interface DropdownSpace {
+    above: number;
+    below: number;
+    left: number;
+    right: number;
+}
+/**
+ * Validation state enum
+ */
+export declare enum ValidationState {
+    Valid = "valid",
+    Invalid = "invalid",
+    Pending = "pending",
+    Pristine = "pristine"
+}
+/**
+ * Event data interfaces
+ */
+export interface SelectChangeEventDetail {
+    value: string | string[];
+    selectedOptions: SelectOption[];
+    previousValue?: string | string[];
+}
+export interface SelectFocusEventDetail {
+    focusedOption: SelectOption;
+    focusedIndex: number;
+}
+export interface SelectSearchEventDetail {
+    query: string;
+    filteredOptions: SelectOption[];
+    matchCount: number;
+}
+export interface SelectValidationEventDetail {
+    isValid: boolean;
+    validationMessage: string;
+    validationState: ValidationState;
+}
+//# sourceMappingURL=controller-interfaces.d.ts.map

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

@@ -0,0 +1,11 @@
+/**
+ * Validation state enum
+ */
+export var ValidationState;
+(function (ValidationState) {
+    ValidationState["Valid"] = "valid";
+    ValidationState["Invalid"] = "invalid";
+    ValidationState["Pending"] = "pending";
+    ValidationState["Pristine"] = "pristine";
+})(ValidationState || (ValidationState = {}));
+//# sourceMappingURL=controller-interfaces.js.map

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

@@ -0,0 +1,3 @@
+export * from './base-controller.interface.js';
+export * from './controller-interfaces.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,3 @@
+export * from './base-controller.interface.js';
+export * from './controller-interfaces.js';
+//# sourceMappingURL=index.js.map

package/dist/src/components/select/select.component.d.ts

@@ -6,7 +6,7 @@
 import { LitElement } from 'lit';
 import { SelectOption, SelectType, SelectSize, SelectStatus } from './select.types.js';
 import { SelectHost } from './interfaces/index.js';
-declare const HySelectComponent_base: (new (...args: any[]) => import("@nuralyui/common/mixins").DependencyAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").ThemeAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").EventHandlerCapable) & typeof LitElement;
+declare const HySelectComponent_base: (new (...args: any[]) => import("@nuralyui/common/mixins").DependencyAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").ThemeAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").EventHandlerCapable) & (new (...args: any[]) => import("packages/common/src/shared/base-mixin.js").LightDomContent) & typeof LitElement;
 /**
  * Advanced select component with multiple selection modes, validation, and accessibility features.
  *
@@ -54,22 +54,17 @@ declare const HySelectComponent_base: (new (...args: any[]) => import("@nuralyui
  * @slot before-options - Content rendered before the options list (e.g., search, filters)
  * @slot after-options - Content rendered after the options list (e.g., create button, form)
  *
- * @cssproperty --select-border-color - Border color
- * @cssproperty --select-background - Background color
- * @cssproperty --select-text-color - Text color
- * @cssproperty --select-focus-color - Focus indicator color
- * @cssproperty --select-dropdown-shadow - Dropdown shadow
- * @cssproperty --select-dropdown-max-height - Maximum height of dropdown
- * @cssproperty --select-no-options-color - No options message text color
- * @cssproperty --select-no-options-icon-color - No options icon color
- * @cssproperty --select-no-options-padding - Padding for no options message
- * @cssproperty --select-no-options-gap - Gap between icon and text
- * @cssproperty --select-search-border - Search input border
- * @cssproperty --select-search-background - Search input background
- * @cssproperty --select-search-padding - Search input padding
+ * @csspart trigger - The visible select trigger element (shows selected value and arrow)
+ * @csspart dropdown - The dropdown list container
+ * @csspart option - Each individual option item in the dropdown
+ * @csspart label - The label element above the select trigger
+ * @csspart helper-text - The helper text element below the select
+ * @csspart clear - The clear button shown when clearable is true and a value is selected
+ * @csspart tag - Each selected value tag in multiple selection mode
  */
 export declare class HySelectComponent extends HySelectComponent_base implements SelectHost {
     static styles: import("lit").CSSResult;
+    static useShadowDom: boolean;
     requiredComponents: string[];
     /** Array of options to display in the select dropdown */
     options: SelectOption[];
@@ -112,11 +107,11 @@ export declare class HySelectComponent extends HySelectComponent_base implements
     /** Makes select full width */
     block: boolean;
     /** Options dropdown container element */
-    optionsElement: HTMLElement;
+    get optionsElement(): HTMLElement | null;
     /** Main wrapper element */
-    wrapper: HTMLElement;
+    get wrapper(): HTMLElement | null;
     /** Search input element */
-    searchInput?: HTMLInputElement;
+    get searchInput(): HTMLInputElement | null;
     /** Handles option selection logic */
     private selectionController;
     /** Manages dropdown visibility and positioning */

package/dist/src/components/select/select.component.js

@@ -10,7 +10,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { LitElement, html, nothing } from 'lit';
-import { property, customElement, query } from 'lit/decorators.js';
+import { property, customElement } from 'lit/decorators.js';
 import { styles } from './select.style.js';
 import { map } from 'lit/directives/map.js';
 import { choose } from 'lit/directives/choose.js';
@@ -70,19 +70,13 @@ import { SelectSelectionController, SelectKeyboardController, SelectDropdownCont
  * @slot before-options - Content rendered before the options list (e.g., search, filters)
  * @slot after-options - Content rendered after the options list (e.g., create button, form)
  *
- * @cssproperty --select-border-color - Border color
- * @cssproperty --select-background - Background color
- * @cssproperty --select-text-color - Text color
- * @cssproperty --select-focus-color - Focus indicator color
- * @cssproperty --select-dropdown-shadow - Dropdown shadow
- * @cssproperty --select-dropdown-max-height - Maximum height of dropdown
- * @cssproperty --select-no-options-color - No options message text color
- * @cssproperty --select-no-options-icon-color - No options icon color
- * @cssproperty --select-no-options-padding - Padding for no options message
- * @cssproperty --select-no-options-gap - Gap between icon and text
- * @cssproperty --select-search-border - Search input border
- * @cssproperty --select-search-background - Search input background
- * @cssproperty --select-search-padding - Search input padding
+ * @csspart trigger - The visible select trigger element (shows selected value and arrow)
+ * @csspart dropdown - The dropdown list container
+ * @csspart option - Each individual option item in the dropdown
+ * @csspart label - The label element above the select trigger
+ * @csspart helper-text - The helper text element below the select
+ * @csspart clear - The clear button shown when clearable is true and a value is selected
+ * @csspart tag - Each selected value tag in multiple selection mode
  */
 let HySelectComponent = class HySelectComponent extends NuralyUIBaseMixin(LitElement) {
     constructor() {
@@ -185,6 +179,18 @@ let HySelectComponent = class HySelectComponent extends NuralyUIBaseMixin(LitEle
             this.eventController.handleBlur();
         };
     }
+    /** Options dropdown container element */
+    get optionsElement() {
+        return this.renderRoot.querySelector('.options');
+    }
+    /** Main wrapper element */
+    get wrapper() {
+        return this.renderRoot.querySelector('.wrapper');
+    }
+    /** Search input element */
+    get searchInput() {
+        return this.renderRoot.querySelector('.search-input');
+    }
     /**
      * Component connected to DOM - initialize base functionality
      */
@@ -450,9 +456,8 @@ let HySelectComponent = class HySelectComponent extends NuralyUIBaseMixin(LitEle
         const validationClasses = this.validationController.getValidationClasses();
         return html `
       <slot name="label"></slot>
-      <div 
+      <div
         class="${classMap(Object.assign({ 'wrapper': true }, validationClasses))}"
-        data-theme="${this.currentTheme}"
         tabindex="0"
         role="combobox"
         aria-expanded="${this.show}"
@@ -465,22 +470,23 @@ let HySelectComponent = class HySelectComponent extends NuralyUIBaseMixin(LitEle
         @blur=${this.handleBlur}
       >
         <div class="select">
-          <div class="select-trigger">
+          <div part="trigger" class="select-trigger">
             ${this.renderSelectedContent(selectedOptions)}
           </div>
-          
+
           <div class="icons-container">
             ${this.renderStatusIcon()}
             ${this.renderClearButton(selectedOptions)}
-            <nr-icon 
-              name="chevron-down" 
+            <nr-icon
+              name="chevron-down"
               size="${this.size}"
               class="arrow-icon"
               aria-hidden="true"
             ></nr-icon>
           </div>
-          
+
           <div
+            part="dropdown"
             class="options"
             role="listbox"
             aria-multiselectable="${this.multiple}"
@@ -494,7 +500,7 @@ let HySelectComponent = class HySelectComponent extends NuralyUIBaseMixin(LitEle
           </div>
         </div>
       </div>
-      
+
       ${this.renderValidationMessage()}
       <slot name="helper-text"></slot>
     `;
@@ -543,7 +549,7 @@ let HySelectComponent = class HySelectComponent extends NuralyUIBaseMixin(LitEle
      */
     renderSlot() {
         return html `
-      <slot name="trigger" @click=${this.handleTriggerClick}></slot>
+      <span @click=${this.handleTriggerClick}><slot name="trigger"></slot></span>
       <div
         class="options"
         role="listbox"
@@ -567,13 +573,13 @@ let HySelectComponent = class HySelectComponent extends NuralyUIBaseMixin(LitEle
         if (this.multiple) {
             // Check if custom display slot should be used
             if (this.useCustomSelectedDisplay) {
-                return html `<slot name="selected-display" .selectedOptions=${selectedOptions}></slot>`;
+                return html `<slot name="selected-display"></slot>`;
             }
             // Default behavior: render tags
             return map(selectedOptions, (option) => html `
-        <span class="tag">
+        <span part="tag" class="tag">
           <span class="tag-label">${option.label}</span>
-          <nr-icon 
+          <nr-icon
             name="x"
             size="${this.size}"
             class="tag-close"
@@ -611,6 +617,7 @@ let HySelectComponent = class HySelectComponent extends NuralyUIBaseMixin(LitEle
         }
         return html `
       <nr-icon
+        part="clear"
         name="x"
         size="${this.size}"
         class="clear-icon"
@@ -651,6 +658,7 @@ let HySelectComponent = class HySelectComponent extends NuralyUIBaseMixin(LitEle
             const isFocused = focusedOption && focusedOption.value === option.value;
             return html `
         <div
+          part="option"
           class="${classMap({
                 'option': true,
                 'selected': isSelected,
@@ -699,6 +707,7 @@ let HySelectComponent = class HySelectComponent extends NuralyUIBaseMixin(LitEle
     }
 };
 HySelectComponent.styles = styles;
+HySelectComponent.useShadowDom = true;
 __decorate([
     property({ type: Array })
 ], HySelectComponent.prototype, "options", void 0);
@@ -759,15 +768,6 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], HySelectComponent.prototype, "block", void 0);
-__decorate([
-    query('.options')
-], HySelectComponent.prototype, "optionsElement", void 0);
-__decorate([
-    query('.wrapper')
-], HySelectComponent.prototype, "wrapper", void 0);
-__decorate([
-    query('.search-input')
-], HySelectComponent.prototype, "searchInput", void 0);
 HySelectComponent = __decorate([
     customElement('nr-select')
 ], HySelectComponent);