le-kit 0.1.14 → 0.1.16

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

@@ -0,0 +1,578 @@
+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 {
+    el;
+    /**
+     * The options to display in the dropdown.
+     */
+    options = [];
+    /**
+     * The currently selected value.
+     */
+    value;
+    /**
+     * Placeholder text when no option is selected.
+     */
+    placeholder = 'Select an option';
+    /**
+     * Whether the select is disabled.
+     */
+    disabled = false;
+    /**
+     * Whether selection is required.
+     */
+    required = false;
+    /**
+     * Name attribute for form submission.
+     */
+    name;
+    /**
+     * Whether the select should take full width of its container.
+     */
+    fullWidth = false;
+    /**
+     * Size variant of the select.
+     */
+    size = 'medium';
+    /**
+     * Visual variant of the select.
+     */
+    variant = 'default';
+    /**
+     * Whether the input is searchable.
+     */
+    searchable = false;
+    /**
+     * 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 dropdown opens.
+     */
+    leOpen;
+    /**
+     * Emitted when the dropdown closes.
+     */
+    leClose;
+    selectedOption;
+    searchQuery = '';
+    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);
+        }
+        else {
+            this.selectedOption = undefined;
+        }
+    }
+    filterOption = (option, query) => {
+        if (!query)
+            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.leChange.emit(e.detail);
+    };
+    handleDropdownOpen = () => {
+        this.open = true;
+        this.leOpen.emit();
+        // Focus search input if searchable
+        if (this.searchable) {
+            setTimeout(() => {
+                this.inputEl?.focus();
+            }, 50);
+        }
+    };
+    handleDropdownClose = () => {
+        this.open = false;
+        this.leClose.emit();
+    };
+    handleTriggerClick = () => {
+        if (!this.disabled) {
+            this.dropdownEl?.toggle();
+        }
+    };
+    handleTriggerKeyDown = (e) => {
+        if (this.disabled)
+            return;
+        if (e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowDown') {
+            e.preventDefault();
+            this.dropdownEl?.show();
+        }
+    };
+    handleSearchInput = (e) => {
+        const target = e.target;
+        this.searchQuery = target.value;
+    };
+    /**
+     * 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: 'f41bf4f086925b6b37a0131a51e4f7e354797ed5', component: "le-select" }, h("le-dropdown-base", { key: '08db701f6b1f7e2c428ea0cc9ee4046c22759757', 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: 'f994667c5360905a9e6340f0f0331bea55523418', 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: 'c807e00d21193e558dcf1b601c4aa5f78144fd14', class: "trigger-label" }, hasValue ? this.selectedOption.label : this.placeholder)), this.searchable && this.open && (h("div", { key: 'c285d28f7b0093580484b8d077c4f2ddd014aa2e', class: "multiselect-search", slot: "header" }, h("le-string-input", { key: '1dd31e5840a29e3a7e181c80182c20ea5ca28bcb', mode: "default", inputRef: el => (this.inputEl = el), class: "search-input", placeholder: "Search...", value: this.searchQuery, onInput: this.handleSearchInput })))), this.name && h("input", { key: '0acb27fafae47b56808e1b1ee20e45c7cb0cfa3e', 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": "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": "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

@@ -0,0 +1 @@
+{"version":3,"file":"le-select.js","sourceRoot":"","sources":["../../../src/components/le-select/le-select.tsx"],"names":[],"mappings":"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","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() 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"]}