@dropi/ui 0.1.27 → 0.1.28

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

@@ -0,0 +1,371 @@
+import { h } from "@stencil/core";
+const STATE_ICONS = {
+    success: 'Check-circle',
+    error: 'Warning-circle',
+    warning: 'Warning-triangle',
+    info: 'Info',
+};
+const STATE_COLORS = {
+    success: 'Success-Success-500',
+    error: 'Error-Error-500',
+    warning: 'Warning-Warning-500',
+    info: 'Info-Info-500',
+};
+/**
+ * @component dropi-alert
+ * Alert banner with state variants (success/error/warning/info),
+ * optional action button, anchor link, and dismissable close icon.
+ */
+export class DropiAlert {
+    /** Alert message text (supports plain text) */
+    message = '';
+    /** Layout type: default (inline) | flag (accented left border) */
+    type = 'default';
+    /** Semantic state */
+    state = 'success';
+    /** Show the × close button */
+    dismissable = true;
+    /** Show action button */
+    showButton = false;
+    /** Action button label */
+    buttonText = 'Close';
+    /** Anchor/link label */
+    anchorText = 'none';
+    /** Anchor href */
+    anchorUrl = 'none';
+    /** Whether the alert is visible */
+    showAlert = true;
+    /** Link text (alternative to anchorText) */
+    textLink = '';
+    /** Link URL (alternative to anchorUrl) */
+    linkUrl = '';
+    /** Clicked text tracking */
+    clickedText = '';
+    /** Emitted when the alert is dismissed */
+    onClose;
+    /** Emitted when the action button is clicked */
+    onButtonClick;
+    /** Emitted when the anchor link is clicked */
+    onClickLink;
+    render() {
+        if (!this.showAlert)
+            return null;
+        return (h("div", { class: { 'alert': true, [`alert--${this.type}`]: true, [`alert--${this.state}`]: true } }, this.type !== 'flag' && (h("div", { class: "alert__icon" }, h("dropi-icon", { name: STATE_ICONS[this.state], width: "18px", height: "18px", color: STATE_COLORS[this.state] }))), h("div", { class: "alert__body" }, h("span", { class: "alert__message" }, this.message), this.anchorText && (h("a", { class: "alert__link", href: this.anchorUrl || this.linkUrl || '#', onClick: (e) => { e.preventDefault(); this.onClickLink.emit(); } }, this.anchorText))), h("div", { class: "alert__actions" }, this.showButton && this.buttonText && this.type !== 'flag' && (h("button", { class: "alert__btn", onClick: () => this.onButtonClick.emit() }, this.buttonText)), this.dismissable && (h("button", { class: "alert__close", onClick: () => { this.showAlert = false; this.onClose.emit(); }, "aria-label": "Cerrar" }, h("dropi-icon", { name: "Close-small", width: "18px", height: "18px", color: "Gray-Gray-500" }))))));
+    }
+    static get is() { return "dropi-alert"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dropi-alert.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dropi-alert.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "message": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Alert message text (supports plain text)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "message",
+                "defaultValue": "''"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "AlertType",
+                    "resolved": "\"default\" | \"flag\"",
+                    "references": {
+                        "AlertType": {
+                            "location": "local",
+                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-alert/dropi-alert.tsx",
+                            "id": "src/components/dropi-alert/dropi-alert.tsx::AlertType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Layout type: default (inline) | flag (accented left border)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "'default'"
+            },
+            "state": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "AlertState",
+                    "resolved": "\"error\" | \"info\" | \"success\" | \"warning\"",
+                    "references": {
+                        "AlertState": {
+                            "location": "local",
+                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-alert/dropi-alert.tsx",
+                            "id": "src/components/dropi-alert/dropi-alert.tsx::AlertState"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Semantic state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "state",
+                "defaultValue": "'success'"
+            },
+            "dismissable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show the \u00D7 close button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "dismissable",
+                "defaultValue": "true"
+            },
+            "showButton": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show action button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-button",
+                "defaultValue": "false"
+            },
+            "buttonText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Action button label"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "button-text",
+                "defaultValue": "'Close'"
+            },
+            "anchorText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Anchor/link label"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "anchor-text",
+                "defaultValue": "'none'"
+            },
+            "anchorUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Anchor href"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "anchor-url",
+                "defaultValue": "'none'"
+            },
+            "showAlert": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the alert is visible"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-alert",
+                "defaultValue": "true"
+            },
+            "textLink": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Link text (alternative to anchorText)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "text-link",
+                "defaultValue": "''"
+            },
+            "linkUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Link URL (alternative to anchorUrl)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "link-url",
+                "defaultValue": "''"
+            },
+            "clickedText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Clicked text tracking"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "clicked-text",
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "onClose",
+                "name": "onClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the alert is dismissed"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "onButtonClick",
+                "name": "onButtonClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the action button is clicked"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "onClickLink",
+                "name": "onClickLink",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the anchor link is clicked"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}

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

