@dropi/ui 0.1.17 → 0.1.19

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

@@ -40,7 +40,7 @@ const DropiAccordion = class {
         setTimeout(() => this.updateHeight(this.open), 0);
     }
     render() {
-        return (index.h("div", { key: '4da35da859fc9fdb7c874c026ef1178c93b7bfd5', class: { 'accordion': true, 'accordion--open': this.open, 'accordion--disabled': this.disabled } }, index.h("button", { key: '77af39a3e990b23b5e185fa99176dadce219a911', class: "accordion-header", onClick: () => this.handleToggle(), "aria-expanded": String(this.open), disabled: this.disabled }, index.h("span", { key: 'cda6c545f4d8342a5e9604245b102defe88be227', class: "accordion-header-left" }, this.preIcon && index.h("dropi-icon", { key: 'b73a39adc40193ae93b235ad5a4169a6ec4caa16', name: this.preIcon, width: "20px", height: "20px", color: "Gray-Gray-600" }), index.h("span", { key: 'd7c4543d5c5580ce421deeca47752c850918efd2', class: "accordion-title" }, this.header)), index.h("span", { key: '9e8884a62c4f9a20e6e15ee69499990db9ded865', class: { 'accordion-chevron': true, 'accordion-chevron--open': this.open } }, index.h("dropi-icon", { key: 'a4eb14dc1f0ac9c45865e8ee69cf698e1a5c50a7', name: "Dropdown-down", width: "20px", height: "20px", color: "Gray-Gray-500" }))), index.h("div", { key: 'a23b40bb950b86dafca96851319aee3c8bb6656e', class: "accordion-body", style: { maxHeight: this.contentHeight }, ref: (el) => this.contentRef = el }, index.h("div", { key: 'bf69ecafa7d59d776d38c55df10fa25d84d2152a', class: "accordion-content" }, index.h("slot", { key: 'bcb928fd4551e65b9e286770979e2e67ff9fb1aa' })))));
+        return (index.h("div", { key: 'af11e06f8e10d85d6dffdbcb639479ce7095ed6e', class: { 'accordion': true, 'accordion--open': this.open, 'accordion--disabled': this.disabled } }, index.h("button", { key: '5c3e5303dc6e5a37dece808559dcf6a8c6245980', class: "accordion-header", onClick: () => this.handleToggle(), "aria-expanded": String(this.open), disabled: this.disabled }, index.h("span", { key: '062be2726403e5b9d90694555317db406c70d93f', class: "accordion-header-left" }, this.preIcon && index.h("dropi-icon", { key: 'c626c98aaab3074cdf754460d5eff45739683404', name: this.preIcon, width: "20px", height: "20px", color: "Gray-Gray-600" }), index.h("span", { key: '3143e043a462df9e2b794fd2ff608ab910972a54', class: "accordion-title" }, this.header)), index.h("span", { key: '3ffd80e303fa17582b57a0778b2bc610c6dff899', class: { 'accordion-chevron': true, 'accordion-chevron--open': this.open } }, index.h("dropi-icon", { key: 'b353a6cbfbd3b51d408ced11c29eeb8a8cded9a6', name: "Dropdown-down", width: "20px", height: "20px", color: "Gray-Gray-500" }))), index.h("div", { key: '0754969bc5483586224ddb3774f65328dd8cd3cb', class: "accordion-body", style: { maxHeight: this.contentHeight }, ref: (el) => this.contentRef = el }, index.h("div", { key: '96e87adb7ca8de258541be0d4626ba9ce09e1f97', class: "accordion-content" }, index.h("slot", { key: '5b82c186bc11b7e9e5a714217454c0c6058be5cf' })))));
     }
     static get watchers() { return {
         "open": [{

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

@@ -0,0 +1,58 @@
+'use strict';
+
+var index = require('./index-B6R6Ojma.js');
+
+const dropiAlertCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.alert{display:flex;align-items:flex-start;gap:var(--Size-2, 8px);padding:var(--Size-3, 12px) var(--Size-4, 16px);border-radius:var(--Border-2, 8px);border:1px solid transparent;width:100%;animation:fadeIn 0.3s ease-in-out}@keyframes fadeIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.alert--success{background:var(--Success-Success-50, #f0fdf4);border-color:var(--Success-Success-200, #bbf7d0)}.alert--error{background:var(--Error-Error-50, #fff5f5);border-color:var(--Error-Error-200, #fecaca)}.alert--warning{background:var(--Warning-Warning-50, #fffbeb);border-color:var(--Warning-Warning-200, #fde68a)}.alert--info{background:var(--Info-Info-50, #eff6ff);border-color:var(--Info-Info-200, #bfdbfe)}.alert--flag{border-left-width:4px;border-radius:0 var(--Border-2, 8px) var(--Border-2, 8px) 0}.alert__icon{display:flex;align-items:center;flex-shrink:0;padding-top:1px}.alert__body{flex:1;display:flex;flex-wrap:wrap;align-items:center;gap:var(--Size-1, 4px)}.alert__message{font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-700, #32394d);line-height:1.5}.alert__link{font-size:var(--font-size-s, 12px);font-weight:var(--font-weight-bold, 700);color:var(--Primary-Primary-500, #f49a3d);text-decoration:underline;cursor:pointer}.alert__actions{display:flex;align-items:center;gap:var(--Size-2, 8px);flex-shrink:0}.alert__btn{height:28px;padding:0 var(--Size-3, 12px);border-radius:var(--Border-2, 8px);border:1px solid var(--Primary-Primary-500, #f49a3d);background:transparent;color:var(--Primary-Primary-500, #f49a3d);font-size:var(--font-size-xs, 10px);font-family:inherit;font-weight:var(--font-weight-bold, 700);cursor:pointer;transition:background 0.15s, color 0.15s}.alert__btn:hover{background:var(--Primary-Primary-500, #f49a3d);color:var(--Neutral-White, #fff)}.alert__close{display:flex;align-items:center;justify-content:center;background:none;border:none;padding:0;cursor:pointer;opacity:0.6;transition:opacity 0.15s}.alert__close:hover{opacity:1}`;
+
+const STATE_ICONS = {
+    success: 'Check-circle',
+    error: 'Warning-circle',
+    warning: 'Warning-triangle',
+    info: 'Info-circle',
+};
+const STATE_COLORS = {
+    success: 'Success-Success-500',
+    error: 'Error-Error-500',
+    warning: 'Warning-Warning-500',
+    info: 'Info-Info-500',
+};
+const DropiAlert = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.dropiClose = index.createEvent(this, "dropiClose");
+        this.dropiButtonClick = index.createEvent(this, "dropiButtonClick");
+        this.dropiLinkClick = index.createEvent(this, "dropiLinkClick");
+    }
+    /** Alert message text (supports plain text) */
+    message = '';
+    /** Layout type: default (inline) | flag (accented left border) */
+    type = 'default';
+    /** Semantic state */
+    state = 'info';
+    /** Show the × close button */
+    dismissable = false;
+    /** Show action button */
+    showButton = false;
+    /** Action button label */
+    buttonText = '';
+    /** Anchor/link label */
+    anchorText = '';
+    /** Anchor href */
+    anchorUrl = '';
+    /** Whether the alert is visible */
+    showAlert = true;
+    /** Emitted when the alert is dismissed */
+    dropiClose;
+    /** Emitted when the action button is clicked */
+    dropiButtonClick;
+    /** Emitted when the anchor link is clicked */
+    dropiLinkClick;
+    render() {
+        if (!this.showAlert)
+            return null;
+        return (index.h("div", { class: { 'alert': true, [`alert--${this.type}`]: true, [`alert--${this.state}`]: true } }, index.h("div", { class: "alert__icon" }, index.h("dropi-icon", { name: STATE_ICONS[this.state], width: "18px", height: "18px", color: STATE_COLORS[this.state] })), index.h("div", { class: "alert__body" }, index.h("span", { class: "alert__message" }, this.message), this.anchorText && (index.h("a", { class: "alert__link", href: this.anchorUrl || '#', onClick: (e) => { e.preventDefault(); this.dropiLinkClick.emit(); } }, this.anchorText))), index.h("div", { class: "alert__actions" }, this.showButton && this.buttonText && (index.h("button", { class: "alert__btn", onClick: () => this.dropiButtonClick.emit() }, this.buttonText)), this.dismissable && (index.h("button", { class: "alert__close", onClick: () => { this.showAlert = false; this.dropiClose.emit(); }, "aria-label": "Cerrar" }, index.h("dropi-icon", { name: "Close-small", width: "18px", height: "18px", color: "Gray-Gray-500" }))))));
+    }
+};
+DropiAlert.style = dropiAlertCss();
+
+exports.dropi_alert = DropiAlert;

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

@@ -0,0 +1,31 @@
+'use strict';
+
+var index = require('./index-B6R6Ojma.js');
+
+const dropiAvatarsCss = () => `:host{display:inline-block}.avatar{margin:0;padding:0;display:flex;align-items:center;justify-content:center;border-radius:50%;overflow:hidden;flex-shrink:0}.avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}.avatar--users,.avatar--transport,.avatar--payment{width:35px;height:35px}.avatar--supplier{width:70px;height:70px}.avatar--counter{width:33px;height:33px}.avatar__initials{display:flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:50%;background-color:var(--Primary-Primary-100, #fde9d0);color:var(--Primary-Primary-600, #d4872e);font-size:var(--font-size-xs, 10px);font-weight:var(--font-weight-bold, 700);text-transform:uppercase;letter-spacing:0.5px}`;
+
+const FALLBACK = `data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzNiAzNiI+PGNpcmNsZSBjeD0iMTgiIGN5PSIxOCIgcj0iMTgiIGZpbGw9IiNlNmVhZjIiLz48Y2lyY2xlIGN4PSIxOCIgY3k9IjE0IiByPSI2IiBmaWxsPSIjODU4ZWE2Ii8+PHBhdGggZD0iTTYgMzJjMC04IDI0LTggMjQgMCIgZmlsbD0iIzg1OGVhNiIvPjwvc3ZnPg==`;
+const DropiAvatars = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    /** Image URL */
+    image = '';
+    /** Alt text for the image */
+    alt = 'avatar';
+    /** Size/context variant */
+    type = 'users';
+    /** Initials to show when no image (max 2 chars) */
+    initials = '';
+    handleError(e) {
+        e.target.src = FALLBACK;
+    }
+    render() {
+        const displayInitials = this.initials?.slice(0, 2).toUpperCase();
+        const showInitials = !this.image && displayInitials;
+        return (index.h("figure", { key: '5bce853f6d1d17dcad603cf103d6de09ae612147', class: { 'avatar': true, [`avatar--${this.type}`]: true } }, showInitials ? (index.h("div", { class: "avatar__initials" }, displayInitials)) : (index.h("img", { src: this.image || FALLBACK, alt: this.alt, onError: (e) => this.handleError(e) }))));
+    }
+};
+DropiAvatars.style = dropiAvatarsCss();
+
+exports.dropi_avatars = DropiAvatars;

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

@@ -29,7 +29,7 @@ const DropiBadge = class {
         return null;
     }
     render() {
-        return (index.h("div", { key: 'b66590d82d7dd760badcfb76c72eb3d589073721', class: `tag-state ${this.state}` }, this.renderIcon(), index.h("p", { key: '82ae7072f3ac6d96ed02db8289f0f98f070a882d' }, this.stateText[this.state])));
+        return (index.h("div", { key: '7a043420848f083d161765c16da41dc1f7c38065', class: `tag-state ${this.state}` }, this.renderIcon(), index.h("p", { key: '4227bf47f3169673f44b62bde46498e3c8d607cd' }, this.stateText[this.state])));
     }
 };
 DropiBadge.style = dropiBadgeCss();

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

@@ -66,14 +66,14 @@ const DropiButton = class {
         const hasText = this.text !== '';
         const showPostIcon = this.postIcon !== '' || this.type === 'dropdown';
         const dropdownIcon = this.type === 'dropdown' ? 'Dropdown-down' : this.postIcon;
-        return (index.h("button", { key: '6cde7f2616d1cff9e3304481f2a0c38aabc34192', class: {
+        return (index.h("button", { key: '893717e317f10193bfa723d65607fc79e5875309', class: {
                 btn: true,
                 'without-text': !hasText,
                 [this.severity]: true,
                 [this.type]: true,
                 [this.size]: true,
                 [this.state]: true,
-            }, disabled: isDisabled, onClick: (e) => this.handleClick(e) }, this.preIcon && (index.h("dropi-icon", { key: '769cea8fce2947552462aa2cbbb09d64df952c76', name: this.preIcon, width: this.iconSize, height: this.iconSize, color: this.fontColor })), hasText && index.h("span", { key: 'f66ad80283d54f643cf37ea702145127b90d4ce4', class: "text" }, this.text), showPostIcon && (index.h("dropi-icon", { key: '4fd9c7d7d029c3316bc0492576cda0cca74fa460', name: dropdownIcon, width: this.iconSize, height: this.iconSize, color: this.fontColor })), this.state === 'loading' && this.renderLoadingSpinner(), index.h("slot", { key: '3280c56a28ea40016d35e186b9997635b8ba881b' })));
+            }, disabled: isDisabled, onClick: (e) => this.handleClick(e) }, this.preIcon && (index.h("dropi-icon", { key: '922e32f5466164279fdb9408502412d4246ee1f2', name: this.preIcon, width: this.iconSize, height: this.iconSize, color: this.fontColor })), hasText && index.h("span", { key: '9b8c506a5e4a791bde84d36e2991386ee2a3822f', class: "text" }, this.text), showPostIcon && (index.h("dropi-icon", { key: 'c1f66fba38426ff724450a806c99939ffaca0c75', name: dropdownIcon, width: this.iconSize, height: this.iconSize, color: this.fontColor })), this.state === 'loading' && this.renderLoadingSpinner(), index.h("slot", { key: 'af5cc164403ec0592f4740368784c343e38a0227' })));
     }
 };
 DropiButton.style = dropiButtonCss();

package/dist/cjs/dropi-card-section.cjs.entry.js

@@ -0,0 +1,38 @@
+'use strict';
+
+var index = require('./index-B6R6Ojma.js');
+
+const dropiCardSectionCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.card-section{display:flex;align-items:center;justify-content:space-between;gap:var(--Size-4, 16px);padding:var(--Size-3, 12px) var(--Size-4, 16px);background:var(--Neutral-White, #fff);border:1px solid var(--Gray-Gray-100, #e6eaf2);border-radius:var(--Border-2, 8px)}.card-section__text{flex:1}.card-section__title{margin:0 0 4px;font-family:inherit;font-weight:var(--font-weight-bold, 700);color:var(--Gray-Gray-800, #1a2033)}h5.card-section__title{font-size:var(--font-size-m, 14px)}h6.card-section__title{font-size:var(--font-size-s, 12px)}.card-section__desc{margin:0;font-size:var(--font-size-xs, 10px);color:var(--Gray-Gray-500, #69738c)}.card-section__control{flex-shrink:0}.card-section__dropdown-btn{display:flex;align-items:center;background:none;border:none;padding:0;cursor:pointer}`;
+
+const DropiCardSection = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.dropiChange = index.createEvent(this, "dropiChange");
+        this.dropiClick = index.createEvent(this, "dropiClick");
+    }
+    /** Section title */
+    sectionTitle = '';
+    /** Section description */
+    description = '';
+    /** Control type on the right */
+    typeElement = 'switch';
+    /** Title size variant */
+    type = 'medium';
+    /** Switch checked state */
+    isChecked = false;
+    /** Emitted when switch changes. e.detail = new boolean value */
+    dropiChange;
+    /** Emitted when dropdown icon is clicked */
+    dropiClick;
+    render() {
+        return (index.h("div", { key: '5820426132998a0fcc95ec9bc5626044809bc8f9', class: "card-section" }, index.h("div", { key: '56023483c0be283b4e8b71bdb8ab91c3bbe0e518', class: "card-section__text" }, this.type === 'important'
+            ? index.h("h5", { class: "card-section__title card-section__title--important" }, this.sectionTitle)
+            : index.h("h6", { class: "card-section__title" }, this.sectionTitle), this.description && index.h("p", { key: '123f616e6404040a052c8e3313ea74368ef1564e', class: "card-section__desc" }, this.description)), index.h("div", { key: '70d91f09bfe12b561a0457d6b1c531e04c697119', class: "card-section__control" }, this.typeElement === 'switch' ? (index.h("dropi-switch", { isChecked: this.isChecked, onDropiChange: (e) => {
+                this.isChecked = e.detail;
+                this.dropiChange.emit(e.detail);
+            } })) : (index.h("button", { class: "card-section__dropdown-btn", onClick: () => this.dropiClick.emit(), "aria-label": "Expandir" }, index.h("dropi-icon", { name: "Dropdown-down", width: "20px", height: "20px", color: "Gray-Gray-500" }))))));
+    }
+};
+DropiCardSection.style = dropiCardSectionCss();
+
+exports.dropi_card_section = DropiCardSection;

package/dist/cjs/dropi-checkbox-selection-list.cjs.entry.js

@@ -0,0 +1,71 @@
+'use strict';
+
+var index = require('./index-B6R6Ojma.js');
+
+const dropiCheckboxSelectionListCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.csl__search{display:flex;align-items:center;gap:var(--Size-2, 8px);padding:var(--Size-2, 8px) var(--Size-3, 12px);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);margin-bottom:var(--Size-2, 8px)}.csl__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}.csl__clear{display:flex;background:none;border:none;padding:0;cursor:pointer}.csl__list{display:flex;flex-direction:column}.csl__item{display:flex;align-items:center;gap:var(--Size-2, 8px);padding:var(--Size-2, 8px) var(--Size-3, 12px);cursor:pointer;border-radius:var(--Border-1, 4px);transition:background 0.15s}.csl__item:hover{background:var(--Gray-Gray-50, #f7f8fa)}.csl__icon{width:24px;height:24px;border-radius:50%;object-fit:cover;flex-shrink:0}.csl__label{font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-700, #32394d);flex:1}.csl__empty{padding:var(--Size-4, 16px);text-align:center;font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-400, #858ea6)}`;
+
+const DropiCheckboxSelectionList = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.dropiCheckedValues = index.createEvent(this, "dropiCheckedValues");
+        this.dropiSearch = index.createEvent(this, "dropiSearch");
+    }
+    /** Options array or JSON string */
+    options = [];
+    /** Show search filter */
+    showFilter = true;
+    /** Search placeholder */
+    filterPlaceholder = 'Buscar...';
+    /** Show "no results" message */
+    showNotFound = true;
+    /** Empty state message */
+    notFoundMessage = 'Sin resultados';
+    /** Allow multiple selection */
+    multiSelect = true;
+    filterText = '';
+    selected = [];
+    parsedOptions = [];
+    /** Emitted when selection changes. e.detail = selected option ids */
+    dropiCheckedValues;
+    /** Emitted on search input. e.detail = search text */
+    dropiSearch;
+    optionsChanged(val) {
+        this.parsedOptions = typeof val === 'string' ? JSON.parse(val) : (val || []);
+    }
+    componentWillLoad() { this.optionsChanged(this.options); }
+    get filtered() {
+        if (!this.filterText)
+            return this.parsedOptions;
+        const q = this.filterText.toLowerCase();
+        return this.parsedOptions.filter(o => o.name?.toLowerCase().includes(q));
+    }
+    toggle(id) {
+        if (this.multiSelect) {
+            this.selected = this.selected.includes(id)
+                ? this.selected.filter(s => s !== id)
+                : [...this.selected, id];
+        }
+        else {
+            this.selected = this.selected.includes(id) ? [] : [id];
+        }
+        this.dropiCheckedValues.emit(this.selected);
+    }
+    render() {
+        const items = this.filtered;
+        return (index.h("div", { key: '4606e983827d32c18990c44589c2cfcac678b0ae', class: "csl" }, this.showFilter && (index.h("div", { key: '532d95a9e0530023094611ce55b37f56eb6f9d78', class: "csl__search" }, index.h("dropi-icon", { key: '79598d6cb8b36f90e15d2983f8c3e54cb713d193', name: "Search", width: "16px", height: "16px", color: "Gray-Gray-400" }), index.h("input", { key: 'fa95ab8c1112e335560b8c49f7f4b502b3f7b3a0', class: "csl__search-input", type: "text", placeholder: this.filterPlaceholder, value: this.filterText, onInput: (e) => {
+                this.filterText = e.target.value;
+                this.dropiSearch.emit(this.filterText);
+            } }), this.filterText && (index.h("button", { key: '94574b93a5e1d938ebedd7f462e3aed6917390ef', class: "csl__clear", onClick: () => { this.filterText = ''; this.dropiSearch.emit(''); } }, index.h("dropi-icon", { key: 'c9765efda527f9321757a69028f9ceb7e12a7514', name: "Close-small", width: "14px", height: "14px", color: "Gray-Gray-400" }))))), index.h("div", { key: '2f40c32f10c84277924c240a12e89876ff60a4d2', class: "csl__list" }, items.length === 0 && this.showNotFound ? (index.h("div", { class: "csl__empty" }, this.notFoundMessage)) : (items.map(opt => {
+            const checked = this.selected.includes(opt.id);
+            return (index.h("div", { class: "csl__item", key: opt.id, onClick: () => this.toggle(opt.id) }, index.h("dropi-checkbox", { checked: checked }), opt.icon && index.h("img", { class: "csl__icon", src: opt.icon, alt: opt.name }), index.h("span", { class: "csl__label" }, opt.name)));
+        })))));
+    }
+    static get watchers() { return {
+        "options": [{
+                "optionsChanged": 0
+            }]
+    }; }
+};
+DropiCheckboxSelectionList.style = dropiCheckboxSelectionListCss();
+
+exports.dropi_checkbox_selection_list = DropiCheckboxSelectionList;

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

