@dropi/ui 0.1.27 → 0.1.29

package/dist/collection/components/dropi-banner-external/dropi-banner-external.js

@@ -0,0 +1,254 @@
+import { h } from "@stencil/core";
+/**
+ * @component dropi-banner-external
+ * External banner image with optional link and close button.
+ * Pass imageUrl directly (the Angular version fetched from WordPress).
+ *
+ * @example
+ * <dropi-banner-external
+ *   image-url="https://example.com/banner.jpg"
+ *   link="https://dropi.co"
+ * ></dropi-banner-external>
+ */
+export class DropiBannerExternal {
+    /** Image URL to display */
+    imageUrl = '';
+    /** Optional click-through URL */
+    link = '';
+    /** Alt text for the image */
+    alt = '';
+    /** Background color behind the image */
+    backgroundColor = 'transparent';
+    /** Slug name (matches Angular `slugName`) */
+    slugName = '';
+    /** Whether to show on white brand (matches Angular `viewOnWhiteBrand`) */
+    viewOnWhiteBrand = false;
+    /** Countries list to show (matches Angular `viewOnlyCountries`) */
+    viewOnlyCountries = [];
+    closed = false;
+    el;
+    componentWillLoad() {
+        if (!this.imageUrl) {
+            this.imageUrl =
+                this.el.getAttribute('imageUrl') ||
+                    this.el.getAttribute('image-url') ||
+                    this.el.getAttribute('imageurl') ||
+                    '';
+        }
+    }
+    /** Emitted when the banner is clicked (only when no link is set) */
+    bannerClick;
+    /** Emitted with false when the close button is clicked (matches Angular `isVisible`) */
+    isVisible;
+    handleClick(e) {
+        if (!this.link) {
+            e.preventDefault();
+            this.bannerClick.emit();
+        }
+    }
+    closeBanner(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        this.closed = true;
+        this.isVisible.emit(false);
+    }
+    render() {
+        if (this.closed || !this.imageUrl)
+            return null;
+        const inner = (h("div", { class: "inner" }, h("img", { src: this.imageUrl, alt: this.alt }), h("button", { class: "close-btn", "aria-label": "Cerrar banner", onClick: (e) => this.closeBanner(e) }, h("dropi-icon", { name: "Close-small", width: "20px", height: "20px", color: "Gray-Gray-600" }))));
+        return (h("div", { class: "dropi-banner-external", style: { background: this.backgroundColor } }, this.link ? (h("a", { href: this.link, target: "_blank", rel: "noopener noreferrer", onClick: (e) => this.handleClick(e) }, inner)) : (h("div", { class: "click-wrapper", onClick: (e) => this.handleClick(e) }, inner))));
+    }
+    static get is() { return "dropi-banner-external"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dropi-banner-external.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dropi-banner-external.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "imageUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Image URL to display"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "image-url",
+                "defaultValue": "''"
+            },
+            "link": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional click-through URL"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "link",
+                "defaultValue": "''"
+            },
+            "alt": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Alt text for the image"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "alt",
+                "defaultValue": "''"
+            },
+            "backgroundColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Background color behind the image"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "background-color",
+                "defaultValue": "'transparent'"
+            },
+            "slugName": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Slug name (matches Angular `slugName`)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "slug-name",
+                "defaultValue": "''"
+            },
+            "viewOnWhiteBrand": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show on white brand (matches Angular `viewOnWhiteBrand`)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "view-on-white-brand",
+                "defaultValue": "false"
+            },
+            "viewOnlyCountries": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Countries list to show (matches Angular `viewOnlyCountries`)"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "closed": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bannerClick",
+                "name": "bannerClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the banner is clicked (only when no link is set)"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "isVisible",
+                "name": "isVisible",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted with false when the close button is clicked (matches Angular `isVisible`)"
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}

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

