valtech-components 2.0.787 → 2.0.795

package/src/lib/services/presets/preset.service.ts

@@ -0,0 +1,105 @@
+import { Injectable, signal } from '@angular/core';
+import { PresetConfig, ComponentPresets } from './types';
+
+/**
+ * Servicio para gestionar presets de componentes.
+ *
+ * Los presets permiten definir configuraciones reutilizables
+ * de componentes (tamaño, color, variante, etc.) que se pueden
+ * aplicar con un nombre semántico.
+ *
+ * @example
+ * // En un componente
+ * presets = inject(PresetService);
+ *
+ * // Obtener preset
+ * const buttonProps = this.presets.get<ButtonMetadata>('button', 'primary-action');
+ * // { size: 'large', color: 'primary', fill: 'solid' }
+ */
+@Injectable({ providedIn: 'root' })
+export class PresetService {
+  private readonly _presets = signal<PresetConfig>({});
+
+  /**
+   * Obtiene un preset específico para un componente
+   *
+   * @param component Tipo de componente (ej: 'button', 'card', 'input')
+   * @param presetName Nombre del preset (ej: 'primary-action', 'compact')
+   * @returns Propiedades del preset o objeto vacío si no existe
+   *
+   * @example
+   * // Obtener preset de botón
+   * const props = presets.get<ButtonMetadata>('button', 'primary-action');
+   *
+   * // Usar en componente
+   * <val-button [props]="props"></val-button>
+   */
+  get<T extends Record<string, unknown>>(component: string, presetName: string): Partial<T> {
+    const componentPresets = this._presets()[component];
+    if (!componentPresets) {
+      console.warn(`[presets] No presets registered for component: ${component}`);
+      return {} as Partial<T>;
+    }
+
+    const preset = componentPresets[presetName];
+    if (!preset) {
+      console.warn(`[presets] Preset '${presetName}' not found for component: ${component}`);
+      return {} as Partial<T>;
+    }
+
+    return preset as Partial<T>;
+  }
+
+  /**
+   * Verifica si existe un preset
+   */
+  has(component: string, presetName: string): boolean {
+    return !!this._presets()[component]?.[presetName];
+  }
+
+  /**
+   * Registra presets de la aplicación
+   *
+   * @param presets Configuración de presets
+   *
+   * @example
+   * presets.registerPresets({
+   *   button: {
+   *     'primary-action': { size: 'large', color: 'primary' },
+   *   },
+   *   card: {
+   *     'feature': { variant: 'elevated' },
+   *   }
+   * });
+   */
+  registerPresets(presets: PresetConfig): void {
+    this._presets.set(presets);
+  }
+
+  /**
+   * Agrega presets para un componente específico (merge con existentes)
+   */
+  registerComponentPresets(component: string, presets: ComponentPresets): void {
+    this._presets.update((current) => ({
+      ...current,
+      [component]: {
+        ...current[component],
+        ...presets,
+      },
+    }));
+  }
+
+  /**
+   * Obtiene todos los nombres de presets para un componente
+   */
+  getPresetNames(component: string): string[] {
+    return Object.keys(this._presets()[component] || {});
+  }
+
+  /**
+   * Obtiene todos los componentes con presets registrados
+   */
+  getRegisteredComponents(): string[] {
+    return Object.keys(this._presets());
+  }
+}

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

