@dropi/ui-components 1.0.0

package/src/components-source/dropi-dropdown/dropi-dropdown.component.ts

@@ -0,0 +1,53 @@
+import { CommonModule } from '@angular/common';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { DropiCheckboxComponent } from '../dropi-checkbox/dropi-checkbox.component';
+import { DropiAvatarsComponent } from '../dropi-avatars/dropi-avatars.component';
+import { CarrierImageUrl } from '@app/utilities/pipes/carrier-image-url.pipe';
+
+@Component({
+  selector: 'app-dropi-dropdown',
+  templateUrl: './dropi-dropdown.component.html',
+  styleUrls: ['./dropi-dropdown.component.scss'],
+  standalone: true,
+  imports: [CommonModule, DropiCheckboxComponent, DropiAvatarsComponent, CarrierImageUrl],
+})
+export class DropiDropdownComponent {
+  // altura en px o en rem o en cualquier medida
+  @Input() height = '';
+
+  //array de objets que se envian al dropdown
+  @Input() options = [];
+
+  //valor iterable a mostrar del model
+  @Input() valueModel = 'name';
+
+  @Input() isInSelect: boolean = false;
+
+  //tipo de la estructura del dropdown
+  @Input() parameters: {
+    type: 'checkbox';
+    icon: string;
+    iconCurrier: boolean;
+  };
+
+  @Output() modelChange = new EventEmitter<string[]>();
+
+  constructor() {
+    this.parameters = {
+      type: 'checkbox',
+      icon: '',
+      iconCurrier: false,
+    };
+  }
+
+  toggleValue(checkValue: boolean, value: any, index: number) {
+    this.options[index].checked = checkValue;
+    const seletedValues = this.options.filter((option) => option.checked);
+    this.modelChange.emit(seletedValues);
+  }
+
+  resetChecks() {
+    this.options.forEach((option) => (option['checked'] = false));
+    this.modelChange.emit([]);
+  }
+}

package/src/components-source/dropi-favorite-button/dropi-favorite-button.component.html

@@ -0,0 +1,23 @@
+<button
+  class="dropi-favorite-button"
+  [ngClass]="{ 'is-favorite': isFavorite }"
+  ngbTooltip="{{ isFavorite ? 'Remover de favoritos' : 'Añadir a favoritos' }}"
+  (click)="toggle()"
+  (mouseenter)="onMouseEnter()"
+  (mouseleave)="onMouseLeave()"
+>
+  <app-icon
+    *ngIf="!isFavorite && !isHovered"
+    name="Heart"
+    width="19px"
+    height="19px"
+    color="Gray-Gray-800"
+  ></app-icon>
+  <app-icon
+    *ngIf="isFavorite || isHovered"
+    name="Heart-solid"
+    width="19px"
+    height="19px"
+    color="Primary-Primary-500"
+  ></app-icon>
+</button>

package/src/components-source/dropi-favorite-button/dropi-favorite-button.component.scss

