[ci skip] Updated packages #2472

# Conflicts:
#	package-lock.json

.eslintrc.js

@@ -18,5 +18,6 @@ module.exports = {
         "@typescript-eslint"
     ],
     "rules": {
+        "@typescript-eslint/no-explicit-any": "off"
     }
 }

.gitignore

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

Jenkinsfile

@@ -1,24 +1,24 @@
-@Library('farmmaps-shared-library') _
-
-pipeline {
-  agent any;
-  options {
-    copyArtifactPermission projectNames: env.allProjectsArtifactPermission;
-    disableConcurrentBuilds abortPrevious: true;
-  }
-  stages {
-    stage('FarmmapsLibBuildAll') {
-      steps {
-        stepFarmmapsLibBuildAll();
-      }
-    }
-  }
-  post {
-    success {
-      postSuccess();
-    }
-    always {
-      postAlways();
-    }
-  }
+@Library('farmmaps-shared-library') _
+
+pipeline {
+  agent any;
+  options {
+    copyArtifactPermission projectNames: env.allProjectsArtifactPermission;
+    disableConcurrentBuilds();
+  }
+  stages {
+    stage('FarmmapsLibBuildAll') {
+      steps {
+        stepFarmmapsLibBuildAll();
+      }
+    }
+  }
+  post {
+    success {
+      postSuccess();
+    }
+    always {
+      postAlways();
+    }
+  }
 }

Jenkinsfile.develop

@@ -1,24 +1,24 @@
-@Library('farmmaps-shared-library') _
-
-pipeline {
-  agent any;
-  options {
-    copyArtifactPermission projectNames: env.allProjectsArtifactPermission;
-    disableConcurrentBuilds abortPrevious: true;
-  }
-  stages {
-    stage('FarmmapsLibBuildAll') {
-      steps {
-        stepFarmmapsLibBuildAll();
-      }
-    }
-  }
-  post {
-    success {
-      postSuccess();
-    }
-    always {
-      postAlways();
-    }
-  }
+@Library('farmmaps-shared-library') _
+
+pipeline {
+  agent any;
+  options {
+    copyArtifactPermission projectNames: env.allProjectsArtifactPermission;
+    disableConcurrentBuilds();
+  }
+  stages {
+    stage('FarmmapsLibBuildAll') {
+      steps {
+        stepFarmmapsLibBuildAll();
+      }
+    }
+  }
+  post {
+    success {
+      postSuccess();
+    }
+    always {
+      postAlways();
+    }
+  }
 }

README.md

@@ -1,65 +1,65 @@
-# Farmmaps viewer
-
-This is a sample FarmMaps client in Angular 7.x.
-
-
-## Quick start
-
-Use one of the two options below to get started.
-
-## Option 1, Using docker
-
-*Dependencies*  
-
-* docker desktop
-
-*Setup*
-
-```
-docker pull node:12.13.1
-docker run -t -i --entrypoint /bin/bash -p 4200:4200 node:12.13.1
-```
-
-Inside the running container 
-```
-git clone https://git.akkerweb.nl/FarmMaps/FarmMapsLib.git
-cd FarmMapsLib
-npm config set @farmmaps:registry https://repository.akkerweb.nl/repository/npm-group/
-npm install -g @angular/cli
-npm install
-ng serve --host 0.0.0.0
-```
-*Go*
-
-Point your browser to http://localhost:4200
-
-## Option 2, Using local machine
-
-*Dependencies*
-
-* npm 6.9.0
-* nodejs 10.16.0
-* git
-
-*Setup*
-
-```
-git clone https://git.akkerweb.nl/FarmMaps/FarmMapsLib.git
-cd FarmMapsLib
-npm config set @farmmaps:registry https://repository.akkerweb.nl/repository/npm-group/
-npm install -g @angular/cli
-npm install
-ng serve
-```
-*Go*
-
-Point your browser to http://localhost:4200
-
-*ESLint*
-
-```
-npm run lint src
-npm run lint projects/common/src
-npm run lint projects/common-map/src
-npm run lint projects/common-map3d/src
+# Farmmaps viewer
+
+This is a sample FarmMaps client in Angular 7.x.
+
+
+## Quick start
+
+Use one of the two options below to get started.
+
+## Option 1, Using docker
+
+*Dependencies*  
+
+* docker desktop
+
+*Setup*
+
+```
+docker pull node:12.13.1
+docker run -t -i --entrypoint /bin/bash -p 4200:4200 node:12.13.1
+```
+
+Inside the running container 
+```
+git clone https://git.akkerweb.nl/FarmMaps/FarmMapsLib.git
+cd FarmMapsLib
+npm config set @farmmaps:registry https://repository.akkerweb.nl/repository/npm-group/
+npm install -g @angular/cli
+npm install
+ng serve --host 0.0.0.0
+```
+*Go*
+
+Point your browser to http://localhost:4200
+
+## Option 2, Using local machine
+
+*Dependencies*
+
+* npm 6.9.0
+* nodejs 10.16.0
+* git
+
+*Setup*
+
+```
+git clone https://git.akkerweb.nl/FarmMaps/FarmMapsLib.git
+cd FarmMapsLib
+npm config set @farmmaps:registry https://repository.akkerweb.nl/repository/npm-group/
+npm install -g @angular/cli
+npm install
+ng serve
+```
+*Go*`
+
+Point your browser to http://localhost:4200
+
+*ESLint*
+
+```
+npm run lint src
+npm run lint projects/common/src
+npm run lint projects/common-map/src
+npm run lint projects/common-map3d/src
 ```

angular.json

@@ -215,7 +215,7 @@
               "tsConfig": "projects/common-map/tsconfig.lib.prod.json"
             }
           }
-},
+        },
         "test": {
           "builder": "@angular-devkit/build-angular:karma",
           "options": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "farmmaps-lib-app",
-  "version": "3.5.0",
+  "version": "4.5.0",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
@@ -11,23 +11,24 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^14.1.3",
-    "@angular/common": "^14.1.3",
-    "@angular/compiler": "^14.1.3",
-    "@angular/core": "^14.1.3",
+    "@angular/animations": "^17.3.3",
+    "@angular/common": "^17.3.3",
+    "@angular/compiler": "^17.3.3",
+    "@angular/core": "^17.3.3",
     "@angular-eslint/eslint-plugin": "^15.2.1",
-    "@angular/forms": "^14.1.3",
-    "@angular/platform-browser": "^14.1.3",
-    "@angular/platform-browser-dynamic": "^14.1.3",
-    "@angular/router": "^14.1.3",
+    "@angular/forms": "^17.3.3",
+    "@angular/platform-browser": "^17.3.3",
+    "@angular/platform-browser-dynamic": "^17.3.3",
+    "@angular/router": "^17.3.3",
     "@farmmaps/common": "file:dist/common",
     "@farmmaps/common-map": "file:dist/common-map",
     "@farmmaps/common-map3d": "file:dist/common-map3d",
+    "ng-openlayers": "17.1.3",
     "@microsoft/signalr": "^3.1.16",
-    "@ng-bootstrap/ng-bootstrap": "^13.0.0",
-    "@ngrx/effects": "^14",
-    "@ngrx/router-store": "^14",
-    "@ngrx/store": "^14",
+    "@ng-bootstrap/ng-bootstrap": "^16.0.0",
+    "@ngrx/effects": "^17",
+    "@ngrx/router-store": "^17",
+    "@ngrx/store": "^17",
     "@popperjs/core": "^2.11.6",
     "angular-oauth2-oidc": "^13",
     "assert": "^2.0.0",
@@ -38,13 +39,12 @@
     "core-js": "^2.6.12",
     "https-browserify": "^1.0.0",
     "moment": "^2.29.4",
-    "ngrx-store-localstorage": "^14",
-    "ngx-avatar": "^4.1.0",
-    "ngx-clipboard": "^14.0.1",
-    "ngx-image-cropper": "^3.3.5",
-    "ngx-openlayers": "1.0.0-next.19",
-    "ngx-uploadx": "^5.2.0",
-    "ol": "6.14.1",
+    "ngrx-store-localstorage": "17.0.0",
+    "ngx-avatars": "1.7.0",
+    "ngx-clipboard": "16.0.0",
+    "ngx-image-cropper": "^7.2.1",
+    "ngx-uploadx": "^6.2.0",
+    "ol": "^8.2.0",
     "olcs": "^2.13.1",
     "resumablejs": "^1.1.0",
     "rxjs": "^7.8.1",
@@ -54,23 +54,23 @@
     "tslib": "^2.4.0",
     "url": "^0.11.0",
     "util": "^0.12.4",
-    "zone.js": "~0.11.4"
+    "zone.js": "~0.14.4"
   },
   "devDependencies": {
-    "@angular-builders/custom-webpack": "^14",
-    "@angular-devkit/build-angular": "^14.1.3",
-    "@angular/cli": "^14.1.3",
-    "@angular/compiler-cli": "^14.1.3",
-    "@angular/language-service": "^14.1.3",
-    "@angular/localize": "^14.1.3",
+    "@angular-builders/custom-webpack": "^17",
+    "@angular-devkit/build-angular": "^17.3.3",
+    "@angular/cli": "^17.3.3",
+    "@angular/compiler-cli": "^17.3.3",
+    "@angular/language-service": "^17.3.3",
+    "@angular/localize": "^17.3.3",
     "@types/arcgis-rest-api": "^10.4.5",
     "@types/jasmine": "~2.8.8",
     "@types/jasminewd2": "^2.0.9",
-    "@types/node": "^12.20.15",
-    "@typescript-eslint/eslint-plugin": "^5.54.0",
-    "@typescript-eslint/eslint-plugin-tslint": "^5.54.0",
-    "@typescript-eslint/parser": "^5.54.0",
-    "codelyzer": "^0.0.28",
+    "@types/node": "^18.11.6",
+    "@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",
@@ -81,9 +81,9 @@
     "karma-coverage-istanbul-reporter": "^3.0.3",
     "karma-jasmine": "^5.1.0",
     "karma-jasmine-html-reporter": "^2.0.0",
-    "ng-packagr": "^14.1.0",
+    "ng-packagr": "^17.3.0",
     "protractor": "~7.0.0",
     "ts-node": "^8.8.1",
-    "typescript": "~4.6.4"
+    "typescript": "~5.4.4"
   }
-}
+}

projects/common-map/.eslintrc.js

@@ -18,5 +18,6 @@ module.exports = {
         "@typescript-eslint"
     ],
     "rules": {
+        "@typescript-eslint/no-explicit-any": "off"
     }
 }

projects/common-map/package-lock.json

@@ -11,14 +11,14 @@
         "tslib": "^2.0.0"
       },
       "peerDependencies": {
-        "@angular/core": ">=14.0.0",
-        "@ngrx/effects": ">=14.0.0",
-        "@ngrx/router-store": ">=14.0.0",
-        "@ngrx/store": ">=14.0.0",
-        "ngrx-store-localstorage": ">=14.0.0",
-        "ngx-openlayers": ">=1.0.0-next.19",
-        "ol": ">=6.8.1",
-        "tassign": ">=1.0.0"
+        "@angular/core": "^17.3.3",
+        "@ngrx/effects": "^17",
+        "@ngrx/router-store": "^17",
+        "@ngrx/store": "^17",
+        "ng-openlayers": "17.1.3",
+        "ngrx-store-localstorage": "^17",
+        "ol": "^8.2.0",
+        "tassign": "^1.0.0"
       }
     },
     "node_modules/tslib": {

projects/common-map/package.json

@@ -8,13 +8,13 @@
     "tslib": "^2.0.0"
   },
   "peerDependencies": {
-    "@angular/core": ">=14.0.0",
-    "ngrx-store-localstorage": ">=14.0.0",
-    "@ngrx/effects": ">=14.0.0",
-    "@ngrx/router-store":">=14.0.0",
-    "@ngrx/store":">=14.0.0",
-    "tassign": ">=1.0.0",
-    "ngx-openlayers": ">=1.0.0-next.19",
-    "ol": ">=6.8.1"
+    "@angular/core": "^17.3.3",
+    "ngrx-store-localstorage": "^17",
+    "@ngrx/effects": "^17",
+    "@ngrx/router-store": "^17",
+    "@ngrx/store": "^17",
+    "tassign": "^1.0.0",
+    "ng-openlayers": "17.1.3",
+    "ol": "^8.2.0"
   }
 }

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

@@ -1,13 +1,12 @@
 import { Action } from '@ngrx/store';
 
-import { IMapState } from '../models/map.state';
+import { IItem, IQueryState } from '@farmmaps/common';
+import { Feature } from 'ol';
+import { Geometry } from 'ol/geom';
+import { Style } from 'ol/style';
 import { IItemLayer } from '../models/item.layer';
 import { ILayervalue } from '../models/layer.value';
-import { IQueryState } from '@farmmaps/common';
-import { IItem } from '@farmmaps/common';
-import { Feature } from 'ol';
-import { Style } from 'ol/style';
-import { Geometry } from 'ol/geom';
+import { IMapState } from '../models/map.state';
 import { IPeriodState } from '../models/period.state';
 
 export const SETSTATE = '[Map] SetState';
@@ -18,6 +17,7 @@ export const SETPARENT = '[Map] SetParent';
 export const SETPERIOD = '[Map] SetPeriod';
 export const STARTSEARCH = '[Map] StartSearch';
 export const STARTSEARCHSUCCESS = '[Map] StartSearchSuccess';
+export const CLICKFEATURE = '[Map] ClickFeature';
 export const SELECTFEATURE = '[Map] SelectFeature';
 export const SELECTITEM = '[Map] SelectItem';
 export const SELECTITEMSUCCESS = '[Map] SelectItemSuccess';
@@ -56,7 +56,8 @@ export const GETLAYERVALUE = '[Map] GetLayerValue'
 export const GETLAYERVALUESUCCESS = '[Map] GetLayerValueSuccess'
 export const TOGGLESHOWDATALAYERSLIDE = '[Map] ToggleShowDataLayerSlide'
 export const SETVIEWSTATE = '[Map] SetViewState'
