update npm version

package.json

@@ -11,67 +11,63 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^13.0.0",
+    "@angular/animations": "^13.2.2",
     "@angular/cdk": "^13.2.2",
-    "@angular/common": "^13.0.0",
-    "@angular/compiler": "^13.0.0",
-    "@angular/core": "^13.0.0",
+    "@angular/common": "^13.2.2",
+    "@angular/compiler": "^13.2.2",
+    "@angular/core": "^13.2.2",
     "@angular/fire": "^7.2.1",
-    "@angular/forms": "^13.0.0",
+    "@angular/forms": "^13.2.2",
     "@angular/material": "^13.2.2",
-    "@angular/platform-browser": "^13.0.0",
-    "@angular/platform-browser-dynamic": "^13.0.0",
-    "@angular/router": "^13.0.0",
-    "@angular/service-worker": "^13.0.0",
-    "@fortawesome/angular-fontawesome": "^0.6.1",
-    "@fortawesome/fontawesome-svg-core": "^1.2.28",
-    "@fortawesome/free-solid-svg-icons": "^5.13.0",
-    "docx": "^6.0.3",
-    "firebase": "^9.4.0",
+    "@angular/platform-browser": "^13.2.2",
+    "@angular/platform-browser-dynamic": "^13.2.2",
+    "@angular/router": "^13.2.2",
+    "@angular/service-worker": "^13.2.2",
+    "@fortawesome/angular-fontawesome": "^0.10.1",
+    "@fortawesome/fontawesome-svg-core": "^1.3.0",
+    "@fortawesome/free-solid-svg-icons": "^6.0.0",
+    "docx": "^7.3.0",
+    "firebase": "^9.6.6",
     "lodash": "^4.17.21",
-    "ngx-mat-select-search": "^3.3.0",
+    "ngx-mat-select-search": "^4.0.2",
     "ngx-perfect-scrollbar": "^10.1.1",
-    "ngx-swiper-wrapper": "^10.0.0",
     "rxjs": "~7.5.4",
-    "tslib": "^2.0.0",
+    "tslib": "^2.3.1",
     "zone.js": "~0.11.4",
-    "rxfire": "^6.0.0"
+    "rxfire": "^6.0.3"
   },
   "devDependencies": {
     "@angular-devkit/architect": "0.1302.3",
     "@angular-devkit/build-angular": "~13.2.3",
-    "@angular-eslint/builder": "12.0.0",
-    "@angular-eslint/eslint-plugin": "12.0.0",
-    "@angular-eslint/eslint-plugin-template": "12.0.0",
-    "@angular-eslint/schematics": "12.0.0",
-    "@angular-eslint/template-parser": "12.0.0",
+    "@angular-eslint/builder": "13.1.0",
+    "@angular-eslint/eslint-plugin": "13.1.0",
+    "@angular-eslint/eslint-plugin-template": "13.1.0",
+    "@angular-eslint/schematics": "13.1.0",
+    "@angular-eslint/template-parser": "13.1.0",
     "@angular/cli": "~13.2.3",
-    "@angular/compiler-cli": "^13.0.0",
-    "@angular/language-service": "^13.0.0",
-    "@types/jasmine": "~3.6.0",
-    "@types/jasminewd2": "~2.0.3",
-    "@types/lodash": "^4.14.171",
-    "@types/node": "^12.12.36",
-    "@typescript-eslint/eslint-plugin": "^4.29.1",
-    "@typescript-eslint/parser": "^4.29.1",
-    "eslint": "^7.26.0",
+    "@angular/compiler-cli": "^13.2.2",
+    "@angular/language-service": "^13.2.2",
+    "@types/jasmine": "~3.10.3",
+    "@types/jasminewd2": "~2.0.10",
+    "@types/lodash": "^4.14.178",
+    "@typescript-eslint/eslint-plugin": "^5.11.0",
+    "@typescript-eslint/parser": "^5.11.0",
+    "eslint": "^8.9.0",
     "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-prettier": "^3.4.0",
-    "firebase-tools": "^9.23.3",
+    "eslint-plugin-prettier": "^4.0.0",
+    "firebase-tools": "^10.2.0",
     "fuzzy": "^0.1.3",
-    "inquirer": "^6.2.2",
-    "inquirer-autocomplete-prompt": "^1.0.1",
-    "jasmine-core": "~3.6.0",
-    "jasmine-spec-reporter": "~5.0.0",
+    "inquirer": "^8.2.0",
+    "inquirer-autocomplete-prompt": "^1.4.0",
+    "jasmine-core": "~4.0.0",
+    "jasmine-spec-reporter": "~7.0.0",
     "karma": "~6.3.16",
     "karma-chrome-launcher": "~3.1.0",
-    "karma-coverage-istanbul-reporter": "~3.0.2",
-    "karma-jasmine": "~4.0.0",
-    "karma-jasmine-html-reporter": "^1.5.0",
-    "prettier": "^2.3.0",
+    "karma-coverage-istanbul-reporter": "~3.0.3",
+    "karma-jasmine": "~4.0.1",
+    "karma-jasmine-html-reporter": "^1.7.0",
+    "prettier": "^2.5.1",
     "protractor": "~7.0.0",
-    "swiper": "^6.6.2",
-    "ts-node": "~7.0.0",
     "typescript": "~4.5.5"
   }
 }

