diff --git a/src/app/core/services/modal.service.ts b/src/app/core/services/modal.service.ts index b03c730d..215b0af2 100644 --- a/src/app/core/services/modal.service.ts +++ b/src/app/core/services/modal.service.ts @@ -1,9 +1,6 @@ import { ComponentType } from '@angular/cdk/portal'; import { Injectable, TemplateRef } from '@angular/core'; -import { - MatLegacyDialog as MatDialog, - MatLegacyDialogConfig as MatDialogConfig, -} from '@angular/material/legacy-dialog'; +import { MatDialog, MatDialogConfig } from '@angular/material/dialog'; @Injectable({ providedIn: 'root', diff --git a/src/app/core/services/toast.service.ts b/src/app/core/services/toast.service.ts index 103b11f3..c0680d49 100644 --- a/src/app/core/services/toast.service.ts +++ b/src/app/core/services/toast.service.ts @@ -1,8 +1,5 @@ import { Injectable } from '@angular/core'; -import { - MatLegacySnackBar as MatSnackBar, - MatLegacySnackBarConfig as MatSnackBarConfig, -} from '@angular/material/legacy-snack-bar'; +import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar'; @Injectable({ providedIn: 'root', diff --git a/src/app/features/administration/form/date/list/day/day-list.component.ts b/src/app/features/administration/form/date/list/day/day-list.component.ts index 54f19966..e1f0cd2a 100644 --- a/src/app/features/administration/form/date/list/day/day-list.component.ts +++ b/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'; diff --git a/src/app/features/consultation/poll-results-compact/poll-results-compact.component.ts b/src/app/features/consultation/poll-results-compact/poll-results-compact.component.ts index 4a32f9a4..366d421d 100644 --- a/src/app/features/consultation/poll-results-compact/poll-results-compact.component.ts +++ b/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'; diff --git a/src/app/shared/components/choice-details/choice-details.component.ts b/src/app/shared/components/choice-details/choice-details.component.ts index 1e934358..86692bd2 100644 --- a/src/app/shared/components/choice-details/choice-details.component.ts +++ b/src/app/shared/components/choice-details/choice-details.component.ts @@ -1,8 +1,5 @@ import { Component, Inject, OnInit } 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 { Answer } from '../../../core/enums/answer.enum'; import { Choice } from '../../../core/models/choice.model'; diff --git a/src/app/shared/components/settings/settings.component.ts b/src/app/shared/components/settings/settings.component.ts index 1511fbbd..e52272dd 100644 --- a/src/app/shared/components/settings/settings.component.ts +++ b/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'; diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts index e0feb301..d2556e48 100644 --- a/src/app/shared/shared.module.ts +++ b/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 { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field'; -import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input'; -import { MatLegacyProgressSpinnerModule as MatProgressSpinnerModule } from '@angular/material/legacy-progress-spinner'; +import { MatDialogModule } from '@angular/material/dialog'; +import { MatFormFieldModule } from '@angular/material/form-field'; +import { MatInputModule } from '@angular/material/input'; +import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'; import { MatSidenavModule } from '@angular/material/sidenav'; -import { MatLegacySlideToggleModule as MatSlideToggleModule } from '@angular/material/legacy-slide-toggle'; -import { MatLegacySnackBarModule as MatSnackBarModule } from '@angular/material/legacy-snack-bar'; +import { MatSlideToggleModule } from '@angular/material/slide-toggle'; +import { MatSnackBarModule } from '@angular/material/snack-bar'; import { MatStepperModule } from '@angular/material/stepper'; import { TranslateModule } from '@ngx-translate/core'; import { NgChartsModule } from 'ng2-charts'; diff --git a/src/styles.scss b/src/styles.scss index 7aef9c4d..aa5cb630 100644 --- a/src/styles.scss +++ b/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); } /* diff --git a/src/styles/partials/_forms.scss b/src/styles/partials/_forms.scss index 6cdc94f0..a662eb98 100644 --- a/src/styles/partials/_forms.scss +++ b/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; } diff --git a/src/theme-contrast.scss b/src/theme-contrast.scss index d3fdde9d..fe40ed27 100644 --- a/src/theme-contrast.scss +++ b/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); diff --git a/src/theme-dark.scss b/src/theme-dark.scss index 958bd587..402feb5a 100644 --- a/src/theme-dark.scss +++ b/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); diff --git a/src/theme-light.scss b/src/theme-light.scss index b6987c25..3ab7cfd0 100644 --- a/src/theme-light.scss +++ b/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);