/** * 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: