valtech-components 2.0.276 → 2.0.278

package/README.md

@@ -1,8 +1,8 @@
 <img style="margin-bottom: 20px;" src="https://myvaltech.s3.us-east-2.amazonaws.com/logo-terminal-rounded.png" width="60px" />
 
-# Valtech Components
+# [Valtech Components](https://ui.myvaltech.com/)
 
-Valtech Components is a reusable component library for building modern web and hybrid applications with Angular, Ionic, and Capacitor. It provides a set of UI components, utilities, and styles to accelerate and standardize the development of scalable applications.
+[Valtech Components](https://ui.myvaltech.com/) is a reusable component library for building modern web and hybrid applications with Angular, Ionic, and Capacitor. It provides a set of UI components, utilities, and styles to accelerate and standardize the development of scalable applications.
 
 ## Features
 
@@ -34,13 +34,13 @@ npm install valtech-components
 Import the desired standalone components in your Angular modules or components:
 
 ```typescript
-import { TextInputComponent } from 'valtech-components';
+import { TextComponent } from 'valtech-components';
 
 @Component({
   selector: 'your-component',
   standalone: true,
   imports: [
-    TitleComponent,
+    TextComponent,
   ],
   template: `
     <val-text 
@@ -57,7 +57,141 @@ export class YourComponent {
 }
 ```
 
-See the `src/lib/components/` directory for all available components and their props.
+## 🌍 Reactive Internationalization (i18n)
+
+The library includes a powerful reactive internationalization system with **ContentService** that automatically updates content when the language changes. It supports both **global content** (reusable across components) and **component-specific content**.
+
+### Key Features
+
+- **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
+- **Type-Safe**: Full TypeScript support with autocompletion
+- **Simple API**: Clean, injectable service without complex setup
+
+### Available Global Content
+
+- **Buttons**: `ok`, `cancel`, `save`, `delete`, `edit`, `close`, `back`, `next`, `previous`
+- **Actions**: `add`, `remove`, `search`, `filter`, `sort`, `refresh`  
+- **States**: `loading`, `error`, `success`, `warning`, `info`, `noData`
+- **Forms**: `required`, `optional`, `searchPlaceholder`
+- **Confirmations**: `areYouSure`, `deleteConfirmation`, `unsavedChanges`
+
+### Basic Setup
+
+```typescript
+// main.ts
+import { TextContent, ValtechConfig, ValtechConfigService } from 'valtech-components';
+
+const appContent = new TextContent({
+  es: {
+    welcome: 'Bienvenido',
+    description: 'Esta es la descripción'
+  },
+  en: {
+    welcome: 'Welcome',
+    description: 'This is the description'  
+  }
+});
+
+const valtechConfig: ValtechConfig = {
+  content: { AppComponent: appContent }
+};
+
+bootstrapApplication(AppComponent, {
+  providers: [
+    { provide: ValtechConfigService, useValue: valtechConfig },
+    // ... other providers
+  ]
+});
+```
+
+### Using ContentService (Recommended)
+
+```typescript
+// component.ts
+import { inject } from '@angular/core';
+import { ContentService } from 'valtech-components';
+
+@Component({
+  template: `
+    <!-- Global content (no className needed) -->
+    <button>{{ saveButton$ | async }}</button>
+    <button>{{ cancelButton$ | async }}</button>
+    
+    <!-- Global content with val-text -->
+    <val-text [props]="{
+      contentKey: 'ok',
+      color: 'primary',
+      size: 'large',
+      bold: true
+    }"></val-text>
+
+    <!-- Component-specific content with val-text -->
+    <val-text [props]="{
+      contentKey: 'welcome',
+      contentClass: 'AppComponent',
+      color: 'secondary',
+      size: 'medium',
+      bold: false
+    }"></val-text>
+
+    <!-- Direct observable binding -->
+    <h2>{{ title$ | async }}</h2>
+  `
+})
+export class MyComponent {
+  content = inject(ContentService);
+  componentContent = this.content.forComponent('AppComponent');
+  
+  // Global content (automatically searches in global namespace)
+  saveButton$ = this.content.fromContent({ key: 'save' });
+  cancelButton$ = this.content.fromContent({ key: 'cancel' });
+  
+  // Component-specific content
+  title$ = this.componentContent.get('welcome');
+  
+  // Switch language
+  changeLanguage() {
+    this.content.setLang(this.content.currentLang === 'es' ? 'en' : 'es');
+  }
+
+  constructor() {}
+}
+```
+
+### Content with Variables
+
+```typescript
+// Component with interpolation
+export class UserComponent {
+  content = inject(ContentService);
+  componentContent = this.content.forComponent('UserComponent');
+  
+  greeting$ = this.componentContent.getWithInterpolation('personalizedGreeting', { 
+    name: 'John', 
+    count: 5 
+  });
+  // Results in: "Hello John, you have 5 messages"
+}
+```
+
+See `REACTIVE_CONTENT_GUIDE.md` for complete documentation and migration guide.
+
+## 📖 Documentation & Guides
+
+### Content Management Guides
+
+- **[ContentService Guide](./CONTENT_SERVICE_GUIDE.md)** - Complete API reference with examples and migration guide from old LangService approach
+- **[Global Content Guide](./GLOBAL_CONTENT_GUIDE.md)** - How to use reusable global content for buttons, states, and confirmations  
+- **[Reactive Content Guide](./REACTIVE_CONTENT_GUIDE.md)** - Advanced patterns for reactive content management
+
+### Component Implementation Guides
+
+- **[Implementation Example](./IMPLEMENTATION_EXAMPLE.md)** - Step-by-step component implementation guide
+
+The documentation includes practical examples, best practices, and migration guides to help you get the most out of the Valtech Tools component library.
 
 ## Project Structure
 
@@ -65,10 +199,19 @@ See the `src/lib/components/` directory for all available components and their p
 - `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)
