valtech-components 2.0.687 → 2.0.689

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);
+    });
+  }
+}

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

@@ -0,0 +1,207 @@
+/**
+ * Style options for QR code dots (data modules).
+ */
+export type QrDotsStyle = 'square' | 'dots' | 'rounded' | 'extra-rounded' | 'classy' | 'classy-rounded';
+
+/**
+ * Style options for QR code corner squares.
+ */
+export type QrCornersSquareStyle = 'square' | 'dot' | 'extra-rounded';
+
+/**
+ * Style options for QR code corner dots.
+ */
+export type QrCornersDotStyle = 'square' | 'dot';
+
+/**
+ * Output format for the generated QR code.
+ */
+export type QrOutputFormat = 'svg' | 'png' | 'jpeg' | 'webp';
+
+/**
+ * Error correction level for QR codes.
+ * Higher levels allow more damage tolerance but reduce data capacity.
+ */
+export type QrErrorCorrectionLevel = 'L' | 'M' | 'Q' | 'H';
+
+/**
+ * Logo/image configuration for the QR code center.
+ */
+export interface QrLogoConfig {
+  /** Image source URL or base64 */
+  src: string;
+  /** Logo width (default: 25% of QR size) */
+  width?: number;
+  /** Logo height (default: same as width) */
+  height?: number;
+  /** Margin around the logo */
+  margin?: number;
+  /** Border radius for rounded corners */
+  borderRadius?: number;
+  /** Whether to hide dots behind the logo */
+  hideBackgroundDots?: boolean;
+}
+
+/**
+ * Gradient configuration for QR elements.
+ */
+export interface QrGradient {
+  /** Gradient type */
+  type: 'linear' | 'radial';
+  /** Rotation angle in degrees (for linear) */
+  rotation?: number;
+  /** Color stops */
+  colorStops: Array<{
+    offset: number;
+    color: string;
+  }>;
+}
+
+/**
+ * Color configuration - can be solid color or gradient.
+ */
+export type QrColorConfig = string | QrGradient;
+
+/**
+ * Complete configuration for QR code generation.
+ */
+export interface QrConfig {
+  /** The data to encode (URL, text, etc.) */
+  data: string;
+
+  // === Size ===
+  /** QR code width in pixels (default: 300) */
+  width?: number;
+  /** QR code height in pixels (default: same as width) */
+  height?: number;
+  /** Quiet zone margin in modules (default: 0) */
+  margin?: number;
+
+  // === Colors ===
+  /** Color/gradient for data dots */
+  dotsColor?: QrColorConfig;
+  /** Background color (default: white) */
+  backgroundColor?: QrColorConfig;
+  /** Color for corner squares */
+  cornersSquareColor?: QrColorConfig;
+  /** Color for corner dots */
+  cornersDotColor?: QrColorConfig;
+
+  // === Styles ===
+  /** Style of data dots (default: 'square') */
+  dotsStyle?: QrDotsStyle;
+  /** Style of corner squares (default: 'square') */
+  cornersSquareStyle?: QrCornersSquareStyle;
+  /** Style of corner dots (default: 'square') */
+  cornersDotStyle?: QrCornersDotStyle;
+
+  // === Logo ===
+  /** Logo/image configuration */
+  logo?: QrLogoConfig;
+
+  // === Technical ===
+  /** Error correction level (default: 'M') */
+  errorCorrectionLevel?: QrErrorCorrectionLevel;
+
+  // === Output ===
+  /** Output format (default: 'png') */
+  format?: QrOutputFormat;
+  /** Quality for jpeg/webp (0-1, default: 1) */
+  quality?: number;
+}
+
+/**
+ * Result from QR code generation.
+ */
+export interface QrResult {
+  /** Original configuration used */
+  config: QrConfig;
+  /** Generated data as base64 data URL */
+  dataUrl: string;
+  /** Generated data as Blob */
+  blob: Blob;
+  /** SVG string (only when format is 'svg') */
+  svg?: string;
+  /** MIME type of the generated image */
+  mimeType: string;
+  /** File extension */
+  extension: string;
+  /** Timestamp of generation */
+  generatedAt: Date;
+}
+
+/**
+ * Options for downloading the QR code.
+ */
+export interface QrDownloadOptions {
+  /** Custom filename (without extension) */
+  filename?: string;
+  /** Override format for download */
+  format?: QrOutputFormat;
+}
+
+/**
+ * Options for sharing the QR code.
+ */
+export interface QrShareOptions {
+  /** Share title */
+  title?: string;
+  /** Share text/description */
+  text?: string;
+  /** Custom filename for the shared file */
+  filename?: string;
+}
+
+/**
+ * Preset configurations for common use cases.
+ */
+export interface QrPreset {
+  name: string;
+  config: Partial<QrConfig>;
+}
+
+/**
+ * Default presets for quick styling.
+ */
+export const QR_PRESETS: Record<string, Partial<QrConfig>> = {
+  default: {
+    width: 300,
+    dotsStyle: 'square',
+    dotsColor: '#000000',
+    backgroundColor: '#ffffff',
+    errorCorrectionLevel: 'M',
+  },
+  rounded: {
+    width: 300,
+    dotsStyle: 'rounded',
+    cornersSquareStyle: 'extra-rounded',
+    cornersDotStyle: 'dot',
+    dotsColor: '#000000',
+    backgroundColor: '#ffffff',
+  },
+  dots: {
+    width: 300,
+    dotsStyle: 'dots',
+    cornersSquareStyle: 'dot',
+    cornersDotStyle: 'dot',
+    dotsColor: '#000000',
+    backgroundColor: '#ffffff',
+  },
+  classy: {
+    width: 300,
+    dotsStyle: 'classy',
+    cornersSquareStyle: 'extra-rounded',
+    cornersDotStyle: 'dot',
+    dotsColor: '#000000',
+    backgroundColor: '#ffffff',
+  },
+  modern: {
+    width: 300,
+    dotsStyle: 'extra-rounded',
+    cornersSquareStyle: 'extra-rounded',
+    cornersDotStyle: 'dot',
+    dotsColor: '#1a1a1a',
+    backgroundColor: '#ffffff',
+    margin: 2,
+  },
+};

