@dropi/ui-components 1.0.0

package/src/components-source/dropi-file-upload/grid-view/grid-view.component.ts

@@ -0,0 +1,35 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FileItem } from '../../../utilities/interfaces/ui/upload.model';
+
+@Component({
+  selector: 'app-grid-view',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './grid-view.component.html',
+  styleUrls: ['./grid-view.component.scss'],
+})
+export class GridViewComponent {
+  @Input() fileItem: FileItem = {
+    file: undefined,
+    progress: 0,
+    state: 'uploading',
+    id: '',
+  };
+  @Output() action = new EventEmitter<{
+    file: FileItem;
+    type: 'delete' | 'confirm-delete' | 'cancel-delete';
+  }>();
+
+  getFileTypeClass(file: File): string {
+    const type = file?.type || '';
+    if (type.includes('pdf')) return 'pdf';
+    if (type.includes('word') || type.includes('document')) return 'word';
+    if (type.startsWith('image/')) return 'image';
+    return 'generic';
+  }
+
+  onSendClick(type: 'delete' | 'confirm-delete' | 'cancel-delete'): void {
+    this.action.emit({ file: this.fileItem, type: type });
+  }
+}

package/src/components-source/dropi-ilustration-icon/dropi-ilustration-icon.component.html

@@ -0,0 +1,38 @@
+<div class="dropi-ilustration">
+  <ng-container *ngIf="type === 'dropi'">
+    <figure class="dropi-ilustration__image">
+      <img [src]="imageSrc" [alt]="state" (error)="onImageError($event)" />
+    </figure>
+  </ng-container>
+
+  <ng-container *ngIf="type === 'mb'">
+    <figure class="dropi-ilustration__image-mb" [ngClass]="[state]">
+      <app-icon
+        *ngIf="state === 'success' || state === 'error' || state === 'info' || state === 'warning'"
+        [name]="getIconName(state)"
+        width="24px"
+        height="24px"
+        color="Neutral-White"
+      ></app-icon>
+    </figure>
+  </ng-container>
+
+  <ng-container *ngIf="type === 'insignia'">
+    <figure
+      [ngClass]="{
+        'dropi-ilustration-insignia-tag': tagProduct,
+        'dropi-ilustration-insignia': !tagProduct
+      }"
+    >
+      <img [src]="iconPath" alt="insignia" />
+      <p
+        class="dropi-ilustration-insignia-tag__tag dropi-ilustration-insignia-tag__tag--{{
+          stateInsignia
+        }}"
+        *ngIf="tagProduct"
+      >
+        <span class="Caption-S">{{ stateInsignia }}</span>
+      </p>
+    </figure>
+  </ng-container>
+</div>

package/src/components-source/dropi-ilustration-icon/dropi-ilustration-icon.component.scss

