migration for material'

lib/core/breadcrumbs/src/_stories/breadcrumb.stories.ts

@@ -16,8 +16,8 @@
  */
 
 import { Meta, moduleMetadata, Story } from '@storybook/angular';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-import { MatLegacyMenuModule as MatMenuModule } from '@angular/material/legacy-menu';
+import { MatButtonModule } from '@angular/material/button';
+import { MatMenuModule } from '@angular/material/menu';
 import { MatIconModule } from '@angular/material/icon';
 import { BreadcrumbComponent } from '../components/breadcrumb/breadcrumb.component';
 import { BreadcrumbItemComponent } from '../components/breadcrumb-item/breadcrumb-item.component';

lib/core/breadcrumbs/src/components/breadcrumb/breadcrumb.component.ts

@@ -17,9 +17,9 @@
 
 import { AfterContentInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChildren, EventEmitter, Input, OnChanges, Output, QueryList, SimpleChanges, TemplateRef, ViewChildren } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
+import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
-import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
 import { map, startWith } from 'rxjs/operators';
 import { TranslateModule } from '@ngx-translate/core';
 

lib/core/custom-theme/theme/typography.scss

@@ -3,41 +3,41 @@
 @import '../variables/font-family';
 
 @function get-mat-typography($base-font-size, $font-family) {
-    $custom-typography: mat.define-legacy-typography-configmat.define-legacy-typography-config(
+    $custom-typography: mat.define-legacy-typography-configmat.define-typography-config(
         $font-family: $default-font-family,
-        $display-4: mat.define-typography-level(112px, 112px, 300),
-        $display-3: mat.define-typography-level(56px, 56px, 400),
-        $display-2: mat.define-typography-level(45px, 48px, 400),
-        $display-1: mat.define-typography-level(34px, 40px, 400),
-        $headline: mat.define-typography-level(24px, 32px, 400),
-        $title: mat.define-typography-level(20px, 32px, 500),
-        $subheading-2: mat.define-typography-level(16px, 28px, 400),
-        $subheading-1: mat.define-typography-level(15px, 24px, 400),
-        $body-2: mat.define-typography-level(14px, 24px, 500),
-        $body-1: mat.define-typography-level(14px, 20px, 400),
+        $headline-1: mat.define-typography-level(112px, 112px, 300),
+        $headline-2: mat.define-typography-level(56px, 56px, 400),
+        $headline-3: mat.define-typography-level(45px, 48px, 400),
+        $headline-4: mat.define-typography-level(34px, 40px, 400),
+        $headline-5: mat.define-typography-level(24px, 32px, 400),
+        $headline-6: mat.define-typography-level(20px, 32px, 500),
+        $subtitle-1: mat.define-typography-level(16px, 28px, 400),
+        $body-1: mat.define-typography-level(15px, 24px, 400),
+        $subtitle-2: mat.define-typography-level(14px, 24px, 500),
+        $body-2: mat.define-typography-level(14px, 20px, 400),
         $caption: mat.define-typography-level(12px, 20px, 400),
         $button: mat.define-typography-level(14px, 14px, 500),
         // Line-height must be unit-less fraction of the font-size.
-        $input: mat.define-typography-level(16px, 1.25, 400),
-    );
+        $in/* TODO(mdc-migration): No longer supported. Use `body-1` instead. put: mat.define-typography-level(16px, 1.25, 400),
+    */ );
 
     @if $base-font-size {
-        $custom-typography: mat.define-legacy-typography-configmat.define-legacy-typography-config(
-            $display-4: mat.define-typography-level(8rem, 8rem, 300),
-            $display-3: mat.define-typography-level(4rem, 4rem, 400),
-            $display-2: mat.define-typography-level(3.21rem, 3.21rem, 400),
-            $display-1: mat.define-typography-level(2.42rem, 2.85rem, 400),
-            $headline: mat.define-typography-level(1.71rem, 2.28rem, 400),
-            $title: mat.define-typography-level(1.42rem, 2.28rem, 500),
-            $subheading-2: mat.define-typography-level(1.14rem, 2rem, 400),
-            $subheading-1: mat.define-typography-level(1.07rem, 1.71rem, 400),
-            $body-2: mat.define-typography-level(1rem, 1.71rem, 500),
-            $body-1: mat.define-typography-level(1rem, 1.42rem, 400),
+        $custom-typography: mat.define-legacy-typography-configmat.define-typography-config(
+            $headline-1: mat.define-typography-level(8rem, 8rem, 300),
+            $headline-2: mat.define-typography-level(4rem, 4rem, 400),
+            $headline-3: mat.define-typography-level(3.21rem, 3.21rem, 400),
+            $headline-4: mat.define-typography-level(2.42rem, 2.85rem, 400),
+            $headline-5: mat.define-typography-level(1.71rem, 2.28rem, 400),
+            $headline-6: mat.define-typography-level(1.42rem, 2.28rem, 500),
+            $subtitle-1: mat.define-typography-level(1.14rem, 2rem, 400),
+            $body-1: mat.define-typography-level(1.07rem, 1.71rem, 400),
+            $subtitle-2: mat.define-typography-level(1rem, 1.71rem, 500),
+            $body-2: mat.define-typography-level(1rem, 1.42rem, 400),
             $caption: mat.define-typography-level(0.86rem, 1.42rem, 400),
             $button: mat.define-typography-level(1rem, 1rem, 500),
             $font-family: $default-font-family,
-            $input: mat.define-typography-level(1.14em, 1.25, 400),
-        );
+            $in/* TODO(mdc-migration): No longer supported. Use `body-1` instead. put: mat.define-typography-level(1.14em, 1.25, 400),
+    */     );
     }
 
     @if $font-family {

lib/core/src/lib/about/about-server-settings/about-server-settings.component.html

@@ -1,5 +1,5 @@
 <div class="adf-about-server-settings">
-    <mat-card class="mat-elevation-z0 adf-about-server-settings__card">
+    <mat-card appearance="outlined" class="mat-elevation-z0 adf-about-server-settings__card">
         <p data-automation-id="adf-process-service-host">
             {{ 'ABOUT.SERVER_SETTINGS.PROCESS_SERVICE_HOST' | translate: {value: bpmHost} }}
         </p>

lib/core/src/lib/auth/guard/auth-guard-base.ts

@@ -19,7 +19,7 @@ import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, CanAc
 import { AuthenticationService } from '../services/authentication.service';
 import { AppConfigService, AppConfigValues } from '../../app-config/app-config.service';
 import { OauthConfigModel } from '../models/oauth-config.model';
-import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
+import { MatDialog } from '@angular/material/dialog';
 import { StorageService } from '../../common/services/storage.service';
 import { Observable } from 'rxjs';
 import { BasicAlfrescoAuthService } from '../basic-auth/basic-alfresco-auth.service';

lib/core/src/lib/auth/guard/auth-guard-bpm.service.ts

@@ -20,7 +20,7 @@ import { ActivatedRouteSnapshot, Router, UrlTree } from '@angular/router';
 import { AppConfigService } from '../../app-config/app-config.service';
 import { AuthenticationService } from '../services/authentication.service';
 import { AuthGuardBase } from './auth-guard-base';
-import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
+import { MatDialog } from '@angular/material/dialog';
 import { StorageService } from '../../common/services/storage.service';
 import { BasicAlfrescoAuthService } from '../basic-auth/basic-alfresco-auth.service';
 import { OidcAuthenticationService } from '../oidc/oidc-authentication.service';

lib/core/src/lib/auth/guard/auth-guard-ecm.service.ts

@@ -20,7 +20,7 @@ import { ActivatedRouteSnapshot, Router, UrlTree } from '@angular/router';
 import { AuthenticationService } from '../services/authentication.service';
 import { AppConfigService } from '../../app-config/app-config.service';
 import { AuthGuardBase } from './auth-guard-base';
-import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
+import { MatDialog } from '@angular/material/dialog';
 import { StorageService } from '../../common/services/storage.service';
 import { BasicAlfrescoAuthService } from '../basic-auth/basic-alfresco-auth.service';
 import { OidcAuthenticationService } from '../oidc/oidc-authentication.service';

lib/core/src/lib/auth/guard/auth-guard-sso-role.service.ts

@@ -17,7 +17,7 @@
 
 import { Injectable } from '@angular/core';
 import { ActivatedRouteSnapshot, CanActivate, Router } from '@angular/router';
-import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
+import { MatDialog } from '@angular/material/dialog';
 import { UserAccessService } from '../services/user-access.service';
 
 @Injectable({

lib/core/src/lib/auth/guard/auth-guard.service.ts

@@ -21,7 +21,7 @@ import { AuthenticationService } from '../services/authentication.service';
 import { AppConfigService } from '../../app-config/app-config.service';
 import { AuthGuardBase } from './auth-guard-base';
 import { JwtHelperService } from '../services/jwt-helper.service';
-import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
+import { MatDialog } from '@angular/material/dialog';
 import { StorageService } from '../../common/services/storage.service';
 import { BasicAlfrescoAuthService } from '../basic-auth/basic-alfresco-auth.service';
 import { OidcAuthenticationService } from '../oidc/oidc-authentication.service';

lib/core/src/lib/card-view/card-view.module.ts

@@ -18,19 +18,19 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-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 { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatChipsModule } from '@angular/material/chips';
 import { MatNativeDateModule } from '@angular/material/core';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatIconModule } from '@angular/material/icon';
-import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
-import { MatLegacyMenuModule as MatMenuModule } from '@angular/material/legacy-menu';
-import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
-import { MatLegacySlideToggleModule as MatSlideToggleModule } from '@angular/material/legacy-slide-toggle';
-import { MatLegacyTableModule as MatTableModule } from '@angular/material/legacy-table';
-import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
+import { MatInputModule } from '@angular/material/input';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatSelectModule } from '@angular/material/select';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { MatTableModule } from '@angular/material/table';
+import { MatTooltipModule } from '@angular/material/tooltip';
 import { MatDatetimepickerModule, MatNativeDatetimeModule } from '@mat-datetimepicker/core';
 import { TranslateModule } from '@ngx-translate/core';
 

lib/core/src/lib/card-view/components/card-view-arrayitem/card-view-arrayitem.component.html

@@ -1,43 +1,43 @@
 <div [attr.data-automation-id]="'card-array-label-' + property.key" class="adf-property-label">{{ property.label | translate }}</div>
 <div class="adf-property-value adf-card-view-array-item-container">
     <ng-container *ngIf="(property.displayValue | async) as items; else elseEmptyValueBlock">
-        <mat-chip-list *ngIf="items.length > 0; else elseEmptyValueBlock" data-automation-id="card-arrayitem-chip-list-container">
-            <ng-container *ngIf="displayCount > 0; else withOutDisplayCount" >
-                <mat-chip
-                    *ngFor="let item of items.slice(0, displayCount)"
+        <mat-chip-listbox *ngIf="items.length > 0; else elseEmptyValueBlock" data-automation-id="card-arrayitem-chip-list-container">
+            <ng-container *ngIf="displayCount() > 0; else withOutDisplayCount" >
+                <mat-chip-option
+                    *ngFor="let item of items.slice(0, displayCount())"
                     (click)="clicked()"
                     [attr.data-automation-id]="'card-arrayitem-chip-' + item.value">
                     <mat-icon *ngIf="item?.icon" class="adf-array-item-icon">{{item.icon}}</mat-icon>
                     <span>{{item?.value}}</span>
-                </mat-chip>
-                <mat-chip
-                    *ngIf="items.length > displayCount"
+                </mat-chip-option>
+                <mat-chip-option
+                    *ngIf="items.length > displayCount()"
                     data-automation-id="card-arrayitem-more-chip"
                     [matMenuTriggerFor]="menu">
-                    <span>{{items.length - displayCount}} {{'CORE.CARDVIEW.MORE' | translate}}</span>
-                </mat-chip>
+                    <span>{{items.length - displayCount()}} {{'CORE.CARDVIEW.MORE' | translate}}</span>
+                </mat-chip-option>
             </ng-container>
             <ng-template #withOutDisplayCount>
-                <mat-chip
+                <mat-chip-option
                     *ngFor="let item of items"
                     (click)="clicked()"
                     [attr.data-automation-id]="'card-arrayitem-chip-' + item.value">
                     <mat-icon *ngIf="item?.icon" class="adf-array-item-icon">{{item.icon}}</mat-icon>
                     <span>{{item?.value}}</span>
-                </mat-chip>
+                </mat-chip-option>
             </ng-template>
-        </mat-chip-list>
+        </mat-chip-listbox>
         <mat-menu #menu="matMenu">
-            <mat-card class="adf-array-item-more-chip-container">
+            <mat-card appearance="outlined" class="adf-array-item-more-chip-container">
                 <mat-card-content>
-                    <mat-chip-list>
-                        <mat-chip (click)="clicked()"
-                            *ngFor="let item of items.slice(displayCount, items.length)"
+                    <mat-chip-listbox>
+                        <mat-chip-option (click)="clicked()"
+                            *ngFor="let item of items.slice(displayCount(), items.length)"
                             [attr.data-automation-id]="'card-arrayitem-chip-' + item.value">
                         <mat-icon *ngIf="item?.icon" class="adf-array-item-icon">{{item.icon}}</mat-icon>
                         <span>{{item?.value}}</span>
-                        </mat-chip>
-                    </mat-chip-list>
+                        </mat-chip-option>
+                    </mat-chip-listbox>
                 </mat-card-content>
             </mat-card>
         </mat-menu>

lib/core/src/lib/card-view/components/card-view-arrayitem/card-view-arrayitem.component.scss

@@ -21,7 +21,7 @@
     }
 
     &-array-item-more-chip-container {
-        &.mat-card {
+        &.mat-mdc-card {
             box-shadow: none;
             max-height: 300px;
             overflow-y: auto;
@@ -29,6 +29,7 @@
     }
 
     &-property-value {
+        /* TODO(mdc-migration): The following rule targets internal classes of chips that may no longer apply for the MDC version. */
         .mat-chip-list {
             padding-top: 6px;
         }
@@ -45,7 +46,7 @@
         border-color: var(--adf-card-view-array-item-border-color);
         border-radius: var(--adf-card-view-array-item-border-radius);
 
-        .mat-chip:hover {
+        .mat-mdc-chip:hover {
             cursor: pointer;
         }
     }

lib/core/src/lib/card-view/components/card-view-boolitem/card-view-boolitem.component.spec.ts

@@ -17,7 +17,7 @@
 
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
-import { MatLegacyCheckbox as MatCheckbox, MatLegacyCheckboxChange as MatCheckboxChange } from '@angular/material/legacy-checkbox';
+import { MatCheckbox, MatCheckboxChange } from '@angular/material/checkbox';
 import { CardViewUpdateService } from '../../services/card-view-update.service';
 import { CardViewBoolItemComponent } from './card-view-boolitem.component';
 import { CardViewBoolItemModel } from '../../models/card-view-boolitem.model';

lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.html

@@ -74,17 +74,18 @@
         {{ property.default | translate }}
     </ng-template>
 
-    <div *ngIf="property.multivalued" class="adf-property-field adf-dateitem-chip-list-container adf-dateitem-editable">
-        <mat-chip-list #chipList class="adf-textitem-chip-list">
-            <mat-chip
-                *ngFor="let propertyValue of property.displayValue; let idx = index"
-                [removable]="isEditable"
-                (removed)="removeValueFromList(idx)"
-            >
+    <div *ngIf="property.multivalued"
+         class="adf-property-field adf-dateitem-chip-list-container adf-dateitem-editable">
+        <mat-chip-listbox #chipList
+                       class="adf-textitem-chip-list">
+            <mat-chip-option *ngFor="let propertyValue of property.displayValue; let idx = index"
+                      [removable]="isEditable()"
+                      (removed)="removeValueFromList(idx)">
                 {{ propertyValue }}
-                <mat-icon *ngIf="isEditable" matChipRemove>cancel</mat-icon>
-            </mat-chip>
-        </mat-chip-list>
+                <mat-icon *ngIf="isEditable()"
+                          matChipRemove>cancel</mat-icon>
+            </mat-chip-option>
+        </mat-chip-listbox>
 
         <div
             *ngIf="isEditable"

lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.scss

@@ -43,7 +43,7 @@
             justify-content: space-between;
             padding-bottom: 6px;
 
-            .mat-icon-button {
+            button.mat-mdc-icon-button {
                 line-height: 20px;
                 height: 20px;
                 width: 20px;

lib/core/src/lib/card-view/components/card-view-keyvaluepairsitem/card-view-keyvaluepairsitem.component.scss

@@ -26,21 +26,21 @@
                 justify-content: center;
             }
 
-            &__add-btn.mat-button {
+
+            &__add-btn.mat-mdc-button {
                 margin-bottom: 20px;
             }
 
             &__read-only {
                 padding-bottom: 20px;
 
-                .mat-table {
-                    box-shadow: none;
-                }
+            .mat-mdc-table {
+                box-shadow: none;
+            }
 
-                .mat-header-row,
-                .mat-row {
-                    padding: 0;
-                }
+            .mat-mdc-header-row,
+            .mat-mdc-row {
+                padding: 0;
             }
         }
     }

lib/core/src/lib/card-view/components/card-view-keyvaluepairsitem/card-view-keyvaluepairsitem.component.ts

@@ -18,7 +18,7 @@
 import { Component, OnChanges, ViewEncapsulation } from '@angular/core';
 import { CardViewKeyValuePairsItemModel } from '../../models/card-view.models';
 import { CardViewKeyValuePairsItemType } from '../../interfaces/card-view.interfaces';
-import { MatLegacyTableDataSource as MatTableDataSource } from '@angular/material/legacy-table';
+import { MatTableDataSource } from '@angular/material/table';
 import { BaseCardView } from '../base-card-view';
 
 @Component({

lib/core/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.ts

@@ -19,7 +19,7 @@ import { Component, Input, OnChanges, OnDestroy, OnInit, inject, ViewEncapsulati
 import { CardViewSelectItemModel } from '../../models/card-view-selectitem.model';
 import { BehaviorSubject, combineLatest, Observable } from 'rxjs';
 import { CardViewSelectItemOption } from '../../interfaces/card-view.interfaces';
-import { MatLegacySelectChange as MatSelectChange } from '@angular/material/legacy-select';
+import { MatSelectChange } from '@angular/material/select';
 import { BaseCardView } from '../base-card-view';
 import { AppConfigService } from '../../../app-config/app-config.service';
 import { takeUntil, map } from 'rxjs/operators';

lib/core/src/lib/card-view/components/card-view-selectitem/select-filter-input/select-filter-input.component.scss

@@ -16,13 +16,13 @@ $select-filter-height: 4em !default;
         background: var(--adf-theme-background-card-color);
     }
 
-    .mat-form-field {
+    .mat-mdc-form-field {
         width: 100%;
     }
 }
 
-.mat-select-panel.adf-select-filter {
-    transform: none;
-    overflow-x: hidden;
+.mat-mdc-select-panel.adf-select-filter {
+    transform: none !important;
+    overflow-x: hidden !important;
     max-height: calc(256px + #{$select-filter-height});
 }

lib/core/src/lib/card-view/components/card-view-selectitem/select-filter-input/select-filter-input.component.spec.ts

@@ -18,7 +18,7 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { CoreTestingModule } from '../../../../testing/core.testing.module';
 import { SelectFilterInputComponent } from './select-filter-input.component';
-import { MatLegacySelect as MatSelect } from '@angular/material/legacy-select';
+import { MatSelect } from '@angular/material/select';
 
 describe('SelectFilterInputComponent', () => {
     let fixture: ComponentFixture<SelectFilterInputComponent>;

lib/core/src/lib/card-view/components/card-view-selectitem/select-filter-input/select-filter-input.component.ts

@@ -16,7 +16,7 @@
  */
 
 import { Component, ViewEncapsulation, ViewChild, ElementRef, OnDestroy, Inject, Output, EventEmitter, OnInit } from '@angular/core';
-import { MatLegacySelect as MatSelect } from '@angular/material/legacy-select';
+import { MatSelect } from '@angular/material/select';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 

lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.html

@@ -1,17 +1,9 @@
 <div [ngSwitch]="templateType">
     <div *ngSwitchDefault>
-        <mat-form-field
-            class="adf-property-field adf-card-textitem-field"
-            [ngClass]="{
-                'adf-property-read-only': !isEditable
-            }"
-            [floatLabel]="'always'"
-            appearance="standard"
-        >
-            <mat-label
-                *ngIf="showProperty || isEditable"
-                [attr.data-automation-id]="'card-textitem-label-' + property.key"
-                class="adf-property-label"
+        <mat-form-field class="adf-property-field adf-card-textitem-field"
+            [ngClass]="{'adf-property-read-only': !isEditable }"
+            [floatLabel]="'never'">
+            <mat-label *ngIf="showProperty || isEditable" [attr.data-automation-id]="'card-textitem-label-' + property.key" class="adf-property-label"
                 [ngClass]="{
                     'adf-property-value-editable': editable,
                     'adf-property-readonly-value': isReadonlyProperty
@@ -74,16 +66,18 @@
         >
             {{ property.label | translate }}
         </mat-label>
-        <mat-chip-list #chipList class="adf-textitem-chip-list">
-            <mat-chip *ngFor="let propertyValue of editedValue; let idx = index" [removable]="isEditable" (removed)="removeValueFromList(idx)">
+        <mat-chip-grid #chipList
+            class="adf-textitem-chip-list">
+            <mat-chip-row *ngFor="let propertyValue of editedValue; let idx = index"
+                [removable]="isEditable"
+                (removed)="removeValueFromList(idx)">
                 {{ propertyValue }}
-                <mat-icon *ngIf="isEditable" matChipRemove>cancel</mat-icon>
-            </mat-chip>
-        </mat-chip-list>
+                <mat-icon *ngIf="isEditable"
+                    matChipRemove>cancel</mat-icon>
+            </mat-chip-row>
+        </mat-chip-grid>
 
-        <mat-form-field
-            *ngIf="isEditable"
-            appearance="standard"
+        <mat-form-field *ngIf="isEditable"
             class="adf-property-field adf-textitem-chip-list-input"
             [ngClass]="{ 'adf-property-read-only': !isEditable }"
             [floatLabel]="'never'"
@@ -112,16 +106,10 @@
         class="adf-textitem-clickable"
         [ngClass]="{ 'adf-property-read-only': !isEditable }"
         [attr.data-automation-id]="'card-textitem-toggle-' + property.key"
-        tabindex="0"
-        (keyup.enter)="clicked()"
-        (click)="clicked()"
-    >
-        <mat-form-field class="adf-property-field adf-card-textitem-field" appearance="standard" [floatLabel]="'never'">
-            <mat-label
-                *ngIf="showProperty || isEditable"
-                [attr.data-automation-id]="'card-textitem-label-' + property.key"
-                class="adf-property-label"
-            >
+        (click)="clicked()">
+        <mat-form-field class="adf-property-field adf-card-textitem-field"
+            [floatLabel]="'never'">
+            <mat-label *ngIf="showProperty || isEditable" [attr.data-automation-id]="'card-textitem-label-' + property.key" class="adf-property-label">
                 {{ property.label | translate }}
             </mat-label>
             <input

lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.ts

@@ -18,7 +18,7 @@
 import { ChangeDetectorRef, Component, Input, OnChanges, OnDestroy, SimpleChanges, ViewEncapsulation } from '@angular/core';
 import { CardViewTextItemModel } from '../../models/card-view-textitem.model';
 import { BaseCardView } from '../base-card-view';
-import { MatLegacyChipInputEvent as MatChipInputEvent } from '@angular/material/legacy-chips';
+import { MatChipInputEvent } from '@angular/material/chips';
 import { ClipboardService } from '../../../clipboard/clipboard.service';
 import { TranslationService } from '../../../translation/translation.service';
 import { CardViewItemValidator } from '../../interfaces/card-view-item-validator.interface';

lib/core/src/lib/card-view/components/card-view/card-view.component.scss

@@ -58,7 +58,7 @@
             .mat-form-field-wrapper {
                 padding-bottom: 0;
             }
-
+            /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
             .mat-form-field-label {
                 padding: 0;
                 justify-content: center;

lib/core/src/lib/clipboard/clipboard.service.spec.ts

@@ -18,7 +18,7 @@
 import { NotificationService } from '../notifications/services/notification.service';
 import { TestBed } from '@angular/core/testing';
 import { ClipboardService } from './clipboard.service';
-import { MatLegacySnackBarModule as MatSnackBarModule } from '@angular/material/legacy-snack-bar';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { CoreTestingModule } from '../testing';
 
 describe('ClipboardService', () => {

lib/core/src/lib/comments/comment-list/comment-list.module.ts

@@ -18,10 +18,10 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { TranslateModule } from '@ngx-translate/core';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
-import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
-import { MatLegacyListModule as MatListModule } from '@angular/material/legacy-list';
+import { MatButtonModule } from '@angular/material/button';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatListModule } from '@angular/material/list';
 import { MatLineModule } from '@angular/material/core';
 import { FormsModule } from '@angular/forms';
 import { PipeModule } from '../../pipes/pipe.module';

lib/core/src/lib/comments/comments.component.scss

@@ -24,7 +24,7 @@ adf-comments {
             resize: vertical;
         }
 
-        .mat-form-field {
+        .mat-mdc-form-field {
             width: 100%;
         }
     }

lib/core/src/lib/comments/comments.module.ts

@@ -18,10 +18,10 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { TranslateModule } from '@ngx-translate/core';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
-import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
-import { MatLegacyListModule as MatListModule } from '@angular/material/legacy-list';
+import { MatButtonModule } from '@angular/material/button';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatListModule } from '@angular/material/list';
 import { MatLineModule } from '@angular/material/core';
 import { FormsModule } from '@angular/forms';
 import { PipeModule } from '../pipes/pipe.module';

lib/core/src/lib/context-menu/context-menu-list.component.ts

@@ -17,12 +17,8 @@
 
 import { trigger } from '@angular/animations';
 import { FocusKeyManager } from '@angular/cdk/a11y';
-import { DOWN_ARROW, UP_ARROW } from '@angular/cdk/keycodes';
-import { NgForOf, NgIf } from '@angular/common';
-import { AfterViewInit, Component, HostListener, Inject, Optional, QueryList, ViewChildren, ViewEncapsulation } from '@angular/core';
-import { MatIconModule } from '@angular/material/icon';
-import { MatMenuItem, MatMenuModule } from '@angular/material/menu';
-import { TranslateModule } from '@ngx-translate/core';
+import { MatMenuItem } from '@angular/material/menu';
+import { ContextMenuOverlayRef } from './context-menu-overlay';
 import { contextMenuAnimation } from './animations';
 import { ContextMenuOverlayRef } from './context-menu-overlay';
 import { CONTEXT_MENU_DATA } from './context-menu.tokens';

lib/core/src/lib/core.module.ts

@@ -55,7 +55,7 @@ import { AdfHttpClient } from '@alfresco/adf-core/api';
 import { AuthenticationInterceptor, Authentication } from '@alfresco/adf-core/auth';
 import { HttpClientModule, HttpClientXsrfModule, HTTP_INTERCEPTORS } from '@angular/common/http';
 import { AuthenticationService } from './auth/services/authentication.service';
-import { MAT_LEGACY_SNACK_BAR_DEFAULT_OPTIONS as MAT_SNACK_BAR_DEFAULT_OPTIONS } from '@angular/material/legacy-snack-bar';
+import { MAT_SNACK_BAR_DEFAULT_OPTIONS } from '@angular/material/snack-bar';
 import { IdentityUserInfoModule } from './identity-user-info/identity-user-info.module';
 import { loadAppConfig } from './app-config/app-config.loader';
 import { AppConfigService } from './app-config/app-config.service';

lib/core/src/lib/dialogs/edit-json/edit-json.dialog.module.ts

@@ -20,8 +20,8 @@ import { EditJsonDialogComponent } from './edit-json.dialog';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { CommonModule } from '@angular/common';
 import { TranslateModule } from '@ngx-translate/core';
-import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatButtonModule } from '@angular/material/button';
 @NgModule({
     declarations: [EditJsonDialogComponent],
     imports: [

lib/core/src/lib/dialogs/edit-json/edit-json.dialog.scss

@@ -1,5 +1,5 @@
 .adf-edit-json-dialog {
-    .mat-dialog-content {
+    .mat-mdc-dialog-content {
         height: 300px;
         overflow: hidden;
     }

lib/core/src/lib/dialogs/edit-json/edit-json.dialog.stories.component.ts

@@ -16,7 +16,7 @@
  */
 
 import { Component, OnInit, OnChanges, Input } from '@angular/core';
-import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
+import { MatDialog } from '@angular/material/dialog';
 import {
     EditJsonDialogComponent,
     EditJsonDialogSettings

lib/core/src/lib/dialogs/edit-json/edit-json.dialog.stories.ts

@@ -19,7 +19,7 @@ import { Meta, moduleMetadata, Story } from '@storybook/angular';
 import { CoreStoryModule } from '../../testing/core.story.module';
 import { EditJsonDialogModule } from './edit-json.dialog.module';
 import { EditJsonDialogStorybookComponent } from './edit-json.dialog.stories.component';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
+import { MatButtonModule } from '@angular/material/button';
 
 const jsonData = {
     maxValue: 50,

lib/core/src/lib/dialogs/edit-json/edit-json.dialog.ts

@@ -16,7 +16,7 @@
  */
 
 import { Component, Inject, OnInit, Input, ViewEncapsulation } 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';
 
 export interface EditJsonDialogSettings {
     title?: string;

lib/core/src/lib/directives/infinite-select-scroll.directive.ts

@@ -16,7 +16,7 @@
  */
 
 import { Inject, AfterViewInit, Directive, EventEmitter, OnDestroy, Output } from '@angular/core';
-import { MatLegacySelect as MatSelect } from '@angular/material/legacy-select';
+import { MatSelect } from '@angular/material/select';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 

lib/core/src/lib/form/components/form-renderer.component.scss

@@ -83,14 +83,14 @@
         }
     }
 
-    .mat-form-field {
+    .mat-mdc-form-field {
         width: 100%;
     }
 
     mat-form-field {
         width: 100%;
     }
-
+    /* TODO(mdc-migration): The following rule targets internal classes of input that may no longer apply for the MDC version. */
     .mat-input-placeholder {
         top: 1.8em;
     }
@@ -102,7 +102,7 @@
             background-color: 300ms cubic-bezier(0.55, 0, 0.55, 0.2);
             color: var(--theme-primary-color);
         }
-
+        /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
         .mat-form-field-prefix {
             color: var(--theme-primary-color);
         }
@@ -123,19 +123,19 @@
         max-width: 100%;
         max-height: 100%;
 
-        & .mat-card {
+        & .mat-mdc-card {
             padding: 16px 24px;
             overflow: hidden;
         }
-
+        /* TODO(mdc-migration): The following rule targets internal classes of card that may no longer apply for the MDC version. */
         & .mat-card-header-text {
             margin: 0;
         }
-
+        /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
         & .mat-tab-body-content {
             overflow: hidden;
         }
-
+        /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
         & .mat-tab-label {
             font-size: var(--theme-subheading-2-font-size);
             line-height: var(--theme-headline-line-height);
@@ -148,7 +148,7 @@
         & .mat-ink-bar {
             height: 4px;
         }
-
+        /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
         & .mat-form-field-wrapper {
             margin: 0 12px 0 0;
         }
@@ -214,11 +214,11 @@
         padding-bottom: 25px !important;
         padding-right: 25px !important;
 
-        & .mat-button {
+        & .mat-mdc-button {
             height: 36px;
             border-radius: 5px;
         }
-
+        /* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version. */
         & .mat-button-wrapper {
             width: 58px;
             height: 20px;
@@ -235,7 +235,7 @@
             flex: 1;
         }
     }
-
+    /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
     &-left-label-input-container .mat-form-field-label-wrapper {
         top: auto;
         bottom: 0;
@@ -250,7 +250,7 @@
 form-field {
     width: 100%;
 
-    .mat-input-element {
+    .mat-mdc-input-element {
         font-size: var(--theme-body-2-font-size);
         padding-top: 8px;
         line-height: normal;

lib/core/src/lib/form/components/inplace-form-input/inplace-form-input.component.scss

@@ -2,15 +2,16 @@
 $adf-inplace-input-padding: 7px;
 
 .adf-inplace-input-container {
+    /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
     .mat-form-field-underline {
         display: none;
     }
-
+    /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
     .mat-form-field-infix {
         display: flex;
         border-top: 0;
     }
-
+    /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
     .mat-form-field-label {
         padding: $adf-inplace-input-padding;
     }

lib/core/src/lib/form/components/widgets/date-time/date-time.widget.scss

@@ -1,20 +1,22 @@
 /* stylelint-disable selector-class-pattern */
 .adf {
     &-date-time-widget {
+        /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
         .mat-form-field-suffix {
             top: 26px;
         }
-
+        /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
         .mat-form-field-label-wrapper {
             top: 20px;
         }
     }
 
     &-left-label-input-datepicker {
+        /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
         .mat-form-field-suffix {
             top: 0;
         }
-
+        /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
         .mat-form-field-infix {
             width: 100%;
         }

lib/core/src/lib/form/components/widgets/form.theme.scss

@@ -34,24 +34,25 @@ ul > li > form-field > .adf-focus {
     }
 
     &-invalid {
+        /* TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version. */
         .mat-checkbox-layout {
             padding-bottom: 12px;
         }
-
+        /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
         .mat-form-field-underline {
             background-color: var(--theme-warn-color);
         }
 
-        .mat-select {
-            .mat-select-arrow {
-                color: var(--adf-theme-foreground-secondary-text-color);
+        .mat-mdc-select {
+            &-arrow {
+                color: var(--adf-theme-foreground-secondary-text-color) !important;
             }
         }
 
         .adf-file {
             border-color: var(--theme-warn-color);
         }
-
+        /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
         .mat-form-field-prefix {
             color: var(--adf-theme-foreground-secondary-text-color);
         }
@@ -69,10 +70,10 @@ ul > li > form-field > .adf-focus {
 /* query for Microsoft IE 11 */
 @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
     adf-form-field {
-        .mat-input-element,
-        .mat-select,
-        .mat-form-field {
-            display: block;
+        .mat-mdc-input-element,
+        .mat-mdc-select,
+        .mat-mdc-form-field {
+            display: block !important;
         }
     }
 }

lib/core/src/lib/form/components/widgets/text/text.widget.scss

@@ -2,7 +2,7 @@
 .adf {
     &-text-widget {
         width: 100%;
-
+        /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
         .mat-form-field-label-wrapper {
             top: 20px;
         }

lib/core/src/lib/form/components/widgets/text/text.widget.spec.ts

@@ -22,7 +22,7 @@ import { FormModel } from '../core/form.model';
 import { TextWidgetComponent } from './text.widget';
 import { FormsModule } from '@angular/forms';
 import { MatIconModule } from '@angular/material/icon';
-import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
+import { MatInputModule } from '@angular/material/input';
 import { CoreTestingModule } from '../../../../testing';
 import { HarnessLoader } from '@angular/cdk/testing';
 import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';

lib/core/src/lib/identity-user-info/identity-user-info.component.spec.ts

@@ -18,7 +18,7 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { IdentityUserInfoComponent } from './identity-user-info.component';
 import { CoreTestingModule } from '../testing/core.testing.module';
-import { MatLegacyMenuModule as MatMenuModule } from '@angular/material/legacy-menu';
+import { MatMenuModule } from '@angular/material/menu';
 import { By } from '@angular/platform-browser';
 import { IdentityUserModel } from '../auth/models/identity-user.model';
 

lib/core/src/lib/identity-user-info/identity-user-info.component.ts

@@ -16,7 +16,7 @@
  */
 
 import { Component, Input, OnDestroy, ViewChild, ViewEncapsulation } from '@angular/core';
-import { MatLegacyMenuTrigger as MatMenuTrigger, LegacyMenuPositionX as MenuPositionX, LegacyMenuPositionY as MenuPositionY } from '@angular/material/legacy-menu';
+import { MatMenuTrigger, MenuPositionX, MenuPositionY } from '@angular/material/menu';
 import { IdentityUserModel } from '../auth/models/identity-user.model';
 import { Subject } from 'rxjs';
 

lib/core/src/lib/identity-user-info/identity-user-info.module.ts

@@ -18,10 +18,10 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { IdentityUserInfoComponent } from './identity-user-info.component';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card';
-import { MatLegacyMenuModule as MatMenuModule } from '@angular/material/legacy-menu';
-import { MatLegacyTabsModule as MatTabsModule } from '@angular/material/legacy-tabs';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatTabsModule } from '@angular/material/tabs';
 import { TranslateModule } from '@ngx-translate/core';
 import { PipeModule } from '../pipes/pipe.module';
 import { FullNamePipe, InitialUsernamePipe } from '../pipes';

lib/core/src/lib/info-drawer/info-drawer-layout.component.scss

@@ -16,7 +16,7 @@ $adf-info-drawer-icon-size-half: 24px !default;
         width: 100%;
         background-color: var(--theme-card-background-color);
         box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.27);
-
+        /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
         & .mat-tab-label {
             height: 32px;
             text-align: left;
@@ -67,7 +67,7 @@ $adf-info-drawer-icon-size-half: 24px !default;
             > *:last-child {
                 margin-bottom: 0;
             }
-
+            /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
             .adf-info-drawer-tabs .mat-tab-body-content {
                 .adf-manage-versions-empty,
                 .adf-manage-versions-no-permission {

lib/core/src/lib/info-drawer/info-drawer.component.scss

@@ -4,7 +4,7 @@
             display: block;
             margin: 0;
         }
-
+        /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
         .mat-tab-label {
             min-width: 0;
         }
@@ -29,15 +29,16 @@
                 }
 
                 .adf-info-drawer-tabs {
+                    /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
                     & .mat-tab-body-content > * {
                         margin-bottom: 20px;
                         display: block;
                     }
-
+                    /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
                     & .mat-tab-body-content > *:last-child {
                         margin-bottom: 0;
                     }
-
+                    /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
                     .mat-tab-label {
                         flex-grow: 1;
 
@@ -50,10 +51,11 @@
                         height: 2px;
                     }
 
-                    .mat-tab-body {
+                    .mat-mdc-tab-body {
+                        padding: 10px;
                         overflow-y: hidden;
                     }
-
+                    /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
                     .mat-tab-body-content {
                         /* stylelint-disable */
                         overflow: auto;

lib/core/src/lib/info-drawer/info-drawer.component.spec.ts

@@ -17,7 +17,7 @@
 
 import { Component } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { MatLegacyTabChangeEvent as MatTabChangeEvent } from '@angular/material/legacy-tabs';
+import { MatTabChangeEvent } from '@angular/material/tabs';
 import { By } from '@angular/platform-browser';
 import { InfoDrawerComponent } from './info-drawer.component';
 import { of } from 'rxjs';

lib/core/src/lib/language-menu/language-menu.module.ts

@@ -19,9 +19,9 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { TranslateModule } from '@ngx-translate/core';
 
-import { MatLegacyMenuModule as MatMenuModule } from '@angular/material/legacy-menu';
+import { MatMenuModule } from '@angular/material/menu';
 import { MatIconModule } from '@angular/material/icon';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
+import { MatButtonModule } from '@angular/material/button';
 
 import { LanguageMenuComponent } from './language-menu.component';
 import { LanguagePickerComponent } from './language-picker.component';

lib/core/src/lib/layout/components/sidenav-layout/sidenav-layout.component.stories.ts

@@ -19,7 +19,7 @@ import { Meta, moduleMetadata, Story } from '@storybook/angular';
 import { CoreStoryModule } from '../../../testing/core.story.module';
 import { SidenavLayoutModule } from '../../layout.module';
 import { SidenavLayoutComponent } from './sidenav-layout.component';
-import { MatLegacyListModule as MatListModule } from '@angular/material/legacy-list';
+import { MatListModule } from '@angular/material/list';
 import { MatIconModule } from '@angular/material/icon';
 import { RouterTestingModule } from '@angular/router/testing';
 

lib/core/src/lib/material.module.ts

@@ -18,32 +18,32 @@
 import { NgModule } from '@angular/core';
 import { MatDatetimepickerModule, MatNativeDatetimeModule } from '@mat-datetimepicker/core';
 
-import { MatLegacyAutocompleteModule as MatAutocompleteModule } from '@angular/material/legacy-autocomplete';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-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 { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatChipsModule } from '@angular/material/chips';
 import { MatNativeDateModule, MatRippleModule } from '@angular/material/core';
-import { MatLegacyOptionModule as MatOptionModule } from '@angular/material/legacy-core';
+import { MatOptionModule } from '@angular/material/core';
 import { MatDatepickerModule } from '@angular/material/datepicker';
-import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
+import { MatDialogModule } from '@angular/material/dialog';
 import { MatExpansionModule } from '@angular/material/expansion';
 import { MatGridListModule } from '@angular/material/grid-list';
 import { MatIconModule } from '@angular/material/icon';
-import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
-import { MatLegacyListModule as MatListModule } from '@angular/material/legacy-list';
-import { MatLegacyMenuModule as MatMenuModule } from '@angular/material/legacy-menu';
-import { MatLegacyProgressBarModule as MatProgressBarModule } from '@angular/material/legacy-progress-bar';
-import { MatLegacyProgressSpinnerModule as MatProgressSpinnerModule } from '@angular/material/legacy-progress-spinner';
-import { MatLegacyRadioModule as MatRadioModule } from '@angular/material/legacy-radio';
-import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
+import { MatInputModule } from '@angular/material/input';
+import { MatListModule } from '@angular/material/list';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatRadioModule } from '@angular/material/radio';
+import { MatSelectModule } from '@angular/material/select';
 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 { MatLegacyTableModule as MatTableModule } from '@angular/material/legacy-table';
-import { MatLegacyTabsModule as MatTabsModule } from '@angular/material/legacy-tabs';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
+import { MatTableModule } from '@angular/material/table';
+import { MatTabsModule } from '@angular/material/tabs';
 import { MatToolbarModule } from '@angular/material/toolbar';
-import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
 import { MatBadgeModule } from '@angular/material/badge';
 
 @NgModule({

lib/core/src/lib/notifications/components/notification-history.component.scss

@@ -1,5 +1,5 @@
 .adf {
-    &-notification-history-menu_button.mat-button {
+    &-notification-history-menu_button.mat-mdc-button {
         margin-right: 0;
         border-radius: 90%;
         padding: 0;
@@ -7,7 +7,7 @@
         height: 40px;
     }
 
-    &-notification-history-list .mat-subheader {
+    &-notification-history-list .mat-mdc-subheader {
         justify-content: space-between;
     }
 
@@ -61,11 +61,11 @@
     }
 }
 
-.mat-menu-panel.adf-notification-history-menu {
+.mat-mdc-menu-panel.adf-notification-history-menu {
     min-width: 320px;
     max-height: 500px;
 
-    .mat-menu-content {
+    .mat-mdc-menu-content {
         padding: 0;
     }
 }

lib/core/src/lib/notifications/services/notification.service.spec.ts

@@ -17,7 +17,7 @@
 
 import { Component } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { MatLegacySnackBarConfig as MatSnackBarConfig, MatLegacySnackBarModule as MatSnackBarModule } from '@angular/material/legacy-snack-bar';
+import { MatSnackBarConfig, MatSnackBarModule } from '@angular/material/snack-bar';
 import { NotificationService } from './notification.service';
 import { TranslationService } from '../../translation/translation.service';
 import { CoreTestingModule } from '../../testing/core.testing.module';

lib/core/src/lib/notifications/services/notification.service.ts

@@ -16,7 +16,7 @@
  */
 
 import { Injectable } from '@angular/core';
-import { MatLegacySnackBar as MatSnackBar, MatLegacySnackBarRef as MatSnackBarRef, MatLegacySnackBarConfig as MatSnackBarConfig } from '@angular/material/legacy-snack-bar';
+import { MatSnackBar, MatSnackBarRef, MatSnackBarConfig } from '@angular/material/snack-bar';
 import { TranslationService } from '../../translation/translation.service';
 import { Subject } from 'rxjs';
 import { NotificationModel } from '../models/notification.model';

lib/core/src/lib/search-text/search-text-input.component.scss

@@ -20,9 +20,11 @@
     }
 
     &-input-form-field-divider {
+        /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
+        /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
         .mat-form-field-underline {
             background-color: var(--adf-theme-primary-50);
-
+            /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
             .mat-form-field-ripple {
                 background-color: var(--adf-theme-primary-50);
             }

lib/core/src/lib/snackbar-content/snackbar-content.component.scss

@@ -16,7 +16,7 @@
     .adf-snackbar-message-content-action {
         margin-left: 24px;
 
-        .mat-button {
+        .mat-mdc-button {
             min-width: 0;
             margin: -8px;
 

lib/core/src/lib/snackbar-content/snackbar-content.component.spec.ts

@@ -17,8 +17,8 @@
 
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { MatIcon, MatIconModule } from '@angular/material/icon';
-import { MAT_LEGACY_SNACK_BAR_DATA as MAT_SNACK_BAR_DATA, MatLegacySnackBarModule as MatSnackBarModule, MatLegacySnackBarRef as MatSnackBarRef } from '@angular/material/legacy-snack-bar';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
+import { MAT_SNACK_BAR_DATA, MatSnackBarModule, MatSnackBarRef } from '@angular/material/snack-bar';
+import { MatButtonModule } from '@angular/material/button';
 import { By } from '@angular/platform-browser';
 import { SnackbarContentComponent } from './snackbar-content.component';
 import { CoreTestingModule } from '@alfresco/adf-core';

lib/core/src/lib/snackbar-content/snackbar-content.component.ts

@@ -16,7 +16,7 @@
  */
 
 import { Component, Inject } from '@angular/core';
-import { MAT_LEGACY_SNACK_BAR_DATA as MAT_SNACK_BAR_DATA, MatLegacySnackBarRef as MatSnackBarRef } from '@angular/material/legacy-snack-bar';
+import { MAT_SNACK_BAR_DATA, MatSnackBarRef } from '@angular/material/snack-bar';
 import { SnackBarData } from './snack-bar-data';
 
 @Component({

lib/core/src/lib/snackbar-content/snackbar-content.module.ts

@@ -19,8 +19,8 @@ import { NgModule } from '@angular/core';
 import { MatIconModule } from '@angular/material/icon';
 import { CommonModule } from '@angular/common';
 import { SnackbarContentComponent } from './snackbar-content.component';
-import { MatLegacySnackBarModule as MatSnackBarModule } from '@angular/material/legacy-snack-bar';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
+import { MatButtonModule } from '@angular/material/button';
 import { TranslateModule } from '@ngx-translate/core';
 
 @NgModule({

lib/core/src/lib/sorting-picker/sorting-picker.component.ts

@@ -16,7 +16,7 @@
  */
 
 import { Component, ViewEncapsulation, Input, EventEmitter, Output } from '@angular/core';
-import { MatLegacySelectChange as MatSelectChange } from '@angular/material/legacy-select';
+import { MatSelectChange } from '@angular/material/select';
 
 @Component({
     selector: 'adf-sorting-picker',

lib/core/src/lib/sorting-picker/sorting-picker.module.ts

@@ -20,8 +20,8 @@ import { NgModule } from '@angular/core';
 import { TranslateModule } from '@ngx-translate/core';
 import { SortingPickerComponent } from './sorting-picker.component';
 import { MatIconModule } from '@angular/material/icon';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
+import { MatButtonModule } from '@angular/material/button';
+import { MatSelectModule } from '@angular/material/select';
 
 @NgModule({
     imports: [

lib/core/src/lib/styles/_typography.scss

@@ -1,19 +1,20 @@
 @use '@angular/material' as mat;
 
-$alfresco-typography: mat.define-legacy-typography-config(
+$alfresco-typography: mat.define-typography-config(
     $font-family: 'Muli, Roboto, "Helvetica Neue", sans-serif',
-    $display-4:     mat.define-typography-level(112px, 112px, 300),
-    $display-3:     mat.define-typography-level(56px, 56px, 400),
-    $display-2:     mat.define-typography-level(45px, 48px, 400),
-    $display-1:     mat.define-typography-level(34px, 40px, 400),
-    $headline:      mat.define-typography-level(24px, 32px, 400),
-    $title:         mat.define-typography-level(20px, 32px, 500),
-    $subheading-2:  mat.define-typography-level(16px, 28px, 400),
-    $subheading-1:  mat.define-typography-level(15px, 24px, 400),
-    $body-2:        mat.define-typography-level(14px, 24px, 500),
-    $body-1:        mat.define-typography-level(14px, 20px, 400),
+    $headline-1:     mat.define-typography-level(112px, 112px, 300),
+    $headline-2:     mat.define-typography-level(56px, 56px, 400),
+    $headline-3:     mat.define-typography-level(45px, 48px, 400),
+    $headline-4:     mat.define-typography-level(34px, 40px, 400),
+    $headline-5:      mat.define-typography-level(24px, 32px, 400),
+    $headline-6:         mat.define-typography-level(20px, 32px, 500),
+    $subtitle-1:  mat.define-typography-level(16px, 28px, 400),
+    $body-1:  mat.define-typography-level(15px, 24px, 400),
+    $subtitle-2:        mat.define-typography-level(14px, 24px, 500),
+    $body-2:        mat.define-typography-level(14px, 20px, 400),
     $caption:       mat.define-typography-level(12px, 20px, 400),
     $button:        mat.define-typography-level(14px, 14px, 500),
     // Line-height must be unit-less fraction of the font-size.
-    $input:         mat.define-typography-level(16px, 1.25, 400)
+    $in/* TODO(mdc-migration): No longer supported. Use `body-1` instead. put:         mat.define-typography-level(16px, 1.25, 400)
 );
+ */

lib/core/src/lib/styles/prebuilt/adf-blue-orange.scss

@@ -8,9 +8,9 @@
 //  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.legacy-typography-hierarchy(mat.define-typography-config());`
+@include mat.all-component-typographies;
+@include mat.core();
 
 $primary: mat.define-palette($alfresco-ecm-blue);
 $accent: mat.define-palette($alfresco-accent-orange);
@@ -25,5 +25,5 @@ $theme: mat.define-light-theme(
     )
 );
 
-@include mat.all-legacy-component-themes($theme);
+@include mat.all-component-themes($theme);
 @include alfresco-material-theme($theme);

lib/core/src/lib/styles/prebuilt/adf-blue-purple.scss

@@ -8,9 +8,9 @@
 //  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.legacy-typography-hierarchy(mat.define-typography-config());`
+@include mat.all-component-typographies;
+@include mat.core();
 
 $primary: mat.define-palette(mat.$pink-palette, 700, 500, 900);
 $accent: mat.define-palette($alfresco-accent-purple);
@@ -25,5 +25,5 @@ $theme: mat.define-light-theme(
     )
 );
 
-@include mat.all-legacy-component-themes($theme);
+@include mat.all-component-themes($theme);
 @include alfresco-material-theme($theme);

lib/core/src/lib/styles/prebuilt/adf-cyan-orange.scss

@@ -8,9 +8,9 @@
 //  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.legacy-typography-hierarchy(mat.define-typography-config());`
+@include mat.all-component-typographies;
+@include mat.core();
 
 $primary: mat.define-palette($alfresco-ecm-cyan);
 $accent: mat.define-palette($alfresco-accent-orange);
@@ -25,5 +25,5 @@ $theme: mat.define-light-theme(
     )
 );
 
-@include mat.all-legacy-component-themes($theme);
+@include mat.all-component-themes($theme);
 @include alfresco-material-theme($theme);

lib/core/src/lib/styles/prebuilt/adf-cyan-purple.scss

@@ -8,9 +8,9 @@
 //  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.legacy-typography-hierarchy(mat.define-typography-config());`
+@include mat.all-component-typographies;
+@include mat.core();
 
 $primary: mat.define-palette($alfresco-ecm-cyan);
 $accent: mat.define-palette($alfresco-accent-purple);
@@ -25,5 +25,5 @@ $theme: mat.define-light-theme(
     )
 );
 
-@include mat.all-legacy-component-themes($theme);
+@include mat.all-component-themes($theme);
 @include alfresco-material-theme($theme);

lib/core/src/lib/styles/prebuilt/adf-green-orange.scss

@@ -8,9 +8,9 @@
 //  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.legacy-typography-hierarchy(mat.define-typography-config());`
+@include mat.all-component-typographies;
+@include mat.core();
 
 $primary: mat.define-palette($alfresco-bpm-green);
 $accent: mat.define-palette($alfresco-accent-orange);
@@ -25,5 +25,5 @@ $theme: mat.define-light-theme(
     )
 );
 
-@include mat.all-legacy-component-themes($theme);
+@include mat.all-component-themes($theme);
 @include alfresco-material-theme($theme);

lib/core/src/lib/styles/prebuilt/adf-green-purple.scss

@@ -8,9 +8,9 @@
 //  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.legacy-typography-hierarchy(mat.define-typography-config());`
+@include mat.all-component-typographies;
+@include mat.core();
 
 $primary: mat.define-palette($alfresco-bpm-green);
 $accent: mat.define-palette($alfresco-accent-purple);
@@ -25,5 +25,5 @@ $theme: mat.define-light-theme(
     )
 );
 
-@include mat.all-legacy-component-themes($theme);
+@include mat.all-component-themes($theme);
 @include alfresco-material-theme($theme);

lib/core/src/lib/styles/prebuilt/adf-indigo-pink.scss

@@ -9,9 +9,9 @@
 //  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.legacy-typography-hierarchy(mat.define-typography-config());`
+@include mat.all-component-typographies;
+@include mat.core();
 
 $primary: mat.define-palette(mat.$indigo-palette);
 $accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
@@ -26,5 +26,5 @@ $theme: mat.define-light-theme(
     )
 );
 
-@include mat.all-legacy-component-themes($theme);
+@include mat.all-component-themes($theme);
 @include alfresco-material-theme($theme);

lib/core/src/lib/styles/prebuilt/adf-pink-bluegrey.scss

@@ -9,9 +9,9 @@
 //  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.legacy-typography-hierarchy(mat.define-typography-config());`
+@include mat.all-component-typographies;
+@include mat.core();
 
 $primary: mat.define-palette(mat.$pink-palette, 700, 500, 900);
 $accent: mat.define-palette(mat.$blue-grey-palette, A200, A100, A400);
@@ -26,5 +26,5 @@ $theme: mat.define-dark-theme(
     )
 );
 
-@include mat.all-legacy-component-themes($theme);
+@include mat.all-component-themes($theme);
 @include alfresco-material-theme($theme);

lib/core/src/lib/styles/prebuilt/adf-purple-green.scss

@@ -9,9 +9,9 @@
 //  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.legacy-typography-hierarchy(mat.define-typography-config());`
+@include mat.all-component-typographies;
+@include mat.core();
 
 $primary: mat.define-palette(mat.$purple-palette, 700, 500, 800);
 $accent: mat.define-palette(mat.$green-palette, A200, A100, A400);
@@ -26,5 +26,5 @@ $theme: mat.define-dark-theme(
     )
 );
 
-@include mat.all-legacy-component-themes($theme);
+@include mat.all-component-themes($theme);
 @include alfresco-material-theme($theme);