update angular

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

@@ -14,28 +14,28 @@
         <mat-checkbox *ngIf="!useSwiper" [(ngModel)]="showText">Text anzeigen</mat-checkbox>
       </div>
       <div [class.floating]="useSwiper">
-        <app-menu-button @fade (click)="onZoomOut()" [icon]="faZoomOut" class="btn-delete btn-icon"
+        <app-menu-button (click)="onZoomOut()" @fade [icon]="faZoomOut" class="btn-delete btn-icon"
                          matTooltip="Verkleinern"></app-menu-button>
-        <app-menu-button @fade (click)="onZoomIn()" [icon]="faZoomIn" class="btn-delete btn-icon"
+        <app-menu-button (click)="onZoomIn()" @fade [icon]="faZoomIn" class="btn-delete btn-icon"
                          matTooltip="Vergrößern"></app-menu-button>
         <app-menu-button (click)="useSwiper=!useSwiper;fullscreen(useSwiper)" @fade
                          [icon]="useSwiper ? faFileLines : faFile" class="btn-delete btn-icon"
                          matTooltip="Swiper umschalten"></app-menu-button>
       </div>
     </div>
-    <div *ngIf="showSongs && !useSwiper" [cdkDropListDisabled]="show.published || showText" cdkDropList
-         class="song-list"
+    <div (cdkDropListDropped)="drop($event, show)" *ngIf="showSongs && !useSwiper" [cdkDropListDisabled]="show.published || showText"
          [style.cursor]="!(show.published || showText) ? 'drag' : 'inherit'"
          [style.font-size]="textSize + 'em'"
-         (cdkDropListDropped)="drop($event, show)">
-      <div *ngFor="let song of orderedShowSongs(show); let i = index; trackBy: trackBy" class="song-row" cdkDrag>
+         cdkDropList
+         class="song-list">
+      <div *ngFor="let song of orderedShowSongs(show); let i = index; trackBy: trackBy" cdkDrag class="song-row">
         <app-song
-          [showSong]="song"
-          [showId]="showId"
-          [showText]="showText"
-          [show]="show"
           [fullscreen]="useSwiper"
           [index]="i"
+          [showId]="showId"
+          [showSong]="song"
+          [showText]="showText"
+          [show]="show"
         ></app-song>
       </div>
     </div>
@@ -57,8 +57,8 @@
 
     <app-add-song
       *ngIf="songs && !show.published && !useSwiper"
-      [show]="show"
       [showSongs]="showSongs"
+      [show]="show"
       [songs]="songs"
     ></app-add-song>
 
@@ -80,7 +80,7 @@
           <app-button (click)="onShare(show)" *ngIf="show.published" [icon]="faShare">
             Teilen
           </app-button>
-          <app-button (click)="onChange(show.id)" [icon]="faSliders" *ngIf="!show.published">
+          <app-button (click)="onChange(show.id)" *ngIf="!show.published" [icon]="faSliders">
             Ändern
           </app-button>
         </ng-container>

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

