Prefixed map-common

projects/common-map/package-lock.json

@@ -5,9 +5,9 @@
   "requires": true,
   "dependencies": {
     "@farmmaps/common": {
-      "version": "0.0.1-prerelease.43",
+      "version": "0.0.1-prerelease.51",
-      "resolved": "https://repository.akkerweb.nl/repository/npm-group/@farmmaps/common/-/common-0.0.1-prerelease.43.tgz",
+      "resolved": "https://repository.akkerweb.nl/repository/npm-group/@farmmaps/common/-/common-0.0.1-prerelease.51.tgz",
-      "integrity": "sha512-tV42SIpXAremVLolUEW0ESdYRdyllunbIZgHB3ObsqPJMrI0vgnkIr8LdtSaaYokAGXA3L8n6q3Zi78/hiBgQg==",
+      "integrity": "sha512-1E7BDQVQ34N+dFiipHHUj9X50fpU3c8UqTLqwb9UpE+PpfLp+njN4rg2MXYwglbB8chlz/glaPPurYwjzDadxQ==",
       "requires": {
         "angular-oauth2-oidc": "^5.0.2",
         "ngx-uploadx": "^3.1.3",
@@ -42,9 +42,9 @@
       }
     },
     "ngx-uploadx": {
-      "version": "3.3.1",
+      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/ngx-uploadx/-/ngx-uploadx-3.3.1.tgz",
+      "resolved": "https://registry.npmjs.org/ngx-uploadx/-/ngx-uploadx-3.3.2.tgz",
-      "integrity": "sha512-2WsE2BgA1RlrCuJ2Arcl6vObfL+dJzZFdFnnOOjbsW0ib+MmC+6dEL7QXgTs+sRCOzs2wC+F1sQ27nMPjhvpjg==",
+      "integrity": "sha512-gRdXXq2cRU9HE6dj65qay9GV8NRC7n8y5LtMzJWqsfu2k3CHMQxo2TqZwA9/l/PqJ76RoO7sTPy1OenFQ+krkQ==",
       "requires": {
         "tslib": "^1.9.0"
       }

projects/common-map/package.json

@@ -5,7 +5,7 @@
     "registry": "https://repository.akkerweb.nl/repository/npm-hosted/"
   },
   "dependencies": {
-    "@farmmaps/common": "0.0.1-prerelease.43",
+    "@farmmaps/common": "0.0.1-prerelease.51",
     "ngx-openlayers": "1.0.0-next.9",
     "ol": "^5.3.3"
   },

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

@@ -14,7 +14,7 @@ export interface IDroppedFile {
 }
 
 @Component({
-  selector: 'file-drop-target',
+  selector: 'fm-map-file-drop-target',
   template: ''
 })
 export class FileDropTargetComponent implements OnInit, OnDestroy {

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

@@ -5,7 +5,7 @@ import { fromLonLat, toLonLat } from 'ol/proj';
 
 
 @Component({
-  selector: 'gps-location',
+  selector: 'fm-map-gps-location',
   templateUrl: './gps-location.component.html',
   styleUrls: ['./gps-location.component.scss']
 })

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

@@ -16,7 +16,7 @@ import * as loadingstrategy from 'ol/loadingstrategy';
 import {GeoJSON} from 'ol/format';
 
 @Component({
-  selector: 'item-features-source',
+  selector: 'fm-map-item-features-source',
   template: `<ng-content></ng-content>`,
   providers: [
     { provide: SourceVectorComponent, useExisting: forwardRef(() => ItemFeaturesSourceComponent) }

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

@@ -20,7 +20,7 @@ import {GeoJSON,MVT} from 'ol/format';
 import { from } from 'rxjs';
 
 @Component({
-  selector: 'item-layers',
+  selector: 'fm-map-item-layers',
   template: `<ng-content></ng-content>`,
   providers: [
     { provide: LayerGroupComponent, useExisting: forwardRef(() => ItemLayersComponent) }

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

@@ -16,7 +16,7 @@ import {GeoJSON} from 'ol/format';
 import {Select} from 'ol/interaction';
  
 @Component({
-  selector: 'item-source-vector',
+  selector: 'fm-map-item-source-vector',
   template: `<ng-content></ng-content>`,
   providers: [
     { provide: SourceVectorComponent , useExisting: forwardRef(() => ItemVectorSourceComponent) }

projects/common-map/src/lib/components/aol/layer-list/layer-list.component.html

@@ -16,7 +16,7 @@
         </div>
         <div *ngIf="itemLayer.legendVisible">
           <div class="card legend">
-            <layer-legend [layer]="firstLayer(itemLayer)" (click)="handleLegendClick($event,itemLayer);"></layer-legend>
+            <fm-map-layer-legend [layer]="firstLayer(itemLayer)" (click)="handleLegendClick($event,itemLayer);"></fm-map-layer-legend>
           </div>
         </div>
     </div>

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

@@ -2,7 +2,7 @@ import { Component,Input,Output,EventEmitter } from '@angular/core';
 import { IItemLayer } from '../../../models';
 
 @Component({
-  selector: 'layer-list',
+  selector: 'fm-map-layer-list',
   templateUrl: './layer-list.component.html',
   styleUrls: ['./layer-list.component.scss']
 })

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

@@ -6,7 +6,7 @@ import { LayerVectorComponent, LayerGroupComponent, MapComponent } from 'ngx-ope
 import { RenderType  } from 'ol/layer/Vector';
 
 @Component({
-  selector: 'aol-layer-vector-image',
+  selector: 'fm-map-aol-layer-vector-image',
   template: `
     <ng-content></ng-content>
   `,

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

@@ -6,7 +6,7 @@ import {View} from 'ol';
 
 
 @Component({
-  selector: 'rotation-reset',
+  selector: 'fm-map-rotation-reset',
   template: `<div (click)="handleClick($event)" class="rounded-circle compass" [style.transform]="Rotation()" [ngClass]="{'compass-n':IsNorth()}"></div>`,
   styles: [`.compass {
       width:2.5em;

projects/common-map/src/lib/components/aol/switch2d3d/switch2d3d.component.ts

@@ -4,7 +4,7 @@
 
 
 // @Component({
-//   selector: 'switch2d3d',
+//   selector: 'fm-map-switch2d3d',
 //   template: '<div (click)="handleClick($event)" class="rounded-circle twotreed">{{label}}</div>',
 //   styles: [`.twotreed {
 //     width:2.5em;

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

@@ -3,7 +3,7 @@ import { ViewComponent, MapComponent } from 'ngx-openlayers';
 
  
 @Component({
-  selector: 'zoom-to-extent',
+  selector: 'fm-map-zoom-to-extent',
   template: `<ng-content></ng-content>`
 })
 export class ZoomToExtentComponent implements OnChanges {

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

@@ -1,3 +1,3 @@
 <div class="feature-list-container">
-  <ng-template widget-host></ng-template>
+  <ng-template fm-map-widget-host></ng-template>
 </div>

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

@@ -9,7 +9,7 @@ import { Store } from '@ngrx/store';
 
 
 @Component({
-  selector: 'feature-list-container',
+  selector: 'fm-map-feature-list-container',
   templateUrl: './feature-list-container.component.html',
   styleUrls: ['./feature-list-container.component.scss']
 })

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

@@ -6,7 +6,7 @@
       <h3>{{schemeItem.name}}</h3>
       <div class="cropfields">
         <div class="row m-0" *ngFor="let feature of features" (click)="handleFeatureClick(feature)" (mouseenter)="handleFeatureMouseEnter(feature)" (mouseleave)="handleFeatureMouseLeave(feature)">
-          <feature-list-feature-container [feature]="feature"></feature-list-feature-container>
+          <fm-map-feature-list-feature-container [feature]="feature"></fm-map-feature-list-feature-container>
         </div>
       </div>
     </div>

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

@@ -12,7 +12,7 @@ import { Observable } from 'rxjs';
 @ForItemType("vnd.farmmaps.itemtype.cropfield")
 @Injectable()
 @Component({
-  selector: 'feature-list-cropfield',
+  selector: 'fm-map-feature-list-cropfield',
     templateUrl: './feature-list-cropfield.component.html',
     styleUrls: ['./feature-list-cropfield.component.scss']
 })

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

@@ -5,7 +5,7 @@
       <h3 i18n><i class="fm fm-farm"></i> Farms</h3>
       <div class="farms">
         <div class="row m-0" *ngFor="let feature of features" (click)="handleFeatureClick(feature)" (mouseenter)="handleFeatureMouseEnter(feature)" (mouseleave)="handleFeatureMouseLeave(feature)">
-          <feature-list-feature-container [feature]="feature"></feature-list-feature-container>
+          <fm-map-feature-list-feature-container [feature]="feature"></fm-map-feature-list-feature-container>
         </div>
       </div>
     </div>

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

@@ -12,7 +12,7 @@ import { Router } from '@angular/router';
 @ForItemType("vnd.farmmaps.itemtype.croppingscheme")
 @Injectable()
 @Component({
-    selector: 'feature-list-croppingscheme',
+    selector: 'fm-map-feature-list-croppingscheme',
     templateUrl: './feature-list-croppingscheme.component.html',
     styleUrls: ['./feature-list-croppingscheme.component.scss']
 })

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

@@ -5,10 +5,10 @@ import { WidgetHostDirective } from '../widget-host/widget-host.directive';
 
 
 @Component({
-  selector: 'feature-list-feature-container',
+  selector: 'fm-map-feature-list-feature-container',
   template: `
               <div>
-                 <ng-template widget-host></ng-template>
+                 <ng-template fm-map-widget-host></ng-template>
               </div>
             `
 })

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

@@ -10,7 +10,7 @@ import { ForItemType } from '../for-item/for-itemtype.decorator';
 @ForItemType("vnd.farmmaps.itemtype.cropfield")
 @Injectable()
 @Component({
-  selector: 'feature-list-feature-cropfield',
+  selector: 'fm-map-feature-list-feature-cropfield',
   templateUrl: './feature-list-feature-cropfield.component.html',
   styleUrls: ['./feature-list-feature-cropfield.component.scss']
 })

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

@@ -10,7 +10,7 @@ import { ForItemType } from '../for-item/for-itemtype.decorator';
 @ForItemType("vnd.farmmaps.itemtype.croppingscheme")
 @Injectable()
 @Component({
-  selector: 'feature-list-feature-croppingscheme',
+  selector: 'fm-map-feature-list-feature-croppingscheme',
   templateUrl: './feature-list-feature-croppingscheme.component.html',
   styleUrls: ['./feature-list-feature-croppingscheme.component.scss']
 })

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

@@ -16,7 +16,7 @@ export abstract class AbstractFeatureListFeatureComponent {
 
 @Injectable()
 @Component({
-  selector: 'feature-list-feature',
+  selector: 'fm-map-feature-list-feature',
   templateUrl: './feature-list-feature.component.html',
   styleUrls: ['./feature-list-feature.component.scss']
 })

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

@@ -1,6 +1,6 @@
 <div *ngIf="features;let features">
   <a href="#" (click)="handleBackClick($event)">Go back</a>
   <div class="row m-0" *ngFor="let feature of features" (click)="handleFeatureClick(feature)" (mouseenter)="handleFeatureMouseEnter(feature)" (mouseleave)="handleFeatureMouseLeave(feature)">
-    <feature-list-feature-container [feature]="feature"></feature-list-feature-container>
+    <fm-map-feature-list-feature-container [feature]="feature"></fm-map-feature-list-feature-container>
   </div>
 </div>

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

@@ -40,7 +40,7 @@ export abstract class AbstractFeatureListComponent {
 
 @Injectable()
 @Component({
-  selector: 'feature-list',
+  selector: 'fm-map-feature-list',
   templateUrl: './feature-list.component.html',
   styleUrls: ['./feature-list.component.scss']
 })

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

@@ -11,7 +11,7 @@ import { ForSourceTask } from '../for-item/for-sourcetask.decorator';
 @ForSourceTask("vnd.farmmaps.task.bofek")
 @Injectable()
 @Component({
-  selector: 'item-list-item-bofek',
+  selector: 'fm-map-item-list-item-bofek',
   templateUrl: './item-list-item-bofek.component.html',
   styleUrls: ['./item-list-item-bofek.component.css']
 })

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

@@ -5,10 +5,10 @@ import { IItem, IListItem } from '@farmmaps/common';
 
 
 @Component({
-  selector: 'item-list-item-container',
+  selector: 'fm-map-item-list-item-container',
   template: `
               <div style="height:100%">
-                 <ng-template widget-host></ng-template>
+                 <ng-template fm-map-widget-host></ng-template>
               </div>
             `
 })

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

@@ -15,7 +15,7 @@ import { ControlScaleLineComponent } from 'ngx-openlayers';
 @ForSourceTask("vnd.farmmaps.task.ahn")
 @Injectable()
 @Component({
-  selector: 'item-list-item-height',
+  selector: 'fm-map-item-list-item-height',
   templateUrl: './item-list-item-height.component.html',
   styleUrls: ['./item-list-item-height.component.css']
 })

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

@@ -12,7 +12,7 @@ import {map} from "rxjs/operators";
 @ForSourceTask("vnd.farmmaps.task.shadow")
 @Injectable()
 @Component({
-  selector: 'item-list-item-shadow',
+  selector: 'fm-map-item-list-item-shadow',
   templateUrl: './item-list-item-shadow.component.html',
   styleUrls: ['./item-list-item-shadow.component.scss']
 })

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

@@ -14,7 +14,7 @@ import {Router} from "@angular/router";
 @ForSourceTask("vnd.farmmaps.task.vandersat")
 @Injectable()
 @Component({
-  selector: 'item-list-item-temporal',
+  selector: 'fm-map-item-list-item-temporal',
   templateUrl: './item-list-item-temporal.component.html',
   styleUrls: ['./item-list-item-temporal.component.css']
 })

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

@@ -12,7 +12,7 @@ import {Router} from "@angular/router";
 @ForSourceTask("vnd.farmmaps.task.tipstar")
 @Injectable()
 @Component({
-  selector: 'item-list-item-tipstar',
+  selector: 'fm-map-item-list-item-tipstar',
   templateUrl: './item-list-item-tipstar.component.html',
   styleUrls: ['./item-list-item-tipstar.component.scss']
 })

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

@@ -8,6 +8,6 @@
       <small i18n>GewichtGroDro:{{TPVOCMET?.GewichtGroDro | number:'0.1-2'}}</small>
       <small i18n>GewichtGroNat:{{TPVOCMET?.GewichtGroNat | number:'0.1-2'}}</small>
     </div>
-    <widget-status [stage]="stage" [info]="'WatBal is expected in spring 2020.'" i18n></widget-status>
+    <fm-map-widget-status [stage]="stage" [info]="'WatBal is expected in spring 2020.'" i18n></fm-map-widget-status>
   </div>
 </div>

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

@@ -13,7 +13,7 @@ import { Stage } from '../widget-status/widget-status.component';
 @ForSourceTask("vnd.farmmaps.task.watbal")
 @Injectable()
 @Component({
-  selector: 'item-list-item-watbal',
+  selector: 'fm-map-item-list-item-watbal',
   templateUrl: './item-list-item-watbal.component.html',
   styleUrls: ['./item-list-item-watbal.component.css']
 })

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

@@ -23,7 +23,7 @@ export abstract class AbstractItemWidgetComponent {
 
 @Injectable()
 @Component({
-    selector: 'item-list-item',
+    selector: 'fm-map-item-list-item',
   templateUrl: './item-list-item.component.html',
     styleUrls: ['./item-list-item.component.scss']
 })

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

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

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

@@ -31,7 +31,7 @@ export abstract class AbstractItemListComponent {
 
 @Injectable()
 @Component({
-  selector: 'item-list',
+  selector: 'fm-map-item-list',
   templateUrl: './item-list.component.html',
   styleUrls: ['./item-list.component.scss']
 })

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

@@ -8,7 +8,7 @@ import { AbstractItemWidgetComponent } from '../item-list-item/item-list-item.co
 
 @Injectable()
 @Component({
-  selector: 'item-widget-list',
+  selector: 'fm-map-item-widget-list',
   templateUrl: './item-widget-list.component.html',
   styleUrls: ['./item-widget-list.component.scss']
 })

projects/common-map/src/lib/components/item-widget-weather/item-widget-weather.component.ts

@@ -12,7 +12,7 @@ import { getCenter, Extent, createEmpty, extend } from 'ol/extent';
 
 @Injectable()
 @Component({
-  selector: 'item-widget-weather',
+  selector: 'fm-map-item-widget-weather',
   templateUrl: './item-widget-weather.component.html',
   styleUrls: ['./item-widget-weather.component.scss']
 })

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

@@ -3,7 +3,7 @@ import { IColorMap, IColor, IColorEntry,ILayer } from '../../models';
 
 
 @Component({
-  selector: 'layer-legend',
+  selector: 'fm-map-layer-legend',
   templateUrl: './legend.component.html',
   styleUrls: ['./legend.component.scss']
 })

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

@@ -30,4 +30,4 @@
     <ng-content></ng-content>
   </div>
 </div>
-<select-period-modal [modalState]="openedModalName" (onCloseModal)="handleCloseModal()" (onSelect)="handleSelectPeriod($event)" [startDate]="startDate" [endDate]="endDate"></select-period-modal>
+<fm-map-select-period-modal [modalState]="openedModalName" (onCloseModal)="handleCloseModal()" (onSelect)="handleSelectPeriod($event)" [startDate]="startDate" [endDate]="endDate"></fm-map-select-period-modal>

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

@@ -7,7 +7,7 @@ import { fillProperties } from '@angular/core/src/util/property';
 import { tassign } from 'tassign';
 
 @Component({
-  selector: 'map-search',
+  selector: 'fm-map-map-search',
   templateUrl: './map-search.component.html',
   styleUrls: ['./map-search.component.scss']
 })

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

@@ -5,37 +5,37 @@
   <ng-container *ngIf="(mapState$|async) as mapState">
           <aol-view [zoom]="mapState.zoom" [rotation]="mapState.rotation">
               <aol-coordinate [x]="mapState.xCenter" [y]="mapState.yCenter" [srid]="'EPSG:4326'"></aol-coordinate>
-              <zoom-to-extent [extent]="extent$|async" [animate]="true"></zoom-to-extent>
+              <fm-map-zoom-to-extent [extent]="extent$|async" [animate]="true"></fm-map-zoom-to-extent>
             </aol-view>
   </ng-container>    
   <aol-interaction-default></aol-interaction-default>
   <aol-interaction-dragrotateandzoom></aol-interaction-dragrotateandzoom>
-  <item-layers [itemLayers]="baseLayers|async"></item-layers>
+  <fm-map-item-layers [itemLayers]="baseLayers|async"></fm-map-item-layers>
-  <item-layers [itemLayers]="overlayLayers|async"></item-layers>
+  <fm-map-item-layers [itemLayers]="overlayLayers|async"></fm-map-item-layers>
-  <item-layers [itemLayer]="selectedItemLayer|async"></item-layers>
+  <fm-map-item-layers [itemLayer]="selectedItemLayer|async"></fm-map-item-layers>
   <aol-layer-vector>
-    <item-source-vector [features]="features|async" (onFeaturesSelected)="handleFeaturesSelected($event)" [selectedFeature]="selectedFeature|async" [selectedItem]="selectedItem|async"></item-source-vector>
+    <fm-map-item-source-vector [features]="features|async" (onFeaturesSelected)="handleFeaturesSelected($event)" [selectedFeature]="selectedFeature|async" [selectedItem]="selectedItem|async"></fm-map-item-source-vector>
   </aol-layer-vector>
-  <gps-location [position]="position|async" [headingTolerance]="20" [showHeading]="true"></gps-location>
+  <fm-map-gps-location [position]="position|async" [headingTolerance]="20" [showHeading]="true"></fm-map-gps-location>
   <div class="control-container">
 <!--    <switch2d3d></switch2d3d>-->
-    <rotation-reset></rotation-reset>
+    <fm-map-rotation-reset></fm-map-rotation-reset>
   </div>
-  <file-drop-target [parentCode]="(parentCode | async)" (onFileDropped)="handleFileDropped($event)"></file-drop-target>
+  <fm-map-file-drop-target [parentCode]="(parentCode | async)" (onFileDropped)="handleFileDropped($event)"></fm-map-file-drop-target>
 </aol-map>
-<map-search #mapSearch [openedModalName]="openedModalName|async" (onOpenModal)="handleOpenModal($event)" (onCloseModal)="handleCloseModal()" [ngClass]="{'menuVisible':(menuVisible|async)}" (onToggleMenu)="handleToggleMenu($event)" (onSearchCollapse)="handleSearchCollapse($event)" (onSearchExpand)="handleSearchExpand($event)" [collapsed]="searchCollapsed|async" [searchMinified]="(searchMinified | async)" (onSearch)="handleSearch($event)" (onClear)="handleClearSearch($event)" [filterOptions]="queryState|async" [clearEnabled]="clearEnabled|async" [period]="period|async"></map-search>
+<fm-map-map-search #mapSearch [openedModalName]="openedModalName|async" (onOpenModal)="handleOpenModal($event)" (onCloseModal)="handleCloseModal()" [ngClass]="{'menuVisible':(menuVisible|async)}" (onToggleMenu)="handleToggleMenu($event)" (onSearchCollapse)="handleSearchCollapse($event)" (onSearchExpand)="handleSearchExpand($event)" [collapsed]="searchCollapsed|async" [searchMinified]="(searchMinified | async)" (onSearch)="handleSearch($event)" (onClear)="handleClearSearch($event)" [filterOptions]="queryState|async" [clearEnabled]="clearEnabled|async" [period]="period|async"></fm-map-map-search>
-<side-panel [resizeable]="true" [visible]="(panelVisible|async)" [collapsed]="(panelCollapsed|async)" [collapsable]="false">
+<fm-side-panel [resizeable]="true" [visible]="(panelVisible|async)" [collapsed]="(panelCollapsed|async)" [collapsable]="false">
   <div class="panel-wrapper">
     <div class="panel-top bg-secondary" *ngIf="!(searchMinified | async)">
     </div>
     <div class="panel-bottom">
 
       <div *ngIf="!(selectedItem|async)">
-        <feature-list-container [features]="(features | async)" [queryState]="(queryState|async)"></feature-list-container>
+        <fm-map-feature-list-container [features]="(features | async)" [queryState]="(queryState|async)"></fm-map-feature-list-container>
       </div>
 
       <div *ngIf="(selectedItem | async);let item">
-        <selected-item-container [item]="item"></selected-item-container>
+        <fm-map-selected-item-container [item]="item"></fm-map-selected-item-container>
       </div>
       <div *ngIf="(features|async).length == 0" class="no-results  m-2">
         <div *ngIf="(queryState|async)?.query">Cannot find <span>{{(queryState|async)?.query}}</span></div>
@@ -43,14 +43,15 @@
       </div>
     </div>
   </div>
-</side-panel>
+</fm-side-panel>
-<side-panel [visible]="(menuVisible|async)" class="menu">
+<fm-side-panel [visible]="(menuVisible|async)" class="menu">
   <div class="container-fluid">
     <div class="body">
       <div class="logo">
         <span><img src="/images/farmmapslogo.png" /></span>
         <span><button type="button" class="btn btn-outline-secondary" (click)="handleToggleMenu($event)"><i class="fa fa-times" aria-hidden="true"></i></button></span>
       </div>
+
       <div class="card menu-card">
         <div class="d-flex flex-row flex-wrap">
           <div class="shortcut-icon" (click)="handlePredefinedQuery($event,{itemType:'vnd.farmmaps.itemtype.croppingscheme'})">
@@ -74,13 +75,13 @@
           <li class="nav-item py-0">
             <a class="nav-link" href="#" (click)="handleToggleBaseLayers($event)" i18n><i class="fa fa-map" aria-hidden="true"></i> Base maps <i class="fa" [ngClass]="{'fa-caret-down':baseLayersCollapsed,'fa-caret-up':!baseLayersCollapsed}" aria-hidden="true"></i></a>
             <div [ngbCollapse]="baseLayersCollapsed" class="mb-4">
-              <layer-list [baseLayers]="true" [itemLayers]="baseLayers|async" [selectedLayer]="selectedBaseLayer|async" (onSelectLayer)="handleSelectBaseLayer($event)"></layer-list>
+              <fm-map-layer-list [baseLayers]="true" [itemLayers]="baseLayers|async" [selectedLayer]="selectedBaseLayer|async" (onSelectLayer)="handleSelectBaseLayer($event)"></fm-map-layer-list>
             </div>
           </li>
           <li class="nav-item py-0">
             <a class="nav-link" href="#" (click)="handleToggleOverlayLayers($event)" i18n><i class="fa fa-map" aria-hidden="true"></i> Overlays <i class="fa" [ngClass]="{'fa-caret-down':overlayLayersCollapsed,'fa-caret-up':!overlayLayersCollapsed}" aria-hidden="true"></i></a>
             <div [ngbCollapse]="overlayLayersCollapsed" class="mb-4">
-              <layer-list [itemLayers]="overlayLayers|async" [selectedLayer]="selectedOverlayLayer|async" (onDelete)="handleOnDelete($event)" (onToggleVisibility)="handleOnToggleVisibility($event)" (onSetOpacity)="handleOnSetOpacity($event)" (onZoomToExtent)="handleZoomToExtent($event)" (onSelectLayer)="handleSelectOverlayLayer($event)"></layer-list>
+              <fm-map-layer-list [itemLayers]="overlayLayers|async" [selectedLayer]="selectedOverlayLayer|async" (onDelete)="handleOnDelete($event)" (onToggleVisibility)="handleOnToggleVisibility($event)" (onSetOpacity)="handleOnSetOpacity($event)" (onZoomToExtent)="handleZoomToExtent($event)" (onSelectLayer)="handleSelectOverlayLayer($event)"></fm-map-layer-list>
             </div>
           </li>
         </ul>
@@ -93,5 +94,5 @@
       </div>-->
     </div>
   </div>
-</side-panel>
+</fm-side-panel>
 

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

@@ -29,7 +29,7 @@ import { tassign } from 'tassign';
 
 
 @Component({
-  selector: 'map',
+  selector: 'fm-map-map',
   templateUrl: './map.component.html',
   styleUrls: ['./map.component.scss']
 })

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

@@ -10,7 +10,7 @@ export interface IMetaData {
 }
 
 @Component({
-  selector: 'meta-data-modal',
+  selector: 'fm-map-meta-data-modal',
   templateUrl: 'meta-data-modal.component.html'
 })
 export class MetaDataModalComponent {

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

@@ -16,7 +16,7 @@ const after = (one: NgbDateStruct, two: NgbDateStruct) =>
     ? false : one.day > two.day : one.month > two.month : one.year > two.year;
 
 @Component({
-  selector: 'select-period-modal',
+  selector: 'fm-map-select-period-modal',
   templateUrl: 'select-period-modal.component.html',
   styleUrls: ['select-period-modal.component.scss']  
 })

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

@@ -1,3 +1,3 @@
 <div class="selected-item-container">
-  <ng-template widget-host></ng-template>
+  <ng-template fm-map-widget-host></ng-template>
 </div>

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

@@ -5,7 +5,7 @@ import { WidgetHostDirective } from '../widget-host/widget-host.directive';
 
 
 @Component({
-  selector: 'selected-item-container',
+  selector: 'fm-map-selected-item-container',
   templateUrl: './selected-item-container.component.html',
   styleUrls: ['./selected-item-container.component.scss'] 
 })

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

@@ -9,7 +9,7 @@
       <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>
     </div>
-    <item-list [items]="(items|async)"></item-list>
+    <fm-map-item-list [items]="(items|async)"></fm-map-item-list>
-    <item-widget-list [item]="item"></item-widget-list>
+    <fm-map-item-widget-list [item]="item"></fm-map-item-widget-list>
   </div>
  </div>

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

@@ -13,7 +13,7 @@ import { Observable } from 'rxjs';
 @ForItemType("vnd.farmmaps.itemtype.cropfield")
 @Injectable()
 @Component({
-  selector: 'selected-item-cropfield',
+  selector: 'fm-map-selected-item-cropfield',
   templateUrl: './selected-item-cropfield.component.html',
   styleUrls: ['./selected-item-cropfield.component.scss']
 })

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

@@ -10,7 +10,7 @@
             <option *ngFor="let l of layers;let layerIndex = index" [value]="layerIndex">{{l.name}}</option>
           </select>
         </div>-->
-        <layer-legend [layer]="layers[selectedLayer]" [histogramenabled]="false" histogramunit="ha"></layer-legend>
+        <fm-map-layer-legend [layer]="layers[selectedLayer]" [histogramenabled]="false" histogramunit="ha"></fm-map-layer-legend>
       </div>
       <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>-->

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

@@ -13,7 +13,7 @@ import { Observable } from 'rxjs';
 @ForItemType("vnd.farmmaps.itemtype.geotiff.processed")
 @Injectable()
 @Component({
-  selector: 'selected-item-geotiff',
+  selector: 'fm-map-selected-item-geotiff',
   templateUrl: './selected-item-geotiff.component.html',
   styleUrls: ['./selected-item-geotiff.component.scss']
 })

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

@@ -10,7 +10,7 @@
             <option *ngFor="let l of layers;" [value]="l.index">{{l.name}}</option>
           </select>
         </div>
-        <layer-legend [showTitle]="layers.length==1" [layer]="layers[selectedLayer]" [histogramenabled]="false" histogramunit="ha"></layer-legend>
+        <fm-map-layer-legend [showTitle]="layers.length==1" [layer]="layers[selectedLayer]" [histogramenabled]="false" histogramunit="ha"></fm-map-layer-legend>
       </div>
       <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>-->

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

@@ -14,7 +14,7 @@ import { Observable } from 'rxjs';
 @ForItemType("vnd.farmmaps.itemtype.shape.processed")
 @Injectable()
 @Component({
-  selector: 'selected-item-shape',
+  selector: 'fm-map-selected-item-shape',
   templateUrl: './selected-item-shape.component.html',
   styleUrls: ['./selected-item-shape.component.scss']
 })

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

@@ -44,7 +44,7 @@ export abstract class AbstractSelectedItemComponent {
 
 @Injectable()
 @Component({
-  selector: 'selected-item',
+  selector: 'fm-map-selected-item',
   templateUrl: './selected-item.component.html',
   styleUrls: ['./selected-item.component.scss']
 })

projects/common-map/src/lib/components/widget-host/widget-host.directive.ts

@@ -1,7 +1,7 @@
 import { Directive, ViewContainerRef } from '@angular/core';
 
 @Directive({
-  selector: '[widget-host]',
+  selector: '[fm-map-widget-host]',
 })
 export class WidgetHostDirective {
   constructor(public viewContainerRef: ViewContainerRef) { }

projects/common-map/src/lib/components/widget-status/widget-status.component.ts

@@ -1,7 +1,7 @@
 import { Component, OnInit, Input } from '@angular/core';
 
 @Component({
-  selector: 'widget-status',
+  selector: 'fm-map-widget-status',
   templateUrl: './widget-status.component.html',
   styleUrls: ['./widget-status.component.css']
 })