valtech-components 2.0.687 → 2.0.689

package/src/lib/services/image/image.service.ts

@@ -0,0 +1,328 @@
+import { Injectable } from '@angular/core';
+import {
+  CropData,
+  IMAGE_DEFAULTS,
+  ImageCompressOptions,
+  ImageValidateOptions,
+  ImageValidationResult,
+  ProcessedImage,
+} from './types';
+
+/**
+ * ImageService
+ *
+ * Service for image processing including compression, thumbnails, cropping and validation.
+ * Uses HTML Canvas for all operations - no external dependencies.
+ *
+ * @example
+ * ```typescript
+ * const imageService = inject(ImageService);
+ *
+ * // Compress an image
+ * const compressed = await imageService.compress(file, { maxWidth: 800, quality: 0.8 });
+ *
+ * // Generate thumbnail
+ * const thumb = await imageService.thumbnail(file, 150);
+ *
+ * // Validate before processing
+ * const validation = imageService.validate(file, { maxSize: 5 * 1024 * 1024 });
+ * if (!validation.valid) {
+ *   console.error(validation.message);
+ * }
+ * ```
+ */
+@Injectable({ providedIn: 'root' })
+export class ImageService {
+  /**
+   * Compress an image maintaining aspect ratio
+   * @param file - File or Blob to compress
+   * @param options - Compression options
+   * @returns Promise with processed image data
+   */
+  async compress(
+    file: File | Blob,
+    options?: ImageCompressOptions
+  ): Promise<ProcessedImage> {
+    const opts = {
+      maxWidth: options?.maxWidth ?? IMAGE_DEFAULTS.maxWidth,
+      maxHeight: options?.maxHeight ?? IMAGE_DEFAULTS.maxHeight,
+      quality: options?.quality ?? IMAGE_DEFAULTS.quality,
+      mimeType: options?.mimeType ?? IMAGE_DEFAULTS.mimeType,
+    };
+
+    const img = await this.loadImage(file);
+    const { width, height } = this.calculateDimensions(
+      img.width,
+      img.height,
+      opts.maxWidth,
+      opts.maxHeight
+    );
+
+    const canvas = document.createElement('canvas');
+    canvas.width = width;
+    canvas.height = height;
+
+    const ctx = canvas.getContext('2d')!;
+    ctx.drawImage(img, 0, 0, width, height);
+
+    const blob = await this.canvasToBlob(canvas, opts.mimeType, opts.quality);
+    const dataUrl = canvas.toDataURL(opts.mimeType, opts.quality);
+
+    return {
+      blob,
+      dataUrl,
+      width,
+      height,
+      size: blob.size,
+    };
+  }
+
+  /**
+   * Generate a square thumbnail from an image
+   * @param file - File or Blob to process
+   * @param size - Thumbnail size in pixels (default: 150)
+   * @returns Promise with processed thumbnail
+   */
+  async thumbnail(file: File | Blob, size?: number): Promise<ProcessedImage> {
+    const thumbSize = size ?? IMAGE_DEFAULTS.thumbnailSize;
+    const img = await this.loadImage(file);
+
+    // Calculate square crop from center
+    const minDim = Math.min(img.width, img.height);
+    const cropX = (img.width - minDim) / 2;
+    const cropY = (img.height - minDim) / 2;
+
+    const canvas = document.createElement('canvas');
+    canvas.width = thumbSize;
+    canvas.height = thumbSize;
+
+    const ctx = canvas.getContext('2d')!;
+    ctx.drawImage(
+      img,
+      cropX,
+      cropY,
+      minDim,
+      minDim,
+      0,
+      0,
+      thumbSize,
+      thumbSize
+    );
+
+    const blob = await this.canvasToBlob(
+      canvas,
+      IMAGE_DEFAULTS.mimeType,
+      0.7 // Lower quality for thumbnails
+    );
+    const dataUrl = canvas.toDataURL(IMAGE_DEFAULTS.mimeType, 0.7);
+
+    return {
+      blob,
+      dataUrl,
+      width: thumbSize,
+      height: thumbSize,
+      size: blob.size,
+    };
+  }
+
+  /**
+   * Crop an image with specific coordinates
+   * @param file - File or Blob to crop
+   * @param cropData - Crop coordinates and dimensions
+   * @param options - Optional compression options for output
+   * @returns Promise with cropped image
+   */
+  async crop(
+    file: File | Blob,
+    cropData: CropData,
+    options?: ImageCompressOptions
+  ): Promise<ProcessedImage> {
+    const img = await this.loadImage(file);
+    const opts = {
+      quality: options?.quality ?? IMAGE_DEFAULTS.quality,
+      mimeType: options?.mimeType ?? IMAGE_DEFAULTS.mimeType,
+    };
+
+    const canvas = document.createElement('canvas');
+    canvas.width = cropData.width;
+    canvas.height = cropData.height;
+
+    const ctx = canvas.getContext('2d')!;
+    ctx.drawImage(
+      img,
+      cropData.x,
+      cropData.y,
+      cropData.width,
+      cropData.height,
+      0,
+      0,
+      cropData.width,
+      cropData.height
+    );
+
+    // Apply max dimensions if specified
+    if (options?.maxWidth || options?.maxHeight) {
+      return this.compress(await this.canvasToBlob(canvas, opts.mimeType, 1), options);
+    }
+
+    const blob = await this.canvasToBlob(canvas, opts.mimeType, opts.quality);
+    const dataUrl = canvas.toDataURL(opts.mimeType, opts.quality);
+
+    return {
+      blob,
+      dataUrl,
+      width: cropData.width,
+      height: cropData.height,
+      size: blob.size,
+    };
+  }
+
+  /**
+   * Validate an image file before processing
+   * @param file - File to validate
+   * @param options - Validation options
+   * @returns Validation result with error details if invalid
+   */
+  validate(file: File, options?: ImageValidateOptions): ImageValidationResult {
+    const opts = {
+      maxSize: options?.maxSize ?? IMAGE_DEFAULTS.maxSize,
+      allowedTypes: options?.allowedTypes ?? IMAGE_DEFAULTS.allowedTypes,
+    };
+
+    // Check file type
+    if (!opts.allowedTypes.includes(file.type)) {
+      return {
+        valid: false,
+        error: 'invalidType',
+        message: `Formato no válido. Usa: ${opts.allowedTypes.map(t => t.split('/')[1].toUpperCase()).join(', ')}`,
+      };
+    }
+
+    // Check file size
+    if (file.size > opts.maxSize) {
+      const maxMB = Math.round(opts.maxSize / (1024 * 1024));
+      return {
+        valid: false,
+        error: 'fileTooLarge',
+        message: `La imagen es muy grande. Máximo ${maxMB}MB`,
+      };
+    }
+
+    return { valid: true };
+  }
+
+  /**
+   * Validate image dimensions (async - requires loading image)
+   * @param file - File to validate
+   * @param options - Validation options with minWidth/minHeight
+   * @returns Promise with validation result
+   */
+  async validateDimensions(
+    file: File,
+    options: Pick<ImageValidateOptions, 'minWidth' | 'minHeight'>
+  ): Promise<ImageValidationResult> {
+    const img = await this.loadImage(file);
+
+    if (options.minWidth && img.width < options.minWidth) {
+      return {
+        valid: false,
+        error: 'imageTooSmall',
+        message: `La imagen debe tener al menos ${options.minWidth}px de ancho`,
+      };
+    }
+
+    if (options.minHeight && img.height < options.minHeight) {
+      return {
+        valid: false,
+        error: 'imageTooSmall',
+        message: `La imagen debe tener al menos ${options.minHeight}px de alto`,
+      };
+    }
+
+    return { valid: true };
+  }
+
+  /**
+   * Convert a Blob/File to a data URL
+   */
+  async toDataUrl(file: File | Blob): Promise<string> {
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.onload = () => resolve(reader.result as string);
+      reader.onerror = reject;
+      reader.readAsDataURL(file);
+    });
+  }
+
+  /**
+   * Convert a data URL to a Blob
+   */
+  dataUrlToBlob(dataUrl: string): Blob {
+    const arr = dataUrl.split(',');
+    const mime = arr[0].match(/:(.*?);/)![1];
+    const bstr = atob(arr[1]);
+    let n = bstr.length;
+    const u8arr = new Uint8Array(n);
+    while (n--) {
+      u8arr[n] = bstr.charCodeAt(n);
+    }
+    return new Blob([u8arr], { type: mime });
+  }
+
+  // ============== Private Helpers ==============
+
+  private loadImage(file: File | Blob): Promise<HTMLImageElement> {
+    return new Promise((resolve, reject) => {
+      const img = new Image();
+      img.onload = () => {
+        URL.revokeObjectURL(img.src);
+        resolve(img);
+      };
+      img.onerror = reject;
+      img.src = URL.createObjectURL(file);
+    });
+  }
+
+  private calculateDimensions(
+    originalWidth: number,
+    originalHeight: number,
+    maxWidth: number,
+    maxHeight: number
+  ): { width: number; height: number } {
+    let width = originalWidth;
+    let height = originalHeight;
+
+    // Scale down if necessary, maintaining aspect ratio
+    if (width > maxWidth) {
+      height = (height * maxWidth) / width;
+      width = maxWidth;
+    }
+
+    if (height > maxHeight) {
+      width = (width * maxHeight) / height;
+      height = maxHeight;
+    }
+
+    return {
+      width: Math.round(width),
+      height: Math.round(height),
+    };
+  }
+
+  private canvasToBlob(
+    canvas: HTMLCanvasElement,
+    mimeType: string,
+    quality: number
+  ): Promise<Blob> {
+    return new Promise((resolve, reject) => {
+      canvas.toBlob(
+        (blob) => {
+          if (blob) resolve(blob);
+          else reject(new Error('Failed to create blob from canvas'));
+        },
+        mimeType,
+        quality
+      );
+    });
+  }
+}

