valtech-components 2.0.325 → 2.0.328

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, distinctUntilChanged, shareReplay, Subscription, of, combineLatest } from 'rxjs';
+import { BehaviorSubject, distinctUntilChanged, shareReplay, map, Subscription, of, combineLatest } from 'rxjs';
 import { Router, RouterLink } from '@angular/router';
 import { Browser } from '@capacitor/browser';
 import * as i1$1 from '@angular/platform-browser';
@@ -219,6 +219,125 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Output
             }] } });
 
+/**
+ * Simplified content utilities for the new LangService-only system.
+ * This replaces the old reactive-content.ts with a much simpler approach.
+ */
+/**
+ * Helper function to determine if component should use reactive content.
+ * @param metadata Component metadata
+ * @returns True if component should use reactive content
+ */
+function shouldUseReactiveContent(metadata) {
+    return !metadata.content && !!(metadata.contentKey && metadata.contentClass);
+}
+/**
+ * Extract content configuration from metadata.
+ * @param metadata Component metadata
+ * @returns Content configuration for LangService
+ */
+function extractContentConfig(metadata) {
+    return {
+        className: metadata.contentClass || '',
+        key: metadata.contentKey || '',
+        fallback: metadata.contentFallback,
+    };
+}
+/**
+ * Create reactive content metadata with defaults.
+ * @param config Partial content configuration
+ * @returns Complete reactive content metadata
+ */
+function createReactiveContentMetadata(config) {
+    return {
+        content: config.content,
+        contentKey: config.contentKey,
+        contentClass: config.contentClass,
+        contentFallback: config.contentFallback,
+    };
+}
+/**
+ * Interpolate content string with values.
+ * Replaces placeholders like {{key}} or {key} with actual values.
+ *
+ * @param content - Content string with placeholders
+ * @param values - Values to interpolate
+ * @returns Interpolated string
+ *
+ * @example
+ * ```typescript
+ * interpolateContent('Hello {{name}}!', { name: 'World' })
+ * // Returns: 'Hello World!'
+ * ```
+ */
+function interpolateContent$1(content, values) {
+    if (!values || !content) {
+        return content;
+    }
+    return content.replace(/\{\{?(\w+)\}?\}/g, (match, key) => {
+        const value = values[key];
+        return value !== undefined ? String(value) : match;
+    });
+}
+/**
+ * Check if component should use reactive content with interpolation.
+ * @param metadata Component metadata with interpolation
+ * @returns True if component should use reactive content with interpolation
+ */
+function shouldUseReactiveContentWithInterpolation(metadata) {
+    return shouldUseReactiveContent(metadata) && !!metadata.contentInterpolation;
+}
+/**
+ * Extract content configuration with interpolation from metadata.
+ * @param metadata Component metadata with interpolation
+ * @returns Content configuration for LangService with interpolation data
+ */
+function extractContentConfigWithInterpolation(metadata) {
+    return {
+        className: metadata.contentClass || '',
+        key: metadata.contentKey || '',
+        fallback: metadata.contentFallback,
+        interpolation: metadata.contentInterpolation,
+    };
+}
+/**
+ * Helper function to get reactive content with interpolation using LangService.
+ * This provides a unified way to get reactive, interpolated content.
+ *
+ * @param langService - The LangService instance
+ * @param metadata - Component metadata with interpolation
+ * @returns Observable that emits interpolated content
+ *
+ * @example
+ * ```typescript
+ * const content$ = fromContentWithInterpolation(this.langService, {
+ *   contentClass: 'MyComponent',
+ *   contentKey: 'greeting',
+ *   contentInterpolation: { name: 'World' }
+ * });
+ * ```
+ */
+function fromContentWithInterpolation$1(langService, // LangService type would cause circular dependency
+metadata) {
+    // Observable<string> but avoiding import
+    const config = extractContentConfigWithInterpolation(metadata);
+    if (!config.className || !config.key) {
+        throw new Error('fromContentWithInterpolation requires both contentClass and contentKey');
+    }
+    return langService.getContentWithInterpolation(config.className, config.key, config.interpolation, config.fallback);
+}
+/**
+ * Helper function to get static content with interpolation.
+ * This provides interpolation for static content strings.
+ *
+ * @param content - Static content string
+ * @param interpolationData - Values to interpolate
+ * @returns Interpolated string
+ */
+function interpolateStaticContent(content, interpolationData) {
+    return interpolateContent$1(content, interpolationData);
+}
+
 const ENABLED = 'ENABLED';
 const DISABLED = 'DISABLED';
 const WORKING = 'WORKING';
@@ -434,191 +553,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 }]
         }], ctorParameters: () => [] });
 
-/**
- * Create a reactive content observable from a content key.
- * This is the primary utility for the `fromContent` pattern with unified support
- * for both simple content and content with interpolation.
- *
- * @param langService - The language service instance
- * @param config - Content configuration with optional interpolation
- * @returns Observable that emits the content string and updates on language change
- *
- * @example Simple content:
- * ```typescript
- * // Component-specific content
- * this.title$ = fromContent(this.langService, {
- *   className: 'HeaderComponent',
- *   key: 'title',
- *   fallback: 'Default Title'
- * });
- *
- * // Global content (no className needed)
- * this.saveButton$ = fromContent(this.langService, {
- *   key: 'save'
- * });
- * ```
- *
- * @example Content with interpolation:
- * ```typescript
- * // Content: "Hello {name}, you have {count} messages"
- * this.greeting$ = fromContent(this.langService, {
- *   className: 'WelcomeComponent',
- *   key: 'greeting',
- *   interpolation: { name: 'John', count: 5 }
- * });
- * // Results in: "Hello John, you have 5 messages"
- * ```
- */
-function fromContent(langService, config) {
-    // Use _global as default className if not provided
-    const finalClassName = config.className || '_global';
-    const contentObservable = langService.getContent(finalClassName, config.key, config.fallback);
-    // If interpolation is provided, apply it
-    if (config.interpolation) {
-        return contentObservable.pipe(map(content => interpolateContent(content, config.interpolation)));
-    }
-    return contentObservable;
-}
-/**
- * Create a reactive content observable with interpolation support.
- *
- * @deprecated Use fromContent() with interpolation property instead.
- * This method is kept for backward compatibility.
- *
- * @param langService - The language service instance
- * @param config - Interpolated content configuration
- * @returns Observable that emits the interpolated content string
- *
- * @example Migration:
- * ```typescript
- * // OLD (deprecated):
- * this.greeting$ = fromContentWithInterpolation(this.langService, {
- *   className: 'WelcomeComponent',
- *   key: 'greeting',
- *   interpolation: { name: 'John', count: 5 }
- * });
- *
- * // NEW (recommended):
- * this.greeting$ = fromContent(this.langService, {
- *   className: 'WelcomeComponent',
- *   key: 'greeting',
- *   interpolation: { name: 'John', count: 5 }
- * });
- * ```
- */
-function fromContentWithInterpolation(langService, config) {
-    // Delegate to the unified fromContent method
-    return fromContent(langService, config);
-}
-/**
- * Create multiple reactive content observables at once.
- * Useful when a component needs several content strings.
- *
- * @param langService - The language service instance
- * @param className - The component class name
- * @param keys - Array of content keys to retrieve
- * @returns Observable that emits an object with all requested content
- *
- * @example
- * ```typescript
- * this.content$ = fromMultipleContent(this.langService, 'FormComponent', [
- *   'title', 'submitButton', 'cancelButton'
- * ]);
- *
- * // In template
- * <ng-container *ngIf="content$ | async as content">
- *   <h2>{{ content.title }}</h2>
- *   <button>{{ content.submitButton }}</button>
- *   <button>{{ content.cancelButton }}</button>
- * </ng-container>
- * ```
- */
-function fromMultipleContent(langService, className, keys) {
-    return langService.getMultipleContent(className, keys);
-}
-/**
- * Helper function to interpolate values into a content string.
- * Replaces placeholders in the format {key} with corresponding values.
- *
- * @param content - The content string with placeholders
- * @param values - Object with values to interpolate
- * @returns The interpolated string
- *
- * @example
- * ```typescript
- * const result = interpolateContent("Hello {name}!", { name: "World" });
- * // Returns: "Hello World!"
- * ```
- */
-function interpolateContent(content, values) {
-    if (!values)
-        return content;
-    return Object.entries(values).reduce((result, [key, value]) => {
-        return result.replace(new RegExp(`\\{${key}\\}`, 'g'), String(value));
-    }, content);
-}
-/**
- * Factory function to create a content helper bound to a specific component class.
- * This creates a more convenient API for components that need multiple content strings.
- *
- * @param langService - The language service instance
- * @param className - The component class name
- * @returns Object with convenient methods for content retrieval
- *
- * @example
- * ```typescript
- * export class MyComponent {
- *   private content = createContentHelper(this.langService, 'MyComponent');
- *
- *   constructor(private langService: LangService) {}
- *
- *   ngOnInit() {
- *     this.title$ = this.content.get('title');
- *     this.allContent$ = this.content.getMultiple(['title', 'description']);
- *   }
- * }
- * ```
- */
-function createContentHelper(langService, className) {
-    return {
-        /**
-         * Get a single content string reactively.
-         */
-        get(key, fallback) {
-            return fromContent(langService, { className, key, fallback });
-        },
-        /**
-         * Get multiple content strings reactively.
-         */
-        getMultiple(keys) {
-            return fromMultipleContent(langService, className, keys);
-        },
-        /**
-         * Get content with interpolation.
-         */
-        getWithInterpolation(key, interpolation, fallback) {
-            return fromContentWithInterpolation(langService, {
-                className,
-                key,
-                interpolation,
-                fallback,
-            });
-        },
-        /**
-         * Get a single content string synchronously (current language only).
-         */
-        getText(key, fallback) {
-            return langService.getText(className, key, fallback);
-        },
-        /**
-         * Check if a content key exists.
-         */
-        hasContent(key) {
-            return langService.hasContent(className, key);
-        },
-    };
-}
-
 const LANG = 'LANG';
 const THEME = 'THEME';
 
