/**
 * 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
 * <!-- Basic dropdown -->
 * <ty-dropdown label="Country" placeholder="Select country" required>
 *   <option value="us">United States</option>
 *   <option value="uk">United Kingdom</option>
 *   <option value="ca">Canada</option>
 * </ty-dropdown>
 *
 * <!-- With rich options -->
 * <ty-dropdown label="User">
 *   <ty-option value="1">
 *     <div class="flex items-center gap-2">
 *       <img src="avatar1.jpg" class="w-8 h-8 rounded-full" />
 *       <span>John Doe</span>
 *     </div>
 *   </ty-option>
 * </ty-dropdown>
 *
 * <!-- External search (parent owns filtering, dropdown emits `search` events) -->
 * <ty-dropdown label="Search API" external-search debounce="300">
 *   <option value="1">Result 1</option>
 * </ty-dropdown>
 * ```
 */
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<DropdownState> {
    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;
        };
        externalSearch: {
            type: "boolean";
            visual: boolean;
            default: boolean;
            aliases: {
                'external-search': 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;
        };
        debounce: {
            type: "number";
            default: number;
            validate: (v: any) => boolean;
            coerce: (v: any) => number;
        };
        loading: {
            type: "boolean";
            visual: boolean;
            default: boolean;
        };
    };
    private _value;
    private _placeholder;
    private _label;
    private _disabled;
    private _readonly;
    private _required;
    private _externalSearch;
    private _clearable;
    private _loading;
    private _size;
    private _state;
    private _scrollLockId;
    private _stubClickHandler;
    private _outsideClickHandler;
    private _optionClickHandler;
    private _searchInputHandler;
    private _blockSearchClick;
    private _keyboardHandler;
    private _clearClickHandler;
    private _debounce;
    private _searchDebounceTimer;
    private _optionsScrollbar;
    private _childObserver;
    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;
    /**
     * Re-establish the visual selection (selected attribute + slot clone) for the
     * current value, when the matching option exists in children but isn't yet
     * marked. Called from the children MutationObserver — covers the case where
     * a consumer swaps options dynamically (external-search refresh) and wipes
     * out the previous selection's marker + clone in the process.
     *
     * Idempotent — bails when nothing to do, so it's safe to call from the
     * MutationObserver callback even when the trigger was our own clone work.
     */
    private redisplaySelected;
    /**
     * Called when properties change
     * Handle state synchronization BEFORE render
     */
    protected onPropertiesChanged(changes: PropertyChange[]): void;
    /**
     * Toggle the loading visual state on the open popup.
     * Replaces the options list with a centered spinner; search input stays usable.
     * Pulls the latest registered loader SVG on each call so registry changes
     * take effect on the next loading toggle.
     */
    private applyLoadingState;
    /**
     * 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;
    /**
     * 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: <option>, <ty-option>, <ty-tag>
     */
    private getOptions;
    /**
     * Extract value and text from option element
     */
    private getOptionData;
    /**
     * Clear all selections
     */
    private clearSelection;
    /**
     * Select an option
     */
    private selectOption;
    /**
     * Sync selected option based on current value
     */
    private syncSelectedOption;
    /**
     * Update component value attribute for consistency
     */
    private updateComponentValue;
    /**
     * Update selection display (show/hide placeholder)
     */
    private updateSelectionDisplay;
    private updateClearButton;
    /**
     * Dispatch change event
     */
    private dispatchChangeEvent;
    private filterOptions;
    private updateOptionVisibility;
    /**
     * Clear all option highlights
     */
    private clearHighlights;
    private highlightOption;
    /**
     * Setup event listeners
     */
    private setupDesktopEventListeners;
    /**
     * Lock scroll with consistent ID generation
     */
    private lockDropdownScroll;
    /**
     * Unlock scroll using stored ID
     */
    private unlockDropdownScroll;
    /**
     * Initialize options state when opening dropdown/modal
     * @param highlightSelected - Whether to highlight the currently selected option
     */
    private initializeOptionsState;
    /**
     * Base stub click handler - validates state then calls open callback
     * @param e - Click event
     * @param openCallback - Function to call to open (desktop or mobile)
     */
    private handleStubClickBase;
    /**
     * Base option click handler - finds option, selects it, then calls close callback
     * @param e - Click event
     * @param closeCallback - Function to call to close (desktop or mobile)
     */
    private handleOptionClickBase;
    /**
     * Base clear click handler - clears selection and optionally closes
     * @param e - Click event
     * @param closeCallback - Optional function to call to close (mobile only)
     */
    private handleClearClickBase;
    /**
     * Calculate and set dropdown position with smart direction detection
     */
    private calculateDesktopPosition;
    /**
     * Open dropdown dialog
     */
    private openDesktopDropdown;
    /**
     * Close dropdown dialog
     */
    private closeDesktopDropdown;
    /**
     * Handle outside click to close dropdown
     */
    private handleDesktopOutsideClick;
    /**
     * Handle search input changes
     */
    private handleSearchInput;
    /**
     * Block search input click from bubbling
     * Prevents search input clicks from triggering outside click handler
     */
    private blockSearchClick;
    /**
     * Dispatch search event for external search handling
     * With optional debounce support
     */
    private dispatchSearchEvent;
    /**
     * Fire the actual search event
     */
    private fireSearchEvent;
    /**
     * Dispatch lifecycle events for popup open/close.
     * On open with external-search, also fire a `search` event with an empty
     * query so consumers have a clean hook to reset/refetch the option list —
     * fixes the "stale filtered options on reopen" UX issue.
     */
    private fireOpenEvent;
    private fireCloseEvent;
    /**
     * Handle keyboard navigation
     */
    private handleDesktopKeyboard;
    /**
     * Handle stub click - open dropdown
     */
    private handleDesktopStubClick;
    /**
     * Handle option click - select option and close
     */
    private handleDesktopOptionClick;
    /**
     * Handle clear button click - clear selection
     * CRITICAL: Must prevent dropdown from opening!
     */
    private handleDesktopClearClick;
    private _setupOptionsScrollbar;
    private _destroyOptionsScrollbar;
    /**
     * Build CSS class list for stub
     */
    private buildStubClasses;
    /**
     * Render desktop mode with dialog
     */
    private renderDesktop;
    /**
     * Render mobile mode with full-screen modal
     */
    private renderMobile;
    /**
     * Setup event listeners for mobile mode
     */
    private setupMobileEventListeners;
    /**
     * Handle mobile stub click - open modal
     */
    private handleMobileStubClick;
    /**
     * Handle mobile option click - select and close
     */
    private handleMobileOptionClick;
    /**
     * Handle clear click in mobile modal
     */
    private handleMobileClearClick;
    /**
       * Open mobile modal
       */
    private openMobileModal;
    /**
     * Close mobile modal
     */
    private closeMobileModal;
    get value(): string;
    set value(v: string);
    get name(): string;
    set name(v: string);
    get placeholder(): string;
    set placeholder(v: string);
    get label(): string;
    set label(v: string);
    get disabled(): boolean;
    set disabled(v: boolean);
    get readonly(): boolean;
    set readonly(v: boolean);
    get required(): boolean;
    set required(v: boolean);
    get externalSearch(): boolean;
    set externalSearch(v: boolean);
    get clearable(): boolean;
    set clearable(v: boolean);
    get loading(): boolean;
    set loading(v: boolean);
    get size(): Size;
    set size(v: Size);
    get flavor(): Flavor;
    set flavor(v: Flavor);
    get debounce(): number;
    set debounce(v: number);
    get form(): HTMLFormElement | null;
}
export {};
//# sourceMappingURL=dropdown.d.ts.map