chore(deps): update angular material (#425)

* Update Angular Material to v17
* Update to use Angular CLI's new build system
* Update build output location

.github/workflows/azure-static-web-apps.yml

@@ -30,7 +30,7 @@ jobs:
           app_build_command: "npm run build:prod"
           app_location: "/" # App source code path
           api_location: "" # Api source code path - optional
-          output_location: "dist/rxtutor" # Built app content directory - optional
+          output_location: "dist/rxtutor/browser" # Built app content directory - optional
           skip_deploy_on_missing_secrets: true
           ###### End of Repository/Build Configurations ######
 

angular.json

@@ -18,15 +18,15 @@
       "prefix": "app",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular-devkit/build-angular:application",
           "options": {
             "allowedCommonJsDependencies": [
-              "codemirror/mode/javascript/javascript"
+              "codemirror"
             ],
             "outputPath": "dist/rxtutor",
             "index": "src/index.html",
-            "main": "src/main.ts",
-            "polyfills": "src/polyfills.ts",
+            "browser": "src/main.ts",
+            "polyfills": ["src/polyfills.ts"],
             "tsConfig": "tsconfig.app.json",
             "inlineStyleLanguage": "scss",
             "assets": [
@@ -73,9 +73,7 @@
               "outputHashing": "all"
             },
             "development": {
-              "buildOptimizer": false,
               "optimization": false,
-              "vendorChunk": true,
               "extractLicenses": false,
               "sourceMap": true,
               "namedChunks": true

package.json

@@ -21,12 +21,12 @@
   },
   "dependencies": {
     "@angular/animations": "^17.0.7",
-    "@angular/cdk": "^16.2.12",
+    "@angular/cdk": "^17.0.4",
     "@angular/common": "^17.0.7",
     "@angular/compiler": "^17.0.7",
     "@angular/core": "^17.0.7",
     "@angular/forms": "^17.0.7",
-    "@angular/material": "^16.2.12",
+    "@angular/material": "^17.0.4",
     "@angular/platform-browser": "^17.0.7",
     "@angular/platform-browser-dynamic": "^17.0.7",
     "@angular/router": "^17.0.7",

src/styles.scss

@@ -1,2 +1,2 @@
-@import "styles/theme.scss";
-@import "styles/main.scss";
+@use "styles/theme.scss";
+@use "styles/main.scss";

src/styles/mixins.scss

@@ -1,33 +1,35 @@
+@use "@angular/material" as mat;
+
 @mixin svg-theme($theme) {
-  $primary: map-get($theme, primary);
-  $accent: map-get($theme, accent);
-  $warn: map-get($theme, warn);
+  $primary: mat.get-theme-color($theme, primary, default);
+  $accent: mat.get-theme-color($theme, accent, default);
+  $warn: mat.get-theme-color($theme, warn, default);
 
   svg.stream {
     g.node {
       > circle {
         &.primary {
-          fill: mat-color($primary);
+          fill: $primary;
         }
 
         &.accent {
-          fill: mat-color($accent);
+          fill: $accent;
         }
       }
 
       > line {
         &.complete {
           &.primary {
-            stroke: mat-color($accent);
+            stroke: $accent;
           }
 
           &.accent {
-            stroke: mat-color($primary);
+            stroke: $primary;
           }
         }
 
         &.error {
-          stroke: mat-color($warn);
+          stroke: $warn;
         }
       }
     }

src/styles/theme.scss

@@ -1,7 +1,5 @@
 @use "@angular/material" as mat;
-
-@import "@angular/material/theming";
-@import "./mixins.scss";
+@use "mixins.scss" as mix;
 
 @include mat.core();
 
@@ -28,9 +26,9 @@ $dark-theme: mat.define-dark-theme(
 );
 
 @include mat.all-component-themes($light-theme);
-@include svg-theme($light-theme);
+@include mix.svg-theme($light-theme);
 
 .dark-mode {
   @include mat.all-component-colors($dark-theme);
-  @include svg-theme($dark-theme);
+  @include mix.svg-theme($dark-theme);
 }