@dropi/ui 0.1.19 → 0.1.20

package/dist/collection/components/dropi-card-product/dropi-card-product.js

@@ -0,0 +1,353 @@
+import { h } from "@stencil/core";
+/**
+ * @component dropi-card-product
+ * Product card showing image, name, price, supplier, and action buttons.
+ */
+export class DropiCardProduct {
+    /** Product image URL */
+    image = '';
+    /** Product name */
+    productName = '';
+    /** Product price */
+    price = 0;
+    /** Price currency symbol */
+    currency = '$';
+    /** Supplier / store name */
+    supplier = '';
+    /** Category label */
+    category = '';
+    /** Show favorite button */
+    showFavorite = true;
+    /** Is marked as favorite */
+    isFavorite = false;
+    /** Show "Add to store" button */
+    showAddButton = true;
+    /** Badge text (e.g. "Nuevo", "Oferta") */
+    badge = '';
+    /** Badge color variant */
+    badgeType = 'default';
+    /** Stock availability */
+    inStock = true;
+    /** Emitted when card is clicked */
+    dropiCardClick;
+    /** Emitted when favorite toggled */
+    dropiToggleFavorite;
+    /** Emitted when "Add" button clicked */
+    dropiAddProduct;
+    formatPrice(val) {
+        return val.toLocaleString('es-CO');
+    }
+    render() {
+        return (h("div", { key: '98684e3d5fac7968633bcd62b46dba6f0e0f5d64', class: "card", onClick: () => this.dropiCardClick.emit() }, h("div", { key: '848cf4ef786584e5b02a99249df3cfa48c41d428', class: "card__image-wrap" }, this.image
+            ? h("img", { class: "card__image", src: this.image, alt: this.productName, loading: "lazy" })
+            : h("div", { class: "card__image-placeholder" }, h("dropi-icon", { name: "Image", width: "32px", height: "32px", color: "Gray-Gray-300" })), this.badge && (h("span", { key: '7238c35891b35a0bb12a774817542323bcd33e99', class: `card__badge card__badge--${this.badgeType}` }, this.badge)), this.showFavorite && (h("button", { key: '647c8569997ff8ba96ca0d4d19a12570fb353d93', class: { 'card__fav': true, 'card__fav--active': this.isFavorite }, onClick: (e) => {
+                e.stopPropagation();
+                this.isFavorite = !this.isFavorite;
+                this.dropiToggleFavorite.emit(this.isFavorite);
+            }, "aria-label": "Favorito" }, h("dropi-icon", { key: 'a9d654e3bdc5816f2c58537cb07c486a61021fcd', name: this.isFavorite ? 'Heart-filled' : 'Heart', width: "16px", height: "16px", color: this.isFavorite ? 'Error-Error-500' : 'Gray-Gray-400' })))), h("div", { key: 'c553168c5926dafb582210b680571eb9b4ae72ea', class: "card__body" }, this.category && h("span", { key: '6cee8941275bc0461c9d06b0c5bf2f0a75f14f0b', class: "card__category" }, this.category), h("p", { key: 'd4577a94b9a7b7b8b9c275987369dc56e4a0c2b4', class: "card__name" }, this.productName), h("p", { key: '2ead66bd7ce7a7f15285b8099cfea7de8d4f6d1a', class: "card__price" }, h("span", { key: '90e317dc5bdad1cbe6199ef9abd13cf6468a439b', class: "card__price-currency" }, this.currency), this.formatPrice(this.price)), this.supplier && (h("p", { key: 'f70fc28afbc468d7eca3683afbc193ec47c275f4', class: "card__supplier" }, this.supplier)), !this.inStock && (h("p", { key: '37d9911367a0e0504e661e52eee69f4628572bb1', class: "card__no-stock" }, "Sin stock disponible"))), this.showAddButton && (h("div", { key: 'eef0213d00268319b6fa9901ced750d2f06735ed', class: "card__footer" }, h("button", { key: 'f026718a0146fdea94dbcda40614354be80fa932', class: "card__add-btn", disabled: !this.inStock, onClick: (e) => { e.stopPropagation(); this.dropiAddProduct.emit(); } }, h("dropi-icon", { key: 'dc3ff5553e60df93a3eb93bab43be874f8d6582d', name: "Plus", width: "14px", height: "14px", color: "Neutral-White" }), "Agregar")))));
+    }
+    static get is() { return "dropi-card-product"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dropi-card-product.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dropi-card-product.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "image": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Product image URL"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "image",
+                "defaultValue": "''"
+            },
+            "productName": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Product name"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "product-name",
+                "defaultValue": "''"
+            },
+            "price": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Product price"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "price",
+                "defaultValue": "0"
+            },
+            "currency": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Price currency symbol"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "currency",
+                "defaultValue": "'$'"
+            },
+            "supplier": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Supplier / store name"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "supplier",
+                "defaultValue": "''"
+            },
+            "category": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Category label"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "category",
+                "defaultValue": "''"
+            },
+            "showFavorite": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show favorite button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-favorite",
+                "defaultValue": "true"
+            },
+            "isFavorite": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Is marked as favorite"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "is-favorite",
+                "defaultValue": "false"
+            },
+            "showAddButton": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show \"Add to store\" button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-add-button",
+                "defaultValue": "true"
+            },
+            "badge": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Badge text (e.g. \"Nuevo\", \"Oferta\")"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "badge",
+                "defaultValue": "''"
+            },
+            "badgeType": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'success' | 'warning' | 'error' | 'info' | 'default'",
+                    "resolved": "\"default\" | \"error\" | \"info\" | \"success\" | \"warning\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Badge color variant"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "badge-type",
+                "defaultValue": "'default'"
+            },
+            "inStock": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Stock availability"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "in-stock",
+                "defaultValue": "true"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dropiCardClick",
+                "name": "dropiCardClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when card is clicked"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "dropiToggleFavorite",
+                "name": "dropiToggleFavorite",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when favorite toggled"
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }, {
+                "method": "dropiAddProduct",
+                "name": "dropiAddProduct",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when \"Add\" button clicked"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}

