Merge branch 'master' of https://home.git.sebastienandre.com/sandre/SkydiveLogs into fix/little-updates

Front/skydivelogs-app/.browserslistrc

@@ -2,6 +2,9 @@
 # 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.dev/reference/versions#browser-support
+
 # You can see what browsers were selected by your queries by running:
 #   npx browserslist
 
@@ -9,4 +12,12 @@
 last 2 versions
 Firefox ESR
 not dead
-not IE 9-11 # For IE 9-11 support, remove 'not'.
+not IE 9-11 # For IE 9-11 support, remove 'not'.
+
+#last 2 Chrome versions
+#last 1 Firefox version
+#last 2 Edge major versions
+#last 2 Safari major versions
+#last 2 iOS major versions
+#last 2 Android major versions
+#Firefox ESR

Front/skydivelogs-app/angular.json

@@ -9,13 +9,16 @@
       "projectType": "application",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular-devkit/build-angular:application",
           "options": {
-            "outputPath": "dist",
+            "outputPath": {
+              "base": "dist"
+            },
             "index": "src/index.html",
-            "main": "src/main.ts",
             "tsConfig": "src/tsconfig.app.json",
-            "polyfills": "src/polyfills.ts",
+            "polyfills": [
+              "src/polyfills.ts"
+            ],
             "assets": [
               "src/assets",
               "src/config",
@@ -28,12 +31,11 @@
               "@angular/material/prebuilt-themes/pink-bluegrey.css"
             ],
             "scripts": [],
-            "vendorChunk": true,
             "extractLicenses": false,
-            "buildOptimizer": false,
             "sourceMap": true,
             "optimization": false,
-            "namedChunks": true
+            "namedChunks": true,
+            "browser": "src/main.ts"
           },
           "configurations": {
             "production": {
@@ -48,8 +50,6 @@
               "sourceMap": false,
               "namedChunks": false,
               "extractLicenses": true,
-              "vendorChunk": false,
-              "buildOptimizer": true,
               "fileReplacements": [
                 {
                   "replace": "src/environments/environment.ts",

Front/skydivelogs-app/package.json

@@ -12,28 +12,28 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^17.0.8",
+    "@angular/animations": "^19.2.6",
-    "@angular/cdk": "^17.0.4",
+    "@angular/cdk": "^19.2.9",
-    "@angular/common": "^17.0.8",
+    "@angular/common": "^19.2.6",
-    "@angular/compiler": "^17.0.8",
+    "@angular/compiler": "^19.2.6",
-    "@angular/core": "^17.0.8",
+    "@angular/core": "^19.2.6",
-    "@angular/forms": "^17.0.8",
+    "@angular/forms": "^19.2.6",
-    "@angular/material": "^17.0.4",
+    "@angular/material": "^19.2.9",
-    "@angular/platform-browser": "^17.0.8",
+    "@angular/platform-browser": "^19.2.6",
-    "@angular/platform-browser-dynamic": "^17.0.8",
+    "@angular/platform-browser-dynamic": "^19.2.6",
-    "@angular/router": "^17.0.8",
+    "@angular/router": "^19.2.6",
     "@ngx-translate/core": "^15.0.0",
     "@ngx-translate/http-loader": "^8.0.0",
     "chart.js": "^4.3.0",
     "ng2-charts": "^5.0.2",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
-    "zone.js": "~0.14.2"
+    "zone.js": "~0.15.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^17.0.8",
+    "@angular-devkit/build-angular": "^19.2.7",
-    "@angular/cli": "~17.0.8",
+    "@angular/cli": "~19.2.7",
-    "@angular/compiler-cli": "^17.0.8",
+    "@angular/compiler-cli": "^19.2.6",
     "@types/jasmine": "~4.3.0",
     "jasmine-core": "~5.1.0",
     "karma": "~6.4.0",
@@ -41,6 +41,6 @@
     "karma-coverage": "~2.2.0",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.1.0",
-    "typescript": "~5.2.2"
+    "typescript": "~5.5.4"
   }
 }

Front/skydivelogs-app/src/app/app.component.ts

@@ -11,9 +11,10 @@ import { ConfigurationHelper } from "../services/configuration-helper";
 import { ServiceCacheApi } from "../services/service-cache-api.service";
 
 @Component({
-  selector: "app-root",
+    selector: "app-root",
-  templateUrl: "./app.component.html",
+    templateUrl: "./app.component.html",
-  styleUrls: ["./app.component.css"]
+    styleUrls: ["./app.component.css"],
+    standalone: false
 })
 export class AppComponent implements OnInit {
   public title = "app";

Front/skydivelogs-app/src/app/app.module.ts

@@ -1,5 +1,5 @@
 import { BrowserModule } from "@angular/platform-browser";
-import { APP_INITIALIZER, NgModule } from "@angular/core";
+import { NgModule, inject, provideAppInitializer } from "@angular/core";
 import { RouterModule, Routes } from "@angular/router";
 import {
   HttpClient,
@@ -228,12 +228,10 @@ export function initConfig(configService: ConfigurationHelper) {
     ConfigurationHelper,
     DatePipe,
     ServiceCacheApi,
-    {
+    provideAppInitializer(() => {
-      provide: APP_INITIALIZER,
+        const initializerFn = (initConfig)(inject(ConfigurationHelper));
-      useFactory: initConfig,
+        return initializerFn();
-      deps: [ConfigurationHelper],
+      }),
-      multi: true,
-    },
     { provide: HTTP_INTERCEPTORS, useClass: JwtAuthInterceptor, multi: true },
     { provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true },
   ],

Front/skydivelogs-app/src/app/create-user/create-user.component.ts

@@ -9,9 +9,10 @@ import { AuthenticationService } from "../../services/authentication.service";
 import { User } from "../../models/user";
 
 @Component({
-  selector: "app-create-user",
+    selector: "app-create-user",
-  templateUrl: "./create-user.component.html",
+    templateUrl: "./create-user.component.html",
-  styleUrls: ["./create-user.component.css"]
+    styleUrls: ["./create-user.component.css"],
+    standalone: false
 })
 export class CreateUserComponent implements OnInit {
   createForm: FormGroup;

Front/skydivelogs-app/src/app/default/default.component.ts

@@ -10,9 +10,10 @@ import { JumpTypeService } from "../../services/jump-type.service";
 import { ServiceComm } from "../../services/service-comm.service";
 
 @Component({
-  selector: "app-default",
+    selector: "app-default",
-  templateUrl: "./default.component.html",
+    templateUrl: "./default.component.html",
-  styleUrls: ["./default.component.css"]
+    styleUrls: ["./default.component.css"],
+    standalone: false
 })
 export class DefaultComponent implements OnInit {
   constructor(private serviceComm: ServiceComm,

Front/skydivelogs-app/src/app/jump-infos/jump-infos.component.ts

@@ -7,9 +7,10 @@ import { JumpService } from '../../services/jump.service';
 import { ServiceComm } from '../../services/service-comm.service';
 
 @Component({
-  selector: 'app-jump-infos',
+    selector: 'app-jump-infos',
-  templateUrl: './jump-infos.component.html',
+    templateUrl: './jump-infos.component.html',
-  styleUrls: ['./jump-infos.component.css']
+    styleUrls: ['./jump-infos.component.css'],
+    standalone: false
 })
 export class JumpInfosComponent implements OnInit {
   public editMode: boolean;

Front/skydivelogs-app/src/app/list-of-aircrafts/list-of-aircrafts.component.ts

@@ -12,9 +12,10 @@ import { AddAction } from '../../models/add-action.enum';
 import { AircraftResp } from '../../models/aircraft';
 
 @Component({
-  selector: 'app-list-of-aircrafts',
+    selector: 'app-list-of-aircrafts',
-  templateUrl: './list-of-aircrafts.component.html',
+    templateUrl: './list-of-aircrafts.component.html',
-  styleUrls: ['./list-of-aircrafts.component.css']
+    styleUrls: ['./list-of-aircrafts.component.css'],
+    standalone: false
 })
 export class ListOfAircraftsComponent implements OnInit {
   public displayedColumns: Array<string> = ['name', 'imageData'];

Front/skydivelogs-app/src/app/list-of-dzs/list-of-dzs.component.ts

@@ -12,9 +12,10 @@ import { AuthenticationService } from '../../services/authentication.service';
 import { NewDropZoneComponent } from '../new-drop-zone/new-drop-zone.component';
 
 @Component({
-  selector: 'app-list-of-dzs',
+    selector: 'app-list-of-dzs',
-  templateUrl: './list-of-dzs.component.html',
+    templateUrl: './list-of-dzs.component.html',
-  styleUrls: ['./list-of-dzs.component.css'],
+    styleUrls: ['./list-of-dzs.component.css'],
+    standalone: false
 })
 export class ListOfDzsComponent implements OnInit {
   public displayedColumns: Array<string> = [

Front/skydivelogs-app/src/app/list-of-gears/list-of-gears.component.ts

@@ -11,9 +11,10 @@ import { AddAction } from "../../models/add-action.enum";
 import { NewGearComponent } from "../new-gear/new-gear.component";
 
 @Component({
-  selector: "app-list-of-gears",
+    selector: "app-list-of-gears",
-  templateUrl: "./list-of-gears.component.html",
+    templateUrl: "./list-of-gears.component.html",
-  styleUrls: ["./list-of-gears.component.css"]
+    styleUrls: ["./list-of-gears.component.css"],
+    standalone: false
 })
 export class ListOfGearsComponent implements OnInit {
   public displayedColumns: Array<string> = [

Front/skydivelogs-app/src/app/list-of-images/list-of-images.component.ts

@@ -10,17 +10,18 @@ import { ImageResp } from '../../models/image';
 import { AddAction } from '../../models/add-action.enum';
 
 @Component({
-  selector: 'app-list-of-images',
+    selector: 'app-list-of-images',
-  templateUrl: './list-of-images.component.html',
+    templateUrl: './list-of-images.component.html',
-  styleUrls: ['./list-of-images.component.css'],
+    styleUrls: ['./list-of-images.component.css'],
-  animations: [
+    animations: [
-      trigger('rotatedState', [
+        trigger('rotatedState', [
-        state('default', style({ transform: 'rotate(0)' })),
+            state('default', style({ transform: 'rotate(0)' })),
-        state('rot90', style({ transform: 'rotate(-90deg)' })),
+            state('rot90', style({ transform: 'rotate(-90deg)' })),
-        state('rot180', style({ transform: 'rotate(-180deg)' })),
+            state('rot180', style({ transform: 'rotate(-180deg)' })),
-        state('rot270', style({ transform: 'rotate(-270deg)' })),
+            state('rot270', style({ transform: 'rotate(-270deg)' })),
-    ])
+        ])
-  ]
+    ],
+    standalone: false
 })
 export class ListOfImagesComponent implements OnInit {
   public displayedColumns: Array<string> = ['comment', 'data'];

Front/skydivelogs-app/src/app/list-of-jump-types/list-of-jump-types.component.ts

@@ -12,9 +12,10 @@ import { AuthenticationService } from '../../services/authentication.service';
 import { NewJumpTypeComponent } from "../new-jump-type/new-jump-type.component";
 
 @Component({
-  selector: "app-list-of-jump-types",
+    selector: "app-list-of-jump-types",
-  templateUrl: "./list-of-jump-types.component.html",
+    templateUrl: "./list-of-jump-types.component.html",
-  styleUrls: ["./list-of-jump-types.component.css"]
+    styleUrls: ["./list-of-jump-types.component.css"],
+    standalone: false
 })
 export class ListOfJumpTypesComponent implements OnInit {
   public displayedColumns: Array<string> = ["name"];

Front/skydivelogs-app/src/app/list-of-jumps/list-of-jumps.component.ts

@@ -12,9 +12,10 @@ import { JumpInfosComponent } from "../jump-infos/jump-infos.component";
 import { StatsService } from "../../services/stats.service";
 
 @Component({
-  selector: "app-list-of-jumps",
+    selector: "app-list-of-jumps",
-  templateUrl: "./list-of-jumps.component.html",
+    templateUrl: "./list-of-jumps.component.html",
-  styleUrls: ["./list-of-jumps.component.css"],
+    styleUrls: ["./list-of-jumps.component.css"],
+    standalone: false
 })
 export class ListOfJumpsComponent implements OnInit {
   public displayedColumns: Array<string> = [

Front/skydivelogs-app/src/app/list-of-tunnel-flights/list-of-tunnel-flights.component.ts

@@ -13,7 +13,8 @@ import { TunnelFlight, TunnelFlightByMonth } from '../../models/tunnel-flight';
 @Component({
     selector: 'app-list-of-tunnel-flights',
     templateUrl: './list-of-tunnel-flights.component.html',
-    styleUrls: ['./list-of-tunnel-flights.component.css']
+    styleUrls: ['./list-of-tunnel-flights.component.css'],
+    standalone: false
 })
 export class ListOfTunnelFlightsComponent implements OnInit {
     public barChartLegend = true;

Front/skydivelogs-app/src/app/login-user/login-user.component.ts

@@ -8,9 +8,10 @@ import { first } from 'rxjs/operators';
 import { AuthenticationService } from '../../services/authentication.service';
 
 @Component({
-  selector: 'app-login-user',
+    selector: 'app-login-user',
-  templateUrl: './login-user.component.html',
+    templateUrl: './login-user.component.html',
-  styleUrls: ['./login-user.component.css']
+    styleUrls: ['./login-user.component.css'],
+    standalone: false
 })
 export class LoginUserComponent implements OnInit, AfterViewInit {
   loginForm: FormGroup;

Front/skydivelogs-app/src/app/login/login.component.ts

@@ -2,9 +2,10 @@ import { Component, OnInit } from "@angular/core";
 import { TranslateService } from "@ngx-translate/core";
 
 @Component({
-  selector: "app-login",
+    selector: "app-login",
-  templateUrl: "./login.component.html",
+    templateUrl: "./login.component.html",
-  styleUrls: ["./login.component.css"]
+    styleUrls: ["./login.component.css"],
+    standalone: false
 })
 export class LoginComponent implements OnInit {
   public selectedLanguageFlag: string;

Front/skydivelogs-app/src/app/new-aircraft/new-aircraft.component.ts

@@ -5,9 +5,10 @@ import { ServiceComm } from '../../services/service-comm.service';
 import { AddAction } from '../../models/add-action.enum';
 
 @Component({
-  selector: 'app-new-aircraft',
+    selector: 'app-new-aircraft',
-  templateUrl: './new-aircraft.component.html',
+    templateUrl: './new-aircraft.component.html',
-  styleUrls: ['./new-aircraft.component.css']
+    styleUrls: ['./new-aircraft.component.css'],
+    standalone: false
 })
 export class NewAircraftComponent implements OnInit {
   public addForm: FormGroup;

Front/skydivelogs-app/src/app/new-drop-zone/new-drop-zone.component.ts

@@ -5,9 +5,10 @@ import { ServiceComm } from "../../services/service-comm.service";
 import { DropzoneService } from "../../services/dropzone.service";
 
 @Component({
-  selector: "app-new-drop-zone",
+    selector: "app-new-drop-zone",
-  templateUrl: "./new-drop-zone.component.html",
+    templateUrl: "./new-drop-zone.component.html",
-  styleUrls: ["./new-drop-zone.component.css"]
+    styleUrls: ["./new-drop-zone.component.css"],
+    standalone: false
 })
 export class NewDropZoneComponent implements OnInit {
   public addForm: FormGroup;

Front/skydivelogs-app/src/app/new-gear/new-gear.component.ts

@@ -6,9 +6,10 @@ import { GearService } from "../../services/gear.service";
 import { AddAction } from "../../models/add-action.enum";
 
 @Component({
-  selector: "app-new-gear",
+    selector: "app-new-gear",
-  templateUrl: "./new-gear.component.html",
+    templateUrl: "./new-gear.component.html",
-  styleUrls: ["./new-gear.component.css"]
+    styleUrls: ["./new-gear.component.css"],
+    standalone: false
 })
 export class NewGearComponent implements OnInit {
   public addForm: FormGroup;

Front/skydivelogs-app/src/app/new-jump-type/new-jump-type.component.ts

@@ -5,9 +5,10 @@ import { ServiceComm } from "../../services/service-comm.service";
 import { JumpTypeService } from "../../services/jump-type.service";
 
 @Component({
-  selector: "app-new-jump-type",
+    selector: "app-new-jump-type",
-  templateUrl: "./new-jump-type.component.html",
+    templateUrl: "./new-jump-type.component.html",
-  styleUrls: ["./new-jump-type.component.css"]
+    styleUrls: ["./new-jump-type.component.css"],
+    standalone: false
 })
 export class NewJumpTypeComponent implements OnInit {
   public addForm: FormGroup;

Front/skydivelogs-app/src/app/new-jump/new-jump.component.ts

@@ -34,13 +34,14 @@ class PickDateAdapter extends NativeDateAdapter {
 }
 
 @Component({
-  selector: "app-new-jump",
+    selector: "app-new-jump",
-  templateUrl: "./new-jump.component.html",
+    templateUrl: "./new-jump.component.html",
-  styleUrls: ["./new-jump.component.css"],
+    styleUrls: ["./new-jump.component.css"],
-  providers: [
+    providers: [
-    { provide: DateAdapter, useClass: PickDateAdapter },
+        { provide: DateAdapter, useClass: PickDateAdapter },
-    { provide: MAT_DATE_FORMATS, useValue: PICK_FORMATS }
+        { provide: MAT_DATE_FORMATS, useValue: PICK_FORMATS }
-  ]
+    ],
+    standalone: false
 })
 export class NewJumpComponent implements OnInit {
   public beginDate: Date;

Front/skydivelogs-app/src/app/new-tunnel-flight/new-tunnel-flight.component.ts

@@ -28,13 +28,14 @@ class PickDateAdapter extends NativeDateAdapter {
 }
 
 @Component({
-  selector: 'app-new-tunnel-flight',
+    selector: 'app-new-tunnel-flight',
-  templateUrl: './new-tunnel-flight.component.html',
+    templateUrl: './new-tunnel-flight.component.html',
-  styleUrls: ['./new-tunnel-flight.component.css'],
+    styleUrls: ['./new-tunnel-flight.component.css'],
-  providers: [
+    providers: [
-    { provide: DateAdapter, useClass: PickDateAdapter },
+        { provide: DateAdapter, useClass: PickDateAdapter },
-    { provide: MAT_DATE_FORMATS, useValue: PICK_FORMATS }
+        { provide: MAT_DATE_FORMATS, useValue: PICK_FORMATS }
-  ]
+    ],
+    standalone: false
 })
 export class NewTunnelFlightComponent implements OnInit {
   public flightDate: Date;

Front/skydivelogs-app/src/app/summary/summary.component.ts

@@ -19,6 +19,7 @@ import {
   selector: "app-summary",
   templateUrl: "./summary.component.html",
   styleUrls: ["./summary.component.css"],
+  standalone: false,
 })
 export class SummaryComponent implements OnInit {
   public dsNbJumpByDz: MatTableDataSource<StatsByDzResp>;

Front/skydivelogs-app/src/app/user-profile/user-profile.component.ts

@@ -4,9 +4,10 @@ import { AuthenticationService } from '../../services/authentication.service';
 import { User } from '../../models/user';
 
 @Component({
-  selector: 'app-user-profile',
+    selector: 'app-user-profile',
-  templateUrl: './user-profile.component.html',
+    templateUrl: './user-profile.component.html',
-  styleUrls: ['./user-profile.component.css'],
+    styleUrls: ['./user-profile.component.css'],
+    standalone: false
 })
 export class UserProfileComponent implements OnInit {
   public userForm: FormGroup;

Front/skydivelogs-app/src/assets/css/custom-theme-dark.scss

@@ -15,23 +15,24 @@
 // @import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500');
      
 $fontConfig: (
-  display-4: mat.define-typography-level(112px, 112px, 300, 'Roboto', -0.0134em),
+  display-4: mat.m2-define-typography-level(112px, 112px, 300, 'Roboto', -0.0134em),
-  display-3: mat.define-typography-level(56px, 56px, 400, 'Roboto', -0.0089em),
+  display-3: mat.m2-define-typography-level(56px, 56px, 400, 'Roboto', -0.0089em),
-  display-2: mat.define-typography-level(45px, 48px, 400, 'Roboto', 0.0000em),
+  display-2: mat.m2-define-typography-level(45px, 48px, 400, 'Roboto', 0.0000em),
-  display-1: mat.define-typography-level(34px, 40px, 400, 'Roboto', 0.0074em),
+  display-1: mat.m2-define-typography-level(34px, 40px, 400, 'Roboto', 0.0074em),
-  headline: mat.define-typography-level(24px, 32px, 400, 'Roboto', 0.0000em),
+  headline: mat.m2-define-typography-level(24px, 32px, 400, 'Roboto', 0.0000em),
-  title: mat.define-typography-level(20px, 32px, 500, 'Roboto', 0.0075em),
+  title: mat.m2-define-typography-level(20px, 32px, 500, 'Roboto', 0.0075em),
-  subheading-2: mat.define-typography-level(16px, 28px, 400, 'Roboto', 0.0094em),
+  subheading-2: mat.m2-define-typography-level(16px, 28px, 400, 'Roboto', 0.0094em),
-  subheading-1: mat.define-typography-level(15px, 24px, 500, 'Roboto', 0.0067em),
+  subheading-1: mat.m2-define-typography-level(15px, 24px, 500, 'Roboto', 0.0067em),
-  body-2: mat.define-typography-level(14px, 24px, 500, 'Roboto', 0.0179em),
+  body-2: mat.m2-define-typography-level(14px, 24px, 500, 'Roboto', 0.0179em),
-  body-1: mat.define-typography-level(14px, 20px, 400, 'Roboto', 0.0179em),
+  body-1: mat.m2-define-typography-level(14px, 20px, 400, 'Roboto', 0.0179em),
-  button: mat.define-typography-level(14px, 14px, 500, 'Roboto', 0.0893em),
+  button: mat.m2-define-typography-level(14px, 14px, 500, 'Roboto', 0.0893em),
-  caption: mat.define-typography-level(12px, 20px, 400, 'Roboto', 0.0333em),
+  caption: mat.m2-define-typography-level(12px, 20px, 400, 'Roboto', 0.0333em),
-  input: mat.define-typography-level(inherit, 1.125, 400, 'Roboto', 1.5px)
+  input: mat.m2-define-typography-level(inherit, 1.125, 400, 'Roboto', 1.5px)
 );
 
 // Compute font config
-@include mat.core();
+@include mat.elevation-classes();
+@include mat.app-background();
 
 
 // Foreground Elements
@@ -170,7 +171,7 @@ $mat-primary: (
     darker: $light-primary-text,
   )
 );
-$theme-primary: mat.define-palette($mat-primary, main, lighter, darker);
+$theme-primary: mat.m2-define-palette($mat-primary, main, lighter, darker);
 
 body {
   --accent-color: #797979;
@@ -192,7 +193,7 @@ $mat-accent: (
     darker: $light-primary-text,
   )
 );
-$theme-accent: mat.define-palette($mat-accent, main, lighter, darker);
+$theme-accent: mat.m2-define-palette($mat-accent, main, lighter, darker);
 
 body {
   --warn-color: #ff0000;
@@ -214,10 +215,10 @@ $mat-warn: (
     darker: $light-primary-text,
   )
 );
-$theme-warn: mat.define-palette($mat-warn, main, lighter, darker);;
+$theme-warn: mat.m2-define-palette($mat-warn, main, lighter, darker);;
 
-$theme: mat.define-dark-theme($theme-primary, $theme-accent, $theme-warn);
+$theme: mat.m2-define-dark-theme($theme-primary, $theme-accent, $theme-warn);
-$altTheme: mat.define-light-theme($theme-primary, $theme-accent, $theme-warn);
+$altTheme: mat.m2-define-light-theme($theme-primary, $theme-accent, $theme-warn);
 
 // Theme Init
 @include mat.all-component-themes($theme);

Front/skydivelogs-app/src/assets/css/custom-theme-light.scss

@@ -13,19 +13,19 @@
 @import "Roboto";
 // @import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500');
 
-$fontConfig: (display-4: mat.define-typography-level(112px, 112px, 300, 'Roboto,Helvetica Neue,sans-serif', -0.0134em),
+$fontConfig: (display-4: mat.m2-define-typography-level(112px, 112px, 300, 'Roboto,Helvetica Neue,sans-serif', -0.0134em),
-  display-3: mat.define-typography-level(56px, 56px, 400, 'Roboto,Helvetica Neue,sans-serif', -0.0089em),
+  display-3: mat.m2-define-typography-level(56px, 56px, 400, 'Roboto,Helvetica Neue,sans-serif', -0.0089em),
-  display-2: mat.define-typography-level(45px, 48px, 400, 'Roboto,Helvetica Neue,sans-serif', 0.0000em),
+  display-2: mat.m2-define-typography-level(45px, 48px, 400, 'Roboto,Helvetica Neue,sans-serif', 0.0000em),
-  display-1: mat.define-typography-level(34px, 40px, 400, 'Roboto,Helvetica Neue,sans-serif', 0.0074em),
+  display-1: mat.m2-define-typography-level(34px, 40px, 400, 'Roboto,Helvetica Neue,sans-serif', 0.0074em),
-  headline: mat.define-typography-level(24px, 32px, 400, 'Roboto,Helvetica Neue,sans-serif', 0.0000em),
+  headline: mat.m2-define-typography-level(24px, 32px, 400, 'Roboto,Helvetica Neue,sans-serif', 0.0000em),
-  title: mat.define-typography-level(20px, 32px, 500, 'Roboto,Helvetica Neue,sans-serif', 0.0075em),
+  title: mat.m2-define-typography-level(20px, 32px, 500, 'Roboto,Helvetica Neue,sans-serif', 0.0075em),
-  subheading-2: mat.define-typography-level(16px, 28px, 400, 'Roboto,Helvetica Neue,sans-serif', 0.0094em),
+  subheading-2: mat.m2-define-typography-level(16px, 28px, 400, 'Roboto,Helvetica Neue,sans-serif', 0.0094em),
-  subheading-1: mat.define-typography-level(15px, 24px, 500, 'Roboto,Helvetica Neue,sans-serif', 0.0067em),
+  subheading-1: mat.m2-define-typography-level(15px, 24px, 500, 'Roboto,Helvetica Neue,sans-serif', 0.0067em),
-  body-2: mat.define-typography-level(14px, 24px, 500, 'Roboto,Helvetica Neue,sans-serif', 0.0179em),
+  body-2: mat.m2-define-typography-level(14px, 24px, 500, 'Roboto,Helvetica Neue,sans-serif', 0.0179em),
-  body-1: mat.define-typography-level(14px, 20px, 400, 'Roboto,Helvetica Neue,sans-serif', 0.0179em),
+  body-1: mat.m2-define-typography-level(14px, 20px, 400, 'Roboto,Helvetica Neue,sans-serif', 0.0179em),
-  button: mat.define-typography-level(14px, 14px, 500, 'Roboto,Helvetica Neue,sans-serif', 0.0893em),
+  button: mat.m2-define-typography-level(14px, 14px, 500, 'Roboto,Helvetica Neue,sans-serif', 0.0893em),
-  caption: mat.define-typography-level(12px, 20px, 400, 'Roboto,Helvetica Neue,sans-serif', 0.0333em),
+  caption: mat.m2-define-typography-level(12px, 20px, 400, 'Roboto,Helvetica Neue,sans-serif', 0.0333em),
-  input: mat.define-typography-level(inherit, 1.125, 400, 'Roboto,Helvetica Neue,sans-serif', 1.5px));
+  input: mat.m2-define-typography-level(inherit, 1.125, 400, 'Roboto,Helvetica Neue,sans-serif', 1.5px));
 
 // Foreground Elements
 
@@ -138,7 +138,8 @@ mat.$dark-theme-background-palette: (background: $dark-background,
 );
 
 // Compute font config
-@include mat.core($fontConfig);
+@include mat.elevation-classes();
+@include mat.app-background();
 
 // Theme Config
 
@@ -159,7 +160,7 @@ $mat-primary: (main: #cc33ca,
     lighter: $dark-primary-text,
     darker: $light-primary-text,
   ));
-$theme-primary: mat.define-palette($mat-primary, main, lighter, darker);
+$theme-primary: mat.m2-define-palette($mat-primary, main, lighter, darker);
 
 body {
   --accent-color: #797979;
@@ -178,7 +179,7 @@ $mat-accent: (main: #797979,
     lighter: $dark-primary-text,
     darker: $light-primary-text,
   ));
-$theme-accent: mat.define-palette($mat-accent, main, lighter, darker);
+$theme-accent: mat.m2-define-palette($mat-accent, main, lighter, darker);
 
 body {
   --warn-color: #ff0000;
@@ -197,11 +198,11 @@ $mat-warn: (main: #ff0000,
     lighter: $dark-primary-text,
     darker: $light-primary-text,
   ));
-$theme-warn: mat.define-palette($mat-warn, main, lighter, darker);
+$theme-warn: mat.m2-define-palette($mat-warn, main, lighter, darker);
 ;
 
-$theme: mat.define-light-theme($theme-primary, $theme-accent, $theme-warn);
+$theme: mat.m2-define-light-theme($theme-primary, $theme-accent, $theme-warn);
-$altTheme: mat.define-dark-theme($theme-primary, $theme-accent, $theme-warn);
+$altTheme: mat.m2-define-dark-theme($theme-primary, $theme-accent, $theme-warn);
 
 // Theme Init
 @include mat.all-component-themes($theme);

Front/skydivelogs-app/src/assets/css/new-theme.scss

@@ -1,9 +1,139 @@
+/* These tokens are generated using https://themes.angular-material.dev/ */
+/* Preview: https://themes.angular-material.dev/?seed-error=%23FF5449&seed-neutral=%23938F94&seed-neutral-variant=%23948F99&seed-primary=%236750A4&seed-secondary=%23958DA4&seed-tertiary=%23B58392 */
+/* Seed Colors: primary: #6750A4, secondary: #958DA4, tertiary: #B58392, error: #FF5449, neutral: #938F94, neutral-variant: #948F99 */
+
+@use "@angular/material" as mat;
+
+
+/* Light Theme */
+:root, :host {
+  @include mat.theme-overrides((
+    primary: #6750a4,
+    on-primary: #ffffff,
+    primary-container: #e9ddff,
+    on-primary-container: #22005d,
+    inverse-primary: #cfbcff,
+    primary-fixed: #e9ddff,
+    primary-fixed-dim: #cfbcff,
+    on-primary-fixed: #22005d,
+    on-primary-fixed-variant: #4f378a,
+    secondary: #625b70,
+    on-secondary: #ffffff,
+    secondary-container: #e8def8,
+    on-secondary-container: #1e192b,
+    secondary-fixed: #e8def8,
+    secondary-fixed-dim: #ccc2db,
+    on-secondary-fixed: #1e192b,
+    on-secondary-fixed-variant: #4a4458,
+    tertiary: #7e5260,
+    on-tertiary: #ffffff,
+    tertiary-container: #ffd9e3,
+    on-tertiary-container: #31101d,
+    tertiary-fixed: #ffd9e3,
+    tertiary-fixed-dim: #efb8c8,
+    on-tertiary-fixed: #31101d,
+    on-tertiary-fixed-variant: #633b48,
+    background: #fdf8f8,
+    on-background: #1c1b1c,
+    surface: #fdf8f8,
+    surface-dim: #ddd9d9,
+    surface-bright: #fdf8f8,
+    surface-container-lowest: #ffffff,
+    surface-container-low: #f7f3f2,
+    surface-container: #f1eded,
+    surface-container-high: #ebe7e7,
+    surface-container-highest: #e6e1e1,
+    on-surface: #1c1b1c,
+    shadow: #000000,
+    scrim: #000000,
+    surface-tint: #605d62,
+    inverse-surface: #313030,
+    inverse-on-surface: #f4f0f0,
+    outline: #79767b,
+    outline-variant: #cac5cb,
+    neutral: #797676,
+    neutral10: #1c1b1c,
+    error: #ba1a1a,
+    error-container: #ffdad6,
+    on-error: #ffffff,
+    on-error-container: #410002,
+    surface-variant: #e6e1e7,
+    on-surface-variant: #48464b,
+    neutral-variant: #79767b,
+    neutral-variant20: #322f34,
+    inverse-secondary: #ccc2db,
+    inverse-tertiary: #efb8c8,
+  ));
+}
+
+/* Dark Theme */
+.dark {
+  @include mat.theme-overrides((
+    primary: #cfbcff,
+    on-primary: #381e72,
+    primary-container: #4f378a,
+    on-primary-container: #e9ddff,
+    inverse-primary: #6750a4,
+    primary-fixed: #e9ddff,
+    primary-fixed-dim: #cfbcff,
+    on-primary-fixed: #22005d,
+    on-primary-fixed-variant: #4f378a,
+    secondary: #ccc2db,
+    on-secondary: #332d40,
+    secondary-container: #4a4458,
+    on-secondary-container: #e8def8,
+    secondary-fixed: #e8def8,
+    secondary-fixed-dim: #ccc2db,
+    on-secondary-fixed: #1e192b,
+    on-secondary-fixed-variant: #4a4458,
+    tertiary: #efb8c8,
+    on-tertiary: #4a2532,
+    tertiary-container: #633b48,
+    on-tertiary-container: #ffd9e3,
+    tertiary-fixed: #ffd9e3,
+    tertiary-fixed-dim: #efb8c8,
+    on-tertiary-fixed: #31101d,
+    on-tertiary-fixed-variant: #633b48,
+    background: #141313,
+    on-background: #e6e1e1,
+    surface: #141313,
+    surface-dim: #141313,
+    surface-bright: #3a3939,
+    surface-container-lowest: #0f0e0e,
+    surface-container-low: #1c1b1c,
+    surface-container: #201f20,
+    surface-container-high: #2b2a2a,
+    surface-container-highest: #363435,
+    on-surface: #e6e1e1,
+    shadow: #000000,
+    scrim: #000000,
+    surface-tint: #cac5ca,
+    inverse-surface: #e6e1e1,
+    inverse-on-surface: #313030,
+    outline: #938f95,
+    outline-variant: #48464b,
+    neutral: #797676,
+    neutral10: #1c1b1c,
+    error: #ffb4ab,
+    error-container: #93000a,
+    on-error: #690005,
+    on-error-container: #ffdad6,
+    surface-variant: #48464b,
+    on-surface-variant: #cac5cb,
+    neutral-variant: #79767b,
+    neutral-variant20: #322f34,
+    inverse-secondary: #625b70,
+    inverse-tertiary: #7e5260,
+  ));
+}
+
+
 // https://theme-builder-1623190217839.web.app/
 
   // @use '@angular/material' as mat;
 
-  @import "Material-Icons";
+  // @import "Material-Icons";
-  @import "Roboto";
+  // @import "Roboto";
 
   /*
   // Be sure that you only ever include this mixin once!

Front/skydivelogs-app/tsconfig.json

@@ -4,9 +4,9 @@
     "strictTemplates": true,
   },
   "compilerOptions": {
-    "downlevelIteration": true,
     "importHelpers": true,
     "outDir": "./dist/out-tsc",
+    "esModuleInterop": true,
     "sourceMap": true,
     "declaration": false,
     "moduleResolution": "node",