@dropi/ui 0.1.18 → 0.1.20

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

@@ -0,0 +1,395 @@
+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 */
+    alertTitle = '';
+    /** Body message */
+    message = '';
+    /** Primary button label */
+    primaryButton = 'Aceptar';
+    /** 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 = 'Cargando';
+    /** 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;
+    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',
+    };
+    async show() { this.visible = true; }
+    async hide() { this.visible = false; }
+    handlePrimary() {
+        this.dropiPrimary.emit();
+        this.visible = false;
+    }
+    handleSecondary() {
+        this.dropiSecondary.emit();
+        this.visible = false;
+    }
+    onModalHide() {
+        this.visible = false;
+        this.dropiHide.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 }))))));
+    }
+    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": false,
+                "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'"
+            },
+            "alertTitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Bold title"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "alert-title",
+                "defaultValue": "''"
+            },
+            "message": {
+                "type": "string",
+                "mutable": false,
+                "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": false,
+                "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": "'Aceptar'"
+            },
+            "secondaryButton": {
+                "type": "string",
+                "mutable": false,
+                "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": false,
+                "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": false,
+                "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": false,
+                "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": "'Cargando'"
+            },
+            "loadingMessage": {
+                "type": "string",
+                "mutable": false,
+                "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": "'Por favor espera un momento'"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dropiPrimary",
+                "name": "dropiPrimary",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when primary button is clicked"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "dropiSecondary",
+                "name": "dropiSecondary",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when secondary button is clicked"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "dropiHide",
+                "name": "dropiHide",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when modal is hidden"
+                },
+                "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": []
+                }
+            }
+        };
+    }
+}

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

@@ -0,0 +1,55 @@
+: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%;
+}
+
+/* ── Size variants ─────────────────────────────────────── */
+.avatar--users,
+.avatar--transport,
+.avatar--payment {
+  width: 35px;
+  height: 35px;
+}
+
+.avatar--supplier {
+  width: 70px;
+  height: 70px;
+}
+
+.avatar--counter {
+  width: 33px;
+  height: 33px;
+}
+
+/* ── Initials fallback ─────────────────────────────────── */
+.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;
+}

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

@@ -0,0 +1,126 @@
+import { h } from "@stencil/core";
+const FALLBACK = `data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzNiAzNiI+PGNpcmNsZSBjeD0iMTgiIGN5PSIxOCIgcj0iMTgiIGZpbGw9IiNlNmVhZjIiLz48Y2lyY2xlIGN4PSIxOCIgY3k9IjE0IiByPSI2IiBmaWxsPSIjODU4ZWE2Ii8+PHBhdGggZD0iTTYgMzJjMC04IDI0LTggMjQgMCIgZmlsbD0iIzg1OGVhNiIvPjwvc3ZnPg==`;
+/**
+ * @component dropi-avatars
+ * Avatar component with image, initials fallback, and type-based size variants.
+ */
+export class DropiAvatars {
+    /** Image URL */
+    image = '';
+    /** Alt text for the image */
+    alt = 'avatar';
+    /** Size/context variant */
+    type = 'users';
+    /** Initials to show when no image (max 2 chars) */
+    initials = '';
+    handleError(e) {
+        e.target.src = FALLBACK;
+    }
+    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) }))));
+    }
+    static get is() { return "dropi-avatars"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dropi-avatars.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dropi-avatars.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "image": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Image URL"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "image",
+                "defaultValue": "''"
+            },
+            "alt": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Alt text for the image"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "alt",
+                "defaultValue": "'avatar'"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "AvatarType",
+                    "resolved": "\"counter\" | \"payment\" | \"supplier\" | \"transport\" | \"users\"",
+                    "references": {
+                        "AvatarType": {
+                            "location": "local",
+                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-avatars/dropi-avatars.tsx",
+                            "id": "src/components/dropi-avatars/dropi-avatars.tsx::AvatarType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Size/context variant"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "'users'"
+            },
+            "initials": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Initials to show when no image (max 2 chars)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "initials",
+                "defaultValue": "''"
+            }
+        };
+    }
+}

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

@@ -25,7 +25,7 @@ export class DropiBadge {
         return null;
     }
     render() {
-        return (h("div", { key: 'b66590d82d7dd760badcfb76c72eb3d589073721', class: `tag-state ${this.state}` }, this.renderIcon(), h("p", { key: '82ae7072f3ac6d96ed02db8289f0f98f070a882d' }, this.stateText[this.state])));
+        return (h("div", { key: '5fe86b98326a2bc1b6916421ff51204fe307e7b7', class: `tag-state ${this.state}` }, this.renderIcon(), h("p", { key: '887a979f44c1128a3e78f01be2f20750aab9b276' }, this.stateText[this.state])));
     }
     static get is() { return "dropi-badge"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dropi-banner-external/dropi-banner-external.css

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