import type { TemplateResult } from '../../../../Dom/Html';
import { type IClearable } from '../../../Behaviors/Clearable';
import { type IDropDownable } from '../../../Behaviors/DropDownable';
import { type IInvalidable } from '../../../Behaviors/Invalidable';
import { ISlottable } from '../../../Behaviors/Slottable';
import { KeyboardController } from '../../../Controllers/KeyboardController';
import { FloatingSync } from '../../../Types/FloatingSync';
import { TextAlignment } from '../../../Types/TextAlignment';
import { InputBaseElement } from '../Abstracts/InputBase';
import { AutoCompleteBoxElementIntl } from './AutoCompleteBoxElementIntl';
import type { IAutoCompleteBoxElementProps } from './IAutoCompleteBoxElementProps';
declare const AutoCompleteBoxElement_base: import("../../../../Index").ControlBehaviorReturn<import("../../../../Index").ControlBehaviorReturn<import("../../../../Index").ControlBehaviorReturn<import("../../../../Index").ControlBehaviorReturn<import("../../../../Index").ControlBehaviorReturn<import("../../../../Index").ControlBehaviorReturn<import("../../../../Index").ControlBehaviorReturn<import("../../../../Index").ControlBehaviorReturn<import("../../../../Index").ControlBehaviorReturn<(abstract new (...args: Array<any>) => import("../../../Behaviors/Themeable").IThemeableProps) & (abstract new (...args: Array<any>) => import("../../../Behaviors/AutoCompleteable").IAutoCompleteableProps & import("../../../Behaviors/AutoCompleteable").IAutoCompletableEvents & import("../../../Behaviors/AutoCompleteable").IAutoCompletable) & typeof InputBaseElement & import("../../../Behaviors/Themeable").IThemeableCtor, import("../../../Behaviors/Valueable").IValueableProps<unknown>>, import("../../../Behaviors/Disableable").IDisableableProps>, IInvalidable & import("../../../Behaviors/Invalidable").IInvalidableProps<unknown>>, import("../../../Behaviors/Clearable").IClearableProps & import("../../../Behaviors/Clearable").IClearableEvents & IClearable>, import("../../../Behaviors/Labelable").ILabelableProps>, import("../../../Behaviors/Variantable").IVariantableProps>, import("../../../Behaviors/Appearanceable").IAppearanceableProps>, import("../../../Behaviors/DropDownable").IDropDownableProps & IDropDownable>, import("../../../Behaviors/Slottable").ISlottableProps & ISlottable>;
/**
 * Auto Complete Box - An input field with auto-completion functionality for enhanced user experience.
 *
 * @description
 * The Auto Complete Box component provides real-time suggestions as users type, helping them quickly find and select
 * from a list of predefined options. It combines the functionality of a text input with a dropdown list of suggestions,
 * making data entry faster and more accurate.
 *
 * This component supports both synchronous and asynchronous item providers, making it ideal for:
 * - Search fields with server-side search
 * - Font family pickers (with Google Fonts or custom providers)
 * - Location/address inputs
 * - Any scenario where users need to select from a large or dynamic set of possible values
 *
 * @name Auto Complete Box
 * @element mosaik-autocompletebox
 * @category Inputs
 *
 * @slot prefix - Content placed before the input value.
 * @slot suffix - Content placed after the input value.
 *
 * @csspart input - The text input field.
 * @csspart portal - The portal container for the dropdown.
 * @csspart popup - The floating popup container for the suggestions.
 * @csspart list - The suggestions list container.
 * @csspart item - Individual suggestion items.
 * @csspart loading - The loading indicator.
 * @csspart empty - The empty/no results state.
 *
 * @cssprop {Color} --auto-complete-box-background-color - The background color.
 * @cssprop {Color} --auto-complete-box-border-color - The border color.
 * @cssprop {String} --auto-complete-box-border-radius - The border radius.
 * @cssprop {String} --auto-complete-box-border-style - The border style.
 * @cssprop {String} --auto-complete-box-border-width - The border width.
 * @cssprop {Color} --auto-complete-box-foreground-color - The foreground color.
 * @cssprop {String} --auto-complete-box-font-family - The font family.
 * @cssprop {String} --auto-complete-box-font-size - The font size.
 * @cssprop {String} --auto-complete-box-font-weight - The font weight.
 * @cssprop {String} --auto-complete-box-gap - The gap between elements.
 * @cssprop {String} --auto-complete-box-padding-top - The padding top.
 * @cssprop {String} --auto-complete-box-padding-right - The padding right.
 * @cssprop {String} --auto-complete-box-padding-bottom - The padding bottom.
 * @cssprop {String} --auto-complete-box-padding-left - The padding left.
 * @cssprop {String} --auto-complete-box-shadow - The shadow.
 * @cssprop {String} --auto-complete-box-transition-duration - The transition duration.
 * @cssprop {String} --auto-complete-box-width - The width.
 *
 * @fires cleared {ClearedEvent} - Fired when the value is cleared.
 * @fires autoCompletePopulating {AutoCompletePopulatingEvent} - Fired when the component starts loading suggestions.
 * @fires autoCompletePopulated {AutoCompletePopulatedEvent} - Fired when the suggestions have been loaded.
 *
 * @dependency mosaik-textbox - Used for the input field.
 * @dependency mosaik-button - Used for clear and dropdown buttons.
 * @dependency mosaik-portal - Provides a portal host for rendering the suggestion popup.
 * @dependency mosaik-floating - Positions the suggestion popup relative to the host element.
 * @dependency mosaik-focus-ring - Provides focus ring for accessibility.
 *
 * @example
 * Basic usage with static items (set via JavaScript):
 * ```html
 * <mosaik-autocompletebox
 *   id="country-picker"
 *   label="Country"
 *   placeholder="Search countries...">
 * </mosaik-autocompletebox>
 * <script>
 *   document.getElementById('country-picker').items = ['Germany', 'France', 'Italy', 'Spain'];
 * </script>
 * ```
 *
 * @example
 * With async items provider (set via JavaScript):
 * ```html
 * <mosaik-autocompletebox
 *   id="font-picker"
 *   label="Font Family"
 *   placeholder="Search fonts...">
 * </mosaik-autocompletebox>
 * <script>
 *   document.getElementById('font-picker').itemsProvider = async (request) => {
 *     const response = await fetch(`/api/fonts?q=${request.searchText}`, { signal: request.signal });
 *     return response.json();
 *   };
 * </script>
 * ```
 *
 * @public
 */
