valtech-components 2.0.687 → 2.0.689

package/src/lib/services/link-processor.service.ts

@@ -0,0 +1,311 @@
+import { Injectable } from '@angular/core';
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+
+export interface LinkProcessorConfig {
+  /** Whether to open external links in new tab (default: true) */
+  openExternalInNewTab?: boolean;
+  /** Whether to open internal links in new tab (default: false) */
+  openInternalInNewTab?: boolean;
+  /** Custom CSS classes for links */
+  linkClass?: string;
+  /** Custom CSS classes for external links */
+  externalLinkClass?: string;
+  /** Custom CSS classes for internal links */
+  internalLinkClass?: string;
+  /** Whether to process Markdown-style links [text](url) (default: true) */
+  processMarkdownLinks?: boolean;
+}
+
+/**
+ * LinkProcessorService - Service for processing text content to convert URLs and internal routes into clickable links.
+ *
+ * This service automatically detects external URLs (http/https), internal routes (starting with /),
+ * and Markdown-style links [text](url) and converts them into HTML anchor elements with appropriate attributes.
+ *
+ * @example Basic usage:
+ * ```typescript
+ * constructor(private linkProcessor: LinkProcessorService) {}
+ *
+ * processText() {
+ *   const text = 'Visit https://example.com, go to /profile, or [check docs](https://docs.example.com)';
+ *   const processed = this.linkProcessor.processLinks(text);
+ *   // Returns SafeHtml with clickable links
+ * }
+ * ```
+ */
+@Injectable({
+  providedIn: 'root',
+})
+export class LinkProcessorService {
+  // Regex para detectar URLs completas (http/https) - captura toda la URL y luego limpiamos puntuación
+  private readonly urlRegex = /(https?:\/\/[^\s]+)/g;
+
+  // Regex para detectar rutas internas - captura toda la ruta y luego limpiamos puntuación
+  private readonly internalRouteRegex = /(\s|^)(\/[^\s]*)/g;
+
+  // Regex para detectar enlaces estilo Markdown [texto](url)
+  private readonly markdownLinkRegex = /\[([^\]]+)\]\(([^)]+)\)/g;
+
+  constructor(private sanitizer: DomSanitizer) {}
+
+  /**
+   * Limpia la puntuación del final de una URL.
+   * Mantiene caracteres válidos de URL pero remueve signos de puntuación comunes al final.
+   * Preserva parámetros de consulta, fragmentos y caracteres válidos en URLs.
+   */
+  private cleanUrlPunctuation(url: string): string {
+    // Caracteres que consideramos puntuación al final de oración, pero NO parte de URLs
+    // No incluimos & o = que son parte de query params, ni # que es parte de fragmentos
+    const trailingPunctuation = /[.,;!?)]+$/;
+
+    // Casos especiales: si la URL termina con paréntesis pero no tiene paréntesis de apertura
+    // probablemente el paréntesis no es parte de la URL
+    const hasOpeningParen = url.includes('(');
+    const endsWithClosingParen = url.endsWith(')');
+
+    if (endsWithClosingParen && !hasOpeningParen) {
+      // Remover el paréntesis de cierre si no hay uno de apertura
+      url = url.replace(/\)$/, '');
+    }
+
+    return url.replace(trailingPunctuation, '');
+  }
+
+  /**
+   * Procesa texto para convertir enlaces en elementos <a> clickeables.
+   * Detecta automáticamente URLs externas, rutas internas y enlaces estilo Markdown.
+   *
+   * @param text - Texto a procesar
+   * @param config - Configuración del procesamiento
+   * @returns SafeHtml con enlaces procesados o string original
+   *
+   * @example
+   * ```typescript
+   * const result = this.linkProcessor.processLinks(
+   *   'Visit https://example.com, go to /profile, or [check docs](https://docs.example.com)',
+   *   {
+   *     openExternalInNewTab: true,
+   *     openInternalInNewTab: false,
+   *     processMarkdownLinks: true,
+   *     linkClass: 'custom-link'
+   *   }
+   * );
+   * ```
+   */
+  processLinks(text: string, config: LinkProcessorConfig = {}): SafeHtml | string {
+    if (!text) return '';
+
+    const {
+      openExternalInNewTab = true,
+      openInternalInNewTab = false,
+      linkClass = 'processed-link',
+      externalLinkClass = 'external-link',
+      internalLinkClass = 'internal-link',
+      processMarkdownLinks = true,
+    } = config;
+
+    let hasLinks = false;
+    let processedText = text;
+
+    // 1. Procesar enlaces estilo Markdown [texto](url) primero
+    if (processMarkdownLinks) {
+      // Usar exec en bucle (compatible con ES2018)
+      const markdownMatches: RegExpExecArray[] = [];
+      this.markdownLinkRegex.lastIndex = 0;
+      let mdMatch: RegExpExecArray | null;
+      while ((mdMatch = this.markdownLinkRegex.exec(processedText)) !== null) {
+        markdownMatches.push(mdMatch);
+      }
+
+      // Procesar de atrás hacia adelante para mantener las posiciones
+      for (let i = markdownMatches.length - 1; i >= 0; i--) {
+        const match = markdownMatches[i];
+        const [fullMatch, linkText, url] = match;
+        const startIndex = match.index!;
+        const endIndex = startIndex + fullMatch.length;
+
+        hasLinks = true;
+        const isExternal = /^https?:\/\//.test(url);
+        const target = (isExternal ? openExternalInNewTab : openInternalInNewTab)
+          ? isExternal
+            ? ' target="_blank" rel="noopener noreferrer"'
+            : ' target="_blank"'
+          : '';
+        const typeClass = isExternal ? externalLinkClass : internalLinkClass;
+        const classes = `${linkClass} ${typeClass}`.trim();
+        const linkHtml = `<a href="${url}"${target} class="${classes}">${linkText}</a>`;
+
+        processedText =
+          processedText.substring(0, startIndex) + linkHtml + processedText.substring(endIndex);
+      }
+    }
+
+    // 2. Procesar URLs externas directas
+    // Usar exec en bucle (compatible con ES2018)
+    const urlMatches: RegExpExecArray[] = [];
+    this.urlRegex.lastIndex = 0;
+    let urlMatch: RegExpExecArray | null;
+    while ((urlMatch = this.urlRegex.exec(processedText)) !== null) {
+      urlMatches.push(urlMatch);
+    }
+
+    // Procesar de atrás hacia adelante para mantener las posiciones
+    for (let i = urlMatches.length - 1; i >= 0; i--) {
+      const match = urlMatches[i];
+      const [fullMatch, url] = match;
+      const startIndex = match.index!;
+      const endIndex = startIndex + fullMatch.length;
+
+      // Verificar que no esté ya dentro de un enlace HTML existente
+      const textBefore = processedText.substring(0, startIndex);
+      const lastOpenTag = textBefore.lastIndexOf('<a ');
+      const lastCloseTag = textBefore.lastIndexOf('</a>');
+
+      // Si hay un tag <a abierto sin cerrar, no procesamos
+      if (lastOpenTag > lastCloseTag) {
+        continue;
+      }
+
+      // Limpiar puntuación del final de la URL
+      const cleanUrl = this.cleanUrlPunctuation(url);
+      const punctuationRemoved = url !== cleanUrl;
+      const punctuation = punctuationRemoved ? url.substring(cleanUrl.length) : '';
+
+      hasLinks = true;
+      const target = openExternalInNewTab ? ' target="_blank" rel="noopener noreferrer"' : '';
+      const classes = `${linkClass} ${externalLinkClass}`.trim();
+      const linkHtml = `<a href="${cleanUrl}"${target} class="${classes}">${cleanUrl}</a>`;
+
+      // Reemplazar el URL original con el enlace + puntuación si existía
+      const replacement = punctuationRemoved ? linkHtml + punctuation : linkHtml;
+      processedText =
+        processedText.substring(0, startIndex) + replacement + processedText.substring(endIndex);
+    }
+
+    // 3. Procesar rutas internas
+    // Usar exec en bucle (compatible con ES2018)
+    const internalMatches: RegExpExecArray[] = [];
+    this.internalRouteRegex.lastIndex = 0;
+    let internalMatch: RegExpExecArray | null;
+    while ((internalMatch = this.internalRouteRegex.exec(processedText)) !== null) {
+      internalMatches.push(internalMatch);
+    }
+
+    // Procesar de atrás hacia adelante para mantener las posiciones
+    for (let i = internalMatches.length - 1; i >= 0; i--) {
+      const match = internalMatches[i];
+      const [fullMatch, prefix, route] = match;
+      const startIndex = match.index!;
+      const endIndex = startIndex + fullMatch.length;
+
+      // Verificar que no esté ya dentro de un enlace HTML existente
+      const textBefore = processedText.substring(0, startIndex);
+      const lastOpenTag = textBefore.lastIndexOf('<a ');
+      const lastCloseTag = textBefore.lastIndexOf('</a>');
+
+      // Si hay un tag <a abierto sin cerrar, no procesamos
+      if (lastOpenTag > lastCloseTag) {
+        continue;
+      }
+
+      hasLinks = true;
+      const target = openInternalInNewTab ? ' target="_blank"' : '';
+      const classes = `${linkClass} ${internalLinkClass}`.trim();
+      const linkHtml = `<a href="${route}"${target} class="${classes}">${route}</a>`;
+
+      const replacement = `${prefix}${linkHtml}`;
+      processedText =
+        processedText.substring(0, startIndex) + replacement + processedText.substring(endIndex);
+    }
+
+    // Si hay enlaces, sanitizar el HTML
+    if (hasLinks) {
+      return this.sanitizer.bypassSecurityTrustHtml(processedText);
+    }
+
+    return text;
+  }
+
+  /**
+   * Detecta si un texto contiene enlaces (URLs, rutas internas o enlaces Markdown).
+   *
+   * @param text - Texto a analizar
+   * @returns true si contiene enlaces
+   *
+   * @example
+   * ```typescript
+   * const hasLinks = this.linkProcessor.hasLinks('Visit https://example.com or [docs](https://docs.com)');
+   * // Returns: true
+   * ```
+   */
+  hasLinks(text: string): boolean {
+    if (!text) return false;
+
+    // Reset regex indices
+    this.urlRegex.lastIndex = 0;
+    this.internalRouteRegex.lastIndex = 0;
+    this.markdownLinkRegex.lastIndex = 0;
+
+    return (
+      this.urlRegex.test(text) ||
+      this.internalRouteRegex.test(text) ||
+      this.markdownLinkRegex.test(text)
+    );
+  }
+
+  /**
+   * Extrae todos los enlaces de un texto.
+   *
+   * @param text - Texto a analizar
+   * @returns Array de enlaces encontrados con su tipo y texto (si es Markdown)
+   *
+   * @example
+   * ```typescript
+   * const links = this.linkProcessor.extractLinks('Visit https://example.com, /profile, or [docs](https://docs.com)');
+   * // Returns: [
+   * //   { url: 'https://example.com', type: 'external', text: 'https://example.com' },
+   * //   { url: '/profile', type: 'internal', text: '/profile' },
+   * //   { url: 'https://docs.com', type: 'external', text: 'docs' }
+   * // ]
+   * ```
+   */
+  extractLinks(text: string): Array<{ url: string; type: 'external' | 'internal'; text: string }> {
+    if (!text) return [];
+
+    const links: Array<{ url: string; type: 'external' | 'internal'; text: string }> = [];
+
+    // Reset regex indices
+    this.urlRegex.lastIndex = 0;
+    this.internalRouteRegex.lastIndex = 0;
+    this.markdownLinkRegex.lastIndex = 0;
+
+    // Extraer enlaces Markdown primero
+    let match;
+    while ((match = this.markdownLinkRegex.exec(text)) !== null) {
+      const url = match[2];
+      const linkText = match[1];
+      const type = /^https?:\/\//.test(url) ? 'external' : 'internal';
+      links.push({ url, type, text: linkText });
+    }
+
+    // Extraer URLs externas directas
+    while ((match = this.urlRegex.exec(text)) !== null) {
+      const url = match[1];
+      // Verificar que no esté ya capturado como Markdown link
+      if (!links.some(link => link.url === url)) {
+        links.push({ url, type: 'external', text: url });
+      }
+    }
+
+    // Extraer rutas internas directas
+    while ((match = this.internalRouteRegex.exec(text)) !== null) {
+      const url = match[2];
+      // Verificar que no esté ya capturado como Markdown link
+      if (!links.some(link => link.url === url)) {
+        links.push({ url, type: 'internal', text: url });
+      }
+    }
+
+    return links;
+  }
+}