@@ -0,0 +1,21 @@
+.dropi-favorite-button {
+  border-radius: 8px;
+  border: 1px solid var(--Gray-Gray-200);
+  background: var(--Neutral-White);
+  appearance: none;
+  width: 37px;
+  height: 37px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  transition: all 0.2s ease-in-out;
+  will-change: auto;
+  app-icon {
+    display: grid;
+  }
+  &:hover,
+  &.is-favorite {
+    background: var(--Gray-gray-50, #f5f6f8);
+  }
+}

package/src/components-source/dropi-favorite-button/dropi-favorite-button.component.spec.ts

@@ -0,0 +1,240 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
+import { DropiFavoriteButtonComponent } from './dropi-favorite-button.component';
+import { IconComponent } from '../icon/icon.component';
+
+describe('DropiFavoriteButtonComponent', () => {
+  let component: DropiFavoriteButtonComponent;
+  let fixture: ComponentFixture<DropiFavoriteButtonComponent>;
+  let debugElement: DebugElement;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [DropiFavoriteButtonComponent, IconComponent, NgbTooltipModule],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(DropiFavoriteButtonComponent);
+    component = fixture.componentInstance;
+    debugElement = fixture.debugElement;
+    fixture.detectChanges();
+  });
+
+  describe('Inicialización del componente', () => {
+    it('should create', () => {
+      // Verifica que el componente se crea correctamente
+      expect(component).toBeTruthy();
+    });
+
+    it('should initialize with default values', () => {
+      // Verifica los valores por defecto del botón favorito
+      expect(component.isFavorite).toBe(false);
+      expect(component.isHovered).toBe(false);
+    });
+
+    it('should accept isFavorite input', () => {
+      // Verifica que acepta el input isFavorite
+      component.isFavorite = true;
+      fixture.detectChanges();
+      expect(component.isFavorite).toBe(true);
+    });
+  });
+
+  describe('Funcionalidad de toggle', () => {
+    it('should toggle from false to true', () => {
+      // Verifica que alterna de false a true
+      component.isFavorite = false;
+      jest.spyOn(component.toggleFavorite, 'emit');
+
+      component.toggle();
+
+      expect(component.isFavorite).toBe(true);
+      expect(component.toggleFavorite.emit).toHaveBeenCalledWith(true);
+    });
+
+    it('should toggle from true to false', () => {
+      // Verifica que alterna de true a false
+      component.isFavorite = true;
+      jest.spyOn(component.toggleFavorite, 'emit');
+
+      component.toggle();
+
+      expect(component.isFavorite).toBe(false);
+      expect(component.toggleFavorite.emit).toHaveBeenCalledWith(false);
+    });
+
+    it('should emit toggleFavorite event with correct value', () => {
+      // Verifica que emite el evento toggleFavorite con el valor correcto
+      jest.spyOn(component.toggleFavorite, 'emit');
+      const initialState = component.isFavorite;
+
+      component.toggle();
+
+      expect(component.toggleFavorite.emit).toHaveBeenCalledWith(!initialState);
+    });
+
+    it('should handle multiple toggles correctly', () => {
+      // Verifica que maneja múltiples alternaciones correctamente
+      jest.spyOn(component.toggleFavorite, 'emit');
+      const initialState = component.isFavorite;
+
+      // Primera alternación
+      component.toggle();
+      expect(component.isFavorite).toBe(!initialState);
+
+      // Segunda alternación (debería volver al estado inicial)
+      component.toggle();
+      expect(component.isFavorite).toBe(initialState);
+
+      // Verificar que se emitió dos veces
+      expect(component.toggleFavorite.emit).toHaveBeenCalledTimes(2);
+    });
+  });
+
+  describe('Estados de hover', () => {
+    it('should set isHovered to true on mouse enter', () => {
+      // Verifica que establece isHovered a true al entrar el mouse
+      component.onMouseEnter();
+      expect(component.isHovered).toBe(true);
+    });
+
+    it('should set isHovered to false on mouse leave', () => {
+      // Verifica que establece isHovered a false al salir el mouse
+      component.isHovered = true;
+      component.onMouseLeave();
+      expect(component.isHovered).toBe(false);
+    });
+
+    it('should handle mouse enter and leave sequence', () => {
+      // Verifica que maneja correctamente la secuencia de entrar y salir con el mouse
+      expect(component.isHovered).toBe(false);
+
+      component.onMouseEnter();
+      expect(component.isHovered).toBe(true);
+
+      component.onMouseLeave();
+      expect(component.isHovered).toBe(false);
+    });
+  });
+
+  describe('Integración de estados', () => {
+    it('should maintain hover state independently of favorite state', () => {
+      // Verifica que mantiene el estado hover independiente del estado favorito
+      component.isFavorite = false;
+      component.onMouseEnter();
+
+      expect(component.isFavorite).toBe(false);
+      expect(component.isHovered).toBe(true);
+
+      component.toggle();
+
+      expect(component.isFavorite).toBe(true);
+      expect(component.isHovered).toBe(true);
+    });
+
+    it('should handle toggle while hovered', () => {
+      // Verifica que maneja el toggle mientras está en hover
+      jest.spyOn(component.toggleFavorite, 'emit');
+
+      component.onMouseEnter();
+      component.toggle();
+
+      expect(component.isHovered).toBe(true);
+      expect(component.isFavorite).toBe(true);
+      expect(component.toggleFavorite.emit).toHaveBeenCalledWith(true);
+    });
+  });
+
+  describe('Integración completa', () => {
+    it('should work with complete favorite button configuration', () => {
+      component.isFavorite = false;
+
+      const emitSpy = jest.spyOn(component.toggleFavorite, 'emit');
+
+      component.toggle();
+
+      expect(component.isFavorite).toBe(true);
+      expect(emitSpy).toHaveBeenCalledWith(true);
+
+      component.toggle();
+
+      expect(component.isFavorite).toBe(false);
+      expect(emitSpy).toHaveBeenCalledWith(false);
+    });
+
+    it('should handle rapid toggles correctly', () => {
+      const emitSpy = jest.spyOn(component.toggleFavorite, 'emit');
+
+      component.toggle();
+      component.toggle();
+      component.toggle();
+
+      expect(emitSpy).toHaveBeenCalledTimes(3);
+      // Verifica el último valor emitido
+      const lastCall = emitSpy.mock.calls[emitSpy.mock.calls.length - 1];
+      expect(lastCall[0]).toBe(true);
+    });
+  });
+
+  describe('Casos edge', () => {
+    it('should handle rapid mouse events', () => {
+      // Verifica que maneja eventos rápidos del mouse
+      component.onMouseEnter();
+      component.onMouseLeave();
+      component.onMouseEnter();
+      component.onMouseLeave();
+
+      expect(component.isHovered).toBe(false);
+    });
+
+    it('should handle rapid toggles', () => {
+      // Verifica que maneja alternaciones rápidas
+      jest.spyOn(component.toggleFavorite, 'emit');
+
+      component.toggle();
+      component.toggle();
+      component.toggle();
+
+      expect(component.toggleFavorite.emit).toHaveBeenCalledTimes(3);
+      expect(component.isFavorite).toBe(true); // Started false, toggled 3 times
+    });
+
+    it('should maintain state consistency', () => {
+      // Verifica que mantiene consistencia de estado
+      const initialFavoriteState = component.isFavorite;
+      const initialHoverState = component.isHovered;
+
+      // Realizar varias operaciones
+      component.onMouseEnter();
+      component.toggle();
+      component.onMouseLeave();
+      component.toggle();
+
+      // Verificar que los estados son válidos
+      expect(typeof component.isFavorite).toBe('boolean');
+      expect(typeof component.isHovered).toBe('boolean');
+      expect(component.isFavorite).toBe(initialFavoriteState); // Dos toggles = estado inicial
+      expect(component.isHovered).toBe(false); // Mouse leave = false
+    });
+  });
+
+  describe('Eventos de salida', () => {
+    it('should have toggleFavorite EventEmitter', () => {
+      // Verifica que tiene el EventEmitter toggleFavorite
+      expect(component.toggleFavorite).toBeDefined();
+      expect(typeof component.toggleFavorite.emit).toBe('function');
+    });
+
+    it('should emit boolean values only', () => {
+      // Verifica que solo emite valores booleanos
+      const emitSpy = jest.spyOn(component.toggleFavorite, 'emit');
+
+      component.toggle();
+
+      const lastCall = emitSpy.mock.calls[emitSpy.mock.calls.length - 1];
+      const emittedValue = lastCall[0];
+      expect(typeof emittedValue).toBe('boolean');
+    });
+  });
+});