export declare class AutoCompleteBoxElement extends AutoCompleteBoxElement_base implements IAutoCompleteBoxElementProps, IClearable, IInvalidable, IDropDownable, ISlottable {
    private static _idCounter;
    private _inputElement;
    private _floatingElement;
    private readonly _clickOutsideController;
    private readonly _intlController;
    private readonly _keyboardController;
    private readonly _inputId;
    private readonly _listboxId;
    private readonly _filterInputId;
    private _text;
    private _placeholder;
    private _filterPlaceholder;
    private _filterText;
    private _required;
    private _readonly;
    private _textAlign;
    private _dropDownSync;
    private _highlightedIndex;
    private _renderItem;
    /**
     * @public
     */
    constructor();
    /**
     * Returns the `is` property.
     * The `is` property represents natural name of this element.
     *
     * @public
     * @static
     * @readonly
     */
    static get is(): string;
    /**
     * Gets the identifier of the input element.
     *
     * @public
     * @readonly
     */
    get inputId(): string;
    /**
     * Gets the identifier of the suggestion list element.
     *
     * @public
     * @readonly
     */
    get listboxId(): string;
    /**
     * Gets the identifier of the filter input element.
     *
     * @public
     * @readonly
     */
    get filterInputId(): string;
    /**
     * Gets or sets the `text` property.
     * This is the current text value displayed in the input field.
     *
     * @public
     * @attr
     */
    get text(): string;
    set text(value: string);
    /**
     * Gets or sets the `placeholder` property.
     *
     * @public
     * @attr
     */
    get placeholder(): string;
    set placeholder(value: string);
    /**
     * Gets or sets the `filterPlaceholder` property.
     *
     * @public
     * @attr
     */
    get filterPlaceholder(): string;
    set filterPlaceholder(value: string);
    /**
     * Gets or sets the `filterText` property.
     * This is the current text value in the filter input field inside the popup.
     *
     * @public
     * @attr
     */
    get filterText(): string;
    set filterText(value: string);
    /**
     * Gets or sets the `required` property.
     *
     * @public
     * @attr
     */
    get required(): boolean;
    set required(value: boolean);
    /**
     * Gets or sets the `readonly` property.
     *
     * @public
     * @attr
     */
    get readonly(): boolean;
    set readonly(value: boolean);
    /**
     * Gets or sets the `textAlign` property.
     *
     * @public
     * @attr
     */
    get textAlign(): TextAlignment;
    set textAlign(value: TextAlignment);
    /**
     * Gets or sets the size synchronization mode for the dropdown popup.
     *
     * @public
     * @attr
     */
    get dropDownSync(): FloatingSync;
    set dropDownSync(value: FloatingSync);
    /**
     * Gets the index of the highlighted suggestion.
     *
     * @public
     * @readonly
     */
    get highlightedIndex(): number;
    /**
     * Gets a value indicating whether the suggestion list should be rendered.
     *
     * @public
     * @readonly
     */
    get shouldRenderSuggestions(): boolean;
    /**
     * Gets a value indicating whether suggestions are available.
     *
     * @public
     * @readonly
     */
    get hasSuggestions(): boolean;
    /**
     * Gets the active descendant identifier for accessibility.
     *
     * @public
     * @readonly
     */
    get activeDescendantId(): string | null;
    /**
     * Gets a value indicating whether the no-results message should be displayed.
     *
     * @public
     * @readonly
     */
    get shouldShowNoResultsMessage(): boolean;
    /**
     * Gets a value indicating whether the loading state should be displayed.
     *
     * @public
     * @readonly
     */
    get shouldShowLoadingState(): boolean;
    /**
     * Returns the `intl` property.
     *
     * @public
     * @readonly
     */
    get intl(): AutoCompleteBoxElementIntl;
    /**
     * Gets or sets the custom render function for suggestion items.
     * When provided, this function is used to render each item in the suggestion list.
     *
     * @example
     * ```typescript
     * element.renderItem = (item, index) => html`
     *   <span style="font-family: '${item.family}'">${item.family}</span>
     * `;
     * ```
     *
     * @public
     */
    get renderItem(): ((item: unknown, index: number) => TemplateResult | string) | null;
    set renderItem(value: ((item: unknown, index: number) => TemplateResult | string) | null);
    /**
     * @protected
     */
    protected get keyboard(): KeyboardController;
    /**
     * @public
     * @override
     */
    checkValidity(): boolean;
    /**
     * @public
     * @override
     */
    connectedCallback(): void;
    /**
     * @public
     */
    onFloatingActiveChanged(isActive: boolean): void;
    /**
     * @public
     * @override
     */
    onSelectCallback(item: unknown): void;
    /**
     * @public
     * @override
     */
    disconnectedCallback(): void;
    /**
     * @public
     */
    onFilterInput(event: Event): void;
    /**
     * @public
     */
    onSuggestionMouseDown(event: MouseEvent): void;
    /**
     * @public
     */
    onKeyDown(event: KeyboardEvent): void;
    /**
     * @public
     */
    onCaretClick(event: Event): void;
    /**
     * Gets the value for an item.
     * If `valueMemberPath` is specified, returns the value of that path.
     * Otherwise, returns the display value.
     *
     * @public
     * @override
     * @param item - The item to get the value for.
     */
    getItemValue(item: unknown): string;
    /**
     * @public
     */
    onSuggestionClick(index: number): void;
    /**
     * @public
     */
    renderSuggestionItem(item: unknown, index: number): TemplateResult | string;
    /**
     * @public
     */
    renderHighlightedItem(item: unknown): TemplateResult | string;
    /**
     * Gets the identifier for the suggestion option at the specified index.
     *
     * @public
     * @param index - The index of the option.
     */
    getOptionId(index: number): string;
    /**
     * @public
     * @override
     */
    clear(force?: boolean): boolean;
    /**
     * @protected
     * @override
     */
    protected onApplyTemplate(): void;
    /**
     * Synchronizes internal state when the dropdown open state changes.
     *
     * @protected
     */
    protected onDropDownOpenChanged(_previous?: boolean, next?: boolean): void;
    /**
     * @protected
     */
    protected onDisabledChanged(_previous: boolean, next: boolean): void;
    private selectHighlighted;
    private moveHighlight;
    private setHighlightedIndex;
}
/**
 * Namespace for AutoCompleteBoxElement types.
 *
 * @public
 * @deprecated Use AutoCompleteBoxElementProps type alias instead.
 */
export declare namespace AutoCompleteBoxElement {
    type Props = IAutoCompleteBoxElementProps;
}
/**
 * @public
 */
declare global {
    interface HTMLElementTagNameMap {
        'mosaik-autocompletebox': AutoCompleteBoxElement;
    }
}
export {};
//# sourceMappingURL=AutoCompleteBoxElement.d.ts.map