@@ -0,0 +1,41 @@
+/**
+ * Presets para un tipo de componente
+ *
+ * @example
+ * const buttonPresets: ComponentPresets = {
+ *   'primary-action': { size: 'large', color: 'primary', fill: 'solid' },
+ *   'secondary': { size: 'medium', color: 'secondary', fill: 'outline' },
+ *   'danger': { size: 'medium', color: 'danger', fill: 'solid' },
+ * };
+ */
+export type ComponentPresets = Record<string, Record<string, unknown>>;
+
+/**
+ * Configuración completa de presets por componente
+ *
+ * @example
+ * const appPresets: PresetConfig = {
+ *   button: {
+ *     'primary-action': { size: 'large', color: 'primary', fill: 'solid' },
+ *     'secondary': { size: 'medium', color: 'secondary', fill: 'outline' },
+ *   },
+ *   card: {
+ *     'feature': { variant: 'elevated', padding: 'large' },
+ *     'compact': { variant: 'flat', padding: 'small' },
+ *   },
+ *   input: {
+ *     'form-field': { size: 'medium', fill: 'outline', labelPosition: 'floating' },
+ *   }
+ * };
+ */
+export type PresetConfig = Record<string, ComponentPresets>;
+
+/**
+ * Opciones para provideValtechPresets()
+ */
+export interface PresetsOptions {
+  /**
+   * Presets iniciales de la aplicación
+   */
+  presets: PresetConfig;
+}

package/src/lib/services/qr-generator/qr-generator.service.ts

