@dropi/ui 0.1.24 → 0.1.26

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

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

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

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

@@ -1,177 +0,0 @@
-: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); }
-}