@dropi/ui 0.1.23 → 0.1.24

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

@@ -0,0 +1,525 @@
+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: '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 originalStyleUrls() {
+        return {
+            "$": ["dropi-alert-modal.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dropi-alert-modal.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "visible": {
+                "type": "any",
+                "mutable": true,
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "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.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;
+}