chore: update to ESLint v9 with flat config (#183)

Co-authored-by: Daniel Kimmich <json-derulo@users.noreply.github.com>

README.md

@@ -206,7 +206,7 @@ In case you are still using the legacy components, you can use the package [angu
 ## Angular compatibility table
 
 | Angular | angular-material-css-vars |
-|---------|---------------------------|
+| ------- | ------------------------- |
 | 19      | 8.x                       |
 | 18      | 7.x                       |
 | 17      | 6.x                       |

eslint.config.mjs

@@ -0,0 +1,59 @@
+import tseslint from "typescript-eslint";
+import angularEslint from "angular-eslint";
+
+export default tseslint.config(
+  {
+    files: ["**/*.ts"],
+    extends: [
+      ...tseslint.configs.strictTypeChecked,
+      ...tseslint.configs.stylisticTypeChecked,
+      ...angularEslint.configs.tsRecommended,
+    ],
+    processor: angularEslint.processInlineTemplates,
+    languageOptions: {
+      parserOptions: {
+        project: true,
+      },
+    },
+    rules: {
+      "@typescript-eslint/restrict-template-expressions": "off",
+      "@typescript-eslint/restrict-plus-operands": "off",
+      "@angular-eslint/component-selector": [
+        "error",
+        {
+          prefix: "app",
+          style: "kebab-case",
+          type: "element",
+        },
+      ],
+      "@angular-eslint/directive-selector": [
+        "error",
+        {
+          prefix: "app",
+          style: "camelCase",
+          type: "attribute",
+        },
+      ],
+    },
+  },
+  {
+    files: ["**/*.spec.ts"],
+    rules: {
+      "@typescript-eslint/dot-notation": "off",
+    },
+  },
+  {
+    files: ["**/*.html"],
+    extends: [
+      ...angularEslint.configs.templateRecommended,
+      ...angularEslint.configs.templateAccessibility,
+    ],
+    rules: {
+      "@angular-eslint/template/no-call-expression": "error",
+      "@angular-eslint/template/no-duplicate-attributes": "error",
+      "@angular-eslint/template/no-interpolation-in-attributes": "error",
+      "@angular-eslint/template/use-track-by-function": "error",
+      "@angular-eslint/template/prefer-self-closing-tags": "error",
+    },
+  },
+);