angular update 14.1.2

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 = '';