AW-6526 update angular 21

2026-01-19 18:25:47 +01:00 · 2026-01-19 14:36:49 +01:00 · 2026-01-19 14:13:57 +01:00 · 2026-01-19 13:56:07 +01:00 · 2026-01-19 13:43:12 +01:00 · 2026-01-19 13:35:27 +01:00
153 changed files with 9274 additions and 7829 deletions
--- a/README.md
+++ b/README.md
@@ -52,7 +52,7 @@ ng serve
 ```
 *Go*`

-Point your browser to http://localhost:4200 
+Point your browser to http://localhost:4200

 *ESLint*

@@ -61,4 +61,4 @@ npm run lint src
 npm run lint projects/common/src
 npm run lint projects/common-map/src
 npm run lint projects/common-map3d/src
-```
+```
--- a/angular.json
+++ b/angular.json
@@ -133,10 +133,39 @@
          }
        },
        "test": {
-          "builder": "@angular/build:unit-test",
+          "builder": "@angular-devkit/build-angular:karma",
          "options": {
+            "main": "src/test.ts",
+            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
-            "browsers": ["chromium"]
+            "karmaConfig": "src/karma.conf.js",
+            "styles": [
+              "src/styles.css"
+            ],
+            "scripts": [],
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ]
+          }
+        }
+      }
+    },
+    "farmmaps-lib-app-e2e": {
+      "root": "e2e/",
+      "projectType": "application",
+      "prefix": "",
+      "architect": {
+        "e2e": {
+          "builder": "@angular-devkit/build-angular:protractor",
+          "options": {
+            "protractorConfig": "e2e/protractor.conf.js",
+            "devServerTarget": "farmmaps-lib-app:serve"
+          },
+          "configurations": {
+            "production": {
+              "devServerTarget": "farmmaps-lib-app:serve:production"
+            }
          }
        }
      }
@@ -160,10 +189,11 @@
          }
 },
        "test": {
-          "builder": "@angular/build:unit-test",
+          "builder": "@angular-devkit/build-angular:karma",
          "options": {
+            "main": "projects/common/src/test.ts",
            "tsConfig": "projects/common/tsconfig.spec.json",
-            "browsers": ["chromium"]
+            "karmaConfig": "projects/common/karma.conf.js"
          }
        }
      }
@@ -187,10 +217,11 @@
          }
        },
        "test": {
-          "builder": "@angular/build:unit-test",
+          "builder": "@angular-devkit/build-angular:karma",
          "options": {
+            "main": "projects/common-map/src/test.ts",
            "tsConfig": "projects/common-map/tsconfig.spec.json",
-            "browsers": ["chromium"]
+            "karmaConfig": "projects/common-map/karma.conf.js"
          }
        }
      }
@@ -214,10 +245,11 @@
          }
        },
        "test": {
-          "builder": "@angular/build:unit-test",
+          "builder": "@angular-devkit/build-angular:karma",
          "options": {
+            "main": "projects/common-map3d/src/test.ts",
            "tsConfig": "projects/common-map3d/tsconfig.spec.json",
-            "browsers": ["chromium"]
+            "karmaConfig": "projects/common-map3d/karma.conf.js"
          }
        }
      }
@@ -241,10 +273,11 @@
          }
        },
        "test": {
-          "builder": "@angular/build:unit-test",
+          "builder": "@angular-devkit/build-angular:karma",
          "options": {
+            "main": "projects/ng-openlayers/src/test.ts",
            "tsConfig": "projects/ng-openlayers/tsconfig.spec.json",
-            "browsers": ["chromium"]
+            "karmaConfig": "projects/ng-openlayers/karma.conf.js"
          }
        },
        "lint": {
--- a/e2e/protractor.conf.js
+++ b/e2e/protractor.conf.js
@@ -0,0 +1,28 @@
+// Protractor configuration file, see link for more information
+// https://github.com/angular/protractor/blob/master/lib/config.ts
+
+const { SpecReporter } = require('jasmine-spec-reporter');
+
+exports.config = {
+  allScriptsTimeout: 11000,
+  specs: [
+    './src/**/*.e2e-spec.ts'
+  ],
+  capabilities: {
+    'browserName': 'chrome'
+  },
+  directConnect: true,
+  baseUrl: 'http://localhost:4200/',
+  framework: 'jasmine',
+  jasmineNodeOpts: {
+    showColors: true,
+    defaultTimeoutInterval: 30000,
+    print: function() {}
+  },
+  onPrepare() {
+    require('ts-node').register({
+      project: require('path').join(__dirname, './tsconfig.e2e.json')
+    });
+    jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
+  }
+};
--- a/e2e/src/app.e2e-spec.ts
+++ b/e2e/src/app.e2e-spec.ts
@@ -0,0 +1,23 @@
+import { AppPage } from './app.po';
+import { browser, logging } from 'protractor';
+
+describe('workspace-project App', () => {
+  let page: AppPage;
+
+  beforeEach(() => {
+    page = new AppPage();
+  });
+
+  it('should display welcome message', () => {
+    page.navigateTo();
+    expect(page.getTitleText()).toEqual('Welcome to farmmaps-lib-app!');
+  });
+
+  afterEach(async () => {
+    // Assert that there are no errors emitted from the browser
+    const logs = await browser.manage().logs().get(logging.Type.BROWSER);
+    expect(logs).not.toContain(jasmine.objectContaining({
+      level: logging.Level.SEVERE,
+    } as logging.Entry));
+  });
+});
--- a/e2e/src/app.po.ts
+++ b/e2e/src/app.po.ts
@@ -0,0 +1,11 @@
+import { browser, by, element } from 'protractor';
+
+export class AppPage {
+  navigateTo() {
+    return browser.get(browser.baseUrl) as Promise<any>;
+  }
+
+  getTitleText() {
+    return element(by.css('app-root h1')).getText() as Promise<string>;
+  }
+}
--- a/e2e/tsconfig.e2e.json
+++ b/e2e/tsconfig.e2e.json
@@ -0,0 +1,13 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../out-tsc/app",
+    "module": "commonjs",
+    "target": "es5",
+    "types": [
+      "jasmine",
+      "jasminewd2",
+      "node"
+    ]
+  }
+}
--- a/migrations/v19/ng_update_angularcore@19_angularcli@19.txt
+++ b/migrations/v19/ng_update_angularcore@19_angularcli@19.txt
@@ -0,0 +1,224 @@
+PS DFarmmapsFarmMapsLib ng update @angularcore@19 @angularcli@19
+The installed Angular CLI version is outdated.
+Installing a temporary Angular CLI versioned 19.2.19 to perform the update.
+Using package manager npm
+Collecting installed dependencies...
+Found 68 dependencies.
+Fetching dependency metadata from registry...
+    Updating package.json with dependency @angular-devkitbuild-angular @ 19.2.19 (was 18.2.3)...
+    Updating package.json with dependency @angularcli @ 19.2.19 (was 18.2.3)...
+    Updating package.json with dependency @angularcompiler-cli @ 19.2.18 (was 18.2.3)...
+    Updating package.json with dependency @angularlanguage-service @ 19.2.18 (was 18.2.3)...
+    Updating package.json with dependency @angularlocalize @ 19.2.18 (was 18.2.3)...
+    Updating package.json with dependency ng-packagr @ 19.2.2 (was 18.2.1)...
+    Updating package.json with dependency typescript @ 5.8.3 (was 5.4.4)...
+    Updating package.json with dependency @angularanimations @ 19.2.18 (was 18.2.3)...
+    Updating package.json with dependency @angularcommon @ 19.2.18 (was 18.2.3)...
+    Updating package.json with dependency @angularcompiler @ 19.2.18 (was 18.2.3)...
+    Updating package.json with dependency @angularcore @ 19.2.18 (was 18.2.3)...
+    Updating package.json with dependency @angularforms @ 19.2.18 (was 18.2.3)...
+    Updating package.json with dependency @angularplatform-browser @ 19.2.18 (was 18.2.3)...
+    Updating package.json with dependency @angularplatform-browser-dynamic @ 19.2.18 (was 18.2.3)...
+    Updating package.json with dependency @angularrouter @ 19.2.18 (was 18.2.3)...
+    Updating package.json with dependency zone.js @ 0.15.1 (was 0.14.10)...
+UPDATE package.json (2923 bytes)
+✔ Cleaning node modules directory
+✔ Installing packages
+ Executing migrations of package '@angularcli' 
+
+❯ Update '@angularssr' import paths to use the new 'node' entry point when 'CommonEngine' is detected.
+  Migration completed (No changes made).
+
+❯ Update the workspace configuration by replacing deprecated options in 'angular.json' for compatibility with the latest Angular CLI changes.
+UPDATE angular.json (9341 bytes)
+  Migration completed (1 file modified).
+
+ Optional migrations of package '@angularcli' 
+
+This package has 1 optional migration that can be executed.
+Optional migrations may be skipped and executed after the update process, if preferred.
+
+Select the migrations that you'd like to run [use-application-builder] Migrate application projects to the new build system.
+(httpsangular.devtoolsclibuild-system-migration)
+
+❯ Migrate application projects to the new build system.
+  Application projects that are using the '@angular-devkitbuild-angular' package's 'browser' andor 'browser-esbuild' builders will be migrated to use the new 'application' builder.
+  You can read more about this, including known issues and limitations, here httpsangular.devtoolsclibuild-system-migration
+    Cannot update project farmmaps-lib-app to use the application builder. Only @angular-devkitbuild-angularbrowser-esbuild and @angular-devkitbuild-angularbrowser can be automatically migrated.
+UPDATE tsconfig.json (902 bytes)
+  Migration completed (1 file modified).
+
+ Executing migrations of package '@angularcore' 
+
+❯ Updates non-standalone Directives, Component and Pipes to 'standalonefalse' and removes 'standalonetrue' from those who are standalone.
+UPDATE srcappapp.component.ts (374 bytes)
+UPDATE srcapplogologo.component.ts (349 bytes)
+UPDATE srcappmenumenu.component.ts (750 bytes)
+UPDATE srcappregisterdeviceregisterdevice.component.ts (334 bytes)
+UPDATE projectscommonsrcfmcomponentsauth-callbackauth-callback.component.ts (731 bytes)
+UPDATE projectscommonsrcfmcomponentssession-clearedsession-cleared.component.ts (755 bytes)
+UPDATE projectscommonsrcfmcomponentsnot-foundnot-found.component.ts (315 bytes)
+UPDATE projectscommonsrcfmcomponentsapp-menuapp-menu.component.ts (870 bytes)
+UPDATE projectscommonsrcfmcomponentsappapp.component.ts (8994 bytes)
+UPDATE projectscommonsrcfmcomponentsavataravatar.component.ts (1240 bytes)
+UPDATE projectscommonsrcfmcomponentsback-buttonback-button.component.ts (712 bytes)
+UPDATE projectscommonsrcfmcomponentsedit-image-modaledit-image-modal.component.ts (2388 bytes)
+UPDATE projectscommonsrcfmcomponentsgradient-selectgradient-select.component.ts (1714 bytes)
+UPDATE projectscommonsrcfmcomponentsgradientgradient.component.ts (1423 bytes)
+UPDATE projectscommonsrcfmcomponentshas-claimhas-claim.directive.ts (1217 bytes)
+UPDATE projectscommonsrcfmcomponentshas-packagehas-package.directive.ts (1889 bytes)
+UPDATE projectscommonsrcfmcomponentshas-rolehas-role.directive.ts (1216 bytes)
+UPDATE projectscommonsrcfmcomponentshelp-menuhelp-menu.component.ts (908 bytes)
+UPDATE projectscommonsrcfmcomponentssetting-menusetting-menu.component.ts (958 bytes)
+UPDATE projectscommonsrcfmcomponentsitem-linkitem-link.component.ts (1304 bytes)
+UPDATE projectscommonsrcfmcomponentsmenu-backgroundmenu-background.component.ts (800 bytes)
+UPDATE projectscommonsrcfmcomponentsnot-implementednot-implemented.component.ts (280 bytes)
+UPDATE projectscommonsrcfmcomponentsnotification-menunotification-menu.component.ts (941 bytes)
+UPDATE projectscommonsrcfmcomponentspackage-existspackage-exists.directive.ts (1898 bytes)
+UPDATE projectscommonsrcfmcomponentsresumable-file-uploadresumable-file-upload.component.ts (1774 bytes)
+UPDATE projectscommonsrcfmcomponentsside-panelside-panel.component.ts (2839 bytes)
+UPDATE projectscommonsrcfmcomponentstag-inputtag-input.component.ts (2990 bytes)
+UPDATE projectscommonsrcfmcomponentsthumbnailthumbnail.component.ts (2968 bytes)
+UPDATE projectscommonsrcfmcomponentstimespantimespan.component.ts (22797 bytes)
+UPDATE projectscommonsrcfmcomponentsuser-menuuser-menu.component.ts (1174 bytes)
+UPDATE projectscommonsrcfmsharedsafe.pipe.ts (352 bytes)
+UPDATE srcapptesttest.component.ts (784 bytes)
+UPDATE srcapplandingpagelandingpage.component.ts (482 bytes)
+UPDATE projectscommon-mapsrcfm-mapcomponentsaolfile-drop-targetfile-drop-target.component.ts (2615 bytes)
+UPDATE projectscommon-mapsrcfm-mapcomponentsmapmap.component.ts (22343 bytes)
+UPDATE projectscommon-mapsrcfm-mapcomponentsaolgps-locationgps-location.component.ts (2719 bytes)
+UPDATE projectscommon-mapsrcfm-mapcomponentsaolitem-layersitem-layers.component.ts (20542 bytes)
+UPDATE projectscommon-mapsrcfm-mapcomponentsaolitem-vector-sourceitem-vector-source.component.ts (9990 bytes)
+UPDATE projectscommon-mapsrcfm-mapcomponentsaollayer-listlayer-list.component.ts (2070 bytes)
+UPDATE projectscommon-mapsrcfm-mapcomponentsaollayer-valueslayer-values.component.ts (2528 bytes)
+UPDATE projectscommon-mapsrcfm-mapcomponentsaollayer-vector-imagelayer-vector-image.component.ts (882 bytes)
+UPDATE projectscommon-mapsrcfm-mapcomponentsaolpan-to-locationpan-to-location.component.ts (2836 bytes)
+UPDATE projectscommon-mapsrcfm-mapcomponentsaolrotation-resetrotation-reset.component.ts (1054 bytes)
+UPDATE projectscommon-mapsrcfm-mapcomponentsaolzoom-to-extentzoom-to-extent.component.ts (2064 bytes)
+UPDATE projectscommon-mapsrcfm-mapcomponentsfeature-listfeature-list.component.ts (2505 bytes)
+UPDATE projectscommon-mapsrcfm-mapcomponentswidget-hostwidget-host.directive.ts (236 bytes)
+UPDATE projectscommon-mapsrcfm-mapcomponentsfeature-list-containerfeature-list-container.component.ts (4111 bytes)
+UPDATE projectscommon-mapsrcfm-mapcomponentsfeature-list-cropfieldfeature-list-cropfield.component.ts (1336 bytes)
+UPDATE projectscommon-mapsrcfm-mapcomponentsfeature-list-observationfeature-list-observation.component.ts (1346 bytes)
+UPDATE projectscommon-mapsrcfm-mapcomponentsfeature-list-croppingschemefeature-list-croppingscheme.component.ts (1497 bytes)
+UPDATE projectscommon-mapsrcfm-mapcomponentsfeature-list-featurefeature-list-feature.component.ts (1090 bytes)
+UPDATE projectscommon-mapsrcfm-mapcomponentsfeature-list-feature-containerfeature-list-feature-container.component.ts (2433 bytes)
+UPDATE projectscommon-mapsrcfm-mapcomponentsfeature-list-feature-cropfieldfeature-list-feature-cropfield.component.ts (1389 bytes)
+UPDATE projectscommon-mapsrcfm-mapcomponentsfeature-list-feature-croppingschemefeature-list-feature-croppingscheme.component.ts (1026 bytes)
+UPDATE projectscommon-mapsrcfm-mapcomponentsfeature-thumbnailfeature-thumbnail.component.ts (2709 bytes)
+UPDATE projectscommon-mapsrcfm-mapcomponentsif-zoom-to-showif-zoom-to-show.directive.ts (1853 bytes)
+UPDATE projectscommon-mapsrcfm-mapcomponentsitem-list-itemitem-list-item.component.ts (1476 bytes)
+UPDATE projectscommon-mapsrcfm-mapcomponentsitem-list-item-containeritem-list-item-container.component.ts (2644 bytes)
+UPDATE projectscommon-mapsrcfm-mapcomponentsitem-listitem-list.component.ts (1373 bytes)
+UPDATE projectscommon-mapsrcfm-mapcomponentsitem-widget-listitem-widget-list.component.ts (1963 bytes)
+UPDATE projectscommon-mapsrcfm-mapcomponentslayer-switcherlayer-switcher.component.ts (3132 bytes)
+UPDATE projectscommon-mapsrcfm-mapcomponentslegendhistogram-detailshistogram-details.component.ts (784 bytes)
+UPDATE projectscommon-mapsrcfm-mapcomponentslegendlegend.component.ts (2698 bytes)
+UPDATE projectscommon-mapsrcfm-mapcomponentslegendstatistics-detailsstatistics-details.component.ts (848 bytes)
+UPDATE projectscommon-mapsrcfm-mapcomponentsmap-searchmap-search.component.ts (7783 bytes)
+UPDATE projectscommon-mapsrcfm-mapcomponentsmeta-data-modalmeta-data-modal.component.ts (2038 bytes)
+UPDATE projectscommon-mapsrcfm-mapcomponentsselect-period-modalselect-period-modal.component.ts (3542 bytes)
+UPDATE projectscommon-mapsrcfm-mapcomponentsselected-itemselected-item.component.ts (3209 bytes)
+UPDATE projectscommon-mapsrcfm-mapcomponentsselected-item-containerselected-item-container.component.ts (3273 bytes)
+UPDATE projectscommon-mapsrcfm-mapcomponentsselected-item-cropfieldselected-item-cropfield.component.ts (2748 bytes)
+UPDATE projectscommon-mapsrcfm-mapcomponentsselected-item-geotiffselected-item-geotiff.component.ts (2102 bytes)
+UPDATE projectscommon-mapsrcfm-mapcomponentsselected-item-shapeselected-item-shape.component.ts (2125 bytes)
+UPDATE projectscommon-mapsrcfm-mapcomponentsselected-item-temporalselected-item-temporal.component.ts (3034 bytes)
+UPDATE projectscommon-mapsrcfm-mapcomponentswidget-statuswidget-status.component.ts (516 bytes)
+UPDATE projectscommon-mapsrcfm-mapcomponentszoom-to-show-alertzoom-to-show-alert.component.ts (570 bytes)
+UPDATE projectscommon-map3dsrcfm-map3dcomponentsolcsswitch2d3dswitch2d3d.component.ts (2652 bytes)
+UPDATE srcappadminadmin.component.ts (211 bytes)
+UPDATE projectsng-openlayerssrclibmap.component.ts (5228 bytes)
+UPDATE projectsng-openlayerssrcliblayerslayergroup.component.ts (734 bytes)
+UPDATE projectsng-openlayerssrcliblayerslayervector.component.ts (1117 bytes)
+UPDATE projectsng-openlayerssrclibsourcesvector.component.ts (1032 bytes)
+UPDATE projectsng-openlayerssrclibfeature.component.ts (914 bytes)
+UPDATE projectsng-openlayerssrclibview.component.ts (3777 bytes)
+UPDATE projectsng-openlayerssrclibgraticule.component.ts (1428 bytes)
+UPDATE projectsng-openlayerssrcliblayerslayerimage.component.ts (986 bytes)
+UPDATE projectsng-openlayerssrcliblayerslayertile.component.ts (920 bytes)
+UPDATE projectsng-openlayerssrcliblayerslayervectortile.component.ts (1334 bytes)
+UPDATE projectsng-openlayerssrclibtilegrid.component.ts (976 bytes)
+UPDATE projectsng-openlayerssrclibsourcesxyz.component.ts (2744 bytes)
+UPDATE projectsng-openlayerssrclibsourcesosm.component.ts (1908 bytes)
+UPDATE projectsng-openlayerssrclibsourcesbingmaps.component.ts (1184 bytes)
+UPDATE projectsng-openlayerssrclibsourcescluster.component.ts (1444 bytes)
+UPDATE projectsng-openlayerssrclibtilegridwmts.component.ts (714 bytes)
+UPDATE projectsng-openlayerssrclibsourcestilewmts.component.ts (3079 bytes)
+UPDATE projectsng-openlayerssrclibsourcesvectortile.component.ts (1842 bytes)
+UPDATE projectsng-openlayerssrclibsourcestilewms.component.ts (1518 bytes)
+UPDATE projectsng-openlayerssrclibsourcestilejson.component.ts (775 bytes)
+UPDATE projectsng-openlayerssrclibsourcesgeojson.component.ts (1095 bytes)
+UPDATE projectsng-openlayerssrclibsourcesimagestatic.component.ts (2471 bytes)
+UPDATE projectsng-openlayerssrclibsourcesimagewms.component.ts (2109 bytes)
+UPDATE projectsng-openlayerssrclibsourcesimagearcgisrest.component.ts (2059 bytes)
+UPDATE projectsng-openlayerssrclibsourcesraster.component.ts (1768 bytes)
+UPDATE projectsng-openlayerssrclibgeomgeometrycircle.component.ts (905 bytes)
+UPDATE projectsng-openlayerssrclibgeomgeometrylinestring.component.ts (765 bytes)
+UPDATE projectsng-openlayerssrclibgeomgeometrymultilinestring.component.ts (816 bytes)
+UPDATE projectsng-openlayerssrclibgeomgeometrymultipoint.component.ts (765 bytes)
+UPDATE projectsng-openlayerssrclibgeomgeometrymultipolygon.component.ts (841 bytes)
+UPDATE projectsng-openlayerssrclibgeomgeometrypoint.component.ts (706 bytes)
+UPDATE projectsng-openlayerssrclibgeomgeometrypolygon.component.ts (784 bytes)
+UPDATE projectsng-openlayerssrclibcontent.component.ts (248 bytes)
+UPDATE projectsng-openlayerssrcliboverlay.component.ts (1218 bytes)
+UPDATE projectsng-openlayerssrclibcoordinate.component.ts (2457 bytes)
+UPDATE projectsng-openlayerssrclibcollectioncoordinates.component.ts (3392 bytes)
+UPDATE projectsng-openlayerssrclibstylesstyle.component.ts (1421 bytes)
+UPDATE projectsng-openlayerssrclibstylescircle.component.ts (1621 bytes)
+UPDATE projectsng-openlayerssrclibstylestext.component.ts (2204 bytes)
+UPDATE projectsng-openlayerssrclibstylesstroke.component.ts (2972 bytes)
+UPDATE projectsng-openlayerssrclibstylesicon.component.ts (2091 bytes)
+UPDATE projectsng-openlayerssrclibstylesfill.component.ts (2201 bytes)
+UPDATE projectsng-openlayerssrclibcontrolsdefault.component.ts (1189 bytes)
+UPDATE projectsng-openlayerssrclibcontrolscontrol.component.ts (914 bytes)
+UPDATE projectsng-openlayerssrclibcontrolsattribution.component.ts (898 bytes)
+UPDATE projectsng-openlayerssrclibcontrolsfullscreen.component.ts (880 bytes)
+UPDATE projectsng-openlayerssrclibcontrolsmouseposition.component.ts (1033 bytes)
+UPDATE projectsng-openlayerssrclibcontrolsoverviewmap.component.ts (1292 bytes)
+UPDATE projectsng-openlayerssrclibcontrolsrotate.component.ts (853 bytes)
+UPDATE projectsng-openlayerssrclibcontrolsscaleline.component.ts (680 bytes)
+UPDATE projectsng-openlayerssrclibcontrolszoom.component.ts (916 bytes)
+UPDATE projectsng-openlayerssrclibcontrolszoomslider.component.ts (862 bytes)
+UPDATE projectsng-openlayerssrclibcontrolszoomtoextent.component.ts (911 bytes)
+UPDATE projectsng-openlayerssrclibformatsmvt.component.ts (667 bytes)
+UPDATE projectsng-openlayerssrclibinteractionsdefault.component.ts (1075 bytes)
+UPDATE projectsng-openlayerssrclibinteractionsdoubleclickzoom.component.ts (689 bytes)
+UPDATE projectsng-openlayerssrclibinteractionsdraganddrop.component.ts (824 bytes)
+UPDATE projectsng-openlayerssrclibinteractionsdragbox.component.ts (805 bytes)
+UPDATE projectsng-openlayerssrclibinteractionsdragpan.component.ts (739 bytes)
+UPDATE projectsng-openlayerssrclibinteractionsdragrotate.component.ts (720 bytes)
+UPDATE projectsng-openlayerssrclibinteractionsdragrotateandzoom.component.ts (755 bytes)
+UPDATE projectsng-openlayerssrclibinteractionsdragzoom.component.ts (769 bytes)
+UPDATE projectsng-openlayerssrclibinteractionsmousewheelzoom.component.ts (719 bytes)
+UPDATE projectsng-openlayerssrclibinteractionspinchzoom.component.ts (674 bytes)
+UPDATE projectsng-openlayerssrclibinteractionsdraw.component.ts (2579 bytes)
+UPDATE projectsng-openlayerssrclibinteractionskeyboardpan.component.ts (674 bytes)
+UPDATE projectsng-openlayerssrclibinteractionskeyboardzoom.component.ts (673 bytes)
+UPDATE projectsng-openlayerssrclibinteractionsselect.component.ts (2121 bytes)
+UPDATE projectsng-openlayerssrclibinteractionsmodify.component.ts (2173 bytes)
+UPDATE projectsng-openlayerssrclibinteractionstranslate.component.ts (2062 bytes)
+UPDATE projectsng-openlayerssrclibattribution.component.ts (379 bytes)
+UPDATE projectsng-openlayerssrclibattributions.component.ts (869 bytes)
+UPDATE projectsng-openlayerssrclibsourcesutfgrid.component.ts (841 bytes)
+  Migration completed (150 files modified).
+
+❯ Updates ExperimentalPendingTasks to PendingTasks.
+  Migration completed (No changes made).
+
+❯ Adds `BootstrapContext` to `bootstrapApplication` calls in `main.server.ts` to support server rendering.
+  Migration completed (No changes made).
+
+ Optional migrations of package '@angularcore' 
+
+This package has 1 optional migration that can be executed.
+Optional migrations may be skipped and executed after the update process, if preferred.
+
+Select the migrations that you'd like to run [provide-initializer] Replaces `APP_INITIALIZER`, `ENVIRONMENT_INITIALIZER` & `PLATFORM_INITIALIZER` respectively with
+`provideAppInitializer`, `provideEnvironmentInitializer` & `providePlatformInitializer`.
+
+❯ Replaces `APP_INITIALIZER`, `ENVIRONMENT_INITIALIZER` & `PLATFORM_INITIALIZER` respectively with `provideAppInitializer`, `provideEnvironmentInitializer` & `providePlatformInitializer`.
+UPDATE projectscommonsrcfmcommon-service.module.ts (3960 bytes)
+  Migration completed (1 file modified).
+
+PS DFarmmapsFarmMapsLib
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
  "name": "farmmaps-lib-app",
-  "version": "4.22.0",
-  "scripts":   {
+  "version": "4.19.0",
+  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
@@ -10,44 +10,44 @@
    "e2e": "ng e2e"
  },
  "private": true,
