@dropi/ui-components 1.0.0

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

@@ -0,0 +1,72 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FileItem } from '../../../utilities/interfaces/ui/upload.model';
+import { ButtonComponent } from '@app/ui/dropi-button/dropi-button.component';
+import { TranslateModule } from '@ngx-translate/core';
+import { IconComponent } from '@app/ui/icon/icon.component';
+import { Subscription } from 'rxjs';
+import { ImageOverlayService } from '@app/services/ui/image-overlay.service';
+import { environment } from '@env/environment';
+
+@Component({
+  selector: 'app-card-view',
+  standalone: true,
+  imports: [CommonModule, ButtonComponent, TranslateModule, IconComponent],
+  templateUrl: './card-view.component.html',
+  styleUrls: ['./card-view.component.scss'],
+})
+export class CardViewComponent {
+  @Input() fileItem: FileItem = {
+    file: undefined,
+    progress: 0,
+    state: 'complete',
+    id: '',
+  };
+  @Input() onlyView: boolean;
+  
+  @Output() action = new EventEmitter<{
+    file: FileItem;
+    type: 'delete' | 'confirm-delete' | 'cancel-delete';
+  }>();
+
+  constructor(private readonly imageOverlayService: ImageOverlayService) {}
+
+  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 });
+  }
+
+  openPreviewImage() {
+    if (this.fileItem.fileType !== 'image'){
+      // abre en nueva pestaña
+      console.log('item', this.fileItem?.uploadedUrl);
+    window.open(`${environment.AWS3WL.cloudfront_server}/${this.fileItem?.uploadedUrl}`, '_blank');
+    } else {
+           this.imageOverlayService.showOverlay([this.fileItem?.previewUrl]);
+    }
+  }
+
+  downloadFile() {
+    const link = document.createElement('a');
+    link.href = this.fileItem?.previewUrl!;
+    link.download = this.fileItem?.file?.name!;
+    link.click();
+  }
+
+  viewType(type: string): boolean {
+    let fileType = '';
+    if (this.fileItem?.file!) {
+      fileType = this.fileItem.file.type === 'application/pdf' ? 'pdf' : 'default';
+    } else {
+      fileType = this.fileItem?.previewUrl?.includes('pdf') ? 'pdf' : 'default';
+    }
+    return fileType === type;
+  }
+}

package/src/components-source/dropi-file-upload/drop-zone/drop-zone.coment.stories.ts

