valtech-components 2.0.340 → 2.0.341

package/README.md

@@ -34,15 +34,18 @@ npm install valtech-components
 Import the desired standalone components in your Angular modules or components:
 
 ```typescript
-import { TextComponent } from 'valtech-components';
+import { inject } from '@angular/core';
+import { TextComponent, ButtonComponent, LangService } from 'valtech-components';
 
 @Component({
   selector: 'your-component',
   standalone: true,
   imports: [
     TextComponent,
+    ButtonComponent
   ],
   template: `
+    <!-- Static text -->
     <val-text 
       [props]="{
         content: 'This is a body text.', 
@@ -51,9 +54,38 @@ import { TextComponent } from 'valtech-components';
         size: 'small' 
       }"
     />
-  `})
+    
+    <!-- Reactive text from global content -->
+    <val-text 
+      [props]="{
+        contentKey: 'save',
+        contentClass: '_global',
+        contentFallback: 'Save',
+        color: 'primary', 
+        bold: true, 
+        size: 'medium' 
+      }"
+    />
+    
+    <!-- Button with reactive text -->
+    <val-button
+      [props]="{
+        contentKey: 'cancel',
+        contentClass: '_global',
+        contentFallback: 'Cancel',
+        color: 'secondary',
+        type: 'button'
+      }"
+      (onClick)="handleCancel()"
+    />
+  `
+})
 export class YourComponent {
-
+  langService = inject(LangService);
+  
+  handleCancel() {
+    console.log('Cancel clicked');
+  }
 }
 ```
 
@@ -66,9 +98,11 @@ The library includes a powerful reactive internationalization system with **Lang
 - **Global Content**: Reusable texts like buttons ("Save", "Cancel"), states ("Loading", "Error"), and confirmations
 - **Component-Specific Content**: Custom texts for individual components  
 - **Reactive Updates**: Text automatically updates when language changes
-- **Interpolation Support**: Dynamic values in text strings
+- **Interpolation Support**: Dynamic values in text strings with `{{variable}}` syntax
 - **Type-Safe**: Full TypeScript support with autocompletion
-- **Simple API**: Clean, injectable service without complex setup
+- **Simple API**: Direct LangService injection, no complex setup
+- **Automatic Fallbacks**: Intelligent language fallback with console warnings
+- **Unified System**: Single service for all content needs
 
 ### Available Global Content
 
@@ -77,6 +111,7 @@ The library includes a powerful reactive internationalization system with **Lang
 - **States**: `loading`, `error`, `success`, `warning`, `info`, `noData`
 - **Forms**: `searchPlaceholder`
 - **Confirmations**: `deleteConfirmation`, `unsavedChanges`
+- **General**: `language`, `areYouSure`, `copied`
 
 ### Basic Setup
 
@@ -107,78 +142,177 @@ bootstrapApplication(AppComponent, {
 });
 ```
 
-### Using ContentService (Recommended)
+### Using LangService (Current API)
 
 ```typescript
 // component.ts
 import { inject } from '@angular/core';
-import { ContentService } from 'valtech-components';
+import { LangService } from 'valtech-components';
 
 @Component({
   template: `
-    <!-- Global content (no className needed) -->
-    <button>{{ saveButton$ | async }}</button>
-    <button>{{ cancelButton$ | async }}</button>
-    
-    <!-- Global content with val-text -->
+    <!-- Global content using val-text -->
     <val-text [props]="{
       contentKey: 'ok',
+      contentClass: '_global',
       color: 'primary',
       size: 'large',
       bold: true
     }"></val-text>
 
-    <!-- Component-specific content with val-text -->
+    <!-- Component-specific content using val-text -->
     <val-text [props]="{
       contentKey: 'welcome',
       contentClass: 'AppComponent',
+      contentFallback: 'Welcome',
       color: 'secondary',
-      size: 'medium',
-      bold: false
+      size: 'medium'
     }"></val-text>
 
     <!-- Direct observable binding -->
     <h2>{{ title$ | async }}</h2>
