le-kit 0.1.14 → 0.1.15

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

@@ -0,0 +1,121 @@
+/**
+ * le-select component styles
+ *
+ * CSS Custom Properties:
+ * --le-select-height
+ * --le-select-padding-x
+ * --le-select-font-size
+ * --le-select-border-radius
+ * --le-select-border-color
+ * --le-select-bg
+ * --le-select-color
+ */
+
+:host {
+  display: inline-block;
+  min-width: 150px;
+  --le-select-color: var(--le-color-text, #1f2937);
+  --le-select-border-radius: var(--le-radius-md);
+  --le-select-content-padding: var(--le-spacing-2);
+}
+
+:host([disabled]) {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+:host([full-width]) {
+  width: 100%;
+}
+
+/* Trigger button */
+.select-trigger {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  width: 100%;
+  padding: 0;
+  --le-button-padding: var(--le-spacing-1) var(--le-spacing-1) var(--le-spacing-1) var(--le-spacing-2);
+  font-size: var(--le-select-font-size, 0.875rem);
+  font-family: inherit;
+  line-height: 1.4;
+  color: var(--le-select-color);
+  background: var(--le-select-bg, var(--le-color-surface, #fff));
+  border-radius: var(--le-select-border-radius);
+  cursor: pointer;
+  text-align: left;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+.select-trigger:focus {
+  outline: 2px solid var(--le-color-focus);
+  outline-offset: 2px;
+}
+
+/* Placeholder state */
+.select-trigger:not(.has-value) .trigger-label {
+  color: color-mix(in srgb, var(--le-color-text-secondary) 66%, transparent);
+}
+
+/* Trigger icon */
+.trigger-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+.trigger-icon-end {
+  width: 16px;
+  height: 16px;
+}
+
+.trigger-icon img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+/* Trigger label */
+.trigger-label {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--le-color-text);
+}
+
+.trigger-label::not(.has-value) {
+  color: var(--le-color-text-disabled, #9ca3af);
+}
+
+/* Arrow icon */
+le-button::part(icon-end) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 1.25rem;
+  height: 1.25rem;
+  margin-left: auto;
+  transition: transform 0.2s ease;
+}
+
+le-button::part(icon-end) svg {
+  width: 1rem;
+  height: 1rem;
+}
+
+le-button.is-open::part(icon-end) {
+  transform: rotate(180deg);
+}
+
+/* Search in dropdown */
+.search-input::part(container):focus-within {
+  outline: none !important;
+}
+.search-input {
+  --le-input-radius: var(--le-radius-md);
+}

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: 'c8ce895d257cb8e40f1f4d1181ece5db9c2df9f5', component: "le-select" }, h("le-dropdown-base", { key: 'f8ed2326295860fb658cca0eae4c153a2dbcb833', 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: 'c72c327bfa5874f55defc08fe8057bb109a4b6c3', 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: '717d9ea1dc386f4adf13aba94c82a1d8f8781c37', class: "trigger-label" }, hasValue ? this.selectedOption.label : this.placeholder)), this.searchable && this.open && (h("div", { key: '7833ecb5f569e05e04c606117bf87f82ae5a268c', class: "multiselect-search", slot: "header" }, h("le-string-input", { key: 'd8f4de77eb3079a11e1d707b74dca43f034ef85d', mode: "default", inputRef: el => (this.inputEl = el), class: "search-input", placeholder: "Search...", value: this.searchQuery, onInput: this.handleSearchInput })))), this.name && h("input", { key: 'caa92c54c78af922c471b1cb327969e83dea195b', 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