@dropi/ui 0.1.27 → 0.1.29

package/dist/cjs/dropi-select.cjs.entry.js

@@ -0,0 +1,382 @@
+'use strict';
+
+var index = require('./index-C8kwDvpf.js');
+
+const dropiSelectCss = () => `:host{display:block;width:100%;text-align:left}*,*::before,*::after{box-sizing:border-box}.custom-select{position:relative;width:100%}.custom-select label{display:block;font-size:var(--font-size-xs, 10px);font-weight:var(--font-weight-regular, 400);color:var(--Gray-Gray-600, #475066)}.disabled-label{color:var(--Gray-Gray-400, #858ea6) !important}.asterisk{color:var(--Error-Error-500, #f46a6b)}.dropdown-container{display:flex;align-items:center;gap:4px}.left-label{color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-m, 14px);white-space:nowrap}.select-button{box-sizing:border-box;width:100%;height:40px;padding:0 0.75rem;border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #ffffff);color:var(--Gray-Gray-500, #69738c);font-size:var(--font-size-s, 12px);font-family:inherit;display:flex;justify-content:space-between;align-items:center;text-align:left;cursor:pointer;transition:border-color 0.2s ease;gap:8px}.select-button:focus{outline:none;border-color:var(--Info-Info-500, #50a5f1)}.select-button:disabled{border-color:var(--Gray-Gray-200, #c3c9d9);color:var(--Gray-Gray-400, #858ea6);background-color:var(--Gray-Gray-50, #f7f8fa);cursor:not-allowed}.select-completed{border-color:var(--Gray-Gray-400, #858ea6);color:var(--Gray-Gray-600, #475066)}.select-button-error{border-color:var(--Error-Error-500, #f46a6b) !important}.no-border{border:none !important;color:var(--Gray-Gray-600, #475066);padding:var(--Size-4, 16px);background-color:transparent !important;gap:var(--Size-2, 8px)}.no-border:disabled{background-color:transparent !important}.button-content{display:flex;align-items:center;gap:8px;overflow:hidden;flex:1;min-width:0}.elipsis{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.select-dropdown-overlay{position:fixed;max-height:250px;overflow-y:auto;list-style:none;padding:var(--Size-4, 16px) var(--Size-4, 16px) var(--Size-3, 12px);margin:0;border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #ffffff);box-shadow:0px 8px 24px rgba(0, 0, 0, 0.12);z-index:9999;animation:dropdown-open 120ms ease-out}@keyframes dropdown-open{from{opacity:0;transform:scaleY(0.95);transform-origin:top}to{opacity:1;transform:scaleY(1);transform-origin:top}}.option{box-sizing:border-box;width:100%;min-height:40px;border-radius:var(--Border-2, 8px);padding:var(--Size-3, 12px) var(--Size-4, 16px);border:none;background:transparent;text-align:left;color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-s, 12px);font-family:inherit;cursor:pointer;display:flex;align-items:center;gap:var(--Size-2, 8px);transition:background 0.15s ease}.option:hover:not(:disabled){background:var(--Gray-Gray-50, #f7f8fa)}.option:disabled,.disabled-option{opacity:0.5;cursor:not-allowed}.option.selected-option:not(.option-radio){background:var(--Primary-Primary-50, #fef8f2);color:var(--Primary-Primary-500, #f49a3d)}.option-group-title{padding:var(--Size-3, 12px) var(--Size-4, 16px);font-size:var(--font-size-s, 12px);font-weight:var(--font-weight-medium, 500);color:var(--Gray-Gray-500, #69738c);list-style:none}.option-group{padding-left:var(--Size-6, 32px)}.sticky-search{position:sticky;top:calc(-1 * var(--Size-4, 16px));background:var(--Neutral-White, #ffffff);z-index:10;margin:calc(-1 * var(--Size-4, 16px)) calc(-1 * var(--Size-4, 16px)) 0;padding:var(--Size-2, 8px) var(--Size-4, 16px);border-bottom:1px solid var(--Gray-Gray-100, #e6eaf2);list-style:none}.search-wrapper{display:flex;align-items:center;gap:8px;border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);padding:6px 10px;background:var(--Neutral-White, #ffffff)}.search-input{flex:1;border:none;outline:none;font-size:var(--font-size-s, 12px);font-family:inherit;color:var(--Gray-Gray-700, #32394d);background:transparent}.search-input::placeholder{color:var(--Gray-Gray-400, #858ea6)}.search-clear{background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center}.multi-checkbox{width:18px;height:18px;min-width:18px;border-radius:var(--Border-1, 4px);border:2px solid var(--Gray-Gray-200, #c3c9d9);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background 0.15s, border-color 0.15s}.multi-checkbox.checked{background:var(--Primary-Primary-500, #f49a3d);border-color:var(--Primary-Primary-500, #f49a3d)}.option-radio{display:flex;align-items:center;gap:12px}.option-radio.selected-option{border-radius:var(--Border-2, 8px);background:var(--Primary-Primary-50, #fef8f2);color:var(--Primary-Primary-500, #f49a3d)}.option-radio.selected-option .option-second-label{color:var(--Primary-Primary-500, #f49a3d)}.radio{width:20px;height:20px;min-width:20px;border-radius:50%;border:2px solid var(--Gray-Gray-200, #c3c9d9);display:flex;align-items:center;justify-content:center;flex-shrink:0}.radio.selected{border-color:var(--Primary-Primary-500, #f49a3d)}.circle{width:12px;height:12px;border-radius:50%;background:var(--Primary-Primary-500, #f49a3d)}.labels-container{display:flex;justify-content:space-between;width:100%;min-width:0}.option-image{width:24px;height:24px;border-radius:60px;object-fit:cover;flex-shrink:0}.small-image{width:20px;height:20px}.option-image-fallback{width:24px;height:24px;border-radius:60px;background:var(--Primary-Primary-500, #f49a3d);color:white;font-size:13px;font-weight:var(--font-weight-bold);display:flex;justify-content:center;align-items:center;flex-shrink:0}.small-image.option-image-fallback{width:20px;height:20px}.option-second-label{color:var(--Gray-Gray-700, #32394d);font-weight:var(--font-weight-bold);white-space:nowrap}.flag-placeholder{font-size:11px;font-weight:var(--font-weight-semibold);color:var(--Gray-Gray-500, #69738c);flex-shrink:0}.select-helper,.select-helper-error{display:flex;gap:var(--Size-1, 4px);align-items:center;margin-top:var(--Size-1, 4px)}.select-helper span{color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-xs, 10px)}.select-helper-error span{color:var(--Error-Error-500, #f46a6b);font-size:var(--font-size-xs, 10px)}.no-results{padding:var(--Size-3, 12px) var(--Size-4, 16px);color:var(--Gray-Gray-400, #858ea6);font-size:var(--font-size-s, 12px);list-style:none;text-align:center}`;
+
+const DropiSelect = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.onChangeSelect = index.createEvent(this, "onChangeSelect", 7);
+        this.onClear = index.createEvent(this, "onClear", 7);
+        this.onSearch = index.createEvent(this, "onSearch", 7);
+        this.scrolledToEnd = index.createEvent(this, "scrolledToEnd", 7);
+        this.onKeyEnter = index.createEvent(this, "onKeyEnter", 7);
+        if (hostRef.$hostElement$["s-ei"]) {
+            this.internals = hostRef.$hostElement$["s-ei"];
+        }
+        else {
+            this.internals = hostRef.$hostElement$.attachInternals();
+            hostRef.$hostElement$["s-ei"] = this.internals;
+        }
+    }
+    get el() { return index.getElement(this); }
+    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 = '';
+    /**
+     * 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' */
+    onChangeSelect;
+    /** Emitted when the selection is cleared — matches Angular 'onClear' */
+    onClear;
+    /** Emitted on search input — matches Angular 'onSearch' */
+    onSearch;
+    /** Emitted when the list is scrolled to the end — matches Angular 'scrolledToEnd' */
+    scrolledToEnd;
+    /** Emitted on Enter key inside search — matches Angular 'onKeyEnter' */
+    onKeyEnter;
+    // ── 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.onClear.emit();
+    }
+    /** Reset multi-select state and show a placeholder label */
+    async resetMultiSelect(_placeholder) {
+        this.multiSelected = [];
+        this.internals.setFormValue('');
+    }
+    // ── 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 ─────────────────────────────────────
+    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.onChangeSelect.emit([...this.multiSelected]);
+        }
+        else {
+            this._selectedOption = option;
+            this.internals.setFormValue(String(option.id));
+            this.onChangeSelect.emit(option);
+            this.closeDropdown();
+        }
+    }
+    isOptionChecked(option) {
+        return this.multiSelected.some(o => o.id === option.id);
+    }
+    // ── Search ───────────────────────────────────────────────────
+    handleSearch(term) {
+        this.searchTerm = term;
+        this.onSearch.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.scrolledToEnd.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 (index.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() }, index.h("div", { class: {
+                'button-content': true,
+                'option-radio': this.radioOptions && !!this._selectedOption && !this.multiSelect,
+            } }, this.preIcon && (index.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
+                ? index.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
+                    ? index.h("span", { class: "option-image-fallback small-image" }, this._selectedOption.label.charAt(0).toUpperCase())
+                    : null,
+            index.h("div", { class: "labels-container elipsis" }, index.h("span", null, this._selectedOption.label), this._selectedOption.secondLabel && index.h("span", { class: "option-second-label" }, this._selectedOption.secondLabel)),
+        ], !(this.radioOptions && this._selectedOption && !this.multiSelect) && (index.h("div", { class: "elipsis" }, this.triggerLabel))), index.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 (index.h("li", { key: option.id }, index.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 && (index.h("span", { class: { 'multi-checkbox': true, checked: isSelected } }, isSelected && (index.h("svg", { width: "10", height: "10", viewBox: "0 0 24 24", fill: "none" }, index.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 && (index.h("div", { class: { radio: true, selected: isSelected } }, isSelected && index.h("div", { class: "circle" }))), !this.radioOptions && option.preIcon && (index.h("dropi-icon", { name: option.preIcon, width: "20px", height: "20px", color: "Gray-Gray-500" })), this.radioOptions && option.imageUrl && !option.isFallback && (index.h("img", { class: "option-image", src: option.imageUrl, alt: "", onError: () => { option.isFallback = true; this.options = [...this.options]; } })), this.radioOptions && option.isFallback && (index.h("span", { class: "option-image-fallback" }, option.label.charAt(0).toUpperCase())), this.showCountryFlags && option.countryCode && (index.h("span", { class: "flag-placeholder" }, option.countryCode)), this.radioOptions
+            ? (index.h("div", { class: "labels-container" }, index.h("span", { class: "elipsis" }, option.label), option.secondLabel && index.h("span", { class: "option-second-label" }, option.secondLabel)))
+            : (index.h("span", { class: "elipsis" }, this.showCountryFlags && option.shortLabel ? option.shortLabel : option.label)))));
+    }
+    renderDropdown() {
+        if (!this.isOpen)
+            return null;
+        return (index.h("ul", { class: `select-dropdown-overlay ${this.overlayClass}`, style: this.dropdownStyle, onScroll: (e) => this.handleScroll(e) }, this.searchEnabled && (index.h("li", { class: "sticky-search" }, index.h("div", { class: "search-wrapper" }, index.h("dropi-icon", { name: "Search", width: "16px", height: "16px", color: "Gray-Gray-400" }), index.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.onKeyEnter.emit(e);
+            } }), this.searchTerm && (index.h("button", { type: "button", class: "search-clear", onClick: () => this.handleSearch('') }, index.h("dropi-icon", { name: "Close", width: "14px", height: "14px", color: "Gray-Gray-400" })))))), this.isGrouped && this.filteredOptions.map(group => [
+            index.h("li", { class: "option-group-title" }, group.category),
+            ...group.options.map(opt => (index.h("li", { key: opt.id }, index.h("button", { type: "button", class: { option: true, 'option-group': true, 'disabled-option': !!opt.disabled }, disabled: opt.disabled, onClick: () => this.selectOption(opt) }, opt.preIcon && index.h("dropi-icon", { name: opt.preIcon, width: "20px", height: "20px", color: "Gray-Gray-500" }), index.h("span", { class: "elipsis" }, opt.label))))),
+        ]), !this.isGrouped && this.filteredOptions.map(opt => this.renderOption(opt)), this.filteredOptions.length === 0 && (index.h("li", { class: "no-results" }, "Sin resultados"))));
+    }
+    render() {
+        return (index.h("div", { key: '932cad965441a784f51d6b82ffc5a100cf438fb6', class: "custom-select" }, !this.dropdownType && this.label && (index.h("label", { key: '1c46242dcbd7862b32a36e2132bc4689b3c95aab', class: { 'disabled-label': this.disabled } }, this.label, this.showObligatory && !this.disabled && index.h("span", { key: '79e2df6ae0a55c4e51ff7354486903d58bdb7d36', class: "asterisk" }, " *"))), index.h("div", { key: 'd4a48dcc513b5ae7171598709b0d00c3ffd7f42b', class: "dropdown-container" }, this.dropdownType && this.label && (index.h("div", { key: 'f9d8b6f87dcc8438c00ec04edabe10ebb2cceb79', class: "left-label" }, this.label)), this.renderTrigger()), this.textHelper && !this.hasError && (index.h("div", { key: 'e8cc2e4ccb3a5919fe30411003153bfe6434b0d0', class: "select-helper" }, index.h("span", { key: '2fe857a4efac70882ec58835534bb22739c4fb26' }, this.textHelper))), this.hasError && this.errorText && (index.h("div", { key: 'e357992bf4a391052fe3a8444b24777292f71bf0', class: "select-helper-error" }, index.h("dropi-icon", { key: '9a32ef1f5ae2ccf18996bdc451e5de4e2c923a0a', name: "Warning-circle", width: "12px", height: "12px", color: "Error-Error-500" }), index.h("span", { key: '919259f76022b34162f680234a3c1cf93492666b' }, this.errorText))), this.renderDropdown()));
+    }
+    static get formAssociated() { return true; }
+    static get watchers() { return {
+        "selectProperties": [{
+                "selectPropertiesChanged": 0
+            }],
+        "options": [{
+                "optionsChanged": 0
+            }],
+        "defaultSelectedId": [{
+                "defaultChanged": 0
+            }],
+        "selectedOption": [{
+                "valueChanged": 0
+            }]
+    }; }
+};
+DropiSelect.style = dropiSelectCss();
+
+exports.dropi_select = DropiSelect;

