@dropi/ui 0.1.21 → 0.1.23

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

@@ -1,371 +0,0 @@
-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

@@ -1,31 +0,0 @@
-: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

@@ -1,128 +0,0 @@
-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

@@ -1,96 +0,0 @@
-: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: hidden;
-  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;
-}
-
-/* ── 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%;
-  }
-}