le-kit 0.5.2 → 0.5.4

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

@@ -1,734 +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 {
-    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: 'e6183adb112775737e6a7f47b0be614a76a1c110', component: "le-multiselect" }, h("le-dropdown-base", { key: 'ee8ba9e02608a5c26d8a8b0a659e89e5631f3f6a', 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: '4c87bf167dd876476dae3b0259cda2f28e3787a5', 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: 'be629671c75d408127edb480df54c6649e28ca2a', class: "multiselect-actions" }, hasSelections && !this.disabled && (h("button", { key: '67f4c2152e4b2f8f52b8b98093fbb238571f6105', type: "button", class: "multiselect-clear", onClick: this.handleClearAll, "aria-label": "Clear all", tabIndex: -1 }, h("svg", { key: '5894bfb10a310a29f21c865323b2175cde05173e', viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("path", { key: '50f7445b3627bf110a899dbba2b5f7244d706a49', d: "M4 4l8 8M12 4l-8 8" })))), h("span", { key: '58ef10834f74ce5b21b675b47a4c2a96df4bd173', class: "multiselect-arrow" }, h("svg", { key: '74a20681e12aff0295c219c8ff8f953908aa9a94', viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("path", { key: '8e48c5333f7f3035e4c4f80f7c3507e5d3d4caaa', d: "M4 6l4 4 4-4" }))))), this.searchable && this.open && (h("div", { key: '906f9596d6a0da2840d534570d38ea008d7cdb4b', class: "multiselect-search", slot: "header" }, h("le-string-input", { key: 'ccd7f1b2594be3440adb16ef5c001beaa5547396', 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: 'c329c06d0e00a1516c9d3323ad4a83b81a205f13', 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