@dropi/ui 0.1.27 → 0.1.28

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

@@ -0,0 +1,63 @@
+:host { display: contents; }
+*, *::before, *::after { box-sizing: border-box; }
+
+.toast-container { position: fixed; z-index: 9999; display: flex; flex-direction: column; gap: 8px; max-width: 380px; width: 100%; pointer-events: none; }
+.toast-container--top-right    { top: 80px; right: 0; padding: var(--Size-2, 8px); }
+.toast-container--top-left     { top: 80px; left: 0; padding: var(--Size-2, 8px); }
+.toast-container--bottom-right { bottom: 24px; right: 0; padding: var(--Size-2, 8px); flex-direction: column-reverse; }
+.toast-container--bottom-left  { bottom: 24px; left: 0; padding: var(--Size-2, 8px); flex-direction: column-reverse; }
+.toast-container--top-center    { top: 80px; left: 50%; transform: translateX(-50%); padding: var(--Size-2, 8px); }
+.toast-container--bottom-center { bottom: 24px; left: 50%; transform: translateX(-50%); padding: var(--Size-2, 8px); flex-direction: column-reverse; }
+
+.toast-wrapper { pointer-events: auto; animation: toast-in 0.28s ease; transition: opacity 0.28s ease, transform 0.28s ease, max-height 0.32s ease; overflow: hidden; max-height: 200px; }
+.toast-wrapper--leaving { opacity: 0; transform: translateX(20px); max-height: 0; pointer-events: none; }
+@keyframes toast-in { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
+
+.toast { position: relative; display: flex; align-items: flex-start; border-radius: var(--Border-2,8px); background: var(--Neutral-White, #ffffff); box-shadow: 0.5px -1px 7px 0px rgba(0, 0, 0, 0.06), 0px 4px 20px 0px rgba(0, 0, 0, 0.12); border-left: var(--Size-2, 8px) solid; overflow: hidden; min-width: 300px; }
+.toast--success { border-color: var(--Success-Success-500,#34c38f); }
+.toast--error   { border-color: var(--Error-Error-500,#f46a6b); }
+.toast--warn    { border-color: var(--Warning-Warning-500,#f1b44c); }
+.toast--info    { border-color: var(--Info-Info-500,#50a5f1); }
+
+.toast-content {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  padding: var(--Size-5) var(--Size-5) var(--Size-5) calc(var(--Size-5) - var(--Size-2, 8px));
+  gap: var(--Size-4, 16px);
+}
+
+.lottie-img {
+  width: 50px;
+  height: 50px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+}
+
+.lottie-player-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+lottie-player {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.info-container { flex: 1; min-width: 0; align-self: center; display: flex; flex-direction: column; gap: var(--Size-1, 4px); }
+.title { margin: 0; font-size: var(--font-size-l,18px); font-weight: var(--font-weight-bold,700); color: var(--Gray-Gray-700,#32394d); line-height: 1.1; text-align: left; max-width: 250px; }
+.description  { margin: 0; font-size: var(--font-size-s,14px); color: var(--Gray-Gray-500, #69738c); line-height: 1.4; text-align: left; max-width: 250px; }
+
+.toast-close { position: absolute; top: 18px; right: 10px; background: none; border: none; cursor: pointer; padding: 0; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
+.toast-close:hover { opacity: 0.7; }

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

@@ -0,0 +1,165 @@
+import { h } from "@stencil/core";
+/**
+ * @component dropi-toast
+ * Global toast notification stack. Place once in the app root, call show() from JS.
+ *
+ * @example
+ * const t = document.querySelector('dropi-toast');
+ * t.show({ severity: 'success', summary: '¡Guardado!', detail: 'Cambios aplicados.' });
+ */
+export class DropiToast {
+    /** Toast position */
+    position = 'top-right';
+    /** Default auto-close ms (0 = manual) */
+    life = 3000;
+    items = [];
+    idCounter = 0;
+    /** Show a toast */
+    async show(msg) {
+        console.log('DropiToast show() called with:', msg);
+        const id = msg.id ?? `t${++this.idCounter}`;
+        const item = { msg: { ...msg, id, closable: msg.closable ?? true }, leaving: false };
+        this.items = [...(this.items || []), item];
+        const ms = msg.life !== undefined ? msg.life : this.life;
+        if (ms > 0)
+            item.timer = setTimeout(() => this.remove(id), ms);
+    }
+    /** Remove all toasts */
+    async clear() {
+        (this.items || []).forEach(i => {
+            if (i.timer)
+                clearTimeout(i.timer);
+        });
+        this.items = [];
+    }
+    remove(id) {
+        this.items = this.items.map(i => (i.msg.id === id ? { ...i, leaving: true } : i));
+        setTimeout(() => {
+            this.items = this.items.filter(i => i.msg.id !== id);
+        }, 320);
+    }
+    lottieMap = {
+        success: '/assets/lottie-files/success.json',
+        error: '/assets/lottie-files/failure.json',
+        warn: '/assets/lottie-files/warning.json',
+        info: '/assets/lottie-files/question.json',
+    };
+    getLottieHtml(severity) {
+        return `<lottie-player src="${this.lottieMap[severity]}" background="transparent" speed="1" loop autoplay></lottie-player>`;
+    }
+    render() {
+        return (h("div", { key: '0ad8903921fd1bd773d206029bcc4e12e8b21349', class: `toast-container toast-container--${this.position}` }, (this.items ?? []).map(item => (h("div", { key: item.msg.id, class: { 'toast-wrapper': true, 'toast-wrapper--leaving': item.leaving } }, h("div", { class: `toast toast--${item.msg.severity}` }, h("div", { class: "toast-content" }, h("div", { class: "lottie-img" }, h("div", { class: "lottie-player-container", innerHTML: this.getLottieHtml(item.msg.severity) })), h("div", { class: "info-container" }, h("p", { class: "title" }, item.msg.summary), item.msg.detail && h("p", { class: "description" }, item.msg.detail))), item.msg.closable && (h("button", { class: "toast-close", onClick: () => this.remove(item.msg.id) }, h("dropi-icon", { name: "Close-small", width: "20px", height: "20px", color: "Gray-Gray-400" })))))))));
+    }
+    static get is() { return "dropi-toast"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dropi-toast.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dropi-toast.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "position": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'top-center' | 'bottom-center'",
+                    "resolved": "\"bottom-center\" | \"bottom-left\" | \"bottom-right\" | \"top-center\" | \"top-left\" | \"top-right\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Toast position"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "position",
+                "defaultValue": "'top-right'"
+            },
+            "life": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Default auto-close ms (0 = manual)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "life",
+                "defaultValue": "3000"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "items": {}
+        };
+    }
+    static get methods() {
+        return {
+            "show": {
+                "complexType": {
+                    "signature": "(msg: ToastMessage) => Promise<void>",
+                    "parameters": [{
+                            "name": "msg",
+                            "type": "ToastMessage",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "ToastMessage": {
+                            "location": "local",
+                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-toast/dropi-toast.tsx",
+                            "id": "src/components/dropi-toast/dropi-toast.tsx::ToastMessage"
+                        },
+                        "ToastItem": {
+                            "location": "global",
+                            "id": "global::ToastItem"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Show a toast",
+                    "tags": []
+                }
+            },
+            "clear": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Remove all toasts",
+                    "tags": []
+                }
+            }
+        };
+    }
+}

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

@@ -0,0 +1,32 @@
+:host {
+  display: inline-block;
+  position: relative;
+}
+
+.tooltip-simple-bubble {
+  position: absolute;
+  background: var(--Gray-Gray-800, #1e293b);
+  color: white;
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  margin-bottom: 8px;
+  white-space: nowrap;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.2s;
+  z-index: 1000;
+}
+
+:host(:hover) .tooltip-simple-bubble {
+  opacity: 1;
+}
+
+.tooltip-simple--outlined .tooltip-simple-bubble {
+  border: 1px solid var(--Gray-Gray-300);
+  background: white;
+  color: var(--Gray-Gray-800);
+}

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

@@ -0,0 +1,70 @@
+import { h } from "@stencil/core";
+/**
+ * @component dropi-tooltip
+ * Simple tooltip (Legacy version).
+ */
+export class DropiTooltip {
+    /** Tooltip text */
+    text = '';
+    /** Whether the tooltip has an outline style (matches Angular `outlined`) */
+    outlined = false;
+    render() {
+        return (h("div", { key: '0b14943b628c231fbb530620e7829f70e6099c7a', class: { 'tooltip-simple': true, 'tooltip-simple--outlined': this.outlined } }, h("slot", { key: 'bf0245c6fab0ba938834d2d3e84ccaa9cb14f5c8' }), this.text && (h("div", { key: 'e1e33acf8628f79b36c5cc66c7076a03ce8167f7', class: "tooltip-simple-bubble" }, this.text))));
+    }
+    static get is() { return "dropi-tooltip"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dropi-tooltip.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dropi-tooltip.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "text": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tooltip text"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "text",
+                "defaultValue": "''"
+            },
+            "outlined": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the tooltip has an outline style (matches Angular `outlined`)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "outlined",
+                "defaultValue": "false"
+            }
+        };
+    }
+}

package/dist/collection/components/dropi-tooltip-v2/dropi-tooltip.css

@@ -0,0 +1,67 @@
+:host { display: inline-block; }
+*, *::before, *::after { box-sizing: border-box; }
+
+.tooltip-wrapper { position: relative; display: inline-flex; align-items: center; justify-content: center; }
+
+.tooltip-bubble {
+  position: absolute; z-index: 9999;
+  background: var(--Gray-Gray-800); color: var(--Neutral-White, #ffffff);
+  font-size: var(--font-size-s,14px); line-height: 1.5;
+  padding: 8px 12px; border-radius: 8px;
+  white-space: normal; pointer-events: none;
+  opacity: 0; transition: opacity 0.15s ease, transform 0.15s ease;
+  word-break: break-word;
+  box-shadow: var(--Shadow-medium);
+  text-align: left;
+  width: max-content;
+}
+.tooltip-bubble--visible { opacity: 1; }
+
+.tooltip-bubble--top    { bottom: calc(100% + 12px); left: 50%; transform: translateX(-50%); }
+.tooltip-bubble--bottom { top: calc(100% + 12px);    left: 50%; transform: translateX(-50%); }
+.tooltip-bubble--left   { right: calc(100% + 12px);  top: 50%;  transform: translateY(-50%); }
+.tooltip-bubble--right  { left: calc(100% + 12px);   top: 50%;  transform: translateY(-50%); }
+
+.tooltip-arrow { position: absolute; width: 12px; height: 6px; }
+.tooltip-arrow::before {
+  content: '';
+  position: absolute;
+  width: 0;
+  height: 0;
+}
+
+.tooltip-arrow--top {
+  top: 100%; left: 50%; transform: translateX(-50%);
+}
+.tooltip-arrow--top::before {
+  border-left: 6px solid transparent;
+  border-right: 6px solid transparent;
+  border-top: 6px solid var(--Gray-Gray-800);
+}
+
+.tooltip-arrow--bottom {
+  bottom: 100%; left: 50%; transform: translateX(-50%);
+}
+.tooltip-arrow--bottom::before {
+  border-left: 6px solid transparent;
+  border-right: 6px solid transparent;
+  border-bottom: 6px solid var(--Gray-Gray-800);
+}
+
+.tooltip-arrow--left {
+  left: 100%; top: 50%; transform: translateY(-50%);
+}
+.tooltip-arrow--left::before {
+  border-top: 6px solid transparent;
+  border-bottom: 6px solid transparent;
+  border-left: 6px solid var(--Gray-Gray-800);
+}
+
+.tooltip-arrow--right {
+  right: 100%; top: 50%; transform: translateY(-50%);
+}
+.tooltip-arrow--right::before {
+  border-top: 6px solid transparent;
+  border-bottom: 6px solid transparent;
+  border-right: 6px solid var(--Gray-Gray-800);
+}