le-kit 0.5.3 → 0.6.0

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

@@ -1,556 +0,0 @@
-import { h, } from "@stencil/core";
-/**
- * A select dropdown component for single selection.
- *
- * @cmsEditable true
- * @cmsCategory Form
- *
- * @example Basic select
- * ```html
- * <le-select
- *   placeholder="Choose an option"
- *   options='[{"label": "Option 1", "value": "1"}, {"label": "Option 2", "value": "2"}]'
- * ></le-select>
- * ```
- *
- * @example With icons
- * ```html
- * <le-select
- *   options='[
- *     {"label": "Apple", "value": "apple", "iconStart": "🍎"},
- *     {"label": "Banana", "value": "banana", "iconStart": "🍌"}
- *   ]'
- * ></le-select>
- * ```
- *
- * @example Grouped options
- * ```html
- * <le-select
- *   options='[
- *     {"label": "Apple", "value": "apple", "group": "Fruits"},
- *     {"label": "Carrot", "value": "carrot", "group": "Vegetables"}
- *   ]'
- * ></le-select>
- * ```
- */
-export class LeSelect {
-    constructor() {
-        /**
-         * The options to display in the dropdown.
-         */
-        this.options = [];
-        /**
-         * Placeholder text when no option is selected.
-         */
-        this.placeholder = 'Select an option';
-        /**
-         * Whether the select is disabled.
-         */
-        this.disabled = false;
-        /**
-         * Whether selection is required.
-         */
-        this.required = false;
-        /**
-         * Whether the select should take full width of its container.
-         */
-        this.fullWidth = false;
-        /**
-         * Size variant of the select.
-         */
-        this.size = 'medium';
-        /**
-         * Visual variant of the select.
-         */
-        this.variant = 'default';
-        /**
-         * Whether the input is searchable.
-         */
-        this.searchable = false;
-        /**
-         * Text to show when no options match the search.
-         */
-        this.emptyText = 'No results found';
-        /**
-         * Whether the dropdown is currently open.
-         */
-        this.open = false;
-        this.searchQuery = '';
-        this.filterOption = (option, query) => {
-            if (!query)
-                return true;
-            const searchLower = query.toLowerCase();
-            return (option.label.toLowerCase().includes(searchLower) ||
-                (option.description?.toLowerCase().includes(searchLower) ?? false));
-        };
-        this.handleOptionSelect = (e) => {
-            this.value = e.detail.value;
-            this.selectedOption = e.detail.option;
-            this.leChange.emit(e.detail);
-        };
-        this.handleDropdownOpen = () => {
-            this.open = true;
-            this.leOpen.emit();
-            // Focus search input if searchable
-            if (this.searchable) {
-                setTimeout(() => {
-                    this.inputEl?.focus();
-                }, 50);
-            }
-        };
-        this.handleDropdownClose = () => {
-            this.open = false;
-            this.leClose.emit();
-        };
-        this.handleTriggerClick = () => {
-            if (!this.disabled) {
-                this.dropdownEl?.toggle();
-            }
-        };
-        this.handleTriggerKeyDown = (e) => {
-            if (this.disabled)
-                return;
-            if (e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowDown') {
-                e.preventDefault();
-                this.dropdownEl?.show();
-            }
-        };
-        this.handleSearchInput = (e) => {
-            const target = e.target;
-            this.searchQuery = target.value;
-        };
-    }
-    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);
-        }
-        else {
-            this.selectedOption = undefined;
-        }
-    }
-    /**
-     * Opens the dropdown.
-     */
-    async showDropdown() {
-        await this.dropdownEl?.show();
-    }
-    /**
-     * Closes the dropdown.
-     */
-    async hideDropdown() {
-        await this.dropdownEl?.hide();
-    }
-    renderIcon(icon) {
-        if (!icon)
-            return null;
-        if (icon.startsWith('http') || icon.startsWith('/')) {
-            return h("img", { class: "trigger-icon", src: icon, alt: "" });
-        }
-        return h("span", { class: "trigger-icon" }, icon);
-    }
-    render() {
-        const hasValue = this.selectedOption !== undefined;
-        return (h("le-component", { key: 'cd0d10eb7ee1cc6f52fcb32bc3675e2f74219d9b', component: "le-select" }, h("le-dropdown-base", { key: '200e03a079caaa6c091f82d0384134a3e2d0154d', ref: el => (this.dropdownEl = el), options: this.parsedOptions, value: this.value, disabled: this.disabled, filterFn: this.searchable ? this.filterOption : undefined, filterQuery: this.searchQuery, onLeOptionSelect: this.handleOptionSelect, onLeDropdownOpen: this.handleDropdownOpen, onLeDropdownClose: this.handleDropdownClose, fullWidth: this.fullWidth }, h("le-button", { key: '0fa315cceaf6f18a5e370351027f27167fe64ce0', variant: this.variant && this.variant !== 'default' ? this.variant : 'outlined', slot: "trigger", align: "space-between", class: {
-                'select-trigger': true,
-                'has-value': hasValue,
-                'is-open': this.open,
-            }, mode: "default", size: this.size, disabled: this.disabled, "aria-haspopup": "listbox", "aria-expanded": this.open ? 'true' : 'false', onClick: this.handleTriggerClick, onKeyDown: this.handleTriggerKeyDown, fullWidth: this.fullWidth, iconStart: hasValue && this.selectedOption?.iconStart
-                ? this.renderIcon(this.selectedOption.iconStart)
-                : null, iconEnd: h("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("path", { d: "M4 6l4 4 4-4" })) }, h("span", { key: 'aae9bb220fb206622dbf6959f125c78adfb13e00', class: "trigger-label" }, hasValue ? this.selectedOption.label : this.placeholder)), this.searchable && this.open && (h("div", { key: '0e7e360672e2e7ce7d32dc726a450ccff245cee0', class: "multiselect-search", slot: "header" }, h("le-string-input", { key: 'a2a36fc139d4b477d35910541fab6071eddc3de5', mode: "default", inputRef: el => (this.inputEl = el), class: "search-input", placeholder: "Search...", value: this.searchQuery, onInput: this.handleSearchInput })))), this.name && h("input", { key: '9555b72d2f433ce9ee3803d0bb3ceb0dae1c37e3', type: "hidden", name: this.name, value: this.value?.toString() ?? '' })));
-    }
-    static get is() { return "le-select"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["le-select.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["le-select.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 when no option is selected."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "placeholder",
-                "defaultValue": "'Select an option'"
-            },
-            "disabled": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Whether the select 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 select should take full width of its container."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "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 select."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
-                "attribute": "size",
-                "defaultValue": "'medium'"
-            },
-            "variant": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'default' | 'outlined' | 'solid'",
-                    "resolved": "\"default\" | \"outlined\" | \"solid\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Visual variant of the select."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
-                "attribute": "variant",
-                "defaultValue": "'default'"
-            },
-            "searchable": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Whether the input is searchable."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "searchable",
-                "defaultValue": "false"
-            },
-            "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 {
-            "selectedOption": {},
-            "searchQuery": {}
-        };
-    }
-    static get events() {
-        return [{
-                "method": "leChange",
-                "name": "change",
-                "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": "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": []
-                }
-            }
-        };
-    }
-    static get elementRef() { return "el"; }
-    static get watchers() {
-        return [{
-                "propName": "value",
-                "methodName": "handleValueChange"
-            }, {
-                "propName": "options",
-                "methodName": "handleOptionsChange"
-            }];
-    }
-}
-//# sourceMappingURL=le-select.js.map

