le-kit 0.1.13 → 0.1.15

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

@@ -0,0 +1,659 @@
+import { h, } from "@stencil/core";
+/**
+ * A combobox component with searchable dropdown.
+ *
+ * Combines a text input with a dropdown list, allowing users to
+ * filter options by typing or select from the list.
+ *
+ * @cmsEditable true
+ * @cmsCategory Form
+ *
+ * @example Basic combobox
+ * ```html
+ * <le-combobox
+ *   placeholder="Search..."
+ *   options='[{"label": "Apple"}, {"label": "Banana"}, {"label": "Cherry"}]'
+ * ></le-combobox>
+ * ```
+ *
+ * @example Allow custom values
+ * ```html
+ * <le-combobox
+ *   placeholder="Type or select..."
+ *   allow-custom
+ *   options='[{"label": "Red"}, {"label": "Green"}, {"label": "Blue"}]'
+ * ></le-combobox>
+ * ```
+ */
+export class LeCombobox {
+    el;
+    /**
+     * The options to display in the dropdown.
+     */
+    options = [];
+    /**
+     * The currently selected value.
+     */
+    value;
+    /**
+     * Placeholder text for the input.
+     */
+    placeholder = 'Type to search...';
+    /**
+     * Whether the combobox is disabled.
+     */
+    disabled = false;
+    /**
+     * Whether selection is required.
+     */
+    required = false;
+    /**
+     * Name attribute for form submission.
+     */
+    name;
+    /**
+     * Whether the multiselect should take full width of its container.
+     */
+    fullWidth = false;
+    /**
+     * Size variant of the combobox.
+     */
+    size = 'medium';
+    /**
+     * Whether to allow custom values not in the options list.
+     */
+    allowCustom = false;
+    /**
+     * Minimum characters before showing filtered results.
+     */
+    minSearchLength = 0;
+    /**
+     * Text to show when no options match the search.
+     */
+    emptyText = 'No results found';
+    /**
+     * Whether the dropdown is currently open.
+     */
+    open = false;
+    /**
+     * Emitted when the selected value changes.
+     */
+    leChange;
+    /**
+     * Emitted when the input value changes (for custom values).
+     */
+    leInput;
+    /**
+     * Emitted when the dropdown opens.
+     */
+    leOpen;
+    /**
+     * Emitted when the dropdown closes.
+     */
+    leClose;
+    handleWindowClick(event) {
+        if (!this.el.contains(event.target)) {
+            this.dropdownEl?.hide();
+        }
+    }
+    inputValue = '';
+    selectedOption;
+    dropdownEl;
+    inputEl;
+    handleValueChange() {
+        this.updateSelectedOption();
+    }
+    handleOptionsChange() {
+        this.updateSelectedOption();
+    }
+    componentWillLoad() {
+        this.updateSelectedOption();
+    }
+    get parsedOptions() {
+        if (typeof this.options === 'string') {
+            try {
+                return JSON.parse(this.options);
+            }
+            catch {
+                return [];
+            }
+        }
+        return this.options;
+    }
+    updateSelectedOption() {
+        if (this.value !== undefined) {
+            this.selectedOption = this.parsedOptions.find(opt => (opt.value ?? opt.label) === this.value);
+            if (this.selectedOption) {
+                this.inputValue = this.selectedOption.label;
+            }
+            else if (this.allowCustom) {
+                this.inputValue = this.value.toString();
+            }
+        }
+        else {
+            this.selectedOption = undefined;
+            this.inputValue = '';
+        }
+    }
+    filterOption = (option, query) => {
+        if (!query || query.length < this.minSearchLength)
+            return true;
+        const searchLower = query.toLowerCase();
+        return (option.label.toLowerCase().includes(searchLower) ||
+            (option.description?.toLowerCase().includes(searchLower) ?? false));
+    };
+    handleOptionSelect = (e) => {
+        this.value = e.detail.value;
+        this.selectedOption = e.detail.option;
+        this.inputValue = e.detail.option.label;
+        this.leChange.emit(e.detail);
+    };
+    handleDropdownOpen = () => {
+        this.open = true;
+        this.leOpen.emit();
+    };
+    handleDropdownClose = () => {
+        this.open = false;
+        this.leClose.emit();
+        // If custom values not allowed, reset input to selected option
+        if (!this.allowCustom && this.selectedOption) {
+            this.inputValue = this.selectedOption.label;
+        }
+        else if (!this.allowCustom && !this.selectedOption) {
+            this.inputValue = '';
+        }
+    };
+    handleInputChange = (e) => {
+        const target = e.target;
+        this.inputValue = target.value;
+        // Emit input event for custom values
+        if (this.allowCustom) {
+            this.leInput.emit({ value: this.inputValue });
+        }
+        // Open dropdown when typing
+        if (!this.open && this.inputValue.length >= this.minSearchLength) {
+            this.dropdownEl?.show();
+        }
+    };
+    handleInputFocus = () => {
+        if (!this.disabled) {
+            this.dropdownEl?.show();
+        }
+    };
+    handleInputKeyDown = (e) => {
+        if (this.disabled)
+            return;
+        switch (e.key) {
+            case 'ArrowDown':
+                e.preventDefault();
+                if (!this.open) {
+                    this.dropdownEl?.show();
+                }
+                break;
+            case 'Enter':
+                if (this.allowCustom && this.inputValue && !this.open) {
+                    // Accept custom value
+                    this.value = this.inputValue;
+                    this.leChange.emit({
+                        value: this.inputValue,
+                        option: { label: this.inputValue, value: this.inputValue },
+                    });
+                }
+                break;
+            case 'Escape':
+                if (this.open) {
+                    this.dropdownEl?.hide();
+                }
+                break;
+        }
+    };
+    handleClear = (e) => {
+        e.stopPropagation();
+        this.value = undefined;
+        this.selectedOption = undefined;
+        this.inputValue = '';
+        this.inputEl?.focus();
+        this.leChange.emit({
+            value: '',
+            option: { label: '', value: '' },
+        });
+    };
+    /**
+     * Opens the dropdown.
+     */
+    async showDropdown() {
+        await this.dropdownEl?.show();
+    }
+    /**
+     * Closes the dropdown.
+     */
+    async hideDropdown() {
+        await this.dropdownEl?.hide();
+    }
+    /**
+     * Focuses the input element.
+     */
+    async focusInput() {
+        this.inputEl?.focus();
+    }
+    render() {
+        const hasValue = this.inputValue.length > 0;
+        return (h("le-component", { key: '387d52e3054515ecb8b46116deae909fcdb75969', component: "le-combobox" }, h("le-dropdown-base", { key: '822f479f2a831a7e817a38318c021bf2f52b3ed7', ref: el => (this.dropdownEl = el), options: this.parsedOptions, value: this.value, disabled: this.disabled, filterFn: this.filterOption, filterQuery: this.inputValue, emptyText: this.emptyText, fullWidth: this.fullWidth, closeOnClickOutside: false, onLeOptionSelect: this.handleOptionSelect, onLeDropdownOpen: this.handleDropdownOpen, onLeDropdownClose: this.handleDropdownClose }, h("div", { key: '7c57078e2ee0dd371d44f4fafdb8cf5e5914dfee', slot: "trigger", class: { 'combobox-trigger': true, 'is-open': this.open } }, h("le-string-input", { key: 'fbdc0d1c4d82a4fb6021a51a3b48752be37ade2c', mode: "default", hideDescription: true, inputRef: el => (this.inputEl = el), type: "text", class: "combobox-input", value: this.inputValue, placeholder: this.placeholder, disabled: this.disabled, "aria-haspopup": "listbox", "aria-expanded": this.open ? 'true' : 'false', "aria-autocomplete": "list", onInput: this.handleInputChange, onFocus: this.handleInputFocus, onKeyDown: this.handleInputKeyDown }), hasValue && !this.disabled && (h("button", { key: 'a17932b0f41065d5550c343851664bc3967a8341', type: "button", class: "combobox-clear", onClick: this.handleClear, "aria-label": "Clear", tabIndex: -1 }, h("svg", { key: '8ed3c6c92c76152f0898f4f87e69efffacee7aad', viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("path", { key: '985476db5f5f36562069513ffd4d873fb83c1f71', d: "M4 4l8 8M12 4l-8 8" })))), h("span", { key: '72663ad4b72f476e35a1024e66f495a343c22006', class: "combobox-arrow" }, h("svg", { key: '7a5ae4711763398b9196bd5ab86043de8579debf', viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("path", { key: '9722bd7f24ede8f9c3ee16e0e3ce19234ef38a26', d: "M4 6l4 4 4-4" }))))), this.name && h("input", { key: '5df357f53be8683145e4fbc3e5434807505fd98f', type: "hidden", name: this.name, value: this.value?.toString() ?? '' })));
+    }
+    static get is() { return "le-combobox"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["le-combobox.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["le-combobox.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "options": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "LeOption[] | string",
+                    "resolved": "LeOption[] | string",
+                    "references": {
+                        "LeOption": {
+                            "location": "import",
+                            "path": "../../types/options",
+                            "id": "src/types/options.ts::LeOption"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The options to display in the dropdown."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "options",
+                "defaultValue": "[]"
+            },
+            "value": {
+                "type": "any",
+                "mutable": true,
+                "complexType": {
+                    "original": "LeOptionValue",
+                    "resolved": "number | string",
+                    "references": {
+                        "LeOptionValue": {
+                            "location": "import",
+                            "path": "../../types/options",
+                            "id": "src/types/options.ts::LeOptionValue"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The currently selected value."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Placeholder text for the input."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder",
+                "defaultValue": "'Type to search...'"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the combobox is disabled."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether selection is required."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "required",
+                "defaultValue": "false"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Name attribute for form submission."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
+            },
+            "fullWidth": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the multiselect should take full width of its container."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "full-width",
+                "defaultValue": "false"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'small' | 'medium' | 'large'",
+                    "resolved": "\"large\" | \"medium\" | \"small\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Size variant of the combobox."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'medium'"
+            },
+            "allowCustom": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to allow custom values not in the options list."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "allow-custom",
+                "defaultValue": "false"
+            },
+            "minSearchLength": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Minimum characters before showing filtered results."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "min-search-length",
+                "defaultValue": "0"
+            },
+            "emptyText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Text to show when no options match the search."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "empty-text",
+                "defaultValue": "'No results found'"
+            },
+            "open": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the dropdown is currently open."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "open",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "inputValue": {},
+            "selectedOption": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "leChange",
+                "name": "leChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the selected value changes."
+                },
+                "complexType": {
+                    "original": "LeOptionSelectDetail",
+                    "resolved": "LeOptionSelectDetail",
+                    "references": {
+                        "LeOptionSelectDetail": {
+                            "location": "import",
+                            "path": "../../types/options",
+                            "id": "src/types/options.ts::LeOptionSelectDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "leInput",
+                "name": "leInput",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the input value changes (for custom values)."
+                },
+                "complexType": {
+                    "original": "{ value: string }",
+                    "resolved": "{ value: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "leOpen",
+                "name": "leOpen",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the dropdown opens."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "leClose",
+                "name": "leClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the dropdown closes."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "showDropdown": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Opens the dropdown.",
+                    "tags": []
+                }
+            },
+            "hideDropdown": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Closes the dropdown.",
+                    "tags": []
+                }
+            },
+            "focusInput": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Focuses the input element.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "handleValueChange"
+            }, {
+                "propName": "options",
+                "methodName": "handleOptionsChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "handleWindowClick",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=le-combobox.js.map