Dropzone

This project was generated using Angular CLI version 20.1.0.

Code scaffolding

Angular CLI includes powerful code scaffolding tools. To generate a new component, run:

Dropzone — Componente CBM para arrastrar y subir ficheros

Este paquete expone el componente standalone CbmDropzoneComponent que facilita la selección, arrastre (drag & drop) y descarga de ficheros en aplicaciones Angular.

Resumen rápido

• Selector: cbm-dropzone
• Standalone: sí (usa Shadow DOM para encapsular estilos)
• Entradas (inputs): message, accept, files, disabled, darkMode
• Salidas (outputs): uplaodFile (emite un FileList cuando se seleccionan o sueltan archivos)

Descripción funcional

• El componente permite seleccionar archivos mediante el diálogo de ficheros o arrastrándolos al área (drag & drop).
• Mantiene un estado visual de dragover y un contador interno para gestionar las entradas/salidas del drag.
• Ofrece un método downloadFile(file: File) que crea un blob URL y dispara la descarga del fichero.
• Implementa un pequeño efecto visual en el botón onUploadClick (ripple) para feedback UX.

API: Inputs

• message: string — Texto que se puede mostrar dentro del dropzone para indicar acción esperada.
• accept: string — String de tipos MIME/extensiones aceptadas (ej. image/*,.pdf).
• files: File[] — Lista de ficheros actualmente asociada al componente (puede ser usada para renderizar la lista desde el anfitrión).
• disabled: boolean — Si es true, desactiva la interacción de subida.
• darkMode: boolean — Permite ajustar estilos cuando la app usa modo oscuro.

API: Output

• uplaodFile: EventEmitter<FileList> — Emite un FileList cuando el usuario selecciona o suelta archivos.

Eventos y comportamiento

• onFileSelected(event: Event) — Manejador para el input[type=file]. Si hay archivos, emite uplaodFile.
• onDragOver(event: Event), onDragEnter, onDragLeave, onDrop(event: DragEvent) — Manejan la interacción drag & drop y actualizan dragover y counter.
• downloadFile(file: File) — Descarga el File recibido creando un enlace temporal.
• onUploadClick(event: MouseEvent) — Añade el efecto visual (ripple) al botón.

Detalles técnicos y notas de integración

• El componente está marcado como standalone: true y usa ViewEncapsulation.ShadowDom. Esto significa que sus estilos están encapsulados y no interferirán con estilos globales, pero también que su CSS no puede ser afectado por reglas globales a menos que se use ::part o variables CSS compatibles.
• Asegúrate de importar el componente directamente donde lo uses o de exportarlo desde una librería si quieres reusar su API en otros módulos.
• El output uplaodFile entrega un FileList. Para convertirlo en File[] en el consumidor, puedes usar:

const filesArray = Array.from(fileList);

Accesibilidad

• Si personalizas la plantilla del dropzone, comprueba que el input[type=file] sea accesible para teclado y que los anuncios de estado (por ejemplo, subida completada) sean leíbles por lectores de pantalla.

Ejemplo de uso

En un módulo o componente que use el dropzone:

<cbm-dropzone
   [message]="'Arrastra tus archivos aquí o haz clic para seleccionar'"
   accept="image/*,.pdf"
   (uplaodFile)="onFiles($event)"
></cbm-dropzone>

En el componente TypeScript:

onFiles(event: FileList) {
   const files = Array.from(event);
   // procesar los ficheros
}

Pruebas unitarias

• Para probar el componente puedes montarlo con TestBed y simular eventos dragenter, dragleave, drop y change en el input[type=file].

Sugerencias de mejoras

• Añadir soporte opcional de previsualización de ficheros (thumbnails) para imágenes.
• Permitir la subida asíncrona dentro del componente usando un @Input() con un callback o inyectando un servicio opcional para gestionar la subida.
• Exponer eventos más finos (uploadStart, uploadProgress, uploadComplete) si el componente debe orquestar la subida.

Contribución y estilo

• Sigue las normas del monorepo: añadir pruebas unitarias cuando modifiques comportamiento, documentar cambios en README y actualizar la versión si procede.

Archivo de referencia

• Código fuente principal: projects/dropzone/src/lib/dropzone.component.ts

Si quieres, adapto el README para añadir ejemplos concretos de estilos CSS, pruebas de ejemplo (spec) o una versión en la carpeta src/demo con un ejemplo runnable.