@dropi/ui 0.1.41 → 0.1.42

package/dist/collection/collection-manifest.json

@@ -58,6 +58,7 @@
     "components/dropi-otp-send-code/dropi-otp-send-code.js",
     "components/dropi-paginator/dropi-paginator.js",
     "components/dropi-phone-input/dropi-phone-input.js",
+    "components/dropi-progress-bar/dropi-progress-bar.js",
     "components/dropi-radio-button/dropi-radio-button.js",
     "components/dropi-read-more/dropi-read-more.js",
     "components/dropi-select/dropi-select.js",

package/dist/collection/components/dropi-accordion/dropi-accordion-item.js

@@ -40,7 +40,7 @@ export class DropiAccordionItem {
         setTimeout(() => this.updateHeight(this.open), 0);
     }
     render() {
-        return (h("div", { key: '43f4ce6c38338a90a3b866a449f14e48b478e738', class: { 'accordion-item': true, 'accordion-item--open': this.open, 'accordion-item--disabled': this.disabled } }, h("button", { key: 'b5150a903bf75b82ffea9707e5906dc17f0bcd1c', class: "accordion-header", onClick: () => this.handleToggle(), "aria-expanded": String(this.open), disabled: this.disabled }, h("span", { key: '53f5c6a4e5a9d02412145395112368ddea9af746', class: "accordion-header-left" }, this.preIcon && h("dropi-icon", { key: '28acd44875849665dfc58a5b3040a7ef78e92b6e', name: this.preIcon, iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-600" }), h("span", { key: 'c19a8f8b33ce36c1903fc428400b2e1bf9b20971', class: "accordion-title" }, this.sectionTitle)), h("span", { key: '7163175dca488646dd13de60978cd623cfc61d12', class: { 'accordion-chevron': true, 'accordion-chevron--open': this.open } }, h("dropi-icon", { key: '10c1ea131aaaa8d0fe6542b9d8effe8b3319e3c8', name: "Dropdown-down", iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-500" }))), h("div", { key: '2d514054e305d92ac97bf661f85d795ff4cc04a9', class: "accordion-body", style: { maxHeight: this.contentHeight }, ref: (el) => this.contentRef = el }, h("div", { key: '3ff920a3cd55f22af681b90f220ce05d15db09e1', class: "accordion-content" }, h("slot", { key: 'f703b47dc51acb41b7d455c991a08c8286d53fc2' })))));
+        return (h("div", { key: '98de1df9b82f0e4e5e72702b7eaca12c0ed92586', class: { 'accordion-item': true, 'accordion-item--open': this.open, 'accordion-item--disabled': this.disabled } }, h("button", { key: 'bd5c3e6ea29feb33e5280908c98929369dc7377e', class: "accordion-header", onClick: () => this.handleToggle(), "aria-expanded": String(this.open), disabled: this.disabled }, h("span", { key: 'ced161eb1187d50b7eb2002081cd3fc008c9a16f', class: "accordion-header-left" }, this.preIcon && h("dropi-icon", { key: '09a157623f0978153b57e85a79d7beeca3faf9ab', name: this.preIcon, iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-600" }), h("span", { key: '649617f263370d1314e3145c07a3a29ce5c807b5', class: "accordion-title" }, this.sectionTitle)), h("span", { key: 'd99e3933a40ffa4b1da8091a8b6d767011f1bf6f', class: { 'accordion-chevron': true, 'accordion-chevron--open': this.open } }, h("dropi-icon", { key: '3d12ae988429fea2612c0c32c12cd81a486ad255', name: "Dropdown-down", iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-500" }))), h("div", { key: 'cedff4803c6fa83ae9dc5cb3ce68f48150cdef67', class: "accordion-body", style: { maxHeight: this.contentHeight }, ref: (el) => this.contentRef = el }, h("div", { key: 'a37dd42bf39cf08479d847286860e78a1d80a233', class: "accordion-content" }, h("slot", { key: 'd797eac747716be1af2a6addbefe583be4a816b1' })))));
     }
     static get is() { return "dropi-accordion-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dropi-accordion/dropi-accordion.js

@@ -7,7 +7,7 @@ export class DropiAccordion {
     /** Allows multiple sections to be open at the same time. If false, only one section can be open. */
     multiple = false;
     render() {
-        return (h("div", { key: '15575b05adec26235378bb459cdf158bdabe2852', class: "accordion-container" }, h("slot", { key: 'e5411aee85b69e50c777657b0cb2aa7d04d09fa4' })));
+        return (h("div", { key: 'c8c70f9c2210e1bc6de7d0933f082a0d1c008837', class: "accordion-container" }, h("slot", { key: '9fe1055ed6f5a2fc5c3e8dde47b694ea0acdbcb9' })));
     }
     static get is() { return "dropi-accordion"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dropi-alert/dropi-alert.js

@@ -1,8 +1,8 @@
 import { h } from "@stencil/core";
 const STATE_ICONS = {
     success: 'Check-circle',
-    error: 'Warning-circle',
-    warning: 'Warning-triangle',
+    error: 'Cross-circle',
+    warning: 'Warning-circle',
     info: 'Info',
 };
 const STATE_COLORS = {
@@ -30,9 +30,9 @@ export 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) */
@@ -42,15 +42,15 @@ export 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 (h("div", { class: { 'alert': true, [`alert--${this.type}`]: true, [`alert--${this.state}`]: true } }, this.type !== 'flag' && (h("div", { class: "alert__icon" }, h("dropi-icon", { name: STATE_ICONS[this.state], iconWidth: "18px", iconHeight: "18px", color: STATE_COLORS[this.state] }))), h("div", { class: "alert__body" }, h("span", { class: "alert__message" }, this.message), this.anchorText && (h("a", { class: "alert__link", href: this.anchorUrl || this.linkUrl || '#', onClick: (e) => { e.preventDefault(); this.onClickLink.emit(); } }, this.anchorText))), h("div", { class: "alert__actions" }, this.showButton && this.buttonText && this.type !== 'flag' && (h("button", { class: "alert__btn", onClick: () => this.onButtonClick.emit() }, this.buttonText)), this.dismissable && (h("button", { class: "alert__close", onClick: () => { this.showAlert = false; this.onClose.emit(); }, "aria-label": "Cerrar" }, h("dropi-icon", { name: "Close-small", iconWidth: "18px", iconHeight: "18px", color: "Gray-Gray-500" }))))));
+        return (h("div", { class: { 'alert': true, [`alert--${this.type}`]: true, [`alert--${this.state}`]: true } }, this.type !== 'flag' && (h("div", { class: "alert__icon" }, h("dropi-icon", { name: STATE_ICONS[this.state], iconWidth: "18px", iconHeight: "18px", color: STATE_COLORS[this.state] }))), h("div", { class: "alert__body" }, h("span", { class: "alert__message", innerHTML: this.message }), this.clickedText && (h("a", { class: "alert__link", href: "#", onClick: (e) => { e.preventDefault(); this.dropiLinkClick.emit(); } }, this.clickedText)), (this.anchorText || this.textLink) && (h("a", { class: "alert__link", href: this.anchorUrl || this.linkUrl || '#', onClick: (e) => { e.preventDefault(); this.dropiLinkClick.emit(); } }, this.anchorText || this.textLink))), h("div", { class: "alert__actions" }, this.showButton && this.buttonText && this.type !== 'flag' && (h("button", { class: "alert__btn", onClick: () => this.dropiButtonClick.emit() }, this.buttonText)), this.dismissable && (h("button", { class: "alert__close", onClick: () => { this.showAlert = false; this.dropiClose.emit(); }, "aria-label": "Cerrar" }, h("dropi-icon", { name: "Close-small", iconWidth: "18px", iconHeight: "18px", color: "Gray-Gray-500" }))))));
     }
     static get is() { return "dropi-alert"; }
     static get encapsulation() { return "shadow"; }
@@ -216,7 +216,7 @@ export class DropiAlert {
                 "setter": false,
                 "reflect": false,
                 "attribute": "anchor-text",
-                "defaultValue": "'none'"
+                "defaultValue": "''"
             },
             "anchorUrl": {
                 "type": "string",
@@ -236,7 +236,7 @@ export class DropiAlert {
                 "setter": false,
                 "reflect": false,
                 "attribute": "anchor-url",
-                "defaultValue": "'none'"
+                "defaultValue": "''"
             },
             "showAlert": {
                 "type": "boolean",
@@ -322,8 +322,8 @@ export class DropiAlert {
     }
     static get events() {
         return [{
-                "method": "onClose",
-                "name": "onClose",
+                "method": "dropiClose",
+                "name": "dropiClose",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -337,8 +337,8 @@ export class DropiAlert {
                     "references": {}
                 }
             }, {
-                "method": "onButtonClick",
-                "name": "onButtonClick",
+                "method": "dropiButtonClick",
+                "name": "dropiButtonClick",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -352,8 +352,8 @@ export class DropiAlert {
                     "references": {}
                 }
             }, {
-                "method": "onClickLink",
-                "name": "onClickLink",
+                "method": "dropiLinkClick",
+                "name": "dropiLinkClick",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,

package/dist/collection/components/dropi-alert-modal/dropi-alert-modal.js

@@ -38,6 +38,10 @@ export 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,
@@ -68,13 +72,13 @@ export 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',
@@ -93,26 +97,26 @@ export 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 (h("dropi-modal", { key: '8581cbc944d42889228cb21fa27bf4e8b3bf1e16', visible: this.visible, showHeader: this.closable, showCloseIcon: this.closable, dismissable: false, closeOnEscape: false, showFooter: false, size: "s", onOnHide: () => this.onModalHide() }, h("div", { key: '7208cbe742dab77bcee14150998aff5647fd41af', class: "body-alert" }, this.lottieMap[lottieKey] && (h("div", { key: '3b4d36963f8d6547556eee704823c8e34805b8d8', class: `lottie-img${isLottieLoading ? ' lottie-img--loading' : ''}` }, h("lottie-player", { key: lottieKey, src: this.lottieMap[lottieKey], background: "transparent", speed: "1", loop: true, autoplay: true }))), h("div", { key: 'dc52f3daec2eaf7ff9f1d51c90c67bcfaafe370f', class: "content-alert" }, h("h2", { key: '685df4cb76145cf6e965dd94e5f3fe60f828100c' }, this.loading ? this.loadingTitle : this.tittle), h("p", { key: 'f9e5b699816236148bc00c5046c6cc67eb86ae01' }, this.loading ? this.loadingMessage : this.message)), h("div", { key: '2e9280865cad761bea5cdd88b972734c11ab7737', class: "custom-content" }, h("slot", { key: '4fd36baa1455e7793a1e5291b52448707e3aa448' })), !this.loading && this.displayButtons && (h("div", { key: '451bd3d90ec780499d9956a8a57a0d1461406fa9', class: "actions" }, this.secondaryButton && h("dropi-button", { key: 'b60c30cc92cc080c01e1bf337a5e4b78f561be81', text: this.secondaryButton, severity: "secondary", onClick: () => this.handleSecondary(), fullWidth: true }), h("dropi-button", { key: '2b8696a02b253d289a1baef2116cffe436346717', text: this.primaryButton, severity: "primary", onClick: () => this.handlePrimary(), fullWidth: true }))))));
+        return (h("dropi-modal", { key: '322c59ea0a067a4c0cb28a5ffbe9cbc0c642eee6', visible: this.visible, showHeader: this.closable, showCloseIcon: this.closable, dismissable: false, closeOnEscape: false, showFooter: false, size: "s", onDropiHide: () => this.onModalHide() }, h("div", { key: '06530f3da45738d1ed75a4e8b5b8b0b80dfd2647', class: "body-alert" }, this.lottieMap[lottieKey] && (h("div", { key: '7a4ab4fbbdf3cbbacfa22f918d212b788f4392a4', class: `lottie-img${isLottieLoading ? ' lottie-img--loading' : ''}` }, h("lottie-player", { key: lottieKey, src: this.lottieMap[lottieKey], background: "transparent", speed: "1", loop: true, autoplay: true }))), h("div", { key: '0e72f42d10c59047e82df8b2842affd38ab60fc7', class: "content-alert" }, h("h2", { key: '8262de8fbcf5b87fbac34740d34d99d0b6ff921d' }, this.loading ? this.loadingTitle : this.tittle), h("p", { key: 'ca9c734e0b9686bff7e2616ae98224446ac0ca33' }, this.loading ? this.loadingMessage : this.message)), h("div", { key: '1b5edb3af1044cb0dd0b57a425517b1d824672be', class: "custom-content" }, h("slot", { key: '57f4a8acdbcf8a11445f7c8233355bb4ac46c9ab' })), !this.loading && this.displayButtons && (h("div", { key: '32580f42d98f628b4c1d1f300b5a3aaaa1be2486', class: "actions" }, this.secondaryButton && h("dropi-button", { key: 'dcf8707a7f4d8b80126a10022dd6de1c0ea44dc7', text: this.secondaryButton, severity: "secondary", onDropiClick: () => this.handleSecondary(), fullWidth: true }), h("dropi-button", { key: '3ed494fc7a83021174c4d006ae4327348d400e93', text: this.primaryButton, severity: "primary", onDropiClick: () => this.handlePrimary(), fullWidth: true }))))));
     }
     static get is() { return "dropi-alert-modal"; }
     static get originalStyleUrls() {
@@ -393,6 +397,26 @@ export class DropiAlertModal {
                 "attribute": "base-z-index",
                 "defaultValue": "0"
             },
+            "isWhiteLabel": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Use White Label (MB) illustration style instead of Lottie animation."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "is-white-label",
+                "defaultValue": "false"
+            },
             "params": {
                 "type": "any",
                 "mutable": false,
@@ -417,8 +441,8 @@ export class DropiAlertModal {
     }
     static get events() {
         return [{
-                "method": "primaryButtonEvent",
-                "name": "primaryButtonEvent",
+                "method": "dropiPrimaryClick",
+                "name": "dropiPrimaryClick",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -432,8 +456,8 @@ export class DropiAlertModal {
                     "references": {}
                 }
             }, {
-                "method": "secondaryButtonEvent",
-                "name": "secondaryButtonEvent",
+                "method": "dropiSecondaryClick",
+                "name": "dropiSecondaryClick",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -447,8 +471,8 @@ export class DropiAlertModal {
                     "references": {}
                 }
             }, {
-                "method": "modalOpenChange",
-                "name": "modalOpenChange",
+                "method": "dropiVisibleChange",
+                "name": "dropiVisibleChange",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -462,8 +486,8 @@ export class DropiAlertModal {
                     "references": {}
                 }
             }, {
-                "method": "onHide",
-                "name": "onHide",
+                "method": "dropiHide",
+                "name": "dropiHide",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,

package/dist/collection/components/dropi-badge-legacy/dropi-badge-legacy.js

@@ -14,7 +14,7 @@ export class DropiBadgeLegacy {
     count = 0;
     render() {
         const isCounter = this.type === 'counter';
-        return (h("div", { key: 'f3d7bf7be848acee4077acef4f8e2ab4cfd99d83', class: {
+        return (h("div", { key: '58bb5c6625539109f010cccdcaafc37ab6da38ba', class: {
                 'badge-legacy': true,
                 [`badge-legacy--${this.variant}`]: true,
                 [`badge-legacy--${this.type}`]: true

package/dist/collection/components/dropi-button/dropi-button.css

@@ -1,5 +1,6 @@
 :host {
   display: inline-block;
+  border: 0;
 }
 
 :host([full-width]) {
@@ -127,12 +128,14 @@
 
 .btn.tertiary.default,
 .btn.tertiary.legacy {
-  border: 1px solid var(--Gray-Gray-200, #c3c9d9);
+  border: none !important;
+  box-shadow: none !important;
   color: var(--Gray-Gray-500, #69738c);
 }
 .btn.tertiary.default:hover,
 .btn.tertiary.legacy:hover {
-  border-color: var(--Gray-Gray-400, #858ea6);
+  background: var(--Gray-Gray-50, #f5f6f8);
+  box-shadow: none !important;
   color: var(--Gray-Gray-600, #475066);
 }
 
@@ -158,7 +161,7 @@
 /* Disabled tertiary */
 .btn.tertiary.disabled.default,
 .btn.tertiary.disabled.legacy {
-  border: 1px solid var(--Gray-Gray-200, #c3c9d9);
+  border: none !important;
   color: var(--Gray-Gray-400, #858ea6);
 }
 .btn.tertiary.disabled.success { color: var(--Success-Success-300, #5bd1af); }

package/dist/collection/components/dropi-button/dropi-button.js

@@ -24,7 +24,7 @@ export class DropiButton {
     /** Button label */
     text = '';
     /** Emitted on click (not emitted when disabled or loading) */
-    onClick;
+    dropiClick;
     colorMap = {
         default: 'Primary-Primary-',
         success: 'Success-Success-',
@@ -56,7 +56,7 @@ export class DropiButton {
     }
     handleClick(e) {
         if (this.state !== 'disabled' && this.state !== 'loading') {
-            this.onClick.emit(e);
+            this.dropiClick.emit(e);
         }
     }
     renderLoadingSpinner() {
@@ -67,7 +67,7 @@ export 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 (h("button", { key: 'a8771ab61e78941d1bfd7b987a02dfe2e9d22a31', class: {
+        return (h("button", { key: 'eefda6c7ac5090173a545d67e72073dc410ff05c', class: {
                 btn: true,
                 'without-text': !hasText,
                 [this.severity ?? 'primary']: true,
@@ -75,7 +75,7 @@ export class DropiButton {
                 [this.size ?? 'normal']: true,
                 [this.state ?? 'default']: true,
                 'full-width': this.fullWidth,
-            }, disabled: isDisabled, onClick: (e) => this.handleClick(e) }, this.preIcon && (h("dropi-icon", { key: '374403bce1d33e39f3834d6e10dfec5ac7ca7e0c', name: this.preIcon, iconWidth: this.iconSize, iconHeight: this.iconSize, color: this.fontColor })), hasText && h("span", { key: '65d5e45f4df8df2795be3b6bf09c9576f8497664', class: "text" }, this.text), showPostIcon && (h("dropi-icon", { key: 'b3d1459260a3d7159ddf1193aa29672e8d8d3800', name: dropdownIcon, iconWidth: this.iconSize, iconHeight: this.iconSize, color: this.fontColor })), this.state === 'loading' && this.renderLoadingSpinner(), h("slot", { key: 'ae37b4195f35b02d70e166fcba27939f38d35326' })));
+            }, disabled: isDisabled, onClick: (e) => this.handleClick(e) }, this.preIcon && (h("dropi-icon", { key: '869ee8fc34dee93de0381a86db643c0fa9dc6918', name: this.preIcon, iconWidth: this.iconSize, iconHeight: this.iconSize, color: this.fontColor })), hasText && h("span", { key: '927ef142b4c549d01b087722e9f6759cff44e6b2', class: "text" }, this.text), showPostIcon && (h("dropi-icon", { key: 'cda1f5d0fa59a87abc1d3d73a87d4390f05f79eb', name: dropdownIcon, iconWidth: this.iconSize, iconHeight: this.iconSize, color: this.fontColor })), this.state === 'loading' && this.renderLoadingSpinner(), h("slot", { key: 'c83dd79efe5d858361815878192c0c554a9234ca' })));
     }
     static get is() { return "dropi-button"; }
     static get encapsulation() { return "shadow"; }
@@ -299,8 +299,8 @@ export class DropiButton {
     }
     static get events() {
         return [{
-                "method": "onClick",
-                "name": "onClick",
+                "method": "dropiClick",
+                "name": "dropiClick",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,

package/dist/collection/components/dropi-card-checkbox/dropi-card-checkbox.js

@@ -27,7 +27,7 @@ export class DropiCardCheckbox {
     /** Disables interaction */
     disabled = false;
     /** Emitted with the new checked state when clicked */
-    onChange;
+    dropiChange;
     get isChecked() {
         return this.state === 'checked';
     }
@@ -35,15 +35,15 @@ export class DropiCardCheckbox {
         if (this.disabled)
             return;
         this.state = this.isChecked ? 'default' : 'checked';
-        this.onChange.emit(this.isChecked);
+        this.dropiChange.emit(this.isChecked);
     }
     render() {
-        return (h("div", { key: '238a146e7500efbc01d83a8494ee577fbb600729', class: {
+        return (h("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() }, h("dropi-checkbox", { key: '405d834de33790be58fba7e50b0e579889f04394', checked: this.isChecked, disabled: this.disabled }), h("div", { key: '49659771de9ca8ee8c2fa9fbe828a1d94fbd3c9e', class: "container-text" }, h("div", { key: '7d39435ef56cd61605e9d9b69d6917e3ec8470fa', class: "title-check" }, this.title), this.description && h("div", { key: '00a7723401979d7a9d926ce939eb09430ddb7372', class: "description-text" }, this.description)), (this.extraInfo || this.extraInfoDescription) && (h("div", { key: '4d1c9e49f6e397f0433827960167ff88bcd669db', class: "extra-info" }, this.extraInfo && h("div", { key: 'b9da8514c2013cd6cab9cf6005dad8d3ae30b930' }, this.extraInfo), this.extraInfoDescription && h("h4", { key: 'ac2fcbc6359ea173911f181b2a145de59af10c9d' }, this.extraInfoDescription)))));
+            }, onClick: () => this.handleClick() }, h("dropi-checkbox", { key: '0c5c50811559c6472173fced2f04eee4626f118f', checked: this.isChecked, disabled: this.disabled }), h("div", { key: '1cb17bf8aea55a498d451922942b4fba6d99492c', class: "container-text" }, h("div", { key: '6e2eab2ae82c13cb4e7a654cc989530cee1122c6', class: "title-check" }, this.title), this.description && h("div", { key: '040e5d8f633975bf3eb806835aae8aa308b1d4f8', class: "description-text" }, this.description)), (this.extraInfo || this.extraInfoDescription) && (h("div", { key: 'a5c794b5f2fa249b309b2fb00a759aea5b9e0d6c', class: "extra-info" }, this.extraInfo && h("div", { key: '1587e1a0801312fa8e759af2a367b36f842e1354' }, this.extraInfo), this.extraInfoDescription && h("h4", { key: '930811071657dfbbeff7c2bdc4cd2c2776d38177' }, this.extraInfoDescription)))));
     }
     static get is() { return "dropi-card-checkbox"; }
     static get encapsulation() { return "shadow"; }
@@ -203,8 +203,8 @@ export class DropiCardCheckbox {
     }
     static get events() {
         return [{
-                "method": "onChange",
-                "name": "onChange",
+                "method": "dropiChange",
+                "name": "dropiChange",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,

package/dist/collection/components/dropi-card-product/dropi-card-product.js

@@ -29,9 +29,9 @@ export 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 */
@@ -52,17 +52,17 @@ export class DropiCardProduct {
         return 'var(--Success-Success-500, #0abb87)';
     }
     render() {
-        return (h("div", { key: '42990ea883dcd6cc72e1f62771f7b9554c36bdba', class: "dropi-card-product", onClick: () => this.onProductClick.emit() }, h("div", { key: '59295427ddc350ec3c70d7d1bd4803ffa6bf26b0', class: "product-image-container" }, h("div", { key: '9d10e18f2eadf16f0c0b1b7cb7860d08f2ca778f', class: "product-image" }, h("img", { key: '19f7af8eddcbea880d32ef30603d55bfe9337f17', src: this.image || '', alt: this.productName, onError: (e) => {
+        return (h("div", { key: '2fe4ce42e1c331a99fd1171c82e6e48bfb5dbff0', class: "dropi-card-product", onClick: () => this.dropiProductClick.emit() }, h("div", { key: '3f94077ee059e347f3ff4fff808a3a3f3a0ac827', class: "product-image-container" }, h("div", { key: '1d6e8181cc630ab03efc90e316c349dfe9765b46', class: "product-image" }, h("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 && (h("button", { key: 'a6e13eea7c211fd772fe5ee7c13c7d475d54986c', class: { 'favorite-button': true, 'favorite-active': this.isFavorite }, onClick: (e) => {
+            }, class: !this.image ? 'error-img' : '' }), this.showFavorite && (h("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" }, h("dropi-icon", { key: '35300a450b8fff37e7c469b5b8a1f39ebfb717dc', name: this.isFavorite ? 'Heart-solid' : 'Heart', iconWidth: "18px", iconHeight: "18px", color: this.isFavorite ? '#fff' : '#858ea6' }))))), h("div", { key: 'b6792c07dbcc37f636add6bd0f9bfbb88b28fc6b', class: "product-info" }, this.supplierCategory && (h("dropi-ilustration-icon", { key: 'f4074d38a1e7999ffde2b4906de21b91348b4a63', class: "supplier-insignia", type: "insignia", stateInsignia: this.supplierCategory, tagProduct: true })), h("div", { key: '7a085de7400576ba2595770268845916eecfa3cf', class: "product-header" }, this.category && (h("span", { key: 'c5002b0b82d8483e3ea88d884cdeaa015341e7ca', class: "category" }, this.category)), h("div", { key: '4c24e0f3dc3ea31764290e97a600beb411ce7b50', class: "stock-info" }, h("span", { key: '453b6b6ba34aa1c060052ec6a1aa4b6aeabe454b', class: "stock-label" }, "Stock:"), h("span", { key: '46733d6335c72a16411b27c1cae7dbb1e46a26cc', class: "stock-value", style: { color: this.getStockColor() } }, this.stock === 0 ? 'Agotado' : this.stock))), h("h3", { key: '69179b355604ffbf594f192c47ba8ac18964d1c8', class: "product-name" }, this.productName), this.supplier && (h("div", { key: 'b53d6667872f959cc5e48b365b42b5744c4c0ae8', class: "supplier-info" }, h("span", { key: 'e2cb385de94697533b0ac8f8832246dac955efb1', class: "supplier-label" }, "Proveedor:"), h("span", { key: '17e2d2ce7a5d6113fbef89a5c49ec183e189aeee', class: "supplier-name", onClick: (e) => { e.stopPropagation(); this.dropiSupplierClick.emit(); } }, this.supplier))), h("div", { key: 'eb146caf735601d1ed0f3ff0f81e234a9a768d04', class: "price-container" }, h("div", { key: '0516aaeb1f4d087b262b5692abfac9993c8b378a', class: "price-item" }, h("span", { key: '837eb19a5bb50dbd05d999a5c3fb0d642f2701b7', class: "price-label" }, "Precio proveedor"), h("span", { key: '4bdba27153a06e39d5449b61eed4707a90123336', class: "price-value" }, this.currency, " ", this.formatPrice(this.salePrice))), h("div", { key: '82040761c0b63df23fbc80d0e990d3a1c610d8eb', class: "price-item" }, h("span", { key: 'c93307dba668d60e22e6b7d9215abf289495935c', class: "price-label" }, "Precio sugerido"), h("span", { key: 'd9aca439201e07756e298b0be7d41aa9396cf67d', class: "price-value" }, this.currency, " ", this.formatPrice(this.suggestedPrice))))), h("div", { key: '79e9e143ddb87209a550069abe839b89ec703e22', class: "separator" }), this.showAddButton && (h("div", { key: 'b3261c8db5e3fd9c97f9894f6aea420495f0577b', class: { 'action-button': true, 'action-button--disabled': !this.inStock }, onClick: (e) => {
+                this.dropiFavoriteChange.emit(this.isFavorite);
+            }, "aria-label": "Favorito" }, h("dropi-icon", { key: 'c6d6c87dcb5ae0f9a0d416667a3d39c7e153b7a6', name: this.isFavorite ? 'Heart-solid' : 'Heart', iconWidth: "18px", iconHeight: "18px", color: this.isFavorite ? '#fff' : '#858ea6' }))))), h("div", { key: '66dbcb028acb35e9a43502e9ff9a00fd2ebf8bf2', class: "product-info" }, this.supplierCategory && (h("dropi-ilustration-icon", { key: 'fd3d94e953a6b91418decc09ed426755a85bac1b', class: "supplier-insignia", type: "insignia", stateInsignia: this.supplierCategory, tagProduct: true })), h("div", { key: '45817e3bb0bfdaa0ec8cb4a23fdac1bb943e93dc', class: "product-header" }, this.category && (h("span", { key: 'c721519a5339a2ac40d20c283bbe8797b78e4b27', class: "category" }, this.category)), h("div", { key: '49f5013738dfffcdb83dfde628f5d1d21164c3d2', class: "stock-info" }, h("span", { key: 'bd49d5069d07b3ae10ac9c85a4b84bbb573f926e', class: "stock-label" }, "Stock:"), h("span", { key: 'd0eefb88240c13c9c56e7470e79cbacc9d86caf4', class: "stock-value", style: { color: this.getStockColor() } }, this.stock === 0 ? 'Agotado' : this.stock))), h("h3", { key: 'a880d0df13af0b75d553daf18e876905b93e6ef1', class: "product-name" }, this.productName), this.supplier && (h("div", { key: 'faa82e269979084e7510b6a17fb1f3caee8ad181', class: "supplier-info" }, h("span", { key: 'b4b223620c58cb30945b1c6be50559614937eb5f', class: "supplier-label" }, "Proveedor:"), h("span", { key: '989580f42383c3b6adb6484a493d1293a2a11904', class: "supplier-name", onClick: (e) => { e.stopPropagation(); this.dropiSupplierClick.emit(); } }, this.supplier))), h("div", { key: '451c1ab830c7ab38c4e414e94f11f63ffcf86162', class: "price-container" }, h("div", { key: '755f3f8aac6f7b1d458d28b74dec2734b42794a6', class: "price-item" }, h("span", { key: 'fff0a718b4f22641adcd28bbcb7e81a0f21755e9', class: "price-label" }, "Precio proveedor"), h("span", { key: '5bb6843a4a293195f0dbda5c3eccfc4f38c719b1', class: "price-value" }, this.currency, " ", this.formatPrice(this.salePrice))), h("div", { key: '468b1d7596ec5d727846a087b5d89461c5fef858', class: "price-item" }, h("span", { key: '91b15e4d58d27997b2dfdb9c73fd417a8f8ba5fb', class: "price-label" }, "Precio sugerido"), h("span", { key: '378483760ffac07491f5b65b37d5e27d41423ec5', class: "price-value" }, this.currency, " ", this.formatPrice(this.suggestedPrice))))), h("div", { key: '71467832049894083ea3454618a12d082cb15844', class: "separator" }), this.showAddButton && (h("div", { key: 'f9f0450e3dfa2b91ae7caa468811cc739d7a280e', class: { 'action-button': true, 'action-button--disabled': !this.inStock }, onClick: (e) => {
                 e.stopPropagation();
                 if (this.inStock)
                     this.dropiAddProduct.emit();
-            } }, h("dropi-icon", { key: '89cf58b72a1500616eb47b9f6e0bcf1e67229d94', name: "Shopping-cart-arrow-rigth", iconWidth: "20px", iconHeight: "20px", color: "#f49a3d" }), h("span", { key: '60843cb9e54337eae7e570827190f1d60a8f0450', class: "button-text" }, "Enviar a cliente")))));
+            } }, h("dropi-icon", { key: '50a9fad974460c2728fb1fca74628d093cbb1875', name: "Shopping-cart-arrow-rigth", iconWidth: "20px", iconHeight: "20px", color: "#f49a3d" }), h("span", { key: 'f5ac44dd20e01bc644e863c3cbf51e3493821e70', class: "button-text" }, "Enviar a cliente")))));
     }
     static get is() { return "dropi-card-product"; }
     static get encapsulation() { return "shadow"; }
@@ -322,8 +322,8 @@ export class DropiCardProduct {
     }
     static get events() {
         return [{
-                "method": "onProductClick",
-                "name": "onProductClick",
+                "method": "dropiProductClick",
+                "name": "dropiProductClick",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -337,8 +337,8 @@ export class DropiCardProduct {
                     "references": {}
                 }
             }, {
-                "method": "changeFavorite",
-                "name": "changeFavorite",
+                "method": "dropiFavoriteChange",
+                "name": "dropiFavoriteChange",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,

package/dist/collection/components/dropi-card-section/dropi-card-section.js

@@ -15,16 +15,16 @@ export class DropiCardSection {
     /** Switch checked state */
     isChecked = false;
     /** Emitted when switch changes */
-    onChange;
+    dropiChange;
     /** Emitted when dropdown icon is clicked */
-    onClick;
+    dropiClick;
     render() {
-        return (h("div", { key: 'aa7548c223bf3238b7af10e52821e3ffd19fefca', class: "card-section" }, h("div", { key: '6b0ed1e7f7c282b0f67277567a2fa1ffbab9d04e', class: "card-section__text" }, this.type === 'important'
+        return (h("div", { key: '06fe2a580fb23484419ea4b1c41a265facb722de', class: "card-section" }, h("div", { key: '1020ea256b0311a200a721387b3ecb8d0f3809ab', class: "card-section__text" }, this.type === 'important'
             ? h("h5", { class: "card-section__title card-section__title--important" }, this.title)
-            : h("h6", { class: "card-section__title" }, this.title), this.description && h("p", { key: 'f0c83d631d541d95c19e4a246634da56413a3de9', class: "card-section__desc" }, this.description)), h("div", { key: '976d78401ab26872df88115ae0f0449bcd2faae9', class: "card-section__control" }, this.typeElement === 'switch' ? (h("dropi-switch", { isChecked: this.isChecked, onOnChange: (e) => {
+            : h("h6", { class: "card-section__title" }, this.title), this.description && h("p", { key: '52ea93b6b2736c4c6e3ebb953c2878db90d34b4c', class: "card-section__desc" }, this.description)), h("div", { key: '7ec0ed96e43b45256fd5dec5ee24b0dfd6488403', class: "card-section__control" }, this.typeElement === 'switch' ? (h("dropi-switch", { isChecked: this.isChecked, onDropiChange: (e) => {
                 this.isChecked = e.detail;
-                this.onChange.emit(e.detail);
-            } })) : (h("button", { class: "card-section__dropdown-btn", onClick: () => this.onClick.emit(), "aria-label": "Expandir" }, h("dropi-icon", { name: "Dropdown-down", iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-500" }))))));
+                this.dropiChange.emit(e.detail);
+            } })) : (h("button", { class: "card-section__dropdown-btn", onClick: () => this.dropiClick.emit(), "aria-label": "Expandir" }, h("dropi-icon", { name: "Dropdown-down", iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-500" }))))));
     }
     static get is() { return "dropi-card-section"; }
     static get encapsulation() { return "shadow"; }
@@ -144,8 +144,8 @@ export class DropiCardSection {
     }
     static get events() {
         return [{
-                "method": "onChange",
-                "name": "onChange",
+                "method": "dropiChange",
+                "name": "dropiChange",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -159,8 +159,8 @@ export class DropiCardSection {
                     "references": {}
                 }
             }, {
-                "method": "onClick",
-                "name": "onClick",
+                "method": "dropiClick",
+                "name": "dropiClick",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,

package/dist/collection/components/dropi-carousel/dropi-carousel.js

@@ -25,8 +25,8 @@ export class DropiCarousel {
     totalPages = 0;
     itemsContainer;
     timer;
-    pageChange;
-    onPage;
+    dropiPageChange;
+    dropiPage;
     handleValue(val) {
         this.parsedValue = typeof val === 'string' ? JSON.parse(val) : (val || []);
         this.updateTotalPages();
@@ -98,7 +98,7 @@ export 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);
         }
     };
@@ -110,7 +110,7 @@ export 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);
         }
     };
@@ -119,7 +119,7 @@ export 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() {
@@ -335,8 +335,8 @@ export class DropiCarousel {
     }
     static get events() {
         return [{
-                "method": "pageChange",
-                "name": "pageChange",
+                "method": "dropiPageChange",
+                "name": "dropiPageChange",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -350,8 +350,8 @@ export class DropiCarousel {
                     "references": {}
                 }
             }, {
-                "method": "onPage",
-                "name": "onPage",
+                "method": "dropiPage",
+                "name": "dropiPage",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,

package/dist/collection/components/dropi-checkbox/dropi-checkbox.js

@@ -10,20 +10,20 @@ export class DropiCheckbox {
     /** 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 (h("div", { key: 'fdc1c54733617c0dab1ae11050d90650dc3eba91', class: "container-dropi-checkbox", onClick: () => this.changeState() }, h("div", { key: '6329c1a53e8b9f85ea26ca01afb920583570e85f', class: {
+        return (h("div", { key: '071505574decbf6b138256f73affe101c01080ef', class: "container-dropi-checkbox", onClick: () => this.changeState() }, h("div", { key: '03e7ec24a87e22c4a5fe1d94cc4ca1fe349d6e6f', class: {
                 check: true,
                 isCheck: this.checked,
                 noCheck: !this.checked,
                 disabled: this.disabled,
-            } }, h("svg", { key: '50b1ebd160e1ee6b28ef23651f1e12afc9406f8a', xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 24 24", fill: "none" }, h("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" })))));
+            } }, h("svg", { key: 'c56f01268919995cc7aac0173edf44a01a62e13e', xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 24 24", fill: "none" }, h("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 is() { return "dropi-checkbox"; }
     static get encapsulation() { return "shadow"; }
@@ -84,8 +84,8 @@ export class DropiCheckbox {
     }
     static get events() {
         return [{
-                "method": "onChange",
-                "name": "onChange",
+                "method": "dropiChange",
+                "name": "dropiChange",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,