@@ -0,0 +1,378 @@
+import { Injectable } from '@angular/core';
+import QRCodeStyling from 'qr-code-styling';
+import {
+  QrConfig,
+  QrResult,
+  QrDownloadOptions,
+  QrShareOptions,
+  QrColorConfig,
+  QrGradient,
+  QR_PRESETS,
+} from './types';
+
+/**
+ * QrGeneratorService
+ *
+ * A comprehensive service for generating, customizing, and manipulating QR codes.
+ * Uses qr-code-styling library for high-quality, customizable QR code generation.
+ *
+ * @example Basic usage
+ * ```typescript
+ * const qr = await this.qrService.generate({ data: 'https://example.com' });
+ * console.log(qr.dataUrl); // base64 image
+ * ```
+ *
+ * @example With customization
+ * ```typescript
+ * const qr = await this.qrService.generate({
+ *   data: 'https://example.com',
+ *   width: 400,
+ *   dotsStyle: 'rounded',
+ *   dotsColor: '#3880ff',
+ *   logo: { src: 'logo.png', width: 60 }
+ * });
+ * ```
+ *
+ * @example Using presets
+ * ```typescript
+ * const qr = await this.qrService.generateFromPreset('modern', 'https://example.com');
+ * ```
+ */
+@Injectable({
+  providedIn: 'root',
+})
+export class QrGeneratorService {
+  /**
+   * Generate a QR code with the given configuration.
+   *
+   * @param config - QR code configuration
+   * @returns Promise<QrResult> - Generated QR code result
+   *
+   * @example
+   * ```typescript
+   * const qr = await this.qrService.generate({
+   *   data: 'https://myapp.com/product/123',
+   *   width: 300,
+   *   dotsStyle: 'rounded',
+   *   dotsColor: '#000000',
+   *   backgroundColor: '#ffffff'
+   * });
+   * ```
+   */
+  async generate(config: QrConfig): Promise<QrResult> {
+
+    // Merge with defaults
+    const finalConfig: QrConfig = {
+      width: 300,
+      height: config.height || config.width || 300,
+      margin: 0,
+      dotsStyle: 'square',
+      dotsColor: '#000000',
+      backgroundColor: '#ffffff',
+      errorCorrectionLevel: 'M',
+      format: 'png',
+      quality: 1,
+      ...config,
+    };
+
+    // Build qr-code-styling options
+    const qrOptions: any = {
+      width: finalConfig.width,
+      height: finalConfig.height,
+      data: finalConfig.data,
+      margin: finalConfig.margin,
+      qrOptions: {
+        errorCorrectionLevel: finalConfig.errorCorrectionLevel,
+      },
+      dotsOptions: {
+        type: finalConfig.dotsStyle,
+        ...this.buildColorOptions(finalConfig.dotsColor),
+      },
+      backgroundOptions: {
+        ...this.buildColorOptions(finalConfig.backgroundColor),
+      },
+      cornersSquareOptions: finalConfig.cornersSquareColor || finalConfig.cornersSquareStyle
+        ? {
+            type: finalConfig.cornersSquareStyle,
+            ...this.buildColorOptions(finalConfig.cornersSquareColor || finalConfig.dotsColor),
+          }
+        : undefined,
+      cornersDotOptions: finalConfig.cornersDotColor || finalConfig.cornersDotStyle
+        ? {
+            type: finalConfig.cornersDotStyle,
+            ...this.buildColorOptions(finalConfig.cornersDotColor || finalConfig.dotsColor),
+          }
+        : undefined,
+    };
+
+    // Add logo if provided
+    if (finalConfig.logo) {
+      qrOptions.image = finalConfig.logo.src;
+      qrOptions.imageOptions = {
+        hideBackgroundDots: finalConfig.logo.hideBackgroundDots ?? true,
+        imageSize: 0.4,
+        margin: finalConfig.logo.margin ?? 5,
+        crossOrigin: 'anonymous',
+      };
+    }
+
+    // Create QR code instance
+    const qrCode = new QRCodeStyling(qrOptions);
+
+    // Generate blob
+    const format = finalConfig.format || 'png';
+    const mimeType = this.getMimeType(format);
+    const extension = format === 'jpeg' ? 'jpg' : format;
+
+    let blob: Blob;
+    let svg: string | undefined;
+    let dataUrl: string;
+
+    if (format === 'svg') {
+      // Get SVG data
+      const svgData = await qrCode.getRawData('svg');
+      if (!svgData) {
+        throw new Error('Failed to generate SVG');
+      }
+      blob = svgData as Blob;
+      svg = await blob.text();
+      dataUrl = `data:${mimeType};base64,${btoa(svg)}`;
+    } else {
+      // Get image blob
+      const imageBlob = await qrCode.getRawData(format as 'png' | 'jpeg' | 'webp');
+      if (!imageBlob) {
+        throw new Error('Failed to generate image');
+      }
+      blob = imageBlob as Blob;
+      dataUrl = await this.blobToDataUrl(blob);
+    }
+
+    return {
+      config: finalConfig,
+      dataUrl,
+      blob,
+      svg,
+      mimeType,
+      extension,
+      generatedAt: new Date(),
+    };
+  }
+
+  /**
+   * Generate a QR code using a preset configuration.
+   *
+   * @param preset - Preset name ('default', 'rounded', 'dots', 'classy', 'modern')
+   * @param data - Data to encode
+   * @param overrides - Optional configuration overrides
+   * @returns Promise<QrResult>
+   */
+  async generateFromPreset(
+    preset: keyof typeof QR_PRESETS | string,
+    data: string,
+    overrides?: Partial<QrConfig>
+  ): Promise<QrResult> {
+    const presetConfig = QR_PRESETS[preset] || QR_PRESETS['default'];
+    return this.generate({
+      ...presetConfig,
+      ...overrides,
+      data,
+    });
+  }
+
+  /**
+   * Download the QR code as a file.
+   *
+   * @param qr - QR result to download
+   * @param options - Download options
+   */
+  async download(qr: QrResult, options?: QrDownloadOptions): Promise<void> {
+    const filename = options?.filename || `qr-code-${Date.now()}`;
+    const format = options?.format || qr.config.format || 'png';
+    const extension = format === 'jpeg' ? 'jpg' : format;
+
+    let blob = qr.blob;
+
+    // Convert if different format requested
+    if (options?.format && options.format !== qr.config.format) {
+      const newQr = await this.generate({
+        ...qr.config,
+        format: options.format,
+      });
+      blob = newQr.blob;
+    }
+
+    // Create download link
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = `${filename}.${extension}`;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    URL.revokeObjectURL(url);
+  }
+
+  /**
+   * Copy the QR code to clipboard as an image.
+   *
+   * @param qr - QR result to copy
+   * @returns Promise<boolean> - Whether copy was successful
+   */
+  async copyToClipboard(qr: QrResult): Promise<boolean> {
+    try {
+      // Clipboard API requires PNG format
+      let pngBlob = qr.blob;
+
+      if (qr.mimeType !== 'image/png') {
+        const pngQr = await this.generate({
+          ...qr.config,
+          format: 'png',
+        });
+        pngBlob = pngQr.blob;
+      }
+
+      await navigator.clipboard.write([
+        new ClipboardItem({
+          'image/png': pngBlob,
+        }),
+      ]);
+
+      return true;
+    } catch (error) {
+      console.error('Failed to copy QR to clipboard:', error);
+      return false;
+    }
+  }
+
+  /**
+   * Share the QR code using Web Share API.
+   *
+   * @param qr - QR result to share
+   * @param options - Share options
+   * @returns Promise<boolean> - Whether share was successful
+   */
+  async share(qr: QrResult, options?: QrShareOptions): Promise<boolean> {
+    if (!navigator.share || !navigator.canShare) {
+      console.warn('Web Share API not available');
+      return false;
+    }
+
+    try {
+      const filename = options?.filename || `qr-code-${Date.now()}.${qr.extension}`;
+      const file = new File([qr.blob], filename, { type: qr.mimeType });
+
+      const shareData: ShareData = {
+        title: options?.title || 'QR Code',
+        text: options?.text,
+        files: [file],
+      };
+
+      if (navigator.canShare(shareData)) {
+        await navigator.share(shareData);
+        return true;
+      }
+
+      // Fallback without file
+      await navigator.share({
+        title: options?.title || 'QR Code',
+        text: options?.text,
+      });
+
+      return true;
+    } catch (error) {
+      if ((error as Error).name !== 'AbortError') {
+        console.error('Failed to share QR:', error);
+      }
+      return false;
+    }
+  }
+
+  /**
+   * Get the QR code as a base64 string (without data URL prefix).
+   *
+   * @param qr - QR result
+   * @returns Base64 string
+   */
+  toBase64(qr: QrResult): string {
+    const prefix = `data:${qr.mimeType};base64,`;
+    if (qr.dataUrl.startsWith(prefix)) {
+      return qr.dataUrl.substring(prefix.length);
+    }
+    return qr.dataUrl;
+  }
+
+  /**
+   * Get the QR code as a data URL.
+   *
+   * @param qr - QR result
+   * @returns Data URL string
+   */
+  toDataUrl(qr: QrResult): string {
+    return qr.dataUrl;
+  }
+
+  /**
+   * Get the QR code as a Blob.
+   *
+   * @param qr - QR result
+   * @returns Blob
+   */
+  toBlob(qr: QrResult): Blob {
+    return qr.blob;
+  }
+
+  /**
+   * Check if Web Share API is available.
+   */
+  canShare(): boolean {
+    return !!(navigator.share && navigator.canShare);
+  }
+
+  /**
+   * Check if Clipboard API is available for images.
+   */
+  canCopyToClipboard(): boolean {
+    return !!(navigator.clipboard && navigator.clipboard.write);
+  }
+
+  // === Private Helpers ===
+
+  private buildColorOptions(color?: QrColorConfig): any {
+    if (!color) {
+      return {};
+    }
+
+    if (typeof color === 'string') {
+      return { color };
+    }
+
+    // Gradient
+    const gradient = color as QrGradient;
+    return {
+      gradient: {
+        type: gradient.type,
+        rotation: gradient.rotation || 0,
+        colorStops: gradient.colorStops,
+      },
+    };
+  }
+
+  private getMimeType(format: string): string {
+    const mimeTypes: Record<string, string> = {
+      png: 'image/png',
+      jpeg: 'image/jpeg',
+      webp: 'image/webp',
+      svg: 'image/svg+xml',
+    };
+    return mimeTypes[format] || 'image/png';
+  }
+
+  private blobToDataUrl(blob: Blob): Promise<string> {
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.onloadend = () => resolve(reader.result as string);
+      reader.onerror = reject;
+      reader.readAsDataURL(blob);
+    });
+  }
+}