[PS-182] Upgrade Angular to V14 (#2948)

libs/angular/jest.config.js

@@ -3,7 +3,6 @@ const { pathsToModuleNameMapper } = require("ts-jest");
 const { compilerOptions } = require("../shared/tsconfig.libs");
 
 module.exports = {
-  name: "angular",
   displayName: "libs/angular tests",
   preset: "jest-preset-angular",
   testMatch: ["**/+(*.)+(spec).+(ts)"],

libs/angular/src/components/export.component.ts

@@ -1,5 +1,5 @@
 import { Directive, EventEmitter, OnInit, Output } from "@angular/core";
-import { FormBuilder } from "@angular/forms";
+import { UntypedFormBuilder } from "@angular/forms";
 
 import { CryptoService } from "@bitwarden/common/abstractions/crypto.service";
 import { EventService } from "@bitwarden/common/abstractions/event.service";
@@ -41,7 +41,7 @@ export class ExportComponent implements OnInit {
     protected win: Window,
     private logService: LogService,
     private userVerificationService: UserVerificationService,
-    private formBuilder: FormBuilder,
+    private formBuilder: UntypedFormBuilder,
     protected fileDownloadService: FileDownloadService
   ) {}
 

libs/angular/src/components/register.component.ts

@@ -1,5 +1,5 @@
 import { Directive, EventEmitter, Input, OnInit, Output } from "@angular/core";
-import { AbstractControl, FormBuilder, ValidatorFn, Validators } from "@angular/forms";
+import { AbstractControl, UntypedFormBuilder, ValidatorFn, Validators } from "@angular/forms";
 import { Router } from "@angular/router";
 
 import { InputsFieldMatch } from "@bitwarden/angular/validators/inputsFieldMatch.validator";
@@ -67,7 +67,7 @@ export class RegisterComponent extends CaptchaProtectedComponent implements OnIn
 
   constructor(
     protected formValidationErrorService: FormValidationErrorsService,
-    protected formBuilder: FormBuilder,
+    protected formBuilder: UntypedFormBuilder,
     protected authService: AuthService,
     protected router: Router,
     i18nService: I18nService,

libs/angular/src/components/send/efflux-dates.component.ts

@@ -1,6 +1,6 @@
 import { DatePipe } from "@angular/common";
 import { Directive, EventEmitter, Input, OnInit, Output } from "@angular/core";
-import { FormControl, FormGroup } from "@angular/forms";
+import { UntypedFormControl, UntypedFormGroup } from "@angular/forms";
 
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
 import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service";
@@ -62,15 +62,15 @@ export class EffluxDatesComponent implements OnInit {
     return BrowserPath.Default;
   }
 
-  datesForm = new FormGroup({
-    selectedDeletionDatePreset: new FormControl(),
-    selectedExpirationDatePreset: new FormControl(),
-    defaultDeletionDateTime: new FormControl(),
-    defaultExpirationDateTime: new FormControl(),
-    fallbackDeletionDate: new FormControl(),
-    fallbackDeletionTime: new FormControl(),
-    fallbackExpirationDate: new FormControl(),
-    fallbackExpirationTime: new FormControl(),
+  datesForm = new UntypedFormGroup({
+    selectedDeletionDatePreset: new UntypedFormControl(),
+    selectedExpirationDatePreset: new UntypedFormControl(),
+    defaultDeletionDateTime: new UntypedFormControl(),
+    defaultExpirationDateTime: new UntypedFormControl(),
+    fallbackDeletionDate: new UntypedFormControl(),
+    fallbackDeletionTime: new UntypedFormControl(),
+    fallbackExpirationDate: new UntypedFormControl(),
+    fallbackExpirationTime: new UntypedFormControl(),
   });
 
   deletionDatePresets: any[] = [
@@ -87,36 +87,36 @@ export class EffluxDatesComponent implements OnInit {
     { name: this.i18nService.t("never"), value: DatePreset.Never },
   ].concat([...this.deletionDatePresets]);
 
-  get selectedDeletionDatePreset(): FormControl {
-    return this.datesForm.get("selectedDeletionDatePreset") as FormControl;
+  get selectedDeletionDatePreset(): UntypedFormControl {
+    return this.datesForm.get("selectedDeletionDatePreset") as UntypedFormControl;
   }
 
-  get selectedExpirationDatePreset(): FormControl {
-    return this.datesForm.get("selectedExpirationDatePreset") as FormControl;
+  get selectedExpirationDatePreset(): UntypedFormControl {
+    return this.datesForm.get("selectedExpirationDatePreset") as UntypedFormControl;
   }
 
-  get defaultDeletionDateTime(): FormControl {
-    return this.datesForm.get("defaultDeletionDateTime") as FormControl;
+  get defaultDeletionDateTime(): UntypedFormControl {
+    return this.datesForm.get("defaultDeletionDateTime") as UntypedFormControl;
   }
 
-  get defaultExpirationDateTime(): FormControl {
-    return this.datesForm.get("defaultExpirationDateTime") as FormControl;
+  get defaultExpirationDateTime(): UntypedFormControl {
+    return this.datesForm.get("defaultExpirationDateTime") as UntypedFormControl;
   }
 
-  get fallbackDeletionDate(): FormControl {
-    return this.datesForm.get("fallbackDeletionDate") as FormControl;
+  get fallbackDeletionDate(): UntypedFormControl {
+    return this.datesForm.get("fallbackDeletionDate") as UntypedFormControl;
   }
 
-  get fallbackDeletionTime(): FormControl {
-    return this.datesForm.get("fallbackDeletionTime") as FormControl;
+  get fallbackDeletionTime(): UntypedFormControl {
+    return this.datesForm.get("fallbackDeletionTime") as UntypedFormControl;
   }
 
-  get fallbackExpirationDate(): FormControl {
-    return this.datesForm.get("fallbackExpirationDate") as FormControl;
+  get fallbackExpirationDate(): UntypedFormControl {
+    return this.datesForm.get("fallbackExpirationDate") as UntypedFormControl;
   }
 
-  get fallbackExpirationTime(): FormControl {
-    return this.datesForm.get("fallbackExpirationTime") as FormControl;
+  get fallbackExpirationTime(): UntypedFormControl {
+    return this.datesForm.get("fallbackExpirationTime") as UntypedFormControl;
   }
 
   // Should be able to call these at any time and compute a submitable value

libs/angular/src/components/settings/vault-timeout-input.component.ts

@@ -2,7 +2,7 @@ import { Directive, Input, OnInit } from "@angular/core";
 import {
   AbstractControl,
   ControlValueAccessor,
-  FormBuilder,
+  UntypedFormBuilder,
   ValidationErrors,
   Validator,
 } from "@angular/forms";
@@ -44,7 +44,7 @@ export class VaultTimeoutInputComponent implements ControlValueAccessor, Validat
   private validatorChange: () => void;
 
   constructor(
-    private formBuilder: FormBuilder,
+    private formBuilder: UntypedFormBuilder,
     private policyService: PolicyService,
     private i18nService: I18nService
   ) {}

libs/angular/src/components/user-verification.component.ts

@@ -1,6 +1,6 @@
 import { animate, style, transition, trigger } from "@angular/animations";
 import { Component, OnInit } from "@angular/core";
-import { ControlValueAccessor, FormControl, NG_VALUE_ACCESSOR } from "@angular/forms";
+import { ControlValueAccessor, UntypedFormControl, NG_VALUE_ACCESSOR } from "@angular/forms";
 
 import { KeyConnectorService } from "@bitwarden/common/abstractions/keyConnector.service";
 import { UserVerificationService } from "@bitwarden/common/abstractions/userVerification.service";
@@ -34,7 +34,7 @@ export class UserVerificationComponent implements ControlValueAccessor, OnInit {
   disableRequestOTP = false;
   sentCode = false;
 
-  secret = new FormControl("");
+  secret = new UntypedFormControl("");
 
   private onChange: (value: Verification) => void;
 

libs/angular/src/validators/inputsFieldMatch.validator.ts

@@ -1,4 +1,4 @@
-import { AbstractControl, FormGroup, ValidatorFn } from "@angular/forms";
+import { AbstractControl, UntypedFormGroup, ValidatorFn } from "@angular/forms";
 
 import { FormGroupControls } from "@bitwarden/common/abstractions/formValidationErrors.service";
 
@@ -39,7 +39,7 @@ export class InputsFieldMatch {
 
   //checks the formGroup if two fields have the same value and validation is controlled from either field
   static validateFormInputsMatch(field: string, fieldMatchTo: string, errorMessage: string) {
-    return (formGroup: FormGroup) => {
+    return (formGroup: UntypedFormGroup) => {
       const fieldCtrl = formGroup.controls[field];
       const fieldMatchToCtrl = formGroup.controls[fieldMatchTo];
 

libs/common/jest.config.js

@@ -3,7 +3,6 @@ const { pathsToModuleNameMapper } = require("ts-jest");
 const { compilerOptions } = require("../shared/tsconfig.libs");
 
 module.exports = {
-  name: "common",
   displayName: "libs/common tests",
   preset: "ts-jest",
   testEnvironment: "jsdom",

libs/common/spec/services/encrypt.service.spec.ts

@@ -1,4 +1,4 @@
-import { mockReset, mock, MockProxy } from "jest-mock-extended";
+import { mockReset, mock } from "jest-mock-extended";
 
 import { CryptoFunctionService } from "@bitwarden/common/abstractions/cryptoFunction.service";
 import { LogService } from "@bitwarden/common/abstractions/log.service";

libs/common/src/services/formValidationErrors.service.ts

@@ -1,4 +1,4 @@
-import { FormGroup, ValidationErrors } from "@angular/forms";
+import { UntypedFormGroup, ValidationErrors } from "@angular/forms";
 
 import {
   FormGroupControls,
@@ -11,7 +11,7 @@ export class FormValidationErrorsService implements FormValidationErrorsAbstract
     let errors: AllValidationErrors[] = [];
     Object.keys(controls).forEach((key) => {
       const control = controls[key];
-      if (control instanceof FormGroup) {
+      if (control instanceof UntypedFormGroup) {
         errors = errors.concat(this.getFormValidationErrors(control.controls));
       }
 

libs/components/jest.config.js

@@ -3,7 +3,6 @@ const { pathsToModuleNameMapper } = require("ts-jest");
 const { compilerOptions } = require("./tsconfig");
 
 module.exports = {
-  name: "angular",
   displayName: "libs/components tests",
   preset: "jest-preset-angular",
   testMatch: ["**/+(*.)+(spec).+(ts)"],

libs/components/src/form-field/error-summary.component.ts

@@ -1,5 +1,5 @@
 import { Component, Input } from "@angular/core";
-import { AbstractControl, FormGroup } from "@angular/forms";
+import { AbstractControl, UntypedFormGroup } from "@angular/forms";
 
 @Component({
   selector: "bit-error-summary",
@@ -13,7 +13,7 @@ import { AbstractControl, FormGroup } from "@angular/forms";
 })
 export class BitErrorSummary {
   @Input()
-  formGroup: FormGroup;
+  formGroup: UntypedFormGroup;
 
   get errorCount(): number {
     return this.getErrorCount(this.formGroup);
@@ -23,9 +23,9 @@ export class BitErrorSummary {
     return this.errorCount.toString();
   }
 
-  private getErrorCount(form: FormGroup): number {
+  private getErrorCount(form: UntypedFormGroup): number {
     return Object.values(form.controls).reduce((acc: number, control: AbstractControl) => {
-      if (control instanceof FormGroup) {
+      if (control instanceof UntypedFormGroup) {
         return acc + this.getErrorCount(control);
       }
 

libs/components/src/form-field/error-summary.stories.ts

@@ -1,4 +1,4 @@
-import { FormBuilder, FormsModule, ReactiveFormsModule, Validators } from "@angular/forms";
+import { UntypedFormBuilder, FormsModule, ReactiveFormsModule, Validators } from "@angular/forms";
 import { Meta, moduleMetadata, Story } from "@storybook/angular";
 
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
@@ -39,7 +39,7 @@ export default {
   },
 } as Meta;
 
-const fb = new FormBuilder();
+const fb = new UntypedFormBuilder();
 
 const formObj = fb.group({
   name: ["", [Validators.required]],

libs/components/src/form-field/form-field.stories.ts

@@ -1,6 +1,6 @@
 import {
   AbstractControl,
-  FormBuilder,
+  UntypedFormBuilder,
   FormsModule,
   ReactiveFormsModule,
   ValidationErrors,
@@ -46,7 +46,7 @@ export default {
   },
 } as Meta;
 
-const fb = new FormBuilder();
+const fb = new UntypedFormBuilder();
 const formObj = fb.group({
   test: [""],
   required: ["", [Validators.required]],