Merge branch 'update-to-angular-v18' into 'master'

Update to Angular 18.

See merge request openlp/web-remote!118

package.json

@@ -25,16 +25,16 @@
     "tx": "node scripts/tx.js"
   },
   "dependencies": {
-    "@angular/animations": "^17.3.9",
+    "@angular/animations": "^18.0.1",
-    "@angular/cdk": "^17.3.9",
+    "@angular/cdk": "^18.0.1",
-    "@angular/common": "^17.3.9",
+    "@angular/common": "^18.0.1",
-    "@angular/compiler": "^17.3.9",
+    "@angular/compiler": "^18.0.1",
-    "@angular/core": "^17.3.9",
+    "@angular/core": "^18.0.1",
-    "@angular/forms": "^17.3.9",
+    "@angular/forms": "^18.0.1",
-    "@angular/material": "^17.3.9",
+    "@angular/material": "^18.0.1",
-    "@angular/platform-browser": "^17.3.9",
+    "@angular/platform-browser": "^18.0.1",
-    "@angular/platform-browser-dynamic": "^17.3.9",
+    "@angular/platform-browser-dynamic": "^18.0.1",
-    "@angular/router": "^17.3.9",
+    "@angular/router": "^18.0.1",
     "@fontsource/roboto": "^5.0.13",
     "@ngx-translate/core": "^15.0.0",
     "@ngx-translate/http-loader": "^8.0.0",
@@ -44,29 +44,32 @@
     "zone.js": "^0.14.6"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^17.3.7",
+    "@angular-devkit/build-angular": "^18.0.2",
-    "@angular-eslint/builder": "^17.4.1",
+    "@angular-devkit/core": "^18.0.2",
-    "@angular-eslint/eslint-plugin": "^17.4.1",
+    "@angular-devkit/schematics": "^18.0.2",
-    "@angular-eslint/eslint-plugin-template": "^17.4.1",
+    "@angular-eslint/builder": "^18.0.1",
-    "@angular-eslint/schematics": "^17.4.1",
+    "@angular-eslint/eslint-plugin": "^18.0.1",
-    "@angular-eslint/template-parser": "^17.4.1",
+    "@angular-eslint/eslint-plugin-template": "^18.0.1",
-    "@angular/cli": "~17.3.7",
+    "@angular-eslint/schematics": "^18.0.1",
-    "@angular/compiler-cli": "^17.3.9",
+    "@angular-eslint/template-parser": "^18.0.1",
-    "@angular/language-service": "^17.3.9",
+    "@angular/cli": "~18.0.2",
-    "@chiragrupani/karma-chromium-edge-launcher": "^2.3.1",
+    "@angular/compiler-cli": "^18.0.1",
+    "@angular/language-service": "^18.0.1",
+    "@chiragrupani/karma-chromium-edge-launcher": "^2.4.1",
     "@transifex/api": "^7.1.0",
     "@types/jasmine": "~5.1.4",
     "@types/jasminewd2": "~2.0.13",
     "@types/jest": "^29.5.12",
-    "@types/node": "~20.12.12",
+    "@types/node": "~20.14.1",
-    "@typescript-eslint/eslint-plugin": "7.9.0",
+    "@typescript-eslint/eslint-plugin": "7.12.0",
-    "@typescript-eslint/parser": "7.9.0",
+    "@typescript-eslint/parser": "7.12.0",
-    "axios": "^1.6.8",
+    "@typescript-eslint/utils": "7.12.0",
+    "axios": "^1.7.2",
     "browserslist": "^4.23.0",
     "browserslist-useragent-regexp": "^4.1.3",
     "eslint": "^8.57.0",
     "eslint-plugin-import": "~2.29.1",
-    "eslint-plugin-jsdoc": "~48.2.5",
+    "eslint-plugin-jsdoc": "~48.2.7",
     "eslint-plugin-prefer-arrow": "~1.2.3",
     "jasmine-core": "~5.1.2",
     "jasmine-spec-reporter": "~7.0.0",

src/app/app.component.ts

@@ -23,7 +23,7 @@ import * as supportedBrowsers from '../assets/supportedBrowsers';
   styleUrl: './app.component.scss'
 })
 export class AppComponent implements OnInit {
-  // Make DisplayMode enum visible to html code
+  // Make DisplayMode enum visible to HTML code.
   DisplayMode = DisplayMode;
 
   state = new State();
@@ -127,8 +127,13 @@ export class AppComponent implements OnInit {
     const display = new Display();
     display.displayMode = this.state.displayMode;
     display.bigDisplayButtons = this.bigDisplayButtons;
-    const selectorRef = this.bottomSheet.open(DisplayModeSelectorComponent, {data: display});
+    const selectorRef = this.bottomSheet.open(
-    selectorRef.afterDismissed().subscribe(result => {
+      DisplayModeSelectorComponent,
+      {
+        data: display
+      }
+    );
+    selectorRef.afterDismissed().subscribe((result: DisplayMode) => {
       if (result === DisplayMode.Blank) {this.blankDisplay();}
       else if (result === DisplayMode.Desktop) {this.desktopDisplay();}
       else if (result === DisplayMode.Theme) {this.themeDisplay();}

src/app/app.module.ts

@@ -1,7 +1,7 @@
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { BrowserModule, Title } from '@angular/platform-browser';
 import { FormsModule } from '@angular/forms';
-import { HttpClientModule } from '@angular/common/http';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 import { NgModule } from '@angular/core';
 import { TitleCasePipe } from '@angular/common';
 
@@ -84,7 +84,6 @@ import { StageChordPreviewComponent } from './components/settings/stage-chord-pr
   imports: [
     BrowserModule,
     BrowserAnimationsModule,
-    HttpClientModule,
     FormsModule,
     AppRoutingModule,
     MatButtonModule,
@@ -119,7 +118,8 @@ import { StageChordPreviewComponent } from './components/settings/stage-chord-pr
     SentenceCasePipe,
     Title,
     TitleCasePipe,
-    WindowRef
+    WindowRef,
+    provideHttpClient(withInterceptorsFromDi()),
   ],
   bootstrap: [AppComponent]
 })

src/app/components/display-mode-selector/display-mode-selector.component.ts

@@ -6,8 +6,8 @@ import { Display, DisplayMode } from 'src/app/responses';
     selector: 'openlp-display-mode-sheet',
     templateUrl: 'display-mode-selector.component.html',
     styleUrl: './display-mode-selector.component.scss'
-  })
+})
-  export class DisplayModeSelectorComponent {
+export class DisplayModeSelectorComponent {
   // Make DisplayMode enum visible in HTML template.
   displayMode = DisplayMode;
 
@@ -18,4 +18,4 @@ import { Display, DisplayMode } from 'src/app/responses';
   setMode(mode: DisplayMode): void {
     this.bottomSheetRef.dismiss(mode);
   }
-  }
+}

src/app/components/slides/slide-list/slide-list.component.html

@@ -1,6 +1,6 @@
 @if (slides?.length) {
   <ng-container>
-    @for (slide of slides; track slide; let index = $index) {
+    @for (slide of slides; track index; let index = $index) {
       <openlp-slide-item
           [slide]="slide"
           [tabindex]="index"

src/styles.scss

@@ -2,13 +2,13 @@
 @use '@angular/material' as mat;
 
 @include mat.core();
-$olp-primary: mat.define-palette(mat.$indigo-palette, 500);
+$olp-primary: mat.m2-define-palette(mat.$m2-indigo-palette, 500);
-$olp-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
+$olp-accent: mat.m2-define-palette(mat.$m2-pink-palette, A200, A100, A400);
 
 // The "warn" palette is optional and defaults to red if not specified.
-$olp-warn: mat.define-palette(mat.$red-palette);
+$olp-warn: mat.m2-define-palette(mat.$m2-red-palette);
 
-$olp-theme: mat.define-light-theme((
+$olp-theme: mat.m2-define-light-theme((
   color: (
     primary: $olp-primary,
     accent: $olp-accent,