fixes after ng update

src/app/modules/songs/song-list/song-list.module.ts

@@ -5,14 +5,14 @@ import {CardModule} from '../../../widget-modules/components/card/card.module';
 import {RouterModule} from '@angular/router';
 import {LegalTypeTranslatorModule} from '../../../widget-modules/pipes/legal-type-translator/legal-type-translator.module';
 import {ListHeaderModule} from '../../../widget-modules/components/list-header/list-header.module';
-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 {FilterComponent} from './filter/filter.component';
 import {ReactiveFormsModule} from '@angular/forms';
-import {MatLegacySelectModule as MatSelectModule} from '@angular/material/legacy-select';
+import {MatSelectModule} from '@angular/material/select';
 import {SongTypeTranslaterModule} from '../../../widget-modules/pipes/song-type-translater/song-type-translater.module';
 import {FontAwesomeModule} from '@fortawesome/angular-fontawesome';
-import {MatLegacyTooltipModule as MatTooltipModule} from '@angular/material/legacy-tooltip';
+import {MatTooltipModule} from '@angular/material/tooltip';
 import {RoleModule} from '../../../services/user/role.module';
 import {KeyTranslatorModule} from '../../../widget-modules/pipes/key-translator/key-translator.module';
 

src/app/modules/songs/song/edit/edit-song/edit-song.component.html

@@ -95,16 +95,15 @@
     </mat-form-field>
 
     <mat-form-field appearance="outline">
-      <mat-chip-list #chipList>
-        <mat-chip
+      <mat-chip-grid #chipList>
+        <mat-chip-row
           (removed)="removeFlag(flag)"
           *ngFor="let flag of flags"
           [removable]="true"
-          [selectable]="false"
         >
           {{ flag }}&nbsp;
           <fa-icon (click)="removeFlag(flag)" [icon]="faRemove"></fa-icon>
-        </mat-chip>
+        </mat-chip-row>
         <input
           (matChipInputTokenEnd)="addFlag($event)"
           [matChipInputAddOnBlur]="true"
