valtech-components 2.0.277 → 2.0.279

package/lib/components/_examples/global-content-example-content.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Content configuration for the Global Content Example component.
+ *
+ * This demonstrates component-specific content that works alongside
+ * global content to create a comprehensive content management system.
+ */
+import { TextContent } from '../../services/lang-provider/types';
+declare const _default: TextContent;
+export default _default;

package/lib/components/_examples/global-content-example.component.d.ts

@@ -0,0 +1,73 @@
+import { TextMetadata } from '../atoms/text/types';
+import * as i0 from "@angular/core";
+/**
+ * Comprehensive example demonstrating global content usage.
+ *
+ * This component shows:
+ * 1. Global button texts
+ * 2. Global state messages
+ * 3. Global confirmations with interpolation
+ * 4. Mixing global and component-specific content
+ * 5. Language switching
+ */
+export declare class GlobalContentExampleComponent {
+    private content;
+    private componentContent;
+    formData: {
+        name: string;
+        email: string;
+        message: string;
+    };
+    actionPerformed: boolean;
+    titleProps: TextMetadata;
+    languageLabel: TextMetadata;
+    componentDescriptionProps: TextMetadata;
+    saveButton$: import("rxjs").Observable<string>;
+    editButton$: import("rxjs").Observable<string>;
+    deleteButton$: import("rxjs").Observable<string>;
+    cancelButton$: import("rxjs").Observable<string>;
+    backButton$: import("rxjs").Observable<string>;
+    nextButton$: import("rxjs").Observable<string>;
+    okButton$: import("rxjs").Observable<string>;
+    closeButton$: import("rxjs").Observable<string>;
+    addButton$: import("rxjs").Observable<string>;
+    removeButton$: import("rxjs").Observable<string>;
+    searchButton$: import("rxjs").Observable<string>;
+    filterButton$: import("rxjs").Observable<string>;
+    sortButton$: import("rxjs").Observable<string>;
+    refreshButton$: import("rxjs").Observable<string>;
+    loadingText$: import("rxjs").Observable<string>;
+    successText$: import("rxjs").Observable<string>;
+    errorText$: import("rxjs").Observable<string>;
+    warningText$: import("rxjs").Observable<string>;
+    infoText$: import("rxjs").Observable<string>;
+    noDataText$: import("rxjs").Observable<string>;
+    requiredText$: import("rxjs").Observable<string>;
+    optionalText$: import("rxjs").Observable<string>;
+    searchPlaceholder$: import("rxjs").Observable<string>;
+    deleteConfirmation$: import("rxjs").Observable<string>;
+    areYouSureText$: import("rxjs").Observable<string>;
+    unsavedChangesText$: import("rxjs").Observable<string>;
+    /**
+     * Set language
+     */
+    setLanguage(lang: 'es' | 'en'): void;
+    /**
+     * Perform an action to demonstrate status messages
+     */
+    performAction(): void;
+    /**
+     * Cancel action
+     */
+    cancelAction(): void;
+    /**
+     * Example of synchronous global content access
+     */
+    getOkTextSync(): string;
+    /**
+     * Example of synchronous global content access using getText
+     */
+    getCancelTextSync(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<GlobalContentExampleComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<GlobalContentExampleComponent, "val-global-content-example", never, {}, {}, never, never, true, never>;
+}

package/lib/components/_examples/reactive-content-example-content.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Example content configuration for demonstrating the reactive content system.
+ *
+ * This file shows how to structure content for components that use the reactive
+ * language system with the new fromContent pattern.
+ */
+import { TextContent } from '../../services/lang-provider/types';
+declare const _default: TextContent;
+export default _default;
+/**
+ * Type-safe content keys for the example component.
+ * Use this interface to ensure type safety when accessing content keys.
+ */
+export interface ExampleComponentContentKeys {
+    title: string;
+    subtitle: string;
+    description: string;
+    greeting: string;
+    welcomeMessage: string;
+    dynamicText: string;
+    buttonText: string;
+    loadingText: string;
+    errorMessage: string;
+    successMessage: string;
+    confirmDialog: string;
+    cancelButton: string;
+    acceptButton: string;
+}
+/**
+ * Utility type for getting content keys with type safety.
+ */
+export type ExampleContentKey = keyof ExampleComponentContentKeys;

package/lib/components/_examples/reactive-content-example.component.d.ts

@@ -0,0 +1,47 @@
+import { OnInit } from '@angular/core';
+import { Observable } from 'rxjs';
+import { ContentService } from '../../services/content.service';
+import { LangOption } from '../../services/lang-provider/types';
+import { TextMetadata } from '../atoms/text/types';
+import * as i0 from "@angular/core";
+export declare class ReactiveContentExampleComponent implements OnInit {
+    content: ContentService;
+    componentContent: {
+        get: (key: string, options?: {
+            fallback?: string;
+            interpolation?: Record<string, string | number>;
+        }) => Observable<string>;
+        getWithInterpolation: (key: string, interpolation: Record<string, string | number>, fallback?: string) => Observable<string>;
+        getMultiple: (keys: string[]) => Observable<Record<string, string>>;
+        getText: (key: string, fallback?: string) => string;
+        hasContent: (key: string) => boolean;
+    };
+    currentLanguage$: Observable<LangOption>;
+    buttonText$: Observable<string>;
+    saveButton$: Observable<string>;
+    cancelButton$: Observable<string>;
+    deleteButton$: Observable<string>;
+    okButton$: Observable<string>;
+    deleteConfirmationText$: Observable<string>;
+    loadingText$: Observable<string>;
+    showConfirmation: boolean;
+    titleProps: TextMetadata;
+    greetingProps: TextMetadata;
+    multipleContent$: Observable<Record<string, string>>;
+    constructor();
+    ngOnInit(): void;
+    /**
+     * Toggle between Spanish and English
+     */
+    toggleLanguage(): void;
+    /**
+     * Show delete confirmation dialog
+     */
+    showDeleteConfirmation(): void;
+    /**
+     * Hide delete confirmation dialog
+     */
+    hideDeleteConfirmation(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ReactiveContentExampleComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ReactiveContentExampleComponent, "val-reactive-content-example", never, {}, {}, never, never, true, never>;
+}

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

@@ -1,18 +1,67 @@
-import { OnInit } from '@angular/core';
-import { TextMetadata } from './types';
+import { OnDestroy, OnInit } from '@angular/core';
+import { Observable } from 'rxjs';
+import { ContentService } from '../../../services/content.service';
+import { TextContentConfig, TextMetadata } from './types';
 import * as i0 from "@angular/core";
-export declare class TextComponent implements OnInit {
+export declare class TextComponent implements OnInit, OnDestroy {
+    private contentService;
     /**
      * Text configuration object.
      * @type {TextMetadata}
-     * @property content - The text to display.
-     * @property color - The text color (Ionic color string).
-     * @property size - The text size ('small' | 'medium' | 'large' | 'xlarge').
-     * @property bold - Whether the text is bold.
+     *
+     * For static content:
+     * @property content - The text to display (takes precedence over reactive content)
+     *
+     * For reactive content:
+     * @property contentKey - The content key to retrieve from language service
+     * @property contentClass - The component class name for content lookup
+     * @property contentFallback - Optional fallback text if content is not found
+     * @property contentInterpolation - Optional values to interpolate into content
+     *
+     * For styling:
+     * @property color - The text color (Ionic color string)
+     * @property size - The text size ('small' | 'medium' | 'large' | 'xlarge')
+     * @property bold - Whether the text is bold
      */
     props: TextMetadata;
-    constructor();
+    /**
+     * Observable that provides the content to display.
+     * This will be either static content or reactive content from the language service.
+     */
+    displayContent$: Observable<string>;
+    private subscription;
+    constructor(contentService: ContentService);
     ngOnInit(): void;
+    ngOnDestroy(): void;
+    /**
+     * Set up the content observable based on the props configuration.
+     * Priority: static content > reactive content with interpolation > reactive content
+     */
+    private setupDisplayContent;
     static ɵfac: i0.ɵɵFactoryDeclaration<TextComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<TextComponent, "val-text", never, { "props": { "alias": "props"; "required": false; }; }, {}, never, never, true, never>;
 }
+/**
+ * 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
+ *   })
+ * };
+ * ```
+ */
+export declare function createTextProps(contentConfig: TextContentConfig, styleConfig?: Partial<Pick<TextMetadata, 'color' | 'size' | 'bold'>>): Partial<TextMetadata>;

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

@@ -2,14 +2,35 @@ import { Color } from '@ionic/core';
 /**
  * Props for val-text component.
  *
- * @property content - The text to display.
- * @property color - The text color (Ionic color string).
- * @property size - The text size ('small' | 'medium' | 'large' | 'xlarge').
- * @property bold - Whether the text is bold.
+ * The component supports both static content and reactive content from the language service.
+ * Use either `content` for static text or `contentKey` + `contentClass` for reactive text.
+ *
+ * @property content - Static text to display (takes precedence over contentKey)
+ * @property contentKey - Key for dynamic content from language service
+ * @property contentClass - Component class name for content lookup (required with contentKey)
+ * @property contentFallback - Fallback text if contentKey is not found
+ * @property contentInterpolation - Values to interpolate into the content string
+ * @property color - The text color (Ionic color string)
+ * @property size - The text size ('small' | 'medium' | 'large' | 'xlarge')
+ * @property bold - Whether the text is bold
  */
 export interface TextMetadata {
     size: 'small' | 'medium' | 'large' | 'xlarge';
     color: Color;
-    content: string;
+    content?: string;
     bold: boolean;
+    contentKey?: string;
+    contentClass?: string;
+    contentFallback?: string;
+    contentInterpolation?: Record<string, string | number>;
+}
+/**
+ * Configuration for reactive content in val-text component.
+ * Use this interface when you only need to specify content-related properties.
+ */
+export interface TextContentConfig {
+    contentKey: string;
+    contentClass: string;
+    contentFallback?: string;
+    contentInterpolation?: Record<string, string | number>;
 }

package/lib/services/content.service.d.ts

@@ -0,0 +1,296 @@
+import { Observable } from 'rxjs';
+import { ContentConfig, InterpolatedContentConfig } from '../shared/utils/content';
+import { LangService } from './lang-provider/lang-provider.service';
+import { LangOption } from './lang-provider/types';
+import * as i0 from "@angular/core";
+/**
+ * ContentService - High-level reactive content management service.
+ *
+ * This service provides a clean, convenient API for reactive content management
+ * without requiring direct interaction with LangService. It acts as a facade
+ * that simplifies the most common content operations.
+ *
+ * @example Basic usage:
+ * ```typescript
+ * @Component({})
+ * export class MyComponent {
+ *   content = inject(ContentService);
+ *
+ *   title$ = this.content.fromContent({
+ *     className: 'MyComponent',
+ *     key: 'title'
+ *   });
+ *
+ *   constructor() {}
+ * }
+ * ```
+ */
+export declare class ContentService {
+    private langService;
+    constructor(langService: LangService);
+    /**
+     * Get current language as an observable stream.
+     * Emits whenever the language changes.
+     */
+    get currentLang$(): Observable<LangOption>;
+    /**
+     * Get current language synchronously.
+     */
+    get currentLang(): LangOption;
+    /**
+     * Set the current language.
+     * This will trigger updates in all reactive content.
+     *
+     * @param lang - The language to set
+     */
+    setLang(lang: LangOption): void;
+    /**
+     * Create a reactive content observable from a content key.
+     * This is the primary method for reactive content with unified support
+     * for both simple content and content with interpolation.
+     *
+     * @param config - Content configuration with optional interpolation. If className is omitted, searches in global content.
+     * @returns Observable that emits the content string and updates on language change
+     *
+     * @example Simple global content:
+     * ```typescript
+     * // Searches in global content (no className needed)
+     * okButton$ = this.content.fromContent({
+     *   key: 'ok',
+     *   fallback: 'OK'
+     * });
+     * ```
+     *
+     * @example Component-specific content:
+     * ```typescript
+     * title$ = this.content.fromContent({
+     *   className: 'HeaderComponent',
+     *   key: 'title',
+     *   fallback: 'Default Title'
+     * });
+     * ```
+     *
+     * @example Content with interpolation:
+     * ```typescript
+     * // Global content with interpolation
+     * confirmation$ = this.content.fromContent({
+     *   key: 'deleteConfirmation',
+     *   interpolation: { itemName: 'archivo' }
+     * });
+     *
+     * // Component content with interpolation
+     * greeting$ = this.content.fromContent({
+     *   className: 'WelcomeComponent',
+     *   key: 'greeting',
+     *   interpolation: { name: 'John', count: 5 }
+     * });
+     * ```
+     */
+    fromContent(config: ContentConfig): Observable<string>;
+    /**
+     * Create a reactive content observable with interpolation support.
+     *
+     * @deprecated Use fromContent() with interpolation property instead.
+     * This method is kept for backward compatibility.
+     *
+     * @param config - Interpolated content configuration. If className is omitted, searches in global content.
+     * @returns Observable that emits the interpolated content string
+     *
+     * @example Migration:
+     * ```typescript
+     * // OLD (deprecated):
+     * greeting$ = this.content.fromContentWithInterpolation({
+     *   className: 'WelcomeComponent',
+     *   key: 'greeting',
+     *   interpolation: { name: 'John', count: 5 }
+     * });
+     *
+     * // NEW (recommended):
+     * greeting$ = this.content.fromContent({
+     *   className: 'WelcomeComponent',
+     *   key: 'greeting',
+     *   interpolation: { name: 'John', count: 5 }
+     * });
+     * ```
+     */
+    fromContentWithInterpolation(config: InterpolatedContentConfig | Omit<InterpolatedContentConfig, 'className'>): Observable<string>;
+    /**
+     * Create multiple reactive content observables at once.
+     * Useful when a component needs several content strings.
+     *
+     * @param className - The component class name
+     * @param keys - Array of content keys to retrieve
+     * @returns Observable that emits an object with all requested content
+     *
+     * @example
+     * ```typescript
+     * content$ = this.content.fromMultipleContent('FormComponent', [
+     *   'title', 'submitButton', 'cancelButton'
+     * ]);
+     *
+     * // In template
+     * <ng-container *ngIf="content$ | async as content">
+     *   <h2>{{ content['title'] }}</h2>
+     *   <button>{{ content['submitButton'] }}</button>
+     *   <button>{{ content['cancelButton'] }}</button>
+     * </ng-container>
+     * ```
+     */
+    fromMultipleContent(className: string, keys: string[]): Observable<Record<string, string>>;
+    /**
+     * Get a single content string synchronously for the current language.
+     *
+     * @param className - The component class name. If omitted, searches in global content.
+     * @param key - The text key
+     * @param fallback - Optional fallback text if key is not found
+     * @returns The text string or fallback
+     *
+     * @example Component-specific:
+     * ```typescript
+     * const title = this.content.getText('MyComponent', 'title');
+     * ```
+     *
+     * @example Global content:
+     * ```typescript
+     * const okText = this.content.getText('ok'); // First parameter is the key
+     * // or more explicitly:
+     * const okText = this.content.getGlobalText('ok');
+     * ```
+     */
+    getText(className: string, key?: string, fallback?: string): string;
+    getText(key: string, fallback?: string): string;
+    /**
+     * Get a single global content string synchronously.
+     * This is a convenience method that's equivalent to getText(key, fallback).
+     *
+     * @param key - The text key
+     * @param fallback - Optional fallback text if key is not found
+     * @returns The text string or fallback
+     *
+     * @example
+     * ```typescript
+     * const okText = this.content.getGlobalText('ok');
+     * const cancelText = this.content.getGlobalText('cancel', 'Cancel');
+     * ```
+     */
+    getGlobalText(key: string, fallback?: string): string;
+    /**
+     * Check if a content key exists for a component.
+     *
+     * @param className - The component class name
+     * @param key - The text key
+     * @returns True if the key exists in any language
+     *
+     * @example
+     * ```typescript
+     * if (this.content.hasContent('MyComponent', 'optionalText')) {
+     *   // Show optional content
+     * }
+     * ```
+     */
+    hasContent(className: string, key: string): boolean;
+    /**
+     * Helper function to interpolate values into a content string.
+     * Useful for processing content strings manually.
+     *
+     * @param content - The content string with placeholders
+     * @param values - Object with values to interpolate
+     * @returns The interpolated string
+     *
+     * @example
+     * ```typescript
+     * const result = this.content.interpolate("Hello {name}!", { name: "World" });
+     * // Returns: "Hello World!"
+     * ```
+     */
+    interpolate(content: string, values?: Record<string, string | number>): string;
+    /**
+     * Create a content helper bound to a specific component class.
+     * This provides a scoped API for components that need multiple content strings.
+     *
+     * @param className - The component class name
+     * @returns Content helper with methods scoped to the class
+     *
+     * @example
+     * ```typescript
+     * export class MyComponent {
+     *   private contentHelper = this.content.createHelper('MyComponent');
+     *
+     *   ngOnInit() {
+     *     this.title$ = this.contentHelper.get('title');
+     *     this.allContent$ = this.contentHelper.getMultiple(['title', 'description']);
+     *   }
+     *
+     *   constructor(private content: ContentService) {}
+     * }
+     * ```
+     */
+    createHelper(className: string): {
+        get(key: string, fallback?: string): Observable<string>;
+        getMultiple(keys: string[]): Observable<Record<string, string>>;
+        getWithInterpolation(key: string, interpolation: Record<string, string | number>, fallback?: string): Observable<string>;
+        getText(key: string, fallback?: string): string;
+        hasContent(key: string): boolean;
+    };
+    /**
+     * Create a scoped content service for a specific component class.
+     * This provides an even more convenient API for components with many content needs.
+     *
+     * @param className - The component class name
+     * @returns Scoped content service
+     *
+     * @example
+     * ```typescript
+     * export class MyComponent {
+     *   private content = inject(ContentService).forComponent('MyComponent');
+     *
+     *   // Simple content
+     *   title$ = this.content.get('title');
+     *
+     *   // Content with interpolation
+     *   greeting$ = this.content.get('greeting', {
+     *     interpolation: { name: 'John' }
+     *   });
+     *
+     *   // Content with fallback
+     *   subtitle$ = this.content.get('subtitle', {
+     *     fallback: 'Default Subtitle'
+     *   });
+     *
+     *   // Multiple texts
+     *   allTexts$ = this.content.getMultiple(['title', 'subtitle', 'description']);
+     *
+     *   constructor() {}
+     * }
+     * ```
+     */
+    forComponent(className: string): {
+        /**
+         * Get a single content string reactively for this component.
+         * Supports optional interpolation.
+         */
+        get: (key: string, options?: {
+            fallback?: string;
+            interpolation?: Record<string, string | number>;
+        }) => Observable<string>;
+        /**
+         * Get content with interpolation for this component.
+         * @deprecated Use get() with interpolation option instead.
+         */
+        getWithInterpolation: (key: string, interpolation: Record<string, string | number>, fallback?: string) => Observable<string>;
+        /**
+         * Get multiple content strings for this component.
+         */
+        getMultiple: (keys: string[]) => Observable<Record<string, string>>;
+        /**
+         * Get a single content string synchronously for this component.
+         */
+        getText: (key: string, fallback?: string) => string;
+        /**
+         * Check if a content key exists for this component.
+         */
+        hasContent: (key: string) => boolean;
+    };
+    static ɵfac: i0.ɵɵFactoryDeclaration<ContentService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<ContentService>;
+}

package/lib/services/lang-provider/content.d.ts

@@ -1,6 +1,13 @@
-import { TextContent } from './types';
+import { LanguagesContent, TextContent } from './types';
 export interface Provider {
     [x: string]: TextContent;
 }
+/**
+ * Global content that can be used across all components.
+ * These are common texts like buttons, actions, states, etc.
+ */
+declare const globalContentData: LanguagesContent;
+declare const GlobalContent: TextContent;
 declare const content: Provider;
 export default content;
+export { content, GlobalContent, globalContentData };