package/src/components-source/dropi-favorite-button/dropi-favorite-button.component.ts

@@ -0,0 +1,31 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { IconComponent } from '../icon/icon.component';
+import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
+
+@Component({
+  selector: 'dropi-favorite-button',
+  standalone: true,
+  imports: [CommonModule, IconComponent, NgbTooltipModule],
+  templateUrl: './dropi-favorite-button.component.html',
+  styleUrls: ['./dropi-favorite-button.component.scss'],
+})
+export class DropiFavoriteButtonComponent {
+  @Input() isFavorite: boolean = false;
+  @Output() toggleFavorite = new EventEmitter<boolean>();
+
+  isHovered: boolean = false;
+
+  toggle() {
+    this.isFavorite = !this.isFavorite;
+    this.toggleFavorite.emit(this.isFavorite);
+  }
+
+  onMouseEnter() {
+    this.isHovered = true;
+  }
+
+  onMouseLeave() {
+    this.isHovered = false;
+  }
+}

package/src/components-source/dropi-file-upload/card-view/card-view.component.html

@@ -0,0 +1,154 @@
+<div class="file-card" [ngClass]="[fileItem.state, getFileTypeClass(fileItem.file)]">
+  <ng-container
+    *ngIf="fileItem.previewUrl && !fileItem.previewUrl.includes('.pdf'); else iconTemplate"
+  >
+    <div class="preview-wrapper">
+      <img
+        [ngClass]="fileItem.state"
+        class="preview"
+        [src]="fileItem.previewUrl || './assets/utils/template-no-image.png'"
+        alt="fileItem.previewUrl"
+      />
+
+      <ng-container *ngIf="fileItem.state === 'complete'">
+        <div class="overlay-icon">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="12"
+            height="12"
+            viewBox="0 0 12 12"
+            fill="none"
+          >
+            <g clip-path="url(#clip0_5064_216)">
+              <path
+                d="M11.1594 2.2155L4.24992 9.1245C4.20347 9.17114 4.14826 9.20815 4.08747 9.2334C4.02668 9.25865 3.9615 9.27165 3.89567 9.27165C3.82985 9.27165 3.76467 9.25865 3.70388 9.2334C3.64308 9.20815 3.58788 9.17114 3.54142 9.1245L0.869423 6.45C0.822969 6.40337 0.767762 6.36636 0.70697 6.34111C0.646179 6.31586 0.581 6.30286 0.515173 6.30286C0.449346 6.30286 0.384167 6.31586 0.323376 6.34111C0.262585 6.36636 0.207378 6.40337 0.160923 6.45C0.114285 6.49646 0.0772787 6.55167 0.0520278 6.61246C0.026777 6.67325 0.0137787 6.73843 0.0137787 6.80425C0.0137787 6.87008 0.026777 6.93526 0.0520278 6.99605C0.0772787 7.05684 0.114285 7.11205 0.160923 7.1585L2.83392 9.831C3.1159 10.1125 3.49802 10.2705 3.89642 10.2705C4.29482 10.2705 4.67695 10.1125 4.95892 9.831L11.8679 2.9235C11.9145 2.87706 11.9514 2.82188 11.9766 2.76114C12.0018 2.70039 12.0148 2.63527 12.0148 2.5695C12.0148 2.50374 12.0018 2.43862 11.9766 2.37787C11.9514 2.31713 11.9145 2.26195 11.8679 2.2155C11.8215 2.16887 11.7663 2.13186 11.7055 2.10661C11.6447 2.08136 11.5795 2.06836 11.5137 2.06836C11.4478 2.06836 11.3827 2.08136 11.3219 2.10661C11.2611 2.13186 11.2059 2.16887 11.1594 2.2155Z"
+                fill="#0ABB87"
+              />
+            </g>
+            <defs>
+              <clipPath id="clip0_5064_216">
+                <rect width="12" height="12" fill="white" />
+              </clipPath>
+            </defs>
+          </svg>
+        </div>
+      </ng-container>
+    </div>
+  </ng-container>
+
+  <!--iconos de documento-->
+  <ng-template #iconTemplate>
+    <div class="file-icon">
+      <ng-container>
+        <svg
+          *ngIf="viewType('pdf')"
+          class="icon-pdf"
+          width="34"
+          height="34"
+          viewBox="0 0 34 34"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M0 8C0 3.58172 3.58172 0 8 0H26C30.4183 0 34 3.58172 34 8V26C34 30.4183 30.4183 34 26 34H8C3.58172 34 0 30.4183 0 26V8Z"
+            fill="#FEF0F0"
+          />
+          <g clip-path="url(#clip0_3287_1674)">
+            <path
+              d="M24.1252 11.1167L21.2168 8.20833C20.1168 7.10833 18.6502 6.5 17.0918 6.5H13.3335C11.0335 6.5 9.16684 8.36667 9.16684 10.6667V22.3333C9.16684 24.6333 11.0335 26.5 13.3335 26.5H21.6668C23.9668 26.5 25.8335 24.6333 25.8335 22.3333V15.2417C25.8335 13.6833 25.2252 12.2167 24.1252 11.1167ZM22.9502 12.2917C23.2168 12.5583 23.4418 12.85 23.6252 13.1667H20.0085C19.5502 13.1667 19.1752 12.7917 19.1752 12.3333V8.71667C19.4918 8.9 19.7835 9.125 20.0502 9.39167L22.9585 12.3L22.9502 12.2917ZM24.1668 22.3333C24.1668 23.7083 23.0418 24.8333 21.6668 24.8333H13.3335C11.9585 24.8333 10.8335 23.7083 10.8335 22.3333V10.6667C10.8335 9.29167 11.9585 8.16667 13.3335 8.16667H17.0918C17.2252 8.16667 17.3668 8.16667 17.5002 8.18333V12.3333C17.5002 13.7083 18.6252 14.8333 20.0002 14.8333H24.1502C24.1668 14.9667 24.1668 15.1 24.1668 15.2417V22.3333ZM13.4085 17.3333H12.5002C12.0418 17.3333 11.6668 17.7083 11.6668 18.1667V21.8667C11.6668 22.1583 11.9002 22.3833 12.1835 22.3833C12.4668 22.3833 12.7002 22.15 12.7002 21.8667V20.85H13.4002C14.3835 20.85 15.1835 20.0583 15.1835 19.0917C15.1835 18.125 14.3835 17.3333 13.4002 17.3333H13.4085ZM13.4085 19.8083H12.7168V18.375H13.4168C13.8168 18.375 14.1585 18.7 14.1585 19.0917C14.1585 19.4833 13.8168 19.8083 13.4168 19.8083H13.4085ZM23.3502 17.8583C23.3502 18.15 23.1168 18.375 22.8335 18.375H21.4252V19.325H22.4585C22.7502 19.325 22.9752 19.5583 22.9752 19.8417C22.9752 20.125 22.7418 20.3583 22.4585 20.3583H21.4252V21.8583C21.4252 22.15 21.1918 22.375 20.9085 22.375C20.6252 22.375 20.3918 22.1417 20.3918 21.8583V17.85C20.3918 17.5583 20.6252 17.3333 20.9085 17.3333H22.8335C23.1252 17.3333 23.3502 17.5667 23.3502 17.85V17.8583ZM17.5752 17.3417H16.6668C16.2085 17.3417 15.8335 17.7167 15.8335 18.175V21.875C15.8335 22.1667 16.0668 22.3417 16.3502 22.3417C16.6335 22.3417 17.5668 22.3417 17.5668 22.3417C18.5502 22.3417 19.3502 21.55 19.3502 20.5833V19.1C19.3502 18.1333 18.5502 17.3417 17.5668 17.3417H17.5752ZM18.3168 20.5833C18.3168 20.975 17.9752 21.3 17.5752 21.3H16.8835V18.3833H17.5835C17.9835 18.3833 18.3252 18.7083 18.3252 19.1V20.5833H18.3168Z"
+              fill="#DE6061"
+            />
+          </g>
+          <defs>
+            <clipPath id="clip0_3287_1674">
+              <rect width="20" height="20" fill="white" transform="translate(7.5 6.5)" />
+            </clipPath>
+          </defs>
+        </svg>
+        <svg
+          *ngIf="viewType('default')"
+          class="icon-default"
+          width="34"
+          height="34"
+          viewBox="0 0 34 34"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M0 8C0 3.58172 3.58172 0 8 0H26C30.4183 0 34 3.58172 34 8V26C34 30.4183 30.4183 34 26 34H8C3.58172 34 0 30.4183 0 26V8Z"
+            fill="#EEF6FE"
+          />
+          <g clip-path="url(#clip0_3287_1708)">
+            <path
+              d="M21.1668 18.6667C21.1668 18.8877 21.079 19.0997 20.9227 19.2559C20.7664 19.4122 20.5545 19.5 20.3335 19.5H13.6668C13.4458 19.5 13.2338 19.4122 13.0775 19.2559C12.9213 19.0997 12.8335 18.8877 12.8335 18.6667C12.8335 18.4457 12.9213 18.2337 13.0775 18.0774C13.2338 17.9211 13.4458 17.8334 13.6668 17.8334H20.3335C20.5545 17.8334 20.7664 17.9211 20.9227 18.0774C21.079 18.2337 21.1668 18.4457 21.1668 18.6667ZM17.8335 21.1667H13.6668C13.4458 21.1667 13.2338 21.2545 13.0775 21.4108C12.9213 21.567 12.8335 21.779 12.8335 22C12.8335 22.221 12.9213 22.433 13.0775 22.5893C13.2338 22.7456 13.4458 22.8334 13.6668 22.8334H17.8335C18.0545 22.8334 18.2664 22.7456 18.4227 22.5893C18.579 22.433 18.6668 22.221 18.6668 22C18.6668 21.779 18.579 21.567 18.4227 21.4108C18.2664 21.2545 18.0545 21.1667 17.8335 21.1667ZM25.3335 15.7375V22.8334C25.3321 23.938 24.8927 24.9971 24.1116 25.7782C23.3305 26.5593 22.2715 26.9987 21.1668 27H12.8335C11.7288 26.9987 10.6698 26.5593 9.88864 25.7782C9.10753 24.9971 8.66812 23.938 8.66679 22.8334V11.1667C8.66812 10.062 9.10753 9.00298 9.88864 8.22187C10.6698 7.44075 11.7288 7.00134 12.8335 7.00002H16.596C17.3623 6.99805 18.1214 7.14801 18.8295 7.44124C19.5375 7.73446 20.1804 8.16513 20.721 8.70835L23.6243 11.6134C24.1678 12.1536 24.5988 12.7962 24.8921 13.5042C25.1855 14.2121 25.3355 14.9712 25.3335 15.7375ZM19.5426 9.88669C19.2804 9.63265 18.9859 9.41412 18.6668 9.23669V12.8334C18.6668 13.0544 18.7546 13.2663 18.9109 13.4226C19.0672 13.5789 19.2791 13.6667 19.5001 13.6667H23.0968C22.9193 13.3477 22.7004 13.0535 22.446 12.7917L19.5426 9.88669ZM23.6668 15.7375C23.6668 15.6 23.6401 15.4684 23.6276 15.3334H19.5001C18.8371 15.3334 18.2012 15.07 17.7324 14.6011C17.2635 14.1323 17.0001 13.4964 17.0001 12.8334V8.70585C16.8651 8.69335 16.7326 8.66669 16.596 8.66669H12.8335C12.1704 8.66669 11.5345 8.93008 11.0657 9.39892C10.5969 9.86776 10.3335 10.5036 10.3335 11.1667V22.8334C10.3335 23.4964 10.5969 24.1323 11.0657 24.6011C11.5345 25.07 12.1704 25.3334 12.8335 25.3334H21.1668C21.8298 25.3334 22.4657 25.07 22.9346 24.6011C23.4034 24.1323 23.6668 23.4964 23.6668 22.8334V15.7375Z"
+              fill="#4996DB"
+            />
+          </g>
+          <defs>
+            <clipPath id="clip0_3287_1708">
+              <rect width="20" height="20" fill="white" transform="translate(7 7)" />
+            </clipPath>
+          </defs>
+        </svg>
+      </ng-container>
+    </div>
+  </ng-template>
+  <div class="info-container" *ngIf="fileItem.state !== 'confirm-delete'">
+    <div class="file-name">
+      {{ fileItem?.file?.name ?? fileItem?.previewUrl?.split('/').pop() }}
+    </div>
+    <div class="progress-bar-container" *ngIf="fileItem.state === 'uploading'">
+      <div class="progress-bar" [style.width.%]="fileItem.progress"></div>
+    </div>
+  </div>
+
+  <!--Botones de  eliminar y ver-->
+
+  <div
+    class="preview-image"
+    *ngIf="fileItem.state !== 'confirm-delete' "
+    (click)="openPreviewImage()"
+  >
+    <app-icon name="Eye" width="20px" height="20px" color="Gray-Gray-600" />
+  </div>
+  <!-- <div
+    class="preview-image"
+    *ngIf="fileItem.state !== 'confirm-delete' && fileItem.fileType !== 'image'"
+    (click)="downloadFile()"
+  >
+    <app-icon name="Download" width="20px" height="20px" color="Gray-Gray-600" />
+  </div> -->
+
+  <div (click)="onSendClick('delete')" *ngIf="fileItem.state !== 'confirm-delete' && !onlyView" class="delete">
+    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M16.25 4.44453H14.0972C13.936 3.66078 13.5096 2.95657 12.8897 2.45058C12.2699 1.94459 11.4946 1.66776 10.6944 1.66675H9.30554C8.5054 1.66776 7.73007 1.94459 7.11023 2.45058C6.49039 2.95657 6.06394 3.66078 5.90276 4.44453H3.74999C3.56581 4.44453 3.38917 4.51769 3.25894 4.64792C3.12871 4.77816 3.05554 4.95479 3.05554 5.13897C3.05554 5.32315 3.12871 5.49978 3.25894 5.63002C3.38917 5.76025 3.56581 5.83341 3.74999 5.83341H4.44443V14.8612C4.44553 15.7817 4.81171 16.6643 5.46264 17.3152C6.11357 17.9661 6.9961 18.3323 7.91665 18.3334H12.0833C13.0039 18.3323 13.8864 17.9661 14.5373 17.3152C15.1883 16.6643 15.5544 15.7817 15.5555 14.8612V5.83341H16.25C16.4342 5.83341 16.6108 5.76025 16.741 5.63002C16.8713 5.49978 16.9444 5.32315 16.9444 5.13897C16.9444 4.95479 16.8713 4.77816 16.741 4.64792C16.6108 4.51769 16.4342 4.44453 16.25 4.44453ZM9.30554 3.05564H10.6944C11.1252 3.05616 11.5452 3.18993 11.8969 3.43858C12.2487 3.68724 12.5149 4.03862 12.659 4.44453H7.34096C7.48511 4.03862 7.75131 3.68724 8.10303 3.43858C8.45476 3.18993 8.8748 3.05616 9.30554 3.05564ZM14.1667 14.8612C14.1667 15.4137 13.9472 15.9436 13.5565 16.3343C13.1658 16.725 12.6359 16.9445 12.0833 16.9445H7.91665C7.36412 16.9445 6.83421 16.725 6.44351 16.3343C6.05281 15.9436 5.83332 15.4137 5.83332 14.8612V5.83341H14.1667V14.8612Z"
+        fill="#DE6061"
+      />
+      <path
+        d="M8.61115 14.1663C8.79533 14.1663 8.97197 14.0931 9.1022 13.9629C9.23243 13.8327 9.3056 13.656 9.3056 13.4719V9.30521C9.3056 9.12103 9.23243 8.94439 9.1022 8.81416C8.97197 8.68393 8.79533 8.61076 8.61115 8.61076C8.42698 8.61076 8.25034 8.68393 8.12011 8.81416C7.98988 8.94439 7.91671 9.12103 7.91671 9.30521V13.4719C7.91671 13.656 7.98988 13.8327 8.12011 13.9629C8.25034 14.0931 8.42698 14.1663 8.61115 14.1663Z"
+        fill="#DE6061"
+      />
+      <path
+        d="M11.3888 14.1663C11.573 14.1663 11.7497 14.0931 11.8799 13.9629C12.0101 13.8327 12.0833 13.656 12.0833 13.4719V9.30521C12.0833 9.12103 12.0101 8.94439 11.8799 8.81416C11.7497 8.68393 11.573 8.61076 11.3888 8.61076C11.2047 8.61076 11.028 8.68393 10.8978 8.81416C10.7676 8.94439 10.6944 9.12103 10.6944 9.30521V13.4719C10.6944 13.656 10.7676 13.8327 10.8978 13.9629C11.028 14.0931 11.2047 14.1663 11.3888 14.1663Z"
+        fill="#DE6061"
+      />
+    </svg>
+  </div>
+
+  <!--mensaje de eliminar-->
+  <div class="delete-confirm" *ngIf="fileItem.state === 'confirm-delete'">
+    <span class="message">{{
+      (fileItem.previewUrl ? 'delete image' : 'delete file') | translate
+    }}</span>
+    <div class="actions">
+      <dropi-button size="small" text="Sí" (onClick)="onSendClick('confirm-delete')"></dropi-button>
+      <dropi-button
+        text="No"
+        size="small"
+        (onClick)="onSendClick('cancel-delete')"
+        severity="secondary"
+      ></dropi-button>
+    </div>
+  </div>
+</div>