@@ -112,7 +111,7 @@
           [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
           placeholder="Attribute"
         />
-      </mat-chip-list>
+      </mat-chip-grid>
     </mat-form-field>
 
     <div class="half">

src/app/modules/songs/song/edit/edit-song/edit-song.component.ts

@@ -7,9 +7,9 @@ import {EditService} from '../edit.service';
 import {first, map, switchMap} from 'rxjs/operators';
 import {KEYS} from '../../../services/key.helper';
 import {COMMA, ENTER} from '@angular/cdk/keycodes';
-import {MatLegacyChipInputEvent as MatChipInputEvent} from '@angular/material/legacy-chips';
+import {MatChipInputEvent} from '@angular/material/chips';
 import {faExternalLinkAlt, faSave, faTimesCircle} from '@fortawesome/free-solid-svg-icons';
-import {MatLegacyDialog as MatDialog} from '@angular/material/legacy-dialog';
+import {MatDialog} from '@angular/material/dialog';
 import {SaveDialogComponent} from './save-dialog/save-dialog.component';
 
 @Component({

src/app/modules/songs/song/edit/edit.module.ts

@@ -4,10 +4,10 @@ import {EditComponent} from './edit.component';
 import {CardModule} from '../../../../widget-modules/components/card/card.module';
 import {SongTypeTranslaterModule} from '../../../../widget-modules/pipes/song-type-translater/song-type-translater.module';
 import {ReactiveFormsModule} from '@angular/forms';
-import {MatLegacyInputModule as MatInputModule} from '@angular/material/legacy-input';
-import {MatLegacyCheckboxModule as MatCheckboxModule} from '@angular/material/legacy-checkbox';
-import {MatLegacySelectModule as MatSelectModule} from '@angular/material/legacy-select';
-import {MatLegacyButtonModule as MatButtonModule} from '@angular/material/legacy-button';
+import {MatInputModule} from '@angular/material/input';
+import {MatCheckboxModule} from '@angular/material/checkbox';
+import {MatSelectModule} from '@angular/material/select';
+import {MatButtonModule} from '@angular/material/button';
 import {ButtonRowModule} from '../../../../widget-modules/components/button-row/button-row.module';
 import {RouterModule} from '@angular/router';
 import {EditSongComponent} from './edit-song/edit-song.component';
@@ -17,13 +17,13 @@ import {FileComponent} from './edit-file/file/file.component';
 import {LegalOwnerTranslatorModule} from '../../../../widget-modules/pipes/legal-owner-translator/legal-owner-translator.module';
 import {LegalTypeTranslatorModule} from '../../../../widget-modules/pipes/legal-type-translator/legal-type-translator.module';
 import {KeyTranslatorModule} from '../../../../widget-modules/pipes/key-translator/key-translator.module';
-import {MatLegacyChipsModule as MatChipsModule} from '@angular/material/legacy-chips';
+import {MatChipsModule} from '@angular/material/chips';
 import {FontAwesomeModule} from '@fortawesome/angular-fontawesome';
 import {StatusTranslaterModule} from '../../../../widget-modules/pipes/status-translater/status-translater.module';
 import {ButtonModule} from '../../../../widget-modules/components/button/button.module';
-import {MatLegacyTooltipModule as MatTooltipModule} from '@angular/material/legacy-tooltip';
+import {MatTooltipModule} from '@angular/material/tooltip';
 import {SaveDialogComponent} from './edit-song/save-dialog/save-dialog.component';
-import {MatLegacyDialogModule as MatDialogModule} from '@angular/material/legacy-dialog';
+import {MatDialogModule} from '@angular/material/dialog';
 import {HistoryComponent} from './history/history.component';
 import {SongTextModule} from '../../../../widget-modules/components/song-text/song-text.module';
 

src/app/modules/songs/song/new/new.module.ts

@@ -3,8 +3,8 @@ import {CommonModule} from '@angular/common';
 import {NewComponent} from './new.component';
 import {CardModule} from '../../../../widget-modules/components/card/card.module';
 import {ReactiveFormsModule} from '@angular/forms';
-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 {ButtonRowModule} from '../../../../widget-modules/components/button-row/button-row.module';
 import {ButtonModule} from '../../../../widget-modules/components/button/button.module';
 import {AutofocusModule} from '../../../../widget-modules/directives/autofocus/autofocus.module';

src/app/modules/songs/song/song.component.html

@@ -40,14 +40,15 @@
         [text]="song.text"
       ></app-song-text>
 
-      <mat-chip-list
+      <mat-chip-listbox
         *appRole="['leader', 'contributor']"
         aria-label="Attribute"
       >
-        <mat-chip *ngFor="let flag of getFlags(song.flags)">{{
+        <mat-chip-option *ngFor="let flag of getFlags(song.flags)">{{
           flag
-          }}</mat-chip>
-      </mat-chip-list>
+          }}
+        </mat-chip-option>
+      </mat-chip-listbox>
 
       <div *appRole="['leader', 'contributor']" class="text">
         {{ song.comment }}

src/app/modules/songs/song/song.module.ts

@@ -3,17 +3,17 @@ import {CommonModule} from '@angular/common';
 import {SongComponent} from './song.component';
 import {CardModule} from '../../../widget-modules/components/card/card.module';
 import {SongTypeTranslaterModule} from '../../../widget-modules/pipes/song-type-translater/song-type-translater.module';
-import {MatLegacyButtonModule as MatButtonModule} from '@angular/material/legacy-button';
+import {MatButtonModule} from '@angular/material/button';
 import {ButtonRowModule} from '../../../widget-modules/components/button-row/button-row.module';
 import {RouterModule} from '@angular/router';
 import {LegalOwnerTranslatorModule} from '../../../widget-modules/pipes/legal-owner-translator/legal-owner-translator.module';
 import {SongTextModule} from '../../../widget-modules/components/song-text/song-text.module';
-import {MatLegacyChipsModule as MatChipsModule} from '@angular/material/legacy-chips';
+import {MatChipsModule} from '@angular/material/chips';
 import {RoleModule} from '../../../services/user/role.module';
 import {StatusTranslaterModule} from '../../../widget-modules/pipes/status-translater/status-translater.module';
 import {ButtonModule} from '../../../widget-modules/components/button/button.module';
 import {FileComponent} from './file/file.component';
-import {MatLegacyMenuModule as MatMenuModule} from '@angular/material/legacy-menu';
+import {MatMenuModule} from '@angular/material/menu';
 import {ShowTypeTranslaterModule} from '../../../widget-modules/pipes/show-type-translater/show-type-translater.module';
 
 @NgModule({