valtech-components 2.0.687 → 2.0.689

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

@@ -0,0 +1,223 @@
+import { Injectable, signal, computed } from '@angular/core';
+import {
+  I18nLang,
+  LanguagesContent,
+  ContentStore,
+  LANG_STORAGE_KEY,
+  DEFAULT_I18N_CONFIG,
+} from './types';
+
+/**
+ * Servicio de internacionalización basado en Angular Signals.
+ *
+ * Características:
+ * - Sin RxJS: usa Signals para evitar memory leaks y congelamiento
+ * - Namespace-based: organiza traducciones por contexto
+ * - Fallback multi-nivel: namespace → _global → placeholder
+ * - Interpolación: soporta {variable} en textos
+ *
+ * @example
+ * // En un componente
+ * i18n = inject(I18nService);
+ *
+ * // Obtener texto
+ * const title = this.i18n.t('title', 'Login');
+ *
+ * // Con interpolación
+ * const welcome = this.i18n.t('welcome', 'Login', { name: 'Juan' });
+ *
+ * // Cambiar idioma
+ * this.i18n.setLanguage('en');
+ */
+@Injectable({ providedIn: 'root' })
+export class I18nService {
+  // Estado interno con Signals
+  private readonly _lang = signal<I18nLang>(DEFAULT_I18N_CONFIG.defaultLanguage);
+  private readonly _content = signal<ContentStore>({});
+  private readonly _supportedLanguages = signal<I18nLang[]>(
+    DEFAULT_I18N_CONFIG.supportedLanguages
+  );
+
+  // Públicos readonly
+  readonly lang = this._lang.asReadonly();
+  readonly supportedLanguages = this._supportedLanguages.asReadonly();
+
+  // Computed para verificaciones rápidas
+  readonly isSpanish = computed(() => this._lang() === 'es');
+  readonly isEnglish = computed(() => this._lang() === 'en');
+
+  constructor() {
+    this.loadStoredLanguage();
+  }
+
+  /**
+   * Obtiene texto traducido (alias corto de getText)
+   *
+   * @param key Clave del texto
+   * @param namespace Namespace (default: '_global')
+   * @param data Variables para interpolación
+   * @returns Texto traducido o placeholder [namespace.key]
+   *
+   * @example
+   * i18n.t('submit');                    // busca en _global
+   * i18n.t('title', 'Login');            // busca en Login
+   * i18n.t('welcome', 'Login', {name});  // con interpolación
+   */
+  t(key: string, namespace?: string, data?: Record<string, string>): string {
+    return this.getText(key, namespace, data);
+  }
+
+  /**
+   * Obtiene texto traducido
+   *
+   * Fallback order:
+   * 1. content[namespace][lang][key]
+   * 2. content['_global'][lang][key]
+   * 3. "[namespace.key]" (placeholder)
+   */
+  getText(key: string, namespace?: string, data?: Record<string, string>): string {
+    const content = this._content();
+    const lang = this._lang();
+    const ns = namespace || '_global';
+
+    // Buscar en namespace específico
+    let text = content[ns]?.[lang]?.[key];
+
+    // Fallback a _global
+    if (!text && ns !== '_global') {
+      text = content['_global']?.[lang]?.[key];
+    }
+
+    // Fallback a placeholder
+    if (!text) {
+      console.warn(`[i18n] Missing translation: ${ns}.${key} (${lang})`);
+      return `[${ns}.${key}]`;
+    }
+
+    // Aplicar interpolación si hay data
+    if (data) {
+      return this.interpolate(text, data);
+    }
+
+    return text;
+  }
+
+  /**
+   * Cambia el idioma de la aplicación
+   *
+   * @param lang Nuevo idioma
+   * @param forceReload Si true, recarga la página (fallback si reactividad falla)
+   */
+  setLanguage(lang: I18nLang, forceReload = false): void {
+    if (!this._supportedLanguages().includes(lang)) {
+      console.warn(`[i18n] Language '${lang}' not in supported languages`);
+      return;
+    }
+
+    if (lang === this._lang()) {
+      return;
+    }
+
+    // Persistir en localStorage
+    localStorage.setItem(LANG_STORAGE_KEY, lang);
+
+    // Actualizar signal
+    this._lang.set(lang);
+
+    // Fallback: recargar si se solicita
+    if (forceReload) {
+      window.location.reload();
+    }
+  }
+
+  /**
+   * Registra contenido de traducciones para un namespace
+   *
+   * @param namespace Nombre del namespace
+   * @param content Contenido de traducciones
+   *
+   * @example
+   * i18n.registerContent('Login', {
+   *   es: { title: 'Iniciar sesión' },
+   *   en: { title: 'Sign in' }
+   * });
+   */
+  registerContent(namespace: string, content: LanguagesContent): void {
+    this._content.update((store) => ({
+      ...store,
+      [namespace]: content,
+    }));
+  }
+
+  /**
+   * Registra múltiples namespaces de una vez
+   *
+   * @param contentStore Objeto con namespaces como keys
+   */
+  registerContentBulk(contentStore: ContentStore): void {
+    this._content.update((store) => ({
+      ...store,
+      ...contentStore,
+    }));
+  }
+
+  /**
+   * Configura los idiomas soportados
+   */
+  setI18nLanguages(languages: I18nLang[]): void {
+    this._supportedLanguages.set(languages);
+  }
+
+  /**
+   * Obtiene todos los namespaces registrados
+   */
+  getNamespaces(): string[] {
+    return Object.keys(this._content());
+  }
+
+  /**
+   * Verifica si un namespace tiene traducciones
+   */
+  hasNamespace(namespace: string): boolean {
+    return namespace in this._content();
+  }
+
+  /**
+   * Carga idioma guardado en localStorage o detecta del navegador
+   */
+  private loadStoredLanguage(): void {
+    const stored = localStorage.getItem(LANG_STORAGE_KEY);
+
+    if (stored && this.isValidLanguage(stored)) {
+      this._lang.set(stored as I18nLang);
+      return;
+    }
+
+    // Detectar idioma del navegador
+    const browserLang = navigator.language.split('-')[0] as I18nLang;
+    if (this.isValidLanguage(browserLang)) {
+      this._lang.set(browserLang);
+      localStorage.setItem(LANG_STORAGE_KEY, browserLang);
+    }
+  }
+
+  /**
+   * Valida si un idioma está soportado
+   */
+  private isValidLanguage(lang: string): boolean {
+    return this._supportedLanguages().includes(lang as I18nLang);
+  }
+
+  /**
+   * Reemplaza {variable} en texto con valores de data
+   *
+   * @example
+   * interpolate('Hola {name}', { name: 'Juan' }) // 'Hola Juan'
+   */
+  private interpolate(text: string, data: Record<string, string>): string {
+    return Object.entries(data).reduce((result, [key, value]) => {
+      const regex = new RegExp(`\\{${key}\\}`, 'g');
+      return result.replace(regex, value);
+    }, text);
+  }
+}