package/src/lib/services/local-storage.service.ts

@@ -0,0 +1,39 @@
+/**
+ * Utility service for interacting with browser localStorage in a type-safe way.
+ * Provides static methods for setting, getting, removing, and clearing items.
+ */
+export class LocalStorageService {
+  /**
+   * Stores a value in localStorage under the given reference key.
+   * @param reference The key to store the value under
+   * @param value The value to store
+   */
+  static set<T>(reference: string, value: T): void {
+    localStorage.setItem(reference, JSON.stringify(value));
+  }
+
+  /**
+   * Retrieves a value from localStorage by key.
+   * @param reference The key to retrieve
+   * @returns The parsed value
+   */
+  static get<T>(reference: string): T {
+    const value = localStorage.getItem(reference);
+    return JSON.parse(value) as T;
+  }
+
+  /**
+   * Removes an item from localStorage by key.
+   * @param reference The key to remove
+   */
+  static remove(reference: string): void {
+    localStorage.removeItem(reference);
+  }
+
+  /**
+   * Clears all items from localStorage.
+   */
+  static clear() {
+    localStorage.clear();
+  }
+}

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

@@ -0,0 +1,86 @@
+import { Injectable } from '@angular/core';
+
+/**
+ * Tipos de idioma soportados
+ */
+export type SupportedLang = 'es' | 'en';
+
+/**
+ * Clave para persistir el idioma en localStorage
+ */
+const LANG_STORAGE_KEY = 'app_lang';
+
+/**
+ * Idioma por defecto
+ */
+const DEFAULT_LANG: SupportedLang = 'es';
+
+/**
+ * Servicio mínimo de localización.
+ *
+ * - Lee el idioma desde localStorage al iniciar
+ * - Proporciona método para cambiar idioma (recarga la página)
+ * - Sin observables ni subscripciones
+ *
+ * @example
+ * // En un componente
+ * locale = inject(LocaleService);
+ *
+ * // Obtener idioma actual
+ * console.log(this.locale.lang); // 'es' o 'en'
+ *
+ * // Cambiar idioma (recarga la página)
+ * this.locale.setLang('en');
+ */
+@Injectable({ providedIn: 'root' })
+export class LocaleService {
+  /**
+   * Idioma actual de la aplicación.
+   * Se lee una vez al iniciar desde localStorage.
+   */
+  readonly lang: SupportedLang;
+
+  constructor() {
+    this.lang = this.getStoredLang();
+  }
+
+  /**
+   * Cambia el idioma de la aplicación.
+   * Guarda en localStorage y recarga la página para aplicar el cambio.
+   *
+   * @param lang Nuevo idioma ('es' o 'en')
+   */
+  setLang(lang: SupportedLang): void {
+    if (lang === this.lang) {
+      return;
+    }
+    localStorage.setItem(LANG_STORAGE_KEY, lang);
+    window.location.reload();
+  }
+
+  /**
+   * Obtiene el idioma almacenado en localStorage.
+   * Si no existe o no es válido, retorna el idioma por defecto.
+   */
+  private getStoredLang(): SupportedLang {
+    const stored = localStorage.getItem(LANG_STORAGE_KEY);
+    if (stored === 'es' || stored === 'en') {
+      return stored;
+    }
+    return DEFAULT_LANG;
+  }
+
+  /**
+   * Verifica si el idioma actual es español
+   */
+  get isSpanish(): boolean {
+    return this.lang === 'es';
+  }
+
+  /**
+   * Verifica si el idioma actual es inglés
+   */
+  get isEnglish(): boolean {
+    return this.lang === 'en';
+  }
+}

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

