build: upgrade angular version to v19

CI/to_be_deleted/ESS/styles.scss

@@ -30,14 +30,15 @@
 @use "./app/shared/modules/table/table-theme" as table;
 @use "./app/users/user-settings/user-settings-theme" as user-settings;
 
-$custom-typography: mat.define-typography-config(
+$custom-typography: mat.m2-define-typography-config(
   $font-family: '"Titillium Web", Calibri, sans-serif;',
 );
 // Include the common styles for Angular Material. We include this here so that you only
 // have to load a single css file for Angular Material in your app.
 // Be sure that you only ever include this mixin once!
 @include mat.typography-hierarchy($custom-typography);
-@include mat.core();
+@include mat.elevation-classes();
+@include mat.app-background();
 
 // Define the palettes for your theme using the Material Design palettes available in palette.scss
 // (imported above). For each palette, you can optionally specify a default, lighter, and darker
@@ -204,17 +205,17 @@ $red: (
   ),
 );
 
-$primary: mat.define-palette($cyan, 1000, 400, 800);
-$accent: mat.define-palette($grass, 1000, 400, 800);
-$warn: mat.define-palette($red, 100, 50, 200);
-$warn-2: mat.define-palette($yellow, 100, 50, 200);
-$header-1: mat.define-palette($navy, 1000, 400, 800);
-$header-2: mat.define-palette($forest, 1000, 400, 800);
-$header-3: mat.define-palette($orange, 1000, 400, 800);
-$header-4: mat.define-palette($purple, 1000, 400, 800);
-$hover: mat.define-palette($grey, 500, 100, 300);
+$primary: mat.m2-define-palette($cyan, 1000, 400, 800);
+$accent: mat.m2-define-palette($grass, 1000, 400, 800);
+$warn: mat.m2-define-palette($red, 100, 50, 200);
+$warn-2: mat.m2-define-palette($yellow, 100, 50, 200);
+$header-1: mat.m2-define-palette($navy, 1000, 400, 800);
+$header-2: mat.m2-define-palette($forest, 1000, 400, 800);
+$header-3: mat.m2-define-palette($orange, 1000, 400, 800);
+$header-4: mat.m2-define-palette($purple, 1000, 400, 800);
+$hover: mat.m2-define-palette($grey, 500, 100, 300);
 
