// #region Imports
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
var AutoCompleteBoxElement_1;
import { html } from '../../../../Dom/Html';
import { IntlController } from '../../../../Intl/IntlController';
import { Appearanceable } from '../../../Behaviors/Appearanceable';
import { AutoCompleteable } from '../../../Behaviors/AutoCompleteable';
import { Clearable } from '../../../Behaviors/Clearable';
import { Disableable } from '../../../Behaviors/Disableable';
import { DropDownable } from '../../../Behaviors/DropDownable';
import { Invalidable } from '../../../Behaviors/Invalidable';
import { Labelable } from '../../../Behaviors/Labelable';
import { Slottable } from '../../../Behaviors/Slottable';
import { Themeable } from '../../../Behaviors/Themeable';
import { Valueable } from '../../../Behaviors/Valueable';
import { Variantable } from '../../../Behaviors/Variantable';
import { ClickOutsideController } from '../../../Controllers/ClickOutsideController';
import { KeyboardController } from '../../../Controllers/KeyboardController';
import { Attribute } from '../../../Decorators/AttributeDecorator';
import { Component } from '../../../Decorators/ComponentDecorator';
import { Property } from '../../../Decorators/PropertyDecorator';
import { Watch } from '../../../Decorators/WatchDecorator';
import { FloatingSync } from '../../../Types/FloatingSync';
import { Key } from '../../../Types/Key';
import { Placement } from '../../../Types/Placement';
import { Strategy } from '../../../Types/Strategy';
import { TextAlignment } from '../../../Types/TextAlignment';
import { ButtonElement } from '../../Buttons/Button/ButtonElement';
import { FloatingElement } from '../../Primitives/Floating/FloatingElement';
import { FocusRingElement } from '../../Primitives/FocusRing/FocusRingElement';
import { PortalElement } from '../../Primitives/Portal/PortalElement';
import { EmptyStateElement } from '../../States/Empty/EmptyStateElement';
import { InputBaseElement } from '../Abstracts/InputBase';
import { SelectItemElement } from '../Select/SelectItemElement';
import { TextBoxElement } from '../TextBox/TextBoxElement';
import { AutoCompleteBoxElementIntl } from './AutoCompleteBoxElementIntl';
import { autoCompleteBoxElementTemplate } from './AutoCompleteBoxElementTemplate';
import { autoCompleteBoxElementCosmopolitanStyle } from './Themes/AutoCompleteBoxElement.Cosmopolitan';
import { autoCompleteBoxElementJoyStyle } from './Themes/AutoCompleteBoxElement.Joy';
import { autoCompleteBoxElementMemphisStyle } from './Themes/AutoCompleteBoxElement.Memphis';
// #endregion
/**
 * 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 caret - The caret part.
 * @csspart empty - The empty/no results state.
 * @csspart filter - The filter part.
 * @csspart input - The text input field.
 * @csspart loading - The loading indicator.
 * @csspart menu - The menu part.
 * @csspart menuItem - The menuItem part.
 * @csspart popup - The floating popup container for the suggestions.
 * @csspart portal - The portal container for the dropdown.
 *
 * @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 {String} --auto-complete-box-focus-ring-active-width - The complete box focus ring active width CSS custom property.
 * @cssprop {String} --auto-complete-box-focus-ring-color - The complete box focus ring color CSS custom property.
 * @cssprop {String} --auto-complete-box-focus-ring-inward-offset - The complete box focus ring inward offset CSS custom property.
 * @cssprop {String} --auto-complete-box-focus-ring-outward-offset - The complete box focus ring outward offset CSS custom property.
 * @cssprop {String} --auto-complete-box-font-family - The font family.
 * @cssprop {String} --auto-complete-box-font-letter-spacing - The complete box font letter spacing CSS custom property.
 * @cssprop {String} --auto-complete-box-font-line-height - The complete box font line height CSS custom property.
 * @cssprop {String} --auto-complete-box-font-size - The font size.
 * @cssprop {String} --auto-complete-box-font-text-decoration - The complete box font text decoration CSS custom property.
 * @cssprop {String} --auto-complete-box-font-text-transform - The complete box font text transform CSS custom property.
 * @cssprop {String} --auto-complete-box-font-weight - The font weight.
 * @cssprop {Color} --auto-complete-box-foreground-color - The foreground color.
 * @cssprop {String} --auto-complete-box-gap - The gap between elements.
 * @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-padding-right - The padding right.
 * @cssprop {String} --auto-complete-box-padding-top - The padding top.
 * @cssprop {String} --auto-complete-box-shadow - The shadow.
 * @cssprop {String} --auto-complete-box-shadow-blur - The complete box shadow blur CSS custom property.
 * @cssprop {String} --auto-complete-box-shadow-color - The complete box shadow color CSS custom property.
 * @cssprop {String} --auto-complete-box-shadow-offset-x - The complete box shadow offset x CSS custom property.
 * @cssprop {String} --auto-complete-box-shadow-offset-y - The complete box shadow offset y CSS custom property.
 * @cssprop {String} --auto-complete-box-shadow-spread - The complete box shadow spread CSS custom property.
 * @cssprop {String} --auto-complete-box-transition-duration - The transition duration.
 * @cssprop {String} --auto-complete-box-transition-mode - The complete box transition mode CSS custom property.
 * @cssprop {String} --auto-complete-box-transition-property - The complete box transition property CSS custom property.
 * @cssprop {String} --auto-complete-box-translate - The complete box translate CSS custom property.
 *
 * @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-busy-state - The Busy State element.
 * @dependency mosaik-button - Used for clear and dropdown buttons.
 * @dependency mosaik-empty-state - The Empty State element.
 * @dependency mosaik-floating - Positions the suggestion popup relative to the host element.
 * @dependency mosaik-menu - The Menu element.
 * @dependency mosaik-menu-item - The Menu Item element.
 * @dependency mosaik-portal - Provides a portal host for rendering the suggestion popup.
 * @dependency mosaik-textbox - Used for the input field.
 *
 * @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
 */
