Merge pull request #34 from philenius/feat/update-to-angular-19

feat: upgrade to Angular 19

Author: philenius

CHANGELOG.md

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

README.md

@@ -1,4 +1,3 @@
-
 # ngx-annotate-text
 
 <img alt="GitHub Workflow Status (branch)" src="https://img.shields.io/github/actions/workflow/status/philenius/ngx-annotate-text/main.yml?branch=main&style=for-the-badge"> <a href="https://github.com/philenius/ngx-annotate-text/issues"><img alt="GitHub issues" src="https://img.shields.io/github/issues/philenius/ngx-annotate-text?style=for-the-badge"></a> <img alt="GitHub" src="https://img.shields.io/github/license/philenius/ngx-annotate-text?style=for-the-badge"> <img alt="npm" src="https://img.shields.io/npm/v/ngx-annotate-text?style=for-the-badge">
@@ -34,25 +33,30 @@ View and edit the live demo Angular app on <a href="https://codesandbox.io/s/ngx
    npm install ngx-annotate-text
    ```
 
-2. Import the Angular module `NgxAnnotateTextModule`:
+2. In your Angular component import the `NgxAnnotateTextComponent` and create two properties for the text to be displayed and the list of annotations:
 
    ```typescript
-   import { BrowserModule } from "@angular/platform-browser";
-   import { NgModule } from "@angular/core";
-
-   import { AppComponent } from "./app.component";
-   import { NgxAnnotateTextModule } from "ngx-annotate-text";
+   import { Annotation, NgxAnnotateTextComponent } from 'ngx-annotate-text';
 
-   @NgModule({
-     declarations: [AppComponent],
-     imports: [BrowserModule, NgxAnnotateTextModule],
-     providers: [],
-     bootstrap: [AppComponent],
+   @Component({
+     selector: 'app-root',
+     imports: [NgxAnnotateTextComponent],
+     templateUrl: './app.component.html',
+     styleUrl: './app.component.css',
    })
-   export class AppModule {}
+   export class AppComponent {
+     annotations: Annotation[] = [
+       new Annotation(3, 11, 'Date', '#0d6efd'),
+       new Annotation(36, 45, 'City', '#dc3545'),
+       new Annotation(47, 52, 'Country', '#198754'),
+       new Annotation(77, 85, 'Time', '#6c757d'),
+     ];
+
+     text = 'On August 1, we went on vacation to Barcelona, Spain. Our flight took off at 11:00 am.';
+   }
    ```
 
-3. Add the component `ngx-annotate-text` to your template:
+3. Add the component `ngx-annotate-text` to your component's template:
 
    ```html
    <ngx-annotate-text
@@ -65,31 +69,7 @@ View and edit the live demo Angular app on <a href="https://codesandbox.io/s/ngx
    </ngx-annotate-text>
    ```
 
-4. Create properties in your component class for the text to be annotated and an (empty) array of annotations:
-
-   ```typescript
-   import { Component, ViewChild } from "@angular/core";
-   import { Annotation, NgxAnnotateTextComponent } from "ngx-annotate-text";
-
-   @Component({
-     selector: "app-root",
-     templateUrl: "./app.component.html",
-     styleUrls: ["./app.component.css"],
-   })
-   export class AppComponent {
-     text: string =
-       "On August 1, we went on vacation to Barcelona, Spain. Our flight took off at 11:00 am.";
-
-     annotations: Annotation[] = [
-       new Annotation(3, 11, "Date", "#0069d9"),
-       new Annotation(36, 45, "City", "#dc3545"),
-       new Annotation(47, 52, "Country", "#28a745"),
-       new Annotation(77, 85, "Time", "#5a6268"),
-     ];
-   }
-   ```
-
-5. Having set `annotationClass="my-annotation"`, a custom CSS styling can be applied by combining `::ng-deep` with the class selector `.my-annotation`, e.g., to remove the border-radius:
+3. Having set `annotationClass="my-annotation"`, a custom CSS styling can be applied by combining `::ng-deep` with the class selector `.my-annotation`, e.g., to remove the border-radius:
    ```css
    ::ng-deep .my-annotation .annotation-parent,
    ::ng-deep .my-annotation .annotation-content {
@@ -124,16 +104,18 @@ View and edit the live demo Angular app on <a href="https://codesandbox.io/s/ngx
 | getCurrentTextSelection              | Returns the start index and end index of the currently selected text range. Returns `undefined` if no text is currently selected. | `ISelection|undefined` |
 | isOverlappingWithExistingAnnotations | Returns true if the given text selection is (partially) overlapping with an existing annotation. Returns false otherwise. | `boolean`              |
 
+---
+
 ## Development
 
 ### Recreate project from scratch
 
 ```bash
-npm install -g @angular/cli@^18
+npm install -g @angular/cli@^19
 ng new ngx-annotate-text-workspace
 cd ngx-annotate-text-workspace/
 ng generate library ngx-annotate-text
-ng add angular-eslint@^18
+ng add angular-eslint@^19
 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

angular.json

@@ -37,8 +37,8 @@
                 },
                 {
                   "type": "anyComponentStyle",
-                  "maximumWarning": "2kB",
-                  "maximumError": "4kB"
+                  "maximumWarning": "4kB",
+                  "maximumError": "8kB"
                 }
               ],
               "outputHashing": "all"