@dropi/ui 0.1.44 → 0.1.46

package/hydrate/index.js

@@ -135,7 +135,7 @@ const NAMESPACE = 'dropi-ui';
 const BUILD = /* dropi-ui */ { hotModuleReplacement: false, hydratedSelectorName: "hydrated", slotRelocation: true, state: true, updatable: true};
 
 /*
- Stencil Hydrate Platform v4.43.3 | MIT Licensed | https://stenciljs.com
+ Stencil Hydrate Platform v4.43.4 | MIT Licensed | https://stenciljs.com
  */
 var __create = Object.create;
 var __defProp = Object.defineProperty;
@@ -1634,6 +1634,31 @@ var scopeCss = (cssText, scopeId2, commentOriginalSelector) => {
   return cssText;
 };
 
+// src/runtime/normalize-watchers.ts
+var normalizeWatchers = (raw) => {
+  if (!raw) return void 0;
+  const keys = Object.keys(raw);
+  if (keys.length === 0) return void 0;
+  let hasLegacy = false;
+  for (const propName of keys) {
+    if (hasLegacy) break;
+    for (const h2 of raw[propName]) {
+      if (typeof h2 === "string") {
+        hasLegacy = true;
+        break;
+      }
+    }
+  }
+  if (!hasLegacy) return raw;
+  const out = {};
+  for (const propName of keys) {
+    out[propName] = raw[propName].map(
+      (h2) => typeof h2 === "string" ? { [h2]: 0 } : h2
+    );
+  }
+  return out;
+};
+
 // src/utils/remote-value.ts
 var RemoteValue = class _RemoteValue {
   /**
@@ -1730,11 +1755,19 @@ var RemoteValue = class _RemoteValue {
 };
 
 // src/utils/serialize.ts
+function decodeBase64Unicode(base64) {
+  const binary = atob(base64);
+  const bytes = new Uint8Array(binary.length);
+  for (let i2 = 0; i2 < binary.length; i2++) {
+    bytes[i2] = binary.charCodeAt(i2);
+  }
+  return new TextDecoder().decode(bytes);
+}
 function deserializeProperty(value) {
   if (typeof value !== "string" || !value.startsWith(SERIALIZED_PREFIX)) {
     return value;
   }
-  return RemoteValue.fromLocalValue(JSON.parse(atob(value.slice(SERIALIZED_PREFIX.length))));
+  return RemoteValue.fromLocalValue(JSON.parse(decodeBase64Unicode(value.slice(SERIALIZED_PREFIX.length))));
 }
 
 // src/runtime/parse-property-value.ts
@@ -2817,7 +2850,7 @@ var proxyComponent = (Cstr, cmpMeta, flags) => {
   {
     {
       if (Cstr.watchers && !cmpMeta.$watchers$) {
-        cmpMeta.$watchers$ = Cstr.watchers;
+        cmpMeta.$watchers$ = normalizeWatchers(Cstr.watchers);
       }
       if (Cstr.deserializers && !cmpMeta.$deserializers$) {
         cmpMeta.$deserializers$ = Cstr.deserializers;
@@ -2906,7 +2939,7 @@ var initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
         }
         if (!Cstr.isProxied) {
           {
-            cmpMeta.$watchers$ = Cstr.watchers;
+            cmpMeta.$watchers$ = normalizeWatchers(Cstr.watchers);
             cmpMeta.$serializers$ = Cstr.serializers;
             cmpMeta.$deserializers$ = Cstr.deserializers;
           }
@@ -6179,7 +6212,7 @@ class DropiCardCheckbox {
                 'default-card': this.type === 'default',
                 'is-checked': this.isChecked && this.type === 'with card',
                 'disabled': this.disabled,
-            }, onClick: () => this.handleClick() }, hAsync("dropi-checkbox", { key: '0c5c50811559c6472173fced2f04eee4626f118f', checked: this.isChecked, disabled: this.disabled }), hAsync("div", { key: '1cb17bf8aea55a498d451922942b4fba6d99492c', class: "container-text" }, hAsync("div", { key: '6e2eab2ae82c13cb4e7a654cc989530cee1122c6', class: "title-check" }, this.title), this.description && hAsync("div", { key: '040e5d8f633975bf3eb806835aae8aa308b1d4f8', class: "description-text" }, this.description)), (this.extraInfo || this.extraInfoDescription) && (hAsync("div", { key: 'a5c794b5f2fa249b309b2fb00a759aea5b9e0d6c', class: "extra-info" }, this.extraInfo && hAsync("div", { key: '1587e1a0801312fa8e759af2a367b36f842e1354' }, this.extraInfo), this.extraInfoDescription && hAsync("h4", { key: '930811071657dfbbeff7c2bdc4cd2c2776d38177' }, this.extraInfoDescription)))));
+            }, onClick: () => this.handleClick() }, hAsync("dropi-checkbox", { key: '7ac16d56fb2f3a0e415274f1e767ccddf49dc35d', name: "_card-checkbox", checked: this.isChecked, disabled: this.disabled }), hAsync("div", { key: 'a7d782c96ef6a5fad7e98ea2b7c5e5db09dfefe4', class: "container-text" }, hAsync("div", { key: '4cb9ecb3ec80a1ce375cefb044aedd8a6818f1f1', class: "title-check" }, this.title), this.description && hAsync("div", { key: '2f763eba23e8e1c52392cf251d6492e46d9d8c7c', class: "description-text" }, this.description)), (this.extraInfo || this.extraInfoDescription) && (hAsync("div", { key: 'f853d59072a10b4f9e924c6e62132ea3b7c5feca', class: "extra-info" }, this.extraInfo && hAsync("div", { key: '3c198762cd1e70622419959e39c0be41d51b1273' }, this.extraInfo), this.extraInfoDescription && hAsync("h4", { key: 'dc98cf76aa221d1a6cd49002376be6b9c3dcff3a' }, this.extraInfoDescription)))));
     }
     static get style() { return dropiCardCheckboxCss(); }
     static get cmpMeta() { return {
@@ -6327,7 +6360,7 @@ class DropiCardSection {
     render() {
         return (hAsync("div", { key: '06fe2a580fb23484419ea4b1c41a265facb722de', class: "card-section" }, hAsync("div", { key: '1020ea256b0311a200a721387b3ecb8d0f3809ab', class: "card-section__text" }, this.type === 'important'
             ? hAsync("h5", { class: "card-section__title card-section__title--important" }, this.title)
-            : hAsync("h6", { class: "card-section__title" }, this.title), this.description && hAsync("p", { key: '52ea93b6b2736c4c6e3ebb953c2878db90d34b4c', class: "card-section__desc" }, this.description)), hAsync("div", { key: '7ec0ed96e43b45256fd5dec5ee24b0dfd6488403', class: "card-section__control" }, this.typeElement === 'switch' ? (hAsync("dropi-switch", { isChecked: this.isChecked, onDropiChange: (e) => {
+            : hAsync("h6", { class: "card-section__title" }, this.title), this.description && hAsync("p", { key: '52ea93b6b2736c4c6e3ebb953c2878db90d34b4c', class: "card-section__desc" }, this.description)), hAsync("div", { key: '7ec0ed96e43b45256fd5dec5ee24b0dfd6488403', class: "card-section__control" }, this.typeElement === 'switch' ? (hAsync("dropi-switch", { name: "_card-section-switch", isChecked: this.isChecked, onDropiChange: (e) => {
                 this.isChecked = e.detail;
                 this.dropiChange.emit(e.detail);
             } })) : (hAsync("button", { class: "card-section__dropdown-btn", onClick: () => this.dropiClick.emit(), "aria-label": "Expandir" }, hAsync("dropi-icon", { name: "Dropdown-down", iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-500" }))))));
@@ -6540,7 +6573,7 @@ class DropiCheckbox {
     }
     internals;
     /** Name for native form submission */
-    name = '';
+    name;
     /** Whether the checkbox is checked */
     checked = false;
     /** Whether the checkbox is disabled */
@@ -6560,12 +6593,12 @@ class DropiCheckbox {
         this.dropiChange.emit(this.checked);
     }
     render() {
-        return (hAsync("div", { key: '27fec5f03a48c19652c8ae01173dcbb6e3514693', class: "container-dropi-checkbox", onClick: () => this.changeState() }, hAsync("div", { key: '243d07e4444c0dc149ff137258f9ddd58428c438', class: {
+        return (hAsync("div", { key: '091a0802423ae37f0473938259313d97a460645e', class: "container-dropi-checkbox", onClick: () => this.changeState() }, hAsync("div", { key: 'bf5c681b5285a6469e7652422010b3559ac057db', class: {
                 check: true,
                 isCheck: this.checked,
                 noCheck: !this.checked,
                 disabled: this.disabled,
-            } }, hAsync("svg", { key: '7a1fd9c7b3fa575ec263fe5ad48fbc0294a79980', xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 24 24", fill: "none" }, hAsync("path", { key: 'e77e5cd40c71e542a045934641509e41a7cd4899', d: "M20.5991 5.69251L9.08325 17.2075C9.00583 17.2852 8.91382 17.3469 8.8125 17.389C8.71118 17.4311 8.60255 17.4527 8.49283 17.4527C8.38312 17.4527 8.27449 17.4311 8.17317 17.389C8.07185 17.3469 7.97984 17.2852 7.90242 17.2075L3.44908 12.75C3.37166 12.6723 3.27965 12.6106 3.17833 12.5685C3.07701 12.5264 2.96838 12.5048 2.85867 12.5048C2.74896 12.5048 2.64032 12.5264 2.53901 12.5685C2.43769 12.6106 2.34568 12.6723 2.26825 12.75C2.19052 12.8274 2.12884 12.9194 2.08676 13.0208C2.04467 13.1221 2.02301 13.2307 2.02301 13.3404C2.02301 13.4501 2.04467 13.5588 2.08676 13.6601C2.12884 13.7614 2.19052 13.8534 2.26825 13.9308L6.72325 18.385C7.19321 18.8541 7.83008 19.1175 8.49408 19.1175C9.15809 19.1175 9.79496 18.8541 10.2649 18.385L21.7799 6.87251C21.8575 6.7951 21.9191 6.70314 21.9611 6.6019C22.0031 6.50065 22.0247 6.39212 22.0247 6.28251C22.0247 6.17289 22.0031 6.06436 21.9611 5.96312C21.9191 5.86188 21.8575 5.76992 21.7799 5.69251C21.7025 5.61478 21.6105 5.5531 21.5092 5.51101C21.4078 5.46893 21.2992 5.44727 21.1895 5.44727C21.0798 5.44727 20.9712 5.46893 20.8698 5.51101C20.7685 5.5531 20.6765 5.61478 20.5991 5.69251Z", fill: "#FFFFFF" })))));
+            } }, hAsync("svg", { key: 'be7eecf60b8f45fa6ebaa7c43d6a2087c79f02d0', xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 24 24", fill: "none" }, hAsync("path", { key: '6eda9ca377ab8480479f3f2ad880895dd9b54b9d', d: "M20.5991 5.69251L9.08325 17.2075C9.00583 17.2852 8.91382 17.3469 8.8125 17.389C8.71118 17.4311 8.60255 17.4527 8.49283 17.4527C8.38312 17.4527 8.27449 17.4311 8.17317 17.389C8.07185 17.3469 7.97984 17.2852 7.90242 17.2075L3.44908 12.75C3.37166 12.6723 3.27965 12.6106 3.17833 12.5685C3.07701 12.5264 2.96838 12.5048 2.85867 12.5048C2.74896 12.5048 2.64032 12.5264 2.53901 12.5685C2.43769 12.6106 2.34568 12.6723 2.26825 12.75C2.19052 12.8274 2.12884 12.9194 2.08676 13.0208C2.04467 13.1221 2.02301 13.2307 2.02301 13.3404C2.02301 13.4501 2.04467 13.5588 2.08676 13.6601C2.12884 13.7614 2.19052 13.8534 2.26825 13.9308L6.72325 18.385C7.19321 18.8541 7.83008 19.1175 8.49408 19.1175C9.15809 19.1175 9.79496 18.8541 10.2649 18.385L21.7799 6.87251C21.8575 6.7951 21.9191 6.70314 21.9611 6.6019C22.0031 6.50065 22.0247 6.39212 22.0247 6.28251C22.0247 6.17289 22.0031 6.06436 21.9611 5.96312C21.9191 5.86188 21.8575 5.76992 21.7799 5.69251C21.7025 5.61478 21.6105 5.5531 21.5092 5.51101C21.4078 5.46893 21.2992 5.44727 21.1895 5.44727C21.0798 5.44727 20.9712 5.46893 20.8698 5.51101C20.7685 5.5531 20.6765 5.61478 20.5991 5.69251Z", fill: "#FFFFFF" })))));
     }
     static get formAssociated() { return true; }
     static get watchers() { return {
@@ -6649,7 +6682,7 @@ class DropiCheckboxSelectionList {
                 this.dropiSearch.emit(this.filterText);
             } }), this.filterText && (hAsync("button", { key: 'a560cab7ce53e57e036696194054286aa1dd6fd9', class: "csl__clear", onClick: () => { this.filterText = ''; this.dropiSearch.emit(''); } }, hAsync("dropi-icon", { key: 'f1ae7e38fcb954761edb02bb32af139fb5eea610', name: "Close-small", iconWidth: "14px", iconHeight: "14px", color: "Gray-Gray-400" }))))), hAsync("div", { key: 'e93dfccc8215e96640ebe8c69f33f0bff5f655f2', class: "csl__list" }, items.length === 0 && this.showNotFound ? (hAsync("div", { class: "csl__empty" }, this.notFoundMessage)) : (items.map(opt => {
             const checked = this.selected.includes(opt.id);
-            return (hAsync("div", { class: "csl__item", key: opt.id, onClick: () => this.toggle(opt.id) }, hAsync("dropi-checkbox", { checked: checked }), opt.icon && hAsync("img", { class: "csl__icon", src: opt.icon, alt: opt.label }), hAsync("span", { class: "csl__label" }, opt.label)));
+            return (hAsync("div", { class: "csl__item", key: opt.id, onClick: () => this.toggle(opt.id) }, hAsync("dropi-checkbox", { name: "_csl-option", checked: checked }), opt.icon && hAsync("img", { class: "csl__icon", src: opt.icon, alt: opt.label }), hAsync("span", { class: "csl__label" }, opt.label)));
         })))));
     }
     static get watchers() { return {
@@ -7376,7 +7409,7 @@ class DropiCountrySelector {
     }
     internals;
     /** Name for native form submission */
-    name = '';
+    name;
     /** Label above the select */
     label = '';
     /** Placeholder when nothing is selected */
@@ -7515,11 +7548,11 @@ class DropiCountrySelector {
         this.dropiChange.emit(country);
     }
     render() {
-        return (hAsync("div", { key: '98292dbf6f84139b409cefe4690fb5ce834372c7', class: "custom-select" }, this.label && (hAsync("label", { key: '7dd60d54e701108f7061623a89e8ff29edbb8dc6' }, this.label, this.showObligatory && hAsync("span", { key: '971fd2a900d9ef4740a96145cadc948aab95232a', class: "required" }, "*"))), hAsync("button", { key: '6c0067cfaf920160a4f8c05f59c34f3539540d29', type: "button", ref: (el) => { this.buttonRef = el; }, class: {
+        return (hAsync("div", { key: '1e590f390f45a91df010db5a25139f5a5b234105', class: "custom-select" }, this.label && (hAsync("label", { key: '073b9c7fb9c09d0addf66bce1c132632ab726b70' }, this.label, this.showObligatory && hAsync("span", { key: '8471da6b6004c35e71d04c0d649a796391ffb703', class: "required" }, "*"))), hAsync("button", { key: '45fdbd8ae914084fd713708947ee6b2256b78b32', type: "button", ref: (el) => { this.buttonRef = el; }, class: {
                 'select-button': true,
                 'select-completed': !!this.selected,
                 'select-invalid': this.hasError,
-            }, disabled: this.disabled, onClick: () => this.open() }, hAsync("div", { key: 'b28c2c5b0de9b8052bb920a272b9dcc51f4eac6f', class: "selected-content" }, this.selected ? (hAsync("span", { class: "selected-option" }, hAsync("img", { class: "flag-img", src: `https://flagsapi.com/${this.selected.code}/shiny/24.png`, alt: this.selected.name }), this.selected.name)) : (hAsync("span", { class: "placeholder-text" }, this.placeholder))), hAsync("dropi-icon", { key: '2ec568b0ad4efdb3a22ffceb1e85fbc6f1d483e8', name: this.isOpen ? 'Arrow-Up-2' : 'Arrow-Down-2', iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-500" })), hAsync("ul", { key: '34f0e5772ebb21e85cb246cbb91196d128d9ca59', class: `select-dropdown${this.isOpen ? ' expanded' : ' collapsed'}` }, hAsync("li", { key: '77cdf81222a7c593f1d54198e2b897468db890a5', class: "search-li" }, hAsync("div", { key: '970723feefd04adf0b113ae63931092f58d0264a', class: "search-field" }, hAsync("input", { key: '294868580087dc1bdb04258ad84672f3d10e7ba7', ref: (el) => { this.searchInputRef = el; }, type: "text", class: "country-search", placeholder: "Buscar pa\u00EDs...", value: this.searchTerm, onInput: (e) => { this.searchTerm = e.target.value; } }), hAsync("span", { key: '02781dc595e568865ab5ae14aeed326b71b36e10', class: "search-icon" }, hAsync("dropi-icon", { key: '0c06d5e5f26d2a2e5ec20967a2ebb9430397f3ea', name: "Search", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-400" })))), this.filtered.map(country => (hAsync("li", { key: country.code }, hAsync("button", { class: "option", type: "button", onClick: () => this.select(country) }, hAsync("img", { class: "flag-img", src: `https://flagsapi.com/${country.code}/shiny/24.png`, alt: country.name }), country.name))))), this.textHelper && (hAsync("div", { key: 'aae58bc17bbb6953a676818fe02da94b5a4e9f73', class: { 'select-helper': true, 'select-helper-error': this.hasError } }, this.hasError && hAsync("dropi-icon", { key: '7542ef4620499957711079c587f6cb650096f6d3', name: "Warning-circle", iconWidth: "12px", iconHeight: "12px", color: "Error-Error-500" }), hAsync("span", { key: 'ea4c5cedd3b87444a90b4e210f7afa3a318a4832' }, this.textHelper)))));
+            }, disabled: this.disabled, onClick: () => this.open() }, hAsync("div", { key: '75100da9fe6ca3b3e1c60d446374a1ed90ab8419', class: "selected-content" }, this.selected ? (hAsync("span", { class: "selected-option" }, hAsync("img", { class: "flag-img", src: `https://flagsapi.com/${this.selected.code}/shiny/24.png`, alt: this.selected.name }), this.selected.name)) : (hAsync("span", { class: "placeholder-text" }, this.placeholder))), hAsync("dropi-icon", { key: '3d4ffee3933d05e02236f1283128cb30a876870f', name: this.isOpen ? 'Arrow-Up-2' : 'Arrow-Down-2', iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-500" })), hAsync("ul", { key: '5ab2559993f7100c52749b57e15b42605ca503b2', class: `select-dropdown${this.isOpen ? ' expanded' : ' collapsed'}` }, hAsync("li", { key: 'da243d50aa04ab24f2ac6b20dd152031458cd474', class: "search-li" }, hAsync("div", { key: 'b27ca2961821252eed8b2917b47b5c03674f5af6', class: "search-field" }, hAsync("input", { key: '4438520038bcf88efabf67d9e6745b51b7f089d3', ref: (el) => { this.searchInputRef = el; }, type: "text", class: "country-search", placeholder: "Buscar pa\u00EDs...", value: this.searchTerm, onInput: (e) => { this.searchTerm = e.target.value; } }), hAsync("span", { key: 'd8753c452b5054e23213b94e83884f5297862abc', class: "search-icon" }, hAsync("dropi-icon", { key: '3fac8e38cf990990a91a8dfda4701796237e8c44', name: "Search", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-400" })))), this.filtered.map(country => (hAsync("li", { key: country.code }, hAsync("button", { class: "option", type: "button", onClick: () => this.select(country) }, hAsync("img", { class: "flag-img", src: `https://flagsapi.com/${country.code}/shiny/24.png`, alt: country.name }), country.name))))), this.textHelper && (hAsync("div", { key: '68bd0e375e7f31e1927a8179070e832d4fe20c94', class: { 'select-helper': true, 'select-helper-error': this.hasError } }, this.hasError && hAsync("dropi-icon", { key: '6328385caf1f3518c9fa0da9f30469d12c0940ef', name: "Warning-circle", iconWidth: "12px", iconHeight: "12px", color: "Error-Error-500" }), hAsync("span", { key: '704ee063a80566aed85849c2649c399796069e86' }, this.textHelper)))));
     }
     static get formAssociated() { return true; }
     static get watchers() { return {
@@ -7583,7 +7616,7 @@ class DropiDatePicker {
     }
     internals;
     /** Name for native form submission */
-    name = '';
+    name;
     /** Selected date (ISO string, single mode) - matches Angular 'selectedDate' */
     selectedDate = '';
     /** Range start date (ISO string, range mode) */
@@ -7755,12 +7788,12 @@ class DropiDatePicker {
     render() {
         const days = this.buildDays();
         const today = new Date().toISOString().slice(0, 10);
-        return (hAsync("div", { key: '97a96b56b0e8ae551f747bad4a3459a1f4945411', class: "dp-wrap" }, this.label && hAsync("label", { key: 'a1792032ab9ae2dbe574f50b7a537df687eae40c', class: "dp-label" }, this.label), hAsync("button", { key: '4237c2b988f1e9fbaa77dc2a989964216e3fe902', class: {
+        return (hAsync("div", { key: 'd2f6248ff409e53e916e266ab5d23136e9da76d0', class: "dp-wrap" }, this.label && hAsync("label", { key: 'ba51f4091f18437e4449c05378def5b099883acd', class: "dp-label" }, this.label), hAsync("button", { key: '88eb474ca75c9b62996765bdb4816a8cfc14bb8e', class: {
                 'dp-trigger': true,
                 '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" }, hAsync("dropi-icon", { key: '39591fedb92b92e6507b564fc8c145711f1a21b1', name: "Calendar", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-400" }), hAsync("span", { key: '305e3f81d64c01603687d53edc59e1d19ef06c3c', class: { 'dp-trigger__value': true, 'dp-trigger__placeholder': !this.displayValue } }, this.displayValue || this.placeholder), hAsync("dropi-icon", { key: '13feb346ad7b07a7e2f208e299f62a8261a97655', name: "Arrow-Down-2", iconWidth: "12px", iconHeight: "12px", color: "Gray-Gray-400" })), this.open && (hAsync("div", { key: '4cdf8a69422a0b54d0f7c1a6711a683dab7d1f34', class: "dp-popup" }, hAsync("div", { key: '0c6fb31094003c66c5b471e738dd75e7b865401f', class: "dp-nav" }, hAsync("button", { key: '4fa24f9450cf6c5e888cea374619e14245c0c005', class: "dp-nav__btn", onClick: () => this.prevMonth(), type: "button" }, hAsync("dropi-icon", { key: '2196f85700b252d4f83536f11ed197c083fc45ec', name: "Arrow-Left-2", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" })), hAsync("span", { key: '01619de7c5218b506f75234745f3184af813a491', class: "dp-nav__title" }, hAsync("span", { key: '8074e7deeb6c102bad7f1911739e785187783a7c' }, MONTHS_ES[this.viewMonth]), hAsync("span", { key: '69e9c3b41361e293a843f911b5bcf4690995d2b4' }, this.viewYear)), hAsync("button", { key: '51c0ad3da96835736170fbf94338fd70c942c3d2', class: "dp-nav__btn", onClick: () => this.nextMonth(), type: "button" }, hAsync("dropi-icon", { key: '24eb4385639c9a71f5312f32b33b36593c2b0259', name: "Arrow-Right-2", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" }))), hAsync("div", { key: 'c18cecd81af38b3a6f23402501011c09b8b453d7', class: "dp-grid" }, DAYS_ES.map(d => (hAsync("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" }, hAsync("dropi-icon", { key: '1044cef59317f88cc472d2a466a6937a0c4d58f7', name: "Calendar", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-400" }), hAsync("span", { key: '6a7c5687cd06b9b2f42c256bc03ff0f412ca5573', class: { 'dp-trigger__value': true, 'dp-trigger__placeholder': !this.displayValue } }, this.displayValue || this.placeholder), hAsync("dropi-icon", { key: '4be1fc67ed6f9ffb5a5d936e3e8d8330bb91fb0b', name: "Arrow-Down-2", iconWidth: "12px", iconHeight: "12px", color: "Gray-Gray-400" })), this.open && (hAsync("div", { key: '5ad107e256d62a46b57e4bd1bebead70ecc8e46c', class: "dp-popup" }, hAsync("div", { key: 'e3d51afbd24df88867777e43c9bd63dd41c3f542', class: "dp-nav" }, hAsync("button", { key: '8819f79389c1d50ec639f719228aab88be4d0335', class: "dp-nav__btn", onClick: () => this.prevMonth(), type: "button" }, hAsync("dropi-icon", { key: 'a17004ad24ce40590474d91227a826f46edf50ba', name: "Arrow-Left-2", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" })), hAsync("span", { key: 'e91c8a46b963a1e7f0d01c56610c2e4bb6fa3d39', class: "dp-nav__title" }, hAsync("span", { key: '214a575cbd83e8c3bafe64ffbd93e914119b09aa' }, MONTHS_ES[this.viewMonth]), hAsync("span", { key: '1f71a83e7110bf8a91f7b5e14e0400b09ba28e1a' }, this.viewYear)), hAsync("button", { key: '21dbc0fdaabc423bd864bfb33ba314b72ca62d48', class: "dp-nav__btn", onClick: () => this.nextMonth(), type: "button" }, hAsync("dropi-icon", { key: 'f248e65855555878afdbda7d1ba9a802d9eae4d5', name: "Arrow-Right-2", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" }))), hAsync("div", { key: '4fb29792028bf2132ea78a105c7694cf3806ff05', class: "dp-grid" }, DAYS_ES.map(d => (hAsync("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;
@@ -7782,12 +7815,12 @@ class DropiDatePicker {
                     if (this.selectionMode === 'range' && this.startDate && !this.endDate)
                         this.hoverDate = iso;
                 }, onMouseLeave: () => this.hoverDate = '' }, day));
-        })), hAsync("div", { key: '594f280cb269c32ac3a129401e13b710af1a7c7e', class: "dp-footer" }, hAsync("button", { key: '6028ef84bc17f0d1bb0fd587a991698a8fc69338', class: "dp-footer__clear", type: "button", onClick: () => {
+        })), hAsync("div", { key: '9c670c5ad5a6115b628d5a7bd3a2422c7631e237', class: "dp-footer" }, hAsync("button", { key: 'f939595cde989ea0bd462a3d94c6333b5220d1ee', class: "dp-footer__clear", type: "button", onClick: () => {
                 this.selectedDate = '';
                 this.startDate = '';
                 this.endDate = '';
                 this.open = false;
-            } }, "Limpiar"), hAsync("button", { key: 'ab01840a18d657621205d4fba69cc53feb474d11', class: "dp-footer__today", type: "button", onClick: () => {
+            } }, "Limpiar"), hAsync("button", { key: '87b88413962d73229f0cac5a15918b9cd7aebea3', class: "dp-footer__today", type: "button", onClick: () => {
                 if (this.selectionMode !== 'range') {
                     this.selectedDate = today;
                     this.open = false;
@@ -8127,7 +8160,7 @@ class DropiDropdown {
         return (hAsync("div", { key: '274caba83e2f697257e3803b85517a31d4f0aea8', class: containerClass, style: { '--custom-height': customHeight } }, this.parsedOptions.map((opt, i) => {
             const label = opt[this.valueModel] ?? String(opt);
             const active = !!opt.checked || this.isSelected(opt);
-            return (hAsync("div", { class: "content-dropdown", key: i }, hAsync("div", { class: { 'container-check-dropdown': true, 'active-option': active }, onClick: () => this.toggleOption(opt) }, this.parameters.type === 'checkbox' && (hAsync("dropi-checkbox", { checked: active })), this.parameters.iconCurrier && (hAsync("dropi-avatars", { image: opt[this.valueModel], type: "transport" })), this.parameters.icon && (hAsync("dropi-avatars", { image: opt.image, type: "transport" })), hAsync("span", { class: "Body-M-Regular" }, label))));
+            return (hAsync("div", { class: "content-dropdown", key: i }, hAsync("div", { class: { 'container-check-dropdown': true, 'active-option': active }, onClick: () => this.toggleOption(opt) }, this.parameters.type === 'checkbox' && (hAsync("dropi-checkbox", { name: "_dropdown-option", checked: active })), this.parameters.iconCurrier && (hAsync("dropi-avatars", { image: opt[this.valueModel], type: "transport" })), this.parameters.icon && (hAsync("dropi-avatars", { image: opt.image, type: "transport" })), hAsync("span", { class: "Body-M-Regular" }, label))));
         })));
     }
     static get watchers() { return {
@@ -8618,6 +8651,8 @@ class DropiIcon {
     color = 'currentColor';
     /** Stroke width for icons that use strokes */
     strokeWidth = '';
+    /** URL to the SVG sprite file. Defaults to dropi-lib-icons path in node_modules. */
+    spritePath = '/node_modules/dropi-lib-icons/dist/sprite.svg';
     widthChanged() {
         this.updateHostStyles();
     }
@@ -8658,7 +8693,7 @@ class DropiIcon {
         this.el.style.setProperty('--icon-fill', fill);
     }
     render() {
-        return (hAsync("svg", { key: '99f511720c6654b3f97490c966061520ee17d27f', width: this.iconWidth, height: this.iconHeight, class: { spin: (this.name ?? '') === 'Spinner' }, "aria-hidden": "true" }, hAsync("use", { key: '04792170d8c23b3606249d051f8cc903bd5d1211', href: `/assets/icons/symbol/svg/sprite.css.svg#${this.name ?? ''}` })));
+        return (hAsync("svg", { key: 'c994616a46f7f1b85c572c5b4a6c48144396fb8a', width: this.iconWidth, height: this.iconHeight, class: { spin: (this.name ?? '') === 'Spinner' }, "aria-hidden": "true" }, hAsync("use", { key: '623109aad17765228e4fb5b4e7c8846e123dbfc9', href: `${this.spritePath}#${(this.name ?? '').toLowerCase()}` })));
     }
     static get watchers() { return {
         "iconWidth": [{
@@ -8683,7 +8718,8 @@ class DropiIcon {
             "iconWidth": [1, "icon-width"],
             "iconHeight": [1, "icon-height"],
             "color": [1],
-            "strokeWidth": [1, "stroke-width"]
+            "strokeWidth": [1, "stroke-width"],
+            "spritePath": [1, "sprite-path"]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
@@ -8713,11 +8749,15 @@ class DropiIlustrationIcon {
     stateInsignia = 'verified';
     /** Show insignia as tag with label (for product cards) */
     tagProduct = false;
-    insigniaIcons = {
-        verified: 'assets/icons/ilustration/verified-new.svg',
-        premium: 'assets/icons/ilustration/premium-new.svg',
-        exclusive: 'assets/icons/ilustration/exclusive.svg',
-    };
+    /** Base path for illustration assets. Override if assets are served from a different location. */
+    basePath = '/node_modules/@dropi/ui/assets/icons/ilustration';
+    get insigniaIcons() {
+        return {
+            verified: `${this.basePath}/verified-new.svg`,
+            premium: `${this.basePath}/premium-new.svg`,
+            exclusive: `${this.basePath}/exclusive.svg`,
+        };
+    }
     getIconName(state) {
         const map = {
             success: 'Check-circle',
@@ -8728,7 +8768,7 @@ class DropiIlustrationIcon {
         return map[state] || 'Comment-round_info';
     }
     render() {
-        return (hAsync("div", { key: 'd7fa7fce7346d3496ae99c580dee9de5fea934b8', class: "dropi-ilustration" }, this.type === 'dropi' && (hAsync("figure", { key: 'faa5686e775ac3a373037b6e1f9bf32076cfb495', class: "dropi-ilustration__image" }, hAsync("img", { key: '209017a72b774b3e14c8e34f7e3bface75ba592b', 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' && (hAsync("figure", { key: '75c82f5356c427d4ed35db3e9697d232e7f1b132', class: `dropi-ilustration__image-mb ${this.state}` }, ['success', 'error', 'info', 'warning'].includes(this.state) && (hAsync("dropi-icon", { key: '86a371bef276d6c945959405d39cea3a8dcecde3', name: this.getIconName(this.state), iconWidth: "24px", iconHeight: "24px", color: "Neutral-White" })))), this.type === 'insignia' && (hAsync("figure", { key: 'c1bef5162ba49d8493a1c8d6b16d886543215046', class: this.tagProduct ? 'dropi-ilustration-insignia-tag' : 'dropi-ilustration-insignia' }, hAsync("img", { key: '8d1313457cda0f356f278f095b42d75d960a1c27', src: this.insigniaIcons[this.stateInsignia], alt: this.stateInsignia }), this.tagProduct && (hAsync("p", { key: '303cce4a3a632e9e36f8c7e6d186b56cec9c5ed6', class: `tag tag--${this.stateInsignia}` }, hAsync("span", { key: '3c2b051198e41dcfc2944aa7b1f869ba30e56c2a', class: "Caption-S" }, this.stateInsignia.charAt(0).toUpperCase() + this.stateInsignia.slice(1))))))));
+        return (hAsync("div", { key: '452266c0500ed2426ae0b0d7552a735c0022500b', class: "dropi-ilustration" }, this.type === 'dropi' && (hAsync("figure", { key: '4ac1e8e482b5b80df9dceaa93630308b52d5db0d', class: "dropi-ilustration__image" }, hAsync("img", { key: '019a5c80798fc898a08ce851ab69b381d784e3f9', src: `${this.basePath}/${(!this.state || String(this.state) === 'undefined' || String(this.state) === 'null') ? 'default' : this.state}.svg`, alt: this.state ?? 'default', onError: (e) => { e.target.src = `${this.basePath}/default.svg`; } }))), this.type === 'mb' && (hAsync("figure", { key: 'e7416f766fe3c0d633379bd9172ecfbb4b7f2a43', class: `dropi-ilustration__image-mb ${this.state}` }, ['success', 'error', 'info', 'warning'].includes(this.state) && (hAsync("dropi-icon", { key: 'c0fdd2564c0c0f821987cb13a519837a71afddbc', name: this.getIconName(this.state), iconWidth: "24px", iconHeight: "24px", color: "Neutral-White" })))), this.type === 'insignia' && (hAsync("figure", { key: '8f1f4ace45532d06dbc38d34b3e1e32317d542b7', class: this.tagProduct ? 'dropi-ilustration-insignia-tag' : 'dropi-ilustration-insignia' }, hAsync("img", { key: '0d114a0b12bb3d31c222a34b09a47bd6a42e1dba', src: this.insigniaIcons[this.stateInsignia], alt: this.stateInsignia, onError: (e) => { e.target.src = `${this.basePath}/default.svg`; } }), this.tagProduct && (hAsync("p", { key: 'd1ef34a4fd92ee7b97a5a224d9a21b9e54976989', class: `tag tag--${this.stateInsignia}` }, hAsync("span", { key: '72ea7cef3bbc86f6330abb9c4f34c89e62ac3417', class: "Caption-S" }, this.stateInsignia.charAt(0).toUpperCase() + this.stateInsignia.slice(1))))))));
     }
     static get style() { return dropiIlustrationIconCss(); }
     static get cmpMeta() { return {
@@ -8738,7 +8778,8 @@ class DropiIlustrationIcon {
             "type": [1],
             "state": [1],
             "stateInsignia": [1, "state-insignia"],
-            "tagProduct": [4, "tag-product"]
+            "tagProduct": [4, "tag-product"],
+            "basePath": [1, "base-path"]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
@@ -8913,9 +8954,9 @@ class DropiInput {
     internals;
     // ── Identification ──────────────────────────────────────────
     /** Input id. Defaults to label label. */
-    inputId = '';
+    inputId;
     /** Name attribute for native form submission */
-    name = '';
+    name;
     // ── Content ─────────────────────────────────────────────────
     /** Floating or fixed label text */
     label = '';
@@ -8949,6 +8990,8 @@ class DropiInput {
     allowDecimals = false;
     /** Only allow letter characters */
     isLettersOnly = false;
+    /** HTML autocomplete attribute value */
+    autocomplete = 'on';
     // ── Icon ────────────────────────────────────────────────────
     /** Icon name shown inside the input (only visible when value is not empty) */
     icon = '';
@@ -9105,7 +9148,7 @@ class DropiInput {
     }
     // ── Computed ─────────────────────────────────────────────────
     get resolvedId() {
-        return this.inputId || this.label;
+        return this.inputId || this.name;
     }
     get inputType() {
         if (this.passwordInput)
@@ -9126,14 +9169,14 @@ class DropiInput {
     render() {
         const showObligatoryAsterisk = this.required && this.showObligatoryAsterisk && !this.disabled;
         const showIconInline = !!this.icon;
-        return (hAsync("div", { key: '6af757e1d86bfe96d471e9cbed258a50727ae190', class: { 'fixed-label-container': this.fixedLabel } }, this.fixedLabel && (hAsync("div", { key: 'e88bf81fd2b79933e386c2e5fa38f57d85cfe836', class: "input-label Body-S-Regular" }, this.label, showObligatoryAsterisk && hAsync("span", { key: 'be8ec1b0d3ef624ca22e58ae072917ad2ecc79fb', class: "asterisk" }, " *"))), hAsync("div", { key: '4806c0d250f00bb08788d9d6aa935ca15f2aa826', class: "form-group" }, hAsync("div", { key: 'b9fa243d299bcd165458947d6695fcc845764276', class: { 'input-container': true, 'input-container--has-icon': showIconInline } }, showIconInline && (hAsync("dropi-icon", { key: '92b3cf11803745784f13e908ea88992f76c74473', class: "icon-input", name: this.icon, color: this.iconColor, iconWidth: "20px", iconHeight: "20px", style: { width: '20px', height: '20px' } })), this.passwordInput && (hAsync("dropi-icon", { key: 'c7dc725d577a6d4afb7f87c8b53b16c621de9e86', 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() })), hAsync("input", { key: '8146ae1794cbe1f200bb681358c7319f10faab3c', id: this.resolvedId, class: {
+        return (hAsync("div", { key: 'a16b56b6be24372be1fc0a16e65d13bfea3dcf0f', class: { 'fixed-label-container': this.fixedLabel } }, this.fixedLabel && (hAsync("label", { key: '0030ccbc829d16aa17a954624933106752f972bc', class: "input-label Body-S-Regular", htmlFor: this.resolvedId }, this.label, showObligatoryAsterisk && hAsync("span", { key: 'f1476695b9778aa767e121f5d5ace0e36b4fb9a0', class: "asterisk" }, " *"))), hAsync("div", { key: '1e3dee560139338f206dd4c94fa52e1c248e6da6', class: "form-group" }, hAsync("div", { key: '7c1a2754de046eac9c39a005495fa391a7b7b02e', class: { 'input-container': true, 'input-container--has-icon': showIconInline } }, showIconInline && (hAsync("dropi-icon", { key: 'e2ba6416f090d563206e3d98e9f3ab76f197df20', class: "icon-input", name: this.icon, color: this.iconColor, iconWidth: "20px", iconHeight: "20px", style: { width: '20px', height: '20px' } })), this.passwordInput && (hAsync("dropi-icon", { key: 'bf2b58fa9cf0d3dbb470fb3bb4466545d4bc6a75', 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() })), hAsync("input", { key: '51a1de81d4200c79f46b61afef165fdad0ebb061', 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 && (hAsync("label", { key: '005d15af6b50b2cb2d47ac8381a722794eb273e5', class: "Body-S-Regular label-bottom", htmlFor: this.resolvedId }, this.label, showObligatoryAsterisk && hAsync("span", { key: 'ad56df877cff3df8a801cdfcb607d9af02f7465a', class: "asterisk" }, " *"))), this.showHelper && (hAsync("div", { key: '76e858c13a798f69b2d20ee9908f17531568dad1', class: "form-control-helper" }, this.isInvalid && hAsync("dropi-icon", { key: '3e42ffb4db7444ebfb49cc9c6720d5a9d02b2860', name: "Warning-circle", iconWidth: "12px", iconHeight: "12px", color: "Error-Error-500" }), hAsync("span", { key: '5e970903eb51ca6b72a43bef0edf6ef149443247', class: {
+            }, type: this.inputType, value: this.value, placeholder: this.fixedLabel ? this.placeholder : ' ', disabled: this.disabled, required: this.required, maxLength: this.maxLength, inputMode: this.inputMode, autoComplete: this.autocomplete, "data-cy": undefined, onInput: e => this.handleInput(e), onKeyDown: e => this.handleKeyDown(e), onFocus: () => this.handleFocus(), onBlur: () => this.handleBlur() }), !this.fixedLabel && (hAsync("label", { key: '38b78f85551b8c9f6dee1c85e48fa67149f58e29', class: "Body-S-Regular label-bottom", htmlFor: this.resolvedId }, this.label, showObligatoryAsterisk && hAsync("span", { key: 'd23e87d325e6c051c04a0eb0671a53d8cec05b41', class: "asterisk" }, " *"))), this.showHelper && (hAsync("div", { key: '84e228278687d583ffa056c4540da63356aeaa1f', class: "form-control-helper" }, this.isInvalid && hAsync("dropi-icon", { key: 'f26a6e681a262c2f348412e4bf9055e417e76261', name: "Warning-circle", iconWidth: "12px", iconHeight: "12px", color: "Error-Error-500" }), hAsync("span", { key: '9e0376883c4727d84aec3f4c7da7d76196639740', class: {
                 'disabled-helper': this.disabled,
                 'invalid-color': this.isInvalid,
             } }, this.textHelper)))))));
@@ -9172,6 +9215,7 @@ class DropiInput {
             "isNumericInput": [1028, "is-numeric-input"],
             "allowDecimals": [1028, "allow-decimals"],
             "isLettersOnly": [1028, "is-letters-only"],
+            "autocomplete": [1],
             "icon": [1025],
             "iconColor": [1025, "icon-color"],
             "hasError": [1028, "has-error"],
@@ -9327,7 +9371,7 @@ class DropiLottieLoader {
     /** Show or hide the loader */
     visible = true;
     /** Path to the Lottie JSON animation file */
-    loadingAnimation = '/assets/lottie-files/loading.json';
+    loadingAnimation = '/node_modules/@dropi/ui/assets/lottie-files/loading.json';
     /** Title shown below the animation */
     title = 'Cargando...';
     /** Descriptive message below the title */
@@ -9839,7 +9883,7 @@ class DropiOtpSendCode {
     }
     internals;
     /** Name for native form submission */
-    name = '';
+    name;
     /** Delivery method label */
     engine = 'email';
     /** Contact info (email/phone to show in label) */
@@ -9932,14 +9976,14 @@ class DropiOtpSendCode {
     }
     render() {
         const engineLabel = this.engine === 'sms' ? 'SMS' : this.engine === '2fa' ? 'autenticador' : 'correo';
-        return (hAsync("div", { key: 'ee2e6766c4b220a1a12b8734747138cf2351a0d8', class: "otp" }, this.showLabelContact && (hAsync("p", { key: '87f34e3b13c0e16e584cc03ea8c5a35e462784b1', class: "otp__label" }, "Ingresa el c\u00F3digo enviado a tu ", engineLabel, this.labelContact && hAsync("strong", { key: '6c9d0c73340ff8dab1730b5d6c9cc0431f3ff21c' }, " ", this.labelContact))), hAsync("div", { key: 'd82904db02da1da5f863bb86cef65b0da166ff0c', class: "otp__inputs", onPaste: (e) => this.handlePaste(e) }, this.digits.map((_, i) => (hAsync("input", { key: i, ref: (el) => {
+        return (hAsync("div", { key: '4b70278cd5f1347de31781294a8eaf5dbd15d198', class: "otp" }, this.showLabelContact && (hAsync("p", { key: '1f41c8a8047e0c7471610db63913ab958efb91f3', class: "otp__label" }, "Ingresa el c\u00F3digo enviado a tu ", engineLabel, this.labelContact && hAsync("strong", { key: 'cdb2df082b7acdb3c8745a4da2fedc85e71e8c02' }, " ", this.labelContact))), hAsync("div", { key: 'a518675aee7d22a0c0aef4f2d388e060fa1cea15', class: "otp__inputs", onPaste: (e) => this.handlePaste(e) }, this.digits.map((_, i) => (hAsync("input", { key: i, ref: (el) => {
                 if (el)
                     this.inputs[i] = el;
             }, class: {
                 'otp__digit': true,
                 'otp__digit--filled': this.digitStates[i] === 'filled',
                 'otp__digit--error': this.error,
-            }, type: "text", inputMode: "numeric", maxLength: 1, value: this.digits[i] ?? '', onInput: (e) => this.handleInput(e, i), onKeyDown: (e) => this.handleKeyDown(e, i) })))), this.error && this.errorMessage && (hAsync("p", { key: '7629619d5b2c4e8f38e2c2bc93ab134242b8e079', class: "otp__error" }, this.errorMessage)), hAsync("div", { key: 'ea5472d4c55f1cdc30304e9e9bcaacf303ba4501', class: "otp__resend" }, this.canResend ? (hAsync("button", { class: "otp__resend-btn", onClick: () => { this.startCountdown(); this.dropiResend.emit(); } }, "Reenviar c\u00F3digo")) : (hAsync("span", { class: "otp__countdown" }, "Reenviar en ", this.countdown, "s")))));
+            }, type: "text", inputMode: "numeric", maxLength: 1, value: this.digits[i] ?? '', onInput: (e) => this.handleInput(e, i), onKeyDown: (e) => this.handleKeyDown(e, i) })))), this.error && this.errorMessage && (hAsync("p", { key: 'f48f697b79999c9dcf579e569741e21f60429874', class: "otp__error" }, this.errorMessage)), hAsync("div", { key: 'da82a76a7cfb4d63cff43a82e133f5212a246076', class: "otp__resend" }, this.canResend ? (hAsync("button", { class: "otp__resend-btn", onClick: () => { this.startCountdown(); this.dropiResend.emit(); } }, "Reenviar c\u00F3digo")) : (hAsync("span", { class: "otp__countdown" }, "Reenviar en ", this.countdown, "s")))));
     }
     static get formAssociated() { return true; }
     static get watchers() { return {
@@ -10172,7 +10216,7 @@ class DropiPhoneInput {
     get el() { return getElement(this); }
     internals;
     /** Name for native form submission */
-    name = '';
+    name;
     /** Initial country dial code (e.g. "57") — matches Angular 'CodArea' setter */
     codArea = '57';
     /** Phone number value — matches Angular 'ngModelPhone' */
@@ -10253,10 +10297,10 @@ class DropiPhoneInput {
     render() {
         const country = this.selectedCountry;
         const isInvalid = this.isValidPhone === false;
-        return (hAsync("div", { key: '1634a703f734cd5db7b5d7acf83f403ea07962a3', class: "phone-wrap" }, hAsync("div", { key: 'a9ed4a17b4a01893fc22d051241dcd494fa2e66d', class: "phone-input-container" }, hAsync("div", { key: '6a50121fbb8939eac54035a314c340137aae63d5', class: "custom-select" }, hAsync("button", { key: '0157b468dab13e23f83b9528ec235bc61be91733', type: "button", class: { 'select-button': true, 'select-invalid': isInvalid }, disabled: this.disabledInput, onClick: () => {
+        return (hAsync("div", { key: 'f4351d5ad9347f82477b8cd040813fc86c60931b', class: "phone-wrap" }, hAsync("div", { key: 'afd0b33fb70a0e8eb0c0c58eb7225381ed914ba1', class: "phone-input-container" }, hAsync("div", { key: '4bbda7332124649c042627e5b67e309197b617f6', class: "custom-select" }, hAsync("button", { key: 'fbb426107a317a8f8cb6e4a33ca79a927d6e7bb1', type: "button", class: { 'select-button': true, 'select-invalid': isInvalid }, disabled: this.disabledInput, onClick: () => {
                 if (!this.disabledInput)
                     this.open = !this.open;
-            } }, hAsync("span", { key: 'b174ec714c415964d09f4661f58a1a62e8c80653', style: { display: 'flex', gap: '0.5rem', alignItems: 'center' } }, hAsync("img", { key: 'f4c62db877a54bd395b756926918b8ff16511a2a', src: `https://flagsapi.com/${country.flag}/flat/24.png`, alt: "flag" }), country.code), hAsync("dropi-icon", { key: '809f64bed4cccd911110c9e8e52752554b0d8a86', name: this.open ? 'Dropdown-up' : 'Dropdown-down', iconWidth: "14px", iconHeight: "14px", color: "Gray-Gray-500" })), hAsync("ul", { key: 'b4dea28807780b086ba15161cee3e417efb2f2a1', class: { 'select-dropdown': true, 'expanded-select': this.open, 'collapsed-select': !this.open } }, COUNTRIES.map(option => (hAsync("li", null, hAsync("button", { type: "button", class: "option", onMouseDown: (e) => { e.preventDefault(); this.selectCountry(option); } }, hAsync("img", { src: `https://flagsapi.com/${option.flag}/flat/24.png`, alt: option.flag }), option.code)))))), hAsync("input", { key: '4e1113fedf25b9c91d2aff815d6c862a7d47d072', id: "phone-input", type: "tel", inputmode: "numeric", class: { 'form-control': true, 'is-invalid': isInvalid }, placeholder: this.phoneNumberPlaceholder, value: this.ngModelPhone, disabled: this.disabledInput, maxLength: country.maxLength, onInput: (e) => this.handleInput(e) }))));
+            } }, hAsync("span", { key: '73374218245871d06d2993dac1d07e7a60914df7', style: { display: 'flex', gap: '0.5rem', alignItems: 'center' } }, hAsync("img", { key: '669e38e92d5c75651a881fc8b311368ed617a236', src: `https://flagsapi.com/${country.flag}/flat/24.png`, alt: "flag" }), country.code), hAsync("dropi-icon", { key: '190bea3ae97a702ee35368798c1f4c24c1331027', name: this.open ? 'Dropdown-up' : 'Dropdown-down', iconWidth: "14px", iconHeight: "14px", color: "Gray-Gray-500" })), hAsync("ul", { key: 'ef757ddf26a6c14c989642186559957623d0e1d1', class: { 'select-dropdown': true, 'expanded-select': this.open, 'collapsed-select': !this.open } }, COUNTRIES.map(option => (hAsync("li", null, hAsync("button", { type: "button", class: "option", onMouseDown: (e) => { e.preventDefault(); this.selectCountry(option); } }, hAsync("img", { src: `https://flagsapi.com/${option.flag}/flat/24.png`, alt: option.flag }), option.code)))))), hAsync("input", { key: '93099e0b90757d28aa51811a30cc5d8a44a940ee', id: "phone-input", type: "tel", inputmode: "numeric", class: { 'form-control': true, 'is-invalid': isInvalid }, placeholder: this.phoneNumberPlaceholder, value: this.ngModelPhone, disabled: this.disabledInput, maxLength: country.maxLength, onInput: (e) => this.handleInput(e) }))));
     }
     static get formAssociated() { return true; }
     static get watchers() { return {
@@ -10367,9 +10411,9 @@ class DropiRadioButton {
     /** Label text displayed next to the radio */
     label = '';
     /** Input name (for grouping radio buttons) */
-    name = 'name';
+    name;
     /** Input id */
-    id = 'radioButton';
+    inputId;
     /** Whether this radio is selected */
     checked = false;
     /**
@@ -10394,7 +10438,7 @@ class DropiRadioButton {
         this.dropiChange.emit(e);
     }
     render() {
-        return (hAsync("div", { key: 'e4b54d9bda299b9150ebf9791925e0e7c3b9fb38', class: "dropi-radio-button" }, hAsync("label", { key: '0a4c6443668477a2cb6b2d5a3d8bc1744a0fcffd', htmlFor: this.id }, hAsync("input", { key: '6ba6b5af4bc061664dee0b6554c769613080dbb8', id: this.id, type: "radio", name: this.name, checked: this.checked, onChange: (e) => this.handleChange(e) }), this.label)));
+        return (hAsync("div", { key: '8833a6c8d423df47ceb667ff5c7fd940669c95ed', class: "dropi-radio-button" }, hAsync("label", { key: 'a21414208a7a4cc89ba8aad7a34f638d25c511a3', htmlFor: this.inputId }, hAsync("input", { key: '4fc7d6ee1cfa0e1c522808b9c09af3d12c885caa', id: this.inputId, type: "radio", name: this.name, checked: this.checked, onChange: (e) => this.handleChange(e) }), this.label)));
     }
     static get formAssociated() { return true; }
     static get watchers() { return {
@@ -10412,7 +10456,7 @@ class DropiRadioButton {
         "$members$": {
             "label": [1],
             "name": [513],
-            "id": [1],
+            "inputId": [1, "input-id"],
             "checked": [1540],
             "resetTrigger": [4, "reset-trigger"]
         },
@@ -10667,7 +10711,7 @@ class DropiSearch {
         return (hAsync("div", { key: '594b15b4b31044f4a02376dc773ea36da893d773', class: "search-wrap" }, this.label && hAsync("label", { key: '297a989441ad892715b09421f9a53618851c1b52', class: "search-label" }, this.label), hAsync("div", { key: '6bbaf4ea5c1bc6ff831626117fccde647e68ba19', class: `search-input-row search-input-row--${this.type}` }, this.showIcon && hAsync("dropi-icon", { key: 'e94c3a3895a14e950a018023d5d7a281a230abae', class: "search-icon", name: "Search", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-400" }), hAsync("input", { key: '820bf2f4c9ecaf9907aceaaa08bd3fa309606e90', class: "search-input", type: this.typeInput, placeholder: this.placeholder, value: this.textInput, maxLength: this.maxLength, onInput: (e) => this.handleInput(e), onKeyDown: (e) => this.handleKeyDown(e), onFocus: () => {
                 if (this.parsedOptions.length)
                     this.open = true;
-            }, onBlur: () => { setTimeout(() => this.open = false, 150); this.dropiBlur.emit(); } }), this.showClear && this.textInput && (hAsync("button", { key: 'e2fd7c3d5fee45a83f030589f58d4fee9f3af69c', class: "search-clear", onClick: () => this.handleClear(), "aria-label": "Limpiar" }, hAsync("dropi-icon", { key: 'a530b0adb83d76b205cd2b22792f14229950836e', name: "Close-small", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-400" })))), showDropdown && (hAsync("div", { key: '8c062d43dccb41c84b2a599ed6d1a5e049a75b65', class: `search-dropdown search-dropdown--${this.position}`, style: { '--dropdown-height': `${this.heightOverlay}px` } }, this.filtered.length === 0 ? (hAsync("div", { class: "search-no-results" }, "Sin resultados")) : (this.filtered.map((opt, i) => (hAsync("div", { class: { 'search-option': true, 'search-option--selected': this.isSelected(opt) }, key: i, onMouseDown: (e) => { e.preventDefault(); this.selectOption(opt); } }, this.multipleSelectModel && hAsync("dropi-checkbox", { checked: this.isSelected(opt) }), hAsync("span", { class: "search-option__label" }, opt[this.dataName])))))))));
+            }, onBlur: () => { setTimeout(() => this.open = false, 150); this.dropiBlur.emit(); } }), this.showClear && this.textInput && (hAsync("button", { key: 'e2fd7c3d5fee45a83f030589f58d4fee9f3af69c', class: "search-clear", onClick: () => this.handleClear(), "aria-label": "Limpiar" }, hAsync("dropi-icon", { key: 'a530b0adb83d76b205cd2b22792f14229950836e', name: "Close-small", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-400" })))), showDropdown && (hAsync("div", { key: '8c062d43dccb41c84b2a599ed6d1a5e049a75b65', class: `search-dropdown search-dropdown--${this.position}`, style: { '--dropdown-height': `${this.heightOverlay}px` } }, this.filtered.length === 0 ? (hAsync("div", { class: "search-no-results" }, "Sin resultados")) : (this.filtered.map((opt, i) => (hAsync("div", { class: { 'search-option': true, 'search-option--selected': this.isSelected(opt) }, key: i, onMouseDown: (e) => { e.preventDefault(); this.selectOption(opt); } }, this.multipleSelectModel && hAsync("dropi-checkbox", { name: "_search-option", checked: this.isSelected(opt) }), hAsync("span", { class: "search-option__label" }, opt[this.dataName])))))))));
     }
     static get watchers() { return {
         "dataToSearch": [{
@@ -10752,7 +10796,7 @@ class DropiSelect {
     placeholder = 'Select';
     /** Array of SelectOption or SelectOptionGroup */
     options = [];
-    name = '';
+    name;
     disabled = false;
     hasError = false;
     errorText = '';
@@ -11108,7 +11152,7 @@ class DropiSelect {
         ]), !this.isGrouped && this.filteredOptions.map(opt => this.renderOption(opt)), this.filteredOptions.length === 0 && (hAsync("li", { class: "no-results" }, "Sin resultados"))));
     }
     render() {
-        return (hAsync("div", { key: 'f09113a288d45bb5519503bb78c41e236913c1eb', class: "custom-select" }, !this.dropdownType && this.label && (hAsync("label", { key: 'c0b59763dc3529d7f9bb5597a2bea0d38070a07b', class: { 'disabled-label': this.disabled } }, this.label, this.showObligatory && !this.disabled && hAsync("span", { key: '6c8a47bdfc216231ba72420298b3bc8deeeae435', class: "asterisk" }, " *"))), hAsync("div", { key: '8ec45010af1252effe34bb69d3f40ea277459511', class: "dropdown-container" }, this.dropdownType && this.label && (hAsync("div", { key: 'b3f7f9adacd57b091baac662fc7be6fcd847c3a4', class: "left-label" }, this.label)), this.renderTrigger()), this.textHelper && !this.hasError && (hAsync("div", { key: 'a4cce833b50b2bc62cb7142da420f81c0647e97e', class: "select-helper" }, hAsync("span", { key: 'f69375abc2f66b5b1278895b8f313adabfa0f938' }, this.textHelper))), this.hasError && this.errorText && (hAsync("div", { key: '6681bdbb705633d393adab09a889f3f1fb6fbe8a', class: "select-helper-error" }, hAsync("dropi-icon", { key: '09521eeef2cf2a58cb74bea5bfae8a6d58d17682', name: "Warning-circle", iconWidth: "12px", iconHeight: "12px", color: "Error-Error-500" }), hAsync("span", { key: '807820bb0a474079627bf12c20f4a034896785cd' }, this.errorText))), this.renderDropdown()));
+        return (hAsync("div", { key: '20803118f557ef32390fe4f93b425b5ae4ab3361', class: "custom-select" }, !this.dropdownType && this.label && (hAsync("label", { key: '3b29f4a8cda550090ea8723c559aea748ec267d0', class: { 'disabled-label': this.disabled } }, this.label, this.showObligatory && !this.disabled && hAsync("span", { key: '27d14ce3a05627bf1cf3c246ca4a378bc7d1199d', class: "asterisk" }, " *"))), hAsync("div", { key: 'c70121fef59345ea40ce3f0a201d05f50e262290', class: "dropdown-container" }, this.dropdownType && this.label && (hAsync("div", { key: '56abe7b0c88a5b15add9b045b01f880dfd24efb0', class: "left-label" }, this.label)), this.renderTrigger()), this.textHelper && !this.hasError && (hAsync("div", { key: 'a362acb377004855c36e53b4dd82b40c414df807', class: "select-helper" }, hAsync("span", { key: 'e84ef13d9bd942817816c6b4f74ca670d31feda1' }, this.textHelper))), this.hasError && this.errorText && (hAsync("div", { key: 'a1d8e7153719ba99a30676d9522e612f711d1265', class: "select-helper-error" }, hAsync("dropi-icon", { key: 'bc3a92ce1aa494bbf7c57e0ce4e922d9c957a560', name: "Warning-circle", iconWidth: "12px", iconHeight: "12px", color: "Error-Error-500" }), hAsync("span", { key: '30632fb569a019d6fa1d684d83fe9eadfc8031a5' }, this.errorText))), this.renderDropdown()));
     }
     static get formAssociated() { return true; }
     static get watchers() { return {
@@ -11480,7 +11524,7 @@ class DropiSwitch {
     }
     internals;
     /** Name for native form submission */
-    name = '';
+    name;
     /** Whether the switch is on */
     isChecked = false;
     /** Whether the switch is disabled */
@@ -11499,7 +11543,7 @@ class DropiSwitch {
         this.dropiChange.emit(this.isChecked);
     }
     render() {
-        return (hAsync("label", { key: 'b3321fd96a1487210a920f5494708dc2eb05f10c', class: "toggle-switch" }, hAsync("input", { key: 'ee7cfecf443a1c839ce145ade18cc3ff15924816', type: "checkbox", checked: this.isChecked, disabled: this.disabled, onChange: (e) => this.onToggleChange(e) }), hAsync("span", { key: 'c0800bd9a7f52cf666b3e475265da223b852be9a', class: "slider" })));
+        return (hAsync("label", { key: 'bb9809e03c3f5f4f6892731d7147eda5313a799b', class: "toggle-switch" }, hAsync("input", { key: 'b0be8bb8c22705ae04ca6f12d2009bac0c6cd629', type: "checkbox", checked: this.isChecked, disabled: this.disabled, onChange: (e) => this.onToggleChange(e) }), hAsync("span", { key: '4073dacb4c17d1fdc2009a9e7329caffade3c932', class: "slider" })));
     }
     static get formAssociated() { return true; }
     static get watchers() { return {
@@ -11779,7 +11823,7 @@ class DropiTable {
         const allSelected = rows.length > 0 && this.selectedKeys.size === rows.length;
         const hasActions = this.parsedRowActions.length > 0;
         const cols = this.visibleColumns;
-        return (hAsync("div", { class: "table-container" }, (this.showSearch || this.showColumnSelector || this.tableTitle) && (hAsync("div", { class: "search-container" }, this.tableTitle && hAsync("div", { class: "table-title Body-L-Bold" }, this.tableTitle), hAsync("div", { class: `search-actions${this.showSearch ? '' : ' only-filter'}` }, this.showSearch && (hAsync("dropi-input", { placeholder: "Buscar", value: this.searchTerm, onDropiInput: (e) => {
+        return (hAsync("div", { class: "table-container" }, (this.showSearch || this.showColumnSelector || this.tableTitle) && (hAsync("div", { class: "search-container" }, this.tableTitle && hAsync("div", { class: "table-title Body-L-Bold" }, this.tableTitle), hAsync("div", { class: `search-actions${this.showSearch ? '' : ' only-filter'}` }, this.showSearch && (hAsync("dropi-input", { inputId: "_table-search", name: "_table-search", placeholder: "Buscar", value: this.searchTerm, onDropiInput: (e) => {
                 this.searchTerm = e.detail;
                 this.dropiSearch.emit(e.detail);
                 this.dropiSearchChangeAngular.emit(e.detail);
@@ -11790,11 +11834,11 @@ class DropiTable {
                 else
                     next.add(col.key);
                 this.hiddenColumns = next;
-            } }, hAsync("dropi-checkbox", { checked: !this.hiddenColumns.has(col.key) }), hAsync("span", null, col.label)))), hAsync("div", { class: "column-selector-footer" }, hAsync("div", { class: "column-selector-all", onClick: () => {
+            } }, hAsync("dropi-checkbox", { name: "_table-col-toggle", checked: !this.hiddenColumns.has(col.key) }), hAsync("span", null, col.label)))), hAsync("div", { class: "column-selector-footer" }, hAsync("div", { class: "column-selector-all", onClick: () => {
                 this.hiddenColumns = this.hiddenColumns.size === 0
                     ? new Set(this.parsedColumns.map(c => c.key))
                     : new Set();
-            } }, hAsync("dropi-checkbox", { checked: this.hiddenColumns.size === 0 }), hAsync("span", null, "Mostrar / Ocultar todo"))))))))))), hAsync("div", { class: `table-wrapper${hasActions ? ' has-sticky-actions' : ''}` }, hAsync("table", { class: `custom-table${this.showCheckbox ? ' has-checkbox' : ''}` }, hAsync("thead", null, hAsync("tr", null, this.showCheckbox && (hAsync("th", { class: "checkbox-header" }, hAsync("dropi-checkbox", { checked: allSelected, onDropiChange: (e) => this.toggleAll(e.detail) }))), cols.map(col => (hAsync("th", { class: { sortable: !!col.sortable, 'low-opacity': !!col.disabledColumn, 'highlight-column': !!col.highlightColumn }, style: { textAlign: col.align || 'center', minWidth: col.minWidth, maxWidth: col.maxWidth }, onClick: () => this.handleSort(col) }, hAsync("div", { class: `headers-container${col.align === 'left' ? ' align-left' : col.align === 'right' ? ' align-right' : ''}` }, hAsync("div", { class: `headers${col.align === 'left' ? ' align-left' : col.align === 'right' ? ' align-right' : ''}` }, hAsync("span", null, col.label), col.sortable && (hAsync("div", { class: "order-icons" }, hAsync("dropi-icon", { name: "Caret-up", iconWidth: "12px", iconHeight: "12px", color: this.sortAsc ? 'Gray-Gray-500' : 'Gray-Gray-200' }), hAsync("dropi-icon", { name: "Caret-down", iconWidth: "12px", iconHeight: "12px", color: !this.sortAsc ? 'Gray-Gray-500' : 'Gray-Gray-200' })))))))), hasActions && hAsync("th", { class: "actions-header actions" }, "Acciones"))), hAsync("tbody", null, this.loading ? (Array.from({ length: 5 }).map(() => (hAsync("tr", { class: "table-row" }, this.showCheckbox && hAsync("td", null, hAsync("div", { class: "skeleton skeleton--sm" })), cols.map(() => hAsync("td", null, hAsync("div", { class: "skeleton" }))), hasActions && hAsync("td", null))))) : rows.length === 0 ? (hAsync("tr", null, hAsync("td", { colSpan: cols.length + (this.showCheckbox ? 1 : 0) + (hasActions ? 1 : 0) }, hAsync("div", { class: "empty-table" }, hAsync("div", { class: "empty-message-container" }, this.emptyMessage))))) : (rows.map((row, i) => (hAsync("tr", { class: "table-row", onClick: () => this.dropiRowClick.emit({ row, index: i }) }, this.showCheckbox && (hAsync("td", { onClick: (e) => e.stopPropagation() }, hAsync("dropi-checkbox", { checked: this.selectedKeys.has(i), onDropiChange: () => this.toggleRow(i) }))), cols.map(col => (hAsync("td", { class: { 'low-opacity': !!col.disabledColumn, 'highlight-column': !!col.highlightColumn }, style: { minWidth: col.minWidth, maxWidth: col.maxWidth, overflow: col.maxWidth ? 'hidden' : undefined } }, hAsync("div", { class: "cell-content", style: { textAlign: col.align || 'center' } }, this.renderCellValue(row[col.key]))))), hasActions && (hAsync("td", { class: "action-button actions", onClick: (e) => e.stopPropagation() }, this.parsedRowActions.length > 2 ? (hAsync("div", { style: { display: "flex", justifyContent: "center", width: "100%" } }, hAsync("dropi-icon", { class: "action-icon", name: "Menu-dots-vertical", iconWidth: "24px", iconHeight: "24px", color: "Gray-Gray-500", onClick: () => this.openActionRow = this.openActionRow === i ? -1 : i }), this.openActionRow === i && (hAsync("div", { class: "actions-menu" }, this.parsedRowActions.map(action => (hAsync("div", { class: "action-item", onClick: () => { this.openActionRow = -1; this.dropiAction.emit({ row, action }); this.dropiActionClick.emit({ row, action }); } }, hAsync("dropi-icon", { name: action.icon, iconWidth: "20px", iconHeight: "20px", color: action.iconColor || 'Gray-Gray-500' }), action.label))))))) : (hAsync("div", { class: "short-actions" }, this.parsedRowActions.map(action => (hAsync("dropi-icon", { class: "action-icon", name: action.icon, iconWidth: "24px", iconHeight: "24px", color: action.iconColor || 'Gray-Gray-500', onClick: () => { this.dropiAction.emit({ row, action }); this.dropiActionClick.emit({ row, action }); } })))))))))))))), this.showPaginator && (hAsync("div", { class: "pagination" }, hAsync("div", { class: "page-size-selector" }, hAsync("label", null, "Mostrar"), hAsync("select", { onChange: (e) => {
+            } }, hAsync("dropi-checkbox", { name: "_table-col-toggle-all", checked: this.hiddenColumns.size === 0 }), hAsync("span", null, "Mostrar / Ocultar todo"))))))))))), hAsync("div", { class: `table-wrapper${hasActions ? ' has-sticky-actions' : ''}` }, hAsync("table", { class: `custom-table${this.showCheckbox ? ' has-checkbox' : ''}` }, hAsync("thead", null, hAsync("tr", null, this.showCheckbox && (hAsync("th", { class: "checkbox-header" }, hAsync("dropi-checkbox", { name: "_table-select-all", checked: allSelected, onDropiChange: (e) => this.toggleAll(e.detail) }))), cols.map(col => (hAsync("th", { class: { sortable: !!col.sortable, 'low-opacity': !!col.disabledColumn, 'highlight-column': !!col.highlightColumn }, style: { textAlign: col.align || 'center', minWidth: col.minWidth, maxWidth: col.maxWidth }, onClick: () => this.handleSort(col) }, hAsync("div", { class: `headers-container${col.align === 'left' ? ' align-left' : col.align === 'right' ? ' align-right' : ''}` }, hAsync("div", { class: `headers${col.align === 'left' ? ' align-left' : col.align === 'right' ? ' align-right' : ''}` }, hAsync("span", null, col.label), col.sortable && (hAsync("div", { class: "order-icons" }, hAsync("dropi-icon", { name: "Caret-up", iconWidth: "12px", iconHeight: "12px", color: this.sortAsc ? 'Gray-Gray-500' : 'Gray-Gray-200' }), hAsync("dropi-icon", { name: "Caret-down", iconWidth: "12px", iconHeight: "12px", color: !this.sortAsc ? 'Gray-Gray-500' : 'Gray-Gray-200' })))))))), hasActions && hAsync("th", { class: "actions-header actions" }, "Acciones"))), hAsync("tbody", null, this.loading ? (Array.from({ length: 5 }).map(() => (hAsync("tr", { class: "table-row" }, this.showCheckbox && hAsync("td", null, hAsync("div", { class: "skeleton skeleton--sm" })), cols.map(() => hAsync("td", null, hAsync("div", { class: "skeleton" }))), hasActions && hAsync("td", null))))) : rows.length === 0 ? (hAsync("tr", null, hAsync("td", { colSpan: cols.length + (this.showCheckbox ? 1 : 0) + (hasActions ? 1 : 0) }, hAsync("div", { class: "empty-table" }, hAsync("div", { class: "empty-message-container" }, this.emptyMessage))))) : (rows.map((row, i) => (hAsync("tr", { class: "table-row", onClick: () => this.dropiRowClick.emit({ row, index: i }) }, this.showCheckbox && (hAsync("td", { onClick: (e) => e.stopPropagation() }, hAsync("dropi-checkbox", { name: "_table-row-select", checked: this.selectedKeys.has(i), onDropiChange: () => this.toggleRow(i) }))), cols.map(col => (hAsync("td", { class: { 'low-opacity': !!col.disabledColumn, 'highlight-column': !!col.highlightColumn }, style: { minWidth: col.minWidth, maxWidth: col.maxWidth, overflow: col.maxWidth ? 'hidden' : undefined } }, hAsync("div", { class: "cell-content", style: { textAlign: col.align || 'center' } }, this.renderCellValue(row[col.key]))))), hasActions && (hAsync("td", { class: "action-button actions", onClick: (e) => e.stopPropagation() }, this.parsedRowActions.length > 2 ? (hAsync("div", { style: { display: "flex", justifyContent: "center", width: "100%" } }, hAsync("dropi-icon", { class: "action-icon", name: "Menu-dots-vertical", iconWidth: "24px", iconHeight: "24px", color: "Gray-Gray-500", onClick: () => this.openActionRow = this.openActionRow === i ? -1 : i }), this.openActionRow === i && (hAsync("div", { class: "actions-menu" }, this.parsedRowActions.map(action => (hAsync("div", { class: "action-item", onClick: () => { this.openActionRow = -1; this.dropiAction.emit({ row, action }); this.dropiActionClick.emit({ row, action }); } }, hAsync("dropi-icon", { name: action.icon, iconWidth: "20px", iconHeight: "20px", color: action.iconColor || 'Gray-Gray-500' }), action.label))))))) : (hAsync("div", { class: "short-actions" }, this.parsedRowActions.map(action => (hAsync("dropi-icon", { class: "action-icon", name: action.icon, iconWidth: "24px", iconHeight: "24px", color: action.iconColor || 'Gray-Gray-500', onClick: () => { this.dropiAction.emit({ row, action }); this.dropiActionClick.emit({ row, action }); } })))))))))))))), this.showPaginator && (hAsync("div", { class: "pagination" }, hAsync("div", { class: "page-size-selector" }, hAsync("label", null, "Mostrar"), hAsync("select", { onChange: (e) => {
                 this.pageSize = Number(e.target.value);
                 this.currentPage = 1;
                 this.dropiPageSizeChange.emit(this.pageSize);
@@ -12103,9 +12147,9 @@ class DropiTextArea {
     }
     internals;
     /** Input id. Defaults to label. */
-    id = '';
+    inputId;
     /** Name for native form submission */
-    name = '';
+    name;
     /** Label shown above the textarea */
     label = '';
     /** Placeholder text */
@@ -12139,8 +12183,8 @@ class DropiTextArea {
     textAreaPropertiesChanged(val) {
         if (!val)
             return;
-        if (val.id !== undefined)
-            this.id = val.id;
+        if (val.inputId !== undefined)
+            this.inputId = val.inputId;
         if (val.label !== undefined)
             this.label = val.label;
         if (val.placeholder !== undefined)
@@ -12183,7 +12227,7 @@ class DropiTextArea {
         this.dropiBlur.emit();
     }
     get resolvedId() {
-        return this.id || this.label;
+        return this.inputId || this.name;
     }
     get isInvalid() {
         return this.hasError && this.touched;
@@ -12194,12 +12238,12 @@ class DropiTextArea {
     render() {
         const showAsterisk = this.required && this.showObligatoryAsterisk && !this.disabled;
         const showHelper = this.textHelper || this.isInvalid;
-        return (hAsync("div", { key: '8c25826a54d1f0bec06d8f70211d2bcd873d59a6', class: "textarea-wrapper" }, this.label && (hAsync("label", { key: '58a578753a1248b185d2763aedf50eaaa152c791', htmlFor: this.resolvedId, style: { color: this.disabled ? 'var(--Gray-Gray-400)' : 'var(--Gray-Gray-600)' } }, this.label, showAsterisk && hAsync("span", { key: 'cf31923103a7594f552df4ec86885f78d0c31779', class: "asterisk" }, " *"))), hAsync("div", { key: '6ea60b6286fd4438389cfda0580379d8fe013adc', class: "textarea-container" }, hAsync("textarea", { key: 'fc5e495d80bfd665e55480668b9fa7ed62651984', id: this.resolvedId, class: {
+        return (hAsync("div", { key: '0b5292b24d3e4f2b56d69e985ede73be0f9a1338', class: "textarea-wrapper" }, this.label && (hAsync("label", { key: '19a45a83b92bed4b98da68389f5eee6affce9eb2', htmlFor: this.resolvedId, style: { color: this.disabled ? 'var(--Gray-Gray-400)' : 'var(--Gray-Gray-600)' } }, this.label, showAsterisk && hAsync("span", { key: 'e67602dbd7095504c4c1bf574d03a01a5238b561', class: "asterisk" }, " *"))), hAsync("div", { key: '1d858e327147e87ca9df03d38e7bb90e0464fe31', class: "textarea-container" }, hAsync("textarea", { key: 'c50cab6f4126a99628bd0aa6f2843fec43b27edf', id: this.resolvedId, class: {
                 'form-control': true,
                 'Body-M-Regular': true,
                 'form-control-valid': !this.isInvalid && this.touched && !!this.value,
                 'form-control-invalid': this.isInvalid,
-            }, rows: this.rows, placeholder: this.placeholder, maxLength: this.maxLength, minLength: this.minLength, disabled: this.disabled, required: this.required, style: { resize: this.resize }, onInput: (e) => this.handleInput(e), onFocus: () => this.dropiFocus.emit(), onBlur: () => this.handleBlur() }, this.value), this.maxLength > 0 && (hAsync("div", { key: '07c350ce7a2e56b466229450645e6faece3d284b', class: "char-counter" }, this.charCount, "/", this.maxLength))), showHelper && (hAsync("div", { key: 'c9fbd9a21b7e26fbd9571fc524b6f706404145d3', class: "form-control-helper" }, this.isInvalid && (hAsync("dropi-icon", { key: '8fc6e34849f9e3175097597280a3bea9defb6bb0', name: "Warning-circle", iconWidth: "12px", iconHeight: "12px", color: "Error-Error-500" })), hAsync("span", { key: '68bf62627efb3de92afe54f7803e322f5a0462e4', class: { 'invalid-color': this.isInvalid }, style: { color: this.disabled ? 'var(--Gray-Gray-400)' : undefined } }, this.textHelper)))));
+            }, rows: this.rows, placeholder: this.placeholder, maxLength: this.maxLength, minLength: this.minLength, disabled: this.disabled, required: this.required, style: { resize: this.resize }, onInput: (e) => this.handleInput(e), onFocus: () => this.dropiFocus.emit(), onBlur: () => this.handleBlur() }, this.value), this.maxLength > 0 && (hAsync("div", { key: 'f62af4910cccf74bbbc7bad4064228545fba5d88', class: "char-counter" }, this.charCount, "/", this.maxLength))), showHelper && (hAsync("div", { key: 'ca4ac5b41128f27dee5363aca453dc1f085d9e61', class: "form-control-helper" }, this.isInvalid && (hAsync("dropi-icon", { key: 'a9c83edecd20dd318dd6ba7e4cc0d41ad748278a', name: "Warning-circle", iconWidth: "12px", iconHeight: "12px", color: "Error-Error-500" })), hAsync("span", { key: '09efa2feba4a232e453cc99f64d98eac9fd76632', class: { 'invalid-color': this.isInvalid }, style: { color: this.disabled ? 'var(--Gray-Gray-400)' : undefined } }, this.textHelper)))));
     }
     static get formAssociated() { return true; }
     static get watchers() { return {
@@ -12215,7 +12259,7 @@ class DropiTextArea {
         "$flags$": 585,
         "$tagName$": "dropi-text-area",
         "$members$": {
-            "id": [1025],
+            "inputId": [1025, "input-id"],
             "name": [513],
             "label": [1025],
             "placeholder": [1025],
@@ -12828,7 +12872,7 @@ var NAMESPACE = (
 );
 
 /*
- Stencil Hydrate Runner v4.43.3 | MIT Licensed | https://stenciljs.com
+ Stencil Hydrate Runner v4.43.4 | MIT Licensed | https://stenciljs.com
  */
 var __create = Object.create;
 var __defProp = Object.defineProperty;
@@ -27706,18 +27750,34 @@ var RemoteValue = class _RemoteValue {
 };
 
 // src/utils/serialize.ts
+function encodeBase64Unicode(str) {
+  const utf8Bytes = new TextEncoder().encode(str);
+  let binary = "";
+  for (let i = 0; i < utf8Bytes.length; i++) {
+    binary += String.fromCharCode(utf8Bytes[i]);
+  }
+  return btoa(binary);
+}
+function decodeBase64Unicode(base64) {
+  const binary = atob(base64);
+  const bytes = new Uint8Array(binary.length);
+  for (let i = 0; i < binary.length; i++) {
+    bytes[i] = binary.charCodeAt(i);
+  }
+  return new TextDecoder().decode(bytes);
+}
 function serializeProperty(value) {
   if (["string", "boolean", "undefined"].includes(typeof value) || typeof value === "number" && value !== Infinity && value !== -Infinity && !isNaN(value)) {
     return value;
   }
   const arg = LocalValue.getArgument(value);
-  return SERIALIZED_PREFIX + btoa(JSON.stringify(arg));
+  return SERIALIZED_PREFIX + encodeBase64Unicode(JSON.stringify(arg));
 }
 function deserializeProperty(value) {
   if (typeof value !== "string" || !value.startsWith(SERIALIZED_PREFIX)) {
     return value;
   }
-  return RemoteValue.fromLocalValue(JSON.parse(atob(value.slice(SERIALIZED_PREFIX.length))));
+  return RemoteValue.fromLocalValue(JSON.parse(decodeBase64Unicode(value.slice(SERIALIZED_PREFIX.length))));
 }
 var CAPTURE_EVENT_SUFFIX = "Capture";
 var CAPTURE_EVENT_REGEX = new RegExp(CAPTURE_EVENT_SUFFIX + "$");