Oliinyk / MDC MatLegacyDialog migration (#2637)

* Migrated MatDialog to MDC, fixed styles

* Fixed tests

src/app/shared/components/confirmation-modal-window/confirmation-modal-window.component.scss

@@ -1,28 +1,31 @@
 @import 'src/app/shared/styles/buttons.scss';
 
-:host ::ng-deep .mat-dialog-container {
-  min-width: 411px;
-  min-height: 178px;
-  background: #ffffff;
-  box-shadow: 0px 6px 16px rgba(0, 0, 0, 0.08);
-  border-radius: 5px;
-}
-:host ::ng-deep .mat-dialog-actions {
-  padding-bottom: 2rem;
-}
-:host ::ng-deep.mat-dialog-actions .mat-button-base + .mat-button-base {
-  margin-left: 1rem !important;
-}
-:host ::ng-deep .mat-dialog-title {
-  text-align: center;
-  margin-bottom: 0;
-  font-family: Innerspace;
-  font-style: normal;
-  font-weight: bold;
-  font-size: 18px;
-  line-height: 20px;
-  color: #444444;
+:host ::ng-deep .mat-mdc-dialog {
+  &-actions {
+    padding-bottom: 8px;
+
+    .mat-button-base + .mat-button-base {
+      margin-left: 1rem !important;
+    }
+  }
+
+  &-title {
+    text-align: center;
+    margin-bottom: 0;
+    padding-bottom: 0;
+    font-family: Innerspace;
+    font-style: normal;
+    font-weight: bold;
+    font-size: 18px;
+    line-height: 20px;
+    color: #444444;
+
+    &::before {
+      height: 32px;
+    }
+  }
 }
+
 .confirmation {
   text-align: center;
   font-family: Open Sans;
@@ -38,12 +41,3 @@
 .btn {
   margin-top: 1rem;
 }
-@media (max-width: 750px) {
-  :host ::ng-deep .mat-dialog-container {
-    min-width: fit-content;
-    min-height: 178px;
-    background: #ffffff;
-    box-shadow: 0px 6px 16px rgba(0, 0, 0, 0.08);
-    border-radius: 5px;
-  }
-}

src/app/shared/components/confirmation-modal-window/confirmation-modal-window.component.spec.ts

@@ -1,12 +1,8 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
+import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
 import { MatIconModule } from '@angular/material/icon';
-import {
-  MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA,
-  MatLegacyDialogModule as MatDialogModule,
-  MatLegacyDialogRef as MatDialogRef
-} from '@angular/material/legacy-dialog';
 import { TranslateModule } from '@ngx-translate/core';
 
 import { ModalConfirmationTypeWithQuotes } from 'shared/enum/modal-confirmation';

src/app/shared/components/confirmation-modal-window/confirmation-modal-window.component.ts

@@ -1,6 +1,6 @@
 import { Component, Inject, OnInit } from '@angular/core';
 import { FormControl } from '@angular/forms';
-import { MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA } from '@angular/material/legacy-dialog';
+import { MAT_DIALOG_DATA } from '@angular/material/dialog';
 
 import {
   ModalConfirmationText,

src/app/shared/components/confirmation-modal-window/reason-modal-window/reason-modal-window.component.spec.ts

@@ -1,11 +1,7 @@
 import { Component, Input } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { FormBuilder, FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import {
-  MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA,
-  MatLegacyDialogModule as MatDialogModule,
-  MatLegacyDialogRef as MatDialogRef
-} from '@angular/material/legacy-dialog';
+import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
 import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
 import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

src/app/shared/components/confirmation-modal-window/reason-modal-window/reason-modal-window.component.ts

@@ -1,6 +1,6 @@
 import { Component, Inject, OnInit } from '@angular/core';
 import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
-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 { MUST_CONTAIN_LETTERS } from 'shared/constants/regex-constants';
 import { ValidationConstants } from 'shared/constants/validation';

src/app/shared/components/filters-list/working-hours/working-hours.component.scss

@@ -68,7 +68,7 @@
     opacity: 0.8;
   }
 }
-::ng-deep.mat-dialog-container {
+::ng-deep .mat-mdc-dialog-container {
   [mat-dialog-actions] {
     display: flex;
     justify-content: center !important;

src/app/shared/components/image-cropper-modal/image-cropper-modal.component.scss

@@ -11,6 +11,3 @@ small.warning {
 .image-cropper-wrapper {
   min-height: 50vh;
 }
-.btn-wrapper {
-  padding-bottom: 2rem;
-}

src/app/shared/components/image-cropper-modal/image-cropper-modal.component.spec.ts

@@ -1,11 +1,7 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import {
-  MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA,
-  MatLegacyDialogModule as MatDialogModule,
-  MatLegacyDialogRef as MatDialogRef
-} from '@angular/material/legacy-dialog';
+import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
 import { ImageCropperModule } from 'ngx-image-cropper';
+
 import { Cropper } from '../../models/cropper';
 import { ImageCropperModalComponent } from './image-cropper-modal.component';
 

src/app/shared/components/image-cropper-modal/image-cropper-modal.component.ts

@@ -1,5 +1,5 @@
 import { Component, Inject } 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 { ImageCroppedEvent, LoadedImage, base64ToFile } from 'ngx-image-cropper';
 
 import { Cropper } from 'shared/models/cropper';

src/app/shared/components/image-form-control/image-form-control.component.spec.ts

@@ -1,11 +1,8 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
 import { MatGridListModule } from '@angular/material/grid-list';
 import { MatIconModule } from '@angular/material/icon';
-import {
-  MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA,
-  MatLegacyDialogModule as MatDialogModule,
-  MatLegacyDialogRef as MatDialogRef
-} from '@angular/material/legacy-dialog';
+
 import { ImageFormControlComponent } from './image-form-control.component';
 
 describe('ImageFormControlComponent', () => {

src/app/shared/components/image-form-control/image-form-control.component.ts

@@ -1,6 +1,6 @@
 import { Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
 import { AbstractControl, FormGroup, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
+import { MatDialog } from '@angular/material/dialog';
 
 import { Constants } from 'shared/constants/constants';
 import { Cropper } from 'shared/models/cropper';

src/app/shared/components/unregistered-user-warning-modal/unregistered-user-warning-modal.component.scss

@@ -14,6 +14,8 @@
   text-align: center;
 }
 .unregistered-user-modal__message {
+  color: #333333;
+  padding: 20px 0;
   font-size: 18px;
   font-weight: 600;
   line-height: 1.5;
@@ -24,7 +26,6 @@
   background-color: #3849f9;
   border: 1px solid #3849f9;
   border-radius: 20px;
-  margin-bottom: 20px;
   display: block;
 
   &.white {

src/app/shared/components/unregistered-user-warning-modal/unregistered-user-warning-modal.component.spec.ts

@@ -1,5 +1,5 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA } from '@angular/material/legacy-dialog';
+import { MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { TranslateModule } from '@ngx-translate/core';
 import { NgxsModule, Store } from '@ngxs/store';
 

src/app/shared/components/unregistered-user-warning-modal/unregistered-user-warning-modal.component.ts

@@ -1,5 +1,5 @@
 import { Component, Inject } from '@angular/core';
-import { MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA } from '@angular/material/legacy-dialog';
+import { MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { Router } from '@angular/router';
 import { Store } from '@ngxs/store';
 import { ModeConstants } from 'shared/constants/constants';

src/app/shared/components/workshop-card/workshop-card.component.spec.ts

@@ -2,12 +2,13 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { FlexLayoutModule } from '@angular/flex-layout';
 import { MatCardModule } from '@angular/material/card';
 import { MatChipsModule } from '@angular/material/chips';
+import { MatDialogModule } from '@angular/material/dialog';
 import { MatIconModule } from '@angular/material/icon';
-import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { RouterTestingModule } from '@angular/router/testing';
 import { TranslateModule } from '@ngx-translate/core';
 import { NgxsModule } from '@ngxs/store';
+
 import { Address } from '../../models/address.model';
 import { Teacher } from '../../models/teacher.model';
 import { WorkshopCard } from '../../models/workshop.model';

src/app/shared/components/workshop-card/workshop-card.component.ts

@@ -1,5 +1,5 @@
 import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
-import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
+import { MatDialog } from '@angular/material/dialog';
 import { Select, Store } from '@ngxs/store';
 import { Observable, Subject } from 'rxjs';
 import { filter, takeUntil } from 'rxjs/operators';

src/app/shared/components/workshop-card/workshop-seats-lack-modal/workshop-seats-lack-modal.component.scss

@@ -1,28 +1,22 @@
 @import 'src/app/shared/styles/buttons.scss';
 
-:host ::ng-deep .mat-dialog-container {
-  min-width: 411px;
-  min-height: 178px;
-  background: #ffffff;
-  box-shadow: 0px 6px 16px rgba(0, 0, 0, 0.08);
-  border-radius: 5px;
-}
-:host ::ng-deep .mat-dialog-actions {
-  padding-bottom: 2rem;
-}
-:host ::ng-deep.mat-dialog-actions .mat-button-base + .mat-button-base {
-  margin-left: 1rem !important;
-}
-:host ::ng-deep .mat-dialog-title {
-  text-align: center;
-  margin-bottom: 0;
-  font-family: Innerspace;
-  font-style: normal;
-  font-weight: bold;
-  font-size: 18px;
-  line-height: 20px;
-  color: #444444;
+:host ::ng-deep .mat-mdc-dialog {
+  &-actions .mat-button-base + .mat-button-base {
+    margin-left: 1rem !important;
+  }
+
+  &-title {
+    text-align: center;
+    margin-bottom: 0;
+    font-family: Innerspace;
+    font-style: normal;
+    font-weight: bold;
+    font-size: 18px;
+    line-height: 20px;
+    color: #444444;
+  }
 }
+
 .confirmation {
   text-align: center;
   font-family: Open Sans;
@@ -38,12 +32,3 @@
 .btn {
   margin-top: 1rem;
 }
-@media (max-width: 750px) {
-  :host ::ng-deep .mat-dialog-container {
-    min-width: fit-content;
-    min-height: 178px;
-    background: #ffffff;
-    box-shadow: 0px 6px 16px rgba(0, 0, 0, 0.08);
-    border-radius: 5px;
-  }
-}

src/app/shared/components/workshop-card/workshop-seats-lack-modal/workshop-seats-lack-modal.component.spec.ts

@@ -1,12 +1,8 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
+import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
 import { MatIconModule } from '@angular/material/icon';
-import {
-  MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA,
-  MatLegacyDialogModule as MatDialogModule,
-  MatLegacyDialogRef as MatDialogRef
-} from '@angular/material/legacy-dialog';
 import { RouterTestingModule } from '@angular/router/testing';
 import { TranslateModule } from '@ngx-translate/core';
 

src/app/shared/components/workshop-card/workshop-seats-lack-modal/workshop-seats-lack-modal.component.ts

@@ -1,5 +1,5 @@
 import { Component, Inject, OnInit } from '@angular/core';
-import { MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA } from '@angular/material/legacy-dialog';
+import { MAT_DIALOG_DATA } from '@angular/material/dialog';
 
 @Component({
   selector: 'app-workshop-seats-lack-modal',

src/app/shared/modules/material.module.ts

@@ -12,7 +12,7 @@ import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/lega
 import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card';
 import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
 import { MatLegacyChipsModule as MatChipsModule } from '@angular/material/legacy-chips';
-import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
+import { MatDialogModule } from '@angular/material/dialog';
 import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
 import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
 import { MatLegacyMenuModule as MatMenuModule } from '@angular/material/legacy-menu';

src/app/shell/admin-tools/data/admin-applications/admin-applications.component.spec.ts

@@ -1,6 +1,6 @@
 import { Component, Injectable, Input } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
+import { MatDialogModule } from '@angular/material/dialog';
 import { NgxsModule, State, Store } from '@ngxs/store';
 
 import { ChildDeclination, WorkshopDeclination } from 'shared/enum/enumUA/declinations/declination';

src/app/shell/admin-tools/data/admin-applications/admin-applications.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
+import { MatDialog } from '@angular/material/dialog';
 import { Store } from '@ngxs/store';
 
 import { PaginationConstants } from 'shared/constants/constants';

src/app/shell/admin-tools/data/admins/admins.component.spec.ts

@@ -1,14 +1,10 @@
 import { Component, Injectable, Input } from '@angular/core';
 import { ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
 import { ReactiveFormsModule } from '@angular/forms';
+import { MatDialog, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
-import {
-  MatLegacyDialog as MatDialog,
-  MatLegacyDialogModule as MatDialogModule,
-  MatLegacyDialogRef as MatDialogRef
-} from '@angular/material/legacy-dialog';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatTabChangeEvent, MatTabsModule } from '@angular/material/tabs';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

src/app/shell/admin-tools/data/admins/admins.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import { FormControl } from '@angular/forms';
-import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
+import { MatDialog } from '@angular/material/dialog';
 import { MatLegacyTabChangeEvent as MatTabChangeEvent } from '@angular/material/legacy-tabs';
 import { ActivatedRoute, Router } from '@angular/router';
 import { Select, Store } from '@ngxs/store';

src/app/shell/admin-tools/data/admins/create-admin/create-admin.component.spec.ts

@@ -2,8 +2,8 @@ import { CommonModule } from '@angular/common';
 import { Component, Injectable, Input } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatDialogModule } from '@angular/material/dialog';
 import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
-import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
 import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
 import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
 import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';

src/app/shell/admin-tools/data/admins/create-admin/create-admin.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import { FormBuilder, FormControl, FormGroup, ValidatorFn, Validators } from '@angular/forms';
-import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
+import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute, Router } from '@angular/router';
 import { Select, Store } from '@ngxs/store';
 import { Observable, map, switchMap } from 'rxjs';

src/app/shell/admin-tools/data/directions-wrapper/directions-institution-hierarchies-edit-form/directions-institution-hierarchies-edit-form.component.ts

@@ -1,6 +1,6 @@
 import { Component, Inject, AfterViewInit, ViewChild, ElementRef } from '@angular/core';
 import { FormControl, FormGroup } from '@angular/forms';
-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 { MatLegacyOption as MatOption } from '@angular/material/legacy-core';
 import { MatLegacySelect as MatSelect } from '@angular/material/legacy-select';
 import { Router } from '@angular/router';

src/app/shell/admin-tools/data/directions-wrapper/directions-institution-hierarchies-list/directions-institution-hierarchies-list.component.spec.ts

@@ -1,5 +1,5 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
+import { MatDialogModule } from '@angular/material/dialog';
 import { MatTableModule } from '@angular/material/table';
 import { NgxsModule } from '@ngxs/store';
 

src/app/shell/admin-tools/data/directions-wrapper/directions-institution-hierarchies-list/directions-institution-hierarchies-list.component.ts

@@ -1,5 +1,5 @@
 import { Component, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
-import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
+import { MatDialog } from '@angular/material/dialog';
 import { MatSort } from '@angular/material/sort';
 import { MatLegacyTableDataSource as MatTableDataSource } from '@angular/material/legacy-table';
 import { Router } from '@angular/router';

src/app/shell/admin-tools/data/directions-wrapper/directions-wrapper.component.spec.ts

@@ -1,8 +1,8 @@
 import { Component, Input } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatDialogModule } from '@angular/material/dialog';
 import { MatIconModule } from '@angular/material/icon';
-import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
 import { MatTabsModule } from '@angular/material/tabs';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { RouterTestingModule } from '@angular/router/testing';