/**
* @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) & (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.
*
* 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
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
* ```
*
* @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)
*
* @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[];
/** 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 */
get optionsElement(): HTMLElement | null;
/** Main wrapper element */
get wrapper(): HTMLElement | null;
/** Search input element */
get searchInput(): HTMLInputElement | null;
/** 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): 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