@xplor-education/core-stencil-components 2.0.0

package/dist/collection/components/xplor-autocomplete/xplor-autocomplete.js

@@ -0,0 +1,613 @@
+import { Host, h } from "@stencil/core";
+export class XplorAutocomplete {
+    constructor() {
+        /**
+         * Array of items to display in the dropdown
+         */
+        this.items = [];
+        /**
+         * Selected value
+         */
+        this.value = null;
+        /**
+         * Placeholder text
+         */
+        this.placeholder = 'Search...';
+        /**
+         * Disable the autocomplete
+         */
+        this.disabled = false;
+        /**
+         * Make the autocomplete readonly
+         */
+        this.readonly = false;
+        /**
+         * Clear button
+         */
+        this.clearable = false;
+        /**
+         * Allow multiple selection
+         */
+        this.multiple = false;
+        /**
+         * Minimum characters to trigger search
+         */
+        this.minSearchLength = 0;
+        /**
+         * Key to extract value from item objects
+         */
+        this.itemValue = 'value';
+        /**
+         * Key to extract display text from item objects
+         */
+        this.itemText = 'label';
+        /**
+         * Max width of the dropdown menu
+         */
+        this.menuMaxWidth = '100%';
+        this.isOpen = false;
+        this.searchQuery = '';
+        this.filteredItems = [];
+        this.selectedItems = [];
+        this.highlightedIndex = -1;
+        this.handleInputFocus = () => {
+            if (this.disabled || this.readonly)
+                return;
+            this.isOpen = true;
+            this.highlightedIndex = -1;
+        };
+        this.handleInputChange = (event) => {
+            const input = event.target;
+            this.searchQuery = input.value;
+            this.filterItems();
+            this.isOpen = true;
+            this.highlightedIndex = -1;
+            this.xplorSearch.emit(this.searchQuery);
+            if (!this.multiple && this.searchQuery === '') {
+                this.value = null;
+                this.xplorChange.emit(null);
+            }
+        };
+        this.handleInputKeyDown = (event) => {
+            var _a;
+            if (this.disabled || this.readonly)
+                return;
+            switch (event.key) {
+                case 'ArrowDown':
+                    event.preventDefault();
+                    this.isOpen = true;
+                    this.highlightedIndex = Math.min(this.highlightedIndex + 1, this.filteredItems.length - 1);
+                    this.scrollToHighlighted();
+                    break;
+                case 'ArrowUp':
+                    event.preventDefault();
+                    this.highlightedIndex = Math.max(this.highlightedIndex - 1, -1);
+                    this.scrollToHighlighted();
+                    break;
+                case 'Enter':
+                    event.preventDefault();
+                    if (this.highlightedIndex >= 0 && this.highlightedIndex < this.filteredItems.length) {
+                        this.selectItem(this.filteredItems[this.highlightedIndex]);
+                    }
+                    break;
+                case 'Escape':
+                    event.preventDefault();
+                    this.isOpen = false;
+                    (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.blur();
+                    break;
+                case 'Backspace':
+                    if (this.multiple && this.searchQuery === '' && this.selectedItems.length > 0) {
+                        event.preventDefault();
+                        this.removeItem(this.selectedItems[this.selectedItems.length - 1]);
+                    }
+                    break;
+            }
+        };
+        this.handleClear = () => {
+            var _a;
+            this.value = this.multiple ? [] : null;
+            this.selectedItems = [];
+            this.searchQuery = '';
+            this.filterItems();
+            this.xplorChange.emit(this.value);
+            this.xplorClear.emit();
+            (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.focus();
+        };
+    }
+    getItemValue(item) {
+        return item[this.itemValue] !== undefined ? item[this.itemValue] : item.value;
+    }
+    getItemText(item) {
+        return item[this.itemText] !== undefined ? String(item[this.itemText]) : String(item.label);
+    }
+    componentWillLoad() {
+        this.filterItems();
+        if (this.value !== null) {
+            if (this.multiple && Array.isArray(this.value)) {
+                this.selectedItems = this.value;
+            }
+            else if (!this.multiple) {
+                const selectedItem = this.items.find(item => this.getItemValue(item) === this.value);
+                if (selectedItem) {
+                    this.searchQuery = this.getItemText(selectedItem);
+                }
+            }
+        }
+    }
+    handleDocumentClick(event) {
+        const target = event.target;
+        if (!this.el.contains(target)) {
+            this.isOpen = false;
+        }
+    }
+    filterItems() {
+        if (this.searchQuery.length < this.minSearchLength) {
+            this.filteredItems = this.items;
+            return;
+        }
+        const query = this.searchQuery.toLowerCase();
+        this.filteredItems = this.items.filter(item => this.getItemText(item).toLowerCase().includes(query));
+    }
+    scrollToHighlighted() {
+        if (this.dropdownEl && this.highlightedIndex >= 0) {
+            const highlightedEl = this.dropdownEl.querySelector(`[data-index="${this.highlightedIndex}"]`);
+            if (highlightedEl) {
+                highlightedEl.scrollIntoView({ block: 'nearest' });
+            }
+        }
+    }
+    selectItem(item) {
+        var _a;
+        if (item.disabled)
+            return;
+        const itemVal = this.getItemValue(item);
+        if (this.multiple) {
+            if (!this.selectedItems.includes(itemVal)) {
+                this.selectedItems = [...this.selectedItems, itemVal];
+                this.value = this.selectedItems;
+                this.xplorChange.emit(this.value);
+            }
+            this.searchQuery = '';
+            this.filterItems();
+        }
+        else {
+            this.value = itemVal;
+            this.searchQuery = this.getItemText(item);
+            this.isOpen = false;
+            this.xplorChange.emit(this.value);
+        }
+        this.xplorSelect.emit(item);
+        (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    removeItem(value) {
+        this.selectedItems = this.selectedItems.filter(v => v !== value);
+        this.value = this.selectedItems;
+        this.xplorChange.emit(this.value);
+    }
+    getSelectedItemLabel(value) {
+        const item = this.items.find(i => this.getItemValue(i) === value);
+        return item ? this.getItemText(item) : value;
+    }
+    findItemByValue(value) {
+        return this.items.find(i => this.getItemValue(i) === value);
+    }
+    render() {
+        const hasValue = this.multiple ? this.selectedItems.length > 0 : this.value !== null && this.searchQuery !== '';
+        return (h(Host, { key: '3f88b352e99fbaf327995f2392b22a589a838c72' }, h("div", { key: '358c6a0fbae370f7225c17f9b859edc0d5a1cfc5', class: {
+                'autocomplete': true,
+                'autocomplete--disabled': this.disabled,
+                'autocomplete--readonly': this.readonly,
+                'autocomplete--open': this.isOpen,
+            } }, this.label && (h("label", { key: 'e07d2fc33354bef628b7361eeb924cf00eafb989', class: "autocomplete__label" }, this.label)), h("div", { key: '455efa54f13e4aa22d62df4f30dbfb42540d4baf', class: "autocomplete__input-wrapper" }, this.multiple && this.selectedItems.length > 0 && (h("div", { key: 'e1f68cc007e84feb11f01bfcde8294a3b3a52122', class: "autocomplete__chips" }, this.selectedItems.map(value => {
+            const item = this.findItemByValue(value);
+            return (h("div", { class: "autocomplete__chip" }, h("span", { class: "autocomplete__chip-label" }, this.renderSelection && item ? this.renderSelection(item) : this.getSelectedItemLabel(value)), h("button", { type: "button", class: "autocomplete__chip-remove", onClick: () => this.removeItem(value), disabled: this.disabled || this.readonly }, "\u00D7")));
+        }))), h("input", { key: 'bfe3af918668f6003e11b3e331d7875773c31848', ref: (el) => (this.inputEl = el), type: "text", class: "autocomplete__input", placeholder: this.placeholder, value: this.searchQuery, onFocus: this.handleInputFocus, onInput: this.handleInputChange, onKeyDown: this.handleInputKeyDown, disabled: this.disabled, readonly: this.readonly, autocomplete: "off" }), h("div", { key: '6198fb2b029bd365c9929bdfe0b82815b3dd6bf2', class: "autocomplete__actions" }, this.clearable && hasValue && !this.disabled && !this.readonly && (h("button", { key: 'e997555b393f60ae3f4affd803a92ba39e95b48b', type: "button", class: "autocomplete__clear", onClick: this.handleClear, "aria-label": "Clear" }, "\u00D7")), h("span", { key: '0eab80a3ce9e55e403758ba0a53e89e7c3d3a36e', class: "autocomplete__icon" }, "\u25BC"))), this.isOpen && this.filteredItems.length > 0 && (h("div", { key: '37a77dc04d78b8c8cdc4decedf65f0adda67f626', class: "autocomplete__dropdown", ref: (el) => (this.dropdownEl = el), style: { maxWidth: this.menuMaxWidth } }, this.filteredItems.map((item, index) => {
+            const itemVal = this.getItemValue(item);
+            return (h("div", { key: itemVal, "data-index": index, class: {
+                    'autocomplete__item': true,
+                    'autocomplete__item--highlighted': index === this.highlightedIndex,
+                    'autocomplete__item--selected': this.multiple
+                        ? this.selectedItems.includes(itemVal)
+                        : this.value === itemVal,
+                    'autocomplete__item--disabled': item.disabled,
+                }, onClick: () => this.selectItem(item) }, this.renderItem ? this.renderItem(item) : this.getItemText(item)));
+        }))), this.isOpen && this.filteredItems.length === 0 && (h("div", { key: '0f27440009a83374a615acf39b400181f4c7189f', class: "autocomplete__dropdown", style: { maxWidth: this.menuMaxWidth } }, h("div", { key: '634fb46e7f539c1cddfa11f2a30f80e34a684913', class: "autocomplete__no-results" }, "No results found"))))));
+    }
+    static get is() { return "xplor-autocomplete"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["xplor-autocomplete.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["xplor-autocomplete.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "items": {
+                "type": "unknown",
+                "attribute": "items",
+                "mutable": false,
+                "complexType": {
+                    "original": "AutocompleteItem[]",
+                    "resolved": "AutocompleteItem[]",
+                    "references": {
+                        "AutocompleteItem": {
+                            "location": "local",
+                            "path": "/Users/darryn.lee-warden/Documents/DEV/xplor_design_system/apps/core-stencil-components/src/components/xplor-autocomplete/xplor-autocomplete.tsx",
+                            "id": "src/components/xplor-autocomplete/xplor-autocomplete.tsx::AutocompleteItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Array of items to display in the dropdown"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "value": {
+                "type": "any",
+                "attribute": "value",
+                "mutable": true,
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Selected value"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "null"
+            },
+            "placeholder": {
+                "type": "string",
+                "attribute": "placeholder",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Placeholder text"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'Search...'"
+            },
+            "label": {
+                "type": "string",
+                "attribute": "label",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label for the input"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "disabled": {
+                "type": "boolean",
+                "attribute": "disabled",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disable the autocomplete"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "readonly": {
+                "type": "boolean",
+                "attribute": "readonly",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Make the autocomplete readonly"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "clearable": {
+                "type": "boolean",
+                "attribute": "clearable",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Clear button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "multiple": {
+                "type": "boolean",
+                "attribute": "multiple",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Allow multiple selection"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "minSearchLength": {
+                "type": "number",
+                "attribute": "min-search-length",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Minimum characters to trigger search"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "0"
+            },
+            "itemValue": {
+                "type": "string",
+                "attribute": "item-value",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Key to extract value from item objects"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'value'"
+            },
+            "itemText": {
+                "type": "string",
+                "attribute": "item-text",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Key to extract display text from item objects"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'label'"
+            },
+            "menuMaxWidth": {
+                "type": "string",
+                "attribute": "menu-max-width",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Max width of the dropdown menu"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'100%'"
+            },
+            "renderItem": {
+                "type": "unknown",
+                "attribute": "render-item",
+                "mutable": false,
+                "complexType": {
+                    "original": "(item: AutocompleteItem) => any",
+                    "resolved": "(item: AutocompleteItem) => any",
+                    "references": {
+                        "AutocompleteItem": {
+                            "location": "local",
+                            "path": "/Users/darryn.lee-warden/Documents/DEV/xplor_design_system/apps/core-stencil-components/src/components/xplor-autocomplete/xplor-autocomplete.tsx",
+                            "id": "src/components/xplor-autocomplete/xplor-autocomplete.tsx::AutocompleteItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom render function for dropdown items"
+                },
+                "getter": false,
+                "setter": false
+            },
+            "renderSelection": {
+                "type": "unknown",
+                "attribute": "render-selection",
+                "mutable": false,
+                "complexType": {
+                    "original": "(item: AutocompleteItem) => any",
+                    "resolved": "(item: AutocompleteItem) => any",
+                    "references": {
+                        "AutocompleteItem": {
+                            "location": "local",
+                            "path": "/Users/darryn.lee-warden/Documents/DEV/xplor_design_system/apps/core-stencil-components/src/components/xplor-autocomplete/xplor-autocomplete.tsx",
+                            "id": "src/components/xplor-autocomplete/xplor-autocomplete.tsx::AutocompleteItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom render function for selected items (chips)"
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isOpen": {},
+            "searchQuery": {},
+            "filteredItems": {},
+            "selectedItems": {},
+            "highlightedIndex": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "xplorChange",
+                "name": "xplorChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "xplorSelect",
+                "name": "xplorSelect",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "AutocompleteItem",
+                    "resolved": "AutocompleteItem",
+                    "references": {
+                        "AutocompleteItem": {
+                            "location": "local",
+                            "path": "/Users/darryn.lee-warden/Documents/DEV/xplor_design_system/apps/core-stencil-components/src/components/xplor-autocomplete/xplor-autocomplete.tsx",
+                            "id": "src/components/xplor-autocomplete/xplor-autocomplete.tsx::AutocompleteItem"
+                        }
+                    }
+                }
+            }, {
+                "method": "xplorClear",
+                "name": "xplorClear",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "xplorSearch",
+                "name": "xplorSearch",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "handleDocumentClick",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=xplor-autocomplete.js.map

package/dist/collection/components/xplor-autocomplete/xplor-autocomplete.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"xplor-autocomplete.js","sourceRoot":"","sources":["../../../src/components/xplor-autocomplete/xplor-autocomplete.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, State, Event, EventEmitter, Element, Listen } from '@stencil/core';\n\nexport interface AutocompleteItem {\n    label: string;\n    value: any;\n    disabled?: boolean;\n    [key: string]: any;\n}\n\n@Component({\n    tag: 'xplor-autocomplete',\n    styleUrl: 'xplor-autocomplete.scss',\n    scoped: true,\n})\nexport class XplorAutocomplete {\n    @Element() el: HTMLElement;\n\n    /**\n     * Array of items to display in the dropdown\n     */\n    @Prop() items: AutocompleteItem[] = [];\n\n    /**\n     * Selected value\n     */\n    @Prop({ mutable: true }) value: any = null;\n\n    /**\n     * Placeholder text\n     */\n    @Prop() placeholder: string = 'Search...';\n\n    /**\n     * Label for the input\n     */\n    @Prop() label: string;\n\n    /**\n     * Disable the autocomplete\n     */\n    @Prop() disabled: boolean = false;\n\n    /**\n     * Make the autocomplete readonly\n     */\n    @Prop() readonly: boolean = false;\n\n    /**\n     * Clear button\n     */\n    @Prop() clearable: boolean = false;\n\n    /**\n     * Allow multiple selection\n     */\n    @Prop() multiple: boolean = false;\n\n    /**\n     * Minimum characters to trigger search\n     */\n    @Prop() minSearchLength: number = 0;\n\n    /**\n     * Key to extract value from item objects\n     */\n    @Prop() itemValue: string = 'value';\n\n    /**\n     * Key to extract display text from item objects\n     */\n    @Prop() itemText: string = 'label';\n\n    /**\n     * Max width of the dropdown menu\n     */\n    @Prop() menuMaxWidth: string = '100%';\n\n    /**\n     * Custom render function for dropdown items\n     */\n    @Prop() renderItem: (item: AutocompleteItem) => any;\n\n    /**\n     * Custom render function for selected items (chips)\n     */\n    @Prop() renderSelection: (item: AutocompleteItem) => any;\n\n    @State() isOpen: boolean = false;\n    @State() searchQuery: string = '';\n    @State() filteredItems: AutocompleteItem[] = [];\n    @State() selectedItems: any[] = [];\n    @State() highlightedIndex: number = -1;\n\n    @Event() xplorChange: EventEmitter<any>;\n    @Event() xplorSelect: EventEmitter<AutocompleteItem>;\n    @Event() xplorClear: EventEmitter<void>;\n    @Event() xplorSearch: EventEmitter<string>;\n\n    private inputEl: HTMLInputElement;\n    private dropdownEl: HTMLDivElement;\n\n    private getItemValue(item: AutocompleteItem): any {\n        return item[this.itemValue] !== undefined ? item[this.itemValue] : item.value;\n    }\n\n    private getItemText(item: AutocompleteItem): string {\n        return item[this.itemText] !== undefined ? String(item[this.itemText]) : String(item.label);\n    }\n\n    componentWillLoad() {\n        this.filterItems();\n        if (this.value !== null) {\n            if (this.multiple && Array.isArray(this.value)) {\n                this.selectedItems = this.value;\n            } else if (!this.multiple) {\n                const selectedItem = this.items.find(item => this.getItemValue(item) === this.value);\n                if (selectedItem) {\n                    this.searchQuery = this.getItemText(selectedItem);\n                }\n            }\n        }\n    }\n\n    @Listen('click', { target: 'document' })\n    handleDocumentClick(event: MouseEvent) {\n        const target = event.target as Node;\n        if (!this.el.contains(target)) {\n            this.isOpen = false;\n        }\n    }\n\n    private filterItems() {\n        if (this.searchQuery.length < this.minSearchLength) {\n            this.filteredItems = this.items;\n            return;\n        }\n\n        const query = this.searchQuery.toLowerCase();\n        this.filteredItems = this.items.filter(item =>\n            this.getItemText(item).toLowerCase().includes(query)\n        );\n    }\n\n    private handleInputFocus = () => {\n        if (this.disabled || this.readonly) return;\n        this.isOpen = true;\n        this.highlightedIndex = -1;\n    };\n\n    private handleInputChange = (event: Event) => {\n        const input = event.target as HTMLInputElement;\n        this.searchQuery = input.value;\n        this.filterItems();\n        this.isOpen = true;\n        this.highlightedIndex = -1;\n        this.xplorSearch.emit(this.searchQuery);\n\n        if (!this.multiple && this.searchQuery === '') {\n            this.value = null;\n            this.xplorChange.emit(null);\n        }\n    };\n\n    private handleInputKeyDown = (event: KeyboardEvent) => {\n        if (this.disabled || this.readonly) return;\n\n        switch (event.key) {\n            case 'ArrowDown':\n                event.preventDefault();\n                this.isOpen = true;\n                this.highlightedIndex = Math.min(this.highlightedIndex + 1, this.filteredItems.length - 1);\n                this.scrollToHighlighted();\n                break;\n\n            case 'ArrowUp':\n                event.preventDefault();\n                this.highlightedIndex = Math.max(this.highlightedIndex - 1, -1);\n                this.scrollToHighlighted();\n                break;\n\n            case 'Enter':\n                event.preventDefault();\n                if (this.highlightedIndex >= 0 && this.highlightedIndex < this.filteredItems.length) {\n                    this.selectItem(this.filteredItems[this.highlightedIndex]);\n                }\n                break;\n\n            case 'Escape':\n                event.preventDefault();\n                this.isOpen = false;\n                this.inputEl?.blur();\n                break;\n\n            case 'Backspace':\n                if (this.multiple && this.searchQuery === '' && this.selectedItems.length > 0) {\n                    event.preventDefault();\n                    this.removeItem(this.selectedItems[this.selectedItems.length - 1]);\n                }\n                break;\n        }\n    };\n\n    private scrollToHighlighted() {\n        if (this.dropdownEl && this.highlightedIndex >= 0) {\n            const highlightedEl = this.dropdownEl.querySelector(`[data-index=\"${this.highlightedIndex}\"]`) as HTMLElement;\n            if (highlightedEl) {\n                highlightedEl.scrollIntoView({ block: 'nearest' });\n            }\n        }\n    }\n\n    private selectItem(item: AutocompleteItem) {\n        if (item.disabled) return;\n\n        const itemVal = this.getItemValue(item);\n\n        if (this.multiple) {\n            if (!this.selectedItems.includes(itemVal)) {\n                this.selectedItems = [...this.selectedItems, itemVal];\n                this.value = this.selectedItems;\n                this.xplorChange.emit(this.value);\n            }\n            this.searchQuery = '';\n            this.filterItems();\n        } else {\n            this.value = itemVal;\n            this.searchQuery = this.getItemText(item);\n            this.isOpen = false;\n            this.xplorChange.emit(this.value);\n        }\n\n        this.xplorSelect.emit(item);\n        this.inputEl?.focus();\n    }\n\n    private removeItem(value: any) {\n        this.selectedItems = this.selectedItems.filter(v => v !== value);\n        this.value = this.selectedItems;\n        this.xplorChange.emit(this.value);\n    }\n\n    private handleClear = () => {\n        this.value = this.multiple ? [] : null;\n        this.selectedItems = [];\n        this.searchQuery = '';\n        this.filterItems();\n        this.xplorChange.emit(this.value);\n        this.xplorClear.emit();\n        this.inputEl?.focus();\n    };\n\n    private getSelectedItemLabel(value: any): string {\n        const item = this.items.find(i => this.getItemValue(i) === value);\n        return item ? this.getItemText(item) : value;\n    }\n\n    private findItemByValue(value: any): AutocompleteItem | undefined {\n        return this.items.find(i => this.getItemValue(i) === value);\n    }\n\n    render() {\n        const hasValue = this.multiple ? this.selectedItems.length > 0 : this.value !== null && this.searchQuery !== '';\n\n        return (\n            <Host>\n                <div\n                    class={{\n                        'autocomplete': true,\n                        'autocomplete--disabled': this.disabled,\n                        'autocomplete--readonly': this.readonly,\n                        'autocomplete--open': this.isOpen,\n                    }}\n                >\n                    {this.label && (\n                        <label class=\"autocomplete__label\">{this.label}</label>\n                    )}\n\n                    <div class=\"autocomplete__input-wrapper\">\n                        {this.multiple && this.selectedItems.length > 0 && (\n                            <div class=\"autocomplete__chips\">\n                                {this.selectedItems.map(value => {\n                                    const item = this.findItemByValue(value);\n                                    return (\n                                        <div class=\"autocomplete__chip\">\n                                            <span class=\"autocomplete__chip-label\">\n                                                {this.renderSelection && item ? this.renderSelection(item) : this.getSelectedItemLabel(value)}\n                                            </span>\n                                            <button\n                                                type=\"button\"\n                                                class=\"autocomplete__chip-remove\"\n                                                onClick={() => this.removeItem(value)}\n                                                disabled={this.disabled || this.readonly}\n                                            >\n                                                ×\n                                            </button>\n                                        </div>\n                                    );\n                                })}\n                            </div>\n                        )}\n\n                        <input\n                            ref={(el) => (this.inputEl = el)}\n                            type=\"text\"\n                            class=\"autocomplete__input\"\n                            placeholder={this.placeholder}\n                            value={this.searchQuery}\n                            onFocus={this.handleInputFocus}\n                            onInput={this.handleInputChange}\n                            onKeyDown={this.handleInputKeyDown}\n                            disabled={this.disabled}\n                            readonly={this.readonly}\n                            autocomplete=\"off\"\n                        />\n\n                        <div class=\"autocomplete__actions\">\n                            {this.clearable && hasValue && !this.disabled && !this.readonly && (\n                                <button\n                                    type=\"button\"\n                                    class=\"autocomplete__clear\"\n                                    onClick={this.handleClear}\n                                    aria-label=\"Clear\"\n                                >\n                                    ×\n                                </button>\n                            )}\n                            <span class=\"autocomplete__icon\">▼</span>\n                        </div>\n                    </div>\n\n                    {this.isOpen && this.filteredItems.length > 0 && (\n                        <div class=\"autocomplete__dropdown\" ref={(el) => (this.dropdownEl = el)} style={{ maxWidth: this.menuMaxWidth }}>\n                            {this.filteredItems.map((item, index) => {\n                                const itemVal = this.getItemValue(item);\n                                return (\n                                    <div\n                                        key={itemVal}\n                                        data-index={index}\n                                        class={{\n                                            'autocomplete__item': true,\n                                            'autocomplete__item--highlighted': index === this.highlightedIndex,\n                                            'autocomplete__item--selected': this.multiple\n                                                ? this.selectedItems.includes(itemVal)\n                                                : this.value === itemVal,\n                                            'autocomplete__item--disabled': item.disabled,\n                                        }}\n                                        onClick={() => this.selectItem(item)}\n                                    >\n                                        {this.renderItem ? this.renderItem(item) : this.getItemText(item)}\n                                    </div>\n                                );\n                            })}\n                        </div>\n                    )}\n\n                    {this.isOpen && this.filteredItems.length === 0 && (\n                        <div class=\"autocomplete__dropdown\" style={{ maxWidth: this.menuMaxWidth }}>\n                            <div class=\"autocomplete__no-results\">No results found</div>\n                        </div>\n                    )}\n                </div>\n            </Host>\n        );\n    }\n}\n"]}