@dropi/ui 0.1.19 → 0.1.21

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

@@ -0,0 +1,526 @@
+import { h } from "@stencil/core";
+/**
+ * @component dropi-alert-modal
+ * Confirmation/alert modal with Lottie animation, title, message and action buttons.
+ * Uses dropi-modal internally.
+ *
+ * @example
+ * const el = document.querySelector('dropi-alert-modal');
+ * el.visible = true;
+ */
+export class DropiAlertModal {
+    /** Controls visibility */
+    visible = false;
+    /** Modal type — determines Lottie animation */
+    type = 'question';
+    /** Bold title */
+    tittle = '';
+    /** Body message */
+    message = '';
+    /** Primary button label */
+    primaryButton = 'Accept';
+    /** Secondary button label (hidden if empty) */
+    secondaryButton = '';
+    /** Show loading state with loading.json Lottie */
+    loading = false;
+    /** Show close icon in header */
+    closable = false;
+    /** Hide action buttons */
+    displayButtons = true;
+    /** Loading title */
+    loadingTitle = 'Loading';
+    /** Loading message */
+    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',
+        success: '/assets/lottie-files/success.json',
+        error: '/assets/lottie-files/failure.json',
+        loading: '/assets/lottie-files/loading.json',
+    };
+    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.secondaryButtonEvent.emit(true);
+        this.visible = false;
+        this.modalOpenChange.emit(false);
+    }
+    onModalHide() {
+        this.visible = false;
+        this.modalOpenChange.emit(false);
+        this.onHide.emit();
+    }
+    render() {
+        const lottieKey = this.loading ? 'loading' : this.type;
+        const isLottieLoading = lottieKey === 'loading';
+        return (h("dropi-modal", { key: '42c41a88060c1039af7f85d518d93e9f5e0e8489', visible: this.visible, showHeader: this.closable, showCloseIcon: this.closable, dismissable: false, closeOnEscape: false, showFooter: false, size: "s", onOnHide: () => this.onModalHide() }, h("div", { key: 'e62b897c0b6f8c3bee4f3992e003cb88577708f3', class: "body-alert" }, this.lottieMap[lottieKey] && (h("div", { key: '0c1551477bcb926dc610f63a08542f3b8fc71a0d', 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: 'b03602610b8ff78b4a7d5e0fcaf4e541d9e7ece6', class: "content-alert" }, h("h2", { key: 'c50ea63352df03d49ce0811a97ca02f031e654c9' }, this.loading ? this.loadingTitle : this.tittle), h("p", { key: '3f699157283cb48eb3948afede7291d965ae7066' }, this.loading ? this.loadingMessage : this.message)), !this.loading && this.displayButtons && (h("div", { key: '7d7c4282a726d82117b13ec23db36dd72b1327d5', class: "actions" }, this.secondaryButton && h("dropi-button", { key: '1a766fac9daded57f9b8a38ff3f5d43c7217210d', text: this.secondaryButton, severity: "secondary", onClick: () => this.handleSecondary(), fullWidth: true }), h("dropi-button", { key: '8c1053db7b35be9c5ceecd9c50a179f99efa9798', 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"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dropi-alert-modal.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "visible": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controls visibility"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "visible",
+                "defaultValue": "false"
+            },
+            "type": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "AlertModalType",
+                    "resolved": "\"error\" | \"loading\" | \"question\" | \"success\" | \"warning\"",
+                    "references": {
+                        "AlertModalType": {
+                            "location": "local",
+                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-alert-modal/dropi-alert-modal.tsx",
+                            "id": "src/components/dropi-alert-modal/dropi-alert-modal.tsx::AlertModalType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Modal type \u2014 determines Lottie animation"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "'question'"
+            },
+            "tittle": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Bold title"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "tittle",
+                "defaultValue": "''"
+            },
+            "message": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Body message"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "message",
+                "defaultValue": "''"
+            },
+            "primaryButton": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Primary button label"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "primary-button",
+                "defaultValue": "'Accept'"
+            },
+            "secondaryButton": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Secondary button label (hidden if empty)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "secondary-button",
+                "defaultValue": "''"
+            },
+            "loading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show loading state with loading.json Lottie"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "loading",
+                "defaultValue": "false"
+            },
+            "closable": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show close icon in header"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "closable",
+                "defaultValue": "false"
+            },
+            "displayButtons": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Hide action buttons"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "display-buttons",
+                "defaultValue": "true"
+            },
+            "loadingTitle": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Loading title"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "loading-title",
+                "defaultValue": "'Loading'"
+            },
+            "loadingMessage": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Loading message"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "loading-message",
+                "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": "primaryButtonEvent",
+                "name": "primaryButtonEvent",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when primary button is clicked \u2014 matches Angular 'primaryButtonEvent'"
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }, {
+                "method": "secondaryButtonEvent",
+                "name": "secondaryButtonEvent",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when secondary button is clicked \u2014 matches Angular 'secondaryButtonEvent'"
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }, {
+                "method": "modalOpenChange",
+                "name": "modalOpenChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "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",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "show": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "hide": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    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: '5bce853f6d1d17dcad603cf103d6de09ae612147', 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: '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) }))));
     }
     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: '7a043420848f083d161765c16da41dc1f7c38065', class: `tag-state ${this.state}` }, this.renderIcon(), h("p", { key: '4227bf47f3169673f44b62bde46498e3c8d607cd' }, this.stateText[this.state])));
+        return (h("div", { key: '1b353257990bcb7f0869ef86e5ac1dd945d253d5', class: `tag-state ${this.state}` }, this.renderIcon(), h("p", { key: '841b7abd4ff7519874f63b99d0ed8f452e621e63' }, 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); }