(chore) Bump Angular to v14

angular.json

@@ -2,8 +2,8 @@
   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
   "cli": {
     "analytics": false,
-    "defaultCollection": "@angular-eslint/schematics",
-    "packageManager": "yarn"
+    "packageManager": "yarn",
+    "schematicCollections": ["@angular-eslint/schematics"]
   },
   "version": 1,
   "newProjectRoot": "projects",
@@ -18,7 +18,14 @@
         "build": {
           "builder": "@angular-devkit/build-angular:browser",
           "options": {
-            "allowedCommonJsDependencies": ["core-js", "raf"],
+            "allowedCommonJsDependencies": [
+              "core-js",
+              "dompurify",
+              "html2canvas",
+              "moment",
+              "raf",
+              "rgbcolor"
+            ],
             "outputPath": "dist/ngx-openmrs-formentry",
             "index": "src/index.html",
             "main": "src/main.ts",
@@ -159,6 +166,5 @@
         }
       }
     }
-  },
-  "defaultProject": "ngx-formentry"
+  }
 }

package.json

@@ -6,7 +6,7 @@
     "ng": "ng",
     "start": "ng serve --proxy-config proxy.conf.json",
     "build": "ng build --configuration production",
-    "build:lib": "ng build ngx-formentry --configuration production ",
+    "build:lib": "ng build ngx-formentry --configuration production",
     "test": "ng test ngx-formentry --watch=false",
     "test:watch": "ng test ngx-formentry",
     "lint": "TIMING=1 ng lint",
