angular-matecu 4.1.0 → 4.2.0

package/src/lib/components/matecu-file-input/matecu-file-input.example.md

@@ -1,228 +0,0 @@
-# MatecuFileInput - Ejemplos de Uso
-
-## Uso Básico
-
-### Archivo Simple
-
-```html
-<matecu-file-input
-  [(ngModel)]="selectedFile"
-  [maxFileSize]="5242880"
-  [acceptedMimeTypes]="['image/*', 'application/pdf']"
-  (fileSelected)="onFileSelected($event)"
->
-</matecu-file-input>
-```
-
-### Múltiples Archivos
-
-```html
-<matecu-file-input
-  [(ngModel)]="selectedFiles"
-  [multiple]="true"
-  [maxFiles]="5"
-  [maxFileSize]="10485760"
-  [showPreview]="true"
-  [acceptedExtensions]="['.jpg', '.png', '.pdf', '.docx']"
-  (filesSelected)="onFilesSelected($event)"
->
-</matecu-file-input>
-```
-
-## Configuraciones Avanzadas
-
-### Con Drag & Drop y Preview
-
-```html
-<matecu-file-input
-  [(ngModel)]="imageFiles"
-  [multiple]="true"
-  [maxFiles]="10"
-  [enableDragDrop]="true"
-  [showPreview]="true"
-  [previewMaxWidth]="150"
-  [previewMaxHeight]="150"
-  [acceptedMimeTypes]="['image/jpeg', 'image/png', 'image/webp']"
-  [placeholder]="'Arrastra tus imágenes aquí o haz clic para seleccionar'"
-  [buttonText]="'Seleccionar Imágenes'"
-  (dragEnter)="onDragEnter($event)"
-  (dragLeave)="onDragLeave($event)"
-  (fileSelected)="onImageSelected($event)"
->
-</matecu-file-input>
-```
-
-### Con Optimización de Imágenes
-
-```html
-<matecu-file-input
-  [(ngModel)]="optimizedImage"
-  [optimizeImage]="optimizeImageFunction"
-  [optimizeImageToSize]="800"
-  [acceptedMimeTypes]="['image/*']"
-  [showFileSize]="true"
-  [displayName]="'Imagen optimizada'"
->
-</matecu-file-input>
-```
-
-### Con Formato de Tamaño Personalizado
-
-```html
-<!-- Mostrar siempre en KB -->
-<matecu-file-input [(ngModel)]="file" [showFileSize]="true" [fileSizeUnit]="'KB'">
-</matecu-file-input>
-
-<!-- Mostrar siempre en MB -->
-<matecu-file-input [(ngModel)]="file" [showFileSize]="true" [fileSizeUnit]="'MB'">
-</matecu-file-input>
-
-<!-- Automático (predeterminado) - mejor unidad según tamaño -->
-<matecu-file-input [(ngModel)]="file" [showFileSize]="true" [fileSizeUnit]="'AUTO'">
-</matecu-file-input>
-```
-
-### Con Mensajes de Error Personalizados
-
-```html
-<matecu-file-input
-  [(ngModel)]="document"
-  [maxFileSize]="2097152"
-  [acceptedExtensions]="['.pdf', '.doc', '.docx']"
-  [errorMessages]="{
-    invalidSize: 'El documento no puede superar 2MB',
-    invalidType: 'Solo se permiten archivos PDF y Word',
-    uploadError: 'Error al procesar el documento'
-  }"
-  (validationError)="onValidationError($event)"
->
-</matecu-file-input>
-```
-
-## Implementación en Componente TypeScript
-
-```typescript
-import { Component } from '@angular/core';
-import { MatecuFileInput, FileInputState, FileSizeUnit } from 'angular-matecu';
-
-@Component({
-  selector: 'app-file-upload',
-  template: `
-    <matecu-file-input
-      [(ngModel)]="selectedFiles"
-      [multiple]="true"
-      [maxFiles]="3"
-      [maxFileSize]="maxSize"
-      [showPreview]="true"
-      [showFileSize]="true"
-      [enableDragDrop]="true"
-      [acceptedMimeTypes]="allowedTypes"
-      (filesSelected)="onFilesSelected($event)"
-      (validationError)="onError($event)"
-      (stateChange)="onStateChange($event)"
-    ></matecu-file-input>
-
-    <div *ngIf="isProcessing">Procesando archivos...</div>
-  `,
-})
-export class FileUploadComponent {
-  selectedFiles: File[] = [];
-  maxSize = 5 * 1024 * 1024; // 5MB
-  allowedTypes = ['image/jpeg', 'image/png', 'application/pdf'];
-  isProcessing = false;
-  sizeUnit: FileSizeUnit = 'AUTO'; // Nueva propiedad para controlar la unidad
-
-  onFilesSelected(files: File[]) {
-    console.log('Archivos seleccionados:', files);
-    // Procesar archivos...
-  }
-
-  onError(errors: string[]) {
-    console.error('Errores de validación:', errors);
-    // Mostrar errores al usuario...
-  }
-
-  onStateChange(state: FileInputState) {
-    this.isProcessing = state === FileInputState.LOADING;
-    console.log('Estado cambiado a:', state);
-  }
-
-  // Función para optimizar imágenes
-  optimizeImageFunction = async (file: File): Promise<File> => {
-    return new Promise((resolve) => {
-      const canvas = document.createElement('canvas');
-      const ctx = canvas.getContext('2d')!;
-      const img = new Image();
-
-      img.onload = () => {
-        // Calcular nuevas dimensiones manteniendo aspecto
-        const maxSize = 800;
-        const ratio = Math.min(maxSize / img.width, maxSize / img.height);
-        const newWidth = img.width * ratio;
-        const newHeight = img.height * ratio;
-
-        canvas.width = newWidth;
-        canvas.height = newHeight;
-
-        // Dibujar imagen redimensionada
-        ctx.drawImage(img, 0, 0, newWidth, newHeight);
-
-        // Convertir a blob
-        canvas.toBlob(
-          (blob) => {
-            if (blob) {
-              const optimizedFile = new File([blob], file.name, {
-                type: file.type,
-                lastModified: Date.now(),
-              });
-              resolve(optimizedFile);
-            } else {
-              resolve(file);
-            }
-          },
-          file.type,
-          0.85, // Calidad de compresión
-        );
-      };
-
-      img.src = URL.createObjectURL(file);
-    });
-  };
-}
-```
-
-## Propiedades Disponibles
-
-### Inputs
-
-- `multiple`: Permite selección múltiple
-- `maxFiles`: Número máximo de archivos (para múltiple)
-- `maxFileSize`: Tamaño máximo en bytes
-- `acceptedMimeTypes`: Tipos MIME permitidos
-- `acceptedExtensions`: Extensiones permitidas
-- `enableDragDrop`: Habilita drag & drop
-- `showPreview`: Muestra preview de imágenes
-- `showFileSize`: Muestra tamaño del archivo
-- `fileSizeUnit`: Unidad para mostrar tamaño ('AUTO' | 'bytes' | 'KB' | 'MB' | 'GB' | 'TB')
-- `displayName`: Nombre personalizado a mostrar
-- `placeholder`: Texto cuando no hay archivos
-- `buttonText`: Texto del botón de selección
-- `optimizeImage`: Función para optimizar imágenes
-- `errorMessages`: Mensajes de error personalizados
-
-### Outputs
-
-- `fileSelected`: Emite cuando se selecciona un archivo
-- `filesSelected`: Emite cuando se seleccionan múltiples archivos
-- `fileRemoved`: Emite cuando se elimina un archivo
-- `validationError`: Emite errores de validación
-- `stateChange`: Emite cambios de estado
-- `dragEnter`: Emite cuando se inicia drag
-- `dragLeave`: Emite cuando se termina drag
-
-### Estados
-
-- `IDLE`: Estado inicial
-- `LOADING`: Procesando archivos
-- `SUCCESS`: Archivos procesados exitosamente
-- `ERROR`: Error en validación o procesamiento

