AW-6046 Angular 17

.gitignore

@@ -51,5 +51,5 @@ projects/common-map/node_modules/
 .angular/*
 projects/common-map3d/node_modules/
 projects/common-map/node_modules/
-projects/ngx-openlayers/node_modules/
+projects/ng-openlayers/node_modules/
 projects/common/node_modules/

Jenkinsfile.develop

@@ -21,4 +21,4 @@ pipeline {
       postAlways();
     }
   }
-}
+}c

angular.json

@@ -254,38 +254,38 @@
         }
       }
     },
-    "ngx-openlayers": {
+    "ng-openlayers": {
       "projectType": "library",
-      "root": "projects/ngx-openlayers",
-      "sourceRoot": "projects/ngx-openlayers/src",
+      "root": "projects/ng-openlayers",
+      "sourceRoot": "projects/ng-openlayers/src",
       "prefix": "lib",
       "architect": {
         "build": {
           "builder": "@angular-devkit/build-angular:ng-packagr",
           "options": {
-            "tsConfig": "projects/ngx-openlayers/tsconfig.lib.json",
-            "project": "projects/ngx-openlayers/ng-package.json"
+            "tsConfig": "projects/ng-openlayers/tsconfig.lib.json",
+            "project": "projects/ng-openlayers/ng-package.json"
           },
           "configurations": {
             "production": {
-              "tsConfig": "projects/ngx-openlayers/tsconfig.lib.prod.json"
+              "tsConfig": "projects/ng-openlayers/tsconfig.lib.prod.json"
             }
           }
         },
         "test": {
           "builder": "@angular-devkit/build-angular:karma",
           "options": {
-            "main": "projects/ngx-openlayers/src/test.ts",
-            "tsConfig": "projects/ngx-openlayers/tsconfig.spec.json",
-            "karmaConfig": "projects/ngx-openlayers/karma.conf.js"
+            "main": "projects/ng-openlayers/src/test.ts",
+            "tsConfig": "projects/ng-openlayers/tsconfig.spec.json",
+            "karmaConfig": "projects/ng-openlayers/karma.conf.js"
           }
         },
         "lint": {
           "builder": "@angular-eslint/builder:lint",
           "options": {
             "lintFilePatterns": [
-              "projects/ngx-openlayers/**/*.ts",
-              "projects/ngx-openlayers/**/*.html"
+              "projects/ng-openlayers/**/*.ts",
+              "projects/ng-openlayers/**/*.html"
             ]
           }
         }

package.json

@@ -23,7 +23,7 @@
     "@farmmaps/common": "file:dist/common",
     "@farmmaps/common-map": "file:dist/common-map",
     "@farmmaps/common-map3d": "file:dist/common-map3d",
-    "ngx-openlayers": "file:dist/ngx-openlayers",
+    "ng-openlayers": "file:dist/ng-openlayers",
     "@microsoft/signalr": "^3.1.16",
     "@ng-bootstrap/ng-bootstrap": "^15.0.0",
     "@ngrx/effects": "^16",

projects/common-map/src/fm-map/common-map.module.ts

@@ -3,7 +3,7 @@ import { CommonModule } from '@angular/common';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
 //external modules
-import { AngularOpenlayersModule } from 'ngx-openlayers';
+import { AngularOpenlayersModule } from 'ng-openlayers';
 import { StoreModule, ActionReducer, MetaReducer } from '@ngrx/store';
 import { EffectsModule } from '@ngrx/effects';
 import { NgbModule } from "@ng-bootstrap/ng-bootstrap";
@@ -169,119 +169,119 @@ export {
   GeometryThumbnailComponent
 }
 