package/src/lib/services/i18n/index.ts

@@ -0,0 +1,29 @@
+// Types
+export {
+  I18nLang,
+  LanguagesContent,
+  ContentStore,
+  I18nConfig,
+  LANG_STORAGE_KEY,
+} from './types';
+
+// Service
+export { I18nService } from './i18n.service';
+
+// Helper
+export {
+  InputI18nHelper,
+  InputMetadataWithI18n,
+  FormMetadataWithI18n,
+  FormSectionWithI18n,
+  ButtonMetadataWithI18n,
+} from './input-i18n.helper';
+
+// Pipe
+export { TranslatePipe } from './translate.pipe';
+
+// Config
+export { provideValtechI18n } from './config';
+
+// Default content
+export { VALTECH_DEFAULT_CONTENT } from './default-content';

package/src/lib/services/i18n/input-i18n.helper.ts

@@ -0,0 +1,141 @@
+import { Injectable, inject } from '@angular/core';
+import { I18nService } from './i18n.service';
+import {
+  InputMetadata,
+  FormMetadata,
+  FormSection,
+  ButtonMetadata,
+  ComponentState,
+} from '../../components/types';
+
+/**
+ * Helper para resolver traducciones i18n en InputMetadata y FormMetadata.
+ *
+ * @example
+ * ```typescript
+ * helper = inject(InputI18nHelper);
+ *
+ * // Resolver un input
+ * emailInput = this.helper.resolveInput({
+ *   ...baseEmailInput,
+ *   labelKey: 'email',
+ *   placeholderKey: 'emailPlaceholder',
+ *   errorKeys: { required: 'emailRequired', email: 'emailInvalid' },
+ *   i18nNamespace: '_auth',
+ * });
+ *
+ * // Resolver un form completo
+ * loginForm = this.helper.resolveForm(loginFormConfig);
+ * ```
+ */
+@Injectable({ providedIn: 'root' })
+export class InputI18nHelper {
+  private i18n = inject(I18nService);
+
+  /**
+   * Resuelve traducciones para un InputMetadata.
+   * Si hay keys de i18n, las resuelve; sino, usa los valores directos.
+   */
+  resolveInput(input: InputMetadataWithI18n): InputMetadata {
+    const namespace = input.i18nNamespace || '_global';
+
+    return {
+      ...input,
+      label: input.labelKey
+        ? this.i18n.t(input.labelKey, namespace)
+        : input.label || '',
+      placeholder: input.placeholderKey
+        ? this.i18n.t(input.placeholderKey, namespace)
+        : input.placeholder || '',
+      hint: input.hintKey ? this.i18n.t(input.hintKey, namespace) : input.hint || '',
+      errors: input.errorKeys
+        ? this.resolveErrors(input.errorKeys, namespace)
+        : input.errors || {},
+    } as InputMetadata;
+  }
+
+  /**
+   * Resuelve traducciones para un FormMetadata completo.
+   * Lee i18n.lang() para crear dependencia reactiva con computed().
+   */
+  resolveForm(form: FormMetadataWithI18n): FormMetadata {
+    // Leer el signal del idioma para crear dependencia reactiva
+    // Esto permite que computed() detecte cambios de idioma
+    this.i18n.lang();
+    const namespace = form.i18nNamespace || '_global';
+
+    return {
+      ...form,
+      name: form.nameKey ? this.i18n.t(form.nameKey, namespace) : form.name || '',
+      sections: form.sections.map((section) => ({
+        ...section,
+        name: section.nameKey
+          ? this.i18n.t(section.nameKey, namespace)
+          : section.name || '',
+        fields: section.fields.map((field) =>
+          this.resolveInput({ ...field, i18nNamespace: namespace })
+        ),
+      })) as FormSection[],
+      actions: this.resolveButton(form.actions, namespace),
+    };
+  }
+
+  /**
+   * Resuelve traducciones para un ButtonMetadata.
+   */
+  resolveButton(
+    button: ButtonMetadataWithI18n,
+    namespace?: string
+  ): ButtonMetadata {
+    const ns = namespace || button.i18nNamespace || '_global';
+
+    return {
+      ...button,
+      text: button.textKey ? this.i18n.t(button.textKey, ns) : button.text,
+    } as ButtonMetadata;
+  }
+
+  /**
+   * Resuelve un mapa de error keys a mensajes traducidos.
+   */
+  private resolveErrors(
+    errorKeys: Record<string, string>,
+    namespace: string
+  ): Record<string, string> {
+    const resolved: Record<string, string> = {};
+    for (const [validatorKey, i18nKey] of Object.entries(errorKeys)) {
+      resolved[validatorKey] = this.i18n.t(i18nKey, namespace);
+    }
+    return resolved;
+  }
+}
+
+// Tipos extendidos con soporte i18n
+export interface InputMetadataWithI18n extends Partial<InputMetadata> {
+  i18nNamespace?: string;
+  labelKey?: string;
+  placeholderKey?: string;
+  hintKey?: string;
+  errorKeys?: Record<string, string>;
+}
+
+export interface FormSectionWithI18n {
+  name?: string;
+  nameKey?: string;
+  order: number;
+  fields: InputMetadataWithI18n[];
+}
+
+export interface FormMetadataWithI18n {
+  name?: string;
+  nameKey?: string;
+  i18nNamespace?: string;
+  sections: FormSectionWithI18n[];
+  actions: ButtonMetadataWithI18n;
+  state: ComponentState;
+}
+
+export interface ButtonMetadataWithI18n extends Partial<ButtonMetadata> {
+  i18nNamespace?: string;
+  textKey?: string;
+}

