import { EventEmitter, ComponentInterface } from '../../stencil-public-runtime';
import type { EventDetail } from 'q2-tecton-common/lib/types/elements';
import { Q2InputCustomEvent, Q2OptionListCustomEvent } from "../../components";
import { OptionValue } from '../q2-option-list/q2-option-list';
/**
 * @name Select
 * @category Forms
 * @summary Use for choosing from a known list of options with single-select or multi-select.
 * @slot popover-top - An optional slot to display custom content persistently at the top of the popover. This is **not** compatible with the action sheet workflow.
 * @slot popover-bottom - An optional slot to display custom content persistently at the bottom of the popover. This is **not** compatible with the action sheet workflow.
 * @slot q2-select-display - An optional slot to display custom HTML content in the display area.
 */
export declare class Q2Select implements ComponentInterface {
    guid: number;
    inputField?: HTMLQ2InputElement;
    isOrientationUpdate: boolean;
    lastTouchWasInPopover: boolean;
    mutationObserver: MutationObserver;
    optionList: HTMLQ2OptionListElement;
    originalSearchable: boolean;
    popoverElement?: HTMLQ2PopoverElement;
    popoverTopContainer?: HTMLDivElement;
    removingSelectedDisplay: boolean;
    scheduledAfterRender: (() => void)[];
    statusMessageTimer: NodeJS.Timeout;
    hostElement: HTMLElement;
    hasCustomDisplay: boolean;
    hasPopoverBottom: boolean;
    hasPopoverTop: boolean;
    inputFocused: boolean;
    open: boolean;
    /**
     * Determines what text to show in the input field.
     * When `true`, the component will display the search text in the input field
     * When `false`, the component will display the selected option(s) in the input field
     */
    prioritizeSearch: boolean;
    searchText: string;
    showSelected: boolean;
    statusMessage: string;
    structuredSelectedOptions: OptionValue[];
    /** @deprecated */
    ariaLabel: string;
    /** Renders an icon button when the field is non-empty. Pressing the button clears all input from the field. */
    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[];
    /**
     * Hide's the field's `<label>` element from view.
     * @warning
     * Only use when a visible label is impractical.
     */
    hideLabel: boolean;
    /**
     * Instructs the component to use the action sheet workflow for displaying its options.
     *
     * For more information, see [Action Sheets](https://tecton.q2developer.com/guides/action-sheets/).
     * @warning
     * If your `q2-select` renders inside of an iframe, and you are using multiline/robust content options,
     * any custom CSS you apply to your options will not get passed up to the platform which displays the action sheet.
     * For this reason, we strongly suggest using the [q2-card](https://tecton.q2developer.com/design-system/q2-card/) component since its styling is managed by Tecton.
     */
    hoist: 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;
    /** 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;
    /** 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.
     * Placeholder text disappears when the user selects an option.
     * @localizable
     */
    placeholder: string;
    /** @deprecated */
    popDirection: 'up' | 'down';
    /**
     * Force the maximum height of the popover. This value will be interpreted as pixels.
     * If no value is passed, or the value exceeds available space, the component will auto-detect the maximum height based on available space.
     */
    popoverMaxHeight: number;
    /**
     * Determines the display mode of the popover.
     *
     * Providing a value of `legacy` instructs the popover to use absolute positioning instead of fixed positioning.
     *
     * @info
     * This is a temporary solution to work around styling issues related to using fixed positioning for the popover
     * when nested inside of elements with transform properties. This will be removed once the popover API is available
     * for use.
     */
    popoverMode: 'legacy';
    /**
     * Appends "(read only)" to the field label, and field becomes unusable, but remains focusable.
     * Takes priority over `optional` if both are `true`.
     */
    readonly: boolean;
    /**
     * Enables search functionality.
     * @warning
     * `searchable` is not compatible with the `hoist` prop. The action sheet workflow used when `hoist` is `true` does not support in-list search filtering.
     * If both are set, `searchable` has no effect while the action sheet is active.
     */
    searchable: boolean;
    /**
     * Each item in this array should correspond to the value of a `q2-option` element.
     * This property is only relevant for `multiple` (i.e., multi-select) implementations.
     */
    selectedOptions: string[];
    /** Determines whether to show a success state. The error state takes precedence when both are set. */
    valid: boolean;
    /**
     * The current value for the select. This should correspond to the value of a nested q2-option element.
     * This property is only relevant for single-select implementations.
     */
    value: string;
    /**
     * Emitted when an option is selected or deselected.
     *
     * When the multi-select is enabled, the `value` property will be
     * `undefined` and the `selectedOptions` property will contain the selected
     * option values. Ignore the `tctVModel` property it's only included for Vue
     * v-model compatibility.
     *
     * @deprecated Use 'tctChange' instead
     * @legacyEvent
     */
    change: EventEmitter<{
        value: string;
        selectedOptions: string[];
        tctVModel: string | string[];
    }>;
    /**
     * Emitted when the input value changes.
     *
     * Requires the `searchable` prop to be set to `true`.
     *
     * @deprecated Use 'tctInput' instead
     */
    input: EventEmitter<{
        query: string;
    }>;
    /**
     * Emitted when an option is selected or deselected.
     *
     * When the multi-select is enabled, the `value` property will be
     * `undefined` and the `selectedOptions` property will contain the selected
     * option values. Ignore the `tctVModel` property it's only included for Vue
     * v-model compatibility.
     *
     * @legacyEvent
     */
    tctChange: EventEmitter<{
        value: string;
        selectedOptions: string[];
        tctVModel: string | string[];
    }>;
    /**
     * Emitted when the input value changes.
     *
     * Requires the `searchable` prop to be set to `true`.
     */
    tctInput: EventEmitter<{
        query: string;
    }>;
    disconnectedCallback(): void;
    componentWillLoad(): void;
    componentDidLoad(): void;
    componentDidRender(): void;
    onHostElementChange(event: CustomEvent<{
        value: string;
        selectedOptions: string[];
    }>): void;
    onClearHandler(event: CustomEvent): void;
    handleSelectedDisplay(event: CustomEvent): void;
    delegateFocus(event: FocusEvent): void;
    handleFocusout(event: FocusEvent): void;
    keydownHandler(event: KeyboardEvent): void;
    popoverStateChanged({ detail: { open } }: CustomEvent<{
        open: boolean;
    }>): void;
    handleTctClick(): void;
    onHostElementInput(event: CustomEvent): void;
    /**
     * Emulates clicking the `<input>` to hide the popover if it is visible.
     *
     * @testOnly
     */
    closePopover(): Promise<void>;
    /**
     * Emulates clicking the `<input>` to display the popover if it is hidden.
     *
     * @testOnly
     */
    openPopover(): Promise<void>;
    /**
     * Emulates focusing the `<input>`, entering the provided value, and emitting an `input` event.
     *
     * @warning
     * Only applicable when the input is searchable.
     *
     * @testOnly
     */
    searchOptions(query: string): void;
    /**
     * Emulates clicking the `<input>` to display the popover and selecting the option(s) with the specified value(s).
     *
     * If the multi-select is enabled and the `closePopover` argument is `true` (default), the popover will be closed
     * after the option(s) are selected.
     *
     * @testOnly
     */
    setValue(values: string | string[], options?: {
        closePopover?: boolean;
    }): Promise<void>;
    ariaLabelObserver(): void;
    handleMultilineOptionsUpdate(newValue: any, oldValue: any): void;
    openChanged(isOpen: boolean, wasOpen?: boolean): void;
    searchableChanged(newVal: boolean): void;
    buildStructuredSelectedOptions(): void;
    valueUpdated(): void;
    get badgeValue(): string;
    get firstSelectedOptionElement(): HTMLQ2OptionElement;
    get firstSelectedValue(): string;
    get innerInputContainer(): HTMLElement;
    get innerInputField(): HTMLInputElement | HTMLButtonElement;
    get inputId(): string;
    get isModule(): boolean;
    get optionElements(): HTMLQ2OptionElement[];
    get popoverMinHeight(): number;
    get selectedDisplay(): string;
    get selectedDisplaySlot(): HTMLElement;
    get wrapperClasses(): string;
    _togglePopover(): void;
    addTouchEventListeners: () => void;
    calculateMultiSelectSelectedDisplay(): string;
    calculateSingleSelectSelectedDisplay(): string;
    checkSelectedDisplay(): void | HTMLElement;
    checkSelectedDisplayHeight(): void;
    checkSelectedOptions(): void;
    clearSearchText(): void;
    clearSelectedDisplay(): void;
    clearValue(): void;
    clickedElsewhere: (event: CustomEvent) => void;
    closeDropdown(): void;
    destroyEventListeners: () => void;
    executeActionSheet(event: MouseEvent | KeyboardEvent): Promise<void>;
    focusInput(): void;
    handleOptionListExternalKeydown(event: KeyboardEvent): void;
    handleOrientationChange: () => void;
    handleSelectionChanges(changeDetails: {
        value?: string;
        values?: OptionValue[];
    }): void;
    handleTouchMove: (event: TouchEvent) => void;
    initEventListeners: () => void;
    initMutationObserver: () => void;
    inputBlurHandler: () => void;
    inputChangeHandler: (event: Event) => void;
    inputClickHandler: (event: MouseEvent) => Promise<void>;
    inputFocusHandler: () => void;
    inputInputHandler: (event: Q2InputCustomEvent<EventDetail> & InputEvent) => void;
    inputKeydownHandler: (event: KeyboardEvent) => Promise<void>;
    onCustomDisplayClick: (event: MouseEvent) => void;
    onMutationObserved: () => void;
    onOptionListChange: (event: Q2OptionListCustomEvent<{
        value: string;
        values: OptionValue[];
    }>) => void;
    onPopoverState: ({ detail: { open, action }, }: CustomEvent<{
        open: boolean;
        action: "close" | "select" | "open";
    }>) => void;
    onSelectedDisplayClick: (event: MouseEvent) => void;
    onSelectedDisplayMousedown: (event: MouseEvent) => void;
    openDropdownWithoutActiveElement(): void;
    removeTouchEventListeners: () => void;
    setCustomLabel(): void;
    setStatusMessage(message: any): void;
    shouldClearSearchText(event: KeyboardEvent): boolean;
    showAllOptions: () => void;
    showSelectedOptions: () => void;
    toggleDropdown(): void;
    visibilityToggleKeyDown: (event: KeyboardEvent) => void;
    renderCustomDisplay(): any;
    renderOptionsDropdown(): any;
    renderSelectField(): any;
    renderVisibilityToggle(): any;
    render(): any;
}