le-kit 0.1.13 → 0.1.15

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

@@ -0,0 +1,761 @@
+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: 'c074cbfbc9a802ed01935b27baa6d0074d87c2e1' }, h("le-popover", { key: 'c5ff7f61f81df0f482e6a809a85f29ac73674de6', 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: 'b5ce8dba5357be102e282f10d0041cdd5ee11cb4', name: "trigger", slot: "trigger" }), h("slot", { key: '2534ee79fab3b7a1a44c61ab7e977c6f2f2be4d7', name: "header" }), h("div", { key: 'fd37d09cca2c96557030df201e095fab7a441fd9', 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