@dropi/ui 0.1.27 → 0.1.28

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

@@ -0,0 +1,235 @@
+:host {
+  display: block;
+  font-family: 'Inter', sans-serif;
+}
+*, *::before, *::after { box-sizing: border-box; }
+
+/* ── Card wrapper ── */
+.dropi-card-product {
+  position: relative;
+  background: #ffffff;
+  border-radius: 8px;
+  overflow: hidden;
+  transition: all 0.2s ease-in-out;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 450px;
+  box-shadow: none;
+}
+
+/* ── Image container ── */
+.product-image-container {
+  padding: 4px;
+  flex-shrink: 0;
+}
+
+.product-image {
+  position: relative;
+  width: 100%;
+  aspect-ratio: 1;
+  border-radius: 8px;
+  border: 1px solid #c3c9d9;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #f8f9fa;
+}
+
+.product-image img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 8px;
+}
+
+.product-image img.error-img {
+  object-fit: contain;
+}
+
+/* ── Favorite button ── */
+.favorite-button {
+  position: absolute;
+  bottom: 5px;
+  right: 6px;
+  border-radius: 8px;
+  padding: 12px;
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 42px;
+  height: 40px;
+  background: #ffffff;
+  border: 1px solid #858ea6;
+}
+
+.favorite-button.favorite-active {
+  background: var(--Primary-Primary-500, #f49a3d);
+  border: 1px solid var(--Primary-Primary-500, #f49a3d);
+}
+
+/* ── Product info ── */
+.product-info {
+  position: relative;
+  padding: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  flex: 1;
+  justify-content: space-between;
+}
+
+/* ── Supplier insignia — overlaps from top ── */
+.supplier-insignia {
+  position: absolute;
+  top: -24px;
+  left: 0px;
+}
+
+/* ── Header: category + stock ── */
+.product-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  height: 26px;
+}
+
+.category {
+  color: #69738c;
+  font-family: 'Inter', sans-serif;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 1.5;
+  flex: 1;
+}
+
+.stock-info {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  font-family: 'Inter', sans-serif;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 1.5;
+}
+
+.stock-label {
+  color: #69738c;
+}
+
+.stock-value {
+  font-weight: 500;
+}
+
+/* ── Product name ── */
+.product-name {
+  color: #32394d;
+  font-family: 'Inter', sans-serif;
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 1.5;
+  margin: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
+/* ── Supplier ── */
+.supplier-info {
+  font-family: 'Inter', sans-serif;
+  font-size: 12px;
+  line-height: 1.2;
+}
+
+.supplier-label {
+  color: #69738c;
+  font-weight: 400;
+}
+
+.supplier-name {
+  color: #50a5f1;
+  font-weight: 400;
+  margin-left: 4px;
+  cursor: pointer;
+}
+
+/* ── Prices ── */
+.price-container {
+  display: flex;
+  gap: 8px;
+  margin-top: 4px;
+}
+
+.price-item {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.price-label {
+  color: #69738c;
+  font-family: 'Inter', sans-serif;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 1.5;
+  height: 18px;
+  min-width: max-content;
+}
+
+.price-value {
+  color: #32394d;
+  font-family: 'Inter', sans-serif;
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 1.1;
+  margin-top: 2px;
+}
+
+/* ── Separator ── */
+.separator {
+  height: 1px;
+  background: #e6eaf2;
+  margin: 0;
+  flex-shrink: 0;
+}
+
+/* ── Action button ── */
+.action-button {
+  background: #ffffff;
+  border: none;
+  border-top: 1px solid #e6eaf2;
+  padding: 12px;
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  height: 40px;
+  flex-shrink: 0;
+}
+
+.action-button--disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+}
+
+.button-text {
+  font-family: 'Inter', sans-serif;
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 1.1;
+  color: #f49a3d;
+  text-align: center;
+  white-space: nowrap;
+}

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

@@ -0,0 +1,386 @@
+import { h } from "@stencil/core";
+/**
+ * @component dropi-card-product
+ * Product card showing image, supplier insignia, name, stock, prices and action button.
+ */
+export class DropiCardProduct {
+    /** Product image URL */
+    image = '';
+    /** Product name */
+    productName = '';
+    /** Sale / supplier price (Precio proveedor) */
+    salePrice = 0;
+    /** Suggested price for the dropshipper (Precio sugerido) */
+    suggestedPrice = 0;
+    /** Price currency symbol */
+    currency = '$';
+    /** Supplier / store name */
+    supplier = '';
+    /** Category label */
+    category = '';
+    /** Stock quantity (0 = Agotado) */
+    stock = 0;
+    /** Supplier category for insignia: 'verified' | 'premium' | 'exclusive' | '' */
+    supplierCategory = '';
+    /** Show favorite button */
+    showFavorite = true;
+    /** Is marked as favorite */
+    isFavorite = false;
+    /** Show "Enviar a cliente" button */
+    showAddButton = true;
+    /** Emitted when card is clicked — matches Angular 'onProductClick' */
+    onProductClick;
+    /** Emitted when favorite toggled — matches Angular 'changeFavorite' */
+    changeFavorite;
+    /** Emitted when "Enviar a cliente" button clicked */
+    dropiAddProduct;
+    /** Emitted when supplier name clicked */
+    dropiSupplierClick;
+    formatPrice(val) {
+        if (val == null)
+            return '0';
+        return val.toLocaleString('es-CO');
+    }
+    get inStock() {
+        return this.stock > 0;
+    }
+    getStockColor() {
+        if (this.stock === 0)
+            return 'var(--Error-Error-500, #f46a6b)';
+        if (this.stock <= 10)
+            return 'var(--Warning-Warning-500, #f59e0b)';
+        return 'var(--Success-Success-500, #0abb87)';
+    }
+    render() {
+        return (h("div", { key: '42990ea883dcd6cc72e1f62771f7b9554c36bdba', class: "dropi-card-product", onClick: () => this.onProductClick.emit() }, h("div", { key: '59295427ddc350ec3c70d7d1bd4803ffa6bf26b0', class: "product-image-container" }, h("div", { key: '9d10e18f2eadf16f0c0b1b7cb7860d08f2ca778f', class: "product-image" }, h("img", { key: '19f7af8eddcbea880d32ef30603d55bfe9337f17', src: this.image || '', alt: this.productName, onError: (e) => {
+                e.target.src = './assets/utils/no-image.jpg';
+            }, class: !this.image ? 'error-img' : '' }), this.showFavorite && (h("button", { key: 'a6e13eea7c211fd772fe5ee7c13c7d475d54986c', class: { 'favorite-button': true, 'favorite-active': this.isFavorite }, onClick: (e) => {
+                e.stopPropagation();
+                this.isFavorite = !this.isFavorite;
+                this.changeFavorite.emit(this.isFavorite);
+            }, "aria-label": "Favorito" }, h("dropi-icon", { key: '0020aaa1beffedd0243c62f616dfeb6428ec63e5', name: this.isFavorite ? 'Heart-solid' : 'Heart', width: "18px", height: "18px", color: this.isFavorite ? '#fff' : '#858ea6' }))))), h("div", { key: '390a04f46d8394deb0591969a04525f3687509a0', class: "product-info" }, this.supplierCategory && (h("dropi-ilustration-icon", { key: '7fa320fcc36f6d4929197a2d88e59deb76d34ab0', class: "supplier-insignia", type: "insignia", stateInsignia: this.supplierCategory, tagProduct: true })), h("div", { key: '67e922b0afc44b3f376db3b20a33d7cc0ae8e987', class: "product-header" }, this.category && (h("span", { key: '421f39afc07922579610fe57abdfa37b4fa68586', class: "category" }, this.category)), h("div", { key: 'e4ad1d38535bd876298efb6d819d3355ac6b7446', class: "stock-info" }, h("span", { key: '5dbdabc282dbfaee4adec81668d38a909e04227d', class: "stock-label" }, "Stock:"), h("span", { key: 'f14a47956953779f4527404930b4a988ac5c5737', class: "stock-value", style: { color: this.getStockColor() } }, this.stock === 0 ? 'Agotado' : this.stock))), h("h3", { key: '4403e622316112df4075fafbbbbc17151d2e1b39', class: "product-name" }, this.productName), this.supplier && (h("div", { key: '28554238023a313e1698847a5faccd17e9bbd750', class: "supplier-info" }, h("span", { key: 'e34245925f659f232050ad835cf83690b112d7d0', class: "supplier-label" }, "Proveedor:"), h("span", { key: 'cabf8743951095acf0c05dd6e48ee74140984773', class: "supplier-name", onClick: (e) => { e.stopPropagation(); this.dropiSupplierClick.emit(); } }, this.supplier))), h("div", { key: '193982dc4aea14f337f64c9156d97f7c23d02db7', class: "price-container" }, h("div", { key: 'f2925c29fe4d5f9be2f92c501b92351e9a4f60e0', class: "price-item" }, h("span", { key: 'd0a8f99140d6ced64e19a69a2f198ba861cca017', class: "price-label" }, "Precio proveedor"), h("span", { key: '6fa5b8b5cd1f6d6e7b2551bdceedf65e3cb0029d', class: "price-value" }, this.currency, " ", this.formatPrice(this.salePrice))), h("div", { key: '0a37ead7f660608ed6303c97893fdd9156b5bfad', class: "price-item" }, h("span", { key: '8bb33b1b418fdbb79c31ed69ddfa2598f6450efd', class: "price-label" }, "Precio sugerido"), h("span", { key: '2df4c30b299190461f0032a66cc8d281ce9c9dab', class: "price-value" }, this.currency, " ", this.formatPrice(this.suggestedPrice))))), h("div", { key: '91a8306e386ac8d0422a02d3b4bac2d96ba7bebc', class: "separator" }), this.showAddButton && (h("div", { key: '69fd0267e5388770f5067a23d4ddf2636867b030', class: { 'action-button': true, 'action-button--disabled': !this.inStock }, onClick: (e) => {
+                e.stopPropagation();
+                if (this.inStock)
+                    this.dropiAddProduct.emit();
+            } }, h("dropi-icon", { key: '6e9a7333778b5a4e75bca612f7900909e9b52c80', name: "Shopping-cart-arrow-rigth", width: "20px", height: "20px", color: "#f49a3d" }), h("span", { key: '1f3eb20049a94cb74bef8c89f8773a831667dc7b', class: "button-text" }, "Enviar a cliente")))));
+    }
+    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": "''"
+            },
+            "salePrice": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sale / supplier price (Precio proveedor)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "sale-price",
+                "defaultValue": "0"
+            },
+            "suggestedPrice": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Suggested price for the dropshipper (Precio sugerido)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "suggested-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": "''"
+            },
+            "stock": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Stock quantity (0 = Agotado)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "stock",
+                "defaultValue": "0"
+            },
+            "supplierCategory": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'verified' | 'premium' | 'exclusive' | ''",
+                    "resolved": "\"\" | \"exclusive\" | \"premium\" | \"verified\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Supplier category for insignia: 'verified' | 'premium' | 'exclusive' | ''"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "supplier-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 \"Enviar a cliente\" button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-add-button",
+                "defaultValue": "true"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "onProductClick",
+                "name": "onProductClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when card is clicked \u2014 matches Angular 'onProductClick'"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "changeFavorite",
+                "name": "changeFavorite",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when favorite toggled \u2014 matches Angular 'changeFavorite'"
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }, {
+                "method": "dropiAddProduct",
+                "name": "dropiAddProduct",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when \"Enviar a cliente\" button clicked"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "dropiSupplierClick",
+                "name": "dropiSupplierClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when supplier name clicked"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}

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

@@ -0,0 +1,42 @@
+:host { display: block; width: 100%; }
+*, *::before, *::after { box-sizing: border-box; }
+
+.card-section {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--Size-4, 16px);
+  padding: var(--Size-3, 12px) var(--Size-4, 16px);
+  background: var(--Neutral-White, #ffffff);
+  border: 1px solid var(--Gray-Gray-100, #e6eaf2);
+  border-radius: var(--Border-2, 8px);
+}
+
+.card-section__text { flex: 1; }
+
+.card-section__title {
+  margin: 0 0 4px;
+  font-family: inherit;
+  font-weight: var(--font-weight-bold, 700);
+  color: var(--Gray-Gray-800, #1f2433);
+}
+
+h5.card-section__title { font-size: var(--font-size-m, 14px); }
+h6.card-section__title { font-size: var(--font-size-s, 12px); }
+
+.card-section__desc {
+  margin: 0;
+  font-size: var(--font-size-xs, 10px);
+  color: var(--Gray-Gray-500, #69738c);
+}
+
+.card-section__control { flex-shrink: 0; }
+
+.card-section__dropdown-btn {
+  display: flex;
+  align-items: center;
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+}