@dropi/ui 0.1.20 → 0.1.22

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

@@ -0,0 +1,54 @@
+'use strict';
+
+var index = require('./index-C8kwDvpf.js');
+
+const dropiAccordionItemCss = () => `:host{display:block;border-bottom:1px solid var(--Gray-Gray-100)}.accordion-header{width:100%;display:flex;justify-content:space-between;align-items:center;padding:16px;background:white;border:none;cursor:pointer;text-align:left}.accordion-header-left{display:flex;align-items:center;gap:8px}.accordion-title{font-size:var(--font-size-m);font-weight:var(--font-weight-semibold);color:var(--Gray-Gray-700)}.accordion-chevron{transition:transform 0.3s ease}.accordion-chevron--open{transform:rotate(180deg)}.accordion-body{overflow:hidden;transition:max-height 0.3s ease-out}.accordion-content{padding:0 16px 16px 16px}`;
+
+const DropiAccordionItem = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    get el() { return index.getElement(this); }
+    /** The title of the item — matches Angular `sectionTitle` */
+    sectionTitle = '';
+    /** Index of the item — matches Angular `index` */
+    index;
+    /** Whether the section is expanded */
+    open = false;
+    /** Disable toggling */
+    disabled = false;
+    /** Icon name before title */
+    preIcon = '';
+    contentHeight = '0px';
+    contentRef;
+    openChanged(val) {
+        this.updateHeight(val);
+    }
+    componentDidLoad() {
+        this.updateHeight(this.open);
+    }
+    updateHeight(open) {
+        if (!this.contentRef)
+            return;
+        this.contentHeight = open ? `${this.contentRef.scrollHeight}px` : '0px';
+    }
+    handleToggle() {
+        if (this.disabled)
+            return;
+        // Notify parent if needed, or just toggle locally
+        this.el.closest('dropi-accordion');
+        this.open = !this.open;
+        setTimeout(() => this.updateHeight(this.open), 0);
+    }
+    render() {
+        return (index.h("div", { key: '43f4ce6c38338a90a3b866a449f14e48b478e738', class: { 'accordion-item': true, 'accordion-item--open': this.open, 'accordion-item--disabled': this.disabled } }, index.h("button", { key: 'b5150a903bf75b82ffea9707e5906dc17f0bcd1c', class: "accordion-header", onClick: () => this.handleToggle(), "aria-expanded": String(this.open), disabled: this.disabled }, index.h("span", { key: '53f5c6a4e5a9d02412145395112368ddea9af746', class: "accordion-header-left" }, this.preIcon && index.h("dropi-icon", { key: '5fea3e2916fe5dfb6c1435f08c3b63aca4656523', name: this.preIcon, width: "20px", height: "20px", color: "Gray-Gray-600" }), index.h("span", { key: '3ad504dcf5d8b4f05d11a0e951a81b79428de3ec', class: "accordion-title" }, this.sectionTitle)), index.h("span", { key: 'bd44cf2fe9989fc80badb6e46a33a9d699c90f49', class: { 'accordion-chevron': true, 'accordion-chevron--open': this.open } }, index.h("dropi-icon", { key: '7a4b261df5ffd4c6276e4cccc6bc5e8f8e43a717', name: "Dropdown-down", width: "20px", height: "20px", color: "Gray-Gray-500" }))), index.h("div", { key: 'cb8789f49d4c83e33f2c366b90220b79b5619502', class: "accordion-body", style: { maxHeight: this.contentHeight }, ref: (el) => this.contentRef = el }, index.h("div", { key: '72d302242a40c9aa60a941814ac311a540b319f6', class: "accordion-content" }, index.h("slot", { key: 'b5a4a42f0d366f1f0409f719a52d5af11d77e3c3' })))));
+    }
+    static get watchers() { return {
+        "open": [{
+                "openChanged": 0
+            }]
+    }; }
+};
+DropiAccordionItem.style = dropiAccordionItemCss();
+
+exports.dropi_accordion_item = DropiAccordionItem;

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

@@ -1,52 +1,18 @@
 'use strict';
 
-var index = require('./index-DcOH2ZjX.js');
+var index = require('./index-C8kwDvpf.js');
 
