valtech-components 2.0.506 → 2.0.508

package/fesm2022/valtech-components.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, Input, Output, Injectable, signal, makeEnvironmentProviders, APP_INITIALIZER, inject, HostListener, Pipe, ChangeDetectionStrategy, ViewChild, computed, ChangeDetectorRef, ElementRef, PLATFORM_ID, Inject, ErrorHandler, DestroyRef, InjectionToken, Optional, runInInjectionContext, effect } from '@angular/core';
+import { EventEmitter, Component, Input, Output, Injectable, signal, makeEnvironmentProviders, APP_INITIALIZER, inject, HostListener, Pipe, ChangeDetectionStrategy, computed, ViewChild, ChangeDetectorRef, ElementRef, PLATFORM_ID, Inject, ErrorHandler, DestroyRef, InjectionToken, 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, IonPopover, IonList, IonItem, IonRadioGroup, IonRadio, IonRange, IonSearchbar, IonSegment, IonSegmentButton, IonToggle, IonAccordion, IonAccordionGroup, IonTabBar, IonTabButton, IonBadge, IonBreadcrumb, IonBreadcrumbs, IonChip, 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';
@@ -3120,136 +3120,703 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 }]
         }] });
 
-addIcons({ downloadOutline, copyOutline, shareOutline });
 /**
- * val-qr-code
+ * Valores por defecto de configuración
+ */
+const DEFAULT_I18N_CONFIG = {
+    defaultLanguage: 'es',
+    supportedLanguages: ['es', 'en'],
+    detectBrowserLanguage: true,
+    content: {},
+    includeDefaultContent: true,
+};
+/**
+ * Clave para persistir idioma en localStorage
+ */
+const LANG_STORAGE_KEY$1 = 'app_lang';
+
+/**
+ * Servicio de internacionalización basado en Angular Signals.
  *
- * A component to display QR codes generated by QrGeneratorService.
- * Provides optional action buttons for download, copy, and share.
+ * 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 Basic usage
- * ```typescript
- * qr = await this.qrService.generate({ data: 'https://example.com' });
- * ```
- * ```html
- * <val-qr-code [props]="{ qr: qr }"></val-qr-code>
- * ```
+ * @example
+ * // En un componente
+ * i18n = inject(I18nService);
  *
- * @example With actions
- * ```html
- * <val-qr-code
- *   [props]="{
- *     qr: qr,
- *     showDownload: true,
- *     showCopy: true,
- *     showShare: true,
- *     displaySize: 200,
- *     showBorder: true,
- *     borderRadius: 12
- *   }"
- *   (actionComplete)="onAction($event)"
- * ></val-qr-code>
- * ```
+ * // Obtener texto
+ * const title = this.i18n.t('title', 'Login');
  *
- * @input props: QrCodeMetadata - Configuration for the QR display
- * @output actionComplete - Emits when an action (download/copy/share) completes
- * @output imageLoad - Emits when the QR image loads
- * @output imageError - Emits when the QR image fails to load
+ * // Con interpolación
+ * const welcome = this.i18n.t('welcome', 'Login', { name: 'Juan' });
+ *
+ * // Cambiar idioma
+ * this.i18n.setLanguage('en');
  */