package/dist/collection/components/dropi-card-section/dropi-card-section.js

@@ -19,9 +19,9 @@ export class DropiCardSection {
     /** Emitted when dropdown icon is clicked */
     dropiClick;
     render() {
-        return (h("div", { key: '5820426132998a0fcc95ec9bc5626044809bc8f9', class: "card-section" }, h("div", { key: '56023483c0be283b4e8b71bdb8ab91c3bbe0e518', class: "card-section__text" }, this.type === 'important'
+        return (h("div", { key: 'f2653804e3d325fb6859d5cc096c893c8fb08ed8', class: "card-section" }, h("div", { key: '25fb5e34a9abcdc6a2761adf7053256cb431304d', class: "card-section__text" }, this.type === 'important'
             ? h("h5", { class: "card-section__title card-section__title--important" }, this.sectionTitle)
-            : h("h6", { class: "card-section__title" }, this.sectionTitle), this.description && h("p", { key: '123f616e6404040a052c8e3313ea74368ef1564e', class: "card-section__desc" }, this.description)), h("div", { key: '70d91f09bfe12b561a0457d6b1c531e04c697119', class: "card-section__control" }, this.typeElement === 'switch' ? (h("dropi-switch", { isChecked: this.isChecked, onDropiChange: (e) => {
+            : h("h6", { class: "card-section__title" }, this.sectionTitle), this.description && h("p", { key: 'fbfb5509a685f39053aa787b57df7c9f2ba1b6eb', class: "card-section__desc" }, this.description)), h("div", { key: 'f5e6a3d27b08cd6d8be791d9d8bb007c2859d9d2', class: "card-section__control" }, this.typeElement === 'switch' ? (h("dropi-switch", { isChecked: this.isChecked, onDropiChange: (e) => {
                 this.isChecked = e.detail;
                 this.dropiChange.emit(e.detail);
             } })) : (h("button", { class: "card-section__dropdown-btn", onClick: () => this.dropiClick.emit(), "aria-label": "Expandir" }, h("dropi-icon", { name: "Dropdown-down", width: "20px", height: "20px", color: "Gray-Gray-500" }))))));

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

@@ -0,0 +1,103 @@
+:host { display: block; width: 100%; }
+*, *::before, *::after { box-sizing: border-box; }
+
+.carousel {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Size-2, 8px);
+  width: 100%;
+}
+
+/* Stage */
+.carousel__stage {
+  position: relative;
+  width: 100%;
+  aspect-ratio: 16/9;
+  overflow: hidden;
+  border-radius: var(--Border-2, 8px);
+  background: var(--Gray-Gray-100, #eceef4);
+}
+
+.carousel__slide {
+  position: absolute;
+  inset: 0;
+  opacity: 0;
+  transition: opacity 0.4s ease;
+  pointer-events: none;
+}
+.carousel__slide--active {
+  opacity: 1;
+  pointer-events: all;
+}
+
+.carousel__img {
+  width: 100%;
+  height: 100%;
+}
+
+/* Navigation arrows */
+.carousel__nav {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  background: rgba(0, 0, 0, 0.4);
+  border: none;
+  border-radius: 50%;
+  width: 36px;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: background 0.15s;
+  z-index: 1;
+}
+.carousel__nav:hover { background: rgba(0,0,0,0.65); }
+.carousel__nav--prev { left: var(--Size-2, 8px); }
+.carousel__nav--next { right: var(--Size-2, 8px); }
+
+/* Dots */
+.carousel__dots {
+  display: flex;
+  justify-content: center;
+  gap: var(--Size-1, 4px);
+}
+
+.carousel__dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  border: none;
+  background: var(--Gray-Gray-300, #a0a9c0);
+  cursor: pointer;
+  padding: 0;
+  transition: background 0.2s, transform 0.2s;
+}
+.carousel__dot--active {
+  background: var(--Primary-Primary-500, #f49a3d);
+  transform: scale(1.3);
+}
+
+/* Thumbnails */
+.carousel__thumbs {
+  display: flex;
+  gap: var(--Size-2, 8px);
+  overflow-x: auto;
+  padding-bottom: 2px;
+}
+.carousel__thumbs::-webkit-scrollbar { height: 4px; }
+.carousel__thumbs::-webkit-scrollbar-thumb { background: var(--Gray-Gray-200, #c3c9d9); border-radius: 2px; }
+
+.carousel__thumb {
+  width: 56px;
+  height: 56px;
+  object-fit: cover;
+  border-radius: var(--Border-1, 4px);
+  cursor: pointer;
+  flex-shrink: 0;
+  opacity: 0.5;
+  border: 2px solid transparent;
+  transition: opacity 0.15s, border-color 0.15s;
+}
+.carousel__thumb:hover { opacity: 0.8; }
+.carousel__thumb--active { opacity: 1; border-color: var(--Primary-Primary-500, #f49a3d); }