@@ -0,0 +1,69 @@
+:host {
+  display: block;
+}
+
+*, *::before, *::after { box-sizing: border-box; }
+
+.breadcrumb {
+  margin: 0;
+}
+
+.crumb-list {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex-wrap: wrap;
+}
+
+.crumb-home {
+  display: flex;
+  padding-right: 4px;
+  align-items: center;
+  gap: 4px;
+}
+
+.home-link {
+  display: inline-flex;
+  align-items: center;
+  color: var(--Gray-Gray-500, #69738c);
+  text-decoration: none;
+  transition: color 0.2s ease;
+}
+
+.home-link:hover {
+  color: var(--Gray-Gray-700, #32394d);
+}
+
+.crumb {
+  display: flex;
+  padding: 0 4px;
+  align-items: center;
+  gap: 8px;
+}
+
+.crumb-link {
+  color: var(--Gray-Gray-500, #69738c);
+  text-align: center;
+  cursor: pointer;
+  text-decoration: none;
+  transition: color 0.2s ease;
+  font-size: var(--font-size-s, 12px);
+}
+
+.crumb-link:hover {
+  color: var(--Gray-Gray-700, #32394d);
+  text-decoration: underline;
+}
+
+.crumb-link.disabled {
+  pointer-events: none;
+  color: var(--Gray-Gray-300, #a1a8b8);
+  cursor: not-allowed;
+  text-decoration: none;
+}
+
+.current {
+  color: var(--Gray-Gray-700, #32394d);
+  cursor: default;
+  font-size: var(--font-size-s, 12px);
+}

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

@@ -0,0 +1,171 @@
+import { h } from "@stencil/core";
+/**
+ * @component dropi-breadcrumb
+ * Navigation breadcrumb with home icon and items.
+ *
+ * @example
+ * <dropi-breadcrumb
+ *   items='[{"label":"Productos","routerLink":"/products"},{"label":"Detalle"}]'
+ * ></dropi-breadcrumb>
+ */
+export class DropiBreadcrumb {
+    /** Breadcrumb items (array or JSON string). Last item is rendered as current. */
+    items = [];
+    /** Home link href */
+    homeRoute = '/';
+    /** dropi-icon name for home */
+    homeIconName = 'Home';
+    /** Whether the last item is also clickable */
+    lastItemClickable = false;
+    /** Emitted when any item or home is clicked. Detail is the item or homeRoute string. */
+    dropiNavigate;
+    get parsedItems() {
+        if (typeof this.items === 'string') {
+            try {
+                return JSON.parse(this.items);
+            }
+            catch {
+                return [];
+            }
+        }
+        return this.items;
+    }
+    render() {
+        const items = this.parsedItems;
+        return (h("nav", { key: 'c4546d7a0c7852e01f685176b5365f1e0082ad24', class: "breadcrumb", "aria-label": "Breadcrumb" }, h("div", { key: '924ab634ae4e71f6bd39a67b4b3889cdca20234d', class: "crumb-list" }, h("div", { key: 'e7b1b285bdd497a028a041ada1eb8b34f77384b0', class: "crumb-home" }, h("a", { key: '9e288d5f5761daed20b35dbf056c7de9c2e7b8e3', href: this.homeRoute, class: "home-link", "aria-label": "Inicio", onClick: (e) => { e.preventDefault(); this.dropiNavigate.emit(this.homeRoute); } }, h("dropi-icon", { key: '15210c5feb41fc5a8dd37f52eba1e5a211834f84', name: this.homeIconName, width: "16px", color: "Gray-Gray-500" })), items.length > 0 && (h("dropi-icon", { key: '5acd21133859ec42b078fd323f82b7bc13c7b359', name: "Dropdown-Right", width: "16px", color: "Gray-Gray-500" }))), items.map((item, idx) => {
+            const isLast = idx === items.length - 1;
+            const href = item.url || item.routerLink || '#';
+            return (h("div", { class: "crumb", key: idx }, (!isLast || this.lastItemClickable) ? (h("a", { class: `crumb-link Body-S-Regular${item.disabled ? ' disabled' : ''}`, href: href, onClick: (e) => {
+                    e.preventDefault();
+                    if (!item.disabled)
+                        this.dropiNavigate.emit(item);
+                } }, item.label)) : (h("span", { class: "current Body-S-Regular", "aria-current": "page" }, item.label)), !isLast && (h("dropi-icon", { name: "Dropdown-Right", width: "16px", height: "16px", color: "Gray-Gray-500" }))));
+        }))));
+    }
+    static get is() { return "dropi-breadcrumb"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dropi-breadcrumb.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dropi-breadcrumb.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "items": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BreadcrumbItem[] | string",
+                    "resolved": "BreadcrumbItem[] | string",
+                    "references": {
+                        "BreadcrumbItem": {
+                            "location": "local",
+                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-breadcrumb/dropi-breadcrumb.tsx",
+                            "id": "src/components/dropi-breadcrumb/dropi-breadcrumb.tsx::BreadcrumbItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Breadcrumb items (array or JSON string). Last item is rendered as current."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "items",
+                "defaultValue": "[]"
+            },
+            "homeRoute": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Home link href"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "home-route",
+                "defaultValue": "'/'"
+            },
+            "homeIconName": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "dropi-icon name for home"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "home-icon-name",
+                "defaultValue": "'Home'"
+            },
+            "lastItemClickable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the last item is also clickable"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "last-item-clickable",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dropiNavigate",
+                "name": "dropiNavigate",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when any item or home is clicked. Detail is the item or homeRoute string."
+                },
+                "complexType": {
+                    "original": "BreadcrumbItem | string",
+                    "resolved": "BreadcrumbItem | string",
+                    "references": {
+                        "BreadcrumbItem": {
+                            "location": "local",
+                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-breadcrumb/dropi-breadcrumb.tsx",
+                            "id": "src/components/dropi-breadcrumb/dropi-breadcrumb.tsx::BreadcrumbItem"
+                        }
+                    }
+                }
+            }];
+    }
+}

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

@@ -0,0 +1,177 @@
+:host {
+  display: inline-block;
+}
+
+:host([full-width]) {
+  display: flex;
+  width: 100%;
+}
+:host([full-width]) .btn {
+  width: 100%;
+}
+
+*, *::before, *::after { box-sizing: border-box; }
+
+.btn {
+  all: unset;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--Size-1, 4px);
+  border-radius: var(--Border-2, 8px);
+  font-weight: var(--font-weight-bold);
+  min-width: 33px;
+  line-height: 110%;
+  cursor: pointer;
+  white-space: nowrap;
+  transition:
+    background 0.25s ease,
+    color 0.25s ease,
+    border-color 0.25s ease,
+    transform 0.25s ease;
+}
+
+.btn:active {
+  transition: transform 0.01s ease-out;
+  transform: scale(0.98);
+}
+
+.btn:hover:not(:active) {
+  transform: scale(1.01);
+}
+
+.btn.without-text {
+  gap: 0;
+}
+
+/* ── Sizes ─────────────────────────────────────────────────── */
+.btn.large  { padding: var(--Size-4, 16px); font-size: var(--Size-4, 16px); height: 48px; }
+.btn.normal { padding: var(--Size-3, 12px); font-size: var(--font-size-s, 12px); height: 40px; }
+.btn.small  { padding: var(--Size-2, 8px);  font-size: var(--font-size-s, 12px); height: 29px; }
+
+/* ── Disabled / Loading ─────────────────────────────────────── */
+.btn.disabled,
+.btn.loading {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* ══════════════════════════════════════════════════════════════
+   PRIMARY severity
+═══════════════════════════════════════════════════════════════ */
+.btn.primary.default  { background: var(--Primary-Primary-500, #f49a3d); color: var(--Neutral-White, #ffffff); }
+.btn.primary.default:hover { background: var(--Primary-Primary-600, #e58017); }
+
+.btn.primary.success  { background: var(--Success-Success-500, #0abb87); color: var(--Neutral-White, #ffffff); }
+.btn.primary.success:hover { background: var(--Success-Success-600, #09aa7b); }
+
+.btn.primary.info     { background: var(--Info-Info-500, #50a5f1); color: var(--Neutral-White, #ffffff); }
+.btn.primary.info:hover { background: var(--Info-Info-600, #4996db); }
+
+.btn.primary.error    { background: var(--Error-Error-500, #f46a6b); color: var(--Neutral-White, #ffffff); }
+.btn.primary.error:hover { background: var(--Error-Error-600, #de6061); }
+
+.btn.primary.warning  { background: var(--Warning-Warning-500, #f1b44c); color: var(--Neutral-White, #ffffff); }
+.btn.primary.warning:hover { background: var(--Warning-Warning-600, #dba445); }
+
+.btn.primary.legacy   { background: var(--Secondary-Secondary-500, #008dbf); color: var(--Neutral-White, #ffffff); }
+.btn.primary.legacy:hover { background: var(--Secondary-Secondary-600, #007199); }
+
+/* Disabled primary */
+.btn.primary.disabled.default  { background: var(--Primary-Primary-300, #f2bc85); color: var(--Neutral-White, #ffffff); }
+.btn.primary.disabled.success  { background: var(--Success-Success-300, #5bd1af); color: var(--Neutral-White, #ffffff); }
+.btn.primary.disabled.info     { background: var(--Info-Info-300, #8ac3f6); color: var(--Neutral-White, #ffffff); }
+.btn.primary.disabled.error    { background: var(--Error-Error-300, #f89b9c); color: var(--Neutral-White, #ffffff); }
+.btn.primary.disabled.warning  { background: var(--Warning-Warning-300, #f6cd87); color: var(--Neutral-White, #ffffff); }
+.btn.primary.disabled.legacy   { background: var(--Secondary-Secondary-300, #62bad9); color: var(--Neutral-White, #ffffff); }
+
+/* ══════════════════════════════════════════════════════════════
+   SECONDARY severity
+═══════════════════════════════════════════════════════════════ */
+.btn.secondary {
+  background: var(--Neutral-White, #ffffff);
+  border: 1px solid;
+}
+
+.btn.secondary.default  { border-color: var(--Primary-Primary-500, #f49a3d); color: var(--Primary-Primary-500, #f49a3d); }
+.btn.secondary.default:hover { color: var(--Primary-Primary-600, #e58017); border-color: var(--Primary-Primary-600, #e58017); }
+
+.btn.secondary.success  { border-color: var(--Success-Success-500, #0abb87); color: var(--Success-Success-500, #0abb87); }
+.btn.secondary.success:hover { color: var(--Success-Success-600, #09aa7b); border-color: var(--Success-Success-600, #09aa7b); }
+
+.btn.secondary.info     { border-color: var(--Info-Info-500, #50a5f1); color: var(--Info-Info-500, #50a5f1); }
+.btn.secondary.info:hover { color: var(--Info-Info-600, #4996db); border-color: var(--Info-Info-600, #4996db); }
+
+.btn.secondary.error    { border-color: var(--Error-Error-500, #f46a6b); color: var(--Error-Error-500, #f46a6b); }
+.btn.secondary.error:hover { color: var(--Error-Error-600, #de6061); border-color: var(--Error-Error-600, #de6061); }
+
+.btn.secondary.warning  { border-color: var(--Warning-Warning-500, #f1b44c); color: var(--Warning-Warning-500, #f1b44c); }
+.btn.secondary.warning:hover { color: var(--Warning-Warning-600, #dba445); border-color: var(--Warning-Warning-600, #dba445); }
+
+.btn.secondary.legacy   { border-color: var(--Secondary-Secondary-500, #008dbf); color: var(--Secondary-Secondary-500, #008dbf); }
+.btn.secondary.legacy:hover { color: var(--Secondary-Secondary-600, #007199); border-color: var(--Secondary-Secondary-600, #007199); }
+
+/* Disabled secondary */
+.btn.secondary.disabled.default  { border-color: var(--Primary-Primary-300, #f2bc85); color: var(--Primary-Primary-300, #f2bc85); }
+.btn.secondary.disabled.success  { border-color: var(--Success-Success-300, #5bd1af); color: var(--Success-Success-300, #5bd1af); }
+.btn.secondary.disabled.info     { border-color: var(--Info-Info-300, #8ac3f6); color: var(--Info-Info-300, #8ac3f6); }
+.btn.secondary.disabled.error    { border-color: var(--Error-Error-300, #f89b9c); color: var(--Error-Error-300, #f89b9c); }
+.btn.secondary.disabled.warning  { border-color: var(--Warning-Warning-300, #f6cd87); color: var(--Warning-Warning-300, #f6cd87); }
+.btn.secondary.disabled.legacy   { border-color: var(--Secondary-Secondary-300, #62bad9); color: var(--Secondary-Secondary-300, #62bad9); }
+
+/* ══════════════════════════════════════════════════════════════
+   TERTIARY severity
+═══════════════════════════════════════════════════════════════ */
+.btn.tertiary { background: none; border: none; }
+
+.btn.tertiary.default,
+.btn.tertiary.legacy {
+  border: 1px solid var(--Gray-Gray-200, #c3c9d9);
+  color: var(--Gray-Gray-500, #69738c);
+}
+.btn.tertiary.default:hover,
+.btn.tertiary.legacy:hover {
+  border-color: var(--Gray-Gray-400, #858ea6);
+  color: var(--Gray-Gray-600, #475066);
+}
+
+.btn.tertiary.success { color: var(--Success-Success-500, #0abb87); }
+.btn.tertiary.success:hover { background: var(--Success-Success-50, #e7f8f3); }
+
+.btn.tertiary.info { color: var(--Info-Info-500, #50a5f1); }
+.btn.tertiary.info:hover { background: var(--Info-Info-50, #eef6fe); }
+
+.btn.tertiary.error { color: var(--Error-Error-500, #f46a6b); }
+.btn.tertiary.error:hover { background: var(--Error-Error-50, #fef0f0); }
+
+.btn.tertiary.warning { color: var(--Warning-Warning-500, #f1b44c); }
+.btn.tertiary.warning:hover { background: var(--Warning-Warning-50, #fef8ed); }
+
+.btn.tertiary.dropdown {
+  color: var(--Gray-Gray-500, #69738c);
+  font-weight: var(--font-weight-regular);
+  font-size: var(--font-size-s);
+  background: transparent;
+}
+
+/* Disabled tertiary */
+.btn.tertiary.disabled.default,
+.btn.tertiary.disabled.legacy {
+  border: 1px solid var(--Gray-Gray-200, #c3c9d9);
+  color: var(--Gray-Gray-400, #858ea6);
+}
+.btn.tertiary.disabled.success { color: var(--Success-Success-300, #5bd1af); }
+.btn.tertiary.disabled.info    { color: var(--Info-Info-300, #8ac3f6); }
+.btn.tertiary.disabled.error   { color: var(--Error-Error-300, #f89b9c); }
+.btn.tertiary.disabled.warning { color: var(--Warning-Warning-300, #f6cd87); }
+
+/* ── Loading spinner ─────────────────────────────────────────── */
+.spin {
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to   { transform: rotate(360deg); }
+}