le-kit 0.1.13 → 0.1.15

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

@@ -0,0 +1,734 @@
+import { h, } from "@stencil/core";
+/**
+ * A multiselect component for selecting multiple options.
+ *
+ * Displays selected items as tags with optional search filtering.
+ *
+ * @cmsEditable true
+ * @cmsCategory Form
+ *
+ * @example Basic multiselect
+ * ```html
+ * <le-multiselect
+ *   placeholder="Select options..."
+ *   options='[{"label": "Red"}, {"label": "Green"}, {"label": "Blue"}]'
+ * ></le-multiselect>
+ * ```
+ *
+ * @example With max selections
+ * ```html
+ * <le-multiselect
+ *   max-selections="3"
+ *   options='[{"label": "Option 1"}, {"label": "Option 2"}, {"label": "Option 3"}, {"label": "Option 4"}]'
+ * ></le-multiselect>
+ * ```
+ *
+ * @example With search
+ * ```html
+ * <le-multiselect
+ *   searchable
+ *   placeholder="Search and select..."
+ *   options='[{"label": "Apple"}, {"label": "Banana"}, {"label": "Cherry"}]'
+ * ></le-multiselect>
+ * ```
+ */
+export class LeMultiselect {
+    el;
+    /**
+     * The options to display in the dropdown.
+     */
+    options = [];
+    /**
+     * The currently selected values.
+     */
+    value = [];
+    /**
+     * Placeholder text when no options are selected.
+     */
+    placeholder = 'Select options...';
+    /**
+     * Whether the multiselect 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 multiselect.
+     */
+    size = 'medium';
+    /**
+     * Maximum number of selections allowed.
+     */
+    maxSelections;
+    /**
+     * Labels for the "Select All" option.
+     */
+    selectAllLabel = 'Select All';
+    deselectAllLabel = 'Deselect All';
+    /**
+     * Whether to show a "Select All" option.
+     * Also accepts a string or array of strings to customize the label(s).
+     */
+    showSelectAll = false;
+    /**
+     * 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 values change.
+     */
+    leChange;
+    /**
+     * Emitted when the dropdown opens.
+     */
+    leOpen;
+    /**
+     * Emitted when the dropdown closes.
+     */
+    leClose;
+    selectedOptions = [];
+    searchQuery = '';
+    dropdownEl;
+    inputEl;
+    handleValueChange() {
+        this.updateSelectedOptions();
+    }
+    handleOptionsChange() {
+        this.updateSelectedOptions();
+    }
+    handleShowSelectAllChange(newValue) {
+        if (typeof newValue !== 'boolean' && typeof newValue !== 'string') {
+            this.showSelectAll = false;
+        }
+        else if (typeof newValue === 'boolean') {
+            this.showSelectAll = newValue;
+        }
+        else if (Array.isArray(newValue)) {
+            this.showSelectAll = true;
+            this.selectAllLabel = newValue[0];
+            this.deselectAllLabel = newValue[1] || newValue[0];
+        }
+        else if (typeof newValue === 'string') {
+            this.showSelectAll = true;
+            try {
+                const parsed = JSON.parse(newValue);
+                if (Array.isArray(parsed) && parsed.every(item => typeof item === 'string')) {
+                    this.selectAllLabel = parsed[0];
+                    this.deselectAllLabel = parsed[1] || parsed[0];
+                }
+                else {
+                    this.selectAllLabel = newValue;
+                    this.deselectAllLabel = newValue;
+                }
+            }
+            catch {
+                this.selectAllLabel = newValue;
+                this.deselectAllLabel = newValue;
+            }
+        }
+    }
+    componentWillLoad() {
+        this.updateSelectedOptions();
+        this.handleShowSelectAllChange(this.showSelectAll);
+    }
+    get parsedOptions() {
+        if (typeof this.options === 'string') {
+            try {
+                return JSON.parse(this.options);
+            }
+            catch {
+                return [];
+            }
+        }
+        return this.options;
+    }
+    get effectiveOptions() {
+        let options = [...this.parsedOptions];
+        // Add "Select All" option if enabled
+        if (this.showSelectAll && options.length > 0) {
+            const allSelected = this.selectedOptions.length === this.parsedOptions.filter(opt => !opt.disabled).length;
+            options = [
+                {
+                    label: allSelected ? this.deselectAllLabel : this.selectAllLabel,
+                    value: '__select_all__',
+                    iconStart: allSelected ? '✕' : '⇣',
+                },
+                ...options,
+            ];
+        }
+        return options;
+    }
+    updateSelectedOptions() {
+        const valueArray = Array.isArray(this.value) ? this.value : [];
+        this.selectedOptions = this.parsedOptions.filter(opt => valueArray.includes(opt.value ?? opt.label));
+    }
+    filterOption = (option, query) => {
+        if (!query)
+            return true;
+        // Always show "Select All" option
+        if (option.value === '__select_all__')
+            return true;
+        const searchLower = query.toLowerCase();
+        return (option.label.toLowerCase().includes(searchLower) ||
+            (option.description?.toLowerCase().includes(searchLower) ?? false));
+    };
+    handleOptionSelect = (e) => {
+        const { value } = e.detail;
+        const enabledOptions = this.parsedOptions.filter(opt => !opt.disabled);
+        if (enabledOptions.length === 0)
+            return;
+        // Handle "Select All" option
+        if (value === '__select_all__') {
+            if (this.selectedOptions.length === enabledOptions.length) {
+                // Deselect all
+                this.value = [];
+            }
+            else {
+                // Select all (respect maxSelections)
+                const selectableOptions = this.maxSelections
+                    ? enabledOptions.slice(0, this.maxSelections)
+                    : enabledOptions;
+                this.value = selectableOptions.map(opt => opt.value ?? opt.label);
+            }
+            this.emitChange();
+            return;
+        }
+        const isSelected = this.value.includes(value);
+        if (isSelected) {
+            // Remove from selection
+            this.value = this.value.filter(v => v !== value);
+            this.selectedOptions = this.selectedOptions.filter(opt => (opt.value ?? opt.label) !== value);
+        }
+        else {
+            // Add to selection (if not at max)
+            if (this.maxSelections && this.value.length >= this.maxSelections) {
+                return; // Don't add more
+            }
+            this.value = [...this.value, value];
+        }
+        this.emitChange();
+        // Clear search after szelection
+        this.searchQuery = '';
+    };
+    emitChange() {
+        this.leChange.emit({
+            values: this.value,
+            options: this.selectedOptions,
+        });
+    }
+    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.searchQuery = '';
+        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();
+        }
+    };
+    handleTagDismiss = (option, e) => {
+        e.stopPropagation();
+        const value = option.value ?? option.label;
+        this.value = this.value.filter(v => v !== value);
+        this.selectedOptions = this.selectedOptions.filter(opt => opt !== option);
+        this.emitChange();
+    };
+    handleSearchInput = (e) => {
+        const target = e.target;
+        this.searchQuery = target.value;
+    };
+    handleClearAll = (e) => {
+        e.stopPropagation();
+        this.value = [];
+        this.selectedOptions = [];
+        this.emitChange();
+    };
+    /**
+     * Opens the dropdown.
+     */
+    async showDropdown() {
+        await this.dropdownEl?.show();
+    }
+    /**
+     * Closes the dropdown.
+     */
+    async hideDropdown() {
+        await this.dropdownEl?.hide();
+    }
+    /**
+     * Clears all selections.
+     */
+    async clearSelection() {
+        this.value = [];
+        this.selectedOptions = [];
+        this.emitChange();
+    }
+    renderTags() {
+        if (this.selectedOptions.length === 0) {
+            return h("span", { class: "multiselect-placeholder" }, this.placeholder);
+        }
+        return (h("div", { class: "multiselect-tags" }, this.selectedOptions.map(option => (h("le-tag", { key: option.value ?? option.label, label: option.label, icon: option.iconStart, size: this.size === 'large' ? 'medium' : 'small', dismissible: true, disabled: this.disabled, onLeDismiss: e => this.handleTagDismiss(option, e), mode: "default" })))));
+    }
+    render() {
+        const hasSelections = this.selectedOptions.length > 0;
+        const atMaxSelections = this.maxSelections && this.value.length >= this.maxSelections;
+        return (h("le-component", { key: '982102b3b4f499fdd3f91040be9b70f8601b3bf5', component: "le-multiselect" }, h("le-dropdown-base", { key: '4fdc8409dac2adbd188f0c019fd9fb730a41219c', ref: el => (this.dropdownEl = el), options: this.effectiveOptions, value: this.value, multiple: true, disabled: this.disabled, filterFn: this.searchable ? this.filterOption : undefined, filterQuery: this.searchQuery, emptyText: this.emptyText, showCheckboxes: true, fullWidth: this.fullWidth, onLeOptionSelect: this.handleOptionSelect, onLeDropdownOpen: this.handleDropdownOpen, onLeDropdownClose: this.handleDropdownClose }, h("div", { key: 'a633ff6c22827ef11ddc86950bcf5309ccf4b58e', slot: "trigger", class: {
+                'multiselect-trigger': true,
+                'has-selections': hasSelections,
+                'is-open': this.open,
+                'is-disabled': this.disabled,
+            }, tabIndex: this.disabled ? -1 : 0, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": this.open ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : undefined, onClick: this.handleTriggerClick, onKeyDown: this.handleTriggerKeyDown }, this.renderTags(), h("div", { key: '7b872ae2a4bb5b89c63eb712b63878400d9a6a9d', class: "multiselect-actions" }, hasSelections && !this.disabled && (h("button", { key: 'a6beb75e3688f6b0329726e6a1016e94ebd5a1a3', type: "button", class: "multiselect-clear", onClick: this.handleClearAll, "aria-label": "Clear all", tabIndex: -1 }, h("svg", { key: '8f5fd2f3be9e94bac7b8c30384f10a3ba6d6272c', viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("path", { key: '241075a311ef66b150a2e3e566919cabb2054c00', d: "M4 4l8 8M12 4l-8 8" })))), h("span", { key: '780188efcf3e597d9b199ace46471d292e643a62', class: "multiselect-arrow" }, h("svg", { key: '3fc4b438b95525c8631fdf73dadad9f5ff5330e3', viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("path", { key: 'de1501fff8b39807f97f44994404a849eb71e745', d: "M4 6l4 4 4-4" }))))), this.searchable && this.open && (h("div", { key: 'c92d7e07f90fedc588a40da04ddef0940d8e2872', class: "multiselect-search", slot: "header" }, h("le-string-input", { key: 'a5425ef9d7cd8c1e13b895dc73d78f0e433431ad', mode: "default", inputRef: el => (this.inputEl = el), class: "search-input", placeholder: "Search...", value: this.searchQuery, onInput: this.handleSearchInput })))), this.name &&
+            this.value.map(val => (h("input", { type: "hidden", name: this.name, value: val.toString(), key: val.toString() }))), atMaxSelections && (h("span", { key: 'b1d9b93267637d3d21dc3ad52bb3bbd99831f56f', class: "multiselect-status" }, "Maximum ", this.maxSelections, " selections"))));
+    }
+    static get is() { return "le-multiselect"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["le-multiselect.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["le-multiselect.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": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "LeOptionValue[]",
+                    "resolved": "LeOptionValue[]",
+                    "references": {
+                        "LeOptionValue": {
+                            "location": "import",
+                            "path": "../../types/options",
+                            "id": "src/types/options.ts::LeOptionValue"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The currently selected values."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Placeholder text when no options are selected."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder",
+                "defaultValue": "'Select options...'"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the multiselect is disabled."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether selection is required."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "required",
+                "defaultValue": "false"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Name attribute for form submission."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
+            },
+            "fullWidth": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the multiselect should take full width of its container."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "full-width",
+                "defaultValue": "false"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'small' | 'medium' | 'large'",
+                    "resolved": "\"large\" | \"medium\" | \"small\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Size variant of the multiselect."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'medium'"
+            },
+            "maxSelections": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum number of selections allowed."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-selections"
+            },
+            "showSelectAll": {
+                "type": "any",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean | string | string[]",
+                    "resolved": "boolean | string | string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show a \"Select All\" option.\nAlso accepts a string or array of strings to customize the label(s)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-select-all",
+                "defaultValue": "false"
+            },
+            "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 {
+            "selectAllLabel": {},
+            "deselectAllLabel": {},
+            "selectedOptions": {},
+            "searchQuery": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "leChange",
+                "name": "leChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the selected values change."
+                },
+                "complexType": {
+                    "original": "LeMultiOptionSelectDetail",
+                    "resolved": "LeMultiOptionSelectDetail",
+                    "references": {
+                        "LeMultiOptionSelectDetail": {
+                            "location": "import",
+                            "path": "../../types/options",
+                            "id": "src/types/options.ts::LeMultiOptionSelectDetail"
+                        }
+                    }
+                }
+            }, {
+                "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": []
+                }
+            },
+            "clearSelection": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Clears all selections.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "handleValueChange"
+            }, {
+                "propName": "options",
+                "methodName": "handleOptionsChange"
+            }, {
+                "propName": "showSelectAll",
+                "methodName": "handleShowSelectAllChange"
+            }];
+    }
+}
+//# sourceMappingURL=le-multiselect.js.map