chore(mdc-migration): migrate material formfield, input, select, autocomplete

apps/dateAdapter/src/app/app.component.html

@@ -1,63 +1,72 @@
 <mat-form-field>
-  <jdn-datepicker [activeCalendar]="'Julian'">
-    <input
-      matInput
-      [matDatepicker]="picker"
-      placeholder="Choose a date"
-      [formControl]="form.controls['dateValue']"
-    />
-    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
-    <mat-datepicker
-      #picker
-      [calendarHeaderComponent]="headerComponent"
-    ></mat-datepicker>
-  </jdn-datepicker>
+    <mat-label>Choose a date</mat-label>
+    <jdn-datepicker [activeCalendar]="'Julian'">
+        <input
+            matInput
+            [matDatepicker]="picker"
+            [formControl]="form.controls['dateValue']"
+        />
+        <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
+        <mat-datepicker
+            #picker
+            [calendarHeaderComponent]="headerComponent"
+        ></mat-datepicker>
+    </jdn-datepicker>
 </mat-form-field>
 
 <mat-form-field>
-  <jdn-datepicker [activeCalendar]="'Gregorian'">
-    <input
-      matInput
-      [matDatepicker]="picker2"
-      placeholder="Choose a date"
-      [formControl]="form2.controls['dateValue2']"
-    />
-    <mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
-    <mat-datepicker
-      #picker2
-      [calendarHeaderComponent]="headerComponent"
-    ></mat-datepicker>
-  </jdn-datepicker>
+    <mat-label>Choose a date</mat-label>
+    <jdn-datepicker [activeCalendar]="'Gregorian'">
+        <input
+            matInput
+            [matDatepicker]="picker2"
+            [formControl]="form2.controls['dateValue2']"
+        />
+        <mat-datepicker-toggle
+            matSuffix
+            [for]="picker2"
+        ></mat-datepicker-toggle>
+        <mat-datepicker
+            #picker2
+            [calendarHeaderComponent]="headerComponent"
+        ></mat-datepicker>
+    </jdn-datepicker>
 </mat-form-field>
 
 <mat-form-field>
-  <jdn-datepicker [activeCalendar]="'Islamic'">
-    <input
-      matInput
-      [matDatepicker]="picker3"
-      placeholder="Choose a date"
-      [formControl]="form3.controls['dateValue3']"
-    />
-    <mat-datepicker-toggle matSuffix [for]="picker3"></mat-datepicker-toggle>
-    <mat-datepicker
-      #picker3
-      [calendarHeaderComponent]="headerComponent"
-    ></mat-datepicker>
-  </jdn-datepicker>
+    <mat-label>Choose a date</mat-label>
+    <jdn-datepicker [activeCalendar]="'Islamic'">
+        <input
+            matInput
+            [matDatepicker]="picker3"
+            [formControl]="form3.controls['dateValue3']"
+        />
+        <mat-datepicker-toggle
+            matSuffix
+            [for]="picker3"
+        ></mat-datepicker-toggle>
+        <mat-datepicker
+            #picker3
+            [calendarHeaderComponent]="headerComponent"
+        ></mat-datepicker>
+    </jdn-datepicker>
 </mat-form-field>
 
 <mat-form-field>
-  <jdn-datepicker [activeCalendar]="'Gregorian'">
-    <input
-      matInput
-      [matDatepicker]="picker4"
-      placeholder="Choose a date"
-      [formControl]="form4.controls['dateValue4']"
-    />
-    <mat-datepicker-toggle matSuffix [for]="picker4"></mat-datepicker-toggle>
-    <mat-datepicker
-      #picker4
-      [calendarHeaderComponent]="headerComponent"
-    ></mat-datepicker>
-  </jdn-datepicker>
+    <mat-label>Choose a date</mat-label>
+    <jdn-datepicker [activeCalendar]="'Gregorian'">
+        <input
+            matInput
+            [matDatepicker]="picker4"
+            [formControl]="form4.controls['dateValue4']"
+        />
+        <mat-datepicker-toggle
+            matSuffix
+            [for]="picker4"
+        ></mat-datepicker-toggle>
+        <mat-datepicker
+            #picker4
+            [calendarHeaderComponent]="headerComponent"
+        ></mat-datepicker>
+    </jdn-datepicker>
 </mat-form-field>

apps/dateAdapter/src/app/app.component.spec.ts

@@ -1,11 +1,11 @@
 import { TestBed, async } from '@angular/core/testing';
 import { AppComponent, HeaderComponent } from './app.component';
 import { MatJDNConvertibleCalendarDateAdapterModule } from '@dasch-swiss/jdnconvertiblecalendardateadapter';
