update to angular 16

package.json

@@ -11,33 +11,33 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^14.2.2",
-    "@angular/cdk": "^14.2.2",
-    "@angular/common": "^14.2.2",
-    "@angular/compiler": "^14.2.2",
-    "@angular/core": "^14.2.2",
-    "@angular/flex-layout": "^14.0.0-beta.40",
-    "@angular/forms": "^14.2.2",
-    "@angular/material": "^14.2.2",
-    "@angular/platform-browser": "^14.2.2",
-    "@angular/platform-browser-dynamic": "^14.2.2",
-    "@angular/router": "^14.2.2",
+    "@angular/animations": "^15.2.10",
+    "@angular/cdk": "^15.2.9",
+    "@angular/common": "^15.2.10",
+    "@angular/compiler": "^15.2.10",
+    "@angular/core": "^15.2.10",
+    "@angular/flex-layout": "^15.0.0-beta.42",
+    "@angular/forms": "^15.2.10",
+    "@angular/material": "^15.2.9",
+    "@angular/platform-browser": "^15.2.10",
+    "@angular/platform-browser-dynamic": "^15.2.10",
+    "@angular/router": "^15.2.10",
     "@ngx-formly/core": "^6.0.0",
     "@ngx-formly/material": "^6.0.0",
     "core-js": "^3.25.1",
     "hammerjs": "^2.0.8",
-    "ng-inline-svg-2": "^15.0.0",
-    "ngx-page-scroll": "^9.0.0",
-    "ngx-page-scroll-core": "^9.0.0",
+    "ng-inline-svg-2": "^15.0.1",
+    "ngx-page-scroll": "^10.0.0",
+    "ngx-page-scroll-core": "^10.0.0",
     "rxjs": "^7.5.6",
     "tslib": "^2.4.0",
     "zone.js": "~0.11.8"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^17.3.5",
-    "@angular/cli": "^14.2.2",
-    "@angular/compiler-cli": "^14.2.2",
-    "@angular/language-service": "^14.2.2",
+    "@angular-devkit/build-angular": "^15.2.11",
+    "@angular/cli": "^15.2.11",
+    "@angular/compiler-cli": "^15.2.10",
+    "@angular/language-service": "^15.2.10",
     "@types/jasmine": "^4.3.0",
     "@types/jasminewd2": "^2.0.10",
     "@types/node": "^18.7.18",
@@ -53,6 +53,6 @@
     "protractor": "~7.0.0",
     "ts-node": "~7.0.1",
     "tslint": "~6.1.0",
-    "typescript": "~4.6.4"
+    "typescript": "~4.9.5"
   }
 }

src/sartography_material.scss

@@ -1,5 +1,7 @@
+@use '@angular/material' as mat;
 @import "./config";
-@import '~@angular/material/theming';
+@import '@angular/material/theming';
+
 $custom-typography: mat-typography-config(
   $font-family: "Montserrat, sans-serif",
   $display-4: mat-typography-level(92px, 1.2, 300),
@@ -21,7 +23,9 @@ $custom-typography: mat-typography-config(
 @include angular-material-typography($custom-typography);
 
 // Override the typography in the core CSS.
-@include mat-core($custom-typography);
+//@include mat-core($custom-typography);
+@include mat.core();
+@include mat-base-typography($custom-typography);
 
 $sartography-teal: (
   50: #bee4e1,
@@ -155,7 +159,7 @@ $sartography-theme: mat-light-theme(
 
   h3,
   .mat-display-3 {
-    font-style: italic;
+//    font-style: italic;
   }
 
   .mat-display-4 {

src/test.ts

@@ -7,14 +7,8 @@ import {
   platformBrowserDynamicTesting
 } from '@angular/platform-browser-dynamic/testing';
 
-declare const require: any;
-
 // First, initialize the Angular testing environment.
 getTestBed().initTestEnvironment(
   BrowserDynamicTestingModule,
   platformBrowserDynamicTesting()
 );
-// Then we find all the tests.
-const context = require.context('./', true, /\.spec\.ts$/);
-// And load the modules.
-context.keys().map(context);

tsconfig.json

@@ -11,13 +11,14 @@
     "moduleResolution": "node",
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
-    "target": "es2020",
+    "target": "ES2022",
     "typeRoots": [
       "node_modules/@types"
     ],
     "lib": [
       "es2017",
       "dom"
-    ]
+    ],
+    "useDefineForClassFields": false
   }
 }