@nuraly/lumenui 0.1.0

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

@@ -0,0 +1,17 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Select Component Module
+ *
+ * Advanced select component with multiple selection modes, validation,
+ * keyboard navigation, and accessibility features.
+ */
+export * from './select.component.js';
+export * from './select.types.js';
+export * from './select.constant.js';
+export * from './controllers/index.js';
+export type { SelectHost, SelectBaseController, SelectionController, KeyboardController, DropdownController, FocusController, ValidationController, ErrorHandler } from './interfaces/index.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,20 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Select Component Module
+ *
+ * Advanced select component with multiple selection modes, validation,
+ * keyboard navigation, and accessibility features.
+ */
+// === Main Component ===
+export * from './select.component.js';
+// === Types and Interfaces ===
+export * from './select.types.js';
+// === Constants ===
+export * from './select.constant.js';
+// === Controllers (Advanced Usage) ===
+export * from './controllers/index.js';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import { HySelectComponent } from './select.component.js';
+/**
+ * React wrapper for the HySelectComponent
+ * Provides React-compatible props and event handling
+ */
+export declare const HySelect: import("@lit-labs/react").ReactWebComponent<HySelectComponent, {
+    onChange: string;
+    onChanged: string;
+    onFocus: string;
+    onBlur: string;
+    onDropdownOpen: string;
+    onDropdownClose: string;
+    onValidation: string;
+    onSelectError: string;
+    onSelectFocus: string;
+}>;
+export type HySelectProps = React.ComponentProps<typeof HySelect>;
+//# sourceMappingURL=react.d.ts.map

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

@@ -0,0 +1,26 @@
+import React from 'react';
+import { createComponent } from '@lit-labs/react';
+import { HySelectComponent } from './select.component.js';
+/**
+ * React wrapper for the HySelectComponent
+ * Provides React-compatible props and event handling
+ */
+export const HySelect = createComponent({
+    tagName: 'nr-select',
+    elementClass: HySelectComponent,
+    react: React,
+    events: {
+        // Standard events
+        onChange: 'change',
+        onChanged: 'changed', // Legacy event for backward compatibility
+        onFocus: 'focus',
+        onBlur: 'blur',
+        // Select-specific events
+        onDropdownOpen: 'dropdown-open',
+        onDropdownClose: 'dropdown-close',
+        onValidation: 'validation',
+        onSelectError: 'select-error',
+        onSelectFocus: 'select-focus',
+    },
+});
+//# sourceMappingURL=react.js.map

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