package/src/lib/services/i18n/translate.pipe.ts

@@ -0,0 +1,43 @@
+import { Pipe, PipeTransform, inject } from '@angular/core';
+import { I18nService } from './i18n.service';
+
+/**
+ * Pipe de traducción para templates.
+ *
+ * NOTA: Es impure para detectar cambios de idioma.
+ * El costo es mínimo porque I18nService usa Signals internamente.
+ *
+ * @example
+ * <!-- Busca en _global -->
+ * {{ 'submit' | t }}
+ *
+ * <!-- Busca en namespace específico -->
+ * {{ 'title' | t:'Login' }}
+ *
+ * <!-- Con interpolación -->
+ * {{ 'welcome' | t:'Login':{ name: userName } }}
+ *
+ * <!-- En atributos -->
+ * <val-button [label]="'submit' | t"></val-button>
+ * <val-input [label]="'email' | t:'Login'"></val-input>
+ */
+@Pipe({
+  name: 't',
+  standalone: true,
+  pure: false, // Impure para detectar cambios de idioma
+})
+export class TranslatePipe implements PipeTransform {
+  private readonly i18n = inject(I18nService);
+
+  /**
+   * Transforma una key de traducción a su valor
+   *
+   * @param key Clave del texto
+   * @param namespace Namespace opcional (default: '_global')
+   * @param data Variables para interpolación opcional
+   * @returns Texto traducido
+   */
+  transform(key: string, namespace?: string, data?: Record<string, string>): string {
+    return this.i18n.t(key, namespace, data);
+  }
+}

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

