Add Angular Material

Integrated @angular/material and @angular/cdk into the project and created a custom theme using SCSS. Updated angular.json to include the new theme, added Roboto and Material Icons fonts in index.html, and improved global styles for Material compatibility.

angular.json

@@ -37,6 +37,7 @@
               }
             ],
             "styles": [
+              "src/custom-theme.scss",
               "src/styles.css"
             ]
           },

package-lock.json

@@ -8,10 +8,12 @@
       "name": "infinifront",
       "version": "0.0.0",
       "dependencies": {
+        "@angular/cdk": "^20.2.9",
         "@angular/common": "^20.3.0",
         "@angular/compiler": "^20.3.0",
         "@angular/core": "^20.3.0",
         "@angular/forms": "^20.3.0",
+        "@angular/material": "^20.2.9",
         "@angular/platform-browser": "^20.3.0",
         "@angular/router": "^20.3.0",
         "@infinimotion/model-frontend": "^0.0.2",
@@ -393,6 +395,22 @@
         }
       }
     },
+    "node_modules/@angular/cdk": {
+      "version": "20.2.9",
+      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-20.2.9.tgz",
+      "integrity": "sha512-rbY1AMz9389WJI29iAjWp4o0QKRQHCrQQUuP0ctNQzh1tgWpwiRLx8N4yabdVdsCA846vPsyKJtBlSNwKMsjJA==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "parse5": "^8.0.0",
+        "tslib": "^2.3.0"
+      },
+      "peerDependencies": {
+        "@angular/common": "^20.0.0 || ^21.0.0",
+        "@angular/core": "^20.0.0 || ^21.0.0",
+        "rxjs": "^6.5.3 || ^7.4.0"
+      }
+    },
     "node_modules/@angular/cli": {
       "version": "20.3.6",
       "dev": true,
@@ -511,6 +529,7 @@
     "node_modules/@angular/forms": {
       "version": "20.3.5",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "tslib": "^2.3.0"
       },
@@ -524,6 +543,23 @@
         "rxjs": "^6.5.3 || ^7.4.0"
       }
     },
+    "node_modules/@angular/material": {
+      "version": "20.2.9",
+      "resolved": "https://registry.npmjs.org/@angular/material/-/material-20.2.9.tgz",
+      "integrity": "sha512-xo/ozyRXCoJMi89XLTJI6fdPKBv2wBngWMiCrtTg23+pHbuyA/kDbk3v62eJkDD1xdhC4auXaIHu4Ddf5zTgSA==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "peerDependencies": {
+        "@angular/cdk": "20.2.9",
+        "@angular/common": "^20.0.0 || ^21.0.0",
+        "@angular/core": "^20.0.0 || ^21.0.0",
+        "@angular/forms": "^20.0.0 || ^21.0.0",
+        "@angular/platform-browser": "^20.0.0 || ^21.0.0",
+        "rxjs": "^6.5.3 || ^7.4.0"
+      }
+    },
     "node_modules/@angular/platform-browser": {
       "version": "20.3.5",
       "license": "MIT",
@@ -1263,8 +1299,8 @@
     },
     "node_modules/@infinimotion/model-frontend": {
       "version": "0.0.2",
-      "resolved": "https://git.chequeo.de/api/packages/infinimotion/npm/%40infinimotion%2Fmodel-frontend/-/0.0.2/model-frontend-0.0.2.tgz",
+      "resolved": "https://git.infinimotion.de/api/packages/infinimotion/npm/%40infinimotion%2Fmodel-frontend/-/0.0.2/model-frontend-0.0.2.tgz",
-      "integrity": "sha512-bjqYJ3SqAyfzvNtmk1SZrlU9mXAEfy7V5IhqPllkOxc6OyPqxIE0sZ5I8Ssh04hHYTBYD2GKLNlpJwxQumGanQ==",
+      "integrity": "sha512-EG+Z6wtLZ/+mU/j7KJpIkSCm1IBYVb30g1/k9vJhITNhGavjMLyzZXY/+Gd9zY3AZt664E9ziE3OGG5sY/Jshw==",
       "license": "ISC"
     },
     "node_modules/@inquirer/ansi": {
@@ -1812,8 +1848,6 @@
     },
     "node_modules/@lmdb/lmdb-win32-x64": {
       "version": "3.4.2",
-      "resolved": "https://registry.npmjs.org/@lmdb/lmdb-win32-x64/-/lmdb-win32-x64-3.4.2.tgz",
-      "integrity": "sha512-IY+r3bxKW6Q6sIPiMC0L533DEfRJSXibjSI3Ft/w9Q8KQBNqEIvUFXt+09wV8S5BRk0a8uSF19YWxuRwEfI90g==",
       "cpu": [
         "x64"
       ],
@@ -1938,8 +1972,6 @@
     },
     "node_modules/@msgpackr-extract/msgpackr-extract-win32-x64": {
       "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/@msgpackr-extract/msgpackr-extract-win32-x64/-/msgpackr-extract-win32-x64-3.0.3.tgz",
-      "integrity": "sha512-x0fWaQtYp4E6sktbsdAqnehxDgEc/VwM7uLsRCYWaiGu0ykYdZPiS8zCWdnjHwyiumousxfBm4SO31eXqwEZhQ==",
       "cpu": [
         "x64"
       ],
@@ -6288,8 +6320,6 @@
     },
     "node_modules/lmdb": {
       "version": "3.4.2",
-      "resolved": "https://registry.npmjs.org/lmdb/-/lmdb-3.4.2.tgz",
-      "integrity": "sha512-nwVGUfTBUwJKXd6lRV8pFNfnrCC1+l49ESJRM19t/tFb/97QfJEixe5DYRvug5JO7DSFKoKaVy7oGMt5rVqZvg==",
       "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
@@ -6737,8 +6767,6 @@
     },
     "node_modules/msgpackr": {
       "version": "1.11.5",
-      "resolved": "https://registry.npmjs.org/msgpackr/-/msgpackr-1.11.5.tgz",
-      "integrity": "sha512-UjkUHN0yqp9RWKy0Lplhh+wlpdt9oQBYgULZOiFhV3VclSF1JnSQWZ5r9gORQlNYaUKQoR8itv7g7z1xDDuACA==",
       "dev": true,
       "license": "MIT",
       "optional": true,
@@ -6748,8 +6776,6 @@
     },
     "node_modules/msgpackr-extract": {
       "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/msgpackr-extract/-/msgpackr-extract-3.0.3.tgz",
-      "integrity": "sha512-P0efT1C9jIdVRefqjzOQ9Xml57zpOXnIuS+csaB4MdZbTdmGDLo8XhzBG1N7aO11gKDDkJvBLULeFTo46wwreA==",
       "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
@@ -6803,8 +6829,6 @@
     },
     "node_modules/node-addon-api": {
       "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-6.1.0.tgz",
-      "integrity": "sha512-+eawOlIgy680F0kBzPUNFhMZGtJ1YmqM6l4+Crf4IkImjYrO/mqPwRMh352g23uIaQKFItcQ64I7KMaJxHgAVA==",
       "dev": true,
       "license": "MIT",
       "optional": true
@@ -6834,8 +6858,6 @@
     },
     "node_modules/node-gyp-build-optional-packages": {
       "version": "5.2.2",
-      "resolved": "https://registry.npmjs.org/node-gyp-build-optional-packages/-/node-gyp-build-optional-packages-5.2.2.tgz",
-      "integrity": "sha512-s+w+rBWnpTMwSFbaE0UXsRlg7hU4FjekKU4eyAih5T8nJuNZT1nNsskXpxmeqSK9UzkBl6UgRlnKc8hz8IEqOw==",
       "dev": true,
       "license": "MIT",
       "optional": true,
@@ -7132,8 +7154,6 @@
     },
     "node_modules/ordered-binary": {
       "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/ordered-binary/-/ordered-binary-1.6.0.tgz",
-      "integrity": "sha512-IQh2aMfMIDbPjI/8a3Edr+PiOpcsB7yo8NdW7aHWVaoR/pcDldunMvnnwbk/auPGqmKeAdxtZl7MHX/QmPwhvQ==",
       "dev": true,
       "license": "MIT",
       "optional": true
@@ -7309,7 +7329,6 @@
     },
     "node_modules/parse5": {
       "version": "8.0.0",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "entities": "^6.0.0"
@@ -7355,7 +7374,6 @@
     },
     "node_modules/parse5/node_modules/entities": {
       "version": "6.0.1",
-      "dev": true,
       "license": "BSD-2-Clause",
       "engines": {
         "node": ">=0.12"
@@ -8730,8 +8748,6 @@
     },
     "node_modules/weak-lru-cache": {
       "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/weak-lru-cache/-/weak-lru-cache-1.2.2.tgz",
-      "integrity": "sha512-DEAoo25RfSYMuTGc9vPJzZcZullwIqRDSI9LOy+fkCJPi6hykCnfKaXTuPBDuXAUcqHXyOgFtHNp/kB2FjYHbw==",
       "dev": true,
       "license": "MIT",
       "optional": true

package.json

@@ -22,10 +22,12 @@
   },
   "private": true,
   "dependencies": {
+    "@angular/cdk": "^20.2.9",
     "@angular/common": "^20.3.0",
     "@angular/compiler": "^20.3.0",
     "@angular/core": "^20.3.0",
     "@angular/forms": "^20.3.0",
+    "@angular/material": "^20.2.9",
     "@angular/platform-browser": "^20.3.0",
     "@angular/router": "^20.3.0",
     "@infinimotion/model-frontend": "^0.0.2",
@@ -49,4 +51,4 @@
     "karma-jasmine-html-reporter": "~2.1.0",
     "typescript": "~5.9.2"
   }
-}
+}

src/custom-theme.scss

@@ -0,0 +1,35 @@
+
+// Include theming for Angular Material with `mat.theme()`.
+// This Sass mixin will define CSS variables that are used for styling Angular Material
+// components according to the Material 3 design spec.
+// Learn more about theming and how to use it for your application's
+// custom components at https://material.angular.dev/guide/theming
+@use '@angular/material' as mat;
+
+html {
+  @include mat.theme((
+    color: (
+      primary: mat.$azure-palette,
+      tertiary: mat.$blue-palette,
+    ),
+    typography: Roboto,
+    density: 0,
+  ));
+}
+
+body {
+  // Default the application to a light color theme. This can be changed to
+  // `dark` to enable the dark color theme, or to `light dark` to defer to the
+  // user's system settings.
+  color-scheme: light;
+
+  // Set a default background, font and text colors for the application using
+  // Angular Material's system-level CSS variables. Learn more about these
+  // variables at https://material.angular.dev/guide/system-variables
+  background-color: var(--mat-sys-surface);
+  color: var(--mat-sys-on-surface);
+  font: var(--mat-sys-body-medium);
+
+  // Reset the user agent margin.
+  margin: 0;
+}

src/index.html

@@ -6,6 +6,8 @@
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 </head>
 <body>
   <app-root></app-root>

src/styles.css

@@ -1,2 +1,5 @@
 /* You can add global styles to this file, and also import other style files */
-@import "tailwindcss"
+@import "tailwindcss";
+
+html, body { height: 100%; }
+body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }