From a9451fec66c1e77e3c850655ef91d7da9f42eff3 Mon Sep 17 00:00:00 2001
From: Syed Ameen <syedameenabrar786@gmail.com>
Date: Thu, 11 Jul 2024 14:40:29 +0530
Subject: [PATCH 1/5] event emitter for dynamic select

---
 .../main-form/main-form.component.html        | 36 +++++++++++++------
 .../main-form/main-form.component.ts          | 18 ++++++++--
 2 files changed, 42 insertions(+), 12 deletions(-)

diff --git a/projects/dynamic-form/src/lib/components/main-form/main-form.component.html b/projects/dynamic-form/src/lib/components/main-form/main-form.component.html
index e082ef7..cf476b0 100644
--- a/projects/dynamic-form/src/lib/components/main-form/main-form.component.html
+++ b/projects/dynamic-form/src/lib/components/main-form/main-form.component.html
@@ -38,16 +38,32 @@
     <mat-form-field *ngIf="control?.type === 'select'" floatLabel="always">
       <mat-label *ngIf="control.label">{{ control?.label }}</mat-label>
       <mat-select
-        [value]="control?.value"
-        [placeholder]="control?.placeHolder"
-        [formControlName]="control?.name"
-        [required]="control?.validators?.required"
-        [compareWith]="compareWith"
-      >
-        <mat-option *ngFor="let option of control?.options" [value]="option">
-          {{ option.label }}
-        </mat-option>
-      </mat-select>
+      [value]="control?.value"
+      [placeholder]="control?.placeHolder"
+      [formControlName]="control?.name"
+      [required]="control?.validators?.required"
+      [compareWith]="compareWith"
+      (selectionChange)="onSelectChange($event, control)"
+      (focus)="onSelectFocus(control?.name)"
+      *ngIf="shouldEmitEvents()"
+    >
+      <mat-option *ngFor="let option of control?.options" [value]="option">
+        {{ option.label }}
+      </mat-option>
+    </mat-select>
+    <mat-select
+      [value]="control?.value"
+      [placeholder]="control?.placeHolder"
+      [formControlName]="control?.name"
+      [required]="control?.validators?.required"
+      [compareWith]="compareWith"
+      *ngIf="!shouldEmitEvents()"
+    >
+      <mat-option *ngFor="let option of control?.options" [value]="option">
+        {{ option.label }}
+      </mat-option>
+    </mat-select>
+    
     </mat-form-field>
 
     <mat-form-field *ngIf="control?.type === 'chip'" floatLabel="always">
diff --git a/projects/dynamic-form/src/lib/components/main-form/main-form.component.ts b/projects/dynamic-form/src/lib/components/main-form/main-form.component.ts
index 8d6071d..a607d21 100644
--- a/projects/dynamic-form/src/lib/components/main-form/main-form.component.ts
+++ b/projects/dynamic-form/src/lib/components/main-form/main-form.component.ts
@@ -1,4 +1,4 @@
-import { Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
+import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { ThemePalette } from '@angular/material/core';
 import { MatDatepicker } from '@angular/material/datepicker';
@@ -63,9 +63,12 @@ export interface DynamicFormData {
 export class MainFormComponent implements OnInit {
   @Input() formJson: any;
   @Input() classFlex: any ;
+  @Output() onChange = new EventEmitter<{ event: any, control: any }>();
+  @Output() onFocus = new EventEmitter<string>();
+
   myForm: FormGroup = this.fb.group({});
   resources:any;
-  @ViewChild('subform') subform: MainFormComponent | undefined
+  @ViewChild('subform') subform: MainFormComponent | undefined;
 
   public showSpinners = true;
   public showSeconds = false;
@@ -202,4 +205,15 @@ constructor(private fb: FormBuilder,public dialog: MatDialog) {}
     });
   }
 
+  onSelectChange(event: any, control: any) {
+    this.onChange.emit({event, control});
+  }
+
+  onSelectFocus(controlName: any) {
+    this.onFocus.emit(controlName);
+  }
+
+  shouldEmitEvents(): boolean {
+    return this.onChange.length > 0 || this.onFocus.length > 0;
+  }
 }

From e1093372d0c2993b2d7bca45baa21b5a047bb67f Mon Sep 17 00:00:00 2001
From: Syed Ameen <syedameenabrar786@gmail.com>
Date: Tue, 3 Sep 2024 12:03:25 +0530
Subject: [PATCH 2/5] emit value for select data