-const dropiAccordionCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.accordion{border:1px solid var(--Gray-Gray-100,#e6eaf2);border-radius:var(--Border-2,8px);background:var(--Neutral-White,#fff);overflow:hidden}.accordion-header{width:100%;display:flex;align-items:center;justify-content:space-between;padding:var(--Size-4,16px) var(--Size-5,20px);background:transparent;border:none;cursor:pointer;gap:12px;text-align:left}.accordion-header:disabled{cursor:not-allowed;opacity:0.5}.accordion--open .accordion-header{border-bottom:1px solid var(--Gray-Gray-100,#e6eaf2)}.accordion-header-left{display:flex;align-items:center;gap:8px;flex:1;min-width:0}.accordion-title{font-size:var(--font-size-m,14px);font-weight:var(--font-weight-bold,700);color:var(--Gray-Gray-700,#32394d);line-height:1.4}.accordion-chevron{display:flex;align-items:center;flex-shrink:0;transition:transform 0.22s ease}.accordion-chevron--open{transform:rotate(180deg)}.accordion-body{max-height:0;overflow:hidden;transition:max-height 0.28s ease}.accordion-content{padding:0 var(--Size-5,20px) var(--Size-4,16px);color:var(--Gray-Gray-600,#475066);font-size:var(--font-size-s,12px);line-height:1.6}`;
+const dropiAccordionCss = () => `:host{display:block;width:100%;margin-bottom:-1px}*,*::before,*::after{box-sizing:border-box}.accordion{border-top:1px solid var(--Gray-Gray-100,#e6eaf2);border-bottom:1px solid var(--Gray-Gray-100,#e6eaf2);overflow:hidden}.accordion-header{width:100%;display:flex;align-items:center;justify-content:space-between;padding:var(--Size-4,16px) var(--Size-5,20px);background:transparent;border:none;cursor:pointer;gap:12px;text-align:left}.accordion-header:disabled{cursor:not-allowed;opacity:0.5}.accordion--open .accordion-header{border-bottom:1px solid var(--Gray-Gray-100,#e6eaf2)}.accordion-header-left{display:flex;align-items:center;gap:8px;flex:1;min-width:0}.accordion-title{font-size:var(--font-size-m, 16px);font-weight:var(--font-weight-bold,700);color:var(--Gray-Gray-600, #475066);line-height:1.4}.accordion-chevron{display:flex;align-items:center;flex-shrink:0;transition:transform 0.22s ease}.accordion-chevron--open{transform:rotate(180deg)}.accordion-body{max-height:0;overflow:hidden;transition:max-height 0.28s ease}.accordion-content{padding:0 var(--Size-5,20px) var(--Size-4,16px);color:var(--Gray-Gray-600,#475066);font-size:var(--font-size-s,12px);line-height:1.6}`;
 
 const DropiAccordion = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.dropiToggle = index.createEvent(this, "dropiToggle", 7);
-    }
-    /** Title shown in the header button */
-    header = '';
-    /** Whether the section is expanded */
-    open = false;
-    /** Disable toggling */
-    disabled = false;
-    /** Icon name from dropi-icon sprite (shown before title) */
-    preIcon = '';
-    /** Emitted when toggled. e.detail = new open state */
-    dropiToggle;
-    contentHeight = '0px';
-    contentRef;
-    openChanged(val) {
-        this.updateHeight(val);
-    }
-    componentDidLoad() {
-        this.updateHeight(this.open);
-    }
-    updateHeight(open) {
-        if (!this.contentRef)
-            return;
-        this.contentHeight = open ? `${this.contentRef.scrollHeight}px` : '0px';
-    }
-    handleToggle() {
-        if (this.disabled)
-            return;
-        this.open = !this.open;
-        this.dropiToggle.emit(this.open);
-        setTimeout(() => this.updateHeight(this.open), 0);
     }
+    /** Allows multiple sections to be open at the same time. If false, only one section can be open. */
+    multiple = false;
     render() {
-        return (index.h("div", { key: '833499ceed32f31227940efdea0250074a26dad4', class: { 'accordion': true, 'accordion--open': this.open, 'accordion--disabled': this.disabled } }, index.h("button", { key: '067856e0af05669e75197e0e38b4e165166e2125', class: "accordion-header", onClick: () => this.handleToggle(), "aria-expanded": String(this.open), disabled: this.disabled }, index.h("span", { key: 'ee22e3b4251cad0c03143d7fd512f6b43b25080c', class: "accordion-header-left" }, this.preIcon && index.h("dropi-icon", { key: '935d87ddcd347ffb910c8093c164c768ddc85cad', name: this.preIcon, width: "20px", height: "20px", color: "Gray-Gray-600" }), index.h("span", { key: '88d229607eca9d6d538c620dab8040d6ebbc304f', class: "accordion-title" }, this.header)), index.h("span", { key: '5d29cc7263bb56c5da1455f57ef3000e375489c8', class: { 'accordion-chevron': true, 'accordion-chevron--open': this.open } }, index.h("dropi-icon", { key: 'c179d4d5db7fb988d9b6f41430d27e93ad36e7e4', name: "Dropdown-down", width: "20px", height: "20px", color: "Gray-Gray-500" }))), index.h("div", { key: '60052ec92c3659b1ab87358ec264d38faf2ed389', class: "accordion-body", style: { maxHeight: this.contentHeight }, ref: (el) => this.contentRef = el }, index.h("div", { key: '3565ad511fcfa017bb264a2829ee54ee6d0d7d96', class: "accordion-content" }, index.h("slot", { key: '1c2c4cab25bcbdf15cdd2ed699710f09dcbbbb74' })))));
+        return (index.h("div", { key: '15575b05adec26235378bb459cdf158bdabe2852', class: "accordion-container" }, index.h("slot", { key: 'e5411aee85b69e50c777657b0cb2aa7d04d09fa4' })));
     }
-    static get watchers() { return {
-        "open": [{
-                "openChanged": 0
-            }]
-    }; }
 };
 DropiAccordion.style = dropiAccordionCss();
 

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

