update tslint -> eslint

src/app/widget-modules/components/add-song/add-song.component.html

@@ -3,9 +3,13 @@
     <mat-label>Lied hinzufügen...</mat-label>
     <mat-select (selectionChange)="onAddSongSelectionChanged($event)">
       <mat-option>
-        <ngx-mat-select-search [formControl]="filteredSongsControl"></ngx-mat-select-search>
+        <ngx-mat-select-search
+          [formControl]="filteredSongsControl"
+        ></ngx-mat-select-search>
       </mat-option>
-      <mat-option *ngFor="let song of filteredSongs()" [value]="song.id">{{song.title}}</mat-option>
+      <mat-option *ngFor="let song of filteredSongs()" [value]="song.id">{{
+        song.title
+        }}</mat-option>
     </mat-select>
   </mat-form-field>
 </div>

src/app/widget-modules/components/add-song/add-song.component.spec.ts

@@ -6,12 +6,13 @@ describe('AddSongComponent', () => {
   let component: AddSongComponent;
   let fixture: ComponentFixture<AddSongComponent>;
 
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-      declarations: [AddSongComponent]
+  beforeEach(
+    waitForAsync(() => {
+      void TestBed.configureTestingModule({
+        declarations: [AddSongComponent],
+      }).compileComponents();
     })
-      .compileComponents();
-  }));
+  );
 
   beforeEach(() => {
     fixture = TestBed.createComponent(AddSongComponent);
@@ -20,6 +21,6 @@ describe('AddSongComponent', () => {
   });
 
   it('should create', () => {
-    expect(component).toBeTruthy();
+    void expect(component).toBeTruthy();
   });
 });

src/app/widget-modules/components/add-song/add-song.component.ts