+- `src/lib/services/` – Utility and helper services (e.g., theme, navigation, i18n)
 - `src/lib/shared/` – Shared constants and utility functions
 
+## 📚 Examples
+
+The library includes example components that demonstrate best practices:
+
+- `ReactiveContentExampleComponent` - Demonstrates the reactive content system with component-specific content
+- `GlobalContentExampleComponent` - Comprehensive demonstration of global and mixed content usage
+- Check the `_examples/` directory for more implementation examples
+
 ## License
 
 [MIT](https://opensource.org/license/mit)

package/esm2022/lib/components/_examples/global-content-example-content.mjs

@@ -0,0 +1,23 @@
+/**
+ * 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';
+const globalContentExampleData = {
+    title: {
+        es: 'Ejemplo de Contenido Global',
+        en: 'Global Content Example',
+    },
+    languageLabel: {
+        es: 'Idioma:',
+        en: 'Language:',
+    },
+    description: {
+        es: 'Este ejemplo demuestra cómo usar contenido global y específico del componente de manera conjunta.',
+        en: 'This example shows how to use global and component-specific content together.',
+    },
+};
+export default new TextContent(globalContentExampleData);
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZ2xvYmFsLWNvbnRlbnQtZXhhbXBsZS1jb250ZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvdmFsdGVjaC1jb21wb25lbnRzL3NyYy9saWIvY29tcG9uZW50cy9fZXhhbXBsZXMvZ2xvYmFsLWNvbnRlbnQtZXhhbXBsZS1jb250ZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOzs7OztHQUtHO0FBRUgsT0FBTyxFQUFvQixXQUFXLEVBQUUsTUFBTSxvQ0FBb0MsQ0FBQztBQUVuRixNQUFNLHdCQUF3QixHQUFxQjtJQUNqRCxLQUFLLEVBQUU7UUFDTCxFQUFFLEVBQUUsNkJBQTZCO1FBQ2pDLEVBQUUsRUFBRSx3QkFBd0I7S0FDN0I7SUFDRCxhQUFhLEVBQUU7UUFDYixFQUFFLEVBQUUsU0FBUztRQUNiLEVBQUUsRUFBRSxXQUFXO0tBQ2hCO0lBQ0QsV0FBVyxFQUFFO1FBQ1gsRUFBRSxFQUFFLG1HQUFtRztRQUN2RyxFQUFFLEVBQUUsK0VBQStFO0tBQ3BGO0NBQ0YsQ0FBQztBQUVGLGVBQWUsSUFBSSxXQUFXLENBQUMsd0JBQXdCLENBQUMsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQ29udGVudCBjb25maWd1cmF0aW9uIGZvciB0aGUgR2xvYmFsIENvbnRlbnQgRXhhbXBsZSBjb21wb25lbnQuXG4gKlxuICogVGhpcyBkZW1vbnN0cmF0ZXMgY29tcG9uZW50LXNwZWNpZmljIGNvbnRlbnQgdGhhdCB3b3JrcyBhbG9uZ3NpZGVcbiAqIGdsb2JhbCBjb250ZW50IHRvIGNyZWF0ZSBhIGNvbXByZWhlbnNpdmUgY29udGVudCBtYW5hZ2VtZW50IHN5c3RlbS5cbiAqL1xuXG5pbXBvcnQgeyBMYW5ndWFnZXNDb250ZW50LCBUZXh0Q29udGVudCB9IGZyb20gJy4uLy4uL3NlcnZpY2VzL2xhbmctcHJvdmlkZXIvdHlwZXMnO1xuXG5jb25zdCBnbG9iYWxDb250ZW50RXhhbXBsZURhdGE6IExhbmd1YWdlc0NvbnRlbnQgPSB7XG4gIHRpdGxlOiB7XG4gICAgZXM6ICdFamVtcGxvIGRlIENvbnRlbmlkbyBHbG9iYWwnLFxuICAgIGVuOiAnR2xvYmFsIENvbnRlbnQgRXhhbXBsZScsXG4gIH0sXG4gIGxhbmd1YWdlTGFiZWw6IHtcbiAgICBlczogJ0lkaW9tYTonLFxuICAgIGVuOiAnTGFuZ3VhZ2U6JyxcbiAgfSxcbiAgZGVzY3JpcHRpb246IHtcbiAgICBlczogJ0VzdGUgZWplbXBsbyBkZW11ZXN0cmEgY8OzbW8gdXNhciBjb250ZW5pZG8gZ2xvYmFsIHkgZXNwZWPDrWZpY28gZGVsIGNvbXBvbmVudGUgZGUgbWFuZXJhIGNvbmp1bnRhLicsXG4gICAgZW46ICdUaGlzIGV4YW1wbGUgc2hvd3MgaG93IHRvIHVzZSBnbG9iYWwgYW5kIGNvbXBvbmVudC1zcGVjaWZpYyBjb250ZW50IHRvZ2V0aGVyLicsXG4gIH0sXG59O1xuXG5leHBvcnQgZGVmYXVsdCBuZXcgVGV4dENvbnRlbnQoZ2xvYmFsQ29udGVudEV4YW1wbGVEYXRhKTtcbiJdfQ==