-
+export const CLEARFEATURES = '[Map] ClearFeatures';
+export const SETPANELEXTRAWIDE = '[Map] SetPanelExtraWide';
 
 export class Clear implements Action {
   readonly type = CLEAR;
@@ -111,6 +112,12 @@ export class StartSearchSuccess implements Action {
   constructor(public features: Array<Feature<Geometry>>, public query:IQueryState) { }
 }
 
+export class ClickFeature implements Action {
+  readonly type = CLICKFEATURE;
+
+  constructor(public feature:Feature<Geometry>) { }
+}
+
 export class SelectFeature implements Action {
   readonly type = SELECTFEATURE;
 
@@ -150,7 +157,7 @@ export class PreviousTemporal implements Action {
 export class SelectTemporal implements Action {
   readonly type = SELECTTEMPORAL;
 
-  constructor(item:IItem) { }
+  constructor() { }
 }
 
 export class AddFeatureSuccess implements Action {
@@ -329,12 +336,23 @@ export class SetViewState implements Action {
   constructor(public enabled:boolean) {}
 }
 
+export class ClearFeatures implements Action {
+  readonly type = CLEARFEATURES;
+  constructor() {}
+}
+
+export class SetPanelExtraWide implements Action {
+  readonly type = SETPANELEXTRAWIDE;
+  constructor(public panelExtraWide:boolean) {}
+}
+
 export type Actions = SetMapState
   | Init
   | Clear
   | SetParent
   | StartSearch
   | StartSearchSuccess
+  | ClickFeature
   | SelectFeature
   | SelectItem
   | SelectItemSuccess
@@ -374,5 +392,7 @@ export type Actions = SetMapState
   | GetLayerValue
   | SetPeriod
   | ToggleShowDataLayerSlide
-  | SetViewState;
+  | SetViewState
+  | ClearFeatures
+  | SetPanelExtraWide;
 

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

@@ -1,7 +1,6 @@
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { MapComponent } from './components/map/map.component';
-import { AuthGuard } from '@farmmaps/common';
 
 const routes = [
     {

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

@@ -1,78 +1,78 @@
-import { NgModule ,ModuleWithProviders} from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
 //external modules
-import { AngularOpenlayersModule } from 'ngx-openlayers';
-import { StoreModule, ActionReducer, MetaReducer } from '@ngrx/store';
-import { EffectsModule } from '@ngrx/effects';
 import { NgbModule } from "@ng-bootstrap/ng-bootstrap";
+import { EffectsModule } from '@ngrx/effects';
+import { ActionReducer, MetaReducer, StoreModule } from '@ngrx/store';
+import { AngularOpenlayersModule } from 'ng-openlayers';
 
 //common modules
-import { AppCommonModule } from '@farmmaps/common';
+import { AppCommonModule, ItemTypeService } from '@farmmaps/common';
 
-import { MODULE_NAME } from './module-name';
-import * as mapReducers from './reducers/map.reducer';
 import * as mapActions from './actions/map.actions';
 import * as mapEffects from './effects/map.effects';
+import { MODULE_NAME } from './module-name';
+import * as mapReducers from './reducers/map.reducer';
 
-import { IMapState} from './models/map.state';
-import { ISelectedFeatures } from './models/selected.features';
-import { IItemLayer,ItemLayer,ITemporalItemLayer,TemporalItemLayer } from './models/item.layer';
 import { IClickedFeature } from './models/clicked.feature';
+import { IItemLayer, ItemLayer, ITemporalItemLayer, TemporalItemLayer } from './models/item.layer';
+import { IMapState } from './models/map.state';
 import { IPeriodState } from './models/period.state';
+import { ISelectedFeatures } from './models/selected.features';
 
 // components
-import { GpsLocation} from './components/aol/gps-location/gps-location.component';
-import {FeatureListFeatureCropfieldComponent } from './components/feature-list-feature-cropfield/feature-list-feature-cropfield.component';
-import { FeatureListFeatureCroppingschemeComponent} from './components/feature-list-feature-croppingscheme/feature-list-feature-croppingscheme.component';
-import { ItemWidgetListComponent} from './components/item-widget-list/item-widget-list.component';
-import { AbstractItemListItemComponent, ItemListItemComponent, AbstractItemWidgetComponent } from './components/item-list-item/item-list-item.component';
-import { ItemListItemContainerComponent } from './components/item-list-item-container/item-list-item-container.component';
-import { AbstractItemListComponent,ItemListComponent} from './components/item-list/item-list.component';
-import { AbstractSelectedItemComponent, SelectedItemComponent } from './components/selected-item/selected-item.component';
-import { SelectedItemCropfieldComponent } from './components/selected-item-cropfield/selected-item-cropfield.component';
-import { SelectedItemGeotiffComponent } from './components/selected-item-geotiff/selected-item-geotiff.component';
-import { SelectedItemTemporalComponent} from './components/selected-item-temporal/selected-item-temporal.component';
-import {SelectedItemShapeComponent } from './components/selected-item-shape/selected-item-shape.component';
-import { SelectedItemContainerComponent } from './components/selected-item-container/selected-item-container.component';
-import { AbstractFeatureListFeatureComponent, FeatureListFeatureComponent } from './components/feature-list-feature/feature-list-feature.component';
-import {FeatureListFeatureContainerComponent } from './components/feature-list-feature-container/feature-list-feature-container.component';
-import { FeatureListCroppingschemeComponent } from './components/feature-list-croppingscheme/feature-list-croppingscheme.component';
-import {FeatureListCropfieldComponent  } from './components/feature-list-cropfield/feature-list-cropfield.component';
-import {FeatureListContainerComponent } from './components/feature-list-container/feature-list-container.component';
-import { WidgetHostDirective} from './components/widget-host/widget-host.directive';
-import { FeatureListComponent,AbstractFeatureListComponent} from './components/feature-list/feature-list.component';
+import { MapRoutingModule } from './common-map-routing.module';
 import { FileDropTargetComponent } from './components/aol/file-drop-target/file-drop-target.component';
-import { ItemVectorSourceComponent } from './components/aol/item-vector-source/item-vector-source.component';
+import { GpsLocation } from './components/aol/gps-location/gps-location.component';
 import { ItemLayersComponent } from './components/aol/item-layers/item-layers.component';
-import { ZoomToExtentComponent } from './components/aol/zoom-to-extent/zoom-to-extent.component';
-import { RotationResetComponent } from './components/aol/rotation-reset/rotation-reset.component';
+import { ItemVectorSourceComponent } from './components/aol/item-vector-source/item-vector-source.component';
 import { LayerListComponent } from './components/aol/layer-list/layer-list.component';
+import { LayerValuesComponent } from './components/aol/layer-values/layer-values.component';
+import { LayerVectorImageComponent } from './components/aol/layer-vector-image/layer-vector-image.component';
+import { PanToLocation } from './components/aol/pan-to-location/pan-to-location.component';
+import { RotationResetComponent } from './components/aol/rotation-reset/rotation-reset.component';
+import { ZoomToExtentComponent } from './components/aol/zoom-to-extent/zoom-to-extent.component';
+import { FeatureListContainerComponent } from './components/feature-list-container/feature-list-container.component';
+import { FeatureListCropfieldComponent } from './components/feature-list-cropfield/feature-list-cropfield.component';
+import { FeatureListCroppingschemeComponent } from './components/feature-list-croppingscheme/feature-list-croppingscheme.component';
+import { FeatureListFeatureContainerComponent } from './components/feature-list-feature-container/feature-list-feature-container.component';
+import { FeatureListFeatureCropfieldComponent } from './components/feature-list-feature-cropfield/feature-list-feature-cropfield.component';
+import { FeatureListFeatureCroppingschemeComponent } from './components/feature-list-feature-croppingscheme/feature-list-feature-croppingscheme.component';
+import { AbstractFeatureListFeatureComponent, FeatureListFeatureComponent } from './components/feature-list-feature/feature-list-feature.component';
+import { AbstractFeatureListComponent, FeatureListComponent } from './components/feature-list/feature-list.component';
+import { GeometryThumbnailComponent } from './components/feature-thumbnail/feature-thumbnail.component';
+import { ForChild } from './components/for-item/for-child.decorator';
+import { ForItemType } from './components/for-item/for-itemtype.decorator';
+import { ForPackage } from './components/for-item/for-package.decorator';
+import { ForSourceTask } from './components/for-item/for-sourcetask.decorator';
+import { ifZoomToShowDirective } from './components/if-zoom-to-show/if-zoom-to-show.directive';
+import { ItemListItemContainerComponent } from './components/item-list-item-container/item-list-item-container.component';
+import { AbstractItemListItemComponent, AbstractItemWidgetComponent, ItemListItemComponent } from './components/item-list-item/item-list-item.component';
+import { AbstractItemListComponent, ItemListComponent } from './components/item-list/item-list.component';
+import { ItemWidgetListComponent } from './components/item-widget-list/item-widget-list.component';
+import { LayerSwitcher } from './components/layer-switcher/layer-switcher.component';
+import { HistogramDetailsComponent } from './components/legend/histogram-details/histogram-details.component';
+import { LegendComponent } from './components/legend/legend.component';
+import { StatisticsDetailsComponent } from './components/legend/statistics-details/statistics-details.component';
+import { MapSearchComponent } from './components/map-search/map-search.component';
+import { MapComponent } from './components/map/map.component';
 import { MetaDataModalComponent } from './components/meta-data-modal/meta-data-modal.component';
 import { SelectPeriodModalComponent } from './components/select-period-modal/select-period-modal.component';
-import { MapComponent } from './components/map/map.component';
-import { MapSearchComponent } from './components/map-search/map-search.component';
-import { MapRoutingModule } from './common-map-routing.module';
-import { LegendComponent } from './components/legend/legend.component';
-import { LayerVectorImageComponent } from './components/aol/layer-vector-image/layer-vector-image.component';
-import {FeatureIconService} from './services/feature-icon.service';
-import { GeolocationService } from './services/geolocation.service';
-import {DeviceOrientationService} from './services/device-orientation.service';
-import { TemporalService} from './services/temporal.service';
+import { SelectedItemContainerComponent } from './components/selected-item-container/selected-item-container.component';
+import { SelectedItemCropfieldComponent } from './components/selected-item-cropfield/selected-item-cropfield.component';
+import { SelectedItemGeotiffComponent } from './components/selected-item-geotiff/selected-item-geotiff.component';
+import { SelectedItemShapeComponent } from './components/selected-item-shape/selected-item-shape.component';
+import { SelectedItemTemporalComponent } from './components/selected-item-temporal/selected-item-temporal.component';
+import { AbstractSelectedItemComponent, SelectedItemComponent } from './components/selected-item/selected-item.component';
+import { WidgetHostDirective } from './components/widget-host/widget-host.directive';
 import { WidgetStatusComponent } from './components/widget-status/widget-status.component';
-import { ForChild} from './components/for-item/for-child.decorator';
-import {ForItemType } from './components/for-item/for-itemtype.decorator';
-import { ForSourceTask} from './components/for-item/for-sourcetask.decorator';
-import { ForPackage } from './components/for-item/for-package.decorator';
-import { PanToLocation} from './components/aol/pan-to-location/pan-to-location.component';
-import {LayerSwitcher} from './components/layer-switcher/layer-switcher.component';
-import {HistogramDetailsComponent} from './components/legend/histogram-details/histogram-details.component';
-import {StatisticsDetailsComponent} from './components/legend/statistics-details/statistics-details.component';
-import { ifZoomToShowDirective} from './components/if-zoom-to-show/if-zoom-to-show.directive';
-import { ZoomToShowAlert} from './components/zoom-to-show-alert/zoom-to-show-alert.component';
-import { LayerValuesComponent } from './components/aol/layer-values/layer-values.component';
-import { GeometryThumbnailComponent } from './components/feature-thumbnail/feature-thumbnail.component';
+import { ZoomToShowAlert } from './components/zoom-to-show-alert/zoom-to-show-alert.component';
+import { DeviceOrientationService } from './services/device-orientation.service';
+import { FeatureIconService } from './services/feature-icon.service';
+import { GeolocationService } from './services/geolocation.service';
+import { TemporalService } from './services/temporal.service';
 
 export function LocalStorageSync(reducer: ActionReducer<any>): ActionReducer<any> {
   const r = function(state, action) {
@@ -104,186 +104,129 @@ export function LocalStorageSync(reducer: ActionReducer<any>): ActionReducer<any
 const metaReducers: Array<MetaReducer<any, any>> = [LocalStorageSync];
 
 export {
-  mapEffects,
-  mapReducers,
-  mapActions,
-  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,
   AbstractFeatureListComponent,
-  AbstractFeatureListFeatureComponent,
-  AbstractSelectedItemComponent,
-  AbstractItemWidgetComponent,
-  AbstractItemListItemComponent,
-  AbstractItemListComponent,
-  FeatureIconService,
-  GeolocationService,
-  DeviceOrientationService,
-  TemporalService,
-  IMapState,
-  ISelectedFeatures,
-  IItemLayer,
-  ItemLayer,
-  IPeriodState,
-  ForChild,
-  ForItemType,
-  ForSourceTask,
-  ForPackage ,
-  ITemporalItemLayer,
-  TemporalItemLayer,
-  ifZoomToShowDirective,
-  ZoomToShowAlert,
-  IClickedFeature,
-  GeometryThumbnailComponent
-}
+  AbstractFeatureListFeatureComponent, AbstractItemListComponent, AbstractItemListItemComponent, AbstractItemWidgetComponent, AbstractSelectedItemComponent, DeviceOrientationService, FeatureIconService, FeatureListComponent, FeatureListContainerComponent, FeatureListCropfieldComponent, FeatureListCroppingschemeComponent, FeatureListFeatureComponent, FeatureListFeatureContainerComponent, FeatureListFeatureCropfieldComponent, FeatureListFeatureCroppingschemeComponent, FileDropTargetComponent, ForChild,
+  ForItemType, ForPackage, ForSourceTask, GeolocationService, GeometryThumbnailComponent, GpsLocation, IClickedFeature, ifZoomToShowDirective, IItemLayer, IMapState, IPeriodState, ISelectedFeatures, ItemLayer, ItemLayersComponent, ItemListComponent, ItemListItemComponent,
+  ItemListItemContainerComponent, ITemporalItemLayer, ItemVectorSourceComponent, ItemWidgetListComponent, LayerListComponent, LayerSwitcher, LayerVectorImageComponent, LegendComponent, mapActions, MapComponent, mapEffects,
+  mapReducers, MapSearchComponent, MetaDataModalComponent, PanToLocation, RotationResetComponent, SelectedItemComponent, SelectedItemContainerComponent, SelectedItemCropfieldComponent,
+  SelectedItemGeotiffComponent, SelectedItemShapeComponent, SelectedItemTemporalComponent, SelectPeriodModalComponent, TemporalItemLayer, TemporalService, WidgetHostDirective, WidgetStatusComponent, ZoomToExtentComponent, ZoomToShowAlert
+};
 
-@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,
+    ItemTypeService,
+    { 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 }
+  ]
 })
 
-
 export class AppCommonMapModule {  
 }

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

@@ -1,10 +1,9 @@
-import { Component, Input, OnDestroy, OnInit, EventEmitter, Output, Inject } from '@angular/core';
-import { MapComponent } from 'ngx-openlayers';
+import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
+import { MapComponent } from 'ng-openlayers';
 
-import * as proj  from 'ol/proj';
-import {Point,Geometry} from 'ol/geom';
+import { Feature } from 'ol';
 import { GeoJSON } from 'ol/format';
-import { Feature} from 'ol';
+import { Geometry, Point } from 'ol/geom';
 
 export interface IDroppedFile {
   files: any,
@@ -28,7 +27,6 @@ export class FileDropTargetComponent implements OnInit, OnDestroy {
 
   ngOnInit() {
     this.element = this.map.instance.getViewport();
-    const other = this;
     this.element.addEventListener('drop', this.onDrop, false);
     this.element.addEventListener('dragover', this.preventDefault, false);
     this.element.addEventListener('dragenter', this.preventDefault, false);

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

@@ -1,6 +1,3 @@
-@import "~bootstrap/scss/bootstrap.scss";
-
-
 .gps-location {
   display:none; 
 }
@@ -14,7 +11,7 @@
 }
 
 .tolerance {
-  fill: $primary;
+  fill: var(--bs-primary);
   fill-opacity:0.4;
 }
 
@@ -23,20 +20,20 @@
 }
 
 .border {
-  fill: $white;
+  fill: var(--bs-white);
 }
 
 .center {
-  fill: $primary;
+  fill: var(--bs-primary);
 }
 
 .stop1 {
-  stop-color: $primary;
+  stop-color: var(--bs-primary);
   stop-opacity:1;
 }
 
 .stop2 {
-  stop-color:$primary;
+  stop-color:var(--bs-primary);
   stop-opacity: 0;
 }
 

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

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

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

@@ -1,24 +1,21 @@
-import { Component, Host, Input, Output, EventEmitter,OnDestroy, OnInit, OnChanges, SimpleChanges, forwardRef } from '@angular/core';
-import { LayerGroupComponent, MapComponent } from 'ngx-openlayers';
-import { ItemService,IItem,AppConfig } from '@farmmaps/common';
-import { IItemLayer, ITemporalItemLayer} from '../../../models/item.layer';
-import { ILayerData} from '../../../models/layer.data';
-import { IRenderoutputTiles,IRenderoutputImage,IGradientstop,ILayer,IHistogram,IColor} from '../../../models/color.map';
-import {Extent} from 'ol/extent';
-import Projection from 'ol/proj/Projection';
-import * as proj from 'ol/proj';
-import * as loadingstrategy from 'ol/loadingstrategy';
-import * as style from 'ol/style';
-import {Tile,Layer,Image} from 'ol/layer';
-import {XYZ,ImageStatic,OSM,BingMaps,TileWMS,TileArcGISRest,TileJSON,Source} from 'ol/source';
-import {Vector as VectorSource} from 'ol/source';
-import { Vector as VectorLayer } from 'ol/layer';
-import { VectorImage as VectorImageLayer } from 'ol/layer';
-import VectorTileSource from 'ol/source/VectorTile';
-import VectorTileLayer from 'ol/layer/VectorTile';
-import {GeoJSON,MVT} from 'ol/format';
+import { Component, EventEmitter, Input, OnChanges, OnDestroy, OnInit, Output, SimpleChanges, forwardRef } from '@angular/core';
+import { AppConfig, IItem, ItemService } from '@farmmaps/common';
+import { LayerGroupComponent, MapComponent } from 'ng-openlayers';
+import Feature from 'ol/Feature';
+import { Extent } from 'ol/extent';
+import { GeoJSON, MVT } from 'ol/format';
 import { Geometry } from 'ol/geom';
-import BaseLayer from 'ol/layer/Base';
+import { Image, Layer, Tile, VectorImage as VectorImageLayer, Vector as VectorLayer } from 'ol/layer';
+import VectorTileLayer from 'ol/layer/VectorTile';
+import * as loadingstrategy from 'ol/loadingstrategy';
+import * as proj from 'ol/proj';
+import Projection from 'ol/proj/Projection';
+import { BingMaps, ImageStatic, OSM, Source, TileArcGISRest, TileJSON, TileWMS, Vector as VectorSource, XYZ } from 'ol/source';
+import VectorTileSource from 'ol/source/VectorTile';
+import * as style from 'ol/style';
+import { IColor, IGradientstop, IHistogram, ILayer, IRenderoutputImage, IRenderoutputTiles } from '../../../models/color.map';
+import { IItemLayer, ITemporalItemLayer } from '../../../models/item.layer';
+import { ILayerData } from '../../../models/layer.data';
 
 @Component({
   selector: 'fm-map-item-layers',
@@ -93,7 +90,7 @@ export class ItemLayersComponent extends LayerGroupComponent implements OnChange
     return color;
   }
 
-  getColor(item: IItem, layer: ILayer, feature): style.Style {
+  getColor(item: IItem, layer: any, feature): style.Style {
     const value = layer.indexKey ? feature.get(layer.indexKey) : feature.get(layer.name);
     const key = item.code + "_" + value;
     if (!this.styleCache[key]) {
@@ -152,7 +149,7 @@ export class ItemLayersComponent extends LayerGroupComponent implements OnChange
     const data = item.data;
     const l:ILayer = (data && data.layers && data.layers.length > 0) ? data.layers[layerIndex] : null;
     if (l && l.rendering && l.rendering.renderoutputType == "VectorTiles") {
-      var rt = l.rendering as IRenderoutputTiles;
+      const rt = l.rendering as IRenderoutputTiles;
       layer = new VectorTileLayer({
         declutter: true,
         source: new VectorTileSource({
@@ -166,7 +163,7 @@ export class ItemLayersComponent extends LayerGroupComponent implements OnChange
         }
       })
     } else if (l && l.rendering && l.rendering.renderoutputType == "Tiles") {
-      var rt = l.rendering as IRenderoutputTiles;
+      const rt = l.rendering as IRenderoutputTiles;
       layer = new Tile({
         source: new XYZ({
           maxZoom: rt.maxzoom,
@@ -175,14 +172,15 @@ export class ItemLayersComponent extends LayerGroupComponent implements OnChange
         })
       });
     } else {
+      // eslint-disable-next-line @typescript-eslint/no-this-alias
       const __this = this;
       const format = new GeoJSON();
       const source = new VectorSource({
         strategy: loadingstrategy.bbox,
-        loader: function (extent: Extent, resolution: number, projection: Projection) {
-          const source = this as VectorSource<Geometry>;
+        loader: function (extent: Extent, _resolution: number, projection: Projection) {
+          const source = this as VectorSource<Feature<Geometry>>;
           __this.itemService.getItemFeatures(item.code, extent, projection.getCode(), layerIndex).subscribe(function (data) {
-            const features = format.readFeatures(data);
+            const features = format.readFeatures(data).filter(feature => feature instanceof Feature) as Feature[];
             for (const f of features) {
               if (f.get("code")) {
                 f.setId(f.get("code"));
@@ -236,7 +234,6 @@ export class ItemLayersComponent extends LayerGroupComponent implements OnChange
 
   createSelectionLayer(itemLayer:IItemLayer):Layer<Source> {
     let layerIndex = -1;
-    const layer: Layer<Source> = null; 
     layerIndex = itemLayer.layerIndex != -1 ? itemLayer.layerIndex : itemLayer.item.data.layers[0].index;
     const data = itemLayer.item.data;
     const l:ILayer = (data && data.layers && data.layers.length > 0) ? data.layers[layerIndex] : null;
@@ -264,7 +261,8 @@ export class ItemLayersComponent extends LayerGroupComponent implements OnChange
     return null;
   }
 
-  createExternalLayer(item:IItem,itemLayer:IItemLayer):Layer<Source> {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  createExternalLayer(item:IItem,_itemLayer:IItemLayer):Layer<Source> {
     const data = item.data as ILayerData;
     let layer: Layer<Source> = null; 
     switch (data.interfaceType) {
@@ -318,7 +316,6 @@ export class ItemLayersComponent extends LayerGroupComponent implements OnChange
 
   createLayer(itemLayer: IItemLayer): Layer<Source> {
     let layer: Layer<Source> = null;   
-    const layerIndex = -1;
     if (itemLayer.item.itemType == 'vnd.farmmaps.itemtype.geotiff.processed') {
       layer = this.createGeotiffLayer(itemLayer.item,itemLayer);
     } else if (itemLayer.item.itemType == 'vnd.farmmaps.itemtype.shape.processed') {
@@ -378,10 +375,6 @@ export class ItemLayersComponent extends LayerGroupComponent implements OnChange
     if(this.topLayerPrerenderEventhandlerInstalled && this.onPrerender.observers.length > 0 )
     {
       if(this.instance.getVisible()) {
-        const olLayers = this.instance.getLayers().getArray().forEach((l:any) => {
-          l.un('prerender',this.topLayerPrerenderEventhandler);
-          l.un('postrender',this.topLayerPostrenderEventhandler);
-        });
         this.topLayerPrerenderEventhandlerInstalled = false;
       }
     }
@@ -414,17 +407,15 @@ export class ItemLayersComponent extends LayerGroupComponent implements OnChange
 
   updateLayers(itemLayers: IItemLayer[] | IItemLayer) {
     this.unInstallTopLayerPrerenderEventhandler();
-    let dataLayer = false;
     let ils:IItemLayer[] = [];
     if(Array.isArray(itemLayers)) {
        ils = itemLayers;
     } else {
-      dataLayer=true;
        ils=[itemLayers];
     }
     const newLayers: Layer<Source>[] = [];
     if (ils) {
-      ils.forEach((itemLayer, index) => {
+      ils.forEach((itemLayer) => {
         if(itemLayer.item.itemType ==  'vnd.farmmaps.itemtype.temporal') {
           const il = itemLayer as ITemporalItemLayer;
           const previousLayer = this.addOrUpdateOlLayer(il.previousItemLayer,newLayers.length);          

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

@@ -1,25 +1,22 @@
-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 { ItemService, ItemTypeService, IItem, IItemType, FolderService } from '@farmmaps/common';
+import { Component, EventEmitter, Host, Inject, Input, LOCALE_ID, OnChanges, OnDestroy, OnInit, Output, SimpleChanges, forwardRef } from '@angular/core';
+import { FolderService, IItem, ItemService, ItemTypeService } from '@farmmaps/common';
+import { LayerVectorComponent, MapComponent, SourceVectorComponent } from 'ng-openlayers';
 
-import { Feature } from 'ol';
-import { Point, Geometry } from 'ol/geom';
-import { MapBrowserEvent } from 'ol';
-import { Types } from 'ol/MapBrowserEventType';
-import * as style from 'ol/style';
+import { formatNumber } from '@angular/common';
+import { Feature, MapBrowserEvent } from 'ol';
 import * as color from 'ol/color';
-import * as loadingstrategy from 'ol/loadingstrategy';
-import * as condition from 'ol/events/condition';
 import * as extent from 'ol/extent';
-import { Vector, Cluster, Source } from 'ol/source';
-import { Layer } from 'ol/layer';
+import { getCenter } from 'ol/extent';
 import { GeoJSON } from 'ol/format';
+import { Geometry, Point } from 'ol/geom';
 import { Select } from 'ol/interaction';
+import { Layer } from 'ol/layer';
+import * as loadingstrategy from 'ol/loadingstrategy';
+import { Source, Vector } from 'ol/source';
+import * as style from 'ol/style';
+import { Subscription } from 'rxjs';
 import { IStyles } from '../../../models/style.cache';
 import { FeatureIconService } from '../../../services/feature-icon.service';
-import { Subscription } from 'rxjs';
-import { getCenter } from 'ol/extent';
-import { formatNumber } from '@angular/common';
 
 @Component({
   selector: 'fm-map-item-source-vector',
@@ -29,11 +26,9 @@ import { formatNumber } from '@angular/common';
   ]
 })
 export class ItemVectorSourceComponent extends SourceVectorComponent implements OnInit, OnDestroy, OnChanges {
-  instance: Vector<Geometry>;
-  private _format: GeoJSON;
+  instance: Vector<Feature<Geometry>>;
   private _select: Select;
   private _hoverSelect: Select;
-  private _iconScale = 0.05;
   @Input() features: Array<Feature<Geometry>>;
   @Input() selectedFeature: Feature<Geometry>;
   @Input() selectedItem: IItem;
@@ -46,7 +41,6 @@ export class ItemVectorSourceComponent extends SourceVectorComponent implements
 
   constructor(@Host() private layer: LayerVectorComponent, private itemService: ItemService, private map: MapComponent, private itemTypeService: ItemTypeService, private featureIconService$: FeatureIconService, private folderService: FolderService, @Inject(LOCALE_ID) private locale: string) {
     super(layer);
-    this._format = new GeoJSON();
   }
 
   geometry(feature: Feature<Geometry>) {
@@ -83,6 +77,7 @@ export class ItemVectorSourceComponent extends SourceVectorComponent implements
   ngOnInit() {
     this.sub = this.folderService.getFolder('my_settings').subscribe(
       userSettingsRoot => {
+        if (userSettingsRoot == undefined) return;
         this.itemService.getChildItemList(userSettingsRoot.code, 'vnd.farmmaps.itemtype.settings.general').subscribe(
           items => {
             if (items && items.length > 0 && items[0].data?.displayMapFeatureSettings) {
@@ -203,6 +198,7 @@ export class ItemVectorSourceComponent extends SourceVectorComponent implements
     if (changes["styles"]) {
       const styles = changes["styles"].currentValue;
       for (const key in styles) {
+        // eslint-disable-next-line no-prototype-builtins
         if (styles.hasOwnProperty(key)) {
           this.stylesCache[key] = styles[key];
         }

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

@@ -1,17 +1,16 @@
-import { Component, OnInit, Input, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
-import { IItemLayer } from '../../../models/item.layer';
+import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
 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 { ILayervalue } from '../../../models/layer.value';
-import { Observable, interval, Subject } from 'rxjs';
-import { debounce, throttle } from 'rxjs/operators';
-import { toLonLat } from 'ol/proj';
+import { MapComponent } from 'ng-openlayers';
+import { ClipboardService } from 'ngx-clipboard';
 import { toStringHDMS } from 'ol/coordinate';
-import { ClipboardService } from 'ngx-clipboard'
-import { GeoJSON, WKT } from 'ol/format';
+import { WKT } from 'ol/format';
 import { Point } from 'ol/geom';
+import { toLonLat } from 'ol/proj';
+import { Observable, Subject, interval } from 'rxjs';
+import { throttle } from 'rxjs/operators';
+import * as mapActions from '../../../actions/map.actions';
+import { ILayervalue } from '../../../models/layer.value';
+import * as mapReducers from '../../../reducers/map.reducer';
 
 @Component({
   selector: 'fm-map-layer-values',
@@ -45,7 +44,7 @@ export class LayerValuesComponent implements OnInit, AfterViewInit {
     this.map.instance.on('moveend', () => {
       this.moveEndSubject.next({});
     });
-    this.moveEndSubject.pipe(throttle(ev => interval(100))).subscribe(() => this.updateValuesLocation());
+    this.moveEndSubject.pipe(throttle(() => interval(100))).subscribe(() => this.updateValuesLocation());
   }
 
   updateValuesLocation() {

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

@@ -1,8 +1,9 @@
 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';
+import Feature from 'ol/Feature';
 
 @Component({
   selector: 'fm-map-aol-layer-vector-image',
@@ -14,7 +15,7 @@ export class LayerVectorImageComponent extends LayerVectorComponent implements O
   //public source: Vector;
 
   @Input()
-  renderMode: RenderType<VectorSource<Geometry>> | string = "image";  
+  renderMode: RenderType<VectorSource<Feature<Geometry>>> | string = "image";  
 
   constructor(map: MapComponent) {
     super(map);

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

@@ -1,11 +1,8 @@
-@import "~bootstrap/scss/bootstrap.scss";
-
-
 .gps-location {
   display:block; 
   width:2.5em;
   height:2.5em;
-  background-color: $body-bg;
+  background-color: var(--bs-body-bg);
   background-size: contain;
   margin-top:0.5em;
   border-radius: 1.75em;
@@ -17,15 +14,15 @@
 }
 
 .pan-to {
-  fill: $secondary;
+  fill: var(--bs-secondary);
 }
 
 div.gps-location:hover .pan-to {
-  fill: $white;
+  fill: var(--bs-white);
 }
 
 .pan-to-centered {
-  fill: $primary;
+  fill: var(--bs-primary);
 }
 
 div.gps-location:hover .pan-to-centered {
@@ -33,5 +30,5 @@ div.gps-location:hover .pan-to-centered {
 }
 
 .pan-to.pan-to-disabled {
-  fill: $gray-300;
+  fill: var(--bs-gray-300);
 }

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

@@ -1,8 +1,8 @@
-import { Component, OnInit, Input, Host, OnChanges, SimpleChanges,ChangeDetectorRef } from '@angular/core';
-import { MapComponent } from 'ngx-openlayers';
-import {IMapState} from '../../../models/map.state'
-import {View} from 'ol';
+import { ChangeDetectorRef, Component, Host, Input, OnChanges, OnInit } from '@angular/core';
+import { MapComponent } from 'ng-openlayers';
+import { View } from 'ol';
 import { fromLonLat } from 'ol/proj';
+import { IMapState } from '../../../models/map.state';
 
 
 @Component({
@@ -29,7 +29,7 @@ export class PanToLocation  implements OnInit,OnChanges{
     });
   }
 
-  ngOnChanges(changes: SimpleChanges) {
+  ngOnChanges() {
     // if (changes.position && this.instance) {
     //   var p = changes.position.currentValue as Position;
     //   this.instance.setPosition(fromLonLat([p.coords.longitude, p.coords.latitude]));
@@ -64,17 +64,17 @@ export class PanToLocation  implements OnInit,OnChanges{
       const newCenter = fromLonLat([this.position.coords.longitude,this.position.coords.latitude]);
       const extent = [newCenter[0]-500,newCenter[1]-500,newCenter[0]+500,newCenter[1]+500];
       const options = { padding: [0, 0, 0, 0],minResolution:1 };
-      const size = this.map.instance.getSize();
-      const rem = parseFloat(getComputedStyle(document.documentElement).fontSize);
-      const threshold = 44 * rem;
-      let left = 1 * rem;
-      const right = 1 * rem;
-      let bottom = Math.round(size[1] / 2);
-      const top = 1 * rem;
-      if (size[0] > threshold) {
-        bottom = 1 * rem;
-        left = 23 * rem;
-      }
+      //const size = this.map.instance.getSize();
+      //const rem = parseFloat(getComputedStyle(document.documentElement).fontSize);
+      //const threshold = 44 * rem;
+      //let left = 1 * rem;
+      //const right = 1 * rem;
+      //let bottom = Math.round(size[1] / 2);
+      //const top = 1 * rem;
+      //if (size[0] > threshold) {
+      //  bottom = 1 * rem;
+      //  left = 23 * rem;
+      //}
       //options.padding = [top, right, bottom, left];
       if (this.animate) options["duration"] = 2000;
       view.fit(extent, options);  

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

@@ -1,5 +1,3 @@
-@import "~bootstrap/scss/bootstrap.scss";
-
 .compass {
   width:2.5em;
   height:2.5em;
@@ -13,7 +11,7 @@
 
 #north {
   display: none;
-  fill:$black;
+  fill:var(--bs-black);
 }
 
 #top-l {
@@ -33,23 +31,23 @@
 }
 
 div.compass:hover #top-l {
-  fill:$white;
+  fill:var(--bs-white);
 }
 
 div.compass:hover #top-r {
-  fill:$gray-300;
+  fill:var(--bs-gray-300);
 }
 
 div.compass:hover #bottom-l {
-  fill:$gray-300;
+  fill:var(--bs-gray-300);
 }
 
 div.compass:hover #bottom-r {
-  fill:$white;
+  fill:var(--bs-white);
 }
 
 div.compass:hover #north {
-  fill:$white;
+  fill:var(--bs-white);
 }
 
 .compass-n {    

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

@@ -1,7 +1,7 @@
-import { Component, Host, Input, OnInit, ChangeDetectorRef  } from '@angular/core';
-import { ViewComponent, MapComponent } from 'ngx-openlayers';
+import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
+import { MapComponent } from 'ng-openlayers';
 
-import {View} from 'ol';
+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 { Component, Host, Input, OnChanges } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { MapComponent, ViewComponent } from 'ng-openlayers';
 
  
 @Component({
@@ -30,7 +30,7 @@ export class ZoomToExtentComponent implements OnChanges {
     }
   }
 
-  ngOnChanges(changes: SimpleChanges) {
+  ngOnChanges() {
     if (this.extent) {
       const options = { padding: [0, 0, 0, 0],minResolution:1 };
       const size = this.map.instance.getSize();

projects/common-map/src/fm-map/components/feature-list-container/feature-list-container.component.scss

@@ -1,14 +1,10 @@
-@import "~bootstrap/scss/bootstrap.scss";
-
-
-
 .row {
-  border-bottom: 1px solid $gray-500;
+  border-bottom: 1px solid var(--bs-gray-500);
   user-select: none;
 }
 
 .row.selected {
-  background-color: $gray-100;
+  background-color: var(--bs-gray-100);
 }
 
 @media screen and (min-width: 44rem)  {

projects/common-map/src/fm-map/components/feature-list-container/feature-list-container.component.ts

@@ -1,13 +1,13 @@
-import { Component, Input, OnInit, ComponentFactoryResolver, ViewChild, SimpleChanges, ComponentFactory, Inject} from '@angular/core';
-import { Feature } from 'ol';
-import { Geometry} from 'ol/geom';
-import { FeatureListComponent,AbstractFeatureListComponent } from '../feature-list/feature-list.component';
-import { WidgetHostDirective } from '../widget-host/widget-host.directive';
-import  {IQueryState,PackageService } from '@farmmaps/common';
-import * as mapReducers from '../../reducers/map.reducer';
-import * as mapActions from '../../actions/map.actions';
+import { Component, ComponentFactory, ComponentFactoryResolver, Inject, Input, SimpleChanges, ViewChild } from '@angular/core';
+import { IQueryState } from '@farmmaps/common';
 import { Store } from '@ngrx/store';
+import { Feature } from 'ol';
+import { Geometry } from 'ol/geom';
 import { Observable } from 'rxjs';
+import * as mapActions from '../../actions/map.actions';
+import * as mapReducers from '../../reducers/map.reducer';
+import { AbstractFeatureListComponent, FeatureListComponent } from '../feature-list/feature-list.component';
+import { WidgetHostDirective } from '../widget-host/widget-host.directive';
 
 
 @Component({
@@ -17,7 +17,7 @@ import { Observable } from 'rxjs';
 })
 export class FeatureListContainerComponent {
 
-  constructor(private store: Store<mapReducers.State>,private componentFactoryResolver: ComponentFactoryResolver, @Inject(AbstractFeatureListComponent) public featureLists: AbstractFeatureListComponent[],private packageService:PackageService ) {
+  constructor(private store: Store<mapReducers.State>,private componentFactoryResolver: ComponentFactoryResolver, @Inject(AbstractFeatureListComponent) public featureLists: AbstractFeatureListComponent[]) {
     this.featureLists = [...this.featureLists].reverse();
   }
 
@@ -64,9 +64,9 @@ export class FeatureListContainerComponent {
     viewContainerRef.clear();
     if(showItem) {
       this.componentRef = viewContainerRef.createComponent(componentFactory);
-      (<AbstractFeatureListComponent>this.componentRef.instance).features = null;
-      (<AbstractFeatureListComponent>this.componentRef.instance).queryState = queryState;
-      (<AbstractFeatureListComponent>this.componentRef.instance).selectedFeature = null;
+      (<AbstractFeatureListComponent>this.componentRef.instance).features = this.features;
+      (<AbstractFeatureListComponent>this.componentRef.instance).queryState = this.queryState;
+      (<AbstractFeatureListComponent>this.componentRef.instance).selectedFeature = this.selectedFeature;
     }    
   }
 

projects/common-map/src/fm-map/components/feature-list-cropfield/feature-list-cropfield.component.html

@@ -5,7 +5,7 @@
     <h3>{{schemeItem.name}}</h3>
     <div *ngIf="features;let features">
         <div class="cropfields">
-          <div class="row m-0 ps-3 pe-3" *ngFor="let feature of features" [ngClass]="{'selected':isFeatureSelected(feature)}" (click)="handleFeatureClick(feature)" (mouseenter)="handleFeatureMouseEnter(feature)" (mouseleave)="handleFeatureMouseLeave(feature)">
+          <div class="row m-0 ps-3 pe-3" *ngFor="let feature of features" [ngClass]="{'selected':isFeatureSelected(feature)}" (click)="handleFeatureClick(feature)" (mouseenter)="handleFeatureMouseEnter(feature)" (mouseleave)="handleFeatureMouseLeave()">
           <fm-map-feature-list-feature-container [feature]="feature"></fm-map-feature-list-feature-container>
         </div>
       </div>

projects/common-map/src/fm-map/components/feature-list-cropfield/feature-list-cropfield.component.scss

@@ -1,22 +1,20 @@
-@import "~bootstrap/scss/bootstrap.scss";
-
 fm-map-feature-list-feature-container {
   width:100%;
   pointer-events:none;
 }
 
 .row {
-  border-bottom: 1px solid $gray-500;
+  border-bottom: 1px solid var(--bs-gray-500);
   user-select: none;
   padding-left:1.5rem;
 }
 
 .row.selected {
-  background-color: $gray-100;
+  background-color: var(--bs-gray-100);
 }
 
 .cropfields {
-  border-top: 1px solid $gray-500;
+  border-top: 1px solid var(--bs-gray-500);
   margin-left: -1.25rem;
   margin-right: -1.25rem;
 }

projects/common-map/src/fm-map/components/feature-list-cropfield/feature-list-cropfield.component.ts

@@ -1,12 +1,12 @@
-import { Component, Injectable,AfterViewInit, OnInit,SimpleChanges, ChangeDetectorRef} from '@angular/core';
 import { Location } from '@angular/common';
-import { AbstractFeatureListComponent } from '../feature-list/feature-list.component';
-import {ForItemType } from '../for-item/for-itemtype.decorator';
-import {ForChild } from '../for-item/for-child.decorator';
+import { Component, Injectable, OnInit } from '@angular/core';
+import { IItem, ItemService, ItemTypeService, commonReducers } from '@farmmaps/common';
 import { Store } from '@ngrx/store';
-import * as mapReducers from '../../reducers/map.reducer';
-import { commonReducers, ItemTypeService, IItem,ItemService } from '@farmmaps/common';
 import { Observable } from 'rxjs';
+import * as mapReducers from '../../reducers/map.reducer';
+import { AbstractFeatureListComponent } from '../feature-list/feature-list.component';
+import { ForChild } from '../for-item/for-child.decorator';
+import { ForItemType } from '../for-item/for-itemtype.decorator';
 
 @ForChild()
 @ForItemType("vnd.farmmaps.itemtype.cropfield")

projects/common-map/src/fm-map/components/feature-list-croppingscheme/feature-list-croppingscheme.component.html

@@ -4,7 +4,7 @@
       <h3><i class="far fa-farm"></i>&nbsp;<span i18n>Farms</span></h3>
       <div *ngIf="features;let features">
       <div class="farms">
-        <div class="row m-0 ps-3 pe-3" *ngFor="let feature of features"[ngClass]="{'selected':isFeatureSelected(feature)}" (click)="handleFeatureClick(feature)" (mouseenter)="handleFeatureMouseEnter(feature)" (mouseleave)="handleFeatureMouseLeave(feature)">
+        <div class="row m-0 ps-3 pe-3" *ngFor="let feature of features"[ngClass]="{'selected':isFeatureSelected(feature)}" (click)="handleFeatureClick(feature)" (mouseenter)="handleFeatureMouseEnter(feature)" (mouseleave)="handleFeatureMouseLeave()">
           <fm-map-feature-list-feature-container [feature]="feature"></fm-map-feature-list-feature-container>
         </div>
       </div>      

projects/common-map/src/fm-map/components/feature-list-croppingscheme/feature-list-croppingscheme.component.scss

@@ -1,22 +1,20 @@
-@import "~bootstrap/scss/bootstrap.scss";
-
 fm-map-feature-list-feature-container {
   width:100%;
   pointer-events:none;
 }
 
 .row {
-  border-bottom: 1px solid $gray-500;
+  border-bottom: 1px solid var(--bs-gray-500);
   user-select: none;
   padding-left:1.5rem;
 }
 
 .row.selected {
-  background-color: $gray-100;
+  background-color: var(--bs-gray-100);
 }
 
 .farms {
-  border-top: 1px solid $gray-500;
+  border-top: 1px solid var(--bs-gray-500);
   margin-left: -1.25rem;
   margin-right: -1.25rem;
 }

projects/common-map/src/fm-map/components/feature-list-croppingscheme/feature-list-croppingscheme.component.ts

@@ -1,15 +1,14 @@
-import { Component, Injectable } from '@angular/core';
 import { Location } from '@angular/common';
+import { Component, Injectable } from '@angular/core';
+import { ItemTypeService, commonReducers } from '@farmmaps/common';
+import { Action, Store } from '@ngrx/store';
+import { Feature } from 'ol';
+import { Geometry } from 'ol/geom';
+import { tassign } from 'tassign';
+import * as mapActions from '../../actions/map.actions';
+import * as mapReducers from '../../reducers/map.reducer';
 import { AbstractFeatureListComponent } from '../feature-list/feature-list.component';
 import { ForItemType } from '../for-item/for-itemtype.decorator';
-import { Store,Action } from '@ngrx/store';
-import * as mapReducers from '../../reducers/map.reducer';
-import { commonReducers, ItemTypeService } from '@farmmaps/common';
-import * as mapActions from '../../actions/map.actions';
-import { tassign } from 'tassign';
-import { Router } from '@angular/router';
-import { Feature } from 'ol';
-import { Geometry} from 'ol/geom';
 
 @ForItemType("vnd.farmmaps.itemtype.croppingscheme")
 @Injectable()
@@ -20,7 +19,7 @@ import { Geometry} from 'ol/geom';
 })
 export class FeatureListCroppingschemeComponent extends AbstractFeatureListComponent {
 
-    constructor(store: Store<mapReducers.State | commonReducers.State>, itemTypeService: ItemTypeService, location: Location, private router: Router) {
+    constructor(store: Store<mapReducers.State | commonReducers.State>, itemTypeService: ItemTypeService, location: Location) {
         super(store, itemTypeService, location);
     }
 

projects/common-map/src/fm-map/components/feature-list-feature-container/feature-list-feature-container.component.ts

@@ -1,7 +1,7 @@
-import { Component, Input, OnInit, ComponentFactoryResolver, ViewChild, SimpleChanges, ComponentFactory, Inject, Type} from '@angular/core';
+import { Component, ComponentFactory, ComponentFactoryResolver, Inject, Input, SimpleChanges, ViewChild } from '@angular/core';
 import { Feature } from 'ol';
 import { Geometry } from 'ol/geom';
-import { AbstractFeatureListFeatureComponent,FeatureListFeatureComponent } from '../feature-list-feature/feature-list-feature.component';
+import { AbstractFeatureListFeatureComponent, FeatureListFeatureComponent } from '../feature-list-feature/feature-list-feature.component';
 import { WidgetHostDirective } from '../widget-host/widget-host.directive';
 
 

projects/common-map/src/fm-map/components/feature-list-feature-cropfield/feature-list-feature-cropfield.component.scss

@@ -1,7 +1,3 @@
-@import "~bootstrap/scss/bootstrap.scss";
-
-
-
 .card-title {
   font-size: 1rem;
   white-space: nowrap;

projects/common-map/src/fm-map/components/feature-list-feature-cropfield/feature-list-feature-cropfield.component.ts

@@ -1,12 +1,12 @@
-import { Component, Injectable,ViewChild,AfterViewInit} from '@angular/core';
+import { Component, Injectable } from '@angular/core';
+import { AppConfig, ItemTypeService, commonReducers } from '@farmmaps/common';
+import { Store } from '@ngrx/store';
 import { Feature } from 'ol';
 import { Geometry } from 'ol/geom';
-import { Store } from '@ngrx/store';
+import { getArea } from 'ol/sphere';
 import * as mapReducers from '../../reducers/map.reducer';
-import { commonReducers,ItemTypeService,AppConfig } from '@farmmaps/common';
 import { AbstractFeatureListFeatureComponent } from '../feature-list-feature/feature-list-feature.component';
 import { ForItemType } from '../for-item/for-itemtype.decorator';
-import {getArea} from 'ol/sphere';
 
 
 

projects/common-map/src/fm-map/components/feature-list-feature-croppingscheme/feature-list-feature-croppingscheme.component.scss

@@ -1,7 +1,3 @@
-@import "~bootstrap/scss/bootstrap.scss";
-
-
-
 .card-title {
   font-size: 1rem;
   white-space: nowrap;

projects/common-map/src/fm-map/components/feature-list-feature-croppingscheme/feature-list-feature-croppingscheme.component.ts

@@ -1,8 +1,7 @@
-import { Component, Input, Injectable} from '@angular/core';
-import { Feature } from 'ol';
+import { Component, Injectable } from '@angular/core';
+import { AppConfig, ItemTypeService, commonReducers } from '@farmmaps/common';
 import { Store } from '@ngrx/store';
 import * as mapReducers from '../../reducers/map.reducer';
-import { commonReducers,ItemTypeService,AppConfig } from '@farmmaps/common';
 import { AbstractFeatureListFeatureComponent } from '../feature-list-feature/feature-list-feature.component';
 import { ForItemType } from '../for-item/for-itemtype.decorator';
 

projects/common-map/src/fm-map/components/feature-list-feature/feature-list-feature.component.scss

@@ -1,7 +1,3 @@
-@import "~bootstrap/scss/bootstrap.scss";
-
-
-
 .card-title {
   font-size: 1rem;
   white-space: nowrap;

projects/common-map/src/fm-map/components/feature-list/feature-list.component.html

@@ -1,6 +1,6 @@
 <div *ngIf="features;let features">
   <fm-back-button></fm-back-button>
-  <div class="row m-0 ps-3 pe-3" *ngFor="let feature of features" [ngClass]="{'selected':isFeatureSelected(feature)}" (click)="handleFeatureClick(feature)" (mouseenter)="handleFeatureMouseEnter(feature)" (mouseleave)="handleFeatureMouseLeave(feature)">
+  <div class="row m-0 ps-3 pe-3" *ngFor="let feature of features" [ngClass]="{'selected':isFeatureSelected(feature)}" (click)="handleFeatureClick(feature)" (mouseenter)="handleFeatureMouseEnter(feature)" (mouseleave)="handleFeatureMouseLeave()">
     <fm-map-feature-list-feature-container [feature]="feature"></fm-map-feature-list-feature-container>
   </div>
 </div>

projects/common-map/src/fm-map/components/feature-list/feature-list.component.scss

@@ -1,15 +1,13 @@
-@import "~bootstrap/scss/bootstrap.scss";
-
 fm-map-feature-list-feature-container {
   width: 100%;
   pointer-events: none;
 }
 
 .row {
-  border-bottom: 1px solid $gray-500;
+  border-bottom: 1px solid var(--bs-gray-500);
   user-select: none;
 }
 
 .row.selected {
-  background-color: $gray-100;
+  background-color: var(--bs-gray-100);
 }

projects/common-map/src/fm-map/components/feature-list/feature-list.component.ts

@@ -1,15 +1,12 @@
-import { Component, Input, Injectable,Directive,SimpleChanges } from '@angular/core';
 import { Location } from '@angular/common';
+import { Component, Directive, Injectable, Input } from '@angular/core';
+import { IQueryState, ItemTypeService, commonReducers } from '@farmmaps/common';
+import { Action, Store } from '@ngrx/store';
 import { Feature } from 'ol';
-import { Geometry} from 'ol/geom';
-import { Store,Action} from '@ngrx/store';
-import * as mapReducers from '../../reducers/map.reducer';
-import { commonReducers,ItemTypeService, IItem, Item } from '@farmmaps/common';
-import * as mapActions from '../../actions/map.actions';
-import { Observable, from } from 'rxjs';
-import { withLatestFrom } from 'rxjs/operators';
+import { Geometry } from 'ol/geom';
 import { tassign } from 'tassign';
-import { IQueryState } from '@farmmaps/common';
+import * as mapActions from '../../actions/map.actions';
+import * as mapReducers from '../../reducers/map.reducer';
 
 
 @Injectable()
@@ -23,8 +20,9 @@ export abstract class AbstractFeatureListComponent {
 
   handleFeatureClick(feature:Feature<Geometry>) {
     if(feature) {
+      this.store.dispatch(new mapActions.ClickFeature(feature));
       const action = this.getAction(feature);
-      this.store.dispatch(action);  
+      this.store.dispatch(action);
     }
   }
 
@@ -36,11 +34,11 @@ export abstract class AbstractFeatureListComponent {
       return new mapActions.DoQuery(newQuery)  
   }
 
-  handleFeatureMouseEnter(feature) {
+  handleFeatureMouseEnter(feature:Feature<Geometry>) {
     this.store.dispatch(new mapActions.SelectFeature(feature));
   }
 
-  handleFeatureMouseLeave(feature) {
+  handleFeatureMouseLeave() {
     this.store.dispatch(new mapActions.SelectFeature(null));
   }
 

projects/common-map/src/fm-map/components/feature-thumbnail/feature-thumbnail.component.ts

@@ -1,7 +1,7 @@
-import { Component, Input, AfterViewInit, ViewChild } from '@angular/core';
-import { Feature} from 'ol';
-import { Geometry,Polygon,MultiPolygon } from 'ol/geom';
+import { AfterViewInit, Component, Input, ViewChild } from '@angular/core';
+import { Feature } from 'ol';
 import * as extent from 'ol/extent';
+import { Geometry, Polygon } from 'ol/geom';
 import * as render from 'ol/render';
 import * as style from 'ol/style';
 

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 { Directive, Input, OnInit, TemplateRef, ViewContainerRef } from '@angular/core';
+import { MapComponent } from 'ng-openlayers';
 import { Layer } from 'ol/layer';
 import { Source } from 'ol/source';
-import { MapComponent } from 'ngx-openlayers';
 
 @Directive({
   selector: '[fmMapIfZoomToShow]',
@@ -36,7 +36,7 @@ export class ifZoomToShowDirective  implements OnInit {
   }
 
   ngOnInit() {    
-    this.map$.instance.on('moveend', (e) => {
+    this.map$.instance.on('moveend', () => {
       this.checkZoom();     
     });
   }

projects/common-map/src/fm-map/components/item-list-item-container/item-list-item-container.component.ts

@@ -1,7 +1,7 @@
-import { Component, Input, OnInit, ComponentFactoryResolver, ViewChild, SimpleChanges, ComponentFactory, Inject, Type} from '@angular/core';
-import { AbstractItemListItemComponent,ItemListItemComponent } from '../item-list-item/item-list-item.component';
+import { Component, ComponentFactory, ComponentFactoryResolver, Inject, Input, SimpleChanges, ViewChild } from '@angular/core';
+import { IListItem } from '@farmmaps/common';
+import { AbstractItemListItemComponent, ItemListItemComponent } from '../item-list-item/item-list-item.component';
 import { WidgetHostDirective } from '../widget-host/widget-host.directive';
-import { IItem, IListItem } from '@farmmaps/common';
 
 
 @Component({
@@ -27,7 +27,6 @@ export class ItemListItemContainerComponent {
 
     let selected = -1;
     let maxMatches =0;
-    const showItem = true;
     for (let i = 0; i < this.itemComponentList.length; i++) {
       let matches=0;
       let criteria=0;

projects/common-map/src/fm-map/components/item-list-item/item-list-item.component.scss

@@ -1,5 +1,3 @@
-@import "~bootstrap/scss/bootstrap.scss";
-
 .widget {
   padding:0.8rem;
   height:100%;

projects/common-map/src/fm-map/components/item-list/item-list.component.scss

@@ -1,5 +1,3 @@
-@import "~bootstrap/scss/bootstrap.scss";
-
 .widget-container {
   overflow:auto;
   margin-bottom:1rem;
@@ -7,7 +5,7 @@
 
 .widget {
   position:relative;
-  border: 1px solid $gray-500;
+  border: 1px solid var(--bs-gray-500);
   user-select: none;
   display:inline-block;
   width:50%;
@@ -28,7 +26,7 @@
 }
 
 .widget:hover {
-  background-color: $gray-100;
+  background-color: var(--bs-gray-100);
 }
 
 .widget-container {

projects/common-map/src/fm-map/components/item-widget-list/item-widget-list.component.scss

@@ -1,5 +1,3 @@
-@import "~bootstrap/scss/bootstrap.scss";
-
 .widget-container {
   overflow:auto;
   margin-bottom:1rem;
@@ -7,7 +5,7 @@
 
 .widget {
   position:relative;
-  border: 1px solid $gray-500;
+  border: 1px solid var(--bs-gray-500);
   user-select: none;
   display:inline-block;
   width:50%;
@@ -28,7 +26,7 @@
 }
 
 .widget:hover {
-  background-color: $gray-100;
+  background-color: var(--bs-gray-100);
 }
 
 .widget-container {

projects/common-map/src/fm-map/components/item-widget-list/item-widget-list.component.ts

@@ -1,8 +1,8 @@
-import { Component, Input, Injectable, Inject, Optional,ComponentFactoryResolver, ViewContainerRef, QueryList, ComponentFactory, ViewChildren,AfterViewInit } from '@angular/core';
 import { Location } from '@angular/common';
+import { AfterViewInit, Component, ComponentFactory, ComponentFactoryResolver, Inject, Injectable, Input, Optional, QueryList, ViewChildren, ViewContainerRef } from '@angular/core';
+import { IListItem, ItemTypeService, commonReducers } from '@farmmaps/common';
 import { Store } from '@ngrx/store';
 import * as mapReducers from '../../reducers/map.reducer';
-import { commonReducers,ItemTypeService, IItem, Item,IListItem } from '@farmmaps/common';
 import { AbstractItemWidgetComponent } from '../item-list-item/item-list-item.component';
 
 

projects/common-map/src/fm-map/components/layer-switcher/layer-switcher.component.scss

@@ -1,18 +1,15 @@
-@import "~bootstrap/scss/bootstrap.scss";
-
-
 .layer-switcher {  
   display:block; 
   width:2.5em;
   height:2.5em;
-  background-color: $body-bg;
+  background-color: var(--bs-body-bg);
   background-size: contain;
   margin-top:0.5em;
   text-align: center;
   line-height: 2.5em; 
   border-radius: 1.75em;
   padding: 0;
-  color: $secondary;
+  color: var(--bs-secondary);
 }
 
 .layer-switcher i {
@@ -24,7 +21,7 @@
 }
 
 .layers {
-  color:$secondary;
+  color:var(--bs-secondary);
   position: absolute;
   overflow: hidden;
   bottom: -1em;

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

@@ -1,10 +1,10 @@
-import { Component, OnInit,  OnChanges, SimpleChanges } from '@angular/core';
-import {IItemLayer} from '../../models/item.layer';
+import { Component, OnChanges, OnInit } from '@angular/core';
 import { Store } from '@ngrx/store';
-import * as mapReducers from '../../reducers/map.reducer';
-import * as mapActions from '../../actions/map.actions';
-import {createEmpty,extend } from 'ol/extent';
+import { createEmpty, extend } from 'ol/extent';
 import { Observable } from 'rxjs';
+import * as mapActions from '../../actions/map.actions';
+import { IItemLayer } from '../../models/item.layer';
+import * as mapReducers from '../../reducers/map.reducer';
 
 @Component({
   selector: 'fm-map-layer-switcher',
@@ -32,11 +32,9 @@ export class LayerSwitcher  implements OnInit,OnChanges{
     this.showLayerSwitcher = this.store.select(mapReducers.selectGetShowLayerSwitcher);
   }
 
-  ngOnChanges(changes: SimpleChanges) {
+  ngOnChanges() {
   }
 
-
-
   handleClick(event:Event) {
     event.stopPropagation();
     this.store.dispatch(new mapActions.ShowLayerSwitcher(true));
@@ -47,8 +45,6 @@ export class LayerSwitcher  implements OnInit,OnChanges{
     this.store.dispatch(new mapActions.ShowLayerSwitcher(false));
   }
 
-
-
   handleOnToggleVisibility(itemLayer: IItemLayer) {
     this.store.dispatch(new mapActions.SetVisibility(itemLayer,!itemLayer.visible));
   }

projects/common-map/src/fm-map/components/legend/histogram-details/histogram-details.component.html

@@ -1,15 +1,15 @@
 <div class="row ps-3">
   <div class="col-8 nopadding"><span i18n>Average</span>:</div>
-  <div class="col-4 pull-left nopadding">{{histogram.mean| number:'1.0-2'}}</div>
+  <div class="col-4 pull-left nopadding">{{ getScaledValue(histogram.mean)| number:'1.0-2'}}</div>
   <div class="col-8 nopadding"><span i18n>Standard deviation</span>:</div>
-  <div class="col-4 pull-left nopadding">{{histogram.stddev| number:'1.0-2'}}</div>
+  <div class="col-4 pull-left nopadding">{{ getScaledValue(histogram.stddev)| number:'1.0-2'}}</div>
   <div class="col-8 nopadding"><span i18n>Min</span>:</div>
-  <div class="col-4 pull-left nopadding">{{histogram.min| number:'1.0-2'}}</div>
+  <div class="col-4 pull-left nopadding">{{ getScaledValue(histogram.min)| number:'1.0-2'}}</div>
   <div class="col-8 nopadding" ><span i18n>Max</span>:</div>
-  <div class="col-4 pull-left nopadding">{{histogram.max| number:'1.0-2'}}</div>
+  <div class="col-4 pull-left nopadding">{{ getScaledValue(histogram.max)| number:'1.0-2'}}</div>
 
   <ng-container *ngIf="showConfidenceInterval()">
     <div class="col-8 nopadding"><span i18n>Confidence interval</span>:</div>
-    <div class="col-4 pull-left nopadding">{{histogram.confidence * 100| number:'1.0-0'}}%</div>
+    <div class="col-4 pull-left nopadding">{{ getScaledValue(histogram.confidence * 100)| number:'1.0-0'}}%</div>
   </ng-container>
 </div>

projects/common-map/src/fm-map/components/legend/histogram-details/histogram-details.component.ts

@@ -1,5 +1,5 @@
-import {Component, Input} from '@angular/core';
-import {IHistogram, ILayer} from '../../../models/color.map';
+import { Component, Input } from '@angular/core';
+import { IHistogram } from '../../../models/color.map';
 
 @Component({
   selector: 'fm-map-histogram-details',
@@ -14,6 +14,17 @@ export class HistogramDetailsComponent {
   @Input()
   histogram: IHistogram;
 
+  @Input()
+  scale: number | null;
+
+  public getScaledValue(value: number): number {
+    let v = value;
+    if (this.scale && this.scale != 0) {
+      v = this.scale * value;
+    }
+    return v;
+  }
+
   showConfidenceInterval(): boolean {
     return this.histogram.confidence != null && this.histogram.confidence !== 1;
   }

projects/common-map/src/fm-map/components/legend/legend.component.html

@@ -35,7 +35,7 @@
         </ng-container>
 
         <ng-template #histogram>
-          <fm-map-histogram-details [histogram]="layer.renderer.band.histogram"></fm-map-histogram-details>
+          <fm-map-histogram-details [histogram]="layer.renderer.band.histogram" [scale]="layer.scale"></fm-map-histogram-details>
         </ng-template>
       </div>
     </td>

projects/common-map/src/fm-map/components/legend/legend.component.ts

@@ -1,5 +1,5 @@
-import { Component, OnInit, Input,AfterViewInit } from '@angular/core';
-import { IColorMap, IColor, IColorEntry,ILayer, IRenderer } from '../../models/color.map';
+import { AfterViewInit, Component, Input, OnInit } from '@angular/core';
+import { IColor, ILayer, IRenderer } from '../../models/color.map';
 
 
 @Component({

projects/common-map/src/fm-map/components/map-search/map-search.component.html

@@ -5,12 +5,12 @@
 
 <div class="map-search collapsed" [ngClass]="{'collapsed':collapsedLocal,searchcollapsed:searchMinifiedLocal}" (click)="$event.stopPropagation()">
   <div class="card p-2">
-    <form class="form" (ngSubmit)="handleSearch($event)">
+    <form class="form" (ngSubmit)="handleSearch()">
       <div class="input-group">
-        <button type="button" class="btn btn-outline-secondary" (click)="handleToggleMenu($event)"><i class="fal fa-bars" aria-hidden="true"></i></button>
-        <input #searchText class="form-control" type="text" (focus)="handleFocus($event)" [ngModel]="searchTextLocal" name="searchTextLocal" (ngModelChange)="handleChange($event)" [ngbTypeahead]="search" [resultTemplate]="rt" [inputFormatter]="formatter" (selectItem)="handleSelect($event)" placeholder="Search" i18n-placeholder />
+        <button type="button" class="btn btn-outline-secondary" (click)="handleToggleMenu()"><i class="fal fa-bars" aria-hidden="true"></i></button>
+        <input #searchText class="form-control" type="text" (focus)="handleFocus()" [ngModel]="searchTextLocal" name="searchTextLocal" (ngModelChange)="handleChange($event)" [ngbTypeahead]="search" [resultTemplate]="rt" [inputFormatter]="formatter" (selectItem)="handleSelect($event)" placeholder="Search" i18n-placeholder />
         <button type="submit" class="btn btn-outline-secondary" [disabled]="disabled"><i class="fal fa-search"></i></button>
-        <button type="button" class="clear btn btn-outline-secondary" [disabled]="!clearEnabled" (click)="handleClearClick($event)"><i class="fas fa-times"></i></button>
+        <button type="button" class="clear btn btn-outline-secondary" [disabled]="!clearEnabled" (click)="handleClearClick()"><i class="fas fa-times"></i></button>
       </div>
       <div class="options">
         <div class="form-check">

projects/common-map/src/fm-map/components/map-search/map-search.component.scss

@@ -1,5 +1,3 @@
-@import "~bootstrap/scss/bootstrap.scss";
-
 div.map-search {
   position: absolute;
   top: 0.5rem;
@@ -106,7 +104,7 @@ div.map-search.searchcollapsed button[type="submit"] {
 }
 
 .form-control, .form-control:focus {
-  border-color: $secondary;
+  border-color: var(--bs-secondary);
 }
 
 

projects/common-map/src/fm-map/components/map-search/map-search.component.ts

@@ -1,10 +1,9 @@
-import { Component, Input, Output, OnInit, EventEmitter, SimpleChanges, OnChanges, ViewChild } from '@angular/core';
-import { Observable ,  of,merge,forkJoin } from 'rxjs';
-import { debounceTime,distinctUntilChanged,tap,switchMap,catchError,map} from 'rxjs/operators';
-import { TypeaheadService, TimespanService } from '@farmmaps/common';
-import { IQueryState } from '@farmmaps/common';
-import { IPeriodState } from '../../models/period.state';
+import { Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
+import { IQueryState, TimespanService, TypeaheadService } from '@farmmaps/common';
+import { Observable, forkJoin, of } from 'rxjs';
+import { catchError, debounceTime, distinctUntilChanged, map, switchMap, tap } from 'rxjs/operators';
 import { tassign } from 'tassign';
+import { IPeriodState } from '../../models/period.state';
 
 @Component({
   selector: 'fm-map-map-search',
@@ -54,7 +53,6 @@ export class MapSearchComponent {
   public searchMinifiedLocal = false;
   public periodLocal: IPeriodState = { startDate:new Date(new Date(Date.now()).getFullYear(), new Date(Date.now()).getMonth() - 3, 1), endDate:new Date(Date.now())};
   public filterOptionsLocal: IQueryState;
-  private extent: number[];
   public searchTextLocal: any;
   public searchTextLocalOutput: string; 
   public dateFilter = true; 
@@ -81,12 +79,12 @@ export class MapSearchComponent {
           catchError(() => {
             this.searchFailed = true;
             return of([]);
-          }),map( (sa:string[]) => sa.map((s,i) => ({"name":s,"type":"tag"})))),
+          }),map( (sa:string[]) => sa.map((s) => ({"name":s,"type":"tag"})))),
           this.typeaheadService.getCityTypeaheadItems(term).pipe(
             catchError(() => {
               this.searchFailed = true;
               return of([]);
-            }),map( (sa:string[]) => sa.map((s,i) => ({"name":s,"type":"city"})))),
+            }),map( (sa:string[]) => sa.map((s) => ({"name":s,"type":"city"})))),
         ).pipe(map(([a1,a2]) => [...a1, ...a2] ),map(a => a.sort((a, b) => (a.name.toUpperCase() > b.name.toUpperCase()) ? 1 : -1)))
       ),
       tap(() => this.searching = false),
@@ -94,7 +92,7 @@ export class MapSearchComponent {
 
   formatter = (x: { name: string }) => x.name;
 
-  handleSearch(event) {
+  handleSearch() {
     this.filterOptionsLocal.tags = null;
     this.filterOptionsLocal.itemType = null;
     this.filterOptionsLocal.itemCode = null;
@@ -168,11 +166,11 @@ export class MapSearchComponent {
   }
 
 
-  handleToggleMenu(event) {
+  handleToggleMenu() {
     this.onToggleMenu.emit({});
   }  
 
-  handleFocus(event) {
+  handleFocus() {
     this.onSearchExpand.emit({});
   }
 
@@ -187,7 +185,7 @@ export class MapSearchComponent {
       this.disabled = true;
   }
 
-  handleClearClick(event) {
+  handleClearClick() {
     this.onClear.emit({});
   }
 

projects/common-map/src/fm-map/components/map/map.component.html

@@ -10,6 +10,7 @@
   panelVisible:panelVisible$|async,
   openedModalName:openedModalName$|async,
   panelCollapsed:panelCollapsed$|async,
+  panelExtraWide:panelExtraWide$|async,
   searchMinified:searchMinified$|async,
   selectedItem:selectedItem$|async,
   parentItem:parentItem$|async,
@@ -60,11 +61,11 @@
     <fm-map-file-drop-target [parentCode]="state.parentCode" (onFileDropped)="handleFileDropped($event)"></fm-map-file-drop-target>
 
     <div *ngIf="noContent">
-      <fm-map-map-search #mapSearch [openedModalName]="state.openedModalName" (onOpenModal)="handleOpenModal($event)" (onCloseModal)="handleCloseModal()" [ngClass]="{'menuVisible':state.menuVisible}" (onToggleMenu)="handleToggleMenu($event)" (onSearchCollapse)="handleSearchCollapse($event)" (onSearchExpand)="handleSearchExpand($event)" [collapsed]="state.searchCollapsed" [searchMinified]="state.searchMinified" (onSearch)="handleSearch($event)" (onClear)="handleClearSearch($event)" [filterOptions]="state.queryState" [clearEnabled]="state.clearEnabled" [period]="state.period" (onPeriodChange)="handlePeriodChange($event)" (onCitySearch)="handleCitySearch($event)"></fm-map-map-search>
+      <fm-map-map-search #mapSearch [openedModalName]="state.openedModalName" (onOpenModal)="handleOpenModal($event)" (onCloseModal)="handleCloseModal()" [ngClass]="{'menuVisible':state.menuVisible}" (onToggleMenu)="handleToggleMenu()" (onSearchCollapse)="handleSearchCollapse()" (onSearchExpand)="handleSearchExpand()" [collapsed]="state.searchCollapsed" [searchMinified]="state.searchMinified" (onSearch)="handleSearch($event)" (onClear)="handleClearSearch()" [filterOptions]="state.queryState" [clearEnabled]="state.clearEnabled" [period]="state.period" (onPeriodChange)="handlePeriodChange($event)" (onCitySearch)="handleCitySearch($event)"></fm-map-map-search>
     </div>
     <div class="side-panel-container">
       
-      <fm-side-panel [resizeable]="true" (onResize)="handlePanelResize($event)" [visible]="state.panelVisible && noContent" [collapsed]="state.panelCollapsed" [collapsable]="false">
+      <fm-side-panel [resizeable]="true" (onResize)="handlePanelResize($event)" [visible]="state.panelVisible && noContent" [collapsed]="state.panelCollapsed" [collapsable]="false" [extrawide]="state.panelExtraWide">
         <div class="panel-wrapper" *ngIf="noContent">
           <div class="panel-top bg-secondary" *ngIf="!(state.searchMinified)">
           </div>
@@ -84,7 +85,7 @@
           </div>
         </div>  
       </fm-side-panel>
-      <fm-side-panel [resizeable]="true" [visible]="!noContent">
+      <fm-side-panel [resizeable]="true" [visible]="!noContent" [extrawide]="state.panelExtraWide">
         <router-outlet (activate)="handleSidepaneloutletActivate($event)" (deactivate)="handleSidepaneloutletDeactivate($event)"></router-outlet>
       </fm-side-panel>
     </div>   

projects/common-map/src/fm-map/components/map/map.component.scss

@@ -1,5 +1,3 @@
-@import "~bootstrap/scss/bootstrap.scss";
-
 aol-map { position:absolute;width:100%;height:calc( 100vh );}
 
 .arrow {
@@ -195,7 +193,7 @@ timespan.menuVisible {
   width: 4rem;
   overflow: hidden;
   text-overflow: ellipsis;
-  color: $primary;
+  color: var(--bs-primary);
 }
 
 .shortcut-icon > .farm-icon {

projects/common-map/src/fm-map/components/map/map.component.ts

@@ -1,42 +1,29 @@
-import { Component, OnInit, OnDestroy, HostListener, ViewChild, AfterViewInit,NgZone,ElementRef } from '@angular/core';
-import { Location } from '@angular/common';
-import { Observable, Subject, Subscription, from,of ,EMPTY } from 'rxjs';
-import { withLatestFrom, switchMap,skip  } from 'rxjs/operators';
-import { Router, ActivatedRoute, ParamMap } from '@angular/router';
+/* eslint-disable no-prototype-builtins */
+import { AfterViewInit, Component, ElementRef, HostListener, NgZone, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { ActivatedRoute, ParamMap, Router } from '@angular/router';
+import { DeviceService, GeolocatorService, IItem, IItemType, IQueryState, ItemTypeService, ResumableFileUploadService, StateSerializerService, commonActions, commonReducers } from '@farmmaps/common';
 import { Store } from '@ngrx/store';
-import { DeviceService } from '@farmmaps/common';
-import {getRenderPixel} from 'ol/render';
-
-// Map
-import * as mapReducers from '../../reducers/map.reducer';
-import * as mapActions from '../../actions/map.actions';
-import { IMapState} from '../../models/map.state';
-import { IClickedFeature} from '../../models/clicked.feature';
-import { IQuery } from '../../reducers/map.reducer'
-import { ISelectedFeatures } from '../../models/selected.features';
-import { IItemLayer } from '../../models/item.layer';
-import { IListItem, IQueryState } from '@farmmaps/common';
-import { IPeriodState } from '../../models/period.state';
-import {IStyles} from '../../models/style.cache';
-import { IDroppedFile } from '../aol/file-drop-target/file-drop-target.component';
-import { StateSerializerService } from '@farmmaps/common';
-import { GeolocationService} from '../../services/geolocation.service';
-import { GeolocatorService } from '@farmmaps/common';
-import {DeviceOrientationService} from '../../services/device-orientation.service';
-
-// AppCommon
-import { ResumableFileUploadService, ItemTypeService } from '@farmmaps/common';
-import { IItemType, IItem } from '@farmmaps/common';
-import {commonReducers} from '@farmmaps/common';
-import {commonActions} from '@farmmaps/common';
-
-import {Feature} from 'ol';
-import {Geometry,Point,Circle} from 'ol/geom';
-import {Extent,createEmpty,extend } from 'ol/extent';
-import {transform} from 'ol/proj';
-import { tassign } from 'tassign';
+import { Feature } from 'ol';
+import { Extent, createEmpty, extend } from 'ol/extent';
+import { Circle, Geometry, Point } from 'ol/geom';
+import { transform } from 'ol/proj';
+import { getRenderPixel } from 'ol/render';
 import * as style from 'ol/style';
-
+import { EMPTY, Observable, Subject, Subscription, from, of } from 'rxjs';
+import { skip, switchMap, withLatestFrom } from 'rxjs/operators';
+import { tassign } from 'tassign';
+import * as mapActions from '../../actions/map.actions';
+import { IClickedFeature } from '../../models/clicked.feature';
+import { IItemLayer } from '../../models/item.layer';
+import { IMapState } from '../../models/map.state';
+import { IPeriodState } from '../../models/period.state';
+import { ISelectedFeatures } from '../../models/selected.features';
+import { IStyles } from '../../models/style.cache';
+import * as mapReducers from '../../reducers/map.reducer';
+import { IQuery } from '../../reducers/map.reducer';
+import { DeviceOrientationService } from '../../services/device-orientation.service';
+import { GeolocationService } from '../../services/geolocation.service';
+import { IDroppedFile } from '../aol/file-drop-target/file-drop-target.component';
 
 @Component({
   selector: 'fm-map-map',
@@ -66,6 +53,7 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
   public parentCode$: Observable<string> =this.store.select(mapReducers.selectGetParentCode);
   public panelVisible$: Observable<boolean> = this.store.select(mapReducers.selectGetPanelVisible);
   public panelCollapsed$: Observable<boolean> = this.store.select(mapReducers.selectGetPanelCollapsed);
+  public panelExtraWide$: Observable<boolean> = this.store.select(mapReducers.selectGetPanelExtraWide);
   public selectedFeature$: Observable<Feature<Geometry>> = this.store.select(mapReducers.selectGetSelectedFeature);
   public clickedFeature: Subject<Feature<Geometry>> = new Subject<Feature<Geometry>>();
   public selectedItem$: Observable<IItem> = this.store.select(mapReducers.selectGetSelectedItem);
@@ -105,7 +93,6 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
     private uploadService: ResumableFileUploadService,
     private serializeService: StateSerializerService,
     public itemTypeService: ItemTypeService,
-    private location: Location,
     private geolocationService: GeolocationService,
     private geolocaterService: GeolocatorService,
     private zone: NgZone,
@@ -192,6 +179,7 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
   }
 
   handleFeatureClick(feature: Feature<Geometry>) {
+    this.store.dispatch(new mapActions.ClickFeature(feature));
     this.clickedFeature.next(feature);
   }
 
@@ -207,12 +195,18 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
    if(component && component.hasOwnProperty('clickedFeature')) {
      (component as IClickedFeature).clickedFeature = this.clickedFeature;
    }
+   if(component && component.hasOwnProperty('extrawide')) {
+    this.store.dispatch(new mapActions.SetPanelExtraWide(true));
   }
+ }
 
   handleSidepaneloutletDeactivate(component:any) {
     if(component && component.hasOwnProperty('clickedFeature')) {
       (component as IClickedFeature).clickedFeature = null;
     }
+    if(component && component.hasOwnProperty('extrawide')) {
+      this.store.dispatch(new mapActions.SetPanelExtraWide(false));
+    }
   }
 
   handlePrerender(event:any) {
@@ -381,15 +375,15 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
     });
   }
 
-  handleSearchCollapse(event) {
+  handleSearchCollapse() {
     this.store.dispatch(new mapActions.CollapseSearch());
   }
 
-  handleSearchExpand(event) {
+  handleSearchExpand() {
     this.store.dispatch(new mapActions.ExpandSearch());
   }
 
-  handleToggleMenu(event) {
+  handleToggleMenu() {
     this.store.dispatch(new commonActions.ToggleMenu());
   }
 
@@ -470,11 +464,11 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
     });
   }
 
-  handleOnDownload(event) {
+  handleOnDownload() {
 
   }
 
-  handleClearSearch(event) {
+  handleClearSearch() {
     this.store.dispatch(new mapActions.Clear());
   }
 

projects/common-map/src/fm-map/components/meta-data-modal/meta-data-modal.component.html

@@ -1,5 +1,5 @@
 <ng-template #content let-c="close" let-d="dismiss">
-  <form [formGroup]="metaDataForm" (ngSubmit)="handleMetaDataEntered($event)">
+  <form [formGroup]="metaDataForm" (ngSubmit)="handleMetaDataEntered()">
     <div class="modal-header">
       <h4 class="modal-title" i18n>Add metadata</h4>
       <button type="button" class="close" aria-label="Close" (click)="d('Cross click'); onCloseModal.emit()">

projects/common-map/src/fm-map/components/meta-data-modal/meta-data-modal.component.ts

@@ -1,8 +1,8 @@
-import { Component, Output, ViewChild, EventEmitter, Input, ElementRef, HostListener } from '@angular/core';
-import { UntypedFormGroup,UntypedFormBuilder, Validators } from '@angular/forms';
+import { Component, ElementRef, EventEmitter, Input, Output, ViewChild } from '@angular/core';
+import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 import { IListItem } from '@farmmaps/common';
+import { NgbModal, NgbModalRef } from "@ng-bootstrap/ng-bootstrap";
 import { IDroppedFile } from '../aol/file-drop-target/file-drop-target.component';
-import {NgbModal, NgbModalRef} from "@ng-bootstrap/ng-bootstrap";
 
 export interface IMetaData {
   droppedFile: IDroppedFile,
@@ -37,7 +37,7 @@ export class MetaDataModalComponent {
 
   public metaDataForm: UntypedFormGroup;
 
-  handleMetaDataEntered(event) {
+  handleMetaDataEntered() {
     if (this.metaDataForm.valid) {
       this.onAddFilesWithMetaData.emit({ droppedFile: this.droppedFile, attributes: { name: this.metaDataForm.value.name } });
     }
@@ -48,7 +48,7 @@ export class MetaDataModalComponent {
       setTimeout(() => this.modalRef = this.modalService.open(this._templateModal, { backdrop: 'static', keyboard: false }));     
   }  
 
-  closeModal()  {
+  closeModal() {
       this.modalRef.close();
       this.metaDataForm.patchValue({ name: "" });
   }

projects/common-map/src/fm-map/components/select-period-modal/select-period-modal.component.ts

@@ -1,7 +1,6 @@
-import { Component, Output, ViewChild, EventEmitter, Input, ElementRef, HostListener } from '@angular/core';
-import { FormGroup, FormBuilder, Validators } from '@angular/forms';
-import { NgbModal, NgbModalRef, NgbDateStruct, NgbCalendar, NgbDateAdapter } from "@ng-bootstrap/ng-bootstrap";
+import { Component, ElementRef, EventEmitter, Input, Output, ViewChild } from '@angular/core';
 import { NgbDateNativeAdapter } from '@farmmaps/common';
+import { NgbDateStruct, NgbModal, NgbModalRef } from "@ng-bootstrap/ng-bootstrap";
 
 
 const equals = (one: NgbDateStruct, two: NgbDateStruct) =>
@@ -52,7 +51,7 @@ export class SelectPeriodModalComponent {
   @Output() onCloseModal = new EventEmitter<any>();
   @Output() onSelect = new EventEmitter<{ startDate: Date, endDate: Date }>();
   
-  constructor(private modalService: NgbModal, private calendar: NgbCalendar) { }
+  constructor(private modalService: NgbModal) { }
 
   openModal() {
       //Timeout trick to avoid ExpressionChangedAfterItHasBeenCheckedError 

projects/common-map/src/fm-map/components/selected-item-container/selected-item-container.component.scss

@@ -1,13 +1,9 @@
-@import "~bootstrap/scss/bootstrap.scss";
-
-
-
 .row {
-  border-bottom: 1px solid $gray-500;
+  border-bottom: 1px solid var(--bs-gray-500);
   user-select: none;
 }
 
 .row:hover {
-  background-color: $gray-100;
+  background-color: var(--bs-gray-100);
 }
 

projects/common-map/src/fm-map/components/selected-item-container/selected-item-container.component.ts

@@ -1,8 +1,8 @@
-import { Component, Input, OnInit, ComponentFactoryResolver, ViewChild, SimpleChanges, ComponentFactory, Inject, Type} from '@angular/core';
+import { Component, ComponentFactory, ComponentFactoryResolver, Inject, Input, SimpleChanges, ViewChild } from '@angular/core';
 import { IItem } from '@farmmaps/common';
-import { AbstractSelectedItemComponent, SelectedItemComponent  } from '../selected-item/selected-item.component';
-import { WidgetHostDirective } from '../widget-host/widget-host.directive';
 import { IItemLayer } from '../../models/item.layer';
+import { AbstractSelectedItemComponent, SelectedItemComponent } from '../selected-item/selected-item.component';
+import { WidgetHostDirective } from '../widget-host/widget-host.directive';
 
 
 @Component({
@@ -28,7 +28,6 @@ export class SelectedItemContainerComponent {
 
     let selected = -1;
     let maxMatches =0;
-    const showItem = true;
     for (let i = 0; i < this.selectedItemComponents.length; i++) {
       let matches=0;
       let criteria=0;

projects/common-map/src/fm-map/components/selected-item-cropfield/selected-item-cropfield.component.scss

@@ -1,5 +1,3 @@
-@import "~bootstrap/scss/bootstrap.scss";
-
 .big-icon {
   width: 100%;
   color: white;

projects/common-map/src/fm-map/components/selected-item-cropfield/selected-item-cropfield.component.ts

@@ -1,16 +1,15 @@
-import { Component, Input, Injectable, OnInit } from '@angular/core';
 import { Location } from '@angular/common';
-import { Feature } from 'ol';
+import { Component, Injectable, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { FolderService, IItem, IListItem, ItemService, ItemTypeService, commonReducers } from '@farmmaps/common';
 import { Store } from '@ngrx/store';
+import { GeoJSON } from 'ol/format';
+import { getArea } from 'ol/sphere';
+import { Observable, of } from 'rxjs';
+import { combineLatest, switchMap } from 'rxjs/operators';
 import * as mapReducers from '../../reducers/map.reducer';
-import { commonReducers, ItemTypeService, IItem, Item, ItemService, FolderService, IListItem} from '@farmmaps/common';
-import { Router, ActivatedRoute, ParamMap, Event } from '@angular/router';
 import { ForItemType } from '../for-item/for-itemtype.decorator';
 import { AbstractSelectedItemComponent } from '../selected-item/selected-item.component';
-import { Observable,of } from 'rxjs';
-import {GeoJSON} from 'ol/format';
-import {getArea} from 'ol/sphere';
-import { withLatestFrom,switchMap,combineLatest } from 'rxjs/operators';
 
 
 @ForItemType("vnd.farmmaps.itemtype.cropfield")
@@ -24,7 +23,7 @@ export class SelectedItemCropfieldComponent extends AbstractSelectedItemComponen
 
   public items: Observable<IListItem[]>;
 
-  constructor(store: Store<mapReducers.State | commonReducers.State>, itemTypeService: ItemTypeService, location: Location, router: Router, private itemService$: ItemService,private folderService$: FolderService) {
+  constructor(store: Store<mapReducers.State | commonReducers.State>, itemTypeService: ItemTypeService, location: Location, router: Router, private itemService$: ItemService, private folderService$: FolderService) {
     super(store, itemTypeService,location,router);
   }
 
@@ -43,7 +42,7 @@ export class SelectedItemCropfieldComponent extends AbstractSelectedItemComponen
     const atLocationItems = this.itemService$.getItemList(null,null,null,this.item.code,true);
     this.items =  childItems.pipe(
       combineLatest(atLocationItems),
-      switchMap(([ci,ali]) => {
+      switchMap(([ci, ali]) => {
           const retVal:IListItem[] = [];
           const codes = {};
           ci.forEach((listItem) => {

projects/common-map/src/fm-map/components/selected-item-geotiff/selected-item-geotiff.component.scss

@@ -1,5 +1,3 @@
-@import "~bootstrap/scss/bootstrap.scss";
-
 .big-icon {
   width: 100%;
   color: white;

projects/common-map/src/fm-map/components/selected-item-geotiff/selected-item-geotiff.component.ts

@@ -1,12 +1,12 @@
-import { Component, Injectable } from '@angular/core';
 import { Location } from '@angular/common';
-import { Store } from '@ngrx/store';
-import * as mapReducers from '../../reducers/map.reducer';
-import { commonReducers, ItemTypeService, ItemService, FolderService } from '@farmmaps/common';
+import { Component, Injectable } from '@angular/core';
 import { Router } from '@angular/router';
+import { ItemTypeService, commonReducers } from '@farmmaps/common';
+import { Store } from '@ngrx/store';
+import * as mapActions from '../../actions/map.actions';
+import * as mapReducers from '../../reducers/map.reducer';
 import { ForItemType } from '../for-item/for-itemtype.decorator';
 import { AbstractSelectedItemComponent } from '../selected-item/selected-item.component';
-import * as mapActions from '../../actions/map.actions';
 
 
 @ForItemType("vnd.farmmaps.itemtype.geotiff.processed")
@@ -18,7 +18,7 @@ import * as mapActions from '../../actions/map.actions';
 })
 export class SelectedItemGeotiffComponent extends AbstractSelectedItemComponent {
 
-  constructor(store: Store<mapReducers.State | commonReducers.State>, itemTypeService: ItemTypeService, location: Location, router: Router, private itemService$: ItemService,private folderService$: FolderService) {
+  constructor(store: Store<mapReducers.State | commonReducers.State>, itemTypeService: ItemTypeService, location: Location, router: Router) {
     super(store, itemTypeService,location,router);
   }
 

projects/common-map/src/fm-map/components/selected-item-shape/selected-item-shape.component.scss

@@ -1,5 +1,3 @@
-@import "~bootstrap/scss/bootstrap.scss";
-
 .big-icon {
   width: 100%;
   color: white;

projects/common-map/src/fm-map/components/selected-item-shape/selected-item-shape.component.ts

@@ -1,14 +1,12 @@
-import { Component, Input, Injectable, OnInit } from '@angular/core';
 import { Location } from '@angular/common';
-import { Feature } from 'ol';
+import { Component, Injectable } from '@angular/core';
+import { Router } from '@angular/router';
+import { ItemTypeService, commonReducers } from '@farmmaps/common';
 import { Store } from '@ngrx/store';
-import * as mapReducers from '../../reducers/map.reducer';
-import { commonReducers, ItemTypeService, IItem, Item, ItemService, FolderService, IListItem} from '@farmmaps/common';
 import * as mapActions from '../../actions/map.actions';
-import { Router, ActivatedRoute, ParamMap, Event } from '@angular/router';
+import * as mapReducers from '../../reducers/map.reducer';
 import { ForItemType } from '../for-item/for-itemtype.decorator';
 import { AbstractSelectedItemComponent } from '../selected-item/selected-item.component';
-import { Observable } from 'rxjs';
 
 
 @ForItemType("vnd.farmmaps.itemtype.shape.processed")
@@ -20,7 +18,7 @@ import { Observable } from 'rxjs';
 })
 export class SelectedItemShapeComponent extends AbstractSelectedItemComponent {
 
-  constructor(store: Store<mapReducers.State | commonReducers.State>, itemTypeService: ItemTypeService, location: Location, router: Router, private itemService$: ItemService,private folderService$: FolderService) {
+  constructor(store: Store<mapReducers.State | commonReducers.State>, itemTypeService: ItemTypeService, location: Location, router: Router) {
     super(store, itemTypeService,location,router);
   }
   public selectedLayer = 0;

projects/common-map/src/fm-map/components/selected-item-temporal/selected-item-temporal.component.scss

@@ -1,5 +1,3 @@
-@import "~bootstrap/scss/bootstrap.scss";
-
 .big-icon {
   width: 100%;
   color: white;

projects/common-map/src/fm-map/components/selected-item/selected-item.component.scss

@@ -1,5 +1,3 @@
-@import "~bootstrap/scss/bootstrap.scss";
-
 .big-icon {
   width: 100%;
   color: white;

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

@@ -1,35 +1,34 @@
 import { Injectable } from '@angular/core';
 
-import { Store, Action, createFeatureSelector } from '@ngrx/store';
-import { ROUTER_NAVIGATED, RouterReducerState } from '@ngrx/router-store';
+import { Actions, createEffect, ofType } from '@ngrx/effects';
 import * as fromRouter from '@ngrx/router-store';
-import { createEffect, Actions, ofType } from '@ngrx/effects';
+import { ROUTER_NAVIGATED, RouterReducerState } from '@ngrx/router-store';
+import { Action, Store, createFeatureSelector } from '@ngrx/store';
 
 import { EMPTY, Observable, of } from 'rxjs';
-import { withLatestFrom, switchMap, map, catchError, mergeMap } from 'rxjs/operators';
+import { catchError, map, mergeMap, switchMap, withLatestFrom } from 'rxjs/operators';
 
-import { GeoJSON, WKT } from 'ol/format';
 import { Feature } from 'ol';
-import { getCenter, createEmpty, extend } from 'ol/extent';
-import { Point, Geometry } from 'ol/geom'
+import { createEmpty, extend, getCenter } from 'ol/extent';
+import { GeoJSON, WKT } from 'ol/format';
+import { Geometry, Point } from 'ol/geom';
 
 
+import { commonReducers } from '@farmmaps/common';
 import * as mapActions from '../actions/map.actions';
 import * as mapReducers from '../reducers/map.reducer';
-import { commonReducers } from '@farmmaps/common';
 
 import { commonActions } from '@farmmaps/common';
 
-import { IItem } from '@farmmaps/common';
-import { FolderService, ItemService } from '@farmmaps/common';
+import { IItem, ItemService } from '@farmmaps/common';
 import { tassign } from 'tassign';
 
 import { FeatureIconService } from '../services/feature-icon.service';
 
 import * as style from 'ol/style';
 
-import { ItemTypeService, IQueryState } from '@farmmaps/common';
-import { TemporalItemLayer } from '../models/item.layer'
+import { IQueryState } from '@farmmaps/common';
+import { TemporalItemLayer } from '../models/item.layer';
 
 export const getRouterState = createFeatureSelector<RouterReducerState>('router');
 
@@ -41,7 +40,7 @@ export const {
   selectRouteParam,     // factory function to select a route param
   selectRouteData,      // select the current route data
   selectUrl,            // select the current url
-} = fromRouter.getSelectors(getRouterState);
+} = fromRouter.getRouterSelectors(getRouterState);
 
 
 @Injectable()
@@ -65,7 +64,7 @@ export class MapEffects {
   init$ = createEffect(() => this.actions$.pipe(
     ofType(mapActions.INIT),
     withLatestFrom(this.store$.select(commonReducers.selectGetRootItems)),
-    switchMap(([action, rootItems]) => {
+    switchMap(([, rootItems]) => {
       const actions = [];
       for (const rootItem of rootItems) {
         if (rootItem.itemType == "UPLOADS_FOLDER") actions.push(new mapActions.SetParent(rootItem.code));
@@ -107,12 +106,12 @@ export class MapEffects {
   initBaseLayers$ = createEffect(() => this.actions$.pipe(
     ofType(mapActions.INIT),
     withLatestFrom(this.store$.select(mapReducers.selectGetProjection)),
-    map(([action, projection]) => new mapActions.LoadBaseLayers(projection)))
+    map(([, projection]) => new mapActions.LoadBaseLayers(projection)))
   );
 
   loadBaseLayers$ = createEffect(() => this.actions$.pipe(
     ofType(mapActions.LOADBASELAYERS),
-    switchMap((action: mapActions.LoadBaseLayers) => {
+    switchMap(() => {
       return this.itemService$.getItemList("vnd.farmmaps.itemtype.layer", { "isBaseLayer": true }).pipe(
         map((items: IItem[]) => new mapActions.LoadBaseLayersSuccess(items)),
         catchError(error => of(new commonActions.Fail(error))));
@@ -133,7 +132,7 @@ export class MapEffects {
                 f.id = f.properties["code"];
               }
             }
-            return of(new mapActions.StartSearchSuccess(this._geojsonFormat.readFeatures(features), a.queryState));
+            return of(new mapActions.StartSearchSuccess(this._geojsonFormat.readFeatures(features).filter(feature => feature instanceof Feature) as Feature[], a.queryState));
           }
           ),
           catchError(error => of(new commonActions.Fail(error))));
@@ -178,7 +177,7 @@ export class MapEffects {
 
   hideMenu$ = createEffect(() => this.actions$.pipe(
     ofType(mapActions.STARTSEARCHSUCCESS),
-    mergeMap((action: mapActions.StartSearchSuccess) => {
+    mergeMap(() => {
       return of(new commonActions.SetMenuVisible(false));
     })));
 
@@ -218,7 +217,7 @@ export class MapEffects {
       if (!this.overrideSelectedItemLayer) {
         return this.itemService$.getFeature(action.item.code, "EPSG:3857").pipe(
           map((feature: any) => {
-            const f = this._geojsonFormat.readFeature(feature);
+            const f = this._geojsonFormat.readFeature(feature) as Feature;
             f.setId(action.item.code);
             return new mapActions.AddFeatureSuccess(f);
           }),
@@ -336,7 +335,7 @@ export class MapEffects {
     ofType(mapActions.ADDLAYER, mapActions.REMOVELAYER, mapActions.SELECTITEMSUCCESS, mapActions.SELECTTEMPORALITEMSSUCCESS, mapActions.NEXTTEMPORAL, mapActions.PREVIOUSTEMPORAL, mapActions.TOGGLELAYERVALUESENABLED, mapActions.SETLAYERINDEX, mapActions.SETSELECTEDITEMLAYER),
     withLatestFrom(this.store$.select(mapReducers.selectGetLayerValuesX)),
     withLatestFrom(this.store$.select(mapReducers.selectGetLayerValuesY)),
-    map(([[action, x], y]) => new mapActions.SetLayerValuesLocation(x, y))
+    map(([[, x], y]) => new mapActions.SetLayerValuesLocation(x, y))
   ));
 
 
@@ -402,7 +401,7 @@ export class MapEffects {
     })
   ));
 
-  constructor(private actions$: Actions, private store$: Store<mapReducers.State>, private folderService$: FolderService, private itemService$: ItemService, private featureIconService$: FeatureIconService, private itemTypeService$: ItemTypeService) {
+  constructor(private actions$: Actions, private store$: Store<mapReducers.State>, private itemService$: ItemService, private featureIconService$: FeatureIconService) {
     this._geojsonFormat = new GeoJSON();
     this._wktFormat = new WKT();
   }

projects/common-map/src/fm-map/models/item.layer.ts

@@ -1,5 +1,5 @@
-import { IItem,IListItem } from '@farmmaps/common';
-import {Layer} from 'ol/layer';
+import { IItem } from '@farmmaps/common';
+import { Layer } from 'ol/layer';
 import { Source } from 'ol/source';
 
 export interface IItemLayer  {

projects/common-map/src/fm-map/reducers/map.reducer.ts

@@ -1,21 +1,15 @@
-import { tassign } from 'tassign';
-import { IItem,Item } from '@farmmaps/common';
-import { IItemLayer,ItemLayer,ITemporalItemLayer,TemporalItemLayer} from '../models/item.layer';
-import { IMapState} from '../models/map.state';
-import { IQueryState} from '@farmmaps/common';
-import { IPeriodState } from '../models/period.state';
-import { IStyles} from '../models/style.cache';
-import { ILayervalue } from '../models/layer.value';
-import * as mapActions from '../actions/map.actions';
-import {commonActions} from '@farmmaps/common';
-import { createSelector, createFeatureSelector } from '@ngrx/store';
-
-import {Feature} from 'ol';
-import {Geometry} from 'ol/geom';
-
-
+import { IItem, IQueryState, commonActions } from '@farmmaps/common';
 import { ROUTER_NAVIGATION, RouterNavigationAction } from '@ngrx/router-store';
-
+import { createFeatureSelector, createSelector } from '@ngrx/store';
+import { Feature } from 'ol';
+import { Geometry } from 'ol/geom';
+import { tassign } from 'tassign';
+import * as mapActions from '../actions/map.actions';
+import { IItemLayer, ITemporalItemLayer, ItemLayer, TemporalItemLayer } from '../models/item.layer';
+import { ILayervalue } from '../models/layer.value';
+import { IMapState } from '../models/map.state';
+import { IPeriodState } from '../models/period.state';
+import { IStyles } from '../models/style.cache';
 import { MODULE_NAME } from '../module-name';
 
 const startDate:Date = new Date(new Date(Date.now()).getFullYear(), new Date(Date.now()).getMonth() - 3, 1);
@@ -49,6 +43,7 @@ export interface State {
   features: Array<Feature<Geometry>>,
   panelVisible: boolean,
   panelCollapsed: boolean,
+  panelExtraWide: boolean,
   selectedFeature: Feature<Geometry>,
   selectedItem:IItem,
   parentItem:IItem,
@@ -94,6 +89,7 @@ export const initialState: State = {
   features: [],
   panelVisible: false,
   panelCollapsed: false,
+  panelExtraWide: false,
   selectedFeature: null,
   selectedItem: null,
   parentItem: null,
@@ -123,7 +119,6 @@ export const initialState: State = {
 export function reducer(state = initialState, action: mapActions.Actions | commonActions.Actions | RouterNavigationAction): State {
   switch (action.type) {
     case ROUTER_NAVIGATION: {
-      const a = action as RouterNavigationAction;
       return tassign(state);
     }
     case mapActions.SETMAPSTATE: {
@@ -285,9 +280,6 @@ export function reducer(state = initialState, action: mapActions.Actions | commo
         return state;
       }
     }
-    case mapActions.SELECTTEMPORAL:{
-      //todo implement
-    }
     case mapActions.STARTSEARCH: {
       const a = action as mapActions.StartSearch;
       const panelVisible = a.queryState.itemCode!=null ||a.queryState.itemType!=null||a.queryState.parentCode!=null || a.queryState.query != null || a.queryState.tags != null;
@@ -336,8 +328,7 @@ export function reducer(state = initialState, action: mapActions.Actions | commo
     case mapActions.UPDATEFEATURESUCCESS: {
       const a = action as mapActions.UpdateFeatureSuccess;
       const features: any[] = [];
-      var index = -1;
-      for (var i = 0; i < state.features.length; i++) {
+      for (let i = 0; i < state.features.length; i++) {
         if (state.features[i].getId() == a.feature.getId()) {
           features.push(a.feature);
         } else {
@@ -388,6 +379,9 @@ export function reducer(state = initialState, action: mapActions.Actions | commo
     case mapActions.CLEARLAYERS: {
       return tassign(state, {overlayLayers: [], selectedOverlayLayer: null});
     }
+    case mapActions.CLEARFEATURES: {
+      return tassign(state, {features: [], selectedFeature: null});
+    }
     case mapActions.SETVISIBILITY: {
       const a = action as mapActions.SetVisibility;
       if(state.selectedItemLayer == a.itemLayer) {
@@ -414,7 +408,7 @@ export function reducer(state = initialState, action: mapActions.Actions | commo
       const a = action as mapActions.SetLayerIndex;
       if (a.itemLayer == null) {
         if(state.selectedItemLayer.item.itemType == "vnd.farmmaps.itemtype.temporal") {
-          var newItemlayer = tassign(state.selectedItemLayer,{layerIndex:a.layerIndex});
+          const newItemlayer = tassign(state.selectedItemLayer,{layerIndex:a.layerIndex});
           const tl = newItemlayer as ITemporalItemLayer;
           if(tl.previousItemLayer) {
             const nl = new ItemLayer(tl.previousItemLayer.item);
@@ -438,6 +432,7 @@ export function reducer(state = initialState, action: mapActions.Actions | commo
             tl.nextItemLayer = nl;
           }
         } else {
+          // eslint-disable-next-line no-var
           var newItemlayer = new ItemLayer(state.selectedItemLayer.item);
           newItemlayer.layerIndex = a.layerIndex;
 
@@ -459,7 +454,7 @@ export function reducer(state = initialState, action: mapActions.Actions | commo
         baseLayers.push(l);
       }
       let selectedBaseLayer: IItemLayer = null;
-      var mapState = tassign(state.mapState);
+      const mapState = tassign(state.mapState);
       const sb = baseLayers.filter(layer => layer.item.code === mapState.baseLayerCode);
       const db = baseLayers.filter(layer => layer.item.data && layer.item.data.default === true);
       if (baseLayers.length > 0 && mapState.baseLayerCode != "" && sb.length>0) {
@@ -481,7 +476,7 @@ export function reducer(state = initialState, action: mapActions.Actions | commo
       baseLayers.forEach((l) => l.visible = false);
       const i = state.baseLayers.indexOf(a.itemLayer);
       baseLayers[i].visible = true;
-      var mapState = tassign(state.mapState);
+      const mapState = tassign(state.mapState);
       mapState.baseLayerCode = a.itemLayer.item.code;
       return tassign(state, {mapState:mapState, baseLayers:baseLayers,selectedBaseLayer:a.itemLayer });
     }
@@ -555,8 +550,8 @@ export function reducer(state = initialState, action: mapActions.Actions | commo
          });
       }
       if(state.features.length>0)  {
-        var index = -1;
-        for (var i = 0; i < state.features.length; i++) {
+        let index = -1;
+        for (let i = 0; i < state.features.length; i++) {
           if (state.features[i].getId() == a.itemCode ) {
             index=i;
           }
@@ -569,6 +564,10 @@ export function reducer(state = initialState, action: mapActions.Actions | commo
       }
       return state;
     }
+    case mapActions.SETPANELEXTRAWIDE:{
+      const a= action as mapActions.SetPanelExtraWide;
+      return tassign(state,{panelExtraWide:a.panelExtraWide});
+    }
     default: {
       return state;
     }
@@ -580,6 +579,7 @@ export const getParentCode = (state: State) => state.parentCode;
 export const getFeatures = (state: State) => state.features;
 export const getPanelVisible = (state: State) => state.panelVisible;
 export const getPanelCollapsed = (state: State) => state.panelCollapsed;
+export const getPanelExtraWide = (state: State) => state.panelExtraWide;
 export const getSelectedFeature = (state: State) => state.selectedFeature;
 export const getSelectedItem = (state: State) => state.selectedItem;
 export const getParentItem = (state: State) => state.parentItem;
@@ -615,6 +615,7 @@ export const selectGetParentCode = createSelector(selectMapState, getParentCode)
 export const selectGetFeatures = createSelector(selectMapState, getFeatures);
 export const selectGetPanelVisible = createSelector(selectMapState, getPanelVisible);
 export const selectGetPanelCollapsed = createSelector(selectMapState, getPanelCollapsed);
+export const selectGetPanelExtraWide = createSelector(selectMapState, getPanelExtraWide);
 export const selectGetSelectedFeature = createSelector(selectMapState, getSelectedFeature);
 export const selectGetSelectedItem = createSelector(selectMapState, getSelectedItem);
 export const selectGetParentItem = createSelector(selectMapState, getParentItem);

projects/common-map/src/fm-map/services/device-orientation.service.ts

@@ -15,7 +15,6 @@ export class DeviceOrientationService {
     // Calculate equation components
     const cA = Math.cos(alphaRad);
     const sA = Math.sin(alphaRad);
-    const cB = Math.cos(betaRad);
     const sB = Math.sin(betaRad);
     const cG = Math.cos(gammaRad);
     const sG = Math.sin(gammaRad);
@@ -23,7 +22,6 @@ export class DeviceOrientationService {
     // Calculate A, B, C rotation components
     const rA = - cA * sG - sA * sB * cG;
     const rB = - sA * sG + cA * sB * cG;
-    const rC = - cB * cG;
   
     // Calculate compass heading
     let compassHeading = Math.atan(rA / rB);

projects/common-map/src/fm-map/services/feature-icon.service.ts

@@ -1,8 +1,4 @@
-import { Injectable} from '@angular/core';
-import { Feature } from 'ol';
-import { Point } from 'ol/geom';
-import * as extent from 'ol/extent';
-
+import { Injectable } from '@angular/core';
 
 @Injectable()
 export class FeatureIconService {      

projects/common-map/src/fm-map/services/geolocation.service.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { Observer, Observable,BehaviorSubject } from 'rxjs';
+import { BehaviorSubject, Observable } from 'rxjs';
 
 /**
  * GeolocationService class.

projects/common-map/src/fm-map/services/temporal.service.ts

@@ -1,7 +1,7 @@
-import { Injectable} from '@angular/core';
-import {DatePipe} from '@angular/common';
-import {TimespanService} from '@farmmaps/common';
-import { IItemLayer, ITemporalItemLayer,TemporalItemLayer} from '../models/item.layer';
+import { DatePipe } from '@angular/common';
+import { Injectable } from '@angular/core';
+import { TimespanService } from '@farmmaps/common';
+import { IItemLayer, ITemporalItemLayer } from '../models/item.layer';
 
 
 @Injectable()

projects/common-map/src/test.ts

@@ -9,8 +9,6 @@ import {
   platformBrowserDynamicTesting
 } from '@angular/platform-browser-dynamic/testing';
 
-declare const require: any;
-
 // First, initialize the Angular testing environment.
 getTestBed().initTestEnvironment(
   BrowserDynamicTestingModule,
@@ -18,7 +16,3 @@ getTestBed().initTestEnvironment(
     teardown: { destroyAfterEach: false }
 }
 );
-// Then we find all the tests.
-const context = require.context('./', true, /\.spec\.ts$/);
-// And load the modules.
-context.keys().map(context);

projects/common-map/tsconfig.lib.json

@@ -2,7 +2,6 @@
   "extends": "../../tsconfig.json",
   "compilerOptions": {
     "outDir": "../../out-tsc/lib",
-    "target": "es2020",
     "module": "es2015",
     "moduleResolution": "node",
     "declaration": true,
@@ -11,18 +10,29 @@
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
     "importHelpers": true,
+    "esModuleInterop": true,
     "types": [],
     "lib": [
       "dom",
       "es2018"
-    ]
+    ],
+    "paths": {
+      "@angular/*": [
+
+      "node_modules/@angular/*"
+
+      ]
+    },
+    "noUnusedLocals": true,
+    "noUnusedParameters": true
   },
   "angularCompilerOptions": {
     "skipTemplateCodegen": true,
     "strictMetadataEmit": true,
     "fullTemplateTypeCheck": true,
     "strictInjectionParameters": true,
-    "enableResourceInlining": true
+    "enableResourceInlining": true,
+    "compilationMode": "partial"
   },
   "exclude": [
     "src/test.ts",

projects/common-map/tsconfig.lib.prod.json

@@ -2,7 +2,6 @@
   "extends": "../../tsconfig.json",
   "compilerOptions": {
     "outDir": "../../out-tsc/lib",
-    "target": "es2020",
     "module": "es2015",
     "moduleResolution": "node",
     "declaration": true,
@@ -23,7 +22,9 @@
       "node_modules/@angular/*"
 
       ]
-    }
+    },
+    "noUnusedLocals": true,
+    "noUnusedParameters": true
   },
   "angularCompilerOptions": {
     "skipTemplateCodegen": true,

projects/common-map3d/.eslintrc.js

@@ -18,5 +18,6 @@ module.exports = {
         "@typescript-eslint"
     ],
     "rules": {
+        "@typescript-eslint/no-explicit-any": "off"
     }
 }

projects/common-map3d/package-lock.json

@@ -11,10 +11,10 @@
         "tslib": "^2.0.0"
       },
       "peerDependencies": {
-        "@angular/common": ">=14.0.0",
-        "@angular/core": ">=14.0.0",
+        "@angular/common": "^17.3.3",
+        "@angular/core": "^17.3.3",
         "cesium": ">=1.82.1",
-        "ngx-openlayers": "1.0.0-next.19",
+        "ng-openlayers": "17.1.3",
         "ol-cesium": ">=2.13.0"
       }
     },

projects/common-map3d/package.json

@@ -5,9 +5,9 @@
     "registry": "https://repository.akkerweb.nl/repository/npm-hosted/"
   },
   "peerDependencies": {
-    "@angular/common":  ">=14.0.0",
-    "@angular/core":  ">=14.0.0",
-    "ngx-openlayers": "1.0.0-next.19",
+    "@angular/common":  "^17.3.3",
+    "@angular/core":  "^17.3.3",
+    "ng-openlayers": "17.1.3",
     "cesium": ">=1.82.1",
     "ol-cesium": ">=2.13.0"
   },

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

@@ -1 +1 @@
-<div *fmHasPackage="'vnd.farmmaps.itemtype.package.3d'" (click)="handleClick($event)" class="btn btn-outline-primary twotreed"><i class="fas fa-spinner fa-spin loading"  [ngClass]="{'loading':loading}"></i>{{label}}</div>
+<div *fmHasPackage="'vnd.farmmaps.itemtype.package.3d'" (click)="handleClick()" class="btn btn-outline-primary twotreed"><i class="fas fa-spinner fa-spin loading"  [ngClass]="{'loading':loading}"></i>{{label}}</div>

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

@@ -1,17 +1,15 @@
-@import "~bootstrap/scss/bootstrap.scss";
-
 .twotreed {
   display:block; 
   width:2.5em;
   height:2.5em;
-  background-color: $body-bg;
+  background-color: var(--bs-body-bg);
   background-size: contain;
   margin-top:0.5em;
   text-align: center;
   line-height: 2.5em; 
   border-radius: 1.75em;
   padding: 0;
-  color: $secondary;
+  color: var(--bs-secondary);
 }
 
 .fa-spinner {

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

@@ -1,11 +1,11 @@
-import { Component, OnInit,Input,Host  } from '@angular/core';
-import { Interaction} from 'ol/interaction';
-import { MapComponent } from 'ngx-openlayers';
+import { Component, Input } from '@angular/core';
+import { mapActions, mapReducers } from '@farmmaps/common-map';
+import { Store } from '@ngrx/store';
+import { MapComponent } from 'ng-openlayers';
+import { Interaction } from 'ol/interaction';
 import OLCesium from 'olcs/OLCesium';
 import RasterSynchronizer from 'olcs/RasterSynchronizer';
 import VectorSynchronizer from 'olcs/VectorSynchronizer';
-import { mapReducers,mapActions } from '@farmmaps/common-map';
-import { Store } from '@ngrx/store';
 
 @Component({
   selector: 'fm-map3d-switch2d3d',
@@ -61,7 +61,7 @@ export class Switch2D3DComponent {
     });
   }
 
-  handleClick(event) {
+  handleClick() {
     this.enable = !this.enable; 
     if(this.enable) {
       this.store.dispatch(new mapActions.SetViewState(false));

projects/common-map3d/src/test.ts

@@ -8,13 +8,6 @@ import {
   platformBrowserDynamicTesting
 } from '@angular/platform-browser-dynamic/testing';
 
-declare const require: {
-  context(path: string, deep?: boolean, filter?: RegExp): {
-    keys(): string[];
-    <T>(id: string): T;
-  };
-};
-
 // First, initialize the Angular testing environment.
 getTestBed().initTestEnvironment(
   BrowserDynamicTestingModule,
@@ -22,7 +15,3 @@ getTestBed().initTestEnvironment(
     teardown: { destroyAfterEach: false }
 }
 );
-// Then we find all the tests.
-const context = require.context('./', true, /\.spec\.ts$/);
-// And load the modules.
-context.keys().map(context);

projects/common-map3d/tsconfig.lib.json

@@ -11,18 +11,29 @@
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
     "importHelpers": true,
+    "esModuleInterop": true,
     "types": [],
     "lib": [
       "dom",
       "es2018"
-    ]
+    ],
+    "paths": {
+      "@angular/*": [
+
+      "node_modules/@angular/*"
+
+      ]
+    },
+    "noUnusedLocals": true,
+    "noUnusedParameters": true
   },
   "angularCompilerOptions": {
     "skipTemplateCodegen": true,
     "strictMetadataEmit": true,
     "fullTemplateTypeCheck": true,
     "strictInjectionParameters": true,
-    "enableResourceInlining": true
+    "enableResourceInlining": true,
+    "compilationMode": "partial"
   },
   "exclude": [
     "src/test.ts",

projects/common-map3d/tsconfig.lib.prod.json

@@ -23,7 +23,9 @@
       "node_modules/@angular/*"
 
       ]
-    }
+    },
+    "noUnusedLocals": true,
+    "noUnusedParameters": true
   },
   "angularCompilerOptions": {
     "skipTemplateCodegen": true,

projects/common/.eslintrc.js

@@ -18,5 +18,6 @@ module.exports = {
         "@typescript-eslint"
     ],
     "rules": {
+        "@typescript-eslint/no-explicit-any": "off"
     }
 }

projects/common/package-lock.json

@@ -8,22 +8,22 @@
       "name": "@farmmaps/common",
       "version": "2.0.0",
       "peerDependencies": {
-        "@angular/common": ">=14.0.0",
-        "@angular/core": ">=14.0.0",
-        "@angular/forms": ">=14.0.0",
-        "@microsoft/signalr": ">=3.1.3",
-        "@ng-bootstrap/ng-bootstrap": ">=10.0.0",
-        "@ngrx/effects": ">=14.0.0",
-        "@ngrx/router-store": ">=14.0.0",
-        "@ngrx/store": ">=14.0.0",
-        "angular-oauth2-oidc": ">=13.0.0",
-        "bootstrap": ">=4.4.1",
-        "moment": ">=2.27.0",
-        "ngx-avatar": ">=4.1.0",
-        "ngx-clipboard": ">=14.0.1",
-        "ngx-image-cropper": ">=3.3.5",
-        "ngx-uploadx": ">=5.1.0",
-        "tassign": ">=1.0.0"
+        "@angular/common": "^17.3.3",
+        "@angular/core": "^17.3.3",
+        "@angular/forms": "^17.3.3",
+        "@microsoft/signalr": "^3.1.16",
+        "@ng-bootstrap/ng-bootstrap": "^16.0.0",
+        "@ngrx/effects": "^17",
+        "@ngrx/router-store": "^17",
+        "@ngrx/store": "^17",
+        "angular-oauth2-oidc": "^13",
+        "bootstrap": "^5.2.0",
+        "moment": "^2.29.4",
+        "ngx-avatars": "1.7.0",
+        "ngx-clipboard": "16.0.0",
+        "ngx-image-cropper": "^7.2.1",
+        "ngx-uploadx": "^6.2.0",
+        "tassign": "^1.0.0"
       }
     }
   }

projects/common/package.json

@@ -5,21 +5,21 @@
     "registry": "https://repository.akkerweb.nl/repository/npm-hosted/"
   },
   "peerDependencies": {
-    "@ng-bootstrap/ng-bootstrap": ">=10.0.0",
-    "@angular/common": ">=14.0.0",
-    "@angular/core": ">=14.0.0",
-    "@angular/forms": ">=14.0.0",
-    "@ngrx/effects": ">=14.0.0",
-    "@ngrx/router-store": ">=14.0.0",
-    "@ngrx/store": ">=14.0.0",
-    "tassign": ">=1.0.0",
-    "bootstrap": ">=4.4.1",
-    "@microsoft/signalr": ">=3.1.3",
-    "ngx-uploadx": ">=5.1.0",
-    "angular-oauth2-oidc": ">=13.0.0",
-    "moment": ">=2.27.0",
-    "ngx-avatar": ">=4.1.0",
-    "ngx-image-cropper": ">=3.3.5",
-    "ngx-clipboard": ">=14.0.1"
+    "@ng-bootstrap/ng-bootstrap": "^16.0.0",
+    "@angular/common": "^17.3.3",
+    "@angular/core": "^17.3.3",
+    "@angular/forms": "^17.3.3",
+    "@ngrx/effects": "^17",
+    "@ngrx/router-store": "^17",
+    "@ngrx/store": "^17",
+    "tassign": "^1.0.0",
+    "bootstrap": "^5.2.0",
+    "@microsoft/signalr": "^3.1.16",
+    "ngx-uploadx": "^6.2.0",
+    "angular-oauth2-oidc": "^13",
+    "moment": "^2.29.4",
+    "ngx-avatars": "1.7.0",
+    "ngx-image-cropper": "^7.2.1",
+    "ngx-clipboard": "16.0.0"
   }
 }

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

@@ -1,12 +1,12 @@
-import {NgModule} from '@angular/core';
-import {RouterModule} from '@angular/router';
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
 
-import {AuthCallbackComponent} from './components/auth-callback/auth-callback.component';
-import {AuthCallbackGuard} from './components/auth-callback/auth-callback.guard';
-import {NavBarGuard} from './services/nav-bar-guard.service';
-import {FullScreenGuard} from './services/full-screen-guard.service';
-import {SessionClearedComponent} from './components/session-cleared/session-cleared.component';
-import {NotFoundComponent} from './components/not-found/not-found.component';
+import { AuthCallbackComponent } from './components/auth-callback/auth-callback.component';
+import { NotFoundComponent } from './components/not-found/not-found.component';
+import { SessionClearedComponent } from './components/session-cleared/session-cleared.component';
+import { FullScreenGuard } from './services/full-screen-guard.service';
+import { NavBarGuard } from './services/nav-bar-guard.service';
+import { ProductionGuard } from './services/production-guard.service';
 
 
 const routes = [
@@ -21,7 +21,7 @@ const routes = [
   },
   {
     path: '**', component: NotFoundComponent,
-    canActivate: [NavBarGuard]   
+    canActivate: [NavBarGuard, ProductionGuard]
   }
 ];
 

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

@@ -18,6 +18,7 @@ import { EventService } from './services/event.service';
 import { TypeaheadService } from './services/typeahead.service';
 import { UserService } from './services/user.service';
 import { ImageService } from './services/image.service';
+import { DownloadService } from './services/download.service';
 import { GeolocatorService } from './services/geolocator.service';
 import { WeatherService} from './services/weather.service';
 import { AppConfig } from './shared/app.config';
@@ -48,6 +49,7 @@ export {
   TypeaheadService,
   UserService,
   ImageService,
+  DownloadService,
   GeolocatorService,
   WeatherService,
   AppConfig,

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

@@ -1,16 +1,16 @@
 // angular modules
-import { NgModule, APP_INITIALIZER, ModuleWithProviders, Injector, Optional, SkipSelf,InjectionToken } from '@angular/core';
-import { CommonModule, DatePipe } from '@angular/common';
-import { HttpClientModule, HttpClient, HTTP_INTERCEPTORS } from '@angular/common/http';
+import { CommonModule } from '@angular/common';
+import { HttpClientModule } from '@angular/common/http';
+import { InjectionToken, NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 
 // external modules
-import { OAuthModule, AuthConfig, OAuthService, OAuthStorage } from 'angular-oauth2-oidc';
-import { StoreModule, Store } from '@ngrx/store';
-import { EffectsModule } from '@ngrx/effects';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
-import { UploadxModule } from 'ngx-uploadx';
+import { EffectsModule } from '@ngrx/effects';
+import { StoreModule } from '@ngrx/store';
+import { OAuthModule } from 'angular-oauth2-oidc';
 import { ClipboardModule } from 'ngx-clipboard';
+import { UploadxModule } from 'ngx-uploadx';
 
 
 // routing module
@@ -19,111 +19,67 @@ import { AppCommonRoutingModule } from './common-routing.module';
 import { MODULE_NAME } from './module-name';
 
 //components
-import { SafePipe } from './shared/safe.pipe';
-import { AuthConfigFactory, IAuthconfigFactory } from './shared/authconfigFactory';
+import { AvatarModule } from 'ngx-avatars';
+import { ImageCropperModule } 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';
 import { AuthCallbackComponent } from './components/auth-callback/auth-callback.component';
-import { SessionClearedComponent } from './components/session-cleared/session-cleared.component';
-import { ResumableFileUploadComponent } from './components/resumable-file-upload/resumable-file-upload.component';
-import { NotFoundComponent } from './components/not-found/not-found.component';
-import { NotImplementedComponent } from './components/not-implemented/not-implemented.component';
-import { SidePanelComponent } from './components/side-panel/side-panel.component';
-import { TimespanComponent } from './components/timespan/timespan.component';
-import { TagInputComponent } from './components/tag-input/tag-input.component';
-import { MenuBackgroundComponent } from './components/menu-background/menu-background.component';
-import { HasPackageDirective} from './components/has-package/has-package.directive';
-import { PackageExistsDirective} from './components/package-exists/package-exists.directive';
-import { HasClaimDirective } from './components/has-claim/has-claim.directive';
-import { HasRoleDirective } from './components/has-role/has-role.directive';
-import { UserMenuComponent} from './components/user-menu/user-menu.component';
-import { ThumbnailComponent } from './components/thumbnail/thumbnail.component';
-import { Alert } from './enumerations/alert.enum';
-import { IEventMessage } from './models/event.message';
-import { IItem, Item } from './models/item';
-import { WeatherCurrentObservation } from './models/weatherCurrentObservation';
-import { IItemType } from './models/item.type';
-import { IItemLinkType} from './models/itemlink.type';
-import {IUrlType} from './models/url.type';
-import { IItemTypes } from './models/item.types';
-import { IItemTask, ItemTask } from './models/itemTask';
-import { IListItem } from './models/list.item';
-import { ITypeaheadItem } from './models/typeahead.item'
-import { IJsonline } from './models/json-line';
-import { ISenMLItem } from './models/senml-item';
-import { IPackage,IPackages } from './models/package';
-import { IUser } from './models/user';
-import { IQueryState } from './models/query.state';
-import { IDataLayer } from './models/data.layer';
-import { IColor,IGradientstop} from './models/gradient';
-import * as commonActions from './actions/app-common.actions';
-import * as commonReducers from './reducers/app-common.reducer';
-import * as commonEffects from './effects/app-common.effects';
-import { SecureOAuthStorage} from './shared/secureOAuthStorage';
-import { GradientComponent } from './components/gradient/gradient.component';
-import { GradientSelectComponent } from './components/gradient-select/gradient-select.component';
-import { AppMenuComponent } from './components/app-menu/app-menu.component';
-import { NotificationMenuComponent} from './components/notification-menu/notification-menu.component';
-import { HelpMenuComponent} from './components/help-menu/help-menu.component';
+import { AvatarComponent } from './components/avatar/avatar.component';
 import { BackButtonComponent } from './components/back-button/back-button.component';
 import { EditImageModalComponent } from './components/edit-image-modal/edit-image-modal.component';
-import { AvatarComponent } from './components/avatar/avatar.component';
+import { GradientSelectComponent } from './components/gradient-select/gradient-select.component';
+import { GradientComponent } from './components/gradient/gradient.component';
+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 { ItemLinkComponent } from './components/item-link/item-link.component';
-import { AvatarModule } from 'ngx-avatar';
-import { ImageCropperModule } from 'ngx-image-cropper';
+import { MenuBackgroundComponent } from './components/menu-background/menu-background.component';
+import { NotFoundComponent } from './components/not-found/not-found.component';
+import { NotImplementedComponent } from './components/not-implemented/not-implemented.component';
+import { NotificationMenuComponent } from './components/notification-menu/notification-menu.component';
+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 { SidePanelComponent } from './components/side-panel/side-panel.component';
+import { TagInputComponent } from './components/tag-input/tag-input.component';
+import { ThumbnailComponent } from './components/thumbnail/thumbnail.component';
+import { TimespanComponent } from './components/timespan/timespan.component';
+import { UserMenuComponent } from './components/user-menu/user-menu.component';
+import * as commonEffects from './effects/app-common.effects';
+import { Alert } from './enumerations/alert.enum';
+import { IDataLayer } from './models/data.layer';
+import { IEventMessage } from './models/event.message';
+import { IColor, IGradientstop } from './models/gradient';
+import { IItem, Item } from './models/item';
+import { IItemType } from './models/item.type';
+import { IItemTypes } from './models/item.types';
+import { IItemTask, ItemTask } from './models/itemTask';
+import { IItemLinkType } from './models/itemlink.type';
+import { IJsonline } from './models/json-line';
+import { IListItem } from './models/list.item';
+import { IPackage, IPackages } from './models/package';
+import { IQueryState } from './models/query.state';
+import { ISenMLItem } from './models/senml-item';
+import { ITypeaheadItem } from './models/typeahead.item';
+import { IUrlType } from './models/url.type';
+import { IUser } from './models/user';
+import { WeatherCurrentObservation } from './models/weatherCurrentObservation';
+import * as commonReducers from './reducers/app-common.reducer';
+import { AuthConfigFactory, IAuthconfigFactory } from './shared/authconfigFactory';
+import { SafePipe } from './shared/safe.pipe';
+import { SecureOAuthStorage } from './shared/secureOAuthStorage';
 
 export const FM_COMMON_STARTPAGE = new InjectionToken<string>('fm-common-startpage');
 
 export {
-  SafePipe,
-  AuthCallbackComponent,
-  AppComponent,
-  SessionClearedComponent,
-  ResumableFileUploadComponent,
-  NotFoundComponent,
-  NotImplementedComponent,
-  SidePanelComponent,
-  TimespanComponent,
-  TagInputComponent,
-  UserMenuComponent,
-  ThumbnailComponent,
-  HasPackageDirective,
-  PackageExistsDirective,
-  HasClaimDirective,
-  HasRoleDirective,
-  Alert,
-  IEventMessage,
-  IItem,
-  Item,
-  IItemType,
-  IItemLinkType,
-  IUrlType,
-  IItemTypes,
-  IItemTask,
-  ItemTask,
-  IListItem,
-  ITypeaheadItem,
-  IUser,
-  IQueryState,
-  IPackage,
-  IPackages,
-  commonActions,
-  commonReducers,
-  IAuthconfigFactory,
-  AuthConfigFactory,
-  MenuBackgroundComponent,
-  SecureOAuthStorage,
-  WeatherCurrentObservation,
-  IJsonline,
-  ISenMLItem,
-  IDataLayer,
-  IColor,
-  IGradientstop,
-  BackButtonComponent,
-  AvatarComponent,
-  ItemLinkComponent,
-  EditImageModalComponent,
+  Alert, AppComponent, AuthCallbackComponent, AuthConfigFactory, AvatarComponent, BackButtonComponent, EditImageModalComponent,
   GradientComponent,
-  GradientSelectComponent
+  GradientSelectComponent, HasClaimDirective, HasPackageDirective, HasRoleDirective, IAuthconfigFactory, IColor, IDataLayer, IEventMessage, IGradientstop, IItem, IItemLinkType, IItemTask, IItemType, IItemTypes, IJsonline, IListItem, IPackage,
+  IPackages, IQueryState, ISenMLItem, ITypeaheadItem, IUrlType, IUser, Item, ItemLinkComponent, ItemTask, MenuBackgroundComponent, NotFoundComponent,
+  NotImplementedComponent, PackageExistsDirective, ResumableFileUploadComponent, SafePipe, SecureOAuthStorage, SessionClearedComponent, SidePanelComponent, TagInputComponent, ThumbnailComponent, TimespanComponent, UserMenuComponent, WeatherCurrentObservation, commonActions,
+  commonReducers
 };
 
 @NgModule({