angular 15 update

dmp-frontend/package.json

@@ -12,13 +12,13 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^14.3.0",
+    "@angular/animations": "^15.2.10",
-    "@angular/common": "^14.3.0",
+    "@angular/common": "^15.2.10",
-    "@angular/compiler": "^14.3.0",
+    "@angular/compiler": "^15.2.10",
-    "@angular/core": "^14.3.0",
+    "@angular/core": "^15.2.10",
-    "@angular/forms": "^14.3.0",
+    "@angular/forms": "^15.2.10",
-    "@angular/material-moment-adapter": "^14.2.7",
+    "@angular/material-moment-adapter": "^15.2.9",
-    "@angular/platform-browser": "^14.3.0",
+    "@angular/platform-browser": "^15.2.10",
     "@kolkov/angular-editor": "^1.2.0",
     "@ngx-translate/core": "^13.0.0",
     "@ngx-translate/http-loader": "^6.0.0",
@@ -46,14 +46,14 @@
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^14.2.12",
+    "@angular-devkit/build-angular": "^15.2.9",
-    "@angular/cdk": "^14.2.7",
+    "@angular/cdk": "^15.2.9",
-    "@angular/cli": "14.2.12",
+    "@angular/cli": "15.2.9",
-    "@angular/compiler-cli": "^14.3.0",
+    "@angular/compiler-cli": "^15.2.10",
-    "@angular/language-service": "^14.3.0",
+    "@angular/language-service": "^15.2.10",
-    "@angular/material": "^14.2.7",
+    "@angular/material": "^15.2.9",
-    "@angular/platform-browser-dynamic": "^14.3.0",
+    "@angular/platform-browser-dynamic": "^15.2.10",
-    "@angular/router": "^14.3.0",
+    "@angular/router": "^15.2.10",
     "@types/facebook-js-sdk": "^3.3.5",
     "@types/file-saver": "^2.0.3",
     "@types/gapi": "^0.0.41",
@@ -66,6 +66,6 @@
     "codelyzer": "^6.0.2",
     "ts-node": "~10.2.1",
     "tslint": "~6.1.0",
-    "typescript": "4.6.4"
+    "typescript": "^4.8"
   }
 }

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

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

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

