event emitter for dynamic select

.gitignore

@@ -8,6 +8,7 @@
 
 # Node
 /node_modules
+/projects/dynamic-form/node_modules
 npm-debug.log
 yarn-error.log
 

angular.json

@@ -133,75 +133,6 @@
           }
         }
       }
-    },
-    "generic-chart": {
-      "projectType": "library",
-      "root": "projects/generic-chart",
-      "sourceRoot": "projects/generic-chart/src",
-      "prefix": "lib",
-      "architect": {
-        "build": {
-          "builder": "@angular-devkit/build-angular:ng-packagr",
-          "options": {
-            "project": "projects/generic-chart/ng-package.json"
-          },
-          "configurations": {
-            "production": {
-              "tsConfig": "projects/generic-chart/tsconfig.lib.prod.json"
-            },
-            "development": {
-              "tsConfig": "projects/generic-chart/tsconfig.lib.json"
-            }
-          },
-          "defaultConfiguration": "production"
-        },
-        "test": {
-          "builder": "@angular-devkit/build-angular:karma",
-          "options": {
-            "tsConfig": "projects/generic-chart/tsconfig.spec.json",
-            "polyfills": [
-              "zone.js",
-              "zone.js/testing"
-            ]
-          }
-        }
-      }
-    },
-    "generic-table": {
-      "projectType": "library",
-      "root": "projects/generic-table",
-      "sourceRoot": "projects/generic-table/src",
-      "prefix": "lib",
-      "architect": {
-        "build": {
-          "builder": "@angular-devkit/build-angular:ng-packagr",
-          "options": {
-            "project": "projects/generic-table/ng-package.json"
-          },
-          "configurations": {
-            "production": {
-              "tsConfig": "projects/generic-table/tsconfig.lib.prod.json"
-            },
-            "development": {
-              "tsConfig": "projects/generic-table/tsconfig.lib.json"
-            }
-          },
-          "defaultConfiguration": "production"
-        },
-        "test": {
-          "builder": "@angular-devkit/build-angular:karma",
-          "options": {
-            "tsConfig": "projects/generic-table/tsconfig.spec.json",
-            "polyfills": [
-              "zone.js",
-              "zone.js/testing"
-            ]
-          }
-        }
-      }
     }
-  },
-  "cli": {
-    "analytics": false
   }
 }

package.json

@@ -23,8 +23,7 @@
     "moment": "^2.30.1",
     "rxjs": "~7.5.0",
     "tslib": "^2.3.0",
-    "zone.js": "~0.14.4",
-    "chart.js": "^4.4.6"
+    "zone.js": "~0.14.4"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "^17.3.4",

projects/dynamic-form/package.json

@@ -1,6 +1,6 @@
 {
-  "name": "@elevate/dynamic-form",
-  "version": "0.0.1",
+  "name": "elevate-dynamic-form",
+  "version": "0.0.15",
   "peerDependencies": {
     "@angular/common": "^17.3.4",
     "@angular/core": "^17.3.4",

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 }}

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,10 +63,13 @@ export interface DynamicFormData {
 export class MainFormComponent implements OnInit {
   @Input() formJson: any;
   @Input() classFlex: any ;
-  @Input() language: any
+  @Input() language: 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;
@@ -203,4 +206,11 @@ constructor(private fb: FormBuilder,public dialog: MatDialog) {}
     });
   }
 
+  onSelectChange(event: any, control: any) {
+    this.onChange.emit({event, control});
+  }
+
+  onSelectFocus(controlName: any) {
+    this.onFocus.emit(controlName);
+  }
 }

projects/dynamic-form/src/lib/pipes/language-translate.pipe.spec.ts

@@ -5,4 +5,4 @@ describe('LanguageTranslatePipe', () => {
     const pipe = new LanguageTranslatePipe();
     expect(pipe).toBeTruthy();
   });
-});
+});

projects/dynamic-form/src/lib/pipes/language-translate.pipe.ts

@@ -19,4 +19,4 @@ export class LanguageTranslatePipe implements PipeTransform {
     return '';
   }
 
-}
+}

projects/form-demo-app/src/app/app.component.html

@@ -1,11 +1,6 @@
 
 <div style="margin: 25px;padding: 0px 30px;">
-  <!-- Charts implementation example -->
-  <app-chart> </app-chart>
-  <lib-table ></lib-table>
-  <!-- languageTranslate pipe implementation example-->
-  <div style="margin: 30px 0px;">{{ message | languageTranslate:language }}</div>
-  <!-- Dynamic form implementation example -->
-  <dynamic-form [formJson]="data" [language]="language" #formLib></dynamic-form>
-  <button (click)="submitData()" [disabled]="this.formLib?.myForm?.invalid" style="margin: 30px 0px;">SUBMIT</button>
+  <h3>Form Demo</h3>
+  <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>

projects/form-demo-app/src/app/app.component.ts

@@ -9,9 +9,8 @@ import { MainFormComponent } from 'dynamic-form';
 })
 export class AppComponent {
   data:any= []
-  @ViewChild('formLib') formLib: MainFormComponent | undefined
-  language = "en"
-  message = { en:"Message in english", hi: "अपना नाम दर्ज करें" }
+  @ViewChild('formLib') formLib: MainFormComponent | undefined;
+  language:string ="en";
 
   constructor(){}
 

projects/form-demo-app/src/app/app.module.ts

@@ -1,16 +1,9 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { AppComponent } from './app.component';
-// import { MatButtonModule } from '@angular/material/button';
+import { DynamicFormModule } from 'dynamic-form';
+import { MatButtonModule } from '@angular/material/button';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { DynamicFormModule, LanguageTranslatePipe } from 'dynamic-form';
-import { MatTableModule } from '@angular/material/table';
-import { MatPaginatorModule } from '@angular/material/paginator';
-import { MatSortModule } from '@angular/material/sort';
-import { GenericChartModule } from 'dist/generic-chart';
-import { GenericTableModule } from 'dist/generic-table';
-
-
 
 @NgModule({
   declarations: [
@@ -19,14 +12,10 @@ import { GenericTableModule } from 'dist/generic-table';
   imports: [
     BrowserModule,
     DynamicFormModule,
-    BrowserAnimationsModule,
-    GenericChartModule,
-    GenericTableModule,
-    MatTableModule,
-    MatPaginatorModule,
-    MatSortModule
+    MatButtonModule,
+    BrowserAnimationsModule
   ],
-  providers: [LanguageTranslatePipe],
+  providers: [],
   bootstrap: [AppComponent]
 })
 export class AppModule { }