package/src/components-source/dropi-file-upload/card-view/card-view.component.scss

@@ -0,0 +1,118 @@
+.file-card {
+  display: flex;
+  padding: var(--Size-4, 16px);
+  align-items: center;
+  gap: var(--Size-3, 12px);
+  align-self: stretch;
+  border-radius: var(--Border-2);
+  border: 1px solid var(--Gray-Gray-100);
+  background: var(--White, #FFF);
+
+  .preview-wrapper {
+    width: 34px;
+    height: 34px;
+    position: relative;
+    display: inline-block;
+    border-radius: var(--Border-2);
+    overflow: hidden;
+
+    .preview {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      flex-shrink: 0;
+
+      &.uploading {
+        filter: blur(2px);
+      }
+    }
+
+    .overlay-icon {
+      width: 16px;
+      height: 16px;
+      padding: 4px;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      pointer-events: none;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-shrink: 0;
+      border-radius: var(--Border-3, 12px);
+      background: var(--White, #fff);
+    }
+  }
+
+  .info-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    gap: var(--Size-2);
+    flex: 1 0 0;
+
+    .file-name {
+      overflow: hidden;
+      color: var(--Gray-Gray-600);
+      text-overflow: ellipsis;
+      font-size: 12px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 150%;
+      white-space: nowrap;
+      max-width: 300px;
+    }
+
+    .progress-bar-container {
+      width: 100%;
+      height: 4px;
+      background-color: #f0f0f0;
+      border-radius: 4px;
+      overflow: hidden;
+    }
+
+    .progress-bar {
+      height: 100%;
+      border-radius: 4.5px;
+      background: var(--Primary-Primary-500);
+      transition: width 0.3s ease;
+    }
+  }
+
+  .delete, .preview-image {
+    display: inline-block; /* importante para que funcione bien */
+    transition: transform 0.3s ease; /* suavidad en la animación */
+    border-radius: var(--Border-2);
+    &:hover {
+      cursor: pointer;
+      transform: scale(1.1);
+    }
+  }
+
+  .delete-confirm {
+    color: var(--Gray-Gray-600);
+    font-size: var(--font-size-xs);
+    font-style: normal;
+    font-weight: 500;
+    line-height: 150%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    align-self: stretch;
+    flex: 1 0 0;
+
+    .actions {
+      display: flex;
+      align-items: flex-start;
+      gap: var(--Size-2, 8px);
+    }
+  }
+}
+
+@media (max-width: 600px) {
+  .file-card .info-container .file-name {
+    max-width: 100px;
+  }
+}