@@ -0,0 +1,39 @@
+'use strict';
+
+var index = require('./index-C8kwDvpf.js');
+
+const dropiAlertLegacyCss = () => `:host{display:block;margin:10px 0}.alert-legacy{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-radius:var(--Border-2);font-size:var(--font-size-s)}.alert-legacy--success{background:var(--Success-Success-50);color:var(--Success-Success-700);border:1px solid var(--Success-Success-200)}.alert-legacy--error{background:var(--Error-Error-50);color:var(--Error-Error-700);border:1px solid var(--Error-Error-200)}.alert-legacy--warning{background:var(--Warning-Warning-50);color:var(--Warning-Warning-700);border:1px solid var(--Warning-Warning-200)}.alert-legacy--info{background:var(--Info-Info-50);color:var(--Info-Info-700);border:1px solid var(--Info-Info-200)}.alert-legacy__close{background:transparent;border:none;font-size:20px;cursor:pointer;color:currentColor;opacity:0.6}.alert-legacy__close:hover{opacity:1}`;
+
+const DropiAlertLegacy = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    /** Visibility toggle */
+    visible = false;
+    /** Alert message */
+    message = '';
+    /** Semantic type: success | error | warning | info */
+    type = 'success';
+    /** Automatically close after timeout */
+    autoClose = false;
+    timer;
+    componentDidLoad() {
+        if (this.autoClose && this.visible) {
+            this.startTimer();
+        }
+    }
+    startTimer() {
+        clearTimeout(this.timer);
+        this.timer = setTimeout(() => {
+            this.visible = false;
+        }, 7000);
+    }
+    render() {
+        if (!this.visible)
+            return null;
+        return (index.h("div", { class: { 'alert-legacy': true, [`alert-legacy--${this.type}`]: true } }, index.h("div", { class: "alert-legacy__content" }, index.h("span", { class: "alert-legacy__message" }, this.message)), index.h("button", { class: "alert-legacy__close", onClick: () => this.visible = false }, "\u00D7")));
+    }
+};
+DropiAlertLegacy.style = dropiAlertLegacyCss();
+
+exports.dropi_alert_legacy = DropiAlertLegacy;

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

@@ -1,26 +1,27 @@
 'use strict';
 
-var index = require('./index-DcOH2ZjX.js');
+var index = require('./index-C8kwDvpf.js');
 