-import { MatLegacyOptionModule as MatOptionModule } from '@angular/material/legacy-core';
+import { MatOptionModule } from '@angular/material/core';
 import { MatDatepickerModule } from '@angular/material/datepicker';
-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';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatSelectModule } from '@angular/material/select';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';

apps/dateAdapter/src/app/app.module.ts

@@ -4,11 +4,11 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
 import { AppComponent, HeaderComponent, JdnDatepicker } from './app.component';
 import { MatJDNConvertibleCalendarDateAdapterModule } from '@dasch-swiss/jdnconvertiblecalendardateadapter';
-import { MatLegacyOptionModule as MatOptionModule } from '@angular/material/legacy-core';
+import { MatOptionModule } from '@angular/material/core';
 import { MatDatepickerModule } from '@angular/material/datepicker';
-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';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatSelectModule } from '@angular/material/select';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 @NgModule({

apps/dateAdapter/src/styles.scss

@@ -31,16 +31,16 @@ $theme: mat.define-light-theme($primary, $accent, $warn);
 @include mat.all-component-themes($theme);
 
 app-calendar-header {
-  .mat-select {
+  .mat-mdc-select {
     background: #00796b;
     color: white;
     padding: 20px;
     margin-bottom: -20px;
     box-sizing: border-box;
   }
 
-  .mat-select-value,
-  .mat-select-arrow {
+  .mat-mdc-select-value,
+  .mat-mdc-select-arrow {
     color: #fff;
   }
 }

apps/dsp-app/src/app/main/action/login-form/login-form.component.spec.ts

@@ -2,7 +2,7 @@
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { ReactiveFormsModule } from '@angular/forms';
 import { MatDialogModule } from '@angular/material/dialog';
-import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
+import { MatInputModule } from '@angular/material/input';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { RouterTestingModule } from '@angular/router/testing';
@@ -43,7 +43,7 @@
 
     loggedIn: boolean;
 
     ngOnInit() {}
 
     // if response is true, the login was successful
     // assign loggedIn to the response
@@ -122,7 +122,7 @@
             }
         );
         spyOn(sessionStorage, 'setItem').and.callFake(
             (key: string, value: string): string => (store[key] = <any>value)
         );
         spyOn(sessionStorage, 'clear').and.callFake(() => {
             store = {};

apps/dsp-app/src/app/main/action/string-literal-input/string-literal-input.component.scss

@@ -1,4 +1,4 @@
-.mat-form-field {
+.mat-mdc-form-field {
   width: 100% !important;
 }
 

apps/dsp-app/src/app/main/action/string-literal-input/string-literal-input.component.spec.ts

@@ -5,9 +5,9 @@ import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
 import { ReactiveFormsModule } from '@angular/forms';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import { MatButtonHarness } from '@angular/material/button/testing';
-import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
-import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
+import { MatInputModule } from '@angular/material/input';
 import { MatLegacyInputHarness as MatInputHarness } from '@angular/material/legacy-input/testing';
 import { MatMenuModule } from '@angular/material/menu';
 import { By } from '@angular/platform-browser';

apps/dsp-app/src/app/main/dialog/dialog.component.spec.ts

@@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
 import { ReactiveFormsModule } from '@angular/forms';
-import { MatLegacyAutocompleteModule as MatAutocompleteModule } from '@angular/material/legacy-autocomplete';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatButtonModule } from '@angular/material/button';
 import { MatChipsModule } from '@angular/material/chips';
 import {
@@ -10,11 +10,11 @@ import {
     MAT_DIALOG_DATA,
 } from '@angular/material/dialog';
 import { MatDividerModule } from '@angular/material/divider';
-import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
-import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
+import { MatInputModule } from '@angular/material/input';
 import { MatListModule } from '@angular/material/list';
-import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
+import { MatSelectModule } from '@angular/material/select';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { MatTreeModule } from '@angular/material/tree';

apps/dsp-app/src/app/main/directive/existing-name/existing-name.directive.spec.ts

@@ -8,8 +8,8 @@ import {
     FormsModule,
 } from '@angular/forms';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
-import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import {
     ExistingNameDirective,

apps/dsp-app/src/app/material-module.ts

@@ -2,7 +2,7 @@
 import { DragDropModule } from '@angular/cdk/drag-drop';
 import { NgModule } from '@angular/core';
 // material modules
-import { MatLegacyAutocompleteModule as MatAutocompleteModule } from '@angular/material/legacy-autocomplete';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatBadgeModule } from '@angular/material/badge';
 import { MatButtonModule } from '@angular/material/button';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
@@ -12,15 +12,15 @@ import { MatChipsModule } from '@angular/material/chips';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatDialogModule } from '@angular/material/dialog';
 import { MatExpansionModule } from '@angular/material/expansion';
-import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatGridListModule } from '@angular/material/grid-list';
 import { MatIconModule } from '@angular/material/icon';
-import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
+import { MatInputModule } from '@angular/material/input';
 import { MatListModule } from '@angular/material/list';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatPaginatorModule } from '@angular/material/paginator';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