-@NgModule({
-    imports: [
-        CommonModule,
-        AngularOpenlayersModule,
-        MapRoutingModule,
-        StoreModule.forFeature(MODULE_NAME, mapReducers.reducer, { metaReducers: metaReducers }),
-        EffectsModule.forFeature([mapEffects.MapEffects]),
-        NgbModule,
-        FormsModule,
-        ReactiveFormsModule,
-        AppCommonModule
-    ],
-    declarations: [
-        ZoomToExtentComponent,
-        ItemVectorSourceComponent,
-        ItemLayersComponent,
-        FileDropTargetComponent,
-        MapComponent,
-        MetaDataModalComponent,
-        RotationResetComponent,
-        MapSearchComponent,
-        SelectPeriodModalComponent,
-        LayerListComponent,
-        LegendComponent,
-        LayerVectorImageComponent,
-        FeatureListComponent,
-        WidgetHostDirective,
-        FeatureListContainerComponent,
-        FeatureListCroppingschemeComponent,
-        FeatureListCropfieldComponent,
-        FeatureListFeatureContainerComponent,
-        FeatureListFeatureComponent,
-        FeatureListFeatureCroppingschemeComponent,
-        FeatureListFeatureCropfieldComponent,
-        SelectedItemContainerComponent,
-        SelectedItemComponent,
-        SelectedItemCropfieldComponent,
-        SelectedItemGeotiffComponent,
-        SelectedItemTemporalComponent,
-        SelectedItemShapeComponent,
-        ItemListItemComponent,
-        ItemListItemContainerComponent,
-        ItemListComponent,
-        ItemWidgetListComponent,
-        WidgetStatusComponent,
-        GpsLocation,
-        PanToLocation,
-        LayerSwitcher,
-        HistogramDetailsComponent,
-        StatisticsDetailsComponent,
-        ifZoomToShowDirective,
-        ZoomToShowAlert,
-        LayerValuesComponent,
-        GeometryThumbnailComponent
-    ],
-    exports: [
-        ItemVectorSourceComponent,
-        ItemLayersComponent,
-        FileDropTargetComponent,
-        MetaDataModalComponent,
-        MapComponent,
-        GpsLocation,
-        PanToLocation,
-        LayerSwitcher,
-        FeatureListFeatureComponent,
-        FeatureListFeatureCropfieldComponent,
-        FeatureListFeatureCroppingschemeComponent,
-        SelectedItemContainerComponent,
-        SelectedItemComponent,
-        SelectedItemCropfieldComponent,
-        SelectedItemGeotiffComponent,
-        SelectedItemTemporalComponent,
-        SelectedItemShapeComponent,
-        ItemListItemComponent,
-        ItemListItemContainerComponent,
-        ItemListComponent,
-        ItemWidgetListComponent,
-        WidgetStatusComponent,
-        RotationResetComponent,
-        MapSearchComponent,
-        SelectPeriodModalComponent,
-        LayerListComponent,
-        LegendComponent,
-        LayerVectorImageComponent,
-        FeatureListComponent,
-        WidgetHostDirective,
-        FeatureListContainerComponent,
-        FeatureListCroppingschemeComponent,
-        FeatureListCropfieldComponent,
-        FeatureListFeatureContainerComponent,
-        ZoomToExtentComponent,
-        ifZoomToShowDirective,
-        ZoomToShowAlert,
-        GeometryThumbnailComponent
-    ],
-    providers: [
-        FeatureIconService,
-        GeolocationService,
-        DeviceOrientationService,
-        TemporalService,
-        { provide: AbstractFeatureListComponent, useClass: FeatureListCroppingschemeComponent, multi: true },
-        { provide: AbstractFeatureListComponent, useClass: FeatureListCropfieldComponent, multi: true },
-        { provide: AbstractFeatureListFeatureComponent, useClass: FeatureListFeatureComponent, multi: true },
-        { provide: AbstractFeatureListFeatureComponent, useClass: FeatureListFeatureCroppingschemeComponent, multi: true },
-        { provide: AbstractFeatureListFeatureComponent, useClass: FeatureListFeatureCropfieldComponent, multi: true },
-        { provide: AbstractSelectedItemComponent, useClass: SelectedItemComponent, multi: true },
-        { provide: AbstractSelectedItemComponent, useClass: SelectedItemCropfieldComponent, multi: true },
-        { provide: AbstractSelectedItemComponent, useClass: SelectedItemGeotiffComponent, multi: true },
-        { provide: AbstractSelectedItemComponent, useClass: SelectedItemTemporalComponent, multi: true },
-        { provide: AbstractSelectedItemComponent, useClass: SelectedItemShapeComponent, multi: true },
-        { provide: AbstractItemListItemComponent, useClass: ItemListItemComponent, multi: true },
-        { provide: AbstractItemListComponent, useClass: ItemListComponent, multi: true }
-    ]
+@NgModule({
+    imports: [
+        CommonModule,
+        AngularOpenlayersModule,
+        MapRoutingModule,
+        StoreModule.forFeature(MODULE_NAME, mapReducers.reducer, { metaReducers: metaReducers }),
+        EffectsModule.forFeature([mapEffects.MapEffects]),
+        NgbModule,
+        FormsModule,
+        ReactiveFormsModule,
+        AppCommonModule
+    ],
+    declarations: [
+        ZoomToExtentComponent,
+        ItemVectorSourceComponent,
+        ItemLayersComponent,
+        FileDropTargetComponent,
+        MapComponent,
+        MetaDataModalComponent,
+        RotationResetComponent,
+        MapSearchComponent,
+        SelectPeriodModalComponent,
+        LayerListComponent,
+        LegendComponent,
+        LayerVectorImageComponent,
+        FeatureListComponent,
+        WidgetHostDirective,
+        FeatureListContainerComponent,
+        FeatureListCroppingschemeComponent,
+        FeatureListCropfieldComponent,
+        FeatureListFeatureContainerComponent,
+        FeatureListFeatureComponent,
+        FeatureListFeatureCroppingschemeComponent,
+        FeatureListFeatureCropfieldComponent,
+        SelectedItemContainerComponent,
+        SelectedItemComponent,
+        SelectedItemCropfieldComponent,
+        SelectedItemGeotiffComponent,
+        SelectedItemTemporalComponent,
+        SelectedItemShapeComponent,
+        ItemListItemComponent,
+        ItemListItemContainerComponent,
+        ItemListComponent,
+        ItemWidgetListComponent,
+        WidgetStatusComponent,
+        GpsLocation,
+        PanToLocation,
+        LayerSwitcher,
+        HistogramDetailsComponent,
+        StatisticsDetailsComponent,
+        ifZoomToShowDirective,
+        ZoomToShowAlert,
+        LayerValuesComponent,
+        GeometryThumbnailComponent
+    ],
+    exports: [
+        ItemVectorSourceComponent,
+        ItemLayersComponent,
+        FileDropTargetComponent,
+        MetaDataModalComponent,
+        MapComponent,
+        GpsLocation,
+        PanToLocation,
+        LayerSwitcher,
+        FeatureListFeatureComponent,
+        FeatureListFeatureCropfieldComponent,
+        FeatureListFeatureCroppingschemeComponent,
+        SelectedItemContainerComponent,
+        SelectedItemComponent,
+        SelectedItemCropfieldComponent,
+        SelectedItemGeotiffComponent,
+        SelectedItemTemporalComponent,
+        SelectedItemShapeComponent,
+        ItemListItemComponent,
+        ItemListItemContainerComponent,
+        ItemListComponent,
+        ItemWidgetListComponent,
+        WidgetStatusComponent,
+        RotationResetComponent,
+        MapSearchComponent,
+        SelectPeriodModalComponent,
+        LayerListComponent,
+        LegendComponent,
+        LayerVectorImageComponent,
+        FeatureListComponent,
+        WidgetHostDirective,
+        FeatureListContainerComponent,
+        FeatureListCroppingschemeComponent,
+        FeatureListCropfieldComponent,
+        FeatureListFeatureContainerComponent,
+        ZoomToExtentComponent,
+        ifZoomToShowDirective,
+        ZoomToShowAlert,
+        GeometryThumbnailComponent
+    ],
+    providers: [
+        FeatureIconService,
+        GeolocationService,
+        DeviceOrientationService,
+        TemporalService,
+        { provide: AbstractFeatureListComponent, useClass: FeatureListCroppingschemeComponent, multi: true },
+        { provide: AbstractFeatureListComponent, useClass: FeatureListCropfieldComponent, multi: true },
+        { provide: AbstractFeatureListFeatureComponent, useClass: FeatureListFeatureComponent, multi: true },
+        { provide: AbstractFeatureListFeatureComponent, useClass: FeatureListFeatureCroppingschemeComponent, multi: true },
+        { provide: AbstractFeatureListFeatureComponent, useClass: FeatureListFeatureCropfieldComponent, multi: true },
+        { provide: AbstractSelectedItemComponent, useClass: SelectedItemComponent, multi: true },
+        { provide: AbstractSelectedItemComponent, useClass: SelectedItemCropfieldComponent, multi: true },
+        { provide: AbstractSelectedItemComponent, useClass: SelectedItemGeotiffComponent, multi: true },
+        { provide: AbstractSelectedItemComponent, useClass: SelectedItemTemporalComponent, multi: true },
+        { provide: AbstractSelectedItemComponent, useClass: SelectedItemShapeComponent, multi: true },
+        { provide: AbstractItemListItemComponent, useClass: ItemListItemComponent, multi: true },
+        { provide: AbstractItemListComponent, useClass: ItemListComponent, multi: true }
+    ]
 })
 
 

projects/common-map/src/fm-map/components/aol/file-drop-target/file-drop-target.component.ts

@@ -1,5 +1,5 @@
 import { Component, Input, OnDestroy, OnInit, EventEmitter, Output, Inject } from '@angular/core';
-import { MapComponent } from 'ngx-openlayers';
+import { MapComponent } from 'ng-openlayers';
 
 import * as proj  from 'ol/proj';
 import {Point,Geometry} from 'ol/geom';

projects/common-map/src/fm-map/components/aol/gps-location/gps-location.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit, Input, ViewChild, ElementRef, OnChanges, SimpleChanges ,Host} from '@angular/core';
-import { MapComponent } from 'ngx-openlayers';
+import { MapComponent } from 'ng-openlayers';
 import  Overlay  from 'ol/Overlay';
 import { fromLonLat, toLonLat } from 'ol/proj';
 

projects/common-map/src/fm-map/components/aol/item-layers/item-layers.component.ts

@@ -1,5 +1,5 @@
 import { Component, Host, Input, Output, EventEmitter,OnDestroy, OnInit, OnChanges, SimpleChanges, forwardRef } from '@angular/core';
-import { LayerGroupComponent, MapComponent } from 'ngx-openlayers';
+import { LayerGroupComponent, MapComponent } from 'ng-openlayers';
 import { ItemService,IItem,AppConfig } from '@farmmaps/common';
 import { IItemLayer, ITemporalItemLayer} from '../../../models/item.layer';
 import { ILayerData} from '../../../models/layer.data';

projects/common-map/src/fm-map/components/aol/item-vector-source/item-vector-source.component.ts

@@ -1,5 +1,5 @@
 import { Component, Host, Input, Output, EventEmitter, OnInit, OnChanges, SimpleChanges, forwardRef, Inject, InjectionToken, OnDestroy, LOCALE_ID } from '@angular/core';
-import { LayerVectorComponent, SourceVectorComponent, MapComponent } from 'ngx-openlayers';
+import { LayerVectorComponent, SourceVectorComponent, MapComponent } from 'ng-openlayers';
 import { ItemService, ItemTypeService, IItem, IItemType, FolderService } from '@farmmaps/common';
 
 import { Feature } from 'ol';

projects/common-map/src/fm-map/components/aol/layer-values/layer-values.component.ts

@@ -3,7 +3,7 @@ import { IItemLayer } from '../../../models/item.layer';
 import { Store } from '@ngrx/store';
 import * as mapReducers from '../../../reducers/map.reducer';
 import * as mapActions from '../../../actions/map.actions';
-import { MapComponent } from 'ngx-openlayers';
+import { MapComponent } from 'ng-openlayers';
 import { ILayervalue } from '../../../models/layer.value';
 import { Observable, interval, Subject } from 'rxjs';
 import { debounce, throttle } from 'rxjs/operators';

projects/common-map/src/fm-map/components/aol/layer-vector-image/layer-vector-image.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnDestroy, OnInit, Input, OnChanges, SimpleChanges } from '@angular/core';
-import { LayerVectorComponent, MapComponent } from 'ngx-openlayers';
+import { LayerVectorComponent, MapComponent } from 'ng-openlayers';
 import  RenderType  from 'ol/layer/Vector';
 import { Vector as VectorSource } from 'ol/source';
 import { Geometry } from 'ol/geom';

