Angular 14 upgrade (#2598)

* angular 14

* material 14 and ADF 14

* latest ADF 5.x and theme import fixes

* use latest ADF 5.x

* update build command

* update travis command

* upgrade ngrx to v14

* upgrade flex layout lib

* fix after rebase

* fix after rebase

* upgrade to latest ADF

app/src/app/components/info-drawer/library-metadata-tab/library-metadata-form.component.ts

@@ -24,7 +24,7 @@
  */
 
 import { Component, Input, OnInit, OnChanges, OnDestroy } from '@angular/core';
-import { FormGroup, FormControl, Validators, FormGroupDirective, NgForm } from '@angular/forms';
+import { UntypedFormGroup, UntypedFormControl, Validators, FormGroupDirective, NgForm } from '@angular/forms';
 import { QueriesApi, SiteEntry, SitePaging } from '@alfresco/js-api';
 import { Store } from '@ngrx/store';
 import { AppStore, UpdateLibraryAction } from '@alfresco/aca-shared/store';
@@ -34,7 +34,7 @@ import { Observable, from, Subject } from 'rxjs';
 import { ErrorStateMatcher } from '@angular/material/core';
 
 export class InstantErrorStateMatcher implements ErrorStateMatcher {
-  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
+  isErrorState(control: UntypedFormControl | null, form: FormGroupDirective | NgForm | null): boolean {
     const isSubmitted = form && form.submitted;
     return !!(control && control.invalid && (control.dirty || control.touched || isSubmitted));
   }
@@ -63,11 +63,11 @@ export class LibraryMetadataFormComponent implements OnInit, OnChanges, OnDestro
     { value: 'MODERATED', label: 'LIBRARY.VISIBILITY.MODERATED' }
   ];
 
-  form: FormGroup = new FormGroup({
-    id: new FormControl({ value: '', disabled: true }),
-    title: new FormControl({ value: '' }, [Validators.required, Validators.maxLength(256)]),
-    description: new FormControl({ value: '' }, [Validators.maxLength(512)]),
-    visibility: new FormControl(this.libraryType[0].value)
+  form: UntypedFormGroup = new UntypedFormGroup({
+    id: new UntypedFormControl({ value: '', disabled: true }),
+    title: new UntypedFormControl({ value: '' }, [Validators.required, Validators.maxLength(256)]),
+    description: new UntypedFormControl({ value: '' }, [Validators.maxLength(512)]),
+    visibility: new UntypedFormControl(this.libraryType[0].value)
   });
 
   matcher = new InstantErrorStateMatcher();

app/src/app/components/node-version/node-version-form.component.ts

@@ -24,7 +24,7 @@
  */
 
 import { Component, OnDestroy, OnInit, ViewEncapsulation, Output, EventEmitter } from '@angular/core';
-import { FormBuilder, FormGroup } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
@@ -44,7 +44,7 @@ export interface VersionFormEntry {
 export class AppNodeVersionFormComponent implements OnInit, OnDestroy {
   @Output() update: EventEmitter<VersionFormEntry> = new EventEmitter();
 
-  form: FormGroup;
+  form: UntypedFormGroup;
 
   private onDestroy$: Subject<boolean> = new Subject<boolean>();
   private versionOptions = [
@@ -52,7 +52,7 @@ export class AppNodeVersionFormComponent implements OnInit, OnDestroy {
     { label: 'VERSION.FORM.VERSION.MAJOR', value: true }
   ];
 
-  constructor(private formBuilder: FormBuilder) {}
+  constructor(private formBuilder: UntypedFormBuilder) {}
 
   ngOnInit() {
     this.form = this.formBuilder.group({

app/src/app/dialogs/node-template/create-from-template.dialog.ts

@@ -26,7 +26,7 @@
 import { Component, ViewEncapsulation, Inject, OnInit } from '@angular/core';
 import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { Node } from '@alfresco/js-api';
-import { FormBuilder, FormGroup, Validators, FormControl, ValidationErrors } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup, Validators, UntypedFormControl, ValidationErrors } from '@angular/forms';
 import { Store } from '@ngrx/store';
 import { AppStore, CreateFromTemplate } from '@alfresco/aca-shared/store';
 import { TranslationService } from '@alfresco/adf-core';
@@ -37,12 +37,12 @@ import { TranslationService } from '@alfresco/adf-core';
   encapsulation: ViewEncapsulation.None
 })
 export class CreateFromTemplateDialogComponent implements OnInit {
-  public form: FormGroup;
+  public form: UntypedFormGroup;
 
   constructor(
     private translationService: TranslationService,
     private store: Store<AppStore>,
-    private formBuilder: FormBuilder,
+    private formBuilder: UntypedFormBuilder,
     private dialogRef: MatDialogRef<CreateFromTemplateDialogComponent>,
     @Inject(MAT_DIALOG_DATA) public data: Node
   ) {}
@@ -79,7 +79,7 @@ export class CreateFromTemplateDialogComponent implements OnInit {
     this.dialogRef.close();
   }
 
-  private forbidSpecialCharacters({ value }: FormControl): ValidationErrors | null {
+  private forbidSpecialCharacters({ value }: UntypedFormControl): ValidationErrors | null {
     const specialCharacters = /([\*\"\<\>\\\/\?\:\|])/;
     const isValid = !specialCharacters.test(value);
 
@@ -90,7 +90,7 @@ export class CreateFromTemplateDialogComponent implements OnInit {
         };
   }
 
-  private forbidEndingDot({ value }: FormControl): ValidationErrors | null {
+  private forbidEndingDot({ value }: UntypedFormControl): ValidationErrors | null {
     const isValid: boolean = (value || '').trim().split('').pop() !== '.';
 
     return isValid
@@ -100,7 +100,7 @@ export class CreateFromTemplateDialogComponent implements OnInit {
         };
   }
 
-  private forbidOnlySpaces({ value }: FormControl): ValidationErrors | null {
+  private forbidOnlySpaces({ value }: UntypedFormControl): ValidationErrors | null {
     if (value.length) {
       const isValid = !!(value || '').trim();
 

app/src/app/store/app-store.module.ts

@@ -26,7 +26,7 @@
 import { NgModule } from '@angular/core';
 import { StoreModule } from '@ngrx/store';
 import { appReducer } from './reducers/app.reducer';
-import { StoreRouterConnectingModule, DefaultRouterStateSerializer } from '@ngrx/router-store';
+import { StoreRouterConnectingModule, FullRouterStateSerializer } from '@ngrx/router-store';
 import { EffectsModule } from '@ngrx/effects';
 import { environment } from '../../environments/environment';
 import { StoreDevtoolsModule } from '@ngrx/store-devtools';
@@ -58,7 +58,7 @@ import { INITIAL_STATE } from './initial-state';
       }
     ),
     StoreRouterConnectingModule.forRoot({
-      serializer: DefaultRouterStateSerializer,
+      serializer: FullRouterStateSerializer,
       stateKey: 'router'
     }),
     SharedStoreModule,

app/src/styles.scss

@@ -1,5 +1,5 @@
 /* You can add global styles to this file, and also import other style files */
-@import '~@alfresco/adf-core/prebuilt-themes/adf-blue-orange.css';
+@import '~@alfresco/adf-core/lib/prebuilt-themes/adf-blue-orange.css';
 @import 'app/ui/application';
 @import './app/ui/variables/font-family';