@@ -11,7 +11,7 @@ describe('ShowComponent', () => {
       void TestBed.configureTestingModule({
         declarations: [ShowComponent],
       }).compileComponents();
-    })
+    }),
   );
 
   beforeEach(() => {

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

@@ -37,6 +37,7 @@ import {ShareDialogComponent} from '../dialog/share-dialog/share-dialog.componen
   templateUrl: './show.component.html',
   styleUrls: ['./show.component.less'],
   animations: [fade],
+  standalone: false,
 })
 export class ShowComponent implements OnInit, OnDestroy {
   public show$: Observable<Show | null> | null = null;
@@ -56,8 +57,11 @@ export class ShowComponent implements OnInit, OnDestroy {
   public faUsers = faUsers;
   public faZoomIn = faMagnifyingGlassPlus;
   public faZoomOut = faMagnifyingGlassMinus;
-  private subs: Subscription[] = [];
   public useSwiper = false;
+  public textSize = 1;
+  public faFileLines = faFileLines;
+  public faFile = faFile;
+  private subs: Subscription[] = [];
 
   public constructor(
     private activatedRoute: ActivatedRoute,
@@ -68,15 +72,16 @@ export class ShowComponent implements OnInit, OnDestroy {
     private router: Router,
     private cRef: ChangeDetectorRef,
     public dialog: MatDialog,
-    private guestShowService: GuestShowService
-  ) {}
+    private guestShowService: GuestShowService,
+  ) {
+  }
 
   public ngOnInit(): void {
     this.show$ = this.activatedRoute.params.pipe(
       map(param => param as {showId: string}),
       map(param => param.showId),
       tap((_: string) => (this.showId = _)),
-      switchMap((showId: string) => this.showService.read$(showId))
+      switchMap((showId: string) => this.showService.read$(showId)),
     );
     this.subs.push(
       this.activatedRoute.params
@@ -84,7 +89,7 @@ export class ShowComponent implements OnInit, OnDestroy {
           map(param => param as {showId: string}),
           map(param => param.showId),
           switchMap(showId => this.showSongService.list$(showId)),
-          filter(_ => !!_ && _.length > 0)
+          filter(_ => !!_ && _.length > 0),
         )
         .subscribe(_ => {
           this.showSongs = _;
@@ -96,7 +101,7 @@ export class ShowComponent implements OnInit, OnDestroy {
         .subscribe(_ => {
           this.songs = _;
           this.cRef.markForCheck();
-        })
+        }),
     );
   }
 
@@ -104,8 +109,6 @@ export class ShowComponent implements OnInit, OnDestroy {
     this.subs.forEach(_ => _.unsubscribe());
   }
 
-  public textSize = 1;
-
   public onZoomIn() {
     this.textSize += 0.1;
   }
@@ -176,9 +179,6 @@ export class ShowComponent implements OnInit, OnDestroy {
     await this.router.navigateByUrl('/shows/' + showId + '/edit');
   }
 
-  public faFileLines = faFileLines;
-  public faFile = faFile;
-
   @HostListener('document:keydown', ['$event'])
   public handleKeyboardEvent(event: KeyboardEvent) {
     const swiperEl = document.querySelector('swiper-container') as unknown as Swiper;

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

@@ -23,11 +23,11 @@
 
   <mat-form-field *ngIf="edit" appearance="outline">
     <mat-label>Songtext</mat-label>
-    <textarea matTooltip="Tonart ändern"
-              class="edit"
-              [cdkTextareaAutosize]="true"
+    <textarea [cdkTextareaAutosize]="true"
               [formControl]="editSongControl"
+              class="edit"
               matInput
+              matTooltip="Tonart ändern"
     ></textarea>
   </mat-form-field>
   <div *ngIf="edit">Es wird nur der Liedtext für dieser Veranstaltung geändert.</div>

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

@@ -11,7 +11,7 @@ describe('SongComponent', () => {
       void TestBed.configureTestingModule({
         declarations: [SongComponent],
       }).compileComponents();
-    })
+    }),
   );
 
   beforeEach(() => {

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

@@ -14,6 +14,7 @@ import {MatSelect} from '@angular/material/select';
   templateUrl: './song.component.html',
   styleUrls: ['./song.component.less'],
   animations: [fade],
+  standalone: false,
 })
 export class SongComponent implements OnInit {
   @Input() public show: Show | null = null;
@@ -21,9 +22,6 @@ export class SongComponent implements OnInit {
   @Input() public showText: boolean | null = null;
   @Input() public index = -1;
   @Input() public fullscreen = false;
-
-  @ViewChild('option') private keyOptions: MatSelect;
-
   public keys: string[] = [];
   public faDelete = faTrash;
   public faEdit = faPenToSquare;
@@ -33,8 +31,10 @@ export class SongComponent implements OnInit {
   public iSong: ShowSong | null = null;
   public edit = false;
   public editSongControl = new UntypedFormControl();
+  @ViewChild('option') private keyOptions: MatSelect;
 
-  public constructor(private showSongService: ShowSongService) {}
+  public constructor(private showSongService: ShowSongService) {
+  }
 
   @Input()
   public set showSong(song: ShowSong) {