RED-5875: Upgrade to new Angular Material components (dialog)

src/assets/styles/common-dialogs.scss

@@ -1,7 +1,8 @@
 @use 'common-mixins';
 
-.mat-dialog-container {
+.mat-mdc-dialog-container .mdc-dialog__surface {
     display: flex !important;
+    flex-direction: row;
     color: var(--iqser-text);
     background-color: var(--iqser-background);
     padding: 0 !important;

src/lib/common-ui.module.ts

@@ -16,7 +16,6 @@ import { IqserScrollbarModule } from './scrollbar';
 import { IqserEmptyStatesModule } from './empty-states';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
 import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
 import { MatLegacyProgressBarModule as MatProgressBarModule } from '@angular/material/legacy-progress-bar';
 import { ConfirmationDialogComponent } from './dialog';
@@ -24,6 +23,7 @@ import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/le
 import { ApiPathInterceptor, DefaultUserPreferenceService, IqserConfigService, IqserUserPreferenceService } from './services';
 import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
 import { IqserSkeletonModule } from './skeleton/skeleton.module';
+import { MatDialogModule } from '@angular/material/dialog';
 
 const matModules = [
     MatIconModule,

src/lib/dialog/base-dialog.component.ts

@@ -1,5 +1,5 @@
 import { Directive, HostListener, inject, OnDestroy } from '@angular/core';
-import { MatLegacyDialog as MatDialog, MatLegacyDialogRef as MatDialogRef } from '@angular/material/legacy-dialog';
+import { MatDialog, MatDialogRef } from '@angular/material/dialog';
 import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { hasFormChanged, IqserEventTarget } from '../utils';
 import { ConfirmOptions } from '.';

src/lib/dialog/confirmation-dialog.service.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { MatLegacyDialog as MatDialog, MatLegacyDialogRef as MatDialogRef } from '@angular/material/legacy-dialog';
+import { MatDialog, MatDialogRef } from '@angular/material/dialog';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { DialogConfig, DialogService } from '../services';
 import { ConfirmationDialogComponent, ConfirmationDialogInput, TitleColors } from '.';

src/lib/dialog/confirmation-dialog/confirmation-dialog.component.ts

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, HostListener, Inject, TemplateRef } from '@angular/core';
-import { MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA, MatLegacyDialogRef as MatDialogRef } from '@angular/material/legacy-dialog';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { TranslateService } from '@ngx-translate/core';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { IconButtonTypes } from '../../buttons';

src/lib/help-mode/help-mode.module.ts

@@ -1,7 +1,6 @@
 import { ModuleWithProviders, NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { TranslateModule } from '@ngx-translate/core';
-import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
 import { HelpModeDialogComponent } from './help-mode-dialog/help-mode-dialog.component';
 import { HelpModeComponent } from './help-mode/help-mode.component';
 import { HelpModeDirective } from './help-mode.directive';
@@ -11,6 +10,7 @@ import { HelpButtonComponent } from './help-button/help-button.component';
 import { HelpModeService } from './help-mode.service';
 import { HelpDocs } from './help-docs';
 import { HELP_DOCS } from './tokens';
+import { MatDialogModule } from '@angular/material/dialog';
 
 const matModules = [MatDialogModule];
 const components = [HelpModeComponent, HelpModeDialogComponent, HelpModeDirective, HelpButtonComponent];

src/lib/help-mode/help-mode.service.ts

@@ -1,5 +1,5 @@
 import { Inject, Injectable, Renderer2, RendererFactory2 } from '@angular/core';
-import { MatLegacyDialog as MatDialog, MatLegacyDialogRef as MatDialogRef } from '@angular/material/legacy-dialog';
+import { MatDialog, MatDialogRef } from '@angular/material/dialog';
 import { TranslateService } from '@ngx-translate/core';
 import { BehaviorSubject, firstValueFrom } from 'rxjs';
 import { HelpModeDialogComponent } from './help-mode-dialog/help-mode-dialog.component';
@@ -121,7 +121,13 @@ export class HelpModeService {
         overlappingElements: OverlappingElement[],
         dialogElement: boolean,
     ): void {
-        this._helperElements[helperElementName] = { element, helperElement, scrollableParentView, overlappingElements, dialogElement };
+        this._helperElements[helperElementName] = {
+            element,
+            helperElement,
+            scrollableParentView,
+            overlappingElements,
+            dialogElement,
+        };
     }
 
     updateHelperElements() {

src/lib/help-mode/help-mode/help-mode.component.ts

@@ -1,7 +1,7 @@
 import { ChangeDetectionStrategy, Component, HostListener } from '@angular/core';
 import { HelpModeService } from '../help-mode.service';
 import { IqserEventTarget } from '../../utils';
-import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
+import { MatDialog } from '@angular/material/dialog';
 
 @Component({
     selector: 'iqser-help-mode',

src/lib/services/dialog.service.ts

@@ -1,9 +1,5 @@
 import { Injectable } from '@angular/core';
-import {
-    MatLegacyDialog as MatDialog,
-    MatLegacyDialogConfig as MatDialogConfig,
-    MatLegacyDialogRef as MatDialogRef,
-} from '@angular/material/legacy-dialog';
+import { MatDialog, MatDialogConfig, MatDialogRef } from '@angular/material/dialog';
 import { ComponentType } from '@angular/cdk/portal';
 import { mergeMap } from 'rxjs/operators';
 import { from } from 'rxjs';