@dropi/ui 0.1.19 → 0.1.21

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

@@ -0,0 +1,119 @@
+import { h } from "@stencil/core";
+/**
+ * @component dropi-badge-legacy
+ * Legacy badge component used in tabs and elsewhere.
+ */
+export class DropiBadgeLegacy {
+    /** Type: state | counter */
+    type = 'state';
+    /** State: check | pending */
+    state = 'check';
+    /** Variant: primary | secondary | tertiary */
+    variant = 'primary';
+    /** Count (for type counterpart) */
+    count = 0;
+    render() {
+        const isCounter = this.type === 'counter';
+        return (h("div", { key: 'a450ec95a77df2cc01184b6eb8d935ba8f802e3d', class: {
+                'badge-legacy': true,
+                [`badge-legacy--${this.variant}`]: true,
+                [`badge-legacy--${this.type}`]: true
+            } }, isCounter ? (h("span", { class: "badge-count" }, this.count)) : (h("span", { class: { 'badge-state-icon': true, [`badge-state--${this.state}`]: true } }, this.state === 'check' ? '✓' : '...'))));
+    }
+    static get is() { return "dropi-badge-legacy"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dropi-badge-legacy.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dropi-badge-legacy.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'state' | 'counter'",
+                    "resolved": "\"counter\" | \"state\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Type: state | counter"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "'state'"
+            },
+            "state": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'check' | 'pending'",
+                    "resolved": "\"check\" | \"pending\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "State: check | pending"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "state",
+                "defaultValue": "'check'"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'primary' | 'secondary' | 'tertiary'",
+                    "resolved": "\"primary\" | \"secondary\" | \"tertiary\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Variant: primary | secondary | tertiary"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'primary'"
+            },
+            "count": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Count (for type counterpart)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "count",
+                "defaultValue": "0"
+            }
+        };
+    }
+}

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

@@ -0,0 +1,56 @@
+:host {
+  display: block;
+  width: 100%;
+}
+
+.dropi-banner-external {
+  display: block;
+  width: 100%;
+  position: relative;
+  margin-bottom: 16px;
+  border-radius: var(--Border-2, 8px);
+}
+
+.dropi-banner-external a {
+  display: block;
+  text-decoration: none;
+}
+
+.click-wrapper {
+  cursor: pointer;
+}
+
+.inner {
+  position: relative;
+  display: block;
+}
+
+.inner img {
+  display: block;
+  width: 100%;
+  height: auto;
+  border-radius: var(--Border-2, 8px);
+  max-width: 1220px;
+  margin: auto;
+}
+
+.close-btn {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  background: rgba(255, 255, 255, 0.8);
+  border: none;
+  border-radius: 50%;
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  padding: 0;
+  transition: background 0.15s ease;
+}
+
+.close-btn:hover {
+  background: rgba(255, 255, 255, 1);
+}

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

@@ -0,0 +1,243 @@
+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;
+    /** 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, loading: "lazy" }), 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": {}
+                }
+            }];
+    }
+}

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: '03396956a168feaa860265e9962d9c5cbca8b23f', class: "breadcrumb", "aria-label": "Breadcrumb" }, h("div", { key: '88e05f4ea225b26a9686bc9f1a01e8e3710806dc', class: "crumb-list" }, h("div", { key: '54e0dfc3bbef05a3041d187cd9ec0536f69c34e3', class: "crumb-home" }, h("a", { key: '31c971efc13b5122ff2775ee2f79b25c06a01b0f', href: this.homeRoute, class: "home-link", "aria-label": "Inicio", onClick: (e) => { e.preventDefault(); this.dropiNavigate.emit(this.homeRoute); } }, h("dropi-icon", { key: '8a436c3d254884e4479713a9c6981929bb91df55', name: this.homeIconName, width: "16px", color: "Gray-Gray-500" })), items.length > 0 && (h("dropi-icon", { key: 'f57beceaa6dab5ed00a2c1c38ff43ea6bce040f5', 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"
+                        }
+                    }
+                }
+            }];
+    }
+}