[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];