@@ -9,7 +9,7 @@ import {ShowSongService} from '../../../modules/shows/services/show-song.service
 @Component({
   selector: 'app-add-song',
   templateUrl: './add-song.component.html',
-  styleUrls: ['./add-song.component.less']
+  styleUrls: ['./add-song.component.less'],
 })
 export class AddSongComponent {
   @Input() public songs: Song[];
@@ -18,10 +18,9 @@ export class AddSongComponent {
   @Input() public addedLive = false;
   public filteredSongsControl = new FormControl();
 
-  constructor(private showSongService: ShowSongService) {
-  }
+  public constructor(private showSongService: ShowSongService) {}
 
-  filteredSongs() {
+  public filteredSongs(): Song[] {
     const songs = this.songs
       .filter(_ => !!_)
       .filter(_ => !!_.title)
@@ -37,14 +36,13 @@ export class AddSongComponent {
         return 0;
       });
 
-    const filterValue = this.filteredSongsControl.value;
+    const filterValue = this.filteredSongsControl.value as string;
     return filterValue ? songs.filter(_ => filterSong(_, filterValue)) : songs;
   }
 
-  public async onAddSongSelectionChanged(event: MatSelectChange) {
+  public async onAddSongSelectionChanged(event: MatSelectChange): Promise<void> {
     const order = this.showSongs.reduce((oa, u) => Math.max(oa, u.order), 0) + 1;
     await this.showSongService.new$(this.showId, event.value, order, this.addedLive);
     event.source.value = null;
   }
-
 }

src/app/widget-modules/components/add-song/add-song.module.ts

@@ -6,19 +6,9 @@ import {MatSelectModule} from '@angular/material/select';
 import {NgxMatSelectSearchModule} from 'ngx-mat-select-search';
 import {ReactiveFormsModule} from '@angular/forms';
 
-
 @NgModule({
   declarations: [AddSongComponent],
-  exports: [
-    AddSongComponent
-  ],
-  imports: [
-    CommonModule,
-    MatFormFieldModule,
-    MatSelectModule,
-    NgxMatSelectSearchModule,
-    ReactiveFormsModule
-  ]
+  exports: [AddSongComponent],
+  imports: [CommonModule, MatFormFieldModule, MatSelectModule, NgxMatSelectSearchModule, ReactiveFormsModule],
 })
-export class AddSongModule {
-}
+export class AddSongModule {}

src/app/widget-modules/components/application-frame/application-frame.module.ts

@@ -10,22 +10,8 @@ import {RoleModule} from '../../../services/user/role.module';
 import {BrandComponent} from './navigation/brand/brand.component';
 
 @NgModule({
-  declarations: [
-    NavigationComponent,
-    FilterComponent,
-    LinkComponent,
-    BrandComponent
-  ],
-  imports: [
-    CommonModule,
-    RouterModule,
-    FontAwesomeModule,
-    FormsModule,
-    RoleModule
-  ],
-  exports: [
-    NavigationComponent
-  ]
+  declarations: [NavigationComponent, FilterComponent, LinkComponent, BrandComponent],
+  imports: [CommonModule, RouterModule, FontAwesomeModule, FormsModule, RoleModule],
+  exports: [NavigationComponent],
 })
-export class ApplicationFrameModule {
-}
+export class ApplicationFrameModule {}

src/app/widget-modules/components/application-frame/navigation/brand/brand.component.spec.ts

@@ -6,12 +6,13 @@ describe('BrandComponent', () => {
   let component: BrandComponent;
   let fixture: ComponentFixture<BrandComponent>;
 
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-      declarations: [BrandComponent]
+  beforeEach(
+    waitForAsync(() => {
+      void TestBed.configureTestingModule({
+        declarations: [BrandComponent],
+      }).compileComponents();
     })
-      .compileComponents();
-  }));
+  );
 
   beforeEach(() => {
     fixture = TestBed.createComponent(BrandComponent);
@@ -20,6 +21,6 @@ describe('BrandComponent', () => {
   });
 
   it('should create', () => {
-    expect(component).toBeTruthy();
+    void expect(component).toBeTruthy();
   });
 });

src/app/widget-modules/components/application-frame/navigation/brand/brand.component.ts

@@ -1,16 +1,8 @@
-import {Component, OnInit} from '@angular/core';
+import {Component} from '@angular/core';
 
 @Component({
   selector: 'app-brand',
   templateUrl: './brand.component.html',
-  styleUrls: ['./brand.component.less']
+  styleUrls: ['./brand.component.less'],
 })
-export class BrandComponent implements OnInit {
-
-  constructor() {
-  }
-
-  ngOnInit(): void {
-  }
-
-}
+export class BrandComponent {}

src/app/widget-modules/components/application-frame/navigation/filter/filter.component.html

@@ -1 +1,5 @@
-<input (ngModelChange)="valueChange($event)" [ngModel]="value" placeholder="Suche">
+<input
+  (ngModelChange)="valueChange($event)"
+  [ngModel]="value"
+  placeholder="Suche"
+/>

src/app/widget-modules/components/application-frame/navigation/filter/filter.component.spec.ts

@@ -6,12 +6,13 @@ describe('FilterComponent', () => {
   let component: FilterComponent;
   let fixture: ComponentFixture<FilterComponent>;
 
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-      declarations: [FilterComponent]
+  beforeEach(
+    waitForAsync(() => {
+      void TestBed.configureTestingModule({
+        declarations: [FilterComponent],
+      }).compileComponents();
     })
-      .compileComponents();
-  }));
+  );
 
   beforeEach(() => {
     fixture = TestBed.createComponent(FilterComponent);
@@ -20,6 +21,6 @@ describe('FilterComponent', () => {
   });
 
   it('should create', () => {
-    expect(component).toBeTruthy();
+    void expect(component).toBeTruthy();
   });
 });

src/app/widget-modules/components/application-frame/navigation/filter/filter.component.ts