src/app/modules/guest/guest.component.html

@@ -1,11 +1,11 @@
 <div *ngIf="songs$ | async as songs" class="view">
-  <swiper>
-    <div *ngFor="let song of songs" class="song">
-      <app-song-text
-        [showSwitch]="false"
-        [text]="song"
-        chordMode="hide"
-      ></app-song-text>
-    </div>
-  </swiper>
+<!--  <swiper>-->
+<!--    <div *ngFor="let song of songs" class="song">-->
+<!--      <app-song-text-->
+<!--        [showSwitch]="false"-->
+<!--        [text]="song"-->
+<!--        chordMode="hide"-->
+<!--      ></app-song-text>-->
+<!--    </div>-->
+<!--  </swiper>-->
 </div>

src/app/modules/guest/guest.module.ts

@@ -2,27 +2,10 @@ import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {GuestComponent} from './guest.component';
 import {RouterModule} from '@angular/router';
-import {SWIPER_CONFIG, SwiperConfigInterface, SwiperModule} from 'ngx-swiper-wrapper';
 import {SongTextModule} from '../../widget-modules/components/song-text/song-text.module';
 
-const DEFAULT_SWIPER_CONFIG: SwiperConfigInterface = {
-  direction: 'horizontal',
-  slidesPerView: 1,
-  keyboard: true,
-  mousewheel: true,
-  scrollbar: false,
-  navigation: true,
-  pagination: false,
-};
-
 @NgModule({
   declarations: [GuestComponent],
-  imports: [CommonModule, RouterModule.forChild([{path: '', component: GuestComponent}]), SwiperModule, SongTextModule],
-  providers: [
-    {
-      provide: SWIPER_CONFIG,
-      useValue: DEFAULT_SWIPER_CONFIG,
-    },
-  ],
+  imports: [CommonModule, RouterModule.forChild([{path: '', component: GuestComponent}]), SongTextModule],
 })
 export class GuestModule {}

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

@@ -5,7 +5,7 @@
     <ng-container *ngIf="shows$ | async as shows">
       <app-card
         *ngIf="getPrivateSongs(shows).length > 0"
-        [@fade]
+        @fade
         [padding]="false"
         heading="meine Veranstaltungen"
       >
@@ -21,12 +21,12 @@
   <ng-container *ngIf="shows$ | async as shows">
     <app-card
       *ngIf="getPublicShows(shows).length > 0"
-      [@fade]
+      @fade
       [padding]="false"
       heading="veröffentlichte Veranstaltungen"
     >
       <app-list-item
-        *ngFor="let show of getPublicShows(shows) | sortBy: 'desc':'date'"
+        *ngFor="let show of getPublicShows(shows) | sortBy: 'desc':'date'; trackBy: trackBy"
         [routerLink]="show.id"
         [show]="show"
       ></app-list-item>

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

@@ -24,4 +24,6 @@ export class ListComponent {
   public getPrivateSongs(songs: Show[]): Show[] {
     return songs.filter(_ => !_.published);
   }
+
+  public trackBy = (index: number, show: unknown) => (show as Show).id;
 }

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

@@ -13,7 +13,7 @@
     </p>
     <div *ngIf="showSongs" class="song-list" cdkDropList [cdkDropListDisabled]="show.published"
          (cdkDropListDropped)="drop($event, show)">
-      <div *ngFor="let song of orderedShowSongs(show); let i = index" class="song-row" cdkDrag>
+      <div *ngFor="let song of orderedShowSongs(show); let i = index; trackBy: trackBy" class="song-row" cdkDrag>
         <app-song
           [showSong]="song"
           [showId]="showId"

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

@@ -115,4 +115,6 @@ export class ShowComponent implements OnInit {
     if (!list) return [];
     return show.order.map(_ => list.filter(f => f.id === _)[0]);
   }
+
+  public trackBy = (index: number, show: ShowSong) => show.id;
 }

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

@@ -1,11 +1,11 @@
-<div *ngIf="songs$ | async as songs" [@fade]>
+<div *ngIf="songs$ | async as songs" @fade>
   <app-list-header [anyFilterActive]="anyFilterActive">
     <app-filter [songs]="songs" route="songs"></app-filter>
   </app-list-header>
 
   <app-card [padding]="false">
     <app-list-item
-      *ngFor="let song of songs"
+      *ngFor="let song of songs; trackBy: trackBy"
       [routerLink]="song.id"
       [song]="song"
     ></app-list-item>

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

@@ -73,4 +73,5 @@ export class SongListComponent implements OnInit, OnDestroy {
 
     return flagStrings.indexOf(flag) !== -1;
   }
+  public trackBy = (index: number, show: Song) => show.id;
 }