@dropi/ui-components 1.0.0

package/src/components-source/card-product/card-product.component.html

@@ -0,0 +1,173 @@
+<div [class]="getRandomCardClass()" [style]="getCardStyles()" (click)="getProductDetails()">
+  <app-beta-tag *ngIf="bettaTester"></app-beta-tag>
+  <!-- Contenedor de imagen con altura fija de 214px como en Figma -->
+  <div [class]="getRandomImageContainerClass()" [style]="getImageContainerStyles()">
+    <div [class]="getRandomImageClass()" [style]="getImageStyles()">
+      <!-- Imagen del producto con manejo de errores -->
+      <img
+        [src]="imageUrl"
+        [alt]="product?.name || 'Product Image'"
+        (error)="onError($event)"
+        [ngClass]="{ 'error-img': imageError }"
+        style="width: 100%; height: 100%; object-fit: cover; border-radius: 8px"
+      />
+
+      <!-- Tags superpuestos en la esquina superior izquierda -->
+      <div
+        [class]="getRandomTagsClass()"
+        [style]="getTagsContainerStyles()"
+        *ngIf="productTags?.length > 0"
+      >
+        <div [class]="getRandomTagsRowClass()" [style]="getTagsRowStyles()">
+          <app-dropi-tag
+            *ngFor="let tag of productTags.slice(0, 2)"
+            [type]="tag?.type"
+            [state]="tag?.state"
+            [showIcon]="tag?.showIcon"
+            [icon]="tag?.icon"
+            [text]="tag?.text"
+          >
+          </app-dropi-tag>
+        </div>
+      </div>
+
+      <!-- Botón de favorito superpuesto en la esquina inferior derecha -->
+      <div
+        [class]="getRandomFavoriteButtonClass()"
+        [ngClass]="{ 'favorite-button': true, 'favorite-active': product?.favorite }"
+        [style]="getFavoriteButtonStyles()"
+        (click)="handleFavoriteToggle(); $event.stopPropagation()"
+      >
+        <app-icon
+          [name]="product?.favorite ? 'Heart-solid' : 'Heart'"
+          width="18px"
+          height="18px"
+          [color]="product?.favorite ? '#fff' : '#858ea6'"
+          [style]="{ display: 'flex', 'align-items': 'center', 'justify-content': 'center' }"
+        >
+        </app-icon>
+      </div>
+    </div>
+  </div>
+
+  <!-- Información del producto -->
+  <div [class]="getRandomProductInfoClass()" [style]="getProductInfoStyles()">
+    <!-- Header con categoría y stock -->
+    <div [class]="getRandomProductHeaderClass()" [style]="getProductHeaderStyles()">
+      <dropi-ilustration-icon
+        *ngIf="product?.supplier?.icon"
+        [style]="getRandomProviderCategoryStyles()"
+        [type]="'insignia'"
+        [stateInsignia]="product?.supplier?.icon"
+        [tagProduct]="true"
+      ></dropi-ilustration-icon>
+
+      <span
+        [class]="getRandomCategoryClass()"
+        [style]="getCategoryStyles()"
+        *ngIf="product?.categories && product?.categories.length > 0"
+        >{{ product?.categories[0]?.name | adjustName }}</span
+      >
+
+      <div [class]="getRandomStockInfoClass()" [style]="getStockInfoStyles()">
+        <span [class]="getRandomStockLabelClass()" [style]="getStockLabelStyles()">{{ "stock" | translate }}:</span>
+
+        <!-- Stocks mezclados aleatoriamente (real + falsos) -->
+        <span
+          *ngFor="let stockItem of getMixedStockDivs()"
+          [class]="stockItem.class"
+          [style]="stockItem.isReal ? getStockValueStyles() : getFakeStockStyles()"
+        >
+          {{ stockItem.value }}
+        </span>
+
+        <span
+          *ngIf="product?.private_user_stock && product?.private_user_stock > 0"
+          class="stock-private-user"
+          [style]="{
+            'font-weight': '500',
+            padding: '0px 6px',
+            'margin-left': '6px',
+            'border-radius': '4px',
+            background: 'var(--Success-Success-50, #e7f8f3)',
+            color: 'var(--Success-Success-500, #0abb87)',
+            'text-align': 'center'
+          }"
+        >
+          {{ product?.private_user_stock }}
+        </span>
+      </div>
+    </div>
+
+    <!-- Nombre del producto -->
+    <h3 [class]="getRandomProductNameClass()" [style]="getProductNameStyles()">
+      {{ product?.name | adjustName }}
+    </h3>
+
+    <!-- Proveedor -->
+    <div [class]="getRandomSupplierInfoClass()" [style]="getSupplierInfoStyles()">
+      <span [class]="getRandomSupplierLabelClass()" [style]="getSupplierLabelStyles()"
+        >{{ "supplier" | translate }}:</span
+      >
+      <span
+        [class]="getRandomSupplierNameClass()"
+        [style]="getSupplierNameStyles()"
+        (click)="getProvidersDetails(); $event.stopPropagation()"
+        >{{ product?.supplier?.name | adjustName }}</span
+      >
+    </div>
+
+    <!-- Precios -->
+    <div [class]="getRandomPriceContainerClass()" [style]="getPriceContainerStyles()">
+      <div [class]="getRandomPriceItemClass()" [style]="getPriceItemStyles()">
+        <span [class]="getRandomPriceLabelClass()" [style]="getPriceLabelStyles()"
+          >{{ "supplier price" | translate }}</span
+        >
+
+        <!-- Precios de proveedor mezclados aleatoriamente (real + falsos) -->
+        <currency
+          *ngFor="let priceItem of getMixedSupplierPriceDivs()"
+          [class]="priceItem.class"
+          [style]="priceItem.isReal ? getPriceValueStyles() : getFakePriceStyles()"
+          [value]="priceItem.value"
+        >
+        </currency>
+      </div>
+      <div [class]="getRandomPriceItemClass()" [style]="getPriceItemStyles()">
+        <span [class]="getRandomPriceLabelClass()" [style]="getPriceLabelStyles()"
+          >{{ "suggested price" | translate }}</span
+        >
+
+        <!-- Precios sugeridos mezclados aleatoriamente (real + falsos) -->
+        <currency
+          *ngFor="let priceItem of getMixedSuggestedPriceDivs()"
+          [class]="priceItem.class"
+          [style]="priceItem.isReal ? getPriceValueStyles() : getFakePriceStyles()"
+          [value]="priceItem.value"
+        >
+        </currency>
+      </div>
+    </div>
+  </div>
+
+  <!-- Separador horizontal -->
+  <div [class]="getRandomSeparatorClass()" [style]="getSeparatorStyles()"></div>
+
+  <!-- Botón de acción principal -->
+  <div
+    [class]="getRandomActionButtonClass()"
+    [style]="getActionButtonStyles()"
+    (click)="handleAddToCart(); $event.stopPropagation()"
+  >
+    <app-icon
+      name="Shopping-cart-arrow-rigth"
+      width="20px"
+      height="20px"
+      color="#f49a3d"
+      [style]="{ display: 'flex', 'align-items': 'center', 'justify-content': 'center' }"
+    ></app-icon>
+    <span [class]="getRandomButtonTextClass()" [style]="getButtonTextStyles()"
+      >{{ "send to client" | translate }}</span
+    >
+  </div>
+</div>