le-kit 0.5.2 → 0.5.4

package/dist/collection/components/le-dropdown-base/le-dropdown-base.js

@@ -1,761 +0,0 @@
-import { h, Host, } from "@stencil/core";
-import { generateId } from "../../utils/utils";
-/**
- * Internal dropdown base component that provides shared functionality
- * for select, combobox, and multiselect components.
- *
- * Wraps le-popover for positioning and provides:
- * - Option list rendering with groups
- * - Keyboard navigation (↑↓, Enter, Escape, Home/End)
- * - Option filtering support
- * - Single and multi-select modes
- *
- * @cmsInternal true
- * @cmsCategory System
- *
- * @slot trigger - The element that triggers the dropdown
- */
-export class LeDropdownBase {
-    el;
-    /**
-     * The options to display in the dropdown.
-     */
-    options = [];
-    /**
-     * Current value(s) - single value or array for multiselect.
-     */
-    value;
-    /**
-     * Whether multiple selection is allowed.
-     */
-    multiple = false;
-    /**
-     * Whether the dropdown is open.
-     */
-    open = false;
-    /**
-     * Whether the dropdown is disabled.
-     */
-    disabled = false;
-    /**
-     * Filter function for options.
-     * Return true to include the option.
-     */
-    filterFn;
-    /**
-     * Current filter query string.
-     */
-    filterQuery = '';
-    /**
-     * Placeholder text when no options match filter.
-     */
-    emptyText = 'No options';
-    /**
-     * Whether to show checkboxes for multiselect mode.
-     */
-    showCheckboxes = true;
-    /**
-     * Maximum height of the dropdown list.
-     */
-    maxHeight = '300px';
-    /**
-     * Width of the dropdown. If not set, matches trigger width.
-     */
-    width;
-    /**
-     * Sets the dropdown to full width of the trigger.
-     */
-    fullWidth = false;
-    /**
-     * Whether to close the dropdown when clicking outside.
-     * (used to support combobox with input focus)
-     */
-    closeOnClickOutside = true;
-    /**
-     * Emitted when an option is selected.
-     */
-    leOptionSelect;
-    /**
-     * Emitted when the dropdown opens.
-     */
-    leDropdownOpen;
-    /**
-     * Emitted when the dropdown closes.
-     */
-    leDropdownClose;
-    focusedIndex = -1;
-    filteredOptions = [];
-    popoverEl;
-    listEl;
-    triggerWidth = 0;
-    handleOptionsChange() {
-        this.updateFilteredOptions();
-    }
-    componentWillLoad() {
-        this.updateFilteredOptions();
-    }
-    updateFilteredOptions() {
-        // Remember previously focused option
-        const focusedOption = this.filteredOptions[this.focusedIndex];
-        if (!this.filterQuery || !this.filterFn) {
-            this.filteredOptions = this.options;
-        }
-        else {
-            this.filteredOptions = this.options.filter(opt => this.filterFn(opt, this.filterQuery));
-        }
-        // try to maintain focus on same option if still present
-        if (focusedOption) {
-            const newIndex = this.filteredOptions.indexOf(focusedOption);
-            this.focusedIndex = newIndex >= 0 ? newIndex : this.getInitialFocusIndex();
-        }
-        else {
-            this.focusedIndex = -1;
-        }
-    }
-    getSelectableOptions() {
-        return this.filteredOptions.filter(opt => !opt.disabled);
-    }
-    isSelected(option) {
-        const optValue = option.value ?? option.label;
-        if (this.multiple && Array.isArray(this.value)) {
-            setTimeout(() => {
-                this.popoverEl?.updatePosition();
-            }, 50);
-            return this.value.includes(optValue);
-        }
-        return this.value === optValue;
-    }
-    handleOptionClick(option, e) {
-        e.preventDefault();
-        e.stopPropagation();
-        if (option.disabled)
-            return;
-        this.leOptionSelect.emit({
-            value: option.value ?? option.label,
-            option,
-        });
-        // Close dropdown for single select
-        if (!this.multiple) {
-            this.hide();
-        }
-    }
-    handleKeyDown = (e) => {
-        if (!this.open)
-            return;
-        const optionCount = this.filteredOptions.length;
-        switch (e.key) {
-            case 'ArrowDown':
-                e.preventDefault();
-                // check for the next non-disabled option and focus
-                let nextIndex = this.focusedIndex < optionCount - 1 ? this.focusedIndex + 1 : 0;
-                while (this.filteredOptions[nextIndex].disabled) {
-                    nextIndex = ++nextIndex < optionCount ? nextIndex : 0;
-                }
-                this.focusedIndex = nextIndex;
-                this.scrollToFocused();
-                break;
-            case 'ArrowUp':
-                e.preventDefault();
-                // check for the previous non-disabled option and focus
-                let prevIndex = this.focusedIndex > 0 ? this.focusedIndex - 1 : optionCount - 1;
-                while (this.filteredOptions[prevIndex].disabled) {
-                    prevIndex = --prevIndex >= 0 ? prevIndex : optionCount - 1;
-                }
-                this.focusedIndex = prevIndex;
-                this.scrollToFocused();
-                break;
-            case 'Home':
-                e.preventDefault();
-                // check for the first non-disabled option and focus
-                let firstIndex = 0;
-                while (this.filteredOptions[firstIndex].disabled) {
-                    firstIndex++;
-                    if (firstIndex >= optionCount) {
-                        firstIndex = -1;
-                        break;
-                    }
-                }
-                this.focusedIndex = firstIndex;
-                this.scrollToFocused();
-                break;
-            case 'End':
-                e.preventDefault();
-                // check for the last non-disabled option and focus
-                let lastIndex = optionCount - 1;
-                while (this.filteredOptions[lastIndex].disabled) {
-                    lastIndex--;
-                    if (lastIndex < 0) {
-                        lastIndex = -1;
-                        break;
-                    }
-                }
-                this.focusedIndex = lastIndex;
-                this.scrollToFocused();
-                break;
-            case 'Enter':
-            case ' ':
-                e.preventDefault();
-                if (this.focusedIndex >= 0 && this.focusedIndex < optionCount) {
-                    const option = this.filteredOptions[this.focusedIndex];
-                    if (!option || option.disabled)
-                        return;
-                    this.leOptionSelect.emit({
-                        value: option.value ?? option.label,
-                        option,
-                    });
-                    if (!this.multiple) {
-                        this.hide();
-                    }
-                }
-                break;
-            case 'Escape':
-                e.preventDefault();
-                this.hide();
-                break;
-            case 'Tab':
-                this.hide();
-                break;
-        }
-    };
-    scrollToFocused() {
-        if (!this.listEl || this.focusedIndex < 0)
-            return;
-        const focusedEl = this.listEl.querySelector(`[data-index="${this.focusedIndex}"]`);
-        if (focusedEl) {
-            focusedEl.scrollIntoView({ block: 'nearest' });
-        }
-    }
-    handlePopoverOpen = () => {
-        this.open = true;
-        this.focusedIndex = this.getInitialFocusIndex();
-        this.leDropdownOpen.emit();
-        // Add keyboard listener
-        document.addEventListener('keydown', this.handleKeyDown);
-    };
-    handlePopoverClose = () => {
-        this.open = false;
-        this.focusedIndex = -1;
-        this.leDropdownClose.emit();
-        // Remove keyboard listener
-        document.removeEventListener('keydown', this.handleKeyDown);
-    };
-    getInitialFocusIndex() {
-        // Focus on first selected option, or first option
-        const selectableOptions = this.getSelectableOptions();
-        const selectedIndex = selectableOptions.findIndex(opt => this.isSelected(opt));
-        return selectedIndex >= 0 ? selectedIndex : 0;
-    }
-    /**
-     * Opens the dropdown.
-     */
-    async show() {
-        if (this.disabled)
-            return;
-        // Capture trigger width for matching dropdown width
-        const trigger = this.el.querySelector('[slot="trigger"]');
-        if (trigger) {
-            this.triggerWidth = trigger.offsetWidth;
-        }
-        await this.popoverEl?.show();
-    }
-    /**
-     * Closes the dropdown.
-     */
-    async hide() {
-        await this.popoverEl?.hide();
-    }
-    /**
-     * Toggles the dropdown.
-     */
-    async toggle() {
-        if (this.open) {
-            await this.hide();
-        }
-        else {
-            await this.show();
-        }
-    }
-    renderIcon(icon, className) {
-        if (!icon)
-            return null;
-        if (icon.startsWith('http') || icon.startsWith('/')) {
-            return h("img", { class: className, src: icon, alt: "" });
-        }
-        return h("span", { class: className }, icon);
-    }
-    renderOption(option, index) {
-        const isSelected = this.isSelected(option);
-        const isFocused = index === this.focusedIndex;
-        const optionId = option.id || generateId();
-        return (h("div", { class: {
-                'dropdown-option': true,
-                'is-selected': isSelected,
-                'is-focused': isFocused,
-                'is-disabled': !!option.disabled,
-            }, role: "option", id: optionId, "aria-selected": isSelected ? 'true' : 'false', "aria-disabled": option.disabled ? 'true' : undefined, "data-index": index, onClick: e => this.handleOptionClick(option, e), onMouseEnter: () => {
-                if (!option.disabled) {
-                    this.focusedIndex = index;
-                }
-            } }, this.renderIcon(option.iconStart, 'option-icon-start'), h("div", { class: "option-content" }, h("span", { class: "option-label" }, option.label), option.description && h("span", { class: "option-description" }, option.description)), this.renderIcon(option.iconEnd, 'option-icon-end'), (!this.multiple || this.showCheckboxes) && isSelected && (h("span", { class: "option-check" }, h("svg", { viewBox: "0 0 16 16", fill: "currentColor" }, h("path", { d: "M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z" }))))));
-    }
-    renderOptions() {
-        if (this.filteredOptions.length === 0) {
-            return h("div", { class: "dropdown-empty" }, this.emptyText);
-        }
-        // Group options if they have group property
-        const grouped = new Map();
-        const ungrouped = [];
-        this.filteredOptions.forEach(opt => {
-            if (opt.group) {
-                const group = grouped.get(opt.group) || [];
-                group.push(opt);
-                grouped.set(opt.group, group);
-            }
-            else {
-                ungrouped.push(opt);
-            }
-        });
-        // Build flat list with group headers for index tracking
-        let globalIndex = 0;
-        const elements = [];
-        // Render ungrouped options first
-        ungrouped.forEach(opt => {
-            if (opt.separator === 'before') {
-                elements.push(h("div", { class: "dropdown-separator", role: "separator" }));
-            }
-            elements.push(this.renderOption(opt, globalIndex++));
-            if (opt.separator === 'after') {
-                elements.push(h("div", { class: "dropdown-separator", role: "separator" }));
-            }
-        });
-        // Render grouped options
-        grouped.forEach((options, groupLabel) => {
-            elements.push(h("div", { class: "dropdown-group-header", role: "presentation" }, groupLabel));
-            options.forEach(opt => {
-                elements.push(this.renderOption(opt, globalIndex++));
-            });
-        });
-        return elements;
-    }
-    render() {
-        const dropdownWidth = this.width || (this.triggerWidth ? `${this.triggerWidth}px` : undefined);
-        return (h(Host, { key: '90bca5763b9110f8e5cad70870110cab1efeeec6' }, h("le-popover", { key: 'ebded64a4f2b23c8b1a954dd995c4d6171ef9c88', ref: el => (this.popoverEl = el), position: "bottom", align: "start", showClose: false, closeOnClickOutside: this.closeOnClickOutside, closeOnEscape: true, offset: 4, width: dropdownWidth, minWidth: "150px", "trigger-full-width": this.fullWidth, onLePopoverOpen: this.handlePopoverOpen, onLePopoverClose: this.handlePopoverClose }, h("slot", { key: '57e540660ee269de594209186d6fbe066b9c8fc1', name: "trigger", slot: "trigger" }), h("slot", { key: 'e58a76a0097f938873f5462c844ee9f1a5eece72', name: "header" }), h("div", { key: 'c4fa35069438df82894e45e87f46aef67a189c43', class: "dropdown-list", role: "listbox", "aria-multiselectable": this.multiple ? 'true' : undefined, ref: el => (this.listEl = el), style: { maxHeight: this.maxHeight } }, this.renderOptions()))));
-    }
-    static get is() { return "le-dropdown-base"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["le-dropdown-base.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["le-dropdown-base.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "options": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "LeOption[]",
-                    "resolved": "LeOption[]",
-                    "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,
-                "defaultValue": "[]"
-            },
-            "value": {
-                "type": "any",
-                "mutable": false,
-                "complexType": {
-                    "original": "LeOptionValue | LeOptionValue[]",
-                    "resolved": "LeOptionValue[] | number | string",
-                    "references": {
-                        "LeOptionValue": {
-                            "location": "import",
-                            "path": "../../types/options",
-                            "id": "src/types/options.ts::LeOptionValue"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Current value(s) - single value or array for multiselect."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "value"
-            },
-            "multiple": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Whether multiple selection is allowed."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "multiple",
-                "defaultValue": "false"
-            },
-            "open": {
-                "type": "boolean",
-                "mutable": true,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Whether the dropdown is open."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
-                "attribute": "open",
-                "defaultValue": "false"
-            },
-            "disabled": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Whether the dropdown is disabled."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
-                "attribute": "disabled",
-                "defaultValue": "false"
-            },
-            "filterFn": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "(option: LeOption, query: string) => boolean",
-                    "resolved": "(option: LeOption, query: string) => boolean",
-                    "references": {
-                        "LeOption": {
-                            "location": "import",
-                            "path": "../../types/options",
-                            "id": "src/types/options.ts::LeOption"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Filter function for options.\nReturn true to include the option."
-                },
-                "getter": false,
-                "setter": false
-            },
-            "filterQuery": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Current filter query string."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "filter-query",
-                "defaultValue": "''"
-            },
-            "emptyText": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Placeholder text when no options match filter."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "empty-text",
-                "defaultValue": "'No options'"
-            },
-            "showCheckboxes": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Whether to show checkboxes for multiselect mode."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "show-checkboxes",
-                "defaultValue": "true"
-            },
-            "maxHeight": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Maximum height of the dropdown list."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "max-height",
-                "defaultValue": "'300px'"
-            },
-            "width": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Width of the dropdown. If not set, matches trigger width."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "width"
-            },
-            "fullWidth": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Sets the dropdown to full width of the trigger."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "full-width",
-                "defaultValue": "false"
-            },
-            "closeOnClickOutside": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Whether to close the dropdown when clicking outside.\n(used to support combobox with input focus)"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "close-on-click-outside",
-                "defaultValue": "true"
-            }
-        };
-    }
-    static get states() {
-        return {
-            "focusedIndex": {},
-            "filteredOptions": {}
-        };
-    }
-    static get events() {
-        return [{
-                "method": "leOptionSelect",
-                "name": "leOptionSelect",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emitted when an option is selected."
-                },
-                "complexType": {
-                    "original": "LeOptionSelectDetail",
-                    "resolved": "LeOptionSelectDetail",
-                    "references": {
-                        "LeOptionSelectDetail": {
-                            "location": "import",
-                            "path": "../../types/options",
-                            "id": "src/types/options.ts::LeOptionSelectDetail"
-                        }
-                    }
-                }
-            }, {
-                "method": "leDropdownOpen",
-                "name": "leDropdownOpen",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emitted when the dropdown opens."
-                },
-                "complexType": {
-                    "original": "void",
-                    "resolved": "void",
-                    "references": {}
-                }
-            }, {
-                "method": "leDropdownClose",
-                "name": "leDropdownClose",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emitted when the dropdown closes."
-                },
-                "complexType": {
-                    "original": "void",
-                    "resolved": "void",
-                    "references": {}
-                }
-            }];
-    }
-    static get methods() {
-        return {
-            "show": {
-                "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        },
-                        "HTMLElement": {
-                            "location": "global",
-                            "id": "global::HTMLElement"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "Opens the dropdown.",
-                    "tags": []
-                }
-            },
-            "hide": {
-                "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "Closes the dropdown.",
-                    "tags": []
-                }
-            },
-            "toggle": {
-                "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "Toggles the dropdown.",
-                    "tags": []
-                }
-            }
-        };
-    }
-    static get elementRef() { return "el"; }
-    static get watchers() {
-        return [{
-                "propName": "options",
-                "methodName": "handleOptionsChange"
-            }, {
-                "propName": "filterQuery",
-                "methodName": "handleOptionsChange"
-            }];
-    }
-}
-//# sourceMappingURL=le-dropdown-base.js.map