valtech-components 2.0.418 → 2.0.420

package/fesm2022/valtech-components.mjs

@@ -1,12 +1,11 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, Input, Output, Injectable, inject, InjectionToken, Inject, ChangeDetectorRef, HostListener, Pipe, ChangeDetectionStrategy, ViewChild, ElementRef } from '@angular/core';
+import { EventEmitter, Component, Input, Output, Injectable, inject, HostListener, Pipe, ChangeDetectionStrategy, ViewChild, ChangeDetectorRef, ElementRef } from '@angular/core';
 import * as i2$1 from '@ionic/angular/standalone';
 import { IonAvatar, IonCard, IonIcon, IonButton, IonSpinner, IonText, IonModal, IonHeader, IonToolbar, IonContent, IonButtons, IonTitle, IonProgressBar, IonSkeletonText, IonFab, IonFabButton, IonFabList, IonLabel, IonCardContent, IonCardHeader, IonCardTitle, IonCardSubtitle, IonCheckbox, IonTextarea, IonDatetime, IonDatetimeButton, IonInput, IonSelect, IonSelectOption, IonRadioGroup, IonRadio, IonRange, IonSearchbar, IonSegment, IonSegmentButton, IonToggle, IonAccordion, IonAccordionGroup, IonItem, IonTabBar, IonTabButton, IonBadge, IonBreadcrumb, IonBreadcrumbs, IonChip, IonPopover, IonList, IonNote, ToastController as ToastController$1, IonCol, IonRow, IonMenuButton, IonFooter, IonListHeader, IonInfiniteScroll, IonInfiniteScrollContent, IonGrid, MenuController, IonMenu, IonMenuToggle, AlertController, ModalController } from '@ionic/angular/standalone';
 import * as i1 from '@angular/common';
-import { CommonModule, NgStyle, Location, AsyncPipe, NgFor, NgClass } from '@angular/common';
+import { CommonModule, NgStyle, Location, 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, logoGoogle, createOutline, trashOutline, playOutline, refreshOutline, documentTextOutline, lockClosedOutline, informationCircleOutline, logoNpm, removeOutline, add, close, share, create, trash, star, camera, mic, send, downloadOutline, chevronDown, language, globe, list, grid, apps, menu, settings, home, search, person, helpCircle, informationCircle, documentText, notifications, mail, calendar, folder, chevronForward, ellipsisHorizontal, chevronBack, playBack, playForward, checkmark, ellipse, starOutline, starHalf, heartHalf, checkmarkCircle, timeOutline, flag, trendingUp, trendingDown, remove, analytics, people, cash, cart, eye, chatbubbleOutline, thumbsUpOutline, thumbsUp, happyOutline, happy, sadOutline, sad, chevronUp, pin, pencil, callOutline, shuffleOutline, logoWhatsapp, paperPlaneOutline, mailOutline, trophyOutline, ticketOutline, giftOutline, personOutline, ellipsisVertical, closeCircle, chevronBackOutline, sendOutline, chatbubbleEllipsesOutline, swapVerticalOutline, chevronUpOutline, documentOutline } from 'ionicons/icons';
-import { BehaviorSubject, distinctUntilChanged, shareReplay, map, Subscription, of, combineLatest, filter } from 'rxjs';
+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, logoGoogle, createOutline, trashOutline, playOutline, refreshOutline, documentTextOutline, lockClosedOutline, informationCircleOutline, logoNpm, removeOutline, add, close, share, create, trash, star, camera, mic, send, downloadOutline, chevronDown, language, list, grid, apps, menu, settings, home, search, person, helpCircle, informationCircle, documentText, notifications, mail, calendar, folder, chevronForward, ellipsisHorizontal, chevronBack, playBack, playForward, checkmark, ellipse, starOutline, starHalf, heartHalf, checkmarkCircle, timeOutline, flag, trendingUp, trendingDown, remove, analytics, people, cash, cart, eye, chatbubbleOutline, thumbsUpOutline, thumbsUp, happyOutline, happy, sadOutline, sad, chevronUp, pin, pencil, callOutline, shuffleOutline, logoWhatsapp, paperPlaneOutline, mailOutline, trophyOutline, ticketOutline, giftOutline, personOutline, ellipsisVertical, closeCircle, chevronBackOutline, sendOutline, chatbubbleEllipsesOutline, swapVerticalOutline, chevronUpOutline, documentOutline } from 'ionicons/icons';
 import * as i1$4 from '@angular/router';
 import { Router, RouterLink, NavigationEnd, RouterOutlet } from '@angular/router';
 import { Browser } from '@capacitor/browser';
@@ -14,7 +13,7 @@ import * as i1$1 from '@angular/platform-browser';
 import QRCodeStyling from 'qr-code-styling';
 import * as i1$2 from '@angular/forms';
 import { ReactiveFormsModule, FormsModule, FormControl, Validators } from '@angular/forms';
-import { map as map$1 } from 'rxjs/operators';
+import { BehaviorSubject, filter } from 'rxjs';
 import * as i1$3 from 'ng-otp-input';
 import { NgOtpInputComponent, NgOtpInputModule } from 'ng-otp-input';
 import * as i2 from '@ionic/angular';
@@ -233,125 +232,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", 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';
@@ -583,600 +463,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 }]
         }], ctorParameters: () => [] });
 
