valtech-components 2.0.496 → 2.0.498

package/fesm2022/valtech-components.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, Input, Output, Injectable, HostListener, inject, Pipe, ChangeDetectionStrategy, ViewChild, ChangeDetectorRef, ElementRef, signal, computed, InjectionToken, makeEnvironmentProviders, Inject, PLATFORM_ID, APP_INITIALIZER, Optional, runInInjectionContext, effect } from '@angular/core';
+import { EventEmitter, Component, Input, Output, Injectable, HostListener, inject, Pipe, ChangeDetectionStrategy, ViewChild, signal, computed, makeEnvironmentProviders, APP_INITIALIZER, ChangeDetectorRef, ElementRef, InjectionToken, Inject, PLATFORM_ID, Optional, runInInjectionContext, effect } from '@angular/core';
 import * as i2$1 from '@ionic/angular/standalone';
 import { IonAvatar, IonCard, IonIcon, IonButton, IonSpinner, IonText, IonModal, IonHeader, IonToolbar, IonContent, IonButtons, IonTitle, IonProgressBar, IonSkeletonText, IonFab, IonFabButton, IonFabList, IonLabel, IonCardContent, IonCardHeader, IonCardTitle, IonCardSubtitle, IonCheckbox, IonTextarea, IonDatetime, IonDatetimeButton, IonInput, IonSelect, IonSelectOption, IonRadioGroup, IonRadio, IonRange, IonSearchbar, IonSegment, IonSegmentButton, IonToggle, IonAccordion, IonAccordionGroup, IonItem, IonTabBar, IonTabButton, IonBadge, IonBreadcrumb, IonBreadcrumbs, IonChip, IonPopover, IonList, IonNote, ToastController as ToastController$1, IonCol, IonRow, IonMenuButton, IonFooter, IonListHeader, IonInfiniteScroll, IonInfiniteScrollContent, IonGrid, MenuController, IonMenu, IonMenuToggle, AlertController } from '@ionic/angular/standalone';
 import * as i1 from '@angular/common';
@@ -5112,78 +5112,308 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             }] } });
 
 /**
- * Clave para persistir el idioma en localStorage
+ * Valores por defecto de configuración
  */
-const LANG_STORAGE_KEY = 'app_lang';
+const DEFAULT_I18N_CONFIG = {
+    defaultLanguage: 'es',
+    supportedLanguages: ['es', 'en'],
+    detectBrowserLanguage: true,
+    content: {},
+};
 /**
- * Idioma por defecto
+ * Clave para persistir idioma en localStorage
  */
-const DEFAULT_LANG = 'es';
+const LANG_STORAGE_KEY$1 = 'app_lang';
+
 /**
- * Servicio mínimo de localización.
+ * Servicio de internacionalización basado en Angular Signals.
  *
- * - Lee el idioma desde localStorage al iniciar
- * - Proporciona método para cambiar idioma (recarga la página)
- * - Sin observables ni subscripciones
+ * 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
- * locale = inject(LocaleService);
+ * i18n = inject(I18nService);
  *
- * // Obtener idioma actual
- * console.log(this.locale.lang); // 'es' o 'en'
+ * // Obtener texto
+ * const title = this.i18n.t('title', 'Login');
  *
- * // Cambiar idioma (recarga la página)
- * this.locale.setLang('en');
+ * // Con interpolación
+ * const welcome = this.i18n.t('welcome', 'Login', { name: 'Juan' });
+ *
+ * // Cambiar idioma
+ * this.i18n.setLanguage('en');
  */
