npm - @dropi/ui - Versions diffs - 0.1.36 → 0.1.41 - Mend

@dropi/ui 0.1.36 → 0.1.41

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (426) hide show

package/dist/esm/dropi-button.entry.js CHANGED Viewed

@@ -77,7 +77,7 @@ const DropiButton = class {
                 [this.size ?? 'normal']: true,
                 [this.state ?? 'default']: true,
                 'full-width': this.fullWidth,
-            }, disabled: isDisabled, onClick: (e) => this.handleClick(e) }, this.preIcon && (h("dropi-icon", { key: 'ff3890de446e5b48c88a980f01cce4e7b9764b24', name: this.preIcon, width: this.iconSize, height: this.iconSize, color: this.fontColor })), hasText && h("span", { key: 'aa9090eb010740370b8480e4590f59de4b1acad2', class: "text" }, this.text), showPostIcon && (h("dropi-icon", { key: '16122968ee4d343333950fcdabe67ac6a104729a', name: dropdownIcon, width: this.iconSize, height: this.iconSize, color: this.fontColor })), this.state === 'loading' && this.renderLoadingSpinner(), h("slot", { key: 'fa5b1fd7d32b2619e4c19eac12cf75c75c72dd47' })));
+            }, disabled: isDisabled, onClick: (e) => this.handleClick(e) }, this.preIcon && (h("dropi-icon", { key: '374403bce1d33e39f3834d6e10dfec5ac7ca7e0c', name: this.preIcon, iconWidth: this.iconSize, iconHeight: this.iconSize, color: this.fontColor })), hasText && h("span", { key: '65d5e45f4df8df2795be3b6bf09c9576f8497664', class: "text" }, this.text), showPostIcon && (h("dropi-icon", { key: 'b3d1459260a3d7159ddf1193aa29672e8d8d3800', name: dropdownIcon, iconWidth: this.iconSize, iconHeight: this.iconSize, color: this.fontColor })), this.state === 'loading' && this.renderLoadingSpinner(), h("slot", { key: 'ae37b4195f35b02d70e166fcba27939f38d35326' })));
     }
 };
 DropiButton.style = dropiButtonCss();

package/dist/esm/dropi-card-product.entry.js CHANGED Viewed

@@ -64,11 +64,11 @@ const DropiCardProduct = class {
                 e.stopPropagation();
                 this.isFavorite = !this.isFavorite;
                 this.changeFavorite.emit(this.isFavorite);
-            }, "aria-label": "Favorito" }, h("dropi-icon", { key: '0020aaa1beffedd0243c62f616dfeb6428ec63e5', name: this.isFavorite ? 'Heart-solid' : 'Heart', width: "18px", height: "18px", color: this.isFavorite ? '#fff' : '#858ea6' }))))), h("div", { key: '390a04f46d8394deb0591969a04525f3687509a0', class: "product-info" }, this.supplierCategory && (h("dropi-ilustration-icon", { key: '7fa320fcc36f6d4929197a2d88e59deb76d34ab0', class: "supplier-insignia", type: "insignia", stateInsignia: this.supplierCategory, tagProduct: true })), h("div", { key: '67e922b0afc44b3f376db3b20a33d7cc0ae8e987', class: "product-header" }, this.category && (h("span", { key: '421f39afc07922579610fe57abdfa37b4fa68586', class: "category" }, this.category)), h("div", { key: 'e4ad1d38535bd876298efb6d819d3355ac6b7446', class: "stock-info" }, h("span", { key: '5dbdabc282dbfaee4adec81668d38a909e04227d', class: "stock-label" }, "Stock:"), h("span", { key: 'f14a47956953779f4527404930b4a988ac5c5737', class: "stock-value", style: { color: this.getStockColor() } }, this.stock === 0 ? 'Agotado' : this.stock))), h("h3", { key: '4403e622316112df4075fafbbbbc17151d2e1b39', class: "product-name" }, this.productName), this.supplier && (h("div", { key: '28554238023a313e1698847a5faccd17e9bbd750', class: "supplier-info" }, h("span", { key: 'e34245925f659f232050ad835cf83690b112d7d0', class: "supplier-label" }, "Proveedor:"), h("span", { key: 'cabf8743951095acf0c05dd6e48ee74140984773', class: "supplier-name", onClick: (e) => { e.stopPropagation(); this.dropiSupplierClick.emit(); } }, this.supplier))), h("div", { key: '193982dc4aea14f337f64c9156d97f7c23d02db7', class: "price-container" }, h("div", { key: 'f2925c29fe4d5f9be2f92c501b92351e9a4f60e0', class: "price-item" }, h("span", { key: 'd0a8f99140d6ced64e19a69a2f198ba861cca017', class: "price-label" }, "Precio proveedor"), h("span", { key: '6fa5b8b5cd1f6d6e7b2551bdceedf65e3cb0029d', class: "price-value" }, this.currency, " ", this.formatPrice(this.salePrice))), h("div", { key: '0a37ead7f660608ed6303c97893fdd9156b5bfad', class: "price-item" }, h("span", { key: '8bb33b1b418fdbb79c31ed69ddfa2598f6450efd', class: "price-label" }, "Precio sugerido"), h("span", { key: '2df4c30b299190461f0032a66cc8d281ce9c9dab', class: "price-value" }, this.currency, " ", this.formatPrice(this.suggestedPrice))))), h("div", { key: '91a8306e386ac8d0422a02d3b4bac2d96ba7bebc', class: "separator" }), this.showAddButton && (h("div", { key: '69fd0267e5388770f5067a23d4ddf2636867b030', class: { 'action-button': true, 'action-button--disabled': !this.inStock }, onClick: (e) => {
+            }, "aria-label": "Favorito" }, h("dropi-icon", { key: '35300a450b8fff37e7c469b5b8a1f39ebfb717dc', name: this.isFavorite ? 'Heart-solid' : 'Heart', iconWidth: "18px", iconHeight: "18px", color: this.isFavorite ? '#fff' : '#858ea6' }))))), h("div", { key: 'b6792c07dbcc37f636add6bd0f9bfbb88b28fc6b', class: "product-info" }, this.supplierCategory && (h("dropi-ilustration-icon", { key: 'f4074d38a1e7999ffde2b4906de21b91348b4a63', class: "supplier-insignia", type: "insignia", stateInsignia: this.supplierCategory, tagProduct: true })), h("div", { key: '7a085de7400576ba2595770268845916eecfa3cf', class: "product-header" }, this.category && (h("span", { key: 'c5002b0b82d8483e3ea88d884cdeaa015341e7ca', class: "category" }, this.category)), h("div", { key: '4c24e0f3dc3ea31764290e97a600beb411ce7b50', class: "stock-info" }, h("span", { key: '453b6b6ba34aa1c060052ec6a1aa4b6aeabe454b', class: "stock-label" }, "Stock:"), h("span", { key: '46733d6335c72a16411b27c1cae7dbb1e46a26cc', class: "stock-value", style: { color: this.getStockColor() } }, this.stock === 0 ? 'Agotado' : this.stock))), h("h3", { key: '69179b355604ffbf594f192c47ba8ac18964d1c8', class: "product-name" }, this.productName), this.supplier && (h("div", { key: 'b53d6667872f959cc5e48b365b42b5744c4c0ae8', class: "supplier-info" }, h("span", { key: 'e2cb385de94697533b0ac8f8832246dac955efb1', class: "supplier-label" }, "Proveedor:"), h("span", { key: '17e2d2ce7a5d6113fbef89a5c49ec183e189aeee', class: "supplier-name", onClick: (e) => { e.stopPropagation(); this.dropiSupplierClick.emit(); } }, this.supplier))), h("div", { key: 'eb146caf735601d1ed0f3ff0f81e234a9a768d04', class: "price-container" }, h("div", { key: '0516aaeb1f4d087b262b5692abfac9993c8b378a', class: "price-item" }, h("span", { key: '837eb19a5bb50dbd05d999a5c3fb0d642f2701b7', class: "price-label" }, "Precio proveedor"), h("span", { key: '4bdba27153a06e39d5449b61eed4707a90123336', class: "price-value" }, this.currency, " ", this.formatPrice(this.salePrice))), h("div", { key: '82040761c0b63df23fbc80d0e990d3a1c610d8eb', class: "price-item" }, h("span", { key: 'c93307dba668d60e22e6b7d9215abf289495935c', class: "price-label" }, "Precio sugerido"), h("span", { key: 'd9aca439201e07756e298b0be7d41aa9396cf67d', class: "price-value" }, this.currency, " ", this.formatPrice(this.suggestedPrice))))), h("div", { key: '79e9e143ddb87209a550069abe839b89ec703e22', class: "separator" }), this.showAddButton && (h("div", { key: 'b3261c8db5e3fd9c97f9894f6aea420495f0577b', class: { 'action-button': true, 'action-button--disabled': !this.inStock }, onClick: (e) => {
                 e.stopPropagation();
                 if (this.inStock)
                     this.dropiAddProduct.emit();
-            } }, h("dropi-icon", { key: '6e9a7333778b5a4e75bca612f7900909e9b52c80', name: "Shopping-cart-arrow-rigth", width: "20px", height: "20px", color: "#f49a3d" }), h("span", { key: '1f3eb20049a94cb74bef8c89f8773a831667dc7b', class: "button-text" }, "Enviar a cliente")))));
+            } }, h("dropi-icon", { key: '89cf58b72a1500616eb47b9f6e0bcf1e67229d94', name: "Shopping-cart-arrow-rigth", iconWidth: "20px", iconHeight: "20px", color: "#f49a3d" }), h("span", { key: '60843cb9e54337eae7e570827190f1d60a8f0450', class: "button-text" }, "Enviar a cliente")))));
     }
 };
 DropiCardProduct.style = dropiCardProductCss();

package/dist/esm/dropi-card-section.entry.js CHANGED Viewed

