import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
import { OptionValue } from '../q2-option-list/q2-option-list';
import { Q2InputCustomEvent } from "../../components";
import type { EventDetail } from 'q2-tecton-common/lib/types/elements';
/**
 * @name Search
 * @category Forms
 * @summary Use for search-first selection where the option list is driven by user input — supports both in-memory filtering and async fetch.
 * @slot label - An optional slot to display a custom label.
 * @slot popover-top - An optional slot for persistent content at the top of the popover (e.g., secondary actions).
 * @slot popover-bottom - An optional slot for persistent content at the bottom of the popover.
 * @slot empty - An optional slot to display custom content when the popover is open and no options are visible.
 */
export declare class Q2Search implements ComponentInterface {
    displayBuffer: number;
    inputField?: HTMLQ2InputElement;
    mutationObserver: MutationObserver;
    optionFingerprint: string;
    optionList?: HTMLQ2OptionListElement;
    popoverElement?: HTMLQ2PopoverElement;
    popoverWidthWarned: boolean;
    statusMessageTimer: ReturnType<typeof setTimeout>;
    hostElement: HTMLElement;
    hasEmptySlot: boolean;
    hasOptions: boolean;
    hasPopoverBottom: boolean;
    hasPopoverTop: boolean;
    inputFocused: boolean;
    isShowingSelectionDisplay: boolean;
    open: boolean;
    searchText: string;
    showSelected: boolean;
    statusMessage: string;
    structuredSelectedOptions: OptionValue[];
    viewportFallbackActive: boolean;
    /** Renders an icon button when the field is non-empty. Pressing the button clears the query and selection. */
    clearable: boolean;
    /** Disables all interaction with the field and leverages the disabled visual style of `q2-input`. */
    disabled: boolean;
    /**
     * The presence of `errors` will mark the field as invalid, putting it into an error state.
     * @localizable
     */
    errors: string[];
    /**
     * When `true`, the component case-insensitively matches each `<q2-option>`'s `display` and `innerText`
     * against the current query and toggles `hidden`. When `false` (default), the consumer is expected to
     * filter or fetch options in response to the `tctInput` event.
     */
    filter: boolean;
    /**
     * Hides the field's `<label>` element from view.
     * @warning
     * Only use when a visible label is impractical.
     */
    hideLabel: boolean;
    /** Determines whether to show an error state. Its primary use-case is for an unfilled field. */
    invalid: boolean;
    /**
     * The text that will be used as the label for the field.
     * @localizable
     */
    label: string;
    /**
     * Determines the label that is applied to the option list for accessibility purposes.
     * @localizable
     */
    listLabel: string;
    /** Opens the popover and shows a spinner inside it until results populate. The clear button is suppressed while loading. */
    loading: boolean;
    /** The minimum number of rows the component will try to display below or above the component when opened. */
    minRows: number;
    /** Enables text wrapping for `q2-option` elements. When `false`, the text truncates and does not wrap. */
    multilineOptions: boolean;
    /** Enables multi-select functionality. */
    multiple: boolean;
    /**
     * The message displayed when the popover is open and no options are visible. Overridden by the `empty` slot.
     * @localizable
     */
    noResultsMessage: string;
    /** Appends "(optional)" to the field label, and sets `aria-required` on the nested input tag to `false`. */
    optional: boolean;
    /**
     * Text that appears within the field when it is blurred and empty.
     * @localizable
     */
    placeholder: string;
    /**
     * Aligns the popover dropdown to the left or right side of the input. Requires
     * the `--tct-popover-width` CSS custom property to be set on the host; without
     * it q2-search logs a warning and renders the popover at input-width
     * (the default behavior). When the viewport is narrower than the defined width,
     * q2-search transparently falls back to input-width so the popover never
     * overflows the viewport.
     */
    popoverAlignment: 'left' | 'right';
    /**
     * Force the maximum height of the popover. Interpreted as pixels.
     * If unset or exceeds available space, the component auto-detects the maximum height.
     */
    popoverMaxHeight: number;
    /**
     * Appends "(read only)" to the field label, and field becomes unusable but remains focusable.
     * Takes priority over `optional` if both are `true`.
     */
    readonly: boolean;
    /**
     * Each item in this array should correspond to the value of a `q2-option` element.
     * Only relevant for `multiple` (multi-select) implementations.
     */
    selectedOptions: string[];
    /**
     * Renders a header inside the popover with a toggle to switch between viewing search
     * results and only the selected options. Only applies to `multiple` (multi-select).
     */
    showSelectedToggle: boolean;
    /**
     * The current value for the search. Should correspond to the value of a nested `q2-option` element.
     * Only relevant for single-select implementations.
     */
    value: string;
    /**
     * Emitted when an option is selected or deselected.
     *
     * When multi-select is enabled, `value` is `undefined` and `selectedOptions` contains the selected values.
     * Ignore `tctVModel` — included for Vue v-model compatibility.
     */
    tctChange: EventEmitter<{
        value: string;
        selectedOptions: string[];
        tctVModel: string | string[];
    }>;
    /** Emitted when the popover closes. */
    tctClose: EventEmitter<void>;
    /** Emitted on every keystroke with the current query. */
    tctInput: EventEmitter<{
        query: string;
    }>;
    /** Emitted when the popover opens. */
    tctOpen: EventEmitter<void>;
    disconnectedCallback(): void;
    componentWillLoad(): void;
    componentDidLoad(): void;
    onFocus(event?: FocusEvent): void;
    onFocusOut(event: FocusEvent): void;
    onKeyDown(event: KeyboardEvent): void;
    onClear(event: CustomEvent): void;
    onPopoverStateChanged(event: CustomEvent<{
        open: boolean;
    }>): void;
    /**
     * Closes the popover.
     * @testOnly
     */
    closePopover(): Promise<void>;
    /**
     * Opens the popover.
     * @testOnly
     */
    openPopover(): Promise<void>;
    /**
     * Resets the search to its initial state: clears the input, the
     * selection, and closes the popover. Use this from consumers that
     * treat selection as a one-shot trigger (e.g. navigation) rather
     * than a committed form value.
     *
     * Emits `tctInput` with an empty query so listeners can reconcile.
     * Emits `tctClose` as a side effect of closing the popover if it is open.
     * Does not emit `tctChange`.
     */
    reset(): Promise<void>;
    /**
     * Programmatically focuses the input, sets its value, and emits `tctInput`.
     * @testOnly
     */
    searchOptions(query: string): Promise<void>;
    /**
     * Selects the option(s) with the specified value(s).
     * If multi-select is enabled and `closePopover` is `true` (default), the popover closes after selection.
     * @testOnly
     */
    setValue(values: string | string[], options?: {
        closePopover?: boolean;
    }): Promise<void>;
    onLoadingChange(loading: boolean): void;
    onMultilineOptionsChange(): void;
    onOpenChange(open: boolean): void;
    onSearchTextChange(): void;
    buildStructuredSelectedOptions(): void;
    get badgeValue(): string | null;
    get firstSelectedOptionElement(): HTMLQ2OptionElement | null;
    get innerInputContainer(): HTMLElement | null;
    get innerInputField(): HTMLInputElement | null;
    /**
     * `true` when the consumer has provided no options and no slot content that would
     * fill the popover, AND the component is not loading. In this state the popover is
     * suppressed and the component behaves as a styled search input.
     */
    get isInputOnlyMode(): boolean;
    get optionElements(): HTMLQ2OptionElement[];
    get optionListId(): string;
    get popoverMinHeight(): number;
    get selectedDisplaySlot(): HTMLElement | null;
    get visibleOptionElements(): HTMLQ2OptionElement[];
    get wrapperClasses(): string;
    announceResults(): void;
    applyLocalFilter(): void;
    applyMultilineOptions(): void;
    checkSelectedDisplay(): HTMLElement | null;
    checkSelectedOptions(): void;
    clearAll: () => void;
    clearSelectedDisplay(): null;
    closeDropdown(): void;
    getResolvedPopoverWidth(): number | null;
    handleSelectionChanges: (detail: {
        value?: string;
        values?: OptionValue[];
    }) => void;
    initMutationObserver: () => void;
    inputInputHandler: (event: Q2InputCustomEvent<EventDetail> & InputEvent) => void;
    onClickElsewhere: (event: CustomEvent) => void;
    onMutationObserved: () => void;
    onOptionListChange: (event: CustomEvent<{
        value: string;
        values: OptionValue[];
    }>) => void;
    onSelectedDisplayMousedown: (event: MouseEvent) => void;
    onViewportResize: () => void;
    openDropdown(): void;
    optionDisplayText(option: HTMLQ2OptionElement | undefined, fallback?: string): string;
    revertToSelectedDisplay(): void;
    setCustomLabel(): void;
    setStatusMessage(message: string): void;
    shouldUseBlockFallback(): boolean;
    showAllOptions: () => void;
    showSelectedOptions: () => void;
    renderCustomDisplay(): any;
    renderEmpty(): any;
    renderMultiSelectHeader(): any;
    renderOptionsDropdown(): any;
    render(): any;
}