-const LANG = 'LANG';
-const THEME = 'THEME';
-
-/**
- * Utility service for interacting with browser localStorage in a type-safe way.
- * Provides static methods for setting, getting, removing, and clearing items.
- */
-class LocalStorageService {
-    /**
-     * Stores a value in localStorage under the given reference key.
-     * @param reference The key to store the value under
-     * @param value The value to store
-     */
-    static set(reference, value) {
-        localStorage.setItem(reference, JSON.stringify(value));
-    }
-    /**
-     * Retrieves a value from localStorage by key.
-     * @param reference The key to retrieve
-     * @returns The parsed value
-     */
-    static get(reference) {
-        const value = localStorage.getItem(reference);
-        return JSON.parse(value);
-    }
-    /**
-     * Removes an item from localStorage by key.
-     * @param reference The key to remove
-     */
-    static remove(reference) {
-        localStorage.removeItem(reference);
-    }
-    /**
-     * Clears all items from localStorage.
-     */
-    static clear() {
-        localStorage.clear();
-    }
-}
-
-const ValtechConfigService = new InjectionToken('ValtechConfig');
-
-class TextContent {
-    constructor(text) {
-        this.text = text;
-    }
-    get Content() {
-        return this.text;
-    }
-}
-/**
- * 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.
- *
- * 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) {}
- *
- * // Get current language
- * const currentLang = this.langService.currentLang;
- *
- * // Subscribe to language changes
- * this.langService.currentLang$.subscribe(lang => console.log('Language changed:', lang));
- *
- * // Get static text
- * const text = this.langService.getText('ComponentName', 'textKey');
- *
- * // Get reactive text
- * const text$ = this.langService.getContent('ComponentName', 'textKey');
- * ```
- */
-class LangService {
-    constructor(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);
-        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.
-     * Use this to subscribe to language changes in components.
-     */
-    get currentLang$() {
-        return this.selectedLang.asObservable().pipe(distinctUntilChanged(), shareReplay(1) // Ensure new subscribers get the current value
-        );
-    }
-    /**
-     * Get the current language synchronously.
-     */
-    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);
-    }
-    /**
-     * Get content for a component class and key (legacy method).
-     *
-     * @deprecated Use getText() or getContent() for better type safety
-     */
-    Text(className) {
-        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
-     * @param fallback - Optional fallback text if key is not found
-     * @returns The text string or fallback
-     */
-    getText(className, key, fallback) {
-        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
-     * @param fallback - Optional fallback text if key is not found
-     * @returns Observable that emits the text string whenever language changes
-     */
-    getContent(className, key, fallback) {
-        return this.currentLang$.pipe(map(lang => {
-            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
-     * @returns Observable that emits an object with all requested keys
-     */
-    getMultipleContent(className, keys) {
-        return this.currentLang$.pipe(map(lang => {
-            const result = {};
-            keys.forEach(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 in any available language.
-     *
-     * @param className - The component class name
-     * @param key - The text key
-     * @returns True if the key exists in any language
-     */
-    hasContent(className, key) {
-        const classContent = this.content[className];
-        if (!classContent)
-            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');
-    }
-    /**
-     * Register or update content for a component dynamically.
-     * This allows registering content at runtime without APP_INITIALIZER.
-     *
-     * @param className - The component class name
-     * @param content - The multilingual content object
-     * @param merge - Whether to merge with existing content (default: true)
-     *
-     * @example
-     * ```typescript
-     * this.langService.registerContent('MyComponent', {
-     *   [LANGUAGES.ES]: { title: 'Título', description: 'Descripción' },
-     *   [LANGUAGES.EN]: { title: 'Title', description: 'Description' }
-     * });
-     * ```
-     */
-    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}"`);
-    }
-    /**
-     * Update multiple content registrations at once.
-     *
-     * @param contentMap - Map of className to content
-     * @param merge - Whether to merge with existing content (default: true)
-     *
-     * @example
-     * ```typescript
-     * this.langService.registerMultipleContent({
-     *   'Component1': { [LANGUAGES.ES]: { key1: 'valor1' } },
-     *   'Component2': { [LANGUAGES.EN]: { key2: 'value2' } }
-     * });
-     * ```
-     */
-    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');
-    }
-    /**
-     * Remove content for a specific component.
-     *
-     * @param className - The component class name to remove
-     */
-    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 {
-            console.warn(`LangService: No content found for "${className}" to remove`);
-        }
-    }
-    /**
-     * Get a list of all registered component classes.
-     *
-     * @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.
-     *
-     * @returns Complete content configuration
-     */
-    getContentConfiguration() {
-        return JSON.parse(JSON.stringify(this.content));
-    }
-    /**
-     * 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
-     * @param interpolationData - Object with values to interpolate
-     * @param fallback - Optional fallback text if key is not found
-     * @returns Text with interpolated values
-     */
-    getTextWithInterpolation(className, key, interpolationData, fallback) {
-        const content = this.getText(className, key, fallback);
-        return this.interpolateString(content, interpolationData);
-    }
-    /**
-     * Get reactive content with interpolation support.
-     * Returns an Observable that emits interpolated content when language changes.
-     *
-     * @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
-     */
-    getContentWithInterpolation(className, key, interpolationData, fallback) {
-        return this.getContent(className, key, fallback).pipe(map(content => this.interpolateString(content, interpolationData)));
-    }
-    /**
-     * Interpolate a string with provided 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
-     * interpolateString('Hello {{name}}!', { name: 'World' })
-     * // Returns: 'Hello World!'
-     * ```
-     */
-    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;
-        });
-    }
-    /**
-     * Legacy function equivalent to the old fromContentWithInterpolation.
-     * Provides reactive content with interpolation support for backward compatibility.
-     *
-     * @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
-     *
-     * @deprecated Use getContentWithInterpolation instead
-     */
-    fromContentWithInterpolation(className, key, interpolationData, fallback) {
-        return this.getContentWithInterpolation(className, key, interpolationData, fallback);
-    }
-    // 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: "18.2.14", ngImport: i0, type: LangService, deps: [{ token: ValtechConfigService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LangService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LangService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [ValtechConfigService]
-                }] }] });
-
 /**
  * val-button
  *
- * A customizable button supporting icons, loading state, navigation, and reactive content.
- * Supports both static text and reactive content from the content service.
- * Follows the same content pattern as val-text for consistency.
+ * A customizable button supporting icons, loading state, and navigation.
  *
  * @example Static text:
  * <val-button [props]="{
@@ -1187,38 +477,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  *   icon: { name: 'save', slot: 'start' }
  * }" (onClick)="handler()"></val-button>
  *
- * @example Reactive content:
- * <val-button [props]="{
- *   contentKey: 'save',
- *   contentClass: 'MyComponent',
- *   contentFallback: 'Save',
- *   color: 'primary',
- *   type: 'button',
- *   state: 'ENABLED',
- *   icon: { name: 'save', slot: 'start' }
- * }" (onClick)="handler()"></val-button>
- *
- * @example Reactive content with interpolation:
- * <val-button [props]="{
- *   contentKey: 'saveCount',
- *   contentClass: 'MyComponent',
- *   contentInterpolation: { count: 5 },
- *   contentFallback: 'Save Items',
- *   color: 'primary',
- *   type: 'button',
- *   state: 'ENABLED'
- * }" (onClick)="handler()"></val-button>
- *
- * @input props: ButtonMetadata - Configuration for the button (text/content, color, icon, state, etc.)
+ * @input props: ButtonMetadata - Configuration for the button (text, color, icon, state, etc.)
  * @output onClick - Emits when the button is clicked
  */
 class ButtonComponent {
-    constructor(download, icon, navigation, langService) {
+    constructor(download, icon, navigation) {
         this.download = download;
         this.navigation = navigation;
-        this.langService = langService;
         this.states = ComponentStates;
-        this.subscriptions = new Subscription();
+        /**
+         * The text to display on the button.
+         */
+        this.displayText = '';
         /**
          * Event emitted when the button is clicked.
          */
@@ -1227,44 +497,35 @@ class ButtonComponent {
     ngOnInit() {
         this.setupDisplayText();
     }
-    ngOnDestroy() {
-        this.subscriptions.unsubscribe();
-    }
     /**
-     * Set up the text content observable based on the props configuration.
-     * Priority: static text > reactive content with interpolation > reactive content
-     * This follows the same pattern as val-text component.
+     * Set up the text content based on the props configuration.
      */
     setupDisplayText() {
         if (this.props.text) {
-            // Static text takes precedence
             if (this.props.contentInterpolation) {
-                // Static text with interpolation
-                const interpolatedText = interpolateStaticContent(this.props.text, this.props.contentInterpolation);
-                this.displayText$ = of(interpolatedText);
+                this.displayText = this.interpolateContent(this.props.text, this.props.contentInterpolation);
             }
             else {
-                // Simple static text
-                this.displayText$ = of(this.props.text);
+                this.displayText = 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.langService.getContentWithInterpolation(this.props.contentClass, this.props.contentKey, this.props.contentInterpolation, this.props.contentFallback);
-            }
-            else {
-                // Simple reactive content
-                this.displayText$ = this.langService.getContent(this.props.contentClass, this.props.contentKey, this.props.contentFallback);
-            }
+        else if (this.props.contentFallback) {
+            // Backwards compatibility: use fallback if text is not provided
+            this.displayText = this.props.contentFallback;
         }
         else {
-            // Fallback to empty string if no valid content configuration
-            console.warn('val-button: No valid content configuration provided. Use either "text" for static text or "contentKey" + "contentClass" for reactive content.');
-            this.displayText$ = of(this.props.contentFallback || '');
+            this.displayText = '';
         }
     }
+    /**
+     * Interpolate placeholders in content with provided values.
+     * Supports {{placeholder}} format.
+     */
+    interpolateContent(content, values) {
+        return content.replace(/\{\{(\w+)\}\}/g, (match, key) => {
+            return values[key] !== undefined ? String(values[key]) : match;
+        });
+    }
     clickHandler() {
         if (this.props.state === this.states.DISABLED) {
             return;
@@ -1280,7 +541,7 @@ class ButtonComponent {
         }
         this.onClick.emit(this.props.token);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ButtonComponent, deps: [{ token: DownloadService }, { token: IconService }, { token: NavigationService }, { token: LangService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ButtonComponent, deps: [{ token: DownloadService }, { token: IconService }, { token: NavigationService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ButtonComponent, isStandalone: true, selector: "val-button", inputs: { props: "props" }, outputs: { onClick: "onClick" }, ngImport: i0, template: `
     <ion-button
       [type]="props.type"
@@ -1297,9 +558,9 @@ class ButtonComponent {
     >
       <ion-icon *ngIf="props.icon" [slot]="props.icon.slot" [name]="props.icon.name"></ion-icon>
       <ion-spinner *ngIf="props.state === states.WORKING" name="circular"></ion-spinner>
-      <ion-text *ngIf="props.state !== states.WORKING">{{ displayText$ | async }}</ion-text>
+      <ion-text *ngIf="props.state !== states.WORKING">{{ displayText }}</ion-text>
     </ion-button>
-  `, isInline: true, styles: [":root{--ion-color-primary: #7026df;--ion-color-primary-rgb: 112, 38, 223;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #6321c4;--ion-color-primary-tint: #7e3ce2;--ion-color-secondary: #e2ccff;--ion-color-secondary-rgb: 226, 204, 255;--ion-color-secondary-contrast: #000000;--ion-color-secondary-contrast-rgb: 0, 0, 0;--ion-color-secondary-shade: #c7b4e0;--ion-color-secondary-tint: #e5d1ff;--ion-color-texti: #354c69;--ion-color-texti-rgb: 53, 76, 105;--ion-color-texti-contrast: #ffffff;--ion-color-texti-contrast-rgb: 255, 255, 255;--ion-color-texti-shade: #2f435c;--ion-color-texti-tint: #495e78;--ion-color-darki: #090f1b;--ion-color-darki-rgb: 9, 15, 27;--ion-color-darki-contrast: #ffffff;--ion-color-darki-contrast-rgb: 255, 255, 255;--ion-color-darki-shade: #080d18;--ion-color-darki-tint: #222732;--ion-color-medium: #9e9e9e;--ion-color-medium-rgb: 158, 158, 158;--ion-color-medium-contrast: #000000;--ion-color-medium-contrast-rgb: 0, 0, 0;--ion-color-medium-shade: #8b8b8b;--ion-color-medium-tint: #a8a8a8;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-medium)}@media (prefers-color-scheme: dark){:root{--ion-color-texti: #8fc1ff;--ion-color-texti-rgb: 143, 193, 255;--ion-color-texti-contrast: #000000;--ion-color-texti-contrast-rgb: 0, 0, 0;--ion-color-texti-shade: #7eaae0;--ion-color-texti-tint: #9ac7ff;--ion-color-darki: #ffffff;--ion-color-darki-rgb: 255, 255, 255;--ion-color-darki-contrast: #000000;--ion-color-darki-contrast-rgb: 0, 0, 0;--ion-color-darki-shade: #e0e0e0;--ion-color-darki-tint: #ffffff;--ion-color-primary: #8f49f8;--ion-color-primary-rgb: 143, 73, 248;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #7e40da;--ion-color-primary-tint: #9a5bf9}}.ion-color-texti{--ion-color-base: var(--ion-color-texti);--ion-color-base-rgb: var(--ion-color-texti-rgb);--ion-color-contrast: var(--ion-color-texti-contrast);--ion-color-contrast-rgb: var(--ion-color-texti-contrast-rgb);--ion-color-shade: var(--ion-color-texti-shade);--ion-color-tint: var(--ion-color-texti-tint)}.ion-color-darki{--ion-color-base: var(--ion-color-darki);--ion-color-base-rgb: var(--ion-color-darki-rgb);--ion-color-contrast: var(--ion-color-darki-contrast);--ion-color-contrast-rgb: var(--ion-color-darki-contrast-rgb);--ion-color-shade: var(--ion-color-darki-shade);--ion-color-tint: var(--ion-color-darki-tint)}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"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }] }); }
+  `, isInline: true, styles: [":root{--ion-color-primary: #7026df;--ion-color-primary-rgb: 112, 38, 223;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #6321c4;--ion-color-primary-tint: #7e3ce2;--ion-color-secondary: #e2ccff;--ion-color-secondary-rgb: 226, 204, 255;--ion-color-secondary-contrast: #000000;--ion-color-secondary-contrast-rgb: 0, 0, 0;--ion-color-secondary-shade: #c7b4e0;--ion-color-secondary-tint: #e5d1ff;--ion-color-texti: #354c69;--ion-color-texti-rgb: 53, 76, 105;--ion-color-texti-contrast: #ffffff;--ion-color-texti-contrast-rgb: 255, 255, 255;--ion-color-texti-shade: #2f435c;--ion-color-texti-tint: #495e78;--ion-color-darki: #090f1b;--ion-color-darki-rgb: 9, 15, 27;--ion-color-darki-contrast: #ffffff;--ion-color-darki-contrast-rgb: 255, 255, 255;--ion-color-darki-shade: #080d18;--ion-color-darki-tint: #222732;--ion-color-medium: #9e9e9e;--ion-color-medium-rgb: 158, 158, 158;--ion-color-medium-contrast: #000000;--ion-color-medium-contrast-rgb: 0, 0, 0;--ion-color-medium-shade: #8b8b8b;--ion-color-medium-tint: #a8a8a8;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-medium)}@media (prefers-color-scheme: dark){:root{--ion-color-texti: #8fc1ff;--ion-color-texti-rgb: 143, 193, 255;--ion-color-texti-contrast: #000000;--ion-color-texti-contrast-rgb: 0, 0, 0;--ion-color-texti-shade: #7eaae0;--ion-color-texti-tint: #9ac7ff;--ion-color-darki: #ffffff;--ion-color-darki-rgb: 255, 255, 255;--ion-color-darki-contrast: #000000;--ion-color-darki-contrast-rgb: 0, 0, 0;--ion-color-darki-shade: #e0e0e0;--ion-color-darki-tint: #ffffff;--ion-color-primary: #8f49f8;--ion-color-primary-rgb: 143, 73, 248;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #7e40da;--ion-color-primary-tint: #9a5bf9}}.ion-color-texti{--ion-color-base: var(--ion-color-texti);--ion-color-base-rgb: var(--ion-color-texti-rgb);--ion-color-contrast: var(--ion-color-texti-contrast);--ion-color-contrast-rgb: var(--ion-color-texti-contrast-rgb);--ion-color-shade: var(--ion-color-texti-shade);--ion-color-tint: var(--ion-color-texti-tint)}.ion-color-darki{--ion-color-base: var(--ion-color-darki);--ion-color-base-rgb: var(--ion-color-darki-rgb);--ion-color-contrast: var(--ion-color-darki-contrast);--ion-color-contrast-rgb: var(--ion-color-darki-contrast-rgb);--ion-color-shade: var(--ion-color-darki-shade);--ion-color-tint: var(--ion-color-darki-tint)}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"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
@@ -1319,52 +580,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
     >
       <ion-icon *ngIf="props.icon" [slot]="props.icon.slot" [name]="props.icon.name"></ion-icon>
       <ion-spinner *ngIf="props.state === states.WORKING" name="circular"></ion-spinner>
-      <ion-text *ngIf="props.state !== states.WORKING">{{ displayText$ | async }}</ion-text>
+      <ion-text *ngIf="props.state !== states.WORKING">{{ displayText }}</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: LangService }], propDecorators: { props: [{
+        }], ctorParameters: () => [{ type: DownloadService }, { type: IconService }, { type: NavigationService }], propDecorators: { props: [{
                 type: Input
             }], onClick: [{
                 type: Output
             }] } });
-/**
- * Helper function to create reactive button props from content configuration.
- * This provides a convenient way to create val-button props with reactive content.
- * Follows the same pattern as createTextProps for consistency.
- *
- * @param contentConfig - Content configuration
- * @param styleConfig - Optional style and behavior configuration
- * @returns ButtonMetadata with content properties set
- *
- * @example
- * ```typescript
- * // In component
- * saveButtonProps: ButtonMetadata = createButtonProps({
- *   contentKey: 'save',
- *   contentClass: 'MyComponent'
- * }, {
- *   color: 'primary',
- *   icon: { name: 'save', slot: 'start' }
- * });
- * ```
- */
-function createButtonProps(contentConfig, styleConfig = {}) {
-    return {
-        contentKey: contentConfig.contentKey,
-        contentClass: contentConfig.contentClass,
-        contentFallback: contentConfig.contentFallback,
-        contentInterpolation: contentConfig.contentInterpolation,
-        color: styleConfig.color || 'primary',
-        type: styleConfig.type || 'button',
-        state: styleConfig.state || ComponentStates.ENABLED,
-        size: styleConfig.size,
-        fill: styleConfig.fill,
-        icon: styleConfig.icon,
-        expand: styleConfig.expand,
-        shape: styleConfig.shape,
-        handler: styleConfig.handler,
-    };
-}
 
 const Icon = (name, slot) => {
     return {
@@ -1587,128 +810,48 @@ const SecondarySolidBlockIconHrefButton = (text, icon, href, target) => {
  * val-display
  *
  * Displays prominent text or titles with custom color and size.
- * Supports both static and reactive content patterns.
  *
  * @example
- * // Static content
  * <val-display [props]="{ content: 'Title', color: 'dark', size: 'large' }"></val-display>
  *
- * // Reactive content
- * <val-display [props]="{ contentConfig: { key: 'welcome.title' }, color: 'primary', size: 'xlarge' }"></val-display>
- *
- * @input props: DisplayMetadata - Configuration for the display (content/contentConfig, color, size)
+ * @input props: DisplayMetadata - Configuration for the display (content, color, size)
  */
 class DisplayComponent {
-    constructor() {
-        this.subscriptions = new Subscription();
-        this.langService = inject(LangService);
-        this.cdr = inject(ChangeDetectorRef);
-    }
-    ngOnInit() {
-        this.initializeDisplayContent();
-    }
-    ngOnChanges(changes) {
-        if (changes['props']) {
-            this.initializeDisplayContent();
-            this.cdr.detectChanges();
-        }
-    }
-    ngOnDestroy() {
-        this.subscriptions.unsubscribe();
-    }
-    initializeDisplayContent() {
-        // Static content takes precedence
+    /**
+     * Returns the content to display.
+     * Uses static content, or contentConfig fallback for backwards compatibility.
+     */
+    getDisplayContent() {
         if (this.props.content !== undefined) {
-            this.displayContent$ = of(this.props.content);
-            return;
+            return this.props.content;
         }
-        // Use reactive content if configured
-        if (this.props.contentConfig) {
-            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;
+        // Backwards compatibility: use fallback from contentConfig if present
+        if (this.props.contentConfig?.fallback) {
+            return this.props.contentConfig.fallback;
         }
-        // No content configured - use empty string
-        this.displayContent$ = of('');
+        return '';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: DisplayComponent, isStandalone: true, selector: "val-display", inputs: { props: "props" }, usesOnChanges: true, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: DisplayComponent, isStandalone: true, selector: "val-display", inputs: { props: "props" }, ngImport: i0, template: `
     <ion-text [color]="props.color">
       <p [class]="props.size">
-        {{ displayContent$ | async }}
+        {{ getDisplayContent() }}
       </p>
     </ion-text>
-  `, isInline: true, styles: [":root{--ion-color-primary: #7026df;--ion-color-primary-rgb: 112, 38, 223;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #6321c4;--ion-color-primary-tint: #7e3ce2;--ion-color-secondary: #e2ccff;--ion-color-secondary-rgb: 226, 204, 255;--ion-color-secondary-contrast: #000000;--ion-color-secondary-contrast-rgb: 0, 0, 0;--ion-color-secondary-shade: #c7b4e0;--ion-color-secondary-tint: #e5d1ff;--ion-color-texti: #354c69;--ion-color-texti-rgb: 53, 76, 105;--ion-color-texti-contrast: #ffffff;--ion-color-texti-contrast-rgb: 255, 255, 255;--ion-color-texti-shade: #2f435c;--ion-color-texti-tint: #495e78;--ion-color-darki: #090f1b;--ion-color-darki-rgb: 9, 15, 27;--ion-color-darki-contrast: #ffffff;--ion-color-darki-contrast-rgb: 255, 255, 255;--ion-color-darki-shade: #080d18;--ion-color-darki-tint: #222732;--ion-color-medium: #9e9e9e;--ion-color-medium-rgb: 158, 158, 158;--ion-color-medium-contrast: #000000;--ion-color-medium-contrast-rgb: 0, 0, 0;--ion-color-medium-shade: #8b8b8b;--ion-color-medium-tint: #a8a8a8;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-medium)}@media (prefers-color-scheme: dark){:root{--ion-color-texti: #8fc1ff;--ion-color-texti-rgb: 143, 193, 255;--ion-color-texti-contrast: #000000;--ion-color-texti-contrast-rgb: 0, 0, 0;--ion-color-texti-shade: #7eaae0;--ion-color-texti-tint: #9ac7ff;--ion-color-darki: #ffffff;--ion-color-darki-rgb: 255, 255, 255;--ion-color-darki-contrast: #000000;--ion-color-darki-contrast-rgb: 0, 0, 0;--ion-color-darki-shade: #e0e0e0;--ion-color-darki-tint: #ffffff;--ion-color-primary: #8f49f8;--ion-color-primary-rgb: 143, 73, 248;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #7e40da;--ion-color-primary-tint: #9a5bf9}}.ion-color-texti{--ion-color-base: var(--ion-color-texti);--ion-color-base-rgb: var(--ion-color-texti-rgb);--ion-color-contrast: var(--ion-color-texti-contrast);--ion-color-contrast-rgb: var(--ion-color-texti-contrast-rgb);--ion-color-shade: var(--ion-color-texti-shade);--ion-color-tint: var(--ion-color-texti-tint)}.ion-color-darki{--ion-color-base: var(--ion-color-darki);--ion-color-base-rgb: var(--ion-color-darki-rgb);--ion-color-contrast: var(--ion-color-darki-contrast);--ion-color-contrast-rgb: var(--ion-color-darki-contrast-rgb);--ion-color-shade: var(--ion-color-darki-shade);--ion-color-tint: var(--ion-color-darki-tint)}.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"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }] }); }
+  `, isInline: true, styles: [":root{--ion-color-primary: #7026df;--ion-color-primary-rgb: 112, 38, 223;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #6321c4;--ion-color-primary-tint: #7e3ce2;--ion-color-secondary: #e2ccff;--ion-color-secondary-rgb: 226, 204, 255;--ion-color-secondary-contrast: #000000;--ion-color-secondary-contrast-rgb: 0, 0, 0;--ion-color-secondary-shade: #c7b4e0;--ion-color-secondary-tint: #e5d1ff;--ion-color-texti: #354c69;--ion-color-texti-rgb: 53, 76, 105;--ion-color-texti-contrast: #ffffff;--ion-color-texti-contrast-rgb: 255, 255, 255;--ion-color-texti-shade: #2f435c;--ion-color-texti-tint: #495e78;--ion-color-darki: #090f1b;--ion-color-darki-rgb: 9, 15, 27;--ion-color-darki-contrast: #ffffff;--ion-color-darki-contrast-rgb: 255, 255, 255;--ion-color-darki-shade: #080d18;--ion-color-darki-tint: #222732;--ion-color-medium: #9e9e9e;--ion-color-medium-rgb: 158, 158, 158;--ion-color-medium-contrast: #000000;--ion-color-medium-contrast-rgb: 0, 0, 0;--ion-color-medium-shade: #8b8b8b;--ion-color-medium-tint: #a8a8a8;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-medium)}@media (prefers-color-scheme: dark){:root{--ion-color-texti: #8fc1ff;--ion-color-texti-rgb: 143, 193, 255;--ion-color-texti-contrast: #000000;--ion-color-texti-contrast-rgb: 0, 0, 0;--ion-color-texti-shade: #7eaae0;--ion-color-texti-tint: #9ac7ff;--ion-color-darki: #ffffff;--ion-color-darki-rgb: 255, 255, 255;--ion-color-darki-contrast: #000000;--ion-color-darki-contrast-rgb: 0, 0, 0;--ion-color-darki-shade: #e0e0e0;--ion-color-darki-tint: #ffffff;--ion-color-primary: #8f49f8;--ion-color-primary-rgb: 143, 73, 248;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #7e40da;--ion-color-primary-tint: #9a5bf9}}.ion-color-texti{--ion-color-base: var(--ion-color-texti);--ion-color-base-rgb: var(--ion-color-texti-rgb);--ion-color-contrast: var(--ion-color-texti-contrast);--ion-color-contrast-rgb: var(--ion-color-texti-contrast-rgb);--ion-color-shade: var(--ion-color-texti-shade);--ion-color-tint: var(--ion-color-texti-tint)}.ion-color-darki{--ion-color-base: var(--ion-color-darki);--ion-color-base-rgb: var(--ion-color-darki-rgb);--ion-color-contrast: var(--ion-color-darki-contrast);--ion-color-contrast-rgb: var(--ion-color-darki-contrast-rgb);--ion-color-shade: var(--ion-color-darki-shade);--ion-color-tint: var(--ion-color-darki-tint)}.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"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DisplayComponent, decorators: [{
             type: Component,
             args: [{ selector: 'val-display', standalone: true, imports: [CommonModule, IonText], template: `
     <ion-text [color]="props.color">
       <p [class]="props.size">
-        {{ displayContent$ | async }}
+        {{ getDisplayContent() }}
       </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: () => [], propDecorators: { props: [{
+        }], propDecorators: { props: [{
                 type: Input
             }] } });
-/**
- * Helper function to create reactive display props from content configuration.
- * This provides a convenient way to create val-display props with reactive content.
- *
- * @param contentConfig - Content configuration for reactive content
- * @param styleConfig - Optional style configuration (color and size)
- * @returns DisplayMetadata with content properties set
- *
- * @example
- * ```typescript
- * // In component
- * titleProps: DisplayMetadata = createDisplayProps({
- *   key: 'title',
- *   className: 'HeaderComponent',
- *   fallback: 'Default Title'
- * }, {
- *   color: 'primary',
- *   size: 'large'
- * });
- * ```
- *
- * @example
- * ```typescript
- * // With interpolation
- * greetingProps: DisplayMetadata = createDisplayProps({
- *   key: 'greeting',
- *   className: 'UserComponent',
- *   fallback: 'Hello!',
- *   interpolation: { name: 'John', count: 5 }
- * }, {
- *   color: 'secondary',
- *   size: 'medium'
- * });
- * ```
- *
- * @example
- * ```typescript
- * // Using default style values
- * simpleProps: DisplayMetadata = createDisplayProps({
- *   key: 'welcomeMessage',
- *   className: 'HomeComponent'
- * }); // Will use default color: 'dark' and size: 'medium'
- * ```
- */
-function createDisplayProps(contentConfig, styleConfig = {}) {
-    return {
-        contentConfig: {
-            key: contentConfig.key,
-            className: contentConfig.className,
-            fallback: contentConfig.fallback,
-            interpolation: contentConfig.interpolation,
-        },
-        color: styleConfig.color || 'dark',
-        size: styleConfig.size || 'medium',
-    };
-}
 
 /**
  * val-divider
@@ -1870,8 +1013,6 @@ class ImageComponent {
         this.initialDistance = 0;
         this.initialZoom = 1;
         this.touches = [];
-        // Lang service
-        this.langService = inject(LangService);
         // Math for template
         this.Math = Math;
     }
@@ -2661,42 +1802,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     standalone: true,
                 }]
         }] });
-
-/**
- * val-text
- *
- * Enhanced text component that supports both static content and reactive content from the language service.
- * The component automatically updates when the language changes if using reactive content.
- *
- * @example Static content:
- * ```html
- * <val-text [props]="{
- *   content: 'Static text',
- *   color: 'primary',
- *   size: 'medium',
- *   bold: false
- * }"></val-text>
- * ```
- *
- * @example Reactive content:
- * ```html
- * <val-text [props]="{
- *   contentKey: 'welcomeMessage',
- *   contentClass: 'HomeComponent',
- *   contentFallback: 'Welcome!',
- *   color: 'primary',
- *   size: 'large',
- *   bold: true
- * }"></val-text>
- * ```
+
+/**
+ * val-text
+ *
+ * Text component that supports static content with optional interpolation.
  *
- * @example Reactive content with interpolation:
+ * @example Static content:
  * ```html
  * <val-text [props]="{
- *   contentKey: 'greeting',
- *   contentClass: 'UserComponent',
- *   contentInterpolation: { name: 'John', count: 5 },
- *   color: 'secondary',
+ *   content: 'Static text',
+ *   color: 'primary',
  *   size: 'medium',
  *   bold: false
  * }"></val-text>
@@ -2705,15 +1821,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  * @example With automatic link processing:
  * ```html
  * <val-text [props]="{
- *   content: 'Visit https://example.com or go to /profile for more info',
+ *   content: 'Visit https://example.com for more info',
  *   processLinks: true,
- *   linkConfig: {
- *     openExternalInNewTab: true,
- *     openInternalInNewTab: false,
- *     linkClass: 'custom-link',
- *     externalLinkClass: 'external',
- *     internalLinkClass: 'internal'
- *   },
  *   color: 'primary',
  *   size: 'medium'
  * }"></val-text>
@@ -2722,91 +1831,51 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  * @example With partial bold support:
  * ```html
  * <val-text [props]="{
- *   content: 'Hola <b>Victor</b>, cómo estás? También puedes usar <strong>strong</strong>',
+ *   content: 'Hola <b>Victor</b>, cómo estás?',
  *   allowPartialBold: true,
  *   color: 'dark',
- *   size: 'medium',
- *   bold: false
- * }"></val-text>
- * ```
- *
- * @example Reactive content with partial bold:
- * ```html
- * <val-text [props]="{
- *   contentKey: 'welcomeWithName',
- *   contentClass: 'UserComponent',
- *   contentInterpolation: { name: '<b>Juan</b>' },
- *   allowPartialBold: true,
- *   color: 'primary',
- *   size: 'large',
- *   bold: false
+ *   size: 'medium'
  * }"></val-text>
  * ```
  *
- * @example Using ContentService helper:
- * ```typescript
- * // In component
- * content = inject(ContentService);
- * componentContent = this.content.forComponent('MyComponent');
- *
- * textProps = {
- *   content: this.componentContent.getText('title'), // sync
- *   color: 'primary',
- *   size: 'large',
- *   bold: true
- * };
- * // Or with reactive binding:
- * title$ = this.componentContent.get('title');
- * ```
- *
- * @input props: TextMetadata - Configuration for the text (content, styling, and reactive content options)
+ * @input props: TextMetadata - Configuration for the text (content, color, size, bold, etc.)
  */
 class TextComponent {
-    constructor(langService, linkProcessor) {
-        this.langService = langService;
-        this.linkProcessor = linkProcessor;
-        this.subscription = new Subscription();
+    constructor() {
+        /**
+         * The content to display.
+         */
+        this.displayContent = '';
     }
     ngOnInit() {
         this.setupDisplayContent();
     }
-    ngOnDestroy() {
-        this.subscription.unsubscribe();
-    }
     /**
-     * Set up the content observable based on the props configuration.
-     * Priority: static content > reactive content with interpolation > reactive content
+     * Set up the content based on the props configuration.
      */
     setupDisplayContent() {
         if (this.props.content) {
-            // Static content takes precedence
             if (this.props.contentInterpolation) {
-                // Static content with interpolation
-                const interpolatedContent = interpolateStaticContent(this.props.content, this.props.contentInterpolation);
-                this.displayContent$ = of(interpolatedContent);
+                this.displayContent = this.interpolateContent(this.props.content, this.props.contentInterpolation);
             }
             else {
-                // Simple static content
-                this.displayContent$ = of(this.props.content);
+                this.displayContent = this.props.content;
             }
         }
-        else if (shouldUseReactiveContent(this.props)) {
-            // Reactive content from language service
-            if (this.props.contentInterpolation) {
-                // With interpolation
-                this.displayContent$ = this.langService.getContentWithInterpolation(this.props.contentClass, this.props.contentKey, this.props.contentInterpolation, this.props.contentFallback);
-            }
-            else {
-                // Simple reactive content
-                this.displayContent$ = this.langService.getContent(this.props.contentClass, this.props.contentKey, this.props.contentFallback);
-            }
+        else if (this.props.contentFallback) {
+            // Backwards compatibility: use fallback if content is not provided
+            this.displayContent = this.props.contentFallback;
         }
         else {
-            // Fallback to empty string if no valid content configuration
-            console.warn('val-text: No valid content configuration provided. Use either "content" for static text or "contentKey" + "contentClass" for reactive content.');
-            this.displayContent$ = of(this.props.contentFallback || '');
+            this.displayContent = '';
         }
     }
+    /**
+     * Check if content has partial bold tags.
+     */
+    hasPartialBold() {
+        return this.displayContent?.includes('<b>') || this.displayContent?.includes('<strong>');
+    }
     /**
      * Process partial bold tags in the content.
      * Converts <b> and <strong> tags to properly styled bold spans.
@@ -2823,235 +1892,139 @@ 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: "18.2.14", ngImport: i0, type: TextComponent, deps: [{ token: LangService }, { token: LinkProcessorService }], target: i0.ɵɵFactoryTarget.Component }); }
+    /**
+     * Interpolate placeholders in content with provided values.
+     * Supports {{placeholder}} format.
+     *
+     * @param content - The content with placeholders
+     * @param values - Object with key-value pairs to interpolate
+     * @returns Interpolated content
+     */
+    interpolateContent(content, values) {
+        return content.replace(/\{\{(\w+)\}\}/g, (match, key) => {
+            return values[key] !== undefined ? String(values[key]) : match;
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: TextComponent, isStandalone: true, selector: "val-text", inputs: { props: "props" }, ngImport: i0, template: `
     <ion-text [color]="props.color">
       @if (props.processLinks) {
         <p
           [class]="props.size"
           [class.bold]="props.bold"
-          [innerHTML]="displayContent$ | async | processLinks: props.linkConfig"
+          [innerHTML]="displayContent | processLinks: props.linkConfig"
         ></p>
-      } @else if (
-        (props.allowPartialBold && (displayContent$ | async)?.includes('<b>')) ||
-        (displayContent$ | async)?.includes('<strong>')
-      ) {
-        <p [class]="props.size" [class.bold]="props.bold" [innerHTML]="processPartialBold(displayContent$ | async)"></p>
+      } @else if (props.allowPartialBold && hasPartialBold()) {
+        <p [class]="props.size" [class.bold]="props.bold" [innerHTML]="processPartialBold(displayContent)"></p>
       } @else {
-        <p [class]="props.size" [class.bold]="props.bold">{{ displayContent$ | async }}</p>
+        <p [class]="props.size" [class.bold]="props.bold">{{ displayContent }}</p>
       }
     </ion-text>
-  `, isInline: true, styles: [":root{--ion-color-primary: #7026df;--ion-color-primary-rgb: 112, 38, 223;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #6321c4;--ion-color-primary-tint: #7e3ce2;--ion-color-secondary: #e2ccff;--ion-color-secondary-rgb: 226, 204, 255;--ion-color-secondary-contrast: #000000;--ion-color-secondary-contrast-rgb: 0, 0, 0;--ion-color-secondary-shade: #c7b4e0;--ion-color-secondary-tint: #e5d1ff;--ion-color-texti: #354c69;--ion-color-texti-rgb: 53, 76, 105;--ion-color-texti-contrast: #ffffff;--ion-color-texti-contrast-rgb: 255, 255, 255;--ion-color-texti-shade: #2f435c;--ion-color-texti-tint: #495e78;--ion-color-darki: #090f1b;--ion-color-darki-rgb: 9, 15, 27;--ion-color-darki-contrast: #ffffff;--ion-color-darki-contrast-rgb: 255, 255, 255;--ion-color-darki-shade: #080d18;--ion-color-darki-tint: #222732;--ion-color-medium: #9e9e9e;--ion-color-medium-rgb: 158, 158, 158;--ion-color-medium-contrast: #000000;--ion-color-medium-contrast-rgb: 0, 0, 0;--ion-color-medium-shade: #8b8b8b;--ion-color-medium-tint: #a8a8a8;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-medium)}@media (prefers-color-scheme: dark){:root{--ion-color-texti: #8fc1ff;--ion-color-texti-rgb: 143, 193, 255;--ion-color-texti-contrast: #000000;--ion-color-texti-contrast-rgb: 0, 0, 0;--ion-color-texti-shade: #7eaae0;--ion-color-texti-tint: #9ac7ff;--ion-color-darki: #ffffff;--ion-color-darki-rgb: 255, 255, 255;--ion-color-darki-contrast: #000000;--ion-color-darki-contrast-rgb: 0, 0, 0;--ion-color-darki-shade: #e0e0e0;--ion-color-darki-tint: #ffffff;--ion-color-primary: #8f49f8;--ion-color-primary-rgb: 143, 73, 248;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #7e40da;--ion-color-primary-tint: #9a5bf9}}.ion-color-texti{--ion-color-base: var(--ion-color-texti);--ion-color-base-rgb: var(--ion-color-texti-rgb);--ion-color-contrast: var(--ion-color-texti-contrast);--ion-color-contrast-rgb: var(--ion-color-texti-contrast-rgb);--ion-color-shade: var(--ion-color-texti-shade);--ion-color-tint: var(--ion-color-texti-tint)}.ion-color-darki{--ion-color-base: var(--ion-color-darki);--ion-color-base-rgb: var(--ion-color-darki-rgb);--ion-color-contrast: var(--ion-color-darki-contrast);--ion-color-contrast-rgb: var(--ion-color-darki-contrast-rgb);--ion-color-shade: var(--ion-color-darki-shade);--ion-color-tint: var(--ion-color-darki-tint)}.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"], dependencies: [{ kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: ProcessLinksPipe, name: "processLinks" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":root{--ion-color-primary: #7026df;--ion-color-primary-rgb: 112, 38, 223;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #6321c4;--ion-color-primary-tint: #7e3ce2;--ion-color-secondary: #e2ccff;--ion-color-secondary-rgb: 226, 204, 255;--ion-color-secondary-contrast: #000000;--ion-color-secondary-contrast-rgb: 0, 0, 0;--ion-color-secondary-shade: #c7b4e0;--ion-color-secondary-tint: #e5d1ff;--ion-color-texti: #354c69;--ion-color-texti-rgb: 53, 76, 105;--ion-color-texti-contrast: #ffffff;--ion-color-texti-contrast-rgb: 255, 255, 255;--ion-color-texti-shade: #2f435c;--ion-color-texti-tint: #495e78;--ion-color-darki: #090f1b;--ion-color-darki-rgb: 9, 15, 27;--ion-color-darki-contrast: #ffffff;--ion-color-darki-contrast-rgb: 255, 255, 255;--ion-color-darki-shade: #080d18;--ion-color-darki-tint: #222732;--ion-color-medium: #9e9e9e;--ion-color-medium-rgb: 158, 158, 158;--ion-color-medium-contrast: #000000;--ion-color-medium-contrast-rgb: 0, 0, 0;--ion-color-medium-shade: #8b8b8b;--ion-color-medium-tint: #a8a8a8;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-medium)}@media (prefers-color-scheme: dark){:root{--ion-color-texti: #8fc1ff;--ion-color-texti-rgb: 143, 193, 255;--ion-color-texti-contrast: #000000;--ion-color-texti-contrast-rgb: 0, 0, 0;--ion-color-texti-shade: #7eaae0;--ion-color-texti-tint: #9ac7ff;--ion-color-darki: #ffffff;--ion-color-darki-rgb: 255, 255, 255;--ion-color-darki-contrast: #000000;--ion-color-darki-contrast-rgb: 0, 0, 0;--ion-color-darki-shade: #e0e0e0;--ion-color-darki-tint: #ffffff;--ion-color-primary: #8f49f8;--ion-color-primary-rgb: 143, 73, 248;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #7e40da;--ion-color-primary-tint: #9a5bf9}}.ion-color-texti{--ion-color-base: var(--ion-color-texti);--ion-color-base-rgb: var(--ion-color-texti-rgb);--ion-color-contrast: var(--ion-color-texti-contrast);--ion-color-contrast-rgb: var(--ion-color-texti-contrast-rgb);--ion-color-shade: var(--ion-color-texti-shade);--ion-color-tint: var(--ion-color-texti-tint)}.ion-color-darki{--ion-color-base: var(--ion-color-darki);--ion-color-base-rgb: var(--ion-color-darki-rgb);--ion-color-contrast: var(--ion-color-darki-contrast);--ion-color-contrast-rgb: var(--ion-color-darki-contrast-rgb);--ion-color-shade: var(--ion-color-darki-shade);--ion-color-tint: var(--ion-color-darki-tint)}.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"], dependencies: [{ kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "pipe", type: ProcessLinksPipe, name: "processLinks" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TextComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'val-text', standalone: true, imports: [IonText, AsyncPipe, ProcessLinksPipe], template: `
+            args: [{ selector: 'val-text', standalone: true, imports: [IonText, ProcessLinksPipe], template: `
     <ion-text [color]="props.color">
       @if (props.processLinks) {
         <p
           [class]="props.size"
           [class.bold]="props.bold"
-          [innerHTML]="displayContent$ | async | processLinks: props.linkConfig"
+          [innerHTML]="displayContent | processLinks: props.linkConfig"
         ></p>
-      } @else if (
-        (props.allowPartialBold && (displayContent$ | async)?.includes('<b>')) ||
-        (displayContent$ | async)?.includes('<strong>')
-      ) {
-        <p [class]="props.size" [class.bold]="props.bold" [innerHTML]="processPartialBold(displayContent$ | async)"></p>
+      } @else if (props.allowPartialBold && hasPartialBold()) {
+        <p [class]="props.size" [class.bold]="props.bold" [innerHTML]="processPartialBold(displayContent)"></p>
       } @else {
-        <p [class]="props.size" [class.bold]="props.bold">{{ displayContent$ | async }}</p>
+        <p [class]="props.size" [class.bold]="props.bold">{{ displayContent }}</p>
       }
     </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: LangService }, { type: LinkProcessorService }], propDecorators: { props: [{
+        }], propDecorators: { props: [{
                 type: Input
             }] } });
-/**
- * Helper function to create reactive text props from content configuration.
- * This provides a convenient way to create val-text props with reactive content.
- *
- * @param contentConfig - Content configuration
- * @param styleConfig - Optional style configuration
- * @returns Partial TextMetadata with content properties set
- *
- * @example
- * ```typescript
- * // In component
- * titleProps: TextMetadata = {
- *   ...createTextProps({
- *     contentKey: 'title',
- *     contentClass: 'HeaderComponent'
- *   }, {
- *     color: 'primary',
- *     size: 'large',
- *     bold: true
- *   })
- * };
- * ```
- *
- * @example With partial bold support:
- * ```typescript
- * // In component
- * greetingProps: TextMetadata = {
- *   ...createTextProps({
- *     contentKey: 'greeting',
- *     contentClass: 'UserComponent',
- *     contentInterpolation: { name: '<b>Juan</b>' }
- *   }, {
- *     color: 'primary',
- *     size: 'medium',
- *     bold: false,
- *     allowPartialBold: true
- *   })
- * };
- * ```
- */
-function createTextProps(contentConfig, styleConfig = {}) {
-    return {
-        contentKey: contentConfig.contentKey,
-        contentClass: contentConfig.contentClass,
-        contentFallback: contentConfig.contentFallback,
-        contentInterpolation: contentConfig.contentInterpolation,
-        color: styleConfig.color || 'dark',
-        size: styleConfig.size || 'medium',
-        bold: styleConfig.bold || false,
-        allowPartialBold: styleConfig.allowPartialBold || false,
-    };
-}
 
 /**
  * val-title
  *
  * A styled title or heading, with options for size, color, and boldness.
- * Supports both static content and reactive content from the language service.
  *
- * @example Static content:
- * ```html
+ * @example
  * <val-title [props]="{ content: 'My Title', size: 'large', color: 'primary', bold: true }"></val-title>
- * ```
- *
- * @example Reactive content:
- * ```html
- * <val-title [props]="{
- *   contentConfig: { key: 'pageTitle', fallback: 'Default Title' },
- *   size: 'large',
- *   color: 'primary',
- *   bold: true
- * }"></val-title>
- * ```
- *
- * @example Reactive content with interpolation:
- * ```html
- * <val-title [props]="{
- *   contentConfig: {
- *     key: 'welcomeTitle',
- *     interpolation: { name: 'John' },
- *     fallback: 'Welcome!'
- *   },
- *   size: 'large',
- *   color: 'primary',
- *   bold: true
- * }"></val-title>
- * ```
  *
  * @input props: TitleMetadata - Configuration for the title (content, color, size, bold, thin)
  */
 class TitleComponent {
-    constructor() {
-        this.langService = inject(LangService);
-        this.cdr = inject(ChangeDetectorRef);
-    }
-    ngOnInit() {
-        this.updateContent();
-    }
-    ngOnChanges(changes) {
-        if (changes['props']) {
-            this.updateContent();
-            this.cdr.detectChanges();
-        }
-    }
-    updateContent() {
-        // Always convert to Observable for consistent template handling
-        if (shouldUseReactiveContent(this.props)) {
-            // Use reactive content with LangService
-            const config = extractContentConfig(this.props);
-            this.displayContent$ = this.langService.getContent(config.className, config.key, config.fallback);
+    /**
+     * Returns the content to display.
+     * Uses static content, or contentFallback for backwards compatibility.
+     */
+    getDisplayContent() {
+        if (this.props.content) {
+            return this.props.content;
         }
-        else {
-            // Convert static content to Observable
-            const staticContent = this.props.content || '';
-            this.displayContent$ = of(staticContent);
+        // Backwards compatibility: use contentFallback if present
+        if (this.props.contentFallback) {
+            return this.props.contentFallback;
         }
+        return '';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: TitleComponent, isStandalone: true, selector: "val-title", inputs: { props: "props" }, usesOnChanges: true, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: TitleComponent, isStandalone: true, selector: "val-title", inputs: { props: "props" }, ngImport: i0, template: `
     <ion-text [color]="props.color">
       @if (!props.bold) {
         <p [ngClass]="[props.size]" [class.thin]="props.thin">
-          {{ displayContent$ | async }}
+          {{ getDisplayContent() }}
         </p>
       } @else {
         <b>
           <p [class]="props.size">
-            {{ displayContent$ | async }}
+            {{ getDisplayContent() }}
           </p>
         </b>
       }
     </ion-text>
-  `, isInline: true, styles: [":root{--ion-color-primary: #7026df;--ion-color-primary-rgb: 112, 38, 223;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #6321c4;--ion-color-primary-tint: #7e3ce2;--ion-color-secondary: #e2ccff;--ion-color-secondary-rgb: 226, 204, 255;--ion-color-secondary-contrast: #000000;--ion-color-secondary-contrast-rgb: 0, 0, 0;--ion-color-secondary-shade: #c7b4e0;--ion-color-secondary-tint: #e5d1ff;--ion-color-texti: #354c69;--ion-color-texti-rgb: 53, 76, 105;--ion-color-texti-contrast: #ffffff;--ion-color-texti-contrast-rgb: 255, 255, 255;--ion-color-texti-shade: #2f435c;--ion-color-texti-tint: #495e78;--ion-color-darki: #090f1b;--ion-color-darki-rgb: 9, 15, 27;--ion-color-darki-contrast: #ffffff;--ion-color-darki-contrast-rgb: 255, 255, 255;--ion-color-darki-shade: #080d18;--ion-color-darki-tint: #222732;--ion-color-medium: #9e9e9e;--ion-color-medium-rgb: 158, 158, 158;--ion-color-medium-contrast: #000000;--ion-color-medium-contrast-rgb: 0, 0, 0;--ion-color-medium-shade: #8b8b8b;--ion-color-medium-tint: #a8a8a8;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-medium)}@media (prefers-color-scheme: dark){:root{--ion-color-texti: #8fc1ff;--ion-color-texti-rgb: 143, 193, 255;--ion-color-texti-contrast: #000000;--ion-color-texti-contrast-rgb: 0, 0, 0;--ion-color-texti-shade: #7eaae0;--ion-color-texti-tint: #9ac7ff;--ion-color-darki: #ffffff;--ion-color-darki-rgb: 255, 255, 255;--ion-color-darki-contrast: #000000;--ion-color-darki-contrast-rgb: 0, 0, 0;--ion-color-darki-shade: #e0e0e0;--ion-color-darki-tint: #ffffff;--ion-color-primary: #8f49f8;--ion-color-primary-rgb: 143, 73, 248;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #7e40da;--ion-color-primary-tint: #9a5bf9}}.ion-color-texti{--ion-color-base: var(--ion-color-texti);--ion-color-base-rgb: var(--ion-color-texti-rgb);--ion-color-contrast: var(--ion-color-texti-contrast);--ion-color-contrast-rgb: var(--ion-color-texti-contrast-rgb);--ion-color-shade: var(--ion-color-texti-shade);--ion-color-tint: var(--ion-color-texti-tint)}.ion-color-darki{--ion-color-base: var(--ion-color-darki);--ion-color-base-rgb: var(--ion-color-darki-rgb);--ion-color-contrast: var(--ion-color-darki-contrast);--ion-color-contrast-rgb: var(--ion-color-darki-contrast-rgb);--ion-color-shade: var(--ion-color-darki-shade);--ion-color-tint: var(--ion-color-darki-tint)}.small{font-size:.875rem;line-height:1.5rem;font-weight:700}@media (min-width: 768px){.small{font-size:1rem;line-height:1.5rem}}.small.thin{font-weight:500}.medium{font-size:1rem;line-height:1.5rem;font-weight:700}@media (min-width: 768px){.medium{font-size:1.125rem;line-height:1.5rem}}.medium.thin{font-weight:500}.large{font-size:1.125rem;line-height:1.5rem;font-weight:700}@media (min-width: 768px){.large{font-size:1.5rem;line-height:2rem}}.large.thin{font-weight:500}.xlarge{font-size:1.125rem;line-height:1.5rem;font-weight:700}@media (min-width: 768px){.xlarge{font-size:1.5rem;line-height:2rem}}.xlarge.thin{font-weight:500}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":root{--ion-color-primary: #7026df;--ion-color-primary-rgb: 112, 38, 223;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #6321c4;--ion-color-primary-tint: #7e3ce2;--ion-color-secondary: #e2ccff;--ion-color-secondary-rgb: 226, 204, 255;--ion-color-secondary-contrast: #000000;--ion-color-secondary-contrast-rgb: 0, 0, 0;--ion-color-secondary-shade: #c7b4e0;--ion-color-secondary-tint: #e5d1ff;--ion-color-texti: #354c69;--ion-color-texti-rgb: 53, 76, 105;--ion-color-texti-contrast: #ffffff;--ion-color-texti-contrast-rgb: 255, 255, 255;--ion-color-texti-shade: #2f435c;--ion-color-texti-tint: #495e78;--ion-color-darki: #090f1b;--ion-color-darki-rgb: 9, 15, 27;--ion-color-darki-contrast: #ffffff;--ion-color-darki-contrast-rgb: 255, 255, 255;--ion-color-darki-shade: #080d18;--ion-color-darki-tint: #222732;--ion-color-medium: #9e9e9e;--ion-color-medium-rgb: 158, 158, 158;--ion-color-medium-contrast: #000000;--ion-color-medium-contrast-rgb: 0, 0, 0;--ion-color-medium-shade: #8b8b8b;--ion-color-medium-tint: #a8a8a8;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-medium)}@media (prefers-color-scheme: dark){:root{--ion-color-texti: #8fc1ff;--ion-color-texti-rgb: 143, 193, 255;--ion-color-texti-contrast: #000000;--ion-color-texti-contrast-rgb: 0, 0, 0;--ion-color-texti-shade: #7eaae0;--ion-color-texti-tint: #9ac7ff;--ion-color-darki: #ffffff;--ion-color-darki-rgb: 255, 255, 255;--ion-color-darki-contrast: #000000;--ion-color-darki-contrast-rgb: 0, 0, 0;--ion-color-darki-shade: #e0e0e0;--ion-color-darki-tint: #ffffff;--ion-color-primary: #8f49f8;--ion-color-primary-rgb: 143, 73, 248;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #7e40da;--ion-color-primary-tint: #9a5bf9}}.ion-color-texti{--ion-color-base: var(--ion-color-texti);--ion-color-base-rgb: var(--ion-color-texti-rgb);--ion-color-contrast: var(--ion-color-texti-contrast);--ion-color-contrast-rgb: var(--ion-color-texti-contrast-rgb);--ion-color-shade: var(--ion-color-texti-shade);--ion-color-tint: var(--ion-color-texti-tint)}.ion-color-darki{--ion-color-base: var(--ion-color-darki);--ion-color-base-rgb: var(--ion-color-darki-rgb);--ion-color-contrast: var(--ion-color-darki-contrast);--ion-color-contrast-rgb: var(--ion-color-darki-contrast-rgb);--ion-color-shade: var(--ion-color-darki-shade);--ion-color-tint: var(--ion-color-darki-tint)}.small{font-size:.875rem;line-height:1.5rem;font-weight:700}@media (min-width: 768px){.small{font-size:1rem;line-height:1.5rem}}.small.thin{font-weight:500}.medium{font-size:1rem;line-height:1.5rem;font-weight:700}@media (min-width: 768px){.medium{font-size:1.125rem;line-height:1.5rem}}.medium.thin{font-weight:500}.large{font-size:1.125rem;line-height:1.5rem;font-weight:700}@media (min-width: 768px){.large{font-size:1.5rem;line-height:2rem}}.large.thin{font-weight:500}.xlarge{font-size:1.125rem;line-height:1.5rem;font-weight:700}@media (min-width: 768px){.xlarge{font-size:1.5rem;line-height:2rem}}.xlarge.thin{font-weight:500}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TitleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'val-title', standalone: true, imports: [CommonModule, IonText, AsyncPipe], template: `
+            args: [{ selector: 'val-title', standalone: true, imports: [CommonModule, IonText], template: `
     <ion-text [color]="props.color">
       @if (!props.bold) {
         <p [ngClass]="[props.size]" [class.thin]="props.thin">
-          {{ displayContent$ | async }}
+          {{ getDisplayContent() }}
         </p>
       } @else {
         <b>
           <p [class]="props.size">
-            {{ displayContent$ | async }}
+            {{ getDisplayContent() }}
           </p>
         </b>
       }
     </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:.875rem;line-height:1.5rem;font-weight:700}@media (min-width: 768px){.small{font-size:1rem;line-height:1.5rem}}.small.thin{font-weight:500}.medium{font-size:1rem;line-height:1.5rem;font-weight:700}@media (min-width: 768px){.medium{font-size:1.125rem;line-height:1.5rem}}.medium.thin{font-weight:500}.large{font-size:1.125rem;line-height:1.5rem;font-weight:700}@media (min-width: 768px){.large{font-size:1.5rem;line-height:2rem}}.large.thin{font-weight:500}.xlarge{font-size:1.125rem;line-height:1.5rem;font-weight:700}@media (min-width: 768px){.xlarge{font-size:1.5rem;line-height:2rem}}.xlarge.thin{font-weight:500}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { props: [{
+        }], propDecorators: { props: [{
                 type: Input
             }] } });
 
 /**
- * Factory function to create title props with reactive content support.
+ * Factory function to create title props.
  *
  * @param styleConfig - Title styling configuration
- * @param contentConfig - Content configuration (static or reactive)
+ * @param content - The title text
  * @returns Complete TitleMetadata object
  *
- * @example Static content:
- * ```typescript
- * const props = createTitleProps(
- *   { size: 'large', color: 'primary', bold: true },
- *   { content: 'Static Title' }
- * );
- * ```
- *
- * @example Reactive content:
+ * @example
  * ```typescript
  * const props = createTitleProps(
  *   { size: 'large', color: 'primary', bold: true },
- *   {
- *     contentKey: 'pageTitle',
- *     contentClass: 'MyComponent',
- *     contentFallback: 'Default Title'
- *   }
+ *   'My Title'
  * );
  * ```
  */
-function createTitleProps(styleConfig, contentConfig) {
+function createTitleProps(styleConfig, content) {
     return {
         ...styleConfig,
-        ...contentConfig,
+        content,
     };
 }
 
@@ -3973,26 +2946,11 @@ class QrCodeComponent {
         this.imageError = new EventEmitter();
         this.canShare = false;
         this.canCopy = false;
-        this.langSubscription = null;
-        this.langService = inject(LangService);
         this.qrService = inject(QrGeneratorService);
     }
     ngOnInit() {
         this.canShare = this.qrService.canShare();
         this.canCopy = this.qrService.canCopyToClipboard();
-        if (this.hasReactiveContent()) {
-            this.langSubscription = this.langService.currentLang$.subscribe(() => {
-                // Trigger change detection for labels
-            });
-        }
-    }
-    ngOnDestroy() {
-        this.langSubscription?.unsubscribe();
-    }
-    hasReactiveContent() {
-        return !!((this.props.downloadLabelContentKey && this.props.contentClass) ||
-            (this.props.copyLabelContentKey && this.props.contentClass) ||
-            (this.props.shareLabelContentKey && this.props.contentClass));
     }
     getDisplaySize() {
         if (this.props.displaySize) {
@@ -4057,22 +3015,13 @@ class QrCodeComponent {
         return !!(this.props.showDownload || this.props.showCopy || this.props.showShare);
     }
     getDownloadLabel() {
-        if (this.props.downloadLabelContentKey && this.props.contentClass) {
-            return this.langService.getText(this.props.contentClass, this.props.downloadLabelContentKey, this.props.downloadLabel || 'Download');
-        }
-        return this.props.downloadLabel || 'Download';
+        return this.props.downloadLabel || 'Descargar';
     }
     getCopyLabel() {
-        if (this.props.copyLabelContentKey && this.props.contentClass) {
-            return this.langService.getText(this.props.contentClass, this.props.copyLabelContentKey, this.props.copyLabel || 'Copy');
-        }
-        return this.props.copyLabel || 'Copy';
+        return this.props.copyLabel || 'Copiar';
     }
     getShareLabel() {
-        if (this.props.shareLabelContentKey && this.props.contentClass) {
-            return this.langService.getText(this.props.contentClass, this.props.shareLabelContentKey, this.props.shareLabel || 'Share');
-        }
-        return this.props.shareLabel || 'Share';
+        return this.props.shareLabel || 'Compartir';
     }
     async onDownload() {
         try {
@@ -4422,7 +3371,6 @@ class CountdownComponent {
         };
         this.isExpired = false;
         this.intervalId = null;
-        this.langService = inject(LangService);
     }
     ngOnInit() {
         if (this.props.autoStart !== false) {
@@ -4545,9 +3493,6 @@ class CountdownComponent {
         return labels[unit] || unit;
     }
     getExpiredMessage() {
-        if (this.props.expiredMessageContentKey && this.props.contentClass) {
-            return this.langService.getText(this.props.contentClass, this.props.expiredMessageContentKey, this.props.expiredMessage || 'Tiempo agotado');
-        }
         return this.props.expiredMessage || 'Tiempo agotado';
     }
     getColor() {
@@ -4768,9 +3713,6 @@ const CURRENCY_INFO = {
  * ```
  */
 class PriceTagComponent {
-    constructor() {
-        this.langService = inject(LangService);
-    }
     get currencyInfo() {
         const currency = this.props.currency || 'MXN';
         return CURRENCY_INFO[currency] || CURRENCY_INFO['USD'];
@@ -4810,15 +3752,9 @@ class PriceTagComponent {
         return `${formattedNumber}${symbol}`;
     }
     getPrefix() {
-        if (this.props.prefixContentKey && this.props.contentClass) {
-            return this.langService.getText(this.props.contentClass, this.props.prefixContentKey, this.props.prefix || '');
-        }
         return this.props.prefix || '';
     }
     getPeriod() {
-        if (this.props.periodContentKey && this.props.contentClass) {
-            return this.langService.getText(this.props.contentClass, this.props.periodContentKey, this.props.period || '');
-        }
         return this.props.period || '';
     }
     getColor() {
@@ -5119,14 +4055,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  * val-alert-box
  *
  * Displays an alert box with an icon and text, using a styled box container.
- * Supports both static and reactive content patterns.
  *
  * @example
- * // Legacy pattern with TextMetadata
- * <val-alert-box [props]="{ box: {...}, icon: {...}, text: {...} }"></val-alert-box>
- *
- * // Reactive pattern with simplified configuration
- * <val-alert-box [props]="{ box: {...}, icon: {...}, textConfig: { key: 'alert.warning' } }"></val-alert-box>
+ * <val-alert-box [props]="{ box: {...}, icon: {...}, text: { content: 'Alerta' } }"></val-alert-box>
  *
  * @input props: AlertBoxMetadata | ReactiveAlertBoxMetadata - Configuration for the alert box
  */
@@ -5139,19 +4070,12 @@ class AlertBoxComponent {
     getLegacyTextProps() {
         return this.props.text;
     }
-    constructor(langService) {
-        this.langService = langService;
-        this.subscriptions = new Subscription();
-    }
     ngOnInit() {
         if (!this.isLegacyProps) {
-            this.initializeReactiveTextProps();
+            this.initializeTextProps();
         }
     }
-    ngOnDestroy() {
-        this.subscriptions.unsubscribe();
-    }
-    initializeReactiveTextProps() {
+    initializeTextProps() {
         const reactiveProps = this.props;
         // Base text properties with styling
         this.computedTextProps = {
@@ -5159,17 +4083,12 @@ class AlertBoxComponent {
             color: reactiveProps.textStyle?.color,
             bold: reactiveProps.textStyle?.bold || false,
         };
-        // Add content configuration
+        // Add content - use static text only
         if (reactiveProps.text !== undefined) {
-            // Static text
             this.computedTextProps.content = reactiveProps.text;
         }
-        else if (reactiveProps.textConfig) {
-            // Reactive content
-            this.computedTextProps.contentConfig = reactiveProps.textConfig;
-        }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AlertBoxComponent, deps: [{ token: LangService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AlertBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: AlertBoxComponent, isStandalone: true, selector: "val-alert-box", inputs: { props: "props" }, ngImport: i0, template: `
     <val-box [props]="props.box">
       <div class="content-container" body>
@@ -5199,7 +4118,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", 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: LangService }], propDecorators: { props: [{
+        }], propDecorators: { props: [{
                 type: Input
             }] } });
 
@@ -5649,54 +4568,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  * val-check-input
  *
  * A checkbox input for boolean values, integrated with Angular forms.
- * Supports i18n for label text via static or reactive content.
  *
- * @example Static label:
+ * @example
  * <val-check-input [props]="{ control: myControl, label: 'I agree' }"></val-check-input>
  *
- * @example Reactive i18n label:
- * <val-check-input [props]="{
- *   control: myControl,
- *   contentKey: 'termsAgreement',
- *   contentClass: 'MyComponent',
- *   contentFallback: 'I agree to the terms'
- * }"></val-check-input>
- *
- * @input props: InputMetadata - Configuration for the checkbox (form control, label, content config, etc.)
+ * @input props: InputMetadata - Configuration for the checkbox (form control, label, etc.)
  */
 class CheckInputComponent {
-    constructor() {
-        this.langService = inject(LangService);
-    }
-    ngOnInit() {
-        this.setupDisplayLabel();
-    }
-    setupDisplayLabel() {
-        if (this.props.label) {
-            // Static label
-            this.displayLabel$ = of(this.props.label);
-        }
-        else if (this.props.contentKey && this.props.contentClass) {
-            // Reactive content from language service
-            this.displayLabel$ = this.langService.getContent(this.props.contentClass, this.props.contentKey, this.props.contentFallback);
-        }
-        else {
-            // Fallback
-            this.displayLabel$ = of(this.props.contentFallback || '');
-        }
+    getDisplayLabel() {
+        return this.props.label || this.props.contentFallback || '';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CheckInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: CheckInputComponent, isStandalone: true, selector: "val-check-input", inputs: { props: "props" }, ngImport: i0, template: `
     <ion-checkbox [formControl]="props.control" [labelPlacement]="props.labelPlacement || 'end'">
-      {{ displayLabel$ | async }}
+      {{ getDisplayLabel() }}
     </ion-checkbox>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: IonCheckbox, selector: "ion-checkbox", inputs: ["checked", "color", "disabled", "errorText", "helperText", "indeterminate", "justify", "labelPlacement", "mode", "name", "value"] }] }); }
+  `, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: IonCheckbox, selector: "ion-checkbox", inputs: ["checked", "color", "disabled", "errorText", "helperText", "indeterminate", "justify", "labelPlacement", "mode", "name", "value"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CheckInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'val-check-input', standalone: true, imports: [CommonModule, AsyncPipe, ReactiveFormsModule, IonCheckbox], template: `
+            args: [{ selector: 'val-check-input', standalone: true, imports: [CommonModule, ReactiveFormsModule, IonCheckbox], template: `
     <ion-checkbox [formControl]="props.control" [labelPlacement]="props.labelPlacement || 'end'">
-      {{ displayLabel$ | async }}
+      {{ getDisplayLabel() }}
     </ion-checkbox>
   ` }]
         }], propDecorators: { props: [{
@@ -6037,17 +4930,16 @@ class ExpandableTextComponent {
     constructor() {
         this.expanded = false;
         this.defaultColor = 'primary';
-        this.langService = inject(LangService);
     }
     get truncatedText() {
-        const maxLength = this.props.limit || 100; // Longitud por defecto
+        const maxLength = this.props.limit || 100;
         return this.props.content?.length > maxLength ? this.props.content.slice(0, maxLength) + '...' : this.props.content;
     }
     get isTruncated() {
         return this.props.content?.length > (this.props.limit || 100);
     }
     getExpandText() {
-        return this.props.expandText || this.langService.getText('_global', 'seeMore', 'ver más');
+        return this.props.expandText || 'ver más';
     }
     toggleExpand() {
         this.expanded = !this.expanded;
@@ -6273,6 +5165,79 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Input
             }] } });
 
+/**
+ * Clave para persistir el idioma en localStorage
+ */
+const LANG_STORAGE_KEY = 'app_lang';
+/**
+ * Idioma por defecto
+ */
+const DEFAULT_LANG = 'es';
+/**
+ * Servicio mínimo de localización.
+ *
+ * - Lee el idioma desde localStorage al iniciar
+ * - Proporciona método para cambiar idioma (recarga la página)
+ * - Sin observables ni subscripciones
+ *
+ * @example
+ * // En un componente
+ * locale = inject(LocaleService);
+ *
+ * // Obtener idioma actual
+ * console.log(this.locale.lang); // 'es' o 'en'
+ *
+ * // Cambiar idioma (recarga la página)
+ * this.locale.setLang('en');
+ */
+class LocaleService {
+    constructor() {
+        this.lang = this.getStoredLang();
+    }
+    /**
+     * Cambia el idioma de la aplicación.
+     * Guarda en localStorage y recarga la página para aplicar el cambio.
+     *
+     * @param lang Nuevo idioma ('es' o 'en')
+     */
+    setLang(lang) {
+        if (lang === this.lang) {
+            return;
+        }
+        localStorage.setItem(LANG_STORAGE_KEY, lang);
+        window.location.reload();
+    }
+    /**
+     * Obtiene el idioma almacenado en localStorage.
+     * Si no existe o no es válido, retorna el idioma por defecto.
+     */
+    getStoredLang() {
+        const stored = localStorage.getItem(LANG_STORAGE_KEY);
+        if (stored === 'es' || stored === 'en') {
+            return stored;
+        }
+        return DEFAULT_LANG;
+    }
+    /**
+     * Verifica si el idioma actual es español
+     */
+    get isSpanish() {
+        return this.lang === 'es';
+    }
+    /**
+     * Verifica si el idioma actual es inglés
+     */
+    get isEnglish() {
+        return this.lang === 'en';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LocaleService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LocaleService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LocaleService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
 /**
  * val-popover-selector
  *
@@ -6311,27 +5276,26 @@ class PopoverSelectorComponent {
          * Emits the selected value(s).
          */
         this.selectionChange = new EventEmitter();
-        this.langService = inject(LangService);
         // Register required icons
         addIcons({ chevronDown });
     }
     /**
-     * Get reactive placeholder text.
+     * Get placeholder text.
      */
     getPlaceholderText() {
-        return this.props.placeholder || this.langService.getText('_global', 'select', 'Seleccionar...');
+        return this.props.placeholder || 'Seleccionar...';
     }
     /**
-     * Get reactive cancel text.
+     * Get cancel text.
      */
     getCancelText() {
-        return this.props.cancelText || this.langService.getText('_global', 'cancel', 'Cancelar');
+        return this.props.cancelText || 'Cancelar';
     }
     /**
-     * Get reactive ok text.
+     * Get ok text.
      */
     getOkText() {
-        return this.props.okText || this.langService.getText('_global', 'ok', 'Aceptar');
+        return this.props.okText || 'Aceptar';
     }
     /**
      * Handle selection change from the ion-select.
@@ -6359,8 +5323,7 @@ class PopoverSelectorComponent {
                 const option = this.props.options.find(opt => opt.value === this.props.selectedValue[0]);
                 return option?.label || this.props.selectedValue[0];
             }
-            const selectedText = this.langService.getText('_global', 'selected', 'seleccionados');
-            return `${this.props.selectedValue.length} ${selectedText}`;
+            return `${this.props.selectedValue.length} seleccionados`;
         }
         // Single selection
         const selectedOption = this.props.options.find(opt => opt.value === this.props.selectedValue);
@@ -6457,154 +5420,61 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
 /**
  * val-language-selector
  *
- * A specialized language selector component that integrates with the LangService.
- * Uses the popover-selector component internally and provides language-specific functionality.
+ * A language selector component that uses LocaleService.
+ * When the language changes, the page will reload.
  *
  * @example
- * // Basic usage (auto-detects languages from LangService)
  * <val-language-selector
  *   [props]="{ showLabel: true, showFlags: true }">
  * </val-language-selector>
  *
- * @example
- * // Custom configuration
- * const languageProps: LanguageSelectorMetadata = {
- *   showLabel: true,
- *   label: 'Choose Language',
- *   showFlags: true,
- *   color: 'primary',
- *   size: 'large',
- *   fill: 'outline',
- *   customLanguageNames: {
- *     'es': 'Español',
- *     'en': 'English',
- *     'fr': 'Français'
- *   }
- * };
- *
- * @example
- * // With reactive content
- * const languageProps: LanguageSelectorMetadata = {
- *   showLabel: true,
- *   labelConfig: {
- *     className: 'myComponent',
- *     key: 'languageLabel',
- *     fallback: 'Language'
- *   },
- *   color: 'tertiary'
- * };
- *
  * @input props: LanguageSelectorMetadata - Configuration for the language selector
- * @output languageChange: EventEmitter<string> - Emitted when language changes
+ * @output languageChange: EventEmitter<string> - Emitted when language changes (before reload)
  */
 class LanguageSelectorComponent {
-    constructor(langService) {
-        this.langService = langService;
+    constructor() {
         /**
          * Language selector configuration object.
-         * @type {LanguageSelectorMetadata}
          */
         this.props = {};
         /**
          * Event emitted when the language selection changes.
          * Emits the selected language code.
+         * Note: Page will reload after this event.
          */
         this.languageChange = new EventEmitter();
-        this.subscriptions = new Subscription();
+        this.localeService = inject(LocaleService);
         /** Default language display names */
         this.defaultLanguageNames = {
             es: 'Español',
             en: 'English',
-            fr: 'Français',
-            de: 'Deutsch',
-            pt: 'Português',
-            it: 'Italiano',
-            zh: '中文',
-            ja: '日本語',
-            ko: '한국어',
-            ru: 'Русский',
-            ar: 'العربية',
         };
         /** Default flag icons for languages */
         this.defaultLanguageFlags = {
             es: '🇪🇸',
             en: '🇺🇸',
-            fr: '🇫🇷',
-            de: '🇩🇪',
-            pt: '🇵🇹',
-            it: '🇮🇹',
-            zh: '🇨🇳',
-            ja: '🇯🇵',
-            ko: '🇰🇷',
-            ru: '🇷🇺',
-            ar: '🇸🇦',
         };
-        // Register required icons
-        addIcons({ language, globe });
+        /** Available languages */
+        this.availableLanguages = ['es', 'en'];
+        addIcons({ language });
     }
     ngOnInit() {
-        this.initializeLanguageState();
-        this.initializeLabel();
         this.initializePopoverProps();
     }
-    ngOnDestroy() {
-        this.subscriptions.unsubscribe();
-    }
-    initializeLanguageState() {
-        // Get current language and available languages from LangService
-        this.currentLanguage$ = this.langService.currentLang$;
-        this.availableLanguages$ = this.currentLanguage$.pipe(map$1(() => this.props.availableLanguages || this.langService.availableLangs));
-    }
-    initializeLabel() {
-        // Initialize label observable based on configuration
-        if (this.props.label !== undefined) {
-            // Static label
-            this.label$ = of(this.props.label);
-        }
-        else if (this.props.labelConfig) {
-            // Reactive label
-            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.langService.getContent('_global', 'language', 'Idioma');
-        }
-    }
     initializePopoverProps() {
-        // Subscribe to language state changes and content changes to update popover props
-        const languageSubscription = combineLatest([
-            this.availableLanguages$,
-            this.currentLanguage$,
-            this.langService.currentLang$, // This will trigger updates when language changes
-        ]).subscribe(([availableLanguages, currentLanguage]) => {
-            this.updatePopoverProps(availableLanguages, currentLanguage);
-        });
-        this.subscriptions.add(languageSubscription);
-        // Subscribe to label changes
-        const labelSubscription = this.label$.subscribe(label => {
-            if (this.popoverProps) {
-                this.popoverProps = {
-                    ...this.popoverProps,
-                    label: this.props.showLabel !== false ? label : undefined,
-                };
-            }
-        });
-        this.subscriptions.add(labelSubscription);
-    }
-    updatePopoverProps(availableLanguages, currentLanguage) {
+        const currentLanguage = this.localeService.lang;
         // Convert language codes to popover options
-        const options = availableLanguages.map(lang => ({
+        const options = this.availableLanguages.map(lang => ({
             value: lang,
             label: this.getLanguageDisplayName(lang),
-            icon: this.props.showFlags ? undefined : undefined, // We'll use text flags instead
         }));
         // Create popover configuration
         this.popoverProps = {
             options,
             selectedValue: currentLanguage,
-            label: this.props.showLabel !== false ? '' : undefined, // Will be set by label subscription
+            label: this.props.showLabel !== false ? (this.props.label || 'Idioma') : undefined,
             icon: 'language',
-            placeholder: this.langService.getText('_global', 'selectLanguage', 'Seleccionar idioma...'),
+            placeholder: 'Seleccionar idioma...',
             color: this.props.color || 'medium',
             size: this.props.size || 'default',
             fill: this.props.fill || 'outline',
@@ -6625,15 +5495,9 @@ class LanguageSelectorComponent {
             const flag = this.props.showFlags ? this.defaultLanguageFlags[languageCode] : '';
             return flag ? `${flag} ${customName}` : customName;
         }
-        // Use reactive content for translated language names
-        // Note: This will use the current language since getLanguageDisplayName is called during subscription updates
-        const translatedName = this.langService.getText('_global', `languageName_${languageCode}`);
-        const flag = this.props.showFlags ? this.defaultLanguageFlags[languageCode] : '';
-        if (translatedName && translatedName !== `languageName_${languageCode}`) {
-            return flag ? `${flag} ${translatedName}` : translatedName;
-        }
-        // Fallback to default names, then to code
+        // Use default names
         const defaultName = this.defaultLanguageNames[languageCode] || languageCode.toUpperCase();
+        const flag = this.props.showFlags ? this.defaultLanguageFlags[languageCode] : '';
         return flag ? `${flag} ${defaultName}` : defaultName;
     }
     /**
@@ -6642,13 +5506,14 @@ class LanguageSelectorComponent {
      */
     onLanguageChange(selectedLanguage) {
         if (typeof selectedLanguage === 'string') {
-            // Update the language service
-            this.langService.setLang(selectedLanguage);
-            // Emit the change event
+            const newLang = selectedLanguage;
+            // Emit the change event before reload
             this.languageChange.emit(selectedLanguage);
+            // Set the new language (this will reload the page)
+            this.localeService.setLang(newLang);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LanguageSelectorComponent, deps: [{ token: LangService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LanguageSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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"] }] }); }
@@ -6658,12 +5523,52 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", 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 }], propDecorators: { props: [{
+        }], ctorParameters: () => [], propDecorators: { props: [{
                 type: Input
             }], languageChange: [{
                 type: Output
             }] } });
 
+const LANG = 'LANG';
+const THEME = 'THEME';
+
+/**
+ * Utility service for interacting with browser localStorage in a type-safe way.
+ * Provides static methods for setting, getting, removing, and clearing items.
+ */
+class LocalStorageService {
+    /**
+     * Stores a value in localStorage under the given reference key.
+     * @param reference The key to store the value under
+     * @param value The value to store
+     */
+    static set(reference, value) {
+        localStorage.setItem(reference, JSON.stringify(value));
+    }
+    /**
+     * Retrieves a value from localStorage by key.
+     * @param reference The key to retrieve
+     * @returns The parsed value
+     */
+    static get(reference) {
+        const value = localStorage.getItem(reference);
+        return JSON.parse(value);
+    }
+    /**
+     * Removes an item from localStorage by key.
+     * @param reference The key to remove
+     */
+    static remove(reference) {
+        localStorage.removeItem(reference);
+    }
+    /**
+     * Clears all items from localStorage.
+     */
+    static clear() {
+        localStorage.clear();
+    }
+}
+
 /**
  * Service for managing application themes (light, dark, auto).
  * Handles user preferences, system theme detection, and theme toggling.
@@ -7673,15 +6578,10 @@ class RangeInputComponent {
          */
         this.rangeChange = new EventEmitter();
         this.states = ComponentStates;
-        this.displayLabel = '';
-        this.langService = inject(LangService);
         this.defaultPinFormatter = (value) => `${value}`;
     }
-    ngOnInit() {
-        this.setupLabel();
-    }
-    ngOnDestroy() {
-        this.subscription?.unsubscribe();
+    get displayLabel() {
+        return this.props.label || this.props.contentFallback || '';
     }
     onRangeChange(event) {
         const value = event.detail.value;
@@ -7696,21 +6596,6 @@ class RangeInputComponent {
             }
         }
     }
-    setupLabel() {
-        if (this.props.label) {
-            this.displayLabel = this.props.label;
-        }
-        else if (this.props.contentKey && this.props.contentClass) {
-            this.subscription = this.langService
-                .getContent(this.props.contentClass, this.props.contentKey, this.props.contentFallback)
-                .subscribe((content) => {
-                this.displayLabel = content;
-            });
-        }
-        else if (this.props.contentFallback) {
-            this.displayLabel = this.props.contentFallback;
-        }
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RangeInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: RangeInputComponent, isStandalone: true, selector: "val-range-input", inputs: { props: "props" }, outputs: { rangeChange: "rangeChange" }, ngImport: i0, template: `
     @if (displayLabel) {
@@ -7859,41 +6744,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  * val-select-input
  *
  * A select/dropdown input integrated with Angular forms, using Ionic's select component.
- * Supports i18n for modal buttons and header text via GlobalContent.
- *
- * @example Basic usage:
- * <val-select-input [props]="{ control: myControl, label: 'Choose', options: [{ id: '1', name: 'Option 1' }] }"></val-select-input>
  *
- * @example With custom modal texts:
+ * @example
  * <val-select-input [props]="{
  *   control: myControl,
- *   label: 'Choose',
- *   options: [...],
- *   modalHeader: 'Select an option',
- *   cancelText: 'Cancel',
- *   okText: 'Confirm'
+ *   label: 'Seleccionar',
+ *   options: [{ id: '1', name: 'Opción 1' }],
+ *   cancelText: 'Cancelar',
+ *   okText: 'Aceptar'
  * }"></val-select-input>
  *
  * @input props: InputMetadata - Configuration for the select input (form control, label, options, etc.)
  */
 class SearchSelectorComponent {
-    constructor() {
-        this.langService = inject(LangService);
-    }
     ngOnInit() {
         if (this.props?.withDefault || this.props?.value) {
             applyDefaultValueToControl(this.props);
         }
         // Set modal header from props or use label as fallback
-        const headerText = this.props.modalHeader || this.props.label || this.langService.getText('_global', 'selectOption');
+        const headerText = this.props.modalHeader || this.props.label || 'Seleccionar opción';
         this.customModalOptions = {
             header: headerText,
             breakpoints: [0, 0.6],
             initialBreakpoint: 0.6,
         };
-        // Set button texts from props or use i18n defaults
-        this.cancelText = this.props.cancelText || this.langService.getText('_global', 'cancel');
-        this.okText = this.props.okText || this.langService.getText('_global', 'ok');
+        // Set button texts from props or use defaults
+        this.cancelText = this.props.cancelText || 'Cancelar';
+        this.okText = this.props.okText || 'Aceptar';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SearchSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SearchSelectorComponent, isStandalone: true, selector: "val-select-input", inputs: { props: "props" }, ngImport: i0, template: `
@@ -7957,10 +6834,11 @@ const replaceSpecialChars = (text) => text.normalize('NFD').replace(/[\u0300-\u0
  */
 class SelectSearchComponent {
     constructor() {
+        this.label = 'Seleccionar';
         this.labelProperty = 'name';
         this.valueProperty = 'id';
         this.multiple = false;
-        this.langService = inject(LangService);
+        this.placeholder = 'Seleccione una opción';
         this.icon = inject(IconService);
         this.changeDetector = inject(ChangeDetectorRef);
         this.searchTerm = '';
@@ -7969,8 +6847,6 @@ class SelectSearchComponent {
         this.displayValue = '';
         this.previousOptions = [];
         this.isProcessingChanges = false;
-        this.label = this.langService.getText('_global', 'select', 'Seleccionar');
-        this.placeholder = this.langService.getText('_global', 'selectOption', 'Seleccione una opción');
     }
     ngOnInit() {
         this.applyDefaultValue();
@@ -8302,7 +7178,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
       </ng-template>
     </ion-modal>
   `, styles: ["ion-header{padding:8px 8px 0}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { modal: [{
+        }], propDecorators: { modal: [{
                 type: ViewChild,
                 args: ['modal']
             }], label: [{
@@ -8356,43 +7232,13 @@ class SegmentControlComponent {
          */
         this.segmentChange = new EventEmitter();
         this.states = ComponentStates;
-        this.optionLabels = new Map();
-        this.langService = inject(LangService);
-        this.subscriptions = [];
-    }
-    ngOnInit() {
-        this.setupOptionLabels();
-    }
-    ngOnDestroy() {
-        this.subscriptions.forEach((sub) => sub.unsubscribe());
     }
     onSegmentChange(event) {
         const value = event.detail.value;
         this.segmentChange.emit(value);
     }
     getOptionLabel(option) {
-        if (option.label) {
-            return option.label;
-        }
-        return this.optionLabels.get(option.value) || option.contentFallback || '';
-    }
-    setupOptionLabels() {
-        this.props.options.forEach((option) => {
-            if (option.label) {
-                this.optionLabels.set(option.value, option.label);
-            }
-            else if (option.contentKey && option.contentClass) {
-                const sub = this.langService
-                    .getContent(option.contentClass, option.contentKey, option.contentFallback)
-                    .subscribe((content) => {
-                    this.optionLabels.set(option.value, content);
-                });
-                this.subscriptions.push(sub);
-            }
-            else if (option.contentFallback) {
-                this.optionLabels.set(option.value, option.contentFallback);
-            }
-        });
+        return option.label || option.contentFallback || '';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SegmentControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SegmentControlComponent, isStandalone: true, selector: "val-segment-control", inputs: { props: "props" }, outputs: { segmentChange: "segmentChange" }, ngImport: i0, template: `
@@ -8500,52 +7346,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  * val-toggle-input
  *
  * A toggle/switch input for boolean values, integrated with Angular forms.
- * Supports reactive content for labels.
  *
  * @example
  * <val-toggle-input [props]="{
  *   control: myBooleanControl,
- *   label: 'Enable notifications',
+ *   label: 'Activar notificaciones',
  *   color: 'primary',
  *   labelPosition: 'end'
  * }"></val-toggle-input>
  *
- * @example With reactive content
- * <val-toggle-input [props]="{
- *   control: myControl,
- *   contentKey: 'enableNotifications',
- *   contentClass: 'SettingsComponent',
- *   contentFallback: 'Enable notifications'
- * }"></val-toggle-input>
- *
  * @input props: ToggleInputMetadata - Configuration for the toggle input
  */
 class ToggleInputComponent {
     constructor() {
         this.states = ComponentStates;
-        this.displayLabel = '';
-        this.langService = inject(LangService);
-    }
-    ngOnInit() {
-        this.setupLabel();
-    }
-    ngOnDestroy() {
-        this.subscription?.unsubscribe();
     }
-    setupLabel() {
-        if (this.props.label) {
-            this.displayLabel = this.props.label;
-        }
-        else if (this.props.contentKey && this.props.contentClass) {
-            this.subscription = this.langService
-                .getContent(this.props.contentClass, this.props.contentKey, this.props.contentFallback)
-                .subscribe((content) => {
-                this.displayLabel = content;
-            });
-        }
-        else if (this.props.contentFallback) {
-            this.displayLabel = this.props.contentFallback;
-        }
+    getDisplayLabel() {
+        return this.props.label || this.props.contentFallback || '';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ToggleInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ToggleInputComponent, isStandalone: true, selector: "val-toggle-input", inputs: { props: "props" }, ngImport: i0, template: `
@@ -8556,7 +7373,7 @@ class ToggleInputComponent {
       [labelPlacement]="props.labelPosition || 'end'"
       [justify]="props.justify || 'start'"
     >
-      {{ displayLabel }}
+      {{ getDisplayLabel() }}
     </ion-toggle>
   `, isInline: true, styles: [":host{display:block}ion-toggle{--handle-spacing: 3px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: IonToggle, selector: "ion-toggle", inputs: ["checked", "color", "disabled", "enableOnOffLabels", "errorText", "helperText", "justify", "labelPlacement", "mode", "name", "value"] }] }); }
 }
@@ -8570,7 +7387,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
       [labelPlacement]="props.labelPosition || 'end'"
       [justify]="props.justify || 'start'"
     >
-      {{ displayLabel }}
+      {{ getDisplayLabel() }}
     </ion-toggle>
   `, styles: [":host{display:block}ion-toggle{--handle-spacing: 3px}\n"] }]
         }], propDecorators: { props: [{
@@ -8581,7 +7398,6 @@ class CodeDisplayComponent {
     constructor(cdr) {
         this.cdr = cdr;
         this.toast = inject(ToastController);
-        this.langService = inject(LangService);
         this.selectedTab = 0;
     }
     ngOnChanges(changes) {
@@ -8609,8 +7425,7 @@ class CodeDisplayComponent {
         try {
             const code = this.props.tabs.length > 0 ? this.props.tabs[this.selectedTab]?.code : this.props.code;
             await Clipboard.write({ string: code || '' });
-            const copiedMessage = this.langService.getText('_global', 'copied', '¡Copiado al portapapeles!');
-            this.presentToast(copiedMessage);
+            this.presentToast('¡Copiado al portapapeles!');
         }
         catch (error) {
             console.error('Error al copiar al portapapeles:', error);
@@ -8740,15 +7555,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
 class CommandDisplayComponent {
     constructor() {
         this.toast = inject(ToastController);
-        this.langService = inject(LangService);
     }
     async copyCommand() {
         if (this.props.text) {
             await Clipboard.write({
                 string: this.props.text,
             });
-            const copiedMessage = this.langService.getText('_global', 'copied', '¡Copiado al portapapeles!');
-            this.presentToast(copiedMessage);
+            this.presentToast('¡Copiado al portapapeles!');
         }
     }
     async presentToast(message) {
@@ -8776,7 +7589,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
       <ion-icon name="copy-outline" class="copy-icon" (click)="copyCommand()"></ion-icon>
     </div>
   `, styles: [".command-container{display:flex;align-items:center;justify-content:space-between;background-color:var(--ion-color-light, #f2f2f2);border-radius:24px;padding:12px 16px;box-shadow:0 2px 4px #0000001a}.command-text{flex-grow:1;font-family:monospace;font-size:.8rem;color:var(--ion-color-dark, #333);margin-right:10px}.copy-icon{font-size:1.3rem;color:var(--ion-color-medium, #92949c);cursor:pointer;transition:color .2s ease-in-out}.copy-icon:hover{color:var(--ion-color-primary, #3880ff)}@media (min-width: 600px){.command-text,.copy-icon{font-size:1.2rem}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { props: [{
+        }], propDecorators: { props: [{
                 type: Input
             }] } });
 
@@ -8825,7 +7638,6 @@ class PlainCodeBoxComponent {
     constructor() {
         this.toast = inject(ToastController);
         this.cdr = inject(ChangeDetectorRef);
-        this.langService = inject(LangService);
         this.props = { lines: [] };
     }
     ngOnChanges(changes) {
@@ -8848,8 +7660,7 @@ class PlainCodeBoxComponent {
             await Clipboard.write({
                 string: fullCode,
             });
-            const copiedMessage = this.langService.getText('_global', 'copied', '¡Copiado al portapapeles!');
-            this.presentToast(copiedMessage);
+            this.presentToast('¡Copiado al portapapeles!');
         }
     }
     async presentToast(message) {
@@ -8883,7 +7694,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
 </ng-container></code></pre>
     </div>
   `, styles: [".code-box-container{position:relative;background-color:#282c34;border-radius:16px;overflow:hidden;box-shadow:0 4px 15px #0009;margin:0}@media (prefers-color-scheme: light){.code-box-container{background-color:#fff;box-shadow:0 2px 4px #0000001a}}.copy-button{position:absolute;top:8px;right:8px;z-index:10;--padding-start: 2px;--padding-end: 2px;--padding-top: 2px;--padding-bottom: 2px;min-width:28px;min-height:28px;height:28px;width:28px;color:#61afef;background:#0006;border-radius:6px;box-shadow:0 1px 4px #0000000d;display:flex;align-items:center;justify-content:center;transition:background .2s ease,color .2s ease}.copy-button:hover{background:#00000080;color:#8cc4ff}.copy-button ion-icon{font-size:1.2em;margin:0}@media (prefers-color-scheme: light){.copy-button{color:var(--ion-color-primary, #007bff);background:#ffffffb3}.copy-button:hover{background:#ffffffe6;color:var(--ion-color-primary-tint, #3880ff)}}pre{margin:0;padding:0;background-color:transparent;min-width:100%;min-height:100%;white-space:pre-wrap;word-break:normal;font-family:Roboto Mono,monospace}code{font-family:Roboto Mono,monospace;font-size:.9em;line-height:1.6;display:block;white-space:inherit;word-break:inherit;color:#abb2bf;margin:0}@media (prefers-color-scheme: light){code{color:#333}}code .line-normal{color:#abb2bf}@media (prefers-color-scheme: light){code .line-normal{color:#333}}code .line-command{color:#c678dd}@media (prefers-color-scheme: light){code .line-command{color:var(--ion-color-primary, #3880ff)}}code .line-error{color:#e06c75}@media (prefers-color-scheme: light){code .line-error{color:var(--ion-color-danger, #eb445a)}}code .line-success{color:#98c379}@media (prefers-color-scheme: light){code .line-success{color:var(--ion-color-success, #2dd36f)}}code .token.comment{color:#5c6370}code .token.selector,code .token.string{color:#98c379}code .token.punctuation{color:#abb2bf}code .token.operator{color:#c678dd}code .token.boolean,code .token.number{color:#d19a66}code .token.function{color:#61afef}code .token.keyword{color:#c678dd}code .token.class-name{color:#e6c07b}code .token.tag{color:#e06c75}code .token.attr-name{color:#d19a66}code .token.attr-value{color:#98c379}code .token.property{color:#56b6c2}code .token.variable{color:#e06c75}@media (max-width: 600px){.code-box-container{border-radius:16px}.copy-button{top:6px;right:6px;min-width:24px;min-height:24px;height:24px;width:24px}.copy-button ion-icon{font-size:1em}pre{padding:0;margin:0}code{font-size:.8em;line-height:1.5;margin:0}}@media (min-width: 601px) and (max-width: 1024px){code{font-size:.9em}}@media (min-width: 1025px){code{font-size:1em}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { props: [{
+        }], propDecorators: { props: [{
                 type: Input
             }], codeBlock: [{
                 type: ViewChild,
@@ -8897,74 +7708,29 @@ addIcons({ chevronDown, helpCircle, informationCircle, documentText });
  * An accordion component for collapsible content sections.
  * Ideal for FAQs, settings, and expandable content.
  *
- * @example Basic usage
+ * @example
  * <val-accordion [props]="{
  *   items: [
- *     { value: 'faq1', header: 'What is this?', content: 'This is an accordion.' },
- *     { value: 'faq2', header: 'How does it work?', content: 'Click to expand.' }
+ *     { value: 'faq1', header: '¿Qué es esto?', content: 'Es un acordeón.' },
+ *     { value: 'faq2', header: '¿Cómo funciona?', content: 'Haz clic para expandir.' }
  *   ]
  * }"></val-accordion>
  *
- * @example Multiple open
- * <val-accordion [props]="{
- *   items: [...],
- *   multiple: true,
- *   value: ['faq1', 'faq2']
- * }"></val-accordion>
- *
  * @input props: AccordionMetadata - Configuration for the accordion
  * @output accordionChange: string | string[] - Emits expanded value(s)
  */
 class AccordionComponent {
     constructor() {
         this.accordionChange = new EventEmitter();
-        this.langService = inject(LangService);
-        this.subscriptions = [];
-        this.headerLabels = new Map();
-        this.contentLabels = new Map();
-    }
-    ngOnInit() {
-        this.setupLabels();
-    }
-    ngOnDestroy() {
-        this.subscriptions.forEach((sub) => sub.unsubscribe());
     }
     onAccordionChange(event) {
         this.accordionChange.emit(event.detail.value);
     }
     getItemHeader(item) {
-        if (item.header)
-            return item.header;
-        return this.headerLabels.get(item.value) || item.headerFallback || '';
+        return item.header || item.headerFallback || '';
     }
     getItemContent(item) {
-        if (item.content)
-            return item.content;
-        return this.contentLabels.get(item.value) || item.contentFallback || '';
-    }
-    setupLabels() {
-        this.props.items.forEach((item) => {
-            // Setup header
-            if (item.header) {
-                this.headerLabels.set(item.value, item.header);
-            }
-            else if (item.headerKey && item.contentClass) {
-                const sub = this.langService
-                    .getContent(item.contentClass, item.headerKey, item.headerFallback)
-                    .subscribe((content) => this.headerLabels.set(item.value, content));
-                this.subscriptions.push(sub);
-            }
-            // Setup content
-            if (item.content) {
-                this.contentLabels.set(item.value, item.content);
-            }
-            else if (item.contentKey && item.contentClass) {
-                const sub = this.langService
-                    .getContent(item.contentClass, item.contentKey, item.contentFallback)
-                    .subscribe((content) => this.contentLabels.set(item.value, content));
-                this.subscriptions.push(sub);
-            }
-        });
+        return item.content || item.contentFallback || '';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: AccordionComponent, isStandalone: true, selector: "val-accordion", inputs: { props: "props" }, outputs: { accordionChange: "accordionChange" }, ngImport: i0, template: `
@@ -9027,41 +7793,23 @@ addIcons({ home, settings, person, search, heart, star, notifications, mail, cal
  * val-tabs
  *
  * A tab bar component for navigation between views.
- * Can be positioned at top or bottom of the screen.
  *
- * @example Basic usage
+ * @example
  * <val-tabs [props]="{
  *   tabs: [
- *     { value: 'home', label: 'Home', icon: 'home' },
- *     { value: 'search', label: 'Search', icon: 'search' },
- *     { value: 'profile', label: 'Profile', icon: 'person' }
+ *     { value: 'home', label: 'Inicio', icon: 'home' },
+ *     { value: 'search', label: 'Buscar', icon: 'search' },
+ *     { value: 'profile', label: 'Perfil', icon: 'person' }
  *   ],
  *   selectedTab: 'home'
  * }" (tabChange)="onTabChange($event)"></val-tabs>
  *
- * @example With badges
- * <val-tabs [props]="{
- *   tabs: [
- *     { value: 'inbox', label: 'Inbox', icon: 'mail', badge: 5 },
- *     { value: 'notifications', label: 'Alerts', icon: 'notifications', badge: '99+' }
- *   ]
- * }"></val-tabs>
- *
  * @input props: TabsMetadata - Configuration for the tabs
  * @output tabChange: TabMetadata - Emits when a tab is selected
  */
 class TabsComponent {
     constructor() {
         this.tabChange = new EventEmitter();
-        this.langService = inject(LangService);
-        this.subscriptions = [];
-        this.tabLabels = new Map();
-    }
-    ngOnInit() {
-        this.setupLabels();
-    }
-    ngOnDestroy() {
-        this.subscriptions.forEach((sub) => sub.unsubscribe());
     }
     onTabClick(tab) {
         if (!tab.disabled) {
@@ -9069,22 +7817,7 @@ class TabsComponent {
         }
     }
     getTabLabel(tab) {
-        if (tab.label)
-            return tab.label;
-        return this.tabLabels.get(tab.value) || tab.contentFallback || '';
-    }
-    setupLabels() {
-        this.props.tabs.forEach((tab) => {
-            if (tab.label) {
-                this.tabLabels.set(tab.value, tab.label);
-            }
-            else if (tab.contentKey && tab.contentClass) {
-                const sub = this.langService
-                    .getContent(tab.contentClass, tab.contentKey, tab.contentFallback)
-                    .subscribe((content) => this.tabLabels.set(tab.value, content));
-                this.subscriptions.push(sub);
-            }
-        });
+        return tab.label || tab.contentFallback || '';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: TabsComponent, isStandalone: true, selector: "val-tabs", inputs: { props: "props" }, outputs: { tabChange: "tabChange" }, ngImport: i0, template: `
@@ -9155,25 +7888,16 @@ addIcons({ chevronForward, home, ellipsisHorizontal });
  * val-breadcrumb
  *
  * A breadcrumb navigation component for hierarchical navigation.
- * Supports collapsing items when there are too many.
  *
- * @example Basic usage
+ * @example
  * <val-breadcrumb [props]="{
  *   items: [
- *     { label: 'Home', href: '/', icon: 'home' },
- *     { label: 'Products', href: '/products' },
- *     { label: 'Electronics', href: '/products/electronics' },
- *     { label: 'Phones', active: true }
+ *     { label: 'Inicio', href: '/', icon: 'home' },
+ *     { label: 'Productos', href: '/products' },
+ *     { label: 'Electrónica', active: true }
  *   ]
  * }"></val-breadcrumb>
  *
- * @example With max items (collapse)
- * <val-breadcrumb [props]="{
- *   items: [...],
- *   maxItems: 4,
- *   separatorIcon: 'chevron-forward'
- * }"></val-breadcrumb>
- *
  * @input props: BreadcrumbMetadata - Configuration for the breadcrumb
  * @output breadcrumbClick: { item: BreadcrumbItemMetadata, index: number }
  */
@@ -9181,15 +7905,6 @@ class BreadcrumbComponent {
     constructor() {
         this.breadcrumbClick = new EventEmitter();
         this.collapsedClick = new EventEmitter();
-        this.langService = inject(LangService);
-        this.subscriptions = [];
-        this.itemLabels = new Map();
-    }
-    ngOnInit() {
-        this.setupLabels();
-    }
-    ngOnDestroy() {
-        this.subscriptions.forEach((sub) => sub.unsubscribe());
     }
     onBreadcrumbClick(event, item, index) {
         if (!item.disabled && !item.active) {
@@ -9200,23 +7915,7 @@ class BreadcrumbComponent {
         this.collapsedClick.emit(event);
     }
     getItemLabel(item) {
-        const index = this.props.items.indexOf(item);
-        if (item.label)
-            return item.label;
-        return this.itemLabels.get(index) || item.contentFallback || '';
-    }
-    setupLabels() {
-        this.props.items.forEach((item, index) => {
-            if (item.label) {
-                this.itemLabels.set(index, item.label);
-            }
-            else if (item.contentKey && item.contentClass) {
-                const sub = this.langService
-                    .getContent(item.contentClass, item.contentKey, item.contentFallback)
-                    .subscribe((content) => this.itemLabels.set(index, content));
-                this.subscriptions.push(sub);
-            }
-        });
+        return item.label || item.contentFallback || '';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: BreadcrumbComponent, isStandalone: true, selector: "val-breadcrumb", inputs: { props: "props" }, outputs: { breadcrumbClick: "breadcrumbClick", collapsedClick: "collapsedClick" }, ngImport: i0, template: `
@@ -9561,15 +8260,6 @@ addIcons({ checkmark, close, ellipse });
 class StepperComponent {
     constructor() {
         this.stepChange = new EventEmitter();
-        this.langService = inject(LangService);
-        this.subscriptions = [];
-        this.stepLabels = new Map();
-    }
-    ngOnInit() {
-        this.setupLabels();
-    }
-    ngOnDestroy() {
-        this.subscriptions.forEach((sub) => sub.unsubscribe());
     }
     getCurrentIndex() {
         if (this.props.currentIndex !== undefined) {
@@ -9626,22 +8316,7 @@ class StepperComponent {
         });
     }
     getStepLabel(step) {
-        if (step.label)
-            return step.label;
-        return this.stepLabels.get(step.value) || step.contentFallback || '';
-    }
-    setupLabels() {
-        this.props.steps.forEach((step) => {
-            if (step.label) {
-                this.stepLabels.set(step.value, step.label);
-            }
-            else if (step.contentKey && step.contentClass) {
-                const sub = this.langService
-                    .getContent(step.contentClass, step.contentKey, step.contentFallback)
-                    .subscribe((content) => this.stepLabels.set(step.value, content));
-                this.subscriptions.push(sub);
-            }
-        });
+        return step.label || step.contentFallback || '';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: StepperComponent, isStandalone: true, selector: "val-stepper", inputs: { props: "props" }, outputs: { stepChange: "stepChange" }, ngImport: i0, template: `
@@ -9796,15 +8471,6 @@ class ChipGroupComponent {
         this.selectionChange = new EventEmitter();
         this.chipRemove = new EventEmitter();
         this.chipClick = new EventEmitter();
-        this.langService = inject(LangService);
-        this.subscriptions = [];
-        this.chipLabels = new Map();
-    }
-    ngOnInit() {
-        this.setupLabels();
-    }
-    ngOnDestroy() {
-        this.subscriptions.forEach((sub) => sub.unsubscribe());
     }
     getChipColor(chip) {
         if (chip.selected && this.props.selectedColor) {
@@ -9813,9 +8479,7 @@ class ChipGroupComponent {
         return chip.color || this.props.color || 'primary';
     }
     getChipLabel(chip) {
-        if (chip.label)
-            return chip.label;
-        return this.chipLabels.get(chip.value) || chip.contentFallback || '';
+        return chip.label || chip.contentFallback || '';
     }
     onChipClick(chip) {
         if (chip.disabled)
@@ -9853,19 +8517,6 @@ class ChipGroupComponent {
             values: this.props.multiple ? values : values[0],
         });
     }
-    setupLabels() {
-        this.props.chips.forEach((chip) => {
-            if (chip.label) {
-                this.chipLabels.set(chip.value, chip.label);
-            }
-            else if (chip.contentKey && chip.contentClass) {
-                const sub = this.langService
-                    .getContent(chip.contentClass, chip.contentKey, chip.contentFallback)
-                    .subscribe((content) => this.chipLabels.set(chip.value, content));
-                this.subscriptions.push(sub);
-            }
-        });
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChipGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ChipGroupComponent, isStandalone: true, selector: "val-chip-group", inputs: { props: "props" }, outputs: { selectionChange: "selectionChange", chipRemove: "chipRemove", chipClick: "chipClick" }, ngImport: i0, template: `
     <div class="chip-group" [class.wrap]="props.wrap !== false">
@@ -10431,28 +9082,9 @@ class CommentComponent {
         this.loadMoreClick = new EventEmitter();
         this.collapseToggle = new EventEmitter();
         this.displayContent = '';
-        this.langSubscription = null;
-        this.langService = inject(LangService);
     }
     ngOnInit() {
-        this.updateDisplayContent();
-        if (this.props.contentKey && this.props.contentClass) {
-            this.langSubscription = this.langService.currentLang$.subscribe(() => {
-                this.updateDisplayContent();
-            });
-        }
-    }
-    ngOnDestroy() {
-        this.langSubscription?.unsubscribe();
-    }
-    updateDisplayContent() {
-        if (this.props.contentKey && this.props.contentClass) {
-            this.displayContent =
-                this.langService.getText(this.props.contentClass, this.props.contentKey, this.props.contentFallback || this.props.content);
-        }
-        else {
-            this.displayContent = this.props.content;
-        }
+        this.displayContent = this.props.content || this.props.contentFallback || '';
     }
     getInitials(name) {
         return name
@@ -10528,16 +9160,10 @@ class CommentComponent {
         return 'var(--ion-color-medium)';
     }
     getActionLabel(action) {
-        if (action.contentKey && action.contentClass) {
-            return this.langService.getText(action.contentClass, action.contentKey, action.contentFallback || action.label);
-        }
-        return action.label;
+        return action.label || action.contentFallback || '';
     }
     getMenuItemLabel(item) {
-        if (item.contentKey && item.contentClass) {
-            return this.langService.getText(item.contentClass, item.contentKey, item.contentFallback || item.label);
-        }
-        return item.label;
+        return item.label || item.contentFallback || '';
     }
     hasChildren() {
         return !!(this.props.children && this.props.children.length > 0) ||
@@ -10990,9 +9616,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
 
 class MultiSelectSearchComponent {
     constructor() {
+        this.label = 'Seleccionar opciones';
         this.labelProperty = 'name';
         this.valueProperty = 'id';
-        this.langService = inject(LangService);
+        this.placeholder = 'Seleccione opciones';
         this.icon = inject(IconService);
         this.changeDetector = inject(ChangeDetectorRef);
         this.searchTerm = '';
@@ -11001,8 +9628,6 @@ class MultiSelectSearchComponent {
         this.displayValue = '';
         this.previousOptions = [];
         this.isProcessingChanges = false;
-        this.label = this.langService.getText('_global', 'selectOptions', 'Seleccionar opciones');
-        this.placeholder = this.langService.getText('_global', 'selectOptions', 'Seleccione opciones');
     }
     ngOnInit() {
         this.applyDefaultValue();
@@ -11403,7 +10028,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
       </ng-template>
     </ion-modal>
   `, styles: ["ion-header{padding:8px 8px 0}.actions-container{display:flex;justify-content:space-between;align-items:center}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { modal: [{
+        }], propDecorators: { modal: [{
                 type: ViewChild,
                 args: ['modal']
             }], label: [{
@@ -11605,8 +10230,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
 class TextareaInputComponent {
     constructor() {
         this.states = ComponentStates;
-        this.langSubscription = null;
-        this.langService = inject(LangService);
         // Counter formatter for Ionic's built-in counter
         this.counterFormatter = (inputLength, maxLength) => {
             return `${inputLength}/${maxLength}`;
@@ -11620,36 +10243,14 @@ class TextareaInputComponent {
                 this.props.control.setValue(defaultValue);
             }
         }
-        // Subscribe to language changes for reactive content
-        if (this.hasReactiveContent()) {
-            this.langSubscription = this.langService.currentLang$.subscribe(() => {
-                // Trigger change detection for labels
-            });
-        }
-    }
-    ngOnDestroy() {
-        this.langSubscription?.unsubscribe();
-    }
-    hasReactiveContent() {
-        return !!(this.props.contentClass &&
-            (this.props.labelContentKey || this.props.placeholderContentKey || this.props.hintContentKey));
     }
     getLabel() {
-        if (this.props.labelContentKey && this.props.contentClass) {
-            return this.langService.getText(this.props.contentClass, this.props.labelContentKey, this.props.label || '');
-        }
         return this.props.label || '';
     }
     getPlaceholder() {
-        if (this.props.placeholderContentKey && this.props.contentClass) {
-            return this.langService.getText(this.props.contentClass, this.props.placeholderContentKey, this.props.placeholder || '');
-        }
         return this.props.placeholder || '';
     }
     getHint() {
-        if (this.props.hintContentKey && this.props.contentClass) {
-            return this.langService.getText(this.props.contentClass, this.props.hintContentKey, this.props.hint || '');
-        }
         return this.props.hint || '';
     }
     get hasError() {
@@ -11821,9 +10422,7 @@ class PhoneInputComponent {
         this.states = ComponentStates;
         this.internalCountryControl = new FormControl('');
         this.internalNumberControl = new FormControl('');
-        this.langSubscription = null;
         this.valueSubscription = null;
-        this.langService = inject(LangService);
         this.isInternalUpdate = false;
     }
     ngOnInit() {
@@ -11847,13 +10446,8 @@ class PhoneInputComponent {
                 this.parsePhoneNumber(value);
             }
         });
-        // Subscribe to language changes
-        if (this.hasReactiveContent()) {
-            this.langSubscription = this.langService.currentLang$.subscribe(() => { });
-        }
     }
     ngOnDestroy() {
-        this.langSubscription?.unsubscribe();
         this.valueSubscription?.unsubscribe();
     }
     parsePhoneNumber(value) {
@@ -11871,20 +10465,10 @@ class PhoneInputComponent {
         // If no country code found, just set the number
         this.internalNumberControl.setValue(value);
     }
-    hasReactiveContent() {
-        return !!(this.props.contentClass &&
-            (this.props.labelContentKey || this.props.placeholderContentKey || this.props.hintContentKey));
-    }
     getLabel() {
-        if (this.props.labelContentKey && this.props.contentClass) {
-            return this.langService.getText(this.props.contentClass, this.props.labelContentKey, this.props.label || '');
-        }
         return this.props.label || '';
     }
     getPlaceholder() {
-        if (this.props.placeholderContentKey && this.props.contentClass) {
-            return this.langService.getText(this.props.contentClass, this.props.placeholderContentKey, this.props.placeholder || '');
-        }
         // Use format from selected country if available
         const country = this.getSelectedCountry();
         if (country?.format && !this.props.placeholder) {
@@ -11893,9 +10477,6 @@ class PhoneInputComponent {
         return this.props.placeholder || '';
     }
     getHint() {
-        if (this.props.hintContentKey && this.props.contentClass) {
-            return this.langService.getText(this.props.contentClass, this.props.hintContentKey, this.props.hint || '');
-        }
         return this.props.hint || '';
     }
     getCountryList() {
@@ -12165,9 +10746,7 @@ class CurrencyInputComponent {
         this.states = ComponentStates;
         this.displayControl = new FormControl('');
         this.currencyControl = new FormControl('');
-        this.langSubscription = null;
         this.valueSubscription = null;
-        this.langService = inject(LangService);
         this.isFocused = false;
     }
     ngOnInit() {
@@ -12184,35 +10763,17 @@ class CurrencyInputComponent {
                 this.displayControl.setValue(this.formatValue(value));
             }
         });
-        // Subscribe to language changes
-        if (this.hasReactiveContent()) {
-            this.langSubscription = this.langService.currentLang$.subscribe(() => { });
-        }
     }
     ngOnDestroy() {
-        this.langSubscription?.unsubscribe();
         this.valueSubscription?.unsubscribe();
     }
-    hasReactiveContent() {
-        return !!(this.props.contentClass &&
-            (this.props.labelContentKey || this.props.placeholderContentKey || this.props.hintContentKey));
-    }
     getLabel() {
-        if (this.props.labelContentKey && this.props.contentClass) {
-            return this.langService.getText(this.props.contentClass, this.props.labelContentKey, this.props.label || '');
-        }
         return this.props.label || '';
     }
     getPlaceholder() {
-        if (this.props.placeholderContentKey && this.props.contentClass) {
-            return this.langService.getText(this.props.contentClass, this.props.placeholderContentKey, this.props.placeholder || '');
-        }
         return this.props.placeholder || this.getDefaultPlaceholder();
     }
     getHint() {
-        if (this.props.hintContentKey && this.props.contentClass) {
-            return this.langService.getText(this.props.contentClass, this.props.hintContentKey, this.props.hint || '');
-        }
         return this.props.hint || '';
     }
     getDefaultPlaceholder() {
@@ -12528,9 +11089,7 @@ class DateRangeInputComponent {
         this.startDatetimeId = `start-datetime-${Math.random().toString(36).substr(2, 9)}`;
         this.endDatetimeId = `end-datetime-${Math.random().toString(36).substr(2, 9)}`;
         this.showDayCount = true;
-        this.langSubscription = null;
         this.valueSubscription = null;
-        this.langService = inject(LangService);
     }
     ngOnInit() {
         // Use provided controls or internal ones
@@ -12561,44 +11120,20 @@ class DateRangeInputComponent {
                 }
             }
         });
-        // Subscribe to language changes
-        if (this.hasReactiveContent()) {
-            this.langSubscription = this.langService.currentLang$.subscribe(() => { });
-        }
     }
     ngOnDestroy() {
-        this.langSubscription?.unsubscribe();
         this.valueSubscription?.unsubscribe();
     }
-    hasReactiveContent() {
-        return !!(this.props.contentClass &&
-            (this.props.labelContentKey ||
-                this.props.startLabelContentKey ||
-                this.props.endLabelContentKey ||
-                this.props.hintContentKey));
-    }
     getLabel() {
-        if (this.props.labelContentKey && this.props.contentClass) {
-            return this.langService.getText(this.props.contentClass, this.props.labelContentKey, this.props.label || '');
-        }
         return this.props.label || '';
     }
     getStartLabel() {
-        if (this.props.startLabelContentKey && this.props.contentClass) {
-            return this.langService.getText(this.props.contentClass, this.props.startLabelContentKey, this.props.startLabel || '');
-        }
         return this.props.startLabel || '';
     }
     getEndLabel() {
-        if (this.props.endLabelContentKey && this.props.contentClass) {
-            return this.langService.getText(this.props.contentClass, this.props.endLabelContentKey, this.props.endLabel || '');
-        }
         return this.props.endLabel || '';
     }
     getHint() {
-        if (this.props.hintContentKey && this.props.contentClass) {
-            return this.langService.getText(this.props.contentClass, this.props.hintContentKey, this.props.hint || '');
-        }
         return this.props.hint || '';
     }
     getMinDate() {
@@ -12952,7 +11487,6 @@ class NumberStepperComponent {
         this.valueChange = new EventEmitter();
         this.states = ComponentStates;
         this.valueSubscription = null;
-        this.langService = inject(LangService);
     }
     ngOnInit() {
         // Ensure initial value is within bounds
@@ -13029,15 +11563,9 @@ class NumberStepperComponent {
         });
     }
     getLabel() {
-        if (this.props.labelContentKey && this.props.contentClass) {
-            return this.langService.getText(this.props.contentClass, this.props.labelContentKey, this.props.label || '');
-        }
         return this.props.label || '';
     }
     getUnitLabel() {
-        if (this.props.unitLabelContentKey && this.props.contentClass) {
-            return this.langService.getText(this.props.contentClass, this.props.unitLabelContentKey, this.currentValue === 1 ? this.props.unitLabelSingular || this.props.unitLabel || '' : this.props.unitLabel || '');
-        }
         if (this.currentValue === 1 && this.props.unitLabelSingular) {
             return this.props.unitLabelSingular;
         }
@@ -13317,7 +11845,6 @@ class TicketGridComponent {
         this.selectedTickets = [];
         this.searchTerm = '';
         this.highlightedNumbers = [];
-        this.langService = inject(LangService);
     }
     ngOnInit() {
         this.buildTickets();
@@ -13531,15 +12058,9 @@ class TicketGridComponent {
         return `Boleto ${this.formatNumber(ticket.number)}, ${statusLabel}`;
     }
     getSearchPlaceholder() {
-        if (this.props.searchPlaceholderContentKey && this.props.contentClass) {
-            return this.langService.getText(this.props.contentClass, this.props.searchPlaceholderContentKey, this.props.searchPlaceholder || 'Buscar número...');
-        }
         return this.props.searchPlaceholder || 'Buscar número...';
     }
     getRandomSelectLabel() {
-        if (this.props.randomSelectLabelContentKey && this.props.contentClass) {
-            return this.langService.getText(this.props.contentClass, this.props.randomSelectLabelContentKey, this.props.randomSelectLabel || 'Aleatorio');
-        }
         return this.props.randomSelectLabel || 'Aleatorio';
     }
     getColor() {
@@ -13909,7 +12430,6 @@ class ShareButtonsComponent {
     constructor() {
         this.shareComplete = new EventEmitter();
         this.toastController = inject(ToastController$1);
-        this.langService = inject(LangService);
     }
     getButtons() {
         if (this.props.buttons?.length) {
@@ -14023,9 +12543,6 @@ class ShareButtonsComponent {
         }
     }
     getCopySuccessMessage() {
-        if (this.props.copySuccessMessageContentKey && this.props.contentClass) {
-            return this.langService.getText(this.props.contentClass, this.props.copySuccessMessageContentKey, this.props.copySuccessMessage || '¡Enlace copiado!');
-        }
         return this.props.copySuccessMessage || '¡Enlace copiado!';
     }
     isNativeShareSupported() {
@@ -14174,7 +12691,6 @@ class WinnerDisplayComponent {
         this.confettiPieces = Array.from({ length: 50 }, (_, i) => i);
         this.revealTimeout = null;
         this.animationTimeout = null;
-        this.langService = inject(LangService);
         this.elementRef = inject(ElementRef);
     }
     ngOnInit() {
@@ -14244,21 +12760,12 @@ class WinnerDisplayComponent {
         return `${(index * 37) % 360}deg`;
     }
     getWinnerLabel() {
-        if (this.props.winnerLabelContentKey && this.props.contentClass) {
-            return this.langService.getText(this.props.contentClass, this.props.winnerLabelContentKey, this.props.winnerLabel || DEFAULT_WINNER_LABELS.winner);
-        }
         return this.props.winnerLabel || DEFAULT_WINNER_LABELS.winner;
     }
     getTicketLabel() {
-        if (this.props.ticketLabelContentKey && this.props.contentClass) {
-            return this.langService.getText(this.props.contentClass, this.props.ticketLabelContentKey, this.props.ticketLabel || DEFAULT_WINNER_LABELS.ticket);
-        }
         return this.props.ticketLabel || DEFAULT_WINNER_LABELS.ticket;
     }
     getPrizeLabel() {
-        if (this.props.prizeLabelContentKey && this.props.contentClass) {
-            return this.langService.getText(this.props.contentClass, this.props.prizeLabelContentKey, this.props.prizeLabel || DEFAULT_WINNER_LABELS.prize);
-        }
         return this.props.prizeLabel || DEFAULT_WINNER_LABELS.prize;
     }
     getColor() {
@@ -14566,7 +13073,6 @@ class RaffleStatusCardComponent {
     constructor() {
         this.primaryActionClick = new EventEmitter();
         this.secondaryActionClick = new EventEmitter();
-        this.langService = inject(LangService);
     }
     get isActiveOrUpcoming() {
         return this.props.status === 'active' || this.props.status === 'upcoming';
@@ -14596,15 +13102,9 @@ class RaffleStatusCardComponent {
         return 'primary';
     }
     getTitle() {
-        if (this.props.titleContentKey && this.props.contentClass) {
-            return this.langService.getText(this.props.contentClass, this.props.titleContentKey, this.props.title);
-        }
-        return this.props.title;
+        return this.props.title || '';
     }
     getDescription() {
-        if (this.props.descriptionContentKey && this.props.contentClass) {
-            return this.langService.getText(this.props.contentClass, this.props.descriptionContentKey, this.props.description || '');
-        }
         return this.props.description || '';
     }
     formatCurrency(amount) {
@@ -15076,7 +13576,6 @@ class ParticipantCardComponent {
         this.cardClick = new EventEmitter();
         this.actionClick = new EventEmitter();
         this.showAllTickets = false;
-        this.langService = inject(LangService);
     }
     get ticketNumbers() {
         return this.props.participant.tickets || [];
@@ -15504,12 +14003,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
 class GlowCardComponent {
     constructor() {
         this.onClick = new EventEmitter();
-        this.langService = inject(LangService);
         this.navigationService = inject(NavigationService);
         this.themeService = inject(ThemeService);
-        this.title$ = of('');
-        this.description$ = of('');
-        this.ctaText$ = of('');
         this.ionicColors = ['primary', 'secondary', 'tertiary', 'success', 'warning', 'danger', 'light', 'medium', 'dark'];
         // RGB values with SPACE separator for CSS rgb(var() / alpha) syntax
         this.colorRgbMap = {
@@ -15522,34 +14017,17 @@ class GlowCardComponent {
         };
         addIcons({ arrowForwardOutline });
     }
-    ngOnInit() {
-        this.initializeContent();
-    }
     get isDark() {
         return this.themeService.IsDark;
     }
-    initializeContent() {
-        // Title: static or reactive
-        if (this.props.title) {
-            this.title$ = of(this.props.title);
-        }
-        else if (this.props.titleKey && this.props.titleClass) {
-            this.title$ = this.langService.getContent(this.props.titleClass, this.props.titleKey, this.props.titleFallback);
-        }
-        // Description: static or reactive
-        if (this.props.description) {
-            this.description$ = of(this.props.description);
-        }
-        else if (this.props.descriptionKey && this.props.descriptionClass) {
-            this.description$ = this.langService.getContent(this.props.descriptionClass, this.props.descriptionKey, this.props.descriptionFallback);
-        }
-        // CTA Text: static or reactive
-        if (this.props.cta.text) {
-            this.ctaText$ = of(this.props.cta.text);
-        }
-        else if (this.props.cta.contentKey && this.props.cta.contentClass) {
-            this.ctaText$ = this.langService.getContent(this.props.cta.contentClass, this.props.cta.contentKey, this.props.cta.contentFallback);
-        }
+    getTitle() {
+        return this.props.title || this.props.titleFallback || '';
+    }
+    getDescription() {
+        return this.props.description || this.props.descriptionFallback || '';
+    }
+    getCtaText() {
+        return this.props.cta.text || this.props.cta.contentFallback || 'Ver más';
     }
     getGlowColor() {
         const color = this.props.glow?.color;
@@ -15664,12 +14142,12 @@ class GlowCardComponent {
       <div class="glow-card__content">
         <!-- Title -->
         <h3 class="glow-card__title">
-          {{ title$ | async }}
+          {{ getTitle() }}
         </h3>
 
         <!-- Description -->
         <p class="glow-card__description">
-          {{ description$ | async }}
+          {{ getDescription() }}
         </p>
 
         <!-- CTA Link with expanding animation -->
@@ -15678,7 +14156,7 @@ class GlowCardComponent {
           [href]="props.cta.url"
           (click)="onCtaClick($event)"
         >
-          <span class="glow-card__cta-text">{{ ctaText$ | async }}</span>
+          <span class="glow-card__cta-text">{{ getCtaText() }}</span>
           <ion-icon
             class="glow-card__cta-icon"
             [name]="props.cta.icon || 'arrow-forward-outline'"
@@ -15686,7 +14164,7 @@ class GlowCardComponent {
         </a>
       </div>
     </article>
-  `, isInline: true, styles: [":root{--ion-color-primary: #7026df;--ion-color-primary-rgb: 112, 38, 223;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #6321c4;--ion-color-primary-tint: #7e3ce2;--ion-color-secondary: #e2ccff;--ion-color-secondary-rgb: 226, 204, 255;--ion-color-secondary-contrast: #000000;--ion-color-secondary-contrast-rgb: 0, 0, 0;--ion-color-secondary-shade: #c7b4e0;--ion-color-secondary-tint: #e5d1ff;--ion-color-texti: #354c69;--ion-color-texti-rgb: 53, 76, 105;--ion-color-texti-contrast: #ffffff;--ion-color-texti-contrast-rgb: 255, 255, 255;--ion-color-texti-shade: #2f435c;--ion-color-texti-tint: #495e78;--ion-color-darki: #090f1b;--ion-color-darki-rgb: 9, 15, 27;--ion-color-darki-contrast: #ffffff;--ion-color-darki-contrast-rgb: 255, 255, 255;--ion-color-darki-shade: #080d18;--ion-color-darki-tint: #222732;--ion-color-medium: #9e9e9e;--ion-color-medium-rgb: 158, 158, 158;--ion-color-medium-contrast: #000000;--ion-color-medium-contrast-rgb: 0, 0, 0;--ion-color-medium-shade: #8b8b8b;--ion-color-medium-tint: #a8a8a8;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-medium)}@media (prefers-color-scheme: dark){:root{--ion-color-texti: #8fc1ff;--ion-color-texti-rgb: 143, 193, 255;--ion-color-texti-contrast: #000000;--ion-color-texti-contrast-rgb: 0, 0, 0;--ion-color-texti-shade: #7eaae0;--ion-color-texti-tint: #9ac7ff;--ion-color-darki: #ffffff;--ion-color-darki-rgb: 255, 255, 255;--ion-color-darki-contrast: #000000;--ion-color-darki-contrast-rgb: 0, 0, 0;--ion-color-darki-shade: #e0e0e0;--ion-color-darki-tint: #ffffff;--ion-color-primary: #8f49f8;--ion-color-primary-rgb: 143, 73, 248;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #7e40da;--ion-color-primary-tint: #9a5bf9}}.ion-color-texti{--ion-color-base: var(--ion-color-texti);--ion-color-base-rgb: var(--ion-color-texti-rgb);--ion-color-contrast: var(--ion-color-texti-contrast);--ion-color-contrast-rgb: var(--ion-color-texti-contrast-rgb);--ion-color-shade: var(--ion-color-texti-shade);--ion-color-tint: var(--ion-color-texti-tint)}.ion-color-darki{--ion-color-base: var(--ion-color-darki);--ion-color-base-rgb: var(--ion-color-darki-rgb);--ion-color-contrast: var(--ion-color-darki-contrast);--ion-color-contrast-rgb: var(--ion-color-darki-contrast-rgb);--ion-color-shade: var(--ion-color-darki-shade);--ion-color-tint: var(--ion-color-darki-tint)}:host{--glow-color: var(--ion-color-primary);--glow-color-rgb: 112 38 223;--aspect-ratio: 16 / 9;--card-border-radius: 1.25rem;--image-border-radius: 1rem;--transition-duration: .3s;--transition-timing: cubic-bezier(.4, 0, .2, 1);display:block}.glow-card{position:relative;display:flex;flex-direction:column;background:var(--ion-background-color, #ffffff);border-radius:var(--card-border-radius);overflow:hidden;cursor:pointer;transition:transform var(--transition-duration) var(--transition-timing),box-shadow var(--transition-duration) var(--transition-timing)}.glow-card__image-container{position:relative;width:calc(100% - 1.5rem);aspect-ratio:var(--aspect-ratio);overflow:hidden;border-radius:var(--image-border-radius);margin:.75rem;margin-bottom:0}.glow-card__image{width:100%;height:100%;object-fit:cover;border-radius:var(--image-border-radius);transition:transform var(--transition-duration) var(--transition-timing)}.glow-card__content{padding:1rem 1.25rem 1.25rem;display:flex;flex-direction:column;gap:.5rem}.glow-card__title{margin:0;font-size:1.125rem;font-weight:700;line-height:1.3;color:var(--ion-color-darki, var(--ion-text-color, #000))}.glow-card__description{margin:0;font-size:.875rem;line-height:1.5;color:var(--ion-color-texti, var(--ion-color-medium, #666));display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.glow-card__cta{display:inline-flex;align-items:center;gap:.25rem;margin-top:.5rem;padding:.25rem 0;text-decoration:none;color:var(--glow-color);font-weight:600;font-size:.875rem;transition:gap var(--transition-duration) var(--transition-timing)}.glow-card__cta:hover{gap:.5rem}.glow-card__cta-text{max-width:0;opacity:0;overflow:hidden;white-space:nowrap;transition:max-width var(--transition-duration) var(--transition-timing),opacity var(--transition-duration) var(--transition-timing)}.glow-card__cta-icon{font-size:1.25rem;flex-shrink:0;transition:transform var(--transition-duration) var(--transition-timing)}.glow-card:hover{transform:translateY(-.25rem)}.glow-card:hover .glow-card__image{transform:scale(1.08)}.glow-card:hover .glow-card__cta-text{max-width:12.5rem;opacity:1}.glow-card:hover .glow-card__cta-icon{transform:translate(.125rem)}.glow-card.glow-enabled:hover{box-shadow:0 .25rem .75rem #00000014,0 .5rem 1.5rem #0000001a,0 .25rem 1.25rem rgb(var(--glow-color-rgb)/.15)}.glow-card.glow-enabled.glow-subtle:hover{box-shadow:0 .25rem .75rem #0000000f,0 .375rem 1rem #00000014,0 .125rem .75rem rgb(var(--glow-color-rgb)/.1)}.glow-card.glow-enabled.glow-medium:hover{box-shadow:0 .375rem 1rem #00000014,0 .75rem 2rem #0000001a,0 .375rem 1.5rem rgb(var(--glow-color-rgb)/.2)}.glow-card.glow-enabled.glow-intense:hover{box-shadow:0 .5rem 1.25rem #00000014,0 1rem 2.5rem #0000001a,0 .5rem 2rem rgb(var(--glow-color-rgb)/.3)}.glow-card.glow-enabled.dark-mode:hover{box-shadow:0 0 1.25rem rgb(var(--glow-color-rgb)/.25),0 0 2.5rem rgb(var(--glow-color-rgb)/.18),0 0 3.75rem rgb(var(--glow-color-rgb)/.12)}.glow-card.glow-enabled.dark-mode.glow-subtle:hover{box-shadow:0 0 .75rem rgb(var(--glow-color-rgb)/.18),0 0 1.5rem rgb(var(--glow-color-rgb)/.12)}.glow-card.glow-enabled.dark-mode.glow-medium:hover{box-shadow:0 0 1.5rem rgb(var(--glow-color-rgb)/.3),0 0 3rem rgb(var(--glow-color-rgb)/.22),0 0 4.5rem rgb(var(--glow-color-rgb)/.15)}.glow-card.glow-enabled.dark-mode.glow-intense:hover{box-shadow:0 0 2rem rgb(var(--glow-color-rgb)/.4),0 0 4rem rgb(var(--glow-color-rgb)/.3),0 0 6rem rgb(var(--glow-color-rgb)/.2)}.glow-card.dark-mode{background:var(--ion-card-background, #1e1e1e)}.glow-card.bordered{border:.0625rem solid var(--border-color, var(--ion-color-medium))}@media (max-width: 768px){.glow-card{--card-border-radius: 1rem;--image-border-radius: .75rem}.glow-card__content{padding:.75rem 1rem 1rem}.glow-card__title{font-size:1rem}.glow-card__description{font-size:.8125rem;-webkit-line-clamp:2}}@media (prefers-reduced-motion: reduce){.glow-card,.glow-card__image,.glow-card__cta,.glow-card__cta-text,.glow-card__cta-icon{transition:none}.glow-card:hover,.glow-card:hover .glow-card__image{transform:none}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }] }); }
+  `, isInline: true, styles: [":root{--ion-color-primary: #7026df;--ion-color-primary-rgb: 112, 38, 223;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #6321c4;--ion-color-primary-tint: #7e3ce2;--ion-color-secondary: #e2ccff;--ion-color-secondary-rgb: 226, 204, 255;--ion-color-secondary-contrast: #000000;--ion-color-secondary-contrast-rgb: 0, 0, 0;--ion-color-secondary-shade: #c7b4e0;--ion-color-secondary-tint: #e5d1ff;--ion-color-texti: #354c69;--ion-color-texti-rgb: 53, 76, 105;--ion-color-texti-contrast: #ffffff;--ion-color-texti-contrast-rgb: 255, 255, 255;--ion-color-texti-shade: #2f435c;--ion-color-texti-tint: #495e78;--ion-color-darki: #090f1b;--ion-color-darki-rgb: 9, 15, 27;--ion-color-darki-contrast: #ffffff;--ion-color-darki-contrast-rgb: 255, 255, 255;--ion-color-darki-shade: #080d18;--ion-color-darki-tint: #222732;--ion-color-medium: #9e9e9e;--ion-color-medium-rgb: 158, 158, 158;--ion-color-medium-contrast: #000000;--ion-color-medium-contrast-rgb: 0, 0, 0;--ion-color-medium-shade: #8b8b8b;--ion-color-medium-tint: #a8a8a8;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-medium)}@media (prefers-color-scheme: dark){:root{--ion-color-texti: #8fc1ff;--ion-color-texti-rgb: 143, 193, 255;--ion-color-texti-contrast: #000000;--ion-color-texti-contrast-rgb: 0, 0, 0;--ion-color-texti-shade: #7eaae0;--ion-color-texti-tint: #9ac7ff;--ion-color-darki: #ffffff;--ion-color-darki-rgb: 255, 255, 255;--ion-color-darki-contrast: #000000;--ion-color-darki-contrast-rgb: 0, 0, 0;--ion-color-darki-shade: #e0e0e0;--ion-color-darki-tint: #ffffff;--ion-color-primary: #8f49f8;--ion-color-primary-rgb: 143, 73, 248;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #7e40da;--ion-color-primary-tint: #9a5bf9}}.ion-color-texti{--ion-color-base: var(--ion-color-texti);--ion-color-base-rgb: var(--ion-color-texti-rgb);--ion-color-contrast: var(--ion-color-texti-contrast);--ion-color-contrast-rgb: var(--ion-color-texti-contrast-rgb);--ion-color-shade: var(--ion-color-texti-shade);--ion-color-tint: var(--ion-color-texti-tint)}.ion-color-darki{--ion-color-base: var(--ion-color-darki);--ion-color-base-rgb: var(--ion-color-darki-rgb);--ion-color-contrast: var(--ion-color-darki-contrast);--ion-color-contrast-rgb: var(--ion-color-darki-contrast-rgb);--ion-color-shade: var(--ion-color-darki-shade);--ion-color-tint: var(--ion-color-darki-tint)}:host{--glow-color: var(--ion-color-primary);--glow-color-rgb: 112 38 223;--aspect-ratio: 16 / 9;--card-border-radius: 1.25rem;--image-border-radius: 1rem;--transition-duration: .3s;--transition-timing: cubic-bezier(.4, 0, .2, 1);display:block}.glow-card{position:relative;display:flex;flex-direction:column;background:var(--ion-background-color, #ffffff);border-radius:var(--card-border-radius);overflow:hidden;cursor:pointer;transition:transform var(--transition-duration) var(--transition-timing),box-shadow var(--transition-duration) var(--transition-timing)}.glow-card__image-container{position:relative;width:calc(100% - 1.5rem);aspect-ratio:var(--aspect-ratio);overflow:hidden;border-radius:var(--image-border-radius);margin:.75rem;margin-bottom:0}.glow-card__image{width:100%;height:100%;object-fit:cover;border-radius:var(--image-border-radius);transition:transform var(--transition-duration) var(--transition-timing)}.glow-card__content{padding:1rem 1.25rem 1.25rem;display:flex;flex-direction:column;gap:.5rem}.glow-card__title{margin:0;font-size:1.125rem;font-weight:700;line-height:1.3;color:var(--ion-color-darki, var(--ion-text-color, #000))}.glow-card__description{margin:0;font-size:.875rem;line-height:1.5;color:var(--ion-color-texti, var(--ion-color-medium, #666));display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.glow-card__cta{display:inline-flex;align-items:center;gap:.25rem;margin-top:.5rem;padding:.25rem 0;text-decoration:none;color:var(--glow-color);font-weight:600;font-size:.875rem;transition:gap var(--transition-duration) var(--transition-timing)}.glow-card__cta:hover{gap:.5rem}.glow-card__cta-text{max-width:0;opacity:0;overflow:hidden;white-space:nowrap;transition:max-width var(--transition-duration) var(--transition-timing),opacity var(--transition-duration) var(--transition-timing)}.glow-card__cta-icon{font-size:1.25rem;flex-shrink:0;transition:transform var(--transition-duration) var(--transition-timing)}.glow-card:hover{transform:translateY(-.25rem)}.glow-card:hover .glow-card__image{transform:scale(1.08)}.glow-card:hover .glow-card__cta-text{max-width:12.5rem;opacity:1}.glow-card:hover .glow-card__cta-icon{transform:translate(.125rem)}.glow-card.glow-enabled:hover{box-shadow:0 .25rem .75rem #00000014,0 .5rem 1.5rem #0000001a,0 .25rem 1.25rem rgb(var(--glow-color-rgb)/.15)}.glow-card.glow-enabled.glow-subtle:hover{box-shadow:0 .25rem .75rem #0000000f,0 .375rem 1rem #00000014,0 .125rem .75rem rgb(var(--glow-color-rgb)/.1)}.glow-card.glow-enabled.glow-medium:hover{box-shadow:0 .375rem 1rem #00000014,0 .75rem 2rem #0000001a,0 .375rem 1.5rem rgb(var(--glow-color-rgb)/.2)}.glow-card.glow-enabled.glow-intense:hover{box-shadow:0 .5rem 1.25rem #00000014,0 1rem 2.5rem #0000001a,0 .5rem 2rem rgb(var(--glow-color-rgb)/.3)}.glow-card.glow-enabled.dark-mode:hover{box-shadow:0 0 1.25rem rgb(var(--glow-color-rgb)/.25),0 0 2.5rem rgb(var(--glow-color-rgb)/.18),0 0 3.75rem rgb(var(--glow-color-rgb)/.12)}.glow-card.glow-enabled.dark-mode.glow-subtle:hover{box-shadow:0 0 .75rem rgb(var(--glow-color-rgb)/.18),0 0 1.5rem rgb(var(--glow-color-rgb)/.12)}.glow-card.glow-enabled.dark-mode.glow-medium:hover{box-shadow:0 0 1.5rem rgb(var(--glow-color-rgb)/.3),0 0 3rem rgb(var(--glow-color-rgb)/.22),0 0 4.5rem rgb(var(--glow-color-rgb)/.15)}.glow-card.glow-enabled.dark-mode.glow-intense:hover{box-shadow:0 0 2rem rgb(var(--glow-color-rgb)/.4),0 0 4rem rgb(var(--glow-color-rgb)/.3),0 0 6rem rgb(var(--glow-color-rgb)/.2)}.glow-card.dark-mode{background:var(--ion-card-background, #1e1e1e)}.glow-card.bordered{border:.0625rem solid var(--border-color, var(--ion-color-medium))}@media (max-width: 768px){.glow-card{--card-border-radius: 1rem;--image-border-radius: .75rem}.glow-card__content{padding:.75rem 1rem 1rem}.glow-card__title{font-size:1rem}.glow-card__description{font-size:.8125rem;-webkit-line-clamp:2}}@media (prefers-reduced-motion: reduce){.glow-card,.glow-card__image,.glow-card__cta,.glow-card__cta-text,.glow-card__cta-icon{transition:none}.glow-card:hover,.glow-card:hover .glow-card__image{transform:none}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: GlowCardComponent, decorators: [{
             type: Component,
@@ -15719,12 +14197,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
       <div class="glow-card__content">
         <!-- Title -->
         <h3 class="glow-card__title">
-          {{ title$ | async }}
+          {{ getTitle() }}
         </h3>
 
         <!-- Description -->
         <p class="glow-card__description">
-          {{ description$ | async }}
+          {{ getDescription() }}
         </p>
 
         <!-- CTA Link with expanding animation -->
@@ -15733,7 +14211,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
           [href]="props.cta.url"
           (click)="onCtaClick($event)"
         >
-          <span class="glow-card__cta-text">{{ ctaText$ | async }}</span>
+          <span class="glow-card__cta-text">{{ getCtaText() }}</span>
           <ion-icon
             class="glow-card__cta-icon"
             [name]="props.cta.icon || 'arrow-forward-outline'"
@@ -18643,9 +17121,8 @@ class WizardComponent {
         this.wrapperId = 'wizard-wrapper';
         this.currentStep = null;
         this.currentStepTitles = null;
+        this.loadingText = 'Por favor espere...';
         this.cdr = inject(ChangeDetectorRef);
-        this.langService = inject(LangService);
-        this.loadingText = this.langService.getText('_global', 'pleaseWait', 'Por favor espere...');
     }
     ngOnInit() {
         this.updateCurrentStep();
@@ -18784,7 +17261,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
       </ng-container>
     </div>
   `, styles: [":root{--ion-color-primary: #7026df;--ion-color-primary-rgb: 112, 38, 223;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #6321c4;--ion-color-primary-tint: #7e3ce2;--ion-color-secondary: #e2ccff;--ion-color-secondary-rgb: 226, 204, 255;--ion-color-secondary-contrast: #000000;--ion-color-secondary-contrast-rgb: 0, 0, 0;--ion-color-secondary-shade: #c7b4e0;--ion-color-secondary-tint: #e5d1ff;--ion-color-texti: #354c69;--ion-color-texti-rgb: 53, 76, 105;--ion-color-texti-contrast: #ffffff;--ion-color-texti-contrast-rgb: 255, 255, 255;--ion-color-texti-shade: #2f435c;--ion-color-texti-tint: #495e78;--ion-color-darki: #090f1b;--ion-color-darki-rgb: 9, 15, 27;--ion-color-darki-contrast: #ffffff;--ion-color-darki-contrast-rgb: 255, 255, 255;--ion-color-darki-shade: #080d18;--ion-color-darki-tint: #222732;--ion-color-medium: #9e9e9e;--ion-color-medium-rgb: 158, 158, 158;--ion-color-medium-contrast: #000000;--ion-color-medium-contrast-rgb: 0, 0, 0;--ion-color-medium-shade: #8b8b8b;--ion-color-medium-tint: #a8a8a8;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-medium)}@media (prefers-color-scheme: dark){:root{--ion-color-texti: #8fc1ff;--ion-color-texti-rgb: 143, 193, 255;--ion-color-texti-contrast: #000000;--ion-color-texti-contrast-rgb: 0, 0, 0;--ion-color-texti-shade: #7eaae0;--ion-color-texti-tint: #9ac7ff;--ion-color-darki: #ffffff;--ion-color-darki-rgb: 255, 255, 255;--ion-color-darki-contrast: #000000;--ion-color-darki-contrast-rgb: 0, 0, 0;--ion-color-darki-shade: #e0e0e0;--ion-color-darki-tint: #ffffff;--ion-color-primary: #8f49f8;--ion-color-primary-rgb: 143, 73, 248;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #7e40da;--ion-color-primary-tint: #9a5bf9}}.ion-color-texti{--ion-color-base: var(--ion-color-texti);--ion-color-base-rgb: var(--ion-color-texti-rgb);--ion-color-contrast: var(--ion-color-texti-contrast);--ion-color-contrast-rgb: var(--ion-color-texti-contrast-rgb);--ion-color-shade: var(--ion-color-texti-shade);--ion-color-tint: var(--ion-color-texti-tint)}.ion-color-darki{--ion-color-base: var(--ion-color-darki);--ion-color-base-rgb: var(--ion-color-darki-rgb);--ion-color-contrast: var(--ion-color-darki-contrast);--ion-color-contrast-rgb: var(--ion-color-darki-contrast-rgb);--ion-color-shade: var(--ion-color-darki-shade);--ion-color-tint: var(--ion-color-darki-tint)}.wrapper{height:auto;display:flex;flex-direction:column;justify-content:space-between;position:relative;min-height:320px}.step{min-height:9.375rem;margin:16px 0;text-align:center}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { props: [{
+        }], propDecorators: { props: [{
                 type: Input
             }], onClick: [{
                 type: Output
@@ -18859,40 +17336,14 @@ class CommentSectionComponent {
         this.replyingTo = null;
         this.displayTitle = '';
         this.displayLoadMoreLabel = '';
-        this.langSubscription = null;
-        this.langService = inject(LangService);
         this.infiniteScrollEvent = null;
     }
     ngOnInit() {
         this.updateDisplayTexts();
-        if (this.hasReactiveContent()) {
-            this.langSubscription = this.langService.currentLang$.subscribe(() => {
-                this.updateDisplayTexts();
-            });
-        }
-    }
-    ngOnDestroy() {
-        this.langSubscription?.unsubscribe();
-    }
-    hasReactiveContent() {
-        return !!((this.props.titleContentKey && this.props.contentClass) ||
-            (this.props.loadMoreContentKey && this.props.contentClass));
     }
     updateDisplayTexts() {
-        // Title
-        if (this.props.titleContentKey && this.props.contentClass) {
-            this.displayTitle = this.langService.getText(this.props.contentClass, this.props.titleContentKey, this.props.titleContentFallback || this.props.title || 'Comments');
-        }
-        else {
-            this.displayTitle = this.props.title || 'Comments';
-        }
-        // Load more label
-        if (this.props.loadMoreContentKey && this.props.contentClass) {
-            this.displayLoadMoreLabel = this.langService.getText(this.props.contentClass, this.props.loadMoreContentKey, this.props.loadMoreLabel || 'Load more comments');
-        }
-        else {
-            this.displayLoadMoreLabel = this.props.loadMoreLabel || 'Load more comments';
-        }
+        this.displayTitle = this.props.title || 'Comentarios';
+        this.displayLoadMoreLabel = this.props.loadMoreLabel || 'Cargar más comentarios';
     }
     formatCount(count) {
         if (count >= 1000000) {
@@ -18904,38 +17355,19 @@ class CommentSectionComponent {
         return count.toString();
     }
     getSortOptionLabel(option) {
-        if (option.contentKey && option.contentClass) {
-            return this.langService.getText(option.contentClass, option.contentKey, option.contentFallback || option.label);
-        }
         return option.label;
     }
     getInputPlaceholder() {
-        const config = this.props.inputConfig;
-        if (config?.placeholderContentKey && config?.contentClass) {
-            return this.langService.getText(config.contentClass, config.placeholderContentKey, config.placeholder || 'Write a comment...');
-        }
-        return config?.placeholder || 'Write a comment...';
+        return this.props.inputConfig?.placeholder || 'Escribe un comentario...';
     }
     getSubmitLabel() {
-        const config = this.props.inputConfig;
-        if (config?.submitLabelContentKey && config?.contentClass) {
-            return this.langService.getText(config.contentClass, config.submitLabelContentKey, config.submitLabel || 'Post');
-        }
-        return config?.submitLabel || 'Post';
+        return this.props.inputConfig?.submitLabel || 'Publicar';
     }
     getEmptyTitle() {
-        const empty = this.props.emptyState;
-        if (empty?.titleContentKey && empty?.contentClass) {
-            return this.langService.getText(empty.contentClass, empty.titleContentKey, empty.title || 'No comments yet');
-        }
-        return empty?.title || 'No comments yet';
+        return this.props.emptyState?.title || 'Sin comentarios aún';
     }
     getEmptyMessage() {
-        const empty = this.props.emptyState;
-        if (empty?.messageContentKey && empty?.contentClass) {
-            return this.langService.getText(empty.contentClass, empty.messageContentKey, empty.message || 'Be the first to share your thoughts!');
-        }
-        return empty?.message || 'Be the first to share your thoughts!';
+        return this.props.emptyState?.message || '¡Sé el primero en compartir tu opinión!';
     }
     getSkeletonArray() {
         const count = this.props.skeletonCount || 3;
@@ -19430,7 +17862,6 @@ class DataTableComponent {
         this.selectedRows = new Set();
         /** Cached visible columns for performance */
         this._visibleColumns = [];
-        this.langService = inject(LangService);
         this.cdr = inject(ChangeDetectorRef);
     }
     ngOnInit() {
@@ -21622,169 +20053,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Output
             }] } });
 
-const text = {
-    es: {
-        spanish: 'Español',
-        english: 'Inglés',
-    },
-    en: {
-        spanish: 'Spanish',
-        english: 'English',
-    },
-};
-var LangSettings = new TextContent(text);
-
-/**
- * Global content that can be used across all components.
- * These are common texts like buttons, actions, states, etc.
- * Structure: {es: {key1: 'value1', key2: 'value2'}, en: {key1: 'value1', key2: 'value2'}, fr: {...}}
- *
- * Note: You can add any language code. The system will automatically detect available languages
- * and provide intelligent fallbacks with warnings for missing translations.
- */
-const globalContentData = {
-    es: {
-        // Common buttons
-        ok: 'Aceptar',
-        cancel: 'Cancelar',
-        save: 'Guardar',
-        delete: 'Eliminar',
-        edit: 'Editar',
-        close: 'Cerrar',
-        back: 'Volver',
-        next: 'Siguiente',
-        previous: 'Anterior',
-        finish: 'Finalizar',
-        continue: 'Continuar',
-        // Common actions
-        add: 'Agregar',
-        remove: 'Quitar',
-        search: 'Buscar',
-        filter: 'Filtrar',
-        sort: 'Ordenar',
-        refresh: 'Actualizar',
-        // Common states and messages
-        loading: 'Cargando...',
-        pleaseWait: 'Por favor espere...',
-        noData: 'No hay datos disponibles',
-        error: 'Error',
-        success: 'Éxito',
-        warning: 'Advertencia',
-        info: 'Información',
-        language: 'Idioma',
-        // Common confirmations
-        areYouSure: '¿Estás seguro?',
-        // Language names (translated) - flat keys for type compatibility
-        languageName_es: 'Español',
-        languageName_en: 'Inglés',
-        languageName_fr: 'Francés',
-        languageName_de: 'Alemán',
-        languageName_pt: 'Portugués',
-        languageName_it: 'Italiano',
-        languageName_zh: 'Chino',
-        languageName_ja: 'Japonés',
-        languageName_ko: 'Coreano',
-        languageName_ru: 'Ruso',
-        languageName_ar: 'Árabe',
-        deleteConfirmation: '¿Estás seguro de que deseas eliminar {itemName}?',
-        unsavedChanges: 'Tienes cambios sin guardar. ¿Deseas continuar?',
-        // Common placeholders
-        searchPlaceholder: 'Buscar...',
-        select: 'Seleccionar...',
-        selectOption: 'Seleccione una opción',
-        selectLanguage: 'Seleccionar idioma...',
-        // Status messages
-        copied: '¡Copiado al portapapeles!',
-        seeMore: 'ver más',
-        selected: 'seleccionados',
-        // Image preview
-        zoomIn: 'Acercar',
-        zoomOut: 'Alejar',
-        resetZoom: 'Restablecer zoom',
-    },
-    en: {
-        // Common buttons
-        ok: 'OK',
-        cancel: 'Cancel',
-        save: 'Save',
-        delete: 'Delete',
-        edit: 'Edit',
-        close: 'Close',
-        back: 'Back',
-        next: 'Next',
-        previous: 'Previous',
-        finish: 'Finish',
-        continue: 'Continue',
-        // Common actions
-        add: 'Add',
-        remove: 'Remove',
-        search: 'Search',
-        filter: 'Filter',
-        sort: 'Sort',
-        refresh: 'Refresh',
-        // Common states and messages
-        loading: 'Loading...',
-        pleaseWait: 'Please wait...',
-        noData: 'No data available',
-        error: 'Error',
-        success: 'Success',
-        warning: 'Warning',
-        info: 'Information',
-        language: 'Language',
-        // Common confirmations
-        areYouSure: 'Are you sure?',
-        // Language names (translated) - flat keys for type compatibility
-        languageName_es: 'Spanish',
-        languageName_en: 'English',
-        languageName_fr: 'French',
-        languageName_de: 'German',
-        languageName_pt: 'Portuguese',
-        languageName_it: 'Italian',
-        languageName_zh: 'Chinese',
-        languageName_ja: 'Japanese',
-        languageName_ko: 'Korean',
-        languageName_ru: 'Russian',
-        languageName_ar: 'Arabic',
-        deleteConfirmation: 'Are you sure you want to delete {itemName}?',
-        unsavedChanges: 'You have unsaved changes. Do you want to continue?',
-        // Common placeholders
-        searchPlaceholder: 'Search...',
-        select: 'Select...',
-        selectOption: 'Select an option',
-        selectLanguage: 'Select language...',
-        // Status messages
-        copied: 'Copied to clipboard!',
-        seeMore: 'see more',
-        selected: 'selected',
-        // Image preview
-        zoomIn: 'Zoom in',
-        zoomOut: 'Zoom out',
-        resetZoom: 'Reset zoom',
-    },
-};
-const GlobalContent = new TextContent(globalContentData);
-// ImageComponent specific content
-const imageComponentData = {
-    es: {
-        close: 'Cerrar',
-        zoomIn: 'Acercar',
-        zoomOut: 'Alejar',
-        resetZoom: 'Restablecer zoom',
-    },
-    en: {
-        close: 'Close',
-        zoomIn: 'Zoom in',
-        zoomOut: 'Zoom out',
-        resetZoom: 'Reset zoom',
-    },
-};
-const ImageComponentContent = new TextContent(imageComponentData);
-const content = {
-    _global: GlobalContent,
-    LangSettings,
-    ImageComponent: ImageComponentContent,
-};
-
 /**
  * Service for displaying toast notifications using Ionic's ToastController.
  * Provides methods to show and present toasts with custom options.
@@ -21829,6 +20097,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 }]
         }], ctorParameters: () => [{ type: i2.ToastController }] });
 
+// Types for valtech-components services
+// ValtechConfig and LangProvider have been removed in v3.0.0
+// Use LocaleService for language management instead
+
 /**
  * Default confirmation dialog options.
  */
@@ -22254,191 +20526,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 }]
         }] });
 
-/**
- * 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
  */
@@ -22447,5 +20534,5 @@ function createContentHelper(langService, className) {
  * Generated bundle index. Do not edit.
  */
 
-export { ARTICLE_SPACING, AccordionComponent, ActionHeaderComponent, ActionType, AlertBoxComponent, ArticleBuilder, ArticleComponent, AvatarComponent, BannerComponent, BaseDefault, BoxComponent, BreadcrumbComponent, ButtonComponent, ButtonGroupComponent, COMMON_COUNTRY_CODES, COMMON_CURRENCIES, CURRENCY_INFO, CardComponent, CardSection, CardType, CardsCarouselComponent, CheckInputComponent, ChipGroupComponent, ClearDefault, ClearDefaultBlock, ClearDefaultFull, ClearDefaultRound, ClearDefaultRoundBlock, ClearDefaultRoundFull, CodeDisplayComponent, CommandDisplayComponent, CommentComponent, CommentInputComponent, CommentSectionComponent, CompanyFooterComponent, ComponentStates, ConfirmationDialogService, ContentLoaderComponent, CountdownComponent, CurrencyInputComponent, DEFAULT_CANCEL_BUTTON, DEFAULT_CONFIRM_BUTTON, DEFAULT_COUNTDOWN_LABELS, DEFAULT_COUNTDOWN_LABELS_EN, DEFAULT_EMPTY_STATE, DEFAULT_LEGEND_LABELS, DEFAULT_MODAL_CANCEL_BUTTON, DEFAULT_MODAL_CONFIRM_BUTTON, DEFAULT_PAGE_SIZE_OPTIONS, DEFAULT_PAYMENT_STATUS_COLORS, DEFAULT_PAYMENT_STATUS_LABELS, DEFAULT_PLATFORMS, DEFAULT_STATUS_COLORS, DEFAULT_STATUS_LABELS, DEFAULT_WINNER_LABELS, DataTableComponent, DateInputComponent, DateRangeInputComponent, DisplayComponent, DividerComponent, DownloadService, EmailInputComponent, ExpandableTextComponent, FabComponent, FileInputComponent, FooterComponent, FooterLinksComponent, FormComponent, FormFooterComponent, FunHeaderComponent, GlobalContent, GlowCardComponent, HeaderComponent, HintComponent, HorizontalScrollComponent, HourInputComponent, HrefComponent, Icon, IconComponent, IconService, ImageComponent, InAppBrowserService, InfoComponent, InputType, ItemListComponent, LANGUAGES, LangService, LanguageSelectorComponent, LayeredCardComponent, LayoutComponent, LinkComponent, LinkProcessorService, LinksAccordionComponent, LinksCakeComponent, LocalStorageService, MODAL_SIZES, MOTION, MenuComponent, ModalService, MultiSelectSearchComponent, NavigationService, NoContentComponent, NotesBoxComponent, NumberFromToComponent, NumberInputComponent, NumberStepperComponent, OutlineDefault, OutlineDefaultBlock, OutlineDefaultFull, OutlineDefaultRound, OutlineDefaultRoundBlock, OutlineDefaultRoundFull, PLATFORM_CONFIGS, PageContentComponent, PageTemplateComponent, PageWrapperComponent, PaginationComponent, ParticipantCardComponent, PasswordInputComponent, PhoneInputComponent, PillComponent, PinInputComponent, PlainCodeBoxComponent, PopoverSelectorComponent, PriceTagComponent, PrimarySolidBlockButton, PrimarySolidBlockHrefButton, PrimarySolidBlockIconButton, PrimarySolidBlockIconHrefButton, PrimarySolidDefaultRoundButton, PrimarySolidDefaultRoundHrefButton, PrimarySolidDefaultRoundIconButton, PrimarySolidDefaultRoundIconHrefButton, PrimarySolidFullButton, PrimarySolidFullHrefButton, PrimarySolidFullIconButton, PrimarySolidFullIconHrefButton, PrimarySolidLargeRoundButton, PrimarySolidLargeRoundHrefButton, PrimarySolidLargeRoundIconButton, PrimarySolidLargeRoundIconHrefButton, PrimarySolidSmallRoundButton, PrimarySolidSmallRoundHrefButton, PrimarySolidSmallRoundIconButton, PrimarySolidSmallRoundIconHrefButton, ProcessLinksPipe, ProgressBarComponent, ProgressRingComponent, ProgressStatusComponent, PrompterComponent, QR_PRESETS, QrCodeComponent, QrGeneratorService, QuoteBoxComponent, RadioInputComponent, RaffleStatusCardComponent, RangeInputComponent, RatingComponent, RecapCardComponent, RightsFooterComponent, SKELETON_PRESETS, SearchSelectorComponent, SearchbarComponent, SecondarySolidBlockButton, SecondarySolidBlockHrefButton, SecondarySolidBlockIconButton, SecondarySolidBlockIconHrefButton, SecondarySolidDefaultRoundButton, SecondarySolidDefaultRoundHrefButton, SecondarySolidDefaultRoundIconButton, SecondarySolidDefaultRoundIconHrefButton, SecondarySolidFullButton, SecondarySolidFullHrefButton, SecondarySolidFullIconButton, SecondarySolidFullIconHrefButton, SecondarySolidLargeRoundButton, SecondarySolidLargeRoundHrefButton, SecondarySolidLargeRoundIconButton, SecondarySolidLargeRoundIconHrefButton, SecondarySolidSmallRoundButton, SecondarySolidSmallRoundHrefButton, SecondarySolidSmallRoundIconButton, SecondarySolidSmallRoundIconHrefButton, SegmentControlComponent, SelectSearchComponent, ShareButtonsComponent, SimpleComponent, SkeletonComponent, SolidBlockButton, SolidDefault, SolidDefaultBlock, SolidDefaultButton, SolidDefaultFull, SolidDefaultRound, SolidDefaultRoundBlock, SolidDefaultRoundButton, SolidDefaultRoundFull, SolidFullButton, SolidLargeButton, SolidLargeRoundButton, SolidSmallButton, SolidSmallRoundButton, StatsCardComponent, StepperComponent, SwipeCarouselComponent, TabsComponent, TestimonialCardComponent, TestimonialCarouselComponent, TextComponent, TextContent, TextInputComponent, TextareaInputComponent, ThemeOption, ThemeService, TicketGridComponent, TimelineComponent, TitleBlockComponent, TitleComponent, ToastService, ToggleInputComponent, ToolbarActionType, ToolbarComponent, ValtechConfigService, WinnerDisplayComponent, WizardComponent, WizardFooterComponent, applyDefaultValueToControl, content, createButtonProps, createContentHelper, createDisplayProps, createGlowCardProps, createNumberFromToField, createReactiveContentMetadata, createTextProps, createTitleProps, extractContentConfig, extractContentConfigWithInterpolation, fromContent, fromContentWithInterpolation, fromMultipleContent, globalContentData, goToTop, interpolateContent, interpolateStaticContent, isAtEnd, maxLength, replaceSpecialChars, resolveColor, resolveInputDefaultValue, shouldUseReactiveContent, shouldUseReactiveContentWithInterpolation };
+export { ARTICLE_SPACING, AccordionComponent, ActionHeaderComponent, ActionType, AlertBoxComponent, ArticleBuilder, ArticleComponent, AvatarComponent, BannerComponent, BaseDefault, BoxComponent, BreadcrumbComponent, ButtonComponent, ButtonGroupComponent, COMMON_COUNTRY_CODES, COMMON_CURRENCIES, CURRENCY_INFO, CardComponent, CardSection, CardType, CardsCarouselComponent, CheckInputComponent, ChipGroupComponent, ClearDefault, ClearDefaultBlock, ClearDefaultFull, ClearDefaultRound, ClearDefaultRoundBlock, ClearDefaultRoundFull, CodeDisplayComponent, CommandDisplayComponent, CommentComponent, CommentInputComponent, CommentSectionComponent, CompanyFooterComponent, ComponentStates, ConfirmationDialogService, ContentLoaderComponent, CountdownComponent, CurrencyInputComponent, DEFAULT_CANCEL_BUTTON, DEFAULT_CONFIRM_BUTTON, DEFAULT_COUNTDOWN_LABELS, DEFAULT_COUNTDOWN_LABELS_EN, DEFAULT_EMPTY_STATE, DEFAULT_LEGEND_LABELS, DEFAULT_MODAL_CANCEL_BUTTON, DEFAULT_MODAL_CONFIRM_BUTTON, DEFAULT_PAGE_SIZE_OPTIONS, DEFAULT_PAYMENT_STATUS_COLORS, DEFAULT_PAYMENT_STATUS_LABELS, DEFAULT_PLATFORMS, DEFAULT_STATUS_COLORS, DEFAULT_STATUS_LABELS, DEFAULT_WINNER_LABELS, DataTableComponent, DateInputComponent, DateRangeInputComponent, DisplayComponent, DividerComponent, DownloadService, EmailInputComponent, ExpandableTextComponent, FabComponent, FileInputComponent, FooterComponent, FooterLinksComponent, FormComponent, FormFooterComponent, FunHeaderComponent, GlowCardComponent, HeaderComponent, HintComponent, HorizontalScrollComponent, HourInputComponent, HrefComponent, Icon, IconComponent, IconService, ImageComponent, InAppBrowserService, InfoComponent, InputType, ItemListComponent, LanguageSelectorComponent, LayeredCardComponent, LayoutComponent, LinkComponent, LinkProcessorService, LinksAccordionComponent, LinksCakeComponent, LocalStorageService, LocaleService, MODAL_SIZES, MOTION, MenuComponent, ModalService, MultiSelectSearchComponent, NavigationService, NoContentComponent, NotesBoxComponent, NumberFromToComponent, NumberInputComponent, NumberStepperComponent, OutlineDefault, OutlineDefaultBlock, OutlineDefaultFull, OutlineDefaultRound, OutlineDefaultRoundBlock, OutlineDefaultRoundFull, PLATFORM_CONFIGS, PageContentComponent, PageTemplateComponent, PageWrapperComponent, PaginationComponent, ParticipantCardComponent, PasswordInputComponent, PhoneInputComponent, PillComponent, PinInputComponent, PlainCodeBoxComponent, PopoverSelectorComponent, PriceTagComponent, PrimarySolidBlockButton, PrimarySolidBlockHrefButton, PrimarySolidBlockIconButton, PrimarySolidBlockIconHrefButton, PrimarySolidDefaultRoundButton, PrimarySolidDefaultRoundHrefButton, PrimarySolidDefaultRoundIconButton, PrimarySolidDefaultRoundIconHrefButton, PrimarySolidFullButton, PrimarySolidFullHrefButton, PrimarySolidFullIconButton, PrimarySolidFullIconHrefButton, PrimarySolidLargeRoundButton, PrimarySolidLargeRoundHrefButton, PrimarySolidLargeRoundIconButton, PrimarySolidLargeRoundIconHrefButton, PrimarySolidSmallRoundButton, PrimarySolidSmallRoundHrefButton, PrimarySolidSmallRoundIconButton, PrimarySolidSmallRoundIconHrefButton, ProcessLinksPipe, ProgressBarComponent, ProgressRingComponent, ProgressStatusComponent, PrompterComponent, QR_PRESETS, QrCodeComponent, QrGeneratorService, QuoteBoxComponent, RadioInputComponent, RaffleStatusCardComponent, RangeInputComponent, RatingComponent, RecapCardComponent, RightsFooterComponent, SKELETON_PRESETS, SearchSelectorComponent, SearchbarComponent, SecondarySolidBlockButton, SecondarySolidBlockHrefButton, SecondarySolidBlockIconButton, SecondarySolidBlockIconHrefButton, SecondarySolidDefaultRoundButton, SecondarySolidDefaultRoundHrefButton, SecondarySolidDefaultRoundIconButton, SecondarySolidDefaultRoundIconHrefButton, SecondarySolidFullButton, SecondarySolidFullHrefButton, SecondarySolidFullIconButton, SecondarySolidFullIconHrefButton, SecondarySolidLargeRoundButton, SecondarySolidLargeRoundHrefButton, SecondarySolidLargeRoundIconButton, SecondarySolidLargeRoundIconHrefButton, SecondarySolidSmallRoundButton, SecondarySolidSmallRoundHrefButton, SecondarySolidSmallRoundIconButton, SecondarySolidSmallRoundIconHrefButton, SegmentControlComponent, SelectSearchComponent, ShareButtonsComponent, SimpleComponent, SkeletonComponent, SolidBlockButton, SolidDefault, SolidDefaultBlock, SolidDefaultButton, SolidDefaultFull, SolidDefaultRound, SolidDefaultRoundBlock, SolidDefaultRoundButton, SolidDefaultRoundFull, SolidFullButton, SolidLargeButton, SolidLargeRoundButton, SolidSmallButton, SolidSmallRoundButton, StatsCardComponent, StepperComponent, SwipeCarouselComponent, TabsComponent, TestimonialCardComponent, TestimonialCarouselComponent, TextComponent, TextInputComponent, TextareaInputComponent, ThemeOption, ThemeService, TicketGridComponent, TimelineComponent, TitleBlockComponent, TitleComponent, ToastService, ToggleInputComponent, ToolbarActionType, ToolbarComponent, WinnerDisplayComponent, WizardComponent, WizardFooterComponent, applyDefaultValueToControl, createGlowCardProps, createNumberFromToField, createTitleProps, goToTop, isAtEnd, maxLength, replaceSpecialChars, resolveColor, resolveInputDefaultValue };
 //# sourceMappingURL=valtech-components.mjs.map