le-kit 0.5.2 → 0.5.3

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

@@ -26,80 +26,137 @@ import { h, } from "@stencil/core";
  * ```
  */
 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;
+    constructor() {
+        /**
+         * The options to display in the dropdown.
+         */
+        this.options = [];
+        /**
+         * Placeholder text for the input.
+         */
+        this.placeholder = 'Type to search...';
+        /**
+         * Whether the combobox is disabled.
+         */
+        this.disabled = false;
+        /**
+         * Whether selection is required.
+         */
+        this.required = false;
+        /**
+         * Whether the multiselect should take full width of its container.
+         */
+        this.fullWidth = false;
+        /**
+         * Size variant of the combobox.
+         */
+        this.size = 'medium';
+        /**
+         * Whether to allow custom values not in the options list.
+         */
+        this.allowCustom = false;
+        /**
+         * Minimum characters before showing filtered results.
+         */
+        this.minSearchLength = 0;
+        /**
+         * Text to show when no options match the search.
+         */
+        this.emptyText = 'No results found';
+        /**
+         * Whether the dropdown is currently open.
+         */
+        this.open = false;
+        this.inputValue = '';
+        this.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));
+        };
+        this.handleOptionSelect = (e) => {
+            this.value = e.detail.value;
+            this.selectedOption = e.detail.option;
+            this.inputValue = e.detail.option.label;
+            this.leChange.emit(e.detail);
+        };
+        this.handleDropdownOpen = () => {
+            this.open = true;
+            this.leOpen.emit();
+        };
+        this.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 = '';
+            }
+        };
+        this.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();
+            }
+        };
+        this.handleInputFocus = () => {
+            if (!this.disabled) {
+                this.dropdownEl?.show();
+            }
+        };
+        this.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;
+            }
+        };
+        this.handleClear = (e) => {
+            e.stopPropagation();
+            this.value = undefined;
+            this.selectedOption = undefined;
+            this.inputValue = '';
+            this.inputEl?.focus();
+            this.leChange.emit({
+                value: '',
+                option: { label: '', value: '' },
+            });
+        };
+    }
     handleWindowClick(event) {
         if (!this.el.contains(event.target)) {
             this.dropdownEl?.hide();
         }
     }
-    inputValue = '';
-    selectedOption;
-    dropdownEl;
-    inputEl;
     handleValueChange() {
         this.updateSelectedOption();
     }
@@ -135,89 +192,6 @@ export class LeCombobox {
             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.
      */
@@ -238,7 +212,7 @@ export class LeCombobox {
     }
     render() {
         const hasValue = this.inputValue.length > 0;
-        return (h("le-component", { key: '77660875e900dceb4cca50087a9ea7fad38d0de8', component: "le-combobox" }, h("le-dropdown-base", { key: 'a7d46b3226322945465a8d22c87c3df1939d0c11', 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: 'bc402ba87163d604c49d41acf32a2da7710c12d5', slot: "trigger", class: { 'combobox-trigger': true, 'is-open': this.open } }, h("le-string-input", { key: 'd676bb665963d090e88195b133f7a0f5e379b9e9', 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: '78446bc41c35fa2815acbfc34ea377dc33a1e55b', type: "button", class: "combobox-clear", onClick: this.handleClear, "aria-label": "Clear", tabIndex: -1 }, h("svg", { key: 'a596191694990ebb2e48d1529da0e0a6eb61e5b9', viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("path", { key: 'd6503800924e82555571c8955b33bcfddd90c7d0', d: "M4 4l8 8M12 4l-8 8" })))), h("span", { key: 'a032adbc03c135bf0e9c28f7272fa125c22fd37c', class: "combobox-arrow" }, h("svg", { key: '258a8d6a98071654a8bf59ac23dc517a9af19daa', viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("path", { key: '5960ffe0d91ae52563420fa901653e17d458b522', d: "M4 6l4 4 4-4" }))))), this.name && h("input", { key: '44791ad0af7eae39a3d8b7cabf12a68b11fc20ba', type: "hidden", name: this.name, value: this.value?.toString() ?? '' })));
+        return (h("le-component", { key: '2b0d151b589302147ff6a958a1bcbdd9fe973d6e', component: "le-combobox" }, h("le-dropdown-base", { key: '2916e62fe29d92274ec735719675ed4847f19aa9', 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: 'b5ff8b929ce9d204327a11fd191d5c0b4a8bea70', slot: "trigger", class: { 'combobox-trigger': true, 'is-open': this.open } }, h("le-string-input", { key: 'a3cb396b00e753634bd6c132fad9beea9586e0db', 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: '6f8cf150544c1b33c07acf2bbb51cafb359a9446', type: "button", class: "combobox-clear", onClick: this.handleClear, "aria-label": "Clear", tabIndex: -1 }, h("svg", { key: 'e06af09838a2c451ca322ac5aa1c6360d1b6e527', viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("path", { key: '1d03c90b883b4a0c35b4fe6a089c95ba210287cf', d: "M4 4l8 8M12 4l-8 8" })))), h("span", { key: '530f07b37ec61faac0eb5ee9bce312a4f056fc70', class: "combobox-arrow" }, h("svg", { key: 'fd6ee2352adb93ee4fed752caba5552c7a20d5bf', viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("path", { key: '4aa7fe6c1aa02681a3fc634124227a1b7263df29', d: "M4 6l4 4 4-4" }))))), this.name && h("input", { key: '388a14c0b95a7a8b5897e684a41c1adbbcd10e46', type: "hidden", name: this.name, value: this.value?.toString() ?? '' })));
     }
     static get is() { return "le-combobox"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1 +1 @@
-{"version":3,"file":"le-combobox.js","sourceRoot":"","sources":["../../../src/components/le-combobox/le-combobox.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  Listen,\n} from '@stencil/core';\nimport { LeOption, LeOptionValue, LeOptionSelectDetail } from '../../types/options';\n\n/**\n * A combobox component with searchable dropdown.\n *\n * Combines a text input with a dropdown list, allowing users to\n * filter options by typing or select from the list.\n *\n * @cmsEditable true\n * @cmsCategory Form\n *\n * @example Basic combobox\n * ```html\n * <le-combobox\n *   placeholder=\"Search...\"\n *   options='[{\"label\": \"Apple\"}, {\"label\": \"Banana\"}, {\"label\": \"Cherry\"}]'\n * ></le-combobox>\n * ```\n *\n * @example Allow custom values\n * ```html\n * <le-combobox\n *   placeholder=\"Type or select...\"\n *   allow-custom\n *   options='[{\"label\": \"Red\"}, {\"label\": \"Green\"}, {\"label\": \"Blue\"}]'\n * ></le-combobox>\n * ```\n */\n@Component({\n  tag: 'le-combobox',\n  styleUrl: 'le-combobox.css',\n  shadow: true,\n})\nexport class LeCombobox {\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 for the input.\n   */\n  @Prop() placeholder: string = 'Type to search...';\n\n  /**\n   * Whether the combobox 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 multiselect should take full width of its container.\n   */\n  @Prop({ reflect: true }) fullWidth: boolean = false;\n\n  /**\n   * Size variant of the combobox.\n   */\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /**\n   * Whether to allow custom values not in the options list.\n   */\n  @Prop() allowCustom: boolean = false;\n\n  /**\n   * Minimum characters before showing filtered results.\n   */\n  @Prop() minSearchLength: number = 0;\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 input value changes (for custom values).\n   */\n  @Event() leInput: EventEmitter<{ value: string }>;\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  @Listen('click', { target: 'window' })\n  handleWindowClick(event: MouseEvent) {\n    if (!this.el.contains(event.target as Node)) {\n      this.dropdownEl?.hide();\n    }\n  }\n\n  @State() private inputValue: string = '';\n  @State() private selectedOption?: LeOption;\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      if (this.selectedOption) {\n        this.inputValue = this.selectedOption.label;\n      } else if (this.allowCustom) {\n        this.inputValue = this.value.toString();\n      }\n    } else {\n      this.selectedOption = undefined;\n      this.inputValue = '';\n    }\n  }\n\n  private filterOption = (option: LeOption, query: string): boolean => {\n    if (!query || query.length < this.minSearchLength) return true;\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.inputValue = e.detail.option.label;\n    this.leChange.emit(e.detail);\n  };\n\n  private handleDropdownOpen = () => {\n    this.open = true;\n    this.leOpen.emit();\n  };\n\n  private handleDropdownClose = () => {\n    this.open = false;\n    this.leClose.emit();\n\n    // If custom values not allowed, reset input to selected option\n    if (!this.allowCustom && this.selectedOption) {\n      this.inputValue = this.selectedOption.label;\n    } else if (!this.allowCustom && !this.selectedOption) {\n      this.inputValue = '';\n    }\n  };\n\n  private handleInputChange = (e: Event) => {\n    const target = e.target as HTMLInputElement;\n    this.inputValue = target.value;\n\n    // Emit input event for custom values\n    if (this.allowCustom) {\n      this.leInput.emit({ value: this.inputValue });\n    }\n\n    // Open dropdown when typing\n    if (!this.open && this.inputValue.length >= this.minSearchLength) {\n      this.dropdownEl?.show();\n    }\n  };\n\n  private handleInputFocus = () => {\n    if (!this.disabled) {\n      this.dropdownEl?.show();\n    }\n  };\n\n  private handleInputKeyDown = (e: KeyboardEvent) => {\n    if (this.disabled) return;\n\n    switch (e.key) {\n      case 'ArrowDown':\n        e.preventDefault();\n        if (!this.open) {\n          this.dropdownEl?.show();\n        }\n        break;\n\n      case 'Enter':\n        if (this.allowCustom && this.inputValue && !this.open) {\n          // Accept custom value\n          this.value = this.inputValue;\n          this.leChange.emit({\n            value: this.inputValue,\n            option: { label: this.inputValue, value: this.inputValue },\n          });\n        }\n        break;\n\n      case 'Escape':\n        if (this.open) {\n          this.dropdownEl?.hide();\n        }\n        break;\n    }\n  };\n\n  private handleClear = (e: MouseEvent) => {\n    e.stopPropagation();\n    this.value = undefined;\n    this.selectedOption = undefined;\n    this.inputValue = '';\n    this.inputEl?.focus();\n    this.leChange.emit({\n      value: '',\n      option: { label: '', value: '' },\n    });\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  /**\n   * Focuses the input element.\n   */\n  @Method()\n  async focusInput() {\n    this.inputEl?.focus();\n  }\n\n  render() {\n    const hasValue = this.inputValue.length > 0;\n\n    return (\n      <le-component component=\"le-combobox\">\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.filterOption}\n          filterQuery={this.inputValue}\n          emptyText={this.emptyText}\n          fullWidth={this.fullWidth}\n          closeOnClickOutside={false}\n          onLeOptionSelect={this.handleOptionSelect}\n          onLeDropdownOpen={this.handleDropdownOpen}\n          onLeDropdownClose={this.handleDropdownClose}\n        >\n          <div slot=\"trigger\" class={{ 'combobox-trigger': true, 'is-open': this.open }}>\n            <le-string-input\n              mode=\"default\"\n              hideDescription={true}\n              inputRef={el => (this.inputEl = el)}\n              type=\"text\"\n              class=\"combobox-input\"\n              value={this.inputValue}\n              placeholder={this.placeholder}\n              disabled={this.disabled}\n              aria-haspopup=\"listbox\"\n              aria-expanded={this.open ? 'true' : 'false'}\n              aria-autocomplete=\"list\"\n              onInput={this.handleInputChange}\n              onFocus={this.handleInputFocus}\n              onKeyDown={this.handleInputKeyDown}\n            />\n            {hasValue && !this.disabled && (\n              <button\n                type=\"button\"\n                class=\"combobox-clear\"\n                onClick={this.handleClear}\n                aria-label=\"Clear\"\n                tabIndex={-1}\n              >\n                <svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                  <path d=\"M4 4l8 8M12 4l-8 8\" />\n                </svg>\n              </button>\n            )}\n            <span class=\"combobox-arrow\">\n              <svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                <path d=\"M4 6l4 4 4-4\" />\n              </svg>\n            </span>\n          </div>\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"]}
+{"version":3,"file":"le-combobox.js","sourceRoot":"","sources":["../../../src/components/le-combobox/le-combobox.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  Listen,\n} from '@stencil/core';\nimport { LeOption, LeOptionValue, LeOptionSelectDetail } from '../../types/options';\n\n/**\n * A combobox component with searchable dropdown.\n *\n * Combines a text input with a dropdown list, allowing users to\n * filter options by typing or select from the list.\n *\n * @cmsEditable true\n * @cmsCategory Form\n *\n * @example Basic combobox\n * ```html\n * <le-combobox\n *   placeholder=\"Search...\"\n *   options='[{\"label\": \"Apple\"}, {\"label\": \"Banana\"}, {\"label\": \"Cherry\"}]'\n * ></le-combobox>\n * ```\n *\n * @example Allow custom values\n * ```html\n * <le-combobox\n *   placeholder=\"Type or select...\"\n *   allow-custom\n *   options='[{\"label\": \"Red\"}, {\"label\": \"Green\"}, {\"label\": \"Blue\"}]'\n * ></le-combobox>\n * ```\n */\n@Component({\n  tag: 'le-combobox',\n  styleUrl: 'le-combobox.css',\n  shadow: true,\n})\nexport class LeCombobox {\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 for the input.\n   */\n  @Prop() placeholder: string = 'Type to search...';\n\n  /**\n   * Whether the combobox 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 multiselect should take full width of its container.\n   */\n  @Prop({ reflect: true }) fullWidth: boolean = false;\n\n  /**\n   * Size variant of the combobox.\n   */\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /**\n   * Whether to allow custom values not in the options list.\n   */\n  @Prop() allowCustom: boolean = false;\n\n  /**\n   * Minimum characters before showing filtered results.\n   */\n  @Prop() minSearchLength: number = 0;\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 input value changes (for custom values).\n   */\n  @Event() leInput: EventEmitter<{ value: string }>;\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  @Listen('click', { target: 'window' })\n  handleWindowClick(event: MouseEvent) {\n    if (!this.el.contains(event.target as Node)) {\n      this.dropdownEl?.hide();\n    }\n  }\n\n  @State() private inputValue: string = '';\n  @State() private selectedOption?: LeOption;\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      if (this.selectedOption) {\n        this.inputValue = this.selectedOption.label;\n      } else if (this.allowCustom) {\n        this.inputValue = this.value.toString();\n      }\n    } else {\n      this.selectedOption = undefined;\n      this.inputValue = '';\n    }\n  }\n\n  private filterOption = (option: LeOption, query: string): boolean => {\n    if (!query || query.length < this.minSearchLength) return true;\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.inputValue = e.detail.option.label;\n    this.leChange.emit(e.detail);\n  };\n\n  private handleDropdownOpen = () => {\n    this.open = true;\n    this.leOpen.emit();\n  };\n\n  private handleDropdownClose = () => {\n    this.open = false;\n    this.leClose.emit();\n\n    // If custom values not allowed, reset input to selected option\n    if (!this.allowCustom && this.selectedOption) {\n      this.inputValue = this.selectedOption.label;\n    } else if (!this.allowCustom && !this.selectedOption) {\n      this.inputValue = '';\n    }\n  };\n\n  private handleInputChange = (e: Event) => {\n    const target = e.target as HTMLInputElement;\n    this.inputValue = target.value;\n\n    // Emit input event for custom values\n    if (this.allowCustom) {\n      this.leInput.emit({ value: this.inputValue });\n    }\n\n    // Open dropdown when typing\n    if (!this.open && this.inputValue.length >= this.minSearchLength) {\n      this.dropdownEl?.show();\n    }\n  };\n\n  private handleInputFocus = () => {\n    if (!this.disabled) {\n      this.dropdownEl?.show();\n    }\n  };\n\n  private handleInputKeyDown = (e: KeyboardEvent) => {\n    if (this.disabled) return;\n\n    switch (e.key) {\n      case 'ArrowDown':\n        e.preventDefault();\n        if (!this.open) {\n          this.dropdownEl?.show();\n        }\n        break;\n\n      case 'Enter':\n        if (this.allowCustom && this.inputValue && !this.open) {\n          // Accept custom value\n          this.value = this.inputValue;\n          this.leChange.emit({\n            value: this.inputValue,\n            option: { label: this.inputValue, value: this.inputValue },\n          });\n        }\n        break;\n\n      case 'Escape':\n        if (this.open) {\n          this.dropdownEl?.hide();\n        }\n        break;\n    }\n  };\n\n  private handleClear = (e: MouseEvent) => {\n    e.stopPropagation();\n    this.value = undefined;\n    this.selectedOption = undefined;\n    this.inputValue = '';\n    this.inputEl?.focus();\n    this.leChange.emit({\n      value: '',\n      option: { label: '', value: '' },\n    });\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  /**\n   * Focuses the input element.\n   */\n  @Method()\n  async focusInput() {\n    this.inputEl?.focus();\n  }\n\n  render() {\n    const hasValue = this.inputValue.length > 0;\n\n    return (\n      <le-component component=\"le-combobox\">\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.filterOption}\n          filterQuery={this.inputValue}\n          emptyText={this.emptyText}\n          fullWidth={this.fullWidth}\n          closeOnClickOutside={false}\n          onLeOptionSelect={this.handleOptionSelect}\n          onLeDropdownOpen={this.handleDropdownOpen}\n          onLeDropdownClose={this.handleDropdownClose}\n        >\n          <div slot=\"trigger\" class={{ 'combobox-trigger': true, 'is-open': this.open }}>\n            <le-string-input\n              mode=\"default\"\n              hideDescription={true}\n              inputRef={el => (this.inputEl = el)}\n              type=\"text\"\n              class=\"combobox-input\"\n              value={this.inputValue}\n              placeholder={this.placeholder}\n              disabled={this.disabled}\n              aria-haspopup=\"listbox\"\n              aria-expanded={this.open ? 'true' : 'false'}\n              aria-autocomplete=\"list\"\n              onInput={this.handleInputChange}\n              onFocus={this.handleInputFocus}\n              onKeyDown={this.handleInputKeyDown}\n            />\n            {hasValue && !this.disabled && (\n              <button\n                type=\"button\"\n                class=\"combobox-clear\"\n                onClick={this.handleClear}\n                aria-label=\"Clear\"\n                tabIndex={-1}\n              >\n                <svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                  <path d=\"M4 4l8 8M12 4l-8 8\" />\n                </svg>\n              </button>\n            )}\n            <span class=\"combobox-arrow\">\n              <svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                <path d=\"M4 6l4 4 4-4\" />\n              </svg>\n            </span>\n          </div>\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"]}

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

