@sekiui/elements 0.0.65 → 0.0.70

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

@@ -0,0 +1,883 @@
+import { Host, h } from "@stencil/core";
+/**
+ * @slot - Content containing seki-combobox-input and seki-combobox-content
+ */
+export class SekiCombobox {
+    constructor() {
+        /** Enable multi-select mode */
+        this.multiple = false;
+        /** Multi-select display mode */
+        this.multiSelectDisplay = 'chips';
+        /** Allow values not in the list */
+        this.allowCustomValue = false;
+        /** Debounce delay for search (ms) */
+        this.debounce = 300;
+        /** Placeholder text */
+        this.placeholder = 'Search...';
+        /** Disable component */
+        this.disabled = false;
+        /** Mark as required */
+        this.required = false;
+        /** Initial dropdown open state (uncontrolled mode) */
+        this.defaultOpen = false;
+        /** Set loading state externally (for async) */
+        this.loading = false;
+        // ===========================
+        // State
+        // ===========================
+        this.internalValue = '';
+        this.isOpen = false;
+        this.searchQuery = '';
+        this.focusedItemValue = null;
+        this.registeredItems = [];
+        this.filteredItems = [];
+        this.listboxId = `combobox-listbox-${Math.random().toString(36).substr(2, 9)}`;
+        this.inputId = `combobox-input-${Math.random().toString(36).substr(2, 9)}`;
+        this.triggerId = `combobox-trigger-${Math.random().toString(36).substr(2, 9)}`;
+        this.debounceTimeoutId = null;
+        this.handleClickOutside = (event) => {
+            if (!this.isOpen)
+                return;
+            const target = event.target;
+            if (!this.el.contains(target)) {
+                this.handleOpenChange(false);
+            }
+        };
+        this.handleSearchChange = (query) => {
+            this.searchQuery = query;
+            // Filter locally
+            this.filterItems(query);
+            // Debounce for async search
+            if (this.debounceTimeoutId !== null) {
+                clearTimeout(this.debounceTimeoutId);
+            }
+            this.debounceTimeoutId = window.setTimeout(() => {
+                this.sekiSearch.emit({ query, timestamp: Date.now() });
+            }, this.debounce);
+        };
+        this.handleValueChange = (newValue) => {
+            this.internalValue = newValue;
+            if (this.value !== undefined) {
+                this.value = newValue;
+            }
+            const selectedItems = this.getSelectedItems();
+            if (this.multiple && Array.isArray(newValue)) {
+                this.sekiChange.emit({
+                    value: newValue,
+                    items: selectedItems,
+                });
+            }
+            else {
+                this.sekiChange.emit({
+                    value: newValue,
+                    item: selectedItems[0],
+                });
+            }
+            // Close dropdown in single-select mode
+            if (!this.multiple) {
+                this.handleOpenChange(false);
+                this.searchQuery = '';
+                this.filterItems('');
+            }
+        };
+        this.handleOpenChange = (open) => {
+            this.isOpen = open;
+            if (this.open !== undefined) {
+                this.open = open;
+            }
+            if (!open) {
+                this.focusedItemValue = null;
+            }
+        };
+        this.handleItemFocus = (value) => {
+            this.focusedItemValue = value;
+        };
+        this.handleItemSelect = (value) => {
+            if (this.multiple) {
+                const currentValue = Array.isArray(this.internalValue) ? this.internalValue : [];
+                if (currentValue.includes(value)) {
+                    this.handleValueChange(currentValue.filter(v => v !== value));
+                }
+                else {
+                    this.handleValueChange([...currentValue, value]);
+                }
+            }
+            else {
+                this.handleValueChange(value);
+            }
+        };
+        this.handleRemoveValue = (value) => {
+            if (this.multiple && Array.isArray(this.internalValue)) {
+                this.handleValueChange(this.internalValue.filter(v => v !== value));
+            }
+        };
+        this.handleCustomValueCreate = (value) => {
+            if (!this.allowCustomValue)
+                return;
+            const accepted = true;
+            this.sekiCustomValue.emit({ value, accepted });
+            if (this.multiple) {
+                const currentValue = Array.isArray(this.internalValue) ? this.internalValue : [];
+                this.handleValueChange([...currentValue, value]);
+            }
+            else {
+                this.handleValueChange(value);
+            }
+        };
+        this.isValueSelected = (value) => {
+            if (this.multiple && Array.isArray(this.internalValue)) {
+                return this.internalValue.includes(value);
+            }
+            return this.internalValue === value;
+        };
+        this.getSelectedItems = () => {
+            if (this.multiple && Array.isArray(this.internalValue)) {
+                return this.registeredItems.filter(item => this.internalValue.includes(item.value));
+            }
+            return this.registeredItems.filter(item => item.value === this.internalValue);
+        };
+        this.getFilteredItems = () => {
+            return this.filteredItems;
+        };
+        this.registerItem = (item) => {
+            // Avoid duplicates
+            if (!this.registeredItems.find(i => i.value === item.value)) {
+                this.registeredItems = [...this.registeredItems, item];
+                this.filterItems(this.searchQuery);
+            }
+        };
+        this.unregisterItem = (value) => {
+            this.registeredItems = this.registeredItems.filter(item => item.value !== value);
+            this.filterItems(this.searchQuery);
+        };
+    }
+    // ===========================
+    // Lifecycle
+    // ===========================
+    componentWillLoad() {
+        // Initialize internal state
+        if (this.value !== undefined) {
+            this.internalValue = this.value;
+        }
+        else if (this.defaultValue !== undefined) {
+            this.internalValue = this.defaultValue;
+        }
+        else {
+            this.internalValue = this.multiple ? [] : '';
+        }
+        if (this.open !== undefined) {
+            this.isOpen = this.open;
+        }
+        else if (this.defaultOpen) {
+            this.isOpen = this.defaultOpen;
+        }
+        // Initialize items if provided
+        if (this.items) {
+            this.registeredItems = [...this.items];
+            this.filteredItems = [...this.items];
+        }
+        // Expose context
+        this.updateContextOnElement();
+    }
+    componentDidLoad() {
+        this.updateContextOnElement();
+        // Add click-outside listener
+        this.clickOutsideListener = this.handleClickOutside.bind(this);
+        document.addEventListener('click', this.clickOutsideListener, true);
+    }
+    componentDidRender() {
+        this.updateContextOnElement();
+    }
+    disconnectedCallback() {
+        if (this.clickOutsideListener) {
+            document.removeEventListener('click', this.clickOutsideListener, true);
+        }
+        if (this.debounceTimeoutId !== null) {
+            clearTimeout(this.debounceTimeoutId);
+        }
+    }
+    handleValuePropChange(newValue) {
+        if (newValue !== undefined) {
+            this.internalValue = newValue;
+        }
+        this.updateContextOnElement();
+    }
+    handleOpenPropChange(newOpen) {
+        if (newOpen !== undefined) {
+            this.isOpen = newOpen;
+        }
+        this.updateContextOnElement();
+    }
+    handleItemsPropChange(newItems) {
+        if (newItems) {
+            this.registeredItems = [...newItems];
+            this.filterItems(this.searchQuery);
+        }
+        this.updateContextOnElement();
+    }
+    handleStateChange() {
+        this.updateContextOnElement();
+    }
+    handleKeyboardEvent(event) {
+        this.handleKeyboard(event.detail.key);
+    }
+    updateContextOnElement() {
+        this.el.comboboxContext = this.comboboxContext;
+    }
+    // ===========================
+    // Methods
+    // ===========================
+    /** Programmatically open the dropdown */
+    async openDropdown() {
+        this.handleOpenChange(true);
+    }
+    /** Programmatically close the dropdown */
+    async closeDropdown() {
+        this.handleOpenChange(false);
+    }
+    /** Clear all selections */
+    async clearSelection() {
+        this.handleValueChange(this.multiple ? [] : '');
+    }
+    /** Set the search query programmatically */
+    async setQuery(query) {
+        this.handleSearchChange(query);
+    }
+    /** Handle keyboard navigation */
+    handleKeyboard(key) {
+        if (!this.isOpen && (key === 'ArrowDown' || key === 'Enter')) {
+            this.handleOpenChange(true);
+            return;
+        }
+        const enabledItems = this.filteredItems.filter(i => !i.disabled);
+        if (enabledItems.length === 0)
+            return;
+        switch (key) {
+            case 'ArrowDown':
+                this.focusNextItem(enabledItems);
+                break;
+            case 'ArrowUp':
+                this.focusPreviousItem(enabledItems);
+                break;
+            case 'Home':
+                this.focusedItemValue = enabledItems[0].value;
+                break;
+            case 'End':
+                this.focusedItemValue = enabledItems[enabledItems.length - 1].value;
+                break;
+        }
+    }
+    focusNextItem(items) {
+        if (items.length === 0)
+            return;
+        let nextIndex = 0;
+        if (this.focusedItemValue !== null) {
+            const currentIndex = items.findIndex(i => i.value === this.focusedItemValue);
+            nextIndex = currentIndex >= 0 ? Math.min(currentIndex + 1, items.length - 1) : 0;
+        }
+        this.focusedItemValue = items[nextIndex].value;
+    }
+    focusPreviousItem(items) {
+        if (items.length === 0)
+            return;
+        let prevIndex = items.length - 1;
+        if (this.focusedItemValue !== null) {
+            const currentIndex = items.findIndex(i => i.value === this.focusedItemValue);
+            prevIndex = currentIndex > 0 ? currentIndex - 1 : 0;
+        }
+        this.focusedItemValue = items[prevIndex].value;
+    }
+    // ===========================
+    // Internal Handlers
+    // ===========================
+    filterItems(query) {
+        if (!query.trim()) {
+            this.filteredItems = [...this.registeredItems];
+            return;
+        }
+        const lowerQuery = query.toLowerCase();
+        this.filteredItems = this.registeredItems.filter(item => item.label.toLowerCase().includes(lowerQuery));
+    }
+    // Context to provide to children
+    get comboboxContext() {
+        return {
+            // State Properties
+            value: this.internalValue,
+            multiple: this.multiple,
+            open: this.isOpen,
+            disabled: this.disabled,
+            required: this.required,
+            loading: this.loading,
+            searchQuery: this.searchQuery,
+            focusedItemValue: this.focusedItemValue,
+            allowCustomValue: this.allowCustomValue,
+            multiSelectDisplay: this.multiSelectDisplay,
+            // ID Properties
+            inputId: this.inputId,
+            listboxId: this.listboxId,
+            triggerId: this.triggerId,
+            // Accessibility Properties
+            ariaLabel: this.ariaLabel,
+            ariaLabelledby: this.ariaLabelledby,
+            ariaDescribedby: this.ariaDescribedby,
+            // Handler Methods
+            onValueChange: this.handleValueChange,
+            onOpenChange: this.handleOpenChange,
+            onSearchChange: this.handleSearchChange,
+            onItemFocus: this.handleItemFocus,
+            onItemSelect: this.handleItemSelect,
+            onCustomValueCreate: this.handleCustomValueCreate,
+            // Utility Methods
+            isValueSelected: this.isValueSelected,
+            getSelectedItems: this.getSelectedItems,
+            registerItem: this.registerItem,
+            unregisterItem: this.unregisterItem,
+            getFilteredItems: this.getFilteredItems,
+            clearSelection: () => this.clearSelection(),
+            removeValue: this.handleRemoveValue,
+        };
+    }
+    // ===========================
+    // Render
+    // ===========================
+    render() {
+        return (h(Host, { key: '1556f08562d9f3477db1b9d89cb5ac727ff1933e', role: "combobox", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "listbox", "aria-owns": this.listboxId, "aria-label": this.ariaLabel, "aria-labelledby": this.ariaLabelledby, "aria-describedby": this.ariaDescribedby }, h("div", { key: 'd0b5bdde2e8cfe3343f8c1761df36775151d1e9e', class: "combobox-container" }, h("slot", { key: '6ef0c8f4f82259c6c8acb5537f275c2d97b67cbc' }))));
+    }
+    static get is() { return "seki-combobox"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["seki-combobox.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["seki-combobox.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "ComboboxValue",
+                    "resolved": "string | string[] | undefined",
+                    "references": {
+                        "ComboboxValue": {
+                            "location": "import",
+                            "path": "../../utils/combobox",
+                            "id": "src/utils/combobox/index.ts::ComboboxValue"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Current selected value (controlled mode)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value"
+            },
+            "defaultValue": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ComboboxValue",
+                    "resolved": "string | string[] | undefined",
+                    "references": {
+                        "ComboboxValue": {
+                            "location": "import",
+                            "path": "../../utils/combobox",
+                            "id": "src/utils/combobox/index.ts::ComboboxValue"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Initial selected value (uncontrolled mode)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "default-value"
+            },
+            "items": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "ComboboxItem[]",
+                    "resolved": "ComboboxItem[] | undefined",
+                    "references": {
+                        "ComboboxItem": {
+                            "location": "import",
+                            "path": "../../utils/combobox",
+                            "id": "src/utils/combobox/index.ts::ComboboxItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Static items for client-side filtering"
+                },
+                "getter": false,
+                "setter": false
+            },
+            "multiple": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable multi-select mode"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "multiple",
+                "defaultValue": "false"
+            },
+            "multiSelectDisplay": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ComboboxMultiSelectDisplay",
+                    "resolved": "\"chips\" | \"count\" | \"text\"",
+                    "references": {
+                        "ComboboxMultiSelectDisplay": {
+                            "location": "import",
+                            "path": "../../utils/combobox",
+                            "id": "src/utils/combobox/index.ts::ComboboxMultiSelectDisplay"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Multi-select display mode"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "multi-select-display",
+                "defaultValue": "'chips'"
+            },
+            "allowCustomValue": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Allow values not in the list"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "allow-custom-value",
+                "defaultValue": "false"
+            },
+            "debounce": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Debounce delay for search (ms)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "debounce",
+                "defaultValue": "300"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Placeholder text"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder",
+                "defaultValue": "'Search...'"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disable component"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Mark as required"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "required",
+                "defaultValue": "false"
+            },
+            "open": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Control dropdown open state (controlled mode)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "open"
+            },
+            "defaultOpen": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Initial dropdown open state (uncontrolled mode)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "default-open",
+                "defaultValue": "false"
+            },
+            "loading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set loading state externally (for async)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "loading",
+                "defaultValue": "false"
+            },
+            "ariaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible label for screen readers"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-label"
+            },
+            "ariaLabelledby": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "ID of element that labels this combobox"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-labelledby"
+            },
+            "ariaDescribedby": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "ID of element that describes this combobox"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-describedby"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "internalValue": {},
+            "isOpen": {},
+            "searchQuery": {},
+            "focusedItemValue": {},
+            "registeredItems": {},
+            "filteredItems": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "sekiChange",
+                "name": "sekiChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when selected value changes"
+                },
+                "complexType": {
+                    "original": "ComboboxChangeEventDetail",
+                    "resolved": "ComboboxChangeEventDetail",
+                    "references": {
+                        "ComboboxChangeEventDetail": {
+                            "location": "import",
+                            "path": "../../utils/combobox",
+                            "id": "src/utils/combobox/index.ts::ComboboxChangeEventDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "sekiSearch",
+                "name": "sekiSearch",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when search query changes (after debounce)"
+                },
+                "complexType": {
+                    "original": "ComboboxSearchEventDetail",
+                    "resolved": "ComboboxSearchEventDetail",
+                    "references": {
+                        "ComboboxSearchEventDetail": {
+                            "location": "import",
+                            "path": "../../utils/combobox",
+                            "id": "src/utils/combobox/index.ts::ComboboxSearchEventDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "sekiCustomValue",
+                "name": "sekiCustomValue",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when a custom value is submitted"
+                },
+                "complexType": {
+                    "original": "ComboboxCustomValueEventDetail",
+                    "resolved": "ComboboxCustomValueEventDetail",
+                    "references": {
+                        "ComboboxCustomValueEventDetail": {
+                            "location": "import",
+                            "path": "../../utils/combobox",
+                            "id": "src/utils/combobox/index.ts::ComboboxCustomValueEventDetail"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "openDropdown": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Programmatically open the dropdown",
+                    "tags": []
+                }
+            },
+            "closeDropdown": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Programmatically close the dropdown",
+                    "tags": []
+                }
+            },
+            "clearSelection": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Clear all selections",
+                    "tags": []
+                }
+            },
+            "setQuery": {
+                "complexType": {
+                    "signature": "(query: string) => Promise<void>",
+                    "parameters": [{
+                            "name": "query",
+                            "type": "string",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Set the search query programmatically",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "handleValuePropChange"
+            }, {
+                "propName": "open",
+                "methodName": "handleOpenPropChange"
+            }, {
+                "propName": "items",
+                "methodName": "handleItemsPropChange"
+            }, {
+                "propName": "isOpen",
+                "methodName": "handleStateChange"
+            }, {
+                "propName": "searchQuery",
+                "methodName": "handleStateChange"
+            }, {
+                "propName": "filteredItems",
+                "methodName": "handleStateChange"
+            }, {
+                "propName": "focusedItemValue",
+                "methodName": "handleStateChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "comboboxKeyboard",
+                "method": "handleKeyboardEvent",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}