package/dist/cjs/dropi-sidebar.cjs.entry.js

@@ -0,0 +1,78 @@
+'use strict';
+
+var index = require('./index-C8kwDvpf.js');
+
+const dropiSidebarCss = () => `:host{display:block}.main-sidebar-container{margin-top:20px}.sidebar-option{height:45px;display:flex;align-items:center;position:relative;font-weight:var(--font-weight-medium, 500);gap:var(--Size-3, 12px);padding:var(--Size-3, 12px);font-size:var(--font-size-s, 12px);border-radius:var(--Border-1, 4px);min-width:147px;cursor:pointer;user-select:none}.sidebar-option .arrow{position:absolute;right:17px;transition:transform 0.3s ease}.sidebar-option .arrow-expanded{transform:rotate(180deg)}.sidebar-default-option{color:var(--Gray-Gray-500, #68738f)}.sidebar-active-option{color:var(--Primary-Primary-500, #f49a3d);background-color:#fef8f1}.sidebar-sub-item{overflow:hidden;max-height:0;height:auto;font-weight:var(--font-weight-medium, 500);gap:var(--Size-3, 12px);font-size:var(--font-size-s, 12px);cursor:pointer;opacity:0;padding:0 var(--Size-3, 12px) 0 var(--Size-8, 32px);transition:max-height 0.3s ease-out,     opacity 0.3s ease-out,     padding 0.3s ease-out;user-select:none}.sidebar-sub-item.sidebar-expanded{max-height:200px;opacity:1;padding:var(--Size-3, 12px) var(--Size-3, 12px) var(--Size-3, 12px) var(--Size-8, 32px)}.sidebar-sub-item-default{color:var(--Gray-Gray-500, #68738f)}.sidebar-sub-item-active{color:var(--Primary-Primary-500, #f49a3d)}.space-between{justify-content:space-between}`;
+
+const DropiSidebar = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.onIndexChanged = index.createEvent(this, "onIndexChanged", 7);
+    }
+    /**
+     * Define las propiedades y la cantidad de elementos a renderizar.
+     * Pasarlo como JSON string o directamente como array de SidebarProperties.
+     */
+    sideBarProperties = [];
+    /**
+     * Evento emitido cuando se selecciona una opción en el menú o un sub-hijo.
+     */
+    onIndexChanged;
+    parsedProperties = [];
+    watchPropHandler(newValue) {
+        this.parsedProperties = typeof newValue === 'string' ? JSON.parse(newValue) : (newValue || []);
+    }
+    componentWillLoad() {
+        this.watchPropHandler(this.sideBarProperties);
+    }
+    setExpandedPropertie(id) {
+        const propertieIndex = this.parsedProperties.findIndex((item) => item.id === id);
+        if (propertieIndex !== -1) {
+            const newProps = [...this.parsedProperties];
+            newProps[propertieIndex] = {
+                ...newProps[propertieIndex],
+                expandedMenu: !newProps[propertieIndex].expandedMenu
+            };
+            this.parsedProperties = newProps;
+        }
+    }
+    onItemClick(itemClicked) {
+        this.onIndexChanged.emit(itemClicked);
+        if (itemClicked.subItems && itemClicked.subItems.length > 0) {
+            this.setExpandedPropertie(itemClicked.id);
+        }
+    }
+    onSubItemClick(itemClicked) {
+        this.onIndexChanged.emit(itemClicked);
+    }
+    render() {
+        return (index.h("div", { key: '9f79e6370ff61c6278a8238b0dc92881832f9b8f', class: "main-sidebar-container" }, this.parsedProperties.map(item => {
+            return [
+                /* Item Principal */
+                index.h("div", { class: {
+                        'sidebar-option': true,
+                        'sidebar-active-option': !!item.active,
+                        'sidebar-default-option': !item.active
+                    }, onClick: () => this.onItemClick(item) }, index.h("dropi-icon", { name: item.icon || 'Cube', width: "20px", height: "20px", color: item.active ? 'Primary-Primary-500' : 'Gray-Gray-500' }), index.h("span", null, item.text), item.subItems && item.subItems.length > 0 && (index.h("dropi-icon", { class: {
+                        'arrow': true,
+                        'arrow-expanded': !!item.expandedMenu
+                    }, name: "Dropdown-down", width: "20px", height: "20px", color: item.active ? 'Primary-Primary-500' : 'Gray-Gray-500' }))),
+                /* SubItems Renderizados al mismo nivel DOM que instruye Angular ng-container */
+                item.subItems && item.subItems.length > 0 && (item.subItems.map(subOption => (index.h("div", { class: {
+                        'sidebar-sub-item': true,
+                        'sidebar-expanded': !!item.expandedMenu,
+                        'sidebar-sub-item-default': !subOption.active,
+                        'sidebar-sub-item-active': !!subOption.active
+                    }, onClick: (e) => { e.stopPropagation(); this.onSubItemClick(subOption); } }, subOption.text))))
+            ];
+        })));
+    }
+    static get watchers() { return {
+        "sideBarProperties": [{
+                "watchPropHandler": 0
+            }]
+    }; }
+};
+DropiSidebar.style = dropiSidebarCss();
+
+exports.dropi_sidebar = DropiSidebar;

