@nuralyui/select 0.0.5 → 0.1.1

package/index.d.ts

@@ -1,2 +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/index.js

@@ -1,2 +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/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/select/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC","sourcesContent":["export * from './select.component.js';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/select/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH;;;;;GAKG;AAEH,yBAAyB;AACzB,cAAc,uBAAuB,CAAC;AAEtC,+BAA+B;AAC/B,cAAc,mBAAmB,CAAC;AAElC,oBAAoB;AACpB,cAAc,sBAAsB,CAAC;AAErC,uCAAuC;AACvC,cAAc,wBAAwB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\n/**\n * Select Component Module\n * \n * Advanced select component with multiple selection modes, validation, \n * keyboard navigation, and accessibility features.\n */\n\n// === Main Component ===\nexport * from './select.component.js';\n\n// === Types and Interfaces ===\nexport * from './select.types.js';\n\n// === Constants ===\nexport * from './select.constant.js';\n\n// === Controllers (Advanced Usage) ===\nexport * from './controllers/index.js';\n\n// === Controller Interfaces (Type-Only Exports) ===\nexport type { \n  SelectHost,\n  SelectBaseController,\n  SelectionController,\n  KeyboardController,\n  DropdownController,\n  FocusController,\n  ValidationController,\n  ErrorHandler\n} from './interfaces/index.js';\n"]}

package/package.json

@@ -1,9 +1,21 @@
 {
     "name": "@nuralyui/select",
-    "version": "0.0.5",
-    "description": "",
+    "version": "0.1.1",
+    "description": "A comprehensive select component with advanced features including multi-selection, keyboard navigation, validation, and accessibility support.",
     "main": "index.js",
     "type": "module",
+    "keywords": [
+        "select",
+        "dropdown",
+        "combobox",
+        "multi-select",
+        "web-components",
+        "lit-element",
+        "typescript",
+        "accessibility",
+        "validation",
+        "keyboard-navigation"
+    ],
     "dependencies": {
         "dayjs": "^1.11.7"
     },
@@ -11,5 +23,19 @@
         "test": "echo \"Error: no test specified\" && exit 1"
     },
     "author": "Labidi Aymen",
-    "license": "ISC"
+    "license": "ISC",
+    "exports": {
+        ".": {
+            "import": "./index.js"
+        },
+        "./bundle": {
+            "import": "./bundle.js"
+        }
+    },
+    "files": [
+        "bundle.js",
+        "*.js",
+        "*.d.ts",
+        "*.js.map"
+    ]
 }

package/react.d.ts

@@ -1,8 +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;
-    onInput: string;
+    onChanged: string;
     onFocus: string;
     onBlur: string;
+    onDropdownOpen: string;
+    onDropdownClose: string;
+    onValidation: string;
+    onSelectError: string;
+    onSelectFocus: string;
 }>;
+export declare type HySelectProps = React.ComponentProps<typeof HySelect>;
 //# sourceMappingURL=react.d.ts.map

package/react.js

