Update to Angular 18.

This commit is contained in:
Chris Witterholt 2024-06-05 08:27:42 +00:00
parent 2a480e8c3e
commit 8b45023a41
7 changed files with 1950 additions and 1786 deletions

View File

@ -25,16 +25,16 @@
"tx": "node scripts/tx.js"
},
"dependencies": {
"@angular/animations": "^17.3.9",
"@angular/cdk": "^17.3.9",
"@angular/common": "^17.3.9",
"@angular/compiler": "^17.3.9",
"@angular/core": "^17.3.9",
"@angular/forms": "^17.3.9",
"@angular/material": "^17.3.9",
"@angular/platform-browser": "^17.3.9",
"@angular/platform-browser-dynamic": "^17.3.9",
"@angular/router": "^17.3.9",
"@angular/animations": "^18.0.1",
"@angular/cdk": "^18.0.1",
"@angular/common": "^18.0.1",
"@angular/compiler": "^18.0.1",
"@angular/core": "^18.0.1",
"@angular/forms": "^18.0.1",
"@angular/material": "^18.0.1",
"@angular/platform-browser": "^18.0.1",
"@angular/platform-browser-dynamic": "^18.0.1",
"@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-eslint/builder": "^17.4.1",
"@angular-eslint/eslint-plugin": "^17.4.1",
"@angular-eslint/eslint-plugin-template": "^17.4.1",
"@angular-eslint/schematics": "^17.4.1",
"@angular-eslint/template-parser": "^17.4.1",
"@angular/cli": "~17.3.7",
"@angular/compiler-cli": "^17.3.9",
"@angular/language-service": "^17.3.9",
"@chiragrupani/karma-chromium-edge-launcher": "^2.3.1",
"@angular-devkit/build-angular": "^18.0.2",
"@angular-devkit/core": "^18.0.2",
"@angular-devkit/schematics": "^18.0.2",
"@angular-eslint/builder": "^18.0.1",
"@angular-eslint/eslint-plugin": "^18.0.1",
"@angular-eslint/eslint-plugin-template": "^18.0.1",
"@angular-eslint/schematics": "^18.0.1",
"@angular-eslint/template-parser": "^18.0.1",
"@angular/cli": "~18.0.2",
"@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",
"@typescript-eslint/eslint-plugin": "7.9.0",
"@typescript-eslint/parser": "7.9.0",
"axios": "^1.6.8",
"@types/node": "~20.14.1",
"@typescript-eslint/eslint-plugin": "7.12.0",
"@typescript-eslint/parser": "7.12.0",
"@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",

View File

@ -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});
selectorRef.afterDismissed().subscribe(result => {
const selectorRef = this.bottomSheet.open(
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();}

View File

@ -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]
})

View File

@ -6,16 +6,16 @@ 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 {
// Make DisplayMode enum visible in HTML template.
displayMode = DisplayMode;
})
export class DisplayModeSelectorComponent {
// Make DisplayMode enum visible in HTML template.
displayMode = DisplayMode;
constructor(
private bottomSheetRef: MatBottomSheetRef<DisplayModeSelectorComponent>,
@Inject(MAT_BOTTOM_SHEET_DATA) public display: Display) {}
constructor(
private bottomSheetRef: MatBottomSheetRef<DisplayModeSelectorComponent>,
@Inject(MAT_BOTTOM_SHEET_DATA) public display: Display) {}
setMode(mode: DisplayMode): void {
this.bottomSheetRef.dismiss(mode);
}
setMode(mode: DisplayMode): void {
this.bottomSheetRef.dismiss(mode);
}
}

View File

@ -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"

View File

@ -2,13 +2,13 @@
@use '@angular/material' as mat;
@include mat.core();
$olp-primary: mat.define-palette(mat.$indigo-palette, 500);
$olp-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
$olp-primary: mat.m2-define-palette(mat.$m2-indigo-palette, 500);
$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,

3636
yarn.lock

File diff suppressed because it is too large Load Diff