package/dist/cjs/dropi-simple-stepper.cjs.entry.js

@@ -0,0 +1,53 @@
+'use strict';
+
+var index = require('./index-C8kwDvpf.js');
+
+const dropiSimpleStepperCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.stepper{display:flex;align-items:flex-start;width:100%}.stepper__item{display:flex;flex-direction:column;align-items:center;flex:1}.stepper__circle-row{display:flex;align-items:center;width:100%}.stepper__circle{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background 0.2s, border-color 0.2s}.stepper__circle--pending{background:var(--Gray-Gray-100, #e6eaf2);border:2px solid var(--Gray-Gray-200, #c3c9d9)}.stepper__circle--active{background:var(--Primary-Primary-500, #f49a3d);border:2px solid var(--Primary-Primary-500, #f49a3d)}.stepper__circle--completed{background:var(--Primary-Primary-500, #f49a3d);border:2px solid var(--Primary-Primary-500, #f49a3d)}.stepper__dot{width:8px;height:8px;border-radius:50%;background:var(--Neutral-White, #ffffff);display:block}.stepper__circle--pending .stepper__dot{background:var(--Gray-Gray-400, #858ea6)}.stepper__number{font-size:var(--font-size-xs, 10px);font-weight:var(--font-weight-bold, 700);color:var(--Neutral-White, #ffffff)}.stepper__circle--pending .stepper__number{color:var(--Gray-Gray-500, #69738c)}.stepper__line{flex:1;height:2px;background:var(--Gray-Gray-200, #c3c9d9);transition:background 0.2s}.stepper__line--done{background:var(--Primary-Primary-500, #f49a3d)}.stepper__label{margin-top:6px;font-size:var(--font-size-xs, 10px);color:var(--Gray-Gray-600, #475066);text-align:center}`;
+
+const DropiSimpleStepper = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    /** Total steps */
+    stepsCount = 3;
+    /** Circle content: 'point' (dot) | 'number' */
+    typeStep = 'point';
+    /** Current active step (1-based) */
+    currentStep = 0;
+    /** Labels shown below each step. Pass as JSON string or array */
+    labelStepper = [];
+    /** Flow mode (visual only) */
+    flowMode = 'Simultaneous';
+    /** White-label brand identifier (matches Angular `white_brand`) */
+    white_brand = 'dropi';
+    get parsedLabels() {
+        if (typeof this.labelStepper === 'string') {
+            try {
+                return JSON.parse(this.labelStepper);
+            }
+            catch {
+                return [];
+            }
+        }
+        return this.labelStepper || [];
+    }
+    render() {
+        const labels = this.parsedLabels;
+        const steps = Array.from({ length: this.stepsCount }, (_, i) => i + 1);
+        return (index.h("div", { key: 'f67f6e9404bf67700c46b987923836d5251ae1c4', class: "stepper" }, steps.map((step, i) => {
+            const isCompleted = step < this.currentStep;
+            const isActive = step === this.currentStep;
+            const isLast = i === steps.length - 1;
+            const label = labels[i];
+            return (index.h("div", { class: "stepper__item", key: step }, index.h("div", { class: "stepper__circle-row" }, index.h("div", { class: {
+                    'stepper__circle': true,
+                    'stepper__circle--active': isActive,
+                    'stepper__circle--completed': isCompleted,
+                    'stepper__circle--pending': !isActive && !isCompleted,
+                } }, this.typeStep === 'point' ? (index.h("span", { class: "stepper__dot" })) : (index.h("span", { class: "stepper__number" }, step))), !isLast && index.h("div", { class: { 'stepper__line': true, 'stepper__line--done': isCompleted } })), label && index.h("span", { class: "stepper__label" }, label)));
+        })));
+    }
+};
+DropiSimpleStepper.style = dropiSimpleStepperCss();
+
+exports.dropi_simple_stepper = DropiSimpleStepper;

package/dist/cjs/dropi-skeleton.cjs.entry.js

@@ -0,0 +1,57 @@
+'use strict';
+
+var index = require('./index-C8kwDvpf.js');
+
+const dropiSkeletonCss = () => `:host{display:block}*,*::before,*::after{box-sizing:border-box}.skeleton-lines{display:flex;flex-direction:column;gap:8px}.skeleton{background:linear-gradient(     90deg,     var(--Gray-Gray-100, #e6eaf2) 25%,     var(--Gray-Gray-50, #f7f8fa) 50%,     var(--Gray-Gray-100, #e6eaf2) 75%   );background-size:200% 100%;animation:shimmer 1.6s ease-in-out infinite}@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}`;
+
+const DropiSkeleton = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    /** Shape variant: 'text' | 'circle' | 'rect' */
+    variant = 'text';
+    /** Width (CSS value, e.g. "100%", "200px") */
+    width = '';
+    /** Height (CSS value, e.g. "16px", "48px") */
+    height = '';
+    /** Border radius override */
+    radius = '8px';
+    /** Number of lines to repeat (text variant only) */
+    lines = 1;
+    /** Base color of the shimmer gradient. Accepts hex (#f6f7f8) or token name (Gray-Gray-100) */
+    baseColor = '#f6f7f8';
+    getBackground() {
+        const color = (this.baseColor ?? '#f6f7f8').startsWith('#') ? (this.baseColor ?? '#f6f7f8') : `var(--${this.baseColor})`;
+        return `linear-gradient(to right, ${color} 8%, #e3e7efe7 28%, ${color} 77%)`;
+    }
+    getRadius() {
+        if (this.radius)
+            return this.radius;
+        if (this.variant === 'circle')
+            return '50%';
+        if (this.variant === 'text')
+            return '4px';
+        return 'var(--Border-1, 4px)';
+    }
+    render() {
+        if (this.variant === 'text' && this.lines > 1) {
+            return (index.h("div", { class: "skeleton-lines" }, Array.from({ length: this.lines }).map((_, i) => (index.h("div", { class: "skeleton", style: {
+                    width: i === this.lines - 1 ? '70%' : this.width,
+                    height: this.height,
+                    borderRadius: this.getRadius(),
+                    background: this.getBackground(),
+                    backgroundSize: '1000px 104px',
+                } })))));
+        }
+        return (index.h("div", { class: "skeleton", style: {
+                width: this.width,
+                height: this.height,
+                borderRadius: this.getRadius(),
+                background: this.getBackground(),
+                backgroundSize: '1000px 104px',
+            } }));
+    }
+};
+DropiSkeleton.style = dropiSkeletonCss();
+
+exports.dropi_skeleton = DropiSkeleton;