package/src/lib/services/skeleton/config.ts

@@ -0,0 +1,82 @@
+import { EnvironmentProviders, makeEnvironmentProviders, APP_INITIALIZER } from '@angular/core';
+import { SkeletonConfig, DEFAULT_SKELETON_CONFIG } from './types';
+import { SkeletonService } from './skeleton.service';
+
+// Import built-in templates
+import { ListSkeletonComponent } from './templates/list-skeleton.component';
+import { GridSkeletonComponent } from './templates/grid-skeleton.component';
+import { FormSkeletonComponent } from './templates/form-skeleton.component';
+import { ProfileSkeletonComponent } from './templates/profile-skeleton.component';
+import { TableSkeletonComponent } from './templates/table-skeleton.component';
+import { DetailSkeletonComponent } from './templates/detail-skeleton.component';
+
+/**
+ * Configura el sistema de skeletons para Valtech Components.
+ *
+ * @param config Configuracion de skeletons
+ * @returns Providers para app.config.ts
+ *
+ * @example
+ * // app.config.ts
+ * import { provideValtechSkeleton } from 'valtech-components';
+ *
+ * export const appConfig: ApplicationConfig = {
+ *   providers: [
+ *     provideValtechSkeleton({
+ *       animated: true,
+ *       defaultDelay: 100,
+ *       defaultMinTime: 500,
+ *       templates: [
+ *         { name: 'custom-card', component: MyCustomCardSkeleton }
+ *       ]
+ *     }),
+ *   ]
+ * };
+ *
+ * @example
+ * // Uso minimo - usa configuracion por defecto
+ * providers: [provideValtechSkeleton()]
+ */
+export function provideValtechSkeleton(config: SkeletonConfig = {}): EnvironmentProviders {
+  const mergedConfig = { ...DEFAULT_SKELETON_CONFIG, ...config };
+
+  return makeEnvironmentProviders([
+    {
+      provide: APP_INITIALIZER,
+      useFactory: (skeletonService: SkeletonService) => {
+        return () => {
+          // Configurar servicio
+          skeletonService.configure(mergedConfig);
+
+          // Registrar templates built-in
+          skeletonService.registerTemplate('list', ListSkeletonComponent, { count: 3 });
+          skeletonService.registerTemplate('list-avatar', ListSkeletonComponent, {
+            count: 3,
+            variant: 'avatar',
+          });
+          skeletonService.registerTemplate('grid', GridSkeletonComponent, { count: 4 });
+          skeletonService.registerTemplate('grid-cards', GridSkeletonComponent, {
+            count: 6,
+            variant: 'cards',
+          });
+          skeletonService.registerTemplate('form', FormSkeletonComponent, { count: 3 });
+          skeletonService.registerTemplate('form-compact', FormSkeletonComponent, {
+            count: 2,
+            variant: 'compact',
+          });
+          skeletonService.registerTemplate('profile', ProfileSkeletonComponent, {});
+          skeletonService.registerTemplate('profile-full', ProfileSkeletonComponent, {
+            variant: 'full',
+          });
+          skeletonService.registerTemplate('table', TableSkeletonComponent, {
+            columns: 4,
+            rows: 5,
+          });
+          skeletonService.registerTemplate('detail', DetailSkeletonComponent, { sections: 2 });
+        };
+      },
+      deps: [SkeletonService],
+      multi: true,
+    },
+  ]);
+}

package/src/lib/services/skeleton/directives/index.ts

@@ -0,0 +1 @@
+export { LoadingDirective } from './loading.directive';