@@ -0,0 +1,359 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+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;
+/**
+ * Advanced select component with multiple selection modes, validation, and accessibility features.
+ *
+ * Supports single and multiple selection, custom rendering, validation states, keyboard navigation,
+ * and various display types including default, inline, button, and slot-based configurations.
+ *
+ * @example
+ * ```html
+ * <!-- Basic select -->
+ * <nr-select placeholder="Choose an option">
+ *   <option value="1">Option 1</option>
+ *   <option value="2">Option 2</option>
+ * </nr-select>
+ *
+ * <!-- Multiple selection -->
+ * <nr-select multiple placeholder="Choose multiple options"></nr-select>
+ *
+ * <!-- With validation -->
+ * <nr-select required status="error"></nr-select>
+ *
+ * <!-- Button style -->
+ * <nr-select type="button"></nr-select>
+ *
+ * <!-- With search functionality -->
+ * <nr-select searchable search-placeholder="Search options..."></nr-select>
+ *
+ * <!-- With clear button -->
+ * <nr-select clearable></nr-select>
+ *
+ * <!-- Full width block select -->
+ * <nr-select block></nr-select>
+ * ```
+ *
+ * @fires nr-change - Selection changed
+ * @fires nr-focus - Component focused
+ * @fires nr-blur - Component blurred
+ * @fires nr-dropdown-open - Dropdown opened
+ * @fires nr-dropdown-close - Dropdown closed
+ * @fires nr-validation - Validation state changed
+ *
+ * @slot label - Select label content
+ * @slot helper-text - Helper text below select
+ * @slot trigger - Custom trigger content (slot type only)
+ * @slot selected-display - Custom display for selected values (multi-select only, when use-custom-selected-display is true)
+ * @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
+ */
+export declare class HySelectComponent extends HySelectComponent_base implements SelectHost {
+    static styles: import("lit").CSSResult;
+    requiredComponents: string[];
+    /** Array of options to display in the select dropdown */
+    options: SelectOption[];
+    /** Placeholder text shown when no option is selected */
+    placeholder: string;
+    /** Disables the select component */
+    disabled: boolean;
+    /** Select display type (default, inline, button, slot) */
+    type: SelectType;
+    /** Enables multiple option selection */
+    multiple: boolean;
+    /** Controls dropdown visibility */
+    show: boolean;
+    /** Validation status (default, warning, error, success) */
+    status: SelectStatus;
+    /** Select size (small, medium, large) */
+    size: SelectSize;
+    /** Makes the select required for form validation */
+    required: boolean;
+    /** Form field name */
+    name: string;
+    /** Current selected value(s) */
+    value: string | string[];
+    /** Message to display when no options are available */
+    noOptionsMessage: string;
+    /** Icon to display with the no options message */
+    noOptionsIcon: string;
+    /** Enable search/filter functionality */
+    searchable: boolean;
+    /** Enable clear button to clear all selections */
+    clearable: boolean;
+    /** Placeholder text for the search input */
+    searchPlaceholder: string;
+    /** Current search query */
+    searchQuery: string;
+    /** Enable custom selected display slot */
+    useCustomSelectedDisplay: boolean;
+    /** Maximum height of the options dropdown */
+    maxHeight: string;
+    /** Makes select full width */
+    block: boolean;
+    /** Options dropdown container element */
+    optionsElement: HTMLElement;
+    /** Main wrapper element */
+    wrapper: HTMLElement;
+    /** Search input element */
+    searchInput?: HTMLInputElement;
+    /** Handles option selection logic */
+    private selectionController;
+    /** Manages dropdown visibility and positioning */
+    private dropdownController;
+    /** Handles keyboard navigation */
+    private keyboardController;
+    /** Manages focus states */
+    private focusController;
+    /** Handles validation logic */
+    private validationController;
+    /** Handles search/filter functionality */
+    private searchController;
+    /** Handles all event management */
+    private eventController;
+    /**
+     * Component connected to DOM - initialize base functionality
+     */
+    connectedCallback(): void;
+    /**
+     * Component disconnected from DOM - cleanup event listeners
+     */
+    disconnectedCallback(): void;
+    /**
+     * Called before update to handle property changes
+     */
+    willUpdate(changedProperties: Map<string, any>): void;
+    /**
+     * First render complete - setup controllers and initialize state
+     */
+    firstUpdated(changedProperties: any): void;
+    /**
+     * Gets the currently selected options
+     * @returns Array of selected options
+     */
+    get selectedOptions(): SelectOption[];
+    /**
+     * Gets the first selected option (for single selection mode)
+     * @returns Selected option or undefined if none selected
+     */
+    get selectedOption(): SelectOption | undefined;
+    /**
+     * Selects an option programmatically
+     * @param option - The option to select
+     */
+    selectOption(option: SelectOption): void;
+    /**
+     * Unselects an option programmatically
+     * @param option - The option to unselect
+     */
+    unselectOption(option: SelectOption): void;
+    /**
+     * Toggles an option's selection state
+     * @param option - The option to toggle
+     */
+    toggleOption(option: SelectOption): void;
+    /**
+     * Clears all current selections
+     */
+    clearSelection(): void;
+    /**
+     * Checks if a specific option is currently selected
+     * @param option - The option to check
+     * @returns True if the option is selected
+     */
+    isOptionSelected(option: SelectOption): boolean;
+    /**
+     * Toggles the dropdown visibility
+     */
+    toggleDropdown(): void;
+    /**
+     * Opens the dropdown programmatically
+     */
+    openDropdown(): void;
+    /**
+     * Closes the dropdown programmatically
+     */
+    closeDropdown(): void;
+    /**
+     * Focuses the select component
+     */
+    focus(): void;
+    /**
+     * Removes focus from the select component
+     */
+    blur(): void;
+    /**
+     * Validates the current selection according to component rules
+     * @returns True if valid, false otherwise
+     */
+    validate(): boolean;
+    /**
+     * Checks if the current selection is valid without showing validation UI
+     * @returns True if valid, false otherwise
+     */
+    checkValidity(): boolean;
+    /**
+     * Reports the current validation state and shows validation UI if invalid
+     * @returns True if valid, false otherwise
+     */
+    reportValidity(): boolean;
+    /**
+     * Sets a custom validation message
+     * @param message - Custom validation message (empty string to clear)
+     */
+    setCustomValidity(message: string): void;
+    /**
+     * Gets the current validation status
+     * @returns ValidationStatus object with isValid and message
+     */
+    getValidationStatus(): {
+        isValid: boolean;
+        validationMessage: string;
+    };
+    /**
+     * Gets the current validation message
+     */
+    get validationMessage(): string;
+    /**
+     * Clears validation state
+     */
+    clearValidation(): void;
+    /**
+     * Searches for options with the given query
+     * @param query - Search query string
+     */
+    searchOptions(query: string): void;
+    /**
+     * Clears the current search query
+     */
+    clearSearch(): void;
+    /**
+     * Gets the filtered options based on current search
+     * @returns Array of filtered options
+     */
+    getSearchFilteredOptions(): SelectOption[];
+    /**
+     * Gets the current search query
+     * @returns Current search query string
+     */
+    getCurrentSearchQuery(): string;
+    /**
+     * Gets the currently selected options
+     * @returns Array of selected option objects
+     */
+    getSelectedOptions(): SelectOption[];
+    /**
+     * Manually trigger setup of global event listeners
+     */
+    setupGlobalEventListeners(): void;
+    /**
+     * Manually trigger removal of global event listeners
+     */
+    removeGlobalEventListeners(): void;
+    /**
+     * Handles clicks on the select trigger element
+     */
+    private handleTriggerClick;
+    /**
+     * Handles clicks on individual options
+     */
+    private handleOptionClick;
+    /**
+     * Handles removal of selected tags in multiple selection mode
+     */
+    private handleTagRemove;
+    /**
+     * Handles the clear all selections button
+     */
+    private handleClearAll;
+    /**
+     * Handles keyboard navigation and interactions
+     */
+    private handleKeyDown;
+    /**
+     * Handles focus events
+     */
+    private handleFocus;
+    /**
+     * Handles blur events
+     */
+    private handleBlur;
+    /**
+     * Filters options based on search query
+     */
+    private getFilteredOptions;
+    /**
+     * Sets up global event listeners (called when dropdown opens)
+     */
+    setupEventListeners(): void;
+    /**
+     * Removes global event listeners (called on disconnect or dropdown close)
+     */
+    removeEventListeners(): void;
+    /**
+     * Main render method that delegates to specific type renderers
+     */
+    protected render(): import("lit-html").TemplateResult<1>;
+    /**
+     * Renders the default select appearance with full features
+     */
+    private renderDefault;
+    /**
+     * Renders inline select with integrated label and helper text
+     */
+    private renderInline;
+    /**
+     * Renders select as a button-style component
+     */
+    private renderButton;
+    /**
+     * Renders select with custom trigger content via slots
+     */
+    private renderSlot;
+    /**
+     * Renders the selected content in the trigger area
+     */
+    private renderSelectedContent;
+    /**
+     * Renders status/validation icons based on current status
+     */
+    private renderStatusIcon;
+    /**
+     * Renders the clear all selections button when applicable
+     */
+    private renderClearButton;
+    /**
+     * Renders all available options in the dropdown
+     */
+    private renderSelectOptions;
+    /**
+     * Renders the search input when searchable is enabled
+     */
+    private renderSearchInput;
+    /**
+     * Renders validation message when present
+     */
+    private renderValidationMessage;
+}
+export {};
+//# sourceMappingURL=select.component.d.ts.map