eslint

angular.json

@@ -90,7 +90,8 @@
             "lintFilePatterns": [
               "projects/scion/components/**/*.ts",
               "projects/scion/components/**/*.html"
-            ]
+            ],
+            "eslintConfig": "projects/scion/components/eslint.config.js"
           }
         }
       }
@@ -105,7 +106,8 @@
             "lintFilePatterns": [
               "projects/scion/components.e2e/**/*.ts",
               "projects/scion/components.e2e/**/*.html"
-            ]
+            ],
+            "eslintConfig": "projects/scion/components.e2e/eslint.config.js"
           }
         }
       }
@@ -155,7 +157,8 @@
             "lintFilePatterns": [
               "projects/scion/components.internal/**/*.ts",
               "projects/scion/components.internal/**/*.html"
-            ]
+            ],
+            "eslintConfig": "projects/scion/components.internal/eslint.config.js"
           }
         }
       }
@@ -249,7 +252,8 @@
             "lintFilePatterns": [
               "apps/components/**/*.ts",
               "apps/components/**/*.html"
-            ]
+            ],
+            "eslintConfig": "apps/components/eslint.config.js"
           }
         }
       }
@@ -338,7 +342,8 @@
             "lintFilePatterns": [
               "apps/components-testing-app/**/*.ts",
               "apps/components-testing-app/**/*.html"
-            ]
+            ],
+            "eslintConfig": "apps/components-testing-app/eslint.config.js"
           }
         }
       }

apps/components-testing-app/eslint.config.js

@@ -0,0 +1,32 @@
+// @ts-check
+const tseslint = require("typescript-eslint");
+const rootConfig = require("../../eslint.config.js");
+
+module.exports = tseslint.config(
+  ...rootConfig,
+  {
+    files: ["**/*.ts"],
+    rules: {
+      "@angular-eslint/directive-selector": [
+        "error",
+        {
+          type: "attribute",
+          prefix: ["app"],
+          style: "camelCase",
+        },
+      ],
+      "@angular-eslint/component-selector": [
+        "error",
+        {
+          type: "element",
+          prefix: ["app"],
+          style: "kebab-case",
+        },
+      ],
+    },
+  },
+  {
+    files: ["**/*.html"],
+    rules: {},
+  },
+);

apps/components/eslint.config.js

@@ -0,0 +1,32 @@
+// @ts-check
+const tseslint = require("typescript-eslint");
+const rootConfig = require("../../eslint.config.js");
+
+module.exports = tseslint.config(
+  ...rootConfig,
+  {
+    files: ["**/*.ts"],
+    rules: {
+      "@angular-eslint/directive-selector": [
+        "error",
+        {
+          type: "attribute",
+          prefix: ["app", "sci"],
+          style: "camelCase",
+        },
+      ],
+      "@angular-eslint/component-selector": [
+        "error",
+        {
+          type: "element",
+          prefix: ["app", "sci"],
+          style: "kebab-case",
+        },
+      ],
+    },
+  },
+  {
+    files: ["**/*.html"],
+    rules: {},
+  },
+);

apps/components/src/app/app.component.ts

@@ -62,7 +62,7 @@ export class AppComponent {
             return tools.concat({
               routerPath: `/${route.path}`,
               name: route.path!,
-              internal: route.data?.['internal'] ?? false,
+              internal: route.data?.['internal'] as boolean ?? false,
             });
           }, new Array<Tool>())),
         sortArray((tool1, tool2) => Number(tool1.internal) - Number(tool2.internal)),

apps/components/src/app/sci-key-value-field-page/sci-key-value-field-page.component.ts

@@ -7,9 +7,9 @@
  *
  *  SPDX-License-Identifier: EPL-2.0
  */
-import {Component} from '@angular/core';
-import {FormArray, FormBuilder} from '@angular/forms';
-import {SciKeyValueFieldComponent} from '@scion/components.internal/key-value-field';
+import {Component, inject} from '@angular/core';
+import {FormGroup, NonNullableFormBuilder} from '@angular/forms';
+import {KeyValueEntry, SciKeyValueFieldComponent} from '@scion/components.internal/key-value-field';
 import {Dictionary} from '@scion/toolkit/util';
 import {JsonPipe} from '@angular/common';
 
@@ -24,13 +24,9 @@ import {JsonPipe} from '@angular/common';
 })
 export default class SciKeyValueFieldPageComponent {
 
-  public formArray: FormArray;
+  public formArray = inject(NonNullableFormBuilder).array<FormGroup<KeyValueEntry>>([]);
   public output: Dictionary | null = null;
 
-  constructor(fb: FormBuilder) {
-    this.formArray = fb.array([]);
-  }
-
   public onPrint(): void {
     this.output = SciKeyValueFieldComponent.toDictionary(this.formArray);
   }