valtech-components 2.0.495 → 2.0.497

package/lib/services/i18n/config.d.ts

@@ -0,0 +1,29 @@
+import { EnvironmentProviders } from '@angular/core';
+import { I18nConfig } from './types';
+/**
+ * Configura el sistema de internacionalización de Valtech Components.
+ *
+ * @param config Configuración de i18n
+ * @returns Providers para agregar en app.config.ts
+ *
+ * @example
+ * // app.config.ts
+ * import { provideValtechI18n } from 'valtech-components';
+ * import { GLOBAL_CONTENT } from './i18n/_global';
+ * import { LOGIN_CONTENT } from './i18n/login.i18n';
+ *
+ * export const appConfig: ApplicationConfig = {
+ *   providers: [
+ *     provideValtechI18n({
+ *       defaultLanguage: 'es',
+ *       supportedLanguages: ['es', 'en'],
+ *       detectBrowserLanguage: true,
+ *       content: {
+ *         '_global': GLOBAL_CONTENT,
+ *         'Login': LOGIN_CONTENT,
+ *       }
+ *     }),
+ *   ]
+ * };
+ */
+export declare function provideValtechI18n(config?: I18nConfig): EnvironmentProviders;

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

@@ -0,0 +1,112 @@
+import { I18nLang, LanguagesContent, ContentStore } from './types';
+import * as i0 from "@angular/core";
+/**
+ * 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');
+ */
+export declare class I18nService {
+    private readonly _lang;
+    private readonly _content;
+    private readonly _supportedLanguages;
+    readonly lang: import("@angular/core").Signal<I18nLang>;
+    readonly supportedLanguages: import("@angular/core").Signal<I18nLang[]>;
+    readonly isSpanish: import("@angular/core").Signal<boolean>;
+    readonly isEnglish: import("@angular/core").Signal<boolean>;
+    constructor();
+    /**
+     * 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;
+    /**
+     * 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;
+    /**
+     * 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?: boolean): void;
+    /**
+     * 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;
+    /**
+     * Registra múltiples namespaces de una vez
+     *
+     * @param contentStore Objeto con namespaces como keys
+     */
+    registerContentBulk(contentStore: ContentStore): void;
+    /**
+     * Configura los idiomas soportados
+     */
+    setI18nLanguages(languages: I18nLang[]): void;
+    /**
+     * Obtiene todos los namespaces registrados
+     */
+    getNamespaces(): string[];
+    /**
+     * Verifica si un namespace tiene traducciones
+     */
+    hasNamespace(namespace: string): boolean;
+    /**
+     * Carga idioma guardado en localStorage o detecta del navegador
+     */
+    private loadStoredLanguage;
+    /**
+     * Valida si un idioma está soportado
+     */
+    private isValidLanguage;
+    /**
+     * Reemplaza {variable} en texto con valores de data
+     *
+     * @example
+     * interpolate('Hola {name}', { name: 'Juan' }) // 'Hola Juan'
+     */
+    private interpolate;
+    static ɵfac: i0.ɵɵFactoryDeclaration<I18nService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<I18nService>;
+}

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

@@ -0,0 +1,4 @@
+export { I18nLang, LanguagesContent, ContentStore, I18nConfig, LANG_STORAGE_KEY, } from './types';
+export { I18nService } from './i18n.service';
+export { TranslatePipe } from './translate.pipe';
+export { provideValtechI18n } from './config';

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

@@ -0,0 +1,36 @@
+import { PipeTransform } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * 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>
+ */
+export declare class TranslatePipe implements PipeTransform {
+    private readonly i18n;
+    /**
+     * 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;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TranslatePipe, never>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<TranslatePipe, "t", true>;
+}

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

@@ -0,0 +1,59 @@
+/**
+ * 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
+     */
+    content?: ContentStore;
+}
+/**
+ * Valores por defecto de configuración
+ */
+export declare const DEFAULT_I18N_CONFIG: Required<I18nConfig>;
+/**
+ * Clave para persistir idioma en localStorage
+ */
+export declare const LANG_STORAGE_KEY = "app_lang";

package/lib/services/presets/config.d.ts

@@ -0,0 +1,32 @@
+import { EnvironmentProviders } from '@angular/core';
+import { PresetConfig } from './types';
+/**
+ * Configura el sistema de presets de Valtech Components.
+ *
+ * @param presets Configuración de presets por componente
+ * @returns Providers para agregar en app.config.ts
+ *
+ * @example
+ * // app.config.ts
+ * import { provideValtechPresets } from 'valtech-components';
+ *
+ * export const appConfig: ApplicationConfig = {
+ *   providers: [
+ *     provideValtechPresets({
+ *       button: {
+ *         'primary-action': { size: 'large', color: 'primary', fill: 'solid' },
+ *         'secondary': { size: 'medium', color: 'secondary', fill: 'outline' },
+ *         'danger': { size: 'medium', color: 'danger', fill: 'solid' },
+ *       },
+ *       card: {
+ *         'feature': { variant: 'elevated', padding: 'large' },
+ *         'compact': { variant: 'flat', padding: 'small' },
+ *       },
+ *       input: {
+ *         'form-field': { size: 'medium', fill: 'outline', labelPosition: 'floating' },
+ *       }
+ *     }),
+ *   ]
+ * };
+ */
+export declare function provideValtechPresets(presets: PresetConfig): EnvironmentProviders;

package/lib/services/presets/index.d.ts

@@ -0,0 +1,3 @@
+export { PresetConfig, ComponentPresets, PresetsOptions } from './types';
+export { PresetService } from './preset.service';
+export { provideValtechPresets } from './config';

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

@@ -0,0 +1,69 @@
+import { PresetConfig, ComponentPresets } from './types';
+import * as i0 from "@angular/core";
+/**
+ * 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' }
+ */
+export declare class PresetService {
+    private readonly _presets;
+    /**
+     * 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>;
+    /**
+     * Verifica si existe un preset
+     */
+    has(component: string, presetName: string): boolean;
+    /**
+     * 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;
+    /**
+     * Agrega presets para un componente específico (merge con existentes)
+     */
+    registerComponentPresets(component: string, presets: ComponentPresets): void;
+    /**
+     * Obtiene todos los nombres de presets para un componente
+     */
+    getPresetNames(component: string): string[];
+    /**
+     * Obtiene todos los componentes con presets registrados
+     */
+    getRegisteredComponents(): string[];
+    static ɵfac: i0.ɵɵFactoryDeclaration<PresetService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<PresetService>;
+}

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

@@ -0,0 +1,39 @@
+/**
+ * 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "valtech-components",
-  "version": "2.0.495",
+  "version": "2.0.497",
   "private": false,
   "bin": {
     "valtech-firebase-config": "./src/lib/services/firebase/scripts/generate-sw-config.js"

package/public-api.d.ts

@@ -219,6 +219,8 @@ export * from './lib/services/modal/modal.service';
 export * from './lib/services/modal/types';
 export * from './lib/services/firebase';
 export * from './lib/services/auth';
+export * from './lib/services/i18n';
+export * from './lib/services/presets';
 export * from './lib/components/types';
 export * from './lib/shared/pipes/process-links.pipe';
 export * from './lib/shared/utils/dom';