package/dist/collection/components/le-select/le-select.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"le-select.js","sourceRoot":"","sources":["../../../src/components/le-select/le-select.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,IAAI,EACJ,KAAK,EACL,KAAK,EAEL,MAAM,EACN,OAAO,EACP,KAAK,EACL,CAAC,GACF,MAAM,eAAe,CAAC;AAGvB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AAMH,MAAM,OAAO,QAAQ;IALrB;QAQE;;WAEG;QACK,YAAO,GAAwB,EAAE,CAAC;QAO1C;;WAEG;QACK,gBAAW,GAAW,kBAAkB,CAAC;QAEjD;;WAEG;QACsB,aAAQ,GAAY,KAAK,CAAC;QAEnD;;WAEG;QACK,aAAQ,GAAY,KAAK,CAAC;QAOlC;;WAEG;QACK,cAAS,GAAY,KAAK,CAAC;QAEnC;;WAEG;QACsB,SAAI,GAAiC,QAAQ,CAAC;QAEvE;;WAEG;QACsB,YAAO,GAAqC,SAAS,CAAC;QAE/E;;WAEG;QACK,eAAU,GAAY,KAAK,CAAC;QAEpC;;WAEG;QACK,cAAS,GAAW,kBAAkB,CAAC;QAE/C;;WAEG;QACqC,SAAI,GAAY,KAAK,CAAC;QAmB7C,gBAAW,GAAW,EAAE,CAAC;QAsClC,iBAAY,GAAG,CAAC,MAAgB,EAAE,KAAa,EAAW,EAAE;YAClE,IAAI,CAAC,KAAK;gBAAE,OAAO,IAAI,CAAC;YAExB,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,EAAE,CAAC;YACxC,OAAO,CACL,MAAM,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,WAAW,CAAC;gBAChD,CAAC,MAAM,CAAC,WAAW,EAAE,WAAW,EAAE,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,KAAK,CAAC,CACnE,CAAC;QACJ,CAAC,CAAC;QAEM,uBAAkB,GAAG,CAAC,CAAoC,EAAE,EAAE;YACpE,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;YAC5B,IAAI,CAAC,cAAc,GAAG,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC;YACtC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;QAC/B,CAAC,CAAC;QAEM,uBAAkB,GAAG,GAAG,EAAE;YAChC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;YACjB,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;YAEnB,mCAAmC;YACnC,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;gBACpB,UAAU,CAAC,GAAG,EAAE;oBACd,IAAI,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;gBACxB,CAAC,EAAE,EAAE,CAAC,CAAC;YACT,CAAC;QACH,CAAC,CAAC;QAEM,wBAAmB,GAAG,GAAG,EAAE;YACjC,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;YAClB,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;QACtB,CAAC,CAAC;QAEM,uBAAkB,GAAG,GAAG,EAAE;YAChC,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;gBACnB,IAAI,CAAC,UAAU,EAAE,MAAM,EAAE,CAAC;YAC5B,CAAC;QACH,CAAC,CAAC;QAEM,yBAAoB,GAAG,CAAC,CAAgB,EAAE,EAAE;YAClD,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAO;YAE1B,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,IAAI,CAAC,CAAC,GAAG,KAAK,WAAW,EAAE,CAAC;gBAChE,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,IAAI,CAAC,UAAU,EAAE,IAAI,EAAE,CAAC;YAC1B,CAAC;QACH,CAAC,CAAC;QAEM,sBAAiB,GAAG,CAAC,CAAQ,EAAE,EAAE;YACvC,MAAM,MAAM,GAAG,CAAC,CAAC,MAA0B,CAAC;YAC5C,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC,KAAK,CAAC;QAClC,CAAC,CAAC;KAyGH;IA5LC,iBAAiB;QACf,IAAI,CAAC,oBAAoB,EAAE,CAAC;IAC9B,CAAC;IAGD,mBAAmB;QACjB,IAAI,CAAC,oBAAoB,EAAE,CAAC;IAC9B,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,oBAAoB,EAAE,CAAC;IAC9B,CAAC;IAED,IAAY,aAAa;QACvB,IAAI,OAAO,IAAI,CAAC,OAAO,KAAK,QAAQ,EAAE,CAAC;YACrC,IAAI,CAAC;gBACH,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;YAClC,CAAC;YAAC,MAAM,CAAC;gBACP,OAAO,EAAE,CAAC;YACZ,CAAC;QACH,CAAC;QACD,OAAO,IAAI,CAAC,OAAO,CAAC;IACtB,CAAC;IAEO,oBAAoB;QAC1B,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,EAAE,CAAC;YAC7B,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,KAAK,IAAI,GAAG,CAAC,KAAK,CAAC,KAAK,IAAI,CAAC,KAAK,CAAC,CAAC;QAChG,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,cAAc,GAAG,SAAS,CAAC;QAClC,CAAC;IACH,CAAC;IAuDD;;OAEG;IAEH,KAAK,CAAC,YAAY;QAChB,MAAM,IAAI,CAAC,UAAU,EAAE,IAAI,EAAE,CAAC;IAChC,CAAC;IAED;;OAEG;IAEH,KAAK,CAAC,YAAY;QAChB,MAAM,IAAI,CAAC,UAAU,EAAE,IAAI,EAAE,CAAC;IAChC,CAAC;IAEO,UAAU,CAAC,IAAwB;QACzC,IAAI,CAAC,IAAI;YAAE,OAAO,IAAI,CAAC;QAEvB,IAAI,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,EAAE,CAAC;YACpD,OAAO,WAAK,KAAK,EAAC,cAAc,EAAC,GAAG,EAAE,IAAI,EAAE,GAAG,EAAC,EAAE,GAAG,CAAC;QACxD,CAAC;QAED,OAAO,YAAM,KAAK,EAAC,cAAc,IAAE,IAAI,CAAQ,CAAC;IAClD,CAAC;IAED,MAAM;QACJ,MAAM,QAAQ,GAAG,IAAI,CAAC,cAAc,KAAK,SAAS,CAAC;QAEnD,OAAO,CACL,qEAAc,SAAS,EAAC,WAAW;YACjC,yEACE,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU,GAAG,EAAE,CAAC,EACjC,OAAO,EAAE,IAAI,CAAC,aAAa,EAC3B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS,EACzD,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,gBAAgB,EAAE,IAAI,CAAC,kBAAkB,EACzC,gBAAgB,EAAE,IAAI,CAAC,kBAAkB,EACzC,iBAAiB,EAAE,IAAI,CAAC,mBAAmB,EAC3C,SAAS,EAAE,IAAI,CAAC,SAAS;gBAEzB,kEACE,OAAO,EAAE,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,EAC/E,IAAI,EAAC,SAAS,EACd,KAAK,EAAC,eAAe,EACrB,KAAK,EAAE;wBACL,gBAAgB,EAAE,IAAI;wBACtB,WAAW,EAAE,QAAQ;wBACrB,SAAS,EAAE,IAAI,CAAC,IAAI;qBACrB,EACD,IAAI,EAAC,SAAS,EACd,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,mBACT,SAAS,mBACR,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,EAC3C,OAAO,EAAE,IAAI,CAAC,kBAAkB,EAChC,SAAS,EAAE,IAAI,CAAC,oBAAoB,EACpC,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,SAAS,EACP,QAAQ,IAAI,IAAI,CAAC,cAAc,EAAE,SAAS;wBACxC,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,cAAc,CAAC,SAAS,CAAC;wBAChD,CAAC,CAAC,IAAI,EAEV,OAAO,EACL,WACE,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,kBACR,GAAG;wBAEhB,YAAM,CAAC,EAAC,cAAc,GAAG,CACrB;oBAGR,6DAAM,KAAK,EAAC,eAAe,IACxB,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,cAAe,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CACpD,CACG;gBAGX,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,IAAI,IAAI,CAC/B,4DAAK,KAAK,EAAC,oBAAoB,EAAC,IAAI,EAAC,QAAQ;oBAC3C,wEACE,IAAI,EAAC,SAAS,EACd,QAAQ,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC,EACnC,KAAK,EAAC,cAAc,EACpB,WAAW,EAAC,WAAW,EACvB,KAAK,EAAE,IAAI,CAAC,WAAW,EACvB,OAAO,EAAE,IAAI,CAAC,iBAAiB,GAC/B,CACE,CACP,CACgB;YAGlB,IAAI,CAAC,IAAI,IAAI,8DAAO,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAI,CAC9E,CAChB,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Prop,\n  State,\n  Event,\n  EventEmitter,\n  Method,\n  Element,\n  Watch,\n  h,\n} from '@stencil/core';\nimport { LeOption, LeOptionValue, LeOptionSelectDetail } from '../../types/options';\n\n/**\n * A select dropdown component for single selection.\n *\n * @cmsEditable true\n * @cmsCategory Form\n *\n * @example Basic select\n * ```html\n * <le-select\n *   placeholder=\"Choose an option\"\n *   options='[{\"label\": \"Option 1\", \"value\": \"1\"}, {\"label\": \"Option 2\", \"value\": \"2\"}]'\n * ></le-select>\n * ```\n *\n * @example With icons\n * ```html\n * <le-select\n *   options='[\n *     {\"label\": \"Apple\", \"value\": \"apple\", \"iconStart\": \"🍎\"},\n *     {\"label\": \"Banana\", \"value\": \"banana\", \"iconStart\": \"🍌\"}\n *   ]'\n * ></le-select>\n * ```\n *\n * @example Grouped options\n * ```html\n * <le-select\n *   options='[\n *     {\"label\": \"Apple\", \"value\": \"apple\", \"group\": \"Fruits\"},\n *     {\"label\": \"Carrot\", \"value\": \"carrot\", \"group\": \"Vegetables\"}\n *   ]'\n * ></le-select>\n * ```\n */\n@Component({\n  tag: 'le-select',\n  styleUrl: 'le-select.css',\n  shadow: true,\n})\nexport class LeSelect {\n  @Element() el: HTMLElement;\n\n  /**\n   * The options to display in the dropdown.\n   */\n  @Prop() options: LeOption[] | string = [];\n\n  /**\n   * The currently selected value.\n   */\n  @Prop({ mutable: true }) value?: LeOptionValue;\n\n  /**\n   * Placeholder text when no option is selected.\n   */\n  @Prop() placeholder: string = 'Select an option';\n\n  /**\n   * Whether the select is disabled.\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /**\n   * Whether selection is required.\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * Name attribute for form submission.\n   */\n  @Prop() name?: string;\n\n  /**\n   * Whether the select should take full width of its container.\n   */\n  @Prop() fullWidth: boolean = false;\n\n  /**\n   * Size variant of the select.\n   */\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /**\n   * Visual variant of the select.\n   */\n  @Prop({ reflect: true }) variant: 'default' | 'outlined' | 'solid' = 'default';\n\n  /**\n   * Whether the input is searchable.\n   */\n  @Prop() searchable: boolean = false;\n\n  /**\n   * Text to show when no options match the search.\n   */\n  @Prop() emptyText: string = 'No results found';\n\n  /**\n   * Whether the dropdown is currently open.\n   */\n  @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n  /**\n   * Emitted when the selected value changes.\n   */\n  @Event({ eventName: 'change' }) leChange: EventEmitter<LeOptionSelectDetail>;\n\n  /**\n   * Emitted when the dropdown opens.\n   */\n  @Event() leOpen: EventEmitter<void>;\n\n  /**\n   * Emitted when the dropdown closes.\n   */\n  @Event() leClose: EventEmitter<void>;\n\n  @State() private selectedOption?: LeOption;\n\n  @State() private searchQuery: string = '';\n\n  private dropdownEl?: HTMLLeDropdownBaseElement;\n  private inputEl?: HTMLInputElement;\n\n  @Watch('value')\n  handleValueChange() {\n    this.updateSelectedOption();\n  }\n\n  @Watch('options')\n  handleOptionsChange() {\n    this.updateSelectedOption();\n  }\n\n  componentWillLoad() {\n    this.updateSelectedOption();\n  }\n\n  private get parsedOptions(): LeOption[] {\n    if (typeof this.options === 'string') {\n      try {\n        return JSON.parse(this.options);\n      } catch {\n        return [];\n      }\n    }\n    return this.options;\n  }\n\n  private updateSelectedOption() {\n    if (this.value !== undefined) {\n      this.selectedOption = this.parsedOptions.find(opt => (opt.value ?? opt.label) === this.value);\n    } else {\n      this.selectedOption = undefined;\n    }\n  }\n\n  private filterOption = (option: LeOption, query: string): boolean => {\n    if (!query) return true;\n\n    const searchLower = query.toLowerCase();\n    return (\n      option.label.toLowerCase().includes(searchLower) ||\n      (option.description?.toLowerCase().includes(searchLower) ?? false)\n    );\n  };\n\n  private handleOptionSelect = (e: CustomEvent<LeOptionSelectDetail>) => {\n    this.value = e.detail.value;\n    this.selectedOption = e.detail.option;\n    this.leChange.emit(e.detail);\n  };\n\n  private handleDropdownOpen = () => {\n    this.open = true;\n    this.leOpen.emit();\n\n    // Focus search input if searchable\n    if (this.searchable) {\n      setTimeout(() => {\n        this.inputEl?.focus();\n      }, 50);\n    }\n  };\n\n  private handleDropdownClose = () => {\n    this.open = false;\n    this.leClose.emit();\n  };\n\n  private handleTriggerClick = () => {\n    if (!this.disabled) {\n      this.dropdownEl?.toggle();\n    }\n  };\n\n  private handleTriggerKeyDown = (e: KeyboardEvent) => {\n    if (this.disabled) return;\n\n    if (e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowDown') {\n      e.preventDefault();\n      this.dropdownEl?.show();\n    }\n  };\n\n  private handleSearchInput = (e: Event) => {\n    const target = e.target as HTMLInputElement;\n    this.searchQuery = target.value;\n  };\n\n  /**\n   * Opens the dropdown.\n   */\n  @Method()\n  async showDropdown() {\n    await this.dropdownEl?.show();\n  }\n\n  /**\n   * Closes the dropdown.\n   */\n  @Method()\n  async hideDropdown() {\n    await this.dropdownEl?.hide();\n  }\n\n  private renderIcon(icon: string | undefined) {\n    if (!icon) return null;\n\n    if (icon.startsWith('http') || icon.startsWith('/')) {\n      return <img class=\"trigger-icon\" src={icon} alt=\"\" />;\n    }\n\n    return <span class=\"trigger-icon\">{icon}</span>;\n  }\n\n  render() {\n    const hasValue = this.selectedOption !== undefined;\n\n    return (\n      <le-component component=\"le-select\">\n        <le-dropdown-base\n          ref={el => (this.dropdownEl = el)}\n          options={this.parsedOptions}\n          value={this.value}\n          disabled={this.disabled}\n          filterFn={this.searchable ? this.filterOption : undefined}\n          filterQuery={this.searchQuery}\n          onLeOptionSelect={this.handleOptionSelect}\n          onLeDropdownOpen={this.handleDropdownOpen}\n          onLeDropdownClose={this.handleDropdownClose}\n          fullWidth={this.fullWidth}\n        >\n          <le-button\n            variant={this.variant && this.variant !== 'default' ? this.variant : 'outlined'}\n            slot=\"trigger\"\n            align=\"space-between\"\n            class={{\n              'select-trigger': true,\n              'has-value': hasValue,\n              'is-open': this.open,\n            }}\n            mode=\"default\"\n            size={this.size}\n            disabled={this.disabled}\n            aria-haspopup=\"listbox\"\n            aria-expanded={this.open ? 'true' : 'false'}\n            onClick={this.handleTriggerClick}\n            onKeyDown={this.handleTriggerKeyDown}\n            fullWidth={this.fullWidth}\n            iconStart={\n              hasValue && this.selectedOption?.iconStart\n                ? this.renderIcon(this.selectedOption.iconStart)\n                : null\n            }\n            iconEnd={\n              <svg\n                width=\"16\"\n                height=\"16\"\n                viewBox=\"0 0 16 16\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"2\"\n              >\n                <path d=\"M4 6l4 4 4-4\" />\n              </svg>\n            }\n          >\n            <span class=\"trigger-label\">\n              {hasValue ? this.selectedOption!.label : this.placeholder}\n            </span>\n          </le-button>\n\n          {/* Search input shown in dropdown header */}\n          {this.searchable && this.open && (\n            <div class=\"multiselect-search\" slot=\"header\">\n              <le-string-input\n                mode=\"default\"\n                inputRef={el => (this.inputEl = el)}\n                class=\"search-input\"\n                placeholder=\"Search...\"\n                value={this.searchQuery}\n                onInput={this.handleSearchInput}\n              />\n            </div>\n          )}\n        </le-dropdown-base>\n\n        {/* Hidden input for form submission */}\n        {this.name && <input type=\"hidden\" name={this.name} value={this.value?.toString() ?? ''} />}\n      </le-component>\n    );\n  }\n}\n"]}