-import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
+import { MatSelectModule } from '@angular/material/select';
 import { MatSidenavModule } from '@angular/material/sidenav';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { MatSliderModule } from '@angular/material/slider';

apps/dsp-app/src/app/project/collaboration/add-user/add-user.component.spec.ts

@@ -1,9 +1,9 @@
 import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
 import { ReactiveFormsModule } from '@angular/forms';
-import { MatLegacyAutocompleteModule as MatAutocompleteModule } from '@angular/material/legacy-autocomplete';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatDialogModule } from '@angular/material/dialog';
 import { MatIconModule } from '@angular/material/icon';
-import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
+import { MatInputModule } from '@angular/material/input';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { RouterTestingModule } from '@angular/router/testing';

apps/dsp-app/src/app/project/collaboration/collaboration.component.spec.ts

@@ -1,13 +1,13 @@
 import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
 import { ReactiveFormsModule } from '@angular/forms';
-import { MatLegacyAutocompleteModule as MatAutocompleteModule } from '@angular/material/legacy-autocomplete';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatButtonModule } from '@angular/material/button';
 import { MatChipsModule } from '@angular/material/chips';
 import { MatDialogModule } from '@angular/material/dialog';
 import { MatIconModule } from '@angular/material/icon';
-import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
+import { MatInputModule } from '@angular/material/input';
 import { MatMenuModule } from '@angular/material/menu';
-import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
+import { MatSelectModule } from '@angular/material/select';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { ActivatedRoute } from '@angular/router';

apps/dsp-app/src/app/project/collaboration/select-group/select-group.component.spec.ts

@@ -1,8 +1,8 @@
 import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
 import { ReactiveFormsModule } from '@angular/forms';
 import { MatDialogModule } from '@angular/material/dialog';
-import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
-import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatSelectModule } from '@angular/material/select';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { RouterTestingModule } from '@angular/router/testing';

apps/dsp-app/src/app/project/list/list-info-form/list-info-form.component.spec.ts

@@ -11,7 +11,7 @@ import {
     MAT_DIALOG_DATA,
 } from '@angular/material/dialog';
 import { MatIconModule } from '@angular/material/icon';
-import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
+import { MatInputModule } from '@angular/material/input';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { ActivatedRoute } from '@angular/router';

apps/dsp-app/src/app/project/list/list-item-form/edit-list-item/edit-list-item.component.spec.ts

@@ -1,7 +1,7 @@
 import { Component, DebugElement, Input, ViewChild } from '@angular/core';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { MatDialogModule } from '@angular/material/dialog';
-import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { By } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

apps/dsp-app/src/app/project/list/list.component.spec.ts

@@ -12,7 +12,7 @@ import {
 } from '@angular/material/dialog';
 import { MatDialogHarness } from '@angular/material/dialog/testing';
 import { MatIconModule } from '@angular/material/icon';
-import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
+import { MatSelectModule } from '@angular/material/select';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatTooltipModule } from '@angular/material/tooltip';

apps/dsp-app/src/app/project/ontology/ontology.component.spec.ts

@@ -3,13 +3,13 @@ import { Component, Input } from '@angular/core';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { ReactiveFormsModule } from '@angular/forms';
 import { MatCardModule } from '@angular/material/card';
-import { MatLegacyOptionModule as MatOptionModule } from '@angular/material/legacy-core';
+import { MatOptionModule } from '@angular/material/core';
 import { MatDialogModule } from '@angular/material/dialog';
 import { MatDividerModule } from '@angular/material/divider';
-import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatMenuModule } from '@angular/material/menu';
-import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
+import { MatSelectModule } from '@angular/material/select';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatTooltipModule } from '@angular/material/tooltip';

apps/dsp-app/src/app/project/ontology/property-form/property-form.component.spec.ts

@@ -2,14 +2,14 @@ import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { Component, DebugElement, ViewChild, Input } from '@angular/core';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { ReactiveFormsModule } from '@angular/forms';
-import { MatLegacyAutocompleteModule as MatAutocompleteModule } from '@angular/material/legacy-autocomplete';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatButtonModule } from '@angular/material/button';
-import { MatLegacyOptionModule as MatOptionModule } from '@angular/material/legacy-core';
+import { MatOptionModule } from '@angular/material/core';
 import { MatDialogModule } from '@angular/material/dialog';
-import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
-import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
-import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
+import { MatInputModule } from '@angular/material/input';
+import { MatSelectModule } from '@angular/material/select';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { By } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';