-const dropiAlertModalCss = () => `:host{display:contents}.body-alert{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:var(--Size-3, 12px);padding:0;overflow:hidden;width:100%;text-align:center !important}.lottie-img{display:flex;align-items:center;justify-content:center;min-height:100px;width:120px;margin-top:-8px;margin-bottom:var(--Size-2, 8px)}.lottie-img--loading{min-height:160px;width:100%}.content-alert{text-align:center;width:100%}.content-alert h2{color:var(--Gray-Gray-700, #32394d);font-size:var(--Size-5, 24px);font-weight:700;margin:0 0 var(--Size-2, 8px);text-align:center !important}.content-alert p{color:var(--Gray-Gray-500, #69738c);font-size:var(--font-size-s, 14px);margin:0;text-align:center !important;overflow-wrap:anywhere;max-height:100px;overflow:auto}.actions{display:flex;gap:12px;width:100%;margin-top:var(--Size-4, 16px)}.actions dropi-button{flex:1;display:flex}@media (max-width: 768px){.actions{flex-direction:column}}`;
+const dropiAlertModalCss = () => `:host{display:contents}.body-alert{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:var(--Size-3);width:100%;flex:1;overflow:visible;padding-bottom:var(--Size-2)}.lottie-img{width:120px;height:120px;overflow:hidden;flex-shrink:0;align-self:center;margin-top:-8px;margin-bottom:var(--Size-2)}.lottie-img lottie-player{display:block;width:120px;height:120px}.lottie-img--loading{width:100%;height:120px;overflow:hidden;display:flex;align-items:center;justify-content:center}.lottie-img--loading lottie-player{width:300px;height:auto;flex-shrink:0}.content-alert{text-align:center;width:100%;display:flex;flex-direction:column;align-items:center}.content-alert h2{color:var(--Gray-Gray-800);font-size:19px;font-weight:var(--font-weight-semibold);margin:0}.content-alert p{color:var(--Gray-Gray-500);font-size:var(--font-size-s);margin-bottom:var(--Size-2);overflow-wrap:anywhere;max-height:100px;overflow:auto}.custom-content{width:100%;text-align:left;margin-top:var(--Size-2);display:flex;flex-direction:column;gap:var(--Size-3)}.actions{display:flex;gap:var(--Size-3);width:100%}.actions dropi-button{flex:1;display:flex;justify-content:center}@media (max-width: 768px){.actions{flex-direction:column}.actions dropi-button{width:100%}}`;
 
 const DropiAlertModal = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.dropiPrimary = index.createEvent(this, "dropiPrimary", 7);
-        this.dropiSecondary = index.createEvent(this, "dropiSecondary", 7);
-        this.dropiHide = index.createEvent(this, "dropiHide", 7);
+        this.primaryButtonEvent = index.createEvent(this, "primaryButtonEvent", 7);
+        this.secondaryButtonEvent = index.createEvent(this, "secondaryButtonEvent", 7);
+        this.modalOpenChange = index.createEvent(this, "modalOpenChange", 7);
+        this.onHide = index.createEvent(this, "onHide", 7);
     }
     /** Controls visibility */
     visible = false;
     /** Modal type — determines Lottie animation */
     type = 'question';
     /** Bold title */
-    alertTitle = '';
+    tittle = '';
     /** Body message */
     message = '';
     /** Primary button label */
-    primaryButton = 'Aceptar';
+    primaryButton = 'Accept';
     /** Secondary button label (hidden if empty) */
     secondaryButton = '';
     /** Show loading state with loading.json Lottie */
