valtech-components 2.0.277 → 2.0.279

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

@@ -1,15 +1,95 @@
-import { BehaviorSubject } from 'rxjs';
-import { Provider } from './content';
-import { LangOption, LanguageText } from './types';
+import { Observable } from 'rxjs';
 import { ValtechConfig } from '../types';
+import { LangOption, LanguageText } from './types';
 import * as i0 from "@angular/core";
+/**
+ * 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.
+ *
+ * @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');
+ * ```
+ */
 export declare class LangService {
-    content: Provider;
-    default: LangOption;
-    selectedLang: BehaviorSubject<LangOption>;
-    config: ValtechConfig;
+    private content;
+    private default;
+    private selectedLang;
+    private config;
     constructor(config: ValtechConfig);
+    /**
+     * Observable that emits the current language whenever it changes.
+     * Use this to react to language changes in components.
+     */
+    get currentLang$(): Observable<LangOption>;
+    /**
+     * Get the current language synchronously.
+     */
+    get currentLang(): LangOption;
+    /**
+     * Set the current language and persist it to local storage.
+     * This will trigger updates in all components subscribed to reactive content.
+     *
+     * @param lang - The language to set
+     */
+    setLang(lang: LangOption): void;
+    /**
+     * Get all text content for a component class (legacy method for compatibility).
+     *
+     * @param className - The component class name
+     * @returns The language text object for the current language
+     * @deprecated Use getText() or getContent() for better type safety
+     */
     Text(className: string): LanguageText;
+    /**
+     * Get a specific text value synchronously for the current language.
+     *
+     * @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: string, key: string, fallback?: string): string;
+    /**
+     * 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.
+     *
+     * @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: string, key: string, fallback?: string): Observable<string>;
+    /**
+     * Get reactive content for multiple keys at once.
+     *
+     * @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: string, keys: string[]): Observable<Record<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
+     */
+    hasContent(className: string, key: string): boolean;
     get Lang(): LangOption;
     set Lang(lang: LangOption);
     static ɵfac: i0.ɵɵFactoryDeclaration<LangService, never>;

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

@@ -0,0 +1,199 @@
+import { Observable } from 'rxjs';
+import { LangService } from '../../services/lang-provider/lang-provider.service';
+/**
+ * Content utilities for reactive text binding in components.
+ *
+ * These utilities provide a convenient way to bind component properties
+ * to language content that automatically updates when the language changes.
+ */
+/**
+ * Unified configuration for content binding with optional interpolation.
+ * Supports both simple content retrieval and content with dynamic values.
+ */
+export interface ContentConfig {
+    /**
+     * The component class name (used for content lookup).
+     * If omitted, searches in global content (_global namespace).
+     */
+    className?: string;
+    /** The content key to retrieve */
+    key: string;
+    /** Optional fallback text if content is not found */
+    fallback?: string;
+    /** Optional object with values to interpolate into the content string */
+    interpolation?: Record<string, string | number>;
+}
+/**
+ * @deprecated Use ContentConfig with interpolation property instead.
+ * This interface is kept for backward compatibility.
+ */
+export interface InterpolatedContentConfig extends ContentConfig {
+    /** Object with values to interpolate into the content string */
+    interpolation?: Record<string, string | number>;
+}
+/**
+ * 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"
+ * ```
+ */
+export declare function fromContent(langService: LangService, 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 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 }
+ * });
+ * ```
+ */
+export declare function fromContentWithInterpolation(langService: LangService, config: InterpolatedContentConfig): Observable<string>;
+/**
+ * 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>
+ * ```
+ */
+export declare function fromMultipleContent(langService: LangService, className: string, keys: string[]): Observable<Record<string, string>>;
+/**
+ * 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!"
+ * ```
+ */
+export declare function interpolateContent(content: string, values?: Record<string, string | number>): string;
+/**
+ * Type-safe content key builder for better IDE support.
+ * This is a utility type that can be used to ensure content keys exist.
+ *
+ * @example
+ * ```typescript
+ * // Define your component's content keys
+ * interface MyComponentContent {
+ *   title: string;
+ *   description: string;
+ *   submitButton: string;
+ * }
+ *
+ * // Use with type safety
+ * const titleKey: ContentKey<MyComponentContent> = 'title'; // ✓ Valid
+ * const invalidKey: ContentKey<MyComponentContent> = 'invalid'; // ✗ Type error
+ * ```
+ */
+export type ContentKey<T> = keyof T & string;
+/**
+ * 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']);
+ *   }
+ * }
+ * ```
+ */
+export declare function createContentHelper(langService: LangService, className: string): {
+    /**
+     * Get a single content string reactively.
+     */
+    get(key: string, fallback?: string): Observable<string>;
+    /**
+     * Get multiple content strings reactively.
+     */
+    getMultiple(keys: string[]): Observable<Record<string, string>>;
+    /**
+     * Get content with interpolation.
+     */
+    getWithInterpolation(key: string, interpolation: Record<string, string | number>, fallback?: string): Observable<string>;
+    /**
+     * Get a single content string synchronously (current language only).
+     */
+    getText(key: string, fallback?: string): string;
+    /**
+     * Check if a content key exists.
+     */
+    hasContent(key: string): boolean;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "valtech-components",
-  "version": "2.0.277",
+  "version": "2.0.279",
   "peerDependencies": {
     "@angular/common": "^18.0.0",
     "@angular/core": "^18.0.0",

package/public-api.d.ts

@@ -37,6 +37,8 @@ export * from './lib/components/molecules/expandable-text/types';
 export * from './lib/components/molecules/file-input/file-input.component';
 export * from './lib/components/molecules/hint/hint.component';
 export * from './lib/components/molecules/hour-input/hour-input.component';
+export * from './lib/components/molecules/layered-card/layered-card.component';
+export * from './lib/components/molecules/layered-card/types';
 export * from './lib/components/molecules/link/link.component';
 export * from './lib/components/molecules/link/types';
 export * from './lib/components/molecules/links-cake/links-cake.component';
@@ -51,14 +53,12 @@ export * from './lib/components/molecules/progress-status/types';
 export * from './lib/components/molecules/prompter/prompter.component';
 export * from './lib/components/molecules/prompter/types';
 export * from './lib/components/molecules/radio-input/radio-input.component';
-export * from './lib/components/molecules/select-search/select-search.component';
 export * from './lib/components/molecules/searchbar/searchbar.component';
 export * from './lib/components/molecules/select-input/select-input.component';
+export * from './lib/components/molecules/select-search/select-search.component';
 export * from './lib/components/molecules/text-input/text-input.component';
 export * from './lib/components/molecules/title-block/title-block.component';
 export * from './lib/components/molecules/title-block/types';
-export * from './lib/components/molecules/layered-card/layered-card.component';
-export * from './lib/components/molecules/layered-card/types';
 export * from './lib/components/organisms/banner/banner.component';
 export * from './lib/components/organisms/banner/types';
 export * from './lib/components/organisms/footer/footer.component';
@@ -79,9 +79,13 @@ export * from './lib/components/organisms/wizard/wizard.component';
 export * from './lib/components/templates/layout/layout.component';
 export * from './lib/components/templates/simple/simple.component';
 export * from './lib/components/templates/simple/types';
+export * from './lib/components/_examples/global-content-example.component';
+export * from './lib/components/_examples/reactive-content-example.component';
+export * from './lib/services/content.service';
 export * from './lib/services/download.service';
 export * from './lib/services/icons.service';
 export * from './lib/services/in-app-browser.service';
+export * from './lib/services/lang-provider/content';
 export * from './lib/services/lang-provider/lang-provider.service';
 export * from './lib/services/lang-provider/types';
 export * from './lib/services/local-storage.service';
@@ -90,6 +94,8 @@ export * from './lib/services/theme.service';
 export * from './lib/services/toast.service';
 export * from './lib/services/types';
 export * from './lib/components/types';
+export * from './lib/shared/utils/content';
 export * from './lib/shared/utils/dom';
-export * from './lib/shared/utils/text';
+export * from './lib/shared/utils/form-defaults';
 export * from './lib/shared/utils/styles';
+export * from './lib/shared/utils/text';