le-kit 0.5.3 → 0.6.0

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

@@ -1,713 +0,0 @@
-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 {
-    constructor() {
-        /**
-         * The options to display in the dropdown.
-         */
-        this.options = [];
-        /**
-         * The currently selected values.
-         */
-        this.value = [];
-        /**
-         * Placeholder text when no options are selected.
-         */
-        this.placeholder = 'Select options...';
-        /**
-         * Whether the multiselect 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 multiselect.
-         */
-        this.size = 'medium';
-        /**
-         * Labels for the "Select All" option.
-         */
-        this.selectAllLabel = 'Select All';
-        this.deselectAllLabel = 'Deselect All';
-        /**
-         * Whether to show a "Select All" option.
-         * Also accepts a string or array of strings to customize the label(s).
-         */
-        this.showSelectAll = false;
-        /**
-         * Whether the input is searchable.
-         */
-        this.searchable = false;
-        /**
-         * Text to show when no options match the search.
-         */
-        this.emptyText = 'No results found';
-        /**
-         * Whether the dropdown is currently open.
-         */
-        this.open = false;
-        this.selectedOptions = [];
-        this.searchQuery = '';
-        this.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));
-        };
-        this.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 = '';
-        };
-        this.handleDropdownOpen = () => {
-            this.open = true;
-            this.leOpen.emit();
-            // Focus search input if searchable
-            if (this.searchable) {
-                setTimeout(() => {
-                    this.inputEl?.focus();
-                }, 50);
-            }
-        };
-        this.handleDropdownClose = () => {
-            this.open = false;
-            this.searchQuery = '';
-            this.leClose.emit();
-        };
-        this.handleTriggerClick = () => {
-            if (!this.disabled) {
-                this.dropdownEl?.toggle();
-            }
-        };
-        this.handleTriggerKeyDown = (e) => {
-            if (this.disabled)
-                return;
-            if (e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowDown') {
-                e.preventDefault();
-                this.dropdownEl?.show();
-            }
-        };
-        this.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();
-        };
-        this.handleSearchInput = (e) => {
-            const target = e.target;
-            this.searchQuery = target.value;
-        };
-        this.handleClearAll = (e) => {
-            e.stopPropagation();
-            this.value = [];
-            this.selectedOptions = [];
-            this.emitChange();
-        };
-    }
-    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));
-    }
-    emitChange() {
-        this.leChange.emit({
-            values: this.value,
-            options: this.selectedOptions,
-        });
-    }
-    /**
-     * 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: 'b22fd0273666745ad4dcfaf5692102d4cbc1946c', component: "le-multiselect" }, h("le-dropdown-base", { key: 'e81736ecb7e4b50fe9d8ea19460271a705baeb80', 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: 'cd3e45b676ee7b90c82ae0b2c18684d89bb3f3f8', 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: 'dfcb6b8397aec56be4588421b7545ae6caae31b2', class: "multiselect-actions" }, hasSelections && !this.disabled && (h("button", { key: '3ddd374aa458784d7d19f52966ee4f4fa5ca93f1', type: "button", class: "multiselect-clear", onClick: this.handleClearAll, "aria-label": "Clear all", tabIndex: -1 }, h("svg", { key: '1687f1af7277b8489c6de841891439d5f4c77483', viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("path", { key: '864debd4e5ce7f93338bea67f24c1c43e63a4dc3', d: "M4 4l8 8M12 4l-8 8" })))), h("span", { key: '6d2fa2b5aaa3970068d40e4ec4db7c7809dc85cd', class: "multiselect-arrow" }, h("svg", { key: '2fb670f75e9d9ba726c320cfeb6b8d31dd3a6ac4', viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("path", { key: '70429d2d874f30a2a55ac57bf4d758663c048893', d: "M4 6l4 4 4-4" }))))), this.searchable && this.open && (h("div", { key: '1224afb258731403d9c95888b8b3b8fc0f0c1b03', class: "multiselect-search", slot: "header" }, h("le-string-input", { key: 'b8d592186887238ea1acbf5db8d8f9c9cca0656f', 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: 'c47d74d5f40c30881e6b8bb35dafe80be85ee41a', 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