valtech-components 2.0.292 → 2.0.293

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/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,59 @@
+import { OnInit } from '@angular/core';
+import { Observable } from 'rxjs';
+import { DisplayMetadata } from '../components/atoms/display/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;
+    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;
+    updateCounter(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DisplayDemoComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DisplayDemoComponent, "val-display-demo", never, {}, {}, never, never, true, never>;
+}

package/lib/examples/display-simple-example.component.d.ts

@@ -0,0 +1,23 @@
+import { DisplayMetadata } from '../components/atoms/display/types';
+import * as i0 from "@angular/core";
+/**
+ * Ejemplo rápido de uso del componente val-display con contenido reactivo
+ */
+export declare class DisplayExampleComponent {
+    staticTitle: DisplayMetadata;
+    staticSubtitle: DisplayMetadata;
+    reactiveWelcome: DisplayMetadata;
+    reactiveDescription: DisplayMetadata;
+    userGreeting: DisplayMetadata;
+    statusMessage: DisplayMetadata;
+    smallText: DisplayMetadata;
+    mediumText: DisplayMetadata;
+    largeText: DisplayMetadata;
+    xlargeText: DisplayMetadata;
+    primaryText: DisplayMetadata;
+    successText: DisplayMetadata;
+    warningText: DisplayMetadata;
+    dangerText: DisplayMetadata;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DisplayExampleComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DisplayExampleComponent, "app-display-example", never, {}, {}, never, never, true, never>;
+}

package/lib/shared/utils/reactive-content.d.ts

@@ -0,0 +1,109 @@
+/**
+ * Enhanced content utilities for multi-language component support.
+ * Extends the base content utilities to provide specialized helpers for different component patterns.
+ */
+import { Observable } from 'rxjs';
+import { ContentService } from '../../services/content.service';
+/**
+ * Base configuration for reactive content.
+ */
+export interface ReactiveContentConfig {
+    /** Content class name - defaults to '_global' if not provided */
+    className?: string;
+    /** Content key */
+    key: string;
+    /** Fallback text if content is not found */
+    fallback?: string;
+    /** Interpolation data for parameterized content */
+    interpolation?: Record<string, any>;
+}
+/**
+ * Configuration for components that support both static and reactive content.
+ */
+export interface HybridContentConfig {
+    /** Static content - takes precedence over reactive content */
+    content?: string;
+    /** Reactive content configuration */
+    contentConfig?: ReactiveContentConfig;
+}
+/**
+ * Configuration for components with multiple text properties.
+ */
+export interface MultiTextConfig {
+    /** Map of property names to their content configurations */
+    textConfigs: Record<string, ReactiveContentConfig>;
+}
+/**
+ * Enhanced metadata for components that support reactive content.
+ */
+export interface ReactiveTextMetadata extends HybridContentConfig {
+    size?: 'small' | 'medium' | 'large' | 'xlarge';
+    color?: string;
+    bold?: boolean;
+    processLinks?: boolean;
+    linkConfig?: any;
+}
+/**
+ * Helper class for managing reactive content in components.
+ */
+export declare class ComponentContentHelper {
+    private contentService;
+    private defaultClassName?;
+    constructor(contentService: ContentService, defaultClassName?: string);
+    /**
+     * Resolves content based on hybrid configuration (static vs reactive).
+     */
+    resolveContent(config: HybridContentConfig): Observable<string> | string;
+    /**
+     * Resolves multiple text properties for components with multiple text fields.
+     */
+    resolveMultipleTexts(config: MultiTextConfig): Record<string, Observable<string>>;
+    /**
+     * Creates a reactive content configuration for array items.
+     * Useful for list components where items might have translatable text.
+     */
+    createArrayItemConfig(baseKey: string, index: number, fallback?: string): ReactiveContentConfig;
+    /**
+     * Helper for button/action text that commonly needs translation.
+     */
+    createActionConfig(actionKey: 'ok' | 'cancel' | 'save' | 'delete' | 'edit' | 'close' | 'back' | 'next' | 'previous' | 'finish' | 'continue' | 'add' | 'remove' | 'search' | 'filter' | 'sort' | 'refresh', fallback?: string): ReactiveContentConfig;
+}
+/**
+ * Factory function to create content helpers for components.
+ */
+export declare function createComponentContentHelper(contentService: ContentService, componentClassName?: string): ComponentContentHelper;
+/**
+ * Utility function to determine if content should be reactive.
+ */
+export declare function shouldUseReactiveContent(config: HybridContentConfig): boolean;
+/**
+ * Enhanced props factory for components that support reactive content.
+ */
+export declare function createReactiveProps<T extends Record<string, any>>(contentHelper: ComponentContentHelper, staticProps: Omit<T, keyof HybridContentConfig>, contentConfig: HybridContentConfig): T;
+/**
+ * Configuration for list components that mix static and dynamic content.
+ */
+export interface ListComponentConfig<T> {
+    /** Static items that don't need translation */
+    staticItems?: T[];
+    /** Reactive items configuration */
+    reactiveItems?: {
+        /** Base key for the items (e.g., 'navigationLinks') */
+        baseKey: string;
+        /** Number of items expected */
+        count: number;
+        /** Template for creating individual items */
+        itemTemplate: (contentHelper: ComponentContentHelper, index: number) => T;
+    };
+}
+/**
+ * Helper for list components that need to mix static and reactive content.
+ */
+export declare class ListContentHelper<T> {
+    private contentHelper;
+    constructor(contentHelper: ComponentContentHelper);
+    /**
+     * Resolves a list configuration into final items.
+     */
+    resolveListItems(config: ListComponentConfig<T>): T[];
+}

package/package.json

@@ -1,12 +1,14 @@
 {
   "name": "valtech-components",
-  "version": "2.0.292",
+  "version": "2.0.293",
   "peerDependencies": {
     "@angular/common": "^18.0.0",
     "@angular/core": "^18.0.0",
     "@ionic/angular": "^8.0.0",
     "ionicons": "^7.2.1",
-    "rxjs": "~7.8.0"
+    "rxjs": "~7.8.0",
+    "prismjs": "^1.30.0",
+    "swiper": "^11.2.8"
   },
   "dependencies": {
     "@capacitor/browser": "^6.0.3",

package/public-api.d.ts

@@ -81,6 +81,8 @@ export * from './lib/components/templates/simple/simple.component';
 export * from './lib/components/templates/simple/types';
 export * from './lib/examples/comprehensive-link-test.component';
 export * from './lib/examples/custom-content-demo.component';
+export * from './lib/examples/display-demo.component';
+export * from './lib/examples/display-simple-example.component';
 export * from './lib/examples/link-processing-example.component';
 export * from './lib/examples/multi-language-demo.component';
 export * from './lib/services/content.service';
@@ -101,5 +103,6 @@ export * from './lib/shared/pipes/process-links.pipe';
 export * from './lib/shared/utils/content';
 export * from './lib/shared/utils/dom';
 export * from './lib/shared/utils/form-defaults';
+export * from './lib/shared/utils/reactive-content';
 export * from './lib/shared/utils/styles';
 export * from './lib/shared/utils/text';