valtech-components 2.0.302 → 2.0.304

package/fesm2022/valtech-components.mjs

@@ -5,7 +5,7 @@ import * as i1 from '@angular/common';
 import { CommonModule, NgStyle, AsyncPipe, NgFor, NgClass } from '@angular/common';
 import { addIcons } from 'ionicons';
 import { addOutline, addCircleOutline, alertOutline, alertCircleOutline, arrowBackOutline, arrowForwardOutline, arrowDownOutline, checkmarkCircleOutline, ellipsisHorizontalOutline, notificationsOutline, openOutline, closeOutline, chatbubblesOutline, shareOutline, heart, heartOutline, homeOutline, eyeOffOutline, eyeOutline, scanOutline, chevronDownOutline, chevronForwardOutline, checkmarkOutline, clipboardOutline, copyOutline, filterOutline, locationOutline, calendarOutline, businessOutline, logoTwitter, logoInstagram, logoLinkedin, logoYoutube, logoTiktok, logoFacebook, createOutline, trashOutline, playOutline, refreshOutline, documentTextOutline, lockClosedOutline, informationCircleOutline, logoNpm, chevronDown, language, globe, chevronBackOutline } from 'ionicons/icons';
-import { map, BehaviorSubject, tap, distinctUntilChanged, shareReplay, Subscription, of, combineLatest } from 'rxjs';
+import { map, BehaviorSubject, distinctUntilChanged, shareReplay, Subscription, of, combineLatest } from 'rxjs';
 import { Router, RouterLink } from '@angular/router';
 import { Browser } from '@capacitor/browser';
 import * as i1$1 from '@angular/platform-browser';
@@ -472,16 +472,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
 function fromContent(langService, config) {
     // Use _global as default className if not provided
     const finalClassName = config.className || '_global';
-    console.log(`fromContent: Creating observable for ${finalClassName}.${config.key}`);
     const contentObservable = langService.getContent(finalClassName, config.key, config.fallback);
     // If interpolation is provided, apply it
     if (config.interpolation) {
-        console.log(`fromContent: Applying interpolation for ${finalClassName}.${config.key}`, config.interpolation);
-        return contentObservable.pipe(map(content => {
-            const interpolated = interpolateContent(content, config.interpolation);
-            console.log(`fromContent: Interpolated result for ${finalClassName}.${config.key}: "${interpolated}"`);
-            return interpolated;
-        }));
+        return contentObservable.pipe(map(content => interpolateContent(content, config.interpolation)));
     }
     return contentObservable;
 }
@@ -838,8 +832,7 @@ class LangService {
      * Use this to subscribe to language changes in components.
      */
     get currentLang$() {
-        console.log('LangService.currentLang$: Creating observable');
-        return this.selectedLang.asObservable().pipe(tap(lang => console.log(`LangService.currentLang$: Emitting language: ${lang}`)), distinctUntilChanged(), shareReplay(1) // Ensure new subscribers get the current value
+        return this.selectedLang.asObservable().pipe(distinctUntilChanged(), shareReplay(1) // Ensure new subscribers get the current value
         );
     }
     /**
@@ -913,16 +906,12 @@ class LangService {
      * @returns Observable that emits the text string whenever language changes
      */
     getContent(className, key, fallback) {
-        console.log(`LangService.getContent: Creating observable for ${className}.${key}`);
         return this.currentLang$.pipe(map(lang => {
-            console.log(`LangService.getContent: Language changed to ${lang} for ${className}.${key}`);
             const result = this.getBestAvailableContent(className, key, lang);
             if (result.shouldWarn && result.actualLang !== lang) {
                 console.warn(`LangService: Content "${className}.${key}" not available in "${lang}".`, `Using "${result.actualLang}" instead. Available languages:`, this.availableLanguages);
             }
-            const finalResult = result.content || fallback || `[${className}.${key}]`;
-            console.log(`LangService.getContent: Returning "${finalResult}" for ${className}.${key}`);
-            return finalResult;
+            return result.content || fallback || `[${className}.${key}]`;
         }), distinctUntilChanged());
     }
     /**
@@ -1350,15 +1339,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
  *
  * A customizable button supporting icons, loading state, navigation, and reactive content.
  * Supports both static text and reactive content from the content service.
+ * Follows the same content pattern as val-text for consistency.
  *
- * @example
- * // Static text
- * <val-button [props]="{ text: 'Save', color: 'primary', icon: { name: 'save', slot: 'start' } }" (onClick)="handler()"></val-button>
+ * @example Static text:
+ * <val-button [props]="{
+ *   text: 'Save',
+ *   color: 'primary',
+ *   type: 'button',
+ *   state: 'ENABLED',
+ *   icon: { name: 'save', slot: 'start' }
+ * }" (onClick)="handler()"></val-button>
  *
- * // Reactive content
- * <val-button [props]="{ textConfig: { key: 'save' }, color: 'primary', icon: { name: 'save', slot: 'start' } }" (onClick)="handler()"></val-button>
+ * @example Reactive content:
+ * <val-button [props]="{
+ *   contentKey: 'save',
+ *   contentClass: 'MyComponent',
+ *   contentFallback: 'Save',
+ *   color: 'primary',
+ *   type: 'button',
+ *   state: 'ENABLED',
+ *   icon: { name: 'save', slot: 'start' }
+ * }" (onClick)="handler()"></val-button>
+ *
+ * @example Reactive content with interpolation:
+ * <val-button [props]="{
+ *   contentKey: 'saveCount',
+ *   contentClass: 'MyComponent',
+ *   contentInterpolation: { count: 5 },
+ *   contentFallback: 'Save Items',
+ *   color: 'primary',
+ *   type: 'button',
+ *   state: 'ENABLED'
+ * }" (onClick)="handler()"></val-button>
  *
- * @input props: ButtonMetadata - Configuration for the button (text/textConfig, color, icon, state, etc.)
+ * @input props: ButtonMetadata - Configuration for the button (text/content, color, icon, state, etc.)
  * @output onClick - Emits when the button is clicked
  */
 class ButtonComponent {
@@ -1374,29 +1388,46 @@ class ButtonComponent {
         this.onClick = new EventEmitter();
     }
     ngOnInit() {
-        this.initializeDisplayText();
+        this.setupDisplayText();
     }
     ngOnDestroy() {
         this.subscriptions.unsubscribe();
     }
-    initializeDisplayText() {
-        // Static text takes precedence
-        if (this.props.text !== undefined) {
+    /**
+     * Set up the text content observable based on the props configuration.
+     * Priority: static text > reactive content with interpolation > reactive content
+     * This follows the same pattern as val-text component.
+     */
+    setupDisplayText() {
+        if (this.props.text) {
+            // Static text takes precedence
             this.displayText$ = of(this.props.text);
-            return;
         }
-        // Use reactive content if configured
-        if (this.props.textConfig) {
-            this.displayText$ = this.contentService.fromContent({
-                className: this.props.textConfig.className || '_global',
-                key: this.props.textConfig.key,
-                fallback: this.props.textConfig.fallback || this.props.textConfig.key,
-                interpolation: this.props.textConfig.interpolation,
-            });
-            return;
+        else if (this.props.contentKey && this.props.contentClass) {
+            // Reactive content from language service
+            if (this.props.contentInterpolation) {
+                // With interpolation
+                this.displayText$ = this.contentService.fromContentWithInterpolation({
+                    className: this.props.contentClass,
+                    key: this.props.contentKey,
+                    fallback: this.props.contentFallback,
+                    interpolation: this.props.contentInterpolation,
+                });
+            }
+            else {
+                // Simple reactive content
+                this.displayText$ = this.contentService.fromContent({
+                    className: this.props.contentClass,
+                    key: this.props.contentKey,
+                    fallback: this.props.contentFallback,
+                });
+            }
+        }
+        else {
+            // Fallback to empty string if no valid content configuration
+            console.warn('val-button: No valid content configuration provided. Use either "text" for static text or "contentKey" + "contentClass" for reactive content.');
+            this.displayText$ = of(this.props.contentFallback || '');
         }
-        // No content configured - use empty string
-        this.displayText$ = of('');
     }
     clickHandler() {
         if (this.props.state === this.states.DISABLED) {
@@ -1460,6 +1491,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
             }], onClick: [{
                 type: Output
             }] } });
+/**
+ * Helper function to create reactive button props from content configuration.
+ * This provides a convenient way to create val-button props with reactive content.
+ * Follows the same pattern as createTextProps for consistency.
+ *
+ * @param contentConfig - Content configuration
+ * @param styleConfig - Optional style and behavior configuration
+ * @returns ButtonMetadata with content properties set
+ *
+ * @example
+ * ```typescript
+ * // In component
+ * saveButtonProps: ButtonMetadata = createButtonProps({
+ *   contentKey: 'save',
+ *   contentClass: 'MyComponent'
+ * }, {
+ *   color: 'primary',
+ *   icon: { name: 'save', slot: 'start' }
+ * });
+ * ```
+ */
+function createButtonProps(contentConfig, styleConfig = {}) {
+    return {
+        contentKey: contentConfig.contentKey,
+        contentClass: contentConfig.contentClass,
+        contentFallback: contentConfig.contentFallback,
+        contentInterpolation: contentConfig.contentInterpolation,
+        color: styleConfig.color || 'primary',
+        type: styleConfig.type || 'button',
+        state: styleConfig.state || ComponentStates.ENABLED,
+        size: styleConfig.size,
+        fill: styleConfig.fill,
+        icon: styleConfig.icon,
+        expand: styleConfig.expand,
+        shape: styleConfig.shape,
+        handler: styleConfig.handler,
+    };
+}
 
 const Icon = (name, slot) => {
     return {
@@ -7208,2723 +7277,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Output
             }] } });
 