+    
+    <!-- With interpolation -->
+    <p>{{ greeting$ | async }}</p>
   `
 })
 export class MyComponent {
-  content = inject(ContentService);
-  componentContent = this.content.forComponent('AppComponent');
+  langService = inject(LangService);
   
-  // Global content (automatically searches in global namespace)
-  saveButton$ = this.content.fromContent({ key: 'save' });
-  cancelButton$ = this.content.fromContent({ key: 'cancel' });
+  // Global content 
+  saveButton$ = this.langService.getContent('_global', 'save', 'Save');
+  cancelButton$ = this.langService.getContent('_global', 'cancel', 'Cancel');
   
   // Component-specific content
-  title$ = this.componentContent.get('welcome');
+  title$ = this.langService.getContent('AppComponent', 'welcome', 'Welcome');
+  
+  // Content with interpolation
+  greeting$ = this.langService.getContentWithInterpolation(
+    'AppComponent', 
+    'personalizedGreeting',
+    { name: 'John', count: 5 },
+    'Hello!'
+  );
   
   // Switch language
   changeLanguage() {
-    this.content.setLang(this.content.currentLang === 'es' ? 'en' : 'es');
+    const currentLang = this.langService.currentLang;
+    this.langService.setLang(currentLang === 'es' ? 'en' : 'es');
   }
 
   constructor() {}
 }
 ```
 
-### Content with Variables
+### Content with Variables (Interpolation)
 
 ```typescript
-// Component with interpolation
+// Component with interpolation using the new API
 export class UserComponent {
-  content = inject(ContentService);
-  componentContent = this.content.forComponent('UserComponent');
+  langService = inject(LangService);
   
-  greeting$ = this.componentContent.get('personalizedGreeting', { 
-    interpolation: { 
-      name: 'John', 
-      count: 5, 
-    }
-  });
+  // Method 1: Direct service usage
+  greeting$ = this.langService.getContentWithInterpolation(
+    'UserComponent',
+    'personalizedGreeting', 
+    { name: 'John', count: 5 },
+    'Hello!'
+  );
   // Results in: "Hello John, you have 5 messages"
+  
+  // Method 2: Using val-text component
+  // In template:
+  // <val-text [props]="{
+  //   contentKey: 'personalizedGreeting',
+  //   contentClass: 'UserComponent',
+  //   contentInterpolation: { name: 'John', count: 5 },
+  //   contentFallback: 'Hello!'
+  // }"></val-text>
+}
+```
+
+### Helper Functions
+
+```typescript
+// Using utility helpers from simple-content
+import { 
+  fromContentWithInterpolation,
+  interpolateStaticContent,
+  shouldUseReactiveContent 
+} from 'valtech-components';
+
+export class AdvancedComponent {
+  langService = inject(LangService);
+  
+  // Using helper for reactive content with interpolation
+  message$ = fromContentWithInterpolation(this.langService, {
+    contentClass: 'MyComponent',
+    contentKey: 'message',
+    contentInterpolation: { count: 10 }
+  });
+  
+  // Static content with interpolation
+  processStaticText() {
+    const text = interpolateStaticContent(
+      'You have {{count}} items',
+      { count: 5 }
+    );
+    // Results in: "You have 5 items"
+  }
 }
 ```
 
+### Migration Guide
+
+If you're migrating from the old `ContentService` API, here's a quick reference:
+
+```typescript
+// OLD API (ContentService - removed)
+content = inject(ContentService);
+text$ = this.content.fromContent({ key: 'save' });
+
+// NEW API (LangService - current)
+langService = inject(LangService);
+text$ = this.langService.getContent('_global', 'save', 'Save');
+
+// OLD API (with interpolation)
+text$ = this.content.fromContentWithInterpolation({
+  key: 'greeting',
+  interpolation: { name: 'John' }
+});
+
+// NEW API (with interpolation)
+text$ = this.langService.getContentWithInterpolation(
+  '_global',
+  'greeting',
+  { name: 'John' },
+  'Hello!'
+);
+```
+
+### Available Utility Functions
+
+```typescript
+import { 
+  shouldUseReactiveContent,
+  extractContentConfig,
+  interpolateStaticContent,
+  fromContentWithInterpolation
+} from 'valtech-components';
+
+// Check if metadata should use reactive content
+const useReactive = shouldUseReactiveContent(metadata);
+
+// Extract configuration from metadata
+const config = extractContentConfig(metadata);
+
+// Interpolate static strings
+const result = interpolateStaticContent('Hello {{name}}!', { name: 'World' });
+
+// Helper for reactive content with interpolation
+const content$ = fromContentWithInterpolation(langService, metadata);
+```
+
 ## 🔗 Automatic Link Processing
 
 The library now includes automatic link detection and processing capabilities. Convert URLs and internal routes in text content into clickable links automatically:
@@ -246,11 +380,19 @@ processText(text: string) {
 - `src/lib/components/molecules/` – Compound components (e.g., input groups, cards)
 - `src/lib/components/organisms/` – Complex components (e.g., forms, toolbars)
 - `src/lib/components/templates/` – Page templates and layouts
-- `src/lib/components/_examples/` – Example components demonstrating features
 - `src/lib/components/styles/` – Shared SCSS variables, mixins, and utilities
-- `src/lib/services/` – Utility and helper services (e.g., theme, navigation, i18n)
-- `src/lib/shared/` – Shared constants and utility functions
-
+- `src/lib/services/` – Core services:
+  - `lang-provider/` – **LangService** for reactive internationalization
+  - `theme.service.ts` – Theme management
+  - `navigation.service.ts` – Routing utilities
+  - `download.service.ts` – File download helpers
+  - `icons.service.ts` – Icon management
+  - `toast.service.ts` – Toast notifications
+- `src/lib/shared/` – Shared utilities:
+  - `utils/simple-content.ts` – Content system helpers and interfaces
+  - `utils/content.ts` – Legacy content utilities (for backward compatibility)
+  - `pipes/process-links.pipe.ts` – Automatic link processing
+  - `constants/` – Shared constants
 
 ## License
 

package/esm2022/lib/components/molecules/info/info.component.mjs

@@ -12,7 +12,7 @@ export class InfoComponent {
         this.icon = inject(IconService);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: InfoComponent, isStandalone: true, selector: "info", inputs: { props: "props" }, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: InfoComponent, isStandalone: true, selector: "val-info", inputs: { props: "props" }, ngImport: i0, template: `
     @if (props.image) {
       <val-image style="display: contents;" [props]="props.image" />
     }
@@ -29,7 +29,7 @@ export class InfoComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InfoComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'info', standalone: true, imports: [CommonModule, LinkComponent, TitleBlockComponent, ImageComponent, ButtonGroupComponent], template: `
+            args: [{ selector: 'val-info', standalone: true, imports: [CommonModule, LinkComponent, TitleBlockComponent, ImageComponent, ButtonGroupComponent], template: `
     @if (props.image) {
       <val-image style="display: contents;" [props]="props.image" />
     }
@@ -46,4 +46,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
         }], propDecorators: { props: [{
                 type: Input
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5mby5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy92YWx0ZWNoLWNvbXBvbmVudHMvc3JjL2xpYi9jb21wb25lbnRzL21vbGVjdWxlcy9pbmZvL2luZm8uY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLCtEQUErRDtBQUMvRCxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLEVBQUUsS0FBSyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ3pELE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQztBQUN2RCxPQUFPLEVBQUUsbUJBQW1CLEVBQUUsTUFBTSxzQ0FBc0MsQ0FBQztBQUMzRSxPQUFPLEVBQUUsY0FBYyxFQUFFLE1BQU0sbUNBQW1DLENBQUM7QUFDbkUsT0FBTyxFQUFFLG9CQUFvQixFQUFFLE1BQU0sd0NBQXdDLENBQUM7QUFDOUUsT0FBTyxFQUFFLFdBQVcsRUFBRSxNQUFNLGlDQUFpQyxDQUFDOztBQXVCOUQsTUFBTSxPQUFPLGFBQWE7SUFwQjFCO1FBcUJFLFNBQUksR0FBRyxNQUFNLENBQUMsV0FBVyxDQUFDLENBQUM7S0FHNUI7K0dBSlksYUFBYTttR0FBYixhQUFhLDRGQWhCZDs7Ozs7Ozs7Ozs7OztHQWFULHlFQWRTLFlBQVksK0JBQUUsYUFBYSw4RkFBRSxtQkFBbUIsK0VBQUUsY0FBYyx5RUFBRSxvQkFBb0I7OzRGQWlCckYsYUFBYTtrQkFwQnpCLFNBQVM7K0JBQ0UsTUFBTSxjQUNKLElBQUksV0FDUCxDQUFDLFlBQVksRUFBRSxhQUFhLEVBQUUsbUJBQW1CLEVBQUUsY0FBYyxFQUFFLG9CQUFvQixDQUFDLFlBQ3ZGOzs7Ozs7Ozs7Ozs7O0dBYVQ7OEJBTVEsS0FBSztzQkFBYixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiLy8gc3JjL2FwcC9sYXlvdXQvbGF5b3V0LmNvbXBvbmVudC50cyAoc29sbyBsYSBwYXJ0ZSBkZSBzdHlsZXMpXG5pbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHsgQ29tcG9uZW50LCBpbmplY3QsIElucHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBMaW5rQ29tcG9uZW50IH0gZnJvbSAnLi4vbGluay9saW5rLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBUaXRsZUJsb2NrQ29tcG9uZW50IH0gZnJvbSAnLi4vdGl0bGUtYmxvY2svdGl0bGUtYmxvY2suY29tcG9uZW50JztcbmltcG9ydCB7IEltYWdlQ29tcG9uZW50IH0gZnJvbSAnLi4vLi4vYXRvbXMvaW1hZ2UvaW1hZ2UuY29tcG9uZW50JztcbmltcG9ydCB7IEJ1dHRvbkdyb3VwQ29tcG9uZW50IH0gZnJvbSAnLi4vYnV0dG9uLWdyb3VwL2J1dHRvbi1ncm91cC5jb21wb25lbnQnO1xuaW1wb3J0IHsgSWNvblNlcnZpY2UgfSBmcm9tICcuLi8uLi8uLi9zZXJ2aWNlcy9pY29ucy5zZXJ2aWNlJztcbmltcG9ydCB7IEluZm9NZXRhZGF0YSB9IGZyb20gJy4vdHlwZXMnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdpbmZvJyxcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgaW1wb3J0czogW0NvbW1vbk1vZHVsZSwgTGlua0NvbXBvbmVudCwgVGl0bGVCbG9ja0NvbXBvbmVudCwgSW1hZ2VDb21wb25lbnQsIEJ1dHRvbkdyb3VwQ29tcG9uZW50XSxcbiAgdGVtcGxhdGU6IGBcbiAgICBAaWYgKHByb3BzLmltYWdlKSB7XG4gICAgICA8dmFsLWltYWdlIHN0eWxlPVwiZGlzcGxheTogY29udGVudHM7XCIgW3Byb3BzXT1cInByb3BzLmltYWdlXCIgLz5cbiAgICB9XG4gICAgPHZhbC10aXRsZS1ibG9jayBzdHlsZT1cImRpc3BsYXk6IGJsb2NrO21hcmdpbi10b3A6IDE2cHg7XCIgW3Byb3BzXT1cInByb3BzLnRpdGxlXCIgLz5cblxuICAgIEBpZiAocHJvcHMubGluaykge1xuICAgICAgPHZhbC1saW5rIFtwcm9wc109XCJwcm9wcy5saW5rXCIgLz5cbiAgICB9XG5cbiAgICBAaWYgKHByb3BzLmFjdGlvbnMpIHtcbiAgICAgIDx2YWwtYnV0dG9uLWdyb3VwIFtwcm9wc109XCJwcm9wcy5hY3Rpb25zXCIgLz5cbiAgICB9XG4gIGAsXG4gIHN0eWxlczogYGAsXG59KVxuZXhwb3J0IGNsYXNzIEluZm9Db21wb25lbnQge1xuICBpY29uID0gaW5qZWN0KEljb25TZXJ2aWNlKTtcblxuICBASW5wdXQoKSBwcm9wczogSW5mb01ldGFkYXRhO1xufVxuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5mby5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy92YWx0ZWNoLWNvbXBvbmVudHMvc3JjL2xpYi9jb21wb25lbnRzL21vbGVjdWxlcy9pbmZvL2luZm8uY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLCtEQUErRDtBQUMvRCxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLEVBQUUsS0FBSyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ3pELE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQztBQUN2RCxPQUFPLEVBQUUsbUJBQW1CLEVBQUUsTUFBTSxzQ0FBc0MsQ0FBQztBQUMzRSxPQUFPLEVBQUUsY0FBYyxFQUFFLE1BQU0sbUNBQW1DLENBQUM7QUFDbkUsT0FBTyxFQUFFLG9CQUFvQixFQUFFLE1BQU0sd0NBQXdDLENBQUM7QUFDOUUsT0FBTyxFQUFFLFdBQVcsRUFBRSxNQUFNLGlDQUFpQyxDQUFDOztBQXVCOUQsTUFBTSxPQUFPLGFBQWE7SUFwQjFCO1FBcUJFLFNBQUksR0FBRyxNQUFNLENBQUMsV0FBVyxDQUFDLENBQUM7S0FHNUI7K0dBSlksYUFBYTttR0FBYixhQUFhLGdHQWhCZDs7Ozs7Ozs7Ozs7OztHQWFULHlFQWRTLFlBQVksK0JBQUUsYUFBYSw4RkFBRSxtQkFBbUIsK0VBQUUsY0FBYyx5RUFBRSxvQkFBb0I7OzRGQWlCckYsYUFBYTtrQkFwQnpCLFNBQVM7K0JBQ0UsVUFBVSxjQUNSLElBQUksV0FDUCxDQUFDLFlBQVksRUFBRSxhQUFhLEVBQUUsbUJBQW1CLEVBQUUsY0FBYyxFQUFFLG9CQUFvQixDQUFDLFlBQ3ZGOzs7Ozs7Ozs7Ozs7O0dBYVQ7OEJBTVEsS0FBSztzQkFBYixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiLy8gc3JjL2FwcC9sYXlvdXQvbGF5b3V0LmNvbXBvbmVudC50cyAoc29sbyBsYSBwYXJ0ZSBkZSBzdHlsZXMpXG5pbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHsgQ29tcG9uZW50LCBpbmplY3QsIElucHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBMaW5rQ29tcG9uZW50IH0gZnJvbSAnLi4vbGluay9saW5rLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBUaXRsZUJsb2NrQ29tcG9uZW50IH0gZnJvbSAnLi4vdGl0bGUtYmxvY2svdGl0bGUtYmxvY2suY29tcG9uZW50JztcbmltcG9ydCB7IEltYWdlQ29tcG9uZW50IH0gZnJvbSAnLi4vLi4vYXRvbXMvaW1hZ2UvaW1hZ2UuY29tcG9uZW50JztcbmltcG9ydCB7IEJ1dHRvbkdyb3VwQ29tcG9uZW50IH0gZnJvbSAnLi4vYnV0dG9uLWdyb3VwL2J1dHRvbi1ncm91cC5jb21wb25lbnQnO1xuaW1wb3J0IHsgSWNvblNlcnZpY2UgfSBmcm9tICcuLi8uLi8uLi9zZXJ2aWNlcy9pY29ucy5zZXJ2aWNlJztcbmltcG9ydCB7IEluZm9NZXRhZGF0YSB9IGZyb20gJy4vdHlwZXMnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICd2YWwtaW5mbycsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIGltcG9ydHM6IFtDb21tb25Nb2R1bGUsIExpbmtDb21wb25lbnQsIFRpdGxlQmxvY2tDb21wb25lbnQsIEltYWdlQ29tcG9uZW50LCBCdXR0b25Hcm91cENvbXBvbmVudF0sXG4gIHRlbXBsYXRlOiBgXG4gICAgQGlmIChwcm9wcy5pbWFnZSkge1xuICAgICAgPHZhbC1pbWFnZSBzdHlsZT1cImRpc3BsYXk6IGNvbnRlbnRzO1wiIFtwcm9wc109XCJwcm9wcy5pbWFnZVwiIC8+XG4gICAgfVxuICAgIDx2YWwtdGl0bGUtYmxvY2sgc3R5bGU9XCJkaXNwbGF5OiBibG9jazttYXJnaW4tdG9wOiAxNnB4O1wiIFtwcm9wc109XCJwcm9wcy50aXRsZVwiIC8+XG5cbiAgICBAaWYgKHByb3BzLmxpbmspIHtcbiAgICAgIDx2YWwtbGluayBbcHJvcHNdPVwicHJvcHMubGlua1wiIC8+XG4gICAgfVxuXG4gICAgQGlmIChwcm9wcy5hY3Rpb25zKSB7XG4gICAgICA8dmFsLWJ1dHRvbi1ncm91cCBbcHJvcHNdPVwicHJvcHMuYWN0aW9uc1wiIC8+XG4gICAgfVxuICBgLFxuICBzdHlsZXM6IGBgLFxufSlcbmV4cG9ydCBjbGFzcyBJbmZvQ29tcG9uZW50IHtcbiAgaWNvbiA9IGluamVjdChJY29uU2VydmljZSk7XG5cbiAgQElucHV0KCkgcHJvcHM6IEluZm9NZXRhZGF0YTtcbn1cbiJdfQ==

package/fesm2022/valtech-components.mjs

@@ -5739,7 +5739,7 @@ class InfoComponent {
         this.icon = inject(IconService);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: InfoComponent, isStandalone: true, selector: "info", inputs: { props: "props" }, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: InfoComponent, isStandalone: true, selector: "val-info", inputs: { props: "props" }, ngImport: i0, template: `
     @if (props.image) {
       <val-image style="display: contents;" [props]="props.image" />
     }
@@ -5756,7 +5756,7 @@ class InfoComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InfoComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'info', standalone: true, imports: [CommonModule, LinkComponent, TitleBlockComponent, ImageComponent, ButtonGroupComponent], template: `
+            args: [{ selector: 'val-info', standalone: true, imports: [CommonModule, LinkComponent, TitleBlockComponent, ImageComponent, ButtonGroupComponent], template: `
     @if (props.image) {
       <val-image style="display: contents;" [props]="props.image" />
     }