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.
2025-10-20 14:44:05 +02:00
parent a690c32583
commit afb3ec4a31
6 changed files with 83 additions and 24 deletions
--- a/angular.json
+++ b/angular.json
@@ -37,6 +37,7 @@
              }
            ],
            "styles": [
+              "src/custom-theme.scss",
              "src/styles.css"
            ]
          },
--- a/package-lock.json
+++ b/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",
-      "integrity": "sha512-bjqYJ3SqAyfzvNtmk1SZrlU9mXAEfy7V5IhqPllkOxc6OyPqxIE0sZ5I8Ssh04hHYTBYD2GKLNlpJwxQumGanQ==",
+      "resolved": "https://git.infinimotion.de/api/packages/infinimotion/npm/%40infinimotion%2Fmodel-frontend/-/0.0.2/model-frontend-0.0.2.tgz",
+      "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
--- a/package.json
+++ b/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"
  }
-}
+}
--- a/src/custom-theme.scss
+++ b/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;
+}
--- a/src/index.html
+++ b/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>
--- a/src/styles.css
+++ b/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; }