@@ -22,12 +22,12 @@ const DropiCheckbox = class {
         this.dropiChange.emit(this.checked);
     }
     render() {
-        return (index.h("div", { key: 'f37dba8ec47aec07302f0b6f52d402b4367aa8da', class: "container-dropi-checkbox", onClick: () => this.changeState() }, index.h("div", { key: '21c72608204b4384de76720192542763c8190b27', class: {
+        return (index.h("div", { key: '4e56a55cec60e55f61205e370845f734b5baedcc', class: "container-dropi-checkbox", onClick: () => this.changeState() }, index.h("div", { key: 'dd440f791d8fa5dd3fd7e8a00054c2d0fe337961', class: {
                 check: true,
                 isCheck: this.checked,
                 noCheck: !this.checked,
                 disabled: this.disabled,
-            } }, index.h("svg", { key: '06881031251120f3942fc938e7c0ffad5dde7494', xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 24 24", fill: "none" }, index.h("path", { key: 'dd52bac77eca77270cfd645f02fb06a39a7cf519', d: "M20.5991 5.69251L9.08325 17.2075C9.00583 17.2852 8.91382 17.3469 8.8125 17.389C8.71118 17.4311 8.60255 17.4527 8.49283 17.4527C8.38312 17.4527 8.27449 17.4311 8.17317 17.389C8.07185 17.3469 7.97984 17.2852 7.90242 17.2075L3.44908 12.75C3.37166 12.6723 3.27965 12.6106 3.17833 12.5685C3.07701 12.5264 2.96838 12.5048 2.85867 12.5048C2.74896 12.5048 2.64032 12.5264 2.53901 12.5685C2.43769 12.6106 2.34568 12.6723 2.26825 12.75C2.19052 12.8274 2.12884 12.9194 2.08676 13.0208C2.04467 13.1221 2.02301 13.2307 2.02301 13.3404C2.02301 13.4501 2.04467 13.5588 2.08676 13.6601C2.12884 13.7614 2.19052 13.8534 2.26825 13.9308L6.72325 18.385C7.19321 18.8541 7.83008 19.1175 8.49408 19.1175C9.15809 19.1175 9.79496 18.8541 10.2649 18.385L21.7799 6.87251C21.8575 6.7951 21.9191 6.70314 21.9611 6.6019C22.0031 6.50065 22.0247 6.39212 22.0247 6.28251C22.0247 6.17289 22.0031 6.06436 21.9611 5.96312C21.9191 5.86188 21.8575 5.76992 21.7799 5.69251C21.7025 5.61478 21.6105 5.5531 21.5092 5.51101C21.4078 5.46893 21.2992 5.44727 21.1895 5.44727C21.0798 5.44727 20.9712 5.46893 20.8698 5.51101C20.7685 5.5531 20.6765 5.61478 20.5991 5.69251Z", fill: "#FFFFFF" })))));
+            } }, index.h("svg", { key: 'f7470772cd3f47777c0ade490de8772a4e0a2d43', xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 24 24", fill: "none" }, index.h("path", { key: 'ed529e987fe524339bb01ee0e95d838df962d0bc', d: "M20.5991 5.69251L9.08325 17.2075C9.00583 17.2852 8.91382 17.3469 8.8125 17.389C8.71118 17.4311 8.60255 17.4527 8.49283 17.4527C8.38312 17.4527 8.27449 17.4311 8.17317 17.389C8.07185 17.3469 7.97984 17.2852 7.90242 17.2075L3.44908 12.75C3.37166 12.6723 3.27965 12.6106 3.17833 12.5685C3.07701 12.5264 2.96838 12.5048 2.85867 12.5048C2.74896 12.5048 2.64032 12.5264 2.53901 12.5685C2.43769 12.6106 2.34568 12.6723 2.26825 12.75C2.19052 12.8274 2.12884 12.9194 2.08676 13.0208C2.04467 13.1221 2.02301 13.2307 2.02301 13.3404C2.02301 13.4501 2.04467 13.5588 2.08676 13.6601C2.12884 13.7614 2.19052 13.8534 2.26825 13.9308L6.72325 18.385C7.19321 18.8541 7.83008 19.1175 8.49408 19.1175C9.15809 19.1175 9.79496 18.8541 10.2649 18.385L21.7799 6.87251C21.8575 6.7951 21.9191 6.70314 21.9611 6.6019C22.0031 6.50065 22.0247 6.39212 22.0247 6.28251C22.0247 6.17289 22.0031 6.06436 21.9611 5.96312C21.9191 5.86188 21.8575 5.76992 21.7799 5.69251C21.7025 5.61478 21.6105 5.5531 21.5092 5.51101C21.4078 5.46893 21.2992 5.44727 21.1895 5.44727C21.0798 5.44727 20.9712 5.46893 20.8698 5.51101C20.7685 5.5531 20.6765 5.61478 20.5991 5.69251Z", fill: "#FFFFFF" })))));
     }
     static get formAssociated() { return true; }
 };

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

@@ -0,0 +1,30 @@
+'use strict';
+
+var index = require('./index-B6R6Ojma.js');
+
+const dropiChipsCss = () => `:host{display:inline-flex}*,*::before,*::after{box-sizing:border-box}.chip{display:inline-flex;align-items:center;gap:var(--Size-1, 4px);height:24px;padding:0 var(--Size-2, 8px);border-radius:var(--Border-2, 8px);font-size:var(--font-size-xs, 10px);font-family:inherit;max-width:200px}.chip--filters{background:var(--Primary-Primary-50, #fff5eb);border:1px solid var(--Primary-Primary-200, #fbd4a3);color:var(--Primary-Primary-600, #d4872e)}.chip--fill{background:var(--Gray-Gray-100, #e6eaf2);border:1px solid transparent;color:var(--Gray-Gray-700, #32394d)}.chip__avatar{width:16px;height:16px;border-radius:50%;object-fit:cover;flex-shrink:0}.chip__text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}.chip__close{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;background:none;border:none;padding:0;cursor:pointer;color:inherit;opacity:0.7;transition:opacity 0.15s}.chip__close:hover{opacity:1}`;
+
+const DropiChips = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.dropiClose = index.createEvent(this, "dropiClose");
+    }
+    /** Visual style */
+    chipStyle = 'filters';
+    /** Content type */
+    type = 'text';
+    /** Avatar image URL (when type = 'avatar') */
+    urlImg = '';
+    /** Show the close/remove icon */
+    showIcon = true;
+    /** Icon name (when type = 'icon') */
+    icon = '';
+    /** Emitted when the close icon is clicked */
+    dropiClose;
+    render() {
+        return (index.h("div", { key: '06d0ac1f96349389f1513b59a1f84dbff9864169', class: { 'chip': true, [`chip--${this.chipStyle}`]: true } }, this.type === 'avatar' && this.urlImg && (index.h("img", { key: '38bc54471c0cf6dc7a25cccaba0764573d5d43e1', class: "chip__avatar", src: this.urlImg, alt: "" })), this.type === 'icon' && this.icon && (index.h("dropi-icon", { key: '908f3b217b425f6a3c9bf242a94110b742ca34b3', class: "chip__pre-icon", name: this.icon, width: "14px", height: "14px", color: "currentColor" })), index.h("span", { key: 'cb76f76056e6a28cfc497f2fabece2c95d6b9a60', class: "chip__text" }, index.h("slot", { key: '4d3aade9d8408d2b5b627c43754a9cfafd44b941' })), this.showIcon && (index.h("button", { key: 'fbb30fa90841e499d21c928c4a319724def58bb2', class: "chip__close", onClick: () => this.dropiClose.emit(), "aria-label": "Eliminar" }, index.h("dropi-icon", { key: 'f11c820069c550fa7ee3a143c3c6f29d338041c8', name: "Close-small", width: "14px", height: "14px", color: "currentColor" })))));
+    }
+};
+DropiChips.style = dropiChipsCss();
+
+exports.dropi_chips = DropiChips;

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

@@ -0,0 +1,58 @@
+'use strict';
+
+var index = require('./index-B6R6Ojma.js');
+
+const dropiDropdownCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.dropdown{display:flex;flex-direction:column;overflow-y:auto;max-height:var(--dropdown-height, 300px);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #fff)}.dropdown__item{display:flex;align-items:center;gap:var(--Size-2, 8px);padding:var(--Size-2, 8px) var(--Size-3, 12px);cursor:pointer;transition:background 0.15s;user-select:none}.dropdown__item:hover{background:var(--Gray-Gray-50, #f7f8fa)}.dropdown__item--active{background:var(--Primary-Primary-50, #fff5eb)}.dropdown__avatar{width:28px;height:28px;border-radius:50%;object-fit:cover;flex-shrink:0}.dropdown__label{flex:1;font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-700, #32394d);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}`;
+
+const DropiDropdown = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.dropiChange = index.createEvent(this, "dropiChange");
+    }
+    /** Options array or JSON string */
+    options = [];
+    /** Property name to display as the option label */
+    valueModel = 'name';
+    /** Property name to use as the option image/avatar URL */
+    imageModel = '';
+    /** Max height of the list container (CSS value) */
+    height = '300px';
+    selected = [];
+    parsedOptions = [];
+    /** Emitted when selection changes. e.detail = selected items array */
+    dropiChange;
+    optionsChanged(val) {
+        this.parsedOptions = typeof val === 'string' ? JSON.parse(val) : (val || []);
+    }
+    componentWillLoad() {
+        this.optionsChanged(this.options);
+    }
+    isSelected(opt) {
+        return this.selected.some(s => JSON.stringify(s) === JSON.stringify(opt));
+    }
+    toggleOption(opt) {
+        if (this.isSelected(opt)) {
+            this.selected = this.selected.filter(s => JSON.stringify(s) !== JSON.stringify(opt));
+        }
+        else {
+            this.selected = [...this.selected, opt];
+        }
+        this.dropiChange.emit(this.selected);
+    }
+    render() {
+        return (index.h("div", { key: 'e9b2fe1b667a4d83c0d142ff9ba8187d848f606d', class: "dropdown", style: { '--dropdown-height': this.height } }, this.parsedOptions.map((opt, i) => {
+            const label = opt[this.valueModel] ?? String(opt);
+            const imgUrl = this.imageModel ? opt[this.imageModel] : '';
+            const active = this.isSelected(opt);
+            return (index.h("div", { class: { 'dropdown__item': true, 'dropdown__item--active': active }, key: i, onClick: () => this.toggleOption(opt) }, index.h("dropi-checkbox", { checked: active }), imgUrl && (index.h("img", { class: "dropdown__avatar", src: imgUrl, alt: label })), index.h("span", { class: "dropdown__label" }, label)));
+        })));
+    }
+    static get watchers() { return {
+        "options": [{
+                "optionsChanged": 0
+            }]
+    }; }
+};
+DropiDropdown.style = dropiDropdownCss();
+
+exports.dropi_dropdown = DropiDropdown;

package/dist/cjs/dropi-empty-state.cjs.entry.js

@@ -27,7 +27,7 @@ const DropiEmptyState = class {
     /** Emitted when secondary action button is clicked */
     dropiSecondaryAction;
     render() {
-        return (index.h("div", { key: '1aea01715d0e50b308904d496be7bc2f607bf5aa', class: "empty-state" }, this.imageUrl ? (index.h("img", { class: "empty-state-img", src: this.imageUrl, alt: this.imageAlt })) : (index.h("div", { class: "empty-state-placeholder" }, index.h("svg", { viewBox: "0 0 80 80", fill: "none", xmlns: "http://www.w3.org/2000/svg", class: "empty-state-svg" }, index.h("rect", { width: "80", height: "80", rx: "40", fill: "var(--Gray-Gray-100, #e6eaf2)" }), index.h("path", { d: "M40 20C29 20 20 29 20 40s9 20 20 20 20-9 20-20S51 20 40 20zm0 36c-8.8 0-16-7.2-16-16S31.2 24 40 24s16 7.2 16 16-7.2 16-16 16zm-1-28h2v12h-2zm0 14h2v2h-2z", fill: "var(--Gray-Gray-400, #858ea6)" })))), this.header && index.h("h3", { key: '41e5da8d482456f4b9006449a27a9f9d172d87b4', class: "empty-state-title" }, this.header), this.description && index.h("p", { key: 'ffa6399489ec56cd2cf84bb39d12c112bee64302', class: "empty-state-description" }, this.description), index.h("slot", { key: '6ccdfed94a22ad7ece2388fba3d4734aa6a2b509' }), (this.actionLabel || this.secondaryLabel) && (index.h("div", { key: '0da97fd516eccd1cabe846b2d002fdf75306674d', class: "empty-state-actions" }, this.secondaryLabel && (index.h("dropi-button", { key: 'de1b1ad4d6a50cfd251de243a3b5ea3beb10019b', text: this.secondaryLabel, severity: "secondary", onDropiClick: () => this.dropiSecondaryAction.emit() })), this.actionLabel && (index.h("dropi-button", { key: '59f3b47ee14f3ac89aa4acc5b42d856f26d02d19', text: this.actionLabel, severity: "primary", onDropiClick: () => this.dropiAction.emit() }))))));
+        return (index.h("div", { key: '7c393f2a56387d573162068576809a6f6a975a34', class: "empty-state" }, this.imageUrl ? (index.h("img", { class: "empty-state-img", src: this.imageUrl, alt: this.imageAlt })) : (index.h("div", { class: "empty-state-placeholder" }, index.h("svg", { viewBox: "0 0 80 80", fill: "none", xmlns: "http://www.w3.org/2000/svg", class: "empty-state-svg" }, index.h("rect", { width: "80", height: "80", rx: "40", fill: "var(--Gray-Gray-100, #e6eaf2)" }), index.h("path", { d: "M40 20C29 20 20 29 20 40s9 20 20 20 20-9 20-20S51 20 40 20zm0 36c-8.8 0-16-7.2-16-16S31.2 24 40 24s16 7.2 16 16-7.2 16-16 16zm-1-28h2v12h-2zm0 14h2v2h-2z", fill: "var(--Gray-Gray-400, #858ea6)" })))), this.header && index.h("h3", { key: 'd1fbe8d995e295cb4a72064745e7b521b35bbad6', class: "empty-state-title" }, this.header), this.description && index.h("p", { key: '948e6bcb6e07fab09261e6f68d658bf1faf17c8e', class: "empty-state-description" }, this.description), index.h("slot", { key: '8663d0a1e2df4ee914a25a0bda27e5f2ee41a941' }), (this.actionLabel || this.secondaryLabel) && (index.h("div", { key: 'af582b6316e8ebf2700589b55deef1fe8fbf08f2', class: "empty-state-actions" }, this.secondaryLabel && (index.h("dropi-button", { key: '1e69d9a9143708157a20dba1179498bd01203af2', text: this.secondaryLabel, severity: "secondary", onDropiClick: () => this.dropiSecondaryAction.emit() })), this.actionLabel && (index.h("dropi-button", { key: '3850ddf4716b2732bb21ee9fa731e90022b2ecd2', text: this.actionLabel, severity: "primary", onDropiClick: () => this.dropiAction.emit() }))))));
     }
 };
 DropiEmptyState.style = dropiEmptyStateCss();

package/dist/cjs/dropi-favorite-button.cjs.entry.js

@@ -0,0 +1,27 @@
+'use strict';
+
+var index = require('./index-B6R6Ojma.js');
+
+const dropiFavoriteButtonCss = () => `:host{display:inline-flex}.fav-btn{display:flex;align-items:center;justify-content:center;width:37px;height:37px;border-radius:8px;border:1px solid var(--Gray-Gray-200);background:var(--Neutral-White);cursor:pointer;transition:all 0.2s ease-in-out}.fav-btn:hover,.fav-btn--active{background:var(--Gray-Gray-50)}.fav-btn:active{transform:scale(0.95)}`;
+
+const DropiFavoriteButton = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.dropiToggleFavorite = index.createEvent(this, "dropiToggleFavorite");
+    }
+    /** Whether the item is currently marked as favorite */
+    isFavorite = false;
+    /** Emitted when toggled. e.detail = new favorite state */
+    dropiToggleFavorite;
+    hovered = false;
+    toggle() {
+        this.isFavorite = !this.isFavorite;
+        this.dropiToggleFavorite.emit(this.isFavorite);
+    }
+    render() {
+        return (index.h("button", { key: '3920b723683dc337ebe5aedc473414c9ed27a593', class: { 'fav-btn': true, 'fav-btn--active': this.isFavorite }, onClick: () => this.toggle(), onMouseEnter: () => this.hovered = true, onMouseLeave: () => this.hovered = false, "aria-label": this.isFavorite ? 'Quitar de favoritos' : 'Agregar a favoritos', "aria-pressed": String(this.isFavorite) }, index.h("dropi-icon", { key: '60748aaafd0a183e175fd84c5d44313a0254ed5e', name: this.isFavorite || this.hovered ? 'Heart-solid' : 'Heart', width: "19px", height: "19px", color: this.isFavorite || this.hovered ? 'Primary-Primary-500' : 'Gray-Gray-800' })));
+    }
+};
+DropiFavoriteButton.style = dropiFavoriteButtonCss();
+
+exports.dropi_favorite_button = DropiFavoriteButton;

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

@@ -37,7 +37,7 @@ const DropiIcon = class {
         this.el.style.setProperty('--icon-fill', fill);
     }
     render() {
-        return (index.h("svg", { key: '2bcb456155fc78c9602c5e34bc8f70d0d44bd050', width: this.width, height: this.height, class: { spin: this.name === 'Spinner' }, "aria-hidden": "true" }, index.h("use", { key: '92aa54406161cfdf5deda5f42a83e06480eb6208', href: `/assets/icons/symbol/svg/sprite.css.svg#${this.name}` })));
+        return (index.h("svg", { key: 'd92e0c9deb01962dfb172ae25af4f1236647e24c', width: this.width, height: this.height, class: { spin: this.name === 'Spinner' }, "aria-hidden": "true" }, index.h("use", { key: '76be21d4bcbb2a5409e0c784cd17c6ca3cd243f6', href: `/assets/icons/symbol/svg/sprite.css.svg#${this.name}` })));
     }
     static get watchers() { return {
         "color": [{

package/dist/cjs/dropi-image-miniature.cjs.entry.js

@@ -0,0 +1,44 @@
+'use strict';
+
+var index = require('./index-B6R6Ojma.js');
+
+const dropiImageMiniatureCss = () => `:host{display:block}*,*::before,*::after{box-sizing:border-box}.miniature__label{display:block;font-size:var(--font-size-xs, 10px);color:var(--Gray-Gray-600, #475066);margin-bottom:var(--Size-2, 8px)}.miniature__grid{display:flex;flex-wrap:wrap;gap:var(--Size-2, 8px)}.miniature__item{position:relative;border-radius:var(--Border-2, 8px);overflow:hidden;cursor:pointer;flex-shrink:0}.miniature__item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 0.2s}.miniature__zoom{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.35);opacity:0;transition:opacity 0.2s}.miniature__item:hover img{transform:scale(1.05)}.miniature__item:hover .miniature__zoom{opacity:1}`;
+
+const DropiImageMiniature = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.dropiImageClick = index.createEvent(this, "dropiImageClick");
+    }
+    /** Optional label above the grid */
+    label = '';
+    /** Array of image URLs. Pass as JSON string or array */
+    images = [];
+    /** Thumbnail width (CSS value) */
+    width = '88px';
+    /** Thumbnail height (CSS value) */
+    height = '88px';
+    /** Emitted when a thumbnail is clicked. e.detail = { images, index } */
+    dropiImageClick;
+    get parsedImages() {
+        if (typeof this.images === 'string') {
+            try {
+                return JSON.parse(this.images);
+            }
+            catch {
+                return [];
+            }
+        }
+        return this.images || [];
+    }
+    handleError(e) {
+        e.target.src =
+            `data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA4OCA4OCI+PHJlY3Qgd2lkdGg9Ijg4IiBoZWlnaHQ9Ijg4IiBmaWxsPSIjZjdmOGZhIi8+PHRleHQgeD0iNDQiIHk9IjQ4IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmaWxsPSIjYzNjOWQ5IiBmb250LXNpemU9IjEyIj5TaW4gaW1hZ2VuPC90ZXh0Pjwvc3ZnPg==`;
+    }
+    render() {
+        const imgs = this.parsedImages;
+        return (index.h("div", { key: '5182a02b3f7da5b1440230c87c8661f5f33bb7be', class: "miniature" }, this.label && index.h("span", { key: 'bf649e5c27972799d600df583c0953938a1cacad', class: "miniature__label" }, this.label), index.h("div", { key: '7197ca2d4bbf5d65db4ca71addcf352045734d94', class: "miniature__grid" }, imgs.map((src, i) => (index.h("div", { class: "miniature__item", style: { width: this.width, height: this.height }, key: i, onClick: () => this.dropiImageClick.emit({ images: imgs, index: i }) }, index.h("img", { src: src, alt: `imagen ${i + 1}`, loading: "lazy", onError: (e) => this.handleError(e) }), index.h("div", { class: "miniature__zoom" }, index.h("dropi-icon", { name: "Search", width: "16px", height: "16px", color: "Neutral-White" }))))))));
+    }
+};
+DropiImageMiniature.style = dropiImageMiniatureCss();
+
+exports.dropi_image_miniature = DropiImageMiniature;

package/dist/cjs/dropi-image-overlay.cjs.entry.js

@@ -0,0 +1,62 @@
+'use strict';
+
+var index = require('./index-B6R6Ojma.js');
+
+const dropiImageOverlayCss = () => `:host{display:block}.overlay{position:fixed;inset:0;background:rgba(0,0,0,0.92);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:9999;gap:var(--Size-3, 12px)}.overlay__close{position:absolute;top:var(--Size-4, 16px);right:var(--Size-4, 16px);background:rgba(255,255,255,0.1);border:none;border-radius:50%;width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background 0.15s}.overlay__close:hover{background:rgba(255,255,255,0.2)}.overlay__main{position:relative;display:flex;align-items:center;gap:var(--Size-3, 12px);max-width:90vw;max-height:75vh}.overlay__image{max-width:80vw;max-height:72vh;object-fit:contain;border-radius:var(--Border-2, 8px)}.overlay__nav{background:rgba(255,255,255,0.1);border:none;border-radius:50%;width:44px;height:44px;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:background 0.15s}.overlay__nav:hover{background:rgba(255,255,255,0.2)}.overlay__thumbs{display:flex;gap:var(--Size-2, 8px);flex-wrap:wrap;justify-content:center;max-width:90vw}.overlay__thumb{width:56px;height:56px;object-fit:cover;border-radius:var(--Border-1, 4px);cursor:pointer;opacity:0.5;border:2px solid transparent;transition:opacity 0.15s, border-color 0.15s}.overlay__thumb:hover{opacity:0.8}.overlay__thumb--active{opacity:1;border-color:var(--Primary-Primary-500, #f49a3d)}`;
+
+const DropiImageOverlay = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.dropiClose = index.createEvent(this, "dropiClose");
+    }
+    /** Whether the overlay is visible */
+    visible = false;
+    /** Images array or JSON string */
+    images = [];
+    /** Initially active image index */
+    activeIndex = 0;
+    current = 0;
+    parsedImages = [];
+    /** Emitted when overlay closes */
+    dropiClose;
+    imagesChanged(val) {
+        this.parsedImages = typeof val === 'string' ? JSON.parse(val) : (val || []);
+    }
+    indexChanged(val) { this.current = val; }
+    visibleChanged(val) {
+        if (val)
+            this.current = this.activeIndex;
+    }
+    componentWillLoad() {
+        this.imagesChanged(this.images);
+        this.current = this.activeIndex;
+    }
+    close() { this.visible = false; this.dropiClose.emit(); }
+    prev() { this.current = (this.current - 1 + this.parsedImages.length) % this.parsedImages.length; }
+    next() { this.current = (this.current + 1) % this.parsedImages.length; }
+    handleError(e) {
+        e.target.src =
+            `data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MDAgMzAwIj48cmVjdCB3aWR0aD0iNDAwIiBoZWlnaHQ9IjMwMCIgZmlsbD0iIzFhMjAzMyIvPjx0ZXh0IHg9IjIwMCIgeT0iMTU1IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmaWxsPSIjNDc1MDY2IiBmb250LXNpemU9IjE0Ij5TaW4gaW1hZ2VuPC90ZXh0Pjwvc3ZnPg==`;
+    }
+    render() {
+        if (!this.visible)
+            return null;
+        const imgs = this.parsedImages;
+        const multi = imgs.length > 1;
+        return (index.h("div", { class: "overlay", onClick: () => this.close() }, index.h("button", { class: "overlay__close", onClick: (e) => { e.stopPropagation(); this.close(); }, "aria-label": "Cerrar" }, index.h("dropi-icon", { name: "Close-small", width: "24px", height: "24px", color: "Neutral-White" })), index.h("div", { class: "overlay__main", onClick: (e) => e.stopPropagation() }, multi && (index.h("button", { class: "overlay__nav overlay__nav--prev", onClick: () => this.prev(), "aria-label": "Anterior" }, index.h("dropi-icon", { name: "Dropdown-left", width: "24px", height: "24px", color: "Neutral-White" }))), index.h("img", { class: "overlay__image", src: imgs[this.current], alt: `imagen ${this.current + 1}`, onError: (e) => this.handleError(e) }), multi && (index.h("button", { class: "overlay__nav overlay__nav--next", onClick: () => this.next(), "aria-label": "Siguiente" }, index.h("dropi-icon", { name: "Dropdown-Right", width: "24px", height: "24px", color: "Neutral-White" })))), multi && (index.h("div", { class: "overlay__thumbs", onClick: (e) => e.stopPropagation() }, imgs.map((src, i) => (index.h("img", { key: i, class: { 'overlay__thumb': true, 'overlay__thumb--active': i === this.current }, src: src, alt: `miniatura ${i + 1}`, onClick: () => this.current = i, onError: (e) => this.handleError(e) })))))));
+    }
+    static get watchers() { return {
+        "images": [{
+                "imagesChanged": 0
+            }],
+        "activeIndex": [{
+                "indexChanged": 0
+            }],
+        "visible": [{
+                "visibleChanged": 0
+            }]
+    }; }
+};
+DropiImageOverlay.style = dropiImageOverlayCss();
+
+exports.dropi_image_overlay = DropiImageOverlay;

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

@@ -2,7 +2,7 @@
 
 var index = require('./index-B6R6Ojma.js');
 
-const dropiInputCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.fixed-label-container{display:flex;width:100%;flex-direction:column;align-items:flex-start;gap:8px}.input-label{color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-xs, 10px);font-weight:var(--font-weight-regular, 400);text-align:left}.asterisk{color:var(--Error-Error-500, #f46a6b)}.form-group{position:relative;width:100%}.input-container{position:relative}.icon-input{position:absolute;top:10px;left:5px;z-index:1}.icon-input-password{position:absolute;top:10px;right:13px;cursor:pointer;z-index:1}.form-control{box-sizing:border-box;width:100%;padding:var(--Size-2, 8px);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #fff);font-size:var(--font-size-s, 12px);font-family:inherit;color:var(--Gray-Gray-700, #32394d);transition:border-color 0.3s ease-in-out;height:40px;outline:none;appearance:none;text-align:left}.form-control::placeholder{color:transparent;transition:color 0.2s ease-in-out}.form-control:focus::placeholder,.fixed-label-input::placeholder{color:var(--Gray-Gray-400, #858ea6)}.form-control:focus{border-color:var(--Info-Info-500, #50a5f1)}.form-control-valid{border-color:var(--Gray-Gray-400, #858ea6) !important;color:var(--Gray-Gray-600, #475066)}.form-control-invalid{border-color:var(--Error-Error-500, #f46a6b) !important;color:var(--Gray-Gray-600, #475066)}.form-control:disabled{border-color:var(--Gray-Gray-200, #c3c9d9) !important;color:var(--Gray-Gray-400, #858ea6);background-color:var(--Gray-Gray-50, #f7f8fa);cursor:not-allowed}.padding-icon{padding-left:28px}.text-password{-webkit-text-security:disc;text-security:disc}label.label-bottom{position:absolute;font-weight:var(--font-weight-regular, 400);top:10px;font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-500, #69738c);left:10px;transition:all 0.2s ease-in-out;pointer-events:none;overflow:hidden;width:90%;white-space:nowrap}.form-control:focus+label.label-bottom,.form-control:not(:placeholder-shown)+label.label-bottom{top:-22px;left:0;font-size:var(--font-size-xs, 10px);color:var(--Gray-Gray-600, #475066);width:unset}.form-control:disabled+label.label-bottom{color:var(--Gray-Gray-400, #858ea6)}.form-control-helper{display:flex;position:absolute;top:100%;left:0;gap:4px;align-items:center;margin-top:4px}.form-control-helper span{display:block;color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-xs, 10px)}.invalid-color{color:var(--Error-Error-500, #f46a6b) !important}.disabled-helper{color:var(--Gray-Gray-400, #858ea6) !important}.disabled-helper{color:var(--Gray-Gray-400, #858ea6) !important}`;
+const dropiInputCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.fixed-label-container{display:flex;width:100%;flex-direction:column;align-items:flex-start;gap:8px}.input-label{color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-xs, 10px);font-weight:var(--font-weight-regular, 400);text-align:left}.asterisk{color:var(--Error-Error-500, #f46a6b)}.form-group{position:relative;width:100%}.input-container{position:relative}.icon-input{position:absolute;top:10px;left:5px;z-index:1}.icon-input-password{position:absolute;top:10px;right:13px;cursor:pointer;z-index:1}.form-control{box-sizing:border-box;width:100%;padding:var(--Size-2, 8px);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #fff);font-size:var(--font-size-s, 12px);font-family:inherit;color:var(--Gray-Gray-700, #32394d);transition:border-color 0.3s ease-in-out;height:40px;outline:none;appearance:none;text-align:left}.form-control::placeholder{color:transparent;transition:color 0.2s ease-in-out}.form-control:focus::placeholder,.fixed-label-input::placeholder{color:var(--Gray-Gray-400, #858ea6)}.form-control:focus{border-color:var(--Info-Info-500, #50a5f1)}.form-control-valid{border-color:var(--Gray-Gray-400, #858ea6) !important;color:var(--Gray-Gray-600, #475066)}.form-control-invalid{border-color:var(--Error-Error-500, #f46a6b) !important;color:var(--Gray-Gray-600, #475066)}.form-control:disabled{border-color:var(--Gray-Gray-200, #c3c9d9) !important;color:var(--Gray-Gray-400, #858ea6);background-color:var(--Gray-Gray-50, #f7f8fa);cursor:not-allowed}.padding-icon{padding-left:28px}.input-container--has-icon label.label-bottom{left:28px}.input-container--has-icon .form-control:focus+label.label-bottom,.input-container--has-icon .form-control:not(:placeholder-shown)+label.label-bottom{left:0}.text-password{-webkit-text-security:disc;text-security:disc}label.label-bottom{position:absolute;font-weight:var(--font-weight-regular, 400);top:10px;font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-500, #69738c);left:10px;transition:all 0.2s ease-in-out;pointer-events:none;overflow:hidden;width:90%;white-space:nowrap}.form-control:focus+label.label-bottom,.form-control:not(:placeholder-shown)+label.label-bottom{top:-22px;left:0;font-size:var(--font-size-xs, 10px);color:var(--Gray-Gray-600, #475066);width:unset}.form-control:disabled+label.label-bottom{color:var(--Gray-Gray-400, #858ea6)}.form-control-helper{display:flex;position:absolute;top:100%;left:0;gap:4px;align-items:center;margin-top:4px}.form-control-helper span{display:block;color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-xs, 10px)}.invalid-color{color:var(--Error-Error-500, #f46a6b) !important}.disabled-helper{color:var(--Gray-Gray-400, #858ea6) !important}.disabled-helper{color:var(--Gray-Gray-400, #858ea6) !important}`;
 
 const DropiInput = class {
     constructor(hostRef) {
@@ -105,7 +105,7 @@ const DropiInput = class {
         this.dropiInput.emit(val);
     }
     handleKeyDown(e) {
-        if (this.onlyNumbers && !this.isAllowedNumberKey(e)) {
+        if ((this.onlyNumbers || this.moneyFormat || this.thousandSeparator) && !this.isAllowedNumberKey(e)) {
             e.preventDefault();
         }
         if (this.onlyLetters && !this.isAllowedLetterKey(e)) {
@@ -182,15 +182,15 @@ const DropiInput = class {
     // ── Render ───────────────────────────────────────────────────
     render() {
         const showAsterisk = this.required && this.showAsterisk && !this.disabled;
-        const showIconInline = !!this.icon && !!this.value;
-        return (index.h("div", { key: '4ea9c2118e6452345a2a92eedc807e6d94019784', class: { 'fixed-label-container': this.fixedLabel } }, this.fixedLabel && (index.h("div", { key: 'b8c1269e9d583becd9614f6f3c28f6a2b536f18f', class: "input-label Body-S-Regular" }, this.label, showAsterisk && index.h("span", { key: '945665772caab1a1c95f1a054dea1b8dd88287a3', class: "asterisk" }, " *"))), index.h("div", { key: 'f550584dde83c907429255d9a98b8a59ff322cbb', class: "form-group" }, index.h("div", { key: '6cc46f5822e62d59bb211e7d9eb7909ab2b833c9', class: "input-container" }, showIconInline && (index.h("dropi-icon", { key: 'c860e808ae7cd805aa9c430d52743f7eab0aaeba', class: "icon-input", name: this.icon, color: this.iconColor, width: "20px", height: "20px" })), this.passwordInput && (index.h("dropi-icon", { key: 'ba571d4d14ec2a911a8b0bd4cdc7a8481aebe746', class: "icon-input-password", name: this.showPassword ? 'Eye' : 'Eye-crossed', width: "20px", height: "20px", color: "Gray-Gray-500", onClick: () => this.togglePassword() })), index.h("input", { key: 'aad18a94d94c9600236bac7c23e38b1c1c41f06a', id: this.resolvedId, class: {
+        const showIconInline = !!this.icon;
+        return (index.h("div", { key: '444e873dc4175e75a5c85814499e28afb3f80b37', class: { 'fixed-label-container': this.fixedLabel } }, this.fixedLabel && (index.h("div", { key: 'a501500f872b87ad701f5c18e0e3b532005c3fcb', class: "input-label Body-S-Regular" }, this.label, showAsterisk && index.h("span", { key: '1ca3afb47b67cfb61cd8bceb8657c9f061462064', class: "asterisk" }, " *"))), index.h("div", { key: 'eb31110de652f6db7c5fdd747046280b0e81e2b6', class: "form-group" }, index.h("div", { key: 'b0bb2cac1e8d7f20d927437e4ba6327e333d1fdb', class: { 'input-container': true, 'input-container--has-icon': showIconInline } }, showIconInline && (index.h("dropi-icon", { key: '604a369b358b1c95a19cc23dd4bc4f9c77e4b050', class: "icon-input", name: this.icon, color: this.iconColor, width: "20px", height: "20px" })), this.passwordInput && (index.h("dropi-icon", { key: 'b1b3b979d172ada0c3fe616f795c7cd5b2bf45cb', class: "icon-input-password", name: this.showPassword ? 'Eye' : 'Eye-crossed', width: "20px", height: "20px", color: "Gray-Gray-500", onClick: () => this.togglePassword() })), index.h("input", { key: 'b5488711765a12b6e9fea7b0f8d5a23ae95de925', id: this.resolvedId, class: {
                 'form-control': true,
                 'form-control-valid': !this.isInvalid && this.touched && !!this.value,
                 'form-control-invalid': this.isInvalid,
                 'padding-icon': showIconInline,
                 'text-password': this.passwordInput && !this.showPassword,
                 'fixed-label-input': this.fixedLabel,
-            }, type: this.inputType, value: this.value, placeholder: this.fixedLabel ? this.placeholder : ' ', disabled: this.disabled, required: this.required, maxLength: this.maxlength, inputMode: this.inputMode, "data-cy": undefined, onInput: (e) => this.handleInput(e), onKeyDown: (e) => this.handleKeyDown(e), onFocus: () => this.handleFocus(), onBlur: () => this.handleBlur() }), !this.fixedLabel && (index.h("label", { key: '8ba7ea50525aa8990662d45829ba732094c41f80', class: "Body-S-Regular label-bottom", htmlFor: this.resolvedId }, this.label, showAsterisk && index.h("span", { key: '3916d3de6392da62b8086920cd2fce3b96238416', class: "asterisk" }, " *"))), this.showHelper && (index.h("div", { key: '83e17f7d0cdb503b86fd035775e1cb45d9f41709', class: "form-control-helper" }, this.isInvalid && (index.h("dropi-icon", { key: '4e034348270853f8a3aafbbbb938a5974076aebd', name: "Warning-circle", width: "12px", height: "12px", color: "Error-Error-500" })), index.h("span", { key: '7832f200ccc6f6273d65012b9e642c313399a277', class: {
+            }, type: this.inputType, value: this.value, placeholder: this.fixedLabel ? this.placeholder : ' ', disabled: this.disabled, required: this.required, maxLength: this.maxlength, inputMode: this.inputMode, "data-cy": undefined, onInput: (e) => this.handleInput(e), onKeyDown: (e) => this.handleKeyDown(e), onFocus: () => this.handleFocus(), onBlur: () => this.handleBlur() }), !this.fixedLabel && (index.h("label", { key: 'f3008d901c41e6f362977e1232e7597733c4288e', class: "Body-S-Regular label-bottom", htmlFor: this.resolvedId }, this.label, showAsterisk && index.h("span", { key: '1b982a1630f88557380df2f22c0c27bcceebbdc6', class: "asterisk" }, " *"))), this.showHelper && (index.h("div", { key: '30382a8e7beb0a14bb06f8fd25dae3da5371efd3', class: "form-control-helper" }, this.isInvalid && (index.h("dropi-icon", { key: 'a1ef2b7a9a659301cc22c19d5e5f65bd7a595a2c', name: "Warning-circle", width: "12px", height: "12px", color: "Error-Error-500" })), index.h("span", { key: '289250769c59d1ddde821395a9e97368404ca1ab', class: {
                 'disabled-helper': this.disabled,
                 'invalid-color': this.isInvalid,
             } }, this.helperText)))))));