-class LocaleService {
+class I18nService {
     constructor() {
-        this.lang = this.getStoredLang();
+        // Estado interno con Signals
+        this._lang = signal(DEFAULT_I18N_CONFIG.defaultLanguage);
+        this._content = signal({});
+        this._supportedLanguages = signal(DEFAULT_I18N_CONFIG.supportedLanguages);
+        // Públicos readonly
+        this.lang = this._lang.asReadonly();
+        this.supportedLanguages = this._supportedLanguages.asReadonly();
+        // Computed para verificaciones rápidas
+        this.isSpanish = computed(() => this._lang() === 'es');
+        this.isEnglish = computed(() => this._lang() === 'en');
+        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, namespace, data) {
+        return this.getText(key, namespace, data);
     }
     /**
-     * Cambia el idioma de la aplicación.
-     * Guarda en localStorage y recarga la página para aplicar el cambio.
+     * Obtiene texto traducido
      *
-     * @param lang Nuevo idioma ('es' o 'en')
+     * Fallback order:
+     * 1. content[namespace][lang][key]
+     * 2. content['_global'][lang][key]
+     * 3. "[namespace.key]" (placeholder)
+     */
+    getText(key, namespace, data) {
+        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)
      */
-    setLang(lang) {
-        if (lang === this.lang) {
+    setLanguage(lang, forceReload = false) {
+        if (!this._supportedLanguages().includes(lang)) {
+            console.warn(`[i18n] Language '${lang}' not in supported languages`);
             return;
         }
-        localStorage.setItem(LANG_STORAGE_KEY, lang);
-        window.location.reload();
+        if (lang === this._lang()) {
+            return;
+        }
+        // Persistir en localStorage
+        localStorage.setItem(LANG_STORAGE_KEY$1, lang);
+        // Actualizar signal
+        this._lang.set(lang);
+        // Fallback: recargar si se solicita
+        if (forceReload) {
+            window.location.reload();
+        }
     }
     /**
-     * Obtiene el idioma almacenado en localStorage.
-     * Si no existe o no es válido, retorna el idioma por defecto.
+     * 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' }
+     * });
      */
-    getStoredLang() {
-        const stored = localStorage.getItem(LANG_STORAGE_KEY);
-        if (stored === 'es' || stored === 'en') {
-            return stored;
+    registerContent(namespace, content) {
+        this._content.update((store) => ({
+            ...store,
+            [namespace]: content,
+        }));
+    }
+    /**
+     * Registra múltiples namespaces de una vez
+     *
+     * @param contentStore Objeto con namespaces como keys
+     */
+    registerContentBulk(contentStore) {
+        this._content.update((store) => ({
+            ...store,
+            ...contentStore,
+        }));
+    }
+    /**
+     * Configura los idiomas soportados
+     */
+    setI18nLanguages(languages) {
+        this._supportedLanguages.set(languages);
+    }
+    /**
+     * Obtiene todos los namespaces registrados
+     */
+    getNamespaces() {
+        return Object.keys(this._content());
+    }
+    /**
+     * Verifica si un namespace tiene traducciones
+     */
+    hasNamespace(namespace) {
+        return namespace in this._content();
+    }
+    /**
+     * Carga idioma guardado en localStorage o detecta del navegador
+     */
+    loadStoredLanguage() {
+        const stored = localStorage.getItem(LANG_STORAGE_KEY$1);
+        if (stored && this.isValidLanguage(stored)) {
+            this._lang.set(stored);
+            return;
+        }
+        // Detectar idioma del navegador
+        const browserLang = navigator.language.split('-')[0];
+        if (this.isValidLanguage(browserLang)) {
+            this._lang.set(browserLang);
+            localStorage.setItem(LANG_STORAGE_KEY$1, browserLang);
         }
-        return DEFAULT_LANG;
     }
     /**
-     * Verifica si el idioma actual es español
+     * Valida si un idioma está soportado
      */
-    get isSpanish() {
-        return this.lang === 'es';
+    isValidLanguage(lang) {
+        return this._supportedLanguages().includes(lang);
     }
     /**
-     * Verifica si el idioma actual es inglés
+     * Reemplaza {variable} en texto con valores de data
+     *
+     * @example
+     * interpolate('Hola {name}', { name: 'Juan' }) // 'Hola Juan'
      */
-    get isEnglish() {
-        return this.lang === 'en';
+    interpolate(text, data) {
+        return Object.entries(data).reduce((result, [key, value]) => {
+            const regex = new RegExp(`\\{${key}\\}`, 'g');
+            return result.replace(regex, value);
+        }, text);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LocaleService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LocaleService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: I18nService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: I18nService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LocaleService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: I18nService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
 
+/**
+ * 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>
+ */
+class TranslatePipe {
+    constructor() {
+        this.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, namespace, data) {
+        return this.i18n.t(key, namespace, data);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TranslatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: TranslatePipe, isStandalone: true, name: "t", pure: false }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TranslatePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 't',
+                    standalone: true,
+                    pure: false, // Impure para detectar cambios de idioma
+                }]
+        }] });
+
+/**
+ * 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,
+ *       }
+ *     }),
+ *   ]
+ * };
+ */
+function provideValtechI18n(config = {}) {
+    const mergedConfig = { ...DEFAULT_I18N_CONFIG, ...config };
+    return makeEnvironmentProviders([
+        {
+            provide: APP_INITIALIZER,
+            useFactory: (i18n) => {
+                return () => {
+                    // Configurar idiomas soportados
+                    i18n.setI18nLanguages(mergedConfig.supportedLanguages);
+                    // Registrar contenido inicial
+                    if (mergedConfig.content && Object.keys(mergedConfig.content).length > 0) {
+                        i18n.registerContentBulk(mergedConfig.content);
+                    }
+                };
+            },
+            deps: [I18nService],
+            multi: true,
+        },
+    ]);
+}
+
+// Types
+
 /**
  * val-popover-selector
  *
@@ -5366,8 +5596,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
 /**
  * val-language-selector
  *
- * A language selector component that uses LocaleService.
- * When the language changes, the page will reload.
+ * A language selector component that uses I18nService.
+ * By default, language changes are reactive (no page reload).
+ * Set forceReload: true in props to reload on change.
  *
  * @example
  * <val-language-selector
@@ -5375,7 +5606,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  * </val-language-selector>
  *
  * @input props: LanguageSelectorMetadata - Configuration for the language selector
- * @output languageChange: EventEmitter<string> - Emitted when language changes (before reload)
+ * @output languageChange: EventEmitter<string> - Emitted when language changes
  */
 class LanguageSelectorComponent {
     constructor() {
@@ -5386,31 +5617,35 @@ class LanguageSelectorComponent {
         /**
          * Event emitted when the language selection changes.
          * Emits the selected language code.
-         * Note: Page will reload after this event.
          */
         this.languageChange = new EventEmitter();
-        this.localeService = inject(LocaleService);
+        this.i18n = inject(I18nService);
         /** Default language display names */
         this.defaultLanguageNames = {
             es: 'Español',
             en: 'English',
+            pt: 'Português',
+            fr: 'Français',
+            de: 'Deutsch',
         };
         /** Default flag icons for languages */
         this.defaultLanguageFlags = {
             es: '🇪🇸',
             en: '🇺🇸',
+            pt: '🇧🇷',
+            fr: '🇫🇷',
+            de: '🇩🇪',
         };
-        /** Available languages */
-        this.availableLanguages = ['es', 'en'];
         addIcons({ language });
     }
     ngOnInit() {
         this.initializePopoverProps();
     }
     initializePopoverProps() {
-        const currentLanguage = this.localeService.lang;
+        const currentLanguage = this.i18n.lang();
+        const availableLanguages = this.props.availableLanguages || this.i18n.supportedLanguages();
         // Convert language codes to popover options
-        const options = this.availableLanguages.map(lang => ({
+        const options = availableLanguages.map(lang => ({
             value: lang,
             label: this.getLanguageDisplayName(lang),
         }));
@@ -5453,10 +5688,14 @@ class LanguageSelectorComponent {
     onLanguageChange(selectedLanguage) {
         if (typeof selectedLanguage === 'string') {
             const newLang = selectedLanguage;
-            // Emit the change event before reload
+            // Emit the change event
             this.languageChange.emit(selectedLanguage);
-            // Set the new language (this will reload the page)
-            this.localeService.setLang(newLang);
+            // Set the new language (reactive by default, reload if forceReload is true)
+            this.i18n.setLanguage(newLang, this.props.forceReload);
+            // Update popover selected value for reactive UI
+            if (this.popoverProps) {
+                this.popoverProps = { ...this.popoverProps, selectedValue: newLang };
+            }
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LanguageSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
@@ -20564,6 +20803,79 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Output
             }] } });
 
+/**
+ * Clave para persistir el idioma en localStorage
+ */
+const LANG_STORAGE_KEY = 'app_lang';
+/**
+ * Idioma por defecto
+ */
+const DEFAULT_LANG = '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');
+ */
+class LocaleService {
+    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) {
+        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.
+     */
+    getStoredLang() {
+        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() {
+        return this.lang === 'es';
+    }
+    /**
+     * Verifica si el idioma actual es inglés
+     */
+    get isEnglish() {
+        return this.lang === 'en';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LocaleService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LocaleService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LocaleService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
 /**
  * Service for displaying toast notifications using Ionic's ToastController.
  * Provides methods to show and present toasts with custom options.
@@ -24966,7 +25278,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  * ```
  */
 class AuthService {
-    constructor(config, http, router, stateService, tokenService, storageService, syncService, firebaseService, messagingService) {
+    constructor(config, http, router, stateService, tokenService, storageService, syncService, firebaseService, messagingService, i18nService) {
         this.config = config;
         this.http = http;
         this.router = router;
@@ -24976,6 +25288,7 @@ class AuthService {
         this.syncService = syncService;
         this.firebaseService = firebaseService;
         this.messagingService = messagingService;
+        this.i18nService = i18nService;
         // Timer para refresh proactivo
         this.refreshTimerId = null;
         this.syncSubscription = null;
@@ -25426,6 +25739,15 @@ class AuthService {
         if (this.config.enableDeviceRegistration) {
             this.registerDeviceIfNeeded(); // fire-and-forget
         }
+        // Sincronizar idioma del usuario con i18n
+        if (this.i18nService && 'language' in response && response.language) {
+            const userLang = response.language;
+            const currentLang = this.i18nService.lang();
+            if (userLang !== currentLang) {
+                this.i18nService.setLanguage(userLang);
+                console.log(`[ValtechAuth] Language synced to: ${userLang}`);
+            }
+        }
     }
     clearState() {
         this.stopRefreshTimer();
@@ -25771,7 +26093,7 @@ class AuthService {
         }
         return { platform: 'web', browser, os };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AuthService, deps: [{ token: VALTECH_AUTH_CONFIG }, { token: i1$8.HttpClient }, { token: i1$1.Router }, { token: AuthStateService }, { token: TokenService }, { token: AuthStorageService }, { token: AuthSyncService }, { token: FirebaseService }, { token: MessagingService, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AuthService, deps: [{ token: VALTECH_AUTH_CONFIG }, { token: i1$8.HttpClient }, { token: i1$1.Router }, { token: AuthStateService }, { token: TokenService }, { token: AuthStorageService }, { token: AuthSyncService }, { token: FirebaseService }, { token: MessagingService, optional: true }, { token: I18nService, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AuthService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AuthService, decorators: [{
@@ -25782,6 +26104,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     args: [VALTECH_AUTH_CONFIG]
                 }] }, { type: i1$8.HttpClient }, { type: i1$1.Router }, { type: AuthStateService }, { type: TokenService }, { type: AuthStorageService }, { type: AuthSyncService }, { type: FirebaseService }, { type: MessagingService, decorators: [{
                     type: Optional
+                }] }, { type: I18nService, decorators: [{
+                    type: Optional
                 }] }] });
 
 /**
@@ -26473,6 +26797,154 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  */
 // Tipos
 
+/**
+ * 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' }
+ */
+class PresetService {
+    constructor() {
+        this._presets = signal({});
+    }
+    /**
+     * 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(component, presetName) {
+        const componentPresets = this._presets()[component];
+        if (!componentPresets) {
+            console.warn(`[presets] No presets registered for component: ${component}`);
+            return {};
+        }
+        const preset = componentPresets[presetName];
+        if (!preset) {
+            console.warn(`[presets] Preset '${presetName}' not found for component: ${component}`);
+            return {};
+        }
+        return preset;
+    }
+    /**
+     * Verifica si existe un preset
+     */
+    has(component, presetName) {
+        return !!this._presets()[component]?.[presetName];
+    }
+    /**
+     * 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) {
+        this._presets.set(presets);
+    }
+    /**
+     * Agrega presets para un componente específico (merge con existentes)
+     */
+    registerComponentPresets(component, presets) {
+        this._presets.update((current) => ({
+            ...current,
+            [component]: {
+                ...current[component],
+                ...presets,
+            },
+        }));
+    }
+    /**
+     * Obtiene todos los nombres de presets para un componente
+     */
+    getPresetNames(component) {
+        return Object.keys(this._presets()[component] || {});
+    }
+    /**
+     * Obtiene todos los componentes con presets registrados
+     */
+    getRegisteredComponents() {
+        return Object.keys(this._presets());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PresetService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PresetService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PresetService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * 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' },
+ *       }
+ *     }),
+ *   ]
+ * };
+ */
+function provideValtechPresets(presets) {
+    return makeEnvironmentProviders([
+        {
+            provide: APP_INITIALIZER,
+            useFactory: (presetService) => {
+                return () => {
+                    presetService.registerPresets(presets);
+                };
+            },
+            deps: [PresetService],
+            multi: true,
+        },
+    ]);
+}
+
+// Service
+
 /*
  * Public API Surface of valtech-components
  */
@@ -26481,5 +26953,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ARTICLE_SPACING, AccordionComponent, ActionHeaderComponent, ActionType, AlertBoxComponent, ArticleBuilder, ArticleComponent, AuthService, AuthStateService, AuthStorageService, AuthSyncService, AvatarComponent, BannerComponent, BaseDefault, BoxComponent, BreadcrumbComponent, ButtonComponent, ButtonGroupComponent, COMMON_COUNTRY_CODES, COMMON_CURRENCIES, CURRENCY_INFO, CardComponent, CardSection, CardType, CardsCarouselComponent, CheckInputComponent, ChipGroupComponent, ClearDefault, ClearDefaultBlock, ClearDefaultFull, ClearDefaultRound, ClearDefaultRoundBlock, ClearDefaultRoundFull, CodeDisplayComponent, CommandDisplayComponent, CommentComponent, CommentInputComponent, CommentSectionComponent, CompanyFooterComponent, ComponentStates, ConfirmationDialogService, ContentLoaderComponent, CountdownComponent, CurrencyInputComponent, DEFAULT_AUTH_CONFIG, DEFAULT_CANCEL_BUTTON, DEFAULT_CONFIRM_BUTTON, DEFAULT_COUNTDOWN_LABELS, DEFAULT_COUNTDOWN_LABELS_EN, DEFAULT_EMPTY_STATE, DEFAULT_LEGEND_LABELS, DEFAULT_MODAL_CANCEL_BUTTON, DEFAULT_MODAL_CONFIRM_BUTTON, DEFAULT_PAGE_SIZE_OPTIONS, DEFAULT_PAYMENT_STATUS_COLORS, DEFAULT_PAYMENT_STATUS_LABELS, DEFAULT_PLATFORMS, DEFAULT_STATUS_COLORS, DEFAULT_STATUS_LABELS, DEFAULT_WINNER_LABELS, DataTableComponent, DateInputComponent, DateRangeInputComponent, DeviceService, DisplayComponent, DividerComponent, DownloadService, EmailInputComponent, ExpandableTextComponent, FabComponent, FileInputComponent, FirebaseService, FirestoreCollectionFactory, FirestoreService, FooterComponent, FooterLinksComponent, FormComponent, FormFooterComponent, FunHeaderComponent, GlowCardComponent, HeaderComponent, HintComponent, HorizontalScrollComponent, HourInputComponent, HrefComponent, INITIAL_AUTH_STATE, INITIAL_MFA_STATE, Icon, IconComponent, IconService, ImageComponent, InAppBrowserService, InfoComponent, InputType, ItemListComponent, LanguageSelectorComponent, LayeredCardComponent, LayoutComponent, LinkComponent, LinkProcessorService, LinksAccordionComponent, LinksCakeComponent, LocalStorageService, LocaleService, MODAL_SIZES, MOTION, MenuComponent, MessagingService, ModalService, MultiSelectSearchComponent, NavigationService, NoContentComponent, NotesBoxComponent, NotificationsService, NumberFromToComponent, NumberInputComponent, NumberStepperComponent, OutlineDefault, OutlineDefaultBlock, OutlineDefaultFull, OutlineDefaultRound, OutlineDefaultRoundBlock, OutlineDefaultRoundFull, PLATFORM_CONFIGS, PageContentComponent, PageTemplateComponent, PageWrapperComponent, PaginationComponent, ParticipantCardComponent, PasswordInputComponent, PhoneInputComponent, PillComponent, PinInputComponent, PlainCodeBoxComponent, PopoverSelectorComponent, PriceTagComponent, PrimarySolidBlockButton, PrimarySolidBlockHrefButton, PrimarySolidBlockIconButton, PrimarySolidBlockIconHrefButton, PrimarySolidDefaultRoundButton, PrimarySolidDefaultRoundHrefButton, PrimarySolidDefaultRoundIconButton, PrimarySolidDefaultRoundIconHrefButton, PrimarySolidFullButton, PrimarySolidFullHrefButton, PrimarySolidFullIconButton, PrimarySolidFullIconHrefButton, PrimarySolidLargeRoundButton, PrimarySolidLargeRoundHrefButton, PrimarySolidLargeRoundIconButton, PrimarySolidLargeRoundIconHrefButton, PrimarySolidSmallRoundButton, PrimarySolidSmallRoundHrefButton, PrimarySolidSmallRoundIconButton, PrimarySolidSmallRoundIconHrefButton, ProcessLinksPipe, ProgressBarComponent, ProgressRingComponent, ProgressStatusComponent, PrompterComponent, QR_PRESETS, QrCodeComponent, QrGeneratorService, QueryBuilder, QuoteBoxComponent, RadioInputComponent, RaffleStatusCardComponent, RangeInputComponent, RatingComponent, RecapCardComponent, RightsFooterComponent, SKELETON_PRESETS, SearchSelectorComponent, SearchbarComponent, SecondarySolidBlockButton, SecondarySolidBlockHrefButton, SecondarySolidBlockIconButton, SecondarySolidBlockIconHrefButton, SecondarySolidDefaultRoundButton, SecondarySolidDefaultRoundHrefButton, SecondarySolidDefaultRoundIconButton, SecondarySolidDefaultRoundIconHrefButton, SecondarySolidFullButton, SecondarySolidFullHrefButton, SecondarySolidFullIconButton, SecondarySolidFullIconHrefButton, SecondarySolidLargeRoundButton, SecondarySolidLargeRoundHrefButton, SecondarySolidLargeRoundIconButton, SecondarySolidLargeRoundIconHrefButton, SecondarySolidSmallRoundButton, SecondarySolidSmallRoundHrefButton, SecondarySolidSmallRoundIconButton, SecondarySolidSmallRoundIconHrefButton, SegmentControlComponent, SelectSearchComponent, SessionService, ShareButtonsComponent, SimpleComponent, SkeletonComponent, SolidBlockButton, SolidDefault, SolidDefaultBlock, SolidDefaultButton, SolidDefaultFull, SolidDefaultRound, SolidDefaultRoundBlock, SolidDefaultRoundButton, SolidDefaultRoundFull, SolidFullButton, SolidLargeButton, SolidLargeRoundButton, SolidSmallButton, SolidSmallRoundButton, StatsCardComponent, StepperComponent, StorageService, SwipeCarouselComponent, TabbedContentComponent, TabsComponent, TestimonialCardComponent, TestimonialCarouselComponent, TextComponent, TextInputComponent, TextareaInputComponent, ThemeOption, ThemeService, TicketGridComponent, TimelineComponent, TitleBlockComponent, TitleComponent, ToastService, ToggleInputComponent, TokenService, ToolbarActionType, ToolbarComponent, TypedCollection, VALTECH_AUTH_CONFIG, VALTECH_FIREBASE_CONFIG, WinnerDisplayComponent, WizardComponent, WizardFooterComponent, applyDefaultValueToControl, authGuard, authInterceptor, buildPath, collections, createFirebaseConfig, createGlowCardProps, createNumberFromToField, createTitleProps, extractPathParams, getCollectionPath, getDocumentId, goToTop, guestGuard, hasEmulators, isAtEnd, isCollectionPath, isDocumentPath, isEmulatorMode, isValidPath, joinPath, maxLength, permissionGuard, permissionGuardFromRoute, provideValtechAuth, provideValtechAuthInterceptor, provideValtechFirebase, query, replaceSpecialChars, resolveColor, resolveInputDefaultValue, roleGuard, storagePaths, superAdminGuard };
+export { ARTICLE_SPACING, AccordionComponent, ActionHeaderComponent, ActionType, AlertBoxComponent, ArticleBuilder, ArticleComponent, AuthService, AuthStateService, AuthStorageService, AuthSyncService, AvatarComponent, BannerComponent, BaseDefault, BoxComponent, BreadcrumbComponent, ButtonComponent, ButtonGroupComponent, COMMON_COUNTRY_CODES, COMMON_CURRENCIES, CURRENCY_INFO, CardComponent, CardSection, CardType, CardsCarouselComponent, CheckInputComponent, ChipGroupComponent, ClearDefault, ClearDefaultBlock, ClearDefaultFull, ClearDefaultRound, ClearDefaultRoundBlock, ClearDefaultRoundFull, CodeDisplayComponent, CommandDisplayComponent, CommentComponent, CommentInputComponent, CommentSectionComponent, CompanyFooterComponent, ComponentStates, ConfirmationDialogService, ContentLoaderComponent, CountdownComponent, CurrencyInputComponent, DEFAULT_AUTH_CONFIG, DEFAULT_CANCEL_BUTTON, DEFAULT_CONFIRM_BUTTON, DEFAULT_COUNTDOWN_LABELS, DEFAULT_COUNTDOWN_LABELS_EN, DEFAULT_EMPTY_STATE, DEFAULT_LEGEND_LABELS, DEFAULT_MODAL_CANCEL_BUTTON, DEFAULT_MODAL_CONFIRM_BUTTON, DEFAULT_PAGE_SIZE_OPTIONS, DEFAULT_PAYMENT_STATUS_COLORS, DEFAULT_PAYMENT_STATUS_LABELS, DEFAULT_PLATFORMS, DEFAULT_STATUS_COLORS, DEFAULT_STATUS_LABELS, DEFAULT_WINNER_LABELS, DataTableComponent, DateInputComponent, DateRangeInputComponent, DeviceService, DisplayComponent, DividerComponent, DownloadService, EmailInputComponent, ExpandableTextComponent, FabComponent, FileInputComponent, FirebaseService, FirestoreCollectionFactory, FirestoreService, FooterComponent, FooterLinksComponent, FormComponent, FormFooterComponent, FunHeaderComponent, GlowCardComponent, HeaderComponent, HintComponent, HorizontalScrollComponent, HourInputComponent, HrefComponent, I18nService, INITIAL_AUTH_STATE, INITIAL_MFA_STATE, Icon, IconComponent, IconService, ImageComponent, InAppBrowserService, InfoComponent, InputType, ItemListComponent, LANG_STORAGE_KEY$1 as LANG_STORAGE_KEY, LanguageSelectorComponent, LayeredCardComponent, LayoutComponent, LinkComponent, LinkProcessorService, LinksAccordionComponent, LinksCakeComponent, LocalStorageService, LocaleService, MODAL_SIZES, MOTION, MenuComponent, MessagingService, ModalService, MultiSelectSearchComponent, NavigationService, NoContentComponent, NotesBoxComponent, NotificationsService, NumberFromToComponent, NumberInputComponent, NumberStepperComponent, OutlineDefault, OutlineDefaultBlock, OutlineDefaultFull, OutlineDefaultRound, OutlineDefaultRoundBlock, OutlineDefaultRoundFull, PLATFORM_CONFIGS, PageContentComponent, PageTemplateComponent, PageWrapperComponent, PaginationComponent, ParticipantCardComponent, PasswordInputComponent, PhoneInputComponent, PillComponent, PinInputComponent, PlainCodeBoxComponent, PopoverSelectorComponent, PresetService, PriceTagComponent, PrimarySolidBlockButton, PrimarySolidBlockHrefButton, PrimarySolidBlockIconButton, PrimarySolidBlockIconHrefButton, PrimarySolidDefaultRoundButton, PrimarySolidDefaultRoundHrefButton, PrimarySolidDefaultRoundIconButton, PrimarySolidDefaultRoundIconHrefButton, PrimarySolidFullButton, PrimarySolidFullHrefButton, PrimarySolidFullIconButton, PrimarySolidFullIconHrefButton, PrimarySolidLargeRoundButton, PrimarySolidLargeRoundHrefButton, PrimarySolidLargeRoundIconButton, PrimarySolidLargeRoundIconHrefButton, PrimarySolidSmallRoundButton, PrimarySolidSmallRoundHrefButton, PrimarySolidSmallRoundIconButton, PrimarySolidSmallRoundIconHrefButton, ProcessLinksPipe, ProgressBarComponent, ProgressRingComponent, ProgressStatusComponent, PrompterComponent, QR_PRESETS, QrCodeComponent, QrGeneratorService, QueryBuilder, QuoteBoxComponent, RadioInputComponent, RaffleStatusCardComponent, RangeInputComponent, RatingComponent, RecapCardComponent, RightsFooterComponent, SKELETON_PRESETS, SearchSelectorComponent, SearchbarComponent, SecondarySolidBlockButton, SecondarySolidBlockHrefButton, SecondarySolidBlockIconButton, SecondarySolidBlockIconHrefButton, SecondarySolidDefaultRoundButton, SecondarySolidDefaultRoundHrefButton, SecondarySolidDefaultRoundIconButton, SecondarySolidDefaultRoundIconHrefButton, SecondarySolidFullButton, SecondarySolidFullHrefButton, SecondarySolidFullIconButton, SecondarySolidFullIconHrefButton, SecondarySolidLargeRoundButton, SecondarySolidLargeRoundHrefButton, SecondarySolidLargeRoundIconButton, SecondarySolidLargeRoundIconHrefButton, SecondarySolidSmallRoundButton, SecondarySolidSmallRoundHrefButton, SecondarySolidSmallRoundIconButton, SecondarySolidSmallRoundIconHrefButton, SegmentControlComponent, SelectSearchComponent, SessionService, ShareButtonsComponent, SimpleComponent, SkeletonComponent, SolidBlockButton, SolidDefault, SolidDefaultBlock, SolidDefaultButton, SolidDefaultFull, SolidDefaultRound, SolidDefaultRoundBlock, SolidDefaultRoundButton, SolidDefaultRoundFull, SolidFullButton, SolidLargeButton, SolidLargeRoundButton, SolidSmallButton, SolidSmallRoundButton, StatsCardComponent, StepperComponent, StorageService, SwipeCarouselComponent, TabbedContentComponent, TabsComponent, TestimonialCardComponent, TestimonialCarouselComponent, TextComponent, TextInputComponent, TextareaInputComponent, ThemeOption, ThemeService, TicketGridComponent, TimelineComponent, TitleBlockComponent, TitleComponent, ToastService, ToggleInputComponent, TokenService, ToolbarActionType, ToolbarComponent, TranslatePipe, TypedCollection, VALTECH_AUTH_CONFIG, VALTECH_FIREBASE_CONFIG, WinnerDisplayComponent, WizardComponent, WizardFooterComponent, applyDefaultValueToControl, authGuard, authInterceptor, buildPath, collections, createFirebaseConfig, createGlowCardProps, createNumberFromToField, createTitleProps, extractPathParams, getCollectionPath, getDocumentId, goToTop, guestGuard, hasEmulators, isAtEnd, isCollectionPath, isDocumentPath, isEmulatorMode, isValidPath, joinPath, maxLength, permissionGuard, permissionGuardFromRoute, provideValtechAuth, provideValtechAuthInterceptor, provideValtechFirebase, provideValtechI18n, provideValtechPresets, query, replaceSpecialChars, resolveColor, resolveInputDefaultValue, roleGuard, storagePaths, superAdminGuard };
 //# sourceMappingURL=valtech-components.mjs.map