@@ -30,15 +31,53 @@ const DropiAlertModal = class {
     /** Hide action buttons */
     displayButtons = true;
     /** Loading title */
-    loadingTitle = 'Cargando';
+    loadingTitle = 'Loading';
     /** Loading message */
-    loadingMessage = 'Por favor espera un momento';
-    /** Emitted when primary button is clicked */
-    dropiPrimary;
-    /** Emitted when secondary button is clicked */
-    dropiSecondary;
-    /** Emitted when modal is hidden */
-    dropiHide;
+    loadingMessage = 'Please wait a moment';
+    /**
+     * When true, primary button does NOT auto-close the modal (matches Angular `isStep`).
+     * Useful for step-by-step flows.
+     */
+    isStep = false;
+    /** Base z-index for the internal modal overlay (matches Angular `baseZIndex`) */
+    baseZIndex = 0;
+    /**
+     * Convenience object prop — matches Angular `params: ModalParams`.
+     * Fields: tittle, type, message, primaryButton, secondaryButton, loadingTitle,
+     * loadingMessage, closable, displayButtons.
+     * When provided, its values override the corresponding individual props.
+     */
+    params = null;
+    paramsChanged(val) {
+        if (!val)
+            return;
+        if (val.tittle !== undefined)
+            this.tittle = val.tittle;
+        if (val.type !== undefined)
+            this.type = val.type;
+        if (val.message !== undefined)
+            this.message = val.message;
+        if (val.primaryButton !== undefined)
+            this.primaryButton = val.primaryButton;
+        if (val.secondaryButton !== undefined)
+            this.secondaryButton = val.secondaryButton;
+        if (val.loadingTitle !== undefined)
+            this.loadingTitle = val.loadingTitle;
+        if (val.loadingMessage !== undefined)
+            this.loadingMessage = val.loadingMessage;
+        if (val.closable !== undefined)
+            this.closable = val.closable;
+        if (val.displayButtons !== undefined)
+            this.displayButtons = val.displayButtons;
+    }
+    /** Emitted when primary button is clicked — matches Angular 'primaryButtonEvent' */
+    primaryButtonEvent;
+    /** Emitted when secondary button is clicked — matches Angular 'secondaryButtonEvent' */
+    secondaryButtonEvent;
+    /** Emitted when modal open state changes — matches Angular 'modalOpenChange' */
+    modalOpenChange;
+    /** Emitted when modal is hidden — matches Angular 'onHide' */
+    onHide;
     lottieMap = {
         question: '/assets/lottie-files/question.json',
         warning: '/assets/lottie-files/warning.json',
@@ -46,26 +85,43 @@ const DropiAlertModal = class {
         error: '/assets/lottie-files/failure.json',
         loading: '/assets/lottie-files/loading.json',
     };
-    async show() { this.visible = true; }
-    async hide() { this.visible = false; }
-    handlePrimary() {
-        this.dropiPrimary.emit();
+    componentWillLoad() {
+        if (this.params)
+            this.paramsChanged(this.params);
+    }
+    async show() {
+        this.visible = true;
+    }
+    async hide() {
         this.visible = false;
     }
+    handlePrimary() {
+        this.primaryButtonEvent.emit(true);
+        if (!this.isStep) {
+            this.visible = false;
+            this.modalOpenChange.emit(false);
+        }
+    }
     handleSecondary() {
-        this.dropiSecondary.emit();
+        this.secondaryButtonEvent.emit(true);
         this.visible = false;
+        this.modalOpenChange.emit(false);
     }
     onModalHide() {
         this.visible = false;
-        this.dropiHide.emit();
+        this.modalOpenChange.emit(false);
+        this.onHide.emit();
     }
     render() {
         const lottieKey = this.loading ? 'loading' : this.type;
-        const lottieSize = this.loading ? '300px' : '120px';
-        console.log('[DropiAlertModal] type:', this.type, 'lottieKey:', lottieKey, 'src:', this.lottieMap[lottieKey]);
-        return (index.h("dropi-modal", { key: '4038a17b3572d834f6eb015ad1ece188735d5f74', visible: this.visible, showHeader: this.closable, showCloseIcon: this.closable, dismissable: false, closeOnEscape: false, size: "s", onDropiHide: () => this.onModalHide() }, index.h("div", { key: '89a8709256c27102bde8ac25a387dc90f3f61ed4', class: `body-alert${this.loading ? ' is-loading' : ''}` }, this.lottieMap[lottieKey] && (index.h("div", { key: '5bf98eb48cd930bfa8fe4b94077753031830de6b', class: `lottie-img${this.loading ? ' lottie-img--loading' : ''}` }, index.h("dotlottie-player", { key: lottieKey, src: this.lottieMap[lottieKey], background: "transparent", speed: "1", style: { width: lottieSize, height: 'auto' }, loop: true, autoplay: true }))), index.h("div", { key: 'a2c9cd8f737ea3584a6706b0e92270893b592870', class: "content-alert" }, index.h("h2", { key: '2cd2e5567910995c62eeb64e60c13ed40fdd14a1' }, this.loading ? this.loadingTitle : this.alertTitle), index.h("p", { key: 'c6baa31f8f6bbbeb2b1f514e3584d61a50616096' }, this.loading ? this.loadingMessage : this.message)), !this.loading && this.displayButtons && (index.h("div", { key: '7bc16afdb60ea6549fa5dff250a0146141a5715d', class: "actions" }, this.secondaryButton && (index.h("dropi-button", { key: '8b289d9bf39622340ad2cae9ab21457a948c4843', text: this.secondaryButton, severity: "secondary", onDropiClick: () => this.handleSecondary(), fullWidth: true })), index.h("dropi-button", { key: 'f87a1a80be2e72b26ddeac81d5f7638f40ddd8f7', text: this.primaryButton, severity: "primary", onDropiClick: () => this.handlePrimary(), fullWidth: true }))))));
+        const isLottieLoading = lottieKey === 'loading';
+        return (index.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() }, index.h("div", { key: '7208cbe742dab77bcee14150998aff5647fd41af', class: "body-alert" }, this.lottieMap[lottieKey] && (index.h("div", { key: '3b4d36963f8d6547556eee704823c8e34805b8d8', class: `lottie-img${isLottieLoading ? ' lottie-img--loading' : ''}` }, index.h("lottie-player", { key: lottieKey, src: this.lottieMap[lottieKey], background: "transparent", speed: "1", loop: true, autoplay: true }))), index.h("div", { key: 'dc52f3daec2eaf7ff9f1d51c90c67bcfaafe370f', class: "content-alert" }, index.h("h2", { key: '685df4cb76145cf6e965dd94e5f3fe60f828100c' }, this.loading ? this.loadingTitle : this.tittle), index.h("p", { key: 'f9e5b699816236148bc00c5046c6cc67eb86ae01' }, this.loading ? this.loadingMessage : this.message)), index.h("div", { key: '2e9280865cad761bea5cdd88b972734c11ab7737', class: "custom-content" }, index.h("slot", { key: '4fd36baa1455e7793a1e5291b52448707e3aa448' })), !this.loading && this.displayButtons && (index.h("div", { key: '451bd3d90ec780499d9956a8a57a0d1461406fa9', class: "actions" }, this.secondaryButton && index.h("dropi-button", { key: 'b60c30cc92cc080c01e1bf337a5e4b78f561be81', text: this.secondaryButton, severity: "secondary", onClick: () => this.handleSecondary(), fullWidth: true }), index.h("dropi-button", { key: '2b8696a02b253d289a1baef2116cffe436346717', text: this.primaryButton, severity: "primary", onClick: () => this.handlePrimary(), fullWidth: true }))))));
     }
+    static get watchers() { return {
+        "params": [{
+                "paramsChanged": 0
+            }]
+    }; }
 };
 DropiAlertModal.style = dropiAlertModalCss();
 

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

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

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

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

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