projects/common-map/src/fm-map/components/aol/pan-to-location/pan-to-location.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit, Input, Host, OnChanges, SimpleChanges,ChangeDetectorRef } from '@angular/core';
-import { MapComponent } from 'ngx-openlayers';
+import { MapComponent } from 'ng-openlayers';
 import {IMapState} from '../../../models/map.state'
 import {View} from 'ol';
 import { fromLonLat } from 'ol/proj';

projects/common-map/src/fm-map/components/aol/rotation-reset/rotation-reset.component.ts

@@ -1,5 +1,5 @@
 import { Component, Host, Input, OnInit, ChangeDetectorRef  } from '@angular/core';
-import { ViewComponent, MapComponent } from 'ngx-openlayers';
+import { ViewComponent, MapComponent } from 'ng-openlayers';
 
 import {View} from 'ol';
 

projects/common-map/src/fm-map/components/aol/zoom-to-extent/zoom-to-extent.component.ts

@@ -1,6 +1,6 @@
 import { Component, Host, Input, OnInit, OnChanges, SimpleChanges, forwardRef } from '@angular/core';
 import { ActivatedRoute  } from '@angular/router';
-import { ViewComponent, MapComponent } from 'ngx-openlayers';
+import { ViewComponent, MapComponent } from 'ng-openlayers';
 
  
 @Component({

projects/common-map/src/fm-map/components/if-zoom-to-show/if-zoom-to-show.directive.ts

@@ -1,7 +1,7 @@
 import { Directive, ViewContainerRef,TemplateRef,OnInit,Input, OnChanges } from '@angular/core';
 import { Layer } from 'ol/layer';
 import { Source } from 'ol/source';
-import { MapComponent } from 'ngx-openlayers';
+import { MapComponent } from 'ng-openlayers';
 
 @Directive({
   selector: '[fmMapIfZoomToShow]',

projects/common-map3d/src/fm-map3d/components/olcs/switch2d3d/switch2d3d.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit,Input,Host  } from '@angular/core';
 import { Interaction} from 'ol/interaction';
-import { MapComponent } from 'ngx-openlayers';
+import { MapComponent } from 'ng-openlayers';
 import OLCesium from 'olcs/OLCesium';
 import RasterSynchronizer from 'olcs/RasterSynchronizer';
 import VectorSynchronizer from 'olcs/VectorSynchronizer';

projects/ng-openlayers/.eslintrc.json

@@ -10,8 +10,7 @@
       ],
       "parserOptions": {
         "project": [
-          "projects/ngx-openlayers/tsconfig.lib.json",
-          "projects/ngx-openlayers/tsconfig.spec.json"
+          "libs/ng-openlayers/tsconfig.*?.json"
         ],
         "createDefaultProgram": true
       },
@@ -42,8 +41,7 @@
           "off",
           "always"
         ],
-        "import/order": "off",
-        "no-underscore-dangle": "off"
+        "import/order": "off"
       }
     },
     {

projects/ng-openlayers/.gitignore

@@ -0,0 +1,2 @@
+/node_modules
+

projects/ng-openlayers/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/ng-openlayers'),
+      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,
+  });
+};

