@dropi/ui 0.1.20 → 0.1.22

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

@@ -22,29 +22,35 @@ export class DropiAlert {
     /** Layout type: default (inline) | flag (accented left border) */
     type = 'default';
     /** Semantic state */
-    state = 'info';
+    state = 'success';
     /** Show the × close button */
-    dismissable = false;
+    dismissable = true;
     /** Show action button */
     showButton = false;
     /** Action button label */
-    buttonText = '';
+    buttonText = 'Close';
     /** Anchor/link label */
-    anchorText = '';
+    anchorText = 'none';
     /** Anchor href */
-    anchorUrl = '';
+    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 */
-    dropiClose;
+    onClose;
     /** Emitted when the action button is clicked */
-    dropiButtonClick;
+    onButtonClick;
     /** Emitted when the anchor link is clicked */
-    dropiLinkClick;
+    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 || '#', onClick: (e) => { e.preventDefault(); this.dropiLinkClick.emit(); } }, this.anchorText))), h("div", { class: "alert__actions" }, this.showButton && this.buttonText && this.type !== 'flag' && (h("button", { class: "alert__btn", onClick: () => this.dropiButtonClick.emit() }, this.buttonText)), this.dismissable && (h("button", { class: "alert__close", onClick: () => { this.showAlert = false; this.dropiClose.emit(); }, "aria-label": "Cerrar" }, h("dropi-icon", { name: "Close-small", width: "18px", height: "18px", color: "Gray-Gray-500" }))))));
+        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"; }
@@ -130,7 +136,7 @@ export class DropiAlert {
                 "setter": false,
                 "reflect": false,
                 "attribute": "state",
-                "defaultValue": "'info'"
+                "defaultValue": "'success'"
             },
             "dismissable": {
                 "type": "boolean",
@@ -150,7 +156,7 @@ export class DropiAlert {
                 "setter": false,
                 "reflect": false,
                 "attribute": "dismissable",
-                "defaultValue": "false"
+                "defaultValue": "true"
             },
             "showButton": {
                 "type": "boolean",
@@ -190,7 +196,7 @@ export class DropiAlert {
                 "setter": false,
                 "reflect": false,
                 "attribute": "button-text",
-                "defaultValue": "''"
+                "defaultValue": "'Close'"
             },
             "anchorText": {
                 "type": "string",
@@ -210,7 +216,7 @@ export class DropiAlert {
                 "setter": false,
                 "reflect": false,
                 "attribute": "anchor-text",
-                "defaultValue": "''"
+                "defaultValue": "'none'"
             },
             "anchorUrl": {
                 "type": "string",
@@ -230,7 +236,7 @@ export class DropiAlert {
                 "setter": false,
                 "reflect": false,
                 "attribute": "anchor-url",
-                "defaultValue": "''"
+                "defaultValue": "'none'"
             },
             "showAlert": {
                 "type": "boolean",
@@ -251,13 +257,73 @@ export class DropiAlert {
                 "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": "dropiClose",
-                "name": "dropiClose",
+                "method": "onClose",
+                "name": "onClose",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -271,8 +337,8 @@ export class DropiAlert {
                     "references": {}
                 }
             }, {
-                "method": "dropiButtonClick",
-                "name": "dropiButtonClick",
+                "method": "onButtonClick",
+                "name": "onButtonClick",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -286,8 +352,8 @@ export class DropiAlert {
                     "references": {}
                 }
             }, {
-                "method": "dropiLinkClick",
-                "name": "dropiLinkClick",
+                "method": "onClickLink",
+                "name": "onClickLink",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,

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

@@ -7,67 +7,99 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  gap: var(--Size-3, 12px);
-  padding: 0;
-  overflow: hidden;
+  gap: var(--Size-3);
   width: 100%;
-  text-align: center !important;
+  flex: 1;
+  overflow: visible;
+  padding-bottom: var(--Size-2);
 }
 
+/* ── Lottie regular ───────────────────────────────────────────────── */
 .lottie-img {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 100px;
   width: 120px;
+  height: 120px;
+  overflow: hidden;
+  flex-shrink: 0;
+  align-self: center;
   margin-top: -8px;
-  margin-bottom: var(--Size-2, 8px);
+  margin-bottom: var(--Size-2);
 }
 
+.lottie-img lottie-player {
+  display: block;
+  width: 120px;
+  height: 120px;
+}
+
+/* ── Lottie loading ───────────────────────────────────────────────── */
 .lottie-img--loading {
-  min-height: 160px;
   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-700, #32394d);
-  font-size: var(--Size-5, 24px);
-  font-weight: 700;
-  margin: 0 0 var(--Size-2, 8px);
-  text-align: center !important;
+  color: var(--Gray-Gray-800);
+  font-size: 19px;
+  font-weight: var(--font-weight-semibold);
+  margin: 0;
 }
 
 .content-alert p {
-  color: var(--Gray-Gray-500, #69738c);
-  font-size: var(--font-size-s, 14px);
-  margin: 0;
-  text-align: center !important;
+  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: 12px;
+  gap: var(--Size-3);
   width: 100%;
-  margin-top: var(--Size-4, 16px);
 }
 
 .actions dropi-button {
   flex: 1;
   display: flex;
+  justify-content: center;
 }
 
-/* .btn replaced by dropi-button components */
-
 @media (max-width: 768px) {
   .actions {
     flex-direction: column;
   }
+
+  .actions dropi-button {
+    width: 100%;
+  }
 }