@@ -0,0 +1,30 @@
+'use strict';
+
+var index = require('./index-C8kwDvpf.js');
+
+const dropiBadgeLegacyCss = () => `:host{display:inline-block}.badge-legacy{display:flex;align-items:center;justify-content:center;padding:2px 6px;border-radius:10px;font-size:11px;font-weight:600}.badge-legacy--primary{background:var(--Primary-Primary-50);color:var(--Primary-Primary-500)}.badge-legacy--secondary{background:var(--Gray-Gray-100);color:var(--Gray-Gray-600)}.badge-legacy--tertiary{background:var(--Success-Success-50);color:var(--Success-Success-500)}`;
+
+const DropiBadgeLegacy = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    /** Type: state | counter */
+    type = 'state';
+    /** State: check | pending */
+    state = 'check';
+    /** Variant: primary | secondary | tertiary */
+    variant = 'primary';
+    /** Count (for type counterpart) */
+    count = 0;
+    render() {
+        const isCounter = this.type === 'counter';
+        return (index.h("div", { key: 'f3d7bf7be848acee4077acef4f8e2ab4cfd99d83', class: {
+                'badge-legacy': true,
+                [`badge-legacy--${this.variant}`]: true,
+                [`badge-legacy--${this.type}`]: true
+            } }, isCounter ? (index.h("span", { class: "badge-count" }, this.count)) : (index.h("span", { class: { 'badge-state-icon': true, [`badge-state--${this.state}`]: true } }, this.state === 'check' ? '✓' : '...'))));
+    }
+};
+DropiBadgeLegacy.style = dropiBadgeLegacyCss();
+
+exports.dropi_badge_legacy = DropiBadgeLegacy;

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

@@ -1,15 +1,15 @@
 'use strict';
 
-var index = require('./index-DcOH2ZjX.js');
+var index = require('./index-C8kwDvpf.js');
 
-const dropiBadgeCss = () => `:host{display:inline-flex}*,*::before,*::after{box-sizing:border-box}.tag-state{border-radius:12px;padding:2px 10px;display:flex;align-items:center;gap:4px}.tag-state svg{width:13px}.tag-state p{font-size:13px;font-weight:500;line-height:20px;margin:0;padding:0}.tag-state.active{background:var(--Success-Success-50, #e7f8f3);color:var(--Success-Success-500, #0abb87)}.tag-state.pending{color:var(--Orange-orange-500, #f49a3d);background:var(--Orange-orange-50, #fef5ec)}.tag-state.canceled,.tag-state.frozen{color:var(--Gray-Gray-500, #69738c);background:var(--Gray-Gray-50, #f7f8fa)}`;
+const dropiBadgeCss = () => `:host{display:inline-flex}*,*::before,*::after{box-sizing:border-box}.tag-state{border-radius:12px;padding:2px 10px;display:flex;align-items:center;gap:4px}.tag-state svg{width:13px}.tag-state p{font-size:13px;font-weight:var(--font-weight-medium);line-height:20px;margin:0;padding:0}.tag-state.active{background:var(--Success-Success-50, #e7f8f3);color:var(--Success-Success-500, #0abb87)}.tag-state.pending{color:var(--Orange-orange-500, #f49a3d);background:var(--Orange-orange-50, #fef5ec)}.tag-state.canceled,.tag-state.frozen{color:var(--Gray-Gray-500, #69738c);background:var(--Gray-Gray-50, #f7f8fa)}`;
 
 const DropiBadge = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
     }
     /** Badge state: pending | active | canceled | frozen */