@@ -4,13 +4,13 @@ import {ActivatedRoute, Router} from '@angular/router';
 @Component({
   selector: 'app-filter',
   templateUrl: './filter.component.html',
-  styleUrls: ['./filter.component.less']
+  styleUrls: ['./filter.component.less'],
 })
 export class FilterComponent {
   public value: string;
 
-  constructor(private router: Router, activatedRoute: ActivatedRoute) {
-    activatedRoute.queryParams.subscribe(_ => {
+  public constructor(private router: Router, activatedRoute: ActivatedRoute) {
+    activatedRoute.queryParams.subscribe((_: {q: string}) => {
       if (_.q) {
         this.value = _.q;
       }
@@ -18,7 +18,10 @@ export class FilterComponent {
   }
 
   public async valueChange(text: string): Promise<void> {
-    const route = this.router.createUrlTree(['songs'], {queryParams: {q: text}, queryParamsHandling: 'merge'});
+    const route = this.router.createUrlTree(['songs'], {
+      queryParams: {q: text},
+      queryParamsHandling: 'merge',
+    });
     await this.router.navigateByUrl(route);
   }
 }

src/app/widget-modules/components/application-frame/navigation/link/link.component.html

@@ -1,3 +1,4 @@
 <a [routerLink]="link" href="#" routerLinkActive="active">
   <fa-icon [icon]="icon"></fa-icon>
-  <span class="link-text">&nbsp;&nbsp;{{text}}</span></a>
+  <span class="link-text">&nbsp;&nbsp;{{ text }}</span></a
+>

src/app/widget-modules/components/application-frame/navigation/link/link.component.spec.ts

@@ -6,12 +6,13 @@ describe('LinkComponent', () => {
   let component: LinkComponent;
   let fixture: ComponentFixture<LinkComponent>;
 
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-      declarations: [LinkComponent]
+  beforeEach(
+    waitForAsync(() => {
+      void TestBed.configureTestingModule({
+        declarations: [LinkComponent],
+      }).compileComponents();
     })
-      .compileComponents();
-  }));
+  );
 
   beforeEach(() => {
     fixture = TestBed.createComponent(LinkComponent);
@@ -20,6 +21,6 @@ describe('LinkComponent', () => {
   });
 
   it('should create', () => {
-    expect(component).toBeTruthy();
+    void expect(component).toBeTruthy();
   });
 });

src/app/widget-modules/components/application-frame/navigation/link/link.component.ts

@@ -4,7 +4,7 @@ import {IconProp} from '@fortawesome/fontawesome-svg-core';
 @Component({
   selector: 'app-link',
   templateUrl: './link.component.html',
-  styleUrls: ['./link.component.less']
+  styleUrls: ['./link.component.less'],
 })
 export class LinkComponent {
   @Input() public text: string;

src/app/widget-modules/components/application-frame/navigation/navigation.component.html

@@ -1,14 +1,27 @@
-<nav [class.hidden]="(windowScroll$|async)>60" class="head">
+<nav [class.hidden]="(windowScroll$ | async) > 60" class="head">
   <div class="links">
     <app-brand routerLink="/brand"></app-brand>
-    <app-link *appRole="['user','presenter', 'leader']" [icon]="faSongs" link="/songs" text="Lieder"></app-link>
-    <app-link *appRole="['leader']" [icon]="faShows" link="/shows" text="Veranstaltungen"></app-link>
-    <app-link *appRole="['presenter']" [icon]="faPresentation" link="/presentation" text="Präsentation"></app-link>
+    <app-link
+      *appRole="['user', 'presenter', 'leader']"
+      [icon]="faSongs"
+      link="/songs"
+      text="Lieder"
+    ></app-link>
+    <app-link
+      *appRole="['leader']"
+      [icon]="faShows"
+      link="/shows"
+      text="Veranstaltungen"
+    ></app-link>
+    <app-link
+      *appRole="['presenter']"
+      [icon]="faPresentation"
+      link="/presentation"
+      text="Präsentation"
+    ></app-link>
     <app-link [icon]="faUser" link="/user" text="Benutzer"></app-link>
   </div>
-  <div *appRole="['user','presenter', 'leader']" class="actions">
+  <div *appRole="['user', 'presenter', 'leader']" class="actions">
     <app-filter></app-filter>
   </div>
 </nav>
-
-

src/app/widget-modules/components/application-frame/navigation/navigation.component.spec.ts

@@ -6,12 +6,13 @@ describe('NavigationComponent', () => {
   let component: NavigationComponent;
   let fixture: ComponentFixture<NavigationComponent>;
 
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-      declarations: [NavigationComponent]
+  beforeEach(
+    waitForAsync(() => {
+      void TestBed.configureTestingModule({
+        declarations: [NavigationComponent],
+      }).compileComponents();
     })
-      .compileComponents();
-  }));
+  );
 
   beforeEach(() => {
     fixture = TestBed.createComponent(NavigationComponent);
@@ -20,6 +21,6 @@ describe('NavigationComponent', () => {
   });
 
   it('should create', () => {
-    expect(component).toBeTruthy();
+    void expect(component).toBeTruthy();
   });
 });

src/app/widget-modules/components/application-frame/navigation/navigation.component.ts

@@ -9,15 +9,18 @@ import {faChalkboard} from '@fortawesome/free-solid-svg-icons/faChalkboard';
 @Component({
   selector: 'app-navigation',
   templateUrl: './navigation.component.html',
-  styleUrls: ['./navigation.component.less']
+  styleUrls: ['./navigation.component.less'],
 })
 export class NavigationComponent {
-
   public faSongs = faMusic;
   public faShows = faPersonBooth;
   public faUser = faUserCog;
   public faPresentation = faChalkboard;
 
-  public readonly windowScroll$ = fromEvent(window, 'scroll').pipe(map(x => window.scrollY), startWith(0), distinctUntilChanged(), shareReplay(1));
-
+  public readonly windowScroll$ = fromEvent(window, 'scroll').pipe(
+    map(() => window.scrollY),
+    startWith(0),
+    distinctUntilChanged(),
+    shareReplay(1)
+  );
 }

src/app/widget-modules/components/button-row/button-row.component.spec.ts

@@ -6,12 +6,13 @@ describe('ButtonRowComponent', () => {
   let component: ButtonRowComponent;
   let fixture: ComponentFixture<ButtonRowComponent>;
 
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-      declarations: [ButtonRowComponent]
+  beforeEach(
+    waitForAsync(() => {
+      void TestBed.configureTestingModule({
+        declarations: [ButtonRowComponent],
+      }).compileComponents();
     })
-      .compileComponents();
-  }));
+  );
 
   beforeEach(() => {
     fixture = TestBed.createComponent(ButtonRowComponent);
@@ -20,6 +21,6 @@ describe('ButtonRowComponent', () => {
   });
 
   it('should create', () => {
-    expect(component).toBeTruthy();
+    void expect(component).toBeTruthy();
   });
 });

src/app/widget-modules/components/button-row/button-row.component.ts

@@ -1,16 +1,8 @@
-import {Component, OnInit} from '@angular/core';
+import {Component} from '@angular/core';
 
 @Component({
   selector: 'app-button-row',
   templateUrl: './button-row.component.html',
-  styleUrls: ['./button-row.component.less']
+  styleUrls: ['./button-row.component.less'],
 })
-export class ButtonRowComponent implements OnInit {
-
-  constructor() {
-  }
-
-  ngOnInit() {
-  }
-
-}
+export class ButtonRowComponent {}

src/app/widget-modules/components/button-row/button-row.module.ts

@@ -2,13 +2,9 @@ import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {ButtonRowComponent} from './button-row.component';
 
-
 @NgModule({
   declarations: [ButtonRowComponent],
   exports: [ButtonRowComponent],
-  imports: [
-    CommonModule
-  ]
+  imports: [CommonModule],
 })
-export class ButtonRowModule {
-}
+export class ButtonRowModule {}

src/app/widget-modules/components/button/button.component.html

@@ -1,5 +1,7 @@
 <button mat-button>
-  <span *ngIf="icon"><fa-icon [icon]="icon"></fa-icon><span class="content">&nbsp;</span></span>
+  <span *ngIf="icon"
+  ><fa-icon [icon]="icon"></fa-icon><span class="content">&nbsp;</span></span
+  >
   <span class="button-content">
     <ng-content></ng-content>
   </span>

src/app/widget-modules/components/button/button.component.spec.ts

@@ -6,12 +6,13 @@ describe('ButtonComponent', () => {
   let component: ButtonComponent;
   let fixture: ComponentFixture<ButtonComponent>;
 
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-      declarations: [ButtonComponent]
+  beforeEach(
+    waitForAsync(() => {
+      void TestBed.configureTestingModule({
+        declarations: [ButtonComponent],
+      }).compileComponents();
     })
-      .compileComponents();
-  }));
+  );
 
   beforeEach(() => {
     fixture = TestBed.createComponent(ButtonComponent);
@@ -20,6 +21,6 @@ describe('ButtonComponent', () => {
   });
 
   it('should create', () => {
-    expect(component).toBeTruthy();
+    void expect(component).toBeTruthy();
   });
 });

src/app/widget-modules/components/button/button.component.ts

@@ -4,9 +4,8 @@ import {IconProp} from '@fortawesome/fontawesome-svg-core';
 @Component({
   selector: 'app-button',
   templateUrl: './button.component.html',
-  styleUrls: ['./button.component.less']
+  styleUrls: ['./button.component.less'],
 })
 export class ButtonComponent {
-  @Input() icon: IconProp;
-
+  @Input() public icon: IconProp;
 }

src/app/widget-modules/components/button/button.module.ts

@@ -4,17 +4,9 @@ import {ButtonComponent} from './button.component';
 import {FontAwesomeModule} from '@fortawesome/angular-fontawesome';
 import {MatButtonModule} from '@angular/material/button';
 
-
 @NgModule({
   declarations: [ButtonComponent],
-  exports: [
-    ButtonComponent
-  ],
-  imports: [
-    CommonModule,
-    FontAwesomeModule,
-    MatButtonModule
-  ]
+  exports: [ButtonComponent],
+  imports: [CommonModule, FontAwesomeModule, MatButtonModule],
 })
-export class ButtonModule {
-}
+export class ButtonModule {}

src/app/widget-modules/components/card/card.component.html

@@ -1,7 +1,12 @@
 <div [class.padding]="padding" class="card">
-  <button *ngIf="closeLink" [routerLink]="closeLink" class="btn-close" mat-icon-button>
+  <button
+    *ngIf="closeLink"
+    [routerLink]="closeLink"
+    class="btn-close"
+    mat-icon-button
+  >
     <fa-icon [icon]="faClose"></fa-icon>
   </button>
-  <div *ngIf="heading" class="heading">{{heading}}</div>
+  <div *ngIf="heading" class="heading">{{ heading }}</div>
   <ng-content></ng-content>
 </div>

src/app/widget-modules/components/card/card.component.spec.ts

@@ -6,12 +6,13 @@ describe('CardComponent', () => {
   let component: CardComponent;
   let fixture: ComponentFixture<CardComponent>;
 
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-      declarations: [CardComponent]
+  beforeEach(
+    waitForAsync(() => {
+      void TestBed.configureTestingModule({
+        declarations: [CardComponent],
+      }).compileComponents();
     })
-      .compileComponents();
-  }));
+  );
 
   beforeEach(() => {
     fixture = TestBed.createComponent(CardComponent);
@@ -20,6 +21,6 @@ describe('CardComponent', () => {
   });
 
   it('should create', () => {
-    expect(component).toBeTruthy();
+    void expect(component).toBeTruthy();
   });
 });

src/app/widget-modules/components/card/card.component.ts

@@ -4,12 +4,12 @@ import {faTimes} from '@fortawesome/free-solid-svg-icons/faTimes';
 @Component({
   selector: 'app-card',
   templateUrl: './card.component.html',
-  styleUrls: ['./card.component.less']
+  styleUrls: ['./card.component.less'],
 })
 export class CardComponent {
-  @Input() padding = true;
-  @Input() heading: string;
-  @Input() closeLink: string;
+  @Input() public padding = true;
+  @Input() public heading: string;
+  @Input() public closeLink: string;
 
   public faClose = faTimes;
 }

src/app/widget-modules/components/card/card.module.ts

@@ -5,16 +5,9 @@ import {MatButtonModule} from '@angular/material/button';
 import {RouterModule} from '@angular/router';
 import {FontAwesomeModule} from '@fortawesome/angular-fontawesome';
 
-
 @NgModule({
   declarations: [CardComponent],
   exports: [CardComponent],
-  imports: [
-    CommonModule,
-    MatButtonModule,
-    RouterModule,
-    FontAwesomeModule
-  ]
+  imports: [CommonModule, MatButtonModule, RouterModule, FontAwesomeModule],
 })
-export class CardModule {
-}
+export class CardModule {}

src/app/widget-modules/components/list-header/list-header.component.html

@@ -1,6 +1,9 @@
 <div class="header">
-
-  <button (click)="onFilterClick()" [class.filter-active]="anyFilterActive" mat-icon-button>
+  <button
+    (click)="onFilterClick()"
+    [class.filter-active]="anyFilterActive"
+    mat-icon-button
+  >
     <fa-icon [icon]="faFilter"></fa-icon>
   </button>
   <button mat-icon-button routerLink="new">

src/app/widget-modules/components/list-header/list-header.component.spec.ts

@@ -6,12 +6,13 @@ describe('ListHeaderComponent', () => {
   let component: ListHeaderComponent;
   let fixture: ComponentFixture<ListHeaderComponent>;
 
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-      declarations: [ListHeaderComponent]
+  beforeEach(
+    waitForAsync(() => {
+      void TestBed.configureTestingModule({
+        declarations: [ListHeaderComponent],
+      }).compileComponents();
     })
-      .compileComponents();
-  }));
+  );
 
   beforeEach(() => {
     fixture = TestBed.createComponent(ListHeaderComponent);
@@ -20,6 +21,6 @@ describe('ListHeaderComponent', () => {
   });
 
   it('should create', () => {
-    expect(component).toBeTruthy();
+    void expect(component).toBeTruthy();
   });
 });

src/app/widget-modules/components/list-header/list-header.component.ts

@@ -1,4 +1,4 @@
-import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
+import {Component, EventEmitter, Input, Output} from '@angular/core';
 import {faFilter} from '@fortawesome/free-solid-svg-icons/faFilter';
 import {faPlus} from '@fortawesome/free-solid-svg-icons/faPlus';
 import {fade} from '../../../animations';
@@ -7,21 +7,14 @@ import {fade} from '../../../animations';
   selector: 'app-list-header',
   templateUrl: './list-header.component.html',
   styleUrls: ['./list-header.component.less'],
-  animations: [fade]
+  animations: [fade],
 })
