all: update forms, inputs, and autocomplete to mdc components

src/app/courses/add-courses/courses-step.component.html

@@ -15,7 +15,7 @@
       <mat-form-field class="full-width">
         <input matInput i18n-placeholder placeholder="Step title" maxlength="200" formControlName="stepTitle">
       </mat-form-field>
-      <mat-form-field class="full-width mat-form-field-type-no-underline">
+      <mat-form-field class="full-width mat-form-field-type-no-underline" appearance="outline">
         <planet-markdown-textbox class="full-width" i18n-placeholder placeholder="Description" [formControl]="stepForm.controls.description" imageGroup="community"></planet-markdown-textbox>
         <mat-error><planet-form-error-messages [control]="stepForm.controls.description"></planet-form-error-messages></mat-error>
       </mat-form-field>

src/app/courses/search-courses/courses-search.scss

@@ -15,7 +15,7 @@ planet-courses-search {
     display: grid;
     grid-template-rows: $label-height calc(#{$toolbar-height} - #{$label-height});
 
-    .mat-selection-list {
+    .mat-mdc-selection-list {
       height: calc(#{$toolbar-height} - #{$label-height});
       padding: 0;
       overflow-y: auto;

src/app/dashboard/dashboard-tile.component.ts

@@ -169,9 +169,9 @@ export class DashboardTileComponent implements AfterViewChecked, OnInit {
 
 @Component({
   selector: 'planet-dashboard-tile-title',
-  template: `
-    <mat-icon svgIcon={{cardType}}></mat-icon>
-    <span>{{cardTitle}}</span>
+  template: `
+    <mat-icon svgIcon={{cardType}}></mat-icon>
+    <span>{{cardTitle}}</span>
   `,
   styleUrls: [ './dashboard-tile-title.scss' ]
 })

src/app/dashboard/dashboard.component.html

@@ -11,10 +11,10 @@
     </a>
     <div class="dashboard-name" style="margin-left: 16px;">
       <a [routerLink]="['/users/profile', user.name]" class="profile-link">
-        <h1 class="mat-title">{{displayName | truncateText:(isMobile ? 20 : 40)}} <span *ngIf="!isLoading">({{visits | number}})</span></h1>
+        <h1 class="mat-headline-6">{{displayName | truncateText:(isMobile ? 20 : 40)}} <span *ngIf="!isLoading">({{visits | number}})</span></h1>
       </a>
-      <h1 class="mat-title">
-        <span class="mat-subheading-2">
+      <h1 class="mat-headline-6">
+        <span class="mat-subtitle-1">
           <ng-container *ngFor="let role of roles; last as last">
             <planet-role [role]="role"></planet-role><span *ngIf="!last">, </span>
           </ng-container>

src/app/dashboard/dashboard.scss

@@ -50,7 +50,7 @@ $top-row-height: calc(#{$dashboard-tile-width} + 0.5rem);
         display: flex;
         align-items: center;
       }
-      .mat-subheading-2 {
+      .mat-subtitle-1 {
         margin: 0;
       }
       span {

src/app/health/health-update.component.html

@@ -45,7 +45,7 @@
         </mat-form-field>
       </form>
       <form class="form-spacing" [formGroup]="healthForm">
-        <span class="full-width primary-text-color mat-body-2" i18n>Emergency Contact</span>
+        <span class="full-width primary-text-color mat-subtitle-2" i18n>Emergency Contact</span>
         <mat-form-field>
           <input matInput i18n-placeholder placeholder="Name" formControlName="emergencyContactName">
         </mat-form-field>

src/app/manager-dashboard/reports/myplanet/myplanet.scss

@@ -12,15 +12,15 @@ button {
 }
 
 @media(max-width: #{$screen-md}) {
-  .mat-form-field {
+  .mat-mdc-form-field {
     width: 100%;
   }
 
   mat-toolbar-row {
     form {
       width: 100%;
 
-      .mat-form-field {
+      .mat-mdc-form-field {
         width: 100%;
       }
     }

src/app/manager-dashboard/reports/reports-detail.component.html

@@ -135,7 +135,7 @@
         <canvas id="voicesCreatedChart"></canvas>
         <div class="reports-table-container">
           <div>
-            <h1 class="mat-title" i18n>Members</h1>
+            <h1 class="mat-headline-6" i18n>Members</h1>
             <mat-grid-list cols="2" rowHeight="2rem">
               <mat-grid-tile class="subheading label" i18n>Total Members</mat-grid-tile>
               <mat-grid-tile>{{reports?.totalUsers}}</mat-grid-tile>
@@ -171,7 +171,7 @@ <h1 class="mat-title" i18n>Members</h1>
             </mat-grid-list>
           </div>
           <div>
-            <h1 class="mat-title" i18n>Resources</h1>
+            <h1 class="mat-headline-6" i18n>Resources</h1>
             <mat-grid-list cols="2" rowHeight="2rem">
               <mat-grid-tile class="subheading label" i18n>Total Resources</mat-grid-tile>
               <mat-grid-tile>{{reports?.totalResources}}</mat-grid-tile>
@@ -204,7 +204,7 @@ <h1 class="mat-title" i18n>Resources</h1>
             </mat-grid-list>
           </div>
           <div>
-            <h1 class="mat-title" i18n>Courses</h1>
+            <h1 class="mat-headline-6" i18n>Courses</h1>
             <mat-grid-list cols="2" rowHeight="2rem">
               <mat-grid-tile class="subheading label" i18n>Total Courses</mat-grid-tile>
               <mat-grid-tile>{{reports?.totalCourses}}</mat-grid-tile>

src/app/manager-dashboard/reports/reports-detail.scss

@@ -75,7 +75,7 @@ mat-toolbar mat-form-field {
 }
 
 @media(max-width: #{$screen-md}) {
-  .mat-form-field {
+  .mat-mdc-form-field {
     width: 100%;
   }
 

src/app/manager-dashboard/reports/reports-health.component.html

@@ -5,13 +5,13 @@
   <div>
     <span><b i18n>Patients Seen:</b> {{headlineData?.unique.length}}</span>
   </div>
-  <h1 class="mat-title" i18n>Diagnoses</h1>
+  <h1 class="mat-headline-6" i18n>Diagnoses</h1>
   <div>
     <span *ngFor="let condition of conditions">
       <planet-label [label]="condition"></planet-label>: {{headlineData?.conditions[condition]}}
     </span>
   </div>
-  <h1 class="mat-title" i18n>Diagnosis Trend</h1>
+  <h1 class="mat-headline-6" i18n>Diagnosis Trend</h1>
   <div class="trend-filters">
     <span i18n>Select diagnosis to view trend:</span>
     <mat-form-field>
@@ -25,7 +25,7 @@ <h1 class="mat-title" i18n>Diagnosis Trend</h1>
   <div *ngIf="showChart" class="chart-container">
     <canvas id="diagnosesTrend" #diagnosesChart></canvas>
   </div>
-  <h1 class="mat-title" i18n>Weekly Data</h1>
+  <h1 class="mat-headline-6" i18n>Weekly Data</h1>
   <planet-reports-detail-activities
     [activitiesByDoc]="weeklyHealthData"
     activityType="health"

src/app/manager-dashboard/reports/reports.component.ts

@@ -12,10 +12,10 @@ import { trackById } from '../../shared/table-helpers';
 
 @Component({
   templateUrl: './reports.component.html',
-  styles: [ `
-    mat-panel-title {
-      align-items: center;
-    }
+  styles: [ `
+    mat-panel-title {
+      align-items: center;
+    }
   ` ],
   styleUrls: [ './reports.components.scss' ]
 })

src/app/meetups/add-meetups/meetups-add.component.ts

@@ -24,14 +24,14 @@ import { debounce } from 'rxjs/operators';
 @Component({
   selector: 'planet-meetups-add',
   templateUrl: './meetups-add.component.html',
-  styles: [ `
-    form.form-spacing {
-      width: inherit;
-    }
-    .view-container form {
-      min-width: 385px;
-      max-width: 750px;
-    }
+  styles: [ `
+    form.form-spacing {
+      width: inherit;
+    }
+    .view-container form {
+      min-width: 385px;
+      max-width: 750px;
+    }
   ` ]
 })
 export class MeetupsAddComponent implements OnInit, CanComponentDeactivate {

src/app/meetups/meetups.component.ts

@@ -17,15 +17,15 @@ import { findByIdInArray } from '../shared/utils';
 
 @Component({
   templateUrl: './meetups.component.html',
-  styles: [ `
-    /* Column Widths */
-    .mat-column-select {
-      max-width: 44px;
-    }
-    .mat-column-info {
-      max-width: 500px;
-      align-self: flex-start;
-    }
+  styles: [ `
+    /* Column Widths */
+    .mat-column-select {
+      max-width: 44px;
+    }
+    .mat-column-info {
+      max-width: 500px;
+      align-self: flex-start;
+    }
   ` ]
 })
 export class MeetupsComponent implements OnInit, AfterViewInit, OnDestroy {

src/app/page-not-found/page-not-found.component.ts

@@ -3,13 +3,13 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'planet-page-not-found',
   templateUrl: './page-not-found.component.html',
-  styles: [ `
-    :host {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      padding-top: 10vh;
-    }
+  styles: [ `
+    :host {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      padding-top: 10vh;
+    }
   ` ]
 })
 export class PageNotFoundComponent {

src/app/resources/resources-add.component.html

@@ -9,76 +9,91 @@
     <div>
       <form class="form-spacing" [formGroup]="resourceForm" novalidate>
         <mat-form-field>
-          <input matInput i18n-placeholder placeholder="Title" formControlName="title" required>
+          <mat-label i18n>Title</mat-label>
+          <input matInput formControlName="title" required>
           <mat-error><planet-form-error-messages [control]="resourceForm.controls.title"></planet-form-error-messages></mat-error>
         </mat-form-field>
         <mat-form-field>
-          <input matInput  i18n-placeholder placeholder="Author" formControlName="author">
+          <mat-label i18n>Author</mat-label>
+          <input matInput   formControlName="author">
         </mat-form-field>
         <mat-form-field>
-          <input matInput  i18n-placeholder placeholder="Year" formControlName="year">
+          <mat-label i18n>Year</mat-label>
+          <input matInput   formControlName="year">
         </mat-form-field>
         <mat-form-field class="full-width mat-form-field-type-no-underline">
-          <planet-markdown-textbox class="full-width" required="true" i18n-placeholder placeholder="Description" [formControl]="resourceForm.controls.description"></planet-markdown-textbox>
+          <mat-label i18n>Description</mat-label>
+          <planet-markdown-textbox class="full-width" required="true" [formControl]="resourceForm.controls.description"></planet-markdown-textbox>
           <mat-error><planet-form-error-messages [control]="resourceForm.controls.description"></planet-form-error-messages></mat-error>
         </mat-form-field>
         <mat-form-field class="full-width mat-form-field-type-no-underline">
           <planet-tag-input [formControl]="tags" [db]="dbName" i18n-placeholder placeholder="Labels" mode="add"></planet-tag-input>
         </mat-form-field>
         <mat-form-field>
-          <mat-select i18n-placeholder placeholder="Language" formControlName="language">
+          <mat-label i18n>Language</mat-label>
+          <mat-select formControlName="language">
             <mat-option *ngFor="let lang of languages" [value]="lang.name">{{lang.name}}</mat-option>
           </mat-select>
         </mat-form-field>
         <mat-form-field>
-          <input matInput i18n-placeholder placeholder="Publisher/Attribution" formControlName="publisher">
+          <mat-label i18n>Publisher/Attribution</mat-label>
+          <input matInput formControlName="publisher">
         </mat-form-field>
         <mat-form-field>
-          <input matInput i18n-placeholder placeholder="Link to License" formControlName="linkToLicense">
+          <mat-label i18n>Link to License</mat-label>
+          <input matInput formControlName="linkToLicense">
         </mat-form-field>
         <mat-form-field>
-          <mat-select i18n-placeholder placeholder="Subject(s)" formControlName="subject" multiple required>
+          <mat-label i18n>Subject(s)</mat-label>
+          <mat-select formControlName="subject" multiple required>
             <mat-option *ngFor="let subject of constants.subjectList" [value]="subject.value">{{subject.label}}</mat-option>
           </mat-select>
           <mat-error><planet-form-error-messages [control]="resourceForm.controls.subject"></planet-form-error-messages></mat-error>
         </mat-form-field>
         <mat-form-field>
-          <mat-select i18n-placeholder placeholder="Level(s)" formControlName="level" multiple required>
+          <mat-label i18n>Level(s)</mat-label>
+          <mat-select formControlName="level" multiple required>
             <mat-option *ngFor="let level of constants.levelList" [value]="level.value">{{level.label}}</mat-option>
           </mat-select>
           <mat-error><planet-form-error-messages [control]="resourceForm.controls.level"></planet-form-error-messages></mat-error>
         </mat-form-field>
         <mat-form-field>
-          <mat-select i18n-placeholder placeholder="Open" formControlName="openWith">
+          <mat-label i18n>Open</mat-label>
+          <mat-select formControlName="openWith">
             <mat-option *ngFor="let open of constants.openWith" [value]="open.value">
             {{ open.label }}
             </mat-option>
           </mat-select>
         </mat-form-field>
         <mat-form-field>
-          <mat-select i18n-placeholder placeholder="Resource For" formControlName="resourceFor" multiple>
+          <mat-label i18n>Resource For</mat-label>
+          <mat-select formControlName="resourceFor" multiple>
             <mat-option *ngFor="let role of constants.resourceFor" [value]="role.value">{{role.label}}</mat-option>
           </mat-select>
         </mat-form-field>
         <mat-form-field>
-          <mat-select i18n-placeholder placeholder="Media" formControlName="medium">
+          <mat-label i18n>Media</mat-label>
+          <mat-select formControlName="medium">
             <mat-option *ngFor="let medium of constants.media" [value]="medium.value">
             {{ medium.label }}
             </mat-option>
           </mat-select>
         </mat-form-field>
         <mat-form-field>
-          <mat-select i18n-placeholder placeholder="Resource Type" formControlName="resourceType">
+          <mat-label i18n>Resource Type</mat-label>
+          <mat-select formControlName="resourceType">
             <mat-option *ngFor="let type of constants.resourceType" [value]="type.value">
             {{ type.label}}
             </mat-option>
           </mat-select>
         </mat-form-field>
         <mat-form-field>
-          <input matInput i18n-placeholder placeholder="Added By" formControlName="addedBy" readonly>
+          <mat-label i18n>Added By</mat-label>
+          <input matInput formControlName="addedBy" readonly>
         </mat-form-field>
         <mat-form-field>
-          <input type="text" i18n-placeholder placeholder="Open Which File" matInput formControlName="openWhichFile" [matAutocomplete]="auto">
+          <mat-label i18n>Open Which File</mat-label>
+          <input type="text" matInput formControlName="openWhichFile" [matAutocomplete]="auto">
           <mat-autocomplete #auto="matAutocomplete">
             <mat-option *ngFor="let file of filteredZipFiles | async" [value]="file">
               {{file}}

src/app/resources/search-resources/resources-search.scss

@@ -15,7 +15,7 @@ planet-resources-search {
     display: grid;
     grid-template-rows: $label-height calc(#{$toolbar-height} - #{$label-height});
 
-    .mat-selection-list {
+    .mat-mdc-selection-list {
       height: calc(#{$toolbar-height} - #{$label-height});
       padding: 0;
       overflow-y: auto;

src/app/shared/dialogs/dialogs-form.component.html

@@ -56,7 +56,7 @@ <h1 mat-dialog-title><span><mat-icon>create</mat-icon>{{title}}</span></h1>
       </mat-form-field>
 
       <!-- Textarea -->
-      <mat-form-field *ngIf="field.type === 'markdown'" class="full-width mat-form-field-type-no-underline">
+      <mat-form-field *ngIf="field.type === 'markdown'" class="full-width mat-form-field-type-no-underline" appearance="">
         <planet-markdown-textbox matInput placeholder="{{field.placeholder}}" formControlName="{{field.name}}" [required]="field.required" [imageGroup]="field.imageGroup"></planet-markdown-textbox>
         <mat-error><planet-form-error-messages [control]="modalForm.controls[field.name]"></planet-form-error-messages></mat-error>
       </mat-form-field>

src/app/shared/dialogs/dialogs-submissions.component.ts

@@ -3,7 +3,7 @@ import { MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA } from '@angular/material/leg
 
 @Component({
   template: `
-    <h3 mat-dialog-title i18n class="mat-subheading-2">Review Previous Test Attempts</h3>
+    <h3 mat-dialog-title i18n class="mat-subtitle-1">Review Previous Test Attempts</h3>
     <mat-dialog-content>
       <planet-submissions *ngIf="view==='list'" [isDialog]="true" [parentId]="data.parentId"
         [displayedColumns]="[ 'lastUpdateTime', 'gradeTime', 'grade', 'status' ]" (submissionClick)="showSubmission($event)">

src/app/shared/forms/planet-markdown-textbox.component.ts

@@ -3,7 +3,7 @@ import {
 } from '@angular/core';
 import { ControlValueAccessor, NgControl } from '@angular/forms';
 import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
-import { MatLegacyFormFieldControl as MatFormFieldControl } from '@angular/material/legacy-form-field';
+import { MatFormFieldControl } from '@angular/material/form-field';
 import { Subject } from 'rxjs';
 import { FocusMonitor } from '@angular/cdk/a11y';
 import { DialogsImagesComponent } from '../dialogs/dialogs-images.component';

src/app/shared/forms/planet-rating-stars.component.ts

@@ -1,20 +1,20 @@
 import { Component, HostBinding, Input, OnDestroy, Optional, Self } from '@angular/core';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
-import { MatLegacyFormFieldControl as MatFormFieldControl } from '@angular/material/legacy-form-field';
+import { MatFormFieldControl } from '@angular/material/form-field';
 import { Subject } from 'rxjs';
 import { ControlValueAccessor, NgControl } from '@angular/forms';
 import { UserService } from '../user.service';
 
 @Component({
   selector: 'planet-rating-stars',
   templateUrl: './planet-rating-stars.component.html',
-  styles: [ `
-    .stars mat-icon {
-      cursor: default;
-    }
-    .stars.stars-enabled mat-icon {
-      cursor: pointer;
-    }
+  styles: [ `
+    .stars mat-icon {
+      cursor: default;
+    }
+    .stars.stars-enabled mat-icon {
+      cursor: pointer;
+    }
   ` ],
   providers: [
     { provide: MatFormFieldControl, useExisting: PlanetRatingStarsComponent }