-  "dependencies":   {
-    "@angular-eslint/eslint-plugin": "20.7.0",
-    "@angular/animations": "^21.1.0",
-    "@angular/common": "^21.1.0",
-    "@angular/compiler": "^21.1.0",
-    "@angular/core": "^21.1.0",
-    "@angular/forms": "^21.1.0",
-    "@angular/platform-browser": "^21.1.0",
-    "@angular/platform-browser-dynamic": "^21.1.0",
-    "@angular/router": "^21.1.0",
+  "dependencies": {
+    "@angular-eslint/eslint-plugin": "21.1.0",
+    "@angular/animations": "21.1.0",
+    "@angular/common": "21.1.0",
+    "@angular/compiler": "21.1.0",
+    "@angular/core": "21.1.0",
+    "@angular/forms": "21.1.0",
+    "@angular/platform-browser": "21.1.0",
+    "@angular/platform-browser-dynamic": "21.1.0",
+    "@angular/router": "21.1.0",
    "@farmmaps/common": "file:dist/common",
    "@farmmaps/common-map": "file:dist/common-map",
    "@farmmaps/common-map3d": "file:dist/common-map3d",
    "@farmmaps/ng-openlayers": "file:dist/ng-openlayers",
-    "@microsoft/signalr": "^10.0.0",
+    "@microsoft/signalr": "10.0.0",
    "@ng-bootstrap/ng-bootstrap": "^20.0.0",
-    "@ngrx/effects": "^21.0.1",
-    "@ngrx/router-store": "^21.0.1",
-    "@ngrx/store": "^21.0.1",
-    "@popperjs/core": "2.11.8",
-    "angular-oauth2-oidc": "^20.0.2",
-    "assert": "^2.1.0",
-    "bootstrap": "^5.3.8",
+    "@ngrx/effects": "21.0.1",
+    "@ngrx/router-store": "21.0.1",
+    "@ngrx/store": "21.0.1",
+    "@popperjs/core": "^2.11.8",
+    "angular-oauth2-oidc": "20.0.2",
+    "assert": "^2.0.0",
+    "bootstrap": "5.3.8",
    "browserify-zlib": "^0.2.0",
    "buffer": "^6.0.3",
    "cesium": "^1.97.0",
-    "core-js": "^3.48.0",
+    "core-js": "^2.6.12",
    "https-browserify": "^1.0.0",
    "moment": "^2.29.4",
-    "ngrx-store-localstorage": "^20.1.0",
+    "ngrx-store-localstorage": "20.1.0",
    "ngx-avatars": "1.10.1",
    "ngx-clipboard": "^16.0.0",
-    "ngx-image-cropper": "^7.0.0",
-    "ngx-uploadx": "^7.0.1",
+    "ngx-image-cropper": "9.1.6",
+    "ngx-uploadx": "7.0.1",
    "ol": "^8.2.0",
    "olcs": "^2.13.1",
    "resumablejs": "^1.1.0",
-    "rxjs": "^7.8.0",
+    "rxjs": "7.8.1",
    "stream": "^0.0.2",
    "stream-http": "^3.2.0",
    "tassign": "^1.0.0",
@@ -56,44 +56,46 @@
    "util": "^0.12.4",
    "zone.js": "~0.15.1"
  },
-  "optionalDependencies":   {
+  "optionalDependencies": {
    "@lmdb/lmdb-linux-x64": "^3.1.0",
    "@rollup/rollup-linux-x64-gnu": "^4.21.2"
  },
-  "devDependencies":   {
+  "devDependencies": {
    "@angular-builders/custom-webpack": "^21.0.3",
-    "@angular-devkit/build-angular": "^21.1.0",
-    "@angular/build": "^21.1.0",
-    "@angular/cli": "^21.1.0",
-    "@angular/compiler-cli": "^21.1.0",
-    "@angular/language-service": "^21.1.0",
-    "@angular/localize": "^21.1.0",
+    "@angular-devkit/build-angular": "21.1.0",
+    "@angular/cli": "21.1.0",
+    "@angular/compiler-cli": "21.1.0",
+    "@angular/language-service": "21.1.0",
+    "@angular/localize": "21.1.0",
    "@types/arcgis-rest-api": "^10.4.5",
+    "@types/jasmine": "~2.8.8",
+    "@types/jasminewd2": "^2.0.9",
    "@types/node": "^22.5.4",
-    "@typescript-eslint/eslint-plugin": "^8.53.1",
-    "@typescript-eslint/parser": "^8.53.1",
-    "@vitest/browser": "^4.0.17",
-    "@vitest/browser-playwright": "^4.0.17",
-    "eslint": "^9.39.2",
-    "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-import": "^2.32.0",
-    "jsdom": "^27.4.0",
+    "@typescript-eslint/eslint-plugin": "^6.18.0",
+    "@typescript-eslint/eslint-plugin-tslint": "^6.18.0",
+    "@typescript-eslint/parser": "^6.18.0",
+    "codelyzer": "^6.0.2",
+    "eslint": "^8.35.0",
+    "eslint-config-prettier": "^8.6.0",
+    "eslint-plugin-import": "^2.27.5",
+    "jasmine-core": "^4.3.0",
+    "jasmine-spec-reporter": "^7.0.0",
+    "karma": "^6.3.20",
+    "karma-chrome-launcher": "~3.1.0",
+    "karma-coverage-istanbul-reporter": "^3.0.3",
+    "karma-jasmine": "^5.1.0",
+    "karma-jasmine-html-reporter": "^2.0.0",
    "ng-packagr": "^21.1.0",
+    "protractor": "~7.0.0",
    "ts-node": "^8.8.1",
-    "typescript": "~5.9.3",
-    "vitest": "^4.0.17"
+    "typescript": "~5.9.3"
  },
-  "overrides":   {
-    "ngrx-store-localstorage":     {
+  "overrides": {
+    "ngx-avatars": {
      "@angular/common": "$@angular/common",
      "@angular/core": "$@angular/core"
    },
-    "ngx-avatars":     {
-      "@angular/common": "$@angular/common",
-      "@angular/core": "$@angular/core"
-    },
-    "ngx-uploadx":     {
-      "@angular/common": "$@angular/common",
+    "ngx-uploadx": {
      "@angular/core": "$@angular/core"
    }
  }
--- a/projects/common-map/package-lock.json
+++ b/projects/common-map/package-lock.json
@@ -11,11 +11,49 @@
        "tslib": "^2.0.0"
      },
      "peerDependencies": {
-        "@angular/core": "20.3.16",
-        "@ngrx/effects": "20.1.0",
-        "@ngrx/router-store": "20.1.0",
-        "@ngrx/store": "20.1.0",
+        "@angular/core": "21.1.0",
+        "@farmmaps/common": "file:../../dist/common",
+        "@farmmaps/ng-openlayers": "file:../../dist/ng-openlayers",
+        "@ngrx/effects": "21.0.1",
+        "@ngrx/router-store": "21.0.1",
+        "@ngrx/store": "21.0.1",
        "ngrx-store-localstorage": "20.1.0",
+        "rxjs": "7.8.1",
+        "tassign": "^1.0.0"
+      }
+    },
+    "../../../../dist/common": {
+      "extraneous": true
+    },
+    "../../../../dist/ng-openlayers": {
+      "extraneous": true
+    },
+    "../../../dist/ng-openlayers": {
+      "extraneous": true
+    },
+    "../../dist/common": {
+      "name": "@farmmaps/common",
+      "version": "21.1.0",
+      "peer": true,
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "peerDependencies": {
+        "@angular/common": "21.1.0",
+        "@angular/core": "21.1.0",
+        "@angular/forms": "21.1.0",
+        "@microsoft/signalr": "10.0.0",
+        "@ng-bootstrap/ng-bootstrap": "^20.0.0",
+        "@ngrx/effects": "21.0.1",
+        "@ngrx/router-store": "21.0.1",
+        "@ngrx/store": "21.0.1",
+        "angular-oauth2-oidc": "20.0.2",
+        "bootstrap": "^5.3.3",
+        "moment": "^2.29.4",
+        "ngx-avatars": "1.10.1",
+        "ngx-clipboard": "^16.0.0",
+        "ngx-image-cropper": "9.1.6",
+        "ngx-uploadx": "7.0.1",
        "tassign": "^1.0.0"
      }
    },
@@ -32,13 +70,39 @@
        "ol": "^8.2.0"
      }
    },
+    "../../dist/ng-openlayers": {
+      "name": "@farmmaps/ng-openlayers",
+      "version": "20.0.1",
+      "peer": true,
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "peerDependencies": {
+        "@angular/common": ">=19.0.0 <=20.x.x",
+        "@angular/core": ">=19.0.0 <=20.x.x",
+        "ol": "~10.7.0"
+      }
+    },
+    "../ng-openlayers": {
+      "name": "@farmmaps/ng-openlayers",
+      "version": "20.0.1",
+      "extraneous": true,
+      "peerDependencies": {
+        "@angular/common": ">=19.0.0 <=20.x.x",
+        "@angular/core": ">=19.0.0 <=20.x.x",
+        "ol": "~10.7.0"
+      }
+    },
+    "dist/common": {
+      "extraneous": true
+    },
    "dist/ng-openlayers": {
      "extraneous": true
    },
    "node_modules/@angular/common": {
-      "version": "20.3.16",
-      "resolved": "https://registry.npmjs.org/@angular/common/-/common-20.3.16.tgz",
-      "integrity": "sha512-GRAziNlntwdnJy3F+8zCOvDdy7id0gITjDnM6P9+n2lXvtDuBLGJKU3DWBbvxcCjtD6JK/g/rEX5fbCxbUHkQQ==",
+      "version": "21.1.0",
+      "resolved": "https://registry.npmjs.org/@angular/common/-/common-21.1.0.tgz",
+      "integrity": "sha512-hL3Chp51TU9iBcIfkNtoBS1wuseP1gsyDW2IFtK5HUpAVhbso9B3fdCaDTFkU98A2unluo2YgzI6D/6IS6N+1g==",
      "license": "MIT",
      "peer": true,
      "dependencies": {
@@ -48,14 +112,14 @@
        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
      },
      "peerDependencies": {
-        "@angular/core": "20.3.16",
+        "@angular/core": "21.1.0",
        "rxjs": "^6.5.3 || ^7.4.0"
      }
    },
    "node_modules/@angular/core": {
-      "version": "20.3.16",
-      "resolved": "https://registry.npmjs.org/@angular/core/-/core-20.3.16.tgz",
-      "integrity": "sha512-KSFPKvOmWWLCJBbEO+CuRUXfecX2FRuO0jNi9c54ptXMOPHlK1lIojUnyXmMNzjdHgRug8ci9qDuftvC2B7MKg==",
+      "version": "21.1.0",
+      "resolved": "https://registry.npmjs.org/@angular/core/-/core-21.1.0.tgz",
+      "integrity": "sha512-QTl9s8GYNN0pt1k3GE6UVlfe6zWtfdykhfchinKq2YJywQ6LBM4UcZgoc56YkgscmyrRFYrr4JYUJjlzTF57+A==",
      "license": "MIT",
      "peer": true,
      "dependencies": {
@@ -65,9 +129,9 @@
        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
      },
      "peerDependencies": {
-        "@angular/compiler": "20.3.16",
+        "@angular/compiler": "21.1.0",
        "rxjs": "^6.5.3 || ^7.4.0",
-        "zone.js": "~0.15.0"
+        "zone.js": "~0.15.0 || ~0.16.0"
      },
      "peerDependenciesMeta": {
        "@angular/compiler": {
@@ -79,9 +143,9 @@
      }
    },
    "node_modules/@angular/platform-browser": {
-      "version": "20.3.16",
-      "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-20.3.16.tgz",
-      "integrity": "sha512-YsrLS6vyS77i4pVHg4gdSBW74qvzHjpQRTVQ5Lv/OxIjJdYYYkMmjNalCNgy1ZuyY6CaLIB11ccxhrNnxfKGOQ==",
+      "version": "21.1.0",
+      "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-21.1.0.tgz",
+      "integrity": "sha512-Drkal25x+OuRQosAE/cL4uM5WDmgFehanCpsjQ1jGp6Rxoad6Q5Do1uQAE3qgMKHL1aqCPZ+uWzcVVG+Bn1ddg==",
      "license": "MIT",
      "peer": true,
      "dependencies": {
@@ -91,9 +155,9 @@
        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
      },
      "peerDependencies": {
-        "@angular/animations": "20.3.16",
-        "@angular/common": "20.3.16",
-        "@angular/core": "20.3.16"
+        "@angular/animations": "21.1.0",
+        "@angular/common": "21.1.0",
+        "@angular/core": "21.1.0"
      },
      "peerDependenciesMeta": {
        "@angular/animations": {
@@ -102,9 +166,9 @@
      }
    },
    "node_modules/@angular/router": {
-      "version": "20.3.16",
-      "resolved": "https://registry.npmjs.org/@angular/router/-/router-20.3.16.tgz",
-      "integrity": "sha512-e1LiQFZaajKqc00cY5FboIrWJZSMnZ64GDp5R0UejritYrqorQQQNOqP1W85BMuY2owibMmxVfX+dJg/Mc8PuQ==",
+      "version": "21.1.0",
+      "resolved": "https://registry.npmjs.org/@angular/router/-/router-21.1.0.tgz",
+      "integrity": "sha512-Sneu0ePuH+bf8ZslRX3iQk1iLziindLskdTeHV1ZCrXdT0ZScsZyI/gjxQKBtsIU9692D2DnFQRLGnzTBYVGVw==",
      "license": "MIT",
      "peer": true,
      "dependencies": {
@@ -114,55 +178,63 @@
        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
      },
      "peerDependencies": {
-        "@angular/common": "20.3.16",
-        "@angular/core": "20.3.16",
-        "@angular/platform-browser": "20.3.16",
+        "@angular/common": "21.1.0",
+        "@angular/core": "21.1.0",
+        "@angular/platform-browser": "21.1.0",
        "rxjs": "^6.5.3 || ^7.4.0"
      }
    },
+    "node_modules/@farmmaps/common": {
+      "resolved": "../../dist/common",
+      "link": true
+    },
+    "node_modules/@farmmaps/ng-openlayers": {
+      "resolved": "../../dist/ng-openlayers",
+      "link": true
+    },
    "node_modules/@ngrx/effects": {
-      "version": "20.1.0",
-      "resolved": "https://registry.npmjs.org/@ngrx/effects/-/effects-20.1.0.tgz",
-      "integrity": "sha512-wkIu0QnTarBd1zUswk643H5SILO9Be1OeswMe7g4tXlkNLFRPkyu0BUzXT80PsUPP5p0VrdFz3akrn3HHjjTjA==",
+      "version": "21.0.1",
+      "resolved": "https://registry.npmjs.org/@ngrx/effects/-/effects-21.0.1.tgz",
+      "integrity": "sha512-hSdpToAiSYa5FJ/CAygQHpnCaF2S1HO7q/57ob3XvNTWmkofa0VqI/IIe4W57bojh2YOWCJ91SCn3kAjymaV3g==",
      "license": "MIT",
      "peer": true,
      "dependencies": {
        "tslib": "^2.0.0"
      },
      "peerDependencies": {
-        "@angular/core": "^20.0.0",
-        "@ngrx/store": "20.1.0",
+        "@angular/core": "^21.0.0",
+        "@ngrx/store": "21.0.1",
        "rxjs": "^6.5.3 || ^7.5.0"
      }
    },
    "node_modules/@ngrx/router-store": {
-      "version": "20.1.0",
-      "resolved": "https://registry.npmjs.org/@ngrx/router-store/-/router-store-20.1.0.tgz",
-      "integrity": "sha512-XlpQsgmEc1E9Ogiv6QbJ8g8JzjrJOlr7JX9FngHIDLyXQFCMn5wcXsqhjiBjG9JgJLwlzV+v14i7EM/nqwQCGA==",
+      "version": "21.0.1",
+      "resolved": "https://registry.npmjs.org/@ngrx/router-store/-/router-store-21.0.1.tgz",
+      "integrity": "sha512-hacH8ciwCRMLg7p7bThslYn564GOyS5LPf9c8cX4FTyOH+iJM32eJd2Lt64cA62vN6ruofV/IM2vB09nCkxHzg==",
      "license": "MIT",
      "peer": true,
      "dependencies": {
        "tslib": "^2.0.0"
      },
      "peerDependencies": {
-        "@angular/common": "^20.0.0",
-        "@angular/core": "^20.0.0",
-        "@angular/router": "^20.0.0",
-        "@ngrx/store": "20.1.0",
+        "@angular/common": "^21.0.0",
+        "@angular/core": "^21.0.0",
+        "@angular/router": "^21.0.0",
+        "@ngrx/store": "21.0.1",
        "rxjs": "^6.5.3 || ^7.5.0"
      }
    },
    "node_modules/@ngrx/store": {
-      "version": "20.1.0",
-      "resolved": "https://registry.npmjs.org/@ngrx/store/-/store-20.1.0.tgz",
-      "integrity": "sha512-o8j3CGAGedm+BIb+QDhNXrVaU//n9uF0wH0HZWtXHmW1mjRBaQiUA+ZPMUkDwAeN8KuOcoIEC+2QUXxXGVI7ow==",
+      "version": "21.0.1",
+      "resolved": "https://registry.npmjs.org/@ngrx/store/-/store-21.0.1.tgz",
+      "integrity": "sha512-2hGnw/c5o8nmKzyx7TrUUM7FXjE2zqjX0EF+wLbw9Oy/L+VdCmx+ZI1BFjuAR4B8PKEWHG2KSbOM13SMNkpZiA==",
      "license": "MIT",
      "peer": true,
      "dependencies": {
        "tslib": "^2.0.0"
      },
      "peerDependencies": {
-        "@angular/core": "^20.0.0",
+        "@angular/core": "^21.0.0",
        "rxjs": "^6.5.3 || ^7.5.0"
      }
    },
--- a/projects/common-map/package.json
+++ b/projects/common-map/package.json
@@ -8,16 +8,14 @@
    "tslib": "^2.0.0"
  },
  "peerDependencies": {
-    "@angular/core": "^21.1.0",
-    "ngrx-store-localstorage": "^20.1.0",
-    "@ngrx/effects": "^21.0.1",
-    "@ngrx/router-store": "^21.0.1",
-    "@ngrx/store": "^21.0.1",
-    "tassign": "^1.0.0"
-  },
-  "overrides": {
-    "ngrx-store-localstorage": {
-      "@angular/core": "$@angular/core"
-    }
+    "@angular/core": "21.1.0",
+    "@farmmaps/common": "file:../../dist/common",
+    "@farmmaps/ng-openlayers": "file:../../dist/ng-openlayers",
+    "ngrx-store-localstorage": "20.1.0",
+    "@ngrx/effects": "21.0.1",
+    "@ngrx/router-store": "21.0.1",
+    "@ngrx/store": "21.0.1",
+    "tassign": "^1.0.0",
+    "rxjs": "7.8.1"
  }
 }
--- a/projects/common-map/src/fm-map/components/aol/item-layers/item-layers.component.ts
+++ b/projects/common-map/src/fm-map/components/aol/item-layers/item-layers.component.ts
@@ -21,13 +21,13 @@ import { Geometry } from 'ol/geom';
 import BaseLayer from 'ol/layer/Base';
 import Feature from 'ol/Feature';

-@Component({
-    selector: 'fm-map-item-layers',
-    template: `<ng-content></ng-content>`,
-    providers: [
-        { provide: LayerGroupComponent, useExisting: forwardRef(() => ItemLayersComponent) }
-    ],
-    standalone: false
+@Component({
+    selector: 'fm-map-item-layers',
+    template: `<ng-content></ng-content>`,
+    providers: [
+        { provide: LayerGroupComponent, useExisting: forwardRef(() => ItemLayersComponent) }
+    ],
+    standalone: false
 })

 export class ItemLayersComponent extends LayerGroupComponent implements OnChanges, OnInit,OnDestroy {
--- a/projects/common-map/src/fm-map/components/aol/layer-list/layer-list.component.html
+++ b/projects/common-map/src/fm-map/components/aol/layer-list/layer-list.component.html
@@ -2,7 +2,7 @@
  @if (itemLayers.length > 0) {
    <div class="layerlist">
      <div class="list-group">
-        @for (itemLayer of itemLayers; track itemLayer.item.code) {
+        @for (itemLayer of itemLayers; track itemLayer) {
          <div class="list-group-item list-group-item-action p-2 text-truncate" [ngClass]="{'active' : selectedLayer==itemLayer}">
            <div (click)="handleSelectLayer($event,itemLayer)"  [title]="itemLayer.item.name">{{itemLayer.item.name}}</div>
            @if (selectedLayer==itemLayer && !baseLayers) {
--- a/projects/common-map/src/fm-map/components/aol/layer-values/layer-values.component.html
+++ b/projects/common-map/src/fm-map/components/aol/layer-values/layer-values.component.html
@@ -7,7 +7,7 @@
          <div class="lonlat pb-2 "><span class="font-weight-bold">{{lonlat$}}</span><i class="ms-2 fal fa-copy" (click)="copyToClipboard()"></i> </div>
          @if (layers.length>0 ) {
            <ul class="value-list p-0 mb-0">
-              @for (layerValue of layers; track $index) {
+              @for (layerValue of layers; track layerValue) {
                <li class="border-top pt-1 pb-1 value">
                  <div>{{layerValue.layerName}}</div>
                  <div>{{layerValue.date|date}}</div>
--- a/projects/common-map/src/fm-map/components/feature-list-cropfield/feature-list-cropfield.component.html
+++ b/projects/common-map/src/fm-map/components/feature-list-cropfield/feature-list-cropfield.component.html
@@ -7,7 +7,7 @@
      @if (features; as features) {
        <div>
          <div class="cropfields">
-            @for (feature of features; track $index) {
+            @for (feature of features; track feature) {
              <div class="row m-0 ps-3 pe-3" [ngClass]="{'selected':isFeatureSelected(feature)}" (click)="handleFeatureClick(feature)" (mouseenter)="handleFeatureMouseEnter(feature)" (mouseleave)="handleFeatureMouseLeave(feature)">
                <fm-map-feature-list-feature-container [feature]="feature"></fm-map-feature-list-feature-container>
              </div>
--- a/projects/common-map/src/fm-map/components/feature-list-croppingscheme/feature-list-croppingscheme.component.html
+++ b/projects/common-map/src/fm-map/components/feature-list-croppingscheme/feature-list-croppingscheme.component.html
@@ -5,7 +5,7 @@
    @if (features; as features) {
      <div>
        <div class="farms">
-          @for (feature of features; track $index) {
+          @for (feature of features; track feature) {
            <div class="row m-0 ps-3 pe-3"[ngClass]="{'selected':isFeatureSelected(feature)}" (click)="handleFeatureClick(feature)" (mouseenter)="handleFeatureMouseEnter(feature)" (mouseleave)="handleFeatureMouseLeave(feature)">
              <fm-map-feature-list-feature-container [feature]="feature"></fm-map-feature-list-feature-container>
            </div>
--- a/projects/common-map/src/fm-map/components/feature-list-observation/feature-list-observation.component.html
+++ b/projects/common-map/src/fm-map/components/feature-list-observation/feature-list-observation.component.html
@@ -7,7 +7,7 @@
      @if (features; as features) {
        <div>
          <div class="cropfields">
-            @for (feature of features; track $index) {
+            @for (feature of features; track feature) {
              <div class="row m-0 ps-3 pe-3" [ngClass]="{'selected':isFeatureSelected(feature)}" (click)="handleFeatureClick(feature)" (mouseenter)="handleFeatureMouseEnter(feature)" (mouseleave)="handleFeatureMouseLeave(feature)">
                <fm-map-feature-list-feature-container [feature]="feature"></fm-map-feature-list-feature-container>
              </div>
--- a/projects/common-map/src/fm-map/components/feature-list/feature-list.component.html
+++ b/projects/common-map/src/fm-map/components/feature-list/feature-list.component.html
@@ -1,7 +1,7 @@
@if (features; as features) {
  <div>
    <fm-back-button></fm-back-button>
-    @for (feature of features; track $index) {
+    @for (feature of features; track feature) {
      <div class="row m-0 ps-3 pe-3" [ngClass]="{'selected':isFeatureSelected(feature)}" (click)="handleFeatureClick(feature)" (mouseenter)="handleFeatureMouseEnter(feature)" (mouseleave)="handleFeatureMouseLeave(feature)">
        <fm-map-feature-list-feature-container [feature]="feature"></fm-map-feature-list-feature-container>
      </div>
--- a/projects/common-map/src/fm-map/components/item-list/item-list.component.html
+++ b/projects/common-map/src/fm-map/components/item-list/item-list.component.html
@@ -1,6 +1,6 @@
@if (items; as items) {
  <div class="widget-container pt-0">
-    @for (item of items; track item.code) {
+    @for (item of items; track item) {
      <div class="widget" (click)="handleItemClick(item)">
        <div class="content">
          <fm-map-item-list-item-container [item]="item" class="item-container"></fm-map-item-list-item-container>
--- a/projects/common-map/src/fm-map/components/item-widget-list/item-widget-list.component.html
+++ b/projects/common-map/src/fm-map/components/item-widget-list/item-widget-list.component.html
@@ -1,6 +1,6 @@
@if (widgets; as widgets) {
  <div class="widget-container pt-0">
-    @for (widget of widgets; track widget.item.code) {
+    @for (widget of widgets; track widget) {
      <div class="widget">
        <div class="content">
          <ng-template #widgetTemplate></ng-template>
--- a/projects/common-map/src/fm-map/components/legend/legend.component.html
+++ b/projects/common-map/src/fm-map/components/legend/legend.component.html
@@ -25,7 +25,7 @@
        }
      </td>
    </tr>
-    @for (entry of layer.renderer.colorMap.entries; track $index; let i = $index) {
+    @for (entry of layer.renderer.colorMap.entries; track entry; let i = $index) {
      <tr>
        <td class="legend-items"><span [style.background-color]="getAlphaHex(entry.color)" [style.border-color]="getHex(entry.color)"class="color"></span></td>
        <td class="legend-items-text">@if (!entry.label) {
--- a/projects/common-map/src/fm-map/components/map-search/map-search.component.scss
+++ b/projects/common-map/src/fm-map/components/map-search/map-search.component.scss
@@ -14,7 +14,7 @@ div.map-search {
 }

 .disabled {
-  color:adjust(#000000,80%);
+  color: adjust(#000000,80%);
 }

 :host ::ng-deep ngb-typeahead-window.dropdown-menu {
--- a/projects/common-map/src/fm-map/components/map/map.component.html
+++ b/projects/common-map/src/fm-map/components/map/map.component.html
@@ -23,7 +23,7 @@
  selectedFeature:selectedFeature$|async,
  fullscreen:fullscreen$|async,
  showDataLayerSlide:showDataLayerSlide$|async,
-  menuVisible:menuVisible$|async,
+  menuVisible:menuVisible$|async
  }; as state) {
  <aol-map #map (moveEnd)="handleOnMoveEnd($event)" (click)="handleOnMouseDown($event)" (dblClick)="handleShowLayerValues($event)" [ngClass]="{'panel-visible':state.panelVisible,'fullscreen':state.fullscreen }" class="map">
    <div>
--- a/projects/common-map/src/fm-map/components/selected-item-geotiff/selected-item-geotiff.component.html
+++ b/projects/common-map/src/fm-map/components/selected-item-geotiff/selected-item-geotiff.component.html
@@ -16,7 +16,7 @@
              @if (layers.length>1) {
                <div>
                  <select (change)="onLayerChanged($event.target.value)">
-                    @for (l of layers; track l.index) {
+                    @for (l of layers; track l) {
                      <option [value]="l.index"  [selected]="itemLayer.layerIndex == l.index">{{l.name}}</option>
                    }
                  </select>
--- a/projects/common-map/src/fm-map/components/selected-item-shape/selected-item-shape.component.html
+++ b/projects/common-map/src/fm-map/components/selected-item-shape/selected-item-shape.component.html
@@ -16,7 +16,7 @@
              @if (layers.length>1) {
                <div>
                  <select (change)="onLayerChanged($event.target.value)">
-                    @for (l of layers; track l.index) {
+                    @for (l of layers; track l) {
                      <option [value]="l.index" [selected]="itemLayer.layerIndex == l.index">{{l.name}}</option>
                    }
                  </select>
--- a/projects/common-map/src/fm-map/components/selected-item-temporal/selected-item-temporal.component.html
+++ b/projects/common-map/src/fm-map/components/selected-item-temporal/selected-item-temporal.component.html
@@ -36,7 +36,7 @@
              @if (layers.length>1) {
                <div>
                  <select (change)="onLayerChanged($event.target.value)">
-                    @for (l of layers; track l.index) {
+                    @for (l of layers; track l) {
                      <option [value]="l.index"  [selected]="itemLayer.layerIndex == l.index">{{l.name}}</option>
                    }
                  </select>
--- a/projects/common-map/src/test.ts
+++ b/projects/common-map/src/test.ts
@@ -0,0 +1,18 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'core-js/es7/reflect';
+import 'zone.js';
+import 'zone.js/testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting(), {
+    teardown: { destroyAfterEach: false }
+}
+);
--- a/projects/common-map/tsconfig.lib.json
+++ b/projects/common-map/tsconfig.lib.json
@@ -27,6 +27,7 @@
    "compilationMode": "partial"
  },
  "exclude": [
+    "src/test.ts",
    "**/*.spec.ts"
  ]
 }
--- a/projects/common-map/tsconfig.lib.prod.json
+++ b/projects/common-map/tsconfig.lib.prod.json
@@ -27,6 +27,7 @@
    "compilationMode": "partial"
  },
  "exclude": [
+    "src/test.ts",
    "**/*.spec.ts"
  ]
 }
--- a/projects/common-map/tsconfig.spec.json
+++ b/projects/common-map/tsconfig.spec.json
@@ -3,10 +3,12 @@
  "compilerOptions": {
    "outDir": "../../out-tsc/spec",
    "types": [
+      "jasmine",
      "node"
    ]
  },
  "files": [
+    "src/test.ts"
  ],
  "include": [
    "**/*.spec.ts",
--- a/projects/common-map3d/karma.conf.js
+++ b/projects/common-map3d/karma.conf.js
@@ -0,0 +1,32 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    coverageIstanbulReporter: {
+      dir: require('path').join(__dirname, '../../coverage/common-map3d'),
+      reports: ['html', 'lcovonly', 'text-summary'],
+      fixWebpackSourcePaths: true
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};
--- a/projects/common-map3d/package-lock.json
+++ b/projects/common-map3d/package-lock.json
@@ -11,8 +11,8 @@
        "tslib": "^2.0.0"
      },
      "peerDependencies": {
-        "@angular/common": "20.3.16",
-        "@angular/core": "20.3.16",
+        "@angular/common": "21.1.0",
+        "@angular/core": "21.1.0",
        "cesium": "^1.97.0",
        "ol-cesium": ">=2.13.0"
      }
@@ -34,9 +34,9 @@
      "extraneous": true
    },
    "node_modules/@angular/common": {
-      "version": "20.3.16",
-      "resolved": "https://registry.npmjs.org/@angular/common/-/common-20.3.16.tgz",
-      "integrity": "sha512-GRAziNlntwdnJy3F+8zCOvDdy7id0gITjDnM6P9+n2lXvtDuBLGJKU3DWBbvxcCjtD6JK/g/rEX5fbCxbUHkQQ==",
+      "version": "21.1.0",
+      "resolved": "https://registry.npmjs.org/@angular/common/-/common-21.1.0.tgz",
+      "integrity": "sha512-hL3Chp51TU9iBcIfkNtoBS1wuseP1gsyDW2IFtK5HUpAVhbso9B3fdCaDTFkU98A2unluo2YgzI6D/6IS6N+1g==",
      "license": "MIT",
      "peer": true,
      "dependencies": {
@@ -46,14 +46,14 @@
        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
      },
      "peerDependencies": {
-        "@angular/core": "20.3.16",
+        "@angular/core": "21.1.0",
        "rxjs": "^6.5.3 || ^7.4.0"
      }
    },
    "node_modules/@angular/core": {
-      "version": "20.3.16",
-      "resolved": "https://registry.npmjs.org/@angular/core/-/core-20.3.16.tgz",
-      "integrity": "sha512-KSFPKvOmWWLCJBbEO+CuRUXfecX2FRuO0jNi9c54ptXMOPHlK1lIojUnyXmMNzjdHgRug8ci9qDuftvC2B7MKg==",
+      "version": "21.1.0",
+      "resolved": "https://registry.npmjs.org/@angular/core/-/core-21.1.0.tgz",
+      "integrity": "sha512-QTl9s8GYNN0pt1k3GE6UVlfe6zWtfdykhfchinKq2YJywQ6LBM4UcZgoc56YkgscmyrRFYrr4JYUJjlzTF57+A==",
      "license": "MIT",
      "peer": true,
      "dependencies": {
@@ -63,9 +63,9 @@
        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
      },
      "peerDependencies": {
-        "@angular/compiler": "20.3.16",
+        "@angular/compiler": "21.1.0",
        "rxjs": "^6.5.3 || ^7.4.0",
-        "zone.js": "~0.15.0"
+        "zone.js": "~0.15.0 || ~0.16.0"
      },
      "peerDependenciesMeta": {
        "@angular/compiler": {
--- a/projects/common-map3d/package.json
+++ b/projects/common-map3d/package.json
@@ -8,8 +8,8 @@
    "tslib": "^2.0.0"
  },
  "peerDependencies": {
-    "@angular/common": "^21.1.0",
-    "@angular/core":  "^21.1.0",
+    "@angular/common": "21.1.0",
+    "@angular/core":  "21.1.0",
    "cesium": "^1.97.0",
    "ol-cesium": ">=2.13.0"
  }
--- a/projects/common-map3d/src/test.ts
+++ b/projects/common-map3d/src/test.ts
@@ -0,0 +1,17 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js';
+import 'zone.js/testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting(), {
+    teardown: { destroyAfterEach: false }
+}
+);
--- a/projects/common-map3d/tsconfig.lib.json
+++ b/projects/common-map3d/tsconfig.lib.json
@@ -28,6 +28,7 @@
    "compilationMode": "partial"
  },
  "exclude": [
+    "src/test.ts",
    "**/*.spec.ts"
  ]
 }
--- a/projects/common-map3d/tsconfig.lib.prod.json
+++ b/projects/common-map3d/tsconfig.lib.prod.json
@@ -28,6 +28,7 @@
    "compilationMode": "partial"
  },
  "exclude": [
+    "src/test.ts",
    "**/*.spec.ts"
  ]
 }
--- a/projects/common-map3d/tsconfig.spec.json
+++ b/projects/common-map3d/tsconfig.spec.json
@@ -3,10 +3,12 @@
  "compilerOptions": {
    "outDir": "../../out-tsc/spec",
    "types": [
+      "jasmine",
      "node"
    ]
  },
  "files": [
+    "src/test.ts"
  ],
  "include": [
    "**/*.spec.ts",
--- a/projects/common/karma.conf.js
+++ b/projects/common/karma.conf.js
@@ -0,0 +1,32 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    coverageIstanbulReporter: {
+      dir: require('path').join(__dirname, '../../coverage/common'),
+      reports: ['html', 'lcovonly'],
+      fixWebpackSourcePaths: true
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};
--- a/projects/common/package-lock.json
+++ b/projects/common/package-lock.json
@@ -1,49 +1,35 @@
 {
  "name": "@farmmaps/common",
-  "version": "2.1.0",
+  "version": "21.1.0",
  "lockfileVersion": 2,
  "requires": true,
  "packages": {
    "": {
      "name": "@farmmaps/common",
-      "version": "2.1.0",
+      "version": "21.1.0",
      "peerDependencies": {
-        "@angular/common": "20.3.16",
-        "@angular/core": "20.3.16",
-        "@angular/forms": "20.3.16",
+        "@angular/common": "21.1.0",
+        "@angular/core": "21.1.0",
+        "@angular/forms": "21.1.0",
        "@microsoft/signalr": "10.0.0",
-        "@ng-bootstrap/ng-bootstrap": "^19.0.0",
-        "@ngrx/effects": "20.1.0",
-        "@ngrx/router-store": "20.1.0",
-        "@ngrx/store": "20.1.0",
-        "angular-oauth2-oidc": "^17.0.2",
+        "@ng-bootstrap/ng-bootstrap": "^20.0.0",
+        "@ngrx/effects": "21.0.1",
+        "@ngrx/router-store": "21.0.1",
+        "@ngrx/store": "21.0.1",
+        "angular-oauth2-oidc": "20.0.2",
        "bootstrap": "^5.3.3",
        "moment": "^2.29.4",
-        "ngx-avatars": "1.10.0",
+        "ngx-avatars": "1.10.1",
        "ngx-clipboard": "^16.0.0",
-        "ngx-image-cropper": "^7.0.0",
+        "ngx-image-cropper": "9.1.6",
        "ngx-uploadx": "7.0.1",
        "tassign": "^1.0.0"
      }
    },
-    "node_modules/@ampproject/remapping": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz",
-      "integrity": "sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==",
-      "license": "Apache-2.0",
-      "peer": true,
-      "dependencies": {
-        "@jridgewell/gen-mapping": "^0.3.5",
-        "@jridgewell/trace-mapping": "^0.3.24"
-      },
-      "engines": {
-        "node": ">=6.0.0"
-      }
-    },
    "node_modules/@angular/common": {
-      "version": "20.3.16",
-      "resolved": "https://registry.npmjs.org/@angular/common/-/common-20.3.16.tgz",
-      "integrity": "sha512-GRAziNlntwdnJy3F+8zCOvDdy7id0gITjDnM6P9+n2lXvtDuBLGJKU3DWBbvxcCjtD6JK/g/rEX5fbCxbUHkQQ==",
+      "version": "21.1.0",
+      "resolved": "https://registry.npmjs.org/@angular/common/-/common-21.1.0.tgz",
+      "integrity": "sha512-hL3Chp51TU9iBcIfkNtoBS1wuseP1gsyDW2IFtK5HUpAVhbso9B3fdCaDTFkU98A2unluo2YgzI6D/6IS6N+1g==",
      "license": "MIT",
      "peer": true,
      "dependencies": {
@@ -53,14 +39,14 @@
        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
      },
      "peerDependencies": {
-        "@angular/core": "20.3.16",
+        "@angular/core": "21.1.0",
        "rxjs": "^6.5.3 || ^7.4.0"
      }
    },
    "node_modules/@angular/compiler": {
-      "version": "20.3.16",
-      "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-20.3.16.tgz",
-      "integrity": "sha512-Pt9Ms9GwTThgzdxWBwMfN8cH1JEtQ2DK5dc2yxYtPSaD+WKmG9AVL1PrzIYQEbaKcWk2jxASUHpEWSlNiwo8uw==",
+      "version": "21.1.0",
+      "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-21.1.0.tgz",
+      "integrity": "sha512-UprCiJwEU1Ilw1dVk+yLgNiHlbH81obAuh92lRKozUQRgtSCpOfCQUM79q5r+VdmCPxDshr79U2Ke0fRaiJfAQ==",
      "license": "MIT",
      "peer": true,
      "dependencies": {
@@ -71,15 +57,15 @@
      }
    },
    "node_modules/@angular/compiler-cli": {
-      "version": "20.3.16",
-      "resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-20.3.16.tgz",
-      "integrity": "sha512-l3xF/fXfJAl/UrNnH9Ufkr79myjMgXdHq1mmmph2UnpeqilRB1b8lC9sLBV9MipQHVn3dwocxMIvtrcryfOaXw==",
+      "version": "21.1.0",
+      "resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-21.1.0.tgz",
+      "integrity": "sha512-//BTtxJovsF0LaOWQkOVxWX4EVyNJaPus+IlwWxzmdRHpojIl1Zdyy9BJMVJOifvj3XQ16sZwR1PDWDI5DIWrg==",
      "license": "MIT",
      "peer": true,
      "dependencies": {
-        "@babel/core": "7.28.3",
+        "@babel/core": "7.28.5",
        "@jridgewell/sourcemap-codec": "^1.4.14",
-        "chokidar": "^4.0.0",
+        "chokidar": "^5.0.0",
        "convert-source-map": "^1.5.1",
        "reflect-metadata": "^0.2.0",
        "semver": "^7.0.0",
@@ -94,8 +80,8 @@
        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
      },
      "peerDependencies": {
-        "@angular/compiler": "20.3.16",
-        "typescript": ">=5.8 <6.0"
+        "@angular/compiler": "21.1.0",
+        "typescript": ">=5.9 <6.0"
      },
      "peerDependenciesMeta": {
        "typescript": {
@@ -104,9 +90,9 @@
      }
    },
    "node_modules/@angular/core": {
-      "version": "20.3.16",
-      "resolved": "https://registry.npmjs.org/@angular/core/-/core-20.3.16.tgz",
-      "integrity": "sha512-KSFPKvOmWWLCJBbEO+CuRUXfecX2FRuO0jNi9c54ptXMOPHlK1lIojUnyXmMNzjdHgRug8ci9qDuftvC2B7MKg==",
+      "version": "21.1.0",
+      "resolved": "https://registry.npmjs.org/@angular/core/-/core-21.1.0.tgz",
+      "integrity": "sha512-QTl9s8GYNN0pt1k3GE6UVlfe6zWtfdykhfchinKq2YJywQ6LBM4UcZgoc56YkgscmyrRFYrr4JYUJjlzTF57+A==",
      "license": "MIT",
      "peer": true,
      "dependencies": {
@@ -116,9 +102,9 @@
        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
      },
      "peerDependencies": {
-        "@angular/compiler": "20.3.16",
+        "@angular/compiler": "21.1.0",
        "rxjs": "^6.5.3 || ^7.4.0",
-        "zone.js": "~0.15.0"
+        "zone.js": "~0.15.0 || ~0.16.0"
      },
      "peerDependenciesMeta": {
        "@angular/compiler": {
@@ -130,32 +116,33 @@
      }
    },
    "node_modules/@angular/forms": {
-      "version": "20.3.16",
-      "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-20.3.16.tgz",
-      "integrity": "sha512-1yzbXpExTqATpVcqA3wGrq4ACFIP3mRxA4pbso5KoJU+/4JfzNFwLsDaFXKpm5uxwchVnj8KM2vPaDOkvtp7NA==",
+      "version": "21.1.0",
+      "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-21.1.0.tgz",
+      "integrity": "sha512-1Qxsu2cQhraKe2dKzIVm7no1qWi76QsXVwY7+VGKRYG7p+fKaFmnr7oU5EbJL66TsFzCb8mDGxLGikS+YE+X/g==",
      "license": "MIT",
      "peer": true,
      "dependencies": {
+        "@standard-schema/spec": "^1.0.0",
        "tslib": "^2.3.0"
      },
      "engines": {
        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
      },
      "peerDependencies": {
-        "@angular/common": "20.3.16",
-        "@angular/core": "20.3.16",
-        "@angular/platform-browser": "20.3.16",
+        "@angular/common": "21.1.0",
+        "@angular/core": "21.1.0",
+        "@angular/platform-browser": "21.1.0",
        "rxjs": "^6.5.3 || ^7.4.0"
      }
    },
    "node_modules/@angular/localize": {
-      "version": "20.3.16",
-      "resolved": "https://registry.npmjs.org/@angular/localize/-/localize-20.3.16.tgz",
-      "integrity": "sha512-7S2ACDZC1Ag1+rc991BMvW6gDyBCH7ykGWpZL1aHOmnq4K70Sf8p2VyQMtYhaz7XfWeXxwBQjCncVYv6D7RO5A==",
+      "version": "21.1.0",
+      "resolved": "https://registry.npmjs.org/@angular/localize/-/localize-21.1.0.tgz",
+      "integrity": "sha512-N3j/dzbsMuM2To//ddLWiFw6LhsKlVr/NbJTy2RLw1u6/ypEdL768iGo8tPmvPO/P5IAFHMrDxYtmwgNdHFGhg==",
      "license": "MIT",
      "peer": true,
      "dependencies": {
-        "@babel/core": "7.28.3",
+        "@babel/core": "7.28.5",
        "@types/babel__core": "7.20.5",
        "tinyglobby": "^0.2.12",
        "yargs": "^18.0.0"
@@ -169,14 +156,14 @@
        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
      },
      "peerDependencies": {
-        "@angular/compiler": "20.3.16",
-        "@angular/compiler-cli": "20.3.16"
+        "@angular/compiler": "21.1.0",
+        "@angular/compiler-cli": "21.1.0"
      }
    },
    "node_modules/@angular/platform-browser": {
-      "version": "20.3.16",
-      "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-20.3.16.tgz",
-      "integrity": "sha512-YsrLS6vyS77i4pVHg4gdSBW74qvzHjpQRTVQ5Lv/OxIjJdYYYkMmjNalCNgy1ZuyY6CaLIB11ccxhrNnxfKGOQ==",
+      "version": "21.1.0",
+      "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-21.1.0.tgz",
+      "integrity": "sha512-Drkal25x+OuRQosAE/cL4uM5WDmgFehanCpsjQ1jGp6Rxoad6Q5Do1uQAE3qgMKHL1aqCPZ+uWzcVVG+Bn1ddg==",
      "license": "MIT",
      "peer": true,
      "dependencies": {
@@ -186,9 +173,9 @@
        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
      },
      "peerDependencies": {
-        "@angular/animations": "20.3.16",
-        "@angular/common": "20.3.16",
-        "@angular/core": "20.3.16"
+        "@angular/animations": "21.1.0",
+        "@angular/common": "21.1.0",
+        "@angular/core": "21.1.0"
      },
      "peerDependenciesMeta": {
        "@angular/animations": {
@@ -197,9 +184,9 @@
      }
    },
    "node_modules/@angular/router": {
-      "version": "20.3.16",
-      "resolved": "https://registry.npmjs.org/@angular/router/-/router-20.3.16.tgz",
-      "integrity": "sha512-e1LiQFZaajKqc00cY5FboIrWJZSMnZ64GDp5R0UejritYrqorQQQNOqP1W85BMuY2owibMmxVfX+dJg/Mc8PuQ==",
+      "version": "21.1.0",
+      "resolved": "https://registry.npmjs.org/@angular/router/-/router-21.1.0.tgz",
+      "integrity": "sha512-Sneu0ePuH+bf8ZslRX3iQk1iLziindLskdTeHV1ZCrXdT0ZScsZyI/gjxQKBtsIU9692D2DnFQRLGnzTBYVGVw==",
      "license": "MIT",
      "peer": true,
      "dependencies": {
@@ -209,9 +196,9 @@
        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
      },
      "peerDependencies": {
-        "@angular/common": "20.3.16",
-        "@angular/core": "20.3.16",
-        "@angular/platform-browser": "20.3.16",
+        "@angular/common": "21.1.0",
+        "@angular/core": "21.1.0",
+        "@angular/platform-browser": "21.1.0",
        "rxjs": "^6.5.3 || ^7.4.0"
      }
    },
@@ -241,22 +228,22 @@
      }
    },
    "node_modules/@babel/core": {
-      "version": "7.28.3",
-      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.28.3.tgz",
-      "integrity": "sha512-yDBHV9kQNcr2/sUr9jghVyz9C3Y5G2zUM2H2lo+9mKv4sFgbA8s8Z9t8D1jiTkGoO/NoIfKMyKWr4s6CN23ZwQ==",
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.28.5.tgz",
+      "integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==",
      "license": "MIT",
      "peer": true,
      "dependencies": {
-        "@ampproject/remapping": "^2.2.0",
        "@babel/code-frame": "^7.27.1",
-        "@babel/generator": "^7.28.3",
+        "@babel/generator": "^7.28.5",
        "@babel/helper-compilation-targets": "^7.27.2",
        "@babel/helper-module-transforms": "^7.28.3",
-        "@babel/helpers": "^7.28.3",
-        "@babel/parser": "^7.28.3",
+        "@babel/helpers": "^7.28.4",
+        "@babel/parser": "^7.28.5",
        "@babel/template": "^7.27.2",
-        "@babel/traverse": "^7.28.3",
-        "@babel/types": "^7.28.2",
+        "@babel/traverse": "^7.28.5",
+        "@babel/types": "^7.28.5",
+        "@jridgewell/remapping": "^2.3.5",
        "convert-source-map": "^2.0.0",
        "debug": "^4.1.0",
        "gensync": "^1.0.0-beta.2",
@@ -493,6 +480,17 @@
        "@jridgewell/trace-mapping": "^0.3.24"
      }
    },
+    "node_modules/@jridgewell/remapping": {
+      "version": "2.3.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/remapping/-/remapping-2.3.5.tgz",
+      "integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
    "node_modules/@jridgewell/resolve-uri": {
      "version": "3.1.2",
      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
@@ -536,66 +534,66 @@
      }
    },
    "node_modules/@ng-bootstrap/ng-bootstrap": {
-      "version": "19.0.1",
-      "resolved": "https://registry.npmjs.org/@ng-bootstrap/ng-bootstrap/-/ng-bootstrap-19.0.1.tgz",
-      "integrity": "sha512-1lErAkwh0F+gWkzpiddViY4GfA9LVXkwLpgBsV9Mb3IC0zo6WNkY8WxCC+LqajirBTu20DCkZSqeRzrwaVLpZw==",
+      "version": "20.0.0",
+      "resolved": "https://registry.npmjs.org/@ng-bootstrap/ng-bootstrap/-/ng-bootstrap-20.0.0.tgz",
+      "integrity": "sha512-Jt+GUQ0PdM8VsOUUVr7vTQXhwcGwe2DCe1mmfS21vz9pLSOtGRz41ohZKc1egUevj5Rxm2sHVq5Sve68/nTMfA==",
      "license": "MIT",
      "peer": true,
      "dependencies": {
        "tslib": "^2.3.0"
      },
      "peerDependencies": {
-        "@angular/common": "^20.0.0",
-        "@angular/core": "^20.0.0",
-        "@angular/forms": "^20.0.0",
-        "@angular/localize": "^20.0.0",
+        "@angular/common": "^21.0.0",
+        "@angular/core": "^21.0.0",
+        "@angular/forms": "^21.0.0",
+        "@angular/localize": "^21.0.0",
        "@popperjs/core": "^2.11.8",
        "rxjs": "^6.5.3 || ^7.4.0"
      }
    },
    "node_modules/@ngrx/effects": {
-      "version": "20.1.0",
-      "resolved": "https://registry.npmjs.org/@ngrx/effects/-/effects-20.1.0.tgz",
-      "integrity": "sha512-wkIu0QnTarBd1zUswk643H5SILO9Be1OeswMe7g4tXlkNLFRPkyu0BUzXT80PsUPP5p0VrdFz3akrn3HHjjTjA==",
+      "version": "21.0.1",
+      "resolved": "https://registry.npmjs.org/@ngrx/effects/-/effects-21.0.1.tgz",
+      "integrity": "sha512-hSdpToAiSYa5FJ/CAygQHpnCaF2S1HO7q/57ob3XvNTWmkofa0VqI/IIe4W57bojh2YOWCJ91SCn3kAjymaV3g==",
      "license": "MIT",
      "peer": true,
      "dependencies": {
        "tslib": "^2.0.0"
      },
      "peerDependencies": {
-        "@angular/core": "^20.0.0",
-        "@ngrx/store": "20.1.0",
+        "@angular/core": "^21.0.0",
+        "@ngrx/store": "21.0.1",
        "rxjs": "^6.5.3 || ^7.5.0"
      }
    },
    "node_modules/@ngrx/router-store": {
-      "version": "20.1.0",
-      "resolved": "https://registry.npmjs.org/@ngrx/router-store/-/router-store-20.1.0.tgz",
-      "integrity": "sha512-XlpQsgmEc1E9Ogiv6QbJ8g8JzjrJOlr7JX9FngHIDLyXQFCMn5wcXsqhjiBjG9JgJLwlzV+v14i7EM/nqwQCGA==",
+      "version": "21.0.1",
+      "resolved": "https://registry.npmjs.org/@ngrx/router-store/-/router-store-21.0.1.tgz",
+      "integrity": "sha512-hacH8ciwCRMLg7p7bThslYn564GOyS5LPf9c8cX4FTyOH+iJM32eJd2Lt64cA62vN6ruofV/IM2vB09nCkxHzg==",
      "license": "MIT",
      "peer": true,
      "dependencies": {
        "tslib": "^2.0.0"
      },
      "peerDependencies": {
-        "@angular/common": "^20.0.0",
-        "@angular/core": "^20.0.0",
-        "@angular/router": "^20.0.0",
-        "@ngrx/store": "20.1.0",
+        "@angular/common": "^21.0.0",
+        "@angular/core": "^21.0.0",
+        "@angular/router": "^21.0.0",
+        "@ngrx/store": "21.0.1",
        "rxjs": "^6.5.3 || ^7.5.0"
      }
    },
    "node_modules/@ngrx/store": {
-      "version": "20.1.0",
-      "resolved": "https://registry.npmjs.org/@ngrx/store/-/store-20.1.0.tgz",
-      "integrity": "sha512-o8j3CGAGedm+BIb+QDhNXrVaU//n9uF0wH0HZWtXHmW1mjRBaQiUA+ZPMUkDwAeN8KuOcoIEC+2QUXxXGVI7ow==",
+      "version": "21.0.1",
+      "resolved": "https://registry.npmjs.org/@ngrx/store/-/store-21.0.1.tgz",
+      "integrity": "sha512-2hGnw/c5o8nmKzyx7TrUUM7FXjE2zqjX0EF+wLbw9Oy/L+VdCmx+ZI1BFjuAR4B8PKEWHG2KSbOM13SMNkpZiA==",
      "license": "MIT",
      "peer": true,
      "dependencies": {
        "tslib": "^2.0.0"
      },
      "peerDependencies": {
-        "@angular/core": "^20.0.0",
+        "@angular/core": "^21.0.0",
        "rxjs": "^6.5.3 || ^7.5.0"
      }
    },
@@ -610,6 +608,13 @@
        "url": "https://opencollective.com/popperjs"
      }
    },
+    "node_modules/@standard-schema/spec": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.1.0.tgz",
+      "integrity": "sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==",
+      "license": "MIT",
+      "peer": true
+    },
    "node_modules/@types/babel__core": {
      "version": "7.20.5",
      "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
@@ -669,17 +674,17 @@
      }
    },
    "node_modules/angular-oauth2-oidc": {
-      "version": "17.0.2",
-      "resolved": "https://registry.npmjs.org/angular-oauth2-oidc/-/angular-oauth2-oidc-17.0.2.tgz",
-      "integrity": "sha512-zYgeLmAnu1g8XAYZK+csAsCQBDhgp9ffBv/eArEnujGxNPTeK00bREHWObtehflpQdSn+k9rY2D15ChCSydyVw==",
+      "version": "20.0.2",
+      "resolved": "https://registry.npmjs.org/angular-oauth2-oidc/-/angular-oauth2-oidc-20.0.2.tgz",
+      "integrity": "sha512-bMSXEQIuvgq8yqnsIatZggAvCJvY+pm7G8MK0tWCHR93UpFuNN+L5B6pY9CzRg8Ys+VVhkLIBx4zEHbJnv9icg==",
      "license": "MIT",
      "peer": true,
      "dependencies": {
        "tslib": "^2.5.2"
      },
      "peerDependencies": {
-        "@angular/common": ">=14.0.0",
-        "@angular/core": ">=14.0.0"
+        "@angular/common": ">=20.0.0",
+        "@angular/core": ">=20.0.0"
      }
    },
    "node_modules/ansi-regex": {
@@ -709,9 +714,9 @@
      }
    },
    "node_modules/baseline-browser-mapping": {
-      "version": "2.9.16",
-      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.9.16.tgz",
-      "integrity": "sha512-KeUZdBuxngy825i8xvzaK1Ncnkx0tBmb3k8DkEuqjKRkmtvNTjey2ZsNeh8Dw4lfKvbCOu9oeNx2TKm2vHqcRw==",
+      "version": "2.9.15",
+      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.9.15.tgz",
+      "integrity": "sha512-kX8h7K2srmDyYnXRIppo4AH/wYgzWVCs+eKr3RusRSQ5PvRYoEFmR/I0PbdTjKFAoKqp5+kbxnNTFO9jOfSVJg==",
      "license": "Apache-2.0",
      "peer": true,
      "bin": {
@@ -794,16 +799,16 @@
      "peer": true
    },
    "node_modules/chokidar": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
-      "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-5.0.0.tgz",
+      "integrity": "sha512-TQMmc3w+5AxjpL8iIiwebF73dRDF4fBIieAqGn9RGCWaEVwQ6Fb2cGe31Yns0RRIzii5goJ1Y7xbMwo1TxMplw==",
      "license": "MIT",
      "peer": true,
      "dependencies": {
-        "readdirp": "^4.0.1"
+        "readdirp": "^5.0.0"
      },
      "engines": {
-        "node": ">= 14.16.0"
+        "node": ">= 20.19.0"
      },
      "funding": {
        "url": "https://paulmillr.com/funding/"
@@ -1016,9 +1021,9 @@
      "peer": true
    },
    "node_modules/ngx-avatars": {
-      "version": "1.10.0",
-      "resolved": "https://registry.npmjs.org/ngx-avatars/-/ngx-avatars-1.10.0.tgz",
-      "integrity": "sha512-bE/Yakj9ICA6F4hhMEgYxGPN0B8TkSGVz7L0DIyB1g7FpGvNEdX0b7z5c13tUe8kCJT7RiRL8aLWIuGRz9QN8w==",
+      "version": "1.10.1",
+      "resolved": "https://registry.npmjs.org/ngx-avatars/-/ngx-avatars-1.10.1.tgz",
+      "integrity": "sha512-nOWlOcVnXKrkVFtS4EyE1e9KuF126LU7LHUStPbe0IcZ/8ktK3h3jV4fgr6FQ6iTp6gfYWwH4y3qkW++dNRSZw==",
      "license": "MIT",
      "peer": true,
      "dependencies": {
@@ -1046,17 +1051,17 @@
      }
    },
    "node_modules/ngx-image-cropper": {
-      "version": "7.2.1",
-      "resolved": "https://registry.npmjs.org/ngx-image-cropper/-/ngx-image-cropper-7.2.1.tgz",
-      "integrity": "sha512-SRsY9ar+sGbdzQ1D37PQicSkqaMX7n2ADvz8FdHUjGMGYbLjKe0o6fKhy5QKfV7dS6aD1VqhNr0fr486B1r2NA==",
+      "version": "9.1.6",
+      "resolved": "https://registry.npmjs.org/ngx-image-cropper/-/ngx-image-cropper-9.1.6.tgz",
+      "integrity": "sha512-b250YJ+jZovfqIj8vdEOrpEFay34be5f1Hpvg6Db68VMlvdyyuzboJdR0gCupbXtVcG6qQ86L7YG+SYxXJwApw==",
      "license": "MIT",
      "peer": true,
      "dependencies": {
        "tslib": "^2.3.0"
      },
      "peerDependencies": {
-        "@angular/common": ">=13.0.0",
-        "@angular/core": ">=13.0.0"
+        "@angular/common": ">=17.3.0",
+        "@angular/core": ">=17.3.0"
      }
    },
    "node_modules/ngx-uploadx": {
@@ -1169,13 +1174,13 @@
      "peer": true
    },
    "node_modules/readdirp": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
-      "integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-5.0.0.tgz",
+      "integrity": "sha512-9u/XQ1pvrQtYyMpZe7DXKv2p5CNvyVwzUB6uhLAnQwHMSgKMBR62lc7AHljaeteeHXn11XTAaLLUVZYVZyuRBQ==",
      "license": "MIT",
      "peer": true,
      "engines": {
-        "node": ">= 14.18.0"
+        "node": ">= 20.19.0"
      },
      "funding": {
        "type": "individual",
@@ -1481,43 +1486,33 @@
    }
  },
  "dependencies": {
-    "@ampproject/remapping": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz",
-      "integrity": "sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==",
-      "peer": true,
-      "requires": {
-        "@jridgewell/gen-mapping": "^0.3.5",
-        "@jridgewell/trace-mapping": "^0.3.24"
-      }
-    },
    "@angular/common": {
-      "version": "20.3.16",
-      "resolved": "https://registry.npmjs.org/@angular/common/-/common-20.3.16.tgz",
-      "integrity": "sha512-GRAziNlntwdnJy3F+8zCOvDdy7id0gITjDnM6P9+n2lXvtDuBLGJKU3DWBbvxcCjtD6JK/g/rEX5fbCxbUHkQQ==",
+      "version": "21.1.0",
+      "resolved": "https://registry.npmjs.org/@angular/common/-/common-21.1.0.tgz",
+      "integrity": "sha512-hL3Chp51TU9iBcIfkNtoBS1wuseP1gsyDW2IFtK5HUpAVhbso9B3fdCaDTFkU98A2unluo2YgzI6D/6IS6N+1g==",
      "peer": true,
      "requires": {
        "tslib": "^2.3.0"
      }
    },
    "@angular/compiler": {
-      "version": "20.3.16",
-      "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-20.3.16.tgz",
-      "integrity": "sha512-Pt9Ms9GwTThgzdxWBwMfN8cH1JEtQ2DK5dc2yxYtPSaD+WKmG9AVL1PrzIYQEbaKcWk2jxASUHpEWSlNiwo8uw==",
+      "version": "21.1.0",
+      "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-21.1.0.tgz",
+      "integrity": "sha512-UprCiJwEU1Ilw1dVk+yLgNiHlbH81obAuh92lRKozUQRgtSCpOfCQUM79q5r+VdmCPxDshr79U2Ke0fRaiJfAQ==",
      "peer": true,
      "requires": {
        "tslib": "^2.3.0"
      }
    },
    "@angular/compiler-cli": {
-      "version": "20.3.16",
-      "resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-20.3.16.tgz",
-      "integrity": "sha512-l3xF/fXfJAl/UrNnH9Ufkr79myjMgXdHq1mmmph2UnpeqilRB1b8lC9sLBV9MipQHVn3dwocxMIvtrcryfOaXw==",
+      "version": "21.1.0",
+      "resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-21.1.0.tgz",
+      "integrity": "sha512-//BTtxJovsF0LaOWQkOVxWX4EVyNJaPus+IlwWxzmdRHpojIl1Zdyy9BJMVJOifvj3XQ16sZwR1PDWDI5DIWrg==",
      "peer": true,
      "requires": {
-        "@babel/core": "7.28.3",
+        "@babel/core": "7.28.5",
        "@jridgewell/sourcemap-codec": "^1.4.14",
-        "chokidar": "^4.0.0",
+        "chokidar": "^5.0.0",
        "convert-source-map": "^1.5.1",
        "reflect-metadata": "^0.2.0",
        "semver": "^7.0.0",
@@ -1526,48 +1521,49 @@
      }
    },
    "@angular/core": {
-      "version": "20.3.16",
-      "resolved": "https://registry.npmjs.org/@angular/core/-/core-20.3.16.tgz",
-      "integrity": "sha512-KSFPKvOmWWLCJBbEO+CuRUXfecX2FRuO0jNi9c54ptXMOPHlK1lIojUnyXmMNzjdHgRug8ci9qDuftvC2B7MKg==",
+      "version": "21.1.0",
+      "resolved": "https://registry.npmjs.org/@angular/core/-/core-21.1.0.tgz",
+      "integrity": "sha512-QTl9s8GYNN0pt1k3GE6UVlfe6zWtfdykhfchinKq2YJywQ6LBM4UcZgoc56YkgscmyrRFYrr4JYUJjlzTF57+A==",
      "peer": true,
      "requires": {
        "tslib": "^2.3.0"
      }
    },
    "@angular/forms": {
-      "version": "20.3.16",
-      "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-20.3.16.tgz",
-      "integrity": "sha512-1yzbXpExTqATpVcqA3wGrq4ACFIP3mRxA4pbso5KoJU+/4JfzNFwLsDaFXKpm5uxwchVnj8KM2vPaDOkvtp7NA==",
+      "version": "21.1.0",
+      "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-21.1.0.tgz",
+      "integrity": "sha512-1Qxsu2cQhraKe2dKzIVm7no1qWi76QsXVwY7+VGKRYG7p+fKaFmnr7oU5EbJL66TsFzCb8mDGxLGikS+YE+X/g==",
      "peer": true,
      "requires": {
+        "@standard-schema/spec": "^1.0.0",
        "tslib": "^2.3.0"
      }
    },
    "@angular/localize": {
-      "version": "20.3.16",
-      "resolved": "https://registry.npmjs.org/@angular/localize/-/localize-20.3.16.tgz",
-      "integrity": "sha512-7S2ACDZC1Ag1+rc991BMvW6gDyBCH7ykGWpZL1aHOmnq4K70Sf8p2VyQMtYhaz7XfWeXxwBQjCncVYv6D7RO5A==",
+      "version": "21.1.0",
+      "resolved": "https://registry.npmjs.org/@angular/localize/-/localize-21.1.0.tgz",
+      "integrity": "sha512-N3j/dzbsMuM2To//ddLWiFw6LhsKlVr/NbJTy2RLw1u6/ypEdL768iGo8tPmvPO/P5IAFHMrDxYtmwgNdHFGhg==",
      "peer": true,
      "requires": {
-        "@babel/core": "7.28.3",
+        "@babel/core": "7.28.5",
        "@types/babel__core": "7.20.5",
        "tinyglobby": "^0.2.12",
        "yargs": "^18.0.0"
      }
    },
    "@angular/platform-browser": {
-      "version": "20.3.16",
-      "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-20.3.16.tgz",
-      "integrity": "sha512-YsrLS6vyS77i4pVHg4gdSBW74qvzHjpQRTVQ5Lv/OxIjJdYYYkMmjNalCNgy1ZuyY6CaLIB11ccxhrNnxfKGOQ==",
+      "version": "21.1.0",
+      "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-21.1.0.tgz",
+      "integrity": "sha512-Drkal25x+OuRQosAE/cL4uM5WDmgFehanCpsjQ1jGp6Rxoad6Q5Do1uQAE3qgMKHL1aqCPZ+uWzcVVG+Bn1ddg==",
      "peer": true,
      "requires": {
        "tslib": "^2.3.0"
      }
    },
    "@angular/router": {
-      "version": "20.3.16",
-      "resolved": "https://registry.npmjs.org/@angular/router/-/router-20.3.16.tgz",
-      "integrity": "sha512-e1LiQFZaajKqc00cY5FboIrWJZSMnZ64GDp5R0UejritYrqorQQQNOqP1W85BMuY2owibMmxVfX+dJg/Mc8PuQ==",
+      "version": "21.1.0",
+      "resolved": "https://registry.npmjs.org/@angular/router/-/router-21.1.0.tgz",
+      "integrity": "sha512-Sneu0ePuH+bf8ZslRX3iQk1iLziindLskdTeHV1ZCrXdT0ZScsZyI/gjxQKBtsIU9692D2DnFQRLGnzTBYVGVw==",
      "peer": true,
      "requires": {
        "tslib": "^2.3.0"
@@ -1591,21 +1587,21 @@
      "peer": true
    },
    "@babel/core": {
-      "version": "7.28.3",
-      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.28.3.tgz",
-      "integrity": "sha512-yDBHV9kQNcr2/sUr9jghVyz9C3Y5G2zUM2H2lo+9mKv4sFgbA8s8Z9t8D1jiTkGoO/NoIfKMyKWr4s6CN23ZwQ==",
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.28.5.tgz",
+      "integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==",
      "peer": true,
      "requires": {
-        "@ampproject/remapping": "^2.2.0",
        "@babel/code-frame": "^7.27.1",
-        "@babel/generator": "^7.28.3",
+        "@babel/generator": "^7.28.5",
        "@babel/helper-compilation-targets": "^7.27.2",
        "@babel/helper-module-transforms": "^7.28.3",
-        "@babel/helpers": "^7.28.3",
-        "@babel/parser": "^7.28.3",
+        "@babel/helpers": "^7.28.4",
+        "@babel/parser": "^7.28.5",
        "@babel/template": "^7.27.2",
-        "@babel/traverse": "^7.28.3",
-        "@babel/types": "^7.28.2",
+        "@babel/traverse": "^7.28.5",
+        "@babel/types": "^7.28.5",
+        "@jridgewell/remapping": "^2.3.5",
        "convert-source-map": "^2.0.0",
        "debug": "^4.1.0",
        "gensync": "^1.0.0-beta.2",
@@ -1771,6 +1767,16 @@
        "@jridgewell/trace-mapping": "^0.3.24"
      }
    },
+    "@jridgewell/remapping": {
+      "version": "2.3.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/remapping/-/remapping-2.3.5.tgz",
+      "integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==",
+      "peer": true,
+      "requires": {
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
    "@jridgewell/resolve-uri": {
      "version": "3.1.2",
      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
@@ -1807,36 +1813,36 @@
      }
    },
    "@ng-bootstrap/ng-bootstrap": {
-      "version": "19.0.1",
-      "resolved": "https://registry.npmjs.org/@ng-bootstrap/ng-bootstrap/-/ng-bootstrap-19.0.1.tgz",
-      "integrity": "sha512-1lErAkwh0F+gWkzpiddViY4GfA9LVXkwLpgBsV9Mb3IC0zo6WNkY8WxCC+LqajirBTu20DCkZSqeRzrwaVLpZw==",
+      "version": "20.0.0",
+      "resolved": "https://registry.npmjs.org/@ng-bootstrap/ng-bootstrap/-/ng-bootstrap-20.0.0.tgz",
+      "integrity": "sha512-Jt+GUQ0PdM8VsOUUVr7vTQXhwcGwe2DCe1mmfS21vz9pLSOtGRz41ohZKc1egUevj5Rxm2sHVq5Sve68/nTMfA==",
      "peer": true,
      "requires": {
        "tslib": "^2.3.0"
      }
    },
    "@ngrx/effects": {
-      "version": "20.1.0",
-      "resolved": "https://registry.npmjs.org/@ngrx/effects/-/effects-20.1.0.tgz",
-      "integrity": "sha512-wkIu0QnTarBd1zUswk643H5SILO9Be1OeswMe7g4tXlkNLFRPkyu0BUzXT80PsUPP5p0VrdFz3akrn3HHjjTjA==",
+      "version": "21.0.1",
+      "resolved": "https://registry.npmjs.org/@ngrx/effects/-/effects-21.0.1.tgz",
+      "integrity": "sha512-hSdpToAiSYa5FJ/CAygQHpnCaF2S1HO7q/57ob3XvNTWmkofa0VqI/IIe4W57bojh2YOWCJ91SCn3kAjymaV3g==",
      "peer": true,
      "requires": {
        "tslib": "^2.0.0"
      }
    },
    "@ngrx/router-store": {
-      "version": "20.1.0",
-      "resolved": "https://registry.npmjs.org/@ngrx/router-store/-/router-store-20.1.0.tgz",
-      "integrity": "sha512-XlpQsgmEc1E9Ogiv6QbJ8g8JzjrJOlr7JX9FngHIDLyXQFCMn5wcXsqhjiBjG9JgJLwlzV+v14i7EM/nqwQCGA==",
+      "version": "21.0.1",
+      "resolved": "https://registry.npmjs.org/@ngrx/router-store/-/router-store-21.0.1.tgz",
+      "integrity": "sha512-hacH8ciwCRMLg7p7bThslYn564GOyS5LPf9c8cX4FTyOH+iJM32eJd2Lt64cA62vN6ruofV/IM2vB09nCkxHzg==",
      "peer": true,
      "requires": {
        "tslib": "^2.0.0"
      }
    },
    "@ngrx/store": {
-      "version": "20.1.0",
-      "resolved": "https://registry.npmjs.org/@ngrx/store/-/store-20.1.0.tgz",
-      "integrity": "sha512-o8j3CGAGedm+BIb+QDhNXrVaU//n9uF0wH0HZWtXHmW1mjRBaQiUA+ZPMUkDwAeN8KuOcoIEC+2QUXxXGVI7ow==",
+      "version": "21.0.1",
+      "resolved": "https://registry.npmjs.org/@ngrx/store/-/store-21.0.1.tgz",
+      "integrity": "sha512-2hGnw/c5o8nmKzyx7TrUUM7FXjE2zqjX0EF+wLbw9Oy/L+VdCmx+ZI1BFjuAR4B8PKEWHG2KSbOM13SMNkpZiA==",
      "peer": true,
      "requires": {
        "tslib": "^2.0.0"
@@ -1848,6 +1854,12 @@
      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
      "peer": true
    },
+    "@standard-schema/spec": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.1.0.tgz",
+      "integrity": "sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==",
+      "peer": true
+    },
    "@types/babel__core": {
      "version": "7.20.5",
      "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
@@ -1899,9 +1911,9 @@
      }
    },
    "angular-oauth2-oidc": {
-      "version": "17.0.2",
-      "resolved": "https://registry.npmjs.org/angular-oauth2-oidc/-/angular-oauth2-oidc-17.0.2.tgz",
-      "integrity": "sha512-zYgeLmAnu1g8XAYZK+csAsCQBDhgp9ffBv/eArEnujGxNPTeK00bREHWObtehflpQdSn+k9rY2D15ChCSydyVw==",
+      "version": "20.0.2",
+      "resolved": "https://registry.npmjs.org/angular-oauth2-oidc/-/angular-oauth2-oidc-20.0.2.tgz",
+      "integrity": "sha512-bMSXEQIuvgq8yqnsIatZggAvCJvY+pm7G8MK0tWCHR93UpFuNN+L5B6pY9CzRg8Ys+VVhkLIBx4zEHbJnv9icg==",
      "peer": true,
      "requires": {
        "tslib": "^2.5.2"
@@ -1920,9 +1932,9 @@
      "peer": true
    },
    "baseline-browser-mapping": {
-      "version": "2.9.16",
-      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.9.16.tgz",
-      "integrity": "sha512-KeUZdBuxngy825i8xvzaK1Ncnkx0tBmb3k8DkEuqjKRkmtvNTjey2ZsNeh8Dw4lfKvbCOu9oeNx2TKm2vHqcRw==",
+      "version": "2.9.15",
+      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.9.15.tgz",
+      "integrity": "sha512-kX8h7K2srmDyYnXRIppo4AH/wYgzWVCs+eKr3RusRSQ5PvRYoEFmR/I0PbdTjKFAoKqp5+kbxnNTFO9jOfSVJg==",
      "peer": true
    },
    "bootstrap": {
@@ -1952,12 +1964,12 @@
      "peer": true
    },
    "chokidar": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
-      "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-5.0.0.tgz",
+      "integrity": "sha512-TQMmc3w+5AxjpL8iIiwebF73dRDF4fBIieAqGn9RGCWaEVwQ6Fb2cGe31Yns0RRIzii5goJ1Y7xbMwo1TxMplw==",
      "peer": true,
      "requires": {
-        "readdirp": "^4.0.1"
+        "readdirp": "^5.0.0"
      }
    },
    "cliui": {
@@ -2091,9 +2103,9 @@
      "peer": true
    },
    "ngx-avatars": {
-      "version": "1.10.0",
-      "resolved": "https://registry.npmjs.org/ngx-avatars/-/ngx-avatars-1.10.0.tgz",
-      "integrity": "sha512-bE/Yakj9ICA6F4hhMEgYxGPN0B8TkSGVz7L0DIyB1g7FpGvNEdX0b7z5c13tUe8kCJT7RiRL8aLWIuGRz9QN8w==",
+      "version": "1.10.1",
+      "resolved": "https://registry.npmjs.org/ngx-avatars/-/ngx-avatars-1.10.1.tgz",
+      "integrity": "sha512-nOWlOcVnXKrkVFtS4EyE1e9KuF126LU7LHUStPbe0IcZ/8ktK3h3jV4fgr6FQ6iTp6gfYWwH4y3qkW++dNRSZw==",
      "peer": true,
      "requires": {
        "ts-md5": "^2.0.1",
@@ -2111,9 +2123,9 @@
      }
    },
    "ngx-image-cropper": {
-      "version": "7.2.1",
-      "resolved": "https://registry.npmjs.org/ngx-image-cropper/-/ngx-image-cropper-7.2.1.tgz",
-      "integrity": "sha512-SRsY9ar+sGbdzQ1D37PQicSkqaMX7n2ADvz8FdHUjGMGYbLjKe0o6fKhy5QKfV7dS6aD1VqhNr0fr486B1r2NA==",
+      "version": "9.1.6",
+      "resolved": "https://registry.npmjs.org/ngx-image-cropper/-/ngx-image-cropper-9.1.6.tgz",
+      "integrity": "sha512-b250YJ+jZovfqIj8vdEOrpEFay34be5f1Hpvg6Db68VMlvdyyuzboJdR0gCupbXtVcG6qQ86L7YG+SYxXJwApw==",
      "peer": true,
      "requires": {
        "tslib": "^2.3.0"
@@ -2186,9 +2198,9 @@
      "peer": true
    },
    "readdirp": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
-      "integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-5.0.0.tgz",
+      "integrity": "sha512-9u/XQ1pvrQtYyMpZe7DXKv2p5CNvyVwzUB6uhLAnQwHMSgKMBR62lc7AHljaeteeHXn11XTAaLLUVZYVZyuRBQ==",
      "peer": true
    },
    "reflect-metadata": {
--- a/projects/common/package.json
+++ b/projects/common/package.json
@@ -1,25 +1,42 @@
 {
  "name": "@farmmaps/common",
-  "version": "2.1.0",
+  "version": "21.1.0",
  "publishConfig": {
    "registry": "https://repository.akkerweb.nl/repository/npm-hosted/"
  },
  "peerDependencies": {
    "@ng-bootstrap/ng-bootstrap": "^20.0.0",
-    "@angular/common": "^21.1.0",
-    "@angular/core": "^21.1.0",
-    "@angular/forms": "^21.1.0",
-    "@ngrx/effects": "^21.0.1",
-    "@ngrx/router-store": "^21.0.1",
-    "@ngrx/store": "^21.0.1",
+    "@angular/common": "21.1.0",
+    "@angular/core": "21.1.0",
+    "@angular/forms": "21.1.0",
+    "@ngrx/effects": "21.0.1",
+    "@ngrx/router-store": "21.0.1",
+    "@ngrx/store": "21.0.1",
    "tassign": "^1.0.0",
    "bootstrap": "^5.3.3",
-    "@microsoft/signalr": "^10.0.0",
-    "ngx-uploadx": "^7.0.1",
-    "angular-oauth2-oidc": "^20.0.2",
+    "@microsoft/signalr": "10.0.0",
+    "ngx-uploadx": "7.0.1",
+    "angular-oauth2-oidc": "20.0.2",
    "moment": "^2.29.4",
-    "ngx-avatars": "^1.10.1",
-    "ngx-image-cropper": "^7.0.0",
+    "ngx-avatars": "1.10.1",
+    "ngx-image-cropper": "9.1.6",
    "ngx-clipboard": "^16.0.0"
+  },
+  "overrides": {
+    "ngx-avatars": {
+      "@angular/common": "$@angular/common",
+      "@angular/core": "$@angular/core"
+    },
+    "ngx-clipboard": {
+      "@angular/core": "$@angular/core"
+    },
+    "ngx-image-cropper": {
+      "@angular/common": "$@angular/common",
+      "@angular/core": "$@angular/core"
+    }
+    ,
+    "ngx-uploadx": {
+      "@angular/core": "$@angular/core"
+    }
  }
-}
+}
--- a/projects/common/src/fm/common-service.module.ts
+++ b/projects/common/src/fm/common-service.module.ts
@@ -38,10 +38,7 @@ import { PackageService } from './services/package.service';
 import { PackagePreloadStrategy } from './services/package-preload-strategy.service';
 import { SenmlService } from './services/senml-service';
 import { DeviceService } from './services/device.service';
-import { GradientService } from './services/gradient.service';
-import { UserDataService } from './services/user-data.service';
-import { CacheService } from './services/cache-service';
-import { SharedItemService } from './services/shared.item.service';
+import { GradientService} from './services/gradient.service';

 export {
  FolderService,
@@ -72,10 +69,7 @@ export {
  SenmlService,
  PackagePreloadStrategy,
  DeviceService,
-  GradientService,
-  UserDataService,
-  CacheService,
-  SharedItemService
+  GradientService
 };

@NgModule({
@@ -96,9 +90,9 @@ export class AppCommonServiceModule {
      providers: [
        AppConfig,
        ItemTypeService,
-        provideAppInitializer(() => {
-        const initializerFn = (appConfigFactory)(inject(Injector), inject(AppConfig), inject(OAuthService), inject(AuthConfigFactory), inject(OAuthStorage), inject(ItemTypeService));
-        return initializerFn();
+        provideAppInitializer(() => {
+        const initializerFn = (appConfigFactory)(inject(Injector), inject(AppConfig), inject(OAuthService), inject(AuthConfigFactory), inject(OAuthStorage), inject(ItemTypeService));
+        return initializerFn();
      }),
        {
          provide: HTTP_INTERCEPTORS,
--- a/projects/common/src/fm/common.module.ts
+++ b/projects/common/src/fm/common.module.ts
@@ -20,7 +20,7 @@ import { MODULE_NAME } from './module-name';

 //components
 import { AvatarModule } from 'ngx-avatars';
-import { ImageCropperModule } from 'ngx-image-cropper';
+import { ImageCropperComponent } from 'ngx-image-cropper';
 import * as commonActions from './actions/app-common.actions';
 import { AppMenuComponent } from './components/app-menu/app-menu.component';
 import { AppComponent } from './components/app/app.component';
@@ -34,7 +34,6 @@ import { HasClaimDirective } from './components/has-claim/has-claim.directive';
 import { HasPackageDirective } from './components/has-package/has-package.directive';
 import { HasRoleDirective } from './components/has-role/has-role.directive';
 import { HelpMenuComponent } from './components/help-menu/help-menu.component';
-import { SettingMenuComponent } from './components/setting-menu/setting-menu.component';
 import { ItemLinkComponent } from './components/item-link/item-link.component';
 import { MenuBackgroundComponent } from './components/menu-background/menu-background.component';
 import { NotFoundComponent } from './components/not-found/not-found.component';
@@ -43,6 +42,7 @@ import { NotificationMenuComponent } from './components/notification-menu/notifi
 import { PackageExistsDirective } from './components/package-exists/package-exists.directive';
 import { ResumableFileUploadComponent } from './components/resumable-file-upload/resumable-file-upload.component';
 import { SessionClearedComponent } from './components/session-cleared/session-cleared.component';
+import { SettingMenuComponent } from './components/setting-menu/setting-menu.component';
 import { SidePanelComponent } from './components/side-panel/side-panel.component';
 import { TagInputComponent } from './components/tag-input/tag-input.component';
 import { ThumbnailComponent } from './components/thumbnail/thumbnail.component';
@@ -61,9 +61,6 @@ import { IItemTask, ItemTask } from './models/itemTask';
 import { IJsonline } from './models/json-line';
 import { IListItem } from './models/list.item';
 import { IPackage, IPackages } from './models/package';
-import { IAclRights } from './models/acl.rights';
-import { IListItemAclRights } from './models/list.item.acl.rights';
-import { ISharedItem } from './models/shared.item';
 import { IQueryState } from './models/query.state';
 import { ISenMLItem } from './models/senml-item';
 import { ITypeaheadItem } from './models/typeahead.item';
@@ -78,13 +75,12 @@ import { SecureOAuthStorage } from './shared/secureOAuthStorage';
 export const FM_COMMON_STARTPAGE = new InjectionToken<string>('fm-common-startpage');

 export {
-  Alert, AppComponent, AuthCallbackComponent, AuthConfigFactory, AvatarComponent, BackButtonComponent, commonActions,
-  commonReducers, EditImageModalComponent,
-  GradientComponent,
-  GradientSelectComponent, HasClaimDirective, HasPackageDirective, HasRoleDirective, IAuthconfigFactory, IColor, IDataLayer, IEventMessage, IGradientstop, IItem, IItemLinkType, IItemTask, IItemType, IItemTypes, IJsonline, IListItem, IPackage,
-  IAclRights, IListItemAclRights, ISharedItem,
-  IPackages, IQueryState, ISenMLItem, Item, ItemLinkComponent, ItemTask, ITypeaheadItem, IUrlType, IUser, MenuBackgroundComponent, NotFoundComponent,
-  NotImplementedComponent, PackageExistsDirective, ResumableFileUploadComponent, SafePipe, SecureOAuthStorage, SessionClearedComponent, SidePanelComponent, TagInputComponent, ThumbnailComponent, TimespanComponent, UserMenuComponent, WeatherCurrentObservation
+    Alert, AppComponent, AuthCallbackComponent, AuthConfigFactory, AvatarComponent, BackButtonComponent, commonActions,
+    commonReducers, EditImageModalComponent,
+    GradientComponent,
+    GradientSelectComponent, HasClaimDirective, HasPackageDirective, HasRoleDirective, IAuthconfigFactory, IColor, IDataLayer, IEventMessage, IGradientstop, IItem, IItemLinkType, IItemTask, IItemType, IItemTypes, IJsonline, IListItem, IPackage,
+    IPackages, IQueryState, ISenMLItem, Item, ItemLinkComponent, ItemTask, ITypeaheadItem, IUrlType, IUser, MenuBackgroundComponent, NotFoundComponent,
+    NotImplementedComponent, PackageExistsDirective, ResumableFileUploadComponent, SafePipe, SecureOAuthStorage, SessionClearedComponent, SidePanelComponent, TagInputComponent, ThumbnailComponent, TimespanComponent, UserMenuComponent, WeatherCurrentObservation
 };

@NgModule({ declarations: [
@@ -155,6 +151,6 @@ export {
        UploadxModule,
        ClipboardModule,
        AvatarModule,
-        ImageCropperModule], providers: [provideHttpClient(withInterceptorsFromDi())] })
+        ImageCropperComponent], providers: [provideHttpClient(withInterceptorsFromDi())] })
 export class AppCommonModule {
 }
--- a/projects/common/src/fm/components/app-menu/app-menu.component.html
+++ b/projects/common/src/fm/components/app-menu/app-menu.component.html
@@ -1,5 +1,5 @@
 <div>
-    <div   (click)="toggle($event)" class="rounded-circle menu-button hidden"  [ngClass]="{'hidden':!user || noContent}">
+    <div   (click)="toggle($event)" class="rounded-circle menu-button hidden" [ngClass]="{'hidden':!user || noContent}">
        <span i18n-title title="Apps"><i class="fas fa-th" aria-hidden="true"></i></span>
        <div class="menu hidden" [ngClass]="{'hidden':!showMenu}">                                     
            <router-outlet name="app-menu" (activate)="activateRoute()" (deactivate)="deActivateRoute()"></router-outlet>            
--- a/projects/common/src/fm/components/app-menu/app-menu.component.ts
+++ b/projects/common/src/fm/components/app-menu/app-menu.component.ts
@@ -1,9 +1,8 @@
-import { Component, OnInit, Input } from '@angular/core';
-
-import { IUser } from '../../models/user';
-import {Store} from '@ngrx/store';
-import * as appReducers from '../../reducers/app-common.reducer';
+import { Component, Input, OnInit } from '@angular/core';
+import { Store } from '@ngrx/store';
 import * as appActions from '../../actions/app-common.actions';
+import { IUser } from '../../models/user';
+import * as appReducers from '../../reducers/app-common.reducer';

@Component({
    selector: 'fm-app-menu',
@@ -34,5 +33,4 @@ export class AppMenuComponent implements OnInit {
  deActivateRoute() {
    this.noContent=true;
  }
-
 }
--- a/projects/common/src/fm/components/app/app.component.ts
+++ b/projects/common/src/fm/components/app/app.component.ts
@@ -19,13 +19,13 @@ import { AppConfig } from '../../shared/app.config';

 import * as appReducers from '../../reducers/app-common.reducer';

-@Component({
-    selector: 'fm-app',
-    templateUrl: './app.component.html',
-    styleUrls: ['./app.component.scss'],
-    encapsulation: ViewEncapsulation.None,
-    changeDetection: ChangeDetectionStrategy.OnPush,
-    standalone: false
+@Component({
+    selector: 'fm-app',
+    templateUrl: './app.component.html',
+    styleUrls: ['./app.component.scss'],
+    encapsulation: ViewEncapsulation.None,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: false
 })
 export class AppComponent implements OnInit, OnDestroy {

--- a/projects/common/src/fm/components/gradient-select/gradient-select.component.html
+++ b/projects/common/src/fm/components/gradient-select/gradient-select.component.html
@@ -11,7 +11,7 @@
    <div class="gradient-list" [ngClass]="{'visible':listVisible}">
      @if (gradientItems) {
        <ul>
-          @for (item of gradientItems; track item.code) {
+          @for (item of gradientItems; track item) {
            <li (click)="handleSelect(item)" [ngClass]="{'bg-primary':isSelected(item),'text-white':isSelected(item)} ">
              <div>{{item?.name}}</div>
              <div><fm-gradient [gradientItem]="item"></fm-gradient></div>
--- a/projects/common/src/fm/components/resumable-file-upload/resumable-file-upload.component.html
+++ b/projects/common/src/fm/components/resumable-file-upload/resumable-file-upload.component.html
@@ -13,7 +13,7 @@
      <div [ngClass]="{'minimized': uploadService.isMinimized }">
        <div class="card-block p-3">
          <ul class="list-unstyled">
-            @for (file of uploadService.files; track $index) {
+            @for (file of uploadService.files; track file) {
              <li class="upload-file busy" [ngClass]="{'done': file.success,'busy':file.success == false,'error': file.error }">
                @if (file.success == false) {
                  <div><span class="file-name" [attr.title]="file?.fileName">{{file.fileName}}</span><span class="fal fa-times" title="Cancel" (click)="uploadService.cancelFile(file)"></span><span class="fal fa-check"></span></div>
--- a/projects/common/src/fm/components/tag-input/tag-input.component.html
+++ b/projects/common/src/fm/components/tag-input/tag-input.component.html
@@ -1,5 +1,5 @@
 <div class="tags">
-  @for (tag of tags; track $index) {
+  @for (tag of tags; track tag) {
    <span class="tag rounded bg-primary text-white"><span>{{tag}}</span> <i
  (click)="handleDeleteTag(tag)" class="fal fa-times" aria-hidden="true"></i></span>
  }<input
--- a/projects/common/src/fm/models/acl.rights.ts
+++ b/projects/common/src/fm/models/acl.rights.ts
@@ -1,9 +0,0 @@
-export interface IAclRights {
-  id?: number,
-  claim: any,
-  expires: Date,
-  rights: number,
-  owner: any,
-  deep: boolean
-}
-  
--- a/projects/common/src/fm/models/list.item.acl.rights.ts
+++ b/projects/common/src/fm/models/list.item.acl.rights.ts
@@ -1,6 +0,0 @@
-import { IAclRights } from './acl.rights';
-import { IItem } from './item';
-
-export interface IListItemAclRights extends IItem {
-  aclRights: IAclRights[]
-}
--- a/projects/common/src/fm/models/shared.item.ts
+++ b/projects/common/src/fm/models/shared.item.ts
@@ -1,13 +0,0 @@
-import { IUser } from "./user";
-
-export interface ISharedItem {
-    code: string,
-    name: string,
-    type: string,
-    sharedToUser: IUser,
-    rights: Date,
-    expires: Date,
-    dataDate: Date,
-    childItems: ISharedItem[]
-  }
-  
--- a/projects/common/src/fm/services/cache-service.ts
+++ b/projects/common/src/fm/services/cache-service.ts
@@ -1,45 +0,0 @@
-import { Injectable } from '@angular/core';
-import { OAuthService } from 'angular-oauth2-oidc';
-import { Observable, ReplaySubject, Subscription, timer } from 'rxjs';
-import { catchError, take } from 'rxjs/operators';
-import { IItem } from '../models/item';
-import { ItemService } from './item.service';
-
-const REFRESH_INTERVAL = 15 * 60 * 1000;  // 15m
-
-@Injectable({ providedIn: 'root'})
-export class CacheService {
-  private proxyCacheMap: { [key: string]: ReplaySubject<IItem[]> } = {};
-  private subscriptionMap: { [key: string]: Subscription } = {};
-
-  constructor(private itemService: ItemService, public oauthService: OAuthService) {
-    timer(0, REFRESH_INTERVAL).subscribe(() => {
-      this.subscriptionMap = {};
-    })
-  }
-
-  getItemList(itemType: string) : Observable<IItem[]> {
-    if (!this.proxyCacheMap[itemType]) {
-      this.proxyCacheMap[itemType] = new ReplaySubject(1);
-    }
-
-    if (this.oauthService.getAccessToken() != null && !this.subscriptionMap[itemType]) {
-      this.subscriptionMap[itemType] = this.itemService.getItemList(itemType)
-        .pipe(          
-          catchError(error => {
-            this.subscriptionMap[itemType].unsubscribe();
-            this.subscriptionMap[itemType] = null;
-            throw error;
-          }),
-
-      ).subscribe(items => {
-        this.proxyCacheMap[itemType].next(items);
-      });
-    }
-
-    return this.proxyCacheMap[itemType].asObservable()
-      .pipe(
-        take(1)
-      );
-  }
-}
--- a/projects/common/src/fm/services/shared.item.service.ts
+++ b/projects/common/src/fm/services/shared.item.service.ts
@@ -1,74 +0,0 @@
-import { HttpClient, HttpParams } from '@angular/common/http';
-import { Injectable } from '@angular/core';
-import { Observable } from 'rxjs';
-import { IListItemAclRights } from '../models/list.item.acl.rights';
-import { ISharedItem } from '../models/shared.item';
-import { AppConfig } from '../shared/app.config';
-import { IListItem } from '../models/list.item';
-
-@Injectable({
-  providedIn: 'root'
-})
-export class SharedItemService {
-
-  constructor(
-    public httpClient: HttpClient,
-    public appConfig: AppConfig) {
-  }
-
-  apiEndpoint() {
-    return this.appConfig.getConfig('apiEndPoint');
-  }
-
-  public getSharedUsersForItem(itemCode: string): Observable<any> {
-    return this.httpClient.get<any>(`${this.apiEndpoint()}/api/v1/items/${itemCode}/sharedusers`);
-  }
-
-  getSharedItemsWithRightsInfo(userCode: string): Observable<ISharedItem[]> {
-    return this.httpClient.get<any>(`${this.apiEndpoint()}/api/v1/users/${userCode}/shared`);
-  }
-
-  shareItem(itemCode: string, userCode: string, userRights: string, expireTimespan: string, deep: boolean): Observable<any> {
-    const body = {
-      rights: userRights,
-      expire: expireTimespan,
-      deep: deep
-    };
-
-    return this.httpClient.post<any>(`${this.apiEndpoint()}/api/v1/items/${itemCode}/share/${userCode}`, body);
-  }
-
-  revokeSharedItem(itemCode: string, userCode: string): Observable<any> {
-    return this.httpClient.delete<any>(`${this.apiEndpoint()}/api/v1/items/${itemCode}/share/${userCode}`);
-  }
-
-  getSharedItemRights(sharedByMe: boolean): Observable<IListItemAclRights[]> {
-    let params = new HttpParams();
-    params = params.append('byMe', sharedByMe);
-
-    return this.httpClient.get<any>(`${this.apiEndpoint()}/api/v1/user/rights`, {params: params});
-  }
-
-  getSharedItemsByParent(parentCode: string): Observable<ISharedItem[]> {
-    return this.httpClient.get<any>(`${this.apiEndpoint()}/api/v1/items/${parentCode}/sharedchildren`);
-  }
-
-  getSharedWithCurrentUser(profile: string): Observable<IListItem[]> {
-    let params = new HttpParams();
-    if (profile != null) {
-      params = params.append('sharedBy', profile);
-    }
-
-    return this.httpClient.get<any>(`${this.apiEndpoint()}/api/v1/items/shared/`, {params: params});
-  }
-
-  // this method does not belong here, belongs in some sort of item service
-  public copyItem(itemCode: string, newParentCode: string, newUserCode: string): Observable<any> {
-    const body = {
-      itemCode: itemCode,
-      newParentCode: newParentCode,
-      newUserCode: newUserCode
-    };
-    return this.httpClient.post<any>(`${this.apiEndpoint()}/api/v1/items/copy`, body);
-  }
-}
--- a/projects/common/src/fm/services/user-data.service.ts
+++ b/projects/common/src/fm/services/user-data.service.ts
@@ -1,35 +0,0 @@
-import { HttpClient } from '@angular/common/http';
-import { Injectable } from '@angular/core';
-import { Observable } from 'rxjs';
-import { AppConfig } from '../shared/app.config';
-import { IUser } from '../models/user';
-
-@Injectable({
-  providedIn: 'root'
-})
-export class UserDataService {
-  constructor(
-    public httpClient: HttpClient,
-    public appConfig: AppConfig) {
-  }
-
-  ApiEndpoint() {
-    return this.appConfig.getConfig('apiEndPoint');
-  }
-
-  loadUserNotifications(): Observable<any> {
-    return this.httpClient.get<any>(`${this.ApiEndpoint()}/api/v1/notifications`);
-  }
-
-  readUserNotification(notificationCode: string): Observable<any> {
-    return this.httpClient.put<any>(`${this.ApiEndpoint()}/api/v1/notifications/${notificationCode}`, null);
-  }
-
-  deleteUserNotification(notificationCode: string): Observable<any> {
-    return this.httpClient.delete<any>(`${this.ApiEndpoint()}/api/v1/notifications/${notificationCode}`);
-  }
-
-  getUserConnections(userCode: string, active: boolean): Observable<IUser[]> {
-    return this.httpClient.get<any>(`${this.ApiEndpoint()}/api/v1/users/${userCode}/connections?active=${active}`);
-  }
-}
--- a/projects/common/src/test.ts
+++ b/projects/common/src/test.ts
@@ -0,0 +1,18 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'core-js/es7/reflect';
+import 'zone.js';
+import 'zone.js/testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting(), {
+    teardown: { destroyAfterEach: false }
+}
+);
--- a/projects/common/tsconfig.lib.json
+++ b/projects/common/tsconfig.lib.json
@@ -27,6 +27,7 @@
    "compilationMode": "partial"
  },
  "exclude": [
+    "src/test.ts",
    "**/*.spec.ts"
  ]
 }
--- a/projects/common/tsconfig.lib.prod.json
+++ b/projects/common/tsconfig.lib.prod.json
@@ -27,6 +27,7 @@
    "compilationMode": "partial"
  },
  "exclude": [
+    "src/test.ts",
    "**/*.spec.ts"
  ]
 }
--- a/projects/common/tsconfig.spec.json
+++ b/projects/common/tsconfig.spec.json
@@ -3,10 +3,12 @@
  "compilerOptions": {
    "outDir": "../../out-tsc/spec",
    "types": [
+      "jasmine",
      "node"
    ]
  },
  "files": [
+    "src/test.ts"
  ],
  "include": [
    "**/*.spec.ts",
--- a/projects/ng-openlayers/.eslintrc.json
+++ b/projects/ng-openlayers/.eslintrc.json
@@ -10,7 +10,8 @@
      ],
      "parserOptions": {
        "project": [
-          "libs/ng-openlayers/tsconfig.*?.json"
+          "projects/ngx-openlayers/tsconfig.lib.json",
+          "projects/ngx-openlayers/tsconfig.spec.json"
        ],
        "createDefaultProgram": true
      },
@@ -41,7 +42,8 @@
          "off",
          "always"
        ],
-        "import/order": "off"
+        "import/order": "off",
+        "no-underscore-dangle": "off"
      }
    },
    {
--- a/projects/ng-openlayers/CHANGELOG.md
+++ b/projects/ng-openlayers/CHANGELOG.md
@@ -0,0 +1,705 @@
+# Changelog
+
+All notable changes to this project will be documented in this file. See [commit-and-tag-version](https://github.com/absolute-version/commit-and-tag-version) for commit guidelines.
+
+## [20.0.1](https://github.com/quentinlampin/ngx-openlayers/compare/20.0.0...20.0.1) (2026-01-13)
+
+
+### Bug Fixes
+
+* LayerImageComponent, LayerTileComponent, LayerVectorComponent and LayerVectorTileComponent inputs are not applied ([dd03fbb](https://github.com/quentinlampin/ngx-openlayers/commit/dd03fbb6f09ee93d3d90358fa5735c6a6ca4d1f3)), closes [#348](https://github.com/quentinlampin/ngx-openlayers/issues/348)
+
+## [20.0.0](https://github.com/quentinlampin/ngx-openlayers/compare/19.1.3...20.0.0) (2025-12-18)
+
+
+### ⚠ BREAKING CHANGES
+
+* Angular 18 is no more supported
+* ol peer dependency is now ~10.7.0
+
+### build
+
+* update to Angular 20 ([ce87117](https://github.com/quentinlampin/ngx-openlayers/commit/ce87117311c0eb6b5df95da0289a64392e0df8f3)), closes [#333](https://github.com/quentinlampin/ngx-openlayers/issues/333)
+
+## [19.1.3](https://github.com/quentinlampin/ngx-openlayers/compare/19.1.2...19.1.3) (2025-11-06)
+
+## [19.1.2](https://github.com/quentin-ol/ngx-openlayers/compare/19.1.1...19.1.2) (2025-11-06)
+
+## [19.1.1](https://github.com/quentin-ol/ngx-openlayers/compare/19.1.0...19.1.1) (2025-11-06)
+
+## [19.1.0](https://github.com/quentin-ol/ngx-openlayers/compare/19.0.0...19.1.0) (2025-11-06)
+
+
+### Features
+
+* **interaction:** snap interaction ([cd0e34e](https://github.com/quentin-ol/ngx-openlayers/commit/cd0e34ec345da3e1181fca7486bba3a18e43a766)), closes [#335](https://github.com/quentin-ol/ngx-openlayers/issues/335)
+
+## [19.0.0](https://github.com/quentin-ol/ngx-openlayers/compare/18.0.2...19.0.0) (2025-10-02)
+
+
+### ⚠ BREAKING CHANGES
+
+* Angular 17 is no more supported
+
+### build
+
+* update to Angular 19 ([83f06f8](https://github.com/quentin-ol/ngx-openlayers/commit/83f06f829672045454cb6c32b3c89e2cebc2a953)), closes [#326](https://github.com/quentin-ol/ngx-openlayers/issues/326)
+
+## [18.0.2](https://github.com/quentin-ol/ngx-openlayers/compare/18.0.1...18.0.2) (2025-06-23)
+
+
+### Bug Fixes
+
+* **layers:** add missing inputs ([a25a612](https://github.com/quentin-ol/ngx-openlayers/commit/a25a6122ec6eb2a44e5bb3d08ad20989c7991111)), closes [#318](https://github.com/quentin-ol/ngx-openlayers/issues/318)
+
+## [18.0.1](https://github.com/quentin-ol/ngx-openlayers/compare/18.0.0...18.0.1) (2025-06-17)
+
+## [18.0.0](https://github.com/quentin-ol/ngx-openlayers/compare/v0.8.22...v18.0.0) (2025-06-17)
+
+
+### ⚠ BREAKING CHANGES
+
+* Angular 16 is no more supported
+* `ol` peer dep is now `~10.5.0`
+* see all breaking changes from `ol` `10.0.0` (https://github.com/openlayers/openlayers/blob/main/changelog/v10.0.0.md)
+* `ol` peer dep is now `~9.2.4`
+* see all breaking changes from `ol` `9.0.0` (https://github.com/openlayers/openlayers/blob/main/changelog/v9.0.0.md)
+* Angular 15 is no more supported
+* `ol` peer dep is now `8.2.0`
+* see all breaking changes from `ol` `8.0.0` (https://github.com/openlayers/openlayers/blob/main/changelog/upgrade-notes.md#800)
+* Angular 14 is no more supported
+* `ol` peer dep is now `~7.5.2`
+* see all breaking changes from `ol` `7.0.0` (https://github.com/openlayers/openlayers/blob/main/changelog/upgrade-notes.md#700)
+* see all breaking changes from `ol` `7.1.0` (https://github.com/openlayers/openlayers/blob/main/changelog/upgrade-notes.md#710)
+* see all breaking changes from `ol` `7.2.0` (https://github.com/openlayers/openlayers/blob/main/changelog/upgrade-notes.md#720)
+* see all breaking changes from `ol` `7.5.0` (https://github.com/openlayers/openlayers/blob/main/changelog/upgrade-notes.md#750)
+* `ol` peer dep is now `~6.15.1`
+* `DrawInteractionComponent` : input `type` is now of type `Type`
+* `SourceImageWMSComponent` : input `serverType` is now of type `ServerType`
+* `OverlayComponent` : input `positioning` is now of type `Positioning`
+* `SourceTileWMSComponent` : input `projection` is now of type `ProjectionLike` and input `serverType` is now of type `ServerType`
+* `SourceTileWMTSComponent` : input `requestEncoding` is now of type `RequestEncoding`
+* all components inputs of type `Element` or `Node` are now of type `HTMLElement`
+* all `olChangeActive` and `propertyChange` outputs are now `EventEmitter<ObjectEvent>`
+* `FormatMVTComponent` : input `featureClass` is now of type `FeatureClass`
+* `DragAndDropInteractionComponent` : input `formatConstructors` is now of type `FeatureFormat[]`
+* `LayerComponent` : `prerender` and `postrender` inputs functions should now manage events of type `RenderEvent`
+* `SourceImageArcGISRestComponent` : `attributions` input is now of type `AttributionLike`
+* `SourceTileWMTSComponent` : `tileGrid` input is now of type `WMTSTileGrid`
+* `SourceUTFGridComponent` : `tileJSON` input is now of type `Config`
+* `StyleCircleComponent` : `snapToPixel` and `atlasManager` have been removed
+* `StyleIconComponent` : `img` input is now of type `HTMLImageElement | HTMLCanvasElement`
+* `MapComponent` : `prerender` output has been removed, `precompose` output has been added. `olClick`, `dblClick`, `pointerDrag`, `pointerMove`, `singleClick` outputs are now of type `EventEmitter<MapBrowserEvent<UIEvent>>`
+* `ViewComponent` : `changeZoom` output has been removed
+* **geom:** The coordinates input on CollectionCoordinatesComponent is not anymore limited to type [number, number][], but it supports all types of coordinates.
+   That means the existing code must be updated for polygons:
+
+   Old style:
+  ```html
+  <aol-feature>
+      <aol-geometry-polygon>
+          <aol-collection-coordinates
+              [coordinates]="[[5, 45],[5.05, 45.05],[5.05, 44.95],[4.95, 44.95]]"
+              [srid]="'EPSG:4326'"
+          >
+          </aol-collection-coordinates>
+      </aol-geometry-polygon>
+      <aol-style>
+          <aol-style-stroke [color]="'red'"></aol-style-stroke>
+          <aol-style-fill [color]="[255,0,0,0.5]"></aol-style-fill>
+      </aol-style>
+  </aol-feature>
+  ```
+  New style:
+
+   ```html
+  <aol-feature>
+      <aol-geometry-polygon>
+          <aol-collection-coordinates
+              [coordinates]="[[[5, 45],[5.05, 45.05],[5.05, 44.95],[4.95, 44.95]]]"
+              [srid]="'EPSG:4326'"
+          >
+          </aol-collection-coordinates>
+      </aol-geometry-polygon>
+      <aol-style>
+          <aol-style-stroke [color]="'red'"></aol-style-stroke>
+          <aol-style-fill [color]="[255,0,0,0.5]"></aol-style-fill>
+      </aol-style>
+  </aol-feature>
+  ```
+  Notice the [coordinates] input is now a [number, number][][], as defined in GeoJSON.
+
+   This also allows to display polygon with holes, which is not possible with the current code.
+* **openlayers:** Migration from `openlayers` package to `ol`
+
+### build
+
+* update to Angular 16 ([b3c6691](https://github.com/quentin-ol/ngx-openlayers/commit/b3c6691b88893a6509020ade9b9eee9664754a5a))
+* update to Angular 17 ([5676ce3](https://github.com/quentin-ol/ngx-openlayers/commit/5676ce304c8260e4acbea9aaed1f9c72c0edb9ab))
+* update to Angular 18 ([f2e5ed8](https://github.com/quentin-ol/ngx-openlayers/commit/f2e5ed8d6235ba95c874ea3fd4a934dbd2a0b87f))
+
+
+### Features
+
+* **cluster:** add wrapX option ([f3106e4](https://github.com/quentin-ol/ngx-openlayers/commit/f3106e4996537faa4b2823d786cdcc3339069025))
+* **cluster:** update distance input ([6e448a8](https://github.com/quentin-ol/ngx-openlayers/commit/6e448a849c76ea3e6240754d6a1f7598b679116e))
+* **demo:** add example of a cursor position ([eae0a1f](https://github.com/quentin-ol/ngx-openlayers/commit/eae0a1f80822c8bf0976b607a04a447f59697653))
+* **demo:** add example of geojson feature : point, polygon, linestring ([43e5eb7](https://github.com/quentin-ol/ngx-openlayers/commit/43e5eb791de291ac1d030056af783dcc6bc0b16e))
+* **demo:** add example of map position with longitude, latitude and zoom ([107e94c](https://github.com/quentin-ol/ngx-openlayers/commit/107e94c2180348f9b5bffa6ae53ad1f7d952042d))
+* **demo:** add example to display geometry of a geojson file ([939499c](https://github.com/quentin-ol/ngx-openlayers/commit/939499c146ea6dffe30716cf0fdbdd7d0985e2fc))
+* **demo:** example change color on hover or on select ([6f8d7f9](https://github.com/quentin-ol/ngx-openlayers/commit/6f8d7f990f48340e98ce57fee465286fddc79424))
+* **demo:** example draw a polygon ([2bf558c](https://github.com/quentin-ol/ngx-openlayers/commit/2bf558c29c66bd5abe7d7df07482c279ba209735))
+* **demo:** example modify polygon ([240e3dc](https://github.com/quentin-ol/ngx-openlayers/commit/240e3dc275c3f31fdb84add34561bdd9ed0c8eda))
+* **demo:** example of marker with svg ([f37e5ef](https://github.com/quentin-ol/ngx-openlayers/commit/f37e5ef2538a977d590c97a05caa4c51e0e58f9e))
+* **demo:** example of overlay ([af15282](https://github.com/quentin-ol/ngx-openlayers/commit/af15282117ae69395e4cc7deb56aa2d49f17dc22))
+* **demo:** example of side by side ([8f2408e](https://github.com/quentin-ol/ngx-openlayers/commit/8f2408e9b3155cff79c3548a9ea3fab6368d495f))
+* **demo:** example of swipe ([8bb64c5](https://github.com/quentin-ol/ngx-openlayers/commit/8bb64c5e3ed1c42581081b464ccbc96e8d834ff0))
+* **geom:** add circle geometry ([#210](https://github.com/quentin-ol/ngx-openlayers/issues/210)) ([9ac6458](https://github.com/quentin-ol/ngx-openlayers/commit/9ac6458f7fa791ae3d36a1588cdcf684b5a3193c))
+* **geom:** implements MultiPoint, MultiLinestring and MultiPolygon ([98a10d0](https://github.com/quentin-ol/ngx-openlayers/commit/98a10d0982f6ed2493794042622ed13ab8c4a030))
+* **graticule:** unregister on destroy ([bb7fa9f](https://github.com/quentin-ol/ngx-openlayers/commit/bb7fa9f16750020441c0d1a8e564d65d09ce59cc))
+* **image:** add image loading events ([beada1b](https://github.com/quentin-ol/ngx-openlayers/commit/beada1b6cb927af01abc819ce538493743a9a54f))
+* **imagearcgis:** add image events ([9e26397](https://github.com/quentin-ol/ngx-openlayers/commit/9e2639769c30b82eaafce61ef601ec1b4340167b))
+* **map:** add onMoveStart event ([46b8ad3](https://github.com/quentin-ol/ngx-openlayers/commit/46b8ad390d8e0f8085b0c456fe0160b3d6452917))
+* **openlayers:** migrate to 5 version ([54e47fc](https://github.com/quentin-ol/ngx-openlayers/commit/54e47fc039a77d3e5697c8a85903d5df13aa907d))
+* **overviewmap:** refresh overview when the view changes ([18bc7a6](https://github.com/quentin-ol/ngx-openlayers/commit/18bc7a60f281b04c20f99f5d2efe94ca47b19cf8))
+* **raster:** not updated when source change ([ad5f265](https://github.com/quentin-ol/ngx-openlayers/commit/ad5f26530e00b809bf02eb757095343d3e36231b))
+* **source-vector:** support of 'loader' input ([0bda38a](https://github.com/quentin-ol/ngx-openlayers/commit/0bda38a7ef0233f9e7f01ca8c39dfe53504d15e0))
+* **source:imagestatic:** refresh layer source when url change ([d71712f](https://github.com/quentin-ol/ngx-openlayers/commit/d71712ffea0ac6e8472ba2f9c420e90e3d3c8a56))
+* **source:** add Image ArcGIS source ([#209](https://github.com/quentin-ol/ngx-openlayers/issues/209)) ([4a4a4ef](https://github.com/quentin-ol/ngx-openlayers/commit/4a4a4efdb001821e29b6e57ee8b10ca7c2a3a5cd))
+* **source:** add UTF grid source ([813a81b](https://github.com/quentin-ol/ngx-openlayers/commit/813a81b696955b05a218f2c5180810210bebc2dd))
+* **source:** update params when input changes (TileWMS and ImageWMS) ([#199](https://github.com/quentin-ol/ngx-openlayers/issues/199)) ([91de249](https://github.com/quentin-ol/ngx-openlayers/commit/91de249a6f4404ce6d3e8290b16ad455ee9f5a9a))
+* **stroke:** add ColorLike typing to color input ([1b84a4b](https://github.com/quentin-ol/ngx-openlayers/commit/1b84a4ba40bc60d37d79282579d5c1bf6ebcfceb))
+* update openlayers to `~7.5.2` ([7bb278d](https://github.com/quentin-ol/ngx-openlayers/commit/7bb278d59ed866d773698e10d11154a237f9bd0a))
+* update openlayers to `10.5.0` ([6c88713](https://github.com/quentin-ol/ngx-openlayers/commit/6c8871353f8ea4c4eee220d028b9cab8bab46506))
+* update openlayers to `8.2.0` ([4057d44](https://github.com/quentin-ol/ngx-openlayers/commit/4057d44e021a5f860485961c9f14a962d93bc457))
+* update openlayers to `9.2.4` ([866ae56](https://github.com/quentin-ol/ngx-openlayers/commit/866ae561b1f9ee14fcce7fce3e799129353fa3ff))
+* update openlayers to ~6.13.0 ([42fb323](https://github.com/quentin-ol/ngx-openlayers/commit/42fb3230645db423b2747a125c33419979954ea1))
+* update openlayers to ~6.15.1 ([9588b9d](https://github.com/quentin-ol/ngx-openlayers/commit/9588b9d6b4a4d74ef6fc550e2aff24fb1e6df9be))
+* update to angular 9 ([36bf6a8](https://github.com/quentin-ol/ngx-openlayers/commit/36bf6a8e82f108fc27f17b6356b0fb74b5f4d73e))
+* **vector:** add style, updateWhileAnimating and updateWhileInteracting inputs ([ae72c41](https://github.com/quentin-ol/ngx-openlayers/commit/ae72c4130dfcb34574861c5f4512db1a892d77c9)), closes [#198](https://github.com/quentin-ol/ngx-openlayers/issues/198)
+* **view:** add change:resolution and change:center outputs ([7eb0b98](https://github.com/quentin-ol/ngx-openlayers/commit/7eb0b98e6b3eac3bd6b2a8b4308fafbf5edd07b7))
+* **view:** add missing inputs ([9848242](https://github.com/quentin-ol/ngx-openlayers/commit/9848242b050b5b5041a6f405832c8f2105a117ff))
+* **view:** add multiWorld ([059a641](https://github.com/quentin-ol/ngx-openlayers/commit/059a641d438fde881cc0303bbffb88234b134f84))
+* **view:** add zoom change output ([ea08721](https://github.com/quentin-ol/ngx-openlayers/commit/ea08721e7899fcea9110fc4eb0e46b9aa6a6154f))
+* **view:** dynamically update view projection ([425b0e0](https://github.com/quentin-ol/ngx-openlayers/commit/425b0e07daae029064c61c2c835bad40cbe4b319))
+* **wmts:** add wmts tile load events ([04b35d3](https://github.com/quentin-ol/ngx-openlayers/commit/04b35d35725f1a0fa828acadee33568ffae211e1))
+
+
+### Bug Fixes
+
+* **source:** check host instance before setSource ([#193](https://github.com/quentin-ol/ngx-openlayers/issues/193)) ([c3ba771](https://github.com/quentin-ol/ngx-openlayers/commit/c3ba771e2eefc24006604a44bffaf314a9262a17))
+* **source:** update params ImageArcgisRest ([bfc6663](https://github.com/quentin-ol/ngx-openlayers/commit/bfc6663cc5024677421223c94caa6c5671efa534))
+* **stroke:** fix ColorLike import path ([c2179ea](https://github.com/quentin-ol/ngx-openlayers/commit/c2179eab3cca0cb8f5f70c87b29f24d7257305e9))
+* **travis:** lib build without ngcc (demo issue) ([9edc820](https://github.com/quentin-ol/ngx-openlayers/commit/9edc8203316545146034cea07d4ed203b5d745e8))
+* **view:** set the center explicitly because it does not work via setProperties ([2472cff](https://github.com/quentin-ol/ngx-openlayers/commit/2472cff6978c2cc1cdbe2a791fc5889069f159ab))
+
+## [18.0.0-next.0](https://github.com/quentin-ol/ngx-openlayers/compare/17.0.0-next.2...18.0.0-next.0) (2025-06-11)
+
+
+### ⚠ BREAKING CHANGES
+
+* Angular 16 is no more supported
+* `ol` peer dep is now `~10.5.0`
+* see all breaking changes from `ol` `10.0.0` (https://github.com/openlayers/openlayers/blob/main/changelog/v10.0.0.md)
+
+### build
+
+* update to Angular 18 ([eaf8b49](https://github.com/quentin-ol/ngx-openlayers/commit/eaf8b49190d2d97a97bc0b85b7ca5e573579a754))
+
+
+### Features
+
+* update openlayers to `10.5.0` ([8fd4db4](https://github.com/quentin-ol/ngx-openlayers/commit/8fd4db4e035843e7ffc940a63ed64ebc6e0595ba))
+
+## [17.0.0-next.2](https://github.com/quentin-ol/ngx-openlayers/compare/17.0.0-next.1...17.0.0-next.2) (2025-05-26)
+
+## [17.0.0-next.1](https://github.com/quentin-ol/ngx-openlayers/compare/17.0.0-next.0...17.0.0-next.1) (2025-05-26)
+
+## [17.0.0-next.0](https://github.com/quentin-ol/ngx-openlayers/compare/16.0.0-next.0...17.0.0-next.0) (2025-05-26)
+
+
+### ⚠ BREAKING CHANGES
+
+* `ol` peer dep is now `~9.2.4`
+* see all breaking changes from `ol` `9.0.0` (https://github.com/openlayers/openlayers/blob/main/changelog/v9.0.0.md)
+* Angular 15 is no more supported
+
+### build
+
+* update to Angular 17 ([c3bed7d](https://github.com/quentin-ol/ngx-openlayers/commit/c3bed7d7c05b7c483cb5da076b5616f6f0fdbd6a))
+
+
+### Features
+
+* update openlayers to `9.2.4` ([725e363](https://github.com/quentin-ol/ngx-openlayers/commit/725e36304ee48ad7323fcffbf1091917fe867bca))
+
+## [16.0.0-next.0](https://github.com/quentin-ol/ngx-openlayers/compare/15.0.0-next.0...16.0.0-next.0) (2025-01-10)
+
+
+### ⚠ BREAKING CHANGES
+
+* `ol` peer dep is now `8.2.0`
+* see all breaking changes from `ol` `8.0.0` (https://github.com/openlayers/openlayers/blob/main/changelog/upgrade-notes.md#800)
+* Angular 14 is no more supported
+
+### build
+
+* update to Angular 16 ([b129c81](https://github.com/quentin-ol/ngx-openlayers/commit/b129c81ec30a5195ad04725101798936dee38db6))
+
+
+### Features
+
+* update openlayers to `8.2.0` ([8b376e3](https://github.com/quentin-ol/ngx-openlayers/commit/8b376e33314977db52307403bd6a5219f0e5731d))
+
+## [15.0.0-next.0](https://github.com/quentin-ol/ngx-openlayers/compare/14.1.0-next.0...15.0.0-next.0) (2024-12-12)
+
+
+### ⚠ BREAKING CHANGES
+
+* `ol` peer dep is now `~7.5.2`
+* see all breaking changes from `ol` `7.0.0` (https://github.com/openlayers/openlayers/blob/main/changelog/upgrade-notes.md#700)
+* see all breaking changes from `ol` `7.1.0` (https://github.com/openlayers/openlayers/blob/main/changelog/upgrade-notes.md#710)
+* see all breaking changes from `ol` `7.2.0` (https://github.com/openlayers/openlayers/blob/main/changelog/upgrade-notes.md#720)
+* see all breaking changes from `ol` `7.5.0` (https://github.com/openlayers/openlayers/blob/main/changelog/upgrade-notes.md#750)
+
+### Features
+
+* update openlayers to `~7.5.2` ([0c0e3cb](https://github.com/quentin-ol/ngx-openlayers/commit/0c0e3cb7ed6dd7d7e5d8eb385feff4d9072e4211))
+
+## [14.1.0-next.0](https://github.com/quentin-ol/ngx-openlayers/compare/14.0.0-next.0...14.1.0-next.0) (2024-04-29)
+
+
+### Features
+
+* **source-vector:** support of 'loader' input ([58c1a6b](https://github.com/quentin-ol/ngx-openlayers/commit/58c1a6bb8e33ca4bec2d4094b1efb4610c3ee516))
+
+## [14.0.0-next.0](https://github.com/quentin-ol/ngx-openlayers/compare/1.0.0-next.21...14.0.0-next.0) (2024-03-26)
+
+
+### ⚠ BREAKING CHANGES
+
+* `ol` peer dep is now `~6.15.1`
+* `DrawInteractionComponent` : input `type` is now of type `Type`
+* `SourceImageWMSComponent` : input `serverType` is now of type `ServerType`
+* `OverlayComponent` : input `positioning` is now of type `Positioning`
+* `SourceTileWMSComponent` : input `projection` is now of type `ProjectionLike` and input `serverType` is now of type `ServerType`
+* `SourceTileWMTSComponent` : input `requestEncoding` is now of type `RequestEncoding`
+* all components inputs of type `Element` or `Node` are now of type `HTMLElement`
+* all `olChangeActive` and `propertyChange` outputs are now `EventEmitter<ObjectEvent>`
+* `FormatMVTComponent` : input `featureClass` is now of type `FeatureClass`
+* `DragAndDropInteractionComponent` : input `formatConstructors` is now of type `FeatureFormat[]`
+* `LayerComponent` : `prerender` and `postrender` inputs functions should now manage events of type `RenderEvent`
+* `SourceImageArcGISRestComponent` : `attributions` input is now of type `AttributionLike`
+* `SourceTileWMTSComponent` : `tileGrid` input is now of type `WMTSTileGrid`
+* `SourceUTFGridComponent` : `tileJSON` input is now of type `Config`
+* `StyleCircleComponent` : `snapToPixel` and `atlasManager` have been removed
+* `StyleIconComponent` : `img` input is now of type `HTMLImageElement | HTMLCanvasElement`
+* `MapComponent` : `prerender` output has been removed, `precompose` output has been added. `olClick`, `dblClick`, `pointerDrag`, `pointerMove`, `singleClick` outputs are now of type `EventEmitter<MapBrowserEvent<UIEvent>>`
+* `ViewComponent` : `changeZoom` output has been removed
+
+### Features
+
+* update openlayers to ~6.13.0 ([ec7f0b5](https://github.com/quentin-ol/ngx-openlayers/commit/ec7f0b5f285facd1f5fbdcd72a7f46d03a7763b4))
+* update openlayers to ~6.15.1 ([f068b92](https://github.com/quentin-ol/ngx-openlayers/commit/f068b92e8f52b5e90e75be2cd91bba25391cee67))
+
+## [1.0.0-next.21](https://github.com/quentin-ol/ngx-openlayers/compare/1.0.0-next.20...1.0.0-next.21) (2023-11-30)
+
+## [1.0.0-next.20](https://github.com/quentin-ol/ngx-openlayers/compare/1.0.0-next.19...1.0.0-next.20) (2023-11-30)
+
+## [1.0.0-next.20](https://github.com/quentin-ol/ngx-openlayers/compare/1.0.0-next.19...1.0.0-next.20) (2023-11-30)
+
+<a name="1.0.0-next.19"></a>
+# [1.0.0-next.19](https://github.com/quentin-ol/ngx-openlayers/compare/1.0.0-next.17...1.0.0-next.19) (2021-09-03)
+
+
+### Bug Fixes
+
+* **stroke:** fix ColorLike import path ([ebdca6e](https://github.com/quentin-ol/ngx-openlayers/commit/ebdca6e))
+
+
+### Features
+
+* **stroke:** add ColorLike typing to color input ([f940292](https://github.com/quentin-ol/ngx-openlayers/commit/f940292))
+
+
+
+<a name="1.0.0-next.17"></a>
+# [1.0.0-next.17](https://github.com/quentin-ol/ngx-openlayers/compare/1.0.0-next.16...1.0.0-next.17) (2021-01-06)
+
+
+### Bug Fixes
+
+* **view:** set the center explicitly because it does not work via setProperties ([958383a](https://github.com/quentin-ol/ngx-openlayers/commit/958383a))
+
+
+### Features
+
+* **view:** add multiWorld ([f695cbe](https://github.com/quentin-ol/ngx-openlayers/commit/f695cbe))
+
+
+
+<a name="1.0.0-next.13"></a>
+# [1.0.0-next.13](https://github.com/quentin-ol/ngx-openlayers/compare/1.0.0-next.12...1.0.0-next.13) (2019-11-13)
+
+
+### Features
+
+* **wmts:** add wmts tile load events ([7aba5ca](https://github.com/quentin-ol/ngx-openlayers/commit/7aba5ca))
+
+
+
+<a name="1.0.0-next.12"></a>
+# [1.0.0-next.12](https://github.com/quentin-ol/ngx-openlayers/compare/1.0.0-next.11...1.0.0-next.12) (2019-11-13)
+
+
+### Chores
+
+* update angular and openayer ([187a3b0](https://github.com/quentin-ol/ngx-openlayers/commit/187a3b0))
+
+
+### Features
+
+* **map:** add onMoveStart event ([f41daf9](https://github.com/quentin-ol/ngx-openlayers/commit/f41daf9))
+
+
+### BREAKING CHANGES
+
+* - precompose, postcompose become prerender, postrender
+- remove `on` prefix for all output, exception for native events :
+  - `click` -> `olClick`
+  - `select` -> `olFeature`
+  - `change` -> `olChange`
+
+
+
+<a name="1.0.0-next.11"></a>
+# [1.0.0-next.11](https://github.com/quentin-ol/ngx-openlayers/compare/1.0.0-next.10...1.0.0-next.11) (2019-08-08)
+
+
+### Features
+
+* **imagearcgis:** add image events ([24c1c65](https://github.com/quentin-ol/ngx-openlayers/commit/24c1c65))
+
+
+
+<a name="1.0.0-next.10"></a>
+# [1.0.0-next.10](https://github.com/quentin-ol/ngx-openlayers/compare/1.0.0-next.5...1.0.0-next.10) (2019-07-23)
+
+
+### Bug Fixes
+
+* **source:** update params ImageArcgisRest ([3d0bc9c](https://github.com/quentin-ol/ngx-openlayers/commit/3d0bc9c))
+
+
+### Features
+
+* **cluster:** update distance input ([5edbd57](https://github.com/quentin-ol/ngx-openlayers/commit/5edbd57))
+* **geom:** implements MultiPoint, MultiLinestring and MultiPolygon ([f0d4dd1](https://github.com/quentin-ol/ngx-openlayers/commit/f0d4dd1))
+* **graticule:** unregister on destroy ([5e20e8d](https://github.com/quentin-ol/ngx-openlayers/commit/5e20e8d))
+* **openlayers:** migrate to 5 version ([0ed47a3](https://github.com/quentin-ol/ngx-openlayers/commit/0ed47a3))
+* **overviewmap:** refresh overview when the view changes ([4dc9852](https://github.com/quentin-ol/ngx-openlayers/commit/4dc9852))
+* **source:** add UTF grid source ([ccae9e0](https://github.com/quentin-ol/ngx-openlayers/commit/ccae9e0))
+* **source:imagestatic:** refresh layer source when url change ([410f876](https://github.com/quentin-ol/ngx-openlayers/commit/410f876))
+* **view:** add change:resolution and change:center outputs ([27b1529](https://github.com/quentin-ol/ngx-openlayers/commit/27b1529))
+* **view:** dynamically update view projection ([3f0c228](https://github.com/quentin-ol/ngx-openlayers/commit/3f0c228))
+
+
+### BREAKING CHANGES
+
+* **geom:** The coordinates input on CollectionCoordinatesComponent is not anymore limited to type [number, number][], but it supports all types of coordinates.
+   That means the existing code must be updated for polygons:
+
+   Old style:
+  ```html
+  <aol-feature>
+      <aol-geometry-polygon>
+          <aol-collection-coordinates
+              [coordinates]="[[5, 45],[5.05, 45.05],[5.05, 44.95],[4.95, 44.95]]"
+              [srid]="'EPSG:4326'"
+          >
+          </aol-collection-coordinates>
+      </aol-geometry-polygon>
+      <aol-style>
+          <aol-style-stroke [color]="'red'"></aol-style-stroke>
+          <aol-style-fill [color]="[255,0,0,0.5]"></aol-style-fill>
+      </aol-style>
+  </aol-feature>
+  ```
+  New style:
+
+   ```html
+  <aol-feature>
+      <aol-geometry-polygon>
+          <aol-collection-coordinates
+              [coordinates]="[[[5, 45],[5.05, 45.05],[5.05, 44.95],[4.95, 44.95]]]"
+              [srid]="'EPSG:4326'"
+          >
+          </aol-collection-coordinates>
+      </aol-geometry-polygon>
+      <aol-style>
+          <aol-style-stroke [color]="'red'"></aol-style-stroke>
+          <aol-style-fill [color]="[255,0,0,0.5]"></aol-style-fill>
+      </aol-style>
+  </aol-feature>
+  ```
+  Notice the [coordinates] input is now a [number, number][][], as defined in GeoJSON.
+
+   This also allows to display polygon with holes, which is not possible with the current code.
+* **openlayers:** Migration from `openlayers` package to `ol`
+
+
+
+<a name="1.0.0-next.9"></a>
+# [1.0.0-next.9](https://github.com/quentin-ol/ngx-openlayers/compare/1.0.0-next.8...1.0.0-next.9) (2019-06-04)
+
+
+### Bug Fixes
+
+* **ci:** fix build error of npm package
+
+<a name="1.0.0-next.8"></a>
+# [1.0.0-next.8](https://github.com/quentin-ol/ngx-openlayers/compare/1.0.0-next.7...1.0.0-next.8) (2019-06-04)
+
+### Features
+
+* **graticule:** unregister on destroy ([5e20e8d](https://github.com/quentin-ol/ngx-openlayers/commit/5e20e8d))
+* **source:imagestatic:** refresh layer source when url change ([410f876](https://github.com/quentin-ol/ngx-openlayers/commit/410f876))
+
+### Documentation
+
+* add tile json source example ([a65bb8c](https://github.com/quentin-ol/ngx-openlayers/commit/a65bb8c))
+* select interaction example ([1e2a46f](https://github.com/quentin-ol/ngx-openlayers/commit/1e2a46f))
+* add image static example ([8ebc128](https://github.com/quentin-ol/ngx-openlayers/commit/8ebc128))
+
+
+# [1.0.0-next.7](https://github.com/quentin-ol/ngx-openlayers/compare/1.0.0-next.6...1.0.0-next.7) (2019-04-18)
+
+
+### Features
+
+* **geom:** implements MultiPoint, MultiLinestring and MultiPolygon ([f0d4dd1](https://github.com/quentin-ol/ngx-openlayers/commit/f0d4dd1))
+* **openlayers:** migrate to 5 version ([0ed47a3](https://github.com/quentin-ol/ngx-openlayers/commit/0ed47a3))
+* **overviewmap:** refresh overview when the view changes ([4dc9852](https://github.com/quentin-ol/ngx-openlayers/commit/4dc9852))
+* **source:** add UTF grid source ([ccae9e0](https://github.com/quentin-ol/ngx-openlayers/commit/ccae9e0))
+* **view:** add change:resolution and change:center outputs ([27b1529](https://github.com/quentin-ol/ngx-openlayers/commit/27b1529))
+* **view:** dynamically update view projection ([3f0c228](https://github.com/quentin-ol/ngx-openlayers/commit/3f0c228))
+
+
+### BREAKING CHANGES
+
+* **geom:** The coordinates input on CollectionCoordinatesComponent is not anymore limited to type [number, number][], but it supports all types of coordinates.
+   That means the existing code must be updated for polygons:
+
+   Old style:
+  ```html
+  <aol-feature>
+      <aol-geometry-polygon>
+          <aol-collection-coordinates
+              [coordinates]="[[5, 45],[5.05, 45.05],[5.05, 44.95],[4.95, 44.95]]"
+              [srid]="'EPSG:4326'"
+          >
+          </aol-collection-coordinates>
+      </aol-geometry-polygon>
+      <aol-style>
+          <aol-style-stroke [color]="'red'"></aol-style-stroke>
+          <aol-style-fill [color]="[255,0,0,0.5]"></aol-style-fill>
+      </aol-style>
+  </aol-feature>
+  ```
+  New style:
+
+   ```html
+  <aol-feature>
+      <aol-geometry-polygon>
+          <aol-collection-coordinates
+              [coordinates]="[[[5, 45],[5.05, 45.05],[5.05, 44.95],[4.95, 44.95]]]"
+              [srid]="'EPSG:4326'"
+          >
+          </aol-collection-coordinates>
+      </aol-geometry-polygon>
+      <aol-style>
+          <aol-style-stroke [color]="'red'"></aol-style-stroke>
+          <aol-style-fill [color]="[255,0,0,0.5]"></aol-style-fill>
+      </aol-style>
+  </aol-feature>
+  ```
+  Notice the [coordinates] input is now a [number, number][][], as defined in GeoJSON.
+
+   This also allows to display polygon with holes, which is not possible with the current code.
+* **openlayers:** Migration from `openlayers` package to `ol`
+
+
+
+# [1.0.0-next.6](https://github.com/quentin-ol/ngx-openlayers/compare/1.0.0-next.5...1.0.0-next.6) (2019-04-18)
+
+
+### Bug Fixes
+
+* **source:** update params ImageArcgisRest ([3d0bc9c](https://github.com/quentin-ol/ngx-openlayers/commit/3d0bc9c))
+
+
+
+# [1.0.0-next.5](https://github.com/quentin-ol/ngx-openlayers/compare/1.0.0-next.4...1.0.0-next.5) (2019-02-04)
+
+
+### Features
+
+* **vector:** add style, updateWhileAnimating and updateWhileInteracting inputs ([76c0c83](https://github.com/quentin-ol/ngx-openlayers/commit/76c0c83)), closes [#198](https://github.com/quentin-ol/ngx-openlayers/issues/198)
+
+
+
+# [1.0.0-next.4](https://github.com/quentin-ol/ngx-openlayers/compare/1.0.0-next.3...1.0.0-next.4) (2019-01-14)
+
+
+### Features
+
+* **raster:** not updated when source change ([13a28c7](https://github.com/quentin-ol/ngx-openlayers/commit/13a28c7))
+
+
+
+# [1.0.0-next.3](https://github.com/quentin-ol/ngx-openlayers/compare/1.0.0-next.2...1.0.0-next.3) (2018-12-12)
+
+
+### Features
+
+* **cluster:** add wrapX option ([93429a6](https://github.com/quentin-ol/ngx-openlayers/commit/93429a6))
+* **image:** add image loading events ([fc856b3](https://github.com/quentin-ol/ngx-openlayers/commit/fc856b3))
+
+
+
+# [1.0.0-next.2](https://github.com/quentin-ol/ngx-openlayers/compare/1.0.0-next.1...1.0.0-next.2) (2018-11-21)
+
+
+### Features
+
+* **geom:** add circle geometry ([#210](https://github.com/quentin-ol/ngx-openlayers/issues/210)) ([d789ccf](https://github.com/quentin-ol/ngx-openlayers/commit/d789ccf))
+* **source:** add Image ArcGIS source ([#209](https://github.com/quentin-ol/ngx-openlayers/issues/209)) ([98d1577](https://github.com/quentin-ol/ngx-openlayers/commit/98d1577))
+
+
+
+# [1.0.0-next.1](https://github.com/quentin-ol/ngx-openlayers/compare/1.0.0-next.0...1.0.0-next.1) (2018-11-06)
+
+
+### Bug Fixes
+
+* **source:** check host instance before setSource ([#193](https://github.com/quentin-ol/ngx-openlayers/issues/193)) ([afeb1a9](https://github.com/quentin-ol/ngx-openlayers/commit/afeb1a9))
+
+
+### Features
+
+* **source:** update params when input changes (TileWMS and ImageWMS) ([#199](https://github.com/quentin-ol/ngx-openlayers/issues/199)) ([f7578a4](https://github.com/quentin-ol/ngx-openlayers/commit/f7578a4))
+* **view:** add zoom change output ([884429f](https://github.com/quentin-ol/ngx-openlayers/commit/884429f))
+
+
+
+# [1.0.0-next.0](https://github.com/quentin-ol/ngx-openlayers/compare/v0.8.22...1.0.0-next.0) (2018-09-21)
+
+
+### Features
+
+* **demo:** add example of a cursor position ([9a8988e](https://github.com/quentin-ol/ngx-openlayers/commit/9a8988e))
+* **demo:** add example of geojson feature : point, polygon, linestring ([367c72d](https://github.com/quentin-ol/ngx-openlayers/commit/367c72d))
+* **demo:** add example of map position with longitude, latitude and zoom ([251bbf7](https://github.com/quentin-ol/ngx-openlayers/commit/251bbf7))
+* **demo:** add example to display geometry of a geojson file ([fe977e6](https://github.com/quentin-ol/ngx-openlayers/commit/fe977e6))
+* **demo:** example change color on hover or on select ([2e7bda4](https://github.com/quentin-ol/ngx-openlayers/commit/2e7bda4))
+* **demo:** example draw a polygon ([2737e6b](https://github.com/quentin-ol/ngx-openlayers/commit/2737e6b))
+* **demo:** example modify polygon ([18c95fa](https://github.com/quentin-ol/ngx-openlayers/commit/18c95fa))
+* **demo:** example of marker with svg ([b5f57b3](https://github.com/quentin-ol/ngx-openlayers/commit/b5f57b3))
+* **demo:** example of overlay ([b7749f9](https://github.com/quentin-ol/ngx-openlayers/commit/b7749f9))
+* **demo:** example of side by side ([4b5b08b](https://github.com/quentin-ol/ngx-openlayers/commit/4b5b08b))
+* **demo:** example of swipe ([9aa4dab](https://github.com/quentin-ol/ngx-openlayers/commit/9aa4dab))
+
+
+
+## [0.8.22](https://github.com/quentin-ol/ngx-openlayers/compare/v0.8.21...v0.8.22) (2018-07-02)
+
+
+### Bug Fixes
+
+* **example.raster:** allow example project to work in --aot mode ([ca0c9bb](https://github.com/quentin-ol/ngx-openlayers/commit/ca0c9bb))
+
+
+### Features
+
+* **sources:** add source tileutfgrid component ([#179](https://github.com/quentin-ol/ngx-openlayers/issues/179)) ([d946755](https://github.com/quentin-ol/ngx-openlayers/commit/d946755))
+
+
+
+## [0.8.21](https://github.com/quentin-ol/ngx-openlayers/compare/v0.8.20...v0.8.21) (2018-06-08)
+
+
+### Features
+
+* **raster:** add component and demo ([#171](https://github.com/quentin-ol/ngx-openlayers/issues/171)) ([0b40bbd](https://github.com/quentin-ol/ngx-openlayers/commit/0b40bbd))
+
+
+
+## [0.8.20](https://github.com/quentin-ol/ngx-openlayers/compare/v0.8.19...v0.8.20) (2018-05-04)
+
+
+### Features
+
+* **modify-interaction:** add source input ([#146](https://github.com/quentin-ol/ngx-openlayers/issues/146)) ([d27d6ba](https://github.com/quentin-ol/ngx-openlayers/commit/d27d6ba))
+
+
+
+## [0.8.19](https://github.com/quentin-ol/ngx-openlayers/compare/v0.8.18...v0.8.19) (2018-04-23)
+
+
+### Features
+
+* **source:** add geaometryFunction input to cluster component ([#167](https://github.com/quentin-ol/ngx-openlayers/issues/167)) ([8962034](https://github.com/quentin-ol/ngx-openlayers/commit/8962034))
+
+
+
+## [0.8.18](https://github.com/quentin-ol/ngx-openlayers/compare/v0.8.17...v0.8.18) (2018-04-12)
+
+
+### Features
+
+* **tileJSON:** add tileJSON component ([d65e7b2](https://github.com/quentin-ol/ngx-openlayers/commit/d65e7b2))
+
+
+
+## [0.8.17](https://github.com/quentin-ol/ngx-openlayers/compare/fd0ae4b...v0.8.17) (2018-03-16)
+
+
+### Bug Fixes
+
+* added componentType property to ViewComponent ([692e00d](https://github.com/quentin-ol/ngx-openlayers/commit/692e00d))
+* addition of text style component to the export list ([9a14460](https://github.com/quentin-ol/ngx-openlayers/commit/9a14460))
+* issues related to calling function makeDecorator with AOT ([205bb49](https://github.com/quentin-ol/ngx-openlayers/commit/205bb49))
+* license is MPL-2.0. Was incorrectly reported as MIT, though it do not differ much ([a6e257a](https://github.com/quentin-ol/ngx-openlayers/commit/a6e257a))
+* minor fixes in README.md ([7c7d764](https://github.com/quentin-ol/ngx-openlayers/commit/7c7d764))
+* setting an ID evaluation to a "falsy" statement is now possible. Prior to this commit, setting an ID to 0 failed. ([7473a5c](https://github.com/quentin-ol/ngx-openlayers/commit/7473a5c))
+* **types:** upgrade types of OpenLayers ([e36b8aa](https://github.com/quentin-ol/ngx-openlayers/commit/e36b8aa))
+* the example icon is now renamed marker.png ([fd0ae4b](https://github.com/quentin-ol/ngx-openlayers/commit/fd0ae4b))
+* **devDep:** limit typescript version and match types for OpenLayers ([af4b2da](https://github.com/quentin-ol/ngx-openlayers/commit/af4b2da))
+* **example:** add form to package.json ([984da63](https://github.com/quentin-ol/ngx-openlayers/commit/984da63))
+* **example:** add value `width` which is mandatory for aot build of example ([b70a698](https://github.com/quentin-ol/ngx-openlayers/commit/b70a698))
+* **layer:** remove useless input and change layer component init ([6f512dc](https://github.com/quentin-ol/ngx-openlayers/commit/6f512dc))
+* **source.XYZ:** instantiate XYZ source even if no tileGrid is provided ([8c34e00](https://github.com/quentin-ol/ngx-openlayers/commit/8c34e00))
+* **style:** trigger update onChange ([6bc94e7](https://github.com/quentin-ol/ngx-openlayers/commit/6bc94e7))
+* **view:** set animation on zoom changes ([8d73c38](https://github.com/quentin-ol/ngx-openlayers/commit/8d73c38))
+
+
+### Features
+
+* **cluster:** add cluster component and demo ([34a1688](https://github.com/quentin-ol/ngx-openlayers/commit/34a1688))
+* **example:** move to a new version of the example project ([40ce2d5](https://github.com/quentin-ol/ngx-openlayers/commit/40ce2d5))
+* **graticule:** Adding GraticuleComponent ([5adc320](https://github.com/quentin-ol/ngx-openlayers/commit/5adc320))
+* **Layer:** add pre and post compose inputs and change behavior for all Layers ([4ceef04](https://github.com/quentin-ol/ngx-openlayers/commit/4ceef04))
+* **layergroup:** add LayerGroupComponent ([c1f2513](https://github.com/quentin-ol/ngx-openlayers/commit/c1f2513))
+* **ModifyInteractionComponent:** add modify interaction to be able to re-draw feature(s) ([e3625b5](https://github.com/quentin-ol/ngx-openlayers/commit/e3625b5))
+* **scaleline:** add input units to scaleline component ([26a9a5c](https://github.com/quentin-ol/ngx-openlayers/commit/26a9a5c))
+* **SelectInteractionComponent:** add new interaction to ba able to ([4017117](https://github.com/quentin-ol/ngx-openlayers/commit/4017117))
+* **Source:OSM:** Use SourceXYZComponent as parent class instead of SourceComponent ([92d9519](https://github.com/quentin-ol/ngx-openlayers/commit/92d9519))
+* **source:wmts:** refresh layer source when url change ([7730673](https://github.com/quentin-ol/ngx-openlayers/commit/7730673))
+* **Source:XYZ:** add tilegrid childComponent ([c732980](https://github.com/quentin-ol/ngx-openlayers/commit/c732980))
+* **source.imagestatic:** add image static source ([4aa6f3a](https://github.com/quentin-ol/ngx-openlayers/commit/4aa6f3a))
+* **sources:** trigger refresh on property changes for XYZ Component ([1fe5219](https://github.com/quentin-ol/ngx-openlayers/commit/1fe5219))
+* **SourceTileWMTSComponent:** add wmts source component and wmts grid tile component ([9e029ed](https://github.com/quentin-ol/ngx-openlayers/commit/9e029ed))
+* **SourceXYZComponent:** add tileGrid input ([390add8](https://github.com/quentin-ol/ngx-openlayers/commit/390add8))
+* **SourceXYZComponent:** add tileLoadFunction input ([f76321e](https://github.com/quentin-ol/ngx-openlayers/commit/f76321e))
+* **tilegrid:** Allow resolutions and origin, and use new tilegrid.Tilegrid constructor ([95db90c](https://github.com/quentin-ol/ngx-openlayers/commit/95db90c))
+* **TranslateInteractionComponent:** add interaction to be able to move feature(s) ([1d265ae](https://github.com/quentin-ol/ngx-openlayers/commit/1d265ae))
--- a/projects/ng-openlayers/karma.conf.js
+++ b/projects/ng-openlayers/karma.conf.js
@@ -0,0 +1,45 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage'),
+      
+    ],
+    client: {
+      jasmine: {
+        // you can add configuration options for Jasmine here
+        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
+        // for example, you can disable the random execution with `random: false`
+        // or set a specific seed with `seed: 4321`
+      },
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    jasmineHtmlReporter: {
+      suppressAll: true // removes the duplicated traces
+    },
+    coverageReporter: {
+      dir: require('path').join(__dirname, '../../coverage/ngx-openlayers'),
+      subdir: '.',
+      reporters: [
+        { type: 'html' },
+        { type: 'lcovonly' },
+        { type: 'text-summary' }
+      ]
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};
--- a/projects/ng-openlayers/ng-package.json
+++ b/projects/ng-openlayers/ng-package.json
@@ -1,10 +1,10 @@
-{
-  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
-  "dest": "../../dist/ng-openlayers",
-  "assets": [
-    "ngcc.config.js"
-  ],
-  "lib": {
-    "entryFile": "src/public-api.ts"
-  }
-}
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/ng-openlayers",
+  "assets": [
+    "ngcc.config.js"
+  ],
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}
--- a/projects/ng-openlayers/ngcc.config.js
+++ b/projects/ng-openlayers/ngcc.config.js
@@ -1,3 +1,3 @@
 module.exports = {
-  ignorableDeepImportMatchers: [/ol\//],
+  ignorableDeepImportMatchers: [/ol\//]
 };
--- a/projects/ng-openlayers/package-lock.json
+++ b/projects/ng-openlayers/package-lock.json
@@ -1,26 +1,22 @@
 {
  "name": "@farmmaps/ng-openlayers",
-  "version": "18.0.0",
+  "version": "20.0.1",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "@farmmaps/ng-openlayers",
-      "version": "18.0.0",
-      "license": "MPL-2.0",
-      "dependencies": {
-        "tslib": "^2.3.0"
-      },
+      "version": "20.0.1",
      "peerDependencies": {
-        "@angular/common": "21.1.0",
-        "@angular/core": "21.1.0",
-        "ol": "^8.2.0"
+        "@angular/common": ">=19.0.0 <=20.x.x",
+        "@angular/core": ">=19.0.0 <=20.x.x",
+        "ol": "~10.7.0"
      }
    },
    "node_modules/@angular/common": {
-      "version": "21.1.0",
-      "resolved": "https://repository.akkerweb.nl/repository/npm-group/@angular/common/-/common-21.1.0.tgz",
-      "integrity": "sha512-hL3Chp51TU9iBcIfkNtoBS1wuseP1gsyDW2IFtK5HUpAVhbso9B3fdCaDTFkU98A2unluo2YgzI6D/6IS6N+1g==",
+      "version": "20.3.16",
+      "resolved": "https://registry.npmjs.org/@angular/common/-/common-20.3.16.tgz",
+      "integrity": "sha512-GRAziNlntwdnJy3F+8zCOvDdy7id0gITjDnM6P9+n2lXvtDuBLGJKU3DWBbvxcCjtD6JK/g/rEX5fbCxbUHkQQ==",
      "license": "MIT",
      "peer": true,
      "dependencies": {
@@ -30,14 +26,14 @@
        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
      },
      "peerDependencies": {
-        "@angular/core": "21.1.0",
+        "@angular/core": "20.3.16",
        "rxjs": "^6.5.3 || ^7.4.0"
      }
    },
    "node_modules/@angular/core": {
-      "version": "21.1.0",
-      "resolved": "https://repository.akkerweb.nl/repository/npm-group/@angular/core/-/core-21.1.0.tgz",
-      "integrity": "sha512-QTl9s8GYNN0pt1k3GE6UVlfe6zWtfdykhfchinKq2YJywQ6LBM4UcZgoc56YkgscmyrRFYrr4JYUJjlzTF57+A==",
+      "version": "20.3.16",
+      "resolved": "https://registry.npmjs.org/@angular/core/-/core-20.3.16.tgz",
+      "integrity": "sha512-KSFPKvOmWWLCJBbEO+CuRUXfecX2FRuO0jNi9c54ptXMOPHlK1lIojUnyXmMNzjdHgRug8ci9qDuftvC2B7MKg==",
      "license": "MIT",
      "peer": true,
      "dependencies": {
@@ -47,9 +43,9 @@
        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
      },
      "peerDependencies": {
-        "@angular/compiler": "21.1.0",
+        "@angular/compiler": "20.3.16",
        "rxjs": "^6.5.3 || ^7.4.0",
-        "zone.js": "~0.15.0 || ~0.16.0"
+        "zone.js": "~0.15.0"
      },
      "peerDependenciesMeta": {
        "@angular/compiler": {
@@ -67,48 +63,17 @@
      "license": "MIT",
      "peer": true
    },
-    "node_modules/color-name": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/color-name/-/color-name-2.0.0.tgz",
-      "integrity": "sha512-SbtvAMWvASO5TE2QP07jHBMXKafgdZz8Vrsrn96fiL+O92/FN/PLARzUW5sKt013fjAprK2d2iCn2hk2Xb5oow==",
-      "license": "MIT",
-      "peer": true,
-      "engines": {
-        "node": ">=12.20"
-      }
-    },
-    "node_modules/color-parse": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/color-parse/-/color-parse-2.0.2.tgz",
-      "integrity": "sha512-eCtOz5w5ttWIUcaKLiktF+DxZO1R9KLNY/xhbV6CkhM7sR3GhVghmt6X6yOnzeaM24po+Z9/S1apbXMwA3Iepw==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "color-name": "^2.0.0"
-      }
-    },
-    "node_modules/color-rgba": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/color-rgba/-/color-rgba-3.0.0.tgz",
-      "integrity": "sha512-PPwZYkEY3M2THEHHV6Y95sGUie77S7X8v+h1r6LSAPF3/LL2xJ8duUXSrkic31Nzc4odPwHgUbiX/XuTYzQHQg==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "color-parse": "^2.0.0",
-        "color-space": "^2.0.0"
-      }
-    },
-    "node_modules/color-space": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/color-space/-/color-space-2.0.1.tgz",
-      "integrity": "sha512-nKqUYlo0vZATVOFHY810BSYjmCARrG7e5R3UE3CQlyjJTvv5kSSmPG1kzm/oDyyqjehM+lW1RnEt9It9GNa5JA==",
+    "node_modules/@types/rbush": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@types/rbush/-/rbush-4.0.0.tgz",
+      "integrity": "sha512-+N+2H39P8X+Hy1I5mC6awlTX54k3FhiUmvt7HWzGJZvF+syUAAxP/stwppS8JE84YHqFgRMv6fCy31202CMFxQ==",
      "license": "MIT",
      "peer": true
    },
    "node_modules/earcut": {
-      "version": "2.2.4",
-      "resolved": "https://registry.npmjs.org/earcut/-/earcut-2.2.4.tgz",
-      "integrity": "sha512-/pjZsA1b4RPHbeWZQn66SWS8nZZWLQQ23oE3Eam7aroEFGEvwKAsJfZ9ytiEMycfzXWpca4FA9QIOehf7PocBQ==",
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/earcut/-/earcut-3.0.2.tgz",
+      "integrity": "sha512-X7hshQbLyMJ/3RPhyObLARM2sNxxmRALLKx1+NVFFnQ9gKzmCrxm9+uLIAdBcvc8FNLpctqlQ2V6AE92Ol9UDQ==",
      "license": "ISC",
      "peer": true
    },
@@ -132,27 +97,6 @@
        "node": ">=10.19"
      }
    },
-    "node_modules/ieee754": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
-      "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/feross"
-        },
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/feross"
-        },
-        {
-          "type": "consulting",
-          "url": "https://feross.org/support"
-        }
-      ],
-      "license": "BSD-3-Clause",
-      "peer": true
-    },
    "node_modules/lerc": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/lerc/-/lerc-3.0.0.tgz",
@@ -161,18 +105,17 @@
      "peer": true
    },
    "node_modules/ol": {
-      "version": "8.2.0",
-      "resolved": "https://registry.npmjs.org/ol/-/ol-8.2.0.tgz",
-      "integrity": "sha512-/m1ddd7Jsp4Kbg+l7+ozR5aKHAZNQOBAoNZ5pM9Jvh4Etkf0WGkXr9qXd7PnhmwiC1Hnc2Toz9XjCzBBvexfXw==",
+      "version": "10.7.0",
+      "resolved": "https://registry.npmjs.org/ol/-/ol-10.7.0.tgz",
+      "integrity": "sha512-122U5gamPqNgLpLOkogFJhgpywvd/5en2kETIDW+Ubfi9lPnZ0G9HWRdG+CX0oP8od2d6u6ky3eewIYYlrVczw==",
      "license": "BSD-2-Clause",
      "peer": true,
      "dependencies": {
-        "color-rgba": "^3.0.0",
-        "color-space": "^2.0.1",
-        "earcut": "^2.2.3",
-        "geotiff": "^2.0.7",
-        "pbf": "3.2.1",
-        "rbush": "^3.0.1"
+        "@types/rbush": "4.0.0",
+        "earcut": "^3.0.0",
+        "geotiff": "^2.1.3",
+        "pbf": "4.0.1",
+        "rbush": "^4.0.0"
      },
      "funding": {
        "type": "opencollective",
@@ -194,13 +137,12 @@
      "peer": true
    },
    "node_modules/pbf": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/pbf/-/pbf-3.2.1.tgz",
-      "integrity": "sha512-ClrV7pNOn7rtmoQVF4TS1vyU0WhYRnP92fzbfF75jAIwpnzdJXf8iTd4CMEqO4yUenH6NDqLiwjqlh6QgZzgLQ==",
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/pbf/-/pbf-4.0.1.tgz",
+      "integrity": "sha512-SuLdBvS42z33m8ejRbInMapQe8n0D3vN/Xd5fmWM3tufNgRQFBpaW2YVJxQZV4iPNqb0vEFvssMEo5w9c6BTIA==",
      "license": "BSD-3-Clause",
      "peer": true,
      "dependencies": {
-        "ieee754": "^1.1.12",
        "resolve-protobuf-schema": "^2.1.0"
      },
      "bin": {
@@ -228,20 +170,20 @@
      }
    },
    "node_modules/quickselect": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/quickselect/-/quickselect-2.0.0.tgz",
-      "integrity": "sha512-RKJ22hX8mHe3Y6wH/N3wCM6BWtjaxIyyUIkpHOvfFnxdI4yD4tBXEBKSbriGujF6jnSVkJrffuo6vxACiSSxIw==",
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/quickselect/-/quickselect-3.0.0.tgz",
+      "integrity": "sha512-XdjUArbK4Bm5fLLvlm5KpTFOiOThgfWWI4axAZDWg4E/0mKdZyI9tNEfds27qCi1ze/vwTR16kvmmGhRra3c2g==",
      "license": "ISC",
      "peer": true
    },
    "node_modules/rbush": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/rbush/-/rbush-3.0.1.tgz",
-      "integrity": "sha512-XRaVO0YecOpEuIvbhbpTrZgoiI6xBlz6hnlr6EHhd+0x9ase6EmeN+hdwwUaJvLcsFFQ8iWVF1GAK1yB0BWi0w==",
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/rbush/-/rbush-4.0.1.tgz",
+      "integrity": "sha512-IP0UpfeWQujYC8Jg162rMNc01Rf0gWMMAb2Uxus/Q0qOFw4lCcq6ZnQEZwUoJqWyUGJ9th7JjwI4yIWo+uvoAQ==",
      "license": "MIT",
      "peer": true,
      "dependencies": {
-        "quickselect": "^2.0.0"
+        "quickselect": "^3.0.0"
      }
    },
    "node_modules/resolve-protobuf-schema": {
@@ -256,7 +198,7 @@
    },
    "node_modules/rxjs": {
      "version": "7.8.2",
-      "resolved": "https://repository.akkerweb.nl/repository/npm-group/rxjs/-/rxjs-7.8.2.tgz",
+      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.2.tgz",
      "integrity": "sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==",
      "license": "Apache-2.0",
      "peer": true,
@@ -265,9 +207,11 @@
      }
    },
    "node_modules/tslib": {
-      "version": "2.7.0",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.7.0.tgz",
-      "integrity": "sha512-gLXCKdN1/j47AiHiOkJN69hJmcbGTHI0ImLmbYLHykhgeN0jVGola9yVjFgzCUklsZQMW55o+dW7IXv3RCXDzA=="
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD",
+      "peer": true
    },
    "node_modules/web-worker": {
      "version": "1.3.0",
--- a/projects/ng-openlayers/package.json
+++ b/projects/ng-openlayers/package.json
@@ -1,38 +1,22 @@
 {
  "name": "@farmmaps/ng-openlayers",
-  "version": "18.0.0",
-  "description": "OpenLayers library for Angular (migrated from angular 17 to 18)",
-  "author": "Kamil Furtak (kamil.furtak@gmail.com) / Farmmaps",
+  "version": "20.0.1",
+  "description": "Ngx openLayers library for Angular",
+  "author": "Quentin Lampin / Farmmaps",
  "publishConfig": {
    "registry": "https://repository.akkerweb.nl/repository/npm-hosted/"
  },
-  "bugs": {
-    "url": "https://github.com/kamilfurtak/ng-openlayers/issues"
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/quentinlampin/ngx-openlayers.git"
  },
-  "homepage": "https://github.com/kamilfurtak/ng-openlayers",
-  "keywords": [
-    "ngx-openlayers",
-    "angular",
-    "angular18",
-    "openlayers",
-    "openlayers8",
-    "ol8"
-  ],
-  "license": "MPL-2.0",
-  "private": false,
  "scripts": {
    "release": "standard-version -m \"chore(release): version %s\" -t \"\"",
    "prepublishOnly": "cp projects/ng-openlayers/README.md dist/ng-openlayers/README.md"
  },
-  "standard-version": {
-    "postchangelog": "cp projects/ng-openlayers/CHANGELOG.md dist/ng-openlayers/CHANGELOG.md"
-  },
-  "dependencies": {
-    "tslib": "^2.3.0"
-  },
  "peerDependencies": {
-    "@angular/common": "^21.1.0",
-    "@angular/core": "^21.1.0",
-    "ol": "^8.2.0"
+    "@angular/common": ">=19.0.0 <=20.x.x",
+    "@angular/core": ">=19.0.0 <=20.x.x",
+    "ol": "~10.7.0"
  }
-}
+}
--- a/projects/ng-openlayers/project.json
+++ b/projects/ng-openlayers/project.json
@@ -18,10 +18,11 @@
      }
    },
    "test": {
-      "executor": "@angular/build:unit-test",
+      "executor": "@angular-devkit/build-angular:karma",
      "options": {
+        "main": "libs/ng-openlayers/src/test.ts",
        "tsConfig": "libs/ng-openlayers/tsconfig.spec.json",
-            "browsers": ["chromium"]
+        "karmaConfig": "libs/ng-openlayers/karma.conf.js"
      }
    },
    "lint": {
--- a/projects/ng-openlayers/src/lib/attribution.component.ts
+++ b/projects/ng-openlayers/src/lib/attribution.component.ts
@@ -1,16 +1,19 @@
-import { Component, ElementRef, OnInit } from '@angular/core';
+import { Component, ElementRef, OnInit, inject } from '@angular/core';
+import { Attribution } from 'ol/control';

@Component({
-    selector: 'aol-attribution',
-    template: '<ng-content></ng-content>',
-    standalone: false
+  selector: 'aol-attribution',
+  template: '<ng-content></ng-content>',
+  standalone: true,
 })
 export class AttributionComponent implements OnInit {
-  label: string;
+  private elementRef = inject(ElementRef);

-  constructor(private elementRef: ElementRef) {}
+  instance: Attribution;
+  html: string;

-  ngOnInit() {
-    this.label = this.elementRef.nativeElement.innerHTML;
+  ngOnInit(): void {
+    this.html = this.elementRef.nativeElement.innerHTML;
+    this.instance = new Attribution();
  }
 }
--- a/projects/ng-openlayers/src/lib/attributions.component.ts
+++ b/projects/ng-openlayers/src/lib/attributions.component.ts
@@ -1,24 +1,24 @@
-import { AfterViewInit, Component, ContentChildren, Host, QueryList } from '@angular/core';
-import { SourceComponent } from './sources/source.component';
+import { AfterViewInit, Component, ContentChildren, QueryList, inject } from '@angular/core';
 import { AttributionComponent } from './attribution.component';
+import { SourceComponent } from './sources/source.component';

@Component({
-    selector: 'aol-attributions',
-    template: '<ng-content></ng-content>',
-    standalone: false
+  selector: 'aol-attributions',
+  template: '<ng-content></ng-content>',
+  standalone: true,
 })
 export class AttributionsComponent implements AfterViewInit {
+  private source = inject(SourceComponent, { host: true });
+
  @ContentChildren(AttributionComponent)
  attributions: QueryList<AttributionComponent>;

  instance: Array<string>;

-  constructor(@Host() private source: SourceComponent) {}
-
  /* we can do this at the very end */
-  ngAfterViewInit() {
+  ngAfterViewInit(): void {
    if (this.attributions.length) {
-      this.instance = this.attributions.map((cmp) => cmp.label);
+      this.instance = this.attributions.map((cmp) => cmp.html);
      // console.log('setting attributions:', this.instance);
      this.source.instance.setAttributions(this.instance);
    }
--- a/projects/ng-openlayers/src/lib/collectioncoordinates.component.ts
+++ b/projects/ng-openlayers/src/lib/collectioncoordinates.component.ts
@@ -1,90 +1,88 @@
-import { Component, Input, OnChanges, OnInit, Optional, SimpleChanges } from '@angular/core';
-import { MapComponent } from './map.component';
-import { GeometryLinestringComponent } from './geom/geometrylinestring.component';
-import { GeometryPolygonComponent } from './geom/geometrypolygon.component';
-import { GeometryMultiPointComponent } from './geom/geometrymultipoint.component';
-import { GeometryMultiLinestringComponent } from './geom/geometrymultilinestring.component';
-import { GeometryMultiPolygonComponent } from './geom/geometrymultipolygon.component';
+import { Component, Input, OnChanges, OnInit, inject } from '@angular/core';
 import { Coordinate } from 'ol/coordinate';
 import { transform } from 'ol/proj';
+import { GeometryLinestringComponent } from './geom/geometrylinestring.component';
+import { GeometryMultiLinestringComponent } from './geom/geometrymultilinestring.component';
+import { GeometryMultiPointComponent } from './geom/geometrymultipoint.component';
+import { GeometryMultiPolygonComponent } from './geom/geometrymultipolygon.component';
+import { GeometryPolygonComponent } from './geom/geometrypolygon.component';
+import { MapComponent } from './map.component';

@Component({
-    selector: 'aol-collection-coordinates',
-    template: ` <div class="aol-collection-coordinates"></div> `,
-    standalone: false
+  selector: 'aol-collection-coordinates',
+  template: ` <div class="aol-collection-coordinates"></div> `,
+  standalone: true,
 })
 export class CollectionCoordinatesComponent implements OnChanges, OnInit {
+  private map = inject(MapComponent);
+
  @Input()
  coordinates: Coordinate[] | Coordinate[][] | Coordinate[][][];
  @Input()
  srid = 'EPSG:3857';

-  private host: any;
+  private readonly host:
+    | GeometryLinestringComponent
+    | GeometryPolygonComponent
+    | GeometryMultiPointComponent
+    | GeometryMultiLinestringComponent
+    | GeometryMultiPolygonComponent;
  private mapSrid = 'EPSG:3857';

-  constructor(
-    private map: MapComponent,
-    @Optional() geometryLinestring: GeometryLinestringComponent,
-    @Optional() geometryPolygon: GeometryPolygonComponent,
-    @Optional() geometryMultipoint: GeometryMultiPointComponent,
-    @Optional() geometryMultilinestring: GeometryMultiLinestringComponent,
-    @Optional() geometryMultipolygon: GeometryMultiPolygonComponent
-  ) {
-    if (!!geometryLinestring) {
-      this.host = geometryLinestring;
-    } else if (!!geometryPolygon) {
-      this.host = geometryPolygon;
-    } else if (!!geometryMultipoint) {
-      this.host = geometryMultipoint;
-    } else if (!!geometryMultilinestring) {
-      this.host = geometryMultilinestring;
-    } else if (!!geometryMultipolygon) {
-      this.host = geometryMultipolygon;
+  constructor() {
+    const geometryLinestring = inject(GeometryLinestringComponent, { optional: true });
+    const geometryPolygon = inject(GeometryPolygonComponent, { optional: true });
+    const geometryMultipoint = inject(GeometryMultiPointComponent, { optional: true });
+    const geometryMultilinestring = inject(GeometryMultiLinestringComponent, { optional: true });
+    const geometryMultipolygon = inject(GeometryMultiPolygonComponent, { optional: true });
+
+    const geometryComponent =
+      geometryLinestring ??
+      geometryPolygon ??
+      geometryMultipoint ??
+      geometryMultilinestring ??
+      geometryMultipolygon ??
+      undefined;
+    if (geometryComponent) {
+      this.host = geometryComponent;
    } else {
      throw new Error('aol-collection-coordinates must be a child of a geometry component');
    }
  }

-  ngOnInit() {
+  ngOnInit(): void {
    this.map.instance.on('change:view', (e) => this.onMapViewChanged(e));
    this.mapSrid = this.map.instance.getView().getProjection().getCode();
    this.transformCoordinates();
  }

-  ngOnChanges(changes: SimpleChanges) {
+  ngOnChanges(): void {
    this.transformCoordinates();
  }

-  private onMapViewChanged(event) {
+  private onMapViewChanged(event): void {
    this.mapSrid = event.target.get(event.key).getProjection().getCode();
    this.transformCoordinates();
  }

-  private transformCoordinates() {
-    let transformedCoordinates: Coordinate[] | Coordinate[][] | Coordinate[][][];
-
+  private transformCoordinates(): void {
    if (this.srid === this.mapSrid) {
-      transformedCoordinates = this.coordinates;
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      this.host.instance.setCoordinates(this.coordinates as any[]);
+    } else if (this.host instanceof GeometryLinestringComponent || this.host instanceof GeometryMultiPointComponent) {
+      this.host.instance.setCoordinates(
+        (this.coordinates as Coordinate[]).map((c) => transform(c, this.srid, this.mapSrid))
+      );
+    } else if (this.host instanceof GeometryPolygonComponent || this.host instanceof GeometryMultiLinestringComponent) {
+      this.host.instance.setCoordinates(
+        (this.coordinates as Coordinate[][]).map((cc) => cc.map((c) => transform(c, this.srid, this.mapSrid)))
+      );
    } else {
-      switch (this.host.componentType) {
-        case 'geometry-linestring':
-        case 'geometry-multipoint':
-          transformedCoordinates = (this.coordinates as Coordinate[]).map((c) => transform(c, this.srid, this.mapSrid));
-          break;
-        case 'geometry-polygon':
-        case 'geometry-multilinestring':
-          transformedCoordinates = (this.coordinates as Coordinate[][]).map((cc) =>
-            cc.map((c) => transform(c, this.srid, this.mapSrid))
-          );
-          break;
-        case 'geometry-multipolygon':
-          transformedCoordinates = (this.coordinates as Coordinate[][][]).map((ccc) =>
-            ccc.map((cc) => cc.map((c) => transform(c, this.srid, this.mapSrid)))
-          );
-          break;
-      }
+      this.host.instance.setCoordinates(
+        (this.coordinates as Coordinate[][][]).map((ccc) =>
+          ccc.map((cc) => cc.map((c) => transform(c, this.srid, this.mapSrid)))
+        )
+      );
    }
-
-    this.host.instance.setCoordinates(transformedCoordinates);
  }
 }
--- a/projects/ng-openlayers/src/lib/content.component.ts
+++ b/projects/ng-openlayers/src/lib/content.component.ts
@@ -1,10 +1,10 @@
-import { Component, ElementRef } from '@angular/core';
+import { Component, ElementRef, inject } from '@angular/core';

@Component({
-    selector: 'aol-content',
-    template: '<ng-content></ng-content>',
-    standalone: false
+  selector: 'aol-content',
+  template: '<ng-content></ng-content>',
+  standalone: true,
 })
 export class ContentComponent {
-  constructor(public elementRef: ElementRef) {}
+  readonly elementRef = inject(ElementRef);
 }
--- a/projects/ng-openlayers/src/lib/controls/attribution.component.ts
+++ b/projects/ng-openlayers/src/lib/controls/attribution.component.ts
@@ -1,33 +1,31 @@
-import { Component, ElementRef, Input, OnDestroy, OnInit } from '@angular/core';
+import { Component, ElementRef, Input, OnDestroy, OnInit, inject } from '@angular/core';
 import { Attribution } from 'ol/control';
 import { MapComponent } from '../map.component';

@Component({
-    selector: 'aol-control-attribution',
-    template: ``,
-    standalone: false
+  selector: 'aol-control-attribution',
+  template: ``,
+  standalone: true,
 })
 export class ControlAttributionComponent implements OnInit, OnDestroy {
+  private map = inject(MapComponent);
+  private element = inject(ElementRef);
+
  @Input()
  collapsible: boolean;

-  public componentType = 'control';
+  componentType = 'control';
  instance: Attribution;
  target: HTMLElement;

-  constructor(
-    private map: MapComponent,
-    private element: ElementRef
-  ) {}
-
-  ngOnInit() {
+  ngOnInit(): void {
    this.target = this.element.nativeElement;
    // console.log('ol.control.Attribution init: ', this);
    this.instance = new Attribution(this);
    this.map.instance.addControl(this.instance);
  }

-  ngOnDestroy() {
+  ngOnDestroy(): void {
    // console.log('removing aol-control-attribution');
    this.map.instance.removeControl(this.instance);
  }
--- a/projects/ng-openlayers/src/lib/controls/control.component.ts
+++ b/projects/ng-openlayers/src/lib/controls/control.component.ts
@@ -1,24 +1,24 @@
-import { Component, ContentChild, OnDestroy, OnInit } from '@angular/core';
+import { Component, ContentChild, OnDestroy, OnInit, inject } from '@angular/core';
 import { Control } from 'ol/control';
-import { MapComponent } from '../map.component';
 import { ContentComponent } from '../content.component';
+import { MapComponent } from '../map.component';

@Component({
-    selector: 'aol-control',
-    template: ` <ng-content></ng-content> `,
-    standalone: false
+  selector: 'aol-control',
+  template: ` <ng-content></ng-content> `,
+  standalone: true,
 })
 export class ControlComponent implements OnInit, OnDestroy {
+  private map = inject(MapComponent);
+
  @ContentChild(ContentComponent, { static: true })
  content: ContentComponent;

-  public componentType = 'control';
+  componentType = 'control';
  instance: Control;
  element: HTMLElement;

-  constructor(private map: MapComponent) {}
-
-  ngOnInit() {
+  ngOnInit(): void {
    if (this.content) {
      this.element = this.content.elementRef.nativeElement;
      this.instance = new Control(this);
@@ -26,7 +26,7 @@ export class ControlComponent implements OnInit, OnDestroy {
    }
  }

-  ngOnDestroy() {
+  ngOnDestroy(): void {
    if (this.instance) {
      this.map.instance.removeControl(this.instance);
    }
--- a/projects/ng-openlayers/src/lib/controls/default.component.ts
+++ b/projects/ng-openlayers/src/lib/controls/default.component.ts
@@ -1,6 +1,6 @@
-import { Component, OnDestroy, OnInit, Input } from '@angular/core';
-import { Control, defaults } from 'ol/control';
+import { Component, Input, OnDestroy, OnInit, inject } from '@angular/core';
 import { Collection } from 'ol';
+import { Control, defaults } from 'ol/control';
 import { Options as AttributionOptions } from 'ol/control/Attribution';
 import { Options as RotateOptions } from 'ol/control/Rotate';
 import { Options as ZoomOptions } from 'ol/control/Zoom';
@@ -8,11 +8,13 @@ import { Options as ZoomOptions } from 'ol/control/Zoom';
 import { MapComponent } from '../map.component';

@Component({
-    selector: 'aol-control-defaults',
-    template: '',
-    standalone: false
+  selector: 'aol-control-defaults',
+  template: '',
+  standalone: true,
 })
 export class DefaultControlComponent implements OnInit, OnDestroy {
+  private map = inject(MapComponent);
+
  @Input()
  attribution: boolean;
  @Input()
@@ -28,15 +30,13 @@ export class DefaultControlComponent implements OnInit, OnDestroy {

  instance: Collection<Control>;

-  constructor(private map: MapComponent) {}
-
-  ngOnInit() {
+  ngOnInit(): void {
    // console.log('ol.control.defaults init: ', this);
    this.instance = defaults(this);
    this.instance.forEach((c) => this.map.instance.addControl(c));
  }

-  ngOnDestroy() {
+  ngOnDestroy(): void {
    // console.log('removing aol-control-defaults');
    this.instance.forEach((c) => this.map.instance.removeControl(c));
  }
--- a/projects/ng-openlayers/src/lib/controls/fullscreen.component.ts
+++ b/projects/ng-openlayers/src/lib/controls/fullscreen.component.ts
@@ -1,13 +1,15 @@
-import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { Component, Input, OnDestroy, OnInit, inject } from '@angular/core';
 import { FullScreen } from 'ol/control';
 import { MapComponent } from '../map.component';

@Component({
-    selector: 'aol-control-fullscreen',
-    template: ` <ng-content></ng-content> `,
-    standalone: false
+  selector: 'aol-control-fullscreen',
+  template: ` <ng-content></ng-content> `,
+  standalone: true,
 })
 export class ControlFullScreenComponent implements OnInit, OnDestroy {
+  private map = inject(MapComponent);
+
  @Input()
  className: string;
  @Input()
@@ -21,16 +23,12 @@ export class ControlFullScreenComponent implements OnInit, OnDestroy {

  instance: FullScreen;

-  constructor(private map: MapComponent) {
-    // console.log('instancing aol-control-fullscreen');
-  }
-
-  ngOnInit() {
+  ngOnInit(): void {
    this.instance = new FullScreen(this);
    this.map.instance.addControl(this.instance);
  }

-  ngOnDestroy() {
+  ngOnDestroy(): void {
    // console.log('removing aol-control-fullscreen');
    this.map.instance.removeControl(this.instance);
  }
--- a/projects/ng-openlayers/src/lib/controls/mouseposition.component.ts
+++ b/projects/ng-openlayers/src/lib/controls/mouseposition.component.ts
@@ -1,36 +1,36 @@
-import { Component, ElementRef, Input, OnDestroy, OnInit } from '@angular/core';
+import { Component, ElementRef, Input, OnDestroy, OnInit, inject } from '@angular/core';
 import MousePosition from 'ol/control/MousePosition';
-import { MapComponent } from '../map.component';
 import { CoordinateFormat } from 'ol/coordinate';
 import { ProjectionLike } from 'ol/proj';
+import { MapComponent } from '../map.component';

@Component({
-    selector: 'aol-control-mouseposition',
-    template: ``,
-    standalone: false
+  selector: 'aol-control-mouseposition',
+  template: ``,
+  standalone: true,
 })
 export class ControlMousePositionComponent implements OnInit, OnDestroy {
+  private map = inject(MapComponent);
+  private element = inject(ElementRef);
+
  @Input()
  coordinateFormat: CoordinateFormat;
  @Input()
  projection: ProjectionLike;
-
-  instance: MousePosition;
+  @Input()
+  wrapX: boolean;
  target: HTMLElement;

-  constructor(
-    private map: MapComponent,
-    private element: ElementRef
-  ) {}
+  instance: MousePosition;

-  ngOnInit() {
+  ngOnInit(): void {
    this.target = this.element.nativeElement;
    // console.log('ol.control.MousePosition init: ', this);
    this.instance = new MousePosition(this);
    this.map.instance.addControl(this.instance);
  }

-  ngOnDestroy() {
+  ngOnDestroy(): void {
    // console.log('removing aol-control-mouseposition');
    this.map.instance.removeControl(this.instance);
  }
--- a/projects/ng-openlayers/src/lib/controls/overviewmap.component.ts
+++ b/projects/ng-openlayers/src/lib/controls/overviewmap.component.ts
@@ -1,15 +1,17 @@
-import { Component, Input, OnDestroy, OnInit, OnChanges, SimpleChanges } from '@angular/core';
-import { Layer } from 'ol/layer';
+import { Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges, inject } from '@angular/core';
 import { View } from 'ol';
 import { OverviewMap } from 'ol/control';
+import { Layer } from 'ol/layer';
 import { MapComponent } from '../map.component';

@Component({
-    selector: 'aol-control-overviewmap',
-    template: ` <ng-content></ng-content> `,
-    standalone: false
+  selector: 'aol-control-overviewmap',
+  template: ` <ng-content></ng-content> `,
+  standalone: true,
 })
 export class ControlOverviewMapComponent implements OnInit, OnChanges, OnDestroy {
+  private map = inject(MapComponent);
+
  @Input()
  collapsed: boolean;
  @Input()
@@ -29,24 +31,22 @@ export class ControlOverviewMapComponent implements OnInit, OnChanges, OnDestroy

  instance: OverviewMap;

-  constructor(private map: MapComponent) {}
-
-  ngOnInit() {
+  ngOnInit(): void {
    this.instance = new OverviewMap(this);
    this.map.instance.addControl(this.instance);
  }

-  ngOnDestroy() {
+  ngOnDestroy(): void {
    this.map.instance.removeControl(this.instance);
  }

-  ngOnChanges(changes: SimpleChanges) {
+  ngOnChanges(changes: SimpleChanges): void {
    if (this.instance != null && changes.hasOwnProperty('view')) {
      this.reloadInstance();
    }
  }

-  private reloadInstance() {
+  private reloadInstance(): void {
    this.map.instance.removeControl(this.instance);
    this.instance = new OverviewMap(this);
    this.map.instance.addControl(this.instance);
--- a/projects/ng-openlayers/src/lib/controls/rotate.component.ts
+++ b/projects/ng-openlayers/src/lib/controls/rotate.component.ts
@@ -1,13 +1,15 @@
-import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { Component, Input, OnDestroy, OnInit, inject } from '@angular/core';
 import { Rotate } from 'ol/control';
 import { MapComponent } from '../map.component';

@Component({
-    selector: 'aol-control-rotate',
-    template: ` <ng-content></ng-content> `,
-    standalone: false
+  selector: 'aol-control-rotate',
+  template: ` <ng-content></ng-content> `,
+  standalone: true,
 })
 export class ControlRotateComponent implements OnInit, OnDestroy {
+  private map = inject(MapComponent);
+
  @Input()
  className: string;
  @Input()
@@ -21,16 +23,12 @@ export class ControlRotateComponent implements OnInit, OnDestroy {

  instance: Rotate;

-  constructor(private map: MapComponent) {
-    // console.log('instancing aol-control-rotate');
-  }
-
-  ngOnInit() {
+  ngOnInit(): void {
    this.instance = new Rotate(this);
    this.map.instance.addControl(this.instance);
  }

-  ngOnDestroy() {
+  ngOnDestroy(): void {
    // console.log('removing aol-control-rotate');
    this.map.instance.removeControl(this.instance);
  }
--- a/projects/ng-openlayers/src/lib/controls/scaleline.component.ts
+++ b/projects/ng-openlayers/src/lib/controls/scaleline.component.ts
@@ -1,27 +1,28 @@
-import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { Component, Input, OnDestroy, OnInit, inject } from '@angular/core';
 import { ScaleLine } from 'ol/control';
 import { MapComponent } from '../map.component';
 import { Units } from 'ol/control/ScaleLine';

@Component({
-    selector: 'aol-control-scaleline',
-    template: ` <ng-content></ng-content> `,
-    standalone: false
+  selector: 'aol-control-scaleline',
+  template: ` <ng-content></ng-content> `,
+  standalone: true,
 })
 export class ControlScaleLineComponent implements OnInit, OnDestroy {
+  private map = inject(MapComponent);
+
  @Input()
  units: Units;

  instance: ScaleLine;

-  constructor(private map: MapComponent) {}
-
-  ngOnInit() {
+  ngOnInit(): void {
    this.instance = new ScaleLine(this);
    this.map.instance.addControl(this.instance);
  }

-  ngOnDestroy() {
+  ngOnDestroy(): void {
+    // console.log('removing aol-control-scaleline');
    this.map.instance.removeControl(this.instance);
  }
 }
--- a/projects/ng-openlayers/src/lib/controls/zoom.component.ts
+++ b/projects/ng-openlayers/src/lib/controls/zoom.component.ts
@@ -1,13 +1,15 @@
-import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { Component, Input, OnDestroy, OnInit, inject } from '@angular/core';
 import { Zoom } from 'ol/control';
 import { MapComponent } from '../map.component';

@Component({
-    selector: 'aol-control-zoom',
-    template: ` <ng-content></ng-content> `,
-    standalone: false
+  selector: 'aol-control-zoom',
+  template: ` <ng-content></ng-content> `,
+  standalone: true,
 })
 export class ControlZoomComponent implements OnInit, OnDestroy {
+  private map = inject(MapComponent);
+
  @Input()
  duration: number;
  @Input()
@@ -23,16 +25,12 @@ export class ControlZoomComponent implements OnInit, OnDestroy {

  instance: Zoom;

-  constructor(private map: MapComponent) {
-    // console.log('instancing aol-control-zoom');
-  }
-
-  ngOnInit() {
+  ngOnInit(): void {
    this.instance = new Zoom(this);
    this.map.instance.addControl(this.instance);
  }

-  ngOnDestroy() {
+  ngOnDestroy(): void {
    // console.log('removing aol-control-zoom');
    this.map.instance.removeControl(this.instance);
  }
--- a/projects/ng-openlayers/src/lib/controls/zoomslider.component.ts
+++ b/projects/ng-openlayers/src/lib/controls/zoomslider.component.ts
@@ -1,13 +1,15 @@
-import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { Component, Input, OnDestroy, OnInit, inject } from '@angular/core';
 import { ZoomSlider } from 'ol/control';
 import { MapComponent } from '../map.component';

@Component({
-    selector: 'aol-control-zoomslider',
-    template: ` <ng-content></ng-content> `,
-    standalone: false
+  selector: 'aol-control-zoomslider',
+  template: ` <ng-content></ng-content> `,
+  standalone: true,
 })
 export class ControlZoomSliderComponent implements OnInit, OnDestroy {
+  private map = inject(MapComponent);
+
  @Input()
  className: string;
  @Input()
@@ -19,16 +21,12 @@ export class ControlZoomSliderComponent implements OnInit, OnDestroy {

  instance: ZoomSlider;

-  constructor(private map: MapComponent) {
-    // console.log('instancing aol-control-zoomslider');
-  }
-
-  ngOnInit() {
+  ngOnInit(): void {
    this.instance = new ZoomSlider(this);
    this.map.instance.addControl(this.instance);
  }

-  ngOnDestroy() {
+  ngOnDestroy(): void {
    // console.log('removing aol-control-zoomslider');
    this.map.instance.removeControl(this.instance);
  }
--- a/projects/ng-openlayers/src/lib/controls/zoomtoextent.component.ts
+++ b/projects/ng-openlayers/src/lib/controls/zoomtoextent.component.ts
@@ -1,14 +1,16 @@
-import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { Component, Input, OnDestroy, OnInit, inject } from '@angular/core';
 import { ZoomToExtent } from 'ol/control';
-import { MapComponent } from '../map.component';
 import { Extent } from 'ol/extent';
+import { MapComponent } from '../map.component';

@Component({
-    selector: 'aol-control-zoomtoextent',
-    template: ` <ng-content></ng-content> `,
-    standalone: false
+  selector: 'aol-control-zoomtoextent',
+  template: ` <ng-content></ng-content> `,
+  standalone: true,
 })
 export class ControlZoomToExtentComponent implements OnInit, OnDestroy {
+  private map = inject(MapComponent);
+
  @Input()
  className: string;
  @Input()
@@ -20,16 +22,12 @@ export class ControlZoomToExtentComponent implements OnInit, OnDestroy {

  instance: ZoomToExtent;

-  constructor(private map: MapComponent) {
-    // console.log('instancing aol-control-zoomtoextent');
-  }
-
-  ngOnInit() {
+  ngOnInit(): void {
    this.instance = new ZoomToExtent(this);
    this.map.instance.addControl(this.instance);
  }

-  ngOnDestroy() {
+  ngOnDestroy(): void {
    // console.log('removing aol-control-zoomtoextent');
    this.map.instance.removeControl(this.instance);
  }
--- a/projects/ng-openlayers/src/lib/coordinate.component.ts
+++ b/projects/ng-openlayers/src/lib/coordinate.component.ts
@@ -1,17 +1,19 @@
-import { Component, Optional, OnChanges, Input, SimpleChanges, OnInit } from '@angular/core';
+import { Component, Input, OnChanges, OnInit, inject } from '@angular/core';
 import { transform } from 'ol/proj';
-import { MapComponent } from './map.component';
-import { GeometryPointComponent } from './geom/geometrypoint.component';
 import { GeometryCircleComponent } from './geom/geometrycircle.component';
-import { ViewComponent } from './view.component';
+import { GeometryPointComponent } from './geom/geometrypoint.component';
+import { MapComponent } from './map.component';
 import { OverlayComponent } from './overlay.component';
+import { ViewComponent } from './view.component';

@Component({
-    selector: 'aol-coordinate',
-    template: ` <div class="aol-coordinate"></div> `,
-    standalone: false
+  selector: 'aol-coordinate',
+  template: ` <div class="aol-coordinate"></div> `,
+  standalone: true,
 })
 export class CoordinateComponent implements OnChanges, OnInit {
+  private map = inject(MapComponent);
+
  @Input()
  x: number;
  @Input()
@@ -19,16 +21,15 @@ export class CoordinateComponent implements OnChanges, OnInit {
  @Input()
  srid = 'EPSG:3857';

-  private host: any;
+  private host: ViewComponent | GeometryPointComponent | GeometryCircleComponent | OverlayComponent;
  private mapSrid = 'EPSG:3857';

-  constructor(
-    private map: MapComponent,
-    @Optional() viewHost: ViewComponent,
-    @Optional() geometryPointHost: GeometryPointComponent,
-    @Optional() geometryCircleHost: GeometryCircleComponent,
-    @Optional() overlayHost: OverlayComponent
-  ) {
+  constructor() {
+    const viewHost = inject(ViewComponent, { optional: true });
+    const geometryPointHost = inject(GeometryPointComponent, { optional: true });
+    const geometryCircleHost = inject(GeometryCircleComponent, { optional: true });
+    const overlayHost = inject(OverlayComponent, { optional: true });
+
    // console.log('instancing aol-coordinate');
    if (geometryPointHost !== null) {
      this.host = geometryPointHost;
@@ -41,22 +42,22 @@ export class CoordinateComponent implements OnChanges, OnInit {
    }
  }

-  ngOnInit() {
+  ngOnInit(): void {
    this.map.instance.on('change:view', (e) => this.onMapViewChanged(e));
    this.mapSrid = this.map.instance.getView().getProjection().getCode();
    this.transformCoordinates();
  }

-  ngOnChanges(changes: SimpleChanges) {
+  ngOnChanges(): void {
    this.transformCoordinates();
  }

-  private onMapViewChanged(event) {
+  private onMapViewChanged(event): void {
    this.mapSrid = event.target.get(event.key).getProjection().getCode();
    this.transformCoordinates();
  }

-  private transformCoordinates() {
+  private transformCoordinates(): void {
    let transformedCoordinates: number[];

    if (this.srid === this.mapSrid) {
@@ -65,17 +66,12 @@ export class CoordinateComponent implements OnChanges, OnInit {
      transformedCoordinates = transform([this.x, this.y], this.srid, this.mapSrid);
    }

-    switch (this.host.componentType) {
-      case 'geometry-point':
-        this.host.instance.setCoordinates(transformedCoordinates);
-        break;
-      case 'geometry-circle':
-      case 'view':
-        this.host.instance.setCenter(transformedCoordinates);
-        break;
-      case 'overlay':
-        this.host.instance.setPosition(transformedCoordinates);
-        break;
+    if (this.host instanceof GeometryPointComponent) {
+      this.host.instance.setCoordinates(transformedCoordinates);
+    } else if (this.host instanceof OverlayComponent) {
+      this.host.instance.setPosition(transformedCoordinates);
+    } else {
+      this.host.instance.setCenter(transformedCoordinates);
    }
  }
 }
--- a/projects/ng-openlayers/src/lib/feature.component.ts
+++ b/projects/ng-openlayers/src/lib/feature.component.ts
@@ -1,22 +1,22 @@
-import { Component, OnInit, OnDestroy, OnChanges, Input, SimpleChanges } from '@angular/core';
+import { Component, Input, OnChanges, OnDestroy, OnInit, inject } from '@angular/core';
 import { Feature } from 'ol';
 import { SourceVectorComponent } from './sources/vector.component';

@Component({
-    selector: 'aol-feature',
-    template: ` <ng-content></ng-content> `,
-    standalone: false
+  selector: 'aol-feature',
+  template: ` <ng-content></ng-content> `,
+  standalone: true,
 })
 export class FeatureComponent implements OnInit, OnDestroy, OnChanges {
+  private host = inject(SourceVectorComponent);
+
  @Input()
  id: string | number | undefined;

-  public componentType = 'feature';
-  public instance: Feature;
+  componentType = 'feature';
+  instance: Feature;

-  constructor(private host: SourceVectorComponent) {}
-
-  ngOnInit() {
+  ngOnInit(): void {
    this.instance = new Feature();
    if (this.id !== undefined) {
      this.instance.setId(this.id);
@@ -24,11 +24,11 @@ export class FeatureComponent implements OnInit, OnDestroy, OnChanges {
    this.host.instance.addFeature(this.instance);
  }

-  ngOnDestroy() {
+  ngOnDestroy(): void {
    this.host.instance.removeFeature(this.instance);
  }

-  ngOnChanges(changes: SimpleChanges) {
+  ngOnChanges(): void {
    if (this.instance) {
      this.instance.setId(this.id);
    }
--- a/projects/ng-openlayers/src/lib/formats/format.component.ts
+++ b/projects/ng-openlayers/src/lib/formats/format.component.ts
@@ -1,6 +1,7 @@
-import Feature from 'ol/format/Feature';
+import FeatureFormat from 'ol/format/Feature';
+import RenderFeature from 'ol/render/Feature';

 export class FormatComponent {
-  public instance: Feature;
+  public instance: FeatureFormat<RenderFeature>;
  public componentType = 'format';
 }
--- a/projects/ng-openlayers/src/lib/formats/mvt.component.ts
+++ b/projects/ng-openlayers/src/lib/formats/mvt.component.ts
@@ -1,17 +1,18 @@
 import { Component, forwardRef, Input } from '@angular/core';
-import { FormatComponent } from './format.component';
 import { MVT } from 'ol/format';
-import { FeatureClass } from 'ol/Feature';
+import { FormatComponent } from './format.component';
+import RenderFeature from 'ol/render/Feature';
+import { FeatureToFeatureClass } from 'ol/format/Feature';

@Component({
-    selector: 'aol-format-mvt',
-    template: '',
-    providers: [{ provide: FormatComponent, useExisting: forwardRef(() => FormatMVTComponent) }],
-    standalone: false
+  selector: 'aol-format-mvt',
+  template: '',
+  providers: [{ provide: FormatComponent, useExisting: forwardRef(() => FormatMVTComponent) }],
+  standalone: true,
 })
 export class FormatMVTComponent extends FormatComponent {
  @Input()
-  featureClass: FeatureClass;
+  featureClass: FeatureToFeatureClass<RenderFeature>;
  @Input()
  geometryName: string;
  @Input()
--- a/projects/ng-openlayers/src/lib/geom/geometrycircle.component.ts
+++ b/projects/ng-openlayers/src/lib/geom/geometrycircle.component.ts
@@ -1,15 +1,16 @@
-import { Component, Input, OnInit } from '@angular/core';
-import { FeatureComponent } from '../feature.component';
+import { Component, Input } from '@angular/core';
 import { Circle } from 'ol/geom';
 import { SimpleGeometryComponent } from './simplegeometry.component';
-import { MapComponent } from '../map.component';

@Component({
-    selector: 'aol-geometry-circle',
-    template: ` <ng-content></ng-content> `,
-    standalone: false
+  selector: 'aol-geometry-circle',
+  template: ` <ng-content></ng-content> `,
+  standalone: true,
 })
-export class GeometryCircleComponent extends SimpleGeometryComponent implements OnInit {
+export class GeometryCircleComponent extends SimpleGeometryComponent {
+  componentType = 'geometry-circle';
+  instance = new Circle([0, 0]);
+
  @Input()
  get radius(): number {
    return this.instance.getRadius();
@@ -17,13 +18,4 @@ export class GeometryCircleComponent extends SimpleGeometryComponent implements
  set radius(radius: number) {
    this.instance.setRadius(radius);
  }
-
-  public componentType = 'geometry-circle';
-  public instance: Circle;
-
-  constructor(map: MapComponent, host: FeatureComponent) {
-    super(map, host);
-    // defaulting coordinates to [0,0]. To be overridden in child component.
-    this.instance = new Circle([0, 0]);
-  }
 }
--- a/projects/ng-openlayers/src/lib/geom/geometrylinestring.component.ts
+++ b/projects/ng-openlayers/src/lib/geom/geometrylinestring.component.ts
@@ -1,27 +1,16 @@
-import { Component, OnInit } from '@angular/core';
-import { FeatureComponent } from '../feature.component';
+import { Component } from '@angular/core';
 import { SimpleGeometryComponent } from './simplegeometry.component';
-import { MapComponent } from '../map.component';
 import { LineString } from 'ol/geom';

@Component({
-    selector: 'aol-geometry-linestring',
-    template: ` <ng-content></ng-content> `,
-    standalone: false
+  selector: 'aol-geometry-linestring',
+  template: ` <ng-content></ng-content> `,
+  standalone: true,
 })
-export class GeometryLinestringComponent extends SimpleGeometryComponent implements OnInit {
+export class GeometryLinestringComponent extends SimpleGeometryComponent {
  public componentType = 'geometry-linestring';
-  public instance: LineString;
-
-  constructor(map: MapComponent, host: FeatureComponent) {
-    super(map, host);
-  }
-
-  ngOnInit() {
-    this.instance = new LineString([
-      [0, 0],
-      [1, 1],
-    ]);
-    super.ngOnInit();
-  }
+  public instance = new LineString([
+    [0, 0],
+    [1, 1],
+  ]);
 }
--- a/projects/ng-openlayers/src/lib/geom/geometrymultilinestring.component.ts
+++ b/projects/ng-openlayers/src/lib/geom/geometrymultilinestring.component.ts
@@ -1,29 +1,18 @@
-import { Component, OnInit } from '@angular/core';
-import { FeatureComponent } from '../feature.component';
+import { Component } from '@angular/core';
 import { SimpleGeometryComponent } from './simplegeometry.component';
-import { MapComponent } from '../map.component';
 import { MultiLineString } from 'ol/geom';

@Component({
-    selector: 'aol-geometry-multilinestring',
-    template: ` <ng-content></ng-content> `,
-    standalone: false
+  selector: 'aol-geometry-multilinestring',
+  template: ` <ng-content></ng-content> `,
+  standalone: true,
 })
-export class GeometryMultiLinestringComponent extends SimpleGeometryComponent implements OnInit {
+export class GeometryMultiLinestringComponent extends SimpleGeometryComponent {
  public componentType = 'geometry-multilinestring';
-  public instance: MultiLineString;
-
-  constructor(map: MapComponent, host: FeatureComponent) {
-    super(map, host);
-  }
-
-  ngOnInit() {
-    this.instance = new MultiLineString([
-      [
-        [0, 0],
-        [1, 1],
-      ],
-    ]);
-    super.ngOnInit();
-  }
+  public instance = new MultiLineString([
+    [
+      [0, 0],
+      [1, 1],
+    ],
+  ]);
 }
--- a/projects/ng-openlayers/src/lib/geom/geometrymultipoint.component.ts
+++ b/projects/ng-openlayers/src/lib/geom/geometrymultipoint.component.ts
@@ -1,27 +1,16 @@
-import { Component, OnInit } from '@angular/core';
-import { FeatureComponent } from '../feature.component';
+import { Component } from '@angular/core';
 import { SimpleGeometryComponent } from './simplegeometry.component';
-import { MapComponent } from '../map.component';
 import { MultiPoint } from 'ol/geom';

@Component({
-    selector: 'aol-geometry-multipoint',
-    template: ` <ng-content></ng-content> `,
-    standalone: false
+  selector: 'aol-geometry-multipoint',
+  template: ` <ng-content></ng-content> `,
+  standalone: true,
 })
-export class GeometryMultiPointComponent extends SimpleGeometryComponent implements OnInit {
+export class GeometryMultiPointComponent extends SimpleGeometryComponent {
  public componentType = 'geometry-multipoint';
-  public instance: MultiPoint;
-
-  constructor(map: MapComponent, host: FeatureComponent) {
-    super(map, host);
-  }
-
-  ngOnInit() {
-    this.instance = new MultiPoint([
-      [0, 0],
-      [1, 1],
-    ]);
-    super.ngOnInit();
-  }
+  public instance = new MultiPoint([
+    [0, 0],
+    [1, 1],
+  ]);
 }
--- a/projects/ng-openlayers/src/lib/geom/geometrymultipolygon.component.ts
+++ b/projects/ng-openlayers/src/lib/geom/geometrymultipolygon.component.ts
@@ -1,32 +1,21 @@
-import { Component, OnInit } from '@angular/core';
-import { FeatureComponent } from '../feature.component';
+import { Component } from '@angular/core';
 import { SimpleGeometryComponent } from './simplegeometry.component';
-import { MapComponent } from '../map.component';
 import { MultiPolygon } from 'ol/geom';

@Component({
-    selector: 'aol-geometry-multipolygon',
-    template: ` <ng-content></ng-content> `,
-    standalone: false
+  selector: 'aol-geometry-multipolygon',
+  template: ` <ng-content></ng-content> `,
+  standalone: true,
 })
-export class GeometryMultiPolygonComponent extends SimpleGeometryComponent implements OnInit {
+export class GeometryMultiPolygonComponent extends SimpleGeometryComponent {
  public componentType = 'geometry-multipolygon';
-  public instance: MultiPolygon;
-
-  constructor(map: MapComponent, host: FeatureComponent) {
-    super(map, host);
-  }
-
-  ngOnInit() {
-    this.instance = new MultiPolygon([
+  public instance = new MultiPolygon([
+    [
      [
-        [
-          [0, 0],
-          [1, 1],
-          [0, 1],
-        ],
+        [0, 0],
+        [1, 1],
+        [0, 1],
      ],
-    ]);
-    super.ngOnInit();
-  }
+    ],
+  ]);
 }
--- a/projects/ng-openlayers/src/lib/geom/geometrypoint.component.ts
+++ b/projects/ng-openlayers/src/lib/geom/geometrypoint.component.ts
@@ -1,24 +1,13 @@
-import { Component, OnInit } from '@angular/core';
-import { FeatureComponent } from '../feature.component';
+import { Component } from '@angular/core';
 import { SimpleGeometryComponent } from './simplegeometry.component';
-import { MapComponent } from '../map.component';
 import { Point } from 'ol/geom';

@Component({
-    selector: 'aol-geometry-point',
-    template: ` <ng-content></ng-content> `,
-    standalone: false
+  selector: 'aol-geometry-point',
+  template: ` <ng-content></ng-content> `,
+  standalone: true,
 })
-export class GeometryPointComponent extends SimpleGeometryComponent implements OnInit {
+export class GeometryPointComponent extends SimpleGeometryComponent {
  public componentType = 'geometry-point';
-  public instance: Point;
-
-  constructor(map: MapComponent, host: FeatureComponent) {
-    super(map, host);
-  }
-
-  ngOnInit() {
-    this.instance = new Point([0, 0]);
-    super.ngOnInit();
-  }
+  public instance = new Point([0, 0]);
 }
--- a/projects/ng-openlayers/src/lib/geom/geometrypolygon.component.ts
+++ b/projects/ng-openlayers/src/lib/geom/geometrypolygon.component.ts
@@ -1,30 +1,19 @@
-import { Component, OnInit } from '@angular/core';
-import { FeatureComponent } from '../feature.component';
+import { Component } from '@angular/core';
 import { SimpleGeometryComponent } from './simplegeometry.component';
-import { MapComponent } from '../map.component';
 import { Polygon } from 'ol/geom';

@Component({
-    selector: 'aol-geometry-polygon',
-    template: ` <ng-content></ng-content> `,
-    standalone: false
+  selector: 'aol-geometry-polygon',
+  template: ` <ng-content></ng-content> `,
+  standalone: true,
 })
-export class GeometryPolygonComponent extends SimpleGeometryComponent implements OnInit {
+export class GeometryPolygonComponent extends SimpleGeometryComponent {
  public componentType = 'geometry-polygon';
-  public instance: Polygon;
-
-  constructor(map: MapComponent, host: FeatureComponent) {
-    super(map, host);
-  }
-
-  ngOnInit() {
-    this.instance = new Polygon([
-      [
-        [0, 0],
-        [1, 1],
-        [0, 1],
-      ],
-    ]);
-    super.ngOnInit();
-  }
+  public instance = new Polygon([
+    [
+      [0, 0],
+      [1, 1],
+      [0, 1],
+    ],
+  ]);
 }
--- a/projects/ng-openlayers/src/lib/geom/simplegeometry.component.ts
+++ b/projects/ng-openlayers/src/lib/geom/simplegeometry.component.ts
@@ -1,22 +1,19 @@
-import { Input, OnInit, Directive } from '@angular/core';
+import { Directive, inject, Input, OnInit } from '@angular/core';
+import SimpleGeometry from 'ol/geom/SimpleGeometry';
 import { FeatureComponent } from '../feature.component';
 import { MapComponent } from '../map.component';
-import SimpleGeometry from 'ol/geom/SimpleGeometry';

@Directive()
-// eslint-disable-next-line @angular-eslint/directive-class-suffix
 export abstract class SimpleGeometryComponent implements OnInit {
  @Input() srid: string;

-  public instance: SimpleGeometry;
-  public componentType = 'simple-geometry';
+  instance: SimpleGeometry;
+  componentType = 'simple-geometry';

-  protected constructor(
-    protected map: MapComponent,
-    protected host: FeatureComponent
-  ) {}
+  protected readonly map = inject(MapComponent);
+  protected readonly host = inject(FeatureComponent);

-  ngOnInit() {
+  ngOnInit(): void {
    this.host.instance.setGeometry(this.instance);
  }
 }
--- a/projects/ng-openlayers/src/lib/graticule.component.ts
+++ b/projects/ng-openlayers/src/lib/graticule.component.ts
@@ -1,14 +1,17 @@
-import { Component, Input, AfterContentInit, OnChanges, SimpleChanges, OnDestroy } from '@angular/core';
+import { AfterContentInit, Component, Input, OnChanges, OnDestroy, SimpleChanges, inject } from '@angular/core';
 import { Graticule } from 'ol';
 import { Stroke } from 'ol/style';
 import { MapComponent } from './map.component';
+import { Options } from 'ol/layer/Graticule';

@Component({
-    selector: 'aol-graticule',
-    template: '<ng-content></ng-content>',
-    standalone: false
+  selector: 'aol-graticule',
+  template: '<ng-content></ng-content>',
+  standalone: true,
 })
 export class GraticuleComponent implements AfterContentInit, OnChanges, OnDestroy {
+  private map = inject(MapComponent);
+
  @Input()
  strokeStyle: Stroke;
  @Input()
@@ -18,24 +21,17 @@ export class GraticuleComponent implements AfterContentInit, OnChanges, OnDestro
  @Input()
  latLabelPosition: number;

-  instance: any;
-  public componentType = 'graticule';
-
-  constructor(private map: MapComponent) {}
-
-  ngOnChanges(changes: SimpleChanges) {
-    const properties: { [index: string]: any } = {};
+  instance: Graticule;
+  componentType = 'graticule';

+  ngOnChanges(changes: SimpleChanges): void {
    if (!this.instance) {
      return;
    }
-
+    const properties: Options = {};
    for (const key in changes) {
-      if (changes.hasOwnProperty(key)) {
-        properties[key] = changes[key].currentValue;
-      }
+      properties[key] = changes[key].currentValue;
    }
-
    if (properties) {
      this.instance = new Graticule(properties);
    }
--- a/projects/ng-openlayers/src/lib/interactions/default.component.ts
+++ b/projects/ng-openlayers/src/lib/interactions/default.component.ts
@@ -1,47 +1,24 @@
-import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { Component, OnDestroy, OnInit, inject } from '@angular/core';
 import { defaults, Interaction } from 'ol/interaction';
 import { Collection } from 'ol';
 import { MapComponent } from '../map.component';

@Component({
-    selector: 'aol-interaction-default',
-    template: '',
-    standalone: false
+  selector: 'aol-interaction-default',
+  template: '',
+  standalone: true,
 })
 export class DefaultInteractionComponent implements OnInit, OnDestroy {
-  @Input()
-  altShiftDragRotate: boolean;
-  @Input()
-  onFocusOnly: boolean;
-  @Input()
-  doubleClickZoom: boolean;
-  @Input()
-  keyboard: boolean;
-  @Input()
-  mouseWheelZoom: boolean;
-  @Input()
-  shiftDragZoom: boolean;
-  @Input()
-  dragPan: boolean;
-  @Input()
-  pinchRotate: boolean;
-  @Input()
-  pinchZoom: boolean;
-  @Input()
-  zoomDelta: number;
-  @Input()
-  zoomDuration: number;
+  private map = inject(MapComponent);

  instance: Collection<Interaction>;

-  constructor(private map: MapComponent) {}
-
-  ngOnInit() {
-    this.instance = defaults(this);
+  ngOnInit(): void {
+    this.instance = defaults();
    this.instance.forEach((i) => this.map.instance.addInteraction(i));
  }

-  ngOnDestroy() {
+  ngOnDestroy(): void {
    this.instance.forEach((i) => this.map.instance.removeInteraction(i));
  }
 }
--- a/projects/ng-openlayers/src/lib/interactions/doubleclickzoom.component.ts
+++ b/projects/ng-openlayers/src/lib/interactions/doubleclickzoom.component.ts
@@ -1,13 +1,15 @@
-import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { Component, Input, OnDestroy, OnInit, inject } from '@angular/core';
 import { DoubleClickZoom } from 'ol/interaction';
 import { MapComponent } from '../map.component';

@Component({
-    selector: 'aol-interaction-doubleclickzoom',
-    template: '',
-    standalone: false
+  selector: 'aol-interaction-doubleclickzoom',
+  template: '',
+  standalone: true,
 })
 export class DoubleClickZoomInteractionComponent implements OnInit, OnDestroy {
+  private map = inject(MapComponent);
+
  @Input()
  duration: number;
  @Input()
@@ -15,14 +17,12 @@ export class DoubleClickZoomInteractionComponent implements OnInit, OnDestroy {

  instance: DoubleClickZoom;

-  constructor(private map: MapComponent) {}
-
-  ngOnInit() {
+  ngOnInit(): void {
    this.instance = new DoubleClickZoom(this);
    this.map.instance.addInteraction(this.instance);
  }

-  ngOnDestroy() {
+  ngOnDestroy(): void {
    this.map.instance.removeInteraction(this.instance);
  }
 }
--- a/projects/ng-openlayers/src/lib/interactions/draganddrop.component.ts
+++ b/projects/ng-openlayers/src/lib/interactions/draganddrop.component.ts
@@ -1,15 +1,17 @@
-import { Component, Input, OnDestroy, OnInit } from '@angular/core';
-import { DragAndDrop } from 'ol/interaction';
+import { Component, Input, OnDestroy, OnInit, inject } from '@angular/core';
 import FeatureFormat from 'ol/format/Feature';
-import { MapComponent } from '../map.component';
+import { DragAndDrop } from 'ol/interaction';
 import { ProjectionLike } from 'ol/proj';
+import { MapComponent } from '../map.component';

@Component({
-    selector: 'aol-interaction-draganddrop',
-    template: '',
-    standalone: false
+  selector: 'aol-interaction-draganddrop',
+  template: '',
+  standalone: true,
 })
 export class DragAndDropInteractionComponent implements OnInit, OnDestroy {
+  private map = inject(MapComponent);
+
  @Input()
  formatConstructors: FeatureFormat[];
  @Input()
@@ -19,14 +21,12 @@ export class DragAndDropInteractionComponent implements OnInit, OnDestroy {

  instance: DragAndDrop;

-  constructor(private map: MapComponent) {}
-
-  ngOnInit() {
+  ngOnInit(): void {
    this.instance = new DragAndDrop(this);
    this.map.instance.addInteraction(this.instance);
  }

-  ngOnDestroy() {
+  ngOnDestroy(): void {
    this.map.instance.removeInteraction(this.instance);
  }
 }
--- a/projects/ng-openlayers/src/lib/interactions/dragbox.component.ts
+++ b/projects/ng-openlayers/src/lib/interactions/dragbox.component.ts
@@ -1,15 +1,17 @@
-import { Component, OnDestroy, OnInit, Input } from '@angular/core';
-import { DragBox } from 'ol/interaction';
-import { MapComponent } from '../map.component';
+import { Component, Input, OnDestroy, OnInit, inject } from '@angular/core';
 import { Condition } from 'ol/events/condition';
+import { DragBox } from 'ol/interaction';
 import { EndCondition } from 'ol/interaction/DragBox';
+import { MapComponent } from '../map.component';

@Component({
-    selector: 'aol-interaction-dragbox',
-    template: '',
-    standalone: false
+  selector: 'aol-interaction-dragbox',
+  template: '',
+  standalone: true,
 })
 export class DragBoxInteractionComponent implements OnInit, OnDestroy {
+  private map = inject(MapComponent);
+
  @Input()
  className: string;
  @Input()
@@ -19,14 +21,12 @@ export class DragBoxInteractionComponent implements OnInit, OnDestroy {

  instance: DragBox;

-  constructor(private map: MapComponent) {}
-
-  ngOnInit() {
+  ngOnInit(): void {
    this.instance = new DragBox(this);
    this.map.instance.addInteraction(this.instance);
  }

-  ngOnDestroy() {
+  ngOnDestroy(): void {
    this.map.instance.removeInteraction(this.instance);
  }
 }
--- a/projects/ng-openlayers/src/lib/interactions/dragpan.component.ts
+++ b/projects/ng-openlayers/src/lib/interactions/dragpan.component.ts
@@ -1,15 +1,17 @@
-import { Component, OnDestroy, OnInit, Input } from '@angular/core';
-import { DragPan } from 'ol/interaction';
+import { Component, Input, OnDestroy, OnInit, inject } from '@angular/core';
 import Kinetic from 'ol/Kinetic';
-import { MapComponent } from '../map.component';
 import { Condition } from 'ol/events/condition';
+import { DragPan } from 'ol/interaction';
+import { MapComponent } from '../map.component';

@Component({
-    selector: 'aol-interaction-dragpan',
-    template: '',
-    standalone: false
+  selector: 'aol-interaction-dragpan',
+  template: '',
+  standalone: true,
 })
 export class DragPanInteractionComponent implements OnInit, OnDestroy {
+  private map = inject(MapComponent);
+
  @Input()
  condition: Condition;
  @Input()
@@ -17,14 +19,12 @@ export class DragPanInteractionComponent implements OnInit, OnDestroy {

  instance: DragPan;

-  constructor(private map: MapComponent) {}
-
-  ngOnInit() {
+  ngOnInit(): void {
    this.instance = new DragPan(this);
    this.map.instance.addInteraction(this.instance);
  }

-  ngOnDestroy() {
+  ngOnDestroy(): void {
    this.map.instance.removeInteraction(this.instance);
  }
 }
--- a/projects/ng-openlayers/src/lib/interactions/dragrotate.component.ts
+++ b/projects/ng-openlayers/src/lib/interactions/dragrotate.component.ts
@@ -1,14 +1,16 @@
-import { Component, OnDestroy, OnInit, Input } from '@angular/core';
+import { Component, Input, OnDestroy, OnInit, inject } from '@angular/core';
+import { Condition } from 'ol/events/condition';
 import { DragRotate } from 'ol/interaction';
 import { MapComponent } from '../map.component';
-import { Condition } from 'ol/events/condition';

@Component({
-    selector: 'aol-interaction-dragrotate',
-    template: '',
-    standalone: false
+  selector: 'aol-interaction-dragrotate',
+  template: '',
+  standalone: true,
 })
 export class DragRotateInteractionComponent implements OnInit, OnDestroy {
+  private map = inject(MapComponent);
+
  @Input()
  condition: Condition;
  @Input()
@@ -16,14 +18,12 @@ export class DragRotateInteractionComponent implements OnInit, OnDestroy {

  instance: DragRotate;

-  constructor(private map: MapComponent) {}
-
-  ngOnInit() {
+  ngOnInit(): void {
    this.instance = new DragRotate(this);
    this.map.instance.addInteraction(this.instance);
  }

-  ngOnDestroy() {
+  ngOnDestroy(): void {
    this.map.instance.removeInteraction(this.instance);
  }
 }
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Peter Bastiani	07e7282614	AW-6526 update angular 21 Some checks failed FarmMaps.Develop/FarmMapsLib/pipeline/head There was a failure building this commit Details	2026-01-19 18:25:47 +01:00
Peter Bastiani	c33d8fc201	AW-6526 update angular 21 Some checks failed FarmMaps.Develop/FarmMapsLib/pipeline/head There was a failure building this commit Details	2026-01-19 14:36:49 +01:00
Peter Bastiani	a0f9f0b03d	AW-6526 update angular 21 Some checks failed FarmMaps.Develop/FarmMapsLib/pipeline/head There was a failure building this commit Details	2026-01-19 14:13:57 +01:00
Peter Bastiani	2e2b37e493	AW-6526 update angular 21 Some checks failed FarmMaps.Develop/FarmMapsLib/pipeline/head There was a failure building this commit Details	2026-01-19 13:56:07 +01:00
Peter Bastiani	f9463f64c3	AW-6526 update angular 21 Some checks failed FarmMaps.Develop/FarmMapsLib/pipeline/head There was a failure building this commit Details	2026-01-19 13:43:12 +01:00
Peter Bastiani	f66d199e75	AW-6526 update angular 21 Some checks failed FarmMaps.Develop/FarmMapsLib/pipeline/head There was a failure building this commit Details	2026-01-19 13:35:27 +01:00
Peter Bastiani	c46dac7572	AW-6526 update angular 21 Some checks failed FarmMaps.Develop/FarmMapsLib/pipeline/head There was a failure building this commit Details	2026-01-19 13:24:57 +01:00
Peter Bastiani	c3f2cbcedc	AW-6526 update angular 21 Some checks failed FarmMaps.Develop/FarmMapsLib/pipeline/head There was a failure building this commit Details	2026-01-19 12:27:21 +01:00
Peter Bastiani	9cc581dd3d	AW-6526 update angular 21 Some checks failed FarmMaps.Develop/FarmMapsLib/pipeline/head There was a failure building this commit Details	2026-01-19 12:19:09 +01:00
Peter Bastiani	c35114b2d3	@angular-eslint/eslint-plugin	2026-01-19 10:54:37 +01:00
Peter Bastiani	e03aacbcd7	ng update @angular/core@21 @angular/cli@21	2026-01-19 10:49:33 +01:00
Peter Bastiani	f59e482f58	ng update @angular/core@20 @angular/cli@20	2026-01-19 10:45:06 +01:00
Peter Bastiani	6a1e6f6495	AW-6526 ng update @angular/core@19 @angular/cli@19	2026-01-19 10:38:27 +01:00
Peter Bastiani	70a86d195f	AW-6526 ng update @angular/core@19 @angular/cli@19	2026-01-19 10:35:53 +01:00
Peter Bastiani	8d5412e643	AW-6526 ng update @angular/core@19 @angular/cli@19	2026-01-19 10:15:18 +01:00