@@ -0,0 +1,108 @@
+/**
+ * Idiomas soportados por el sistema i18n
+ */
+export type I18nLang = 'es' | 'en' | 'pt' | 'fr' | 'de';
+
+/**
+ * Contenido de traducciones para un namespace
+ *
+ * @example
+ * const loginContent: LanguagesContent = {
+ *   es: { title: 'Iniciar sesión', submit: 'Entrar' },
+ *   en: { title: 'Sign in', submit: 'Sign in' }
+ * };
+ */
+export type LanguagesContent = {
+  [lang in I18nLang]?: Record<string, string>;
+};
+
+/**
+ * Almacén de contenido por namespace
+ *
+ * @example
+ * {
+ *   '_global': { es: {...}, en: {...} },
+ *   'Login': { es: {...}, en: {...} },
+ *   'Profile': { es: {...}, en: {...} }
+ * }
+ */
+export type ContentStore = Record<string, LanguagesContent>;
+
+/**
+ * Configuración para provideValtechI18n()
+ */
+export interface I18nConfig {
+  /**
+   * Idioma por defecto si no hay preferencia guardada
+   * @default 'es'
+   */
+  defaultLanguage?: I18nLang;
+
+  /**
+   * Lista de idiomas habilitados en la app
+   * @default ['es', 'en']
+   */
+  supportedLanguages?: I18nLang[];
+
+  /**
+   * Detectar idioma del navegador al iniciar
+   * @default true
+   */
+  detectBrowserLanguage?: boolean;
+
+  /**
+   * Contenido inicial de traducciones por namespace.
+   * Si includeDefaultContent es true, este contenido se mergea
+   * con VALTECH_DEFAULT_CONTENT (las keys del usuario ganan).
+   */
+  content?: ContentStore;
+
+  /**
+   * Si es true, incluye traducciones por defecto de valtech-components.
+   * Las traducciones del usuario sobrescriben las por defecto.
+   *
+   * @default true
+   *
+   * @example Usar defaults (comportamiento por defecto)
+   * ```typescript
+   * provideValtechI18n() // Funciona sin configuración
+   * ```
+   *
+   * @example Sobrescribir keys específicas
+   * ```typescript
+   * provideValtechI18n({
+   *   content: {
+   *     _global: {
+   *       es: { success: '¡Lo hicimos!' },
+   *       en: { success: 'We did it!' },
+   *     },
+   *   },
+   * })
+   * ```
+   *
+   * @example Desactivar defaults completamente
+   * ```typescript
+   * provideValtechI18n({
+   *   includeDefaultContent: false,
+   *   content: MY_CUSTOM_CONTENT,
+   * })
+   * ```
+   */
+  includeDefaultContent?: boolean;
+}
+
+/**
+ * Valores por defecto de configuración
+ */
+export const DEFAULT_I18N_CONFIG: Required<I18nConfig> = {
+  defaultLanguage: 'es',
+  supportedLanguages: ['es', 'en'],
+  detectBrowserLanguage: true,
+  content: {},
+  includeDefaultContent: true,
+};
+
+/**
+ * Clave para persistir idioma en localStorage
+ */
+export const LANG_STORAGE_KEY = 'app_lang';

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

