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/common": "^8.2.7",
-    "@angular/compiler": "^8.2.7",
-    "@angular/core": "^8.2.7",
-    "@angular/forms": "^8.2.7",
-    "@angular/material-moment-adapter": "^8.2.0",
-    "@angular/platform-browser": "^8.2.7",
-    "@ngx-translate/core": "^11.0.1",
-    "@ngx-translate/http-loader": "^4.0.0",
-    "@swimlane/ngx-datatable": "^16.0.2",
-    "@tinymce/tinymce-angular": "^3.6.1",
-    "@w11k/angular-sticky-things": "^1.1.2",
+    "@angular/animations": "^12.2.7",
+    "@angular/common": "^12.2.7",
+    "@angular/compiler": "^12.2.7",
+    "@angular/core": "^12.2.7",
+    "@angular/forms": "^12.2.7",
+    "@angular/material-moment-adapter": "^12.2.7",
+    "@angular/platform-browser": "^12.2.7",
+    "@ngx-translate/core": "^13.0.0",
+    "@ngx-translate/http-loader": "^6.0.0",
+    "@swimlane/ngx-datatable": "^20.0.0",
+    "@tinymce/tinymce-angular": "^4.2.4",
+    "@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",
-    "moment": "^2.24.0",
-    "moment-timezone": "^0.5.26",
-    "ng-dialog-animation": "^9.0.3",
+    "file-saver": "^2.0.5",
+    "moment": "^2.29.1",
+    "moment-timezone": "^0.5.33",
+    "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-guided-tour": "^1.1.10",
+    "ngx-dropzone": "^3.0.0",
+    "ngx-guided-tour": "^1.1.11",
     "ngx-matomo": "^0.1.4",
     "rxjs": "^6.3.2",
-    "tinymce": "^5.4.2",
-    "tslib": "^1.10.0",
+    "tinymce": "^5.9.2",
+    "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/cdk": "^8.2.0",
-    "@angular/material": "^8.2.0",
-    "@angular/cli": "8.3.5",
-    "@angular/compiler-cli": "^8.2.7",
-    "@angular/platform-browser-dynamic": "^8.2.7",
-    "@angular/router": "^8.2.7",
-    "@angular/language-service": "^8.2.7",
-    "@types/facebook-js-sdk": "^3.3.0",
-    "@types/file-saver": "^2.0.1",
-    "@types/gapi": "^0.0.39",
-    "@types/gapi.auth2": "^0.0.50",
-    "@types/jasmine": "~3.4.0",
-    "@types/jasminewd2": "~2.0.6",
-    "@types/moment-timezone": "^0.5.12",
-    "@types/node": "^10.11.7",
-    "codelyzer": "^5.1.1",
-    "ts-node": "~8.4.1",
-    "tslint": "~5.20.0",
-    "typescript": "3.5.3"
+    "@angular-devkit/build-angular": "~12.2.7",
+    "@angular/cdk": "^12.2.7",
+    "@angular/material": "^12.2.7",
+    "@angular/cli": "12.2.7",
+    "@angular/compiler-cli": "^12.2.7",
+    "@angular/platform-browser-dynamic": "^12.2.7",
+    "@angular/router": "^12.2.7",
+    "@angular/language-service": "^12.2.7",
+    "@types/facebook-js-sdk": "^3.3.5",
+    "@types/file-saver": "^2.0.3",
+    "@types/gapi": "^0.0.41",
+    "@types/gapi.auth2": "^0.0.55",
+    "@types/jasmine": "~3.9.1",
+    "@types/jasminewd2": "~2.0.10",
+    "@types/moment-timezone": "^0.5.13",
+    "@types/node": "^12.11.1",
+    "codelyzer": "^6.0.2",
+    "ts-node": "~10.2.1",
+    "tslint": "~6.1.0",
+    "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

 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

-import { Injectable } from "@angular/core";
 import { HttpHeaders } from "@angular/common/http";
-import { BaseHttpService } from "../http/base-http.service";
-import { environment } from "../../../../environments/environment";
-import { Observable } from "rxjs/internal/Observable";
+import { Injectable } from "@angular/core";
+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 { 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 { 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

-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

+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

 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';