@@ -0,0 +1,64 @@
+import { Injectable, inject } from '@angular/core';
+import { Meta, Title } from '@angular/platform-browser';
+import { PageMetadata, MetaConfig } from './types';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class MetaService {
+  private meta = inject(Meta);
+  private titleService = inject(Title);
+
+  private baseUrl = '';
+  private defaultImage = '/assets/images/main-icon.png';
+  private siteName = '';
+
+  /**
+   * Configurar el servicio con valores de la app
+   */
+  configure(config: MetaConfig): void {
+    this.baseUrl = config.baseUrl;
+    this.siteName = config.siteName;
+    if (config.defaultImage) {
+      this.defaultImage = config.defaultImage;
+    }
+  }
+
+  /**
+   * Actualizar meta tags de la página
+   */
+  updatePageMeta(metadata: PageMetadata, path?: string): void {
+    const fullTitle = `${metadata.title} | ${this.siteName}`;
+    const url = path ? `${this.baseUrl}${path}` : this.baseUrl;
+    const ogImage = metadata.ogImage || this.defaultImage;
+    const fullImageUrl = ogImage.startsWith('http') ? ogImage : `${this.baseUrl}${ogImage}`;
+
+    // Title
+    this.titleService.setTitle(fullTitle);
+
+    // Basic meta tags
+    this.meta.updateTag({ name: 'description', content: metadata.description });
+    if (metadata.keywords) {
+      this.meta.updateTag({ name: 'keywords', content: metadata.keywords });
+    }
+
+    // Open Graph
+    this.meta.updateTag({ property: 'og:title', content: fullTitle });
+    this.meta.updateTag({ property: 'og:description', content: metadata.description });
+    this.meta.updateTag({ property: 'og:url', content: url });
+    this.meta.updateTag({ property: 'og:image', content: fullImageUrl });
+    this.meta.updateTag({ property: 'og:type', content: metadata.type || 'website' });
+
+    // Twitter Card
+    this.meta.updateTag({ name: 'twitter:title', content: fullTitle });
+    this.meta.updateTag({ name: 'twitter:description', content: metadata.description });
+    this.meta.updateTag({ name: 'twitter:image', content: fullImageUrl });
+  }
+
+  /**
+   * Resetear a valores por defecto
+   */
+  resetToDefault(metadata: PageMetadata): void {
+    this.updatePageMeta(metadata);
+  }
+}

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

@@ -0,0 +1,13 @@
+export interface PageMetadata {
+  title: string;
+  description: string;
+  keywords?: string;
+  ogImage?: string;
+  type?: 'website' | 'article';
+}
+
+export interface MetaConfig {
+  baseUrl: string;
+  siteName: string;
+  defaultImage?: string;
+}