Update to angular 15 & related frontend packages

src-ui/.browserslistrc

@@ -1,18 +0,0 @@
-# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
-# For additional information regarding the format and rule options, please see:
-# https://github.com/browserslist/browserslist#queries
-
-# For the full list of supported browsers by the Angular framework, please see:
-# https://angular.io/guide/browser-support
-
-# You can see what browsers were selected by your queries by running:
-#   npx browserslist
-
-last 1 Chrome version
-last 1 Firefox version
-last 2 Edge major versions
-last 2 Safari major versions
-last 2 iOS major versions
-Firefox ESR
-not IE 9-10 # Angular support for IE 9-10 has been deprecated and will be removed as of Angular v11. To opt-in, remove the 'not' prefix on this line.
-not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line.

src-ui/angular.json

@@ -193,5 +193,13 @@
     "schematicCollections": [
       "@angular-eslint/schematics"
     ]
+  },
+  "schematics": {
+    "@angular-eslint/schematics:application": {
+      "setParserOptionsProject": true
+    },
+    "@angular-eslint/schematics:library": {
+      "setParserOptionsProject": true
+    }
   }
 }

src-ui/package.json

@@ -13,46 +13,46 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/common": "~14.2.8",
+    "@angular/common": "~15.1.0",
-    "@angular/compiler": "~14.2.8",
+    "@angular/compiler": "~15.1.0",
-    "@angular/core": "~14.2.8",
+    "@angular/core": "~15.1.0",
-    "@angular/forms": "~14.2.8",
+    "@angular/forms": "~15.1.0",
-    "@angular/localize": "~14.2.8",
+    "@angular/localize": "~15.1.0",
-    "@angular/platform-browser": "~14.2.8",
+    "@angular/platform-browser": "~15.1.0",
-    "@angular/platform-browser-dynamic": "~14.2.8",
+    "@angular/platform-browser-dynamic": "~15.1.0",
-    "@angular/router": "~14.2.8",
+    "@angular/router": "~15.1.0",
-    "@ng-bootstrap/ng-bootstrap": "^13.0.0",
+    "@ng-bootstrap/ng-bootstrap": "^14.0.1",
-    "@ng-select/ng-select": "^9.0.2",
+    "@ng-select/ng-select": "^10.0.1",
     "@ngneat/dirty-check-forms": "^3.0.3",
     "@popperjs/core": "^2.11.6",
-    "bootstrap": "^5.2.1",
+    "bootstrap": "^5.2.3",
     "file-saver": "^2.0.5",
     "ng2-pdf-viewer": "^9.1.2",
     "ngx-color": "^8.0.3",
-    "ngx-cookie-service": "^14.0.1",
+    "ngx-cookie-service": "^15.0.0",
     "ngx-file-drop": "^14.0.2",
-    "ngx-ui-tour-ng-bootstrap": "^11.1.0",
+    "ngx-ui-tour-ng-bootstrap": "^12.0.0",
-    "rxjs": "~7.5.7",
+    "rxjs": "^7.8.0",
     "tslib": "^2.4.1",
     "uuid": "^9.0.0",
     "zone.js": "~0.11.8"
   },
   "devDependencies": {
-    "@angular-builders/jest": "14.1.0",
+    "@angular-builders/jest": "15.0.0",
-    "@angular-devkit/build-angular": "~14.2.7",
+    "@angular-devkit/build-angular": "~15.1.0",
-    "@angular-eslint/builder": "14.4.0",
+    "@angular-eslint/builder": "15.1.0",
-    "@angular-eslint/eslint-plugin": "14.4.0",
+    "@angular-eslint/eslint-plugin": "15.1.0",
-    "@angular-eslint/eslint-plugin-template": "14.4.0",
+    "@angular-eslint/eslint-plugin-template": "15.1.0",
-    "@angular-eslint/schematics": "14.4.0",
+    "@angular-eslint/schematics": "15.1.0",
-    "@angular-eslint/template-parser": "14.4.0",
+    "@angular-eslint/template-parser": "15.1.0",
-    "@angular/cli": "~14.2.7",
+    "@angular/cli": "~15.1.0",
-    "@angular/compiler-cli": "~14.2.8",
+    "@angular/compiler-cli": "~15.1.0",
     "@types/jest": "28.1.6",
     "@types/node": "^18.7.23",
-    "@typescript-eslint/eslint-plugin": "5.47.1",
+    "@typescript-eslint/eslint-plugin": "^5.43.0",
-    "@typescript-eslint/parser": "5.47.1",
+    "@typescript-eslint/parser": "^5.43.0",
     "concurrently": "7.4.0",
-    "eslint": "^8.28.0",
+    "eslint": "^8.31.0",
     "jest": "28.1.3",
     "jest-environment-jsdom": "^29.2.2",
     "jest-preset-angular": "^12.2.3",

src-ui/src/app/app-routing.module.ts

@@ -61,7 +61,7 @@ const routes: Routes = [
 ]
 
 @NgModule({
-  imports: [RouterModule.forRoot(routes, { relativeLinkResolution: 'legacy' })],
+  imports: [RouterModule.forRoot(routes)],
   exports: [RouterModule],
 })
 export class AppRoutingModule {}

src-ui/src/app/app.module.ts

@@ -200,7 +200,7 @@ function initializeApp(settings: SettingsService) {
     PdfViewerModule,
     NgSelectModule,
     ColorSliderModule,
-    TourNgBootstrapModule.forRoot(),
+    TourNgBootstrapModule,
   ],
   providers: [
     {

src-ui/src/styles.scss

@@ -509,6 +509,10 @@ table.table {
 
 .progress {
   background-color: var(--bs-body-bg);
+
+  .text-bg-primary {
+    background-color: var(--bs-primary) !important;
+  }
 }
 
 .ngb-dp-header,

src-ui/tsconfig.json

@@ -10,12 +10,13 @@
     "experimentalDecorators": true,
     "moduleResolution": "node",
     "importHelpers": true,
-    "target": "es2015",
+    "target": "ES2022",
     "module": "es2020",
     "lib": [
-      "es2018",
+      "es2020",
       "dom"
-    ]
+    ],
+    "useDefineForClassFields": false
   },
   "angularCompilerOptions": {
     "enableI18nLegacyMessageIdFormat": false,