package/dist/cjs/dropi-steps.cjs.entry.js

@@ -0,0 +1,52 @@
+'use strict';
+
+var index = require('./index-C8kwDvpf.js');
+
+const dropiStepsCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.stepper{display:flex;align-items:flex-start;width:100%}.stepper__step{display:flex;flex-direction:column;align-items:center;flex:1;position:relative}.stepper__circle-wrap{display:flex;align-items:center;width:100%;position:relative}.stepper__circle{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:var(--font-size-xs, 10px);font-weight:var(--font-weight-bold, 700);flex-shrink:0;z-index:1;transition:background 0.2s, border-color 0.2s}.stepper__circle--pending{background:var(--Neutral-White, #ffffff);border:2px solid var(--Gray-Gray-200, #c3c9d9);color:var(--Gray-Gray-400, #858ea6)}.stepper__circle--focus{background:var(--Neutral-White, #ffffff);border:2px solid var(--Primary-Primary-500, #f49a3d);color:var(--Primary-Primary-500, #f49a3d)}.stepper__circle--completed{background:var(--Primary-Primary-500, #f49a3d);border:2px solid var(--Primary-Primary-500, #f49a3d);color:var(--Neutral-White, #ffffff)}.stepper__line{flex:1;height:2px;background:var(--Gray-Gray-200, #c3c9d9);transition:background 0.2s}.stepper__line--done{background:var(--Primary-Primary-500, #f49a3d)}.stepper__label{display:flex;flex-direction:column;align-items:center;gap:2px;margin-top:var(--Size-2, 8px);text-align:center;padding:0 4px}.stepper__title{font-size:var(--font-size-s, 12px);font-weight:var(--font-weight-bold, 700);color:var(--Gray-Gray-700, #32394d)}.stepper__desc{font-size:var(--font-size-xs, 10px);color:var(--Gray-Gray-500, #69738c)}`;
+
+const DropiSteps = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    /** Total number of steps */
+    stepsCount = 3;
+    /** Show step number inside the circle */
+    showNumberOfStep = true;
+    /** Active/current step index (1-based) */
+    currentStep = 0;
+    /** Labels for each step. Pass as JSON string or array */
+    stepLabels = [];
+    /** Visual state applied to the active step (matches Angular `state`) */
+    state = 'pending';
+    get parsedLabels() {
+        if (typeof this.stepLabels === 'string') {
+            try {
+                return JSON.parse(this.stepLabels);
+            }
+            catch {
+                return [];
+            }
+        }
+        return this.stepLabels || [];
+    }
+    stepState(index) {
+        if (index < this.currentStep)
+            return 'completed';
+        if (index === this.currentStep)
+            return 'focus';
+        return 'pending';
+    }
+    render() {
+        const labels = this.parsedLabels;
+        const steps = Array.from({ length: this.stepsCount }, (_, i) => i + 1);
+        return (index.h("div", { key: '35c28210675370e76f16e2525fdf785b6205ec78', class: "stepper" }, steps.map((step) => {
+            const state = this.stepState(step);
+            const label = labels[step - 1];
+            const isLast = step === this.stepsCount;
+            return (index.h("div", { class: "stepper__step", key: step }, index.h("div", { class: "stepper__circle-wrap" }, index.h("div", { class: { 'stepper__circle': true, [`stepper__circle--${state}`]: true } }, state === 'completed' ? (index.h("dropi-icon", { name: "Check", width: "12px", height: "12px", color: "Neutral-White" })) : (this.showNumberOfStep ? index.h("span", null, step) : null)), !isLast && index.h("div", { class: { 'stepper__line': true, 'stepper__line--done': state === 'completed' } })), label && (index.h("div", { class: "stepper__label" }, label.title && index.h("span", { class: "stepper__title" }, label.title), label.description && index.h("span", { class: "stepper__desc" }, label.description)))));
+        })));
+    }
+};
+DropiSteps.style = dropiStepsCss();
+
+exports.dropi_steps = DropiSteps;