Merge branch 'feature/AW784_MergeFarmMapsMap_FarmMapsLibMap' into develop

- cd035366: AW-718 Layout as requested by Thomas.

README.md

@@ -16,8 +16,8 @@ Use one of the two options below to get started.
 *Setup*
 
 ```
-docker pull node:10.16.0
-docker run -t -i --entrypoint /bin/bash -p 4200:4200 node:10.16.0
+docker pull node:12.13.1
+docker run -t -i --entrypoint /bin/bash -p 4200:4200 node:12.13.1
 ```
 
 Inside the running container 

angular.json

@@ -66,7 +66,7 @@
                 {
                   "type": "initial",
                   "maximumWarning": "2mb",
-                  "maximumError": "5mb"
+                  "maximumError": "7mb"
                 }
               ]
             }

package.json

@@ -11,40 +11,40 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~7.2.0",
-    "@angular/common": "~7.2.0",
-    "@angular/compiler": "~7.2.0",
-    "@angular/core": "~7.2.0",
-    "@angular/forms": "~7.2.0",
-    "@angular/platform-browser": "~7.2.0",
-    "@angular/platform-browser-dynamic": "~7.2.0",
-    "@angular/router": "~7.2.0",
+    "@angular/animations": "~8.2.14",
+    "@angular/common": "~8.2.14",
+    "@angular/compiler": "~8.2.14",
+    "@angular/core": "~8.2.14",
+    "@angular/forms": "~8.2.14",
+    "@angular/platform-browser": "~8.2.14",
+    "@angular/platform-browser-dynamic": "~8.2.14",
+    "@angular/router": "~8.2.14",
     "@aspnet/signalr": "^1.1.4",
-    "@farmmaps/common": ">=0.0.1-prerelease.69 <0.0.1",
-    "@farmmaps/common-map": ">=0.0.1-prerelease.69 <0.0.1",
+    "@farmmaps/common": ">=0.0.1-prerelease.95 <0.0.1",
+    "@farmmaps/common-map": ">=0.0.1-prerelease.95 <0.0.1",
     "@ng-bootstrap/ng-bootstrap": "^4.2.1",
-    "@ngrx/effects": "^7.2.0",
-    "@ngrx/router-store": "^7.2.0",
-    "@ngrx/store": "^7.2.0",
+    "@ngrx/effects": "^8.2.0",
+    "@ngrx/router-store": "^8.2.0",
+    "@ngrx/store": "^8.2.0",
     "bootstrap": "^4.3.1",
     "font-awesome": "^4.7.0",
     "core-js": "^2.5.4",
     "ngrx-store-localstorage": "^8.0.0",
     "resumablejs": "^1.1.0",
-    "rxjs": "~6.3.3",
+    "rxjs": "~6.5.3",
     "tassign": "^1.0.0",
-    "zone.js": "~0.8.26"
+    "zone.js": "~0.9.1"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.13.0",
-    "@angular-devkit/build-ng-packagr": "~0.13.0",
-    "@angular/cli": "~7.3.8",
-    "@angular/compiler-cli": "~7.2.0",
-    "@angular/language-service": "~7.2.0",
+    "@angular-devkit/build-angular": "~0.803.19",
+    "@angular-devkit/build-ng-packagr": "~0.803.19",
+    "@angular/cli": "~8.3.19",
+    "@angular/compiler-cli": "~8.2.14",
+    "@angular/language-service": "~8.2.14",
     "@types/node": "~8.9.4",
     "@types/jasmine": "~2.8.8",
     "@types/jasminewd2": "~2.0.3",
-    "codelyzer": "~4.5.0",
+    "codelyzer": "^5.0.1",
     "jasmine-core": "~2.99.1",
     "jasmine-spec-reporter": "~4.2.1",
     "karma": "~4.0.0",
@@ -52,12 +52,12 @@
     "karma-coverage-istanbul-reporter": "~2.0.1",
     "karma-jasmine": "~1.1.2",
     "karma-jasmine-html-reporter": "^0.2.2",
-    "ng-packagr": "^4.2.0",
+    "ng-packagr": "^5.4.0",
     "protractor": "~5.4.0",
     "ts-node": "~7.0.0",
-    "tsickle": ">=0.34.0",
+    "tsickle": "^0.37.0",
     "tslib": "^1.9.0",
     "tslint": "~5.11.0",
-    "typescript": "~3.2.2"
+    "typescript": "~3.5.3"
   }
 }

projects/common-map/package-lock.json

@@ -4,68 +4,42 @@
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
-    "@farmmaps/common": {
-      "version": "0.0.1-prerelease.56",
-      "resolved": "https://repository.akkerweb.nl/repository/npm-group/@farmmaps/common/-/common-0.0.1-prerelease.56.tgz",
-      "integrity": "sha512-m9KxWsLkTSz2JI074gIJH1kDR0PCLsFAug8oBjtlU/QxgBySrvqHCRiODpNmNWnFyNTZHqKHJQefn3Q9iAil4g==",
-      "requires": {
-        "angular-oauth2-oidc": "^5.0.2",
-        "ngx-uploadx": "^3.1.3",
-        "tslib": "^1.9.0"
-      }
-    },
-    "angular-oauth2-oidc": {
-      "version": "5.0.2",
-      "resolved": "https://registry.npmjs.org/angular-oauth2-oidc/-/angular-oauth2-oidc-5.0.2.tgz",
-      "integrity": "sha512-jtOv4IWEjSFfBHVE4seWGWT/ZfWJ95QJ1JaFhVVGJEF64ibGuPwV3ztwTOUl98QHi/Yg4PXXDAisb31JnIbxBw==",
-      "requires": {
-        "jsrsasign": "^8.0.12",
-        "tslib": "^1.9.0"
-      }
+    "@openlayers/pepjs": {
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/@openlayers/pepjs/-/pepjs-0.5.3.tgz",
+      "integrity": "sha512-Bgvi5c14BS0FJWyYWWFstNEnXsB30nK8Jt8hkAAdqr7E0gDdBBWVDglF3Ub19wTxvgJ/CVHyTY6VuCtnyRzglg=="
     },
     "ieee754": {
       "version": "1.1.13",
       "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.1.13.tgz",
       "integrity": "sha512-4vf7I2LYV/HaWerSo3XmlMkp5eZ83i+/CDluXi/IGTs/O1sejBNhTtnxzmRZfvOUqj7lZjqHkeTvpgSFDlWZTg=="
     },
-    "jsrsasign": {
-      "version": "8.0.12",
-      "resolved": "https://registry.npmjs.org/jsrsasign/-/jsrsasign-8.0.12.tgz",
-      "integrity": "sha1-Iqu5ZW00owuVMENnIINeicLlwxY="
-    },
     "ngx-openlayers": {
-      "version": "1.0.0-next.9",
-      "resolved": "https://registry.npmjs.org/ngx-openlayers/-/ngx-openlayers-1.0.0-next.9.tgz",
-      "integrity": "sha512-14UFxJX9oeOXtq+HJCJyXn0sBmYmCqj2AnFtetKk1FsDe8EUMFGIRju8UOFegCr2oEu5JsuRjALcfW7lCe+teg==",
-      "requires": {
-        "tslib": "^1.9.0"
-      }
-    },
-    "ngx-uploadx": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/ngx-uploadx/-/ngx-uploadx-3.3.2.tgz",
-      "integrity": "sha512-gRdXXq2cRU9HE6dj65qay9GV8NRC7n8y5LtMzJWqsfu2k3CHMQxo2TqZwA9/l/PqJ76RoO7sTPy1OenFQ+krkQ==",
+      "version": "1.0.0-next.13",
+      "resolved": "https://registry.npmjs.org/ngx-openlayers/-/ngx-openlayers-1.0.0-next.13.tgz",
+      "integrity": "sha512-6y724s5JV6n1oxEhryxP3wcbwzpierj9RLiMLXInfKOG3l5IO1AtPNkeK9+mKctVDUVm5URIfzzZH02Ld+bvSQ==",
       "requires": {
         "tslib": "^1.9.0"
       }
     },
     "ol": {
-      "version": "5.3.3",
-      "resolved": "https://registry.npmjs.org/ol/-/ol-5.3.3.tgz",
-      "integrity": "sha512-7eU4x8YMduNcED1D5wI+AMWDRe7/1HmGfsbV+kFFROI9RNABU/6n4osj6Q3trZbxxKnK2DSRIjIRGwRHT/Z+Ww==",
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/ol/-/ol-6.1.1.tgz",
+      "integrity": "sha512-0dL3i3eJqgOpqIjDKEY3grkeQnjAYfV5L/JCxhOu4SxiaizRwFrFgeas6LILRoxKa03jhQFbut2r2bbgcLGQeA==",
       "requires": {
-        "pbf": "3.1.0",
+        "@openlayers/pepjs": "^0.5.3",
+        "pbf": "3.2.1",
         "pixelworks": "1.1.0",
-        "rbush": "2.0.2"
+        "rbush": "^3.0.1"
       }
     },
     "pbf": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/pbf/-/pbf-3.1.0.tgz",