-class QrCodeComponent {
+class I18nService {
     constructor() {
-        this.actionComplete = new EventEmitter();
-        this.imageLoad = new EventEmitter();
-        this.imageError = new EventEmitter();
-        this.canShare = false;
-        this.canCopy = false;
-        this.qrService = inject(QrGeneratorService);
+        // 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();
     }
-    ngOnInit() {
-        this.canShare = this.qrService.canShare();
-        this.canCopy = this.qrService.canCopyToClipboard();
+    /**
+     * 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);
     }
-    getDisplaySize() {
-        if (this.props.displaySize) {
-            return `${this.props.displaySize}px`;
+    /**
+     * Obtiene texto traducido
+     *
+     * 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];
         }
-        return `${this.props.qr.config.width || 300}px`;
-    }
-    getBorderRadius() {
-        return this.props.borderRadius ? `${this.props.borderRadius}px` : '0';
-    }
-    getPadding() {
-        return this.props.padding ? `${this.props.padding}px` : '0';
-    }
-    getQrBorderRadius() {
-        return this.props.qrBorderRadius ? `${this.props.qrBorderRadius}px` : '0';
-    }
-    getContainerClasses() {
-        const classes = [];
-        if (this.props.cssClass)
-            classes.push(this.props.cssClass);
-        if (this.props.showBorder)
-            classes.push('with-border');
-        if (this.props.loading)
-            classes.push('loading');
-        if (this.props.theme)
-            classes.push(`theme--${this.props.theme}`);
-        if (this.props.pulseOnHover)
-            classes.push('pulse-on-hover');
-        if (this.props.scaleOnHover)
-            classes.push('scale-on-hover');
-        if (this.props.gradient)
-            classes.push('has-gradient');
-        return classes.join(' ');
-    }
-    getContainerBackground() {
-        if (this.props.gradient) {
-            const { from, to, via, direction = 'to-bottom' } = this.props.gradient;
-            const cssDirection = direction.replace(/-/g, ' ');
-            if (via) {
-                return `linear-gradient(${cssDirection}, ${from}, ${via}, ${to})`;
-            }
-            return `linear-gradient(${cssDirection}, ${from}, ${to})`;
+        // Fallback a placeholder
+        if (!text) {
+            console.warn(`[i18n] Missing translation: ${ns}.${key} (${lang})`);
+            return `[${ns}.${key}]`;
         }
-        return this.props.containerBackground || 'transparent';
+        // Aplicar interpolación si hay data
+        if (data) {
+            return this.interpolate(text, data);
+        }
+        return text;
     }
-    getShadow() {
-        const shadowMap = {
-            none: 'none',
-            sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
-            md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
-            lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
-            xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
-        };
-        if (!this.props.shadow)
-            return 'none';
-        return shadowMap[this.props.shadow] || this.props.shadow;
+    /**
+     * 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, forceReload = false) {
+        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$1, lang);
+        // Actualizar signal
+        this._lang.set(lang);
+        // Fallback: recargar si se solicita
+        if (forceReload) {
+            window.location.reload();
+        }
     }
-    getLabelFontSize() {
-        return this.props.label?.fontSize ? `${this.props.label.fontSize}px` : '14px';
+    /**
+     * 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, content) {
+        this._content.update((store) => ({
+            ...store,
+            [namespace]: content,
+        }));
     }
-    hasActions() {
-        return !!(this.props.showDownload || this.props.showCopy || this.props.showShare);
+    /**
+     * Registra múltiples namespaces de una vez
+     *
+     * @param contentStore Objeto con namespaces como keys
+     */
+    registerContentBulk(contentStore) {
+        this._content.update((store) => ({
+            ...store,
+            ...contentStore,
+        }));
     }
-    getDownloadLabel() {
-        return this.props.downloadLabel || 'Descargar';
+    /**
+     * Configura los idiomas soportados
+     */
+    setI18nLanguages(languages) {
+        this._supportedLanguages.set(languages);
     }
-    getCopyLabel() {
-        return this.props.copyLabel || 'Copiar';
+    /**
+     * Obtiene todos los namespaces registrados
+     */
+    getNamespaces() {
+        return Object.keys(this._content());
     }
-    getShareLabel() {
-        return this.props.shareLabel || 'Compartir';
+    /**
+     * Verifica si un namespace tiene traducciones
+     */
+    hasNamespace(namespace) {
+        return namespace in this._content();
     }
-    async onDownload() {
-        try {
-            const options = this.props.downloadFilename
-                ? { filename: this.props.downloadFilename }
-                : undefined;
-            await this.qrService.download(this.props.qr, options);
-            this.actionComplete.emit({
-                action: 'download',
-                success: true,
-                qr: this.props.qr,
+    /**
+     * 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);
+        }
+    }
+    /**
+     * Valida si un idioma está soportado
+     */
+    isValidLanguage(lang) {
+        return this._supportedLanguages().includes(lang);
+    }
+    /**
+     * Reemplaza {variable} en texto con valores de data
+     *
+     * @example
+     * interpolate('Hola {name}', { name: 'Juan' }) // 'Hola Juan'
+     */
+    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: 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: 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
+                }]
+        }] });
+
+/**
+ * Traducciones por defecto de valtech-components.
+ *
+ * Estas traducciones se cargan automáticamente cuando se usa provideValtechI18n()
+ * sin necesidad de configuración adicional.
+ *
+ * Las apps pueden sobrescribir cualquier key pasando su propio content:
+ *
+ * @example Sobrescribir traducciones específicas
+ * ```typescript
+ * provideValtechI18n({
+ *   content: {
+ *     _global: {
+ *       es: { success: '¡Lo hicimos!' },  // Sobrescribe solo esta key
+ *       en: { success: 'We did it!' },
+ *     },
+ *   },
+ * })
+ * ```
+ *
+ * @example Desactivar traducciones por defecto
+ * ```typescript
+ * provideValtechI18n({
+ *   includeDefaultContent: false,
+ *   content: MY_CUSTOM_CONTENT,
+ * })
+ * ```
+ */
+const VALTECH_DEFAULT_CONTENT = {
+    _global: {
+        es: {
+            // Acciones comunes
+            submit: 'Enviar',
+            cancel: 'Cancelar',
+            save: 'Guardar',
+            delete: 'Eliminar',
+            edit: 'Editar',
+            close: 'Cerrar',
+            back: 'Volver',
+            next: 'Siguiente',
+            previous: 'Anterior',
+            loading: 'Cargando...',
+            search: 'Buscar',
+            learnMore: 'Saber más',
+            // Estados
+            success: 'Éxito',
+            error: 'Error',
+            warning: 'Advertencia',
+            info: 'Información',
+            // Confirmaciones
+            confirmDelete: '¿Estás seguro de que deseas eliminar?',
+            confirmCancel: '¿Estás seguro de que deseas cancelar?',
+            // Mensajes comunes
+            noResults: 'No se encontraron resultados',
+            required: 'Este campo es requerido',
+            // Navegación
+            home: 'Inicio',
+            settings: 'Configuración',
+            profile: 'Perfil',
+            logout: 'Cerrar sesión',
+            // Idiomas
+            languageName_es: 'Español',
+            languageName_en: 'English',
+            // Componentes - Modales/Selects
+            ok: 'Aceptar',
+            selectOption: 'Seleccionar opción',
+            selectPlaceholder: 'Seleccionar...',
+            itemsSelected: 'elementos seleccionados',
+            selectAll: 'Seleccionar todos',
+            clear: 'Limpiar',
+            apply: 'Aplicar',
+            // Componentes - Fechas
+            startDate: 'Fecha inicio',
+            endDate: 'Fecha fin',
+            day: 'día',
+            days: 'días',
+            // Componentes - Formularios
+            uploadFile: 'Subir archivo',
+            noFileSelected: 'No has seleccionado archivo',
+            title: 'Título',
+            description: 'Descripción',
+            feedbackType: 'Tipo de feedback',
+            feedbackSuccess: 'Feedback enviado exitosamente',
+            feedbackError: 'Error al enviar el feedback',
+            // Componentes - Búsqueda/Grid
+            searchNumber: 'Buscar número...',
+            selected: 'seleccionado/s',
+            max: 'máx:',
+            // Componentes - Listas
+            loadMoreComments: 'Cargar más comentarios',
+            noData: 'No hay datos',
+            noRecordsFound: 'No se encontraron registros para mostrar.',
+            // Componentes - Acciones
+            copiedToClipboard: '¡Copiado al portapapeles!',
+            language: 'Idioma',
+            selectLanguage: 'Seleccionar idioma...',
+            download: 'Descargar',
+            copy: 'Copiar',
+            share: 'Compartir',
+            // Componentes - Data Table / Paginación
+            actions: 'Acciones',
+            showing: 'Mostrando',
+            of: 'de',
+            perPage: 'por página',
+            firstPage: 'Primera página',
+            previousPage: 'Página anterior',
+            nextPage: 'Página siguiente',
+            lastPage: 'Última página',
+            // Componentes - Participant Card
+            winner: 'Ganador',
+            ticket: 'boleto',
+            tickets: 'boletos',
+            more: 'más',
+            notes: 'Notas:',
+        },
+        en: {
+            // Common actions
+            submit: 'Submit',
+            cancel: 'Cancel',
+            save: 'Save',
+            delete: 'Delete',
+            edit: 'Edit',
+            close: 'Close',
+            back: 'Back',
+            next: 'Next',
+            previous: 'Previous',
+            loading: 'Loading...',
+            search: 'Search',
+            learnMore: 'Learn more',
+            // States
+            success: 'Success',
+            error: 'Error',
+            warning: 'Warning',
+            info: 'Information',
+            // Confirmations
+            confirmDelete: 'Are you sure you want to delete?',
+            confirmCancel: 'Are you sure you want to cancel?',
+            // Common messages
+            noResults: 'No results found',
+            required: 'This field is required',
+            // Navigation
+            home: 'Home',
+            settings: 'Settings',
+            profile: 'Profile',
+            logout: 'Log out',
+            // Languages
+            languageName_es: 'Español',
+            languageName_en: 'English',
+            // Components - Modals/Selects
+            ok: 'OK',
+            selectOption: 'Select option',
+            selectPlaceholder: 'Select...',
+            itemsSelected: 'items selected',
+            selectAll: 'Select all',
+            clear: 'Clear',
+            apply: 'Apply',
+            // Components - Dates
+            startDate: 'Start date',
+            endDate: 'End date',
+            day: 'day',
+            days: 'days',
+            // Components - Forms
+            uploadFile: 'Upload file',
+            noFileSelected: 'No file selected',
+            title: 'Title',
+            description: 'Description',
+            feedbackType: 'Feedback type',
+            feedbackSuccess: 'Feedback sent successfully',
+            feedbackError: 'Error sending feedback',
+            // Components - Search/Grid
+            searchNumber: 'Search number...',
+            selected: 'selected',
+            max: 'max:',
+            // Components - Lists
+            loadMoreComments: 'Load more comments',
+            noData: 'No data',
+            noRecordsFound: 'No records found to display.',
+            // Components - Actions
+            copiedToClipboard: 'Copied to clipboard!',
+            language: 'Language',
+            selectLanguage: 'Select language...',
+            download: 'Download',
+            copy: 'Copy',
+            share: 'Share',
+            // Components - Data Table / Pagination
+            actions: 'Actions',
+            showing: 'Showing',
+            of: 'of',
+            perPage: 'per page',
+            firstPage: 'First page',
+            previousPage: 'Previous page',
+            nextPage: 'Next page',
+            lastPage: 'Last page',
+            // Components - Participant Card
+            winner: 'Winner',
+            ticket: 'ticket',
+            tickets: 'tickets',
+            more: 'more',
+            notes: 'Notes:',
+        },
+    },
+};
+
+/**
+ * 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);
+                    // Determinar contenido a registrar
+                    let contentToRegister = {};
+                    if (mergedConfig.includeDefaultContent !== false) {
+                        // Merge: defaults + user config (user gana)
+                        contentToRegister = deepMergeContent(VALTECH_DEFAULT_CONTENT, mergedConfig.content || {});
+                    }
+                    else if (mergedConfig.content) {
+                        // Solo contenido del usuario
+                        contentToRegister = mergedConfig.content;
+                    }
+                    // Registrar contenido
+                    if (Object.keys(contentToRegister).length > 0) {
+                        i18n.registerContentBulk(contentToRegister);
+                    }
+                };
+            },
+            deps: [I18nService],
+            multi: true,
+        },
+    ]);
+}
+/**
+ * Deep merge de ContentStore.
+ * El contenido de `override` sobrescribe keys específicas de `base`.
+ *
+ * @param base - Contenido base (defaults de valtech-components)
+ * @param override - Contenido del usuario que sobrescribe
+ * @returns ContentStore mergeado
+ *
+ * @example
+ * const base = { _global: { es: { ok: 'Aceptar' } } };
+ * const override = { _global: { es: { ok: 'Dale' } } };
+ * // Resultado: { _global: { es: { ok: 'Dale' } } }
+ */
+function deepMergeContent(base, override) {
+    const result = {};
+    // Copiar todos los namespaces del base
+    for (const namespace of Object.keys(base)) {
+        result[namespace] = deepMergeLanguagesContent(base[namespace], {});
+    }
+    // Mergear namespaces del override
+    for (const namespace of Object.keys(override)) {
+        if (result[namespace]) {
+            // Namespace existe en base, hacer deep merge
+            result[namespace] = deepMergeLanguagesContent(result[namespace], override[namespace]);
+        }
+        else {
+            // Namespace nuevo, copiar completo
+            result[namespace] = deepMergeLanguagesContent({}, override[namespace]);
+        }
+    }
+    return result;
+}
+/**
+ * Deep merge de LanguagesContent (un namespace).
+ */
+function deepMergeLanguagesContent(base, override) {
+    const result = {};
+    const allLangs = new Set([
+        ...Object.keys(base),
+        ...Object.keys(override),
+    ]);
+    for (const lang of allLangs) {
+        result[lang] = {
+            ...(base[lang] || {}),
+            ...(override[lang] || {}),
+        };
+    }
+    return result;
+}
+
+// Types
+
+addIcons({ downloadOutline, copyOutline, shareOutline });
+/**
+ * val-qr-code
+ *
+ * A component to display QR codes generated by QrGeneratorService.
+ * Provides optional action buttons for download, copy, and share.
+ *
+ * @example Basic usage
+ * ```typescript
+ * qr = await this.qrService.generate({ data: 'https://example.com' });
+ * ```
+ * ```html
+ * <val-qr-code [props]="{ qr: qr }"></val-qr-code>
+ * ```
+ *
+ * @example With actions
+ * ```html
+ * <val-qr-code
+ *   [props]="{
+ *     qr: qr,
+ *     showDownload: true,
+ *     showCopy: true,
+ *     showShare: true,
+ *     displaySize: 200,
+ *     showBorder: true,
+ *     borderRadius: 12
+ *   }"
+ *   (actionComplete)="onAction($event)"
+ * ></val-qr-code>
+ * ```
+ *
+ * @input props: QrCodeMetadata - Configuration for the QR display
+ * @output actionComplete - Emits when an action (download/copy/share) completes
+ * @output imageLoad - Emits when the QR image loads
+ * @output imageError - Emits when the QR image fails to load
+ */
+class QrCodeComponent {
+    constructor() {
+        this.actionComplete = new EventEmitter();
+        this.imageLoad = new EventEmitter();
+        this.imageError = new EventEmitter();
+        this.canShare = false;
+        this.canCopy = false;
+        this.qrService = inject(QrGeneratorService);
+        this.i18n = inject(I18nService);
+    }
+    ngOnInit() {
+        this.canShare = this.qrService.canShare();
+        this.canCopy = this.qrService.canCopyToClipboard();
+    }
+    getDisplaySize() {
+        if (this.props.displaySize) {
+            return `${this.props.displaySize}px`;
+        }
+        return `${this.props.qr.config.width || 300}px`;
+    }
+    getBorderRadius() {
+        return this.props.borderRadius ? `${this.props.borderRadius}px` : '0';
+    }
+    getPadding() {
+        return this.props.padding ? `${this.props.padding}px` : '0';
+    }
+    getQrBorderRadius() {
+        return this.props.qrBorderRadius ? `${this.props.qrBorderRadius}px` : '0';
+    }
+    getContainerClasses() {
+        const classes = [];
+        if (this.props.cssClass)
+            classes.push(this.props.cssClass);
+        if (this.props.showBorder)
+            classes.push('with-border');
+        if (this.props.loading)
+            classes.push('loading');
+        if (this.props.theme)
+            classes.push(`theme--${this.props.theme}`);
+        if (this.props.pulseOnHover)
+            classes.push('pulse-on-hover');
+        if (this.props.scaleOnHover)
+            classes.push('scale-on-hover');
+        if (this.props.gradient)
+            classes.push('has-gradient');
+        return classes.join(' ');
+    }
+    getContainerBackground() {
+        if (this.props.gradient) {
+            const { from, to, via, direction = 'to-bottom' } = this.props.gradient;
+            const cssDirection = direction.replace(/-/g, ' ');
+            if (via) {
+                return `linear-gradient(${cssDirection}, ${from}, ${via}, ${to})`;
+            }
+            return `linear-gradient(${cssDirection}, ${from}, ${to})`;
+        }
+        return this.props.containerBackground || 'transparent';
+    }
+    getShadow() {
+        const shadowMap = {
+            none: 'none',
+            sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
+            md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
+            lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
+            xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
+        };
+        if (!this.props.shadow)
+            return 'none';
+        return shadowMap[this.props.shadow] || this.props.shadow;
+    }
+    getLabelFontSize() {
+        return this.props.label?.fontSize ? `${this.props.label.fontSize}px` : '14px';
+    }
+    hasActions() {
+        return !!(this.props.showDownload || this.props.showCopy || this.props.showShare);
+    }
+    getDownloadLabel() {
+        return this.props.downloadLabel || this.i18n.t('download');
+    }
+    getCopyLabel() {
+        return this.props.copyLabel || this.i18n.t('copy');
+    }
+    getShareLabel() {
+        return this.props.shareLabel || this.i18n.t('share');
+    }
+    async onDownload() {
+        try {
+            const options = this.props.downloadFilename
+                ? { filename: this.props.downloadFilename }
+                : undefined;
+            await this.qrService.download(this.props.qr, options);
+            this.actionComplete.emit({
+                action: 'download',
+                success: true,
+                qr: this.props.qr,
             });
         }
         catch (error) {
@@ -4896,7 +5463,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  * @input props: DateInputMetadata - Configuration for the date input (form control, hint, etc.)
  */
 class DateInputComponent {
-    constructor() { }
+    /** Done button text - from props or i18n default */
+    get doneText() {
+        return this.props?.doneText || this.i18n.t('ok');
+    }
+    /** Cancel button text - from props or i18n default */
+    get cancelText() {
+        return this.props?.cancelText || this.i18n.t('cancel');
+    }
+    constructor() {
+        this.i18n = inject(I18nService);
+    }
     ngOnInit() {
         // Apply default values on initialization
         if (this.props?.withDefault || this.props?.value) {
@@ -4937,8 +5514,8 @@ class DateInputComponent {
           locale="es-ES"
           [firstDayOfWeek]="1"
           [showDefaultButtons]="true"
-          doneText="Aceptar"
-          cancelText="Cancelar"
+          [doneText]="doneText"
+          [cancelText]="cancelText"
           formatOptions="{
             date: { dateStyle: 'medium' },
             time: { timeStyle: 'short' }
@@ -4965,8 +5542,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
           locale="es-ES"
           [firstDayOfWeek]="1"
           [showDefaultButtons]="true"
-          doneText="Aceptar"
-          cancelText="Cancelar"
+          [doneText]="doneText"
+          [cancelText]="cancelText"
           formatOptions="{
             date: { dateStyle: 'medium' },
             time: { timeStyle: 'short' }
@@ -5105,502 +5682,209 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
     <div class="description-container" [class.expanded]="expanded" [class.has-gradient]="!expanded && isTruncated">
       <div class="content-wrapper">
         <ion-text>
-          <p class="description">
-            <span class="content">{{ expanded ? props.content : truncatedText }}</span>
-          </p>
-        </ion-text>
-      </div>
-      @if (!expanded && isTruncated) {
-        <span class="see-more" [style.color]="this.color()" (click)="toggleExpand()">
-          {{ getExpandText() }}
-        </span>
-      }
-    </div>
-  `, styles: [".description-container{position:relative;overflow:hidden;transition:max-height .3s ease-in-out}.description-container:not(.expanded){max-height:10rem}.description-container.expanded{max-height:none}.content-wrapper{overflow:hidden}.description-container:not(.expanded).has-gradient .content-wrapper{-webkit-mask-image:linear-gradient(to bottom,black 50%,transparent 100%);mask-image:linear-gradient(to bottom,black 50%,transparent 100%)}.description{margin:0}.see-more{display:block;font-weight:700;cursor:pointer;margin-top:.25rem}\n"] }]
-        }], propDecorators: { props: [{
-                type: Input
-            }] } });
-
-/**
- * val-file-input
- *
- * A file input component for uploading files, integrated with Angular forms.
- *
- * @example
- * <val-file-input [props]="{ control: myControl, accept: 'image/*' }"></val-file-input>
- *
- * @input props: FileInputMetadata - Configuration for the file input (form control, accept types, etc.)
- */
-class FileInputComponent {
-    constructor() {
-        this.contrastButton = {
-            ...PrimarySolidDefaultRoundButton('Subir archivo'),
-            color: 'light',
-        };
-    }
-    ngOnInit() { }
-    onFileSelected(event) {
-        this.selectedFile = event.target.files[0];
-        this.props.control.setValue(this.selectedFile);
-    }
-    reset() {
-        this.selectedFile = null;
-        this.fileInput.nativeElement.value = '';
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FileInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FileInputComponent, isStandalone: true, selector: "val-file-input", inputs: { props: "props" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: `
-    <div class="file-container">
-      <input style="display: none" type="file" (change)="onFileSelected($event)" #fileInput [accept]="props.accept" />
-      <div class="name-container">
-        <ion-icon [name]="selectedFile ? 'checkmark-circle-outline' : 'alert-circle-outline'"></ion-icon>
-        <val-text
-          style="margin-left: 4px;"
-          [props]="{
-            content: selectedFile ? selectedFile.name : (props.noFileText || 'No has seleccionado archivo'),
-            color: 'dark',
-            bold: false,
-            size: 'medium',
-          }"
-        ></val-text>
-      </div>
-      <val-button [props]="contrastButton" (onClick)="fileInput.click()"></val-button>
-    </div>
-  `, isInline: true, styles: [":root{--ion-color-primary: #7026df;--ion-color-primary-rgb: 112, 38, 223;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #6321c4;--ion-color-primary-tint: #7e3ce2;--ion-color-secondary: #e2ccff;--ion-color-secondary-rgb: 226, 204, 255;--ion-color-secondary-contrast: #000000;--ion-color-secondary-contrast-rgb: 0, 0, 0;--ion-color-secondary-shade: #c7b4e0;--ion-color-secondary-tint: #e5d1ff;--ion-color-texti: #354c69;--ion-color-texti-rgb: 53, 76, 105;--ion-color-texti-contrast: #ffffff;--ion-color-texti-contrast-rgb: 255, 255, 255;--ion-color-texti-shade: #2f435c;--ion-color-texti-tint: #495e78;--ion-color-darki: #090f1b;--ion-color-darki-rgb: 9, 15, 27;--ion-color-darki-contrast: #ffffff;--ion-color-darki-contrast-rgb: 255, 255, 255;--ion-color-darki-shade: #080d18;--ion-color-darki-tint: #222732;--ion-color-medium: #9e9e9e;--ion-color-medium-rgb: 158, 158, 158;--ion-color-medium-contrast: #000000;--ion-color-medium-contrast-rgb: 0, 0, 0;--ion-color-medium-shade: #8b8b8b;--ion-color-medium-tint: #a8a8a8;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-medium)}@media (prefers-color-scheme: dark){:root{--ion-color-texti: #8fc1ff;--ion-color-texti-rgb: 143, 193, 255;--ion-color-texti-contrast: #000000;--ion-color-texti-contrast-rgb: 0, 0, 0;--ion-color-texti-shade: #7eaae0;--ion-color-texti-tint: #9ac7ff;--ion-color-darki: #ffffff;--ion-color-darki-rgb: 255, 255, 255;--ion-color-darki-contrast: #000000;--ion-color-darki-contrast-rgb: 0, 0, 0;--ion-color-darki-shade: #e0e0e0;--ion-color-darki-tint: #ffffff;--ion-color-primary: #8f49f8;--ion-color-primary-rgb: 143, 73, 248;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #7e40da;--ion-color-primary-tint: #9a5bf9}}.ion-color-texti{--ion-color-base: var(--ion-color-texti);--ion-color-base-rgb: var(--ion-color-texti-rgb);--ion-color-contrast: var(--ion-color-texti-contrast);--ion-color-contrast-rgb: var(--ion-color-texti-contrast-rgb);--ion-color-shade: var(--ion-color-texti-shade);--ion-color-tint: var(--ion-color-texti-tint)}.ion-color-darki{--ion-color-base: var(--ion-color-darki);--ion-color-base-rgb: var(--ion-color-darki-rgb);--ion-color-contrast: var(--ion-color-darki-contrast);--ion-color-contrast-rgb: var(--ion-color-darki-contrast-rgb);--ion-color-shade: var(--ion-color-darki-shade);--ion-color-tint: var(--ion-color-darki-tint)}.section{margin-top:1rem}.input{margin:.5rem 0}@media (min-width: 768px){.input{margin:.75rem 0}}.file-container{margin-top:.25rem}.name-container{display:flex;flex-direction:row;align-items:center}\n"], dependencies: [{ kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: TextComponent, selector: "val-text", inputs: ["props"] }, { kind: "component", type: ButtonComponent, selector: "val-button", inputs: ["preset", "props"], outputs: ["onClick"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FileInputComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'val-file-input', standalone: true, imports: [IonIcon, TextComponent, ButtonComponent], template: `
-    <div class="file-container">
-      <input style="display: none" type="file" (change)="onFileSelected($event)" #fileInput [accept]="props.accept" />
-      <div class="name-container">
-        <ion-icon [name]="selectedFile ? 'checkmark-circle-outline' : 'alert-circle-outline'"></ion-icon>
-        <val-text
-          style="margin-left: 4px;"
-          [props]="{
-            content: selectedFile ? selectedFile.name : (props.noFileText || 'No has seleccionado archivo'),
-            color: 'dark',
-            bold: false,
-            size: 'medium',
-          }"
-        ></val-text>
-      </div>
-      <val-button [props]="contrastButton" (onClick)="fileInput.click()"></val-button>
-    </div>
-  `, styles: [":root{--ion-color-primary: #7026df;--ion-color-primary-rgb: 112, 38, 223;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #6321c4;--ion-color-primary-tint: #7e3ce2;--ion-color-secondary: #e2ccff;--ion-color-secondary-rgb: 226, 204, 255;--ion-color-secondary-contrast: #000000;--ion-color-secondary-contrast-rgb: 0, 0, 0;--ion-color-secondary-shade: #c7b4e0;--ion-color-secondary-tint: #e5d1ff;--ion-color-texti: #354c69;--ion-color-texti-rgb: 53, 76, 105;--ion-color-texti-contrast: #ffffff;--ion-color-texti-contrast-rgb: 255, 255, 255;--ion-color-texti-shade: #2f435c;--ion-color-texti-tint: #495e78;--ion-color-darki: #090f1b;--ion-color-darki-rgb: 9, 15, 27;--ion-color-darki-contrast: #ffffff;--ion-color-darki-contrast-rgb: 255, 255, 255;--ion-color-darki-shade: #080d18;--ion-color-darki-tint: #222732;--ion-color-medium: #9e9e9e;--ion-color-medium-rgb: 158, 158, 158;--ion-color-medium-contrast: #000000;--ion-color-medium-contrast-rgb: 0, 0, 0;--ion-color-medium-shade: #8b8b8b;--ion-color-medium-tint: #a8a8a8;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-medium)}@media (prefers-color-scheme: dark){:root{--ion-color-texti: #8fc1ff;--ion-color-texti-rgb: 143, 193, 255;--ion-color-texti-contrast: #000000;--ion-color-texti-contrast-rgb: 0, 0, 0;--ion-color-texti-shade: #7eaae0;--ion-color-texti-tint: #9ac7ff;--ion-color-darki: #ffffff;--ion-color-darki-rgb: 255, 255, 255;--ion-color-darki-contrast: #000000;--ion-color-darki-contrast-rgb: 0, 0, 0;--ion-color-darki-shade: #e0e0e0;--ion-color-darki-tint: #ffffff;--ion-color-primary: #8f49f8;--ion-color-primary-rgb: 143, 73, 248;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #7e40da;--ion-color-primary-tint: #9a5bf9}}.ion-color-texti{--ion-color-base: var(--ion-color-texti);--ion-color-base-rgb: var(--ion-color-texti-rgb);--ion-color-contrast: var(--ion-color-texti-contrast);--ion-color-contrast-rgb: var(--ion-color-texti-contrast-rgb);--ion-color-shade: var(--ion-color-texti-shade);--ion-color-tint: var(--ion-color-texti-tint)}.ion-color-darki{--ion-color-base: var(--ion-color-darki);--ion-color-base-rgb: var(--ion-color-darki-rgb);--ion-color-contrast: var(--ion-color-darki-contrast);--ion-color-contrast-rgb: var(--ion-color-darki-contrast-rgb);--ion-color-shade: var(--ion-color-darki-shade);--ion-color-tint: var(--ion-color-darki-tint)}.section{margin-top:1rem}.input{margin:.5rem 0}@media (min-width: 768px){.input{margin:.75rem 0}}.file-container{margin-top:.25rem}.name-container{display:flex;flex-direction:row;align-items:center}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { props: [{
-                type: Input
-            }], fileInput: [{
-                type: ViewChild,
-                args: ['fileInput']
-            }] } });
-
-/**
- * val-hint
- *
- * Displays validation error messages for a form input, using Angular forms.
- *
- * @example
- * <val-hint [props]="{ control: myControl, errors: { required: 'Required field' } }"></val-hint>
- *
- * @input props: InputMetadata - Configuration for the input (form control, errors, etc.)
- */
-class HintComponent {
-    constructor() { }
-    ngOnInit() { }
-    get shouldShowErrors() {
-        if (this.props.control) {
-            // Normal field with single control
-            return this.props.control.invalid && (this.props.control.touched || this.props.control.dirty);
-        }
-        else if (this.props.fromControl && this.props.toControl) {
-            // NUMBER_FROM_TO field with separate controls
-            const fromInvalid = this.props.fromControl.invalid && (this.props.fromControl.touched || this.props.fromControl.dirty);
-            const toInvalid = this.props.toControl.invalid && (this.props.toControl.touched || this.props.toControl.dirty);
-            return fromInvalid || toInvalid;
-        }
-        return false;
-    }
-    get Errors() {
-        const keys = Object.keys(this.props.errors || {});
-        const errors = [];
-        keys.map((e) => {
-            if (this.props.control && this.props.control.hasError(e)) {
-                // Normal field
-                errors.push(this.props.errors[e]);
-            }
-            else if (this.props.fromControl && this.props.toControl) {
-                // NUMBER_FROM_TO field - check both controls
-                const fromLabel = this.props.fromLabel || 'Inicial';
-                const toLabel = this.props.toLabel || 'Final';
-                if (this.props.fromControl.hasError(e)) {
-                    errors.push(`${fromLabel}: ${this.props.errors[e]}`);
-                }
-                if (this.props.toControl.hasError(e)) {
-                    errors.push(`${toLabel}: ${this.props.errors[e]}`);
-                }
-            }
-        });
-        return errors;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: HintComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: HintComponent, isStandalone: true, selector: "val-hint", inputs: { props: "props" }, ngImport: i0, template: `
-    <div class="hint-container" *ngIf="shouldShowErrors">
-      <val-text
-        *ngFor="let e of Errors"
-        [props]="{
-          content: e,
-          color: 'danger',
-          bold: false,
-          size: 'small',
-        }"
-      ></val-text>
-    </div>
-  `, isInline: true, styles: [":root{--ion-color-primary: #7026df;--ion-color-primary-rgb: 112, 38, 223;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #6321c4;--ion-color-primary-tint: #7e3ce2;--ion-color-secondary: #e2ccff;--ion-color-secondary-rgb: 226, 204, 255;--ion-color-secondary-contrast: #000000;--ion-color-secondary-contrast-rgb: 0, 0, 0;--ion-color-secondary-shade: #c7b4e0;--ion-color-secondary-tint: #e5d1ff;--ion-color-texti: #354c69;--ion-color-texti-rgb: 53, 76, 105;--ion-color-texti-contrast: #ffffff;--ion-color-texti-contrast-rgb: 255, 255, 255;--ion-color-texti-shade: #2f435c;--ion-color-texti-tint: #495e78;--ion-color-darki: #090f1b;--ion-color-darki-rgb: 9, 15, 27;--ion-color-darki-contrast: #ffffff;--ion-color-darki-contrast-rgb: 255, 255, 255;--ion-color-darki-shade: #080d18;--ion-color-darki-tint: #222732;--ion-color-medium: #9e9e9e;--ion-color-medium-rgb: 158, 158, 158;--ion-color-medium-contrast: #000000;--ion-color-medium-contrast-rgb: 0, 0, 0;--ion-color-medium-shade: #8b8b8b;--ion-color-medium-tint: #a8a8a8;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-medium)}@media (prefers-color-scheme: dark){:root{--ion-color-texti: #8fc1ff;--ion-color-texti-rgb: 143, 193, 255;--ion-color-texti-contrast: #000000;--ion-color-texti-contrast-rgb: 0, 0, 0;--ion-color-texti-shade: #7eaae0;--ion-color-texti-tint: #9ac7ff;--ion-color-darki: #ffffff;--ion-color-darki-rgb: 255, 255, 255;--ion-color-darki-contrast: #000000;--ion-color-darki-contrast-rgb: 0, 0, 0;--ion-color-darki-shade: #e0e0e0;--ion-color-darki-tint: #ffffff;--ion-color-primary: #8f49f8;--ion-color-primary-rgb: 143, 73, 248;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #7e40da;--ion-color-primary-tint: #9a5bf9}}.ion-color-texti{--ion-color-base: var(--ion-color-texti);--ion-color-base-rgb: var(--ion-color-texti-rgb);--ion-color-contrast: var(--ion-color-texti-contrast);--ion-color-contrast-rgb: var(--ion-color-texti-contrast-rgb);--ion-color-shade: var(--ion-color-texti-shade);--ion-color-tint: var(--ion-color-texti-tint)}.ion-color-darki{--ion-color-base: var(--ion-color-darki);--ion-color-base-rgb: var(--ion-color-darki-rgb);--ion-color-contrast: var(--ion-color-darki-contrast);--ion-color-contrast-rgb: var(--ion-color-darki-contrast-rgb);--ion-color-shade: var(--ion-color-darki-shade);--ion-color-tint: var(--ion-color-darki-tint)}.section{margin-top:1rem}.input{margin:.5rem 0}@media (min-width: 768px){.input{margin:.75rem 0}}.hint-container{margin-top:.25rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TextComponent, selector: "val-text", inputs: ["props"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: HintComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'val-hint', standalone: true, imports: [CommonModule, TextComponent], template: `
-    <div class="hint-container" *ngIf="shouldShowErrors">
-      <val-text
-        *ngFor="let e of Errors"
-        [props]="{
-          content: e,
-          color: 'danger',
-          bold: false,
-          size: 'small',
-        }"
-      ></val-text>
-    </div>
-  `, styles: [":root{--ion-color-primary: #7026df;--ion-color-primary-rgb: 112, 38, 223;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #6321c4;--ion-color-primary-tint: #7e3ce2;--ion-color-secondary: #e2ccff;--ion-color-secondary-rgb: 226, 204, 255;--ion-color-secondary-contrast: #000000;--ion-color-secondary-contrast-rgb: 0, 0, 0;--ion-color-secondary-shade: #c7b4e0;--ion-color-secondary-tint: #e5d1ff;--ion-color-texti: #354c69;--ion-color-texti-rgb: 53, 76, 105;--ion-color-texti-contrast: #ffffff;--ion-color-texti-contrast-rgb: 255, 255, 255;--ion-color-texti-shade: #2f435c;--ion-color-texti-tint: #495e78;--ion-color-darki: #090f1b;--ion-color-darki-rgb: 9, 15, 27;--ion-color-darki-contrast: #ffffff;--ion-color-darki-contrast-rgb: 255, 255, 255;--ion-color-darki-shade: #080d18;--ion-color-darki-tint: #222732;--ion-color-medium: #9e9e9e;--ion-color-medium-rgb: 158, 158, 158;--ion-color-medium-contrast: #000000;--ion-color-medium-contrast-rgb: 0, 0, 0;--ion-color-medium-shade: #8b8b8b;--ion-color-medium-tint: #a8a8a8;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-medium)}@media (prefers-color-scheme: dark){:root{--ion-color-texti: #8fc1ff;--ion-color-texti-rgb: 143, 193, 255;--ion-color-texti-contrast: #000000;--ion-color-texti-contrast-rgb: 0, 0, 0;--ion-color-texti-shade: #7eaae0;--ion-color-texti-tint: #9ac7ff;--ion-color-darki: #ffffff;--ion-color-darki-rgb: 255, 255, 255;--ion-color-darki-contrast: #000000;--ion-color-darki-contrast-rgb: 0, 0, 0;--ion-color-darki-shade: #e0e0e0;--ion-color-darki-tint: #ffffff;--ion-color-primary: #8f49f8;--ion-color-primary-rgb: 143, 73, 248;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #7e40da;--ion-color-primary-tint: #9a5bf9}}.ion-color-texti{--ion-color-base: var(--ion-color-texti);--ion-color-base-rgb: var(--ion-color-texti-rgb);--ion-color-contrast: var(--ion-color-texti-contrast);--ion-color-contrast-rgb: var(--ion-color-texti-contrast-rgb);--ion-color-shade: var(--ion-color-texti-shade);--ion-color-tint: var(--ion-color-texti-tint)}.ion-color-darki{--ion-color-base: var(--ion-color-darki);--ion-color-base-rgb: var(--ion-color-darki-rgb);--ion-color-contrast: var(--ion-color-darki-contrast);--ion-color-contrast-rgb: var(--ion-color-darki-contrast-rgb);--ion-color-shade: var(--ion-color-darki-shade);--ion-color-tint: var(--ion-color-darki-tint)}.section{margin-top:1rem}.input{margin:.5rem 0}@media (min-width: 768px){.input{margin:.75rem 0}}.hint-container{margin-top:.25rem}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { props: [{
-                type: Input
-            }] } });
-
-/**
- * val-hour-input
- *
- * A time picker input integrated with Angular forms, using Ionic's datetime component.
- *
- * @example
- * <val-hour-input [props]="{ control: myControl }"></val-hour-input>
- *
- * @input props: InputMetadata - Configuration for the time input (form control, etc.)
- */
-class HourInputComponent {
-    constructor() { }
-    ngOnInit() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: HourInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: HourInputComponent, isStandalone: true, selector: "val-hour-input", inputs: { props: "props" }, ngImport: i0, template: ` <ion-datetime [formControl]="props.control" presentation="time"></ion-datetime>`, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: IonDatetime, selector: "ion-datetime", inputs: ["cancelText", "clearText", "color", "dayValues", "disabled", "doneText", "firstDayOfWeek", "formatOptions", "highlightedDates", "hourCycle", "hourValues", "isDateEnabled", "locale", "max", "min", "minuteValues", "mode", "monthValues", "multiple", "name", "preferWheel", "presentation", "readonly", "showAdjacentDays", "showClearButton", "showDefaultButtons", "showDefaultTimeLabel", "showDefaultTitle", "size", "titleSelectedDatesFormatter", "value", "yearValues"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: HourInputComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'val-hour-input', standalone: true, imports: [ReactiveFormsModule, IonDatetime], template: ` <ion-datetime [formControl]="props.control" presentation="time"></ion-datetime>` }]
-        }], ctorParameters: () => [], propDecorators: { props: [{
+          <p class="description">
+            <span class="content">{{ expanded ? props.content : truncatedText }}</span>
+          </p>
+        </ion-text>
+      </div>
+      @if (!expanded && isTruncated) {
+        <span class="see-more" [style.color]="this.color()" (click)="toggleExpand()">
+          {{ getExpandText() }}
+        </span>
+      }
+    </div>
+  `, styles: [".description-container{position:relative;overflow:hidden;transition:max-height .3s ease-in-out}.description-container:not(.expanded){max-height:10rem}.description-container.expanded{max-height:none}.content-wrapper{overflow:hidden}.description-container:not(.expanded).has-gradient .content-wrapper{-webkit-mask-image:linear-gradient(to bottom,black 50%,transparent 100%);mask-image:linear-gradient(to bottom,black 50%,transparent 100%)}.description{margin:0}.see-more{display:block;font-weight:700;cursor:pointer;margin-top:.25rem}\n"] }]
+        }], propDecorators: { props: [{
                 type: Input
             }] } });
 
 /**
- * Valores por defecto de configuración
- */
-const DEFAULT_I18N_CONFIG = {
-    defaultLanguage: 'es',
-    supportedLanguages: ['es', 'en'],
-    detectBrowserLanguage: true,
-    content: {},
-};
-/**
- * Clave para persistir idioma en localStorage
- */
-const LANG_STORAGE_KEY$1 = 'app_lang';
-
-/**
- * Servicio de internacionalización basado en Angular Signals.
+ * val-file-input
  *
- * 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
+ * A file input component for uploading files, integrated with Angular forms.
  *
  * @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' });
+ * <val-file-input [props]="{ control: myControl, accept: 'image/*' }"></val-file-input>
  *
- * // Cambiar idioma
- * this.i18n.setLanguage('en');
+ * @input props: FileInputMetadata - Configuration for the file input (form control, accept types, etc.)
  */
-class I18nService {
+class FileInputComponent {
     constructor() {
-        // 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);
-    }
-    /**
-     * Obtiene texto traducido
-     *
-     * 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)
-     */
-    setLanguage(lang, forceReload = false) {
-        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$1, 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, 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());
+        this.i18n = inject(I18nService);
     }
-    /**
-     * Verifica si un namespace tiene traducciones
-     */
-    hasNamespace(namespace) {
-        return namespace in this._content();
+    ngOnInit() {
+        // Initialize button with i18n text
+        this.contrastButton = {
+            ...PrimarySolidDefaultRoundButton(this.props?.buttonText || this.i18n.t('uploadFile')),
+            color: 'light',
+        };
     }
-    /**
-     * 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);
+    /** Get display text for file status */
+    getFileDisplayText() {
+        if (this.selectedFile) {
+            return this.selectedFile.name;
         }
+        return this.props?.noFileText || this.i18n.t('noFileSelected');
     }
-    /**
-     * Valida si un idioma está soportado
-     */
-    isValidLanguage(lang) {
-        return this._supportedLanguages().includes(lang);
+    onFileSelected(event) {
+        this.selectedFile = event.target.files[0];
+        this.props.control.setValue(this.selectedFile);
     }
-    /**
-     * Reemplaza {variable} en texto con valores de data
-     *
-     * @example
-     * interpolate('Hola {name}', { name: 'Juan' }) // 'Hola Juan'
-     */
-    interpolate(text, data) {
-        return Object.entries(data).reduce((result, [key, value]) => {
-            const regex = new RegExp(`\\{${key}\\}`, 'g');
-            return result.replace(regex, value);
-        }, text);
+    reset() {
+        this.selectedFile = null;
+        this.fileInput.nativeElement.value = '';
     }
-    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' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FileInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FileInputComponent, isStandalone: true, selector: "val-file-input", inputs: { props: "props" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: `
+    <div class="file-container">
+      <input style="display: none" type="file" (change)="onFileSelected($event)" #fileInput [accept]="props.accept" />
+      <div class="name-container">
+        <ion-icon [name]="selectedFile ? 'checkmark-circle-outline' : 'alert-circle-outline'"></ion-icon>
+        <val-text
+          style="margin-left: 4px;"
+          [props]="{
+            content: getFileDisplayText(),
+            color: 'dark',
+            bold: false,
+            size: 'medium',
+          }"
+        ></val-text>
+      </div>
+      <val-button [props]="contrastButton" (onClick)="fileInput.click()"></val-button>
+    </div>
+  `, isInline: true, styles: [":root{--ion-color-primary: #7026df;--ion-color-primary-rgb: 112, 38, 223;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #6321c4;--ion-color-primary-tint: #7e3ce2;--ion-color-secondary: #e2ccff;--ion-color-secondary-rgb: 226, 204, 255;--ion-color-secondary-contrast: #000000;--ion-color-secondary-contrast-rgb: 0, 0, 0;--ion-color-secondary-shade: #c7b4e0;--ion-color-secondary-tint: #e5d1ff;--ion-color-texti: #354c69;--ion-color-texti-rgb: 53, 76, 105;--ion-color-texti-contrast: #ffffff;--ion-color-texti-contrast-rgb: 255, 255, 255;--ion-color-texti-shade: #2f435c;--ion-color-texti-tint: #495e78;--ion-color-darki: #090f1b;--ion-color-darki-rgb: 9, 15, 27;--ion-color-darki-contrast: #ffffff;--ion-color-darki-contrast-rgb: 255, 255, 255;--ion-color-darki-shade: #080d18;--ion-color-darki-tint: #222732;--ion-color-medium: #9e9e9e;--ion-color-medium-rgb: 158, 158, 158;--ion-color-medium-contrast: #000000;--ion-color-medium-contrast-rgb: 0, 0, 0;--ion-color-medium-shade: #8b8b8b;--ion-color-medium-tint: #a8a8a8;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-medium)}@media (prefers-color-scheme: dark){:root{--ion-color-texti: #8fc1ff;--ion-color-texti-rgb: 143, 193, 255;--ion-color-texti-contrast: #000000;--ion-color-texti-contrast-rgb: 0, 0, 0;--ion-color-texti-shade: #7eaae0;--ion-color-texti-tint: #9ac7ff;--ion-color-darki: #ffffff;--ion-color-darki-rgb: 255, 255, 255;--ion-color-darki-contrast: #000000;--ion-color-darki-contrast-rgb: 0, 0, 0;--ion-color-darki-shade: #e0e0e0;--ion-color-darki-tint: #ffffff;--ion-color-primary: #8f49f8;--ion-color-primary-rgb: 143, 73, 248;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #7e40da;--ion-color-primary-tint: #9a5bf9}}.ion-color-texti{--ion-color-base: var(--ion-color-texti);--ion-color-base-rgb: var(--ion-color-texti-rgb);--ion-color-contrast: var(--ion-color-texti-contrast);--ion-color-contrast-rgb: var(--ion-color-texti-contrast-rgb);--ion-color-shade: var(--ion-color-texti-shade);--ion-color-tint: var(--ion-color-texti-tint)}.ion-color-darki{--ion-color-base: var(--ion-color-darki);--ion-color-base-rgb: var(--ion-color-darki-rgb);--ion-color-contrast: var(--ion-color-darki-contrast);--ion-color-contrast-rgb: var(--ion-color-darki-contrast-rgb);--ion-color-shade: var(--ion-color-darki-shade);--ion-color-tint: var(--ion-color-darki-tint)}.section{margin-top:1rem}.input{margin:.5rem 0}@media (min-width: 768px){.input{margin:.75rem 0}}.file-container{margin-top:.25rem}.name-container{display:flex;flex-direction:row;align-items:center}\n"], dependencies: [{ kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: TextComponent, selector: "val-text", inputs: ["props"] }, { kind: "component", type: ButtonComponent, selector: "val-button", inputs: ["preset", "props"], outputs: ["onClick"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: I18nService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FileInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'val-file-input', standalone: true, imports: [IonIcon, TextComponent, ButtonComponent], template: `
+    <div class="file-container">
+      <input style="display: none" type="file" (change)="onFileSelected($event)" #fileInput [accept]="props.accept" />
+      <div class="name-container">
+        <ion-icon [name]="selectedFile ? 'checkmark-circle-outline' : 'alert-circle-outline'"></ion-icon>
+        <val-text
+          style="margin-left: 4px;"
+          [props]="{
+            content: getFileDisplayText(),
+            color: 'dark',
+            bold: false,
+            size: 'medium',
+          }"
+        ></val-text>
+      </div>
+      <val-button [props]="contrastButton" (onClick)="fileInput.click()"></val-button>
+    </div>
+  `, styles: [":root{--ion-color-primary: #7026df;--ion-color-primary-rgb: 112, 38, 223;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #6321c4;--ion-color-primary-tint: #7e3ce2;--ion-color-secondary: #e2ccff;--ion-color-secondary-rgb: 226, 204, 255;--ion-color-secondary-contrast: #000000;--ion-color-secondary-contrast-rgb: 0, 0, 0;--ion-color-secondary-shade: #c7b4e0;--ion-color-secondary-tint: #e5d1ff;--ion-color-texti: #354c69;--ion-color-texti-rgb: 53, 76, 105;--ion-color-texti-contrast: #ffffff;--ion-color-texti-contrast-rgb: 255, 255, 255;--ion-color-texti-shade: #2f435c;--ion-color-texti-tint: #495e78;--ion-color-darki: #090f1b;--ion-color-darki-rgb: 9, 15, 27;--ion-color-darki-contrast: #ffffff;--ion-color-darki-contrast-rgb: 255, 255, 255;--ion-color-darki-shade: #080d18;--ion-color-darki-tint: #222732;--ion-color-medium: #9e9e9e;--ion-color-medium-rgb: 158, 158, 158;--ion-color-medium-contrast: #000000;--ion-color-medium-contrast-rgb: 0, 0, 0;--ion-color-medium-shade: #8b8b8b;--ion-color-medium-tint: #a8a8a8;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-medium)}@media (prefers-color-scheme: dark){:root{--ion-color-texti: #8fc1ff;--ion-color-texti-rgb: 143, 193, 255;--ion-color-texti-contrast: #000000;--ion-color-texti-contrast-rgb: 0, 0, 0;--ion-color-texti-shade: #7eaae0;--ion-color-texti-tint: #9ac7ff;--ion-color-darki: #ffffff;--ion-color-darki-rgb: 255, 255, 255;--ion-color-darki-contrast: #000000;--ion-color-darki-contrast-rgb: 0, 0, 0;--ion-color-darki-shade: #e0e0e0;--ion-color-darki-tint: #ffffff;--ion-color-primary: #8f49f8;--ion-color-primary-rgb: 143, 73, 248;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #7e40da;--ion-color-primary-tint: #9a5bf9}}.ion-color-texti{--ion-color-base: var(--ion-color-texti);--ion-color-base-rgb: var(--ion-color-texti-rgb);--ion-color-contrast: var(--ion-color-texti-contrast);--ion-color-contrast-rgb: var(--ion-color-texti-contrast-rgb);--ion-color-shade: var(--ion-color-texti-shade);--ion-color-tint: var(--ion-color-texti-tint)}.ion-color-darki{--ion-color-base: var(--ion-color-darki);--ion-color-base-rgb: var(--ion-color-darki-rgb);--ion-color-contrast: var(--ion-color-darki-contrast);--ion-color-contrast-rgb: var(--ion-color-darki-contrast-rgb);--ion-color-shade: var(--ion-color-darki-shade);--ion-color-tint: var(--ion-color-darki-tint)}.section{margin-top:1rem}.input{margin:.5rem 0}@media (min-width: 768px){.input{margin:.75rem 0}}.file-container{margin-top:.25rem}.name-container{display:flex;flex-direction:row;align-items:center}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { props: [{
+                type: Input
+            }], fileInput: [{
+                type: ViewChild,
+                args: ['fileInput']
+            }] } });
 
 /**
- * Pipe de traducción para templates.
+ * val-hint
  *
- * NOTA: Es impure para detectar cambios de idioma.
- * El costo es mínimo porque I18nService usa Signals internamente.
+ * Displays validation error messages for a form input, using Angular forms.
  *
  * @example
- * <!-- Busca en _global -->
- * {{ 'submit' | t }}
- *
- * <!-- Busca en namespace específico -->
- * {{ 'title' | t:'Login' }}
- *
- * <!-- Con interpolación -->
- * {{ 'welcome' | t:'Login':{ name: userName } }}
+ * <val-hint [props]="{ control: myControl, errors: { required: 'Required field' } }"></val-hint>
  *
- * <!-- En atributos -->
- * <val-button [label]="'submit' | t"></val-button>
- * <val-input [label]="'email' | t:'Login'"></val-input>
+ * @input props: InputMetadata - Configuration for the input (form control, errors, etc.)
  */
-class TranslatePipe {
-    constructor() {
-        this.i18n = inject(I18nService);
+class HintComponent {
+    constructor() { }
+    ngOnInit() { }
+    get shouldShowErrors() {
+        if (this.props.control) {
+            // Normal field with single control
+            return this.props.control.invalid && (this.props.control.touched || this.props.control.dirty);
+        }
+        else if (this.props.fromControl && this.props.toControl) {
+            // NUMBER_FROM_TO field with separate controls
+            const fromInvalid = this.props.fromControl.invalid && (this.props.fromControl.touched || this.props.fromControl.dirty);
+            const toInvalid = this.props.toControl.invalid && (this.props.toControl.touched || this.props.toControl.dirty);
+            return fromInvalid || toInvalid;
+        }
+        return false;
     }
-    /**
-     * 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);
+    get Errors() {
+        const keys = Object.keys(this.props.errors || {});
+        const errors = [];
+        keys.map((e) => {
+            if (this.props.control && this.props.control.hasError(e)) {
+                // Normal field
+                errors.push(this.props.errors[e]);
+            }
+            else if (this.props.fromControl && this.props.toControl) {
+                // NUMBER_FROM_TO field - check both controls
+                const fromLabel = this.props.fromLabel || 'Inicial';
+                const toLabel = this.props.toLabel || 'Final';
+                if (this.props.fromControl.hasError(e)) {
+                    errors.push(`${fromLabel}: ${this.props.errors[e]}`);
+                }
+                if (this.props.toControl.hasError(e)) {
+                    errors.push(`${toLabel}: ${this.props.errors[e]}`);
+                }
+            }
+        });
+        return errors;
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: HintComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: HintComponent, isStandalone: true, selector: "val-hint", inputs: { props: "props" }, ngImport: i0, template: `
+    <div class="hint-container" *ngIf="shouldShowErrors">
+      <val-text
+        *ngFor="let e of Errors"
+        [props]="{
+          content: e,
+          color: 'danger',
+          bold: false,
+          size: 'small',
+        }"
+      ></val-text>
+    </div>
+  `, isInline: true, styles: [":root{--ion-color-primary: #7026df;--ion-color-primary-rgb: 112, 38, 223;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #6321c4;--ion-color-primary-tint: #7e3ce2;--ion-color-secondary: #e2ccff;--ion-color-secondary-rgb: 226, 204, 255;--ion-color-secondary-contrast: #000000;--ion-color-secondary-contrast-rgb: 0, 0, 0;--ion-color-secondary-shade: #c7b4e0;--ion-color-secondary-tint: #e5d1ff;--ion-color-texti: #354c69;--ion-color-texti-rgb: 53, 76, 105;--ion-color-texti-contrast: #ffffff;--ion-color-texti-contrast-rgb: 255, 255, 255;--ion-color-texti-shade: #2f435c;--ion-color-texti-tint: #495e78;--ion-color-darki: #090f1b;--ion-color-darki-rgb: 9, 15, 27;--ion-color-darki-contrast: #ffffff;--ion-color-darki-contrast-rgb: 255, 255, 255;--ion-color-darki-shade: #080d18;--ion-color-darki-tint: #222732;--ion-color-medium: #9e9e9e;--ion-color-medium-rgb: 158, 158, 158;--ion-color-medium-contrast: #000000;--ion-color-medium-contrast-rgb: 0, 0, 0;--ion-color-medium-shade: #8b8b8b;--ion-color-medium-tint: #a8a8a8;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-medium)}@media (prefers-color-scheme: dark){:root{--ion-color-texti: #8fc1ff;--ion-color-texti-rgb: 143, 193, 255;--ion-color-texti-contrast: #000000;--ion-color-texti-contrast-rgb: 0, 0, 0;--ion-color-texti-shade: #7eaae0;--ion-color-texti-tint: #9ac7ff;--ion-color-darki: #ffffff;--ion-color-darki-rgb: 255, 255, 255;--ion-color-darki-contrast: #000000;--ion-color-darki-contrast-rgb: 0, 0, 0;--ion-color-darki-shade: #e0e0e0;--ion-color-darki-tint: #ffffff;--ion-color-primary: #8f49f8;--ion-color-primary-rgb: 143, 73, 248;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #7e40da;--ion-color-primary-tint: #9a5bf9}}.ion-color-texti{--ion-color-base: var(--ion-color-texti);--ion-color-base-rgb: var(--ion-color-texti-rgb);--ion-color-contrast: var(--ion-color-texti-contrast);--ion-color-contrast-rgb: var(--ion-color-texti-contrast-rgb);--ion-color-shade: var(--ion-color-texti-shade);--ion-color-tint: var(--ion-color-texti-tint)}.ion-color-darki{--ion-color-base: var(--ion-color-darki);--ion-color-base-rgb: var(--ion-color-darki-rgb);--ion-color-contrast: var(--ion-color-darki-contrast);--ion-color-contrast-rgb: var(--ion-color-darki-contrast-rgb);--ion-color-shade: var(--ion-color-darki-shade);--ion-color-tint: var(--ion-color-darki-tint)}.section{margin-top:1rem}.input{margin:.5rem 0}@media (min-width: 768px){.input{margin:.75rem 0}}.hint-container{margin-top:.25rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TextComponent, selector: "val-text", inputs: ["props"] }] }); }
 }
-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
-                }]
-        }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: HintComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'val-hint', standalone: true, imports: [CommonModule, TextComponent], template: `
+    <div class="hint-container" *ngIf="shouldShowErrors">
+      <val-text
+        *ngFor="let e of Errors"
+        [props]="{
+          content: e,
+          color: 'danger',
+          bold: false,
+          size: 'small',
+        }"
+      ></val-text>
+    </div>
+  `, styles: [":root{--ion-color-primary: #7026df;--ion-color-primary-rgb: 112, 38, 223;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #6321c4;--ion-color-primary-tint: #7e3ce2;--ion-color-secondary: #e2ccff;--ion-color-secondary-rgb: 226, 204, 255;--ion-color-secondary-contrast: #000000;--ion-color-secondary-contrast-rgb: 0, 0, 0;--ion-color-secondary-shade: #c7b4e0;--ion-color-secondary-tint: #e5d1ff;--ion-color-texti: #354c69;--ion-color-texti-rgb: 53, 76, 105;--ion-color-texti-contrast: #ffffff;--ion-color-texti-contrast-rgb: 255, 255, 255;--ion-color-texti-shade: #2f435c;--ion-color-texti-tint: #495e78;--ion-color-darki: #090f1b;--ion-color-darki-rgb: 9, 15, 27;--ion-color-darki-contrast: #ffffff;--ion-color-darki-contrast-rgb: 255, 255, 255;--ion-color-darki-shade: #080d18;--ion-color-darki-tint: #222732;--ion-color-medium: #9e9e9e;--ion-color-medium-rgb: 158, 158, 158;--ion-color-medium-contrast: #000000;--ion-color-medium-contrast-rgb: 0, 0, 0;--ion-color-medium-shade: #8b8b8b;--ion-color-medium-tint: #a8a8a8;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-medium)}@media (prefers-color-scheme: dark){:root{--ion-color-texti: #8fc1ff;--ion-color-texti-rgb: 143, 193, 255;--ion-color-texti-contrast: #000000;--ion-color-texti-contrast-rgb: 0, 0, 0;--ion-color-texti-shade: #7eaae0;--ion-color-texti-tint: #9ac7ff;--ion-color-darki: #ffffff;--ion-color-darki-rgb: 255, 255, 255;--ion-color-darki-contrast: #000000;--ion-color-darki-contrast-rgb: 0, 0, 0;--ion-color-darki-shade: #e0e0e0;--ion-color-darki-tint: #ffffff;--ion-color-primary: #8f49f8;--ion-color-primary-rgb: 143, 73, 248;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #7e40da;--ion-color-primary-tint: #9a5bf9}}.ion-color-texti{--ion-color-base: var(--ion-color-texti);--ion-color-base-rgb: var(--ion-color-texti-rgb);--ion-color-contrast: var(--ion-color-texti-contrast);--ion-color-contrast-rgb: var(--ion-color-texti-contrast-rgb);--ion-color-shade: var(--ion-color-texti-shade);--ion-color-tint: var(--ion-color-texti-tint)}.ion-color-darki{--ion-color-base: var(--ion-color-darki);--ion-color-base-rgb: var(--ion-color-darki-rgb);--ion-color-contrast: var(--ion-color-darki-contrast);--ion-color-contrast-rgb: var(--ion-color-darki-contrast-rgb);--ion-color-shade: var(--ion-color-darki-shade);--ion-color-tint: var(--ion-color-darki-tint)}.section{margin-top:1rem}.input{margin:.5rem 0}@media (min-width: 768px){.input{margin:.75rem 0}}.hint-container{margin-top:.25rem}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { props: [{
+                type: Input
+            }] } });
 
 /**
- * Configura el sistema de internacionalización de Valtech Components.
+ * val-hour-input
  *
- * @param config Configuración de i18n
- * @returns Providers para agregar en app.config.ts
+ * A time picker input integrated with Angular forms, using Ionic's datetime component.
  *
  * @example
- * // app.config.ts
- * import { provideValtechI18n } from 'valtech-components';
- * import { GLOBAL_CONTENT } from './i18n/_global';
- * import { LOGIN_CONTENT } from './i18n/login.i18n';
+ * <val-hour-input [props]="{ control: myControl }"></val-hour-input>
  *
- * export const appConfig: ApplicationConfig = {
- *   providers: [
- *     provideValtechI18n({
- *       defaultLanguage: 'es',
- *       supportedLanguages: ['es', 'en'],
- *       detectBrowserLanguage: true,
- *       content: {
- *         '_global': GLOBAL_CONTENT,
- *         'Login': LOGIN_CONTENT,
- *       }
- *     }),
- *   ]
- * };
+ * @input props: InputMetadata - Configuration for the time input (form control, etc.)
  */
-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,
-        },
-    ]);
+class HourInputComponent {
+    constructor() { }
+    ngOnInit() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: HourInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: HourInputComponent, isStandalone: true, selector: "val-hour-input", inputs: { props: "props" }, ngImport: i0, template: ` <ion-datetime [formControl]="props.control" presentation="time"></ion-datetime>`, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: IonDatetime, selector: "ion-datetime", inputs: ["cancelText", "clearText", "color", "dayValues", "disabled", "doneText", "firstDayOfWeek", "formatOptions", "highlightedDates", "hourCycle", "hourValues", "isDateEnabled", "locale", "max", "min", "minuteValues", "mode", "monthValues", "multiple", "name", "preferWheel", "presentation", "readonly", "showAdjacentDays", "showClearButton", "showDefaultButtons", "showDefaultTimeLabel", "showDefaultTitle", "size", "titleSelectedDatesFormatter", "value", "yearValues"] }] }); }
 }
-
-// Types
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: HourInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'val-hour-input', standalone: true, imports: [ReactiveFormsModule, IonDatetime], template: ` <ion-datetime [formControl]="props.control" presentation="time"></ion-datetime>` }]
+        }], ctorParameters: () => [], propDecorators: { props: [{
+                type: Input
+            }] } });
 
 /**
  * val-popover-selector
@@ -5640,6 +5924,7 @@ class PopoverSelectorComponent {
          * Emits the selected value(s).
          */
         this.selectionChange = new EventEmitter();
+        this.i18n = inject(I18nService);
         // Register required icons
         addIcons({ chevronDown });
     }
@@ -5647,19 +5932,19 @@ class PopoverSelectorComponent {
      * Get placeholder text.
      */
     getPlaceholderText() {
-        return this.props.placeholder || 'Seleccionar...';
+        return this.props.placeholder || this.i18n.t('selectPlaceholder');
     }
     /**
      * Get cancel text.
      */
     getCancelText() {
-        return this.props.cancelText || 'Cancelar';
+        return this.props.cancelText || this.i18n.t('cancel');
     }
     /**
      * Get ok text.
      */
     getOkText() {
-        return this.props.okText || 'Aceptar';
+        return this.props.okText || this.i18n.t('ok');
     }
     /**
      * Handle selection change from the ion-select.
@@ -5687,7 +5972,7 @@ class PopoverSelectorComponent {
                 const option = this.props.options.find(opt => opt.value === this.props.selectedValue[0]);
                 return option?.label || this.props.selectedValue[0];
             }
-            return `${this.props.selectedValue.length} seleccionados`;
+            return `${this.props.selectedValue.length} ${this.i18n.t('selected')}`;
         }
         // Single selection
         const selectedOption = this.props.options.find(opt => opt.value === this.props.selectedValue);
@@ -5854,9 +6139,9 @@ class LanguageSelectorComponent {
         this.popoverProps = {
             options,
             selectedValue: currentLanguage,
-            label: this.props.showLabel !== false ? (this.props.label || 'Idioma') : undefined,
+            label: this.props.showLabel !== false ? (this.props.label || this.i18n.t('language')) : undefined,
             icon: 'language',
-            placeholder: 'Seleccionar idioma...',
+            placeholder: this.i18n.t('selectLanguage'),
             color: this.props.color || 'medium',
             size: this.props.size || 'default',
             fill: this.props.fill || 'outline',
@@ -5866,8 +6151,8 @@ class LanguageSelectorComponent {
             interface: 'popover',
             showCheckmark: true,
             multiple: false,
-            cancelText: 'Cancelar',
-            okText: 'Aceptar',
+            cancelText: this.i18n.t('cancel'),
+            okText: this.i18n.t('ok'),
         };
     }
     /** Get display name for a language code (public for template access) */
@@ -7285,6 +7570,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  * @output blurEvent - Emits when the searchbar loses focus.
  */
 class SearchbarComponent {
+    /** Get placeholder text */
+    getPlaceholder() {
+        return this.placeholder || this.i18n.t('search');
+    }
+    /** Get cancel button text */
+    getCancelText() {
+        return this.cancelText || this.i18n.t('cancel');
+    }
     constructor() {
         /**
          * Emits the search term on input.
@@ -7298,6 +7591,7 @@ class SearchbarComponent {
          * Emits when the searchbar loses focus.
          */
         this.blurEvent = new EventEmitter();
+        this.i18n = inject(I18nService);
     }
     onSearch($event) {
         const searchTerm = $event.detail.value;
@@ -7310,14 +7604,14 @@ class SearchbarComponent {
         this.blurEvent.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SearchbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: SearchbarComponent, isStandalone: true, selector: "val-searchbar", inputs: { disabled: "disabled" }, outputs: { filterEvent: "filterEvent", focusEvent: "focusEvent", blurEvent: "blurEvent" }, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: SearchbarComponent, isStandalone: true, selector: "val-searchbar", inputs: { disabled: "disabled", placeholder: "placeholder", cancelText: "cancelText" }, outputs: { filterEvent: "filterEvent", focusEvent: "focusEvent", blurEvent: "blurEvent" }, ngImport: i0, template: `
     <ion-searchbar
       mode="ios"
       debounce="500"
-      placeholder="Búsqueda"
+      [placeholder]="getPlaceholder()"
       [disabled]="disabled"
       showCancelButton="focus"
-      cancelButtonText="Cancelar"
+      [cancelButtonText]="getCancelText()"
       (ionInput)="onSearch($event)"
       (ionBlur)="onBlur()"
       (ionFocus)="onFocus()"
@@ -7331,10 +7625,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
     <ion-searchbar
       mode="ios"
       debounce="500"
-      placeholder="Búsqueda"
+      [placeholder]="getPlaceholder()"
       [disabled]="disabled"
       showCancelButton="focus"
-      cancelButtonText="Cancelar"
+      [cancelButtonText]="getCancelText()"
       (ionInput)="onSearch($event)"
       (ionBlur)="onBlur()"
       (ionFocus)="onFocus()"
@@ -7343,6 +7637,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
   `, styles: [":root{--ion-color-primary: #7026df;--ion-color-primary-rgb: 112, 38, 223;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #6321c4;--ion-color-primary-tint: #7e3ce2;--ion-color-secondary: #e2ccff;--ion-color-secondary-rgb: 226, 204, 255;--ion-color-secondary-contrast: #000000;--ion-color-secondary-contrast-rgb: 0, 0, 0;--ion-color-secondary-shade: #c7b4e0;--ion-color-secondary-tint: #e5d1ff;--ion-color-texti: #354c69;--ion-color-texti-rgb: 53, 76, 105;--ion-color-texti-contrast: #ffffff;--ion-color-texti-contrast-rgb: 255, 255, 255;--ion-color-texti-shade: #2f435c;--ion-color-texti-tint: #495e78;--ion-color-darki: #090f1b;--ion-color-darki-rgb: 9, 15, 27;--ion-color-darki-contrast: #ffffff;--ion-color-darki-contrast-rgb: 255, 255, 255;--ion-color-darki-shade: #080d18;--ion-color-darki-tint: #222732;--ion-color-medium: #9e9e9e;--ion-color-medium-rgb: 158, 158, 158;--ion-color-medium-contrast: #000000;--ion-color-medium-contrast-rgb: 0, 0, 0;--ion-color-medium-shade: #8b8b8b;--ion-color-medium-tint: #a8a8a8;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-medium)}@media (prefers-color-scheme: dark){:root{--ion-color-texti: #8fc1ff;--ion-color-texti-rgb: 143, 193, 255;--ion-color-texti-contrast: #000000;--ion-color-texti-contrast-rgb: 0, 0, 0;--ion-color-texti-shade: #7eaae0;--ion-color-texti-tint: #9ac7ff;--ion-color-darki: #ffffff;--ion-color-darki-rgb: 255, 255, 255;--ion-color-darki-contrast: #000000;--ion-color-darki-contrast-rgb: 0, 0, 0;--ion-color-darki-shade: #e0e0e0;--ion-color-darki-tint: #ffffff;--ion-color-primary: #8f49f8;--ion-color-primary-rgb: 143, 73, 248;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #7e40da;--ion-color-primary-tint: #9a5bf9}}.ion-color-texti{--ion-color-base: var(--ion-color-texti);--ion-color-base-rgb: var(--ion-color-texti-rgb);--ion-color-contrast: var(--ion-color-texti-contrast);--ion-color-contrast-rgb: var(--ion-color-texti-contrast-rgb);--ion-color-shade: var(--ion-color-texti-shade);--ion-color-tint: var(--ion-color-texti-tint)}.ion-color-darki{--ion-color-base: var(--ion-color-darki);--ion-color-base-rgb: var(--ion-color-darki-rgb);--ion-color-contrast: var(--ion-color-darki-contrast);--ion-color-contrast-rgb: var(--ion-color-darki-contrast-rgb);--ion-color-shade: var(--ion-color-darki-shade);--ion-color-tint: var(--ion-color-darki-tint)}ion-searchbar{--cancel-button-color: var(--ion-color-dark);--background: var(--ion-color-light);font-family:var(--ion-default-font),Arial,sans-serif}\n"] }]
         }], ctorParameters: () => [], propDecorators: { disabled: [{
                 type: Input
+            }], placeholder: [{
+                type: Input
+            }], cancelText: [{
+                type: Input
             }], filterEvent: [{
                 type: Output
             }], focusEvent: [{
@@ -7368,20 +7666,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  * @input props: InputMetadata - Configuration for the select input (form control, label, options, etc.)
  */
 class SearchSelectorComponent {
+    constructor() {
+        this.i18n = inject(I18nService);
+    }
     ngOnInit() {
         if (this.props?.withDefault || this.props?.value) {
             applyDefaultValueToControl(this.props);
         }
-        // Set modal header from props or use label as fallback
-        const headerText = this.props.modalHeader || this.props.label || 'Seleccionar opción';
+        // Set modal header from props or use label as fallback, then i18n default
+        const headerText = this.props.modalHeader || this.props.label || this.i18n.t('selectOption');
         this.customModalOptions = {
             header: headerText,
             breakpoints: [0, 0.6],
             initialBreakpoint: 0.6,
         };
-        // Set button texts from props or use defaults
-        this.cancelText = this.props.cancelText || 'Cancelar';
-        this.okText = this.props.okText || 'Aceptar';
+        // Set button texts from props or use i18n defaults
+        this.cancelText = this.props.cancelText || this.i18n.t('cancel');
+        this.okText = this.props.okText || this.i18n.t('ok');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SearchSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SearchSelectorComponent, isStandalone: true, selector: "val-select-input", inputs: { props: "props" }, ngImport: i0, template: `
@@ -7452,6 +7753,7 @@ class SelectSearchComponent {
         this.placeholder = 'Seleccione una opción';
         this.icon = inject(IconService);
         this.changeDetector = inject(ChangeDetectorRef);
+        this.i18n = inject(I18nService);
         this.searchTerm = '';
         this.filteredItems = [];
         this.selectedItems = [];
@@ -7459,6 +7761,18 @@ class SelectSearchComponent {
         this.previousOptions = [];
         this.isProcessingChanges = false;
     }
+    /** Get close button text */
+    getCloseText() {
+        return this.i18n.t('close');
+    }
+    /** Get no results text */
+    getNoResultsText() {
+        return this.i18n.t('noResults');
+    }
+    /** Get items selected text */
+    getItemsSelectedText(count) {
+        return `${count} ${this.i18n.t('itemsSelected')}`;
+    }
     ngOnInit() {
         this.applyDefaultValue();
         this.initializeItems();
@@ -7662,7 +7976,7 @@ class SelectSearchComponent {
                 this.displayValue = this.selectedItems[0][this.labelProperty];
             }
             else {
-                this.displayValue = `${this.selectedItems.length} elementos seleccionados`;
+                this.displayValue = this.getItemsSelectedText(this.selectedItems.length);
             }
         }
         else {
@@ -7721,7 +8035,7 @@ class SelectSearchComponent {
           <ion-toolbar>
             <ion-title>{{ label }}</ion-title>
             <ion-buttons slot="end">
-              <ion-button (click)="cancelModal()">Cerrar</ion-button>
+              <ion-button (click)="cancelModal()">{{ getCloseText() }}</ion-button>
             </ion-buttons>
           </ion-toolbar>
           <ion-toolbar>
@@ -7735,13 +8049,13 @@ class SelectSearchComponent {
               <ion-icon *ngIf="isItemSelected(item)" name="checkmark-outline" slot="end" color="primary"></ion-icon>
             </ion-item>
             <ion-item *ngIf="filteredItems.length === 0" lines="none">
-              <ion-label color="dark">No se encontraron resultados</ion-label>
+              <ion-label color="dark">{{ getNoResultsText() }}</ion-label>
             </ion-item>
           </ion-list>
         </ion-content>
       </ng-template>
     </ion-modal>
-  `, isInline: true, styles: ["ion-header{padding:8px 8px 0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: IonicModule }, { kind: "component", type: i2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2.IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2.IonInput, selector: "ion-input", inputs: ["autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearInputIcon", "clearOnEdit", "color", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "shape", "spellcheck", "step", "type", "value"] }, { kind: "component", type: i2.IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i2.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i2.IonModal, selector: "ion-modal" }, { kind: "directive", type: i2.TextValueAccessor, selector: "ion-input:not([type=number]),ion-input-otp[type=text],ion-textarea,ion-searchbar" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: SearchbarComponent, selector: "val-searchbar", inputs: ["disabled"], outputs: ["filterEvent", "focusEvent", "blurEvent"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
+  `, isInline: true, styles: ["ion-header{padding:8px 8px 0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: IonicModule }, { kind: "component", type: i2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2.IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2.IonInput, selector: "ion-input", inputs: ["autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearInputIcon", "clearOnEdit", "color", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "shape", "spellcheck", "step", "type", "value"] }, { kind: "component", type: i2.IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i2.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i2.IonModal, selector: "ion-modal" }, { kind: "directive", type: i2.TextValueAccessor, selector: "ion-input:not([type=number]),ion-input-otp[type=text],ion-textarea,ion-searchbar" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: SearchbarComponent, selector: "val-searchbar", inputs: ["disabled", "placeholder", "cancelText"], outputs: ["filterEvent", "focusEvent", "blurEvent"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SelectSearchComponent, decorators: [{
             type: Component,
@@ -7768,7 +8082,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
           <ion-toolbar>
             <ion-title>{{ label }}</ion-title>
             <ion-buttons slot="end">
-              <ion-button (click)="cancelModal()">Cerrar</ion-button>
+              <ion-button (click)="cancelModal()">{{ getCloseText() }}</ion-button>
             </ion-buttons>
           </ion-toolbar>
           <ion-toolbar>
@@ -7782,7 +8096,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
               <ion-icon *ngIf="isItemSelected(item)" name="checkmark-outline" slot="end" color="primary"></ion-icon>
             </ion-item>
             <ion-item *ngIf="filteredItems.length === 0" lines="none">
-              <ion-label color="dark">No se encontraron resultados</ion-label>
+              <ion-label color="dark">{{ getNoResultsText() }}</ion-label>
             </ion-item>
           </ion-list>
         </ion-content>
@@ -8009,6 +8323,7 @@ class CodeDisplayComponent {
     constructor(cdr) {
         this.cdr = cdr;
         this.toast = inject(ToastController);
+        this.i18n = inject(I18nService);
         this.selectedTab = 0;
     }
     ngOnChanges(changes) {
@@ -8036,7 +8351,7 @@ class CodeDisplayComponent {
         try {
             const code = this.props.tabs.length > 0 ? this.props.tabs[this.selectedTab]?.code : this.props.code;
             await Clipboard.write({ string: code || '' });
-            this.presentToast('¡Copiado al portapapeles!');
+            this.presentToast(this.i18n.t('copiedToClipboard'));
         }
         catch (error) {
             console.error('Error al copiar al portapapeles:', error);
@@ -10233,6 +10548,7 @@ class MultiSelectSearchComponent {
         this.placeholder = 'Seleccione opciones';
         this.icon = inject(IconService);
         this.changeDetector = inject(ChangeDetectorRef);
+        this.i18n = inject(I18nService);
         this.searchTerm = '';
         this.filteredItems = [];
         this.selectedItems = [];
@@ -10240,6 +10556,30 @@ class MultiSelectSearchComponent {
         this.previousOptions = [];
         this.isProcessingChanges = false;
     }
+    /** Get close button text */
+    getCloseText() {
+        return this.i18n.t('close');
+    }
+    /** Get no results text */
+    getNoResultsText() {
+        return this.i18n.t('noResults');
+    }
+    /** Get select all text */
+    getSelectAllText() {
+        return this.i18n.t('selectAll');
+    }
+    /** Get clear text */
+    getClearText() {
+        return this.i18n.t('clear');
+    }
+    /** Get apply text */
+    getApplyText() {
+        return this.i18n.t('apply');
+    }
+    /** Get items selected text */
+    getItemsSelectedText(count) {
+        return `${count} ${this.i18n.t('itemsSelected')}`;
+    }
     ngOnInit() {
         this.applyDefaultValue();
         this.initializeItems();
@@ -10452,7 +10792,7 @@ class MultiSelectSearchComponent {
             this.displayValue = this.selectedItems[0][this.labelProperty];
         }
         else {
-            this.displayValue = `${this.selectedItems.length} elementos seleccionados`;
+            this.displayValue = this.getItemsSelectedText(this.selectedItems.length);
         }
     }
     applyChanges() {
@@ -10509,7 +10849,7 @@ class MultiSelectSearchComponent {
           <ion-toolbar>
             <ion-title>{{ label }}</ion-title>
             <ion-buttons slot="end">
-              <ion-button (click)="cancelModal()">Cerrar</ion-button>
+              <ion-button (click)="cancelModal()">{{ getCloseText() }}</ion-button>
             </ion-buttons>
           </ion-toolbar>
           <ion-toolbar>
@@ -10519,22 +10859,22 @@ class MultiSelectSearchComponent {
         <ion-content>
           <!-- Action buttons for multi-select -->
           <div class="actions-container" style="padding: 16px; border-bottom: 1px solid var(--ion-color-light-shade);">
-            <ion-button 
-              fill="clear" 
-              size="small" 
+            <ion-button
+              fill="clear"
+              size="small"
               (click)="selectAll()"
               [disabled]="filteredItems.length === 0"
             >
-              Seleccionar todos
+              {{ getSelectAllText() }}
             </ion-button>
-            <ion-button 
-              fill="clear" 
-              size="small" 
-              color="medium" 
+            <ion-button
+              fill="clear"
+              size="small"
+              color="medium"
               (click)="clearAll()"
               [disabled]="selectedItems.length === 0"
             >
-              Limpiar
+              {{ getClearText() }}
             </ion-button>
           </div>
 
@@ -10547,20 +10887,20 @@ class MultiSelectSearchComponent {
               <ion-label>{{ item[labelProperty] }}</ion-label>
             </ion-item>
             <ion-item *ngIf="filteredItems.length === 0" lines="none">
-              <ion-label color="dark">No se encontraron resultados</ion-label>
+              <ion-label color="dark">{{ getNoResultsText() }}</ion-label>
             </ion-item>
           </ion-list>
         </ion-content>
         <ion-footer>
           <ion-toolbar>
             <ion-button expand="full" (click)="applyAndClose()">
-              Aplicar
+              {{ getApplyText() }}
             </ion-button>
           </ion-toolbar>
         </ion-footer>
       </ng-template>
     </ion-modal>
-  `, isInline: true, styles: ["ion-header{padding:8px 8px 0}.actions-container{display:flex;justify-content:space-between;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: IonicModule }, { kind: "component", type: i2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2.IonCheckbox, selector: "ion-checkbox", inputs: ["alignment", "checked", "color", "disabled", "errorText", "helperText", "indeterminate", "justify", "labelPlacement", "mode", "name", "required", "value"] }, { kind: "component", type: i2.IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2.IonInput, selector: "ion-input", inputs: ["autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearInputIcon", "clearOnEdit", "color", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "shape", "spellcheck", "step", "type", "value"] }, { kind: "component", type: i2.IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i2.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i2.IonModal, selector: "ion-modal" }, { kind: "directive", type: i2.BooleanValueAccessor, selector: "ion-checkbox,ion-toggle" }, { kind: "directive", type: i2.TextValueAccessor, selector: "ion-input:not([type=number]),ion-input-otp[type=text],ion-textarea,ion-searchbar" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: SearchbarComponent, selector: "val-searchbar", inputs: ["disabled"], outputs: ["filterEvent", "focusEvent", "blurEvent"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
+  `, isInline: true, styles: ["ion-header{padding:8px 8px 0}.actions-container{display:flex;justify-content:space-between;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: IonicModule }, { kind: "component", type: i2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2.IonCheckbox, selector: "ion-checkbox", inputs: ["alignment", "checked", "color", "disabled", "errorText", "helperText", "indeterminate", "justify", "labelPlacement", "mode", "name", "required", "value"] }, { kind: "component", type: i2.IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2.IonInput, selector: "ion-input", inputs: ["autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearInputIcon", "clearOnEdit", "color", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "shape", "spellcheck", "step", "type", "value"] }, { kind: "component", type: i2.IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i2.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i2.IonModal, selector: "ion-modal" }, { kind: "directive", type: i2.BooleanValueAccessor, selector: "ion-checkbox,ion-toggle" }, { kind: "directive", type: i2.TextValueAccessor, selector: "ion-input:not([type=number]),ion-input-otp[type=text],ion-textarea,ion-searchbar" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: SearchbarComponent, selector: "val-searchbar", inputs: ["disabled", "placeholder", "cancelText"], outputs: ["filterEvent", "focusEvent", "blurEvent"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MultiSelectSearchComponent, decorators: [{
             type: Component,
@@ -10587,7 +10927,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
           <ion-toolbar>
             <ion-title>{{ label }}</ion-title>
             <ion-buttons slot="end">
-              <ion-button (click)="cancelModal()">Cerrar</ion-button>
+              <ion-button (click)="cancelModal()">{{ getCloseText() }}</ion-button>
             </ion-buttons>
           </ion-toolbar>
           <ion-toolbar>
@@ -10597,22 +10937,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         <ion-content>
           <!-- Action buttons for multi-select -->
           <div class="actions-container" style="padding: 16px; border-bottom: 1px solid var(--ion-color-light-shade);">
-            <ion-button 
-              fill="clear" 
-              size="small" 
+            <ion-button
+              fill="clear"
+              size="small"
               (click)="selectAll()"
               [disabled]="filteredItems.length === 0"
             >
-              Seleccionar todos
+              {{ getSelectAllText() }}
             </ion-button>
-            <ion-button 
-              fill="clear" 
-              size="small" 
-              color="medium" 
+            <ion-button
+              fill="clear"
+              size="small"
+              color="medium"
               (click)="clearAll()"
               [disabled]="selectedItems.length === 0"
             >
-              Limpiar
+              {{ getClearText() }}
             </ion-button>
           </div>
 
@@ -10625,14 +10965,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
               <ion-label>{{ item[labelProperty] }}</ion-label>
             </ion-item>
             <ion-item *ngIf="filteredItems.length === 0" lines="none">
-              <ion-label color="dark">No se encontraron resultados</ion-label>
+              <ion-label color="dark">{{ getNoResultsText() }}</ion-label>
             </ion-item>
           </ion-list>
         </ion-content>
         <ion-footer>
           <ion-toolbar>
             <ion-button expand="full" (click)="applyAndClose()">
-              Aplicar
+              {{ getApplyText() }}
             </ion-button>
           </ion-toolbar>
         </ion-footer>
@@ -11700,8 +12040,32 @@ class DateRangeInputComponent {
         this.startDatetimeId = `start-datetime-${Math.random().toString(36).substr(2, 9)}`;
         this.endDatetimeId = `end-datetime-${Math.random().toString(36).substr(2, 9)}`;
         this.showDayCount = true;
+        this.i18n = inject(I18nService);
         this.valueSubscription = null;
     }
+    /** Get done button text from props or i18n */
+    getDoneText() {
+        return this.props.doneText || this.i18n.t('ok');
+    }
+    /** Get cancel button text from props or i18n */
+    getCancelText() {
+        return this.props.cancelText || this.i18n.t('cancel');
+    }
+    /** Get start date fallback label */
+    getStartDateFallback() {
+        return this.i18n.t('startDate', '_global') || 'Start date';
+    }
+    /** Get end date fallback label */
+    getEndDateFallback() {
+        return this.i18n.t('endDate', '_global') || 'End date';
+    }
+    /** Get day/days label based on count */
+    getDayLabel() {
+        if (this.dayCount === 1) {
+            return this.i18n.t('day', '_global') || 'day';
+        }
+        return this.i18n.t('days', '_global') || 'days';
+    }
     ngOnInit() {
         // Use provided controls or internal ones
         if (this.props.startControl) {
@@ -11874,11 +12238,11 @@ class DateRangeInputComponent {
                 [min]="getMinDate()"
                 [max]="getMaxStartDate()"
                 [showDefaultButtons]="true"
-                [doneText]="props.doneText || 'Aceptar'"
-                [cancelText]="props.cancelText || 'Cancelar'"
+                [doneText]="getDoneText()"
+                [cancelText]="getCancelText()"
                 (ionChange)="onStartDateChange($event)"
               >
-                <span slot="title">{{ getStartLabel() || 'Fecha inicio' }}</span>
+                <span slot="title">{{ getStartLabel() || getStartDateFallback() }}</span>
               </ion-datetime>
             </ng-template>
           </ion-modal>
@@ -11908,11 +12272,11 @@ class DateRangeInputComponent {
                 [min]="getMinEndDate()"
                 [max]="getMaxDate()"
                 [showDefaultButtons]="true"
-                [doneText]="props.doneText || 'Aceptar'"
-                [cancelText]="props.cancelText || 'Cancelar'"
+                [doneText]="getDoneText()"
+                [cancelText]="getCancelText()"
                 (ionChange)="onEndDateChange($event)"
               >
-                <span slot="title">{{ getEndLabel() || 'Fecha fin' }}</span>
+                <span slot="title">{{ getEndLabel() || getEndDateFallback() }}</span>
               </ion-datetime>
             </ng-template>
           </ion-modal>
@@ -11921,7 +12285,7 @@ class DateRangeInputComponent {
 
       @if (showDayCount && dayCount !== null) {
         <div class="day-count">
-          {{ dayCount }} {{ dayCount === 1 ? 'día' : 'días' }}
+          {{ dayCount }} {{ getDayLabel() }}
         </div>
       }
 
@@ -11972,11 +12336,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 [min]="getMinDate()"
                 [max]="getMaxStartDate()"
                 [showDefaultButtons]="true"
-                [doneText]="props.doneText || 'Aceptar'"
-                [cancelText]="props.cancelText || 'Cancelar'"
+                [doneText]="getDoneText()"
+                [cancelText]="getCancelText()"
                 (ionChange)="onStartDateChange($event)"
               >
-                <span slot="title">{{ getStartLabel() || 'Fecha inicio' }}</span>
+                <span slot="title">{{ getStartLabel() || getStartDateFallback() }}</span>
               </ion-datetime>
             </ng-template>
           </ion-modal>
@@ -12006,11 +12370,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 [min]="getMinEndDate()"
                 [max]="getMaxDate()"
                 [showDefaultButtons]="true"
-                [doneText]="props.doneText || 'Aceptar'"
-                [cancelText]="props.cancelText || 'Cancelar'"
+                [doneText]="getDoneText()"
+                [cancelText]="getCancelText()"
                 (ionChange)="onEndDateChange($event)"
               >
-                <span slot="title">{{ getEndLabel() || 'Fecha fin' }}</span>
+                <span slot="title">{{ getEndLabel() || getEndDateFallback() }}</span>
               </ion-datetime>
             </ng-template>
           </ion-modal>
@@ -12019,7 +12383,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
 
       @if (showDayCount && dayCount !== null) {
         <div class="day-count">
-          {{ dayCount }} {{ dayCount === 1 ? 'día' : 'días' }}
+          {{ dayCount }} {{ getDayLabel() }}
         </div>
       }
 
@@ -14186,8 +14550,25 @@ class ParticipantCardComponent {
     constructor() {
         this.cardClick = new EventEmitter();
         this.actionClick = new EventEmitter();
+        this.i18n = inject(I18nService);
         this.showAllTickets = false;
     }
+    /** Get winner badge text */
+    getWinnerText() {
+        return this.i18n.t('winner');
+    }
+    /** Get tickets count text */
+    getTicketsCountText(count) {
+        return `${count} ${count !== 1 ? this.i18n.t('tickets') : this.i18n.t('ticket')}`;
+    }
+    /** Get more tickets text */
+    getMoreText(count) {
+        return `+${count} ${this.i18n.t('more')}`;
+    }
+    /** Get notes label */
+    getNotesLabel() {
+        return this.i18n.t('notes');
+    }
     get ticketNumbers() {
         return this.props.participant.tickets || [];
     }
@@ -14312,7 +14693,7 @@ class ParticipantCardComponent {
       @if (props.participant.isWinner && props.highlightWinner !== false) {
         <div class="winner-badge">
           <ion-icon name="trophy-outline"></ion-icon>
-          <span>Ganador</span>
+          <span>{{ getWinnerText() }}</span>
         </div>
       }
 
@@ -14397,7 +14778,7 @@ class ParticipantCardComponent {
         <div class="tickets-section">
           <div class="tickets-header">
             <ion-icon name="ticket-outline"></ion-icon>
-            <span>{{ ticketNumbers.length }} boleto{{ ticketNumbers.length !== 1 ? 's' : '' }}</span>
+            <span>{{ getTicketsCountText(ticketNumbers.length) }}</span>
           </div>
 
           <div class="tickets-list">
@@ -14420,7 +14801,7 @@ class ParticipantCardComponent {
                 class="more-tickets"
                 (click)="toggleShowAllTickets($event)"
               >
-                +{{ hiddenTicketsCount }} más
+                {{ getMoreText(hiddenTicketsCount) }}
               </ion-chip>
             }
           </div>
@@ -14430,7 +14811,7 @@ class ParticipantCardComponent {
       <!-- Notes (admin variant) -->
       @if (props.variant === 'admin' && props.participant.notes) {
         <div class="notes-section">
-          <span class="notes-label">Notas:</span>
+          <span class="notes-label">{{ getNotesLabel() }}</span>
           <p class="notes-text">{{ props.participant.notes }}</p>
         </div>
       }
@@ -14458,7 +14839,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
       @if (props.participant.isWinner && props.highlightWinner !== false) {
         <div class="winner-badge">
           <ion-icon name="trophy-outline"></ion-icon>
-          <span>Ganador</span>
+          <span>{{ getWinnerText() }}</span>
         </div>
       }
 
@@ -14543,7 +14924,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         <div class="tickets-section">
           <div class="tickets-header">
             <ion-icon name="ticket-outline"></ion-icon>
-            <span>{{ ticketNumbers.length }} boleto{{ ticketNumbers.length !== 1 ? 's' : '' }}</span>
+            <span>{{ getTicketsCountText(ticketNumbers.length) }}</span>
           </div>
 
           <div class="tickets-list">
@@ -14566,7 +14947,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 class="more-tickets"
                 (click)="toggleShowAllTickets($event)"
               >
-                +{{ hiddenTicketsCount }} más
+                {{ getMoreText(hiddenTicketsCount) }}
               </ion-chip>
             }
           </div>
@@ -14576,7 +14957,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
       <!-- Notes (admin variant) -->
       @if (props.variant === 'admin' && props.participant.notes) {
         <div class="notes-section">
-          <span class="notes-label">Notas:</span>
+          <span class="notes-label">{{ getNotesLabel() }}</span>
           <p class="notes-text">{{ props.participant.notes }}</p>
         </div>
       }
@@ -18706,6 +19087,7 @@ class DataTableComponent {
         /** Cached visible columns for performance */
         this._visibleColumns = [];
         this.cdr = inject(ChangeDetectorRef);
+        this.i18n = inject(I18nService);
     }
     ngOnInit() {
         this.initializeState();
@@ -18785,7 +19167,40 @@ class DataTableComponent {
         return count;
     }
     get emptyState() {
-        return this.props.emptyState || DEFAULT_EMPTY_STATE;
+        const defaultEmptyState = {
+            icon: 'document-outline',
+            title: this.i18n.t('noData'),
+            description: this.i18n.t('noRecordsFound'),
+        };
+        return this.props.emptyState || defaultEmptyState;
+    }
+    /** Get actions column label */
+    getActionsLabel() {
+        return this.props.actionsLabel || this.i18n.t('actions');
+    }
+    /** Get pagination info text */
+    getPaginationInfoText() {
+        return `${this.i18n.t('showing')} ${this.paginationStart}-${this.paginationEnd} ${this.i18n.t('of')} ${this.props.pagination?.total}`;
+    }
+    /** Get per page text */
+    getPerPageText(size) {
+        return `${size} ${this.i18n.t('perPage')}`;
+    }
+    /** Get first page aria label */
+    getFirstPageLabel() {
+        return this.i18n.t('firstPage');
+    }
+    /** Get previous page aria label */
+    getPreviousPageLabel() {
+        return this.i18n.t('previousPage');
+    }
+    /** Get next page aria label */
+    getNextPageLabel() {
+        return this.i18n.t('nextPage');
+    }
+    /** Get last page aria label */
+    getLastPageLabel() {
+        return this.i18n.t('lastPage');
     }
     get pageSizeOptions() {
         return this.props.pagination?.pageSizeOptions || DEFAULT_PAGE_SIZE_OPTIONS;
@@ -19073,7 +19488,7 @@ class DataTableComponent {
               <!-- Actions column -->
               @if (props.actionsTemplate) {
                 <th class="actions-cell" [style.width]="props.actionsWidth || '100px'">
-                  {{ props.actionsLabel || 'Acciones' }}
+                  {{ getActionsLabel() }}
                 </th>
               }
             </tr>
@@ -19244,7 +19659,7 @@ class DataTableComponent {
         <div class="pagination-container">
           <div class="pagination-info">
             <span>
-              Mostrando {{ paginationStart }}-{{ paginationEnd }} de {{ props.pagination.total }}
+              {{ getPaginationInfoText() }}
             </span>
 
             @if (pageSizeOptions.length > 1) {
@@ -19255,7 +19670,7 @@ class DataTableComponent {
                 class="page-size-select"
               >
                 @for (size of pageSizeOptions; track size) {
-                  <ion-select-option [value]="size">{{ size }} por página</ion-select-option>
+                  <ion-select-option [value]="size">{{ getPerPageText(size) }}</ion-select-option>
                 }
               </ion-select>
             }
@@ -19267,7 +19682,7 @@ class DataTableComponent {
               size="small"
               [disabled]="props.pagination.page === 0"
               (click)="goToPage(0)"
-              aria-label="Primera página"
+              [attr.aria-label]="getFirstPageLabel()"
             >
               <ion-icon slot="icon-only" name="chevron-back-outline"></ion-icon>
               <ion-icon slot="icon-only" name="chevron-back-outline" style="margin-left: -12px"></ion-icon>
@@ -19278,7 +19693,7 @@ class DataTableComponent {
               size="small"
               [disabled]="props.pagination.page === 0"
               (click)="goToPage(props.pagination.page - 1)"
-              aria-label="Página anterior"
+              [attr.aria-label]="getPreviousPageLabel()"
             >
               <ion-icon slot="icon-only" name="chevron-back-outline"></ion-icon>
             </ion-button>
@@ -19292,7 +19707,7 @@ class DataTableComponent {
               size="small"
               [disabled]="props.pagination.page >= totalPages - 1"
               (click)="goToPage(props.pagination.page + 1)"
-              aria-label="Página siguiente"
+              [attr.aria-label]="getNextPageLabel()"
             >
               <ion-icon slot="icon-only" name="chevron-forward-outline"></ion-icon>
             </ion-button>
@@ -19302,7 +19717,7 @@ class DataTableComponent {
               size="small"
               [disabled]="props.pagination.page >= totalPages - 1"
               (click)="goToPage(totalPages - 1)"
-              aria-label="Última página"
+              [attr.aria-label]="getLastPageLabel()"
             >
               <ion-icon slot="icon-only" name="chevron-forward-outline"></ion-icon>
               <ion-icon slot="icon-only" name="chevron-forward-outline" style="margin-left: -12px"></ion-icon>
@@ -19427,7 +19842,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
               <!-- Actions column -->
               @if (props.actionsTemplate) {
                 <th class="actions-cell" [style.width]="props.actionsWidth || '100px'">
-                  {{ props.actionsLabel || 'Acciones' }}
+                  {{ getActionsLabel() }}
                 </th>
               }
             </tr>
@@ -19598,7 +20013,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         <div class="pagination-container">
           <div class="pagination-info">
             <span>
-              Mostrando {{ paginationStart }}-{{ paginationEnd }} de {{ props.pagination.total }}
+              {{ getPaginationInfoText() }}
             </span>
 
             @if (pageSizeOptions.length > 1) {
@@ -19609,7 +20024,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 class="page-size-select"
               >
                 @for (size of pageSizeOptions; track size) {
-                  <ion-select-option [value]="size">{{ size }} por página</ion-select-option>
+                  <ion-select-option [value]="size">{{ getPerPageText(size) }}</ion-select-option>
                 }
               </ion-select>
             }
@@ -19621,7 +20036,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
               size="small"
               [disabled]="props.pagination.page === 0"
               (click)="goToPage(0)"
-              aria-label="Primera página"
+              [attr.aria-label]="getFirstPageLabel()"
             >
               <ion-icon slot="icon-only" name="chevron-back-outline"></ion-icon>
               <ion-icon slot="icon-only" name="chevron-back-outline" style="margin-left: -12px"></ion-icon>
@@ -19632,7 +20047,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
               size="small"
               [disabled]="props.pagination.page === 0"
               (click)="goToPage(props.pagination.page - 1)"
-              aria-label="Página anterior"
+              [attr.aria-label]="getPreviousPageLabel()"
             >
               <ion-icon slot="icon-only" name="chevron-back-outline"></ion-icon>
             </ion-button>
@@ -19646,7 +20061,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
               size="small"
               [disabled]="props.pagination.page >= totalPages - 1"
               (click)="goToPage(props.pagination.page + 1)"
-              aria-label="Página siguiente"
+              [attr.aria-label]="getNextPageLabel()"
             >
               <ion-icon slot="icon-only" name="chevron-forward-outline"></ion-icon>
             </ion-button>
@@ -19656,7 +20071,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
               size="small"
               [disabled]="props.pagination.page >= totalPages - 1"
               (click)="goToPage(totalPages - 1)"
-              aria-label="Última página"
+              [attr.aria-label]="getLastPageLabel()"
             >
               <ion-icon slot="icon-only" name="chevron-forward-outline"></ion-icon>
               <ion-icon slot="icon-only" name="chevron-forward-outline" style="margin-left: -12px"></ion-icon>
@@ -28958,6 +29373,22 @@ class AdSlotComponent {
             }
             return true;
         });
+        /**
+         * Indica si debe mostrar placeholder en vez de ad real.
+         * Activo en localhost o con Publisher ID placeholder.
+         */
+        this.isPlaceholderMode = computed(() => {
+            if (!isPlatformBrowser(this.platformId)) {
+                return false;
+            }
+            const adClient = this.adsService.adClient();
+            const isLocalhost = window.location.hostname === 'localhost' ||
+                window.location.hostname === '127.0.0.1';
+            const isPlaceholderClient = !adClient ||
+                adClient === 'ca-pub-0000000000000000' ||
+                adClient.includes('0000000000');
+            return isLocalhost || isPlaceholderClient;
+        });
     }
     // ===========================================================================
     // LIFECYCLE
@@ -28972,6 +29403,15 @@ class AdSlotComponent {
         if (!this.shouldRender() || this.adInitialized) {
             return;
         }
+        // En modo placeholder, solo marcar como rendered
+        if (this.isPlaceholderMode()) {
+            this._state.set('rendered');
+            this.adInitialized = true;
+            if (this.adsService.isDebugMode()) {
+                console.log(`[ValtechAds] Ad slot '${this.slotId}' in PLACEHOLDER mode (localhost or invalid adClient)`);
+            }
+            return;
+        }
         await this.initializeAd();
     }
     ngOnDestroy() {
@@ -29014,37 +29454,53 @@ class AdSlotComponent {
         [class.val-ad-slot--rendered]="state() === 'rendered'"
         [class.val-ad-slot--empty]="state() === 'empty'"
         [class.val-ad-slot--hidden]="state() === 'hidden'"
+        [class.val-ad-slot--placeholder]="isPlaceholderMode()"
         [class]="cssClass"
         [style.min-height]="minHeight"
       >
-        <!-- Skeleton mientras carga -->
-        @if (showSkeleton && state() === 'loading') {
-          <div
-            class="val-ad-slot__skeleton"
-            [style.height]="minHeight"
-          ></div>
-        }
-
-        <!-- AdSense ins element -->
-        <ins
-          class="adsbygoogle val-ad-slot__container"
-          [class.val-ad-slot__container--hidden]="state() === 'loading' && showSkeleton"
-          [style.display]="'block'"
-          [attr.data-ad-client]="adsService.adClient()"
-          [attr.data-ad-slot]="adSlot || null"
-          [attr.data-ad-format]="format"
-          [attr.data-full-width-responsive]="fullWidth ? 'true' : null"
-        ></ins>
+        <!-- Placeholder mode (desarrollo local) -->
+        @if (isPlaceholderMode()) {
+          <div class="val-ad-slot__placeholder" [style.height]="minHeight">
+            <div class="val-ad-slot__placeholder-content">
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
+                <line x1="3" y1="9" x2="21" y2="9"/>
+                <line x1="9" y1="21" x2="9" y2="9"/>
+              </svg>
+              <span class="val-ad-slot__placeholder-label">Ad Placeholder</span>
+              <span class="val-ad-slot__placeholder-info">{{ slotId }} | {{ format }}</span>
+            </div>
+          </div>
+        } @else {
+          <!-- Skeleton mientras carga -->
+          @if (showSkeleton && state() === 'loading') {
+            <div
+              class="val-ad-slot__skeleton"
+              [style.height]="minHeight"
+            ></div>
+          }
+
+          <!-- AdSense ins element -->
+          <ins
+            class="adsbygoogle val-ad-slot__container"
+            [class.val-ad-slot__container--hidden]="state() === 'loading' && showSkeleton"
+            [style.display]="'block'"
+            [attr.data-ad-client]="adsService.adClient()"
+            [attr.data-ad-slot]="adSlot || null"
+            [attr.data-ad-format]="format"
+            [attr.data-full-width-responsive]="fullWidth ? 'true' : null"
+          ></ins>
+        }
 
         <!-- Debug info -->
         @if (adsService.isDebugMode()) {
           <div class="val-ad-slot__debug">
-            <small>{{ slotId }} | {{ format }} | {{ state() }}</small>
+            <small>{{ slotId }} | {{ format }} | {{ state() }}{{ isPlaceholderMode() ? ' | PLACEHOLDER' : '' }}</small>
           </div>
         }
       </div>
     }
-  `, isInline: true, styles: [".val-ad-slot{position:relative;display:flex;justify-content:center;align-items:center;overflow:hidden;width:100%}.val-ad-slot--loading{background-color:var(--ion-color-light, #f4f4f4)}.val-ad-slot--empty,.val-ad-slot--hidden{display:none!important}.val-ad-slot__skeleton{width:100%;background:linear-gradient(90deg,var(--ion-color-light, #f4f4f4) 25%,var(--ion-color-light-shade, #e0e0e0) 50%,var(--ion-color-light, #f4f4f4) 75%);background-size:200% 100%;animation:skeleton-loading 1.5s infinite;border-radius:4px}.val-ad-slot__container{width:100%}.val-ad-slot__container--hidden{visibility:hidden;position:absolute}.val-ad-slot__debug{position:absolute;bottom:0;left:0;background:#000000b3;color:#fff;padding:2px 6px;font-size:10px;z-index:1000;font-family:monospace}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [".val-ad-slot{position:relative;display:flex;justify-content:center;align-items:center;overflow:hidden;width:100%}.val-ad-slot--loading{background-color:var(--ion-color-light, #f4f4f4)}.val-ad-slot--empty,.val-ad-slot--hidden{display:none!important}.val-ad-slot__skeleton{width:100%;background:linear-gradient(90deg,var(--ion-color-light, #f4f4f4) 25%,var(--ion-color-light-shade, #e0e0e0) 50%,var(--ion-color-light, #f4f4f4) 75%);background-size:200% 100%;animation:skeleton-loading 1.5s infinite;border-radius:4px}.val-ad-slot__container{width:100%}.val-ad-slot__container--hidden{visibility:hidden;position:absolute}.val-ad-slot__placeholder{width:100%;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;border:2px dashed rgba(255,255,255,.4)}.val-ad-slot__placeholder-content{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px;text-align:center}.val-ad-slot__placeholder-content svg{opacity:.8}.val-ad-slot__placeholder-label{font-weight:600;font-size:14px;letter-spacing:.5px}.val-ad-slot__placeholder-info{font-size:11px;opacity:.7;font-family:monospace}.val-ad-slot__debug{position:absolute;bottom:0;left:0;background:#000000b3;color:#fff;padding:2px 6px;font-size:10px;z-index:1000;font-family:monospace}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AdSlotComponent, decorators: [{
             type: Component,
@@ -29056,37 +29512,53 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         [class.val-ad-slot--rendered]="state() === 'rendered'"
         [class.val-ad-slot--empty]="state() === 'empty'"
         [class.val-ad-slot--hidden]="state() === 'hidden'"
+        [class.val-ad-slot--placeholder]="isPlaceholderMode()"
         [class]="cssClass"
         [style.min-height]="minHeight"
       >
-        <!-- Skeleton mientras carga -->
-        @if (showSkeleton && state() === 'loading') {
-          <div
-            class="val-ad-slot__skeleton"
-            [style.height]="minHeight"
-          ></div>
-        }
-
-        <!-- AdSense ins element -->
-        <ins
-          class="adsbygoogle val-ad-slot__container"
-          [class.val-ad-slot__container--hidden]="state() === 'loading' && showSkeleton"
-          [style.display]="'block'"
-          [attr.data-ad-client]="adsService.adClient()"
-          [attr.data-ad-slot]="adSlot || null"
-          [attr.data-ad-format]="format"
-          [attr.data-full-width-responsive]="fullWidth ? 'true' : null"
-        ></ins>
+        <!-- Placeholder mode (desarrollo local) -->
+        @if (isPlaceholderMode()) {
+          <div class="val-ad-slot__placeholder" [style.height]="minHeight">
+            <div class="val-ad-slot__placeholder-content">
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
+                <line x1="3" y1="9" x2="21" y2="9"/>
+                <line x1="9" y1="21" x2="9" y2="9"/>
+              </svg>
+              <span class="val-ad-slot__placeholder-label">Ad Placeholder</span>
+              <span class="val-ad-slot__placeholder-info">{{ slotId }} | {{ format }}</span>
+            </div>
+          </div>
+        } @else {
+          <!-- Skeleton mientras carga -->
+          @if (showSkeleton && state() === 'loading') {
+            <div
+              class="val-ad-slot__skeleton"
+              [style.height]="minHeight"
+            ></div>
+          }
+
+          <!-- AdSense ins element -->
+          <ins
+            class="adsbygoogle val-ad-slot__container"
+            [class.val-ad-slot__container--hidden]="state() === 'loading' && showSkeleton"
+            [style.display]="'block'"
+            [attr.data-ad-client]="adsService.adClient()"
+            [attr.data-ad-slot]="adSlot || null"
+            [attr.data-ad-format]="format"
+            [attr.data-full-width-responsive]="fullWidth ? 'true' : null"
+          ></ins>
+        }
 
         <!-- Debug info -->
         @if (adsService.isDebugMode()) {
           <div class="val-ad-slot__debug">
-            <small>{{ slotId }} | {{ format }} | {{ state() }}</small>
+            <small>{{ slotId }} | {{ format }} | {{ state() }}{{ isPlaceholderMode() ? ' | PLACEHOLDER' : '' }}</small>
           </div>
         }
       </div>
     }
-  `, styles: [".val-ad-slot{position:relative;display:flex;justify-content:center;align-items:center;overflow:hidden;width:100%}.val-ad-slot--loading{background-color:var(--ion-color-light, #f4f4f4)}.val-ad-slot--empty,.val-ad-slot--hidden{display:none!important}.val-ad-slot__skeleton{width:100%;background:linear-gradient(90deg,var(--ion-color-light, #f4f4f4) 25%,var(--ion-color-light-shade, #e0e0e0) 50%,var(--ion-color-light, #f4f4f4) 75%);background-size:200% 100%;animation:skeleton-loading 1.5s infinite;border-radius:4px}.val-ad-slot__container{width:100%}.val-ad-slot__container--hidden{visibility:hidden;position:absolute}.val-ad-slot__debug{position:absolute;bottom:0;left:0;background:#000000b3;color:#fff;padding:2px 6px;font-size:10px;z-index:1000;font-family:monospace}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}\n"] }]
+  `, styles: [".val-ad-slot{position:relative;display:flex;justify-content:center;align-items:center;overflow:hidden;width:100%}.val-ad-slot--loading{background-color:var(--ion-color-light, #f4f4f4)}.val-ad-slot--empty,.val-ad-slot--hidden{display:none!important}.val-ad-slot__skeleton{width:100%;background:linear-gradient(90deg,var(--ion-color-light, #f4f4f4) 25%,var(--ion-color-light-shade, #e0e0e0) 50%,var(--ion-color-light, #f4f4f4) 75%);background-size:200% 100%;animation:skeleton-loading 1.5s infinite;border-radius:4px}.val-ad-slot__container{width:100%}.val-ad-slot__container--hidden{visibility:hidden;position:absolute}.val-ad-slot__placeholder{width:100%;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;border:2px dashed rgba(255,255,255,.4)}.val-ad-slot__placeholder-content{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px;text-align:center}.val-ad-slot__placeholder-content svg{opacity:.8}.val-ad-slot__placeholder-label{font-weight:600;font-size:14px;letter-spacing:.5px}.val-ad-slot__placeholder-info{font-size:11px;opacity:.7;font-family:monospace}.val-ad-slot__debug{position:absolute;bottom:0;left:0;background:#000000b3;color:#fff;padding:2px 6px;font-size:10px;z-index:1000;font-family:monospace}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}\n"] }]
         }], propDecorators: { slotId: [{
                 type: Input,
                 args: [{ required: true }]
@@ -29112,5 +29584,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AD_SIZE_MAP, ARTICLE_SPACING, AccordionComponent, ActionHeaderComponent, ActionType, AdSlotComponent, AdsLoaderService, AdsService, AlertBoxComponent, AnalyticsErrorHandler, AnalyticsRouterTracker, AnalyticsService, 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_ADS_CONFIG, 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, OAuthCallbackComponent, OAuthService, 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_ADS_CONFIG, 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, provideValtechAds, provideValtechAuth, provideValtechAuthInterceptor, provideValtechFirebase, provideValtechI18n, provideValtechPresets, query, replaceSpecialChars, resolveColor, resolveInputDefaultValue, roleGuard, storagePaths, superAdminGuard };
+export { AD_SIZE_MAP, ARTICLE_SPACING, AccordionComponent, ActionHeaderComponent, ActionType, AdSlotComponent, AdsLoaderService, AdsService, AlertBoxComponent, AnalyticsErrorHandler, AnalyticsRouterTracker, AnalyticsService, 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_ADS_CONFIG, 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, OAuthCallbackComponent, OAuthService, 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_ADS_CONFIG, VALTECH_AUTH_CONFIG, VALTECH_DEFAULT_CONTENT, 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, provideValtechAds, provideValtechAuth, provideValtechAuthInterceptor, provideValtechFirebase, provideValtechI18n, provideValtechPresets, query, replaceSpecialChars, resolveColor, resolveInputDefaultValue, roleGuard, storagePaths, superAdminGuard };
 //# sourceMappingURL=valtech-components.mjs.map