Feature: upgrade to Angular 18

.editorconfig

@@ -10,6 +10,7 @@ trim_trailing_whitespace = true
 
 [*.ts]
 quote_type = single
+ij_typescript_use_double_quotes = false
 
 [*.md]
 max_line_length = off

.github/workflows/main.yml

@@ -14,13 +14,13 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: '18.x'
+          node-version: '22.x'
 
       - name: Install dependencies
         run: npm ci
 
       - name: Build
-        run: npm run build ngx-annotate-text '--configuration production'
+        run: npm run build:lib:prod
 
       - name: Lint
         run: npm run lint ngx-annotate-text
@@ -29,4 +29,4 @@ jobs:
         run: npm run test-headless ngx-annotate-text
 
       - name: Build Angular demo app
-        run: npm run build --omit=dev
+        run: npm run build

.github/workflows/publish.yml

@@ -12,13 +12,13 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: '20.x'
+          node-version: '22.x'
 
       - name: Install dependencies
         run: npm ci
 
       - name: Build
-        run: npm run build ngx-annotate-text '--configuration production'
+        run: npm run build:lib:prod
 
       - name: Lint
         run: npm run lint ngx-annotate-text

.gitignore

@@ -1,4 +1,4 @@
-# See http://help.github.com/ignore-files/ for more about ignoring files.
+# See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files.
 
 # Compiled output
 /dist

.nvmrc

@@ -1 +1 @@
-v20.11.1
+v22.11.0

CHANGELOG.md

@@ -1,5 +1,11 @@
 # CHANGELOG
 
+## 18.0.0
+
+Pull request: https://github.com/philenius/ngx-annotate-text/pull/30
+
+- Upgrade to Angular 18.2.0
+
 ## 17.3.0
 
 Pull request: https://github.com/philenius/ngx-annotate-text/pull/29

README.md

@@ -104,7 +104,7 @@ View and edit the live demo Angular app on <a href="https://codesandbox.io/s/ngx
 | Input                       | Description                                                  | Type               | Default value |
 | :-------------------------- | ------------------------------------------------------------ | ------------------ | :------------ |
 | annotations                 | Represents the parts of the given text which shall be annotated. | `Annotation[]`     | `[]`          |
-| annotationClass             | An optional CSS class applied to all elements which wrap the annotated parts of the given text. | `string|undefined` | `undefined`   |
+| annotationClass             | An optional CSS class applied to all elements which wrap the annotated parts of the given text. | `string\|undefined` | `undefined`   |
 | annotationRendererComponent | An optional Angular component that shall be used for rendering the annotation. By default, it uses the provided `NgxAnnotationRendererComponent`. You can implement your own annotation rendering component to customize the visualization of annotations. The custom component must implement the interface `NgxAnnotationRendererComponentInterface`. | `NgxAnnotationRendererComponentInterface` | `NgxAnnotationRendererComponent` |
 | removable                   | Determines whether annotations shall have a small button in the top right corner so that the user can remove an annotation. | `boolean`          | `true`        |
 | text                        | The text which shall be displayed and annotated.             | `string`           | empty string  |
@@ -129,12 +129,17 @@ View and edit the live demo Angular app on <a href="https://codesandbox.io/s/ngx
 ### Recreate project from scratch
 
 ```bash
-npm install -g @angular/cli@^17
+npm install -g @angular/cli@^18
 ng new ngx-annotate-text-workspace
 cd ngx-annotate-text-workspace/
 ng generate library ngx-annotate-text
-ng add @angular-eslint/schematics
-npm install prettier
+ng add angular-eslint@^18
+ng g angular-eslint:add-eslint-to-project ngx-annotate-text-workspace
+ng g angular-eslint:add-eslint-to-project ngx-annotate-text
+npm install prettier --save-dev
+ng build ngx-annotate-text
+ng lint
+ng test ngx-annotate-text
 ```
 
 ### Build

angular.json

@@ -18,7 +18,12 @@
             "browser": "src/main.ts",
             "polyfills": ["zone.js"],
             "tsConfig": "tsconfig.app.json",
-            "assets": ["src/favicon.ico", "src/assets"],
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "public"
+              }
+            ],
             "styles": ["src/styles.css"],
             "scripts": []
           },
@@ -27,13 +32,13 @@
               "budgets": [
                 {
                   "type": "initial",
-                  "maximumWarning": "500kb",
-                  "maximumError": "1mb"
+                  "maximumWarning": "500kB",
+                  "maximumError": "1MB"
                 },
                 {
                   "type": "anyComponentStyle",
-                  "maximumWarning": "2kb",
-                  "maximumError": "4kb"
+                  "maximumWarning": "2kB",
+                  "maximumError": "4kB"
                 }
               ],
               "outputHashing": "all"
@@ -59,18 +64,19 @@
           "defaultConfiguration": "development"
         },
         "extract-i18n": {
-          "builder": "@angular-devkit/build-angular:extract-i18n",
-          "options": {
-            "buildTarget": "ngx-annotate-text-workspace:build"
-          }
+          "builder": "@angular-devkit/build-angular:extract-i18n"
         },
         "test": {
           "builder": "@angular-devkit/build-angular:karma",
           "options": {
             "polyfills": ["zone.js", "zone.js/testing"],
             "tsConfig": "tsconfig.spec.json",
-            "karmaConfig": "karma.conf.js",
-            "assets": ["src/favicon.ico", "src/assets"],
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "public"
+              }
+            ],
             "styles": ["src/styles.css"],
             "scripts": []
           }
@@ -114,13 +120,11 @@
         "lint": {
           "builder": "@angular-eslint/builder:lint",
           "options": {
-            "lintFilePatterns": ["projects/ngx-annotate-text/**/*.ts", "projects/ngx-annotate-text/**/*.html"]
+            "lintFilePatterns": ["projects/ngx-annotate-text/**/*.ts", "projects/ngx-annotate-text/**/*.html"],
+            "eslintConfig": "projects/ngx-annotate-text/eslint.config.js"
           }
         }
       }
     }
-  },
-  "cli": {
-    "schematicCollections": ["@angular-eslint/schematics"]
   }
 }

eslint.config.js

@@ -0,0 +1,43 @@
+// @ts-check
+const eslint = require("@eslint/js");
+const tseslint = require("typescript-eslint");
+const angular = require("angular-eslint");
+
+module.exports = tseslint.config(
+  {
+    files: ["**/*.ts"],
+    extends: [
+      eslint.configs.recommended,
+      ...tseslint.configs.recommended,
+      ...tseslint.configs.stylistic,
+      ...angular.configs.tsRecommended,
+    ],
+    processor: angular.processInlineTemplates,
+    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"],
+    extends: [
+      ...angular.configs.templateRecommended,
+      ...angular.configs.templateAccessibility,
+    ],
+    rules: {},
+  }
+);