/**
* TyDropdown Web Component
* PORTED FROM: clj/ty/components/dropdown.cljs
*
* A semantic dropdown component with:
* - Desktop mode with smart positioning
* - Mobile mode with full-screen modal
* - Search and filtering capabilities
* - Keyboard navigation
* - Form association for native form submission
* - Rich option support (option, ty-option, ty-tag)
*
* @example
* ```html
*
*
*
*
*
*
*
*
*
*
*
*

*
John Doe
*
*
*
*
*
*
*
*
* ```
*/
import type { Flavor, Size } from '../types/common.js';
import { TyComponent } from '../base/ty-component.js';
import type { PropertyChange } from '../utils/property-manager.js';
/**
* Option data structure
*/
interface OptionData {
value: string;
text: string;
element: HTMLElement;
}
/**
* Component state structure
*/
interface DropdownState {
open: boolean;
search: string;
highlightedIndex: number;
filteredOptions: OptionData[];
currentValue: string | null;
mode: 'desktop' | 'mobile';
}
/**
* Ty Dropdown Component
*/
export declare class TyDropdown extends TyComponent {
protected static properties: {
value: {
type: "string";
visual: boolean;
formValue: boolean;
emitChange: boolean;
default: string;
};
name: {
type: "string";
default: string;
};
placeholder: {
type: "string";
visual: boolean;
default: string;
};
label: {
type: "string";
visual: boolean;
default: string;
};
disabled: {
type: "boolean";
visual: boolean;
default: boolean;
};
readonly: {
type: "boolean";
visual: boolean;
default: boolean;
};
required: {
type: "boolean";
visual: boolean;
default: boolean;
};
searchable: {
type: "boolean";
visual: boolean;
default: boolean;
aliases: {
'not-searchable': boolean;
};
};
clearable: {
type: "boolean";
visual: boolean;
default: boolean;
aliases: {
'not-clearable': boolean;
};
};
size: {
type: "string";
visual: boolean;
default: string;
validate: (v: any) => boolean;
coerce: (v: any) => any;
};
flavor: {
type: "string";
visual: boolean;
default: string;
validate: (v: any) => boolean;
coerce: (v: any) => any;
};
delay: {
type: "number";
default: number;
validate: (v: any) => boolean;
coerce: (v: any) => number;
};
};
private _value;
private _name;
private _placeholder;
private _label;
private _disabled;
private _readonly;
private _required;
private _searchable;
private _clearable;
private _size;
private _flavor;
private _state;
private _scrollLockId;
private _stubClickHandler;
private _outsideClickHandler;
private _optionClickHandler;
private _searchInputHandler;
private _searchBlurHandler;
private _blockSearchClick;
private _keyboardHandler;
private _clearClickHandler;
private _delay;
private _searchDebounceTimer;
private _optionsScrollbar;
constructor();
render(): void;
/**
* Called when component is connected to DOM
* TyComponent handles property capture automatically
*/
protected onConnect(): void;
/**
* Called when component is disconnected from DOM
* Clean up event listeners and timers
*/
protected onDisconnect(): void;
/**
* Called when properties change
* Handle state synchronization BEFORE render
*/
protected onPropertiesChanged(changes: PropertyChange[]): void;
/**
* Get the form value for this component
* TyComponent calls this automatically when formValue property changes
*/
protected getFormValue(): FormDataEntryValue | null;
/**
* Parse dropdown value (single string)
*/
private parseValue;
/**
* Validate flavor attribute
*/
private validateFlavor;
/**
* Initialize component state from attributes
*/
private initializeState;
/**
* Update placeholder text in existing rendered HTML
* Called when placeholder changes after initial render
*/
private updatePlaceholderInDOM;
/**
* Update form value via ElementInternals
*/
/**
* Get all option elements from slot
* Supports: