upgrade to Angular 12

dmp-frontend/angular.json

@@ -31,16 +31,26 @@
 							"node_modules/cookieconsent/build/cookieconsent.min.js",
 							"node_modules/tinymce/tinymce.min.js"
 
-						]
+						],
+						"vendorChunk": true,
+						"extractLicenses": false,
+						"buildOptimizer": false,
+						"sourceMap": true,
+						"optimization": false,
+						"namedChunks": true
 					},
 					"configurations": {
 						"production": {
+							"budgets": [
+								{
+									"type": "anyComponentStyle",
+									"maximumWarning": "6kb"
+								}
+							],
 							"optimization": true,
 							"outputHashing": "all",
 							"sourceMap": false,
-							"extractCss": true,
 							"namedChunks": false,
-							"aot": true,
 							"extractLicenses": true,
 							"vendorChunk": false,
 							"buildOptimizer": true,
@@ -52,12 +62,16 @@
 							]
 						},
 						"staging": {
+							"budgets": [
+								{
+									"type": "anyComponentStyle",
+									"maximumWarning": "6kb"
+								}
+							],
 							"optimization": true,
 							"outputHashing": "all",
 							"sourceMap": false,
-							"extractCss": true,
 							"namedChunks": false,
-							"aot": true,
 							"extractLicenses": true,
 							"vendorChunk": false,
 							"buildOptimizer": true,
@@ -68,7 +82,8 @@
 								}
 							]
 						}
-					}
+					},
+					"defaultConfiguration": ""
 				},
 				"serve": {
 					"builder": "@angular-devkit/build-angular:dev-server",
@@ -154,7 +169,7 @@
 	"schematics": {
 		"@schematics/angular:component": {
 			"prefix": "app",
-			"styleext": "scss"
+			"style": "scss"
 		},
 		"@schematics/angular:directive": {
 			"prefix": "app"

dmp-frontend/package.json

@@ -5,64 +5,64 @@
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
-    "build": "ng build --prod",
+    "build": "ng build --configuration production",
     "test": "ng test",
     "lint": "ng lint",
     "e2e": "ng e2e"
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^8.2.7",
+    "@angular/animations": "^12.2.7",
-    "@angular/common": "^8.2.7",
+    "@angular/common": "^12.2.7",
-    "@angular/compiler": "^8.2.7",
+    "@angular/compiler": "^12.2.7",
-    "@angular/core": "^8.2.7",
+    "@angular/core": "^12.2.7",
-    "@angular/forms": "^8.2.7",
+    "@angular/forms": "^12.2.7",
-    "@angular/material-moment-adapter": "^8.2.0",
+    "@angular/material-moment-adapter": "^12.2.7",
-    "@angular/platform-browser": "^8.2.7",
+    "@angular/platform-browser": "^12.2.7",
-    "@ngx-translate/core": "^11.0.1",
+    "@ngx-translate/core": "^13.0.0",
-    "@ngx-translate/http-loader": "^4.0.0",
+    "@ngx-translate/http-loader": "^6.0.0",
-    "@swimlane/ngx-datatable": "^16.0.2",
+    "@swimlane/ngx-datatable": "^20.0.0",
-    "@tinymce/tinymce-angular": "^3.6.1",
+    "@tinymce/tinymce-angular": "^4.2.4",
-    "@w11k/angular-sticky-things": "^1.1.2",
+    "@w11k/angular-sticky-things": "^1.3.2",
     "bootstrap": "^4.3.1",
     "cookieconsent": "^3.1.1",
     "core-js": "^2.5.5",
-    "file-saver": "^2.0.2",
+    "file-saver": "^2.0.5",
-    "moment": "^2.24.0",
+    "moment": "^2.29.1",
-    "moment-timezone": "^0.5.26",
+    "moment-timezone": "^0.5.33",
-    "ng-dialog-animation": "^9.0.3",
+    "ng-dialog-animation": "^9.0.4",
     "ng2-dragula": "^2.1.1",
-    "ngx-cookie-service": "^2.2.0",
+    "ngx-cookie-service": "^12.0.3",
     "ngx-cookieconsent": "^2.2.3",
-    "ngx-dropzone": "^2.2.2",
+    "ngx-dropzone": "^3.0.0",
-    "ngx-guided-tour": "^1.1.10",
+    "ngx-guided-tour": "^1.1.11",
     "ngx-matomo": "^0.1.4",
     "rxjs": "^6.3.2",
-    "tinymce": "^5.4.2",
+    "tinymce": "^5.9.2",
-    "tslib": "^1.10.0",
+    "tslib": "^2.0.0",
     "web-animations-js": "^2.3.2",
-    "zone.js": "~0.9.1"
+    "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.803.5",
+    "@angular-devkit/build-angular": "~12.2.7",
-    "@angular/cdk": "^8.2.0",
+    "@angular/cdk": "^12.2.7",
-    "@angular/material": "^8.2.0",
+    "@angular/material": "^12.2.7",
-    "@angular/cli": "8.3.5",
+    "@angular/cli": "12.2.7",
-    "@angular/compiler-cli": "^8.2.7",
+    "@angular/compiler-cli": "^12.2.7",
-    "@angular/platform-browser-dynamic": "^8.2.7",
+    "@angular/platform-browser-dynamic": "^12.2.7",
-    "@angular/router": "^8.2.7",
+    "@angular/router": "^12.2.7",
-    "@angular/language-service": "^8.2.7",
+    "@angular/language-service": "^12.2.7",
-    "@types/facebook-js-sdk": "^3.3.0",
+    "@types/facebook-js-sdk": "^3.3.5",
-    "@types/file-saver": "^2.0.1",
+    "@types/file-saver": "^2.0.3",
-    "@types/gapi": "^0.0.39",
+    "@types/gapi": "^0.0.41",
-    "@types/gapi.auth2": "^0.0.50",
+    "@types/gapi.auth2": "^0.0.55",
-    "@types/jasmine": "~3.4.0",
+    "@types/jasmine": "~3.9.1",
-    "@types/jasminewd2": "~2.0.6",
+    "@types/jasminewd2": "~2.0.10",
-    "@types/moment-timezone": "^0.5.12",
+    "@types/moment-timezone": "^0.5.13",
-    "@types/node": "^10.11.7",
+    "@types/node": "^12.11.1",
-    "codelyzer": "^5.1.1",
+    "codelyzer": "^6.0.2",
-    "ts-node": "~8.4.1",
+    "ts-node": "~10.2.1",
-    "tslint": "~5.20.0",
+    "tslint": "~6.1.0",
-    "typescript": "3.5.3"
+    "typescript": "4.3.5"
   }
 }

dmp-frontend/src/app/app-routing.module.ts

@@ -258,7 +258,7 @@ const appRoutes: Routes = [
 ];
 
 @NgModule({
-	imports: [RouterModule.forRoot(appRoutes)],
+	imports: [RouterModule.forRoot(appRoutes, { relativeLinkResolution: 'legacy' })],
 	exports: [RouterModule],
 })
 export class AppRoutingModule { }

dmp-frontend/src/app/app.component.ts

@@ -19,7 +19,7 @@ import { Location } from '@angular/common';
 import { MatomoInjector } from 'ngx-matomo';
 import { MatomoService } from './core/services/matomo/matomo-service';
 import { SideNavService } from './core/services/sidenav/side-nav.sevice';
-import { MatSidenav } from '@angular/material';
+import { MatSidenav } from '@angular/material/sidenav';
 
 
 declare const gapi: any;
@@ -39,7 +39,7 @@ export class AppComponent implements OnInit, AfterViewInit {
 	private statusChangeSubscription: Subscription;
 	onlySplash = true;
 
-	@ViewChild('sidenav', {static:false}) sidenav:MatSidenav;
+	@ViewChild('sidenav') sidenav:MatSidenav;
 
 	constructor(
 		private router: Router,

dmp-frontend/src/app/app.module.ts

@@ -2,15 +2,14 @@ import { OverlayModule } from '@angular/cdk/overlay';
 import { HttpClient, HttpClientModule } from '@angular/common/http';
 import { LOCALE_ID, NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatFormFieldDefaultOptions, MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material';
 import { MatMomentDateModule, MAT_MOMENT_DATE_FORMATS } from '@angular/material-moment-adapter';
 import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material/core';
+import { MatFormFieldDefaultOptions, MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
 import { BrowserModule, Title } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { AppRoutingModule } from '@app/app-routing.module';
 import { AppComponent } from '@app/app.component';
 import { CoreServiceModule } from '@app/core/core-service.module';
-import { CultureService } from '@app/core/services/culture/culture-service';
 import { NotificationModule } from '@app/library/notification/notification.module';
 import { LoginModule } from '@app/ui/auth/login/login.module';
 import { DatasetCreateWizardModule } from '@app/ui/dataset-create-wizard/dataset-create-wizard.module';
@@ -24,15 +23,16 @@ import { MomentUtcDateAdapter } from '@common/date/moment-utc-date-adapter';
 import { CommonHttpModule } from '@common/http/common-http.module';
 import { CommonUiModule } from '@common/ui/common-ui.module';
 import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { DragulaModule } from 'ng2-dragula';
 import { CookieService } from 'ngx-cookie-service';
 import { NgcCookieConsentConfig, NgcCookieConsentModule } from 'ngx-cookieconsent';
 import { MatomoModule } from 'ngx-matomo';
 import { ConfigurationService } from './core/services/configuration/configuration.service';
+import { CultureService } from './core/services/culture/culture-service';
 import { TranslateServerLoader } from './core/services/language/server.loader';
 import { MatomoService } from './core/services/matomo/matomo-service';
 import { GuidedTourModule } from './library/guided-tour/guided-tour.module';
 import { Oauth2DialogModule } from './ui/misc/oauth2-dialog/oauth2-dialog.module';
-import { DragulaModule } from 'ng2-dragula';
 
 // AoT requires an exported function for factories
 export function HttpLoaderFactory(http: HttpClient, appConfig: ConfigurationService) {

dmp-frontend/src/app/core/core-service.module.ts

@@ -64,7 +64,7 @@ export class CoreServiceModule {
 				'CoreModule is already loaded. Import it in the AppModule only');
 		}
 	}
-	static forRoot(): ModuleWithProviders {
+	static forRoot(): ModuleWithProviders<CoreServiceModule> {
 		return {
 			ngModule: CoreServiceModule,
 			providers: [

dmp-frontend/src/app/core/model/dataset/dataset-id.model.ts

@@ -1,5 +1,5 @@
 import { FormGroup, FormBuilder } from '@angular/forms';
-import { isNullOrUndefined } from 'util';
+import { isNullOrUndefined } from '@app/utilities/enhancers/utils';
 
 export class DatasetIdModel {
 	identifier: string;

dmp-frontend/src/app/core/services/organisation/organisation.service.ts

@@ -1,15 +1,14 @@
-import { Injectable } from "@angular/core";
 import { HttpHeaders } from "@angular/common/http";
-import { BaseHttpService } from "../http/base-http.service";
+import { Injectable } from "@angular/core";
-import { environment } from "../../../../environments/environment";
-import { Observable } from "rxjs/internal/Observable";
-import { DataTableData } from "../../model/data-table/data-table-data";
-import { OrganizationModel } from "../../model/organisation/organization";
-import { OrganisationCriteria } from "../../query/organisation/organisation-criteria";
-import { DataTableRequest } from "../../model/data-table/data-table-request";
-import { ConfigurationService } from '../configuration/configuration.service';
 import { ExternalSourceItemModel } from "@app/core/model/external-sources/external-source-item";
 import { RequestItem } from "@app/core/query/request-item";
+import { Observable } from "rxjs";
+import { DataTableData } from "../../model/data-table/data-table-data";
+import { DataTableRequest } from "../../model/data-table/data-table-request";
+import { OrganizationModel } from "../../model/organisation/organization";
+import { OrganisationCriteria } from "../../query/organisation/organisation-criteria";
+import { ConfigurationService } from '../configuration/configuration.service';
+import { BaseHttpService } from "../http/base-http.service";
 
 @Injectable()
 export class OrganisationService {
@@ -27,14 +26,14 @@ export class OrganisationService {
 	}
 
 	public searchInternalOrganisations(dataTableRequest: DataTableRequest<OrganisationCriteria>): Observable<DataTableData<OrganizationModel>> {
-		return this.http.post<DataTableData<OrganizationModel>>(this.actionUrl + 'internal/organisations', dataTableRequest , { headers: this.headers });
+		return this.http.post<DataTableData<OrganizationModel>>(this.actionUrl + 'internal/organisations', dataTableRequest, { headers: this.headers });
 	}
 
 	public searchGeneralOrganisations(dataTableRequest: RequestItem<OrganisationCriteria>): Observable<ExternalSourceItemModel[]> {
-		return this.http.post<ExternalSourceItemModel[]>(this.actionUrl + 'general/organisations', dataTableRequest , { headers: this.headers });
+		return this.http.post<ExternalSourceItemModel[]>(this.actionUrl + 'general/organisations', dataTableRequest, { headers: this.headers });
 	}
 
 	public searchPublicOrganisations(dataTableRequest: DataTableRequest<OrganisationCriteria>): Observable<DataTableData<OrganizationModel>> {
-		return this.http.post<DataTableData<OrganizationModel>>(this.actionUrl + 'public/organisations', dataTableRequest , { headers: this.headers });
+		return this.http.post<DataTableData<OrganizationModel>>(this.actionUrl + 'public/organisations', dataTableRequest, { headers: this.headers });
 	}
 }

dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.ts

@@ -2,7 +2,8 @@ import { FocusMonitor } from '@angular/cdk/a11y';
 import { BACKSPACE, COMMA, ENTER } from '@angular/cdk/keycodes';
 import { Component, DoCheck, ElementRef, EventEmitter, Input, OnChanges, OnDestroy, OnInit, Optional, Output, Self, SimpleChanges, TemplateRef, ViewChild } from '@angular/core';
 import { ControlValueAccessor, FormGroupDirective, NgControl, NgForm } from '@angular/forms';
-import { ErrorStateMatcher, MatChipInputEvent, mixinErrorState } from '@angular/material';
+import { MatChipInputEvent } from '@angular/material/chips';
+import { ErrorStateMatcher, mixinErrorState } from '@angular/material/core';
 import { MatAutocomplete, MatAutocompleteSelectedEvent, MatAutocompleteTrigger } from '@angular/material/autocomplete';
 import { MatFormFieldControl } from '@angular/material/form-field';
 import { AutoCompleteGroup } from '@app/library/auto-complete/auto-complete-group';

dmp-frontend/src/app/library/deactivate/deactivate.component.ts

@@ -1,6 +1,7 @@
-import { HostListener } from '@angular/core';
+import { HostListener, Directive } from '@angular/core';
 import { BaseComponent } from '@common/base/base.component';
 
+@Directive()
 export abstract class CheckDeactivateBaseComponent extends BaseComponent {
 
 	protected constructor() { super(); }

dmp-frontend/src/app/library/guided-tour/guided-tour.component.ts

@@ -17,7 +17,7 @@ export class GuidedTourComponent implements AfterViewInit, OnDestroy {
     @Input() public minimalTourStepWidth?= 500;
     @Input() public skipText?= 'Leave Tour';
     @Input() public nextText?= 'Got it!';
-    @ViewChild('tourStep', { static: false }) public tourStep: ElementRef;
+    @ViewChild('tourStep') public tourStep: ElementRef;
     public highlightPadding = 4;
     public currentTourStep: TourStep = null;
     public selectedElementRect: DOMRect = null;

dmp-frontend/src/app/library/guided-tour/guided-tour.module.ts

@@ -12,7 +12,7 @@ import { WindowRefService } from './windowref.service';
   entryComponents: [GuidedTourComponent],
 })
 export class GuidedTourModule {
-  public static forRoot(): ModuleWithProviders {
+  public static forRoot(): ModuleWithProviders<GuidedTourModule> {
     return {
       ngModule: GuidedTourModule,
       providers: [ErrorHandler, GuidedTourService],

dmp-frontend/src/app/ui/admin/dataset-profile/dataset-profile.module.ts

@@ -1,5 +1,9 @@
+import { DragDropModule } from '@angular/cdk/drag-drop';
 import { NgModule } from '@angular/core';
+//matrial
+import { MatBadgeModule } from '@angular/material/badge';
 import { FormattingModule } from '@app/core/formatting.module';
+import { AutoCompleteModule } from '@app/library/auto-complete/auto-complete.module';
 import { DatasetProfileRoutingModule } from '@app/ui/admin/dataset-profile/dataset-profile.routing';
 import { DatasetProfileEditorCompositeFieldComponent } from '@app/ui/admin/dataset-profile/editor/components/composite-field/dataset-profile-editor-composite-field.component';
 import { DatasetProfileEditorDefaultValueComponent } from '@app/ui/admin/dataset-profile/editor/components/composite-profile-editor-default-value/component-profile-editor-default-value.component';
@@ -26,11 +30,12 @@ import { DialogConfirmationUploadDatasetProfiles } from '@app/ui/admin/dataset-p
 import { DatasetProfileListingComponent } from '@app/ui/admin/dataset-profile/listing/dataset-profile-listing.component';
 import { DatasetModule } from '@app/ui/dataset/dataset.module';
 import { FormProgressIndicationModule } from '@app/ui/misc/dataset-description-form/components/form-progress-indication/form-progress-indication.module';
-import { TableOfContentsModule } from '@app/ui/misc/dataset-description-form/tableOfContentsMaterial/table-of-contents.module';
 import { CommonFormsModule } from '@common/forms/common-forms.module';
 import { ConfirmationDialogModule } from '@common/modules/confirmation-dialog/confirmation-dialog.module';
 import { CommonUiModule } from '@common/ui/common-ui.module';
 import { AngularStickyThingsModule } from '@w11k/angular-sticky-things';
+import { DragulaModule } from 'ng2-dragula';
+import { NgxDropzoneModule } from 'ngx-dropzone';
 import { DatasetProfileEditorCurrencyFieldComponent } from './editor/components/field-type/currency/dataset-profile-editor-currency-field.component';
 import { DatasetProfileEditorDataRepositoriesFieldComponent } from './editor/components/field-type/data-repositories/dataset-profile-editor-data-repositories-field.component';
 import { DatasetProfileEditorDatasetIdentifierFieldComponent } from './editor/components/field-type/dataset-identifier/dataset-profile-editor-dataset-identifier-field.component';
@@ -41,20 +46,13 @@ import { DatasetProfileEditorResearchersFieldComponent } from './editor/componen
 import { DatasetProfileEditorServicesFieldComponent } from './editor/components/field-type/services/dataset-profile-editor-services-field.component';
 import { DatasetProfileEditorTagsFieldComponent } from './editor/components/field-type/tags/dataset-profile-editor-tags-field.component';
 import { DatasetProfileEditorValidatorFieldComponent } from './editor/components/field-type/validator/dataset-profile-editor-validator-field.component';
-import { NgxDropzoneModule } from 'ngx-dropzone';
+import { FinalPreviewComponent } from './editor/components/final-preview/final-preview.component';
+import { DatasetProfileEditorSectionFieldSetComponent } from './editor/components/section-fieldset/dataset-profile-editor-section-fieldset.component';
 import { ParseStatus } from './listing/pipe/parse-status.pipe';
 import { DatasetProfileTableOfContents } from './table-of-contents/table-of-contents';
 import { DatasetProfileTableOfContentsInternalSection } from './table-of-contents/table-of-contents-internal-section/table-of-contents-internal-section';
-import { VisibilityRulesService } from '@app/ui/misc/dataset-description-form/visibility-rules/visibility-rules.service';
-import {DragDropModule} from '@angular/cdk/drag-drop';
-import {DragulaModule} from 'ng2-dragula';
 
 
-//matrial
-import {MatBadgeModule} from '@angular/material/badge';
-import { DatasetProfileEditorSectionFieldSetComponent } from './editor/components/section-fieldset/dataset-profile-editor-section-fieldset.component';
-import { FinalPreviewComponent } from './editor/components/final-preview/final-preview.component';
-import { AutoCompleteModule } from '@app/library/auto-complete/auto-complete.module';
 
 @NgModule({
 	imports: [

dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/composite-field/dataset-profile-editor-composite-field.component.ts

@@ -7,7 +7,7 @@ import { ValidationType } from '@app/core/common/enum/validation-type';
 import { MatCheckboxChange } from '@angular/material/checkbox';
 import { DatasetDescriptionCompositeFieldEditorModel, DatasetDescriptionFieldEditorModel, DatasetDescriptionFormEditorModel, DatasetDescriptionSectionEditorModel } from '@app/ui/misc/dataset-description-form/dataset-description-form.model';
 import { DatasetProfileFieldViewStyle } from '@app/core/common/enum/dataset-profile-field-view-style';
-import { MatDialog } from '@angular/material';
+import { MatDialog } from '@angular/material/dialog';
 import { ConfirmationDialogComponent } from '@common/modules/confirmation-dialog/confirmation-dialog.component';
 import { TranslateService } from '@ngx-translate/core';
 import { ViewStyleType } from '../field/view-style-enum';

dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field/dataset-profile-editor-field.component.ts

@@ -10,7 +10,9 @@ import { BaseComponent } from '@common/base/base.component';
 import { Subscription } from 'rxjs';
 import { ViewStyleType } from './view-style-enum';
 import { DatasetProfileComboBoxType } from '@app/core/common/enum/dataset-profile-combo-box-type';
-import { ErrorStateMatcher, MatDialog, MatSlideToggleChange } from '@angular/material';
+import { ErrorStateMatcher } from '@angular/material/core';
+import { MatDialog } from '@angular/material/dialog';
+import { MatSlideToggleChange } from '@angular/material/slide-toggle';
 import { Field } from '@app/core/model/admin/dataset-profile/dataset-profile';
 import { DatasetProfileInternalDmpEntitiesType } from '@app/core/common/enum/dataset-profile-internal-dmp-entities-type';
 import { FieldEditorModel } from '../../../admin/field-editor-model';

dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.ts

@@ -43,7 +43,7 @@ import { EditorCustomValidators, EditorCustomValidatorsEnum } from './custom-val
 import { GENERAL_ANIMATIONS, STEPPER_ANIMATIONS } from './animations/animations';
 import { DatasetProfileComboBoxType } from '@app/core/common/enum/dataset-profile-combo-box-type';
 import { UserService } from '@app/core/services/user/user.service';
-import { MatInput } from '@angular/material';
+import { MatInput } from '@angular/material/input';
 import { CheckDeactivateBaseComponent } from '@app/library/deactivate/deactivate.component';
 
 
@@ -72,7 +72,7 @@ export class DatasetProfileEditorComponent extends CheckDeactivateBaseComponent
 	newVersionId: string;
 	dataWizardModel: DatasetWizardModel;
 	breadCrumbs: Observable<BreadcrumbItem[]>;
-	@ViewChild('stepper', { static: false }) stepper: MatHorizontalStepper;
+	@ViewChild('stepper') stepper: MatHorizontalStepper;
 	viewOnly = false;
 	nestedCount: number[] = [];
 	nestedIndex: number = 0;

dmp-frontend/src/app/ui/admin/dataset-profile/table-of-contents/table-of-contents.ts

@@ -8,7 +8,7 @@ import { SimpleChanges } from '@angular/core';
 import { NewEntryType, TableUpdateInfo, ToCEntry, ToCEntryType } from './table-of-contents-entry';
 import { DragulaService } from 'ng2-dragula';
 import { FormArray } from '@angular/forms';
-import { MatSnackBar, MatSnackBarConfig } from '@angular/material';
+import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar';
 import { TranslateService } from '@ngx-translate/core';
 import { ContentObserver } from '@angular/cdk/observers';
 

dmp-frontend/src/app/ui/admin/dmp-profile/editor/dmp-profile-editor.component.ts

@@ -23,7 +23,7 @@ import { map, takeUntil } from 'rxjs/operators';
 import { ConfigurationService } from '@app/core/services/configuration/configuration.service';
 import { HttpClient } from '@angular/common/http';
 import { MatomoService } from '@app/core/services/matomo/matomo-service';
-import { MatDialog } from '@angular/material';
+import { MatDialog } from '@angular/material/dialog';
 import { ConfirmationDialogComponent } from '@common/modules/confirmation-dialog/confirmation-dialog.component';
 
 

dmp-frontend/src/app/ui/admin/dmp-profile/listing/criteria/dmp-profile-criteria.component.ts

@@ -1,5 +1,5 @@
 import { Component, Input, OnInit } from '@angular/core';
-import { MatDialog } from '@angular/material';
+import { MatDialog } from '@angular/material/dialog';
 import { GrantListingModel } from '@app/core/model/grant/grant-listing';
 import { DmpCriteria } from '@app/core/query/dmp/dmp-criteria';
 import { DmpProfileCriteria } from '@app/core/query/dmp/dmp-profile-criteria';

dmp-frontend/src/app/ui/admin/dmp-profile/listing/dmp-profile-listing.component.ts

@@ -2,7 +2,7 @@
 import { DataSource } from '@angular/cdk/table';
 import { HttpClient } from '@angular/common/http';
 import { Component, OnInit, ViewChild } from '@angular/core';
-import { MatDialog } from '@angular/material';
+import { MatDialog } from '@angular/material/dialog';
 import { MatPaginator, PageEvent } from '@angular/material/paginator';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { MatSort } from '@angular/material/sort';

dmp-frontend/src/app/ui/admin/user/listing/user-listing.component.ts

@@ -19,7 +19,7 @@ import { BaseComponent } from '@common/base/base.component';
 import * as FileSaver from 'file-saver';
 import { MatomoService } from '@app/core/services/matomo/matomo-service';
 import { HttpClient } from '@angular/common/http';
-import { MatTableDataSource } from '@angular/material';
+import { MatTableDataSource } from '@angular/material/table';
 
 export class UsersDataSource extends DataSource<UserListingModel> {
 

dmp-frontend/src/app/ui/dashboard/dashboard.component.ts

@@ -25,7 +25,7 @@ import { BreadcrumbItem } from '../misc/breadcrumb/definition/breadcrumb-item';
 import { IBreadCrumbComponent } from '../misc/breadcrumb/definition/IBreadCrumbComponent';
 import { DmpCriteria } from '@app/core/query/dmp/dmp-criteria';
 import { DatasetCriteria } from '@app/core/query/dataset/dataset-criteria';
-import { MatDialog } from '@angular/material';
+import { MatDialog } from '@angular/material/dialog';
 import { StartNewDmpDialogComponent } from '../dmp/start-new-dmp-dialogue/start-new-dmp-dialog.component';
 import { StartNewDatasetDialogComponent } from '../dmp/start-new-dataset-dialogue/start-new-dataset-dialog.component';
 import { DatasetWizardEditorModel } from '../dataset/dataset-wizard/dataset-wizard-editor.model';

dmp-frontend/src/app/ui/dashboard/dataset-info-counter/dataset-info-counter.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { DatasetInfoCounterComponent } from './dataset-info-counter.component';
 
@@ -6,7 +6,7 @@ describe('DatasetInfoCounterComponent', () => {
   let component: DatasetInfoCounterComponent;
   let fixture: ComponentFixture<DatasetInfoCounterComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [ DatasetInfoCounterComponent ]
     })

dmp-frontend/src/app/ui/dashboard/drafts/drafts.component.ts

@@ -14,7 +14,7 @@ import { ConfirmationDialogComponent } from '@common/modules/confirmation-dialog
 import { DatasetCopyDialogueComponent } from '@app/ui/dataset/dataset-wizard/dataset-copy-dialogue/dataset-copy-dialogue.component';
 import { FormControl, FormBuilder } from '@angular/forms';
 import { BaseComponent } from '@common/base/base.component';
-import { MatDialog } from '@angular/material';
+import { MatDialog } from '@angular/material/dialog';
 import { DatasetWizardService } from '@app/core/services/dataset-wizard/dataset-wizard.service';
 import { SnackBarNotificationLevel } from '@app/core/services/notification/ui-notification-service';
 import * as FileSaver from 'file-saver';

dmp-frontend/src/app/ui/dashboard/recent-edited-activity/recent-edited-activity.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit, Output, EventEmitter } from '@angular/core';
-import { MatDialog } from '@angular/material';
+import { MatDialog } from '@angular/material/dialog';
 import { Router } from '@angular/router';
 import { RecentActivityType } from '@app/core/common/enum/recent-activity-type';
 import { Principal } from '@app/core/model/auth/principal';

dmp-frontend/src/app/ui/dashboard/recent-edited-dataset-activity/recent-edited-dataset-activity.component.ts

@@ -10,7 +10,7 @@ import { TranslateService } from '@ngx-translate/core';
 import { EnumUtils } from '@app/core/services/utilities/enum-utils.service';
 import { FormControl, FormBuilder } from '@angular/forms';
 import { DatasetCopyDialogueComponent } from '@app/ui/dataset/dataset-wizard/dataset-copy-dialogue/dataset-copy-dialogue.component';
-import { MatDialog } from '@angular/material';
+import { MatDialog } from '@angular/material/dialog';
 import { debounceTime, takeUntil } from 'rxjs/operators';
 import { Router } from '@angular/router';
 import { DatasetWizardService } from '@app/core/services/dataset-wizard/dataset-wizard.service';

dmp-frontend/src/app/ui/dashboard/recent-edited-dmp-activity/recent-edited-dmp-activity.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit, Output, EventEmitter } from '@angular/core';
-import { MatDialog } from '@angular/material';
+import { MatDialog } from '@angular/material/dialog';
 import { Router } from '@angular/router';
 import { RecentActivityType } from '@app/core/common/enum/recent-activity-type';
 import { Principal } from '@app/core/model/auth/principal';

dmp-frontend/src/app/ui/dataset-create-wizard/dataset-create-wizard.component.ts

@@ -24,7 +24,7 @@ import { takeUntil } from 'rxjs/operators';
 })
 export class DatasetCreateWizard extends CheckDeactivateBaseComponent implements OnInit, IBreadCrumbComponent {
 	breadCrumbs: Observable<BreadcrumbItem[]>;
-	@ViewChild(DatasetEditorWizardComponent, { static: false }) datasetEditorWizardComponent: DatasetEditorWizardComponent;
+	@ViewChild(DatasetEditorWizardComponent) datasetEditorWizardComponent: DatasetEditorWizardComponent;
 	isLinear = false;
 	isNew = true;
 	isSubmitted = false;

dmp-frontend/src/app/ui/dataset/dataset-wizard/dataset-wizard.component.ts

@@ -37,7 +37,7 @@ import { LockService } from '@app/core/services/lock/lock.service';
 import { Location } from '@angular/common';
 import { LockModel } from '@app/core/model/lock/lock.model';
 import { Guid } from '@common/types/guid';
-import { isNullOrUndefined } from 'util';
+import { isNullOrUndefined } from '@app/utilities/enhancers/utils';
 import { AuthService } from '@app/core/services/auth/auth.service';
 import { ConfigurationService } from '@app/core/services/configuration/configuration.service';
 import { SaveType } from '@app/core/common/enum/save-type';
@@ -97,7 +97,7 @@ export class DatasetWizardComponent extends CheckDeactivateBaseComponent impleme
 	//the table seraches for elements to scroll on page with id (TOCENTRY_ID_PREFIX+fieldsetId<Tocentry>)
 	TOCENTRY_ID_PREFIX="TocEntRy";
 	showtocentriesErrors = false;
-	@ViewChild('table0fContents', {static: false}) table0fContents: TableOfContents;
+	@ViewChild('table0fContents') table0fContents: TableOfContents;
 	hintErrors: boolean = false;
 	datasetIsOnceSaved = false;
 

dmp-frontend/src/app/ui/dataset/dataset-wizard/external-references/dataset-external-references-editor.component.ts

@@ -24,7 +24,7 @@ import { Observable } from 'rxjs';
 import { takeUntil, map } from 'rxjs/operators';
 import { ENTER, COMMA } from '@angular/cdk/keycodes';
 import { MatChipInputEvent } from '@angular/material/chips';
-import { isNullOrUndefined } from 'util';
+import { isNullOrUndefined } from '@app/utilities/enhancers/utils';
 import { ExternalDataRepositoryService } from '@app/core/services/external-sources/data-repository/extternal-data-repository.service';
 import { ExternalDatasetService } from '@app/core/services/external-sources/dataset/external-dataset.service';
 import { ExternalRegistryService } from '@app/core/services/external-sources/registry/external-registry.service';

dmp-frontend/src/app/ui/dataset/listing/criteria/dataset-criteria-dialogue/dataset-criteria-dialog.component.ts

@@ -1,5 +1,5 @@
 import { Inject, Component, ViewChild, OnInit, Output, EventEmitter } from '@angular/core';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { FormGroup } from '@angular/forms';
 import { DatasetCriteriaComponent } from '../dataset-criteria.component';
 import { DatasetCriteria } from '@app/core/query/dataset/dataset-criteria';

dmp-frontend/src/app/ui/dataset/listing/criteria/dataset-criteria.component.ts

@@ -34,7 +34,7 @@ import { TranslateService } from '@ngx-translate/core';
 import { Observable } from 'rxjs';
 import { map, takeUntil } from 'rxjs/operators';
 import { AuthService } from '@app/core/services/auth/auth.service';
-import { isNullOrUndefined } from 'util';
+import { isNullOrUndefined } from '@app/utilities/enhancers/utils';
 import { ExploreDmpCriteriaModel } from '@app/core/query/explore-dmp/explore-dmp-criteria';
 import { DatasetProfileModel } from '@app/core/model/dataset/dataset-profile';
 

dmp-frontend/src/app/ui/dataset/listing/dataset-listing.component.ts

@@ -18,9 +18,9 @@ import { Observable, of as observableOf } from 'rxjs';
 import { debounceTime, takeUntil } from 'rxjs/operators';
 import { ExternalTagEditorModel, DatasetWizardEditorModel } from '../dataset-wizard/dataset-wizard-editor.model';
 import { AuthService } from '@app/core/services/auth/auth.service';
-import { isNullOrUndefined } from 'util';
+import { isNullOrUndefined } from '@app/utilities/enhancers/utils';
 import { DatasetCriteriaDialogComponent } from './criteria/dataset-criteria-dialogue/dataset-criteria-dialog.component';
-import { MatDialog } from '@angular/material';
+import { MatDialog } from '@angular/material/dialog';
 import { FormGroup, FormBuilder, FormControl } from '@angular/forms';
 import { RecentActivityOrder } from '@app/core/common/enum/recent-activity-order';
 import { EnumUtils } from '@app/core/services/utilities/enum-utils.service';
@@ -39,7 +39,7 @@ import { HttpClient } from '@angular/common/http';
 export class DatasetListingComponent extends BaseComponent implements OnInit, IBreadCrumbComponent {
 
 	@ViewChild(MatPaginator, { static: true }) _paginator: MatPaginator;
-	@ViewChild(MatSort, { static: false }) sort: MatSort;
+	@ViewChild(MatSort) sort: MatSort;
 	// @ViewChild(DatasetCriteriaComponent, { static: true }) criteria: DatasetCriteriaComponent;
 
 	breadCrumbs: Observable<BreadcrumbItem[]>;

dmp-frontend/src/app/ui/dataset/listing/listing-item/dataset-listing-item.component.ts

@@ -8,7 +8,7 @@ import { BaseComponent } from '@common/base/base.component';
 import { takeUntil } from 'rxjs/operators';
 import * as FileSaver from 'file-saver';
 import { DmpInvitationDialogComponent } from '@app/ui/dmp/invitation/dmp-invitation-dialog.component';
-import { MatDialog } from '@angular/material';
+import { MatDialog } from '@angular/material/dialog';
 import { DatasetCopyDialogueComponent } from '../../dataset-wizard/dataset-copy-dialogue/dataset-copy-dialogue.component';
 import { FormControl } from '@angular/forms';
 import { TranslateService } from '@ngx-translate/core';

dmp-frontend/src/app/ui/dataset/overview/dataset-overview.component.ts

@@ -7,7 +7,7 @@ import { ActivatedRoute, Router, Params } from '@angular/router';
 import { DatasetService } from '@app/core/services/dataset/dataset.service';
 import { TranslateService } from '@ngx-translate/core';
 import { AuthService } from '@app/core/services/auth/auth.service';
-import { MatDialog } from '@angular/material';
+import { MatDialog } from '@angular/material/dialog';
 import { SnackBarNotificationLevel, UiNotificationService } from '@app/core/services/notification/ui-notification-service';
 import { ConfigurationService } from '@app/core/services/configuration/configuration.service';
 import { Oauth2DialogService } from '@app/ui/misc/oauth2-dialog/service/oauth2-dialog.service';

dmp-frontend/src/app/ui/dmp/clone/dmp-clone.component.ts

@@ -28,7 +28,7 @@ import { DatasetService } from '@app/core/services/dataset/dataset.service';
 import { DmpEditorModel } from '../editor/dmp-editor.model';
 import { DatasetWizardEditorModel } from '@app/ui/dataset/dataset-wizard/dataset-wizard-editor.model';
 import { ConfirmationDialogComponent } from '@common/modules/confirmation-dialog/confirmation-dialog.component';
-import { MatDialog } from '@angular/material';
+import { MatDialog } from '@angular/material/dialog';
 
 
 @Component({

dmp-frontend/src/app/ui/dmp/editor/dataset-editor-details/dataset-editor-details.component.ts

@@ -3,7 +3,9 @@ import { OnInit, Component, Input, Output, EventEmitter } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
 import { ConfigurationService } from '@app/core/services/configuration/configuration.service';
 import { ExternalSourcesService } from '@app/core/services/external-sources/external-sources.service';
-import { MatDialog, MatSnackBar, MatChipInputEvent } from '@angular/material';
+import { MatChipInputEvent } from '@angular/material/chips';
+import { MatDialog } from '@angular/material/dialog';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { DatasetWizardService } from '@app/core/services/dataset-wizard/dataset-wizard.service';
 import { ActivatedRoute, Router } from '@angular/router';
 import { DmpService } from '@app/core/services/dmp/dmp.service';
@@ -19,7 +21,7 @@ import { DatasetProfileModel } from '@app/core/model/dataset/dataset-profile';
 import { LockModel } from '@app/core/model/lock/lock.model';
 import { takeUntil, map, catchError } from 'rxjs/operators';
 import { RequestItem } from '@app/core/query/request-item';
-import { isNullOrUndefined } from 'util';
+import { isNullOrUndefined } from '@app/utilities/enhancers/utils';
 import { interval, Observable, of as observableOf } from 'rxjs';
 import { Guid } from '@common/types/guid';
 import { Location } from '@angular/common';

dmp-frontend/src/app/ui/dmp/editor/dataset-info/dataset-info.component.ts

@@ -7,7 +7,7 @@ import { MultipleAutoCompleteConfiguration } from '@app/library/auto-complete/mu
 import { map, takeUntil } from 'rxjs/operators';
 import { Observable } from 'rxjs';
 import { ExternalSourcesService } from '@app/core/services/external-sources/external-sources.service';
-import { MatDialog } from '@angular/material';
+import { MatDialog } from '@angular/material/dialog';
 import { DatasetProfileModel } from '@app/core/model/dataset/dataset-profile';
 import { DatasetProfileCriteria } from '@app/core/query/dataset-profile/dataset-profile-criteria';
 import { DataTableRequest } from '@app/core/model/data-table/data-table-request';

dmp-frontend/src/app/ui/dmp/editor/dmp-editor.model.ts

@@ -21,7 +21,7 @@ import { BackendErrorValidator } from '@common/forms/validation/custom-validator
 import { ValidationErrorModel } from '@common/forms/validation/error-model/validation-error-model';
 import { ValidationContext } from '@common/forms/validation/validation-context';
 import { ExtraPropertiesFormModel } from './general-tab/extra-properties-form.model';
-import { isNullOrUndefined } from 'util';
+import { isNullOrUndefined } from '@app/utilities/enhancers/utils';
 import { DatasetWizardEditorModel } from '@app/ui/dataset/dataset-wizard/dataset-wizard-editor.model';
 import { DatasetsAutoCompleteFieldDataEditorModel } from '@app/ui/admin/dataset-profile/admin/field-data/datasets-autocomplete-field-data-editor-mode';
 import { DatasetWizardModel } from '@app/core/model/dataset/dataset-wizard';

dmp-frontend/src/app/ui/dmp/editor/general-tab/extra-properties-form.model.ts

@@ -2,7 +2,7 @@ import { ValidationContext } from '@common/forms/validation/validation-context';
 import { FormGroup, FormBuilder, Validators } from '@angular/forms';
 import { BackendErrorValidator } from '@common/forms/validation/custom-validator';
 import { CostModel } from '@app/core/model/dmp/cost';
-import { isNullOrUndefined } from 'util';
+import { isNullOrUndefined } from '@app/utilities/enhancers/utils';
 import { CostEditorModel } from '../cost-editor/add-cost/add-cost.model';
 import { ValidationErrorModel } from '@common/forms/validation/error-model/validation-error-model';
 

dmp-frontend/src/app/ui/dmp/editor/general-tab/general-tab.component.ts

@@ -21,7 +21,7 @@ import { TranslateService } from '@ngx-translate/core';
 import { Observable } from 'rxjs';
 import { map, takeUntil } from 'rxjs/operators';
 import { AddOrganizationComponent } from '../add-organization/add-organization.component';
-import { isNullOrUndefined } from 'util';
+import { isNullOrUndefined } from '@app/utilities/enhancers/utils';
 import { ConfigurationService } from '@app/core/services/configuration/configuration.service';
 import { LanguageInfoService } from '@app/core/services/culture/language-info-service';
 import { LanguageInfo } from '@app/core/model/language-info';

dmp-frontend/src/app/ui/dmp/editor/license-info/license-info.component.ts

@@ -5,8 +5,8 @@ import { map, takeUntil } from 'rxjs/operators';
 import { ExternalSourceItemModel } from '@app/core/model/external-sources/external-source-item';
 import { Observable } from 'rxjs';
 import { ExternalSourcesService } from '@app/core/services/external-sources/external-sources.service';
-import { isNullOrUndefined } from 'util';
+import { isNullOrUndefined } from '@app/utilities/enhancers/utils';
-import { MatDialog } from '@angular/material';
+import { MatDialog } from '@angular/material/dialog';
 import { SingleAutoCompleteConfiguration } from '@app/library/auto-complete/single/single-auto-complete-configuration';
 import { LanguageInfo } from '@app/core/model/language-info';
 import { LanguageInfoService } from '@app/core/services/culture/language-info-service';

dmp-frontend/src/app/ui/dmp/editor/main-info/main-info.component.ts

@@ -8,8 +8,8 @@ import { map, takeUntil } from 'rxjs/operators';
 import { ExternalSourceItemModel } from '@app/core/model/external-sources/external-source-item';
 import { Observable } from 'rxjs';
 import { ExternalSourcesService } from '@app/core/services/external-sources/external-sources.service';
-import { isNullOrUndefined } from 'util';
+import { isNullOrUndefined } from '@app/utilities/enhancers/utils';
-import { MatDialog } from '@angular/material';
+import { MatDialog } from '@angular/material/dialog';
 import { AddOrganizationComponent } from '../add-organization/add-organization.component';
 import { AddResearcherComponent } from '../add-researcher/add-researcher.component';
 import { SingleAutoCompleteConfiguration } from '@app/library/auto-complete/single/single-auto-complete-configuration';

dmp-frontend/src/app/ui/dmp/listing/criteria/dmp-criteria-dialog.component.ts

@@ -1,5 +1,5 @@
 import { Inject, Component, ViewChild, OnInit, Output, EventEmitter } from '@angular/core';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { DmpCriteriaComponent } from './dmp-criteria.component';
 import { DmpCriteria } from '@app/core/query/dmp/dmp-criteria';
 import { FormGroup } from '@angular/forms';

dmp-frontend/src/app/ui/dmp/listing/criteria/dmp-criteria.component.ts

@@ -20,7 +20,7 @@ import { ValidationErrorModel } from '@common/forms/validation/error-model/valid
 import { TranslateService } from '@ngx-translate/core';
 import { map, takeUntil } from 'rxjs/operators';
 import { AuthService } from '@app/core/services/auth/auth.service';
-import { isNullOrUndefined } from 'util';
+import { isNullOrUndefined } from '@app/utilities/enhancers/utils';
 import { DatasetService } from '@app/core/services/dataset/dataset.service';
 import { DatasetProfileModel } from '@app/core/model/dataset/dataset-profile';
 import { Observable } from 'rxjs';

dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.ts

@@ -21,7 +21,7 @@ import { debounceTime, takeUntil } from 'rxjs/operators';
 import { GrantService } from "@app/core/services/grant/grant.service";
 import { DmpUploadDialogue } from './upload-dialogue/dmp-upload-dialogue.component';
 import { UiNotificationService, SnackBarNotificationLevel } from '@app/core/services/notification/ui-notification-service';
-import { isNullOrUndefined } from 'util';
+import { isNullOrUndefined } from '@app/utilities/enhancers/utils';
 import { AuthService } from '@app/core/services/auth/auth.service';
 import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
 import { DmpCriteriaDialogComponent } from './criteria/dmp-criteria-dialog.component';
@@ -40,7 +40,7 @@ import { MatomoService } from '@app/core/services/matomo/matomo-service';
 export class DmpListingComponent extends BaseComponent implements OnInit, IBreadCrumbComponent {
 
 	@ViewChild(MatPaginator, { static: true }) _paginator: MatPaginator;
-	@ViewChild(MatSort, { static: false }) sort: MatSort;
+	@ViewChild(MatSort) sort: MatSort;
 	// @ViewChild(DmpCriteriaComponent, { static: true }) criteria: DmpCriteriaComponent;
 
 	breadCrumbs: Observable<BreadcrumbItem[]> = observableOf([{ parentComponentName: null, label: 'DMPs', url: "/plans" }]);

dmp-frontend/src/app/ui/dmp/overview/dmp-overview.component.ts

@@ -65,7 +65,7 @@ export class DmpOverviewComponent extends BaseComponent implements OnInit {
 	version: VersionListingModel;
 	private oauthLock: boolean;
 
-	@ViewChild('doi', { static: false })
+	@ViewChild('doi')
 	doi: ElementRef;
 
 	formGroup: FormGroup;

dmp-frontend/src/app/ui/dmp/wizard/listing/dmp-wizard-dataset-listing.component.ts

@@ -22,9 +22,9 @@ import { takeUntil } from 'rxjs/operators';
 })
 export class DmpWizardDatasetListingComponent extends BaseComponent implements OnInit {
 
-	@ViewChild(MatPaginator, { static: false }) _paginator: MatPaginator;
+	@ViewChild(MatPaginator) _paginator: MatPaginator;
-	@ViewChild(MatSort, { static: false }) sort: MatSort;
+	@ViewChild(MatSort) sort: MatSort;
-	@ViewChild(DatasetCriteriaComponent, { static: false }) criteria: DatasetCriteriaComponent;
+	@ViewChild(DatasetCriteriaComponent) criteria: DatasetCriteriaComponent;
 
 
 	titlePrefix: String;

dmp-frontend/src/app/ui/misc/criteria/base-criteria.component.ts

@@ -1,8 +1,9 @@
-import { OnInit } from '@angular/core';
+import { OnInit, Directive } from '@angular/core';
 import { AbstractControl, FormArray, FormControl, FormGroup } from '@angular/forms';
 import { BaseComponent } from '@common/base/base.component';
 import { ValidationErrorModel } from '@common/forms/validation/error-model/validation-error-model';
 
+@Directive()
 export class BaseCriteriaComponent extends BaseComponent implements OnInit {
 
 	public refreshCallback: Function = null;

dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-field/form-field.component.ts

@@ -27,9 +27,9 @@ import { DataRepositoryCriteria } from '@app/core/query/data-repository/data-rep
 import { RegistryCriteria } from '@app/core/query/registry/registry-criteria';
 import { ServiceCriteria } from '@app/core/query/service/service-criteria';
 import { TagCriteria } from '@app/core/query/tag/tag-criteria';
-import { isNullOrUndefined } from 'util';
+import { isNullOrUndefined } from '@app/utilities/enhancers/utils';
 import { ExternalTagEditorModel } from '@app/ui/dataset/dataset-wizard/dataset-wizard-editor.model';
-import { MatChipInputEvent } from '@angular/material';
+import { MatChipInputEvent } from '@angular/material/chips';
 import { ENTER, COMMA } from '@angular/cdk/keycodes';
 import { DatasetIdModel } from '@app/core/model/dataset/dataset-id.model';
 import { LocalFetchModel } from '@app/core/model/local-fetch/local-fetch.model';

dmp-frontend/src/app/ui/misc/dataset-description-form/dataset-description-form.component.ts

@@ -13,7 +13,7 @@ import { BaseComponent } from '@common/base/base.component';
 })
 export class DatasetDescriptionFormComponent extends BaseComponent implements OnInit, AfterViewInit, OnChanges {
 
-	@ViewChild('stepper', { static: false }) stepper: MatHorizontalStepper;
+	@ViewChild('stepper') stepper: MatHorizontalStepper;
 	@Input() path: string;
 	@Input() form: FormGroup;
 	@Input() visibilityRules: Rule[] = [];

dmp-frontend/src/app/ui/misc/dataset-description-form/dataset-description.component.ts

@@ -1,6 +1,6 @@
 import { AfterViewInit, Component, Input, OnChanges, OnInit, SimpleChanges, ViewChild, Output, EventEmitter } from '@angular/core';
 import { AbstractControl, AbstractControlOptions, FormArray, FormGroup } from '@angular/forms';
-import { MatExpansionPanel } from '@angular/material';
+import { MatExpansionPanel } from '@angular/material/expansion';
 import { MatHorizontalStepper } from '@angular/material/stepper';
 import { CompositeField } from '@app/core/model/dataset-profile-definition/composite-field';
 import { Field } from '@app/core/model/dataset-profile-definition/field';

dmp-frontend/src/app/ui/misc/dataset-description-form/form-focus/form-focus.service.ts

@@ -3,6 +3,7 @@ import { ActivatedRoute, Router } from '@angular/router';
 import { Pair } from '../../../../../common/types/pair';
 import { CompositeField } from '../../../../core/model/dataset-profile-definition/composite-field';
 import { VisibilityRulesService } from '../visibility-rules/visibility-rules.service';
+import { groupBy } from 'lodash';
 
 @Injectable()
 export class FormFocusService {
@@ -22,7 +23,7 @@ export class FormFocusService {
 	}
 
 	focusNext(field: CompositeField) {
-		const flattenedCompositeFields = this.compositeFields.groupBy(x => x.right)
+		const flattenedCompositeFields = groupBy(this.compositeFields, x => x.right)
 			.map(x => x.reduce((first: Pair<CompositeField[], number>, second: Pair<CompositeField[], number>) =>
 				(new Pair<CompositeField[], number>(first.left.concat(second.left), first.right))));
 		const page = flattenedCompositeFields.filter(x => x['left'].map(y => y.id).indexOf(field.id) !== -1)[0];

dmp-frontend/src/app/ui/misc/dataset-description-form/tableOfContentsMaterial/table-of-contents.module.ts

@@ -4,7 +4,7 @@ import {TableOfContents} from './table-of-contents';
 import {RouterModule} from '@angular/router';
 import { TableOfContentsInternal } from './table-of-contents-internal/table-of-contents-internal';
 import { VisibilityRulesService } from '../visibility-rules/visibility-rules.service';
-import { MatIconModule } from '@angular/material';
+import { MatIconModule } from '@angular/material/icon';
 
 @NgModule({
   imports: [CommonModule, RouterModule, MatIconModule],

dmp-frontend/src/app/ui/misc/dataset-description-form/tableOfContentsMaterial/table-of-contents.ts

@@ -35,7 +35,7 @@ export interface Link {
 })
 export class TableOfContents extends BaseComponent implements OnInit, OnChanges {
 
-	@ViewChild('internalTable', {static: false}) internalTable: TableOfContentsInternal;
+	@ViewChild('internalTable') internalTable: TableOfContentsInternal;
 
 
 	@Input() links: Link[];

dmp-frontend/src/app/ui/misc/dataset-description-form/visibility-rules/visibility-rules.service.ts

@@ -1,8 +1,8 @@
 import { ApplicationRef, Injectable, NgZone } from '@angular/core';
-import { AbstractControl, FormArray, FormControl, FormGroup } from '@angular/forms';
+import { AbstractControl, FormArray, FormGroup } from '@angular/forms';
 import { DatasetProfileFieldViewStyle } from '@app/core/common/enum/dataset-profile-field-view-style';
+import { isNumeric } from '@app/utilities/enhancers/utils';
 import { Subject } from 'rxjs';
-import { isNumeric } from 'rxjs/internal/util/isNumeric';
 import { Rule } from '../../../../core/model/dataset-profile-definition/rule';
 import { VisibilityRule } from './models/visibility-rule';
 import { VisibilityRuleSource } from './models/visibility-rule-source';
@@ -11,13 +11,13 @@ import { VisibilityRulesContext } from './models/visibility-rules-context';
 @Injectable()
 export class VisibilityRulesService {
 
-	private readonly VISIBILITY_RULE_LOGIC: 'OR'| 'AND' = 'OR';
+	private readonly VISIBILITY_RULE_LOGIC: 'OR' | 'AND' = 'OR';
 	private readonly DEFAULTVISIBILITY = false;
 
 	private visibilityRuleContext: VisibilityRulesContext;
 	private form: AbstractControl;
 	private elementVisibilityMap = new Map<String, boolean>();
-	private elementComputationalMap = new Map<String, Map<String,boolean>>(); /// keep saved the values of each form control validity value
+	private elementComputationalMap = new Map<String, Map<String, boolean>>(); /// keep saved the values of each form control validity value
 	private _changeMade$ = new Subject<void>();
 
 
@@ -48,17 +48,17 @@ export class VisibilityRulesService {
 	private evaluateVisibility(visibilityRule: VisibilityRule, value: any, sourceId: string) {// source controlId is the same
 
 		const targetId = visibilityRule.targetControlId;
-		const visibilityMap = this.elementComputationalMap.get(targetId)? this.elementComputationalMap.get(targetId): new Map<String, boolean>();
+		const visibilityMap = this.elementComputationalMap.get(targetId) ? this.elementComputationalMap.get(targetId) : new Map<String, boolean>();
 
 
-		if (value instanceof Array){
+		if (value instanceof Array) {
 
-			const parsedSourceControlValues = visibilityRule.sourceVisibilityRules.map(e=>this.parseValue(e.sourceControlValue));
+			const parsedSourceControlValues = visibilityRule.sourceVisibilityRules.map(e => this.parseValue(e.sourceControlValue));
-			const parsedValues = value.map(e=>this.parseValue(e));
+			const parsedValues = value.map(e => this.parseValue(e));
+
+			const isVisible = parsedValues.map(v => parsedSourceControlValues.includes(v)).reduce((acc, current) => acc || current, false);
 
-			const isVisible = parsedValues.map(v=>parsedSourceControlValues.includes(v)).reduce((acc,current)=> acc|| current, false);
 
-			
 			// if(isVisible){
 			// 	this._emitChangesIfNeeded(visibilityRule.targetControlId, true);
 			// 	this.elementVisibilityMap.set(visibilityRule.targetControlId, true);
@@ -67,16 +67,16 @@ export class VisibilityRulesService {
 			visibilityMap.set(sourceId, isVisible);
 
 		} else {
-			const visibilityDependencySource = visibilityRule.sourceVisibilityRules.filter( x=> x.sourceControlId === sourceId);
+			const visibilityDependencySource = visibilityRule.sourceVisibilityRules.filter(x => x.sourceControlId === sourceId);
-	
+
 			visibilityDependencySource.forEach(x => {
-	
+
 				const shouldBeHidden = value !== null && (this.parseValue(value) !== this.parseValue(x.sourceControlValue));
 				// if(value !== null && )
 				visibilityMap.set(sourceId, !shouldBeHidden);
 			});
 		}
-		
+
 
 		this.elementComputationalMap.set(targetId, visibilityMap);// unnessecary
 
@@ -84,10 +84,10 @@ export class VisibilityRulesService {
 		const isVisible = this._computeVisibility(targetId);
 		this._emitChangesIfNeeded(targetId, isVisible);
 		this.elementVisibilityMap.set(targetId, isVisible);
-		if(!isVisible){
+		if (!isVisible) {
 			this.resetControlWithId(this.form, targetId);
 		}
-		
+
 
 		// for (let i = 0; i < visibilityRule.sourceVisibilityRules.length; i++) {
 		// 	if (value != null && (this.parseValue(value) !== this.parseValue(visibilityRule.sourceVisibilityRules[i].sourceControlValue))) {
@@ -106,20 +106,20 @@ export class VisibilityRulesService {
 	}
 
 
-	private _computeVisibility(targetId: string) : boolean{
+	private _computeVisibility(targetId: string): boolean {
 		const visibilityMap = this.elementComputationalMap.get(targetId);
 		const values = visibilityMap.values();
 		let currentVal = values.next();
 		let visibilityValues: boolean[] = [];
-		while(!currentVal.done){
+		while (!currentVal.done) {
 			visibilityValues.push(currentVal.value);
 			currentVal = values.next();
 		}
 
 
-		if(visibilityValues.length){
+		if (visibilityValues.length) {
-			return visibilityValues.reduce((r, c)=>{
+			return visibilityValues.reduce((r, c) => {
-				if(this.VISIBILITY_RULE_LOGIC === 'OR'){
+				if (this.VISIBILITY_RULE_LOGIC === 'OR') {
 					return r || c;
 				} else {
 					return r && c;
@@ -139,11 +139,11 @@ export class VisibilityRulesService {
 		this._changeMade$.next();
 	}
 
-	private _populateComputationMap(): void{
+	private _populateComputationMap(): void {
-		this.visibilityRuleContext.rules.forEach(rule =>{
+		this.visibilityRuleContext.rules.forEach(rule => {
 			const targetId = rule.targetControlId;
-			const visibilityMap = this.elementComputationalMap.get(targetId)? this.elementComputationalMap.get(targetId) : new Map< String, boolean>();
+			const visibilityMap = this.elementComputationalMap.get(targetId) ? this.elementComputationalMap.get(targetId) : new Map<String, boolean>();
-			rule.sourceVisibilityRules.forEach(vr =>{
+			rule.sourceVisibilityRules.forEach(vr => {
 				visibilityMap.set(vr.sourceControlId, this.DEFAULTVISIBILITY);
 			});
 			this.elementComputationalMap.set(targetId, visibilityMap);
@@ -218,9 +218,9 @@ export class VisibilityRulesService {
 
 	private resetFieldFormGroup(formGroup: FormGroup) {
 		const renderStyle = formGroup.getRawValue().viewStyle.renderStyle;
-		if(renderStyle ===DatasetProfileFieldViewStyle.Validation || renderStyle === DatasetProfileFieldViewStyle.DatasetIdentifier){
+		if (renderStyle === DatasetProfileFieldViewStyle.Validation || renderStyle === DatasetProfileFieldViewStyle.DatasetIdentifier) {
-			formGroup.get('value').setValue({identifier:'',type:'' });
+			formGroup.get('value').setValue({ identifier: '', type: '' });
-		}else{
+		} else {
 			formGroup.get('value').setValue(formGroup.get('defaultValue').value ? this.parseValue(formGroup.get('defaultValue').value.value) : undefined);
 		}
 
@@ -232,23 +232,23 @@ export class VisibilityRulesService {
 		});
 		(formGroup.get('multiplicityItems') as FormArray).controls.splice(0);
 	}
-	private _emitChangesIfNeeded(id:string, valueToBeSet: boolean){
+	private _emitChangesIfNeeded(id: string, valueToBeSet: boolean) {
-		if(this.elementVisibilityMap.has(id)){
+		if (this.elementVisibilityMap.has(id)) {
-			if(this.elementVisibilityMap.get(id) != valueToBeSet){
+			if (this.elementVisibilityMap.get(id) != valueToBeSet) {
 				this._changeMade$.next();
 			}
-		}else{
+		} else {
 			this._changeMade$.next();
 		}
 	}
-	public get visibilityChange(){
+	public get visibilityChange() {
 		return this._changeMade$.asObservable();
 	}
 	public getVisibilityDependency(targetId: string): VisibilityRuleSource[] | null {
-		return this.visibilityRuleContext.rules.reduce((hasDependency, rule)=>{
+		return this.visibilityRuleContext.rules.reduce((hasDependency, rule) => {
-			if(hasDependency) return hasDependency;
+			if (hasDependency) return hasDependency;
 
-			if(rule.targetControlId === targetId){
+			if (rule.targetControlId === targetId) {
 				return rule.sourceVisibilityRules;
 			}
 
@@ -256,7 +256,7 @@ export class VisibilityRulesService {
 		}, null) as VisibilityRuleSource[];
 	}
 
-	public getVisibilityTargets(sourceId: string) : string[]{
+	public getVisibilityTargets(sourceId: string): string[] {
 		return this.visibilityRuleContext.rules.filter(x => {
 			const result = x.sourceVisibilityRules.filter(y => y.sourceControlId === sourceId);
 			return result.length;
@@ -280,33 +280,33 @@ export class VisibilityRulesService {
 
 
 	//removes rule that has the specific id either as a source either as a target
-	public removeAllIdReferences(id: string) : void{
+	public removeAllIdReferences(id: string): void {
 
 		// * Remove from visibility rues and visibility rules context
 
 		//remove as a target
-		const temp =  this.visibilityRuleContext.rules.map((x,i) => (x.targetControlId === id )? i : null );
+		const temp = this.visibilityRuleContext.rules.map((x, i) => (x.targetControlId === id) ? i : null);
-		const indexes = temp.filter( x => x !== null);
+		const indexes = temp.filter(x => x !== null);
 		indexes.reverse().forEach(index => this.visibilityRuleContext.rules.splice(index, 1));
 		this.elementVisibilityMap.delete(id);
 
 
 
 		//remove as a source
-		const tbd = this.visibilityRuleContext.rules.reduce((to_be_deleted ,rule, ruleIdx) =>{
+		const tbd = this.visibilityRuleContext.rules.reduce((to_be_deleted, rule, ruleIdx) => {
-			const idxs = rule.sourceVisibilityRules.map((x,i) => (x.sourceControlId === id) ? i : null).filter( x=> x !== null );
+			const idxs = rule.sourceVisibilityRules.map((x, i) => (x.sourceControlId === id) ? i : null).filter(x => x !== null);
-			idxs.reverse().forEach( index => rule.sourceVisibilityRules.splice(index, 1));
+			idxs.reverse().forEach(index => rule.sourceVisibilityRules.splice(index, 1));
 
-			if(!rule.sourceVisibilityRules.length){
+			if (!rule.sourceVisibilityRules.length) {
 				to_be_deleted.push(ruleIdx);
 			}
 			return to_be_deleted
-		},[]);
+		}, []);
 
 
 		//clean up empty
-		tbd.reverse().forEach(index =>{
+		tbd.reverse().forEach(index => {
-			this.visibilityRuleContext.rules.splice(index,1);
+			this.visibilityRuleContext.rules.splice(index, 1);
 		});
 
 
@@ -314,7 +314,7 @@ export class VisibilityRulesService {
 		// * Remove from computational map
 
 		// as a target
-		if(this.elementComputationalMap.get(id)){
+		if (this.elementComputationalMap.get(id)) {
 			this.elementComputationalMap.delete(id);
 		}
 
@@ -323,8 +323,8 @@ export class VisibilityRulesService {
 		const keyIterator = this.elementComputationalMap.keys();
 		let currentKey = keyIterator.next();
 
-		
+
-		while(!currentKey.done){
+		while (!currentKey.done) {
 			const currentVals = this.elementComputationalMap.get(currentKey.value);
 			currentVals.delete(id);
 			currentKey = keyIterator.next();
@@ -332,15 +332,15 @@ export class VisibilityRulesService {
 	}
 
 
-	public addNewRule(rule: Rule): void{
+	public addNewRule(rule: Rule): void {
 		const targetId = rule.targetField;
 		const sourceId = rule.sourceField;
-		
+
 		this.visibilityRuleContext.addToVisibilityRulesContext(rule);
 
-		const visibilityMap = this.elementComputationalMap.get(targetId) ? this.elementComputationalMap.get(targetId) : new Map< String, boolean>();
+		const visibilityMap = this.elementComputationalMap.get(targetId) ? this.elementComputationalMap.get(targetId) : new Map<String, boolean>();
 
-		visibilityMap.set(sourceId, this.DEFAULTVISIBILITY); 
+		visibilityMap.set(sourceId, this.DEFAULTVISIBILITY);
 		const isVisible = this._computeVisibility(targetId);
 
 		this._emitChangesIfNeeded(targetId, isVisible);

dmp-frontend/src/app/ui/misc/navigation/navigation.component.scss

@@ -1,3 +1,4 @@
+@use '~@angular/material' as mat;
 @mixin navigation-component-theme($theme) {
   $accent: map-get($theme, accent);
 
@@ -10,7 +11,7 @@
     z-index: 1000;
 
     .active {
-      color: mat-color($accent);
+      color: mat.get-color-from-palette($accent);
     }
 
     .user-label {

dmp-frontend/src/app/ui/misc/oauth2-dialog/oauth2-dialog.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit, Inject } from '@angular/core';
-import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { ActivatedRoute, Params } from '@angular/router';
 import { BaseComponent } from '@common/base/base.component';
 import { takeUntil } from 'rxjs/operators';

dmp-frontend/src/app/ui/misc/oauth2-dialog/service/oauth2-dialog.service.ts

@@ -2,7 +2,7 @@ import { Injectable, Inject } from '@angular/core';
 import { BaseService } from '@common/base/base.service';
 import { BehaviorSubject, Observable, interval } from 'rxjs';
 import { ConfigurationService } from '@app/core/services/configuration/configuration.service';
-import { isNullOrUndefined } from 'util';
+import { isNullOrUndefined } from '@app/utilities/enhancers/utils';
 import { takeUntil } from 'rxjs/operators';
 
 @Injectable()

dmp-frontend/src/app/ui/misc/search/search.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { SearchComponent } from './search.component';
 
@@ -6,7 +6,7 @@ describe('SearchComponent', () => {
   let component: SearchComponent;
   let fixture: ComponentFixture<SearchComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [ SearchComponent ]
     })

dmp-frontend/src/app/ui/navbar/navbar.component.ts

@@ -1,6 +1,7 @@
 import { Location } from '@angular/common';
 import { Component, ElementRef, EventEmitter, OnInit, Output, ViewChild } from '@angular/core';
-import { MatDialog, MatMenuTrigger } from '@angular/material';
+import { MatDialog } from '@angular/material/dialog';
+import { MatMenuTrigger } from '@angular/material/menu';
 import { Router } from '@angular/router';
 import { AppRole } from '@app/core/common/enum/app-role';
 import { AuthService } from '@app/core/services/auth/auth.service';
@@ -40,7 +41,7 @@ export class NavbarComponent extends BaseComponent implements OnInit {
 	selectedLanguage = 'en';
 	private user: UserListingModel;
 	@Output() sidebarToggled: EventEmitter<any> = new EventEmitter();
-	@ViewChild(MatMenuTrigger, { static: false }) trigger: MatMenuTrigger;
+	@ViewChild(MatMenuTrigger) trigger: MatMenuTrigger;
 
 	constructor(location: Location,
 		private element: ElementRef,

dmp-frontend/src/app/ui/quick-wizard/quick-wizard-editor/quick-wizard-editor.component.ts

@@ -35,7 +35,7 @@ export class QuickWizardEditorComponent extends CheckDeactivateBaseComponent imp
 
 	breadCrumbs: Observable<BreadcrumbItem[]> = observableOf([]);
 	@ViewChild('stepper', { static: true }) stepper: MatStepper;
-	@ViewChild(DatasetEditorWizardComponent, { static: false }) datasetEditorWizardComponent: DatasetEditorWizardComponent;
+	@ViewChild(DatasetEditorWizardComponent) datasetEditorWizardComponent: DatasetEditorWizardComponent;
 	isNew = true;
 	isSubmitted = false;
 	quickWizard: QuickWizardEditorWizardModel;

dmp-frontend/src/app/ui/user-guide-editor/user-guide-editor.component.ts

@@ -6,7 +6,7 @@ import { takeUntil } from 'rxjs/operators';
 import { UiNotificationService, SnackBarNotificationLevel } from '@app/core/services/notification/ui-notification-service';
 import { TranslateService } from '@ngx-translate/core';
 import { Router } from '@angular/router';
-import { isNullOrUndefined } from 'util';
+import { isNullOrUndefined } from '@app/utilities/enhancers/utils';
 import { environment } from 'environments/environment';
 import { ConfigurationService } from '@app/core/services/configuration/configuration.service';
 import { AuthService } from '@app/core/services/auth/auth.service';

dmp-frontend/src/app/ui/user-guide/user-guide-content/user-guide-content.component.ts

@@ -1,14 +1,13 @@
-import { Component, OnInit, AfterViewChecked, ViewEncapsulation, ViewChild, AfterContentInit, AfterViewInit } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
+import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
+import { ConfigurationService } from '@app/core/services/configuration/configuration.service';
+import { LanguageService } from '@app/core/services/language/language.service';
+import { MatomoService } from '@app/core/services/matomo/matomo-service';
 import { UserGuideService } from '@app/core/services/user-guide/user-guide.service';
 import { BaseComponent } from '@common/base/base.component';
-import { takeUntil } from 'rxjs/internal/operators/takeUntil';
-import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
-import { LanguageService } from '@app/core/services/language/language.service';
-import { HttpClient } from '@angular/common/http';
-import { MatomoService } from '@app/core/services/matomo/matomo-service';
-import { ElementRef } from '@angular/core';
 import { interval, Subject } from 'rxjs';
-import { ConfigurationService } from '@app/core/services/configuration/configuration.service';
+import { takeUntil } from 'rxjs/operators';
 
 @Component({
 	selector: 'app-user-guide-content',
@@ -26,7 +25,7 @@ export class UserGuideContentComponent extends BaseComponent implements OnInit {
 	private _transformed: Subject<boolean> = new Subject();
 	private _parsed: Subject<boolean> = new Subject();
 
-	@ViewChild('guide', {static: false}) guide: ElementRef;
+	@ViewChild('guide') guide: ElementRef;
 
 	constructor(
 		private userGuideService: UserGuideService,
@@ -94,8 +93,8 @@ export class UserGuideContentComponent extends BaseComponent implements OnInit {
 	private parse() {
 		const specialElements: HTMLCollection = document.getElementsByTagName('a');
 		for (let i = 0; i < specialElements.length; i++) {
-			const element = specialElements.item(i) as  HTMLAnchorElement;
+			const element = specialElements.item(i) as HTMLAnchorElement;
-			if(element.href.includes('#')) {
+			if (element.href.includes('#')) {
 				this.hrefToPath(element);
 				element.removeEventListener('click', this.scrollEvent);
 				element.addEventListener('click', this.scrollEvent);
@@ -150,9 +149,9 @@ export class UserGuideContentComponent extends BaseComponent implements OnInit {
 	}
 
 
-	onIFrameLoad(iframe:HTMLIFrameElement){
+	onIFrameLoad(iframe: HTMLIFrameElement) {
-		
+
-		try{
+		try {
 			// const contentDocument = iframe.contentDocument;
 			// const URI = contentDocument.URL;
 			// const refs = contentDocument.getElementsByTagName('a');
@@ -165,9 +164,9 @@ export class UserGuideContentComponent extends BaseComponent implements OnInit {
 			// }
 			// navLinks.forEach(a=>a.href = URI+a.hash);
 
-			const images =iframe.contentWindow.document.getElementsByTagName('img');
+			const images = iframe.contentWindow.document.getElementsByTagName('img');
 
-			for(let i=0; i< images.length; i++){
+			for (let i = 0; i < images.length; i++) {
 				const tempDiv = document.createElement('div');
 				const currentImage = images.item(i);
 				tempDiv.innerHTML = currentImage.outerHTML.trim();
@@ -178,7 +177,7 @@ export class UserGuideContentComponent extends BaseComponent implements OnInit {
 			// console.log('eleme', elem);
 			// firstimage.src = elem.src;
 
-		}catch{
+		} catch {
 			console.warn('Could not find contentDocument');
 		}
 	}

dmp-frontend/src/app/ui/user-profile/user-profile.component.ts

@@ -13,7 +13,7 @@ import * as moment from 'moment-timezone';
 import { Observable, of } from 'rxjs';
 import { map, takeUntil } from 'rxjs/operators';
 import { LanguageService } from '@app/core/services/language/language.service';
-import { isNullOrUndefined } from 'util';
+import { isNullOrUndefined } from '@app/utilities/enhancers/utils';
 import { Oauth2DialogService } from '../misc/oauth2-dialog/service/oauth2-dialog.service';
 import { ConfigurationService } from '@app/core/services/configuration/configuration.service';
 import { MultipleAutoCompleteConfiguration } from '@app/library/auto-complete/multiple/multiple-auto-complete-configuration';
@@ -23,7 +23,7 @@ import { UserProfileEditorModel } from './user-profile-editor.model';
 import { RoleOrganizationType } from '@app/core/common/enum/role-organization-type';
 import { EnumUtils } from '@app/core/services/utilities/enum-utils.service';
 import { AddAccountDialogComponent } from './add-account/add-account-dialog.component';
-import { MatDialog } from '@angular/material';
+import { MatDialog } from '@angular/material/dialog';
 import { UserCredentialModel } from '@app/core/model/user/user-credential';
 import { AuthProvider } from '@app/core/common/enum/auth-provider';
 import { MergeEmailConfirmationService } from '@app/core/services/merge-email-confirmation/merge-email-confirmation.service';

dmp-frontend/src/app/utilities/enhancers/utils.ts

@@ -0,0 +1,7 @@
+export function isNullOrUndefined(object: any): boolean {
+	return object === null || object === undefined;
+}
+
+export function isNumeric(val: any): val is number | string {
+	return !Array.isArray(val) && (val - parseFloat(val) + 1) >= 0;
+}

dmp-frontend/src/assets/scss/blue-theme.scss

@@ -1,3 +1,4 @@
+@use '~@angular/material' as mat;
 @import "app/ui/misc/navigation/navigation.component.scss";
 @import "~@angular/material/theming"; // @import '../../../node_modules/@angular/material/theming';
 
@@ -67,25 +68,25 @@ $app-blue-theme-accent-palette: (
   )
 );
 
-$app-blue-theme-primary: mat-palette($app-blue-theme-primary-palette);
+$app-blue-theme-primary: mat.define-palette($app-blue-theme-primary-palette);
-$app-blue-theme-accent: mat-palette($app-blue-theme-accent-palette, A200, A100, A400);
+$app-blue-theme-accent: mat.define-palette($app-blue-theme-accent-palette, A200, A100, A400);
-$app-blue-theme-warn: mat-palette($mat-red);
+$app-blue-theme-warn: mat.define-palette(mat.$red-palette);
 
 $app-blue-theme-background: (
-  status-bar: map_get($mat-grey, 300),
+  status-bar: map_get(mat.$grey-palette, 300),
-  app-bar: map_get($mat-grey, 100),
+  app-bar: map_get(mat.$grey-palette, 100),
-  background: map_get($mat-grey, 50),
+  background: map_get(mat.$grey-palette, 50),
   hover: rgba(black, 0.04),
   card: white,
   dialog: white,
   disabled-button: rgba(black, 0.12),
   raised-button: white,
   focused-button: $dark-focused,
-  selected-button: map_get($mat-grey, 300),
+  selected-button: map_get(mat.$grey-palette, 300),
-  selected-disabled-button: map_get($mat-grey, 400),
+  selected-disabled-button: map_get(mat.$grey-palette, 400),
-  disabled-button-toggle: map_get($mat-grey, 200),
+  disabled-button-toggle: map_get(mat.$grey-palette, 200),
-  unselected-chip: map_get($mat-grey, 300),
+  unselected-chip: map_get(mat.$grey-palette, 300),
-  disabled-list-option: map_get($mat-grey, 200)
+  disabled-list-option: map_get(mat.$grey-palette, 200)
 );
 
 $app-blue-theme-foreground: (
@@ -114,28 +115,28 @@ $custom-theme: (
   background: $app-blue-theme-background
 );
 
-$custom-typography: mat-typography-config(
+$custom-typography: mat.define-typography-config(
   $font-family: "Lato, regular",
-  $headline: mat-typography-level(32px, 48px, 700),
+  $headline: mat.define-typography-level(32px, 48px, 700),
-  $body-1: mat-typography-level(16px, 24px, 500)
+  $body-1: mat.define-typography-level(16px, 24px, 500)
 );
 
 .blue-theme {
-  @include mat-core();
+  @include mat.core();
 
-  @include angular-material-theme($custom-theme);
+  @include mat.all-component-themes($custom-theme);
   @include navigation-component-theme($custom-theme);
 
   // Override typography CSS classes (e.g., mat-h1, mat-display-1, mat-typography, etc.).
-  @include mat-base-typography($custom-typography);
+  @include mat.typography-hierarchy($custom-typography);
 
   // Override typography for a specific Angular Material components.
-  @include mat-checkbox-typography($custom-typography);
+  @include mat.checkbox-typography($custom-typography);
 
   // Override typography for all Angular Material, including mat-base-typography and all components.
-  @include angular-material-typography($custom-typography);
+  @include mat.all-component-typographies($custom-typography);
   //If you're using Material's theming, you can also pass in your typography config to the mat-core mixin:
 
   // Override the typography in the core CSS.
-  @include mat-core($custom-typography);
+  @include mat.core($custom-typography);
 }

dmp-frontend/src/assets/scss/core/_dropdown.scss

@@ -90,7 +90,7 @@
     text-decoration: none;
 
     font-size: .8125rem;
-    border-radius: $border-radius / 2;
+    border-radius: math.div($border-radius, 2);
     margin: 0 $bmd-dropdown-margin-y;
     @include transitions($fast-transition-time, $transition-linear);
 

dmp-frontend/src/assets/scss/core/_togglebutton.scss

@@ -70,7 +70,7 @@
     // set bg when checked
     input[type=checkbox]:checked {
       + .toggle {
-        background-color: rgba($brand-primary, (70/100)); // Switch bg on
+        background-color: rgba($brand-primary, math.div(70,100)); // Switch bg on
       }
 
       + .toggle:after {
@@ -78,7 +78,7 @@
       }
 
       + .toggle:active:after {
-        box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba($brand-primary, (10/100)); // Ripple on
+        box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba($brand-primary, math.div(10,100)); // Ripple on
       }
     }
   }

dmp-frontend/src/assets/scss/core/mixins/_utilities.scss

@@ -25,7 +25,7 @@
 
 @function brightness($color) {
   @if type-of($color) == color {
-    @return (red($color) * 0.299 + green($color) * 0.587 + blue($color) * 0.114) / 255 * 100%;
+    @return math.div(red($color) * 0.299 + green($color) * 0.587 + blue($color) * 0.114, 255) * 100%;
   } @else {
     @return unquote("brightness(#{$color})");
   }

dmp-frontend/src/assets/scss/core/variables/_bootstrap-material-design.scss

@@ -20,8 +20,8 @@ $mdb-input-font-size-base: 14px !default;
 $mdb-input-font-size-large: ceil(($font-size-base * 1.25)) !default; // ~20px
 $mdb-input-font-size-small: ceil(($font-size-base * 0.75)) !default; // ~12px
 
-$bmd-bmd-label-static-size-ratio: 75 / 100 !default;
+$bmd-bmd-label-static-size-ratio: math.div(75, 100) !default;
-$bmd-help-size-ratio: 75 / 100 !default;
+$bmd-help-size-ratio: math.div(75, 100) !default;
 
 $bmd-form-control-bg-repeat-y: no-repeat !default;
 $bmd-form-control-bg-position: center bottom, center calc(100% - 1px) !default;

dmp-frontend/src/assets/scss/core/variables/_type.scss

@@ -43,7 +43,7 @@ $display4-size: 2.125rem !default; // md display-1 34px was 3.5rem
 //
 //$line-height-base:                1.5 !default;
 //
-$headings-margin-bottom:     ($spacer / 2) !default;
+$headings-margin-bottom:     math.div($spacer, 2) !default;
 //$headings-font-family:       inherit !default;
 $headings-font-weight:         400 !default; // was 500
 

dmp-frontend/src/assets/scss/green-theme.scss

@@ -1,3 +1,4 @@
+@use '~@angular/material' as mat;
 @import "app/ui/misc/navigation/navigation.component.scss";
 @import "~@angular/material/theming"; // @import '../../../node_modules/@angular/material/theming';
 
@@ -67,25 +68,25 @@ $app-green-theme-accent-palette: (
   )
 );
 
-$app-green-theme-primary: mat-palette($app-green-theme-primary-palette);
+$app-green-theme-primary: mat.define-palette($app-green-theme-primary-palette);
-$app-green-theme-accent: mat-palette($app-green-theme-accent-palette, A200, A100, A400);
+$app-green-theme-accent: mat.define-palette($app-green-theme-accent-palette, A200, A100, A400);
-$app-green-theme-warn: mat-palette($mat-red);
+$app-green-theme-warn: mat.define-palette(mat.$red-palette);
 
 $app-green-theme-background: (
-  status-bar: map_get($mat-grey, 300),
+  status-bar: map_get(mat.$grey-palette, 300),
-  app-bar: map_get($mat-grey, 100),
+  app-bar: map_get(mat.$grey-palette, 100),
-  background: map_get($mat-grey, 50),
+  background: map_get(mat.$grey-palette, 50),
   hover: rgba(black, 0.04),
   card: white,
   dialog: white,
   disabled-button: rgba(black, 0.12),
   raised-button: white,
   focused-button: $dark-focused,
-  selected-button: map_get($mat-grey, 300),
+  selected-button: map_get(mat.$grey-palette, 300),
-  selected-disabled-button: map_get($mat-grey, 400),
+  selected-disabled-button: map_get(mat.$grey-palette, 400),
-  disabled-button-toggle: map_get($mat-grey, 200),
+  disabled-button-toggle: map_get(mat.$grey-palette, 200),
-  unselected-chip: map_get($mat-grey, 300),
+  unselected-chip: map_get(mat.$grey-palette, 300),
-  disabled-list-option: map_get($mat-grey, 200)
+  disabled-list-option: map_get(mat.$grey-palette, 200)
 );
 
 $app-green-theme-foreground: (
@@ -114,28 +115,28 @@ $custom-theme: (
   background: $app-green-theme-background
 );
 
-$custom-typography: mat-typography-config(
+$custom-typography: mat.define-typography-config(
   $font-family: "Lato, regular",
-  $headline: mat-typography-level(32px, 48px, 700),
+  $headline: mat.define-typography-level(32px, 48px, 700),
-  $body-1: mat-typography-level(16px, 24px, 500)
+  $body-1: mat.define-typography-level(16px, 24px, 500)
 );
 
 .green-theme {
-  @include mat-core();
+  @include mat.core();
 
-  @include angular-material-theme($custom-theme);
+  @include mat.all-component-themes($custom-theme);
   @include navigation-component-theme($custom-theme);
 
   // Override typography CSS classes (e.g., mat-h1, mat-display-1, mat-typography, etc.).
-  @include mat-base-typography($custom-typography);
+  @include mat.typography-hierarchy($custom-typography);
 
   // Override typography for a specific Angular Material components.
-  @include mat-checkbox-typography($custom-typography);
+  @include mat.checkbox-typography($custom-typography);
 
   // Override typography for all Angular Material, including mat-base-typography and all components.
-  @include angular-material-typography($custom-typography);
+  @include mat.all-component-typographies($custom-typography);
   //If you're using Material's theming, you can also pass in your typography config to the mat-core mixin:
 
   // Override the typography in the core CSS.
-  @include mat-core($custom-typography);
+  @include mat.core($custom-typography);
 }

dmp-frontend/src/assets/scss/material-dashboard.scss

@@ -14,25 +14,27 @@
  * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 
  */
+@use '~@angular/material' as mat;
+@use 'sass:math';
 @import "~@angular/material/prebuilt-themes/indigo-pink.css";
 @import "~@angular/material/theming"; // @import '../../../node_modules/@angular/material/theming';
 @import "./blue-theme.scss";
 // @import "./green-theme.scss";
 
-@include mat-core();
+@include mat.core();
 
 // // Define a blue theme.
-$custom-theme-primary: mat-palette($app-blue-theme-primary-palette, 900);
+$custom-theme-primary: mat.define-palette($app-blue-theme-primary-palette, 900);
-$custom-theme-accent: mat-palette($app-blue-theme-accent-palette);
+$custom-theme-accent: mat.define-palette($app-blue-theme-accent-palette);
 
 // Define a green theme.
 // $custom-theme-primary: mat-palette($app-green-theme-primary-palette, 500);
 // $custom-theme-accent: mat-palette($app-green-theme-accent-palette);
 
 // $custom-theme-accent: mat-palette($mat-pink, A200, A100, A400);
-$custom-theme-warn: mat-palette($mat-red);
+$custom-theme-warn: mat.define-palette(mat.$red-palette);
-$custom-theme: mat-light-theme($custom-theme-primary, $custom-theme-accent, $custom-theme-warn);
+$custom-theme: mat.define-light-theme($custom-theme-primary, $custom-theme-accent, $custom-theme-warn);
-@include angular-material-theme($custom-theme);
+@include mat.all-component-themes($custom-theme);
 
 @import "core/variables";
 @import "core/mixins";

dmp-frontend/src/common/base/base-pending-changes.component.ts

@@ -1,7 +1,8 @@
-import { HostListener } from '@angular/core';
+import { HostListener, Directive } from '@angular/core';
 import { BaseComponent } from '@common/base/base.component';
 import { Observable } from 'rxjs';
 
+@Directive()
 export abstract class BasePendingChangesComponent extends BaseComponent {
 
 	protected constructor() { super(); }

dmp-frontend/src/common/base/base.component.ts

@@ -1,6 +1,7 @@
-import { OnDestroy } from '@angular/core';
+import { Directive, OnDestroy } from '@angular/core';
 import { Subject } from 'rxjs';
 
+@Directive()
 export abstract class BaseComponent implements OnDestroy {
 
 	protected _destroyed: Subject<boolean> = new Subject();

dmp-frontend/src/common/base/base.pipe.ts

@@ -1,6 +1,7 @@
-import { OnDestroy } from '@angular/core';
+import { Directive, OnDestroy } from '@angular/core';
 import { Subject } from 'rxjs';
 
+@Directive()
 export abstract class BasePipe implements OnDestroy {
 
 	protected _destroyed: Subject<boolean> = new Subject();

dmp-frontend/src/common/base/base.service.ts

@@ -1,6 +1,7 @@
-import { OnDestroy } from '@angular/core';
+import { Directive, OnDestroy } from '@angular/core';
 import { Subject } from 'rxjs';
 
+@Directive()
 export abstract class BaseService implements OnDestroy {
 
 	protected _destroyed: Subject<boolean> = new Subject();

dmp-frontend/src/common/forms/validation/custom-validator.ts

@@ -1,6 +1,6 @@
 import { AbstractControl, ValidatorFn, Validators } from '@angular/forms';
 import { ValidationErrorModel } from '@common/forms/validation/error-model/validation-error-model';
-import { isNullOrUndefined } from 'util';
+import { isNullOrUndefined } from '@app/utilities/enhancers/utils';
 
 export function BackendErrorValidator(errorModel: ValidationErrorModel, propertyName: string): ValidatorFn {
 	return (control: AbstractControl): { [key: string]: any } => {

dmp-frontend/src/common/http/interceptors/unauthorized-response.interceptor.ts

@@ -19,8 +19,6 @@ export class UnauthorizedResponseInterceptor extends BaseInterceptor {
 
 	get type(): InterceptorType { return InterceptorType.UnauthorizedResponse; }
 
-	private accountRefresh$: Observable<Account> = null;
-
 	interceptRequest(req: HttpRequest<any>, next: HttpHandler): Observable<HttpSentEvent | HttpHeaderResponse | HttpProgressEvent | HttpResponse<any> | HttpUserEvent<any>> {
 		return next.handle(req).pipe(
 			catchError(error => {
@@ -29,7 +27,6 @@ export class UnauthorizedResponseInterceptor extends BaseInterceptor {
 						case 401:
 							this.logoutUser();
 							return throwError(error);
-						//return this.handle401Error(req, next);
 						default:
 							return throwError(error);
 					}
@@ -39,31 +36,6 @@ export class UnauthorizedResponseInterceptor extends BaseInterceptor {
 			}));
 	}
 
-	// private handle401Error(req: HttpRequest<any>, next: HttpHandler) {
-	// 	if (!this.accountRefresh$) {
-	// 		this.accountRefresh$ = this.authService.refreshToken().pipe(
-	// 			tap(account => {
-	// 				this.accountRefresh$ = null;
-	// 				if (!account) { throw throwError('missing_authentication_token'); }
-	// 			}),
-	// 			catchError(error => {
-	// 				this.logoutUser();
-	// 				return throwError(error);
-	// 			}));
-	// 	}
-	// 	return this.accountRefresh$.pipe(mergeMap(account => this.repeatRequest(account, req, next)));
-	// }
-
-	private repeatRequest(account: Account, originalRequest: HttpRequest<any>, next: HttpHandler) {
-		const newAuthenticationToken: String = this.authService.current().token;
-		const newRequest = originalRequest.clone({
-			setHeaders: {
-				Authorization: `Bearer ${newAuthenticationToken}`
-			}
-		});
-		return next.handle(newRequest);
-	}
-
 	private logoutUser() {
 		//this.authService.clear();
 		if (!this.isLoginRoute() && !this.isSignupRoute()) { this.router.navigate(['/unauthorized']); }

dmp-frontend/src/common/modules/multiple-choice-dialog/multiple-choice-dialog.component.ts

@@ -1,5 +1,5 @@
 import { Component, Inject } from '@angular/core';
-import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 
 @Component({
   selector: 'app-multiple-choice-dialog',

dmp-frontend/src/common/types/pair.ts

@@ -6,4 +6,4 @@ export class Pair<L, R> {
 		this.left = left;
 		this.right = right;
 	}
-}
+}

dmp-frontend/src/index.html

@@ -18,7 +18,6 @@
     <link href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" rel="stylesheet">
 	<link href='https://fonts.googleapis.com/css?family=Roboto:400,500,700,300|Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone' rel='stylesheet' type='text/css'>
 	<!--     Hammer.js       -->
-	<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
 
 </head>
 

dmp-frontend/src/polyfills.ts

@@ -38,7 +38,7 @@ import 'core-js/es6/reflect';
 /***************************************************************************************************
  * Zone JS is required by Angular itself.
  */
-import 'zone.js/dist/zone';  // Included with Angular CLI.
+import 'zone.js';  // Included with Angular CLI.
 
 
 

dmp-frontend/src/tsconfig.app.json

@@ -6,8 +6,11 @@
     "types": ["node"],
     "typeRoots": [ "../node_modules/@types" ]
   },
-  "exclude": [
+  "files": [
-    "test.ts",
+    "main.ts",
-    "**/*.spec.ts"
+    "polyfills.ts"
+  ],
+  "include": [
+    "src/**/*.d.ts"
   ]
 }

dmp-frontend/tsconfig.json

@@ -5,9 +5,8 @@
 		"outDir": "./dist/out-tsc",
 		"sourceMap": true,
 		"declaration": false,
-		"module": "esnext",
+		"module": "es2020",
-		"moduleResolution": "node",
+    "moduleResolution": "node",
-		"emitDecoratorMetadata": true,
 		"experimentalDecorators": true,
 		"importHelpers": true,
 		"skipLibCheck": true,

dmp-frontend/tslint.json

@@ -20,7 +20,10 @@
 		"class-name": true,
 		"comment-format": [
 			true
-		],
+    ],
+    "deprecation": {
+      "severity": "warning"
+    },
 		"curly": true,
 		"eofline": true,
 		"forin": true,
@@ -79,8 +82,7 @@
 		"no-switch-case-fall-through": true,
 		"no-trailing-whitespace": true,
 		"no-unnecessary-initializer": true,
-		"no-unused-expression": true,
+    "no-unused-expression": true,
-		"no-use-before-declare": true,
 		"no-var-keyword": true,
 		"object-literal-sort-keys": false,
 		"one-line": [