angular update 14.1.2

angular.json

@@ -139,9 +139,10 @@
       }
     }
   },
-  "defaultProject": "wgenerator",
   "cli": {
     "analytics": "4047dcd7-89f4-402f-958e-e365a5505c55",
-    "defaultCollection": "@angular-eslint/schematics"
+    "schematicCollections": [
+      "@angular-eslint/schematics"
+    ]
   }
 }

package.json

@@ -4,25 +4,25 @@
   "scripts": {
     "start": "ng serve",
     "build": "ng build",
-    "deploy": "npm i && ng build --configuration production && firebase deploy",
+    "deploy": "ng build --configuration production && firebase deploy",
     "test": "ng test",
     "lint": "ng lint --fix",
     "postinstall": "ngcc"
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^13.3.1",
-    "@angular/cdk": "^13.3.2",
-    "@angular/common": "^13.3.1",
-    "@angular/compiler": "^13.3.1",
-    "@angular/core": "^13.3.1",
+    "@angular/animations": "^14.1.2",
+    "@angular/cdk": "^14.1.2",
+    "@angular/common": "^14.1.2",
+    "@angular/compiler": "^14.1.2",
+    "@angular/core": "^14.1.2",
     "@angular/fire": "^7.3.0",
-    "@angular/forms": "^13.3.1",
-    "@angular/material": "^13.3.2",
-    "@angular/platform-browser": "^13.3.1",
-    "@angular/platform-browser-dynamic": "^13.3.1",
-    "@angular/router": "^13.3.1",
-    "@angular/service-worker": "^13.3.1",
+    "@angular/forms": "^14.1.2",
+    "@angular/material": "^14.1.2",
+    "@angular/platform-browser": "^14.1.2",
+    "@angular/platform-browser-dynamic": "^14.1.2",
+    "@angular/router": "^14.1.2",
+    "@angular/service-worker": "^14.1.2",
     "@fortawesome/angular-fontawesome": "^0.10.2",
     "@fortawesome/fontawesome-svg-core": "^6.1.1",
     "@fortawesome/free-solid-svg-icons": "^6.1.1",
@@ -38,22 +38,22 @@
     "zone.js": "~0.11.5"
   },
   "devDependencies": {
-    "@angular-devkit/architect": "0.1303.1",
-    "@angular-devkit/build-angular": "~13.3.1",
-    "@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.3.1",
-    "@angular/compiler-cli": "^13.3.1",
-    "@angular/language-service": "^13.3.1",
+    "@angular-devkit/architect": "0.1401.2",
+    "@angular-devkit/build-angular": "^14.1.2",
+    "@angular-eslint/builder": "14.0.2",
+    "@angular-eslint/eslint-plugin": "14.0.2",
+    "@angular-eslint/eslint-plugin-template": "14.0.2",
+    "@angular-eslint/schematics": "14.0.2",
+    "@angular-eslint/template-parser": "14.0.2",
+    "@angular/cli": "^14.1.2",
+    "@angular/compiler-cli": "^14.1.2",
+    "@angular/language-service": "^14.1.2",
     "@types/jasmine": "~4.0.2",
     "@types/jasminewd2": "~2.0.10",
     "@types/lodash": "^4.14.181",
-    "@typescript-eslint/eslint-plugin": "^5.17.0",
-    "@typescript-eslint/parser": "^5.17.0",
-    "eslint": "^8.12.0",
+    "@typescript-eslint/eslint-plugin": "^5.29.0",
+    "@typescript-eslint/parser": "^5.29.0",
+    "eslint": "^8.18.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-prettier": "^4.0.0",
     "firebase-tools": "^10.5.0",

src/app/app.component.ts

@@ -21,7 +21,7 @@ export class AppComponent implements OnInit {
   public static hideLoader: () => void = () => document.querySelector('#load-bg')?.classList.add('hidden');
 
   public ngOnInit(): void {
-    setTimeout(() => AppComponent.hideLoader(), 800);
+    setTimeout(() => AppComponent.hideLoader(), 2000);
   }
 
   public onScoll($event: {srcElement: {scrollTop: number}}): void {

src/app/modules/presentation/remote/remote.component.less

@@ -13,7 +13,8 @@
     padding: 10px 20px;
     border-radius: 0;
     box-sizing: border-box;
-    margin: 0 -20px 10px;
+    margin: -11px -20px 10px;
+    border: 1px solid #ddd;
   }
 }
 
@@ -43,16 +44,16 @@
   overflow: hidden;
   transition: 300ms all ease-in-out;
   cursor: pointer;
-  outline: 0.5px solid #f4f4f4;
+  outline: 0.5px solid #eee;
 
   &:hover {
     .card-1;
-    outline: 0px solid transparent;
+    outline: 0 solid transparent;
   }
 
   &.active {
     .card-2;
-    outline: 0px solid transparent;
+    outline: 0 solid transparent;
 
     .head {
       background: #4286f4;
@@ -66,7 +67,7 @@
 
 .head {
   transition: 300ms all ease-in-out;
-  background: #f4f4f4;
+  background: #eee;
   padding: 10px;
   font-weight: bold;
 }
@@ -81,7 +82,7 @@
   grid-template-columns: min-content min-content auto;
 
   @media screen and (max-width: 860px) {
-    gap: 0;
+    gap: 10px;
     grid-template-columns: auto;
   }
 

src/app/modules/presentation/remote/remote.component.ts

@@ -8,7 +8,7 @@ import {faDesktop} from '@fortawesome/free-solid-svg-icons';
 import {ShowService} from '../../shows/services/show.service';
 import {ShowSong} from '../../shows/services/show-song';
 import {GlobalSettingsService} from '../../../services/global-settings.service';
-import {FormControl} from '@angular/forms';
+import {UntypedFormControl} from '@angular/forms';
 import {debounceTime, distinctUntilChanged, filter, map} from 'rxjs/operators';
 import {fade} from '../../../animations';
 import {delay} from '../../../services/delay';
@@ -38,7 +38,7 @@ export class RemoteComponent {
   public progress = false;
 
   public faDesktop = faDesktop;
-  public showControl = new FormControl();
+  public showControl = new UntypedFormControl();
 
   public trackBy(index: number, item: PresentationSong): string {
     return item.id;

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

@@ -3,7 +3,7 @@ import {ShowDataService} from '../services/show-data.service';
 import {Observable} from 'rxjs';
 import {Show} from '../services/show';
 import {ShowService} from '../services/show.service';
-import {FormControl, FormGroup, Validators} from '@angular/forms';
+import {UntypedFormControl, UntypedFormGroup, Validators} from '@angular/forms';
 import {Router} from '@angular/router';
 import {faSave} from '@fortawesome/free-solid-svg-icons';
 
@@ -16,9 +16,9 @@ export class NewComponent implements OnInit {
   public shows$: Observable<Show[]>;
   public showTypePublic = ShowService.SHOW_TYPE_PUBLIC;
   public showTypePrivate = ShowService.SHOW_TYPE_PRIVATE;
-  public form: FormGroup = new FormGroup({
-    date: new FormControl(null, Validators.required),
-    showType: new FormControl(null, Validators.required),
+  public form: UntypedFormGroup = new UntypedFormGroup({
+    date: new UntypedFormControl(null, Validators.required),
+    showType: new UntypedFormControl(null, Validators.required),
   });
   public faSave = faSave;
 

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

@@ -2,7 +2,7 @@ import {Component, Input, OnInit} from '@angular/core';
 import {ShowSongService} from '../../services/show-song.service';
 import {ShowSong} from '../../services/show-song';
 import {getScale} from '../../../songs/services/key.helper';
-import {FormControl} from '@angular/forms';
+import {UntypedFormControl} from '@angular/forms';
 import {ChordMode} from '../../../../widget-modules/components/song-text/song-text.component';
 import {Show} from '../../services/show';
 import {faEraser, faPenToSquare, faSave, faTrash} from '@fortawesome/free-solid-svg-icons';
@@ -25,10 +25,10 @@ export class SongComponent implements OnInit {
   public faEdit = faPenToSquare;
   public faSave = faSave;
   public faEraser = faEraser;
-  public keyFormControl: FormControl = new FormControl();
+  public keyFormControl: UntypedFormControl = new UntypedFormControl();
   public iSong: ShowSong | null = null;
   public edit = false;
-  public editSongControl = new FormControl();
+  public editSongControl = new UntypedFormControl();
 
   public constructor(private showSongService: ShowSongService) {}
 
@@ -40,7 +40,7 @@ export class SongComponent implements OnInit {
 
   public ngOnInit(): void {
     if (!this.iSong) return;
-    this.keyFormControl = new FormControl(this.iSong.key);
+    this.keyFormControl = new UntypedFormControl(this.iSong.key);
     this.keyFormControl.valueChanges.subscribe((value: string) => {
       if (!this.showId || !this.iSong) return;
       void this.showSongService.update$(this.showId, this.iSong.id, {key: value});

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

@@ -1,6 +1,6 @@
 import {Component, Input} from '@angular/core';
 import {ActivatedRoute, Router} from '@angular/router';
-import {FormBuilder, FormGroup} from '@angular/forms';
+import {UntypedFormBuilder, UntypedFormGroup} from '@angular/forms';
 import {SongService} from '../../services/song.service';
 import {FilterValues} from './filter-values';
 import {Song} from '../../services/song';
@@ -12,14 +12,14 @@ import {KEYS} from '../../services/key.helper';
   styleUrls: ['./filter.component.less'],
 })
 export class FilterComponent {
-  public filterFormGroup: FormGroup;
+  public filterFormGroup: UntypedFormGroup;
   @Input() public route = '/';
   @Input() public songs: Song[] = [];
   public types = SongService.TYPES;
   public legalType = SongService.LEGAL_TYPE;
   public keys = KEYS;
 
-  public constructor(private router: Router, activatedRoute: ActivatedRoute, fb: FormBuilder) {
+  public constructor(private router: Router, activatedRoute: ActivatedRoute, fb: UntypedFormBuilder) {
     this.filterFormGroup = fb.group({
       q: '',
       type: '',

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

@@ -1,6 +1,6 @@
 import {Component, OnInit} from '@angular/core';
 import {Song} from '../../../services/song';
-import {FormGroup} from '@angular/forms';
+import {UntypedFormGroup} from '@angular/forms';
 import {ActivatedRoute, Router, RouterStateSnapshot} from '@angular/router';
 import {SongService} from '../../../services/song.service';
 import {EditService} from '../edit.service';
@@ -19,7 +19,7 @@ import {SaveDialogComponent} from './save-dialog/save-dialog.component';
 })
 export class EditSongComponent implements OnInit {
   public song: Song | null = null;
-  public form: FormGroup = new FormGroup({});
+  public form: UntypedFormGroup = new UntypedFormGroup({});
   public keys = KEYS;
   public types = SongService.TYPES;
   public status = SongService.STATUS;

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

@@ -1,30 +1,30 @@
 import {Injectable} from '@angular/core';
 import {Song} from '../../services/song';
-import {FormControl, FormGroup} from '@angular/forms';
+import {UntypedFormControl, UntypedFormGroup} from '@angular/forms';
 
 @Injectable({
   providedIn: 'root',
 })
 export class EditService {
-  public createSongForm(song: Song): FormGroup {
-    return new FormGroup({
-      text: new FormControl(song.text),
-      title: new FormControl(song.title),
-      comment: new FormControl(song.comment),
-      flags: new FormControl(song.flags),
-      key: new FormControl(song.key),
-      tempo: new FormControl(song.tempo),
-      type: new FormControl(song.type),
-      status: new FormControl(song.status ?? 'draft'),
+  public createSongForm(song: Song): UntypedFormGroup {
+    return new UntypedFormGroup({
+      text: new UntypedFormControl(song.text),
+      title: new UntypedFormControl(song.title),
+      comment: new UntypedFormControl(song.comment),
+      flags: new UntypedFormControl(song.flags),
+      key: new UntypedFormControl(song.key),
+      tempo: new UntypedFormControl(song.tempo),
+      type: new UntypedFormControl(song.type),
+      status: new UntypedFormControl(song.status ?? 'draft'),
 
-      legalType: new FormControl(song.legalType),
-      legalOwner: new FormControl(song.legalOwner),
-      legalOwnerId: new FormControl(song.legalOwnerId),
+      legalType: new UntypedFormControl(song.legalType),
+      legalOwner: new UntypedFormControl(song.legalOwner),
+      legalOwnerId: new UntypedFormControl(song.legalOwnerId),
 
-      artist: new FormControl(song.artist),
-      label: new FormControl(song.label),
-      termsOfUse: new FormControl(song.termsOfUse),
-      origin: new FormControl(song.origin),
+      artist: new UntypedFormControl(song.artist),
+      label: new UntypedFormControl(song.label),
+      termsOfUse: new UntypedFormControl(song.termsOfUse),
+      origin: new UntypedFormControl(song.origin),
     });
   }
 }

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

@@ -1,6 +1,6 @@
 import {Component, OnDestroy, OnInit} from '@angular/core';
 import {faSave} from '@fortawesome/free-solid-svg-icons';
-import {FormControl, FormGroup, Validators} from '@angular/forms';
+import {UntypedFormControl, UntypedFormGroup, Validators} from '@angular/forms';
 import {SongService} from '../../services/song.service';
 import {Song} from '../../services/song';
 import {Router} from '@angular/router';
@@ -13,9 +13,9 @@ import {Subscription} from 'rxjs';
 })
 export class NewComponent implements OnInit, OnDestroy {
   public faSave = faSave;
-  public form: FormGroup = new FormGroup({
-    number: new FormControl(null, Validators.required),
-    title: new FormControl(null, Validators.required),
+  public form: UntypedFormGroup = new UntypedFormGroup({
+    number: new UntypedFormControl(null, Validators.required),
+    title: new UntypedFormControl(null, Validators.required),
   });
 
   public constructor(private songService: SongService, private router: Router) {}

src/app/modules/user/login/login.component.ts

@@ -1,5 +1,5 @@
 import {Component, OnInit} from '@angular/core';
-import {FormControl, FormGroup, Validators} from '@angular/forms';
+import {UntypedFormControl, UntypedFormGroup, Validators} from '@angular/forms';
 import {Router} from '@angular/router';
 import {UserService} from '../../../services/user/user.service';
 import {faSignInAlt, faUserPlus} from '@fortawesome/free-solid-svg-icons';
@@ -10,9 +10,9 @@ import {faSignInAlt, faUserPlus} from '@fortawesome/free-solid-svg-icons';
   styleUrls: ['./login.component.less'],
 })
 export class LoginComponent implements OnInit {
-  public form: FormGroup = new FormGroup({
-    user: new FormControl(null, [Validators.required, Validators.email]),
-    pass: new FormControl(null, [Validators.required]),
+  public form: UntypedFormGroup = new UntypedFormGroup({
+    user: new UntypedFormControl(null, [Validators.required, Validators.email]),
+    pass: new UntypedFormControl(null, [Validators.required]),
   });
   public errorMessage = '';
   public faSignIn = faSignInAlt;

src/app/modules/user/new/new.component.ts

@@ -1,5 +1,5 @@
 import {Component, OnInit} from '@angular/core';
-import {FormBuilder, FormControl, FormGroup, Validators} from '@angular/forms';
+import {UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, Validators} from '@angular/forms';
 import {UserService} from '../../../services/user/user.service';
 import {faUserPlus} from '@fortawesome/free-solid-svg-icons';
 
@@ -9,14 +9,14 @@ import {faUserPlus} from '@fortawesome/free-solid-svg-icons';
   styleUrls: ['./new.component.less'],
 })
 export class NewComponent implements OnInit {
-  public form: FormGroup = this.fb.group({
-    email: new FormControl(null, [Validators.required, Validators.email]),
-    name: new FormControl(null, [Validators.required]),
-    password: new FormControl(null, [Validators.required, Validators.minLength(6)]),
+  public form: UntypedFormGroup = this.fb.group({
+    email: new UntypedFormControl(null, [Validators.required, Validators.email]),
+    name: new UntypedFormControl(null, [Validators.required]),
+    password: new UntypedFormControl(null, [Validators.required, Validators.minLength(6)]),
   });
   public faNewUser = faUserPlus;
 
-  public constructor(private fb: FormBuilder, private userService: UserService) {}
+  public constructor(private fb: UntypedFormBuilder, private userService: UserService) {}
 
   public ngOnInit(): void {
     this.form.reset();

src/app/modules/user/password/password.component.ts

@@ -1,5 +1,5 @@
 import {Component, OnInit} from '@angular/core';
-import {FormControl, FormGroup, Validators} from '@angular/forms';
+import {UntypedFormControl, UntypedFormGroup, Validators} from '@angular/forms';
 import {Router} from '@angular/router';
 import {UserService} from '../../../services/user/user.service';
 import {faWindowRestore} from '@fortawesome/free-solid-svg-icons';
@@ -10,8 +10,8 @@ import {faWindowRestore} from '@fortawesome/free-solid-svg-icons';
   styleUrls: ['./password.component.less'],
 })
 export class PasswordComponent implements OnInit {
-  public form: FormGroup = new FormGroup({
-    user: new FormControl(null, [Validators.required, Validators.email]),
+  public form: UntypedFormGroup = new UntypedFormGroup({
+    user: new UntypedFormControl(null, [Validators.required, Validators.email]),
   });
 
   public errorMessage = '';

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

@@ -1,5 +1,5 @@
 import {Component, Input} from '@angular/core';
-import {FormControl} from '@angular/forms';
+import {UntypedFormControl} from '@angular/forms';
 import {filterSong} from '../../../services/filter.helper';
 import {MatSelectChange} from '@angular/material/select';
 import {Song} from '../../../modules/songs/services/song';
@@ -18,7 +18,7 @@ export class AddSongComponent {
   @Input() public showSongs: ShowSong[] | null = null;
   @Input() public show: Show | null = null;
   @Input() public addedLive = false;
-  public filteredSongsControl = new FormControl();
+  public filteredSongsControl = new UntypedFormControl();
 
   public constructor(private showSongService: ShowSongService, private showService: ShowService) {}
 
@@ -45,7 +45,7 @@ export class AddSongComponent {
 
   public async onAddSongSelectionChanged(event: MatSelectChange): Promise<void> {
     if (!this.show) return;
-    const newId = await this.showSongService.new$(this.show?.id, event.value, this.addedLive);
+    const newId = await this.showSongService.new$(this.show?.id, event.value as string, this.addedLive);
     await this.showService.update$(this.show?.id, {order: [...this.show.order, newId ?? '']});
     event.source.value = null;
   }

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

@@ -1,6 +1,6 @@
 import {Component, Input} from '@angular/core';
 import {IconProp} from '@fortawesome/fontawesome-svg-core';
-import {faCross} from '@fortawesome/free-solid-svg-icons/faCross';
+import {faCross} from '@fortawesome/free-solid-svg-icons';
 
 @Component({
   selector: 'app-link',

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

@@ -1,8 +1,7 @@
 import {Component} from '@angular/core';
-import {faMusic, faPersonBooth, faUserCog} from '@fortawesome/free-solid-svg-icons';
+import {faChalkboard, faMusic, faPersonBooth, faUserCog} from '@fortawesome/free-solid-svg-icons';
 import {fromEvent, Observable} from 'rxjs';
 import {distinctUntilChanged, map, shareReplay, startWith} from 'rxjs/operators';
-import {faChalkboard} from '@fortawesome/free-solid-svg-icons/faChalkboard';
 
 @Component({
   selector: 'app-navigation',

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

@@ -1,6 +1,6 @@
 import {Component, Input} from '@angular/core';
 import {IconProp} from '@fortawesome/fontawesome-svg-core';
-import {faCross} from '@fortawesome/free-solid-svg-icons/faCross';
+import {faCross} from '@fortawesome/free-solid-svg-icons';
 
 @Component({
   selector: 'app-button',

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

@@ -56,7 +56,8 @@
 }
 
 .chord {
-  color: #009;
+  color: #00b;
+  font-weight: bold;
 }
 
 .offset {

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

@@ -1,6 +1,6 @@
 import {Component, ElementRef, EventEmitter, Input, OnInit, Output, QueryList, ViewChildren} from '@angular/core';
 import {TextRenderingService} from '../../../modules/songs/services/text-rendering.service';
-import {faGripLines} from '@fortawesome/free-solid-svg-icons/faGripLines';
+import {faGripLines} from '@fortawesome/free-solid-svg-icons';
 import {songSwitch} from './animation';
 import {TransposeMode} from '../../../modules/songs/services/transpose-mode';
 import {SectionType} from '../../../modules/songs/services/section-type';

tsconfig.json

@@ -11,7 +11,7 @@
     "module": "es2020",
     "moduleResolution": "node",
     "importHelpers": true,
-    "target": "es2015",
+    "target": "es2020",
     "strict": true,
     "typeRoots": [
       "node_modules/@types"