projects/ng-openlayers/ng-package.json

@@ -1,6 +1,6 @@
 {
   "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
-  "dest": "../../dist/ngx-openlayers",
+  "dest": "../../dist/libs/ng-openlayers",
   "assets": [
     "ngcc.config.js"
   ],

projects/ng-openlayers/ngcc.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  ignorableDeepImportMatchers: [/ol\//],
+};

projects/ng-openlayers/package-lock.json

@@ -0,0 +1,33 @@
+{
+  "name": "ng-openlayers",
+  "version": "17.1.3",
+  "lockfileVersion": 2,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "ng-openlayers",
+      "version": "17.1.3",
+      "license": "MPL-2.0",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "peerDependencies": {
+        "@angular/common": ">=17.0.0",
+        "@angular/core": ">=17.0.0",
+        "ol": "^8.2.0"
+      }
+    },
+    "node_modules/tslib": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
+      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
+    }
+  },
+  "dependencies": {
+    "tslib": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
+      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
+    }
+  }
+}

projects/ng-openlayers/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "ng-openlayers",
+  "version": "17.1.3",
+  "description": "OpenLayers library for Angular",
+  "author": "Kamil Furtak (kamil.furtak@gmail.com)",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/kamilfurtak/ng-openlayers.git"
+  },
+  "bugs": {
+    "url": "https://github.com/kamilfurtak/ng-openlayers/issues"
+  },
+  "homepage": "https://github.com/kamilfurtak/ng-openlayers",
+  "keywords": [
+    "ngx-openlayers",
+    "angular",
+    "angular17",
+    "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": ">=17.0.0",
+    "@angular/core": ">=17.0.0",
+    "ol": "^8.2.0"
+  }
+}

