@dropi/ui 0.1.20 → 0.1.22

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

@@ -1,50 +1,68 @@
 import { h } from "@stencil/core";
 /**
  * @component dropi-card-product
- * Product card showing image, name, price, supplier, and action buttons.
+ * Product card showing image, supplier insignia, name, stock, prices and action button.
  */
 export class DropiCardProduct {
     /** Product image URL */
     image = '';
     /** Product name */
     productName = '';
-    /** Product price */
-    price = 0;
+    /** 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 "Add to store" button */
+    /** Show "Enviar a cliente" 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 */
+    /** 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: '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) => {
+        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.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")))));
+                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"; }
@@ -100,7 +118,27 @@ export class DropiCardProduct {
                 "attribute": "product-name",
                 "defaultValue": "''"
             },
-            "price": {
+            "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": {
@@ -112,12 +150,12 @@ export class DropiCardProduct {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Product price"
+                    "text": "Suggested price for the dropshipper (Precio sugerido)"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "price",
+                "attribute": "suggested-price",
                 "defaultValue": "0"
             },
             "currency": {
@@ -180,47 +218,47 @@ export class DropiCardProduct {
                 "attribute": "category",
                 "defaultValue": "''"
             },
-            "showFavorite": {
-                "type": "boolean",
+            "stock": {
+                "type": "number",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "number",
+                    "resolved": "number",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Show favorite button"
+                    "text": "Stock quantity (0 = Agotado)"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "show-favorite",
-                "defaultValue": "true"
+                "attribute": "stock",
+                "defaultValue": "0"
             },
-            "isFavorite": {
-                "type": "boolean",
-                "mutable": true,
+            "supplierCategory": {
+                "type": "string",
+                "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "'verified' | 'premium' | 'exclusive' | ''",
+                    "resolved": "\"\" | \"exclusive\" | \"premium\" | \"verified\"",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Is marked as favorite"
+                    "text": "Supplier category for insignia: 'verified' | 'premium' | 'exclusive' | ''"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "is-favorite",
-                "defaultValue": "false"
+                "attribute": "supplier-category",
+                "defaultValue": "''"
             },
-            "showAddButton": {
+            "showFavorite": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -232,55 +270,35 @@ export class DropiCardProduct {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Show \"Add to store\" button"
+                    "text": "Show favorite button"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "show-add-button",
+                "attribute": "show-favorite",
                 "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,
+            "isFavorite": {
+                "type": "boolean",
+                "mutable": true,
                 "complexType": {
-                    "original": "'success' | 'warning' | 'error' | 'info' | 'default'",
-                    "resolved": "\"default\" | \"error\" | \"info\" | \"success\" | \"warning\"",
+                    "original": "boolean",
+                    "resolved": "boolean",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Badge color variant"
+                    "text": "Is marked as favorite"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "badge-type",
-                "defaultValue": "'default'"
+                "attribute": "is-favorite",
+                "defaultValue": "false"
             },
-            "inStock": {
+            "showAddButton": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -292,26 +310,26 @@ export class DropiCardProduct {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Stock availability"
+                    "text": "Show \"Enviar a cliente\" button"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "in-stock",
+                "attribute": "show-add-button",
                 "defaultValue": "true"
             }
         };
     }
     static get events() {
         return [{
-                "method": "dropiCardClick",
-                "name": "dropiCardClick",
+                "method": "onProductClick",
+                "name": "onProductClick",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emitted when card is clicked"
+                    "text": "Emitted when card is clicked \u2014 matches Angular 'onProductClick'"
                 },
                 "complexType": {
                     "original": "void",
@@ -319,14 +337,14 @@ export class DropiCardProduct {
                     "references": {}
                 }
             }, {
-                "method": "dropiToggleFavorite",
-                "name": "dropiToggleFavorite",
+                "method": "changeFavorite",
+                "name": "changeFavorite",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emitted when favorite toggled"
+                    "text": "Emitted when favorite toggled \u2014 matches Angular 'changeFavorite'"
                 },
                 "complexType": {
                     "original": "boolean",
@@ -341,7 +359,22 @@ export class DropiCardProduct {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emitted when \"Add\" button clicked"
+                    "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",

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

@@ -7,7 +7,7 @@
   justify-content: space-between;
   gap: var(--Size-4, 16px);
   padding: var(--Size-3, 12px) var(--Size-4, 16px);
-  background: var(--Neutral-White, #fff);
+  background: var(--Neutral-White, #ffffff);
   border: 1px solid var(--Gray-Gray-100, #e6eaf2);
   border-radius: var(--Border-2, 8px);
 }
@@ -18,7 +18,7 @@
   margin: 0 0 4px;
   font-family: inherit;
   font-weight: var(--font-weight-bold, 700);
-  color: var(--Gray-Gray-800, #1a2033);
+  color: var(--Gray-Gray-800, #1f2433);
 }
 
 h5.card-section__title { font-size: var(--font-size-m, 14px); }

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

@@ -4,27 +4,27 @@ import { h } from "@stencil/core";
  * Section card with title, description and a switch or dropdown control.
  */
 export class DropiCardSection {
-    /** Section title */
-    sectionTitle = '';
+    /** Section title — matches Angular 'title' */
+    title = 'title';
     /** Section description */
-    description = '';
+    description = 'Description';
     /** Control type on the right */
-    typeElement = 'switch';
+    typeElement = 'dropdown';
     /** Title size variant */
-    type = 'medium';
+    type = 'important';
     /** Switch checked state */
     isChecked = false;
-    /** Emitted when switch changes. e.detail = new boolean value */
-    dropiChange;
+    /** Emitted when switch changes */
+    onChange;
     /** Emitted when dropdown icon is clicked */
-    dropiClick;
+    onClick;
     render() {
-        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: '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) => {
+        return (h("div", { key: 'aa7548c223bf3238b7af10e52821e3ffd19fefca', class: "card-section" }, h("div", { key: '6b0ed1e7f7c282b0f67277567a2fa1ffbab9d04e', class: "card-section__text" }, this.type === 'important'
+            ? h("h5", { class: "card-section__title card-section__title--important" }, this.title)
+            : h("h6", { class: "card-section__title" }, this.title), this.description && h("p", { key: 'f0c83d631d541d95c19e4a246634da56413a3de9', class: "card-section__desc" }, this.description)), h("div", { key: '976d78401ab26872df88115ae0f0449bcd2faae9', class: "card-section__control" }, this.typeElement === 'switch' ? (h("dropi-switch", { isChecked: this.isChecked, onOnChange: (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" }))))));
+                this.onChange.emit(e.detail);
+            } })) : (h("button", { class: "card-section__dropdown-btn", onClick: () => this.onClick.emit(), "aria-label": "Expandir" }, h("dropi-icon", { name: "Dropdown-down", width: "20px", height: "20px", color: "Gray-Gray-500" }))))));
     }
     static get is() { return "dropi-card-section"; }
     static get encapsulation() { return "shadow"; }
@@ -40,7 +40,7 @@ export class DropiCardSection {
     }
     static get properties() {
         return {
-            "sectionTitle": {
+            "title": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -52,13 +52,13 @@ export class DropiCardSection {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Section title"
+                    "text": "Section title \u2014 matches Angular 'title'"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "section-title",
-                "defaultValue": "''"
+                "attribute": "title",
+                "defaultValue": "'title'"
             },
             "description": {
                 "type": "string",
@@ -78,7 +78,7 @@ export class DropiCardSection {
                 "setter": false,
                 "reflect": false,
                 "attribute": "description",
-                "defaultValue": "''"
+                "defaultValue": "'Description'"
             },
             "typeElement": {
                 "type": "string",
@@ -98,7 +98,7 @@ export class DropiCardSection {
                 "setter": false,
                 "reflect": false,
                 "attribute": "type-element",
-                "defaultValue": "'switch'"
+                "defaultValue": "'dropdown'"
             },
             "type": {
                 "type": "string",
@@ -118,7 +118,7 @@ export class DropiCardSection {
                 "setter": false,
                 "reflect": false,
                 "attribute": "type",
-                "defaultValue": "'medium'"
+                "defaultValue": "'important'"
             },
             "isChecked": {
                 "type": "boolean",
@@ -144,14 +144,14 @@ export class DropiCardSection {
     }
     static get events() {
         return [{
-                "method": "dropiChange",
-                "name": "dropiChange",
+                "method": "onChange",
+                "name": "onChange",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emitted when switch changes. e.detail = new boolean value"
+                    "text": "Emitted when switch changes"
                 },
                 "complexType": {
                     "original": "boolean",
@@ -159,8 +159,8 @@ export class DropiCardSection {
                     "references": {}
                 }
             }, {
-                "method": "dropiClick",
-                "name": "dropiClick",
+                "method": "onClick",
+                "name": "onClick",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,