@xplor-education/core-stencil-components 2.0.0

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

@@ -0,0 +1,553 @@
+import { Host, h } from "@stencil/core";
+export class XplorCombobox {
+    constructor() {
+        /**
+         * Array of items to display in the dropdown
+         */
+        this.items = [];
+        /**
+         * Selected value(s)
+         */
+        this.value = null;
+        /**
+         * Placeholder text
+         */
+        this.placeholder = 'Type to search or add...';
+        /**
+         * Disable the combobox
+         */
+        this.disabled = false;
+        /**
+         * Make the combobox readonly
+         */
+        this.readonly = false;
+        /**
+         * Clear button
+         */
+        this.clearable = false;
+        /**
+         * Allow multiple selection
+         */
+        this.multiple = false;
+        /**
+         * Allow creating new items
+         */
+        this.allowCustom = true;
+        /**
+         * Message to display when creating new item
+         */
+        this.createMessage = 'Create';
+        this.isOpen = false;
+        this.searchQuery = '';
+        this.filteredItems = [];
+        this.selectedItems = [];
+        this.highlightedIndex = -1;
+        this.customItems = [];
+        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;
+            const totalItems = this.filteredItems.length + (this.canCreateNew() ? 1 : 0);
+            switch (event.key) {
+                case 'ArrowDown':
+                    event.preventDefault();
+                    this.isOpen = true;
+                    this.highlightedIndex = Math.min(this.highlightedIndex + 1, totalItems - 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) {
+                        if (this.highlightedIndex < this.filteredItems.length) {
+                            this.selectItem(this.filteredItems[this.highlightedIndex]);
+                        }
+                        else if (this.canCreateNew()) {
+                            this.createNewItem();
+                        }
+                    }
+                    else if (this.canCreateNew() && this.searchQuery.trim() !== '') {
+                        this.createNewItem();
+                    }
+                    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();
+        };
+    }
+    componentWillLoad() {
+        this.filterItems();
+        if (this.value !== null) {
+            if (this.multiple && Array.isArray(this.value)) {
+                this.selectedItems = this.value;
+            }
+            else if (!this.multiple) {
+                const allItems = [...this.items, ...this.customItems];
+                const selectedItem = allItems.find(item => item.value === this.value);
+                if (selectedItem) {
+                    this.searchQuery = selectedItem.label;
+                }
+            }
+        }
+    }
+    handleDocumentClick(event) {
+        const target = event.target;
+        if (!this.el.contains(target)) {
+            this.isOpen = false;
+        }
+    }
+    filterItems() {
+        const query = this.searchQuery.toLowerCase();
+        const allItems = [...this.items, ...this.customItems];
+        if (query === '') {
+            this.filteredItems = allItems;
+            return;
+        }
+        this.filteredItems = allItems.filter(item => item.label.toLowerCase().includes(query));
+    }
+    canCreateNew() {
+        if (!this.allowCustom || this.searchQuery.trim() === '') {
+            return false;
+        }
+        const allItems = [...this.items, ...this.customItems];
+        const exactMatch = allItems.some(item => item.label.toLowerCase() === this.searchQuery.toLowerCase());
+        return !exactMatch;
+    }
+    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;
+        if (this.multiple) {
+            if (!this.selectedItems.includes(item.value)) {
+                this.selectedItems = [...this.selectedItems, item.value];
+                this.value = this.selectedItems;
+                this.xplorChange.emit(this.value);
+            }
+            this.searchQuery = '';
+            this.filterItems();
+        }
+        else {
+            this.value = item.value;
+            this.searchQuery = item.label;
+            this.isOpen = false;
+            this.xplorChange.emit(this.value);
+        }
+        this.xplorSelect.emit(item);
+        (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    createNewItem() {
+        const newValue = this.searchQuery.trim();
+        const newItem = {
+            label: newValue,
+            value: newValue,
+        };
+        this.customItems = [...this.customItems, newItem];
+        this.selectItem(newItem);
+        this.xplorCreate.emit(newValue);
+    }
+    removeItem(value) {
+        this.selectedItems = this.selectedItems.filter(v => v !== value);
+        this.value = this.selectedItems;
+        this.xplorChange.emit(this.value);
+    }
+    getSelectedItemLabel(value) {
+        const allItems = [...this.items, ...this.customItems];
+        const item = allItems.find(i => i.value === value);
+        return item ? item.label : value;
+    }
+    render() {
+        const hasValue = this.multiple ? this.selectedItems.length > 0 : this.value !== null && this.searchQuery !== '';
+        const showCreateOption = this.canCreateNew();
+        return (h(Host, { key: '64bfbc829a52c048f8270ab328f73607bd94ebc1' }, h("div", { key: '25d9cf959f68c555befdfd5d2351cbb1964b1e46', class: {
+                'combobox': true,
+                'combobox--disabled': this.disabled,
+                'combobox--readonly': this.readonly,
+                'combobox--open': this.isOpen,
+            } }, this.label && (h("label", { key: '5d6afc2c5c9b3c84abca67469b87c1acb88b9517', class: "combobox__label" }, this.label)), h("div", { key: '5d7666d518792cc71c7062453f308771499056f9', class: "combobox__input-wrapper" }, this.multiple && this.selectedItems.length > 0 && (h("div", { key: 'c16c2887b644a9c47034b70a949a7d4dcc403233', class: "combobox__chips" }, this.selectedItems.map(value => (h("div", { class: "combobox__chip" }, h("span", { class: "combobox__chip-label" }, this.getSelectedItemLabel(value)), h("button", { type: "button", class: "combobox__chip-remove", onClick: () => this.removeItem(value), disabled: this.disabled || this.readonly }, "\u00D7")))))), h("input", { key: '28721137cc8339ac1c0881319dc4718ed2c04cf2', ref: (el) => (this.inputEl = el), type: "text", class: "combobox__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: 'ba914008002039d274efd11f9790e9d13613a048', class: "combobox__actions" }, this.clearable && hasValue && !this.disabled && !this.readonly && (h("button", { key: '3b442197e1a6e0b94157dfb6f3a5d5e5529419dc', type: "button", class: "combobox__clear", onClick: this.handleClear, "aria-label": "Clear" }, "\u00D7")), h("span", { key: 'cdafaeb0392798f291892342d50a0cec7234b7a1', class: "combobox__icon" }, "\u25BC"))), this.isOpen && (this.filteredItems.length > 0 || showCreateOption) && (h("div", { key: 'd50da0e18e34a079345c13498efbf3c61fb6be28', class: "combobox__dropdown", ref: (el) => (this.dropdownEl = el) }, this.filteredItems.map((item, index) => (h("div", { key: item.value, "data-index": index, class: {
+                'combobox__item': true,
+                'combobox__item--highlighted': index === this.highlightedIndex,
+                'combobox__item--selected': this.multiple
+                    ? this.selectedItems.includes(item.value)
+                    : this.value === item.value,
+                'combobox__item--disabled': item.disabled,
+            }, onClick: () => this.selectItem(item) }, item.label))), showCreateOption && (h("div", { key: '9801a00634c1b6a1ed4bf1f97dc5c5321dc8c189', "data-index": this.filteredItems.length, class: {
+                'combobox__item': true,
+                'combobox__item--create': true,
+                'combobox__item--highlighted': this.highlightedIndex === this.filteredItems.length,
+            }, onClick: () => this.createNewItem() }, h("span", { key: '4d563ce7576c3caa2b343bfe18dbdf2c29f0ceb2', class: "combobox__create-label" }, this.createMessage, ":"), ' ', h("strong", { key: 'e792de9d6e8586757271e0838b9035da7c3f47cb' }, "\"", this.searchQuery, "\""))))), this.isOpen && this.filteredItems.length === 0 && !showCreateOption && (h("div", { key: 'f163e417e711ec833320a8f6d687a3202741b1fe', class: "combobox__dropdown" }, h("div", { key: '30831097ffecac58be272ff9fe6931e2d7bd4a34', class: "combobox__no-results" }, "No results found"))))));
+    }
+    static get is() { return "xplor-combobox"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["xplor-combobox.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["xplor-combobox.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "items": {
+                "type": "unknown",
+                "attribute": "items",
+                "mutable": false,
+                "complexType": {
+                    "original": "ComboboxItem[]",
+                    "resolved": "ComboboxItem[]",
+                    "references": {
+                        "ComboboxItem": {
+                            "location": "local",
+                            "path": "/Users/darryn.lee-warden/Documents/DEV/xplor_design_system/apps/core-stencil-components/src/components/xplor-combobox/xplor-combobox.tsx",
+                            "id": "src/components/xplor-combobox/xplor-combobox.tsx::ComboboxItem"
+                        }
+                    }
+                },
+                "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(s)"
+                },
+                "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": "'Type to search or add...'"
+            },
+            "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 combobox"
+                },
+                "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 combobox 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"
+            },
+            "allowCustom": {
+                "type": "boolean",
+                "attribute": "allow-custom",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Allow creating new items"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "createMessage": {
+                "type": "string",
+                "attribute": "create-message",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Message to display when creating new item"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'Create'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isOpen": {},
+            "searchQuery": {},
+            "filteredItems": {},
+            "selectedItems": {},
+            "highlightedIndex": {},
+            "customItems": {}
+        };
+    }
+    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": "ComboboxItem",
+                    "resolved": "ComboboxItem",
+                    "references": {
+                        "ComboboxItem": {
+                            "location": "local",
+                            "path": "/Users/darryn.lee-warden/Documents/DEV/xplor_design_system/apps/core-stencil-components/src/components/xplor-combobox/xplor-combobox.tsx",
+                            "id": "src/components/xplor-combobox/xplor-combobox.tsx::ComboboxItem"
+                        }
+                    }
+                }
+            }, {
+                "method": "xplorCreate",
+                "name": "xplorCreate",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "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-combobox.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"xplor-combobox.js","sourceRoot":"","sources":["../../../src/components/xplor-combobox/xplor-combobox.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, State, Event, EventEmitter, Element, Listen } from '@stencil/core';\n\nexport interface ComboboxItem {\n    label: string;\n    value: any;\n    disabled?: boolean;\n    [key: string]: any;\n}\n\n@Component({\n    tag: 'xplor-combobox',\n    styleUrl: 'xplor-combobox.scss',\n    scoped: true,\n})\nexport class XplorCombobox {\n    @Element() el: HTMLElement;\n\n    /**\n     * Array of items to display in the dropdown\n     */\n    @Prop() items: ComboboxItem[] = [];\n\n    /**\n     * Selected value(s)\n     */\n    @Prop({ mutable: true }) value: any = null;\n\n    /**\n     * Placeholder text\n     */\n    @Prop() placeholder: string = 'Type to search or add...';\n\n    /**\n     * Label for the input\n     */\n    @Prop() label: string;\n\n    /**\n     * Disable the combobox\n     */\n    @Prop() disabled: boolean = false;\n\n    /**\n     * Make the combobox 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     * Allow creating new items\n     */\n    @Prop() allowCustom: boolean = true;\n\n    /**\n     * Message to display when creating new item\n     */\n    @Prop() createMessage: string = 'Create';\n\n    @State() isOpen: boolean = false;\n    @State() searchQuery: string = '';\n    @State() filteredItems: ComboboxItem[] = [];\n    @State() selectedItems: any[] = [];\n    @State() highlightedIndex: number = -1;\n    @State() customItems: ComboboxItem[] = [];\n\n    @Event() xplorChange: EventEmitter<any>;\n    @Event() xplorSelect: EventEmitter<ComboboxItem>;\n    @Event() xplorCreate: EventEmitter<string>;\n    @Event() xplorClear: EventEmitter<void>;\n    @Event() xplorSearch: EventEmitter<string>;\n\n    private inputEl: HTMLInputElement;\n    private dropdownEl: HTMLDivElement;\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 allItems = [...this.items, ...this.customItems];\n                const selectedItem = allItems.find(item => item.value === this.value);\n                if (selectedItem) {\n                    this.searchQuery = selectedItem.label;\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        const query = this.searchQuery.toLowerCase();\n        const allItems = [...this.items, ...this.customItems];\n\n        if (query === '') {\n            this.filteredItems = allItems;\n            return;\n        }\n\n        this.filteredItems = allItems.filter(item =>\n            item.label.toLowerCase().includes(query)\n        );\n    }\n\n    private canCreateNew(): boolean {\n        if (!this.allowCustom || this.searchQuery.trim() === '') {\n            return false;\n        }\n\n        const allItems = [...this.items, ...this.customItems];\n        const exactMatch = allItems.some(\n            item => item.label.toLowerCase() === this.searchQuery.toLowerCase()\n        );\n\n        return !exactMatch;\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        const totalItems = this.filteredItems.length + (this.canCreateNew() ? 1 : 0);\n\n        switch (event.key) {\n            case 'ArrowDown':\n                event.preventDefault();\n                this.isOpen = true;\n                this.highlightedIndex = Math.min(this.highlightedIndex + 1, totalItems - 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) {\n                    if (this.highlightedIndex < this.filteredItems.length) {\n                        this.selectItem(this.filteredItems[this.highlightedIndex]);\n                    } else if (this.canCreateNew()) {\n                        this.createNewItem();\n                    }\n                } else if (this.canCreateNew() && this.searchQuery.trim() !== '') {\n                    this.createNewItem();\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: ComboboxItem) {\n        if (item.disabled) return;\n\n        if (this.multiple) {\n            if (!this.selectedItems.includes(item.value)) {\n                this.selectedItems = [...this.selectedItems, item.value];\n                this.value = this.selectedItems;\n                this.xplorChange.emit(this.value);\n            }\n            this.searchQuery = '';\n            this.filterItems();\n        } else {\n            this.value = item.value;\n            this.searchQuery = item.label;\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 createNewItem() {\n        const newValue = this.searchQuery.trim();\n        const newItem: ComboboxItem = {\n            label: newValue,\n            value: newValue,\n        };\n\n        this.customItems = [...this.customItems, newItem];\n        this.selectItem(newItem);\n        this.xplorCreate.emit(newValue);\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 allItems = [...this.items, ...this.customItems];\n        const item = allItems.find(i => i.value === value);\n        return item ? item.label : value;\n    }\n\n    render() {\n        const hasValue = this.multiple ? this.selectedItems.length > 0 : this.value !== null && this.searchQuery !== '';\n        const showCreateOption = this.canCreateNew();\n\n        return (\n            <Host>\n                <div\n                    class={{\n                        'combobox': true,\n                        'combobox--disabled': this.disabled,\n                        'combobox--readonly': this.readonly,\n                        'combobox--open': this.isOpen,\n                    }}\n                >\n                    {this.label && (\n                        <label class=\"combobox__label\">{this.label}</label>\n                    )}\n\n                    <div class=\"combobox__input-wrapper\">\n                        {this.multiple && this.selectedItems.length > 0 && (\n                            <div class=\"combobox__chips\">\n                                {this.selectedItems.map(value => (\n                                    <div class=\"combobox__chip\">\n                                        <span class=\"combobox__chip-label\">\n                                            {this.getSelectedItemLabel(value)}\n                                        </span>\n                                        <button\n                                            type=\"button\"\n                                            class=\"combobox__chip-remove\"\n                                            onClick={() => this.removeItem(value)}\n                                            disabled={this.disabled || this.readonly}\n                                        >\n                                            ×\n                                        </button>\n                                    </div>\n                                ))}\n                            </div>\n                        )}\n\n                        <input\n                            ref={(el) => (this.inputEl = el)}\n                            type=\"text\"\n                            class=\"combobox__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=\"combobox__actions\">\n                            {this.clearable && hasValue && !this.disabled && !this.readonly && (\n                                <button\n                                    type=\"button\"\n                                    class=\"combobox__clear\"\n                                    onClick={this.handleClear}\n                                    aria-label=\"Clear\"\n                                >\n                                    ×\n                                </button>\n                            )}\n                            <span class=\"combobox__icon\">▼</span>\n                        </div>\n                    </div>\n\n                    {this.isOpen && (this.filteredItems.length > 0 || showCreateOption) && (\n                        <div class=\"combobox__dropdown\" ref={(el) => (this.dropdownEl = el)}>\n                            {this.filteredItems.map((item, index) => (\n                                <div\n                                    key={item.value}\n                                    data-index={index}\n                                    class={{\n                                        'combobox__item': true,\n                                        'combobox__item--highlighted': index === this.highlightedIndex,\n                                        'combobox__item--selected': this.multiple\n                                            ? this.selectedItems.includes(item.value)\n                                            : this.value === item.value,\n                                        'combobox__item--disabled': item.disabled,\n                                    }}\n                                    onClick={() => this.selectItem(item)}\n                                >\n                                    {item.label}\n                                </div>\n                            ))}\n\n                            {showCreateOption && (\n                                <div\n                                    data-index={this.filteredItems.length}\n                                    class={{\n                                        'combobox__item': true,\n                                        'combobox__item--create': true,\n                                        'combobox__item--highlighted': this.highlightedIndex === this.filteredItems.length,\n                                    }}\n                                    onClick={() => this.createNewItem()}\n                                >\n                                    <span class=\"combobox__create-label\">{this.createMessage}:</span>{' '}\n                                    <strong>\"{this.searchQuery}\"</strong>\n                                </div>\n                            )}\n                        </div>\n                    )}\n\n                    {this.isOpen && this.filteredItems.length === 0 && !showCreateOption && (\n                        <div class=\"combobox__dropdown\">\n                            <div class=\"combobox__no-results\">No results found</div>\n                        </div>\n                    )}\n                </div>\n            </Host>\n        );\n    }\n}\n"]}