---
 projects/dynamic-form/package.json               |  4 ++--
 .../main-form/main-form.component.html           | 16 +---------------
 .../components/main-form/main-form.component.ts  |  4 ----
 .../src/app/app.compnent.spec.data.ts            | 12 +++++++++---
 4 files changed, 12 insertions(+), 24 deletions(-)

diff --git a/projects/dynamic-form/package.json b/projects/dynamic-form/package.json
index 0f1ec0a..bce3232 100644
--- a/projects/dynamic-form/package.json
+++ b/projects/dynamic-form/package.json
@@ -1,6 +1,6 @@
 {
-  "name": "@elevate/dynamic-form",
-  "version": "0.0.1",
+  "name": "elevate-dynamic-form",
+  "version": "0.0.13",
   "peerDependencies": {
     "@angular/common": "^17.3.4",
     "@angular/core": "^17.3.4",
diff --git a/projects/dynamic-form/src/lib/components/main-form/main-form.component.html b/projects/dynamic-form/src/lib/components/main-form/main-form.component.html
index cf476b0..f1f8e1a 100644
--- a/projects/dynamic-form/src/lib/components/main-form/main-form.component.html
+++ b/projects/dynamic-form/src/lib/components/main-form/main-form.component.html
@@ -44,21 +44,7 @@
       [required]="control?.validators?.required"
       [compareWith]="compareWith"
       (selectionChange)="onSelectChange($event, control)"
-      (focus)="onSelectFocus(control?.name)"
-      *ngIf="shouldEmitEvents()"
-    >
-      <mat-option *ngFor="let option of control?.options" [value]="option">
-        {{ option.label }}
-      </mat-option>
-    </mat-select>
-    <mat-select
-      [value]="control?.value"
-      [placeholder]="control?.placeHolder"
-      [formControlName]="control?.name"
-      [required]="control?.validators?.required"
-      [compareWith]="compareWith"
-      *ngIf="!shouldEmitEvents()"
-    >
+      (focus)="onSelectFocus(control?.name)">
       <mat-option *ngFor="let option of control?.options" [value]="option">
         {{ option.label }}
       </mat-option>
diff --git a/projects/dynamic-form/src/lib/components/main-form/main-form.component.ts b/projects/dynamic-form/src/lib/components/main-form/main-form.component.ts
index a607d21..221fce1 100644
--- a/projects/dynamic-form/src/lib/components/main-form/main-form.component.ts
+++ b/projects/dynamic-form/src/lib/components/main-form/main-form.component.ts
@@ -212,8 +212,4 @@ constructor(private fb: FormBuilder,public dialog: MatDialog) {}
   onSelectFocus(controlName: any) {
     this.onFocus.emit(controlName);
   }
-
-  shouldEmitEvents(): boolean {
-    return this.onChange.length > 0 || this.onFocus.length > 0;
-  }
 }
diff --git a/projects/form-demo-app/src/app/app.compnent.spec.data.ts b/projects/form-demo-app/src/app/app.compnent.spec.data.ts
index 6b61ce7..ab9af59 100644
--- a/projects/form-demo-app/src/app/app.compnent.spec.data.ts
+++ b/projects/form-demo-app/src/app/app.compnent.spec.data.ts
@@ -87,7 +87,14 @@ export const sampleData = [
     {
         "name": "recommended_for",
         "label": "Recommended for",
-        "value":"",
+        "value": [{
+            "label": "Block education officer",
+            "value": "beo"
+        },
+        {
+            "label": "Cluster officials",
+            "value": "co"
+        }],
         "type": "chip",
         "disabled": false,
         "errorMessage": {
@@ -124,8 +131,7 @@ export const sampleData = [
             "addNewPopupSubHeader": "Who is this session for?",
             "showSelectAll": true,
             "showAddOption": true
-        },
-        "multiple": true
+        }
     },
     {
         "name": "range_value",

From 8648323df6774adaf39cf3f814131c519d867380 Mon Sep 17 00:00:00 2001
From: Syed Ameen <syedameenabrar786@gmail.com>
Date: Fri, 17 Jan 2025 13:04:46 +0530
Subject: [PATCH 3/5] multi language selection transtation

---
 .../main-form/main-form.component.html        | 54 +++++++++--------
 .../main-form/main-form.component.ts          |  1 +
 .../src/lib/dynamic-form.module.ts            |  7 ++-
 .../lib/pipes/language-translate.pipe.spec.ts |  8 +++
 .../src/lib/pipes/language-translate.pipe.ts  | 22 +++++++
 projects/dynamic-form/src/public-api.ts       |  3 +-
 .../src/app/app.compnent.spec.data.ts         | 58 +++++++++----------
 .../form-demo-app/src/app/app.component.html  |  2 +-
 .../form-demo-app/src/app/app.component.ts    |  3 +-
 9 files changed, 93 insertions(+), 65 deletions(-)
 create mode 100644 projects/dynamic-form/src/lib/pipes/language-translate.pipe.spec.ts
 create mode 100644 projects/dynamic-form/src/lib/pipes/language-translate.pipe.ts

diff --git a/projects/dynamic-form/src/lib/components/main-form/main-form.component.html b/projects/dynamic-form/src/lib/components/main-form/main-form.component.html
index f1f8e1a..e841ee6 100644
--- a/projects/dynamic-form/src/lib/components/main-form/main-form.component.html
+++ b/projects/dynamic-form/src/lib/components/main-form/main-form.component.html
@@ -4,10 +4,10 @@
       *ngIf="control?.type === 'text' || control?.type === 'password'"
       floatLabel="always"
     >
-      <mat-label *ngIf="control.label">{{ control?.label }}</mat-label>
+      <mat-label *ngIf="control.label">{{ control?.label | languageTranslate: language }}</mat-label>
       <input
         matInput
-        [placeholder]="control?.placeHolder"
+        [placeholder]="control?.placeHolder | languageTranslate: language"
         [type]="control?.type"
         [formControlName]="control?.name"
         [maxlength]="control?.validators.maxLength"
@@ -24,11 +24,11 @@
     </mat-form-field>
 
     <mat-form-field *ngIf="control?.type === 'textarea'" floatLabel="always" >
-      <mat-label *ngIf="control.label">{{ control?.label }}</mat-label>
+      <mat-label *ngIf="control.label">{{ control?.label | languageTranslate: language }}</mat-label>
       <textarea
         matInput
         [formControlName]="control?.name"
-        [placeholder]="control?.placeHolder"
+        [placeholder]="control?.placeHolder | languageTranslate: language"
         [maxlength]="control?.validators?.maxLength"
         [required]="control?.validators?.required"
       >
@@ -36,24 +36,22 @@
     </mat-form-field>
 
     <mat-form-field *ngIf="control?.type === 'select'" floatLabel="always">
-      <mat-label *ngIf="control.label">{{ control?.label }}</mat-label>
+      <mat-label *ngIf="control.label">{{ control?.label | languageTranslate: language }}</mat-label>
       <mat-select
-      [value]="control?.value"
-      [placeholder]="control?.placeHolder"
-      [formControlName]="control?.name"
-      [required]="control?.validators?.required"
-      [compareWith]="compareWith"
-      (selectionChange)="onSelectChange($event, control)"
-      (focus)="onSelectFocus(control?.name)">
-      <mat-option *ngFor="let option of control?.options" [value]="option">
-        {{ option.label }}
-      </mat-option>
-    </mat-select>
-    
+        [value]="control?.value"
+        [placeholder]="control?.placeHolder | languageTranslate: language"
+        [formControlName]="control?.name"
+        [required]="control?.validators?.required"
+        [compareWith]="compareWith"
+      >
+        <mat-option *ngFor="let option of control?.options" [value]="option">
+          {{ option.label }}
+        </mat-option>
+      </mat-select>
     </mat-form-field>
 
     <mat-form-field *ngIf="control?.type === 'chip'" floatLabel="always">
-      <mat-label *ngIf="control.label">{{ control?.label }}</mat-label>
+      <mat-label *ngIf="control.label">{{ control?.label | languageTranslate: language }}</mat-label>
       <lib-chip-input
         [chipControl]="control"
         [formControlName]="control?.name"
@@ -67,7 +65,7 @@
     </mat-form-field>
 
     <mat-form-field *ngIf="control?.type === 'range'" floatLabel="always">
-      <mat-label *ngIf="control.label">{{ control?.label }}</mat-label>
+      <mat-label *ngIf="control.label">{{ control?.label | languageTranslate: language }}</mat-label>
       <mat-slider
         style="width: 100%"
         [min]="control?.min"
@@ -81,7 +79,7 @@
     </mat-form-field>
 
     <mat-form-field *ngIf="control?.type === 'rating'" floatLabel="always">
-      <mat-label *ngIf="control.label">{{ control?.label }}</mat-label>
+      <mat-label *ngIf="control.label">{{ control?.label | languageTranslate: language }}</mat-label>
       <lib-star-rating
         [formControlName]="control.name"
         [label]="control.label"
@@ -91,7 +89,7 @@
     </mat-form-field>
 
     <mat-form-field *ngIf="control?.type === 'checkbox'" floatLabel="always">
-      <mat-label *ngIf="control.label">{{ control?.label }}</mat-label>
+      <mat-label *ngIf="control.label">{{ control?.label | languageTranslate: language }}</mat-label>
       <input matInput [formControlName]="control?.name" hidden />
       <lib-checkbox-input
         [checkboxControl]="control"
@@ -100,7 +98,7 @@
     </mat-form-field>
 
     <mat-form-field *ngIf="control?.type === 'radio'" floatLabel="always">
-      <mat-label *ngIf="control.label">{{ control?.label }}</mat-label>
+      <mat-label *ngIf="control.label">{{ control?.label | languageTranslate: language }}</mat-label>
       <input matInput [formControlName]="control?.name" hidden />
       <lib-radio-input
         [radioControl]="control"
@@ -109,7 +107,7 @@
     </mat-form-field>
 
     <mat-form-field *ngIf="control?.type == 'toggle'" floatLabel="always">
-      <mat-label *ngIf="control.label">{{ control?.label }}</mat-label>
+      <mat-label *ngIf="control.label">{{ control?.label | languageTranslate: language }}</mat-label>
       <mat-slide-toggle
         [formControlName]="control?.name"
         [checked]="control?.value"
@@ -126,9 +124,9 @@
     </mat-form-field>
 
     <mat-form-field *ngIf="control?.type == 'subFields'" floatLabel="always">
-      <mat-label *ngIf="control.label">{{ control?.label }}</mat-label>
+      <mat-label *ngIf="control.label">{{ control?.label | languageTranslate: language }}</mat-label>
       <div>
-        <dynamic-form [formJson]="control.subfields" classFlex="flex-class" #subform (change)="addFields(control?.name, $event)" ></dynamic-form>
+        <dynamic-form [formJson]="control.subfields" classFlex="flex-class" #subform (change)="addFields(control?.name, $event)" [language]="language" ></dynamic-form>
       </div>
       <textarea
         matInput
@@ -139,7 +137,7 @@
     </mat-form-field>
 
     <mat-form-field *ngIf="control?.type == 'addResource'" floatLabel="always" appearance="fill" class="no-bottom-line">
-      <mat-label *ngIf="control.label">{{ control?.label }}</mat-label>
+      <mat-label *ngIf="control.label">{{ control?.label | languageTranslate: language }}</mat-label>
       <div class="flex cursor-pointer flex-class" (click)="onClickAddResource(control)">
         <mat-icon>{{control.icon}}</mat-icon>
         <p>{{control?.textForLink}}</p>
@@ -178,13 +176,13 @@
         {{
           control?.errorMessage[
             ((myForm.get(control.name)?.errors | keyvalue) || [])[0].key
-          ]
+          ] | languageTranslate: language
         }}
       </div>
       <ng-template #genericErrorMessage>
         <div class="error-message">
           <mat-icon class="error-icon" matPrefix>error_outline</mat-icon>
-          Enter {{ control?.label }}
+          Enter {{ control?.label | languageTranslate: language }}
         </div>
       </ng-template>
     </mat-error>
diff --git a/projects/dynamic-form/src/lib/components/main-form/main-form.component.ts b/projects/dynamic-form/src/lib/components/main-form/main-form.component.ts
index 221fce1..6e9d3a0 100644
--- a/projects/dynamic-form/src/lib/components/main-form/main-form.component.ts
+++ b/projects/dynamic-form/src/lib/components/main-form/main-form.component.ts
@@ -63,6 +63,7 @@ export interface DynamicFormData {
 export class MainFormComponent implements OnInit {
   @Input() formJson: any;
   @Input() classFlex: any ;
+  @Input() language: any;
   @Output() onChange = new EventEmitter<{ event: any, control: any }>();
   @Output() onFocus = new EventEmitter<string>();
 
diff --git a/projects/dynamic-form/src/lib/dynamic-form.module.ts b/projects/dynamic-form/src/lib/dynamic-form.module.ts
index e50a522..f94be1b 100644
--- a/projects/dynamic-form/src/lib/dynamic-form.module.ts
+++ b/projects/dynamic-form/src/lib/dynamic-form.module.ts
@@ -21,6 +21,7 @@ import { CheckboxInputComponent } from './components/checkbox-input/checkbox-inp
 import { StarRatingComponent } from './components/star-rating/star-rating.component';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { AddResourceComponent } from './components/add-resource/add-resource.component';
+import { LanguageTranslatePipe } from './pipes/language-translate.pipe';
 
 @NgModule({
   declarations: [
@@ -32,6 +33,7 @@ import { AddResourceComponent } from './components/add-resource/add-resource.com
     CheckboxInputComponent,
     StarRatingComponent,
     AddResourceComponent,
+    LanguageTranslatePipe
   ],
   imports: [
     CommonModule,
@@ -50,7 +52,8 @@ import { AddResourceComponent } from './components/add-resource/add-resource.com
     MatRadioModule,
     MatDatepickerModule,
   ],
-  exports: [MainFormComponent],
-  schemas:[NO_ERRORS_SCHEMA]
+  exports: [MainFormComponent, LanguageTranslatePipe],
+  schemas:[NO_ERRORS_SCHEMA],
+  providers:[LanguageTranslatePipe]
 })
 export class DynamicFormModule {}
diff --git a/projects/dynamic-form/src/lib/pipes/language-translate.pipe.spec.ts b/projects/dynamic-form/src/lib/pipes/language-translate.pipe.spec.ts
new file mode 100644
index 0000000..aad17bf
--- /dev/null
+++ b/projects/dynamic-form/src/lib/pipes/language-translate.pipe.spec.ts
@@ -0,0 +1,8 @@
+import { LanguageTranslatePipe } from './language-translate.pipe';
+
+describe('LanguageTranslatePipe', () => {
+  it('create an instance', () => {
+    const pipe = new LanguageTranslatePipe();
+    expect(pipe).toBeTruthy();
+  });
+});
\ No newline at end of file
diff --git a/projects/dynamic-form/src/lib/pipes/language-translate.pipe.ts b/projects/dynamic-form/src/lib/pipes/language-translate.pipe.ts
new file mode 100644
index 0000000..e83beac
--- /dev/null
+++ b/projects/dynamic-form/src/lib/pipes/language-translate.pipe.ts
@@ -0,0 +1,22 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'languageTranslate'
+})
+export class LanguageTranslatePipe implements PipeTransform {
+
+  transform(value: any, selectedLanguage: string): string {
+    const defaultLanguage = 'en';
+
+    if (typeof value === 'string') {
+      return value;
+    }
+
+    if (typeof value === 'object' && value !== null) {
+      return value[selectedLanguage] || value[defaultLanguage] || '';
+    }
+
+    return '';
+  }
+
+}
\ No newline at end of file
diff --git a/projects/dynamic-form/src/public-api.ts b/projects/dynamic-form/src/public-api.ts
index 121939b..73bddbe 100644
--- a/projects/dynamic-form/src/public-api.ts
+++ b/projects/dynamic-form/src/public-api.ts
@@ -5,4 +5,5 @@
 export * from './lib/dynamic-form.service';
 export * from './lib/dynamic-form.component';
 export * from './lib/dynamic-form.module';
-export * from './lib/components/main-form/main-form.component';
\ No newline at end of file
+export * from './lib/components/main-form/main-form.component';
+export * from './lib/pipes/language-translate.pipe'
\ No newline at end of file
diff --git a/projects/form-demo-app/src/app/app.compnent.spec.data.ts b/projects/form-demo-app/src/app/app.compnent.spec.data.ts
index ab9af59..1470e40 100644
--- a/projects/form-demo-app/src/app/app.compnent.spec.data.ts
+++ b/projects/form-demo-app/src/app/app.compnent.spec.data.ts
@@ -1,13 +1,13 @@
 export const sampleData = [
     {
         "name": "title",
-        "label": "Enter your name",
+        "label": {en:"Enter your name", hi: "अपना नाम दर्ज करें"},
         "value": "",
         "type": "text",
         "placeHolder": "Ex. John",
         "errorMessage": {
-            "required": "Enter your name",
-            "minlength":"Min length should be 5",
+            "required": {en:"Enter your name", hi: "अपना नाम दर्ज करें"},
+            "minlength":{en:"Min length should be 5", hi: "न्यूनतम लंबाई 5 होनी चाहिए"},
         },
         "validators": {
             "required": true,
@@ -16,12 +16,12 @@ export const sampleData = [
     },
     {
         "name": "description",
-        "label": "Description",
+        "label": {en:"Description", hi: "विवरण"},
         "value":"",
         "type": "textarea",
-        "placeHolder": "Tell the community something about yourself",
+        "placeHolder": {en:"Tell the community something about yourself", hi: "समुदाय को अपने बारे में कुछ बताएं"},
         "errorMessage": {
-            "required": "Enter description"
+            "required": {en:"Enter description", hi: "विवरण दर्ज करें"}
         },
         "validators": {
             "required": false,
@@ -30,12 +30,12 @@ export const sampleData = [
     },
     {
         "name": "password",
-        "label": "Enter the password",
+        "label": {en:"Enter the password", hi: "पासवर्ड दर्ज करें"},
         "value":"",
         "type": "password",
-        "placeHolder": "Type your password here",
+        "placeHolder": {en:"Type your password here", hi: "यहां अपना पासवर्ड टाइप करें"},
         "errorMessage": {
-            "required": "Password is required",
+            "required": {en:"Password is required", hi: "पासवर्ड आवश्यक है"},
         },
         "validators": {
             "required": false,
@@ -43,11 +43,11 @@ export const sampleData = [
     },
     {
         "name": "location",
-        "label": "Select your location",
+        "label": {en:"Select your location", hi: "अपना स्थान चुनें"},
         "value":"",
         "type": "select",
         "errorMessage": {
-            "required": "Please select your location"
+            "required": {en:"Please select your location", hi: "कृपया अपना स्थान चुनें"}
         },
         "validators": {
             "required": false
@@ -86,19 +86,12 @@ export const sampleData = [
     },
     {
         "name": "recommended_for",
-        "label": "Recommended for",
-        "value": [{
-            "label": "Block education officer",
-            "value": "beo"
-        },
-        {
-            "label": "Cluster officials",
-            "value": "co"
-        }],
+        "label": {en:"Recommended for", hi: "के लिए अनुशंसित"},
+        "value":"",
         "type": "chip",
         "disabled": false,
         "errorMessage": {
-            "required": "Enter recommended for"
+            "required": {en:"Enter recommended for", hi: "के लिए अनुशंसा दर्ज करें"}
         },
         "validators": {
             "required": false
@@ -131,17 +124,18 @@ export const sampleData = [
             "addNewPopupSubHeader": "Who is this session for?",
             "showSelectAll": true,
             "showAddOption": true
-        }
+        },
+        "multiple": true
     },
     {
         "name": "range_value",
-        "label": "Select difficulty level",
+        "label": {en:"Select difficulty level", hi: "कठिनाई स्तर चुनें"},
         "value":"0",
         "type": "range",
         "min": "0",
         "max": "50",
         "step": "1",
-        "placeHolder": "Select a range value",
+        "placeHolder": {en:"Select a range value", hi: "एक श्रेणी मान चुनें"},
         "errorMessage": {
             "required": "Select a value"
         },
@@ -152,11 +146,11 @@ export const sampleData = [
     },
     {
         "name": "rating",
-        "label": "How do you rate this",
+        "label": {en:"How do you rate this", hi: "आप इसे कैसे रेट करेंगे"},
         "value":"",
         "type": "rating",
         "errorMessage": {
-            "required": "Select a rating value"
+            "required": {en:"Select a rating value", hi: "रेटिंग मान चुनें"}
         },
         "validators": {
             "required": false
@@ -165,11 +159,11 @@ export const sampleData = [
     },
     {
         "name": "categories",
-        "label": "Checkbox Input",
+        "label": {en:"Checkbox Input", hi: "चेकबॉक्स इनपुट"},
         "value":"",
         "type": "checkbox",
         "errorMessage": {
-            "required": "Select a category"
+            "required": {en:"Select a category", hi: "एक श्रेणी चुनें"}
         },
         "validators": {
             "required": false
@@ -203,11 +197,11 @@ export const sampleData = [
     },
     {
         "name": "gender",
-        "label": "Radio Input",
+        "label": {en:"Radio Input", hi: "रेडियो इनपुट"},
         "value":"",
         "type": "radio",
         "errorMessage": {
-            "required": "Select a value"
+            "required": {en:"Select a value", hi: "एक मान चुनें"}
         },
         "validators": {
             "required": true
@@ -229,11 +223,11 @@ export const sampleData = [
     },
     {
         "name": "accept",
-        "label": "Terms and conditions",
+        "label": {en:"Terms and conditions", hi: "नियम और शर्तें"},
         "value": false,
         "type": "toggle",
         "errorMessage": {
-            "required": "You need to accept"
+            "required": {en:"You need to accept", hi: "आपको स्वीकार करना होगा"}
         },
         "validators": {
             "required": false
diff --git a/projects/form-demo-app/src/app/app.component.html b/projects/form-demo-app/src/app/app.component.html
index 7291b6f..cbeec55 100644
--- a/projects/form-demo-app/src/app/app.component.html
+++ b/projects/form-demo-app/src/app/app.component.html
@@ -1,6 +1,6 @@
 
 <div style="margin: 25px;padding: 0px 30px;">
   <h3>Form Demo</h3>
-  <dynamic-form [formJson]="data" #formLib></dynamic-form>
+  <dynamic-form [formJson]="data" #formLib [language]="language"></dynamic-form>
   <button (click)="submitData()" [disabled]="this.formLib?.myForm?.invalid" mat-raised-button style="margin: 30px 0px;">SUBMIT</button>
 </div>
\ No newline at end of file
diff --git a/projects/form-demo-app/src/app/app.component.ts b/projects/form-demo-app/src/app/app.component.ts
index 3e49a10..c547ba5 100644
--- a/projects/form-demo-app/src/app/app.component.ts
+++ b/projects/form-demo-app/src/app/app.component.ts
@@ -9,7 +9,8 @@ import { MainFormComponent } from 'dynamic-form';
 })
 export class AppComponent {
   data:any= []
-  @ViewChild('formLib') formLib: MainFormComponent | undefined
+  @ViewChild('formLib') formLib: MainFormComponent | undefined;
+  language:string ="en";
 
   constructor(){}
 

From 0a8e7860e5ed356c3c2483739b56d6af0fa4c3b4 Mon Sep 17 00:00:00 2001
From: Syed Ameen <syedameenabrar786@gmail.com>
Date: Fri, 17 Jan 2025 13:05:29 +0530
Subject: [PATCH 4/5] version update

---
 projects/dynamic-form/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/projects/dynamic-form/package.json b/projects/dynamic-form/package.json
index bce3232..682473b 100644
--- a/projects/dynamic-form/package.json
+++ b/projects/dynamic-form/package.json
@@ -1,6 +1,6 @@
 {
   "name": "elevate-dynamic-form",
-  "version": "0.0.13",
+  "version": "0.0.14",
   "peerDependencies": {
     "@angular/common": "^17.3.4",
     "@angular/core": "^17.3.4",

From 0cc5a685131b9f652f03bea65401707ff1d7fcfe Mon Sep 17 00:00:00 2001
From: Syed Ameen <syedameenabrar786@gmail.com>
Date: Mon, 20 Jan 2025 16:23:50 +0530
Subject: [PATCH 5/5] multi lang, change event in html tag

---
 projects/dynamic-form/package.json                              | 2 +-
 .../src/lib/components/main-form/main-form.component.html       | 2 ++
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/projects/dynamic-form/package.json b/projects/dynamic-form/package.json
index 682473b..fc04e11 100644
--- a/projects/dynamic-form/package.json
+++ b/projects/dynamic-form/package.json
@@ -1,6 +1,6 @@
 {
   "name": "elevate-dynamic-form",
-  "version": "0.0.14",
+  "version": "0.0.15",
   "peerDependencies": {
     "@angular/common": "^17.3.4",
     "@angular/core": "^17.3.4",
diff --git a/projects/dynamic-form/src/lib/components/main-form/main-form.component.html b/projects/dynamic-form/src/lib/components/main-form/main-form.component.html
index e841ee6..3eba78e 100644
--- a/projects/dynamic-form/src/lib/components/main-form/main-form.component.html
+++ b/projects/dynamic-form/src/lib/components/main-form/main-form.component.html
@@ -43,6 +43,8 @@
         [formControlName]="control?.name"
         [required]="control?.validators?.required"
         [compareWith]="compareWith"
+        (selectionChange)="onSelectChange($event, control)"
+      (focus)="onSelectFocus(control?.name)"
       >
         <mat-option *ngFor="let option of control?.options" [value]="option">
           {{ option.label }}