@igo2/integration 1.13.2 → 1.13.4

package/fesm2020/igo2-integration.mjs

@@ -181,7 +181,7 @@ ContextEditorToolComponent = __decorate([
 ], ContextEditorToolComponent);
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ContextEditorToolComponent, [{
         type: Component,
-        args: [{ selector: 'igo-context-editor-tool', template: "<igo-context-edit\r\n  igoContextEditBinding\r\n  (submitSuccessed)=\"submitSuccessed()\"\r\n></igo-context-edit>\r\n" }]
+        args: [{ selector: 'igo-context-editor-tool', template: "<igo-context-edit\n  igoContextEditBinding\n  (submitSuccessed)=\"submitSuccessed()\"\n></igo-context-edit>\n" }]
     }], function () { return [{ type: ToolState }]; }, null); })();
 
 // import { BehaviorSubject } from 'rxjs';
@@ -257,7 +257,7 @@ ContextManagerToolComponent = __decorate([
 ], ContextManagerToolComponent);
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ContextManagerToolComponent, [{
         type: Component,
-        args: [{ selector: 'igo-context-manager-tool', template: "<igo-context-list\r\n  igoContextListBinding\r\n  [map]=\"map\"\r\n  (edit)=\"editContext()\"\r\n  (managePermissions)=\"managePermissions()\">\r\n</igo-context-list>\r\n" }]
+        args: [{ selector: 'igo-context-manager-tool', template: "<igo-context-list\n  igoContextListBinding\n  [map]=\"map\"\n  (edit)=\"editContext()\"\n  (managePermissions)=\"managePermissions()\">\n</igo-context-list>\n" }]
     }], function () { return [{ type: ToolState }, { type: MapState }]; }, { toolToOpenOnContextChange: [{
             type: Input
         }] }); })();
@@ -278,7 +278,7 @@ ContextPermissionManagerToolComponent = __decorate([
 ], ContextPermissionManagerToolComponent);
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ContextPermissionManagerToolComponent, [{
         type: Component,
-        args: [{ selector: 'igo-context-permission-manager-tool', template: "<igo-context-permissions igoContextPermissionsBinding></igo-context-permissions>\r\n" }]
+        args: [{ selector: 'igo-context-permission-manager-tool', template: "<igo-context-permissions igoContextPermissionsBinding></igo-context-permissions>\n" }]
     }], null, null); })();
 
 /**
@@ -343,7 +343,7 @@ ContextShareToolComponent = __decorate([
 ], ContextShareToolComponent);
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ContextShareToolComponent, [{
         type: Component,
-        args: [{ selector: 'igo-context-share-tool', template: "<igo-share-map\r\n  [map]=\"map\"></igo-share-map>\r\n" }]
+        args: [{ selector: 'igo-context-share-tool', template: "<igo-share-map\n  [map]=\"map\"></igo-share-map>\n" }]
     }], function () { return [{ type: MapState }, { type: LayerListToolState }]; }, null); })();
 
 class IgoAppContextModule {
@@ -500,7 +500,7 @@ CatalogLibraryToolComponent = __decorate([
 ], CatalogLibraryToolComponent);
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CatalogLibraryToolComponent, [{
         type: Component,
-        args: [{ selector: 'igo-catalog-library-tool', changeDetection: ChangeDetectionStrategy.OnPush, template: "<igo-catalog-library\r\n  [predefinedCatalogs]=\"predefinedCatalogs\"\r\n  [addCatalogAllowed]=\"addCatalogAllowed\"\r\n  [store]=\"store\"\r\n  (catalogSelectChange)=\"onCatalogSelectChange($event)\">\r\n</igo-catalog-library>\r\n" }]
+        args: [{ selector: 'igo-catalog-library-tool', changeDetection: ChangeDetectionStrategy.OnPush, template: "<igo-catalog-library\n  [predefinedCatalogs]=\"predefinedCatalogs\"\n  [addCatalogAllowed]=\"addCatalogAllowed\"\n  [store]=\"store\"\n  (catalogSelectChange)=\"onCatalogSelectChange($event)\">\n</igo-catalog-library>\n" }]
     }], function () { return [{ type: i1$1.CatalogService }, { type: CatalogState }, { type: ToolState }, { type: i2.StorageService }]; }, { addCatalogAllowed: [{
             type: Input
         }], predefinedCatalogs: [{
@@ -627,7 +627,7 @@ CatalogBrowserToolComponent = __decorate([
 ], CatalogBrowserToolComponent);
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CatalogBrowserToolComponent, [{
         type: Component,
-        args: [{ selector: 'igo-catalog-browser-tool', changeDetection: ChangeDetectionStrategy.OnPush, template: "<igo-catalog-browser\r\n  *ngIf=\"store$ | async as store\"\r\n  [catalog]=\"catalog\"\r\n  [store]=\"store\"\r\n  [map]=\"map\"\r\n  [toggleCollapsedGroup]=\"toggleCollapsedGroup\">\r\n</igo-catalog-browser>\r\n" }]
+        args: [{ selector: 'igo-catalog-browser-tool', changeDetection: ChangeDetectionStrategy.OnPush, template: "<igo-catalog-browser\n  *ngIf=\"store$ | async as store\"\n  [catalog]=\"catalog\"\n  [store]=\"store\"\n  [map]=\"map\"\n  [toggleCollapsedGroup]=\"toggleCollapsedGroup\">\n</igo-catalog-browser>\n" }]
     }], function () { return [{ type: i1$1.CatalogService }, { type: CatalogState }, { type: MapState }, { type: i2$1.AuthService }]; }, { toggleCollapsedGroup: [{
             type: Input
         }] }); })();
@@ -888,7 +888,7 @@ DirectionsToolComponent = __decorate([
 ], DirectionsToolComponent);
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DirectionsToolComponent, [{
         type: Component,
-        args: [{ selector: 'igo-directions-tool', template: "<igo-directions\r\n    [contextUri]=\"currentContextUri\"\r\n    [debounceTime]=\"debounceTime\"\r\n    [stopsStore]=\"stopsStore\"\r\n    [stopsFeatureStore]=\"stopsFeatureStore\"\r\n    [stepFeatureStore]=\"stepFeatureStore\"\r\n    [routesFeatureStore]=\"routesFeatureStore\"\r\n    [zoomToActiveRoute$]=\"zoomToActiveRoute$\">  \r\n</igo-directions>" }]
+        args: [{ selector: 'igo-directions-tool', template: "<igo-directions\n    [contextUri]=\"currentContextUri\"\n    [debounceTime]=\"debounceTime\"\n    [stopsStore]=\"stopsStore\"\n    [stopsFeatureStore]=\"stopsFeatureStore\"\n    [stepFeatureStore]=\"stepFeatureStore\"\n    [routesFeatureStore]=\"routesFeatureStore\"\n    [zoomToActiveRoute$]=\"zoomToActiveRoute$\">  \n</igo-directions>" }]
     }], function () { return [{ type: DirectionState }, { type: MapState }, { type: i2.LanguageService }, { type: i2.MessageService }, { type: i2.StorageService }, { type: ContextState }, { type: i2$1.AuthService }]; }, null); })();
 
 class IgoAppDirectionsModule {
@@ -919,17 +919,24 @@ IgoAppDirectionsModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [I
 class DrawState {
     constructor(mapState) {
         this.mapState = mapState;
-        /**
-         * Store that holds the measures
-         */
-        this.store = new FeatureStore([], {
-            map: this.mapState.map
-        });
+        this.stores = [];
+        this.layersID = [];
+        this.drawControls = [];
         this.mapState.map.layers$.subscribe(() => {
-            if (!this.mapState.map.getLayerById('igo-draw-layer')) {
-                this.store.deleteMany(this.store.all());
-            }
+            this.layersID.forEach(layerId => {
+                if (!this.mapState.map.getLayerById(layerId)) {
+                    let deletedStore = this.stores.find(store => store.layer.id === layerId);
+                    deletedStore.deleteMany(deletedStore.all());
+                    this.stores.splice(this.stores.indexOf(deletedStore, 0), 1);
+                    this.layersID.splice(this.layersID.indexOf(layerId, 0), 1);
+                    let drawControlIndex = this.drawControls.findIndex(dc => dc[0] === layerId);
+                    this.drawControls.splice(drawControlIndex, 1);
+                }
+            });
         });
+        for (let store of this.stores) {
+            store = new FeatureStore([], { map: this.mapState.map });
+        }
     }
 }
 DrawState.ɵfac = function DrawState_Factory(t) { return new (t || DrawState)(i0.ɵɵinject(MapState)); };
@@ -953,18 +960,45 @@ let DrawingToolComponent = class DrawingToolComponent {
      * Map to measure on
      * @internal
      */
-    get store() { return this.drawState.store; }
+    get stores() {
+        return this.drawState.stores;
+    }
     /**
      * Map to measure on
      * @internal
      */
-    get map() { return this.mapState.map; }
+    get map() {
+        return this.mapState.map;
+    }
+    get layersID() {
+        return this.drawState.layersID;
+    }
+    get drawControls() {
+        return this.drawState.drawControls;
+    }
+    set drawControls(dc) {
+        this.drawState.drawControls = dc;
+    }
+    get activeDrawingLayer() {
+        return this.drawState.activeDrawingLayer;
+    }
+    set activeDrawingLayer(value) {
+        this.drawState.activeDrawingLayer = value;
+    }
+    addLayersID(layerID) {
+        this.layersID.push(layerID);
+    }
+    addDrawControls(dc) {
+        this.drawControls = dc;
+    }
 };
 DrawingToolComponent.ɵfac = function DrawingToolComponent_Factory(t) { return new (t || DrawingToolComponent)(i0.ɵɵdirectiveInject(DrawState), i0.ɵɵdirectiveInject(MapState)); };
-DrawingToolComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DrawingToolComponent, selectors: [["igo-drawing-tool"]], decls: 1, vars: 2, consts: [[3, "store", "map"]], template: function DrawingToolComponent_Template(rf, ctx) { if (rf & 1) {
-        i0.ɵɵelement(0, "igo-draw", 0);
+DrawingToolComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DrawingToolComponent, selectors: [["igo-drawing-tool"]], decls: 1, vars: 4, consts: [[3, "stores", "map", "activeDrawingLayer", "drawControls", "layersIDEvent", "drawControlsEvent", "activeLayerChange"]], template: function DrawingToolComponent_Template(rf, ctx) { if (rf & 1) {
+        i0.ɵɵelementStart(0, "igo-draw", 0);
+        i0.ɵɵlistener("layersIDEvent", function DrawingToolComponent_Template_igo_draw_layersIDEvent_0_listener($event) { return ctx.addLayersID($event); })("drawControlsEvent", function DrawingToolComponent_Template_igo_draw_drawControlsEvent_0_listener($event) { return ctx.addDrawControls($event); })("activeLayerChange", function DrawingToolComponent_Template_igo_draw_activeLayerChange_0_listener($event) { return ctx.activeDrawingLayer = $event; });
+        i0.ɵɵelementEnd();
     } if (rf & 2) {
-        i0.ɵɵproperty("store", ctx.store)("map", ctx.map);
+        i0.ɵɵproperty("stores", ctx.stores)("map", ctx.map)("activeDrawingLayer", ctx.activeDrawingLayer)("drawControls", ctx.drawControls);
     } }, dependencies: [i1$1.DrawComponent], encapsulation: 2, changeDetection: 0 });
 DrawingToolComponent = __decorate([
     ToolComponent({
@@ -975,7 +1009,7 @@ DrawingToolComponent = __decorate([
 ], DrawingToolComponent);
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DrawingToolComponent, [{
         type: Component,
-        args: [{ selector: 'igo-drawing-tool', changeDetection: ChangeDetectionStrategy.OnPush, template: "<igo-draw [store]=\"store\" [map]=\"map\"></igo-draw>\r\n" }]
+        args: [{ selector: 'igo-drawing-tool', changeDetection: ChangeDetectionStrategy.OnPush, template: "<igo-draw\n    [stores]=\"stores\"\n    [map]=\"map\"\n    (layersIDEvent)=\"addLayersID($event)\"\n    [activeDrawingLayer]=\"activeDrawingLayer\"\n    [drawControls]=\"drawControls\"\n    (drawControlsEvent)=\"addDrawControls($event)\"\n    (activeLayerChange)=\"activeDrawingLayer = $event\">\n</igo-draw>\n" }]
     }], function () { return [{ type: DrawState }, { type: MapState }]; }, null); })();
 
 class IgoAppDrawModule {
@@ -1676,7 +1710,7 @@ WorkspaceButtonComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Wo
     } }, dependencies: [i6.NgIf, i7.MatIcon, i10.MatButton, i5.MatTooltip, i6.AsyncPipe, i8.TranslatePipe], changeDetection: 0 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(WorkspaceButtonComponent, [{
         type: Component,
-        args: [{ selector: 'igo-workspace-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\r\n  *ngIf=\"hasWorkspace$ | async\"\r\n  mat-icon-button\r\n  tooltip-position=\"below\"\r\n  matTooltipShowDelay=\"500\"\r\n  [matTooltip]=\"'igo.integration.workspace.toggleWorkspace' | translate\"\r\n  [color]=\"color\"\r\n  (click)=\"activateWorkspace()\"\r\n  >\r\n  <mat-icon svgIcon=\"table\"></mat-icon>\r\n</button>\r\n" }]
+        args: [{ selector: 'igo-workspace-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  *ngIf=\"hasWorkspace$ | async\"\n  mat-icon-button\n  tooltip-position=\"below\"\n  matTooltipShowDelay=\"500\"\n  [matTooltip]=\"'igo.integration.workspace.toggleWorkspace' | translate\"\n  [color]=\"color\"\n  (click)=\"activateWorkspace()\"\n  >\n  <mat-icon svgIcon=\"table\"></mat-icon>\n</button>\n" }]
     }], function () { return [{ type: WorkspaceState }]; }, { layer: [{
             type: Input
         }], color: [{
@@ -1824,7 +1858,7 @@ ImportExportToolComponent = __decorate([
 ], ImportExportToolComponent);
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ImportExportToolComponent, [{
         type: Component,
-        args: [{ selector: 'igo-import-export-tool', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-tab-group *ngIf=\"importExportShowBothType\" >\r\n  <mat-tab [label]=\"'igo.integration.importExportTool.importExportData' | translate\">\r\n    <igo-import-export  \r\n      [map]=\"map\"\r\n      [selectFirstProj]=\"selectFirstProj\"\r\n      [projectionsLimitations]=\"projectionsLimitations\"\r\n      [store]=\"workspaceStore\"\r\n      [selectedMode]=\"importExportState.selectedMode$ | async\"\r\n      (selectMode)=\"modeChanged($event)\"\r\n      [exportOptions$]=\"importExportState.exportOptions$\"\r\n      (exportOptionsChange)=\"exportOptionsChange($event)\">\r\n    </igo-import-export>\r\n  </mat-tab>\r\n  <mat-tab [label]=\"'igo.integration.importExportTool.importExportContext' | translate\">\r\n    <igo-context-import-export [map]=\"map\"></igo-context-import-export>\r\n  </mat-tab>\r\n</mat-tab-group>\r\n\r\n<igo-import-export  \r\n  *ngIf=\"!importExportShowBothType && importExportType === 'layer'\"\r\n  [map]=\"map\"\r\n  [store]=\"workspaceStore\"\r\n  [selectedMode]=\"importExportState.selectedMode$ | async\"\r\n  (selectMode)=\"modeChanged($event)\"\r\n  [exportOptions$]=\"importExportState.exportOptions$\"\r\n  (exportOptionsChange)=\"exportOptionsChange($event)\">\r\n</igo-import-export>\r\n\r\n<igo-context-import-export \r\n  *ngIf=\"!importExportShowBothType && importExportType === 'context'\"\r\n  [map]=\"map\">\r\n</igo-context-import-export>", styles: ["mat-form-field{width:100%}\n"] }]
+        args: [{ selector: 'igo-import-export-tool', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-tab-group *ngIf=\"importExportShowBothType\" >\n  <mat-tab [label]=\"'igo.integration.importExportTool.importExportData' | translate\">\n    <igo-import-export  \n      [map]=\"map\"\n      [selectFirstProj]=\"selectFirstProj\"\n      [projectionsLimitations]=\"projectionsLimitations\"\n      [store]=\"workspaceStore\"\n      [selectedMode]=\"importExportState.selectedMode$ | async\"\n      (selectMode)=\"modeChanged($event)\"\n      [exportOptions$]=\"importExportState.exportOptions$\"\n      (exportOptionsChange)=\"exportOptionsChange($event)\">\n    </igo-import-export>\n  </mat-tab>\n  <mat-tab [label]=\"'igo.integration.importExportTool.importExportContext' | translate\">\n    <igo-context-import-export [map]=\"map\"></igo-context-import-export>\n  </mat-tab>\n</mat-tab-group>\n\n<igo-import-export  \n  *ngIf=\"!importExportShowBothType && importExportType === 'layer'\"\n  [map]=\"map\"\n  [store]=\"workspaceStore\"\n  [selectedMode]=\"importExportState.selectedMode$ | async\"\n  (selectMode)=\"modeChanged($event)\"\n  [exportOptions$]=\"importExportState.exportOptions$\"\n  (exportOptionsChange)=\"exportOptionsChange($event)\">\n</igo-import-export>\n\n<igo-context-import-export \n  *ngIf=\"!importExportShowBothType && importExportType === 'context'\"\n  [map]=\"map\">\n</igo-context-import-export>", styles: ["mat-form-field{width:100%}\n"] }]
     }], function () { return [{ type: MapState }, { type: ImportExportState }, { type: WorkspaceState }]; }, { projectionsLimitations: [{
             type: Input
         }], selectFirstProj: [{
@@ -2093,7 +2127,7 @@ MapDetailsToolComponent = __decorate([
 ], MapDetailsToolComponent);
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MapDetailsToolComponent, [{
         type: Component,
-        args: [{ selector: 'igo-map-details-tool', template: "<igo-layer-list class=\"mapDetailsList\" *ngIf=\"(layers$ | async).length; else empty\"\r\n  [map]=\"map\"\r\n  igoLayerListBinding\r\n  [excludeBaseLayers]=\"excludeBaseLayers\"\r\n  [layerFilterAndSortOptions]=\"layerFilterAndSortOptions\"\r\n  [expandLegendOfVisibleLayers]=\"expandLegendOfVisibleLayers\"\r\n  [toggleLegendOnVisibilityChange]=\"toggleLegendOnVisibilityChange\"\r\n  [updateLegendOnResolutionChange]=\"updateLegendOnResolutionChange\"\r\n  floatLabel=\"never\"\r\n  [queryBadge]=\"queryBadge\">\r\n\r\n  <ng-template #igoLayerItemToolbar let-layer=\"layer\">\r\n    <!-- <igo-download-button [layer]=\"layer\"></igo-download-button> -->\r\n     <igo-workspace-button [layer]=\"layer\"></igo-workspace-button>\r\n    <igo-export-button [layer]=\"layer\" (click)=\"activateExport(layer)\"></igo-export-button>\r\n    <igo-ogc-filter-button [header]=\"ogcButton\" [layer]=\"layer\"></igo-ogc-filter-button>\r\n    <igo-time-filter-button [header]=\"timeButton\" [layer]=\"layer\"></igo-time-filter-button>\r\n    <igo-track-feature-button [trackFeature]=\"true\" [layer]=\"layer\"></igo-track-feature-button>\r\n    <igo-metadata-button [layer]=\"layer\"></igo-metadata-button>\r\n  </ng-template>\r\n\r\n</igo-layer-list>\r\n\r\n<ng-template #empty>\r\n  <mat-list *ngIf=\"delayedShowEmptyMapContent\">\r\n    <p class=\"map-empty mat-typography\">\r\n      {{'igo.integration.mapTool.empty' | translate}}</p>\r\n    <p *ngIf=\"layerAdditionAllowed && (searchToolInToolbar || catalogToolInToolbar || contextToolInToolbar)\" class=\"map-empty mat-typography\">\r\n      {{'igo.integration.mapTool.customize' | translate}}</p>\r\n    <mat-list-item *ngIf=\"layerAdditionAllowed && searchToolInToolbar\">\r\n      <mat-icon mat-list-icon> <svg viewBox='0 0 24 24' fit='' height='100%' width='100%' preserveAspectRatio='xMidYMid meet' focusable='false'> <path d='M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z'> </path> </svg></mat-icon>\r\n      <h4 matLine class=\"search-tool mat-typography\" (click)=\"searchEmit()\">\r\n        {{'igo.integration.mapTool.search-tool' | translate}}\r\n      </h4>\r\n    </mat-list-item>\r\n    <mat-list-item *ngIf=\"layerAdditionAllowed && catalogToolInToolbar\">\r\n      <mat-icon mat-list-icon> <svg viewBox='0 0 24 24' fit='' height='100%' width='100%' preserveAspectRatio='xMidYMid meet' focusable='false'> <path d='M17,14H19V17H22V19H19V22H17V19H14V17H17V14M11,16L2,9L11,2L20,9L11,16M11,18.54L12,17.75V18C12,18.71 12.12,19.39 12.35,20L11,21.07L2,14.07L3.62,12.81L11,18.54Z'></path> </svg></mat-icon>\r\n      <h4 matLine class=\"catalog-tool mat-typography\" (click)=\"catalogEmit()\">\r\n        {{'igo.integration.mapTool.catalog-tool' | translate}}\r\n      </h4>\r\n    </mat-list-item>\r\n    <mat-list-item *ngIf=\"layerAdditionAllowed && contextToolInToolbar\">\r\n      <mat-icon mat-list-icon> <svg viewBox='0 0 24 24' fit='' height='100%' width='100%' preserveAspectRatio='xMidYMid meet' focusable='false'> <path d='M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z'></path> </svg></mat-icon>\r\n      <h4 matLine class=\"context-tool mat-typography\" (click)=\"contextEmit()\">\r\n        {{'igo.integration.mapTool.context-tool' | translate}}\r\n      </h4>\r\n    </mat-list-item>\r\n  </mat-list>\r\n</ng-template>\r\n", styles: [".map-empty,.search-tool,.catalog-tool,.context-tool{margin:10px}.map-empty{text-align:justify}.search-tool,.catalog-tool,.context-tool{cursor:pointer}mat-list mat-list-item h4{font-weight:700}mat-list-item ::ng-deep .mat-list-text{font-size:smaller}mat-list.mat-list-base mat-list-item.mat-list-item ::ng-deep div.mat-list-item-content div.mat-list-text{padding-left:5px}.mapDetailsList{overflow:hidden}\n"] }]
+        args: [{ selector: 'igo-map-details-tool', template: "<igo-layer-list class=\"mapDetailsList\" *ngIf=\"(layers$ | async).length; else empty\"\n  [map]=\"map\"\n  igoLayerListBinding\n  [excludeBaseLayers]=\"excludeBaseLayers\"\n  [layerFilterAndSortOptions]=\"layerFilterAndSortOptions\"\n  [expandLegendOfVisibleLayers]=\"expandLegendOfVisibleLayers\"\n  [toggleLegendOnVisibilityChange]=\"toggleLegendOnVisibilityChange\"\n  [updateLegendOnResolutionChange]=\"updateLegendOnResolutionChange\"\n  floatLabel=\"never\"\n  [queryBadge]=\"queryBadge\">\n\n  <ng-template #igoLayerItemToolbar let-layer=\"layer\">\n    <!-- <igo-download-button [layer]=\"layer\"></igo-download-button> -->\n     <igo-workspace-button [layer]=\"layer\"></igo-workspace-button>\n    <igo-export-button [layer]=\"layer\" (click)=\"activateExport(layer)\"></igo-export-button>\n    <igo-ogc-filter-button [header]=\"ogcButton\" [layer]=\"layer\"></igo-ogc-filter-button>\n    <igo-time-filter-button [header]=\"timeButton\" [layer]=\"layer\"></igo-time-filter-button>\n    <igo-track-feature-button [trackFeature]=\"true\" [layer]=\"layer\"></igo-track-feature-button>\n    <igo-metadata-button [layer]=\"layer\"></igo-metadata-button>\n  </ng-template>\n\n</igo-layer-list>\n\n<ng-template #empty>\n  <mat-list *ngIf=\"delayedShowEmptyMapContent\">\n    <p class=\"map-empty mat-typography\">\n      {{'igo.integration.mapTool.empty' | translate}}</p>\n    <p *ngIf=\"layerAdditionAllowed && (searchToolInToolbar || catalogToolInToolbar || contextToolInToolbar)\" class=\"map-empty mat-typography\">\n      {{'igo.integration.mapTool.customize' | translate}}</p>\n    <mat-list-item *ngIf=\"layerAdditionAllowed && searchToolInToolbar\">\n      <mat-icon mat-list-icon> <svg viewBox='0 0 24 24' fit='' height='100%' width='100%' preserveAspectRatio='xMidYMid meet' focusable='false'> <path d='M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z'> </path> </svg></mat-icon>\n      <h4 matLine class=\"search-tool mat-typography\" (click)=\"searchEmit()\">\n        {{'igo.integration.mapTool.search-tool' | translate}}\n      </h4>\n    </mat-list-item>\n    <mat-list-item *ngIf=\"layerAdditionAllowed && catalogToolInToolbar\">\n      <mat-icon mat-list-icon> <svg viewBox='0 0 24 24' fit='' height='100%' width='100%' preserveAspectRatio='xMidYMid meet' focusable='false'> <path d='M17,14H19V17H22V19H19V22H17V19H14V17H17V14M11,16L2,9L11,2L20,9L11,16M11,18.54L12,17.75V18C12,18.71 12.12,19.39 12.35,20L11,21.07L2,14.07L3.62,12.81L11,18.54Z'></path> </svg></mat-icon>\n      <h4 matLine class=\"catalog-tool mat-typography\" (click)=\"catalogEmit()\">\n        {{'igo.integration.mapTool.catalog-tool' | translate}}\n      </h4>\n    </mat-list-item>\n    <mat-list-item *ngIf=\"layerAdditionAllowed && contextToolInToolbar\">\n      <mat-icon mat-list-icon> <svg viewBox='0 0 24 24' fit='' height='100%' width='100%' preserveAspectRatio='xMidYMid meet' focusable='false'> <path d='M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z'></path> </svg></mat-icon>\n      <h4 matLine class=\"context-tool mat-typography\" (click)=\"contextEmit()\">\n        {{'igo.integration.mapTool.context-tool' | translate}}\n      </h4>\n    </mat-list-item>\n  </mat-list>\n</ng-template>\n", styles: [".map-empty,.search-tool,.catalog-tool,.context-tool{margin:10px}.map-empty{text-align:justify}.search-tool,.catalog-tool,.context-tool{cursor:pointer}mat-list mat-list-item h4{font-weight:700}mat-list-item ::ng-deep .mat-list-text{font-size:smaller}mat-list.mat-list-base mat-list-item.mat-list-item ::ng-deep div.mat-list-item-content div.mat-list-text{padding-left:5px}.mapDetailsList{overflow:hidden}\n"] }]
     }], function () { return [{ type: MapState }, { type: ToolState }, { type: i1$1.SearchSourceService }, { type: i0.ChangeDetectorRef }, { type: ImportExportState }]; }, { toggleLegendOnVisibilityChange: [{
             type: Input
         }], expandLegendOfVisibleLayers: [{
@@ -2210,7 +2244,7 @@ MapToolComponent = __decorate([
 ], MapToolComponent);
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MapToolComponent, [{
         type: Component,
-        args: [{ selector: 'igo-map-tool', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-tab-group>\r\n\r\n  <mat-tab [label]=\"'igo.integration.tools.map' |\u00A0translate\">\r\n    <igo-layer-list\r\n      [map]=\"map\"\r\n      igoLayerListBinding\r\n      [excludeBaseLayers]=\"excludeBaseLayers\"\r\n      [layerFilterAndSortOptions]=\"layerFilterAndSortOptions\"\r\n      [expandLegendOfVisibleLayers]=\"expandLegendOfVisibleLayers\"\r\n      [toggleLegendOnVisibilityChange]=\"toggleLegendOnVisibilityChange\"\r\n      [updateLegendOnResolutionChange]=\"updateLegendOnResolutionChange\"\r\n      [floatLabel]=\"false\"\r\n      [queryBadge]=\"queryBadge\">\r\n\r\n      <ng-template #igoLayerItemToolbar let-layer=\"layer\">\r\n        <!-- <igo-download-button [layer]=\"layer\"></igo-download-button> -->\r\n        <igo-workspace-button [layer]=\"layer\"></igo-workspace-button>\r\n        <igo-export-button [layer]=\"layer\" (click)=\"activateExport(layer)\"></igo-export-button>\r\n        <igo-ogc-filter-button [header]=\"ogcButton\" [layer]=\"layer\"></igo-ogc-filter-button>\r\n        <igo-time-filter-button [header]=\"timeButton\" [layer]=\"layer\"></igo-time-filter-button>\r\n        <igo-track-feature-button [trackFeature]=\"true\" [layer]=\"layer\"></igo-track-feature-button>\r\n        <igo-metadata-button [layer]=\"layer\"></igo-metadata-button>\r\n      </ng-template>\r\n\r\n    </igo-layer-list>\r\n  </mat-tab>\r\n\r\n  <mat-tab [label]=\"'igo.integration.tools.contexts' |\u00A0translate\">\r\n    <igo-context-list igoContextListBinding></igo-context-list>\r\n  </mat-tab>\r\n\r\n</mat-tab-group>\r\n", styles: ["mat-tab-group,mat-tab-group ::ng-deep .mat-tab-body-wrapper{height:100%;overflow:hidden}:host ::ng-deep .mat-tab-body-content{overflow:hidden}\n"] }]
+        args: [{ selector: 'igo-map-tool', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-tab-group>\n\n  <mat-tab [label]=\"'igo.integration.tools.map' |\u00A0translate\">\n    <igo-layer-list\n      [map]=\"map\"\n      igoLayerListBinding\n      [excludeBaseLayers]=\"excludeBaseLayers\"\n      [layerFilterAndSortOptions]=\"layerFilterAndSortOptions\"\n      [expandLegendOfVisibleLayers]=\"expandLegendOfVisibleLayers\"\n      [toggleLegendOnVisibilityChange]=\"toggleLegendOnVisibilityChange\"\n      [updateLegendOnResolutionChange]=\"updateLegendOnResolutionChange\"\n      [floatLabel]=\"false\"\n      [queryBadge]=\"queryBadge\">\n\n      <ng-template #igoLayerItemToolbar let-layer=\"layer\">\n        <!-- <igo-download-button [layer]=\"layer\"></igo-download-button> -->\n        <igo-workspace-button [layer]=\"layer\"></igo-workspace-button>\n        <igo-export-button [layer]=\"layer\" (click)=\"activateExport(layer)\"></igo-export-button>\n        <igo-ogc-filter-button [header]=\"ogcButton\" [layer]=\"layer\"></igo-ogc-filter-button>\n        <igo-time-filter-button [header]=\"timeButton\" [layer]=\"layer\"></igo-time-filter-button>\n        <igo-track-feature-button [trackFeature]=\"true\" [layer]=\"layer\"></igo-track-feature-button>\n        <igo-metadata-button [layer]=\"layer\"></igo-metadata-button>\n      </ng-template>\n\n    </igo-layer-list>\n  </mat-tab>\n\n  <mat-tab [label]=\"'igo.integration.tools.contexts' |\u00A0translate\">\n    <igo-context-list igoContextListBinding></igo-context-list>\n  </mat-tab>\n\n</mat-tab-group>\n", styles: ["mat-tab-group,mat-tab-group ::ng-deep .mat-tab-body-wrapper{height:100%;overflow:hidden}:host ::ng-deep .mat-tab-body-content{overflow:hidden}\n"] }]
     }], function () { return [{ type: MapState }, { type: ToolState }, { type: ImportExportState }]; }, { toggleLegendOnVisibilityChange: [{
             type: Input
         }], expandLegendOfVisibleLayers: [{
@@ -2656,7 +2690,7 @@ MapToolsComponent = __decorate([
 ], MapToolsComponent);
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MapToolsComponent, [{
         type: Component,
-        args: [{ selector: 'igo-map-tools', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-tab-group\r\n  #tabGroup\r\n  [selectedIndex]=\"layerListToolState.selectedTab$ | async\"\r\n  (selectedTabChange)=\"tabChanged($event)\">\r\n\r\n  <mat-tab [label]=\"'igo.integration.tools.layers' |\u00A0translate\">\r\n    <igo-layer-list *ngIf=\"(layers$ | async).length !== 0; else emptyLayers\"\r\n      igoLayerListBinding\r\n      [excludeBaseLayers]=\"excludeBaseLayers\"\r\n      [layerFilterAndSortOptions]=\"layerFilterAndSortOptions\"\r\n      [expandLegendOfVisibleLayers]=\"expandLegendOfVisibleLayers\"\r\n      [toggleLegendOnVisibilityChange]=\"toggleLegendOnVisibilityChange\"\r\n      [updateLegendOnResolutionChange]=\"updateLegendOnResolutionChange\"\r\n      [floatLabel]=\"false\"\r\n      [queryBadge]=\"queryBadge\"\r\n      [map]=\"map\"\r\n      (appliedFilterAndSort)= onLayerListChange($event)>\r\n\r\n      <ng-template #igoLayerItemToolbar let-layer=\"layer\">\r\n        <igo-metadata-button [layer]=\"layer\"></igo-metadata-button>\r\n        <igo-track-feature-button [trackFeature]=\"true\" [layer]=\"layer\"></igo-track-feature-button>\r\n        <igo-time-filter-button *ngIf=\"isTimeFilterButton(layer)\" [header]=\"timeButton\" [layer]=\"layer\"\r\n                                (click)=\"activateTimeFilter()\"></igo-time-filter-button>\r\n        <igo-ogc-filter-button *ngIf=\"isOGCFilterButton(layer)\" [header]=\"ogcButton\" [layer]=\"layer\"\r\n                                (click)=\"activateOgcFilter()\"></igo-ogc-filter-button>\r\n        <igo-export-button *ngIf=\"isExportButton(layer)\" [layer]=\"layer\" (click)=\"activateExport(layer)\"></igo-export-button>\r\n        <igo-workspace-button [layer]=\"layer\"></igo-workspace-button>\r\n      </ng-template>\r\n    </igo-layer-list>\r\n  </mat-tab>\r\n\r\n  <mat-tab [label]=\"'igo.integration.tools.legend' |\u00A0translate\">\r\n    <igo-layer-legend-list *ngIf=\"showAllLegend()\"\r\n      igoLayerLegendListBinding\r\n      [allowShowAllLegends]=\"allowShowAllLegends\"\r\n      [showAllLegendsValue]=\"(showAllLegendsValue$ | async)\"\r\n      (allLegendsShown)=\"onShowAllLegends($event)\"\r\n      [excludeBaseLayers]=\"excludeBaseLayers\"\r\n      [updateLegendOnResolutionChange]=\"updateLegendOnResolutionChange\">\r\n    </igo-layer-legend-list>\r\n    <ng-template *ngIf=\"(layers$ | async).length !== 0; else emptyLayers\"></ng-template>\r\n\r\n    <p class=\"map-empty mat-typography\"\r\n      *ngIf=\"!allowShowAllLegends && (layers$ | async).length !== 0 && (visibleOrInRangeLayers$ | async).length === 0\">\r\n      {{ ((visibleLayers$ | async).length) ? ('igo.integration.mapTool.noLayersInRange' | translate) :  ('igo.integration.mapTool.noLayersVisible' | translate) }}\r\n    </p>\r\n  </mat-tab>\r\n\r\n    <ng-template #emptyLayers>\r\n      <mat-list *ngIf=\"delayedShowEmptyMapContent\">\r\n        <p class=\"map-empty mat-typography\">\r\n          {{'igo.integration.mapTool.empty' | translate}}</p>\r\n        <p *ngIf=\"layerAdditionAllowed && (searchToolInToolbar || catalogToolInToolbar || contextToolInToolbar)\"\r\n          class=\"map-empty mat-typography\">\r\n          {{'igo.integration.mapTool.customize' | translate}}</p>\r\n\r\n        <mat-list-item *ngIf=\"layerAdditionAllowed && searchToolInToolbar\">\r\n          <mat-icon mat-list-icon> <svg viewBox='0 0 24 24' fit='' height='100%' width='100%'\r\n              preserveAspectRatio='xMidYMid meet' focusable='false'>\r\n              <path\r\n                d='M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z'>\r\n              </path>\r\n            </svg></mat-icon>\r\n          <h4 matLine class=\"search-tool mat-typography\" (click)=\"searchEmit()\">\r\n            {{'igo.integration.mapTool.search-tool' | translate}}\r\n          </h4>\r\n        </mat-list-item>\r\n        <mat-list-item *ngIf=\"layerAdditionAllowed && catalogToolInToolbar\">\r\n          <mat-icon mat-list-icon> <svg viewBox='0 0 24 24' fit='' height='100%' width='100%'\r\n              preserveAspectRatio='xMidYMid meet' focusable='false'>\r\n              <path\r\n                d='M17,14H19V17H22V19H19V22H17V19H14V17H17V14M11,16L2,9L11,2L20,9L11,16M11,18.54L12,17.75V18C12,18.71 12.12,19.39 12.35,20L11,21.07L2,14.07L3.62,12.81L11,18.54Z'>\r\n              </path>\r\n            </svg></mat-icon>\r\n          <h4 matLine class=\"catalog-tool mat-typography\" (click)=\"catalogEmit()\">\r\n            {{'igo.integration.mapTool.catalog-tool' | translate}}\r\n          </h4>\r\n        </mat-list-item>\r\n        <mat-list-item *ngIf=\"layerAdditionAllowed && contextToolInToolbar\">\r\n          <mat-icon mat-list-icon> <svg viewBox='0 0 24 24' fit='' height='100%' width='100%'\r\n              preserveAspectRatio='xMidYMid meet' focusable='false'>\r\n              <path\r\n                d='M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z'>\r\n              </path>\r\n            </svg></mat-icon>\r\n          <h4 matLine class=\"context-tool mat-typography\" (click)=\"contextEmit()\">\r\n            {{'igo.integration.mapTool.context-tool' | translate}}\r\n          </h4>\r\n        </mat-list-item>\r\n      </mat-list>\r\n    </ng-template>\r\n</mat-tab-group>\r\n", styles: [".map-empty,.search-tool,.catalog-tool,.context-tool{margin:10px}.map-empty{text-align:justify}.search-tool,.catalog-tool,.context-tool{cursor:pointer}mat-list mat-list-item h4{font-weight:700}mat-list-item ::ng-deep .mat-list-text{font-size:smaller}mat-list.mat-list-base mat-list-item.mat-list-item ::ng-deep div.mat-list-item-content div.mat-list-text{padding-left:5px}mat-tab-group,mat-tab-group ::ng-deep .mat-tab-body-wrapper{height:100%;overflow:hidden}:host ::ng-deep .mat-tab-body-content{overflow:hidden}\n"] }]
+        args: [{ selector: 'igo-map-tools', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-tab-group\n  #tabGroup\n  [selectedIndex]=\"layerListToolState.selectedTab$ | async\"\n  (selectedTabChange)=\"tabChanged($event)\">\n\n  <mat-tab [label]=\"'igo.integration.tools.layers' |\u00A0translate\">\n    <igo-layer-list *ngIf=\"(layers$ | async).length !== 0; else emptyLayers\"\n      igoLayerListBinding\n      [excludeBaseLayers]=\"excludeBaseLayers\"\n      [layerFilterAndSortOptions]=\"layerFilterAndSortOptions\"\n      [expandLegendOfVisibleLayers]=\"expandLegendOfVisibleLayers\"\n      [toggleLegendOnVisibilityChange]=\"toggleLegendOnVisibilityChange\"\n      [updateLegendOnResolutionChange]=\"updateLegendOnResolutionChange\"\n      [floatLabel]=\"false\"\n      [queryBadge]=\"queryBadge\"\n      [map]=\"map\"\n      (appliedFilterAndSort)= onLayerListChange($event)>\n\n      <ng-template #igoLayerItemToolbar let-layer=\"layer\">\n        <igo-metadata-button [layer]=\"layer\"></igo-metadata-button>\n        <igo-track-feature-button [trackFeature]=\"true\" [layer]=\"layer\"></igo-track-feature-button>\n        <igo-time-filter-button *ngIf=\"isTimeFilterButton(layer)\" [header]=\"timeButton\" [layer]=\"layer\"\n                                (click)=\"activateTimeFilter()\"></igo-time-filter-button>\n        <igo-ogc-filter-button *ngIf=\"isOGCFilterButton(layer)\" [header]=\"ogcButton\" [layer]=\"layer\"\n                                (click)=\"activateOgcFilter()\"></igo-ogc-filter-button>\n        <igo-export-button *ngIf=\"isExportButton(layer)\" [layer]=\"layer\" (click)=\"activateExport(layer)\"></igo-export-button>\n        <igo-workspace-button [layer]=\"layer\"></igo-workspace-button>\n      </ng-template>\n    </igo-layer-list>\n  </mat-tab>\n\n  <mat-tab [label]=\"'igo.integration.tools.legend' |\u00A0translate\">\n    <igo-layer-legend-list *ngIf=\"showAllLegend()\"\n      igoLayerLegendListBinding\n      [allowShowAllLegends]=\"allowShowAllLegends\"\n      [showAllLegendsValue]=\"(showAllLegendsValue$ | async)\"\n      (allLegendsShown)=\"onShowAllLegends($event)\"\n      [excludeBaseLayers]=\"excludeBaseLayers\"\n      [updateLegendOnResolutionChange]=\"updateLegendOnResolutionChange\">\n    </igo-layer-legend-list>\n    <ng-template *ngIf=\"(layers$ | async).length !== 0; else emptyLayers\"></ng-template>\n\n    <p class=\"map-empty mat-typography\"\n      *ngIf=\"!allowShowAllLegends && (layers$ | async).length !== 0 && (visibleOrInRangeLayers$ | async).length === 0\">\n      {{ ((visibleLayers$ | async).length) ? ('igo.integration.mapTool.noLayersInRange' | translate) :  ('igo.integration.mapTool.noLayersVisible' | translate) }}\n    </p>\n  </mat-tab>\n\n    <ng-template #emptyLayers>\n      <mat-list *ngIf=\"delayedShowEmptyMapContent\">\n        <p class=\"map-empty mat-typography\">\n          {{'igo.integration.mapTool.empty' | translate}}</p>\n        <p *ngIf=\"layerAdditionAllowed && (searchToolInToolbar || catalogToolInToolbar || contextToolInToolbar)\"\n          class=\"map-empty mat-typography\">\n          {{'igo.integration.mapTool.customize' | translate}}</p>\n\n        <mat-list-item *ngIf=\"layerAdditionAllowed && searchToolInToolbar\">\n          <mat-icon mat-list-icon> <svg viewBox='0 0 24 24' fit='' height='100%' width='100%'\n              preserveAspectRatio='xMidYMid meet' focusable='false'>\n              <path\n                d='M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z'>\n              </path>\n            </svg></mat-icon>\n          <h4 matLine class=\"search-tool mat-typography\" (click)=\"searchEmit()\">\n            {{'igo.integration.mapTool.search-tool' | translate}}\n          </h4>\n        </mat-list-item>\n        <mat-list-item *ngIf=\"layerAdditionAllowed && catalogToolInToolbar\">\n          <mat-icon mat-list-icon> <svg viewBox='0 0 24 24' fit='' height='100%' width='100%'\n              preserveAspectRatio='xMidYMid meet' focusable='false'>\n              <path\n                d='M17,14H19V17H22V19H19V22H17V19H14V17H17V14M11,16L2,9L11,2L20,9L11,16M11,18.54L12,17.75V18C12,18.71 12.12,19.39 12.35,20L11,21.07L2,14.07L3.62,12.81L11,18.54Z'>\n              </path>\n            </svg></mat-icon>\n          <h4 matLine class=\"catalog-tool mat-typography\" (click)=\"catalogEmit()\">\n            {{'igo.integration.mapTool.catalog-tool' | translate}}\n          </h4>\n        </mat-list-item>\n        <mat-list-item *ngIf=\"layerAdditionAllowed && contextToolInToolbar\">\n          <mat-icon mat-list-icon> <svg viewBox='0 0 24 24' fit='' height='100%' width='100%'\n              preserveAspectRatio='xMidYMid meet' focusable='false'>\n              <path\n                d='M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z'>\n              </path>\n            </svg></mat-icon>\n          <h4 matLine class=\"context-tool mat-typography\" (click)=\"contextEmit()\">\n            {{'igo.integration.mapTool.context-tool' | translate}}\n          </h4>\n        </mat-list-item>\n      </mat-list>\n    </ng-template>\n</mat-tab-group>\n", styles: [".map-empty,.search-tool,.catalog-tool,.context-tool{margin:10px}.map-empty{text-align:justify}.search-tool,.catalog-tool,.context-tool{cursor:pointer}mat-list mat-list-item h4{font-weight:700}mat-list-item ::ng-deep .mat-list-text{font-size:smaller}mat-list.mat-list-base mat-list-item.mat-list-item ::ng-deep div.mat-list-item-content div.mat-list-text{padding-left:5px}mat-tab-group,mat-tab-group ::ng-deep .mat-tab-body-wrapper{height:100%;overflow:hidden}:host ::ng-deep .mat-tab-body-content{overflow:hidden}\n"] }]
     }], function () { return [{ type: LayerListToolState }, { type: ToolState }, { type: MapState }, { type: i1$1.SearchSourceService }, { type: ImportExportState }]; }, { allowShowAllLegends: [{
             type: Input
         }], showAllLegendsValue: [{
@@ -2930,7 +2964,7 @@ MapLegendToolComponent = __decorate([
 ], MapLegendToolComponent);
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MapLegendToolComponent, [{
         type: Component,
-        args: [{ selector: 'igo-map-legend-tool', template: "<igo-layer-legend-list *ngIf=\"showAllLegend()\"\r\n  igoLayerLegendListBinding\r\n  [excludeBaseLayers]=\"excludeBaseLayers\"\r\n  [allowShowAllLegends]=\"allowShowAllLegends\"\r\n  [updateLegendOnResolutionChange]=\"updateLegendOnResolutionChange\"\r\n  [showAllLegendsValue]=\"(showAllLegendsValue$ | async)\"\r\n  (allLegendsShown)=\"onShowAllLegends($event)\">\r\n</igo-layer-legend-list>\r\n<ng-template *ngIf=\"(layers$ | async).length !== 0; else emptyLayers\"></ng-template>\r\n\r\n<p class=\"map-empty mat-typography\"\r\n  *ngIf=\"!allowShowAllLegends && (layers$ | async).length !== 0 && (visibleOrInRangeLayers$ | async).length === 0\">\r\n  {{ ((visibleLayers$ | async).length) ? ('igo.integration.mapTool.noLayersInRange' | translate) :  ('igo.integration.mapTool.noLayersVisible' | translate) }}\r\n</p>\r\n\r\n\r\n<ng-template #emptyLayers>\r\n  <mat-list *ngIf=\"delayedShowEmptyMapContent\">\r\n    <p class=\"map-empty mat-typography\">\r\n      {{'igo.integration.mapTool.empty' | translate}}</p>\r\n    <p *ngIf=\"layerAdditionAllowed && (searchToolInToolbar || catalogToolInToolbar || contextToolInToolbar)\" class=\"map-empty mat-typography\">\r\n      {{'igo.integration.mapTool.customize' | translate}}</p>\r\n\r\n    <mat-list-item *ngIf=\"layerAdditionAllowed && searchToolInToolbar\">\r\n      <mat-icon mat-list-icon> <svg viewBox='0 0 24 24' fit='' height='100%' width='100%' preserveAspectRatio='xMidYMid meet' focusable='false'> <path d='M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z'> </path> </svg></mat-icon>\r\n      <h4 matLine class=\"search-tool mat-typography\" (click)=\"searchEmit()\">\r\n        {{'igo.integration.mapTool.search-tool' | translate}}\r\n      </h4>\r\n    </mat-list-item>\r\n    <mat-list-item *ngIf=\"layerAdditionAllowed && catalogToolInToolbar\">\r\n      <mat-icon mat-list-icon> <svg viewBox='0 0 24 24' fit='' height='100%' width='100%' preserveAspectRatio='xMidYMid meet' focusable='false'> <path d='M17,14H19V17H22V19H19V22H17V19H14V17H17V14M11,16L2,9L11,2L20,9L11,16M11,18.54L12,17.75V18C12,18.71 12.12,19.39 12.35,20L11,21.07L2,14.07L3.62,12.81L11,18.54Z'></path> </svg></mat-icon>\r\n      <h4 matLine class=\"catalog-tool mat-typography\" (click)=\"catalogEmit()\">\r\n        {{'igo.integration.mapTool.catalog-tool' | translate}}\r\n      </h4>\r\n    </mat-list-item>\r\n    <mat-list-item *ngIf=\"layerAdditionAllowed && contextToolInToolbar\">\r\n      <mat-icon mat-list-icon> <svg viewBox='0 0 24 24' fit='' height='100%' width='100%' preserveAspectRatio='xMidYMid meet' focusable='false'> <path d='M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z'></path> </svg></mat-icon>\r\n      <h4 matLine class=\"context-tool mat-typography\" (click)=\"contextEmit()\">\r\n        {{'igo.integration.mapTool.context-tool' | translate}}\r\n      </h4>\r\n    </mat-list-item>\r\n  </mat-list>\r\n</ng-template>\r\n", styles: [".map-empty,.search-tool,.catalog-tool,.context-tool{margin:10px}.map-empty{text-align:justify}.search-tool,.catalog-tool,.context-tool{cursor:pointer}mat-list mat-list-item h4{font-weight:700}mat-list-item ::ng-deep .mat-list-text{font-size:smaller}mat-list.mat-list-base mat-list-item.mat-list-item ::ng-deep div.mat-list-item-content div.mat-list-text{padding-left:5px}\n"] }]
+        args: [{ selector: 'igo-map-legend-tool', template: "<igo-layer-legend-list *ngIf=\"showAllLegend()\"\n  igoLayerLegendListBinding\n  [excludeBaseLayers]=\"excludeBaseLayers\"\n  [allowShowAllLegends]=\"allowShowAllLegends\"\n  [updateLegendOnResolutionChange]=\"updateLegendOnResolutionChange\"\n  [showAllLegendsValue]=\"(showAllLegendsValue$ | async)\"\n  (allLegendsShown)=\"onShowAllLegends($event)\">\n</igo-layer-legend-list>\n<ng-template *ngIf=\"(layers$ | async).length !== 0; else emptyLayers\"></ng-template>\n\n<p class=\"map-empty mat-typography\"\n  *ngIf=\"!allowShowAllLegends && (layers$ | async).length !== 0 && (visibleOrInRangeLayers$ | async).length === 0\">\n  {{ ((visibleLayers$ | async).length) ? ('igo.integration.mapTool.noLayersInRange' | translate) :  ('igo.integration.mapTool.noLayersVisible' | translate) }}\n</p>\n\n\n<ng-template #emptyLayers>\n  <mat-list *ngIf=\"delayedShowEmptyMapContent\">\n    <p class=\"map-empty mat-typography\">\n      {{'igo.integration.mapTool.empty' | translate}}</p>\n    <p *ngIf=\"layerAdditionAllowed && (searchToolInToolbar || catalogToolInToolbar || contextToolInToolbar)\" class=\"map-empty mat-typography\">\n      {{'igo.integration.mapTool.customize' | translate}}</p>\n\n    <mat-list-item *ngIf=\"layerAdditionAllowed && searchToolInToolbar\">\n      <mat-icon mat-list-icon> <svg viewBox='0 0 24 24' fit='' height='100%' width='100%' preserveAspectRatio='xMidYMid meet' focusable='false'> <path d='M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z'> </path> </svg></mat-icon>\n      <h4 matLine class=\"search-tool mat-typography\" (click)=\"searchEmit()\">\n        {{'igo.integration.mapTool.search-tool' | translate}}\n      </h4>\n    </mat-list-item>\n    <mat-list-item *ngIf=\"layerAdditionAllowed && catalogToolInToolbar\">\n      <mat-icon mat-list-icon> <svg viewBox='0 0 24 24' fit='' height='100%' width='100%' preserveAspectRatio='xMidYMid meet' focusable='false'> <path d='M17,14H19V17H22V19H19V22H17V19H14V17H17V14M11,16L2,9L11,2L20,9L11,16M11,18.54L12,17.75V18C12,18.71 12.12,19.39 12.35,20L11,21.07L2,14.07L3.62,12.81L11,18.54Z'></path> </svg></mat-icon>\n      <h4 matLine class=\"catalog-tool mat-typography\" (click)=\"catalogEmit()\">\n        {{'igo.integration.mapTool.catalog-tool' | translate}}\n      </h4>\n    </mat-list-item>\n    <mat-list-item *ngIf=\"layerAdditionAllowed && contextToolInToolbar\">\n      <mat-icon mat-list-icon> <svg viewBox='0 0 24 24' fit='' height='100%' width='100%' preserveAspectRatio='xMidYMid meet' focusable='false'> <path d='M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z'></path> </svg></mat-icon>\n      <h4 matLine class=\"context-tool mat-typography\" (click)=\"contextEmit()\">\n        {{'igo.integration.mapTool.context-tool' | translate}}\n      </h4>\n    </mat-list-item>\n  </mat-list>\n</ng-template>\n", styles: [".map-empty,.search-tool,.catalog-tool,.context-tool{margin:10px}.map-empty{text-align:justify}.search-tool,.catalog-tool,.context-tool{cursor:pointer}mat-list mat-list-item h4{font-weight:700}mat-list-item ::ng-deep .mat-list-text{font-size:smaller}mat-list.mat-list-base mat-list-item.mat-list-item ::ng-deep div.mat-list-item-content div.mat-list-text{padding-left:5px}\n"] }]
     }], function () { return [{ type: MapState }, { type: ToolState }, { type: i1$1.SearchSourceService }, { type: i0.ChangeDetectorRef }]; }, { updateLegendOnResolutionChange: [{
             type: Input
         }], layerAdditionAllowed: [{
@@ -3142,7 +3176,7 @@ AdvancedSwipeComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Adva
     } }, dependencies: [i3.ɵNgNoValidate, i3.NgControlStatus, i3.NgControlStatusGroup, i3.FormGroupDirective, i3.FormControlName, i5$1.MatDivider, i6$2.MatFormField, i6$2.MatLabel, i7$2.MatSelect, i8$1.MatOption, i6.NgForOf, i6.NgIf, i6$1.MatList, i6$1.MatListItem, i8$1.MatLine, i6$1.MatListIconCssMatStyler, i7.MatIcon, i12.MatSlideToggle, i8.TranslatePipe], styles: [".nameOfTool[_ngcontent-%COMP%]{text-align:center;font-weight:700;font-size:small;margin:15px 10px 0}.igo-swipe-select-container[_ngcontent-%COMP%]{padding:10px}.igo-swipe-select-container[_ngcontent-%COMP%]   mat-form-field[_ngcontent-%COMP%]{width:100%}.igo-form[_ngcontent-%COMP%]{padding:1px 5px;width:100%}.swipe-toggle[_ngcontent-%COMP%]{padding:10px 5px 35px}.map-empty[_ngcontent-%COMP%], .search-tool[_ngcontent-%COMP%], .catalog-tool[_ngcontent-%COMP%], .context-tool[_ngcontent-%COMP%]{margin:5px}.map-empty[_ngcontent-%COMP%]{padding:10px;text-align:justify}.search-tool[_ngcontent-%COMP%], .catalog-tool[_ngcontent-%COMP%], .context-tool[_ngcontent-%COMP%]{cursor:pointer}mat-list[_ngcontent-%COMP%]   mat-list-item[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%]{font-weight:700}mat-list-item[_ngcontent-%COMP%]     .mat-list-text{font-size:smaller}mat-list.mat-list-base[_ngcontent-%COMP%]   mat-list-item.mat-list-item[_ngcontent-%COMP%]     div.mat-list-item-content div.mat-list-text{padding-left:15px}.advanced-tool-line[_ngcontent-%COMP%]{height:2px;background-color:gray}"] });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AdvancedSwipeComponent, [{
         type: Component,
-        args: [{ selector: 'igo-advanced-swipe', template: "<div *ngIf=\"userControlledLayerList.length; else noLayersBlock\" class=\"igo-swipe-select-container\">\r\n    <form class=\"igo-form\" [formGroup]=\"form\">\r\n        <mat-form-field>\r\n            <mat-label>{{'igo.integration.advanced-map-tool.advanced-swipe.swipe-select' | translate}}</mat-label>\r\n            <mat-select formControlName=\"layers\" multiple>\r\n                <mat-option [value]=\"1\" (click)=\"selectAll(e)\" #e>\r\n                    {{'igo.integration.advanced-map-tool.advanced-swipe.selectAll' | translate}}\r\n                </mat-option>\r\n                <mat-divider></mat-divider>\r\n                <mat-option *ngFor=\"let layer of userControlledLayerList\" [value]=\"layer\" (click)=\"applyNewLayers(e)\">{{layer.title}}</mat-option>\r\n            </mat-select>\r\n        </mat-form-field>\r\n    </form>\r\n\r\n    <mat-slide-toggle class=\"swipe-toggle mat-typography\"\r\n        [checked]=\"swipe\"\r\n        [labelPosition]=\"'before'\"\r\n        (change)=\"startSwipe($event.checked)\">\r\n        {{'igo.integration.advanced-map-tool.advanced-swipe.swipe' | translate}}\r\n    </mat-slide-toggle> \r\n</div>\r\n\r\n<ng-template #noLayersBlock>\r\n    <mat-list>\r\n        <p class=\"map-empty mat-typography\">\r\n            {{'igo.integration.advanced-map-tool.advanced-swipe.empty' | translate}}</p>\r\n        <p class=\"map-empty mat-typography\">\r\n            {{'igo.integration.advanced-map-tool.advanced-swipe.customize' | translate}}</p>\r\n        <mat-list-item>\r\n            <mat-icon mat-list-icon svgIcon=\"magnify\"></mat-icon>\r\n            <h4 matLine class=\"search-tool mat-typography\" (click)=\"searchEmit()\">\r\n                {{'igo.integration.advanced-map-tool.advanced-swipe.search-tool' | translate}}\r\n            </h4>\r\n        </mat-list-item>\r\n        <mat-list-item>\r\n            <mat-icon mat-list-icon svgIcon=\"layers-plus\"></mat-icon>\r\n            <h4 matLine class=\"catalog-tool mat-typography\" (click)=\"catalogEmit()\">\r\n                {{'igo.integration.advanced-map-tool.advanced-swipe.catalog-tool' | translate}}\r\n            </h4>\r\n        </mat-list-item>\r\n        <mat-list-item>\r\n            <mat-icon mat-list-icon svgIcon=\"star\"></mat-icon>\r\n            <h4 matLine class=\"context-tool mat-typography\" (click)=\"contextEmit()\">\r\n                {{'igo.integration.advanced-map-tool.advanced-swipe.context-tool' | translate}}\r\n            </h4>\r\n        </mat-list-item>\r\n    </mat-list>\r\n</ng-template>\r\n", styles: [".nameOfTool{text-align:center;font-weight:700;font-size:small;margin:15px 10px 0}.igo-swipe-select-container{padding:10px}.igo-swipe-select-container mat-form-field{width:100%}.igo-form{padding:1px 5px;width:100%}.swipe-toggle{padding:10px 5px 35px}.map-empty,.search-tool,.catalog-tool,.context-tool{margin:5px}.map-empty{padding:10px;text-align:justify}.search-tool,.catalog-tool,.context-tool{cursor:pointer}mat-list mat-list-item h4{font-weight:700}mat-list-item ::ng-deep .mat-list-text{font-size:smaller}mat-list.mat-list-base mat-list-item.mat-list-item ::ng-deep div.mat-list-item-content div.mat-list-text{padding-left:15px}.advanced-tool-line{height:2px;background-color:gray}\n"] }]
+        args: [{ selector: 'igo-advanced-swipe', template: "<div *ngIf=\"userControlledLayerList.length; else noLayersBlock\" class=\"igo-swipe-select-container\">\n    <form class=\"igo-form\" [formGroup]=\"form\">\n        <mat-form-field>\n            <mat-label>{{'igo.integration.advanced-map-tool.advanced-swipe.swipe-select' | translate}}</mat-label>\n            <mat-select formControlName=\"layers\" multiple>\n                <mat-option [value]=\"1\" (click)=\"selectAll(e)\" #e>\n                    {{'igo.integration.advanced-map-tool.advanced-swipe.selectAll' | translate}}\n                </mat-option>\n                <mat-divider></mat-divider>\n                <mat-option *ngFor=\"let layer of userControlledLayerList\" [value]=\"layer\" (click)=\"applyNewLayers(e)\">{{layer.title}}</mat-option>\n            </mat-select>\n        </mat-form-field>\n    </form>\n\n    <mat-slide-toggle class=\"swipe-toggle mat-typography\"\n        [checked]=\"swipe\"\n        [labelPosition]=\"'before'\"\n        (change)=\"startSwipe($event.checked)\">\n        {{'igo.integration.advanced-map-tool.advanced-swipe.swipe' | translate}}\n    </mat-slide-toggle> \n</div>\n\n<ng-template #noLayersBlock>\n    <mat-list>\n        <p class=\"map-empty mat-typography\">\n            {{'igo.integration.advanced-map-tool.advanced-swipe.empty' | translate}}</p>\n        <p class=\"map-empty mat-typography\">\n            {{'igo.integration.advanced-map-tool.advanced-swipe.customize' | translate}}</p>\n        <mat-list-item>\n            <mat-icon mat-list-icon svgIcon=\"magnify\"></mat-icon>\n            <h4 matLine class=\"search-tool mat-typography\" (click)=\"searchEmit()\">\n                {{'igo.integration.advanced-map-tool.advanced-swipe.search-tool' | translate}}\n            </h4>\n        </mat-list-item>\n        <mat-list-item>\n            <mat-icon mat-list-icon svgIcon=\"layers-plus\"></mat-icon>\n            <h4 matLine class=\"catalog-tool mat-typography\" (click)=\"catalogEmit()\">\n                {{'igo.integration.advanced-map-tool.advanced-swipe.catalog-tool' | translate}}\n            </h4>\n        </mat-list-item>\n        <mat-list-item>\n            <mat-icon mat-list-icon svgIcon=\"star\"></mat-icon>\n            <h4 matLine class=\"context-tool mat-typography\" (click)=\"contextEmit()\">\n                {{'igo.integration.advanced-map-tool.advanced-swipe.context-tool' | translate}}\n            </h4>\n        </mat-list-item>\n    </mat-list>\n</ng-template>\n", styles: [".nameOfTool{text-align:center;font-weight:700;font-size:small;margin:15px 10px 0}.igo-swipe-select-container{padding:10px}.igo-swipe-select-container mat-form-field{width:100%}.igo-form{padding:1px 5px;width:100%}.swipe-toggle{padding:10px 5px 35px}.map-empty,.search-tool,.catalog-tool,.context-tool{margin:5px}.map-empty{padding:10px;text-align:justify}.search-tool,.catalog-tool,.context-tool{cursor:pointer}mat-list mat-list-item h4{font-weight:700}mat-list-item ::ng-deep .mat-list-text{font-size:smaller}mat-list.mat-list-base mat-list-item.mat-list-item ::ng-deep div.mat-list-item-content div.mat-list-text{padding-left:15px}.advanced-tool-line{height:2px;background-color:gray}\n"] }]
     }], function () { return [{ type: MapState }, { type: i1.ContextService }, { type: i3.UntypedFormBuilder }, { type: ToolState }]; }, null); })();
 
 function AdvancedCoordinatesComponent_mat_form_field_0_Template(rf, ctx) { if (rf & 1) {
@@ -3591,7 +3625,7 @@ AdvancedCoordinatesComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type
     } }, dependencies: [i3.ɵNgNoValidate, i3.NgControlStatusGroup, i3.FormGroupDirective, i6$2.MatFormField, i6$2.MatLabel, i7$2.MatSelect, i8$1.MatOption, i7$3.MatInput, i6.NgForOf, i6.NgIf, i7.MatIcon, i12.MatSlideToggle, i10.MatButton, i6.AsyncPipe, i6.DecimalPipe, i8.TranslatePipe], styles: ["textarea[_ngcontent-%COMP%]{resize:none}mat-form-field[_ngcontent-%COMP%]{padding:10px 15px}mat-form-field.coordinates[_ngcontent-%COMP%]{width:120px}mat-form-field.coordinates2[_ngcontent-%COMP%]{width:120px;padding:0 10px 0 3px}mat-form-field.igo-input-container[_ngcontent-%COMP%]{width:60%;padding:0 15px}.igo-form-button-group[_ngcontent-%COMP%]{padding:0 10px;margin:0 10px}.center-toggle[_ngcontent-%COMP%]{padding:10px 15px 35px}mat-slide-toggle[_ngcontent-%COMP%]{font-size:small}.igo-zoom[_ngcontent-%COMP%]{padding:0 15px}"] });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AdvancedCoordinatesComponent, [{
         type: Component,
-        args: [{ selector: 'igo-advanced-coordinates', template: "<mat-form-field *ngIf=\"units; else elseBlock\" class=\"coordinates\">\r\n    <textarea  #textArea matInput readonly rows=\"1\"\r\n      [placeholder]=\"'igo.integration.advanced-map-tool.advanced-coordinates.lon' | translate\"\r\n      [value]=\"coordinates[0]\"></textarea>\r\n</mat-form-field>\r\n<ng-template #elseBlock >\r\n  <mat-form-field class=\"coordinates\">\r\n    <textarea #textArea matInput readonly rows=\"1\"\r\n  [placeholder]=\"'igo.integration.advanced-map-tool.advanced-coordinates.est' | translate\"\r\n  [value]=\"coordinates[0]\"></textarea></mat-form-field>\r\n</ng-template>\r\n\r\n<mat-form-field *ngIf=\"units; else elseBlock2\" class=\"coordinates2\">\r\n    <textarea #textArea matInput readonly rows=\"1\"\r\n      [placeholder]=\"'igo.integration.advanced-map-tool.advanced-coordinates.lat' | translate\"\r\n      [value]=\"coordinates[1]\"></textarea>\r\n</mat-form-field>\r\n<ng-template #elseBlock2 >\r\n  <mat-form-field class=\"coordinates2\">  <textarea #textArea matInput readonly rows=\"1\"\r\n  [placeholder]=\"'igo.integration.advanced-map-tool.advanced-coordinates.nord' | translate\"\r\n  [value]=\"coordinates[1]\"></textarea></mat-form-field>\r\n</ng-template>\r\n\r\n<button class=\"igo-form-button-group\"\r\n    mat-raised-button\r\n    (click)=\"copyTextToClipboard()\">\r\n    <mat-icon svgIcon=\"content-copy\"></mat-icon>\r\n    {{ 'igo.integration.advanced-map-tool.advanced-coordinates.copy' | translate }}\r\n</button>\r\n\r\n<form class=\"igo-form\" [formGroup]=\"form\">\r\n  <mat-form-field class=\"igo-input-container\">\r\n    <mat-label>{{'igo.integration.advanced-map-tool.advanced-coordinates.coordSystem' | translate}}</mat-label>\r\n    <mat-select [(value)]=\"inputProj\">\r\n      <mat-option matTooltipShowDelay=\"500\"\r\n        *ngFor=\"let projection of (projections$ | async)\"\r\n        [value]=\"projection\"\r\n        (click)=\"$event.stopPropagation()\">\r\n        {{projection.translatedValue || projection.alias }}\r\n      </mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n  <mat-slide-toggle class=\"center-toggle mat-typography\"\r\n    [checked]=\"center\"\r\n    [labelPosition]=\"'before'\"\r\n    (change)=\"displayCenter($event.checked)\">\r\n    {{'igo.integration.advanced-map-tool.advanced-coordinates.center' | translate}}\r\n  </mat-slide-toggle> \r\n</form>\r\n\r\n<p class=\"igo-zoom mat-typography\">{{'igo.integration.advanced-map-tool.advanced-coordinates.zoom' | translate}} {{map.viewController.getZoom() }}</p>\r\n<p class=\"igo-zoom mat-typography\">{{'igo.integration.advanced-map-tool.advanced-coordinates.scale' | translate}} {{ formattedScale$ | async }}</p>\r\n<p class=\"igo-zoom mat-typography\">{{'igo.integration.advanced-map-tool.advanced-coordinates.resolution' | translate}} {{map.viewController.getResolution() | number: '1.0-0' }}</p>", styles: ["textarea{resize:none}mat-form-field{padding:10px 15px}mat-form-field.coordinates{width:120px}mat-form-field.coordinates2{width:120px;padding:0 10px 0 3px}mat-form-field.igo-input-container{width:60%;padding:0 15px}.igo-form-button-group{padding:0 10px;margin:0 10px}.center-toggle{padding:10px 15px 35px}mat-slide-toggle{font-size:small}.igo-zoom{padding:0 15px}\n"] }]
+        args: [{ selector: 'igo-advanced-coordinates', template: "<mat-form-field *ngIf=\"units; else elseBlock\" class=\"coordinates\">\n    <textarea  #textArea matInput readonly rows=\"1\"\n      [placeholder]=\"'igo.integration.advanced-map-tool.advanced-coordinates.lon' | translate\"\n      [value]=\"coordinates[0]\"></textarea>\n</mat-form-field>\n<ng-template #elseBlock >\n  <mat-form-field class=\"coordinates\">\n    <textarea #textArea matInput readonly rows=\"1\"\n  [placeholder]=\"'igo.integration.advanced-map-tool.advanced-coordinates.est' | translate\"\n  [value]=\"coordinates[0]\"></textarea></mat-form-field>\n</ng-template>\n\n<mat-form-field *ngIf=\"units; else elseBlock2\" class=\"coordinates2\">\n    <textarea #textArea matInput readonly rows=\"1\"\n      [placeholder]=\"'igo.integration.advanced-map-tool.advanced-coordinates.lat' | translate\"\n      [value]=\"coordinates[1]\"></textarea>\n</mat-form-field>\n<ng-template #elseBlock2 >\n  <mat-form-field class=\"coordinates2\">  <textarea #textArea matInput readonly rows=\"1\"\n  [placeholder]=\"'igo.integration.advanced-map-tool.advanced-coordinates.nord' | translate\"\n  [value]=\"coordinates[1]\"></textarea></mat-form-field>\n</ng-template>\n\n<button class=\"igo-form-button-group\"\n    mat-raised-button\n    (click)=\"copyTextToClipboard()\">\n    <mat-icon svgIcon=\"content-copy\"></mat-icon>\n    {{ 'igo.integration.advanced-map-tool.advanced-coordinates.copy' | translate }}\n</button>\n\n<form class=\"igo-form\" [formGroup]=\"form\">\n  <mat-form-field class=\"igo-input-container\">\n    <mat-label>{{'igo.integration.advanced-map-tool.advanced-coordinates.coordSystem' | translate}}</mat-label>\n    <mat-select [(value)]=\"inputProj\">\n      <mat-option matTooltipShowDelay=\"500\"\n        *ngFor=\"let projection of (projections$ | async)\"\n        [value]=\"projection\"\n        (click)=\"$event.stopPropagation()\">\n        {{projection.translatedValue || projection.alias }}\n      </mat-option>\n    </mat-select>\n  </mat-form-field>\n  <mat-slide-toggle class=\"center-toggle mat-typography\"\n    [checked]=\"center\"\n    [labelPosition]=\"'before'\"\n    (change)=\"displayCenter($event.checked)\">\n    {{'igo.integration.advanced-map-tool.advanced-coordinates.center' | translate}}\n  </mat-slide-toggle> \n</form>\n\n<p class=\"igo-zoom mat-typography\">{{'igo.integration.advanced-map-tool.advanced-coordinates.zoom' | translate}} {{map.viewController.getZoom() }}</p>\n<p class=\"igo-zoom mat-typography\">{{'igo.integration.advanced-map-tool.advanced-coordinates.scale' | translate}} {{ formattedScale$ | async }}</p>\n<p class=\"igo-zoom mat-typography\">{{'igo.integration.advanced-map-tool.advanced-coordinates.resolution' | translate}} {{map.viewController.getResolution() | number: '1.0-0' }}</p>", styles: ["textarea{resize:none}mat-form-field{padding:10px 15px}mat-form-field.coordinates{width:120px}mat-form-field.coordinates2{width:120px;padding:0 10px 0 3px}mat-form-field.igo-input-container{width:60%;padding:0 15px}.igo-form-button-group{padding:0 10px;margin:0 10px}.center-toggle{padding:10px 15px 35px}mat-slide-toggle{font-size:small}.igo-zoom{padding:0 15px}\n"] }]
     }], function () { return [{ type: MapState }, { type: i2.LanguageService }, { type: i2.MessageService }, { type: i0.ChangeDetectorRef }, { type: i2.StorageService }, { type: i2.ConfigService }, { type: i3.UntypedFormBuilder }]; }, { projectionsLimitations: [{
             type: Input
         }] }); })();
@@ -3670,7 +3704,7 @@ AdvancedMapToolComponent = __decorate([
 ], AdvancedMapToolComponent);
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AdvancedMapToolComponent, [{
         type: Component,
-        args: [{ selector: 'igo-advanced-map-tool', template: "<h4 class=\"nameOfTool\">{{'igo.integration.advanced-map-tool.advanced-swipe.swipe-tool' | translate}}</h4>\r\n<igo-advanced-swipe></igo-advanced-swipe>\r\n<mat-divider class=\"advanced-tool-line\"></mat-divider>\r\n\r\n<h4 class=\"nameOfTool\">{{'igo.integration.advanced-map-tool.advanced-coordinates.coordinates' | translate}}</h4>\r\n<igo-advanced-coordinates></igo-advanced-coordinates>\r\n<mat-divider class=\"advanced-tool-line\"></mat-divider>\r\n\r\n<h4 class=\"nameOfTool\">{{'igo.integration.advanced-map-tool.geolocation.title' | translate}}</h4>\r\n\r\n<div class=\"igo-input-container\">\r\n  <div class=\"geolocation-slide-toggle-container mat-typography\">\r\n    <mat-slide-toggle \r\n      class=\"geolocation-option mat-typography\"\r\n      [checked]=\"tracking$ | async\"\r\n      [labelPosition]=\"'before'\"\r\n      (change)=\"toggleTracking($event.checked)\">\r\n      {{'igo.integration.advanced-map-tool.geolocation.tracking' | translate}}\r\n    </mat-slide-toggle>\r\n\r\n    <mat-slide-toggle\r\n      class=\"geolocation-option mat-typography\"\r\n      [disabled]=\"(tracking$ | async) !== true\"\r\n      [checked]=\"followPosition$ | async\"\r\n      [labelPosition]=\"'before'\"\r\n      (change)=\"toggleFollow($event.checked)\">\r\n      {{'igo.integration.advanced-map-tool.geolocation.follow' | translate}}\r\n    </mat-slide-toggle>\r\n  </div>\r\n</div>", styles: [".nameOfTool{text-align:center;font-weight:700;font-size:small;margin:15px 10px 0}.advanced-tool-line{height:2px;background-color:gray}.geolocation-slide-toggle-container{overflow-x:hidden}.geolocation-slide-toggle-container mat-slide-toggle{width:100%;margin:10px}.geolocation-slide-toggle-container mat-slide-toggle ::ng-deep .mat-slide-toggle-content{width:calc(100% - 60px)}.geolocation-option{display:block;margin-right:10px;margin-bottom:15px}\n"] }]
+        args: [{ selector: 'igo-advanced-map-tool', template: "<h4 class=\"nameOfTool\">{{'igo.integration.advanced-map-tool.advanced-swipe.swipe-tool' | translate}}</h4>\n<igo-advanced-swipe></igo-advanced-swipe>\n<mat-divider class=\"advanced-tool-line\"></mat-divider>\n\n<h4 class=\"nameOfTool\">{{'igo.integration.advanced-map-tool.advanced-coordinates.coordinates' | translate}}</h4>\n<igo-advanced-coordinates></igo-advanced-coordinates>\n<mat-divider class=\"advanced-tool-line\"></mat-divider>\n\n<h4 class=\"nameOfTool\">{{'igo.integration.advanced-map-tool.geolocation.title' | translate}}</h4>\n\n<div class=\"igo-input-container\">\n  <div class=\"geolocation-slide-toggle-container mat-typography\">\n    <mat-slide-toggle \n      class=\"geolocation-option mat-typography\"\n      [checked]=\"tracking$ | async\"\n      [labelPosition]=\"'before'\"\n      (change)=\"toggleTracking($event.checked)\">\n      {{'igo.integration.advanced-map-tool.geolocation.tracking' | translate}}\n    </mat-slide-toggle>\n\n    <mat-slide-toggle\n      class=\"geolocation-option mat-typography\"\n      [disabled]=\"(tracking$ | async) !== true\"\n      [checked]=\"followPosition$ | async\"\n      [labelPosition]=\"'before'\"\n      (change)=\"toggleFollow($event.checked)\">\n      {{'igo.integration.advanced-map-tool.geolocation.follow' | translate}}\n    </mat-slide-toggle>\n  </div>\n</div>", styles: [".nameOfTool{text-align:center;font-weight:700;font-size:small;margin:15px 10px 0}.advanced-tool-line{height:2px;background-color:gray}.geolocation-slide-toggle-container{overflow-x:hidden}.geolocation-slide-toggle-container mat-slide-toggle{width:100%;margin:10px}.geolocation-slide-toggle-container mat-slide-toggle ::ng-deep .mat-slide-toggle-content{width:calc(100% - 60px)}.geolocation-option{display:block;margin-right:10px;margin-bottom:15px}\n"] }]
     }], function () { return [{ type: MapState }]; }, null); })();
 
 /**
@@ -4007,7 +4041,7 @@ MapProximityToolComponent = __decorate([
 ], MapProximityToolComponent);
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MapProximityToolComponent, [{
         type: Component,
-        args: [{ selector: 'igo-map-proximity-tool', template: "<igo-entity-table #table class=\"table-compact\" [store]=\"mapProximityState.proximityFeatureStore\" [template]=\"tableTemplate\"></igo-entity-table>\r\n<br>\r\n<mat-form-field *ngIf=\"mapProximityState.currentPositionCoordinate$ | async as coord\" class=\"coordinates\">\r\n  <textarea #textArea matInput readonly rows=\"1\"\r\n    [placeholder]=\"'igo.integration.map-proximity-tool.lon' | translate\"\r\n    [value]=\"coord[0]\"></textarea>\r\n</mat-form-field>\r\n<mat-form-field *ngIf=\"mapProximityState.currentPositionCoordinate$ | async as coord2\" class=\"coordinates2\">\r\n  <textarea #textArea matInput readonly rows=\"1\"\r\n    [placeholder]=\"'igo.integration.map-proximity-tool.lat' | translate\"\r\n    [value]=\"coord2[1]\"></textarea>\r\n</mat-form-field>\r\n\r\n<button *ngIf=\"(mapProximityState.currentPositionCoordinate$ | async) && (mapProximityState.currentPositionCoordinate$ | async).length\" mat-icon-button\r\n  (click)=\"copyTextToClipboard()\">\r\n  <mat-icon svgIcon=\"content-copy\"></mat-icon>\r\n</button>\r\n<div class=\"title-container\">\r\n  <mat-label class=\"title mat-typography\">{{'igo.integration.map-proximity-tool.method' | translate}}</mat-label>\r\n</div>\r\n<div class=\"igo-input-container mat-typography\">\r\n  <mat-radio-group (change)=\"onLocationTypeChange($event)\">\r\n    <mat-radio-button [checked]=\"(mapProximityState.proximitylocationType$|async)==='geolocation'\" value=\"geolocation\">{{'igo.integration.map-proximity-tool.geolocation' | translate}}</mat-radio-button>\r\n    <mat-radio-button [checked]=\"(mapProximityState.proximitylocationType$|async)==='mapCenter'\" value=\"mapCenter\">{{'igo.integration.map-proximity-tool.mapCenter' | translate}}</mat-radio-button>\r\n  </mat-radio-group>\r\n</div>\r\n\r\n<div class=\"radius-unit\"> \r\n  \r\n  <mat-form-field appearance=\"outline\" class=\"measure-field\" floatLabel=\"always\">\r\n    <mat-label>{{'igo.integration.map-proximity-tool.radiusM' | translate}}</mat-label>\r\n    <input type=\"number\" pattern=\"[0-9]*\" [(ngModel)]=\"maxDistance\" matInput placeholder=\"{{'igo.integration.map-proximity-tool.radiusM' | translate}}\">\r\n    </mat-form-field>\r\n\r\n  \r\n</div>", styles: [".table-compact{height:auto}.table-compact ::ng-deep .mat-header-cell.mat-column-selectionCheckbox{width:52px}textarea{resize:none}mat-form-field{padding:10px 15px}mat-form-field.coordinates{width:110px}mat-form-field.coordinates2{width:100px;padding:0 10px 0 3px}mat-form-field.igo-input-container{width:60%;padding:0 15px}.radius-unit{display:flex;width:90%;margin-left:2px;padding:5px}.radius-field{display:flex;flex-flow:column nowrap;width:60%}.title-container{padding:10px}.title{margin-left:5px;font-size:medium;font-size:initial}.mat-radio-group{display:flex;flex-direction:column;padding-top:10px}.mat-radio-button{display:inline-flex;position:relative;margin-left:16px;margin-top:10px}\n"] }]
+        args: [{ selector: 'igo-map-proximity-tool', template: "<igo-entity-table #table class=\"table-compact\" [store]=\"mapProximityState.proximityFeatureStore\" [template]=\"tableTemplate\"></igo-entity-table>\n<br>\n<mat-form-field *ngIf=\"mapProximityState.currentPositionCoordinate$ | async as coord\" class=\"coordinates\">\n  <textarea #textArea matInput readonly rows=\"1\"\n    [placeholder]=\"'igo.integration.map-proximity-tool.lon' | translate\"\n    [value]=\"coord[0]\"></textarea>\n</mat-form-field>\n<mat-form-field *ngIf=\"mapProximityState.currentPositionCoordinate$ | async as coord2\" class=\"coordinates2\">\n  <textarea #textArea matInput readonly rows=\"1\"\n    [placeholder]=\"'igo.integration.map-proximity-tool.lat' | translate\"\n    [value]=\"coord2[1]\"></textarea>\n</mat-form-field>\n\n<button *ngIf=\"(mapProximityState.currentPositionCoordinate$ | async) && (mapProximityState.currentPositionCoordinate$ | async).length\" mat-icon-button\n  (click)=\"copyTextToClipboard()\">\n  <mat-icon svgIcon=\"content-copy\"></mat-icon>\n</button>\n<div class=\"title-container\">\n  <mat-label class=\"title mat-typography\">{{'igo.integration.map-proximity-tool.method' | translate}}</mat-label>\n</div>\n<div class=\"igo-input-container mat-typography\">\n  <mat-radio-group (change)=\"onLocationTypeChange($event)\">\n    <mat-radio-button [checked]=\"(mapProximityState.proximitylocationType$|async)==='geolocation'\" value=\"geolocation\">{{'igo.integration.map-proximity-tool.geolocation' | translate}}</mat-radio-button>\n    <mat-radio-button [checked]=\"(mapProximityState.proximitylocationType$|async)==='mapCenter'\" value=\"mapCenter\">{{'igo.integration.map-proximity-tool.mapCenter' | translate}}</mat-radio-button>\n  </mat-radio-group>\n</div>\n\n<div class=\"radius-unit\"> \n  \n  <mat-form-field appearance=\"outline\" class=\"measure-field\" floatLabel=\"always\">\n    <mat-label>{{'igo.integration.map-proximity-tool.radiusM' | translate}}</mat-label>\n    <input type=\"number\" pattern=\"[0-9]*\" [(ngModel)]=\"maxDistance\" matInput placeholder=\"{{'igo.integration.map-proximity-tool.radiusM' | translate}}\">\n    </mat-form-field>\n\n  \n</div>", styles: [".table-compact{height:auto}.table-compact ::ng-deep .mat-header-cell.mat-column-selectionCheckbox{width:52px}textarea{resize:none}mat-form-field{padding:10px 15px}mat-form-field.coordinates{width:110px}mat-form-field.coordinates2{width:100px;padding:0 10px 0 3px}mat-form-field.igo-input-container{width:60%;padding:0 15px}.radius-unit{display:flex;width:90%;margin-left:2px;padding:5px}.radius-field{display:flex;flex-flow:column nowrap;width:60%}.title-container{padding:10px}.title{margin-left:5px;font-size:medium;font-size:initial}.mat-radio-group{display:flex;flex-direction:column;padding-top:10px}.mat-radio-button{display:inline-flex;position:relative;margin-left:16px;margin-top:10px}\n"] }]
     }], function () { return [{ type: MapState }, { type: MapProximityState }, { type: i2.LanguageService }, { type: i2.MessageService }]; }, { table: [{
             type: ViewChild,
             args: ['table', { static: true }]
@@ -4187,7 +4221,7 @@ MeasurerToolComponent = __decorate([
 ], MeasurerToolComponent);
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MeasurerToolComponent, [{
         type: Component,
-        args: [{ selector: 'igo-measurer-tool', changeDetection: ChangeDetectionStrategy.OnPush, template: "<igo-measurer [store]=\"store\" [map]=\"map\"></igo-measurer>\r\n" }]
+        args: [{ selector: 'igo-measurer-tool', changeDetection: ChangeDetectionStrategy.OnPush, template: "<igo-measurer [store]=\"store\" [map]=\"map\"></igo-measurer>\n" }]
     }], function () { return [{ type: MeasureState }, { type: MapState }]; }, null); })();
 
 /**
@@ -4251,7 +4285,7 @@ PrintToolComponent = __decorate([
 ], PrintToolComponent);
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrintToolComponent, [{
         type: Component,
-        args: [{ selector: 'igo-print-tool', template: "<igo-print [map]=\"map\"></igo-print>\r\n" }]
+        args: [{ selector: 'igo-print-tool', template: "<igo-print [map]=\"map\"></igo-print>\n" }]
     }], function () { return [{ type: MapState }]; }, null); })();
 
 class IgoAppPrintModule {
@@ -4994,7 +5028,7 @@ SearchResultsToolComponent = __decorate([
 ], SearchResultsToolComponent);
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SearchResultsToolComponent, [{
         type: Component,
-        args: [{ selector: 'igo-search-results-tool', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"(!store || store.stateView.empty) && (debouncedEmpty$ | async) \" style=\"margin: 10px;\">\r\n  <section class=\"mat-typography\">\r\n    <h4><strong>{{ 'igo.integration.searchResultsTool.noResults' | translate }}</strong></h4>\r\n    <p><strong>{{ 'igo.integration.searchResultsTool.doSearch' | translate }}</strong></p>\r\n    <div [innerHTML]=\"'igo.integration.searchResultsTool.examples' | translate | sanitizeHtml\"></div>\r\n</section>\r\n</div>\r\n\r\n<igo-flexible\r\n  *ngIf=\"store && (store.stateView.empty$ | async)===false\"\r\n  #topPanel\r\n  initial=\"100%\"\r\n  initialMobile=\"100%\"\r\n  collapsed=\"calc(100% - 58px)\"\r\n  collapsedMobile=\"calc(100% - 58px)\"\r\n  expanded=\"60%\"\r\n  expandedMobile=\"60%\"\r\n  [state]=\"(feature$ |\u00A0async) ? topPanelState : 'initial'\">\r\n\r\n  <div class=\"igo-content\">\r\n    <igo-search-results\r\n      [store]=\"store\"\r\n      [showIcons]=\"showIcons\"\r\n      [term]=\"term\"\r\n      [termSplitter]=\"termSplitter\"\r\n      [settingsChange$]=\"settingsChange$\"\r\n      placeholder=\"false\"\r\n      (resultFocus)=\"onResultFocus($event)\"\r\n      (resultSelect)=\"onResultSelect($event)\"\r\n      (resultUnfocus)=\"onResultUnfocus($event)\"\r\n      (resultMouseenter)=\"onResultFocus($event)\"\r\n      (resultMouseleave)=\"onResultUnfocus($event)\"\r\n      (moreResults)=\"onSearch($event)\">\r\n      <ng-template #igoSearchItemToolbar let-result=\"result\">\r\n        <igo-search-add-button\r\n          [map]=\"map\"\r\n          [layer]=\"result\">\r\n        </igo-search-add-button>\r\n      </ng-template>\r\n    </igo-search-results>\r\n  </div>\r\n\r\n  <div igoFlexibleFill class=\"igo-content\">\r\n    <igo-panel [title]=\"featureTitle\" *ngIf=\"feature$ |\u00A0async\">\r\n\r\n      <button\r\n        mat-icon-button\r\n        panelLeftButton\r\n        class=\"igo-icon-button\"\r\n        (click)=\"toggleTopPanel()\">\r\n        <mat-icon [svgIcon]=\"(topPanelState$ | async) === 'collapsed' ? 'arrow-up' : 'arrow-down'\"></mat-icon>\r\n      </button>\r\n\r\n      <button\r\n        *ngIf=\"feature.geometry\"\r\n        mat-icon-button\r\n        panelRightButton\r\n        class=\"igo-icon-button\"\r\n        [matTooltip]=\"((isSelectedResultOutOfView$ | async) ? 'igo.integration.searchResultsTool.zoomOnFeatureTooltipOutOfView' : 'igo.integration.searchResultsTool.zoomOnFeatureTooltip') | translate\"\r\n        matTooltipShowDelay=\"500\"\r\n        (click)=\"zoomToFeatureExtent()\">\r\n        <mat-icon\r\n        [matBadge]=\"(isSelectedResultOutOfView$ | async) ? '!' : ''\"\r\n        matBadgeColor=\"accent\"\r\n        matBadgeSize=\"small\"\r\n        [matBadgeHidden]=\"(isSelectedResultOutOfView$ | async)===false\"     \r\n        svgIcon=\"magnify-plus-outline\"></mat-icon>\r\n      </button>\r\n\r\n      <igo-feature-details\r\n        igoFeatureDetailsDirective\r\n        [feature]=\"feature$ | async\"\r\n        [map]=\"map\"\r\n        [toolbox]=\"toolState.toolbox\"\r\n        (routingEvent)=\"getRoute()\">\r\n      </igo-feature-details>\r\n    </igo-panel>\r\n  </div>\r\n\r\n</igo-flexible>\r\n" }]
+        args: [{ selector: 'igo-search-results-tool', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"(!store || store.stateView.empty) && (debouncedEmpty$ | async) \" style=\"margin: 10px;\">\n  <section class=\"mat-typography\">\n    <h4><strong>{{ 'igo.integration.searchResultsTool.noResults' | translate }}</strong></h4>\n    <p><strong>{{ 'igo.integration.searchResultsTool.doSearch' | translate }}</strong></p>\n    <div [innerHTML]=\"'igo.integration.searchResultsTool.examples' | translate | sanitizeHtml\"></div>\n</section>\n</div>\n\n<igo-flexible\n  *ngIf=\"store && (store.stateView.empty$ | async)===false\"\n  #topPanel\n  initial=\"100%\"\n  initialMobile=\"100%\"\n  collapsed=\"calc(100% - 58px)\"\n  collapsedMobile=\"calc(100% - 58px)\"\n  expanded=\"60%\"\n  expandedMobile=\"60%\"\n  [state]=\"(feature$ |\u00A0async) ? topPanelState : 'initial'\">\n\n  <div class=\"igo-content\">\n    <igo-search-results\n      [store]=\"store\"\n      [showIcons]=\"showIcons\"\n      [term]=\"term\"\n      [termSplitter]=\"termSplitter\"\n      [settingsChange$]=\"settingsChange$\"\n      placeholder=\"false\"\n      (resultFocus)=\"onResultFocus($event)\"\n      (resultSelect)=\"onResultSelect($event)\"\n      (resultUnfocus)=\"onResultUnfocus($event)\"\n      (resultMouseenter)=\"onResultFocus($event)\"\n      (resultMouseleave)=\"onResultUnfocus($event)\"\n      (moreResults)=\"onSearch($event)\">\n      <ng-template #igoSearchItemToolbar let-result=\"result\">\n        <igo-search-add-button\n          [map]=\"map\"\n          [layer]=\"result\">\n        </igo-search-add-button>\n      </ng-template>\n    </igo-search-results>\n  </div>\n\n  <div igoFlexibleFill class=\"igo-content\">\n    <igo-panel [title]=\"featureTitle\" *ngIf=\"feature$ |\u00A0async\">\n\n      <button\n        mat-icon-button\n        panelLeftButton\n        class=\"igo-icon-button\"\n        (click)=\"toggleTopPanel()\">\n        <mat-icon [svgIcon]=\"(topPanelState$ | async) === 'collapsed' ? 'arrow-up' : 'arrow-down'\"></mat-icon>\n      </button>\n\n      <button\n        *ngIf=\"feature.geometry\"\n        mat-icon-button\n        panelRightButton\n        class=\"igo-icon-button\"\n        [matTooltip]=\"((isSelectedResultOutOfView$ | async) ? 'igo.integration.searchResultsTool.zoomOnFeatureTooltipOutOfView' : 'igo.integration.searchResultsTool.zoomOnFeatureTooltip') | translate\"\n        matTooltipShowDelay=\"500\"\n        (click)=\"zoomToFeatureExtent()\">\n        <mat-icon\n        [matBadge]=\"(isSelectedResultOutOfView$ | async) ? '!' : ''\"\n        matBadgeColor=\"accent\"\n        matBadgeSize=\"small\"\n        [matBadgeHidden]=\"(isSelectedResultOutOfView$ | async)===false\"     \n        svgIcon=\"magnify-plus-outline\"></mat-icon>\n      </button>\n\n      <igo-feature-details\n        igoFeatureDetailsDirective\n        [feature]=\"feature$ | async\"\n        [map]=\"map\"\n        [toolbox]=\"toolState.toolbox\"\n        (routingEvent)=\"getRoute()\">\n      </igo-feature-details>\n    </igo-panel>\n  </div>\n\n</igo-flexible>\n" }]
     }], function () { return [{ type: MapState }, { type: SearchState }, { type: i0.ElementRef }, { type: ToolState }, { type: DirectionState }, { type: i2.ConfigService }]; }, { showIcons: [{
             type: Input
         }], topPanelStateDefault: [{
@@ -5093,7 +5127,7 @@ OgcFilterToolComponent = __decorate([
 ], OgcFilterToolComponent);
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(OgcFilterToolComponent, [{
         type: Component,
-        args: [{ selector: 'igo-ogc-filter-tool', template: "<igo-ogc-filterable-list igoOgcFilterableListBinding></igo-ogc-filterable-list>\r\n\r\n\r\n" }]
+        args: [{ selector: 'igo-ogc-filter-tool', template: "<igo-ogc-filterable-list igoOgcFilterableListBinding></igo-ogc-filterable-list>\n\n\n" }]
     }], function () { return []; }, null); })();
 
 let TimeFilterToolComponent = class TimeFilterToolComponent {
@@ -5112,7 +5146,7 @@ TimeFilterToolComponent = __decorate([
 ], TimeFilterToolComponent);
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TimeFilterToolComponent, [{
         type: Component,
-        args: [{ selector: 'igo-time-filter-tool', template: "<igo-time-filter-list igoTimeFilterListBinding></igo-time-filter-list>\r\n" }]
+        args: [{ selector: 'igo-time-filter-tool', template: "<igo-time-filter-list igoTimeFilterListBinding></igo-time-filter-list>\n" }]
     }], function () { return []; }, null); })();
 
 function SpatialFilterToolComponent_ng_container_4_Template(rf, ctx) { if (rf & 1) {
@@ -5621,7 +5655,7 @@ SpatialFilterToolComponent = __decorate([
 ], SpatialFilterToolComponent);
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SpatialFilterToolComponent, [{
         type: Component,
-        args: [{ selector: 'igo-spatial-filter-tool', changeDetection: ChangeDetectionStrategy.OnPush, template: "<igo-panel>\r\n  <igo-spatial-filter-type\r\n    [store]=\"spatialListStore\"\r\n    [selectedQueryType]=\"queryType\"\r\n    [zone]=\"zone\"\r\n    [layers]=\"activeLayers\"\r\n    (eventType)=\"getOutputType($event)\"\r\n    (eventQueryType)=\"getOutputQueryType($event)\"\r\n    (zoneChange)=\"onZoneChange($event)\"\r\n    (zoneWithBufferChange)=\"onZoneChange($event, true)\"\r\n    (bufferChange)=\"buffer = $event\"\r\n    (measureUnitChange)=\"measureUnit = $event\">\r\n  </igo-spatial-filter-type>\r\n\r\n  <igo-spatial-filter-item\r\n    [type]=\"type\"\r\n    [queryType]=\"queryType\"\r\n    [map]=\"map\"\r\n    [zone]=\"zone\"\r\n    [loading]=\"loading\"\r\n    [store]=\"store\"\r\n    [layers]=\"activeLayers\"\r\n    [allLayers]=\"layers\"\r\n    [thematicLength]=\"thematicLength\"\r\n    (radiusEvent)=\"buffer = $event\"\r\n    (bufferEvent)=\"buffer = $event\"\r\n    (measureUnitChange)=\"measureUnit = $event\"\r\n    (freehandControl)=\"freehandDrawIsActive = $event\"\r\n    (drawZoneEvent)=\"zone = $event\"\r\n    (zoneWithBufferChange)=\"onZoneChange($event, true)\"\r\n    (itemTypeChange)=\"itemType = $event\"\r\n    (thematicChange)=\"thematics = $event\"\r\n    (toggleSearch)=\"getOutputToggleSearch()\"\r\n    (clearButtonEvent)=\"clearMap()\"\r\n    (clearSearchEvent)=\"getOutputClearSearch()\"\r\n    (export)=\"activateExportTool()\"\r\n    (openWorkspace)=\"activateWorkspace()\"\r\n    (entityChange)=\"activateWorkspace($event)\">\r\n  </igo-spatial-filter-item>\r\n</igo-panel>\r\n\r\n<igo-panel>\r\n  <ng-container *ngIf=\"selectedFeature$ | async as feature\">\r\n    <igo-feature-details [feature]=\"feature\"></igo-feature-details>\r\n  </ng-container>\r\n</igo-panel>" }]
+        args: [{ selector: 'igo-spatial-filter-tool', changeDetection: ChangeDetectionStrategy.OnPush, template: "<igo-panel>\n  <igo-spatial-filter-type\n    [store]=\"spatialListStore\"\n    [selectedQueryType]=\"queryType\"\n    [zone]=\"zone\"\n    [layers]=\"activeLayers\"\n    (eventType)=\"getOutputType($event)\"\n    (eventQueryType)=\"getOutputQueryType($event)\"\n    (zoneChange)=\"onZoneChange($event)\"\n    (zoneWithBufferChange)=\"onZoneChange($event, true)\"\n    (bufferChange)=\"buffer = $event\"\n    (measureUnitChange)=\"measureUnit = $event\">\n  </igo-spatial-filter-type>\n\n  <igo-spatial-filter-item\n    [type]=\"type\"\n    [queryType]=\"queryType\"\n    [map]=\"map\"\n    [zone]=\"zone\"\n    [loading]=\"loading\"\n    [store]=\"store\"\n    [layers]=\"activeLayers\"\n    [allLayers]=\"layers\"\n    [thematicLength]=\"thematicLength\"\n    (radiusEvent)=\"buffer = $event\"\n    (bufferEvent)=\"buffer = $event\"\n    (measureUnitChange)=\"measureUnit = $event\"\n    (freehandControl)=\"freehandDrawIsActive = $event\"\n    (drawZoneEvent)=\"zone = $event\"\n    (zoneWithBufferChange)=\"onZoneChange($event, true)\"\n    (itemTypeChange)=\"itemType = $event\"\n    (thematicChange)=\"thematics = $event\"\n    (toggleSearch)=\"getOutputToggleSearch()\"\n    (clearButtonEvent)=\"clearMap()\"\n    (clearSearchEvent)=\"getOutputClearSearch()\"\n    (export)=\"activateExportTool()\"\n    (openWorkspace)=\"activateWorkspace()\"\n    (entityChange)=\"activateWorkspace($event)\">\n  </igo-spatial-filter-item>\n</igo-panel>\n\n<igo-panel>\n  <ng-container *ngIf=\"selectedFeature$ | async as feature\">\n    <igo-feature-details [feature]=\"feature\"></igo-feature-details>\n  </ng-container>\n</igo-panel>" }]
     }], function () { return [{ type: i7.MatIconRegistry }, { type: i1$1.SpatialFilterService }, { type: i1$1.DataSourceService }, { type: i1$1.LayerService }, { type: MapState }, { type: i2.MessageService }, { type: i2.LanguageService }, { type: ImportExportState }, { type: ToolState }, { type: WorkspaceState }, { type: i0.ChangeDetectorRef }]; }, { type: [{
             type: Input
         }], itemType: [{
@@ -5672,7 +5706,7 @@ ActiveTimeFilterToolComponent = __decorate([
 ], ActiveTimeFilterToolComponent);
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ActiveTimeFilterToolComponent, [{
         type: Component,
-        args: [{ selector: 'igo-active-time-filter-tool', animations: [toolSlideInOut$1()], template: "<igo-time-filter-item\r\n    [map]=\"map\"\r\n    [layer]=\"layer\"\r\n    [header]=\"false\"\r\n    [@toolSlideInOut]=\"animate\">\r\n</igo-time-filter-item>\r\n" }]
+        args: [{ selector: 'igo-active-time-filter-tool', animations: [toolSlideInOut$1()], template: "<igo-time-filter-item\n    [map]=\"map\"\n    [layer]=\"layer\"\n    [header]=\"false\"\n    [@toolSlideInOut]=\"animate\">\n</igo-time-filter-item>\n" }]
     }], function () { return [{ type: MapState }]; }, null); })();
 
 function toolSlideInOut(speed = '300ms', type = 'ease-in-out') {
@@ -5717,7 +5751,7 @@ ActiveOgcFilterToolComponent = __decorate([
 ], ActiveOgcFilterToolComponent);
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ActiveOgcFilterToolComponent, [{
         type: Component,
-        args: [{ selector: 'igo-active-ogc-filter-tool', animations: [toolSlideInOut()], template: "<igo-ogc-filterable-item\r\n    [map]=\"map\"\r\n    [layer]=\"layer\"\r\n    [header]=\"false\"\r\n    [@toolSlideInOut]=\"animate\">\r\n</igo-ogc-filterable-item>\r\n\r\n\r\n" }]
+        args: [{ selector: 'igo-active-ogc-filter-tool', animations: [toolSlideInOut()], template: "<igo-ogc-filterable-item\n    [map]=\"map\"\n    [layer]=\"layer\"\n    [header]=\"false\"\n    [@toolSlideInOut]=\"animate\">\n</igo-ogc-filterable-item>\n\n\n" }]
     }], function () { return [{ type: MapState }]; }, null); })();
 
 class IgoAppFilterModule {
@@ -5920,7 +5954,7 @@ AboutToolComponent = __decorate([
 ], AboutToolComponent);
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AboutToolComponent, [{
         type: Component,
-        args: [{ selector: 'igo-about-tool', template: "<p></p>\r\n<igo-interactive-tour\r\n  mat-raised-button\r\n  tourToStart=\"global\"\r\n  menuIsOpen=true\r\n  styleButton=\"raised\"\r\n  [discoverTitleInLocale$]=\"discoverTitleInLocale$\">\r\n</igo-interactive-tour>\r\n\r\n<button *ngIf=\"auth.authenticated && trainingGuideURLs && trainingGuideURLs.length === 1\"\r\n  class=\"training-guide-button\"\r\n  mat-raised-button\r\n  tooltip-position=\"below\"\r\n  matTooltipShowDelay=\"500\"\r\n  [disabled]=\"loading\"\r\n  [matTooltip]=\"'igo.integration.aboutTool.trainingGuideTooltip' | translate\"\r\n  (click)=\"openGuide()\">\r\n  <span>{{'igo.integration.aboutTool.trainingGuide' | translate}}</span>\r\n  <mat-icon svgIcon=\"file-document\"></mat-icon>\r\n</button>\r\n\r\n<button *ngIf=\"auth.authenticated && trainingGuideURLs && trainingGuideURLs.length > 1\"\r\n  class=\"training-guide-button\"\r\n  mat-raised-button\r\n  tooltip-position=\"below\"\r\n  matTooltipShowDelay=\"500\"\r\n  [disabled]=\"loading\"\r\n  [matTooltip]=\"'igo.integration.aboutTool.trainingGuideTooltip' | translate\"\r\n  [matMenuTriggerFor]=\"menu\">\r\n  <span>{{'igo.integration.aboutTool.trainingGuide' | translate}}</span>\r\n  <mat-icon svgIcon=\"file-document\"></mat-icon>\r\n</button>\r\n\r\n<mat-menu #menu=\"matMenu\">\r\n  <button *ngFor=\"let guide of trainingGuideURLs\" mat-menu-item (click)=\"openGuide(guide)\">{{formatFileName(guide)}}</button>\r\n</mat-menu>\r\n\r\n<igo-custom-html *ngIf=\"headerHtml !== ''\" class=\"mat-typography\"\r\n  [html]=\"headerHtml | translate\">\r\n</igo-custom-html>\r\n\r\n<igo-custom-html class=\"mat-typography\"\r\n  [html]=\"html | translate: {version: version}\">\r\n</igo-custom-html>\r\n", styles: ["igo-interactive-tour{margin-left:20px}.training-guide-button{margin-left:5px;background-color:#1976d2;color:#fff;padding:0 12px}\n"] }]
+        args: [{ selector: 'igo-about-tool', template: "<p></p>\n<igo-interactive-tour\n  mat-raised-button\n  tourToStart=\"global\"\n  menuIsOpen=true\n  styleButton=\"raised\"\n  [discoverTitleInLocale$]=\"discoverTitleInLocale$\">\n</igo-interactive-tour>\n\n<button *ngIf=\"auth.authenticated && trainingGuideURLs && trainingGuideURLs.length === 1\"\n  class=\"training-guide-button\"\n  mat-raised-button\n  tooltip-position=\"below\"\n  matTooltipShowDelay=\"500\"\n  [disabled]=\"loading\"\n  [matTooltip]=\"'igo.integration.aboutTool.trainingGuideTooltip' | translate\"\n  (click)=\"openGuide()\">\n  <span>{{'igo.integration.aboutTool.trainingGuide' | translate}}</span>\n  <mat-icon svgIcon=\"file-document\"></mat-icon>\n</button>\n\n<button *ngIf=\"auth.authenticated && trainingGuideURLs && trainingGuideURLs.length > 1\"\n  class=\"training-guide-button\"\n  mat-raised-button\n  tooltip-position=\"below\"\n  matTooltipShowDelay=\"500\"\n  [disabled]=\"loading\"\n  [matTooltip]=\"'igo.integration.aboutTool.trainingGuideTooltip' | translate\"\n  [matMenuTriggerFor]=\"menu\">\n  <span>{{'igo.integration.aboutTool.trainingGuide' | translate}}</span>\n  <mat-icon svgIcon=\"file-document\"></mat-icon>\n</button>\n\n<mat-menu #menu=\"matMenu\">\n  <button *ngFor=\"let guide of trainingGuideURLs\" mat-menu-item (click)=\"openGuide(guide)\">{{formatFileName(guide)}}</button>\n</mat-menu>\n\n<igo-custom-html *ngIf=\"headerHtml !== ''\" class=\"mat-typography\"\n  [html]=\"headerHtml | translate\">\n</igo-custom-html>\n\n<igo-custom-html class=\"mat-typography\"\n  [html]=\"html | translate: {version: version}\">\n</igo-custom-html>\n", styles: ["igo-interactive-tour{margin-left:20px}.training-guide-button{margin-left:5px;background-color:#1976d2;color:#fff;padding:0 12px}\n"] }]
     }], function () { return [{ type: i2.ConfigService }, { type: i2$1.AuthService }, { type: i3$1.HttpClient }, { type: i0.ChangeDetectorRef }, { type: i2.LanguageService }]; }, { headerHtml: [{
             type: Input
         }], html: [{