valtech-components 2.0.292 → 2.0.294

package/lib/components/atoms/button/button.component.d.ts

@@ -1,25 +1,32 @@
-import { EventEmitter } from '@angular/core';
+import { EventEmitter, OnDestroy, OnInit } from '@angular/core';
+import { Observable } from 'rxjs';
+import { ContentService } from '../../../services/content.service';
 import { DownloadService } from '../../../services/download.service';
 import { IconService } from '../../../services/icons.service';
 import { NavigationService } from '../../../services/navigation.service';
 import { ButtonMetadata } from '../../types';
 import * as i0 from "@angular/core";
-export declare class ButtonComponent {
+export declare class ButtonComponent implements OnInit, OnDestroy {
     private download;
     private navigation;
+    private contentService;
     states: {
         ENABLED: "ENABLED";
         DISABLED: "DISABLED";
         WORKING: "WORKING";
         ERROR: "ERROR";
     };
+    displayText$: Observable<string>;
+    private subscriptions;
     props: ButtonMetadata;
     /**
      * Event emitted when the button is clicked.
      */
     onClick: EventEmitter<string>;
-    constructor(download: DownloadService, icon: IconService, navigation: NavigationService);
+    constructor(download: DownloadService, icon: IconService, navigation: NavigationService, contentService: ContentService);
     ngOnInit(): void;
+    ngOnDestroy(): void;
+    private initializeDisplayText;
     clickHandler(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ButtonComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<ButtonComponent, "val-button", never, { "props": { "alias": "props"; "required": false; }; }, { "onClick": "onClick"; }, never, never, true, never>;

package/lib/components/atoms/display/display.component.d.ts

@@ -1,17 +1,25 @@
-import { OnInit } from '@angular/core';
+import { OnDestroy, OnInit } from '@angular/core';
+import { Observable } from 'rxjs';
+import { ContentService } from '../../../services/content.service';
 import { DisplayMetadata } from './types';
 import * as i0 from "@angular/core";
-export declare class DisplayComponent implements OnInit {
+export declare class DisplayComponent implements OnInit, OnDestroy {
+    private contentService;
+    displayContent$: Observable<string>;
+    private subscriptions;
     /**
      * Display configuration object.
      * @type {DisplayMetadata}
-     * @property content - The text to display.
+     * @property content - Static text to display (takes precedence over contentConfig).
+     * @property contentConfig - Reactive content configuration.
      * @property color - The text color (Ionic color string).
      * @property size - The text size ('small' | 'medium' | 'large' | 'xlarge').
      */
     props: DisplayMetadata;
-    constructor();
+    constructor(contentService: ContentService);
     ngOnInit(): void;
+    ngOnDestroy(): void;
+    private initializeDisplayContent;
     static ɵfac: i0.ɵɵFactoryDeclaration<DisplayComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<DisplayComponent, "val-display", never, { "props": { "alias": "props"; "required": false; }; }, {}, never, never, true, never>;
 }

package/lib/components/atoms/display/types.d.ts

@@ -1,13 +1,23 @@
 import { Color } from '@ionic/core';
 /**
- * Props for val-display component.
+ * Props for val-display component with reactive content support.
+ * Supports both static and reactive content patterns.
  *
  * @property size - The text size ('small' | 'medium' | 'large' | 'xlarge').
  * @property color - The text color (Ionic color string).
- * @property content - The text to display.
+ * @property content - Static content text (takes precedence over contentConfig).
+ * @property contentConfig - Reactive content configuration.
  */
 export interface DisplayMetadata {
     size: 'small' | 'medium' | 'large' | 'xlarge';
     color: Color;
-    content: string;
+    /** Static content (takes precedence over contentConfig) */
+    content?: string;
+    /** Reactive content configuration */
+    contentConfig?: {
+        className?: string;
+        key: string;
+        fallback?: string;
+        interpolation?: Record<string, any>;
+    };
 }

package/lib/components/atoms/title/title.component.d.ts

@@ -1,17 +1,22 @@
 import { OnInit } from '@angular/core';
+import { Observable } from 'rxjs';
 import { TitleMetadata } from './types';
 import * as i0 from "@angular/core";
 export declare class TitleComponent implements OnInit {
     /**
      * Title configuration object.
      * @type {TitleMetadata}
-     * @property content - The title text to display.
+     * @property content - Static title text (takes precedence over reactive content).
+     * @property contentConfig - Reactive content configuration.
      * @property color - The title color (Ionic color string).
      * @property size - The title size ('small' | 'medium' | 'large' | 'xlarge').
      * @property bold - Whether the title is bold.
      * @property thin - Whether the title is thin (optional).
      */
     props: TitleMetadata;
+    private contentService;
+    private contentHelper;
+    displayContent$: Observable<string>;
     constructor();
     ngOnInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<TitleComponent, never>;

package/lib/components/atoms/title/types.d.ts

@@ -1,17 +1,43 @@
 import { Color } from '@ionic/core';
+import { ReactiveTextMetadata } from '../../../shared/utils/reactive-content';
 /**
  * Props for val-title component.
+ * Supports both static content and reactive content from the language service.
  *
- * @property content - The title text to display.
+ * @property content - Static title text to display (takes precedence over reactive content).
+ * @property contentConfig - Reactive content configuration (used when content is not provided).
  * @property color - The title color (Ionic color string).
  * @property size - The title size ('small' | 'medium' | 'large' | 'xlarge').
  * @property bold - Whether the title is bold.
  * @property thin - Whether the title is thin (optional).
  */
-export interface TitleMetadata {
+export interface TitleMetadata extends ReactiveTextMetadata {
     size: 'small' | 'medium' | 'large' | 'xlarge';
     color: Color;
-    content: string;
     bold: boolean;
     thin?: boolean;
 }
+/**
+ * Factory function to create title props with reactive content support.
+ *
+ * @param styleConfig - Title styling configuration
+ * @param contentConfig - Content configuration (static or reactive)
+ * @returns Complete TitleMetadata object
+ *
+ * @example Static content:
+ * ```typescript
+ * const props = createTitleProps(
+ *   { size: 'large', color: 'primary', bold: true },
+ *   { content: 'Static Title' }
+ * );
+ * ```
+ *
+ * @example Reactive content:
+ * ```typescript
+ * const props = createTitleProps(
+ *   { size: 'large', color: 'primary', bold: true },
+ *   { contentConfig: { key: 'pageTitle', fallback: 'Default Title' } }
+ * );
+ * ```
+ */
+export declare function createTitleProps(styleConfig: Pick<TitleMetadata, 'size' | 'color' | 'bold' | 'thin'>, contentConfig: Pick<TitleMetadata, 'content' | 'contentConfig'>): TitleMetadata;

package/lib/components/molecules/alert-box/alert-box.component.d.ts

@@ -1,17 +1,25 @@
-import { OnInit } from '@angular/core';
-import { AlertBoxMetadata } from './types';
+import { OnDestroy, OnInit } from '@angular/core';
+import { ContentService } from '../../../services/content.service';
+import { AlertBoxMetadata, ReactiveAlertBoxMetadata } from './types';
 import * as i0 from "@angular/core";
-export declare class AlertBoxComponent implements OnInit {
+export declare class AlertBoxComponent implements OnInit, OnDestroy {
+    private contentService;
+    private subscriptions;
     /**
      * Alert box configuration object.
-     * @type {AlertBoxMetadata}
-     * @property box - Box configuration (see BoxMetadata).
-     * @property icon - Icon configuration (see IconMetadata).
-     * @property text - Text configuration (see TextMetadata).
+     * Supports both legacy AlertBoxMetadata and ReactiveAlertBoxMetadata patterns.
      */
-    props: AlertBoxMetadata;
-    constructor();
+    props: AlertBoxMetadata | ReactiveAlertBoxMetadata;
+    /** Computed text properties for reactive pattern */
+    computedTextProps: any;
+    /** Whether this is using the legacy props pattern */
+    get isLegacyProps(): boolean;
+    /** Get text props for legacy pattern */
+    getLegacyTextProps(): any;
+    constructor(contentService: ContentService);
     ngOnInit(): void;
+    ngOnDestroy(): void;
+    private initializeReactiveTextProps;
     static ɵfac: i0.ɵɵFactoryDeclaration<AlertBoxComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<AlertBoxComponent, "val-alert-box", never, { "props": { "alias": "props"; "required": false; }; }, {}, never, never, true, never>;
 }

package/lib/components/molecules/alert-box/types.d.ts

@@ -1,8 +1,37 @@
 import { BoxMetadata } from '../../atoms/box/types';
 import { IconMetadata } from '../../atoms/icon/types';
 import { TextMetadata } from '../../atoms/text/types';
+/**
+ * Alert box component metadata with support for reactive content.
+ * Provides both static and reactive content options for the text element.
+ */
 export interface AlertBoxMetadata {
     box: BoxMetadata;
     icon: IconMetadata;
     text: TextMetadata;
 }
+/**
+ * Enhanced alert box metadata with simplified reactive content support.
+ * Alternative to the standard AlertBoxMetadata for common use cases.
+ */
+export interface ReactiveAlertBoxMetadata {
+    /** Box styling configuration */
+    box: BoxMetadata;
+    /** Icon configuration */
+    icon: IconMetadata;
+    /** Static text (takes precedence over textConfig) */
+    text?: string;
+    /** Reactive content configuration for alert text */
+    textConfig?: {
+        className?: string;
+        key: string;
+        fallback?: string;
+        interpolation?: Record<string, any>;
+    };
+    /** Text styling options */
+    textStyle?: {
+        size?: 'small' | 'medium' | 'large' | 'xlarge';
+        color?: string;
+        bold?: boolean;
+    };
+}

package/lib/components/molecules/language-selector/language-selector.component.d.ts

@@ -0,0 +1,50 @@
+import { EventEmitter, OnDestroy, OnInit } from '@angular/core';
+import { Observable } from 'rxjs';
+import { ContentService } from '../../../services/content.service';
+import { LangService } from '../../../services/lang-provider/lang-provider.service';
+import { LangOption } from '../../../services/lang-provider/types';
+import { PopoverSelectorMetadata } from '../popover-selector/types';
+import { LanguageSelectorMetadata } from './types';
+import * as i0 from "@angular/core";
+export declare class LanguageSelectorComponent implements OnInit, OnDestroy {
+    private langService;
+    private contentService;
+    /**
+     * Language selector configuration object.
+     * @type {LanguageSelectorMetadata}
+     */
+    props: LanguageSelectorMetadata;
+    /**
+     * Event emitted when the language selection changes.
+     * Emits the selected language code.
+     */
+    languageChange: EventEmitter<string>;
+    /** Popover selector configuration */
+    popoverProps: PopoverSelectorMetadata;
+    /** Current language observable */
+    currentLanguage$: Observable<LangOption>;
+    /** Available languages observable */
+    availableLanguages$: Observable<LangOption[]>;
+    /** Label observable for reactive content */
+    label$: Observable<string>;
+    private subscriptions;
+    /** Default language display names */
+    private readonly defaultLanguageNames;
+    /** Default flag icons for languages */
+    private readonly defaultLanguageFlags;
+    constructor(langService: LangService, contentService: ContentService);
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    private initializeLanguageState;
+    private initializeLabel;
+    private initializePopoverProps;
+    private updatePopoverProps;
+    private getLanguageDisplayName;
+    /**
+     * Handle language selection change.
+     * @param selectedLanguage - The selected language code(s)
+     */
+    onLanguageChange(selectedLanguage: string | string[]): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LanguageSelectorComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LanguageSelectorComponent, "val-language-selector", never, { "props": { "alias": "props"; "required": false; }; }, { "languageChange": "languageChange"; }, never, never, true, never>;
+}

package/lib/components/molecules/language-selector/types.d.ts

@@ -0,0 +1,52 @@
+import { Color } from '@ionic/core';
+/**
+ * Props for val-language-selector component.
+ * A specialized component for language selection.
+ *
+ * @property currentLanguage - Currently selected language code.
+ * @property availableLanguages - Array of available language codes.
+ * @property showLabel - Whether to show the label.
+ * @property label - Custom label text (static).
+ * @property labelConfig - Reactive content configuration for label.
+ * @property showFlags - Whether to show flag icons for languages.
+ * @property color - Button color (Ionic color string).
+ * @property size - Button size ('small' | 'default' | 'large').
+ * @property fill - Button fill style ('clear' | 'outline' | 'solid' | 'default').
+ * @property shape - Button shape ('round' | undefined).
+ * @property expand - Button expansion ('full' | 'block' | undefined).
+ * @property disabled - Whether the selector is disabled.
+ * @property customLanguageNames - Custom display names for languages.
+ */
+export interface LanguageSelectorMetadata {
+    /** Currently selected language code */
+    currentLanguage?: string;
+    /** Array of available language codes */
+    availableLanguages?: string[];
+    /** Whether to show the label */
+    showLabel?: boolean;
+    /** Static label text (takes precedence over labelConfig) */
+    label?: string;
+    /** Reactive content configuration for label */
+    labelConfig?: {
+        className?: string;
+        key: string;
+        fallback?: string;
+        interpolation?: Record<string, any>;
+    };
+    /** Whether to show flag icons for languages */
+    showFlags?: boolean;
+    /** Button color */
+    color?: Color;
+    /** Button size */
+    size?: 'small' | 'default' | 'large';
+    /** Button fill style */
+    fill?: 'clear' | 'outline' | 'solid' | 'default';
+    /** Button shape */
+    shape?: 'round';
+    /** Button expansion */
+    expand?: 'full' | 'block';
+    /** Whether the selector is disabled */
+    disabled?: boolean;
+    /** Custom display names for languages */
+    customLanguageNames?: Record<string, string>;
+}

package/lib/components/molecules/popover-selector/popover-selector.component.d.ts

@@ -0,0 +1,29 @@
+import { EventEmitter } from '@angular/core';
+import { PopoverSelectorMetadata } from './types';
+import * as i0 from "@angular/core";
+export declare class PopoverSelectorComponent {
+    /**
+     * Popover selector configuration object.
+     * @type {PopoverSelectorMetadata}
+     */
+    props: PopoverSelectorMetadata;
+    /**
+     * Event emitted when the selection changes.
+     * Emits the selected value(s).
+     */
+    selectionChange: EventEmitter<string | string[]>;
+    constructor();
+    /**
+     * Handle selection change from the ion-select.
+     * @param event - The ion-select change event
+     */
+    onSelectionChange(event: any): void;
+    /**
+     * Get the display text for the trigger button.
+     * Shows the selected option's label or placeholder.
+     * @returns The display text
+     */
+    getDisplayText(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PopoverSelectorComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PopoverSelectorComponent, "val-popover-selector", never, { "props": { "alias": "props"; "required": false; }; }, { "selectionChange": "selectionChange"; }, never, never, true, never>;
+}

package/lib/components/molecules/popover-selector/types.d.ts

@@ -0,0 +1,69 @@
+import { Color } from '@ionic/core';
+/**
+ * Option for the popover selector.
+ */
+export interface PopoverOption {
+    /** Option value */
+    value: string;
+    /** Option display label */
+    label: string;
+    /** Option icon (optional) */
+    icon?: string;
+    /** Whether the option is disabled */
+    disabled?: boolean;
+}
+/**
+ * Props for val-popover-selector component.
+ * A generic reusable popover selector component.
+ *
+ * @property options - Array of selectable options.
+ * @property selectedValue - Currently selected value.
+ * @property label - Display label for the selector.
+ * @property icon - Icon to display in the trigger button (optional).
+ * @property placeholder - Placeholder text when no option is selected.
+ * @property color - Button color (Ionic color string).
+ * @property size - Button size ('small' | 'default' | 'large').
+ * @property fill - Button fill style ('clear' | 'outline' | 'solid' | 'default').
+ * @property shape - Button shape ('round' | undefined).
+ * @property expand - Button expansion ('full' | 'block' | undefined).
+ * @property disabled - Whether the selector is disabled.
+ * @property interface - Popover interface style ('popover' | 'action-sheet' | 'alert').
+ * @property showCheckmark - Whether to show checkmarks for selected options.
+ * @property multiple - Whether multiple selection is allowed.
+ * @property cancelText - Text for cancel button.
+ * @property okText - Text for OK button.
+ */
+export interface PopoverSelectorMetadata {
+    /** Array of selectable options */
+    options: PopoverOption[];
+    /** Currently selected value(s) */
+    selectedValue?: string | string[];
+    /** Display label for the selector */
+    label?: string;
+    /** Icon to display in the trigger */
+    icon?: string;
+    /** Placeholder text when no option is selected */
+    placeholder?: string;
+    /** Button color */
+    color?: Color;
+    /** Button size */
+    size?: 'small' | 'default' | 'large';
+    /** Button fill style */
+    fill?: 'clear' | 'outline' | 'solid' | 'default';
+    /** Button shape */
+    shape?: 'round';
+    /** Button expansion */
+    expand?: 'full' | 'block';
+    /** Whether the selector is disabled */
+    disabled?: boolean;
+    /** Popover interface style */
+    interface?: 'popover' | 'action-sheet' | 'alert';
+    /** Whether to show checkmarks for selected options */
+    showCheckmark?: boolean;
+    /** Whether multiple selection is allowed */
+    multiple?: boolean;
+    /** Cancel button text */
+    cancelText?: string;
+    /** OK button text */
+    okText?: string;
+}

package/lib/components/organisms/item-list/types.d.ts

@@ -6,27 +6,40 @@ import { Color } from '@ionic/core';
 import { ComponentState } from '../../types';
 /**
  * Representa una acción disponible en un elemento de la lista.
+ * Ahora soporta contenido reactivo para la descripción.
  * @property token Identificador único de la acción.
  * @property icon (opcional) Icono a mostrar.
- * @property description Descripción de la acción.
+ * @property description (opcional) Descripción estática de la acción.
+ * @property descriptionConfig (opcional) Configuración de contenido reactivo para la descripción.
  * @property state Estado de la acción (habilitado, deshabilitado, trabajando, etc).
  */
 export type ItemAction = {
     token: string;
     icon?: string;
-    description: string;
+    description?: string;
+    descriptionConfig?: {
+        className?: string;
+        key: string;
+        fallback?: string;
+        interpolation?: Record<string, any>;
+    };
     state: ComponentState;
 };
 /**
  * Metadatos de un elemento individual de la lista.
+ * Ahora soporta contenido reactivo para todos los campos de texto.
  * @property token (opcional) Identificador único del elemento.
  * @property mode Modo de visualización ('justext', 'subtitule', 'avatar', 'icon', 'route', 'actionable').
- * @property text Texto principal del elemento.
+ * @property text (opcional) Texto estático principal del elemento.
+ * @property textConfig (opcional) Configuración de contenido reactivo para el texto principal.
  * @property image (opcional) Imagen para modo avatar.
  * @property icon (opcional) Icono para modo icon.
- * @property comments (opcional) Comentarios o notas.
- * @property subtitle (opcional) Subtítulo.
- * @property endNote (opcional) Nota al final del elemento.
+ * @property comments (opcional) Comentarios estáticos.
+ * @property commentsConfig (opcional) Configuración de contenido reactivo para comentarios.
+ * @property subtitle (opcional) Subtítulo estático.
+ * @property subtitleConfig (opcional) Configuración de contenido reactivo para subtítulo.
+ * @property endNote (opcional) Nota estática al final del elemento.
+ * @property endNoteConfig (opcional) Configuración de contenido reactivo para la nota final.
  * @property actions (opcional) Acciones disponibles para el elemento.
  * @property color (opcional) Color personalizado.
  * @property lines (opcional) Tipo de líneas ('full', 'inset', 'none').
@@ -43,12 +56,36 @@ export type ItemAction = {
 export interface ItemMetadata {
     token?: string;
     mode: 'justext' | 'subtitule' | 'avatar' | 'icon' | 'route' | 'actionable';
-    text: string;
+    text?: string;
+    textConfig?: {
+        className?: string;
+        key: string;
+        fallback?: string;
+        interpolation?: Record<string, any>;
+    };
     image?: string;
     icon?: string;
     comments?: string;
+    commentsConfig?: {
+        className?: string;
+        key: string;
+        fallback?: string;
+        interpolation?: Record<string, any>;
+    };
     subtitle?: string;
+    subtitleConfig?: {
+        className?: string;
+        key: string;
+        fallback?: string;
+        interpolation?: Record<string, any>;
+    };
     endNote?: string;
+    endNoteConfig?: {
+        className?: string;
+        key: string;
+        fallback?: string;
+        interpolation?: Record<string, any>;
+    };
     actions?: ItemAction[];
     color?: string;
     lines?: 'full' | 'inset' | 'none';
@@ -64,11 +101,13 @@ export interface ItemMetadata {
 }
 /**
  * Metadatos de la lista de elementos.
+ * Ahora soporta contenido reactivo para el título.
  * @property color Color principal de la lista.
  * @property bordered Si la lista tiene borde.
  * @property rounded Si la lista tiene bordes redondeados.
  * @property shadowed Si la lista tiene sombra.
- * @property title Título de la lista.
+ * @property title (opcional) Título estático de la lista.
+ * @property titleConfig (opcional) Configuración de contenido reactivo para el título.
  * @property items Elementos a mostrar en la lista.
  */
 export interface ListMetadata {
@@ -76,6 +115,12 @@ export interface ListMetadata {
     bordered: boolean;
     rounded: boolean;
     shadowed: boolean;
-    title: string;
+    title?: string;
+    titleConfig?: {
+        className?: string;
+        key: string;
+        fallback?: string;
+        interpolation?: Record<string, any>;
+    };
     items: ItemMetadata[];
 }

package/lib/components/types.d.ts

@@ -177,8 +177,10 @@ export interface IconMetada {
 }
 /**
  * Button configuration object.
+ * Supports both static and reactive content.
  * @type {ButtonMetadata}
- * @property text - The button label.
+ * @property text - Static button label (takes precedence over textConfig).
+ * @property textConfig - Reactive content configuration for button text.
  * @property color - The button color (Ionic color string).
  * @property icon - Icon to display (optional).
  * @property state - Button state (enabled, disabled, working, etc.).
@@ -201,8 +203,15 @@ export interface ButtonMetadata {
     color: Color;
     /** Button state */
     state: ComponentState;
-    /** Display text */
-    text: string;
+    /** Static display text (takes precedence over textConfig) */
+    text?: string;
+    /** Reactive content configuration for button text */
+    textConfig?: {
+        className?: string;
+        key: string;
+        fallback?: string;
+        interpolation?: Record<string, any>;
+    };
     /** Associated icon */
     icon?: IconMetada;
     /** Button shape */

package/lib/examples/display-demo.component.d.ts

@@ -0,0 +1,62 @@
+import { OnInit } from '@angular/core';
+import { Observable } from 'rxjs';
+import { DisplayMetadata } from '../components/atoms/display/types';
+import { LanguageSelectorMetadata } from '../components/molecules/language-selector/types';
+import { ContentService } from '../services/content.service';
+import { LangService } from '../services/lang-provider/lang-provider.service';
+import * as i0 from "@angular/core";
+/**
+ * Componente de demostración para val-display con contenido reactivo.
+ * Muestra diferentes patrones de uso y casos de ejemplo.
+ */
+export declare class DisplayDemoComponent implements OnInit {
+    private contentService;
+    private langService;
+    demoTitle$: Observable<string>;
+    languageLabel$: Observable<string>;
+    staticSectionTitle$: Observable<string>;
+    reactiveSectionTitle$: Observable<string>;
+    mixedSectionTitle$: Observable<string>;
+    dynamicSectionTitle$: Observable<string>;
+    analysisTitle$: Observable<string>;
+    reactiveContentTitle$: Observable<string>;
+    interpolationTitle$: Observable<string>;
+    fallbackTitle$: Observable<string>;
+    mixedContentTitle$: Observable<string>;
+    dynamicContentTitle$: Observable<string>;
+    updateButtonText$: Observable<string>;
+    currentLangLabel$: Observable<string>;
+    availableLangsLabel$: Observable<string>;
+    currentLanguage$: Observable<string>;
+    availableLanguages$: Observable<string[]>;
+    private counter;
+    languageSelectorProps: LanguageSelectorMetadata;
+    smallStaticDisplay: DisplayMetadata;
+    mediumStaticDisplay: DisplayMetadata;
+    largeStaticDisplay: DisplayMetadata;
+    xlargeStaticDisplay: DisplayMetadata;
+    primaryDisplay: DisplayMetadata;
+    secondaryDisplay: DisplayMetadata;
+    successDisplay: DisplayMetadata;
+    warningDisplay: DisplayMetadata;
+    dangerDisplay: DisplayMetadata;
+    welcomeDisplay: DisplayMetadata;
+    descriptionDisplay: DisplayMetadata;
+    statusDisplay: DisplayMetadata;
+    userWelcomeDisplay: DisplayMetadata;
+    counterDisplay: DisplayMetadata;
+    missingKeyDisplay: DisplayMetadata;
+    noFallbackDisplay: DisplayMetadata;
+    staticMixedDisplay: DisplayMetadata;
+    reactiveMixedDisplay: DisplayMetadata;
+    dynamicCounterDisplay: DisplayMetadata;
+    constructor(contentService: ContentService, langService: LangService);
+    ngOnInit(): void;
+    private initializeContent;
+    private initializeLanguageState;
+    changeLanguage(language: string): void;
+    onLanguageChange(language: string): void;
+    updateCounter(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DisplayDemoComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DisplayDemoComponent, "val-display-demo", never, {}, {}, never, never, true, never>;
+}