@dropi/ui 0.1.0

package/dist/collection/components/dropi-select/dropi-select.js

@@ -0,0 +1,932 @@
+import { h, } from "@stencil/core";
+/**
+ * @component dropi-select
+ * Feature-rich select with support for:
+ * - Single / multi select
+ * - Grouped options
+ * - Search / filter
+ * - Country flags
+ * - Radio-style options with images
+ * - Inline (dropdownType) or bordered trigger
+ * - Native form association
+ *
+ * ## Usage
+ * Options must be set via JS property (not HTML attribute) for object arrays:
+ * ```js
+ * document.querySelector('dropi-select').options = [
+ *   { id: 1, label: 'Option A' },
+ *   { id: 2, label: 'Option B' },
+ * ];
+ * ```
+ */
+export class DropiSelect {
+    el;
+    internals;
+    buttonRef;
+    scrollDebounce;
+    hasEmittedScrollEnd = false;
+    lastScrollTop = 0;
+    // ── Props ────────────────────────────────────────────────────
+    label = '';
+    placeholder = 'Seleccionar';
+    /** Array of SelectOption or SelectOptionGroup */
+    options = [];
+    name = '';
+    disabled = false;
+    invalid = false;
+    errorText = '';
+    helperText = '';
+    showObligatory = false;
+    /** Enables text search inside the dropdown */
+    searchEnabled = false;
+    /** Allows selecting multiple options */
+    multiSelect = false;
+    /** Renders trigger without border (inline/dropdown style) */
+    dropdownType = false;
+    /** Show country flags next to option labels */
+    showCountryFlags = false;
+    /** Renders options as radio buttons with optional image */
+    radioOptions = false;
+    /** Placeholder inside the search field */
+    placeHolderSearch = 'Buscar';
+    /** Icon name shown before the trigger label */
+    preIcon = '';
+    /** Pre-select an option by id */
+    defaultSelectedId = '';
+    /** Controlled selected option (single select) */
+    value = null;
+    // ── State ────────────────────────────────────────────────────
+    isOpen = false;
+    selectedOption = null;
+    multiSelected = [];
+    filteredOptions = [];
+    searchTerm = '';
+    dropdownStyle = {
+        top: '0px', left: '0px', width: '0px',
+    };
+    // ── Events ───────────────────────────────────────────────────
+    /** Emitted when an option is selected (single) or selection changes (multi) */
+    dropiChange;
+    /** Emitted when the selection is cleared */
+    dropiClear;
+    /** Emitted on search input */
+    dropiSearch;
+    /** Emitted when the list is scrolled to the end */
+    dropiScrollEnd;
+    /** Emitted on Enter key inside search */
+    dropiKeyEnter;
+    // ── Lifecycle ────────────────────────────────────────────────
+    componentWillLoad() {
+        this.normalizeOptions();
+        this.filteredOptions = [...this.options];
+        this.applyDefaultSelection();
+    }
+    optionsChanged() {
+        this.normalizeOptions();
+        this.filteredOptions = [...this.options];
+        this.applyDefaultSelection();
+    }
+    normalizeOptions() {
+        if (typeof this.options === 'string') {
+            try {
+                this.options = JSON.parse(this.options);
+            }
+            catch (_) {
+                this.options = [];
+            }
+        }
+    }
+    defaultChanged(newId) {
+        this.applyDefaultSelection(newId);
+    }
+    valueChanged(v) {
+        this.selectedOption = v;
+        this.internals.setFormValue(v ? String(v.id) : '');
+    }
+    // ── Public Methods ───────────────────────────────────────────
+    /** Select an option by its id */
+    async setById(id) {
+        const opt = this.options.find(o => o.id === id || String(o.id) === String(id));
+        if (opt)
+            this.selectOption(opt);
+    }
+    /** Select an option by its label */
+    async setByLabel(label) {
+        const opt = this.options.find(o => o.label === label);
+        if (opt)
+            this.selectOption(opt);
+    }
+    /** Clear the current selection */
+    async clearSelection() {
+        this.selectedOption = null;
+        this.multiSelected = [];
+        this.internals.setFormValue('');
+        this.dropiClear.emit();
+    }
+    /** Reset multi-select state and show a placeholder label */
+    async resetMultiSelect(_placeholder) {
+        this.multiSelected = [];
+        this.internals.setFormValue('');
+    }
+    // ── Click outside ────────────────────────────────────────────
+    handleOutsideClick(e) {
+        if (!this.el.contains(e.target)) {
+            this.closeDropdown();
+        }
+    }
+    // ── Helpers ──────────────────────────────────────────────────
+    applyDefaultSelection(id) {
+        const targetId = id ?? this.defaultSelectedId;
+        if (targetId === '' || targetId === undefined || targetId === null)
+            return;
+        const flat = this.flatOptions();
+        const found = flat.find(o => o.id === targetId || String(o.id) === String(targetId));
+        if (found) {
+            this.selectedOption = found;
+            this.internals.setFormValue(String(found.id));
+        }
+    }
+    flatOptions() {
+        if (!this.options?.length)
+            return [];
+        if ('category' in this.options[0]) {
+            return this.options.flatMap(g => g.options);
+        }
+        return this.options;
+    }
+    get isGrouped() {
+        return this.options?.length > 0 && 'category' in this.options[0];
+    }
+    get triggerLabel() {
+        if (this.multiSelect) {
+            return this.multiSelected.length
+                ? this.multiSelected.map(o => o.label).join(', ')
+                : this.placeholder;
+        }
+        if (this.selectedOption) {
+            return this.showCountryFlags && this.selectedOption.shortLabel
+                ? this.selectedOption.shortLabel
+                : this.selectedOption.label;
+        }
+        return this.placeholder;
+    }
+    // ── Dropdown positioning ─────────────────────────────────────
+    openDropdown() {
+        if (this.disabled)
+            return;
+        const rect = this.buttonRef.getBoundingClientRect();
+        const viewportHeight = window.innerHeight;
+        const dropdownHeight = 250;
+        const spaceBelow = viewportHeight - rect.bottom;
+        const top = spaceBelow >= dropdownHeight
+            ? rect.bottom + 4
+            : rect.top - dropdownHeight - 4;
+        this.dropdownStyle = {
+            top: `${top}px`,
+            left: `${rect.left}px`,
+            width: `${rect.width}px`,
+        };
+        this.isOpen = true;
+        if (this.searchEnabled) {
+            setTimeout(() => {
+                const searchInput = this.el.shadowRoot?.querySelector('.search-input');
+                searchInput?.focus();
+            }, 50);
+        }
+    }
+    closeDropdown() {
+        this.isOpen = false;
+        this.searchTerm = '';
+        this.filteredOptions = [...this.options];
+    }
+    toggleDropdown() {
+        this.isOpen ? this.closeDropdown() : this.openDropdown();
+    }
+    // ── Option selection ─────────────────────────────────────────
+    selectOption(option) {
+        if (option.disabled)
+            return;
+        if (this.multiSelect) {
+            const idx = this.multiSelected.findIndex(o => o.id === option.id);
+            if (idx >= 0) {
+                this.multiSelected = this.multiSelected.filter(o => o.id !== option.id);
+            }
+            else {
+                this.multiSelected = [...this.multiSelected, option];
+            }
+            this.internals.setFormValue(this.multiSelected.map(o => o.id).join(','));
+            this.dropiChange.emit([...this.multiSelected]);
+        }
+        else {
+            this.selectedOption = option;
+            this.internals.setFormValue(String(option.id));
+            this.dropiChange.emit(option);
+            this.closeDropdown();
+        }
+    }
+    isOptionChecked(option) {
+        return this.multiSelected.some(o => o.id === option.id);
+    }
+    // ── Search ───────────────────────────────────────────────────
+    handleSearch(term) {
+        this.searchTerm = term;
+        this.dropiSearch.emit(term);
+        const lower = term.toLowerCase().trim();
+        if (!lower) {
+            this.filteredOptions = [...this.options];
+            return;
+        }
+        if (this.isGrouped) {
+            this.filteredOptions = this.options
+                .map(g => ({ ...g, options: g.options.filter(o => o.label.toLowerCase().includes(lower)) }))
+                .filter(g => g.options.length > 0);
+        }
+        else {
+            this.filteredOptions = this.options.filter(o => o.label.toLowerCase().includes(lower));
+        }
+    }
+    // ── Scroll to end ─────────────────────────────────────────────
+    handleScroll(e) {
+        const el = e.target;
+        clearTimeout(this.scrollDebounce);
+        this.scrollDebounce = setTimeout(() => {
+            if (!el)
+                return;
+            const distFromBottom = el.scrollHeight - el.scrollTop - el.clientHeight;
+            const threshold = Math.min(50, el.clientHeight / 2);
+            if (el.scrollTop < this.lastScrollTop)
+                this.hasEmittedScrollEnd = false;
+            this.lastScrollTop = el.scrollTop;
+            if (distFromBottom <= threshold && !this.hasEmittedScrollEnd) {
+                this.dropiScrollEnd.emit();
+                this.hasEmittedScrollEnd = true;
+                setTimeout(() => { this.hasEmittedScrollEnd = false; }, 1000);
+            }
+        }, 100);
+    }
+    // ── Render helpers ───────────────────────────────────────────
+    renderTrigger() {
+        const isCompleted = this.multiSelect ? this.multiSelected.length > 0 : !!this.selectedOption;
+        const iconColor = this.disabled ? 'Gray-Gray-300' : this.dropdownType ? 'Gray-Gray-600' : 'Gray-Gray-400';
+        const iconSize = this.dropdownType ? '24px' : '20px';
+        return (h("button", { type: "button", class: {
+                'select-button': true,
+                'select-completed': isCompleted,
+                'select-button-error': this.invalid,
+                'no-border': this.dropdownType,
+            }, disabled: this.disabled, ref: el => (this.buttonRef = el), onClick: () => this.toggleDropdown() }, h("div", { class: {
+                'button-content': true,
+                'option-radio': this.radioOptions && !!this.selectedOption && !this.multiSelect,
+            } }, this.preIcon && (h("dropi-icon", { name: this.preIcon, width: "20px", height: "20px", color: "Gray-Gray-500" })), this.radioOptions && this.selectedOption && !this.multiSelect && [
+            this.selectedOption.imageUrl && !this.selectedOption.isFallback
+                ? h("img", { class: "option-image small-image", src: this.selectedOption.imageUrl, alt: "", onError: () => {
+                        if (this.selectedOption)
+                            this.selectedOption = { ...this.selectedOption, isFallback: true };
+                    } })
+                : this.selectedOption.isFallback
+                    ? h("span", { class: "option-image-fallback small-image" }, this.selectedOption.label.charAt(0).toUpperCase())
+                    : null,
+            h("div", { class: "labels-container elipsis" }, h("span", null, this.selectedOption.label), this.selectedOption.secondLabel && h("span", { class: "option-second-label" }, this.selectedOption.secondLabel)),
+        ], !(this.radioOptions && this.selectedOption && !this.multiSelect) && (h("div", { class: "elipsis" }, this.triggerLabel))), h("dropi-icon", { name: this.isOpen ? 'Dropdown-up' : 'Dropdown-down', width: iconSize, height: iconSize, color: iconColor })));
+    }
+    renderOption(option) {
+        const isSelected = this.multiSelect
+            ? this.isOptionChecked(option)
+            : this.selectedOption?.id === option.id;
+        return (h("li", { key: option.id }, h("button", { type: "button", class: {
+                option: true,
+                'option-radio': this.radioOptions,
+                'option-with-flag': this.showCountryFlags && !!option.countryCode,
+                'disabled-option': !!option.disabled,
+                'selected-option': isSelected,
+            }, disabled: option.disabled, onClick: () => this.selectOption(option) }, this.multiSelect && (h("span", { class: { 'multi-checkbox': true, checked: isSelected } }, isSelected && (h("svg", { width: "10", height: "10", viewBox: "0 0 24 24", fill: "none" }, h("path", { d: "M20.6 5.7L9.1 17.2c-.2.2-.5.3-.8.3s-.6-.1-.8-.3L3 12.8c-.4-.4-.4-1 0-1.4.4-.4 1-.4 1.4 0l3.9 3.9L19.2 4.3c.4-.4 1-.4 1.4 0 .4.4.4 1 0 1.4z", fill: "white" }))))), this.radioOptions && (h("div", { class: { radio: true, selected: isSelected } }, isSelected && h("div", { class: "circle" }))), !this.radioOptions && option.preIcon && (h("dropi-icon", { name: option.preIcon, width: "20px", height: "20px", color: "Gray-Gray-500" })), this.radioOptions && option.imageUrl && !option.isFallback && (h("img", { class: "option-image", src: option.imageUrl, alt: "", onError: () => { option.isFallback = true; this.options = [...this.options]; } })), this.radioOptions && option.isFallback && (h("span", { class: "option-image-fallback" }, option.label.charAt(0).toUpperCase())), this.showCountryFlags && option.countryCode && (h("span", { class: "flag-placeholder" }, option.countryCode)), this.radioOptions
+            ? (h("div", { class: "labels-container" }, h("span", { class: "elipsis" }, option.label), option.secondLabel && h("span", { class: "option-second-label" }, option.secondLabel)))
+            : (h("span", { class: "elipsis" }, this.showCountryFlags && option.shortLabel ? option.shortLabel : option.label)))));
+    }
+    renderDropdown() {
+        if (!this.isOpen)
+            return null;
+        return (h("ul", { class: "select-dropdown-overlay", style: this.dropdownStyle, onScroll: (e) => this.handleScroll(e) }, this.searchEnabled && (h("li", { class: "sticky-search" }, h("div", { class: "search-wrapper" }, h("dropi-icon", { name: "Search", width: "16px", height: "16px", color: "Gray-Gray-400" }), h("input", { class: "search-input", type: "text", placeholder: this.placeHolderSearch, value: this.searchTerm, onInput: (e) => this.handleSearch(e.target.value), onKeyDown: (e) => {
+                if (e.key === 'Enter')
+                    this.dropiKeyEnter.emit(e);
+            } }), this.searchTerm && (h("button", { type: "button", class: "search-clear", onClick: () => this.handleSearch('') }, h("dropi-icon", { name: "Close", width: "14px", height: "14px", color: "Gray-Gray-400" })))))), this.isGrouped && this.filteredOptions.map(group => [
+            h("li", { class: "option-group-title" }, group.category),
+            ...group.options.map(opt => (h("li", { key: opt.id }, h("button", { type: "button", class: { option: true, 'option-group': true, 'disabled-option': !!opt.disabled }, disabled: opt.disabled, onClick: () => this.selectOption(opt) }, opt.preIcon && h("dropi-icon", { name: opt.preIcon, width: "20px", height: "20px", color: "Gray-Gray-500" }), h("span", { class: "elipsis" }, opt.label))))),
+        ]), !this.isGrouped && this.filteredOptions.map(opt => this.renderOption(opt)), this.filteredOptions.length === 0 && (h("li", { class: "no-results" }, "Sin resultados"))));
+    }
+    render() {
+        return (h("div", { key: '94383b3267955dcb8d1a6c523730e291976157b2', class: "custom-select" }, !this.dropdownType && this.label && (h("label", { key: '4ff14d77b301a275f6c608d227361ff2829ac7a1', class: { 'disabled-label': this.disabled } }, this.label, this.showObligatory && !this.disabled && h("span", { key: '8345af7646d8cea8e66c996f0eb4abf210c9d211', class: "asterisk" }, " *"))), h("div", { key: '290a9521e39c2e1bdb1a8aacf35b2b22bf4966de', class: "dropdown-container" }, this.dropdownType && this.label && (h("div", { key: 'a9ad2741e23d31b3b0dc69a3aa89f54eaa291b04', class: "left-label" }, this.label)), this.renderTrigger()), this.helperText && !this.invalid && (h("div", { key: '8dd7cd895c1124b07020f396ac316390d4ee8cc8', class: "select-helper" }, h("span", { key: 'cdcaeb30b27baf4441d6ef87f6f553fd2b73e145' }, this.helperText))), this.invalid && this.errorText && (h("div", { key: '8e1a4da603de7b6c730a9946b63652fbe5e68321', class: "select-helper-error" }, h("dropi-icon", { key: 'f831c9f543c4f4be52d969f1d26f7d7e8816d08f', name: "Warning-circle", width: "12px", height: "12px", color: "Error-Error-500" }), h("span", { key: '1eefbade098b9743b23abee3e43836ed33ecbadb' }, this.errorText))), this.renderDropdown()));
+    }
+    static get is() { return "dropi-select"; }
+    static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dropi-select.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dropi-select.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "''"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder",
+                "defaultValue": "'Seleccionar'"
+            },
+            "options": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "SelectOption[] | SelectOptionGroup[]",
+                    "resolved": "SelectOptionGroup[] | SelectOption[]",
+                    "references": {
+                        "SelectOption": {
+                            "location": "import",
+                            "path": "./select.types",
+                            "id": "src/components/dropi-select/select.types.ts::SelectOption",
+                            "referenceLocation": "SelectOption"
+                        },
+                        "SelectOptionGroup": {
+                            "location": "import",
+                            "path": "./select.types",
+                            "id": "src/components/dropi-select/select.types.ts::SelectOptionGroup",
+                            "referenceLocation": "SelectOptionGroup"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Array of SelectOption or SelectOptionGroup"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name",
+                "defaultValue": "''"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "invalid": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "invalid",
+                "defaultValue": "false"
+            },
+            "errorText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "error-text",
+                "defaultValue": "''"
+            },
+            "helperText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "helper-text",
+                "defaultValue": "''"
+            },
+            "showObligatory": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-obligatory",
+                "defaultValue": "false"
+            },
+            "searchEnabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enables text search inside the dropdown"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "search-enabled",
+                "defaultValue": "false"
+            },
+            "multiSelect": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Allows selecting multiple options"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "multi-select",
+                "defaultValue": "false"
+            },
+            "dropdownType": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Renders trigger without border (inline/dropdown style)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "dropdown-type",
+                "defaultValue": "false"
+            },
+            "showCountryFlags": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show country flags next to option labels"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-country-flags",
+                "defaultValue": "false"
+            },
+            "radioOptions": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Renders options as radio buttons with optional image"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "radio-options",
+                "defaultValue": "false"
+            },
+            "placeHolderSearch": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Placeholder inside the search field"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "place-holder-search",
+                "defaultValue": "'Buscar'"
+            },
+            "preIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon name shown before the trigger label"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "pre-icon",
+                "defaultValue": "''"
+            },
+            "defaultSelectedId": {
+                "type": "any",
+                "mutable": true,
+                "complexType": {
+                    "original": "string | number",
+                    "resolved": "number | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Pre-select an option by id"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "default-selected-id",
+                "defaultValue": "''"
+            },
+            "value": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "SelectOption | null",
+                    "resolved": "SelectOption",
+                    "references": {
+                        "SelectOption": {
+                            "location": "import",
+                            "path": "./select.types",
+                            "id": "src/components/dropi-select/select.types.ts::SelectOption",
+                            "referenceLocation": "SelectOption"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controlled selected option (single select)"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "null"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isOpen": {},
+            "selectedOption": {},
+            "multiSelected": {},
+            "filteredOptions": {},
+            "searchTerm": {},
+            "dropdownStyle": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dropiChange",
+                "name": "dropiChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when an option is selected (single) or selection changes (multi)"
+                },
+                "complexType": {
+                    "original": "SelectOption | SelectOption[]",
+                    "resolved": "SelectOption | SelectOption[]",
+                    "references": {
+                        "SelectOption": {
+                            "location": "import",
+                            "path": "./select.types",
+                            "id": "src/components/dropi-select/select.types.ts::SelectOption",
+                            "referenceLocation": "SelectOption"
+                        }
+                    }
+                }
+            }, {
+                "method": "dropiClear",
+                "name": "dropiClear",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the selection is cleared"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "dropiSearch",
+                "name": "dropiSearch",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted on search input"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "dropiScrollEnd",
+                "name": "dropiScrollEnd",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the list is scrolled to the end"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "dropiKeyEnter",
+                "name": "dropiKeyEnter",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted on Enter key inside search"
+                },
+                "complexType": {
+                    "original": "KeyboardEvent",
+                    "resolved": "KeyboardEvent",
+                    "references": {
+                        "KeyboardEvent": {
+                            "location": "global",
+                            "id": "global::KeyboardEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "setById": {
+                "complexType": {
+                    "signature": "(id: string | number) => Promise<void>",
+                    "parameters": [{
+                            "name": "id",
+                            "type": "string | number",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "SelectOption": {
+                            "location": "import",
+                            "path": "./select.types",
+                            "id": "src/components/dropi-select/select.types.ts::SelectOption",
+                            "referenceLocation": "SelectOption"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Select an option by its id",
+                    "tags": []
+                }
+            },
+            "setByLabel": {
+                "complexType": {
+                    "signature": "(label: string) => Promise<void>",
+                    "parameters": [{
+                            "name": "label",
+                            "type": "string",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "SelectOption": {
+                            "location": "import",
+                            "path": "./select.types",
+                            "id": "src/components/dropi-select/select.types.ts::SelectOption",
+                            "referenceLocation": "SelectOption"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Select an option by its label",
+                    "tags": []
+                }
+            },
+            "clearSelection": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Clear the current selection",
+                    "tags": []
+                }
+            },
+            "resetMultiSelect": {
+                "complexType": {
+                    "signature": "(_placeholder?: string) => Promise<void>",
+                    "parameters": [{
+                            "name": "_placeholder",
+                            "type": "string",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Reset multi-select state and show a placeholder label",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "options",
+                "methodName": "optionsChanged"
+            }, {
+                "propName": "defaultSelectedId",
+                "methodName": "defaultChanged"
+            }, {
+                "propName": "value",
+                "methodName": "valueChanged"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "handleOutsideClick",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }];
+    }
+    static get attachInternalsMemberName() { return "internals"; }
+}