@@ -28,7 +28,7 @@ const DropiCardSection = class {
             : h("h6", { class: "card-section__title" }, this.title), this.description && h("p", { key: 'f0c83d631d541d95c19e4a246634da56413a3de9', class: "card-section__desc" }, this.description)), h("div", { key: '976d78401ab26872df88115ae0f0449bcd2faae9', class: "card-section__control" }, this.typeElement === 'switch' ? (h("dropi-switch", { isChecked: this.isChecked, onOnChange: (e) => {
                 this.isChecked = e.detail;
                 this.onChange.emit(e.detail);
-            } })) : (h("button", { class: "card-section__dropdown-btn", onClick: () => this.onClick.emit(), "aria-label": "Expandir" }, h("dropi-icon", { name: "Dropdown-down", width: "20px", height: "20px", color: "Gray-Gray-500" }))))));
+            } })) : (h("button", { class: "card-section__dropdown-btn", onClick: () => this.onClick.emit(), "aria-label": "Expandir" }, h("dropi-icon", { name: "Dropdown-down", iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-500" }))))));
     }
 };
 DropiCardSection.style = dropiCardSectionCss();

package/dist/esm/dropi-checkbox-selection-list.entry.js CHANGED Viewed

@@ -52,10 +52,10 @@ const DropiCheckboxSelectionList = class {
     }
     render() {
         const items = this.filtered;
-        return (h("div", { key: 'a86957a361ddab935966496e85da0474d6c7618a', class: "csl" }, this.showFilter && (h("div", { key: 'c6e6d3c7386a788c0e3141ac77b78b597020e43d', class: "csl__search" }, h("dropi-icon", { key: '02b8bbc778c1811f65f4cd07bfd0618a0c647573', name: "Search", width: "16px", height: "16px", color: "Gray-Gray-400" }), h("input", { key: '935768e39f732099837e2d3dc4791ab2f7f31273', class: "csl__search-input", type: "text", placeholder: this.filterPlaceholder, value: this.filterText, onInput: (e) => {
+        return (h("div", { key: 'a86957a361ddab935966496e85da0474d6c7618a', class: "csl" }, this.showFilter && (h("div", { key: 'c6e6d3c7386a788c0e3141ac77b78b597020e43d', class: "csl__search" }, h("dropi-icon", { key: '5746663be651673a23e8fc062febad9a920512de', name: "Search", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-400" }), h("input", { key: '47f43fae660a7b3d6c8b56ea0c2bb1f94a22e366', class: "csl__search-input", type: "text", placeholder: this.filterPlaceholder, value: this.filterText, onInput: (e) => {
                 this.filterText = e.target.value;
                 this.onSearch.emit(this.filterText);
-            } }), this.filterText && (h("button", { key: 'b93947ffd70113fc80e425dd0da04cce04ad3f27', class: "csl__clear", onClick: () => { this.filterText = ''; this.onSearch.emit(''); } }, h("dropi-icon", { key: 'b2e152f7276a914fc03664dabdb3574a2cbeb2c6', name: "Close-small", width: "14px", height: "14px", color: "Gray-Gray-400" }))))), h("div", { key: '6010ffc9d6ff60dc444da1274609f2b15f69d4a8', class: "csl__list" }, items.length === 0 && this.showNotFound ? (h("div", { class: "csl__empty" }, this.notFoundMessage)) : (items.map(opt => {
+            } }), this.filterText && (h("button", { key: '96faed8cb5ce7660af9735e73622dc31570e1daa', class: "csl__clear", onClick: () => { this.filterText = ''; this.onSearch.emit(''); } }, h("dropi-icon", { key: '2fc4bfceb57c9fc2506db5e7c238e7bf48f45cb9', name: "Close-small", iconWidth: "14px", iconHeight: "14px", color: "Gray-Gray-400" }))))), h("div", { key: '283d6e1127fbfa7e8206133a6a32bff04e8b2ebc', class: "csl__list" }, items.length === 0 && this.showNotFound ? (h("div", { class: "csl__empty" }, this.notFoundMessage)) : (items.map(opt => {
             const checked = this.selected.includes(opt.id);
             return (h("div", { class: "csl__item", key: opt.id, onClick: () => this.toggle(opt.id) }, h("dropi-checkbox", { checked: checked }), opt.icon && h("img", { class: "csl__icon", src: opt.icon, alt: opt.label }), h("span", { class: "csl__label" }, opt.label)));
         })))));

package/dist/esm/dropi-chips.entry.js CHANGED Viewed

@@ -20,7 +20,7 @@ const DropiChips = class {
     /** Emitted when the close icon is clicked */
     onClose;
     render() {
-        return (h("div", { key: '1d2faf302cc3eb832d55f46f98a7817fb616e4e1', class: { 'chip': true, [`chip--${this.customStyle}`]: true } }, this.type === 'avatar' && this.urlImg && (h("img", { key: '3014d189c71a8d3bc23f11caf1181285c6b1b0ed', class: "chip__avatar", src: this.urlImg, alt: "" })), this.type === 'icon' && this.icon && (h("dropi-icon", { key: '42c60e26f35e08582045833049d140c3aceaa11d', class: "chip__pre-icon", name: this.icon, width: "14px", height: "14px", color: "currentColor" })), h("span", { key: '474a4adfc086e20b2007f1b423f53b29454546be', class: "chip__text" }, h("slot", { key: '3c3460ffc17a54b8446b63f7b7c7a76162bb5838' })), this.showIcon && (h("button", { key: '6da5b10c81f203dcd204c0fa93babbcab8aaba16', class: "chip__close", onClick: () => this.onClose.emit(), "aria-label": "Eliminar" }, h("dropi-icon", { key: '14ef2e91ede7847830b0e491fd844f9efa637f9a', name: "Cross-circle", width: "14px", height: "14px", color: "currentColor" })))));
+        return (h("div", { key: '1d2faf302cc3eb832d55f46f98a7817fb616e4e1', class: { 'chip': true, [`chip--${this.customStyle}`]: true } }, this.type === 'avatar' && this.urlImg && (h("img", { key: '3014d189c71a8d3bc23f11caf1181285c6b1b0ed', class: "chip__avatar", src: this.urlImg, alt: "" })), this.type === 'icon' && this.icon && (h("dropi-icon", { key: 'b8c57ece5d9451a95aee7d2e90bfe294e788dfc8', class: "chip__pre-icon", name: this.icon, iconWidth: "14px", iconHeight: "14px", color: "currentColor" })), h("span", { key: 'e141b08e2b7c07e45eb065a001c53f40fe36a757', class: "chip__text" }, h("slot", { key: 'aa2c06f8e00b37492034ea0950603ffa3a7638d7' })), this.showIcon && (h("button", { key: 'ea9d1674848c27b06d6e92a0a5bd4fcf8de499a4', class: "chip__close", onClick: () => this.onClose.emit(), "aria-label": "Eliminar" }, h("dropi-icon", { key: '0a67633f6f3c898958359730b635430e53d7565c', name: "Cross-circle", iconWidth: "14px", iconHeight: "14px", color: "currentColor" })))));
     }
 };
 DropiChips.style = dropiChipsCss();

package/dist/esm/dropi-city-selector.entry.js CHANGED Viewed

@@ -83,9 +83,9 @@ const DropiCitySelector = class {
     }
     render() {
         const groups = this.filtered;
-        return (h("div", { key: '5b1e27677c34d0dc85dc9c8544e4b0ba9a66216b', class: { 'city-selector': true, 'city-selector--disabled': this.disabled } }, h("button", { key: 'e359c1baff0a255cd396ee35836430486bc67cd3', type: "button", class: "selector-trigger", disabled: this.disabled, onClick: () => this.toggle(), "aria-haspopup": "listbox", "aria-expanded": this.isOpen }, h("div", { key: '082246999f826e8cfe1b2d09fd801a5d7db7e1b2', class: "chips-area" }, this.selected.length === 0 && (h("span", { key: '90453c84cae3561412f795ec1ffc01923cd87040', class: "placeholder" }, this.placeholder)), this.selected.map(val => (h("span", { class: "chip", key: String(val) }, this.getLabel(val), h("button", { type: "button", class: "chip-remove", "aria-label": "Quitar", onClick: (e) => this.removeCity(val, e) }, h("dropi-icon", { name: "Close-small", width: "10px", height: "10px", color: "Primary-Primary-500" })))))), h("dropi-icon", { key: '27f05e3fcf08bdb4e83ee52f7bba02a5c87f2d3e', name: this.isOpen ? 'Arrow-Up-2' : 'Arrow-Down-2', width: "16px", height: "16px", color: "Gray-Gray-500" })), this.isOpen && (h("div", { key: '2fd2d164c186d9d4d1f6664e531449373dfce023', class: "dropdown", role: "listbox" }, h("div", { key: 'e6fb9fc7938296d696598e2984167cec5d693b07', class: "search-wrap" }, h("div", { key: '9a56582e19bf264065bb11e9bccdf3179e56fb7b', class: "search-field" }, h("input", { key: '9228debd9abc4e2a884006bd45046e8e5b3cce25', class: "search-input", type: "text", placeholder: "Buscar...", value: this.searchTerm, onInput: (e) => { this.searchTerm = e.target.value; }, autoComplete: "off" }), h("span", { key: '609751d699dc6227347ec565ff14c3f35fa9a6cf', class: "search-icon" }, h("dropi-icon", { key: 'fcacc7c73eeb3f2dc27f83f9dfcbe2476b85136e', name: "Search", width: "16px", height: "16px", color: "Gray-Gray-400" })))), h("div", { key: 'c71c2b0303f37169ee221387aeec6ceea499b8e1', class: "options-list" }, groups.length === 0 && (h("div", { key: 'a5525ef28be665b337658032318507ae01f69a0d', class: "no-results" }, "Sin resultados")), groups.map(group => (h("div", { key: group.value, class: "group" }, h("div", { class: "group-label" }, group.label), group.items.map(city => {
+        return (h("div", { key: '5b1e27677c34d0dc85dc9c8544e4b0ba9a66216b', class: { 'city-selector': true, 'city-selector--disabled': this.disabled } }, h("button", { key: 'e359c1baff0a255cd396ee35836430486bc67cd3', type: "button", class: "selector-trigger", disabled: this.disabled, onClick: () => this.toggle(), "aria-haspopup": "listbox", "aria-expanded": this.isOpen }, h("div", { key: '082246999f826e8cfe1b2d09fd801a5d7db7e1b2', class: "chips-area" }, this.selected.length === 0 && (h("span", { key: '90453c84cae3561412f795ec1ffc01923cd87040', class: "placeholder" }, this.placeholder)), this.selected.map(val => (h("span", { class: "chip", key: String(val) }, this.getLabel(val), h("button", { type: "button", class: "chip-remove", "aria-label": "Quitar", onClick: (e) => this.removeCity(val, e) }, h("dropi-icon", { name: "Close-small", iconWidth: "10px", iconHeight: "10px", color: "Primary-Primary-500" })))))), h("dropi-icon", { key: 'f99675449127fb19fdea950db057d8c14ca62644', name: this.isOpen ? 'Arrow-Up-2' : 'Arrow-Down-2', iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-500" })), this.isOpen && (h("div", { key: '2a14a55016c19128fde45359f4b29b6f04f9b035', class: "dropdown", role: "listbox" }, h("div", { key: '1321152ed7b0d3f50b04c7f28b05f1523c41cce4', class: "search-wrap" }, h("div", { key: '7c94a7506d44cd89b83e5782cce16319f266f82c', class: "search-field" }, h("input", { key: '5f40db9a8df0adc09776b4adcfe03a4a6d1d1467', class: "search-input", type: "text", placeholder: "Buscar...", value: this.searchTerm, onInput: (e) => { this.searchTerm = e.target.value; }, autoComplete: "off" }), h("span", { key: '3140903ef4355b970c8f348e4f55d43f852e247d', class: "search-icon" }, h("dropi-icon", { key: 'b59235b0d7a685000033d2a294fbce246d0ba4c2', name: "Search", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-400" })))), h("div", { key: 'bfd40e336b402bd92ec212466cf89e1cffb0d4be', class: "options-list" }, groups.length === 0 && (h("div", { key: '9fce9b4df1ffb122278480f0ab60255ea0c795ec', class: "no-results" }, "Sin resultados")), groups.map(group => (h("div", { key: group.value, class: "group" }, h("div", { class: "group-label" }, group.label), group.items.map(city => {
             const isSelected = this.selected.includes(city.value);
-            return (h("div", { key: String(city.value), class: { 'city-option': true, 'city-option--selected': isSelected }, onClick: (e) => this.toggleCity(city.value, e), role: "option", "aria-selected": isSelected }, h("span", { class: { 'checkbox': true, 'checkbox--checked': isSelected } }, isSelected && (h("dropi-icon", { name: "Check", width: "10px", height: "10px", color: "Neutral-White" }))), h("span", { class: "city-label" }, city.label)));
+            return (h("div", { key: String(city.value), class: { 'city-option': true, 'city-option--selected': isSelected }, onClick: (e) => this.toggleCity(city.value, e), role: "option", "aria-selected": isSelected }, h("span", { class: { 'checkbox': true, 'checkbox--checked': isSelected } }, isSelected && (h("dropi-icon", { name: "Check", iconWidth: "10px", iconHeight: "10px", color: "Neutral-White" }))), h("span", { class: "city-label" }, city.label)));
         })))))))));
     }
     static get watchers() { return {

package/dist/esm/dropi-country-selector.entry.js CHANGED Viewed

@@ -179,7 +179,7 @@ const DropiCountrySelector = class {
                 'select-button': true,
                 'select-completed': !!this.selected,
                 'select-invalid': this.hasError,
-            }, disabled: this.disabled, onClick: () => this.open() }, h("div", { key: '79df14d64f598d312a1cd82f294edf8aa14ed32e', class: "selected-content" }, this.selected ? (h("span", { class: "selected-option" }, h("img", { class: "flag-img", src: `https://flagsapi.com/${this.selected.code}/shiny/24.png`, alt: this.selected.name }), this.selected.name)) : (h("span", { class: "placeholder-text" }, this.placeholder))), h("dropi-icon", { key: 'dfa717ce51975386fab6a3af796637a27a8cb039', name: this.isOpen ? 'Arrow-Up-2' : 'Arrow-Down-2', width: "20px", height: "20px", color: "Gray-Gray-500" })), h("ul", { key: '4f72db336c9d1bc1ce149279970cdaa4dcaa4f77', class: `select-dropdown${this.isOpen ? ' expanded' : ' collapsed'}` }, h("li", { key: '3badbda75f609e979f5edf7ad3f5783bf9cdf001', class: "search-li" }, h("div", { key: 'cae7ee12d3d3d40a3bb9728f4c109cd0ba513995', class: "search-field" }, h("input", { key: '82b7703b0531c80d51b5fb70d3e2f0b804e3089f', ref: (el) => { this.searchInputRef = el; }, type: "text", class: "country-search", placeholder: "Buscar pa\u00EDs...", value: this.searchTerm, onInput: (e) => { this.searchTerm = e.target.value; } }), h("span", { key: '45378fac8b73b656fc8c5bb16d7f072398890508', class: "search-icon" }, h("dropi-icon", { key: '39c3a426407fd68367a3494c3d319bdbcf9692bb', name: "Search", width: "16px", height: "16px", color: "Gray-Gray-400" })))), this.filtered.map(country => (h("li", { key: country.code }, h("button", { class: "option", type: "button", onClick: () => this.select(country) }, h("img", { class: "flag-img", src: `https://flagsapi.com/${country.code}/shiny/24.png`, alt: country.name }), country.name))))), this.textHelper && (h("div", { key: '58f747d7cfecd23d3bdc166f21c3560e642f336d', class: { 'select-helper': true, 'select-helper-error': this.hasError } }, this.hasError && h("dropi-icon", { key: 'fb68e291bd8dcfe5955281504b3de80699fa0ff0', name: "Warning-circle", width: "12px", height: "12px", color: "Error-Error-500" }), h("span", { key: '9d5287f387f09f2b90b41f14f05c3572a44d74a3' }, this.textHelper)))));
+            }, disabled: this.disabled, onClick: () => this.open() }, h("div", { key: '79df14d64f598d312a1cd82f294edf8aa14ed32e', class: "selected-content" }, this.selected ? (h("span", { class: "selected-option" }, h("img", { class: "flag-img", src: `https://flagsapi.com/${this.selected.code}/shiny/24.png`, alt: this.selected.name }), this.selected.name)) : (h("span", { class: "placeholder-text" }, this.placeholder))), h("dropi-icon", { key: 'dc74219468e838cb5cf06a5ab5036809f84c8f44', name: this.isOpen ? 'Arrow-Up-2' : 'Arrow-Down-2', iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-500" })), h("ul", { key: 'ef8ce166ba747d7973b09a3c0183629d42e344d9', class: `select-dropdown${this.isOpen ? ' expanded' : ' collapsed'}` }, h("li", { key: '04d0b6b0dc3fb431ad606c0df115d4966f3b5a24', class: "search-li" }, h("div", { key: '735a83924982308b4ec92eb19f09c449717fa05d', class: "search-field" }, h("input", { key: '3d6a0db7489e59e310bf50731b5f48ae3a244fe3', ref: (el) => { this.searchInputRef = el; }, type: "text", class: "country-search", placeholder: "Buscar pa\u00EDs...", value: this.searchTerm, onInput: (e) => { this.searchTerm = e.target.value; } }), h("span", { key: '00bdb2ddd3f67929246f89faed2a2ef2ab169860', class: "search-icon" }, h("dropi-icon", { key: 'bffe43141d5de99b143751c4a80fd972ba8b274c', name: "Search", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-400" })))), this.filtered.map(country => (h("li", { key: country.code }, h("button", { class: "option", type: "button", onClick: () => this.select(country) }, h("img", { class: "flag-img", src: `https://flagsapi.com/${country.code}/shiny/24.png`, alt: country.name }), country.name))))), this.textHelper && (h("div", { key: '32baa238875d15f41d1b308fc7adb418c6acc2b1', class: { 'select-helper': true, 'select-helper-error': this.hasError } }, this.hasError && h("dropi-icon", { key: 'bfcfecc740f2cd9044ba2e1d2188ea2a9a208836', name: "Warning-circle", iconWidth: "12px", iconHeight: "12px", color: "Error-Error-500" }), h("span", { key: 'd1ced64bb98903ce46e692ddf008f885edf3162b' }, this.textHelper)))));
     }
     static get watchers() { return {
         "currentSelection": [{

package/dist/esm/dropi-date-picker.entry.js CHANGED Viewed

@@ -176,7 +176,7 @@ const DropiDatePicker = class {
                 'dp-trigger--disabled': this.disabled,
                 'dp-trigger--invalid': this.isInvalid,
                 'dp-trigger--loading': this.loading
-            }, onClick: () => this.open ? this.open = false : this.open_(), disabled: this.disabled || this.loading, type: "button" }, h("dropi-icon", { key: '51b6fed8a232d7d22494c0bdf9f17e8c6ae0dbbe', name: "Calendar", width: "16px", height: "16px", color: "Gray-Gray-400" }), h("span", { key: 'ecbe872cd13efb112ef106f1dfde58cd745c124c', class: { 'dp-trigger__value': true, 'dp-trigger__placeholder': !this.displayValue } }, this.displayValue || this.placeholder), h("dropi-icon", { key: '6025abcf99d825dd885c9916f755c6b06e0657ed', name: "Arrow-Down-2", width: "12px", height: "12px", color: "Gray-Gray-400" })), this.open && (h("div", { key: 'b46a2bd022bc6ec2edfdf07a8a21b010b56610a4', class: "dp-popup" }, h("div", { key: '8aedcc47ab11c03bf8bc3309fc92ba3f83587520', class: "dp-nav" }, h("button", { key: 'e5a7f2a8edc8d33e08449713a976008b83108f36', class: "dp-nav__btn", onClick: () => this.prevMonth(), type: "button" }, h("dropi-icon", { key: '515211fe3c12cd2e9399bd8fad7c0dd84a4de3cd', name: "Arrow-Left-2", width: "16px", height: "16px", color: "Gray-Gray-600" })), h("span", { key: '0d5acefc9c8418749b4065d3bc92c8fb53744557', class: "dp-nav__title" }, h("span", { key: 'd4b68ef6a5c2885cf7cd05e7b49e47623b8c0d00' }, MONTHS_ES[this.viewMonth]), h("span", { key: '8aefcf2e7e383111994c58a743706d6d19607f65' }, this.viewYear)), h("button", { key: 'b7524552e5b05f592633bd6e16cdcda8659aeacf', class: "dp-nav__btn", onClick: () => this.nextMonth(), type: "button" }, h("dropi-icon", { key: '5e14a0dafb227ba6f2e90298005401050b55a3bb', name: "Arrow-Right-2", width: "16px", height: "16px", color: "Gray-Gray-600" }))), h("div", { key: '37d7428dc36bdc805fb60c36126a86509f3b1188', class: "dp-grid" }, DAYS_ES.map(d => (h("div", { class: "dp-day-header" }, d))), days.map(({ iso, day, currentMonth }) => {
+            }, onClick: () => this.open ? this.open = false : this.open_(), disabled: this.disabled || this.loading, type: "button" }, h("dropi-icon", { key: '773df10339713e2900abf37a27814f11919723a6', name: "Calendar", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-400" }), h("span", { key: '2dfb36f49f70b658eb3e614aaafd7d55b84bd8ff', class: { 'dp-trigger__value': true, 'dp-trigger__placeholder': !this.displayValue } }, this.displayValue || this.placeholder), h("dropi-icon", { key: '285147bc4a042263f760b36779d05453f041b452', name: "Arrow-Down-2", iconWidth: "12px", iconHeight: "12px", color: "Gray-Gray-400" })), this.open && (h("div", { key: '44e0c6e10690c3acf8b6d1df295fa9806da11921', class: "dp-popup" }, h("div", { key: 'd901f7614790294623a192bfca1821ddac2f93eb', class: "dp-nav" }, h("button", { key: 'd6ce30acaaf801e3c373b2c3f2835cc2d52dd0f6', class: "dp-nav__btn", onClick: () => this.prevMonth(), type: "button" }, h("dropi-icon", { key: 'bce4421271b1d662c909d8934992567e33dac651', name: "Arrow-Left-2", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" })), h("span", { key: 'bd483b0fe673fda734b6acc526e1cb6e7682c5be', class: "dp-nav__title" }, h("span", { key: 'cd9e36ca306145ad39371a7a147c5efbb6ea9922' }, MONTHS_ES[this.viewMonth]), h("span", { key: '99b3f4cb1f8d5cef1b07fa39ab6afd51d77080da' }, this.viewYear)), h("button", { key: '1fc969593153c3b920a8c99e7beae8e6ba2d0e9d', class: "dp-nav__btn", onClick: () => this.nextMonth(), type: "button" }, h("dropi-icon", { key: 'b200e12b9267232f9e01794ff47e4b613cdeaf53', name: "Arrow-Right-2", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" }))), h("div", { key: 'ea473f30463db209687e9f8ecf4f3e9f9422e379', class: "dp-grid" }, DAYS_ES.map(d => (h("div", { class: "dp-day-header" }, d))), days.map(({ iso, day, currentMonth }) => {
             const isSelected = this.selectionMode !== 'range'
                 ? iso === this.selectedDate
                 : iso === this.startDate || iso === this.endDate;
@@ -198,12 +198,12 @@ const DropiDatePicker = class {
                     if (this.selectionMode === 'range' && this.startDate && !this.endDate)
                         this.hoverDate = iso;
                 }, onMouseLeave: () => this.hoverDate = '' }, day));
-        })), h("div", { key: '9a16f2d3aaffda303f2cf7c4d8045ad355eb3e88', class: "dp-footer" }, h("button", { key: '2c236322d33b4dbc37e683c328bc2c17aa1422cf', class: "dp-footer__clear", type: "button", onClick: () => {
+        })), h("div", { key: 'eb232baf8ece9768a26f5be6bcb6c9d965916643', class: "dp-footer" }, h("button", { key: '97e25f18c4af3e4c43f762944b21bfd3941b0ea0', class: "dp-footer__clear", type: "button", onClick: () => {
                 this.selectedDate = '';
                 this.startDate = '';
                 this.endDate = '';
                 this.open = false;
-            } }, "Limpiar"), h("button", { key: 'a08afb2358819fc8c15c7949dc7e4cbdf14b52fb', class: "dp-footer__today", type: "button", onClick: () => {
+            } }, "Limpiar"), h("button", { key: '7e9cf51936868db07c3b940001c2b310b1de2b6d', class: "dp-footer__today", type: "button", onClick: () => {
                 if (this.selectionMode !== 'range') {
                     this.selectedDate = today;
                     this.open = false;

package/dist/esm/dropi-drawer.entry.js CHANGED Viewed

@@ -61,7 +61,7 @@ const DropiDrawer = class {
         return (h("div", { key: '7792ce8e001adf404aef387e35c5fb601f69b1e2', class: { 'drawer-host': true, 'drawer-host--open': this.open } }, h("div", { key: '186c33be6a7cd1e34e6d1f852219be91b24a15b9', class: "drawer-backdrop", onClick: () => {
                 if (this.closeOnBackdrop)
                     this.close();
-            } }), h("div", { key: '3a48c465707125c2de1e369e70375689fe5ff9c1', class: `drawer-panel drawer-panel--${this.position}${sizeClass ? ' ' + sizeClass : ''}`, style: panelStyle, role: "dialog", "aria-modal": "true" }, h("div", { key: '840bb2933bc7e2264269bbadd5d9d61649fe58fe', class: { 'drawer-header': true, 'drawer-header--headless': this.headless } }, h("h3", { key: 'bfd9c7db02e9db07ce32115ca6386a9840c61288', class: "drawer-header__title" }, this.drawerTitle), h("button", { key: '6dc350e26f74d4e3aead7697bd2f5552e49e833c', class: "drawer-header__close", onClick: () => this.close(), "aria-label": "Cerrar" }, h("dropi-icon", { key: 'fcc5331391009f97254db5f729c61631edc33d8c', name: "Close-small", width: "32px", height: "32px", color: "Gray-Gray-400" }))), h("div", { key: 'e50ae31043bde759a79fbc9b4f734e06dc6c2a3f', class: "drawer-body" }, h("slot", { key: 'f1f0d7314b8bd7f6fd6fdec88a818963c1d5834f' })), h("div", { key: 'b14833f885757bbcfa687b7b2ee1cf847301134b', class: "drawer-footer" }, h("slot", { key: '5cba1759160a934c3b54166914a10b1335075151', name: "footer" })))));
+            } }), h("div", { key: '3a48c465707125c2de1e369e70375689fe5ff9c1', class: `drawer-panel drawer-panel--${this.position}${sizeClass ? ' ' + sizeClass : ''}`, style: panelStyle, role: "dialog", "aria-modal": "true" }, h("div", { key: '840bb2933bc7e2264269bbadd5d9d61649fe58fe', class: { 'drawer-header': true, 'drawer-header--headless': this.headless } }, h("h3", { key: 'bfd9c7db02e9db07ce32115ca6386a9840c61288', class: "drawer-header__title" }, this.drawerTitle), h("button", { key: '6dc350e26f74d4e3aead7697bd2f5552e49e833c', class: "drawer-header__close", onClick: () => this.close(), "aria-label": "Cerrar" }, h("dropi-icon", { key: 'aa887706723f327e48cdb836ee2ea0597fca3f3b', name: "Close-small", iconWidth: "32px", iconHeight: "32px", color: "Gray-Gray-400" }))), h("div", { key: 'e6f301a6253d930e116a6e68a3e8f280b32f00ef', class: "drawer-body" }, h("slot", { key: 'f05c00171734247aec82b8b504a53e11c3612fc9' })), h("div", { key: 'f0f4aaba5926a2d0c78b3b1869d8d8efa0f03845', class: "drawer-footer" }, h("slot", { key: '45e370e62b5d2e7c221f37ad8582656bed159637', name: "footer" })))));
     }
     static get watchers() { return {
         "open": [{

package/dist/esm/dropi-favorite-button.entry.js CHANGED Viewed

@@ -17,7 +17,7 @@ const DropiFavoriteButton = class {
         this.toggleFavorite.emit(this.isFavorite);
     }
     render() {
-        return (h("button", { key: '07acf3b1f81e69ddea79672fd4853ad575b4d2af', 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) }, h("dropi-icon", { key: 'fcf3cc2b3b107eb43c6a83a9d6dc6cbff7ee202f', name: this.isFavorite || this.hovered ? 'Heart-solid' : 'Heart', width: "19px", height: "19px", color: this.isFavorite || this.hovered ? 'Primary-Primary-500' : 'Gray-Gray-800' })));
+        return (h("button", { key: '07acf3b1f81e69ddea79672fd4853ad575b4d2af', 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) }, h("dropi-icon", { key: '4ce84ce1876e76c07666c609d427484cef65c460', name: this.isFavorite || this.hovered ? 'Heart-solid' : 'Heart', iconWidth: "19px", iconHeight: "19px", color: this.isFavorite || this.hovered ? 'Primary-Primary-500' : 'Gray-Gray-800' })));
     }
 };
 DropiFavoriteButton.style = dropiFavoriteButtonCss();

package/dist/esm/dropi-file-upload-progress-bar.entry.js CHANGED Viewed

@@ -59,7 +59,7 @@ const DropiFileUploadProgressBar = class {
         };
     }
     render() {
-        return (h("div", { key: 'f1dd7e86c50078b35661e0514beff610dc2bc8e7', class: "container-progress-bar" }, h("div", { key: '2f630eb29817c68b3246d520d3940611ae78c523', class: "container-icon-info", style: { display: this.fileExtension !== 'pdf' ? 'flex' : 'none' } }, this.type !== 'image' && (h("dropi-icon", { key: '53bed511476369459951eac8c000129adebd6370', name: "File-text", width: "24px", height: "24px", color: "Info-Info-600" })), this.type === 'image' && !this.urlImage && (h("div", { key: '4e5878dc43478af1da306ae04c829c357843a180', style: { width: '34px', height: '34px', borderRadius: '8px', background: 'var(--Gray-Gray-100)' } })), this.type === 'image' && this.urlImage && (h("img", { key: 'd8c47b00b2e7a9983ca17ddf1bfb31da78bbb658', src: this.urlImage, class: "image-to-view", width: "34", height: "34", alt: "" }))), this.fileExtension === 'pdf' && (h("div", { key: 'befec2d335a0bc2d5a2af1b475cd19d16951ea9a', class: "icon-pdf" }, h("svg", { key: '5518e6204180b17d534358d913a625cd1ca31ed7', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("g", { key: 'cd3e6e3066b22e29e07671add7dfeb4c742f4a82', "clip-path": "url(#clip0_6227_22223)" }, h("path", { key: '936061bcda6e1b2324f519f03e434928335b2609', d: "M16.6243 4.61667L13.716 1.70833C12.616 0.608333 11.1493 0 9.59102 0H5.83268C3.53268 0 1.66602 1.86667 1.66602 4.16667V15.8333C1.66602 18.1333 3.53268 20 5.83268 20H14.166C16.466 20 18.3327 18.1333 18.3327 15.8333V8.74167C18.3327 7.18333 17.7243 5.71667 16.6243 4.61667ZM15.4493 5.79167C15.716 6.05833 15.941 6.35 16.1243 6.66667H12.5077C12.0493 6.66667 11.6743 6.29167 11.6743 5.83333V2.21667C11.991 2.4 12.2827 2.625 12.5493 2.89167L15.4577 5.8L15.4493 5.79167ZM16.666 15.8333C16.666 17.2083 15.541 18.3333 14.166 18.3333H5.83268C4.45768 18.3333 3.33268 17.2083 3.33268 15.8333V4.16667C3.33268 2.79167 4.45768 1.66667 5.83268 1.66667H9.59102C9.72435 1.66667 9.86602 1.66667 9.99935 1.68333V5.83333C9.99935 7.20833 11.1243 8.33333 12.4993 8.33333H16.6493C16.666 8.46667 16.666 8.6 16.666 8.74167V15.8333ZM5.90768 10.8333H4.99935C4.54102 10.8333 4.16602 11.2083 4.16602 11.6667V15.3667C4.16602 15.6583 4.39935 15.8833 4.68268 15.8833C4.96602 15.8833 5.19935 15.65 5.19935 15.3667V14.35H5.89935C6.88268 14.35 7.68268 13.5583 7.68268 12.5917C7.68268 11.625 6.88268 10.8333 5.89935 10.8333H5.90768ZM5.90768 13.3083H5.21602V11.875H5.91602C6.31602 11.875 6.65768 12.2 6.65768 12.5917C6.65768 12.9833 6.31602 13.3083 5.91602 13.3083H5.90768ZM15.8493 11.3583C15.8493 11.65 15.616 11.875 15.3327 11.875H13.9243V12.825H14.9577C15.2493 12.825 15.4743 13.0583 15.4743 13.3417C15.4743 13.625 15.241 13.8583 14.9577 13.8583H13.9243V15.3583C13.9243 15.65 13.691 15.875 13.4077 15.875C13.1243 15.875 12.891 15.6417 12.891 15.3583V11.35C12.891 11.0583 13.1243 10.8333 13.4077 10.8333H15.3327C15.6243 10.8333 15.8493 11.0667 15.8493 11.35V11.3583ZM10.0743 10.8417H9.16602C8.70768 10.8417 8.33268 11.2167 8.33268 11.675V15.375C8.33268 15.6667 8.56602 15.8417 8.84935 15.8417C9.13268 15.8417 10.066 15.8417 10.066 15.8417C11.0493 15.8417 11.8493 15.05 11.8493 14.0833V12.6C11.8493 11.6333 11.0493 10.8417 10.066 10.8417H10.0743ZM10.816 14.0833C10.816 14.475 10.4743 14.8 10.0743 14.8H9.38268V11.8833H10.0827C10.4827 11.8833 10.8243 12.2083 10.8243 12.6V14.0833H10.816Z", fill: "#DE6061" })), h("defs", { key: 'afb99f7cd6b7481ed99aa82264c539e167cd8b90' }, h("clipPath", { key: 'bf72e59ac0aea8eb3f6c812a98a3e50618499dfd', id: "clip0_6227_22223" }, h("rect", { key: '57b7af08370d8901296ed329a5e390578b58c73e', width: "20", height: "20", fill: "white" })))))), h("div", { key: '9df97315c7594dc0b77069f12e83ed8ce358794e', class: "container-bar-title" }, h("p", { key: '5531067af3ff9e1efdffbd1aa88e7f3c21ab9c12' }, this.textFile), h("progress", { key: '0492aa89233810538784c0dda705b9dc3cdb488d', value: this.progress, max: "100" })), this.progress === 100 && this.isPreview && (h("div", { key: '9fe1548c4191eb4c4250c02ef3608c01d0944059', class: "view-icon", onClick: () => this.viewFile.emit() }, h("svg", { key: '07b454b85b89af4a337a8b440c2adae74a048d0e', xmlns: "http://www.w3.org/2000/svg", width: "18", height: "14", viewBox: "0 0 18 14", fill: "none" }, h("path", { key: '1bbc9cfb792adabc41c44ce43c6f6f7b0935fcdb', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M7.07148 4.14758C7.64227 3.76618 8.31334 3.56262 8.99983 3.56262C9.92004 3.56372 10.8022 3.92976 11.4529 4.58045C12.1036 5.23114 12.4697 6.11334 12.4708 7.03355C12.4708 7.72004 12.2672 8.39111 11.8858 8.9619C11.5044 9.53269 10.9623 9.97757 10.3281 10.2403C9.69387 10.503 8.99598 10.5717 8.32268 10.4378C7.64939 10.3039 7.03092 9.9733 6.54551 9.48788C6.06009 9.00246 5.72951 8.384 5.59558 7.7107C5.46166 7.0374 5.53039 6.33951 5.7931 5.70528C6.05581 5.07105 6.50069 4.52897 7.07148 4.14758ZM7.84282 8.76514C8.18529 8.99398 8.58794 9.11612 8.99983 9.11612C9.55216 9.11612 10.0819 8.8967 10.4724 8.50615C10.863 8.11559 11.0824 7.58588 11.0824 7.03355C11.0824 6.62166 10.9602 6.21902 10.7314 5.87654C10.5026 5.53407 10.1773 5.26714 9.79679 5.10952C9.41625 4.95189 8.99752 4.91065 8.59354 4.99101C8.18956 5.07136 7.81849 5.26971 7.52723 5.56096C7.23598 5.85221 7.03764 6.22329 6.95728 6.62727C6.87693 7.03124 6.91817 7.44998 7.07579 7.83052C7.23342 8.21105 7.50034 8.53631 7.84282 8.76514Z", fill: "#475066" }), h("path", { key: 'a25b946c2a1f4c1625cb3de790f54632c0efab86', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M8.99996 0.546387C13.2984 0.546387 15.7475 3.48835 16.8241 5.24187C17.157 5.78022 17.3333 6.40064 17.3333 7.03357C17.3333 7.6665 17.157 8.28692 16.8241 8.82526C15.7475 10.5788 13.2984 13.5207 8.99996 13.5207C4.70155 13.5207 2.25246 10.5788 1.17577 8.82526C0.842931 8.28692 0.666626 7.6665 0.666626 7.03357C0.666626 6.40064 0.842931 5.78022 1.17577 5.24187C2.25246 3.48835 4.70155 0.546387 8.99996 0.546387ZM8.99996 12.1324C12.6229 12.1324 14.7159 9.60206 15.6406 8.09845C15.8383 7.77846 15.943 7.40973 15.943 7.03357C15.943 6.6574 15.8383 6.28867 15.6406 5.96868C14.7159 4.4623 12.6229 1.93476 8.99996 1.93476C5.377 1.93476 3.28402 4.46507 2.35936 5.96868C2.16161 6.28867 2.05687 6.6574 2.05687 7.03357C2.05687 7.40973 2.16161 7.77846 2.35936 8.09845C3.28402 9.60206 5.377 12.1324 8.99996 12.1324Z", fill: "#475066" })))), this.progress === 100 && !this.disabled && (h("div", { key: '587a02eec937b7054d4b1cd840cf82bae8c43ccf', class: "container-icon-trash", onClick: () => this.deleteFile.emit() }, h("svg", { key: '7422db6af5abb405cc7e817f038bc5cabded6415', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "21", viewBox: "0 0 20 21", fill: "none" }, h("path", { key: 'd5d725b550ba4440727dbcb05c6fd43096620088', d: "M16.2501 4.94477H14.0973C13.9362 4.16103 13.5097 3.45682 12.8899 2.95082C12.27 2.44483 11.4947 2.168 10.6946 2.16699H9.30566C8.50552 2.168 7.73019 2.44483 7.11035 2.95082C6.49051 3.45682 6.06406 4.16103 5.90289 4.94477H3.75011C3.56593 4.94477 3.3893 5.01793 3.25906 5.14817C3.12883 5.2784 3.05566 5.45504 3.05566 5.63921C3.05566 5.82339 3.12883 6.00003 3.25906 6.13026C3.3893 6.26049 3.56593 6.33366 3.75011 6.33366H4.44455V15.3614C4.44566 16.282 4.81183 17.1645 5.46276 17.8155C6.11369 18.4664 6.99622 18.8326 7.91677 18.8337H12.0834C13.004 18.8326 13.8865 18.4664 14.5375 17.8155C15.1884 17.1645 15.5546 16.282 15.5557 15.3614V6.33366H16.2501C16.4343 6.33366 16.6109 6.26049 16.7412 6.13026C16.8714 6.00003 16.9446 5.82339 16.9446 5.63921C16.9446 5.45504 16.8714 5.2784 16.7412 5.14817C16.6109 5.01793 16.4343 4.94477 16.2501 4.94477ZM9.30566 3.55588H10.6946C11.1253 3.55641 11.5453 3.69017 11.8971 3.93883C12.2488 4.18749 12.515 4.53886 12.6591 4.94477H7.34108C7.48524 4.53886 7.75143 4.18749 8.10315 3.93883C8.45488 3.69017 8.87492 3.55641 9.30566 3.55588ZM14.1668 15.3614C14.1668 15.914 13.9473 16.4439 13.5566 16.8346C13.1659 17.2253 12.636 17.4448 12.0834 17.4448H7.91677C7.36424 17.4448 6.83434 17.2253 6.44364 16.8346C6.05294 16.4439 5.83344 15.914 5.83344 15.3614V6.33366H14.1668V15.3614Z", fill: "#DE6061" }), h("path", { key: '48d1dc3ba7c8f093c5ab7ee9ad5ed4307a1458e9', d: "M8.61128 14.6666C8.79545 14.6666 8.97209 14.5934 9.10232 14.4632C9.23256 14.3329 9.30572 14.1563 9.30572 13.9721V9.80545C9.30572 9.62127 9.23256 9.44464 9.10232 9.3144C8.97209 9.18417 8.79545 9.11101 8.61128 9.11101C8.4271 9.11101 8.25046 9.18417 8.12023 9.3144C7.99 9.44464 7.91683 9.62127 7.91683 9.80545V13.9721C7.91683 14.1563 7.99 14.3329 8.12023 14.4632C8.25046 14.5934 8.4271 14.6666 8.61128 14.6666Z", fill: "#DE6061" }), h("path", { key: '588341c2b9c640a15e6ba454bd1ba28ae52630b9', d: "M11.389 14.6666C11.5731 14.6666 11.7498 14.5934 11.88 14.4632C12.0102 14.3329 12.0834 14.1563 12.0834 13.9721V9.80545C12.0834 9.62127 12.0102 9.44464 11.88 9.3144C11.7498 9.18417 11.5731 9.11101 11.389 9.11101C11.2048 9.11101 11.0281 9.18417 10.8979 9.3144C10.7677 9.44464 10.6945 9.62127 10.6945 9.80545V13.9721C10.6945 14.1563 10.7677 14.3329 10.8979 14.4632C11.0281 14.5934 11.2048 14.6666 11.389 14.6666Z", fill: "#DE6061" }))))));
+        return (h("div", { key: 'f1dd7e86c50078b35661e0514beff610dc2bc8e7', class: "container-progress-bar" }, h("div", { key: '2f630eb29817c68b3246d520d3940611ae78c523', class: "container-icon-info", style: { display: this.fileExtension !== 'pdf' ? 'flex' : 'none' } }, this.type !== 'image' && (h("dropi-icon", { key: 'd74c46e94eb264e7dbd86129e7f4cd57026cfe88', name: "File-text", iconWidth: "24px", iconHeight: "24px", color: "Info-Info-600" })), this.type === 'image' && !this.urlImage && (h("div", { key: '46a73ab30276c5438c84c406a2555635c95a432a', style: { width: '34px', height: '34px', borderRadius: '8px', background: 'var(--Gray-Gray-100)' } })), this.type === 'image' && this.urlImage && (h("img", { key: 'c30d73c158f1bd7f571549dae0f31e36978c3dbb', src: this.urlImage, class: "image-to-view", width: "34", height: "34", alt: "" }))), this.fileExtension === 'pdf' && (h("div", { key: 'e27d245c793b30cd44694bdc8fae1b43fd0eeff8', class: "icon-pdf" }, h("svg", { key: '05fe527f3f84d68ce189b45c428db32fd94aa60a', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("g", { key: '45465d04e01b989d6f41b9685024049f11d2fd8a', "clip-path": "url(#clip0_6227_22223)" }, h("path", { key: 'b299e0b6b8254f08adbf38431cbd6c1a8ab55bd0', d: "M16.6243 4.61667L13.716 1.70833C12.616 0.608333 11.1493 0 9.59102 0H5.83268C3.53268 0 1.66602 1.86667 1.66602 4.16667V15.8333C1.66602 18.1333 3.53268 20 5.83268 20H14.166C16.466 20 18.3327 18.1333 18.3327 15.8333V8.74167C18.3327 7.18333 17.7243 5.71667 16.6243 4.61667ZM15.4493 5.79167C15.716 6.05833 15.941 6.35 16.1243 6.66667H12.5077C12.0493 6.66667 11.6743 6.29167 11.6743 5.83333V2.21667C11.991 2.4 12.2827 2.625 12.5493 2.89167L15.4577 5.8L15.4493 5.79167ZM16.666 15.8333C16.666 17.2083 15.541 18.3333 14.166 18.3333H5.83268C4.45768 18.3333 3.33268 17.2083 3.33268 15.8333V4.16667C3.33268 2.79167 4.45768 1.66667 5.83268 1.66667H9.59102C9.72435 1.66667 9.86602 1.66667 9.99935 1.68333V5.83333C9.99935 7.20833 11.1243 8.33333 12.4993 8.33333H16.6493C16.666 8.46667 16.666 8.6 16.666 8.74167V15.8333ZM5.90768 10.8333H4.99935C4.54102 10.8333 4.16602 11.2083 4.16602 11.6667V15.3667C4.16602 15.6583 4.39935 15.8833 4.68268 15.8833C4.96602 15.8833 5.19935 15.65 5.19935 15.3667V14.35H5.89935C6.88268 14.35 7.68268 13.5583 7.68268 12.5917C7.68268 11.625 6.88268 10.8333 5.89935 10.8333H5.90768ZM5.90768 13.3083H5.21602V11.875H5.91602C6.31602 11.875 6.65768 12.2 6.65768 12.5917C6.65768 12.9833 6.31602 13.3083 5.91602 13.3083H5.90768ZM15.8493 11.3583C15.8493 11.65 15.616 11.875 15.3327 11.875H13.9243V12.825H14.9577C15.2493 12.825 15.4743 13.0583 15.4743 13.3417C15.4743 13.625 15.241 13.8583 14.9577 13.8583H13.9243V15.3583C13.9243 15.65 13.691 15.875 13.4077 15.875C13.1243 15.875 12.891 15.6417 12.891 15.3583V11.35C12.891 11.0583 13.1243 10.8333 13.4077 10.8333H15.3327C15.6243 10.8333 15.8493 11.0667 15.8493 11.35V11.3583ZM10.0743 10.8417H9.16602C8.70768 10.8417 8.33268 11.2167 8.33268 11.675V15.375C8.33268 15.6667 8.56602 15.8417 8.84935 15.8417C9.13268 15.8417 10.066 15.8417 10.066 15.8417C11.0493 15.8417 11.8493 15.05 11.8493 14.0833V12.6C11.8493 11.6333 11.0493 10.8417 10.066 10.8417H10.0743ZM10.816 14.0833C10.816 14.475 10.4743 14.8 10.0743 14.8H9.38268V11.8833H10.0827C10.4827 11.8833 10.8243 12.2083 10.8243 12.6V14.0833H10.816Z", fill: "#DE6061" })), h("defs", { key: '95b5ba8d3edc3cb106e12dae54d8444ced8599a2' }, h("clipPath", { key: '7900ecc7f35430b3311352ea58cb874a39a9ec9e', id: "clip0_6227_22223" }, h("rect", { key: 'e7c63063a879be36c37d6d39fdb295d3abb7667d', width: "20", height: "20", fill: "white" })))))), h("div", { key: '3464f88661ff6fcacdfa125054cfa98a420db74f', class: "container-bar-title" }, h("p", { key: 'f33ab366b12e67fcd4aa7f730a2881c1b41c736a' }, this.textFile), h("progress", { key: '595b22ed789380419cb47babac54f86921df2c33', value: this.progress, max: "100" })), this.progress === 100 && this.isPreview && (h("div", { key: '31a36abbe63cb31969b3516088c2e03db10a8982', class: "view-icon", onClick: () => this.viewFile.emit() }, h("svg", { key: '5947e10eec9c446f886a7013c59d7efededca856', xmlns: "http://www.w3.org/2000/svg", width: "18", height: "14", viewBox: "0 0 18 14", fill: "none" }, h("path", { key: '5dfe9fe8793b5e9a91f0bbcfd300f40deee916a3', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M7.07148 4.14758C7.64227 3.76618 8.31334 3.56262 8.99983 3.56262C9.92004 3.56372 10.8022 3.92976 11.4529 4.58045C12.1036 5.23114 12.4697 6.11334 12.4708 7.03355C12.4708 7.72004 12.2672 8.39111 11.8858 8.9619C11.5044 9.53269 10.9623 9.97757 10.3281 10.2403C9.69387 10.503 8.99598 10.5717 8.32268 10.4378C7.64939 10.3039 7.03092 9.9733 6.54551 9.48788C6.06009 9.00246 5.72951 8.384 5.59558 7.7107C5.46166 7.0374 5.53039 6.33951 5.7931 5.70528C6.05581 5.07105 6.50069 4.52897 7.07148 4.14758ZM7.84282 8.76514C8.18529 8.99398 8.58794 9.11612 8.99983 9.11612C9.55216 9.11612 10.0819 8.8967 10.4724 8.50615C10.863 8.11559 11.0824 7.58588 11.0824 7.03355C11.0824 6.62166 10.9602 6.21902 10.7314 5.87654C10.5026 5.53407 10.1773 5.26714 9.79679 5.10952C9.41625 4.95189 8.99752 4.91065 8.59354 4.99101C8.18956 5.07136 7.81849 5.26971 7.52723 5.56096C7.23598 5.85221 7.03764 6.22329 6.95728 6.62727C6.87693 7.03124 6.91817 7.44998 7.07579 7.83052C7.23342 8.21105 7.50034 8.53631 7.84282 8.76514Z", fill: "#475066" }), h("path", { key: 'b5dbe504a39e7d3d2d331e85f050c118f9c97b09', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M8.99996 0.546387C13.2984 0.546387 15.7475 3.48835 16.8241 5.24187C17.157 5.78022 17.3333 6.40064 17.3333 7.03357C17.3333 7.6665 17.157 8.28692 16.8241 8.82526C15.7475 10.5788 13.2984 13.5207 8.99996 13.5207C4.70155 13.5207 2.25246 10.5788 1.17577 8.82526C0.842931 8.28692 0.666626 7.6665 0.666626 7.03357C0.666626 6.40064 0.842931 5.78022 1.17577 5.24187C2.25246 3.48835 4.70155 0.546387 8.99996 0.546387ZM8.99996 12.1324C12.6229 12.1324 14.7159 9.60206 15.6406 8.09845C15.8383 7.77846 15.943 7.40973 15.943 7.03357C15.943 6.6574 15.8383 6.28867 15.6406 5.96868C14.7159 4.4623 12.6229 1.93476 8.99996 1.93476C5.377 1.93476 3.28402 4.46507 2.35936 5.96868C2.16161 6.28867 2.05687 6.6574 2.05687 7.03357C2.05687 7.40973 2.16161 7.77846 2.35936 8.09845C3.28402 9.60206 5.377 12.1324 8.99996 12.1324Z", fill: "#475066" })))), this.progress === 100 && !this.disabled && (h("div", { key: '64cdb0fe5676b7db8c849960526904bdda458e16', class: "container-icon-trash", onClick: () => this.deleteFile.emit() }, h("svg", { key: '31aef5958c89cce4d071be04c95dcb45f2004683', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "21", viewBox: "0 0 20 21", fill: "none" }, h("path", { key: '5c479d37166fc686b1e95114a75b4b9f40b770ad', d: "M16.2501 4.94477H14.0973C13.9362 4.16103 13.5097 3.45682 12.8899 2.95082C12.27 2.44483 11.4947 2.168 10.6946 2.16699H9.30566C8.50552 2.168 7.73019 2.44483 7.11035 2.95082C6.49051 3.45682 6.06406 4.16103 5.90289 4.94477H3.75011C3.56593 4.94477 3.3893 5.01793 3.25906 5.14817C3.12883 5.2784 3.05566 5.45504 3.05566 5.63921C3.05566 5.82339 3.12883 6.00003 3.25906 6.13026C3.3893 6.26049 3.56593 6.33366 3.75011 6.33366H4.44455V15.3614C4.44566 16.282 4.81183 17.1645 5.46276 17.8155C6.11369 18.4664 6.99622 18.8326 7.91677 18.8337H12.0834C13.004 18.8326 13.8865 18.4664 14.5375 17.8155C15.1884 17.1645 15.5546 16.282 15.5557 15.3614V6.33366H16.2501C16.4343 6.33366 16.6109 6.26049 16.7412 6.13026C16.8714 6.00003 16.9446 5.82339 16.9446 5.63921C16.9446 5.45504 16.8714 5.2784 16.7412 5.14817C16.6109 5.01793 16.4343 4.94477 16.2501 4.94477ZM9.30566 3.55588H10.6946C11.1253 3.55641 11.5453 3.69017 11.8971 3.93883C12.2488 4.18749 12.515 4.53886 12.6591 4.94477H7.34108C7.48524 4.53886 7.75143 4.18749 8.10315 3.93883C8.45488 3.69017 8.87492 3.55641 9.30566 3.55588ZM14.1668 15.3614C14.1668 15.914 13.9473 16.4439 13.5566 16.8346C13.1659 17.2253 12.636 17.4448 12.0834 17.4448H7.91677C7.36424 17.4448 6.83434 17.2253 6.44364 16.8346C6.05294 16.4439 5.83344 15.914 5.83344 15.3614V6.33366H14.1668V15.3614Z", fill: "#DE6061" }), h("path", { key: 'cd1b8cb60eafabf8cfe2b1842bf946aa73ea1f44', d: "M8.61128 14.6666C8.79545 14.6666 8.97209 14.5934 9.10232 14.4632C9.23256 14.3329 9.30572 14.1563 9.30572 13.9721V9.80545C9.30572 9.62127 9.23256 9.44464 9.10232 9.3144C8.97209 9.18417 8.79545 9.11101 8.61128 9.11101C8.4271 9.11101 8.25046 9.18417 8.12023 9.3144C7.99 9.44464 7.91683 9.62127 7.91683 9.80545V13.9721C7.91683 14.1563 7.99 14.3329 8.12023 14.4632C8.25046 14.5934 8.4271 14.6666 8.61128 14.6666Z", fill: "#DE6061" }), h("path", { key: '99576e5c1f917aa043c749ba38c436eea64a18f4', d: "M11.389 14.6666C11.5731 14.6666 11.7498 14.5934 11.88 14.4632C12.0102 14.3329 12.0834 14.1563 12.0834 13.9721V9.80545C12.0834 9.62127 12.0102 9.44464 11.88 9.3144C11.7498 9.18417 11.5731 9.11101 11.389 9.11101C11.2048 9.11101 11.0281 9.18417 10.8979 9.3144C10.7677 9.44464 10.6945 9.62127 10.6945 9.80545V13.9721C10.6945 14.1563 10.7677 14.3329 10.8979 14.4632C11.0281 14.5934 11.2048 14.6666 11.389 14.6666Z", fill: "#DE6061" }))))));
     }
     static get watchers() { return {
         "progress": [{

package/dist/esm/dropi-file-upload.entry.js CHANGED Viewed

@@ -215,7 +215,7 @@ const DropiFileUpload = class {
     renderCardItem(item) {
         const isImage = item.fileType === 'image' && item.previewUrl && !item.previewUrl.includes('.pdf');
         const isPdf = item.file?.type?.includes('pdf');
-        return (h("div", { key: item.id, class: `file-card ${item.state} ${this.getFileTypeClass(item)}` }, isImage ? (h("div", { class: "preview-wrapper" }, h("img", { class: `preview ${item.state}`, src: item.previewUrl, alt: item.file?.name }), item.state === 'complete' && (h("div", { class: "overlay-icon" }, this.renderCheckSvg())))) : (h("div", { class: "file-icon" }, isPdf ? this.renderPdfSvg() : this.renderDocSvg())), item.state !== 'confirm-delete' && item.state !== 'deleting' && (h("div", { class: "info-container" }, h("div", { class: `file-name${item.state === 'error' ? ' error-text' : ''}` }, item.file?.name ?? item.previewUrl?.split('/').pop()), item.state === 'uploading' && (h("div", { class: "progress-bar-container" }, h("div", { class: "progress-bar", style: { width: `${item.progress}%` } }))), item.state === 'error' && (h("div", { class: "error-label" }, "Error al subir el archivo")))), item.state === 'deleting' && (h("div", { class: "deleting-container" }, h("span", { class: "deleting-label" }, "Eliminando..."))), item.state !== 'confirm-delete' && item.state !== 'error' && item.state !== 'deleting' && (h("div", { class: "preview-image", onClick: () => { } }, h("dropi-icon", { name: "Eye", width: "20px", height: "20px", color: "Gray-Gray-600" }))), item.state !== 'confirm-delete' && item.state !== 'deleting' && !this.onlyView && (h("div", { class: "delete", onClick: () => this.handleFileAction(item, 'delete') }, this.renderTrashSvg())), item.state === 'confirm-delete' && (h("div", { class: "delete-confirm" }, h("span", { class: "message" }, item.previewUrl ? '¿Eliminar imagen?' : '¿Eliminar archivo?'), h("div", { class: "actions" }, h("dropi-button", { size: "small", text: "S\u00ED", onClick: () => this.handleFileAction(item, 'confirm-delete') }), h("dropi-button", { text: "No", size: "small", severity: "secondary", onClick: () => this.handleFileAction(item, 'cancel-delete') }))))));
+        return (h("div", { key: item.id, class: `file-card ${item.state} ${this.getFileTypeClass(item)}` }, isImage ? (h("div", { class: "preview-wrapper" }, h("img", { class: `preview ${item.state}`, src: item.previewUrl, alt: item.file?.name }), item.state === 'complete' && (h("div", { class: "overlay-icon" }, this.renderCheckSvg())))) : (h("div", { class: "file-icon" }, isPdf ? this.renderPdfSvg() : this.renderDocSvg())), item.state !== 'confirm-delete' && item.state !== 'deleting' && (h("div", { class: "info-container" }, h("div", { class: `file-name${item.state === 'error' ? ' error-text' : ''}` }, item.file?.name ?? item.previewUrl?.split('/').pop()), item.state === 'uploading' && (h("div", { class: "progress-bar-container" }, h("div", { class: "progress-bar", style: { width: `${item.progress}%` } }))), item.state === 'error' && (h("div", { class: "error-label" }, "Error al subir el archivo")))), item.state === 'deleting' && (h("div", { class: "deleting-container" }, h("span", { class: "deleting-label" }, "Eliminando..."))), item.state !== 'confirm-delete' && item.state !== 'error' && item.state !== 'deleting' && (h("div", { class: "preview-image", onClick: () => { } }, h("dropi-icon", { name: "Eye", iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-600" }))), item.state !== 'confirm-delete' && item.state !== 'deleting' && !this.onlyView && (h("div", { class: "delete", onClick: () => this.handleFileAction(item, 'delete') }, this.renderTrashSvg())), item.state === 'confirm-delete' && (h("div", { class: "delete-confirm" }, h("span", { class: "message" }, item.previewUrl ? '¿Eliminar imagen?' : '¿Eliminar archivo?'), h("div", { class: "actions" }, h("dropi-button", { size: "small", text: "S\u00ED", onClick: () => this.handleFileAction(item, 'confirm-delete') }), h("dropi-button", { text: "No", size: "small", severity: "secondary", onClick: () => this.handleFileAction(item, 'cancel-delete') }))))));
     }
     renderGridItem(item) {
         return (h("div", { key: item.id, class: `img-view ${item.state} ${this.getFileTypeClass(item)}` }, h("div", { class: "preview-wrapper" }, h("div", { class: "preview-container" }, h("img", { class: `preview ${item.state}`, src: item.previewUrl || '', alt: "preview" })), item.state === 'complete' && (h("div", { class: "overlay-icon" }, this.renderCheckSvg())), item.state !== 'confirm-delete' && item.state !== 'deleting' && (h("div", { class: "delete", onClick: () => this.handleFileAction(item, 'confirm-delete') }, this.renderTrashGridSvg()))), item.state === 'uploading' && (h("div", { class: "progress-bar-container" }, h("div", { class: "progress-bar", style: { width: `${item.progress}%` } }))), item.state === 'deleting' && (h("div", { class: "deleting-info" }, h("span", { class: "deleting-info-label" }, "Eliminando...")))));
@@ -227,7 +227,7 @@ const DropiFileUpload = class {
         const cardFiles = files.filter(f => f.typeView === 'card');
         const showDropZone = files.length < (this.maxFiles ?? 1) && !this.isDropZoneHidden();
         const isSmall = this.dragAndDropSize === 'small';
-        return (h("div", { key: '2823263b5c803c23eb1bf091676a0fd86243117a', class: "upload-container" }, (this.title || this.label) && (h("div", { key: 'ec9c8a63c9c34f8c8ce68310c07dd8fda66ffda2', class: "upload-header" }, this.title && h("div", { key: 'f26ade32fe339a0382166345110ef3445bb58475', class: "text title" }, this.title), this.label && h("div", { key: 'becc99e74e8d555fc40bcd0854575c5b435faf85', class: "text label" }, this.label))), this.error && (h("dropi-alert", { key: 'b01f441d6083e31f5ddaa2bc661722835134e8f0', message: this.errorMessage, type: "default", state: "error", dismissable: true, showButton: false, onOnClose: () => { this.error = false; } })), showDropZone && (h("div", { key: 'e221786da335f56a6160874d56ad4b50c9b0702f', class: { 'file-upload': true, 'drag-over': this.dragging }, onDragOver: (e) => this.onDragOver(e), onDragEnter: (e) => this.onDragEnter(e), onDragLeave: () => this.onDragLeave(), onDrop: (e) => this.onDrop(e) }, h("div", { key: 'ad6d5ed22aa64c4a33e3861cc48271dbecc59279', class: `file-upload__zone${this.dragging ? ' drag-over' : ''}` }, !isSmall && (h("svg", { key: 'a5666c9aaad62e8a4b6677b288d853953ada6169', width: "40", height: "40", viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '98a2c4e40aa67249f0b8b13f956846334a1b8652', d: "M0 20C0 8.95431 8.95431 0 20 0C31.0457 0 40 8.95431 40 20C40 31.0457 31.0457 40 20 40C8.95431 40 0 31.0457 0 20Z", fill: "#FEF8F1" }), h("g", { key: '892e4f122e593fd77f37048fcd68157a682bf1b7', "clip-path": "url(#up)" }, h("path", { key: 'aaaddae87cb45b9c00ddc98142c1ef5b2ec25a0a', d: "M19.3379 13.7187L19.3332 24.0107C19.3332 24.1875 19.4035 24.357 19.5285 24.4821C19.6535 24.6071 19.8231 24.6773 19.9999 24.6773C20.1767 24.6773 20.3463 24.6071 20.4713 24.4821C20.5963 24.357 20.6666 24.1875 20.6666 24.0107L20.6712 13.73L22.6126 15.672C22.7376 15.797 22.9071 15.8672 23.0839 15.8672C23.2607 15.8672 23.4302 15.797 23.5552 15.672C23.6802 15.547 23.7504 15.3774 23.7504 15.2007C23.7504 15.0239 23.6802 14.8543 23.5552 14.7293L21.4145 12.586C21.2288 12.4001 21.0083 12.2527 20.7655 12.1521C20.5228 12.0515 20.2626 11.9998 19.9999 11.9998C19.7371 11.9998 19.477 12.0515 19.2342 12.1521C18.9915 12.2527 18.771 12.4001 18.5852 12.586L16.4445 14.7273C16.3196 14.8523 16.2494 15.0219 16.2494 15.1987C16.2494 15.3754 16.3196 15.545 16.4445 15.67C16.5696 15.795 16.7391 15.8652 16.9159 15.8652C17.0927 15.8652 17.2622 15.795 17.3872 15.67L19.3379 13.7187Z", fill: "#F49A3D" }), h("path", { key: '4c9eddf5c6348984c7478701fe67e411d01cf8c5', d: "M26.6667 23.3329V25.9996C26.6667 26.1764 26.5964 26.346 26.4714 26.471C26.3464 26.596 26.1768 26.6663 26 26.6663H14C13.8232 26.6663 13.6536 26.596 13.5286 26.471C13.4036 26.346 13.3333 26.1764 13.3333 25.9996V23.3329C13.3333 23.1561 13.2631 22.9865 13.1381 22.8615C13.013 22.7365 12.8435 22.6663 12.6667 22.6663C12.4899 22.6663 12.3203 22.7365 12.1953 22.8615C12.0702 22.9865 12 23.1561 12 23.3329V25.9996C12 26.53 12.2107 27.0387 12.5858 27.4138C12.9609 27.7889 13.4696 27.9996 14 27.9996H26C26.5304 27.9996 27.0391 27.7889 27.4142 27.4138C27.7893 27.0387 28 26.53 28 25.9996V23.3329C28 23.1561 27.9298 22.9865 27.8047 22.8615C27.6797 22.7365 27.5101 22.6663 27.3333 22.6663C27.1565 22.6663 26.987 22.7365 26.8619 22.8615C26.7369 22.9865 26.6667 23.1561 26.6667 23.3329Z", fill: "#F49A3D" })), h("defs", { key: 'bcc8c24fcf8d9ea939dec31a36e5fce8c0fd203e' }, h("clipPath", { key: '9724c45ddf4d8983116baf1b4baadb8e1c83ed9d', id: "up" }, h("rect", { key: '1d0ca58ddc76c661f8278a177ad670633008bd5a', width: "16", height: "16", fill: "white", transform: "translate(12 12)" }))))), h("div", { key: 'd1a2c7a7cc539b1c519dcc5931c80eb38c230e1f', class: isSmall ? 'info size-small-upload' : 'info' }, h("div", { key: '4265e328f1bab72a221746afc15b0e7e8b6324b0', class: "title" }, this.textDropZone), isSmall && (h("dropi-button", { key: '076a0dfc2f087b9724e60980bb1217e676bdaeda', text: this.textButton, size: "small", onClick: (e) => { e.stopPropagation(); this.openFilePicker(); } }))), !isSmall && (h("div", { key: '070c2a5374d4262b4b66ea2a9f51a75358865011', class: "info-desc" }, this.accept && h("div", { key: '6482d13398d8ea654dbd5f5c684c7b0602da0b7d', class: "description" }, "Formatos admitidos: ", this.accept), h("div", { key: '25ccba2cd7a16f732f111aeefe076516b0c360f6', class: "description" }, "Tama\u00F1o m\u00E1ximo: ", this.maxFileSizeMB, "MB"))), !isSmall && (h("dropi-button", { key: 'a1ed64460aa8c9aead966d33fa8ef25ddc383000', text: this.textButton, size: "small", onClick: (e) => { e.stopPropagation(); this.openFilePicker(); } })), h("input", { key: 'b5debf074ef579d4bd74d1507ba63b912eeba37e', ref: (el) => this.inputRef = el, type: "file", accept: this.accept, multiple: this.multiple, class: "upload-hidden", onChange: (e) => this.onInputChange(e) })))), this.selectedFiles.length > 0 && (h("div", { key: '40d77d3c697b18637fa7669e857f5d931d91543d', class: "files-container" }, gridFiles.length > 0 && (h("div", { key: 'c8b2eac24568959a83500930fc36c54be04d3d75', class: "grid-list" }, gridFiles.map(f => this.renderGridItem(f)), gridFiles.length < this.maxFiles && (h("div", { key: '6782016ecee648dff31baa352db02413a37ad2ae', class: "add-img", onClick: () => this.addImage() }, h("div", { key: '08ecf1dae23fc4dac7818fd178d40a50a10a4508', class: "icon" }, h("svg", { key: 'c41793f302e1c0f7eeb91c0e524cd398988c62c2', width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'cf066997fbfb0aa31bacbb72ef037f67b74de5ec', d: "M9.77774 6.4444H7.55551V4.22218C7.55551 4.07484 7.49698 3.93353 7.3928 3.82934C7.28861 3.72516 7.1473 3.66663 6.99996 3.66663C6.85262 3.66663 6.71131 3.72516 6.60712 3.82934C6.50294 3.93353 6.4444 4.07484 6.4444 4.22218V6.4444H4.22218C4.07484 6.4444 3.93353 6.50294 3.82934 6.60712C3.72516 6.71131 3.66663 6.85262 3.66663 6.99996C3.66663 7.1473 3.72516 7.28861 3.82934 7.3928C3.93353 7.49698 4.07484 7.55551 4.22218 7.55551H6.4444V9.77774C6.4444 9.92508 6.50294 10.0664 6.60712 10.1706C6.71131 10.2748 6.85262 10.3333 6.99996 10.3333C7.1473 10.3333 7.28861 10.2748 7.3928 10.1706C7.49698 10.0664 7.55551 9.92508 7.55551 9.77774V7.55551H9.77774C9.92508 7.55551 10.0664 7.49698 10.1706 7.3928C10.2748 7.28861 10.3333 7.1473 10.3333 6.99996C10.3333 6.85262 10.2748 6.71131 10.1706 6.60712C10.0664 6.50294 9.92508 6.4444 9.77774 6.4444Z", fill: "#32394D" }))), h("div", { key: '03214b3dd6dad6b7d3973f36d041aafcb9089819', class: "text" }, "Agregar"))))), cardFiles.length > 0 && (h("div", { key: '4fb7c564b557885680f2aa2723273dac6f15cc72', class: "card-list" }, cardFiles.map(f => this.renderCardItem(f))))))));
+        return (h("div", { key: 'c09a5505630f5fa711bfd4bf20961c12b72a3fd8', class: "upload-container" }, (this.title || this.label) && (h("div", { key: '1bf146f7faacca9e28002ea36e36bfffbead52e2', class: "upload-header" }, this.title && h("div", { key: '00541bbf16b27c4a110cdde47826e5cc873e81c8', class: "text title" }, this.title), this.label && h("div", { key: '3794f66b232427eab5b046ddf0e5aa70e7752967', class: "text label" }, this.label))), this.error && (h("dropi-alert", { key: 'bfa68d17ac941905787526e3f8804e3e0f2f1778', message: this.errorMessage, type: "default", state: "error", dismissable: true, showButton: false, onOnClose: () => { this.error = false; } })), showDropZone && (h("div", { key: '81c39eb2291b04e57414c7e8912e975557f8216f', class: { 'file-upload': true, 'drag-over': this.dragging }, onDragOver: (e) => this.onDragOver(e), onDragEnter: (e) => this.onDragEnter(e), onDragLeave: () => this.onDragLeave(), onDrop: (e) => this.onDrop(e) }, h("div", { key: 'e6f548754efa4c94d882b305887cf57aa42ce72c', class: `file-upload__zone${this.dragging ? ' drag-over' : ''}` }, !isSmall && (h("svg", { key: '52e3baa97a868e8e1dea0e2c8767514804e8ebd0', width: "40", height: "40", viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'bb4a9b1a1a84ac80a2f0b8fef7400f47a256cdee', d: "M0 20C0 8.95431 8.95431 0 20 0C31.0457 0 40 8.95431 40 20C40 31.0457 31.0457 40 20 40C8.95431 40 0 31.0457 0 20Z", fill: "#FEF8F1" }), h("g", { key: 'a65c0b3d112c7ab0ac22195a5f955f79dae859a8', "clip-path": "url(#up)" }, h("path", { key: 'fa3e06035df1bcbfe3d6baee2fdf458815a56e70', d: "M19.3379 13.7187L19.3332 24.0107C19.3332 24.1875 19.4035 24.357 19.5285 24.4821C19.6535 24.6071 19.8231 24.6773 19.9999 24.6773C20.1767 24.6773 20.3463 24.6071 20.4713 24.4821C20.5963 24.357 20.6666 24.1875 20.6666 24.0107L20.6712 13.73L22.6126 15.672C22.7376 15.797 22.9071 15.8672 23.0839 15.8672C23.2607 15.8672 23.4302 15.797 23.5552 15.672C23.6802 15.547 23.7504 15.3774 23.7504 15.2007C23.7504 15.0239 23.6802 14.8543 23.5552 14.7293L21.4145 12.586C21.2288 12.4001 21.0083 12.2527 20.7655 12.1521C20.5228 12.0515 20.2626 11.9998 19.9999 11.9998C19.7371 11.9998 19.477 12.0515 19.2342 12.1521C18.9915 12.2527 18.771 12.4001 18.5852 12.586L16.4445 14.7273C16.3196 14.8523 16.2494 15.0219 16.2494 15.1987C16.2494 15.3754 16.3196 15.545 16.4445 15.67C16.5696 15.795 16.7391 15.8652 16.9159 15.8652C17.0927 15.8652 17.2622 15.795 17.3872 15.67L19.3379 13.7187Z", fill: "#F49A3D" }), h("path", { key: '97456d13ef7a8a75ecf7e172ccb85ca859e3d535', d: "M26.6667 23.3329V25.9996C26.6667 26.1764 26.5964 26.346 26.4714 26.471C26.3464 26.596 26.1768 26.6663 26 26.6663H14C13.8232 26.6663 13.6536 26.596 13.5286 26.471C13.4036 26.346 13.3333 26.1764 13.3333 25.9996V23.3329C13.3333 23.1561 13.2631 22.9865 13.1381 22.8615C13.013 22.7365 12.8435 22.6663 12.6667 22.6663C12.4899 22.6663 12.3203 22.7365 12.1953 22.8615C12.0702 22.9865 12 23.1561 12 23.3329V25.9996C12 26.53 12.2107 27.0387 12.5858 27.4138C12.9609 27.7889 13.4696 27.9996 14 27.9996H26C26.5304 27.9996 27.0391 27.7889 27.4142 27.4138C27.7893 27.0387 28 26.53 28 25.9996V23.3329C28 23.1561 27.9298 22.9865 27.8047 22.8615C27.6797 22.7365 27.5101 22.6663 27.3333 22.6663C27.1565 22.6663 26.987 22.7365 26.8619 22.8615C26.7369 22.9865 26.6667 23.1561 26.6667 23.3329Z", fill: "#F49A3D" })), h("defs", { key: '502826c8a475fb8e39cd5c17412b3a5d08b8b57f' }, h("clipPath", { key: 'ee19ab3b2a0a2ee79130eb7c864322f3b1b8ca12', id: "up" }, h("rect", { key: '6928d7c2657125285176108904a87b12578e99c7', width: "16", height: "16", fill: "white", transform: "translate(12 12)" }))))), h("div", { key: '712573aee556fba6f0ec4bc91ec6a8a6f7c9f2cd', class: isSmall ? 'info size-small-upload' : 'info' }, h("div", { key: '68c9fa1d370aa6cfd46b70bcf178d1d2ea516d1a', class: "title" }, this.textDropZone), isSmall && (h("dropi-button", { key: '68d657e48f013fcacfb8f77f82627849c0be88be', text: this.textButton, size: "small", onClick: (e) => { e.stopPropagation(); this.openFilePicker(); } }))), !isSmall && (h("div", { key: 'fba8a27308e72627d5dbe6a37bc4f9cbb3d5f58c', class: "info-desc" }, this.accept && h("div", { key: 'c005fec3ae91d8d3919ea622b143390817e19b4a', class: "description" }, "Formatos admitidos: ", this.accept), h("div", { key: 'b04d2d09f18b22232b60bb42f72f7016a2b4fc51', class: "description" }, "Tama\u00F1o m\u00E1ximo: ", this.maxFileSizeMB, "MB"))), !isSmall && (h("dropi-button", { key: '4494470d4ea27f2022dbf057ed3fb519bbcc89df', text: this.textButton, size: "small", onClick: (e) => { e.stopPropagation(); this.openFilePicker(); } })), h("input", { key: 'ce6dfd7d09bca1cc7fea1c9164381d278a05c615', ref: (el) => this.inputRef = el, type: "file", accept: this.accept, multiple: this.multiple, class: "upload-hidden", onChange: (e) => this.onInputChange(e) })))), this.selectedFiles.length > 0 && (h("div", { key: 'c556993924a8b5fdc7fcdb9b76e9ee9876cc1211', class: "files-container" }, gridFiles.length > 0 && (h("div", { key: '3fef57fa5153ec594b46e222053a79e095156dff', class: "grid-list" }, gridFiles.map(f => this.renderGridItem(f)), gridFiles.length < this.maxFiles && (h("div", { key: '57051294666455141dbe24837243f8bcbfe34dac', class: "add-img", onClick: () => this.addImage() }, h("div", { key: 'c39387899c7b3696ce4611b5f9a91204ad04a91e', class: "icon" }, h("svg", { key: 'f63ac4806187522457de8aecbcd299a19a3f7a90', width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '4c6f3aefe963cf78aad8bdce421d776b2aac4c7e', d: "M9.77774 6.4444H7.55551V4.22218C7.55551 4.07484 7.49698 3.93353 7.3928 3.82934C7.28861 3.72516 7.1473 3.66663 6.99996 3.66663C6.85262 3.66663 6.71131 3.72516 6.60712 3.82934C6.50294 3.93353 6.4444 4.07484 6.4444 4.22218V6.4444H4.22218C4.07484 6.4444 3.93353 6.50294 3.82934 6.60712C3.72516 6.71131 3.66663 6.85262 3.66663 6.99996C3.66663 7.1473 3.72516 7.28861 3.82934 7.3928C3.93353 7.49698 4.07484 7.55551 4.22218 7.55551H6.4444V9.77774C6.4444 9.92508 6.50294 10.0664 6.60712 10.1706C6.71131 10.2748 6.85262 10.3333 6.99996 10.3333C7.1473 10.3333 7.28861 10.2748 7.3928 10.1706C7.49698 10.0664 7.55551 9.92508 7.55551 9.77774V7.55551H9.77774C9.92508 7.55551 10.0664 7.49698 10.1706 7.3928C10.2748 7.28861 10.3333 7.1473 10.3333 6.99996C10.3333 6.85262 10.2748 6.71131 10.1706 6.60712C10.0664 6.50294 9.92508 6.4444 9.77774 6.4444Z", fill: "#32394D" }))), h("div", { key: '666a6f9501e1ff35e76526180d4c532ab57fe8f7', class: "text" }, "Agregar"))))), cardFiles.length > 0 && (h("div", { key: 'b0b74121f4e4ce76076d027b7957e944cc1a7db6', class: "card-list" }, cardFiles.map(f => this.renderCardItem(f))))))));
     }
 };
 DropiFileUpload.style = dropiFileUploadCss();

package/dist/esm/dropi-icon.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { r as registerInstance, a as getElement, h } from './index-D5SAM1O2.js';
-const dropiIconCss = () => `:host{display:inline-flex;align-items:center;justify-content:center;fill:var(--icon-fill, currentColor);width:24px;height:24px;overflow:hidden}svg{fill:inherit;display:block;width:100%;height:100%;vertical-align:middle}.spin{animation:spin 1s linear infinite}@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}`;
+const dropiIconCss = () => `:host{display:inline-flex;align-items:center;justify-content:center;fill:var(--icon-fill, currentColor);overflow:hidden}svg{fill:inherit;display:block;width:100%;height:100%;vertical-align:middle}.spin{animation:spin 1s linear infinite}@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}`;
 const DropiIcon = class {
     constructor(hostRef) {
@@ -10,27 +10,19 @@ const DropiIcon = class {
     /** Icon name matching the id in the SVG sprite */
     name = '';
     /** Width of the icon (CSS value) */
-    width = '24px';
-    /** Height of the icon (CSS value) */
-    height = '24px';
-    /**
-     * Color of the icon. Accepts:
-     * - Hex color: `#ff0000`
-     * - CSS variable name without `--`: `Primary-Primary-500`
-     * - `currentColor` to inherit
-     */
+    iconWidth = '20px';
+    iconHeight = '20px';
     color = 'currentColor';
+    widthChanged() {
+        this.updateHostStyles();
+    }
+    heightChanged() {
+        this.updateHostStyles();
+    }
     colorChanged() {
         this.applyColor();
     }
     componentWillLoad() {
-        // SSR Fallback: Read attributes if props are not yet synced by hydration
-        if (!this.el.style.width && !this.el.style.height) {
-            const attrW = this.el.getAttribute('width') || '24px';
-            const attrH = this.el.getAttribute('height') || '24px';
-            this.width = attrW;
-            this.height = attrH;
-        }
         this.applyColor();
         this.updateHostStyles();
     }
@@ -38,8 +30,8 @@ const DropiIcon = class {
         this.updateHostStyles();
     }
     updateHostStyles() {
-        this.el.style.width = this.width;
-        this.el.style.height = this.height;
+        this.el.style.width = this.iconWidth;
+        this.el.style.height = this.iconHeight;
     }
     applyColor() {
         if (!this.color)
@@ -52,9 +44,15 @@ const DropiIcon = class {
         this.el.style.setProperty('--icon-fill', fill);
     }
     render() {
-        return (h("svg", { key: 'c705712bd21c4da94dcff8ce12b0c0b880681e95', width: this.width ?? '24px', height: this.height ?? '24px', class: { spin: (this.name ?? '') === 'Spinner' }, "aria-hidden": "true" }, h("use", { key: 'b02addb8203904ec059b3c92bd40b09e3c79622d', href: `/assets/icons/symbol/svg/sprite.css.svg#${this.name ?? ''}` })));
+        return (h("svg", { key: '7185e1861c44aafcec2117f53f61ce18992388ad', width: this.iconWidth, height: this.iconHeight, class: { spin: (this.name ?? '') === 'Spinner' }, "aria-hidden": "true" }, h("use", { key: 'b7913bfbf0bbb6bfa35f848f9fee19e09646004d', href: `/assets/icons/symbol/svg/sprite.css.svg#${this.name ?? ''}` })));
     }
     static get watchers() { return {
+        "iconWidth": [{
+                "widthChanged": 0
+            }],
+        "iconHeight": [{
+                "heightChanged": 0
+            }],
         "color": [{
                 "colorChanged": 0
             }]

package/dist/esm/dropi-ilustration-icon.entry.js CHANGED Viewed

@@ -29,7 +29,7 @@ const DropiIlustrationIcon = class {
         return map[state] || 'Info';
     }
     render() {
-        return (h("div", { key: '2f956eddb214de168aae134374512600867e77a8', class: "dropi-ilustration" }, this.type === 'dropi' && (h("figure", { key: '3d05624542d51f64cb6402fb958f039bc943afb7', class: "dropi-ilustration__image" }, h("img", { key: '6fb383b378d989f675433c46710e246dc193f26b', src: `assets/icons/ilustration/${(!this.state || String(this.state) === 'undefined' || String(this.state) === 'null') ? 'default' : this.state}.svg`, alt: this.state ?? 'default', onError: (e) => { e.target.src = 'assets/icons/ilustration/default.svg'; } }))), this.type === 'mb' && (h("figure", { key: 'f66957ddbba9506d041ab1b2e8877872b25bdbf3', class: `dropi-ilustration__image-mb ${this.state}` }, ['success', 'error', 'info', 'warning'].includes(this.state) && (h("dropi-icon", { key: '2844c2707906bcba57835c1e7652c52769b504fe', name: this.getIconName(this.state), width: "24px", height: "24px", color: "Neutral-White" })))), this.type === 'insignia' && (h("figure", { key: '4c091e2f415d252ae3cdaa7b62b1e4788192ae6c', class: this.tagProduct ? 'dropi-ilustration-insignia-tag' : 'dropi-ilustration-insignia' }, h("img", { key: 'dc9e11b8ecf525dbfd0c8c147a64e12350c2b6d5', src: this.insigniaIcons[this.stateInsignia], alt: this.stateInsignia }), this.tagProduct && (h("p", { key: '0fa7f6fdd1bb9075d1ef2a09a6701b0b464a746b', class: `tag tag--${this.stateInsignia}` }, h("span", { key: 'dae1336fefa32471ebbc78f1bcdd0c9b1c89dcba', class: "Caption-S" }, this.stateInsignia.charAt(0).toUpperCase() + this.stateInsignia.slice(1))))))));
+        return (h("div", { key: '2f956eddb214de168aae134374512600867e77a8', class: "dropi-ilustration" }, this.type === 'dropi' && (h("figure", { key: '3d05624542d51f64cb6402fb958f039bc943afb7', class: "dropi-ilustration__image" }, h("img", { key: '6fb383b378d989f675433c46710e246dc193f26b', src: `assets/icons/ilustration/${(!this.state || String(this.state) === 'undefined' || String(this.state) === 'null') ? 'default' : this.state}.svg`, alt: this.state ?? 'default', onError: (e) => { e.target.src = 'assets/icons/ilustration/default.svg'; } }))), this.type === 'mb' && (h("figure", { key: 'f66957ddbba9506d041ab1b2e8877872b25bdbf3', class: `dropi-ilustration__image-mb ${this.state}` }, ['success', 'error', 'info', 'warning'].includes(this.state) && (h("dropi-icon", { key: '4f65eb91eb99c07abefc6089c6935b1fb573978b', name: this.getIconName(this.state), iconWidth: "24px", iconHeight: "24px", color: "Neutral-White" })))), this.type === 'insignia' && (h("figure", { key: 'fd0db6cbdc7daf018446f03cf8dd13dbe218733a', class: this.tagProduct ? 'dropi-ilustration-insignia-tag' : 'dropi-ilustration-insignia' }, h("img", { key: '79cd16693eeb848db9c027c8d2e96c6760a9e2ac', src: this.insigniaIcons[this.stateInsignia], alt: this.stateInsignia }), this.tagProduct && (h("p", { key: '58ec25aa47c8756ec11a0fba679194a25dfaad0c', class: `tag tag--${this.stateInsignia}` }, h("span", { key: '8354a3de165526351bc53021218b1fb2a0a4d064', class: "Caption-S" }, this.stateInsignia.charAt(0).toUpperCase() + this.stateInsignia.slice(1))))))));
     }
 };
 DropiIlustrationIcon.style = dropiIlustrationIconCss();

package/dist/esm/dropi-image-miniature.entry.js CHANGED Viewed

@@ -34,7 +34,7 @@ const DropiImageMiniature = class {
     }
     render() {
         const imgs = this.parsedImages;
-        return (h("div", { key: '111d908339df1d3fba74cb8737f3c72e2254e2f0', class: "miniature" }, this.label && h("span", { key: '007ecc8149b6778eac7dd80a978a088f686001eb', class: "miniature__label" }, this.label), h("div", { key: '95c18d71f5c753bd2610915b62632aca7fbd4d16', class: "miniature__grid" }, imgs.map((src, i) => (h("div", { class: "miniature__item", style: { width: this.width, height: this.height }, key: i, onClick: () => this.dropiImageClick.emit({ images: imgs, index: i }) }, h("img", { src: src, alt: `imagen ${i + 1}`, loading: "lazy", onError: (e) => this.handleError(e) }), h("div", { class: "miniature__zoom" }, h("dropi-icon", { name: "Search", width: "16px", height: "16px", color: "Neutral-White" }))))))));
+        return (h("div", { key: '111d908339df1d3fba74cb8737f3c72e2254e2f0', class: "miniature" }, this.label && h("span", { key: '007ecc8149b6778eac7dd80a978a088f686001eb', class: "miniature__label" }, this.label), h("div", { key: '95c18d71f5c753bd2610915b62632aca7fbd4d16', class: "miniature__grid" }, imgs.map((src, i) => (h("div", { class: "miniature__item", style: { width: this.width, height: this.height }, key: i, onClick: () => this.dropiImageClick.emit({ images: imgs, index: i }) }, h("img", { src: src, alt: `imagen ${i + 1}`, loading: "lazy", onError: (e) => this.handleError(e) }), h("div", { class: "miniature__zoom" }, h("dropi-icon", { name: "Search", iconWidth: "16px", iconHeight: "16px", color: "Neutral-White" }))))))));
     }
 };
 DropiImageMiniature.style = dropiImageMiniatureCss();

package/dist/esm/dropi-image-overlay.entry.js CHANGED Viewed

@@ -42,7 +42,7 @@ const DropiImageOverlay = class {
             return null;
         const imgs = this.parsedImages;
         const multi = imgs.length > 1;
-        return (h("div", { class: "overlay", onClick: () => this.close() }, h("button", { class: "overlay__close", onClick: (e) => { e.stopPropagation(); this.close(); }, "aria-label": "Cerrar" }, h("dropi-icon", { name: "Close-large", width: "24px", height: "24px", color: "Neutral-White" })), h("div", { class: { 'overlay__body': true, 'overlay__body--single': !multi }, onClick: (e) => e.stopPropagation() }, multi && (h("div", { class: "overlay__thumbs" }, imgs.map((src, i) => (h("div", { key: i, class: { 'overlay__thumb-box': true, 'overlay__thumb-box--active': i === this.current }, onClick: () => this.current = i }, h("img", { src: src, alt: `miniatura ${i + 1}`, class: "overlay__thumb-img", onError: (e) => this.handleError(e) })))))), h("div", { class: "overlay__content" }, multi && (h("button", { class: "overlay__nav overlay__nav--prev", onClick: () => this.prev(), "aria-label": "Anterior" }, h("dropi-icon", { name: "Dropdown-left", width: "18px", height: "18px", color: "Gray-Gray-500" }))), h("img", { class: "overlay__main-image", src: imgs[this.current], alt: `imagen ${this.current + 1}`, onError: (e) => this.handleError(e) }), multi && (h("button", { class: "overlay__nav overlay__nav--next", onClick: () => this.next(), "aria-label": "Siguiente" }, h("dropi-icon", { name: "Dropdown-Right", width: "18px", height: "18px", color: "Gray-Gray-500" })))))));
+        return (h("div", { class: "overlay", onClick: () => this.close() }, h("button", { class: "overlay__close", onClick: (e) => { e.stopPropagation(); this.close(); }, "aria-label": "Cerrar" }, h("dropi-icon", { name: "Close-large", iconWidth: "24px", iconHeight: "24px", color: "Neutral-White" })), h("div", { class: { 'overlay__body': true, 'overlay__body--single': !multi }, onClick: (e) => e.stopPropagation() }, multi && (h("div", { class: "overlay__thumbs" }, imgs.map((src, i) => (h("div", { key: i, class: { 'overlay__thumb-box': true, 'overlay__thumb-box--active': i === this.current }, onClick: () => this.current = i }, h("img", { src: src, alt: `miniatura ${i + 1}`, class: "overlay__thumb-img", onError: (e) => this.handleError(e) })))))), h("div", { class: "overlay__content" }, multi && (h("button", { class: "overlay__nav overlay__nav--prev", onClick: () => this.prev(), "aria-label": "Anterior" }, h("dropi-icon", { name: "Dropdown-left", iconWidth: "18px", iconHeight: "18px", color: "Gray-Gray-500" }))), h("img", { class: "overlay__main-image", src: imgs[this.current], alt: `imagen ${this.current + 1}`, onError: (e) => this.handleError(e) }), multi && (h("button", { class: "overlay__nav overlay__nav--next", onClick: () => this.next(), "aria-label": "Siguiente" }, h("dropi-icon", { name: "Dropdown-Right", iconWidth: "18px", iconHeight: "18px", color: "Gray-Gray-500" })))))));
     }
     static get watchers() { return {
         "images": [{

package/dist/esm/dropi-input_3.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h } from './index-D5SAM1O2.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, #ffffff);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 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:50%;left:12px;transform:translateY(-50%);z-index:1;display:flex;align-items:center;justify-content:center}.icon-input-password{position:absolute;top:50%;right:13px;transform:translateY(-50%);cursor:pointer;z-index:1;display:flex;align-items:center;justify-content:center}.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, #ffffff);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:40px}.input-container--has-icon label.label-bottom{left:40px}.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) {
@@ -20,7 +20,7 @@ const DropiInput = class {
     internals;
     // ── Identification ──────────────────────────────────────────
     /** Input id. Defaults to label label. */
-    id = '';
+    inputId = '';
     /** Name attribute for native form submission */
     name = '';
     // ── Content ─────────────────────────────────────────────────
@@ -94,7 +94,9 @@ const DropiInput = class {
         if (!val)
             return;
         if (val.id !== undefined)
-            this.id = val.id;
+            this.inputId = val.id;
+        if (val.inputId !== undefined)
+            this.inputId = val.inputId;
         if (val.label !== undefined)
             this.label = val.label;
         if (val.placeholder !== undefined)
@@ -210,7 +212,7 @@ const DropiInput = class {
     }
     // ── Computed ─────────────────────────────────────────────────
     get resolvedId() {
-        return this.id || this.label;
+        return this.inputId || this.label;
     }
     get inputType() {
         if (this.passwordInput)
@@ -231,14 +233,14 @@ const DropiInput = class {
     render() {
         const showObligatoryAsterisk = this.required && this.showObligatoryAsterisk && !this.disabled;
         const showIconInline = !!this.icon;
-        return (h("div", { key: 'cc38b113d77982ba53665a6c8ccbf39a393da696', class: { 'fixed-label-container': this.fixedLabel } }, this.fixedLabel && (h("div", { key: '06bb6b6df585f859dc7a903fac4ed3f9f6c31077', class: "input-label Body-S-Regular" }, this.label, showObligatoryAsterisk && h("span", { key: '6e87d6717a312d7497c2cf438aec7a692b974dda', class: "asterisk" }, " *"))), h("div", { key: '2eb67324cb06e04ee9fc5507a319a2eda8b5e410', class: "form-group" }, h("div", { key: '9d8d6f8df83c33782fd61810267e433fdab452d9', class: { 'input-container': true, 'input-container--has-icon': showIconInline } }, showIconInline && h("dropi-icon", { key: '370070a0e75a929438cb564698ee10c866e944a9', class: "icon-input", name: this.icon, color: this.iconColor, width: "20px", height: "20px" }), this.passwordInput && (h("dropi-icon", { key: '675958939e32a94060993515f9b9a58513ec2adc', class: "icon-input-password", name: this.showPassword ? 'Eye' : 'Eye-crossed', width: "20px", height: "20px", color: "Gray-Gray-500", onClick: () => this.togglePassword() })), h("input", { key: 'd2ac98c43f9863ea8153dc66dd3fe347a7c28473', id: this.resolvedId, class: {
+        return (h("div", { key: 'a6c762070ca5c0ffb5028f1899d4e026721664ee', class: { 'fixed-label-container': this.fixedLabel } }, this.fixedLabel && (h("div", { key: 'fb223818b568114400aa456e595623c882b8bcd2', class: "input-label Body-S-Regular" }, this.label, showObligatoryAsterisk && h("span", { key: '04c522a21ba3e0ec9710d267feb866d79dae7cbb', class: "asterisk" }, " *"))), h("div", { key: '1672e9954f11ad61e6f224953f97aa7036e5b212', class: "form-group" }, h("div", { key: 'd9bfc41486fe3f93d5144f55bf89a4ae1a916f5e', class: { 'input-container': true, 'input-container--has-icon': showIconInline } }, showIconInline && (h("dropi-icon", { key: 'e7d21fd9b115925ed2bc584a6f5c614ea3761922', class: "icon-input", name: this.icon, color: this.iconColor, iconWidth: "20px", iconHeight: "20px", style: { width: '20px', height: '20px' } })), this.passwordInput && (h("dropi-icon", { key: '5593f56ed03acdb79a9e8e4fefac58d585a5a092', class: "icon-input-password", name: this.showPassword ? 'Eye' : 'Eye-crossed', iconWidth: "20px", iconHeight: "20px", style: { width: '20px', height: '20px' }, color: "Gray-Gray-500", onClick: () => this.togglePassword() })), h("input", { key: 'ef70c2be1606334593269be63234295bdbdf86b1', 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 && (h("label", { key: '45eb57801e7d199532215ba069af8ba01714a46f', class: "Body-S-Regular label-bottom", htmlFor: this.resolvedId }, this.label, showObligatoryAsterisk && h("span", { key: '5d4d83ce2575d60567a4a947d643a89f760cb3bd', class: "asterisk" }, " *"))), this.showHelper && (h("div", { key: 'b78fdac5f0c46b827c9dd2895d43a5e1724058d8', class: "form-control-helper" }, this.isInvalid && h("dropi-icon", { key: 'f037c95230fe0fa57540a1b74a26c14e56e555e4', name: "Warning-circle", width: "12px", height: "12px", color: "Error-Error-500" }), h("span", { key: 'fc48f7418c36f7ded7a999e446323ca8adb2b590', 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 && (h("label", { key: 'c0d079355d299b26dc2e8bde4347fd30aa791e21', class: "Body-S-Regular label-bottom", htmlFor: this.resolvedId }, this.label, showObligatoryAsterisk && h("span", { key: 'fca9bc2745e0ccb7ba3b10c4e3e6b5d8bbb6f645', class: "asterisk" }, " *"))), this.showHelper && (h("div", { key: 'f864cc07f591d0948cb06d6dde1e910bab10187a', class: "form-control-helper" }, this.isInvalid && h("dropi-icon", { key: 'be2cf0d632fd8245e817d4023b4e4f060bc80d24', name: "Warning-circle", iconWidth: "12px", iconHeight: "12px", color: "Error-Error-500" }), h("span", { key: '3768369a635e8ac03db24b0ba7fa7a214cc71577', class: {
                 'disabled-helper': this.disabled,
                 'invalid-color': this.isInvalid,
             } }, this.textHelper)))))));
@@ -315,9 +317,9 @@ const DropiPaginator = class {
         const pages = this.pageNumbers;
         const isFirst = this.currentPage <= 1;
         const isLast = this.currentPage >= this.totalPages;
-        return (h("div", { key: 'b601f88e4f971f885835d81fe876303fe97027c7', class: "paginator" }, h("div", { key: '988ffb7ed122d4a666af4525bc85159d8d36538a', class: "paginator-pages" }, !isFirst && !this.noLabels && (h("button", { key: '920a1a407782bde436fb6560caeb39848e9c7e28', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(1), "aria-label": "Primera p\u00E1gina", disabled: this.disabled }, h("dropi-icon", { key: '67bc6ba66852a8883a19b2a3182be3cb298f2c8d', name: "Arrow-double-small-left", width: "16px", height: "16px", color: "Gray-Gray-600" }))), !isFirst && (h("button", { key: 'b1d0c5a8f66056cb53c31b01959177754632a906', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(this.currentPage - 1), "aria-label": "Anterior", disabled: this.disabled }, h("dropi-icon", { key: '951435cbf9b7a8b9bd0e0f33d2c9eacaea6e7af1', name: "Dropdown-left", width: "16px", height: "16px", color: "Gray-Gray-600" }), !this.noLabels && h("span", { key: 'fed8a203b3e62f5da3e6fa055b1ee6e35453147c', class: "paginator-label" }, "Anterior"))), pages.map((p, i) => p === '...'
+        return (h("div", { key: 'b601f88e4f971f885835d81fe876303fe97027c7', class: "paginator" }, h("div", { key: '988ffb7ed122d4a666af4525bc85159d8d36538a', class: "paginator-pages" }, !isFirst && !this.noLabels && (h("button", { key: '920a1a407782bde436fb6560caeb39848e9c7e28', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(1), "aria-label": "Primera p\u00E1gina", disabled: this.disabled }, h("dropi-icon", { key: '249d4f2fc0a7ba2d790e3cf1c7a36a8d853a8cfe', name: "Arrow-double-small-left", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" }))), !isFirst && (h("button", { key: '7b3cbe1cbd33db77fe540b5e179ed759e2d515e9', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(this.currentPage - 1), "aria-label": "Anterior", disabled: this.disabled }, h("dropi-icon", { key: '4f162e4df1573f5b6df40477099c3dc50347b738', name: "Dropdown-left", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" }), !this.noLabels && h("span", { key: 'a569b225a577e3dfb41466247be33846254ba1f6', class: "paginator-label" }, "Anterior"))), pages.map((p, i) => p === '...'
             ? h("span", { class: "paginator-ellipsis", key: `e${i}` }, "\u2026")
-            : h("button", { key: p, class: { 'paginator-btn': true, 'paginator-btn--active': p === this.currentPage }, onClick: () => this.goTo(p), "aria-current": p === this.currentPage ? 'page' : undefined, disabled: this.disabled }, p)), !isLast && (h("button", { key: '35a728e031880403ee0ff984484237ab701bd406', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(this.currentPage + 1), "aria-label": "Siguiente", disabled: this.disabled }, !this.noLabels && h("span", { key: '4a73ba225105e449f8dfe8a504c5b1ad3e9c31cd', class: "paginator-label" }, "Siguiente"), h("dropi-icon", { key: '7b140df9437922acc8c24d6ee1ff15d69ce7b7f1', name: "Dropdown-Right", width: "16px", height: "16px", color: "Gray-Gray-600" }))), !isLast && !this.noLabels && (h("button", { key: '6157fa189ca011be4c13da803d2cd110d882bb8e', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(this.totalPages), "aria-label": "\u00DAltima p\u00E1gina", disabled: this.disabled }, h("dropi-icon", { key: '7b6c1b31d4caed8203b739cc10f3084568e40f10', name: "Arrow-double-small-right", width: "16px", height: "16px", color: "Gray-Gray-600" }))))));
+            : h("button", { key: p, class: { 'paginator-btn': true, 'paginator-btn--active': p === this.currentPage }, onClick: () => this.goTo(p), "aria-current": p === this.currentPage ? 'page' : undefined, disabled: this.disabled }, p)), !isLast && (h("button", { key: 'ad51ec2f21741cf89e0e692cca2057c8cacea9f3', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(this.currentPage + 1), "aria-label": "Siguiente", disabled: this.disabled }, !this.noLabels && h("span", { key: '3eb463a7749ef9f419613c07975a87073df29ecf', class: "paginator-label" }, "Siguiente"), h("dropi-icon", { key: 'a6ece1855840a3ada48de22151bab4a43fd1972e', name: "Dropdown-Right", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" }))), !isLast && !this.noLabels && (h("button", { key: '4ac9168aba1221ad17a08f7463cc2f065ea1ce6f', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(this.totalPages), "aria-label": "\u00DAltima p\u00E1gina", disabled: this.disabled }, h("dropi-icon", { key: '9e3618334ec1d476ea59ea00a600499f47a45a9a', name: "Arrow-double-small-right", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" }))))));
     }
 };
 DropiPaginator.style = dropiPaginatorCss();
@@ -372,7 +374,7 @@ const DropiTag = class {
         return typeof this.text === 'string' && this.text.trim().length > 0;
     }
     render() {
-        return (h("div", { key: '1736efc48b3ccaf5f3ca85ad29622f42b4fb3c8d', class: "container-chips" }, h("div", { key: '96c2b0e9d22881ca71c58488dcd622a1eef1a120', class: { tags: true, 'icon-only': this.showIcon && !this.hasContent }, style: { backgroundColor: this.bgColor, color: this.textColor } }, this.showIcon && this.icon && (h("dropi-icon", { key: 'aab0330382fe0690177edcb364ab043459b9a316', class: "file-icon", name: this.icon, width: "16px", height: "16px", color: this.iconColor })), this.hasContent && h("span", { key: 'be38207ca7668b6b4976d5f3f2f506c380ee0491' }, this.text))));
+        return (h("div", { key: '1736efc48b3ccaf5f3ca85ad29622f42b4fb3c8d', class: "container-chips" }, h("div", { key: '96c2b0e9d22881ca71c58488dcd622a1eef1a120', class: { tags: true, 'icon-only': this.showIcon && !this.hasContent }, style: { backgroundColor: this.bgColor, color: this.textColor } }, this.showIcon && this.icon && (h("dropi-icon", { key: '4c94cf3fcabd31b6b50fc711815472f8b12e43d9', class: "file-icon", name: this.icon, iconWidth: "16px", iconHeight: "16px", color: this.iconColor })), this.hasContent && h("span", { key: '26f06b85d085e58aa854533a9fd238e70957212b' }, this.text))));
     }
     static get watchers() { return {
         "type": [{

package/dist/esm/dropi-languages-selector.entry.js CHANGED Viewed

@@ -43,7 +43,7 @@ const DropiLanguagesSelector = class {
     render() {
         if (!this.currentLang)
             return null;
-        return (h("div", { class: `custom-dropdown${this.isOpen ? ' open' : ''}` }, h("div", { class: "selected-option", onClick: () => { this.isOpen = !this.isOpen; } }, h("dropi-country-flags", { country: this.currentLang.flag, "flag-style": "rectangle", width: "20", height: "15" }), h("span", { class: "Body-S-Regular" }, this.currentLang.label), h("dropi-icon", { name: "Caret-down", width: "16px", height: "16px", color: "Gray-Gray-500" })), h("ul", { class: `dropdown-options${this.isOpen ? ' dropdown-open' : ''}` }, this.parsedLanguages.map(lang => (h("li", { key: lang.code, class: lang.code === this.currentLang?.code ? 'active' : '', onClick: () => this.select(lang) }, h("dropi-country-flags", { country: lang.flag, "flag-style": "rectangle", width: "20", height: "15" }), h("span", { class: "Body-S-Regular" }, lang.label)))))));
+        return (h("div", { class: `custom-dropdown${this.isOpen ? ' open' : ''}` }, h("div", { class: "selected-option", onClick: () => { this.isOpen = !this.isOpen; } }, h("dropi-country-flags", { country: this.currentLang.flag, "flag-style": "rectangle", width: "20", height: "15" }), h("span", { class: "Body-S-Regular" }, this.currentLang.label), h("dropi-icon", { name: "Caret-down", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-500" })), h("ul", { class: `dropdown-options${this.isOpen ? ' dropdown-open' : ''}` }, this.parsedLanguages.map(lang => (h("li", { key: lang.code, class: lang.code === this.currentLang?.code ? 'active' : '', onClick: () => this.select(lang) }, h("dropi-country-flags", { country: lang.flag, "flag-style": "rectangle", width: "20", height: "15" }), h("span", { class: "Body-S-Regular" }, lang.label)))))));
     }
     static get watchers() { return {
         "languages": [{