@dropi/ui 0.1.41 → 0.1.42

package/hydrate/index.mjs

@@ -1770,9 +1770,9 @@ var createEvent = (ref, name, flags) => {
   return {
     emit: (detail) => {
       return emitEvent(elm, name, {
-        bubbles: !!(flags & 4 /* Bubbles */),
-        composed: !!(flags & 2 /* Composed */),
-        cancelable: !!(flags & 1 /* Cancellable */),
+        bubbles: true,
+        composed: true,
+        cancelable: true,
         detail
       });
     }
@@ -5341,7 +5341,7 @@ class DropiAccordion {
     /** Allows multiple sections to be open at the same time. If false, only one section can be open. */
     multiple = false;
     render() {
-        return (hAsync("div", { key: '15575b05adec26235378bb459cdf158bdabe2852', class: "accordion-container" }, hAsync("slot", { key: 'e5411aee85b69e50c777657b0cb2aa7d04d09fa4' })));
+        return (hAsync("div", { key: 'c8c70f9c2210e1bc6de7d0933f082a0d1c008837', class: "accordion-container" }, hAsync("slot", { key: '9fe1055ed6f5a2fc5c3e8dde47b694ea0acdbcb9' })));
     }
     static get style() { return dropiAccordionCss(); }
     static get cmpMeta() { return {
@@ -5399,7 +5399,7 @@ class DropiAccordionItem {
         setTimeout(() => this.updateHeight(this.open), 0);
     }
     render() {
-        return (hAsync("div", { key: '43f4ce6c38338a90a3b866a449f14e48b478e738', class: { 'accordion-item': true, 'accordion-item--open': this.open, 'accordion-item--disabled': this.disabled } }, hAsync("button", { key: 'b5150a903bf75b82ffea9707e5906dc17f0bcd1c', class: "accordion-header", onClick: () => this.handleToggle(), "aria-expanded": String(this.open), disabled: this.disabled }, hAsync("span", { key: '53f5c6a4e5a9d02412145395112368ddea9af746', class: "accordion-header-left" }, this.preIcon && hAsync("dropi-icon", { key: '28acd44875849665dfc58a5b3040a7ef78e92b6e', name: this.preIcon, iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-600" }), hAsync("span", { key: 'c19a8f8b33ce36c1903fc428400b2e1bf9b20971', class: "accordion-title" }, this.sectionTitle)), hAsync("span", { key: '7163175dca488646dd13de60978cd623cfc61d12', class: { 'accordion-chevron': true, 'accordion-chevron--open': this.open } }, hAsync("dropi-icon", { key: '10c1ea131aaaa8d0fe6542b9d8effe8b3319e3c8', name: "Dropdown-down", iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-500" }))), hAsync("div", { key: '2d514054e305d92ac97bf661f85d795ff4cc04a9', class: "accordion-body", style: { maxHeight: this.contentHeight }, ref: (el) => this.contentRef = el }, hAsync("div", { key: '3ff920a3cd55f22af681b90f220ce05d15db09e1', class: "accordion-content" }, hAsync("slot", { key: 'f703b47dc51acb41b7d455c991a08c8286d53fc2' })))));
+        return (hAsync("div", { key: '98de1df9b82f0e4e5e72702b7eaca12c0ed92586', class: { 'accordion-item': true, 'accordion-item--open': this.open, 'accordion-item--disabled': this.disabled } }, hAsync("button", { key: 'bd5c3e6ea29feb33e5280908c98929369dc7377e', class: "accordion-header", onClick: () => this.handleToggle(), "aria-expanded": String(this.open), disabled: this.disabled }, hAsync("span", { key: 'ced161eb1187d50b7eb2002081cd3fc008c9a16f', class: "accordion-header-left" }, this.preIcon && hAsync("dropi-icon", { key: '09a157623f0978153b57e85a79d7beeca3faf9ab', name: this.preIcon, iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-600" }), hAsync("span", { key: '649617f263370d1314e3145c07a3a29ce5c807b5', class: "accordion-title" }, this.sectionTitle)), hAsync("span", { key: 'd99e3933a40ffa4b1da8091a8b6d767011f1bf6f', class: { 'accordion-chevron': true, 'accordion-chevron--open': this.open } }, hAsync("dropi-icon", { key: '3d12ae988429fea2612c0c32c12cd81a486ad255', name: "Dropdown-down", iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-500" }))), hAsync("div", { key: 'cedff4803c6fa83ae9dc5cb3ce68f48150cdef67', class: "accordion-body", style: { maxHeight: this.contentHeight }, ref: (el) => this.contentRef = el }, hAsync("div", { key: 'a37dd42bf39cf08479d847286860e78a1d80a233', class: "accordion-content" }, hAsync("slot", { key: 'd797eac747716be1af2a6addbefe583be4a816b1' })))));
     }
     static get watchers() { return {
         "open": [{
@@ -5428,8 +5428,8 @@ const dropiAlertCss = () => `:host{display:block;width:100%}*,*::before,*::after
 
 const STATE_ICONS = {
     success: 'Check-circle',
-    error: 'Warning-circle',
-    warning: 'Warning-triangle',
+    error: 'Cross-circle',
+    warning: 'Warning-circle',
     info: 'Info',
 };
 const STATE_COLORS = {
@@ -5446,9 +5446,9 @@ const STATE_COLORS = {
 class DropiAlert {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.onClose = createEvent(this, "onClose", 7);
-        this.onButtonClick = createEvent(this, "onButtonClick", 7);
-        this.onClickLink = createEvent(this, "onClickLink", 7);
+        this.dropiClose = createEvent(this, "dropiClose");
+        this.dropiButtonClick = createEvent(this, "dropiButtonClick");
+        this.dropiLinkClick = createEvent(this, "dropiLinkClick");
     }
     /** Alert message text (supports plain text) */
     message = '';
@@ -5463,9 +5463,9 @@ class DropiAlert {
     /** Action button label */
     buttonText = 'Close';
     /** Anchor/link label */
-    anchorText = 'none';
+    anchorText = '';
     /** Anchor href */
-    anchorUrl = 'none';
+    anchorUrl = '';
     /** Whether the alert is visible */
     showAlert = true;
     /** Link text (alternative to anchorText) */
@@ -5475,15 +5475,15 @@ class DropiAlert {
     /** Clicked text tracking */
     clickedText = '';
     /** Emitted when the alert is dismissed */
-    onClose;
+    dropiClose;
     /** Emitted when the action button is clicked */
-    onButtonClick;
+    dropiButtonClick;
     /** Emitted when the anchor link is clicked */
-    onClickLink;
+    dropiLinkClick;
     render() {
         if (!this.showAlert)
             return null;
-        return (hAsync("div", { class: { 'alert': true, [`alert--${this.type}`]: true, [`alert--${this.state}`]: true } }, this.type !== 'flag' && (hAsync("div", { class: "alert__icon" }, hAsync("dropi-icon", { name: STATE_ICONS[this.state], iconWidth: "18px", iconHeight: "18px", color: STATE_COLORS[this.state] }))), hAsync("div", { class: "alert__body" }, hAsync("span", { class: "alert__message" }, this.message), this.anchorText && (hAsync("a", { class: "alert__link", href: this.anchorUrl || this.linkUrl || '#', onClick: (e) => { e.preventDefault(); this.onClickLink.emit(); } }, this.anchorText))), hAsync("div", { class: "alert__actions" }, this.showButton && this.buttonText && this.type !== 'flag' && (hAsync("button", { class: "alert__btn", onClick: () => this.onButtonClick.emit() }, this.buttonText)), this.dismissable && (hAsync("button", { class: "alert__close", onClick: () => { this.showAlert = false; this.onClose.emit(); }, "aria-label": "Cerrar" }, hAsync("dropi-icon", { name: "Close-small", iconWidth: "18px", iconHeight: "18px", color: "Gray-Gray-500" }))))));
+        return (hAsync("div", { class: { 'alert': true, [`alert--${this.type}`]: true, [`alert--${this.state}`]: true } }, this.type !== 'flag' && (hAsync("div", { class: "alert__icon" }, hAsync("dropi-icon", { name: STATE_ICONS[this.state], iconWidth: "18px", iconHeight: "18px", color: STATE_COLORS[this.state] }))), hAsync("div", { class: "alert__body" }, hAsync("span", { class: "alert__message", innerHTML: this.message }), this.clickedText && (hAsync("a", { class: "alert__link", href: "#", onClick: (e) => { e.preventDefault(); this.dropiLinkClick.emit(); } }, this.clickedText)), (this.anchorText || this.textLink) && (hAsync("a", { class: "alert__link", href: this.anchorUrl || this.linkUrl || '#', onClick: (e) => { e.preventDefault(); this.dropiLinkClick.emit(); } }, this.anchorText || this.textLink))), hAsync("div", { class: "alert__actions" }, this.showButton && this.buttonText && this.type !== 'flag' && (hAsync("button", { class: "alert__btn", onClick: () => this.dropiButtonClick.emit() }, this.buttonText)), this.dismissable && (hAsync("button", { class: "alert__close", onClick: () => { this.showAlert = false; this.dropiClose.emit(); }, "aria-label": "Cerrar" }, hAsync("dropi-icon", { name: "Close-small", iconWidth: "18px", iconHeight: "18px", color: "Gray-Gray-500" }))))));
     }
     static get style() { return dropiAlertCss(); }
     static get cmpMeta() { return {
@@ -5574,10 +5574,10 @@ const dropiAlertModalCss = () => `:host{display:contents}.body-alert{display:fle
 class DropiAlertModal {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.primaryButtonEvent = createEvent(this, "primaryButtonEvent", 7);
-        this.secondaryButtonEvent = createEvent(this, "secondaryButtonEvent", 7);
-        this.modalOpenChange = createEvent(this, "modalOpenChange", 7);
-        this.onHide = createEvent(this, "onHide", 7);
+        this.dropiPrimaryClick = createEvent(this, "dropiPrimaryClick");
+        this.dropiSecondaryClick = createEvent(this, "dropiSecondaryClick");
+        this.dropiVisibleChange = createEvent(this, "dropiVisibleChange");
+        this.dropiHide = createEvent(this, "dropiHide");
     }
     /** Controls visibility */
     visible = false;
@@ -5608,6 +5608,10 @@ class DropiAlertModal {
     isStep = false;
     /** Base z-index for the internal modal overlay (matches Angular `baseZIndex`) */
     baseZIndex = 0;
+    /**
+     * Use White Label (MB) illustration style instead of Lottie animation.
+     */
+    isWhiteLabel = false;
     /**
      * Convenience object prop — matches Angular `params: ModalParams`.
      * Fields: tittle, type, message, primaryButton, secondaryButton, loadingTitle,
@@ -5638,13 +5642,13 @@ class DropiAlertModal {
             this.displayButtons = val.displayButtons;
     }
     /** Emitted when primary button is clicked — matches Angular 'primaryButtonEvent' */
-    primaryButtonEvent;
+    dropiPrimaryClick;
     /** Emitted when secondary button is clicked — matches Angular 'secondaryButtonEvent' */
-    secondaryButtonEvent;
+    dropiSecondaryClick;
     /** Emitted when modal open state changes — matches Angular 'modalOpenChange' */
-    modalOpenChange;
+    dropiVisibleChange;
     /** Emitted when modal is hidden — matches Angular 'onHide' */
-    onHide;
+    dropiHide;
     lottieMap = {
         question: '/assets/lottie-files/question.json',
         warning: '/assets/lottie-files/warning.json',
@@ -5663,26 +5667,26 @@ class DropiAlertModal {
         this.visible = false;
     }
     handlePrimary() {
-        this.primaryButtonEvent.emit(true);
+        this.dropiPrimaryClick.emit(true);
         if (!this.isStep) {
             this.visible = false;
-            this.modalOpenChange.emit(false);
+            this.dropiVisibleChange.emit(false);
         }
     }
     handleSecondary() {
-        this.secondaryButtonEvent.emit(true);
+        this.dropiSecondaryClick.emit(true);
         this.visible = false;
-        this.modalOpenChange.emit(false);
+        this.dropiVisibleChange.emit(false);
     }
     onModalHide() {
         this.visible = false;
-        this.modalOpenChange.emit(false);
-        this.onHide.emit();
+        this.dropiVisibleChange.emit(false);
+        this.dropiHide.emit();
     }
     render() {
         const lottieKey = this.loading ? 'loading' : this.type;
         const isLottieLoading = lottieKey === 'loading';
-        return (hAsync("dropi-modal", { key: '8581cbc944d42889228cb21fa27bf4e8b3bf1e16', visible: this.visible, showHeader: this.closable, showCloseIcon: this.closable, dismissable: false, closeOnEscape: false, showFooter: false, size: "s", onOnHide: () => this.onModalHide() }, hAsync("div", { key: '7208cbe742dab77bcee14150998aff5647fd41af', class: "body-alert" }, this.lottieMap[lottieKey] && (hAsync("div", { key: '3b4d36963f8d6547556eee704823c8e34805b8d8', class: `lottie-img${isLottieLoading ? ' lottie-img--loading' : ''}` }, hAsync("lottie-player", { key: lottieKey, src: this.lottieMap[lottieKey], background: "transparent", speed: "1", loop: true, autoplay: true }))), hAsync("div", { key: 'dc52f3daec2eaf7ff9f1d51c90c67bcfaafe370f', class: "content-alert" }, hAsync("h2", { key: '685df4cb76145cf6e965dd94e5f3fe60f828100c' }, this.loading ? this.loadingTitle : this.tittle), hAsync("p", { key: 'f9e5b699816236148bc00c5046c6cc67eb86ae01' }, this.loading ? this.loadingMessage : this.message)), hAsync("div", { key: '2e9280865cad761bea5cdd88b972734c11ab7737', class: "custom-content" }, hAsync("slot", { key: '4fd36baa1455e7793a1e5291b52448707e3aa448' })), !this.loading && this.displayButtons && (hAsync("div", { key: '451bd3d90ec780499d9956a8a57a0d1461406fa9', class: "actions" }, this.secondaryButton && hAsync("dropi-button", { key: 'b60c30cc92cc080c01e1bf337a5e4b78f561be81', text: this.secondaryButton, severity: "secondary", onClick: () => this.handleSecondary(), fullWidth: true }), hAsync("dropi-button", { key: '2b8696a02b253d289a1baef2116cffe436346717', text: this.primaryButton, severity: "primary", onClick: () => this.handlePrimary(), fullWidth: true }))))));
+        return (hAsync("dropi-modal", { key: '322c59ea0a067a4c0cb28a5ffbe9cbc0c642eee6', visible: this.visible, showHeader: this.closable, showCloseIcon: this.closable, dismissable: false, closeOnEscape: false, showFooter: false, size: "s", onDropiHide: () => this.onModalHide() }, hAsync("div", { key: '06530f3da45738d1ed75a4e8b5b8b0b80dfd2647', class: "body-alert" }, this.lottieMap[lottieKey] && (hAsync("div", { key: '7a4ab4fbbdf3cbbacfa22f918d212b788f4392a4', class: `lottie-img${isLottieLoading ? ' lottie-img--loading' : ''}` }, hAsync("lottie-player", { key: lottieKey, src: this.lottieMap[lottieKey], background: "transparent", speed: "1", loop: true, autoplay: true }))), hAsync("div", { key: '0e72f42d10c59047e82df8b2842affd38ab60fc7', class: "content-alert" }, hAsync("h2", { key: '8262de8fbcf5b87fbac34740d34d99d0b6ff921d' }, this.loading ? this.loadingTitle : this.tittle), hAsync("p", { key: 'ca9c734e0b9686bff7e2616ae98224446ac0ca33' }, this.loading ? this.loadingMessage : this.message)), hAsync("div", { key: '1b5edb3af1044cb0dd0b57a425517b1d824672be', class: "custom-content" }, hAsync("slot", { key: '57f4a8acdbcf8a11445f7c8233355bb4ac46c9ab' })), !this.loading && this.displayButtons && (hAsync("div", { key: '32580f42d98f628b4c1d1f300b5a3aaaa1be2486', class: "actions" }, this.secondaryButton && hAsync("dropi-button", { key: 'dcf8707a7f4d8b80126a10022dd6de1c0ea44dc7', text: this.secondaryButton, severity: "secondary", onDropiClick: () => this.handleSecondary(), fullWidth: true }), hAsync("dropi-button", { key: '3ed494fc7a83021174c4d006ae4327348d400e93', text: this.primaryButton, severity: "primary", onDropiClick: () => this.handlePrimary(), fullWidth: true }))))));
     }
     static get watchers() { return {
         "params": [{
@@ -5707,6 +5711,7 @@ class DropiAlertModal {
             "loadingMessage": [1025, "loading-message"],
             "isStep": [4, "is-step"],
             "baseZIndex": [2, "base-z-index"],
+            "isWhiteLabel": [4, "is-white-label"],
             "params": [8],
             "show": [64],
             "hide": [64]
@@ -5826,7 +5831,7 @@ class DropiBadgeLegacy {
     count = 0;
     render() {
         const isCounter = this.type === 'counter';
-        return (hAsync("div", { key: 'f3d7bf7be848acee4077acef4f8e2ab4cfd99d83', class: {
+        return (hAsync("div", { key: '58bb5c6625539109f010cccdcaafc37ab6da38ba', class: {
                 'badge-legacy': true,
                 [`badge-legacy--${this.variant}`]: true,
                 [`badge-legacy--${this.type}`]: true
@@ -5864,8 +5869,8 @@ const dropiBannerExternalCss = () => `:host{display:block;width:100%}.dropi-bann
 class DropiBannerExternal {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.bannerClick = createEvent(this, "bannerClick", 7);
-        this.isVisible = createEvent(this, "isVisible", 7);
+        this.bannerClick = createEvent(this, "bannerClick");
+        this.isVisible = createEvent(this, "isVisible");
     }
     /** Image URL to display */
     imageUrl = '';
@@ -5948,7 +5953,7 @@ const dropiBreadcrumbCss = () => `:host{display:block}*,*::before,*::after{box-s
 class DropiBreadcrumb {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.dropiNavigate = createEvent(this, "dropiNavigate", 7);
+        this.dropiNavigate = createEvent(this, "dropiNavigate");
     }
     /** Breadcrumb items (array or JSON string). Last item is rendered as current. */
     items = [];
@@ -5999,7 +6004,7 @@ class DropiBreadcrumb {
     }; }
 }
 
-const dropiButtonCss = () => `:host{display:inline-block}:host([full-width]){display:flex;width:100%}:host([full-width]) .btn{width:100%}*,*::before,*::after{box-sizing:border-box}.btn{all:unset;box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:var(--Size-1, 4px);border-radius:var(--Border-2, 8px);font-weight:var(--font-weight-bold);min-width:33px;line-height:110%;cursor:pointer;white-space:nowrap;transition:background 0.25s ease,     color 0.25s ease,     border-color 0.25s ease,     transform 0.25s ease}.btn:active{transition:transform 0.01s ease-out;transform:scale(0.98)}.btn:hover:not(:active){transform:scale(1.01)}.btn.without-text{gap:0}.btn.large{padding:var(--Size-4, 16px);font-size:var(--Size-4, 16px);height:48px}.btn.normal{padding:var(--Size-3, 12px);font-size:var(--font-size-s, 12px);height:40px}.btn.small{padding:var(--Size-2, 8px);font-size:var(--font-size-s, 12px);height:29px}.btn.disabled,.btn.loading{cursor:not-allowed;pointer-events:none}.btn.primary.default{background:var(--Primary-Primary-500, #f49a3d);color:var(--Neutral-White, #ffffff)}.btn.primary.default:hover{background:var(--Primary-Primary-600, #e58017)}.btn.primary.success{background:var(--Success-Success-500, #0abb87);color:var(--Neutral-White, #ffffff)}.btn.primary.success:hover{background:var(--Success-Success-600, #09aa7b)}.btn.primary.info{background:var(--Info-Info-500, #50a5f1);color:var(--Neutral-White, #ffffff)}.btn.primary.info:hover{background:var(--Info-Info-600, #4996db)}.btn.primary.error{background:var(--Error-Error-500, #f46a6b);color:var(--Neutral-White, #ffffff)}.btn.primary.error:hover{background:var(--Error-Error-600, #de6061)}.btn.primary.warning{background:var(--Warning-Warning-500, #f1b44c);color:var(--Neutral-White, #ffffff)}.btn.primary.warning:hover{background:var(--Warning-Warning-600, #dba445)}.btn.primary.legacy{background:var(--Secondary-Secondary-500, #008dbf);color:var(--Neutral-White, #ffffff)}.btn.primary.legacy:hover{background:var(--Secondary-Secondary-600, #007199)}.btn.primary.disabled.default{background:var(--Primary-Primary-300, #f2bc85);color:var(--Neutral-White, #ffffff)}.btn.primary.disabled.success{background:var(--Success-Success-300, #5bd1af);color:var(--Neutral-White, #ffffff)}.btn.primary.disabled.info{background:var(--Info-Info-300, #8ac3f6);color:var(--Neutral-White, #ffffff)}.btn.primary.disabled.error{background:var(--Error-Error-300, #f89b9c);color:var(--Neutral-White, #ffffff)}.btn.primary.disabled.warning{background:var(--Warning-Warning-300, #f6cd87);color:var(--Neutral-White, #ffffff)}.btn.primary.disabled.legacy{background:var(--Secondary-Secondary-300, #62bad9);color:var(--Neutral-White, #ffffff)}.btn.secondary{background:var(--Neutral-White, #ffffff);border:1px solid}.btn.secondary.default{border-color:var(--Primary-Primary-500, #f49a3d);color:var(--Primary-Primary-500, #f49a3d)}.btn.secondary.default:hover{color:var(--Primary-Primary-600, #e58017);border-color:var(--Primary-Primary-600, #e58017)}.btn.secondary.success{border-color:var(--Success-Success-500, #0abb87);color:var(--Success-Success-500, #0abb87)}.btn.secondary.success:hover{color:var(--Success-Success-600, #09aa7b);border-color:var(--Success-Success-600, #09aa7b)}.btn.secondary.info{border-color:var(--Info-Info-500, #50a5f1);color:var(--Info-Info-500, #50a5f1)}.btn.secondary.info:hover{color:var(--Info-Info-600, #4996db);border-color:var(--Info-Info-600, #4996db)}.btn.secondary.error{border-color:var(--Error-Error-500, #f46a6b);color:var(--Error-Error-500, #f46a6b)}.btn.secondary.error:hover{color:var(--Error-Error-600, #de6061);border-color:var(--Error-Error-600, #de6061)}.btn.secondary.warning{border-color:var(--Warning-Warning-500, #f1b44c);color:var(--Warning-Warning-500, #f1b44c)}.btn.secondary.warning:hover{color:var(--Warning-Warning-600, #dba445);border-color:var(--Warning-Warning-600, #dba445)}.btn.secondary.legacy{border-color:var(--Secondary-Secondary-500, #008dbf);color:var(--Secondary-Secondary-500, #008dbf)}.btn.secondary.legacy:hover{color:var(--Secondary-Secondary-600, #007199);border-color:var(--Secondary-Secondary-600, #007199)}.btn.secondary.disabled.default{border-color:var(--Primary-Primary-300, #f2bc85);color:var(--Primary-Primary-300, #f2bc85)}.btn.secondary.disabled.success{border-color:var(--Success-Success-300, #5bd1af);color:var(--Success-Success-300, #5bd1af)}.btn.secondary.disabled.info{border-color:var(--Info-Info-300, #8ac3f6);color:var(--Info-Info-300, #8ac3f6)}.btn.secondary.disabled.error{border-color:var(--Error-Error-300, #f89b9c);color:var(--Error-Error-300, #f89b9c)}.btn.secondary.disabled.warning{border-color:var(--Warning-Warning-300, #f6cd87);color:var(--Warning-Warning-300, #f6cd87)}.btn.secondary.disabled.legacy{border-color:var(--Secondary-Secondary-300, #62bad9);color:var(--Secondary-Secondary-300, #62bad9)}.btn.tertiary{background:none;border:none}.btn.tertiary.default,.btn.tertiary.legacy{border:1px solid var(--Gray-Gray-200, #c3c9d9);color:var(--Gray-Gray-500, #69738c)}.btn.tertiary.default:hover,.btn.tertiary.legacy:hover{border-color:var(--Gray-Gray-400, #858ea6);color:var(--Gray-Gray-600, #475066)}.btn.tertiary.success{color:var(--Success-Success-500, #0abb87)}.btn.tertiary.success:hover{background:var(--Success-Success-50, #e7f8f3)}.btn.tertiary.info{color:var(--Info-Info-500, #50a5f1)}.btn.tertiary.info:hover{background:var(--Info-Info-50, #eef6fe)}.btn.tertiary.error{color:var(--Error-Error-500, #f46a6b)}.btn.tertiary.error:hover{background:var(--Error-Error-50, #fef0f0)}.btn.tertiary.warning{color:var(--Warning-Warning-500, #f1b44c)}.btn.tertiary.warning:hover{background:var(--Warning-Warning-50, #fef8ed)}.btn.tertiary.dropdown{color:var(--Gray-Gray-500, #69738c);font-weight:var(--font-weight-regular);font-size:var(--font-size-s);background:transparent}.btn.tertiary.disabled.default,.btn.tertiary.disabled.legacy{border:1px solid var(--Gray-Gray-200, #c3c9d9);color:var(--Gray-Gray-400, #858ea6)}.btn.tertiary.disabled.success{color:var(--Success-Success-300, #5bd1af)}.btn.tertiary.disabled.info{color:var(--Info-Info-300, #8ac3f6)}.btn.tertiary.disabled.error{color:var(--Error-Error-300, #f89b9c)}.btn.tertiary.disabled.warning{color:var(--Warning-Warning-300, #f6cd87)}.spin{animation:spin 1s linear infinite}@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}`;
+const dropiButtonCss = () => `:host{display:inline-block;border:0}:host([full-width]){display:flex;width:100%}:host([full-width]) .btn{width:100%}*,*::before,*::after{box-sizing:border-box}.btn{all:unset;box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:var(--Size-1, 4px);border-radius:var(--Border-2, 8px);font-weight:var(--font-weight-bold);min-width:33px;line-height:110%;cursor:pointer;white-space:nowrap;transition:background 0.25s ease,     color 0.25s ease,     border-color 0.25s ease,     transform 0.25s ease}.btn:active{transition:transform 0.01s ease-out;transform:scale(0.98)}.btn:hover:not(:active){transform:scale(1.01)}.btn.without-text{gap:0}.btn.large{padding:var(--Size-4, 16px);font-size:var(--Size-4, 16px);height:48px}.btn.normal{padding:var(--Size-3, 12px);font-size:var(--font-size-s, 12px);height:40px}.btn.small{padding:var(--Size-2, 8px);font-size:var(--font-size-s, 12px);height:29px}.btn.disabled,.btn.loading{cursor:not-allowed;pointer-events:none}.btn.primary.default{background:var(--Primary-Primary-500, #f49a3d);color:var(--Neutral-White, #ffffff)}.btn.primary.default:hover{background:var(--Primary-Primary-600, #e58017)}.btn.primary.success{background:var(--Success-Success-500, #0abb87);color:var(--Neutral-White, #ffffff)}.btn.primary.success:hover{background:var(--Success-Success-600, #09aa7b)}.btn.primary.info{background:var(--Info-Info-500, #50a5f1);color:var(--Neutral-White, #ffffff)}.btn.primary.info:hover{background:var(--Info-Info-600, #4996db)}.btn.primary.error{background:var(--Error-Error-500, #f46a6b);color:var(--Neutral-White, #ffffff)}.btn.primary.error:hover{background:var(--Error-Error-600, #de6061)}.btn.primary.warning{background:var(--Warning-Warning-500, #f1b44c);color:var(--Neutral-White, #ffffff)}.btn.primary.warning:hover{background:var(--Warning-Warning-600, #dba445)}.btn.primary.legacy{background:var(--Secondary-Secondary-500, #008dbf);color:var(--Neutral-White, #ffffff)}.btn.primary.legacy:hover{background:var(--Secondary-Secondary-600, #007199)}.btn.primary.disabled.default{background:var(--Primary-Primary-300, #f2bc85);color:var(--Neutral-White, #ffffff)}.btn.primary.disabled.success{background:var(--Success-Success-300, #5bd1af);color:var(--Neutral-White, #ffffff)}.btn.primary.disabled.info{background:var(--Info-Info-300, #8ac3f6);color:var(--Neutral-White, #ffffff)}.btn.primary.disabled.error{background:var(--Error-Error-300, #f89b9c);color:var(--Neutral-White, #ffffff)}.btn.primary.disabled.warning{background:var(--Warning-Warning-300, #f6cd87);color:var(--Neutral-White, #ffffff)}.btn.primary.disabled.legacy{background:var(--Secondary-Secondary-300, #62bad9);color:var(--Neutral-White, #ffffff)}.btn.secondary{background:var(--Neutral-White, #ffffff);border:1px solid}.btn.secondary.default{border-color:var(--Primary-Primary-500, #f49a3d);color:var(--Primary-Primary-500, #f49a3d)}.btn.secondary.default:hover{color:var(--Primary-Primary-600, #e58017);border-color:var(--Primary-Primary-600, #e58017)}.btn.secondary.success{border-color:var(--Success-Success-500, #0abb87);color:var(--Success-Success-500, #0abb87)}.btn.secondary.success:hover{color:var(--Success-Success-600, #09aa7b);border-color:var(--Success-Success-600, #09aa7b)}.btn.secondary.info{border-color:var(--Info-Info-500, #50a5f1);color:var(--Info-Info-500, #50a5f1)}.btn.secondary.info:hover{color:var(--Info-Info-600, #4996db);border-color:var(--Info-Info-600, #4996db)}.btn.secondary.error{border-color:var(--Error-Error-500, #f46a6b);color:var(--Error-Error-500, #f46a6b)}.btn.secondary.error:hover{color:var(--Error-Error-600, #de6061);border-color:var(--Error-Error-600, #de6061)}.btn.secondary.warning{border-color:var(--Warning-Warning-500, #f1b44c);color:var(--Warning-Warning-500, #f1b44c)}.btn.secondary.warning:hover{color:var(--Warning-Warning-600, #dba445);border-color:var(--Warning-Warning-600, #dba445)}.btn.secondary.legacy{border-color:var(--Secondary-Secondary-500, #008dbf);color:var(--Secondary-Secondary-500, #008dbf)}.btn.secondary.legacy:hover{color:var(--Secondary-Secondary-600, #007199);border-color:var(--Secondary-Secondary-600, #007199)}.btn.secondary.disabled.default{border-color:var(--Primary-Primary-300, #f2bc85);color:var(--Primary-Primary-300, #f2bc85)}.btn.secondary.disabled.success{border-color:var(--Success-Success-300, #5bd1af);color:var(--Success-Success-300, #5bd1af)}.btn.secondary.disabled.info{border-color:var(--Info-Info-300, #8ac3f6);color:var(--Info-Info-300, #8ac3f6)}.btn.secondary.disabled.error{border-color:var(--Error-Error-300, #f89b9c);color:var(--Error-Error-300, #f89b9c)}.btn.secondary.disabled.warning{border-color:var(--Warning-Warning-300, #f6cd87);color:var(--Warning-Warning-300, #f6cd87)}.btn.secondary.disabled.legacy{border-color:var(--Secondary-Secondary-300, #62bad9);color:var(--Secondary-Secondary-300, #62bad9)}.btn.tertiary{background:none;border:none}.btn.tertiary.default,.btn.tertiary.legacy{border:none !important;box-shadow:none !important;color:var(--Gray-Gray-500, #69738c)}.btn.tertiary.default:hover,.btn.tertiary.legacy:hover{background:var(--Gray-Gray-50, #f5f6f8);box-shadow:none !important;color:var(--Gray-Gray-600, #475066)}.btn.tertiary.success{color:var(--Success-Success-500, #0abb87)}.btn.tertiary.success:hover{background:var(--Success-Success-50, #e7f8f3)}.btn.tertiary.info{color:var(--Info-Info-500, #50a5f1)}.btn.tertiary.info:hover{background:var(--Info-Info-50, #eef6fe)}.btn.tertiary.error{color:var(--Error-Error-500, #f46a6b)}.btn.tertiary.error:hover{background:var(--Error-Error-50, #fef0f0)}.btn.tertiary.warning{color:var(--Warning-Warning-500, #f1b44c)}.btn.tertiary.warning:hover{background:var(--Warning-Warning-50, #fef8ed)}.btn.tertiary.dropdown{color:var(--Gray-Gray-500, #69738c);font-weight:var(--font-weight-regular);font-size:var(--font-size-s);background:transparent}.btn.tertiary.disabled.default,.btn.tertiary.disabled.legacy{border:none !important;color:var(--Gray-Gray-400, #858ea6)}.btn.tertiary.disabled.success{color:var(--Success-Success-300, #5bd1af)}.btn.tertiary.disabled.info{color:var(--Info-Info-300, #8ac3f6)}.btn.tertiary.disabled.error{color:var(--Error-Error-300, #f89b9c)}.btn.tertiary.disabled.warning{color:var(--Warning-Warning-300, #f6cd87)}.spin{animation:spin 1s linear infinite}@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}`;
 
 /**
  * @component dropi-button
@@ -6009,7 +6014,7 @@ const dropiButtonCss = () => `:host{display:inline-block}:host([full-width]){dis
 class DropiButton {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.onClick = createEvent(this, "onClick", 7);
+        this.dropiClick = createEvent(this, "dropiClick");
     }
     /** Visual color palette */
     type = 'default';
@@ -6030,7 +6035,7 @@ class DropiButton {
     /** Button label */
     text = '';
     /** Emitted on click (not emitted when disabled or loading) */
-    onClick;
+    dropiClick;
     colorMap = {
         default: 'Primary-Primary-',
         success: 'Success-Success-',
@@ -6062,7 +6067,7 @@ class DropiButton {
     }
     handleClick(e) {
         if (this.state !== 'disabled' && this.state !== 'loading') {
-            this.onClick.emit(e);
+            this.dropiClick.emit(e);
         }
     }
     renderLoadingSpinner() {
@@ -6073,7 +6078,7 @@ class DropiButton {
         const hasText = (this.text ?? '') !== '';
         const showPostIcon = (this.postIcon ?? '') !== '' || (this.type ?? 'default') === 'dropdown';
         const dropdownIcon = (this.type ?? 'default') === 'dropdown' ? 'Dropdown-down' : (this.postIcon ?? '');
-        return (hAsync("button", { key: 'a8771ab61e78941d1bfd7b987a02dfe2e9d22a31', class: {
+        return (hAsync("button", { key: 'eefda6c7ac5090173a545d67e72073dc410ff05c', class: {
                 btn: true,
                 'without-text': !hasText,
                 [this.severity ?? 'primary']: true,
@@ -6081,7 +6086,7 @@ class DropiButton {
                 [this.size ?? 'normal']: true,
                 [this.state ?? 'default']: true,
                 'full-width': this.fullWidth,
-            }, disabled: isDisabled, onClick: (e) => this.handleClick(e) }, this.preIcon && (hAsync("dropi-icon", { key: '374403bce1d33e39f3834d6e10dfec5ac7ca7e0c', name: this.preIcon, iconWidth: this.iconSize, iconHeight: this.iconSize, color: this.fontColor })), hasText && hAsync("span", { key: '65d5e45f4df8df2795be3b6bf09c9576f8497664', class: "text" }, this.text), showPostIcon && (hAsync("dropi-icon", { key: 'b3d1459260a3d7159ddf1193aa29672e8d8d3800', name: dropdownIcon, iconWidth: this.iconSize, iconHeight: this.iconSize, color: this.fontColor })), this.state === 'loading' && this.renderLoadingSpinner(), hAsync("slot", { key: 'ae37b4195f35b02d70e166fcba27939f38d35326' })));
+            }, disabled: isDisabled, onClick: (e) => this.handleClick(e) }, this.preIcon && (hAsync("dropi-icon", { key: '869ee8fc34dee93de0381a86db643c0fa9dc6918', name: this.preIcon, iconWidth: this.iconSize, iconHeight: this.iconSize, color: this.fontColor })), hasText && hAsync("span", { key: '927ef142b4c549d01b087722e9f6759cff44e6b2', class: "text" }, this.text), showPostIcon && (hAsync("dropi-icon", { key: 'cda1f5d0fa59a87abc1d3d73a87d4390f05f79eb', name: dropdownIcon, iconWidth: this.iconSize, iconHeight: this.iconSize, color: this.fontColor })), this.state === 'loading' && this.renderLoadingSpinner(), hAsync("slot", { key: 'c83dd79efe5d858361815878192c0c554a9234ca' })));
     }
     static get style() { return dropiButtonCss(); }
     static get cmpMeta() { return {
@@ -6121,7 +6126,7 @@ const dropiCardCheckboxCss = () => `:host{display:block;width:100%}*,*::before,*
 class DropiCardCheckbox {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.onChange = createEvent(this, "onChange", 7);
+        this.dropiChange = createEvent(this, "dropiChange");
     }
     /** Visual type — matches Angular: 'default' | 'with card' */
     type = 'default';
@@ -6138,7 +6143,7 @@ class DropiCardCheckbox {
     /** Disables interaction */
     disabled = false;
     /** Emitted with the new checked state when clicked */
-    onChange;
+    dropiChange;
     get isChecked() {
         return this.state === 'checked';
     }
@@ -6146,15 +6151,15 @@ class DropiCardCheckbox {
         if (this.disabled)
             return;
         this.state = this.isChecked ? 'default' : 'checked';
-        this.onChange.emit(this.isChecked);
+        this.dropiChange.emit(this.isChecked);
     }
     render() {
-        return (hAsync("div", { key: '238a146e7500efbc01d83a8494ee577fbb600729', class: {
+        return (hAsync("div", { key: 'b9004c813a03956904cfed8484cac2d8290be86f', class: {
                 'container-card-check': true,
                 'default-card': this.type === 'default',
                 'is-checked': this.isChecked && this.type === 'with card',
                 'disabled': this.disabled,
-            }, onClick: () => this.handleClick() }, hAsync("dropi-checkbox", { key: '405d834de33790be58fba7e50b0e579889f04394', checked: this.isChecked, disabled: this.disabled }), hAsync("div", { key: '49659771de9ca8ee8c2fa9fbe828a1d94fbd3c9e', class: "container-text" }, hAsync("div", { key: '7d39435ef56cd61605e9d9b69d6917e3ec8470fa', class: "title-check" }, this.title), this.description && hAsync("div", { key: '00a7723401979d7a9d926ce939eb09430ddb7372', class: "description-text" }, this.description)), (this.extraInfo || this.extraInfoDescription) && (hAsync("div", { key: '4d1c9e49f6e397f0433827960167ff88bcd669db', class: "extra-info" }, this.extraInfo && hAsync("div", { key: 'b9da8514c2013cd6cab9cf6005dad8d3ae30b930' }, this.extraInfo), this.extraInfoDescription && hAsync("h4", { key: 'ac2fcbc6359ea173911f181b2a145de59af10c9d' }, this.extraInfoDescription)))));
+            }, 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)))));
     }
     static get style() { return dropiCardCheckboxCss(); }
     static get cmpMeta() { return {
@@ -6184,10 +6189,10 @@ const dropiCardProductCss = () => `:host{display:block;font-family:'Inter', sans
 class DropiCardProduct {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.onProductClick = createEvent(this, "onProductClick", 7);
-        this.changeFavorite = createEvent(this, "changeFavorite", 7);
-        this.dropiAddProduct = createEvent(this, "dropiAddProduct", 7);
-        this.dropiSupplierClick = createEvent(this, "dropiSupplierClick", 7);
+        this.dropiProductClick = createEvent(this, "dropiProductClick");
+        this.dropiFavoriteChange = createEvent(this, "dropiFavoriteChange");
+        this.dropiAddProduct = createEvent(this, "dropiAddProduct");
+        this.dropiSupplierClick = createEvent(this, "dropiSupplierClick");
     }
     /** Product image URL */
     image = '';
@@ -6214,9 +6219,9 @@ class DropiCardProduct {
     /** Show "Enviar a cliente" button */
     showAddButton = true;
     /** Emitted when card is clicked — matches Angular 'onProductClick' */
-    onProductClick;
+    dropiProductClick;
     /** Emitted when favorite toggled — matches Angular 'changeFavorite' */
-    changeFavorite;
+    dropiFavoriteChange;
     /** Emitted when "Enviar a cliente" button clicked */
     dropiAddProduct;
     /** Emitted when supplier name clicked */
@@ -6237,17 +6242,17 @@ class DropiCardProduct {
         return 'var(--Success-Success-500, #0abb87)';
     }
     render() {
-        return (hAsync("div", { key: '42990ea883dcd6cc72e1f62771f7b9554c36bdba', class: "dropi-card-product", onClick: () => this.onProductClick.emit() }, hAsync("div", { key: '59295427ddc350ec3c70d7d1bd4803ffa6bf26b0', class: "product-image-container" }, hAsync("div", { key: '9d10e18f2eadf16f0c0b1b7cb7860d08f2ca778f', class: "product-image" }, hAsync("img", { key: '19f7af8eddcbea880d32ef30603d55bfe9337f17', src: this.image || '', alt: this.productName, onError: (e) => {
+        return (hAsync("div", { key: '2fe4ce42e1c331a99fd1171c82e6e48bfb5dbff0', class: "dropi-card-product", onClick: () => this.dropiProductClick.emit() }, hAsync("div", { key: '3f94077ee059e347f3ff4fff808a3a3f3a0ac827', class: "product-image-container" }, hAsync("div", { key: '1d6e8181cc630ab03efc90e316c349dfe9765b46', class: "product-image" }, hAsync("img", { key: 'f6647c21ac24d378482c6e6fe5220d6d18ff694b', src: this.image || '', alt: this.productName, onError: (e) => {
                 e.target.src = './assets/utils/no-image.jpg';
-            }, class: !this.image ? 'error-img' : '' }), this.showFavorite && (hAsync("button", { key: 'a6e13eea7c211fd772fe5ee7c13c7d475d54986c', class: { 'favorite-button': true, 'favorite-active': this.isFavorite }, onClick: (e) => {
+            }, class: !this.image ? 'error-img' : '' }), this.showFavorite && (hAsync("button", { key: '37c23af5e1345e2f2b2ac42dd38f88eb17254889', class: { 'favorite-button': true, 'favorite-active': this.isFavorite }, onClick: (e) => {
                 e.stopPropagation();
                 this.isFavorite = !this.isFavorite;
-                this.changeFavorite.emit(this.isFavorite);
-            }, "aria-label": "Favorito" }, hAsync("dropi-icon", { key: '35300a450b8fff37e7c469b5b8a1f39ebfb717dc', name: this.isFavorite ? 'Heart-solid' : 'Heart', iconWidth: "18px", iconHeight: "18px", color: this.isFavorite ? '#fff' : '#858ea6' }))))), hAsync("div", { key: 'b6792c07dbcc37f636add6bd0f9bfbb88b28fc6b', class: "product-info" }, this.supplierCategory && (hAsync("dropi-ilustration-icon", { key: 'f4074d38a1e7999ffde2b4906de21b91348b4a63', class: "supplier-insignia", type: "insignia", stateInsignia: this.supplierCategory, tagProduct: true })), hAsync("div", { key: '7a085de7400576ba2595770268845916eecfa3cf', class: "product-header" }, this.category && (hAsync("span", { key: 'c5002b0b82d8483e3ea88d884cdeaa015341e7ca', class: "category" }, this.category)), hAsync("div", { key: '4c24e0f3dc3ea31764290e97a600beb411ce7b50', class: "stock-info" }, hAsync("span", { key: '453b6b6ba34aa1c060052ec6a1aa4b6aeabe454b', class: "stock-label" }, "Stock:"), hAsync("span", { key: '46733d6335c72a16411b27c1cae7dbb1e46a26cc', class: "stock-value", style: { color: this.getStockColor() } }, this.stock === 0 ? 'Agotado' : this.stock))), hAsync("h3", { key: '69179b355604ffbf594f192c47ba8ac18964d1c8', class: "product-name" }, this.productName), this.supplier && (hAsync("div", { key: 'b53d6667872f959cc5e48b365b42b5744c4c0ae8', class: "supplier-info" }, hAsync("span", { key: 'e2cb385de94697533b0ac8f8832246dac955efb1', class: "supplier-label" }, "Proveedor:"), hAsync("span", { key: '17e2d2ce7a5d6113fbef89a5c49ec183e189aeee', class: "supplier-name", onClick: (e) => { e.stopPropagation(); this.dropiSupplierClick.emit(); } }, this.supplier))), hAsync("div", { key: 'eb146caf735601d1ed0f3ff0f81e234a9a768d04', class: "price-container" }, hAsync("div", { key: '0516aaeb1f4d087b262b5692abfac9993c8b378a', class: "price-item" }, hAsync("span", { key: '837eb19a5bb50dbd05d999a5c3fb0d642f2701b7', class: "price-label" }, "Precio proveedor"), hAsync("span", { key: '4bdba27153a06e39d5449b61eed4707a90123336', class: "price-value" }, this.currency, " ", this.formatPrice(this.salePrice))), hAsync("div", { key: '82040761c0b63df23fbc80d0e990d3a1c610d8eb', class: "price-item" }, hAsync("span", { key: 'c93307dba668d60e22e6b7d9215abf289495935c', class: "price-label" }, "Precio sugerido"), hAsync("span", { key: 'd9aca439201e07756e298b0be7d41aa9396cf67d', class: "price-value" }, this.currency, " ", this.formatPrice(this.suggestedPrice))))), hAsync("div", { key: '79e9e143ddb87209a550069abe839b89ec703e22', class: "separator" }), this.showAddButton && (hAsync("div", { key: 'b3261c8db5e3fd9c97f9894f6aea420495f0577b', class: { 'action-button': true, 'action-button--disabled': !this.inStock }, onClick: (e) => {
+                this.dropiFavoriteChange.emit(this.isFavorite);
+            }, "aria-label": "Favorito" }, hAsync("dropi-icon", { key: 'c6d6c87dcb5ae0f9a0d416667a3d39c7e153b7a6', name: this.isFavorite ? 'Heart-solid' : 'Heart', iconWidth: "18px", iconHeight: "18px", color: this.isFavorite ? '#fff' : '#858ea6' }))))), hAsync("div", { key: '66dbcb028acb35e9a43502e9ff9a00fd2ebf8bf2', class: "product-info" }, this.supplierCategory && (hAsync("dropi-ilustration-icon", { key: 'fd3d94e953a6b91418decc09ed426755a85bac1b', class: "supplier-insignia", type: "insignia", stateInsignia: this.supplierCategory, tagProduct: true })), hAsync("div", { key: '45817e3bb0bfdaa0ec8cb4a23fdac1bb943e93dc', class: "product-header" }, this.category && (hAsync("span", { key: 'c721519a5339a2ac40d20c283bbe8797b78e4b27', class: "category" }, this.category)), hAsync("div", { key: '49f5013738dfffcdb83dfde628f5d1d21164c3d2', class: "stock-info" }, hAsync("span", { key: 'bd49d5069d07b3ae10ac9c85a4b84bbb573f926e', class: "stock-label" }, "Stock:"), hAsync("span", { key: 'd0eefb88240c13c9c56e7470e79cbacc9d86caf4', class: "stock-value", style: { color: this.getStockColor() } }, this.stock === 0 ? 'Agotado' : this.stock))), hAsync("h3", { key: 'a880d0df13af0b75d553daf18e876905b93e6ef1', class: "product-name" }, this.productName), this.supplier && (hAsync("div", { key: 'faa82e269979084e7510b6a17fb1f3caee8ad181', class: "supplier-info" }, hAsync("span", { key: 'b4b223620c58cb30945b1c6be50559614937eb5f', class: "supplier-label" }, "Proveedor:"), hAsync("span", { key: '989580f42383c3b6adb6484a493d1293a2a11904', class: "supplier-name", onClick: (e) => { e.stopPropagation(); this.dropiSupplierClick.emit(); } }, this.supplier))), hAsync("div", { key: '451c1ab830c7ab38c4e414e94f11f63ffcf86162', class: "price-container" }, hAsync("div", { key: '755f3f8aac6f7b1d458d28b74dec2734b42794a6', class: "price-item" }, hAsync("span", { key: 'fff0a718b4f22641adcd28bbcb7e81a0f21755e9', class: "price-label" }, "Precio proveedor"), hAsync("span", { key: '5bb6843a4a293195f0dbda5c3eccfc4f38c719b1', class: "price-value" }, this.currency, " ", this.formatPrice(this.salePrice))), hAsync("div", { key: '468b1d7596ec5d727846a087b5d89461c5fef858', class: "price-item" }, hAsync("span", { key: '91b15e4d58d27997b2dfdb9c73fd417a8f8ba5fb', class: "price-label" }, "Precio sugerido"), hAsync("span", { key: '378483760ffac07491f5b65b37d5e27d41423ec5', class: "price-value" }, this.currency, " ", this.formatPrice(this.suggestedPrice))))), hAsync("div", { key: '71467832049894083ea3454618a12d082cb15844', class: "separator" }), this.showAddButton && (hAsync("div", { key: 'f9f0450e3dfa2b91ae7caa468811cc739d7a280e', class: { 'action-button': true, 'action-button--disabled': !this.inStock }, onClick: (e) => {
                 e.stopPropagation();
                 if (this.inStock)
                     this.dropiAddProduct.emit();
-            } }, hAsync("dropi-icon", { key: '89cf58b72a1500616eb47b9f6e0bcf1e67229d94', name: "Shopping-cart-arrow-rigth", iconWidth: "20px", iconHeight: "20px", color: "#f49a3d" }), hAsync("span", { key: '60843cb9e54337eae7e570827190f1d60a8f0450', class: "button-text" }, "Enviar a cliente")))));
+            } }, hAsync("dropi-icon", { key: '50a9fad974460c2728fb1fca74628d093cbb1875', name: "Shopping-cart-arrow-rigth", iconWidth: "20px", iconHeight: "20px", color: "#f49a3d" }), hAsync("span", { key: 'f5ac44dd20e01bc644e863c3cbf51e3493821e70', class: "button-text" }, "Enviar a cliente")))));
     }
     static get style() { return dropiCardProductCss(); }
     static get cmpMeta() { return {
@@ -6282,8 +6287,8 @@ const dropiCardSectionCss = () => `:host{display:block;width:100%}*,*::before,*:
 class DropiCardSection {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.onChange = createEvent(this, "onChange", 7);
-        this.onClick = createEvent(this, "onClick", 7);
+        this.dropiChange = createEvent(this, "dropiChange");
+        this.dropiClick = createEvent(this, "dropiClick");
     }
     /** Section title — matches Angular 'title' */
     title = 'title';
@@ -6296,16 +6301,16 @@ class DropiCardSection {
     /** Switch checked state */
     isChecked = false;
     /** Emitted when switch changes */
-    onChange;
+    dropiChange;
     /** Emitted when dropdown icon is clicked */
-    onClick;
+    dropiClick;
     render() {
-        return (hAsync("div", { key: 'aa7548c223bf3238b7af10e52821e3ffd19fefca', class: "card-section" }, hAsync("div", { key: '6b0ed1e7f7c282b0f67277567a2fa1ffbab9d04e', class: "card-section__text" }, this.type === 'important'
+        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: 'f0c83d631d541d95c19e4a246634da56413a3de9', class: "card-section__desc" }, this.description)), hAsync("div", { key: '976d78401ab26872df88115ae0f0449bcd2faae9', class: "card-section__control" }, this.typeElement === 'switch' ? (hAsync("dropi-switch", { isChecked: this.isChecked, onOnChange: (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", { isChecked: this.isChecked, onDropiChange: (e) => {
                 this.isChecked = e.detail;
-                this.onChange.emit(e.detail);
-            } })) : (hAsync("button", { class: "card-section__dropdown-btn", onClick: () => this.onClick.emit(), "aria-label": "Expandir" }, hAsync("dropi-icon", { name: "Dropdown-down", iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-500" }))))));
+                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" }))))));
     }
     static get style() { return dropiCardSectionCss(); }
     static get cmpMeta() { return {
@@ -6329,8 +6334,8 @@ const dropiCarouselCss = () => `:host{display:block;width:100%}*,*::before,*::af
 class DropiCarousel {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.pageChange = createEvent(this, "pageChange", 7);
-        this.onPage = createEvent(this, "onPage", 7);
+        this.dropiPageChange = createEvent(this, "dropiPageChange");
+        this.dropiPage = createEvent(this, "dropiPage");
     }
     get el() { return getElement(this); }
     /** Items to display (Array of URLs or objects) */
@@ -6357,8 +6362,8 @@ class DropiCarousel {
     totalPages = 0;
     itemsContainer;
     timer;
-    pageChange;
-    onPage;
+    dropiPageChange;
+    dropiPage;
     handleValue(val) {
         this.parsedValue = typeof val === 'string' ? JSON.parse(val) : (val || []);
         this.updateTotalPages();
@@ -6430,7 +6435,7 @@ class DropiCarousel {
             this.internalPage = (this.internalPage + 1) % this.totalPages;
             this.page = this.internalPage;
             this.updateTransform();
-            this.pageChange.emit(this.internalPage);
+            this.dropiPageChange.emit(this.internalPage);
             setTimeout(() => (this.isAnimating = false), 500);
         }
     };
@@ -6442,7 +6447,7 @@ class DropiCarousel {
             this.internalPage = (this.internalPage - 1 + this.totalPages) % this.totalPages;
             this.page = this.internalPage;
             this.updateTransform();
-            this.pageChange.emit(this.internalPage);
+            this.dropiPageChange.emit(this.internalPage);
             setTimeout(() => (this.isAnimating = false), 500);
         }
     };
@@ -6451,7 +6456,7 @@ class DropiCarousel {
         this.internalPage = index;
         this.page = this.internalPage;
         this.updateTransform();
-        this.pageChange.emit(this.internalPage);
+        this.dropiPageChange.emit(this.internalPage);
         setTimeout(() => (this.isAnimating = false), 500);
     }
     render() {
@@ -6504,27 +6509,27 @@ const dropiCheckboxCss = () => `:host{display:inline-block}*,*::before,*::after{
 class DropiCheckbox {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.onChange = createEvent(this, "onChange", 7);
+        this.dropiChange = createEvent(this, "dropiChange");
     }
     /** Whether the checkbox is checked */
     checked = false;
     /** Whether the checkbox is disabled */
     disabled = false;
     /** Emitted when the checked state changes */
-    onChange;
+    dropiChange;
     changeState() {
         if (this.disabled)
             return;
         this.checked = !this.checked;
-        this.onChange.emit(this.checked);
+        this.dropiChange.emit(this.checked);
     }
     render() {
-        return (hAsync("div", { key: 'fdc1c54733617c0dab1ae11050d90650dc3eba91', class: "container-dropi-checkbox", onClick: () => this.changeState() }, hAsync("div", { key: '6329c1a53e8b9f85ea26ca01afb920583570e85f', class: {
+        return (hAsync("div", { key: '071505574decbf6b138256f73affe101c01080ef', class: "container-dropi-checkbox", onClick: () => this.changeState() }, hAsync("div", { key: '03e7ec24a87e22c4a5fe1d94cc4ca1fe349d6e6f', class: {
                 check: true,
                 isCheck: this.checked,
                 noCheck: !this.checked,
                 disabled: this.disabled,
-            } }, hAsync("svg", { key: '50b1ebd160e1ee6b28ef23651f1e12afc9406f8a', xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 24 24", fill: "none" }, hAsync("path", { key: '518070eaa2902d4cdc5e905f8a80d06b3d044f3d', 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: 'c56f01268919995cc7aac0173edf44a01a62e13e', xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 24 24", fill: "none" }, hAsync("path", { key: '575f863c9e82e862ea7049bf633b0d86ba374bb2', 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 style() { return dropiCheckboxCss(); }
@@ -6550,8 +6555,8 @@ const dropiCheckboxSelectionListCss = () => `:host{display:block;width:100%}*,*:
 class DropiCheckboxSelectionList {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.checkedValues = createEvent(this, "checkedValues", 7);
-        this.onSearch = createEvent(this, "onSearch", 7);
+        this.dropiCheckedValues = createEvent(this, "dropiCheckedValues");
+        this.dropiSearch = createEvent(this, "dropiSearch");
     }
     /** Options array or JSON string */
     options = [];
@@ -6571,9 +6576,9 @@ class DropiCheckboxSelectionList {
     selected = [];
     parsedOptions = [];
     /** Emitted when selection changes — matches Angular 'checkedValues' */
-    checkedValues;
+    dropiCheckedValues;
     /** Emitted on search — matches Angular 'onSearch' */
-    onSearch;
+    dropiSearch;
     optionsChanged(val) {
         this.parsedOptions = typeof val === 'string' ? JSON.parse(val) : (val || []);
     }
@@ -6593,14 +6598,14 @@ class DropiCheckboxSelectionList {
         else {
             this.selected = this.selected.includes(id) ? [] : [id];
         }
-        this.checkedValues.emit(this.selected);
+        this.dropiCheckedValues.emit(this.selected);
     }
     render() {
         const items = this.filtered;
-        return (hAsync("div", { key: 'a86957a361ddab935966496e85da0474d6c7618a', class: "csl" }, this.showFilter && (hAsync("div", { key: 'c6e6d3c7386a788c0e3141ac77b78b597020e43d', class: "csl__search" }, hAsync("dropi-icon", { key: '5746663be651673a23e8fc062febad9a920512de', name: "Search", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-400" }), hAsync("input", { key: '47f43fae660a7b3d6c8b56ea0c2bb1f94a22e366', class: "csl__search-input", type: "text", placeholder: this.filterPlaceholder, value: this.filterText, onInput: (e) => {
+        return (hAsync("div", { key: '95774833547807d6001525158bf199883661b649', class: "csl" }, this.showFilter && (hAsync("div", { key: '13f6bfd33150cdf138e90b93fc8121dfcc311050', class: "csl__search" }, hAsync("dropi-icon", { key: '4edf5c21eeac0aa442e58845621b7715d8484c1b', name: "Search", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-400" }), hAsync("input", { key: '40071d0c189c7fd1f1bf8090ebe1d64ce9605602', 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 && (hAsync("button", { key: '96faed8cb5ce7660af9735e73622dc31570e1daa', class: "csl__clear", onClick: () => { this.filterText = ''; this.onSearch.emit(''); } }, hAsync("dropi-icon", { key: '2fc4bfceb57c9fc2506db5e7c238e7bf48f45cb9', name: "Close-small", iconWidth: "14px", iconHeight: "14px", color: "Gray-Gray-400" }))))), hAsync("div", { key: '283d6e1127fbfa7e8206133a6a32bff04e8b2ebc', class: "csl__list" }, items.length === 0 && this.showNotFound ? (hAsync("div", { class: "csl__empty" }, this.notFoundMessage)) : (items.map(opt => {
+                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)));
         })))));
@@ -6642,7 +6647,7 @@ const dropiChipsCss = () => `:host{display:inline-flex}*,*::before,*::after{box-
 class DropiChips {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.onClose = createEvent(this, "onClose", 7);
+        this.dropiClose = createEvent(this, "dropiClose");
     }
     /** Visual style (named customStyle to avoid conflict with HTMLElement.style) */
     customStyle = 'fill';
@@ -6655,9 +6660,9 @@ class DropiChips {
     /** Icon name (when type = 'icon') */
     icon = '';
     /** Emitted when the close icon is clicked */
-    onClose;
+    dropiClose;
     render() {
-        return (hAsync("div", { key: '1d2faf302cc3eb832d55f46f98a7817fb616e4e1', class: { 'chip': true, [`chip--${this.customStyle}`]: true } }, this.type === 'avatar' && this.urlImg && (hAsync("img", { key: '3014d189c71a8d3bc23f11caf1181285c6b1b0ed', class: "chip__avatar", src: this.urlImg, alt: "" })), this.type === 'icon' && this.icon && (hAsync("dropi-icon", { key: 'b8c57ece5d9451a95aee7d2e90bfe294e788dfc8', class: "chip__pre-icon", name: this.icon, iconWidth: "14px", iconHeight: "14px", color: "currentColor" })), hAsync("span", { key: 'e141b08e2b7c07e45eb065a001c53f40fe36a757', class: "chip__text" }, hAsync("slot", { key: 'aa2c06f8e00b37492034ea0950603ffa3a7638d7' })), this.showIcon && (hAsync("button", { key: 'ea9d1674848c27b06d6e92a0a5bd4fcf8de499a4', class: "chip__close", onClick: () => this.onClose.emit(), "aria-label": "Eliminar" }, hAsync("dropi-icon", { key: '0a67633f6f3c898958359730b635430e53d7565c', name: "Cross-circle", iconWidth: "14px", iconHeight: "14px", color: "currentColor" })))));
+        return (hAsync("div", { key: '394a3ff5219535e9f4e1d6c9fbb320c32f1ce2e7', class: { 'chip': true, [`chip--${this.customStyle}`]: true } }, this.type === 'avatar' && this.urlImg && (hAsync("img", { key: 'c7ea7ce319e2ab0a179f7b0b61ad9fe39be7c1ec', class: "chip__avatar", src: this.urlImg, alt: "" })), this.type === 'icon' && this.icon && (hAsync("dropi-icon", { key: '67e2edfbe37af83868a665cf65a85ecc27b7cfb5', class: "chip__pre-icon", name: this.icon, iconWidth: "14px", iconHeight: "14px", color: "currentColor" })), hAsync("span", { key: '1916b1796d69cf6742177b8f4013315323bdf16f', class: "chip__text" }, hAsync("slot", { key: '167e1b230b1c4406ba3f40ba7783966c6b523c96' })), this.showIcon && (hAsync("button", { key: '118d46db1615e9ed14485500b5a754407c361139', class: "chip__close", onClick: () => this.dropiClose.emit(), "aria-label": "Eliminar" }, hAsync("dropi-icon", { key: '1639e4ae068d0361512469d2915b392101b2b923', name: "Cross-circle", iconWidth: "14px", iconHeight: "14px", color: "currentColor" })))));
     }
     static get style() { return dropiChipsCss(); }
     static get cmpMeta() { return {
@@ -6692,7 +6697,7 @@ const dropiCitySelectorCss = () => `:host{display:block;width:100%;position:rela
 class DropiCitySelector {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.selectedCitiesChange = createEvent(this, "selectedCitiesChange", 7);
+        this.selectedCitiesChange = createEvent(this, "selectedCitiesChange");
     }
     /** Grouped city options (array or JSON string) */
     options = [];
@@ -6808,7 +6813,7 @@ const dropiColorPickerCss = () => `:host{display:block}.general-container{positi
 class DropiColorPicker {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.colorChange = createEvent(this, "colorChange", 7);
+        this.colorChange = createEvent(this, "colorChange");
     }
     get el() { return getElement(this); }
     currentColor = '#ffffff';
@@ -7104,10 +7109,10 @@ class DropiColorPicker {
         }
     }
     render() {
-        return (hAsync("div", { key: '2ee2bd6abd837388d8169961f6b1024da228b453', class: "general-container" }, hAsync("div", { key: '15416c1a844daf774dda53f1c08bbe6b15435b64', class: "main-input-container" }, hAsync("div", { key: 'e08aacd3ebb059a8467cf6f597d2b3bb3419e286', class: "overlay", onClick: () => this.showEditor() }), hAsync("div", { key: 'dda8addee7afb351fb1f6c18dda516d29259220d', class: "line-color-preview" }, hAsync("div", { key: 'b242eac802dc0c1d0a9965fb6fc9b6f010408ae2', class: "color-preview", style: { background: this.currentColor } })), hAsync("div", { key: '8dddc6632dddae52cc58d964ee50cae1e6460b12', class: "color-info" }, hAsync("input", { key: '7181e30bddae8005260d285653425cd5cad2386e', type: "text", class: "color-input", value: this.currentColor, maxLength: 9, readOnly: true }))), hAsync("div", { key: '0ad3b547299fc1a4ccab9ddb7efebd7962fd7855', class: `color-picker-container position-${this.position} ${this.showEdit ? 'show' : ''}` }, hAsync("div", { key: 'c49847d5a6ca7a90f27889afe26f6c30c1959676', class: "main-color-canvas-container" }, hAsync("canvas", { key: '44531a25415492782d70d070aacf17797f9e3818', ref: (el) => this.colorCanvas = el, width: 256, height: 150, onMouseDown: (e) => this.onColorMouseDown(e) }), hAsync("div", { key: '325bc14afacafa6dddd0a9bc837c6448ff803bd8', class: "color-selector-pointer", style: {
+        return (hAsync("div", { key: '18ea41f637e46cb88d57cb2bc513f5e6e3ef9617', class: "general-container" }, hAsync("div", { key: '653748e883bc4deaf05739ced8e516f857a7a26b', class: "main-input-container" }, hAsync("div", { key: 'b8a4e60b25d6017c3987fa4ea3420c78e3400db0', class: "overlay", onClick: () => this.showEditor() }), hAsync("div", { key: 'e22f4b3e95f099e2444a46ee560fefb9f6556b65', class: "line-color-preview" }, hAsync("div", { key: 'cf513dbb5ee9652a6d20aad0608508cae3e000af', class: "color-preview", style: { background: this.currentColor } })), hAsync("div", { key: '025b264ae8aca0fca79f662c58250eea43ccf0e7', class: "color-info" }, hAsync("input", { key: '60a379b53bd0cf0bb1f80d5e1bd5b4c4038686f9', type: "text", class: "color-input", value: this.currentColor, maxLength: 9, readOnly: true }))), hAsync("div", { key: '06e15b97ba156a9aa9dec9f60f2b24c924c0ac53', class: `color-picker-container position-${this.position} ${this.showEdit ? 'show' : ''}` }, hAsync("div", { key: 'ea9df13cdf62ae1378b600dc7689df61bec5fc9b', class: "main-color-canvas-container" }, hAsync("canvas", { key: '5d73426ccfcccca44102300588472fe5e54744f9', ref: (el) => this.colorCanvas = el, width: 256, height: 150, onMouseDown: (e) => this.onColorMouseDown(e) }), hAsync("div", { key: 'e710e7f8c1558ad20dcfb0f03c98969d9aee5e91', class: "color-selector-pointer", style: {
                 left: `${(this.saturation / 100) * 256}px`,
                 top: `${((100 - this.currentVal) / 100) * 150}px`
-            } })), hAsync("div", { key: 'ab6d2a987b4c317fa218e70a1602ea829505fe0a', class: "slider-container" }, hAsync("div", { key: 'fe9ae897de10c04322653870cb9e5b79f61a2b86', class: "slider-group" }, hAsync("div", { key: 'f39f1935c0410509f6ecbf69b718730201d70be7', class: "hue-slider-container" }, hAsync("canvas", { key: '6a08c8dd36f3c9d70aa0f0438006bc4efa4df401', ref: (el) => this.hueCanvas = el, width: 256, height: 20, onMouseDown: (e) => this.onHueMouseDown(e) }), hAsync("div", { key: 'a91a4f4469e3152b24bf1e7dfd3d4738eb17f661', class: "slider-pointer", style: { left: `${(this.hue / 360) * 234}px` } }))), hAsync("div", { key: '2a45b1e24dcb447e515d8dbfac2ecd4032661af8', class: "slider-group" }, hAsync("div", { key: 'ec945cd912ecf046ca16e7520bae48d3e998f8fd', class: "opacity-slider-container" }, hAsync("canvas", { key: 'f181f9a8b16274d94377f3dd300c3bff231088df', ref: (el) => this.opacityCanvas = el, width: 256, height: 20, onMouseDown: (e) => this.onOpacityMouseDown(e) }), hAsync("div", { key: '2e246b9e62991569c60024ac4f8b1ae32543e03e', class: "slider-pointer", style: { left: `${(this.opacity / 100) * 234}px` } }))), hAsync("div", { key: 'c8c539dda06f8ce70b4c669a32e56cb693132f49', class: "color-info" }, hAsync("div", { key: '5939e97e1331e57a5837e868ea6088b069e3c3eb', class: "color-label" }, "HEX"), hAsync("input", { key: '321cebcb041223d4cb6c072f310720edcdb2391c', type: "text", class: "color-input", value: this.color, onInput: (e) => this.onHexInputChange(e), maxLength: 9 }))))));
+            } })), hAsync("div", { key: '239c7986572fade46b913629bbd374ec6f15e6fb', class: "slider-container" }, hAsync("div", { key: '35c4231f321c42fa95f362da5bf211daf1671c79', class: "slider-group" }, hAsync("div", { key: '20be2dc7eff210e31ab3215da10473a23db921f1', class: "hue-slider-container" }, hAsync("canvas", { key: '0795238e2a59747c4bfbd3437a2a2fd9396dc9e2', ref: (el) => this.hueCanvas = el, width: 256, height: 20, onMouseDown: (e) => this.onHueMouseDown(e) }), hAsync("div", { key: '17296210ecef2a958a46f23971a04da61d59402e', class: "slider-pointer", style: { left: `${(this.hue / 360) * 234}px` } }))), hAsync("div", { key: 'af7504663561d0e811ae7ef163cce80cfa256187', class: "slider-group" }, hAsync("div", { key: '7f3f01cfb0e4ca93403dad15787ab8acd7c1cd82', class: "opacity-slider-container" }, hAsync("canvas", { key: '9bac8eca65bfba529748eb9788fc749b87115ca6', ref: (el) => this.opacityCanvas = el, width: 256, height: 20, onMouseDown: (e) => this.onOpacityMouseDown(e) }), hAsync("div", { key: '34166bf45efd6f4148395ede39680164662f8a33', class: "slider-pointer", style: { left: `${(this.opacity / 100) * 234}px` } }))), hAsync("div", { key: 'b43c40db224a560adb19fd91a8790efe11719ff9', class: "color-info" }, hAsync("div", { key: 'aad6ef925f30835b5d8f51d23f872560bcb62360', class: "color-label" }, "HEX"), hAsync("input", { key: 'bdb5fd6ca689251a7c566f32bc6c308873117b2c', type: "text", class: "color-input", value: this.color, onInput: (e) => this.onHexInputChange(e), maxLength: 9 }))))));
     }
     static get watchers() { return {
         "value": [{
@@ -7168,7 +7173,7 @@ class DropiCountryFlags {
             style['width'] = this.width.includes('px') ? this.width : `${this.width}px`;
         if (this.height)
             style['height'] = this.height.includes('px') ? this.height : `${this.height}px`;
-        return (hAsync("figure", { key: '924adeb5372e2c02ce1c0471a162b57fc53616bd', class: `flag ${this.customStyle ?? 'flat'}` }, hAsync("img", { key: '8433b69bbfc51aa5e72f8bd7166382e1d7907cfa', src: this.src, style: style, alt: `flag-${this.country}` })));
+        return (hAsync("figure", { key: '451765b675d5b27dc0357a1a2b6dd338690361c8', class: `flag ${this.customStyle ?? 'flat'}` }, hAsync("img", { key: 'f58a64e7d78298d328be2ba625c852a5eddc392f', src: this.src, style: style, alt: `flag-${this.country}` })));
     }
     static get style() { return dropiCountryFlagsCss(); }
     static get cmpMeta() { return {
@@ -7289,7 +7294,7 @@ const COUNTRIES$1 = [
 class DropiCountrySelector {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.onChangeSelect = createEvent(this, "onChangeSelect", 7);
+        this.dropiChange = createEvent(this, "dropiChange");
     }
     /** Label above the select */
     label = '';
@@ -7313,7 +7318,7 @@ class DropiCountrySelector {
      */
     selectProperties = null;
     /** Emitted when a country is selected. Detail is the CountryItem. */
-    onChangeSelect;
+    dropiChange;
     isOpen = false;
     selected = null;
     get el() { return getElement(this); }
@@ -7365,14 +7370,14 @@ class DropiCountrySelector {
         this.isOpen = false;
         this.searchTerm = '';
         this.currentSelection = country.code;
-        this.onChangeSelect.emit(country);
+        this.dropiChange.emit(country);
     }
     render() {
-        return (hAsync("div", { key: '78179f7b5e30c4eb7d5345431f476f625a60534a', class: "custom-select" }, this.label && (hAsync("label", { key: '13566e714a55c3820facffab298a97fc37c97133' }, this.label, this.showObligatory && hAsync("span", { key: '7772ddd762bd50da043ed030b5a3442e10de47b0', class: "required" }, "*"))), hAsync("button", { key: '649759c1d921318a48fd1abf8e71977d52b6ae2d', type: "button", class: {
+        return (hAsync("div", { key: '036ea5668f8ff842f69f13c9d94000ecdc96126b', class: "custom-select" }, this.label && (hAsync("label", { key: '457b2a26a2e9ea425aa95a2a162f2f3e547376e3' }, this.label, this.showObligatory && hAsync("span", { key: 'fc2b04e48d9372e0e5c1f593e57797558dc2e359', class: "required" }, "*"))), hAsync("button", { key: '0239ee64b4859e45a9b8dcff0e175124d16cdc09', type: "button", class: {
                 'select-button': true,
                 'select-completed': !!this.selected,
                 'select-invalid': this.hasError,
-            }, disabled: this.disabled, onClick: () => this.open() }, hAsync("div", { key: '79df14d64f598d312a1cd82f294edf8aa14ed32e', 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: 'dc74219468e838cb5cf06a5ab5036809f84c8f44', name: this.isOpen ? 'Arrow-Up-2' : 'Arrow-Down-2', iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-500" })), hAsync("ul", { key: 'ef8ce166ba747d7973b09a3c0183629d42e344d9', class: `select-dropdown${this.isOpen ? ' expanded' : ' collapsed'}` }, hAsync("li", { key: '04d0b6b0dc3fb431ad606c0df115d4966f3b5a24', class: "search-li" }, hAsync("div", { key: '735a83924982308b4ec92eb19f09c449717fa05d', class: "search-field" }, hAsync("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; } }), hAsync("span", { key: '00bdb2ddd3f67929246f89faed2a2ef2ab169860', class: "search-icon" }, hAsync("dropi-icon", { key: 'bffe43141d5de99b143751c4a80fd972ba8b274c', 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: '32baa238875d15f41d1b308fc7adb418c6acc2b1', class: { 'select-helper': true, 'select-helper-error': this.hasError } }, this.hasError && hAsync("dropi-icon", { key: 'bfcfecc740f2cd9044ba2e1d2188ea2a9a208836', name: "Warning-circle", iconWidth: "12px", iconHeight: "12px", color: "Error-Error-500" }), hAsync("span", { key: 'd1ced64bb98903ce46e692ddf008f885edf3162b' }, this.textHelper)))));
+            }, disabled: this.disabled, onClick: () => this.open() }, hAsync("div", { key: 'dd468a1977089ada40f93e1e76f0d55349c5f80d', 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: '397055b90b0dab05effdcd2bc26a9839f963fa89', name: this.isOpen ? 'Arrow-Up-2' : 'Arrow-Down-2', iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-500" })), hAsync("ul", { key: 'cac3fd861f38331eb4fada4f65ee897d1017cc52', class: `select-dropdown${this.isOpen ? ' expanded' : ' collapsed'}` }, hAsync("li", { key: '0ccd958e816ff47fd53647d59f078483c7dbb3eb', class: "search-li" }, hAsync("div", { key: '7ad42859a5743aa27aea9a001f1424e50cdc9f60', class: "search-field" }, hAsync("input", { key: 'cb599f62e811383caeda0e329b688123f74fa571', 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: 'c60f6af4051d721a9c4c9b09f562f80d72a538eb', class: "search-icon" }, hAsync("dropi-icon", { key: '93477b3d42c8022424ea886820db795c5dc1194a', 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: 'e8fd998ffea654db0bac5e91b40ebd221781b12d', class: { 'select-helper': true, 'select-helper-error': this.hasError } }, this.hasError && hAsync("dropi-icon", { key: 'c7a334f5c2813cd0c4db5c8d36157b14ed2bdb11', name: "Warning-circle", iconWidth: "12px", iconHeight: "12px", color: "Error-Error-500" }), hAsync("span", { key: '04c7b006f67d6a4a3564fbe39c214f2fe9708cb4' }, this.textHelper)))));
     }
     static get watchers() { return {
         "currentSelection": [{
@@ -7420,9 +7425,9 @@ const DAYS_ES = ['Do', 'Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sa'];
 class DropiDatePicker {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.onChangeDate = createEvent(this, "onChangeDate", 7);
-        this.onClosePanel = createEvent(this, "onClosePanel", 7);
-        this.dropiRangeChange = createEvent(this, "dropiRangeChange", 7);
+        this.dropiChangeDate = createEvent(this, "dropiChangeDate");
+        this.dropiClosePanel = createEvent(this, "dropiClosePanel");
+        this.dropiRangeChange = createEvent(this, "dropiRangeChange");
     }
     /** Selected date (ISO string, single mode) - matches Angular 'selectedDate' */
     selectedDate = '';
@@ -7457,9 +7462,9 @@ class DropiDatePicker {
         }
     }
     /** Emitted when date selected — matches Angular 'onChangeDate' */
-    onChangeDate;
+    dropiChangeDate;
     /** Emitted when panel closes — matches Angular 'onClosePanel' */
-    onClosePanel;
+    dropiClosePanel;
     /** Emitted when range selected */
     dropiRangeChange;
     get displayValue() {
@@ -7529,7 +7534,7 @@ class DropiDatePicker {
         if (this.selectionMode !== 'range') {
             this.selectedDate = iso;
             this.open = false;
-            this.onChangeDate.emit(iso);
+            this.dropiChangeDate.emit(iso);
             return;
         }
         // Range mode
@@ -7581,12 +7586,12 @@ class DropiDatePicker {
     render() {
         const days = this.buildDays();
         const today = new Date().toISOString().slice(0, 10);
-        return (hAsync("div", { key: 'ff426d80bb5bf05ca8b0c27773dee52f13cf4090', class: "dp-wrap" }, this.label && hAsync("label", { key: 'fc7ebd6f14227533288b02c95933f6d4833e3f51', class: "dp-label" }, this.label), hAsync("button", { key: '2fa9b1f3d2c9bfc4876724492a265ff0b29f8d23', class: {
+        return (hAsync("div", { key: '0c3cb89d77d6d8e7d3f955354d6be4b7a1f507fb', class: "dp-wrap" }, this.label && hAsync("label", { key: '672ad3d08337ed0df7c7e7d582ba8fe5af8d2b23', class: "dp-label" }, this.label), hAsync("button", { key: '848428a5ce236b37e8e988223c9ef8bd91ea16b3', 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: '773df10339713e2900abf37a27814f11919723a6', name: "Calendar", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-400" }), hAsync("span", { key: '2dfb36f49f70b658eb3e614aaafd7d55b84bd8ff', class: { 'dp-trigger__value': true, 'dp-trigger__placeholder': !this.displayValue } }, this.displayValue || this.placeholder), hAsync("dropi-icon", { key: '285147bc4a042263f760b36779d05453f041b452', name: "Arrow-Down-2", iconWidth: "12px", iconHeight: "12px", color: "Gray-Gray-400" })), this.open && (hAsync("div", { key: '44e0c6e10690c3acf8b6d1df295fa9806da11921', class: "dp-popup" }, hAsync("div", { key: 'd901f7614790294623a192bfca1821ddac2f93eb', class: "dp-nav" }, hAsync("button", { key: 'd6ce30acaaf801e3c373b2c3f2835cc2d52dd0f6', class: "dp-nav__btn", onClick: () => this.prevMonth(), type: "button" }, hAsync("dropi-icon", { key: 'bce4421271b1d662c909d8934992567e33dac651', name: "Arrow-Left-2", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" })), hAsync("span", { key: 'bd483b0fe673fda734b6acc526e1cb6e7682c5be', class: "dp-nav__title" }, hAsync("span", { key: 'cd9e36ca306145ad39371a7a147c5efbb6ea9922' }, MONTHS_ES[this.viewMonth]), hAsync("span", { key: '99b3f4cb1f8d5cef1b07fa39ab6afd51d77080da' }, this.viewYear)), hAsync("button", { key: '1fc969593153c3b920a8c99e7beae8e6ba2d0e9d', class: "dp-nav__btn", onClick: () => this.nextMonth(), type: "button" }, hAsync("dropi-icon", { key: 'b200e12b9267232f9e01794ff47e4b613cdeaf53', name: "Arrow-Right-2", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" }))), hAsync("div", { key: 'ea473f30463db209687e9f8ecf4f3e9f9422e379', 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: 'c51b9238996ec454f64f53d4e9ede35bf494fd95', name: "Calendar", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-400" }), hAsync("span", { key: 'b34ed963710695296a2986b0e790457b90a3ee60', class: { 'dp-trigger__value': true, 'dp-trigger__placeholder': !this.displayValue } }, this.displayValue || this.placeholder), hAsync("dropi-icon", { key: '8cbefce39dab39a5cba941f4538f46cf97db1c06', name: "Arrow-Down-2", iconWidth: "12px", iconHeight: "12px", color: "Gray-Gray-400" })), this.open && (hAsync("div", { key: '36a5db42655b136cee1abf31bb5e206a6d118beb', class: "dp-popup" }, hAsync("div", { key: '456c2778f035fae19450841baa20df5092f6dca4', class: "dp-nav" }, hAsync("button", { key: '8f05a6aa4e1f4e0dda08ee9dad89f189c130eef0', class: "dp-nav__btn", onClick: () => this.prevMonth(), type: "button" }, hAsync("dropi-icon", { key: '41f4e9b157e56669fa179cfed62d960ff1eadfd6', name: "Arrow-Left-2", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" })), hAsync("span", { key: '53556f3a356e1d2b63b59d4edda40ddf5fda9e5f', class: "dp-nav__title" }, hAsync("span", { key: '4bad1d735d4235b2ddaac33f3fa8f6335e753984' }, MONTHS_ES[this.viewMonth]), hAsync("span", { key: 'c7af6bb7edc5dead7751c65ee024485aa2a6cf65' }, this.viewYear)), hAsync("button", { key: '5ff7b70b69732c01ae7a45c7b65336982ea6eed8', class: "dp-nav__btn", onClick: () => this.nextMonth(), type: "button" }, hAsync("dropi-icon", { key: '718725e17a530de4e8081c97e639342ff7fd9a96', name: "Arrow-Right-2", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" }))), hAsync("div", { key: 'd3d899342a15a9a0f2b508dbd39945831ebbad0d', 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;
@@ -7608,16 +7613,16 @@ class DropiDatePicker {
                     if (this.selectionMode === 'range' && this.startDate && !this.endDate)
                         this.hoverDate = iso;
                 }, onMouseLeave: () => this.hoverDate = '' }, day));
-        })), hAsync("div", { key: 'eb232baf8ece9768a26f5be6bcb6c9d965916643', class: "dp-footer" }, hAsync("button", { key: '97e25f18c4af3e4c43f762944b21bfd3941b0ea0', class: "dp-footer__clear", type: "button", onClick: () => {
+        })), hAsync("div", { key: '84c799762393b9de0161795f20188a680490d4d8', class: "dp-footer" }, hAsync("button", { key: '4696558b1be6bf8abe8461f341c129c640af46ce', class: "dp-footer__clear", type: "button", onClick: () => {
                 this.selectedDate = '';
                 this.startDate = '';
                 this.endDate = '';
                 this.open = false;
-            } }, "Limpiar"), hAsync("button", { key: '7e9cf51936868db07c3b940001c2b310b1de2b6d', class: "dp-footer__today", type: "button", onClick: () => {
+            } }, "Limpiar"), hAsync("button", { key: 'a87f6f92fa10829560d223835e70fd2951edc482', class: "dp-footer__today", type: "button", onClick: () => {
                 if (this.selectionMode !== 'range') {
                     this.selectedDate = today;
                     this.open = false;
-                    this.onChangeDate.emit(today);
+                    this.dropiChangeDate.emit(today);
                 }
                 else {
                     this.startDate = today;
@@ -7664,9 +7669,9 @@ const dropiDatePickerRangeCss = () => `:host{display:block;width:100%;max-width:
 class DropiDatePickerRange {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.startDateChange = createEvent(this, "startDateChange", 7);
-        this.endDateChange = createEvent(this, "endDateChange", 7);
-        this.dropiRangeChange = createEvent(this, "dropiRangeChange", 7);
+        this.startDateChange = createEvent(this, "startDateChange");
+        this.endDateChange = createEvent(this, "endDateChange");
+        this.dropiRangeChange = createEvent(this, "dropiRangeChange");
     }
     /** Start date (YYYY-MM-DD) */
     startDate = '';
@@ -7799,7 +7804,7 @@ const dropiDrawerCss = () => `:host{display:contents;font-family:'Inter', sans-s
 class DropiDrawer {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.dropiClose = createEvent(this, "dropiClose", 7);
+        this.dropiClose = createEvent(this, "dropiClose");
     }
     drawerTitle = '';
     /** Controls visibility (alias of open for Angular parity) */
@@ -7852,10 +7857,10 @@ class DropiDrawer {
             else
                 panelStyle['height'] = this.height;
         }
-        return (hAsync("div", { key: '7792ce8e001adf404aef387e35c5fb601f69b1e2', class: { 'drawer-host': true, 'drawer-host--open': this.open } }, hAsync("div", { key: '186c33be6a7cd1e34e6d1f852219be91b24a15b9', class: "drawer-backdrop", onClick: () => {
+        return (hAsync("div", { key: 'e5138752d1821a27ec3b0396cdc3d09bc15f7c73', class: { 'drawer-host': true, 'drawer-host--open': this.open } }, hAsync("div", { key: 'ca7f2dff57eee0cc1d5a71486c8ce765b27c7307', class: "drawer-backdrop", onClick: () => {
                 if (this.closeOnBackdrop)
                     this.close();
-            } }), hAsync("div", { key: '3a48c465707125c2de1e369e70375689fe5ff9c1', class: `drawer-panel drawer-panel--${this.position}${sizeClass ? ' ' + sizeClass : ''}`, style: panelStyle, role: "dialog", "aria-modal": "true" }, hAsync("div", { key: '840bb2933bc7e2264269bbadd5d9d61649fe58fe', class: { 'drawer-header': true, 'drawer-header--headless': this.headless } }, hAsync("h3", { key: 'bfd9c7db02e9db07ce32115ca6386a9840c61288', class: "drawer-header__title" }, this.drawerTitle), hAsync("button", { key: '6dc350e26f74d4e3aead7697bd2f5552e49e833c', class: "drawer-header__close", onClick: () => this.close(), "aria-label": "Cerrar" }, hAsync("dropi-icon", { key: 'aa887706723f327e48cdb836ee2ea0597fca3f3b', name: "Close-small", iconWidth: "32px", iconHeight: "32px", color: "Gray-Gray-400" }))), hAsync("div", { key: 'e6f301a6253d930e116a6e68a3e8f280b32f00ef', class: "drawer-body" }, hAsync("slot", { key: 'f05c00171734247aec82b8b504a53e11c3612fc9' })), hAsync("div", { key: 'f0f4aaba5926a2d0c78b3b1869d8d8efa0f03845', class: "drawer-footer" }, hAsync("slot", { key: '45e370e62b5d2e7c221f37ad8582656bed159637', name: "footer" })))));
+            } }), hAsync("div", { key: '985b7c295391fa2326ee5880bed829910c56d082', class: `drawer-panel drawer-panel--${this.position}${sizeClass ? ' ' + sizeClass : ''}`, style: panelStyle, role: "dialog", "aria-modal": "true" }, hAsync("div", { key: 'be62a0009ab8c829cd20643552a66d17b8e877cf', class: { 'drawer-header': true, 'drawer-header--headless': this.headless } }, hAsync("h3", { key: 'e6f6a03c224c83fe8de9a2895a07bf93b9dbdea4', class: "drawer-header__title" }, this.drawerTitle), hAsync("button", { key: '66c251c8d8da1e0a0036f9bdeaeb6f09514dbfd4', class: "drawer-header__close", onClick: () => this.close(), "aria-label": "Cerrar" }, hAsync("dropi-icon", { key: '150a59e552636ec623d31926fc419ec36443cc22', name: "Close-small", iconWidth: "32px", iconHeight: "32px", color: "Gray-Gray-400" }))), hAsync("div", { key: '6982100fcf4e5ce4193bbff79baea9c557ad0722', class: "drawer-body" }, hAsync("slot", { key: '6ae61a0451322969ddb4684b77eb5851b942dd9a' })), hAsync("div", { key: '5d4df79ea4044d86edd51331a6c1cdd3a43bfc5d', class: "drawer-footer" }, hAsync("slot", { key: '49de1183444123c36076e20e882952b9d802a567', name: "footer" })))));
     }
     static get watchers() { return {
         "open": [{
@@ -7896,7 +7901,7 @@ const dropiDropdownCss = () => `:host{display:block;width:100%}*,*::before,*::af
 class DropiDropdown {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.modelChange = createEvent(this, "modelChange", 7);
+        this.modelChange = createEvent(this, "modelChange");
     }
     /** Options array or JSON string */
     options = [];
@@ -7976,7 +7981,7 @@ const dropiEmptyStateCss = () => `:host{display:block}*,*::before,*::after{box-s
 class DropiEmptyState {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.buttonClickEvent = createEvent(this, "buttonClickEvent", 7);
+        this.buttonClickEvent = createEvent(this, "buttonClickEvent");
     }
     /** Title text (matches Angular 'title') */
     title = '';
@@ -7997,7 +8002,7 @@ class DropiEmptyState {
     /** Emitted when button is clicked — matches Angular 'buttonClickEvent' */
     buttonClickEvent;
     render() {
-        return (hAsync("div", { key: '1b7c0fd20a119ae17ee09f7c68b7ae2b4e77ee98', class: "empty-state" }, hAsync("div", { key: 'cb4fd9dc6a8b491359fd9cd8b6983e68f64af994', class: "empty-state-visual" }, this.imageUrl ? (hAsync("img", { class: "empty-state-img", src: this.imageUrl, alt: this.imageAlt })) : (hAsync("img", { class: "empty-state-img", src: `assets/icons/ilustration/${(!this.dropiIcon || String(this.dropiIcon) === 'undefined' || String(this.dropiIcon) === 'null') ? 'default' : this.dropiIcon}.svg`, alt: this.imageAlt, onError: (e) => e.target.src = 'assets/icons/ilustration/default.svg' }))), this.title && hAsync("h3", { key: '14c09482953e39975c74ca454df3131e3233a712', class: "empty-state-title" }, this.title), this.description && hAsync("p", { key: '5fccb02b2b21d8895c5b122aa0fb6684fc9d7611', class: "empty-state-description" }, this.description), hAsync("slot", { key: '6e53d450b4dbb8cff81addd3e7fc528c599bf730' }), this.buttonText && (hAsync("div", { key: '4325f23a357c43b970dce907a63f24b63b10070e', class: "empty-state-actions" }, hAsync("dropi-button", { key: 'a475b2fec4e00343fa4b4fa29ac08d5564e4e21a', text: this.buttonText, preIcon: this.buttonIcon, severity: this.buttonSeverity, onClick: () => this.buttonClickEvent.emit() })))));
+        return (hAsync("div", { key: '50a720a8b293a19dbabccce8f7aa0fa996e5fd63', class: "empty-state" }, hAsync("div", { key: 'd13894b011225337234301bd514891d89caac3d7', class: "empty-state-visual" }, this.imageUrl ? (hAsync("img", { class: "empty-state-img", src: this.imageUrl, alt: this.imageAlt })) : (hAsync("img", { class: "empty-state-img", src: `assets/icons/ilustration/${(!this.dropiIcon || String(this.dropiIcon) === 'undefined' || String(this.dropiIcon) === 'null') ? 'default' : this.dropiIcon}.svg`, alt: this.imageAlt, onError: (e) => e.target.src = 'assets/icons/ilustration/default.svg' }))), this.title && hAsync("h3", { key: 'eb40395b4bd3c623f27bc3290bb37427420c5e94', class: "empty-state-title" }, this.title), this.description && hAsync("p", { key: 'f942c17f7a8d320bbe81dfcd45d13e56d7ea8eba', class: "empty-state-description" }, this.description), hAsync("slot", { key: '513f49ffeeb77e2be1318d6d251a1bcabff2689a' }), this.buttonText && (hAsync("div", { key: 'f6d9c391feee26eac44a8904e1768678bbb1604c', class: "empty-state-actions" }, hAsync("dropi-button", { key: 'f9ea9563a76a80bd29b6e6aaf8405092046a62a8', text: this.buttonText, preIcon: this.buttonIcon, severity: this.buttonSeverity, onClick: () => this.buttonClickEvent.emit() })))));
     }
     static get style() { return dropiEmptyStateCss(); }
     static get cmpMeta() { return {
@@ -8028,7 +8033,7 @@ const dropiFavoriteButtonCss = () => `:host{display:inline-flex}.fav-btn{display
 class DropiFavoriteButton {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.toggleFavorite = createEvent(this, "toggleFavorite", 7);
+        this.toggleFavorite = createEvent(this, "toggleFavorite");
     }
     /** Whether the item is currently marked as favorite */
     isFavorite = false;
@@ -8040,7 +8045,7 @@ class DropiFavoriteButton {
         this.toggleFavorite.emit(this.isFavorite);
     }
     render() {
-        return (hAsync("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) }, hAsync("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' })));
+        return (hAsync("button", { key: 'da3d3c03b4c297f1d4bb754f8ade9222d3edc39d', 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) }, hAsync("dropi-icon", { key: '857967dd6982df82f5ac29db4370fa607369da34', name: this.isFavorite || this.hovered ? 'Heart-solid' : 'Heart', iconWidth: "19px", iconHeight: "19px", color: this.isFavorite || this.hovered ? 'Primary-Primary-500' : 'Gray-Gray-800' })));
     }
     static get style() { return dropiFavoriteButtonCss(); }
     static get cmpMeta() { return {
@@ -8066,7 +8071,7 @@ const dropiFileUploadCss = () => `:host{display:block;width:100%}*,*::before,*::
 class DropiFileUpload {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.uploadedUrlsChange = createEvent(this, "uploadedUrlsChange", 7);
+        this.uploadedUrlsChange = createEvent(this, "uploadedUrlsChange");
     }
     /** Título mostrado arriba del componente */
     title = '';
@@ -8288,7 +8293,7 @@ class DropiFileUpload {
         const cardFiles = files.filter(f => f.typeView === 'card');
         const showDropZone = files.length < (this.maxFiles ?? 1) && !this.isDropZoneHidden();
         const isSmall = this.dragAndDropSize === 'small';
-        return (hAsync("div", { key: 'c09a5505630f5fa711bfd4bf20961c12b72a3fd8', class: "upload-container" }, (this.title || this.label) && (hAsync("div", { key: '1bf146f7faacca9e28002ea36e36bfffbead52e2', class: "upload-header" }, this.title && hAsync("div", { key: '00541bbf16b27c4a110cdde47826e5cc873e81c8', class: "text title" }, this.title), this.label && hAsync("div", { key: '3794f66b232427eab5b046ddf0e5aa70e7752967', class: "text label" }, this.label))), this.error && (hAsync("dropi-alert", { key: 'bfa68d17ac941905787526e3f8804e3e0f2f1778', message: this.errorMessage, type: "default", state: "error", dismissable: true, showButton: false, onOnClose: () => { this.error = false; } })), showDropZone && (hAsync("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) }, hAsync("div", { key: 'e6f548754efa4c94d882b305887cf57aa42ce72c', class: `file-upload__zone${this.dragging ? ' drag-over' : ''}` }, !isSmall && (hAsync("svg", { key: '52e3baa97a868e8e1dea0e2c8767514804e8ebd0', width: "40", height: "40", viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, hAsync("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" }), hAsync("g", { key: 'a65c0b3d112c7ab0ac22195a5f955f79dae859a8', "clip-path": "url(#up)" }, hAsync("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" }), hAsync("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" })), hAsync("defs", { key: '502826c8a475fb8e39cd5c17412b3a5d08b8b57f' }, hAsync("clipPath", { key: 'ee19ab3b2a0a2ee79130eb7c864322f3b1b8ca12', id: "up" }, hAsync("rect", { key: '6928d7c2657125285176108904a87b12578e99c7', width: "16", height: "16", fill: "white", transform: "translate(12 12)" }))))), hAsync("div", { key: '712573aee556fba6f0ec4bc91ec6a8a6f7c9f2cd', class: isSmall ? 'info size-small-upload' : 'info' }, hAsync("div", { key: '68c9fa1d370aa6cfd46b70bcf178d1d2ea516d1a', class: "title" }, this.textDropZone), isSmall && (hAsync("dropi-button", { key: '68d657e48f013fcacfb8f77f82627849c0be88be', text: this.textButton, size: "small", onClick: (e) => { e.stopPropagation(); this.openFilePicker(); } }))), !isSmall && (hAsync("div", { key: 'fba8a27308e72627d5dbe6a37bc4f9cbb3d5f58c', class: "info-desc" }, this.accept && hAsync("div", { key: 'c005fec3ae91d8d3919ea622b143390817e19b4a', class: "description" }, "Formatos admitidos: ", this.accept), hAsync("div", { key: 'b04d2d09f18b22232b60bb42f72f7016a2b4fc51', class: "description" }, "Tama\u00F1o m\u00E1ximo: ", this.maxFileSizeMB, "MB"))), !isSmall && (hAsync("dropi-button", { key: '4494470d4ea27f2022dbf057ed3fb519bbcc89df', text: this.textButton, size: "small", onClick: (e) => { e.stopPropagation(); this.openFilePicker(); } })), hAsync("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 && (hAsync("div", { key: 'c556993924a8b5fdc7fcdb9b76e9ee9876cc1211', class: "files-container" }, gridFiles.length > 0 && (hAsync("div", { key: '3fef57fa5153ec594b46e222053a79e095156dff', class: "grid-list" }, gridFiles.map(f => this.renderGridItem(f)), gridFiles.length < this.maxFiles && (hAsync("div", { key: '57051294666455141dbe24837243f8bcbfe34dac', class: "add-img", onClick: () => this.addImage() }, hAsync("div", { key: 'c39387899c7b3696ce4611b5f9a91204ad04a91e', class: "icon" }, hAsync("svg", { key: 'f63ac4806187522457de8aecbcd299a19a3f7a90', width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, hAsync("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" }))), hAsync("div", { key: '666a6f9501e1ff35e76526180d4c532ab57fe8f7', class: "text" }, "Agregar"))))), cardFiles.length > 0 && (hAsync("div", { key: 'b0b74121f4e4ce76076d027b7957e944cc1a7db6', class: "card-list" }, cardFiles.map(f => this.renderCardItem(f))))))));
+        return (hAsync("div", { key: 'e5f37c05ca644260f8c2ba4c549cdde8e908a570', class: "upload-container" }, (this.title || this.label) && (hAsync("div", { key: '493ff72b35f924431d94b6906d654a2413a59c47', class: "upload-header" }, this.title && hAsync("div", { key: '8fe37e760e44f5db9a5e42578a92d9a939661bf9', class: "text title" }, this.title), this.label && hAsync("div", { key: '3329bea57a935a907e47d2f40f82d3044e5992ad', class: "text label" }, this.label))), this.error && (hAsync("dropi-alert", { key: '1551176ccb8ec320df5eeea8b42f937a795c02a8', message: this.errorMessage, type: "default", state: "error", dismissable: true, showButton: false, onDropiClose: () => { this.error = false; } })), showDropZone && (hAsync("div", { key: '2522e795c006794c20bfea3534014227636cc4bd', 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) }, hAsync("div", { key: 'da75ce3acdf2d3490079c0d8c25bfadcdda49586', class: `file-upload__zone${this.dragging ? ' drag-over' : ''}` }, !isSmall && (hAsync("svg", { key: 'e9fb52b7ceda0e0e463ab26739b294bffdf9ea34', width: "40", height: "40", viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, hAsync("path", { key: 'dfec7aa24e681811dfc8d6ff3b721dec084aa4a0', 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" }), hAsync("g", { key: '9fffcd3ce8931d8b7beeb6417585a7eb7f222f96', "clip-path": "url(#up)" }, hAsync("path", { key: '6f1aec8a5a60f26c09645b2655e51c6aa7b34ca2', 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" }), hAsync("path", { key: '0c194dc527a19345b9fabc55e24cca08987a486a', 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" })), hAsync("defs", { key: '9b8c3526d936553239141c3cb4f81212377b5811' }, hAsync("clipPath", { key: '1be0970786af27a069ea237ec5bbd5292891b0cd', id: "up" }, hAsync("rect", { key: '5dbf5e86d6a7a9f07f9ada6e0c2d132b4eebd969', width: "16", height: "16", fill: "white", transform: "translate(12 12)" }))))), hAsync("div", { key: '5d06acbe6b129e60a49ae97c04bcd906e9abdfb9', class: isSmall ? 'info size-small-upload' : 'info' }, hAsync("div", { key: '30faf6e1ce359a4f2ed477a84c062994c3713506', class: "title" }, this.textDropZone), isSmall && (hAsync("dropi-button", { key: 'e6c3d40ff6c4c8b6381a7f0f49eedfbd407c0687', text: this.textButton, size: "small", onClick: (e) => { e.stopPropagation(); this.openFilePicker(); } }))), !isSmall && (hAsync("div", { key: '2680ec20dc360e2ccadb9a677569a5d51ebe2009', class: "info-desc" }, this.accept && hAsync("div", { key: '2ced48c536a4c9385b6941141f78566cf1624db6', class: "description" }, "Formatos admitidos: ", this.accept), hAsync("div", { key: '58bf63818e70de35113be94c9bf20bcd728d88ae', class: "description" }, "Tama\u00F1o m\u00E1ximo: ", this.maxFileSizeMB, "MB"))), !isSmall && (hAsync("dropi-button", { key: '96b20bf6d68b8e3f2572784ed8f27ffff4336cd1', text: this.textButton, size: "small", onClick: (e) => { e.stopPropagation(); this.openFilePicker(); } })), hAsync("input", { key: '3fefcd08176ad885be131d5be25b8a25e874da47', 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 && (hAsync("div", { key: 'ab0c9d2d0067e594a2c5047f86ed4ca0a9f576cb', class: "files-container" }, gridFiles.length > 0 && (hAsync("div", { key: '13894a0c569b88051fe0dc695839562e054862e2', class: "grid-list" }, gridFiles.map(f => this.renderGridItem(f)), gridFiles.length < this.maxFiles && (hAsync("div", { key: 'ba4ff34d4e686891b056cd4f189741ace807294c', class: "add-img", onClick: () => this.addImage() }, hAsync("div", { key: '95c341ae449bb857fc39563ba3fec9764139d429', class: "icon" }, hAsync("svg", { key: '28dcdb54a5856683c455d11864af4e2f7ecc0414', width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, hAsync("path", { key: '50514d670498a1fbdaee785b0a883aebc5f4b66c', 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" }))), hAsync("div", { key: '44a13026e2324e33d1a5432b371fc89019e1909e', class: "text" }, "Agregar"))))), cardFiles.length > 0 && (hAsync("div", { key: 'e66fbbc9aad1dc78030e62e89c2470b018563655', class: "card-list" }, cardFiles.map(f => this.renderCardItem(f))))))));
     }
     static get style() { return dropiFileUploadCss(); }
     static get cmpMeta() { return {
@@ -8328,9 +8333,9 @@ const dropiFileUploadProgressBarCss = () => `:host{display:block;width:100%}*,*:
 class DropiFileUploadProgressBar {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.deleteFile = createEvent(this, "deleteFile", 7);
-        this.uploadComplete = createEvent(this, "uploadComplete", 7);
-        this.viewFile = createEvent(this, "viewFile", 7);
+        this.deleteFile = createEvent(this, "deleteFile");
+        this.uploadComplete = createEvent(this, "uploadComplete");
+        this.viewFile = createEvent(this, "viewFile");
     }
     /** File name to display */
     textFile = 'Nombre del archivo.xlsx';
@@ -8382,7 +8387,7 @@ class DropiFileUploadProgressBar {
         };
     }
     render() {
-        return (hAsync("div", { key: 'f1dd7e86c50078b35661e0514beff610dc2bc8e7', class: "container-progress-bar" }, hAsync("div", { key: '2f630eb29817c68b3246d520d3940611ae78c523', class: "container-icon-info", style: { display: this.fileExtension !== 'pdf' ? 'flex' : 'none' } }, this.type !== 'image' && (hAsync("dropi-icon", { key: 'd74c46e94eb264e7dbd86129e7f4cd57026cfe88', name: "File-text", iconWidth: "24px", iconHeight: "24px", color: "Info-Info-600" })), this.type === 'image' && !this.urlImage && (hAsync("div", { key: '46a73ab30276c5438c84c406a2555635c95a432a', style: { width: '34px', height: '34px', borderRadius: '8px', background: 'var(--Gray-Gray-100)' } })), this.type === 'image' && this.urlImage && (hAsync("img", { key: 'c30d73c158f1bd7f571549dae0f31e36978c3dbb', src: this.urlImage, class: "image-to-view", width: "34", height: "34", alt: "" }))), this.fileExtension === 'pdf' && (hAsync("div", { key: 'e27d245c793b30cd44694bdc8fae1b43fd0eeff8', class: "icon-pdf" }, hAsync("svg", { key: '05fe527f3f84d68ce189b45c428db32fd94aa60a', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, hAsync("g", { key: '45465d04e01b989d6f41b9685024049f11d2fd8a', "clip-path": "url(#clip0_6227_22223)" }, hAsync("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" })), hAsync("defs", { key: '95b5ba8d3edc3cb106e12dae54d8444ced8599a2' }, hAsync("clipPath", { key: '7900ecc7f35430b3311352ea58cb874a39a9ec9e', id: "clip0_6227_22223" }, hAsync("rect", { key: 'e7c63063a879be36c37d6d39fdb295d3abb7667d', width: "20", height: "20", fill: "white" })))))), hAsync("div", { key: '3464f88661ff6fcacdfa125054cfa98a420db74f', class: "container-bar-title" }, hAsync("p", { key: 'f33ab366b12e67fcd4aa7f730a2881c1b41c736a' }, this.textFile), hAsync("progress", { key: '595b22ed789380419cb47babac54f86921df2c33', value: this.progress, max: "100" })), this.progress === 100 && this.isPreview && (hAsync("div", { key: '31a36abbe63cb31969b3516088c2e03db10a8982', class: "view-icon", onClick: () => this.viewFile.emit() }, hAsync("svg", { key: '5947e10eec9c446f886a7013c59d7efededca856', xmlns: "http://www.w3.org/2000/svg", width: "18", height: "14", viewBox: "0 0 18 14", fill: "none" }, hAsync("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" }), hAsync("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 && (hAsync("div", { key: '64cdb0fe5676b7db8c849960526904bdda458e16', class: "container-icon-trash", onClick: () => this.deleteFile.emit() }, hAsync("svg", { key: '31aef5958c89cce4d071be04c95dcb45f2004683', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "21", viewBox: "0 0 20 21", fill: "none" }, hAsync("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" }), hAsync("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" }), hAsync("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" }))))));
+        return (hAsync("div", { key: '7de4db6162b6c7cea620c37bbd9dca5ae48ac26c', class: "container-progress-bar" }, hAsync("div", { key: '17f46bfb02d60643be4fea506aec6b00947a3700', class: "container-icon-info", style: { display: this.fileExtension !== 'pdf' ? 'flex' : 'none' } }, this.type !== 'image' && (hAsync("dropi-icon", { key: '43a34efb7bb1f5915758c9f04f06d354c028c8fd', name: "File-text", iconWidth: "24px", iconHeight: "24px", color: "Info-Info-600" })), this.type === 'image' && !this.urlImage && (hAsync("div", { key: 'a55ea895221f090db621162a265373c4cb71879b', style: { width: '34px', height: '34px', borderRadius: '8px', background: 'var(--Gray-Gray-100)' } })), this.type === 'image' && this.urlImage && (hAsync("img", { key: '85a7a6b045aa4447c03aef43060189eab84743d3', src: this.urlImage, class: "image-to-view", width: "34", height: "34", alt: "" }))), this.fileExtension === 'pdf' && (hAsync("div", { key: '4736fdefc583b44b9d19e397cc6662aa4bb71ef6', class: "icon-pdf" }, hAsync("svg", { key: '9e6e7074855d676bac56d856c94ed37534256193', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, hAsync("g", { key: '91fd32e4f2946a6cf4ddfbb7febbc43977d7a3e4', "clip-path": "url(#clip0_6227_22223)" }, hAsync("path", { key: 'bb19f6eea9ccc07d2c74cca23a20902e228ec876', 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" })), hAsync("defs", { key: '6b761a9e96b13b85dbd2d87b0b1c108450f3c3a0' }, hAsync("clipPath", { key: 'c019250b1926e389eb053c10f9c1c67e0b11e55a', id: "clip0_6227_22223" }, hAsync("rect", { key: 'ced06b676a19158d7e93f41a8c4a47c7cd355dd2', width: "20", height: "20", fill: "white" })))))), hAsync("div", { key: 'c1ddf6e727ce42bf5be1f534f706195fae7fdd3d', class: "container-bar-title" }, hAsync("p", { key: 'a6707326b8351ba93f61d969347db84c9627d597' }, this.textFile), hAsync("progress", { key: 'b118931b77a2f51b3a8813bfc7676147d189d566', value: this.progress, max: "100" })), this.progress === 100 && this.isPreview && (hAsync("div", { key: '648edb23c1a2cba83ea7fda5dd02471b5e4dfb35', class: "view-icon", onClick: () => this.viewFile.emit() }, hAsync("svg", { key: '134717d673466a552625eaf167951f1d6c0942c0', xmlns: "http://www.w3.org/2000/svg", width: "18", height: "14", viewBox: "0 0 18 14", fill: "none" }, hAsync("path", { key: 'a80c09f43697d6fe264fdd6df7e43e004dce9f0c', "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" }), hAsync("path", { key: '12fc2332c38fd8c41319d47744e0f5e0b40c1f6b', "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 && (hAsync("div", { key: '1b93e90541615b5b45cabff2262cfc1668563f82', class: "container-icon-trash", onClick: () => this.deleteFile.emit() }, hAsync("svg", { key: 'b95127b8ee2ba3aeb6aaeb4050f194097a8dfa05', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "21", viewBox: "0 0 20 21", fill: "none" }, hAsync("path", { key: '33534ae79504bfa0c1d1ee3f9c132ba4bc1a3a82', 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" }), hAsync("path", { key: '56a2b6323d63c9d06fcb5044cb4aae51823fb357', 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" }), hAsync("path", { key: '2487b04fb28c8d9f6e4cc2d325b9983e2c8c4cf5', 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": [{
@@ -8411,7 +8416,7 @@ class DropiFileUploadProgressBar {
     }; }
 }
 
-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 dropiIconCss = () => `:host{display:inline-flex;align-items:center;justify-content:center;fill:var(--icon-fill, currentColor);overflow:hidden}svg{fill:inherit;stroke:var(--icon-fill, currentColor);stroke-width:var(--icon-stroke-width, 0);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)}}`;
 
 /**
  * @component dropi-icon
@@ -8429,6 +8434,8 @@ class DropiIcon {
     iconWidth = '20px';
     iconHeight = '20px';
     color = 'currentColor';
+    /** Stroke width for icons that use strokes */
+    strokeWidth = '';
     widthChanged() {
         this.updateHostStyles();
     }
@@ -8438,13 +8445,22 @@ class DropiIcon {
     colorChanged() {
         this.applyColor();
     }
+    strokeWidthChanged() {
+        this.applyStrokeWidth();
+    }
     componentWillLoad() {
         this.applyColor();
+        this.applyStrokeWidth();
         this.updateHostStyles();
     }
     componentDidUpdate() {
         this.updateHostStyles();
     }
+    applyStrokeWidth() {
+        if (this.strokeWidth) {
+            this.el.style.setProperty('--icon-stroke-width', this.strokeWidth);
+        }
+    }
     updateHostStyles() {
         this.el.style.width = this.iconWidth;
         this.el.style.height = this.iconHeight;
@@ -8460,7 +8476,7 @@ class DropiIcon {
         this.el.style.setProperty('--icon-fill', fill);
     }
     render() {
-        return (hAsync("svg", { key: '7185e1861c44aafcec2117f53f61ce18992388ad', width: this.iconWidth, height: this.iconHeight, class: { spin: (this.name ?? '') === 'Spinner' }, "aria-hidden": "true" }, hAsync("use", { key: 'b7913bfbf0bbb6bfa35f848f9fee19e09646004d', href: `/assets/icons/symbol/svg/sprite.css.svg#${this.name ?? ''}` })));
+        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 ?? ''}` })));
     }
     static get watchers() { return {
         "iconWidth": [{
@@ -8471,6 +8487,9 @@ class DropiIcon {
             }],
         "color": [{
                 "colorChanged": 0
+            }],
+        "strokeWidth": [{
+                "strokeWidthChanged": 0
             }]
     }; }
     static get style() { return dropiIconCss(); }
@@ -8481,7 +8500,8 @@ class DropiIcon {
             "name": [1],
             "iconWidth": [1, "icon-width"],
             "iconHeight": [1, "icon-height"],
-            "color": [1]
+            "color": [1],
+            "strokeWidth": [1, "stroke-width"]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
@@ -8520,13 +8540,13 @@ class DropiIlustrationIcon {
         const map = {
             success: 'Check-circle',
             error: 'Cross-circle',
-            info: 'Info',
-            warning: 'Info',
+            info: 'Comment-round_info',
+            warning: 'Comment-round_info',
         };
-        return map[state] || 'Info';
+        return map[state] || 'Comment-round_info';
     }
     render() {
-        return (hAsync("div", { key: '2f956eddb214de168aae134374512600867e77a8', class: "dropi-ilustration" }, this.type === 'dropi' && (hAsync("figure", { key: '3d05624542d51f64cb6402fb958f039bc943afb7', class: "dropi-ilustration__image" }, hAsync("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' && (hAsync("figure", { key: 'f66957ddbba9506d041ab1b2e8877872b25bdbf3', class: `dropi-ilustration__image-mb ${this.state}` }, ['success', 'error', 'info', 'warning'].includes(this.state) && (hAsync("dropi-icon", { key: '4f65eb91eb99c07abefc6089c6935b1fb573978b', name: this.getIconName(this.state), iconWidth: "24px", iconHeight: "24px", color: "Neutral-White" })))), this.type === 'insignia' && (hAsync("figure", { key: 'fd0db6cbdc7daf018446f03cf8dd13dbe218733a', class: this.tagProduct ? 'dropi-ilustration-insignia-tag' : 'dropi-ilustration-insignia' }, hAsync("img", { key: '79cd16693eeb848db9c027c8d2e96c6760a9e2ac', src: this.insigniaIcons[this.stateInsignia], alt: this.stateInsignia }), this.tagProduct && (hAsync("p", { key: '58ec25aa47c8756ec11a0fba679194a25dfaad0c', class: `tag tag--${this.stateInsignia}` }, hAsync("span", { key: '8354a3de165526351bc53021218b1fb2a0a4d064', class: "Caption-S" }, this.stateInsignia.charAt(0).toUpperCase() + this.stateInsignia.slice(1))))))));
+        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))))))));
     }
     static get style() { return dropiIlustrationIconCss(); }
     static get cmpMeta() { return {
@@ -8553,7 +8573,7 @@ const dropiImageMiniatureCss = () => `:host{display:block}*,*::before,*::after{b
 class DropiImageMiniature {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.dropiImageClick = createEvent(this, "dropiImageClick", 7);
+        this.dropiImageClick = createEvent(this, "dropiImageClick");
     }
     /** Optional label above the grid */
     label = '';
@@ -8582,7 +8602,7 @@ class DropiImageMiniature {
     }
     render() {
         const imgs = this.parsedImages;
-        return (hAsync("div", { key: '111d908339df1d3fba74cb8737f3c72e2254e2f0', class: "miniature" }, this.label && hAsync("span", { key: '007ecc8149b6778eac7dd80a978a088f686001eb', class: "miniature__label" }, this.label), hAsync("div", { key: '95c18d71f5c753bd2610915b62632aca7fbd4d16', class: "miniature__grid" }, imgs.map((src, i) => (hAsync("div", { class: "miniature__item", style: { width: this.width, height: this.height }, key: i, onClick: () => this.dropiImageClick.emit({ images: imgs, index: i }) }, hAsync("img", { src: src, alt: `imagen ${i + 1}`, loading: "lazy", onError: (e) => this.handleError(e) }), hAsync("div", { class: "miniature__zoom" }, hAsync("dropi-icon", { name: "Search", iconWidth: "16px", iconHeight: "16px", color: "Neutral-White" }))))))));
+        return (hAsync("div", { key: 'aefd44eab41f586a8a5bf4bbc1675b6c9cc67124', class: "miniature" }, this.label && hAsync("span", { key: 'f61ea53ad1dfa354a93781877e0f02c120e0f445', class: "miniature__label" }, this.label), hAsync("div", { key: 'fbde49689bed4e93c63cab97e787e6d877a7fcb2', class: "miniature__grid" }, imgs.map((src, i) => (hAsync("div", { class: "miniature__item", style: { width: this.width, height: this.height }, key: i, onClick: () => this.dropiImageClick.emit({ images: imgs, index: i }) }, hAsync("img", { src: src, alt: `imagen ${i + 1}`, loading: "lazy", onError: (e) => this.handleError(e) }), hAsync("div", { class: "miniature__zoom" }, hAsync("dropi-icon", { name: "Search", iconWidth: "16px", iconHeight: "16px", color: "Neutral-White" }))))))));
     }
     static get style() { return dropiImageMiniatureCss(); }
     static get cmpMeta() { return {
@@ -8609,7 +8629,7 @@ const dropiImageOverlayCss = () => `:host{display:block}.overlay{position:fixed;
 class DropiImageOverlay {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.dropiClose = createEvent(this, "dropiClose", 7);
+        this.dropiClose = createEvent(this, "dropiClose");
     }
     /** Whether the overlay is visible */
     visible = false;
@@ -8696,10 +8716,10 @@ const dropiInputCss = () => `:host{display:block;width:100%}*,*::before,*::after
 class DropiInput {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.onInput = createEvent(this, "onInput", 7);
-        this.onChange = createEvent(this, "onChange", 7);
-        this.onFocus = createEvent(this, "onFocus", 7);
-        this.onBlur = createEvent(this, "onBlur", 7);
+        this.dropiInput = createEvent(this, "dropiInput");
+        this.dropiChange = createEvent(this, "dropiChange");
+        this.dropiFocus = createEvent(this, "dropiFocus");
+        this.dropiBlur = createEvent(this, "dropiBlur");
         if (hostRef.$hostElement$["s-ei"]) {
             this.internals = hostRef.$hostElement$["s-ei"];
         }
@@ -8774,13 +8794,13 @@ class DropiInput {
     touched = false;
     // ── Events ──────────────────────────────────────────────────
     /** Emitted on every keystroke with the current value */
-    onInput;
+    dropiInput;
     /** Emitted on blur with the final value */
-    onChange;
+    dropiChange;
     /** Emitted on focus */
-    onFocus;
+    dropiFocus;
     /** Emitted on blur */
-    onBlur;
+    dropiBlur;
     inputPropertiesChanged(val) {
         if (!val)
             return;
@@ -8843,7 +8863,7 @@ class DropiInput {
             val = this.formatThousands(val, this.isMoneyInput);
         this.value = val;
         this.internals.setFormValue(val);
-        this.onInput.emit(val);
+        this.dropiInput.emit(val);
     }
     handleKeyDown(e) {
         if ((this.isNumericInput || this.isMoneyInput || this.isThousandSeparator) && !this.isAllowedNumberKey(e)) {
@@ -8854,12 +8874,12 @@ class DropiInput {
         }
     }
     handleFocus() {
-        this.onFocus.emit();
+        this.dropiFocus.emit();
     }
     handleBlur() {
         this.touched = true;
-        this.onChange.emit(this.value);
-        this.onBlur.emit();
+        this.dropiChange.emit(this.value);
+        this.dropiBlur.emit();
     }
     togglePassword() {
         if (this.disabled)
@@ -8924,14 +8944,14 @@ class DropiInput {
     render() {
         const showObligatoryAsterisk = this.required && this.showObligatoryAsterisk && !this.disabled;
         const showIconInline = !!this.icon;
-        return (hAsync("div", { key: 'a6c762070ca5c0ffb5028f1899d4e026721664ee', class: { 'fixed-label-container': this.fixedLabel } }, this.fixedLabel && (hAsync("div", { key: 'fb223818b568114400aa456e595623c882b8bcd2', class: "input-label Body-S-Regular" }, this.label, showObligatoryAsterisk && hAsync("span", { key: '04c522a21ba3e0ec9710d267feb866d79dae7cbb', class: "asterisk" }, " *"))), hAsync("div", { key: '1672e9954f11ad61e6f224953f97aa7036e5b212', class: "form-group" }, hAsync("div", { key: 'd9bfc41486fe3f93d5144f55bf89a4ae1a916f5e', class: { 'input-container': true, 'input-container--has-icon': showIconInline } }, showIconInline && (hAsync("dropi-icon", { key: 'e7d21fd9b115925ed2bc584a6f5c614ea3761922', class: "icon-input", name: this.icon, color: this.iconColor, iconWidth: "20px", iconHeight: "20px", style: { width: '20px', height: '20px' } })), this.passwordInput && (hAsync("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() })), hAsync("input", { key: 'ef70c2be1606334593269be63234295bdbdf86b1', id: this.resolvedId, class: {
+        return (hAsync("div", { key: '36a33fdb7048e3ba43dae3c2d3d71c9f69643cac', class: { 'fixed-label-container': this.fixedLabel } }, this.fixedLabel && (hAsync("div", { key: '699adfe37d662ed328cd13fdad428e857b70f01d', class: "input-label Body-S-Regular" }, this.label, showObligatoryAsterisk && hAsync("span", { key: 'b2d6f4757cdb50eacfb7879e4a878e30adf5235d', class: "asterisk" }, " *"))), hAsync("div", { key: 'dc080fc5d0ab12f0eadf7e1bb30cae5539f76640', class: "form-group" }, hAsync("div", { key: 'cf228d5e4c7e0a04735d38ba239a2b989f5247ca', class: { 'input-container': true, 'input-container--has-icon': showIconInline } }, showIconInline && (hAsync("dropi-icon", { key: '049e396ea1f2f11625de73bc074c0e0aecea96ab', class: "icon-input", name: this.icon, color: this.iconColor, iconWidth: "20px", iconHeight: "20px", style: { width: '20px', height: '20px' } })), this.passwordInput && (hAsync("dropi-icon", { key: '544316f6e7a284acf65d3a2b7fb3a2654c80d95b', 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: '6d23ac748d0768d6eea0eb347bde7b13d8f20321', 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: 'c0d079355d299b26dc2e8bde4347fd30aa791e21', class: "Body-S-Regular label-bottom", htmlFor: this.resolvedId }, this.label, showObligatoryAsterisk && hAsync("span", { key: 'fca9bc2745e0ccb7ba3b10c4e3e6b5d8bbb6f645', class: "asterisk" }, " *"))), this.showHelper && (hAsync("div", { key: 'f864cc07f591d0948cb06d6dde1e910bab10187a', class: "form-control-helper" }, this.isInvalid && hAsync("dropi-icon", { key: 'be2cf0d632fd8245e817d4023b4e4f060bc80d24', name: "Warning-circle", iconWidth: "12px", iconHeight: "12px", color: "Error-Error-500" }), hAsync("span", { key: '3768369a635e8ac03db24b0ba7fa7a214cc71577', 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 && (hAsync("label", { key: '8f26c9430cbc1c6b55286d62c2a350724dd0101f', class: "Body-S-Regular label-bottom", htmlFor: this.resolvedId }, this.label, showObligatoryAsterisk && hAsync("span", { key: '95d953c160cf22457b0e1d6265b8137a24d4092b', class: "asterisk" }, " *"))), this.showHelper && (hAsync("div", { key: 'ad3d4b5230fd32e97c661c64deadf97830caa550', class: "form-control-helper" }, this.isInvalid && hAsync("dropi-icon", { key: '7c28120d1cc46ccd288948b1d2d9e5cc24521af7', name: "Warning-circle", iconWidth: "12px", iconHeight: "12px", color: "Error-Error-500" }), hAsync("span", { key: '40eb1eedd2a204975aed61fcd24ccadd26d8aaef', class: {
                 'disabled-helper': this.disabled,
                 'invalid-color': this.isInvalid,
             } }, this.textHelper)))))));
@@ -8999,13 +9019,13 @@ const dropiLanguagesSelectorCss = () => `:host{display:inline-block;position:rel
 class DropiLanguagesSelector {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.languageChange = createEvent(this, "languageChange", 7);
+        this.dropiLanguageChange = createEvent(this, "dropiLanguageChange");
     }
     /** Language options (array or JSON string) */
     languages = [];
     /** Currently selected language (LanguageOption or JSON string) */
     selectedLang = null;
-    languageChange;
+    dropiLanguageChange;
     isOpen = false;
     parsedLanguages = [];
     currentLang = null;
@@ -9032,7 +9052,7 @@ class DropiLanguagesSelector {
     select(lang) {
         this.currentLang = lang;
         this.isOpen = false;
-        this.languageChange.emit(lang);
+        this.dropiLanguageChange.emit(lang);
     }
     render() {
         if (!this.currentLang)
@@ -9095,7 +9115,7 @@ class DropiLogo {
         e.target.src = FALLBACK_SVG;
     }
     render() {
-        return (hAsync("figure", { key: '479af3da2dc04c7d6e79b99494fce0fb5419af4d', class: { 'dropi-logo': true, [`dropi-logo--${this.size}`]: true } }, hAsync("img", { key: '6b78e7004f4b1dd782e4c17dae7b264fff483875', src: this.urlLogo || FALLBACK_SVG, alt: "Dropi logo", onError: (e) => this.handleError(e) })));
+        return (hAsync("figure", { key: '2a5ed49bd2ac8592db5b06256ff4e911e26ee6fd', class: { 'dropi-logo': true, [`dropi-logo--${this.size}`]: true } }, hAsync("img", { key: 'f0f63e2e5ceb30c24eac3f7f5a3446858b632f90', src: this.urlLogo || FALLBACK_SVG, alt: "Dropi logo", onError: (e) => this.handleError(e) })));
     }
     static get style() { return dropiLogoCss(); }
     static get cmpMeta() { return {
@@ -9156,8 +9176,8 @@ const dropiMediaPlayerCss = () => `:host{display:block;width:100%}*,*::before,*:
 class DropiMediaPlayer {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.dropiPlay = createEvent(this, "dropiPlay", 7);
-        this.dropiEnded = createEvent(this, "dropiEnded", 7);
+        this.dropiPlay = createEvent(this, "dropiPlay");
+        this.dropiEnded = createEvent(this, "dropiEnded");
     }
     get el() { return getElement(this); }
     src = '';
@@ -9366,7 +9386,7 @@ class DropiMediaPlayer {
     }; }
 }
 
-const dropiModalCss = () => `:host{display:contents}*,*::before,*::after{box-sizing:border-box}.modal-root{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:0;transition:opacity 0.18s ease;z-index:1100}.modal-root--open{opacity:1;pointer-events:auto}.modal-root--closing{opacity:1;pointer-events:none}.modal-mask{position:absolute;inset:0;background:rgba(6,11,16,0.66);pointer-events:auto;opacity:0;transition:opacity 0.18s ease}.modal-root--open .modal-mask{opacity:1}.modal-root--closing .modal-mask{opacity:0}.modal-panel{position:relative;pointer-events:auto;display:flex;flex-direction:column;border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #ffffff);box-shadow:0 0 60px rgba(0,0,0,0.06);overflow:hidden;padding:var(--Size-6, 32px);gap:var(--Size-5, 24px);max-height:calc(100vh - 60px);opacity:0;transform:translateY(16px) scale(0.92);transition:opacity 0.18s ease, transform 0.18s ease}.modal-root--open .modal-panel{opacity:1;transform:none}.modal-root--closing .modal-panel{opacity:0;transform:translateY(-12px) scale(1.06)}.modal-header{display:flex;align-items:center;gap:4px}.modal-title{color:var(--Gray-Gray-700,#32394d);font-size:var(--Size-5, 24px);font-weight:var(--font-weight-bold);flex:1;text-align:left}.modal-close{margin-left:auto;border:0;background:transparent;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:var(--font-size-xxl);line-height:1;color:var(--Gray-Gray-400)}.modal-close:hover{opacity:0.7}.modal-content{padding-right:8px;overflow:auto;flex:1;display:flex;flex-direction:column;scrollbar-width:thin;scrollbar-color:var(--Gray-Gray-300,#a3abbf) var(--Gray-Gray-50,#f7f8fa)}.modal-content::-webkit-scrollbar{width:4px}.modal-content::-webkit-scrollbar-track{background:var(--Gray-Gray-50,#f7f8fa);border-radius:16px}.modal-content::-webkit-scrollbar-thumb{background:var(--Gray-Gray-300,#a3abbf);border-radius:16px}.modal-footer{display:flex;justify-content:flex-end;align-items:flex-start;gap:var(--Size-1, 4px);width:100%}.modal-footer:empty{display:none}::slotted(.button-container){display:grid;grid-template-columns:1fr 1fr;gap:var(--Size-4, 16px);min-width:470px;width:100%}::slotted(.button-container)>*{width:100%}::slotted(.button-container) dropi-button{width:100%}.modal-panel.size-m .modal-footer,.modal-panel.size-s .modal-footer{justify-content:center}.modal-panel.size-m .modal-footer ::slotted(.button-container),.modal-panel.size-s .modal-footer ::slotted(.button-container){min-width:unset !important;width:100%}.modal-panel.size-drawer-s .modal-footer ::slotted(.button-container){min-width:unset;display:flex;flex-direction:column-reverse;gap:var(--Size-4, 16px)}.modal-panel.size-full{width:100%;height:100vh;max-height:100vh;border-radius:0}.modal-panel.size-xxl{width:calc(100% - 60px);max-width:1520px;height:calc(100vh - 120px);max-height:900px}.modal-panel.size-l{width:1137px;max-width:1137px;max-height:754px}.modal-panel.size-m{max-width:550px;width:550px}.modal-panel.size-s{width:454px}.modal-root--right{align-items:stretch;justify-content:flex-end}.modal-root--right .modal-panel{height:100vh;max-height:100vh;border-radius:0;gap:0;opacity:1;transform:translateX(100%);transition:transform 0.32s cubic-bezier(0.4,0,0.2,1)}.modal-root--open.modal-root--right .modal-panel{transform:translateX(0)}.modal-root--closing.modal-root--right .modal-panel{transform:translateX(100%)}.modal-root--right .modal-panel.size-drawer-s{width:351px;padding:20px;box-shadow:0 8px 40px rgba(0,0,0,0.16)}.modal-root--right .modal-panel.size-drawer-m{width:550px;box-shadow:0 8px 40px rgba(0,0,0,0.16)}.modal-root--right .modal-panel.size-drawer-l{width:1137px;box-shadow:0 8px 40px rgba(0,0,0,0.16)}.modal-root--right .modal-panel.size-drawer-xxl{width:1214px;box-shadow:0 8px 40px rgba(0,0,0,0.16)}.modal-root--right .modal-panel.size-sidebar-half{width:50vw;min-width:600px;box-shadow:0 8px 40px rgba(0,0,0,0.16)}@media (max-width: 768px){.modal-root--right .modal-panel.size-drawer-s,.modal-root--right .modal-panel.size-drawer-m,.modal-root--right .modal-panel.size-drawer-l,.modal-root--right .modal-panel.size-drawer-xxl,.modal-root--right .modal-panel.size-sidebar-half{width:100vw;min-width:unset}}.modal-root--left{align-items:stretch;justify-content:flex-start}.modal-root--left .modal-panel{height:100vh;max-height:100vh;border-radius:0;gap:0;opacity:1;transform:translateX(-100%);transition:transform 0.32s cubic-bezier(0.4,0,0.2,1)}.modal-root--open.modal-root--left .modal-panel{transform:translateX(0)}.modal-root--closing.modal-root--left .modal-panel{transform:translateX(-100%)}.modal-root--top{align-items:flex-start}.modal-root--bottom{align-items:flex-end}@media (max-width: 599px){.modal-panel{padding:20px;width:100% !important}.modal-panel:not(.size-s){border-radius:0 !important;height:100% !important;max-height:unset !important}.modal-root--right .modal-panel{width:100vw !important;min-width:unset !important}.modal-footer{justify-content:center}.modal-footer ::slotted(.button-container){width:100%;min-width:unset !important;display:flex;flex-direction:column-reverse;gap:var(--Size-4, 16px)}}@media (prefers-reduced-motion: reduce){.modal-root,.modal-mask,.modal-panel{transition:none !important}}`;
+const dropiModalCss = () => `:host{display:contents}*,*::before,*::after{box-sizing:border-box}.modal-root{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:0;transition:opacity 0.18s ease;z-index:9999;visibility:hidden}.modal-root--open{opacity:1;pointer-events:auto;visibility:visible}.modal-root--closing{opacity:1;pointer-events:none;visibility:visible}.modal-mask{position:absolute;inset:0;background:rgba(6,11,16,0.66);pointer-events:auto;opacity:0;transition:opacity 0.18s ease}.modal-root--open .modal-mask{opacity:1}.modal-root--closing .modal-mask{opacity:0}.modal-panel{position:relative;pointer-events:auto;display:flex;flex-direction:column;border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #ffffff);box-shadow:0 0 60px rgba(0,0,0,0.06);overflow:hidden;padding:var(--Size-6, 32px);gap:var(--Size-5, 24px);max-height:calc(100vh - 60px);opacity:0;transform:translateY(16px) scale(0.92);transition:opacity 0.18s ease, transform 0.18s ease}.modal-root--open .modal-panel{opacity:1;transform:none}.modal-root--closing .modal-panel{opacity:0;transform:translateY(-12px) scale(1.06)}.modal-header{display:flex;align-items:center;gap:4px}.modal-title{color:var(--Gray-Gray-700,#32394d);font-size:var(--Size-5, 24px);font-weight:var(--font-weight-bold);flex:1;text-align:left}.modal-close{margin-left:auto;border:0;background:transparent;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:var(--font-size-xxl);line-height:1;color:var(--Gray-Gray-400)}.modal-close:hover{opacity:0.7}.modal-content{padding-right:8px;overflow:auto;flex:1;display:flex;flex-direction:column;scrollbar-width:thin;scrollbar-color:var(--Gray-Gray-300,#a3abbf) var(--Gray-Gray-50,#f7f8fa)}.modal-content::-webkit-scrollbar{width:4px}.modal-content::-webkit-scrollbar-track{background:var(--Gray-Gray-50,#f7f8fa);border-radius:16px}.modal-content::-webkit-scrollbar-thumb{background:var(--Gray-Gray-300,#a3abbf);border-radius:16px}.modal-footer{display:flex;justify-content:flex-end;align-items:flex-start;gap:var(--Size-1, 4px);width:100%;margin-top:auto;flex-shrink:0}.modal-footer:empty{display:none}::slotted(.button-container){display:grid;grid-template-columns:1fr 1fr;gap:var(--Size-4, 16px);min-width:470px;width:100%}::slotted(.button-container)>*{width:100%}::slotted(.button-container) dropi-button{width:100%}.modal-panel.size-m .modal-footer,.modal-panel.size-s .modal-footer,.modal-panel.size-xs .modal-footer{justify-content:flex-end}.modal-panel.size-m .modal-footer ::slotted(.button-container),.modal-panel.size-s .modal-footer ::slotted(.button-container),.modal-panel.size-xs .modal-footer ::slotted(.button-container){min-width:unset !important;width:100%}.modal-panel.size-drawer-s .modal-footer ::slotted(.button-container){min-width:unset;display:flex;flex-direction:column-reverse;gap:var(--Size-4, 16px)}.modal-panel.size-full{width:100%;height:100vh;max-height:100vh;border-radius:0}.modal-panel.size-xxl{width:calc(100% - 60px);max-width:1520px;height:calc(100vh - 120px);max-height:900px}.modal-panel.size-l{width:1137px;max-width:1137px;max-height:754px}.modal-panel.size-m{max-width:550px;width:550px}.modal-panel.size-s{width:454px}.modal-panel.size-xs{width:320px;padding:24px;gap:16px}.modal-root--right{align-items:stretch;justify-content:flex-end}.modal-root--right .modal-panel{height:100vh;max-height:100vh;border-radius:0;gap:0;opacity:1;transform:translateX(100%);transition:transform 0.32s cubic-bezier(0.4,0,0.2,1)}.modal-root--open.modal-root--right .modal-panel{transform:translateX(0)}.modal-root--closing.modal-root--right .modal-panel{transform:translateX(100%)}.modal-root--right .modal-panel.size-drawer-s{width:351px;padding:20px;box-shadow:0 8px 40px rgba(0,0,0,0.16)}.modal-root--right .modal-panel.size-drawer-m{width:550px;box-shadow:0 8px 40px rgba(0,0,0,0.16)}.modal-root--right .modal-panel.size-drawer-l{width:1137px;box-shadow:0 8px 40px rgba(0,0,0,0.16)}.modal-root--right .modal-panel.size-drawer-xxl{width:1214px;box-shadow:0 8px 40px rgba(0,0,0,0.16)}.modal-root--right .modal-panel.size-sidebar-half{width:50vw;min-width:600px;box-shadow:0 8px 40px rgba(0,0,0,0.16)}@media (max-width: 768px){.modal-root--right .modal-panel.size-drawer-s,.modal-root--right .modal-panel.size-drawer-m,.modal-root--right .modal-panel.size-drawer-l,.modal-root--right .modal-panel.size-drawer-xxl,.modal-root--right .modal-panel.size-sidebar-half{width:100vw;min-width:unset}}.modal-root--left{align-items:stretch;justify-content:flex-start}.modal-root--left .modal-panel{height:100vh;max-height:100vh;border-radius:0;gap:0;opacity:1;transform:translateX(-100%);transition:transform 0.32s cubic-bezier(0.4,0,0.2,1)}.modal-root--open.modal-root--left .modal-panel{transform:translateX(0)}.modal-root--closing.modal-root--left .modal-panel{transform:translateX(-100%)}.modal-root--top{align-items:flex-start}.modal-root--bottom{align-items:flex-end}@media (max-width: 599px){.modal-panel{padding:20px;width:100% !important}.modal-panel:not(.size-s){border-radius:0 !important;height:100% !important;max-height:unset !important}.modal-root--right .modal-panel{width:100vw !important;min-width:unset !important}.modal-footer{justify-content:center}.modal-footer ::slotted(.button-container){width:100%;min-width:unset !important;display:flex;flex-direction:column-reverse;gap:var(--Size-4, 16px)}}@media (prefers-reduced-motion: reduce){.modal-root,.modal-mask,.modal-panel{transition:none !important}}`;
 
 /**
  * @component dropi-modal
@@ -9376,9 +9396,9 @@ const dropiModalCss = () => `:host{display:contents}*,*::before,*::after{box-siz
 class DropiModal {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.onShow = createEvent(this, "onShow", 5);
-        this.onHide = createEvent(this, "onHide", 5);
-        this.visibleChange = createEvent(this, "visibleChange", 5);
+        this.dropiShow = createEvent(this, "dropiShow");
+        this.dropiHide = createEvent(this, "dropiHide");
+        this.dropiVisibleChange = createEvent(this, "dropiVisibleChange");
     }
     visible = false;
     header = null;
@@ -9408,25 +9428,25 @@ class DropiModal {
     isDraggable = false;
     /** No-op — kept for API parity with Angular (matches Angular `resizable`) */
     resizable = false;
-    onShow;
-    onHide;
-    visibleChange;
+    dropiShow;
+    dropiHide;
+    dropiVisibleChange;
     isOpen = false;
     isClosing = false;
     mounted = false;
     closeTimer = null;
     keyHandler = null;
-    visibleChanged(val, oldVal) {
-        const isVisible = val === true || String(val) === 'true';
-        const wasVisible = oldVal === true || String(oldVal) === 'true';
-        if (isVisible === wasVisible)
-            return;
-        console.log('[DropiModal] visibleChanged:', isVisible);
-        isVisible ? this.openModal() : (this.mounted && this.startClose());
+    canDismiss = false;
+    visibleChanged(val) {
+        if (val) {
+            this.openModal();
+        }
+        else {
+            this.startClose();
+        }
     }
     componentDidLoad() {
-        const isVisible = this.visible === true || String(this.visible) === 'true';
-        if (isVisible)
+        if (this.visible)
             this.openModal();
     }
     disconnectedCallback() {
@@ -9437,32 +9457,37 @@ class DropiModal {
             document.body.classList.remove('dropi-modal-open');
         }
     }
-    async hide() {
-        this.visible = false;
-        this.visibleChange.emit(false);
-        this.startClose();
+    async dismiss() {
+        if (this.visible) {
+            this.visible = false;
+            this.dropiVisibleChange.emit(false);
+        }
+        else {
+            this.startClose();
+        }
     }
-    async show() {
+    async openModalExternally() {
         this.visible = true;
-        this.visibleChange.emit(true);
-        this.openModal();
+        this.dropiVisibleChange.emit(true);
     }
     openModal() {
         if (this.closeTimer) {
             clearTimeout(this.closeTimer);
             this.closeTimer = null;
         }
-        this.mounted = true;
+        // Safety: ensure it's not already open or in a closing state
         this.isClosing = false;
-        this.isOpen = false;
+        this.mounted = true;
         requestAnimationFrame(() => requestAnimationFrame(() => {
             this.isOpen = true;
-            this.onShow.emit();
+            this.dropiShow.emit();
         }));
         this.addKeyHandler();
+        this.canDismiss = false;
+        setTimeout(() => { this.canDismiss = true; }, 300);
     }
     startClose() {
-        if (this.isClosing)
+        if (this.isClosing || !this.mounted)
             return;
         this.isClosing = true;
         this.isOpen = false;
@@ -9473,15 +9498,15 @@ class DropiModal {
             this.mounted = false;
             this.isClosing = false;
             this.closeTimer = null;
-            this.onHide.emit();
+            this.dropiHide.emit();
         }, 200);
     }
     addKeyHandler() {
         if (!this.closeOnEscape)
             return;
         this.keyHandler = (e) => {
-            if (e.key === 'Escape' && this.visible && this.dismissable)
-                this.hide();
+            if (e.key === 'Escape' && this.visible && this.dismissable && this.canDismiss)
+                this.dismiss();
         };
         document.addEventListener('keydown', this.keyHandler);
     }
@@ -9492,7 +9517,7 @@ class DropiModal {
         }
     }
     render() {
-        return (hAsync("div", { key: '1aee093f108c54540005a6cb2f48bef700f05d63', class: `modal-root modal-root--${this.position}${this.isOpen ? ' modal-root--open' : ''}${this.isClosing ? ' modal-root--closing' : ''}`, style: { display: this.mounted || this.isClosing ? 'flex' : 'none' } }, (this.modal ?? true) && hAsync("div", { key: '06ebd29da0c7dc699e7c16769476e310336ab149', class: "modal-mask", onClick: () => this.dismissable && this.hide() }), hAsync("div", { key: '87cb9bbd4c1c6c27a6a7d09f561ea781c1571803', class: `modal-panel size-${this.size || 'm'}`, role: "dialog", "aria-modal": "true" }, this.showHeader && (hAsync("div", { key: '86f22ef920b7a7437825f4c5f9ccff23b591c499', class: "modal-header" }, this.header && hAsync("span", { key: '2ae7c9b879ee6c025b6b42977bad643ff4d28370', class: "modal-title" }, this.header), hAsync("slot", { key: '85a0a54691ca191719202c8fea6b30ffff30aacc', name: "header" }), this.showCloseIcon && (hAsync("button", { key: 'dc1f570830d22535a39c9e9fbf0bccdb8e4bfcf7', class: "modal-close", onClick: () => this.hide(), "aria-label": "Cerrar" }, "\u00D7")))), hAsync("div", { key: 'ceca42f33ff7d4762c79b2d133e23bc7cedb3cb3', class: "modal-content" }, hAsync("slot", { key: '14a82735c521c45deda61e8a69ae8673ad754b3d' })), this.showFooter && hAsync("div", { key: 'e71a5393c19de696247502abd09d26a38cd1b979', class: "modal-footer" }, hAsync("slot", { key: '1364eed1b66e82d321d06d13d9d34615c7634ce0', name: "footer" })))));
+        return (hAsync("div", { key: '95847ba48baae69b93888cb59ecaa9d2130ae17a', class: `modal-root modal-root--${this.position}${this.isOpen ? ' modal-root--open' : ''}${this.isClosing ? ' modal-root--closing' : ''}` }, (this.modal ?? true) && hAsync("div", { key: '78acc3c2f1b7327b6fc1770a9536cdf0c2c57f99', class: "modal-mask", onClick: () => this.canDismiss && this.dismissable && this.dismiss() }), hAsync("div", { key: '63906a7ed0432879c3256a659ddd9773099244bc', class: `modal-panel size-${this.size || 'm'}`, role: "dialog", "aria-modal": "true", style: this.maxWidth ? { maxWidth: this.maxWidth, width: '100%' } : {} }, this.showHeader && (hAsync("div", { key: '7d960505ea8fd7804ac67ceb88b9195e6ad1998d', class: "modal-header" }, this.header && hAsync("span", { key: 'fed4b8a2e6c89fca39a8766d0e843db7c184be59', class: "modal-title" }, this.header), hAsync("slot", { key: 'b2c6c5cc1f019229c3ad5028e42b1fd887494abd', name: "header" }), this.showCloseIcon && (hAsync("button", { key: '24fc8ff422ea5c7e6a8c0737acbb29c1d7467f40', class: "modal-close", onClick: () => this.dismiss(), "aria-label": "Cerrar" }, "\u00D7")))), hAsync("div", { key: '472a7dfe704b0b8d129b00bc88204602ead66403', class: "modal-content" }, hAsync("slot", { key: '6b3e6fdefca0c6510d4fdbbccce53a5efa52e4c8' })), this.showFooter && hAsync("div", { key: '5bd3c15d4d1fb2ebffad79c9314d03d1d72dae29', class: "modal-footer" }, hAsync("slot", { key: '1980d019b142e2a00f55a3a755e9e08d0393c5e5', name: "footer" })))));
     }
     static get watchers() { return {
         "visible": [{
@@ -9504,7 +9529,7 @@ class DropiModal {
         "$flags$": 777,
         "$tagName$": "dropi-modal",
         "$members$": {
-            "visible": [1544],
+            "visible": [1540],
             "header": [1],
             "showCloseIcon": [4, "show-close-icon"],
             "dismissable": [4],
@@ -9529,8 +9554,8 @@ class DropiModal {
             "isOpen": [32],
             "isClosing": [32],
             "mounted": [32],
-            "hide": [64],
-            "show": [64]
+            "dismiss": [64],
+            "openModalExternally": [64]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
@@ -9547,10 +9572,10 @@ const dropiNavbarCss = () => `:host{display:block;width:100%}*,*::before,*::afte
 class DropiNavbar {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.clickLoadItem = createEvent(this, "clickLoadItem", 7);
-        this.dropiNotificationsClick = createEvent(this, "dropiNotificationsClick", 7);
-        this.dropiUserClick = createEvent(this, "dropiUserClick", 7);
-        this.dropiMenuToggle = createEvent(this, "dropiMenuToggle", 7);
+        this.clickLoadItem = createEvent(this, "clickLoadItem");
+        this.dropiNotificationsClick = createEvent(this, "dropiNotificationsClick");
+        this.dropiUserClick = createEvent(this, "dropiUserClick");
+        this.dropiMenuToggle = createEvent(this, "dropiMenuToggle");
     }
     /** Logo URL */
     logoUrl = '';
@@ -9584,9 +9609,9 @@ class DropiNavbar {
     }
     render() {
         const items = this.parsedData;
-        return (hAsync("nav", { key: '15c337396dbe445ac7a13d7e0f2d99f88b4de439', class: "navbar" }, hAsync("div", { key: '922a217dfe53f3f34dd6746033996bcd71dadfb2', class: "navbar__left" }, this.showMenuToggle && (hAsync("button", { key: 'db80ad1fd6f47807196c81ae60bf9cea8bb16e77', class: "navbar__menu-btn", onClick: () => this.dropiMenuToggle.emit(), "aria-label": "Men\u00FA" }, hAsync("dropi-icon", { key: 'eca18144260cb6471a19f78f7ce75254ba5a138e', name: "Menu", iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-700" }))), this.logoUrl && (hAsync("img", { key: '374ea8553605f289c413882c757eda70054ba71d', class: "navbar__logo", src: this.logoUrl, alt: this.logoAlt })), this.title && hAsync("span", { key: '8e2abceb591c0de10ca99d2090fea7a0da792a7b', class: "navbar__title" }, this.title)), items.length > 0 && (hAsync("ul", { key: 'fd26fc64ea3325ddc439a802ab56e69b329020dd', class: "navbar__items" }, items.map(item => (hAsync("li", null, hAsync("button", { class: { 'navbar__item': true, 'navbar__item--active': item.id === this.activeId }, onClick: () => this.clickLoadItem.emit(item), type: "button" }, item.icon && hAsync("dropi-icon", { name: item.icon, iconWidth: "16px", iconHeight: "16px", color: item.id === this.activeId ? 'Primary-Primary-500' : 'Gray-Gray-600' }), hAsync("span", null, item.name?.value || item.label), item.badge != null && String(item.badge) !== '0' && (hAsync("span", { class: "navbar__badge" }, item.badge)))))))), hAsync("div", { key: '51a6532caac773ea7236e95b0aa5ee9ee052db4a', class: "navbar__right" }, hAsync("button", { key: '309b47a8fa074e7d47632a95490c5ba0d2950745', class: "navbar__icon-btn", onClick: () => this.dropiNotificationsClick.emit(), "aria-label": "Notificaciones" }, hAsync("dropi-icon", { key: '2a970ae36fdd4e42d9fbab5d8ebb61a1d14d54c8', name: "Bell", iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-600" }), this.notifications > 0 && (hAsync("span", { key: '67412b6d3c7689f78cca15e91a1e8e3ee88152a2', class: "navbar__notif-badge" }, this.notifications > 99 ? '99+' : this.notifications))), hAsync("button", { key: '38cc70fdc1c204b06b62c54a23f4b8c76647fd6b', class: "navbar__user-btn", onClick: () => this.dropiUserClick.emit(), type: "button" }, this.userAvatar
+        return (hAsync("nav", { key: '83ec218a7545739c65d8f1f61197b429b0e7d407', class: "navbar" }, hAsync("div", { key: 'e40038630c33a280f3c231b3dd26643f1c853ea3', class: "navbar__left" }, this.showMenuToggle && (hAsync("button", { key: '0ecbae684b9324c48cd01a6081fd1951b3ba7cf8', class: "navbar__menu-btn", onClick: () => this.dropiMenuToggle.emit(), "aria-label": "Men\u00FA" }, hAsync("dropi-icon", { key: '9edea72a4508a984be2e6785f3f0fa6abe0625c4', name: "Menu", iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-700" }))), this.logoUrl && (hAsync("img", { key: 'b8cd9896736d505dad05b8df5f10928d40f250dd', class: "navbar__logo", src: this.logoUrl, alt: this.logoAlt })), this.title && hAsync("span", { key: '4e5dae851fe28f1bc913d7a5d4d42a2413342635', class: "navbar__title" }, this.title)), items.length > 0 && (hAsync("ul", { key: 'b951cc880b8aaf718b85403e3420d73ac976aa60', class: "navbar__items" }, items.map(item => (hAsync("li", null, hAsync("button", { class: { 'navbar__item': true, 'navbar__item--active': item.id === this.activeId }, onClick: () => this.clickLoadItem.emit(item), type: "button" }, item.icon && hAsync("dropi-icon", { name: item.icon, iconWidth: "16px", iconHeight: "16px", color: item.id === this.activeId ? 'Primary-Primary-500' : 'Gray-Gray-600' }), hAsync("span", null, item.name?.value || item.label), item.badge != null && String(item.badge) !== '0' && (hAsync("span", { class: "navbar__badge" }, item.badge)))))))), hAsync("div", { key: '8fe68f93af722982bac11890b106a35a292b3d98', class: "navbar__right" }, hAsync("button", { key: 'a4d0ff928dca2502384cd21e0bc852cacc895a30', class: "navbar__icon-btn", onClick: () => this.dropiNotificationsClick.emit(), "aria-label": "Notificaciones" }, hAsync("dropi-icon", { key: '41007746a151c27059d41db7c4672a2b551882d1', name: "Bell", iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-600" }), this.notifications > 0 && (hAsync("span", { key: 'a0e5c6c9f8e2aaf3e67cc22bdff2ae65472b7cb5', class: "navbar__notif-badge" }, this.notifications > 99 ? '99+' : this.notifications))), hAsync("button", { key: 'e1996f9e1fa922cd03a4e9c5721f5be838a941d3', class: "navbar__user-btn", onClick: () => this.dropiUserClick.emit(), type: "button" }, this.userAvatar
             ? hAsync("img", { class: "navbar__avatar", src: this.userAvatar, alt: this.userName })
-            : hAsync("div", { class: "navbar__avatar-placeholder" }, this.userName ? this.userName[0].toUpperCase() : '?'), this.userName && hAsync("span", { key: '1f2cfe4bddef60d31751c24c3f02cace2f07d6dd', class: "navbar__user-name" }, this.userName), hAsync("dropi-icon", { key: '520aff19c56964eefb3b1f59646c19df779c7e47', name: "Arrow-Down-2", iconWidth: "12px", iconHeight: "12px", color: "Gray-Gray-400" })))));
+            : hAsync("div", { class: "navbar__avatar-placeholder" }, this.userName ? this.userName[0].toUpperCase() : '?'), this.userName && hAsync("span", { key: 'd539c8f456564aa8d3a29e9d2e2ed6250241f411', class: "navbar__user-name" }, this.userName), hAsync("dropi-icon", { key: 'd32cba548201f28a051142e889f6de207a4e67d2', name: "Arrow-Down-2", iconWidth: "12px", iconHeight: "12px", color: "Gray-Gray-400" })))));
     }
     static get style() { return dropiNavbarCss(); }
     static get cmpMeta() { return {
@@ -9611,18 +9636,17 @@ class DropiNavbar {
 
 const dropiOtpSendCodeCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.otp{display:flex;flex-direction:column;align-items:center;gap:var(--Size-4, 16px)}.otp__label{font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-600, #475066);text-align:center;margin:0}.otp__inputs{display:flex;gap:var(--Size-4, 16px)}.otp__digit{width:56px;height:56px;border:1.5px solid var(--Gray-Gray-200, #d3d7de);border-radius:var(--Border-2, 8px);text-align:center;font-size:22px;font-weight:var(--font-weight-bold, 700);font-family:inherit;color:var(--Gray-Gray-800, #1f2433);outline:none;transition:border-color 0.15s ease;background:var(--Neutral-White, #ffffff)}.otp__digit:focus{border:2px solid var(--Primary-Primary-500, #f49a3d)}.otp__digit--filled{border:1px solid var(--Success-Success-500, #0abb87);color:var(--Neutral-Neutral-900, #0e111a)}.otp__digit--error{border:1px solid var(--Error-Error-500, #f46a6b)}.otp__error{margin:0;font-size:var(--font-size-xs, 10px);color:var(--Error-Error-500, #f46a6b);text-align:center}.otp__resend{text-align:center}.otp__countdown{font-size:var(--font-size-xs, 10px);color:var(--Gray-Gray-400, #858ea6)}.otp__resend-btn{background:none;border:none;padding:0;font-size:var(--font-size-s, 12px);font-weight:var(--font-weight-bold, 700);color:var(--Primary-Primary-500, #f49a3d);cursor:pointer;text-decoration:underline}`;
 
-const OTP_LENGTH = 6;
 const RESEND_SECONDS = 30;
 /**
  * @component dropi-otp-send-code
- * 6-digit OTP input with countdown timer and resend capability.
+ * OTP input with configurable length, countdown timer and resend capability.
  */
 class DropiOtpSendCode {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.codeCompleted = createEvent(this, "codeCompleted", 7);
-        this.codeAccepted = createEvent(this, "codeAccepted", 7);
-        this.dropiResend = createEvent(this, "dropiResend", 7);
+        this.codeCompleted = createEvent(this, "codeCompleted");
+        this.codeAccepted = createEvent(this, "codeAccepted");
+        this.dropiResend = createEvent(this, "dropiResend");
     }
     /** Delivery method label */
     engine = 'email';
@@ -9632,19 +9656,30 @@ class DropiOtpSendCode {
     showLabelContact = false;
     /** Error message to display */
     errorMessage = '';
-    digits = Array(OTP_LENGTH).fill('');
-    digitStates = Array(OTP_LENGTH).fill('idle');
+    /** Number of digits for the OTP */
+    digitsCount = 6;
+    digits = [];
+    digitStates = [];
     countdown = RESEND_SECONDS;
     canResend = false;
     error = false;
     inputs = [];
     timer;
-    /** Emitted when all 6 digits are entered. */
+    handleDigitsCountChange(newValue) {
+        this.digits = Array(newValue).fill('');
+        this.digitStates = Array(newValue).fill('idle');
+        this.inputs = [];
+    }
+    /** Emitted when all digits are entered. */
     codeCompleted;
-    /** Emitted when all 6 digits are entered (alternative event). */
+    /** Emitted when all digits are entered (alternative event). */
     codeAccepted;
     /** Emitted when resend is requested */
     dropiResend;
+    componentWillLoad() {
+        this.digits = Array(this.digitsCount).fill('');
+        this.digitStates = Array(this.digitsCount).fill('idle');
+    }
     componentDidLoad() { this.startCountdown(); }
     disconnectedCallback() { clearInterval(this.timer); }
     startCountdown() {
@@ -9661,13 +9696,13 @@ class DropiOtpSendCode {
     }
     handleInput(e, index) {
         const val = e.target.value.replace(/\D/g, '').slice(-1);
-        const newDigits = [...(this.digits ?? Array(OTP_LENGTH).fill(''))];
+        const newDigits = [...this.digits];
         newDigits[index] = val;
         this.digits = newDigits;
-        const newStates = [...(this.digitStates ?? Array(OTP_LENGTH).fill('idle'))];
+        const newStates = [...this.digitStates];
         newStates[index] = val ? 'filled' : 'idle';
         this.digitStates = newStates;
-        if (val && index < OTP_LENGTH - 1)
+        if (val && index < this.digitsCount - 1)
             this.inputs[index + 1]?.focus();
         if (newDigits.every(d => d !== '')) {
             const finalCode = newDigits.join('');
@@ -9676,18 +9711,18 @@ class DropiOtpSendCode {
         }
     }
     handleKeyDown(e, index) {
-        if (e.key === 'Backspace' && !(this.digits ?? [])[index] && index > 0) {
+        if (e.key === 'Backspace' && !this.digits[index] && index > 0) {
             this.inputs[index - 1]?.focus();
         }
     }
     handlePaste(e) {
         e.preventDefault();
-        const text = e.clipboardData?.getData('text')?.replace(/\D/g, '').slice(0, OTP_LENGTH) || '';
-        const newDigits = Array(OTP_LENGTH).fill('');
+        const text = e.clipboardData?.getData('text')?.replace(/\D/g, '').slice(0, this.digitsCount) || '';
+        const newDigits = Array(this.digitsCount).fill('');
         text.split('').forEach((c, i) => { newDigits[i] = c; });
         this.digits = newDigits;
         this.digitStates = newDigits.map(d => d ? 'filled' : 'idle');
-        this.inputs[Math.min(text.length, OTP_LENGTH - 1)]?.focus();
+        this.inputs[Math.min(text.length, this.digitsCount - 1)]?.focus();
         if (newDigits.every(d => d !== '')) {
             const finalCode = newDigits.join('');
             this.codeCompleted.emit(finalCode);
@@ -9696,15 +9731,20 @@ class DropiOtpSendCode {
     }
     render() {
         const engineLabel = this.engine === 'sms' ? 'SMS' : this.engine === '2fa' ? 'autenticador' : 'correo';
-        return (hAsync("div", { key: '8071fefc81136d40bbbb9e899e93cf482e824ccd', class: "otp" }, this.showLabelContact && (hAsync("p", { key: '811bc73073e180fe9094e99596c222870ed6c01f', class: "otp__label" }, "Ingresa el c\u00F3digo enviado a tu ", engineLabel, this.labelContact && hAsync("strong", { key: '3fe866ea995638f1b003330ee70c9f21e4c700a0' }, " ", this.labelContact))), hAsync("div", { key: '17701568ff66f89f89fce0f10fdda45840fffd5f', class: "otp__inputs", onPaste: (e) => this.handlePaste(e) }, Array.from({ length: OTP_LENGTH }, (_, i) => (hAsync("input", { key: i, ref: (el) => {
+        return (hAsync("div", { key: 'c9c6c3387cec2371049c547d87742563268bf28d', class: "otp" }, this.showLabelContact && (hAsync("p", { key: 'c3f36c62d7502eff8f86ef8202c3dfc65d846ba1', class: "otp__label" }, "Ingresa el c\u00F3digo enviado a tu ", engineLabel, this.labelContact && hAsync("strong", { key: '25c05d8f0773bf6f2af83f6154ac76638499e4d7' }, " ", this.labelContact))), hAsync("div", { key: '3ca2687723735b3eb6ada997f622a4a50c2d7ee9', 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--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: 'ab3021f6227105d3bb2a244e4b9b08c8dca51dec', class: "otp__error" }, this.errorMessage)), hAsync("div", { key: '6915de3762c811ad365336e8dc2b129c20abe3a6', 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: 'ddcdd5dacc533b73e6353c2670f762168c2803d3', class: "otp__error" }, this.errorMessage)), hAsync("div", { key: 'a21650c43d7a62f9e187bd9f4eb307d275ff37be', 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 watchers() { return {
+        "digitsCount": [{
+                "handleDigitsCountChange": 0
+            }]
+    }; }
     static get style() { return dropiOtpSendCodeCss(); }
     static get cmpMeta() { return {
         "$flags$": 521,
@@ -9714,6 +9754,7 @@ class DropiOtpSendCode {
             "labelContact": [1, "label-contact"],
             "showLabelContact": [4, "show-label-contact"],
             "errorMessage": [1, "error-message"],
+            "digitsCount": [2, "digits-count"],
             "digits": [32],
             "digitStates": [32],
             "countdown": [32],
@@ -9735,7 +9776,7 @@ const dropiPaginatorCss = () => `:host{display:block}*,*::before,*::after{box-si
 class DropiPaginator {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.pageChange = createEvent(this, "pageChange", 7);
+        this.dropiPageChange = createEvent(this, "dropiPageChange");
     }
     /** Total number of pages */
     totalPages = 1;
@@ -9750,7 +9791,7 @@ class DropiPaginator {
     /** Hide "Anterior"/"Siguiente" text labels, show only arrows */
     noLabels = false;
     /** Emitted when page changes. e.detail = new page number */
-    pageChange;
+    dropiPageChange;
     get pageNumbers() {
         const total = this.totalPages;
         const cur = this.currentPage;
@@ -9781,15 +9822,15 @@ class DropiPaginator {
         if (this.disabled || p < 1 || p > this.totalPages || p === this.currentPage)
             return;
         this.currentPage = p;
-        this.pageChange.emit(this.currentPage);
+        this.dropiPageChange.emit(this.currentPage);
     }
     render() {
         const pages = this.pageNumbers;
         const isFirst = this.currentPage <= 1;
         const isLast = this.currentPage >= this.totalPages;
-        return (hAsync("div", { key: 'b601f88e4f971f885835d81fe876303fe97027c7', class: "paginator" }, hAsync("div", { key: '988ffb7ed122d4a666af4525bc85159d8d36538a', class: "paginator-pages" }, !isFirst && !this.noLabels && (hAsync("button", { key: '920a1a407782bde436fb6560caeb39848e9c7e28', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(1), "aria-label": "Primera p\u00E1gina", disabled: this.disabled }, hAsync("dropi-icon", { key: '249d4f2fc0a7ba2d790e3cf1c7a36a8d853a8cfe', name: "Arrow-double-small-left", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" }))), !isFirst && (hAsync("button", { key: '7b3cbe1cbd33db77fe540b5e179ed759e2d515e9', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(this.currentPage - 1), "aria-label": "Anterior", disabled: this.disabled }, hAsync("dropi-icon", { key: '4f162e4df1573f5b6df40477099c3dc50347b738', name: "Dropdown-left", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" }), !this.noLabels && hAsync("span", { key: 'a569b225a577e3dfb41466247be33846254ba1f6', class: "paginator-label" }, "Anterior"))), pages.map((p, i) => p === '...'
+        return (hAsync("div", { key: 'af6614df5a241ef536b6723d30bde12c8a6f474f', class: "paginator" }, hAsync("div", { key: '8b5405baa717a36042fc03ca2e68370799c01ff7', class: "paginator-pages" }, !isFirst && !this.noLabels && (hAsync("button", { key: 'c340304b29d658ef9eaa8105a91540660c829048', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(1), "aria-label": "Primera p\u00E1gina", disabled: this.disabled }, hAsync("dropi-icon", { key: '3adfc1508cbcedbb91f99e467db2270c40a4ac83', name: "Arrow-double-small-left", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" }))), !isFirst && (hAsync("button", { key: '5936642c4b9e5b72546229996fbc72fe973e6f5f', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(this.currentPage - 1), "aria-label": "Anterior", disabled: this.disabled }, hAsync("dropi-icon", { key: 'c9f7eb1c0c27a738ee31e859617964fc75e514cc', name: "Dropdown-left", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" }), !this.noLabels && hAsync("span", { key: '5d448a9a6536c90c56fafd700e7c5998a85d6fdf', class: "paginator-label" }, "Anterior"))), pages.map((p, i) => p === '...'
             ? hAsync("span", { class: "paginator-ellipsis", key: `e${i}` }, "\u2026")
-            : hAsync("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 && (hAsync("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 && hAsync("span", { key: '3eb463a7749ef9f419613c07975a87073df29ecf', class: "paginator-label" }, "Siguiente"), hAsync("dropi-icon", { key: 'a6ece1855840a3ada48de22151bab4a43fd1972e', name: "Dropdown-Right", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" }))), !isLast && !this.noLabels && (hAsync("button", { key: '4ac9168aba1221ad17a08f7463cc2f065ea1ce6f', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(this.totalPages), "aria-label": "\u00DAltima p\u00E1gina", disabled: this.disabled }, hAsync("dropi-icon", { key: '9e3618334ec1d476ea59ea00a600499f47a45a9a', name: "Arrow-double-small-right", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" }))))));
+            : hAsync("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 && (hAsync("button", { key: '1a43d8dde37cdbc40527eb1c66bc5001a64cf59f', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(this.currentPage + 1), "aria-label": "Siguiente", disabled: this.disabled }, !this.noLabels && hAsync("span", { key: 'f76ccd791d02b25d78c509341b73e1c1bca0b986', class: "paginator-label" }, "Siguiente"), hAsync("dropi-icon", { key: '822a3a7e4ac651e00c469b565e300a7efcc5614b', name: "Dropdown-Right", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" }))), !isLast && !this.noLabels && (hAsync("button", { key: '2b4f7435f9083ab9c4d9ce81be5c259eda830e4a', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(this.totalPages), "aria-label": "\u00DAltima p\u00E1gina", disabled: this.disabled }, hAsync("dropi-icon", { key: '63ab5568c44ed3cbda917842defe4dc4254bb3f1', name: "Arrow-double-small-right", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" }))))));
     }
     static get style() { return dropiPaginatorCss(); }
     static get cmpMeta() { return {
@@ -9913,10 +9954,10 @@ const COUNTRIES = [
 class DropiPhoneInput {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.ngModelChangeCod = createEvent(this, "ngModelChangeCod", 7);
-        this.ngModelChangePhone = createEvent(this, "ngModelChangePhone", 7);
-        this.verifiedField = createEvent(this, "verifiedField", 7);
-        this.onChangeSelect = createEvent(this, "onChangeSelect", 7);
+        this.dropiCodChange = createEvent(this, "dropiCodChange");
+        this.dropiPhoneChange = createEvent(this, "dropiPhoneChange");
+        this.dropiVerify = createEvent(this, "dropiVerify");
+        this.dropiChangeSelect = createEvent(this, "dropiChangeSelect");
     }
     get el() { return getElement(this); }
     /** Initial country dial code (e.g. "57") — matches Angular 'CodArea' setter */
@@ -9944,13 +9985,13 @@ class DropiPhoneInput {
     selectProperties = null;
     open = false;
     /** Emitted when country dial code changes — matches Angular 'ngModelChangeCod' */
-    ngModelChangeCod;
+    dropiCodChange;
     /** Emitted when phone number changes — matches Angular 'ngModelChangePhone' */
-    ngModelChangePhone;
+    dropiPhoneChange;
     /** Emitted on field verification — matches Angular 'verifiedField' */
-    verifiedField;
+    dropiVerify;
     /** Emitted when country selection changes — matches Angular 'onChangeSelect' */
-    onChangeSelect;
+    dropiChangeSelect;
     codAreaChanged() {
         this.ngModelPhone = '';
     }
@@ -9972,14 +10013,14 @@ class DropiPhoneInput {
     selectCountry(c) {
         this.codArea = c.code;
         this.open = false;
-        this.ngModelChangeCod.emit(c.code);
-        this.onChangeSelect.emit(c);
+        this.dropiCodChange.emit(c.code);
+        this.dropiChangeSelect.emit(c);
     }
     handleInput(e) {
         const raw = e.target.value.replace(/\D/g, '');
         this.ngModelPhone = raw.slice(0, this.selectedCountry.maxLength);
         e.target.value = this.ngModelPhone;
-        this.ngModelChangePhone.emit(this.ngModelPhone);
+        this.dropiPhoneChange.emit(this.ngModelPhone);
     }
     handleWindowClick(ev) {
         const path = ev.composedPath();
@@ -9990,10 +10031,10 @@ class DropiPhoneInput {
     render() {
         const country = this.selectedCountry;
         const isInvalid = this.isValidPhone === false;
-        return (hAsync("div", { key: 'e4a9468971ff90e3e1c2cf6944a8475451843428', class: "phone-wrap" }, hAsync("div", { key: 'dabdccaf0453e98afb3db78ee6b6f83a66615baa', class: "phone-input-container" }, hAsync("div", { key: '6481136b782da271fe47c19cfd359398bf632f35', class: "custom-select" }, hAsync("button", { key: 'd314c0e2c74724eff20eae8f34241caf1fc2448c', type: "button", class: { 'select-button': true, 'select-invalid': isInvalid }, disabled: this.disabledInput, onClick: () => {
+        return (hAsync("div", { key: 'a377fcfcfdb239d79f319f0e058f5d54cbcfac02', class: "phone-wrap" }, hAsync("div", { key: '83719d2b76b491f1f7a9f3e202eb61c61abb2c31', class: "phone-input-container" }, hAsync("div", { key: 'c92ff5d9f260b80ad4e7b8f7e290b7b4e1f595f0', class: "custom-select" }, hAsync("button", { key: '35c56642c1828d86b7f211face2845dc79878fd4', type: "button", class: { 'select-button': true, 'select-invalid': isInvalid }, disabled: this.disabledInput, onClick: () => {
                 if (!this.disabledInput)
                     this.open = !this.open;
-            } }, hAsync("span", { key: 'c8b2aa7801a5c633c70010e7eeb2d5d9f3fb6b37', style: { display: 'flex', gap: '0.5rem', alignItems: 'center' } }, hAsync("img", { key: 'c2a6583a02b029cee578b9c931f185f7d4102e3f', src: `https://flagsapi.com/${country.flag}/flat/24.png`, alt: "flag" }), country.code), hAsync("dropi-icon", { key: '26e6e575c9072c008060560f03fcaba942ae5157', name: this.open ? 'Dropdown-up' : 'Dropdown-down', iconWidth: "14px", iconHeight: "14px", color: "Gray-Gray-500" })), hAsync("ul", { key: 'ad2d7688f2de26aa1c8ac080819203c7f5839764', 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: '399968a68860688b9e91084dc5530aa5464ef5f1', 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: 'e39cdac451df1c9a47c6552e7f133cb7662cae7f', style: { display: 'flex', gap: '0.5rem', alignItems: 'center' } }, hAsync("img", { key: '620c8efc2695ee26fed0c2bcd7f6132af05cdbed', src: `https://flagsapi.com/${country.flag}/flat/24.png`, alt: "flag" }), country.code), hAsync("dropi-icon", { key: 'cf57cc1ef06e12b0112fdbbb063fb8f045c17e39', name: this.open ? 'Dropdown-up' : 'Dropdown-down', iconWidth: "14px", iconHeight: "14px", color: "Gray-Gray-500" })), hAsync("ul", { key: '1009d2e4212267bbfaf4aa26c0c2152606a8d092', 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: '87be58fc820c63741b076b04d807b7410e292344', 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 watchers() { return {
         "codArea": [{
@@ -10024,6 +10065,59 @@ class DropiPhoneInput {
     }; }
 }
 
+const dropiProgressBarCss = () => `:host{display:block;width:100%}.progress-container{width:100%;display:flex;flex-direction:column;gap:4px}.progress-header{display:flex;justify-content:flex-end}.progress-value{font-size:var(--font-size-xs, 12px);color:var(--Gray-Gray-600, #475066);font-weight:500}.progress-track{width:100%;border-radius:999px;overflow:hidden;position:relative}.progress-fill{height:100%;border-radius:999px;transition:width 0.3s ease-in-out, background-color 0.3s ease-in-out}`;
+
+class DropiProgressBar {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    /** The progress value (0-100) */
+    value = 0;
+    /** The color scheme of the progress bar */
+    severity = 'primary';
+    /** Height of the progress bar */
+    height = '8px';
+    /** Whether to show the value as text */
+    showValue = false;
+    /** Background color of the track (optional, defaults to gray-100) */
+    trackColor = 'var(--Gray-Gray-100, #F7F8FA)';
+    /** Custom color for the progress fill (overrides severity) */
+    color = '';
+    render() {
+        const fillStyle = {
+            width: `${Math.min(100, Math.max(0, this.value))}%`,
+            backgroundColor: this.color || `var(--${this.getSeverityVariable()}, #50A5F1)`,
+        };
+        return (hAsync("div", { key: 'f68b88240ebc188f1f0378424b8d1617c2e7440e', class: "progress-container" }, this.showValue && (hAsync("div", { key: 'f8116e4eb824031d4bd1ac9d694e2bd3bca1ed6d', class: "progress-header" }, hAsync("span", { key: '892813f8e0a028ce286c00edd0489d489dd271c4', class: "progress-value" }, this.value, "%"))), hAsync("div", { key: '2e740487a59df1ec7def96565a9ee64d53b773b8', class: "progress-track", style: { height: this.height, backgroundColor: this.trackColor } }, hAsync("div", { key: '4f6fd1c436563cacac31e385d84c4a21945f6e10', class: "progress-fill", style: fillStyle }))));
+    }
+    getSeverityVariable() {
+        switch (this.severity) {
+            case 'success': return 'Success-Success-500';
+            case 'warning': return 'Warning-Warning-500';
+            case 'error': return 'Error-Error-500';
+            case 'info': return 'Info-Info-500';
+            case 'neutral': return 'Gray-Gray-400';
+            default: return 'Primary-Primary-500';
+        }
+    }
+    static get style() { return dropiProgressBarCss(); }
+    static get cmpMeta() { return {
+        "$flags$": 521,
+        "$tagName$": "dropi-progress-bar",
+        "$members$": {
+            "value": [2],
+            "severity": [1],
+            "height": [1],
+            "showValue": [4, "show-value"],
+            "trackColor": [1, "track-color"],
+            "color": [1]
+        },
+        "$listeners$": undefined,
+        "$lazyBundleId$": "-",
+        "$attrsToReflect$": []
+    }; }
+}
+
 const dropiRadioButtonCss = () => `:host{display:inline-block}*,*::before,*::after{box-sizing:border-box}.dropi-radio-button{display:flex;align-items:center;justify-content:flex-start;gap:20px}label{display:flex;flex-direction:row;align-items:center;gap:8px;cursor:pointer;color:var(--Gray-Gray-700, #32394d);font-size:var(--font-size-s, 12px);font-weight:var(--font-weight-regular, 400);line-height:1.5}input[type='radio']{appearance:none;-webkit-appearance:none;width:20px;height:20px;min-width:20px;border:2px solid var(--Gray-Gray-200, #c3c9d9);border-radius:50%;background-color:transparent;position:relative;cursor:pointer;outline:none;flex-shrink:0;align-self:center;vertical-align:middle;margin:0}input[type='radio']::before{content:'';position:absolute;top:3px;left:3px;width:10px;height:10px;background-color:var(--Primary-Primary-400, #f7b46f);border-radius:50%;display:none}input[type='radio']:checked{border:2px solid var(--Primary-Primary-500, #f49a3d)}input[type='radio']:checked::before{display:block}`;
 
 /**
@@ -10033,7 +10127,7 @@ const dropiRadioButtonCss = () => `:host{display:inline-block}*,*::before,*::aft
 class DropiRadioButton {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.onChange = createEvent(this, "onChange", 7);
+        this.dropiChange = createEvent(this, "dropiChange");
     }
     /** Label text displayed next to the radio */
     label = '';
@@ -10049,17 +10143,17 @@ class DropiRadioButton {
      */
     resetTrigger = false;
     /** Emitted when the radio is selected */
-    onChange;
+    dropiChange;
     onResetTrigger(val) {
         if (val)
             this.checked = false;
     }
     handleChange(e) {
         this.checked = e.target.checked;
-        this.onChange.emit(e);
+        this.dropiChange.emit(e);
     }
     render() {
-        return (hAsync("div", { key: '86430f601f7ddb6144682c0356938886217eb2ae', class: "dropi-radio-button" }, hAsync("label", { key: '653fa8d5c33fc64ab44174e6d0fe35c6fd992be7', htmlFor: this.id }, hAsync("input", { key: 'd99eae69867b0a09b6585a18dfaa52da353c5bd2', id: this.id, type: "radio", name: this.name, checked: this.checked, onChange: (e) => this.handleChange(e) }), this.label)));
+        return (hAsync("div", { key: '9f4c4f3be63c0aa0bcd1c48dacb97cec903db98d', class: "dropi-radio-button" }, hAsync("label", { key: 'c29bd1ccc6c468b57fdcb4dd6c15cf541255cb71', htmlFor: this.id }, hAsync("input", { key: '19533ffd5e5eb1b43d7e0f42971aa81652c8c926', id: this.id, type: "radio", name: this.name, checked: this.checked, onChange: (e) => this.handleChange(e) }), this.label)));
     }
     static get formAssociated() { return true; }
     static get watchers() { return {
@@ -10093,8 +10187,8 @@ const dropiRadioSelectionListCss = () => `:host{display:block;width:100%}*,*::be
 class DropiRadioSelectionList {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.valueChange = createEvent(this, "valueChange", 7);
-        this.onSearch = createEvent(this, "onSearch", 7);
+        this.dropiChange = createEvent(this, "dropiChange");
+        this.dropiSearch = createEvent(this, "dropiSearch");
     }
     /** Options array or JSON string */
     options = [];
@@ -10113,9 +10207,9 @@ class DropiRadioSelectionList {
     filterText = '';
     parsedOptions = [];
     /** Emitted on selection change. e.detail = selected option id */
-    valueChange;
+    dropiChange;
     /** Emitted on search — matches Angular 'onSearch' */
-    onSearch;
+    dropiSearch;
     optionsChanged(val) {
         this.parsedOptions = typeof val === 'string' ? JSON.parse(val) : (val || []);
     }
@@ -10127,12 +10221,12 @@ class DropiRadioSelectionList {
         return this.parsedOptions.filter(o => o.name?.toLowerCase().includes(q));
     }
     render() {
-        return (hAsync("div", { key: '7fdbf3d20a030a78ab4f48e7dba8333a34b1017b', class: "rsl" }, this.showFilter && (hAsync("div", { key: '12e2abb8f8ed76c6b3231f28b63c842ba3c3c326', class: "rsl__search" }, hAsync("dropi-icon", { key: '0d3e759696ceefdc997fadec75cc73f281caafd0', name: "Search", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-400" }), hAsync("input", { key: 'd5605975ebfda35d7abb0e69fe0a2baa929faddb', class: "rsl__search-input", type: "text", placeholder: this.filterPlaceholder, value: this.filterText, onInput: (e) => {
+        return (hAsync("div", { key: '296bdc955d13b8163ca954f6d399543343e7e121', class: "rsl" }, this.showFilter && (hAsync("div", { key: '4cdd3764411f389d2b6ce1145f5b6759bb20fc7b', class: "rsl__search" }, hAsync("dropi-icon", { key: '81af80a3dddb6176625b6ba575b084501741cd81', name: "Search", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-400" }), hAsync("input", { key: 'aa0e762f4403431225375f95c792af8596529588', class: "rsl__search-input", type: "text", placeholder: this.filterPlaceholder, value: this.filterText, onInput: (e) => {
                 this.filterText = e.target.value;
-                this.onSearch.emit({ searchValue: this.filterText, filteredOptions: this.filtered });
-            } }))), hAsync("div", { key: '25dae74884621ce4f27f214de94c9ddb0fa1799f', class: "rsl__list" }, this.filtered.map(opt => {
+                this.dropiSearch.emit({ searchValue: this.filterText, filteredOptions: this.filtered });
+            } }))), hAsync("div", { key: 'd153875a1c09957b74648f61f70320968ea6cd40', class: "rsl__list" }, this.filtered.map(opt => {
             const isSelected = opt.id === this.selectedOption;
-            return (hAsync("div", { class: { 'rsl__item': true, 'rsl__item--selected': isSelected }, key: opt.id, onClick: () => { this.selectedOption = opt.id; this.valueChange.emit(opt.id); } }, hAsync("div", { class: { 'rsl__radio': true, 'rsl__radio--checked': isSelected } }, isSelected && hAsync("div", { class: "rsl__radio-dot" })), hAsync("div", { class: "rsl__content" }, hAsync("span", { class: "rsl__name" }, opt.name), (isSelected || this.alwaysShowDescription) && opt.description && (hAsync("span", { class: "rsl__desc" }, opt.description)))));
+            return (hAsync("div", { class: { 'rsl__item': true, 'rsl__item--selected': isSelected }, key: opt.id, onClick: () => { this.selectedOption = opt.id; this.dropiChange.emit(opt.id); } }, hAsync("div", { class: { 'rsl__radio': true, 'rsl__radio--checked': isSelected } }, isSelected && hAsync("div", { class: "rsl__radio-dot" })), hAsync("div", { class: "rsl__content" }, hAsync("span", { class: "rsl__name" }, opt.name), (isSelected || this.alwaysShowDescription) && opt.description && (hAsync("span", { class: "rsl__desc" }, opt.description)))));
         }))));
     }
     static get watchers() { return {
@@ -10195,7 +10289,7 @@ class DropiReadMore {
     }
     render() {
         const showToggle = this.needsTruncation && (this.expanded ? this.showSeeLess : true);
-        return (hAsync("div", { key: '125c5f1d75c1e06f02d9898f375626bb75a67cd8', class: "read-more" }, hAsync("p", { key: '4a4450a3468e7fe7297fdae98d370f8cd77b8553', class: "read-more__text", style: this.textStyle ? this.textStyle : undefined }, this.displayText, showToggle && (hAsync("button", { key: 'cfe58b2781b908d9a0a802b4bd68cedf8dea827e', class: "read-more__toggle", style: this.buttonStyle ? this.buttonStyle : undefined, onClick: () => this.expanded = !this.expanded }, this.expanded ? ' Ver menos' : '... Ver más')))));
+        return (hAsync("div", { key: '6accf9aa0a6f7377c7de6e8cbcb9e2a7ee99573a', class: "read-more" }, hAsync("p", { key: '96e5493df8b065008f9bc45cea1ba768eabfc0a2', class: "read-more__text", style: this.textStyle ? this.textStyle : undefined }, this.displayText, showToggle && (hAsync("button", { key: '195d962715c5c618701c3e86df618289915e3a9b', class: "read-more__toggle", style: this.buttonStyle ? this.buttonStyle : undefined, onClick: () => this.expanded = !this.expanded }, this.expanded ? ' Ver menos' : '... Ver más')))));
     }
     static get style() { return dropiReadMoreCss(); }
     static get cmpMeta() { return {
@@ -10225,12 +10319,12 @@ const dropiSearchCss = () => `:host{display:block;width:100%;position:relative}*
 class DropiSearch {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.onInput = createEvent(this, "onInput", 7);
-        this.onBlur = createEvent(this, "onBlur", 7);
-        this.onKeyEnter = createEvent(this, "onKeyEnter", 7);
-        this.onChange = createEvent(this, "onChange", 7);
-        this.onClear = createEvent(this, "onClear", 7);
-        this.modelChange = createEvent(this, "modelChange", 7);
+        this.dropiInput = createEvent(this, "dropiInput");
+        this.dropiBlur = createEvent(this, "dropiBlur");
+        this.dropiKeyEnter = createEvent(this, "dropiKeyEnter");
+        this.dropiChange = createEvent(this, "dropiChange");
+        this.dropiClear = createEvent(this, "dropiClear");
+        this.dropiModelChange = createEvent(this, "dropiModelChange");
     }
     /** Visual variant (matches Angular `type`) */
     type = 'default';
@@ -10264,17 +10358,17 @@ class DropiSearch {
     selected = [];
     parsedOptions = [];
     /** Emitted on input change. e.detail = current text */
-    onInput;
+    dropiInput;
     /** Emitted on blur */
-    onBlur;
+    dropiBlur;
     /** Emitted when Enter is pressed. e.detail = current text */
-    onKeyEnter;
+    dropiKeyEnter;
     /** Emitted on change event of the native input (matches Angular `onChange`) */
-    onChange;
+    dropiChange;
     /** Emitted when clear button clicked */
-    onClear;
+    dropiClear;
     /** Emitted when selection changes. e.detail = selected items */
-    modelChange;
+    dropiModelChange;
     optionsChanged(val) {
         this.parsedOptions = typeof val === 'string' ? JSON.parse(val) : (val || []);
     }
@@ -10290,20 +10384,20 @@ class DropiSearch {
     handleInput(e) {
         this.textInput = e.target.value;
         this.open = this.parsedOptions.length > 0;
-        this.onInput.emit(this.textInput);
-        this.onChange.emit(this.textInput);
+        this.dropiInput.emit(this.textInput);
+        this.dropiChange.emit(this.textInput);
     }
     handleKeyDown(e) {
         if (e.key === 'Enter')
-            this.onKeyEnter.emit(this.textInput);
+            this.dropiKeyEnter.emit(this.textInput);
         if (e.key === 'Escape')
             this.open = false;
     }
     handleClear() {
         this.textInput = '';
         this.open = false;
-        this.onClear.emit();
-        this.onInput.emit('');
+        this.dropiClear.emit();
+        this.dropiInput.emit('');
     }
     isSelected(opt) {
         return this.selected.some(s => s[this.dataName] === opt[this.dataName]);
@@ -10322,14 +10416,14 @@ class DropiSearch {
             this.selected = [opt];
             this.open = false;
         }
-        this.modelChange.emit(this.selected);
+        this.dropiModelChange.emit(this.selected);
     }
     render() {
         const showDropdown = this.open && this.parsedOptions.length > 0;
-        return (hAsync("div", { key: 'ec00c8851a1d2d4ddda50edea458589a62d9451a', class: "search-wrap" }, this.label && hAsync("label", { key: '31cadba1b21276ec43f3623676fe1a7f9bac4da2', class: "search-label" }, this.label), hAsync("div", { key: 'bf68dbb7cfa657e8a7e441a2fe47db0e7d214e44', class: `search-input-row search-input-row--${this.type}` }, this.showIcon && hAsync("dropi-icon", { key: '21239271d90ba7adcc64e3f7ecb9b836619bd11e', class: "search-icon", name: "Search", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-400" }), hAsync("input", { key: '64735f2618f993cbca379e72b3c87435158b4f0c', 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: () => {
+        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.onBlur.emit(); } }), this.showClear && this.textInput && (hAsync("button", { key: 'c6a1dab911f262e0b2da88e59cdbaf6b4c1c74a9', class: "search-clear", onClick: () => this.handleClear(), "aria-label": "Limpiar" }, hAsync("dropi-icon", { key: 'ddf404e0be3d95f1154ecd22dd9b9f7a06e3c187', name: "Close-small", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-400" })))), showDropdown && (hAsync("div", { key: 'a8c5ecbfe700bcb116119f172c3cb017b9693113', 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", { checked: this.isSelected(opt) }), hAsync("span", { class: "search-option__label" }, opt[this.dataName])))))))));
     }
     static get watchers() { return {
         "dataToSearch": [{
@@ -10365,7 +10459,7 @@ class DropiSearch {
     }; }
 }
 
-const dropiSelectCss = () => `:host{display:block;width:100%;text-align:left}*,*::before,*::after{box-sizing:border-box}.custom-select{position:relative;width:100%}.custom-select label{display:block;font-size:var(--font-size-xs, 10px);font-weight:var(--font-weight-regular, 400);color:var(--Gray-Gray-600, #475066)}.disabled-label{color:var(--Gray-Gray-400, #858ea6) !important}.asterisk{color:var(--Error-Error-500, #f46a6b)}.dropdown-container{display:flex;align-items:center;gap:4px}.left-label{color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-m, 14px);white-space:nowrap}.select-button{box-sizing:border-box;width:100%;height:40px;padding:0 0.75rem;border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #ffffff);color:var(--Gray-Gray-500, #69738c);font-size:var(--font-size-s, 12px);font-family:inherit;display:flex;justify-content:space-between;align-items:center;text-align:left;cursor:pointer;transition:border-color 0.2s ease;gap:8px}.select-button:focus{outline:none;border-color:var(--Info-Info-500, #50a5f1)}.select-button:disabled{border-color:var(--Gray-Gray-200, #c3c9d9);color:var(--Gray-Gray-400, #858ea6);background-color:var(--Gray-Gray-50, #f7f8fa);cursor:not-allowed}.select-completed{border-color:var(--Gray-Gray-400, #858ea6);color:var(--Gray-Gray-600, #475066)}.select-button-error{border-color:var(--Error-Error-500, #f46a6b) !important}.no-border{border:none !important;color:var(--Gray-Gray-600, #475066);padding:var(--Size-4, 16px);background-color:transparent !important;gap:var(--Size-2, 8px)}.no-border:disabled{background-color:transparent !important}.button-content{display:flex;align-items:center;gap:8px;overflow:hidden;flex:1;min-width:0}.elipsis{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.select-dropdown-overlay{position:fixed;max-height:250px;overflow-y:auto;list-style:none;padding:var(--Size-4, 16px) var(--Size-4, 16px) var(--Size-3, 12px);margin:0;border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #ffffff);box-shadow:0px 8px 24px rgba(0, 0, 0, 0.12);z-index:9999;animation:dropdown-open 120ms ease-out}@keyframes dropdown-open{from{opacity:0;transform:scaleY(0.95);transform-origin:top}to{opacity:1;transform:scaleY(1);transform-origin:top}}.option{box-sizing:border-box;width:100%;min-height:40px;border-radius:var(--Border-2, 8px);padding:var(--Size-3, 12px) var(--Size-4, 16px);border:none;background:transparent;text-align:left;color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-s, 12px);font-family:inherit;cursor:pointer;display:flex;align-items:center;gap:var(--Size-2, 8px);transition:background 0.15s ease}.option:hover:not(:disabled){background:var(--Gray-Gray-50, #f7f8fa)}.option:disabled,.disabled-option{opacity:0.5;cursor:not-allowed}.option.selected-option:not(.option-radio){background:var(--Primary-Primary-50, #fef8f2);color:var(--Primary-Primary-500, #f49a3d)}.option-group-title{padding:var(--Size-3, 12px) var(--Size-4, 16px);font-size:var(--font-size-s, 12px);font-weight:var(--font-weight-medium, 500);color:var(--Gray-Gray-500, #69738c);list-style:none}.option-group{padding-left:var(--Size-6, 32px)}.sticky-search{position:sticky;top:calc(-1 * var(--Size-4, 16px));background:var(--Neutral-White, #ffffff);z-index:10;margin:calc(-1 * var(--Size-4, 16px)) calc(-1 * var(--Size-4, 16px)) 0;padding:var(--Size-2, 8px) var(--Size-4, 16px);border-bottom:1px solid var(--Gray-Gray-100, #e6eaf2);list-style:none}.search-wrapper{display:flex;align-items:center;gap:8px;border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);padding:6px 10px;background:var(--Neutral-White, #ffffff)}.search-input{flex:1;border:none;outline:none;font-size:var(--font-size-s, 12px);font-family:inherit;color:var(--Gray-Gray-700, #32394d);background:transparent}.search-input::placeholder{color:var(--Gray-Gray-400, #858ea6)}.search-clear{background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center}.multi-checkbox{width:18px;height:18px;min-width:18px;border-radius:var(--Border-1, 4px);border:2px solid var(--Gray-Gray-200, #c3c9d9);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background 0.15s, border-color 0.15s}.multi-checkbox.checked{background:var(--Primary-Primary-500, #f49a3d);border-color:var(--Primary-Primary-500, #f49a3d)}.option-radio{display:flex;align-items:center;gap:12px}.option-radio.selected-option{border-radius:var(--Border-2, 8px);background:var(--Primary-Primary-50, #fef8f2);color:var(--Primary-Primary-500, #f49a3d)}.option-radio.selected-option .option-second-label{color:var(--Primary-Primary-500, #f49a3d)}.radio{width:20px;height:20px;min-width:20px;border-radius:50%;border:2px solid var(--Gray-Gray-200, #c3c9d9);display:flex;align-items:center;justify-content:center;flex-shrink:0}.radio.selected{border-color:var(--Primary-Primary-500, #f49a3d)}.circle{width:12px;height:12px;border-radius:50%;background:var(--Primary-Primary-500, #f49a3d)}.labels-container{display:flex;justify-content:space-between;width:100%;min-width:0}.option-image{width:24px;height:24px;border-radius:60px;object-fit:cover;flex-shrink:0}.small-image{width:20px;height:20px}.option-image-fallback{width:24px;height:24px;border-radius:60px;background:var(--Primary-Primary-500, #f49a3d);color:white;font-size:13px;font-weight:var(--font-weight-bold);display:flex;justify-content:center;align-items:center;flex-shrink:0}.small-image.option-image-fallback{width:20px;height:20px}.option-second-label{color:var(--Gray-Gray-700, #32394d);font-weight:var(--font-weight-bold);white-space:nowrap}.flag-placeholder{font-size:11px;font-weight:var(--font-weight-semibold);color:var(--Gray-Gray-500, #69738c);flex-shrink:0}.select-helper,.select-helper-error{display:flex;gap:var(--Size-1, 4px);align-items:center;margin-top:var(--Size-1, 4px)}.select-helper span{color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-xs, 10px)}.select-helper-error span{color:var(--Error-Error-500, #f46a6b);font-size:var(--font-size-xs, 10px)}.no-results{padding:var(--Size-3, 12px) var(--Size-4, 16px);color:var(--Gray-Gray-400, #858ea6);font-size:var(--font-size-s, 12px);list-style:none;text-align:center}`;
+const dropiSelectCss = () => `:host{display:block;width:100%;text-align:left}*,*::before,*::after{box-sizing:border-box}.custom-select{position:relative;width:100%}.custom-select label{display:block;font-size:var(--font-size-xs, 10px);font-weight:var(--font-weight-regular, 400);color:var(--Gray-Gray-600, #475066)}.disabled-label{color:var(--Gray-Gray-400, #858ea6) !important}.asterisk{color:var(--Error-Error-500, #f46a6b)}.dropdown-container{display:flex;align-items:center;gap:4px}.left-label{color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-m, 14px);white-space:nowrap}.select-button{box-sizing:border-box;width:100%;height:40px;padding:0 0.75rem;border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #ffffff);color:var(--Gray-Gray-500, #69738c);font-size:var(--font-size-s, 12px);font-family:inherit;display:flex;justify-content:space-between;align-items:center;text-align:left;cursor:pointer;transition:border-color 0.2s ease;gap:8px}.select-button:focus{outline:none;border-color:var(--Info-Info-500, #50a5f1)}.select-button:disabled{border-color:var(--Gray-Gray-200, #c3c9d9);color:var(--Gray-Gray-400, #858ea6);background-color:var(--Gray-Gray-50, #f7f8fa);cursor:not-allowed}.select-completed{border-color:var(--Gray-Gray-400, #858ea6);color:var(--Gray-Gray-600, #475066)}.select-button-error{border-color:var(--Error-Error-500, #f46a6b) !important}.no-border{border:none !important;color:var(--Gray-Gray-600, #475066);padding:var(--Size-4, 16px);background-color:transparent !important;gap:var(--Size-2, 8px)}.no-border:disabled{background-color:transparent !important}.button-content{display:flex;align-items:center;gap:8px;overflow:hidden;flex:1;min-width:0}.elipsis{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.select-dropdown-overlay{position:fixed;max-height:250px;overflow-y:auto;list-style:none;padding:var(--Size-4, 16px) var(--Size-4, 16px) var(--Size-3, 12px);margin:0;border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #ffffff);box-shadow:0px 8px 24px rgba(0, 0, 0, 0.12);z-index:9999;animation:dropdown-open 120ms ease-out}.select-dropdown-overlay.within-modal{position:absolute}@keyframes dropdown-open{from{opacity:0;transform:scaleY(0.95);transform-origin:top}to{opacity:1;transform:scaleY(1);transform-origin:top}}.option{box-sizing:border-box;width:100%;min-height:40px;border-radius:var(--Border-2, 8px);padding:var(--Size-3, 12px) var(--Size-4, 16px);border:none;background:transparent;text-align:left;color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-s, 12px);font-family:inherit;cursor:pointer;display:flex;align-items:center;gap:var(--Size-2, 8px);transition:background 0.15s ease}.option:hover:not(:disabled){background:var(--Gray-Gray-50, #f7f8fa)}.option:disabled,.disabled-option{opacity:0.5;cursor:not-allowed}.option.selected-option:not(.option-radio){background:var(--Primary-Primary-50, #fef8f2);color:var(--Primary-Primary-500, #f49a3d)}.option-group-title{padding:var(--Size-3, 12px) var(--Size-4, 16px);font-size:var(--font-size-s, 12px);font-weight:var(--font-weight-medium, 500);color:var(--Gray-Gray-500, #69738c);list-style:none}.option-group{padding-left:var(--Size-6, 32px)}.sticky-search{position:sticky;top:calc(-1 * var(--Size-4, 16px));background:var(--Neutral-White, #ffffff);z-index:10;margin:calc(-1 * var(--Size-4, 16px)) calc(-1 * var(--Size-4, 16px)) 0;padding:var(--Size-2, 8px) var(--Size-4, 16px);border-bottom:1px solid var(--Gray-Gray-100, #e6eaf2);list-style:none}.search-wrapper{display:flex;align-items:center;gap:8px;border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);padding:6px 10px;background:var(--Neutral-White, #ffffff)}.search-input{flex:1;border:none;outline:none;font-size:var(--font-size-s, 12px);font-family:inherit;color:var(--Gray-Gray-700, #32394d);background:transparent}.search-input::placeholder{color:var(--Gray-Gray-400, #858ea6)}.search-clear{background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center}.multi-checkbox{width:18px;height:18px;min-width:18px;border-radius:var(--Border-1, 4px);border:2px solid var(--Gray-Gray-200, #c3c9d9);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background 0.15s, border-color 0.15s}.multi-checkbox.checked{background:var(--Primary-Primary-500, #f49a3d);border-color:var(--Primary-Primary-500, #f49a3d)}.option-radio{display:flex;align-items:center;gap:12px}.option-radio.selected-option{border-radius:var(--Border-2, 8px);background:var(--Primary-Primary-50, #fef8f2);color:var(--Primary-Primary-500, #f49a3d)}.option-radio.selected-option .option-second-label{color:var(--Primary-Primary-500, #f49a3d)}.radio{width:20px;height:20px;min-width:20px;border-radius:50%;border:2px solid var(--Gray-Gray-200, #c3c9d9);display:flex;align-items:center;justify-content:center;flex-shrink:0}.radio.selected{border-color:var(--Primary-Primary-500, #f49a3d)}.circle{width:12px;height:12px;border-radius:50%;background:var(--Primary-Primary-500, #f49a3d)}.labels-container{display:flex;justify-content:space-between;width:100%;min-width:0}.option-image{width:24px;height:24px;border-radius:60px;object-fit:cover;flex-shrink:0}.small-image{width:20px;height:20px}.option-image-fallback{width:24px;height:24px;border-radius:60px;background:var(--Primary-Primary-500, #f49a3d);color:white;font-size:13px;font-weight:var(--font-weight-bold);display:flex;justify-content:center;align-items:center;flex-shrink:0}.small-image.option-image-fallback{width:20px;height:20px}.option-second-label{color:var(--Gray-Gray-700, #32394d);font-weight:var(--font-weight-bold);white-space:nowrap}.flag-placeholder{font-size:11px;font-weight:var(--font-weight-semibold);color:var(--Gray-Gray-500, #69738c);flex-shrink:0}.select-helper,.select-helper-error{display:flex;gap:var(--Size-1, 4px);align-items:center;margin-top:var(--Size-1, 4px)}.select-helper span{color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-xs, 10px)}.select-helper-error span{color:var(--Error-Error-500, #f46a6b);font-size:var(--font-size-xs, 10px)}.no-results{padding:var(--Size-3, 12px) var(--Size-4, 16px);color:var(--Gray-Gray-400, #858ea6);font-size:var(--font-size-s, 12px);list-style:none;text-align:center}`;
 
 /**
  * @component dropi-select
@@ -10390,11 +10484,11 @@ const dropiSelectCss = () => `:host{display:block;width:100%;text-align:left}*,*
 class DropiSelect {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.onChangeSelect = createEvent(this, "onChangeSelect", 7);
-        this.onClear = createEvent(this, "onClear", 7);
-        this.onSearch = createEvent(this, "onSearch", 7);
-        this.scrolledToEnd = createEvent(this, "scrolledToEnd", 7);
-        this.onKeyEnter = createEvent(this, "onKeyEnter", 7);
+        this.dropiChangeSelect = createEvent(this, "dropiChangeSelect");
+        this.dropiClear = createEvent(this, "dropiClear");
+        this.dropiSearch = createEvent(this, "dropiSearch");
+        this.dropiScrollEnd = createEvent(this, "dropiScrollEnd");
+        this.dropiKeyEnter = createEvent(this, "dropiKeyEnter");
         if (hostRef.$hostElement$["s-ei"]) {
             this.internals = hostRef.$hostElement$["s-ei"];
         }
@@ -10440,6 +10534,8 @@ class DropiSelect {
     selectedOption = null;
     /** Custom CSS class for the dropdown overlay */
     overlayClass = '';
+    /** If true, uses absolute positioning instead of fixed (better for modals with transforms) */
+    withinModal = false;
     /**
      * Convenience object prop — matches Angular `selectProperties: SelectProperties`.
      * Fields: label, placeholder, options, showObligatory, textHelper,
@@ -10459,15 +10555,15 @@ class DropiSelect {
     };
     // ── Events ───────────────────────────────────────────────────
     /** Emitted when an option is selected — matches Angular 'onChangeSelect' */
-    onChangeSelect;
+    dropiChangeSelect;
     /** Emitted when the selection is cleared — matches Angular 'onClear' */
-    onClear;
+    dropiClear;
     /** Emitted on search input — matches Angular 'onSearch' */
-    onSearch;
+    dropiSearch;
     /** Emitted when the list is scrolled to the end — matches Angular 'scrolledToEnd' */
-    scrolledToEnd;
+    dropiScrollEnd;
     /** Emitted on Enter key inside search — matches Angular 'onKeyEnter' */
-    onKeyEnter;
+    dropiKeyEnter;
     // ── Lifecycle ────────────────────────────────────────────────
     componentWillLoad() {
         if (this.selectProperties)
@@ -10548,13 +10644,27 @@ class DropiSelect {
         this._selectedOption = null;
         this.multiSelected = [];
         this.internals.setFormValue('');
-        this.onClear.emit();
+        this.dropiClear.emit();
     }
     /** Reset multi-select state and show a placeholder label */
     async resetMultiSelect(_placeholder) {
         this.multiSelected = [];
         this.internals.setFormValue('');
     }
+    // ── Scroll & Resize listeners ──────────────────────────────
+    handleWindowScroll(e) {
+        if (!this.isOpen || this.withinModal)
+            return;
+        // When scroll originates inside shadow DOM, e.target is retargeted to the host element
+        if (e.target === this.el)
+            return;
+        this.closeDropdown();
+    }
+    handleWindowResize() {
+        if (this.isOpen && !this.withinModal) {
+            this.closeDropdown();
+        }
+    }
     // ── Click outside ────────────────────────────────────────────
     handleOutsideClick(e) {
         if (this.isOpen && !e.composedPath().includes(this.el)) {
@@ -10598,8 +10708,8 @@ class DropiSelect {
         return this.placeholder;
     }
     // ── Dropdown positioning ─────────────────────────────────────
-    openDropdown() {
-        if (this.disabled)
+    updateDropdownPosition() {
+        if (!this.buttonRef)
             return;
         const rect = this.buttonRef.getBoundingClientRect();
         const viewportHeight = window.innerHeight;
@@ -10613,6 +10723,18 @@ class DropiSelect {
             left: `${rect.left}px`,
             width: `${rect.width}px`,
         };
+    }
+    openDropdown() {
+        if (this.withinModal) {
+            this.dropdownStyle = {
+                top: `${this.el.offsetHeight}px`,
+                left: '0px',
+                width: '100%',
+            };
+        }
+        else {
+            this.updateDropdownPosition();
+        }
         this.isOpen = true;
         if (this.searchEnabled) {
             setTimeout(() => {
@@ -10642,12 +10764,12 @@ class DropiSelect {
                 this.multiSelected = [...this.multiSelected, option];
             }
             this.internals.setFormValue(this.multiSelected.map(o => o.id).join(','));
-            this.onChangeSelect.emit([...this.multiSelected]);
+            this.dropiChangeSelect.emit([...this.multiSelected]);
         }
         else {
             this._selectedOption = option;
             this.internals.setFormValue(String(option.id));
-            this.onChangeSelect.emit(option);
+            this.dropiChangeSelect.emit(option);
             this.closeDropdown();
         }
     }
@@ -10657,7 +10779,7 @@ class DropiSelect {
     // ── Search ───────────────────────────────────────────────────
     handleSearch(term) {
         this.searchTerm = term;
-        this.onSearch.emit(term);
+        this.dropiSearch.emit(term);
         const lower = term.toLowerCase().trim();
         if (!lower) {
             this.filteredOptions = [...this.options];
@@ -10685,7 +10807,7 @@ class DropiSelect {
                 this.hasEmittedScrollEnd = false;
             this.lastScrollTop = el.scrollTop;
             if (distFromBottom <= threshold && !this.hasEmittedScrollEnd) {
-                this.scrolledToEnd.emit();
+                this.dropiScrollEnd.emit();
                 this.hasEmittedScrollEnd = true;
                 setTimeout(() => { this.hasEmittedScrollEnd = false; }, 1000);
             }
@@ -10733,16 +10855,16 @@ class DropiSelect {
     renderDropdown() {
         if (!this.isOpen)
             return null;
-        return (hAsync("ul", { class: `select-dropdown-overlay ${this.overlayClass}`, style: this.dropdownStyle, onScroll: (e) => this.handleScroll(e) }, this.searchEnabled && (hAsync("li", { class: "sticky-search" }, hAsync("div", { class: "search-wrapper" }, hAsync("dropi-icon", { name: "Search", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-400" }), hAsync("input", { class: "search-input", type: "text", placeholder: this.placeHolderSearch, value: this.searchTerm, onInput: (e) => this.handleSearch(e.target.value), onKeyDown: (e) => {
+        return (hAsync("ul", { class: `select-dropdown-overlay ${this.overlayClass} ${this.withinModal ? 'within-modal' : ''}`, style: this.dropdownStyle, onScroll: (e) => this.handleScroll(e) }, this.searchEnabled && (hAsync("li", { class: "sticky-search" }, hAsync("div", { class: "search-wrapper" }, hAsync("dropi-icon", { name: "Search", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-400" }), hAsync("input", { class: "search-input", type: "text", placeholder: this.placeHolderSearch, value: this.searchTerm, onInput: (e) => this.handleSearch(e.target.value), onKeyDown: (e) => {
                 if (e.key === 'Enter')
-                    this.onKeyEnter.emit(e);
+                    this.dropiKeyEnter.emit(e);
             } }), this.searchTerm && (hAsync("button", { type: "button", class: "search-clear", onClick: () => this.handleSearch('') }, hAsync("dropi-icon", { name: "Close", iconWidth: "14px", iconHeight: "14px", color: "Gray-Gray-400" })))))), this.isGrouped && this.filteredOptions.map(group => [
             hAsync("li", { class: "option-group-title" }, group.category),
             ...group.options.map(opt => (hAsync("li", { key: opt.id }, hAsync("button", { type: "button", class: { option: true, 'option-group': true, 'disabled-option': !!opt.disabled }, disabled: opt.disabled, onClick: () => this.selectOption(opt) }, opt.preIcon && hAsync("dropi-icon", { name: opt.preIcon, iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-500" }), hAsync("span", { class: "elipsis" }, opt.label))))),
         ]), !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: '9f5397dca313ba676a5a038f89ded457c324ac7a', class: "custom-select" }, !this.dropdownType && this.label && (hAsync("label", { key: '5924d81286019ca01ca5eda924078e64db5ead66', class: { 'disabled-label': this.disabled } }, this.label, this.showObligatory && !this.disabled && hAsync("span", { key: '1565c47c081c8fb497185417aa46559f3754db89', class: "asterisk" }, " *"))), hAsync("div", { key: '6be308aeafb7a4a2da302db925ccc07e5eb27718', class: "dropdown-container" }, this.dropdownType && this.label && (hAsync("div", { key: 'a2ea9c5e67274181c5bc020c990281ac425b489b', class: "left-label" }, this.label)), this.renderTrigger()), this.textHelper && !this.hasError && (hAsync("div", { key: 'a13ebbf9fe6e975724b2441f5c1c71b18dacf128', class: "select-helper" }, hAsync("span", { key: '55f2369bc0a8c156454b4c29a323f98bd13321fb' }, this.textHelper))), this.hasError && this.errorText && (hAsync("div", { key: 'bc5dc3394916459576798d5f1db4126992b30d58', class: "select-helper-error" }, hAsync("dropi-icon", { key: '12bcece304d9de3cc807921ba69af29b9b763fc9', name: "Warning-circle", iconWidth: "12px", iconHeight: "12px", color: "Error-Error-500" }), hAsync("span", { key: 'c221b88fde03aa2d66ce212272ff999f2ba5a9ad' }, this.errorText))), this.renderDropdown()));
+        return (hAsync("div", { key: '4f34c329d9993926758230f0e9ca0f8d0e57ef6e', class: "custom-select" }, !this.dropdownType && this.label && (hAsync("label", { key: '743013592658ee415d4a9e3db8ec648472a3428e', class: { 'disabled-label': this.disabled } }, this.label, this.showObligatory && !this.disabled && hAsync("span", { key: '56183248733eb18956664c859c8f7d4057f3fa11', class: "asterisk" }, " *"))), hAsync("div", { key: 'c93f45456478ac5419d542512092e877a04f28b7', class: "dropdown-container" }, this.dropdownType && this.label && (hAsync("div", { key: '0632779b9ba71f1fb91944b54b477999f607a3f5', class: "left-label" }, this.label)), this.renderTrigger()), this.textHelper && !this.hasError && (hAsync("div", { key: '3e57fc2b53715abb9800db573119cf77b0333d37', class: "select-helper" }, hAsync("span", { key: 'baf3d1f0ae4d535acae2a08df8d2079996afdcff' }, this.textHelper))), this.hasError && this.errorText && (hAsync("div", { key: '8b25aae92b9370a02fcfd81f50b98df145d3cb0e', class: "select-helper-error" }, hAsync("dropi-icon", { key: '60643f0b7e54f8533dc9fd7dd17715aec59d851c', name: "Warning-circle", iconWidth: "12px", iconHeight: "12px", color: "Error-Error-500" }), hAsync("span", { key: '35bcdfd3c9825cbac269b1085d4c552df694f33a' }, this.errorText))), this.renderDropdown()));
     }
     static get formAssociated() { return true; }
     static get watchers() { return {
@@ -10783,6 +10905,7 @@ class DropiSelect {
             "defaultSelectedId": [1032, "default-selected-id"],
             "selectedOption": [1040],
             "overlayClass": [1, "overlay-class"],
+            "withinModal": [4, "within-modal"],
             "selectProperties": [8, "select-properties"],
             "isOpen": [32],
             "_selectedOption": [32],
@@ -10795,7 +10918,7 @@ class DropiSelect {
             "clearSelection": [64],
             "resetMultiSelect": [64]
         },
-        "$listeners$": [[4, "click", "handleOutsideClick"]],
+        "$listeners$": [[11, "scroll", "handleWindowScroll"], [9, "resize", "handleWindowResize"], [4, "click", "handleOutsideClick"]],
         "$lazyBundleId$": "-",
         "$attrsToReflect$": [["disabled", "disabled"]]
     }; }
@@ -10811,7 +10934,7 @@ const dropiSidebarCss = () => `:host{display:block}.main-sidebar-container{margi
 class DropiSidebar {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.onIndexChanged = createEvent(this, "onIndexChanged", 7);
+        this.dropiIndexChange = createEvent(this, "dropiIndexChange");
     }
     /**
      * Define las propiedades y la cantidad de elementos a renderizar.
@@ -10821,7 +10944,7 @@ class DropiSidebar {
     /**
      * Evento emitido cuando se selecciona una opción en el menú o un sub-hijo.
      */
-    onIndexChanged;
+    dropiIndexChange;
     parsedProperties = [];
     watchPropHandler(newValue) {
         this.parsedProperties = typeof newValue === 'string' ? JSON.parse(newValue) : (newValue || []);
@@ -10841,16 +10964,16 @@ class DropiSidebar {
         }
     }
     onItemClick(itemClicked) {
-        this.onIndexChanged.emit(itemClicked);
+        this.dropiIndexChange.emit(itemClicked);
         if (itemClicked.subItems && itemClicked.subItems.length > 0) {
             this.setExpandedPropertie(itemClicked.id);
         }
     }
     onSubItemClick(itemClicked) {
-        this.onIndexChanged.emit(itemClicked);
+        this.dropiIndexChange.emit(itemClicked);
     }
     render() {
-        return (hAsync("div", { key: '9f79e6370ff61c6278a8238b0dc92881832f9b8f', class: "main-sidebar-container" }, this.parsedProperties.map(item => {
+        return (hAsync("div", { key: '3e45416a116488871747c54c14cbb73ecf1d9a4d', class: "main-sidebar-container" }, this.parsedProperties.map(item => {
             return [
                 /* Item Principal */
                 hAsync("div", { class: {
@@ -11102,21 +11225,21 @@ const dropiSwitchCss = () => `:host{display:inline-block}*,*::before,*::after{bo
 class DropiSwitch {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.onChange = createEvent(this, "onChange", 7);
+        this.dropiChange = createEvent(this, "dropiChange");
     }
     /** Whether the switch is on */
     isChecked = false;
     /** Whether the switch is disabled */
     disabled = false;
     /** Emitted when the toggle state changes */
-    onChange;
+    dropiChange;
     onToggleChange(event) {
         const input = event.target;
         this.isChecked = input.checked;
-        this.onChange.emit(this.isChecked);
+        this.dropiChange.emit(this.isChecked);
     }
     render() {
-        return (hAsync("label", { key: 'c12214e051cfd7ca50d0df9fb3374ee9f3b72c1a', class: "toggle-switch" }, hAsync("input", { key: '2821a935d4614447900d35028261b5c6620c104f', type: "checkbox", checked: this.isChecked, disabled: this.disabled, onChange: (e) => this.onToggleChange(e) }), hAsync("span", { key: '1370a1ea4b9bb48849f9d998eac3a36ac3fa75b6', class: "slider" })));
+        return (hAsync("label", { key: '977f209e9d6411bf386637c1073dca0f5d1c72f3', class: "toggle-switch" }, hAsync("input", { key: '8deef7c0c079d8d5662bd05372eb74d5cc68429f', type: "checkbox", checked: this.isChecked, disabled: this.disabled, onChange: (e) => this.onToggleChange(e) }), hAsync("span", { key: '2f6dd3b87996271d0c6abddc86697791de4da9b1', class: "slider" })));
     }
     static get formAssociated() { return true; }
     static get style() { return dropiSwitchCss(); }
@@ -11142,20 +11265,20 @@ const dropiTableCss = () => `:host{display:block;width:100%;min-width:0}*,*::bef
 class DropiTable {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.dropiSort = createEvent(this, "dropiSort", 7);
-        this.dropiSelection = createEvent(this, "dropiSelection", 7);
-        this.dropiRowClick = createEvent(this, "dropiRowClick", 7);
-        this.dropiSearch = createEvent(this, "dropiSearch", 7);
-        this.dropiPageChange = createEvent(this, "dropiPageChange", 7);
-        this.dropiPageSizeChange = createEvent(this, "dropiPageSizeChange", 7);
-        this.dropiAction = createEvent(this, "dropiAction", 7);
-        this.rowsSelected = createEvent(this, "rowsSelected", 7);
-        this.actionClicked = createEvent(this, "actionClicked", 7);
-        this.onPageChange = createEvent(this, "onPageChange", 7);
-        this.onSizeChange = createEvent(this, "onSizeChange", 7);
-        this.onSortChange = createEvent(this, "onSortChange", 7);
-        this.onSearchChange = createEvent(this, "onSearchChange", 7);
-        this.expandChildren = createEvent(this, "expandChildren", 7);
+        this.dropiSort = createEvent(this, "dropiSort");
+        this.dropiSelection = createEvent(this, "dropiSelection");
+        this.dropiRowClick = createEvent(this, "dropiRowClick");
+        this.dropiSearch = createEvent(this, "dropiSearch");
+        this.dropiPageChange = createEvent(this, "dropiPageChange");
+        this.dropiPageSizeChange = createEvent(this, "dropiPageSizeChange");
+        this.dropiAction = createEvent(this, "dropiAction");
+        this.dropiRowsSelected = createEvent(this, "dropiRowsSelected");
+        this.dropiActionClick = createEvent(this, "dropiActionClick");
+        this.dropiPageChangeAngular = createEvent(this, "dropiPageChangeAngular");
+        this.dropiSizeChangeAngular = createEvent(this, "dropiSizeChangeAngular");
+        this.dropiSortChangeAngular = createEvent(this, "dropiSortChangeAngular");
+        this.dropiSearchChangeAngular = createEvent(this, "dropiSearchChangeAngular");
+        this.expandChildren = createEvent(this, "expandChildren");
     }
     /** Column definitions */
     columns = [];
@@ -11228,17 +11351,17 @@ class DropiTable {
     dropiAction;
     // ── Angular-parity events ────────────────────────────────────
     /** Matches Angular `rowsSelected` */
-    rowsSelected;
+    dropiRowsSelected;
     /** Matches Angular `actionClicked` */
-    actionClicked;
+    dropiActionClick;
     /** Matches Angular `onPageChange` */
-    onPageChange;
+    dropiPageChangeAngular;
     /** Matches Angular `onSizeChange` */
-    onSizeChange;
+    dropiSizeChangeAngular;
     /** Matches Angular `onSortChange` */
-    onSortChange;
+    dropiSortChangeAngular;
     /** Matches Angular `onSearchChange` */
-    onSearchChange;
+    dropiSearchChangeAngular;
     /** Matches Angular `expandChildren` */
     expandChildren;
     columnsChanged(val) {
@@ -11330,7 +11453,7 @@ class DropiTable {
             this.sortAsc = true;
         }
         this.dropiSort.emit({ key: this.sortKey, dir: this.sortDir });
-        this.onSortChange.emit({ key: this.sortKey, dir: this.sortDir });
+        this.dropiSortChangeAngular.emit({ key: this.sortKey, dir: this.sortDir });
     }
     toggleRow(idx) {
         const next = new Set(this.selectedKeys);
@@ -11341,13 +11464,13 @@ class DropiTable {
         this.selectedKeys = next;
         const selected = Array.from(next);
         this.dropiSelection.emit(selected);
-        this.rowsSelected.emit(selected.map(i => this.pagedRows[i]));
+        this.dropiRowsSelected.emit(selected.map(i => this.pagedRows[i]));
     }
     toggleAll(checked) {
         this.selectedKeys = checked ? new Set(this.pagedRows.map((_, i) => i)) : new Set();
         const selected = Array.from(this.selectedKeys);
         this.dropiSelection.emit(selected);
-        this.rowsSelected.emit(selected.map(i => this.pagedRows[i]));
+        this.dropiRowsSelected.emit(selected.map(i => this.pagedRows[i]));
     }
     renderCellValue(value) {
         if (value === null || value === undefined)
@@ -11368,6 +11491,14 @@ class DropiTable {
                     return (hAsync("div", { class: "image-label" }, hAsync("div", { class: "img-container" }, hAsync("img", { src: value.imageUrl, alt: value.value })), hAsync("span", null, value.value)));
                 case 'textWrap':
                     return hAsync("div", { class: "text-wrap-label", style: { maxWidth: value.maxWidth || '220px' } }, value.value);
+                case 'textCopy':
+                case 'tokenAction':
+                    return (hAsync("div", { class: "text-icon-label", style: { display: 'flex', alignItems: 'center' } }, hAsync("div", { style: { display: 'flex', alignItems: 'center' } }, hAsync("span", { style: { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } }, value.value)), hAsync("div", { style: { display: 'flex', justifyContent: 'flex-start', paddingLeft: '0.5rem' } }, hAsync("dropi-icon", { name: value.revealed ? "Clon" : "Eye", iconWidth: "18px", iconHeight: "18px", color: "Gray-Gray-500", style: { cursor: 'pointer', flexShrink: '0' }, onClick: (e) => {
+                            e.stopPropagation();
+                            const actionId = value.revealed ? 'copy' : 'reveal';
+                            this.dropiAction.emit({ row: value.row, action: { id: actionId, value: value.value } });
+                            this.dropiActionClick.emit({ row: value.row, action: { id: actionId, value: value.value } });
+                        } }))));
                 default:
                     return hAsync("span", { class: "table-labels" }, String(value.value ?? '—'));
             }
@@ -11382,10 +11513,10 @@ 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, onOnInput: (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", { placeholder: "Buscar", value: this.searchTerm, onDropiInput: (e) => {
                 this.searchTerm = e.detail;
                 this.dropiSearch.emit(e.detail);
-                this.onSearchChange.emit(e.detail);
+                this.dropiSearchChangeAngular.emit(e.detail);
             } })), this.showColumnSelector && (hAsync("div", { class: "table-tools" }, hAsync("div", { class: "column-selector-container" }, hAsync("button", { class: "column-selector-btn", onClick: () => this.showColumnMenu = !this.showColumnMenu }, hAsync("dropi-icon", { name: "list-table", iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-500" })), this.showColumnMenu && (hAsync("div", { class: "column-selector-menu" }, this.parsedColumns.map(col => (hAsync("div", { class: "column-selector-option", onClick: () => {
                 const next = new Set(this.hiddenColumns);
                 if (next.has(col.key))
@@ -11397,15 +11528,15 @@ class DropiTable {
                 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, onOnChange: (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), onOnChange: () => 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 > 3 ? (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.actionClicked.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.actionClicked.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", { 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) => {
                 this.pageSize = Number(e.target.value);
                 this.currentPage = 1;
                 this.dropiPageSizeChange.emit(this.pageSize);
-                this.onSizeChange.emit(this.pageSize);
-            } }, this.parsedPageSizes.map(s => (hAsync("option", { value: s, selected: this.pageSize === s }, s))))), hAsync("dropi-paginator", { totalPages: this.totalPages, currentPage: this.currentPage, onPageChange: (e) => {
+                this.dropiSizeChangeAngular.emit(this.pageSize);
+            } }, this.parsedPageSizes.map(s => (hAsync("option", { value: s, selected: this.pageSize === s }, s))))), hAsync("dropi-paginator", { totalPages: this.totalPages, currentPage: this.currentPage, onDropiPageChange: (e) => {
                 this.currentPage = e.detail;
                 this.dropiPageChange.emit(e.detail);
-                this.onPageChange.emit(e.detail);
+                this.dropiPageChangeAngular.emit(e.detail);
             } })))));
     }
     static get watchers() { return {
@@ -11489,7 +11620,7 @@ const dropiTabsCss = () => `:host{display:block;width:100%}*,*::before,*::after{
 class DropiTabs {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.onIndexChanged = createEvent(this, "onIndexChanged", 7);
+        this.dropiIndexChange = createEvent(this, "dropiIndexChange");
     }
     /** Array of TabItem or JSON string (matches Angular 'configuration') */
     configuration = [];
@@ -11500,7 +11631,7 @@ class DropiTabs {
     /** Stop tab action programmatically */
     stopAction = false;
     /** Emitted on tab click. e.detail = TabItem */
-    onIndexChanged;
+    dropiIndexChange;
     parsedTabs = [];
     tabsChanged(val) {
         this.parsedTabs = typeof val === 'string' ? JSON.parse(val) : (val ?? []);
@@ -11512,10 +11643,10 @@ class DropiTabs {
         if (tab.disabled || this.stopAction)
             return;
         this.activeTab = tab.id;
-        this.onIndexChanged.emit(tab);
+        this.dropiIndexChange.emit(tab);
     }
     render() {
-        return (hAsync("div", { key: '337040015b29581ebb15ac347bb62220ed0a2d4d', class: "tabs-container", role: "tablist" }, this.parsedTabs.map(tab => {
+        return (hAsync("div", { key: '5e8facb7611d02c9b7fad97f676a50ce419c6852', class: "tabs-container", role: "tablist" }, this.parsedTabs.map(tab => {
             const isActive = tab.id === this.activeTab;
             return (hAsync("div", { role: "tab", "aria-selected": String(isActive), class: { 'tab-item': true, 'tab-item--active': isActive && !tab.disabled, 'tab-item--disabled': !!tab.disabled }, onClick: () => this.handleClick(tab) }, hAsync("span", { class: "tab-label-row" }, hAsync("span", { class: "tab-label" }, tab.label), tab.counter !== undefined && tab.counter !== null && (hAsync("span", { class: { 'tab-counter': true, 'tab-counter--active': isActive } }, tab.counter))), this.showIcon && (tab.completed
                 ? hAsync("dropi-icon", { name: "Check-circle", iconWidth: "12px", iconHeight: "12px", color: "Success-Success-500" })
@@ -11544,7 +11675,7 @@ class DropiTabs {
     }; }
 }
 
-const dropiTagCss = () => `:host{display:inline-flex}*,*::before,*::after{box-sizing:border-box}.container-chips{display:inline-block}.tags{display:inline-flex;padding:4px 8px;justify-content:center;align-items:center;gap:4px;border-radius:var(--Border-5, 9999px);overflow:hidden;text-align:center;text-overflow:ellipsis;font-size:var(--font-size-s, 12px);font-weight:var(--font-weight-medium, 500);line-height:var(--Size-5, 24px);animation:fade-in 200ms ease-out}.tags.icon-only{gap:0}.file-icon{display:flex}@keyframes fade-in{from{opacity:0;transform:scale(0.8)}to{opacity:1;transform:scale(1)}}`;
+const dropiTagCss = () => `:host{display:inline-flex}*,*::before,*::after{box-sizing:border-box}.container-chips{display:flex;align-items:center;justify-content:center}.tags{display:inline-flex;padding:4px 8px;justify-content:center;align-items:center;gap:4px;border-radius:var(--Border-5, 9999px);overflow:hidden;text-align:center;text-overflow:ellipsis;font-size:var(--font-size-xs, 12px);font-weight:var(--font-weight-medium, 500);line-height:var(--lineheight-large, 150%);animation:fade-in 200ms ease-out}.tags.dot-variant,.tags.text-variant{padding:0;gap:8px;background-color:transparent !important;line-height:normal}.dot-indicator{width:10px;height:10px;border-radius:50%;flex-shrink:0}@keyframes fade-in{from{opacity:0;transform:scale(0.8)}to{opacity:1;transform:scale(1)}}`;
 
 /**
  * @component dropi-tag
@@ -11554,6 +11685,8 @@ class DropiTag {
     constructor(hostRef) {
         registerInstance(this, hostRef);
     }
+    /** tag (default) | dot (status dot + text) | text (colored text only) */
+    variant = 'tag';
     /** primary (filled) | secondary (soft) */
     type = 'primary';
     /** Color state of the tag */
@@ -11582,11 +11715,25 @@ class DropiTag {
     }
     get textColor() {
         const base = this.colorMap[this.state];
+        if (this.variant === 'text')
+            return this.dotColor;
+        if (this.variant === 'dot' || this.showIcon) {
+            return 'var(--Gray-Gray-500)';
+        }
         if (this.type === 'primary')
             return `var(--Neutral-White)`;
         const shade = this.state === 'default' ? '-500' : '-700';
         return `var(--${base}${shade})`;
     }
+    get dotColor() {
+        const base = this.colorMap[this.state];
+        return `var(--${base}-500)`;
+    }
+    get fontWeight() {
+        if (this.type === 'secondary' && !this.showIcon)
+            return '300';
+        return '500';
+    }
     get iconColor() {
         if (this.type === 'primary')
             return 'Neutral-White';
@@ -11598,7 +11745,16 @@ class DropiTag {
         return typeof this.text === 'string' && this.text.trim().length > 0;
     }
     render() {
-        return (hAsync("div", { key: '1736efc48b3ccaf5f3ca85ad29622f42b4fb3c8d', class: "container-chips" }, hAsync("div", { key: '96c2b0e9d22881ca71c58488dcd622a1eef1a120', class: { tags: true, 'icon-only': this.showIcon && !this.hasContent }, style: { backgroundColor: this.bgColor, color: this.textColor } }, this.showIcon && this.icon && (hAsync("dropi-icon", { key: '4c94cf3fcabd31b6b50fc711815472f8b12e43d9', class: "file-icon", name: this.icon, iconWidth: "16px", iconHeight: "16px", color: this.iconColor })), this.hasContent && hAsync("span", { key: '26f06b85d085e58aa854533a9fd238e70957212b' }, this.text))));
+        return (hAsync("div", { key: '6a50111c0057b7ef3380dde9f639e9409b7fbea9', class: "container-chips" }, hAsync("div", { key: 'f2f78c3682aa2e8bef5f3f1b43a1729cae8ae293', class: {
+                tags: true,
+                'icon-only': this.showIcon && !this.hasContent,
+                'dot-variant': this.variant === 'dot',
+                'text-variant': this.variant === 'text'
+            }, style: {
+                backgroundColor: (this.variant === 'dot' || this.variant === 'text') ? 'transparent' : this.bgColor,
+                color: this.textColor,
+                fontWeight: this.fontWeight
+            } }, this.variant === 'dot' && (hAsync("div", { key: '5364569230575b79b1160e06cc29046220bdf198', class: "dot-indicator", style: { backgroundColor: this.dotColor } })), this.showIcon && this.icon && (hAsync("dropi-icon", { key: '8ea74f9ad58e7892405e3e748289b71456945de6', class: "file-icon", name: this.icon, iconWidth: "16px", iconHeight: "16px", color: this.variant === 'dot' ? 'Gray-Gray-500' : this.iconColor })), this.hasContent && hAsync("span", { key: '99409549735fd48cf0a40e411f1f236716e53939' }, this.text))));
     }
     static get watchers() { return {
         "type": [{
@@ -11606,6 +11762,9 @@ class DropiTag {
             }],
         "state": [{
                 "propsChanged": 0
+            }],
+        "variant": [{
+                "propsChanged": 0
             }]
     }; }
     static get style() { return dropiTagCss(); }
@@ -11613,6 +11772,7 @@ class DropiTag {
         "$flags$": 521,
         "$tagName$": "dropi-tag",
         "$members$": {
+            "variant": [513],
             "type": [513],
             "state": [513],
             "showIcon": [4, "show-icon"],
@@ -11621,7 +11781,7 @@ class DropiTag {
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
-        "$attrsToReflect$": [["type", "type"], ["state", "state"], ["icon", "icon"], ["text", "text"]]
+        "$attrsToReflect$": [["variant", "variant"], ["type", "type"], ["state", "state"], ["icon", "icon"], ["text", "text"]]
     }; }
 }
 
@@ -11638,7 +11798,7 @@ class DropiTagTypeProduct {
     /** Label text. Default: VARIABLE */
     label = 'VARIABLE';
     render() {
-        return hAsync("div", { key: 'ae1cd50cd3e82180704ae4f5406b4dc13ffbd12c', class: "type-variation" }, this.label);
+        return hAsync("div", { key: '6d27b4fc40c66e6bfd8400e4727aa9a9c2e8dc8c', class: "type-variation" }, this.label);
     }
     static get style() { return dropiTagTypeProductCss(); }
     static get cmpMeta() { return {
@@ -11663,10 +11823,10 @@ const dropiTextAreaCss = () => `:host{display:flex;flex-direction:column;width:1
 class DropiTextArea {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.dropiInput = createEvent(this, "dropiInput", 7);
-        this.dropiChange = createEvent(this, "dropiChange", 7);
-        this.dropiFocus = createEvent(this, "dropiFocus", 7);
-        this.dropiBlur = createEvent(this, "dropiBlur", 7);
+        this.dropiInput = createEvent(this, "dropiInput");
+        this.dropiChange = createEvent(this, "dropiChange");
+        this.dropiFocus = createEvent(this, "dropiFocus");
+        this.dropiBlur = createEvent(this, "dropiBlur");
         if (hostRef.$hostElement$["s-ei"]) {
             this.internals = hostRef.$hostElement$["s-ei"];
         }
@@ -11768,12 +11928,12 @@ class DropiTextArea {
     render() {
         const showAsterisk = this.required && this.showObligatoryAsterisk && !this.disabled;
         const showHelper = this.textHelper || this.isInvalid;
-        return (hAsync("div", { key: 'd2333346006f94a5582d49cb2f34237b8b97d039', class: "textarea-wrapper" }, this.label && (hAsync("label", { key: '0963e3d312bec5a96b4b3f8387c07ecfd97d6906', htmlFor: this.resolvedId, style: { color: this.disabled ? 'var(--Gray-Gray-400)' : 'var(--Gray-Gray-600)' } }, this.label, showAsterisk && hAsync("span", { key: '1e9bfecb2669fe2c6cd8b74a153fe21bbf8053b9', class: "asterisk" }, " *"))), hAsync("div", { key: '6ac5236d0cb7ec4322339048eb364b7c41bfea5e', class: "textarea-container" }, hAsync("textarea", { key: '94a18a7af80592659237d54e5897fcbd8b4aa47c', id: this.resolvedId, class: {
+        return (hAsync("div", { key: 'cd317dd0e813d6ce6ae659b56ddac00fa822e68e', class: "textarea-wrapper" }, this.label && (hAsync("label", { key: '220344751b55843a6d1ee3a8188b53e8d0fc5d34', htmlFor: this.resolvedId, style: { color: this.disabled ? 'var(--Gray-Gray-400)' : 'var(--Gray-Gray-600)' } }, this.label, showAsterisk && hAsync("span", { key: '3ddb9f3adac61fa8990f81e16ae6334de8552849', class: "asterisk" }, " *"))), hAsync("div", { key: '1a6d603bd7cfe7e6b37fd20c4dad6c7bc2bf0278', class: "textarea-container" }, hAsync("textarea", { key: '3eb838fece4e03cc68be9e01eeb1e02709a926f9', 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: 'e3271eeea7e85a64454c344986e36c85197f3782', class: "char-counter" }, this.charCount, "/", this.maxLength))), showHelper && (hAsync("div", { key: 'c4b83072b96e56b45b6afc8209f4d124cb6d6bf3', class: "form-control-helper" }, this.isInvalid && (hAsync("dropi-icon", { key: '07a2884a516118f3169a0427701a2271d24f2bcc', name: "Warning-circle", iconWidth: "12px", iconHeight: "12px", color: "Error-Error-500" })), hAsync("span", { key: 'a518a81fdba8df18083ef92a1dbc9936d3fcc17d', 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: '49dfd2cb7fe373769a945c405e58e7716e9489f2', class: "char-counter" }, this.charCount, "/", this.maxLength))), showHelper && (hAsync("div", { key: 'e1388e815c35baab42466029ae17914da28c9294', class: "form-control-helper" }, this.isInvalid && (hAsync("dropi-icon", { key: '39aebce7cca327e9c535ce918d053eb5f106f734', name: "Warning-circle", iconWidth: "12px", iconHeight: "12px", color: "Error-Error-500" })), hAsync("span", { key: 'ae255ca0db1e35e0069ef8b68fa901bced14ba8a', 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 {
@@ -11837,7 +11997,7 @@ class DropiTimeLine {
     }
     render() {
         const steps = this.parsedSteps;
-        return (hAsync("div", { key: '0b43d3e673cda6f31476abcbc55ef2b6b9dbd7ac', class: "timeline" }, steps.map((step, i) => {
+        return (hAsync("div", { key: '22a2f8ff7a33e892096c3aaf381e23b110ec6b0a', class: "timeline" }, steps.map((step, i) => {
             const isLast = i === steps.length - 1;
             return (hAsync("div", { class: { 'tl-step': true, [`tl-step--${step.status}`]: true }, key: step.id || i }, hAsync("div", { class: "tl-step__marker" }, hAsync("div", { class: "tl-step__icon" }, step.icon ? (hAsync("dropi-icon", { name: step.icon, iconWidth: "16px", iconHeight: "16px", color: step.status === 'done' ? 'Neutral-White' : step.status === 'active' ? 'Primary-Primary-500' : 'Gray-Gray-400' })) : (hAsync("span", { class: "tl-step__dot" }))), !isLast && hAsync("div", { class: "tl-step__line" })), hAsync("div", { class: "tl-step__content" }, hAsync("span", { class: "tl-step__label" }, step.label), step.subtitle && hAsync("span", { class: "tl-step__subtitle" }, step.subtitle))));
         })));
@@ -11909,7 +12069,7 @@ class DropiToast {
         return `<lottie-player src="${this.lottieMap[severity]}" background="transparent" speed="1" loop autoplay></lottie-player>`;
     }
     render() {
-        return (hAsync("div", { key: '0ad8903921fd1bd773d206029bcc4e12e8b21349', class: `toast-container toast-container--${this.position}` }, (this.items ?? []).map(item => (hAsync("div", { key: item.msg.id, class: { 'toast-wrapper': true, 'toast-wrapper--leaving': item.leaving } }, hAsync("div", { class: `toast toast--${item.msg.severity}` }, hAsync("div", { class: "toast-content" }, hAsync("div", { class: "lottie-img" }, hAsync("div", { class: "lottie-player-container", innerHTML: this.getLottieHtml(item.msg.severity) })), hAsync("div", { class: "info-container" }, hAsync("p", { class: "title" }, item.msg.summary), item.msg.detail && hAsync("p", { class: "description" }, item.msg.detail))), item.msg.closable && (hAsync("button", { class: "toast-close", onClick: () => this.remove(item.msg.id) }, hAsync("dropi-icon", { name: "Close-small", iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-400" })))))))));
+        return (hAsync("div", { key: '962972e53e84a968b538feb28c2588f9051276ff', class: `toast-container toast-container--${this.position}` }, (this.items ?? []).map(item => (hAsync("div", { key: item.msg.id, class: { 'toast-wrapper': true, 'toast-wrapper--leaving': item.leaving } }, hAsync("div", { class: `toast toast--${item.msg.severity}` }, hAsync("div", { class: "toast-content" }, hAsync("div", { class: "lottie-img" }, hAsync("div", { class: "lottie-player-container", innerHTML: this.getLottieHtml(item.msg.severity) })), hAsync("div", { class: "info-container" }, hAsync("p", { class: "title" }, item.msg.summary), item.msg.detail && hAsync("p", { class: "description" }, item.msg.detail))), item.msg.closable && (hAsync("button", { class: "toast-close", onClick: () => this.remove(item.msg.id) }, hAsync("dropi-icon", { name: "Close-small", iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-400" })))))))));
     }
     static get style() { return dropiToastCss(); }
     static get cmpMeta() { return {
@@ -11943,7 +12103,7 @@ class DropiTooltip {
     /** Whether the tooltip has an outline style (matches Angular `outlined`) */
     outlined = false;
     render() {
-        return (hAsync("div", { key: '0b14943b628c231fbb530620e7829f70e6099c7a', class: { 'tooltip-simple': true, 'tooltip-simple--outlined': this.outlined } }, hAsync("slot", { key: 'bf0245c6fab0ba938834d2d3e84ccaa9cb14f5c8' }), this.text && (hAsync("div", { key: 'e1e33acf8628f79b36c5cc66c7076a03ce8167f7', class: "tooltip-simple-bubble" }, this.text))));
+        return (hAsync("div", { key: '1c580849e5fdfc99ecfedc7c14508dfd50b789c9', class: { 'tooltip-simple': true, 'tooltip-simple--outlined': this.outlined } }, hAsync("slot", { key: '8881e587966e67408a725e36a5a45828755e10a6' }), this.text && (hAsync("div", { key: 'f4f1c4a1d47e3324fe4d9af25d46342c4c650a0f', class: "tooltip-simple-bubble" }, this.text))));
     }
     static get style() { return dropiTooltipCss$1(); }
     static get cmpMeta() { return {
@@ -12084,12 +12244,12 @@ class DropiTooltipV2 {
         const bubbleStyle = { maxWidth: this.maxWidth };
         if (this.minWidth)
             bubbleStyle.minWidth = this.minWidth;
-        return (hAsync("div", { key: '85f49bcb2af567a8fb70cd92afab893a2e0bf567', class: "tooltip-wrapper", onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onClick: this.handleClick, onFocusin: this.handleFocusin, onFocusout: this.handleFocusout }, this.showIcon && (hAsync("dropi-icon", { key: '0ec2770a45d95e2dc655886d086f7f44c12fdda5', name: this.iconName, iconWidth: `${this.iconSize}px`, iconHeight: `${this.iconSize}px`, color: this.iconColor })), hAsync("slot", { key: 'caeff259dfaecdd7757d85bee3e93b15d8b53173' }), this.displayContent && (hAsync("div", { key: 'e1be3f25c37b978b79db639a245d1030e9de2d59', class: {
+        return (hAsync("div", { key: 'e2ce31df52e00568920e754904b1f5910ff4c8ba', class: "tooltip-wrapper", onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onClick: this.handleClick, onFocusin: this.handleFocusin, onFocusout: this.handleFocusout }, this.showIcon && (hAsync("dropi-icon", { key: 'aa3213451bcfb60561043b0c3854bb20c3a4703a', name: this.iconName, iconWidth: `${this.iconSize}px`, iconHeight: `${this.iconSize}px`, color: this.iconColor })), hAsync("slot", { key: '5ce4929e6f96d4c605d149a970aba1746e82078a' }), this.displayContent && (hAsync("div", { key: '66a1193abf25ce4161ec35f1ca0c344ec418cce8', class: {
                 'tooltip-bubble': true,
                 [`tooltip-bubble--${this.position}`]: true,
                 [`tooltip-bubble--arrow-${this.arrowPosition}`]: true,
                 'tooltip-bubble--visible': this.visible,
-            }, style: bubbleStyle, role: "tooltip" }, this.showX && (hAsync("button", { key: 'ba9f719b7066bb953a45b60f03fce20383c2eac5', class: "tooltip-close", onClick: this.handleClose, "aria-label": "Cerrar" }, hAsync("dropi-icon", { key: '8660e8130e643393c9cd70846247ccae8e3ebf24', name: "Close-small", iconWidth: "12px", iconHeight: "12px", color: "Gray-Gray-500" }))), this.title && !this.text && hAsync("strong", { key: '2d2a39d2d2a3993b62901497660a31193bcece12', class: "tooltip-title" }, this.title), this.label && !this.text && hAsync("span", { key: 'b34e2e997629c5700b64a6ae527b71c44e8939f4', class: "tooltip-label" }, this.label), this.text && hAsync("span", { key: '4cd22e60cce211b96cf8441a33dcd7afe5b88e40' }, this.text), hAsync("span", { key: 'deb83c9f7c1a9cfbb3f68ec087cae81d0f64a56b', class: `tooltip-arrow tooltip-arrow--${this.position}` })))));
+            }, style: bubbleStyle, role: "tooltip" }, this.showX && (hAsync("button", { key: '168741ebb1986f7235aee5be58695ae7cfacfe7b', class: "tooltip-close", onClick: this.handleClose, "aria-label": "Cerrar" }, hAsync("dropi-icon", { key: 'c9154dada59cced1056f24689591f0fead22328f', name: "Close-small", iconWidth: "12px", iconHeight: "12px", color: "Gray-Gray-500" }))), this.title && !this.text && hAsync("strong", { key: 'cd432eb19d7616f50d27613b55c191d59f70732e', class: "tooltip-title" }, this.title), this.label && !this.text && hAsync("span", { key: 'c443cab1372947d0219a7384f491184fb1a7c5b3', class: "tooltip-label" }, this.label), this.text && hAsync("span", { key: 'ea5dafb67ec9533052a66cf045b288cbefdf9d69' }, this.text), hAsync("span", { key: '977257d29af4688c8a264685a1687c048faac9e5', class: `tooltip-arrow tooltip-arrow--${this.position}` })))));
     }
     static get style() { return dropiTooltipCss(); }
     static get cmpMeta() { return {
@@ -12128,7 +12288,7 @@ const dropiVerticalStepsCss = () => `:host{display:block}*,*::before,*::after{bo
 class DropiVerticalSteps {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.stepClick = createEvent(this, "stepClick", 7);
+        this.stepClick = createEvent(this, "stepClick");
     }
     /** Array of steps. Pass as JSON string or array */
     steps = [];
@@ -12163,7 +12323,7 @@ class DropiVerticalSteps {
     }
     render() {
         const steps = this.parsedSteps;
-        return (hAsync("div", { key: 'c1ffd563da957d398f064ee0423f50f21d7e45b6', class: "vertical-steps" }, steps.map((step, i) => {
+        return (hAsync("div", { key: '9b0e19a21eaa78b51d82994747604623f9431d56', class: "vertical-steps" }, steps.map((step, i) => {
             const state = this.resolveState(i, step);
             const isLast = i === steps.length - 1;
             const isClickable = this.clickable && state === 'completed';
@@ -12216,7 +12376,7 @@ class DropiYoutubeLazyVideo {
         return `https://www.youtube.com/embed/${this.videoId}?autoplay=1&rel=0&modestbranding=1`;
     }
     render() {
-        return (hAsync("div", { key: '0732bc87e7be10e422e80751a17527132301eb99', class: `video-wrapper${this.isPlaying ? ' playing' : ''}` }, !this.isPlaying && (hAsync("div", { key: '540c46b66da3f67ec45614e0891827b7cc0be4e5', class: "thumbnail", onClick: () => { this.isPlaying = true; } }, hAsync("img", { key: '843241c72688ca88ccd5d9391b542501575ea476', src: this.thumbnail, alt: `Video thumbnail ${this.videoId}` }), hAsync("button", { key: 'b068f79fb6b2140e1419e9d72a24f6e66eaab69d', class: "play-button", "aria-label": "Reproducir video" }, hAsync("dropi-icon", { key: 'b3b6d8b99583fd0a3c2c0d766beeda2459b8b13a', name: "Play", iconWidth: "17px", iconHeight: "21px", color: "Neutral-White" })))), this.isPlaying && (hAsync("iframe", { key: '42172a0c7bb386da9123b411af4ab5ebeb9e205c', src: this.videoUrl, title: this.videoTitle, frameborder: "0", allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture", allowFullScreen: true, loading: "lazy" }))));
+        return (hAsync("div", { key: 'c3fadb91dcf1c32964ed0f0cb847ab3d874f2d7a', class: `video-wrapper${this.isPlaying ? ' playing' : ''}` }, !this.isPlaying && (hAsync("div", { key: '7bc533e24d3221d8c4dd763e629ec836642d504f', class: "thumbnail", onClick: () => { this.isPlaying = true; } }, hAsync("img", { key: '6e47aefd8e8fab4ecf8b6a7160bc5557ecace088', src: this.thumbnail, alt: `Video thumbnail ${this.videoId}` }), hAsync("button", { key: '1acb93790a95117c78d5855807f24dac76b98008', class: "play-button", "aria-label": "Reproducir video" }, hAsync("dropi-icon", { key: '09974fac159a0c88b160c8044f88e1c3dfab79c0', name: "Play", iconWidth: "17px", iconHeight: "21px", color: "Neutral-White" })))), this.isPlaying && (hAsync("iframe", { key: '7650e6f8f8591cc1b24e0958e0924e5eff118ad9', src: this.videoUrl, title: this.videoTitle, frameborder: "0", allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture", allowFullScreen: true, loading: "lazy" }))));
     }
     static get style() { return dropiYoutubeLazyVideoCss(); }
     static get cmpMeta() { return {
@@ -12279,6 +12439,7 @@ registerComponents([
   DropiOtpSendCode,
   DropiPaginator,
   DropiPhoneInput,
+  DropiProgressBar,
   DropiRadioButton,
   DropiRadioSelectionList,
   DropiReadMore,