@@ -17,29 +17,29 @@
     "@carbon/styles": "1.x"
   },
   "dependencies": {
-    "@angular-devkit/core": "^13.3.11",
+    "@angular-devkit/core": "^14.2.13",
     "@angular-extensions/elements": "^11.0.1",
-    "@angular/animations": "^13.4.0",
-    "@angular/cdk": "^11.2.13",
-    "@angular/common": "^13.4.0",
-    "@angular/compiler": "^13.4.0",
-    "@angular/core": "^13.4.0",
-    "@angular/forms": "^13.4.0",
-    "@angular/platform-browser": "^13.4.0",
-    "@angular/platform-browser-dynamic": "^13.4.0",
-    "@angular/router": "^13.4.0",
+    "@angular/animations": "^14.3.0",
+    "@angular/cdk": "^14.2.7",
+    "@angular/common": "^14.3.0",
+    "@angular/compiler": "^14.3.0",
+    "@angular/core": "^14.3.0",
+    "@angular/forms": "^14.3.0",
+    "@angular/platform-browser": "^14.3.0",
+    "@angular/platform-browser-dynamic": "^14.3.0",
+    "@angular/router": "^14.3.0",
     "@carbon/styles": "1.x",
-    "@ng-select/ng-select": "^7.4.0",
-    "@ngx-translate/core": "^13.0.0",
+    "@ng-select/ng-select": "^9.1.0",
+    "@ngx-translate/core": "^14.0.0",
+    "@openmrs/ngx-file-uploader": "next",
     "core-js": "^2.6.12",
     "font-awesome": "^4.7.0",
     "hammerjs": "^2.0.8",
     "jquery": "^3.7.1",
     "jspdf": "^2.5.1",
     "lodash": "^4.17.21",
     "moment": "^2.29.4",
-    "ngx-bootstrap": "^7.1.2",
-    "ngx-file-uploader-openmrs": "^1.0.1",
+    "ngx-bootstrap": "^9.0.0",
     "ngx-webcam": "0.4.1",
     "pdfmake": "0.1.72",
     "reflect-metadata": "^0.1.13",
@@ -53,15 +53,15 @@
     "zone.js": "~0.11.8"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~13.3.11",
+    "@angular-devkit/build-angular": "^14.2.13",
     "@angular-eslint/builder": "^13.5.0",
     "@angular-eslint/eslint-plugin": "^13.5.0",
     "@angular-eslint/eslint-plugin-template": "^13.5.0",
-    "@angular-eslint/schematics": "^13.5.0",
+    "@angular-eslint/schematics": "^14.4.0",
     "@angular-eslint/template-parser": "^12.7.0",
-    "@angular/cli": "^13.3.11",
-    "@angular/compiler-cli": "^13.4.0",
-    "@angular/language-service": "^13.4.0",
+    "@angular/cli": "^14.2.13",
+    "@angular/compiler-cli": "^14.3.0",
+    "@angular/language-service": "^14.3.0",
     "@types/jasmine": "~3.6.11",
     "@types/jasminewd2": "~2.0.11",
     "@types/node": "^12.20.55",
@@ -79,7 +79,7 @@
     "karma-firefox-launcher": "^1.3.0",
     "karma-jasmine": "~4.0.2",
     "karma-jasmine-html-reporter": "^1.7.0",
-    "ng-packagr": "^13.3.1",
+    "ng-packagr": "^14.2.2",
     "prettier": "2.1.2",
     "protractor": "~7.0.0",
     "sass": "^1.68.0",

projects/ngx-formentry/src/abstract-controls-extension/afe-form-array.ts

@@ -1,5 +1,5 @@
 import {
-  FormArray,
+  UntypedFormArray,
   ValidatorFn,
   AsyncValidatorFn,
   AbstractControl
@@ -24,7 +24,7 @@ import { AlertHelper } from '../form-entry/control-alerts/alert-helpers';
 import { DisablerHelper } from '../form-entry/control-hiders-disablers/disabler-helper';
 
 export class AfeFormArray
-  extends FormArray
+  extends UntypedFormArray
   implements CanHide, CanDisable, CanGenerateAlert, ValueChangeListener {
   private _controlRelations: ControlRelations;
   private _valueChangeListener: any;

projects/ngx-formentry/src/abstract-controls-extension/afe-form-control.ts

@@ -1,5 +1,5 @@
 import {
-  FormControl,
+  UntypedFormControl,
   ValidatorFn,
   AsyncValidatorFn,
   AbstractControlOptions
@@ -26,7 +26,7 @@ import { CanCalculate } from '../form-entry/control-calculators/can-calculate';
 import { ExpressionRunner } from '../form-entry/expression-runner/expression-runner';
 
 class AfeFormControl
-  extends FormControl
+  extends UntypedFormControl
   implements
     CanHide,
     CanDisable,

projects/ngx-formentry/src/abstract-controls-extension/afe-form-group.ts

@@ -1,5 +1,5 @@
 import {
-  FormGroup,
+  UntypedFormGroup,
   ValidatorFn,
   AsyncValidatorFn,
   AbstractControl
@@ -24,7 +24,7 @@ import { DisablerHelper } from '../form-entry/control-hiders-disablers/disabler-
 import { AlertHelper } from '../form-entry/control-alerts/alert-helpers';
 
 export class AfeFormGroup
-  extends FormGroup
+  extends UntypedFormGroup
   implements CanHide, CanDisable, CanGenerateAlert {
   private _controlRelations: ControlRelations;
 

projects/ngx-formentry/src/change-tracking/sample-form/sample-form.component.ts

@@ -1,8 +1,8 @@
 import { Component, OnInit, Inject } from '@angular/core';
 import {
-  FormGroup,
-  FormArray,
-  FormBuilder,
+  UntypedFormGroup,
+  UntypedFormArray,
+  UntypedFormBuilder,
   AbstractControl,
   ValidatorFn
 } from '@angular/forms';
@@ -13,20 +13,20 @@ import { AfeFormControl } from '../../abstract-controls-extension/afe-form-contr
   templateUrl: 'sample-form.component.html'
 })
 export class SampleFormComponent implements OnInit {
-  form: FormGroup;
+  form: UntypedFormGroup;
   payLoad = '';
-  fb: FormBuilder;
+  fb: UntypedFormBuilder;
 
-  group1: FormGroup;
-  array1: FormArray;
-  group2: FormGroup;
-  array2: FormArray;
+  group1: UntypedFormGroup;
+  array1: UntypedFormArray;
+  group2: UntypedFormGroup;
+  array2: UntypedFormArray;
 
-  array3: FormArray;
-  group3: FormGroup;
+  array3: UntypedFormArray;
+  group3: UntypedFormGroup;
 
-  group4: FormGroup;
-  array4: FormArray;
+  group4: UntypedFormGroup;
+  array4: UntypedFormArray;
 
   control1: AfeFormControl;
   control2: AfeFormControl;
@@ -45,7 +45,7 @@ export class SampleFormComponent implements OnInit {
   // control5LastUpdate: any;
   // control4LastUpdate: any;
 
-  constructor(@Inject(FormBuilder) fb: FormBuilder) {
+  constructor(@Inject(UntypedFormBuilder) fb: UntypedFormBuilder) {
     this.fb = fb;
   }
   ngOnInit() {
@@ -253,12 +253,12 @@ export class SampleFormComponent implements OnInit {
     return new AfeFormControl();
   }
 
-  private getNewControlArray(): FormArray {
-    return new FormArray([]);
+  private getNewControlArray(): UntypedFormArray {
+    return new UntypedFormArray([]);
   }
 
-  private getNewGroupControl(): FormGroup {
-    return new FormGroup({});
+  private getNewGroupControl(): UntypedFormGroup {
+    return new UntypedFormGroup({});
   }
 
   public setControlOneValue() {
@@ -283,7 +283,7 @@ export class SampleFormComponent implements OnInit {
   }
 
   private formArrayMissingValueValidator(
-    refControl: FormArray,
+    refControl: UntypedFormArray,
     controlName: string
   ): ValidatorFn {
     return (control: AbstractControl): { [key: string]: any } => {

projects/ngx-formentry/src/components/file-upload/file-upload.module.ts

@@ -6,7 +6,7 @@ import { FormsModule } from '@angular/forms';
 import { SharedModule } from '../../shared.module';
 import { FileUploadComponent } from './file-upload.component';
 import { WebcamModule } from 'ngx-webcam';
-import { NgxFileUploaderModule } from 'ngx-file-uploader-openmrs';
+import { NgxFileUploaderModule } from '@openmrs/ngx-file-uploader';
 
 @NgModule({
   imports: [

projects/ngx-formentry/src/components/ngx-pick-datetime/lib/date-time/date-time-picker.component.spec.ts

@@ -13,7 +13,11 @@ import {
   ViewChild
 } from '@angular/core';
 import { By } from '@angular/platform-browser';
-import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import {
+  UntypedFormControl,
+  FormsModule,
+  ReactiveFormsModule
+} from '@angular/forms';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { BrowserDynamicTestingModule } from '@angular/platform-browser-dynamic/testing';
 import { ENTER, ESCAPE, RIGHT_ARROW, UP_ARROW } from '@angular/cdk/keycodes';
@@ -2308,7 +2312,7 @@ class DateTimePickerWithNgModel {
   `
 })
 class DateTimePickerWithFormControl {
-  formControl = new FormControl();
+  formControl = new UntypedFormControl();
   @ViewChild('dt', { static: true })
   dateTimePicker: OwlDateTimeComponent<Date>;
   @ViewChild(OwlDateTimeInputDirective, { static: true })

projects/ngx-formentry/src/form-entry/form-entry.module.ts

@@ -2,7 +2,7 @@ import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 // import { NoopAnimationsModule} from '@angular/platform-browser/animations';
 import { CommonModule } from '@angular/common';
 import { ReactiveFormsModule } from '@angular/forms';
-import { FormBuilder } from '@angular/forms';
+import { UntypedFormBuilder } from '@angular/forms';
 import { DebugModeService } from '../form-entry/services/debug-mode.service';
 import { TimeAgoPipe } from './pipes/time-ago.pipe';
 
@@ -79,7 +79,7 @@ import { PatientIdentifierAdapter } from './value-adapters/patient-identifier.ad
     CollapseDirective
   ],
   providers: [
-    FormBuilder,
+    UntypedFormBuilder,
     FormControlService,
     FormErrorsService,
     ValidationFactory,

projects/ngx-formentry/src/mock/mock-form.ts

@@ -1,9 +1,9 @@
 import { TextInputQuestion } from '../form-entry/question-models/text-input-question';
 import { QuestionGroup } from '../form-entry/question-models/group-question';
 import { RepeatingQuestion } from '../form-entry/question-models/repeating-question';
-import { FormGroup } from '@angular/forms';
+import { UntypedFormGroup } from '@angular/forms';
 export class MockForm {
-  section1: FormGroup;
+  section1: UntypedFormGroup;
   data = {
     form: this.section1,
     questions: [

projects/ngx-formentry/tsconfig.lib.json

@@ -2,7 +2,7 @@
   "extends": "../../tsconfig.json",
   "compilerOptions": {
     "outDir": "../../out-tsc/lib",
-    "target": "es2015",
+    "target": "es2020",
     "declarationMap": true,
     "module": "es2015",
     "moduleResolution": "node",

src/app/app.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { HttpClient, HttpHeaders } from '@angular/common/http';
-import { FormGroup } from '@angular/forms';
+import { UntypedFormGroup } from '@angular/forms';
 
 import { Subscriber, Observable, Subject, of, Observer } from 'rxjs';
 import { TranslateService } from '@ngx-translate/core';
@@ -32,7 +32,7 @@ export class AppComponent implements OnInit {
   data: any;
   schema: any;
   sections: {} = {};
-  formGroup: FormGroup;
+  formGroup: UntypedFormGroup;
   activeTab = 0;
   form: Form;
   stack = [];

tsconfig.json

@@ -13,7 +13,7 @@
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "importHelpers": true,
-    "target": "es2015",
+    "target": "es2020",
     "typeRoots": ["node_modules/@types"],
     "lib": ["es2018", "dom"],
     "paths": {