@nuralyui/select
Version:
A comprehensive select component with advanced features including multi-selection, keyboard navigation, validation, and accessibility support.
321 lines • 10.4 kB
TypeScript
/**
* @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>
*
* <!-- Without clear button -->
* <hy-select clearable="false"></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-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[];
/** Default selected values (for initialization) */
defaultValue: string[];
/** 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;
/** Maximum height of the options dropdown */
maxHeight: string;
/** 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;
/**
* 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