package/src/lib/components/matecu-file-input/matecu-file-input.html

@@ -1,128 +0,0 @@
-<!-- Hidden file input -->
-<input type="file" #fileInput (change)="onFileChange($event)" [multiple]="multiple" [disabled]="isDisabled"
-    [attr.aria-label]="ariaLabel || 'Select file'" [attr.aria-describedby]="hasErrors ? 'file-input-errors' : null"
-    [accept]="acceptedMimeTypes.join(',')" />
-
-<!-- Main drop zone and file display -->
-<div class="file-input-container" [class.drag-over]="isDragOver" [class.disabled]="isDisabled"
-    [class.has-files]="hasFiles" [class.has-errors]="hasErrors" [class.loading]="isLoading"
-    (dragover)="onDragOver($event)" (dragleave)="onDragLeave($event)" (drop)="onDrop($event)"
-    (click)="openFileDialog()">
-    <!-- Loading state -->
-    @if (isLoading) {
-    <div class="loading-container">
-        <div class="spinner"></div>
-        <span class="loading-text">{{ loadingText }}</span>
-    </div>
-    }
-
-    <!-- Empty state / Drop zone -->
-    @if (!hasFiles && !isLoading) {
-    <div class="drop-zone">
-        <div class="drop-zone-icon">
-            📁
-        </div>
-        <div class="drop-zone-content">
-            <p class="drop-zone-title">{{ placeholder }}</p>
-            <button type="button" class="select-button" [disabled]="isDisabled"
-                (click)="openFileDialog(); $event.stopPropagation()">
-                {{ buttonText }}
-            </button>
-            @if (enableDragDrop && !isDisabled) {
-            }
-        </div>
-    </div>
-    }
-
-    <!-- Single file display -->
-    @if (!multiple && file && !isLoading) {
-    <div class="single-file-display">
-        <div class="file-info">
-            <!-- File preview -->
-            @if (showPreview && file.type.startsWith('image/')) {
-            <div class="file-preview">
-                <img [src]="getPreviewUrl(file)" [alt]="file.name" [style.max-width.px]="previewMaxWidth"
-                    [style.max-height.px]="previewMaxHeight" />
-            </div>
-            } @else {
-            <div class="file-icon">
-                {{ getFileIcon(file) }}
-            </div>
-            }
-
-            <div class="file-details">
-                <h3 class="file-name">{{ displayName || file.name }}</h3>
-                @if (showFileSize && selectedFileSize) {
-                <p class="file-size">
-                    {{ formatFileSize(file) }}
-                </p>
-                }
-                <p class="file-type">{{ file.type || 'Unknown type' }}</p>
-            </div>
-        </div>
-
-        <button type="button" class="remove-file-button" (click)="removeFile(file); $event.stopPropagation()"
-            [attr.aria-label]="'Remove ' + file.name">
-            ✕
-        </button>
-    </div>
-    }
-
-    <!-- Multiple files display -->
-    @if (multiple && files.length > 0 && !isLoading) {
-    <div class="multiple-files-display">
-        <div class="files-header">
-            @if (maxFiles > 1) {
-            <span class="files-counter">{{ files.length }} / {{ maxFiles }}</span>
-            }
-        </div>
-
-        <div class="files-list">
-            @for (file of files; track file.name + file.size; let i = $index) {
-            <div class="file-item">
-                <!-- File preview -->
-                @if (showPreview && file.type.startsWith('image/')) {
-                <div class="file-preview-small">
-                    <img [src]="getPreviewUrl(file)" [alt]="file.name" />
-                </div>
-                } @else {
-                <div class="file-icon-small">
-                    {{ getFileIcon(file) }}
-                </div>
-                }
-
-                <div class="file-item-details">
-                    <div class="file-item-name">{{ file.name }}</div>
-                    @if (showFileSize) {
-                    <div class="file-item-size">
-                        {{ formatFileSize(file) }}
-                    </div>
-                    }
-                </div>
-
-                <button type="button" class="remove-file-button-small"
-                    (click)="removeFile(file); $event.stopPropagation()" [attr.aria-label]="'Remove ' + file.name">
-                    ✕
-                </button>
-            </div>
-            }
-        </div>
-
-        <!-- Add more files button -->
-        @if (files.length < maxFiles) { <button type="button" class="add-more-button"
-            (click)="openFileDialog(); $event.stopPropagation()">
-            {{ changeSelectedFileText }}
-            </button>
-            }
-    </div>
-    }
-</div>
-
-<!-- Error messages -->
-@if (hasErrors) {
-<div id="file-input-errors" class="error-messages" role="alert">
-    @for (error of validationErrors; track error) {
-    <div class="error-message">{{ error }}</div>
-    }
-</div>
-}