@@ -0,0 +1,59 @@
+.dropi-ilustration {
+  &__image-mb {
+    width: 60px;
+    height: 60px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    &.success {
+      background: var(--Success-Success-500);
+    }
+    &.error {
+      background: var(--Error-Error-500);
+    }
+    &.info {
+      background: var(--Info-Info-500);
+    }
+    &.warning {
+      background: url('../../../assets/icons/ilustration/bg-warning.svg') no-repeat center;
+      background-size: contain;
+      border-radius: 0;
+    }
+  }
+}
+.dropi-ilustration-insignia {
+  margin: 0;
+}
+.dropi-ilustration-insignia-tag {
+  display: flex;
+  align-items: center;
+  img {
+    position: relative;
+    z-index: 2;
+    height: 28px;
+    width: auto;
+  }
+  &__tag {
+    border-radius: 32px;
+    color: var(--Neutral-White);
+    text-transform: capitalize;
+    margin: 0 0 0 -20px;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    span {
+      color: var(--Neutral-White);
+      padding: 4px 8px 4px 18px;
+    }
+    &--verified {
+      background: linear-gradient(90deg, #ffc10d 41.3%, #ff6102 112.32%);
+    }
+    &--premium {
+      background: linear-gradient(90deg, #ff6102 56.52%, #ffc10d 107.25%);
+    }
+    &--exclusive {
+      background: linear-gradient(90deg, var(--Gray-900, #0e111a) 26.09%, #ff6102 116.67%);
+    }
+  }
+}

package/src/components-source/dropi-ilustration-icon/dropi-ilustration-icon.component.spec.ts

@@ -0,0 +1,214 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { DropiIlustrationIconComponent } from './dropi-ilustration-icon.component';
+import { IconComponent } from '../icon/icon.component';
+import { DomSanitizer } from '@angular/platform-browser';
+import { mockDomSanitizer } from '../../../test-utils/jest-mocks';
+import { SimpleChange, SimpleChanges } from '@angular/core';
+
+describe('DropiIlustrationIconComponent', () => {
+  let component: DropiIlustrationIconComponent;
+  let fixture: ComponentFixture<DropiIlustrationIconComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [DropiIlustrationIconComponent, IconComponent],
+      providers: [{ provide: DomSanitizer, useValue: mockDomSanitizer }],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(DropiIlustrationIconComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  describe('Inicialización del componente', () => {
+    it('should create', () => {
+      expect(component).toBeTruthy();
+    });
+
+    it('should initialize with default values', () => {
+      expect(component.type).toBe('dropi');
+      expect(component.state).toBe('default');
+      expect(component.stateInsignia).toBe('verified');
+      expect(component.tagProduct).toBe(false);
+      expect(component.iconPath).toBeNull();
+    });
+  });
+
+  describe('Propiedad type', () => {
+    it('should accept "dropi" type', () => {
+      component.type = 'dropi';
+      expect(component.type).toBe('dropi');
+    });
+
+    it('should accept "mb" type', () => {
+      component.type = 'mb';
+      expect(component.type).toBe('mb');
+    });
+
+    it('should accept "insignia" type', () => {
+      component.type = 'insignia';
+      expect(component.type).toBe('insignia');
+    });
+  });
+
+  describe('Propiedad state', () => {
+    it('should accept "success" state', () => {
+      component.state = 'success';
+      expect(component.state).toBe('success');
+    });
+
+    it('should accept "error" state', () => {
+      component.state = 'error';
+      expect(component.state).toBe('error');
+    });
+
+    it('should accept "warning" state', () => {
+      component.state = 'warning';
+      expect(component.state).toBe('warning');
+    });
+
+    it('should accept "info" state', () => {
+      component.state = 'info';
+      expect(component.state).toBe('info');
+    });
+
+    it('should accept "default" state', () => {
+      component.state = 'default';
+      expect(component.state).toBe('default');
+    });
+
+    it('should accept "loading" state', () => {
+      component.state = 'loading';
+      expect(component.state).toBe('loading');
+    });
+
+    it('should accept "sorry" state', () => {
+      component.state = 'sorry';
+      expect(component.state).toBe('sorry');
+    });
+
+    it('should accept "love" state', () => {
+      component.state = 'love';
+      expect(component.state).toBe('love');
+    });
+  });
+
+  describe('Propiedad stateInsignia', () => {
+    it('should accept "verified" stateInsignia', () => {
+      component.stateInsignia = 'verified';
+      expect(component.stateInsignia).toBe('verified');
+    });
+
+    it('should accept "premium" stateInsignia', () => {
+      component.stateInsignia = 'premium';
+      expect(component.stateInsignia).toBe('premium');
+    });
+
+    it('should accept "exclusive" stateInsignia', () => {
+      component.stateInsignia = 'exclusive';
+      expect(component.stateInsignia).toBe('exclusive');
+    });
+  });
+
+  describe('Propiedad tagProduct', () => {
+    it('should accept true', () => {
+      component.tagProduct = true;
+      expect(component.tagProduct).toBe(true);
+    });
+
+    it('should accept false', () => {
+      component.tagProduct = false;
+      expect(component.tagProduct).toBe(false);
+    });
+  });
+
+  describe('Getter imageSrc', () => {
+    it('should return correct image path for default state', () => {
+      component.state = 'default';
+      expect(component.imageSrc).toBe('assets/icons/ilustration/default.svg');
+    });
+
+    it('should return correct image path for success state', () => {
+      component.state = 'success';
+      expect(component.imageSrc).toBe('assets/icons/ilustration/success.svg');
+    });
+
+    it('should return correct image path for error state', () => {
+      component.state = 'error';
+      expect(component.imageSrc).toBe('assets/icons/ilustration/error.svg');
+    });
+  });
+
+  describe('Método onImageError', () => {
+    it('should set fallback image on error', () => {
+      const mockEvent = {
+        target: {
+          src: '',
+        },
+      } as unknown as Event;
+
+      component.onImageError(mockEvent);
+      expect((mockEvent.target as HTMLImageElement).src).toBe('assets/icons/ilustration/default.svg');
+    });
+  });
+
+  describe('Método getIconName', () => {
+    it('should return "Check-circle" for success state', () => {
+      expect(component.getIconName('success')).toBe('Check-circle');
+    });
+
+    it('should return "Cross-circle" for error state', () => {
+      expect(component.getIconName('error')).toBe('Cross-circle');
+    });
+
+    it('should return "Info" for info state', () => {
+      expect(component.getIconName('info')).toBe('Info');
+    });
+
+    it('should return "Info" for warning state', () => {
+      expect(component.getIconName('warning')).toBe('Info');
+    });
+
+    it('should return "Info" for unknown state', () => {
+      expect(component.getIconName('default')).toBe('Info');
+    });
+  });
+
+  describe('Método ngOnChanges', () => {
+    it('should set iconPath when type is insignia and stateInsignia is verified', () => {
+      component.type = 'insignia';
+      component.stateInsignia = 'verified';
+
+      const changes: SimpleChanges = {
+        type: new SimpleChange(null, 'insignia', true),
+      };
+
+      component.ngOnChanges(changes);
+      expect(component.iconPath).toBe('assets/icons/ilustration/verified-new.svg');
+    });
+
+    it('should set iconPath for premium insignia', () => {
+      component.type = 'insignia';
+      component.stateInsignia = 'premium';
+
+      const changes: SimpleChanges = {
+        stateInsignia: new SimpleChange(null, 'premium', true),
+      };
+
+      component.ngOnChanges(changes);
+      expect(component.iconPath).toBe('assets/icons/ilustration/premium-new.svg');
+    });
+
+    it('should set iconPath for exclusive insignia', () => {
+      component.type = 'insignia';
+      component.stateInsignia = 'exclusive';
+
+      const changes: SimpleChanges = {
+        stateInsignia: new SimpleChange(null, 'exclusive', true),
+      };
+
+      component.ngOnChanges(changes);
+      expect(component.iconPath).toBe('assets/icons/ilustration/exclusive.svg');
+    });
+  });
+});

package/src/components-source/dropi-ilustration-icon/dropi-ilustration-icon.component.ts

@@ -0,0 +1,65 @@
+import { Component, Input, SimpleChanges } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { IconComponent } from '../icon/icon.component';
+
+type IlustrationType = 'dropi' | 'mb' | 'insignia';
+type IlustrationState =
+  | 'success'
+  | 'error'
+  | 'warning'
+  | 'info'
+  | 'default'
+  | 'loading'
+  | 'sorry'
+  | 'love';
+type InsigniaState = 'verified' | 'premium' | 'exclusive';
+
+@Component({
+  selector: 'dropi-ilustration-icon',
+  standalone: true,
+  imports: [CommonModule, IconComponent],
+  templateUrl: './dropi-ilustration-icon.component.html',
+  styleUrls: ['./dropi-ilustration-icon.component.scss'],
+})
+export class DropiIlustrationIconComponent {
+  @Input() type: IlustrationType = 'dropi';
+  @Input() state: IlustrationState = 'default';
+  @Input() stateInsignia: InsigniaState = 'verified';
+  @Input() tagProduct: boolean = false;
+
+  public iconPath: string | null = null;
+
+  get imageSrc(): string {
+    return `assets/icons/ilustration/${this.state}.svg`;
+  }
+  onImageError(event: Event): void {
+    const target = event.target as HTMLImageElement;
+    target.src = 'assets/icons/ilustration/default.svg';
+  }
+  getIconName(state: IlustrationState): string {
+    const map = {
+      success: 'Check-circle',
+      error: 'Cross-circle',
+      info: 'Info',
+      warning: 'Info', // mismo icono para warning e info
+    };
+    return map[state] || 'Info';
+  }
+
+  private readonly insigniaIcons: Record<InsigniaState, string> = {
+    verified: 'assets/icons/ilustration/verified-new.svg',
+    premium: 'assets/icons/ilustration/premium-new.svg',
+    exclusive: 'assets/icons/ilustration/exclusive.svg',
+  };
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (this.type === 'insignia') {
+      const icon = this.insigniaIcons[this.stateInsignia];
+      if (icon) {
+        this.iconPath = icon;
+      } else {
+        this.iconPath = null;
+      }
+    }
+  }
+}

package/src/components-source/dropi-image-overlay/dropi-image-overlay.component.html

@@ -0,0 +1,54 @@
+<div class="overlay" (click)="closeOverlay()" *ngIf="imageUrls?.length > 0">
+
+  <button class="close-button" (click)="closeOverlay()">
+    <app-icon name="Close-large" width="24px" height="24px" color="#FFF"></app-icon>
+  </button>
+
+  <!-- NUEVO: cuerpo en 2 columnas -->
+  <div class="overlay-body"[ngClass]="{ 'one-image': imageUrls?.length === 1 }" (click)="$event.stopPropagation()">
+    <!-- Columna de miniaturas -->
+    <div class="thumbs" *ngIf="imageUrls?.length > 1">
+      <button
+        class="thumb"
+        *ngFor="let src of imageUrls; let i = index"
+        type="button"
+        (click)="selectImage(i); $event.stopPropagation()"
+        [class.thumb--active]="i === selectedImageIndex"
+        [attr.aria-label]="'Miniatura ' + (i + 1)"
+      >
+        <span class="thumb-box">
+          <img [src]="src" [alt]="'Miniatura ' + (i + 1)" loading="lazy" (error)="imageUrls[i] = fallbackUrl" />
+        </span>
+      </button>
+    </div>
+
+    <!-- Área principal -->
+    <div class="overlay-content">
+      <button
+        class="nav-button left"
+        *ngIf="imageUrls?.length > 1"
+        (click)="previousImage($event)"
+        type="button"
+        aria-label="Imagen anterior"
+      >
+        <app-icon name="Dropdown-left" width="18px" height="18px" color="Gray-Gray-500"></app-icon>
+      </button>
+
+      <img [src]="imageUrls[selectedImageIndex]" alt="Vista previa" class="main-image" *ngIf="!imageError"
+  (error)="imageError = true" />
+   <img [src]=" isDropi ? './assets/utils/no-image.jpg' : './assets/utils/wb-no-image.jpg'" alt="Vista previa" class="main-image" *ngIf="imageError"
+   />
+
+
+      <button
+        class="nav-button right"
+        *ngIf="imageUrls?.length > 1"
+        (click)="nextImage($event)"
+        type="button"
+        aria-label="Siguiente imagen"
+      >
+        <app-icon name="Dropdown-Right" width="18px" height="18px" color="Gray-Gray-500"></app-icon>
+      </button>
+    </div>
+  </div>
+</div>

package/src/components-source/dropi-image-overlay/dropi-image-overlay.component.scss

@@ -0,0 +1,210 @@
+.overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background: rgba(0, 0, 0, 0.8);
+  display: grid; /* para centrar más fácil */
+  place-items: center;
+  z-index: 3000;
+  animation: fadeIn 0.3s ease-out;
+
+  .close-button {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    background: transparent;
+    border: none;
+    padding: 8px;
+    cursor: pointer;
+  }
+
+  /* NUEVO: contenedor en 2 columnas (thumbs + área principal) */
+  .overlay-body {
+    display: grid;
+    grid-template-columns: 96px minmax(0, 1fr);
+    gap: 24px;
+    align-items: center;
+    max-width: min(95vw, 774px);
+    max-height: 90dvh;
+    width: 100%;
+  }
+  .one-image{
+    grid-template-columns: none !important; 
+  }
+
+  /* Columna de miniaturas */
+  .thumbs {
+    display: grid;
+    grid-auto-rows: min-content;
+    gap: 12px;
+    overflow: auto;
+    height: 100%;
+    width: 100px;
+
+    .thumb {
+      --thumb-size: 100px;
+      width: var(--thumb-size);
+      padding: 0;
+      border: none;
+      background: var(--Neutral-White);
+      border-radius: 8px;
+      cursor: pointer;
+      transition:
+        box-shadow 0.15s ease,
+        transform 0.1s ease,
+        border-color 0.15s ease;
+
+      &:hover {
+        transform: translateY(-1px);
+        box-shadow: 0 0 12px rgba(0, 0, 0, 0.08);
+      }
+
+      &.thumb--active {
+        border: 2px solid var(--Primary-Primary-500, #f49a3d);
+        box-shadow: inset 0 0 0 2px rgba(0, 153, 255, 0.15);
+      }
+
+      /* Caja cuadrada para normalizar miniaturas */
+      .thumb-box {
+        display: block;
+        width: 100%;
+        aspect-ratio: 1 / 1; /* cuadrado */
+        overflow: hidden;
+        border-radius: 6px;
+
+        /* Si necesitas fallback, usa el truco del padding-top 100% aquí */
+
+        img {
+          width: 100%;
+          height: 100%;
+          display: block;
+          object-fit: cover; /* llena el cuadrado sin deformar */
+          object-position: center;
+          -webkit-user-drag: none;
+          user-select: none;
+        }
+      }
+    }
+  }
+
+  /* Área principal */
+  .overlay-content {
+    position: relative;
+    width:100%;
+    display: grid;
+    place-items: center;
+    animation: scaleIn 0.3s ease-out;
+    min-height: 650px;
+    align-items: center;
+   
+
+    .main-image {
+  
+      border-radius: 8px;
+      box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
+      transition: transform 0.3s ease-in-out;
+      -webkit-user-drag: none;
+      user-select: none;
+      max-width: 650px;
+      max-height: 650px;
+    }
+
+    /* Mueve las flechas aquí para posicionarlas relativo a esta área */
+    .nav-button {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      border: none;
+      cursor: pointer;
+      z-index: 101;
+      border-radius: var(--Border-5, 32px);
+      background: var(--White, #fff);
+      width: 40px;
+      height: 40px;
+      box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.04);
+
+      &.left {
+        left: 20px;
+      }
+      &.right {
+        right: 20px;
+      }
+
+      app-icon {
+        pointer-events: none;
+      }
+    }
+  }
+}
+
+  /* Responsivo: oculta la columna de miniaturas en pantallas angostas */
+  @media (max-width: 640px) {
+    .thumbs{
+      height: 100% !important;
+      max-height: 100px;
+    }
+    .overlay {
+      display: flex !important;
+      flex-direction: column;
+      justify-content: center;
+      gap:12px;
+      background: rgba(0, 0, 0, 0.4);
+    
+
+    .close-button {
+      width: 100%;
+      display: flex;
+      justify-content: flex-end;
+      position: unset;
+    }
+    .overlay-body {
+      display: flex !important;
+      flex-direction: column-reverse;
+      height: 450px !important;
+      .overlay-content {
+        min-height: unset;
+        max-width: 100%;
+        height: 320px !important;
+
+      }
+      .main-image {
+        max-height: 320px !important;
+        max-width: 100% !important;
+       
+      }
+    }
+    .nav-button {
+      display: none;
+    }
+    .thumbs {
+      width: 100% !important;
+      grid-auto-flow: column; /* ← coloca los hijos en fila */
+      grid-auto-columns: max-content; /* o 1fr, o un tamaño fijo */
+      overflow-x: hidden!important;
+      .thumb {
+        --thumb-size: 72px;
+      }
+    }
+  }
+
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+  @keyframes scaleIn {
+    from {
+      transform: scale(0.95);
+      opacity: 0;
+    }
+    to {
+      transform: scale(1);
+      opacity: 1;
+    }
+    }
+  }