@@ -0,0 +1,179 @@
+import { Meta, StoryObj, moduleMetadata } from '@storybook/angular';
+
+import { TranslateLoader, TranslateModule, TranslateService } from '@ngx-translate/core';
+
+import { CommonModule } from '@angular/common';
+import { concat, interval, of, Subject } from 'rxjs';
+import { UploadFileService } from '@app/services/ui/upload-file.service';
+import { delay, map, take } from 'rxjs/operators';
+import { DropZoneComponent } from './drop-zone.component';
+
+const meta: Meta<DropZoneComponent> & { argTypes: Record<string, any> } = {
+  title: 'UI Dropi/Drop Zone',
+  component: DropZoneComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [
+        CommonModule,
+
+        TranslateModule.forRoot({
+          loader: { provide: TranslateLoader, useValue: TranslateLoader },
+        }),
+        DropZoneComponent,
+      ],
+      providers: [
+        {
+          provide: TranslateService,
+          useClass: TranslateService,
+        },
+        {
+          provide: UploadFileService,
+        },
+      ],
+    }),
+  ],
+  parameters: {
+    layout: 'centered',
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/ONiVQJJ2qrJ6tmJnpNrrKE/-WEB--components?node-id=191-2299&m=dev', // Reemplazar con URL real
+    },
+  },
+  tags: ['autodocs'],
+  // ---- aquí overrideamos el tipo de argTypes para aceptar cualquiera ----
+
+  argTypes: {
+    multiple: {
+      description: 'Allows uploading multiple files',
+      control: { type: 'boolean' },
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
+    },
+    maxFiles: {
+      description: 'Maximum number of files that can be uploaded',
+      control: { type: 'number' },
+      table: {
+        type: { summary: 'number' },
+        defaultValue: { summary: '1' },
+      },
+    },
+    maxFileSizeMB: {
+      description: 'Maximum file size in megabytes (MB)',
+      control: { type: 'number' },
+      table: {
+        type: { summary: 'number' },
+        defaultValue: { summary: '5' },
+      },
+    },
+    textButton: {
+      description: 'Custom text for the upload button',
+      control: { type: 'text' },
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'Upload file' },
+      },
+    },
+    textFileUpload: {
+      description: 'Custom text for the file upload area',
+      control: { type: 'text' },
+      table: {
+        type: { summary: 'string' },
+        defaultValue: {
+          summary: 'Drag and drop files here or click to select',
+        },
+      },
+    },
+    isNotStore: {
+      description: 'If true, shows only the button without the drop zone area',
+      control: { type: 'boolean' },
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
+    },
+    size: {
+      description: 'Size variant of the component',
+      control: { type: 'select' },
+      options: ['small', 'medium', 'large'],
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'medium' },
+      },
+    },
+    params: {
+      description: 'Configuration options for file upload',
+      control: { type: 'object' },
+    },
+    uploadedUrlsChange: {
+      action: 'uploadedUrlsChange',
+      description: 'Emitted when upload is completed and URLs are returned',
+      table: {
+        category: 'Events',
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<DropZoneComponent>;
+export const Default: Story = {
+  render: (args) => ({
+    props: args,
+  }),
+  args: {
+    multiple: false,
+    maxFiles: 1,
+    maxFileSizeMB: 5,
+  },
+};
+
+export const CustomTexButton: Story = {
+  render: (args) => ({
+    props: args,
+  }),
+  args: {
+    multiple: false,
+    maxFiles: 1,
+    maxFileSizeMB: 5,
+    textButton: 'Subir archivo personalizado',
+  },
+};
+
+export const CustomTextTitle: Story = {
+  render: (args) => ({
+    props: args,
+  }),
+  args: {
+    multiple: false,
+    maxFiles: 1,
+    maxFileSizeMB: 5,
+    textFileUpload: 'Subir archivo personalizado',
+  },
+};
+
+export const small: Story = {
+  render: (args) => ({
+    props: args,
+  }),
+  args: {
+    multiple: false,
+    maxFiles: 1,
+    maxFileSizeMB: 5,
+    isNotStore: false,
+    size: 'small',
+  },
+};
+
+export const Button: Story = {
+  render: (args) => ({
+    props: args,
+  }),
+  args: {
+    multiple: false,
+    maxFiles: 1,
+    maxFileSizeMB: 5,
+    isNotStore: true,
+  },
+};

package/src/components-source/dropi-file-upload/drop-zone/drop-zone.component.html

@@ -0,0 +1,111 @@
+<div
+  class="file-upload"
+  (drop)="onDrop($event)"
+  (dragover)="onDragOver($event)"
+  (dragleave)="onDragLeave($event)"
+>
+  <div *ngIf="!isNotStore" class="file-upload__zone" [class.drag-over]="dragOver">
+    <svg
+      *ngIf="size === 'default'"
+      width="40"
+      height="40"
+      viewBox="0 0 40 40"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M0 20C0 8.95431 8.95431 0 20 0C31.0457 0 40 8.95431 40 20C40 31.0457 31.0457 40 20 40C8.95431 40 0 31.0457 0 20Z"
+        fill="#FEF8F1"
+      />
+      <g clip-path="url(#clip0_183_10598)">
+        <path
+          d="M19.3379 13.7187L19.3332 24.0107C19.3332 24.1875 19.4035 24.357 19.5285 24.4821C19.6535 24.6071 19.8231 24.6773 19.9999 24.6773C20.1767 24.6773 20.3463 24.6071 20.4713 24.4821C20.5963 24.357 20.6666 24.1875 20.6666 24.0107L20.6712 13.73L22.6126 15.672C22.7376 15.797 22.9071 15.8672 23.0839 15.8672C23.2607 15.8672 23.4302 15.797 23.5552 15.672C23.6802 15.547 23.7504 15.3774 23.7504 15.2007C23.7504 15.0239 23.6802 14.8543 23.5552 14.7293L21.4145 12.586C21.2288 12.4001 21.0083 12.2527 20.7655 12.1521C20.5228 12.0515 20.2626 11.9998 19.9999 11.9998C19.7371 11.9998 19.477 12.0515 19.2342 12.1521C18.9915 12.2527 18.771 12.4001 18.5852 12.586L16.4445 14.7273C16.3196 14.8523 16.2494 15.0219 16.2494 15.1987C16.2494 15.3754 16.3196 15.545 16.4445 15.67C16.5696 15.795 16.7391 15.8652 16.9159 15.8652C17.0927 15.8652 17.2622 15.795 17.3872 15.67L19.3379 13.7187Z"
+          fill="#F49A3D"
+        />
+        <path
+          d="M26.6667 23.3329V25.9996C26.6667 26.1764 26.5964 26.346 26.4714 26.471C26.3464 26.596 26.1768 26.6663 26 26.6663H14C13.8232 26.6663 13.6536 26.596 13.5286 26.471C13.4036 26.346 13.3333 26.1764 13.3333 25.9996V23.3329C13.3333 23.1561 13.2631 22.9865 13.1381 22.8615C13.013 22.7365 12.8435 22.6663 12.6667 22.6663C12.4899 22.6663 12.3203 22.7365 12.1953 22.8615C12.0702 22.9865 12 23.1561 12 23.3329V25.9996C12 26.53 12.2107 27.0387 12.5858 27.4138C12.9609 27.7889 13.4696 27.9996 14 27.9996H26C26.5304 27.9996 27.0391 27.7889 27.4142 27.4138C27.7893 27.0387 28 26.53 28 25.9996V23.3329C28 23.1561 27.9298 22.9865 27.8047 22.8615C27.6797 22.7365 27.5101 22.6663 27.3333 22.6663C27.1565 22.6663 26.987 22.7365 26.8619 22.8615C26.7369 22.9865 26.6667 23.1561 26.6667 23.3329Z"
+          fill="#F49A3D"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_183_10598">
+          <rect width="16" height="16" fill="white" transform="translate(12 12)" />
+        </clipPath>
+      </defs>
+    </svg>
+    <div class="info">
+      <div [ngClass]="{ 'size-small-upload': size === 'small' }">
+        <div class="title">{{ textFileUpload | translate }}</div>
+        <dropi-button
+          *ngIf="size !== 'default'"
+          (onClick)="fileInput.click()"
+          [text]="textButton"
+          size="small"
+        ></dropi-button>
+      </div>
+
+      <div *ngIf="size === 'default'">
+        <div class="description">
+          {{ ('Supported formats' | translate) + ': ' }} {{ accept.join(', ') }}
+        </div>
+        <div class="description">
+          {{ ('Maximum size' | translate) + ': ' }} {{ maxFileSizeMB }}MB
+        </div>
+      </div>
+
+      <div *ngIf="size !== 'default'">
+        <div class="description">
+          {{ ('Supported formats' | translate) + ': ' }} {{ accept.join(', ') }}.
+          {{ ('Maximum size' | translate) + ': ' }} {{ maxFileSizeMB }}MB
+        </div>
+        <div class="description"></div>
+      </div>
+    </div>
+
+    <dropi-button
+      *ngIf="size == 'default'"
+      (onClick)="fileInput.click()"
+      [text]="textButton"
+      size="small"
+    ></dropi-button>
+    <input
+      #fileInput
+      type="file"
+      [attr.multiple]="multiple ? '' : null"
+      [attr.accept]="acceptedMimeTypes?.join(',')"
+      (change)="onFileChange($event)"
+      hidden
+    />
+  </div>
+
+  <div class="container-buttons-file" *ngIf="isNotStore">
+    <dropi-button
+      *ngIf="uploadStatus == 'idle' || uploadStatus == 'error' || uploadStatus == 'loading'"
+      [state]="disabled ? 'disabled' : stateButton"
+      preIcon="File-upload"
+      (onClick)="fileInput.click()"
+      [text]="textButton | translate"
+    ></dropi-button>
+    <div *ngIf="uploadStatus == 'success'" class="button-mock">
+      {{ fileCharged }}
+      <div class="">
+        <app-icon
+          (click)="clearFile()"
+          class="colse-circle-mock"
+          name="Close-small"
+          width="12px"
+          height="12px"
+          color="Primary-Primary-500"
+        ></app-icon>
+      </div>
+    </div>
+    <input
+      #fileInput
+      type="file"
+      [attr.multiple]="multiple ? '' : null"
+      [attr.accept]="acceptedMimeTypes?.join(',')"
+      (change)="onFileChange($event)"
+      hidden
+    />
+  </div>
+</div>

package/src/components-source/dropi-file-upload/drop-zone/drop-zone.component.scss

@@ -0,0 +1,90 @@
+.file-upload {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: var(--Size-3, 12px);
+  background: var(--White, #fff);
+
+  &__zone {
+    display: flex;
+    padding: var(--Size-5);
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: var(--Size-6);
+    align-self: stretch;
+    border-radius: var(--Border-2, 8px);
+    border: 1px dashed var(--Gray-Gray-200);
+    background: var(--White);
+    text-align: center;
+    transition: border-color 0.3s ease;
+    &.drag-over {
+      border: 1px dashed var(--Primary-Primary-500, #f49a3d);
+      background: var(--Primary-Primary-50, #fef8f1);
+    }
+
+    .info {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: var(--Size-2);
+      align-self: stretch;
+
+      .title {
+        color: var(--Gray-Gray-700);
+        text-align: center;
+        text-overflow: ellipsis;
+        font-size: var(--font-size-m);
+        font-weight: 500;
+        line-height: 150%;
+      }
+
+      .description {
+        color: var(--GrayGray-600, #475066);
+        text-align: center;
+        font-size: var(--font-size-s);
+        font-style: normal;
+        font-weight: 400;
+        line-height: 150%;
+      }
+    }
+
+    .size-small-upload {
+      gap: var(--Size-3);
+      display: flex;
+      flex-direction: row !important;
+    }
+  }
+  .container-buttons-file {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    span {
+      position: absolute;
+      top: 50px;
+    }
+    .button-mock {
+      padding: 10px;
+      border: 1px solid var(--Primary-Primary-500);
+      border-radius: 8px;
+      color: var(--Primary-Primary-500);
+      display: flex;
+      align-items: center;
+      font-size: 14px;
+      gap: 0.5rem;
+
+      .colse-circle-mock {
+        cursor: pointer;
+        border: 1px solid var(--Primary-Primary-500);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        border-radius: 50%;
+        width: 14px;
+        height: 14px;
+      }
+    }
+  }
+}

package/src/components-source/dropi-file-upload/drop-zone/drop-zone.component.ts

@@ -0,0 +1,172 @@
+import {
+  Component,
+  ElementRef,
+  EventEmitter,
+  Input,
+  OnChanges,
+  OnDestroy,
+  OnInit,
+  Output,
+  SimpleChanges,
+  ViewChild,
+} from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
+import { ButtonComponent } from '@app/ui/dropi-button/dropi-button.component';
+import { FILE_TYPE_MAP } from '../../../utilities/interfaces/ui/upload.model';
+import { UploadFileService } from '@app/services/ui/upload-file.service';
+import { CompressImagesService } from '@app/services/configuration-white-labels/compress-images.service';
+import { Subscription } from 'rxjs';
+import { IconComponent } from '@app/ui/icon/icon.component';
+
+type UploadFileState = 'uploading' | 'complete' | 'confirm-delete';
+interface FileItem {
+  file: File;
+  progress: number; // 0–100
+  state: UploadFileState;
+  previewUrl?: string;
+}
+@Component({
+  selector: 'app-drop-zone',
+  standalone: true,
+  imports: [CommonModule, TranslateModule, ButtonComponent, IconComponent],
+  templateUrl: './drop-zone.component.html',
+  styleUrls: ['./drop-zone.component.scss'],
+})
+export class DropZoneComponent implements OnInit, OnDestroy {
+  @Input() multiple = false;
+  @Input() maxFiles = 5;
+  @Input() maxFileSizeMB = 5;
+  @Input() accept: string[] = [];
+  @Input() compress: boolean = false;
+  @Input() maxHeight: number = 0;
+  @Input() maxWidth: number = 0;
+  @Input() isNotStore: boolean = false;
+  @Input() textButton: string = !this.isNotStore ? 'Seleccionar Imagen' : 'Select file';
+  @Input() textFileUpload: string = 'Drop or upload an image here';
+  //estados que se muestra el boton cuando no lleva el dropzone
+  @Input() uploadStatus: 'success' | 'error' | 'loading' | 'idle' = 'idle';
+  @Input() disabled: boolean = false;
+  @Input() size: 'small' | 'default' = 'default';
+
+  @Output() addFiles = new EventEmitter<File[]>();
+  @Output() fileCleared = new EventEmitter<string>();
+
+  dragOver = false;
+  selectedFiles: FileItem[] = [];
+  validFiles;
+  fileCharged = '';
+
+  private _isChargeFile = false;
+
+  get isChargeFile(): boolean {
+    return this._isChargeFile;
+  }
+
+  set isChargeFile(value: boolean) {
+    this._isChargeFile = value;
+    this.getStatebutton();
+  }
+
+  @ViewChild('fileInput') fileInput!: ElementRef<HTMLInputElement>;
+  private readonly subscriptions = new Subscription();
+  stateButton: string = '';
+
+  //tipos de archivos
+
+  constructor(
+    private sharedUpload: UploadFileService,
+    private compressImagesService: CompressImagesService,
+  ) {}
+
+  ngOnInit() {
+    this.subscriptions.add(
+      this.sharedUpload.triggerInput$.subscribe(() => {
+        this.fileInput.nativeElement.value = '';
+        this.fileInput.nativeElement.click();
+      }),
+    );
+  }
+
+  getStatebutton() {
+    this.stateButton = this.isChargeFile ? 'loading' : '';
+  }
+
+  onDragOver(event: DragEvent): void {
+    event.preventDefault();
+    this.dragOver = true;
+  }
+
+  onDragLeave(event: DragEvent): void {
+    this.dragOver = false;
+  }
+
+  onDrop(event: DragEvent): void {
+    event.preventDefault();
+    this.dragOver = false;
+    const files: File[] = Array.from(event.dataTransfer.files) || [];
+
+    this.compressAndEmitFiles(files);
+  }
+
+  onFileChange(event: Event): void {
+    this.isChargeFile = true;
+    const input = event.target as HTMLInputElement;
+    const files: File[] = Array.from(input.files) || [];
+    input.value = null;
+
+    this.compressAndEmitFiles(files);
+  }
+
+  compressAndEmitFiles(files: File[]) {
+    let images = [];
+    let otherFiles = [];
+
+    files.forEach((file) => {
+      if (file.type.startsWith('image/')) {
+        images.push(file);
+        this.isChargeFile = false;
+
+        return;
+      }
+      otherFiles.push(file);
+    });
+
+    if (this.compress) {
+      this.compressImagesService
+        .compressFiles(images, this.maxWidth, this.maxHeight)
+        .subscribe((compressed) => {
+          this.sendFiles([...compressed, ...otherFiles]);
+        });
+      this.isChargeFile = false;
+
+      return;
+    }
+
+    this.sendFiles(files);
+  }
+
+  get acceptedMimeTypes(): string[] {
+    if (!this.accept.length) return ['*'];
+    return this.accept
+      .map((type) => FILE_TYPE_MAP[type.toUpperCase()] || [])
+      .reduce((acc, val) => acc.concat(val), []);
+  }
+
+  sendFiles(files: File[]): void {
+    this.addFiles.emit(files);
+    this.isChargeFile = false;
+    this.fileCharged = files[0].name;
+  }
+
+  clearFile() {
+    this.fileCharged = '';
+    this.selectedFiles = [];
+    this.uploadStatus = 'idle';
+    this.fileCleared.emit(this.uploadStatus);
+  }
+
+  ngOnDestroy() {
+    this.subscriptions.unsubscribe();
+  }
+}

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

@@ -0,0 +1,42 @@
+<div class="upload-container">
+  <!--Encabezado -->
+  <div class="upload-header">
+    <div class="title text">{{ params.title | translate }}</div>
+    <div class="label text">{{ params.label | translate }}</div>
+  </div>
+
+    <app-alert
+    *ngIf="error"
+    [message]="errorMessage | translate"
+    type="default"
+    state="error"
+    [dismissable]="true"
+    [showButton]="false"
+    (onClose)="error = false"
+  ></app-alert>
+  <!--Zona de arrastre -->
+  <app-drop-zone
+    *ngIf="selectedFiles.length < params.maxFiles"
+    [hidden]="params.previewType === 'grid' && (!params.viewDragAndDrop || selectedFiles.length > 0)"
+    [accept]="params.accept"
+    [multiple]="params.multiple"
+    [compress]="params.compress"
+    [maxHeight]="params.maxHeight"
+    [maxWidth]="params.maxWidth"
+    [maxFileSizeMB]="params.maxFileSizeMB"
+    [textButton]="params.textButton || 'Seleccionar Imagen'"
+    [textFileUpload]="params.textDropZone || 'Drop or upload an image here'"
+    (addFiles)="onFilesAdded($event)"
+  ></app-drop-zone>
+
+
+  <!--Listado de archivos -->
+  <app-file-list
+    [onlyView]="params.onlyView"
+    [maxFiles]="params.maxFiles"
+    [files]="selectedFiles"
+    (action)="onFileAction($event)"
+    [previewType]="params.previewType"
+    [addButton]="!params.viewDragAndDrop"
+  ></app-file-list>
+</div>

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

@@ -0,0 +1,31 @@
+//imagenes
+
+.upload-container {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Size-3, 12px);
+  width: 100%;
+  margin: var(--Size-3, 12px);
+}
+
+.upload-header {
+  gap: var(--Size-1);
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  align-self: stretch;
+
+  .text {
+    color: var(--Gray-Gray-600, #475066);
+    font-size: var(--font-size-xs);
+    font-style: normal;
+    line-height: 150%;
+  }
+  .title {
+    font-weight: 500;
+  }
+
+  .label {
+    font-weight: 400;
+  }
+}