-      "integrity": "sha512-/hYJmIsTmh7fMkHAWWXJ5b8IKLWdjdlAFb3IHkRBn1XUhIYBChVGfVwmHEAV3UfXTxsP/AKfYTXTS/dCPxJd5w==",
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/pbf/-/pbf-3.2.1.tgz",
+      "integrity": "sha512-ClrV7pNOn7rtmoQVF4TS1vyU0WhYRnP92fzbfF75jAIwpnzdJXf8iTd4CMEqO4yUenH6NDqLiwjqlh6QgZzgLQ==",
       "requires": {
-        "ieee754": "^1.1.6",
-        "resolve-protobuf-schema": "^2.0.0"
+        "ieee754": "^1.1.12",
+        "resolve-protobuf-schema": "^2.1.0"
       }
     },
     "pixelworks": {
@@ -79,16 +53,16 @@
       "integrity": "sha512-Xdayp8sB/mU+sUV4G7ws8xtYMGdQnxbeIfLjyO9TZZRJdztBGhlmbI5x1qcY4TG5hBkIKGnc28i7nXxaugu88w=="
     },
     "quickselect": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/quickselect/-/quickselect-1.1.1.tgz",
-      "integrity": "sha512-qN0Gqdw4c4KGPsBOQafj6yj/PA6c/L63f6CaZ/DCF/xF4Esu3jVmKLUDYxghFx8Kb/O7y9tI7x2RjTSXwdK1iQ=="
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/quickselect/-/quickselect-2.0.0.tgz",
+      "integrity": "sha512-RKJ22hX8mHe3Y6wH/N3wCM6BWtjaxIyyUIkpHOvfFnxdI4yD4tBXEBKSbriGujF6jnSVkJrffuo6vxACiSSxIw=="
     },
     "rbush": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/rbush/-/rbush-2.0.2.tgz",
-      "integrity": "sha512-XBOuALcTm+O/H8G90b6pzu6nX6v2zCKiFG4BJho8a+bY6AER6t8uQUZdi5bomQc0AprCWhEGa7ncAbbRap0bRA==",
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/rbush/-/rbush-3.0.1.tgz",
+      "integrity": "sha512-XRaVO0YecOpEuIvbhbpTrZgoiI6xBlz6hnlr6EHhd+0x9ase6EmeN+hdwwUaJvLcsFFQ8iWVF1GAK1yB0BWi0w==",
       "requires": {
-        "quickselect": "^1.0.1"
+        "quickselect": "^2.0.0"
       }
     },
     "resolve-protobuf-schema": {

projects/common-map/package.json

@@ -5,16 +5,16 @@
     "registry": "https://repository.akkerweb.nl/repository/npm-hosted/"
   },
   "dependencies": {
-    "ngx-openlayers": "1.0.0-next.9",
-    "ol": "^5.3.3"
+    "ngx-openlayers": "1.0.0-next.13",
+    "ol": "^6.0.0"
   },
   "peerDependencies": {
-    "@angular/core": "^7.2.0",
+    "@angular/core": "^8.2.0",
     "ngrx-store-localstorage": "^8.0.0",
-    "@ngrx/effects": "^7.2",
-    "@ngrx/router-store": "^7.2",
-    "@ngrx/store": "^7.2",
+    "@ngrx/effects": "^8.2",
+    "@ngrx/router-store": "^8.2",
+    "@ngrx/store": "^8.2",
     "tassign": "^1.0.0",
-    "@farmmaps/common": ">=0.0.1-prerelease.56 <0.0.1"
+    "@farmmaps/common": ">=0.0.1-prerelease.90 <0.0.1"
   }
 }

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

@@ -1,6 +1,8 @@
 import { Action } from '@ngrx/store';
 
-import { IMapState,IItemLayer,IQueryState } from '../models';
+import { IMapState } from '../models/map.state';
+import { IItemLayer } from '../models/item.layer';
+import { IQueryState } from '../models/query.state';
 import { IItem } from '@farmmaps/common';
 import { Feature } from 'ol';
 import { Extent } from 'ol/extent';

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

@@ -16,12 +16,12 @@ import * as mapReducers from './reducers/map.reducer';
 import * as mapActions from './actions/map.actions';
 import * as mapEffects from './effects/map.effects';
 
-import { IMapState} from './models';
-import { ISelectedFeatures } from './models';
-import { IItemLayer } from './models';
-import { ItemLayer} from './models';
-import { IQueryState } from './models';
-import { IPeriodState } from './models';
+import { IMapState} from './models/map.state';
+import { ISelectedFeatures } from './models/selected.features';
+import { IItemLayer } from './models/item.layer';
+import { ItemLayer} from './models/item.layer';
+import { IQueryState } from './models/query.state';
+import { IPeriodState } from './models/period.state';
 
 // components
 import { GpsLocation} from './components/aol/gps-location/gps-location.component';
@@ -54,7 +54,7 @@ import { LayerListComponent } from './components/aol/layer-list/layer-list.compo
 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';
+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';

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