@@ -31,44 +31,20 @@ import { leConfirm } from "../le-popup/le-popup.api";
  * @cmsCategory System
  */
 export class LeComponent {
-    el;
-    /**
-     * The tag name of the component (e.g., 'le-card').
-     * Used to look up property metadata and display the component name.
-     */
-    component;
-    /**
-     * Optional display name for the component.
-     * If not provided, the tag name will be formatted as the display name.
-     */
-    displayName;
-    /**
-     * Classes to apply to the host element.
-     * Allows parent components to pass their styling classes.
-     */
-    hostClass;
-    /**
-     * Inline styles to apply to the host element.
-     * Allows parent components to pass dynamic styles (e.g., flex properties).
-     */
-    hostStyle;
-    /**
-     * Reference to the host element (found automatically from parent)
-     */
-    hostElement;
-    /**
-     * Internal state to track admin mode
-     */
-    adminMode = false;
-    /**
-     * Component metadata loaded from Custom Elements Manifest
-     */
-    componentMeta = null;
-    /**
-     * Current property values of the host component
-     */
-    propertyValues = {};
-    disconnectModeObserver;
+    constructor() {
+        /**
+         * Internal state to track admin mode
+         */
+        this.adminMode = false;
+        /**
+         * Component metadata loaded from Custom Elements Manifest
+         */
+        this.componentMeta = null;
+        /**
+         * Current property values of the host component
+         */
+        this.propertyValues = {};
+    }
     connectedCallback() {
         // Find the host element - le-component is rendered inside the component's shadow DOM,
         // so we need to find the shadow root's host element

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

@@ -1 +1 @@
-{"version":3,"file":"le-component.js","sourceRoot":"","sources":["../../../src/components/le-component/le-component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AACvF,OAAO,EAAE,UAAU,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAGrD;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AAOH,MAAM,OAAO,WAAW;IACX,EAAE,CAAc;IAE3B;;;OAGG;IACK,SAAS,CAAU;IAE3B;;;OAGG;IACK,WAAW,CAAU;IAE7B;;;OAGG;IACK,SAAS,CAAU;IAE3B;;;OAGG;IACK,SAAS,CAA6B;IAE9C;;OAEG;IACK,WAAW,CAAe;IAElC;;OAEG;IACc,SAAS,GAAY,KAAK,CAAC;IAE5C;;OAEG;IACc,aAAa,GAA6B,IAAI,CAAC;IAEhE;;OAEG;IACc,cAAc,GAAwB,EAAE,CAAC;IAElD,sBAAsB,CAAc;IAE5C,iBAAiB;QACf,sFAAsF;QACtF,oDAAoD;QACpD,IAAI,CAAC,eAAe,EAAE,CAAC;QAEvB,IAAI,CAAC,sBAAsB,GAAG,kBAAkB,CAAC,IAAI,CAAC,EAAE,EAAE,IAAI,CAAC,EAAE;YAC/D,IAAI,CAAC,SAAS,GAAG,IAAI,KAAK,OAAO,CAAC;YAClC,0EAA0E;YAC1E,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;gBACnB,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;oBACxB,IAAI,CAAC,qBAAqB,EAAE,CAAC;gBAC/B,CAAC;qBAAM,CAAC;oBACN,IAAI,CAAC,kBAAkB,EAAE,CAAC;gBAC5B,CAAC;YACH,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC;IAED;;OAEG;IACK,eAAe;QACrB,sDAAsD;QACtD,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE,CAAC,WAAW,EAAE,CAAC;QACvC,IAAI,QAAQ,YAAY,UAAU,EAAE,CAAC;YACnC,uEAAuE;YACvE,IAAI,CAAC,WAAW,GAAG,QAAQ,CAAC,IAAmB,CAAC;QAClD,CAAC;IACH,CAAC;IAED,gBAAgB;QACd,qDAAqD;QACrD,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAC5B,CAAC;IAED,oBAAoB;QAClB,IAAI,CAAC,sBAAsB,EAAE,EAAE,CAAC;IAClC,CAAC;IAED;;;OAGG;IACK,iBAAiB,CAAC,OAAe;QACvC,IAAI,CAAC,OAAO,IAAI,OAAO,OAAO,KAAK,QAAQ;YAAE,OAAO,SAAS,CAAC;QAC9D,OAAO,OAAO;aACX,OAAO,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC,sBAAsB;aAC1C,KAAK,CAAC,GAAG,CAAC;aACV,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;aACzD,IAAI,CAAC,GAAG,CAAC,CAAC;IACf,CAAC;IAED;;OAEG;IACK,KAAK,CAAC,qBAAqB;QACjC,IAAI,CAAC;YACH,yCAAyC;YACzC,MAAM,EAAE,YAAY,EAAE,GAAG,cAAc,EAAE,CAAC;YAC1C,MAAM,oBAAoB,GAAG,YAAY,CAAC,YAAY,YAAY,EAAE,CAAC,CAAC;YACtE,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,oBAAoB,CAAC,CAAC;YACnD,MAAM,QAAQ,GAAG,MAAM,QAAQ,CAAC,IAAI,EAAE,CAAC;YAEvC,gCAAgC;YAChC,KAAK,MAAM,MAAM,IAAI,QAAQ,CAAC,OAAO,EAAE,CAAC;gBACtC,KAAK,MAAM,WAAW,IAAI,MAAM,CAAC,YAAY,IAAI,EAAE,EAAE,CAAC;oBACpD,IAAI,WAAW,CAAC,OAAO,KAAK,IAAI,CAAC,SAAS,EAAE,CAAC;wBAC3C,MAAM,UAAU,GAAG,CAAC,WAAW,CAAC,UAAU,IAAI,EAAE,CAAC,CAAC,MAAM,CACtD,CAAC,IAAuB,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,CAClE,CAAC;wBACF,IAAI,CAAC,aAAa,GAAG;4BACnB,OAAO,EAAE,WAAW,CAAC,OAAO;4BAC5B,WAAW,EAAE,WAAW,CAAC,WAAW;4BACpC,UAAU;yBACX,CAAC;wBACF,4FAA4F;wBAC5F,gDAAgD;wBAChD,IAAI,CAAC,kBAAkB,EAAE,CAAC;wBAC1B,OAAO;oBACT,CAAC;gBACH,CAAC;YACH,CAAC;YACD,qFAAqF;QACvF,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YACf,kGAAkG;QACpG,CAAC;IACH,CAAC;IAED;;OAEG;IACK,mBAAmB,CAAC,IAAY;QACtC,MAAM,aAAa,GAAG,CAAC,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,CAAC,CAAC;QACxE,OAAO,aAAa,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;IACtC,CAAC;IAED;;OAEG;IACK,kBAAkB;QACxB,IAAI,CAAC,IAAI,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,aAAa;YAAE,OAAO;QAErD,MAAM,MAAM,GAAwB,EAAE,CAAC;QACvC,KAAK,MAAM,IAAI,IAAI,IAAI,CAAC,aAAa,CAAC,UAAU,EAAE,CAAC;YACjD,MAAM,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;YACvD,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,mBAAmB,CAAC,KAAK,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;QACvE,CAAC;QACD,IAAI,CAAC,cAAc,GAAG,MAAM,CAAC;IAC/B,CAAC;IAED;;OAEG;IACK,mBAAmB,CAAC,KAAoB,EAAE,IAAa;QAC7D,IAAI,KAAK,KAAK,IAAI;YAAE,OAAO,SAAS,CAAC;QAErC,IAAI,IAAI,KAAK,SAAS,EAAE,CAAC;YACvB,OAAO,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,OAAO,CAAC;QAC7C,CAAC;QACD,IAAI,IAAI,KAAK,QAAQ,EAAE,CAAC;YACtB,OAAO,UAAU,CAAC,KAAK,CAAC,CAAC;QAC3B,CAAC;QACD,OAAO,KAAK,CAAC;IACf,CAAC;IAED;;OAEG;IACK,oBAAoB,CAAC,QAAgB,EAAE,KAAU,EAAE,IAAa;QACtE,IAAI,CAAC,IAAI,CAAC,WAAW;YAAE,OAAO;QAE9B,sCAAsC;QACtC,IAAI,IAAI,KAAK,SAAS,EAAE,CAAC;YACvB,IAAI,KAAK,EAAE,CAAC;gBACV,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;YAC9C,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,WAAW,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAC;YAC7C,CAAC;QACH,CAAC;aAAM,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,EAAE,EAAE,CAAC;YAC/C,IAAI,CAAC,WAAW,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAC;QAC7C,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,QAAQ,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;QACzD,CAAC;QAED,qBAAqB;QACrB,IAAI,CAAC,cAAc,GAAG,EAAE,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,CAAC;QAEpE,uFAAuF;IACzF,CAAC;IAED;;OAEG;IACK,eAAe;QACrB,IAAI,CAAC,IAAI,CAAC,WAAW;YAAE,OAAO;QAE9B,mBAAmB;QACnB,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QACxE,IAAI,CAAC,SAAS,CAAC,eAAe,IAAI,GAAG,CAAC;YAAE,OAAO;QAE/C,0CAA0C;QAC1C,MAAM,MAAM,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC;QAC9C,IAAI,MAAM,EAAE,CAAC;YACX,IAAI,CAAC,WAAW,CAAC,MAAM,EAAE,CAAC;QAC5B,CAAC;IACH,CAAC;IAED;;OAEG;IACK,oBAAoB;QAC1B,MAAM,aAAa,GAAG,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,aAAa,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,CAAC;QAErF,OAAO,CACL,WAAK,KAAK,EAAC,2BAA2B;YACnC,aAAa,CAAC,CAAC,CAAC,CACf,YAAM,KAAK,EAAC,iBAAiB,EAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,cAAc,EAAE,IAC5D,IAAI,CAAC,aAAc,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,CAAC,CACtE,CACR,CAAC,CAAC,CAAC,CACF,SAAG,KAAK,EAAC,eAAe,6BAA2B,CACpD;YACD,WAAK,KAAK,EAAC,yBAAyB;gBAClC,iBACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAC,UAAU,EAClB,KAAK,EAAC,QAAQ,sBAEd,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,EAAE;oBAErC,YAAM,IAAI,EAAC,YAAY,yBAAW;oBAClC,mCAA6B,CACnB,CACR,CACF,CACP,CAAC;IACJ,CAAC;IAED;;OAEG;IACK,mBAAmB,CAAC,IAAuB;QACjD,MAAM,KAAK,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC7C,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE,IAAI,IAAI,QAAQ,CAAC;QAEzC,4FAA4F;QAC5F,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;QACzC,IAAI,SAAS,EAAE,CAAC;YACd,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,CAAC;YACzE,OAAO,CACL,WAAK,KAAK,EAAC,gBAAgB;gBACzB,aAAO,OAAO,EAAE,QAAQ,IAAI,CAAC,IAAI,EAAE;oBAChC,IAAI,CAAC,IAAI;oBACT,IAAI,CAAC,WAAW,IAAI,YAAM,KAAK,EAAC,eAAe,IAAE,IAAI,CAAC,WAAW,CAAQ,CACpE;gBACR,iBACE,OAAO,EAAE,CAAC,GAAG,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC,sBAE9D,KAAK,EAAE,KAAK,IAAI,IAAI,CAAC,OAAO,EAAE,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC,EAC/C,WAAW,EAAE,IAAI,CAAC,OAAO,EAAE,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC,EAC5C,QAAQ,EAAE,CAAC,CAAoC,EAAE,EAAE,CACjD,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE,IAAI,CAAC,GAEjD,CACT,CACP,CAAC;QACJ,CAAC;QAED,eAAe;QACf,IAAI,IAAI,KAAK,SAAS,EAAE,CAAC;YACvB,OAAO,CACL,WAAK,KAAK,EAAC,yCAAyC;gBAClD,mBACE,IAAI,EAAE,QAAQ,IAAI,CAAC,IAAI,EAAE,EACzB,OAAO,EAAE,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,EAAE,EACvC,QAAQ,EAAE,CAAC,CAAC,EAAE,CACZ,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,IAAI,EAAG,CAAC,CAAC,MAA2B,CAAC,OAAO,EAAE,IAAI,CAAC;oBAGnF,IAAI,CAAC,IAAI;oBACT,IAAI,CAAC,WAAW,IAAI,WAAK,IAAI,EAAC,aAAa,IAAE,IAAI,CAAC,WAAW,CAAO,CACzD,CACV,CACP,CAAC;QACJ,CAAC;QAED,cAAc;QACd,IAAI,IAAI,KAAK,QAAQ,EAAE,CAAC;YACtB,OAAO,CACL,WAAK,KAAK,EAAC,gBAAgB;gBACzB,aAAO,OAAO,EAAE,QAAQ,IAAI,CAAC,IAAI,EAAE;oBAChC,IAAI,CAAC,IAAI;oBACT,IAAI,CAAC,WAAW,IAAI,YAAM,KAAK,EAAC,eAAe,IAAE,IAAI,CAAC,WAAW,CAAQ,CACpE;gBACR,aACE,IAAI,EAAC,QAAQ,EACb,EAAE,EAAE,QAAQ,IAAI,CAAC,IAAI,EAAE,EACvB,KAAK,EAAE,KAAK,IAAI,EAAE,EAClB,WAAW,EAAE,IAAI,CAAC,OAAO,EACzB,QAAQ,EAAE,CAAC,CAAC,EAAE,CACZ,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,IAAI,EAAG,CAAC,CAAC,MAA2B,CAAC,KAAK,EAAE,IAAI,CAAC,GAElF,CACE,CACP,CAAC;QACJ,CAAC;QAED,6BAA6B;QAC7B,OAAO,CACL,WAAK,KAAK,EAAC,gBAAgB;YACzB,uBACE,IAAI,EAAE,QAAQ,IAAI,CAAC,IAAI,EAAE,EACzB,KAAK,EAAE,IAAI,CAAC,IAAI,EAChB,KAAK,EAAE,KAAK,IAAI,EAAE,EAClB,WAAW,EAAE,IAAI,CAAC,OAAO,EAAE,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC,EAC5C,QAAQ,EAAE,CAAC,CAAM,EAAE,EAAE,CAAC,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE,IAAI,CAAC;gBAEhF,YAAM,IAAI,EAAC,aAAa,IAAE,IAAI,CAAC,WAAW,CAAQ,CAClC,CACd,CACP,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QAExE,+DAA+D;QAC/D,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC;YACpB,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAE,UAAU,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,SAAS;gBAC5E,eAAa,CACR,CACR,CAAC;QACJ,CAAC;QAED,uDAAuD;QACvD,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAE,UAAU,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,YAAY,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,SAAS;YAC1F,WAAK,KAAK,EAAC,sBAAsB;gBAC/B,WAAK,KAAK,EAAC,qBAAqB;oBAC9B,YAAM,KAAK,EAAC,mBAAmB,IAAE,IAAI,CAAQ;oBAC7C,kBACE,YAAY,EAAE,GAAG,IAAI,WAAW,EAChC,QAAQ,EAAC,OAAO,EAChB,KAAK,EAAC,OAAO,eACH,OAAO,EACjB,IAAI,EAAC,SAAS;wBAEd,iBACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,qBAAqB,EAC3B,IAAI,EAAC,SAAS,EACd,OAAO,EAAC,OAAO,EACf,IAAI,EAAC,OAAO,gBACD,2BAA2B;4BAGtC,YAAM,KAAK,EAAC,sBAAsB,EAAC,IAAI,EAAC,WAAW,aAE5C,CACG;wBACX,IAAI,CAAC,oBAAoB,EAAE,CACjB,CACT;gBACN,WAAK,KAAK,EAAC,sBAAsB;oBAC/B,eAAa,CACT,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, State, h, Host, Element, getAssetPath } from '@stencil/core';\nimport { classnames, observeModeChanges } from '../../utils/utils';\nimport { getLeKitConfig } from '../../global/app';\nimport { leConfirm } from '../le-popup/le-popup.api';\nimport { LeOptionSelectDetail } from '../..';\n\n/**\n * Component wrapper for admin mode editing.\n *\n * This component is used internally by other components to provide admin-mode\n * editing capabilities. It wraps the component's rendered output and shows\n * a settings popover for editing properties.\n *\n * In default mode, it acts as a simple passthrough (display: contents).\n * In admin mode, it shows a border, component name header, and settings popover.\n *\n * The host element is found automatically by traversing up through the shadow DOM.\n *\n * Usage inside a component's render method:\n * ```tsx\n * render() {\n *   return (\n *     <le-component component=\"le-card\">\n *       <Host>...</Host>\n *     </le-component>\n *   );\n * }\n * ```\n *\n * @slot - The component's rendered content\n *\n * @cmsInternal true\n * @cmsCategory System\n */\n@Component({\n  tag: 'le-component',\n  styleUrl: 'le-component.css',\n  shadow: true,\n  assetsDirs: ['assets'],\n})\nexport class LeComponent {\n  @Element() el: HTMLElement;\n\n  /**\n   * The tag name of the component (e.g., 'le-card').\n   * Used to look up property metadata and display the component name.\n   */\n  @Prop() component!: string;\n\n  /**\n   * Optional display name for the component.\n   * If not provided, the tag name will be formatted as the display name.\n   */\n  @Prop() displayName?: string;\n\n  /**\n   * Classes to apply to the host element.\n   * Allows parent components to pass their styling classes.\n   */\n  @Prop() hostClass?: string;\n\n  /**\n   * Inline styles to apply to the host element.\n   * Allows parent components to pass dynamic styles (e.g., flex properties).\n   */\n  @Prop() hostStyle?: { [key: string]: string };\n\n  /**\n   * Reference to the host element (found automatically from parent)\n   */\n  private hostElement?: HTMLElement;\n\n  /**\n   * Internal state to track admin mode\n   */\n  @State() private adminMode: boolean = false;\n\n  /**\n   * Component metadata loaded from Custom Elements Manifest\n   */\n  @State() private componentMeta: ComponentMetadata | null = null;\n\n  /**\n   * Current property values of the host component\n   */\n  @State() private propertyValues: Record<string, any> = {};\n\n  private disconnectModeObserver?: () => void;\n\n  connectedCallback() {\n    // Find the host element - le-component is rendered inside the component's shadow DOM,\n    // so we need to find the shadow root's host element\n    this.findHostElement();\n\n    this.disconnectModeObserver = observeModeChanges(this.el, mode => {\n      this.adminMode = mode === 'admin';\n      // Load metadata and refresh property values only when entering admin mode\n      if (this.adminMode) {\n        if (!this.componentMeta) {\n          this.loadComponentMetadata();\n        } else {\n          this.readPropertyValues();\n        }\n      }\n    });\n  }\n\n  /**\n   * Find the host element by traversing up through shadow DOM\n   */\n  private findHostElement() {\n    // Get the shadow root that contains this le-component\n    const rootNode = this.el.getRootNode();\n    if (rootNode instanceof ShadowRoot) {\n      // The host of this shadow root is our target component (e.g., le-card)\n      this.hostElement = rootNode.host as HTMLElement;\n    }\n  }\n\n  componentDidLoad() {\n    // Read initial property values from the host element\n    this.readPropertyValues();\n  }\n\n  disconnectedCallback() {\n    this.disconnectModeObserver?.();\n  }\n\n  /**\n   * Formats a tag name into a display name\n   * e.g., 'le-card' -> 'Card'\n   */\n  private formatDisplayName(tagName: string): string {\n    if (!tagName || typeof tagName !== 'string') return 'unknown';\n    return tagName\n      .replace(/^le-/, '') // Remove 'le-' prefix\n      .split('-')\n      .map(word => word.charAt(0).toUpperCase() + word.slice(1))\n      .join(' ');\n  }\n\n  /**\n   * Load component metadata from the Custom Elements Manifest\n   */\n  private async loadComponentMetadata() {\n    try {\n      // Fetch the manifest from configured URL\n      const { manifestFile } = getLeKitConfig();\n      const manifestFileResolved = getAssetPath(`./assets/${manifestFile}`);\n      const response = await fetch(manifestFileResolved);\n      const manifest = await response.json();\n\n      // Find the component definition\n      for (const module of manifest.modules) {\n        for (const declaration of module.declarations || []) {\n          if (declaration.tagName === this.component) {\n            const attributes = (declaration.attributes || []).filter(\n              (attr: AttributeMetadata) => !this.isInternalAttribute(attr.name),\n            );\n            this.componentMeta = {\n              tagName: declaration.tagName,\n              description: declaration.description,\n              attributes,\n            };\n            // console.log(`[le-component] Loaded metadata for ${this.component}:`, this.componentMeta);\n            // Read property values after metadata is loaded\n            this.readPropertyValues();\n            return;\n          }\n        }\n      }\n      // console.warn(`[le-component] No metadata found for component: ${this.component}`);\n    } catch (error) {\n      // console.warn(`[le-component] Failed to load metadata for component: ${this.component}`, error);\n    }\n  }\n\n  /**\n   * Check if an attribute is internal (should not be shown in editor)\n   */\n  private isInternalAttribute(name: string): boolean {\n    const internalAttrs = ['mode', 'theme', 'class', 'style', 'id', 'slot'];\n    return internalAttrs.includes(name);\n  }\n\n  /**\n   * Read current property values from the host element\n   */\n  private readPropertyValues() {\n    if (!this.hostElement || !this.componentMeta) return;\n\n    const values: Record<string, any> = {};\n    for (const attr of this.componentMeta.attributes) {\n      const value = this.hostElement.getAttribute(attr.name);\n      values[attr.name] = this.parseAttributeValue(value, attr.type?.text);\n    }\n    this.propertyValues = values;\n  }\n\n  /**\n   * Parse an attribute value based on its type\n   */\n  private parseAttributeValue(value: string | null, type?: string): any {\n    if (value === null) return undefined;\n\n    if (type === 'boolean') {\n      return value !== null && value !== 'false';\n    }\n    if (type === 'number') {\n      return parseFloat(value);\n    }\n    return value;\n  }\n\n  /**\n   * Handle property value changes from the editor\n   */\n  private handlePropertyChange(attrName: string, value: any, type?: string) {\n    if (!this.hostElement) return;\n\n    // Update the host element's attribute\n    if (type === 'boolean') {\n      if (value) {\n        this.hostElement.setAttribute(attrName, '');\n      } else {\n        this.hostElement.removeAttribute(attrName);\n      }\n    } else if (value === undefined || value === '') {\n      this.hostElement.removeAttribute(attrName);\n    } else {\n      this.hostElement.setAttribute(attrName, String(value));\n    }\n\n    // Update local state\n    this.propertyValues = { ...this.propertyValues, [attrName]: value };\n\n    // update the host element the way the parent element mutation observer would catch it?\n  }\n\n  /**\n   * Delete this component from the DOM\n   */\n  private deleteComponent() {\n    if (!this.hostElement) return;\n\n    // Confirm deletion\n    const name = this.displayName || this.formatDisplayName(this.component);\n    if (!leConfirm(`Delete this ${name}?`)) return;\n\n    // Remove the host element from its parent\n    const parent = this.hostElement.parentElement;\n    if (parent) {\n      this.hostElement.remove();\n    }\n  }\n\n  /**\n   * Render the property editor form\n   */\n  private renderPropertyEditor() {\n    const hasProperties = this.componentMeta && this.componentMeta.attributes.length > 0;\n\n    return (\n      <div class=\"property-editor-container\">\n        {hasProperties ? (\n          <form class=\"property-editor\" onSubmit={e => e.preventDefault()}>\n            {this.componentMeta!.attributes.map(attr => this.renderPropertyField(attr))}\n          </form>\n        ) : (\n          <p class=\"no-properties\">No editable properties</p>\n        )}\n        <div class=\"property-editor-actions\">\n          <le-button\n            type=\"button\"\n            variant=\"outlined\"\n            color=\"danger\"\n            full-width\n            onClick={() => this.deleteComponent()}\n          >\n            <span slot=\"icon-start\">🗑️</span>\n            <span>Delete Component</span>\n          </le-button>\n        </div>\n      </div>\n    );\n  }\n\n  /**\n   * Render a single property field based on its type\n   */\n  private renderPropertyField(attr: AttributeMetadata) {\n    const value = this.propertyValues[attr.name];\n    const type = attr.type?.text || 'string';\n\n    // Check if type is a union of string literals (e.g., \"'default' | 'outlined' | 'elevated'\")\n    const enumMatch = type.match(/^'[^']+'/);\n    if (enumMatch) {\n      const options = type.split('|').map(opt => opt.trim().replace(/'/g, ''));\n      return (\n        <div class=\"property-field\">\n          <label htmlFor={`prop-${attr.name}`}>\n            {attr.name}\n            {attr.description && <span class=\"property-hint\">{attr.description}</span>}\n          </label>\n          <le-select\n            options={[...options.map(opt => ({ label: opt, value: opt }))]}\n            full-width\n            value={value ?? attr.default?.replace(/'/g, '')}\n            placeholder={attr.default?.replace(/'/g, '')}\n            onChange={(e: CustomEvent<LeOptionSelectDetail>) =>\n              this.handlePropertyChange(attr.name, e.detail.value, type)\n            }\n          ></le-select>\n        </div>\n      );\n    }\n\n    // Boolean type\n    if (type === 'boolean') {\n      return (\n        <div class=\"property-field property-field--checkbox\">\n          <le-checkbox\n            name={`prop-${attr.name}`}\n            checked={value === true || value === ''}\n            onChange={e =>\n              this.handlePropertyChange(attr.name, (e.target as HTMLInputElement).checked, type)\n            }\n          >\n            {attr.name}\n            {attr.description && <div slot=\"description\">{attr.description}</div>}\n          </le-checkbox>\n        </div>\n      );\n    }\n\n    // Number type\n    if (type === 'number') {\n      return (\n        <div class=\"property-field\">\n          <label htmlFor={`prop-${attr.name}`}>\n            {attr.name}\n            {attr.description && <span class=\"property-hint\">{attr.description}</span>}\n          </label>\n          <input\n            type=\"number\"\n            id={`prop-${attr.name}`}\n            value={value ?? ''}\n            placeholder={attr.default}\n            onChange={e =>\n              this.handlePropertyChange(attr.name, (e.target as HTMLInputElement).value, type)\n            }\n          />\n        </div>\n      );\n    }\n\n    // Default: string/text input\n    return (\n      <div class=\"property-field\">\n        <le-string-input\n          name={`prop-${attr.name}`}\n          label={attr.name}\n          value={value ?? ''}\n          placeholder={attr.default?.replace(/'/g, '')}\n          onChange={(e: any) => this.handlePropertyChange(attr.name, e.detail.value, type)}\n        >\n          <span slot=\"description\">{attr.description}</span>\n        </le-string-input>\n      </div>\n    );\n  }\n\n  render() {\n    const name = this.displayName || this.formatDisplayName(this.component);\n\n    // In default mode, just pass through content with host classes\n    if (!this.adminMode) {\n      return (\n        <Host class={classnames(this.component, this.hostClass)} style={this.hostStyle}>\n          <slot></slot>\n        </Host>\n      );\n    }\n\n    // In admin mode, show wrapper with header and settings\n    return (\n      <Host class={classnames(this.component, this.hostClass, 'admin-mode')} style={this.hostStyle}>\n        <div class=\"le-component-wrapper\">\n          <div class=\"le-component-header\">\n            <span class=\"le-component-name\">{name}</span>\n            <le-popover\n              popoverTitle={`${name} Settings`}\n              position=\"right\"\n              align=\"start\"\n              min-width=\"300px\"\n              mode=\"default\"\n            >\n              <le-button\n                type=\"button\"\n                class=\"le-component-button\"\n                slot=\"trigger\"\n                variant=\"clear\"\n                size=\"small\"\n                aria-label=\"Edit component properties\"\n                icon-only\n              >\n                <span class=\"le-component-trigger\" slot=\"icon-only\">\n                  ⚙\n                </span>\n              </le-button>\n              {this.renderPropertyEditor()}\n            </le-popover>\n          </div>\n          <div class=\"le-component-content\">\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n\n/**\n * Type definitions for component metadata\n */\ninterface ComponentMetadata {\n  tagName: string;\n  description?: string;\n  attributes: AttributeMetadata[];\n}\n\ninterface AttributeMetadata {\n  name: string;\n  fieldName?: string;\n  description?: string;\n  default?: string;\n  type?: {\n    text: string;\n  };\n}\n"]}
+{"version":3,"file":"le-component.js","sourceRoot":"","sources":["../../../src/components/le-component/le-component.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, State, h, Host, Element, getAssetPath } from '@stencil/core';\nimport { classnames, observeModeChanges } from '../../utils/utils';\nimport { getLeKitConfig } from '../../global/app';\nimport { leConfirm } from '../le-popup/le-popup.api';\nimport { LeOptionSelectDetail } from '../..';\n\n/**\n * Component wrapper for admin mode editing.\n *\n * This component is used internally by other components to provide admin-mode\n * editing capabilities. It wraps the component's rendered output and shows\n * a settings popover for editing properties.\n *\n * In default mode, it acts as a simple passthrough (display: contents).\n * In admin mode, it shows a border, component name header, and settings popover.\n *\n * The host element is found automatically by traversing up through the shadow DOM.\n *\n * Usage inside a component's render method:\n * ```tsx\n * render() {\n *   return (\n *     <le-component component=\"le-card\">\n *       <Host>...</Host>\n *     </le-component>\n *   );\n * }\n * ```\n *\n * @slot - The component's rendered content\n *\n * @cmsInternal true\n * @cmsCategory System\n */\n@Component({\n  tag: 'le-component',\n  styleUrl: 'le-component.css',\n  shadow: true,\n  assetsDirs: ['assets'],\n})\nexport class LeComponent {\n  @Element() el: HTMLElement;\n\n  /**\n   * The tag name of the component (e.g., 'le-card').\n   * Used to look up property metadata and display the component name.\n   */\n  @Prop() component!: string;\n\n  /**\n   * Optional display name for the component.\n   * If not provided, the tag name will be formatted as the display name.\n   */\n  @Prop() displayName?: string;\n\n  /**\n   * Classes to apply to the host element.\n   * Allows parent components to pass their styling classes.\n   */\n  @Prop() hostClass?: string;\n\n  /**\n   * Inline styles to apply to the host element.\n   * Allows parent components to pass dynamic styles (e.g., flex properties).\n   */\n  @Prop() hostStyle?: { [key: string]: string };\n\n  /**\n   * Reference to the host element (found automatically from parent)\n   */\n  private hostElement?: HTMLElement;\n\n  /**\n   * Internal state to track admin mode\n   */\n  @State() private adminMode: boolean = false;\n\n  /**\n   * Component metadata loaded from Custom Elements Manifest\n   */\n  @State() private componentMeta: ComponentMetadata | null = null;\n\n  /**\n   * Current property values of the host component\n   */\n  @State() private propertyValues: Record<string, any> = {};\n\n  private disconnectModeObserver?: () => void;\n\n  connectedCallback() {\n    // Find the host element - le-component is rendered inside the component's shadow DOM,\n    // so we need to find the shadow root's host element\n    this.findHostElement();\n\n    this.disconnectModeObserver = observeModeChanges(this.el, mode => {\n      this.adminMode = mode === 'admin';\n      // Load metadata and refresh property values only when entering admin mode\n      if (this.adminMode) {\n        if (!this.componentMeta) {\n          this.loadComponentMetadata();\n        } else {\n          this.readPropertyValues();\n        }\n      }\n    });\n  }\n\n  /**\n   * Find the host element by traversing up through shadow DOM\n   */\n  private findHostElement() {\n    // Get the shadow root that contains this le-component\n    const rootNode = this.el.getRootNode();\n    if (rootNode instanceof ShadowRoot) {\n      // The host of this shadow root is our target component (e.g., le-card)\n      this.hostElement = rootNode.host as HTMLElement;\n    }\n  }\n\n  componentDidLoad() {\n    // Read initial property values from the host element\n    this.readPropertyValues();\n  }\n\n  disconnectedCallback() {\n    this.disconnectModeObserver?.();\n  }\n\n  /**\n   * Formats a tag name into a display name\n   * e.g., 'le-card' -> 'Card'\n   */\n  private formatDisplayName(tagName: string): string {\n    if (!tagName || typeof tagName !== 'string') return 'unknown';\n    return tagName\n      .replace(/^le-/, '') // Remove 'le-' prefix\n      .split('-')\n      .map(word => word.charAt(0).toUpperCase() + word.slice(1))\n      .join(' ');\n  }\n\n  /**\n   * Load component metadata from the Custom Elements Manifest\n   */\n  private async loadComponentMetadata() {\n    try {\n      // Fetch the manifest from configured URL\n      const { manifestFile } = getLeKitConfig();\n      const manifestFileResolved = getAssetPath(`./assets/${manifestFile}`);\n      const response = await fetch(manifestFileResolved);\n      const manifest = await response.json();\n\n      // Find the component definition\n      for (const module of manifest.modules) {\n        for (const declaration of module.declarations || []) {\n          if (declaration.tagName === this.component) {\n            const attributes = (declaration.attributes || []).filter(\n              (attr: AttributeMetadata) => !this.isInternalAttribute(attr.name),\n            );\n            this.componentMeta = {\n              tagName: declaration.tagName,\n              description: declaration.description,\n              attributes,\n            };\n            // console.log(`[le-component] Loaded metadata for ${this.component}:`, this.componentMeta);\n            // Read property values after metadata is loaded\n            this.readPropertyValues();\n            return;\n          }\n        }\n      }\n      // console.warn(`[le-component] No metadata found for component: ${this.component}`);\n    } catch (error) {\n      // console.warn(`[le-component] Failed to load metadata for component: ${this.component}`, error);\n    }\n  }\n\n  /**\n   * Check if an attribute is internal (should not be shown in editor)\n   */\n  private isInternalAttribute(name: string): boolean {\n    const internalAttrs = ['mode', 'theme', 'class', 'style', 'id', 'slot'];\n    return internalAttrs.includes(name);\n  }\n\n  /**\n   * Read current property values from the host element\n   */\n  private readPropertyValues() {\n    if (!this.hostElement || !this.componentMeta) return;\n\n    const values: Record<string, any> = {};\n    for (const attr of this.componentMeta.attributes) {\n      const value = this.hostElement.getAttribute(attr.name);\n      values[attr.name] = this.parseAttributeValue(value, attr.type?.text);\n    }\n    this.propertyValues = values;\n  }\n\n  /**\n   * Parse an attribute value based on its type\n   */\n  private parseAttributeValue(value: string | null, type?: string): any {\n    if (value === null) return undefined;\n\n    if (type === 'boolean') {\n      return value !== null && value !== 'false';\n    }\n    if (type === 'number') {\n      return parseFloat(value);\n    }\n    return value;\n  }\n\n  /**\n   * Handle property value changes from the editor\n   */\n  private handlePropertyChange(attrName: string, value: any, type?: string) {\n    if (!this.hostElement) return;\n\n    // Update the host element's attribute\n    if (type === 'boolean') {\n      if (value) {\n        this.hostElement.setAttribute(attrName, '');\n      } else {\n        this.hostElement.removeAttribute(attrName);\n      }\n    } else if (value === undefined || value === '') {\n      this.hostElement.removeAttribute(attrName);\n    } else {\n      this.hostElement.setAttribute(attrName, String(value));\n    }\n\n    // Update local state\n    this.propertyValues = { ...this.propertyValues, [attrName]: value };\n\n    // update the host element the way the parent element mutation observer would catch it?\n  }\n\n  /**\n   * Delete this component from the DOM\n   */\n  private deleteComponent() {\n    if (!this.hostElement) return;\n\n    // Confirm deletion\n    const name = this.displayName || this.formatDisplayName(this.component);\n    if (!leConfirm(`Delete this ${name}?`)) return;\n\n    // Remove the host element from its parent\n    const parent = this.hostElement.parentElement;\n    if (parent) {\n      this.hostElement.remove();\n    }\n  }\n\n  /**\n   * Render the property editor form\n   */\n  private renderPropertyEditor() {\n    const hasProperties = this.componentMeta && this.componentMeta.attributes.length > 0;\n\n    return (\n      <div class=\"property-editor-container\">\n        {hasProperties ? (\n          <form class=\"property-editor\" onSubmit={e => e.preventDefault()}>\n            {this.componentMeta!.attributes.map(attr => this.renderPropertyField(attr))}\n          </form>\n        ) : (\n          <p class=\"no-properties\">No editable properties</p>\n        )}\n        <div class=\"property-editor-actions\">\n          <le-button\n            type=\"button\"\n            variant=\"outlined\"\n            color=\"danger\"\n            full-width\n            onClick={() => this.deleteComponent()}\n          >\n            <span slot=\"icon-start\">🗑️</span>\n            <span>Delete Component</span>\n          </le-button>\n        </div>\n      </div>\n    );\n  }\n\n  /**\n   * Render a single property field based on its type\n   */\n  private renderPropertyField(attr: AttributeMetadata) {\n    const value = this.propertyValues[attr.name];\n    const type = attr.type?.text || 'string';\n\n    // Check if type is a union of string literals (e.g., \"'default' | 'outlined' | 'elevated'\")\n    const enumMatch = type.match(/^'[^']+'/);\n    if (enumMatch) {\n      const options = type.split('|').map(opt => opt.trim().replace(/'/g, ''));\n      return (\n        <div class=\"property-field\">\n          <label htmlFor={`prop-${attr.name}`}>\n            {attr.name}\n            {attr.description && <span class=\"property-hint\">{attr.description}</span>}\n          </label>\n          <le-select\n            options={[...options.map(opt => ({ label: opt, value: opt }))]}\n            full-width\n            value={value ?? attr.default?.replace(/'/g, '')}\n            placeholder={attr.default?.replace(/'/g, '')}\n            onChange={(e: CustomEvent<LeOptionSelectDetail>) =>\n              this.handlePropertyChange(attr.name, e.detail.value, type)\n            }\n          ></le-select>\n        </div>\n      );\n    }\n\n    // Boolean type\n    if (type === 'boolean') {\n      return (\n        <div class=\"property-field property-field--checkbox\">\n          <le-checkbox\n            name={`prop-${attr.name}`}\n            checked={value === true || value === ''}\n            onChange={e =>\n              this.handlePropertyChange(attr.name, (e.target as HTMLInputElement).checked, type)\n            }\n          >\n            {attr.name}\n            {attr.description && <div slot=\"description\">{attr.description}</div>}\n          </le-checkbox>\n        </div>\n      );\n    }\n\n    // Number type\n    if (type === 'number') {\n      return (\n        <div class=\"property-field\">\n          <label htmlFor={`prop-${attr.name}`}>\n            {attr.name}\n            {attr.description && <span class=\"property-hint\">{attr.description}</span>}\n          </label>\n          <input\n            type=\"number\"\n            id={`prop-${attr.name}`}\n            value={value ?? ''}\n            placeholder={attr.default}\n            onChange={e =>\n              this.handlePropertyChange(attr.name, (e.target as HTMLInputElement).value, type)\n            }\n          />\n        </div>\n      );\n    }\n\n    // Default: string/text input\n    return (\n      <div class=\"property-field\">\n        <le-string-input\n          name={`prop-${attr.name}`}\n          label={attr.name}\n          value={value ?? ''}\n          placeholder={attr.default?.replace(/'/g, '')}\n          onChange={(e: any) => this.handlePropertyChange(attr.name, e.detail.value, type)}\n        >\n          <span slot=\"description\">{attr.description}</span>\n        </le-string-input>\n      </div>\n    );\n  }\n\n  render() {\n    const name = this.displayName || this.formatDisplayName(this.component);\n\n    // In default mode, just pass through content with host classes\n    if (!this.adminMode) {\n      return (\n        <Host class={classnames(this.component, this.hostClass)} style={this.hostStyle}>\n          <slot></slot>\n        </Host>\n      );\n    }\n\n    // In admin mode, show wrapper with header and settings\n    return (\n      <Host class={classnames(this.component, this.hostClass, 'admin-mode')} style={this.hostStyle}>\n        <div class=\"le-component-wrapper\">\n          <div class=\"le-component-header\">\n            <span class=\"le-component-name\">{name}</span>\n            <le-popover\n              popoverTitle={`${name} Settings`}\n              position=\"right\"\n              align=\"start\"\n              min-width=\"300px\"\n              mode=\"default\"\n            >\n              <le-button\n                type=\"button\"\n                class=\"le-component-button\"\n                slot=\"trigger\"\n                variant=\"clear\"\n                size=\"small\"\n                aria-label=\"Edit component properties\"\n                icon-only\n              >\n                <span class=\"le-component-trigger\" slot=\"icon-only\">\n                  ⚙\n                </span>\n              </le-button>\n              {this.renderPropertyEditor()}\n            </le-popover>\n          </div>\n          <div class=\"le-component-content\">\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n\n/**\n * Type definitions for component metadata\n */\ninterface ComponentMetadata {\n  tagName: string;\n  description?: string;\n  attributes: AttributeMetadata[];\n}\n\ninterface AttributeMetadata {\n  name: string;\n  fieldName?: string;\n  description?: string;\n  default?: string;\n  type?: {\n    text: string;\n  };\n}\n"]}

package/dist/collection/components/le-current-heading/le-current-heading.js

@@ -13,10 +13,11 @@ import { h, Host } from "@stencil/core";
  * @cmsCategory Layout
  */
 export class LeCurrentHeading {
-    el;
-    /** CSS selector for page title/headings to watch (e.g. `.page-title`, `main h2`). */
-    selector = '';
-    activeText = null;
+    constructor() {
+        /** CSS selector for page title/headings to watch (e.g. `.page-title`, `main h2`). */
+        this.selector = '';
+        this.activeText = null;
+    }
     componentWillLoad() {
         this.updateActiveTitle();
     }
@@ -61,7 +62,7 @@ export class LeCurrentHeading {
         }
     }
     render() {
-        return (h(Host, { key: 'c8d94a695a402039000210914b6780264a034a89' }, this.activeText ? (h("span", { class: "title", part: "title" }, this.activeText)) : (h("slot", null))));
+        return (h(Host, { key: '72903f20413e002efaef27210a1dedfdc4065404' }, this.activeText ? (h("span", { class: "title", part: "title" }, this.activeText)) : (h("slot", null))));
     }
     static get is() { return "le-current-heading"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/le-current-heading/le-current-heading.js.map

@@ -1 +1 @@
-{"version":3,"file":"le-current-heading.js","sourceRoot":"","sources":["../../../src/components/le-current-heading/le-current-heading.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAExF;;;;;;;;;;;;GAYG;AAMH,MAAM,OAAO,gBAAgB;IAChB,EAAE,CAAc;IAE3B,qFAAqF;IACpD,QAAQ,GAAW,EAAE,CAAC;IAEtC,UAAU,GAAkB,IAAI,CAAC;IAElD,iBAAiB;QACf,IAAI,CAAC,iBAAiB,EAAE,CAAC;IAC3B,CAAC;IAGS,gBAAgB;QACxB,IAAI,CAAC,iBAAiB,EAAE,CAAC;IAC3B,CAAC;IAGS,QAAQ;QAChB,IAAI,CAAC,iBAAiB,EAAE,CAAC;IAC3B,CAAC;IAGS,QAAQ;QAChB,IAAI,CAAC,iBAAiB,EAAE,CAAC;IAC3B,CAAC;IAEO,iBAAiB;QACvB,IAAI,OAAO,MAAM,KAAK,WAAW;YAAE,OAAO;QAC1C,MAAM,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,IAAI,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC;QAC9C,IAAI,CAAC,QAAQ,EAAE,CAAC;YACd,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;YACvB,OAAO;QACT,CAAC;QAED,IAAI,QAAQ,GAAc,EAAE,CAAC;QAC7B,IAAI,CAAC;YACH,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC,CAAC;QAC7D,CAAC;QAAC,MAAM,CAAC;YACP,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;YACvB,OAAO;QACT,CAAC;QAED,0DAA0D;QAC1D,IAAI,QAAQ,GAAkB,IAAI,CAAC;QACnC,KAAK,MAAM,OAAO,IAAI,QAAQ,EAAE,CAAC;YAC/B,MAAM,IAAI,GAAI,OAAuB,CAAC,qBAAqB,EAAE,CAAC;YAC9D,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,IAAI,CAAC,MAAM,IAAI,CAAC,EAAE,CAAC;gBACxC,MAAM,CAAC,GAAG,CAAC,OAAO,CAAC,WAAW,IAAI,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC;gBAC7C,IAAI,CAAC;oBAAE,QAAQ,GAAG,CAAC,CAAC;YACtB,CAAC;QACH,CAAC;QAED,2EAA2E;QAC3E,IAAI,QAAQ,KAAK,IAAI,CAAC,UAAU,EAAE,CAAC;YACjC,IAAI,CAAC,UAAU,GAAG,QAAQ,CAAC;QAC7B,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,uDACF,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CACjB,YAAM,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,IAC7B,IAAI,CAAC,UAAU,CACX,CACR,CAAC,CAAC,CAAC,CACF,eAAa,CACd,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Host, Listen, Prop, State, Watch } from '@stencil/core';\n\n/**\n * Shows a \"smart\" header title based on what has scrolled out of view.\n *\n * When `selector` matches multiple elements, the title becomes the last element\n * (top-to-bottom) that has fully scrolled out above the viewport.\n *\n * @slot - Optional fallback content if no watched title is active\n *\n * @csspart title - The rendered title\n *\n * @cmsEditable true\n * @cmsCategory Layout\n */\n@Component({\n  tag: 'le-current-heading',\n  styleUrl: 'le-current-heading.css',\n  shadow: true,\n})\nexport class LeCurrentHeading {\n  @Element() el: HTMLElement;\n\n  /** CSS selector for page title/headings to watch (e.g. `.page-title`, `main h2`). */\n  @Prop({ attribute: 'selector' }) selector: string = '';\n\n  @State() private activeText: string | null = null;\n\n  componentWillLoad() {\n    this.updateActiveTitle();\n  }\n\n  @Watch('selector')\n  protected onSelectorChange() {\n    this.updateActiveTitle();\n  }\n\n  @Listen('scroll', { target: 'window', passive: true })\n  protected onScroll() {\n    this.updateActiveTitle();\n  }\n\n  @Listen('resize', { target: 'window', passive: true })\n  protected onResize() {\n    this.updateActiveTitle();\n  }\n\n  private updateActiveTitle() {\n    if (typeof window === 'undefined') return;\n    const selector = (this.selector ?? '').trim();\n    if (!selector) {\n      this.activeText = null;\n      return;\n    }\n\n    let elements: Element[] = [];\n    try {\n      elements = Array.from(document.querySelectorAll(selector));\n    } catch {\n      this.activeText = null;\n      return;\n    }\n\n    // Pick the last element that is fully above the viewport.\n    let nextText: string | null = null;\n    for (const element of elements) {\n      const rect = (element as HTMLElement).getBoundingClientRect();\n      if (rect.height > 0 && rect.bottom <= 0) {\n        const t = (element.textContent ?? '').trim();\n        if (t) nextText = t;\n      }\n    }\n\n    // Do not create oscillations: update only when the computed title changes.\n    if (nextText !== this.activeText) {\n      this.activeText = nextText;\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        {this.activeText ? (\n          <span class=\"title\" part=\"title\">\n            {this.activeText}\n          </span>\n        ) : (\n          <slot></slot>\n        )}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"le-current-heading.js","sourceRoot":"","sources":["../../../src/components/le-current-heading/le-current-heading.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAExF;;;;;;;;;;;;GAYG;AAMH,MAAM,OAAO,gBAAgB;IAL7B;QAQE,qFAAqF;QACpD,aAAQ,GAAW,EAAE,CAAC;QAEtC,eAAU,GAAkB,IAAI,CAAC;KAkEnD;IAhEC,iBAAiB;QACf,IAAI,CAAC,iBAAiB,EAAE,CAAC;IAC3B,CAAC;IAGS,gBAAgB;QACxB,IAAI,CAAC,iBAAiB,EAAE,CAAC;IAC3B,CAAC;IAGS,QAAQ;QAChB,IAAI,CAAC,iBAAiB,EAAE,CAAC;IAC3B,CAAC;IAGS,QAAQ;QAChB,IAAI,CAAC,iBAAiB,EAAE,CAAC;IAC3B,CAAC;IAEO,iBAAiB;QACvB,IAAI,OAAO,MAAM,KAAK,WAAW;YAAE,OAAO;QAC1C,MAAM,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,IAAI,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC;QAC9C,IAAI,CAAC,QAAQ,EAAE,CAAC;YACd,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;YACvB,OAAO;QACT,CAAC;QAED,IAAI,QAAQ,GAAc,EAAE,CAAC;QAC7B,IAAI,CAAC;YACH,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC,CAAC;QAC7D,CAAC;QAAC,MAAM,CAAC;YACP,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;YACvB,OAAO;QACT,CAAC;QAED,0DAA0D;QAC1D,IAAI,QAAQ,GAAkB,IAAI,CAAC;QACnC,KAAK,MAAM,OAAO,IAAI,QAAQ,EAAE,CAAC;YAC/B,MAAM,IAAI,GAAI,OAAuB,CAAC,qBAAqB,EAAE,CAAC;YAC9D,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,IAAI,CAAC,MAAM,IAAI,CAAC,EAAE,CAAC;gBACxC,MAAM,CAAC,GAAG,CAAC,OAAO,CAAC,WAAW,IAAI,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC;gBAC7C,IAAI,CAAC;oBAAE,QAAQ,GAAG,CAAC,CAAC;YACtB,CAAC;QACH,CAAC;QAED,2EAA2E;QAC3E,IAAI,QAAQ,KAAK,IAAI,CAAC,UAAU,EAAE,CAAC;YACjC,IAAI,CAAC,UAAU,GAAG,QAAQ,CAAC;QAC7B,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,uDACF,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CACjB,YAAM,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,IAC7B,IAAI,CAAC,UAAU,CACX,CACR,CAAC,CAAC,CAAC,CACF,eAAa,CACd,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Host, Listen, Prop, State, Watch } from '@stencil/core';\n\n/**\n * Shows a \"smart\" header title based on what has scrolled out of view.\n *\n * When `selector` matches multiple elements, the title becomes the last element\n * (top-to-bottom) that has fully scrolled out above the viewport.\n *\n * @slot - Optional fallback content if no watched title is active\n *\n * @csspart title - The rendered title\n *\n * @cmsEditable true\n * @cmsCategory Layout\n */\n@Component({\n  tag: 'le-current-heading',\n  styleUrl: 'le-current-heading.css',\n  shadow: true,\n})\nexport class LeCurrentHeading {\n  @Element() el: HTMLElement;\n\n  /** CSS selector for page title/headings to watch (e.g. `.page-title`, `main h2`). */\n  @Prop({ attribute: 'selector' }) selector: string = '';\n\n  @State() private activeText: string | null = null;\n\n  componentWillLoad() {\n    this.updateActiveTitle();\n  }\n\n  @Watch('selector')\n  protected onSelectorChange() {\n    this.updateActiveTitle();\n  }\n\n  @Listen('scroll', { target: 'window', passive: true })\n  protected onScroll() {\n    this.updateActiveTitle();\n  }\n\n  @Listen('resize', { target: 'window', passive: true })\n  protected onResize() {\n    this.updateActiveTitle();\n  }\n\n  private updateActiveTitle() {\n    if (typeof window === 'undefined') return;\n    const selector = (this.selector ?? '').trim();\n    if (!selector) {\n      this.activeText = null;\n      return;\n    }\n\n    let elements: Element[] = [];\n    try {\n      elements = Array.from(document.querySelectorAll(selector));\n    } catch {\n      this.activeText = null;\n      return;\n    }\n\n    // Pick the last element that is fully above the viewport.\n    let nextText: string | null = null;\n    for (const element of elements) {\n      const rect = (element as HTMLElement).getBoundingClientRect();\n      if (rect.height > 0 && rect.bottom <= 0) {\n        const t = (element.textContent ?? '').trim();\n        if (t) nextText = t;\n      }\n    }\n\n    // Do not create oscillations: update only when the computed title changes.\n    if (nextText !== this.activeText) {\n      this.activeText = nextText;\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        {this.activeText ? (\n          <span class=\"title\" part=\"title\">\n            {this.activeText}\n          </span>\n        ) : (\n          <slot></slot>\n        )}\n      </Host>\n    );\n  }\n}\n"]}