@xlabs-store/core 0.0.1

package/dist/collection/components/x-auto-complete/x-auto-complete.js

@@ -0,0 +1,1829 @@
+import { Host, h, } from "@stencil/core";
+import { PortalController } from "../x-portal";
+import { isOptionGroup, flattenOptions, filterOptions, getOptionLabel, getOptionKey, } from "./types";
+import { getIcon } from "../../utils/config";
+/**
+ * AutoComplete Component - Following Ant Design Specification
+ *
+ * Autocomplete function of input field.
+ *
+ * @part wrapper - The wrapper container
+ * @part input - The input element
+ * @part prefix - The prefix element
+ * @part suffix - The suffix element
+ * @part clear - The clear button
+ */
+export class XAutoComplete {
+    /**
+     * Host element reference.
+     */
+    el;
+    // ==================== Props ====================
+    /**
+     * Show clear button.
+     * @example
+     * <x-auto-complete allowClear></x-auto-complete>
+     */
+    allowClear = false;
+    /**
+     * Whether focus on mount.
+     * @example
+     * <x-auto-complete autoFocus></x-auto-complete>
+     */
+    autoFocus = false;
+    /**
+     * Whether to backfill the selected item into the input field when navigating with arrow keys.
+     * @example
+     * <x-auto-complete backfill></x-auto-complete>
+     */
+    backfill = false;
+    /**
+     * Whether active first option by default.
+     * @example
+     * <x-auto-complete defaultActiveFirstOption></x-auto-complete>
+     */
+    defaultActiveFirstOption = true;
+    /**
+     * Whether the dropdown menu is open by default.
+     * @example
+     * <x-auto-complete defaultOpen></x-auto-complete>
+     */
+    defaultOpen = false;
+    /**
+     * Initial selected value.
+     * @example
+     * <x-auto-complete defaultValue="Al"></x-auto-complete>
+     */
+    defaultValue;
+    /**
+     * Whether disabled.
+     * @example
+     * <x-auto-complete disabled></x-auto-complete>
+     */
+    disabled = false;
+    /**
+     * If true, filter options by input. Can be a custom function.
+     * @example
+     * <x-auto-complete filterOption={(v, o) => o.label.startsWith(v)}></x-auto-complete>
+     */
+    filterOption = true;
+    /**
+     * Content to show when no result matches.
+     * @example
+     * <x-auto-complete notFoundContent="No matches"></x-auto-complete>
+     */
+    notFoundContent;
+    /**
+     * Controlled open state of dropdown.
+     * @example
+     * <x-auto-complete open></x-auto-complete>
+     */
+    open;
+    /**
+     * Data source for autocomplete.
+     * @example
+     * <x-auto-complete options={[{ value: 'a', label: 'Alpha' }]}></x-auto-complete>
+     */
+    options = [];
+    /**
+     * Placeholder of input.
+     * @example
+     * <x-auto-complete placeholder="Search"></x-auto-complete>
+     */
+    placeholder;
+    /**
+     * The position where the popup menu appears.
+     * @example
+     * <x-auto-complete placement="bottomRight"></x-auto-complete>
+     */
+    placement = 'bottomLeft';
+    /**
+     * Set validation status.
+     * @example
+     * <x-auto-complete status="error"></x-auto-complete>
+     */
+    status;
+    /**
+     * The size of the input box.
+     * @example
+     * <x-auto-complete size="small"></x-auto-complete>
+     */
+    size = 'middle';
+    /**
+     * Selected option's value.
+     * @example
+     * <x-auto-complete value="Beta"></x-auto-complete>
+     */
+    value;
+    /**
+     * Variant style.
+     * @example
+     * <x-auto-complete variant="filled"></x-auto-complete>
+     */
+    variant = 'outlined';
+    /**
+     * Indicate whether to use virtual scroll.
+     * @example
+     * <x-auto-complete virtual={false}></x-auto-complete>
+     */
+    virtual = true;
+    /**
+     * Whether dropdown width is the same as input.
+     * @example
+     * <x-auto-complete popupMatchSelectWidth={false}></x-auto-complete>
+     */
+    popupMatchSelectWidth = true;
+    /**
+     * Max height of dropdown.
+     * @example
+     * <x-auto-complete listHeight={300}></x-auto-complete>
+     */
+    listHeight = 256;
+    /**
+     * Prefix icon.
+     * @example
+     * <x-auto-complete prefixIcon="search"></x-auto-complete>
+     */
+    prefixIcon;
+    /**
+     * Suffix icon.
+     * @example
+     * <x-auto-complete suffixIcon="close"></x-auto-complete>
+     */
+    suffixIcon;
+    /**
+     * Custom classNames.
+     * @example
+     * <x-auto-complete classNames={{ root: 'my-ac' }}></x-auto-complete>
+     */
+    classNames;
+    /**
+     * Custom styles.
+     * @example
+     * <x-auto-complete styles={{ root: { minWidth: '200px' } }}></x-auto-complete>
+     */
+    styles;
+    // ==================== Events ====================
+    /**
+     * Called when leaving the input field.
+     * @example
+     * <x-auto-complete onXBlur={(ev) => console.log(ev)}></x-auto-complete>
+     */
+    xBlur;
+    /**
+     * Called when value changes.
+     * @example
+     * <x-auto-complete onXChange={(ev) => console.log(ev.detail)}></x-auto-complete>
+     */
+    xChange;
+    /**
+     * Called when dropdown visibility changes.
+     * @example
+     * <x-auto-complete onXOpenChange={(ev) => console.log(ev.detail)}></x-auto-complete>
+     */
+    xOpenChange;
+    /**
+     * Called when entering the input field.
+     * @example
+     * <x-auto-complete onXFocus={(ev) => console.log(ev)}></x-auto-complete>
+     */
+    xFocus;
+    /**
+     * Called when a selection is made.
+     * @example
+     * <x-auto-complete onXSelect={(ev) => console.log(ev.detail)}></x-auto-complete>
+     */
+    xSelect;
+    /**
+     * Called when the clear button is clicked.
+     * @example
+     * <x-auto-complete onXClear={() => {}}></x-auto-complete>
+     */
+    xClear;
+    /**
+     * Called when keyboard input changes.
+     * @example
+     * <x-auto-complete onXSearch={(ev) => console.log(ev.detail)}></x-auto-complete>
+     */
+    xSearch;
+    /**
+     * Called when a key is pressed in the input.
+     * @example
+     * <x-auto-complete onXInputKeyDown={(ev) => console.log(ev.detail)}></x-auto-complete>
+     */
+    xInputKeyDown;
+    /**
+     * Called when the popup scroll.
+     * @example
+     * <x-auto-complete onXPopupScroll={(ev) => console.log(ev.detail)}></x-auto-complete>
+     */
+    xPopupScroll;
+    // ==================== State ====================
+    /**
+     * Internal open state for uncontrolled mode.
+     */
+    internalOpen = false;
+    /**
+     * Current search input value.
+     */
+    searchValue = '';
+    /**
+     * Active option index for keyboard navigation.
+     */
+    activeIndex = -1;
+    /**
+     * Focus state.
+     */
+    focused = false;
+    /**
+     * Flattened options list.
+     */
+    internalOptions = [];
+    /**
+     * Parsed options including groups.
+     */
+    parsedOptions = [];
+    // ==================== Refs ====================
+    /**
+     * Input element reference.
+     */
+    inputRef;
+    /**
+     * Wrapper element reference.
+     */
+    wrapperRef;
+    /**
+     * Portal instance for dropdown.
+     */
+    portalInstance = null;
+    // ==================== Computed ====================
+    /**
+     * Get open state (controlled or internal).
+     * @returns boolean
+     */
+    get isOpen() {
+        return this.open ?? this.internalOpen;
+    }
+    /**
+     * Filtered options based on search value.
+     * @returns AutoCompleteOption[]
+     */
+    get filteredOptions() {
+        return filterOptions(this.internalOptions, this.searchValue, this.filterOption);
+    }
+    /**
+     * Whether current input has value.
+     * @returns boolean
+     */
+    get hasValue() {
+        return !!this.value || !!this.searchValue;
+    }
+    // ==================== Lifecycle ====================
+    /**
+     * Initialize internal state before render.
+     * @returns void
+     */
+    componentWillLoad() {
+        // Initialize from default values
+        if (this.value === undefined && this.defaultValue !== undefined) {
+            this.value = this.defaultValue;
+        }
+        if (this.open === undefined && this.defaultOpen) {
+            this.internalOpen = true;
+        }
+        this.syncOptions();
+        this.searchValue = this.value || '';
+    }
+    /**
+     * Auto focus on mount when enabled.
+     * @returns void
+     */
+    componentDidLoad() {
+        if (this.autoFocus && !this.disabled) {
+            this.setFocus();
+        }
+    }
+    /**
+     * Update portal after render.
+     * @returns void
+     */
+    componentDidRender() {
+        this.updatePortal();
+    }
+    /**
+     * Cleanup portal on disconnect.
+     * @returns void
+     */
+    disconnectedCallback() {
+        this.destroyPortal();
+    }
+    // ==================== Watchers ====================
+    /**
+     * Sync options when options prop changes.
+     * @returns void
+     */
+    onOptionsChange() {
+        this.syncOptions();
+    }
+    /**
+     * Sync input value when value prop changes.
+     * @param newVal - New value.
+     * @returns void
+     */
+    onValueChange(newVal) {
+        if (newVal !== this.searchValue) {
+            this.searchValue = newVal || '';
+        }
+    }
+    /**
+     * Sync internal open state when controlled prop changes.
+     * @param newVal - Open state.
+     * @returns void
+     */
+    onOpenPropChange(newVal) {
+        if (newVal !== undefined) {
+            this.internalOpen = newVal;
+        }
+    }
+    // ==================== Listeners ====================
+    /**
+     * Close dropdown when clicking outside.
+     * @param ev - Mouse event.
+     * @returns void
+     */
+    handleWindowClick(ev) {
+        if (!this.isOpen)
+            return;
+        const target = ev.target;
+        // Check if click is inside component
+        if (this.el.contains(target))
+            return;
+        // Check if click is inside portal dropdown
+        const portalEl = this.portalInstance?.getElement?.();
+        if (portalEl?.contains(target))
+            return;
+        this.closeDropdown();
+    }
+    /**
+     * Handle keyboard navigation and selection.
+     * @param ev - Keyboard event.
+     * @returns void
+     */
+    handleKeydown(ev) {
+        if (this.disabled)
+            return;
+        this.xInputKeyDown.emit(ev);
+        const options = this.filteredOptions;
+        switch (ev.key) {
+            case 'ArrowDown':
+                ev.preventDefault();
+                this.handleArrowDown(options);
+                break;
+            case 'ArrowUp':
+                ev.preventDefault();
+                this.handleArrowUp(options);
+                break;
+            case 'Enter':
+                ev.preventDefault();
+                this.handleEnter(options);
+                break;
+            case 'Escape':
+                ev.preventDefault();
+                this.closeDropdown();
+                break;
+            case 'Tab':
+                if (this.isOpen) {
+                    this.closeDropdown();
+                }
+                break;
+        }
+    }
+    // ==================== Public Methods ====================
+    /**
+     * Focus the input element.
+     * @returns Promise<void>
+     * @example
+     * await el.setFocus()
+     */
+    async setFocus() {
+        this.inputRef?.focus();
+    }
+    /**
+     * Blur the input element.
+     * @returns Promise<void>
+     * @example
+     * await el.setBlur()
+     */
+    async setBlur() {
+        this.inputRef?.blur();
+    }
+    // ==================== Private Methods ====================
+    /**
+     * Sync options from props, parsing JSON when needed.
+     *
+     * Flow:
+     * 1. Checks the `options` prop type.
+     * 2. If it's a string, attempts to parse it as JSON (useful for HTML attribute usage).
+     * 3. If valid array, updates `parsedOptions` (preserving structure) and `internalOptions` (flattened for easy searching).
+     * 4. Logs warnings if JSON parsing fails.
+     *
+     * @returns void
+     */
+    syncOptions() {
+        let opts = this.options;
+        console.log('[x-auto-complete] syncOptions called', {
+            options: this.options,
+            type: typeof this.options
+        });
+        // Handle case when options is passed as JSON string via attribute
+        if (typeof opts === 'string') {
+            try {
+                opts = JSON.parse(opts);
+            }
+            catch (e) {
+                console.warn('x-auto-complete: Invalid JSON options', e);
+                opts = [];
+            }
+        }
+        if (!Array.isArray(opts)) {
+            this.parsedOptions = [];
+            this.internalOptions = [];
+            return;
+        }
+        this.parsedOptions = opts;
+        this.internalOptions = flattenOptions(opts);
+        console.log('[x-auto-complete] internalOptions:', this.internalOptions);
+    }
+    /**
+     * Open dropdown if allowed.
+     *
+     * Flow:
+     * 1. Checks if disabled or already open.
+     * 2. Sets `internalOpen` to true.
+     * 3. Emits `xOpenChange` event.
+     * 4. If `defaultActiveFirstOption` is enabled and results exist, highlights the first option (index 0).
+     *
+     * @returns void
+     */
+    openDropdown() {
+        console.log('[x-auto-complete] openDropdown called', {
+            disabled: this.disabled,
+            isOpen: this.isOpen,
+            filteredOptions: this.filteredOptions
+        });
+        if (this.disabled || this.isOpen)
+            return;
+        this.internalOpen = true;
+        this.xOpenChange.emit({ open: true });
+        console.log('[x-auto-complete] dropdown opened, internalOpen:', this.internalOpen);
+        if (this.defaultActiveFirstOption && this.filteredOptions.length > 0) {
+            this.activeIndex = 0;
+        }
+    }
+    /**
+     * Close dropdown and reset active index.
+     * @returns void
+     */
+    closeDropdown() {
+        if (!this.isOpen)
+            return;
+        this.internalOpen = false;
+        this.activeIndex = -1;
+        this.xOpenChange.emit({ open: false });
+    }
+    /**
+     * Select an option and emit events.
+     * @param option - Selected option.
+     * @returns void
+     */
+    selectOption(option) {
+        if (option.disabled)
+            return;
+        const label = getOptionLabel(option);
+        this.value = label;
+        this.searchValue = label;
+        this.xSelect.emit({ value: option.value, option });
+        this.xChange.emit({ value: label });
+        this.closeDropdown();
+    }
+    // ==================== Keyboard Handlers ====================
+    /**
+     * Handle ArrowDown key.
+     * @param options - Filtered options.
+     * @returns void
+     */
+    handleArrowDown(options) {
+        if (!this.isOpen) {
+            this.openDropdown();
+            return;
+        }
+        let nextIndex = this.activeIndex + 1;
+        while (nextIndex < options.length && options[nextIndex]?.disabled) {
+            nextIndex++;
+        }
+        if (nextIndex < options.length) {
+            this.activeIndex = nextIndex;
+            if (this.backfill) {
+                this.searchValue = getOptionLabel(options[nextIndex]);
+            }
+            this.scrollToActiveOption();
+        }
+    }
+    /**
+     * Handle ArrowUp key.
+     * @param options - Filtered options.
+     * @returns void
+     */
+    handleArrowUp(options) {
+        if (!this.isOpen) {
+            this.openDropdown();
+            return;
+        }
+        let prevIndex = this.activeIndex - 1;
+        while (prevIndex >= 0 && options[prevIndex]?.disabled) {
+            prevIndex--;
+        }
+        if (prevIndex >= 0) {
+            this.activeIndex = prevIndex;
+            if (this.backfill) {
+                this.searchValue = getOptionLabel(options[prevIndex]);
+            }
+            this.scrollToActiveOption();
+        }
+    }
+    /**
+     * Handle Enter key.
+     * @param options - Filtered options.
+     * @returns void
+     */
+    handleEnter(options) {
+        if (this.isOpen && this.activeIndex >= 0 && options[this.activeIndex]) {
+            this.selectOption(options[this.activeIndex]);
+        }
+    }
+    /**
+     * Scroll dropdown to active option.
+     * @returns void
+     */
+    scrollToActiveOption() {
+        const portalEl = this.portalInstance?.getElement?.();
+        if (!portalEl || this.activeIndex < 0)
+            return;
+        const items = portalEl.querySelectorAll('.x-auto-complete-option');
+        const activeItem = items[this.activeIndex];
+        if (activeItem) {
+            activeItem.scrollIntoView({ block: 'nearest' });
+        }
+    }
+    // ==================== Event Handlers ====================
+    /**
+     * Handle wrapper click to focus input.
+     * @param e - Mouse event.
+     * @returns void
+     */
+    handleWrapperClick = (e) => {
+        e.preventDefault();
+        if (this.disabled)
+            return;
+        this.inputRef?.focus();
+        // Don't toggle here, let handleInputFocus handle opening
+    };
+    /**
+     * Handle input focus.
+     * @param e - Focus event.
+     * @returns void
+     */
+    handleInputFocus = (e) => {
+        this.focused = true;
+        this.xFocus.emit(e);
+        // Only open on focus if defaultOpen is true and there are options
+        if (this.defaultOpen && (this.filteredOptions.length > 0 || this.internalOptions.length > 0)) {
+            this.openDropdown();
+        }
+    };
+    /**
+     * Handle input blur.
+     * @param e - Focus event.
+     * @returns void
+     */
+    handleInputBlur = (e) => {
+        // Delay to allow click on dropdown
+        setTimeout(() => {
+            if (!this.el.contains(document.activeElement)) {
+                this.focused = false;
+                this.xBlur.emit(e);
+            }
+        }, 150);
+    };
+    /**
+     * Handle input changes.
+     * @param e - Input event.
+     * @returns void
+     */
+    handleInput = (e) => {
+        const target = e.target;
+        const newValue = target.value;
+        this.searchValue = newValue;
+        this.value = newValue;
+        this.xSearch.emit({ value: newValue });
+        this.xChange.emit({ value: newValue });
+        // Always open dropdown when typing (will show empty state if no results)
+        if (newValue && this.internalOptions.length > 0) {
+            this.openDropdown();
+            if (this.defaultActiveFirstOption && this.filteredOptions.length > 0) {
+                this.activeIndex = 0;
+            }
+        }
+        else if (!newValue) {
+            this.closeDropdown();
+        }
+    };
+    /**
+     * Handle clear action.
+     * @param e - Mouse event.
+     * @returns void
+     */
+    handleClear = (e) => {
+        e.stopPropagation();
+        e.preventDefault();
+        this.value = '';
+        this.searchValue = '';
+        this.xClear.emit();
+        this.xChange.emit({ value: '' });
+        this.closeDropdown();
+        this.inputRef?.focus();
+    };
+    /**
+     * Handle option click.
+     * @param option - Option clicked.
+     * @returns void
+     */
+    handleOptionClick = (option) => {
+        if (!option.disabled) {
+            this.selectOption(option);
+        }
+    };
+    /**
+     * Handle dropdown scroll and emit event.
+     * @param e - Scroll event.
+     * @returns void
+     */
+    handleDropdownScroll = (e) => {
+        const target = e.target;
+        this.xPopupScroll.emit({
+            scrollTop: target.scrollTop,
+            scrollLeft: target.scrollLeft,
+            scrollHeight: target.scrollHeight,
+            clientHeight: target.clientHeight,
+        });
+    };
+    // ==================== Portal Methods ====================
+    /**
+     * Build dropdown element for portal.
+     * @returns HTMLElement
+     */
+    buildDropdownElement() {
+        const dropdownEl = document.createElement('x-auto-complete-dropdown-content');
+        // Set classes
+        const classes = {
+            'x-auto-complete-dropdown': true,
+            'x-auto-complete-dropdown-hidden': !this.isOpen,
+            [`x-auto-complete-dropdown-placement-${this.placement}`]: true,
+            [this.classNames?.popup || '']: !!this.classNames?.popup,
+        };
+        // Calculate width
+        let width;
+        if (typeof this.popupMatchSelectWidth === 'number') {
+            width = `${this.popupMatchSelectWidth}px`;
+        }
+        else if (this.popupMatchSelectWidth && this.wrapperRef) {
+            width = `${this.wrapperRef.offsetWidth}px`;
+        }
+        // Set styles
+        const styles = {
+            ...(this.styles?.popup || {}),
+            ...(width ? { width } : {}),
+        };
+        dropdownEl.dropdownClasses = classes;
+        dropdownEl.dropdownStyle = styles;
+        // Build content wrapper
+        const contentWrapper = document.createElement('div');
+        contentWrapper.className = 'x-auto-complete-dropdown-inner';
+        contentWrapper.style.maxHeight = `${this.listHeight}px`;
+        contentWrapper.style.overflowY = 'auto';
+        // Add scroll listener
+        contentWrapper.addEventListener('scroll', this.handleDropdownScroll);
+        const options = this.filteredOptions;
+        const hasOptions = options.length > 0;
+        if (!hasOptions) {
+            // Render empty state with x-empty component
+            const emptyEl = document.createElement('x-empty');
+            emptyEl.className = 'x-auto-complete-empty';
+            if (this.notFoundContent) {
+                emptyEl.setAttribute('description', this.notFoundContent);
+            }
+            emptyEl.setAttribute('image', 'simple');
+            contentWrapper.appendChild(emptyEl);
+        }
+        else {
+            // Render options with groups support
+            if (this.parsedOptions.some(isOptionGroup)) {
+                this.renderOptionsWithGroups(contentWrapper, options);
+            }
+            else {
+                options.forEach((option, index) => {
+                    const optionEl = this.createOptionElement(option, index);
+                    contentWrapper.appendChild(optionEl);
+                });
+            }
+        }
+        dropdownEl.appendChild(contentWrapper);
+        return dropdownEl;
+    }
+    /**
+     * Create option element for dropdown list.
+     * @param option - Option data.
+     * @param index - Option index.
+     * @returns HTMLElement
+     */
+    createOptionElement(option, index) {
+        const isActive = index === this.activeIndex;
+        const optionEl = document.createElement('div');
+        optionEl.className = [
+            'x-auto-complete-option',
+            isActive ? 'x-auto-complete-option-active' : '',
+            option.disabled ? 'x-auto-complete-option-disabled' : '',
+        ].filter(Boolean).join(' ');
+        optionEl.setAttribute('role', 'option');
+        optionEl.setAttribute('aria-disabled', String(!!option.disabled));
+        optionEl.setAttribute('data-value', String(option.value));
+        const contentSpan = document.createElement('span');
+        contentSpan.className = 'x-auto-complete-option-content';
+        contentSpan.textContent = getOptionLabel(option);
+        optionEl.appendChild(contentSpan);
+        // Click handler
+        optionEl.addEventListener('click', (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            this.handleOptionClick(option);
+        });
+        return optionEl;
+    }
+    /**
+     * Render grouped options into container.
+     * @param container - Container element.
+     * @param filteredOptions - Filtered options.
+     * @returns void
+     */
+    renderOptionsWithGroups(container, filteredOptions) {
+        let globalIndex = 0;
+        for (const opt of this.parsedOptions) {
+            if (isOptionGroup(opt)) {
+                // Render group
+                const groupEl = document.createElement('div');
+                groupEl.className = 'x-auto-complete-option-group';
+                const groupLabel = document.createElement('div');
+                groupLabel.className = 'x-auto-complete-option-group-label';
+                groupLabel.textContent = opt.label;
+                groupEl.appendChild(groupLabel);
+                // Render group options
+                for (const groupOption of opt.options) {
+                    const isFiltered = filteredOptions.some((fo) => getOptionKey(fo) === getOptionKey(groupOption));
+                    if (!isFiltered)
+                        continue;
+                    const optionEl = this.createOptionElement(groupOption, globalIndex);
+                    optionEl.classList.add('x-auto-complete-option-in-group');
+                    groupEl.appendChild(optionEl);
+                    globalIndex++;
+                }
+                // Only add group if it has visible options
+                if (groupEl.querySelectorAll('.x-auto-complete-option').length > 0) {
+                    container.appendChild(groupEl);
+                }
+            }
+            else {
+                const isFiltered = filteredOptions.some((fo) => getOptionKey(fo) === getOptionKey(opt));
+                if (!isFiltered)
+                    continue;
+                const optionEl = this.createOptionElement(opt, globalIndex);
+                container.appendChild(optionEl);
+                globalIndex++;
+            }
+        }
+    }
+    /**
+     * Create or update portal for dropdown.
+     * @returns void
+     */
+    updatePortal() {
+        console.log('[x-auto-complete] updatePortal called', {
+            isOpen: this.isOpen,
+            internalOpen: this.internalOpen,
+            filteredOptionsLength: this.filteredOptions.length,
+            notFoundContent: this.notFoundContent,
+            wrapperRef: !!this.wrapperRef
+        });
+        // Close portal if not open, or if no options available at all
+        if (!this.isOpen || this.internalOptions.length === 0) {
+            this.destroyPortal();
+            return;
+        }
+        const dropdownElement = this.buildDropdownElement();
+        console.log('[x-auto-complete] creating/updating portal', { dropdownElement });
+        if (!this.portalInstance) {
+            this.portalInstance = PortalController.create({
+                open: true,
+                target: this.wrapperRef,
+                placement: this.placement,
+                zIndex: 1050,
+                content: dropdownElement,
+            });
+            console.log('[x-auto-complete] portal created', this.portalInstance);
+        }
+        else {
+            this.portalInstance.update({
+                open: true,
+                target: this.wrapperRef,
+                placement: this.placement,
+                content: dropdownElement,
+            });
+            console.log('[x-auto-complete] portal updated');
+        }
+    }
+    /**
+     * Destroy portal instance if present.
+     * @returns void
+     */
+    destroyPortal() {
+        if (this.portalInstance) {
+            this.portalInstance.destroy();
+            this.portalInstance = null;
+        }
+    }
+    // ==================== Render Methods ====================
+    /**
+     * Render clear icon.
+     * @returns JSX.Element | null
+     */
+    renderClearIcon() {
+        if (!this.allowClear || !this.hasValue || this.disabled)
+            return null;
+        return (h("span", { class: "x-auto-complete-clear", part: "clear", onClick: this.handleClear }, h("x-icon", { name: getIcon('clear') })));
+    }
+    /**
+     * Render prefix icon.
+     * @returns JSX.Element | null
+     */
+    renderPrefix() {
+        if (!this.prefixIcon)
+            return null;
+        return (h("span", { class: "x-auto-complete-prefix", part: "prefix" }, h("x-icon", { name: this.prefixIcon })));
+    }
+    /**
+     * Render suffix with clear or icon.
+     * @returns JSX.Element | null
+     */
+    renderSuffix() {
+        if (!this.suffixIcon && !this.allowClear)
+            return null;
+        return (h("span", { class: "x-auto-complete-suffix", part: "suffix" }, this.renderClearIcon(), this.suffixIcon && !this.hasValue && (h("x-icon", { name: this.suffixIcon }))));
+    }
+    /**
+     * Render autocomplete input and suffix/prefix.
+     * @returns JSX.Element
+     */
+    render() {
+        const hostClasses = {
+            'x-auto-complete': true,
+            [`x-auto-complete-${this.size}`]: true,
+            [`x-auto-complete-${this.variant}`]: true,
+            'x-auto-complete-disabled': this.disabled,
+            'x-auto-complete-focused': this.focused,
+            'x-auto-complete-open': this.isOpen,
+            'x-auto-complete-status-error': this.status === 'error',
+            'x-auto-complete-status-warning': this.status === 'warning',
+            [this.classNames?.root || '']: !!this.classNames?.root,
+        };
+        const wrapperClasses = {
+            'x-auto-complete-wrapper': true,
+            'x-auto-complete-wrapper-disabled': this.disabled,
+            'x-auto-complete-wrapper-focused': this.focused,
+            'disabled': this.disabled,
+        };
+        return (h(Host, { key: 'e4efb8a025cb43b6aea230ca5af35cf842f8fce0', class: hostClasses, style: this.styles?.root }, h("div", { key: '9176bedb4795fb7f2bcdc03f1da19009459be3e8', class: wrapperClasses, part: "wrapper", ref: (el) => (this.wrapperRef = el), onClick: this.handleWrapperClick }, this.renderPrefix(), h("input", { key: 'd8d240696400f6b93374d248c12cdfc40047bba0', ref: (el) => (this.inputRef = el), class: {
+                'x-auto-complete-input': true,
+                [this.classNames?.input || '']: !!this.classNames?.input,
+            }, style: this.styles?.input, part: "input", type: "text", autocomplete: "off", role: "combobox", "aria-haspopup": "listbox", "aria-expanded": String(this.isOpen), "aria-autocomplete": "list", disabled: this.disabled, placeholder: this.placeholder, value: this.searchValue, onFocus: this.handleInputFocus, onBlur: this.handleInputBlur, onInput: this.handleInput }), this.renderSuffix())));
+    }
+    static get is() { return "x-auto-complete"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["x-auto-complete.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["x-auto-complete.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "allowClear": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-auto-complete allowClear></x-auto-complete>"
+                        }],
+                    "text": "Show clear button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "allow-clear",
+                "defaultValue": "false"
+            },
+            "autoFocus": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-auto-complete autoFocus></x-auto-complete>"
+                        }],
+                    "text": "Whether focus on mount."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "auto-focus",
+                "defaultValue": "false"
+            },
+            "backfill": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-auto-complete backfill></x-auto-complete>"
+                        }],
+                    "text": "Whether to backfill the selected item into the input field when navigating with arrow keys."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "backfill",
+                "defaultValue": "false"
+            },
+            "defaultActiveFirstOption": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-auto-complete defaultActiveFirstOption></x-auto-complete>"
+                        }],
+                    "text": "Whether active first option by default."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "default-active-first-option",
+                "defaultValue": "true"
+            },
+            "defaultOpen": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-auto-complete defaultOpen></x-auto-complete>"
+                        }],
+                    "text": "Whether the dropdown menu is open by default."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "default-open",
+                "defaultValue": "false"
+            },
+            "defaultValue": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-auto-complete defaultValue=\"Al\"></x-auto-complete>"
+                        }],
+                    "text": "Initial selected value."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "default-value"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-auto-complete disabled></x-auto-complete>"
+                        }],
+                    "text": "Whether disabled."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "filterOption": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean | FilterOptionFunction",
+                    "resolved": "((inputValue: string, option: AutoCompleteOption) => boolean) | boolean",
+                    "references": {
+                        "FilterOptionFunction": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-auto-complete/types.ts::FilterOptionFunction",
+                            "referenceLocation": "FilterOptionFunction"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-auto-complete filterOption={(v, o) => o.label.startsWith(v)}></x-auto-complete>"
+                        }],
+                    "text": "If true, filter options by input. Can be a custom function."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "filter-option",
+                "defaultValue": "true"
+            },
+            "notFoundContent": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-auto-complete notFoundContent=\"No matches\"></x-auto-complete>"
+                        }],
+                    "text": "Content to show when no result matches."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "not-found-content"
+            },
+            "open": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-auto-complete open></x-auto-complete>"
+                        }],
+                    "text": "Controlled open state of dropdown."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "open"
+            },
+            "options": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "AutoCompleteOptionType[]",
+                    "resolved": "AutoCompleteOptionType[]",
+                    "references": {
+                        "AutoCompleteOptionType": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-auto-complete/types.ts::AutoCompleteOptionType",
+                            "referenceLocation": "AutoCompleteOptionType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-auto-complete options={[{ value: 'a', label: 'Alpha' }]}></x-auto-complete>"
+                        }],
+                    "text": "Data source for autocomplete."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-auto-complete placeholder=\"Search\"></x-auto-complete>"
+                        }],
+                    "text": "Placeholder of input."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder"
+            },
+            "placement": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "AutoCompletePlacement",
+                    "resolved": "\"bottomLeft\" | \"bottomRight\" | \"topLeft\" | \"topRight\"",
+                    "references": {
+                        "AutoCompletePlacement": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-auto-complete/types.ts::AutoCompletePlacement",
+                            "referenceLocation": "AutoCompletePlacement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-auto-complete placement=\"bottomRight\"></x-auto-complete>"
+                        }],
+                    "text": "The position where the popup menu appears."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placement",
+                "defaultValue": "'bottomLeft'"
+            },
+            "status": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "AutoCompleteStatus",
+                    "resolved": "\"error\" | \"warning\"",
+                    "references": {
+                        "AutoCompleteStatus": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-auto-complete/types.ts::AutoCompleteStatus",
+                            "referenceLocation": "AutoCompleteStatus"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-auto-complete status=\"error\"></x-auto-complete>"
+                        }],
+                    "text": "Set validation status."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "status"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "AutoCompleteSize",
+                    "resolved": "\"large\" | \"middle\" | \"small\"",
+                    "references": {
+                        "AutoCompleteSize": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-auto-complete/types.ts::AutoCompleteSize",
+                            "referenceLocation": "AutoCompleteSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-auto-complete size=\"small\"></x-auto-complete>"
+                        }],
+                    "text": "The size of the input box."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'middle'"
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-auto-complete value=\"Beta\"></x-auto-complete>"
+                        }],
+                    "text": "Selected option's value."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "AutoCompleteVariant",
+                    "resolved": "\"borderless\" | \"filled\" | \"outlined\"",
+                    "references": {
+                        "AutoCompleteVariant": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-auto-complete/types.ts::AutoCompleteVariant",
+                            "referenceLocation": "AutoCompleteVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-auto-complete variant=\"filled\"></x-auto-complete>"
+                        }],
+                    "text": "Variant style."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'outlined'"
+            },
+            "virtual": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-auto-complete virtual={false}></x-auto-complete>"
+                        }],
+                    "text": "Indicate whether to use virtual scroll."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "virtual",
+                "defaultValue": "true"
+            },
+            "popupMatchSelectWidth": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean | number",
+                    "resolved": "boolean | number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-auto-complete popupMatchSelectWidth={false}></x-auto-complete>"
+                        }],
+                    "text": "Whether dropdown width is the same as input."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "popup-match-select-width",
+                "defaultValue": "true"
+            },
+            "listHeight": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-auto-complete listHeight={300}></x-auto-complete>"
+                        }],
+                    "text": "Max height of dropdown."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "list-height",
+                "defaultValue": "256"
+            },
+            "prefixIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-auto-complete prefixIcon=\"search\"></x-auto-complete>"
+                        }],
+                    "text": "Prefix icon."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "prefix-icon"
+            },
+            "suffixIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-auto-complete suffixIcon=\"close\"></x-auto-complete>"
+                        }],
+                    "text": "Suffix icon."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "suffix-icon"
+            },
+            "classNames": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "AutoCompleteClassNames",
+                    "resolved": "AutoCompleteClassNames",
+                    "references": {
+                        "AutoCompleteClassNames": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-auto-complete/types.ts::AutoCompleteClassNames",
+                            "referenceLocation": "AutoCompleteClassNames"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-auto-complete classNames={{ root: 'my-ac' }}></x-auto-complete>"
+                        }],
+                    "text": "Custom classNames."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "styles": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "AutoCompleteStyles",
+                    "resolved": "AutoCompleteStyles",
+                    "references": {
+                        "AutoCompleteStyles": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-auto-complete/types.ts::AutoCompleteStyles",
+                            "referenceLocation": "AutoCompleteStyles"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-auto-complete styles={{ root: { minWidth: '200px' } }}></x-auto-complete>"
+                        }],
+                    "text": "Custom styles."
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "internalOpen": {},
+            "searchValue": {},
+            "activeIndex": {},
+            "focused": {},
+            "internalOptions": {},
+            "parsedOptions": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "xBlur",
+                "name": "xBlur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-auto-complete onXBlur={(ev) => console.log(ev)}></x-auto-complete>"
+                        }],
+                    "text": "Called when leaving the input field."
+                },
+                "complexType": {
+                    "original": "FocusEvent",
+                    "resolved": "FocusEvent",
+                    "references": {
+                        "FocusEvent": {
+                            "location": "global",
+                            "id": "global::FocusEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "xChange",
+                "name": "xChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-auto-complete onXChange={(ev) => console.log(ev.detail)}></x-auto-complete>"
+                        }],
+                    "text": "Called when value changes."
+                },
+                "complexType": {
+                    "original": "AutoCompleteChangeEventDetail",
+                    "resolved": "AutoCompleteChangeEventDetail",
+                    "references": {
+                        "AutoCompleteChangeEventDetail": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-auto-complete/types.ts::AutoCompleteChangeEventDetail",
+                            "referenceLocation": "AutoCompleteChangeEventDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "xOpenChange",
+                "name": "xOpenChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-auto-complete onXOpenChange={(ev) => console.log(ev.detail)}></x-auto-complete>"
+                        }],
+                    "text": "Called when dropdown visibility changes."
+                },
+                "complexType": {
+                    "original": "AutoCompleteOpenChangeEventDetail",
+                    "resolved": "AutoCompleteOpenChangeEventDetail",
+                    "references": {
+                        "AutoCompleteOpenChangeEventDetail": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-auto-complete/types.ts::AutoCompleteOpenChangeEventDetail",
+                            "referenceLocation": "AutoCompleteOpenChangeEventDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "xFocus",
+                "name": "xFocus",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-auto-complete onXFocus={(ev) => console.log(ev)}></x-auto-complete>"
+                        }],
+                    "text": "Called when entering the input field."
+                },
+                "complexType": {
+                    "original": "FocusEvent",
+                    "resolved": "FocusEvent",
+                    "references": {
+                        "FocusEvent": {
+                            "location": "global",
+                            "id": "global::FocusEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "xSelect",
+                "name": "xSelect",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-auto-complete onXSelect={(ev) => console.log(ev.detail)}></x-auto-complete>"
+                        }],
+                    "text": "Called when a selection is made."
+                },
+                "complexType": {
+                    "original": "AutoCompleteSelectEventDetail",
+                    "resolved": "AutoCompleteSelectEventDetail",
+                    "references": {
+                        "AutoCompleteSelectEventDetail": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-auto-complete/types.ts::AutoCompleteSelectEventDetail",
+                            "referenceLocation": "AutoCompleteSelectEventDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "xClear",
+                "name": "xClear",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-auto-complete onXClear={() => {}}></x-auto-complete>"
+                        }],
+                    "text": "Called when the clear button is clicked."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "xSearch",
+                "name": "xSearch",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-auto-complete onXSearch={(ev) => console.log(ev.detail)}></x-auto-complete>"
+                        }],
+                    "text": "Called when keyboard input changes."
+                },
+                "complexType": {
+                    "original": "AutoCompleteSearchEventDetail",
+                    "resolved": "AutoCompleteSearchEventDetail",
+                    "references": {
+                        "AutoCompleteSearchEventDetail": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-auto-complete/types.ts::AutoCompleteSearchEventDetail",
+                            "referenceLocation": "AutoCompleteSearchEventDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "xInputKeyDown",
+                "name": "xInputKeyDown",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-auto-complete onXInputKeyDown={(ev) => console.log(ev.detail)}></x-auto-complete>"
+                        }],
+                    "text": "Called when a key is pressed in the input."
+                },
+                "complexType": {
+                    "original": "KeyboardEvent",
+                    "resolved": "KeyboardEvent",
+                    "references": {
+                        "KeyboardEvent": {
+                            "location": "global",
+                            "id": "global::KeyboardEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "xPopupScroll",
+                "name": "xPopupScroll",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-auto-complete onXPopupScroll={(ev) => console.log(ev.detail)}></x-auto-complete>"
+                        }],
+                    "text": "Called when the popup scroll."
+                },
+                "complexType": {
+                    "original": "AutoCompletePopupScrollEventDetail",
+                    "resolved": "AutoCompletePopupScrollEventDetail",
+                    "references": {
+                        "AutoCompletePopupScrollEventDetail": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-auto-complete/types.ts::AutoCompletePopupScrollEventDetail",
+                            "referenceLocation": "AutoCompletePopupScrollEventDetail"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "setFocus": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Focus the input element.",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "Promise<void>"
+                        }, {
+                            "name": "example",
+                            "text": "await el.setFocus()"
+                        }]
+                }
+            },
+            "setBlur": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Blur the input element.",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "Promise<void>"
+                        }, {
+                            "name": "example",
+                            "text": "await el.setBlur()"
+                        }]
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "options",
+                "methodName": "onOptionsChange"
+            }, {
+                "propName": "value",
+                "methodName": "onValueChange"
+            }, {
+                "propName": "open",
+                "methodName": "onOpenPropChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "handleWindowClick",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "keydown",
+                "method": "handleKeydown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}