-$basetheme: mat.define-light-theme(
+$basetheme: mat.m2-define-light-theme(
   (
     color: (
       primary: $primary,
@@ -226,8 +227,8 @@ $basetheme: mat.define-light-theme(
   )
 );
 
-$newcolor: map-merge(
-  map-get($basetheme, "color"),
+$newcolor: map.merge(
+  map.get($basetheme, "color"),
   (
     warn-2: $warn-2,
     header-1: $header-1,
@@ -238,7 +239,7 @@ $newcolor: map-merge(
   )
 );
 
-$theme: map-merge(
+$theme: map.merge(
   $basetheme,
   (
     color: $newcolor,
@@ -300,15 +301,15 @@ a:hover {
 }
 
 .snackbar-success {
-  background-color: mat.get-color-from-palette($primary, "default");
+  background-color: mat.m2-get-color-from-palette($primary, "default");
 
   button {
     color: white;
   }
 }
 
 .snackbar-error {
-  background-color: mat.get-color-from-palette($warn, "default");
+  background-color: mat.m2-get-color-from-palette($warn, "default");
 
   button {
     color: white;

CI/to_be_deleted/MAXIV/maxiv-theme.scss

@@ -30,13 +30,14 @@
 @use "./app/shared/modules/table/table-theme" as table;
 @use "./app/users/user-settings/user-settings-theme" as user-settings;
 
-$custom-typography: mat.define-typography-config(
+$custom-typography: mat.m2-define-typography-config(
   $font-family: '"Titillium Web", Calibri, sans-serif;',
 );
 // Include the common styles for Angular Material. We include this here so that you only
 // have to load a single css file for Angular Material in your app.
 // Be sure that you only ever include this mixin once!
-@include mat.core($custom-typography);
+@include mat.elevation-classes();
+@include mat.app-background();
 
 // Define the palettes for your theme using the Material Design palettes available in palette.scss
 // (imported above). For each palette, you can optionally specify a default, lighter, and darker
@@ -249,15 +250,15 @@ $max-iv-orange-palette: (
   ),
 );
 
-$primary: mat.define-palette($max-iv-green-palette, 700);
-$accent: mat.define-palette($max-iv-orange-palette, 500, 300, 700);
-$warn: mat.define-palette($red, 100, 50, 200);
-$warn-2: mat.define-palette($yellow, 100, 50, 200);
-$header-1: mat.define-palette($navy, 1000, 400, 800);
-$header-2: mat.define-palette($forest, 1000, 400, 800);
-$header-3: mat.define-palette($orange, 1000, 400, 800);
-$header-4: mat.define-palette($purple, 1000, 400, 800);
-$hover: mat.define-palette($grey, 500, 100, 300);
+$primary: mat.m2-define-palette($max-iv-green-palette, 700);
+$accent: mat.m2-define-palette($max-iv-orange-palette, 500, 300, 700);
+$warn: mat.m2-define-palette($red, 100, 50, 200);
+$warn-2: mat.m2-define-palette($yellow, 100, 50, 200);
+$header-1: mat.m2-define-palette($navy, 1000, 400, 800);
+$header-2: mat.m2-define-palette($forest, 1000, 400, 800);
+$header-3: mat.m2-define-palette($orange, 1000, 400, 800);
+$header-4: mat.m2-define-palette($purple, 1000, 400, 800);
+$hover: mat.m2-define-palette($grey, 500, 100, 300);
 
 @function custom-light-theme(
   $primary,
@@ -270,8 +271,8 @@ $hover: mat.define-palette($grey, 500, 100, 300);
   $header-4,
   $hover
 ) {
-  @return map-merge(
-    mat.define-light-theme($primary, $accent, $warn),
+  @return map.merge(
+    mat.m2-define-light-theme($primary, $accent, $warn),
     (
       warn-2: $warn-2,
       header-1: $header-1,
@@ -348,9 +349,9 @@ a:hover {
 }
 
 .snackbar-success {
-  background-color: mat.get-color-from-palette($primary, "default");
+  background-color: mat.m2-get-color-from-palette($primary, "default");
 }
 
 .snackbar-error {
-  background-color: mat.get-color-from-palette($warn, "default");
+  background-color: mat.m2-get-color-from-palette($warn, "default");
 }

CI/to_be_deleted/RFI/theme.scss

@@ -1,22 +1,27 @@
 // Custom Theming for Angular Material
 // For more information: https://material.angular.io/guide/theming
-@use '@angular/material' as mat;
+@use "@angular/material" as mat;
 @use "./app/app-theme" as app;
 @use "./app/_layout/app-header/app-header-theme" as app-header;
 @use "./app/datasets/batch-view/batch-view-theme" as batch-view;
 @use "./app/datasets/dashboard/dashboard-theme" as dashboard;
 @use "./app/datasets/datafiles/datafiles-theme" as datafiles;
 @use "./app/datasets/dataset-detail/dataset-detail-theme" as dataset-detail;
-@use "./app/datasets/dataset-details-dashboard/dataset-details-dashboard-theme" as dataset-details-dashboard;
-@use "./app/datasets/dataset-lifecycle/dataset-lifecycle-theme" as dataset-lifecycle;
+@use "./app/datasets/dataset-details-dashboard/dataset-details-dashboard-theme"
+  as dataset-details-dashboard;
+@use "./app/datasets/dataset-lifecycle/dataset-lifecycle-theme" as
+  dataset-lifecycle;
 @use "./app/datasets/dataset-table/dataset-table-theme" as dataset-table;
-@use "./app/datasets/dataset-table-settings/dataset-table-settings-theme" as dataset-table-settings;
+@use "./app/datasets/dataset-table-settings/dataset-table-settings-theme" as
+  dataset-table-settings;
 @use "./app/datasets/reduce/reduce-theme" as reduce;
-@use "./app/instruments/instrument-details/instrument-details-theme" as instrument-details;
+@use "./app/instruments/instrument-details/instrument-details-theme" as
+  instrument-details;
 @use "./app/logbooks/logbooks-detail/logbooks-detail-theme" as logbooks-detail;
 @use "./app/logbooks/logbooks-table/logbooks-table-theme" as logbooks-table;
 @use "./app/proposals/proposal-detail/proposal-detail-theme" as proposal-detail;
-@use "./app/publisheddata/publisheddata-details/publisheddata-details-theme" as publisheddata-details;
+@use "./app/publisheddata/publisheddata-details/publisheddata-details-theme" as
+  publisheddata-details;
 @use "./app/samples/sample-dashboard/sample-dashboard-theme" as sample-dashboard;
 @use "./app/samples/sample-detail/sample-detail-theme" as sample-detail;
 @use "./app/shared/modules/breadcrumb/breadcrumb-theme" as breadcrumb;
@@ -25,13 +30,14 @@
 @use "./app/shared/modules/table/table-theme" as table;
 @use "./app/users/user-settings/user-settings-theme" as user-settings;
 
-$custom-typography: mat.define-typography-config(
+$custom-typography: mat.m2-define-typography-config(
   $font-family: '"Titillium Web", Calibri, sans-serif;',
 );
 // Include the common styles for Angular Material. We include this here so that you only
 // have to load a single css file for Angular Material in your app.
 // Be sure that you only ever include this mixin once!
-@include mat.core($custom-typography);
+@include mat.elevation-classes();
+@include mat.app-background();
 
 // Define the palettes for your theme using the Material Design palettes available in palette.scss
 // (imported above). For each palette, you can optionally specify a default, lighter, and darker
@@ -198,15 +204,15 @@ $red: (
   ),
 );
 
-$primary: mat.define-palette($cyan, 1000, 400, 800);
-$accent: mat.define-palette($grass, 1000, 400, 800);
-$warn: mat.define-palette($red, 100, 50, 200);
-$warn-2: mat.define-palette($yellow, 100, 50, 200);
-$header-1: mat.define-palette($navy, 1000, 400, 800);
-$header-2: mat.define-palette($forest, 1000, 400, 800);
-$header-3: mat.define-palette($orange, 1000, 400, 800);
-$header-4: mat.define-palette($purple, 1000, 400, 800);
-$hover: mat.define-palette($grey, 500, 100, 300);
+$primary: mat.m2-define-palette($cyan, 1000, 400, 800);
+$accent: mat.m2-define-palette($grass, 1000, 400, 800);
+$warn: mat.m2-define-palette($red, 100, 50, 200);
+$warn-2: mat.m2-define-palette($yellow, 100, 50, 200);
+$header-1: mat.m2-define-palette($navy, 1000, 400, 800);
+$header-2: mat.m2-define-palette($forest, 1000, 400, 800);
+$header-3: mat.m2-define-palette($orange, 1000, 400, 800);
+$header-4: mat.m2-define-palette($purple, 1000, 400, 800);
+$hover: mat.m2-define-palette($grey, 500, 100, 300);
 
 @function custom-light-theme(
   $primary,
@@ -219,8 +225,8 @@ $hover: mat.define-palette($grey, 500, 100, 300);
   $header-4,
   $hover
 ) {
-  @return map-merge(
-    mat.define-light-theme($primary, $accent, $warn),
+  @return map.merge(
+    mat.m2-define-light-theme($primary, $accent, $warn),
     (
       warn-2: $warn-2,
       header-1: $header-1,
@@ -297,9 +303,9 @@ a:hover {
 }
 
 .snackbar-success {
-  background-color: mat.get-color-from-palette($primary, "default");
+  background-color: mat.m2-get-color-from-palette($primary, "default");
 }
 
 .snackbar-error {
-  background-color: mat.get-color-from-palette($warn, "default");
+  background-color: mat.m2-get-color-from-palette($warn, "default");
 }

angular.json

@@ -25,18 +25,19 @@
       "prefix": "app",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular-devkit/build-angular:application",
           "options": {
             "allowedCommonJsDependencies": [
               "deep-equal",
               "exceljs",
               "file-saver",
               "socket.io-client"
             ],
-            "outputPath": "dist",
+            "outputPath": {
+              "base": "dist"
+            },
             "index": "src/index.html",
-            "main": "src/main.ts",
-            "polyfills": "src/polyfills.ts",
+            "polyfills": ["src/polyfills.ts"],
             "tsConfig": "tsconfig.app.json",
             "inlineStyleLanguage": "scss",
             "assets": [
@@ -46,7 +47,8 @@
               "src/manifest.json"
             ],
             "styles": ["src/styles.scss"],
-            "scripts": []
+            "scripts": [],
+            "browser": "src/main.ts"
           },
           "configurations": {
             "production": {
@@ -77,9 +79,7 @@
               "outputHashing": "all"
             },
             "default": {
-              "buildOptimizer": false,
               "optimization": false,
-              "vendorChunk": true,
               "extractLicenses": false,
               "sourceMap": true,
               "namedChunks": true
@@ -91,10 +91,10 @@
           "builder": "@angular-devkit/build-angular:dev-server",
           "configurations": {
             "production": {
-              "browserTarget": "scicat-frontend:build:production"
+              "buildTarget": "scicat-frontend:build:production"
             },
             "default": {
-              "browserTarget": "scicat-frontend:build:default"
+              "buildTarget": "scicat-frontend:build:default"
             }
           },
           "options": {
@@ -107,7 +107,7 @@
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
           "options": {
-            "browserTarget": "scicat-frontend:build"
+            "buildTarget": "scicat-frontend:build"
           }
         },
         "test": {