@@ -0,0 +1,122 @@
+/* eslint-disable no-underscore-dangle */
+
+/**
+ * Service for registering and managing custom Ionicons icons in the application.
+ * Automatically registers a set of commonly used icons on initialization.
+ */
+
+import { Injectable } from '@angular/core';
+import { addIcons } from 'ionicons';
+import {
+  addCircleOutline,
+  addOutline,
+  alertCircleOutline,
+  alertOutline,
+  arrowBackOutline,
+  arrowDownOutline,
+  arrowForwardOutline,
+  businessOutline,
+  calendarOutline,
+  chatbubblesOutline,
+  checkmarkCircleOutline,
+  checkmarkOutline,
+  chevronDownOutline,
+  chevronForwardOutline,
+  clipboardOutline,
+  closeOutline,
+  copyOutline,
+  createOutline,
+  documentTextOutline,
+  ellipsisHorizontalOutline,
+  eyeOffOutline,
+  eyeOutline,
+  filterOutline,
+  heart,
+  heartOutline,
+  home,
+  homeOutline,
+  informationCircleOutline,
+  locationOutline,
+  lockClosedOutline,
+  logoFacebook,
+  logoGoogle,
+  logoInstagram,
+  logoLinkedin,
+  logoNpm,
+  logoTiktok,
+  logoTwitter,
+  logoYoutube,
+  notifications,
+  notificationsOutline,
+  openOutline,
+  playOutline,
+  refreshOutline,
+  removeOutline,
+  scanOutline,
+  settings,
+  settingsOutline,
+  shareOutline,
+  trashOutline,
+} from 'ionicons/icons';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class IconService {
+  /**
+   * Registers a set of Ionicons icons for use throughout the app.
+   */
+  constructor() {
+    addIcons({
+      addOutline,
+      addCircleOutline,
+      alertOutline,
+      alertCircleOutline,
+      arrowBackOutline,
+      arrowForwardOutline,
+      arrowDownOutline,
+      settings,
+      settingsOutline,
+      checkmarkCircleOutline,
+      ellipsisHorizontalOutline,
+      notifications,
+      notificationsOutline,
+      openOutline,
+      closeOutline,
+      chatbubblesOutline,
+      shareOutline,
+      heart,
+      heartOutline,
+      home,
+      homeOutline,
+      eyeOffOutline,
+      eyeOutline,
+      scanOutline,
+      chevronDownOutline,
+      chevronForwardOutline,
+      checkmarkOutline,
+      clipboardOutline,
+      copyOutline,
+      filterOutline,
+      locationOutline,
+      calendarOutline,
+      businessOutline,
+      logoTwitter,
+      logoInstagram,
+      logoLinkedin,
+      logoYoutube,
+      logoTiktok,
+      logoFacebook,
+      logoGoogle,
+      createOutline,
+      trashOutline,
+      playOutline,
+      refreshOutline,
+      documentTextOutline,
+      lockClosedOutline,
+      informationCircleOutline,
+      logoNpm,
+      removeOutline,
+    });
+  }
+}