-/**
- * ComprehensiveLinkTestComponent - Componente de prueba exhaustiva para el procesamiento de enlaces.
- *
- * Este componente demuestra todos los casos edge y escenarios complejos de procesamiento de enlaces,
- * incluyendo puntuación, URLs complejas, y mezclas de formatos.
- *
- * @example Uso en template:
- * ```html
- * <val-comprehensive-link-test></val-comprehensive-link-test>
- * ```
- */
-class ComprehensiveLinkTestComponent {
-    constructor() {
-        this.punctuationProps = {
-            content: 'Diferentes puntuaciones: https://angular.io, también https://github.com! ¿Conoces https://typescript.org? Final: https://rxjs.dev. Entre paréntesis (https://zone.js) y con comillas "https://ionic.io".',
-            size: 'medium',
-            color: 'dark',
-            bold: false,
-            processLinks: true,
-            linkConfig: {
-                openExternalInNewTab: true,
-                linkClass: 'test-punctuation',
-                externalLinkClass: 'test-external',
-            },
-        };
-        this.complexUrlProps = {
-            content: 'URLs complejas: https://api.github.com/repos/angular/angular/issues?state=open&sort=updated&per_page=50, búsqueda https://google.com/search?q=angular+ionic+components#results, y documentación https://angular.io/guide/getting-started#development-environment.',
-            size: 'medium',
-            color: 'dark',
-            bold: false,
-            processLinks: true,
-            linkConfig: {
-                openExternalInNewTab: true,
-                linkClass: 'test-complex',
-                externalLinkClass: 'test-external',
-            },
-        };
-        this.parenthesesProps = {
-            content: 'Paréntesis de contexto (ver https://docs.angular.io) vs URLs con paréntesis https://example.com/api/method(param) en el contenido. También funciona (https://ionic.io/docs).',
-            size: 'medium',
-            color: 'dark',
-            bold: false,
-            processLinks: true,
-            linkConfig: {
-                openExternalInNewTab: true,
-                linkClass: 'test-parentheses',
-                externalLinkClass: 'test-external',
-            },
-        };
-        this.mixedFormatsProps = {
-            content: 'Formatos mezclados: [Documentación oficial](https://angular.io/docs), enlace directo https://github.com/angular/angular, ruta interna /dashboard/settings, [guía de inicio](/getting-started), y API https://api.example.com/v1/users?active=true.',
-            size: 'medium',
-            color: 'dark',
-            bold: false,
-            processLinks: true,
-            linkConfig: {
-                openExternalInNewTab: true,
-                openInternalInNewTab: false,
-                processMarkdownLinks: true,
-                linkClass: 'test-mixed',
-                externalLinkClass: 'test-external',
-                internalLinkClass: 'test-internal',
-            },
-        };
-        this.edgeCasesProps = {
-            content: 'Casos extremos: "https://quoted-url.com", múltiple puntuación https://example.com?!!, URL al final de oración https://final-url.org. También consecutivos: https://first.com y https://second.com.',
-            size: 'medium',
-            color: 'dark',
-            bold: false,
-            processLinks: true,
-            linkConfig: {
-                openExternalInNewTab: true,
-                linkClass: 'test-edge',
-                externalLinkClass: 'test-external',
-            },
-        };
-        this.devUrlsProps = {
-            content: 'URLs de desarrollo: http://localhost:4200/dashboard, servidor local https://127.0.0.1:8080/api/status, desarrollo http://dev.example.com:3000/debug?verbose=true, y túnel https://abc123.ngrok.io/webhook.',
-            size: 'medium',
-            color: 'dark',
-            bold: false,
-            processLinks: true,
-            linkConfig: {
-                openExternalInNewTab: false, // Para desarrollo, puede ser útil no abrir en nueva pestaña
-                linkClass: 'test-dev',
-                externalLinkClass: 'test-dev-external',
-            },
-        };
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ComprehensiveLinkTestComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ComprehensiveLinkTestComponent, isStandalone: true, selector: "val-comprehensive-link-test", ngImport: i0, template: `
-    <div class="comprehensive-test">
-      <h2>Prueba Exhaustiva de Procesamiento de Enlaces</h2>
-
-      <div class="test-section">
-        <h3>✅ Puntuación Final - SOLUCIONADO</h3>
-        <val-text [props]="punctuationProps"></val-text>
-        <p class="note">
-          <strong>Esperado:</strong> Los enlaces no incluyen puntuación final (.,;!?), pero la puntuación se preserva
-          como texto después del enlace.
-        </p>
-      </div>
-
-      <div class="test-section">
-        <h3>✅ URLs Complejas con Parámetros - SOLUCIONADO</h3>
-        <val-text [props]="complexUrlProps"></val-text>
-        <p class="note">
-          <strong>Esperado:</strong> URLs con query params, fragmentos y rutas complejas se preservan completamente.
-        </p>
-      </div>
-
-      <div class="test-section">
-        <h3>✅ Paréntesis Inteligentes - SOLUCIONADO</h3>
-        <val-text [props]="parenthesesProps"></val-text>
-        <p class="note">
-          <strong>Esperado:</strong> Paréntesis de contexto (texto) vs paréntesis de URL se manejan correctamente.
-        </p>
-      </div>
-
-      <div class="test-section">
-        <h3>✅ Mezcla de Formatos - SOLUCIONADO</h3>
-        <val-text [props]="mixedFormatsProps"></val-text>
-        <p class="note">
-          <strong>Esperado:</strong> Enlaces Markdown, URLs directas y rutas internas coexisten sin conflictos.
-        </p>
-      </div>
-
-      <div class="test-section">
-        <h3>✅ Casos Extremos - SOLUCIONADO</h3>
-        <val-text [props]="edgeCasesProps"></val-text>
-        <p class="note">
-          <strong>Esperado:</strong> Comillas, múltiple puntuación, y URLs al final de oraciones se procesan
-          correctamente.
-        </p>
-      </div>
-
-      <div class="test-section">
-        <h3>✅ URLs de Desarrollo - SOLUCIONADO</h3>
-        <val-text [props]="devUrlsProps"></val-text>
-        <p class="note">
-          <strong>Esperado:</strong> URLs de localhost, puertos, y rutas de desarrollo se detectan correctamente.
-        </p>
-      </div>
-    </div>
-  `, isInline: true, styles: [".comprehensive-test{padding:20px;max-width:1000px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.test-section{margin-bottom:32px;padding:20px;border:2px solid var(--ion-color-success, #2dd36f);border-radius:12px;background:var(--ion-color-success-tint, #42d77d) 10}h2{color:var(--ion-color-primary, #3880ff);margin-bottom:24px;text-align:center}h3{color:var(--ion-color-success, #2dd36f);margin-bottom:16px;font-size:18px;display:flex;align-items:center;gap:8px}.note{margin-top:12px;padding:12px;background:var(--ion-color-light, #f4f5f8);border-radius:8px;font-size:14px;color:var(--ion-color-medium, #92949c);border-left:4px solid var(--ion-color-primary, #3880ff)}.note strong{color:var(--ion-color-dark, #222428)}\n"], dependencies: [{ kind: "component", type: TextComponent, selector: "val-text", inputs: ["props"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ComprehensiveLinkTestComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'val-comprehensive-link-test', standalone: true, imports: [TextComponent], template: `
-    <div class="comprehensive-test">
-      <h2>Prueba Exhaustiva de Procesamiento de Enlaces</h2>
-
-      <div class="test-section">
-        <h3>✅ Puntuación Final - SOLUCIONADO</h3>
-        <val-text [props]="punctuationProps"></val-text>
-        <p class="note">
-          <strong>Esperado:</strong> Los enlaces no incluyen puntuación final (.,;!?), pero la puntuación se preserva
-          como texto después del enlace.
-        </p>
-      </div>
-
-      <div class="test-section">
-        <h3>✅ URLs Complejas con Parámetros - SOLUCIONADO</h3>
-        <val-text [props]="complexUrlProps"></val-text>
-        <p class="note">
-          <strong>Esperado:</strong> URLs con query params, fragmentos y rutas complejas se preservan completamente.
-        </p>
-      </div>
-
-      <div class="test-section">
-        <h3>✅ Paréntesis Inteligentes - SOLUCIONADO</h3>
-        <val-text [props]="parenthesesProps"></val-text>
-        <p class="note">
-          <strong>Esperado:</strong> Paréntesis de contexto (texto) vs paréntesis de URL se manejan correctamente.
-        </p>
-      </div>
-
-      <div class="test-section">
-        <h3>✅ Mezcla de Formatos - SOLUCIONADO</h3>
-        <val-text [props]="mixedFormatsProps"></val-text>
-        <p class="note">
-          <strong>Esperado:</strong> Enlaces Markdown, URLs directas y rutas internas coexisten sin conflictos.
-        </p>
-      </div>
-
-      <div class="test-section">
-        <h3>✅ Casos Extremos - SOLUCIONADO</h3>
-        <val-text [props]="edgeCasesProps"></val-text>
-        <p class="note">
-          <strong>Esperado:</strong> Comillas, múltiple puntuación, y URLs al final de oraciones se procesan
-          correctamente.
-        </p>
-      </div>
-
-      <div class="test-section">
-        <h3>✅ URLs de Desarrollo - SOLUCIONADO</h3>
-        <val-text [props]="devUrlsProps"></val-text>
-        <p class="note">
-          <strong>Esperado:</strong> URLs de localhost, puertos, y rutas de desarrollo se detectan correctamente.
-        </p>
-      </div>
-    </div>
-  `, styles: [".comprehensive-test{padding:20px;max-width:1000px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.test-section{margin-bottom:32px;padding:20px;border:2px solid var(--ion-color-success, #2dd36f);border-radius:12px;background:var(--ion-color-success-tint, #42d77d) 10}h2{color:var(--ion-color-primary, #3880ff);margin-bottom:24px;text-align:center}h3{color:var(--ion-color-success, #2dd36f);margin-bottom:16px;font-size:18px;display:flex;align-items:center;gap:8px}.note{margin-top:12px;padding:12px;background:var(--ion-color-light, #f4f5f8);border-radius:8px;font-size:14px;color:var(--ion-color-medium, #92949c);border-left:4px solid var(--ion-color-primary, #3880ff)}.note strong{color:var(--ion-color-dark, #222428)}\n"] }]
-        }] });
-
-class CustomContentDemoComponent {
-    constructor() {
-        this.content = inject(ContentService);
-        this.currentLang = 'es';
-        // Contenido global predefinido (sin className)
-        this.saveText$ = this.content.fromContent({ key: 'save' });
-        this.cancelText$ = this.content.fromContent({ key: 'cancel' });
-        this.deleteText$ = this.content.fromContent({ key: 'delete' });
-        this.loadingText$ = this.content.fromContent({ key: 'loading' });
-        // Tu contenido global personalizado (sin className)
-        this.dashboardText$ = this.content.fromContent({ key: 'dashboard' });
-        this.profileText$ = this.content.fromContent({ key: 'profile' });
-        this.settingsText$ = this.content.fromContent({ key: 'settings' });
-        this.welcomeText$ = this.content.fromContent({
-            key: 'welcome',
-            interpolation: { appName: 'Mi Aplicación' },
-        });
-        // Contenido específico del componente Language (con className)
-        this.spanishText$ = this.content.fromContent({
-            className: 'Language',
-            key: 'spanish',
-        });
-        this.englishText$ = this.content.fromContent({
-            className: 'Language',
-            key: 'english',
-        });
-        this.descriptionText$ = this.content.fromContent({
-            className: 'Language',
-            key: 'description',
-        });
-        // Para debug - texto síncrono
-        this.saveTextSync = '';
-        this.dashboardTextSync = '';
-        this.languageDescSync = '';
-    }
-    ngOnInit() {
-        // Obtener idioma actual
-        this.content.currentLang$.subscribe(lang => {
-            this.currentLang = lang;
-        });
-        // Obtener textos síncronos para debug
-        this.updateSyncTexts();
-        // 🔍 DIAGNÓSTICO: Verificar configuración
-        this.diagnoseConfiguration();
-    }
-    switchLanguage() {
-        const newLang = this.currentLang === 'es' ? LANGUAGES.EN : LANGUAGES.ES;
-        this.content.setLang(newLang);
-        // Actualizar textos síncronos después del cambio
-        setTimeout(() => {
-            this.updateSyncTexts();
-        }, 100);
-    }
-    updateSyncTexts() {
-        // Contenido global predefinido
-        this.saveTextSync = this.content.getText('save');
-        // Tu contenido global personalizado
-        this.dashboardTextSync = this.content.getText('dashboard');
-        // Contenido específico del componente - SOLUCIÓN TEMPORAL
-        // En lugar de usar getText, acceder directamente
-        try {
-            const langService = this.content.langService;
-            const languageContent = langService.content['Language'];
-            const currentLang = langService.selectedLang?.value || 'es';
-            const classContent = languageContent?.Content?.[currentLang];
-            this.languageDescSync = classContent?.['description'] || 'No encontrado';
-        }
-        catch (error) {
-            this.languageDescSync = `Error: ${error}`;
-        }
-    }
-    diagnoseConfiguration() {
-        console.log('=== DIAGNÓSTICO DE CONFIGURACIÓN ===');
-        // Verificar acceso directo al servicio
-        console.log('ContentService available:', !!this.content);
-        console.log('Current language:', this.content.currentLang);
-        // 🔍 Diagnóstico detallado del contenido Language
-        console.log('\n--- DIAGNÓSTICO DETALLADO LANGUAGE ---');
-        try {
-            // Acceder directamente al LangService
-            const langService = this.content.langService;
-            console.log('LangService available:', !!langService);
-            // Verificar si existe el contenido Language
-            const languageContent = langService.content['Language'];
-            console.log('Language content exists:', !!languageContent);
-            if (languageContent) {
-                console.log('Language content structure:', languageContent);
-                console.log('Language content.Content:', languageContent.Content);
-                // Verificar contenido en español
-                const esContent = languageContent.Content?.es;
-                console.log('ES content:', esContent);
-                console.log('ES description:', esContent?.description);
-                // Verificar contenido en inglés
-                const enContent = languageContent.Content?.en;
-                console.log('EN content:', enContent);
-                console.log('EN description:', enContent?.description);
-            }
-            // Verificar current lang
-            const currentLang = langService.selectedLang?.value;
-            console.log('Current selected language:', currentLang);
-        }
-        catch (error) {
-            console.log('❌ Error accessing LangService:', error);
-        }
-        // Intentar acceso síncrono a contenido global predefinido
-        try {
-            const saveText = this.content.getText('save');
-            console.log('✅ Global predefinido (save):', saveText);
-        }
-        catch (error) {
-            console.log('❌ Error global predefinido (save):', error);
-        }
-        // Intentar acceso síncrono a contenido global personalizado
-        try {
-            const dashboardText = this.content.getText('dashboard');
-            console.log('✅ Global personalizado (dashboard):', dashboardText);
-        }
-        catch (error) {
-            console.log('❌ Error global personalizado (dashboard):', error);
-        }
-        // Intentar acceso síncrono a contenido de componente
-        try {
-            const spanishText = this.content.getText('Language', 'spanish');
-            console.log('✅ Componente Language (spanish):', spanishText);
-            // 🔍 Debug paso a paso para spanish
-            const langService = this.content.langService;
-            const languageContent = langService.content['Language'];
-            const currentLang = langService.selectedLang?.value;
-            const classContent = languageContent?.Content[currentLang];
-            console.log('🔍 Debug spanish - currentLang:', currentLang);
-            console.log('🔍 Debug spanish - classContent:', classContent);
-            console.log('🔍 Debug spanish - classContent["spanish"]:', classContent?.['spanish']);
-        }
-        catch (error) {
-            console.log('❌ Error componente Language (spanish):', error);
-        }
-        // Intentar acceso síncrono a contenido de componente
-        try {
-            const descriptionText = this.content.getText('Language', 'description');
-            console.log('✅ Componente Language (description):', descriptionText);
-            // 🔍 Debug paso a paso para description
-            const langService = this.content.langService;
-            const languageContent = langService.content['Language'];
-            const currentLang = langService.selectedLang?.value;
-            const classContent = languageContent?.Content[currentLang];
-            console.log('🔍 Debug description - currentLang:', currentLang);
-            console.log('🔍 Debug description - classContent:', classContent);
-            console.log('🔍 Debug description - classContent["description"]:', classContent?.['description']);
-        }
-        catch (error) {
-            console.log('❌ Error componente Language (description):', error);
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CustomContentDemoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CustomContentDemoComponent, isStandalone: true, selector: "app-custom-content-demo", ngImport: i0, template: `
-    <ion-card>
-      <ion-card-header>
-        <ion-card-title>Demo de Contenido Personalizado</ion-card-title>
-      </ion-card-header>
-
-      <ion-card-content>
-        <!-- Contenido global predefinido -->
-        <div style="margin-bottom: 20px;">
-          <h3>Contenido Global Predefinido:</h3>
-          <ion-button>{{ saveText$ | async }}</ion-button>
-          <ion-button color="medium">{{ cancelText$ | async }}</ion-button>
-          <ion-button color="danger">{{ deleteText$ | async }}</ion-button>
-          <p><strong>Estado:</strong> {{ loadingText$ | async }}</p>
-        </div>
-
-        <!-- Tu contenido global personalizado -->
-        <div style="margin-bottom: 20px;">
-          <h3>Tu Contenido Global Personalizado:</h3>
-          <p><strong>Sección:</strong> {{ dashboardText$ | async }}</p>
-          <p><strong>Usuario:</strong> {{ profileText$ | async }}</p>
-          <p><strong>Config:</strong> {{ settingsText$ | async }}</p>
-          <p>{{ welcomeText$ | async }}</p>
-        </div>
-
-        <!-- Contenido específico del componente Language -->
-        <div style="margin-bottom: 20px;">
-          <h3>Contenido del Componente Language:</h3>
-          <ion-item>
-            <ion-label> <strong>Español:</strong> {{ spanishText$ | async }} </ion-label>
-          </ion-item>
-          <ion-item>
-            <ion-label> <strong>Inglés:</strong> {{ englishText$ | async }} </ion-label>
-          </ion-item>
-          <p>
-            <em>{{ descriptionText$ | async }}</em>
-          </p>
-        </div>
-
-        <!-- Botón para cambiar idioma -->
-        <div>
-          <h3>Control de Idioma:</h3>
-          <ion-button (click)="switchLanguage()" color="secondary">
-            Cambiar a {{ currentLang === 'es' ? 'English' : 'Español' }}
-          </ion-button>
-          <p>
-            <small>Idioma actual: {{ currentLang }}</small>
-          </p>
-        </div>
-
-        <!-- Debug info -->
-        <div style="margin-top: 20px; padding: 10px; background: #f5f5f5; border-radius: 4px;">
-          <h4>Debug Info:</h4>
-          <p><strong>Save (sync):</strong> {{ saveTextSync }}</p>
-          <p><strong>Dashboard (sync):</strong> {{ dashboardTextSync }}</p>
-          <p><strong>Language Description (sync):</strong> {{ languageDescSync }}</p>
-        </div>
-      </ion-card-content>
-    </ion-card>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "component", type: IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: 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: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CustomContentDemoComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'app-custom-content-demo',
-                    standalone: true,
-                    imports: [CommonModule, IonCard, IonCardContent, IonCardHeader, IonCardTitle, IonButton, IonItem, IonLabel],
-                    template: `
-    <ion-card>
-      <ion-card-header>
-        <ion-card-title>Demo de Contenido Personalizado</ion-card-title>
-      </ion-card-header>
-
-      <ion-card-content>
-        <!-- Contenido global predefinido -->
-        <div style="margin-bottom: 20px;">
-          <h3>Contenido Global Predefinido:</h3>
-          <ion-button>{{ saveText$ | async }}</ion-button>
-          <ion-button color="medium">{{ cancelText$ | async }}</ion-button>
-          <ion-button color="danger">{{ deleteText$ | async }}</ion-button>
-          <p><strong>Estado:</strong> {{ loadingText$ | async }}</p>
-        </div>
-
-        <!-- Tu contenido global personalizado -->
-        <div style="margin-bottom: 20px;">
-          <h3>Tu Contenido Global Personalizado:</h3>
-          <p><strong>Sección:</strong> {{ dashboardText$ | async }}</p>
-          <p><strong>Usuario:</strong> {{ profileText$ | async }}</p>
-          <p><strong>Config:</strong> {{ settingsText$ | async }}</p>
-          <p>{{ welcomeText$ | async }}</p>
-        </div>
-
-        <!-- Contenido específico del componente Language -->
-        <div style="margin-bottom: 20px;">
-          <h3>Contenido del Componente Language:</h3>
-          <ion-item>
-            <ion-label> <strong>Español:</strong> {{ spanishText$ | async }} </ion-label>
-          </ion-item>
-          <ion-item>
-            <ion-label> <strong>Inglés:</strong> {{ englishText$ | async }} </ion-label>
-          </ion-item>
-          <p>
-            <em>{{ descriptionText$ | async }}</em>
-          </p>
-        </div>
-
-        <!-- Botón para cambiar idioma -->
-        <div>
-          <h3>Control de Idioma:</h3>
-          <ion-button (click)="switchLanguage()" color="secondary">
-            Cambiar a {{ currentLang === 'es' ? 'English' : 'Español' }}
-          </ion-button>
-          <p>
-            <small>Idioma actual: {{ currentLang }}</small>
-          </p>
-        </div>
-
-        <!-- Debug info -->
-        <div style="margin-top: 20px; padding: 10px; background: #f5f5f5; border-radius: 4px;">
-          <h4>Debug Info:</h4>
-          <p><strong>Save (sync):</strong> {{ saveTextSync }}</p>
-          <p><strong>Dashboard (sync):</strong> {{ dashboardTextSync }}</p>
-          <p><strong>Language Description (sync):</strong> {{ languageDescSync }}</p>
-        </div>
-      </ion-card-content>
-    </ion-card>
-  `,
-                }]
-        }] });
+const text = {
+    es: {
+        spanish: 'Español',
+        english: 'Inglés',
+    },
+    en: {
+        spanish: 'Spanish',
+        english: 'English',
+    },
+};
+var LangSettings = new TextContent(text);
 
 /**
- * Componente de demostración para val-display con contenido reactivo.
- * Muestra diferentes patrones de uso y casos de ejemplo.
- */
-class DisplayDemoComponent {
-    constructor(contentService, langService) {
-        this.contentService = contentService;
-        this.langService = langService;
-        // Contador para ejemplos dinámicos
-        this.counter = 0;
-        // Configuración del selector de idioma
-        this.languageSelectorProps = {
-            showLabel: true,
-            labelConfig: {
-                className: '_global',
-                key: 'language',
-                fallback: 'Idioma',
-            },
-            showFlags: true,
-            color: 'primary',
-            size: 'default',
-            fill: 'outline',
-        };
-        // Configuraciones de ejemplo - ESTÁTICAS
-        this.smallStaticDisplay = {
-            content: 'Texto pequeño estático',
-            color: 'dark',
-            size: 'small',
-        };
-        this.mediumStaticDisplay = {
-            content: 'Texto mediano estático',
-            color: 'dark',
-            size: 'medium',
-        };
-        this.largeStaticDisplay = {
-            content: 'Texto grande estático',
-            color: 'dark',
-            size: 'large',
-        };
-        this.xlargeStaticDisplay = {
-            content: 'Texto extra grande estático',
-            color: 'dark',
-            size: 'xlarge',
-        };
-        // Ejemplos de colores estáticos
-        this.primaryDisplay = {
-            content: 'Texto primario',
-            color: 'primary',
-            size: 'medium',
-        };
-        this.secondaryDisplay = {
-            content: 'Texto secundario',
-            color: 'secondary',
-            size: 'medium',
-        };
-        this.successDisplay = {
-            content: 'Texto de éxito',
-            color: 'success',
-            size: 'medium',
-        };
-        this.warningDisplay = {
-            content: 'Texto de advertencia',
-            color: 'warning',
-            size: 'medium',
-        };
-        this.dangerDisplay = {
-            content: 'Texto de peligro',
-            color: 'danger',
-            size: 'medium',
-        };
-        // Configuraciones de ejemplo - REACTIVAS
-        this.welcomeDisplay = {
-            contentConfig: {
-                className: 'displayDemo',
-                key: 'welcomeTitle',
-                fallback: 'Bienvenido a la aplicación',
-            },
-            color: 'primary',
-            size: 'xlarge',
-        };
-        this.descriptionDisplay = {
-            contentConfig: {
-                className: 'displayDemo',
-                key: 'welcomeDescription',
-                fallback: 'Esta es una descripción de ejemplo',
-            },
-            color: 'medium',
-            size: 'medium',
-        };
-        this.statusDisplay = {
-            contentConfig: {
-                className: 'displayDemo',
-                key: 'statusOnline',
-                fallback: 'En línea',
-            },
-            color: 'success',
-            size: 'small',
-        };
-        // Ejemplos con interpolación
-        this.userWelcomeDisplay = {
-            contentConfig: {
-                className: 'displayDemo',
-                key: 'welcomeUser',
-                fallback: 'Hola, {{userName}}!',
-                interpolation: {
-                    userName: 'Juan Pérez',
-                },
-            },
-            color: 'tertiary',
-            size: 'large',
-        };
-        this.counterDisplay = {
-            contentConfig: {
-                className: 'displayDemo',
-                key: 'counterCurrent',
-                fallback: 'Contador: {{count}}',
-                interpolation: {
-                    count: this.counter,
-                },
-            },
-            color: 'secondary',
-            size: 'medium',
-        };
-        // Ejemplos con claves faltantes para demostrar fallbacks
-        this.missingKeyDisplay = {
-            contentConfig: {
-                className: 'displayDemo',
-                key: 'this.key.does.not.exist',
-                fallback: 'Esta clave no existe, pero tengo fallback',
-            },
-            color: 'warning',
-            size: 'medium',
-        };
-        this.noFallbackDisplay = {
-            contentConfig: {
-                className: 'displayDemo',
-                key: 'another.missing.key',
-                // Sin fallback - usará la clave como fallback
-            },
-            color: 'danger',
-            size: 'small',
-        };
-        // Ejemplos mixtos
-        this.staticMixedDisplay = {
-            content: 'Este es contenido estático (no cambia con el idioma)',
-            color: 'dark',
-            size: 'medium',
-        };
-        this.reactiveMixedDisplay = {
-            contentConfig: {
-                className: 'displayDemo',
-                key: 'mixedReactive',
-                fallback: 'Este contenido sí cambia con el idioma',
-            },
-            color: 'primary',
-            size: 'medium',
-        };
-        // Ejemplo dinámico que se actualiza
-        this.dynamicCounterDisplay = {
-            contentConfig: {
-                className: 'displayDemo',
-                key: 'dynamicContent',
-                fallback: 'Clics: {{count}}',
-                interpolation: {
-                    count: this.counter,
-                },
-            },
-            color: 'tertiary',
-            size: 'large',
-        };
-    }
-    ngOnInit() {
-        this.initializeContent();
-        this.initializeLanguageState();
-    }
-    initializeContent() {
-        // Contenido de la página
-        this.demoTitle$ = this.contentService.fromContent({
-            className: 'displayDemo',
-            key: 'pageTitle',
-            fallback: 'Demostración del Componente Display',
-        });
-        this.languageLabel$ = this.contentService.fromContent({
-            className: '_global',
-            key: 'language',
-            fallback: 'Idioma',
-        });
-        this.staticSectionTitle$ = this.contentService.fromContent({
-            className: 'displayDemo',
-            key: 'sectionsStatic',
-            fallback: 'Ejemplos Estáticos',
-        });
-        this.reactiveSectionTitle$ = this.contentService.fromContent({
-            className: 'displayDemo',
-            key: 'sectionsReactive',
-            fallback: 'Ejemplos Reactivos',
-        });
-        this.mixedSectionTitle$ = this.contentService.fromContent({
-            className: 'displayDemo',
-            key: 'sectionsMixed',
-            fallback: 'Ejemplos Mixtos',
-        });
-        this.dynamicSectionTitle$ = this.contentService.fromContent({
-            className: 'displayDemo',
-            key: 'sectionsDynamic',
-            fallback: 'Ejemplos Dinámicos',
-        });
-        this.analysisTitle$ = this.contentService.fromContent({
-            className: 'displayDemo',
-            key: 'sectionsAnalysis',
-            fallback: 'Análisis de Idioma',
-        });
-        this.reactiveContentTitle$ = this.contentService.fromContent({
-            className: 'displayDemo',
-            key: 'subsectionsReactiveContent',
-            fallback: 'Contenido reactivo básico:',
-        });
-        this.interpolationTitle$ = this.contentService.fromContent({
-            className: 'displayDemo',
-            key: 'subsectionsInterpolation',
-            fallback: 'Contenido con interpolación:',
-        });
-        this.fallbackTitle$ = this.contentService.fromContent({
-            className: 'displayDemo',
-            key: 'subsectionsFallback',
-            fallback: 'Demostración de fallbacks:',
-        });
-        this.mixedContentTitle$ = this.contentService.fromContent({
-            className: 'displayDemo',
-            key: 'subsectionsMixedContent',
-            fallback: 'Contenido estático vs reactivo:',
-        });
-        this.dynamicContentTitle$ = this.contentService.fromContent({
-            className: 'displayDemo',
-            key: 'subsectionsDynamicContent',
-            fallback: 'Contenido que se actualiza dinámicamente:',
-        });
-        this.updateButtonText$ = this.contentService.fromContent({
-            className: 'displayDemo',
-            key: 'buttonsUpdateCounter',
-            fallback: 'Actualizar Contador',
-        });
-        this.currentLangLabel$ = this.contentService.fromContent({
-            className: 'displayDemo',
-            key: 'analysisCurrentLanguage',
-            fallback: 'Idioma actual',
-        });
-        this.availableLangsLabel$ = this.contentService.fromContent({
-            className: 'displayDemo',
-            key: 'analysisAvailableLanguages',
-            fallback: 'Idiomas disponibles',
-        });
-    }
-    initializeLanguageState() {
-        this.currentLanguage$ = this.langService.currentLang$;
-        this.availableLanguages$ = this.langService.currentLang$.pipe(map$1(() => this.langService.availableLangs));
-    }
-    changeLanguage(language) {
-        this.langService.setLang(language);
-    }
-    onLanguageChange(language) {
-        console.log('Language changed to:', language);
-        // El language selector ya maneja el cambio de idioma internamente
-        // pero podemos agregar lógica adicional aquí si es necesario
-    }
-    updateCounter() {
-        this.counter++;
-        // Actualizar los displays que usan el contador
-        this.counterDisplay = {
-            ...this.counterDisplay,
-            contentConfig: {
-                ...this.counterDisplay.contentConfig,
-                interpolation: {
-                    count: this.counter,
-                },
-            },
-        };
-        this.dynamicCounterDisplay = {
-            ...this.dynamicCounterDisplay,
-            contentConfig: {
-                ...this.dynamicCounterDisplay.contentConfig,
-                interpolation: {
-                    count: this.counter,
-                },
-            },
-        };
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DisplayDemoComponent, deps: [{ token: ContentService }, { token: LangService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DisplayDemoComponent, isStandalone: true, selector: "val-display-demo", ngImport: i0, template: `
-    <div class="display-demo">
-      <ion-card>
-        <ion-card-header>
-          <ion-card-title>{{ demoTitle$ | async }}</ion-card-title>
-        </ion-card-header>
-
-        <ion-card-content>
-          <!-- Selector de idioma -->
-          <div class="language-selector-container">
-            <val-language-selector [props]="languageSelectorProps" (languageChange)="onLanguageChange($event)">
-            </val-language-selector>
-          </div>
-
-          <!-- Ejemplos estáticos -->
-          <div class="section">
-            <h3>{{ staticSectionTitle$ | async }}</h3>
-
-            <div class="example-group">
-              <h4>Diferentes tamaños:</h4>
-              <val-display [props]="smallStaticDisplay"></val-display>
-              <val-display [props]="mediumStaticDisplay"></val-display>
-              <val-display [props]="largeStaticDisplay"></val-display>
-              <val-display [props]="xlargeStaticDisplay"></val-display>
-            </div>
-
-            <div class="example-group">
-              <h4>Diferentes colores:</h4>
-              <val-display [props]="primaryDisplay"></val-display>
-              <val-display [props]="secondaryDisplay"></val-display>
-              <val-display [props]="successDisplay"></val-display>
-              <val-display [props]="warningDisplay"></val-display>
-              <val-display [props]="dangerDisplay"></val-display>
-            </div>
-          </div>
-
-          <!-- Ejemplos reactivos -->
-          <div class="section">
-            <h3>{{ reactiveSectionTitle$ | async }}</h3>
-
-            <div class="example-group">
-              <h4>{{ reactiveContentTitle$ | async }}</h4>
-              <val-display [props]="welcomeDisplay"></val-display>
-              <val-display [props]="descriptionDisplay"></val-display>
-              <val-display [props]="statusDisplay"></val-display>
-            </div>
-
-            <div class="example-group">
-              <h4>{{ interpolationTitle$ | async }}</h4>
-              <val-display [props]="userWelcomeDisplay"></val-display>
-              <val-display [props]="counterDisplay"></val-display>
-            </div>
-
-            <div class="example-group">
-              <h4>{{ fallbackTitle$ | async }}</h4>
-              <val-display [props]="missingKeyDisplay"></val-display>
-              <val-display [props]="noFallbackDisplay"></val-display>
-            </div>
-          </div>
-
-          <!-- Ejemplos mixtos -->
-          <div class="section">
-            <h3>{{ mixedSectionTitle$ | async }}</h3>
-
-            <div class="example-group">
-              <h4>{{ mixedContentTitle$ | async }}</h4>
-              <div class="mixed-examples">
-                <val-display [props]="staticMixedDisplay"></val-display>
-                <val-display [props]="reactiveMixedDisplay"></val-display>
-              </div>
-            </div>
-          </div>
-
-          <!-- Ejemplos dinámicos -->
-          <div class="section">
-            <h3>{{ dynamicSectionTitle$ | async }}</h3>
-
-            <div class="example-group">
-              <h4>{{ dynamicContentTitle$ | async }}</h4>
-              <ion-button (click)="updateCounter()" color="primary">
-                {{ updateButtonText$ | async }}
-              </ion-button>
-              <val-display [props]="dynamicCounterDisplay"></val-display>
-            </div>
-          </div>
-
-          <!-- Análisis de contenido -->
-          <div class="section">
-            <h3>{{ analysisTitle$ | async }}</h3>
-            <div class="analysis-info">
-              <p>
-                <strong>{{ currentLangLabel$ | async }}:</strong> {{ currentLanguage$ | async | uppercase }}
-              </p>
-              <p>
-                <strong>{{ availableLangsLabel$ | async }}:</strong>
-                {{ (availableLanguages$ | async)?.join(', ') | uppercase }}
-              </p>
-            </div>
-          </div>
-        </ion-card-content>
-      </ion-card>
-    </div>
-  `, isInline: true, styles: [".display-demo{padding:16px}.language-selector-container{margin:16px 0;padding:12px;background:var(--ion-color-step-50);border-radius:8px}.section{margin:24px 0;border-bottom:1px solid var(--ion-color-light);padding-bottom:16px}.example-group{margin:16px 0;padding:12px;background:var(--ion-color-light);border-radius:8px}.example-group h4{margin:0 0 12px;color:var(--ion-color-medium)}.mixed-examples{display:flex;flex-direction:column;gap:8px}.analysis-info{background:var(--ion-color-step-50);padding:16px;border-radius:8px;margin-top:16px}val-display{display:block;margin:8px 0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.UpperCasePipe, name: "uppercase" }, { kind: "component", type: IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: 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: DisplayComponent, selector: "val-display", inputs: ["props"] }, { kind: "component", type: LanguageSelectorComponent, selector: "val-language-selector", inputs: ["props"], outputs: ["languageChange"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DisplayDemoComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'val-display-demo', standalone: true, imports: [
-                        CommonModule,
-                        IonCard,
-                        IonCardContent,
-                        IonCardHeader,
-                        IonCardTitle,
-                        IonButton,
-                        DisplayComponent,
-                        LanguageSelectorComponent,
-                    ], template: `
-    <div class="display-demo">
-      <ion-card>
-        <ion-card-header>
-          <ion-card-title>{{ demoTitle$ | async }}</ion-card-title>
-        </ion-card-header>
-
-        <ion-card-content>
-          <!-- Selector de idioma -->
-          <div class="language-selector-container">
-            <val-language-selector [props]="languageSelectorProps" (languageChange)="onLanguageChange($event)">
-            </val-language-selector>
-          </div>
-
-          <!-- Ejemplos estáticos -->
-          <div class="section">
-            <h3>{{ staticSectionTitle$ | async }}</h3>
-
-            <div class="example-group">
-              <h4>Diferentes tamaños:</h4>
-              <val-display [props]="smallStaticDisplay"></val-display>
-              <val-display [props]="mediumStaticDisplay"></val-display>
-              <val-display [props]="largeStaticDisplay"></val-display>
-              <val-display [props]="xlargeStaticDisplay"></val-display>
-            </div>
-
-            <div class="example-group">
-              <h4>Diferentes colores:</h4>
-              <val-display [props]="primaryDisplay"></val-display>
-              <val-display [props]="secondaryDisplay"></val-display>
-              <val-display [props]="successDisplay"></val-display>
-              <val-display [props]="warningDisplay"></val-display>
-              <val-display [props]="dangerDisplay"></val-display>
-            </div>
-          </div>
-
-          <!-- Ejemplos reactivos -->
-          <div class="section">
-            <h3>{{ reactiveSectionTitle$ | async }}</h3>
-
-            <div class="example-group">
-              <h4>{{ reactiveContentTitle$ | async }}</h4>
-              <val-display [props]="welcomeDisplay"></val-display>
-              <val-display [props]="descriptionDisplay"></val-display>
-              <val-display [props]="statusDisplay"></val-display>
-            </div>
-
-            <div class="example-group">
-              <h4>{{ interpolationTitle$ | async }}</h4>
-              <val-display [props]="userWelcomeDisplay"></val-display>
-              <val-display [props]="counterDisplay"></val-display>
-            </div>
-
-            <div class="example-group">
-              <h4>{{ fallbackTitle$ | async }}</h4>
-              <val-display [props]="missingKeyDisplay"></val-display>
-              <val-display [props]="noFallbackDisplay"></val-display>
-            </div>
-          </div>
-
-          <!-- Ejemplos mixtos -->
-          <div class="section">
-            <h3>{{ mixedSectionTitle$ | async }}</h3>
-
-            <div class="example-group">
-              <h4>{{ mixedContentTitle$ | async }}</h4>
-              <div class="mixed-examples">
-                <val-display [props]="staticMixedDisplay"></val-display>
-                <val-display [props]="reactiveMixedDisplay"></val-display>
-              </div>
-            </div>
-          </div>
-
-          <!-- Ejemplos dinámicos -->
-          <div class="section">
-            <h3>{{ dynamicSectionTitle$ | async }}</h3>
-
-            <div class="example-group">
-              <h4>{{ dynamicContentTitle$ | async }}</h4>
-              <ion-button (click)="updateCounter()" color="primary">
-                {{ updateButtonText$ | async }}
-              </ion-button>
-              <val-display [props]="dynamicCounterDisplay"></val-display>
-            </div>
-          </div>
-
-          <!-- Análisis de contenido -->
-          <div class="section">
-            <h3>{{ analysisTitle$ | async }}</h3>
-            <div class="analysis-info">
-              <p>
-                <strong>{{ currentLangLabel$ | async }}:</strong> {{ currentLanguage$ | async | uppercase }}
-              </p>
-              <p>
-                <strong>{{ availableLangsLabel$ | async }}:</strong>
-                {{ (availableLanguages$ | async)?.join(', ') | uppercase }}
-              </p>
-            </div>
-          </div>
-        </ion-card-content>
-      </ion-card>
-    </div>
-  `, styles: [".display-demo{padding:16px}.language-selector-container{margin:16px 0;padding:12px;background:var(--ion-color-step-50);border-radius:8px}.section{margin:24px 0;border-bottom:1px solid var(--ion-color-light);padding-bottom:16px}.example-group{margin:16px 0;padding:12px;background:var(--ion-color-light);border-radius:8px}.example-group h4{margin:0 0 12px;color:var(--ion-color-medium)}.mixed-examples{display:flex;flex-direction:column;gap:8px}.analysis-info{background:var(--ion-color-step-50);padding:16px;border-radius:8px;margin-top:16px}val-display{display:block;margin:8px 0}\n"] }]
-        }], ctorParameters: () => [{ type: ContentService }, { type: LangService }] });
-
-/**
- * Ejemplo rápido de uso del componente val-display con contenido reactivo
- */
-class DisplayExampleComponent {
-    constructor() {
-        // ✅ Ejemplos de contenido estático
-        this.staticTitle = {
-            content: 'Este es un título estático',
-            color: 'primary',
-            size: 'xlarge',
-        };
-        this.staticSubtitle = {
-            content: 'Este es un subtítulo que no cambia',
-            color: 'medium',
-            size: 'large',
-        };
-        // ✅ Ejemplos de contenido reactivo (requiere configuración de i18n)
-        this.reactiveWelcome = {
-            contentConfig: {
-                className: 'displayExample',
-                key: 'welcome.title',
-                fallback: 'Bienvenido a la aplicación',
-            },
-            color: 'primary',
-            size: 'xlarge',
-        };
-        this.reactiveDescription = {
-            contentConfig: {
-                className: 'displayExample',
-                key: 'welcome.description',
-                fallback: 'Esta descripción cambia según el idioma',
-            },
-            color: 'dark',
-            size: 'medium',
-        };
-        // ✅ Ejemplos con interpolación de variables
-        this.userGreeting = {
-            contentConfig: {
-                className: 'displayExample',
-                key: 'user.greeting',
-                fallback: 'Hola, {{name}}! Tienes {{messages}} mensajes.',
-                interpolation: {
-                    name: 'María',
-                    messages: 5,
-                },
-            },
-            color: 'tertiary',
-            size: 'large',
-        };
-        this.statusMessage = {
-            contentConfig: {
-                className: 'displayExample',
-                key: 'status.online',
-                fallback: 'Estado: {{status}} desde {{time}}',
-                interpolation: {
-                    status: 'En línea',
-                    time: '10:30 AM',
-                },
-            },
-            color: 'success',
-            size: 'small',
-        };
-        // ✅ Ejemplos de diferentes tamaños
-        this.smallText = {
-            content: 'Texto pequeño (small)',
-            color: 'dark',
-            size: 'small',
-        };
-        this.mediumText = {
-            content: 'Texto mediano (medium)',
-            color: 'dark',
-            size: 'medium',
-        };
-        this.largeText = {
-            content: 'Texto grande (large)',
-            color: 'dark',
-            size: 'large',
-        };
-        this.xlargeText = {
-            content: 'Texto extra grande (xlarge)',
-            color: 'dark',
-            size: 'xlarge',
-        };
-        // ✅ Ejemplos de diferentes colores
-        this.primaryText = {
-            content: 'Texto color primary',
-            color: 'primary',
-            size: 'medium',
-        };
-        this.successText = {
-            content: 'Texto color success',
-            color: 'success',
-            size: 'medium',
-        };
-        this.warningText = {
-            content: 'Texto color warning',
-            color: 'warning',
-            size: 'medium',
-        };
-        this.dangerText = {
-            content: 'Texto color danger',
-            color: 'danger',
-            size: 'medium',
-        };
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DisplayExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DisplayExampleComponent, isStandalone: true, selector: "app-display-example", ngImport: i0, template: `
-    <div class="display-examples">
-      <h2>Ejemplos de val-display</h2>
-
-      <!-- Contenido estático -->
-      <div class="section">
-        <h3>Contenido Estático</h3>
-        <val-display [props]="staticTitle"></val-display>
-        <val-display [props]="staticSubtitle"></val-display>
-      </div>
-
-      <!-- Contenido reactivo -->
-      <div class="section">
-        <h3>Contenido Reactivo</h3>
-        <val-display [props]="reactiveWelcome"></val-display>
-        <val-display [props]="reactiveDescription"></val-display>
-      </div>
-
-      <!-- Contenido con interpolación -->
-      <div class="section">
-        <h3>Contenido con Variables</h3>
-        <val-display [props]="userGreeting"></val-display>
-        <val-display [props]="statusMessage"></val-display>
-      </div>
-
-      <!-- Diferentes tamaños -->
-      <div class="section">
-        <h3>Diferentes Tamaños</h3>
-        <val-display [props]="smallText"></val-display>
-        <val-display [props]="mediumText"></val-display>
-        <val-display [props]="largeText"></val-display>
-        <val-display [props]="xlargeText"></val-display>
-      </div>
-
-      <!-- Diferentes colores -->
-      <div class="section">
-        <h3>Diferentes Colores</h3>
-        <val-display [props]="primaryText"></val-display>
-        <val-display [props]="successText"></val-display>
-        <val-display [props]="warningText"></val-display>
-        <val-display [props]="dangerText"></val-display>
-      </div>
-    </div>
-  `, isInline: true, styles: [".display-examples{padding:20px;max-width:800px;margin:0 auto}.section{margin:30px 0;padding:20px;border:1px solid var(--ion-color-light);border-radius:8px;background:var(--ion-color-step-50)}.section h3{margin:0 0 15px;color:var(--ion-color-primary)}val-display{display:block;margin:10px 0}\n"], dependencies: [{ kind: "component", type: DisplayComponent, selector: "val-display", inputs: ["props"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DisplayExampleComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-display-example', standalone: true, imports: [DisplayComponent], template: `
-    <div class="display-examples">
-      <h2>Ejemplos de val-display</h2>
-
-      <!-- Contenido estático -->
-      <div class="section">
-        <h3>Contenido Estático</h3>
-        <val-display [props]="staticTitle"></val-display>
-        <val-display [props]="staticSubtitle"></val-display>
-      </div>
-
-      <!-- Contenido reactivo -->
-      <div class="section">
-        <h3>Contenido Reactivo</h3>
-        <val-display [props]="reactiveWelcome"></val-display>
-        <val-display [props]="reactiveDescription"></val-display>
-      </div>
-
-      <!-- Contenido con interpolación -->
-      <div class="section">
-        <h3>Contenido con Variables</h3>
-        <val-display [props]="userGreeting"></val-display>
-        <val-display [props]="statusMessage"></val-display>
-      </div>
-
-      <!-- Diferentes tamaños -->
-      <div class="section">
-        <h3>Diferentes Tamaños</h3>
-        <val-display [props]="smallText"></val-display>
-        <val-display [props]="mediumText"></val-display>
-        <val-display [props]="largeText"></val-display>
-        <val-display [props]="xlargeText"></val-display>
-      </div>
-
-      <!-- Diferentes colores -->
-      <div class="section">
-        <h3>Diferentes Colores</h3>
-        <val-display [props]="primaryText"></val-display>
-        <val-display [props]="successText"></val-display>
-        <val-display [props]="warningText"></val-display>
-        <val-display [props]="dangerText"></val-display>
-      </div>
-    </div>
-  `, styles: [".display-examples{padding:20px;max-width:800px;margin:0 auto}.section{margin:30px 0;padding:20px;border:1px solid var(--ion-color-light);border-radius:8px;background:var(--ion-color-step-50)}.section h3{margin:0 0 15px;color:var(--ion-color-primary)}val-display{display:block;margin:10px 0}\n"] }]
-        }] });
-
-/**
- * LinkProcessingExampleComponent - Componente de ejemplo que demuestra el procesamiento automático de enlaces.
- *
- * Este componente muestra diferentes casos de uso para el procesamiento automático de enlaces
- * en el componente val-text, incluyendo enlaces externos, rutas internas y configuraciones personalizadas.
- *
- * @example Uso en template:
- * ```html
- * <val-link-processing-example></val-link-processing-example>
- * ```
- */
-class LinkProcessingExampleComponent {
-    constructor() {
-        this.basicTextProps = {
-            content: 'Este texto contiene https://angular.io y /dashboard pero no se procesan como enlaces.',
-            size: 'medium',
-            color: 'dark',
-            bold: false,
-            processLinks: false,
-        };
-        this.basicLinksProps = {
-            content: 'Visita https://angular.io para documentación o ve a /dashboard para el panel principal.',
-            size: 'medium',
-            color: 'dark',
-            bold: false,
-            processLinks: true,
-        };
-        this.customLinksProps = {
-            content: 'Enlaces personalizados: https://github.com/angular/angular y /profile/settings',
-            size: 'medium',
-            color: 'dark',
-            bold: false,
-            processLinks: true,
-            linkConfig: {
-                openExternalInNewTab: true,
-                openInternalInNewTab: false,
-                linkClass: 'custom-link-style',
-                externalLinkClass: 'external-custom',
-                internalLinkClass: 'internal-custom',
-            },
-        };
-        this.mixedLinksProps = {
-            content: 'Consulta la documentación en https://ionicframework.com/docs, revisa el código en https://github.com/ionic-team/ionic-framework, o navega a /components/buttons para ejemplos internos.',
-            size: 'medium',
-            color: 'dark',
-            bold: false,
-            processLinks: true,
-            linkConfig: {
-                openExternalInNewTab: true,
-                openInternalInNewTab: false,
-                linkClass: 'processed-link',
-                externalLinkClass: 'external-link',
-                internalLinkClass: 'internal-link',
-            },
-        };
-        this.sameTabLinksProps = {
-            content: 'Estos enlaces no abren en nueva pestaña: https://example.com y /home',
-            size: 'medium',
-            color: 'dark',
-            bold: false,
-            processLinks: true,
-            linkConfig: {
-                openExternalInNewTab: false,
-                openInternalInNewTab: false,
-                linkClass: 'same-tab-link',
-                externalLinkClass: 'external-same-tab',
-                internalLinkClass: 'internal-same-tab',
-            },
-        };
-        this.markdownLinksProps = {
-            content: 'Consulta [la documentación de Angular](https://angular.io/docs) y ve a [configuración del perfil](/profile/settings) para más opciones.',
-            size: 'medium',
-            color: 'dark',
-            bold: false,
-            processLinks: true,
-            linkConfig: {
-                openExternalInNewTab: true,
-                openInternalInNewTab: false,
-                processMarkdownLinks: true,
-                linkClass: 'markdown-link',
-                externalLinkClass: 'markdown-external',
-                internalLinkClass: 'markdown-internal',
-            },
-        };
-        this.mixedFormatsProps = {
-            content: 'Aquí hay [documentación oficial](https://angular.io/docs), un enlace directo https://github.com/angular/angular, y una ruta interna /dashboard/analytics. ¡Todos funcionan!',
-            size: 'medium',
-            color: 'dark',
-            bold: false,
-            processLinks: true,
-            linkConfig: {
-                openExternalInNewTab: true,
-                openInternalInNewTab: false,
-                processMarkdownLinks: true,
-                linkClass: 'mixed-link',
-                externalLinkClass: 'mixed-external',
-                internalLinkClass: 'mixed-internal',
-            },
-        };
-        this.punctuationTestProps = {
-            content: 'URLs con puntuación final: https://ionicframework.com/docs, también https://angular.io! Pregunta sobre https://github.com/angular? Y punto final: https://typescript.org. Paréntesis (https://rxjs.dev) y comillas "https://zone.js". ¡Todos funcionan!',
-            size: 'medium',
-            color: 'dark',
-            bold: false,
-            processLinks: true,
-            linkConfig: {
-                openExternalInNewTab: true,
-                linkClass: 'punctuation-test',
-                externalLinkClass: 'external-punct',
-            },
-        };
-        this.complexUrlsProps = {
-            content: 'URLs complejas: https://example.com/path?param=value&other=123#section, búsqueda en https://google.com/search?q=angular+components, y API https://api.github.com/repos/owner/repo/issues?state=open. Todos con parámetros y fragmentos.',
-            size: 'medium',
-            color: 'dark',
-            bold: false,
-            processLinks: true,
-            linkConfig: {
-                openExternalInNewTab: true,
-                linkClass: 'complex-url',
-                externalLinkClass: 'complex-external',
-            },
-        };
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LinkProcessingExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: LinkProcessingExampleComponent, isStandalone: true, selector: "val-link-processing-example", ngImport: i0, template: `
-    <div class="link-examples">
-      <h2>Ejemplos de Procesamiento de Enlaces</h2>
-
-      <div class="example-section">
-        <h3>Texto sin procesamiento de enlaces:</h3>
-        <val-text [props]="basicTextProps"></val-text>
-      </div>
-
-      <div class="example-section">
-        <h3>Texto con procesamiento básico de enlaces:</h3>
-        <val-text [props]="basicLinksProps"></val-text>
-      </div>
-
-      <div class="example-section">
-        <h3>Enlaces con configuración personalizada:</h3>
-        <val-text [props]="customLinksProps"></val-text>
-      </div>
-
-      <div class="example-section">
-        <h3>Enlaces internos y externos mezclados:</h3>
-        <val-text [props]="mixedLinksProps"></val-text>
-      </div>
-
-      <div class="example-section">
-        <h3>Enlaces sin abrir en nueva pestaña:</h3>
-        <val-text [props]="sameTabLinksProps"></val-text>
-      </div>
-
-      <div class="example-section">
-        <h3>Enlaces estilo Markdown [texto](url):</h3>
-        <val-text [props]="markdownLinksProps"></val-text>
-      </div>
-
-      <div class="example-section">
-        <h3>Mezcla de enlaces directos y Markdown:</h3>
-        <val-text [props]="mixedFormatsProps"></val-text>
-      </div>
-
-      <div class="example-section">
-        <h3>Corrección de puntuación en URLs:</h3>
-        <val-text [props]="punctuationTestProps"></val-text>
-      </div>
-
-      <div class="example-section">
-        <h3>URLs complejas con parámetros y fragmentos:</h3>
-        <val-text [props]="complexUrlsProps"></val-text>
-      </div>
-    </div>
-  `, isInline: true, styles: [".example-section{margin-bottom:24px;padding:16px;border:1px solid var(--ion-color-light, #f4f5f8);border-radius:8px;background:var(--ion-color-light-tint, #f5f6f9)}h2{color:var(--ion-color-primary, #3880ff);margin-bottom:20px}h3{color:var(--ion-color-dark, #222428);margin-bottom:10px;font-size:16px}\n"], dependencies: [{ kind: "component", type: TextComponent, selector: "val-text", inputs: ["props"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LinkProcessingExampleComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'val-link-processing-example', standalone: true, imports: [TextComponent], template: `
-    <div class="link-examples">
-      <h2>Ejemplos de Procesamiento de Enlaces</h2>
-
-      <div class="example-section">
-        <h3>Texto sin procesamiento de enlaces:</h3>
-        <val-text [props]="basicTextProps"></val-text>
-      </div>
-
-      <div class="example-section">
-        <h3>Texto con procesamiento básico de enlaces:</h3>
-        <val-text [props]="basicLinksProps"></val-text>
-      </div>
-
-      <div class="example-section">
-        <h3>Enlaces con configuración personalizada:</h3>
-        <val-text [props]="customLinksProps"></val-text>
-      </div>
-
-      <div class="example-section">
-        <h3>Enlaces internos y externos mezclados:</h3>
-        <val-text [props]="mixedLinksProps"></val-text>
-      </div>
-
-      <div class="example-section">
-        <h3>Enlaces sin abrir en nueva pestaña:</h3>
-        <val-text [props]="sameTabLinksProps"></val-text>
-      </div>
-
-      <div class="example-section">
-        <h3>Enlaces estilo Markdown [texto](url):</h3>
-        <val-text [props]="markdownLinksProps"></val-text>
-      </div>
-
-      <div class="example-section">
-        <h3>Mezcla de enlaces directos y Markdown:</h3>
-        <val-text [props]="mixedFormatsProps"></val-text>
-      </div>
-
-      <div class="example-section">
-        <h3>Corrección de puntuación en URLs:</h3>
-        <val-text [props]="punctuationTestProps"></val-text>
-      </div>
-
-      <div class="example-section">
-        <h3>URLs complejas con parámetros y fragmentos:</h3>
-        <val-text [props]="complexUrlsProps"></val-text>
-      </div>
-    </div>
-  `, styles: [".example-section{margin-bottom:24px;padding:16px;border:1px solid var(--ion-color-light, #f4f5f8);border-radius:8px;background:var(--ion-color-light-tint, #f5f6f9)}h2{color:var(--ion-color-primary, #3880ff);margin-bottom:20px}h3{color:var(--ion-color-dark, #222428);margin-bottom:10px;font-size:16px}\n"] }]
-        }] });
-
-/**
- * MultiLanguageDemoComponent - Demuestra el sistema de idiomas flexible.
- *
- * Este componente muestra cómo el sistema maneja múltiples idiomas,
- * fallbacks automáticos y warnings por traducciones faltantes.
- */
-class MultiLanguageDemoComponent {
-    constructor(content, langService) {
-        this.content = content;
-        this.langService = langService;
-        this.availableLanguages = [];
-        this.analysisResults = null;
-        // Global content observables
-        this.okButton$ = this.content.fromContent({ key: 'ok' });
-        this.cancelButton$ = this.content.fromContent({ key: 'cancel' });
-        this.saveButton$ = this.content.fromContent({ key: 'save' });
-        this.deleteButton$ = this.content.fromContent({ key: 'delete' });
-        // Content that might have missing translations
-        this.nextButton$ = this.content.fromContent({ key: 'next', fallback: 'Next' });
-        this.finishButton$ = this.content.fromContent({ key: 'finish', fallback: 'Finish' });
-        this.searchPlaceholder$ = this.content.fromContent({ key: 'searchPlaceholder', fallback: 'Search...' });
-        this.noDataMessage$ = this.content.fromContent({ key: 'noData', fallback: 'No data available' });
-    }
-    ngOnInit() {
-        this.availableLanguages = this.langService.availableLangs;
-    }
-    switchLanguage(lang) {
-        console.log(`Switching to language: ${lang}`);
-        this.langService.setLang(lang);
-        this.analysisResults = null; // Reset analysis when language changes
-    }
-    getLanguageName(lang) {
-        const names = {
-            [LANGUAGES.ES]: 'Español',
-            [LANGUAGES.EN]: 'English',
-            [LANGUAGES.FR]: 'Français',
-            [LANGUAGES.DE]: 'Deutsch',
-            pt: 'Português',
-        };
-        return names[lang] || lang.toUpperCase();
-    }
-    analyzeCurrentComponent() {
-        const componentName = '_global'; // Analyzing global content for this demo
-        const availableLanguages = this.langService.getAvailableLanguagesForComponent(componentName);
-        const missingKeys = this.langService.getMissingContentKeys(componentName, this.langService.currentLang);
-        this.analysisResults = {
-            availableLanguages,
-            missingKeys,
-        };
-        console.log('Component analysis results:', this.analysisResults);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MultiLanguageDemoComponent, deps: [{ token: ContentService }, { token: LangService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: MultiLanguageDemoComponent, isStandalone: true, selector: "val-multi-language-demo", ngImport: i0, template: `
-    <div class="multi-lang-demo">
-      <h2>Sistema de Idiomas Flexible</h2>
-
-      <div class="language-info">
-        <h3>Información del Sistema:</h3>
-        <p><strong>Idioma actual:</strong> {{ langService.currentLang }}</p>
-        <p><strong>Idioma por defecto:</strong> {{ langService.defaultLanguage }}</p>
-        <p><strong>Idiomas disponibles:</strong> {{ langService.availableLangs.join(', ') }}</p>
-      </div>
-
-      <div class="language-switcher">
-        <h3>Cambiar Idioma:</h3>
-        <div class="button-group">
-          <button
-            *ngFor="let lang of availableLanguages"
-            [class.active]="lang === langService.currentLang"
-            (click)="switchLanguage(lang)"
-          >
-            {{ getLanguageName(lang) }}
-          </button>
-          <!-- Ejemplo de idioma no disponible -->
-          <button (click)="switchLanguage('pt')">Português (no disponible)</button>
-        </div>
-      </div>
-
-      <div class="content-examples">
-        <h3>Contenido Global:</h3>
-        <div class="example-grid">
-          <val-text
-            [props]="{ content: okButton$ | async, size: 'medium', color: 'dark', bold: false, processLinks: false }"
-          ></val-text>
-          <val-text
-            [props]="{
-              content: cancelButton$ | async,
-              size: 'medium',
-              color: 'dark',
-              bold: false,
-              processLinks: false,
-            }"
-          ></val-text>
-          <val-text
-            [props]="{ content: saveButton$ | async, size: 'medium', color: 'dark', bold: false, processLinks: false }"
-          ></val-text>
-          <val-text
-            [props]="{
-              content: deleteButton$ | async,
-              size: 'medium',
-              color: 'dark',
-              bold: false,
-              processLinks: false,
-            }"
-          ></val-text>
-        </div>
-
-        <h3>Contenido con Fallback (algunas traducciones faltantes):</h3>
-        <div class="example-grid">
-          <val-text
-            [props]="{ content: nextButton$ | async, size: 'medium', color: 'dark', bold: false, processLinks: false }"
-          ></val-text>
-          <val-text
-            [props]="{
-              content: finishButton$ | async,
-              size: 'medium',
-              color: 'dark',
-              bold: false,
-              processLinks: false,
-            }"
-          ></val-text>
-          <val-text
-            [props]="{
-              content: searchPlaceholder$ | async,
-              size: 'medium',
-              color: 'dark',
-              bold: false,
-              processLinks: false,
-            }"
-          ></val-text>
-          <val-text
-            [props]="{
-              content: noDataMessage$ | async,
-              size: 'medium',
-              color: 'dark',
-              bold: false,
-              processLinks: false,
-            }"
-          ></val-text>
-        </div>
-      </div>
-
-      <div class="warning-info">
-        <h3>Información de Warnings:</h3>
-        <p>
-          Abre la consola del navegador para ver los warnings cuando cambies a idiomas con traducciones incompletas
-          (francés, alemán).
-        </p>
-        <p>El sistema automáticamente usará el idioma por defecto o el primer idioma disponible como fallback.</p>
-      </div>
-
-      <div class="component-analysis">
-        <h3>Análisis del Componente:</h3>
-        <button (click)="analyzeCurrentComponent()">Analizar Contenido</button>
-        <div *ngIf="analysisResults" class="analysis-results">
-          <p>
-            <strong>Idiomas disponibles para este componente:</strong>
-            {{ analysisResults.availableLanguages.join(', ') }}
-          </p>
-          <div *ngIf="analysisResults.missingKeys.length > 0">
-            <p>
-              <strong>Claves faltantes en {{ langService.currentLang }}:</strong>
-            </p>
-            <ul>
-              <li *ngFor="let key of analysisResults.missingKeys">{{ key }}</li>
-            </ul>
-          </div>
-        </div>
-      </div>
-    </div>
-  `, isInline: true, styles: [".multi-lang-demo{padding:20px;max-width:800px}.language-info,.content-examples,.warning-info,.component-analysis{margin:20px 0;padding:15px;border:1px solid var(--ion-color-light, #f4f5f8);border-radius:8px;background:var(--ion-color-light-tint, #f5f6f9)}.button-group{display:flex;gap:10px;flex-wrap:wrap}.button-group button{padding:8px 16px;border:1px solid var(--ion-color-primary, #3880ff);background:#fff;color:var(--ion-color-primary, #3880ff);border-radius:4px;cursor:pointer;transition:all .2s}.button-group button:hover{background:var(--ion-color-primary-tint, #4992ff);color:#fff}.button-group button.active{background:var(--ion-color-primary, #3880ff);color:#fff}.example-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin-top:10px}.analysis-results{margin-top:10px;padding:10px;background:#fff;border-radius:4px}h2{color:var(--ion-color-primary, #3880ff)}h3{color:var(--ion-color-dark, #222428);margin-bottom:10px}\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: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "component", type: TextComponent, selector: "val-text", inputs: ["props"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MultiLanguageDemoComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'val-multi-language-demo', standalone: true, imports: [CommonModule, TextComponent, ButtonComponent], template: `
-    <div class="multi-lang-demo">
-      <h2>Sistema de Idiomas Flexible</h2>
-
-      <div class="language-info">
-        <h3>Información del Sistema:</h3>
-        <p><strong>Idioma actual:</strong> {{ langService.currentLang }}</p>
-        <p><strong>Idioma por defecto:</strong> {{ langService.defaultLanguage }}</p>
-        <p><strong>Idiomas disponibles:</strong> {{ langService.availableLangs.join(', ') }}</p>
-      </div>
-
-      <div class="language-switcher">
-        <h3>Cambiar Idioma:</h3>
-        <div class="button-group">
-          <button
-            *ngFor="let lang of availableLanguages"
-            [class.active]="lang === langService.currentLang"
-            (click)="switchLanguage(lang)"
-          >
-            {{ getLanguageName(lang) }}
-          </button>
-          <!-- Ejemplo de idioma no disponible -->
-          <button (click)="switchLanguage('pt')">Português (no disponible)</button>
-        </div>
-      </div>
-
-      <div class="content-examples">
-        <h3>Contenido Global:</h3>
-        <div class="example-grid">
-          <val-text
-            [props]="{ content: okButton$ | async, size: 'medium', color: 'dark', bold: false, processLinks: false }"
-          ></val-text>
-          <val-text
-            [props]="{
-              content: cancelButton$ | async,
-              size: 'medium',
-              color: 'dark',
-              bold: false,
-              processLinks: false,
-            }"
-          ></val-text>
-          <val-text
-            [props]="{ content: saveButton$ | async, size: 'medium', color: 'dark', bold: false, processLinks: false }"
-          ></val-text>
-          <val-text
-            [props]="{
-              content: deleteButton$ | async,
-              size: 'medium',
-              color: 'dark',
-              bold: false,
-              processLinks: false,
-            }"
-          ></val-text>
-        </div>
-
-        <h3>Contenido con Fallback (algunas traducciones faltantes):</h3>
-        <div class="example-grid">
-          <val-text
-            [props]="{ content: nextButton$ | async, size: 'medium', color: 'dark', bold: false, processLinks: false }"
-          ></val-text>
-          <val-text
-            [props]="{
-              content: finishButton$ | async,
-              size: 'medium',
-              color: 'dark',
-              bold: false,
-              processLinks: false,
-            }"
-          ></val-text>
-          <val-text
-            [props]="{
-              content: searchPlaceholder$ | async,
-              size: 'medium',
-              color: 'dark',
-              bold: false,
-              processLinks: false,
-            }"
-          ></val-text>
-          <val-text
-            [props]="{
-              content: noDataMessage$ | async,
-              size: 'medium',
-              color: 'dark',
-              bold: false,
-              processLinks: false,
-            }"
-          ></val-text>
-        </div>
-      </div>
-
-      <div class="warning-info">
-        <h3>Información de Warnings:</h3>
-        <p>
-          Abre la consola del navegador para ver los warnings cuando cambies a idiomas con traducciones incompletas
-          (francés, alemán).
-        </p>
-        <p>El sistema automáticamente usará el idioma por defecto o el primer idioma disponible como fallback.</p>
-      </div>
-
-      <div class="component-analysis">
-        <h3>Análisis del Componente:</h3>
-        <button (click)="analyzeCurrentComponent()">Analizar Contenido</button>
-        <div *ngIf="analysisResults" class="analysis-results">
-          <p>
-            <strong>Idiomas disponibles para este componente:</strong>
-            {{ analysisResults.availableLanguages.join(', ') }}
-          </p>
-          <div *ngIf="analysisResults.missingKeys.length > 0">
-            <p>
-              <strong>Claves faltantes en {{ langService.currentLang }}:</strong>
-            </p>
-            <ul>
-              <li *ngFor="let key of analysisResults.missingKeys">{{ key }}</li>
-            </ul>
-          </div>
-        </div>
-      </div>
-    </div>
-  `, styles: [".multi-lang-demo{padding:20px;max-width:800px}.language-info,.content-examples,.warning-info,.component-analysis{margin:20px 0;padding:15px;border:1px solid var(--ion-color-light, #f4f5f8);border-radius:8px;background:var(--ion-color-light-tint, #f5f6f9)}.button-group{display:flex;gap:10px;flex-wrap:wrap}.button-group button{padding:8px 16px;border:1px solid var(--ion-color-primary, #3880ff);background:#fff;color:var(--ion-color-primary, #3880ff);border-radius:4px;cursor:pointer;transition:all .2s}.button-group button:hover{background:var(--ion-color-primary-tint, #4992ff);color:#fff}.button-group button.active{background:var(--ion-color-primary, #3880ff);color:#fff}.example-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin-top:10px}.analysis-results{margin-top:10px;padding:10px;background:#fff;border-radius:4px}h2{color:var(--ion-color-primary, #3880ff)}h3{color:var(--ion-color-dark, #222428);margin-bottom:10px}\n"] }]
-        }], ctorParameters: () => [{ type: ContentService }, { type: LangService }] });
-
-/**
- * Simple demo component showcasing reactive content patterns
- * for buttons and alert boxes.
- *
- * Demonstrates:
- * - Button components with reactive text
- * - Alert boxes with reactive content
- * - Language switching
- * - Static vs reactive content patterns
- */
-class ReactiveComponentsDemoComponent {
-    constructor(contentService, langService) {
-        this.contentService = contentService;
-        this.langService = langService;
-        this.subscriptions = new Subscription();
-    }
-    ngOnInit() {
-        this.initializeContent();
-        this.initializeComponents();
-    }
-    ngOnDestroy() {
-        this.subscriptions.unsubscribe();
-    }
-    initializeContent() {
-        // Page-level content
-        this.pageTitle$ = this.contentService.fromContent({
-            className: 'reactiveDemo',
-            key: 'title',
-            fallback: 'Reactive Components Demo',
-        });
-        this.languageLabel$ = this.contentService.fromContent({
-            className: '_global',
-            key: 'language',
-            fallback: 'Language',
-        });
-        this.buttonSectionTitle$ = this.contentService.fromContent({
-            className: 'reactiveDemo',
-            key: 'buttons.title',
-            fallback: 'Reactive Buttons',
-        });
-        this.alertSectionTitle$ = this.contentService.fromContent({
-            className: 'reactiveDemo',
-            key: 'alerts.title',
-            fallback: 'Reactive Alerts',
-        });
-        // Language state
-        this.currentLanguage$ = this.langService.currentLang$;
-        this.availableLanguages$ = this.langService.currentLang$.pipe(map(() => this.langService.availableLangs));
-    }
-    initializeComponents() {
-        // Reactive buttons with common actions
-        this.saveButton = {
-            color: 'primary',
-            fill: 'solid',
-            type: 'button',
-            state: ComponentStates.ENABLED,
-            textConfig: {
-                className: '_global',
-                key: 'save',
-                fallback: 'Save',
-            },
-            handler: () => this.handleSave(),
-        };
-        this.cancelButton = {
-            color: 'medium',
-            fill: 'outline',
-            type: 'button',
-            state: ComponentStates.ENABLED,
-            textConfig: {
-                className: '_global',
-                key: 'cancel',
-                fallback: 'Cancel',
-            },
-            handler: () => this.handleCancel(),
-        };
-        // Static button for comparison
-        this.staticButton = {
-            color: 'tertiary',
-            fill: 'outline',
-            type: 'button',
-            state: ComponentStates.ENABLED,
-            text: 'Static Button', // Static text
-            handler: () => this.handleStatic(),
-        };
-        // Reactive alert boxes
-        this.warningAlert = {
-            box: {
-                color: 'warning',
-                rounded: true,
-                bordered: false,
-                icon: 'warning',
-            },
-            icon: {
-                name: 'warning',
-                color: 'warning',
-                size: 'medium',
-            },
-            textConfig: {
-                className: 'reactiveDemo',
-                key: 'alerts.warning',
-                fallback: 'This is a warning message',
-            },
-            textStyle: {
-                size: 'medium',
-                bold: false,
-            },
-        };
-        this.successAlert = {
-            box: {
-                color: 'success',
-                rounded: true,
-                bordered: false,
-                icon: 'checkmark-circle',
-            },
-            icon: {
-                name: 'checkmark-circle',
-                color: 'success',
-                size: 'medium',
-            },
-            textConfig: {
-                className: 'reactiveDemo',
-                key: 'alerts.success',
-                fallback: 'Operation completed successfully!',
-            },
-            textStyle: {
-                size: 'medium',
-                bold: true,
-            },
-        };
-        // Static alert for comparison
-        this.staticAlert = {
-            box: {
-                color: 'dark',
-                rounded: true,
-                bordered: false,
-                icon: 'information-circle',
-            },
-            icon: {
-                name: 'information-circle',
-                color: 'dark',
-                size: 'medium',
-            },
-            text: 'This is a static alert message', // Static text
-            textStyle: {
-                size: 'medium',
-                bold: false,
-            },
-        };
-    }
-    // Event handlers
-    changeLanguage(language) {
-        this.langService.setLang(language);
-    }
-    handleSave() {
-        console.log('Save button clicked');
-    }
-    handleCancel() {
-        console.log('Cancel button clicked');
-    }
-    handleStatic() {
-        console.log('Static button clicked');
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ReactiveComponentsDemoComponent, deps: [{ token: ContentService }, { token: LangService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ReactiveComponentsDemoComponent, isStandalone: true, selector: "val-reactive-components-demo", ngImport: i0, template: `
-    <div class="reactive-components-demo">
-      <ion-card>
-        <ion-card-header>
-          <ion-card-title>{{ pageTitle$ | async }}</ion-card-title>
-        </ion-card-header>
-
-        <ion-card-content>
-          <!-- Language Selector -->
-          <ion-item>
-            <ion-label>{{ languageLabel$ | async }}</ion-label>
-            <ion-select
-              interface="popover"
-              [value]="currentLanguage$ | async"
-              (ionChange)="changeLanguage($event.detail.value)"
-            >
-              <ion-select-option *ngFor="let lang of availableLanguages$ | async" [value]="lang">
-                {{ lang | uppercase }}
-              </ion-select-option>
-            </ion-select>
-          </ion-item>
-
-          <!-- Reactive Buttons Demo -->
-          <div class="section">
-            <h3>{{ buttonSectionTitle$ | async }}</h3>
-
-            <!-- Common action buttons with reactive text -->
-            <div class="button-grid">
-              <val-button [props]="saveButton"></val-button>
-              <val-button [props]="cancelButton"></val-button>
-              <val-button [props]="staticButton"></val-button>
-            </div>
-          </div>
-
-          <!-- Reactive Alert Boxes Demo -->
-          <div class="section">
-            <h3>{{ alertSectionTitle$ | async }}</h3>
-
-            <!-- Alert with reactive content -->
-            <val-alert-box [props]="warningAlert"></val-alert-box>
-            <val-alert-box [props]="successAlert"></val-alert-box>
-            <val-alert-box [props]="staticAlert"></val-alert-box>
-          </div>
-
-          <!-- Analysis -->
-          <div class="section">
-            <h3>Analysis</h3>
-            <div class="analysis-info">
-              <p><strong>Current Language:</strong> {{ currentLanguage$ | async | uppercase }}</p>
-              <p><strong>Available Languages:</strong> {{ (availableLanguages$ | async)?.join(', ') | uppercase }}</p>
-            </div>
-          </div>
-        </ion-card-content>
-      </ion-card>
-    </div>
-  `, isInline: true, styles: [".reactive-components-demo{padding:16px}.section{margin:24px 0}.button-grid{display:flex;gap:12px;flex-wrap:wrap;margin:16px 0}.analysis-info{background:var(--ion-color-light);padding:16px;border-radius:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.UpperCasePipe, name: "uppercase" }, { kind: "component", type: IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: IonSelect, selector: "ion-select", inputs: ["cancelText", "color", "compareWith", "disabled", "expandedIcon", "fill", "interface", "interfaceOptions", "justify", "label", "labelPlacement", "mode", "multiple", "name", "okText", "placeholder", "selectedText", "shape", "toggleIcon", "value"] }, { kind: "component", type: IonSelectOption, selector: "ion-select-option", inputs: ["disabled", "value"] }, { kind: "component", type: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: ButtonComponent, selector: "val-button", inputs: ["props"], outputs: ["onClick"] }, { kind: "component", type: AlertBoxComponent, selector: "val-alert-box", inputs: ["props"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ReactiveComponentsDemoComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'val-reactive-components-demo', standalone: true, imports: [
-                        CommonModule,
-                        IonCard,
-                        IonCardContent,
-                        IonCardHeader,
-                        IonCardTitle,
-                        IonSelect,
-                        IonSelectOption,
-                        IonItem,
-                        IonLabel,
-                        ButtonComponent,
-                        AlertBoxComponent,
-                    ], template: `
-    <div class="reactive-components-demo">
-      <ion-card>
-        <ion-card-header>
-          <ion-card-title>{{ pageTitle$ | async }}</ion-card-title>
-        </ion-card-header>
-
-        <ion-card-content>
-          <!-- Language Selector -->
-          <ion-item>
-            <ion-label>{{ languageLabel$ | async }}</ion-label>
-            <ion-select
-              interface="popover"
-              [value]="currentLanguage$ | async"
-              (ionChange)="changeLanguage($event.detail.value)"
-            >
-              <ion-select-option *ngFor="let lang of availableLanguages$ | async" [value]="lang">
-                {{ lang | uppercase }}
-              </ion-select-option>
-            </ion-select>
-          </ion-item>
-
-          <!-- Reactive Buttons Demo -->
-          <div class="section">
-            <h3>{{ buttonSectionTitle$ | async }}</h3>
-
-            <!-- Common action buttons with reactive text -->
-            <div class="button-grid">
-              <val-button [props]="saveButton"></val-button>
-              <val-button [props]="cancelButton"></val-button>
-              <val-button [props]="staticButton"></val-button>
-            </div>
-          </div>
-
-          <!-- Reactive Alert Boxes Demo -->
-          <div class="section">
-            <h3>{{ alertSectionTitle$ | async }}</h3>
-
-            <!-- Alert with reactive content -->
-            <val-alert-box [props]="warningAlert"></val-alert-box>
-            <val-alert-box [props]="successAlert"></val-alert-box>
-            <val-alert-box [props]="staticAlert"></val-alert-box>
-          </div>
-
-          <!-- Analysis -->
-          <div class="section">
-            <h3>Analysis</h3>
-            <div class="analysis-info">
-              <p><strong>Current Language:</strong> {{ currentLanguage$ | async | uppercase }}</p>
-              <p><strong>Available Languages:</strong> {{ (availableLanguages$ | async)?.join(', ') | uppercase }}</p>
-            </div>
-          </div>
-        </ion-card-content>
-      </ion-card>
-    </div>
-  `, styles: [".reactive-components-demo{padding:16px}.section{margin:24px 0}.button-grid{display:flex;gap:12px;flex-wrap:wrap;margin:16px 0}.analysis-info{background:var(--ion-color-light);padding:16px;border-radius:8px}\n"] }]
-        }], ctorParameters: () => [{ type: ContentService }, { type: LangService }] });
-
-/**
- * Test component to diagnose reactive content behavior.
- * Compares fromContent vs fromMultipleContent reactivity.
- */
-class ReactivityTestComponent {
-    constructor() {
-        this.contentService = inject(ContentService);
-        this.langService = inject(LangService);
-        // Observable for current language
-        this.currentLang$ = this.langService.currentLang$;
-        // Single key content observables (using fromContent)
-        this.singleWelcome$ = this.contentService.fromContent({
-            className: 'testReactivity',
-            key: 'welcomeMessage',
-            fallback: 'Welcome',
-        });
-        this.singleSave$ = this.contentService.fromContent({
-            className: 'testReactivity',
-            key: 'saveButton',
-            fallback: 'Save',
-        });
-        this.singleCancel$ = this.contentService.fromContent({
-            className: 'testReactivity',
-            key: 'cancelButton',
-            fallback: 'Cancel',
-        });
-        // Multiple keys content observable (using fromMultipleContent)
-        this.multipleContent$ = this.contentService.fromMultipleContent('testReactivity', [
-            'welcomeMessage',
-            'saveButton',
-            'cancelButton',
-        ]);
-        // Direct LangService tests
-        this.directSingle$ = this.langService.getContent('testReactivity', 'welcomeMessage', 'Welcome');
-        this.directMultiple$ = this.langService.getMultipleContent('testReactivity', ['welcomeMessage']);
-        // Update counters
-        this.singleUpdateCount = 0;
-        this.multipleUpdateCount = 0;
-        this.directSingleUpdateCount = 0;
-        this.directMultipleUpdateCount = 0;
-    }
-    ngOnInit() {
-        // Subscribe to observables to count updates
-        this.singleWelcome$.subscribe(() => {
-            this.singleUpdateCount++;
-            console.log('Single key updated:', this.singleUpdateCount);
-        });
-        this.multipleContent$.subscribe(() => {
-            this.multipleUpdateCount++;
-            console.log('Multiple keys updated:', this.multipleUpdateCount);
-        });
-        this.directSingle$.subscribe(() => {
-            this.directSingleUpdateCount++;
-            console.log('Direct single updated:', this.directSingleUpdateCount);
-        });
-        this.directMultiple$.subscribe(() => {
-            this.directMultipleUpdateCount++;
-            console.log('Direct multiple updated:', this.directMultipleUpdateCount);
-        });
-    }
-    switchToSpanish() {
-        this.langService.setLang('es');
-    }
-    switchToEnglish() {
-        this.langService.setLang('en');
-    }
-    switchToFrench() {
-        this.langService.setLang('fr');
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ReactivityTestComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ReactivityTestComponent, isStandalone: true, selector: "val-reactivity-test", ngImport: i0, template: `
-    <div style="padding: 20px; border: 1px solid #ccc; margin: 10px;">
-      <h3>Reactivity Test Component</h3>
-
-      <!-- Current Language -->
-      <div style="margin-bottom: 20px;"><strong>Current Language:</strong> {{ currentLang$ | async }}</div>
-
-      <!-- Language Switch Buttons -->
-      <div style="margin-bottom: 20px;">
-        <button (click)="switchToSpanish()" style="margin-right: 10px;">Switch to ES</button>
-        <button (click)="switchToEnglish()" style="margin-right: 10px;">Switch to EN</button>
-        <button (click)="switchToFrench()">Switch to FR</button>
-      </div>
-
-      <!-- Single Key Tests -->
-      <div style="margin-bottom: 20px;">
-        <h4>Single Key Tests (fromContent)</h4>
-        <div><strong>welcomeMessage (fromContent):</strong> {{ singleWelcome$ | async }}</div>
-        <div><strong>saveButton (fromContent):</strong> {{ singleSave$ | async }}</div>
-        <div><strong>cancelButton (fromContent):</strong> {{ singleCancel$ | async }}</div>
-      </div>
-
-      <!-- Multiple Keys Test -->
-      <div style="margin-bottom: 20px;">
-        <h4>Multiple Keys Test (fromMultipleContent)</h4>
-        <div>
-          <strong>welcomeMessage (multiple):</strong>
-          {{ (multipleContent$ | async)?.['welcomeMessage'] || 'Loading...' }}
-        </div>
-        <div>
-          <strong>saveButton (multiple):</strong> {{ (multipleContent$ | async)?.['saveButton'] || 'Loading...' }}
-        </div>
-        <div>
-          <strong>cancelButton (multiple):</strong> {{ (multipleContent$ | async)?.['cancelButton'] || 'Loading...' }}
-        </div>
-      </div>
-
-      <!-- Direct LangService Tests -->
-      <div style="margin-bottom: 20px;">
-        <h4>Direct LangService Tests</h4>
-        <div><strong>welcomeMessage (direct single):</strong> {{ directSingle$ | async }}</div>
-        <div>
-          <strong>welcomeMessage (direct multiple):</strong>
-          {{ (directMultiple$ | async)?.['welcomeMessage'] || 'Loading...' }}
-        </div>
-      </div>
-
-      <!-- Update Counter -->
-      <div>
-        <h4>Update Counters</h4>
-        <div><strong>Single key updates:</strong> {{ singleUpdateCount }}</div>
-        <div><strong>Multiple keys updates:</strong> {{ multipleUpdateCount }}</div>
-        <div><strong>Direct single updates:</strong> {{ directSingleUpdateCount }}</div>
-        <div><strong>Direct multiple updates:</strong> {{ directMultipleUpdateCount }}</div>
-      </div>
-    </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ReactivityTestComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'val-reactivity-test',
-                    standalone: true,
-                    imports: [CommonModule],
-                    template: `
-    <div style="padding: 20px; border: 1px solid #ccc; margin: 10px;">
-      <h3>Reactivity Test Component</h3>
-
-      <!-- Current Language -->
-      <div style="margin-bottom: 20px;"><strong>Current Language:</strong> {{ currentLang$ | async }}</div>
-
-      <!-- Language Switch Buttons -->
-      <div style="margin-bottom: 20px;">
-        <button (click)="switchToSpanish()" style="margin-right: 10px;">Switch to ES</button>
-        <button (click)="switchToEnglish()" style="margin-right: 10px;">Switch to EN</button>
-        <button (click)="switchToFrench()">Switch to FR</button>
-      </div>
-
-      <!-- Single Key Tests -->
-      <div style="margin-bottom: 20px;">
-        <h4>Single Key Tests (fromContent)</h4>
-        <div><strong>welcomeMessage (fromContent):</strong> {{ singleWelcome$ | async }}</div>
-        <div><strong>saveButton (fromContent):</strong> {{ singleSave$ | async }}</div>
-        <div><strong>cancelButton (fromContent):</strong> {{ singleCancel$ | async }}</div>
-      </div>
-
-      <!-- Multiple Keys Test -->
-      <div style="margin-bottom: 20px;">
-        <h4>Multiple Keys Test (fromMultipleContent)</h4>
-        <div>
-          <strong>welcomeMessage (multiple):</strong>
-          {{ (multipleContent$ | async)?.['welcomeMessage'] || 'Loading...' }}
-        </div>
-        <div>
-          <strong>saveButton (multiple):</strong> {{ (multipleContent$ | async)?.['saveButton'] || 'Loading...' }}
-        </div>
-        <div>
-          <strong>cancelButton (multiple):</strong> {{ (multipleContent$ | async)?.['cancelButton'] || 'Loading...' }}
-        </div>
-      </div>
-
-      <!-- Direct LangService Tests -->
-      <div style="margin-bottom: 20px;">
-        <h4>Direct LangService Tests</h4>
-        <div><strong>welcomeMessage (direct single):</strong> {{ directSingle$ | async }}</div>
-        <div>
-          <strong>welcomeMessage (direct multiple):</strong>
-          {{ (directMultiple$ | async)?.['welcomeMessage'] || 'Loading...' }}
-        </div>
-      </div>
-
-      <!-- Update Counter -->
-      <div>
-        <h4>Update Counters</h4>
-        <div><strong>Single key updates:</strong> {{ singleUpdateCount }}</div>
-        <div><strong>Multiple keys updates:</strong> {{ multipleUpdateCount }}</div>
-        <div><strong>Direct single updates:</strong> {{ directSingleUpdateCount }}</div>
-        <div><strong>Direct multiple updates:</strong> {{ directMultipleUpdateCount }}</div>
-      </div>
-    </div>
-  `,
-                }]
-        }] });
-
-/**
- * Ejemplo de uso de los componentes popover-selector y language-selector
- */
-class SelectorExamplesComponent {
-    constructor() {
-        // ✅ Ejemplos de Popover Selector Genérico
-        this.categorySelector = {
-            options: [
-                { value: 'work', label: 'Trabajo', icon: 'briefcase' },
-                { value: 'personal', label: 'Personal', icon: 'person' },
-                { value: 'travel', label: 'Viajes', icon: 'airplane' },
-                { value: 'health', label: 'Salud', icon: 'fitness' },
-            ],
-            selectedValue: 'work',
-            label: 'Categoría',
-            icon: 'folder',
-            color: 'primary',
-            size: 'default',
-            fill: 'outline',
-        };
-        this.prioritySelector = {
-            options: [
-                { value: 'low', label: 'Baja', icon: 'arrow-down', disabled: false },
-                { value: 'medium', label: 'Media', icon: 'remove' },
-                { value: 'high', label: 'Alta', icon: 'arrow-up' },
-                { value: 'urgent', label: 'Urgente', icon: 'warning' },
-            ],
-            selectedValue: 'medium',
-            label: 'Prioridad',
-            icon: 'flag',
-            color: 'warning',
-            size: 'large',
-            fill: 'solid',
-            shape: 'round',
-        };
-        this.multipleSelector = {
-            options: [
-                { value: 'email', label: 'Email', icon: 'mail' },
-                { value: 'sms', label: 'SMS', icon: 'chatbox' },
-                { value: 'push', label: 'Push', icon: 'notifications' },
-                { value: 'in-app', label: 'In-App', icon: 'apps' },
-            ],
-            selectedValue: ['email', 'push'],
-            label: 'Notificaciones',
-            icon: 'notifications-circle',
-            multiple: true,
-            color: 'tertiary',
-            size: 'default',
-            fill: 'outline',
-            showCheckmark: true,
-        };
-        // ✅ Ejemplos de Language Selector (con soporte multiidioma)
-        // Los nombres de idiomas se obtienen automáticamente del sistema de contenido
-        // y se muestran traducidos según el idioma actual de la aplicación
-        this.basicLanguageSelector = {
-            showLabel: true,
-            label: 'Idioma',
-            color: 'medium',
-            size: 'default',
-            fill: 'outline',
-        };
-        // Con banderas y nombres traducidos automáticamente
-        this.flagLanguageSelector = {
-            showLabel: true,
-            label: 'Language / Idioma',
-            showFlags: true,
-            color: 'primary',
-            size: 'large',
-            fill: 'solid',
-        };
-        // Con nombres personalizados (sobrescribe las traducciones automáticas)
-        this.customLanguageSelector = {
-            showLabel: true,
-            labelConfig: {
-                className: '_global',
-                key: 'language',
-                fallback: 'Idioma',
-            },
-            showFlags: true,
-            color: 'secondary',
-            size: 'default',
-            fill: 'outline',
-            shape: 'round',
-            customLanguageNames: {
-                es: 'Español (España)',
-                en: 'English (US)',
-                fr: 'Français',
-                de: 'Deutsch',
-            },
-        };
-        // Compacto sin etiqueta, solo banderas y nombres traducidos
-        this.compactLanguageSelector = {
-            showLabel: false,
-            showFlags: true,
-            color: 'tertiary',
-            size: 'small',
-            fill: 'clear',
-        };
-    }
-    // ✅ Event Handlers
-    onCategoryChange(category) {
-        console.log('Category changed:', category);
-    }
-    onPriorityChange(priority) {
-        console.log('Priority changed:', priority);
-    }
-    onMultipleChange(notifications) {
-        console.log('Notifications changed:', notifications);
-    }
-    onLanguageChange(language) {
-        console.log('Language changed to:', language);
-        // La aplicación automáticamente actualizará todos los nombres de idiomas
-        // según la nueva configuración de idioma seleccionada
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelectorExamplesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SelectorExamplesComponent, isStandalone: true, selector: "app-selector-examples", ngImport: i0, template: `
-    <div class="selector-examples">
-      <h2>Ejemplos de Selectores</h2>
-
-      <!-- Popover Selector Genérico -->
-      <div class="section">
-        <h3>Popover Selector Genérico</h3>
-
-        <div class="example-group">
-          <h4>Selector de Categorías:</h4>
-          <val-popover-selector [props]="categorySelector" (selectionChange)="onCategoryChange($event)">
-          </val-popover-selector>
-        </div>
-
-        <div class="example-group">
-          <h4>Selector de Prioridad:</h4>
-          <val-popover-selector [props]="prioritySelector" (selectionChange)="onPriorityChange($event)">
-          </val-popover-selector>
-        </div>
-
-        <div class="example-group">
-          <h4>Selector Múltiple:</h4>
-          <val-popover-selector [props]="multipleSelector" (selectionChange)="onMultipleChange($event)">
-          </val-popover-selector>
-        </div>
-      </div>
-
-      <!-- Language Selector -->
-      <div class="section">
-        <h3>Selector de Idioma (Multiidioma)</h3>
-        <p>Los nombres de idiomas se muestran traducidos según el idioma actual:</p>
-
-        <div class="example-group">
-          <h4>Selector Básico (nombres traducidos):</h4>
-          <val-language-selector [props]="basicLanguageSelector"> </val-language-selector>
-        </div>
-
-        <div class="example-group">
-          <h4>Selector con Banderas (nombres traducidos):</h4>
-          <val-language-selector [props]="flagLanguageSelector"> </val-language-selector>
-        </div>
-
-        <div class="example-group">
-          <h4>Selector Personalizado (nombres propios):</h4>
-          <val-language-selector [props]="customLanguageSelector" (languageChange)="onLanguageChange($event)">
-          </val-language-selector>
-        </div>
-
-        <div class="example-group">
-          <h4>Selector Compacto:</h4>
-          <val-language-selector [props]="compactLanguageSelector"> </val-language-selector>
-        </div>
-      </div>
-    </div>
-  `, isInline: true, styles: [".selector-examples{padding:20px;max-width:800px;margin:0 auto}.section{margin:30px 0;padding:20px;border:1px solid var(--ion-color-light);border-radius:8px;background:var(--ion-color-step-50)}.section h3{margin:0 0 20px;color:var(--ion-color-primary)}.example-group{margin:20px 0;padding:15px;background:#fff;border-radius:8px;box-shadow:0 2px 4px #0000001a}.example-group h4{margin:0 0 15px;color:var(--ion-color-medium)}\n"], dependencies: [{ kind: "component", type: PopoverSelectorComponent, selector: "val-popover-selector", inputs: ["props"], outputs: ["selectionChange"] }, { kind: "component", type: LanguageSelectorComponent, selector: "val-language-selector", inputs: ["props"], outputs: ["languageChange"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelectorExamplesComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-selector-examples', standalone: true, imports: [PopoverSelectorComponent, LanguageSelectorComponent], template: `
-    <div class="selector-examples">
-      <h2>Ejemplos de Selectores</h2>
-
-      <!-- Popover Selector Genérico -->
-      <div class="section">
-        <h3>Popover Selector Genérico</h3>
-
-        <div class="example-group">
-          <h4>Selector de Categorías:</h4>
-          <val-popover-selector [props]="categorySelector" (selectionChange)="onCategoryChange($event)">
-          </val-popover-selector>
-        </div>
-
-        <div class="example-group">
-          <h4>Selector de Prioridad:</h4>
-          <val-popover-selector [props]="prioritySelector" (selectionChange)="onPriorityChange($event)">
-          </val-popover-selector>
-        </div>
-
-        <div class="example-group">
-          <h4>Selector Múltiple:</h4>
-          <val-popover-selector [props]="multipleSelector" (selectionChange)="onMultipleChange($event)">
-          </val-popover-selector>
-        </div>
-      </div>
-
-      <!-- Language Selector -->
-      <div class="section">
-        <h3>Selector de Idioma (Multiidioma)</h3>
-        <p>Los nombres de idiomas se muestran traducidos según el idioma actual:</p>
-
-        <div class="example-group">
-          <h4>Selector Básico (nombres traducidos):</h4>
-          <val-language-selector [props]="basicLanguageSelector"> </val-language-selector>
-        </div>
-
-        <div class="example-group">
-          <h4>Selector con Banderas (nombres traducidos):</h4>
-          <val-language-selector [props]="flagLanguageSelector"> </val-language-selector>
-        </div>
-
-        <div class="example-group">
-          <h4>Selector Personalizado (nombres propios):</h4>
-          <val-language-selector [props]="customLanguageSelector" (languageChange)="onLanguageChange($event)">
-          </val-language-selector>
-        </div>
-
-        <div class="example-group">
-          <h4>Selector Compacto:</h4>
-          <val-language-selector [props]="compactLanguageSelector"> </val-language-selector>
-        </div>
-      </div>
-    </div>
-  `, styles: [".selector-examples{padding:20px;max-width:800px;margin:0 auto}.section{margin:30px 0;padding:20px;border:1px solid var(--ion-color-light);border-radius:8px;background:var(--ion-color-step-50)}.section h3{margin:0 0 20px;color:var(--ion-color-primary)}.example-group{margin:20px 0;padding:15px;background:#fff;border-radius:8px;box-shadow:0 2px 4px #0000001a}.example-group h4{margin:0 0 15px;color:var(--ion-color-medium)}\n"] }]
-        }] });
-
-/**
- * Simple test component to diagnose the user's specific issue.
- * Tests the exact pattern the user is using.
- */
-class UserIssueTestComponent {
-    constructor() {
-        this.contentService = inject(ContentService);
-        this.langService = inject(LangService);
-        // Current language observable
-        this.currentLang$ = this.langService.currentLang$;
-        // Direct ContentService pattern (what user is trying)
-        this.saveButtonDirect$ = this.contentService.fromContent({ key: 'save' });
-        this.cancelButtonDirect$ = this.contentService.fromContent({ key: 'cancel' });
-        // ContentHelper pattern (user's alternative)
-        this.contentHelper = this.contentService.forComponent('_global');
-        this.saveButtonHelper$ = this.contentHelper.get('save');
-        this.cancelButtonHelper$ = this.contentHelper.get('cancel');
-        // Direct LangService for comparison
-        this.saveButtonLang$ = this.langService.getContent('_global', 'save');
-        this.cancelButtonLang$ = this.langService.getContent('_global', 'cancel');
-        // Update counters
-        this.directUpdateCount = 0;
-        this.helperUpdateCount = 0;
-        this.langServiceUpdateCount = 0;
-    }
-    ngOnInit() {
-        console.log('UserIssueTestComponent: Initializing...');
-        // Subscribe to count updates
-        this.saveButtonDirect$.subscribe(value => {
-            this.directUpdateCount++;
-            console.log('Direct fromContent updated:', value, 'Count:', this.directUpdateCount);
-        });
-        this.saveButtonHelper$.subscribe(value => {
-            this.helperUpdateCount++;
-            console.log('Helper updated:', value, 'Count:', this.helperUpdateCount);
-        });
-        this.saveButtonLang$.subscribe(value => {
-            this.langServiceUpdateCount++;
-            console.log('LangService updated:', value, 'Count:', this.langServiceUpdateCount);
-        });
-        // Log initial state
-        console.log('Current language:', this.langService.currentLang);
-        console.log('Available languages:', this.langService.availableLangs);
-        console.log('Has save content:', this.langService.hasContent('_global', 'save'));
-        console.log('Has cancel content:', this.langService.hasContent('_global', 'cancel'));
-    }
-    switchToSpanish() {
-        console.log('Switching to Spanish...');
-        this.langService.setLang('es');
-    }
-    switchToEnglish() {
-        console.log('Switching to English...');
-        this.langService.setLang('en');
-    }
-    // Synchronous methods for debugging
-    getSaveTextSync() {
-        return this.contentService.getText('save', 'Save (fallback)');
-    }
-    getCancelTextSync() {
-        return this.contentService.getText('cancel', 'Cancel (fallback)');
-    }
-    getAvailableLanguages() {
-        return this.langService.availableLangs.join(', ');
-    }
-    hasContentSave() {
-        return this.langService.hasContent('_global', 'save');
-    }
-    hasContentCancel() {
-        return this.langService.hasContent('_global', 'cancel');
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: UserIssueTestComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: UserIssueTestComponent, isStandalone: true, selector: "val-user-issue-test", ngImport: i0, template: `
-    <div style="padding: 20px; border: 2px solid #007bff; margin: 10px; border-radius: 8px;">
-      <h3>User Issue Test - Exact Pattern</h3>
-
-      <!-- Current Language Display -->
-      <div style="margin-bottom: 20px; padding: 10px; background: #f0f8ff; border-radius: 4px;">
-        <strong>Current Language:</strong> {{ currentLang$ | async }}
-      </div>
-
-      <!-- Language Switch Buttons -->
-      <div style="margin-bottom: 20px;">
-        <button
-          (click)="switchToSpanish()"
-          style="margin-right: 10px; padding: 8px 16px; background: #28a745; color: white; border: none; border-radius: 4px; cursor: pointer;"
-        >
-          Switch to ES
-        </button>
-        <button
-          (click)="switchToEnglish()"
-          style="margin-right: 10px; padding: 8px 16px; background: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer;"
-        >
-          Switch to EN
-        </button>
-      </div>
-
-      <!-- Direct ContentService Tests -->
-      <div style="margin-bottom: 20px; padding: 10px; background: #fff3cd; border-radius: 4px;">
-        <h4>Direct ContentService fromContent (user's pattern)</h4>
-        <div>
-          <strong>Save Button:</strong>
-          <ng-container *ngIf="saveButtonDirect$ | async as save; else loading">{{ save }}</ng-container>
-        </div>
-        <div>
-          <strong>Cancel Button:</strong>
-          <ng-container *ngIf="cancelButtonDirect$ | async as cancel; else loading">{{ cancel }}</ng-container>
-        </div>
-      </div>
-
-      <!-- ContentHelper Tests -->
-      <div style="margin-bottom: 20px; padding: 10px; background: #d1ecf1; border-radius: 4px;">
-        <h4>ContentHelper forComponent (user's helper)</h4>
-        <div>
-          <strong>Save Button:</strong>
-          <ng-container *ngIf="saveButtonHelper$ | async as save; else loading">{{ save }}</ng-container>
-        </div>
-        <div>
-          <strong>Cancel Button:</strong>
-          <ng-container *ngIf="cancelButtonHelper$ | async as cancel; else loading">{{ cancel }}</ng-container>
-        </div>
-      </div>
-
-      <!-- Direct LangService Tests -->
-      <div style="margin-bottom: 20px; padding: 10px; background: '#d4edda'; border-radius: 4px;">
-        <h4>Direct LangService (for comparison)</h4>
-        <div>
-          <strong>Save Button:</strong>
-          <ng-container *ngIf="saveButtonLang$ | async as save; else loading">{{ save }}</ng-container>
-        </div>
-        <div>
-          <strong>Cancel Button:</strong>
-          <ng-container *ngIf="cancelButtonLang$ | async as cancel; else loading">{{ cancel }}</ng-container>
-        </div>
-      </div>
-
-      <ng-template #loading>Loading...</ng-template>
-
-      <!-- Synchronous Tests -->
-      <div style="margin-bottom: 20px; padding: 10px; background: #f8d7da; border-radius: 4px;">
-        <h4>Synchronous getText (for reference)</h4>
-        <div><strong>Save Button (sync):</strong> {{ getSaveTextSync() }}</div>
-        <div><strong>Cancel Button (sync):</strong> {{ getCancelTextSync() }}</div>
-      </div>
-
-      <!-- Debug Information -->
-      <div style="margin-bottom: 20px; padding: 10px; background: #e2e3e5; border-radius: 4px;">
-        <h4>Debug Info</h4>
-        <div><strong>Available Languages:</strong> {{ getAvailableLanguages() }}</div>
-        <div><strong>Has 'save' content:</strong> {{ hasContentSave() }}</div>
-        <div><strong>Has 'cancel' content:</strong> {{ hasContentCancel() }}</div>
-      </div>
-
-      <!-- Update Counters -->
-      <div style="padding: 10px; background: #fff; border: 1px solid #dee2e6; border-radius: 4px;">
-        <h4>Update Counters (should increment on language change)</h4>
-        <div><strong>Direct fromContent updates:</strong> {{ directUpdateCount }}</div>
-        <div><strong>Helper updates:</strong> {{ helperUpdateCount }}</div>
-        <div><strong>LangService updates:</strong> {{ langServiceUpdateCount }}</div>
-      </div>
-    </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: UserIssueTestComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'val-user-issue-test',
-                    standalone: true,
-                    imports: [CommonModule],
-                    template: `
-    <div style="padding: 20px; border: 2px solid #007bff; margin: 10px; border-radius: 8px;">
-      <h3>User Issue Test - Exact Pattern</h3>
-
-      <!-- Current Language Display -->
-      <div style="margin-bottom: 20px; padding: 10px; background: #f0f8ff; border-radius: 4px;">
-        <strong>Current Language:</strong> {{ currentLang$ | async }}
-      </div>
-
-      <!-- Language Switch Buttons -->
-      <div style="margin-bottom: 20px;">
-        <button
-          (click)="switchToSpanish()"
-          style="margin-right: 10px; padding: 8px 16px; background: #28a745; color: white; border: none; border-radius: 4px; cursor: pointer;"
-        >
-          Switch to ES
-        </button>
-        <button
-          (click)="switchToEnglish()"
-          style="margin-right: 10px; padding: 8px 16px; background: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer;"
-        >
-          Switch to EN
-        </button>
-      </div>
-
-      <!-- Direct ContentService Tests -->
-      <div style="margin-bottom: 20px; padding: 10px; background: #fff3cd; border-radius: 4px;">
-        <h4>Direct ContentService fromContent (user's pattern)</h4>
-        <div>
-          <strong>Save Button:</strong>
-          <ng-container *ngIf="saveButtonDirect$ | async as save; else loading">{{ save }}</ng-container>
-        </div>
-        <div>
-          <strong>Cancel Button:</strong>
-          <ng-container *ngIf="cancelButtonDirect$ | async as cancel; else loading">{{ cancel }}</ng-container>
-        </div>
-      </div>
-
-      <!-- ContentHelper Tests -->
-      <div style="margin-bottom: 20px; padding: 10px; background: #d1ecf1; border-radius: 4px;">
-        <h4>ContentHelper forComponent (user's helper)</h4>
-        <div>
-          <strong>Save Button:</strong>
-          <ng-container *ngIf="saveButtonHelper$ | async as save; else loading">{{ save }}</ng-container>
-        </div>
-        <div>
-          <strong>Cancel Button:</strong>
-          <ng-container *ngIf="cancelButtonHelper$ | async as cancel; else loading">{{ cancel }}</ng-container>
-        </div>
-      </div>
-
-      <!-- Direct LangService Tests -->
-      <div style="margin-bottom: 20px; padding: 10px; background: '#d4edda'; border-radius: 4px;">
-        <h4>Direct LangService (for comparison)</h4>
-        <div>
-          <strong>Save Button:</strong>
-          <ng-container *ngIf="saveButtonLang$ | async as save; else loading">{{ save }}</ng-container>
-        </div>
-        <div>
-          <strong>Cancel Button:</strong>
-          <ng-container *ngIf="cancelButtonLang$ | async as cancel; else loading">{{ cancel }}</ng-container>
-        </div>
-      </div>
-
-      <ng-template #loading>Loading...</ng-template>
-
-      <!-- Synchronous Tests -->
-      <div style="margin-bottom: 20px; padding: 10px; background: #f8d7da; border-radius: 4px;">
-        <h4>Synchronous getText (for reference)</h4>
-        <div><strong>Save Button (sync):</strong> {{ getSaveTextSync() }}</div>
-        <div><strong>Cancel Button (sync):</strong> {{ getCancelTextSync() }}</div>
-      </div>
-
-      <!-- Debug Information -->
-      <div style="margin-bottom: 20px; padding: 10px; background: #e2e3e5; border-radius: 4px;">
-        <h4>Debug Info</h4>
-        <div><strong>Available Languages:</strong> {{ getAvailableLanguages() }}</div>
-        <div><strong>Has 'save' content:</strong> {{ hasContentSave() }}</div>
-        <div><strong>Has 'cancel' content:</strong> {{ hasContentCancel() }}</div>
-      </div>
-
-      <!-- Update Counters -->
-      <div style="padding: 10px; background: #fff; border: 1px solid #dee2e6; border-radius: 4px;">
-        <h4>Update Counters (should increment on language change)</h4>
-        <div><strong>Direct fromContent updates:</strong> {{ directUpdateCount }}</div>
-        <div><strong>Helper updates:</strong> {{ helperUpdateCount }}</div>
-        <div><strong>LangService updates:</strong> {{ langServiceUpdateCount }}</div>
-      </div>
-    </div>
-  `,
-                }]
-        }] });
-
-const text = {
-    es: {
-        spanish: 'Español',
-        english: 'Inglés',
-    },
-    en: {
-        spanish: 'Spanish',
-        english: 'English',
-    },
-};
-var LangSettings = new TextContent(text);
-
-/**
- * Global content that can be used across all components.
- * These are common texts like buttons, actions, states, etc.
- * Structure: {es: {key1: 'value1', key2: 'value2'}, en: {key1: 'value1', key2: 'value2'}, fr: {...}}
- *
- * Note: You can add any language code. The system will automatically detect available languages
- * and provide intelligent fallbacks with warnings for missing translations.
+ * Global content that can be used across all components.
+ * These are common texts like buttons, actions, states, etc.
+ * Structure: {es: {key1: 'value1', key2: 'value2'}, en: {key1: 'value1', key2: 'value2'}, fr: {...}}
+ *
+ * Note: You can add any language code. The system will automatically detect available languages
+ * and provide intelligent fallbacks with warnings for missing translations.
  */
 const globalContentData = {
     es: {
@@ -10021,60 +7392,6 @@ const globalContentData = {
         // Common placeholders
         searchPlaceholder: 'Search...',
     },
-    fr: {
-        // Common buttons - Example of partial translation (missing some keys intentionally)
-        ok: 'OK',
-        cancel: 'Annuler',
-        save: 'Sauvegarder',
-        delete: 'Supprimer',
-        edit: 'Modifier',
-        close: 'Fermer',
-        back: 'Retour',
-        // Common states and messages (intentionally incomplete to show fallback behavior)
-        loading: 'Chargement...',
-        error: 'Erreur',
-        success: 'Succès',
-        // Common confirmations
-        areYouSure: 'Êtes-vous sûr?',
-        // Language names (translated) - flat keys for type compatibility
-        languageName_es: 'Espagnol',
-        languageName_en: 'Anglais',
-        languageName_fr: 'Français',
-        languageName_de: 'Allemand',
-        languageName_pt: 'Portugais',
-        languageName_it: 'Italien',
-        languageName_zh: 'Chinois',
-        languageName_ja: 'Japonais',
-        languageName_ko: 'Coréen',
-        languageName_ru: 'Russe',
-        languageName_ar: 'Arabe',
-        language: 'Langue',
-    },
-    de: {
-        // Common buttons - Another example of partial translation
-        ok: 'OK',
-        cancel: 'Abbrechen',
-        save: 'Speichern',
-        delete: 'Löschen',
-        // Common states and messages
-        loading: 'Laden...',
-        error: 'Fehler',
-        // Common confirmations
-        areYouSure: 'Sind Sie sicher?',
-        // Language names (translated) - flat keys for type compatibility
-        languageName_es: 'Spanisch',
-        languageName_en: 'Englisch',
-        languageName_fr: 'Französisch',
-        languageName_de: 'Deutsch',
-        languageName_pt: 'Portugiesisch',
-        languageName_it: 'Italienisch',
-        languageName_zh: 'Chinesisch',
-        languageName_ja: 'Japanisch',
-        languageName_ko: 'Koreanisch',
-        languageName_ru: 'Russisch',
-        languageName_ar: 'Arabisch',
-        language: 'Sprache',
-    },
 };
 const GlobalContent = new TextContent(globalContentData);
 const content = {
@@ -10154,5 +7471,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ActionType, AlertBoxComponent, AvatarComponent, BannerComponent, BaseDefault, BoxComponent, ButtonComponent, ButtonGroupComponent, CardComponent, CardSection, CardType, CheckInputComponent, ClearDefault, ClearDefaultBlock, ClearDefaultFull, ClearDefaultRound, ClearDefaultRoundBlock, ClearDefaultRoundFull, CommentInputComponent, ComponentContentHelper, ComponentStates, ComprehensiveLinkTestComponent, ContentLoaderComponent, ContentService, CustomContentDemoComponent, DateInputComponent, DisplayComponent, DisplayDemoComponent, DisplayExampleComponent, DividerComponent, DownloadService, EmailInputComponent, ExpandableTextComponent, FileInputComponent, FooterComponent, FormComponent, FormFooterComponent, GlobalContent, HeaderComponent, HintComponent, HourInputComponent, HrefComponent, Icon, IconComponent, IconService, ImageComponent, InAppBrowserService, InputType, ItemListComponent, LANGUAGES, LangService, LanguageSelectorComponent, LayeredCardComponent, LayoutComponent, LinkComponent, LinkProcessingExampleComponent, LinkProcessorService, LinksCakeComponent, ListContentHelper, LocalStorageService, MOTION, MultiLanguageDemoComponent, NavigationService, NoContentComponent, NotesBoxComponent, NumberInputComponent, OutlineDefault, OutlineDefaultBlock, OutlineDefaultFull, OutlineDefaultRound, OutlineDefaultRoundBlock, OutlineDefaultRoundFull, PasswordInputComponent, PinInputComponent, PopoverSelectorComponent, PrimarySolidBlockButton, PrimarySolidBlockHrefButton, PrimarySolidBlockIconButton, PrimarySolidBlockIconHrefButton, PrimarySolidDefaultRoundButton, PrimarySolidDefaultRoundHrefButton, PrimarySolidDefaultRoundIconButton, PrimarySolidDefaultRoundIconHrefButton, PrimarySolidFullButton, PrimarySolidFullHrefButton, PrimarySolidFullIconButton, PrimarySolidFullIconHrefButton, PrimarySolidLargeRoundButton, PrimarySolidLargeRoundHrefButton, PrimarySolidLargeRoundIconButton, PrimarySolidLargeRoundIconHrefButton, PrimarySolidSmallRoundButton, PrimarySolidSmallRoundHrefButton, PrimarySolidSmallRoundIconButton, PrimarySolidSmallRoundIconHrefButton, ProcessLinksPipe, ProgressBarComponent, ProgressStatusComponent, PrompterComponent, RadioInputComponent, ReactiveComponentsDemoComponent, ReactivityTestComponent, SearchSelectorComponent, SearchbarComponent, SecondarySolidBlockButton, SecondarySolidBlockHrefButton, SecondarySolidBlockIconButton, SecondarySolidBlockIconHrefButton, SecondarySolidDefaultRoundButton, SecondarySolidDefaultRoundHrefButton, SecondarySolidDefaultRoundIconButton, SecondarySolidDefaultRoundIconHrefButton, SecondarySolidFullButton, SecondarySolidFullHrefButton, SecondarySolidFullIconButton, SecondarySolidFullIconHrefButton, SecondarySolidLargeRoundButton, SecondarySolidLargeRoundHrefButton, SecondarySolidLargeRoundIconButton, SecondarySolidLargeRoundIconHrefButton, SecondarySolidSmallRoundButton, SecondarySolidSmallRoundHrefButton, SecondarySolidSmallRoundIconButton, SecondarySolidSmallRoundIconHrefButton, SelectSearchComponent, SelectorExamplesComponent, SimpleComponent, SolidBlockButton, SolidDefault, SolidDefaultBlock, SolidDefaultButton, SolidDefaultFull, SolidDefaultRound, SolidDefaultRoundBlock, SolidDefaultRoundButton, SolidDefaultRoundFull, SolidFullButton, SolidLargeButton, SolidLargeRoundButton, SolidSmallButton, SolidSmallRoundButton, TextComponent, TextContent, TextInputComponent, ThemeOption, ThemeService, TitleBlockComponent, TitleComponent, ToastService, ToolbarActionType, ToolbarComponent, UserIssueTestComponent, ValtechConfigService, WizardComponent, WizardFooterComponent, applyDefaultValueToControl, content, createComponentContentHelper, createContentHelper, createReactiveProps, createTextProps, createTitleProps, fromContent, fromContentWithInterpolation, fromMultipleContent, globalContentData, goToTop, interpolateContent, isAtEnd, maxLength, replaceSpecialChars, resolveColor, resolveInputDefaultValue, shouldUseReactiveContent };
+export { ActionType, AlertBoxComponent, AvatarComponent, BannerComponent, BaseDefault, BoxComponent, ButtonComponent, ButtonGroupComponent, CardComponent, CardSection, CardType, CheckInputComponent, ClearDefault, ClearDefaultBlock, ClearDefaultFull, ClearDefaultRound, ClearDefaultRoundBlock, ClearDefaultRoundFull, CommentInputComponent, ComponentContentHelper, ComponentStates, ContentLoaderComponent, ContentService, DateInputComponent, DisplayComponent, DividerComponent, DownloadService, EmailInputComponent, ExpandableTextComponent, FileInputComponent, FooterComponent, FormComponent, FormFooterComponent, GlobalContent, HeaderComponent, HintComponent, HourInputComponent, HrefComponent, Icon, IconComponent, IconService, ImageComponent, InAppBrowserService, InputType, ItemListComponent, LANGUAGES, LangService, LanguageSelectorComponent, LayeredCardComponent, LayoutComponent, LinkComponent, LinkProcessorService, LinksCakeComponent, ListContentHelper, LocalStorageService, MOTION, NavigationService, NoContentComponent, NotesBoxComponent, NumberInputComponent, OutlineDefault, OutlineDefaultBlock, OutlineDefaultFull, OutlineDefaultRound, OutlineDefaultRoundBlock, OutlineDefaultRoundFull, PasswordInputComponent, PinInputComponent, PopoverSelectorComponent, PrimarySolidBlockButton, PrimarySolidBlockHrefButton, PrimarySolidBlockIconButton, PrimarySolidBlockIconHrefButton, PrimarySolidDefaultRoundButton, PrimarySolidDefaultRoundHrefButton, PrimarySolidDefaultRoundIconButton, PrimarySolidDefaultRoundIconHrefButton, PrimarySolidFullButton, PrimarySolidFullHrefButton, PrimarySolidFullIconButton, PrimarySolidFullIconHrefButton, PrimarySolidLargeRoundButton, PrimarySolidLargeRoundHrefButton, PrimarySolidLargeRoundIconButton, PrimarySolidLargeRoundIconHrefButton, PrimarySolidSmallRoundButton, PrimarySolidSmallRoundHrefButton, PrimarySolidSmallRoundIconButton, PrimarySolidSmallRoundIconHrefButton, ProcessLinksPipe, ProgressBarComponent, ProgressStatusComponent, PrompterComponent, RadioInputComponent, SearchSelectorComponent, SearchbarComponent, SecondarySolidBlockButton, SecondarySolidBlockHrefButton, SecondarySolidBlockIconButton, SecondarySolidBlockIconHrefButton, SecondarySolidDefaultRoundButton, SecondarySolidDefaultRoundHrefButton, SecondarySolidDefaultRoundIconButton, SecondarySolidDefaultRoundIconHrefButton, SecondarySolidFullButton, SecondarySolidFullHrefButton, SecondarySolidFullIconButton, SecondarySolidFullIconHrefButton, SecondarySolidLargeRoundButton, SecondarySolidLargeRoundHrefButton, SecondarySolidLargeRoundIconButton, SecondarySolidLargeRoundIconHrefButton, SecondarySolidSmallRoundButton, SecondarySolidSmallRoundHrefButton, SecondarySolidSmallRoundIconButton, SecondarySolidSmallRoundIconHrefButton, SelectSearchComponent, SimpleComponent, SolidBlockButton, SolidDefault, SolidDefaultBlock, SolidDefaultButton, SolidDefaultFull, SolidDefaultRound, SolidDefaultRoundBlock, SolidDefaultRoundButton, SolidDefaultRoundFull, SolidFullButton, SolidLargeButton, SolidLargeRoundButton, SolidSmallButton, SolidSmallRoundButton, TextComponent, TextContent, TextInputComponent, ThemeOption, ThemeService, TitleBlockComponent, TitleComponent, ToastService, ToolbarActionType, ToolbarComponent, ValtechConfigService, WizardComponent, WizardFooterComponent, applyDefaultValueToControl, content, createButtonProps, createComponentContentHelper, createContentHelper, createReactiveProps, createTextProps, createTitleProps, fromContent, fromContentWithInterpolation, fromMultipleContent, globalContentData, goToTop, interpolateContent, isAtEnd, maxLength, replaceSpecialChars, resolveColor, resolveInputDefaultValue, shouldUseReactiveContent };
 //# sourceMappingURL=valtech-components.mjs.map