/**
 * The `auro-combobox` element provides users with a way to select an option from a list of filtered or suggested options based on user input.
 * @customElement auro-combobox
 *
 * @slot - Default slot for the menu content.
 * @slot {HTMLSlotElement} optionalLabel - Allows overriding the optional display text "(optional)", which appears next to the label.
 * @slot ariaLabel.input.clear - Sets aria-label on clear button
 * @slot ariaLabel.bib.close - Sets aria-label on close button in fullscreen bib
 * @slot bib.fullscreen.headline - Defines the headline to display above menu-options
 * @slot label - Defines the content of the label.
 * @slot helpText - Defines the content of the helpText.
 * @slot displayValue - Allows custom HTML content to display the selected value when the combobox is not focused. Only works with `snowflake` and `emphasized` layouts.
 * @event auroCombobox-valueSet - (Deprecated) Notifies that the component has a new value set.
 * @event input - Notifies that the component has a new value set.
 * @event inputValue - Notifies that the components internal HTML5 input value has changed.
 * @event auroFormElement-validated - Notifies that the component value(s) have been validated.
 */
export class AuroCombobox extends AuroElement {
    static get properties(): {
        /**
         * Defines whether the component will be on lighter or darker backgrounds.
         * @property {'default' | 'inverse'} appearance - The visual appearance of the component.
         * @default 'default'
         */
        appearance: {
            type: StringConstructor;
            reflect: boolean;
        };
        /**
         * An enumerated attribute that defines what the user agent can suggest for autofill. At this time, only `autocomplete="off"` is supported.
         */
        autocomplete: {
            type: StringConstructor;
            reflect: boolean;
        };
        /**
         * If declared, bib's position will be automatically calculated where to appear.
         */
        autoPlacement: {
            type: BooleanConstructor;
            reflect: boolean;
        };
        /**
         * Array of available options to display in the dropdown.
         * This array contains all non-hidden options (e.g., hidden by filtering on input value).
         * @private
         */
        availableOptions: {
            state: boolean;
            type: ArrayConstructor;
            reflect: boolean;
        };
        /**
         * Sets the behavior of the combobox, "filter" or "suggestion".
         * "filter" requires the user to select an option from the menu.
         * "suggestion" allows the user to enter a value not present in the menu options.
         * @type {'filter' | 'suggestion'}
         * @default 'suggestion'
         */
        behavior: "filter" | "suggestion";
        /**
         * When attribute is present auro-menu will apply check marks to selected options.
         */
        checkmark: {
            type: BooleanConstructor;
            reflect: boolean;
        };
        /**
         * If set, disables the combobox.
         */
        disabled: {
            type: BooleanConstructor;
            reflect: boolean;
        };
        /**
         * ID for the dropdown.
         * @private
         */
        dropdownId: {
            type: StringConstructor;
            reflect: boolean;
            attribute: boolean;
        };
        /**
         * Whether or not the dropdown is open.
         * @private
         */
        dropdownOpen: {
            type: BooleanConstructor;
            reflect: boolean;
            attribute: boolean;
        };
        /**
         * If defined, the display value slot content will only mask the HTML5 input element. The inputs label will not be masked.
         */
        dvInputOnly: {
            type: BooleanConstructor;
            reflect: boolean;
        };
        /**
         * When defined, sets persistent validity to `customError` and sets the validation message to the attribute value.
         */
        error: {
            type: StringConstructor;
            reflect: boolean;
        };
        /**
         * Specifies the input mask format.
         */
        format: {
            type: StringConstructor;
            reflect: boolean;
        };
        /** Exposes inputmode attribute for input.  */
        inputmode: {
            type: StringConstructor;
            attribute: boolean;
            reflect: boolean;
        };
        /**
         * Sets the layout of the combobox.
         * @type {'classic' | 'emphasized' | 'snowflake'}
         * @default 'classic'
         */
        layout: "classic" | "emphasized" | "snowflake";
        /**
         * If declared, the popover and trigger will be set to the same width.
         * @private
         */
        matchWidth: {
            type: BooleanConstructor;
            reflect: boolean;
        };
        /**
         * If set, combobox will not filter menuoptions based on input.
         */
        noFilter: {
            type: BooleanConstructor;
            reflect: boolean;
        };
        /**
         * If declared, the bib will NOT flip to an alternate position
         * when there isn't enough space in the specified `placement`.
         */
        noFlip: {
            type: BooleanConstructor;
            reflect: boolean;
        };
        /**
         * If declared, the dropdown will shift its position to avoid being cut off by the viewport.
         */
        shift: {
            type: BooleanConstructor;
            reflect: boolean;
        };
        /**
         * If set, disables auto-validation on blur.
         */
        noValidate: {
            type: BooleanConstructor;
            reflect: boolean;
        };
        /**
         * Gap between the trigger element and bib.
         * @default 0
         */
        offset: {
            type: NumberConstructor;
            reflect: boolean;
        };
        /**
         * DEPRECATED - use `appearance="inverse"` instead.
         */
        onDark: {
            type: BooleanConstructor;
            reflect: boolean;
        };
        /**
         * Specifies the current selected option.
         * @type {HTMLElement}
         */
        optionSelected: HTMLElement;
        /**
         * If declared, selecting a menu option will not change the input value. By doing so,
         * the current menu filter will be preserved and the user can continue from their last
         * filter state. It is recommended to use this in combination with the `displayValue` slot.
         */
        persistInput: {
            type: BooleanConstructor;
            reflect: boolean;
        };
        /**
         * Position where the bib should appear relative to the trigger.
         * @type {'top' | 'right' | 'bottom' | 'left' | 'bottom-start' | 'top-start' | 'top-end' | 'right-start' | 'right-end' | 'bottom-end' | 'left-start' | 'left-end'}
         * @default 'bottom-start'
         */
        placement: "top" | "right" | "bottom" | "left" | "bottom-start" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-end" | "left-start" | "left-end";
        /**
         * Define custom placeholder text, only supported by date input formats.
         */
        placeholder: {
            type: StringConstructor;
            reflect: boolean;
        };
        /**
         * Populates the `required` attribute on the input. Used for client-side validation.
         */
        required: {
            type: BooleanConstructor;
            reflect: boolean;
        };
        /**
         * Sets a custom help text message to display for all validityStates.
         */
        setCustomValidity: {
            type: StringConstructor;
        };
        /**
         * Custom help text message to display when validity = `customError`.
         */
        setCustomValidityCustomError: {
            type: StringConstructor;
        };
        /**
         * Custom help text message to display when validity = `valueMissing`.
         */
        setCustomValidityValueMissing: {
            type: StringConstructor;
        };
        /**
         * Custom help text message to display when validity = `valueMissing` due to the user not choosing a menu option when behavior = "filter".
         */
        setCustomValidityValueMissingFilter: {
            type: StringConstructor;
        };
        /**
         * Indicates whether the combobox is in a dirty state (has been interacted with).
         * @private
         */
        touched: {
            type: BooleanConstructor;
            reflect: boolean;
            attribute: boolean;
        };
        /**
         * If set, the `icon` attribute will be applied to the trigger `auro-input` element.
         */
        triggerIcon: {
            type: BooleanConstructor;
            reflect: boolean;
        };
        /**
         * Applies the defined value as the type attribute on `auro-input`.
         */
        type: {
            type: StringConstructor;
            reflect: boolean;
        };
        /**
         * Specifies the value of the input element within the combobox.
         */
        typedValue: {
            type: StringConstructor;
            reflect: boolean;
        };
        /**
         * Specifies the `validityState` this element is in.
         */
        validity: {
            type: StringConstructor;
            reflect: boolean;
        };
        /**
         * Value selected for the dropdown menu.
         */
        value: {
            type: StringConstructor;
        };
        /**
         * If declared, make bib.fullscreen.headline in HeadingDisplay.
         * Otherwise, Heading 600
         */
        largeFullscreenHeadline: {
            type: BooleanConstructor;
            reflect: boolean;
        };
        /**
         * Defines the screen size breakpointat which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.
         *
         * When expanded, the dropdown will automatically display in fullscreen mode
         * if the screen size is equal to or smaller than the selected breakpoint.
         * @type {'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'disabled'}
         * @default 'sm'
         */
        fullscreenBreakpoint: "xs" | "sm" | "md" | "lg" | "xl" | "disabled";
        /**
         * Specifies the currently active option.
         * @private
         */
        optionActive: {
            type: ObjectConstructor;
            reflect: boolean;
            attribute: boolean;
        };
        /**
         * Deferred aria-expanded state for the trigger input.
         * Delays the "true" transition so VoiceOver finishes its character echo
         * before announcing "expanded".
         * @private
         */
        triggerExpandedState: {
            type: BooleanConstructor;
            reflect: boolean;
            attribute: boolean;
        };
    };
    static get styles(): import("lit").CSSResult[];
    /**
     * This will register this element with the browser.
     * @param {string} [name='auro-combobox'] - The name of the element that you want to register.
     *
     * @example
     * AuroCombobox.register('custom-combobox') // this will register this element to <custom-combobox/>
     *
     */
    static register(name?: string): void;
    /**
     * @private
     * @returns {void} Internal defaults.
     */
    private _initializeDefaults;
    appearance: string;
    disabled: boolean;
    msgSelectionMissing: string;
    noFilter: boolean;
    noValidate: boolean;
    optionActive: any;
    persistInput: boolean;
    required: boolean;
    value: any;
    typedValue: any;
    behavior: string;
    clearBtnFocused: boolean;
    checkmark: boolean;
    dvInputOnly: boolean;
    fullscreenBreakpoint: string;
    matchWidth: boolean;
    shape: string;
    size: string;
    triggerIcon: boolean;
    placement: string;
    offset: number;
    noFlip: boolean;
    shift: boolean;
    autoPlacement: boolean;
    dropdownTag: any;
    bibtemplateTag: any;
    inputTag: any;
    helpTextTag: any;
    availableOptions: any[] | any[];
    dropdownId: any;
    dropdownOpen: any;
    triggerExpandedState: boolean;
    _expandedTimeout: NodeJS.Timeout;
    _inFullscreenTransition: boolean;
    errorMessage: any;
    isHiddenWhileLoading: boolean;
    largeFullscreenHeadline: boolean;
    onDark: boolean;
    optionSelected: any;
    runtimeUtils: any;
    touched: boolean;
    validation: AuroFormValidation;
    validity: any;
    /**
     * Returns the current value of the input element within the combobox.
     * @returns {string|undefined} The value of the input element, or undefined if the input is not present.
     */
    get inputValue(): string | undefined;
    /**
     * Checks if the element is valid.
     * @returns {boolean} - Returns true if the element is valid, false otherwise.
     */
    isValid(): boolean;
    /**
     * Mark the first available (non-hidden), enabled option as `active`.
     * @private
     * @returns {void}
     */
    private activateFirstEnabledAvailableOption;
    /**
     * Mark the last available (non-hidden), enabled option as `active`.
     * @private
     * @returns {void}
     */
    private activateLastEnabledAvailableOption;
    /**
     * Updates the filter for the available options based on the input value.
     * @private
     */
    private updateFilter;
    noMatchOption: any;
    /**
     * Syncs the values and states of this component, the input, and the menu, including this.optionSelected and this.menu.optionSelected.
     * @private
     * @returns {void}
     */
    private syncValuesAndStates;
    /**
     * Update displayValue or input.value, it's called when making a selection.
     * @param {string} label - The label of the selected option.
     * @private
     */
    private updateTriggerTextDisplay;
    /**
     * Processes hidden state of all menu options and determines if there are any available options not hidden.
     * @private
     * @returns {void}
     */
    private handleMenuOptions;
    /**
     * Determines the element error state based on the `required` attribute and input value.
     * @private
     * @returns {void}
     */
    private generateOptionsArray;
    options: any;
    /**
     * Hides the dropdown bib if its open.
     * @returns {void}
     */
    hideBib(): void;
    /**
     * Shows the dropdown bib if there are options to show.
     * @returns {void}
     */
    showBib(): void;
    /**
     * Binds all behavior needed to the dropdown after rendering.
     * @private
     * @returns {void}
     */
    private configureDropdown;
    bibtemplate: any;
    inputInBib: any;
    /**
     * @private
     */
    private setInputFocus;
    /**
     * @private
     */
    private setClearBtnFocus;
    /**
     * @private
     */
    private setTriggerInputFocus;
    /**
     * Suppresses or restores dialog semantics on the bib's dialog element.
     * On desktop (non-fullscreen), VoiceOver verbosely announces "listbox inside
     * of a dialog" which disrupts combobox usage. Setting role="presentation"
     * suppresses this. In fullscreen mode, dialog semantics are restored.
     * @private
     */
    private updateBibDialogRole;
    /**
     * Update menu to default for fullscreen bib, otherwise to this.size and this.shape.
     * @private
     */
    private updateMenuShapeSize;
    /**
     * Returns the shadow root containing the live region for screen reader announcements.
     * When the bib is open in fullscreen modal mode, everything outside the <dialog>
     * is inert, so we target the bib's own shadow root instead of the host's.
     * @private
     * @returns {ShadowRoot}
     */
    private _getAnnouncementRoot;
    /**
     * Binds all behavior needed to the menu after rendering.
     * @private
     * @returns {void}
     */
    private configureMenu;
    menu: Element;
    defaultMenuShape: string;
    /**
     * Binds all behavior needed to the input after rendering.
     * @private
     * @returns {void}
     */
    private configureInput;
    /**
     * Manages the visibility of the dropdown based on loading state changes.
     *
     * This method listens for loading state changes and adjusts the visibility of the dropdown accordingly.
     * If the dropdown is visible and loading is true without any loading placeholders, it hides the dropdown
     * and sets a flag to indicate it is hidden while loading. If loading is false and the dropdown was previously
     * hidden, it checks if the active element is within the dropdown and shows it again if true.
     *
     * @private
     * @param {CustomEvent} event - The event object containing details about the loading state change.
     * @param {boolean} event.detail.loading - Indicates whether the menu is currently loading.
     * @param {boolean} event.detail.hasLoadingPlaceholder - Indicates if there are loading placeholders present.
     * @returns {void}
     */
    private handleMenuLoadingChange;
    /**
     * Handle changes to the input value and trigger changes that should result.
     * @private
     * @param {Event} event - The input event triggered by the input element.
     * @returns {void}
     */
    private handleInputValueChange;
    _syncingBibValue: boolean;
    /**
     * Binds all behavior needed to the combobox after rendering.
     * @private
     * @returns {void}
     */
    private configureCombobox;
    menus: Element[];
    firstUpdated(): void;
    dropdown: any;
    input: any;
    /**
     * Focuses the combobox trigger input.
     * @returns {void}
     */
    focus(): void;
    /**
     * Sets the menu value if menu is available.
     * @param {string} value - The value to set on the menu.
     * @returns {void}
     */
    setMenuValue(value: string): void;
    /**
     * Resets component to initial state.
     * @returns {void}
     */
    reset(): void;
    /**
     * Clears the current value of the combobox.
     * @returns {void}
     */
    clear(): void;
    /**
     * Validates value.
     * @param {boolean} [force=false] - Whether to force validation.
     */
    validate(force?: boolean): void;
    updated(changedProperties: any): void;
    hasValue: boolean;
    /**
     * Applies slotted nodes to a target element with a new slot name.
     * @private
     * @param {HTMLSlotElement} slot - The slot element containing the nodes to apply.
     * @param {HTMLElement} target - The target element to apply the nodes to.
     * @param {string} newSlotName - The new slot name for the applied nodes.
     * @returns {void}
     */
    private transportAssignedNodes;
    /**
     * Updates the active option in the menu.
     * @param {number} index - Index of the option to make active.
     */
    updateActiveOption(index: number): void;
    /**
     * Watch for slot changes and recalculate the menuoptions.
     * @private
     * @param {Event} event - `slotchange` event.
     * @returns {void}
     */
    private handleSlotChange;
    render(): import("lit-html").TemplateResult;
}
import { AuroElement } from '../../layoutElement/src/auroElement.js';
import AuroFormValidation from '@aurodesignsystem/form-validation';