valtech-components 2.0.291 → 2.0.292

package/fesm2022/valtech-components.mjs

@@ -1543,11 +1543,20 @@ class TextContent {
         return this.text;
     }
 }
-var LangOption;
-(function (LangOption) {
-    LangOption["ES"] = "es";
-    LangOption["EN"] = "en";
-})(LangOption || (LangOption = {}));
+/**
+ * Common language constants for convenience.
+ * Users can still use any language code string directly.
+ */
+const LANGUAGES = {
+    ES: 'es',
+    EN: 'en',
+    FR: 'fr',
+    DE: 'de',
+    PT: 'pt',
+    IT: 'it',
+    ZH: 'zh',
+    JA: 'ja',
+};
 
 /**
  * LangService - Reactive language and content management service.
@@ -1555,6 +1564,9 @@ var LangOption;
  * This service provides reactive content management with Observable-based language switching.
  * Components can subscribe to content changes and automatically update when the language changes.
  *
+ * The service automatically detects available languages from the content configuration
+ * and provides intelligent fallbacks with console warnings for missing translations.
+ *
  * @example Basic usage:
  * ```typescript
  * constructor(private langService: LangService) {}
@@ -1574,12 +1586,120 @@ var LangOption;
  */
 class LangService {
     constructor(config) {
-        this.default = LangOption.ES;
-        console.log('injected config: ', config);
+        this.availableLanguages = [];
+        this.warnedMissingLanguages = new Set();
+        console.log('LangService: Injected config:', config);
         this.content = config.content;
         this.config = config;
+        // Detect available languages from content
+        this.detectAvailableLanguages();
+        // Set default language (prefer Spanish, then English, then first available)
+        this.defaultLang = this.determineDefaultLanguage();
+        // Initialize with stored language or default
         const current = LocalStorageService.get(LANG);
-        this.selectedLang = new BehaviorSubject(current || this.default);
+        const initialLang = this.validateLanguage(current) || this.defaultLang;
+        this.selectedLang = new BehaviorSubject(initialLang);
+        console.log('LangService: Initialized with languages:', {
+            available: this.availableLanguages,
+            default: this.defaultLang,
+            current: initialLang,
+        });
+    }
+    /**
+     * Detect available languages from the content configuration.
+     * Scans all component content to find which languages are actually configured.
+     */
+    detectAvailableLanguages() {
+        const languageSet = new Set();
+        Object.values(this.content).forEach(componentContent => {
+            if (componentContent?.Content) {
+                Object.keys(componentContent.Content).forEach(lang => {
+                    languageSet.add(lang);
+                });
+            }
+        });
+        this.availableLanguages = Array.from(languageSet).sort();
+        if (this.availableLanguages.length === 0) {
+            console.warn('LangService: No languages detected in content configuration!');
+            this.availableLanguages = [LANGUAGES.ES]; // Fallback
+        }
+    }
+    /**
+     * Determine the best default language based on available content.
+     */
+    determineDefaultLanguage() {
+        // Preference order: Spanish, English, then first available
+        const preferredOrder = [LANGUAGES.ES, LANGUAGES.EN];
+        for (const preferred of preferredOrder) {
+            if (this.availableLanguages.includes(preferred)) {
+                return preferred;
+            }
+        }
+        return this.availableLanguages[0];
+    }
+    /**
+     * Validate if a language is available in the content.
+     */
+    validateLanguage(lang) {
+        if (!lang)
+            return null;
+        return this.availableLanguages.includes(lang) ? lang : null;
+    }
+    /**
+     * Get the best available language for a component and key.
+     * Provides intelligent fallback with warnings.
+     */
+    getBestAvailableContent(className, key, requestedLang) {
+        const componentContent = this.content[className];
+        if (!componentContent) {
+            return {
+                content: undefined,
+                actualLang: requestedLang,
+                shouldWarn: false,
+            };
+        }
+        // Try requested language first
+        const requestedContent = componentContent.Content[requestedLang];
+        if (requestedContent?.[key]) {
+            return {
+                content: requestedContent[key],
+                actualLang: requestedLang,
+                shouldWarn: false,
+            };
+        }
+        // Language not available, try fallbacks
+        const warningKey = `${className}.${key}.${requestedLang}`;
+        const shouldWarn = !this.warnedMissingLanguages.has(warningKey);
+        if (shouldWarn) {
+            this.warnedMissingLanguages.add(warningKey);
+        }
+        // Try default language
+        if (requestedLang !== this.defaultLang) {
+            const defaultContent = componentContent.Content[this.defaultLang];
+            if (defaultContent?.[key]) {
+                return {
+                    content: defaultContent[key],
+                    actualLang: this.defaultLang,
+                    shouldWarn,
+                };
+            }
+        }
+        // Try first available language
+        for (const availableLang of this.availableLanguages) {
+            const availableContent = componentContent.Content[availableLang];
+            if (availableContent?.[key]) {
+                return {
+                    content: availableContent[key],
+                    actualLang: availableLang,
+                    shouldWarn,
+                };
+            }
+        }
+        return {
+            content: undefined,
+            actualLang: requestedLang,
+            shouldWarn,
+        };
     }
     /**
      * Observable that emits the current language whenever it changes.
@@ -1594,13 +1714,32 @@ class LangService {
     get currentLang() {
         return this.selectedLang.value;
     }
+    /**
+     * Get array of available languages detected from content.
+     */
+    get availableLangs() {
+        return [...this.availableLanguages];
+    }
+    /**
+     * Get the default language.
+     */
+    get defaultLanguage() {
+        return this.defaultLang;
+    }
     /**
      * Set the current language and persist it to localStorage.
      * This will trigger updates in all reactive content subscriptions.
      *
+     * Validates that the language is available and warns if not.
+     *
      * @param lang - The language to set
      */
     setLang(lang) {
+        if (!this.availableLanguages.includes(lang)) {
+            console.warn(`LangService: Language "${lang}" is not available. Available languages:`, this.availableLanguages);
+            console.warn(`LangService: Falling back to default language "${this.defaultLang}"`);
+            lang = this.defaultLang;
+        }
         this.selectedLang.next(lang);
         LocalStorageService.set(LANG, lang);
     }
@@ -1610,10 +1749,12 @@ class LangService {
      * @deprecated Use getText() or getContent() for better type safety
      */
     Text(className) {
-        return this.content[className].Content[this.selectedLang.value];
+        const componentContent = this.content[className];
+        return componentContent?.Content[this.selectedLang.value] || {};
     }
     /**
      * Get a single content string synchronously for the current language.
+     * Provides intelligent fallback with warnings for missing translations.
      *
      * @param className - The component class name
      * @param key - The text key
@@ -1621,12 +1762,16 @@ class LangService {
      * @returns The text string or fallback
      */
     getText(className, key, fallback) {
-        const classContent = this.content[className]?.Content[this.selectedLang.value];
-        return classContent?.[key] || fallback || `[${className}.${key}]`;
+        const result = this.getBestAvailableContent(className, key, this.selectedLang.value);
+        if (result.shouldWarn && result.actualLang !== this.selectedLang.value) {
+            console.warn(`LangService: Content "${className}.${key}" not available in "${this.selectedLang.value}".`, `Using "${result.actualLang}" instead. Available languages:`, this.availableLanguages);
+        }
+        return result.content || fallback || `[${className}.${key}]`;
     }
     /**
      * Get a reactive Observable for a specific text key that updates when language changes.
      * This is the recommended method for components that need reactive content.
+     * Provides intelligent fallback with warnings for missing translations.
      *
      * @param className - The component class name
      * @param key - The text key
@@ -1635,12 +1780,16 @@ class LangService {
      */
     getContent(className, key, fallback) {
         return this.currentLang$.pipe(map(lang => {
-            const classContent = this.content[className]?.Content[lang];
-            return classContent?.[key] || fallback || `[${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);
+            }
+            return result.content || fallback || `[${className}.${key}]`;
         }), distinctUntilChanged());
     }
     /**
      * Get reactive content for multiple keys at once.
+     * Provides intelligent fallback with warnings for missing translations.
      *
      * @param className - The component class name
      * @param keys - Array of text keys to retrieve
@@ -1648,16 +1797,19 @@ class LangService {
      */
     getMultipleContent(className, keys) {
         return this.currentLang$.pipe(map(lang => {
-            const classContent = this.content[className]?.Content[lang] || {};
             const result = {};
             keys.forEach(key => {
-                result[key] = classContent[key] || `[${className}.${key}]`;
+                const contentResult = this.getBestAvailableContent(className, key, lang);
+                if (contentResult.shouldWarn && contentResult.actualLang !== lang) {
+                    console.warn(`LangService: Content "${className}.${key}" not available in "${lang}".`, `Using "${contentResult.actualLang}" instead.`);
+                }
+                result[key] = contentResult.content || `[${className}.${key}]`;
             });
             return result;
         }), distinctUntilChanged((prev, curr) => JSON.stringify(prev) === JSON.stringify(curr)));
     }
     /**
-     * Check if a content key exists for a component.
+     * Check if a content key exists for a component in any available language.
      *
      * @param className - The component class name
      * @param key - The text key
@@ -1669,6 +1821,49 @@ class LangService {
             return false;
         return Object.values(classContent.Content).some(langContent => langContent && typeof langContent[key] === 'string');
     }
+    /**
+     * Check if a content key exists for a component in a specific language.
+     *
+     * @param className - The component class name
+     * @param key - The text key
+     * @param lang - The language to check (defaults to current language)
+     * @returns True if the key exists in the specified language
+     */
+    hasContentInLanguage(className, key, lang) {
+        const targetLang = lang || this.currentLang;
+        const classContent = this.content[className]?.Content[targetLang];
+        return classContent && typeof classContent[key] === 'string';
+    }
+    /**
+     * Get available languages for a specific component.
+     *
+     * @param className - The component class name
+     * @returns Array of language codes available for the component
+     */
+    getAvailableLanguagesForComponent(className) {
+        const classContent = this.content[className];
+        if (!classContent)
+            return [];
+        return Object.keys(classContent.Content).filter(lang => classContent.Content[lang] && Object.keys(classContent.Content[lang]).length > 0);
+    }
+    /**
+     * Get missing content keys for a component in a specific language.
+     * Useful for identifying incomplete translations.
+     *
+     * @param className - The component class name
+     * @param lang - The language to check
+     * @param referenceLang - The reference language to compare against (defaults to default language)
+     * @returns Array of missing keys
+     */
+    getMissingContentKeys(className, lang, referenceLang) {
+        const refLang = referenceLang || this.defaultLang;
+        const classContent = this.content[className];
+        if (!classContent)
+            return [];
+        const referenceContent = classContent.Content[refLang] || {};
+        const targetContent = classContent.Content[lang] || {};
+        return Object.keys(referenceContent).filter(key => !targetContent[key] || typeof targetContent[key] !== 'string');
+    }
     // Legacy getters/setters for backward compatibility
     get Lang() {
         return this.currentLang;
@@ -6564,7 +6759,7 @@ class CustomContentDemoComponent {
         this.diagnoseConfiguration();
     }
     switchLanguage() {
-        const newLang = this.currentLang === 'es' ? LangOption.EN : LangOption.ES;
+        const newLang = this.currentLang === 'es' ? LANGUAGES.EN : LANGUAGES.ES;
         this.content.setLang(newLang);
         // Actualizar textos síncronos después del cambio
         setTimeout(() => {
@@ -7032,6 +7227,301 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
   `, 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 }] });
+
 const text = {
     es: {
         spanish: 'Español',
@@ -7047,7 +7537,10 @@ 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'}}
+ * 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: {
@@ -7118,6 +7611,34 @@ 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?',
+    },
+    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?',
+    },
 };
 const GlobalContent = new TextContent(globalContentData);
 const content = {
@@ -7180,5 +7701,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, ComponentStates, ComprehensiveLinkTestComponent, ContentLoaderComponent, ContentService, CustomContentDemoComponent, DateInputComponent, DisplayComponent, DividerComponent, DownloadService, EmailInputComponent, ExpandableTextComponent, FileInputComponent, FooterComponent, FormComponent, FormFooterComponent, GlobalContent, HeaderComponent, HintComponent, HourInputComponent, HrefComponent, Icon, IconComponent, IconService, ImageComponent, InAppBrowserService, InputType, ItemListComponent, LangOption, LangService, LayeredCardComponent, LayoutComponent, LinkComponent, LinkProcessingExampleComponent, LinkProcessorService, LinksCakeComponent, LocalStorageService, MOTION, NavigationService, NoContentComponent, NotesBoxComponent, NumberInputComponent, OutlineDefault, OutlineDefaultBlock, OutlineDefaultFull, OutlineDefaultRound, OutlineDefaultRoundBlock, OutlineDefaultRoundFull, PasswordInputComponent, PinInputComponent, 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, createContentHelper, createTextProps, fromContent, fromContentWithInterpolation, fromMultipleContent, globalContentData, goToTop, interpolateContent, isAtEnd, maxLength, replaceSpecialChars, resolveColor, resolveInputDefaultValue };
+export { ActionType, AlertBoxComponent, AvatarComponent, BannerComponent, BaseDefault, BoxComponent, ButtonComponent, ButtonGroupComponent, CardComponent, CardSection, CardType, CheckInputComponent, ClearDefault, ClearDefaultBlock, ClearDefaultFull, ClearDefaultRound, ClearDefaultRoundBlock, ClearDefaultRoundFull, CommentInputComponent, ComponentStates, ComprehensiveLinkTestComponent, ContentLoaderComponent, ContentService, CustomContentDemoComponent, DateInputComponent, DisplayComponent, DividerComponent, DownloadService, EmailInputComponent, ExpandableTextComponent, FileInputComponent, FooterComponent, FormComponent, FormFooterComponent, GlobalContent, HeaderComponent, HintComponent, HourInputComponent, HrefComponent, Icon, IconComponent, IconService, ImageComponent, InAppBrowserService, InputType, ItemListComponent, LANGUAGES, LangService, LayeredCardComponent, LayoutComponent, LinkComponent, LinkProcessingExampleComponent, LinkProcessorService, LinksCakeComponent, LocalStorageService, MOTION, MultiLanguageDemoComponent, NavigationService, NoContentComponent, NotesBoxComponent, NumberInputComponent, OutlineDefault, OutlineDefaultBlock, OutlineDefaultFull, OutlineDefaultRound, OutlineDefaultRoundBlock, OutlineDefaultRoundFull, PasswordInputComponent, PinInputComponent, 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, createContentHelper, createTextProps, fromContent, fromContentWithInterpolation, fromMultipleContent, globalContentData, goToTop, interpolateContent, isAtEnd, maxLength, replaceSpecialChars, resolveColor, resolveInputDefaultValue };
 //# sourceMappingURL=valtech-components.mjs.map