let AutoCompleteBoxElement = class AutoCompleteBoxElement extends Slottable(DropDownable(Appearanceable(Variantable(Labelable(Clearable(Invalidable(Disableable(Valueable(Themeable(AutoCompleteable(InputBaseElement))))))))))) {
    static { AutoCompleteBoxElement_1 = this; }
    // #region Fields
    static _idCounter = 0;
    _inputElement;
    _floatingElement;
    _clickOutsideController;
    _intlController;
    _keyboardController;
    _inputId;
    _listboxId;
    _filterInputId;
    _text;
    _placeholder;
    _filterPlaceholder;
    _filterText;
    _required;
    _readonly;
    _textAlign;
    _dropDownSync;
    _highlightedIndex;
    _renderItem;
    // #endregion
    // #region Ctor
    /**
     * @public
     */
    constructor() {
        super();
        this._inputId = `mosaik-autocomplete-input-${++AutoCompleteBoxElement_1._idCounter}`;
        this._listboxId = `mosaik-autocomplete-list-${AutoCompleteBoxElement_1._idCounter}`;
        this._filterInputId = `mosaik-autocomplete-filter-${AutoCompleteBoxElement_1._idCounter}`;
        this._text = '';
        this._placeholder = '';
        this._filterPlaceholder = '';
        this._filterText = '';
        this._required = false;
        this._readonly = false;
        this._textAlign = TextAlignment.Left;
        this._dropDownSync = FloatingSync.Width;
        this._highlightedIndex = -1;
        this._renderItem = null;
        this.dropDownPlacement = Placement.BottomStart;
        this.dropDownStrategy = Strategy.Fixed;
        this.dropDownDistance = 8;
        this.dropDownSkidding = 0;
        this.dropDownMaxHeight = '280px';
        this._clickOutsideController = new ClickOutsideController(this, {
            ignored: () => [this._floatingElement],
            skipInitial: true,
            callback: () => this.close()
        });
        this._intlController = new IntlController(this, {
            factory: () => new AutoCompleteBoxElementIntl()
        });
        this._keyboardController = new KeyboardController(this);
    }
    // #endregion
    // #region Properties
    /**
     * Returns the `is` property.
     * The `is` property represents natural name of this element.
     *
     * @public
     * @static
     * @readonly
     */
    static get is() {
        return 'mosaik-autocompletebox';
    }
    /**
     * Gets the identifier of the input element.
     *
     * @public
     * @readonly
     */
    get inputId() {
        return this._inputId;
    }
    /**
     * Gets the identifier of the suggestion list element.
     *
     * @public
     * @readonly
     */
    get listboxId() {
        return this._listboxId;
    }
    /**
     * Gets the identifier of the filter input element.
     *
     * @public
     * @readonly
     */
    get filterInputId() {
        return this._filterInputId;
    }
    /**
     * Gets or sets the `text` property.
     * This is the current text value displayed in the input field.
     *
     * @public
     * @attr
     */
    get text() {
        return this._text;
    }
    set text(value) {
        if (this._text !== value) {
            this._text = value;
            this.requestUpdate('text');
        }
    }
    /**
     * Gets or sets the `placeholder` property.
     *
     * @public
     * @attr
     */
    get placeholder() {
        return this._placeholder;
    }
    set placeholder(value) {
        if (this._placeholder !== value) {
            this._placeholder = value;
            this.requestUpdate('placeholder');
        }
    }
    /**
     * Gets or sets the `filterPlaceholder` property.
     *
     * @public
     * @attr
     */
    get filterPlaceholder() {
        return this._filterPlaceholder;
    }
    set filterPlaceholder(value) {
        if (this._filterPlaceholder !== value) {
            this._filterPlaceholder = value;
            this.requestUpdate('filterPlaceholder');
        }
    }
    /**
     * Gets or sets the `filterText` property.
     * This is the current text value in the filter input field inside the popup.
     *
     * @public
     * @attr
     */
    get filterText() {
        return this._filterText;
    }
    set filterText(value) {
        if (this._filterText !== value) {
            this._filterText = value;
            this.requestUpdate('filterText');
            this.updateSearchText(value);
        }
    }
    /**
     * Gets or sets the `required` property.
     *
     * @public
     * @attr
     */
    get required() {
        return this._required;
    }
    set required(value) {
        if (this._required !== value) {
            this._required = value;
            this.requestUpdate('required');
        }
    }
    /**
     * Gets or sets the `readonly` property.
     *
     * @public
     * @attr
     */
    get readonly() {
        return this._readonly;
    }
    set readonly(value) {
        if (this._readonly !== value) {
            this._readonly = value;
            this.requestUpdate('readonly');
        }
    }
    /**
     * Gets or sets the `textAlign` property.
     *
     * @public
     * @attr
     */
    get textAlign() {
        return this._textAlign;
    }
    set textAlign(value) {
        if (this._textAlign !== value) {
            this._textAlign = value;
            this.requestUpdate('textAlign');
        }
    }
    /**
     * Gets or sets the size synchronization mode for the dropdown popup.
     *
     * @public
     * @attr
     */
    get dropDownSync() {
        return this._dropDownSync;
    }
    set dropDownSync(value) {
        if (this._dropDownSync !== value) {
            this._dropDownSync = value;
            this.requestUpdate('dropDownSync');
        }
    }
    /**
     * Gets the index of the highlighted suggestion.
     *
     * @public
     * @readonly
     */
    get highlightedIndex() {
        return this._highlightedIndex;
    }
    /**
     * Gets a value indicating whether the suggestion list should be rendered.
     *
     * @public
     * @readonly
     */
    get shouldRenderSuggestions() {
        if (!this.isDropDownOpen) {
            return false;
        }
        return this.hasSuggestions || this.shouldShowNoResultsMessage || this.shouldShowLoadingState;
    }
    /**
     * Gets a value indicating whether suggestions are available.
     *
     * @public
     * @readonly
     */
    get hasSuggestions() {
        return this.filteredItems.length > 0;
    }
    /**
     * Gets the active descendant identifier for accessibility.
     *
     * @public
     * @readonly
     */
    get activeDescendantId() {
        return this._highlightedIndex >= 0
            ? this.getOptionId(this._highlightedIndex)
            : null;
    }
    /**
     * Gets a value indicating whether the no-results message should be displayed.
     *
     * @public
     * @readonly
     */
    get shouldShowNoResultsMessage() {
        return !this.isPopulating && this._filterText.length >= this.minimumPrefixLength && this.filteredItems.length === 0;
    }
    /**
     * Gets a value indicating whether the loading state should be displayed.
     *
     * @public
     * @readonly
     */
    get shouldShowLoadingState() {
        return this.isPopulating && !this.hasSuggestions;
    }
    /**
     * Gets or sets the `intl` property.
     *
     * @public
     */
    get intl() {
        return this._intlController.intl;
    }
    set intl(value) {
        this._intlController.provide(value);
    }
    /**
     * 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() {
        return this._renderItem;
    }
    set renderItem(value) {
        if (this._renderItem !== value) {
            this._renderItem = value;
            this.requestUpdate('renderItem');
        }
    }
    /**
     * @protected
     */
    get keyboard() {
        return this._keyboardController;
    }
    // #endregion
    // #region Methods
    /**
     * @public
     * @override
     */
    checkValidity() {
        return this.shadowRoot
            ? this._inputElement.checkValidity()
            : true;
    }
    /**
     * @public
     * @override
     */
    connectedCallback() {
        super.connectedCallback();
        this.keyboard
            .add([Key.UpArrow], () => this.moveHighlight(-1), undefined, { preventDefault: true })
            .add([Key.DownArrow], () => this.moveHighlight(1), undefined, { preventDefault: true })
            .add([Key.Home], () => this.setHighlightedIndex(0), () => this.filteredItems.length > 0, { preventDefault: true })
            .add([Key.End], () => this.setHighlightedIndex(this.filteredItems.length - 1), () => this.filteredItems.length > 0, { preventDefault: true })
            .add([Key.Enter], () => this.selectHighlighted(), () => this._highlightedIndex >= 0, { preventDefault: true })
            .add([Key.Tab], () => this.selectHighlighted(), () => this._highlightedIndex >= 0)
            .add([Key.Escape], () => {
            if (this.isDropDownOpen) {
                this.close();
            }
        }, undefined, { preventDefault: true });
    }
    /**
     * @internal
     */
    onFilterCallback(items) {
        super.onFilterCallback?.(items);
        this._highlightedIndex = items.length > 0 ? 0 : -1;
        if (!this.isDropDownOpen && (items.length > 0 || this.shouldShowNoResultsMessage)) {
            this.open();
        }
    }
    /**
     * @public
     */
    onFloatingActiveChanged(isActive) {
        if (!isActive) {
            this.close();
        }
    }
    /**
     * @public
     * @override
     */
    onSelectCallback(item) {
        this.text = this.getDisplayValue(item);
        this.close();
    }
    /**
     * @public
     * @override
     */
    disconnectedCallback() {
        this._clickOutsideController.unobserve();
        super.disconnectedCallback();
    }
    /**
     * @public
     */
    onFilterInput(event) {
        if (!this.disabled) {
            this.filterText = event.target.value || '';
        }
    }
    /**
     * @public
     */
    onSuggestionMouseDown(event) {
        event.preventDefault();
    }
    /**
     * @public
     */
    onKeyDown(event) {
        if (this.disabled || this.isDropDownOpen)
            return;
        if (['Enter', ' ', 'ArrowDown', 'ArrowUp'].includes(event.key)) {
            event.preventDefault();
            this.open();
        }
    }
    /**
     * @public
     */
    onCaretClick(event) {
        event.preventDefault();
        event.stopPropagation();
        if (this.disabled)
            return;
        if (this.isDropDownOpen) {
            this.close();
        }
        else {
            this.open();
        }
    }
    /**
     * 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) {
        if (this.valueMemberPath && item !== null && typeof item === 'object') {
            const value = item[this.valueMemberPath];
            return value !== undefined && value !== null ? String(value) : '';
        }
        return this.getDisplayValue(item);
    }
    /**
     * @public
     */
    onSuggestionClick(index) {
        if (!this.disabled && this.filteredItems[index]) {
            this.updateSelectedItem(this.filteredItems[index]);
        }
    }
    /**
     * @public
     */
    renderSuggestionItem(item, index) {
        return this._renderItem ? this._renderItem(item, index) : this.renderHighlightedItem(item);
    }
    /**
     * @public
     */
    renderHighlightedItem(item) {
        const value = this.getDisplayValue(item);
        if (!this._filterText)
            return value;
        const lowerValue = value.toLowerCase();
        const lowerSearch = this._filterText.toLowerCase();
        const segments = [];
        let cursor = 0;
        let matchIndex = lowerValue.indexOf(lowerSearch, cursor);
        while (matchIndex !== -1) {
            if (matchIndex > cursor)
                segments.push(value.slice(cursor, matchIndex));
            segments.push(html `<span class="match">${value.slice(matchIndex, matchIndex + this._filterText.length)}</span>`);
            cursor = matchIndex + this._filterText.length;
            matchIndex = lowerValue.indexOf(lowerSearch, cursor);
        }
        if (cursor < value.length)
            segments.push(value.slice(cursor));
        return segments.length > 0 ? html `${segments}` : value;
    }
    /**
     * Gets the identifier for the suggestion option at the specified index.
     *
     * @public
     * @param index - The index of the option.
     */
    getOptionId(index) {
        return `${this._listboxId}-option-${index}`;
    }
    /**
     * @public
     * @override
     */
    clear(force) {
        this.text = this._filterText = '';
        this._highlightedIndex = -1;
        this.filteredItems = [];
        return super.clear(force);
    }
    /**
     * @protected
     * @override
     */
    onApplyTemplate() {
        super.onApplyTemplate();
        this._inputElement = this.getTemplatePart('input');
        this._floatingElement = this.getTemplatePart('popup');
    }
    /**
     * Synchronizes internal state when the dropdown open state changes.
     *
     * @protected
     */
    onDropDownOpenChanged(_previous, next) {
        if (next) {
            this._clickOutsideController.observe();
            // Always trigger search when opening dropdown, even if text is empty
            const originalMinLength = this.minimumPrefixLength;
            this.minimumPrefixLength = 0;
            this.updateSearchText(this._filterText || '');
            this.minimumPrefixLength = originalMinLength;
        }
        else {
            this._highlightedIndex = -1;
            this._filterText = '';
            this._clickOutsideController.unobserve();
        }
    }
    /**
     * @protected
     */
    onDisabledChanged(_previous, next) {
        if (next)
            this.close();
    }
    selectHighlighted() {
        if (this._highlightedIndex >= 0 && this.filteredItems[this._highlightedIndex]) {
            this.updateSelectedItem(this.filteredItems[this._highlightedIndex]);
        }
    }
    moveHighlight(step) {
        if (this.filteredItems.length === 0)
            return;
        const nextIndex = this._highlightedIndex === -1
            ? step > 0 ? 0 : this.filteredItems.length - 1
            : (this._highlightedIndex + step + this.filteredItems.length) % this.filteredItems.length;
        this.setHighlightedIndex(nextIndex);
    }
    setHighlightedIndex(index) {
        if (this.filteredItems.length === 0)
            return;
        const normalized = Math.max(0, Math.min(index, this.filteredItems.length - 1));
        if (this._highlightedIndex !== normalized) {
            this._highlightedIndex = normalized;
            this.requestUpdate();
            this.renderRoot.querySelector(`#${this.getOptionId(normalized)}`)?.scrollIntoView({ block: 'nearest' });
        }
    }
};
__decorate([
    Attribute({ type: String }),
    __metadata("design:type", String),
    __metadata("design:paramtypes", [String])
], AutoCompleteBoxElement.prototype, "text", null);
__decorate([
    Attribute({ type: String }),
    __metadata("design:type", String),
    __metadata("design:paramtypes", [String])
], AutoCompleteBoxElement.prototype, "placeholder", null);
__decorate([
    Attribute({ type: String }),
    __metadata("design:type", String),
    __metadata("design:paramtypes", [String])
], AutoCompleteBoxElement.prototype, "filterPlaceholder", null);
__decorate([
    Attribute({ type: String }),
    __metadata("design:type", String),
    __metadata("design:paramtypes", [String])
], AutoCompleteBoxElement.prototype, "filterText", null);
__decorate([
    Attribute({
        type: Boolean,
        useDefault: true
    }),
    __metadata("design:type", Boolean),
    __metadata("design:paramtypes", [Boolean])
], AutoCompleteBoxElement.prototype, "required", null);
__decorate([
    Attribute({
        type: Boolean,
        useDefault: true
    }),
    __metadata("design:type", Boolean),
    __metadata("design:paramtypes", [Boolean])
], AutoCompleteBoxElement.prototype, "readonly", null);
__decorate([
    Attribute({ type: TextAlignment }),
    __metadata("design:type", String),
    __metadata("design:paramtypes", [String])
], AutoCompleteBoxElement.prototype, "textAlign", null);
__decorate([
    Attribute({ type: FloatingSync }),
    __metadata("design:type", String),
    __metadata("design:paramtypes", [String])
], AutoCompleteBoxElement.prototype, "dropDownSync", null);
__decorate([
    Property({ type: Object }),
    __metadata("design:type", AutoCompleteBoxElementIntl),
    __metadata("design:paramtypes", [AutoCompleteBoxElementIntl])
], AutoCompleteBoxElement.prototype, "intl", null);
__decorate([
    Property({ type: Function }),
    __metadata("design:type", Object),
    __metadata("design:paramtypes", [Object])
], AutoCompleteBoxElement.prototype, "renderItem", null);
__decorate([
    Watch('isDropDownOpen', { waitUntilFirstUpdate: true }),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [Boolean, Boolean]),
    __metadata("design:returntype", void 0)
], AutoCompleteBoxElement.prototype, "onDropDownOpenChanged", null);
__decorate([
    Watch('disabled'),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [Boolean, Boolean]),
    __metadata("design:returntype", void 0)
], AutoCompleteBoxElement.prototype, "onDisabledChanged", null);
AutoCompleteBoxElement = AutoCompleteBoxElement_1 = __decorate([
    Component({
        selector: 'mosaik-autocompletebox',
        template: autoCompleteBoxElementTemplate,
        themes: {
            joy: autoCompleteBoxElementJoyStyle,
            memphis: autoCompleteBoxElementMemphisStyle,
            cosmopolitan: autoCompleteBoxElementCosmopolitanStyle
        },
        host: {
            tabIndex: '0'
        },
        options: {
            mode: 'open',
            delegatesFocus: true
        },
        imports: [
            TextBoxElement,
            ButtonElement,
            PortalElement,
            FloatingElement,
            FocusRingElement,
            SelectItemElement,
            EmptyStateElement
        ]
    }),
    __metadata("design:paramtypes", [])
], AutoCompleteBoxElement);
export { AutoCompleteBoxElement };
//# sourceMappingURL=AutoCompleteBoxElement.js.map