@dropi/ui 0.1.54 → 999.0.0

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

@@ -1,1077 +0,0 @@
-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 = 'Select';
-    /** Array of SelectOption or SelectOptionGroup */
-    options = [];
-    name;
-    disabled = false;
-    hasError = false;
-    errorText = '';
-    textHelper = '';
-    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) - matches Angular 'selectedOption' */
-    selectedOption = null;
-    /** Custom CSS class for the dropdown overlay */
-    overlayClass = '';
-    /** If true, uses absolute positioning instead of fixed (better for modals with transforms) */
-    withinModal = false;
-    /**
-     * Convenience object prop — matches Angular `selectProperties: SelectProperties`.
-     * Fields: label, placeholder, options, showObligatory, textHelper,
-     * searchEnabled, multiSelect, dropdownType, hasError, errorText,
-     * radioOptions, preIcon.
-     * When provided, its non-null fields override individual props.
-     */
-    selectProperties = null;
-    // ── State ────────────────────────────────────────────────────
-    isOpen = false;
-    _selectedOption = null;
-    multiSelected = [];
-    filteredOptions = [];
-    searchTerm = '';
-    dropdownStyle = {
-        top: '0px', left: '0px', width: '0px',
-    };
-    // ── Events ───────────────────────────────────────────────────
-    /** Emitted when an option is selected — matches Angular 'onChangeSelect' */
-    dropiChangeSelect;
-    /** Emitted when the selection is cleared — matches Angular 'onClear' */
-    dropiClear;
-    /** Emitted on search input — matches Angular 'onSearch' */
-    dropiSearch;
-    /** Emitted when the list is scrolled to the end — matches Angular 'scrolledToEnd' */
-    dropiScrollEnd;
-    /** Emitted on Enter key inside search — matches Angular 'onKeyEnter' */
-    dropiKeyEnter;
-    // ── Lifecycle ────────────────────────────────────────────────
-    componentWillLoad() {
-        if (this.selectProperties)
-            this.selectPropertiesChanged(this.selectProperties);
-        this.normalizeOptions();
-        this.filteredOptions = [...this.options];
-        this.applyDefaultSelection();
-    }
-    selectPropertiesChanged(val) {
-        if (!val)
-            return;
-        if (val.label !== undefined)
-            this.label = val.label;
-        if (val.placeholder !== undefined)
-            this.placeholder = val.placeholder;
-        if (val.options !== undefined)
-            this.options = val.options;
-        if (val.showObligatory !== undefined)
-            this.showObligatory = val.showObligatory;
-        if (val.textHelper !== undefined)
-            this.textHelper = val.textHelper;
-        if (val.searchEnabled !== undefined)
-            this.searchEnabled = val.searchEnabled;
-        if (val.multiSelect !== undefined)
-            this.multiSelect = val.multiSelect;
-        if (val.dropdownType !== undefined)
-            this.dropdownType = val.dropdownType;
-        if (val.hasError !== undefined)
-            this.hasError = val.hasError;
-        if (val.errorText !== undefined)
-            this.errorText = val.errorText;
-        if (val.radioOptions !== undefined)
-            this.radioOptions = val.radioOptions;
-        if (val.preIcon !== undefined)
-            this.preIcon = val.preIcon;
-    }
-    optionsChanged() {
-        this.normalizeOptions();
-        this.filteredOptions = [...this.options];
-        this.applyDefaultSelection();
-    }
-    normalizeOptions() {
-        if (!this.options) {
-            this.options = [];
-            return;
-        }
-        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('');
-    }
-    // ── Scroll & Resize listeners ──────────────────────────────
-    handleWindowScroll(e) {
-        if (!this.isOpen || this.withinModal)
-            return;
-        // When scroll originates inside shadow DOM, e.target is retargeted to the host element
-        if (e.target === this.el)
-            return;
-        this.closeDropdown();
-    }
-    handleWindowResize() {
-        if (this.isOpen && !this.withinModal) {
-            this.closeDropdown();
-        }
-    }
-    // ── Click outside ────────────────────────────────────────────
-    handleOutsideClick(e) {
-        if (this.isOpen && !e.composedPath().includes(this.el)) {
-            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 ─────────────────────────────────────
-    updateDropdownPosition() {
-        if (!this.buttonRef)
-            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`,
-        };
-    }
-    openDropdown() {
-        if (this.withinModal) {
-            this.dropdownStyle = {
-                top: `${this.el.offsetHeight}px`,
-                left: '0px',
-                width: '100%',
-            };
-        }
-        else {
-            this.updateDropdownPosition();
-        }
-        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.dropiChangeSelect.emit([...this.multiSelected]);
-        }
-        else {
-            this._selectedOption = option;
-            this.internals.setFormValue(String(option.id));
-            this.dropiChangeSelect.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.hasError,
-                '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, iconWidth: "20px", iconHeight: "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', iconWidth: iconSize, iconHeight: 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, iconWidth: "20px", iconHeight: "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 ${this.overlayClass} ${this.withinModal ? 'within-modal' : ''}`, 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", iconWidth: "16px", iconHeight: "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", iconWidth: "14px", iconHeight: "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, iconWidth: "20px", iconHeight: "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: 'b11bfc98a7d37846afaad6b171f564b5cb72620a', class: "custom-select" }, !this.dropdownType && this.label && (h("label", { key: 'bda1ed87b6ed257c1f8148464199f241d3f5d5f9', class: { 'disabled-label': this.disabled } }, this.label, this.showObligatory && !this.disabled && h("span", { key: '81e9fd26856228c8ec59271bae8f3788f22fc2ee', class: "asterisk" }, " *"))), h("div", { key: 'a8feb6ffde967418ad5655e24b3b2ac260541508', class: "dropdown-container" }, this.dropdownType && this.label && (h("div", { key: '43c9e38a90c6f072f540f6e6af3315e26ce2b2e0', class: "left-label" }, this.label)), this.renderTrigger()), this.textHelper && !this.hasError && (h("div", { key: '73c290608f1feeca8a78d391c63ff76cbdfc41a7', class: "select-helper" }, h("span", { key: 'b64e35c437f9791e790e4d2155deae02cdeb684f' }, this.textHelper))), this.hasError && this.errorText && (h("div", { key: '4e7126e5f6f64a6134928e9aa1901e2d795a9246', class: "select-helper-error" }, h("dropi-icon", { key: '36019fb1921f710113fb10e99eb16fa46a6306dc', name: "Warning-circle", iconWidth: "12px", iconHeight: "12px", color: "Error-Error-500" }), h("span", { key: '99783b102c6d345404ef8d9dfb0325c682c8f87b' }, 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": true,
-                "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": true,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "placeholder",
-                "defaultValue": "'Select'"
-            },
-            "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": true,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
-                "attribute": "name"
-            },
-            "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"
-            },
-            "hasError": {
-                "type": "boolean",
-                "mutable": true,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "has-error",
-                "defaultValue": "false"
-            },
-            "errorText": {
-                "type": "string",
-                "mutable": true,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "error-text",
-                "defaultValue": "''"
-            },
-            "textHelper": {
-                "type": "string",
-                "mutable": true,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "text-helper",
-                "defaultValue": "''"
-            },
-            "showObligatory": {
-                "type": "boolean",
-                "mutable": true,
-                "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": true,
-                "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": true,
-                "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": true,
-                "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": true,
-                "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": true,
-                "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"
-            },
-            "selectedOption": {
-                "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) - matches Angular 'selectedOption'"
-                },
-                "getter": false,
-                "setter": false,
-                "defaultValue": "null"
-            },
-            "overlayClass": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Custom CSS class for the dropdown overlay"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "overlay-class",
-                "defaultValue": "''"
-            },
-            "withinModal": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "If true, uses absolute positioning instead of fixed (better for modals with transforms)"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "within-modal",
-                "defaultValue": "false"
-            },
-            "selectProperties": {
-                "type": "any",
-                "mutable": false,
-                "complexType": {
-                    "original": "any",
-                    "resolved": "any",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Convenience object prop \u2014 matches Angular `selectProperties: SelectProperties`.\nFields: label, placeholder, options, showObligatory, textHelper,\nsearchEnabled, multiSelect, dropdownType, hasError, errorText,\nradioOptions, preIcon.\nWhen provided, its non-null fields override individual props."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "select-properties",
-                "defaultValue": "null"
-            }
-        };
-    }
-    static get states() {
-        return {
-            "isOpen": {},
-            "_selectedOption": {},
-            "multiSelected": {},
-            "filteredOptions": {},
-            "searchTerm": {},
-            "dropdownStyle": {}
-        };
-    }
-    static get events() {
-        return [{
-                "method": "dropiChangeSelect",
-                "name": "dropiChangeSelect",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emitted when an option is selected \u2014 matches Angular 'onChangeSelect'"
-                },
-                "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 \u2014 matches Angular 'onClear'"
-                },
-                "complexType": {
-                    "original": "void",
-                    "resolved": "void",
-                    "references": {}
-                }
-            }, {
-                "method": "dropiSearch",
-                "name": "dropiSearch",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emitted on search input \u2014 matches Angular 'onSearch'"
-                },
-                "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 \u2014 matches Angular 'scrolledToEnd'"
-                },
-                "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 \u2014 matches Angular 'onKeyEnter'"
-                },
-                "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": "selectProperties",
-                "methodName": "selectPropertiesChanged"
-            }, {
-                "propName": "options",
-                "methodName": "optionsChanged"
-            }, {
-                "propName": "defaultSelectedId",
-                "methodName": "defaultChanged"
-            }, {
-                "propName": "selectedOption",
-                "methodName": "valueChanged"
-            }];
-    }
-    static get listeners() {
-        return [{
-                "name": "scroll",
-                "method": "handleWindowScroll",
-                "target": "window",
-                "capture": true,
-                "passive": true
-            }, {
-                "name": "resize",
-                "method": "handleWindowResize",
-                "target": "window",
-                "capture": false,
-                "passive": true
-            }, {
-                "name": "click",
-                "method": "handleOutsideClick",
-                "target": "document",
-                "capture": false,
-                "passive": false
-            }];
-    }
-    static get attachInternalsMemberName() { return "internals"; }
-}