@@ -0,0 +1,31 @@
+:host {
+  display: block;
+  margin: 10px 0;
+}
+
+.alert-legacy {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 16px;
+  border-radius: var(--Border-2);
+  font-size: var(--font-size-s);
+}
+
+.alert-legacy--success { background: var(--Success-Success-50); color: var(--Success-Success-700); border: 1px solid var(--Success-Success-200); }
+.alert-legacy--error   { background: var(--Error-Error-50); color: var(--Error-Error-700); border: 1px solid var(--Error-Error-200); }
+.alert-legacy--warning { background: var(--Warning-Warning-50); color: var(--Warning-Warning-700); border: 1px solid var(--Warning-Warning-200); }
+.alert-legacy--info    { background: var(--Info-Info-50); color: var(--Info-Info-700); border: 1px solid var(--Info-Info-200); }
+
+.alert-legacy__close {
+  background: transparent;
+  border: none;
+  font-size: 20px;
+  cursor: pointer;
+  color: currentColor;
+  opacity: 0.6;
+}
+
+.alert-legacy__close:hover {
+  opacity: 1;
+}

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

@@ -0,0 +1,128 @@
+import { h } from "@stencil/core";
+/**
+ * @component dropi-alert-legacy
+ * Legacy alert component for backward compatibility with Angular core.
+ */
+export class DropiAlertLegacy {
+    /** Visibility toggle */
+    visible = false;
+    /** Alert message */
+    message = '';
+    /** Semantic type: success | error | warning | info */
+    type = 'success';
+    /** Automatically close after timeout */
+    autoClose = false;
+    timer;
+    componentDidLoad() {
+        if (this.autoClose && this.visible) {
+            this.startTimer();
+        }
+    }
+    startTimer() {
+        clearTimeout(this.timer);
+        this.timer = setTimeout(() => {
+            this.visible = false;
+        }, 7000);
+    }
+    render() {
+        if (!this.visible)
+            return null;
+        return (h("div", { class: { 'alert-legacy': true, [`alert-legacy--${this.type}`]: true } }, h("div", { class: "alert-legacy__content" }, h("span", { class: "alert-legacy__message" }, this.message)), h("button", { class: "alert-legacy__close", onClick: () => this.visible = false }, "\u00D7")));
+    }
+    static get is() { return "dropi-alert-legacy"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dropi-alert-legacy.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dropi-alert-legacy.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "visible": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visibility toggle"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "visible",
+                "defaultValue": "false"
+            },
+            "message": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Alert message"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "message",
+                "defaultValue": "''"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'success' | 'error' | 'warning' | 'info'",
+                    "resolved": "\"error\" | \"info\" | \"success\" | \"warning\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Semantic type: success | error | warning | info"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "'success'"
+            },
+            "autoClose": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Automatically close after timeout"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "auto-close",
+                "defaultValue": "false"
+            }
+        };
+    }
+}

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

@@ -0,0 +1,105 @@
+:host {
+  display: contents;
+}
+
+.body-alert {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: var(--Size-3);
+  width: 100%;
+  flex: 1;
+  overflow: visible;
+  padding-bottom: var(--Size-2);
+}
+
+/* ── Lottie regular ───────────────────────────────────────────────── */
+.lottie-img {
+  width: 120px;
+  height: 120px;
+  overflow: hidden;
+  flex-shrink: 0;
+  align-self: center;
+  margin-top: -8px;
+  margin-bottom: var(--Size-2);
+}
+
+.lottie-img lottie-player {
+  display: block;
+  width: 120px;
+  height: 120px;
+}
+
+/* ── Lottie loading ───────────────────────────────────────────────── */
+.lottie-img--loading {
+  width: 100%;
+  height: 120px;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.lottie-img--loading lottie-player {
+  width: 300px;
+  height: auto;
+  flex-shrink: 0;
+}
+
+/* ── Content ──────────────────────────────────────────────────────── */
+.content-alert {
+  text-align: center;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.content-alert h2 {
+  color: var(--Gray-Gray-800);
+  font-size: 19px;
+  font-weight: var(--font-weight-semibold);
+  margin: 0;
+}
+
+.content-alert p {
+  color: var(--Gray-Gray-500);
+  font-size: var(--font-size-s);
+  margin-bottom: var(--Size-2);
+  overflow-wrap: anywhere;
+  max-height: 100px;
+  overflow: auto;
+}
+
+.custom-content {
+  width: 100%;
+  text-align: left;
+  margin-top: var(--Size-2);
+  display: flex;
+  flex-direction: column;
+  gap: var(--Size-3);
+}
+
+/* ── Actions ──────────────────────────────────────────────────────── */
+.actions {
+  display: flex;
+  gap: var(--Size-3);
+  width: 100%;
+}
+
+.actions dropi-button {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+}
+
+@media (max-width: 768px) {
+  .actions {
+    flex-direction: column;
+  }
+
+  .actions dropi-button {
+    width: 100%;
+  }
+}