-export class ListHeaderComponent implements OnInit {
-
+export class ListHeaderComponent {
   public faNew = faPlus;
   public faFilter = faFilter;
   public filterVisible = false;
-  @Output() filterVisibleChanged = new EventEmitter<boolean>();
-  @Input() anyFilterActive = false;
-
-  constructor() {
-  }
-
-  ngOnInit() {
-  }
+  @Output() public filterVisibleChanged = new EventEmitter<boolean>();
+  @Input() public anyFilterActive = false;
 
   public onFilterClick(): void {
     this.filterVisible = !this.filterVisible || this.anyFilterActive;

src/app/widget-modules/components/list-header/list-header.module.ts

@@ -8,16 +8,7 @@ import {CardModule} from '../card/card.module';
 
 @NgModule({
   declarations: [ListHeaderComponent],
-  exports: [
-    ListHeaderComponent
-  ],
-  imports: [
-    CommonModule,
-    FontAwesomeModule,
-    MatButtonModule,
-    RouterModule,
-    CardModule,
-  ]
+  exports: [ListHeaderComponent],
+  imports: [CommonModule, FontAwesomeModule, MatButtonModule, RouterModule, CardModule],
 })
-export class ListHeaderModule {
-}
+export class ListHeaderModule {}

src/app/widget-modules/components/logo/logo.component.spec.ts

@@ -6,12 +6,13 @@ describe('LogoComponent', () => {
   let component: LogoComponent;
   let fixture: ComponentFixture<LogoComponent>;
 
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-      declarations: [LogoComponent]
+  beforeEach(
+    waitForAsync(() => {
+      void TestBed.configureTestingModule({
+        declarations: [LogoComponent],
+      }).compileComponents();
     })
-      .compileComponents();
-  }));
+  );
 
   beforeEach(() => {
     fixture = TestBed.createComponent(LogoComponent);
@@ -20,6 +21,6 @@ describe('LogoComponent', () => {
   });
 
   it('should create', () => {
-    expect(component).toBeTruthy();
+    void expect(component).toBeTruthy();
   });
 });

src/app/widget-modules/components/logo/logo.component.ts

@@ -1,16 +1,8 @@
-import {Component, OnInit} from '@angular/core';
+import {Component} from '@angular/core';
 
 @Component({
   selector: 'app-logo',
   templateUrl: './logo.component.html',
-  styleUrls: ['./logo.component.less']
+  styleUrls: ['./logo.component.less'],
 })
-export class LogoComponent implements OnInit {
-
-  constructor() {
-  }
-
-  ngOnInit(): void {
-  }
-
-}
+export class LogoComponent {}

src/app/widget-modules/components/logo/logo.module.ts

@@ -2,15 +2,9 @@ import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {LogoComponent} from './logo.component';
 
-
 @NgModule({
   declarations: [LogoComponent],
-  exports: [
-    LogoComponent
-  ],
-  imports: [
-    CommonModule
-  ]
+  exports: [LogoComponent],
+  imports: [CommonModule],
 })
-export class LogoModule {
-}
+export class LogoModule {}

src/app/widget-modules/components/menu-button/menu-button.component.spec.ts

@@ -6,12 +6,13 @@ describe('MenuButtonComponent', () => {
   let component: MenuButtonComponent;
   let fixture: ComponentFixture<MenuButtonComponent>;
 
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-      declarations: [MenuButtonComponent]
+  beforeEach(
+    waitForAsync(() => {
+      void TestBed.configureTestingModule({
+        declarations: [MenuButtonComponent],
+      }).compileComponents();
     })
-      .compileComponents();
-  }));
+  );
 
   beforeEach(() => {
     fixture = TestBed.createComponent(MenuButtonComponent);
@@ -20,6 +21,6 @@ describe('MenuButtonComponent', () => {
   });
 
   it('should create', () => {
-    expect(component).toBeTruthy();
+    void expect(component).toBeTruthy();
   });
 });

src/app/widget-modules/components/menu-button/menu-button.component.ts

@@ -4,7 +4,7 @@ import {IconProp} from '@fortawesome/fontawesome-svg-core';
 @Component({
   selector: 'app-menu-button',
   templateUrl: './menu-button.component.html',
-  styleUrls: ['./menu-button.component.less']
+  styleUrls: ['./menu-button.component.less'],
 })
 export class MenuButtonComponent {
   @Input() public icon: IconProp;

src/app/widget-modules/components/menu-button/menu-button.module.ts

@@ -4,17 +4,9 @@ import {MenuButtonComponent} from './menu-button.component';
 import {FontAwesomeModule} from '@fortawesome/angular-fontawesome';
 import {MatButtonModule} from '@angular/material/button';
 
-
 @NgModule({
   declarations: [MenuButtonComponent],
-  exports: [
-    MenuButtonComponent
-  ],
-  imports: [
-    CommonModule,
-    FontAwesomeModule,
-    MatButtonModule
-  ]
+  exports: [MenuButtonComponent],
+  imports: [CommonModule, FontAwesomeModule, MatButtonModule],
 })
-export class MenuButtonModule {
-}
+export class MenuButtonModule {}

src/app/widget-modules/components/song-text/animation.ts

@@ -1,20 +1,13 @@
 import {animate, state, style, transition, trigger} from '@angular/animations';
 
-export const songSwitch =     // the fade-in/fade-out animation.
-  trigger('songSwitch', [
+export const songSwitch = trigger('songSwitch', [
+  // the fade-in/fade-out animation.
+  // the "in" style determines the "resting" state of the element when it is visible.
+  state('in', style({opacity: 1})),
 
-    // the "in" style determines the "resting" state of the element when it is visible.
-    state('in', style({opacity: 1})),
+  // fade in when created. this could also be written as transition('void => *')
+  transition(':enter', [style({opacity: 0}), animate(1200, style({opacity: 0})), animate(1200, style({opacity: 1}))]),
 
-    // fade in when created. this could also be written as transition('void => *')
-    transition(':enter', [
-      style({opacity: 0}),
-      animate(1200, style({opacity: 0})),
-      animate(1200, style({opacity: 1})),
-    ]),
-
-    // fade out when destroyed. this could also be written as transition('void => *')
-    transition(':leave',
-      animate(1200, style({opacity: 0}))
-    )
-  ]);
+  // fade out when destroyed. this could also be written as transition('void => *')
+  transition(':leave', animate(1200, style({opacity: 0}))),
+]);

src/app/widget-modules/components/song-text/song-text.component.html

@@ -1,33 +1,70 @@
-<div (click)="onClick()" *ngIf="sections && !fullscreen" [class.chords]="_chordMode!=='hide'"
-     class="song-text">
-
-  <button (click)="onChordClick()" *ngIf="showSwitch" class="menu" mat-icon-button>
+<div
+  (click)="onClick()"
+  *ngIf="sections && !fullscreen"
+  [class.chords]="iChordMode !== 'hide'"
+  class="song-text"
+>
+  <button
+    (click)="onChordClick()"
+    *ngIf="showSwitch"
+    class="menu"
+    mat-icon-button
+  >
     <fa-icon [icon]="faLines"></fa-icon>
   </button>
 
-
   <div [class.offset]="fullscreen" [style.top.px]="offset + 50">
-    <div #section *ngFor="let section of sections; let i = index" [class.chorus]="section.type===1" class="section">
-      <div *ngFor="let line of getLines(section)" [class.chord]="line.type===0" [class.disabled]="checkDisabled(i)"
-           class="line">{{line.text}}</div>
+    <div
+      #section
+      *ngFor="let section of sections; let i = index"
+      [class.chorus]="section.type === 1"
+      class="section"
+    >
+      <div
+        *ngFor="let line of getLines(section)"
+        [class.chord]="line.type === 0"
+        [class.disabled]="checkDisabled(i)"
+        class="line"
+      >
+        {{ line.text }}
+      </div>
     </div>
   </div>
 
   <ng-content></ng-content>
 </div>
 
-<div (click)="onClick()" *ngIf="sections && fullscreen" [@songSwitch]="sections" [class.chords]="_chordMode!=='hide'"
-     class="song-text">
-
-  <button (click)="onChordClick()" *ngIf="showSwitch" class="menu" mat-icon-button>
+<div
+  (click)="onClick()"
+  *ngIf="sections && fullscreen"
+  [@songSwitch]="sections"
+  [class.chords]="iChordMode !== 'hide'"
+  class="song-text"
+>
+  <button
+    (click)="onChordClick()"
+    *ngIf="showSwitch"
+    class="menu"
+    mat-icon-button
+  >
     <fa-icon [icon]="faLines"></fa-icon>
   </button>
 
-
   <div [class.offset]="fullscreen" [style.top.px]="offset + 50">
-    <div #section *ngFor="let section of sections; let i = index" [class.chorus]="section.type===1" class="section">
-      <div *ngFor="let line of getLines(section)" [class.chord]="line.type===0" [class.disabled]="checkDisabled(i)"
-           class="line">{{line.text}}</div>
+    <div
+      #section
+      *ngFor="let section of sections; let i = index"
+      [class.chorus]="section.type === 1"
+      class="section"
+    >
+      <div
+        *ngFor="let line of getLines(section)"
+        [class.chord]="line.type === 0"
+        [class.disabled]="checkDisabled(i)"
+        class="line"
+      >
+        {{ line.text }}
+      </div>
     </div>
   </div>
 

src/app/widget-modules/components/song-text/song-text.component.spec.ts

@@ -6,12 +6,13 @@ describe('SongTextComponent', () => {
   let component: SongTextComponent;
   let fixture: ComponentFixture<SongTextComponent>;
 
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-      declarations: [SongTextComponent]
+  beforeEach(
+    waitForAsync(() => {
+      void TestBed.configureTestingModule({
+        declarations: [SongTextComponent],
+      }).compileComponents();
     })
-      .compileComponents();
-  }));
+  );
 
   beforeEach(() => {
     fixture = TestBed.createComponent(SongTextComponent);
@@ -20,6 +21,6 @@ describe('SongTextComponent', () => {
   });
 
   it('should create', () => {
-    expect(component).toBeTruthy();
+    void expect(component).toBeTruthy();
   });
 });

src/app/widget-modules/components/song-text/song-text.component.ts

@@ -23,18 +23,16 @@ export class SongTextComponent implements OnInit {
   @Input() public showSwitch = false;
   @Input() public transpose: TransposeMode = null;
   @Output() public chordModeChanged = new EventEmitter<ChordMode>();
-  @ViewChildren('section') viewSections: QueryList<ElementRef>;
+  @ViewChildren('section') public viewSections: QueryList<ElementRef<HTMLElement>>;
   public faLines = faGripLines;
   public offset = 0;
+  public iChordMode: ChordMode = 'hide';
 
-  constructor(private textRenderingService: TextRenderingService, private elRef: ElementRef) {
-  }
-
-  public _chordMode: ChordMode = 'hide';
+  public constructor(private textRenderingService: TextRenderingService, private elRef: ElementRef<HTMLElement>) {}
 
   @Input()
   public set chordMode(value: ChordMode) {
-    this._chordMode = value ?? 'hide';
+    this.iChordMode = value ?? 'hide';
   }
 
   @Input()
@@ -42,23 +40,20 @@ export class SongTextComponent implements OnInit {
     this.sections = null;
     this.offset = 0;
     if (this.fullscreen) {
-      setTimeout(() =>
-        this.sections = this.textRenderingService.parse(value, this.transpose).sort((a, b) => a.type - b.type), 100);
+      setTimeout(() => (this.sections = this.textRenderingService.parse(value, this.transpose).sort((a, b) => a.type - b.type)), 100);
     } else {
       this.sections = this.textRenderingService.parse(value, this.transpose).sort((a, b) => a.type - b.type);
     }
   }
 
-
   public ngOnInit(): void {
     setInterval(() => {
-        if (!this.fullscreen || this.index === -1 || !this.viewSections.toArray()[this.index]) {
-          this.offset = 0;
-          return;
-        }
-        this.offset = -this.viewSections.toArray()[this.index].nativeElement.offsetTop;
+      if (!this.fullscreen || this.index === -1 || !this.viewSections.toArray()[this.index]) {
+        this.offset = 0;
+        return;
       }
-      , 100);
+      this.offset = -this.viewSections.toArray()[this.index].nativeElement.offsetTop;
+    }, 100);
   }
 
   public getLines(section: Section): Line[] {
@@ -67,7 +62,7 @@ export class SongTextComponent implements OnInit {
         return true;
       }
 
-      switch (this._chordMode) {
+      switch (this.iChordMode) {
         case 'show':
           return true;
         case 'hide':
@@ -86,7 +81,8 @@ export class SongTextComponent implements OnInit {
   }
 
   public onClick(): void {
-    scrollTo(0, this.elRef.nativeElement.offsetTop - 20);
+    const nativeElement = this.elRef.nativeElement;
+    scrollTo(0, nativeElement.offsetTop - 20);
   }
 
   public checkDisabled(i: number): boolean {
@@ -94,7 +90,7 @@ export class SongTextComponent implements OnInit {
   }
 
   private getNextChordMode(): ChordMode {
-    switch (this._chordMode) {
+    switch (this.iChordMode) {
       case 'show':
         return 'hide';
       case 'hide':

src/app/widget-modules/components/song-text/song-text.module.ts

@@ -4,15 +4,9 @@ import {SongTextComponent} from './song-text.component';
 import {FontAwesomeModule} from '@fortawesome/angular-fontawesome';
 import {MatButtonModule} from '@angular/material/button';
 
-
 @NgModule({
   declarations: [SongTextComponent],
   exports: [SongTextComponent],
-  imports: [
-    CommonModule,
-    FontAwesomeModule,
-    MatButtonModule
-  ]
+  imports: [CommonModule, FontAwesomeModule, MatButtonModule],
 })
-export class SongTextModule {
-}
+export class SongTextModule {}