@@ -4,7 +4,7 @@ import { LOCALE_ID, NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 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 { MatLegacyFormFieldDefaultOptions as MatFormFieldDefaultOptions, MAT_LEGACY_FORM_FIELD_DEFAULT_OPTIONS as MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/legacy-form-field';
 import { BrowserModule, Title } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { AppRoutingModule } from '@app/app-routing.module';

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

@@ -1,7 +1,7 @@
 
 import { HttpClient, HttpHeaders } from '@angular/common/http';
 import { Injectable } from '@angular/core';
-import { MatSnackBar } from '@angular/material/snack-bar';
+import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar';
 import { Router } from '@angular/router';
 import { Credential } from '@app/core/model/auth/credential';
 import { LoginInfo } from '@app/core/model/auth/login-info';

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

@@ -17,10 +17,10 @@ import {
 	ViewChild
 } from '@angular/core';
 import {ControlValueAccessor, FormGroupDirective, NgControl, NgForm} from '@angular/forms';
-import {MatChipInputEvent} from '@angular/material/chips';
+import {MatLegacyChipInputEvent as MatChipInputEvent} from '@angular/material/legacy-chips';
 import {ErrorStateMatcher, mixinErrorState} from '@angular/material/core';
-import {MatAutocomplete, MatAutocompleteSelectedEvent, MatAutocompleteTrigger} from '@angular/material/autocomplete';
+import {MatLegacyAutocomplete as MatAutocomplete, MatLegacyAutocompleteSelectedEvent as MatAutocompleteSelectedEvent, MatLegacyAutocompleteTrigger as MatAutocompleteTrigger} from '@angular/material/legacy-autocomplete';
-import {MatFormFieldControl} from '@angular/material/form-field';
+import {MatLegacyFormFieldControl as MatFormFieldControl} from '@angular/material/legacy-form-field';
 import {AutoCompleteGroup} from '@app/library/auto-complete/auto-complete-group';
 import {
 	MultipleAutoCompleteConfiguration

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

@@ -2,9 +2,9 @@ import { FocusMonitor } from '@angular/cdk/a11y';
 import { 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 { MatAutocomplete, MatAutocompleteSelectedEvent, MatAutocompleteTrigger } from '@angular/material/autocomplete';
+import { MatLegacyAutocomplete as MatAutocomplete, MatLegacyAutocompleteSelectedEvent as MatAutocompleteSelectedEvent, MatLegacyAutocompleteTrigger as MatAutocompleteTrigger } from '@angular/material/legacy-autocomplete';
 import { ErrorStateMatcher, mixinErrorState } from '@angular/material/core';
-import { MatFormFieldControl } from '@angular/material/form-field';
+import { MatLegacyFormFieldControl as MatFormFieldControl } from '@angular/material/legacy-form-field';
 import { AutoCompleteGroup } from '@app/library/auto-complete/auto-complete-group';
 import { SingleAutoCompleteConfiguration } from '@app/library/auto-complete/single/single-auto-complete-configuration';
 import { BaseComponent } from '@common/base/base.component';

dmp-frontend/src/app/library/deactivate/can-deactivate.guard.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { MatDialog } from '@angular/material/dialog';
+import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
 import { CanDeactivate } from '@angular/router';
 import { CheckDeactivateBaseComponent } from '@app/library/deactivate/deactivate.component';
 import { BaseComponent } from '@common/base/base.component';

dmp-frontend/src/app/library/export-method-dialog/export-method-dialog.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit, Inject } from '@angular/core';
-import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { MatLegacyDialogRef as MatDialogRef, MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA } from '@angular/material/legacy-dialog';
 
 
 @Component({

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

@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core';
-import { MatDialog } from '@angular/material/dialog';
+import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
-import { MatSnackBar } from '@angular/material/snack-bar';
+import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar';
 import { PopupNotification, SnackBarNotification, SnackBarNotificationLevel, UiNotificationService, UiNotificationType } from '@app/core/services/notification/ui-notification-service';
 import { PopupNotificationDialogComponent } from '@app/library/notification/popup/popup-notification.component';
 import { SnackBarNotificationComponent } from '@app/library/notification/snack-bar/snack-bar-notification.component';

dmp-frontend/src/app/library/notification/popup/popup-notification.component.ts

@@ -1,5 +1,5 @@
 import { Component, Inject } from '@angular/core';
-import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { MatLegacyDialogRef as MatDialogRef, MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA } from '@angular/material/legacy-dialog';
 import { PopupNotification } from '../../../core/services/notification/ui-notification-service';
 
 @Component({

dmp-frontend/src/app/library/notification/snack-bar/snack-bar-notification.component.ts

@@ -1,5 +1,5 @@
 import { Component, Inject } from '@angular/core';
-import { MAT_SNACK_BAR_DATA } from '@angular/material/snack-bar';
+import { MAT_LEGACY_SNACK_BAR_DATA as MAT_SNACK_BAR_DATA } from '@angular/material/legacy-snack-bar';
 import { SnackBarNotification } from '../../../core/services/notification/ui-notification-service';
 
 @Component({

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

@@ -4,14 +4,14 @@ import {FieldEditorModel} from '../../../admin/field-editor-model';
 import {Guid} from '@common/types/guid';
 import {RuleEditorModel} from '../../../admin/rule-editor-model';
 import {ValidationType} from '@app/core/common/enum/validation-type';
-import {MatCheckboxChange} from '@angular/material/checkbox';
+import {MMatLegacyCheckboxChange as MatCheckboxChange from '@@angular/material/legacy-checkbox;
 import {
 	DatasetDescriptionCompositeFieldEditorModel,
 	DatasetDescriptionFieldEditorModel,
 	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/dialog';
+import {MMatLegacyDialog as MatDialog from '@@angular/material/legacy-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-type/upload/dataset-profile-editor-upload-field.component.ts

@@ -3,7 +3,7 @@ import {UntypedFormArray, UntypedFormBuilder, UntypedFormControl, UntypedFormGro
 import { UploadFieldDataEditorModel } from '../../../../admin/field-data/upload-field-data-editor-model';
 import {FieldDataOption} from "@app/core/model/dataset-profile-definition/field-data/field-data";
 import {FieldDataOptionEditorModel} from "@app/ui/admin/dataset-profile/admin/field-data/field-data-option-editor-model";
-import {MatSelect} from "@angular/material/select";
+import {MatLegacySelect as MatSelect} from "@angular/material/legacy-select";
 import {ConfigurationService} from "@app/core/services/configuration/configuration.service";
 
 @Component({

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

@@ -9,9 +9,9 @@ import {BaseComponent} from '@common/base/base.component';
 import {Observable, Subscription} from 'rxjs';
 import {ViewStyleType} from './view-style-enum';
 import {DatasetProfileComboBoxType} from '@app/core/common/enum/dataset-profile-combo-box-type';
-import {ErrorStateMatcher} from '@angular/material/core';
+iimport {ErrorStateMatcher} from '@angular/material/core';
-import {MatDialog} from '@angular/material/dialog';
+import {MMatLegacyDialog as MatDialog from '@@angular/material/legacy-dialog;
-import {MatSlideToggleChange} from '@angular/material/slide-toggle';
+import {MMatLegacySlideToggleChange as MatSlideToggleChange from '@@angular/material/legacy-slide-toggle;
 import {DefaultValue, 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

@@ -3,7 +3,7 @@ import { of as observableOf, Observable,  combineLatest, BehaviorSubject,of } fr
 import { HttpClient, HttpErrorResponse } from '@angular/common/http';
 import { Component, OnInit, QueryList, ViewChild } from '@angular/core';
 import { AbstractControl, UntypedFormArray, UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
-import { MatDialog } from '@angular/material/dialog';
+import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
 import { MatHorizontalStepper} from '@angular/material/stepper';
 import { ActivatedRoute, ParamMap, Router } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
@@ -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/input';
+import { MatLegacyInput as MatInput } from '@angular/material/legacy-input';
 import { CheckDeactivateBaseComponent } from '@app/library/deactivate/deactivate.component';
 import { DescriptionTemplateTypeService } from '@app/core/services/description-template-type/description-template-type.service';
 import { DescriptionTemplateType } from '@app/core/model/description-template-type/description-template-type';

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

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { MatDialog } from '@angular/material/dialog';
+import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
 import { DatasetProfileCriteria } from '@app/core/query/dataset-profile/dataset-profile-criteria';
 import { DatasetProfileService } from '@app/core/services/dataset-profile/dataset-profile.service';
 import { DialogConfirmationUploadDatasetProfiles } from '@app/ui/admin/dataset-profile/listing/criteria/dialog-confirmation-upload-profile/dialog-confirmation-upload-profiles.component';

dmp-frontend/src/app/ui/admin/dataset-profile/listing/criteria/dialog-confirmation-upload-profile/dialog-confirmation-upload-profiles.component.ts

@@ -1,4 +1,4 @@
-import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { MatLegacyDialogRef as MatDialogRef, MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA } from '@angular/material/legacy-dialog';
 import { Inject, Component } from '@angular/core';
 
 

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

@@ -1,8 +1,8 @@
 import { DataSource } from '@angular/cdk/table';
 import { HttpClient, HttpErrorResponse } from '@angular/common/http';
 import { Component, OnInit, ViewChild } from '@angular/core';
-import { MatDialog } from '@angular/material/dialog';
+import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
-import { MatPaginator, PageEvent } from '@angular/material/paginator';
+import { MatLegacyPaginator as MatPaginator, LegacyPageEvent as PageEvent } from '@angular/material/legacy-paginator';
 import { MatSort } from '@angular/material/sort';
 import { ActivatedRoute, Params, Router } from '@angular/router';
 import { DatasetStatus } from '@app/core/common/enum/dataset-status';

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 { UntypedFormArray } from '@angular/forms';
-import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar';
+import { MatLegacySnackBar as MatSnackBar, MatLegacySnackBarConfig as MatSnackBarConfig } from '@angular/material/legacy-snack-bar';
 import { TranslateService } from '@ngx-translate/core';
 import { ContentObserver } from '@angular/cdk/observers';
 

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

@@ -1,10 +1,10 @@
 import { DataSource } from '@angular/cdk/table';
 import { HttpErrorResponse } from '@angular/common/http';
 import { Component, EventEmitter, OnInit, ViewChild } from '@angular/core';
-import { MatDialog } from '@angular/material/dialog';
+import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
-import { MatPaginator } from '@angular/material/paginator';
+import { MatLegacyPaginator as MatPaginator } from '@angular/material/legacy-paginator';
 import { MatSort } from '@angular/material/sort';
-import { MatTableDataSource } from '@angular/material/table';
+import { MatLegacyTableDataSource as MatTableDataSource } from '@angular/material/legacy-table';
 import { Router } from '@angular/router';
 import { DescriptionTemplateType } from '@app/core/model/description-template-type/description-template-type';
 import { DescriptionTemplateTypeLookup } from '@app/core/query/description-template/description-template-type.lookup';

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/dialog';
+import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
 import { ConfirmationDialogComponent } from '@common/modules/confirmation-dialog/confirmation-dialog.component';
 import { MultipleAutoCompleteConfiguration } from '@app/library/auto-complete/multiple/multiple-auto-complete-configuration';
 import { DatasetProfileModel } from '@app/core/model/dataset/dataset-profile';

dmp-frontend/src/app/ui/admin/dmp-profile/listing/criteria/dialog-confirmation-upload-profile/dialog-confirmation-upload-profiles.component.ts

@@ -1,4 +1,4 @@
-import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { MatLegacyDialogRef as MatDialogRef, MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA } from '@angular/material/legacy-dialog';
 import { Inject, Component } from '@angular/core';
 
 

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/dialog';
+import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
 import { DmpBlueprintCriteria } from '@app/core/query/dmp/dmp-blueprint-criteria';
 import { DmpProfileService } from '@app/core/services/dmp/dmp-profile.service';
 import { BaseCriteriaComponent } from '@app/ui/misc/criteria/base-criteria.component';

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

@@ -2,9 +2,9 @@
 import { DataSource } from '@angular/cdk/table';
 import { HttpClient, HttpErrorResponse } from '@angular/common/http';
 import { Component, OnInit, ViewChild } from '@angular/core';
-import { MatDialog } from '@angular/material/dialog';
+import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
-import { MatPaginator, PageEvent } from '@angular/material/paginator';
+import { MatLegacyPaginator as MatPaginator, LegacyPageEvent as PageEvent } from '@angular/material/legacy-paginator';
-import { MatSnackBar } from '@angular/material/snack-bar';
+import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar';
 import { MatSort } from '@angular/material/sort';
 import { ActivatedRoute, Params, Router } from '@angular/router';
 import { DataTableRequest } from '@app/core/model/data-table/data-table-request';

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

@@ -4,8 +4,8 @@ import {of as observableOf, merge as observableMerge,  Observable } from 'rxjs';
 import {map, catchError, switchMap, startWith, takeUntil} from 'rxjs/operators';
 import { DataSource } from '@angular/cdk/table';
 import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core';
-import { MatPaginator } from '@angular/material/paginator';
+import { MatLegacyPaginator as MatPaginator } from '@angular/material/legacy-paginator';
-import { MatSnackBar } from '@angular/material/snack-bar';
+import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar';
 import { MatSort } from '@angular/material/sort';
 import { TranslateService } from '@ngx-translate/core';
 import { UserListingModel } from '../../../../core/model/user/user-listing';
@@ -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/table';
+import { MatLegacyTableDataSource as MatTableDataSource } from '@angular/material/legacy-table';
 
 export class UsersDataSource extends DataSource<UserListingModel> {
 

dmp-frontend/src/app/ui/contact/contact-dialog/contact-dialog.component.ts

@@ -1,5 +1,5 @@
 import { Component, Inject } from '@angular/core';
-import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { MatLegacyDialogRef as MatDialogRef, MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA } from '@angular/material/legacy-dialog';
 import { FormGroup } from '@angular/forms';
 
 @Component({

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/dialog';
+import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-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/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 {UntypedFormControl, UntypedFormBuilder, UntypedFormGroup} from '@angular/forms';
 import { BaseComponent } from '@common/base/base.component';
-import { MatDialog } from '@angular/material/dialog';
+import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-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/quick-wizard-create-add/quick-wizard-create-add.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from "@angular/core";
-import { MatSnackBar } from "@angular/material/snack-bar";
+import { MatLegacySnackBar as MatSnackBar } from "@angular/material/legacy-snack-bar";
 import { ActivatedRoute, Router } from "@angular/router";
 import { BaseComponent } from '@common/base/base.component';
 import { TranslateService } from "@ngx-translate/core";

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

@@ -1,5 +1,5 @@
 import {Component, OnInit, Output, EventEmitter, Input, ViewChild} from '@angular/core';
-import { MatDialog } from '@angular/material/dialog';
+import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
 import {ActivatedRoute, 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 { UntypedFormControl, UntypedFormBuilder } from '@angular/forms';
 import { DatasetCopyDialogueComponent } from '@app/ui/dataset/dataset-wizard/dataset-copy-dialogue/dataset-copy-dialogue.component';
-import { MatDialog } from '@angular/material/dialog';
+import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
 import { debounceTime, takeUntil } from 'rxjs/operators';
 import {ActivatedRoute, 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, Input, ViewChild} from '@angular/core';
-import { MatDialog } from '@angular/material/dialog';
+import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
 import {ActivatedRoute, 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

@@ -1,7 +1,7 @@
 
 import { Component, OnInit, ViewChild } from '@angular/core';
 import { UntypedFormArray, UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
-import { MatDialog } from '@angular/material/dialog';
+import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
 import { MatStepper } from '@angular/material/stepper';
 import { Router } from '@angular/router';
 import { DatasetStatus } from '@app/core/common/enum/dataset-status';

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

@@ -1,7 +1,7 @@
 
 import { map, filter } from 'rxjs/operators';
 import { Component } from "@angular/core";
-import { MatDialogRef, MAT_DIALOG_DATA } from "@angular/material/dialog";
+import { MatLegacyDialogRef as MatDialogRef, MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA } from "@angular/material/legacy-dialog";
 import { SingleAutoCompleteConfiguration } from "../../../../library/auto-complete/single/single-auto-complete-configuration";
 import { Observable } from "rxjs";
 import { DataTableRequest } from "../../../../core/model/data-table/data-table-request";

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

@@ -8,7 +8,7 @@ import { TranslateService } from '@ngx-translate/core';
 import { DatasetProfileModel } from '@app/core/model/dataset/dataset-profile';
 import { takeUntil } from 'rxjs/operators';
 import { DmpProfileService } from '@app/core/services/dmp/dmp-profile.service';
-import { MatDialog } from '@angular/material/dialog';
+import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
 import { PopupNotificationDialogComponent } from '@app/library/notification/popup/popup-notification.component';
 
 @Component({

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

@@ -1,7 +1,7 @@
 import {ChangeDetectorRef, Component, OnInit, ViewChild} from '@angular/core';
 import {AbstractControl, UntypedFormArray, UntypedFormControl, UntypedFormGroup} from '@angular/forms';
-import {MatDialog} from '@angular/material/dialog';
+import {MatLegacyDialog as MatDialog} from '@angular/material/legacy-dialog';
-import {MatSnackBar} from '@angular/material/snack-bar';
+import {MatLegacySnackBar as MatSnackBar} from '@angular/material/legacy-snack-bar';
 import {ActivatedRoute, Router} from '@angular/router';
 import {DatasetStatus} from '@app/core/common/enum/dataset-status';
 import {DmpStatus} from '@app/core/common/enum/dmp-status';

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

@@ -1,6 +1,6 @@
 import { Component, Input, OnInit, Output, EventEmitter } from '@angular/core';
 import { UntypedFormArray, UntypedFormGroup } from '@angular/forms';
-import { MatDialog } from '@angular/material/dialog';
+import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
 import { Router } from '@angular/router';
 import { ExternalSourceItemModel } from '@app/core/model/external-sources/external-source-item';
 import { ExternalSourcesConfiguration } from '@app/core/model/external-sources/external-sources-configuration';
@@ -23,7 +23,7 @@ import { TranslateService } from '@ngx-translate/core';
 import { Observable } from 'rxjs';
 import { takeUntil, map } from 'rxjs/operators';
 import { ENTER, COMMA } from '@angular/cdk/keycodes';
-import { MatChipInputEvent } from '@angular/material/chips';
+import { MatLegacyChipInputEvent as MatChipInputEvent } from '@angular/material/legacy-chips';
 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';

dmp-frontend/src/app/ui/dataset/dataset-wizard/external-references/editors/data-repository/dataset-external-data-repository-dialog-editor.component.ts

@@ -1,6 +1,6 @@
 import { Component, Inject, OnInit } from '@angular/core';
 import { UntypedFormGroup } from '@angular/forms';
-import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { MatLegacyDialogRef as MatDialogRef, MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA } from '@angular/material/legacy-dialog';
 import { ExternalDataRepositoryService } from '@app/core/services/external-sources/data-repository/extternal-data-repository.service';
 import { ExternalDataRepositoryEditorModel } from '@app/ui/dataset/dataset-wizard/dataset-wizard-editor.model';
 import { BaseComponent } from '@common/base/base.component';

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

@@ -1,6 +1,6 @@
 import { Component, Inject, OnInit } from '@angular/core';
 import { UntypedFormGroup } from '@angular/forms';
-import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { MatLegacyDialogRef as MatDialogRef, MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA } from '@angular/material/legacy-dialog';
 import { ExternalDatasetService } from '@app/core/services/external-sources/dataset/external-dataset.service';
 import { ExternalDatasetEditorModel } from '@app/ui/dataset/dataset-wizard/dataset-wizard-editor.model';
 import { BaseComponent } from '@common/base/base.component';

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

@@ -1,6 +1,6 @@
 import { Component, Inject, OnInit } from '@angular/core';
 import { UntypedFormGroup } from '@angular/forms';
-import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { MatLegacyDialogRef as MatDialogRef, MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA } from '@angular/material/legacy-dialog';
 import { ExternalRegistryService } from '@app/core/services/external-sources/registry/external-registry.service';
 import { ExternalRegistryEditorModel } from '@app/ui/dataset/dataset-wizard/dataset-wizard-editor.model';
 import { BaseComponent } from '@common/base/base.component';

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

@@ -1,6 +1,6 @@
 import { Component, Inject, OnInit } from '@angular/core';
 import { UntypedFormGroup } from '@angular/forms';
-import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { MatLegacyDialogRef as MatDialogRef, MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA } from '@angular/material/legacy-dialog';
 import { ExternalServiceService } from '@app/core/services/external-sources/service/external-service.service';
 import { ExternalServiceEditorModel } from '@app/ui/dataset/dataset-wizard/dataset-wizard-editor.model';
 import { BaseComponent } from '@common/base/base.component';

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

@@ -1,5 +1,5 @@
 import {Component, Inject, OnInit} from "@angular/core";
-import {MAT_DIALOG_DATA, MatDialog, MatDialogRef} from "@angular/material/dialog";
+import {MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA, MatLegacyDialog as MatDialog, MatLegacyDialogRef as MatDialogRef} from "@angular/material/legacy-dialog";
 import {map, takeUntil} from "rxjs/operators";
 import {ProgressIndicationService} from "@app/core/services/progress-indication/progress-indication-service";
 import {BaseComponent} from "@common/base/base.component";

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/dialog';
+import { MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA, MatLegacyDialogRef as MatDialogRef } from '@angular/material/legacy-dialog';
 import { UntypedFormGroup } 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

@@ -1,8 +1,8 @@
 
 import { Component, Input, OnInit, Output, EventEmitter } from '@angular/core';
 import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup } from '@angular/forms';
-import { MatDialog } from '@angular/material/dialog';
+import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
-import { MatSnackBar } from '@angular/material/snack-bar';
+import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar';
 import { Router } from '@angular/router';
 import { DatasetStatus } from '@app/core/common/enum/dataset-status';
 import { DataTableData } from '@app/core/model/data-table/data-table-data';

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

@@ -1,6 +1,6 @@
 
 import { Component, Inject, OnInit } from '@angular/core';
-import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { MatLegacyDialogRef as MatDialogRef, MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA } from '@angular/material/legacy-dialog';
 import { DataTableData } from '@app/core/model/data-table/data-table-data';
 import { DataTableRequest } from '@app/core/model/data-table/data-table-request';
 import { DatasetProfileModel } from '@app/core/model/dataset/dataset-profile';

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

@@ -1,6 +1,6 @@
 
 import { Component, OnInit, ViewChild } from '@angular/core';
-import { MatPaginator } from '@angular/material/paginator';
+import { MatLegacyPaginator as MatPaginator } from '@angular/material/legacy-paginator';
 import { MatSort } from '@angular/material/sort';
 import { ActivatedRoute, Params, Router } from '@angular/router';
 import { DatasetStatus } from '@app/core/common/enum/dataset-status';
@@ -20,7 +20,7 @@ import { ExternalTagEditorModel, DatasetWizardEditorModel } from '../dataset-wiz
 import { AuthService } from '@app/core/services/auth/auth.service';
 import { isNullOrUndefined } from '@app/utilities/enhancers/utils';
 import { DatasetCriteriaDialogComponent } from './criteria/dataset-criteria-dialogue/dataset-criteria-dialog.component';
-import { MatDialog } from '@angular/material/dialog';
+import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
 import { UntypedFormGroup, UntypedFormBuilder, UntypedFormControl } from '@angular/forms';
 import { RecentActivityOrder } from '@app/core/common/enum/recent-activity-order';
 import { EnumUtils } from '@app/core/services/utilities/enum-utils.service';

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/dialog';
+import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
 import { DatasetCopyDialogueComponent } from '../../dataset-wizard/dataset-copy-dialogue/dataset-copy-dialogue.component';
 import { UntypedFormControl } 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/dialog';
+import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-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/clone-dialog/clone-dialog.component.ts

@@ -1,5 +1,5 @@
 import { Component, Inject } from '@angular/core';
-import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { MatLegacyDialog as MatDialog, MatLegacyDialogRef as MatDialogRef, MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA } from '@angular/material/legacy-dialog';
 import { DmpService } from '@app/core/services/dmp/dmp.service';
 import { map, takeUntil } from 'rxjs/operators';
 import { DmpModel } from '@app/core/model/dmp/dmp';

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/dialog';
+import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
 import { isNullOrUndefined } from '@app/utilities/enhancers/utils';
 import { DmpProfileService } from '@app/core/services/dmp/dmp-profile.service';
 import { DmpBlueprintDefinition, SystemFieldType } from '@app/core/model/dmp/dmp-blueprint/dmp-blueprint';

dmp-frontend/src/app/ui/dmp/dataset-preview/dataset-preview-dialog.component.ts

@@ -1,6 +1,6 @@
 import { Component, Inject, OnInit } from '@angular/core';
 import { UntypedFormGroup } from '@angular/forms';
-import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { MatLegacyDialogRef as MatDialogRef, MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA } from '@angular/material/legacy-dialog';
 import { DatasetWizardService } from '@app/core/services/dataset-wizard/dataset-wizard.service';
 import { ProgressIndicationService } from '@app/core/services/progress-indication/progress-indication-service';
 import { DatasetDescriptionFormEditorModel } from '@app/ui/misc/dataset-description-form/dataset-description-form.model';

dmp-frontend/src/app/ui/dmp/dmp-editor-blueprint/dmp-editor-blueprint.component.ts

@@ -24,7 +24,7 @@ import { ExternalSourcesService } from '@app/core/services/external-sources/exte
 import { Observable, interval } from 'rxjs';
 import { ExternalSourceItemModel } from '@app/core/model/external-sources/external-source-item';
 import { OrganisationService } from '@app/core/services/organisation/organisation.service';
-import { MatDialog } from '@angular/material/dialog';
+import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
 import { AddResearcherComponent } from '../editor/add-researcher/add-researcher.component';
 import { AddOrganizationComponent } from '../editor/add-organization/add-organization.component';
 import { RequestItem } from '@app/core/query/request-item';

dmp-frontend/src/app/ui/dmp/dmp-to-dataset/dmp-to-dataset-dialog.component.ts

@@ -1,5 +1,5 @@
 import { Component, Inject, OnInit } from '@angular/core';
-import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { MatLegacyDialogRef as MatDialogRef, MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA } from '@angular/material/legacy-dialog';
 
 @Component({
 	selector: 'app-to-dataset-dialog-component',

dmp-frontend/src/app/ui/dmp/editor/add-organization/add-organization.component.ts

@@ -1,6 +1,6 @@
 import { Component, Inject, OnInit } from '@angular/core';
 import { AbstractControl, AsyncValidatorFn, UntypedFormControl, UntypedFormGroup, ValidationErrors } from '@angular/forms';
-import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { MatLegacyDialogRef as MatDialogRef, MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA } from '@angular/material/legacy-dialog';
 import { ExternalSourcesService } from '@app/core/services/external-sources/external-sources.service';
 import { ExternalResearcherService } from '@app/core/services/external-sources/researcher/external-researcher.service';
 import { OrganisationService } from '@app/core/services/organisation/organisation.service';

dmp-frontend/src/app/ui/dmp/editor/add-researcher/add-researcher.component.ts

@@ -1,6 +1,6 @@
 import { Component, Inject, OnInit } from '@angular/core';
 import { AbstractControl, AsyncValidatorFn, UntypedFormControl, UntypedFormGroup, ValidationErrors } from '@angular/forms';
-import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { MatLegacyDialogRef as MatDialogRef, MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA } from '@angular/material/legacy-dialog';
 import { ExternalSourcesService } from '@app/core/services/external-sources/external-sources.service';
 import { ExternalResearcherService } from '@app/core/services/external-sources/researcher/external-researcher.service';
 import { ResearcherEditorModel } from '@app/ui/dmp/editor/add-researcher/add-researcher.model';

dmp-frontend/src/app/ui/dmp/editor/available-profiles/available-profiles.component.ts

@@ -1,6 +1,6 @@
 import { Component, Inject, OnInit } from '@angular/core';
 import { UntypedFormGroup } from '@angular/forms';
-import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { MatLegacyDialogRef as MatDialogRef, MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA } from '@angular/material/legacy-dialog';
 import { DataTableRequest } from '@app/core/model/data-table/data-table-request';
 import { DatasetProfileModel } from '@app/core/model/dataset/dataset-profile';
 import { DatasetProfileCriteria } from '@app/core/query/dataset-profile/dataset-profile-criteria';

dmp-frontend/src/app/ui/dmp/editor/cost-editor/add-cost/add-cost.component.ts

@@ -1,6 +1,6 @@
 import { Component, Inject, OnInit } from '@angular/core';
 import { UntypedFormGroup } from '@angular/forms';
-import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { MatLegacyDialogRef as MatDialogRef, MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA } from '@angular/material/legacy-dialog';
 import { ExternalResearcherService } from '@app/core/services/external-sources/researcher/external-researcher.service';
 import { BaseComponent } from '@common/base/base.component';
 import { takeUntil } from 'rxjs/operators';

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

@@ -3,9 +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 { MatChipInputEvent } from '@angular/material/chips';
+import { MatLegacyChipInputEvent as MatChipInputEvent } from '@angular/material/legacy-chips';
-import { MatDialog } from '@angular/material/dialog';
+import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
-import { MatSnackBar } from '@angular/material/snack-bar';
+import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-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';

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/dialog';
+import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-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-deposit-dropdown/dmp-deposit-dropdown.component.ts

@@ -1,5 +1,5 @@
 import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
-import {MatDialog} from '@angular/material/dialog';
+import {MatLegacyDialog as MatDialog} from '@angular/material/legacy-dialog';
 import {DepositConfigurationStatus} from '@app/core/common/enum/deposit-configuration-status';
 import {DepositConfigurationModel} from '@app/core/model/deposit/deposit-configuration';
 import {DmpOverviewModel} from '@app/core/model/dmp/dmp-overview';

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

@@ -1,7 +1,7 @@
 
 import { Component, OnInit} from '@angular/core';
 import { UntypedFormGroup, AbstractControl, UntypedFormControl, UntypedFormArray} from '@angular/forms';
-import { MatDialog } from '@angular/material/dialog';
+import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
 import { ActivatedRoute, Params, Router } from '@angular/router';
 import { DmpStatus } from '@app/core/common/enum/dmp-status';
 import { DataTableRequest } from '@app/core/model/data-table/data-table-request';

dmp-frontend/src/app/ui/dmp/editor/dmp-finalize-dialog/dmp-finalize-dialog.component.ts

@@ -1,5 +1,5 @@
 import { Component, Inject, OnInit } from '@angular/core';
-import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { MatLegacyDialogRef as MatDialogRef, MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA } from '@angular/material/legacy-dialog';
 import { Router } from '@angular/router';
 import { DatasetStatus } from '@app/core/common/enum/dataset-status';
 import { DatasetService } from '@app/core/services/dataset/dataset.service';

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

@@ -1,7 +1,7 @@
 
 import { Component, Input, OnInit } from '@angular/core';
 import { UntypedFormGroup, UntypedFormArray } from '@angular/forms';
-import { MatDialog } from '@angular/material/dialog';
+import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
 import { DataTableRequest } from '@app/core/model/data-table/data-table-request';
 import { DatasetProfileModel } from '@app/core/model/dataset/dataset-profile';
 import { DmpProfileDefinition } from '@app/core/model/dmp-profile/dmp-profile';

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

@@ -6,7 +6,7 @@ import { ExternalSourceItemModel } from '@app/core/model/external-sources/extern
 import { Observable } from 'rxjs';
 import { ExternalSourcesService } from '@app/core/services/external-sources/external-sources.service';
 import { isNullOrUndefined } from '@app/utilities/enhancers/utils';
-import { MatDialog } from '@angular/material/dialog';
+import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-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

@@ -9,7 +9,7 @@ import { ExternalSourceItemModel } from '@app/core/model/external-sources/extern
 import { Observable } from 'rxjs';
 import { ExternalSourcesService } from '@app/core/services/external-sources/external-sources.service';
 import { isNullOrUndefined } from '@app/utilities/enhancers/utils';
-import { MatDialog } from '@angular/material/dialog';
+import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-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/editor/people-tab/people-tab.component.ts

@@ -1,6 +1,6 @@
 import { Component, Input, OnInit } from '@angular/core';
 import { UntypedFormGroup } from '@angular/forms';
-import { MatDialog } from '@angular/material/dialog';
+import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
 import { ConfirmationDialogComponent } from '@common/modules/confirmation-dialog/confirmation-dialog.component';
 import { TranslateService } from '@ngx-translate/core';
 import { Principal } from '../../../../core/model/auth/principal';

dmp-frontend/src/app/ui/dmp/invitation/dmp-invitation-dialog.component.ts

@@ -2,8 +2,8 @@
 import { COMMA, ENTER } from '@angular/cdk/keycodes';
 import { Component, Inject, OnInit, ViewChild } from '@angular/core';
 import { UntypedFormGroup } from '@angular/forms';
-import { MatChipInputEvent } from '@angular/material/chips';
+import { MatLegacyChipInputEvent as MatChipInputEvent } from '@angular/material/legacy-chips';
-import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { MatLegacyDialogRef as MatDialogRef, MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA } from '@angular/material/legacy-dialog';
 import { ActivatedRoute, Router } from '@angular/router';
 import { DmpInvitation } from '@app/core/model/dmp/invitation/dmp-invitation';
 import { DmpInvitationUser } from '@app/core/model/dmp/invitation/dmp-invitation-user';

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/dialog';
+import { MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA, MatLegacyDialogRef as MatDialogRef } from '@angular/material/legacy-dialog';
 import { DmpCriteriaComponent } from './dmp-criteria.component';
 import { DmpCriteria } from '@app/core/query/dmp/dmp-criteria';
 import { UntypedFormGroup } from '@angular/forms';

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

@@ -1,7 +1,7 @@
 
 import { Component, Input, OnInit, Output, EventEmitter } from '@angular/core';
 import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup } from '@angular/forms';
-import { MatDialog } from '@angular/material/dialog';
+import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
 import { DataTableRequest } from '@app/core/model/data-table/data-table-request';
 import { GrantListingModel } from '@app/core/model/grant/grant-listing';
 import { DatasetProfileCriteria } from '@app/core/query/dataset-profile/dataset-profile-criteria';

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

@@ -1,7 +1,7 @@
 
 import { Component, OnInit, ViewChild } from '@angular/core';
-import { MatDialog } from '@angular/material/dialog';
+import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
-import { MatPaginator } from '@angular/material/paginator';
+import { MatLegacyPaginator as MatPaginator } from '@angular/material/legacy-paginator';
 import { MatSort } from '@angular/material/sort';
 import { ActivatedRoute, Router } from '@angular/router';
 import { DataTableRequest } from '@app/core/model/data-table/data-table-request';

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

@@ -1,6 +1,6 @@
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { DmpListingModel } from '../../../../core/model/dmp/dmp-listing';
-import { MatDialog } from '@angular/material/dialog';
+import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
 import { DmpInvitationDialogComponent } from '../../invitation/dmp-invitation-dialog.component';
 import { Router, ActivatedRoute } from '@angular/router';
 import { DatasetService } from '../../../../core/services/dataset/dataset.service';

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

@@ -1,5 +1,5 @@
 import { Component, Inject } from '@angular/core';
-import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { MatLegacyDialog as MatDialog, MatLegacyDialogRef as MatDialogRef, MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA } from '@angular/material/legacy-dialog';
 import { DmpService } from '../../../../core/services/dmp/dmp.service';
 import { MultipleAutoCompleteConfiguration } from '@app/library/auto-complete/multiple/multiple-auto-complete-configuration';
 import { map, takeUntil } from 'rxjs/operators';

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

@@ -1,5 +1,5 @@
 import {Component, ElementRef, OnInit, ViewChild} from '@angular/core';
-import {MatDialog} from '@angular/material/dialog';
+import {MatLegacyDialog as MatDialog} from '@angular/material/legacy-dialog';
 import {ActivatedRoute, Params, Router} from '@angular/router';
 import {DatasetStatus} from '@app/core/common/enum/dataset-status';
 import {DmpStatus} from '@app/core/common/enum/dmp-status';

dmp-frontend/src/app/ui/dmp/start-new-dataset-dialogue/start-new-dataset-dialog.component.ts

@@ -1,5 +1,5 @@
 import { Component, Inject } from '@angular/core';
-import { MatDialogRef, MAT_DIALOG_DATA, MatDialog } from '@angular/material/dialog';
+import { MatLegacyDialogRef as MatDialogRef, MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA, MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
 import { BaseComponent } from '@common/base/base.component';
 import { SingleAutoCompleteConfiguration } from '@app/library/auto-complete/single/single-auto-complete-configuration';
 import { TranslateService } from '@ngx-translate/core';

dmp-frontend/src/app/ui/dmp/start-new-dmp-dialogue/start-new-dmp-dialog.component.ts

@@ -1,5 +1,5 @@
 import { Component, Inject } from '@angular/core';
-import { MatDialogRef, MAT_DIALOG_DATA, MatDialog } from '@angular/material/dialog';
+import { MatLegacyDialogRef as MatDialogRef, MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA, MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
 import { Router } from '@angular/router';
 import { DmpUploadDialogue } from '../listing/upload-dialogue/dmp-upload-dialogue.component';
 import { UiNotificationService, SnackBarNotificationLevel } from '@app/core/services/notification/ui-notification-service';

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

@@ -2,7 +2,7 @@
 import { HttpErrorResponse } from '@angular/common/http';
 import { Component, OnInit } from '@angular/core';
 import { UntypedFormGroup } from '@angular/forms';
-import { MatSnackBar } from '@angular/material/snack-bar';
+import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar';
 import { ActivatedRoute, Params, Router } from '@angular/router';
 import { DmpModel } from '@app/core/model/dmp/dmp';
 import { DmpBlueprintDefinition, SystemFieldType } from '@app/core/model/dmp/dmp-blueprint/dmp-blueprint';

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

@@ -1,7 +1,7 @@
 
 import { Component, Input, OnInit } from '@angular/core';
 import { UntypedFormGroup } from '@angular/forms';
-import { MatSnackBar } from '@angular/material/snack-bar';
+import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar';
 import { ActivatedRoute, Router } from '@angular/router';
 import { DatasetProfileModel } from '@app/core/model/dataset/dataset-profile';
 import { ExternalSourceItemModel } from '@app/core/model/external-sources/external-source-item';

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

@@ -1,8 +1,8 @@
 import { SelectionModel } from '@angular/cdk/collections';
 import { Component, Input, OnInit, ViewChild } from '@angular/core';
 import { UntypedFormArray, UntypedFormBuilder, UntypedFormControl, UntypedFormGroup } from '@angular/forms';
-import { MatPaginator } from '@angular/material/paginator';
+import { MatLegacyPaginator as MatPaginator } from '@angular/material/legacy-paginator';
-import { MatSnackBar } from '@angular/material/snack-bar';
+import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar';
 import { MatSort } from '@angular/material/sort';
 import { ActivatedRoute, Params, Router } from '@angular/router';
 import { DataTableRequest } from '@app/core/model/data-table/data-table-request';

dmp-frontend/src/app/ui/faq/dialog/faq-dialog.component.ts

@@ -1,5 +1,5 @@
 import { Component, Inject } from '@angular/core';
-import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { MatLegacyDialogRef as MatDialogRef, MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA } from '@angular/material/legacy-dialog';
 
 @Component({
 	selector: 'app-faq-dialog',

dmp-frontend/src/app/ui/glossary/dialog/glossary-dialog.component.ts

@@ -1,5 +1,5 @@
 import { Component, Inject } from '@angular/core';
-import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { MatLegacyDialogRef as MatDialogRef, MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA } from '@angular/material/legacy-dialog';
 
 @Component({
 	selector: 'app-glossary-dialog',

dmp-frontend/src/app/ui/language/dialog/language-dialog.component.ts

@@ -1,5 +1,5 @@
 import { Component, Inject } from '@angular/core';
-import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { MatLegacyDialogRef as MatDialogRef, MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA } from '@angular/material/legacy-dialog';
 
 @Component({
 	selector: 'app-language-dialog',

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

@@ -1,5 +1,5 @@
 import {Component, Inject} from "@angular/core";
-import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
+import {MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA, MatLegacyDialogRef as MatDialogRef} from "@angular/material/legacy-dialog";
 import {VisibilityRulesService} from "@app/ui/misc/dataset-description-form/visibility-rules/visibility-rules.service";
 
 @Component({

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

@@ -7,7 +7,7 @@ import {VisibilityRulesService} from '../../visibility-rules/visibility-rules.se
 import {
 	FormCompositeFieldDialogComponent
 } from "@app/ui/misc/dataset-description-form/components/form-composite-field-dialog/form-composite-field-dialog.component";
-import {MatDialog} from "@angular/material/dialog";
+import {MatLegacyDialog as MatDialog} from "@angular/material/legacy-dialog";
 import {cloneAbstractControl} from "@app/utilities/enhancers/utils";
 
 @Component({

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

@@ -29,7 +29,7 @@ import { ServiceCriteria } from '@app/core/query/service/service-criteria';
 import { TagCriteria } from '@app/core/query/tag/tag-criteria';
 import { isNullOrUndefined } from '@app/utilities/enhancers/utils';
 import { ExternalTagEditorModel } from '@app/ui/dataset/dataset-wizard/dataset-wizard-editor.model';
-import { MatChipInputEvent } from '@angular/material/chips';
+import { MatLegacyChipInputEvent as MatChipInputEvent } from '@angular/material/legacy-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';
@@ -44,7 +44,7 @@ import {
 	UiNotificationService
 } from "@app/core/services/notification/ui-notification-service";
 import {FormValidationErrorsDialogComponent} from "@common/forms/form-validation-errors-dialog/form-validation-errors-dialog.component";
-import {MatDialog} from "@angular/material/dialog";
+import {MatLegacyDialog as MatDialog} from "@angular/material/legacy-dialog";
 import {HttpError} from "@common/modules/errors/error-handling/http-error-handling.service";
 import {HttpErrorResponse} from "@angular/common/http";
 import * as FileSaver from "file-saver";

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

@@ -1,7 +1,7 @@
 
 import { Component, OnInit } from '@angular/core';
 import { UntypedFormControl } from '@angular/forms';
-import { MatDialog } from '@angular/material/dialog';
+import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
 import { Router } from '@angular/router';
 import { AppRole } from '@app/core/common/enum/app-role';
 import { SearchBarItem } from '@app/core/model/dashboard/search-bar-item';

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

@@ -1,6 +1,6 @@
 import { Component, Inject, OnInit } from '@angular/core';
 import { UntypedFormGroup } from '@angular/forms';
-import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { MatLegacyDialogRef as MatDialogRef, MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA } from '@angular/material/legacy-dialog';
 import { Router } from '@angular/router';
 import { Principal } from '../../../../core/model/auth/principal';
 import { AuthService } from '../../../../core/services/auth/auth.service';

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/dialog';
+import { MatLegacyDialogRef as MatDialogRef, MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA } from '@angular/material/legacy-dialog';
 import { ActivatedRoute, Params } from '@angular/router';
 import { BaseComponent } from '@common/base/base.component';
 import { takeUntil } from 'rxjs/operators';

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

@@ -1,8 +1,8 @@
 import { Location } from '@angular/common';
 import { HttpClient } from '@angular/common/http';
 import { Component, ElementRef, EventEmitter, OnInit, Output, ViewChild } from '@angular/core';
-import { MatDialog } from '@angular/material/dialog';
+import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
-import { MatMenuTrigger } from '@angular/material/menu';
+import { MatLegacyMenuTrigger as MatMenuTrigger } from '@angular/material/legacy-menu';
 import { Router } from '@angular/router';
 import { AppRole } from '@app/core/common/enum/app-role';
 import { UserListingModel } from '@app/core/model/user/user-listing';

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

@@ -1,7 +1,7 @@
 
 import { Component, Input, OnInit } from '@angular/core';
 import { UntypedFormArray, UntypedFormGroup } from '@angular/forms';
-import { MatSnackBar } from '@angular/material/snack-bar';
+import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar';
 import { ActivatedRoute, Router } from '@angular/router';
 import { DatasetProfileModel } from '@app/core/model/dataset/dataset-profile';
 import { DatasetProfileCriteria } from '@app/core/query/dataset-profile/dataset-profile-criteria';

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

@@ -1,7 +1,7 @@
 
 import { Component, Input, OnInit } from '@angular/core';
 import { AbstractControl, FormArray, FormControl, UntypedFormGroup } from '@angular/forms';
-import { MatSnackBar } from '@angular/material/snack-bar';
+import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar';
 import { Router } from '@angular/router';
 import { GrantCriteria } from '@app/core/query/grant/grant-criteria';
 import { RequestItem } from '@app/core/query/request-item';

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

@@ -1,8 +1,8 @@
 
 import { Component, OnInit, ViewChild } from '@angular/core';
 import { AbstractControl, UntypedFormArray, FormControl, UntypedFormGroup } from '@angular/forms';
-import { MatDialog } from '@angular/material/dialog';
+import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
-import { MatSnackBar } from '@angular/material/snack-bar';
+import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar';
 import { MatStepper } from '@angular/material/stepper';
 import { Router } from '@angular/router';
 import { DatasetStatus } from '@app/core/common/enum/dataset-status';

dmp-frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { UntypedFormGroup } from '@angular/forms';
-import { MatDialog } from '@angular/material/dialog';
+import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
 import { Router } from '@angular/router';
 import { ContactEmailFormModel } from '@app/core/model/contact/contact-email-form-model';
 import { ContactSupportService } from '@app/core/services/contact-support/contact-support.service';

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

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { MatDialog } from '@angular/material/dialog';
+import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
 import { TranslateService } from '@ngx-translate/core';
 import { AuthService } from '../../core/services/auth/auth.service';
 import { UserDialogComponent } from '../misc/navigation/user-dialog/user-dialog.component';

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

@@ -1,5 +1,5 @@
 import { Component, Inject } from '@angular/core';
-import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { MatLegacyDialogRef as MatDialogRef, MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA } from '@angular/material/legacy-dialog';
 
 @Component({
 	selector: 'app-user-guide-dialog',

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

@@ -1,6 +1,6 @@
 import { Component, Inject, OnInit } from '@angular/core';
 import { UntypedFormGroup } from '@angular/forms';
-import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { MatLegacyDialogRef as MatDialogRef, MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA } from '@angular/material/legacy-dialog';
 import { UserMergeRequestModel } from '@app/core/model/merge/user-merge-request';
 import { MergeLoginService } from '@app/ui/auth/login/utilities/merge-login.service';
 import { DatasetDescriptionFormEditorModel } from '@app/ui/misc/dataset-description-form/dataset-description-form.model';

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

@@ -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/dialog';
+import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-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/assets/scss/blue-theme.scss

@@ -115,28 +115,46 @@ $custom-theme: (
   background: $app-blue-theme-background
 );
 
-$custom-typography: mat.define-typography-config(
+$custom-typography: mat.define-legacy-typography-config(
   $font-family: "Lato, regular",
   $headline: mat.define-typography-level(32px, 48px, 700),
   $body-1: mat.define-typography-level(16px, 24px, 500)
 );
 
 .blue-theme {
-  @include mat.core();
+  // TODO(v15): As of v15 mat.legacy-core no longer includes default typography styles.
+//  The following line adds:
+//    1. Default typography styles for all components
+//    2. Styles for typography hierarchy classes (e.g. .mat-headline-1)
+//  If you specify typography styles for the components you use elsewhere, you should delete this line.
+//  If you don't need the default component typographies but still want the hierarchy styles,
+//  you can delete this line and instead use:
+//    `@include mat.legacy-typography-hierarchy(mat.define-legacy-typography-config());`
+@include mat.all-legacy-component-typographies();
+@include mat.legacy-core();
 
-  @include mat.all-component-themes($custom-theme);
+  @include mat.all-legacy-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.typography-hierarchy($custom-typography);
+  @include mat.legacy-typography-hierarchy($custom-typography);
 
   // Override typography for a specific Angular Material components.
-  @include mat.checkbox-typography($custom-typography);
+  @include mat.legacy-checkbox-typography($custom-typography);
 
   // Override typography for all Angular Material, including mat-base-typography and all components.
-  @include mat.all-component-typographies($custom-typography);
+  @include mat.all-legacy-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);
+  // TODO(v15): As of v15 mat.legacy-core no longer includes default typography styles.
+//  The following line adds:
+//    1. Default typography styles for all components
+//    2. Styles for typography hierarchy classes (e.g. .mat-headline-1)
+//  If you specify typography styles for the components you use elsewhere, you should delete this line.
+//  If you don't need the default component typographies but still want the hierarchy styles,
+//  you can delete this line and instead use:
+//    `@include mat.legacy-typography-hierarchy($custom-typography);`
+@include mat.all-legacy-component-typographies($custom-typography);
+@include mat.legacy-core();
 }

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

@@ -115,28 +115,46 @@ $custom-theme: (
   background: $app-green-theme-background
 );
 
-$custom-typography: mat.define-typography-config(
+$custom-typography: mat.define-legacy-typography-config(
   $font-family: "Lato, regular",
   $headline: mat.define-typography-level(32px, 48px, 700),
   $body-1: mat.define-typography-level(16px, 24px, 500)
 );
 
 .green-theme {
-  @include mat.core();
+  // TODO(v15): As of v15 mat.legacy-core no longer includes default typography styles.
+//  The following line adds:
+//    1. Default typography styles for all components
+//    2. Styles for typography hierarchy classes (e.g. .mat-headline-1)
+//  If you specify typography styles for the components you use elsewhere, you should delete this line.
+//  If you don't need the default component typographies but still want the hierarchy styles,
+//  you can delete this line and instead use:
+//    `@include mat.legacy-typography-hierarchy(mat.define-legacy-typography-config());`
+@include mat.all-legacy-component-typographies();
+@include mat.legacy-core();
 
-  @include mat.all-component-themes($custom-theme);
+  @include mat.all-legacy-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.typography-hierarchy($custom-typography);
+  @include mat.legacy-typography-hierarchy($custom-typography);
 
   // Override typography for a specific Angular Material components.
-  @include mat.checkbox-typography($custom-typography);
+  @include mat.legacy-checkbox-typography($custom-typography);
 
   // Override typography for all Angular Material, including mat-base-typography and all components.
-  @include mat.all-component-typographies($custom-typography);
+  @include mat.all-legacy-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);
+  // TODO(v15): As of v15 mat.legacy-core no longer includes default typography styles.
+//  The following line adds:
+//    1. Default typography styles for all components
+//    2. Styles for typography hierarchy classes (e.g. .mat-headline-1)
+//  If you specify typography styles for the components you use elsewhere, you should delete this line.
+//  If you don't need the default component typographies but still want the hierarchy styles,
+//  you can delete this line and instead use:
+//    `@include mat.legacy-typography-hierarchy($custom-typography);`
+@include mat.all-legacy-component-typographies($custom-typography);
+@include mat.legacy-core();
 }

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

@@ -21,7 +21,16 @@
 @import "./blue-theme.scss";
 // @import "./green-theme.scss";
 
-@include mat.core();
+// TODO(v15): As of v15 mat.legacy-core no longer includes default typography styles.
+//  The following line adds:
+//    1. Default typography styles for all components
+//    2. Styles for typography hierarchy classes (e.g. .mat-headline-1)
+//  If you specify typography styles for the components you use elsewhere, you should delete this line.
+//  If you don't need the default component typographies but still want the hierarchy styles,
+//  you can delete this line and instead use:
+//    `@include mat.legacy-typography-hierarchy(mat.define-legacy-typography-config());`
+@include mat.all-legacy-component-typographies();
+@include mat.legacy-core();
 
 // // Define a blue theme.
 $custom-theme-primary: mat.define-palette($app-blue-theme-primary-palette, 900);
@@ -34,7 +43,7 @@ $custom-theme-accent: mat.define-palette($app-blue-theme-accent-palette);
 // $custom-theme-accent: mat-palette($mat-pink, A200, A100, A400);
 $custom-theme-warn: mat.define-palette(mat.$red-palette);
 $custom-theme: mat.define-light-theme($custom-theme-primary, $custom-theme-accent, $custom-theme-warn);
-@include mat.all-component-themes($custom-theme);
+@include mat.all-legacy-component-themes($custom-theme);
 
 @import "core/variables";
 @import "core/mixins";

dmp-frontend/src/common/forms/form-validation-errors-dialog/form-validation-errors-dialog.component.ts

@@ -1,6 +1,6 @@
 import { Component, Inject } from '@angular/core';
 import { AbstractControl, UntypedFormArray, UntypedFormControl, UntypedFormGroup } from '@angular/forms';
-import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { MatLegacyDialogRef as MatDialogRef, MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA } from '@angular/material/legacy-dialog';
 import { TranslateService } from '@ngx-translate/core';
 
 @Component({