angular upgrade: migrate ng material component

src/app/core/services/modal.service.ts

@@ -1,9 +1,6 @@
 import { ComponentType } from '@angular/cdk/portal';
 import { Injectable, TemplateRef } from '@angular/core';
-import {
+import { MatDialog, MatDialogConfig } from '@angular/material/dialog';
-	MatLegacyDialog as MatDialog,
-	MatLegacyDialogConfig as MatDialogConfig,
-} from '@angular/material/legacy-dialog';
 
 @Injectable({
 	providedIn: 'root',

src/app/core/services/toast.service.ts

@@ -1,8 +1,5 @@
 import { Injectable } from '@angular/core';
-import {
+import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar';
-	MatLegacySnackBar as MatSnackBar,
-	MatLegacySnackBarConfig as MatSnackBarConfig,
-} from '@angular/material/legacy-snack-bar';
 
 @Injectable({
 	providedIn: 'root',

src/app/features/administration/form/date/list/day/day-list.component.ts

@@ -4,7 +4,7 @@ import { DOCUMENT } from '@angular/common';
 import { UntypedFormGroup } from '@angular/forms';
 import { ToastService } from '../../../../../../core/services/toast.service';
 import { StorageService } from '../../../../../../core/services/storage.service';
-import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
+import { MatDialog } from '@angular/material/dialog';
 import { DateChoice } from '../../../../../../core/models/dateChoice.model';
 import { PollService } from '../../../../../../core/services/poll.service';
 import { DateUtilitiesService } from '../../../../../../core/services/date.utilities.service';

src/app/features/consultation/poll-results-compact/poll-results-compact.component.ts

@@ -1,5 +1,5 @@
 import { Component, Input, OnInit } from '@angular/core';
-import { MatLegacyDialogConfig as MatDialogConfig } from '@angular/material/legacy-dialog';
+import { MatDialogConfig } from '@angular/material/dialog';
 
 import { Answer } from '../../../core/enums/answer.enum';
 import { Choice } from '../../../core/models/choice.model';

src/app/shared/components/choice-details/choice-details.component.ts

@@ -1,8 +1,5 @@
 import { Component, Inject, OnInit } from '@angular/core';
-import {
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
-	MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA,
-	MatLegacyDialogRef as MatDialogRef,
-} from '@angular/material/legacy-dialog';
 
 import { Answer } from '../../../core/enums/answer.enum';
 import { Choice } from '../../../core/models/choice.model';

src/app/shared/components/settings/settings.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { MatLegacyDialogRef as MatDialogRef } from '@angular/material/legacy-dialog';
+import { MatDialogRef } from '@angular/material/dialog';
 import { Subscription } from 'rxjs';
 
 import { Owner } from '../../../core/models/owner.model';

src/app/shared/shared.module.ts

@@ -2,15 +2,15 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
+import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatDatepickerModule } from '@angular/material/datepicker';
-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 { MatFormFieldModule } from '@angular/material/form-field';
-import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
+import { MatInputModule } from '@angular/material/input';
-import { MatLegacyProgressSpinnerModule as MatProgressSpinnerModule } from '@angular/material/legacy-progress-spinner';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatSidenavModule } from '@angular/material/sidenav';
-import { MatLegacySlideToggleModule as MatSlideToggleModule } from '@angular/material/legacy-slide-toggle';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
-import { MatLegacySnackBarModule as MatSnackBarModule } from '@angular/material/legacy-snack-bar';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { MatStepperModule } from '@angular/material/stepper';
 import { TranslateModule } from '@ngx-translate/core';
 import { NgChartsModule } from 'ng2-charts';

src/styles.scss

@@ -13,9 +13,13 @@
 //  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.legacy-typography-hierarchy(mat.define-typography-config());`
+/* TODO(mdc-migration): Remove all-legacy-component-typographies once all legacy components are migrated*/
 @include mat.all-legacy-component-typographies();
+@include mat.all-component-typographies();
+/* TODO(mdc-migration): Remove legacy-core once all legacy components are migrated*/
 @include mat.legacy-core();
+@include mat.core();
 
 // import your custom themes
 @import 'theme-light.scss';
@@ -23,13 +27,19 @@
 @import 'theme-contrast.scss';
 
 .theme-light {
+	/* TODO(mdc-migration): Remove all-legacy-component-themes once all legacy components are migrated*/
 	@include mat.all-legacy-component-themes($theme-light);
+	@include mat.all-component-themes($theme-light);
 }
 .theme-dark {
+	/* TODO(mdc-migration): Remove all-legacy-component-themes once all legacy components are migrated*/
 	@include mat.all-legacy-component-themes($theme-dark);
+	@include mat.all-component-themes($theme-dark);
 }
 .theme-contrast {
+	/* TODO(mdc-migration): Remove all-legacy-component-themes once all legacy components are migrated*/
 	@include mat.all-legacy-component-themes($theme-contrast);
+	@include mat.all-component-themes($theme-contrast);
 }
 
 /*

src/styles/partials/_forms.scss

@@ -70,6 +70,7 @@ textarea {
 }
 
 // radio input structure
+/* TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version.*/
 .mat-checkbox-label,
 .mat-checkbox-layout .mat-checkbox-label {
 	max-width: 90vw;
@@ -190,12 +191,13 @@ textarea {
 	-moz-border-radius-bottomright: 1em;
 }
 
-.mat-error {
+.mat-mdc-form-field-error {
 	display: block;
 	background: $warning;
 	padding: 1em;
 }
 
+/* TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version.*/
 mat-checkbox {
 	display: block;
 }

src/theme-contrast.scss

@@ -14,4 +14,6 @@ $theme-contrast: mat.define-light-theme($theme-contrast-primary, $theme-contrast
 // Include theme styles for core and each component used in your app.
 // Alternatively, you can import and @include the theme mixins for each component
 // that you are using.
+/* TODO(mdc-migration): Remove all-legacy-component-themes once all legacy components are migrated*/
 @include mat.all-legacy-component-themes($theme-contrast);
+@include mat.all-component-themes($theme-contrast);

src/theme-dark.scss

@@ -14,4 +14,6 @@ $theme-dark: mat.define-dark-theme($theme-dark-primary, $theme-dark-accent, $the
 // Include theme styles for core and each component used in your app.
 // Alternatively, you can import and @include the theme mixins for each component
 // that you are using.
+/* TODO(mdc-migration): Remove all-legacy-component-themes once all legacy components are migrated*/
 @include mat.all-legacy-component-themes($theme-dark);
+@include mat.all-component-themes($theme-dark);

src/theme-light.scss

@@ -14,4 +14,6 @@ $theme-light: mat.define-light-theme($theme-light-primary, $theme-light-accent,
 // Include theme styles for core and each component used in your app.
 // Alternatively, you can import and @include the theme mixins for each component
 // that you are using.
+/* TODO(mdc-migration): Remove all-legacy-component-themes once all legacy components are migrated*/
 @include mat.all-legacy-component-themes($theme-light);
+@include mat.all-component-themes($theme-light);