projects/ng-openlayers/project.json

@@ -0,0 +1,38 @@
+{
+  "name": "ng-openlayers",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "projectType": "library",
+  "sourceRoot": "libs/ng-openlayers/src",
+  "prefix": "lib",
+  "targets": {
+    "build": {
+      "executor": "@nx/angular:package",
+      "options": {
+        "tsConfig": "libs/ng-openlayers/tsconfig.lib.json",
+        "project": "libs/ng-openlayers/ng-package.json"
+      },
+      "configurations": {
+        "production": {
+          "tsConfig": "libs/ng-openlayers/tsconfig.lib.prod.json"
+        }
+      }
+    },
+    "test": {
+      "executor": "@angular-devkit/build-angular:karma",
+      "options": {
+        "main": "libs/ng-openlayers/src/test.ts",
+        "tsConfig": "libs/ng-openlayers/tsconfig.spec.json",
+        "karmaConfig": "libs/ng-openlayers/karma.conf.js"
+      }
+    },
+    "lint": {
+      "executor": "@nx/eslint:lint",
+      "options": {
+        "lintFilePatterns": [
+          "libs/ng-openlayers/**/*.ts",
+          "libs/ng-openlayers/**/*.html"
+        ]
+      }
+    }
+  }
+}

projects/ng-openlayers/src/lib/attribution.component.ts

@@ -1,18 +1,15 @@
 import { Component, ElementRef, OnInit } from '@angular/core';
-import { Attribution } from 'ol/control';
 
 @Component({
   selector: 'aol-attribution',
   template: '<ng-content></ng-content>',
 })
 export class AttributionComponent implements OnInit {
-  instance: Attribution;
-  html: string;
+  label: string;
 
   constructor(private elementRef: ElementRef) {}
 
   ngOnInit() {
-    this.html = this.elementRef.nativeElement.innerHTML;
-    this.instance = new Attribution(this);
+    this.label = this.elementRef.nativeElement.innerHTML;
   }
 }

projects/ng-openlayers/src/lib/attributions.component.ts

@@ -1,7 +1,6 @@
 import { AfterViewInit, Component, ContentChildren, Host, QueryList } from '@angular/core';
-import { Attribution } from 'ol/control';
-import { AttributionComponent } from './attribution.component';
 import { SourceComponent } from './sources/source.component';