-    state = 'pending';
+    state;
     stateText = {
         pending: 'Pendiente',
         active: 'Activo',
@@ -29,7 +29,7 @@ const DropiBadge = class {
         return null;
     }
     render() {
-        return (index.h("div", { key: '5fe86b98326a2bc1b6916421ff51204fe307e7b7', class: `tag-state ${this.state}` }, this.renderIcon(), index.h("p", { key: '887a979f44c1128a3e78f01be2f20750aab9b276' }, this.stateText[this.state])));
+        return (index.h("div", { key: 'b4cae2eac2f963a641ca23e27b33899469b2b370', class: `tag-state ${this.state}` }, this.renderIcon(), index.h("p", { key: '64a2504a1844f2cb9397878ca305aa183b0609a5' }, this.stateText[this.state])));
     }
 };
 DropiBadge.style = dropiBadgeCss();

package/dist/cjs/dropi-banner-external.cjs.entry.js

@@ -1,14 +1,14 @@
 'use strict';
 
-var index = require('./index-DcOH2ZjX.js');
+var index = require('./index-C8kwDvpf.js');
 
 const dropiBannerExternalCss = () => `:host{display:block;width:100%}.dropi-banner-external{display:block;width:100%;position:relative;margin-bottom:16px;border-radius:var(--Border-2, 8px)}.dropi-banner-external a{display:block;text-decoration:none}.click-wrapper{cursor:pointer}.inner{position:relative;display:block}.inner img{display:block;width:100%;height:auto;border-radius:var(--Border-2, 8px);max-width:1220px;margin:auto}.close-btn{position:absolute;top:4px;right:4px;background:rgba(255, 255, 255, 0.8);border:none;border-radius:50%;width:28px;height:28px;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:background 0.15s ease}.close-btn:hover{background:rgba(255, 255, 255, 1)}`;
 
 const DropiBannerExternal = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.dropiBannerClick = index.createEvent(this, "dropiBannerClick", 7);
-        this.dropiBannerClose = index.createEvent(this, "dropiBannerClose", 7);
+        this.bannerClick = index.createEvent(this, "bannerClick", 7);
+        this.isVisible = index.createEvent(this, "isVisible", 7);
     }
     /** Image URL to display */
     imageUrl = '';
@@ -18,27 +18,43 @@ const DropiBannerExternal = class {
     alt = '';
     /** Background color behind the image */
     backgroundColor = 'transparent';
+    /** Slug name (matches Angular `slugName`) */
+    slugName = '';
+    /** Whether to show on white brand (matches Angular `viewOnWhiteBrand`) */
+    viewOnWhiteBrand = false;
+    /** Countries list to show (matches Angular `viewOnlyCountries`) */
+    viewOnlyCountries = [];
     closed = false;
+    get el() { return index.getElement(this); }
+    componentWillLoad() {
+        if (!this.imageUrl) {
+            this.imageUrl =
+                this.el.getAttribute('imageUrl') ||
+                    this.el.getAttribute('image-url') ||
+                    this.el.getAttribute('imageurl') ||
+                    '';
+        }
+    }
     /** Emitted when the banner is clicked (only when no link is set) */
-    dropiBannerClick;
-    /** Emitted when the close button is clicked */
-    dropiBannerClose;
+    bannerClick;
+    /** Emitted with false when the close button is clicked (matches Angular `isVisible`) */
+    isVisible;
     handleClick(e) {
         if (!this.link) {
             e.preventDefault();
-            this.dropiBannerClick.emit();
+            this.bannerClick.emit();
         }
     }
     closeBanner(e) {
         e.preventDefault();
         e.stopPropagation();
         this.closed = true;
-        this.dropiBannerClose.emit();
+        this.isVisible.emit(false);
     }
     render() {
         if (this.closed || !this.imageUrl)
             return null;
-        const inner = (index.h("div", { class: "inner" }, index.h("img", { src: this.imageUrl, alt: this.alt, loading: "lazy" }), index.h("button", { class: "close-btn", "aria-label": "Cerrar banner", onClick: (e) => this.closeBanner(e) }, index.h("dropi-icon", { name: "Close-small", width: "20px", height: "20px", color: "Gray-Gray-600" }))));
+        const inner = (index.h("div", { class: "inner" }, index.h("img", { src: this.imageUrl, alt: this.alt }), index.h("button", { class: "close-btn", "aria-label": "Cerrar banner", onClick: (e) => this.closeBanner(e) }, index.h("dropi-icon", { name: "Close-small", width: "20px", height: "20px", color: "Gray-Gray-600" }))));
         return (index.h("div", { class: "dropi-banner-external", style: { background: this.backgroundColor } }, this.link ? (index.h("a", { href: this.link, target: "_blank", rel: "noopener noreferrer", onClick: (e) => this.handleClick(e) }, inner)) : (index.h("div", { class: "click-wrapper", onClick: (e) => this.handleClick(e) }, inner))));
     }
 };

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DcOH2ZjX.js');
+var index = require('./index-C8kwDvpf.js');
 
 const dropiBreadcrumbCss = () => `:host{display:block}*,*::before,*::after{box-sizing:border-box}.breadcrumb{margin:0}.crumb-list{display:flex;align-items:center;gap:4px;flex-wrap:wrap}.crumb-home{display:flex;padding-right:4px;align-items:center;gap:4px}.home-link{display:inline-flex;align-items:center;color:var(--Gray-Gray-500, #69738c);text-decoration:none;transition:color 0.2s ease}.home-link:hover{color:var(--Gray-Gray-700, #32394d)}.crumb{display:flex;padding:0 4px;align-items:center;gap:8px}.crumb-link{color:var(--Gray-Gray-500, #69738c);text-align:center;cursor:pointer;text-decoration:none;transition:color 0.2s ease;font-size:var(--font-size-s, 12px)}.crumb-link:hover{color:var(--Gray-Gray-700, #32394d);text-decoration:underline}.crumb-link.disabled{pointer-events:none;color:var(--Gray-Gray-300, #a1a8b8);cursor:not-allowed;text-decoration:none}.current{color:var(--Gray-Gray-700, #32394d);cursor:default;font-size:var(--font-size-s, 12px)}`;
 
