@dropi/ui 0.1.18 → 0.1.20

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

@@ -0,0 +1,179 @@
+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';
+    closed = false;
+    /** Emitted when the banner is clicked (only when no link is set) */
+    dropiBannerClick;
+    /** Emitted when the close button is clicked */
+    dropiBannerClose;
+    handleClick(e) {
+        if (!this.link) {
+            e.preventDefault();
+            this.dropiBannerClick.emit();
+        }
+    }
+    closeBanner(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        this.closed = true;
+        this.dropiBannerClose.emit();
+    }
+    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'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "closed": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dropiBannerClick",
+                "name": "dropiBannerClick",
+                "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": "dropiBannerClose",
+                "name": "dropiBannerClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the close button is clicked"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "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"
+                        }
+                    }
+                }
+            }];
+    }
+}

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

@@ -3,7 +3,10 @@
 }
 
 :host([full-width]) {
-  display: block;
+  display: flex;
+  width: 100%;
+}
+:host([full-width]) .btn {
   width: 100%;
 }
 
@@ -13,7 +16,6 @@
   all: unset;
   box-sizing: border-box;
   display: flex;
-  width: 100%;
   align-items: center;
   justify-content: center;
   gap: var(--Size-1, 4px);

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

@@ -13,6 +13,8 @@ export class DropiButton {
     size = 'normal';
     /** Button state */
     state = 'default';
+    /** Full width button */
+    fullWidth = false;
     /** Icon name to show before the text */
     preIcon = '';
     /** Icon name to show after the text */
@@ -62,14 +64,14 @@ export class DropiButton {
         const hasText = this.text !== '';
         const showPostIcon = this.postIcon !== '' || this.type === 'dropdown';
         const dropdownIcon = this.type === 'dropdown' ? 'Dropdown-down' : this.postIcon;
-        return (h("button", { key: '6cde7f2616d1cff9e3304481f2a0c38aabc34192', class: {
+        return (h("button", { key: 'e924f56cb86a87ee8a314cfc5c278042a4d0a87d', class: {
                 btn: true,
                 'without-text': !hasText,
                 [this.severity]: true,
                 [this.type]: true,
                 [this.size]: true,
                 [this.state]: true,
-            }, disabled: isDisabled, onClick: (e) => this.handleClick(e) }, this.preIcon && (h("dropi-icon", { key: '769cea8fce2947552462aa2cbbb09d64df952c76', name: this.preIcon, width: this.iconSize, height: this.iconSize, color: this.fontColor })), hasText && h("span", { key: 'f66ad80283d54f643cf37ea702145127b90d4ce4', class: "text" }, this.text), showPostIcon && (h("dropi-icon", { key: '4fd9c7d7d029c3316bc0492576cda0cca74fa460', name: dropdownIcon, width: this.iconSize, height: this.iconSize, color: this.fontColor })), this.state === 'loading' && this.renderLoadingSpinner(), h("slot", { key: '3280c56a28ea40016d35e186b9997635b8ba881b' })));
+            }, disabled: isDisabled, onClick: (e) => this.handleClick(e) }, this.preIcon && (h("dropi-icon", { key: '6d42026da19f7bf2fc6186659b8afc48748544f1', name: this.preIcon, width: this.iconSize, height: this.iconSize, color: this.fontColor })), hasText && h("span", { key: 'c71ee430fec84cd24d261dc12973ad0b472cc71c', class: "text" }, this.text), showPostIcon && (h("dropi-icon", { key: 'ff3890de446e5b48c88a980f01cce4e7b9764b24', name: dropdownIcon, width: this.iconSize, height: this.iconSize, color: this.fontColor })), this.state === 'loading' && this.renderLoadingSpinner(), h("slot", { key: '3ee6aacd17a004664ad4bcf89219a8e2dc865343' })));
     }
     static get is() { return "dropi-button"; }
     static get encapsulation() { return "shadow"; }
@@ -189,6 +191,26 @@ export class DropiButton {
                 "attribute": "state",
                 "defaultValue": "'default'"
             },
+            "fullWidth": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Full width button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "full-width",
+                "defaultValue": "false"
+            },
             "preIcon": {
                 "type": "string",
                 "mutable": false,

package/dist/collection/components/dropi-card-checkbox/dropi-card-checkbox.css

@@ -0,0 +1,90 @@
+:host {
+  display: block;
+  width: 100%;
+}
+
+*, *::before, *::after { box-sizing: border-box; }
+
+.container-card-check {
+  padding: var(--Size-4, 16px);
+  border: 1px solid var(--Gray-Gray-200, #c3c9d9);
+  border-radius: var(--Size-2, 8px);
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: var(--Size-3, 12px);
+  cursor: pointer;
+  height: 66px;
+  overflow: hidden;
+  transition: background 0.15s ease, border-color 0.15s ease;
+}
+
+.container-card-check.disabled {
+  border-radius: var(--Border-2, 8px);
+  border: 1px solid var(--Gray-Gray-100, #e6eaf2);
+  background-color: var(--Gray-Gray-50, #f7f8fa);
+  cursor: default;
+}
+
+.container-card-check.disabled .title-check,
+.container-card-check.disabled .description-text,
+.container-card-check.disabled .extra-info {
+  color: var(--Gray-Gray-400, #858ea6);
+}
+
+.container-text {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  text-align: start;
+  overflow: hidden;
+}
+
+.title-check {
+  color: var(--Gray-Gray-700, #32394d);
+  font-size: var(--font-size-m, 14px);
+  font-weight: var(--font-weight-regular, 400);
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.description-text {
+  color: var(--Gray-Gray-500, #69738c);
+  font-size: var(--font-size-s, 12px);
+  margin-top: var(--Size-1, 4px);
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.extra-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-direction: column;
+  gap: 4px;
+  flex-shrink: 0;
+  font-size: var(--font-size-s, 12px);
+  color: var(--Gray-Gray-600, #475066);
+}
+
+.extra-info h4 {
+  margin: 0;
+  font-size: var(--font-size-s, 12px);
+}
+
+.default-card {
+  border: none;
+}
+
+.is-checked {
+  background: var(--Primary-Primary-50, #fff8f0);
+  border: 1px solid var(--Primary-Primary-500, #f49a3d);
+}