+import { AttributionComponent } from './attribution.component';
 
 @Component({
   selector: 'aol-attributions',
@@ -11,14 +10,14 @@ export class AttributionsComponent implements AfterViewInit {
   @ContentChildren(AttributionComponent)
   attributions: QueryList<AttributionComponent>;
 
-  instance: Array<Attribution>;
+  instance: Array<string>;
 
   constructor(@Host() private source: SourceComponent) {}
 
   /* we can do this at the very end */
   ngAfterViewInit() {
     if (this.attributions.length) {
-      this.instance = this.attributions.map((cmp) => cmp.instance);
+      this.instance = this.attributions.map((cmp) => cmp.label);
       // console.log('setting attributions:', this.instance);
       this.source.instance.setAttributions(this.instance);
     }

projects/ng-openlayers/src/lib/collectioncoordinates.component.ts

@@ -1,12 +1,12 @@
 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 { 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',

projects/ng-openlayers/src/lib/controls/attribution.component.ts

@@ -10,11 +10,14 @@ export class ControlAttributionComponent implements OnInit, OnDestroy {
   @Input()
   collapsible: boolean;
 
-  componentType = 'control';
+  public componentType = 'control';
   instance: Attribution;
-  target: Element;
+  target: HTMLElement;
 
-  constructor(private map: MapComponent, private element: ElementRef) {}
+  constructor(
+    private map: MapComponent,
+    private element: ElementRef
+  ) {}
 
   ngOnInit() {
     this.target = this.element.nativeElement;

projects/ng-openlayers/src/lib/controls/control.component.ts

@@ -1,7 +1,7 @@
 import { Component, ContentChild, OnDestroy, OnInit } from '@angular/core';
 import { Control } from 'ol/control';
-import { ContentComponent } from '../content.component';
 import { MapComponent } from '../map.component';
+import { ContentComponent } from '../content.component';
 
 @Component({
   selector: 'aol-control',
@@ -11,9 +11,9 @@ export class ControlComponent implements OnInit, OnDestroy {
   @ContentChild(ContentComponent, { static: true })
   content: ContentComponent;
 
-  componentType = 'control';
+  public componentType = 'control';
   instance: Control;
-  element: Element;
+  element: HTMLElement;
 
   constructor(private map: MapComponent) {}
 

projects/ng-openlayers/src/lib/controls/default.component.ts

@@ -1,6 +1,6 @@
-import { Component, Input, OnDestroy, OnInit } from '@angular/core';
-import { Collection } from 'ol';
+import { Component, OnDestroy, OnInit, Input } from '@angular/core';
 import { Control, defaults } from 'ol/control';
+import { Collection } from 'ol';
 import { Options as AttributionOptions } from 'ol/control/Attribution';
 import { Options as RotateOptions } from 'ol/control/Rotate';
 import { Options as ZoomOptions } from 'ol/control/Zoom';

projects/ng-openlayers/src/lib/controls/mouseposition.component.ts

@@ -1,8 +1,8 @@
 import { Component, ElementRef, Input, OnDestroy, OnInit } 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',
@@ -13,11 +13,14 @@ export class ControlMousePositionComponent implements OnInit, OnDestroy {
   coordinateFormat: CoordinateFormat;
   @Input()
   projection: ProjectionLike;
-  target: Element;
 
   instance: MousePosition;
+  target: HTMLElement;
 
-  constructor(private map: MapComponent, private element: ElementRef) {}
+  constructor(
+    private map: MapComponent,
+    private element: ElementRef
+  ) {}
 
   ngOnInit() {
     this.target = this.element.nativeElement;

projects/ng-openlayers/src/lib/controls/overviewmap.component.ts

@@ -1,7 +1,7 @@
-import { Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
+import { Component, Input, OnDestroy, OnInit, OnChanges, SimpleChanges } from '@angular/core';
+import { Layer } from 'ol/layer';
 import { View } from 'ol';
 import { OverviewMap } from 'ol/control';
-import { Layer } from 'ol/layer';
 import { MapComponent } from '../map.component';
 
 @Component({
@@ -20,7 +20,7 @@ export class ControlOverviewMapComponent implements OnInit, OnChanges, OnDestroy
   @Input()
   layers: Layer[];
   @Input()
-  target: Element;
+  target: HTMLElement;
   @Input()
   tipLabel: string;
   @Input()

projects/ng-openlayers/src/lib/controls/scaleline.component.ts

@@ -1,6 +1,7 @@
 import { Component, Input, OnDestroy, OnInit } from '@angular/core';
 import { ScaleLine } from 'ol/control';
 import { MapComponent } from '../map.component';
+import { Units } from 'ol/control/ScaleLine';
 
 @Component({
   selector: 'aol-control-scaleline',
@@ -8,13 +9,11 @@ import { MapComponent } from '../map.component';
 })
 export class ControlScaleLineComponent implements OnInit, OnDestroy {
   @Input()
-  units: string;
+  units: Units;
 
   instance: ScaleLine;
 
-  constructor(private map: MapComponent) {
-    // console.log('instancing aol-control-scaleline');
-  }
+  constructor(private map: MapComponent) {}
 
   ngOnInit() {
     this.instance = new ScaleLine(this);
@@ -22,7 +21,6 @@ export class ControlScaleLineComponent implements OnInit, OnDestroy {
   }
 
   ngOnDestroy() {
-    // console.log('removing aol-control-scaleline');
     this.map.instance.removeControl(this.instance);
   }
 }

projects/ng-openlayers/src/lib/controls/zoom.component.ts

@@ -10,9 +10,9 @@ export class ControlZoomComponent implements OnInit, OnDestroy {
   @Input()
   duration: number;
   @Input()
-  zoomInLabel: string | Node;
+  zoomInLabel: string | HTMLElement;
   @Input()
-  zoomOutLabel: string | Node;
+  zoomOutLabel: string | HTMLElement;
   @Input()
   zoomInTipLabel: string;
   @Input()

projects/ng-openlayers/src/lib/controls/zoomtoextent.component.ts

@@ -1,7 +1,7 @@
 import { Component, Input, OnDestroy, OnInit } from '@angular/core';
 import { ZoomToExtent } from 'ol/control';
-import { Extent } from 'ol/extent';
 import { MapComponent } from '../map.component';
+import { Extent } from 'ol/extent';
 
 @Component({
   selector: 'aol-control-zoomtoextent',
@@ -11,7 +11,7 @@ export class ControlZoomToExtentComponent implements OnInit, OnDestroy {
   @Input()
   className: string;
   @Input()
-  label: string | Node;
+  label: string | HTMLElement;
   @Input()
   tipLabel: string;
   @Input()

projects/ng-openlayers/src/lib/coordinate.component.ts

@@ -1,10 +1,10 @@
-import { Component, Input, OnChanges, OnInit, Optional, SimpleChanges } from '@angular/core';
+import { Component, Optional, OnChanges, Input, SimpleChanges, OnInit } from '@angular/core';
 import { transform } from 'ol/proj';
-import { GeometryCircleComponent } from './geom/geometrycircle.component';
-import { GeometryPointComponent } from './geom/geometrypoint.component';
 import { MapComponent } from './map.component';
-import { OverlayComponent } from './overlay.component';
+import { GeometryPointComponent } from './geom/geometrypoint.component';
+import { GeometryCircleComponent } from './geom/geometrycircle.component';
 import { ViewComponent } from './view.component';
+import { OverlayComponent } from './overlay.component';
 
 @Component({
   selector: 'aol-coordinate',

projects/ng-openlayers/src/lib/feature.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
+import { Component, OnInit, OnDestroy, OnChanges, Input, SimpleChanges } from '@angular/core';
 import { Feature } from 'ol';
 import { SourceVectorComponent } from './sources/vector.component';
 
@@ -10,8 +10,8 @@ export class FeatureComponent implements OnInit, OnDestroy, OnChanges {
   @Input()
   id: string | number | undefined;
 
-  componentType = 'feature';
-  instance: Feature;
+  public componentType = 'feature';
+  public instance: Feature;
 
   constructor(private host: SourceVectorComponent) {}
 

projects/ng-openlayers/src/lib/formats/mvt.component.ts

@@ -1,8 +1,7 @@
 import { Component, forwardRef, Input } from '@angular/core';
-import { MVT } from 'ol/format';
-import { Geometry } from 'ol/geom';
-import GeometryType from 'ol/geom/GeometryType';
 import { FormatComponent } from './format.component';
+import { MVT } from 'ol/format';
+import { FeatureClass } from 'ol/Feature';
 
 @Component({
   selector: 'aol-format-mvt',
@@ -11,9 +10,7 @@ import { FormatComponent } from './format.component';
 })
 export class FormatMVTComponent extends FormatComponent {
   @Input()
-  featureClass:
-    | ((geom: Geometry | { [k: string]: any }) => any)
-    | ((geom: GeometryType, arg2: number[], arg3: number[] | number[][], arg4: { [k: string]: any }) => any);
+  featureClass: FeatureClass;
   @Input()
   geometryName: string;
   @Input()

projects/ng-openlayers/src/lib/geom/geometrycircle.component.ts

@@ -1,23 +1,14 @@
 import { Component, Input, OnInit } from '@angular/core';
-import { Circle } from 'ol/geom';
 import { FeatureComponent } from '../feature.component';
-import { MapComponent } from '../map.component';
+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> `,
 })
 export class GeometryCircleComponent extends SimpleGeometryComponent implements OnInit {
-  componentType = 'geometry-circle';
-  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]);
-  }
-
   @Input()
   get radius(): number {
     return this.instance.getRadius();
@@ -25,4 +16,13 @@ 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]);
+  }
 }

projects/ng-openlayers/src/lib/geom/simplegeometry.component.ts

@@ -1,16 +1,20 @@
-import { Directive, Input, OnInit } from '@angular/core';
-import SimpleGeometry from 'ol/geom/SimpleGeometry';
+import { Input, OnInit, Directive } from '@angular/core';
 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;
 
-  instance: SimpleGeometry;
-  componentType = 'simple-geometry';
+  public instance: SimpleGeometry;
+  public componentType = 'simple-geometry';
 
-  constructor(protected map: MapComponent, protected host: FeatureComponent) {}
+  protected constructor(
+    protected map: MapComponent,
+    protected host: FeatureComponent
+  ) {}
 
   ngOnInit() {
     this.host.instance.setGeometry(this.instance);

projects/ng-openlayers/src/lib/graticule.component.ts

@@ -1,4 +1,4 @@
-import { AfterContentInit, Component, Input, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
+import { Component, Input, AfterContentInit, OnChanges, SimpleChanges, OnDestroy } from '@angular/core';
 import { Graticule } from 'ol';
 import { Stroke } from 'ol/style';
 import { MapComponent } from './map.component';
@@ -18,7 +18,7 @@ export class GraticuleComponent implements AfterContentInit, OnChanges, OnDestro
   latLabelPosition: number;
 
   instance: any;
-  componentType = 'graticule';
+  public componentType = 'graticule';
 
   constructor(private map: MapComponent) {}
 

projects/ng-openlayers/src/lib/interactions/default.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
 import { defaults, Interaction } from 'ol/interaction';
 import { Collection } from 'ol';
 import { MapComponent } from '../map.component';
@@ -8,12 +8,35 @@ import { MapComponent } from '../map.component';
   template: '',
 })
 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;
+
   instance: Collection<Interaction>;
 
   constructor(private map: MapComponent) {}
 
   ngOnInit() {
-    this.instance = defaults();
+    this.instance = defaults(this);
     this.instance.forEach((i) => this.map.instance.addInteraction(i));
   }
 

projects/ng-openlayers/src/lib/interactions/draganddrop.component.ts

@@ -1,8 +1,8 @@
 import { Component, Input, OnDestroy, OnInit } from '@angular/core';
-import Feature from 'ol/format/Feature';
 import { DragAndDrop } from 'ol/interaction';
-import { ProjectionLike } from 'ol/proj';
+import FeatureFormat from 'ol/format/Feature';
 import { MapComponent } from '../map.component';
+import { ProjectionLike } from 'ol/proj';
 
 @Component({
   selector: 'aol-interaction-draganddrop',
@@ -10,11 +10,11 @@ import { MapComponent } from '../map.component';
 })
 export class DragAndDropInteractionComponent implements OnInit, OnDestroy {
   @Input()
-  formatConstructors: ((n: Feature) => any)[];
+  formatConstructors: FeatureFormat[];
   @Input()
   projection: ProjectionLike;
   @Input()
-  target: Element;
+  target: HTMLElement;
 
   instance: DragAndDrop;
 

projects/ng-openlayers/src/lib/interactions/dragbox.component.ts

@@ -1,8 +1,8 @@
-import { Component, Input, OnDestroy, OnInit } from '@angular/core';
-import { Condition } from 'ol/events/condition';
+import { Component, OnDestroy, OnInit, Input } from '@angular/core';
 import { DragBox } from 'ol/interaction';
-import { EndCondition } from 'ol/interaction/DragBox';
 import { MapComponent } from '../map.component';
+import { Condition } from 'ol/events/condition';
+import { EndCondition } from 'ol/interaction/DragBox';
 
 @Component({
   selector: 'aol-interaction-dragbox',

projects/ng-openlayers/src/lib/interactions/dragpan.component.ts

@@ -1,8 +1,8 @@
-import { Component, Input, OnDestroy, OnInit } from '@angular/core';
-import Kinetic from 'ol/Kinetic';
-import { Condition } from 'ol/events/condition';
+import { Component, OnDestroy, OnInit, Input } from '@angular/core';
 import { DragPan } from 'ol/interaction';
+import Kinetic from 'ol/Kinetic';
 import { MapComponent } from '../map.component';
+import { Condition } from 'ol/events/condition';
 
 @Component({
   selector: 'aol-interaction-dragpan',

projects/ng-openlayers/src/lib/interactions/dragrotate.component.ts

@@ -1,7 +1,7 @@
-import { Component, Input, OnDestroy, OnInit } from '@angular/core';
-import { Condition } from 'ol/events/condition';
+import { Component, OnDestroy, OnInit, Input } from '@angular/core';
 import { DragRotate } from 'ol/interaction';
 import { MapComponent } from '../map.component';
+import { Condition } from 'ol/events/condition';
 
 @Component({
   selector: 'aol-interaction-dragrotate',

projects/ng-openlayers/src/lib/interactions/dragrotateandzoom.component.ts

@@ -1,7 +1,7 @@
-import { Component, Input, OnDestroy, OnInit } from '@angular/core';
-import { Condition } from 'ol/events/condition';
+import { Component, OnDestroy, OnInit, Input } from '@angular/core';
 import { DragRotateAndZoom } from 'ol/interaction';
 import { MapComponent } from '../map.component';
+import { Condition } from 'ol/events/condition';
 
 @Component({
   selector: 'aol-interaction-dragrotateandzoom',

projects/ng-openlayers/src/lib/interactions/dragzoom.component.ts

@@ -1,7 +1,7 @@
-import { Component, Input, OnDestroy, OnInit } from '@angular/core';
-import { Condition } from 'ol/events/condition';
+import { Component, OnDestroy, OnInit, Input } from '@angular/core';
 import { DragZoom } from 'ol/interaction';
 import { MapComponent } from '../map.component';
+import { Condition } from 'ol/events/condition';
 
 @Component({
   selector: 'aol-interaction-dragzoom',

projects/ng-openlayers/src/lib/interactions/draw.component.ts

@@ -1,13 +1,15 @@
-import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
-import { Collection, Feature } from 'ol';
-import { Condition } from 'ol/events/condition';
-import GeometryType from 'ol/geom/GeometryType';
+import { Component, Input, OnDestroy, OnInit, EventEmitter, Output } from '@angular/core';
+import { MapComponent } from '../map.component';
 import { Draw } from 'ol/interaction';
-import { DrawEvent, GeometryFunction } from 'ol/interaction/Draw';
+import { Collection, Feature } from 'ol';
 import { Vector } from 'ol/source';
 import { Style } from 'ol/style';
+import { DrawEvent, GeometryFunction } from 'ol/interaction/Draw';
 import { StyleFunction } from 'ol/style/Style';
-import { MapComponent } from '../map.component';
+import { Condition } from 'ol/events/condition';
+import { Type } from 'ol/geom/Geometry';
+import { ObjectEvent } from 'ol/Object';
+import BaseEvent from 'ol/events/Event';
 
 @Component({
   selector: 'aol-interaction-draw',
@@ -23,7 +25,7 @@ export class DrawInteractionComponent implements OnInit, OnDestroy {
   @Input()
   snapTolerance?: number;
   @Input()
-  type: GeometryType;
+  type: Type;
   @Input()
   maxPoints?: number;
   @Input()
@@ -48,13 +50,17 @@ export class DrawInteractionComponent implements OnInit, OnDestroy {
   @Output()
   olChange = new EventEmitter<DrawEvent>();
   @Output()
-  olChangeActive = new EventEmitter<DrawEvent>();
+  olChangeActive = new EventEmitter<ObjectEvent>();
+  @Output()
+  olDrawAbort = new EventEmitter<DrawEvent>();
   @Output()
   drawEnd = new EventEmitter<DrawEvent>();
   @Output()
   drawStart = new EventEmitter<DrawEvent>();
   @Output()
-  propertyChange = new EventEmitter<DrawEvent>();
+  olError = new EventEmitter<BaseEvent>();
+  @Output()
+  propertyChange = new EventEmitter<ObjectEvent>();
 
   instance: Draw;