valtech-components 2.0.277 → 2.0.278

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.278",
   "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,6 +79,9 @@ 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';
@@ -90,6 +93,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';