@@ -23,7 +23,7 @@ export class GpsLocation  implements OnInit,OnChanges{
   public path: string = "";
   public rotate: string = "";
   private resolution: number = 0;
-  @ViewChild('location') locationElement: ElementRef;
+  @ViewChild('location', { static: true }) locationElement: ElementRef;
 
   constructor(private map: MapComponent) {
     

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

@@ -4,7 +4,7 @@ import { LayerVectorComponent, SourceVectorComponent, MapComponent, LayerImageCo
 import { LayerVectorImageComponent } from '../layer-vector-image/layer-vector-image.component';
 import { ItemService } from '@farmmaps/common';
 import { IItem } from '@farmmaps/common';
-import { ISelectedFeatures } from '../../../models';
+import { ISelectedFeatures } from '../../../models/selected.features';
 
 import {Vector} from 'ol/source';
 import {Feature,Collection} from 'ol';

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

@@ -3,8 +3,9 @@ import { HttpClient } from "@angular/common/http";
 import { LayerVectorComponent, LayerTileComponent, LayerGroupComponent, MapComponent } from 'ngx-openlayers';
 import { ItemService } from '@farmmaps/common';
 import { AppConfig } from '@farmmaps/common';
-import { IItemLayer, ILayerData, IRenderoutputTiles, IRenderoutputImage, IGradientstop, ILayer, IHistogram } from '../../../models';
-
+import { IItemLayer} from '../../../models/item.layer';
+import { ILayerData} from '../../../models/layer.data';
+import { IRenderoutputTiles,IRenderoutputImage,IGradientstop,ILayer,IHistogram} from '../../../models/color.map';
 import {Extent} from 'ol/extent';
 import Projection from 'ol/proj/Projection';
 import * as proj from 'ol/proj';

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

@@ -1,5 +1,5 @@
 import { Component,Input,Output,EventEmitter } from '@angular/core';
-import { IItemLayer } from '../../../models';
+import { IItemLayer } from '../../../models/item.layer';
 
 @Component({
   selector: 'fm-map-layer-list',

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

@@ -21,7 +21,7 @@ export class FeatureListContainerComponent {
   @Input() features: Array<Feature>
   @Input() queryState: IQueryState;
 
-  @ViewChild(WidgetHostDirective) widgetHost: WidgetHostDirective; 
+  @ViewChild(WidgetHostDirective, { static: true }) widgetHost: WidgetHostDirective; 
 
   loadComponent(queryState:IQueryState) {
     var componentFactory: ComponentFactory<AbstractFeatureListComponent> = this.componentFactoryResolver.resolveComponentFactory(FeatureListComponent); // default

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

@@ -19,7 +19,7 @@ export class FeatureListFeatureContainerComponent {
 
   @Input() feature: Feature;
 
-  @ViewChild(WidgetHostDirective) widgetHost: WidgetHostDirective; 
+  @ViewChild(WidgetHostDirective, { static: true }) widgetHost: WidgetHostDirective; 
 
   loadComponent() {
     var componentFactory: ComponentFactory<AbstractFeatureListFeatureComponent> = this.componentFactoryResolver.resolveComponentFactory(FeatureListFeatureComponent); // default

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

@@ -8,7 +8,7 @@ import * as mapActions from '../../actions/map.actions';
 import { Observable, from } from 'rxjs';
 import { withLatestFrom } from 'rxjs/operators';
 import { tassign } from 'tassign';
-import { IQueryState } from '../../models';
+import { IQueryState } from '../../models/query.state';
 
 
 @Injectable()

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

@@ -19,7 +19,7 @@ export class ItemListItemContainerComponent {
 
   @Input() item: IListItem;
 
-  @ViewChild(WidgetHostDirective) widgetHost: WidgetHostDirective; 
+  @ViewChild(WidgetHostDirective, { static: true }) widgetHost: WidgetHostDirective; 
 
   loadComponent() {
     var componentFactory: ComponentFactory<AbstractItemListItemComponent> = this.componentFactoryResolver.resolveComponentFactory(ItemListItemComponent); // default

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

@@ -1,4 +1,4 @@
-<div *ngIf="items;let items" class="widget-container">
+<div *ngIf="items;let items" class="widget-container pt-0">
   <div class="widget" *ngFor="let item of items" (click)="handleItemClick(item)">
     <div class="content">
       <fm-map-item-list-item-container [item]="item" class="item-container"></fm-map-item-list-item-container>

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

@@ -1,14 +1,10 @@
 import { Component, Input, Injectable } from '@angular/core';
 import { Location } from '@angular/common';
-import { Feature } from 'ol';
 import { Store } from '@ngrx/store';
 import * as mapReducers from '../../reducers/map.reducer';
-import { commonReducers,ItemTypeService, IItem, Item,IListItem } from '@farmmaps/common';
+import { commonReducers,ItemTypeService,IListItem } from '@farmmaps/common';
 import * as mapActions from '../../actions/map.actions';
-import { Observable, from } from 'rxjs';
-import { withLatestFrom } from 'rxjs/operators';
 import { tassign } from 'tassign';
-import { IQueryState } from '../../models';
 
 
 @Injectable()

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

@@ -1,4 +1,4 @@
-<div *ngIf="widgets;let widgets" class="widget-container">
+<div *ngIf="widgets;let widgets" class="widget-container pt-0">
   <div class="widget" *ngFor="let widget of widgets">
     <div class="content">
       <ng-template #widgetTemplate></ng-template>

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

@@ -1,4 +1,4 @@
-<table class="container" *ngIf="layer">
+<table class="container" *ngIf="showLegend()">
   <tr>
     <td colspan="2">
       <div class="title">
@@ -14,20 +14,22 @@
     </td>
   </tr>
   <tr *ngFor="let entry of layer.renderer.colorMap.entries; let i = index ">
-    <td class="legend-items"><div [style.background-color]="getHex(entry.color)"></div></td>
-    <td class="legend-items-text">{{entry.value | number:'1.0-2'}} {{legendunit}}</td>
-    <!--<td class="histogram-items-text"><span *ngIf="histogramenabled">{{entry.value}} {{histogramunit}}</span></td>
+    <td class="legend-items"><span [style.background-color]="getHex(entry.color)" class="color"></span></td>
+    <td class="legend-items-text"><span *ngIf="!entry.label">{{entry.value | number:'1.0-2'}} {{legendunit}}</span><span *ngIf="entry.label">{{entry.label}}</span></td>    
     <td class="histogram-items">
-      <div *ngIf="histogramenabled" [style.background-color]="getHex(selectedColorMap.noValue)" [style.width]="getPart(selectedColorMap, entry)">
+      <div *ngIf="showHistogram()">
+        <span class="bar" [style.background-color]="getHex(entry.color)" [style.width]="getPart(layer.renderer, i)">
+        </span>
+        <span class="bar-label">{{getLabel(layer.renderer,i)}}</span>
       </div>     
-    </td>-->
+    </td>
   </tr>
   <tr>
     <td colspan="4"></td>
   </tr>
-  <!--<tr>
+  <!--<tr *ngIf="layer.renderer.colorMap.entries.length > 0">
     <td>
-      <i class="fas fa-chart-bar" (click)="onClickHistoGram()"></i>
+      <i title="Show histogram" class="fa fa-bar-chart fa-rotate-90" (click)="onClickHistoGram()"></i>
     </td>
     <td colspan="3"></td>
   </tr>-->

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

@@ -16,9 +16,13 @@
   margin-bottom: 0;
 }
 
-.legend-items {
+span.color {
+  display:inline-block;
   width: 1.5em;
   height: 1.5em;
+}
+
+.legend-items {
   padding: 0.1em;
   border-style: none;
   border-width: 0.05em;
@@ -36,16 +40,10 @@
 }
 
 .histogram-items {
-  width: 5em;
+  width: 100%;
   padding-left: 1em;
 }
 
-  .histogram-items > div {
-    height: 1em;
-    border-style: solid;
-    border-width: 0.05em;
-    vertical-align: middle;
-  }
 
 .histogram-items-text {
   max-width: 20em;
@@ -54,5 +52,16 @@
   text-align: left;
 }
 
+.bar {
+  display:inline-block;
+  height: 1em;
+  vertical-align: middle;
+}
+
+.bar-label {
+  margin-left:0.3em;
+  font-size:0.7em;
+}
+
 
 

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 } from '../../models';
+import { IColorMap, IColor, IColorEntry,ILayer, IRenderer } from '../../models/color.map';
 
 
 @Component({
@@ -45,22 +45,39 @@ export class LegendComponent implements OnInit,AfterViewInit {
     this.histogramenabled = !this.histogramenabled;
   }
 
+
+
+
   public getHex(color: IColor): string {
     return '#' + this.componentToHex(color.red) + this.componentToHex(color.green) + this.componentToHex(color.blue);
   }
 
-  public componentToHex(c: number): string {
+  private componentToHex(c: number): string {
     const hex = c.toString(16);
     return hex.length === 1 ? `0${hex}` : hex;
   }
 
-  private getPart(colorMap: IColorMap, colorEntry: IColorEntry): string {
-    let sumOfValue = colorMap.entries.reduce((sum, item) => sum + item.value, 0);
-    let part = ((colorEntry.value / sumOfValue) * 100) + "%";
+  public getPart(renderer: IRenderer, index: number): string {
+    let max = renderer.band.histogram.entries.reduce((max, entry) => entry.freqency > max ? entry.freqency : max, 0);
+    let scale = 75 / max;
+    let part = (renderer.band.histogram.entries[index].freqency * scale) + "%";
 
     return part;
   }
 
+  public getLabel(renderer: IRenderer, index: number): string {
+    let scale = 100 / renderer.band.histogram.entries.reduce((sum, entry) => sum + entry.freqency, 0);
+    let percent = renderer.band.histogram.entries[index].freqency * scale;
+    return percent < 0.1 ? "" : percent.toFixed(1) + " %";
+  }
+
+  showLegend(): boolean {
+       return this.layer && this.layer.renderer && this.layer.renderer.renderType != "MULTIBAND_COLOR";
+  }
+
+  showHistogram(): boolean {
+    return this.histogramenabled && this.layer.renderer.band.histogram.entries && this.layer.renderer.band.histogram.entries.length > 0 && this.layer.renderer.colorMap.colormapType == "minmax";
+  }
 }
 
 

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

@@ -1 +0,0 @@
-export * from './map-search.component';

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

@@ -2,8 +2,8 @@ import { Component, Input, Output, OnInit, EventEmitter, SimpleChanges, OnChange
 import { Observable ,  of } from 'rxjs';
 import { debounceTime,distinctUntilChanged,tap,switchMap,merge,catchError} from 'rxjs/operators';
 import { TypeaheadService, TimespanService } from '@farmmaps/common';
-import { IQueryState,IPeriodState } from '../../models';
-import { fillProperties } from '@angular/core/src/util/property';
+import { IQueryState } from '../../models/query.state';
+import { IPeriodState } from '../../models/period.state';
 import { tassign } from 'tassign';
 
 @Component({
@@ -13,7 +13,7 @@ import { tassign } from 'tassign';
 })
 export class MapSearchComponent {
 
-  @ViewChild('searchText') searchText;
+  @ViewChild('searchText', { static: true }) searchText;
   @Input() clearEnabled: boolean
   @Input() set collapsed(collapsed: boolean) {
     this.collapsedLocal = collapsed;

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

@@ -9,7 +9,11 @@ import { Store } from '@ngrx/store';
 // Map
 import * as mapReducers from '../../reducers/map.reducer';
 import * as mapActions from '../../actions/map.actions';
-import { IMapState,ISelectedFeatures,IItemLayer, ItemLayer,IQueryState,IPeriodState } from '../../models';
+import { IMapState} from '../../models/map.state';
+import { ISelectedFeatures } from '../../models/selected.features';
+import { IItemLayer } from '../../models/item.layer';
+import { IQueryState } from '../../models/query.state';
+import { IPeriodState } from '../../models/period.state';
 import { IDroppedFile } from '../aol/file-drop-target/file-drop-target.component';
 import { IMetaData } from '../meta-data-modal/meta-data-modal.component';
 import { StateSerializerService } from '../../services/state-serializer.service';
@@ -68,7 +72,7 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
   public baseLayersCollapsed:boolean = true;
   public overlayLayersCollapsed: boolean = true;
   public extent: Observable<Extent>;
-  @ViewChild('map') map;
+  @ViewChild('map', { static: true }) map;
   
   constructor(private store: Store<mapReducers.State | commonReducers.State>, private route: ActivatedRoute, private router: Router, private uploadService: ResumableFileUploadService, private serializeService: StateSerializerService, public itemTypeService: ItemTypeService, private location: Location, private geolocationService: GeolocationService ) {
   }

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

@@ -18,7 +18,7 @@ export class MetaDataModalComponent {
   private modalName: string = 'metaDataModal';
   private modalRef: NgbModalRef;
 
-  @ViewChild('content') _templateModal:ElementRef;
+  @ViewChild('content', { static: true }) _templateModal:ElementRef;
   @Input() droppedFile: IDroppedFile;
   @Input() set modalState(_modalState:any) {;
     if(_modalState == this.modalName) {

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

@@ -29,7 +29,7 @@ export class SelectPeriodModalComponent {
   fromDate: NgbDateStruct;
   toDate: NgbDateStruct;
 
-  @ViewChild('content') _templateModal:ElementRef;
+  @ViewChild('content', { static: true }) _templateModal:ElementRef;
 
   @Input() set modalState(_modalState:any) {;
     if(_modalState == this.modalName) {

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

@@ -16,13 +16,23 @@ export class SelectedItemContainerComponent {
 
   @Input() item: IItem;
 
-  @ViewChild(WidgetHostDirective) widgetHost: WidgetHostDirective; 
+  @ViewChild(WidgetHostDirective, { static: true }) widgetHost: WidgetHostDirective; 
 
   loadComponent() {
-    var componentFactory: ComponentFactory<AbstractSelectedItemComponent> = this.componentFactoryResolver.resolveComponentFactory(SelectedItemComponent); // default
-    for (var i = 0; i < this.selectedItemComponents.length; i++) {
-      if (this.selectedItemComponents[i]['forItemType'] == this.item.itemType) {
-        componentFactory = this.componentFactoryResolver.resolveComponentFactory(this.selectedItemComponents[i]['constructor'] as any);
+    let componentFactory: ComponentFactory<AbstractSelectedItemComponent> = this.componentFactoryResolver.resolveComponentFactory(SelectedItemComponent); // default
+    let firstComponentWithTypeAndTask = this.selectedItemComponents
+      .find(value => value['forSourceTask'] == this.item.sourceTask &&
+        value['forItemType'] == this.item.itemType
+      );
+
+    if (firstComponentWithTypeAndTask) {
+      componentFactory = this.componentFactoryResolver.resolveComponentFactory(firstComponentWithTypeAndTask['constructor'] as any);
+    } else {
+      let firstComponentWithType = this.selectedItemComponents
+        .find(value => value['forItemType'] == this.item.itemType);
+
+      if (firstComponentWithType) {
+        componentFactory = this.componentFactoryResolver.resolveComponentFactory(firstComponentWithType['constructor'] as any);
       }
     }
     const viewContainerRef = this.widgetHost.viewContainerRef;

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

@@ -3,11 +3,15 @@
   <div class="card border-0">
     <div class="card-body">
       <div><a href="#" (click)="handleBackToList($event)" i18n>Back</a></div>
-      <h4>Cropfield</h4>
-      <h1>{{item.name}}</h1>
+      <div class="card menu-card">
+        <h1>Cropfield</h1>
+        <h4>{{item.name}}</h4>
         <div>{{item.data.cropTypeName}}</div>
         <div><span>{{item.data.startDate|date}}</span> - <span>{{item.data.endDate|date}}</span> </div>
-      <div class="mt-1"><a href="#" (click)="handleOnEdit(item)" i18n><i class="fa fa-pencil" aria-hidden="true" title="Edit"></i> Edit</a></div>
+        <ul class="p-0 mt-2">
+          <li><a href="#" (click)="handleOnEdit(item)" i18n><i class="fa fa-pencil" aria-hidden="true" title="Edit"></i> Edit</a></li>
+        </ul>
+      </div>
     </div>
     <fm-map-item-list [items]="(items|async)"></fm-map-item-list>
     <fm-map-item-widget-list [item]="item"></fm-map-item-widget-list>

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

@@ -1,5 +1,7 @@
-@import "../../_theme.scss";
-@import "~bootstrap/scss/bootstrap.scss";
+@import "../../../app/theme.scss";
+@import "node_modules/bootstrap/scss/functions";
+@import "node_modules/bootstrap/scss/variables";
+@import "node_modules/bootstrap/scss/mixins";
 
 .big-icon {
   width: 100%;
@@ -13,6 +15,10 @@
   font-size: 1rem;
 }
 
+.card-body {
+  padding-bottom: unset;
+}
+
 .spacer {
   display: none;
   height: 4rem;
@@ -23,3 +29,11 @@
     display: block;
   }
 }
+
+.menu-card {
+  margin-left: -7px;
+  padding-left: 7px;
+  margin-right: -7px;
+  padding-right: 7px;
+  margin-bottom: 7px;
+}

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

@@ -3,15 +3,15 @@
   <div class="card border-0">
     <div class="card-body">
       <div class="mb-2"><a href="#" (click)="handleBackToList($event)" i18n>Back</a></div>
+      <div class="card menu-card">
         <h1>{{item.name}}</h1>
-      <div class="legend-container" *ngIf="item?.data.layers;let layers">
-        <!--<div *ngIf="layers.length>1">
-          <select (change)="onLayerChanged($event.target.value)">
-            <option *ngFor="let l of layers;let layerIndex = index" [value]="layerIndex">{{l.name}}</option>
-          </select>
-        </div>-->
-        <fm-map-layer-legend [layer]="layers[selectedLayer]" [histogramenabled]="false" histogramunit="ha"></fm-map-layer-legend>
       </div>
+      <div class="legend-container" *ngIf="item?.data.layers;let layers">
+        <div class="card menu-card">
+          <fm-map-layer-legend [layer]="layers[selectedLayer]" [histogramenabled]="true"></fm-map-layer-legend>
+        </div>
+      </div>
+      <div class="card menu-card">
         <ul class="p-0 mt-2">
           <!--<li><a href="/api/v1/items/{{item.code}}/file" class="mt-1 mr-1" i18n><i class="fa fa-download" aria-hidden="true" title="Download"></i> Download</a></li>-->
           <li><a href="#" class="mt-1 mr-1" (click)="handleOnEdit(item)" i18n><i class="fa fa-pencil" aria-hidden="true" title="Edit"></i> Edit</a></li>
@@ -20,3 +20,4 @@
       </div>
     </div>
   </div>
+</div>

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

@@ -31,3 +31,12 @@ li {
     display:block;
   }
 }
+
+.menu-card {
+  margin-left: -7px;
+  padding-left: 7px;
+  margin-right: -7px;
+  padding-right: 7px;
+  margin-bottom: 7px;
+}
+

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

@@ -3,15 +3,20 @@
   <div class="card border-0">
     <div class="card-body">
       <div class="mb-2"><a href="#" (click)="handleBackToList($event)" i18n>Back</a></div>
+      <div class="card menu-card">
         <h1>{{item.name}}</h1>
+      </div>
       <div class="legend-container" *ngIf="item?.data.layers;let layers">
+        <div class="card menu-card">
           <div *ngIf="layers.length>1">
             <select (change)="onLayerChanged($event.target.value)">
               <option *ngFor="let l of layers;" [value]="l.index">{{l.name}}</option>
             </select>
           </div>
-        <fm-map-layer-legend [showTitle]="layers.length==1" [layer]="layers[selectedLayer]" [histogramenabled]="false" histogramunit="ha"></fm-map-layer-legend>
+          <fm-map-layer-legend [showTitle]="layers.length==1" [layer]="layers[selectedLayer]" [histogramenabled]="true"></fm-map-layer-legend>
         </div>
+      </div>
+      <div class="card menu-card">
         <ul class="p-0 mt-2">
           <!--<li><a href="/api/v1/items/{{item.code}}/file" class="mt-1 mr-1" i18n><i class="fa fa-download" aria-hidden="true" title="Download"></i> Download</a></li>-->
           <li><a href="#" class="mt-1 mr-1" (click)="handleOnEdit(item)" i18n><i class="fa fa-pencil" aria-hidden="true" title="Edit"></i> Edit</a></li>
@@ -20,3 +25,4 @@
       </div>
     </div>
   </div>
+</div>

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

@@ -39,3 +39,11 @@ li {
     display: block;
   }
 }
+
+.menu-card {
+  margin-left: -7px;
+  padding-left: 7px;
+  margin-right: -7px;
+  padding-right: 7px;
+  margin-bottom: 7px;
+}

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

@@ -1,9 +1,11 @@
 <div *ngIf="item;let item">
   <div class="card border-0">
-    <img *ngIf="item.thumbnail" class="card-img-top" [src]="'/api/v1/items/'+item.code+'/thumbnail?v='+item.updated.getTime()" />
+    <img *ngIf="item.thumbnail" class="card-img-top" [src]="config.getConfig('apiEndPoint') +'/api/v1/items/'+item.code+'/thumbnail?v='+item.updated.getTime()" />
     <div *ngIf="!item.thumbnail" class="big-icon" [style.background-color]="itemTypeService.getColor(item.itemType)">
       <i [ngClass]="itemTypeService.getIcon(item.itemType)"></i>
     </div>
+  </div>
+  <div class="card">
     <div class="card-body">
       <div class="mb-2"><a href="#" (click)="handleBackToList($event)" i18n>Back</a></div>
       <h1 class="card-title">{{item.name}}</h1>

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

@@ -3,7 +3,7 @@ import { Location } from '@angular/common';
 import { Feature } from 'ol';
 import { Store } from '@ngrx/store';
 import * as mapReducers from '../../reducers/map.reducer';
-import { commonReducers,ItemTypeService, IItem, Item } from '@farmmaps/common';
+import { commonReducers,ItemTypeService, IItem, Item,AppConfig } from '@farmmaps/common';
 import * as mapActions from '../../actions/map.actions';
 import { Router, ActivatedRoute, ParamMap, Event } from '@angular/router';
 
@@ -50,7 +50,7 @@ export abstract class AbstractSelectedItemComponent {
 })
 export class SelectedItemComponent extends AbstractSelectedItemComponent {
 
-  constructor(store: Store<mapReducers.State | commonReducers.State>, itemTypeService: ItemTypeService, location: Location, router: Router) {
+  constructor(store: Store<mapReducers.State | commonReducers.State>, itemTypeService: ItemTypeService, location: Location, router: Router, public config:AppConfig) {
     super(store, itemTypeService,location,router);
   }
 }

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

@@ -7,7 +7,7 @@ import { Effect, Actions,ofType } from '@ngrx/effects';
 import { Observable ,  of } from 'rxjs';
 import { withLatestFrom, switchMap, map, catchError, mergeMap, delay} from 'rxjs/operators';
 
-import {GeoJSON} from 'ol/format';
+import {GeoJSON,WKT} from 'ol/format';
 import {Feature} from 'ol';
 import { getCenter, Extent, createEmpty, extend} from 'ol/extent';
 import {Point} from 'ol/geom'
@@ -25,10 +25,15 @@ import { tassign } from 'tassign';
 
 @Injectable()
 export class MapEffects {
-  private _format: GeoJSON;
+  private _geojsonFormat: GeoJSON;
+  private _wktFormat: WKT;
 
-  private toPointFeature(feature: any): Feature {
-    var f = this._format.readFeature(feature);
+  private toPointFeature(updateEvent:commonActions.DeviceUpdateEvent): Feature {
+    var f = this._wktFormat.readFeature(updateEvent.attributes["geometry"],{
+      dataProjection: 'EPSG:4326',
+      featureProjection: 'EPSG:3857'
+    });
+    f.setId(updateEvent.itemCode);
     var centroid = getCenter(f.getGeometry().getExtent());
     f.setGeometry(new Point(centroid));
     return f;
@@ -74,7 +79,7 @@ export class MapEffects {
       console.debug("Start search");
       var startDate = action.queryState.startDate;
       var endDate = action.queryState.endDate;    
-      var newAction;
+      var newAction:Observable<Action>;
       if (action.queryState.itemCode || action.queryState.parentCode || action.queryState.itemType || action.queryState.query || action.queryState.tags) {
         newAction= this.itemService$.getFeatures(action.queryState.bbox, "EPSG:3857", action.queryState.query, action.queryState.tags, startDate, endDate, action.queryState.itemType, action.queryState.parentCode).pipe(
           switchMap((features: any) => {
@@ -83,7 +88,7 @@ export class MapEffects {
                 f.id = f.properties["code"];
               }
             }
-            return of(new mapActions.StartSearchSuccess(this._format.readFeatures(features), action.queryState));
+            return of(new mapActions.StartSearchSuccess(this._geojsonFormat.readFeatures(features), action.queryState));
           }
           ),
           catchError(error => of(new commonActions.Fail(error))));
@@ -135,7 +140,11 @@ export class MapEffects {
     ofType(mapActions.SELECTITEMSUCCESS),
     switchMap((action:mapActions.SelectItemSuccess) => {
       return this.itemService$.getFeature(action.item.code, "EPSG:3857").pipe(
-        map((feature: IItem) => new mapActions.AddFeatureSuccess(this._format.readFeature(feature) )),
+        map((feature: any) => {
+          let f = this._geojsonFormat.readFeature(feature);
+          f.setId(action.item.code);
+          return new mapActions.AddFeatureSuccess(f );
+        }),
         catchError(error => of(new commonActions.Fail(error))));
     }
     ));
@@ -163,21 +172,19 @@ export class MapEffects {
 
   @Effect()
   featureUpdate$: Observable<Action> = this.actions$.pipe(
-    ofType(commonActions.ITEMCHANGEDEVENT),
+    ofType(commonActions.DEVICEUPDATEEVENT),
     withLatestFrom(this.store$.select(mapReducers.selectGetFeatures)),
     mergeMap(([action, features]) => {
-      let itemChangedAction = action as commonActions.ItemChangedEvent;
+      let deviceUpdateEventAction = action as commonActions.DeviceUpdateEvent;
       var feature: Feature = null;
       for (let f of features) {
-        if (f.get("code") == itemChangedAction.itemCode) {
+        if (f.getId() == deviceUpdateEventAction.itemCode) {
           feature = f;
           break;
         }
       }     
       if (feature) {
-        return this.itemService$.getFeature(itemChangedAction.itemCode, "EPSG:3857").pipe(
-          map((feature: any) => new mapActions.UpdateFeatureSuccess(this.toPointFeature(feature))),
-          catchError(error => of(new commonActions.Fail(error))));
+        return of(new mapActions.UpdateFeatureSuccess(this.toPointFeature(deviceUpdateEventAction)));        
       } else {
         return [];
       }
@@ -225,6 +232,7 @@ export class MapEffects {
     }));
 
   constructor(private actions$: Actions, private store$: Store<mapReducers.State>, private folderService$: FolderService, private itemService$: ItemService) {
-    this._format = new GeoJSON();
+    this._geojsonFormat = new GeoJSON();
+    this._wktFormat = new WKT();
   }
 }

projects/common-map/src/fm-map/models/color.map.ts

@@ -7,7 +7,8 @@ export interface IColor {
 
 export interface IColorEntry {
    value: number,
-   color: IColor
+   color: IColor,
+   label: string
 }
 
 export interface IHistogramEntry {
@@ -32,7 +33,8 @@ export interface IGradientstop {
 export interface IColorMap {
   gradient: IGradientstop[],
   noValue: IColorEntry,
-   entries: IColorEntry[]
+  entries: IColorEntry[],
+  colormapType: string
 }
 
 export interface IBand {
@@ -42,7 +44,8 @@ export interface IBand {
 
 export interface IRenderer {
   band:IBand,
-  colorMap: IColorMap
+  colorMap: IColorMap,
+  renderType:string
 }
 
 export interface IRenderoutput {

projects/common-map/src/fm-map/models/index.ts

@@ -1,7 +0,0 @@
-export * from './map.state';
-export * from './selected.features';
-export * from './item.layer'
-export * from './layer.data'
-export * from './color.map';
-export * from './query.state';
-export * from './period.state';

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

@@ -1,6 +1,9 @@
 import { tassign } from 'tassign';
 import { IItem,Item } from '@farmmaps/common';
-import { IItemLayer,ItemLayer, IMapState,IQueryState,IPeriodState} from '../models'
+import { IItemLayer,ItemLayer} from '../models/item.layer';
+import { IMapState} from '../models/map.state';
+import { IQueryState} from '../models/query.state';
+import { IPeriodState} from '../models/period.state';
 import * as mapActions from '../actions/map.actions';
 import {commonActions} from '@farmmaps/common';
 import { createSelector, createFeatureSelector } from '@ngrx/store';
@@ -190,7 +193,7 @@ export function reducer(state = initialState, action: mapActions.Actions | commo
       let features: any[] = [];
       var index = -1;
       for (var i = 0; i < state.features.length; i++) {
-        if (state.features[i].get("code") == a.feature.get("code")) {
+        if (state.features[i].getId() == a.feature.getId()) {
           features.push(a.feature);
         } else {
           features.push(state.features[i]);

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

@@ -0,0 +1,24 @@
+import { Injectable } from '@angular/core';
+import { Observer, Observable } from 'rxjs';
+
+
+@Injectable()
+export class DeviceOrientationService {
+
+   /**
+   * Tries HTML5 geolocation.
+   *
+   * Wraps the Geolocation API into an observable.
+   *
+   * @return An observable of Bearing
+   */
+  getCurrentBearing(): Observable<number> {
+    return Observable.create((observer: Observer<number>) => {             
+        let sensor = new Magnetometer();
+        sensor.onreading= (ev:Event) => {
+             observer.next(Math.atan2(sensor.y, sensor.x) * (180 / Math.PI));
+        };
+    });
+  }
+
+}

projects/common/package-lock.json

@@ -5,9 +5,9 @@
   "requires": true,
   "dependencies": {
     "angular-oauth2-oidc": {
-      "version": "5.0.2",
-      "resolved": "https://registry.npmjs.org/angular-oauth2-oidc/-/angular-oauth2-oidc-5.0.2.tgz",
-      "integrity": "sha512-jtOv4IWEjSFfBHVE4seWGWT/ZfWJ95QJ1JaFhVVGJEF64ibGuPwV3ztwTOUl98QHi/Yg4PXXDAisb31JnIbxBw==",
+      "version": "8.0.4",
+      "resolved": "https://registry.npmjs.org/angular-oauth2-oidc/-/angular-oauth2-oidc-8.0.4.tgz",
+      "integrity": "sha512-7/3niJBqD7rnElcW+SudE36g7zMWChW4gSq7NpJSzDA4aQadBgvg0hn317MfPm9tpYGrpE3G/z2NMnbzek4TMA==",
       "requires": {
         "jsrsasign": "^8.0.12",
         "tslib": "^1.9.0"
@@ -19,9 +19,9 @@
       "integrity": "sha1-Iqu5ZW00owuVMENnIINeicLlwxY="
     },
     "ngx-uploadx": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/ngx-uploadx/-/ngx-uploadx-3.1.3.tgz",
-      "integrity": "sha512-RX3uEaqMTpjTv5mtdnTQYsDOED3Qg5V3OBU5ohOyL35uL+dllF7I0y+kojJprm9thzHNAWih1DLeTlVWZKo+hQ==",
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/ngx-uploadx/-/ngx-uploadx-3.3.2.tgz",
+      "integrity": "sha512-gRdXXq2cRU9HE6dj65qay9GV8NRC7n8y5LtMzJWqsfu2k3CHMQxo2TqZwA9/l/PqJ76RoO7sTPy1OenFQ+krkQ==",
       "requires": {
         "tslib": "^1.9.0"
       }

projects/common/package.json

@@ -5,17 +5,17 @@
     "registry": "https://repository.akkerweb.nl/repository/npm-hosted/"
   },
   "dependencies": {
-    "angular-oauth2-oidc": "^5.0.2",
-    "ngx-uploadx": "^3.1.3"
+    "angular-oauth2-oidc": "^8.0.2",
+    "ngx-uploadx": "^3.3.2"
   },
   "peerDependencies": {
     "@ng-bootstrap/ng-bootstrap": "^4.2.1",
-    "@angular/common": "^7.2.0",
-    "@angular/core": "^7.2.0",
-    "@angular/forms": "^7.2.0",
-    "@ngrx/effects": "^7.2",
-    "@ngrx/router-store": "^7.2",
-    "@ngrx/store": "^7.2",
+    "@angular/common": "^8.2.0",
+    "@angular/core": "^8.2.0",
+    "@angular/forms": "^8.2.0",
+    "@ngrx/effects": "^8.2",
+    "@ngrx/router-store": "^8.2",
+    "@ngrx/store": "^8.2",
     "tassign": "^1.0.0",
     "bootstrap": "^4.3.1",
     "@aspnet/signalr": "^1.1.4",

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

@@ -27,6 +27,8 @@ export const TASKSTARTEVENT = '[AppCommon] TaskStartEvent';
 export const TASKENDEVENT = '[AppCommon] TaskEndEvent';
 export const TASKERRORTEVENT = '[AppCommon] TaskErrorEvent';
 
+export const DEVICEUPDATEEVENT = '[AppCommon] DeviceUpdateEvent';
+
 export const DELETEITEMS = '[AppCommon] DeleteItems';
 export const DELETEITEMSSUCCESS = '[AppCommon] DeleteItemsSuccess';
 
@@ -164,6 +166,12 @@ export class TaskErrorEvent implements Action {
   constructor(public itemCode: string, public attributes: any) { }
 }
 
+export class DeviceUpdateEvent implements Action {
+  readonly type = DEVICEUPDATEEVENT;
+
+  constructor(public itemCode: string, public attributes: any) { }
+}
+
 export class DeleteItems implements Action {
   readonly type = DELETEITEMS;
 
@@ -231,4 +239,5 @@ export type Actions = OpenModal
   | InitUserSuccess
   | TaskStartEvent
   | TaskEndEvent
-  | TaskErrorEvent;
+  | TaskErrorEvent
+  | DeviceUpdateEvent;

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

@@ -0,0 +1,106 @@
+// angular modules
+import { NgModule, APP_INITIALIZER, ModuleWithProviders, Injector,Optional,SkipSelf } from '@angular/core';
+import { CommonModule, DatePipe } from '@angular/common';
+import { HttpClientModule, HttpClient, HTTP_INTERCEPTORS } from '@angular/common/http';
+import { FormsModule } from '@angular/forms';
+
+// external modules
+import { OAuthModule,AuthConfig, OAuthService, OAuthStorage } from 'angular-oauth2-oidc';
+
+
+// routing module
+import { AppCommonRoutingModule } from './common-routing.module';
+
+import { MODULE_NAME }  from './module-name';
+
+//components
+import { ItemTypeService } from './services/itemtype.service';
+import { FolderService } from './services/folder.service';
+import { TimespanService} from './services/timespan.service';
+import { ItemService} from './services/item.service';
+import { EventService } from './services/event.service';
+import { TypeaheadService } from './services/typeahead.service';
+import { UserService } from './services/user.service';
+import { AppConfig } from './shared/app.config';
+import { AccessTokenInterceptor } from "./shared/accesstoken.interceptor";
+import { appConfigFactory } from "./shared/app.config.factory";
+import { AuthGuard } from './services/auth-guard.service';
+import { NavBarGuard } from './services/nav-bar-guard.service';
+import { FullScreenGuard } from './services/full-screen-guard.service';
+import { SafePipe } from './shared/safe.pipe';
+import { AppComponent} from './components/app/app.component';
+import { AuthCallbackComponent } from './components/auth-callback/auth-callback.component';
+import { AuthCallbackGuard } from './components/auth-callback/auth-callback.guard';
+import { SessionClearedComponent } from './components/session-cleared/session-cleared.component';
+import { ResumableFileUploadService } from './components/resumable-file-upload/resumable-file-upload.service';
+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 {IEventMessage } from './models/event.message';
+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 {IListItem} from './models/list.item';
+import {ITypeaheadItem} from './models/typeahead.item';
+import {IUser} from './models/user';
+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 {NgbDateNativeAdapter} from './services/date-adapter.service'
+import { from } from 'rxjs';
+import {AuthConfigFactory} from './shared/authconfigFactory';
+
+export {FolderService,
+  ItemTypeService,
+  TimespanService,
+  ItemService,
+  EventService,
+  TypeaheadService,
+  UserService,
+  AppConfig,
+  AccessTokenInterceptor,
+  AuthGuard,
+  NavBarGuard,
+  FullScreenGuard,
+  AuthCallbackGuard,
+  ResumableFileUploadService,
+  NgbDateNativeAdapter
+};
+
+@NgModule({
+  imports: [
+    OAuthModule.forRoot(),
+  ]
+})
+export class AppCommonServiceModule {
+  constructor (@Optional() @SkipSelf() parentModule: AppCommonServiceModule) {
+    if (parentModule) {
+      throw new Error(
+        'AppCommonServiceModule is already loaded. Import it in the AppModule only');
+    }
+  }
+  static forRoot(): ModuleWithProviders {
+    return {
+      ngModule: AppCommonServiceModule,
+      providers: [
+        AppConfig,
+        {
+          provide: APP_INITIALIZER,
+          useFactory: appConfigFactory,
+          deps: [Injector, AppConfig, OAuthService,AuthConfigFactory],
+          multi: true
+        },       
+        {
+          provide: HTTP_INTERCEPTORS,
+          useClass: AccessTokenInterceptor,
+          multi: true
+        },
+        DatePipe
+      ]
+    };
+  }
+}

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

@@ -18,25 +18,11 @@ import { AppCommonRoutingModule } from './common-routing.module';
 import { MODULE_NAME }  from './module-name';
 
 //components
-import { ItemTypeService } from './services/itemtype.service';
-import { FolderService } from './services/folder.service';
-import { TimespanService} from './services/timespan.service';
-import { ItemService} from './services/item.service';
-import { EventService } from './services/event.service';
-import { TypeaheadService } from './services/typeahead.service';
-import { UserService } from './services/user.service';
-import { AppConfig } from './shared/app.config';
-import { AccessTokenInterceptor } from "./shared/accesstoken.interceptor";
-import { appConfigFactory } from "./shared/app.config.factory";
-import { AuthGuard } from './services/auth-guard.service';
-import { NavBarGuard } from './services/nav-bar-guard.service';
-import { FullScreenGuard } from './services/full-screen-guard.service';
 import { SafePipe } from './shared/safe.pipe';
+import { AuthConfigFactory,IAuthconfigFactory} from './shared/authconfigFactory';
 import { AppComponent} from './components/app/app.component';
 import { AuthCallbackComponent } from './components/auth-callback/auth-callback.component';
-import { AuthCallbackGuard } from './components/auth-callback/auth-callback.guard';
 import { SessionClearedComponent } from './components/session-cleared/session-cleared.component';
-import { ResumableFileUploadService } from './components/resumable-file-upload/resumable-file-upload.service';
 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';
@@ -54,27 +40,12 @@ import {IUser} from './models/user';
 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 {NgbDateNativeAdapter} from './services/date-adapter.service'
-import { from } from 'rxjs';
 
-export {FolderService,
-  ItemTypeService,
-  TimespanService,
-  ItemService,
-  EventService,
-  TypeaheadService,
-  UserService,
-  AppConfig,
-  AccessTokenInterceptor,
-  AuthGuard,
-  NavBarGuard,
-  FullScreenGuard,
+export {
   SafePipe,
   AuthCallbackComponent,
-  AuthCallbackGuard,
   AppComponent,
   SessionClearedComponent,
-  ResumableFileUploadService,
   ResumableFileUploadComponent,
   NotFoundComponent,
   NotImplementedComponent,
@@ -93,7 +64,8 @@ export {FolderService,
   IUser,
   commonActions,
   commonReducers,
-  NgbDateNativeAdapter
+  IAuthconfigFactory,
+  AuthConfigFactory
 };
 
 @NgModule({
@@ -108,9 +80,6 @@ export {FolderService,
     FormsModule,
     UploadxModule
   ],
-  providers: [
-    DatePipe
-  ],
   declarations: [
     AppComponent,
     AuthCallbackComponent,
@@ -141,29 +110,4 @@ export {FolderService,
     ]
 })
 export class AppCommonModule {
-  constructor (@Optional() @SkipSelf() parentModule: AppCommonModule) {
-    if (parentModule) {
-      throw new Error(
-        'AppCommonModule is already loaded. Import it in the AppModule only');
-    }
-  }
-  static forRoot(): ModuleWithProviders {
-    return {
-      ngModule: AppCommonModule,
-      providers: [
-        AppConfig,
-        {
-          provide: APP_INITIALIZER,
-          useFactory: appConfigFactory,
-          deps: [Injector, AppConfig, OAuthService],
-          multi: true
-        },       
-        {
-          provide: HTTP_INTERCEPTORS,
-          useClass: AccessTokenInterceptor,
-          multi: true
-        }
-      ]
-    };
-  }
 }

projects/common/src/fm/components/app/app.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit, OnDestroy, Inject, ViewEncapsulation, RendererFactory2, PLATFORM_ID, ChangeDetectionStrategy, HostListener } from '@angular/core';
 import { Router, NavigationEnd, RouteConfigLoadStart, RouteConfigLoadEnd, ActivatedRoute, PRIMARY_OUTLET } from '@angular/router';
-import { Meta, Title, DOCUMENT, MetaDefinition } from '@angular/platform-browser';
+import { Meta, Title, MetaDefinition } from '@angular/platform-browser';import { DOCUMENT } from "@angular/common";
 import { Subscription ,  Observable } from 'rxjs';
 import { Store, Action } from '@ngrx/store';
 
@@ -77,6 +77,10 @@ export class AppComponent implements OnInit, OnDestroy {
         action = new commonActions.TaskErrorEvent(event.itemCode, event.attributes);
         break;
       }
+      case "deviceUpdate": {
+        action = new commonActions.DeviceUpdateEvent(event.itemCode, event.attributes);
+        break;
+      }
     }
     return action;
   }

projects/common/src/fm/components/resumable-file-upload/resumable-file-upload.component.html

@@ -2,7 +2,7 @@
   <div>
     <div class="card">
       <div class="card-header  p-3 bg-primary text-white">
-        <span *ngIf="uploadService.isUploading">Uploading files (<span>{{uploadService.totalProgress}}</span> %)</span>
+        <span *ngIf="uploadService.isUploading">Uploading files (<span>{{uploadService.totalProgress | number:'1.1-1'}}</span> %)</span>
         <span *ngIf="uploadService.isUploading == false">Uploaded <span>{{uploadService.files.length}}</span> files</span>
         <span title="Cancel" class="fa fa-times pull-right" (click)="uploadService.close()"></span><span title="Minimize" class="fa fa-chevron-down pull-right" (click)="uploadService.toggleMinimize()" [ngClass]="{'fa-chevron-down': uploadService.isMinimized == false, 'fa-chevron-up':uploadService.isMinimized}"></span>
       </div>

projects/common/src/fm/components/side-panel/side-panel.component.ts

@@ -12,7 +12,7 @@ export class SidePanelComponent  implements OnChanges {
   @Input() public collapsed: boolean;
   @Input() public collapsable: boolean;
   @Input() public resizeable: boolean = false;
-  @ViewChild("resizeGrip") elementView: ElementRef;
+  @ViewChild("resizeGrip", { static: false }) elementView: ElementRef;
   public mobile:boolean = true;
   private parentHeight:number = 0;
   public top = "100%";

projects/common/src/fm/components/tag-input/tag-input.component.ts

@@ -19,7 +19,7 @@ import { TypeaheadService } from '../../services/typeahead.service';
 
 export class TagInputComponent implements ControlValueAccessor  {
   @Input() tags: string[]
-  @ViewChild('taginput') tagInputElement: ElementRef;
+  @ViewChild('taginput', { static: true }) tagInputElement: ElementRef;
   public tag: string;
   searching = false;
   searchFailed = false;

projects/common/src/fm/components/timespan/timespan.component.ts

@@ -34,9 +34,9 @@ export class TimespanComponent implements OnInit, OnChanges {
   elementWidth:number;
   elementHeight:number;
   lastOffsetInPixels:number=0;
-  @ViewChild('timeLine') canvasRef;
-  @ViewChild('popoverStart') public popoverStart:NgbPopover;
-  @ViewChild('popoverEnd') public popoverEnd:NgbPopover;
+  @ViewChild('timeLine', { static: true }) canvasRef;
+  @ViewChild('popoverStart', { static: true }) public popoverStart:NgbPopover;
+  @ViewChild('popoverEnd', { static: true }) public popoverEnd:NgbPopover;
   @Input() collapsed: boolean = true;
   @Input() startDate: Date = new Date(2018,1,3);
   @Input() endDate: Date = new Date(2018,1,5);

projects/common/src/fm/index.ts

@@ -1 +0,0 @@
-

projects/common/src/fm/services/item.service.ts

@@ -75,7 +75,7 @@ export class ItemService {
       params = params.append("df", JSON.stringify(dataFilter));
     }
     params = params.append("lvl", level.toString());
-    return this.httpClient.get<IItem[]>(`${this.ApiEndpoint()}/api/v1/items/${parentcode}/children`, { params: params });
+    return this.httpClient.get<IItem[]>(`${this.ApiEndpoint()}/api/v1/items/${parentcode}/children`, { params: params }).pipe(map(ia => ia.map(i => this.parseDates(i))));
   }
 
   getChildItemListByExtent(parentcode: string, itemType: string, extent: number[], crs: string, dataFilter?: any, level: number = 1): Observable<IItem[]> {
@@ -87,13 +87,15 @@ export class ItemService {
       params = params.append("df", JSON.stringify(dataFilter));
     }
     params = params.append("lvl", level.toString());
-    return this.httpClient.get<IItem[]>(`${this.ApiEndpoint()}/api/v1/items/${parentcode}/children`, { params: params });
+    return this.httpClient.get<IItem[]>(`${this.ApiEndpoint()}/api/v1/items/${parentcode}/children`, { params: params }).pipe(map(ia => ia.map(i => this.parseDates(i))));
   }
 
   getItemFeatures(code: string, extent: number[], crs: string, layerIndex?:number): Observable<any> {
     var params = new HttpParams();
-    params = params.append("bbox", extent.join(","));
     params = params.append("crs", crs);
+    if(extent != null) {
+      params = params.append("bbox", extent.join(","));
+    }
     if(layerIndex!=null)
       return this.httpClient.get<any>(`${this.ApiEndpoint()}/api/v1/items/${code}/features/layer/${layerIndex}`, { params: params });
     else

projects/common/src/fm/shared/app.config.factory.ts

@@ -2,22 +2,10 @@ import { Injector } from '@angular/core';
 import { Router,UrlSerializer } from '@angular/router';
 import { AuthConfig, OAuthService, JwksValidationHandler, OAuthErrorEvent  } from 'angular-oauth2-oidc';
 import { AppConfig } from "./app.config";
+import { IAuthconfigFactory } from './authconfigFactory';
 
-function getAuthConfig(appConfig: AppConfig): AuthConfig {
-  let authConfig: AuthConfig = new AuthConfig();
-  authConfig.issuer = appConfig.getConfig("issuer");
-  authConfig.redirectUri = window.location.origin + "/cb";
-  authConfig.silentRefreshRedirectUri = window.location.origin + "/silent-refresh.html";
-  authConfig.clientId = appConfig.getConfig("clientId");
-  authConfig.customQueryParams = { audience: appConfig.getConfig("audience") };
-  authConfig.scope = "openid profile email";
-  authConfig.oidc = true;
-  authConfig.disableAtHashCheck = true;
-  authConfig.requireHttps = appConfig.getConfig("requireHttps");
-  return authConfig;
-}
 
-export function appConfigFactory(injector:Injector, appConfig: AppConfig, oauthService: OAuthService): () => Promise<any> {
+export function appConfigFactory(injector:Injector, appConfig: AppConfig, oauthService: OAuthService, authconfigFactory:IAuthconfigFactory): () => Promise<any> {
   return (): Promise<any> => {
     return appConfig.load().then(() => {     
       oauthService.events.subscribe((event) => {
@@ -32,7 +20,7 @@ export function appConfigFactory(injector:Injector, appConfig: AppConfig, oauthS
           }          
         }
       });
-      oauthService.configure(getAuthConfig(appConfig));
+      oauthService.configure(authconfigFactory.getAuthConfig(appConfig));
       oauthService.tokenValidationHandler = new JwksValidationHandler();
       oauthService.tokenValidationHandler.validateAtHash = function () {
         return new Promise<boolean>((res) => { res(true); })

projects/common/src/fm/shared/app.config.ts

@@ -1,4 +1,5 @@
 import {Inject, Injectable} from '@angular/core';
+import { Location,PathLocationStrategy,LocationStrategy } from '@angular/common';
 import {HttpClient, HttpXhrBackend} from '@angular/common/http';
 import {Observable} from 'rxjs';
 
@@ -8,7 +9,7 @@ export class AppConfig {
   private config: Object = null;
   private httpClient: HttpClient;
 
-  constructor(xhrBackend: HttpXhrBackend) {
+  constructor(xhrBackend: HttpXhrBackend,private location:Location) {
     this.httpClient = new HttpClient(xhrBackend);
     this.config = null;
   }
@@ -21,7 +22,9 @@ export class AppConfig {
   }
 
   public load(): Promise<any> {
-    return this.httpClient.get('/configuration.json')
+    var url = this.location.prepareExternalUrl('/configuration.json');
+    if(url.startsWith("#"))  url='file:///android_asset/www/configuration.json';   // hack for cordova
+    return this.httpClient.get(url)
       .toPromise()
       .then(data => {
         this.config = data;

projects/common/src/fm/shared/authconfigFactory.ts

@@ -0,0 +1,22 @@
+import { AuthConfig } from 'angular-oauth2-oidc';
+import {AppConfig} from './app.config';
+
+export interface IAuthconfigFactory {
+    getAuthConfig(appConfig: AppConfig): AuthConfig;
+}
+
+export class AuthConfigFactory implements IAuthconfigFactory {
+    getAuthConfig(appConfig: AppConfig): AuthConfig {
+      let authConfig: AuthConfig = new AuthConfig();
+      authConfig.issuer = appConfig.getConfig("issuer");
+      authConfig.redirectUri = window.location.origin + "/cb";
+      authConfig.silentRefreshRedirectUri = window.location.origin + "/silent-refresh.html";
+      authConfig.clientId = appConfig.getConfig("clientId");
+      authConfig.customQueryParams = { audience: appConfig.getConfig("audience") };
+      authConfig.scope = "openid profile email";
+      authConfig.oidc = true;
+      authConfig.disableAtHashCheck = true;
+      authConfig.requireHttps = appConfig.getConfig("requireHttps");
+      return authConfig;
+    }
+  }

projects/common/src/public-api.ts

@@ -3,3 +3,4 @@
  */
 
 export * from './fm/common.module';
+export * from './fm/common-service.module';

src/app/app.component.spec.ts

@@ -1,31 +0,0 @@
-import { TestBed, async } from '@angular/core/testing';
-import { AppComponent } from './app.component';
-
-describe('AppComponent', () => {
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [
-        AppComponent
-      ],
-    }).compileComponents();
-  }));
-
-  it('should create the app', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.debugElement.componentInstance;
-    expect(app).toBeTruthy();
-  });
-
-  it(`should have as title 'farmmaps-lib-app'`, () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.debugElement.componentInstance;
-    expect(app.title).toEqual('farmmaps-lib-app');
-  });
-
-  it('should render title in a h1 tag', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    fixture.detectChanges();
-    const compiled = fixture.debugElement.nativeElement;
-    expect(compiled.querySelector('h1').textContent).toContain('Welcome to farmmaps-lib-app!');
-  });
-});

src/app/app.module.ts

@@ -6,7 +6,7 @@ import {
 } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 
-import { AppCommonModule,  } from '@farmmaps/common';
+import { AppCommonModule,AppCommonServiceModule,AuthConfigFactory  } from '@farmmaps/common';
 import { AppCommonMapModule} from '@farmmaps/common-map';
 
 import {AppRootComponent} from './app.component';
@@ -18,6 +18,8 @@ import { StoreRouterConnectingModule} from '@ngrx/router-store';
 import {AppRoutingModule} from './app-routing.module';
 import { LogoComponent } from './logo/logo.component';
 import { MenuComponent } from './menu/menu.component';
+import { LocalAuthconfigFactory} from './localAuthconfigFactory';
+import { AuthConfig } from 'angular-oauth2-oidc';
 
 export const BOOTSTRAP_EFFECTS = new InjectionToken('Bootstrap Effects');
 
@@ -52,13 +54,20 @@ export function provideBootstrapEffects(effects: Type<any>[]) {
   ],
   imports: [
     AppRoutingModule,
-    AppCommonModule.forRoot() ,
+    AppCommonModule,
+    AppCommonServiceModule.forRoot(),
     AppCommonMapModule.forRoot(),
     BrowserModule,
     StoreModule.forRoot({}),
     EffectsModule.forRoot([])
   ],
-  providers: [],
+  providers: [
+    AuthConfigFactory
+    // {
+    //   provide:AuthConfigFactory,
+    //   useClass:LocalAuthconfigFactory
+    // }
+   ],
   bootstrap: [AppRootComponent]
 })
 export class AppModule { }

src/app/localAuthconfigFactory.ts

@@ -0,0 +1,22 @@
+import {IAuthconfigFactory,AppConfig} from '@farmmaps/common';
+import {AuthConfig} from 'angular-oauth2-oidc';
+
+export class LocalAuthconfigFactory implements IAuthconfigFactory {
+    getAuthConfig(appConfig:AppConfig): AuthConfig {
+        let authConfig: AuthConfig = new AuthConfig();
+        authConfig.issuer = appConfig.getConfig("issuer");
+        authConfig.redirectUri = window.location.origin + "/cb";
+        authConfig.silentRefreshRedirectUri = window.location.origin + "/silent-refresh.html";
+        authConfig.clientId = appConfig.getConfig("clientId");
+        authConfig.customQueryParams = { audience: appConfig.getConfig("audience") };
+        authConfig.scope = "openid profile email";
+        authConfig.oidc = true;
+        authConfig.disableAtHashCheck = true;
+        authConfig.openUri = uri => {
+            window.alert("OK "+uri);
+          }
+        authConfig.requireHttps = appConfig.getConfig("requireHttps");
+        return authConfig;
+    }
+
+}

src/polyfills.ts

@@ -43,7 +43,7 @@
  *
  * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
  * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
- * (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
+ * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
  *
  *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
  *  with the following flag, it will bypass `zone.js` patch for IE/Edge

tsconfig.json

@@ -2,15 +2,16 @@
   "compileOnSave": false,
   "compilerOptions": {
     "baseUrl": "./",
+    "downlevelIteration": true,
     "outDir": "./dist/out-tsc",
     "sourceMap": true,
     "declaration": false,
-    "module": "es2015",
+    "module": "esnext",
     "moduleResolution": "node",
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
     "importHelpers": true,
-    "target": "es5",
+    "target": "es2015",
     "typeRoots": [
       "node_modules/@types"
     ],

tslint.json

@@ -62,12 +62,12 @@
     ],
     "trailing-comma": false,
     "no-output-on-prefix": true,
-    "use-input-property-decorator": true,
-    "use-output-property-decorator": true,
-    "use-host-property-decorator": true,
+    "no-inputs-metadata-property": true,
+    "no-outputs-metadata-property": true,
+    "no-host-metadata-property": true,
     "no-input-rename": true,
     "no-output-rename": true,
-    "use-life-cycle-interface": true,
+    "use-lifecycle-interface": true,
     "use-pipe-transform-interface": true,
     "component-class-suffix": true,
     "directive-class-suffix": true