fixes after ng update

src/app/modules/shows/show/show.component.ts

@@ -25,7 +25,7 @@ import {
 } from '@fortawesome/free-solid-svg-icons';
 import {CdkDragDrop, moveItemInArray} from '@angular/cdk/drag-drop';
 import {fade} from '../../../animations';
-import {MatLegacyDialog as MatDialog} from '@angular/material/legacy-dialog';
+import {MatDialog} from '@angular/material/dialog';
 import {ArchiveDialogComponent} from '../dialog/archive-dialog/archive-dialog.component';
 import {closeFullscreen, openFullscreen} from '../../../services/fullscreen';
 

src/app/modules/shows/show/song/song.component.html

@@ -7,9 +7,10 @@
   <div *ngIf="!show.published && !fullscreen" class="song">
     <span class="title">{{ iSong.title }}</span>
     <span *ngIf="!edit" class="keys">
-      <span *ngIf="iSong.keyOriginal !== iSong.key">{{ iSong.keyOriginal }}&nbsp;→&nbsp;</span>
-      <mat-form-field *ngIf="keys" appearance="standard" class="keys">
-        <mat-select [formControl]="keyFormControl">
+      <span *ngIf="iSong.keyOriginal !== iSong.key">{{ iSong.keyOriginal }}&nbsp;→&nbsp;</span><span
+      (click)="openKeySelect()">{{ iSong.key }}</span>
+      <mat-form-field (click)="option.open()" *ngIf="keys" class="transpose">
+        <mat-select #option [formControl]="keyFormControl">
           <mat-option *ngFor="let key of keys" [value]="key">{{ key }}</mat-option>
         </mat-select>
       </mat-form-field>

src/app/modules/shows/show/song/song.component.less

@@ -17,8 +17,18 @@
 }
 
 .keys {
-  width: 40px;
-  margin: -24px 0 -20px 0;
+  position: relative;
+  margin-right: 10px;
+  cursor: pointer;
+
+  &:hover {
+    color: var(--color-primary);
+  }
+}
+
+.transpose {
+  height: 0;
+  position: absolute;
 }
 
 .btn-up {
@@ -54,6 +64,7 @@
   grid-area: delete;
   justify-content: flex-end;
 }
+
 .btn-edit {
   grid-area: edit;
   justify-content: flex-end;

src/app/modules/shows/show/song/song.component.ts

@@ -1,4 +1,4 @@
-import {Component, Input, OnInit} from '@angular/core';
+import {Component, Input, OnInit, ViewChild} from '@angular/core';
 import {ShowSongService} from '../../services/show-song.service';
 import {ShowSong} from '../../services/show-song';
 import {getScale} from '../../../songs/services/key.helper';
@@ -7,6 +7,7 @@ import {ChordMode} from '../../../../widget-modules/components/song-text/song-te
 import {Show} from '../../services/show';
 import {faEraser, faPenToSquare, faSave, faTrash} from '@fortawesome/free-solid-svg-icons';
 import {fade} from '../../../../animations';
+import {MatSelect} from '@angular/material/select';
 
 @Component({
   selector: 'app-song',
@@ -21,6 +22,8 @@ export class SongComponent implements OnInit {
   @Input() public index = -1;
   @Input() public fullscreen = false;
 
+  @ViewChild('option') private keyOptions: MatSelect;
+
   public keys: string[] = [];
   public faDelete = faTrash;
   public faEdit = faPenToSquare;
@@ -75,4 +78,8 @@ export class SongComponent implements OnInit {
       chordMode: value,
     });
   }
+
+  public openKeySelect(): void {
+    this.keyOptions.open();
+  }
 }

src/app/modules/shows/shows.module.ts

@@ -4,17 +4,17 @@ import {CommonModule} from '@angular/common';
 import {ShowsRoutingModule} from './shows-routing.module';
 import {NewComponent} from './new/new.component';
 import {CardModule} from '../../widget-modules/components/card/card.module';
-import {MatLegacyFormFieldModule as MatFormFieldModule} from '@angular/material/legacy-form-field';
+import {MatFormFieldModule} from '@angular/material/form-field';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {MatLegacyInputModule as MatInputModule} from '@angular/material/legacy-input';
+import {MatInputModule} from '@angular/material/input';
 import {ListComponent} from './list/list.component';
 import {ListItemComponent} from './list/list-item/list-item.component';
 import {ListHeaderModule} from '../../widget-modules/components/list-header/list-header.module';
-import {MatLegacyCheckboxModule as MatCheckboxModule} from '@angular/material/legacy-checkbox';
+import {MatCheckboxModule} from '@angular/material/checkbox';
 import {ButtonRowModule} from '../../widget-modules/components/button-row/button-row.module';
-import {MatLegacyButtonModule as MatButtonModule} from '@angular/material/legacy-button';
+import {MatButtonModule} from '@angular/material/button';
 import {MatDatepickerModule} from '@angular/material/datepicker';
-import {MatLegacySelectModule as MatSelectModule} from '@angular/material/legacy-select';
+import {MatSelectModule} from '@angular/material/select';
 import {ShowTypeTranslaterModule} from '../../widget-modules/pipes/show-type-translater/show-type-translater.module';
 import {MatNativeDateModule} from '@angular/material/core';
 import {ShowComponent} from './show/show.component';
@@ -27,15 +27,15 @@ import {AddSongModule} from '../../widget-modules/components/add-song/add-song.m
 import {ButtonModule} from '../../widget-modules/components/button/button.module';
 import {OwnerModule} from '../../services/user/owner.module';
 import {UserNameModule} from '../../services/user/user-name/user-name.module';
-import {MatLegacyMenuModule as MatMenuModule} from '@angular/material/legacy-menu';
+import {MatMenuModule} from '@angular/material/menu';
 import {DragDropModule} from '@angular/cdk/drag-drop';
 import {RoleModule} from '../../services/user/role.module';
 import {SortByModule} from '../../widget-modules/pipes/sort-by/sort-by.module';
-import {MatLegacyTooltipModule as MatTooltipModule} from '@angular/material/legacy-tooltip';
+import {MatTooltipModule} from '@angular/material/tooltip';
 import {FilterComponent} from './list/filter/filter.component';
 import {EditComponent} from './edit/edit.component';
 import {ArchiveDialogComponent} from './dialog/archive-dialog/archive-dialog.component';
-import {MatLegacyDialogModule as MatDialogModule} from '@angular/material/legacy-dialog';
+import {MatDialogModule} from '@angular/material/dialog';
 
 @NgModule({
   declarations: [NewComponent, ListComponent, ListItemComponent, ShowComponent, SongComponent, FilterComponent, EditComponent, ArchiveDialogComponent],