package/src/lib/services/image/types.ts

@@ -0,0 +1,79 @@
+/**
+ * Options for image compression
+ */
+export interface ImageCompressOptions {
+  /** Maximum width in pixels (default: 800) */
+  maxWidth?: number;
+  /** Maximum height in pixels (default: 800) */
+  maxHeight?: number;
+  /** Quality 0-1 (default: 0.8) */
+  quality?: number;
+  /** Output MIME type (default: 'image/jpeg') */
+  mimeType?: 'image/jpeg' | 'image/png' | 'image/webp';
+}
+
+/**
+ * Options for image validation
+ */
+export interface ImageValidateOptions {
+  /** Maximum file size in bytes (default: 10MB) */
+  maxSize?: number;
+  /** Allowed MIME types (default: ['image/jpeg', 'image/png', 'image/webp', 'image/gif']) */
+  allowedTypes?: string[];
+  /** Minimum width in pixels */
+  minWidth?: number;
+  /** Minimum height in pixels */
+  minHeight?: number;
+}
+
+/**
+ * Result of image validation
+ */
+export interface ImageValidationResult {
+  valid: boolean;
+  error?: 'invalidType' | 'fileTooLarge' | 'imageTooSmall';
+  message?: string;
+}
+
+/**
+ * Processed image result
+ */
+export interface ProcessedImage {
+  /** Processed image as Blob */
+  blob: Blob;
+  /** Data URL for preview */
+  dataUrl: string;
+  /** Final width in pixels */
+  width: number;
+  /** Final height in pixels */
+  height: number;
+  /** File size in bytes */
+  size: number;
+}
+
+/**
+ * Crop data for manual cropping
+ */
+export interface CropData {
+  /** X position of crop area */
+  x: number;
+  /** Y position of crop area */
+  y: number;
+  /** Width of crop area */
+  width: number;
+  /** Height of crop area */
+  height: number;
+}
+
+/**
+ * Default values for image processing
+ */
+export const IMAGE_DEFAULTS = {
+  maxWidth: 800,
+  maxHeight: 800,
+  quality: 0.8,
+  mimeType: 'image/jpeg' as const,
+  maxSize: 10 * 1024 * 1024, // 10MB
+  allowedTypes: ['image/jpeg', 'image/png', 'image/webp', 'image/gif'],
+  thumbnailSize: 150,
+};

package/src/lib/services/in-app-browser.service.ts

@@ -0,0 +1,30 @@
+/* eslint-disable no-underscore-dangle */
+
+/**
+ * Service for opening URLs using Capacitor's InAppBrowser plugin.
+ * Provides a method to open links in a popover-style browser within the app.
+ */
+import { Injectable } from '@angular/core';
+import { Browser, OpenOptions } from '@capacitor/browser';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class InAppBrowserService {
+  /**
+   * Default options for the in-app browser.
+   */
+  options: OpenOptions = {
+    presentationStyle: 'popover',
+    url: '',
+  };
+  constructor() {}
+
+  /**
+   * Opens a URL using Capacitor's InAppBrowser with the configured options.
+   * @param url The URL to open
+   */
+  async openWithInAppBrowser(url: string) {
+    await Browser.open({ ...this.options, url });
+  }
+}