@dropi/ui 0.1.20 → 0.1.22

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

@@ -14,11 +14,11 @@ export class DropiAlertModal {
     /** 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 */
@@ -28,15 +28,53 @@ export class DropiAlertModal {
     /** 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',
@@ -44,28 +82,39 @@ export class DropiAlertModal {
         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 (h("dropi-modal", { key: '4038a17b3572d834f6eb015ad1ece188735d5f74', visible: this.visible, showHeader: this.closable, showCloseIcon: this.closable, dismissable: false, closeOnEscape: false, size: "s", onDropiHide: () => this.onModalHide() }, h("div", { key: '89a8709256c27102bde8ac25a387dc90f3f61ed4', class: `body-alert${this.loading ? ' is-loading' : ''}` }, this.lottieMap[lottieKey] && (h("div", { key: '5bf98eb48cd930bfa8fe4b94077753031830de6b', class: `lottie-img${this.loading ? ' lottie-img--loading' : ''}` }, h("dotlottie-player", { key: lottieKey, src: this.lottieMap[lottieKey], background: "transparent", speed: "1", style: { width: lottieSize, height: 'auto' }, loop: true, autoplay: true }))), h("div", { key: 'a2c9cd8f737ea3584a6706b0e92270893b592870', class: "content-alert" }, h("h2", { key: '2cd2e5567910995c62eeb64e60c13ed40fdd14a1' }, this.loading ? this.loadingTitle : this.alertTitle), h("p", { key: 'c6baa31f8f6bbbeb2b1f514e3584d61a50616096' }, this.loading ? this.loadingMessage : this.message)), !this.loading && this.displayButtons && (h("div", { key: '7bc16afdb60ea6549fa5dff250a0146141a5715d', class: "actions" }, this.secondaryButton && (h("dropi-button", { key: '8b289d9bf39622340ad2cae9ab21457a948c4843', text: this.secondaryButton, severity: "secondary", onDropiClick: () => this.handleSecondary(), fullWidth: true })), h("dropi-button", { key: 'f87a1a80be2e72b26ddeac81d5f7638f40ddd8f7', text: this.primaryButton, severity: "primary", onDropiClick: () => this.handlePrimary(), fullWidth: true }))))));
+        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 }))))));
     }
     static get is() { return "dropi-alert-modal"; }
-    static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "$": ["dropi-alert-modal.css"]
@@ -79,11 +128,11 @@ export class DropiAlertModal {
     static get properties() {
         return {
             "visible": {
-                "type": "boolean",
+                "type": "any",
                 "mutable": true,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "any",
+                    "resolved": "any",
                     "references": {}
                 },
                 "required": false,
@@ -100,7 +149,7 @@ export class DropiAlertModal {
             },
             "type": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "AlertModalType",
                     "resolved": "\"error\" | \"loading\" | \"question\" | \"success\" | \"warning\"",
@@ -124,9 +173,9 @@ export class DropiAlertModal {
                 "attribute": "type",
                 "defaultValue": "'question'"
             },
-            "alertTitle": {
+            "tittle": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "string",
                     "resolved": "string",
@@ -141,12 +190,12 @@ export class DropiAlertModal {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "alert-title",
+                "attribute": "tittle",
                 "defaultValue": "''"
             },
             "message": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "string",
                     "resolved": "string",
@@ -166,7 +215,7 @@ export class DropiAlertModal {
             },
             "primaryButton": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "string",
                     "resolved": "string",
@@ -182,11 +231,11 @@ export class DropiAlertModal {
                 "setter": false,
                 "reflect": false,
                 "attribute": "primary-button",
-                "defaultValue": "'Aceptar'"
+                "defaultValue": "'Accept'"
             },
             "secondaryButton": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "string",
                     "resolved": "string",
@@ -226,7 +275,7 @@ export class DropiAlertModal {
             },
             "closable": {
                 "type": "boolean",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "boolean",
                     "resolved": "boolean",
@@ -246,7 +295,7 @@ export class DropiAlertModal {
             },
             "displayButtons": {
                 "type": "boolean",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "boolean",
                     "resolved": "boolean",
@@ -266,7 +315,7 @@ export class DropiAlertModal {
             },
             "loadingTitle": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "string",
                     "resolved": "string",
@@ -282,11 +331,11 @@ export class DropiAlertModal {
                 "setter": false,
                 "reflect": false,
                 "attribute": "loading-title",
-                "defaultValue": "'Cargando'"
+                "defaultValue": "'Loading'"
             },
             "loadingMessage": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "string",
                     "resolved": "string",
@@ -302,50 +351,125 @@ export class DropiAlertModal {
                 "setter": false,
                 "reflect": false,
                 "attribute": "loading-message",
-                "defaultValue": "'Por favor espera un momento'"
+                "defaultValue": "'Please wait a moment'"
+            },
+            "isStep": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When true, primary button does NOT auto-close the modal (matches Angular `isStep`).\nUseful for step-by-step flows."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "is-step",
+                "defaultValue": "false"
+            },
+            "baseZIndex": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Base z-index for the internal modal overlay (matches Angular `baseZIndex`)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "base-z-index",
+                "defaultValue": "0"
+            },
+            "params": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Convenience object prop \u2014 matches Angular `params: ModalParams`.\nFields: tittle, type, message, primaryButton, secondaryButton, loadingTitle,\nloadingMessage, closable, displayButtons.\nWhen provided, its values override the corresponding individual props."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "params",
+                "defaultValue": "null"
             }
         };
     }
     static get events() {
         return [{
-                "method": "dropiPrimary",
-                "name": "dropiPrimary",
+                "method": "primaryButtonEvent",
+                "name": "primaryButtonEvent",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emitted when primary button is clicked"
+                    "text": "Emitted when primary button is clicked \u2014 matches Angular 'primaryButtonEvent'"
                 },
                 "complexType": {
-                    "original": "void",
-                    "resolved": "void",
+                    "original": "boolean",
+                    "resolved": "boolean",
                     "references": {}
                 }
             }, {
-                "method": "dropiSecondary",
-                "name": "dropiSecondary",
+                "method": "secondaryButtonEvent",
+                "name": "secondaryButtonEvent",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emitted when secondary button is clicked"
+                    "text": "Emitted when secondary button is clicked \u2014 matches Angular 'secondaryButtonEvent'"
                 },
                 "complexType": {
-                    "original": "void",
-                    "resolved": "void",
+                    "original": "boolean",
+                    "resolved": "boolean",
                     "references": {}
                 }
             }, {
-                "method": "dropiHide",
-                "name": "dropiHide",
+                "method": "modalOpenChange",
+                "name": "modalOpenChange",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emitted when modal is hidden"
+                    "text": "Emitted when modal open state changes \u2014 matches Angular 'modalOpenChange'"
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }, {
+                "method": "onHide",
+                "name": "onHide",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when modal is hidden \u2014 matches Angular 'onHide'"
                 },
                 "complexType": {
                     "original": "void",
@@ -392,4 +516,10 @@ export class DropiAlertModal {
             }
         };
     }
+    static get watchers() {
+        return [{
+                "propName": "params",
+                "methodName": "paramsChanged"
+            }];
+    }
 }

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

@@ -8,7 +8,7 @@ export class DropiAvatars {
     /** 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) */
@@ -19,7 +19,7 @@ export class DropiAvatars {
     render() {
         const displayInitials = this.initials?.slice(0, 2).toUpperCase();
         const showInitials = !this.image && displayInitials;
-        return (h("figure", { key: '207390b678faada7a5c276b23246573b04c0416c', class: { 'avatar': true, [`avatar--${this.type}`]: true } }, showInitials ? (h("div", { class: "avatar__initials" }, displayInitials)) : (h("img", { src: this.image || FALLBACK, alt: this.alt, onError: (e) => this.handleError(e) }))));
+        return (h("figure", { key: 'db9310b5c789b079fc0f9043a619bd22f9a60151', class: { 'avatar': true, [`avatar--${this.type}`]: true } }, showInitials ? (h("div", { class: "avatar__initials" }, displayInitials)) : (h("img", { src: this.image || FALLBACK, alt: this.alt, onError: (e) => this.handleError(e) }))));
     }
     static get is() { return "dropi-avatars"; }
     static get encapsulation() { return "shadow"; }
@@ -73,7 +73,7 @@ export class DropiAvatars {
                 "setter": false,
                 "reflect": false,
                 "attribute": "alt",
-                "defaultValue": "'avatar'"
+                "defaultValue": "'Avatar'"
             },
             "type": {
                 "type": "string",

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

@@ -18,7 +18,7 @@
 
 .tag-state p {
   font-size: 13px;
-  font-weight: 500;
+  font-weight: var(--font-weight-medium);
   line-height: 20px;
   margin: 0;
   padding: 0;

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

@@ -5,7 +5,7 @@ import { h } from "@stencil/core";
  */
 export class DropiBadge {
     /** Badge state: pending | active | canceled | frozen */
-    state = 'pending';
+    state;
     stateText = {
         pending: 'Pendiente',
         active: 'Activo',
@@ -25,7 +25,7 @@ export class DropiBadge {
         return null;
     }
     render() {
-        return (h("div", { key: '5fe86b98326a2bc1b6916421ff51204fe307e7b7', class: `tag-state ${this.state}` }, this.renderIcon(), h("p", { key: '887a979f44c1128a3e78f01be2f20750aab9b276' }, this.stateText[this.state])));
+        return (h("div", { key: 'b4cae2eac2f963a641ca23e27b33899469b2b370', class: `tag-state ${this.state}` }, this.renderIcon(), h("p", { key: '64a2504a1844f2cb9397878ca305aa183b0609a5' }, this.stateText[this.state])));
     }
     static get is() { return "dropi-badge"; }
     static get encapsulation() { return "shadow"; }
@@ -64,8 +64,7 @@ export class DropiBadge {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "state",
-                "defaultValue": "'pending'"
+                "attribute": "state"
             }
         };
     }

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

@@ -0,0 +1,17 @@
+: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); }

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

@@ -0,0 +1,119 @@
+import { h } from "@stencil/core";
+/**
+ * @component dropi-badge-legacy
+ * Legacy badge component used in tabs and elsewhere.
+ */
+export class DropiBadgeLegacy {
+    /** 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 (h("div", { key: 'f3d7bf7be848acee4077acef4f8e2ab4cfd99d83', class: {
+                'badge-legacy': true,
+                [`badge-legacy--${this.variant}`]: true,
+                [`badge-legacy--${this.type}`]: true
+            } }, isCounter ? (h("span", { class: "badge-count" }, this.count)) : (h("span", { class: { 'badge-state-icon': true, [`badge-state--${this.state}`]: true } }, this.state === 'check' ? '✓' : '...'))));
+    }
+    static get is() { return "dropi-badge-legacy"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dropi-badge-legacy.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dropi-badge-legacy.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'state' | 'counter'",
+                    "resolved": "\"counter\" | \"state\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Type: state | counter"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "'state'"
+            },
+            "state": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'check' | 'pending'",
+                    "resolved": "\"check\" | \"pending\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "State: check | pending"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "state",
+                "defaultValue": "'check'"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'primary' | 'secondary' | 'tertiary'",
+                    "resolved": "\"primary\" | \"secondary\" | \"tertiary\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Variant: primary | secondary | tertiary"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'primary'"
+            },
+            "count": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Count (for type counterpart)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "count",
+                "defaultValue": "0"
+            }
+        };
+    }
+}