@@ -991,348 +925,221 @@ class LangService {
         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;
-    }
-    set Lang(lang) {
-        this.setLang(lang);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LangService, deps: [{ token: ValtechConfigService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LangService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LangService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [ValtechConfigService]
-                }] }] });
-
-/**
- * ContentService - High-level reactive content management service.
- *
- * This service provides a clean, convenient API for reactive content management
- * without requiring direct interaction with LangService. It acts as a facade
- * that simplifies the most common content operations.
- *
- * @example Basic usage:
- * ```typescript
- * @Component({})
- * export class MyComponent {
- *   content = inject(ContentService);
- *
- *   title$ = this.content.fromContent({
- *     className: 'MyComponent',
- *     key: 'title'
- *   });
- *
- *   constructor() {}
- * }
- * ```
- */
-class ContentService {
-    constructor(langService) {
-        this.langService = langService;
-    }
-    /**
-     * Get current language as an observable stream.
-     * Emits whenever the language changes.
-     */
-    get currentLang$() {
-        return this.langService.currentLang$;
-    }
-    /**
-     * Get current language synchronously.
-     */
-    get currentLang() {
-        return this.langService.currentLang;
-    }
     /**
-     * Set the current language.
-     * This will trigger updates in all reactive content.
+     * Register or update content for a component dynamically.
+     * This allows registering content at runtime without APP_INITIALIZER.
      *
-     * @param lang - The language to set
-     */
-    setLang(lang) {
-        this.langService.setLang(lang);
-    }
-    /**
-     * Create a reactive content observable from a content key.
-     * This is the primary method for reactive content with unified support
-     * for both simple content and content with interpolation.
-     *
-     * @param config - Content configuration with optional interpolation. If className is omitted, searches in global content.
-     * @returns Observable that emits the content string and updates on language change
-     *
-     * @example Simple global content:
-     * ```typescript
-     * // Searches in global content (no className needed)
-     * okButton$ = this.content.fromContent({
-     *   key: 'ok',
-     *   fallback: 'OK'
-     * });
-     * ```
-     *
-     * @example Component-specific content:
-     * ```typescript
-     * title$ = this.content.fromContent({
-     *   className: 'HeaderComponent',
-     *   key: 'title',
-     *   fallback: 'Default Title'
-     * });
-     * ```
+     * @param className - The component class name
+     * @param content - The multilingual content object
+     * @param merge - Whether to merge with existing content (default: true)
      *
-     * @example Content with interpolation:
+     * @example
      * ```typescript
-     * // Global content with interpolation
-     * confirmation$ = this.content.fromContent({
-     *   key: 'deleteConfirmation',
-     *   interpolation: { itemName: 'archivo' }
-     * });
-     *
-     * // Component content with interpolation
-     * greeting$ = this.content.fromContent({
-     *   className: 'WelcomeComponent',
-     *   key: 'greeting',
-     *   interpolation: { name: 'John', count: 5 }
+     * this.langService.registerContent('MyComponent', {
+     *   [LANGUAGES.ES]: { title: 'Título', description: 'Descripción' },
+     *   [LANGUAGES.EN]: { title: 'Title', description: 'Description' }
      * });
      * ```
      */
-    fromContent(config) {
-        return fromContent(this.langService, config);
+    registerContent(className, content, merge = true) {
+        if (!className) {
+            console.error('LangService: className is required for registerContent');
+            return;
+        }
+        if (!content || typeof content !== 'object') {
+            console.error('LangService: Invalid content provided for registerContent');
+            return;
+        }
+        console.log(`LangService: Registering content for "${className}"`, {
+            merge,
+            languages: Object.keys(content),
+        });
+        // Initialize component content if it doesn't exist
+        if (!this.content[className]) {
+            this.content[className] = new TextContent({});
+        }
+        // Merge or replace content for each language
+        Object.entries(content).forEach(([lang, langContent]) => {
+            if (!langContent || typeof langContent !== 'object') {
+                console.warn(`LangService: Invalid content for language "${lang}" in "${className}"`);
+                return;
+            }
+            if (!this.content[className].Content[lang]) {
+                this.content[className].Content[lang] = {};
+            }
+            if (merge) {
+                this.content[className].Content[lang] = {
+                    ...this.content[className].Content[lang],
+                    ...langContent,
+                };
+            }
+            else {
+                this.content[className].Content[lang] = { ...langContent };
+            }
+        });
+        // Update available languages
+        this.detectAvailableLanguages();
+        console.log(`LangService: Content registered successfully for "${className}"`);
     }
     /**
-     * Create a reactive content observable with interpolation support.
+     * Update multiple content registrations at once.
      *
-     * @deprecated Use fromContent() with interpolation property instead.
-     * This method is kept for backward compatibility.
+     * @param contentMap - Map of className to content
+     * @param merge - Whether to merge with existing content (default: true)
      *
-     * @param config - Interpolated content configuration. If className is omitted, searches in global content.
-     * @returns Observable that emits the interpolated content string
-     *
-     * @example Migration:
+     * @example
      * ```typescript
-     * // OLD (deprecated):
-     * greeting$ = this.content.fromContentWithInterpolation({
-     *   className: 'WelcomeComponent',
-     *   key: 'greeting',
-     *   interpolation: { name: 'John', count: 5 }
-     * });
-     *
-     * // NEW (recommended):
-     * greeting$ = this.content.fromContent({
-     *   className: 'WelcomeComponent',
-     *   key: 'greeting',
-     *   interpolation: { name: 'John', count: 5 }
+     * this.langService.registerMultipleContent({
+     *   'Component1': { [LANGUAGES.ES]: { key1: 'valor1' } },
+     *   'Component2': { [LANGUAGES.EN]: { key2: 'value2' } }
      * });
      * ```
      */
-    fromContentWithInterpolation(config) {
-        // Delegate to the unified fromContent method
-        return this.fromContent(config);
+    registerMultipleContent(contentMap, merge = true) {
+        if (!contentMap || typeof contentMap !== 'object') {
+            console.error('LangService: Invalid contentMap provided for registerMultipleContent');
+            return;
+        }
+        console.log('LangService: Registering multiple content entries', {
+            classes: Object.keys(contentMap),
+            merge,
+        });
+        Object.entries(contentMap).forEach(([className, content]) => {
+            this.registerContent(className, content, merge);
+        });
+        console.log('LangService: Multiple content registration completed');
     }
     /**
-     * Create multiple reactive content observables at once.
-     * Useful when a component needs several content strings.
-     *
-     * @param className - The component class name
-     * @param keys - Array of content keys to retrieve
-     * @returns Observable that emits an object with all requested content
-     *
-     * @example
-     * ```typescript
-     * content$ = this.content.fromMultipleContent('FormComponent', [
-     *   'title', 'submitButton', 'cancelButton'
-     * ]);
+     * Remove content for a specific component.
      *
-     * // In template
-     * <ng-container *ngIf="content$ | async as content">
-     *   <h2>{{ content['title'] }}</h2>
-     *   <button>{{ content['submitButton'] }}</button>
-     *   <button>{{ content['cancelButton'] }}</button>
-     * </ng-container>
-     * ```
+     * @param className - The component class name to remove
      */
-    fromMultipleContent(className, keys) {
-        return fromMultipleContent(this.langService, className, keys);
-    }
-    getText(classNameOrKey, keyOrFallback, fallback) {
-        // Handle overloaded signatures
-        if (keyOrFallback === undefined ||
-            (typeof keyOrFallback === 'string' && fallback === undefined)) {
-            // Single parameter or two parameters (key, fallback) - treat as global content
-            return this.langService.getText('_global', classNameOrKey, keyOrFallback);
+    removeContent(className) {
+        if (!className) {
+            console.error('LangService: className is required for removeContent');
+            return;
+        }
+        if (this.content[className]) {
+            delete this.content[className];
+            this.detectAvailableLanguages();
+            console.log(`LangService: Content removed for "${className}"`);
         }
         else {
-            // Three parameters (className, key, fallback) - treat as component content
-            return this.langService.getText(classNameOrKey, keyOrFallback, fallback);
+            console.warn(`LangService: No content found for "${className}" to remove`);
         }
     }
     /**
-     * Get a single global content string synchronously.
-     * This is a convenience method that's equivalent to getText(key, fallback).
+     * Get a list of all registered component classes.
      *
-     * @param key - The text key
-     * @param fallback - Optional fallback text if key is not found
-     * @returns The text string or fallback
+     * @returns Array of registered class names
+     */
+    getRegisteredClasses() {
+        return Object.keys(this.content);
+    }
+    /**
+     * Get the complete content configuration (for debugging purposes).
+     * Returns a deep copy to prevent accidental mutations.
      *
-     * @example
-     * ```typescript
-     * const okText = this.content.getGlobalText('ok');
-     * const cancelText = this.content.getGlobalText('cancel', 'Cancel');
-     * ```
+     * @returns Complete content configuration
      */
-    getGlobalText(key, fallback) {
-        return this.langService.getText('_global', key, fallback);
+    getContentConfiguration() {
+        return JSON.parse(JSON.stringify(this.content));
     }
     /**
-     * Check if a content key exists for a component.
+     * Clear all content and reset to initial state.
+     * Useful for testing or complete reinitialization.
+     */
+    clearAllContent() {
+        console.log('LangService: Clearing all content');
+        this.content = {};
+        this.availableLanguages = [LANGUAGES.ES]; // Reset to default
+        this.warnedMissingLanguages.clear();
+        console.log('LangService: All content cleared');
+    }
+    /**
+     * Get content with interpolation support.
+     * Retrieves content and replaces placeholders with provided values.
      *
      * @param className - The component class name
      * @param key - The text key
-     * @returns True if the key exists in any language
-     *
-     * @example
-     * ```typescript
-     * if (this.content.hasContent('MyComponent', 'optionalText')) {
-     *   // Show optional content
-     * }
-     * ```
+     * @param interpolationData - Object with values to interpolate
+     * @param fallback - Optional fallback text if key is not found
+     * @returns Text with interpolated values
      */
-    hasContent(className, key) {
-        return this.langService.hasContent(className, key);
+    getTextWithInterpolation(className, key, interpolationData, fallback) {
+        const content = this.getText(className, key, fallback);
+        return this.interpolateString(content, interpolationData);
     }
     /**
-     * Helper function to interpolate values into a content string.
-     * Useful for processing content strings manually.
-     *
-     * @param content - The content string with placeholders
-     * @param values - Object with values to interpolate
-     * @returns The interpolated string
+     * Get reactive content with interpolation support.
+     * Returns an Observable that emits interpolated content when language changes.
      *
-     * @example
-     * ```typescript
-     * const result = this.content.interpolate("Hello {name}!", { name: "World" });
-     * // Returns: "Hello World!"
-     * ```
+     * @param className - The component class name
+     * @param key - The text key
+     * @param interpolationData - Object with values to interpolate
+     * @param fallback - Optional fallback text if key is not found
+     * @returns Observable that emits interpolated text
      */
-    interpolate(content, values) {
-        return interpolateContent(content, values);
+    getContentWithInterpolation(className, key, interpolationData, fallback) {
+        return this.getContent(className, key, fallback).pipe(map(content => this.interpolateString(content, interpolationData)));
     }
     /**
-     * Create a content helper bound to a specific component class.
-     * This provides a scoped API for components that need multiple content strings.
+     * Interpolate a string with provided values.
+     * Replaces placeholders like {{key}} or {key} with actual values.
      *
-     * @param className - The component class name
-     * @returns Content helper with methods scoped to the class
+     * @param content - Content string with placeholders
+     * @param values - Values to interpolate
+     * @returns Interpolated string
      *
      * @example
      * ```typescript
-     * export class MyComponent {
-     *   private contentHelper = this.content.createHelper('MyComponent');
-     *
-     *   ngOnInit() {
-     *     this.title$ = this.contentHelper.get('title');
-     *     this.allContent$ = this.contentHelper.getMultiple(['title', 'description']);
-     *   }
-     *
-     *   constructor(private content: ContentService) {}
-     * }
+     * interpolateString('Hello {{name}}!', { name: 'World' })
+     * // Returns: 'Hello World!'
      * ```
      */
-    createHelper(className) {
-        return createContentHelper(this.langService, className);
+    interpolateString(content, values) {
+        if (!values || !content) {
+            return content;
+        }
+        return content.replace(/\{\{?(\w+)\}?\}/g, (match, key) => {
+            const value = values[key];
+            return value !== undefined ? String(value) : match;
+        });
     }
     /**
-     * Create a scoped content service for a specific component class.
-     * This provides an even more convenient API for components with many content needs.
+     * Legacy function equivalent to the old fromContentWithInterpolation.
+     * Provides reactive content with interpolation support for backward compatibility.
      *
      * @param className - The component class name
-     * @returns Scoped content service
-     *
-     * @example
-     * ```typescript
-     * export class MyComponent {
-     *   private content = inject(ContentService).forComponent('MyComponent');
-     *
-     *   // Simple content
-     *   title$ = this.content.get('title');
-     *
-     *   // Content with interpolation
-     *   greeting$ = this.content.get('greeting', {
-     *     interpolation: { name: 'John' }
-     *   });
-     *
-     *   // Content with fallback
-     *   subtitle$ = this.content.get('subtitle', {
-     *     fallback: 'Default Subtitle'
-     *   });
-     *
-     *   // Multiple texts
-     *   allTexts$ = this.content.getMultiple(['title', 'subtitle', 'description']);
+     * @param key - The text key
+     * @param interpolationData - Object with values to interpolate
+     * @param fallback - Optional fallback text if key is not found
+     * @returns Observable that emits interpolated text
      *
-     *   constructor() {}
-     * }
-     * ```
+     * @deprecated Use getContentWithInterpolation instead
      */
-    forComponent(className) {
-        return {
-            /**
-             * Get a single content string reactively for this component.
-             * Supports optional interpolation.
-             */
-            get: (key, options) => {
-                return this.fromContent({
-                    className,
-                    key,
-                    fallback: options?.fallback,
-                    interpolation: options?.interpolation,
-                });
-            },
-            /**
-             * Get content with interpolation for this component.
-             * @deprecated Use get() with interpolation option instead.
-             */
-            getWithInterpolation: (key, interpolation, fallback) => {
-                return this.fromContent({
-                    className,
-                    key,
-                    interpolation,
-                    fallback,
-                });
-            },
-            /**
-             * Get multiple content strings for this component.
-             */
-            getMultiple: (keys) => {
-                return this.fromMultipleContent(className, keys);
-            },
-            /**
-             * Get a single content string synchronously for this component.
-             */
-            getText: (key, fallback) => {
-                return this.getText(className, key, fallback);
-            },
-            /**
-             * Check if a content key exists for this component.
-             */
-            hasContent: (key) => {
-                return this.hasContent(className, key);
-            },
-        };
+    fromContentWithInterpolation(className, key, interpolationData, fallback) {
+        return this.getContentWithInterpolation(className, key, interpolationData, fallback);
+    }
+    // Legacy getters/setters for backward compatibility
+    get Lang() {
+        return this.currentLang;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ContentService, deps: [{ token: LangService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ContentService, providedIn: 'root' }); }
+    set Lang(lang) {
+        this.setLang(lang);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LangService, deps: [{ token: ValtechConfigService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LangService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ContentService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LangService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: () => [{ type: LangService }] });
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [ValtechConfigService]
+                }] }] });
 
 /**
  * val-button
@@ -1376,10 +1183,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
  * @output onClick - Emits when the button is clicked
  */
 class ButtonComponent {
-    constructor(download, icon, navigation, contentService) {
+    constructor(download, icon, navigation, langService) {
         this.download = download;
         this.navigation = navigation;
-        this.contentService = contentService;
+        this.langService = langService;
         this.states = ComponentStates;
         this.subscriptions = new Subscription();
         /**
@@ -1401,26 +1208,25 @@ class ButtonComponent {
     setupDisplayText() {
         if (this.props.text) {
             // Static text takes precedence
-            this.displayText$ = of(this.props.text);
+            if (this.props.contentInterpolation) {
+                // Static text with interpolation
+                const interpolatedText = interpolateStaticContent(this.props.text, this.props.contentInterpolation);
+                this.displayText$ = of(interpolatedText);
+            }
+            else {
+                // Simple static text
+                this.displayText$ = of(this.props.text);
+            }
         }
         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,
-                });
+                this.displayText$ = this.langService.getContentWithInterpolation(this.props.contentClass, this.props.contentKey, this.props.contentInterpolation, this.props.contentFallback);
             }
             else {
                 // Simple reactive content
-                this.displayText$ = this.contentService.fromContent({
-                    className: this.props.contentClass,
-                    key: this.props.contentKey,
-                    fallback: this.props.contentFallback,
-                });
+                this.displayText$ = this.langService.getContent(this.props.contentClass, this.props.contentKey, this.props.contentFallback);
             }
         }
         else {
@@ -1444,7 +1250,7 @@ class ButtonComponent {
         }
         this.onClick.emit(this.props.token);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ButtonComponent, deps: [{ token: DownloadService }, { token: IconService }, { token: NavigationService }, { token: ContentService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ButtonComponent, deps: [{ token: DownloadService }, { token: IconService }, { token: NavigationService }, { token: LangService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ButtonComponent, isStandalone: true, selector: "val-button", inputs: { props: "props" }, outputs: { onClick: "onClick" }, ngImport: i0, template: `
     <ion-button
       [type]="props.type"
@@ -1486,7 +1292,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
       <ion-text *ngIf="props.state !== states.WORKING">{{ displayText$ | async }}</ion-text>
     </ion-button>
   `, styles: [":root{--ion-color-primary: #7026df;--ion-color-primary-rgb: 112, 38, 223;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #6321c4;--ion-color-primary-tint: #7e3ce2;--ion-color-secondary: #e2ccff;--ion-color-secondary-rgb: 226, 204, 255;--ion-color-secondary-contrast: #000000;--ion-color-secondary-contrast-rgb: 0, 0, 0;--ion-color-secondary-shade: #c7b4e0;--ion-color-secondary-tint: #e5d1ff;--ion-color-texti: #354c69;--ion-color-texti-rgb: 53, 76, 105;--ion-color-texti-contrast: #ffffff;--ion-color-texti-contrast-rgb: 255, 255, 255;--ion-color-texti-shade: #2f435c;--ion-color-texti-tint: #495e78;--ion-color-darki: #090f1b;--ion-color-darki-rgb: 9, 15, 27;--ion-color-darki-contrast: #ffffff;--ion-color-darki-contrast-rgb: 255, 255, 255;--ion-color-darki-shade: #080d18;--ion-color-darki-tint: #222732;--ion-color-medium: #9e9e9e;--ion-color-medium-rgb: 158, 158, 158;--ion-color-medium-contrast: #000000;--ion-color-medium-contrast-rgb: 0, 0, 0;--ion-color-medium-shade: #8b8b8b;--ion-color-medium-tint: #a8a8a8;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-medium)}@media (prefers-color-scheme: dark){:root{--ion-color-texti: #8fc1ff;--ion-color-texti-rgb: 143, 193, 255;--ion-color-texti-contrast: #000000;--ion-color-texti-contrast-rgb: 0, 0, 0;--ion-color-texti-shade: #7eaae0;--ion-color-texti-tint: #9ac7ff;--ion-color-darki: #ffffff;--ion-color-darki-rgb: 255, 255, 255;--ion-color-darki-contrast: #000000;--ion-color-darki-contrast-rgb: 0, 0, 0;--ion-color-darki-shade: #e0e0e0;--ion-color-darki-tint: #ffffff;--ion-color-primary: #8f49f8;--ion-color-primary-rgb: 143, 73, 248;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #7e40da;--ion-color-primary-tint: #9a5bf9}}.ion-color-texti{--ion-color-base: var(--ion-color-texti);--ion-color-base-rgb: var(--ion-color-texti-rgb);--ion-color-contrast: var(--ion-color-texti-contrast);--ion-color-contrast-rgb: var(--ion-color-texti-contrast-rgb);--ion-color-shade: var(--ion-color-texti-shade);--ion-color-tint: var(--ion-color-texti-tint)}.ion-color-darki{--ion-color-base: var(--ion-color-darki);--ion-color-base-rgb: var(--ion-color-darki-rgb);--ion-color-contrast: var(--ion-color-darki-contrast);--ion-color-contrast-rgb: var(--ion-color-darki-contrast-rgb);--ion-color-shade: var(--ion-color-darki-shade);--ion-color-tint: var(--ion-color-darki-tint)}ion-button{font-family:var(--ion-default-font),Arial,sans-serif;min-width:6.25rem;margin:0}ion-button.small{--padding-bottom: 12px;--padding-end: 14px;--padding-start: 14px;--padding-top: 12px}ion-button.button-clear{padding:0;margin:0}\n"] }]
-        }], ctorParameters: () => [{ type: DownloadService }, { type: IconService }, { type: NavigationService }, { type: ContentService }], propDecorators: { props: [{
+        }], ctorParameters: () => [{ type: DownloadService }, { type: IconService }, { type: NavigationService }, { type: LangService }], propDecorators: { props: [{
                 type: Input
             }], onClick: [{
                 type: Output
@@ -1763,9 +1569,9 @@ const SecondarySolidBlockIconHrefButton = (text, icon, href, target) => {
  * @input props: DisplayMetadata - Configuration for the display (content/contentConfig, color, size)
  */
 class DisplayComponent {
-    constructor(contentService) {
-        this.contentService = contentService;
+    constructor() {
         this.subscriptions = new Subscription();
+        this.langService = inject(LangService);
     }
     ngOnInit() {
         this.initializeDisplayContent();
@@ -1781,18 +1587,15 @@ class DisplayComponent {
         }
         // Use reactive content if configured
         if (this.props.contentConfig) {
-            this.displayContent$ = this.contentService.fromContent({
-                className: this.props.contentConfig.className || '_global',
-                key: this.props.contentConfig.key,
-                fallback: this.props.contentConfig.fallback || this.props.contentConfig.key,
-                interpolation: this.props.contentConfig.interpolation,
-            });
+            this.displayContent$ = this.langService.getContent(this.props.contentConfig.className || '_global', this.props.contentConfig.key, this.props.contentConfig.fallback || this.props.contentConfig.key
+            // interpolation: this.props.contentConfig.interpolation,
+            );
             return;
         }
         // No content configured - use empty string
         this.displayContent$ = of('');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DisplayComponent, deps: [{ token: ContentService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DisplayComponent, isStandalone: true, selector: "val-display", inputs: { props: "props" }, ngImport: i0, template: `
     <ion-text [color]="props.color">
       <p [class]="props.size">
@@ -1810,7 +1613,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
       </p>
     </ion-text>
   `, styles: [":root{--ion-color-primary: #7026df;--ion-color-primary-rgb: 112, 38, 223;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #6321c4;--ion-color-primary-tint: #7e3ce2;--ion-color-secondary: #e2ccff;--ion-color-secondary-rgb: 226, 204, 255;--ion-color-secondary-contrast: #000000;--ion-color-secondary-contrast-rgb: 0, 0, 0;--ion-color-secondary-shade: #c7b4e0;--ion-color-secondary-tint: #e5d1ff;--ion-color-texti: #354c69;--ion-color-texti-rgb: 53, 76, 105;--ion-color-texti-contrast: #ffffff;--ion-color-texti-contrast-rgb: 255, 255, 255;--ion-color-texti-shade: #2f435c;--ion-color-texti-tint: #495e78;--ion-color-darki: #090f1b;--ion-color-darki-rgb: 9, 15, 27;--ion-color-darki-contrast: #ffffff;--ion-color-darki-contrast-rgb: 255, 255, 255;--ion-color-darki-shade: #080d18;--ion-color-darki-tint: #222732;--ion-color-medium: #9e9e9e;--ion-color-medium-rgb: 158, 158, 158;--ion-color-medium-contrast: #000000;--ion-color-medium-contrast-rgb: 0, 0, 0;--ion-color-medium-shade: #8b8b8b;--ion-color-medium-tint: #a8a8a8;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-medium)}@media (prefers-color-scheme: dark){:root{--ion-color-texti: #8fc1ff;--ion-color-texti-rgb: 143, 193, 255;--ion-color-texti-contrast: #000000;--ion-color-texti-contrast-rgb: 0, 0, 0;--ion-color-texti-shade: #7eaae0;--ion-color-texti-tint: #9ac7ff;--ion-color-darki: #ffffff;--ion-color-darki-rgb: 255, 255, 255;--ion-color-darki-contrast: #000000;--ion-color-darki-contrast-rgb: 0, 0, 0;--ion-color-darki-shade: #e0e0e0;--ion-color-darki-tint: #ffffff;--ion-color-primary: #8f49f8;--ion-color-primary-rgb: 143, 73, 248;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #7e40da;--ion-color-primary-tint: #9a5bf9}}.ion-color-texti{--ion-color-base: var(--ion-color-texti);--ion-color-base-rgb: var(--ion-color-texti-rgb);--ion-color-contrast: var(--ion-color-texti-contrast);--ion-color-contrast-rgb: var(--ion-color-texti-contrast-rgb);--ion-color-shade: var(--ion-color-texti-shade);--ion-color-tint: var(--ion-color-texti-tint)}.ion-color-darki{--ion-color-base: var(--ion-color-darki);--ion-color-base-rgb: var(--ion-color-darki-rgb);--ion-color-contrast: var(--ion-color-darki-contrast);--ion-color-contrast-rgb: var(--ion-color-darki-contrast-rgb);--ion-color-shade: var(--ion-color-darki-shade);--ion-color-tint: var(--ion-color-darki-tint)}.small{font-size:1.5rem;line-height:2rem;font-weight:800}@media (min-width: 768px){.small{font-size:2rem;line-height:2.5rem}}.medium{font-size:2rem;line-height:2.5rem;font-weight:800}@media (min-width: 768px){.medium{font-size:2.5rem;line-height:3rem}}.large{font-size:2.5rem;line-height:3rem;font-weight:800}@media (min-width: 768px){.large{font-size:3rem;line-height:3.5rem}}.xlarge{font-size:3rem;line-height:2.5rem;font-weight:800}@media (min-width: 768px){.xlarge{font-size:4.375rem;line-height:4.125rem}}\n"] }]
-        }], ctorParameters: () => [{ type: ContentService }], propDecorators: { props: [{
+        }], ctorParameters: () => [], propDecorators: { props: [{
                 type: Input
             }] } });
 /**
@@ -2592,8 +2395,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
  * @input props: TextMetadata - Configuration for the text (content, styling, and reactive content options)
  */
 class TextComponent {
-    constructor(contentService, linkProcessor) {
-        this.contentService = contentService;
+    constructor(langService, linkProcessor) {
+        this.langService = langService;
         this.linkProcessor = linkProcessor;
         this.subscription = new Subscription();
     }
@@ -2610,26 +2413,25 @@ class TextComponent {
     setupDisplayContent() {
         if (this.props.content) {
             // Static content takes precedence
-            this.displayContent$ = of(this.props.content);
+            if (this.props.contentInterpolation) {
+                // Static content with interpolation
+                const interpolatedContent = interpolateStaticContent(this.props.content, this.props.contentInterpolation);
+                this.displayContent$ = of(interpolatedContent);
+            }
+            else {
+                // Simple static content
+                this.displayContent$ = of(this.props.content);
+            }
         }
-        else if (this.props.contentKey && this.props.contentClass) {
+        else if (shouldUseReactiveContent(this.props)) {
             // Reactive content from language service
             if (this.props.contentInterpolation) {
                 // With interpolation
-                this.displayContent$ = this.contentService.fromContentWithInterpolation({
-                    className: this.props.contentClass,
-                    key: this.props.contentKey,
-                    fallback: this.props.contentFallback,
-                    interpolation: this.props.contentInterpolation,
-                });
+                this.displayContent$ = this.langService.getContentWithInterpolation(this.props.contentClass, this.props.contentKey, this.props.contentInterpolation, this.props.contentFallback);
             }
             else {
                 // Simple reactive content
-                this.displayContent$ = this.contentService.fromContent({
-                    className: this.props.contentClass,
-                    key: this.props.contentKey,
-                    fallback: this.props.contentFallback,
-                });
+                this.displayContent$ = this.langService.getContent(this.props.contentClass, this.props.contentKey, this.props.contentFallback);
             }
         }
         else {
@@ -2654,7 +2456,7 @@ class TextComponent {
         processedContent = processedContent.replace(/<strong>(.*?)<\/strong>/gi, '<span class="partial-bold">$1</span>');
         return processedContent;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TextComponent, deps: [{ token: ContentService }, { token: LinkProcessorService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TextComponent, deps: [{ token: LangService }, { token: LinkProcessorService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: TextComponent, isStandalone: true, selector: "val-text", inputs: { props: "props" }, ngImport: i0, template: `
     <ion-text [color]="props.color">
       @if (props.processLinks) {
@@ -2694,7 +2496,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
       }
     </ion-text>
   `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":root{--ion-color-primary: #7026df;--ion-color-primary-rgb: 112, 38, 223;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #6321c4;--ion-color-primary-tint: #7e3ce2;--ion-color-secondary: #e2ccff;--ion-color-secondary-rgb: 226, 204, 255;--ion-color-secondary-contrast: #000000;--ion-color-secondary-contrast-rgb: 0, 0, 0;--ion-color-secondary-shade: #c7b4e0;--ion-color-secondary-tint: #e5d1ff;--ion-color-texti: #354c69;--ion-color-texti-rgb: 53, 76, 105;--ion-color-texti-contrast: #ffffff;--ion-color-texti-contrast-rgb: 255, 255, 255;--ion-color-texti-shade: #2f435c;--ion-color-texti-tint: #495e78;--ion-color-darki: #090f1b;--ion-color-darki-rgb: 9, 15, 27;--ion-color-darki-contrast: #ffffff;--ion-color-darki-contrast-rgb: 255, 255, 255;--ion-color-darki-shade: #080d18;--ion-color-darki-tint: #222732;--ion-color-medium: #9e9e9e;--ion-color-medium-rgb: 158, 158, 158;--ion-color-medium-contrast: #000000;--ion-color-medium-contrast-rgb: 0, 0, 0;--ion-color-medium-shade: #8b8b8b;--ion-color-medium-tint: #a8a8a8;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-medium)}@media (prefers-color-scheme: dark){:root{--ion-color-texti: #8fc1ff;--ion-color-texti-rgb: 143, 193, 255;--ion-color-texti-contrast: #000000;--ion-color-texti-contrast-rgb: 0, 0, 0;--ion-color-texti-shade: #7eaae0;--ion-color-texti-tint: #9ac7ff;--ion-color-darki: #ffffff;--ion-color-darki-rgb: 255, 255, 255;--ion-color-darki-contrast: #000000;--ion-color-darki-contrast-rgb: 0, 0, 0;--ion-color-darki-shade: #e0e0e0;--ion-color-darki-tint: #ffffff;--ion-color-primary: #8f49f8;--ion-color-primary-rgb: 143, 73, 248;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #7e40da;--ion-color-primary-tint: #9a5bf9}}.ion-color-texti{--ion-color-base: var(--ion-color-texti);--ion-color-base-rgb: var(--ion-color-texti-rgb);--ion-color-contrast: var(--ion-color-texti-contrast);--ion-color-contrast-rgb: var(--ion-color-texti-contrast-rgb);--ion-color-shade: var(--ion-color-texti-shade);--ion-color-tint: var(--ion-color-texti-tint)}.ion-color-darki{--ion-color-base: var(--ion-color-darki);--ion-color-base-rgb: var(--ion-color-darki-rgb);--ion-color-contrast: var(--ion-color-darki-contrast);--ion-color-contrast-rgb: var(--ion-color-darki-contrast-rgb);--ion-color-shade: var(--ion-color-darki-shade);--ion-color-tint: var(--ion-color-darki-tint)}.small{font-size:.75rem;line-height:1.25rem;font-weight:400}.small.bold{font-size:.75rem;line-height:1.25rem;font-weight:700}.medium{font-size:.875rem;line-height:1.5rem;font-weight:400}@media (min-width: 768px){.medium{font-size:1rem;line-height:1.5rem}}.medium.bold{font-size:.875rem;line-height:1.5rem;font-weight:700}@media (min-width: 768px){.medium.bold{font-size:1rem;line-height:1.5rem}}.large{font-size:1rem;line-height:1.5rem;font-weight:400}@media (min-width: 768px){.large{font-size:1.125rem;line-height:1.5rem}}.large.bold{font-size:1rem;line-height:1.5rem;font-weight:700}@media (min-width: 768px){.large.bold{font-size:1.125rem;line-height:1.5rem}}.xlarge{font-size:1.125rem;line-height:1.5rem;font-weight:400}@media (min-width: 768px){.xlarge{font-size:1.5rem;line-height:2rem}}.xlarge.bold{font-size:1.125rem;line-height:1.5rem;font-weight:700}@media (min-width: 768px){.xlarge.bold{font-size:1.5rem;line-height:2rem}}:host ::ng-deep .partial-bold{font-weight:700}\n"] }]
-        }], ctorParameters: () => [{ type: ContentService }, { type: LinkProcessorService }], propDecorators: { props: [{
+        }], ctorParameters: () => [{ type: LangService }, { type: LinkProcessorService }], propDecorators: { props: [{
                 type: Input
             }] } });
 /**
@@ -2750,123 +2552,6 @@ function createTextProps(contentConfig, styleConfig = {}) {
     };
 }
 
-/**
- * Enhanced content utilities for multi-language component support.
- * Extends the base content utilities to provide specialized helpers for different component patterns.
- */
-/**
- * Helper class for managing reactive content in components.
- */
-class ComponentContentHelper {
-    constructor(contentService, defaultClassName) {
-        this.contentService = contentService;
-        this.defaultClassName = defaultClassName;
-    }
-    /**
-     * Resolves content based on hybrid configuration (static vs reactive).
-     */
-    resolveContent(config) {
-        // Static content takes precedence
-        if (config.content !== undefined) {
-            return config.content;
-        }
-        // Use reactive content if configured
-        if (config.contentConfig) {
-            return this.contentService.fromContent({
-                className: config.contentConfig.className || this.defaultClassName || '_global',
-                key: config.contentConfig.key,
-                fallback: config.contentConfig.fallback,
-                interpolation: config.contentConfig.interpolation,
-            });
-        }
-        // No content configured
-        return '';
-    }
-    /**
-     * Resolves multiple text properties for components with multiple text fields.
-     */
-    resolveMultipleTexts(config) {
-        const result = {};
-        Object.entries(config.textConfigs).forEach(([property, contentConfig]) => {
-            result[property] = this.contentService.fromContent({
-                className: contentConfig.className || this.defaultClassName || '_global',
-                key: contentConfig.key,
-                fallback: contentConfig.fallback,
-                interpolation: contentConfig.interpolation,
-            });
-        });
-        return result;
-    }
-    /**
-     * Creates a reactive content configuration for array items.
-     * Useful for list components where items might have translatable text.
-     */
-    createArrayItemConfig(baseKey, index, fallback) {
-        return {
-            className: this.defaultClassName || '_global',
-            key: `${baseKey}.${index}`,
-            fallback: fallback,
-        };
-    }
-    /**
-     * Helper for button/action text that commonly needs translation.
-     */
-    createActionConfig(actionKey, fallback) {
-        return {
-            className: '_global',
-            key: actionKey,
-            fallback: fallback,
-        };
-    }
-}
-/**
- * Factory function to create content helpers for components.
- */
-function createComponentContentHelper(contentService, componentClassName) {
-    return new ComponentContentHelper(contentService, componentClassName);
-}
-/**
- * Utility function to determine if content should be reactive.
- */
-function shouldUseReactiveContent(config) {
-    return config.content === undefined && config.contentConfig !== undefined;
-}
-/**
- * Enhanced props factory for components that support reactive content.
- */
-function createReactiveProps(contentHelper, staticProps, contentConfig) {
-    return {
-        ...staticProps,
-        ...contentConfig,
-    };
-}
-/**
- * Helper for list components that need to mix static and reactive content.
- */
-class ListContentHelper {
-    constructor(contentHelper) {
-        this.contentHelper = contentHelper;
-    }
-    /**
-     * Resolves a list configuration into final items.
-     */
-    resolveListItems(config) {
-        const items = [];
-        // Add static items first
-        if (config.staticItems) {
-            items.push(...config.staticItems);
-        }
-        // Add reactive items
-        if (config.reactiveItems) {
-            for (let i = 0; i < config.reactiveItems.count; i++) {
-                const item = config.reactiveItems.itemTemplate(this.contentHelper, i);
-                items.push(item);
-            }
-        }
-        return items;
-    }
-}
-
 /**
  * val-title
  *
@@ -2906,14 +2591,14 @@ class ListContentHelper {
  */
 class TitleComponent {
     constructor() {
-        this.contentService = inject(ContentService);
+        this.langService = inject(LangService);
     }
     ngOnInit() {
-        this.contentHelper = createComponentContentHelper(this.contentService);
         // Always convert to Observable for consistent template handling
         if (shouldUseReactiveContent(this.props)) {
-            // Use reactive content
-            this.displayContent$ = this.contentHelper.resolveContent(this.props);
+            // Use reactive content with LangService
+            const config = extractContentConfig(this.props);
+            this.displayContent$ = this.langService.getContent(config.className, config.key, config.fallback);
         }
         else {
             // Convert static content to Observable
@@ -2978,7 +2663,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
  * ```typescript
  * const props = createTitleProps(
  *   { size: 'large', color: 'primary', bold: true },
- *   { contentConfig: { key: 'pageTitle', fallback: 'Default Title' } }
+ *   {
+ *     contentKey: 'pageTitle',
+ *     contentClass: 'MyComponent',
+ *     contentFallback: 'Default Title'
+ *   }
  * );
  * ```
  */
@@ -3013,8 +2702,8 @@ class AlertBoxComponent {
     getLegacyTextProps() {
         return this.props.text;
     }
-    constructor(contentService) {
-        this.contentService = contentService;
+    constructor(langService) {
+        this.langService = langService;
         this.subscriptions = new Subscription();
     }
     ngOnInit() {
@@ -3043,7 +2732,7 @@ class AlertBoxComponent {
             this.computedTextProps.contentConfig = reactiveProps.textConfig;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AlertBoxComponent, deps: [{ token: ContentService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AlertBoxComponent, deps: [{ token: LangService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: AlertBoxComponent, isStandalone: true, selector: "val-alert-box", inputs: { props: "props" }, ngImport: i0, template: `
     <val-box [props]="props.box">
       <div class="content-container" body>
@@ -3073,7 +2762,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
       </div>
     </val-box>
   `, styles: [":root{--ion-color-primary: #7026df;--ion-color-primary-rgb: 112, 38, 223;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #6321c4;--ion-color-primary-tint: #7e3ce2;--ion-color-secondary: #e2ccff;--ion-color-secondary-rgb: 226, 204, 255;--ion-color-secondary-contrast: #000000;--ion-color-secondary-contrast-rgb: 0, 0, 0;--ion-color-secondary-shade: #c7b4e0;--ion-color-secondary-tint: #e5d1ff;--ion-color-texti: #354c69;--ion-color-texti-rgb: 53, 76, 105;--ion-color-texti-contrast: #ffffff;--ion-color-texti-contrast-rgb: 255, 255, 255;--ion-color-texti-shade: #2f435c;--ion-color-texti-tint: #495e78;--ion-color-darki: #090f1b;--ion-color-darki-rgb: 9, 15, 27;--ion-color-darki-contrast: #ffffff;--ion-color-darki-contrast-rgb: 255, 255, 255;--ion-color-darki-shade: #080d18;--ion-color-darki-tint: #222732;--ion-color-medium: #9e9e9e;--ion-color-medium-rgb: 158, 158, 158;--ion-color-medium-contrast: #000000;--ion-color-medium-contrast-rgb: 0, 0, 0;--ion-color-medium-shade: #8b8b8b;--ion-color-medium-tint: #a8a8a8;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-medium)}@media (prefers-color-scheme: dark){:root{--ion-color-texti: #8fc1ff;--ion-color-texti-rgb: 143, 193, 255;--ion-color-texti-contrast: #000000;--ion-color-texti-contrast-rgb: 0, 0, 0;--ion-color-texti-shade: #7eaae0;--ion-color-texti-tint: #9ac7ff;--ion-color-darki: #ffffff;--ion-color-darki-rgb: 255, 255, 255;--ion-color-darki-contrast: #000000;--ion-color-darki-contrast-rgb: 0, 0, 0;--ion-color-darki-shade: #e0e0e0;--ion-color-darki-tint: #ffffff;--ion-color-primary: #8f49f8;--ion-color-primary-rgb: 143, 73, 248;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #7e40da;--ion-color-primary-tint: #9a5bf9}}.ion-color-texti{--ion-color-base: var(--ion-color-texti);--ion-color-base-rgb: var(--ion-color-texti-rgb);--ion-color-contrast: var(--ion-color-texti-contrast);--ion-color-contrast-rgb: var(--ion-color-texti-contrast-rgb);--ion-color-shade: var(--ion-color-texti-shade);--ion-color-tint: var(--ion-color-texti-tint)}.ion-color-darki{--ion-color-base: var(--ion-color-darki);--ion-color-base-rgb: var(--ion-color-darki-rgb);--ion-color-contrast: var(--ion-color-darki-contrast);--ion-color-contrast-rgb: var(--ion-color-darki-contrast-rgb);--ion-color-shade: var(--ion-color-darki-shade);--ion-color-tint: var(--ion-color-darki-tint)}.text{margin-left:.25rem}.content-container{display:flex;align-items:flex-start}\n"] }]
-        }], ctorParameters: () => [{ type: ContentService }], propDecorators: { props: [{
+        }], ctorParameters: () => [{ type: LangService }], propDecorators: { props: [{
                 type: Input
             }] } });
 
@@ -4271,9 +3960,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
  * @output languageChange: EventEmitter<string> - Emitted when language changes
  */
 class LanguageSelectorComponent {
-    constructor(langService, contentService) {
+    constructor(langService) {
         this.langService = langService;
-        this.contentService = contentService;
         /**
          * Language selector configuration object.
          * @type {LanguageSelectorMetadata}
@@ -4337,20 +4025,11 @@ class LanguageSelectorComponent {
         }
         else if (this.props.labelConfig) {
             // Reactive label
-            this.label$ = this.contentService.fromContent({
-                className: this.props.labelConfig.className || '_global',
-                key: this.props.labelConfig.key,
-                fallback: this.props.labelConfig.fallback || 'Language',
-                interpolation: this.props.labelConfig.interpolation,
-            });
+            this.label$ = this.langService.getContent(this.props.labelConfig.className || '_global', this.props.labelConfig.key, this.props.labelConfig.fallback || 'Language');
         }
         else {
             // Default label from global content
-            this.label$ = this.contentService.fromContent({
-                className: '_global',
-                key: 'language',
-                fallback: 'Idioma',
-            });
+            this.label$ = this.langService.getContent('_global', 'language', 'Idioma');
         }
     }
     initializePopoverProps() {
@@ -4431,7 +4110,7 @@ class LanguageSelectorComponent {
             this.languageChange.emit(selectedLanguage);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LanguageSelectorComponent, deps: [{ token: LangService }, { token: ContentService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LanguageSelectorComponent, deps: [{ token: LangService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: LanguageSelectorComponent, isStandalone: true, selector: "val-language-selector", inputs: { props: "props" }, outputs: { languageChange: "languageChange" }, ngImport: i0, template: `
     <val-popover-selector [props]="popoverProps" (selectionChange)="onLanguageChange($event)"> </val-popover-selector>
   `, isInline: true, styles: [":host{display:inline-block;width:auto}val-popover-selector .popover-selector-container{display:inline-block;width:auto}val-popover-selector .selector-trigger .trigger-text{display:inline-flex;align-items:center;gap:8px;font-weight:700}val-popover-selector .selector-trigger .trigger-text .flag-emoji{font-size:1.2em;line-height:1;filter:drop-shadow(0 1px 2px rgba(0,0,0,.1));transition:transform .2s ease}val-popover-selector .selector-trigger.has-flag .trigger-text{letter-spacing:.025em}val-popover-selector .selector-trigger:hover:not([disabled]) .trigger-text .flag-emoji{transform:scale(1.1)}val-popover-selector .option-content{gap:10px;padding:8px 0}val-popover-selector .option-content .flag-emoji{font-size:1.1em;filter:drop-shadow(0 1px 2px rgba(0,0,0,.08))}val-popover-selector .option-content span{font-weight:600;letter-spacing:.01em}.language-flag{font-size:1.2em;margin-right:6px;vertical-align:middle;line-height:1;filter:drop-shadow(0 1px 3px rgba(0,0,0,.1));transition:all .2s ease}@media (max-width: 768px){val-popover-selector .selector-trigger .trigger-text{font-size:13px;gap:6px}val-popover-selector .selector-trigger .trigger-text .flag-emoji{font-size:1.1em}}val-popover-selector .selector-trigger:hover:not([disabled]) .trigger-text .flag-emoji{transform:scale(1.1) rotate(3deg);transition:transform .25s cubic-bezier(.4,0,.2,1)}val-popover-selector .selector-trigger:active .trigger-text .flag-emoji{transform:scale(1.05)}val-popover-selector .language-changing .flag-emoji{animation:languageSwitch .4s ease-in-out}@keyframes languageSwitch{0%{transform:scale(1)}50%{transform:scale(1.15) rotate(8deg)}to{transform:scale(1)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: PopoverSelectorComponent, selector: "val-popover-selector", inputs: ["props"], outputs: ["selectionChange"] }] }); }
@@ -4441,7 +4120,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
             args: [{ selector: 'val-language-selector', standalone: true, imports: [CommonModule, PopoverSelectorComponent], template: `
     <val-popover-selector [props]="popoverProps" (selectionChange)="onLanguageChange($event)"> </val-popover-selector>
   `, styles: [":host{display:inline-block;width:auto}val-popover-selector .popover-selector-container{display:inline-block;width:auto}val-popover-selector .selector-trigger .trigger-text{display:inline-flex;align-items:center;gap:8px;font-weight:700}val-popover-selector .selector-trigger .trigger-text .flag-emoji{font-size:1.2em;line-height:1;filter:drop-shadow(0 1px 2px rgba(0,0,0,.1));transition:transform .2s ease}val-popover-selector .selector-trigger.has-flag .trigger-text{letter-spacing:.025em}val-popover-selector .selector-trigger:hover:not([disabled]) .trigger-text .flag-emoji{transform:scale(1.1)}val-popover-selector .option-content{gap:10px;padding:8px 0}val-popover-selector .option-content .flag-emoji{font-size:1.1em;filter:drop-shadow(0 1px 2px rgba(0,0,0,.08))}val-popover-selector .option-content span{font-weight:600;letter-spacing:.01em}.language-flag{font-size:1.2em;margin-right:6px;vertical-align:middle;line-height:1;filter:drop-shadow(0 1px 3px rgba(0,0,0,.1));transition:all .2s ease}@media (max-width: 768px){val-popover-selector .selector-trigger .trigger-text{font-size:13px;gap:6px}val-popover-selector .selector-trigger .trigger-text .flag-emoji{font-size:1.1em}}val-popover-selector .selector-trigger:hover:not([disabled]) .trigger-text .flag-emoji{transform:scale(1.1) rotate(3deg);transition:transform .25s cubic-bezier(.4,0,.2,1)}val-popover-selector .selector-trigger:active .trigger-text .flag-emoji{transform:scale(1.05)}val-popover-selector .language-changing .flag-emoji{animation:languageSwitch .4s ease-in-out}@keyframes languageSwitch{0%{transform:scale(1)}50%{transform:scale(1.15) rotate(8deg)}to{transform:scale(1)}}\n"] }]
-        }], ctorParameters: () => [{ type: LangService }, { type: ContentService }], propDecorators: { props: [{
+        }], ctorParameters: () => [{ type: LangService }], propDecorators: { props: [{
                 type: Input
             }], languageChange: [{
                 type: Output
@@ -8109,187 +7788,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Output
             }] } });
 
-/**
- * ContentLoader Service - Dynamic content loading system.
- *
- * REFACTORED: Now uses ValtechConfigService properly instead of hacking LangService.
- * This provides a clean, maintainable way to register content dynamically.
- *
- * @example Basic usage:
- * ```typescript
- * // user-page.content.ts
- * export const UserPageContent = {
- *   es: { title: 'Mi Página de Usuario', welcome: 'Bienvenido {{name}}' },
- *   en: { title: 'My User Page', welcome: 'Welcome {{name}}' }
- * };
- *
- * // In component
- * import { UserPageContent } from './user-page.content';
- * registerContent('UserPage', UserPageContent);
- * ```
- */
-class ContentLoaderService {
-    constructor() {
-        this.valtechConfig = inject(ValtechConfigService);
-        this.registeredContent = new Map();
-    }
-    /**
-     * Register content for a specific component/page class.
-     * ✅ CLEAN: Uses proper ValtechConfigService API instead of hacking LangService
-     */
-    registerContent(className, content) {
-        // Store locally for tracking
-        this.registeredContent.set(className, content);
-        // Update the configuration properly
-        this.addContentToProvider(className, content);
-        console.log(`✅ ContentLoader: Registered content for "${className}"`);
-    }
-    /**
-     * Register multiple content modules at once.
-     */
-    loadContent(contentModules) {
-        console.log(`🔄 ContentLoader: Loading ${contentModules.length} content modules...`);
-        contentModules.forEach(module => {
-            this.registerContent(module.className, module.content);
-        });
-        console.log('✅ ContentLoader: All content modules loaded successfully');
-    }
-    /**
-     * Check if content is registered for a class.
-     */
-    hasContentFor(className) {
-        return this.registeredContent.has(className);
-    }
-    /**
-     * Get all registered class names.
-     */
-    getRegisteredClasses() {
-        return Array.from(this.registeredContent.keys());
-    }
-    /**
-     * Get registered content for a specific class.
-     */
-    getContentFor(className) {
-        return this.registeredContent.get(className);
-    }
-    /**
-     * Remove content registration for a class.
-     */
-    unregisterContent(className) {
-        const existed = this.registeredContent.has(className);
-        this.registeredContent.delete(className);
-        // Also remove from the provider
-        if (existed && this.valtechConfig.content) {
-            const updatedContent = { ...this.valtechConfig.content };
-            delete updatedContent[className];
-            this.valtechConfig.content = updatedContent;
-            console.log(`🗑️ ContentLoader: Unregistered content for "${className}"`);
-        }
-        return existed;
-    }
-    /**
-     * Clear all registered content.
-     */
-    clearAllContent() {
-        this.registeredContent.clear();
-        console.log('🧹 ContentLoader: Cleared all registered content');
-    }
-    /**
-     * Get current content provider state.
-     * Useful for debugging.
-     */
-    getContentProvider() {
-        return this.valtechConfig.content;
-    }
-    /**
-     * ✅ CLEAN: Add content to provider using proper API
-     * @private
-     */
-    addContentToProvider(className, content) {
-        try {
-            // Get current content provider
-            const currentContent = this.valtechConfig.content || {};
-            // Create TextContent instance
-            const textContent = new TextContent(content);
-            // Update the content provider properly
-            const updatedContent = {
-                ...currentContent,
-                [className]: textContent,
-            };
-            // Set the updated content - this is the clean way
-            this.valtechConfig.content = updatedContent;
-            console.log(`📝 ContentLoader: Added "${className}" to content provider`);
-        }
-        catch (error) {
-            console.error(`❌ ContentLoader: Error adding content for "${className}":`, error);
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ContentLoaderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ContentLoaderService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ContentLoaderService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }] });
-/**
- * Helper function to create a content module.
- */
-function createContentModule(className, content) {
-    return { className, content };
-}
-/**
- * ✅ CLEAN: Global registry using proper array instead of globalThis hack
- */
-const globalContentRegistry = [];
-/**
- * Simple function to register content directly.
- * ✅ IMPROVED: Cleaner global registry management
- */
-function registerContent(className, content) {
-    // Add to global registry
-    globalContentRegistry.push({ className, content });
-    console.log(`📝 registerContent: Queued "${className}" for registration`);
-}
-/**
- * Load all content from the global registry.
- * ✅ IMPROVED: Better error handling and logging
- */
-function loadRegisteredContent(contentLoader) {
-    if (globalContentRegistry.length === 0) {
-        console.log('ℹ️ ContentLoader: No content registered to load');
-        return;
-    }
-    console.log(`🚀 ContentLoader: Loading ${globalContentRegistry.length} registered content modules...`);
-    try {
-        // Load all content
-        contentLoader.loadContent([...globalContentRegistry]);
-        // Clear the registry after loading
-        globalContentRegistry.length = 0;
-        console.log('🎉 ContentLoader: All registered content loaded and registry cleared');
-    }
-    catch (error) {
-        console.error('❌ ContentLoader: Error loading registered content:', error);
-    }
-}
-/**
- * ✅ NEW: Debugging helper
- * Get current global registry state
- */
-function getRegisteredContentQueue() {
-    return [...globalContentRegistry];
-}
-/**
- * ✅ NEW: Debugging helper
- * Clear the global registry without loading
- */
-function clearRegisteredContentQueue() {
-    const count = globalContentRegistry.length;
-    globalContentRegistry.length = 0;
-    console.log(`🧹 ContentLoader: Cleared ${count} items from registration queue`);
-}
-
 const text = {
     es: {
         spanish: 'Español',
@@ -8456,6 +7954,191 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 }]
         }], ctorParameters: () => [{ type: i2.ToastController }] });
 
+/**
+ * Create a reactive content observable from a content key.
+ * This is the primary utility for the `fromContent` pattern with unified support
+ * for both simple content and content with interpolation.
+ *
+ * @param langService - The language service instance
+ * @param config - Content configuration with optional interpolation
+ * @returns Observable that emits the content string and updates on language change
+ *
+ * @example Simple content:
+ * ```typescript
+ * // Component-specific content
+ * this.title$ = fromContent(this.langService, {
+ *   className: 'HeaderComponent',
+ *   key: 'title',
+ *   fallback: 'Default Title'
+ * });
+ *
+ * // Global content (no className needed)
+ * this.saveButton$ = fromContent(this.langService, {
+ *   key: 'save'
+ * });
+ * ```
+ *
+ * @example Content with interpolation:
+ * ```typescript
+ * // Content: "Hello {name}, you have {count} messages"
+ * this.greeting$ = fromContent(this.langService, {
+ *   className: 'WelcomeComponent',
+ *   key: 'greeting',
+ *   interpolation: { name: 'John', count: 5 }
+ * });
+ * // Results in: "Hello John, you have 5 messages"
+ * ```
+ */
+function fromContent(langService, config) {
+    // Use _global as default className if not provided
+    const finalClassName = config.className || '_global';
+    const contentObservable = langService.getContent(finalClassName, config.key, config.fallback);
+    // If interpolation is provided, apply it
+    if (config.interpolation) {
+        return contentObservable.pipe(map(content => interpolateContent(content, config.interpolation)));
+    }
+    return contentObservable;
+}
+/**
+ * Create a reactive content observable with interpolation support.
+ *
+ * @deprecated Use fromContent() with interpolation property instead.
+ * This method is kept for backward compatibility.
+ *
+ * @param langService - The language service instance
+ * @param config - Interpolated content configuration
+ * @returns Observable that emits the interpolated content string
+ *
+ * @example Migration:
+ * ```typescript
+ * // OLD (deprecated):
+ * this.greeting$ = fromContentWithInterpolation(this.langService, {
+ *   className: 'WelcomeComponent',
+ *   key: 'greeting',
+ *   interpolation: { name: 'John', count: 5 }
+ * });
+ *
+ * // NEW (recommended):
+ * this.greeting$ = fromContent(this.langService, {
+ *   className: 'WelcomeComponent',
+ *   key: 'greeting',
+ *   interpolation: { name: 'John', count: 5 }
+ * });
+ * ```
+ */
+function fromContentWithInterpolation(langService, config) {
+    // Delegate to the unified fromContent method
+    return fromContent(langService, config);
+}
+/**
+ * Create multiple reactive content observables at once.
+ * Useful when a component needs several content strings.
+ *
+ * @param langService - The language service instance
+ * @param className - The component class name
+ * @param keys - Array of content keys to retrieve
+ * @returns Observable that emits an object with all requested content
+ *
+ * @example
+ * ```typescript
+ * this.content$ = fromMultipleContent(this.langService, 'FormComponent', [
+ *   'title', 'submitButton', 'cancelButton'
+ * ]);
+ *
+ * // In template
+ * <ng-container *ngIf="content$ | async as content">
+ *   <h2>{{ content.title }}</h2>
+ *   <button>{{ content.submitButton }}</button>
+ *   <button>{{ content.cancelButton }}</button>
+ * </ng-container>
+ * ```
+ */
+function fromMultipleContent(langService, className, keys) {
+    return langService.getMultipleContent(className, keys);
+}
+/**
+ * Helper function to interpolate values into a content string.
+ * Replaces placeholders in the format {key} with corresponding values.
+ *
+ * @param content - The content string with placeholders
+ * @param values - Object with values to interpolate
+ * @returns The interpolated string
+ *
+ * @example
+ * ```typescript
+ * const result = interpolateContent("Hello {name}!", { name: "World" });
+ * // Returns: "Hello World!"
+ * ```
+ */
+function interpolateContent(content, values) {
+    if (!values)
+        return content;
+    return Object.entries(values).reduce((result, [key, value]) => {
+        return result.replace(new RegExp(`\\{${key}\\}`, 'g'), String(value));
+    }, content);
+}
+/**
+ * Factory function to create a content helper bound to a specific component class.
+ * This creates a more convenient API for components that need multiple content strings.
+ *
+ * @param langService - The language service instance
+ * @param className - The component class name
+ * @returns Object with convenient methods for content retrieval
+ *
+ * @example
+ * ```typescript
+ * export class MyComponent {
+ *   private content = createContentHelper(this.langService, 'MyComponent');
+ *
+ *   constructor(private langService: LangService) {}
+ *
+ *   ngOnInit() {
+ *     this.title$ = this.content.get('title');
+ *     this.allContent$ = this.content.getMultiple(['title', 'description']);
+ *   }
+ * }
+ * ```
+ */
+function createContentHelper(langService, className) {
+    return {
+        /**
+         * Get a single content string reactively.
+         */
+        get(key, fallback) {
+            return fromContent(langService, { className, key, fallback });
+        },
+        /**
+         * Get multiple content strings reactively.
+         */
+        getMultiple(keys) {
+            return fromMultipleContent(langService, className, keys);
+        },
+        /**
+         * Get content with interpolation.
+         */
+        getWithInterpolation(key, interpolation, fallback) {
+            return fromContentWithInterpolation(langService, {
+                className,
+                key,
+                interpolation,
+                fallback,
+            });
+        },
+        /**
+         * Get a single content string synchronously (current language only).
+         */
+        getText(key, fallback) {
+            return langService.getText(className, key, fallback);
+        },
+        /**
+         * Check if a content key exists.
+         */
+        hasContent(key) {
+            return langService.hasContent(className, key);
+        },
+    };
+}
+
 /*
  * Public API Surface of valtech-components
  */
@@ -8464,5 +8147,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ARTICLE_SPACING, ActionType, AlertBoxComponent, ArticleBuilder, ArticleComponent, AvatarComponent, BannerComponent, BaseDefault, BoxComponent, ButtonComponent, ButtonGroupComponent, CardComponent, CardSection, CardType, CheckInputComponent, ClearDefault, ClearDefaultBlock, ClearDefaultFull, ClearDefaultRound, ClearDefaultRoundBlock, ClearDefaultRoundFull, CommentInputComponent, ComponentContentHelper, ComponentStates, ContentLoaderComponent, ContentLoaderService, 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, clearRegisteredContentQueue, content, createButtonProps, createComponentContentHelper, createContentHelper, createContentModule, createDisplayProps, createReactiveProps, createTextProps, createTitleProps, fromContent, fromContentWithInterpolation, fromMultipleContent, getRegisteredContentQueue, globalContentData, goToTop, interpolateContent, isAtEnd, loadRegisteredContent, maxLength, registerContent, replaceSpecialChars, resolveColor, resolveInputDefaultValue, shouldUseReactiveContent };
+export { ARTICLE_SPACING, ActionType, AlertBoxComponent, ArticleBuilder, ArticleComponent, AvatarComponent, BannerComponent, BaseDefault, BoxComponent, ButtonComponent, ButtonGroupComponent, CardComponent, CardSection, CardType, CheckInputComponent, ClearDefault, ClearDefaultBlock, ClearDefaultFull, ClearDefaultRound, ClearDefaultRoundBlock, ClearDefaultRoundFull, CommentInputComponent, ComponentStates, ContentLoaderComponent, 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, 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, createContentHelper, createDisplayProps, createReactiveContentMetadata, createTextProps, createTitleProps, extractContentConfig, extractContentConfigWithInterpolation, fromContent, fromContentWithInterpolation, fromMultipleContent, globalContentData, goToTop, interpolateContent, interpolateStaticContent, isAtEnd, maxLength, replaceSpecialChars, resolveColor, resolveInputDefaultValue, shouldUseReactiveContent, shouldUseReactiveContentWithInterpolation };
 //# sourceMappingURL=valtech-components.mjs.map