@dropi/ui 0.1.21 → 0.1.23

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

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

@@ -1,384 +0,0 @@
-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) {
-        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: '37c48cc67a7f0c7469a68052c90a2818535dce69', class: "dropi-card-product", onClick: () => this.onProductClick.emit() }, h("div", { key: '83404d72af41a88fd2abea553559b057b6fff12d', class: "product-image-container" }, h("div", { key: 'c1d5044b0bd09051e1901e897160fa47d2ded209', class: "product-image" }, h("img", { key: 'a70907ebb8bcd3a165e395a241fc60942f48c144', 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: '24c395c652a3d0dbb18258a8975ac79eeb6154fd', 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: 'b196e405c3046dbbb973f77e8f5c76a170154d6f', name: this.isFavorite ? 'Heart-solid' : 'Heart', width: "18px", height: "18px", color: this.isFavorite ? '#fff' : '#858ea6' }))))), h("div", { key: 'cb9d81caa32ad134093637426507a55462d25b5f', class: "product-info" }, this.supplierCategory && (h("dropi-ilustration-icon", { key: '4f642dfa0e8621094a7ab58710e592133b43cea2', class: "supplier-insignia", type: "insignia", stateInsignia: this.supplierCategory, tagProduct: true })), h("div", { key: '269a000490bf2c0eab9a0bc4f8371ed91c5b84d3', class: "product-header" }, this.category && (h("span", { key: 'af027a19e03a9ddb95c0901f01081a1a42d856f1', class: "category" }, this.category)), h("div", { key: '26d7d97df6ce9f3fadeb8e84e5a8b9cda0450e7f', class: "stock-info" }, h("span", { key: 'ef9c7537b9b2185c455189b3c1a4999f409501ba', class: "stock-label" }, "Stock:"), h("span", { key: '89fe2fe123967c57c769953d18e24015288a3d56', class: "stock-value", style: { color: this.getStockColor() } }, this.stock === 0 ? 'Agotado' : this.stock))), h("h3", { key: '79b5046ab7ea3adeca8066dcc2f174cfed3f92f3', class: "product-name" }, this.productName), this.supplier && (h("div", { key: 'a1ff7e3fcf77ad8f4c979d266aae712aff4c18b2', class: "supplier-info" }, h("span", { key: 'be92e4ddd9d0de947307bd4bfd474ae31c6f2f7c', class: "supplier-label" }, "Proveedor:"), h("span", { key: '7180d51dd2f1ecb3726aa24793184a140778afe6', class: "supplier-name", onClick: (e) => { e.stopPropagation(); this.dropiSupplierClick.emit(); } }, this.supplier))), h("div", { key: '86733596ad100c5510a347cbf73ca9e03590322b', class: "price-container" }, h("div", { key: 'c2d919ae1b106b27fdaf649a531e96167a00b787', class: "price-item" }, h("span", { key: '337611bf6f02199c99645299469e5a9d4a6428a9', class: "price-label" }, "Precio proveedor"), h("span", { key: '1c63de1e288c7fb30067908c37dd8451f302672e', class: "price-value" }, this.currency, " ", this.formatPrice(this.salePrice))), h("div", { key: 'b23b70d40afc0afca19d86b754d6476b65a22e73', class: "price-item" }, h("span", { key: '3b15127ac5c07361e6ba23107f845b835ac35406', class: "price-label" }, "Precio sugerido"), h("span", { key: '14eb8d5cdb5f6152a0a82c1428d21eebb81a6744', class: "price-value" }, this.currency, " ", this.formatPrice(this.suggestedPrice))))), h("div", { key: 'e13e6135234a25b927018265e9570ecbf2fb71dc', class: "separator" }), this.showAddButton && (h("div", { key: 'c1b70f77fda95df876436b9cf326d470eb250bd9', class: { 'action-button': true, 'action-button--disabled': !this.inStock }, onClick: (e) => {
-                e.stopPropagation();
-                if (this.inStock)
-                    this.dropiAddProduct.emit();
-            } }, h("dropi-icon", { key: 'f54207e6e1ebab2d2b0877af65b6353e02264ee4', name: "Shopping-cart-arrow-rigth", width: "20px", height: "20px", color: "#f49a3d" }), h("span", { key: 'e274c0343cdd202fa4e73e4d0843fe11d53aec6c', 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

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