@@ -1,15 +1,26 @@
-import * as React from 'react';
+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: 'hy-select',
     elementClass: HySelectComponent,
     react: React,
     events: {
+        // Standard events
         onChange: 'change',
-        onInput: 'input',
+        onChanged: 'changed',
         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/react.js.map

@@ -1 +1 @@
-{"version":3,"file":"react.js","sourceRoot":"","sources":["../../../src/components/select/react.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAElD,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAE1D,MAAM,CAAC,MAAM,QAAQ,GAAG,eAAe,CAAC;IACtC,OAAO,EAAE,WAAW;IACpB,YAAY,EAAE,iBAAiB;IAC/B,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE;QACN,QAAQ,EAAE,QAAQ;QAClB,OAAO,EAAE,OAAO;QAChB,OAAO,EAAE,OAAO;QAChB,MAAM,EAAE,MAAM;KACf;CACF,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport { createComponent } from '@lit-labs/react';\n\nimport { HySelectComponent } from './select.component.js';\n\nexport const HySelect = createComponent({\n  tagName: 'hy-select',\n  elementClass: HySelectComponent,\n  react: React,\n  events: {\n    onChange: 'change',\n    onInput: 'input',\n    onFocus: 'focus',\n    onBlur: 'blur',\n  },\n});"]}
+{"version":3,"file":"react.js","sourceRoot":"","sources":["../../../src/components/select/react.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAE1D;;;GAGG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,eAAe,CAAC;IACtC,OAAO,EAAE,WAAW;IACpB,YAAY,EAAE,iBAAiB;IAC/B,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE;QACN,kBAAkB;QAClB,QAAQ,EAAE,QAAQ;QAClB,SAAS,EAAE,SAAS;QACpB,OAAO,EAAE,OAAO;QAChB,MAAM,EAAE,MAAM;QAEd,yBAAyB;QACzB,cAAc,EAAE,eAAe;QAC/B,eAAe,EAAE,gBAAgB;QACjC,YAAY,EAAE,YAAY;QAC1B,aAAa,EAAE,cAAc;QAC7B,aAAa,EAAE,cAAc;KAC9B;CACF,CAAC,CAAC","sourcesContent":["import React from 'react';\nimport { createComponent } from '@lit-labs/react';\nimport { HySelectComponent } from './select.component.js';\n\n/**\n * React wrapper for the HySelectComponent\n * Provides React-compatible props and event handling\n */\nexport const HySelect = createComponent({\n  tagName: 'hy-select',\n  elementClass: HySelectComponent,\n  react: React,\n  events: {\n    // Standard events\n    onChange: 'change',\n    onChanged: 'changed', // Legacy event for backward compatibility\n    onFocus: 'focus',\n    onBlur: 'blur',\n    \n    // Select-specific events\n    onDropdownOpen: 'dropdown-open',\n    onDropdownClose: 'dropdown-close',\n    onValidation: 'validation',\n    onSelectError: 'select-error',\n    onSelectFocus: 'select-focus',\n  },\n});\n\n// Export type for React props\nexport type HySelectProps = React.ComponentProps<typeof HySelect>;"]}

package/select.component.d.ts

@@ -1,28 +1,313 @@
-import { LitElement, PropertyValues } from 'lit';
-import { IOption, OptionSelectionMode, OptionSize, OptionStatus, OptionType } from './select.types.js';
-export declare class HySelectComponent extends LitElement {
+/**
+ * @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("../../shared/dependency-mixin.js").DependencyAware) & (new (...args: any[]) => import("../../shared/theme-mixin.js").ThemeAware) & (new (...args: any[]) => import("../../shared/event-handler-mixin.js").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 -->
+ * <hy-select placeholder="Choose an option">
+ *   <option value="1">Option 1</option>
+ *   <option value="2">Option 2</option>
+ * </hy-select>
+ *
+ * <!-- Multiple selection -->
+ * <hy-select multiple placeholder="Choose multiple options"></hy-select>
+ *
+ * <!-- With validation -->
+ * <hy-select required status="error"></hy-select>
+ *
+ * <!-- Button style -->
+ * <hy-select type="button"></hy-select>
+ *
+ * <!-- With search functionality -->
+ * <hy-select searchable search-placeholder="Search options..."></hy-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)
+ *
+ * @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-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;
-    options: IOption[];
-    defaultSelected: string[];
+    requiredComponents: string[];
+    /** Array of options to display in the select dropdown */
+    options: SelectOption[];
+    /** Default selected values (for initialization) */
+    defaultValue: string[];
+    /** Placeholder text shown when no option is selected */
     placeholder: string;
+    /** Disables the select component */
     disabled: boolean;
-    type: OptionType;
-    selectionMode: OptionSelectionMode;
+    /** Select display type (default, inline, button, slot) */
+    type: SelectType;
+    /** Enables multiple option selection */
+    multiple: boolean;
+    /** Controls dropdown visibility */
     show: boolean;
-    status: OptionStatus;
-    size: OptionSize;
-    selected: IOption[];
+    /** 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;
+    /** Placeholder text for the search input */
+    searchPlaceholder: string;
+    /** Current search query */
+    searchQuery: string;
+    /** Options dropdown container element */
     optionsElement: HTMLElement;
+    /** Main wrapper element */
     wrapper: HTMLElement;
-    protected updated(_changedProperties: PropertyValues): void;
-    private toggleOptions;
-    private calculateOptionsPosition;
-    private initOptionsPosition;
-    private selectOption;
-    private unselectAll;
-    private unselectOne;
-    private dispatchChangeEvent;
-    private onBlur;
-    protected render(): unknown;
+    /** 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;
+    /**
+     * 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;
+    /**
+     * 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;
+    /**
+     * 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;
+    /**
+     * 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").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