valtech-components 2.0.691 → 2.0.692

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

@@ -1,223 +0,0 @@
-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

@@ -1,29 +0,0 @@
-// 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

@@ -1,141 +0,0 @@
-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

@@ -1,43 +0,0 @@
-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

@@ -1,108 +0,0 @@
-/**
- * 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

@@ -1,122 +0,0 @@
-/* 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,
-    });
-  }
-}