@@ -32,7 +32,7 @@ const DropiBreadcrumb = class {
     }
     render() {
         const items = this.parsedItems;
-        return (index.h("nav", { key: '03396956a168feaa860265e9962d9c5cbca8b23f', class: "breadcrumb", "aria-label": "Breadcrumb" }, index.h("div", { key: '88e05f4ea225b26a9686bc9f1a01e8e3710806dc', class: "crumb-list" }, index.h("div", { key: '54e0dfc3bbef05a3041d187cd9ec0536f69c34e3', class: "crumb-home" }, index.h("a", { key: '31c971efc13b5122ff2775ee2f79b25c06a01b0f', href: this.homeRoute, class: "home-link", "aria-label": "Inicio", onClick: (e) => { e.preventDefault(); this.dropiNavigate.emit(this.homeRoute); } }, index.h("dropi-icon", { key: '8a436c3d254884e4479713a9c6981929bb91df55', name: this.homeIconName, width: "16px", color: "Gray-Gray-500" })), items.length > 0 && (index.h("dropi-icon", { key: 'f57beceaa6dab5ed00a2c1c38ff43ea6bce040f5', name: "Dropdown-Right", width: "16px", color: "Gray-Gray-500" }))), items.map((item, idx) => {
+        return (index.h("nav", { key: 'c4546d7a0c7852e01f685176b5365f1e0082ad24', class: "breadcrumb", "aria-label": "Breadcrumb" }, index.h("div", { key: '924ab634ae4e71f6bd39a67b4b3889cdca20234d', class: "crumb-list" }, index.h("div", { key: 'e7b1b285bdd497a028a041ada1eb8b34f77384b0', class: "crumb-home" }, index.h("a", { key: '9e288d5f5761daed20b35dbf056c7de9c2e7b8e3', href: this.homeRoute, class: "home-link", "aria-label": "Inicio", onClick: (e) => { e.preventDefault(); this.dropiNavigate.emit(this.homeRoute); } }, index.h("dropi-icon", { key: '15210c5feb41fc5a8dd37f52eba1e5a211834f84', name: this.homeIconName, width: "16px", color: "Gray-Gray-500" })), items.length > 0 && (index.h("dropi-icon", { key: '5acd21133859ec42b078fd323f82b7bc13c7b359', name: "Dropdown-Right", width: "16px", color: "Gray-Gray-500" }))), items.map((item, idx) => {
             const isLast = idx === items.length - 1;
             const href = item.url || item.routerLink || '#';
             return (index.h("div", { class: "crumb", key: idx }, (!isLast || this.lastItemClickable) ? (index.h("a", { class: `crumb-link Body-S-Regular${item.disabled ? ' disabled' : ''}`, href: href, onClick: (e) => {