@igo2/geo 1.13.2 → 1.13.4

package/fesm2015/igo2-geo.mjs

@@ -116,7 +116,7 @@ import * as i14 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
 import * as i7$2 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
-import * as i15$1 from '@angular/material/slide-toggle';
+import * as i23 from '@angular/material/slide-toggle';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import * as i13$1 from '@angular/material/slider';
 import { MatSliderModule, MatSlider } from '@angular/material/slider';
@@ -284,7 +284,7 @@ MetadataButtonComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Met
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MetadataButtonComponent, [{
             type: Component,
-            args: [{ selector: 'igo-metadata-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\r\n  *ngIf=\"(options && options.metadata && options.metadata.url) || (options && options.metadata && options.metadata.abstract)\"\r\n  mat-icon-button\r\n  tooltip-position=\"below\"\r\n  matTooltipShowDelay=\"500\"\r\n  [matTooltip]=\"'igo.geo.metadata.show' | translate\"\r\n  [color]=\"color\"\r\n  (click)=\"openMetadata(options.metadata)\">\r\n  <mat-icon svgIcon=\"information-outline\"></mat-icon>\r\n</button>\r\n" }]
+            args: [{ selector: 'igo-metadata-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  *ngIf=\"(options && options.metadata && options.metadata.url) || (options && options.metadata && options.metadata.abstract)\"\n  mat-icon-button\n  tooltip-position=\"below\"\n  matTooltipShowDelay=\"500\"\n  [matTooltip]=\"'igo.geo.metadata.show' | translate\"\n  [color]=\"color\"\n  (click)=\"openMetadata(options.metadata)\">\n  <mat-icon svgIcon=\"information-outline\"></mat-icon>\n</button>\n" }]
         }], function () { return [{ type: MetadataService }, { type: i1.MatDialog }]; }, { layer: [{
                 type: Input
             }], color: [{
@@ -320,7 +320,7 @@ MetadataAbstractComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: M
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MetadataAbstractComponent, [{
             type: Component,
-            args: [{ selector: 'igo-metadata-abstract', encapsulation: ViewEncapsulation.None, template: "<h2 mat-dialog-title>{{ data.layerTitle }}</h2>\r\n<button class=\"close-button\" mat-button mat-dialog-close>X</button>\r\n<mat-dialog-content *ngIf=\"data.type !== 'arcgisrest'\" class=\"mat-typography\">\r\n  <h3>{{ data.abstract }}</h3>\r\n</mat-dialog-content>\r\n<mat-dialog-content *ngIf=\"data.type === 'arcgisrest'\" class=\"mat-typography\">\r\n  <h3 [innerHTML]=\"data.abstract\"></h3>\r\n</mat-dialog-content>\r\n", styles: [".close-button{top:5px;right:5px;padding:7px;line-height:10px;position:absolute!important;min-width:auto}mat-dialog-container{position:relative}\n"] }]
+            args: [{ selector: 'igo-metadata-abstract', encapsulation: ViewEncapsulation.None, template: "<h2 mat-dialog-title>{{ data.layerTitle }}</h2>\n<button class=\"close-button\" mat-button mat-dialog-close>X</button>\n<mat-dialog-content *ngIf=\"data.type !== 'arcgisrest'\" class=\"mat-typography\">\n  <h3>{{ data.abstract }}</h3>\n</mat-dialog-content>\n<mat-dialog-content *ngIf=\"data.type === 'arcgisrest'\" class=\"mat-typography\">\n  <h3 [innerHTML]=\"data.abstract\"></h3>\n</mat-dialog-content>\n", styles: [".close-button{top:5px;right:5px;padding:7px;line-height:10px;position:absolute!important;min-width:auto}mat-dialog-container{position:relative}\n"] }]
         }], function () {
         return [{ type: undefined, decorators: [{
                         type: Inject,
@@ -3021,6 +3021,7 @@ class WMSDataSource extends DataSource {
         }
         const filterQueryString = ogcFilterWriter.handleOgcFiltersAppliedValue(options, fieldNameGeometry);
         sourceParams.FILTER = filterQueryString;
+        this.ol.updateParams({ 'FILTER': sourceParams.FILTER });
         this.setOgcFilters(initOgcFilters, true);
         const timeFilterableDataSourceOptions = options;
         if ((timeFilterableDataSourceOptions === null || timeFilterableDataSourceOptions === void 0 ? void 0 : timeFilterableDataSourceOptions.timeFilterable) &&
@@ -7766,7 +7767,7 @@ function getDirectParentLayerByProperty(map, layer, property) {
             }
         });
         if (parents.length > 1) {
-            console.warn(`Your layer ${layer.title || layer.id} must only have 1 parent (${parents.map(p => p.title || p.id)})
+            console.warn(`Your layer ${layer.title || layer.id} must only have 1 parent (${parents.map(p => p.title || p.id)})
             , The first parent (${parents[0].title || parents[0].id}) will be use to sync properties`);
         }
         return parents[0];
@@ -7823,7 +7824,7 @@ function getDirectParentLayerByDeletion(map, layer) {
             }
         });
         if (parents.length > 1) {
-            console.warn(`Your layer ${layer.title || layer.id} must only have 1 parent (${parents.map(p => p.title || p.id)})
+            console.warn(`Your layer ${layer.title || layer.id} must only have 1 parent (${parents.map(p => p.title || p.id)})
           , The first parent (${parents[0].title || parents[0].id}) will be use to sync properties`);
         }
         return parents[0];
@@ -8346,7 +8347,7 @@ class IgoMap {
     }
 }
 
-const _c0$l = ["*"];
+const _c0$m = ["*"];
 class MapBrowserComponent {
     constructor(activityService) {
         this.activityService = activityService;
@@ -8392,7 +8393,7 @@ class MapBrowserComponent {
     }
 }
 MapBrowserComponent.ɵfac = function MapBrowserComponent_Factory(t) { return new (t || MapBrowserComponent)(i0.ɵɵdirectiveInject(i2$1.ActivityService)); };
-MapBrowserComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MapBrowserComponent, selectors: [["igo-map-browser"]], inputs: { map: "map", view: "view" }, ngContentSelectors: _c0$l, decls: 2, vars: 1, consts: [[1, "igo-map-browser-target", 3, "id"]], template: function MapBrowserComponent_Template(rf, ctx) {
+MapBrowserComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MapBrowserComponent, selectors: [["igo-map-browser"]], inputs: { map: "map", view: "view" }, ngContentSelectors: _c0$m, decls: 2, vars: 1, consts: [[1, "igo-map-browser-target", 3, "id"]], template: function MapBrowserComponent_Template(rf, ctx) {
         if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵelement(0, "div", 0);
@@ -8405,7 +8406,7 @@ MapBrowserComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MapBrow
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MapBrowserComponent, [{
             type: Component,
-            args: [{ selector: 'igo-map-browser', template: "<div [id]=\"id\" class=\"igo-map-browser-target\"></div>\r\n<ng-content></ng-content>\r\n", styles: [":host{position:relative;display:block}:host,.igo-map-browser-target{width:100%;height:100%}:host ::ng-deep igo-zoom-button{position:absolute;bottom:50px;right:5px}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){:host ::ng-deep igo-zoom-button{display:none}}:host ::ng-deep igo-offline-button{position:absolute;bottom:15px;right:5px}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){:host ::ng-deep igo-offline-button{bottom:5px}}:host ::ng-deep igo-geolocate-button{position:absolute;bottom:5px;right:5px}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){:host ::ng-deep igo-geolocate-button{bottom:5px}}:host ::ng-deep igo-rotation-button{position:absolute;top:50px;right:5px}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){:host ::ng-deep igo-rotation-button{bottom:50px}}:host ::ng-deep igo-wake-lock-button{position:absolute;top:95px;right:5px}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){:host ::ng-deep igo-wake-lock-button{bottom:50px}}:host ::ng-deep igo-home-extent-button{position:absolute;bottom:135px;right:5px}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){:host ::ng-deep igo-home-extent-button{bottom:5px;right:95px}}:host ::ng-deep igo-user-button{position:absolute;bottom:5px;right:55px}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){:host ::ng-deep igo-user-button{right:90px}}:host ::ng-deep igo-baselayers-switcher{position:absolute;bottom:5px;left:5px}:host ::ng-deep .ol-attribution{flex-flow:row;left:50px;bottom:5px;text-align:left;padding:0;margin-right:90px;background-color:#fff0;width:calc(100% - 100px)}:host ::ng-deep .ol-attribution.ol-logo-only{height:inherit}:host ::ng-deep .ol-attribution.ol-collapsed{background:none}:host ::ng-deep .ol-attribution.ol-collapsed button{transform:none}:host ::ng-deep .ol-attribution button{transform:rotate(180deg);background-color:#fff;cursor:pointer;outline:none}:host ::ng-deep .ol-scale-line-inner{color:#000;border-color:#000;text-shadow:rgb(255,255,255) -1px -1px 3px,rgb(255,255,255) 1px -1px 3px,rgb(255,255,255) -1px 1px 3px,rgb(255,255,255) 1px 1px 4px;box-shadow:0 1px 0 1px #fff9}:host ::ng-deep .ol-scale-line{background-color:#fff0;bottom:4px;transform:translate(-50%);left:50%}:host ::ng-deep .ol-scale-bar{background-color:#fff0;bottom:4px;transform:translate(-50%);left:50%}:host ::ng-deep .ol-scale-text{text-shadow:rgb(255,255,255) -1px -1px 3px,rgb(255,255,255) 1px -1px 3px,rgb(255,255,255) -1px 1px 3px,rgb(255,255,255) 1px 1px 4px}:host ::ng-deep .ol-scale-step-text{text-shadow:rgb(255,255,255) -1px -1px 3px,rgb(255,255,255) 1px -1px 3px,rgb(255,255,255) -1px 1px 3px,rgb(255,255,255) 1px 1px 4px}:host ::ng-deep canvas{display:block}\n"] }]
+            args: [{ selector: 'igo-map-browser', template: "<div [id]=\"id\" class=\"igo-map-browser-target\"></div>\n<ng-content></ng-content>\n", styles: [":host{position:relative;display:block}:host,.igo-map-browser-target{width:100%;height:100%}:host ::ng-deep igo-zoom-button{position:absolute;bottom:50px;right:5px}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){:host ::ng-deep igo-zoom-button{display:none}}:host ::ng-deep igo-offline-button{position:absolute;bottom:15px;right:5px}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){:host ::ng-deep igo-offline-button{bottom:5px}}:host ::ng-deep igo-geolocate-button{position:absolute;bottom:5px;right:5px}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){:host ::ng-deep igo-geolocate-button{bottom:5px}}:host ::ng-deep igo-rotation-button{position:absolute;top:50px;right:5px}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){:host ::ng-deep igo-rotation-button{bottom:50px}}:host ::ng-deep igo-wake-lock-button{position:absolute;top:95px;right:5px}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){:host ::ng-deep igo-wake-lock-button{bottom:50px}}:host ::ng-deep igo-home-extent-button{position:absolute;bottom:135px;right:5px}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){:host ::ng-deep igo-home-extent-button{bottom:5px;right:95px}}:host ::ng-deep igo-user-button{position:absolute;bottom:5px;right:55px}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){:host ::ng-deep igo-user-button{right:90px}}:host ::ng-deep igo-baselayers-switcher{position:absolute;bottom:5px;left:5px}:host ::ng-deep .ol-attribution{flex-flow:row;left:50px;bottom:5px;text-align:left;padding:0;margin-right:90px;background-color:#fff0;width:calc(100% - 100px)}:host ::ng-deep .ol-attribution.ol-logo-only{height:inherit}:host ::ng-deep .ol-attribution.ol-collapsed{background:none}:host ::ng-deep .ol-attribution.ol-collapsed button{transform:none}:host ::ng-deep .ol-attribution button{transform:rotate(180deg);background-color:#fff;cursor:pointer;outline:none}:host ::ng-deep .ol-scale-line-inner{color:#000;border-color:#000;text-shadow:rgb(255,255,255) -1px -1px 3px,rgb(255,255,255) 1px -1px 3px,rgb(255,255,255) -1px 1px 3px,rgb(255,255,255) 1px 1px 4px;box-shadow:0 1px 0 1px #fff9}:host ::ng-deep .ol-scale-line{background-color:#fff0;bottom:4px;transform:translate(-50%);left:50%}:host ::ng-deep .ol-scale-bar{background-color:#fff0;bottom:4px;transform:translate(-50%);left:50%}:host ::ng-deep .ol-scale-text{text-shadow:rgb(255,255,255) -1px -1px 3px,rgb(255,255,255) 1px -1px 3px,rgb(255,255,255) -1px 1px 3px,rgb(255,255,255) 1px 1px 4px}:host ::ng-deep .ol-scale-step-text{text-shadow:rgb(255,255,255) -1px -1px 3px,rgb(255,255,255) 1px -1px 3px,rgb(255,255,255) -1px 1px 3px,rgb(255,255,255) 1px 1px 4px}:host ::ng-deep canvas{display:block}\n"] }]
         }], function () { return [{ type: i2$1.ActivityService }]; }, { map: [{
                 type: Input
             }], view: [{
@@ -9231,7 +9232,7 @@ function computeProjectionsConstraints(projectionsLimitations) {
     return projectionsConstraints;
 }
 
-const _c0$k = function (a0) { return { zoom: a0 }; };
+const _c0$l = function (a0) { return { zoom: a0 }; };
 class ZoomButtonComponent {
     constructor() { }
     get zoom() { return this.map.viewController.getZoom(); }
@@ -9254,15 +9255,15 @@ ZoomButtonComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ZoomBut
         }
         if (rf & 2) {
             i0.ɵɵadvance(1);
-            i0.ɵɵproperty("matTooltip", i0.ɵɵpipeBind2(2, 6, "igo.geo.mapButtons.zoomIn", i0.ɵɵpureFunction1(12, _c0$k, ctx.zoom + 1)))("color", ctx.color)("disabled", ctx.zoom >= ctx.maxZoom);
+            i0.ɵɵproperty("matTooltip", i0.ɵɵpipeBind2(2, 6, "igo.geo.mapButtons.zoomIn", i0.ɵɵpureFunction1(12, _c0$l, ctx.zoom + 1)))("color", ctx.color)("disabled", ctx.zoom >= ctx.maxZoom);
             i0.ɵɵadvance(3);
-            i0.ɵɵproperty("matTooltip", i0.ɵɵpipeBind2(5, 9, "igo.geo.mapButtons.zoomOut", i0.ɵɵpureFunction1(14, _c0$k, ctx.zoom - 1)))("color", ctx.color)("disabled", ctx.zoom <= ctx.minZoom);
+            i0.ɵɵproperty("matTooltip", i0.ɵɵpipeBind2(5, 9, "igo.geo.mapButtons.zoomOut", i0.ɵɵpureFunction1(14, _c0$l, ctx.zoom - 1)))("color", ctx.color)("disabled", ctx.zoom <= ctx.minZoom);
         }
     }, dependencies: [i2.MatIcon, i3.MatButton, i4.MatTooltip, i7.TranslatePipe], styles: [".igo-zoom-button-container[_ngcontent-%COMP%]{width:40px}.igo-zoom-button-container[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]{background-color:#fff}.igo-zoom-button-container[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]:hover{background-color:#efefef}.igo-zoom-button-container[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]:first-child{margin-bottom:2px}button[_ngcontent-%COMP%], [_nghost-%COMP%]     button .mat-button-ripple-round{border-radius:0}"] });
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ZoomButtonComponent, [{
             type: Component,
-            args: [{ selector: 'igo-zoom-button', template: "<div class=\"igo-zoom-button-container\">\r\n  <button\r\n    mat-icon-button\r\n    [matTooltip]=\"'igo.geo.mapButtons.zoomIn' | translate: {zoom: zoom + 1}\"\r\n    matTooltipPosition=\"left\"\r\n    [color]=\"color\"\r\n    [disabled]=\"zoom >= maxZoom\"\r\n    (click)=\"map.viewController.zoomIn()\">\r\n    <mat-icon svgIcon=\"plus\"></mat-icon>\r\n  </button>\r\n\r\n  <button\r\n    mat-icon-button\r\n    [matTooltip]=\"'igo.geo.mapButtons.zoomOut' | translate: {zoom: zoom - 1}\"\r\n    matTooltipPosition=\"left\"\r\n    [color]=\"color\"\r\n    [disabled]=\"zoom <= minZoom\"\r\n    (click)=\"map.viewController.zoomOut()\">\r\n    <mat-icon svgIcon=\"minus\"></mat-icon>\r\n  </button>\r\n</div>\r\n", styles: [".igo-zoom-button-container{width:40px}.igo-zoom-button-container button{background-color:#fff}.igo-zoom-button-container button:hover{background-color:#efefef}.igo-zoom-button-container button:first-child{margin-bottom:2px}button,:host ::ng-deep button .mat-button-ripple-round{border-radius:0}\n"] }]
+            args: [{ selector: 'igo-zoom-button', template: "<div class=\"igo-zoom-button-container\">\n  <button\n    mat-icon-button\n    [matTooltip]=\"'igo.geo.mapButtons.zoomIn' | translate: {zoom: zoom + 1}\"\n    matTooltipPosition=\"left\"\n    [color]=\"color\"\n    [disabled]=\"zoom >= maxZoom\"\n    (click)=\"map.viewController.zoomIn()\">\n    <mat-icon svgIcon=\"plus\"></mat-icon>\n  </button>\n\n  <button\n    mat-icon-button\n    [matTooltip]=\"'igo.geo.mapButtons.zoomOut' | translate: {zoom: zoom - 1}\"\n    matTooltipPosition=\"left\"\n    [color]=\"color\"\n    [disabled]=\"zoom <= minZoom\"\n    (click)=\"map.viewController.zoomOut()\">\n    <mat-icon svgIcon=\"minus\"></mat-icon>\n  </button>\n</div>\n", styles: [".igo-zoom-button-container{width:40px}.igo-zoom-button-container button{background-color:#fff}.igo-zoom-button-container button:hover{background-color:#efefef}.igo-zoom-button-container button:first-child{margin-bottom:2px}button,:host ::ng-deep button .mat-button-ripple-round{border-radius:0}\n"] }]
         }], function () { return []; }, { map: [{
                 type: Input
             }], color: [{
@@ -9321,7 +9322,7 @@ MenuButtonComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MenuBut
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MenuButtonComponent, [{
             type: Component,
-            args: [{ selector: 'igo-menu-button', template: "<button\r\n    mat-icon-button\r\n    id= \"menu-button\"\r\n    [ngClass]=\"menuButtonClass\"\r\n    tooltip-position=\"below\"\r\n    matTooltipShowDelay=\"500\"\r\n    [matTooltip]=\"(sidenavOpened ? 'menu.close' : 'menu.open') | translate\"\r\n    (click)=\"onToggleSidenavClick()\">\r\n    <mat-icon svgIcon=\"menu\"></mat-icon>\r\n</button>\r\n", styles: ["#menu-button{background-color:#fff;border-radius:0;left:5px;top:5px}#menu-button.menu-button-reverse-color{height:40px;border-radius:0;height:45px;width:48px;left:0px;top:3px}#menu-button.menu-button-reverse-color-close{border-radius:0;left:5px;top:5px}mat-icon.disabled{color:#00000061}#menu-button ::ng-deep div.mat-button-ripple-round{border-radius:0}\n"] }]
+            args: [{ selector: 'igo-menu-button', template: "<button\n    mat-icon-button\n    id= \"menu-button\"\n    [ngClass]=\"menuButtonClass\"\n    tooltip-position=\"below\"\n    matTooltipShowDelay=\"500\"\n    [matTooltip]=\"(sidenavOpened ? 'menu.close' : 'menu.open') | translate\"\n    (click)=\"onToggleSidenavClick()\">\n    <mat-icon svgIcon=\"menu\"></mat-icon>\n</button>\n", styles: ["#menu-button{background-color:#fff;border-radius:0;left:5px;top:5px}#menu-button.menu-button-reverse-color{height:40px;border-radius:0;height:45px;width:48px;left:0px;top:3px}#menu-button.menu-button-reverse-color-close{border-radius:0;left:5px;top:5px}mat-icon.disabled{color:#00000061}#menu-button ::ng-deep div.mat-button-ripple-round{border-radius:0}\n"] }]
         }], function () { return [{ type: i2$1.ConfigService }]; }, { sidenavOpened: [{
                 type: Input
             }], openSidenav: [{
@@ -9399,7 +9400,7 @@ GeolocateButtonComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Ge
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(GeolocateButtonComponent, [{
             type: Component,
-            args: [{ selector: 'igo-geolocate-button', template: "<div class=\"igo-geolocate-button-container\" *ngIf=\"map.geolocationController\">\r\n  <button\r\n    mat-icon-button\r\n    [matTooltip]=\"map.geolocationController.tracking ? ('igo.geo.mapButtons.geolocateInactive' | translate) :('igo.geo.mapButtons.geolocate' | translate)\"\r\n    matTooltipPosition=\"left\"\r\n    [color]=\"color\"\r\n    (click)=\"onGeolocationClick()\">\r\n    <mat-icon svgIcon=\"{{icon$ | async}}\"></mat-icon>\r\n  </button>\r\n</div>\r\n", styles: [".igo-geolocate-button-container{width:40px;background-color:#fff}.igo-geolocate-button-container:hover{background-color:#efefef}button,:host ::ng-deep button .mat-button-ripple-round{border-radius:0}\n"] }]
+            args: [{ selector: 'igo-geolocate-button', template: "<div class=\"igo-geolocate-button-container\" *ngIf=\"map.geolocationController\">\n  <button\n    mat-icon-button\n    [matTooltip]=\"map.geolocationController.tracking ? ('igo.geo.mapButtons.geolocateInactive' | translate) :('igo.geo.mapButtons.geolocate' | translate)\"\n    matTooltipPosition=\"left\"\n    [color]=\"color\"\n    (click)=\"onGeolocationClick()\">\n    <mat-icon svgIcon=\"{{icon$ | async}}\"></mat-icon>\n  </button>\n</div>\n", styles: [".igo-geolocate-button-container{width:40px;background-color:#fff}.igo-geolocate-button-container:hover{background-color:#efefef}button,:host ::ng-deep button .mat-button-ripple-round{border-radius:0}\n"] }]
         }], function () { return [{ type: i2$1.ConfigService }]; }, { map: [{
                 type: Input
             }], color: [{
@@ -9467,7 +9468,7 @@ HomeExtentButtonComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: H
             }] });
 })();
 
-const _c0$j = function (a0) { return [a0]; };
+const _c0$k = function (a0) { return [a0]; };
 function OfflineButtonComponent_div_0_Template(rf, ctx) {
     if (rf & 1) {
         const _r2 = i0.ɵɵgetCurrentView();
@@ -9481,7 +9482,7 @@ function OfflineButtonComponent_div_0_Template(rf, ctx) {
     if (rf & 2) {
         const ctx_r0 = i0.ɵɵnextContext();
         i0.ɵɵadvance(2);
-        i0.ɵɵproperty("matTooltip", ctx_r0.checked ? i0.ɵɵpipeBind1(3, 3, "igo.geo.mapButtons.online") : i0.ɵɵpipeBind1(4, 5, "igo.geo.mapButtons.offline"))("ngClass", i0.ɵɵpureFunction1(7, _c0$j, ctx_r0.btnStyle))("color", ctx_r0.checked ? ctx_r0.color : i0.ɵɵpureFunction1(9, _c0$j, ctx_r0.colorOff));
+        i0.ɵɵproperty("matTooltip", ctx_r0.checked ? i0.ɵɵpipeBind1(3, 3, "igo.geo.mapButtons.online") : i0.ɵɵpipeBind1(4, 5, "igo.geo.mapButtons.offline"))("ngClass", i0.ɵɵpureFunction1(7, _c0$k, ctx_r0.btnStyle))("color", ctx_r0.checked ? ctx_r0.color : i0.ɵɵpureFunction1(9, _c0$k, ctx_r0.colorOff));
     }
 }
 class OfflineButtonComponent {
@@ -9531,7 +9532,7 @@ OfflineButtonComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Offl
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(OfflineButtonComponent, [{
             type: Component,
-            args: [{ selector: 'igo-offline-button', template: "<div *ngIf=\"visible\" class=\"igo-user-button-container\">\r\n  <div>\r\n    <button\r\n      mat-icon-button\r\n      [matTooltip]=\"checked ? ('igo.geo.mapButtons.online' | translate): ('igo.geo.mapButtons.offline' | translate)\"\r\n      matTooltipPosition=\"left\"\r\n      [ngClass]=\"[btnStyle]\"\r\n      [color]=\"checked ? color : [colorOff]\"\r\n      (click)=\"onToggle()\"\r\n      (click)=\"map.onOfflineToggle(check)\">\r\n      <mat-icon svgIcon=\"wifi-strength-off\"></mat-icon>\r\n    </button>\r\n  </div>\r\n</div>", styles: [".baseStyle{width:40px;background-color:#fff}.baseStyle:hover{background-color:#efefef}.toggleStyle{width:40px;background-color:#b9b9b9}button,:host ::ng-deep button .mat-button-ripple-round{border-radius:0}\n"] }]
+            args: [{ selector: 'igo-offline-button', template: "<div *ngIf=\"visible\" class=\"igo-user-button-container\">\n  <div>\n    <button\n      mat-icon-button\n      [matTooltip]=\"checked ? ('igo.geo.mapButtons.online' | translate): ('igo.geo.mapButtons.offline' | translate)\"\n      matTooltipPosition=\"left\"\n      [ngClass]=\"[btnStyle]\"\n      [color]=\"checked ? color : [colorOff]\"\n      (click)=\"onToggle()\"\n      (click)=\"map.onOfflineToggle(check)\">\n      <mat-icon svgIcon=\"wifi-strength-off\"></mat-icon>\n    </button>\n  </div>\n</div>", styles: [".baseStyle{width:40px;background-color:#fff}.baseStyle:hover{background-color:#efefef}.toggleStyle{width:40px;background-color:#b9b9b9}button,:host ::ng-deep button .mat-button-ripple-round{border-radius:0}\n"] }]
         }], function () { return [{ type: i2$1.ConfigService }]; }, { change: [{
                 type: Output
             }], map: [{
@@ -9644,7 +9645,7 @@ WakeLockButtonComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Wak
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(WakeLockButtonComponent, [{
             type: Component,
-            args: [{ selector: 'igo-wake-lock-button', template: "<div *ngIf=\"visible\" class=\"igo-wake-lock-button-container\">\r\n  <div>\r\n    <button \r\n      [color]=\"color\"\r\n      mat-icon-button\r\n      [matTooltip]=\"enabled ? ('igo.geo.mapButtons.preventSreenLock' | translate): ('igo.geo.mapButtons.letScreenLock' | translate)\"\r\n      matTooltipPosition=\"left\"\r\n      (click)=\"toggleWakeLock()\">\r\n      <mat-icon svgIcon=\"{{icon$ | async}}\"></mat-icon>\r\n    </button>\r\n  </div>\r\n</div>", styles: [".igo-wake-lock-button-container{width:40px;background-color:#fff}.igo-wake-lock-button-container:hover{background-color:#efefef}button,:host ::ng-deep button .mat-button-ripple-round{border-radius:0}\n"] }]
+            args: [{ selector: 'igo-wake-lock-button', template: "<div *ngIf=\"visible\" class=\"igo-wake-lock-button-container\">\n  <div>\n    <button \n      [color]=\"color\"\n      mat-icon-button\n      [matTooltip]=\"enabled ? ('igo.geo.mapButtons.preventSreenLock' | translate): ('igo.geo.mapButtons.letScreenLock' | translate)\"\n      matTooltipPosition=\"left\"\n      (click)=\"toggleWakeLock()\">\n      <mat-icon svgIcon=\"{{icon$ | async}}\"></mat-icon>\n    </button>\n  </div>\n</div>", styles: [".igo-wake-lock-button-container{width:40px;background-color:#fff}.igo-wake-lock-button-container:hover{background-color:#efefef}button,:host ::ng-deep button .mat-button-ripple-round{border-radius:0}\n"] }]
         }], function () { return [{ type: i2$1.ConfigService }, { type: i2$1.StorageService }]; }, { color: [{
                 type: Input
             }], map: [{
@@ -9697,7 +9698,7 @@ function BaseLayersSwitcherComponent_div_0_igo_mini_basemap_2_Template(rf, ctx)
         i0.ɵɵproperty("map", ctx_r2.map)("baseLayer", baseLayer_r3)("title", ctx_r2.baseLayers.length > 2 && !ctx_r2.expand ? i0.ɵɵpipeBind1(1, 5, "igo.geo.baselayersSwitcher.title") : baseLayer_r3.title)("display", ctx_r2.expand || i_r4 === 0 && !ctx_r2.useStaticIcon)("disabled", !ctx_r2.expand && ctx_r2.baseLayers.length > 1);
     }
 }
-const _c0$i = function (a0) { return { "container-expand": a0 }; };
+const _c0$j = function (a0) { return { "container-expand": a0 }; };
 function BaseLayersSwitcherComponent_div_0_Template(rf, ctx) {
     if (rf & 1) {
         const _r6 = i0.ɵɵgetCurrentView();
@@ -9711,7 +9712,7 @@ function BaseLayersSwitcherComponent_div_0_Template(rf, ctx) {
     }
     if (rf & 2) {
         const ctx_r0 = i0.ɵɵnextContext();
-        i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(4, _c0$i, ctx_r0.expand))("@baseLayerSwitcherState", ctx_r0.expand ? "expand" : ctx_r0.useStaticIcon ? "collapseIcon" : "collapseMap");
+        i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(4, _c0$j, ctx_r0.expand))("@baseLayerSwitcherState", ctx_r0.expand ? "expand" : ctx_r0.useStaticIcon ? "collapseIcon" : "collapseMap");
         i0.ɵɵadvance(1);
         i0.ɵɵproperty("ngIf", ctx_r0.useStaticIcon && !ctx_r0.expand && ctx_r0.showButton);
         i0.ɵɵadvance(1);
@@ -9771,7 +9772,7 @@ BaseLayersSwitcherComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(BaseLayersSwitcherComponent, [{
             type: Component,
-            args: [{ selector: 'igo-baselayers-switcher', animations: [baseLayersSwitcherSlideInOut()], template: "<div *ngIf=\"baseLayers.length > 0\"\r\n     class=\"igo-baselayers-switcher-container\"\r\n     [ngClass]=\"{'container-expand': expand}\"\r\n     [@baseLayerSwitcherState]=\"expand ? 'expand' : useStaticIcon ? 'collapseIcon' : 'collapseMap'\"\r\n     (@baseLayerSwitcherState.start)=\"showButton=false\"\r\n     (@baseLayerSwitcherState.done)=\"showButton=true\"\r\n     (click)=\"collapseOrExpand()\">\r\n\r\n     <div *ngIf=\"useStaticIcon && !expand && showButton\" class=\"igo-baselayers-switcher-button-container\">\r\n       <button\r\n         mat-icon-button\r\n         [matTooltip]=\"'igo.geo.mapButtons.baselayerSwitcher' | translate\"\r\n         matTooltipPosition=\"right\"\r\n         color=\"primary\">\r\n         <mat-icon svgIcon=\"image-multiple\"></mat-icon>\r\n       </button>\r\n     </div>\r\n\r\n     <igo-mini-basemap class=\"mat-typography\" *ngFor=\"let baseLayer of baseLayers; let i = index\"\r\n       [map]=\"map\"\r\n       [baseLayer]=\"baseLayer\"\r\n       [title]=\"(baseLayers.length > 2 && !expand) ? ('igo.geo.baselayersSwitcher.title' | translate) : baseLayer.title\"\r\n       [display]=\"expand || (i === 0 && !useStaticIcon)\"\r\n       [disabled]=\"!expand && baseLayers.length > 1\">\r\n     </igo-mini-basemap>\r\n\r\n    <div class=\"more-baselayers\">\r\n      <mat-icon class=\"material-icons mat-icon mat-list-avatar\" color=\"primary\" svgIcon=\"menu-down\"></mat-icon>\r\n    </div>\r\n\r\n</div>\r\n", styles: [".igo-baselayers-switcher-container{height:auto;position:relative}.container-expand{overflow:hidden;border-width:0}.more-baselayers{width:80px;height:20px;background-color:#fff;text-align:center;cursor:pointer}.more-baselayers:hover{background-color:#efefef}.igo-baselayers-switcher-button-container{width:40px;background-color:#fff}.igo-baselayers-switcher-button-container:hover{background-color:#efefef}button,:host ::ng-deep button .mat-button-ripple-round{border-radius:0}\n"] }]
+            args: [{ selector: 'igo-baselayers-switcher', animations: [baseLayersSwitcherSlideInOut()], template: "<div *ngIf=\"baseLayers.length > 0\"\n     class=\"igo-baselayers-switcher-container\"\n     [ngClass]=\"{'container-expand': expand}\"\n     [@baseLayerSwitcherState]=\"expand ? 'expand' : useStaticIcon ? 'collapseIcon' : 'collapseMap'\"\n     (@baseLayerSwitcherState.start)=\"showButton=false\"\n     (@baseLayerSwitcherState.done)=\"showButton=true\"\n     (click)=\"collapseOrExpand()\">\n\n     <div *ngIf=\"useStaticIcon && !expand && showButton\" class=\"igo-baselayers-switcher-button-container\">\n       <button\n         mat-icon-button\n         [matTooltip]=\"'igo.geo.mapButtons.baselayerSwitcher' | translate\"\n         matTooltipPosition=\"right\"\n         color=\"primary\">\n         <mat-icon svgIcon=\"image-multiple\"></mat-icon>\n       </button>\n     </div>\n\n     <igo-mini-basemap class=\"mat-typography\" *ngFor=\"let baseLayer of baseLayers; let i = index\"\n       [map]=\"map\"\n       [baseLayer]=\"baseLayer\"\n       [title]=\"(baseLayers.length > 2 && !expand) ? ('igo.geo.baselayersSwitcher.title' | translate) : baseLayer.title\"\n       [display]=\"expand || (i === 0 && !useStaticIcon)\"\n       [disabled]=\"!expand && baseLayers.length > 1\">\n     </igo-mini-basemap>\n\n    <div class=\"more-baselayers\">\n      <mat-icon class=\"material-icons mat-icon mat-list-avatar\" color=\"primary\" svgIcon=\"menu-down\"></mat-icon>\n    </div>\n\n</div>\n", styles: [".igo-baselayers-switcher-container{height:auto;position:relative}.container-expand{overflow:hidden;border-width:0}.more-baselayers{width:80px;height:20px;background-color:#fff;text-align:center;cursor:pointer}.more-baselayers:hover{background-color:#efefef}.igo-baselayers-switcher-button-container{width:40px;background-color:#fff}.igo-baselayers-switcher-button-container:hover{background-color:#efefef}button,:host ::ng-deep button .mat-button-ripple-round{border-radius:0}\n"] }]
         }], function () { return [{ type: i2$1.MediaService }]; }, { map: [{
                 type: Input
             }], useStaticIcon: [{
@@ -10305,7 +10306,7 @@ MiniBaseMapComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MiniBa
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MiniBaseMapComponent, [{
             type: Component,
-            args: [{ selector: 'igo-mini-basemap', template: "<div class=\"igo-mini-basemap-container\">\r\n\r\n  <div *ngIf=\"display\" (click)=\"changeBaseLayer(baseLayer)\">\r\n    <igo-map-browser [map]=\"basemap\"></igo-map-browser>\r\n    <div *ngIf='title' class='igo-mini-basemap-title'> {{title}} </div>\r\n  </div>\r\n\r\n</div>\r\n", styles: [".igo-mini-basemap-container{width:80px;height:80px;background-color:#ffffff03;border:2px solid white;box-shadow:0 1px 4px #0000004d;cursor:pointer;margin-top:5px}.igo-mini-basemap-container:hover .igo-mini-basemap-title{color:#000;text-shadow:0 0 5px white}.igo-mini-basemap-container>div{width:100%;height:100%}.igo-mini-basemap-title{position:relative;top:-76px;height:76px;width:76px;text-align:center;vertical-align:bottom;color:#fff;text-shadow:0 0 5px black;white-space:normal;display:flex;align-items:flex-end;justify-content:center}\n"] }]
+            args: [{ selector: 'igo-mini-basemap', template: "<div class=\"igo-mini-basemap-container\">\n\n  <div *ngIf=\"display\" (click)=\"changeBaseLayer(baseLayer)\">\n    <igo-map-browser [map]=\"basemap\"></igo-map-browser>\n    <div *ngIf='title' class='igo-mini-basemap-title'> {{title}} </div>\n  </div>\n\n</div>\n", styles: [".igo-mini-basemap-container{width:80px;height:80px;background-color:#ffffff03;border:2px solid white;box-shadow:0 1px 4px #0000004d;cursor:pointer;margin-top:5px}.igo-mini-basemap-container:hover .igo-mini-basemap-title{color:#000;text-shadow:0 0 5px white}.igo-mini-basemap-container>div{width:100%;height:100%}.igo-mini-basemap-title{position:relative;top:-76px;height:76px;width:76px;text-align:center;vertical-align:bottom;color:#fff;text-shadow:0 0 5px black;white-space:normal;display:flex;align-items:flex-end;justify-content:center}\n"] }]
         }], function () { return [{ type: LayerService }, { type: i0.ApplicationRef }]; }, { map: [{
                 type: Input
             }], disabled: [{
@@ -10319,7 +10320,7 @@ MiniBaseMapComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MiniBa
             }] });
 })();
 
-const _c0$h = function (a0, a1) { return { azimuth: a0, rotation: a1 }; };
+const _c0$i = function (a0, a1) { return { azimuth: a0, rotation: a1 }; };
 function RotationButtonComponent_div_0_Template(rf, ctx) {
     if (rf & 1) {
         const _r2 = i0.ɵɵgetCurrentView();
@@ -10336,7 +10337,7 @@ function RotationButtonComponent_div_0_Template(rf, ctx) {
     }
     if (rf & 2) {
         const ctx_r0 = i0.ɵɵnextContext();
-        i0.ɵɵproperty("matTooltip", i0.ɵɵpipeBind1(1, 4, ctx_r0.rotated$) ? i0.ɵɵpipeBind2(2, 6, "igo.geo.mapButtons.resetRotation", i0.ɵɵpureFunction2(15, _c0$h, ctx_r0.azimuthRounded, ctx_r0.rotationRounded)) : i0.ɵɵpipeBind1(3, 9, "igo.geo.mapButtons.tipRotation"));
+        i0.ɵɵproperty("matTooltip", i0.ɵɵpipeBind1(1, 4, ctx_r0.rotated$) ? i0.ɵɵpipeBind2(2, 6, "igo.geo.mapButtons.resetRotation", i0.ɵɵpureFunction2(15, _c0$i, ctx_r0.azimuthRounded, ctx_r0.rotationRounded)) : i0.ɵɵpipeBind1(3, 9, "igo.geo.mapButtons.tipRotation"));
         i0.ɵɵadvance(4);
         i0.ɵɵproperty("color", ctx_r0.color)("disabled", i0.ɵɵpipeBind1(5, 11, ctx_r0.rotated$) === false);
         i0.ɵɵadvance(2);
@@ -10378,7 +10379,7 @@ RotationButtonComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Rot
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(RotationButtonComponent, [{
             type: Component,
-            args: [{ selector: 'igo-rotation-button', template: "<div *ngIf=\"((rotated$ | async) && !showIfNoRotation) || showIfNoRotation\" class=\"igo-rotation-button-container\"\r\n  [matTooltip]=\"(rotated$ | async) ? ('igo.geo.mapButtons.resetRotation' | translate: {azimuth: azimuthRounded, rotation: rotationRounded}): ('igo.geo.mapButtons.tipRotation' | translate)\"\r\n  matTooltipPosition=\"left\">\r\n  <button mat-icon-button matTooltipPosition=\"left\" [color]=\"color\" [disabled]=\"(rotated$ | async) === false\"\r\n    (click)=\"map.viewController.resetRotation()\">\r\n    <mat-icon [ngStyle]=\"currentStyle$ | async\" svgIcon=\"navigation\">\r\n    </mat-icon>\r\n  </button>\r\n</div>\r\n", styles: [".igo-rotation-button-container{width:40px;background-color:#fff}.igo-rotation-button-container:hover{background-color:#efefef}button,:host ::ng-deep button .mat-button-ripple-round{border-radius:0}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){button:disabled,:host ::ng-deep button .mat-button-ripple-round:disabled{display:none}}\n"] }]
+            args: [{ selector: 'igo-rotation-button', template: "<div *ngIf=\"((rotated$ | async) && !showIfNoRotation) || showIfNoRotation\" class=\"igo-rotation-button-container\"\n  [matTooltip]=\"(rotated$ | async) ? ('igo.geo.mapButtons.resetRotation' | translate: {azimuth: azimuthRounded, rotation: rotationRounded}): ('igo.geo.mapButtons.tipRotation' | translate)\"\n  matTooltipPosition=\"left\">\n  <button mat-icon-button matTooltipPosition=\"left\" [color]=\"color\" [disabled]=\"(rotated$ | async) === false\"\n    (click)=\"map.viewController.resetRotation()\">\n    <mat-icon [ngStyle]=\"currentStyle$ | async\" svgIcon=\"navigation\">\n    </mat-icon>\n  </button>\n</div>\n", styles: [".igo-rotation-button-container{width:40px;background-color:#fff}.igo-rotation-button-container:hover{background-color:#efefef}button,:host ::ng-deep button .mat-button-ripple-round{border-radius:0}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){button:disabled,:host ::ng-deep button .mat-button-ripple-round:disabled{display:none}}\n"] }]
         }], function () { return []; }, { map: [{
                 type: Input
             }], showIfNoRotation: [{
@@ -10576,7 +10577,7 @@ SwipeControlComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Swipe
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SwipeControlComponent, [{
             type: Component,
-            args: [{ selector: 'igo-swipe-control', template: "<div class=\"igo-swipe-control-container\"  id=\"igo-layer-swipe\"\r\n  (mousedown)=\"dragDown($event)\"\r\n  (mouseup)=\"closeDragMouseElement()\"\r\n  (touchstart)=\"dragDown($event)\"\r\n  (touchend)=\"closeDragTouchElement()\">\r\n  <div class=\"igo-swipe-control-line\" ></div>\r\n  \r\n  <div class=\"igo-swipe-control-arrows\" id=\"arrows\">\r\n    <div class=\"igo-arrow-left\"></div>\r\n    <div class=\"igo-arrow-right\"></div>\r\n  </div>\r\n</div>\r\n", styles: [".igo-swipe-control-container{position:absolute;width:80px;height:100%;top:0%;left:50%;cursor:-webkit-grab;cursor:grab;z-index:1;transform:translate(-40px)}.igo-swipe-control-container:active{cursor:-webkit-grabbing;cursor:grabbing}.igo-swipe-control-line{position:absolute;width:4px;height:100%;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#5e5a5a}.igo-swipe-control-arrows{position:absolute;width:32px;height:32px;left:50%;top:50%;transform:translate(-50%,-50%);margin-top:-16px;padding:5px 4px;background-color:#5e5a5a;z-index:2;-webkit-tap-highlight-color:rgba(0,0,0,0)}.igo-swipe-control-arrows div{display:inline-block;width:0;height:0;border-top:10px solid transparent;border-bottom:10px solid transparent}.igo-swipe-control-arrows .igo-arrow-right{margin-left:4px;border-left:10px solid white}.igo-swipe-control-arrows .igo-arrow-left{border-right:10px solid white}.igo-swipe-control-arrows:active{display:none}\n"] }]
+            args: [{ selector: 'igo-swipe-control', template: "<div class=\"igo-swipe-control-container\"  id=\"igo-layer-swipe\"\n  (mousedown)=\"dragDown($event)\"\n  (mouseup)=\"closeDragMouseElement()\"\n  (touchstart)=\"dragDown($event)\"\n  (touchend)=\"closeDragTouchElement()\">\n  <div class=\"igo-swipe-control-line\" ></div>\n  \n  <div class=\"igo-swipe-control-arrows\" id=\"arrows\">\n    <div class=\"igo-arrow-left\"></div>\n    <div class=\"igo-arrow-right\"></div>\n  </div>\n</div>\n", styles: [".igo-swipe-control-container{position:absolute;width:80px;height:100%;top:0%;left:50%;cursor:-webkit-grab;cursor:grab;z-index:1;transform:translate(-40px)}.igo-swipe-control-container:active{cursor:-webkit-grabbing;cursor:grabbing}.igo-swipe-control-line{position:absolute;width:4px;height:100%;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#5e5a5a}.igo-swipe-control-arrows{position:absolute;width:32px;height:32px;left:50%;top:50%;transform:translate(-50%,-50%);margin-top:-16px;padding:5px 4px;background-color:#5e5a5a;z-index:2;-webkit-tap-highlight-color:rgba(0,0,0,0)}.igo-swipe-control-arrows div{display:inline-block;width:0;height:0;border-top:10px solid transparent;border-bottom:10px solid transparent}.igo-swipe-control-arrows .igo-arrow-right{margin-left:4px;border-left:10px solid white}.igo-swipe-control-arrows .igo-arrow-left{border-right:10px solid white}.igo-swipe-control-arrows:active{display:none}\n"] }]
         }], function () { return []; }, { map: [{
                 type: Input
             }] });
@@ -10628,7 +10629,7 @@ MapCenterComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MapCente
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MapCenterComponent, [{
             type: Component,
-            args: [{ selector: 'igo-map-center', template: "<div\r\n    class=\"mapCenter\"\r\n    id=\"mapCenter\">\r\n    <div class=\"vertical\"></div>\r\n    <div class=\"horizontal\"></div>\r\n</div>\r\n", styles: [".mapCenter{width:30px;height:30px;position:absolute;top:50%;left:50%;transform:translate(-15px,-15px);pointer-events:none}.mapCenter .vertical,.mapCenter .horizontal{width:4px;height:30px;position:absolute;left:13px;background-color:#000}.mapCenter .horizontal{transform:rotate(90deg)}\n"] }]
+            args: [{ selector: 'igo-map-center', template: "<div\n    class=\"mapCenter\"\n    id=\"mapCenter\">\n    <div class=\"vertical\"></div>\n    <div class=\"horizontal\"></div>\n</div>\n", styles: [".mapCenter{width:30px;height:30px;position:absolute;top:50%;left:50%;transform:translate(-15px,-15px);pointer-events:none}.mapCenter .vertical,.mapCenter .horizontal{width:4px;height:30px;position:absolute;left:13px;background-color:#000}.mapCenter .horizontal{transform:rotate(90deg)}\n"] }]
         }], function () { return []; }, { map: [{
                 type: Input
             }] });
@@ -10663,7 +10664,7 @@ InfoSectionComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: InfoSe
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(InfoSectionComponent, [{
             type: Component,
-            args: [{ selector: 'igo-info-section', template: "<div *ngIf=\"infoContent && infoContent.length\" class=\"infoSection\">\r\n    <pre>{{infoContent}}</pre>\r\n</div>", styles: [".infoSection{border-radius:10px;background-color:#6e6e6e66;padding:2.5px;position:absolute;text-align:center;top:5px;left:50%;text-shadow:0 0 5px white,0 0 10px white,0 0 15px white}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){.infoSection{top:50px;left:10%}}\n"] }]
+            args: [{ selector: 'igo-info-section', template: "<div *ngIf=\"infoContent && infoContent.length\" class=\"infoSection\">\n    <pre>{{infoContent}}</pre>\n</div>", styles: [".infoSection{border-radius:10px;background-color:#6e6e6e66;padding:2.5px;position:absolute;text-align:center;top:5px;left:50%;text-shadow:0 0 5px white,0 0 10px white,0 0 15px white}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){.infoSection{top:50px;left:10%}}\n"] }]
         }], function () { return []; }, { infoContent: [{
                 type: Input
             }] });
@@ -12814,7 +12815,7 @@ CatalogBrowserComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Cat
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CatalogBrowserComponent, [{
             type: Component,
-            args: [{ selector: 'igo-catalog-browser', changeDetection: ChangeDetectionStrategy.OnPush, template: "<igo-list [navigation]=\"false\" [selection]=\"false\">\r\n  <ng-template ngFor let-item [ngForOf]=\"store.view.all$() | async\">\r\n    <ng-container *ngIf=\"isGroup(item)\">\r\n      <igo-catalog-browser-group\r\n        [catalog]=\"catalog\"\r\n        [group]=\"item\"\r\n        [state]=\"store.state\"\r\n        [resolution]=\"resolution$ | async\"\r\n        [catalogAllowLegend]=\"catalogAllowLegend\"\r\n        [collapsed]=\"(store.count === 1) ? false : true\"\r\n        [toggleCollapsed]=\"toggleCollapsedGroup\"\r\n        (addedChange)=\"onGroupAddedChange($event)\"\r\n        (layerAddedChange)=\"onLayerAddedChange($event)\">\r\n      </igo-catalog-browser-group>\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"isLayer(item)\">\r\n      <igo-catalog-browser-layer\r\n        igoListItem\r\n        [layer]=\"item\"\r\n        [resolution]=\"resolution$ | async\"\r\n        [catalogAllowLegend]=\"catalogAllowLegend\"\r\n        [added]=\"store.state.get(item).added\"\r\n        (addedChange)=\"onLayerAddedChange($event)\">\r\n      </igo-catalog-browser-layer>\r\n    </ng-container>\r\n  </ng-template>\r\n</igo-list>\r\n" }]
+            args: [{ selector: 'igo-catalog-browser', changeDetection: ChangeDetectionStrategy.OnPush, template: "<igo-list [navigation]=\"false\" [selection]=\"false\">\n  <ng-template ngFor let-item [ngForOf]=\"store.view.all$() | async\">\n    <ng-container *ngIf=\"isGroup(item)\">\n      <igo-catalog-browser-group\n        [catalog]=\"catalog\"\n        [group]=\"item\"\n        [state]=\"store.state\"\n        [resolution]=\"resolution$ | async\"\n        [catalogAllowLegend]=\"catalogAllowLegend\"\n        [collapsed]=\"(store.count === 1) ? false : true\"\n        [toggleCollapsed]=\"toggleCollapsedGroup\"\n        (addedChange)=\"onGroupAddedChange($event)\"\n        (layerAddedChange)=\"onLayerAddedChange($event)\">\n      </igo-catalog-browser-group>\n    </ng-container>\n\n    <ng-container *ngIf=\"isLayer(item)\">\n      <igo-catalog-browser-layer\n        igoListItem\n        [layer]=\"item\"\n        [resolution]=\"resolution$ | async\"\n        [catalogAllowLegend]=\"catalogAllowLegend\"\n        [added]=\"store.state.get(item).added\"\n        (addedChange)=\"onLayerAddedChange($event)\">\n      </igo-catalog-browser-layer>\n    </ng-container>\n  </ng-template>\n</igo-list>\n" }]
         }], function () { return [{ type: LayerService }, { type: i0.ChangeDetectorRef }]; }, { catalogAllowLegend: [{
                 type: Input
             }], catalog: [{
@@ -12828,7 +12829,7 @@ CatalogBrowserComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Cat
             }] });
 })();
 
-const _c0$g = ["renderedLegend"];
+const _c0$h = ["renderedLegend"];
 function LayerLegendComponent_ng_container_0_ng_container_1_ng_container_1_div_2_mat_list_item_1_Template(rf, ctx) {
     if (rf & 1) {
         const _r15 = i0.ɵɵgetCurrentView();
@@ -13215,7 +13216,7 @@ class LayerLegendComponent {
 LayerLegendComponent.ɵfac = function LayerLegendComponent_Factory(t) { return new (t || LayerLegendComponent)(i0.ɵɵdirectiveInject(CapabilitiesService), i0.ɵɵdirectiveInject(i2$1.LanguageService), i0.ɵɵdirectiveInject(i2$1.ConfigService), i0.ɵɵdirectiveInject(i1$2.HttpClient), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
 LayerLegendComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LayerLegendComponent, selectors: [["igo-layer-legend"]], viewQuery: function LayerLegendComponent_Query(rf, ctx) {
         if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$g, 5);
+            i0.ɵɵviewQuery(_c0$h, 5);
         }
         if (rf & 2) {
             let _t;
@@ -13233,7 +13234,7 @@ LayerLegendComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LayerL
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LayerLegendComponent, [{
             type: Component,
-            args: [{ selector: 'igo-layer-legend', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"legendItems$ | async as items\">\r\n  <ng-container *ngIf=\"items.length; else noItems\">\r\n    <ng-container *ngFor=\"let item of items.slice().reverse()\" #renderedLegends>\r\n      <div *ngIf=\"getLegend; else noItems\">\r\n        <mat-list-item *ngIf=\"item.title\">\r\n          <mat-icon\r\n            id=\"legend-toggle\"\r\n            class=\"igo-chevron\"\r\n            mat-list-avatar\r\n            igoCollapse\r\n            [target]=\"legend\"\r\n            [collapsed]=\"(item.collapsed)\"\r\n            (toggle)=\"toggleLegendItem($event, item)\"\r\n            svgIcon=\"chevron-up\">\r\n          </mat-icon>\r\n          <h4 matLine>{{computeItemTitle(item) | async}} </h4>\r\n        </mat-list-item>\r\n        <div #legend class=\"igo-layer-legend\" [ngClass]=\"{'with-title': item.title}\">\r\n          <div *ngIf=\"currentStyle !== undefined\">\r\n              <mat-form-field>\r\n                <mat-select tooltip-position=\"below\" matTooltipShowDelay=\"500\"\r\n                  [matTooltip]=\"'igo.geo.layer.legend.selectStyle' | translate\" [(ngModel)]=\"currentStyle\"\r\n                  (selectionChange)=\"onChangeStyle()\">\r\n                  <mat-option *ngFor=\"let style of styles\" [value]=\"style.name\">{{style.title}}</mat-option>\r\n                </mat-select>\r\n            </mat-form-field>\r\n          </div>\r\n          <div *ngIf=\"!(item.collapsed)\">\r\n            <div *ngIf=\"item.url\">\r\n              <img igoImageError *ngIf=\"item.imgGraphValue\" hideError=\"true\" #renderedLegend id=\"{{item.title}}\" (load)=\"onLoadImage(item.title)\"\r\n                [src]=\"item.imgGraphValue\"\r\n                alt=\"{{'igo.geo.layer.legend.loadingLegendText' | translate}}\">\r\n              <small *ngIf=\"imagesHeight[item.title]<16\">\r\n                  {{'igo.geo.layer.legend.noLegendScale' | translate}}\r\n              </small>\r\n            </div>\r\n            <div\r\n              [ngStyle]=\"item.style\"\r\n              [innerHTML]=\"item.html | sanitizeHtml\"\r\n              *ngIf=\"item.html\">\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </ng-container>\r\n\r\n  <ng-template #noItems>\r\n    <small>\r\n      {{'igo.geo.layer.legend.noLegendText' | translate}}\r\n    </small>\r\n  </ng-template>\r\n\r\n</ng-container>\r\n", styles: [".igo-layer-legend.with-title{padding-left:18px}img:after{content:\" \";position:relative;height:17px;float:left;width:17px;top:-3px;right:19px;background-color:#fff;border:3px solid #f3f3f3;border-radius:50%;-webkit-animation:2s linear infinite spin;animation:2s linear infinite spin}@-moz-document url-prefix(){img:after{margin-left:19px}}@-webkit-keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
+            args: [{ selector: 'igo-layer-legend', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"legendItems$ | async as items\">\n  <ng-container *ngIf=\"items.length; else noItems\">\n    <ng-container *ngFor=\"let item of items.slice().reverse()\" #renderedLegends>\n      <div *ngIf=\"getLegend; else noItems\">\n        <mat-list-item *ngIf=\"item.title\">\n          <mat-icon\n            id=\"legend-toggle\"\n            class=\"igo-chevron\"\n            mat-list-avatar\n            igoCollapse\n            [target]=\"legend\"\n            [collapsed]=\"(item.collapsed)\"\n            (toggle)=\"toggleLegendItem($event, item)\"\n            svgIcon=\"chevron-up\">\n          </mat-icon>\n          <h4 matLine>{{computeItemTitle(item) | async}} </h4>\n        </mat-list-item>\n        <div #legend class=\"igo-layer-legend\" [ngClass]=\"{'with-title': item.title}\">\n          <div *ngIf=\"currentStyle !== undefined\">\n              <mat-form-field>\n                <mat-select tooltip-position=\"below\" matTooltipShowDelay=\"500\"\n                  [matTooltip]=\"'igo.geo.layer.legend.selectStyle' | translate\" [(ngModel)]=\"currentStyle\"\n                  (selectionChange)=\"onChangeStyle()\">\n                  <mat-option *ngFor=\"let style of styles\" [value]=\"style.name\">{{style.title}}</mat-option>\n                </mat-select>\n            </mat-form-field>\n          </div>\n          <div *ngIf=\"!(item.collapsed)\">\n            <div *ngIf=\"item.url\">\n              <img igoImageError *ngIf=\"item.imgGraphValue\" hideError=\"true\" #renderedLegend id=\"{{item.title}}\" (load)=\"onLoadImage(item.title)\"\n                [src]=\"item.imgGraphValue\"\n                alt=\"{{'igo.geo.layer.legend.loadingLegendText' | translate}}\">\n              <small *ngIf=\"imagesHeight[item.title]<16\">\n                  {{'igo.geo.layer.legend.noLegendScale' | translate}}\n              </small>\n            </div>\n            <div\n              [ngStyle]=\"item.style\"\n              [innerHTML]=\"item.html | sanitizeHtml\"\n              *ngIf=\"item.html\">\n            </div>\n          </div>\n        </div>\n      </div>\n    </ng-container>\n  </ng-container>\n\n  <ng-template #noItems>\n    <small>\n      {{'igo.geo.layer.legend.noLegendText' | translate}}\n    </small>\n  </ng-template>\n\n</ng-container>\n", styles: [".igo-layer-legend.with-title{padding-left:18px}img:after{content:\" \";position:relative;height:17px;float:left;width:17px;top:-3px;right:19px;background-color:#fff;border:3px solid #f3f3f3;border-radius:50%;-webkit-animation:2s linear infinite spin;animation:2s linear infinite spin}@-moz-document url-prefix(){img:after{margin-left:19px}}@-webkit-keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
         }], function () { return [{ type: CapabilitiesService }, { type: i2$1.LanguageService }, { type: i2$1.ConfigService }, { type: i1$2.HttpClient }, { type: i0.ChangeDetectorRef }]; }, { updateLegendOnResolutionChange: [{
                 type: Input
             }], renderedLegends: [{
@@ -13494,7 +13495,7 @@ CatalogBrowserLayerComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CatalogBrowserLayerComponent, [{
             type: Component,
-            args: [{ selector: 'igo-catalog-browser-layer', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-list-item>\r\n  <mat-icon *ngIf=\"haveGroup()\" mat-list-avatar svgIcon=\"blank\"></mat-icon>\r\n  <h4 mat-line matTooltipShowDelay=\"500\" [ngClass]=\"(catalogAllowLegend)?'igo-cataloglayer-title':''\" (click)=\"askForLegend($event)\" [matTooltip]=\"computeTitleTooltip()\">{{title}}</h4>\r\n\r\n    <button *ngIf=\"layer.externalProvider\"\r\n      disabled=\"true\"\r\n      mat-icon-button>\r\n    <mat-icon\r\n      class=\"igo-cataloglayer-external-icon\"\r\n      *ngIf=\"layer.externalProvider\"\r\n      tooltip-position=\"below\"\r\n      matTooltipShowDelay=\"500\"\r\n      [matTooltip]=\"'igo.geo.catalog.externalProvider.layer' | translate\"\r\n      color=\"primary\"\r\n      (click)=\"$event.stopPropagation()\"\r\n      svgIcon=\"earth-arrow-right\">\r\n    </mat-icon>\r\n  </button>\r\n  <igo-metadata-button [layer]=\"layer\"></igo-metadata-button>\r\n\r\n  <button\r\n    (mouseenter)=\"onMouseEvent($event)\" (mouseleave)=\"onMouseEvent($event)\"\r\n    mat-icon-button\r\n    tooltip-position=\"below\"\r\n    matTooltipShowDelay=\"500\"\r\n    [matTooltip]=\"computeTooltip() | translate\"\r\n    [color]=\"(isPreview$ | async) ? '' : added ? 'warn' : ''\"\r\n    (click)=\"onToggleClick($event)\">\r\n    <mat-icon\r\n       matBadge=\"icon\"\r\n       igoMatBadgeIcon=\"eye-off\"\r\n       igoMatBadgeInverseColor=\"true\"\r\n       [matBadgeHidden]=\"isInResolutionsRange()\"\r\n       matBadgeDisabled=\"true\"\r\n       matBadgeSize=\"small\"\r\n       matBadgePosition=\"after\"\r\n       [svgIcon]=\"(isPreview$ | async) ? 'plus' : added ? 'delete' : 'plus'\">\r\n    </mat-icon>\r\n  </button>\r\n\r\n</mat-list-item>\r\n\r\n<div #legend class=\"igo-cataloglayer-legend-container\">\r\n  <igo-layer-legend\r\n    *ngIf=\"(layerLegendShown$ | async) && (igoLayer$ | async) && catalogAllowLegend\"\r\n    [layer]=\"igoLayer$ | async\">\r\n  </igo-layer-legend>\r\n</div>\r\n", styles: [".igo-cataloglayer-title{cursor:pointer}.igo-cataloglayer-legend-container{padding-left:18px;width:calc(100% - 18px);margin-left:40px}.igo-cataloglayer-external-icon{cursor:help}\n"] }]
+            args: [{ selector: 'igo-catalog-browser-layer', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-list-item>\n  <mat-icon *ngIf=\"haveGroup()\" mat-list-avatar svgIcon=\"blank\"></mat-icon>\n  <h4 mat-line matTooltipShowDelay=\"500\" [ngClass]=\"(catalogAllowLegend)?'igo-cataloglayer-title':''\" (click)=\"askForLegend($event)\" [matTooltip]=\"computeTitleTooltip()\">{{title}}</h4>\n\n    <button *ngIf=\"layer.externalProvider\"\n      disabled=\"true\"\n      mat-icon-button>\n    <mat-icon\n      class=\"igo-cataloglayer-external-icon\"\n      *ngIf=\"layer.externalProvider\"\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"'igo.geo.catalog.externalProvider.layer' | translate\"\n      color=\"primary\"\n      (click)=\"$event.stopPropagation()\"\n      svgIcon=\"earth-arrow-right\">\n    </mat-icon>\n  </button>\n  <igo-metadata-button [layer]=\"layer\"></igo-metadata-button>\n\n  <button\n    (mouseenter)=\"onMouseEvent($event)\" (mouseleave)=\"onMouseEvent($event)\"\n    mat-icon-button\n    tooltip-position=\"below\"\n    matTooltipShowDelay=\"500\"\n    [matTooltip]=\"computeTooltip() | translate\"\n    [color]=\"(isPreview$ | async) ? '' : added ? 'warn' : ''\"\n    (click)=\"onToggleClick($event)\">\n    <mat-icon\n       matBadge=\"icon\"\n       igoMatBadgeIcon=\"eye-off\"\n       igoMatBadgeInverseColor=\"true\"\n       [matBadgeHidden]=\"isInResolutionsRange()\"\n       matBadgeDisabled=\"true\"\n       matBadgeSize=\"small\"\n       matBadgePosition=\"after\"\n       [svgIcon]=\"(isPreview$ | async) ? 'plus' : added ? 'delete' : 'plus'\">\n    </mat-icon>\n  </button>\n\n</mat-list-item>\n\n<div #legend class=\"igo-cataloglayer-legend-container\">\n  <igo-layer-legend\n    *ngIf=\"(layerLegendShown$ | async) && (igoLayer$ | async) && catalogAllowLegend\"\n    [layer]=\"igoLayer$ | async\">\n  </igo-layer-legend>\n</div>\n", styles: [".igo-cataloglayer-title{cursor:pointer}.igo-cataloglayer-legend-container{padding-left:18px;width:calc(100% - 18px);margin-left:40px}.igo-cataloglayer-external-icon{cursor:help}\n"] }]
         }], function () { return [{ type: LayerService }]; }, { resolution: [{
                 type: Input
             }], catalogAllowLegend: [{
@@ -13798,7 +13799,7 @@ CatalogBrowserGroupComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CatalogBrowserGroupComponent, [{
             type: Component,
-            args: [{ selector: 'igo-catalog-browser-group', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-list-item>\r\n  <mat-icon\r\n    mat-list-avatar\r\n    svgIcon=\"chevron-up\"\r\n    igoCollapse\r\n    class=\"igo-chevron\"\r\n    [target]=\"items\"\r\n    [collapsed]=\"collapsed\"\r\n    (toggle)=\"onToggleCollapsed($event)\">\r\n  </mat-icon>\r\n\r\n  <h4 class=\"igo-catalog-group-title\" id=\"catalog-group-title\" mat-line matTooltipShowDelay=\"500\" [matTooltip]=\"title\" (click)=\"onTitleClick()\">{{title}}</h4>\r\n\r\n  <button *ngIf=\"group.externalProvider\"\r\n    disabled=\"true\"\r\n    mat-icon-button>\r\n    <mat-icon\r\n      class=\"igo-cataloggroup-external-icon\"\r\n      *ngIf=\"group.externalProvider\"\r\n      tooltip-position=\"below\"\r\n      matTooltipShowDelay=\"500\"\r\n      [matTooltip]=\"'igo.geo.catalog.externalProvider.group' | translate\"\r\n      color=\"primary\"\r\n      (click)=\"$event.stopPropagation()\"\r\n      svgIcon=\"earth-arrow-right\">\r\n    </mat-icon>\r\n  </button>\r\n\r\n  <ng-container *ngIf=\"(added$ | async) && (preview$ | async) === false; else notadded\">\r\n    <button\r\n      mat-icon-button\r\n      tooltip-position=\"below\"\r\n      matTooltipShowDelay=\"500\"\r\n      [matTooltip]=\"'igo.geo.catalog.group.removeFromMap' | translate\"\r\n      color=\"warn\"\r\n      [disabled]=\"disabled$ | async\"\r\n      (click)=\"onToggleClick()\">\r\n      <mat-icon svgIcon=\"delete\"></mat-icon>\r\n    </button>\r\n  </ng-container>\r\n\r\n  <ng-template #notadded>\r\n    <button\r\n      mat-icon-button\r\n      tooltip-position=\"below\"\r\n      matTooltipShowDelay=\"500\"\r\n      [matTooltip]=\"'igo.geo.catalog.group.addToMap' | translate\"\r\n      [disabled]=\"disabled$ | async\"\r\n      (click)=\"onToggleClick()\">\r\n      <mat-icon svgIcon=\"plus\"></mat-icon>\r\n    </button>\r\n  </ng-template>\r\n</mat-list-item>\r\n\r\n<div #items>\r\n  <ng-template ngFor let-item [ngForOf]=\"store.view.all$() | async\">\r\n    <ng-container *ngIf=\"isGroup(item)\">\r\n      <!-- todo: add display ans manage CatalogItemGroup -->\r\n    </ng-container>\r\n    <ng-container *ngIf=\"isLayer(item)\">\r\n      <igo-catalog-browser-layer\r\n        igoListItem\r\n        [layer]=\"item\"\r\n        [resolution]=\"resolution\"\r\n        [catalogAllowLegend]=\"catalogAllowLegend\"\r\n        [added]=\"state.get(item).added\"\r\n        (addedLayerIsPreview)=\"onLayerPreview($event)\"\r\n        (addedChange)=\"onLayerAddedChange($event)\">\r\n      </igo-catalog-browser-layer>\r\n    </ng-container>\r\n  </ng-template>\r\n</div>\r\n", styles: [".igo-catalog-group-title{cursor:pointer;opacity:.9}#catalog-group-title{font-weight:700}.igo-cataloggroup-external-icon{cursor:help}\n"] }]
+            args: [{ selector: 'igo-catalog-browser-group', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-list-item>\n  <mat-icon\n    mat-list-avatar\n    svgIcon=\"chevron-up\"\n    igoCollapse\n    class=\"igo-chevron\"\n    [target]=\"items\"\n    [collapsed]=\"collapsed\"\n    (toggle)=\"onToggleCollapsed($event)\">\n  </mat-icon>\n\n  <h4 class=\"igo-catalog-group-title\" id=\"catalog-group-title\" mat-line matTooltipShowDelay=\"500\" [matTooltip]=\"title\" (click)=\"onTitleClick()\">{{title}}</h4>\n\n  <button *ngIf=\"group.externalProvider\"\n    disabled=\"true\"\n    mat-icon-button>\n    <mat-icon\n      class=\"igo-cataloggroup-external-icon\"\n      *ngIf=\"group.externalProvider\"\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"'igo.geo.catalog.externalProvider.group' | translate\"\n      color=\"primary\"\n      (click)=\"$event.stopPropagation()\"\n      svgIcon=\"earth-arrow-right\">\n    </mat-icon>\n  </button>\n\n  <ng-container *ngIf=\"(added$ | async) && (preview$ | async) === false; else notadded\">\n    <button\n      mat-icon-button\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"'igo.geo.catalog.group.removeFromMap' | translate\"\n      color=\"warn\"\n      [disabled]=\"disabled$ | async\"\n      (click)=\"onToggleClick()\">\n      <mat-icon svgIcon=\"delete\"></mat-icon>\n    </button>\n  </ng-container>\n\n  <ng-template #notadded>\n    <button\n      mat-icon-button\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"'igo.geo.catalog.group.addToMap' | translate\"\n      [disabled]=\"disabled$ | async\"\n      (click)=\"onToggleClick()\">\n      <mat-icon svgIcon=\"plus\"></mat-icon>\n    </button>\n  </ng-template>\n</mat-list-item>\n\n<div #items>\n  <ng-template ngFor let-item [ngForOf]=\"store.view.all$() | async\">\n    <ng-container *ngIf=\"isGroup(item)\">\n      <!-- todo: add display ans manage CatalogItemGroup -->\n    </ng-container>\n    <ng-container *ngIf=\"isLayer(item)\">\n      <igo-catalog-browser-layer\n        igoListItem\n        [layer]=\"item\"\n        [resolution]=\"resolution\"\n        [catalogAllowLegend]=\"catalogAllowLegend\"\n        [added]=\"state.get(item).added\"\n        (addedLayerIsPreview)=\"onLayerPreview($event)\"\n        (addedChange)=\"onLayerAddedChange($event)\">\n      </igo-catalog-browser-layer>\n    </ng-container>\n  </ng-template>\n</div>\n", styles: [".igo-catalog-group-title{cursor:pointer;opacity:.9}#catalog-group-title{font-weight:700}.igo-cataloggroup-external-icon{cursor:help}\n"] }]
         }], null, { catalog: [{
                 type: Input
             }], group: [{
@@ -13854,7 +13855,7 @@ function LayerItemComponent_mat_checkbox_1_Template(rf, ctx) {
         i0.ɵɵproperty("checked", ctx_r0.layerCheck);
     }
 }
-const _c0$f = function (a0) { return { disabled: a0 }; };
+const _c0$g = function (a0) { return { disabled: a0 }; };
 function LayerItemComponent_button_4_Template(rf, ctx) {
     if (rf & 1) {
         const _r9 = i0.ɵɵgetCurrentView();
@@ -13871,7 +13872,7 @@ function LayerItemComponent_button_4_Template(rf, ctx) {
         const ctx_r1 = i0.ɵɵnextContext();
         i0.ɵɵproperty("color", ctx_r1.layer.visible ? "primary" : "default")("matTooltip", i0.ɵɵpipeBind1(1, 5, ctx_r1.eyeTooltip));
         i0.ɵɵadvance(2);
-        i0.ɵɵproperty("matBadgeHidden", i0.ɵɵpipeBind1(3, 7, ctx_r1.queryBadgeHidden$))("ngClass", i0.ɵɵpureFunction1(13, _c0$f, i0.ɵɵpipeBind1(4, 9, ctx_r1.inResolutionRange$) === false))("svgIcon", i0.ɵɵpipeBind1(5, 11, ctx_r1.layer.visible$) ? "eye" : "eye-off");
+        i0.ɵɵproperty("matBadgeHidden", i0.ɵɵpipeBind1(3, 7, ctx_r1.queryBadgeHidden$))("ngClass", i0.ɵɵpureFunction1(13, _c0$g, i0.ɵɵpipeBind1(4, 9, ctx_r1.inResolutionRange$) === false))("svgIcon", i0.ɵɵpipeBind1(5, 11, ctx_r1.layer.visible$) ? "eye" : "eye-off");
     }
 }
 function LayerItemComponent_button_5_Template(rf, ctx) {
@@ -13890,7 +13891,7 @@ function LayerItemComponent_button_5_Template(rf, ctx) {
         const ctx_r2 = i0.ɵɵnextContext();
         i0.ɵɵproperty("color", ctx_r2.layer.visible ? "primary" : "default")("matTooltip", ctx_r2.layer.visible ? i0.ɵɵpipeBind1(1, 5, "igo.geo.layer.hideLayer") : i0.ɵɵpipeBind1(2, 7, "igo.geo.layer.showLayer"));
         i0.ɵɵadvance(3);
-        i0.ɵɵproperty("matBadgeHidden", i0.ɵɵpipeBind1(4, 9, ctx_r2.queryBadgeHidden$))("ngClass", i0.ɵɵpureFunction1(13, _c0$f, i0.ɵɵpipeBind1(5, 11, ctx_r2.inResolutionRange$) === false))("svgIcon", ctx_r2.layer.visible ? "eye" : "eye-off");
+        i0.ɵɵproperty("matBadgeHidden", i0.ɵɵpipeBind1(4, 9, ctx_r2.queryBadgeHidden$))("ngClass", i0.ɵɵpureFunction1(13, _c0$g, i0.ɵɵpipeBind1(5, 11, ctx_r2.inResolutionRange$) === false))("svgIcon", ctx_r2.layer.visible ? "eye" : "eye-off");
     }
 }
 function LayerItemComponent_button_6_Template(rf, ctx) {
@@ -14122,7 +14123,7 @@ LayerItemComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LayerIte
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LayerItemComponent, [{
             type: Component,
-            args: [{ selector: 'igo-layer-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-list-item class= \"igo-layer-list-item\">\r\n  <mat-checkbox *ngIf=\"selectionMode\"\r\n    class=\"layerCheck\"\r\n    mat-list-icon\r\n    (change)=\"check()\"\r\n    [checked]=\"layerCheck\">\r\n  </mat-checkbox>\r\n  <h4 (click)=\"toggleLegendOnClick()\" matLine class=\"igo-layer-title\" [matTooltip]=\"tooltipText\" matTooltipShowDelay=\"500\">{{layer.title}}</h4>\r\n\r\n  <button *ngIf=\"!selectionMode\"\r\n    mat-icon-button\r\n    [color]=\"layer.visible ? 'primary' : 'default'\"\r\n    collapsibleButton\r\n    tooltip-position=\"below\"\r\n    matTooltipShowDelay=\"500\"\r\n    [matTooltip]=\"eyeTooltip | translate\"\r\n    (click)=\"toggleVisibility()\">\r\n    <mat-icon\r\n      matBadge=\"?\"\r\n      matBadgeColor=\"accent\"\r\n      matBadgeSize=\"small\"\r\n      matBadgePosition=\"after\"\r\n      [matBadgeHidden]=\"queryBadgeHidden$ | async\"\r\n      [ngClass]=\"{disabled: (inResolutionRange$ | async)===false}\"\r\n      [svgIcon]=\"(layer.visible$ | async) ? 'eye' : 'eye-off'\">\r\n    </mat-icon>\r\n  </button>\r\n\r\n  <button *ngIf=\"selectionMode\" class=\"selection-eye\"\r\n  mat-icon-button\r\n  [color]=\"layer.visible ? 'primary' : 'default'\"\r\n  collapsibleButton\r\n  tooltip-position=\"below\"\r\n  matTooltipShowDelay=\"500\"\r\n  [matTooltip]=\"layer.visible ?\r\n                ('igo.geo.layer.hideLayer' | translate) :\r\n                ('igo.geo.layer.showLayer' | translate)\"\r\n  (click)=\"toggleVisibility()\">\r\n  <mat-icon\r\n    matBadge=\"?\"\r\n    matBadgeColor=\"accent\"\r\n    matBadgeSize=\"small\"\r\n    matBadgePosition=\"after\"\r\n    [matBadgeHidden]=\"queryBadgeHidden$ | async\"\r\n    [ngClass]=\"{disabled: (inResolutionRange$ | async)===false}\"\r\n    [svgIcon]=\"layer.visible ? 'eye' : 'eye-off'\">\r\n  </mat-icon>\r\n</button>\r\n\r\n  <button *ngIf=\"!selectionMode\"\r\n    class=\"actions-button\"\r\n    tooltip-position=\"below\"\r\n    matTooltipShowDelay=\"500\"\r\n    [matTooltip]= \"'igo.geo.layer.moreOptions' | translate\"\r\n    mat-icon-button\r\n    color=\"primary\"\r\n    (click)=\"toggleLayerTool()\">\r\n    <mat-icon svgIcon=\"dots-horizontal\"></mat-icon>\r\n  </button>\r\n</mat-list-item>\r\n\r\n<div #legend class=\"igo-layer-legend-container\">\r\n  <igo-layer-legend\r\n    *ngIf=\"showLegend$ | async\"\r\n    [layer]=\"layer\"\r\n    [updateLegendOnResolutionChange]=\"updateLegendOnResolutionChange\">\r\n  </igo-layer-legend>\r\n</div>\r\n", styles: [":host{overflow:hidden}mat-list-item ::ng-deep .mat-list-item-content .layerCheck{align-self:baseline;width:16px;padding-right:0}.igo-layer-list-item{height:46px;clear:both}.igo-layer-title{cursor:pointer}.igo-layer-legend-container{padding-left:18px;width:calc(100% - 18px)}mat-icon.disabled{color:#00000061}mat-icon[matBadge] ::ng-deep .mat-badge-content{font-size:12px}.selection-eye{padding-right:45px}\n"] }]
+            args: [{ selector: 'igo-layer-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-list-item class= \"igo-layer-list-item\">\n  <mat-checkbox *ngIf=\"selectionMode\"\n    class=\"layerCheck\"\n    mat-list-icon\n    (change)=\"check()\"\n    [checked]=\"layerCheck\">\n  </mat-checkbox>\n  <h4 (click)=\"toggleLegendOnClick()\" matLine class=\"igo-layer-title\" [matTooltip]=\"tooltipText\" matTooltipShowDelay=\"500\">{{layer.title}}</h4>\n\n  <button *ngIf=\"!selectionMode\"\n    mat-icon-button\n    [color]=\"layer.visible ? 'primary' : 'default'\"\n    collapsibleButton\n    tooltip-position=\"below\"\n    matTooltipShowDelay=\"500\"\n    [matTooltip]=\"eyeTooltip | translate\"\n    (click)=\"toggleVisibility()\">\n    <mat-icon\n      matBadge=\"?\"\n      matBadgeColor=\"accent\"\n      matBadgeSize=\"small\"\n      matBadgePosition=\"after\"\n      [matBadgeHidden]=\"queryBadgeHidden$ | async\"\n      [ngClass]=\"{disabled: (inResolutionRange$ | async)===false}\"\n      [svgIcon]=\"(layer.visible$ | async) ? 'eye' : 'eye-off'\">\n    </mat-icon>\n  </button>\n\n  <button *ngIf=\"selectionMode\" class=\"selection-eye\"\n  mat-icon-button\n  [color]=\"layer.visible ? 'primary' : 'default'\"\n  collapsibleButton\n  tooltip-position=\"below\"\n  matTooltipShowDelay=\"500\"\n  [matTooltip]=\"layer.visible ?\n                ('igo.geo.layer.hideLayer' | translate) :\n                ('igo.geo.layer.showLayer' | translate)\"\n  (click)=\"toggleVisibility()\">\n  <mat-icon\n    matBadge=\"?\"\n    matBadgeColor=\"accent\"\n    matBadgeSize=\"small\"\n    matBadgePosition=\"after\"\n    [matBadgeHidden]=\"queryBadgeHidden$ | async\"\n    [ngClass]=\"{disabled: (inResolutionRange$ | async)===false}\"\n    [svgIcon]=\"layer.visible ? 'eye' : 'eye-off'\">\n  </mat-icon>\n</button>\n\n  <button *ngIf=\"!selectionMode\"\n    class=\"actions-button\"\n    tooltip-position=\"below\"\n    matTooltipShowDelay=\"500\"\n    [matTooltip]= \"'igo.geo.layer.moreOptions' | translate\"\n    mat-icon-button\n    color=\"primary\"\n    (click)=\"toggleLayerTool()\">\n    <mat-icon svgIcon=\"dots-horizontal\"></mat-icon>\n  </button>\n</mat-list-item>\n\n<div #legend class=\"igo-layer-legend-container\">\n  <igo-layer-legend\n    *ngIf=\"showLegend$ | async\"\n    [layer]=\"layer\"\n    [updateLegendOnResolutionChange]=\"updateLegendOnResolutionChange\">\n  </igo-layer-legend>\n</div>\n", styles: [":host{overflow:hidden}mat-list-item ::ng-deep .mat-list-item-content .layerCheck{align-self:baseline;width:16px;padding-right:0}.igo-layer-list-item{height:46px;clear:both}.igo-layer-title{cursor:pointer}.igo-layer-legend-container{padding-left:18px;width:calc(100% - 18px)}mat-icon.disabled{color:#00000061}mat-icon[matBadge] ::ng-deep .mat-badge-content{font-size:12px}.selection-eye{padding-right:45px}\n"] }]
         }], function () { return [{ type: i2$1.NetworkService }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, { activeLayer: [{
                 type: Input
             }], selectAll: [{
@@ -14175,7 +14176,7 @@ var LayerListDisplacement;
     LayerListDisplacement["Lower"] = "lower";
 })(LayerListDisplacement || (LayerListDisplacement = {}));
 
-const _c0$e = ["igoLayerItemToolbar"];
+const _c0$f = ["igoLayerItemToolbar"];
 function LayerListComponent_igo_layer_list_tool_1_Template(rf, ctx) {
     if (rf & 1) {
         const _r7 = i0.ɵɵgetCurrentView();
@@ -15139,7 +15140,7 @@ class LayerListComponent {
 LayerListComponent.ɵfac = function LayerListComponent_Factory(t) { return new (t || LayerListComponent)(i0.ɵɵdirectiveInject(i0.ElementRef)); };
 LayerListComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LayerListComponent, selectors: [["igo-layer-list"]], contentQueries: function LayerListComponent_ContentQueries(rf, ctx, dirIndex) {
         if (rf & 1) {
-            i0.ɵɵcontentQuery(dirIndex, _c0$e, 5);
+            i0.ɵɵcontentQuery(dirIndex, _c0$f, 5);
         }
         if (rf & 2) {
             let _t;
@@ -15179,7 +15180,7 @@ LayerListComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LayerLis
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LayerListComponent, [{
             type: Component,
-            args: [{ selector: 'igo-layer-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-list>\r\n  <igo-layer-list-tool *ngIf=\"showToolbar$ | async\"\r\n    floatLabel=\"auto\"\r\n    [layersAreAllVisible]=\"layersAreAllVisible\"\r\n    [term]=\"layerFilterAndSortOptions.keyword\"\r\n    [onlyVisible]=\"layerFilterAndSortOptions.onlyVisible\"\r\n    [sortAlpha]=\"layerFilterAndSortOptions.sortAlpha\"\r\n    (appliedFilterAndSort)=\"onAppliedFilterAndSortChange($event)\"\r\n    (selection)=\"toggleSelectionMode($event)\">\r\n  </igo-layer-list-tool>\r\n</mat-list>\r\n\r\n<mat-list-item *ngIf=\"selection\" class=\"select-all\">\r\n  <mat-checkbox\r\n    class=\"select-all-checkbox mat-subheading-2\"\r\n    [color]=\"!selectAllCheck && layersChecked.length > 0 ? 'accent' : 'primary'\"\r\n    (change)=\"selectAll()\"\r\n    [checked]=\"selectAllCheck\"\r\n    [indeterminate]=\"!selectAllCheck && layersChecked.length > 0\"> {{selectAllCheck ? ('igo.geo.layer.deselectAll' | translate) : ('igo.geo.layer.selectAll' | translate)}}\r\n  </mat-checkbox>\r\n</mat-list-item>\r\n<mat-divider></mat-divider>\r\n\r\n<igo-list #igoList [ngClass]=\"{'igo-list-tools-multi': selection, 'igo-list-tools-single': (layerTool && !selection), 'igo-list-no-tools': (!layerTool && !selection)}\" [navigation]=\"false\" [selection]=\"false\">\r\n  <ng-template ngFor let-layer let-i=\"index\" [ngForOf]=\"layers$ | async\">\r\n    <igo-layer-item *ngIf=\"!(excludeBaseLayers && layer.baseLayer)\"\r\n      igoListItem\r\n      [layer]=\"layer\"\r\n      [activeLayer]=\"activeLayer\"\r\n      [orderable]=\"orderable && !layer.baseLayer\"\r\n      [lowerDisabled]=\"getLowerLayer().id === layer.id\"\r\n      [raiseDisabled]=\"getUpperLayer().id === layer.id\"\r\n      [queryBadge]=\"queryBadge\"\r\n      [expandLegendIfVisible]=\"expandLegendOfVisibleLayers\"\r\n      [updateLegendOnResolutionChange]=\"updateLegendOnResolutionChange\"\r\n      [toggleLegendOnVisibilityChange]=\"toggleLegendOnVisibilityChange\"\r\n      [selectionMode]=\"selection\"\r\n      [selectAll]=\"selectAllCheck\"\r\n      [layerCheck]=\"layer.options.check\"\r\n      [changeDetection]=\"layerItemChangeDetection$\"\r\n      (action)=\"toggleLayerTool($event)\"\r\n      (checkbox)=\"layersCheck($event)\">\r\n    </igo-layer-item>\r\n  </ng-template>\r\n</igo-list>\r\n\r\n<igo-panel *ngIf=\"!selection && layerTool && activeLayer\" class=\"igo-layer-actions-container\" [title]=\"activeLayer.title\">\r\n  <div class=\"igo-layer-button-group\">\r\n    <button\r\n      *ngIf=\"isLayerRemovable(activeLayer)\"\r\n      class=\"delete-button\"\r\n      mat-icon-button\r\n      color=\"warn\"\r\n      tooltip-position=\"below\"\r\n      matTooltipShowDelay=\"500\"\r\n      [matTooltip]=\"'igo.geo.layer.removeLayer' | translate\"\r\n      (click)=\"removeLayers()\">\r\n      <mat-icon svgIcon=\"delete\"></mat-icon>\r\n    </button>\r\n\r\n    <button\r\n      class=\"down-button\"\r\n      mat-icon-button\r\n      color=\"primary\"\r\n      tooltip-position=\"below\"\r\n      matTooltipShowDelay=\"500\"\r\n      [matTooltip]=\"(sortAlpha || onlyVisible || keyword) ? ('igo.geo.layer.filterLowerLayer' | translate) : ('igo.geo.layer.lowerLayer' | translate)\"\r\n      [disabled]=\"lowerDisabled\"\r\n      (click)=\"moveActiveLayer(activeLayer,layerListDisplacement.Lower, true)\">\r\n      <mat-icon [matBadge]=\"(sortAlpha || onlyVisible || keyword) ? '!' : ''\" matBadgeColor=\"warn\" matBadgeSize=\"medium\" [matBadgeHidden]=\"lowerDisabled\"\r\n                svgIcon=\"arrow-down\"></mat-icon>\r\n    </button>\r\n\r\n    <button\r\n      class=\"up-button\"\r\n      color=\"primary\"\r\n      mat-icon-button\r\n      tooltip-position=\"below\"\r\n      matTooltipShowDelay=\"500\"\r\n      [matTooltip]=\"(sortAlpha || onlyVisible || keyword) ? ('igo.geo.layer.filterRaiseLayer' | translate) : ('igo.geo.layer.raiseLayer' | translate)\"\r\n      [disabled]=\"raiseDisabled\"\r\n      (click)=\"moveActiveLayer(activeLayer,layerListDisplacement.Raise, true)\">\r\n      <mat-icon [matBadge]=\"(sortAlpha || onlyVisible || keyword) ? '!' : ''\" matBadgeColor=\"warn\" matBadgeSize=\"medium\" [matBadgeHidden]=\"raiseDisabled\"\r\n                svgIcon=\"arrow-up\"></mat-icon>\r\n    </button>\r\n\r\n    <!-- <label>{{ 'igo.geo.layer.opacity' | translate }} </label> -->\r\n    <button\r\n      class=\"opacity-button\"\r\n      color=\"primary\"\r\n      mat-icon-button\r\n      tooltip-position=\"below\"\r\n      matTooltipShowDelay=\"500\"\r\n      [matMenuTriggerFor]=\"opacityMenu\"\r\n      [matTooltip]=\"'igo.geo.layer.opacity' | translate\">\r\n      <mat-icon [matBadge]=\"badgeOpacity\" matBadgeColor=\"primary\" matBadgeSize=\"medium\" svgIcon=\"opacity\"></mat-icon>\r\n    </button>\r\n\r\n    <mat-menu #opacityMenu=\"matMenu\" class=\"mat-menu-opacity-slider\">\r\n      <div id=\"opacity-menu\">\r\n        <mat-slider\r\n          id=\"opacity-slider\"\r\n          color=\"primary\"\r\n          thumbLabel\r\n          tickInterval=\"5\"\r\n          step=\"5\"\r\n          [min]=\"0\"\r\n          [max]=\"100\"\r\n          [value]=\"opacity\"\r\n          (input)=\"changeOpacity($event)\"\r\n          [matTooltip]=\"'igo.geo.layer.opacity' | translate\"\r\n          (click) = \"$event.stopPropagation()\"\r\n          matTooltipShowDelay=\"500\"\r\n          tooltip-position=\"below\">\r\n        </mat-slider>\r\n      </div>\r\n    </mat-menu>\r\n\r\n    <button\r\n      *ngIf=\"activeLayerExtentIsValid(activeLayer)\"\r\n      class=\"zoomLayer-button\"\r\n      color=\"primary\"\r\n      mat-icon-button\r\n      tooltip-position=\"below\"\r\n      matTooltipShowDelay=\"500\"\r\n      [matTooltip]=\"'igo.geo.layer.zoomLayer' | translate\"\r\n      (click)=\"zoomLayerExtents(activeLayer)\">\r\n      <mat-icon matBadgeColor=\"primary\" matBadgeSize=\"medium\" svgIcon=\"magnify-scan\"></mat-icon>\r\n    </button>\r\n\r\n    <ng-container igoLayerItemToolbar\r\n      [ngTemplateOutlet]=\"templateLayerToolbar\"\r\n      [ngTemplateOutletContext]=\"{layer: activeLayer}\">\r\n    </ng-container>\r\n\r\n    <ng-content select=\"[igoLayerItemToolbar]\"></ng-content>\r\n  </div>\r\n</igo-panel>\r\n\r\n<igo-panel *ngIf=\"selection && layers.length > 0\" class=\"igo-layer-actions-container\" [title]=\"'igo.geo.layer.tools' | translate\">\r\n  <div class=\"actions-buttons-multi\">\r\n    <button\r\n      class=\"delete-button\"\r\n      mat-icon-button\r\n      color=\"warn\"\r\n      tooltip-position=\"below\"\r\n      matTooltipShowDelay=\"500\"\r\n      [disabled]=\"layersChecked.length === 0\"\r\n      [matTooltip]=\"isAllLayersRemovable(layersChecked) ? ('igo.geo.layer.removeSelectedLayers' | translate) : 'igo.geo.layer.removeSelectedLayersRestriction' | translate\"\r\n      (click)=\"removeLayers(layersChecked)\">\r\n      <mat-icon [matBadge]=\"'!'\" matBadgeColor=\"warn\" matBadgeSize=\"medium\" [matBadgeHidden]=\"isAllLayersRemovable(layersChecked)\"\r\n                svgIcon=\"delete\"></mat-icon>\r\n    </button>\r\n\r\n    <button\r\n      class=\"eye-button\"\r\n      mat-icon-button\r\n      color=\"primary\"\r\n      tooltip-position=\"below\"\r\n      matTooltipShowDelay=\"500\"\r\n      [disabled]=\"layersChecked.length === 0\"\r\n      [matTooltip]=\"statusSelectedLayersCheck === 'ALL_HIDDEN' ? ('igo.geo.layer.showSelectedLayers' | translate) : ('igo.geo.layer.hideSelectedLayers' | translate)\"\r\n      (click)=\"toggleVisibility(layersChecked)\">\r\n      <mat-icon\t[svgIcon]=\"(statusSelectedLayersCheck === 'ALL_HIDDEN') ? 'eye-off' : 'eye'\"></mat-icon>\r\n    </button>\r\n\r\n    <button\r\n      class=\"down-button\"\r\n      mat-icon-button\r\n      color=\"primary\"\r\n      tooltip-position=\"below\"\r\n      matTooltipShowDelay=\"500\"\r\n      [matTooltip]=\"(sortAlpha || onlyVisible || keyword) ? ('igo.geo.layer.filterLowerLayer' | translate) : ('igo.geo.layer.lowerLayer' | translate)\"\r\n      [disabled]=\"lowerDisabledSelection\"\r\n      (click)=\"lowerLayers(layersChecked)\">\r\n      <mat-icon [matBadge]=\"(sortAlpha || onlyVisible || keyword) ? '!' : ''\" matBadgeColor=\"warn\" matBadgeSize=\"medium\" [matBadgeHidden]=\"lowerDisabledSelection\"\r\n                svgIcon=\"arrow-down\"></mat-icon>\r\n    </button>\r\n\r\n    <button\r\n      class=\"up-button\"\r\n      color=\"primary\"\r\n      mat-icon-button\r\n      tooltip-position=\"below\"\r\n      matTooltipShowDelay=\"500\"\r\n      [matTooltip]=\"(sortAlpha || onlyVisible || keyword) ? ('igo.geo.layer.filterRaiseLayer' | translate) : ('igo.geo.layer.raiseLayer' | translate)\"\r\n      [disabled]=\"raiseDisabledSelection\"\r\n      (click)=\"raiseLayers(layersChecked)\">\r\n      <mat-icon [matBadge]=\"(sortAlpha || onlyVisible || keyword) ? '!' : ''\" matBadgeColor=\"warn\" matBadgeSize=\"medium\" [matBadgeHidden]=\"raiseDisabledSelection\"\r\n                svgIcon=\"arrow-up\"></mat-icon>\r\n    </button>\r\n\r\n    <button\r\n      class=\"opacity-button\"\r\n      color=\"primary\"\r\n      mat-icon-button\r\n      tooltip-position=\"below\"\r\n      matTooltipShowDelay=\"500\"\r\n      [disabled]=\"layersChecked.length === 0\"\r\n      [matMenuTriggerFor]=\"opacityMenu\"\r\n      [matTooltip]=\"'igo.geo.layer.opacity' | translate\">\r\n      <mat-icon svgIcon=\"opacity\"></mat-icon>\r\n    </button>\r\n\r\n    <mat-menu #opacityMenu=\"matMenu\"  class=\"mat-menu-opacity-slider\">\r\n      <div id=\"opacity-menu\">\r\n        <mat-slider *ngIf=\"layersChecked.length\"\r\n          id=\"opacity-slider\"\r\n          color=\"primary\"\r\n          thumbLabel\r\n          tickInterval=\"5\"\r\n          step=\"5\"\r\n          [min]=\"0\"\r\n          [max]=\"100\"\r\n          [(ngModel)]=\"checkOpacity\"\r\n          [matTooltip]=\"'igo.geo.layer.opacity' | translate\"\r\n          matTooltipShowDelay=\"500\"\r\n          tooltip-position=\"below\"\r\n          (click) = \"$event.stopPropagation()\">\r\n        </mat-slider>\r\n      </div>\r\n    </mat-menu>\r\n\r\n    <button\r\n    *ngIf=\"layersChecked.length !== 0 && activeLayersExtentAreValid(layersChecked)\"\r\n      class=\"zoomLayer-button\"\r\n      color=\"primary\"\r\n      mat-icon-button\r\n      tooltip-position=\"below\"\r\n      matTooltipShowDelay=\"500\"\r\n      [matTooltip]=\"'igo.geo.layer.zoomLayers' | translate\"\r\n      (click)=\"zoomLayersExtents(layersChecked)\">\r\n      <mat-icon svgIcon=\"magnify-scan\"></mat-icon>\r\n    </button>\r\n  </div>\r\n</igo-panel>\r\n", styles: [":host .igo-list-no-tools{height:calc(100% - 57px);padding-top:8px}:host .igo-list-tools-single{height:calc(100% - 153px);padding-top:8px}:host .igo-list-tools-multi{height:calc(100% - 191px);padding-top:8px}mat-form-field.inputFilter{width:calc(100% - 100px);max-width:200px}.igo-layer-actions-container{width:calc(100% - 5px);padding-left:4px}.igo-layer-actions-container>div{text-align:center}mat-list-item ::ng-deep .mat-list-item-content{margin-bottom:10px}mat-checkbox ::ng-deep .mat-checkbox-inner-container{margin-left:8px;margin-right:16px}#opacity-slider{float:left;min-width:0;min-width:initial;width:110px;left:10px;top:10px}.igo-layer-button-group,.actions-buttons-multi{display:flex;align-items:center;flex-direction:row-reverse;overflow-x:auto;overflow-y:hidden}.igo-layer-button-group::-webkit-scrollbar,.actions-buttons-multi::-webkit-scrollbar{height:4px}.igo-layer-button-group::-webkit-scrollbar-track,.actions-buttons-multi::-webkit-scrollbar-track{background:#f1f1f1}.igo-layer-button-group::-webkit-scrollbar-thumb,.actions-buttons-multi::-webkit-scrollbar-thumb{background:#888}.igo-layer-button-group::-webkit-scrollbar-thumb:hover,.actions-buttons-multi::-webkit-scrollbar-thumb:hover{background:#555}.igo-layer-button-group{padding-top:5px}:host igo-panel{height:auto;height:initial}#opacity-menu{max-width:none;max-width:initial;width:132px;height:50px}#opacity-menu .mat-menu-content:not(:empty){padding-top:20px}.select-all ::ng-deep .mat-list-item-content{margin:0}\n"] }]
+            args: [{ selector: 'igo-layer-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-list>\n  <igo-layer-list-tool *ngIf=\"showToolbar$ | async\"\n    floatLabel=\"auto\"\n    [layersAreAllVisible]=\"layersAreAllVisible\"\n    [term]=\"layerFilterAndSortOptions.keyword\"\n    [onlyVisible]=\"layerFilterAndSortOptions.onlyVisible\"\n    [sortAlpha]=\"layerFilterAndSortOptions.sortAlpha\"\n    (appliedFilterAndSort)=\"onAppliedFilterAndSortChange($event)\"\n    (selection)=\"toggleSelectionMode($event)\">\n  </igo-layer-list-tool>\n</mat-list>\n\n<mat-list-item *ngIf=\"selection\" class=\"select-all\">\n  <mat-checkbox\n    class=\"select-all-checkbox mat-subheading-2\"\n    [color]=\"!selectAllCheck && layersChecked.length > 0 ? 'accent' : 'primary'\"\n    (change)=\"selectAll()\"\n    [checked]=\"selectAllCheck\"\n    [indeterminate]=\"!selectAllCheck && layersChecked.length > 0\"> {{selectAllCheck ? ('igo.geo.layer.deselectAll' | translate) : ('igo.geo.layer.selectAll' | translate)}}\n  </mat-checkbox>\n</mat-list-item>\n<mat-divider></mat-divider>\n\n<igo-list #igoList [ngClass]=\"{'igo-list-tools-multi': selection, 'igo-list-tools-single': (layerTool && !selection), 'igo-list-no-tools': (!layerTool && !selection)}\" [navigation]=\"false\" [selection]=\"false\">\n  <ng-template ngFor let-layer let-i=\"index\" [ngForOf]=\"layers$ | async\">\n    <igo-layer-item *ngIf=\"!(excludeBaseLayers && layer.baseLayer)\"\n      igoListItem\n      [layer]=\"layer\"\n      [activeLayer]=\"activeLayer\"\n      [orderable]=\"orderable && !layer.baseLayer\"\n      [lowerDisabled]=\"getLowerLayer().id === layer.id\"\n      [raiseDisabled]=\"getUpperLayer().id === layer.id\"\n      [queryBadge]=\"queryBadge\"\n      [expandLegendIfVisible]=\"expandLegendOfVisibleLayers\"\n      [updateLegendOnResolutionChange]=\"updateLegendOnResolutionChange\"\n      [toggleLegendOnVisibilityChange]=\"toggleLegendOnVisibilityChange\"\n      [selectionMode]=\"selection\"\n      [selectAll]=\"selectAllCheck\"\n      [layerCheck]=\"layer.options.check\"\n      [changeDetection]=\"layerItemChangeDetection$\"\n      (action)=\"toggleLayerTool($event)\"\n      (checkbox)=\"layersCheck($event)\">\n    </igo-layer-item>\n  </ng-template>\n</igo-list>\n\n<igo-panel *ngIf=\"!selection && layerTool && activeLayer\" class=\"igo-layer-actions-container\" [title]=\"activeLayer.title\">\n  <div class=\"igo-layer-button-group\">\n    <button\n      *ngIf=\"isLayerRemovable(activeLayer)\"\n      class=\"delete-button\"\n      mat-icon-button\n      color=\"warn\"\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"'igo.geo.layer.removeLayer' | translate\"\n      (click)=\"removeLayers()\">\n      <mat-icon svgIcon=\"delete\"></mat-icon>\n    </button>\n\n    <button\n      class=\"down-button\"\n      mat-icon-button\n      color=\"primary\"\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"(sortAlpha || onlyVisible || keyword) ? ('igo.geo.layer.filterLowerLayer' | translate) : ('igo.geo.layer.lowerLayer' | translate)\"\n      [disabled]=\"lowerDisabled\"\n      (click)=\"moveActiveLayer(activeLayer,layerListDisplacement.Lower, true)\">\n      <mat-icon [matBadge]=\"(sortAlpha || onlyVisible || keyword) ? '!' : ''\" matBadgeColor=\"warn\" matBadgeSize=\"medium\" [matBadgeHidden]=\"lowerDisabled\"\n                svgIcon=\"arrow-down\"></mat-icon>\n    </button>\n\n    <button\n      class=\"up-button\"\n      color=\"primary\"\n      mat-icon-button\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"(sortAlpha || onlyVisible || keyword) ? ('igo.geo.layer.filterRaiseLayer' | translate) : ('igo.geo.layer.raiseLayer' | translate)\"\n      [disabled]=\"raiseDisabled\"\n      (click)=\"moveActiveLayer(activeLayer,layerListDisplacement.Raise, true)\">\n      <mat-icon [matBadge]=\"(sortAlpha || onlyVisible || keyword) ? '!' : ''\" matBadgeColor=\"warn\" matBadgeSize=\"medium\" [matBadgeHidden]=\"raiseDisabled\"\n                svgIcon=\"arrow-up\"></mat-icon>\n    </button>\n\n    <!-- <label>{{ 'igo.geo.layer.opacity' | translate }} </label> -->\n    <button\n      class=\"opacity-button\"\n      color=\"primary\"\n      mat-icon-button\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matMenuTriggerFor]=\"opacityMenu\"\n      [matTooltip]=\"'igo.geo.layer.opacity' | translate\">\n      <mat-icon [matBadge]=\"badgeOpacity\" matBadgeColor=\"primary\" matBadgeSize=\"medium\" svgIcon=\"opacity\"></mat-icon>\n    </button>\n\n    <mat-menu #opacityMenu=\"matMenu\" class=\"mat-menu-opacity-slider\">\n      <div id=\"opacity-menu\">\n        <mat-slider\n          id=\"opacity-slider\"\n          color=\"primary\"\n          thumbLabel\n          tickInterval=\"5\"\n          step=\"5\"\n          [min]=\"0\"\n          [max]=\"100\"\n          [value]=\"opacity\"\n          (input)=\"changeOpacity($event)\"\n          [matTooltip]=\"'igo.geo.layer.opacity' | translate\"\n          (click) = \"$event.stopPropagation()\"\n          matTooltipShowDelay=\"500\"\n          tooltip-position=\"below\">\n        </mat-slider>\n      </div>\n    </mat-menu>\n\n    <button\n      *ngIf=\"activeLayerExtentIsValid(activeLayer)\"\n      class=\"zoomLayer-button\"\n      color=\"primary\"\n      mat-icon-button\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"'igo.geo.layer.zoomLayer' | translate\"\n      (click)=\"zoomLayerExtents(activeLayer)\">\n      <mat-icon matBadgeColor=\"primary\" matBadgeSize=\"medium\" svgIcon=\"magnify-scan\"></mat-icon>\n    </button>\n\n    <ng-container igoLayerItemToolbar\n      [ngTemplateOutlet]=\"templateLayerToolbar\"\n      [ngTemplateOutletContext]=\"{layer: activeLayer}\">\n    </ng-container>\n\n    <ng-content select=\"[igoLayerItemToolbar]\"></ng-content>\n  </div>\n</igo-panel>\n\n<igo-panel *ngIf=\"selection && layers.length > 0\" class=\"igo-layer-actions-container\" [title]=\"'igo.geo.layer.tools' | translate\">\n  <div class=\"actions-buttons-multi\">\n    <button\n      class=\"delete-button\"\n      mat-icon-button\n      color=\"warn\"\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [disabled]=\"layersChecked.length === 0\"\n      [matTooltip]=\"isAllLayersRemovable(layersChecked) ? ('igo.geo.layer.removeSelectedLayers' | translate) : 'igo.geo.layer.removeSelectedLayersRestriction' | translate\"\n      (click)=\"removeLayers(layersChecked)\">\n      <mat-icon [matBadge]=\"'!'\" matBadgeColor=\"warn\" matBadgeSize=\"medium\" [matBadgeHidden]=\"isAllLayersRemovable(layersChecked)\"\n                svgIcon=\"delete\"></mat-icon>\n    </button>\n\n    <button\n      class=\"eye-button\"\n      mat-icon-button\n      color=\"primary\"\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [disabled]=\"layersChecked.length === 0\"\n      [matTooltip]=\"statusSelectedLayersCheck === 'ALL_HIDDEN' ? ('igo.geo.layer.showSelectedLayers' | translate) : ('igo.geo.layer.hideSelectedLayers' | translate)\"\n      (click)=\"toggleVisibility(layersChecked)\">\n      <mat-icon\t[svgIcon]=\"(statusSelectedLayersCheck === 'ALL_HIDDEN') ? 'eye-off' : 'eye'\"></mat-icon>\n    </button>\n\n    <button\n      class=\"down-button\"\n      mat-icon-button\n      color=\"primary\"\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"(sortAlpha || onlyVisible || keyword) ? ('igo.geo.layer.filterLowerLayer' | translate) : ('igo.geo.layer.lowerLayer' | translate)\"\n      [disabled]=\"lowerDisabledSelection\"\n      (click)=\"lowerLayers(layersChecked)\">\n      <mat-icon [matBadge]=\"(sortAlpha || onlyVisible || keyword) ? '!' : ''\" matBadgeColor=\"warn\" matBadgeSize=\"medium\" [matBadgeHidden]=\"lowerDisabledSelection\"\n                svgIcon=\"arrow-down\"></mat-icon>\n    </button>\n\n    <button\n      class=\"up-button\"\n      color=\"primary\"\n      mat-icon-button\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"(sortAlpha || onlyVisible || keyword) ? ('igo.geo.layer.filterRaiseLayer' | translate) : ('igo.geo.layer.raiseLayer' | translate)\"\n      [disabled]=\"raiseDisabledSelection\"\n      (click)=\"raiseLayers(layersChecked)\">\n      <mat-icon [matBadge]=\"(sortAlpha || onlyVisible || keyword) ? '!' : ''\" matBadgeColor=\"warn\" matBadgeSize=\"medium\" [matBadgeHidden]=\"raiseDisabledSelection\"\n                svgIcon=\"arrow-up\"></mat-icon>\n    </button>\n\n    <button\n      class=\"opacity-button\"\n      color=\"primary\"\n      mat-icon-button\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [disabled]=\"layersChecked.length === 0\"\n      [matMenuTriggerFor]=\"opacityMenu\"\n      [matTooltip]=\"'igo.geo.layer.opacity' | translate\">\n      <mat-icon svgIcon=\"opacity\"></mat-icon>\n    </button>\n\n    <mat-menu #opacityMenu=\"matMenu\"  class=\"mat-menu-opacity-slider\">\n      <div id=\"opacity-menu\">\n        <mat-slider *ngIf=\"layersChecked.length\"\n          id=\"opacity-slider\"\n          color=\"primary\"\n          thumbLabel\n          tickInterval=\"5\"\n          step=\"5\"\n          [min]=\"0\"\n          [max]=\"100\"\n          [(ngModel)]=\"checkOpacity\"\n          [matTooltip]=\"'igo.geo.layer.opacity' | translate\"\n          matTooltipShowDelay=\"500\"\n          tooltip-position=\"below\"\n          (click) = \"$event.stopPropagation()\">\n        </mat-slider>\n      </div>\n    </mat-menu>\n\n    <button\n    *ngIf=\"layersChecked.length !== 0 && activeLayersExtentAreValid(layersChecked)\"\n      class=\"zoomLayer-button\"\n      color=\"primary\"\n      mat-icon-button\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"'igo.geo.layer.zoomLayers' | translate\"\n      (click)=\"zoomLayersExtents(layersChecked)\">\n      <mat-icon svgIcon=\"magnify-scan\"></mat-icon>\n    </button>\n  </div>\n</igo-panel>\n", styles: [":host .igo-list-no-tools{height:calc(100% - 57px);padding-top:8px}:host .igo-list-tools-single{height:calc(100% - 153px);padding-top:8px}:host .igo-list-tools-multi{height:calc(100% - 191px);padding-top:8px}mat-form-field.inputFilter{width:calc(100% - 100px);max-width:200px}.igo-layer-actions-container{width:calc(100% - 5px);padding-left:4px}.igo-layer-actions-container>div{text-align:center}mat-list-item ::ng-deep .mat-list-item-content{margin-bottom:10px}mat-checkbox ::ng-deep .mat-checkbox-inner-container{margin-left:8px;margin-right:16px}#opacity-slider{float:left;min-width:0;min-width:initial;width:110px;left:10px;top:10px}.igo-layer-button-group,.actions-buttons-multi{display:flex;align-items:center;flex-direction:row-reverse;overflow-x:auto;overflow-y:hidden}.igo-layer-button-group::-webkit-scrollbar,.actions-buttons-multi::-webkit-scrollbar{height:4px}.igo-layer-button-group::-webkit-scrollbar-track,.actions-buttons-multi::-webkit-scrollbar-track{background:#f1f1f1}.igo-layer-button-group::-webkit-scrollbar-thumb,.actions-buttons-multi::-webkit-scrollbar-thumb{background:#888}.igo-layer-button-group::-webkit-scrollbar-thumb:hover,.actions-buttons-multi::-webkit-scrollbar-thumb:hover{background:#555}.igo-layer-button-group{padding-top:5px}:host igo-panel{height:auto;height:initial}#opacity-menu{max-width:none;max-width:initial;width:132px;height:50px}#opacity-menu .mat-menu-content:not(:empty){padding-top:20px}.select-all ::ng-deep .mat-list-item-content{margin:0}\n"] }]
         }], function () { return [{ type: i0.ElementRef }]; }, { templateLayerToolbar: [{
                 type: ContentChild,
                 args: ['igoLayerItemToolbar', /* TODO: add static flag */ {}]
@@ -15352,7 +15353,7 @@ LayerListToolComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Laye
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LayerListToolComponent, [{
             type: Component,
-            args: [{ selector: 'igo-layer-list-tool', changeDetection: ChangeDetectionStrategy.OnPush, template: "  <mat-list-item>\r\n      <mat-form-field class=\"inputFilter\" [floatLabel]=\"floatLabel\">\r\n        <input\r\n          matInput\r\n          [placeholder]=\"'igo.geo.layer.filterPlaceholder' | translate\"\r\n          [matTooltip]=\"'igo.geo.layer.subsetLayersListKeyword' | translate\"\r\n          matTooltipShowDelay=\"500\"\r\n          type=\"text\" [(ngModel)]=\"term\">\r\n        <button\r\n          mat-button\r\n          *ngIf=\"term\"\r\n          matSuffix\r\n          mat-icon-button\r\n          aria-label=\"Clear\"\r\n          color=\"warn\"\r\n          (click)=\"clearTerm()\">\r\n          <mat-icon svgIcon=\"close\"></mat-icon>\r\n        </button>\r\n      </mat-form-field>\r\n\r\n      <div [matTooltip]=\"sortAlpha ?\r\n      ('igo.geo.layer.sortMapOrder' | translate) :\r\n      ('igo.geo.layer.sortAlphabetically' | translate)\" matTooltipShowDelay=\"500\">\r\n        <button class=\"sort-alpha\" [color]=\"sortAlpha ? 'warn' : 'primary'\" mat-icon-button (click)=\"toggleSortAlpha()\">\r\n          <mat-icon [svgIcon]=\"sortAlpha ? 'sort-ascending' : 'sort-alphabetical-ascending'\"></mat-icon>\r\n        </button>\r\n      </div>\r\n\r\n       <div [matTooltip]=\"onlyVisible ?\r\n        ('igo.geo.layer.resetLayersList' | translate) :\r\n        ('igo.geo.layer.subsetLayersListOnlyVisible' | translate)\" matTooltipShowDelay=\"500\">\r\n         <button class=\"only-visible\" mat-icon-button [disabled]=\"layersAreAllVisible && !onlyVisible\"\r\n           [color]=\"onlyVisible ? 'warn' : 'primary'\" (click)=\"toggleOnlyVisible()\">\r\n           <mat-icon\r\n             matBadge=\"icon\"\r\n             igoMatBadgeIcon=\"eye\"\r\n             igoMatBadgeInverseColor=\"true\"\r\n             igoMatBadgeInheritColor=\"true\"\r\n             [svgIcon]=\"onlyVisible ? 'filter-remove' : 'filter'\">\r\n           </mat-icon>\r\n         </button>\r\n       </div>\r\n\r\n       <div [matTooltip]=\"selectionMode ?\r\n        ('igo.geo.layer.deactivateSelectionMode' | translate) :\r\n        ('igo.geo.layer.activateSelectionMode' | translate)\" matTooltipShowDelay=\"500\">\r\n         <button class=\"selection-mode\" mat-icon-button\r\n           color=\"primary\" (click)=\"toggleSelectionMode()\">\r\n           <mat-icon [svgIcon]=\"selectionMode ? 'checkbox-multiple-marked-outline' : 'checkbox-multiple-blank-outline'\"></mat-icon>\r\n         </button>\r\n       </div>\r\n\r\n</mat-list-item>\r\n", styles: ["mat-form-field.inputFilter{width:calc(100% - 100px);max-width:200px}.selection-mode{margin-left:5px}\n"] }]
+            args: [{ selector: 'igo-layer-list-tool', changeDetection: ChangeDetectionStrategy.OnPush, template: "  <mat-list-item>\n      <mat-form-field class=\"inputFilter\" [floatLabel]=\"floatLabel\">\n        <input\n          matInput\n          [placeholder]=\"'igo.geo.layer.filterPlaceholder' | translate\"\n          [matTooltip]=\"'igo.geo.layer.subsetLayersListKeyword' | translate\"\n          matTooltipShowDelay=\"500\"\n          type=\"text\" [(ngModel)]=\"term\">\n        <button\n          mat-button\n          *ngIf=\"term\"\n          matSuffix\n          mat-icon-button\n          aria-label=\"Clear\"\n          color=\"warn\"\n          (click)=\"clearTerm()\">\n          <mat-icon svgIcon=\"close\"></mat-icon>\n        </button>\n      </mat-form-field>\n\n      <div [matTooltip]=\"sortAlpha ?\n      ('igo.geo.layer.sortMapOrder' | translate) :\n      ('igo.geo.layer.sortAlphabetically' | translate)\" matTooltipShowDelay=\"500\">\n        <button class=\"sort-alpha\" [color]=\"sortAlpha ? 'warn' : 'primary'\" mat-icon-button (click)=\"toggleSortAlpha()\">\n          <mat-icon [svgIcon]=\"sortAlpha ? 'sort-ascending' : 'sort-alphabetical-ascending'\"></mat-icon>\n        </button>\n      </div>\n\n       <div [matTooltip]=\"onlyVisible ?\n        ('igo.geo.layer.resetLayersList' | translate) :\n        ('igo.geo.layer.subsetLayersListOnlyVisible' | translate)\" matTooltipShowDelay=\"500\">\n         <button class=\"only-visible\" mat-icon-button [disabled]=\"layersAreAllVisible && !onlyVisible\"\n           [color]=\"onlyVisible ? 'warn' : 'primary'\" (click)=\"toggleOnlyVisible()\">\n           <mat-icon\n             matBadge=\"icon\"\n             igoMatBadgeIcon=\"eye\"\n             igoMatBadgeInverseColor=\"true\"\n             igoMatBadgeInheritColor=\"true\"\n             [svgIcon]=\"onlyVisible ? 'filter-remove' : 'filter'\">\n           </mat-icon>\n         </button>\n       </div>\n\n       <div [matTooltip]=\"selectionMode ?\n        ('igo.geo.layer.deactivateSelectionMode' | translate) :\n        ('igo.geo.layer.activateSelectionMode' | translate)\" matTooltipShowDelay=\"500\">\n         <button class=\"selection-mode\" mat-icon-button\n           color=\"primary\" (click)=\"toggleSelectionMode()\">\n           <mat-icon [svgIcon]=\"selectionMode ? 'checkbox-multiple-marked-outline' : 'checkbox-multiple-blank-outline'\"></mat-icon>\n         </button>\n       </div>\n\n</mat-list-item>\n", styles: ["mat-form-field.inputFilter{width:calc(100% - 100px);max-width:200px}.selection-mode{margin-left:5px}\n"] }]
         }], null, { layersAreAllVisible: [{
                 type: Input
             }], floatLabel: [{
@@ -15629,7 +15630,7 @@ LayerLegendListComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: La
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LayerLegendListComponent, [{
             type: Component,
-            args: [{ selector: 'igo-layer-legend-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "\r\n<div class=\"layer-legend-list-container\">\r\n  <mat-slide-toggle \r\n  tooltip-position=\"above\"\r\n  matTooltipShowDelay=\"500\"\r\n  [matTooltip]=\"'igo.geo.layer.legend.showAll' | translate\"\r\n  [checked]=\"showAllLegendsValue\" class=\"mat-typography\" \r\n  *ngIf=\"(layersInUi$ | async).length && allowShowAllLegends\" [labelPosition]=\"'before'\" (change)=\"toggleShowAllLegends($event.checked)\">\r\n    {{'igo.geo.layer.legend.showAll' | translate}}\r\n  </mat-slide-toggle>\r\n  <mat-divider *ngIf=\"(layersInUi$ | async).length && allowShowAllLegends\"></mat-divider>\r\n  <igo-list [navigation]=\"false\" [selection]=\"false\">\r\n    <ng-template ngFor let-layer let-i=\"index\" [ngForOf]=\"layers$ | async\">\r\n      <igo-layer-legend-item *ngIf=\"!(excludeBaseLayers && layer.baseLayer)\"\r\n          igoListItem [layer]=\"layer\"\r\n          [updateLegendOnResolutionChange]=\"updateLegendOnResolutionChange\">\r\n      </igo-layer-legend-item>\r\n    </ng-template>\r\n  </igo-list>\r\n  <p class=\"layers-empty mat-typography\" \r\n    *ngIf=\"!showAllLegendsValue && (layersInUi$ | async).length && (hasVisibleOrInRangeLayers$ | async)===false && (hasVisibleAndNotInRangeLayers$ | async)===false && allowShowAllLegends\">\r\n    {{'igo.geo.layer.legend.noLayersVisibleWithShowAllButton' | translate}} \r\n  </p>\r\n  <p class=\"layers-empty mat-typography\" \r\n    *ngIf=\"!showAllLegendsValue && (layersInUi$ | async).length && (hasVisibleOrInRangeLayers$ | async)===false && (hasVisibleAndNotInRangeLayers$ | async) && allowShowAllLegends\">\r\n    {{'igo.geo.layer.legend.noLayersVisibleWithShowAllButtonButZoom' | translate}} \r\n  </p>\r\n  <p class=\"layers-empty mat-typography\"\r\n    *ngIf=\"(layersInUi$ | async).length && (hasVisibleOrInRangeLayers$ | async)===false && (hasVisibleAndNotInRangeLayers$ | async)===false && !allowShowAllLegends\">\r\n    {{'igo.geo.layer.legend.noLayersVisible' | translate}} \r\n  </p>\r\n  <p class=\"layers-empty mat-typography\"\r\n    *ngIf=\"(layersInUi$ | async).length && (hasVisibleOrInRangeLayers$ | async)===false && (hasVisibleAndNotInRangeLayers$ | async) && !allowShowAllLegends\">\r\n    {{'igo.geo.layer.legend.noLayersVisibleButZoom' | translate}} \r\n  </p>\r\n\r\n</div>", styles: ["mat-slide-toggle{width:100%;margin:10px}mat-slide-toggle ::ng-deep .mat-slide-toggle-content{width:calc(100% - 60px)}igo-list{display:contents}.layers-empty{text-align:justify;margin:10px}.layer-legend-list-container{max-height:100%;overflow:auto}\n"] }]
+            args: [{ selector: 'igo-layer-legend-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "\n<div class=\"layer-legend-list-container\">\n  <mat-slide-toggle \n  tooltip-position=\"above\"\n  matTooltipShowDelay=\"500\"\n  [matTooltip]=\"'igo.geo.layer.legend.showAll' | translate\"\n  [checked]=\"showAllLegendsValue\" class=\"mat-typography\" \n  *ngIf=\"(layersInUi$ | async).length && allowShowAllLegends\" [labelPosition]=\"'before'\" (change)=\"toggleShowAllLegends($event.checked)\">\n    {{'igo.geo.layer.legend.showAll' | translate}}\n  </mat-slide-toggle>\n  <mat-divider *ngIf=\"(layersInUi$ | async).length && allowShowAllLegends\"></mat-divider>\n  <igo-list [navigation]=\"false\" [selection]=\"false\">\n    <ng-template ngFor let-layer let-i=\"index\" [ngForOf]=\"layers$ | async\">\n      <igo-layer-legend-item *ngIf=\"!(excludeBaseLayers && layer.baseLayer)\"\n          igoListItem [layer]=\"layer\"\n          [updateLegendOnResolutionChange]=\"updateLegendOnResolutionChange\">\n      </igo-layer-legend-item>\n    </ng-template>\n  </igo-list>\n  <p class=\"layers-empty mat-typography\" \n    *ngIf=\"!showAllLegendsValue && (layersInUi$ | async).length && (hasVisibleOrInRangeLayers$ | async)===false && (hasVisibleAndNotInRangeLayers$ | async)===false && allowShowAllLegends\">\n    {{'igo.geo.layer.legend.noLayersVisibleWithShowAllButton' | translate}} \n  </p>\n  <p class=\"layers-empty mat-typography\" \n    *ngIf=\"!showAllLegendsValue && (layersInUi$ | async).length && (hasVisibleOrInRangeLayers$ | async)===false && (hasVisibleAndNotInRangeLayers$ | async) && allowShowAllLegends\">\n    {{'igo.geo.layer.legend.noLayersVisibleWithShowAllButtonButZoom' | translate}} \n  </p>\n  <p class=\"layers-empty mat-typography\"\n    *ngIf=\"(layersInUi$ | async).length && (hasVisibleOrInRangeLayers$ | async)===false && (hasVisibleAndNotInRangeLayers$ | async)===false && !allowShowAllLegends\">\n    {{'igo.geo.layer.legend.noLayersVisible' | translate}} \n  </p>\n  <p class=\"layers-empty mat-typography\"\n    *ngIf=\"(layersInUi$ | async).length && (hasVisibleOrInRangeLayers$ | async)===false && (hasVisibleAndNotInRangeLayers$ | async) && !allowShowAllLegends\">\n    {{'igo.geo.layer.legend.noLayersVisibleButZoom' | translate}} \n  </p>\n\n</div>", styles: ["mat-slide-toggle{width:100%;margin:10px}mat-slide-toggle ::ng-deep .mat-slide-toggle-content{width:calc(100% - 60px)}igo-list{display:contents}.layers-empty{text-align:justify;margin:10px}.layer-legend-list-container{max-height:100%;overflow:auto}\n"] }]
         }], function () { return []; }, { layers: [{
                 type: Input
             }], excludeBaseLayers: [{
@@ -15743,7 +15744,7 @@ TrackFeatureButtonComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TrackFeatureButtonComponent, [{
             type: Component,
-            args: [{ selector: 'igo-track-feature-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button *ngIf=\"options.trackFeature\"\r\n  mat-icon-button\r\n  collapsibleButton\r\n  tooltip-position=\"below\"\r\n  matTooltipShowDelay=\"500\"\r\n  [matTooltip]=\"'igo.geo.layer.trackFeature' | translate\"\r\n  [color]=\"color\"\r\n  (click)=\"toggleTrackFeature()\">\r\n  <mat-icon svgIcon=\"crosshairs-gps\"></mat-icon>\r\n</button>\r\n" }]
+            args: [{ selector: 'igo-track-feature-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button *ngIf=\"options.trackFeature\"\n  mat-icon-button\n  collapsibleButton\n  tooltip-position=\"below\"\n  matTooltipShowDelay=\"500\"\n  [matTooltip]=\"'igo.geo.layer.trackFeature' | translate\"\n  [color]=\"color\"\n  (click)=\"toggleTrackFeature()\">\n  <mat-icon svgIcon=\"crosshairs-gps\"></mat-icon>\n</button>\n" }]
         }], function () { return []; }, { layer: [{
                 type: Input
             }], trackFeature: [{
@@ -15827,7 +15828,7 @@ LayerLegendItemComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: La
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LayerLegendItemComponent, [{
             type: Component,
-            args: [{ selector: 'igo-layer-legend-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-list-item class= \"igo-layer-list-item\">\r\n  <h4 matLine class=\"igo-layer-title\" [matTooltip]=\"tooltipText\" matTooltipShowDelay=\"500\">{{layer.title}}</h4>\r\n</mat-list-item>\r\n\r\n<div #legend class=\"igo-layer-legend-container\">\r\n  <igo-layer-legend\r\n    [layer]=\"layer\"\r\n    [updateLegendOnResolutionChange]=\"updateLegendOnResolutionChange\">\r\n  </igo-layer-legend>\r\n</div>\r\n", styles: [":host{overflow:hidden}.igo-layer-list-item{height:46px;clear:both}.igo-layer-legend-container{padding-left:18px;width:calc(100% - 18px)}\n"] }]
+            args: [{ selector: 'igo-layer-legend-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-list-item class= \"igo-layer-list-item\">\n  <h4 matLine class=\"igo-layer-title\" [matTooltip]=\"tooltipText\" matTooltipShowDelay=\"500\">{{layer.title}}</h4>\n</mat-list-item>\n\n<div #legend class=\"igo-layer-legend-container\">\n  <igo-layer-legend\n    [layer]=\"layer\"\n    [updateLegendOnResolutionChange]=\"updateLegendOnResolutionChange\">\n  </igo-layer-legend>\n</div>\n", styles: [":host{overflow:hidden}.igo-layer-list-item{height:46px;clear:both}.igo-layer-legend-container{padding-left:18px;width:calc(100% - 18px)}\n"] }]
         }], function () { return [{ type: i2$1.NetworkService }]; }, { layer: [{
                 type: Input
             }], updateLegendOnResolutionChange: [{
@@ -16740,7 +16741,7 @@ function FeatureDetailsComponent_table_0_tr_2_td_4_Template(rf, ctx) {
         i0.ɵɵproperty("innerHTML", property_r3.value, i0.ɵɵsanitizeHtml);
     }
 }
-const _c0$d = function () { return { "cursor": "pointer", "color": "blue" }; };
+const _c0$e = function () { return { "cursor": "pointer", "color": "blue" }; };
 function FeatureDetailsComponent_table_0_tr_2_td_5_Template(rf, ctx) {
     if (rf & 1) {
         const _r20 = i0.ɵɵgetCurrentView();
@@ -16753,7 +16754,7 @@ function FeatureDetailsComponent_table_0_tr_2_td_5_Template(rf, ctx) {
         const property_r3 = i0.ɵɵnextContext().$implicit;
         const ctx_r8 = i0.ɵɵnextContext(2);
         i0.ɵɵadvance(1);
-        i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction0(2, _c0$d));
+        i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction0(2, _c0$e));
         i0.ɵɵadvance(1);
         i0.ɵɵtextInterpolate(ctx_r8.getEmbeddedLinkText(property_r3.value));
     }
@@ -16773,7 +16774,7 @@ function FeatureDetailsComponent_table_0_tr_2_td_6_Template(rf, ctx) {
     }
     if (rf & 2) {
         i0.ɵɵadvance(1);
-        i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction0(4, _c0$d));
+        i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction0(4, _c0$e));
         i0.ɵɵadvance(1);
         i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(3, 2, "igo.geo.targetHtmlUrl"));
     }
@@ -16863,13 +16864,12 @@ function FeatureDetailsComponent_iframe_1_Template(rf, ctx) {
     }
 }
 class FeatureDetailsComponent {
-    constructor(http, cdRef, sanitizer, networkService, messageService, languageService, configService) {
+    constructor(http, cdRef, sanitizer, networkService, messageService, configService) {
         this.http = http;
         this.cdRef = cdRef;
         this.sanitizer = sanitizer;
         this.networkService = networkService;
         this.messageService = messageService;
-        this.languageService = languageService;
         this.configService = configService;
         this.unsubscribe$ = new Subject();
         this.ready = false;
@@ -16955,14 +16955,17 @@ class FeatureDetailsComponent {
                 window.open(fileUrl, '_blank');
                 this.cdRef.detectChanges();
             }, (error) => {
-                const translate = this.languageService.translate;
-                const title = translate.instant('igo.geo.targetHtmlUrlUnauthorizedTitle');
-                const message = translate.instant('igo.geo.targetHtmlUrlUnauthorized');
-                this.messageService.error(message, title);
+                this.messageService.error('igo.geo.targetHtmlUrlUnauthorized', 'igo.geo.targetHtmlUrlUnauthorizedTitle');
             });
         }
         else {
-            window.open(value, '_blank');
+            let url = value;
+            if (this.isEmbeddedLink(value)) {
+                var div = document.createElement('div');
+                div.innerHTML = value;
+                url = div.children[0].getAttribute('href');
+            }
+            window.open(url, '_blank');
         }
     }
     isUrl(value) {
@@ -17081,7 +17084,7 @@ class FeatureDetailsComponent {
         }
     }
 }
-FeatureDetailsComponent.ɵfac = function FeatureDetailsComponent_Factory(t) { return new (t || FeatureDetailsComponent)(i0.ɵɵdirectiveInject(i1$2.HttpClient), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i2$3.DomSanitizer), i0.ɵɵdirectiveInject(i2$1.NetworkService), i0.ɵɵdirectiveInject(i2$1.MessageService), i0.ɵɵdirectiveInject(i2$1.LanguageService), i0.ɵɵdirectiveInject(i2$1.ConfigService)); };
+FeatureDetailsComponent.ɵfac = function FeatureDetailsComponent_Factory(t) { return new (t || FeatureDetailsComponent)(i0.ɵɵdirectiveInject(i1$2.HttpClient), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i2$3.DomSanitizer), i0.ɵɵdirectiveInject(i2$1.NetworkService), i0.ɵɵdirectiveInject(i2$1.MessageService), i0.ɵɵdirectiveInject(i2$1.ConfigService)); };
 FeatureDetailsComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FeatureDetailsComponent, selectors: [["igo-feature-details"]], inputs: { source: "source", map: "map", toolbox: "toolbox", feature: "feature" }, outputs: { routeEvent: "routeEvent", selectFeature: "selectFeature", htmlDisplayEvent: "htmlDisplayEvent" }, decls: 2, vars: 2, consts: [["class", "igo-striped mat-typography", 4, "ngIf"], [3, "srcdoc", "src", 4, "ngIf"], [1, "igo-striped", "mat-typography"], [4, "ngFor", "ngForOf"], [4, "ngIf"], ["id", "keyValue", 4, "ngIf"], [3, "innerHTML", 4, "ngIf"], ["mat-list-avatar", "", 3, "svgIcon"], ["target", "_blank", "rel", "noopener noreferrer", 3, "href"], ["mat-icon-button", "", 1, "copyClipboard", 3, "click"], ["svgIcon", "content-copy"], ["id", "keyValue"], [3, "innerHTML"], [3, "ngStyle", "click"], ["target", "_blank", "rel", "noopener noreferrer", 3, "href", "click"], ["igoImageError", "", "width", "225", "height", "auto", 3, "src"], [3, "srcdoc", "src"]], template: function FeatureDetailsComponent_Template(rf, ctx) {
         if (rf & 1) {
             i0.ɵɵtemplate(0, FeatureDetailsComponent_table_0_Template, 4, 3, "table", 0);
@@ -17096,8 +17099,8 @@ FeatureDetailsComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Fea
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FeatureDetailsComponent, [{
             type: Component,
-            args: [{ selector: 'igo-feature-details', changeDetection: ChangeDetectionStrategy.OnPush, template: "<table class=\"igo-striped mat-typography\" *ngIf=\"ready && feature && isObject(feature.properties) && feature.properties.target !== 'iframe'\">\r\n  <tbody>\r\n    <tr *ngFor=\"let property of filterFeatureProperties(feature) | keyvalue\">\r\n\r\n      <td *ngIf=\"feature.properties.target === '_blank' && property.key === 'url'\">\r\n        <mat-icon mat-list-avatar svgIcon=\"{{icon}}\"></mat-icon>\r\n      </td>\r\n\r\n      <td *ngIf=\"feature.properties.target === '_blank' && property.key === 'url'\">\r\n        <a href=\"{{property.value}}\" target='_blank' rel=\"noopener noreferrer\"> {{ 'igo.geo.targetHtmlUrl' | translate }} {{title}}</a>\r\n        <button class=\"copyClipboard\" mat-icon-button (click)=\"copyTextToClipboard(property.value)\">\r\n          <mat-icon svgIcon=\"content-copy\"></mat-icon>\r\n        </button>\r\n      </td>\r\n\r\n      <td id=\"keyValue\" *ngIf=\"feature.properties.target === undefined\">\r\n        {{property.key}}\r\n      </td>\r\n\r\n      <td *ngIf=\"feature.properties.target === undefined && !isObject(property.value) && !isUrl(property.value) && !isEmbeddedLink(property.value)\" [innerHTML]=\"property.value\">\r\n      </td>\r\n\r\n      <td *ngIf=\"feature.properties.target === undefined && isEmbeddedLink(property.value)\">\r\n        <u [ngStyle]=\"{'cursor': 'pointer', 'color': 'blue'}\" (click)=\"openSecureUrl(property.value)\">{{ getEmbeddedLinkText(property.value) }}</u>\r\n      </td>\r\n\r\n      <td *ngIf=\"feature.properties.target === undefined && !isObject(property.value) && (isDoc(property.value) || isUrl(property.value)) && !isImg(property.value)\">\r\n        <u [ngStyle]=\"{'cursor': 'pointer', 'color': 'blue'}\" (click)=\"openSecureUrl(property.value)\">{{ 'igo.geo.targetHtmlUrl' | translate }}</u>\r\n        <button class=\"copyClipboard\" mat-icon-button (click)=\"copyTextToClipboard(property.value)\">\r\n          <mat-icon svgIcon=\"content-copy\"></mat-icon>\r\n        </button>\r\n      </td>\r\n\r\n      <td *ngIf=\"feature.properties.target === undefined && !isObject(property.value) && isUrl(property.value) && isImg(property.value)\">\r\n        <a href=\"{{property.value}}\" target='_blank' (click)=\"openSecureUrl(property.value)\" rel=\"noopener noreferrer\">\r\n          <img igoImageError src=\"{{(property.value | secureImage) |\u00A0async}}\" width=\"225\" height=\"auto\">\r\n        </a>\r\n      </td>\r\n\r\n      <td *ngIf=\"feature.properties.target === undefined && isObject(property.value)\" [innerHTML]=\"property.value | json\">\r\n      </td>\r\n\r\n    </tr>\r\n  </tbody>\r\n</table>\r\n\r\n<iframe *ngIf=\"isHtmlDisplay()\" [srcdoc]=\"htmlSanitizer(feature.properties)\" [src]=\"urlSanitizer(feature.properties.url)\"></iframe>\r\n", styles: ["table{width:100%}table td{padding:5px}#keyValue{width:30%}table ::ng-deep .routing{cursor:pointer}iframe{height:calc(100% - 4px);width:100%;border:0}.copyClipboard{border:none;background:transparent;cursor:pointer}\n"] }]
-        }], function () { return [{ type: i1$2.HttpClient }, { type: i0.ChangeDetectorRef }, { type: i2$3.DomSanitizer }, { type: i2$1.NetworkService }, { type: i2$1.MessageService }, { type: i2$1.LanguageService }, { type: i2$1.ConfigService }]; }, { source: [{
+            args: [{ selector: 'igo-feature-details', changeDetection: ChangeDetectionStrategy.OnPush, template: "<table class=\"igo-striped mat-typography\" *ngIf=\"ready && feature && isObject(feature.properties) && feature.properties.target !== 'iframe'\">\n  <tbody>\n    <tr *ngFor=\"let property of filterFeatureProperties(feature) | keyvalue\">\n\n      <td *ngIf=\"feature.properties.target === '_blank' && property.key === 'url'\">\n        <mat-icon mat-list-avatar svgIcon=\"{{icon}}\"></mat-icon>\n      </td>\n\n      <td *ngIf=\"feature.properties.target === '_blank' && property.key === 'url'\">\n        <a href=\"{{property.value}}\" target='_blank' rel=\"noopener noreferrer\"> {{ 'igo.geo.targetHtmlUrl' | translate }} {{title}}</a>\n        <button class=\"copyClipboard\" mat-icon-button (click)=\"copyTextToClipboard(property.value)\">\n          <mat-icon svgIcon=\"content-copy\"></mat-icon>\n        </button>\n      </td>\n\n      <td id=\"keyValue\" *ngIf=\"feature.properties.target === undefined\">\n        {{property.key}}\n      </td>\n\n      <td *ngIf=\"feature.properties.target === undefined && !isObject(property.value) && !isUrl(property.value) && !isEmbeddedLink(property.value)\" [innerHTML]=\"property.value\">\n      </td>\n\n      <td *ngIf=\"feature.properties.target === undefined && isEmbeddedLink(property.value)\">\n        <u [ngStyle]=\"{'cursor': 'pointer', 'color': 'blue'}\" (click)=\"openSecureUrl(property.value)\">{{ getEmbeddedLinkText(property.value) }}</u>\n      </td>\n\n      <td *ngIf=\"feature.properties.target === undefined && !isObject(property.value) && (isDoc(property.value) || isUrl(property.value)) && !isImg(property.value)\">\n        <u [ngStyle]=\"{'cursor': 'pointer', 'color': 'blue'}\" (click)=\"openSecureUrl(property.value)\">{{ 'igo.geo.targetHtmlUrl' | translate }}</u>\n        <button class=\"copyClipboard\" mat-icon-button (click)=\"copyTextToClipboard(property.value)\">\n          <mat-icon svgIcon=\"content-copy\"></mat-icon>\n        </button>\n      </td>\n\n      <td *ngIf=\"feature.properties.target === undefined && !isObject(property.value) && isUrl(property.value) && isImg(property.value)\">\n        <a href=\"{{property.value}}\" target='_blank' (click)=\"openSecureUrl(property.value)\" rel=\"noopener noreferrer\">\n          <img igoImageError src=\"{{(property.value | secureImage) |\u00A0async}}\" width=\"225\" height=\"auto\">\n        </a>\n      </td>\n\n      <td *ngIf=\"feature.properties.target === undefined && isObject(property.value)\" [innerHTML]=\"property.value | json\">\n      </td>\n\n    </tr>\n  </tbody>\n</table>\n\n<iframe *ngIf=\"isHtmlDisplay()\" [srcdoc]=\"htmlSanitizer(feature.properties)\" [src]=\"urlSanitizer(feature.properties.url)\"></iframe>\n", styles: ["table{width:100%}table td{padding:5px}#keyValue{width:30%}table ::ng-deep .routing{cursor:pointer}iframe{height:calc(100% - 4px);width:100%;border:0}.copyClipboard{border:none;background:transparent;cursor:pointer}\n"] }]
+        }], function () { return [{ type: i1$2.HttpClient }, { type: i0.ChangeDetectorRef }, { type: i2$3.DomSanitizer }, { type: i2$1.NetworkService }, { type: i2$1.MessageService }, { type: i2$1.ConfigService }]; }, { source: [{
                 type: Input
             }], map: [{
                 type: Input
@@ -17114,7 +17117,7 @@ FeatureDetailsComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Fea
             }] });
 })();
 
-const _c0$c = ["igoForm"];
+const _c0$d = ["igoForm"];
 const _c1$a = ["*", [["", "formButtons", ""]]];
 const _c2$5 = ["*", "[formButtons]"];
 /**
@@ -17190,7 +17193,7 @@ class FeatureFormComponent {
 FeatureFormComponent.ɵfac = function FeatureFormComponent_Factory(t) { return new (t || FeatureFormComponent)(); };
 FeatureFormComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FeatureFormComponent, selectors: [["igo-feature-form"]], viewQuery: function FeatureFormComponent_Query(rf, ctx) {
         if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$c, 7);
+            i0.ɵɵviewQuery(_c0$d, 7);
         }
         if (rf & 2) {
             let _t;
@@ -17213,7 +17216,7 @@ FeatureFormComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Featur
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FeatureFormComponent, [{
             type: Component,
-            args: [{ selector: 'igo-feature-form', changeDetection: ChangeDetectionStrategy.OnPush, template: "\r\n<igo-form\r\n  #igoForm\r\n  [form]=\"form\"\r\n  [formData]=\"feature$ | async\"\r\n  (submitForm)=\"onSubmit($event)\">\r\n\r\n  <ng-content></ng-content>\r\n  \r\n  <ng-content select=\"[formButtons]\" formButtons></ng-content>\r\n  \r\n</igo-form>\r\n", styles: [":host{display:block}igo-form{height:100%}\n"] }]
+            args: [{ selector: 'igo-feature-form', changeDetection: ChangeDetectionStrategy.OnPush, template: "\n<igo-form\n  #igoForm\n  [form]=\"form\"\n  [formData]=\"feature$ | async\"\n  (submitForm)=\"onSubmit($event)\">\n\n  <ng-content></ng-content>\n  \n  <ng-content select=\"[formButtons]\" formButtons></ng-content>\n  \n</igo-form>\n", styles: [":host{display:block}igo-form{height:100%}\n"] }]
         }], function () { return []; }, { form: [{
                 type: Input
             }], feature: [{
@@ -17678,7 +17681,7 @@ DrawPopupComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DrawPopu
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DrawPopupComponent, [{
             type: Component,
-            args: [{ selector: 'igo-draw-popup-component', template: "<div mat-dialog-content>\r\n  <p class=\"mat-typography\">{{ 'igo.geo.draw.dialogInstruction' | translate }}</p>\r\n  <mat-form-field class=\"example-full-width\">\r\n    <input\r\n      #input\r\n      matInput\r\n      placeholder=\"{{'igo.geo.draw.dialogTitle' | translate}}\"\r\n      value=\"{{data.currentLabel}}\"/>\r\n  </mat-form-field>\r\n</div>\r\n<div mat-dialog-actions>\r\n  <button \r\n    mat-raised-button \r\n    (click)=\"cancelDrawing()\">{{'igo.geo.draw.cancel' | translate}}\r\n  </button>\r\n  <button \r\n    mat-raised-button \r\n    color=\"primary\" \r\n    (click)=\"confirm(input.value)\">OK\r\n  </button>\r\n</div>\r\n" }]
+            args: [{ selector: 'igo-draw-popup-component', template: "<div mat-dialog-content>\n  <p class=\"mat-typography\">{{ 'igo.geo.draw.dialogInstruction' | translate }}</p>\n  <mat-form-field class=\"example-full-width\">\n    <input\n      #input\n      matInput\n      placeholder=\"{{'igo.geo.draw.dialogTitle' | translate}}\"\n      value=\"{{data.currentLabel}}\"/>\n  </mat-form-field>\n</div>\n<div mat-dialog-actions>\n  <button \n    mat-raised-button \n    (click)=\"cancelDrawing()\">{{'igo.geo.draw.cancel' | translate}}\n  </button>\n  <button \n    mat-raised-button \n    color=\"primary\" \n    (click)=\"confirm(input.value)\">OK\n  </button>\n</div>\n" }]
         }], function () {
         return [{ type: i1.MatDialogRef }, { type: undefined, decorators: [{
                         type: Inject,
@@ -17732,101 +17735,185 @@ DrawShorcutsComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DrawS
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DrawShorcutsComponent, [{
             type: Component,
-            args: [{ selector: 'igo-draw-shorcuts', template: "<mat-dialog-content>\r\n  <div>\r\n    <span class=\"shortcut mat-typography\">\r\n      <mat-icon class=\"shortcut-icon\" svgIcon=\"keyboard-return\"></mat-icon>{{'igo.geo.draw.finish' | translate}}</span>\r\n  </div>\r\n  <div>\r\n    <span class=\"shortcut mat-typography\">\r\n      <mat-icon class=\"shortcut-icon\" svgIcon=\"backspace-outline\"></mat-icon>{{'igo.geo.draw.undo' | translate}}</span>\r\n  </div>\r\n  <div>\r\n    <span class=\"shortcut mat-typography\">\r\n      <mat-icon class=\"shortcut-icon\" svgIcon=\"keyboard-esc\"></mat-icon>{{'igo.geo.draw.abort' | translate}}</span>\r\n  </div>\r\n  <div>\r\n    <span class=\"shortcut mat-typography\">\r\n      <mat-icon class=\"shortcut-icon\" svgIcon=\"keyboard-space\"></mat-icon>{{'igo.geo.draw.move' | translate}}</span>\r\n  </div>\r\n</mat-dialog-content>\r\n<mat-dialog-actions class=\"shortcuts-close\">\r\n  <button mat-raised-button mat-dialog-close color=\"primary\">OK</button>\r\n</mat-dialog-actions>", styles: [".shortcut{display:flex;align-items:center}.shortcut-icon{margin-right:10px}.shortcuts-close{display:flex;justify-content:center}\n"] }]
+            args: [{ selector: 'igo-draw-shorcuts', template: "<mat-dialog-content>\n  <div>\n    <span class=\"shortcut mat-typography\">\n      <mat-icon class=\"shortcut-icon\" svgIcon=\"keyboard-return\"></mat-icon>{{'igo.geo.draw.finish' | translate}}</span>\n  </div>\n  <div>\n    <span class=\"shortcut mat-typography\">\n      <mat-icon class=\"shortcut-icon\" svgIcon=\"backspace-outline\"></mat-icon>{{'igo.geo.draw.undo' | translate}}</span>\n  </div>\n  <div>\n    <span class=\"shortcut mat-typography\">\n      <mat-icon class=\"shortcut-icon\" svgIcon=\"keyboard-esc\"></mat-icon>{{'igo.geo.draw.abort' | translate}}</span>\n  </div>\n  <div>\n    <span class=\"shortcut mat-typography\">\n      <mat-icon class=\"shortcut-icon\" svgIcon=\"keyboard-space\"></mat-icon>{{'igo.geo.draw.move' | translate}}</span>\n  </div>\n</mat-dialog-content>\n<mat-dialog-actions class=\"shortcuts-close\">\n  <button mat-raised-button mat-dialog-close color=\"primary\">OK</button>\n</mat-dialog-actions>", styles: [".shortcut{display:flex;align-items:center}.shortcut-icon{margin-right:10px}.shortcuts-close{display:flex;justify-content:center}\n"] }]
         }], null, null);
 })();
 
-function DrawComponent_button_23_Template(rf, ctx) {
+class DrawLayerPopupComponent {
+    constructor(dialogRef) {
+        this.dialogRef = dialogRef;
+        this.confirmFlag = false;
+    }
+    cancelDrawing() {
+        this.dialogRef.close();
+    }
+    confirm(labelString) {
+        this.confirmFlag = true;
+        this.dialogRef.close(labelString);
+    }
+}
+DrawLayerPopupComponent.ɵfac = function DrawLayerPopupComponent_Factory(t) { return new (t || DrawLayerPopupComponent)(i0.ɵɵdirectiveInject(i1.MatDialogRef)); };
+DrawLayerPopupComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DrawLayerPopupComponent, selectors: [["igo-draw-popup-component"]], inputs: { confirmFlag: "confirmFlag" }, decls: 14, vars: 9, consts: [["mat-dialog-content", ""], [1, "mat-typography"], [1, "example-full-width"], ["matInput", "", 3, "placeholder"], ["input", ""], ["mat-dialog-actions", ""], ["mat-raised-button", "", 3, "click"], ["mat-raised-button", "", "color", "primary", 3, "click"]], template: function DrawLayerPopupComponent_Template(rf, ctx) {
+        if (rf & 1) {
+            const _r1 = i0.ɵɵgetCurrentView();
+            i0.ɵɵelementStart(0, "div", 0)(1, "p", 1);
+            i0.ɵɵtext(2);
+            i0.ɵɵpipe(3, "translate");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(4, "mat-form-field", 2);
+            i0.ɵɵelement(5, "input", 3, 4);
+            i0.ɵɵpipe(7, "translate");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(8, "div", 5)(9, "button", 6);
+            i0.ɵɵlistener("click", function DrawLayerPopupComponent_Template_button_click_9_listener() { return ctx.cancelDrawing(); });
+            i0.ɵɵtext(10);
+            i0.ɵɵpipe(11, "translate");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(12, "button", 7);
+            i0.ɵɵlistener("click", function DrawLayerPopupComponent_Template_button_click_12_listener() { i0.ɵɵrestoreView(_r1); const _r0 = i0.ɵɵreference(6); return i0.ɵɵresetView(ctx.confirm(_r0.value)); });
+            i0.ɵɵtext(13, " OK ");
+            i0.ɵɵelementEnd()();
+        }
+        if (rf & 2) {
+            i0.ɵɵadvance(2);
+            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(3, 3, "igo.geo.draw.layer.layerDialogInstruction"), " ");
+            i0.ɵɵadvance(3);
+            i0.ɵɵpropertyInterpolate("placeholder", i0.ɵɵpipeBind1(7, 5, "igo.geo.draw.layer.title"));
+            i0.ɵɵadvance(5);
+            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(11, 7, "igo.geo.draw.cancel"), " ");
+        }
+    }, dependencies: [i3.MatButton, i13.MatFormField, i14.MatInput, i1.MatDialogContent, i1.MatDialogActions, i7.TranslatePipe] });
+(function () {
+    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DrawLayerPopupComponent, [{
+            type: Component,
+            args: [{ selector: 'igo-draw-popup-component', template: "<div mat-dialog-content>\n  <p class=\"mat-typography\">\n    {{ 'igo.geo.draw.layer.layerDialogInstruction' | translate }}\n  </p>\n  <mat-form-field class=\"example-full-width\">\n    <input\n      #input\n      matInput\n      placeholder=\"{{ 'igo.geo.draw.layer.title' | translate }}\"\n      />\n  </mat-form-field>\n</div>\n<div mat-dialog-actions>\n  <button mat-raised-button (click)=\"cancelDrawing()\">\n    {{ 'igo.geo.draw.cancel' | translate }}\n  </button>\n  <button mat-raised-button color=\"primary\" (click)=\"confirm(input.value)\">\n    OK\n  </button>\n</div>\n" }]
+        }], function () { return [{ type: i1.MatDialogRef }]; }, { confirmFlag: [{
+                type: Input
+            }] });
+})();
+
+const _c0$c = ["selectedLayer"];
+function DrawComponent_mat_option_30_Template(rf, ctx) {
     if (rf & 1) {
-        const _r5 = i0.ɵɵgetCurrentView();
-        i0.ɵɵelementStart(0, "button", 14);
-        i0.ɵɵlistener("click", function DrawComponent_button_23_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r4 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r4.deleteDrawings()); });
+        i0.ɵɵelementStart(0, "mat-option", 2);
+        i0.ɵɵtext(1);
+        i0.ɵɵelementEnd();
+    }
+    if (rf & 2) {
+        const layer_r7 = ctx.$implicit;
+        i0.ɵɵproperty("value", layer_r7);
+        i0.ɵɵadvance(1);
+        i0.ɵɵtextInterpolate1(" ", layer_r7.title, " ");
+    }
+}
+function DrawComponent_button_34_Template(rf, ctx) {
+    if (rf & 1) {
+        const _r9 = i0.ɵɵgetCurrentView();
+        i0.ɵɵelementStart(0, "button", 20);
+        i0.ɵɵlistener("click", function DrawComponent_button_34_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r9); const ctx_r8 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r8.activeDrawingLayer.visible = !ctx_r8.activeDrawingLayer.visible); });
+        i0.ɵɵpipe(1, "translate");
+        i0.ɵɵpipe(2, "translate");
+        i0.ɵɵelement(3, "mat-icon", 21);
+        i0.ɵɵelementEnd();
+    }
+    if (rf & 2) {
+        const ctx_r2 = i0.ɵɵnextContext();
+        i0.ɵɵproperty("color", ctx_r2.activeDrawingLayer.visible ? "primary" : "default")("matTooltip", ctx_r2.activeDrawingLayer.visible ? i0.ɵɵpipeBind1(1, 3, "igo.geo.layer.hideLayer") : i0.ɵɵpipeBind1(2, 5, "igo.geo.layer.showLayer"));
+        i0.ɵɵadvance(3);
+        i0.ɵɵproperty("svgIcon", ctx_r2.activeDrawingLayer.visible ? "eye" : "eye-off");
+    }
+}
+function DrawComponent_button_37_Template(rf, ctx) {
+    if (rf & 1) {
+        const _r11 = i0.ɵɵgetCurrentView();
+        i0.ɵɵelementStart(0, "button", 22);
+        i0.ɵɵlistener("click", function DrawComponent_button_37_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r11); const ctx_r10 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r10.deleteDrawings()); });
         i0.ɵɵpipe(1, "translate");
         i0.ɵɵpipe(2, "async");
-        i0.ɵɵelement(3, "mat-icon", 15);
+        i0.ɵɵelement(3, "mat-icon", 23);
         i0.ɵɵelementEnd();
     }
     if (rf & 2) {
-        const ctx_r0 = i0.ɵɵnextContext();
-        i0.ɵɵproperty("matTooltip", i0.ɵɵpipeBind1(1, 2, "igo.geo.draw.delete"))("disabled", i0.ɵɵpipeBind1(2, 4, ctx_r0.selectedFeatures$).length === 0);
+        const ctx_r3 = i0.ɵɵnextContext();
+        i0.ɵɵproperty("matTooltip", i0.ɵɵpipeBind1(1, 2, "igo.geo.draw.delete"))("disabled", i0.ɵɵpipeBind1(2, 4, ctx_r3.selectedFeatures$).length === 0);
     }
 }
-function DrawComponent_mat_form_field_28_div_6_Template(rf, ctx) {
+function DrawComponent_mat_form_field_42_div_6_Template(rf, ctx) {
     if (rf & 1) {
-        i0.ɵɵelementStart(0, "div", 19);
-        i0.ɵɵelement(1, "img", 20);
+        i0.ɵɵelementStart(0, "div", 27);
+        i0.ɵɵelement(1, "img", 28);
         i0.ɵɵelementEnd();
     }
     if (rf & 2) {
-        const ctx_r6 = i0.ɵɵnextContext(2);
+        const ctx_r12 = i0.ɵɵnextContext(2);
         i0.ɵɵadvance(1);
-        i0.ɵɵpropertyInterpolate("src", ctx_r6.icon, i0.ɵɵsanitizeUrl);
+        i0.ɵɵpropertyInterpolate("src", ctx_r12.icon, i0.ɵɵsanitizeUrl);
     }
 }
-function DrawComponent_mat_form_field_28_mat_option_10_Template(rf, ctx) {
+function DrawComponent_mat_form_field_42_mat_option_10_Template(rf, ctx) {
     if (rf & 1) {
-        const _r10 = i0.ɵɵgetCurrentView();
-        i0.ɵɵelementStart(0, "mat-option", 21);
-        i0.ɵɵlistener("click", function DrawComponent_mat_form_field_28_mat_option_10_Template_mat_option_click_0_listener() { const restoredCtx = i0.ɵɵrestoreView(_r10); const icon_html_r8 = restoredCtx.$implicit; const ctx_r9 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r9.onIconChange(icon_html_r8)); });
-        i0.ɵɵelementStart(1, "div", 19);
-        i0.ɵɵelement(2, "img", 20);
+        const _r16 = i0.ɵɵgetCurrentView();
+        i0.ɵɵelementStart(0, "mat-option", 29);
+        i0.ɵɵlistener("click", function DrawComponent_mat_form_field_42_mat_option_10_Template_mat_option_click_0_listener() { const restoredCtx = i0.ɵɵrestoreView(_r16); const icon_html_r14 = restoredCtx.$implicit; const ctx_r15 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r15.onIconChange(icon_html_r14)); });
+        i0.ɵɵelementStart(1, "div", 27);
+        i0.ɵɵelement(2, "img", 28);
         i0.ɵɵelementEnd()();
     }
     if (rf & 2) {
-        const icon_html_r8 = ctx.$implicit;
-        i0.ɵɵproperty("value", icon_html_r8);
+        const icon_html_r14 = ctx.$implicit;
+        i0.ɵɵproperty("value", icon_html_r14);
         i0.ɵɵadvance(2);
-        i0.ɵɵpropertyInterpolate("src", icon_html_r8, i0.ɵɵsanitizeUrl);
+        i0.ɵɵpropertyInterpolate("src", icon_html_r14, i0.ɵɵsanitizeUrl);
     }
 }
-function DrawComponent_mat_form_field_28_Template(rf, ctx) {
+function DrawComponent_mat_form_field_42_Template(rf, ctx) {
     if (rf & 1) {
-        const _r12 = i0.ɵɵgetCurrentView();
+        const _r18 = i0.ɵɵgetCurrentView();
         i0.ɵɵelementStart(0, "mat-form-field")(1, "mat-label");
         i0.ɵɵtext(2);
         i0.ɵɵpipe(3, "translate");
         i0.ɵɵelementEnd();
         i0.ɵɵelementStart(4, "mat-select")(5, "mat-select-trigger");
-        i0.ɵɵtemplate(6, DrawComponent_mat_form_field_28_div_6_Template, 2, 1, "div", 16);
+        i0.ɵɵtemplate(6, DrawComponent_mat_form_field_42_div_6_Template, 2, 1, "div", 24);
         i0.ɵɵelementEnd();
-        i0.ɵɵelementStart(7, "mat-option", 17);
-        i0.ɵɵlistener("click", function DrawComponent_mat_form_field_28_Template_mat_option_click_7_listener() { i0.ɵɵrestoreView(_r12); const ctx_r11 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r11.onIconChange()); });
+        i0.ɵɵelementStart(7, "mat-option", 25);
+        i0.ɵɵlistener("click", function DrawComponent_mat_form_field_42_Template_mat_option_click_7_listener() { i0.ɵɵrestoreView(_r18); const ctx_r17 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r17.onIconChange()); });
         i0.ɵɵtext(8);
         i0.ɵɵpipe(9, "translate");
         i0.ɵɵelementEnd();
-        i0.ɵɵtemplate(10, DrawComponent_mat_form_field_28_mat_option_10_Template, 3, 2, "mat-option", 18);
+        i0.ɵɵtemplate(10, DrawComponent_mat_form_field_42_mat_option_10_Template, 3, 2, "mat-option", 26);
         i0.ɵɵelementEnd()();
     }
     if (rf & 2) {
-        const ctx_r2 = i0.ɵɵnextContext();
+        const ctx_r5 = i0.ɵɵnextContext();
         i0.ɵɵadvance(2);
         i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(3, 4, "igo.geo.draw.icon"));
         i0.ɵɵadvance(4);
-        i0.ɵɵproperty("ngIf", ctx_r2.icon);
+        i0.ɵɵproperty("ngIf", ctx_r5.icon);
         i0.ɵɵadvance(2);
         i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(9, 6, "igo.geo.draw.noIcon"));
         i0.ɵɵadvance(2);
-        i0.ɵɵproperty("ngForOf", ctx_r2.icons);
+        i0.ɵɵproperty("ngForOf", ctx_r5.icons);
     }
 }
-function DrawComponent_button_32_Template(rf, ctx) {
+function DrawComponent_button_46_Template(rf, ctx) {
     if (rf & 1) {
-        const _r14 = i0.ɵɵgetCurrentView();
-        i0.ɵɵelementStart(0, "button", 22);
-        i0.ɵɵlistener("click", function DrawComponent_button_32_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r14); const ctx_r13 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r13.openStyleModalDialog()); });
+        const _r20 = i0.ɵɵgetCurrentView();
+        i0.ɵɵelementStart(0, "button", 30);
+        i0.ɵɵlistener("click", function DrawComponent_button_46_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r20); const ctx_r19 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r19.openStyleModalDialog()); });
         i0.ɵɵpipe(1, "translate");
         i0.ɵɵtext(2);
         i0.ɵɵpipe(3, "translate");
-        i0.ɵɵelement(4, "mat-icon", 23);
+        i0.ɵɵelement(4, "mat-icon", 31);
         i0.ɵɵelementEnd();
     }
     if (rf & 2) {
-        const ctx_r3 = i0.ɵɵnextContext();
+        const ctx_r6 = i0.ɵɵnextContext();
         i0.ɵɵproperty("matTooltip", i0.ɵɵpipeBind1(1, 3, "igo.geo.layer.style.styleModalTooltip"));
         i0.ɵɵadvance(2);
         i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(3, 5, "igo.geo.layer.style.styleModal"), " ");
         i0.ɵɵadvance(2);
-        i0.ɵɵproperty("matBadge", ctx_r3.selectedFeatures$.value.length);
+        i0.ɵɵproperty("matBadge", ctx_r6.selectedFeatures$.value.length);
     }
 }
 class DrawComponent {
@@ -17859,13 +17946,21 @@ class DrawComponent {
             ]
         };
         this.geometryType = GeometryType; // Reference to the GeometryType enum
+        this._stores = [];
+        this._drawControls = [];
+        this.activeLayerChange = new EventEmitter();
+        this.drawControlsEvent = new EventEmitter();
+        this.layersIDEvent = new EventEmitter();
+        this.layerCounterID = 0;
         this.draw$ = new BehaviorSubject({}); // Observable of draw
-        this.olDrawingLayerSource = new OlVectorSource();
+        this.activeDrawingLayerSource = new OlVectorSource();
         this.selectedFeatures$ = new BehaviorSubject([]);
         this.drawControlIsDisabled = true;
         this.drawControlIsActive = false;
         this.subscriptions$$ = [];
         this.position = 'bottom';
+        this.isCreatingNewLayer = false;
+        this.currGeometryType = this.geometryType.Point;
         this.buildForm();
         this.fillColor = this.drawStyleService.getFillColor();
         this.strokeColor = this.drawStyleService.getStrokeColor();
@@ -17876,19 +17971,85 @@ class DrawComponent {
         this.fontSize = this.drawStyleService.getFontSize();
         this.fontStyle = this.drawStyleService.getFontStyle();
     }
+    get stores() {
+        return this._stores;
+    }
+    set stores(value) {
+        this._stores = value;
+    }
+    get drawControls() {
+        return this._drawControls;
+    }
+    set drawControls(value) {
+        this._drawControls = value;
+    }
+    get activeDrawingLayer() {
+        return this._activeDrawingLayer;
+    }
+    set activeDrawingLayer(value) {
+        this._activeDrawingLayer = value;
+    }
     // Initialize the store that will contain the entities and create the Draw control
     ngOnInit() {
-        this.initStore();
-        this.drawControl = this.createDrawControl(this.fillColor, this.strokeColor, this.strokeWidth);
-        this.drawControl.setGeometryType(this.geometryType.Point);
-        this.toggleDrawControl();
+        if (!this.stores.length) {
+            this.activeStore = new FeatureStore([], {
+                map: this.map
+            });
+            this.initStore();
+            this.activeDrawControl = this.createDrawControl(this.fillColor, this.strokeColor, this.strokeWidth);
+            this.activeDrawControl.setGeometryType(this.geometryType.Point);
+            this.toggleDrawControl();
+            this.stores.push(this.activeStore);
+            this.drawControls.push([this.activeDrawingLayer.id, this.activeDrawControl]);
+            this.drawControlsEvent.emit(this.drawControls);
+            this.layersIDEvent.emit(this.activeDrawingLayer.id);
+            this.onLayerChange(this.activeDrawingLayer);
+        }
+        else {
+            this.activeStore = this.stores.find(store => store.layer.id === this.activeDrawingLayer.id);
+            this.activeDrawControl = this.drawControls.find(dc => dc[0] === this.activeDrawingLayer.id)[1];
+            this.deactivateDrawControl();
+            this.allLayers.forEach(layer => {
+                if (layer.id !== this.activeDrawingLayer.id) {
+                    layer.opacity = 0;
+                }
+                let store = this.stores.find(s => s.layer.id === layer.id);
+                this.subscriptions$$.push(store.stateView
+                    .manyBy$((record) => {
+                    return record.state.selected === true;
+                })
+                    .pipe(first())
+                    .subscribe((records) => {
+                    records.forEach((record) => {
+                        record.state.selected = false;
+                    });
+                }));
+                this.subscriptions$$.push(store.stateView
+                    .manyBy$((record) => {
+                    return record.state.selected === true;
+                })
+                    .pipe(skip(1) // Skip initial emission
+                )
+                    .subscribe((records) => {
+                    this.selectedFeatures$.next(records.map((record) => record.entity));
+                }));
+                this.subscriptions$$.push(store.count$.subscribe((cnt) => {
+                    cnt >= 1
+                        ? (this.activeStore.layer.options.showInLayerList = true)
+                        : (this.activeStore.layer.options.showInLayerList = false);
+                }));
+            });
+            this.onLayerChange(this.activeDrawingLayer);
+        }
     }
     /**
      * Remove the drawing layer and the interactions
      * @internal
      */
     ngOnDestroy() {
-        this.drawControl.setOlMap(undefined);
+        this.allLayers.forEach(layer => layer.opacity = 1);
+        this.activeStore.state.updateAll({ selected: false });
+        this.deactivateDrawControl();
         this.subscriptions$$.map((s) => s.unsubscribe());
     }
     /**
@@ -17899,61 +18060,20 @@ class DrawComponent {
      * @returns a Draw Control
      */
     createDrawControl(fillColor, strokeColor, strokeWidth) {
-        const drawControl = new DrawControl({
+        const activeDrawControl = new DrawControl({
             geometryType: undefined,
-            drawingLayerSource: this.olDrawingLayerSource,
+            drawingLayerSource: this.activeDrawingLayerSource,
             drawingLayerStyle: new olstyle.Style({}),
             interactionStyle: createInteractionStyle(fillColor, strokeColor, strokeWidth)
         });
-        return drawControl;
+        return activeDrawControl;
     }
     /**
      * Store initialization, including drawing layer creation
      */
-    initStore() {
-        this.map.removeLayer(this.olDrawingLayer);
-        // this.map.addLayer()
-        this.olDrawingLayer = new VectorLayer({
-            isIgoInternalLayer: true,
-            id: 'igo-draw-layer',
-            title: this.languageService.translate.instant('igo.geo.draw.drawing'),
-            zIndex: 200,
-            source: new FeatureDataSource(),
-            style: (feature, resolution) => {
-                return this.drawStyleService.createIndividualElementStyle(feature, resolution, this.labelsAreShown, feature.get('fontStyle'), feature.get('drawingStyle').fill, feature.get('drawingStyle').stroke, feature.get('offsetX'), feature.get('offsetY'), this.icon);
-            },
-            showInLayerList: true,
-            exportable: true,
-            browsable: false,
-            workspace: {
-                enabled: false
-            }
-        });
-        tryBindStoreLayer(this.store, this.olDrawingLayer);
-        tryAddLoadingStrategy(this.store, new FeatureStoreLoadingStrategy({
-            motion: FeatureMotion.None
-        }));
-        tryAddSelectionStrategy(this.store, new FeatureStoreSelectionStrategy({
-            map: this.map,
-            motion: FeatureMotion.None,
-            many: true
-        }));
-        this.store.layer.visible = true;
-        this.store.source.ol.on('removefeature', (event) => {
-            const olGeometry = event.feature.getGeometry();
-            this.clearLabelsOfOlGeometry(olGeometry);
-        });
-        this.subscriptions$$.push(this.store.stateView
-            .manyBy$((record) => {
-            return record.state.selected === true;
-        })
-            .pipe(first())
-            .subscribe((records) => {
-            records.forEach((record) => {
-                record.state.selected = false;
-            });
-        }));
-        this.subscriptions$$.push(this.store.stateView
+    initStore(newTitle, isNewLayer) {
+        this.createLayer(newTitle, isNewLayer);
+        this.subscriptions$$.push(this.activeStore.stateView
             .manyBy$((record) => {
             return record.state.selected === true;
         })
@@ -17962,13 +18082,10 @@ class DrawComponent {
             .subscribe((records) => {
             this.selectedFeatures$.next(records.map((record) => record.entity));
         }));
-        this.subscriptions$$.push(this.store.count$.subscribe((cnt) => {
-            if (cnt > 0) {
-                this.store.setLayerExtent();
-            }
+        this.subscriptions$$.push(this.activeStore.count$.subscribe((cnt) => {
             cnt >= 1
-                ? (this.store.layer.options.showInLayerList = true)
-                : (this.store.layer.options.showInLayerList = false);
+                ? (this.activeStore.layer.options.showInLayerList = true)
+                : (this.activeStore.layer.options.showInLayerList = false);
         }));
     }
     /**
@@ -18035,12 +18152,12 @@ class DrawComponent {
                 }
                 // deletes the feature
                 else {
-                    this.olDrawingLayerSource
+                    this.activeDrawingLayerSource
                         .getFeatures()
                         .forEach((drawingLayerFeature) => {
                         const geometry = drawingLayerFeature.getGeometry();
                         if (olGeometry === geometry) {
-                            this.olDrawingLayerSource.removeFeature(drawingLayerFeature);
+                            this.activeDrawingLayerSource.removeFeature(drawingLayerFeature);
                         }
                     });
                 }
@@ -18054,10 +18171,10 @@ class DrawComponent {
     onDrawEnd(olGeometry, radius) {
         this.addFeatureToStore(olGeometry, radius);
         this.clearLabelsOfOlGeometry(olGeometry);
-        this.store.layer.ol.getSource().refresh();
+        this.activeStore.layer.ol.getSource().refresh();
     }
     onModifyDraw(olGeometry) {
-        const entities = this.store.all();
+        const entities = this.activeStore.all();
         entities.forEach((entity) => {
             const entityId = entity.properties.id;
             const olGeometryId = olGeometry.ol_uid;
@@ -18071,7 +18188,7 @@ class DrawComponent {
         });
     }
     onSelectDraw(olFeature, label) {
-        const entities = this.store.all();
+        const entities = this.activeStore.all();
         const olGeometry = olFeature.getGeometry();
         olGeometry.ol_uid = olFeature.get('id');
         const olGeometryCoordinates = JSON.stringify(olGeometry.getCoordinates()[0]);
@@ -18142,7 +18259,7 @@ class DrawComponent {
             lon4326 = point4326[0];
             lat4326 = point4326[1];
         }
-        this.store.update({
+        this.activeStore.update({
             type: FEATURE,
             geometry,
             projection: projection.getCode(),
@@ -18171,6 +18288,40 @@ class DrawComponent {
             stroke: ['']
         });
     }
+    setupLayer(isNewLayer) {
+        setTimeout(() => {
+            const dialogRef = this.dialog.open(DrawLayerPopupComponent, {
+                disableClose: false,
+            });
+            dialogRef.afterClosed().subscribe((label) => {
+                if (dialogRef.componentInstance.confirmFlag) {
+                    this.activeStore.state.updateAll({ selected: false });
+                    this.activeStore = new FeatureStore([], { map: this.map });
+                    this.activeDrawingLayerSource = new OlVectorSource();
+                    this.activeDrawingLayer.opacity = 0;
+                    this.deactivateDrawControl();
+                    this.initStore(label, isNewLayer);
+                    this.activeDrawControl = this.createDrawControl(this.fillColor, this.strokeColor, this.strokeWidth);
+                    this.activeDrawControl.setGeometryType(this.currGeometryType);
+                    this.toggleDrawControl();
+                    this.stores.push(this.activeStore);
+                    this.drawControls.push([this.activeDrawingLayer.id, this.activeDrawControl]);
+                    this.drawControlsEvent.emit(this.drawControls);
+                    this.layersIDEvent.emit(this.activeDrawingLayer.id);
+                    this.isCreatingNewLayer = false;
+                    if (!this.labelsAreShown) {
+                        this.onToggleLabels();
+                    }
+                    this.activeLayerChange.emit(this.activeDrawingLayer);
+                }
+                else {
+                    this.select.value = this.activeDrawingLayer;
+                    this.select.selectionChange.emit(this.activeDrawingLayer);
+                }
+            });
+        }, 250);
+    }
+    // HTML user interactions
     /**
      * Called when the user double-clicks the selected drawing
      */
@@ -18184,12 +18335,14 @@ class DrawComponent {
         this.dialog.open(DrawShorcutsComponent);
     }
     deleteDrawings() {
-        this.store.deleteMany(this.selectedFeatures$.value);
+        this.activeStore.deleteMany(this.selectedFeatures$.value);
         this.selectedFeatures$.value.forEach((selectedFeature) => {
-            this.olDrawingLayerSource.getFeatures().forEach((drawingLayerFeature) => {
+            this.activeDrawingLayerSource
+                .getFeatures()
+                .forEach((drawingLayerFeature) => {
                 const geometry = drawingLayerFeature.getGeometry();
                 if (selectedFeature.properties.id === geometry.ol_uid) {
-                    this.olDrawingLayerSource.removeFeature(drawingLayerFeature);
+                    this.activeDrawingLayerSource.removeFeature(drawingLayerFeature);
                 }
             });
         });
@@ -18202,8 +18355,9 @@ class DrawComponent {
         this.drawStyleService.toggleLabelsAreShown();
         this.labelsAreShown = !this.labelsAreShown;
         this.icon
-            ? this.onColorChange(this.labelsAreShown, true, this.fillColor, this.strokeColor)
-            : this.onColorChange(this.labelsAreShown, false, this.fillColor, this.strokeColor);
+            ? this.elementStyle(this.labelsAreShown, true)
+            : this.elementStyle(this.labelsAreShown, false);
+        this.createDrawControl();
     }
     /**
      * Called when the user toggles the Draw control is toggled
@@ -18213,6 +18367,69 @@ class DrawComponent {
         toggleIsChecked ? this.toggleDrawControl() : this.deactivateDrawControl();
     }
     // User changes properties of a drawing element
+    /**
+     * Display the current layer with the current store and the current layerSource
+     */
+    onLayerChange(currLayer) {
+        if (currLayer) {
+            this.activeStore.state.updateAll({ selected: false });
+            this.isCreatingNewLayer = false;
+            this.activeDrawingLayer.opacity = 0;
+            this.activeDrawingLayer = currLayer;
+            this.activeDrawingLayer.opacity = 1;
+            this.deactivateDrawControl();
+            if (!this.labelsAreShown) {
+                this.onToggleLabels();
+            }
+            this.activeStore = this.stores.find(store => store.layer.id === this.activeDrawingLayer.id);
+            this.activeDrawControl = this.drawControls.find(dc => dc[0] === this.activeDrawingLayer.id)[1];
+            this.activeDrawingLayerSource = this.activeDrawControl.olDrawingLayerSource;
+            this.activeDrawControl.setGeometryType(this.currGeometryType);
+            this.toggleDrawControl();
+        }
+        else {
+            this.setupLayer(true);
+        }
+        this.activeLayerChange.emit(this.activeDrawingLayer);
+    }
+    createLayer(newTitle, isNewLayer) {
+        for (const layer of this.allLayers) {
+            let numberId = Number(layer.id.replace('igo-draw-layer', ''));
+            this.layerCounterID = Math.max(numberId, this.layerCounterID);
+        }
+        this.activeDrawingLayer = new VectorLayer({
+            isIgoInternalLayer: true,
+            id: 'igo-draw-layer' + ++this.layerCounterID,
+            title: isNewLayer
+                ? newTitle
+                : this.languageService.translate.instant('igo.geo.draw.drawing'),
+            zIndex: 200,
+            source: new FeatureDataSource(),
+            style: (feature, resolution) => {
+                return this.drawStyleService.createIndividualElementStyle(feature, resolution, this.labelsAreShown, feature.get('fontStyle'), feature.get('drawingStyle').fill, feature.get('drawingStyle').stroke, feature.get('offsetX'), feature.get('offsetY'), this.icon);
+            },
+            showInLayerList: true,
+            exportable: true,
+            browsable: false,
+            workspace: {
+                enabled: false
+            }
+        });
+        tryBindStoreLayer(this.activeStore, this.activeDrawingLayer);
+        tryAddLoadingStrategy(this.activeStore, new FeatureStoreLoadingStrategy({
+            motion: FeatureMotion.None
+        }));
+        tryAddSelectionStrategy(this.activeStore, new FeatureStoreSelectionStrategy({
+            map: this.map,
+            motion: FeatureMotion.None,
+            many: true
+        }));
+        this.activeStore.layer.visible = true;
+        this.activeStore.source.ol.on('removefeature', (event) => {
+            const olGeometry = event.feature.getGeometry();
+            this.clearLabelsOfOlGeometry(olGeometry);
+        });
+    }
     /**
      * Called when the user changes the color in a color picker
      * @param labelsAreShown wheter the labels are shown or not
@@ -18225,16 +18442,14 @@ class DrawComponent {
             this.selectedFeatures$.value.forEach((feature) => {
                 let olFeature = featureToOl(feature, this.map.ol.getView().getProjection().getCode());
                 this.updateFillAndStrokeColor(olFeature, fillColor, strokeColor);
-                const entity = this.store
+                const entity = this.activeStore
                     .all()
                     .find((e) => e.meta.id === olFeature.getId());
                 entity.properties.drawingStyle.fill = olFeature.get('fillColor_');
                 entity.properties.drawingStyle.stroke = olFeature.get('strokeColor_');
-                this.store.update(entity);
+                this.activeStore.update(entity);
             });
         }
-        this.fillColor = fillColor;
-        this.strokeColor = strokeColor;
         this.elementStyle(labelsAreShown, isAnIcon);
         this.createDrawControl();
     }
@@ -18249,12 +18464,12 @@ class DrawComponent {
             this.selectedFeatures$.value.forEach((feature) => {
                 let olFeature = featureToOl(feature, this.map.ol.getView().getProjection().getCode());
                 this.updateFontSizeAndStyle(olFeature, size, style);
-                const entity = this.store
+                const entity = this.activeStore
                     .all()
                     .find((e) => e.meta.id === olFeature.getId());
                 entity.properties.fontStyle = olFeature.get('fontStyle_');
-                this.store.update(entity);
-                olFeature = this.store.layer.ol.getSource().getFeatures().find(f => f.getId() === entity.meta.id);
+                this.activeStore.update(entity);
+                olFeature = this.activeStore.layer.ol.getSource().getFeatures().find(f => f.getId() === entity.meta.id);
                 olFeature.setProperties({ fontStyle: entity.properties.fontStyle });
                 olFeature.changed();
             });
@@ -18276,13 +18491,13 @@ class DrawComponent {
             this.selectedFeatures$.value.forEach((feature) => {
                 let olFeature = featureToOl(feature, this.map.ol.getView().getProjection().getCode());
                 this.updateOffset(olFeature, offsetX, offsetY);
-                const entity = this.store
+                const entity = this.activeStore
                     .all()
                     .find((e) => e.meta.id === olFeature.getId());
                 entity.properties.offsetX = olFeature.get('offsetX_');
                 entity.properties.offsetY = olFeature.get('offsetY_');
-                this.store.update(entity);
-                olFeature = this.store.layer.ol.getSource().getFeatures().find(f => f.getId() === entity.meta.id);
+                this.activeStore.update(entity);
+                olFeature = this.activeStore.layer.ol.getSource().getFeatures().find(f => f.getId() === entity.meta.id);
                 olFeature.setProperties({ offsetX: entity.properties.offsetX, offsetY: entity.properties.offsetY });
                 olFeature.changed();
             });
@@ -18299,7 +18514,8 @@ class DrawComponent {
      * @param geometryType the geometry type selected by the user
      */
     onGeometryTypeChange(geometryType) {
-        this.drawControl.setGeometryType(geometryType);
+        this.currGeometryType = geometryType;
+        this.activeDrawControl.setGeometryType(geometryType);
         this.toggleDrawControl();
     }
     // Updates the properties of olFeature inputted
@@ -18330,13 +18546,57 @@ class DrawComponent {
             offsetY_: offsetY
         }, true);
     }
-    /**
-     * Check the amount of rows as a possible alternative
-     */
+    // Updates values of the selected element on the HTML view
+    getFeatureFontSize() {
+        return this.selectedFeatures$.value.length > 0
+            ? this.selectedFeatures$.value[0].properties.fontStyle
+                .split(' ')[0]
+                .replace('px', '')
+            : '20';
+    }
+    getFeatureFontStyle() {
+        return this.selectedFeatures$.value.length > 0
+            ? this.selectedFeatures$.value[0].properties.fontStyle.substring(this.selectedFeatures$.value[0].properties.fontStyle.indexOf(' ') + 1)
+            : FontType.Arial;
+    }
+    getFeatureFillColor() {
+        return this.selectedFeatures$.value.length > 0
+            ? this.selectedFeatures$.value[0].properties.drawingStyle.fill
+            : 'rgba(255,255,255,0.4)';
+    }
+    getFeatureStrokeColor() {
+        return this.selectedFeatures$.value.length > 0
+            ? this.selectedFeatures$.value[0].properties.drawingStyle.stroke
+            : 'rgba(143,7,7,1)';
+    }
+    getFeatureOffsetX() {
+        return this.selectedFeatures$.value.length > 0
+            ? this.selectedFeatures$.value[0].properties.offsetX
+            : this.drawStyleService.getOffsetX();
+    }
+    getFeatureOffsetY() {
+        return this.selectedFeatures$.value.length > 0
+            ? this.selectedFeatures$.value[0].properties.offsetY
+            : '0';
+    }
+    get allFontStyles() {
+        return Object.values(FontType);
+    }
+    get allLayers() {
+        return this.map.layers.filter((layer) => layer.id.includes('igo-draw-layer'));
+    }
     updateHeightTable() {
-        this.numberOfDrawings = this.store.count$.getValue();
-        this.numberOfDrawings > 10 ? this.tableTemplate.tableHeight = '35vh' : this.tableTemplate.tableHeight = 'auto';
+        // Check the amount of rows as a possible alternative
+        this.numberOfDrawings = this.activeStore.count$.getValue();
+        this.numberOfDrawings > 10
+            ? (this.tableTemplate.tableHeight = '35vh')
+            : (this.tableTemplate.tableHeight = 'auto');
     }
+    updateActiveLayer() {
+        let currLayer = this.allLayers.find(layer => layer.title === this.activeDrawingLayer.title);
+        return currLayer ? currLayer : this.allLayers[0];
+    }
+    // Helper methods
     /**
      * Activate the correct control
      */
@@ -18361,20 +18621,20 @@ class DrawComponent {
      * @param olGeometry the new geometry to insert in the store
      */
     replaceFeatureInStore(entity, olGeometry, radius) {
-        this.store.delete(entity);
+        this.activeStore.delete(entity);
         this.onDrawEnd(olGeometry, radius);
     }
     /**
      * Deactivate the active draw control
      */
     deactivateDrawControl() {
-        if (!this.drawControl) {
+        if (!this.activeDrawControl) {
             return;
         }
         if (this.drawEnd$$) {
             this.drawEnd$$.unsubscribe();
         }
-        this.drawControl.setOlMap(undefined);
+        this.activeDrawControl.setOlMap(undefined);
         this.drawControlIsActive = false;
     }
     /**
@@ -18383,38 +18643,47 @@ class DrawComponent {
     activateDrawControl() {
         this.drawControlIsDisabled = false;
         this.drawControlIsActive = true;
-        this.drawEnd$$ = this.drawControl.end$.subscribe((olGeometry) => {
+        this.drawEnd$$ = this.activeDrawControl.end$.subscribe((olGeometry) => {
             this.openDrawDialog(olGeometry, true);
         });
-        this.drawControl.modify$.subscribe((olGeometry) => {
+        this.activeDrawControl.modify$.subscribe((olGeometry) => {
             this.onModifyDraw(olGeometry);
         });
         if (!this.drawSelect$$) {
-            this.drawSelect$$ = this.drawControl.select$.subscribe((olFeature) => {
+            this.drawSelect$$ = this.activeDrawControl.select$.subscribe((olFeature) => {
                 this.openDrawDialog(olFeature, false);
             });
         }
-        this.drawControl.setOlMap(this.map.ol, true);
+        this.activeDrawControl.setOlMap(this.map.ol, true);
     }
     /**
      * Recreates the style of the feature stored
      */
     elementStyle(labelsAreShown, isAnIcon) {
         if (isAnIcon) {
-            this.store.layer.ol.setStyle((feature, resolution) => {
+            this.activeStore.layer.ol.setStyle((feature, resolution) => {
                 return this.drawStyleService.createIndividualElementStyle(feature, resolution, labelsAreShown, feature.get('fontStyle'), feature.get('drawingStyle').fill, feature.get('drawingStyle').stroke, feature.get('offsetX'), feature.get('offsetY'), this.icon);
             });
         }
         else {
-            this.store.layer.ol.setStyle((feature, resolution) => {
+            this.activeStore.layer.ol.setStyle((feature, resolution) => {
                 return this.drawStyleService.createIndividualElementStyle(feature, resolution, labelsAreShown, feature.get('fontStyle'), feature.get('drawingStyle').fill, feature.get('drawingStyle').stroke, feature.get('offsetX'), feature.get('offsetY'));
             });
         }
     }
 }
 DrawComponent.ɵfac = function DrawComponent_Factory(t) { return new (t || DrawComponent)(i0.ɵɵdirectiveInject(i2$1.LanguageService), i0.ɵɵdirectiveInject(i2$2.UntypedFormBuilder), i0.ɵɵdirectiveInject(DrawStyleService), i0.ɵɵdirectiveInject(i1.MatDialog), i0.ɵɵdirectiveInject(DrawIconService)); };
-DrawComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DrawComponent, selectors: [["igo-draw"]], inputs: { map: "map", store: "store" }, outputs: { fillColor: "fillColor", strokeColor: "strokeColor", strokeWidth: "strokeWidth", fontSize: "fontSize", fontStyle: "fontStyle" }, decls: 33, vars: 36, consts: [[1, "geometry-type-toggle", "mat-typography"], [3, "value", "change"], [3, "value"], [1, "draw-options", "mat-typography"], [3, "disabled", "checked", "labelPosition", "change"], [3, "checked", "labelPosition", "change"], ["class", "deleteBtn", "mat-icon-button", "", "color", "warn", "tooltip-position", "below", "matTooltipShowDelay", "500", 3, "matTooltip", "disabled", "click", 4, "ngIf"], ["id", "storeElements", 1, "table-compact", 3, "store", "template", "dblclick"], ["table", ""], [1, "icon-options"], [4, "ngIf"], ["mat-icon-button", "", "color", "accent", "disableRipple", "true", 3, "click"], ["svgIcon", "keyboard-outline", "tooltip-position", "below", "matTooltipShowDelay", "500", 1, "shortcuts-icon", 3, "matTooltip"], ["mat-raised-button", "", "color", "primary", 3, "matTooltip", "click", 4, "ngIf"], ["mat-icon-button", "", "color", "warn", "tooltip-position", "below", "matTooltipShowDelay", "500", 1, "deleteBtn", 3, "matTooltip", "disabled", "click"], ["svgIcon", "delete"], ["class", "box", 4, "ngIf"], ["value", "", 3, "click"], [3, "value", "click", 4, "ngFor", "ngForOf"], [1, "box"], [3, "src"], [3, "value", "click"], ["mat-raised-button", "", "color", "primary", 3, "matTooltip", "click"], ["svgIcon", "palette", "matBadgeColor", "warn", "matBadgeSize", "medium", 1, "style-icon", 3, "matBadge"]], template: function DrawComponent_Template(rf, ctx) {
+DrawComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DrawComponent, selectors: [["igo-draw"]], viewQuery: function DrawComponent_Query(rf, ctx) {
         if (rf & 1) {
+            i0.ɵɵviewQuery(_c0$c, 5);
+        }
+        if (rf & 2) {
+            let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.select = _t.first);
+        }
+    }, inputs: { map: "map", stores: "stores", drawControls: "drawControls", activeDrawingLayer: "activeDrawingLayer" }, outputs: { activeLayerChange: "activeLayerChange", drawControlsEvent: "drawControlsEvent", layersIDEvent: "layersIDEvent", fillColor: "fillColor", strokeColor: "strokeColor", strokeWidth: "strokeWidth", fontSize: "fontSize", fontStyle: "fontStyle" }, decls: 47, vars: 45, consts: [[1, "geometry-type-toggle", "mat-typography"], [3, "value", "change"], [3, "value"], [1, "draw-options", "mat-typography"], [3, "disabled", "checked", "labelPosition", "change"], [3, "checked", "labelPosition", "change"], ["appearance", "outline", 1, "layer-select"], [3, "value", "selectionChange"], ["selectedLayer", ""], [3, "value", 4, "ngFor", "ngForOf"], ["id", "createNewLayer"], ["mat-icon-button", "", "collapsibleButton", "", "tooltip-position", "below", "matTooltipShowDelay", "500", 3, "color", "matTooltip", "click", 4, "ngIf"], ["class", "deleteBtn", "mat-icon-button", "", "color", "warn", "tooltip-position", "below", "matTooltipShowDelay", "500", 3, "matTooltip", "disabled", "click", 4, "ngIf"], [1, "table-compact", 3, "store", "template", "dblclick"], ["table", ""], [1, "icon-options"], [4, "ngIf"], ["mat-icon-button", "", "color", "accent", "disableRipple", "true", 3, "click"], ["svgIcon", "keyboard-outline", "tooltip-position", "below", "matTooltipShowDelay", "500", 1, "shortcuts-icon", 3, "matTooltip"], ["mat-raised-button", "", "color", "primary", 3, "matTooltip", "click", 4, "ngIf"], ["mat-icon-button", "", "collapsibleButton", "", "tooltip-position", "below", "matTooltipShowDelay", "500", 3, "color", "matTooltip", "click"], [3, "svgIcon"], ["mat-icon-button", "", "color", "warn", "tooltip-position", "below", "matTooltipShowDelay", "500", 1, "deleteBtn", 3, "matTooltip", "disabled", "click"], ["svgIcon", "delete"], ["class", "box", 4, "ngIf"], ["value", "", 3, "click"], [3, "value", "click", 4, "ngFor", "ngForOf"], [1, "box"], [3, "src"], [3, "value", "click"], ["mat-raised-button", "", "color", "primary", 3, "matTooltip", "click"], ["svgIcon", "palette", "matBadgeColor", "warn", "matBadgeSize", "medium", 1, "style-icon", 3, "matBadge"]], template: function DrawComponent_Template(rf, ctx) {
+        if (rf & 1) {
+            const _r21 = i0.ɵɵgetCurrentView();
             i0.ɵɵelementStart(0, "div")(1, "div", 0)(2, "mat-button-toggle-group", 1);
             i0.ɵɵlistener("change", function DrawComponent_Template_mat_button_toggle_group_change_2_listener($event) { return ctx.onGeometryTypeChange($event.value); });
             i0.ɵɵelementStart(3, "mat-button-toggle", 2);
@@ -18443,20 +18712,35 @@ DrawComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DrawComponent
             i0.ɵɵtext(20);
             i0.ɵɵpipe(21, "translate");
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(22, "div");
-            i0.ɵɵtemplate(23, DrawComponent_button_23_Template, 4, 6, "button", 6);
-            i0.ɵɵelementStart(24, "div")(25, "igo-entity-table", 7, 8);
-            i0.ɵɵlistener("dblclick", function DrawComponent_Template_igo_entity_table_dblclick_25_listener() { return ctx.editLabelDrawing(); });
+            i0.ɵɵelement(22, "mat-divider");
+            i0.ɵɵelementStart(23, "div")(24, "mat-form-field", 6)(25, "mat-label");
+            i0.ɵɵtext(26);
+            i0.ɵɵpipe(27, "translate");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(28, "mat-select", 7, 8);
+            i0.ɵɵlistener("selectionChange", function DrawComponent_Template_mat_select_selectionChange_28_listener() { i0.ɵɵrestoreView(_r21); const _r0 = i0.ɵɵreference(29); return i0.ɵɵresetView(ctx.onLayerChange(_r0.value)); });
+            i0.ɵɵtemplate(30, DrawComponent_mat_option_30_Template, 2, 2, "mat-option", 9);
+            i0.ɵɵelementStart(31, "mat-option", 10);
+            i0.ɵɵtext(32);
+            i0.ɵɵpipe(33, "translate");
             i0.ɵɵelementEnd()()();
-            i0.ɵɵelementStart(27, "div", 9);
-            i0.ɵɵtemplate(28, DrawComponent_mat_form_field_28_Template, 11, 8, "mat-form-field", 10);
+            i0.ɵɵtemplate(34, DrawComponent_button_34_Template, 4, 7, "button", 11);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(29, "button", 11);
-            i0.ɵɵlistener("click", function DrawComponent_Template_button_click_29_listener() { return ctx.openShorcutsDialog(); });
-            i0.ɵɵelement(30, "mat-icon", 12);
-            i0.ɵɵpipe(31, "translate");
+            i0.ɵɵelement(35, "mat-divider");
+            i0.ɵɵelementStart(36, "div");
+            i0.ɵɵtemplate(37, DrawComponent_button_37_Template, 4, 6, "button", 12);
+            i0.ɵɵelementStart(38, "div")(39, "igo-entity-table", 13, 14);
+            i0.ɵɵlistener("dblclick", function DrawComponent_Template_igo_entity_table_dblclick_39_listener() { return ctx.editLabelDrawing(); });
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelementStart(41, "div", 15);
+            i0.ɵɵtemplate(42, DrawComponent_mat_form_field_42_Template, 11, 8, "mat-form-field", 16);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(43, "button", 17);
+            i0.ɵɵlistener("click", function DrawComponent_Template_button_click_43_listener() { return ctx.openShorcutsDialog(); });
+            i0.ɵɵelement(44, "mat-icon", 18);
+            i0.ɵɵpipe(45, "translate");
             i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(32, DrawComponent_button_32_Template, 5, 7, "button", 13);
+            i0.ɵɵtemplate(46, DrawComponent_button_46_Template, 5, 7, "button", 19);
             i0.ɵɵelementEnd();
         }
         if (rf & 2) {
@@ -18465,39 +18749,49 @@ DrawComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DrawComponent
             i0.ɵɵadvance(1);
             i0.ɵɵproperty("value", ctx.geometryType.Point);
             i0.ɵɵadvance(1);
-            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(5, 22, "igo.geo.draw." + ctx.geometryType.Point), " ");
+            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(5, 27, "igo.geo.draw." + ctx.geometryType.Point), " ");
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("value", ctx.geometryType.LineString);
             i0.ɵɵadvance(1);
-            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(8, 24, "igo.geo.draw." + ctx.geometryType.LineString), " ");
+            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(8, 29, "igo.geo.draw." + ctx.geometryType.LineString), " ");
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("value", ctx.geometryType.Polygon);
             i0.ɵɵadvance(1);
-            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(11, 26, "igo.geo.draw." + ctx.geometryType.Polygon), " ");
+            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(11, 31, "igo.geo.draw." + ctx.geometryType.Polygon), " ");
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("value", ctx.geometryType.Circle);
             i0.ɵɵadvance(1);
-            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(14, 28, "igo.geo.draw." + ctx.geometryType.Circle), " ");
+            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(14, 33, "igo.geo.draw." + ctx.geometryType.Circle), " ");
             i0.ɵɵadvance(3);
             i0.ɵɵproperty("disabled", ctx.drawControlIsDisabled)("checked", ctx.drawControlIsActive)("labelPosition", "before");
             i0.ɵɵadvance(1);
-            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(18, 30, "igo.geo.spatialFilter.drawControl"), " ");
+            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(18, 35, "igo.geo.spatialFilter.drawControl"), " ");
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("checked", ctx.labelsAreShown)("labelPosition", "before");
             i0.ɵɵadvance(1);
-            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(21, 32, "igo.geo.draw.toggleMapTooltips"), " ");
+            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(21, 37, "igo.geo.draw.toggleMapTooltips"), " ");
+            i0.ɵɵadvance(6);
+            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(27, 39, "igo.geo.draw.layer.title"));
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("value", ctx.updateActiveLayer());
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("ngForOf", ctx.allLayers);
+            i0.ɵɵadvance(2);
+            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(33, 41, "igo.geo.draw.layer.createNewLayer"), " ");
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("ngIf", ctx.activeDrawingLayer);
             i0.ɵɵadvance(3);
-            i0.ɵɵproperty("ngIf", ctx.store.count$.getValue() > 0);
+            i0.ɵɵproperty("ngIf", ctx.activeStore.count$.getValue() > 0);
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("store", ctx.store)("template", ctx.tableTemplate);
+            i0.ɵɵproperty("store", ctx.activeStore)("template", ctx.tableTemplate);
             i0.ɵɵadvance(3);
             i0.ɵɵproperty("ngIf", ctx.icons.length >= 1);
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("matTooltip", i0.ɵɵpipeBind1(31, 34, "igo.geo.draw.shortcuts"));
+            i0.ɵɵproperty("matTooltip", i0.ɵɵpipeBind1(45, 43, "igo.geo.draw.shortcuts"));
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngIf", ctx.selectedFeatures$.value.length);
         }
-    }, dependencies: [i1$1.NgForOf, i1$1.NgIf, i3.MatButton, i18.MatButtonToggleGroup, i18.MatButtonToggle, i13.MatFormField, i13.MatLabel, i2.MatIcon, i7$1.MatBadge, i4.MatTooltip, i15.MatSelect, i15.MatSelectTrigger, i9.MatOption, i15$1.MatSlideToggle, i5$1.EntityTableComponent, i1$1.AsyncPipe, i7.TranslatePipe], styles: [".geometry-type-toggle[_ngcontent-%COMP%]{padding:10px;text-align:center}.geometry-type-toggle[_ngcontent-%COMP%]   mat-button-toggle-group[_ngcontent-%COMP%]{width:100%}.geometry-type-toggle[_ngcontent-%COMP%]   mat-button-toggle-group[_ngcontent-%COMP%]   mat-button-toggle[_ngcontent-%COMP%]{width:25%}.draw-options[_ngcontent-%COMP%]{overflow-x:hidden}.draw-options[_ngcontent-%COMP%]   mat-slide-toggle[_ngcontent-%COMP%]{width:100%;margin:10px}.draw-options[_ngcontent-%COMP%]   mat-slide-toggle[_ngcontent-%COMP%]     .mat-slide-toggle-content{width:calc(100% - 60px)}.icon-options[_ngcontent-%COMP%]{margin:5px 5px 0}.deleteBtn[_ngcontent-%COMP%]{margin-left:12px}img[_ngcontent-%COMP%]{width:100%;height:100%}.box[_ngcontent-%COMP%]{width:25px;height:25px}"], data: { animation: [
+    }, dependencies: [i1$1.NgForOf, i1$1.NgIf, i3.MatButton, i18.MatButtonToggleGroup, i18.MatButtonToggle, i11.MatDivider, i13.MatFormField, i13.MatLabel, i2.MatIcon, i7$1.MatBadge, i4.MatTooltip, i15.MatSelect, i15.MatSelectTrigger, i9.MatOption, i23.MatSlideToggle, i5$1.EntityTableComponent, i1$1.AsyncPipe, i7.TranslatePipe], styles: [".geometry-type-toggle[_ngcontent-%COMP%]{padding:10px;text-align:center}.geometry-type-toggle[_ngcontent-%COMP%]   mat-button-toggle-group[_ngcontent-%COMP%]{width:100%}.geometry-type-toggle[_ngcontent-%COMP%]   mat-button-toggle-group[_ngcontent-%COMP%]   mat-button-toggle[_ngcontent-%COMP%]{width:25%}.draw-options[_ngcontent-%COMP%]{overflow-x:hidden}.draw-options[_ngcontent-%COMP%]   mat-slide-toggle[_ngcontent-%COMP%]{width:100%;margin:10px}.draw-options[_ngcontent-%COMP%]   mat-slide-toggle[_ngcontent-%COMP%]     .mat-slide-toggle-content{width:calc(100% - 60px)}.icon-options[_ngcontent-%COMP%]{margin:5px 5px 0}.edition-drawing[_ngcontent-%COMP%]{padding:10px 0}img[_ngcontent-%COMP%]{width:100%;height:100%}.deleteBtn[_ngcontent-%COMP%]{margin-left:12px}.storeTable[_ngcontent-%COMP%]{height:auto!important}.layer-select[_ngcontent-%COMP%]{width:85%;padding:10px 10px 0%}.input-button-container[_ngcontent-%COMP%]{padding:10px}.input-button-container[_ngcontent-%COMP%]   mat-form-field[_ngcontent-%COMP%]{width:25%}.input-button-container[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]{left:8px;bottom:10px}"], data: { animation: [
             trigger('openClose', [
                 state('open', style({
                     opacity: 1
@@ -18523,8 +18817,22 @@ DrawComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DrawComponent
                             transition('open => closed', [animate('600ms ease')]),
                             transition('closed => open', [animate('800ms ease')])
                         ])
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div>\r\n  <div class=\"geometry-type-toggle mat-typography\">\r\n    <mat-button-toggle-group\r\n      (change)=\"onGeometryTypeChange($event.value)\" [value]=\"geometryType.Point\">\r\n      <mat-button-toggle [value]=\"geometryType.Point\">\r\n        {{'igo.geo.draw.' + geometryType.Point | translate}}\r\n      </mat-button-toggle>\r\n\r\n      <mat-button-toggle [value]=\"geometryType.LineString\">\r\n        {{'igo.geo.draw.' + geometryType.LineString | translate}}\r\n      </mat-button-toggle>\r\n\r\n      <mat-button-toggle [value]=\"geometryType.Polygon\">\r\n        {{'igo.geo.draw.' + geometryType.Polygon | translate}}\r\n      </mat-button-toggle>\r\n\r\n      <mat-button-toggle [value]=\"geometryType.Circle\">\r\n        {{'igo.geo.draw.' + geometryType.Circle | translate}}\r\n      </mat-button-toggle>\r\n    </mat-button-toggle-group>\r\n  </div>\r\n\r\n  <div class=\"draw-options mat-typography\">\r\n    <mat-slide-toggle\r\n      [disabled]=\"drawControlIsDisabled\"\r\n      [checked]=\"drawControlIsActive\"\r\n      [labelPosition]=\"'before'\"\r\n      (change)=\"onToggleDrawControl($event.checked)\">\r\n      {{'igo.geo.spatialFilter.drawControl' | translate}}\r\n    </mat-slide-toggle>\r\n\r\n    <mat-slide-toggle\r\n      [checked]=\"labelsAreShown\"\r\n      [labelPosition]=\"'before'\"\r\n      (change)=\"onToggleLabels()\">\r\n      {{'igo.geo.draw.toggleMapTooltips' | translate}}\r\n    </mat-slide-toggle>\r\n  </div>\r\n\r\n  <div>\r\n    <button *ngIf=\"store.count$.getValue() > 0\"\r\n      class=\"deleteBtn\"\r\n      mat-icon-button\r\n      color=\"warn\"\r\n      tooltip-position=\"below\"\r\n      matTooltipShowDelay=\"500\"\r\n      [matTooltip]=\"'igo.geo.draw.delete' | translate\"\r\n      [disabled]=\"(selectedFeatures$ | async).length === 0\"\r\n      (click)=\"deleteDrawings()\">\r\n      <mat-icon svgIcon=\"delete\"></mat-icon>\r\n    </button>\r\n\r\n    <div>\r\n      <igo-entity-table\r\n        #table\r\n        class=\"table-compact\"\r\n        id=\"storeElements\"\r\n        [store]=\"store\"\r\n        [template]=\"tableTemplate\"\r\n        (dblclick)=\"editLabelDrawing()\">\r\n      </igo-entity-table>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"icon-options\">\r\n    <mat-form-field *ngIf=\"icons.length >= 1\">\r\n      <mat-label>{{ 'igo.geo.draw.icon' | translate }}</mat-label>\r\n      <mat-select>\r\n        <mat-select-trigger>\r\n          <div *ngIf=\"icon\" class=\"box\">\r\n            <img src=\"{{ icon }}\">\r\n          </div>\r\n        </mat-select-trigger>\r\n        <mat-option value=\"\" (click)=\"onIconChange()\">{{ 'igo.geo.draw.noIcon' | translate }}</mat-option>\r\n        <mat-option\r\n          *ngFor=\"let icon_html of icons\"\r\n          [value]=\"icon_html\"\r\n          (click)=\"onIconChange(icon_html)\">\r\n          <div class=\"box\">\r\n            <img src=\"{{ icon_html }}\">\r\n          </div>\r\n        </mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <button\r\n    mat-icon-button\r\n    color=\"accent\"\r\n    disableRipple=\"true\"\r\n    (click)=\"openShorcutsDialog()\">\r\n    <mat-icon\r\n      class=\"shortcuts-icon\"\r\n      svgIcon=\"keyboard-outline\"\r\n      tooltip-position=\"below\"\r\n      matTooltipShowDelay=\"500\"\r\n      [matTooltip]=\"'igo.geo.draw.shortcuts' | translate\">\r\n    </mat-icon>\r\n  </button>\r\n\r\n  <button\r\n    *ngIf=\"selectedFeatures$.value.length\"\r\n    mat-raised-button\r\n    color=\"primary\"\r\n    (click)=\"openStyleModalDialog()\"\r\n    [matTooltip]=\"'igo.geo.layer.style.styleModalTooltip' | translate\">\r\n    {{'igo.geo.layer.style.styleModal' | translate}}\r\n    <mat-icon\r\n      class=\"style-icon\"\r\n      svgIcon=\"palette\"\r\n      [matBadge]=\"selectedFeatures$.value.length\"\r\n      matBadgeColor=\"warn\"\r\n      matBadgeSize=\"medium\">\r\n    </mat-icon>\r\n  </button>\r\n</div>\r\n", styles: [".geometry-type-toggle{padding:10px;text-align:center}.geometry-type-toggle mat-button-toggle-group{width:100%}.geometry-type-toggle mat-button-toggle-group mat-button-toggle{width:25%}.draw-options{overflow-x:hidden}.draw-options mat-slide-toggle{width:100%;margin:10px}.draw-options mat-slide-toggle ::ng-deep .mat-slide-toggle-content{width:calc(100% - 60px)}.icon-options{margin:5px 5px 0}.deleteBtn{margin-left:12px}img{width:100%;height:100%}.box{width:25px;height:25px}\n"] }]
-        }], function () { return [{ type: i2$1.LanguageService }, { type: i2$2.UntypedFormBuilder }, { type: DrawStyleService }, { type: i1.MatDialog }, { type: DrawIconService }]; }, { fillColor: [{
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div>\n  <div class=\"geometry-type-toggle mat-typography\">\n    <mat-button-toggle-group\n      (change)=\"onGeometryTypeChange($event.value)\" [value]=\"geometryType.Point\">\n      <mat-button-toggle [value]=\"geometryType.Point\">\n        {{'igo.geo.draw.' + geometryType.Point | translate}}\n      </mat-button-toggle>\n\n      <mat-button-toggle [value]=\"geometryType.LineString\">\n        {{'igo.geo.draw.' + geometryType.LineString | translate}}\n      </mat-button-toggle>\n\n      <mat-button-toggle [value]=\"geometryType.Polygon\">\n        {{'igo.geo.draw.' + geometryType.Polygon | translate}}\n      </mat-button-toggle>\n\n      <mat-button-toggle [value]=\"geometryType.Circle\">\n        {{'igo.geo.draw.' + geometryType.Circle | translate}}\n      </mat-button-toggle>\n    </mat-button-toggle-group>\n  </div>\n\n  <div class=\"draw-options mat-typography\">\n    <mat-slide-toggle\n      [disabled]=\"drawControlIsDisabled\"\n      [checked]=\"drawControlIsActive\"\n      [labelPosition]=\"'before'\"\n      (change)=\"onToggleDrawControl($event.checked)\">\n      {{'igo.geo.spatialFilter.drawControl' | translate}}\n    </mat-slide-toggle>\n\n    <mat-slide-toggle\n      [checked]=\"labelsAreShown\"\n      [labelPosition]=\"'before'\"\n      (change)=\"onToggleLabels()\"\n    >\n      {{ 'igo.geo.draw.toggleMapTooltips' | translate }}\n    </mat-slide-toggle>\n  </div>\n\n  <mat-divider></mat-divider>\n\n  <div>\n    <mat-form-field appearance=\"outline\" class=\"layer-select\">\n      <mat-label>{{'igo.geo.draw.layer.title' | translate}}</mat-label>\n      <mat-select #selectedLayer (selectionChange)=\"onLayerChange(selectedLayer.value)\" [value]=\"updateActiveLayer()\">\n        <mat-option *ngFor=\"let layer of allLayers\" [value]=\"layer\">\n          {{ layer.title }}\n        </mat-option>\n        <mat-option id=\"createNewLayer\" >\n          {{'igo.geo.draw.layer.createNewLayer' | translate}}\n        </mat-option>\n      </mat-select>\n    </mat-form-field>\n    <button\n      *ngIf=\"activeDrawingLayer\"\n      mat-icon-button\n      [color]=\"activeDrawingLayer.visible ? 'primary' : 'default'\"\n      collapsibleButton\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"activeDrawingLayer.visible ?\n                    ('igo.geo.layer.hideLayer' | translate) :\n                    ('igo.geo.layer.showLayer' | translate)\"\n      (click)=\"activeDrawingLayer.visible = !activeDrawingLayer.visible\">\n      <mat-icon\n        [svgIcon]=\"activeDrawingLayer.visible ? 'eye' : 'eye-off'\">\n      </mat-icon>\n    </button>\n  </div>\n  <mat-divider></mat-divider>\n  <div>\n    <button\n      *ngIf=\"activeStore.count$.getValue() > 0\"\n      class=\"deleteBtn\"\n      mat-icon-button\n      color=\"warn\"\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"'igo.geo.draw.delete' | translate\"\n      [disabled]=\"(selectedFeatures$ | async).length === 0\"\n      (click)=\"deleteDrawings()\">\n      <mat-icon svgIcon=\"delete\"></mat-icon>\n    </button>\n\n    <div>\n      <igo-entity-table\n        #table\n        class=\"table-compact\"\n        [store]=\"activeStore\"\n        [template]=\"tableTemplate\"\n        (dblclick)=\"editLabelDrawing()\">\n      </igo-entity-table>\n    </div>\n  </div>\n\n  <div class=\"icon-options\">\n    <mat-form-field *ngIf=\"icons.length >= 1\">\n      <mat-label>{{ 'igo.geo.draw.icon' | translate }}</mat-label>\n      <mat-select>\n        <mat-select-trigger>\n          <div *ngIf=\"icon\" class=\"box\">\n            <img src=\"{{ icon }}\">\n          </div>\n        </mat-select-trigger>\n        <mat-option value=\"\" (click)=\"onIconChange()\">{{ 'igo.geo.draw.noIcon' | translate }}</mat-option>\n        <mat-option\n          *ngFor=\"let icon_html of icons\"\n          [value]=\"icon_html\"\n          (click)=\"onIconChange(icon_html)\">\n          <div class=\"box\">\n            <img src=\"{{ icon_html }}\">\n          </div>\n        </mat-option>\n      </mat-select>\n    </mat-form-field>\n  </div>\n\n  <button\n    mat-icon-button\n    color=\"accent\"\n    disableRipple=\"true\"\n    (click)=\"openShorcutsDialog()\"\n  >\n    <mat-icon\n      class=\"shortcuts-icon\"\n      svgIcon=\"keyboard-outline\"\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"'igo.geo.draw.shortcuts' | translate\"\n    >\n    </mat-icon>\n  </button>\n\n  <button\n    *ngIf=\"selectedFeatures$.value.length\"\n    mat-raised-button\n    color=\"primary\"\n    (click)=\"openStyleModalDialog()\"\n    [matTooltip]=\"'igo.geo.layer.style.styleModalTooltip' | translate\">\n    {{'igo.geo.layer.style.styleModal' | translate}}\n    <mat-icon\n      class=\"style-icon\"\n      svgIcon=\"palette\"\n      [matBadge]=\"selectedFeatures$.value.length\"\n      matBadgeColor=\"warn\"\n      matBadgeSize=\"medium\">\n    </mat-icon>\n  </button>\n</div>\n", styles: [".geometry-type-toggle{padding:10px;text-align:center}.geometry-type-toggle mat-button-toggle-group{width:100%}.geometry-type-toggle mat-button-toggle-group mat-button-toggle{width:25%}.draw-options{overflow-x:hidden}.draw-options mat-slide-toggle{width:100%;margin:10px}.draw-options mat-slide-toggle ::ng-deep .mat-slide-toggle-content{width:calc(100% - 60px)}.icon-options{margin:5px 5px 0}.edition-drawing{padding:10px 0}img{width:100%;height:100%}.deleteBtn{margin-left:12px}.storeTable{height:auto!important}.layer-select{width:85%;padding:10px 10px 0%}.input-button-container{padding:10px}.input-button-container mat-form-field{width:25%}.input-button-container button{left:8px;bottom:10px}\n"] }]
+        }], function () { return [{ type: i2$1.LanguageService }, { type: i2$2.UntypedFormBuilder }, { type: DrawStyleService }, { type: i1.MatDialog }, { type: DrawIconService }]; }, { map: [{
+                type: Input
+            }], stores: [{
+                type: Input
+            }], drawControls: [{
+                type: Input
+            }], activeDrawingLayer: [{
+                type: Input
+            }], activeLayerChange: [{
+                type: Output
+            }], drawControlsEvent: [{
+                type: Output
+            }], layersIDEvent: [{
+                type: Output
+            }], fillColor: [{
                 type: Output
             }], strokeColor: [{
                 type: Output
@@ -18534,10 +18842,9 @@ DrawComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DrawComponent
                 type: Output
             }], fontStyle: [{
                 type: Output
-            }], map: [{
-                type: Input
-            }], store: [{
-                type: Input
+            }], select: [{
+                type: ViewChild,
+                args: ['selectedLayer']
             }] });
 })();
 
@@ -18814,7 +19121,7 @@ StyleModalComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: StyleMo
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(StyleModalComponent, [{
             type: Component,
-            args: [{ selector: 'igo-style-modal-component', template: "<div mat-dialog-content>\r\n  <h2 mat-dialog-title class=\"mat-typography\">{{ 'igo.geo.layer.style.styleModal' | translate }}</h2>\r\n  <div\r\n  class=\"edition-drawing mat-typography\"\r\n  [hidden]=\"data.features.length === 0\">\r\n    <form\r\n      class=\"igo-form\"\r\n      [formGroup]=\"form\">\r\n      <div class=\"fill-color-picker mat-typography\" *ngIf=\"linestringOnly !== true\">\r\n        <span>\r\n          <mat-icon class=\"stroke-palette-icon\" svgIcon=\"square\"></mat-icon>\r\n          {{ 'igo.geo.draw.fill' | translate }}\r\n        </span>\r\n\r\n        <mat-form-field\r\n          class=\"fill-field\"\r\n          appearance=\"outline\"\r\n          floatLabel=\"always\"\r\n          tooltip-position=\"below\"\r\n          matTooltipShowDelay=\"500\"\r\n          [matTooltip]=\"'igo.geo.draw.colorPicker' | translate\">\r\n          <mat-label>{{ getFeatureFillColor() }}</mat-label>\r\n          <input\r\n            #fillColorInput\r\n            formControlName=\"fill\"\r\n            matInput\r\n            type=\"text\"\r\n            [style.background]=\"getFeatureFillColor()\"\r\n            [readonly]=\"true\"\r\n            [colorPicker]=\"getFeatureFillColor()\"\r\n            [cpWidth]=\"'200px'\"\r\n            [cpOutputFormat]=\"'rgba'\"\r\n            [cpPosition]=\"'bottom'\"\r\n            [cpPositionOffset]=\"'-75%'\"\r\n            [cpCancelButton]=\"true\"\r\n            [cpCancelButtonText]=\"'igo.geo.draw.cancel' | translate\"\r\n            [cpOKButton]=\"true\"\r\n            (colorPickerChange)=\"styleModalData.fillColor = $event\">\r\n        </mat-form-field>\r\n      </div>\r\n\r\n      <div class=\"stroke-color-picker mat-typography\">\r\n        <span>\r\n          <mat-icon\r\n            class=\"stroke-palette-icon\"\r\n            svgIcon=\"square-outline\">\r\n          </mat-icon>\r\n          {{'igo.geo.draw.stroke' | translate}}\r\n        </span>\r\n\r\n        <mat-form-field\r\n          class=\"stroke-field\"\r\n          appearance=\"outline\"\r\n          floatLabel=\"always\"\r\n          tooltip-position=\"below\"\r\n          matTooltipShowDelay=\"500\"\r\n          [matTooltip]=\"'igo.geo.draw.colorPicker' | translate\">\r\n          <mat-label>{{ getFeatureStrokeColor() }}</mat-label>\r\n          <input\r\n            #strokeColorInput\r\n            formControlName=\"stroke\"\r\n            matInput\r\n            type=\"text\"\r\n            [style.background]=\"getFeatureStrokeColor()\"\r\n            [readonly]=\"true\"\r\n            [colorPicker]=\"getFeatureStrokeColor()\"\r\n            [cpWidth]=\"'200px'\"\r\n            [cpPosition]=\"'bottom'\"\r\n            [cpPositionOffset]=\"'-75%'\"\r\n            [cpOutputFormat]=\"'rgba'\"\r\n            [cpCancelButton]=\"true\"\r\n            [cpCancelButtonText]=\"'igo.geo.draw.cancel' | translate\"\r\n            [cpOKButton]=\"true\"\r\n            (colorPickerChange)=\"styleModalData.strokeColor = $event\">\r\n        </mat-form-field>\r\n      </div>\r\n\r\n      <div class=\"igo-input-container\">\r\n        <mat-form-field appearance=\"outline\" class=\"igo-form-input-box\">\r\n          <mat-label>{{ 'igo.geo.draw.fontSize' | translate }}</mat-label>\r\n          <input\r\n            matInput\r\n            #testFontSize\r\n            type=\"number\"\r\n            placeholder=\"10\"\r\n            min=\"10\"\r\n            onkeydown=\"return event.keyCode !== 69\"\r\n            [value]=\"getFeatureFontSize()\"\r\n            (input)=\"styleModalData.fontSize = $event.target.value\">\r\n          <span matSuffix>px</span>\r\n        </mat-form-field>\r\n        <mat-form-field appearance=\"outline\" class=\"igo-form-input-box\">\r\n          <mat-label>{{ 'igo.geo.draw.fontStyle' | translate }}</mat-label>\r\n          <mat-select\r\n            #testFontStyle\r\n            [value]=\"getFeatureFontStyle()\"\r\n            (selectionChange)=\"styleModalData.fontStyle = $event.value\">\r\n            <mat-option\r\n              *ngFor=\"let fontSelect of allFontStyles\"\r\n              [value]=\"fontSelect\">\r\n              {{ fontSelect }}\r\n            </mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </div>\r\n\r\n      <div class=\"igo-input-container\">\r\n        <mat-form-field appearance=\"outline\" class=\"igo-form-input-box\">\r\n          <mat-label>{{ 'igo.geo.draw.offsetX' | translate }}</mat-label>\r\n          <input\r\n            matInput\r\n            #offsetXInput\r\n            type=\"number\"\r\n            onkeydown=\"return event.keyCode !== 69\"\r\n            [value]=\"getFeatureOffsetX()\"\r\n            (input)=\"styleModalData.offsetX = $event.target.value\">\r\n        </mat-form-field>\r\n        <mat-form-field appearance=\"outline\" class=\"igo-form-input-box\">\r\n          <mat-label>{{ 'igo.geo.draw.offsetY' | translate }}</mat-label>\r\n          <input\r\n            matInput\r\n            #offsetYInput\r\n            type=\"number\"\r\n            onkeydown=\"return event.keyCode !== 69\"\r\n            [value]=\"getFeatureOffsetY()\"\r\n            (input)=\"styleModalData.offsetY= $event.target.value\">\r\n        </mat-form-field>\r\n      </div>\r\n    </form>\r\n  </div>\r\n</div>\r\n<div mat-dialog-actions>\r\n  <button \r\n    mat-raised-button \r\n    (click)=\"cancelDrawing()\">{{'igo.geo.draw.cancel' | translate}}\r\n  </button>\r\n  <button \r\n    mat-raised-button \r\n    color=\"primary\" \r\n    (click)=\"confirm()\">OK\r\n  </button>\r\n</div>\r\n", styles: ["h2{font-weight:700;font-size:large}.igo-form{padding:10px}.fill-field,.stroke-field{width:130px}.fill-color-picker mat-icon{position:relative;top:7px}.fill-color-picker mat-form-field{left:8px}.stroke-color-picker mat-icon{position:relative;top:7px}.stroke-color-picker mat-form-field{left:35px}.box{width:25px;height:25px}.edition-drawing{padding:10px 0}.igo-input-container .mat-form-field+.mat-form-field{margin-left:8px}.igo-form-input-box{width:150px}button{margin-right:5px}\n"] }]
+            args: [{ selector: 'igo-style-modal-component', template: "<div mat-dialog-content>\n  <h2 mat-dialog-title class=\"mat-typography\">{{ 'igo.geo.layer.style.styleModal' | translate }}</h2>\n  <div\n  class=\"edition-drawing mat-typography\"\n  [hidden]=\"data.features.length === 0\">\n    <form\n      class=\"igo-form\"\n      [formGroup]=\"form\">\n      <div class=\"fill-color-picker mat-typography\" *ngIf=\"linestringOnly !== true\">\n        <span>\n          <mat-icon class=\"stroke-palette-icon\" svgIcon=\"square\"></mat-icon>\n          {{ 'igo.geo.draw.fill' | translate }}\n        </span>\n\n        <mat-form-field\n          class=\"fill-field\"\n          appearance=\"outline\"\n          floatLabel=\"always\"\n          tooltip-position=\"below\"\n          matTooltipShowDelay=\"500\"\n          [matTooltip]=\"'igo.geo.draw.colorPicker' | translate\">\n          <mat-label>{{ getFeatureFillColor() }}</mat-label>\n          <input\n            #fillColorInput\n            formControlName=\"fill\"\n            matInput\n            type=\"text\"\n            [style.background]=\"getFeatureFillColor()\"\n            [readonly]=\"true\"\n            [colorPicker]=\"getFeatureFillColor()\"\n            [cpWidth]=\"'200px'\"\n            [cpOutputFormat]=\"'rgba'\"\n            [cpPosition]=\"'bottom'\"\n            [cpPositionOffset]=\"'-75%'\"\n            [cpCancelButton]=\"true\"\n            [cpCancelButtonText]=\"'igo.geo.draw.cancel' | translate\"\n            [cpOKButton]=\"true\"\n            (colorPickerChange)=\"styleModalData.fillColor = $event\">\n        </mat-form-field>\n      </div>\n\n      <div class=\"stroke-color-picker mat-typography\">\n        <span>\n          <mat-icon\n            class=\"stroke-palette-icon\"\n            svgIcon=\"square-outline\">\n          </mat-icon>\n          {{'igo.geo.draw.stroke' | translate}}\n        </span>\n\n        <mat-form-field\n          class=\"stroke-field\"\n          appearance=\"outline\"\n          floatLabel=\"always\"\n          tooltip-position=\"below\"\n          matTooltipShowDelay=\"500\"\n          [matTooltip]=\"'igo.geo.draw.colorPicker' | translate\">\n          <mat-label>{{ getFeatureStrokeColor() }}</mat-label>\n          <input\n            #strokeColorInput\n            formControlName=\"stroke\"\n            matInput\n            type=\"text\"\n            [style.background]=\"getFeatureStrokeColor()\"\n            [readonly]=\"true\"\n            [colorPicker]=\"getFeatureStrokeColor()\"\n            [cpWidth]=\"'200px'\"\n            [cpPosition]=\"'bottom'\"\n            [cpPositionOffset]=\"'-75%'\"\n            [cpOutputFormat]=\"'rgba'\"\n            [cpCancelButton]=\"true\"\n            [cpCancelButtonText]=\"'igo.geo.draw.cancel' | translate\"\n            [cpOKButton]=\"true\"\n            (colorPickerChange)=\"styleModalData.strokeColor = $event\">\n        </mat-form-field>\n      </div>\n\n      <div class=\"igo-input-container\">\n        <mat-form-field appearance=\"outline\" class=\"igo-form-input-box\">\n          <mat-label>{{ 'igo.geo.draw.fontSize' | translate }}</mat-label>\n          <input\n            matInput\n            #testFontSize\n            type=\"number\"\n            placeholder=\"10\"\n            min=\"10\"\n            onkeydown=\"return event.keyCode !== 69\"\n            [value]=\"getFeatureFontSize()\"\n            (input)=\"styleModalData.fontSize = $event.target.value\">\n          <span matSuffix>px</span>\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\" class=\"igo-form-input-box\">\n          <mat-label>{{ 'igo.geo.draw.fontStyle' | translate }}</mat-label>\n          <mat-select\n            #testFontStyle\n            [value]=\"getFeatureFontStyle()\"\n            (selectionChange)=\"styleModalData.fontStyle = $event.value\">\n            <mat-option\n              *ngFor=\"let fontSelect of allFontStyles\"\n              [value]=\"fontSelect\">\n              {{ fontSelect }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n\n      <div class=\"igo-input-container\">\n        <mat-form-field appearance=\"outline\" class=\"igo-form-input-box\">\n          <mat-label>{{ 'igo.geo.draw.offsetX' | translate }}</mat-label>\n          <input\n            matInput\n            #offsetXInput\n            type=\"number\"\n            onkeydown=\"return event.keyCode !== 69\"\n            [value]=\"getFeatureOffsetX()\"\n            (input)=\"styleModalData.offsetX = $event.target.value\">\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\" class=\"igo-form-input-box\">\n          <mat-label>{{ 'igo.geo.draw.offsetY' | translate }}</mat-label>\n          <input\n            matInput\n            #offsetYInput\n            type=\"number\"\n            onkeydown=\"return event.keyCode !== 69\"\n            [value]=\"getFeatureOffsetY()\"\n            (input)=\"styleModalData.offsetY= $event.target.value\">\n        </mat-form-field>\n      </div>\n    </form>\n  </div>\n</div>\n<div mat-dialog-actions>\n  <button \n    mat-raised-button \n    (click)=\"cancelDrawing()\">{{'igo.geo.draw.cancel' | translate}}\n  </button>\n  <button \n    mat-raised-button \n    color=\"primary\" \n    (click)=\"confirm()\">OK\n  </button>\n</div>\n", styles: ["h2{font-weight:700;font-size:large}.igo-form{padding:10px}.fill-field,.stroke-field{width:130px}.fill-color-picker mat-icon{position:relative;top:7px}.fill-color-picker mat-form-field{left:8px}.stroke-color-picker mat-icon{position:relative;top:7px}.stroke-color-picker mat-form-field{left:35px}.box{width:25px;height:25px}.edition-drawing{padding:10px 0}.igo-input-container .mat-form-field+.mat-form-field{margin-left:8px}.igo-form-input-box{width:150px}button{margin-right:5px}\n"] }]
         }], function () {
         return [{ type: i1.MatDialogRef }, { type: i2$2.UntypedFormBuilder }, { type: DrawStyleService }, { type: undefined, decorators: [{
                         type: Inject,
@@ -18964,7 +19271,7 @@ i0.ɵɵsetComponentScope(LayerItemComponent, [i1$1.NgClass, i1$1.NgIf, i2.MatIco
 i0.ɵɵsetComponentScope(LayerLegendItemComponent, [i4.MatTooltip, i5.MatListItem, i9.MatLine, LayerLegendComponent], []);
 i0.ɵɵsetComponentScope(LayerListComponent, [i2$2.NgControlStatus, i1$1.NgClass, i1$1.NgForOf, i1$1.NgIf, i1$1.NgTemplateOutlet, i2$2.NgModel, i11.MatDivider, i7$2.MatMenu, i7$2.MatMenuTrigger, i2.MatIcon, i3.MatButton, i4.MatTooltip, i5.MatList, i5.MatListItem, i13$1.MatSlider, i7$1.MatBadge, i12$1.MatCheckbox, i5$1.ListItemDirective, i5$1.ListComponent, i5$1.PanelComponent, LayerItemComponent,
     LayerListToolComponent], [i1$1.AsyncPipe, i7.TranslatePipe]);
-i0.ɵɵsetComponentScope(LayerLegendListComponent, [i1$1.NgForOf, i1$1.NgIf, i11.MatDivider, i15$1.MatSlideToggle, i4.MatTooltip, i5$1.ListItemDirective, i5$1.ListComponent, LayerLegendItemComponent], [i1$1.AsyncPipe, i7.TranslatePipe]);
+i0.ɵɵsetComponentScope(LayerLegendListComponent, [i1$1.NgForOf, i1$1.NgIf, i11.MatDivider, i23.MatSlideToggle, i4.MatTooltip, i5$1.ListItemDirective, i5$1.ListComponent, LayerLegendItemComponent], [i1$1.AsyncPipe, i7.TranslatePipe]);
 
 /**
  * @ignore
@@ -19235,7 +19542,7 @@ AddCatalogDialogComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: A
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AddCatalogDialogComponent, [{
             type: Component,
-            args: [{ selector: 'igo-add-catalog-dialog', template: "<h1 mat-dialog-title class=\"mat-typography\">{{'igo.geo.catalog.library.addTitle' | translate}}</h1>\r\n<div mat-dialog-content class=\"mat-typography\">\r\n  <form class=\"igo-form\" [formGroup]=\"form\">\r\n    <div class=\"igo-input-container\">\r\n      <mat-form-field>\r\n        <input type=\"text\" formControlName=\"title\" placeholder=\"{{'igo.geo.printForm.title' | translate}}\" matInput [matAutocomplete]=\"auto2\">\r\n        <mat-autocomplete #auto2=\"matAutocomplete\" (optionSelected)='changeUrlOrTitle($event.option.value)'>\r\n          <mat-option *ngFor=\"let predefinedCatalog of (predefinedCatalogsList$ | async)\" matTooltipShowDelay=\"500\"\r\n            [matTooltip]=\"predefinedCatalog.title\" [value]=\"predefinedCatalog\">\r\n            {{predefinedCatalog.title}}\r\n          </mat-option>\r\n        </mat-autocomplete>\r\n      </mat-form-field>\r\n    </div>\r\n    <div class=\"igo-input-container\">\r\n      <mat-form-field>\r\n        <input type=\"text\" formControlName=\"url\" placeholder=\"URL\" matInput [matAutocomplete]=\"auto\">\r\n        <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)='changeUrlOrTitle($event.option.value)'>\r\n          <mat-option *ngFor=\"let predefinedCatalog of (predefinedCatalogsList$ | async)\" matTooltipShowDelay=\"500\"\r\n            [matTooltip]=\"predefinedCatalog.url\" [value]=\"predefinedCatalog\">\r\n            {{predefinedCatalog.url}}\r\n          </mat-option>\r\n        </mat-autocomplete>\r\n      </mat-form-field>\r\n    </div>\r\n    <div class=\"igo-input-container\">\r\n      <mat-form-field>\r\n        <mat-select\r\n          formControlName=\"type\"\r\n          placeholder=\"Type\">\r\n          <mat-option\r\n            *ngFor=\"let type of typeCapabilities\"\r\n            [value]=\"type\"\r\n            (click)=\"$event.stopPropagation()\">\r\n              <p mat-line>{{type}}</p>\r\n          </mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </div>\r\n  </form>\r\n  <span *ngIf=\"error && addedCatalog && emailAddress\">\r\n    <p class=\"error\">{{languageService.translate.instant('igo.geo.catalog.externalProvider.unavailableWithEmail', { value: addedCatalog.url, email: emailAddress })}}</p>\r\n  </span>\r\n  <span *ngIf=\"error && addedCatalog && !emailAddress\">\r\n    <p class=\"error\">{{languageService.translate.instant('igo.geo.catalog.unavailable', { value: addedCatalog.url })}}</p>\r\n  </span>\r\n</div>\r\n<div mat-dialog-actions style=\"justify-content: center\">\r\n  <div class=\"igo-form-button-group add-catalog-button-top-padding\">\r\n    <button\r\n      mat-raised-button\r\n      type=\"button\"\r\n      (click)=\"cancel()\">\r\n      {{'igo.geo.catalog.library.cancel' | translate}}\r\n    </button>\r\n    <button\r\n      id=\"addCatalogBtnDialog\"\r\n      mat-raised-button\r\n      type=\"button\"\r\n      color=\"primary\"\r\n      [disabled]=\"!form.valid\"\r\n      (click)=\"addCatalog(form.value)\">\r\n      {{'igo.geo.catalog.library.add' | translate}}\r\n    </button>\r\n  </div>\r\n</div>", styles: ["mat-form-field{width:100%}.add-catalog-button-top-padding{padding-top:25px}.igo-form{padding:10px 5px 5px}.igo-form-button-group{text-align:center}button{cursor:pointer}button#addCatalogBtnDialog[disabled=true]{cursor:default;background-color:#0000001f;color:#00000042}.error{color:red}\n"] }]
+            args: [{ selector: 'igo-add-catalog-dialog', template: "<h1 mat-dialog-title class=\"mat-typography\">{{'igo.geo.catalog.library.addTitle' | translate}}</h1>\n<div mat-dialog-content class=\"mat-typography\">\n  <form class=\"igo-form\" [formGroup]=\"form\">\n    <div class=\"igo-input-container\">\n      <mat-form-field>\n        <input type=\"text\" formControlName=\"title\" placeholder=\"{{'igo.geo.printForm.title' | translate}}\" matInput [matAutocomplete]=\"auto2\">\n        <mat-autocomplete #auto2=\"matAutocomplete\" (optionSelected)='changeUrlOrTitle($event.option.value)'>\n          <mat-option *ngFor=\"let predefinedCatalog of (predefinedCatalogsList$ | async)\" matTooltipShowDelay=\"500\"\n            [matTooltip]=\"predefinedCatalog.title\" [value]=\"predefinedCatalog\">\n            {{predefinedCatalog.title}}\n          </mat-option>\n        </mat-autocomplete>\n      </mat-form-field>\n    </div>\n    <div class=\"igo-input-container\">\n      <mat-form-field>\n        <input type=\"text\" formControlName=\"url\" placeholder=\"URL\" matInput [matAutocomplete]=\"auto\">\n        <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)='changeUrlOrTitle($event.option.value)'>\n          <mat-option *ngFor=\"let predefinedCatalog of (predefinedCatalogsList$ | async)\" matTooltipShowDelay=\"500\"\n            [matTooltip]=\"predefinedCatalog.url\" [value]=\"predefinedCatalog\">\n            {{predefinedCatalog.url}}\n          </mat-option>\n        </mat-autocomplete>\n      </mat-form-field>\n    </div>\n    <div class=\"igo-input-container\">\n      <mat-form-field>\n        <mat-select\n          formControlName=\"type\"\n          placeholder=\"Type\">\n          <mat-option\n            *ngFor=\"let type of typeCapabilities\"\n            [value]=\"type\"\n            (click)=\"$event.stopPropagation()\">\n              <p mat-line>{{type}}</p>\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n    </div>\n  </form>\n  <span *ngIf=\"error && addedCatalog && emailAddress\">\n    <p class=\"error\">{{languageService.translate.instant('igo.geo.catalog.externalProvider.unavailableWithEmail', { value: addedCatalog.url, email: emailAddress })}}</p>\n  </span>\n  <span *ngIf=\"error && addedCatalog && !emailAddress\">\n    <p class=\"error\">{{languageService.translate.instant('igo.geo.catalog.unavailable', { value: addedCatalog.url })}}</p>\n  </span>\n</div>\n<div mat-dialog-actions style=\"justify-content: center\">\n  <div class=\"igo-form-button-group add-catalog-button-top-padding\">\n    <button\n      mat-raised-button\n      type=\"button\"\n      (click)=\"cancel()\">\n      {{'igo.geo.catalog.library.cancel' | translate}}\n    </button>\n    <button\n      id=\"addCatalogBtnDialog\"\n      mat-raised-button\n      type=\"button\"\n      color=\"primary\"\n      [disabled]=\"!form.valid\"\n      (click)=\"addCatalog(form.value)\">\n      {{'igo.geo.catalog.library.add' | translate}}\n    </button>\n  </div>\n</div>", styles: ["mat-form-field{width:100%}.add-catalog-button-top-padding{padding-top:25px}.igo-form{padding:10px 5px 5px}.igo-form-button-group{text-align:center}button{cursor:pointer}button#addCatalogBtnDialog[disabled=true]{cursor:default;background-color:#0000001f;color:#00000042}.error{color:red}\n"] }]
         }], function () {
         return [{ type: i2$2.UntypedFormBuilder }, { type: i2$1.LanguageService }, { type: i2$1.ConfigService }, { type: i1.MatDialogRef }, { type: undefined, decorators: [{
                         type: Optional
@@ -19450,7 +19757,7 @@ CatalogLibaryComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Cata
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CatalogLibaryComponent, [{
             type: Component,
-            args: [{ selector: 'igo-catalog-library', changeDetection: ChangeDetectionStrategy.OnPush, template: "<igo-list [navigation]=\"false\">\r\n  <ng-template ngFor let-catalog [ngForOf]=\"getCatalogs() | async\">\r\n    <igo-catalog-library-item\r\n      igoListItem\r\n      color=\"accent\"\r\n      [map]=\"map\"\r\n      [catalog]=\"catalog\"\r\n      (catalogRemove)=\"onCatalogRemove(catalog)\"\r\n      (select)=\"onCatalogSelect(catalog)\">\r\n    </igo-catalog-library-item>\r\n  </ng-template>\r\n</igo-list>\r\n\r\n<div *ngIf=\"addCatalogAllowed\" class=btnAddCatalog>\r\n  <button\r\n    mat-raised-button\r\n    [matTooltip]=\"'igo.geo.catalog.library.addBtn' | translate\"\r\n    matTooltipPosition=\"above\"\r\n    color=\"primary\"\r\n    (click)=\"addCatalogDialog()\">\r\n    {{'igo.geo.catalog.library.addBtn' | translate}}\r\n    <mat-icon svgIcon=\"earth-plus\"></mat-icon>\r\n  </button>\r\n</div>\r\n", styles: ["igo-list{height:auto}.btnAddCatalog{justify-content:center;display:flex;margin:30px 0}\n"] }]
+            args: [{ selector: 'igo-catalog-library', changeDetection: ChangeDetectionStrategy.OnPush, template: "<igo-list [navigation]=\"false\">\n  <ng-template ngFor let-catalog [ngForOf]=\"getCatalogs() | async\">\n    <igo-catalog-library-item\n      igoListItem\n      color=\"accent\"\n      [map]=\"map\"\n      [catalog]=\"catalog\"\n      (catalogRemove)=\"onCatalogRemove(catalog)\"\n      (select)=\"onCatalogSelect(catalog)\">\n    </igo-catalog-library-item>\n  </ng-template>\n</igo-list>\n\n<div *ngIf=\"addCatalogAllowed\" class=btnAddCatalog>\n  <button\n    mat-raised-button\n    [matTooltip]=\"'igo.geo.catalog.library.addBtn' | translate\"\n    matTooltipPosition=\"above\"\n    color=\"primary\"\n    (click)=\"addCatalogDialog()\">\n    {{'igo.geo.catalog.library.addBtn' | translate}}\n    <mat-icon svgIcon=\"earth-plus\"></mat-icon>\n  </button>\n</div>\n", styles: ["igo-list{height:auto}.btnAddCatalog{justify-content:center;display:flex;margin:30px 0}\n"] }]
         }], function () { return [{ type: CapabilitiesService }, { type: i2$1.MessageService }, { type: i2$1.LanguageService }, { type: i2$1.StorageService }, { type: i1.MatDialog }]; }, { store: [{
                 type: Input
             }], map: [{
@@ -19536,7 +19843,7 @@ CatalogLibaryItemComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CatalogLibaryItemComponent, [{
             type: Component,
-            args: [{ selector: 'igo-catalog-library-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-list-item>\r\n  <h4 mat-line>\r\n    {{title}}\r\n  </h4>\r\n  <mat-icon\r\n    class=\"igo-external-provider\"\r\n    *ngIf=\"catalog.externalProvider\"\r\n    tooltip-position=\"below\"\r\n    matTooltipShowDelay=\"500\"\r\n    [matTooltip]=\"'igo.geo.catalog.externalProvider.catalog' | translate\"\r\n    color=\"primary\"\r\n    (click)=\"$event.stopPropagation()\"\r\n    svgIcon=\"earth-arrow-right\">\r\n  </mat-icon>\r\n\r\n  <button\r\n  *ngIf=\"catalog.removable\"\r\n  mat-icon-button\r\n  tooltip-position=\"below\"\r\n  matTooltipShowDelay=\"500\"\r\n  [matTooltip]=\"'igo.geo.catalog.library.remove' | translate\"\r\n  color=\"warn\"\r\n  (click)=\"removeCatalogFromLibrary($event)\">\r\n  <mat-icon svgIcon=\"delete\"></mat-icon>\r\n</button>\r\n\r\n<button\r\n  class=\"igo-blank\"\r\n  *ngIf=\"!catalog.removable\"\r\n  disabled=\"true\"\r\n  mat-icon-button>\r\n  <mat-icon svgIcon=\"blank\"></mat-icon>\r\n</button>\r\n</mat-list-item>\r\n", styles: [".igo-blank{cursor:pointer}.igo-external-provider{cursor:help}\n"] }]
+            args: [{ selector: 'igo-catalog-library-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-list-item>\n  <h4 mat-line>\n    {{title}}\n  </h4>\n  <mat-icon\n    class=\"igo-external-provider\"\n    *ngIf=\"catalog.externalProvider\"\n    tooltip-position=\"below\"\n    matTooltipShowDelay=\"500\"\n    [matTooltip]=\"'igo.geo.catalog.externalProvider.catalog' | translate\"\n    color=\"primary\"\n    (click)=\"$event.stopPropagation()\"\n    svgIcon=\"earth-arrow-right\">\n  </mat-icon>\n\n  <button\n  *ngIf=\"catalog.removable\"\n  mat-icon-button\n  tooltip-position=\"below\"\n  matTooltipShowDelay=\"500\"\n  [matTooltip]=\"'igo.geo.catalog.library.remove' | translate\"\n  color=\"warn\"\n  (click)=\"removeCatalogFromLibrary($event)\">\n  <mat-icon svgIcon=\"delete\"></mat-icon>\n</button>\n\n<button\n  class=\"igo-blank\"\n  *ngIf=\"!catalog.removable\"\n  disabled=\"true\"\n  mat-icon-button>\n  <mat-icon svgIcon=\"blank\"></mat-icon>\n</button>\n</mat-list-item>\n", styles: [".igo-blank{cursor:pointer}.igo-external-provider{cursor:help}\n"] }]
         }], null, { catalog: [{
                 type: Input
             }], map: [{
@@ -20295,7 +20602,7 @@ DownloadButtonComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Dow
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DownloadButtonComponent, [{
             type: Component,
-            args: [{ selector: 'igo-download-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\r\n  *ngIf=\"options && options.download && (options.download['dynamicUrl'] || options.download['url']) \"\r\n  mat-icon-button\r\n  tooltip-position=\"below\"\r\n  matTooltipShowDelay=\"500\"\r\n  [matTooltip]=\"'igo.geo.download.action' | translate\"\r\n  [color]=\"color\"\r\n  (click)=\"openDownload(layer)\">\r\n  <mat-icon svgIcon=\"download\"></mat-icon>\r\n</button>\r\n" }]
+            args: [{ selector: 'igo-download-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  *ngIf=\"options && options.download && (options.download['dynamicUrl'] || options.download['url']) \"\n  mat-icon-button\n  tooltip-position=\"below\"\n  matTooltipShowDelay=\"500\"\n  [matTooltip]=\"'igo.geo.download.action' | translate\"\n  [color]=\"color\"\n  (click)=\"openDownload(layer)\">\n  <mat-icon svgIcon=\"download\"></mat-icon>\n</button>\n" }]
         }], function () { return [{ type: DownloadService }]; }, { layer: [{
                 type: Input
             }], color: [{
@@ -20396,13 +20703,13 @@ IgoDrawModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [FormsModul
                         BrowserModule,
                         BrowserAnimationsModule
                     ],
-                    declarations: [DrawComponent, DrawPopupComponent, DrawShorcutsComponent],
+                    declarations: [DrawComponent, DrawPopupComponent, DrawLayerPopupComponent, DrawShorcutsComponent],
                     exports: [DrawComponent]
                 }]
         }], null, null);
 })();
 (function () {
-    (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(IgoDrawModule, { declarations: [DrawComponent, DrawPopupComponent, DrawShorcutsComponent], imports: [FormsModule,
+    (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(IgoDrawModule, { declarations: [DrawComponent, DrawPopupComponent, DrawLayerPopupComponent, DrawShorcutsComponent], imports: [FormsModule,
             ReactiveFormsModule,
             CommonModule,
             MatButtonModule,
@@ -21471,7 +21778,7 @@ MeasurerDialogComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Mea
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MeasurerDialogComponent, [{
             type: Component,
-            args: [{ selector: 'igo-measurer-dialog', template: "<h3 mat-dialog-title>{{'igo.geo.measure.dialog.title' | translate}}</h3>\r\n\r\n<table *ngIf=\"data.length > 0\"\r\n  class=\"mat-typography\">\r\n  <thead>\r\n    <tr>\r\n      <th colspan=\"2\">{{'igo.geo.measure.dialog.length.title' | translate}}</th>\r\n    </tr>\r\n  </thead>\r\n  <tbody>\r\n    <tr>\r\n      <td>{{data.length | measureFormat: measureLengthUnit.Meters}}</td>\r\n      <td>{{'igo.geo.measure.dialog.lengthInMeters' | translate}}</td>\r\n    </tr>\r\n    <tr>\r\n      <td>{{data.length | measureFormat: measureLengthUnit.Kilometers}}</td>\r\n      <td>{{'igo.geo.measure.dialog.lengthInKilometers' | translate}}</td>\r\n    </tr>\r\n    <tr>\r\n      <td>{{data.length | measureFormat: measureLengthUnit.Miles}}</td>\r\n      <td>{{'igo.geo.measure.dialog.lengthInMiles' | translate}}</td>\r\n    </tr>\r\n    <tr>\r\n      <td>{{data.length | measureFormat: measureLengthUnit.Feet}}</td>\r\n      <td>{{'igo.geo.measure.dialog.lengthInFeet' | translate}}</td>\r\n    </tr>\r\n  </tbody>\r\n</table>\r\n\r\n<table *ngIf=\"data.area > 0\"\r\n  class=\"mat-typography\">\r\n  <thead>\r\n    <tr>\r\n      <th colspan=\"2\">{{'igo.geo.measure.dialog.area.title' | translate}}</th>\r\n    </tr>\r\n  </thead>\r\n  <tbody>\r\n    <tr>\r\n      <td>{{data.area | measureFormat: measureAreaUnit.SquareMeters}}</td>\r\n      <td>{{'igo.geo.measure.dialog.areaInSquareMeters' | translate}}</td>\r\n    </tr>\r\n    <tr>\r\n      <td>{{data.area | measureFormat:measureAreaUnit.SquareKilometers}}</td>\r\n      <td>{{'igo.geo.measure.dialog.areaInSquareKilometers' | translate}}</td>\r\n    </tr>\r\n    <tr>\r\n      <td>{{data.area | measureFormat: measureAreaUnit.SquareMiles}}</td>\r\n      <td>{{'igo.geo.measure.dialog.areaInSquareMiles' | translate}}</td>\r\n    </tr>\r\n    <tr>\r\n      <td>{{data.area | measureFormat: measureAreaUnit.Acres}}</td>\r\n      <td>{{'igo.geo.measure.dialog.areaInAcres' | translate}}</td>\r\n    </tr>\r\n    <tr>\r\n      <td>{{data.area | measureFormat: measureAreaUnit.Hectares}}</td>\r\n      <td>{{'igo.geo.measure.dialog.areaInHectares' | translate}}</td>\r\n    </tr>\r\n    <tr>\r\n      <td>{{'igo.geo.measure.dialog.perimeterInMeters' | translate}}</td>\r\n      <td>{{data.perimeter | measureFormat: measureLengthUnit.Meters}}</td>\r\n    </tr>\r\n  </tbody>\r\n</table>\r\n", styles: [":host{font-family:Roboto,Helvetica Neue,sans-serif}h3{text-align:center;margin:0}table{width:100%;padding:10px}table tbody tr td:last-child{padding-left:10px}\n"] }]
+            args: [{ selector: 'igo-measurer-dialog', template: "<h3 mat-dialog-title>{{'igo.geo.measure.dialog.title' | translate}}</h3>\n\n<table *ngIf=\"data.length > 0\"\n  class=\"mat-typography\">\n  <thead>\n    <tr>\n      <th colspan=\"2\">{{'igo.geo.measure.dialog.length.title' | translate}}</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td>{{data.length | measureFormat: measureLengthUnit.Meters}}</td>\n      <td>{{'igo.geo.measure.dialog.lengthInMeters' | translate}}</td>\n    </tr>\n    <tr>\n      <td>{{data.length | measureFormat: measureLengthUnit.Kilometers}}</td>\n      <td>{{'igo.geo.measure.dialog.lengthInKilometers' | translate}}</td>\n    </tr>\n    <tr>\n      <td>{{data.length | measureFormat: measureLengthUnit.Miles}}</td>\n      <td>{{'igo.geo.measure.dialog.lengthInMiles' | translate}}</td>\n    </tr>\n    <tr>\n      <td>{{data.length | measureFormat: measureLengthUnit.Feet}}</td>\n      <td>{{'igo.geo.measure.dialog.lengthInFeet' | translate}}</td>\n    </tr>\n  </tbody>\n</table>\n\n<table *ngIf=\"data.area > 0\"\n  class=\"mat-typography\">\n  <thead>\n    <tr>\n      <th colspan=\"2\">{{'igo.geo.measure.dialog.area.title' | translate}}</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td>{{data.area | measureFormat: measureAreaUnit.SquareMeters}}</td>\n      <td>{{'igo.geo.measure.dialog.areaInSquareMeters' | translate}}</td>\n    </tr>\n    <tr>\n      <td>{{data.area | measureFormat:measureAreaUnit.SquareKilometers}}</td>\n      <td>{{'igo.geo.measure.dialog.areaInSquareKilometers' | translate}}</td>\n    </tr>\n    <tr>\n      <td>{{data.area | measureFormat: measureAreaUnit.SquareMiles}}</td>\n      <td>{{'igo.geo.measure.dialog.areaInSquareMiles' | translate}}</td>\n    </tr>\n    <tr>\n      <td>{{data.area | measureFormat: measureAreaUnit.Acres}}</td>\n      <td>{{'igo.geo.measure.dialog.areaInAcres' | translate}}</td>\n    </tr>\n    <tr>\n      <td>{{data.area | measureFormat: measureAreaUnit.Hectares}}</td>\n      <td>{{'igo.geo.measure.dialog.areaInHectares' | translate}}</td>\n    </tr>\n    <tr>\n      <td>{{'igo.geo.measure.dialog.perimeterInMeters' | translate}}</td>\n      <td>{{data.perimeter | measureFormat: measureLengthUnit.Meters}}</td>\n    </tr>\n  </tbody>\n</table>\n", styles: [":host{font-family:Roboto,Helvetica Neue,sans-serif}h3{text-align:center;margin:0}table{width:100%;padding:10px}table tbody tr td:last-child{padding-left:10px}\n"] }]
         }], function () {
         return [{ type: i1.MatDialogRef }, { type: undefined, decorators: [{
                         type: Inject,
@@ -22528,7 +22835,7 @@ MeasurerComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MeasurerC
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MeasurerComponent, [{
             type: Component,
-            args: [{ selector: 'igo-measurer', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div>\r\n  <div class=\"measure-type-toggle mat-typography\">\r\n    <mat-button-toggle-group\r\n      [value]=\"activeMeasureType\"\r\n      (change)=\"onMeasureTypeChange($event.value)\">\r\n      <mat-button-toggle [value]=\"measureType.Length\">\r\n        {{('igo.geo.measure.' + measureType.Length) | translate}}\r\n      </mat-button-toggle>\r\n      <mat-button-toggle [value]=\"measureType.Area\">\r\n        {{('igo.geo.measure.' + measureType.Area) | translate}}\r\n      </mat-button-toggle>\r\n    </mat-button-toggle-group>\r\n  </div>\r\n\r\n  <div class=\"measure-options mat-typography\">\r\n    <mat-slide-toggle\r\n      [disabled]=\"drawControlIsDisabled\"\r\n      [checked]=\"drawControlIsActive\"\r\n      [labelPosition]=\"'before'\"\r\n      (change)=\"onToggleDrawControl($event.checked)\">\r\n      {{'igo.geo.measure.toggleActive' | translate}}\r\n    </mat-slide-toggle>\r\n\r\n    <mat-divider *ngIf=\"(hasLine$ | async)\"></mat-divider>\r\n\r\n    <mat-slide-toggle *ngIf=\"(hasLine$ | async)\"\r\n      [checked]=\"displayLines\"\r\n      [labelPosition]=\"'before'\"\r\n      (change)=\"onToggleDisplayLines($event.checked)\">\r\n      {{'igo.geo.measure.toggleDisplayLines' | translate}}\r\n    </mat-slide-toggle>\r\n\r\n    <mat-divider *ngIf=\"(hasLine$ | async) || (hasArea$ | async)\"></mat-divider>\r\n\r\n    <mat-slide-toggle *ngIf=\"(hasArea$ | async)\"\r\n      [checked]=\"displayDistance\"\r\n      [labelPosition]=\"'before'\"\r\n      (change)=\"onToggleDisplayDistance($event.checked)\">\r\n      {{'igo.geo.measure.toggleDisplayDistance' | translate}}\r\n    </mat-slide-toggle>\r\n\r\n    <mat-slide-toggle *ngIf=\"(hasArea$ | async)\"\r\n      [checked]=\"displayAreas\"\r\n      [labelPosition]=\"'before'\"\r\n      (change)=\"onToggleDisplayAreas($event.checked)\">\r\n      {{'igo.geo.measure.toggleDisplayAreas' | translate}}\r\n    </mat-slide-toggle>\r\n\r\n    <mat-divider *ngIf=\"(hasArea$ | async)\"></mat-divider>\r\n\r\n    <mat-slide-toggle\r\n      [checked]=\"measureUnitsAuto\"\r\n      [labelPosition]=\"'before'\"\r\n      (change)=\"onToggleMeasureUnitsAuto($event.checked)\">\r\n      {{'igo.geo.measure.toggleAutoUnits' | translate}}\r\n    </mat-slide-toggle>\r\n  </div>\r\n\r\n  <ng-container *ngIf=\"measure$ | async as measure\">\r\n    <igo-measurer-item *ngIf=\"activeMeasureType === measureType.Length || activeMeasureType === measureType.Area\"\r\n      [measureType]=\"measureType.Length\"\r\n      [measureUnit]=\"measureLengthUnit.Meters\"\r\n      [measure]=\"measure.length\"\r\n      [auto]=\"measureUnitsAuto\"\r\n      [placeholder]=\"(activeMeasureType === measureType.Area ? 'igo.geo.measure.perimeter' : 'igo.geo.measure.length') | translate\"\r\n      (measureUnitChange)=\"onLengthUnitChange($event)\">\r\n    </igo-measurer-item>\r\n\r\n    <igo-measurer-item *ngIf=\"activeMeasureType === measureType.Area\"\r\n      [measureType]=\"measureType.Area\"\r\n      [measureUnit]=\"measureAreaUnit.SquareMeters\"\r\n      [measure]=\"measure.area\"\r\n      [auto]=\"measureUnitsAuto\"\r\n      [placeholder]=\"'igo.geo.measure.area' | translate\"\r\n      (measureUnitChange)=\"onAreaUnitChange($event)\">\r\n    </igo-measurer-item>\r\n  </ng-container>\r\n\r\n  <mat-divider *ngIf=\"(hasLine$ | async) || (hasArea$ | async)\"></mat-divider>\r\n\r\n  <div class=\"measure-store-buttons\">\r\n    <button *ngIf=\"(hasLine$ | async) || (hasArea$ | async)\"\r\n      mat-icon-button\r\n      [matTooltip]=\"'igo.geo.measure.actionbar.calculate.tooltip' | translate\"\r\n      [disabled]=\"(selectedFeatures$ | async).length === 0\"\r\n      color=\"accent\"\r\n      (click)=\"onCalculateClick()\">\r\n      <mat-icon svgIcon=\"calculator\"></mat-icon>\r\n    </button>\r\n\r\n    <button *ngIf=\"(hasLine$ | async) || (hasArea$ | async)\"\r\n      mat-icon-button\r\n      [matTooltip]=\"'igo.geo.measure.actionbar.delete.tooltip' | translate\"\r\n      [disabled]=\"(selectedFeatures$ | async).length === 0\"\r\n      color=\"warn\"\r\n      (click)=\"onDeleteClick()\">\r\n      <mat-icon svgIcon=\"delete\"></mat-icon>\r\n    </button>\r\n\r\n    <!--button\r\n      mat-icon-button\r\n      [matTooltip]=\"'igo.geo.measure.actionbar.modify.tooltip' | translate\"\r\n      [disabled]=\"(selectedFeatures$ | async).length !== 1\"\r\n      (click)=\"onModifyClick()\">\r\n      <mat-icon svgIcon=\"edit\"></mat-icon>\r\n    </button-->\r\n  </div>\r\n\r\n  <igo-entity-table\r\n    #table\r\n    class=\"table-compact\"\r\n    [store]=\"store\"\r\n    [template]=\"tableTemplate\">\r\n  </igo-entity-table>\r\n</div>\r\n", styles: [".measure-type-toggle{padding:10px;text-align:center}.measure-type-toggle mat-button-toggle-group{width:100%}.measure-type-toggle mat-button-toggle-group mat-button-toggle{width:50%}.measure-options{overflow-x:hidden}.measure-options mat-slide-toggle{width:100%;margin:10px}.measure-options mat-slide-toggle ::ng-deep .mat-slide-toggle-content{width:calc(100% - 60px)}.measure-store-buttons{margin-left:-2px}.measure-store-buttons button:first-of-type{margin-left:14px}.table-compact ::ng-deep .mat-header-cell.mat-column-selectionCheckbox{width:52px}\n"] }]
+            args: [{ selector: 'igo-measurer', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div>\n  <div class=\"measure-type-toggle mat-typography\">\n    <mat-button-toggle-group\n      [value]=\"activeMeasureType\"\n      (change)=\"onMeasureTypeChange($event.value)\">\n      <mat-button-toggle [value]=\"measureType.Length\">\n        {{('igo.geo.measure.' + measureType.Length) | translate}}\n      </mat-button-toggle>\n      <mat-button-toggle [value]=\"measureType.Area\">\n        {{('igo.geo.measure.' + measureType.Area) | translate}}\n      </mat-button-toggle>\n    </mat-button-toggle-group>\n  </div>\n\n  <div class=\"measure-options mat-typography\">\n    <mat-slide-toggle\n      [disabled]=\"drawControlIsDisabled\"\n      [checked]=\"drawControlIsActive\"\n      [labelPosition]=\"'before'\"\n      (change)=\"onToggleDrawControl($event.checked)\">\n      {{'igo.geo.measure.toggleActive' | translate}}\n    </mat-slide-toggle>\n\n    <mat-divider *ngIf=\"(hasLine$ | async)\"></mat-divider>\n\n    <mat-slide-toggle *ngIf=\"(hasLine$ | async)\"\n      [checked]=\"displayLines\"\n      [labelPosition]=\"'before'\"\n      (change)=\"onToggleDisplayLines($event.checked)\">\n      {{'igo.geo.measure.toggleDisplayLines' | translate}}\n    </mat-slide-toggle>\n\n    <mat-divider *ngIf=\"(hasLine$ | async) || (hasArea$ | async)\"></mat-divider>\n\n    <mat-slide-toggle *ngIf=\"(hasArea$ | async)\"\n      [checked]=\"displayDistance\"\n      [labelPosition]=\"'before'\"\n      (change)=\"onToggleDisplayDistance($event.checked)\">\n      {{'igo.geo.measure.toggleDisplayDistance' | translate}}\n    </mat-slide-toggle>\n\n    <mat-slide-toggle *ngIf=\"(hasArea$ | async)\"\n      [checked]=\"displayAreas\"\n      [labelPosition]=\"'before'\"\n      (change)=\"onToggleDisplayAreas($event.checked)\">\n      {{'igo.geo.measure.toggleDisplayAreas' | translate}}\n    </mat-slide-toggle>\n\n    <mat-divider *ngIf=\"(hasArea$ | async)\"></mat-divider>\n\n    <mat-slide-toggle\n      [checked]=\"measureUnitsAuto\"\n      [labelPosition]=\"'before'\"\n      (change)=\"onToggleMeasureUnitsAuto($event.checked)\">\n      {{'igo.geo.measure.toggleAutoUnits' | translate}}\n    </mat-slide-toggle>\n  </div>\n\n  <ng-container *ngIf=\"measure$ | async as measure\">\n    <igo-measurer-item *ngIf=\"activeMeasureType === measureType.Length || activeMeasureType === measureType.Area\"\n      [measureType]=\"measureType.Length\"\n      [measureUnit]=\"measureLengthUnit.Meters\"\n      [measure]=\"measure.length\"\n      [auto]=\"measureUnitsAuto\"\n      [placeholder]=\"(activeMeasureType === measureType.Area ? 'igo.geo.measure.perimeter' : 'igo.geo.measure.length') | translate\"\n      (measureUnitChange)=\"onLengthUnitChange($event)\">\n    </igo-measurer-item>\n\n    <igo-measurer-item *ngIf=\"activeMeasureType === measureType.Area\"\n      [measureType]=\"measureType.Area\"\n      [measureUnit]=\"measureAreaUnit.SquareMeters\"\n      [measure]=\"measure.area\"\n      [auto]=\"measureUnitsAuto\"\n      [placeholder]=\"'igo.geo.measure.area' | translate\"\n      (measureUnitChange)=\"onAreaUnitChange($event)\">\n    </igo-measurer-item>\n  </ng-container>\n\n  <mat-divider *ngIf=\"(hasLine$ | async) || (hasArea$ | async)\"></mat-divider>\n\n  <div class=\"measure-store-buttons\">\n    <button *ngIf=\"(hasLine$ | async) || (hasArea$ | async)\"\n      mat-icon-button\n      [matTooltip]=\"'igo.geo.measure.actionbar.calculate.tooltip' | translate\"\n      [disabled]=\"(selectedFeatures$ | async).length === 0\"\n      color=\"accent\"\n      (click)=\"onCalculateClick()\">\n      <mat-icon svgIcon=\"calculator\"></mat-icon>\n    </button>\n\n    <button *ngIf=\"(hasLine$ | async) || (hasArea$ | async)\"\n      mat-icon-button\n      [matTooltip]=\"'igo.geo.measure.actionbar.delete.tooltip' | translate\"\n      [disabled]=\"(selectedFeatures$ | async).length === 0\"\n      color=\"warn\"\n      (click)=\"onDeleteClick()\">\n      <mat-icon svgIcon=\"delete\"></mat-icon>\n    </button>\n\n    <!--button\n      mat-icon-button\n      [matTooltip]=\"'igo.geo.measure.actionbar.modify.tooltip' | translate\"\n      [disabled]=\"(selectedFeatures$ | async).length !== 1\"\n      (click)=\"onModifyClick()\">\n      <mat-icon svgIcon=\"edit\"></mat-icon>\n    </button-->\n  </div>\n\n  <igo-entity-table\n    #table\n    class=\"table-compact\"\n    [store]=\"store\"\n    [template]=\"tableTemplate\">\n  </igo-entity-table>\n</div>\n", styles: [".measure-type-toggle{padding:10px;text-align:center}.measure-type-toggle mat-button-toggle-group{width:100%}.measure-type-toggle mat-button-toggle-group mat-button-toggle{width:50%}.measure-options{overflow-x:hidden}.measure-options mat-slide-toggle{width:100%;margin:10px}.measure-options mat-slide-toggle ::ng-deep .mat-slide-toggle-content{width:calc(100% - 60px)}.measure-store-buttons{margin-left:-2px}.measure-store-buttons button:first-of-type{margin-left:14px}.table-compact ::ng-deep .mat-header-cell.mat-column-selectionCheckbox{width:52px}\n"] }]
         }], function () { return [{ type: i2$1.LanguageService }, { type: i1.MatDialog }, { type: i2$1.StorageService }]; }, { map: [{
                 type: Input
             }], store: [{
@@ -23240,7 +23547,7 @@ GeometryFormFieldComponent = __decorate([
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(GeometryFormFieldComponent, [{
             type: Component,
-            args: [{ selector: 'igo-geometry-form-field', changeDetection: ChangeDetectionStrategy.OnPush, template: "<igo-geometry-form-field-input\r\n  [formControl]=\"formControl\"\r\n  [map]=\"map\"\r\n  [geometryType]=\"geometryType$ | async\"\r\n  [drawGuide]=\"drawGuide$ | async\"\r\n  [measure]=\"measure\"\r\n  [drawControlIsActive]=\"drawControlIsActive\"\r\n  [freehandDrawIsActive]=\"freehandDrawIsActive\"\r\n  [controlOptions]=\"controlOptions\"\r\n  [drawStyle]=\"drawStyle\"\r\n  [overlayStyle]=\"overlayStyle\">\r\n</igo-geometry-form-field-input>\r\n\r\n<div *ngIf=\"geometryTypeField\" class=\"geometry-type-toggle\">\r\n  <mat-button-toggle-group\r\n    [disabled]=\"(value$ | async) !== undefined\"\r\n    [(ngModel)]=\"geometryType\">\r\n    <mat-button-toggle\r\n      value=\"Point\"\r\n      [disabled]=\"geometryTypes.indexOf('Point') < 0\">\r\n      {{'igo.geo.geometry.point' | translate}}\r\n    </mat-button-toggle>\r\n    <mat-button-toggle\r\n      value=\"LineString\"\r\n      [disabled]=\"geometryTypes.indexOf('LineString') < 0\">\r\n      {{'igo.geo.geometry.line' | translate}}\r\n    </mat-button-toggle>\r\n    <mat-button-toggle\r\n      value=\"Polygon\"\r\n      [disabled]=\"geometryTypes.indexOf('Polygon') < 0\">\r\n      {{'igo.geo.geometry.polygon' | translate}}\r\n    </mat-button-toggle>\r\n  </mat-button-toggle-group>\r\n</div>\r\n\r\n<mat-form-field *ngIf=\"drawGuideField\" class=\"draw-guide-field\">\r\n  <input\r\n    matInput\r\n    type=\"number\"\r\n    [placeholder]=\"drawGuidePlaceholder\"\r\n    [(ngModel)]=\"drawGuide\">\r\n  <mat-icon\r\n    matPrefix\r\n    [color]=\"'primary'\"\r\n    svgIcon=\"adjust\">    \r\n  </mat-icon>\r\n  <span matSuffix class=\"draw-guide-units\">{{'igo.geo.measure.meters' | translate}}</span>\r\n</mat-form-field>", styles: [":host{display:block;width:100%}.geometry-type-toggle,.draw-guide-field{width:100%}.geometry-type-toggle{padding:10px;text-align:center}.draw-guide-field mat-icon{margin:0 10px}.draw-guide-units{padding:10px}\n"] }]
+            args: [{ selector: 'igo-geometry-form-field', changeDetection: ChangeDetectionStrategy.OnPush, template: "<igo-geometry-form-field-input\n  [formControl]=\"formControl\"\n  [map]=\"map\"\n  [geometryType]=\"geometryType$ | async\"\n  [drawGuide]=\"drawGuide$ | async\"\n  [measure]=\"measure\"\n  [drawControlIsActive]=\"drawControlIsActive\"\n  [freehandDrawIsActive]=\"freehandDrawIsActive\"\n  [controlOptions]=\"controlOptions\"\n  [drawStyle]=\"drawStyle\"\n  [overlayStyle]=\"overlayStyle\">\n</igo-geometry-form-field-input>\n\n<div *ngIf=\"geometryTypeField\" class=\"geometry-type-toggle\">\n  <mat-button-toggle-group\n    [disabled]=\"(value$ | async) !== undefined\"\n    [(ngModel)]=\"geometryType\">\n    <mat-button-toggle\n      value=\"Point\"\n      [disabled]=\"geometryTypes.indexOf('Point') < 0\">\n      {{'igo.geo.geometry.point' | translate}}\n    </mat-button-toggle>\n    <mat-button-toggle\n      value=\"LineString\"\n      [disabled]=\"geometryTypes.indexOf('LineString') < 0\">\n      {{'igo.geo.geometry.line' | translate}}\n    </mat-button-toggle>\n    <mat-button-toggle\n      value=\"Polygon\"\n      [disabled]=\"geometryTypes.indexOf('Polygon') < 0\">\n      {{'igo.geo.geometry.polygon' | translate}}\n    </mat-button-toggle>\n  </mat-button-toggle-group>\n</div>\n\n<mat-form-field *ngIf=\"drawGuideField\" class=\"draw-guide-field\">\n  <input\n    matInput\n    type=\"number\"\n    [placeholder]=\"drawGuidePlaceholder\"\n    [(ngModel)]=\"drawGuide\">\n  <mat-icon\n    matPrefix\n    [color]=\"'primary'\"\n    svgIcon=\"adjust\">    \n  </mat-icon>\n  <span matSuffix class=\"draw-guide-units\">{{'igo.geo.measure.meters' | translate}}</span>\n</mat-form-field>", styles: [":host{display:block;width:100%}.geometry-type-toggle,.draw-guide-field{width:100%}.geometry-type-toggle{padding:10px;text-align:center}.draw-guide-field mat-icon{margin:0 10px}.draw-guide-units{padding:10px}\n"] }]
         }], function () { return [{ type: i0.ChangeDetectorRef }]; }, { formControl: [{
                 type: Input
             }], map: [{
@@ -23429,7 +23736,7 @@ TimeFilterButtonComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: T
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TimeFilterButtonComponent, [{
             type: Component,
-            args: [{ selector: 'igo-time-filter-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button *ngIf=\"header && options.timeFilterable && options.timeFilter\"\r\n  mat-icon-button\r\n  collapsibleButton\r\n  tooltip-position=\"below\"\r\n  matTooltipShowDelay=\"500\"\r\n  [matTooltip]=\"'igo.geo.filter.filterBy' | translate\"\r\n  [color]=\"color\">\r\n  <mat-icon [matBadge]=\"badge\" matBadgeColor=\"warn\" matBadgeSize=\"medium\" svgIcon=\"history\"></mat-icon>\r\n</button>\r\n\r\n<div #ogcFilter class=\"igo-layer-actions-container\"\r\n*ngIf=\"header && options.timeFilterable && options.timeFilter\">\r\n  <igo-time-filter-item\r\n    *ngIf=\"timeFilterCollapse && options.timeFilter\"\r\n    igoListItem\r\n    [header]=\"false\"\r\n    [layer]=\"layer\">\r\n  </igo-time-filter-item>\r\n</div>\r\n" }]
+            args: [{ selector: 'igo-time-filter-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button *ngIf=\"header && options.timeFilterable && options.timeFilter\"\n  mat-icon-button\n  collapsibleButton\n  tooltip-position=\"below\"\n  matTooltipShowDelay=\"500\"\n  [matTooltip]=\"'igo.geo.filter.filterBy' | translate\"\n  [color]=\"color\">\n  <mat-icon [matBadge]=\"badge\" matBadgeColor=\"warn\" matBadgeSize=\"medium\" svgIcon=\"history\"></mat-icon>\n</button>\n\n<div #ogcFilter class=\"igo-layer-actions-container\"\n*ngIf=\"header && options.timeFilterable && options.timeFilter\">\n  <igo-time-filter-item\n    *ngIf=\"timeFilterCollapse && options.timeFilter\"\n    igoListItem\n    [header]=\"false\"\n    [layer]=\"layer\">\n  </igo-time-filter-item>\n</div>\n" }]
         }], function () { return []; }, { layer: [{
                 type: Input
             }], map: [{
@@ -24180,11 +24487,11 @@ TimeFilterFormComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Tim
             i0.ɵɵadvance(1);
             i0.ɵɵproperty("ngIf", ctx.style === "slider" && ctx.type !== "year");
         }
-    }, dependencies: [i1$1.NgForOf, i1$1.NgIf, i2$2.DefaultValueAccessor, i2$2.NgControlStatus, i2$2.NgModel, i9.MatOption, i2.MatIcon, i3.MatButton, i13$1.MatSlider, i15$1.MatSlideToggle, i13.MatFormField, i13.MatSuffix, i14.MatInput, i15.MatSelect, i4.MatTooltip, i12$2.MatDatetimepickerComponent, i12$2.MatDatetimepickerToggleComponent, i12$2.MatDatetimepickerInputDirective, i7.TranslatePipe], styles: [".igo-layer-filters-container[_ngcontent-%COMP%]{padding-left:5px}mat-slider[_ngcontent-%COMP%]     div.mat-slider-thumb-label{width:32px;height:32px;margin:0 auto}mat-slider[_ngcontent-%COMP%]     span.mat-slider-thumb-label-text{font-size:10px}#time-slider[_ngcontent-%COMP%]{width:70%;margin:0 auto}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){#time-slider[_ngcontent-%COMP%]{width:60%;margin:0 auto}}.date-below[_ngcontent-%COMP%]{margin:0}mat-form-field[_ngcontent-%COMP%]{text-align:center}mat-datetimepicker-toggle[_ngcontent-%COMP%]     .mat-icon{padding-bottom:30px}.igo-layer-actions-container[_ngcontent-%COMP%] > .mat-slide-toggle[_ngcontent-%COMP%]{vertical-align:middle}.time-filter-mat-datetimepicker-toggle[_ngcontent-%COMP%]     .mat-icon{width:auto}"] });
+    }, dependencies: [i1$1.NgForOf, i1$1.NgIf, i2$2.DefaultValueAccessor, i2$2.NgControlStatus, i2$2.NgModel, i9.MatOption, i2.MatIcon, i3.MatButton, i13$1.MatSlider, i23.MatSlideToggle, i13.MatFormField, i13.MatSuffix, i14.MatInput, i15.MatSelect, i4.MatTooltip, i12$2.MatDatetimepickerComponent, i12$2.MatDatetimepickerToggleComponent, i12$2.MatDatetimepickerInputDirective, i7.TranslatePipe], styles: [".igo-layer-filters-container[_ngcontent-%COMP%]{padding-left:5px}mat-slider[_ngcontent-%COMP%]     div.mat-slider-thumb-label{width:32px;height:32px;margin:0 auto}mat-slider[_ngcontent-%COMP%]     span.mat-slider-thumb-label-text{font-size:10px}#time-slider[_ngcontent-%COMP%]{width:70%;margin:0 auto}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){#time-slider[_ngcontent-%COMP%]{width:60%;margin:0 auto}}.date-below[_ngcontent-%COMP%]{margin:0}mat-form-field[_ngcontent-%COMP%]{text-align:center}mat-datetimepicker-toggle[_ngcontent-%COMP%]     .mat-icon{padding-bottom:30px}.igo-layer-actions-container[_ngcontent-%COMP%] > .mat-slide-toggle[_ngcontent-%COMP%]{vertical-align:middle}.time-filter-mat-datetimepicker-toggle[_ngcontent-%COMP%]     .mat-icon{width:auto}"] });
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TimeFilterFormComponent, [{
             type: Component,
-            args: [{ selector: 'igo-time-filter-form', template: "<div *ngIf=\"style === 'calendar' && type !=='year'\">\r\n  <div *ngIf=\"!isRange\" class=\"igo-col igo-col-100 igo-col-100-m\">\r\n    <mat-form-field>\r\n      <mat-datetimepicker-toggle class=\"time-filter-mat-datetimepicker-toggle\" [for]=\"datetimePicker\" matSuffix></mat-datetimepicker-toggle>\r\n      <mat-datetimepicker #datetimePicker type=\"{{type}}\" openOnFocus=\"true\" timeInterval=\"5\"></mat-datetimepicker>\r\n      <input matInput autocomplete=\"false\"\r\n        placeholder=\"{{'igo.geo.timeFilter.date' | translate}}\"\r\n        [matDatetimepicker]=\"datetimePicker\"\r\n        [(ngModel)]=\"date\"\r\n        [min]=\"min\"\r\n        [max]=\"max\"\r\n        readonly=\"readonly\"\r\n        (dateChange)=\"handleDateChange($event)\">\r\n    </mat-form-field>\r\n\r\n  </div>\r\n\r\n  <div *ngIf=\"isRange\">\r\n    <div class=\"igo-col igo-col-100\">\r\n      <mat-form-field>\r\n        <mat-datetimepicker-toggle class=\"time-filter-mat-datetimepicker-toggle\" [for]=\"minDatetimePicker\" matSuffix></mat-datetimepicker-toggle>\r\n        <mat-datetimepicker #minDatetimePicker type=\"{{type}}\" openOnFocus=\"true\" timeInterval=\"5\"></mat-datetimepicker>\r\n        <input matInput autocomplete=\"false\"\r\n          placeholder=\"{{'igo.geo.timeFilter.startDate' | translate}}\"\r\n          [matDatetimepicker]=\"minDatetimePicker\"\r\n          [(ngModel)]=\"startDate\"\r\n          [min]=\"min\"\r\n          [max]=\"getRangeMaxDate()\"\r\n          readonly=\"readonly\"\r\n          (input)=\"startDate\"\r\n          (dateChange)=\"handleDateChange($event)\">\r\n      </mat-form-field>\r\n    </div>\r\n\r\n    <div class=\"igo-col igo-col-100\">\r\n      <mat-form-field>\r\n        <mat-datetimepicker-toggle class=\"time-filter-mat-datetimepicker-toggle\" [for]=\"maxDatetimePicker\" matSuffix></mat-datetimepicker-toggle>\r\n        <mat-datetimepicker #maxDatetimePicker type=\"{{type}}\" openOnFocus=\"true\" timeInterval=\"5\"></mat-datetimepicker>\r\n        <input matInput autocomplete=\"false\"\r\n          placeholder=\"{{'igo.geo.timeFilter.endDate' | translate}}\"\r\n          [matDatetimepicker]=\"maxDatetimePicker\"\r\n          [(ngModel)]=\"endDate\"\r\n          [min]=\"getRangeMinDate()\"\r\n          [max]=\"max\"\r\n          readonly=\"readonly\"\r\n          (dateChange)=\"handleDateChange($event)\">\r\n      </mat-form-field>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div *ngIf=\"style === 'calendar' && type ==='year'\">\r\n\r\n  <div *ngIf=\"!isRange\" class=\"igo-col igo-col-100 igo-col-100-m\">\r\n        <mat-form-field>\r\n            <mat-select placeholder=\"{{'igo.geo.timeFilter.date' | translate}}\" [(ngModel)]=\"year\" (selectionChange)=\"handleYearChange($event)\">\r\n                  <mat-option [value]=\"year\" *ngFor=\"let year of listYears\">{{year}}</mat-option>\r\n            </mat-select>\r\n        </mat-form-field>\r\n  </div>\r\n\r\n  <div *ngIf=\"isRange\">\r\n    <div class=\"igo-col igo-col-100\">\r\n        <mat-form-field>\r\n            <mat-select placeholder=\"{{'igo.geo.timeFilter.startDate' | translate}}\" [(ngModel)]=\"startYear\" (selectionChange)=\"handleYearChange($event)\">\r\n              <mat-option [value]=\"startYear\" *ngFor=\"let startYear of startListYears\">{{startYear}}</mat-option>\r\n            </mat-select>\r\n      </mat-form-field>\r\n    </div>\r\n\r\n    <div class=\"igo-col igo-col-100\">\r\n    <mat-form-field>\r\n        <mat-select placeholder=\"{{'igo.geo.timeFilter.endDate' | translate}}\" [(ngModel)]=\"endYear\" (selectionChange)=\"handleYearChange($event)\">\r\n              <mat-option [value]=\"endYear\" *ngFor=\"let endYear of endListYears\">{{endYear}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </div>\r\n  </div>\r\n\r\n</div>\r\n\r\n\r\n  <br>\r\n  <div *ngIf=\"!isRange && style === 'slider' && type === 'year'\" class=\"igo-col igo-col-100 igo-col-100-m mat-typography\">\r\n    <span>{{startYear}}</span>\r\n    <mat-slider\r\n        id=\"time-slider\"\r\n        tickInterval=\"auto\"\r\n        step=\"{{step}}\"\r\n        [min]=\"startYear\"\r\n        [max]=\"endYear\"\r\n        [value]=\"handleSliderValue()\"\r\n        [color]=\"color\"\r\n        thumbLabel\r\n        (input)=\"handleSliderYearChange($event)\"\r\n        (change)=\"handleSliderYearChange($event)\"\r\n        [disabled]= \"!options.enabled || !layer.visible\">\r\n    </mat-slider>\r\n    <span>{{endYear}}</span>\r\n    <p *ngIf= \"options.enabled\" class=\"date-below\">{{year}}</p>\r\n    <div #actions class=\"igo-layer-actions-container\">\r\n      <mat-slide-toggle (change)=\"toggleFilterState()\" tooltip-position=\"below\" matTooltipShowDelay=\"500\"\r\n        [matTooltip]=\"'igo.geo.filter.toggleFilterState' | translate\" [color]=\"color\" [checked]=\"options.enabled\"\r\n        [disabled]=\"!layer.visible\">\r\n      </mat-slide-toggle>\r\n      <button [disabled]= \"!options.enabled  || !layer.visible\" mat-icon-button color=\"primary\" (click)=\"playYear($event)\">\r\n        <mat-icon svgIcon=\"{{playIcon}}\"></mat-icon>\r\n       </button>\r\n      <button [disabled]=\"!options.enabled  || !layer.visible\" mat-icon-button color=\"primary\" (click)=\"resetFilter($event)\">\r\n        <mat-icon svgIcon=\"{{resetIcon}}\"></mat-icon>\r\n      </button>\r\n    </div>\r\n  </div>\r\n\r\n<div *ngIf=\"style === 'slider' && type !== 'year'\" class=\"igo-col igo-col-100 igo-col-100-m\">\r\n  <mat-slider\r\n      id=\"time-slider\"\r\n      tickInterval=\"auto\"\r\n      step=\"{{step}}\"\r\n      [min]=\"dateToNumber(min)\"\r\n      [max]=\"dateToNumber(max)\"\r\n      [value]=\"handleSliderValue()\"\r\n      thumbLabel\r\n      (input)=\"handleSliderDateChange($event)\"\r\n      (selectionChange)=\"handleSliderDateChange($event)\">\r\n  </mat-slider>\r\n  <p class=\"date-below\">{{handleSliderTooltip()}}</p>\r\n  <button mat-icon-button color=\"primary\" (click)=\"playFilter($event)\">\r\n   <mat-icon svgIcon=\"{{playIcon}}\"></mat-icon>\r\n  </button>\r\n</div>\r\n", styles: [".igo-layer-filters-container{padding-left:5px}mat-slider ::ng-deep div.mat-slider-thumb-label{width:32px;height:32px;margin:0 auto}mat-slider ::ng-deep span.mat-slider-thumb-label-text{font-size:10px}#time-slider{width:70%;margin:0 auto}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){#time-slider{width:60%;margin:0 auto}}.date-below{margin:0}mat-form-field{text-align:center}mat-datetimepicker-toggle ::ng-deep .mat-icon{padding-bottom:30px}.igo-layer-actions-container>.mat-slide-toggle{vertical-align:middle}.time-filter-mat-datetimepicker-toggle ::ng-deep .mat-icon{width:auto}\n"] }]
+            args: [{ selector: 'igo-time-filter-form', template: "<div *ngIf=\"style === 'calendar' && type !=='year'\">\n  <div *ngIf=\"!isRange\" class=\"igo-col igo-col-100 igo-col-100-m\">\n    <mat-form-field>\n      <mat-datetimepicker-toggle class=\"time-filter-mat-datetimepicker-toggle\" [for]=\"datetimePicker\" matSuffix></mat-datetimepicker-toggle>\n      <mat-datetimepicker #datetimePicker type=\"{{type}}\" openOnFocus=\"true\" timeInterval=\"5\"></mat-datetimepicker>\n      <input matInput autocomplete=\"false\"\n        placeholder=\"{{'igo.geo.timeFilter.date' | translate}}\"\n        [matDatetimepicker]=\"datetimePicker\"\n        [(ngModel)]=\"date\"\n        [min]=\"min\"\n        [max]=\"max\"\n        readonly=\"readonly\"\n        (dateChange)=\"handleDateChange($event)\">\n    </mat-form-field>\n\n  </div>\n\n  <div *ngIf=\"isRange\">\n    <div class=\"igo-col igo-col-100\">\n      <mat-form-field>\n        <mat-datetimepicker-toggle class=\"time-filter-mat-datetimepicker-toggle\" [for]=\"minDatetimePicker\" matSuffix></mat-datetimepicker-toggle>\n        <mat-datetimepicker #minDatetimePicker type=\"{{type}}\" openOnFocus=\"true\" timeInterval=\"5\"></mat-datetimepicker>\n        <input matInput autocomplete=\"false\"\n          placeholder=\"{{'igo.geo.timeFilter.startDate' | translate}}\"\n          [matDatetimepicker]=\"minDatetimePicker\"\n          [(ngModel)]=\"startDate\"\n          [min]=\"min\"\n          [max]=\"getRangeMaxDate()\"\n          readonly=\"readonly\"\n          (input)=\"startDate\"\n          (dateChange)=\"handleDateChange($event)\">\n      </mat-form-field>\n    </div>\n\n    <div class=\"igo-col igo-col-100\">\n      <mat-form-field>\n        <mat-datetimepicker-toggle class=\"time-filter-mat-datetimepicker-toggle\" [for]=\"maxDatetimePicker\" matSuffix></mat-datetimepicker-toggle>\n        <mat-datetimepicker #maxDatetimePicker type=\"{{type}}\" openOnFocus=\"true\" timeInterval=\"5\"></mat-datetimepicker>\n        <input matInput autocomplete=\"false\"\n          placeholder=\"{{'igo.geo.timeFilter.endDate' | translate}}\"\n          [matDatetimepicker]=\"maxDatetimePicker\"\n          [(ngModel)]=\"endDate\"\n          [min]=\"getRangeMinDate()\"\n          [max]=\"max\"\n          readonly=\"readonly\"\n          (dateChange)=\"handleDateChange($event)\">\n      </mat-form-field>\n    </div>\n  </div>\n</div>\n\n<div *ngIf=\"style === 'calendar' && type ==='year'\">\n\n  <div *ngIf=\"!isRange\" class=\"igo-col igo-col-100 igo-col-100-m\">\n        <mat-form-field>\n            <mat-select placeholder=\"{{'igo.geo.timeFilter.date' | translate}}\" [(ngModel)]=\"year\" (selectionChange)=\"handleYearChange($event)\">\n                  <mat-option [value]=\"year\" *ngFor=\"let year of listYears\">{{year}}</mat-option>\n            </mat-select>\n        </mat-form-field>\n  </div>\n\n  <div *ngIf=\"isRange\">\n    <div class=\"igo-col igo-col-100\">\n        <mat-form-field>\n            <mat-select placeholder=\"{{'igo.geo.timeFilter.startDate' | translate}}\" [(ngModel)]=\"startYear\" (selectionChange)=\"handleYearChange($event)\">\n              <mat-option [value]=\"startYear\" *ngFor=\"let startYear of startListYears\">{{startYear}}</mat-option>\n            </mat-select>\n      </mat-form-field>\n    </div>\n\n    <div class=\"igo-col igo-col-100\">\n    <mat-form-field>\n        <mat-select placeholder=\"{{'igo.geo.timeFilter.endDate' | translate}}\" [(ngModel)]=\"endYear\" (selectionChange)=\"handleYearChange($event)\">\n              <mat-option [value]=\"endYear\" *ngFor=\"let endYear of endListYears\">{{endYear}}</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </div>\n  </div>\n\n</div>\n\n\n  <br>\n  <div *ngIf=\"!isRange && style === 'slider' && type === 'year'\" class=\"igo-col igo-col-100 igo-col-100-m mat-typography\">\n    <span>{{startYear}}</span>\n    <mat-slider\n        id=\"time-slider\"\n        tickInterval=\"auto\"\n        step=\"{{step}}\"\n        [min]=\"startYear\"\n        [max]=\"endYear\"\n        [value]=\"handleSliderValue()\"\n        [color]=\"color\"\n        thumbLabel\n        (input)=\"handleSliderYearChange($event)\"\n        (change)=\"handleSliderYearChange($event)\"\n        [disabled]= \"!options.enabled || !layer.visible\">\n    </mat-slider>\n    <span>{{endYear}}</span>\n    <p *ngIf= \"options.enabled\" class=\"date-below\">{{year}}</p>\n    <div #actions class=\"igo-layer-actions-container\">\n      <mat-slide-toggle (change)=\"toggleFilterState()\" tooltip-position=\"below\" matTooltipShowDelay=\"500\"\n        [matTooltip]=\"'igo.geo.filter.toggleFilterState' | translate\" [color]=\"color\" [checked]=\"options.enabled\"\n        [disabled]=\"!layer.visible\">\n      </mat-slide-toggle>\n      <button [disabled]= \"!options.enabled  || !layer.visible\" mat-icon-button color=\"primary\" (click)=\"playYear($event)\">\n        <mat-icon svgIcon=\"{{playIcon}}\"></mat-icon>\n       </button>\n      <button [disabled]=\"!options.enabled  || !layer.visible\" mat-icon-button color=\"primary\" (click)=\"resetFilter($event)\">\n        <mat-icon svgIcon=\"{{resetIcon}}\"></mat-icon>\n      </button>\n    </div>\n  </div>\n\n<div *ngIf=\"style === 'slider' && type !== 'year'\" class=\"igo-col igo-col-100 igo-col-100-m\">\n  <mat-slider\n      id=\"time-slider\"\n      tickInterval=\"auto\"\n      step=\"{{step}}\"\n      [min]=\"dateToNumber(min)\"\n      [max]=\"dateToNumber(max)\"\n      [value]=\"handleSliderValue()\"\n      thumbLabel\n      (input)=\"handleSliderDateChange($event)\"\n      (selectionChange)=\"handleSliderDateChange($event)\">\n  </mat-slider>\n  <p class=\"date-below\">{{handleSliderTooltip()}}</p>\n  <button mat-icon-button color=\"primary\" (click)=\"playFilter($event)\">\n   <mat-icon svgIcon=\"{{playIcon}}\"></mat-icon>\n  </button>\n</div>\n", styles: [".igo-layer-filters-container{padding-left:5px}mat-slider ::ng-deep div.mat-slider-thumb-label{width:32px;height:32px;margin:0 auto}mat-slider ::ng-deep span.mat-slider-thumb-label-text{font-size:10px}#time-slider{width:70%;margin:0 auto}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){#time-slider{width:60%;margin:0 auto}}.date-below{margin:0}mat-form-field{text-align:center}mat-datetimepicker-toggle ::ng-deep .mat-icon{padding-bottom:30px}.igo-layer-actions-container>.mat-slide-toggle{vertical-align:middle}.time-filter-mat-datetimepicker-toggle ::ng-deep .mat-icon{width:auto}\n"] }]
         }], function () { return [{ type: i9.DateAdapter }]; }, { layer: [{
                 type: Input
             }], options: [{
@@ -24322,7 +24629,7 @@ TimeFilterItemComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Tim
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TimeFilterItemComponent, [{
             type: Component,
-            args: [{ selector: 'igo-time-filter-item', template: "<mat-list-item *ngIf=\"header\">\r\n  <mat-icon\r\n    class=\"igo-chevron\"\r\n    mat-list-avatar\r\n    igoCollapse\r\n    [target]=\"filters\"\r\n    [collapsed]=\"filtersCollapsed\"\r\n    (click)=\"toggleFiltersCollapsed()\"\r\n    svgIcon=\"chevron-up\" >\r\n  </mat-icon>\r\n  <h4 (click)=\"toggleLegendOnClick()\" [ngStyle]=\"{'cursor': filtersCollapsed ? 'default' : 'pointer'}\"  matLine>{{layer.title}}</h4>\r\n  \r\n  <button *ngIf=\"header\"\r\n    mat-icon-button\r\n    [color]=\"layer.visible ? 'primary' : 'default'\"\r\n    collapsibleButton\r\n    tooltip-position=\"below\"\r\n    matTooltipShowDelay=\"500\"\r\n    [matTooltip]=\"layer.visible ?\r\n                  ('igo.geo.layer.hideLayer' | translate) :\r\n                  ('igo.geo.layer.showLayer' | translate)\"\r\n    (click)=\"layer.visible = !layer.visible\">\r\n    <mat-icon\r\n      [ngClass]=\"{disabled: (inResolutionRange$ | async)===false}\"\r\n      [svgIcon]=\"layer.visible ? 'eye' : 'eye-off'\">\r\n    </mat-icon>\r\n  </button>\r\n\r\n</mat-list-item>\r\n\r\n<div #filters class=\"igo-datasource-filters-container\">\r\n  <div #legend class=\"igo-layer-legend-container\">\r\n    <igo-layer-legend *ngIf=\"showLegend$ | async\" [layer]=\"layer\">\r\n    </igo-layer-legend>\r\n  </div>\r\n  <igo-time-filter-form\r\n    [layer]= \"layer\"\r\n    [options]=\"datasource.options.timeFilter\"\r\n    [currentValue]=\"datasource.options.params.TIME\"\r\n    (change)=\"handleDateChange($event)\"\r\n    (yearChange)=\"handleYearChange($event)\">\r\n  </igo-time-filter-form>\r\n</div>\r\n", styles: [":host{overflow:hidden}.igo-datasource-filters-container{text-align:center;width:100%;display:inline-block;padding-top:5px}.igo-layer-legend-container{padding-left:1.125em;width:calc(100% - 18px)}\n"] }]
+            args: [{ selector: 'igo-time-filter-item', template: "<mat-list-item *ngIf=\"header\">\n  <mat-icon\n    class=\"igo-chevron\"\n    mat-list-avatar\n    igoCollapse\n    [target]=\"filters\"\n    [collapsed]=\"filtersCollapsed\"\n    (click)=\"toggleFiltersCollapsed()\"\n    svgIcon=\"chevron-up\" >\n  </mat-icon>\n  <h4 (click)=\"toggleLegendOnClick()\" [ngStyle]=\"{'cursor': filtersCollapsed ? 'default' : 'pointer'}\"  matLine>{{layer.title}}</h4>\n  \n  <button *ngIf=\"header\"\n    mat-icon-button\n    [color]=\"layer.visible ? 'primary' : 'default'\"\n    collapsibleButton\n    tooltip-position=\"below\"\n    matTooltipShowDelay=\"500\"\n    [matTooltip]=\"layer.visible ?\n                  ('igo.geo.layer.hideLayer' | translate) :\n                  ('igo.geo.layer.showLayer' | translate)\"\n    (click)=\"layer.visible = !layer.visible\">\n    <mat-icon\n      [ngClass]=\"{disabled: (inResolutionRange$ | async)===false}\"\n      [svgIcon]=\"layer.visible ? 'eye' : 'eye-off'\">\n    </mat-icon>\n  </button>\n\n</mat-list-item>\n\n<div #filters class=\"igo-datasource-filters-container\">\n  <div #legend class=\"igo-layer-legend-container\">\n    <igo-layer-legend *ngIf=\"showLegend$ | async\" [layer]=\"layer\">\n    </igo-layer-legend>\n  </div>\n  <igo-time-filter-form\n    [layer]= \"layer\"\n    [options]=\"datasource.options.timeFilter\"\n    [currentValue]=\"datasource.options.params.TIME\"\n    (change)=\"handleDateChange($event)\"\n    (yearChange)=\"handleYearChange($event)\">\n  </igo-time-filter-form>\n</div>\n", styles: [":host{overflow:hidden}.igo-datasource-filters-container{text-align:center;width:100%;display:inline-block;padding-top:5px}.igo-layer-legend-container{padding-left:1.125em;width:calc(100% - 18px)}\n"] }]
         }], function () { return [{ type: TimeFilterService }]; }, { header: [{
                 type: Input
             }], layer: [{
@@ -24369,7 +24676,7 @@ TimeFilterListComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Tim
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TimeFilterListComponent, [{
             type: Component,
-            args: [{ selector: 'igo-time-filter-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<igo-list [navigation]=\"false\" [selection]=\"false\">\r\n  <ng-template ngFor let-layer [ngForOf]=\"layers | filterableDataSource: 'time'\">\r\n    <igo-time-filter-item [header]=\"true\" igoListItem [layer]=\"layer\"></igo-time-filter-item>\r\n  </ng-template>\r\n</igo-list>\r\n" }]
+            args: [{ selector: 'igo-time-filter-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<igo-list [navigation]=\"false\" [selection]=\"false\">\n  <ng-template ngFor let-layer [ngForOf]=\"layers | filterableDataSource: 'time'\">\n    <igo-time-filter-item [header]=\"true\" igoListItem [layer]=\"layer\"></igo-time-filter-item>\n  </ng-template>\n</igo-list>\n" }]
         }], function () { return [{ type: i0.ChangeDetectorRef }]; }, { layers: [{
                 type: Input
             }] });
@@ -24417,22 +24724,22 @@ class WktService {
     extentToWkt(epsgTO, extent, extentProj) {
         let currentExtent = olproj.transformExtent(extent, extentProj, epsgTO);
         currentExtent = this.roundCoordinateArray(currentExtent, epsgTO, 0);
-        const wktPoly = `POLYGON((
-      ${extent[0]} ${extent[1]},
-      ${extent[0]} ${extent[3]},
-      ${extent[2]} ${extent[3]},
-      ${extent[2]} ${extent[1]},
+        const wktPoly = `POLYGON((
+      ${extent[0]} ${extent[1]},
+      ${extent[0]} ${extent[3]},
+      ${extent[2]} ${extent[3]},
+      ${extent[2]} ${extent[1]},
       ${extent[0]} ${extent[1]}))`;
-        const wktLine = `LINESTRING(
-      ${extent[0]} ${extent[1]},
-      ${extent[0]} ${extent[3]},
-      ${extent[2]} ${extent[3]},
-      ${extent[2]} ${extent[1]},
+        const wktLine = `LINESTRING(
+      ${extent[0]} ${extent[1]},
+      ${extent[0]} ${extent[3]},
+      ${extent[2]} ${extent[3]},
+      ${extent[2]} ${extent[1]},
       ${extent[0]} ${extent[1]})`;
-        const wktMultiPoints = `MULTIPOINT(
-        ${extent[0]} ${extent[1]},
-        ${extent[0]} ${extent[3]},
-        ${extent[2]} ${extent[3]},
+        const wktMultiPoints = `MULTIPOINT(
+        ${extent[0]} ${extent[1]},
+        ${extent[0]} ${extent[3]},
+        ${extent[2]} ${extent[3]},
         ${extent[2]} ${extent[1]})`;
         return {
             wktPoly,
@@ -25333,7 +25640,7 @@ OgcFilterFormComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: OgcF
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(OgcFilterFormComponent, [{
             type: Component,
-            args: [{ selector: 'igo-ogc-filter-form', template: "<mat-checkbox\r\n  tooltip-position=\"below\"\r\n  matTooltipShowDelay=\"500\"\r\n  [matTooltip]=\"'igo.geo.filter.toggleFilterState' | translate\"\r\n  (click)=\"$event.stopPropagation()\"\r\n  (change)=\"toggleFilterState($event)\"\r\n  [checked]=\"currentFilter.active\">\r\n</mat-checkbox>\r\n\r\n<mat-form-field\r\n  [ngClass]=\"{'logical': activeFilters.indexOf(currentFilter) !== 0 && currentFilter.active===true, 'logicalHidden': activeFilters.indexOf(currentFilter) === 0 || currentFilter.active!==true}\">\r\n  <mat-select\r\n    [disabled]=\"!currentFilter.active\"\r\n    [value]=\"currentFilter.parentLogical\"\r\n    tooltip-position=\"above\"\r\n    matTooltipShowDelay=\"500\"\r\n    [matTooltip]=\"currentFilter.parentLogical ? (('igo.geo.operators.tooltip.'+ currentFilter.parentLogical) | translate) : ''\"\r\n    (selectionChange)=\"changeLogical($event.value)\">\r\n      <mat-option\r\n        [value]=ogcFilterOperator.And\r\n        tooltip-position=\"above\"\r\n        matTooltipShowDelay=\"500\"\r\n        [matTooltip]=\"'igo.geo.operators.tooltip.And' | translate\">\r\n          {{'igo.geo.operators.And' | translate}}\r\n      </mat-option>\r\n      <mat-option\r\n        [value]=ogcFilterOperator.Or\r\n        tooltip-position=\"above\"\r\n        matTooltipShowDelay=\"500\"\r\n        [matTooltip]=\"'igo.geo.operators.tooltip.Or' | translate\">\r\n          {{'igo.geo.operators.Or' | translate}}\r\n      </mat-option>\r\n  </mat-select>\r\n</mat-form-field>\r\n\r\n<mat-form-field\r\n  class=\"field\"\r\n  *ngIf=\"(currentFilterIsSpatial$ | async)===false && (fields$ | async) && (fields$| async).length > 0 && (fields$| async)[0].name !== ''\"\r\n  (mouseenter)=\"inputClearable = 'selectField'\"\r\n  (mouseleave)=\"inputClearable = undefined\"\r\n  [floatLabel]=\"floatLabel\">\r\n  <input\r\n  matInput\r\n  [placeholder]=\"'igo.geo.sourceFields.selectField' | translate\"\r\n  [disabled]=\"!currentFilter.active\"\r\n  [matAutocomplete]=\"autoCompleteField\"\r\n  [value]=\"(selectedField$ | async) ? (selectedField$ | async).alias : ''\"\r\n  tooltip-position=\"above\"\r\n  matTooltipShowDelay=\"500\"\r\n  [matTooltip]=\"(selectedField$ | async) ? (selectedField$ | async).alias : ('igo.geo.sourceFields.selectField' | translate)\"\r\n  (input)=\"updateFieldsList($event.target.value)\">\r\n  <mat-autocomplete #autoCompleteField=\"matAutocomplete\"\r\n  (optionSelected)='changeField($event.option.id)'>\r\n    <mat-option\r\n      *ngFor=\"let field of filteredFields$ | async\"\r\n      matTooltipShowDelay=\"500\"\r\n      [value]=\"field.alias\"\r\n      [id]=\"field.name\"\r\n      [matTooltip]=\"field.alias\">\r\n      {{field.alias}}\r\n    </mat-option>\r\n  </mat-autocomplete>\r\n  <button mat-button\r\n    *ngIf=\"currentFilter.propertyName && inputClearable === 'selectField' && currentFilter.active\"\r\n    matSuffix\r\n    mat-icon-button\r\n    aria-label=\"Clear\"\r\n    [disabled]=\"!currentFilter.active\"\r\n    (click)=\"clearSelectedField()\">\r\n        <mat-icon svgIcon=\"close\"></mat-icon>\r\n  </button>\r\n</mat-form-field>\r\n\r\n\r\n<mat-form-field\r\n  [ngClass]=\"{'operator': (currentFilterIsSpatial$ | async)===false , 'dualInput': (currentFilterIsSpatial$ | async)}\"\r\n  [floatLabel]=\"floatLabel\">\r\n  <mat-select\r\n    tooltip-position=\"below\"\r\n    matTooltipShowDelay=\"500\"\r\n    [matTooltip]=\"currentFilter.operator ? (('igo.geo.operators.tooltip.'+ currentFilter.operator) | translate) : ('igo.geo.filter.selectOperator' | translate)\"\r\n    [disabled]=\"!currentFilter.active\"\r\n    [value]=\"currentFilter.operator\"\r\n    (selectionChange)=\"changeOperator($event.value)\">\r\n      <mat-option\r\n        *ngFor=\"let operator of (ogcFilterOperators$ | async) | keyvalue\"\r\n        tooltip-position=\"above\"\r\n        matTooltipShowDelay=\"500\"\r\n        [value]=\"operator.key\"\r\n        [matTooltip]=\"('igo.geo.operators.tooltip.'+ operator.key) | translate\">\r\n          {{('igo.geo.operators.'+ operator.key) | translate}}\r\n      </mat-option>\r\n  </mat-select>\r\n</mat-form-field>\r\n\r\n<mat-form-field\r\nclass=\"spatialSelector\"\r\n*ngIf=\"currentFilterIsSpatial$ | async\">\r\n  <mat-select\r\n    [disabled]=\"!currentFilter.active\"\r\n    [value]=\"currentFilter.igoSpatialSelector\"\r\n    (selectionChange)=\"changeSpatialSelector($event.value)\">\r\n      <mat-option\r\n        *ngFor=\"let igoSpatialSelector of igoSpatialSelectors\"\r\n        [value]=\"igoSpatialSelector.type\">\r\n          {{('igo.geo.spatialSelector.'+ igoSpatialSelector.type) | translate}}\r\n      </mat-option>\r\n  </mat-select>\r\n</mat-form-field>\r\n\r\n<mat-form-field\r\nclass=\"singleInput\"\r\n*ngIf=\"['expression','pattern'].indexOf(detectProperty()) !== -1\"\r\n(mouseenter)=\"inputClearable = 'selectProperty'\"\r\n(mouseleave)=\"inputClearable = undefined\"\r\n[floatLabel]=\"floatLabel\">\r\n  <input\r\n    matInput\r\n    [placeholder]=\"'igo.geo.filter.placeholder' | translate\"\r\n    [disabled]=\"!currentFilter.active\"\r\n    [matAutocomplete]=\"autoCompleteValues\"\r\n    [value]=\"detectProperty() === 'expression' ? currentFilter.expression : currentFilter.pattern\"\r\n    tooltip-position=\"above\"\r\n    matTooltipShowDelay=\"500\"\r\n    [matTooltip]=\"detectProperty() === 'expression' ? currentFilter.expression || '' : currentFilter.pattern || ''\"\r\n    (input)=\"updateValuesList($event.target.value)\">\r\n  <mat-autocomplete #autoCompleteValues=\"matAutocomplete\"\r\n    (optionSelected)=\"changeProperty($event.option.value)\">\r\n    <mat-option\r\n      *ngFor=\"let value of filteredValues$ | async\"\r\n      matTooltipShowDelay=\"500\"\r\n      [value]=\"value\"\r\n      [matTooltip]=\"value\">\r\n      {{value}}\r\n    </mat-option>\r\n  </mat-autocomplete>\r\n  <button mat-button\r\n    *ngIf=\"isClearable() && inputClearable === 'selectProperty' && currentFilter.active\"\r\n    matSuffix\r\n    mat-icon-button\r\n    aria-label=\"Clear\"\r\n    [disabled]=\"!currentFilter.active\"\r\n    (click)=\"clearProperty()\">\r\n        <mat-icon svgIcon=\"close\"></mat-icon>\r\n  </button>\r\n</mat-form-field>\r\n\r\n<div class=\"igo-layer-button-group\">\r\n  <button\r\n    mat-icon-button\r\n    collapsibleButton\r\n    tooltip-position=\"below\"\r\n    matTooltipShowDelay=\"500\"\r\n    [matTooltip]=\"'igo.geo.filter.removeFilter' | translate\"\r\n    color=\"warn\"\r\n    (click)=\"deleteFilter()\">\r\n    <mat-icon svgIcon=\"delete\"></mat-icon>\r\n  </button>\r\n</div>\r\n\r\n<mat-form-field\r\nclass=\"snrc\"\r\n*ngIf=\"(currentFilterIsSpatial$ | async) && currentFilter.igoSpatialSelector === 'snrc'\"\r\n(mouseenter)=\"inputClearable = 'selectSNRC'\"\r\n(mouseleave)=\"inputClearable = undefined\"\r\n[floatLabel]=\"floatLabel\">\r\n  <input\r\n    matInput\r\n    [placeholder]=\"'igo.geo.filter.placeholderSnrc' | translate\"\r\n    [value]=\"currentFilter.igoSNRC\"\r\n    tooltip-position=\"above\"\r\n    matTooltipShowDelay=\"500\"\r\n    [matTooltip]=\"currentFilter.igoSNRC ? currentFilter.igoSNRC : ''\"\r\n    (input)=\"changeSNRC($event.target.value)\">\r\n  <button\r\n    mat-button\r\n    *ngIf=\"currentFilter.igoSNRC\"\r\n    matSuffix\r\n    mat-icon-button\r\n    aria-label=\"Clear\"\r\n    [disabled]=\"!currentFilter.active && inputClearable === 'selectSNRC' && currentFilter.active\"\r\n    (click)=\"currentFilter.igoSNRC=''\">\r\n      <mat-icon svgIcon=\"close\"></mat-icon>\r\n  </button>\r\n  </mat-form-field>\r\n\r\n  <ng-container *ngIf=\"(currentFilterIsSpatial$ | async) && currentFilter.igoSpatialSelector === 'fixedExtent'\">\r\n    <button\r\n    mat-button\r\n    [disabled]=\"!currentFilter.active\"\r\n    *ngIf=\"currentFilter.igoSpatialSelector === 'fixedExtent'\"\r\n    matSuffix\r\n    mat-icon-button\r\n    [disabled]=\"!currentFilter.active\"\r\n    (click)=\"changeMapExtentGeometry()\"\r\n    tooltip-position=\"below\"\r\n    matTooltipShowDelay=\"500\"\r\n    [matTooltip]=\"'igo.geo.spatialSelector.btnSetExtent' | translate\">\r\n      <mat-icon svgIcon=\"arrow-expand-all\"></mat-icon>\r\n  </button>\r\n</ng-container>\r\n\r\n<br/>\r\n\r\n<mat-form-field\r\nclass=\"dualInput\"\r\n*ngIf=\"!isTemporalOperator() && ['lowerBoundary','begin'].indexOf(detectProperty(1)) !== -1\"\r\n(mouseenter)=\"inputClearable = 'selectProperty1'\"\r\n(mouseleave)=\"inputClearable = undefined\"\r\n[floatLabel]=\"floatLabel\">\r\n    <input\r\n      matInput\r\n      [placeholder]=\"'igo.geo.filter.placeholder' | translate\"\r\n      [disabled]=\"!currentFilter.active\"\r\n      [matAutocomplete]=\"autoDualValueOperator1\"\r\n      type=\"number\"\r\n      [value]=\"detectProperty(1) === 'lowerBoundary' ? currentFilter.lowerBoundary : currentFilter.begin\"\r\n      (input)=\"updateValuesList($event.target.value,1)\">\r\n    <mat-autocomplete #autoDualValueOperator1=\"matAutocomplete\"\r\n      (optionSelected)=\"changeNumericProperty($event.option.value,1)\">\r\n      <mat-option\r\n        *ngFor=\"let value of filteredValues$ | async\"\r\n        matTooltipShowDelay=\"500\"\r\n        [value]=\"value\"\r\n        [matTooltip]=\"value\">\r\n        {{value}}\r\n      </mat-option>\r\n    </mat-autocomplete>\r\n    <button mat-button\r\n      *ngIf=\"isClearable(1) && inputClearable === 'selectProperty1' && currentFilter.active\"\r\n      matSuffix\r\n      mat-icon-button\r\n      aria-label=\"Clear\"\r\n    [disabled]=\"!currentFilter.active\"\r\n      (click)=\"clearProperty(1)\">\r\n          <mat-icon svgIcon=\"close\"></mat-icon>\r\n    </button>\r\n</mat-form-field>\r\n\r\n<mat-form-field\r\n  class=\"dualInput\"\r\n  *ngIf=\"!isTemporalOperator() && ['upperBoundary','end'].indexOf(detectProperty(2)) !== -1\"\r\n  (mouseenter)=\"inputClearable = 'selectProperty2'\"\r\n  (mouseleave)=\"inputClearable = undefined\"\r\n  [floatLabel]=\"floatLabel\">\r\n    <input\r\n      matInput\r\n      [placeholder]=\"'igo.geo.filter.placeholder' | translate\"\r\n      [disabled]=\"!currentFilter.active\"\r\n      [matAutocomplete]=\"autoDualValueOperator2\"\r\n      type=\"number\"\r\n      [value]=\"detectProperty(2) === 'upperBoundary' ? currentFilter.upperBoundary : currentFilter.end\"\r\n      (input)=\"updateValuesList($event.target.value,2)\">\r\n    <mat-autocomplete #autoDualValueOperator2=\"matAutocomplete\"\r\n      (optionSelected)=\"changeNumericProperty($event.option.value,2)\">\r\n      <mat-option\r\n        *ngFor=\"let value of filteredValues$ | async\"\r\n        matTooltipShowDelay=\"500\"\r\n        [value]=\"value\"\r\n        [matTooltip]=\"value\">\r\n        {{value}}\r\n      </mat-option>\r\n    </mat-autocomplete>\r\n    <button mat-button\r\n      *ngIf=\"isClearable(2) && inputClearable === 'selectProperty2' && currentFilter.active\"\r\n      matSuffix\r\n      mat-icon-button\r\n      aria-label=\"Clear\"\r\n      [disabled]=\"!currentFilter.active\"\r\n      (click)=\"clearProperty(2)\">\r\n          <mat-icon svgIcon=\"close\"></mat-icon>\r\n    </button>\r\n</mat-form-field>\r\n\r\n<igo-ogc-filter-time *ngIf=\"isTemporalOperator()\"\r\n  [(datasource)]=\"datasource\"\r\n  [(currentFilter)]=\"currentFilter\"\r\n  (changeProperty)=\"changeProperty($event.value, $event.pos)\">\r\n</igo-ogc-filter-time>\r\n\r\n<!--\r\nTODO C'EST PERTINENT je crois\r\n<mat-form-field class=\"field\" *ngIf=\"!(currentFilterIsSpatial$ | async) && (fields$| async) && (fields$| async).length === 1 &&  (fields$| async)[0].name === ''\">\r\n<input [disabled]=\"!currentFilter.active\" matInput #fieldPerUser (keyup)=\"changeProperty(currentFilter,'propertyName',fieldPerUser.value)\"\r\n  (blur)=\"changeProperty(currentFilter,'propertyName',fieldPerUser.value)\" [(ngModel)]=\"currentFilter.propertyName\">\r\n<button mat-button *ngIf=\"currentFilter.propertyName\" matSuffix mat-icon-button aria-label=\"Clear\" (click)=\"currentFilter.propertyName=''\">\r\n  <mat-icon svgIcon=\"close\"></mat-icon>\r\n</button>\r\n</mat-form-field>\r\n\r\n\r\n\r\n<mat-checkbox labelPosition='before' (change)=\"changeCaseSensitive($event)\" [(ngModel)]=\"currentFilter.matchCase\">\r\n  {{('igo.geo.operators.caseSensitive') | translate}}\r\n</mat-checkbox>\r\n\r\n</mat-list-item> -->\r\n", styles: [":host{width:100%;padding:5px 10px}::ng-deep .mat-form-field .mat-icon svg{width:1em;height:1em;color:#d3d3d3}.mat-form-field{width:100%}.mat-select-arrow{visibility:hidden}.mat-slide-toggle{margin-top:10px}.logical{flex-flow:column nowrap;width:10%;max-width:45px;margin-left:5px}.logicalHidden{flex-flow:column nowrap;width:10%;visibility:hidden;max-width:45px;margin-left:5px}::ng-deep .logical .mat-select-arrow{visibility:hidden}::ng-deep .logicalHidden .mat-select-arrow{visibility:hidden}.field{width:20%}::ng-deep .field .mat-select-arrow{visibility:hidden}.operator{width:12%;margin-left:10px;text-align:center}::ng-deep .operator .mat-select-arrow{visibility:hidden}.spatialSelector{width:15%;margin-left:5px}::ng-deep .spatialSelector .mat-select-arrow{visibility:hidden}.singleInput{width:30%;margin-left:5px}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){.singleInput{width:27%}}.snrc{width:20%;margin-left:5px}::ng-deep .singleInput .mat-select-arrow{visibility:hidden}.dualInput{width:20%;margin-left:5px}::ng-deep .dualInput .mat-select-arrow{visibility:hidden}.igo-layer-button-group{display:flex;float:right;padding-top:5px}.container{display:flex}\n"] }]
+            args: [{ selector: 'igo-ogc-filter-form', template: "<mat-checkbox\n  tooltip-position=\"below\"\n  matTooltipShowDelay=\"500\"\n  [matTooltip]=\"'igo.geo.filter.toggleFilterState' | translate\"\n  (click)=\"$event.stopPropagation()\"\n  (change)=\"toggleFilterState($event)\"\n  [checked]=\"currentFilter.active\">\n</mat-checkbox>\n\n<mat-form-field\n  [ngClass]=\"{'logical': activeFilters.indexOf(currentFilter) !== 0 && currentFilter.active===true, 'logicalHidden': activeFilters.indexOf(currentFilter) === 0 || currentFilter.active!==true}\">\n  <mat-select\n    [disabled]=\"!currentFilter.active\"\n    [value]=\"currentFilter.parentLogical\"\n    tooltip-position=\"above\"\n    matTooltipShowDelay=\"500\"\n    [matTooltip]=\"currentFilter.parentLogical ? (('igo.geo.operators.tooltip.'+ currentFilter.parentLogical) | translate) : ''\"\n    (selectionChange)=\"changeLogical($event.value)\">\n      <mat-option\n        [value]=ogcFilterOperator.And\n        tooltip-position=\"above\"\n        matTooltipShowDelay=\"500\"\n        [matTooltip]=\"'igo.geo.operators.tooltip.And' | translate\">\n          {{'igo.geo.operators.And' | translate}}\n      </mat-option>\n      <mat-option\n        [value]=ogcFilterOperator.Or\n        tooltip-position=\"above\"\n        matTooltipShowDelay=\"500\"\n        [matTooltip]=\"'igo.geo.operators.tooltip.Or' | translate\">\n          {{'igo.geo.operators.Or' | translate}}\n      </mat-option>\n  </mat-select>\n</mat-form-field>\n\n<mat-form-field\n  class=\"field\"\n  *ngIf=\"(currentFilterIsSpatial$ | async)===false && (fields$ | async) && (fields$| async).length > 0 && (fields$| async)[0].name !== ''\"\n  (mouseenter)=\"inputClearable = 'selectField'\"\n  (mouseleave)=\"inputClearable = undefined\"\n  [floatLabel]=\"floatLabel\">\n  <input\n  matInput\n  [placeholder]=\"'igo.geo.sourceFields.selectField' | translate\"\n  [disabled]=\"!currentFilter.active\"\n  [matAutocomplete]=\"autoCompleteField\"\n  [value]=\"(selectedField$ | async) ? (selectedField$ | async).alias : ''\"\n  tooltip-position=\"above\"\n  matTooltipShowDelay=\"500\"\n  [matTooltip]=\"(selectedField$ | async) ? (selectedField$ | async).alias : ('igo.geo.sourceFields.selectField' | translate)\"\n  (input)=\"updateFieldsList($event.target.value)\">\n  <mat-autocomplete #autoCompleteField=\"matAutocomplete\"\n  (optionSelected)='changeField($event.option.id)'>\n    <mat-option\n      *ngFor=\"let field of filteredFields$ | async\"\n      matTooltipShowDelay=\"500\"\n      [value]=\"field.alias\"\n      [id]=\"field.name\"\n      [matTooltip]=\"field.alias\">\n      {{field.alias}}\n    </mat-option>\n  </mat-autocomplete>\n  <button mat-button\n    *ngIf=\"currentFilter.propertyName && inputClearable === 'selectField' && currentFilter.active\"\n    matSuffix\n    mat-icon-button\n    aria-label=\"Clear\"\n    [disabled]=\"!currentFilter.active\"\n    (click)=\"clearSelectedField()\">\n        <mat-icon svgIcon=\"close\"></mat-icon>\n  </button>\n</mat-form-field>\n\n\n<mat-form-field\n  [ngClass]=\"{'operator': (currentFilterIsSpatial$ | async)===false , 'dualInput': (currentFilterIsSpatial$ | async)}\"\n  [floatLabel]=\"floatLabel\">\n  <mat-select\n    tooltip-position=\"below\"\n    matTooltipShowDelay=\"500\"\n    [matTooltip]=\"currentFilter.operator ? (('igo.geo.operators.tooltip.'+ currentFilter.operator) | translate) : ('igo.geo.filter.selectOperator' | translate)\"\n    [disabled]=\"!currentFilter.active\"\n    [value]=\"currentFilter.operator\"\n    (selectionChange)=\"changeOperator($event.value)\">\n      <mat-option\n        *ngFor=\"let operator of (ogcFilterOperators$ | async) | keyvalue\"\n        tooltip-position=\"above\"\n        matTooltipShowDelay=\"500\"\n        [value]=\"operator.key\"\n        [matTooltip]=\"('igo.geo.operators.tooltip.'+ operator.key) | translate\">\n          {{('igo.geo.operators.'+ operator.key) | translate}}\n      </mat-option>\n  </mat-select>\n</mat-form-field>\n\n<mat-form-field\nclass=\"spatialSelector\"\n*ngIf=\"currentFilterIsSpatial$ | async\">\n  <mat-select\n    [disabled]=\"!currentFilter.active\"\n    [value]=\"currentFilter.igoSpatialSelector\"\n    (selectionChange)=\"changeSpatialSelector($event.value)\">\n      <mat-option\n        *ngFor=\"let igoSpatialSelector of igoSpatialSelectors\"\n        [value]=\"igoSpatialSelector.type\">\n          {{('igo.geo.spatialSelector.'+ igoSpatialSelector.type) | translate}}\n      </mat-option>\n  </mat-select>\n</mat-form-field>\n\n<mat-form-field\nclass=\"singleInput\"\n*ngIf=\"['expression','pattern'].indexOf(detectProperty()) !== -1\"\n(mouseenter)=\"inputClearable = 'selectProperty'\"\n(mouseleave)=\"inputClearable = undefined\"\n[floatLabel]=\"floatLabel\">\n  <input\n    matInput\n    [placeholder]=\"'igo.geo.filter.placeholder' | translate\"\n    [disabled]=\"!currentFilter.active\"\n    [matAutocomplete]=\"autoCompleteValues\"\n    [value]=\"detectProperty() === 'expression' ? currentFilter.expression : currentFilter.pattern\"\n    tooltip-position=\"above\"\n    matTooltipShowDelay=\"500\"\n    [matTooltip]=\"detectProperty() === 'expression' ? currentFilter.expression || '' : currentFilter.pattern || ''\"\n    (input)=\"updateValuesList($event.target.value)\">\n  <mat-autocomplete #autoCompleteValues=\"matAutocomplete\"\n    (optionSelected)=\"changeProperty($event.option.value)\">\n    <mat-option\n      *ngFor=\"let value of filteredValues$ | async\"\n      matTooltipShowDelay=\"500\"\n      [value]=\"value\"\n      [matTooltip]=\"value\">\n      {{value}}\n    </mat-option>\n  </mat-autocomplete>\n  <button mat-button\n    *ngIf=\"isClearable() && inputClearable === 'selectProperty' && currentFilter.active\"\n    matSuffix\n    mat-icon-button\n    aria-label=\"Clear\"\n    [disabled]=\"!currentFilter.active\"\n    (click)=\"clearProperty()\">\n        <mat-icon svgIcon=\"close\"></mat-icon>\n  </button>\n</mat-form-field>\n\n<div class=\"igo-layer-button-group\">\n  <button\n    mat-icon-button\n    collapsibleButton\n    tooltip-position=\"below\"\n    matTooltipShowDelay=\"500\"\n    [matTooltip]=\"'igo.geo.filter.removeFilter' | translate\"\n    color=\"warn\"\n    (click)=\"deleteFilter()\">\n    <mat-icon svgIcon=\"delete\"></mat-icon>\n  </button>\n</div>\n\n<mat-form-field\nclass=\"snrc\"\n*ngIf=\"(currentFilterIsSpatial$ | async) && currentFilter.igoSpatialSelector === 'snrc'\"\n(mouseenter)=\"inputClearable = 'selectSNRC'\"\n(mouseleave)=\"inputClearable = undefined\"\n[floatLabel]=\"floatLabel\">\n  <input\n    matInput\n    [placeholder]=\"'igo.geo.filter.placeholderSnrc' | translate\"\n    [value]=\"currentFilter.igoSNRC\"\n    tooltip-position=\"above\"\n    matTooltipShowDelay=\"500\"\n    [matTooltip]=\"currentFilter.igoSNRC ? currentFilter.igoSNRC : ''\"\n    (input)=\"changeSNRC($event.target.value)\">\n  <button\n    mat-button\n    *ngIf=\"currentFilter.igoSNRC\"\n    matSuffix\n    mat-icon-button\n    aria-label=\"Clear\"\n    [disabled]=\"!currentFilter.active && inputClearable === 'selectSNRC' && currentFilter.active\"\n    (click)=\"currentFilter.igoSNRC=''\">\n      <mat-icon svgIcon=\"close\"></mat-icon>\n  </button>\n  </mat-form-field>\n\n  <ng-container *ngIf=\"(currentFilterIsSpatial$ | async) && currentFilter.igoSpatialSelector === 'fixedExtent'\">\n    <button\n    mat-button\n    [disabled]=\"!currentFilter.active\"\n    *ngIf=\"currentFilter.igoSpatialSelector === 'fixedExtent'\"\n    matSuffix\n    mat-icon-button\n    [disabled]=\"!currentFilter.active\"\n    (click)=\"changeMapExtentGeometry()\"\n    tooltip-position=\"below\"\n    matTooltipShowDelay=\"500\"\n    [matTooltip]=\"'igo.geo.spatialSelector.btnSetExtent' | translate\">\n      <mat-icon svgIcon=\"arrow-expand-all\"></mat-icon>\n  </button>\n</ng-container>\n\n<br/>\n\n<mat-form-field\nclass=\"dualInput\"\n*ngIf=\"!isTemporalOperator() && ['lowerBoundary','begin'].indexOf(detectProperty(1)) !== -1\"\n(mouseenter)=\"inputClearable = 'selectProperty1'\"\n(mouseleave)=\"inputClearable = undefined\"\n[floatLabel]=\"floatLabel\">\n    <input\n      matInput\n      [placeholder]=\"'igo.geo.filter.placeholder' | translate\"\n      [disabled]=\"!currentFilter.active\"\n      [matAutocomplete]=\"autoDualValueOperator1\"\n      type=\"number\"\n      [value]=\"detectProperty(1) === 'lowerBoundary' ? currentFilter.lowerBoundary : currentFilter.begin\"\n      (input)=\"updateValuesList($event.target.value,1)\">\n    <mat-autocomplete #autoDualValueOperator1=\"matAutocomplete\"\n      (optionSelected)=\"changeNumericProperty($event.option.value,1)\">\n      <mat-option\n        *ngFor=\"let value of filteredValues$ | async\"\n        matTooltipShowDelay=\"500\"\n        [value]=\"value\"\n        [matTooltip]=\"value\">\n        {{value}}\n      </mat-option>\n    </mat-autocomplete>\n    <button mat-button\n      *ngIf=\"isClearable(1) && inputClearable === 'selectProperty1' && currentFilter.active\"\n      matSuffix\n      mat-icon-button\n      aria-label=\"Clear\"\n    [disabled]=\"!currentFilter.active\"\n      (click)=\"clearProperty(1)\">\n          <mat-icon svgIcon=\"close\"></mat-icon>\n    </button>\n</mat-form-field>\n\n<mat-form-field\n  class=\"dualInput\"\n  *ngIf=\"!isTemporalOperator() && ['upperBoundary','end'].indexOf(detectProperty(2)) !== -1\"\n  (mouseenter)=\"inputClearable = 'selectProperty2'\"\n  (mouseleave)=\"inputClearable = undefined\"\n  [floatLabel]=\"floatLabel\">\n    <input\n      matInput\n      [placeholder]=\"'igo.geo.filter.placeholder' | translate\"\n      [disabled]=\"!currentFilter.active\"\n      [matAutocomplete]=\"autoDualValueOperator2\"\n      type=\"number\"\n      [value]=\"detectProperty(2) === 'upperBoundary' ? currentFilter.upperBoundary : currentFilter.end\"\n      (input)=\"updateValuesList($event.target.value,2)\">\n    <mat-autocomplete #autoDualValueOperator2=\"matAutocomplete\"\n      (optionSelected)=\"changeNumericProperty($event.option.value,2)\">\n      <mat-option\n        *ngFor=\"let value of filteredValues$ | async\"\n        matTooltipShowDelay=\"500\"\n        [value]=\"value\"\n        [matTooltip]=\"value\">\n        {{value}}\n      </mat-option>\n    </mat-autocomplete>\n    <button mat-button\n      *ngIf=\"isClearable(2) && inputClearable === 'selectProperty2' && currentFilter.active\"\n      matSuffix\n      mat-icon-button\n      aria-label=\"Clear\"\n      [disabled]=\"!currentFilter.active\"\n      (click)=\"clearProperty(2)\">\n          <mat-icon svgIcon=\"close\"></mat-icon>\n    </button>\n</mat-form-field>\n\n<igo-ogc-filter-time *ngIf=\"isTemporalOperator()\"\n  [(datasource)]=\"datasource\"\n  [(currentFilter)]=\"currentFilter\"\n  (changeProperty)=\"changeProperty($event.value, $event.pos)\">\n</igo-ogc-filter-time>\n\n<!--\nTODO C'EST PERTINENT je crois\n<mat-form-field class=\"field\" *ngIf=\"!(currentFilterIsSpatial$ | async) && (fields$| async) && (fields$| async).length === 1 &&  (fields$| async)[0].name === ''\">\n<input [disabled]=\"!currentFilter.active\" matInput #fieldPerUser (keyup)=\"changeProperty(currentFilter,'propertyName',fieldPerUser.value)\"\n  (blur)=\"changeProperty(currentFilter,'propertyName',fieldPerUser.value)\" [(ngModel)]=\"currentFilter.propertyName\">\n<button mat-button *ngIf=\"currentFilter.propertyName\" matSuffix mat-icon-button aria-label=\"Clear\" (click)=\"currentFilter.propertyName=''\">\n  <mat-icon svgIcon=\"close\"></mat-icon>\n</button>\n</mat-form-field>\n\n\n\n<mat-checkbox labelPosition='before' (change)=\"changeCaseSensitive($event)\" [(ngModel)]=\"currentFilter.matchCase\">\n  {{('igo.geo.operators.caseSensitive') | translate}}\n</mat-checkbox>\n\n</mat-list-item> -->\n", styles: [":host{width:100%;padding:5px 10px}::ng-deep .mat-form-field .mat-icon svg{width:1em;height:1em;color:#d3d3d3}.mat-form-field{width:100%}.mat-select-arrow{visibility:hidden}.mat-slide-toggle{margin-top:10px}.logical{flex-flow:column nowrap;width:10%;max-width:45px;margin-left:5px}.logicalHidden{flex-flow:column nowrap;width:10%;visibility:hidden;max-width:45px;margin-left:5px}::ng-deep .logical .mat-select-arrow{visibility:hidden}::ng-deep .logicalHidden .mat-select-arrow{visibility:hidden}.field{width:20%}::ng-deep .field .mat-select-arrow{visibility:hidden}.operator{width:12%;margin-left:10px;text-align:center}::ng-deep .operator .mat-select-arrow{visibility:hidden}.spatialSelector{width:15%;margin-left:5px}::ng-deep .spatialSelector .mat-select-arrow{visibility:hidden}.singleInput{width:30%;margin-left:5px}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){.singleInput{width:27%}}.snrc{width:20%;margin-left:5px}::ng-deep .singleInput .mat-select-arrow{visibility:hidden}.dualInput{width:20%;margin-left:5px}::ng-deep .dualInput .mat-select-arrow{visibility:hidden}.igo-layer-button-group{display:flex;float:right;padding-top:5px}.container{display:flex}\n"] }]
         }], function () { return [{ type: WktService }]; }, { refreshFilters: [{
                 type: Input
             }], datasource: [{
@@ -25408,7 +25715,7 @@ OgcFilterableFormComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(OgcFilterableFormComponent, [{
             type: Component,
-            args: [{ selector: 'igo-ogc-filterable-form', template: "<igo-ogc-filter-selection\r\n  *ngIf=\"!advancedOgcFilters\"\r\n  igoListItem\r\n  [refreshFilters]=\"refreshFunc\"\r\n  [datasource]=\"datasource\"\r\n  [map]=\"map\"\r\n  [currentFilter]=\"currentFilter\">\r\n</igo-ogc-filter-selection>\r\n\r\n<ng-template \r\n*ngIf=\"advancedOgcFilters && datasource.options.ogcFilters.editable\"\r\nngFor let-currentFilter \r\n[ngForOf]=\"datasource.options.ogcFilters.interfaceOgcFilters\">\r\n<igo-ogc-filter-form\r\n  [currentFilter]=\"currentFilter\"\r\n  [refreshFilters]=\"refreshFunc\"\r\n  [datasource]=\"datasource\"\r\n  [map]=\"map\">\r\n</igo-ogc-filter-form>\r\n</ng-template>" }]
+            args: [{ selector: 'igo-ogc-filterable-form', template: "<igo-ogc-filter-selection\n  *ngIf=\"!advancedOgcFilters\"\n  igoListItem\n  [refreshFilters]=\"refreshFunc\"\n  [datasource]=\"datasource\"\n  [map]=\"map\"\n  [currentFilter]=\"currentFilter\">\n</igo-ogc-filter-selection>\n\n<ng-template \n*ngIf=\"advancedOgcFilters && datasource.options.ogcFilters.editable\"\nngFor let-currentFilter \n[ngForOf]=\"datasource.options.ogcFilters.interfaceOgcFilters\">\n<igo-ogc-filter-form\n  [currentFilter]=\"currentFilter\"\n  [refreshFilters]=\"refreshFunc\"\n  [datasource]=\"datasource\"\n  [map]=\"map\">\n</igo-ogc-filter-form>\n</ng-template>" }]
         }], function () { return []; }, { datasource: [{
                 type: Input
             }], map: [{
@@ -25735,7 +26042,7 @@ OgcFilterableItemComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(OgcFilterableItemComponent, [{
             type: Component,
-            args: [{ selector: 'igo-ogc-filterable-item', template: "<div [ngClass]=\"{'separate-item' : header === true}\" >\r\n  <mat-list-item>\r\n    <mat-icon\r\n      *ngIf=\"header\"\r\n      class=\"igo-chevron\"\r\n      mat-list-avatar\r\n      igoCollapse [target]=\"ogcFilters\"\r\n      [collapsed]=\"filtersCollapsed\"\r\n      (click)=\"toggleFiltersCollapsed()\"\r\n      svgIcon=\"chevron-up\">\r\n    </mat-icon>\r\n    <h4 (click)=\"toggleLegendOnClick()\" *ngIf=\"header\" [ngStyle]=\"{'cursor': filtersCollapsed ? 'default' : 'pointer'}\" matLine [matTooltip]=\"layer.title\" matTooltipShowDelay=\"500\">{{layer.title}}</h4>\r\n      <button *ngIf=\"isAdvancedOgcFilters() && filtersAreEditable\" [disabled]=\"addFilterDisabled()\" mat-icon-button tooltip-position=\"below\" matTooltipShowDelay=\"500\"\r\n        [matTooltip]=\"'igo.geo.filter.addFilter' | translate\" [color]=\"color\" (click)=\"addFilterToSequence()\">\r\n        <mat-icon svgIcon=\"plus\"></mat-icon>\r\n      </button>\r\n      <button *ngIf=\"header\"\r\n        mat-icon-button\r\n        [color]=\"layer.visible ? 'primary' : 'default'\"\r\n        collapsibleButton\r\n        tooltip-position=\"below\"\r\n        matTooltipShowDelay=\"500\"\r\n        [matTooltip]=\"layer.visible ?\r\n                      ('igo.geo.layer.hideLayer' | translate) :\r\n                      ('igo.geo.layer.showLayer' | translate)\"\r\n        (click)=\"layer.visible = !layer.visible\">\r\n        <mat-icon\r\n          [ngClass]=\"{disabled: (inResolutionRange$ | async)===false}\"\r\n          [svgIcon]=\"layer.visible ? 'eye' : 'eye-off'\">\r\n        </mat-icon>\r\n      </button>\r\n  </mat-list-item>\r\n\r\n  <div #ogcFilters>\r\n      <div *ngIf=\"header\" #legend class=\"igo-layer-legend-container\">\r\n        <igo-layer-legend *ngIf=\"showLegend$ | async\" [layer]=\"layer\">\r\n        </igo-layer-legend>\r\n      </div>\r\n    <igo-ogc-filterable-form [datasource]=\"datasource\" [map]=\"map\" [refreshFilters]=\"refreshFunc\">\r\n    </igo-ogc-filterable-form>\r\n\r\n    <section *ngIf=\"hasSelector && filtersAreEditable\" class=\"mat-typography advancedOgcFilters\">\r\n      <mat-divider></mat-divider>\r\n      <mat-checkbox labelPosition='before' (change)=\"changeOgcFilterType($event)\"\r\n        [(ngModel)]=\"datasource.options.ogcFilters.advancedOgcFilters\">\r\n        {{'igo.geo.filter.advancedOgcFilters' | translate}}\r\n      </mat-checkbox>\r\n    </section>\r\n  </div>\r\n</div>", styles: [":host{overflow:hidden}.advancedOgcFilters{text-align:center;width:100%;display:inline-block}.mat-list-item{height:auto}.igo-layer-legend-container{padding-left:1.125em;width:calc(100% - 18px)}mat-icon.disabled{color:#00000061}.separate-item{border-bottom:4px solid darkgrey}\n"] }]
+            args: [{ selector: 'igo-ogc-filterable-item', template: "<div [ngClass]=\"{'separate-item' : header === true}\" >\n  <mat-list-item>\n    <mat-icon\n      *ngIf=\"header\"\n      class=\"igo-chevron\"\n      mat-list-avatar\n      igoCollapse [target]=\"ogcFilters\"\n      [collapsed]=\"filtersCollapsed\"\n      (click)=\"toggleFiltersCollapsed()\"\n      svgIcon=\"chevron-up\">\n    </mat-icon>\n    <h4 (click)=\"toggleLegendOnClick()\" *ngIf=\"header\" [ngStyle]=\"{'cursor': filtersCollapsed ? 'default' : 'pointer'}\" matLine [matTooltip]=\"layer.title\" matTooltipShowDelay=\"500\">{{layer.title}}</h4>\n      <button *ngIf=\"isAdvancedOgcFilters() && filtersAreEditable\" [disabled]=\"addFilterDisabled()\" mat-icon-button tooltip-position=\"below\" matTooltipShowDelay=\"500\"\n        [matTooltip]=\"'igo.geo.filter.addFilter' | translate\" [color]=\"color\" (click)=\"addFilterToSequence()\">\n        <mat-icon svgIcon=\"plus\"></mat-icon>\n      </button>\n      <button *ngIf=\"header\"\n        mat-icon-button\n        [color]=\"layer.visible ? 'primary' : 'default'\"\n        collapsibleButton\n        tooltip-position=\"below\"\n        matTooltipShowDelay=\"500\"\n        [matTooltip]=\"layer.visible ?\n                      ('igo.geo.layer.hideLayer' | translate) :\n                      ('igo.geo.layer.showLayer' | translate)\"\n        (click)=\"layer.visible = !layer.visible\">\n        <mat-icon\n          [ngClass]=\"{disabled: (inResolutionRange$ | async)===false}\"\n          [svgIcon]=\"layer.visible ? 'eye' : 'eye-off'\">\n        </mat-icon>\n      </button>\n  </mat-list-item>\n\n  <div #ogcFilters>\n      <div *ngIf=\"header\" #legend class=\"igo-layer-legend-container\">\n        <igo-layer-legend *ngIf=\"showLegend$ | async\" [layer]=\"layer\">\n        </igo-layer-legend>\n      </div>\n    <igo-ogc-filterable-form [datasource]=\"datasource\" [map]=\"map\" [refreshFilters]=\"refreshFunc\">\n    </igo-ogc-filterable-form>\n\n    <section *ngIf=\"hasSelector && filtersAreEditable\" class=\"mat-typography advancedOgcFilters\">\n      <mat-divider></mat-divider>\n      <mat-checkbox labelPosition='before' (change)=\"changeOgcFilterType($event)\"\n        [(ngModel)]=\"datasource.options.ogcFilters.advancedOgcFilters\">\n        {{'igo.geo.filter.advancedOgcFilters' | translate}}\n      </mat-checkbox>\n    </section>\n  </div>\n</div>", styles: [":host{overflow:hidden}.advancedOgcFilters{text-align:center;width:100%;display:inline-block}.mat-list-item{height:auto}.igo-layer-legend-container{padding-left:1.125em;width:calc(100% - 18px)}mat-icon.disabled{color:#00000061}.separate-item{border-bottom:4px solid darkgrey}\n"] }]
         }], function () { return [{ type: OGCFilterService }]; }, { layer: [{
                 type: Input
             }], map: [{
@@ -25790,7 +26097,7 @@ OgcFilterableListComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(OgcFilterableListComponent, [{
             type: Component,
-            args: [{ selector: 'igo-ogc-filterable-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "\r\n<igo-list [navigation]=\"false\" [selection]=\"false\">\r\n  <div  id=\"no-layer-message\" *ngIf=\"(layers | filterableDataSource : 'ogc').length === 0\">{{'igo.geo.filter.noFilterableLayer' | translate}}</div>\r\n  <ng-template ngFor let-layer [ngForOf]=\"layers | filterableDataSource: 'ogc'\">\r\n    <igo-ogc-filterable-item igoListItem [header]=\"true\" [layer]=\"layer\" \r\n    [map]=\"layer.map\" ></igo-ogc-filterable-item>\r\n  </ng-template>\r\n</igo-list>\r\n", styles: ["#no-layer-message{padding:7%;text-align:center;font-size:medium;font-weight:700}\n"] }]
+            args: [{ selector: 'igo-ogc-filterable-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "\n<igo-list [navigation]=\"false\" [selection]=\"false\">\n  <div  id=\"no-layer-message\" *ngIf=\"(layers | filterableDataSource : 'ogc').length === 0\">{{'igo.geo.filter.noFilterableLayer' | translate}}</div>\n  <ng-template ngFor let-layer [ngForOf]=\"layers | filterableDataSource: 'ogc'\">\n    <igo-ogc-filterable-item igoListItem [header]=\"true\" [layer]=\"layer\" \n    [map]=\"layer.map\" ></igo-ogc-filterable-item>\n  </ng-template>\n</igo-list>\n", styles: ["#no-layer-message{padding:7%;text-align:center;font-size:medium;font-weight:700}\n"] }]
         }], function () { return []; }, { layers: [{
                 type: Input
             }], map: [{
@@ -25970,7 +26277,7 @@ OgcFilterButtonComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Og
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(OgcFilterButtonComponent, [{
             type: Component,
-            args: [{ selector: 'igo-ogc-filter-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\r\n  *ngIf=\"header && options.ogcFilters && options.ogcFilters.enabled &&\r\n  (options.ogcFilters.pushButtons || options.ogcFilters.checkboxes || options.ogcFilters.radioButtons || options.ogcFilters.select || options.ogcFilters.autocomplete\r\n    || options.ogcFilters.editable)\"\r\n  mat-icon-button\r\n  collapsibleButton\r\n  tooltip-position=\"below\"\r\n  matTooltipShowDelay=\"500\"\r\n  [matTooltip]=\"'igo.geo.filter.filterBy' | translate\"\r\n  [color]=\"color\">\r\n  <mat-icon [matBadge]=\"badge\" matBadgeColor=\"warn\" matBadgeSize=\"medium\" svgIcon=\"filter\"></mat-icon>\r\n</button>\r\n\r\n<div #ogcFilter class=\"igo-layer-actions-container\"\r\n*ngIf=\"options.ogcFilters && options.ogcFilters.enabled &&\r\n(options.ogcFilters.pushButtons || options.ogcFilters.checkboxes || options.ogcFilters.radioButtons || options.ogcFilters.select || options.ogcFilters.autocomplete\r\n  || options.ogcFilters.editable)\">\r\n  <igo-ogc-filterable-item\r\n    *ngIf=\"ogcFilterCollapse && options.ogcFilters.enabled\"\r\n    igoListItem\r\n    [header]=\"false\"\r\n    [map]=\"layer.map\"\r\n    [layer]=\"layer\">\r\n  </igo-ogc-filterable-item>\r\n</div>\r\n" }]
+            args: [{ selector: 'igo-ogc-filter-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  *ngIf=\"header && options.ogcFilters && options.ogcFilters.enabled &&\n  (options.ogcFilters.pushButtons || options.ogcFilters.checkboxes || options.ogcFilters.radioButtons || options.ogcFilters.select || options.ogcFilters.autocomplete\n    || options.ogcFilters.editable)\"\n  mat-icon-button\n  collapsibleButton\n  tooltip-position=\"below\"\n  matTooltipShowDelay=\"500\"\n  [matTooltip]=\"'igo.geo.filter.filterBy' | translate\"\n  [color]=\"color\">\n  <mat-icon [matBadge]=\"badge\" matBadgeColor=\"warn\" matBadgeSize=\"medium\" svgIcon=\"filter\"></mat-icon>\n</button>\n\n<div #ogcFilter class=\"igo-layer-actions-container\"\n*ngIf=\"options.ogcFilters && options.ogcFilters.enabled &&\n(options.ogcFilters.pushButtons || options.ogcFilters.checkboxes || options.ogcFilters.radioButtons || options.ogcFilters.select || options.ogcFilters.autocomplete\n  || options.ogcFilters.editable)\">\n  <igo-ogc-filterable-item\n    *ngIf=\"ogcFilterCollapse && options.ogcFilters.enabled\"\n    igoListItem\n    [header]=\"false\"\n    [map]=\"layer.map\"\n    [layer]=\"layer\">\n  </igo-ogc-filterable-item>\n</div>\n" }]
         }], function () { return []; }, { layer: [{
                 type: Input
             }], map: [{
@@ -27480,7 +27787,7 @@ OgcFilterSelectionComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(OgcFilterSelectionComponent, [{
             type: Component,
-            args: [{ selector: 'igo-ogc-filter-selection', providers: [DOMService], template: "<form [formGroup]=\"form\">\r\n  <div *ngFor=\"let selector of ogcFiltersSelectors\">\r\n    <div class=\"pushButtonGroups\" *ngIf=\"selector.selectorType === 'pushButton'\">\r\n      <mat-divider></mat-divider>\r\n      <div class=\"groupsSelector\" *ngIf=\"getPushButtonsGroups().length > 1\">\r\n        <mat-form-field>\r\n          <mat-select\r\n            formControlName=\"pushButtonsGroup\"\r\n            [matTooltip]=\"'igo.geo.layer.legend.selectStyle' | translate\" tooltip-position=\"below\" matTooltipShowDelay=\"500\"\r\n            [(value)]=\"currentPushButtonsGroup\">\r\n            <mat-option *ngFor=\"let selectorGroup of getPushButtonsGroups()\"\r\n              [value]=\"selectorGroup\">{{selectorGroup.title}}\r\n            </mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </div>\r\n      <ng-container *ngFor=\"let bundle of currentPushButtonsGroup.computedSelectors\">\r\n        <h4>{{bundle.title}}</h4>\r\n        <mat-button-toggle-group\r\n          formControlName=\"pushButtons\" class=\"mat-typography\" appearance=\"legacy\" vertical={{bundleIsVertical(bundle)}} multiple=\"true\">\r\n          <mat-button-toggle *ngFor=\"let ogcPushButton of bundle.selectors\"\r\n            [matTooltip]=\"getToolTip(ogcPushButton)\" tooltip-position=\"below\" matTooltipShowDelay=\"500\" matTooltipClass=\"material-tooltip\"\r\n            [ngStyle]=\"getButtonColor(ogcPushButton)\"\r\n            [checked]=\"ogcPushButton.enabled\" (change)=\"onSelectionChange(ogcPushButton, selector.selectorType)\"\r\n            [value]=\"ogcPushButton\">{{ogcPushButton.title}}\r\n          </mat-button-toggle>\r\n        </mat-button-toggle-group>\r\n      </ng-container>\r\n    </div>\r\n\r\n    <div class=\"checkboxGroups\" *ngIf=\"selector.selectorType === 'checkbox'\">\r\n      <mat-divider></mat-divider>\r\n      <div class=\"groupsSelector\" *ngIf=\"getCheckboxesGroups().length > 1\">\r\n        <mat-form-field>\r\n          <mat-select\r\n            formControlName=\"checkboxesGroup\"\r\n            [matTooltip]=\"'igo.geo.layer.legend.selectStyle' | translate\" tooltip-position=\"below\" matTooltipShowDelay=\"500\"\r\n            [(value)]=\"currentCheckboxesGroup\">\r\n            <mat-option *ngFor=\"let selectorGroup of getCheckboxesGroups()\"\r\n              [value]=\"selectorGroup\">{{selectorGroup.title}}\r\n            </mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </div>\r\n      <ng-container *ngFor=\"let bundle of currentCheckboxesGroup.computedSelectors\">\r\n        <h4>{{bundle.title}}</h4>\r\n        <div class=\"checkboxes mat-typography\">\r\n          <mat-checkbox *ngFor=\"let ogcCheckbox of bundle.selectors\"\r\n            [matTooltip]=\"getToolTip(ogcCheckbox)\" tooltip-position=\"below\" matTooltipShowDelay=\"500\"  matTooltipClass=\"material-tooltip\"\r\n            [checked]=\"ogcCheckbox.enabled\" (change)=\"onSelectionChange(ogcCheckbox, selector.selectorType)\"\r\n            [value]=\"ogcCheckbox\">{{ogcCheckbox.title}}\r\n          </mat-checkbox>\r\n        </div>\r\n        <p *ngIf=\"isLessResults(bundle, 'checkbox') || isMoreResults(bundle, 'checkbox')\">\r\n          <u *ngIf=\"isLessResults(bundle, 'checkbox')\"\r\n            class=\"lessResults mat-typography\"\r\n            (click)=\"displayLessResults('checkbox')\">{{ 'igo.geo.filter.displayLessResults' | translate }}\r\n          </u>\r\n          <u *ngIf=\"isMoreResults(bundle, 'checkbox')\"\r\n            class=\"moreResults mat-typography\"\r\n            (click)=\"displayMoreResults('checkbox')\">{{ 'igo.geo.filter.displayMoreResults' | translate }}\r\n          </u>\r\n        </p>\r\n      </ng-container>\r\n    </div>\r\n\r\n    <div class=\"radioButtonGroups\" *ngIf=\"selector.selectorType === 'radioButton'\">\r\n      <mat-divider></mat-divider>\r\n      <div class=\"groupsSelector\" *ngIf=\"getRadioButtonsGroups().length > 1\">\r\n        <mat-form-field>\r\n          <mat-select\r\n            formControlName=\"radioButtonsGroup\"\r\n            [matTooltip]=\"'igo.geo.layer.legend.selectStyle' | translate\" tooltip-position=\"below\" matTooltipShowDelay=\"500\"\r\n            [(value)]=\"currentRadioButtonsGroup\">\r\n            <mat-option *ngFor=\"let selectorGroup of getRadioButtonsGroups()\"\r\n              [value]=\"selectorGroup\">{{selectorGroup.title}}\r\n            </mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </div>\r\n      <ng-container *ngFor=\"let bundle of currentRadioButtonsGroup.computedSelectors\">\r\n        <h4>{{bundle.title}}</h4>\r\n        <mat-radio-group\r\n          formControlName=\"radioButtons\" class=\"mat-typography\">\r\n          <mat-radio-button *ngIf=\"bundle.unfiltered\"\r\n            [matTooltip]=\"'igo.geo.filter.resetFilters' | translate\" tooltip-position=\"below\" matTooltipShowDelay=\"500\"  matTooltipClass=\"material-tooltip\"\r\n            (change)=\"emptyRadioButtons()\">{{ 'igo.geo.filter.resetFilters' | translate }}\r\n          </mat-radio-button>\r\n          <mat-radio-button *ngFor=\"let ogcRadioButton of bundle.selectors\"\r\n            [matTooltip]=\"getToolTip(ogcRadioButton)\" tooltip-position=\"below\" matTooltipShowDelay=\"500\"  matTooltipClass=\"material-tooltip\"\r\n            [checked]=\"ogcRadioButton.enabled\" (change)=\"onSelectionChange(ogcRadioButton, selector.selectorType)\"\r\n            [value]=\"ogcRadioButton\">{{ogcRadioButton.title}}\r\n          </mat-radio-button>\r\n          <p *ngIf=\"isLessResults(bundle, 'radio') || isMoreResults(bundle, 'radio')\">\r\n            <u *ngIf=\"isLessResults(bundle, 'radio')\"\r\n              class=\"lessResults mat-typography\"\r\n              (click)=\"displayLessResults('radio')\">{{ 'igo.geo.filter.displayLessResults' | translate }}\r\n            </u>\r\n            <u *ngIf=\"isMoreResults(bundle, 'radio')\"\r\n              class=\"moreResults mat-typography\"\r\n              (click)=\"displayMoreResults('radio')\">{{ 'igo.geo.filter.displayMoreResults' | translate }}\r\n            </u>\r\n          </p>\r\n        </mat-radio-group>\r\n      </ng-container>\r\n    </div>\r\n\r\n    <div class=\"selectGroups\" *ngIf=\"selector.selectorType === 'select'\">\r\n      <mat-divider></mat-divider>\r\n      <div class=\"groupsSelector\" *ngIf=\"getSelectGroups().length > 1\">\r\n        <mat-form-field>\r\n          <mat-select\r\n            formControlName=\"selectGroup\"\r\n            [matTooltip]=\"'igo.geo.layer.legend.selectStyle' | translate\" tooltip-position=\"below\" matTooltipShowDelay=\"500\"\r\n            [(value)]=\"currentSelectGroup\">\r\n            <mat-option *ngFor=\"let selectorGroup of getSelectGroups()\"\r\n              [value]=\"selectorGroup\">{{selectorGroup.title}}\r\n            </mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </div>\r\n      <ng-container *ngFor=\"let bundle of currentSelectGroup.computedSelectors\">\r\n        <h4>{{bundle.title}}</h4>\r\n        <div class=\"groupsSelector\">\r\n          <mat-button *ngIf=\"bundle.unfiltered && !bundle.multiple\"\r\n            mat-icon-button\r\n            color=\"warn\"\r\n            [matTooltip]=\"'igo.geo.filter.resetFilters' | translate\" tooltip-position=\"below\" matTooltipShowDelay=\"500\"  matTooltipClass=\"material-tooltip\"\r\n            (click)=\"emptySelect()\">\r\n            <mat-icon svgIcon=\"filter-remove\"></mat-icon>\r\n          </mat-button>\r\n          <mat-form-field [style.width.%]=\"bundle.width ? bundle.width : undefined\">\r\n            <div *ngIf=\"bundle.multiple; else notMulti\">\r\n              <mat-select\r\n                #selection [multiple]=\"bundle.multiple\" [placeholder]=\"bundle.title\" formControlName=\"selectMulti\">\r\n                <div class=\"checkboxes mat-typography\">\r\n                  <mat-checkbox *ngIf=\"bundle.multiple\"\r\n                    [(ngModel)]=\"selectAllSelected\" [ngModelOptions]=\"{standalone: true}\"\r\n                    (change)=\"toggleAllSelection()\">Tous\r\n                  </mat-checkbox>\r\n                </div>\r\n                <mat-option *ngFor=\"let ogcSelect of bundle.selectors\"\r\n                  [matTooltip]=\"getToolTip(ogcSelect)\" tooltip-position=\"below\" matTooltipDelay=\"500\" matTooltipClass=\"material-tooltip\"\r\n                  (onSelectionChange)=\"selectOptionClick($event.source.value, bundle, $event)\"\r\n                  [value]=\"ogcSelect\">{{ogcSelect.title}}\r\n                </mat-option>\r\n              </mat-select>\r\n            </div>\r\n            <ng-template #notMulti>\r\n              <mat-select\r\n                [placeholder]=\"bundle.title\" formControlName=\"select\">\r\n                <mat-option *ngFor=\"let ogcSelect of bundle.selectors\"\r\n                  [matTooltip]=\"getToolTip(ogcSelect)\" tooltip-position=\"below\" matTooltipDelay=\"500\" matTooltipClass=\"material-tooltip\"\r\n                  [value]=\"ogcSelect\" (onSelectionChange)=\"selectOptionClick($event.source.value, bundle)\">{{ogcSelect.title}}\r\n                </mat-option>\r\n              </mat-select>\r\n            </ng-template>\r\n          </mat-form-field>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n\r\n    <div class=\"autocompleteGroups\" *ngIf=\"selector.selectorType === 'autocomplete'\">\r\n      <mat-divider></mat-divider>\r\n      <div class=\"groupsSelector\" *ngIf=\"getAutocompleteGroups().length > 1\">\r\n        <mat-form-field>\r\n          <mat-select\r\n            formControlName=\"autocompleteGroup\"\r\n            [matTooltip]=\"'igo.geo.layer.legend.selectStyle' | translate\" tooltip-position=\"below\" matTooltipShowDelay=\"500\"\r\n            [(value)]=\"currentAutocompleteGroup\">\r\n            <mat-option *ngFor=\"let autocompleteGroup of getAutocompleteGroups()\"\r\n              [value]=\"autocompleteGroup\">{{autocompleteGroup.title}}\r\n            </mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </div>\r\n      <ng-container *ngFor=\"let bundle of currentAutocompleteGroup.computedSelectors\">\r\n        <h4>{{bundle.title}}</h4>\r\n        <div class=\"groupsSelector\">\r\n          <mat-button *ngIf=\"bundle.unfiltered\"\r\n            mat-icon-button\r\n            color=\"warn\"\r\n            [matTooltip]=\"'igo.geo.filter.resetFilters' | translate\" tooltip-position=\"below\" matTooltipShowDelay=\"500\"  matTooltipClass=\"material-tooltip\"\r\n            (click)=\"emptyAutocomplete()\">\r\n            <mat-icon svgIcon=\"filter-remove\"></mat-icon>\r\n          </mat-button>\r\n          <mat-form-field *ngIf=\"filteredOgcAutocomplete[bundle.id]\" [style.width.%]=\"bundle.width ? bundle.width : undefined\">\r\n            <input matInput type=\"text\" formControlName=\"autocomplete\" #autocomplete class=\"autocomplete\"\r\n              [matAutocomplete]=\"auto\" [placeholder]=\"bundle.title\">\r\n              <mat-autocomplete #auto=\"matAutocomplete\" #autocomplete (optionSelected)=\"autocompleteOptionClick($event.option.value)\"\r\n              [displayWith]=\"displayFn\">\r\n                <mat-option *ngFor=\"let ogcAutocomplete of filteredOgcAutocomplete[bundle.id] | async\" [value]=\"ogcAutocomplete\">\r\n                  {{ ogcAutocomplete.value }}\r\n                </mat-option>\r\n              </mat-autocomplete>\r\n          </mat-form-field>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</form>\r\n\r\n<div *ngIf=\"isTemporalOperator()\">\r\n  <mat-divider></mat-divider>\r\n  <h4 *ngIf=\"!currentFilter.title\">{{ 'igo.geo.filter.reportingDate' | translate }}</h4>\r\n  <h4 *ngIf=\"currentFilter.title\">{{ currentFilter.title }}</h4>\r\n  <igo-ogc-filter-time\r\n    [(datasource)]=\"datasource\"\r\n    [(currentFilter)]=\"currentFilter\"\r\n    (changeProperty)=\"changeProperty($event.value, $event.pos)\">\r\n  </igo-ogc-filter-time>\r\n</div>", styles: [".mat-button-toggle-group{margin:5px;flex-wrap:wrap;box-shadow:none!important;width:95%}.checkboxes{flex-wrap:wrap;box-shadow:none}.groupsSelector{text-align:center}mat-button-toggle{display:inline-flex;border:1.5px solid black;border-radius:5px;margin:5px;white-space:normal;min-height:40px;height:auto;width:142px}mat-button-toggle ::ng-deep .mat-button-toggle-label-content{line-height:inherit;font-size:small;display:block}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){mat-button-toggle{width:45%}}::ng-deep .material-tooltip{white-space:pre-wrap}mat-checkbox,mat-radio-button{margin:7px;width:95%;display:inline-flex;font-size:larger}mat-checkbox ::ng-deep label,mat-radio-button ::ng-deep label{white-space:normal}mat-checkbox{vertical-align:middle}mat-button{padding-right:10px;cursor:pointer}h4{margin:7px;text-align:left}u{cursor:pointer;color:#00f;margin:5px}p{margin:0;margin:initial}\n"] }]
+            args: [{ selector: 'igo-ogc-filter-selection', providers: [DOMService], template: "<form [formGroup]=\"form\">\n  <div *ngFor=\"let selector of ogcFiltersSelectors\">\n    <div class=\"pushButtonGroups\" *ngIf=\"selector.selectorType === 'pushButton'\">\n      <mat-divider></mat-divider>\n      <div class=\"groupsSelector\" *ngIf=\"getPushButtonsGroups().length > 1\">\n        <mat-form-field>\n          <mat-select\n            formControlName=\"pushButtonsGroup\"\n            [matTooltip]=\"'igo.geo.layer.legend.selectStyle' | translate\" tooltip-position=\"below\" matTooltipShowDelay=\"500\"\n            [(value)]=\"currentPushButtonsGroup\">\n            <mat-option *ngFor=\"let selectorGroup of getPushButtonsGroups()\"\n              [value]=\"selectorGroup\">{{selectorGroup.title}}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n      <ng-container *ngFor=\"let bundle of currentPushButtonsGroup.computedSelectors\">\n        <h4>{{bundle.title}}</h4>\n        <mat-button-toggle-group\n          formControlName=\"pushButtons\" class=\"mat-typography\" appearance=\"legacy\" vertical={{bundleIsVertical(bundle)}} multiple=\"true\">\n          <mat-button-toggle *ngFor=\"let ogcPushButton of bundle.selectors\"\n            [matTooltip]=\"getToolTip(ogcPushButton)\" tooltip-position=\"below\" matTooltipShowDelay=\"500\" matTooltipClass=\"material-tooltip\"\n            [ngStyle]=\"getButtonColor(ogcPushButton)\"\n            [checked]=\"ogcPushButton.enabled\" (change)=\"onSelectionChange(ogcPushButton, selector.selectorType)\"\n            [value]=\"ogcPushButton\">{{ogcPushButton.title}}\n          </mat-button-toggle>\n        </mat-button-toggle-group>\n      </ng-container>\n    </div>\n\n    <div class=\"checkboxGroups\" *ngIf=\"selector.selectorType === 'checkbox'\">\n      <mat-divider></mat-divider>\n      <div class=\"groupsSelector\" *ngIf=\"getCheckboxesGroups().length > 1\">\n        <mat-form-field>\n          <mat-select\n            formControlName=\"checkboxesGroup\"\n            [matTooltip]=\"'igo.geo.layer.legend.selectStyle' | translate\" tooltip-position=\"below\" matTooltipShowDelay=\"500\"\n            [(value)]=\"currentCheckboxesGroup\">\n            <mat-option *ngFor=\"let selectorGroup of getCheckboxesGroups()\"\n              [value]=\"selectorGroup\">{{selectorGroup.title}}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n      <ng-container *ngFor=\"let bundle of currentCheckboxesGroup.computedSelectors\">\n        <h4>{{bundle.title}}</h4>\n        <div class=\"checkboxes mat-typography\">\n          <mat-checkbox *ngFor=\"let ogcCheckbox of bundle.selectors\"\n            [matTooltip]=\"getToolTip(ogcCheckbox)\" tooltip-position=\"below\" matTooltipShowDelay=\"500\"  matTooltipClass=\"material-tooltip\"\n            [checked]=\"ogcCheckbox.enabled\" (change)=\"onSelectionChange(ogcCheckbox, selector.selectorType)\"\n            [value]=\"ogcCheckbox\">{{ogcCheckbox.title}}\n          </mat-checkbox>\n        </div>\n        <p *ngIf=\"isLessResults(bundle, 'checkbox') || isMoreResults(bundle, 'checkbox')\">\n          <u *ngIf=\"isLessResults(bundle, 'checkbox')\"\n            class=\"lessResults mat-typography\"\n            (click)=\"displayLessResults('checkbox')\">{{ 'igo.geo.filter.displayLessResults' | translate }}\n          </u>\n          <u *ngIf=\"isMoreResults(bundle, 'checkbox')\"\n            class=\"moreResults mat-typography\"\n            (click)=\"displayMoreResults('checkbox')\">{{ 'igo.geo.filter.displayMoreResults' | translate }}\n          </u>\n        </p>\n      </ng-container>\n    </div>\n\n    <div class=\"radioButtonGroups\" *ngIf=\"selector.selectorType === 'radioButton'\">\n      <mat-divider></mat-divider>\n      <div class=\"groupsSelector\" *ngIf=\"getRadioButtonsGroups().length > 1\">\n        <mat-form-field>\n          <mat-select\n            formControlName=\"radioButtonsGroup\"\n            [matTooltip]=\"'igo.geo.layer.legend.selectStyle' | translate\" tooltip-position=\"below\" matTooltipShowDelay=\"500\"\n            [(value)]=\"currentRadioButtonsGroup\">\n            <mat-option *ngFor=\"let selectorGroup of getRadioButtonsGroups()\"\n              [value]=\"selectorGroup\">{{selectorGroup.title}}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n      <ng-container *ngFor=\"let bundle of currentRadioButtonsGroup.computedSelectors\">\n        <h4>{{bundle.title}}</h4>\n        <mat-radio-group\n          formControlName=\"radioButtons\" class=\"mat-typography\">\n          <mat-radio-button *ngIf=\"bundle.unfiltered\"\n            [matTooltip]=\"'igo.geo.filter.resetFilters' | translate\" tooltip-position=\"below\" matTooltipShowDelay=\"500\"  matTooltipClass=\"material-tooltip\"\n            (change)=\"emptyRadioButtons()\">{{ 'igo.geo.filter.resetFilters' | translate }}\n          </mat-radio-button>\n          <mat-radio-button *ngFor=\"let ogcRadioButton of bundle.selectors\"\n            [matTooltip]=\"getToolTip(ogcRadioButton)\" tooltip-position=\"below\" matTooltipShowDelay=\"500\"  matTooltipClass=\"material-tooltip\"\n            [checked]=\"ogcRadioButton.enabled\" (change)=\"onSelectionChange(ogcRadioButton, selector.selectorType)\"\n            [value]=\"ogcRadioButton\">{{ogcRadioButton.title}}\n          </mat-radio-button>\n          <p *ngIf=\"isLessResults(bundle, 'radio') || isMoreResults(bundle, 'radio')\">\n            <u *ngIf=\"isLessResults(bundle, 'radio')\"\n              class=\"lessResults mat-typography\"\n              (click)=\"displayLessResults('radio')\">{{ 'igo.geo.filter.displayLessResults' | translate }}\n            </u>\n            <u *ngIf=\"isMoreResults(bundle, 'radio')\"\n              class=\"moreResults mat-typography\"\n              (click)=\"displayMoreResults('radio')\">{{ 'igo.geo.filter.displayMoreResults' | translate }}\n            </u>\n          </p>\n        </mat-radio-group>\n      </ng-container>\n    </div>\n\n    <div class=\"selectGroups\" *ngIf=\"selector.selectorType === 'select'\">\n      <mat-divider></mat-divider>\n      <div class=\"groupsSelector\" *ngIf=\"getSelectGroups().length > 1\">\n        <mat-form-field>\n          <mat-select\n            formControlName=\"selectGroup\"\n            [matTooltip]=\"'igo.geo.layer.legend.selectStyle' | translate\" tooltip-position=\"below\" matTooltipShowDelay=\"500\"\n            [(value)]=\"currentSelectGroup\">\n            <mat-option *ngFor=\"let selectorGroup of getSelectGroups()\"\n              [value]=\"selectorGroup\">{{selectorGroup.title}}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n      <ng-container *ngFor=\"let bundle of currentSelectGroup.computedSelectors\">\n        <h4>{{bundle.title}}</h4>\n        <div class=\"groupsSelector\">\n          <mat-button *ngIf=\"bundle.unfiltered && !bundle.multiple\"\n            mat-icon-button\n            color=\"warn\"\n            [matTooltip]=\"'igo.geo.filter.resetFilters' | translate\" tooltip-position=\"below\" matTooltipShowDelay=\"500\"  matTooltipClass=\"material-tooltip\"\n            (click)=\"emptySelect()\">\n            <mat-icon svgIcon=\"filter-remove\"></mat-icon>\n          </mat-button>\n          <mat-form-field [style.width.%]=\"bundle.width ? bundle.width : undefined\">\n            <div *ngIf=\"bundle.multiple; else notMulti\">\n              <mat-select\n                #selection [multiple]=\"bundle.multiple\" [placeholder]=\"bundle.title\" formControlName=\"selectMulti\">\n                <div class=\"checkboxes mat-typography\">\n                  <mat-checkbox *ngIf=\"bundle.multiple\"\n                    [(ngModel)]=\"selectAllSelected\" [ngModelOptions]=\"{standalone: true}\"\n                    (change)=\"toggleAllSelection()\">Tous\n                  </mat-checkbox>\n                </div>\n                <mat-option *ngFor=\"let ogcSelect of bundle.selectors\"\n                  [matTooltip]=\"getToolTip(ogcSelect)\" tooltip-position=\"below\" matTooltipDelay=\"500\" matTooltipClass=\"material-tooltip\"\n                  (onSelectionChange)=\"selectOptionClick($event.source.value, bundle, $event)\"\n                  [value]=\"ogcSelect\">{{ogcSelect.title}}\n                </mat-option>\n              </mat-select>\n            </div>\n            <ng-template #notMulti>\n              <mat-select\n                [placeholder]=\"bundle.title\" formControlName=\"select\">\n                <mat-option *ngFor=\"let ogcSelect of bundle.selectors\"\n                  [matTooltip]=\"getToolTip(ogcSelect)\" tooltip-position=\"below\" matTooltipDelay=\"500\" matTooltipClass=\"material-tooltip\"\n                  [value]=\"ogcSelect\" (onSelectionChange)=\"selectOptionClick($event.source.value, bundle)\">{{ogcSelect.title}}\n                </mat-option>\n              </mat-select>\n            </ng-template>\n          </mat-form-field>\n        </div>\n      </ng-container>\n    </div>\n\n    <div class=\"autocompleteGroups\" *ngIf=\"selector.selectorType === 'autocomplete'\">\n      <mat-divider></mat-divider>\n      <div class=\"groupsSelector\" *ngIf=\"getAutocompleteGroups().length > 1\">\n        <mat-form-field>\n          <mat-select\n            formControlName=\"autocompleteGroup\"\n            [matTooltip]=\"'igo.geo.layer.legend.selectStyle' | translate\" tooltip-position=\"below\" matTooltipShowDelay=\"500\"\n            [(value)]=\"currentAutocompleteGroup\">\n            <mat-option *ngFor=\"let autocompleteGroup of getAutocompleteGroups()\"\n              [value]=\"autocompleteGroup\">{{autocompleteGroup.title}}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n      <ng-container *ngFor=\"let bundle of currentAutocompleteGroup.computedSelectors\">\n        <h4>{{bundle.title}}</h4>\n        <div class=\"groupsSelector\">\n          <mat-button *ngIf=\"bundle.unfiltered\"\n            mat-icon-button\n            color=\"warn\"\n            [matTooltip]=\"'igo.geo.filter.resetFilters' | translate\" tooltip-position=\"below\" matTooltipShowDelay=\"500\"  matTooltipClass=\"material-tooltip\"\n            (click)=\"emptyAutocomplete()\">\n            <mat-icon svgIcon=\"filter-remove\"></mat-icon>\n          </mat-button>\n          <mat-form-field *ngIf=\"filteredOgcAutocomplete[bundle.id]\" [style.width.%]=\"bundle.width ? bundle.width : undefined\">\n            <input matInput type=\"text\" formControlName=\"autocomplete\" #autocomplete class=\"autocomplete\"\n              [matAutocomplete]=\"auto\" [placeholder]=\"bundle.title\">\n              <mat-autocomplete #auto=\"matAutocomplete\" #autocomplete (optionSelected)=\"autocompleteOptionClick($event.option.value)\"\n              [displayWith]=\"displayFn\">\n                <mat-option *ngFor=\"let ogcAutocomplete of filteredOgcAutocomplete[bundle.id] | async\" [value]=\"ogcAutocomplete\">\n                  {{ ogcAutocomplete.value }}\n                </mat-option>\n              </mat-autocomplete>\n          </mat-form-field>\n        </div>\n      </ng-container>\n    </div>\n  </div>\n</form>\n\n<div *ngIf=\"isTemporalOperator()\">\n  <mat-divider></mat-divider>\n  <h4 *ngIf=\"!currentFilter.title\">{{ 'igo.geo.filter.reportingDate' | translate }}</h4>\n  <h4 *ngIf=\"currentFilter.title\">{{ currentFilter.title }}</h4>\n  <igo-ogc-filter-time\n    [(datasource)]=\"datasource\"\n    [(currentFilter)]=\"currentFilter\"\n    (changeProperty)=\"changeProperty($event.value, $event.pos)\">\n  </igo-ogc-filter-time>\n</div>", styles: [".mat-button-toggle-group{margin:5px;flex-wrap:wrap;box-shadow:none!important;width:95%}.checkboxes{flex-wrap:wrap;box-shadow:none}.groupsSelector{text-align:center}mat-button-toggle{display:inline-flex;border:1.5px solid black;border-radius:5px;margin:5px;white-space:normal;min-height:40px;height:auto;width:142px}mat-button-toggle ::ng-deep .mat-button-toggle-label-content{line-height:inherit;font-size:small;display:block}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){mat-button-toggle{width:45%}}::ng-deep .material-tooltip{white-space:pre-wrap}mat-checkbox,mat-radio-button{margin:7px;width:95%;display:inline-flex;font-size:larger}mat-checkbox ::ng-deep label,mat-radio-button ::ng-deep label{white-space:normal}mat-checkbox{vertical-align:middle}mat-button{padding-right:10px;cursor:pointer}h4{margin:7px;text-align:left}u{cursor:pointer;color:#00f;margin:5px}p{margin:0;margin:initial}\n"] }]
         }], function () { return [{ type: OGCFilterService }, { type: i2$2.UntypedFormBuilder }, { type: i5$1.DOMService }, { type: i2$1.ConfigService }, { type: i0.ChangeDetectorRef }]; }, { sel: [{
                 type: ViewChild,
                 args: ['selection']
@@ -27625,7 +27932,7 @@ SpatialFilterTypeComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SpatialFilterTypeComponent, [{
             type: Component,
-            args: [{ selector: 'igo-spatial-filter-type', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-tab-group\r\n  [selectedIndex]=\"selectedTypeIndex.value\"\r\n  (selectedIndexChange)=\"selectedTypeIndex.setValue($event)\"\r\n  (selectedTabChange)=\"onTypeChange($event)\">\r\n\r\n  <mat-tab [label]=\"'igo.geo.spatialFilter.predefined' |\u00A0translate\">\r\n    <mat-form-field>\r\n      <mat-label>{{'igo.geo.spatialFilter.searchLabel' | translate}}</mat-label>\r\n      <mat-select (selectionChange)=\"onSelectionChange()\" [(value)]=\"selectedQueryType\">\r\n        <mat-option *ngFor=\"let queryType of queryType\" [value]=\"queryType\">\r\n          {{('igo.geo.terrapi.' + queryType) | translate}}\r\n        </mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <igo-spatial-filter-list\r\n      [store]=\"store\"\r\n      [queryType]=\"selectedQueryType\"\r\n      [zone]=\"zone\"\r\n      [layers]=\"layers\"\r\n      (zoneChange)=\"zoneChange.emit($event)\"\r\n      (zoneWithBufferChange)=\"zoneWithBufferChange.emit($event)\"\r\n      (bufferChange)=\"bufferChange.emit($event)\"\r\n      (measureUnitChange)=\"measureUnitChange.emit($event)\">\r\n    </igo-spatial-filter-list>\r\n  </mat-tab>\r\n\r\n  <mat-tab [label]=\"'igo.geo.spatialFilter.draw' |\u00A0translate\">\r\n    <div class=\"spatial-type-toggle\">\r\n      <mat-button-toggle-group\r\n        [value]=\"activeDrawType\"\r\n        (change)=\"onDrawTypeChange($event.value)\">\r\n        <mat-button-toggle [value]=\"spatialType.Polygon\" [matTooltip]=\"'igo.geo.spatialFilter.drawPolygon' |\u00A0translate\">\r\n            <mat-icon svgIcon=\"pentagon-outline\"></mat-icon>\r\n        </mat-button-toggle>\r\n        <mat-button-toggle [value]=\"spatialType.Point\" [matTooltip]=\"'igo.geo.spatialFilter.drawCircle' |\u00A0translate\">\r\n            <mat-icon svgIcon=\"record-circle-outline\"></mat-icon>\r\n        </mat-button-toggle>\r\n      </mat-button-toggle-group>\r\n    </div>\r\n  </mat-tab>\r\n\r\n</mat-tab-group>\r\n", styles: [".mat-form-field{padding:5px;width:95%;margin-left:2px}.mat-tab-group ::ng-deep .mat-tab-body-content{overflow:hidden}.mat-tab-group ::ng-deep .mat-tab-label{padding:10px}.mat-tab-group ::ng-deep .mat-tab-body-wrapper{margin-top:5px}.spatial-type-toggle{padding:10px;text-align:center}.spatial-type-toggle mat-button-toggle-group{width:50%}.spatial-type-toggle mat-button-toggle-group mat-button-toggle{width:50%}\n"] }]
+            args: [{ selector: 'igo-spatial-filter-type', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-tab-group\n  [selectedIndex]=\"selectedTypeIndex.value\"\n  (selectedIndexChange)=\"selectedTypeIndex.setValue($event)\"\n  (selectedTabChange)=\"onTypeChange($event)\">\n\n  <mat-tab [label]=\"'igo.geo.spatialFilter.predefined' |\u00A0translate\">\n    <mat-form-field>\n      <mat-label>{{'igo.geo.spatialFilter.searchLabel' | translate}}</mat-label>\n      <mat-select (selectionChange)=\"onSelectionChange()\" [(value)]=\"selectedQueryType\">\n        <mat-option *ngFor=\"let queryType of queryType\" [value]=\"queryType\">\n          {{('igo.geo.terrapi.' + queryType) | translate}}\n        </mat-option>\n      </mat-select>\n    </mat-form-field>\n    <igo-spatial-filter-list\n      [store]=\"store\"\n      [queryType]=\"selectedQueryType\"\n      [zone]=\"zone\"\n      [layers]=\"layers\"\n      (zoneChange)=\"zoneChange.emit($event)\"\n      (zoneWithBufferChange)=\"zoneWithBufferChange.emit($event)\"\n      (bufferChange)=\"bufferChange.emit($event)\"\n      (measureUnitChange)=\"measureUnitChange.emit($event)\">\n    </igo-spatial-filter-list>\n  </mat-tab>\n\n  <mat-tab [label]=\"'igo.geo.spatialFilter.draw' |\u00A0translate\">\n    <div class=\"spatial-type-toggle\">\n      <mat-button-toggle-group\n        [value]=\"activeDrawType\"\n        (change)=\"onDrawTypeChange($event.value)\">\n        <mat-button-toggle [value]=\"spatialType.Polygon\" [matTooltip]=\"'igo.geo.spatialFilter.drawPolygon' |\u00A0translate\">\n            <mat-icon svgIcon=\"pentagon-outline\"></mat-icon>\n        </mat-button-toggle>\n        <mat-button-toggle [value]=\"spatialType.Point\" [matTooltip]=\"'igo.geo.spatialFilter.drawCircle' |\u00A0translate\">\n            <mat-icon svgIcon=\"record-circle-outline\"></mat-icon>\n        </mat-button-toggle>\n      </mat-button-toggle-group>\n    </div>\n  </mat-tab>\n\n</mat-tab-group>\n", styles: [".mat-form-field{padding:5px;width:95%;margin-left:2px}.mat-tab-group ::ng-deep .mat-tab-body-content{overflow:hidden}.mat-tab-group ::ng-deep .mat-tab-label{padding:10px}.mat-tab-group ::ng-deep .mat-tab-body-wrapper{margin-top:5px}.spatial-type-toggle{padding:10px;text-align:center}.spatial-type-toggle mat-button-toggle-group{width:50%}.spatial-type-toggle mat-button-toggle-group mat-button-toggle{width:50%}\n"] }]
         }], function () { return []; }, { store: [{
                 type: Input
             }], selectedQueryType: [{
@@ -27832,7 +28139,7 @@ SpatialFilterListComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SpatialFilterListComponent, [{
             type: Component,
-            args: [{ selector: 'igo-spatial-filter-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<form class=\"form-list\">\r\n    <mat-form-field class=\"zone-list\">\r\n        <input #input type=\"text\" placeholder=\"{{'igo.geo.spatialFilter.listLabel' |\u00A0translate}}\" matInput\r\n        [formControl]=\"formControl\" [matAutocomplete]=\"auto\">\r\n        <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"onZoneChange($event.option.value)\"\r\n        [displayWith]=\"displayFn\">\r\n            <mat-option *ngFor=\"let entities of this.store.view.all$() | async\" [value]=\"entities\">\r\n                {{entities.properties.nom}}\r\n            </mat-option>\r\n        </mat-autocomplete>\r\n    </mat-form-field>\r\n<form>\r\n\r\n<div class=\"buffer-div\">\r\n    <form class=\"buffer-form\">\r\n        <mat-form-field class=\"buffer\">\r\n            <input type=\"number\" matInput placeholder=\"{{'igo.geo.spatialFilter.buffer' | translate}}\" [formControl]=\"bufferFormControl\"\r\n            [value]=\"0\" [readonly]=\"!zone\">\r\n        </mat-form-field>\r\n    </form>\r\n\r\n    <mat-form-field class=\"unit-field\">\r\n        <mat-select\r\n        [value]=\"measureUnit\"\r\n        (selectionChange)=\"onMeasureUnitChange($event.value)\">\r\n        <mat-option *ngFor=\"let measureUnit of measureUnits\" [value]=\"measureUnit\">\r\n            {{('igo.geo.measure.' + measureUnit) | translate}}\r\n        </mat-option>\r\n        </mat-select>\r\n    </mat-form-field>\r\n</div>\r\n", styles: [".buffer-div{display:flex;width:100%;margin-left:2px;padding:5px}.zone-list{padding:5px;width:95%;margin-left:2px}.buffer{display:flex;flex-flow:column nowrap;width:110%}.unit-field{width:110px;margin-left:30px}\n"] }]
+            args: [{ selector: 'igo-spatial-filter-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<form class=\"form-list\">\n    <mat-form-field class=\"zone-list\">\n        <input #input type=\"text\" placeholder=\"{{'igo.geo.spatialFilter.listLabel' |\u00A0translate}}\" matInput\n        [formControl]=\"formControl\" [matAutocomplete]=\"auto\">\n        <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"onZoneChange($event.option.value)\"\n        [displayWith]=\"displayFn\">\n            <mat-option *ngFor=\"let entities of this.store.view.all$() | async\" [value]=\"entities\">\n                {{entities.properties.nom}}\n            </mat-option>\n        </mat-autocomplete>\n    </mat-form-field>\n<form>\n\n<div class=\"buffer-div\">\n    <form class=\"buffer-form\">\n        <mat-form-field class=\"buffer\">\n            <input type=\"number\" matInput placeholder=\"{{'igo.geo.spatialFilter.buffer' | translate}}\" [formControl]=\"bufferFormControl\"\n            [value]=\"0\" [readonly]=\"!zone\">\n        </mat-form-field>\n    </form>\n\n    <mat-form-field class=\"unit-field\">\n        <mat-select\n        [value]=\"measureUnit\"\n        (selectionChange)=\"onMeasureUnitChange($event.value)\">\n        <mat-option *ngFor=\"let measureUnit of measureUnits\" [value]=\"measureUnit\">\n            {{('igo.geo.measure.' + measureUnit) | translate}}\n        </mat-option>\n        </mat-select>\n    </mat-form-field>\n</div>\n", styles: [".buffer-div{display:flex;width:100%;margin-left:2px;padding:5px}.zone-list{padding:5px;width:95%;margin-left:2px}.buffer{display:flex;flex-flow:column nowrap;width:110%}.unit-field{width:110px;margin-left:30px}\n"] }]
         }], function () { return [{ type: SpatialFilterService }, { type: i2$1.MessageService }, { type: i2$1.LanguageService }]; }, { store: [{
                 type: Input
             }], queryType: [{
@@ -28919,7 +29226,7 @@ SpatialFilterItemComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SpatialFilterItemComponent, [{
             type: Component,
-            args: [{ selector: 'igo-spatial-filter-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<igo-geometry-form-field-input\r\n  [formControl]=\"formControl\"\r\n  [map]=\"map\"\r\n  [geometryType]=\"geometryType\"\r\n  [drawGuide]=\"drawGuide$ | async\"\r\n  [measure]=\"measure\"\r\n  [drawControlIsActive]=\"drawControlIsActive\"\r\n  [freehandDrawIsActive]=\"freehandDrawIsActive\"\r\n  [drawStyle]=\"drawStyle$ | async\"\r\n  [overlayStyle]=\"overlayStyle$ | async\"\r\n  [radius]=\"radius\">\r\n</igo-geometry-form-field-input>\r\n\r\n<div class=\"header\">\r\n    <mat-slide-toggle *ngIf=\"!isPredefined()\"\r\n      [checked]=\"drawControlIsActive\"\r\n      [labelPosition]=\"'before'\"\r\n      (change)=\"onDrawControlChange()\">\r\n      {{'igo.geo.spatialFilter.drawControl' | translate}}\r\n    </mat-slide-toggle>\r\n    <mat-slide-toggle *ngIf=\"!isPredefined()\"\r\n      [checked]=\"freehandDrawIsActive\"\r\n      [labelPosition]=\"'before'\"\r\n      (change)=\"onfreehandControlChange()\">\r\n      {{'igo.geo.spatialFilter.freehandControl' | translate}}\r\n    </mat-slide-toggle>\r\n</div>\r\n\r\n<div class=\"buffer-unit\" *ngIf=\"isPolygon()\">\r\n  <form class=\"buffer-form\">\r\n    <mat-form-field class=\"buffer\">\r\n      <input type=\"number\" matInput placeholder=\"{{'igo.geo.spatialFilter.buffer' | translate}}\" [formControl]=\"bufferFormControl\"\r\n      [value]=\"0\" [readonly]=\"this.formControl.value === null\">\r\n    </mat-form-field>\r\n  </form>\r\n\r\n  <mat-form-field class=\"unit-field\">\r\n    <mat-select\r\n    [value]=\"measureUnit\"\r\n    (selectionChange)=\"onMeasureUnitChange($event.value)\">\r\n    <mat-option *ngFor=\"let measureUnit of measureUnits\" [value]=\"measureUnit\">\r\n        {{('igo.geo.measure.' + measureUnit) | translate}}\r\n    </mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n</div>\r\n\r\n<div class=\"radius-unit\" *ngIf=\"isPoint()\">\r\n  <form class=\"radius-form\">\r\n    <mat-form-field class=\"radius\">\r\n      <input type=\"number\" matInput placeholder=\"{{'igo.geo.spatialFilter.radius' | translate}}\" [formControl]=\"radiusFormControl\"\r\n      [value]=\"1000\" (input)=\"getRadius()\" [readonly]=\"this.freehandDrawIsActive && this.formControl.value === null\">\r\n    </mat-form-field>\r\n  </form>\r\n\r\n  <mat-form-field class=\"unit-field\">\r\n    <mat-select\r\n    [value]=\"measureUnit\"\r\n    (selectionChange)=\"onMeasureUnitChange($event.value)\">\r\n    <mat-option *ngFor=\"let measureUnit of measureUnits\" [value]=\"measureUnit\">\r\n        {{('igo.geo.measure.' + measureUnit) | translate}}\r\n    </mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n</div>\r\n\r\n<mat-label class=\"title mat-typography\">{{'igo.geo.spatialFilter.search' | translate}} : </mat-label>\r\n<mat-radio-group [value]=\"selectedItemType\">\r\n    <mat-radio-button *ngFor=\"let item of itemType\"\r\n      [value]=\"item\"\r\n      (change)=\"onItemTypeChange($event)\">\r\n      {{'igo.geo.spatialFilter.' + item | translate}}\r\n    </mat-radio-button>\r\n</mat-radio-group>\r\n\r\n<div class=\"thematics\" *ngIf=\"(selectedItemType==='Thematics' && !tableTemplate) || (selectedItemType==='Thematics' && tableTemplate && !listIsVisible)\">\r\n  <mat-table>\r\n      <!-- Name Column -->\r\n      <ng-container matColumnDef=\"name\">\r\n        <mat-header-cell *matHeaderCellDef class=\"thematics-header\">{{'igo.geo.spatialFilter.Thematics' | translate}}</mat-header-cell>\r\n      </ng-container>\r\n\r\n      <!-- Select Column -->\r\n      <ng-container matColumnDef=\"select\">\r\n        <mat-header-cell *matHeaderCellDef class=\"checks-header\">\r\n          <mat-checkbox (change)=\"$event ? masterToggle() : null\"\r\n                        [checked]=\"isAllSelected()\"\r\n                        [indeterminate]=\"selectedThematics.hasValue() && !isAllSelected()\">\r\n          </mat-checkbox>\r\n        </mat-header-cell>\r\n    </ng-container>\r\n\r\n    <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\r\n    <mat-row *matRowDef=\"let row; columns: displayedColumns;\"></mat-row>\r\n\r\n  </mat-table>\r\n\r\n  <mat-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\">\r\n    <!-- This is the tree node template for leaf nodes -->\r\n    <mat-tree-node *matTreeNodeDef=\"let node\" matTreeNodeToggle>\r\n      <li class=\"mat-tree-node\">\r\n        <!-- use a disabled button to provide padding for tree leaf -->\r\n        <button mat-icon-button disabled></button>\r\n        {{node.name}}\r\n        <mat-checkbox class=\"tree-check\" (click)=\"$event.stopPropagation()\"\r\n                      (change)=\"$event ? onToggleChange(node) : null\"\r\n                      [checked]=\"selectedThematics.isSelected(node)\">\r\n        </mat-checkbox>\r\n      </li>\r\n    </mat-tree-node>\r\n\r\n    <!-- This is the tree node template for expandable nodes -->\r\n    <mat-nested-tree-node *matTreeNodeDef=\"let node; when: hasChild\">\r\n        <div class=\"mat-tree-node\">\r\n          <button mat-icon-button\r\n            (click)=\"onToggleClick(node)\">\r\n            <mat-icon [svgIcon]=\"treeControl.isExpanded(node) ? 'chevron-down' : 'chevron-right'\"></mat-icon>\r\n          </button>\r\n          {{node.name}}\r\n          <mat-checkbox class=\"tree-check-2\" (change)=\"$event ? childrensToggle(node) : null\"\r\n                        [checked]=\"isAllSelected(node)\"\r\n                        [indeterminate]=\"hasChildrenSelected(node) && !isAllSelected(node)\">\r\n          </mat-checkbox>\r\n        </div>\r\n        <ul class=\"tree-ul\" [class.example-tree-invisible]=\"!treeControl.isExpanded(node)\">\r\n          <ng-container matTreeNodeOutlet></ng-container>\r\n        </ul>\r\n    </mat-nested-tree-node>\r\n\r\n  </mat-tree>\r\n</div>\r\n\r\n<div class=\"buttons\">\r\n\r\n  <button *ngIf=\"isPredefined()\" mat-raised-button class=\"clear-search-button\" [disabled]=\"disabledClearSearch()\"\r\n    (click)=\"clearSearch()\">\r\n      {{'igo.geo.spatialFilter.clearSearch' | translate}}\r\n  </button>\r\n\r\n  <button *ngIf=\"isPolygon() || isPoint()\" mat-raised-button class=\"clear-form-button\" [disabled]=\"this.formControl.value === null\"\r\n    (click)=\"clearDrawZone()\">\r\n    {{'igo.geo.spatialFilter.clearForm' | translate}}\r\n  </button>\r\n\r\n  <button mat-raised-button class=\"search-button\" [disabled]=\"disableSearchButton()\" color=\"primary\"\r\n    (click)=\"toggleSearchButton()\">\r\n    {{'igo.geo.spatialFilter.goSearch' | translate}}\r\n  </button>\r\n\r\n  <button mat-raised-button class=\"remove-button\" [disabled]=\"allLayers.length === 0\" (click)=\"clearButton()\">\r\n    {{'igo.geo.spatialFilter.removeLayer' | translate}}\r\n  </button>\r\n\r\n  <button mat-raised-button class=\"export-button\" [disabled]=\"!store.entities$.getValue().length\" (click)=\"export.emit()\">\r\n    {{'igo.geo.spatialFilter.exportLayer' | translate}}\r\n  </button>\r\n\r\n</div>\r\n\r\n<button\r\n  class=\"chevron-down\"\r\n  *ngIf=\"store.all().length && tableTemplate && !listIsVisible\"\r\n  mat-icon-button\r\n  matTooltipShowDelay=\"500\"\r\n  [matTooltip]=\"'igo.geo.spatialFilter.showSearchResults' | translate\"\r\n  (click)=\"toggleVisibleList()\">\r\n  <mat-icon svgIcon=\"chevron-down\"></mat-icon>\r\n</button>\r\n\r\n<div class=\"results\" *ngIf=\"store.all().length && tableTemplate && listIsVisible\">\r\n  <button\r\n    *ngIf=\"listIsVisible\"\r\n    mat-icon-button\r\n    matTooltipShowDelay=\"500\"\r\n    [matTooltip]=\"'igo.geo.spatialFilter.hideSearchResults' | translate\"\r\n    (click)=\"toggleVisibleList()\">\r\n  <mat-icon svgIcon=\"chevron-up\"></mat-icon>\r\n  </button>\r\n  <igo-entity-table\r\n    class=\"results-list\"\r\n    [template]=\"tableTemplate\"\r\n    [store]=\"store\"\r\n    (entitySelectChange)=\"entityChange.emit($event)\">\r\n  </igo-entity-table>\r\n</div>\r\n", styles: [".header{margin-top:5px;width:100%}.mat-slide-toggle{padding:5px;margin-bottom:15px;width:98%}.mat-slide-toggle ::ng-deep .mat-slide-toggle-content{width:calc(100% - 20px)}.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}.mat-form-field{margin-top:5px}.mat-column-select{overflow:auto}.buttons{margin-top:15px}.search-button{left:15px;width:46%}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){.search-button{left:10px;width:45%;min-height:35px;white-space:normal;line-height:normal}}.export-button{left:15px;width:46%;margin-bottom:5px}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){.export-button{left:10px;margin-top:10px;width:45%;min-height:35px;white-space:normal;line-height:normal}}.remove-button{margin-top:12px;left:5px;width:46%}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){.remove-button{margin:0;width:45%;min-height:35px;white-space:normal;line-height:normal}}.clear-form-button{left:5px;width:46%}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){.clear-form-button{width:45%;min-height:35px;white-space:normal;line-height:normal}}.clear-search-button{left:5px;width:46%}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){.clear-search-button{width:45%;min-height:35px;white-space:normal;line-height:normal}}.thematics{max-height:35%;overflow:auto;margin-top:5px;width:98%}.results{overflow:auto;max-height:250px;width:98%}.mat-column-typeResults{max-width:100px;margin-right:5px}.buffer-unit,.radius-unit{display:flex;width:100%;margin-left:2px;padding:5px}.radius,.buffer{display:flex;flex-flow:column nowrap;width:110%}.unit-field{width:110px;margin-left:30px}.example-tree-invisible{display:none}.tree-ul{margin:0;padding:0 0 0 20px;list-style-type:none}.tree-check,.tree-check-2{position:relative;margin-left:auto;margin-right:5px}.thematics-header{max-width:250px}.checks-header{padding:none;max-width:calc(100% - 316px);overflow:hidden}.mat-checkbox{padding:5px}.mat-tree-node{position:relative;min-height:42px;width:280px}.mat-header-cell{height:56px}.results{max-height:45%;width:98%}.results igo-entity-table ::ng-deep div.table-container{overflow:visible;overflow:initial}\n"] }]
+            args: [{ selector: 'igo-spatial-filter-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<igo-geometry-form-field-input\n  [formControl]=\"formControl\"\n  [map]=\"map\"\n  [geometryType]=\"geometryType\"\n  [drawGuide]=\"drawGuide$ | async\"\n  [measure]=\"measure\"\n  [drawControlIsActive]=\"drawControlIsActive\"\n  [freehandDrawIsActive]=\"freehandDrawIsActive\"\n  [drawStyle]=\"drawStyle$ | async\"\n  [overlayStyle]=\"overlayStyle$ | async\"\n  [radius]=\"radius\">\n</igo-geometry-form-field-input>\n\n<div class=\"header\">\n    <mat-slide-toggle *ngIf=\"!isPredefined()\"\n      [checked]=\"drawControlIsActive\"\n      [labelPosition]=\"'before'\"\n      (change)=\"onDrawControlChange()\">\n      {{'igo.geo.spatialFilter.drawControl' | translate}}\n    </mat-slide-toggle>\n    <mat-slide-toggle *ngIf=\"!isPredefined()\"\n      [checked]=\"freehandDrawIsActive\"\n      [labelPosition]=\"'before'\"\n      (change)=\"onfreehandControlChange()\">\n      {{'igo.geo.spatialFilter.freehandControl' | translate}}\n    </mat-slide-toggle>\n</div>\n\n<div class=\"buffer-unit\" *ngIf=\"isPolygon()\">\n  <form class=\"buffer-form\">\n    <mat-form-field class=\"buffer\">\n      <input type=\"number\" matInput placeholder=\"{{'igo.geo.spatialFilter.buffer' | translate}}\" [formControl]=\"bufferFormControl\"\n      [value]=\"0\" [readonly]=\"this.formControl.value === null\">\n    </mat-form-field>\n  </form>\n\n  <mat-form-field class=\"unit-field\">\n    <mat-select\n    [value]=\"measureUnit\"\n    (selectionChange)=\"onMeasureUnitChange($event.value)\">\n    <mat-option *ngFor=\"let measureUnit of measureUnits\" [value]=\"measureUnit\">\n        {{('igo.geo.measure.' + measureUnit) | translate}}\n    </mat-option>\n    </mat-select>\n  </mat-form-field>\n</div>\n\n<div class=\"radius-unit\" *ngIf=\"isPoint()\">\n  <form class=\"radius-form\">\n    <mat-form-field class=\"radius\">\n      <input type=\"number\" matInput placeholder=\"{{'igo.geo.spatialFilter.radius' | translate}}\" [formControl]=\"radiusFormControl\"\n      [value]=\"1000\" (input)=\"getRadius()\" [readonly]=\"this.freehandDrawIsActive && this.formControl.value === null\">\n    </mat-form-field>\n  </form>\n\n  <mat-form-field class=\"unit-field\">\n    <mat-select\n    [value]=\"measureUnit\"\n    (selectionChange)=\"onMeasureUnitChange($event.value)\">\n    <mat-option *ngFor=\"let measureUnit of measureUnits\" [value]=\"measureUnit\">\n        {{('igo.geo.measure.' + measureUnit) | translate}}\n    </mat-option>\n    </mat-select>\n  </mat-form-field>\n</div>\n\n<mat-label class=\"title mat-typography\">{{'igo.geo.spatialFilter.search' | translate}} : </mat-label>\n<mat-radio-group [value]=\"selectedItemType\">\n    <mat-radio-button *ngFor=\"let item of itemType\"\n      [value]=\"item\"\n      (change)=\"onItemTypeChange($event)\">\n      {{'igo.geo.spatialFilter.' + item | translate}}\n    </mat-radio-button>\n</mat-radio-group>\n\n<div class=\"thematics\" *ngIf=\"(selectedItemType==='Thematics' && !tableTemplate) || (selectedItemType==='Thematics' && tableTemplate && !listIsVisible)\">\n  <mat-table>\n      <!-- Name Column -->\n      <ng-container matColumnDef=\"name\">\n        <mat-header-cell *matHeaderCellDef class=\"thematics-header\">{{'igo.geo.spatialFilter.Thematics' | translate}}</mat-header-cell>\n      </ng-container>\n\n      <!-- Select Column -->\n      <ng-container matColumnDef=\"select\">\n        <mat-header-cell *matHeaderCellDef class=\"checks-header\">\n          <mat-checkbox (change)=\"$event ? masterToggle() : null\"\n                        [checked]=\"isAllSelected()\"\n                        [indeterminate]=\"selectedThematics.hasValue() && !isAllSelected()\">\n          </mat-checkbox>\n        </mat-header-cell>\n    </ng-container>\n\n    <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n    <mat-row *matRowDef=\"let row; columns: displayedColumns;\"></mat-row>\n\n  </mat-table>\n\n  <mat-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\">\n    <!-- This is the tree node template for leaf nodes -->\n    <mat-tree-node *matTreeNodeDef=\"let node\" matTreeNodeToggle>\n      <li class=\"mat-tree-node\">\n        <!-- use a disabled button to provide padding for tree leaf -->\n        <button mat-icon-button disabled></button>\n        {{node.name}}\n        <mat-checkbox class=\"tree-check\" (click)=\"$event.stopPropagation()\"\n                      (change)=\"$event ? onToggleChange(node) : null\"\n                      [checked]=\"selectedThematics.isSelected(node)\">\n        </mat-checkbox>\n      </li>\n    </mat-tree-node>\n\n    <!-- This is the tree node template for expandable nodes -->\n    <mat-nested-tree-node *matTreeNodeDef=\"let node; when: hasChild\">\n        <div class=\"mat-tree-node\">\n          <button mat-icon-button\n            (click)=\"onToggleClick(node)\">\n            <mat-icon [svgIcon]=\"treeControl.isExpanded(node) ? 'chevron-down' : 'chevron-right'\"></mat-icon>\n          </button>\n          {{node.name}}\n          <mat-checkbox class=\"tree-check-2\" (change)=\"$event ? childrensToggle(node) : null\"\n                        [checked]=\"isAllSelected(node)\"\n                        [indeterminate]=\"hasChildrenSelected(node) && !isAllSelected(node)\">\n          </mat-checkbox>\n        </div>\n        <ul class=\"tree-ul\" [class.example-tree-invisible]=\"!treeControl.isExpanded(node)\">\n          <ng-container matTreeNodeOutlet></ng-container>\n        </ul>\n    </mat-nested-tree-node>\n\n  </mat-tree>\n</div>\n\n<div class=\"buttons\">\n\n  <button *ngIf=\"isPredefined()\" mat-raised-button class=\"clear-search-button\" [disabled]=\"disabledClearSearch()\"\n    (click)=\"clearSearch()\">\n      {{'igo.geo.spatialFilter.clearSearch' | translate}}\n  </button>\n\n  <button *ngIf=\"isPolygon() || isPoint()\" mat-raised-button class=\"clear-form-button\" [disabled]=\"this.formControl.value === null\"\n    (click)=\"clearDrawZone()\">\n    {{'igo.geo.spatialFilter.clearForm' | translate}}\n  </button>\n\n  <button mat-raised-button class=\"search-button\" [disabled]=\"disableSearchButton()\" color=\"primary\"\n    (click)=\"toggleSearchButton()\">\n    {{'igo.geo.spatialFilter.goSearch' | translate}}\n  </button>\n\n  <button mat-raised-button class=\"remove-button\" [disabled]=\"allLayers.length === 0\" (click)=\"clearButton()\">\n    {{'igo.geo.spatialFilter.removeLayer' | translate}}\n  </button>\n\n  <button mat-raised-button class=\"export-button\" [disabled]=\"!store.entities$.getValue().length\" (click)=\"export.emit()\">\n    {{'igo.geo.spatialFilter.exportLayer' | translate}}\n  </button>\n\n</div>\n\n<button\n  class=\"chevron-down\"\n  *ngIf=\"store.all().length && tableTemplate && !listIsVisible\"\n  mat-icon-button\n  matTooltipShowDelay=\"500\"\n  [matTooltip]=\"'igo.geo.spatialFilter.showSearchResults' | translate\"\n  (click)=\"toggleVisibleList()\">\n  <mat-icon svgIcon=\"chevron-down\"></mat-icon>\n</button>\n\n<div class=\"results\" *ngIf=\"store.all().length && tableTemplate && listIsVisible\">\n  <button\n    *ngIf=\"listIsVisible\"\n    mat-icon-button\n    matTooltipShowDelay=\"500\"\n    [matTooltip]=\"'igo.geo.spatialFilter.hideSearchResults' | translate\"\n    (click)=\"toggleVisibleList()\">\n  <mat-icon svgIcon=\"chevron-up\"></mat-icon>\n  </button>\n  <igo-entity-table\n    class=\"results-list\"\n    [template]=\"tableTemplate\"\n    [store]=\"store\"\n    (entitySelectChange)=\"entityChange.emit($event)\">\n  </igo-entity-table>\n</div>\n", styles: [".header{margin-top:5px;width:100%}.mat-slide-toggle{padding:5px;margin-bottom:15px;width:98%}.mat-slide-toggle ::ng-deep .mat-slide-toggle-content{width:calc(100% - 20px)}.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}.mat-form-field{margin-top:5px}.mat-column-select{overflow:auto}.buttons{margin-top:15px}.search-button{left:15px;width:46%}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){.search-button{left:10px;width:45%;min-height:35px;white-space:normal;line-height:normal}}.export-button{left:15px;width:46%;margin-bottom:5px}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){.export-button{left:10px;margin-top:10px;width:45%;min-height:35px;white-space:normal;line-height:normal}}.remove-button{margin-top:12px;left:5px;width:46%}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){.remove-button{margin:0;width:45%;min-height:35px;white-space:normal;line-height:normal}}.clear-form-button{left:5px;width:46%}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){.clear-form-button{width:45%;min-height:35px;white-space:normal;line-height:normal}}.clear-search-button{left:5px;width:46%}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){.clear-search-button{width:45%;min-height:35px;white-space:normal;line-height:normal}}.thematics{max-height:35%;overflow:auto;margin-top:5px;width:98%}.results{overflow:auto;max-height:250px;width:98%}.mat-column-typeResults{max-width:100px;margin-right:5px}.buffer-unit,.radius-unit{display:flex;width:100%;margin-left:2px;padding:5px}.radius,.buffer{display:flex;flex-flow:column nowrap;width:110%}.unit-field{width:110px;margin-left:30px}.example-tree-invisible{display:none}.tree-ul{margin:0;padding:0 0 0 20px;list-style-type:none}.tree-check,.tree-check-2{position:relative;margin-left:auto;margin-right:5px}.thematics-header{max-width:250px}.checks-header{padding:none;max-width:calc(100% - 316px);overflow:hidden}.mat-checkbox{padding:5px}.mat-tree-node{position:relative;min-height:42px;width:280px}.mat-header-cell{height:56px}.results{max-height:45%;width:98%}.results igo-entity-table ::ng-deep div.table-container{overflow:visible;overflow:initial}\n"] }]
         }], function () { return [{ type: i0.ChangeDetectorRef }, { type: SpatialFilterService }, { type: i2$1.MessageService }, { type: i2$1.LanguageService }]; }, { map: [{
                 type: Input
             }], type: [{
@@ -29862,7 +30169,7 @@ OgcFilterTimeComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: OgcF
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(OgcFilterTimeComponent, [{
             type: Component,
-            args: [{ selector: 'igo-ogc-filter-time', template: "<div class=\"datetime-container\">\r\n  <mat-slide-toggle \r\n    *ngIf=\"this.currentFilter.sliderOptions?.enabled\"\r\n    [(ngModel)]=\"sliderMode\"\r\n    (change)=\"modeChange($event)\">\r\n    {{'igo.geo.filter.sliderModeTitle' | translate}}\r\n  </mat-slide-toggle>\r\n\r\n  <div class=\"slider-container\" *ngIf=\"sliderMode\">\r\n    <igo-ogc-filter-time-slider\r\n      [begin]=\"beginValue\"\r\n      [max]=\"this.restrictedToStep() ? this.maxDate : this.endValue\"\r\n      [currentFilter]=\"currentFilter\" \r\n      [datasource]=\"datasource\"\r\n      (changeProperty)=\"changePropertyByPass($event)\"\r\n    >\r\n    </igo-ogc-filter-time-slider>\r\n    \r\n  </div>\r\n\r\n  <div *ngIf=\"!sliderMode\">\r\n\r\n    <div class=\"year-input-container\" *ngIf=\"calendarTypeYear\">\r\n      <!-- to emulate a year-picker, 2 input: first input to show user just year and second input hiden and bind \r\n        with the datepicker  -->\r\n      <mat-form-field  class=\"year-input\">\r\n        <mat-label>{{'igo.geo.timeFilter.startYear'| translate}}</mat-label>\r\n        <input\r\n          matInput\r\n          class=\"year-input-only-year\"\r\n          value=\"{{onlyYearBegin}}\"\r\n          (change)= \"yearOnlyInputChange($event, beginDatepicker, 'begin')\"\r\n          [disabled]= \"filterStateDisable\"\r\n          >\r\n        <mat-datepicker-toggle matSuffix [for]=\"beginDatepicker\" [disabled]=\"filterStateDisable\"></mat-datepicker-toggle>\r\n  \r\n        <mat-datepicker\r\n          panelClass=\"datepicker-year\"\r\n          #beginDatepicker\r\n          [startView]=\"calendarView()\"\r\n          [startAt]=\"beginValue\"\r\n          (yearSelected)=\"yearSelected($event, beginDatepicker, 'begin')\"\r\n          >\r\n        </mat-datepicker>\r\n\r\n        <input #beginYear\r\n          class= \"year-input-hide\"\r\n          matInput\r\n          [matDatepicker]=\"beginDatepicker\"\r\n          enabled= false\r\n          readonly= true\r\n          [value]=\"beginValue?beginValue:handleDate(datasource.options.minDate)\"\r\n          [min]=\"handleDate(datasource.options.minDate)\"\r\n          [max]=\"(endValue && (!restrictedToStep()))?endValue:handleDate(datasource.options.maxDate)\"\r\n          >\r\n      </mat-form-field>\r\n\r\n      <mat-form-field  class=\"year-input\">\r\n        <mat-label>{{'igo.geo.timeFilter.endYear'| translate}}</mat-label>\r\n        <input\r\n          matInput\r\n          class=\"year-input-only-year\"\r\n          value=\"{{onlyYearEnd}}\"\r\n          (change)= \"yearOnlyInputChange($event, endDatepicker, 'end')\"\r\n          [disabled] = \"filterStateDisable\">\r\n        <mat-datepicker-toggle matSuffix [for]=\"endDatepicker\" [disabled]=\"filterStateDisable\"></mat-datepicker-toggle>\r\n        <mat-datepicker\r\n          panelClass=\"datepicker-year\"\r\n          #endDatepicker\r\n          [startView]=\"calendarView()\"\r\n          [startAt]=\"endValue\"\r\n          (yearSelected)=\"yearSelected($event, endDatepicker, 'end')\"\r\n          >\r\n        </mat-datepicker>\r\n\r\n        <input #endYear\r\n          class= \"year-input-hide\"\r\n          matInput\r\n          [matDatepicker]=\"endDatepicker\"\r\n          enabled= false\r\n          readonly= true\r\n          [value]=\"endValue?endValue:handleDate(datasource.options.maxDate)\"\r\n          [min]=\"beginValue?beginValue:handleDate(datasource.options.minDate)\"\r\n          [max]=\"handleDate(datasource.options.maxDate)\"\r\n          >\r\n      </mat-form-field>\r\n      <button class=\"reset-button\" \r\n        mat-icon-button\r\n        color=\"primary\" \r\n        (click)=\"resetFilter()\" \r\n        [matTooltip]=\"'igo.geo.filter.resetFilters' | translate\" \r\n        [disabled]= \"filterStateDisable\">\r\n        <mat-icon svgIcon=\"{{resetIcon}}\"></mat-icon>\r\n      </button>\r\n      <mat-slide-toggle \r\n        class='toggle-filter-state' \r\n        (change)=\"toggleFilterState()\" \r\n        [matTooltip]=\"'igo.geo.filter.toggleFilterState' | translate\" \r\n        tooltip-position=\"below\" \r\n        matTooltipShowDelay=\"500\"\r\n        [checked]=\"!filterStateDisable\">\r\n      </mat-slide-toggle>\r\n\r\n    </div>\r\n\r\n    <div class=\"datetime-input-container\" *ngIf=\"calendarType()!=='year'\">\r\n      <div class=\"datetime-input\">\r\n        <mat-form-field class=\"date-input\">\r\n          <mat-datepicker-toggle matSuffix [for]=\"beginDatepicker\" [disabled]= \"filterStateDisable\"></mat-datepicker-toggle>\r\n          <input #begin\r\n            matInput\r\n            [matDatepicker]=\"beginDatepicker\"\r\n            [placeholder]=\"'igo.geo.timeFilter.startDate' | translate\"\r\n            [attr.disabled]=\"!currentFilter.active\"\r\n            (dateChange)=\"changeTemporalProperty(begin.value, 1)\"\r\n            [matDatepickerFilter]=\"dateFilter.bind(this, 'begin')\"\r\n            [value]=\"beginValue?beginValue:handleDate(datasource.options.minDate)\"\r\n            [min]=\"handleDate(datasource.options.minDate)\"\r\n            [max]=\"(endValue && (!restrictedToStep()))?endValue:handleDate(datasource.options.maxDate)\" \r\n            [disabled]= \"filterStateDisable\">\r\n          <span class=\"filler\"></span>\r\n          <mat-datepicker\r\n            #beginDatepicker\r\n            [startView]=\"calendarView()\"\r\n            [startAt]=\"beginValue\"\r\n            (yearSelected)=\"yearSelected($event, beginDatepicker, 'begin')\"\r\n            (monthSelected)=\"monthSelected($event, beginDatepicker, 'begin')\">\r\n          </mat-datepicker>\r\n        </mat-form-field>\r\n\r\n        <div class=\"time-input\">\r\n          <mat-form-field class=\"hour-input\" *ngIf=\"calendarType()==='datetime'\">\r\n            <mat-label>{{'igo.geo.timeFilter.hour' | translate}}</mat-label>\r\n            <mat-select\r\n              [formControl]=\"beginHourFormControl\"\r\n              [attr.disabled]=\"!currentFilter.active\"\r\n              (selectionChange)=\"changeTemporalProperty(begin.value, 1)\">\r\n              <mat-option *ngFor=\"let hour of beginHours\" [value]=\"hour\">{{hour}}</mat-option>\r\n            </mat-select>\r\n          </mat-form-field>\r\n          <mat-form-field class=\"minute-input\" *ngIf=\"calendarType()==='datetime'\">\r\n            <mat-label>{{'igo.geo.timeFilter.minute' | translate}}</mat-label>\r\n            <mat-select\r\n              [formControl]=\"beginMinuteFormControl\"\r\n              [attr.disabled]=\"!currentFilter.active\"\r\n              (selectionChange)=\"changeTemporalProperty(begin.value, 1)\">\r\n              <mat-option *ngFor=\"let minute of beginMinutes\" [value]=\"minute\">{{minute}}</mat-option>\r\n            </mat-select>\r\n          </mat-form-field>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"datetime-input\" *ngIf=\"!restrictedToStep()\">\r\n        <mat-form-field class=\"date-input\">\r\n          <mat-datepicker-toggle matSuffix [for]=\"endDatepicker\" [disabled]= \"filterStateDisable\"></mat-datepicker-toggle>\r\n            <input #end\r\n              matInput\r\n              [matDatepicker]=\"endDatepicker\"\r\n              [placeholder]=\"'igo.geo.timeFilter.endDate' | translate\"\r\n              [attr.disabled]=\"!currentFilter.active\"\r\n              (dateChange)=\"changeTemporalProperty(end.value, 2)\"\r\n              [matDatepickerFilter]=\"dateFilter.bind(this, 'end')\"\r\n              [value]=\"endValue?endValue:handleDate(datasource.options.maxDate)\"\r\n              [min]=\"beginValue?beginValue:handleDate(datasource.options.minDate)\"\r\n              [max]=\"handleDate(datasource.options.maxDate)\" \r\n              [disabled]= \"filterStateDisable\">\r\n            <span class=\"filler\"></span>\r\n            <mat-datepicker #endDatepicker\r\n              [startView]=\"calendarView()\"\r\n              [startAt]=\"endValue\"\r\n              (yearSelected)=\"yearSelected($event, endDatepicker, 'end')\"\r\n              (monthSelected)=\"monthSelected($event, endDatepicker, 'end')\">\r\n          </mat-datepicker>\r\n        </mat-form-field>\r\n\r\n        <div class=\"time-input\">\r\n          <mat-form-field class=\"hour-input\" *ngIf=\"calendarType()==='datetime'\" >\r\n            <mat-label>{{'igo.geo.timeFilter.hour' | translate}}</mat-label>\r\n            <mat-select\r\n              [formControl]=\"endHourFormControl\"\r\n              [attr.disabled]=\"!currentFilter.active\"\r\n              (selectionChange)=\"changeTemporalProperty(end.value, 2)\">\r\n              <mat-option *ngFor=\"let hour of endHours\" [value]=\"hour\">{{hour}}</mat-option>\r\n            </mat-select>\r\n          </mat-form-field>\r\n          <mat-form-field class=\"minute-input\" *ngIf=\"calendarType()==='datetime'\">\r\n            <mat-label>{{'igo.geo.timeFilter.minute' | translate}}</mat-label>\r\n            <mat-select\r\n              [formControl]=\"endMinuteFormControl\"\r\n              [attr.disabled]=\"!currentFilter.active\"\r\n              (selectionChange)=\"changeTemporalProperty(end.value, 2)\">\r\n              <mat-option *ngFor=\"let minute of endMinutes\" [value]=\"minute\">{{minute}}</mat-option>\r\n            </mat-select>\r\n          </mat-form-field>\r\n        </div>\r\n      </div>\r\n\r\n      <button class=\"reset-button\" \r\n        mat-icon-button color=\"primary\"\r\n        (click)=\"resetFilter()\" \r\n        [matTooltip]=\"'igo.geo.filter.resetFilters' | translate\" \r\n        [disabled]= \"filterStateDisable\">\r\n        <mat-icon svgIcon=\"{{resetIcon}}\"></mat-icon>\r\n      </button>\r\n      <mat-slide-toggle \r\n        class=\"toggle-filter-state\" \r\n        (change)=\"toggleFilterState()\" \r\n        tooltip-position=\"below\" \r\n        matTooltipShowDelay=\"500\"\r\n        [matTooltip]=\"'igo.geo.filter.toggleFilterState' | translate\" \r\n        [checked]= \"!filterStateDisable\">\r\n      </mat-slide-toggle>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: ["::ng-deep input{text-align:center!important;margin:auto 5px!important}.slider-container{text-align:center}.datetime-input{display:inline-block;width:100px;margin:10px 0 5px 10px}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){.datetime-input{width:36%;margin:0}}.date-input{width:100px;margin-right:25px}.time-input{margin-right:25px}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){.time-input{margin-right:5px}}.hour-input,.minute-input{width:35px;margin-left:7px}.year-input{width:98px;margin:10px 14px 5px 4px}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){.year-input{width:32%;margin:0 0 0 10px}}.year-input-hide{width:120px;margin-right:25px;display:none}.year-input-only-year{width:120px;margin-right:25px}.reset-button{width:25px;padding-left:8px}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){.reset-button{padding-left:8px}}.toggle-filter-state{padding-left:20px}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){.toggle-filter-state{padding-left:12px}}::ng-deep .datepicker-year ::ng-deep .mat-calendar-arrow{display:none}::ng-deep .datepicker-year ::ng-deep .mat-calendar-period-button{pointer-events:none}::ng-deep .datepicker-year ::ng-deep .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover{background-color:#0000001f;border-radius:999px}\n"] }]
+            args: [{ selector: 'igo-ogc-filter-time', template: "<div class=\"datetime-container\">\n  <mat-slide-toggle \n    *ngIf=\"this.currentFilter.sliderOptions?.enabled\"\n    [(ngModel)]=\"sliderMode\"\n    (change)=\"modeChange($event)\">\n    {{'igo.geo.filter.sliderModeTitle' | translate}}\n  </mat-slide-toggle>\n\n  <div class=\"slider-container\" *ngIf=\"sliderMode\">\n    <igo-ogc-filter-time-slider\n      [begin]=\"beginValue\"\n      [max]=\"this.restrictedToStep() ? this.maxDate : this.endValue\"\n      [currentFilter]=\"currentFilter\" \n      [datasource]=\"datasource\"\n      (changeProperty)=\"changePropertyByPass($event)\"\n    >\n    </igo-ogc-filter-time-slider>\n    \n  </div>\n\n  <div *ngIf=\"!sliderMode\">\n\n    <div class=\"year-input-container\" *ngIf=\"calendarTypeYear\">\n      <!-- to emulate a year-picker, 2 input: first input to show user just year and second input hiden and bind \n        with the datepicker  -->\n      <mat-form-field  class=\"year-input\">\n        <mat-label>{{'igo.geo.timeFilter.startYear'| translate}}</mat-label>\n        <input\n          matInput\n          class=\"year-input-only-year\"\n          value=\"{{onlyYearBegin}}\"\n          (change)= \"yearOnlyInputChange($event, beginDatepicker, 'begin')\"\n          [disabled]= \"filterStateDisable\"\n          >\n        <mat-datepicker-toggle matSuffix [for]=\"beginDatepicker\" [disabled]=\"filterStateDisable\"></mat-datepicker-toggle>\n  \n        <mat-datepicker\n          panelClass=\"datepicker-year\"\n          #beginDatepicker\n          [startView]=\"calendarView()\"\n          [startAt]=\"beginValue\"\n          (yearSelected)=\"yearSelected($event, beginDatepicker, 'begin')\"\n          >\n        </mat-datepicker>\n\n        <input #beginYear\n          class= \"year-input-hide\"\n          matInput\n          [matDatepicker]=\"beginDatepicker\"\n          enabled= false\n          readonly= true\n          [value]=\"beginValue?beginValue:handleDate(datasource.options.minDate)\"\n          [min]=\"handleDate(datasource.options.minDate)\"\n          [max]=\"(endValue && (!restrictedToStep()))?endValue:handleDate(datasource.options.maxDate)\"\n          >\n      </mat-form-field>\n\n      <mat-form-field  class=\"year-input\">\n        <mat-label>{{'igo.geo.timeFilter.endYear'| translate}}</mat-label>\n        <input\n          matInput\n          class=\"year-input-only-year\"\n          value=\"{{onlyYearEnd}}\"\n          (change)= \"yearOnlyInputChange($event, endDatepicker, 'end')\"\n          [disabled] = \"filterStateDisable\">\n        <mat-datepicker-toggle matSuffix [for]=\"endDatepicker\" [disabled]=\"filterStateDisable\"></mat-datepicker-toggle>\n        <mat-datepicker\n          panelClass=\"datepicker-year\"\n          #endDatepicker\n          [startView]=\"calendarView()\"\n          [startAt]=\"endValue\"\n          (yearSelected)=\"yearSelected($event, endDatepicker, 'end')\"\n          >\n        </mat-datepicker>\n\n        <input #endYear\n          class= \"year-input-hide\"\n          matInput\n          [matDatepicker]=\"endDatepicker\"\n          enabled= false\n          readonly= true\n          [value]=\"endValue?endValue:handleDate(datasource.options.maxDate)\"\n          [min]=\"beginValue?beginValue:handleDate(datasource.options.minDate)\"\n          [max]=\"handleDate(datasource.options.maxDate)\"\n          >\n      </mat-form-field>\n      <button class=\"reset-button\" \n        mat-icon-button\n        color=\"primary\" \n        (click)=\"resetFilter()\" \n        [matTooltip]=\"'igo.geo.filter.resetFilters' | translate\" \n        [disabled]= \"filterStateDisable\">\n        <mat-icon svgIcon=\"{{resetIcon}}\"></mat-icon>\n      </button>\n      <mat-slide-toggle \n        class='toggle-filter-state' \n        (change)=\"toggleFilterState()\" \n        [matTooltip]=\"'igo.geo.filter.toggleFilterState' | translate\" \n        tooltip-position=\"below\" \n        matTooltipShowDelay=\"500\"\n        [checked]=\"!filterStateDisable\">\n      </mat-slide-toggle>\n\n    </div>\n\n    <div class=\"datetime-input-container\" *ngIf=\"calendarType()!=='year'\">\n      <div class=\"datetime-input\">\n        <mat-form-field class=\"date-input\">\n          <mat-datepicker-toggle matSuffix [for]=\"beginDatepicker\" [disabled]= \"filterStateDisable\"></mat-datepicker-toggle>\n          <input #begin\n            matInput\n            [matDatepicker]=\"beginDatepicker\"\n            [placeholder]=\"'igo.geo.timeFilter.startDate' | translate\"\n            [attr.disabled]=\"!currentFilter.active\"\n            (dateChange)=\"changeTemporalProperty(begin.value, 1)\"\n            [matDatepickerFilter]=\"dateFilter.bind(this, 'begin')\"\n            [value]=\"beginValue?beginValue:handleDate(datasource.options.minDate)\"\n            [min]=\"handleDate(datasource.options.minDate)\"\n            [max]=\"(endValue && (!restrictedToStep()))?endValue:handleDate(datasource.options.maxDate)\" \n            [disabled]= \"filterStateDisable\">\n          <span class=\"filler\"></span>\n          <mat-datepicker\n            #beginDatepicker\n            [startView]=\"calendarView()\"\n            [startAt]=\"beginValue\"\n            (yearSelected)=\"yearSelected($event, beginDatepicker, 'begin')\"\n            (monthSelected)=\"monthSelected($event, beginDatepicker, 'begin')\">\n          </mat-datepicker>\n        </mat-form-field>\n\n        <div class=\"time-input\">\n          <mat-form-field class=\"hour-input\" *ngIf=\"calendarType()==='datetime'\">\n            <mat-label>{{'igo.geo.timeFilter.hour' | translate}}</mat-label>\n            <mat-select\n              [formControl]=\"beginHourFormControl\"\n              [attr.disabled]=\"!currentFilter.active\"\n              (selectionChange)=\"changeTemporalProperty(begin.value, 1)\">\n              <mat-option *ngFor=\"let hour of beginHours\" [value]=\"hour\">{{hour}}</mat-option>\n            </mat-select>\n          </mat-form-field>\n          <mat-form-field class=\"minute-input\" *ngIf=\"calendarType()==='datetime'\">\n            <mat-label>{{'igo.geo.timeFilter.minute' | translate}}</mat-label>\n            <mat-select\n              [formControl]=\"beginMinuteFormControl\"\n              [attr.disabled]=\"!currentFilter.active\"\n              (selectionChange)=\"changeTemporalProperty(begin.value, 1)\">\n              <mat-option *ngFor=\"let minute of beginMinutes\" [value]=\"minute\">{{minute}}</mat-option>\n            </mat-select>\n          </mat-form-field>\n        </div>\n      </div>\n\n      <div class=\"datetime-input\" *ngIf=\"!restrictedToStep()\">\n        <mat-form-field class=\"date-input\">\n          <mat-datepicker-toggle matSuffix [for]=\"endDatepicker\" [disabled]= \"filterStateDisable\"></mat-datepicker-toggle>\n            <input #end\n              matInput\n              [matDatepicker]=\"endDatepicker\"\n              [placeholder]=\"'igo.geo.timeFilter.endDate' | translate\"\n              [attr.disabled]=\"!currentFilter.active\"\n              (dateChange)=\"changeTemporalProperty(end.value, 2)\"\n              [matDatepickerFilter]=\"dateFilter.bind(this, 'end')\"\n              [value]=\"endValue?endValue:handleDate(datasource.options.maxDate)\"\n              [min]=\"beginValue?beginValue:handleDate(datasource.options.minDate)\"\n              [max]=\"handleDate(datasource.options.maxDate)\" \n              [disabled]= \"filterStateDisable\">\n            <span class=\"filler\"></span>\n            <mat-datepicker #endDatepicker\n              [startView]=\"calendarView()\"\n              [startAt]=\"endValue\"\n              (yearSelected)=\"yearSelected($event, endDatepicker, 'end')\"\n              (monthSelected)=\"monthSelected($event, endDatepicker, 'end')\">\n          </mat-datepicker>\n        </mat-form-field>\n\n        <div class=\"time-input\">\n          <mat-form-field class=\"hour-input\" *ngIf=\"calendarType()==='datetime'\" >\n            <mat-label>{{'igo.geo.timeFilter.hour' | translate}}</mat-label>\n            <mat-select\n              [formControl]=\"endHourFormControl\"\n              [attr.disabled]=\"!currentFilter.active\"\n              (selectionChange)=\"changeTemporalProperty(end.value, 2)\">\n              <mat-option *ngFor=\"let hour of endHours\" [value]=\"hour\">{{hour}}</mat-option>\n            </mat-select>\n          </mat-form-field>\n          <mat-form-field class=\"minute-input\" *ngIf=\"calendarType()==='datetime'\">\n            <mat-label>{{'igo.geo.timeFilter.minute' | translate}}</mat-label>\n            <mat-select\n              [formControl]=\"endMinuteFormControl\"\n              [attr.disabled]=\"!currentFilter.active\"\n              (selectionChange)=\"changeTemporalProperty(end.value, 2)\">\n              <mat-option *ngFor=\"let minute of endMinutes\" [value]=\"minute\">{{minute}}</mat-option>\n            </mat-select>\n          </mat-form-field>\n        </div>\n      </div>\n\n      <button class=\"reset-button\" \n        mat-icon-button color=\"primary\"\n        (click)=\"resetFilter()\" \n        [matTooltip]=\"'igo.geo.filter.resetFilters' | translate\" \n        [disabled]= \"filterStateDisable\">\n        <mat-icon svgIcon=\"{{resetIcon}}\"></mat-icon>\n      </button>\n      <mat-slide-toggle \n        class=\"toggle-filter-state\" \n        (change)=\"toggleFilterState()\" \n        tooltip-position=\"below\" \n        matTooltipShowDelay=\"500\"\n        [matTooltip]=\"'igo.geo.filter.toggleFilterState' | translate\" \n        [checked]= \"!filterStateDisable\">\n      </mat-slide-toggle>\n    </div>\n  </div>\n</div>\n", styles: ["::ng-deep input{text-align:center!important;margin:auto 5px!important}.slider-container{text-align:center}.datetime-input{display:inline-block;width:100px;margin:10px 0 5px 10px}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){.datetime-input{width:36%;margin:0}}.date-input{width:100px;margin-right:25px}.time-input{margin-right:25px}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){.time-input{margin-right:5px}}.hour-input,.minute-input{width:35px;margin-left:7px}.year-input{width:98px;margin:10px 14px 5px 4px}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){.year-input{width:32%;margin:0 0 0 10px}}.year-input-hide{width:120px;margin-right:25px;display:none}.year-input-only-year{width:120px;margin-right:25px}.reset-button{width:25px;padding-left:8px}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){.reset-button{padding-left:8px}}.toggle-filter-state{padding-left:20px}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){.toggle-filter-state{padding-left:12px}}::ng-deep .datepicker-year ::ng-deep .mat-calendar-arrow{display:none}::ng-deep .datepicker-year ::ng-deep .mat-calendar-period-button{pointer-events:none}::ng-deep .datepicker-year ::ng-deep .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover{background-color:#0000001f;border-radius:999px}\n"] }]
         }], function () { return [{ type: OGCFilterTimeService }]; }, { datasource: [{
                 type: Input
             }], currentFilter: [{
@@ -30044,7 +30351,7 @@ OgcFilterTimeSliderComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(OgcFilterTimeSliderComponent, [{
             type: Component,
-            args: [{ selector: 'igo-ogc-filter-time-slider', template: "<div class=\"slider-container\">\r\n  <mat-slider\r\n    id=\"time-slider\"\r\n    [step]=\"1\"\r\n    [min]=\"1\"\r\n    [max]=\"calculatedStep\"\r\n    [(ngModel)]=\"sliderValue\"\r\n    [displayWith]=\"sliderDisplayWith\"\r\n    (input)=\"handleSliderInput($event)\"\r\n    thumbLabel\r\n    >\r\n  </mat-slider>\r\n  <button mat-icon-button color=\"primary\" (click)=\"playFilter($event)\">\r\n    <mat-icon [svgIcon]=\"playIcon\"></mat-icon>\r\n  </button>\r\n  <button mat-icon-button color=\"primary\" (click)=\"resetFilter($event)\">\r\n    <mat-icon svgIcon=\"{{resetIcon}}\"></mat-icon>\r\n  </button>\r\n  \r\n</div>", styles: ["::ng-deep input{text-align:center!important;margin:auto 5px!important}::ng-deep .mat-slider-thumb{transform:scale(0)!important}::ng-deep .mat-slider-thumb-label{transform:rotate(45deg)!important;border-radius:50% 50% 0!important;background-color:#ffd740!important}::ng-deep .mat-slider-thumb-label-text{opacity:1!important;transform:rotate(135deg)!important}::ng-deep .mat-slider-horizontal .mat-slider-thumb-label{top:10px!important;transform:rotate(225deg)!important}::ng-deep .mat-slider-horizontal.cdk-focused .mat-slider-thumb-label{transform:rotate(225deg)!important}.datetime-container,.slider-container{text-align:center}.datetime-input{display:inline-block;margin:5px 25px}.date-input{width:120px;margin-right:25px}.time-input{display:inherit;margin-right:25px}.hour-input,.minute-input{width:40px}.minute-input{margin-left:10px}\n"] }]
+            args: [{ selector: 'igo-ogc-filter-time-slider', template: "<div class=\"slider-container\">\n  <mat-slider\n    id=\"time-slider\"\n    [step]=\"1\"\n    [min]=\"1\"\n    [max]=\"calculatedStep\"\n    [(ngModel)]=\"sliderValue\"\n    [displayWith]=\"sliderDisplayWith\"\n    (input)=\"handleSliderInput($event)\"\n    thumbLabel\n    >\n  </mat-slider>\n  <button mat-icon-button color=\"primary\" (click)=\"playFilter($event)\">\n    <mat-icon [svgIcon]=\"playIcon\"></mat-icon>\n  </button>\n  <button mat-icon-button color=\"primary\" (click)=\"resetFilter($event)\">\n    <mat-icon svgIcon=\"{{resetIcon}}\"></mat-icon>\n  </button>\n  \n</div>", styles: ["::ng-deep input{text-align:center!important;margin:auto 5px!important}::ng-deep .mat-slider-thumb{transform:scale(0)!important}::ng-deep .mat-slider-thumb-label{transform:rotate(45deg)!important;border-radius:50% 50% 0!important;background-color:#ffd740!important}::ng-deep .mat-slider-thumb-label-text{opacity:1!important;transform:rotate(135deg)!important}::ng-deep .mat-slider-horizontal .mat-slider-thumb-label{top:10px!important;transform:rotate(225deg)!important}::ng-deep .mat-slider-horizontal.cdk-focused .mat-slider-thumb-label{transform:rotate(225deg)!important}.datetime-container,.slider-container{text-align:center}.datetime-input{display:inline-block;margin:5px 25px}.date-input{width:120px;margin-right:25px}.time-input{display:inherit;margin-right:25px}.hour-input,.minute-input{width:40px}.minute-input{margin-left:10px}\n"] }]
         }], function () { return [{ type: OGCFilterTimeService }]; }, { currentFilter: [{
                 type: Input
             }], begin: [{
@@ -30275,8 +30582,8 @@ i0.ɵɵsetComponentScope(OgcFilterableFormComponent, [i1$1.NgForOf, i1$1.NgIf, i
 i0.ɵɵsetComponentScope(OgcFilterableItemComponent, [i1$1.NgClass, i1$1.NgIf, i1$1.NgStyle, i2$2.NgControlStatus, i2$2.NgModel, i2.MatIcon, i3.MatButton, i12$1.MatCheckbox, i5.MatListItem, i5.MatListAvatarCssMatStyler, i9.MatLine, i11.MatDivider, i4.MatTooltip, LayerLegendComponent, i5$1.CollapseDirective, OgcFilterableFormComponent], [i1$1.AsyncPipe, i7.TranslatePipe]);
 i0.ɵɵsetComponentScope(OgcFilterableListComponent, [i1$1.NgForOf, i1$1.NgIf, i5$1.ListItemDirective, i5$1.ListComponent, OgcFilterableItemComponent], [i7.TranslatePipe, FilterableDataSourcePipe]);
 i0.ɵɵsetComponentScope(SpatialFilterTypeComponent, [i1$1.NgForOf, i9.MatOption, i2.MatIcon, i20.MatTabGroup, i20.MatTab, i18.MatButtonToggleGroup, i18.MatButtonToggle, i13.MatFormField, i13.MatLabel, i15.MatSelect, i4.MatTooltip, SpatialFilterListComponent], [i7.TranslatePipe]);
-i0.ɵɵsetComponentScope(SpatialFilterItemComponent, [i1$1.NgForOf, i1$1.NgIf, i2$2.ɵNgNoValidate, i2$2.DefaultValueAccessor, i2$2.NumberValueAccessor, i2$2.NgControlStatus, i2$2.NgControlStatusGroup, i2$2.NgForm, i2$2.FormControlDirective, i9.MatOption, i2.MatIcon, i3.MatButton, i17.MatRadioGroup, i17.MatRadioButton, i21.MatTable, i21.MatHeaderCellDef, i21.MatHeaderRowDef, i21.MatColumnDef, i21.MatRowDef, i21.MatHeaderCell, i21.MatHeaderRow, i21.MatRow, i22.MatNestedTreeNode, i22.MatTreeNodeDef, i22.MatTreeNodeToggle, i22.MatTree, i22.MatTreeNode, i22.MatTreeNodeOutlet, i12$1.MatCheckbox, i15$1.MatSlideToggle, i13.MatFormField, i13.MatLabel, i14.MatInput, i15.MatSelect, i4.MatTooltip, i5$1.EntityTableComponent, GeometryFormFieldInputComponent], [i1$1.AsyncPipe, i7.TranslatePipe]);
-i0.ɵɵsetComponentScope(OgcFilterTimeComponent, [i1$1.NgForOf, i1$1.NgIf, i2$2.NgControlStatus, i2$2.NgModel, i2$2.FormControlDirective, i9.MatOption, i2.MatIcon, i3.MatButton, i15$1.MatSlideToggle, i13.MatFormField, i13.MatLabel, i13.MatSuffix, i14.MatInput, i15.MatSelect, i4.MatTooltip, i25.MatDatepicker, i25.MatDatepickerInput, i25.MatDatepickerToggle, OgcFilterTimeSliderComponent], [i7.TranslatePipe]);
+i0.ɵɵsetComponentScope(SpatialFilterItemComponent, [i1$1.NgForOf, i1$1.NgIf, i2$2.ɵNgNoValidate, i2$2.DefaultValueAccessor, i2$2.NumberValueAccessor, i2$2.NgControlStatus, i2$2.NgControlStatusGroup, i2$2.NgForm, i2$2.FormControlDirective, i9.MatOption, i2.MatIcon, i3.MatButton, i17.MatRadioGroup, i17.MatRadioButton, i21.MatTable, i21.MatHeaderCellDef, i21.MatHeaderRowDef, i21.MatColumnDef, i21.MatRowDef, i21.MatHeaderCell, i21.MatHeaderRow, i21.MatRow, i22.MatNestedTreeNode, i22.MatTreeNodeDef, i22.MatTreeNodeToggle, i22.MatTree, i22.MatTreeNode, i22.MatTreeNodeOutlet, i12$1.MatCheckbox, i23.MatSlideToggle, i13.MatFormField, i13.MatLabel, i14.MatInput, i15.MatSelect, i4.MatTooltip, i5$1.EntityTableComponent, GeometryFormFieldInputComponent], [i1$1.AsyncPipe, i7.TranslatePipe]);
+i0.ɵɵsetComponentScope(OgcFilterTimeComponent, [i1$1.NgForOf, i1$1.NgIf, i2$2.NgControlStatus, i2$2.NgModel, i2$2.FormControlDirective, i9.MatOption, i2.MatIcon, i3.MatButton, i23.MatSlideToggle, i13.MatFormField, i13.MatLabel, i13.MatSuffix, i14.MatInput, i15.MatSelect, i4.MatTooltip, i25.MatDatepicker, i25.MatDatepickerInput, i25.MatDatepickerToggle, OgcFilterTimeSliderComponent], [i7.TranslatePipe]);
 
 function ExportButtonComponent_button_0_Template(rf, ctx) {
     if (rf & 1) {
@@ -30335,7 +30642,7 @@ ExportButtonComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Expor
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ExportButtonComponent, [{
             type: Component,
-            args: [{ selector: 'igo-export-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\r\n  *ngIf=\"layerIsExportable()\"\r\n  mat-icon-button\r\n  tooltip-position=\"below\"\r\n  matTooltipShowDelay=\"500\"\r\n  [matTooltip]=\"'igo.geo.download.action' | translate\"\r\n  [color]=\"color\">\r\n  <!-- (click)=\"openDownload(layer)\"> -->\r\n  <mat-icon svgIcon=\"file-export\"></mat-icon>\r\n</button>\r\n\r\n" }]
+            args: [{ selector: 'igo-export-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  *ngIf=\"layerIsExportable()\"\n  mat-icon-button\n  tooltip-position=\"below\"\n  matTooltipShowDelay=\"500\"\n  [matTooltip]=\"'igo.geo.download.action' | translate\"\n  [color]=\"color\">\n  <!-- (click)=\"openDownload(layer)\"> -->\n  <mat-icon svgIcon=\"file-export\"></mat-icon>\n</button>\n\n" }]
         }], function () { return []; }, { layer: [{
                 type: Input
             }], color: [{
@@ -32341,11 +32648,11 @@ ImportExportComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Impor
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngIf", i0.ɵɵpipeBind1(13, 15, ctx.exportableLayers$).length > 0 && ctx.selectedMode === "export");
         }
-    }, dependencies: [i4.MatTooltip, i2$2.ɵNgNoValidate, i2$2.DefaultValueAccessor, i2$2.NgControlStatus, i2$2.NgControlStatusGroup, i2$2.FormGroupDirective, i2$2.FormControlName, i1$1.NgClass, i1$1.NgForOf, i1$1.NgIf, i3.MatButton, i18.MatButtonToggleGroup, i18.MatButtonToggle, i13.MatFormField, i13.MatLabel, i15.MatSelect, i15.MatSelectTrigger, i9.MatOption, i14.MatInput, i15$1.MatSlideToggle, i5$1.SpinnerComponent, i5$1.CustomHtmlComponent, i1$1.AsyncPipe, i7.TranslatePipe, i5$1.KeyValuePipe], styles: ["mat-option.igo-export-layer-mat-option[_ngcontent-%COMP%]{height:5em;line-height:1em}.import-export-toggle[_ngcontent-%COMP%]{padding:10px;text-align:center}.import-export-toggle[_ngcontent-%COMP%]   mat-button-toggle-group[_ngcontent-%COMP%]{width:100%}.import-export-toggle[_ngcontent-%COMP%]   mat-button-toggle-group[_ngcontent-%COMP%]   mat-button-toggle[_ngcontent-%COMP%]{width:50%}h4[_ngcontent-%COMP%]{padding:0 5px}.igo-form[_ngcontent-%COMP%]{padding:15px 5px}.igo-input-container[_ngcontent-%COMP%]   mat-form-field[_ngcontent-%COMP%]{width:100%}.igo-form-button-group[_ngcontent-%COMP%]{text-align:center;padding-top:10px}igo-spinner[_ngcontent-%COMP%]{position:absolute;padding-left:10px}.export-options[_ngcontent-%COMP%], .export-combine-layers[_ngcontent-%COMP%], .export-separator[_ngcontent-%COMP%]{overflow-x:hidden}.export-options[_ngcontent-%COMP%]   mat-slide-toggle[_ngcontent-%COMP%], .export-combine-layers[_ngcontent-%COMP%]   mat-slide-toggle[_ngcontent-%COMP%], .export-separator[_ngcontent-%COMP%]   mat-slide-toggle[_ngcontent-%COMP%]{width:100%;margin:10px}.export-options[_ngcontent-%COMP%]   mat-slide-toggle[_ngcontent-%COMP%]     .mat-slide-toggle-content, .export-combine-layers[_ngcontent-%COMP%]   mat-slide-toggle[_ngcontent-%COMP%]     .mat-slide-toggle-content, .export-separator[_ngcontent-%COMP%]   mat-slide-toggle[_ngcontent-%COMP%]     .mat-slide-toggle-content{width:calc(100% - 60px)}.export-select-trigger[_ngcontent-%COMP%]{opacity:.75;font-size:.75em}"] });
+    }, dependencies: [i4.MatTooltip, i2$2.ɵNgNoValidate, i2$2.DefaultValueAccessor, i2$2.NgControlStatus, i2$2.NgControlStatusGroup, i2$2.FormGroupDirective, i2$2.FormControlName, i1$1.NgClass, i1$1.NgForOf, i1$1.NgIf, i3.MatButton, i18.MatButtonToggleGroup, i18.MatButtonToggle, i13.MatFormField, i13.MatLabel, i15.MatSelect, i15.MatSelectTrigger, i9.MatOption, i14.MatInput, i23.MatSlideToggle, i5$1.SpinnerComponent, i5$1.CustomHtmlComponent, i1$1.AsyncPipe, i7.TranslatePipe, i5$1.KeyValuePipe], styles: ["mat-option.igo-export-layer-mat-option[_ngcontent-%COMP%]{height:5em;line-height:1em}.import-export-toggle[_ngcontent-%COMP%]{padding:10px;text-align:center}.import-export-toggle[_ngcontent-%COMP%]   mat-button-toggle-group[_ngcontent-%COMP%]{width:100%}.import-export-toggle[_ngcontent-%COMP%]   mat-button-toggle-group[_ngcontent-%COMP%]   mat-button-toggle[_ngcontent-%COMP%]{width:50%}h4[_ngcontent-%COMP%]{padding:0 5px}.igo-form[_ngcontent-%COMP%]{padding:15px 5px}.igo-input-container[_ngcontent-%COMP%]   mat-form-field[_ngcontent-%COMP%]{width:100%}.igo-form-button-group[_ngcontent-%COMP%]{text-align:center;padding-top:10px}igo-spinner[_ngcontent-%COMP%]{position:absolute;padding-left:10px}.export-options[_ngcontent-%COMP%], .export-combine-layers[_ngcontent-%COMP%], .export-separator[_ngcontent-%COMP%]{overflow-x:hidden}.export-options[_ngcontent-%COMP%]   mat-slide-toggle[_ngcontent-%COMP%], .export-combine-layers[_ngcontent-%COMP%]   mat-slide-toggle[_ngcontent-%COMP%], .export-separator[_ngcontent-%COMP%]   mat-slide-toggle[_ngcontent-%COMP%]{width:100%;margin:10px}.export-options[_ngcontent-%COMP%]   mat-slide-toggle[_ngcontent-%COMP%]     .mat-slide-toggle-content, .export-combine-layers[_ngcontent-%COMP%]   mat-slide-toggle[_ngcontent-%COMP%]     .mat-slide-toggle-content, .export-separator[_ngcontent-%COMP%]   mat-slide-toggle[_ngcontent-%COMP%]     .mat-slide-toggle-content{width:calc(100% - 60px)}.export-select-trigger[_ngcontent-%COMP%]{opacity:.75;font-size:.75em}"] });
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ImportExportComponent, [{
             type: Component,
-            args: [{ selector: 'igo-import-export', template: "<div class=\"import-export-toggle mat-typography\">\r\n  <mat-button-toggle-group\r\n        [value]=\"selectedMode\"\r\n        (change)=\"onImportExportChange($event)\">\r\n        <mat-button-toggle [value]=\"'import'\">\r\n          {{'igo.geo.importExportForm.importTabTitle' | translate}}\r\n        </mat-button-toggle>\r\n        <mat-button-toggle [value]=\"'export'\">\r\n          {{'igo.geo.importExportForm.exportTabTitle' | translate}}\r\n        </mat-button-toggle>\r\n  </mat-button-toggle-group>\r\n</div>\r\n\r\n<form class=\"igo-form\" [formGroup]=\"importForm\" *ngIf=\"selectedMode === 'import'\">\r\n  <div class=\"igo-input-container\">\r\n    <mat-form-field>\r\n      <mat-label>{{'igo.geo.importExportForm.importProjPlaceholder' | translate}}</mat-label>\r\n      <mat-select\r\n        [(value)]=\"inputProj\">\r\n        <mat-option\r\n          *ngFor=\"let projection of (projections$ | async)\"\r\n          [value]=\"projection\"\r\n          (click)=\"$event.stopPropagation()\">\r\n          <p mat-line *ngIf=\"projection.translateKey\">{{('igo.geo.importExportForm.projections.' + projection.translateKey) | translate: projection}}</p>\r\n          <p mat-line *ngIf=\"!projection.translateKey\">{{projection.alias}}</p>\r\n        </mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <div\r\n    tooltip-position=\"below\"\r\n    matTooltipShowDelay=\"500\"\r\n    [matTooltip]=\"importForm.invalid ? ('igo.geo.importExportForm.projections.choose' | translate) : ('igo.geo.importExportForm.importButton' | translate)\"\r\n    class=\"igo-form-button-group\">\r\n    <button\r\n      [disabled]=\"importForm.invalid || (loading$ | async)\"\r\n      mat-raised-button\r\n      type=\"button\"\r\n      (click)=\"fileInput.click()\">\r\n        {{'igo.geo.importExportForm.importButton' | translate}}\r\n    </button>\r\n    <igo-spinner [shown]=\"loading$ | async\"></igo-spinner>\r\n    <input\r\n      hidden\r\n      #fileInput\r\n      type=\"file\"\r\n      [style.display]=\"'none'\"\r\n      (click)=\"fileInput.value = null\"\r\n      (change)=\"importFiles($event.target.files)\">\r\n  </div>\r\n</form>\r\n<section class=\"mat-typography\" *ngIf=\"selectedMode === 'import'\">\r\n  <div *ngIf=\"importHtmlClarifications === ''\">\r\n    <h4>{{'igo.geo.importExportForm.importClarifications' | translate}}</h4>\r\n    <ul>\r\n      <li>{{'igo.geo.importExportForm.importSizeMax' | translate: {size: fileSizeMb} }}</li>\r\n      <li>{{'igo.geo.importExportForm.importFormatAuthorized' | translate}}</li>\r\n      <li>{{'igo.geo.importExportForm.importShpZip' | translate}}</li>\r\n    </ul>\r\n  </div>\r\n  <igo-custom-html *ngIf=\"importHtmlClarifications !== ''\" class=\"mat-typography\"\r\n    [html]=\"importHtmlClarifications\">\r\n  </igo-custom-html>\r\n</section>\r\n\r\n<section class=\"mat-typography\" *ngIf=\"(exportableLayers$ | async).length === 0 && selectedMode === 'export'\">\r\n  <h4>{{'igo.geo.importExportForm.exportNoLayersExportable' | translate}}</h4>\r\n</section>\r\n\r\n<form class=\"igo-form\" [formGroup]=\"form\" *ngIf=\"(exportableLayers$ | async).length > 0 && selectedMode === 'export'\">\r\n  <div class=\"igo-input-container\">\r\n    <mat-form-field>\r\n      <mat-label>{{'igo.geo.importExportForm.exportLayerPlaceholder' | translate}}</mat-label>\r\n      <mat-select\r\n        [(value)]=\"layers\" multiple>\r\n        <mat-select-trigger>\r\n          {{layers.length ? getLayerTitleById(layers[0]) : ''}}\r\n          <span *ngIf=\"layers.length > 1\" class=\"export-select-trigger\">\r\n            (+{{layers.length - 1}} {{(layers?.length === 2 ? 'igo.geo.importExportForm.other' : 'igo.geo.importExportForm.others') | translate }})\r\n          </span>\r\n        </mat-select-trigger>\r\n        <mat-option\r\n          *ngFor=\"let layer of (exportableLayers$ | async)\"\r\n          [ngClass]=\"{'igo-export-layer-mat-option': layerHasSelectedFeatures(layer)}\"\r\n          [value]=\"layer.id\"\r\n          (click)=\"$event.stopPropagation()\">\r\n          <p mat-line>{{layer.title}}</p>\r\n          <p mat-line>\r\n            <mat-slide-toggle *ngIf=\"layerHasSelectedFeatures(layer)\"\r\n              [labelPosition]=\"'after'\"\r\n              (click)=\"onlySelectedClick($event,layer.id)\"\r\n              (checked)=\"inLayersIdToExportSelectionOnly(layer)\"\r\n              (change)=\"onlySelected($event,layer.id)\">\r\n              <small>{{'igo.geo.importExportForm.exportSelectedFeature' | translate}}</small>\r\n            </mat-slide-toggle>\r\n          </p>\r\n        </mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <div class=\"igo-input-container\">\r\n    <mat-form-field>\r\n      <mat-label>{{'igo.geo.importExportForm.exportFormatPlaceholder' | translate}}</mat-label>\r\n      <mat-select\r\n        formControlName=\"format\">\r\n        <ng-container *ngIf=\"(formats$ | async).length !== 0\">\r\n          <mat-option *ngFor=\"let format of (formats$ | async) | keyvalue\" [value]=\"format.key\">\r\n            {{'igo.geo.export.format.' + format.value | translate}}\r\n          </mat-option>\r\n        </ng-container>\r\n        <mat-option *ngIf=\"(formats$ | async).length === 0\" disabled=\"true\">\r\n          {{'igo.geo.export.noFormat.title' | translate}}\r\n        </mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <div class=\"igo-input-container\" *ngIf=\"forceNaming && form.value.format !== 'URL'\">\r\n    <mat-form-field>\r\n        <input matInput formControlName=\"name\" placeholder=\"{{'igo.geo.importExportForm.exportFileNamePlaceholder' | translate}}\">\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <div class=\"igo-input-container\" *ngIf=\"form.value.format === 'CSVcomma' || form.value.format === 'CSVsemicolon'\">\r\n    <mat-form-field>\r\n      <mat-label>{{'igo.geo.importExportForm.encodingPlaceholder' | translate}}</mat-label>\r\n      <mat-select\r\n        formControlName=\"encoding\">\r\n        <ng-container *ngIf=\"(encodings$ | async).length !== 0\">\r\n          <mat-option *ngFor=\"let encoding of (encodings$ | async) | keyvalue\" [value]=\"encoding.key\">\r\n            {{'igo.geo.export.encoding.' + encoding.value | translate}}\r\n          </mat-option>\r\n        </ng-container>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <div class=\"export-combine-layers mat-typography\" *ngIf=\"layers.length > 1 && (form.value.format === 'CSVcomma' || form.value.format === 'CSVsemicolon')\">\r\n    <mat-slide-toggle\r\n        formControlName=\"combineLayers\"\r\n        [labelPosition]=\"'before'\">\r\n          {{'igo.geo.importExportForm.exportCombineResults' | translate}}\r\n    </mat-slide-toggle>\r\n  </div>\r\n\r\n  <div class=\"export-separator mat-typography\" *ngIf=\"layers.length > 1 && (form.value.format === 'CSVcomma' || form.value.format === 'CSVsemicolon') && form.value.combineLayers\">\r\n    <mat-slide-toggle\r\n        formControlName=\"separator\"\r\n        [labelPosition]=\"'before'\">\r\n          {{'igo.geo.importExportForm.exportSeparator' | translate}}\r\n    </mat-slide-toggle>\r\n  </div>\r\n\r\n  <div class=\"export-options mat-typography\" *ngIf=\"form.value.format !== 'URL'\">\r\n    <mat-slide-toggle\r\n        formControlName=\"featureInMapExtent\"\r\n        [labelPosition]=\"'before'\">\r\n          {{'igo.geo.importExportForm.exportFeatureInExtent' | translate}}\r\n    </mat-slide-toggle>\r\n  </div>\r\n\r\n  <div class=\"igo-form-button-group\">\r\n    <button\r\n      mat-raised-button\r\n      type=\"button\"\r\n      [disabled]=\"!form.valid || (loading$ | async)\"\r\n      (click)=\"handleExportFormSubmit(form.value)\">\r\n      {{form.value.format !== 'URL'  ? ('igo.geo.importExportForm.exportButton' | translate): (form.value.layers.length > 1  ? ('igo.geo.importExportForm.exportButtonLinks' | translate): ('igo.geo.importExportForm.exportButtonLink' | translate))}}\r\n    </button>\r\n    <igo-spinner [shown]=\"loading$ | async\"></igo-spinner>\r\n  </div>\r\n\r\n  <igo-custom-html *ngIf=\"exportHtmlClarifications !== ''\" class=\"mat-typography\"\r\n    [html]=\"exportHtmlClarifications\">\r\n  </igo-custom-html>\r\n\r\n</form>\r\n", styles: ["mat-option.igo-export-layer-mat-option{height:5em;line-height:1em}.import-export-toggle{padding:10px;text-align:center}.import-export-toggle mat-button-toggle-group{width:100%}.import-export-toggle mat-button-toggle-group mat-button-toggle{width:50%}h4{padding:0 5px}.igo-form{padding:15px 5px}.igo-input-container mat-form-field{width:100%}.igo-form-button-group{text-align:center;padding-top:10px}igo-spinner{position:absolute;padding-left:10px}.export-options,.export-combine-layers,.export-separator{overflow-x:hidden}.export-options mat-slide-toggle,.export-combine-layers mat-slide-toggle,.export-separator mat-slide-toggle{width:100%;margin:10px}.export-options mat-slide-toggle ::ng-deep .mat-slide-toggle-content,.export-combine-layers mat-slide-toggle ::ng-deep .mat-slide-toggle-content,.export-separator mat-slide-toggle ::ng-deep .mat-slide-toggle-content{width:calc(100% - 60px)}.export-select-trigger{opacity:.75;font-size:.75em}\n"] }]
+            args: [{ selector: 'igo-import-export', template: "<div class=\"import-export-toggle mat-typography\">\n  <mat-button-toggle-group\n        [value]=\"selectedMode\"\n        (change)=\"onImportExportChange($event)\">\n        <mat-button-toggle [value]=\"'import'\">\n          {{'igo.geo.importExportForm.importTabTitle' | translate}}\n        </mat-button-toggle>\n        <mat-button-toggle [value]=\"'export'\">\n          {{'igo.geo.importExportForm.exportTabTitle' | translate}}\n        </mat-button-toggle>\n  </mat-button-toggle-group>\n</div>\n\n<form class=\"igo-form\" [formGroup]=\"importForm\" *ngIf=\"selectedMode === 'import'\">\n  <div class=\"igo-input-container\">\n    <mat-form-field>\n      <mat-label>{{'igo.geo.importExportForm.importProjPlaceholder' | translate}}</mat-label>\n      <mat-select\n        [(value)]=\"inputProj\">\n        <mat-option\n          *ngFor=\"let projection of (projections$ | async)\"\n          [value]=\"projection\"\n          (click)=\"$event.stopPropagation()\">\n          <p mat-line *ngIf=\"projection.translateKey\">{{('igo.geo.importExportForm.projections.' + projection.translateKey) | translate: projection}}</p>\n          <p mat-line *ngIf=\"!projection.translateKey\">{{projection.alias}}</p>\n        </mat-option>\n      </mat-select>\n    </mat-form-field>\n  </div>\n\n  <div\n    tooltip-position=\"below\"\n    matTooltipShowDelay=\"500\"\n    [matTooltip]=\"importForm.invalid ? ('igo.geo.importExportForm.projections.choose' | translate) : ('igo.geo.importExportForm.importButton' | translate)\"\n    class=\"igo-form-button-group\">\n    <button\n      [disabled]=\"importForm.invalid || (loading$ | async)\"\n      mat-raised-button\n      type=\"button\"\n      (click)=\"fileInput.click()\">\n        {{'igo.geo.importExportForm.importButton' | translate}}\n    </button>\n    <igo-spinner [shown]=\"loading$ | async\"></igo-spinner>\n    <input\n      hidden\n      #fileInput\n      type=\"file\"\n      [style.display]=\"'none'\"\n      (click)=\"fileInput.value = null\"\n      (change)=\"importFiles($event.target.files)\">\n  </div>\n</form>\n<section class=\"mat-typography\" *ngIf=\"selectedMode === 'import'\">\n  <div *ngIf=\"importHtmlClarifications === ''\">\n    <h4>{{'igo.geo.importExportForm.importClarifications' | translate}}</h4>\n    <ul>\n      <li>{{'igo.geo.importExportForm.importSizeMax' | translate: {size: fileSizeMb} }}</li>\n      <li>{{'igo.geo.importExportForm.importFormatAuthorized' | translate}}</li>\n      <li>{{'igo.geo.importExportForm.importShpZip' | translate}}</li>\n    </ul>\n  </div>\n  <igo-custom-html *ngIf=\"importHtmlClarifications !== ''\" class=\"mat-typography\"\n    [html]=\"importHtmlClarifications\">\n  </igo-custom-html>\n</section>\n\n<section class=\"mat-typography\" *ngIf=\"(exportableLayers$ | async).length === 0 && selectedMode === 'export'\">\n  <h4>{{'igo.geo.importExportForm.exportNoLayersExportable' | translate}}</h4>\n</section>\n\n<form class=\"igo-form\" [formGroup]=\"form\" *ngIf=\"(exportableLayers$ | async).length > 0 && selectedMode === 'export'\">\n  <div class=\"igo-input-container\">\n    <mat-form-field>\n      <mat-label>{{'igo.geo.importExportForm.exportLayerPlaceholder' | translate}}</mat-label>\n      <mat-select\n        [(value)]=\"layers\" multiple>\n        <mat-select-trigger>\n          {{layers.length ? getLayerTitleById(layers[0]) : ''}}\n          <span *ngIf=\"layers.length > 1\" class=\"export-select-trigger\">\n            (+{{layers.length - 1}} {{(layers?.length === 2 ? 'igo.geo.importExportForm.other' : 'igo.geo.importExportForm.others') | translate }})\n          </span>\n        </mat-select-trigger>\n        <mat-option\n          *ngFor=\"let layer of (exportableLayers$ | async)\"\n          [ngClass]=\"{'igo-export-layer-mat-option': layerHasSelectedFeatures(layer)}\"\n          [value]=\"layer.id\"\n          (click)=\"$event.stopPropagation()\">\n          <p mat-line>{{layer.title}}</p>\n          <p mat-line>\n            <mat-slide-toggle *ngIf=\"layerHasSelectedFeatures(layer)\"\n              [labelPosition]=\"'after'\"\n              (click)=\"onlySelectedClick($event,layer.id)\"\n              (checked)=\"inLayersIdToExportSelectionOnly(layer)\"\n              (change)=\"onlySelected($event,layer.id)\">\n              <small>{{'igo.geo.importExportForm.exportSelectedFeature' | translate}}</small>\n            </mat-slide-toggle>\n          </p>\n        </mat-option>\n      </mat-select>\n    </mat-form-field>\n  </div>\n\n  <div class=\"igo-input-container\">\n    <mat-form-field>\n      <mat-label>{{'igo.geo.importExportForm.exportFormatPlaceholder' | translate}}</mat-label>\n      <mat-select\n        formControlName=\"format\">\n        <ng-container *ngIf=\"(formats$ | async).length !== 0\">\n          <mat-option *ngFor=\"let format of (formats$ | async) | keyvalue\" [value]=\"format.key\">\n            {{'igo.geo.export.format.' + format.value | translate}}\n          </mat-option>\n        </ng-container>\n        <mat-option *ngIf=\"(formats$ | async).length === 0\" disabled=\"true\">\n          {{'igo.geo.export.noFormat.title' | translate}}\n        </mat-option>\n      </mat-select>\n    </mat-form-field>\n  </div>\n\n  <div class=\"igo-input-container\" *ngIf=\"forceNaming && form.value.format !== 'URL'\">\n    <mat-form-field>\n        <input matInput formControlName=\"name\" placeholder=\"{{'igo.geo.importExportForm.exportFileNamePlaceholder' | translate}}\">\n    </mat-form-field>\n  </div>\n\n  <div class=\"igo-input-container\" *ngIf=\"form.value.format === 'CSVcomma' || form.value.format === 'CSVsemicolon'\">\n    <mat-form-field>\n      <mat-label>{{'igo.geo.importExportForm.encodingPlaceholder' | translate}}</mat-label>\n      <mat-select\n        formControlName=\"encoding\">\n        <ng-container *ngIf=\"(encodings$ | async).length !== 0\">\n          <mat-option *ngFor=\"let encoding of (encodings$ | async) | keyvalue\" [value]=\"encoding.key\">\n            {{'igo.geo.export.encoding.' + encoding.value | translate}}\n          </mat-option>\n        </ng-container>\n      </mat-select>\n    </mat-form-field>\n  </div>\n\n  <div class=\"export-combine-layers mat-typography\" *ngIf=\"layers.length > 1 && (form.value.format === 'CSVcomma' || form.value.format === 'CSVsemicolon')\">\n    <mat-slide-toggle\n        formControlName=\"combineLayers\"\n        [labelPosition]=\"'before'\">\n          {{'igo.geo.importExportForm.exportCombineResults' | translate}}\n    </mat-slide-toggle>\n  </div>\n\n  <div class=\"export-separator mat-typography\" *ngIf=\"layers.length > 1 && (form.value.format === 'CSVcomma' || form.value.format === 'CSVsemicolon') && form.value.combineLayers\">\n    <mat-slide-toggle\n        formControlName=\"separator\"\n        [labelPosition]=\"'before'\">\n          {{'igo.geo.importExportForm.exportSeparator' | translate}}\n    </mat-slide-toggle>\n  </div>\n\n  <div class=\"export-options mat-typography\" *ngIf=\"form.value.format !== 'URL'\">\n    <mat-slide-toggle\n        formControlName=\"featureInMapExtent\"\n        [labelPosition]=\"'before'\">\n          {{'igo.geo.importExportForm.exportFeatureInExtent' | translate}}\n    </mat-slide-toggle>\n  </div>\n\n  <div class=\"igo-form-button-group\">\n    <button\n      mat-raised-button\n      type=\"button\"\n      [disabled]=\"!form.valid || (loading$ | async)\"\n      (click)=\"handleExportFormSubmit(form.value)\">\n      {{form.value.format !== 'URL'  ? ('igo.geo.importExportForm.exportButton' | translate): (form.value.layers.length > 1  ? ('igo.geo.importExportForm.exportButtonLinks' | translate): ('igo.geo.importExportForm.exportButtonLink' | translate))}}\n    </button>\n    <igo-spinner [shown]=\"loading$ | async\"></igo-spinner>\n  </div>\n\n  <igo-custom-html *ngIf=\"exportHtmlClarifications !== ''\" class=\"mat-typography\"\n    [html]=\"exportHtmlClarifications\">\n  </igo-custom-html>\n\n</form>\n", styles: ["mat-option.igo-export-layer-mat-option{height:5em;line-height:1em}.import-export-toggle{padding:10px;text-align:center}.import-export-toggle mat-button-toggle-group{width:100%}.import-export-toggle mat-button-toggle-group mat-button-toggle{width:50%}h4{padding:0 5px}.igo-form{padding:15px 5px}.igo-input-container mat-form-field{width:100%}.igo-form-button-group{text-align:center;padding-top:10px}igo-spinner{position:absolute;padding-left:10px}.export-options,.export-combine-layers,.export-separator{overflow-x:hidden}.export-options mat-slide-toggle,.export-combine-layers mat-slide-toggle,.export-separator mat-slide-toggle{width:100%;margin:10px}.export-options mat-slide-toggle ::ng-deep .mat-slide-toggle-content,.export-combine-layers mat-slide-toggle ::ng-deep .mat-slide-toggle-content,.export-separator mat-slide-toggle ::ng-deep .mat-slide-toggle-content{width:calc(100% - 60px)}.export-select-trigger{opacity:.75;font-size:.75em}\n"] }]
         }], function () { return [{ type: ImportService }, { type: ExportService }, { type: i2$1.LanguageService }, { type: i2$1.MessageService }, { type: StyleListService }, { type: StyleService }, { type: i2$2.UntypedFormBuilder }, { type: i2$1.ConfigService }, { type: i0.ChangeDetectorRef }, { type: i2$1.StorageService }, { type: DownloadService }]; }, { selectFirstProj: [{
                 type: Input
             }], map: [{
@@ -32836,7 +33143,7 @@ MeasurerItemComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Measu
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MeasurerItemComponent, [{
             type: Component,
-            args: [{ selector: 'igo-measurer-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-form-field\r\n  class=\"measure-field\"\r\n  appearance=\"outline\"\r\n  floatLabel=\"always\">\r\n  <mat-label>{{placeholder}}</mat-label>\r\n  <input\r\n    matInput\r\n    [readonly]=\"true\"\r\n    [value]=\"((measure$ | async) || 0) | measureFormat: measureUnit\">\r\n</mat-form-field>\r\n<mat-form-field class=\"unit-field\">\r\n  <mat-select\r\n    [value]=\"measureUnit\"\r\n    [disabled]=\"auto\"\r\n    (selectionChange)=\"onMeasureUnitChange($event.value)\">\r\n    <mat-option *ngFor=\"let measureUnit of measureUnits\" [value]=\"measureUnit\">\r\n      {{('igo.geo.measure.' + measureUnit) | translate}}\r\n    </mat-option>\r\n  </mat-select>\r\n</mat-form-field>\r\n", styles: [":host{display:flex;width:100%;padding:5px 10px}.measure-field{pointer-events:none;display:flex;flex-flow:column nowrap;width:100%}.unit-field{width:50px;margin-left:10px;margin-top:10px}\n"] }]
+            args: [{ selector: 'igo-measurer-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-form-field\n  class=\"measure-field\"\n  appearance=\"outline\"\n  floatLabel=\"always\">\n  <mat-label>{{placeholder}}</mat-label>\n  <input\n    matInput\n    [readonly]=\"true\"\n    [value]=\"((measure$ | async) || 0) | measureFormat: measureUnit\">\n</mat-form-field>\n<mat-form-field class=\"unit-field\">\n  <mat-select\n    [value]=\"measureUnit\"\n    [disabled]=\"auto\"\n    (selectionChange)=\"onMeasureUnitChange($event.value)\">\n    <mat-option *ngFor=\"let measureUnit of measureUnits\" [value]=\"measureUnit\">\n      {{('igo.geo.measure.' + measureUnit) | translate}}\n    </mat-option>\n  </mat-select>\n</mat-form-field>\n", styles: [":host{display:flex;width:100%;padding:5px 10px}.measure-field{pointer-events:none;display:flex;flex-flow:column nowrap;width:100%}.unit-field{width:50px;margin-left:10px;margin-top:10px}\n"] }]
         }], function () { return []; }, { measureType: [{
                 type: Input
             }], measureUnit: [{
@@ -32920,7 +33227,7 @@ IgoMeasurerModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [Common
             IgoEntityTableModule], exports: [MeasureFormatPipe,
             MeasurerComponent] });
 })();
-i0.ɵɵsetComponentScope(MeasurerComponent, [i1$1.NgIf, i3.MatButton, i18.MatButtonToggleGroup, i18.MatButtonToggle, i2.MatIcon, i4.MatTooltip, i15$1.MatSlideToggle, i11.MatDivider, i5$1.EntityTableComponent, MeasurerItemComponent], [i1$1.AsyncPipe, i7.TranslatePipe]);
+i0.ɵɵsetComponentScope(MeasurerComponent, [i1$1.NgIf, i3.MatButton, i18.MatButtonToggleGroup, i18.MatButtonToggle, i2.MatIcon, i4.MatTooltip, i23.MatSlideToggle, i11.MatDivider, i5$1.EntityTableComponent, MeasurerItemComponent], [i1$1.AsyncPipe, i7.TranslatePipe]);
 i0.ɵɵsetComponentScope(MeasurerDialogComponent, [i1$1.NgIf], [i7.TranslatePipe, MeasureFormatPipe]);
 
 class IgoMeasureModule {
@@ -34241,11 +34548,11 @@ PrintFormComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrintFor
             i0.ɵɵadvance(2);
             i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(64, 70, "igo.geo.printForm.saveBtn"), " ");
         }
-    }, dependencies: [i1$1.NgForOf, i2$2.ɵNgNoValidate, i2$2.DefaultValueAccessor, i2$2.NgControlStatus, i2$2.NgControlStatusGroup, i2$2.FormGroupDirective, i2$2.FormControlName, i3.MatButton, i13.MatFormField, i15.MatSelect, i9.MatOption, i14.MatInput, i15$1.MatSlideToggle, i1$1.AsyncPipe, i7.TranslatePipe, i5$1.KeyValuePipe], styles: ["mat-form-field[_ngcontent-%COMP%]{width:100%}.print-slide-toggle-container[_ngcontent-%COMP%]{overflow-x:hidden}.print-slide-toggle-container[_ngcontent-%COMP%]   mat-slide-toggle[_ngcontent-%COMP%]{width:100%;margin:10px}.print-slide-toggle-container[_ngcontent-%COMP%]   mat-slide-toggle[_ngcontent-%COMP%]     .mat-slide-toggle-content{width:calc(100% - 60px)}.print-option[_ngcontent-%COMP%]{display:block;margin-right:10px;margin-bottom:15px}.print-button-top-padding[_ngcontent-%COMP%]{padding-top:25px}.igo-form[_ngcontent-%COMP%]{padding:10px 5px 5px}.igo-form-button-group[_ngcontent-%COMP%]{text-align:center}"] });
+    }, dependencies: [i1$1.NgForOf, i2$2.ɵNgNoValidate, i2$2.DefaultValueAccessor, i2$2.NgControlStatus, i2$2.NgControlStatusGroup, i2$2.FormGroupDirective, i2$2.FormControlName, i3.MatButton, i13.MatFormField, i15.MatSelect, i9.MatOption, i14.MatInput, i23.MatSlideToggle, i1$1.AsyncPipe, i7.TranslatePipe, i5$1.KeyValuePipe], styles: ["mat-form-field[_ngcontent-%COMP%]{width:100%}.print-slide-toggle-container[_ngcontent-%COMP%]{overflow-x:hidden}.print-slide-toggle-container[_ngcontent-%COMP%]   mat-slide-toggle[_ngcontent-%COMP%]{width:100%;margin:10px}.print-slide-toggle-container[_ngcontent-%COMP%]   mat-slide-toggle[_ngcontent-%COMP%]     .mat-slide-toggle-content{width:calc(100% - 60px)}.print-option[_ngcontent-%COMP%]{display:block;margin-right:10px;margin-bottom:15px}.print-button-top-padding[_ngcontent-%COMP%]{padding-top:25px}.igo-form[_ngcontent-%COMP%]{padding:10px 5px 5px}.igo-form-button-group[_ngcontent-%COMP%]{text-align:center}"] });
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrintFormComponent, [{
             type: Component,
-            args: [{ selector: 'igo-print-form', template: "<form class=\"igo-form\" [formGroup]=\"form\">\r\n  <div class=\"igo-input-container\">\r\n    <mat-form-field>\r\n      <input\r\n        matInput\r\n        formControlName=\"title\"\r\n        placeholder=\"{{'igo.geo.printForm.title' | translate}}\">\r\n    </mat-form-field>\r\n  </div>\r\n  <div class=\"igo-input-container\">\r\n    <mat-form-field>\r\n      <input\r\n        matInput\r\n        formControlName=\"subtitle\"\r\n        placeholder=\"{{'igo.geo.printForm.subtitle' | translate}}\">\r\n    </mat-form-field>\r\n  </div>\r\n  <div class=\"igo-input-container\">\r\n    <mat-form-field>\r\n      <input\r\n        matInput\r\n        formControlName=\"comment\"\r\n        placeholder=\"{{'igo.geo.printForm.comment' | translate}}\">\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <div class=\"igo-input-container\">\r\n    <div class=\"print-slide-toggle-container mat-typography\">\r\n      <mat-slide-toggle\r\n        class=\"print-option\"\r\n        formControlName=\"showProjection\"\r\n        [labelPosition]=\"'before'\">\r\n        {{'igo.geo.printForm.showProjection' | translate}}\r\n      </mat-slide-toggle>\r\n      <mat-slide-toggle\r\n        class=\"print-option\"\r\n        formControlName=\"showScale\"\r\n        [labelPosition]=\"'before'\">\r\n        {{'igo.geo.printForm.showScale' | translate}}\r\n      </mat-slide-toggle>\r\n      <mat-slide-toggle\r\n        class=\"print-option\"\r\n        formControlName=\"doZipFile\"\r\n        [labelPosition]=\"'before'\"\r\n        [style.display]=\"isPrintService ? 'none' : ''\">\r\n        {{'igo.geo.printForm.doZipFile' | translate}}\r\n      </mat-slide-toggle>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"igo-input-container\">\r\n    <mat-form-field>\r\n      <mat-select\r\n        formControlName=\"legendPosition\"\r\n        placeholder=\"{{'igo.geo.printForm.legendPosition' | translate}}\">\r\n        <mat-option *ngFor=\"let legendPosition of legendPositions | keyvalue \" [value]=\"legendPosition.key\">\r\n            {{'igo.geo.printForm.legendPositions.' + legendPosition.value | translate}}\r\n        </mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <div class=\"igo-input-container\">\r\n    <mat-form-field>\r\n      <mat-select (selectionChange)=\"toggleImageSaveProp()\"\r\n        formControlName=\"outputFormat\"\r\n        placeholder=\"{{'igo.geo.printForm.outputFormat' | translate}}\">\r\n        <mat-option *ngFor=\"let outputFormat of outputFormats | keyvalue \" [value]=\"outputFormat.key\">\r\n            {{outputFormat.value}}\r\n        </mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <div class=\"igo-input-container\" [style.display]=\"isPrintService ? 'block' : 'none'\">\r\n    <mat-form-field>\r\n      <mat-select\r\n        formControlName=\"paperFormat\"\r\n        placeholder=\"{{'igo.geo.printForm.paperFormat' | translate}}\">\r\n        <mat-option *ngFor=\"let paperFormat of paperFormats | keyvalue \" [value]=\"paperFormat.key\">\r\n          {{('igo.geo.printForm.paperFormats.' + paperFormat.value) | translate}}\r\n        </mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <div class=\"igo-input-container\" [style.display]=\"isPrintService ? 'none' : 'block'\">\r\n    <mat-form-field>\r\n      <mat-select\r\n        formControlName=\"imageFormat\"\r\n        placeholder=\"{{'igo.geo.printForm.imageFormat' | translate}}\">\r\n        <mat-option *ngFor=\"let imageFormat of imageFormats | keyvalue \" [value]=\"imageFormat.key\">\r\n          {{imageFormat.value}}\r\n        </mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <div class=\"igo-input-container\" style=\"display: none;\">\r\n    <mat-form-field>\r\n      <mat-select\r\n        formControlName=\"resolution\"\r\n        placeholder=\"{{'igo.geo.printForm.resolution' | translate}}\">\r\n        <mat-option *ngFor=\"let resolution of resolutions | keyvalue \" [value]=\"resolution.key\">\r\n          {{resolution.value + ' PPI'}}\r\n        </mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <div class=\"igo-input-container\" [style.display]=\"isPrintService ? 'block' : 'none'\">\r\n    <mat-form-field>\r\n      <mat-select\r\n        formControlName=\"orientation\"\r\n        placeholder=\"{{'igo.geo.printForm.orientation' | translate}}\">\r\n        <mat-option *ngFor=\"let orientation of orientations | keyvalue \" [value]=\"orientation.key\">\r\n          {{('igo.geo.printForm.' + orientation.value) | translate}}\r\n        </mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <div class=\"igo-form-button-group print-button-top-padding\">\r\n    <button\r\n      mat-raised-button\r\n      type=\"button\"\r\n      [disabled]=\"!form.valid || (disabled$ | async)\"\r\n      (click)=\"handleFormSubmit(form.value, form.valid)\">\r\n      {{'igo.geo.printForm.saveBtn' | translate}}\r\n    </button>\r\n  </div>\r\n\r\n</form>\r\n", styles: ["mat-form-field{width:100%}.print-slide-toggle-container{overflow-x:hidden}.print-slide-toggle-container mat-slide-toggle{width:100%;margin:10px}.print-slide-toggle-container mat-slide-toggle ::ng-deep .mat-slide-toggle-content{width:calc(100% - 60px)}.print-option{display:block;margin-right:10px;margin-bottom:15px}.print-button-top-padding{padding-top:25px}.igo-form{padding:10px 5px 5px}.igo-form-button-group{text-align:center}\n"] }]
+            args: [{ selector: 'igo-print-form', template: "<form class=\"igo-form\" [formGroup]=\"form\">\n  <div class=\"igo-input-container\">\n    <mat-form-field>\n      <input\n        matInput\n        formControlName=\"title\"\n        placeholder=\"{{'igo.geo.printForm.title' | translate}}\">\n    </mat-form-field>\n  </div>\n  <div class=\"igo-input-container\">\n    <mat-form-field>\n      <input\n        matInput\n        formControlName=\"subtitle\"\n        placeholder=\"{{'igo.geo.printForm.subtitle' | translate}}\">\n    </mat-form-field>\n  </div>\n  <div class=\"igo-input-container\">\n    <mat-form-field>\n      <input\n        matInput\n        formControlName=\"comment\"\n        placeholder=\"{{'igo.geo.printForm.comment' | translate}}\">\n    </mat-form-field>\n  </div>\n\n  <div class=\"igo-input-container\">\n    <div class=\"print-slide-toggle-container mat-typography\">\n      <mat-slide-toggle\n        class=\"print-option\"\n        formControlName=\"showProjection\"\n        [labelPosition]=\"'before'\">\n        {{'igo.geo.printForm.showProjection' | translate}}\n      </mat-slide-toggle>\n      <mat-slide-toggle\n        class=\"print-option\"\n        formControlName=\"showScale\"\n        [labelPosition]=\"'before'\">\n        {{'igo.geo.printForm.showScale' | translate}}\n      </mat-slide-toggle>\n      <mat-slide-toggle\n        class=\"print-option\"\n        formControlName=\"doZipFile\"\n        [labelPosition]=\"'before'\"\n        [style.display]=\"isPrintService ? 'none' : ''\">\n        {{'igo.geo.printForm.doZipFile' | translate}}\n      </mat-slide-toggle>\n    </div>\n  </div>\n\n  <div class=\"igo-input-container\">\n    <mat-form-field>\n      <mat-select\n        formControlName=\"legendPosition\"\n        placeholder=\"{{'igo.geo.printForm.legendPosition' | translate}}\">\n        <mat-option *ngFor=\"let legendPosition of legendPositions | keyvalue \" [value]=\"legendPosition.key\">\n            {{'igo.geo.printForm.legendPositions.' + legendPosition.value | translate}}\n        </mat-option>\n      </mat-select>\n    </mat-form-field>\n  </div>\n\n  <div class=\"igo-input-container\">\n    <mat-form-field>\n      <mat-select (selectionChange)=\"toggleImageSaveProp()\"\n        formControlName=\"outputFormat\"\n        placeholder=\"{{'igo.geo.printForm.outputFormat' | translate}}\">\n        <mat-option *ngFor=\"let outputFormat of outputFormats | keyvalue \" [value]=\"outputFormat.key\">\n            {{outputFormat.value}}\n        </mat-option>\n      </mat-select>\n    </mat-form-field>\n  </div>\n\n  <div class=\"igo-input-container\" [style.display]=\"isPrintService ? 'block' : 'none'\">\n    <mat-form-field>\n      <mat-select\n        formControlName=\"paperFormat\"\n        placeholder=\"{{'igo.geo.printForm.paperFormat' | translate}}\">\n        <mat-option *ngFor=\"let paperFormat of paperFormats | keyvalue \" [value]=\"paperFormat.key\">\n          {{('igo.geo.printForm.paperFormats.' + paperFormat.value) | translate}}\n        </mat-option>\n      </mat-select>\n    </mat-form-field>\n  </div>\n\n  <div class=\"igo-input-container\" [style.display]=\"isPrintService ? 'none' : 'block'\">\n    <mat-form-field>\n      <mat-select\n        formControlName=\"imageFormat\"\n        placeholder=\"{{'igo.geo.printForm.imageFormat' | translate}}\">\n        <mat-option *ngFor=\"let imageFormat of imageFormats | keyvalue \" [value]=\"imageFormat.key\">\n          {{imageFormat.value}}\n        </mat-option>\n      </mat-select>\n    </mat-form-field>\n  </div>\n\n  <div class=\"igo-input-container\" style=\"display: none;\">\n    <mat-form-field>\n      <mat-select\n        formControlName=\"resolution\"\n        placeholder=\"{{'igo.geo.printForm.resolution' | translate}}\">\n        <mat-option *ngFor=\"let resolution of resolutions | keyvalue \" [value]=\"resolution.key\">\n          {{resolution.value + ' PPI'}}\n        </mat-option>\n      </mat-select>\n    </mat-form-field>\n  </div>\n\n  <div class=\"igo-input-container\" [style.display]=\"isPrintService ? 'block' : 'none'\">\n    <mat-form-field>\n      <mat-select\n        formControlName=\"orientation\"\n        placeholder=\"{{'igo.geo.printForm.orientation' | translate}}\">\n        <mat-option *ngFor=\"let orientation of orientations | keyvalue \" [value]=\"orientation.key\">\n          {{('igo.geo.printForm.' + orientation.value) | translate}}\n        </mat-option>\n      </mat-select>\n    </mat-form-field>\n  </div>\n\n  <div class=\"igo-form-button-group print-button-top-padding\">\n    <button\n      mat-raised-button\n      type=\"button\"\n      [disabled]=\"!form.valid || (disabled$ | async)\"\n      (click)=\"handleFormSubmit(form.value, form.valid)\">\n      {{'igo.geo.printForm.saveBtn' | translate}}\n    </button>\n  </div>\n\n</form>\n", styles: ["mat-form-field{width:100%}.print-slide-toggle-container{overflow-x:hidden}.print-slide-toggle-container mat-slide-toggle{width:100%;margin:10px}.print-slide-toggle-container mat-slide-toggle ::ng-deep .mat-slide-toggle-content{width:calc(100% - 60px)}.print-option{display:block;margin-right:10px;margin-bottom:15px}.print-button-top-padding{padding-top:25px}.igo-form{padding:10px 5px 5px}.igo-form-button-group{text-align:center}\n"] }]
         }], function () { return [{ type: i2$2.UntypedFormBuilder }]; }, { disabled$: [{
                 type: Input
             }], imageFormat: [{
@@ -34383,7 +34690,7 @@ PrintComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrintCompone
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrintComponent, [{
             type: Component,
-            args: [{ selector: 'igo-print', template: "<igo-print-form\r\n  [outputFormat]=\"outputFormat\"\r\n  [paperFormat]=\"paperFormat\"\r\n  [orientation]=\"orientation\"\r\n  [imageFormat]=\"imageFormat\"\r\n  [resolution]=\"resolution\"\r\n  [legendPosition]=\"legendPosition\"\r\n  [disabled$]=\"disabled$\"\r\n  (submit)=\"handleFormSubmit($event)\">\r\n</igo-print-form>\r\n" }]
+            args: [{ selector: 'igo-print', template: "<igo-print-form\n  [outputFormat]=\"outputFormat\"\n  [paperFormat]=\"paperFormat\"\n  [orientation]=\"orientation\"\n  [imageFormat]=\"imageFormat\"\n  [resolution]=\"resolution\"\n  [legendPosition]=\"legendPosition\"\n  [disabled$]=\"disabled$\"\n  (submit)=\"handleFormSubmit($event)\">\n</igo-print-form>\n" }]
         }], function () { return [{ type: PrintService }]; }, { map: [{
                 type: Input
             }], outputFormat: [{
@@ -35318,7 +35625,7 @@ DirectionsInputsComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: D
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DirectionsInputsComponent, [{
             type: Component,
-            args: [{ selector: 'igo-directions-inputs', template: "<div cdkDropList class=\"stops-list\" (cdkDropListDropped)=\"drop($event)\">\r\n  <div touchleave  \r\n  (touchenter)=\"onStopEnter(stop)\"\r\n  (touchleave)=\"onStopLeave()\"\r\n  (mouseover)=\"onStopEnter(stop)\"\r\n  (mouseleave)=\"onStopLeave()\"\r\n  (cdkDragStarted)=\"stopIsDragged=true\"\r\n  (cdkDragEnded)=\"stopIsDragged=false\"\r\n  cdkDragLockAxis=\"y\" class=\"stop-box mat-typography\" *ngFor=\"let stop of stopsStore.view.all$() | async; let i = index;\" cdkDrag>\r\n    <div [ngClass]=\"getNgClass(stop)\">\r\n      <mat-form-field>\r\n        <input id=\"{{stop.id}}\" type=\"text\"\r\n            [placeholder]=\"getPlaceholder(stop)\"\r\n            matTooltipShowDelay=\"500\"\r\n            [matTooltip]=\"stop.text\"\r\n            aria-label=\"Number\"\r\n            matInput\r\n            (focus)=\"onInputFocus(stop)\"\r\n            [(ngModel)]=\"stop.text\"\r\n            (keyup)=\"setStopText($event,stop)\"\r\n            (keydown.enter)=\"$event.preventDefault()\"\r\n            [matAutocomplete]=\"auto\">\r\n        <button \r\n            mat-button \r\n            *ngIf=\"(stop.text || stop.coordinates) && stopWithHover && stop.id===stopWithHover.id\"\r\n            matTooltipShowDelay=\"500\"\r\n            [matTooltip]=\"'igo.geo.directionsForm.clearStop' | translate\"\r\n            matSuffix mat-icon-button color=\"warn\" aria-label=\"Clear\" (click)=\"clearStop(stop)\">\r\n            <mat-icon svgIcon=\"close\"></mat-icon>\r\n        </button>\r\n      \r\n        <mat-autocomplete [displayWith]=\"getOptionText\" #auto=\"matAutocomplete\" (optionSelected)=\"chooseProposal($event,stop)\">\r\n          <mat-optgroup *ngFor=\"let source of stop.searchProposals\" [label]=\"source.source.title\" [disabled]=\"source.source.enabled === false\">\r\n          <mat-option *ngFor=\"let result of source.results\" [value]=\"result\" \r\n          matTooltipShowDelay=\"500\" [matTooltip]=\"result.meta ? result.meta.title : ''\">\r\n            {{ result.meta ? result.meta.title : '' }}\r\n          </mat-option>\r\n          </mat-optgroup>\r\n        </mat-autocomplete>\r\n      </mat-form-field>\r\n    </div>\r\n\r\n\r\n\r\n\r\n    <div class=\"igo-form-button-group\" *ngIf=\"!stopIsDragged && stopWithHover && stop.id === stopWithHover.id\">\r\n      <button class=\"swipe-vertical\" cdkDragHandle mat-icon-button tooltip-position=\"below\" matTooltipShowDelay=\"500\"\r\n        [matTooltip]=\"'igo.geo.directionsForm.moveStop' | translate\" color=\"primary\">\r\n        <mat-icon svgIcon=\"gesture-swipe-vertical\"></mat-icon>\r\n      </button>\r\n\r\n      <button *ngIf=\"(stopsStore.count$ | async)> 2\" mat-icon-button tooltip-position=\"below\" matTooltipShowDelay=\"500\"\r\n        [matTooltip]=\"'igo.geo.directionsForm.removeStop' | translate\" color=\"warn\" (click)=\"removeStop(stop)\">\r\n        <mat-icon svgIcon=\"delete\"></mat-icon>\r\n      </button>\r\n      <button *ngIf=\"(stopsStore.count$ | async)<= 2\" disabled=\"true\" mat-icon-button tooltip-position=\"below\"\r\n        matTooltipShowDelay=\"500\" [matTooltip]=\"'igo.geo.directionsForm.removeStop' | translate\" color=\"warn\">\r\n        <mat-icon svgIcon=\"blank\"></mat-icon>\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".igo-input-container{width:100%}.igo-input-container mat-form-field{width:100%}.igo-input-container.reduce{width:70%}.igo-input-container.reduce mat-form-field{width:100%}.stops-list{max-width:100%;min-height:60px;display:block;background:white;border-radius:4px;overflow:hidden;padding:20px 10px}.swipe-vertical{cursor:move}.stop-box{height:60px;padding:20px 10px;color:#000000de;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;background:white}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.stops-list.cdk-drop-list-dragging .stop-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"] }]
+            args: [{ selector: 'igo-directions-inputs', template: "<div cdkDropList class=\"stops-list\" (cdkDropListDropped)=\"drop($event)\">\n  <div touchleave  \n  (touchenter)=\"onStopEnter(stop)\"\n  (touchleave)=\"onStopLeave()\"\n  (mouseover)=\"onStopEnter(stop)\"\n  (mouseleave)=\"onStopLeave()\"\n  (cdkDragStarted)=\"stopIsDragged=true\"\n  (cdkDragEnded)=\"stopIsDragged=false\"\n  cdkDragLockAxis=\"y\" class=\"stop-box mat-typography\" *ngFor=\"let stop of stopsStore.view.all$() | async; let i = index;\" cdkDrag>\n    <div [ngClass]=\"getNgClass(stop)\">\n      <mat-form-field>\n        <input id=\"{{stop.id}}\" type=\"text\"\n            [placeholder]=\"getPlaceholder(stop)\"\n            matTooltipShowDelay=\"500\"\n            [matTooltip]=\"stop.text\"\n            aria-label=\"Number\"\n            matInput\n            (focus)=\"onInputFocus(stop)\"\n            [(ngModel)]=\"stop.text\"\n            (keyup)=\"setStopText($event,stop)\"\n            (keydown.enter)=\"$event.preventDefault()\"\n            [matAutocomplete]=\"auto\">\n        <button \n            mat-button \n            *ngIf=\"(stop.text || stop.coordinates) && stopWithHover && stop.id===stopWithHover.id\"\n            matTooltipShowDelay=\"500\"\n            [matTooltip]=\"'igo.geo.directionsForm.clearStop' | translate\"\n            matSuffix mat-icon-button color=\"warn\" aria-label=\"Clear\" (click)=\"clearStop(stop)\">\n            <mat-icon svgIcon=\"close\"></mat-icon>\n        </button>\n      \n        <mat-autocomplete [displayWith]=\"getOptionText\" #auto=\"matAutocomplete\" (optionSelected)=\"chooseProposal($event,stop)\">\n          <mat-optgroup *ngFor=\"let source of stop.searchProposals\" [label]=\"source.source.title\" [disabled]=\"source.source.enabled === false\">\n          <mat-option *ngFor=\"let result of source.results\" [value]=\"result\" \n          matTooltipShowDelay=\"500\" [matTooltip]=\"result.meta ? result.meta.title : ''\">\n            {{ result.meta ? result.meta.title : '' }}\n          </mat-option>\n          </mat-optgroup>\n        </mat-autocomplete>\n      </mat-form-field>\n    </div>\n\n\n\n\n    <div class=\"igo-form-button-group\" *ngIf=\"!stopIsDragged && stopWithHover && stop.id === stopWithHover.id\">\n      <button class=\"swipe-vertical\" cdkDragHandle mat-icon-button tooltip-position=\"below\" matTooltipShowDelay=\"500\"\n        [matTooltip]=\"'igo.geo.directionsForm.moveStop' | translate\" color=\"primary\">\n        <mat-icon svgIcon=\"gesture-swipe-vertical\"></mat-icon>\n      </button>\n\n      <button *ngIf=\"(stopsStore.count$ | async)> 2\" mat-icon-button tooltip-position=\"below\" matTooltipShowDelay=\"500\"\n        [matTooltip]=\"'igo.geo.directionsForm.removeStop' | translate\" color=\"warn\" (click)=\"removeStop(stop)\">\n        <mat-icon svgIcon=\"delete\"></mat-icon>\n      </button>\n      <button *ngIf=\"(stopsStore.count$ | async)<= 2\" disabled=\"true\" mat-icon-button tooltip-position=\"below\"\n        matTooltipShowDelay=\"500\" [matTooltip]=\"'igo.geo.directionsForm.removeStop' | translate\" color=\"warn\">\n        <mat-icon svgIcon=\"blank\"></mat-icon>\n      </button>\n    </div>\n  </div>\n</div>", styles: [".igo-input-container{width:100%}.igo-input-container mat-form-field{width:100%}.igo-input-container.reduce{width:70%}.igo-input-container.reduce mat-form-field{width:100%}.stops-list{max-width:100%;min-height:60px;display:block;background:white;border-radius:4px;overflow:hidden;padding:20px 10px}.swipe-vertical{cursor:move}.stop-box{height:60px;padding:20px 10px;color:#000000de;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;background:white}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.stops-list.cdk-drop-list-dragging .stop-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"] }]
         }], function () { return [{ type: i2$1.LanguageService }]; }, { stopsStore: [{
                 type: Input
             }], stopsFeatureStore: [{
@@ -35829,7 +36136,7 @@ DirectionsButtonsComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DirectionsButtonsComponent, [{
             type: Component,
-            args: [{ selector: 'igo-directions-buttons', template: "<div class=\"igo-form-button-group\">\r\n  <button mat-icon-button tooltip-position=\"below\" matTooltipShowDelay=\"500\"\r\n    [matTooltip]=\"'igo.geo.directionsForm.addStop' | translate\" color=\"primary\" (click)=\"addStop()\">\r\n    <mat-icon svgIcon=\"map-marker-plus\"></mat-icon>\r\n  </button>\r\n  <button mat-icon-button tooltip-position=\"below\" matTooltipShowDelay=\"500\"\r\n    *ngIf=\"(routesFeatureStore.count$ | async)>=1 || (stopsStore.count$ | async)>=1\"\r\n    [matTooltip]=\"'igo.geo.directionsForm.resetDirectionsBtn' | translate\" color=\"warn\" (click)=\"resetStops()\">\r\n    <mat-icon svgIcon=\"file-restore\"></mat-icon>\r\n  </button>\r\n  <button mat-icon-button tooltip-position=\"below\" matTooltipShowDelay=\"500\"\r\n    *ngIf=\"(routesFeatureStore.count$ | async)>=1\" (click)=\"zoomRoute()\"\r\n    [matTooltip]=\"'igo.geo.directionsForm.zoomRoute' | translate\" color=\"primary\">\r\n    <mat-icon svgIcon=\"magnify-plus-outline\"></mat-icon>\r\n  </button>\r\n  <button mat-icon-button tooltip-position=\"below\" matTooltipShowDelay=\"500\"\r\n    *ngIf=\"(routesFeatureStore.count$ | async)>=1\" (click)=\"copyDirectionsToClipboard()\"\r\n    [matTooltip]=\"'igo.geo.directionsForm.copy' | translate\" color=\"primary\">\r\n    <mat-icon svgIcon=\"content-copy\"></mat-icon>\r\n  </button>\r\n  <button mat-icon-button tooltip-position=\"below\" matTooltipShowDelay=\"500\"\r\n    *ngIf=\"(routesFeatureStore.count$ | async)>=1\" (click)=\"copyLinkToClipboard()\" \r\n    [matTooltip]=\"'igo.geo.directionsForm.link' | translate\" color=\"primary\">\r\n    <mat-icon svgIcon=\"link\"></mat-icon>\r\n  </button>\r\n</div>" }]
+            args: [{ selector: 'igo-directions-buttons', template: "<div class=\"igo-form-button-group\">\n  <button mat-icon-button tooltip-position=\"below\" matTooltipShowDelay=\"500\"\n    [matTooltip]=\"'igo.geo.directionsForm.addStop' | translate\" color=\"primary\" (click)=\"addStop()\">\n    <mat-icon svgIcon=\"map-marker-plus\"></mat-icon>\n  </button>\n  <button mat-icon-button tooltip-position=\"below\" matTooltipShowDelay=\"500\"\n    *ngIf=\"(routesFeatureStore.count$ | async)>=1 || (stopsStore.count$ | async)>=1\"\n    [matTooltip]=\"'igo.geo.directionsForm.resetDirectionsBtn' | translate\" color=\"warn\" (click)=\"resetStops()\">\n    <mat-icon svgIcon=\"file-restore\"></mat-icon>\n  </button>\n  <button mat-icon-button tooltip-position=\"below\" matTooltipShowDelay=\"500\"\n    *ngIf=\"(routesFeatureStore.count$ | async)>=1\" (click)=\"zoomRoute()\"\n    [matTooltip]=\"'igo.geo.directionsForm.zoomRoute' | translate\" color=\"primary\">\n    <mat-icon svgIcon=\"magnify-plus-outline\"></mat-icon>\n  </button>\n  <button mat-icon-button tooltip-position=\"below\" matTooltipShowDelay=\"500\"\n    *ngIf=\"(routesFeatureStore.count$ | async)>=1\" (click)=\"copyDirectionsToClipboard()\"\n    [matTooltip]=\"'igo.geo.directionsForm.copy' | translate\" color=\"primary\">\n    <mat-icon svgIcon=\"content-copy\"></mat-icon>\n  </button>\n  <button mat-icon-button tooltip-position=\"below\" matTooltipShowDelay=\"500\"\n    *ngIf=\"(routesFeatureStore.count$ | async)>=1\" (click)=\"copyLinkToClipboard()\" \n    [matTooltip]=\"'igo.geo.directionsForm.link' | translate\" color=\"primary\">\n    <mat-icon svgIcon=\"link\"></mat-icon>\n  </button>\n</div>" }]
         }], function () {
         return [{ type: i2$1.LanguageService }, { type: i2$1.MessageService }, { type: i2$1.RouteService, decorators: [{
                         type: Optional
@@ -36033,7 +36340,7 @@ DirectionsResultsComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DirectionsResultsComponent, [{
             type: Component,
-            args: [{ selector: 'igo-directions-results', template: "<div class=\"igo-input-container\" *ngIf=\"directions && activeDirection\">\r\n    <mat-form-field *ngIf=\"directions && directions.length > 1\">\r\n        <mat-select placeholder=\"{{'igo.geo.directionsForm.drivingOptions' | translate}}\"\r\n            (selectionChange)=\"changeRoute()\" [(ngModel)]=\"activeDirection\">\r\n            <mat-option *ngFor=\"let direction of directions; let cnt = index;\" [value]=\"direction\">\r\n                Option {{cnt + 1}} : {{formatDistance(direction.distance)}}\r\n                ({{formatDuration(direction.duration)}})\r\n            </mat-option>\r\n        </mat-select>\r\n    </mat-form-field>\r\n\r\n    <mat-divider *ngIf=\"directions && directions.length === 0\"></mat-divider>\r\n\r\n    <mat-list (mouseleave)=\"onStepsListBlur()\">\r\n        <h2 mat-header class=\"igo-route-title mat-typography\">{{activeDirection.title}}</h2>\r\n        <h2 mat-subheader>{{formatDistance(activeDirection.distance)}}, {{formatDuration(activeDirection.duration)}}</h2>\r\n        <mat-list-item class=\"igo-steps\" \r\n            (mouseenter)=\"showSegment(step)\" \r\n            (click)=\"showSegment(step,true)\" \r\n            *ngFor=\"let step of activeDirection.steps; let cnt = index;\" igoListItem>\r\n            <mat-icon [ngClass]=\"formatStep(step,cnt).cssClass\" mat-list-icon svgIcon=\"{{formatStep(step,cnt).image}}\">\r\n            </mat-icon>\r\n\r\n            <h4 mat-line>{{cnt +1}}. {{formatStep(step,cnt).instruction}}</h4>\r\n            <h4 mat-line class=\"right\">{{formatDistance(step.distance)}}</h4>\r\n        </mat-list-item>\r\n\r\n        <mat-divider></mat-divider>\r\n\r\n    </mat-list>\r\n\r\n</div>", styles: [".igo-input-container{width:100%;padding:20px 10px}.igo-input-container mat-form-field{width:70%}.igo-route-title{font-weight:700}.igo-steps{cursor:pointer}.mat-line{word-wrap:break-word!important;white-space:pre-wrap!important}.mat-line.right{text-align:right}.rotate-90{transform:rotate(90deg)}.rotate-45{transform:rotate(45deg)}.rotate-270{transform:rotate(270deg)}.rotate-250{transform:rotate(250deg)}.rotate-290{transform:rotate(290deg)}.icon-flipped{transform:scaleY(-1)}\n"] }]
+            args: [{ selector: 'igo-directions-results', template: "<div class=\"igo-input-container\" *ngIf=\"directions && activeDirection\">\n    <mat-form-field *ngIf=\"directions && directions.length > 1\">\n        <mat-select placeholder=\"{{'igo.geo.directionsForm.drivingOptions' | translate}}\"\n            (selectionChange)=\"changeRoute()\" [(ngModel)]=\"activeDirection\">\n            <mat-option *ngFor=\"let direction of directions; let cnt = index;\" [value]=\"direction\">\n                Option {{cnt + 1}} : {{formatDistance(direction.distance)}}\n                ({{formatDuration(direction.duration)}})\n            </mat-option>\n        </mat-select>\n    </mat-form-field>\n\n    <mat-divider *ngIf=\"directions && directions.length === 0\"></mat-divider>\n\n    <mat-list (mouseleave)=\"onStepsListBlur()\">\n        <h2 mat-header class=\"igo-route-title mat-typography\">{{activeDirection.title}}</h2>\n        <h2 mat-subheader>{{formatDistance(activeDirection.distance)}}, {{formatDuration(activeDirection.duration)}}</h2>\n        <mat-list-item class=\"igo-steps\" \n            (mouseenter)=\"showSegment(step)\" \n            (click)=\"showSegment(step,true)\" \n            *ngFor=\"let step of activeDirection.steps; let cnt = index;\" igoListItem>\n            <mat-icon [ngClass]=\"formatStep(step,cnt).cssClass\" mat-list-icon svgIcon=\"{{formatStep(step,cnt).image}}\">\n            </mat-icon>\n\n            <h4 mat-line>{{cnt +1}}. {{formatStep(step,cnt).instruction}}</h4>\n            <h4 mat-line class=\"right\">{{formatDistance(step.distance)}}</h4>\n        </mat-list-item>\n\n        <mat-divider></mat-divider>\n\n    </mat-list>\n\n</div>", styles: [".igo-input-container{width:100%;padding:20px 10px}.igo-input-container mat-form-field{width:70%}.igo-route-title{font-weight:700}.igo-steps{cursor:pointer}.mat-line{word-wrap:break-word!important;white-space:pre-wrap!important}.mat-line.right{text-align:right}.rotate-90{transform:rotate(90deg)}.rotate-45{transform:rotate(45deg)}.rotate-270{transform:rotate(270deg)}.rotate-250{transform:rotate(250deg)}.rotate-290{transform:rotate(290deg)}.icon-flipped{transform:scaleY(-1)}\n"] }]
         }], function () { return [{ type: i2$1.LanguageService }, { type: i0.ChangeDetectorRef }]; }, { routesFeatureStore: [{
                 type: Input
             }], stepFeatureStore: [{
@@ -36315,7 +36622,7 @@ DirectionsComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Directi
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DirectionsComponent, [{
             type: Component,
-            args: [{ selector: 'igo-directions', template: "<igo-directions-buttons [contextUri]=\"contextUri\" [zoomToActiveRoute$]=\"zoomToActiveRoute$\" [routesFeatureStore]=\"routesFeatureStore\" [stopsStore]=\"stopsStore\"></igo-directions-buttons>\r\n\r\n<igo-directions-inputs (stopInputHasFocus)=\"onStopInputHasFocusChange($event)\" [coordRoundedDecimals]=\"coordRoundedDecimals\" [projection]=\"projection\" [stopsFeatureStore]=\"stopsFeatureStore\" [stopsStore]=\"stopsStore\" [debounce]=\"debounce\" [length]=\"length\"></igo-directions-inputs>\r\n<br>\r\n<igo-directions-results [stepFeatureStore]=\"stepFeatureStore\" [routesFeatureStore]=\"routesFeatureStore\"></igo-directions-results>" }]
+            args: [{ selector: 'igo-directions', template: "<igo-directions-buttons [contextUri]=\"contextUri\" [zoomToActiveRoute$]=\"zoomToActiveRoute$\" [routesFeatureStore]=\"routesFeatureStore\" [stopsStore]=\"stopsStore\"></igo-directions-buttons>\n\n<igo-directions-inputs (stopInputHasFocus)=\"onStopInputHasFocusChange($event)\" [coordRoundedDecimals]=\"coordRoundedDecimals\" [projection]=\"projection\" [stopsFeatureStore]=\"stopsFeatureStore\" [stopsStore]=\"stopsStore\" [debounce]=\"debounce\" [length]=\"length\"></igo-directions-inputs>\n<br>\n<igo-directions-results [stepFeatureStore]=\"stepFeatureStore\" [routesFeatureStore]=\"routesFeatureStore\"></igo-directions-results>" }]
         }], function () { return [{ type: i0.ChangeDetectorRef }, { type: i2$1.LanguageService }, { type: DirectionsService }, { type: SearchService }, { type: QueryService }]; }, { contextUri: [{
                 type: Input
             }], stopsStore: [{
@@ -37882,7 +38189,7 @@ SearchSelectorComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Sea
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SearchSelectorComponent, [{
             type: Component,
-            args: [{ selector: 'igo-search-selector', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"igo-search-selector\">\r\n  <button\r\n    mat-icon-button\r\n    class=\"igo-search-selector-button\"\r\n    color=\"primary\"\r\n    tooltip-position=\"below\"\r\n    matTooltipShowDelay=\"500\"\r\n    [matTooltip]=\"'igo.geo.search.menu.tooltip' | translate\"\r\n    [matMenuTriggerFor]=\"searchSelectorMenu\">\r\n    <mat-icon svgIcon=\"menu-down\"></mat-icon>\r\n  </button>\r\n\r\n  <mat-menu\r\n    #searchSelectorMenu=\"matMenu\"\r\n    class=\"no-border-radius\"\r\n    xPosition=\"before\"\r\n    yPosition=\"above\">\r\n    <mat-radio-group\r\n      class=\"igo-search-selector-radio-group\"\r\n      [value]=\"searchType$ | async\"\r\n      (change)=\"onSearchTypeChange($event.value)\">\r\n      <mat-radio-button *ngFor=\"let searchType of searchTypes\" [value]=\"searchType\">\r\n        {{getSearchTypeTitle(searchType) | translate}}\r\n      </mat-radio-button>\r\n    </mat-radio-group>\r\n  </mat-menu>\r\n\r\n</div>\r\n", styles: [".igo-search-selector-button ::ng-deep div.mat-button-ripple-round{border-radius:0}.igo-search-selector-radio-group{display:inline-flex;flex-direction:column}.igo-search-selector-radio-group mat-radio-button{margin:5px}\n"] }]
+            args: [{ selector: 'igo-search-selector', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"igo-search-selector\">\n  <button\n    mat-icon-button\n    class=\"igo-search-selector-button\"\n    color=\"primary\"\n    tooltip-position=\"below\"\n    matTooltipShowDelay=\"500\"\n    [matTooltip]=\"'igo.geo.search.menu.tooltip' | translate\"\n    [matMenuTriggerFor]=\"searchSelectorMenu\">\n    <mat-icon svgIcon=\"menu-down\"></mat-icon>\n  </button>\n\n  <mat-menu\n    #searchSelectorMenu=\"matMenu\"\n    class=\"no-border-radius\"\n    xPosition=\"before\"\n    yPosition=\"above\">\n    <mat-radio-group\n      class=\"igo-search-selector-radio-group\"\n      [value]=\"searchType$ | async\"\n      (change)=\"onSearchTypeChange($event.value)\">\n      <mat-radio-button *ngFor=\"let searchType of searchTypes\" [value]=\"searchType\">\n        {{getSearchTypeTitle(searchType) | translate}}\n      </mat-radio-button>\n    </mat-radio-group>\n  </mat-menu>\n\n</div>\n", styles: [".igo-search-selector-button ::ng-deep div.mat-button-ripple-round{border-radius:0}.igo-search-selector-radio-group{display:inline-flex;flex-direction:column}.igo-search-selector-radio-group mat-radio-button{margin:5px}\n"] }]
         }], function () { return [{ type: SearchSourceService }]; }, { searchTypes: [{
                 type: Input
             }], searchType: [{
@@ -38362,11 +38669,11 @@ SearchSettingsComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Sea
             i0.ɵɵadvance(1);
             i0.ɵɵproperty("ngIf", ctx.hasPointerReverseSearchSource && !ctx.isTouchScreen);
         }
-    }, dependencies: [i1$1.NgForOf, i1$1.NgIf, i1$1.NgSwitch, i1$1.NgSwitchCase, i4.MatTooltip, i2.MatIcon, i3.MatButton, i7$2.MatMenu, i7$2.MatMenuItem, i7$2.MatMenuTrigger, i17.MatRadioGroup, i17.MatRadioButton, i12$1.MatCheckbox, i11.MatDivider, i15$1.MatSlideToggle, i7.TranslatePipe], styles: [".checkAllButton[_ngcontent-%COMP%]{text-align:center;padding:0 5px}.igo-search-settings-button[_ngcontent-%COMP%]     div.mat-button-ripple-round{border-radius:0}.igo-search-settings-radio-group[_ngcontent-%COMP%]{display:flex;flex-direction:column}.igo-search-settings-radio-group[_ngcontent-%COMP%]   mat-radio-button[_ngcontent-%COMP%]{margin:5px}.igo-search-settings-checkbox[_ngcontent-%COMP%]   mat-radio-button[_ngcontent-%COMP%]{display:flex}.igo-search-settings-search-source[_ngcontent-%COMP%]{display:flex;width:100%}.igo-search-settings-search-source[_ngcontent-%COMP%]   mat-checkbox[_ngcontent-%COMP%]{display:flex;margin-left:5px;margin-right:5px}.pointer-summary-option[_ngcontent-%COMP%]{display:block;margin-right:10px;margin-bottom:15px}.pointer-summary-slide-toggle-container[_ngcontent-%COMP%]{overflow-x:hidden}.pointer-summary-slide-toggle-container[_ngcontent-%COMP%]   mat-slide-toggle[_ngcontent-%COMP%]{margin:10px}"], changeDetection: 0 });
+    }, dependencies: [i1$1.NgForOf, i1$1.NgIf, i1$1.NgSwitch, i1$1.NgSwitchCase, i4.MatTooltip, i2.MatIcon, i3.MatButton, i7$2.MatMenu, i7$2.MatMenuItem, i7$2.MatMenuTrigger, i17.MatRadioGroup, i17.MatRadioButton, i12$1.MatCheckbox, i11.MatDivider, i23.MatSlideToggle, i7.TranslatePipe], styles: [".checkAllButton[_ngcontent-%COMP%]{text-align:center;padding:0 5px}.igo-search-settings-button[_ngcontent-%COMP%]     div.mat-button-ripple-round{border-radius:0}.igo-search-settings-radio-group[_ngcontent-%COMP%]{display:flex;flex-direction:column}.igo-search-settings-radio-group[_ngcontent-%COMP%]   mat-radio-button[_ngcontent-%COMP%]{margin:5px}.igo-search-settings-checkbox[_ngcontent-%COMP%]   mat-radio-button[_ngcontent-%COMP%]{display:flex}.igo-search-settings-search-source[_ngcontent-%COMP%]{display:flex;width:100%}.igo-search-settings-search-source[_ngcontent-%COMP%]   mat-checkbox[_ngcontent-%COMP%]{display:flex;margin-left:5px;margin-right:5px}.pointer-summary-option[_ngcontent-%COMP%]{display:block;margin-right:10px;margin-bottom:15px}.pointer-summary-slide-toggle-container[_ngcontent-%COMP%]{overflow-x:hidden}.pointer-summary-slide-toggle-container[_ngcontent-%COMP%]   mat-slide-toggle[_ngcontent-%COMP%]{margin:10px}"], changeDetection: 0 });
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SearchSettingsComponent, [{
             type: Component,
-            args: [{ selector: 'igo-search-settings', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"igo-search-settings\">\r\n\r\n  <button\r\n    mat-icon-button\r\n    class=\"igo-search-settings-button\"\r\n    color=\"primary\"\r\n    tooltip-position=\"below\"\r\n    matTooltipShowDelay=\"500\"\r\n    [matTooltip]=\"'igo.geo.search.menu.tooltip' | translate\"\r\n    [matMenuTriggerFor]=\"searchSettingsMenu\">\r\n    <mat-icon svgIcon=\"chevron-down\"></mat-icon>\r\n  </button>\r\n  <mat-menu\r\n    #searchSettingsMenu=\"matMenu\"\r\n    class=\"no-border-radius\">\r\n    <div class=\"checkAllButton\" *ngIf=\"getSearchSources().length>4\">\r\n      <button mat-raised-button\r\n        (click)=\"checkUncheckAllSources($event)\">{{!searchSourcesAllEnabled  ? ('igo.geo.search.searchSources.unselectAll' | translate): ('igo.geo.search.searchSources.selectAll' | translate)}}</button>\r\n    </div>\r\n      <ng-container *ngFor=\"let source of getSearchSources()\">\r\n        <span class=\"igo-search-settings-search-source\">\r\n          <mat-checkbox\r\n            class=\"igo-search-settings-checkbox\"\r\n            [checked]=\"source.enabled\"\r\n            [value]=\"source\"\r\n            (click)=\"$event.stopPropagation()\"\r\n            (change)=\"onCheckSearchSource($event, source)\">\r\n          </mat-checkbox>\r\n          <button *ngIf=\"source.settings.length\u00A0>\u00A00\"\r\n            [matMenuTriggerFor]=\"sub_menu\"\r\n            mat-menu-item>{{source.title}}\r\n          </button>\r\n          <button\r\n            mat-menu-item\r\n            *ngIf=\"source.settings.length\u00A0===\u00A00\">\r\n            {{source.title}}\r\n          </button>\r\n        </span>\r\n          <mat-menu #sub_menu=\"matMenu\">\r\n            <ng-container *ngFor=\"let setting of source.settings\">\r\n              <button\r\n                  mat-menu-item\r\n                  [matMenuTriggerFor]=\"test_sub_menu\">\r\n                {{'igo.geo.search.searchSources.settings.'+ setting.title | translate}}\r\n              </button>\r\n              <mat-menu #test_sub_menu=\"matMenu\"\r\n                [ngSwitch]=\"setting.type\"\r\n                yPosition=\"above\">\r\n                <span *ngSwitchCase=\"'radiobutton'\">\r\n                  <mat-radio-group\r\n                    class=\"igo-search-settings-radio-group\"\r\n                    [value]=\"setting\">\r\n                    <mat-radio-button *ngFor=\"let settingValue of setting.values\"\r\n                      class=\"mat-typography\"\r\n                      [value]=\"settingValue\"\r\n                      [matTooltip]=\"getAvailableHashtagsValues(settingValue)\"\r\n                      [checked]=\"settingValue.enabled\"\r\n                      (click)=\"$event.stopPropagation()\"\r\n                      (change)=\"settingsValueCheckedRadioButton($event, source, setting, settingValue)\">\r\n                      {{settingValue.title | translate}}\r\n                    </mat-radio-button>\r\n                  </mat-radio-group>\r\n                </span>\r\n                <span *ngSwitchCase=\"'checkbox'\">\r\n                  <div class=\"checkAllButton\" *ngIf=\"setting.values.length\u00A0>\u00A03\">\r\n                    <button mat-raised-button\r\n                      (click)=\"checkUncheckAll($event, source, setting)\">{{setting.allEnabled || setting.allEnabled === undefined  ? ('igo.geo.search.searchSources.settings.unselectAll' | translate): ('igo.geo.search.searchSources.settings.selectAll' | translate)}}</button>\r\n                  </div>\r\n                  <mat-checkbox *ngFor=\"let settingValue of getAvailableValues(setting)\"\r\n                    class=\"mat-menu-item\"\r\n                    [style.display]=\"displayBlock\"\r\n                    [checked]=\"settingValue.enabled\"\r\n                    [value]=\"setting\"\r\n                    [matTooltip]=\"getAvailableHashtagsValues(settingValue)\"\r\n                    (click)=\"$event.stopPropagation()\"\r\n                    (change)=\"settingsValueCheckedCheckbox($event, source, setting, settingValue)\">\r\n                    {{settingValue.title | translate}}\r\n                  </mat-checkbox>\r\n                </span>\r\n              </mat-menu>\r\n            </ng-container>\r\n          </mat-menu>\r\n      </ng-container>\r\n      <span *ngIf=\"hasPointerReverseSearchSource && !isTouchScreen\">\r\n        <mat-divider></mat-divider>\r\n        <span class=\"pointer-summary-slide-toggle-container mat-typography\">\r\n          <mat-slide-toggle class=\"pointer-summary-option\" (change)=\"changePointerReverseSearch($event)\" tooltip-position=\"below\"\r\n            matTooltipShowDelay=\"500\" [matTooltip]=\"'igo.geo.search.pointerSearchSummary.tooltip' | translate\"\r\n            (click)=\"$event.stopPropagation()\" [checked]=\"pointerSummaryEnabled\" [labelPosition]=\"'after'\">\r\n            {{'igo.geo.search.pointerSearchSummary.title' | translate}}\r\n          </mat-slide-toggle>\r\n          <mat-slide-toggle class=\"pointer-summary-option\" (change)=\"changeSearchResultsGeometry($event)\" tooltip-position=\"below\"\r\n            matTooltipShowDelay=\"500\" [matTooltip]=\"'igo.geo.search.searchResultsGeometry.tooltip' | translate\"\r\n            (click)=\"$event.stopPropagation()\" [checked]=\"searchResultsGeometryEnabled\" [labelPosition]=\"'after'\">\r\n            {{'igo.geo.search.searchResultsGeometry.title' | translate}}\r\n          </mat-slide-toggle>\r\n        </span>\r\n      </span>\r\n  </mat-menu>\r\n</div>\r\n", styles: [".checkAllButton{text-align:center;padding:0 5px}.igo-search-settings-button ::ng-deep div.mat-button-ripple-round{border-radius:0}.igo-search-settings-radio-group{display:flex;flex-direction:column}.igo-search-settings-radio-group mat-radio-button{margin:5px}.igo-search-settings-checkbox mat-radio-button{display:flex}.igo-search-settings-search-source{display:flex;width:100%}.igo-search-settings-search-source mat-checkbox{display:flex;margin-left:5px;margin-right:5px}.pointer-summary-option{display:block;margin-right:10px;margin-bottom:15px}.pointer-summary-slide-toggle-container{overflow-x:hidden}.pointer-summary-slide-toggle-container mat-slide-toggle{margin:10px}\n"] }]
+            args: [{ selector: 'igo-search-settings', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"igo-search-settings\">\n\n  <button\n    mat-icon-button\n    class=\"igo-search-settings-button\"\n    color=\"primary\"\n    tooltip-position=\"below\"\n    matTooltipShowDelay=\"500\"\n    [matTooltip]=\"'igo.geo.search.menu.tooltip' | translate\"\n    [matMenuTriggerFor]=\"searchSettingsMenu\">\n    <mat-icon svgIcon=\"chevron-down\"></mat-icon>\n  </button>\n  <mat-menu\n    #searchSettingsMenu=\"matMenu\"\n    class=\"no-border-radius\">\n    <div class=\"checkAllButton\" *ngIf=\"getSearchSources().length>4\">\n      <button mat-raised-button\n        (click)=\"checkUncheckAllSources($event)\">{{!searchSourcesAllEnabled  ? ('igo.geo.search.searchSources.unselectAll' | translate): ('igo.geo.search.searchSources.selectAll' | translate)}}</button>\n    </div>\n      <ng-container *ngFor=\"let source of getSearchSources()\">\n        <span class=\"igo-search-settings-search-source\">\n          <mat-checkbox\n            class=\"igo-search-settings-checkbox\"\n            [checked]=\"source.enabled\"\n            [value]=\"source\"\n            (click)=\"$event.stopPropagation()\"\n            (change)=\"onCheckSearchSource($event, source)\">\n          </mat-checkbox>\n          <button *ngIf=\"source.settings.length\u00A0>\u00A00\"\n            [matMenuTriggerFor]=\"sub_menu\"\n            mat-menu-item>{{source.title}}\n          </button>\n          <button\n            mat-menu-item\n            *ngIf=\"source.settings.length\u00A0===\u00A00\">\n            {{source.title}}\n          </button>\n        </span>\n          <mat-menu #sub_menu=\"matMenu\">\n            <ng-container *ngFor=\"let setting of source.settings\">\n              <button\n                  mat-menu-item\n                  [matMenuTriggerFor]=\"test_sub_menu\">\n                {{'igo.geo.search.searchSources.settings.'+ setting.title | translate}}\n              </button>\n              <mat-menu #test_sub_menu=\"matMenu\"\n                [ngSwitch]=\"setting.type\"\n                yPosition=\"above\">\n                <span *ngSwitchCase=\"'radiobutton'\">\n                  <mat-radio-group\n                    class=\"igo-search-settings-radio-group\"\n                    [value]=\"setting\">\n                    <mat-radio-button *ngFor=\"let settingValue of setting.values\"\n                      class=\"mat-typography\"\n                      [value]=\"settingValue\"\n                      [matTooltip]=\"getAvailableHashtagsValues(settingValue)\"\n                      [checked]=\"settingValue.enabled\"\n                      (click)=\"$event.stopPropagation()\"\n                      (change)=\"settingsValueCheckedRadioButton($event, source, setting, settingValue)\">\n                      {{settingValue.title | translate}}\n                    </mat-radio-button>\n                  </mat-radio-group>\n                </span>\n                <span *ngSwitchCase=\"'checkbox'\">\n                  <div class=\"checkAllButton\" *ngIf=\"setting.values.length\u00A0>\u00A03\">\n                    <button mat-raised-button\n                      (click)=\"checkUncheckAll($event, source, setting)\">{{setting.allEnabled || setting.allEnabled === undefined  ? ('igo.geo.search.searchSources.settings.unselectAll' | translate): ('igo.geo.search.searchSources.settings.selectAll' | translate)}}</button>\n                  </div>\n                  <mat-checkbox *ngFor=\"let settingValue of getAvailableValues(setting)\"\n                    class=\"mat-menu-item\"\n                    [style.display]=\"displayBlock\"\n                    [checked]=\"settingValue.enabled\"\n                    [value]=\"setting\"\n                    [matTooltip]=\"getAvailableHashtagsValues(settingValue)\"\n                    (click)=\"$event.stopPropagation()\"\n                    (change)=\"settingsValueCheckedCheckbox($event, source, setting, settingValue)\">\n                    {{settingValue.title | translate}}\n                  </mat-checkbox>\n                </span>\n              </mat-menu>\n            </ng-container>\n          </mat-menu>\n      </ng-container>\n      <span *ngIf=\"hasPointerReverseSearchSource && !isTouchScreen\">\n        <mat-divider></mat-divider>\n        <span class=\"pointer-summary-slide-toggle-container mat-typography\">\n          <mat-slide-toggle class=\"pointer-summary-option\" (change)=\"changePointerReverseSearch($event)\" tooltip-position=\"below\"\n            matTooltipShowDelay=\"500\" [matTooltip]=\"'igo.geo.search.pointerSearchSummary.tooltip' | translate\"\n            (click)=\"$event.stopPropagation()\" [checked]=\"pointerSummaryEnabled\" [labelPosition]=\"'after'\">\n            {{'igo.geo.search.pointerSearchSummary.title' | translate}}\n          </mat-slide-toggle>\n          <mat-slide-toggle class=\"pointer-summary-option\" (change)=\"changeSearchResultsGeometry($event)\" tooltip-position=\"below\"\n            matTooltipShowDelay=\"500\" [matTooltip]=\"'igo.geo.search.searchResultsGeometry.tooltip' | translate\"\n            (click)=\"$event.stopPropagation()\" [checked]=\"searchResultsGeometryEnabled\" [labelPosition]=\"'after'\">\n            {{'igo.geo.search.searchResultsGeometry.title' | translate}}\n          </mat-slide-toggle>\n        </span>\n      </span>\n  </mat-menu>\n</div>\n", styles: [".checkAllButton{text-align:center;padding:0 5px}.igo-search-settings-button ::ng-deep div.mat-button-ripple-round{border-radius:0}.igo-search-settings-radio-group{display:flex;flex-direction:column}.igo-search-settings-radio-group mat-radio-button{margin:5px}.igo-search-settings-checkbox mat-radio-button{display:flex}.igo-search-settings-search-source{display:flex;width:100%}.igo-search-settings-search-source mat-checkbox{display:flex;margin-left:5px;margin-right:5px}.pointer-summary-option{display:block;margin-right:10px;margin-bottom:15px}.pointer-summary-slide-toggle-container{overflow-x:hidden}.pointer-summary-slide-toggle-container mat-slide-toggle{margin:10px}\n"] }]
         }], function () { return [{ type: SearchSourceService }, { type: i2$1.MediaService }, { type: i2$1.StorageService }]; }, { pointerSummaryEnabled: [{
                 type: Input
             }], searchResultsGeometryEnabled: [{
@@ -38872,7 +39179,7 @@ SearchBarComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SearchBa
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SearchBarComponent, [{
             type: Component,
-            args: [{ selector: 'igo-search-bar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"igo-search-bar-container\" [ngClass]=\"{empty: empty$ | async}\">\r\n  <mat-form-field [floatLabel]=\"floatLabel\" [appearance]=\"appearance\">\r\n    <mat-label *ngIf=\"label\">{{label}}</mat-label>\r\n    <input\r\n      #input\r\n      matInput\r\n      autocomplete=\"off\"\r\n      [ngClass]=\"{'hasSearchIcon': searchIcon}\"\r\n      [disabled]=\"disabled$ | async\"\r\n      [placeholder]=\"placeholder ? placeholder : (placeholder$ | async) ? (placeholder$.value | translate) : undefined\"\r\n      [value]=\"term$ | async\"\r\n      (keyup)=\"onKeyup($event)\"\r\n      (touchend)=\"onKeyup($event)\">\r\n  </mat-form-field>\r\n\r\n  <div class=\"search-bar-buttons\">\r\n    <button\r\n      mat-icon-button\r\n      [color]=\"color\"\r\n      *ngIf=\"searchIcon !== undefined\">\r\n      <mat-icon svgIcon=\"{{searchIcon}}\"></mat-icon>\r\n    </button>\r\n\r\n    <button\r\n      *ngIf=\"(empty$ | async)===false\"\r\n      mat-icon-button\r\n      [color]=\"color\"\r\n      (click)=\"onClearButtonClick()\"\r\n      [matTooltip]=\"'igo.geo.search.clearSearch' | translate\">\r\n      <mat-icon svgIcon=\"close\"></mat-icon>\r\n    </button>\r\n\r\n    <igo-search-selector\r\n      *ngIf=\"searchSelector\"\r\n      [searchTypes]=\"searchTypes\"\r\n      [searchType]=\"searchType$ | async\"\r\n      (searchTypeChange)=\"onSearchTypeChange($event)\">\r\n    </igo-search-selector>\r\n\r\n    <igo-search-settings\r\n      *ngIf=\"searchSettings\"\r\n      [pointerSummaryEnabled]=\"pointerSummaryEnabled\"\r\n      (pointerSummaryStatus)=\"pointerSummaryStatus.emit($event)\"\r\n      [searchResultsGeometryEnabled]=\"searchResultsGeometryEnabled\"\r\n      (searchResultsGeometryStatus)=\"searchResultsGeometryStatus.emit($event)\"\r\n      (searchSourceChange)=\"onSearchSettingsChange()\">\r\n    </igo-search-settings>\r\n  </div>\r\n</div>\r\n", styles: [":host ::ng-deep .mat-form-field{padding:0 5px}:host ::ng-deep .mat-form-field-wrapper{margin-bottom:-1.5em}:host ::ng-deep span.mat-form-field-label-wrapper{top:-20px}:host ::ng-deep div.mat-form-field-infix{left:5px;right:5px;padding:0 0 12px!important}:host ::ng-deep div.mat-form-field-underline{display:none}.igo-search-bar-container{position:relative;width:100%;display:inline-flex;overflow:hidden}.igo-search-bar-container>mat-form-field{width:calc(100% - 80px)}.igo-search-bar-container.empty>mat-form-field{width:calc(100% - 40px)}.search-bar-buttons{position:relative;right:0px;display:inline-flex;top:0}.search-bar-buttons>button:nth-child(2):before{content:\"\";left:0px;top:5px;border-right:1px solid #ddd;height:28px}igo-search-selector{background-color:#fff;top:0;border-radius:0}igo-search-settings{background-color:#fff;top:0;border-radius:0}\n"] }]
+            args: [{ selector: 'igo-search-bar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"igo-search-bar-container\" [ngClass]=\"{empty: empty$ | async}\">\n  <mat-form-field [floatLabel]=\"floatLabel\" [appearance]=\"appearance\">\n    <mat-label *ngIf=\"label\">{{label}}</mat-label>\n    <input\n      #input\n      matInput\n      autocomplete=\"off\"\n      [ngClass]=\"{'hasSearchIcon': searchIcon}\"\n      [disabled]=\"disabled$ | async\"\n      [placeholder]=\"placeholder ? placeholder : (placeholder$ | async) ? (placeholder$.value | translate) : undefined\"\n      [value]=\"term$ | async\"\n      (keyup)=\"onKeyup($event)\"\n      (touchend)=\"onKeyup($event)\">\n  </mat-form-field>\n\n  <div class=\"search-bar-buttons\">\n    <button\n      mat-icon-button\n      [color]=\"color\"\n      *ngIf=\"searchIcon !== undefined\">\n      <mat-icon svgIcon=\"{{searchIcon}}\"></mat-icon>\n    </button>\n\n    <button\n      *ngIf=\"(empty$ | async)===false\"\n      mat-icon-button\n      [color]=\"color\"\n      (click)=\"onClearButtonClick()\"\n      [matTooltip]=\"'igo.geo.search.clearSearch' | translate\">\n      <mat-icon svgIcon=\"close\"></mat-icon>\n    </button>\n\n    <igo-search-selector\n      *ngIf=\"searchSelector\"\n      [searchTypes]=\"searchTypes\"\n      [searchType]=\"searchType$ | async\"\n      (searchTypeChange)=\"onSearchTypeChange($event)\">\n    </igo-search-selector>\n\n    <igo-search-settings\n      *ngIf=\"searchSettings\"\n      [pointerSummaryEnabled]=\"pointerSummaryEnabled\"\n      (pointerSummaryStatus)=\"pointerSummaryStatus.emit($event)\"\n      [searchResultsGeometryEnabled]=\"searchResultsGeometryEnabled\"\n      (searchResultsGeometryStatus)=\"searchResultsGeometryStatus.emit($event)\"\n      (searchSourceChange)=\"onSearchSettingsChange()\">\n    </igo-search-settings>\n  </div>\n</div>\n", styles: [":host ::ng-deep .mat-form-field{padding:0 5px}:host ::ng-deep .mat-form-field-wrapper{margin-bottom:-1.5em}:host ::ng-deep span.mat-form-field-label-wrapper{top:-20px}:host ::ng-deep div.mat-form-field-infix{left:5px;right:5px;padding:0 0 12px!important}:host ::ng-deep div.mat-form-field-underline{display:none}.igo-search-bar-container{position:relative;width:100%;display:inline-flex;overflow:hidden}.igo-search-bar-container>mat-form-field{width:calc(100% - 80px)}.igo-search-bar-container.empty>mat-form-field{width:calc(100% - 40px)}.search-bar-buttons{position:relative;right:0px;display:inline-flex;top:0}.search-bar-buttons>button:nth-child(2):before{content:\"\";left:0px;top:5px;border-right:1px solid #ddd;height:28px}igo-search-selector{background-color:#fff;top:0;border-radius:0}igo-search-settings{background-color:#fff;top:0;border-radius:0}\n"] }]
         }], function () { return [{ type: i2$1.LanguageService }, { type: SearchService }, { type: SearchSourceService }]; }, { searchTypes: [{
                 type: Input
             }], searchType: [{
@@ -39143,7 +39450,7 @@ SearchResultsItemComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SearchResultsItemComponent, [{
             type: Component,
-            args: [{ selector: 'igo-search-results-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-list-item>\r\n  <mat-icon *ngIf=\"icon\" mat-list-avatar svgIcon=\"{{showIcons ? icon : 'blank'}}\"></mat-icon>\r\n\r\n  <h4 matLine *ngIf=\"titleHtml\" [innerHtml]=\"titleHtml\" matTooltipShowDelay=\"500\" [matTooltip]=\"tooltipHtml\" matTooltipClass=\"search-result-tooltip\"></h4>\r\n  <h4 matLine *ngIf=\"!titleHtml\" matTooltipShowDelay=\"500\" [matTooltip]=\"title\">{{title}}</h4>\r\n\r\n  <button *ngIf=\"withZoomButton\"\r\n    igoStopPropagation\r\n    mat-icon-button\r\n    (click)=\"onZoomHandler()\">\r\n    <mat-icon svgIcon=\"magnify\"></mat-icon>\r\n  </button>\r\n\r\n  <ng-content\r\n    select=[igoSearchItemToolbar]>\r\n  </ng-content>\r\n\r\n</mat-list-item>\r\n", styles: [":host ::ng-deep small{color:#8c8c8c}::ng-deep .search-result-tooltip{white-space:pre-line}\n"] }]
+            args: [{ selector: 'igo-search-results-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-list-item>\n  <mat-icon *ngIf=\"icon\" mat-list-avatar svgIcon=\"{{showIcons ? icon : 'blank'}}\"></mat-icon>\n\n  <h4 matLine *ngIf=\"titleHtml\" [innerHtml]=\"titleHtml\" matTooltipShowDelay=\"500\" [matTooltip]=\"tooltipHtml\" matTooltipClass=\"search-result-tooltip\"></h4>\n  <h4 matLine *ngIf=\"!titleHtml\" matTooltipShowDelay=\"500\" [matTooltip]=\"title\">{{title}}</h4>\n\n  <button *ngIf=\"withZoomButton\"\n    igoStopPropagation\n    mat-icon-button\n    (click)=\"onZoomHandler()\">\n    <mat-icon svgIcon=\"magnify\"></mat-icon>\n  </button>\n\n  <ng-content\n    select=[igoSearchItemToolbar]>\n  </ng-content>\n\n</mat-list-item>\n", styles: [":host ::ng-deep small{color:#8c8c8c}::ng-deep .search-result-tooltip{white-space:pre-line}\n"] }]
         }], function () { return []; }, { result: [{
                 type: Input
             }], map: [{
@@ -39473,7 +39780,7 @@ SearchResultsComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Sear
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SearchResultsComponent, [{
             type: Component,
-            args: [{ selector: 'igo-search-results', changeDetection: ChangeDetectionStrategy.OnPush, template: "<igo-list [navigation]=\"true\">\r\n  <ng-template\r\n    #groupTemplate\r\n    ngFor let-group\r\n    [ngForOf]=\"results$ | async\">\r\n\r\n    <igo-collapsible [class]=\"group.source.getId()\"\r\n      *ngIf=\"mode === searchResultMode.Grouped; else flatTemplate\"\r\n      [title]=\"computeGroupTitle(group)\"\r\n      [collapsed]=\"collapsed[group.source.title]\"\r\n      (toggle)=\"collapsed[group.source.title] = $event\">\r\n      <ng-container *ngTemplateOutlet=\"storeItemTemplate; context: {results: group.results}\"></ng-container>\r\n    </igo-collapsible>\r\n\r\n    <ng-template #flatTemplate>\r\n      <ng-container *ngTemplateOutlet=\"storeItemTemplate; context: {results: group.results}\"></ng-container>\r\n    </ng-template>\r\n\r\n    <ng-template #storeItemTemplate let-results=\"results\">\r\n      <ng-template ngFor let-result [ngForOf]=\"results\">\r\n        <igo-search-results-item\r\n          igoListItem\r\n          color=\"accent\"\r\n          [map]=\"map\"\r\n          [result]=\"result\"\r\n          [showIcons]=\"showIcons\"\r\n          [withZoomButton]=\"withZoomButton\"\r\n          [focused]=\"store.state.get(result).focused\"\r\n          [selected]=\"store.state.get(result).selected\"\r\n          (focus)=\"resultFocus.emit(result)\"\r\n          (unfocus)=\"resultUnfocus.emit(result)\"\r\n          (select)=\"onResultSelect(result)\"\r\n          (mouseenter)=\"resultFocus.emit(result)\"\r\n          (mouseleave)=\"resultUnfocus.emit(result)\">\r\n\r\n          <ng-container igoSearchItemToolbar\r\n            [ngTemplateOutlet]=\"templateSearchToolbar\"\r\n            [ngTemplateOutletContext]=\"{result: result}\">\r\n          </ng-container>\r\n\r\n        </igo-search-results-item>\r\n      </ng-template>\r\n      <span class=\"moreResults mat-typography\" *ngIf=\"isMoreResults(group)\" (click)=\"displayMoreResults(group)\">\r\n        <u>{{ 'igo.geo.search.displayMoreResults' | translate }}</u>\r\n      </span>\r\n    </ng-template>\r\n\r\n  </ng-template>\r\n\r\n</igo-list>\r\n", styles: [".moreResults{cursor:pointer;color:#00f;float:right;margin-right:10px;margin-top:5px}igo-list ::ng-deep mat-list{height:100%}\n"] }]
+            args: [{ selector: 'igo-search-results', changeDetection: ChangeDetectionStrategy.OnPush, template: "<igo-list [navigation]=\"true\">\n  <ng-template\n    #groupTemplate\n    ngFor let-group\n    [ngForOf]=\"results$ | async\">\n\n    <igo-collapsible [class]=\"group.source.getId()\"\n      *ngIf=\"mode === searchResultMode.Grouped; else flatTemplate\"\n      [title]=\"computeGroupTitle(group)\"\n      [collapsed]=\"collapsed[group.source.title]\"\n      (toggle)=\"collapsed[group.source.title] = $event\">\n      <ng-container *ngTemplateOutlet=\"storeItemTemplate; context: {results: group.results}\"></ng-container>\n    </igo-collapsible>\n\n    <ng-template #flatTemplate>\n      <ng-container *ngTemplateOutlet=\"storeItemTemplate; context: {results: group.results}\"></ng-container>\n    </ng-template>\n\n    <ng-template #storeItemTemplate let-results=\"results\">\n      <ng-template ngFor let-result [ngForOf]=\"results\">\n        <igo-search-results-item\n          igoListItem\n          color=\"accent\"\n          [map]=\"map\"\n          [result]=\"result\"\n          [showIcons]=\"showIcons\"\n          [withZoomButton]=\"withZoomButton\"\n          [focused]=\"store.state.get(result).focused\"\n          [selected]=\"store.state.get(result).selected\"\n          (focus)=\"resultFocus.emit(result)\"\n          (unfocus)=\"resultUnfocus.emit(result)\"\n          (select)=\"onResultSelect(result)\"\n          (mouseenter)=\"resultFocus.emit(result)\"\n          (mouseleave)=\"resultUnfocus.emit(result)\">\n\n          <ng-container igoSearchItemToolbar\n            [ngTemplateOutlet]=\"templateSearchToolbar\"\n            [ngTemplateOutletContext]=\"{result: result}\">\n          </ng-container>\n\n        </igo-search-results-item>\n      </ng-template>\n      <span class=\"moreResults mat-typography\" *ngIf=\"isMoreResults(group)\" (click)=\"displayMoreResults(group)\">\n        <u>{{ 'igo.geo.search.displayMoreResults' | translate }}</u>\n      </span>\n    </ng-template>\n\n  </ng-template>\n\n</igo-list>\n", styles: [".moreResults{cursor:pointer;color:#00f;float:right;margin-right:10px;margin-top:5px}igo-list ::ng-deep mat-list{height:100%}\n"] }]
         }], function () { return [{ type: i0.ChangeDetectorRef }, { type: SearchService }]; }, { map: [{
                 type: Input
             }], store: [{
@@ -39685,7 +39992,7 @@ SearchResultAddButtonComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ ty
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SearchResultAddButtonComponent, [{
             type: Component,
-            args: [{ selector: 'igo-search-add-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\r\nigoStopPropagation\r\n(mouseenter)=\"onMouseEvent($event)\" (mouseleave)=\"onMouseEvent($event)\"\r\n*ngIf=\"layer.meta.dataType === 'Layer'\"\r\nmat-icon-button\r\ntooltip-position=\"below\"\r\nmatTooltipShowDelay=\"500\"\r\n[matTooltip]=\"(tooltip$ | async) | translate\"\r\n[color]=\"(isPreview$ | async) ? '' : added ? 'warn' : ''\"\r\n(click)=\"onToggleClick($event)\">\r\n<mat-icon\r\n  matBadge=\"icon\"\r\n  igoMatBadgeIcon=\"eye-off\"\r\n  igoMatBadgeInverseColor=\"true\"\r\n  [matBadgeHidden]=\"(inRange$ | async)\"\r\n  matBadgeDisabled=\"true\"\r\n  matBadgeSize=\"small\"\r\n  matBadgePosition=\"after\"\r\n  [svgIcon]=\"(isPreview$ | async) ? 'plus' : added ? 'delete' : 'plus'\">\r\n</mat-icon>\r\n</button>\r\n" }]
+            args: [{ selector: 'igo-search-add-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\nigoStopPropagation\n(mouseenter)=\"onMouseEvent($event)\" (mouseleave)=\"onMouseEvent($event)\"\n*ngIf=\"layer.meta.dataType === 'Layer'\"\nmat-icon-button\ntooltip-position=\"below\"\nmatTooltipShowDelay=\"500\"\n[matTooltip]=\"(tooltip$ | async) | translate\"\n[color]=\"(isPreview$ | async) ? '' : added ? 'warn' : ''\"\n(click)=\"onToggleClick($event)\">\n<mat-icon\n  matBadge=\"icon\"\n  igoMatBadgeIcon=\"eye-off\"\n  igoMatBadgeInverseColor=\"true\"\n  [matBadgeHidden]=\"(inRange$ | async)\"\n  matBadgeDisabled=\"true\"\n  matBadgeSize=\"small\"\n  matBadgePosition=\"after\"\n  [svgIcon]=\"(isPreview$ | async) ? 'plus' : added ? 'delete' : 'plus'\">\n</mat-icon>\n</button>\n" }]
         }], function () { return [{ type: LayerService }]; }, { layer: [{
                 type: Input
             }], added: [{
@@ -40225,7 +40532,7 @@ ToastComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ToastCompone
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ToastComponent, [{
             type: Component,
-            args: [{ selector: 'igo-toast', template: "<igo-flexible #flex\r\n  collapsedMobile=\"51px\"\r\n  expandedMobile=\"300px\"\r\n  [state]=\"state\"\r\n  (swipeup)=\"swipe($event.type)\"\r\n  (swipedown)=\"swipe($event.type)\">\r\n\r\n  <igo-panel [title]=\"title\">\r\n    <button\r\n      mat-icon-button\r\n      panelLeftButton\r\n      (click)=\"toggle()\">\r\n      <mat-icon [svgIcon]=\"['collapsed', 'initial'].indexOf(flex.state) >= 0 ? 'arrow_upward' : 'arrow_downward'\"></mat-icon>\r\n    </button>\r\n\r\n    <button mat-icon-button panelRightButton class=\"igo-icon-button\" (click)=\"zoomToFeatureExtent()\" *ngIf=\"feature.geometry\">\r\n      <mat-icon svgIcon=\"zoom-in\"></mat-icon>\r\n    </button>\r\n\r\n    <igo-feature-details [feature]=\"feature\"></igo-feature-details>\r\n  </igo-panel>\r\n\r\n</igo-flexible>\r\n", styles: [":host{position:absolute;bottom:0px;width:100%;max-height:calc(100% - 50px);background-color:#fff}igo-feature-details ::ng-deep table{width:100%}\n"] }]
+            args: [{ selector: 'igo-toast', template: "<igo-flexible #flex\n  collapsedMobile=\"51px\"\n  expandedMobile=\"300px\"\n  [state]=\"state\"\n  (swipeup)=\"swipe($event.type)\"\n  (swipedown)=\"swipe($event.type)\">\n\n  <igo-panel [title]=\"title\">\n    <button\n      mat-icon-button\n      panelLeftButton\n      (click)=\"toggle()\">\n      <mat-icon [svgIcon]=\"['collapsed', 'initial'].indexOf(flex.state) >= 0 ? 'arrow_upward' : 'arrow_downward'\"></mat-icon>\n    </button>\n\n    <button mat-icon-button panelRightButton class=\"igo-icon-button\" (click)=\"zoomToFeatureExtent()\" *ngIf=\"feature.geometry\">\n      <mat-icon svgIcon=\"zoom-in\"></mat-icon>\n    </button>\n\n    <igo-feature-details [feature]=\"feature\"></igo-feature-details>\n  </igo-panel>\n\n</igo-flexible>\n", styles: [":host{position:absolute;bottom:0px;width:100%;max-height:calc(100% - 50px);background-color:#fff}igo-feature-details ::ng-deep table{width:100%}\n"] }]
         }], function () { return []; }, { expanded: [{
                 type: Input
             }], map: [{
@@ -40315,7 +40622,7 @@ OgcFilterComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: OgcFilte
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(OgcFilterComponent, [{
             type: Component,
-            args: [{ selector: 'igo-ogc-filter', changeDetection: ChangeDetectionStrategy.OnPush, template: "<igo-ogc-filterable-item\r\n  igoListItem\r\n  [layer]=\"layer\"\r\n  [header]=\"false\" \r\n  [map]=\"map\" >\r\n</igo-ogc-filterable-item>" }]
+            args: [{ selector: 'igo-ogc-filter', changeDetection: ChangeDetectionStrategy.OnPush, template: "<igo-ogc-filterable-item\n  igoListItem\n  [layer]=\"layer\"\n  [header]=\"false\" \n  [map]=\"map\" >\n</igo-ogc-filterable-item>" }]
         }], function () { return [{ type: i0.ChangeDetectorRef }]; }, { layer: [{
                 type: Input
             }], map: [{
@@ -40840,7 +41147,7 @@ ConfirmationPopupComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ConfirmationPopupComponent, [{
             type: Component,
-            args: [{ selector: 'igo-confirmation-popup-component', template: "<div mat-dialog-content>\r\n  <p class=\"mat-typography\">{{data.type === 'add' ?\r\n    languageService.translate.instant('igo.geo.workspace.addConfirmation') :\r\n    languageService.translate.instant('igo.geo.workspace.deleteConfirmation')}}</p>\r\n</div>\r\n<div mat-dialog-actions>\r\n  <button\r\n    mat-raised-button\r\n    color=\"primary\"\r\n    (click)=\"confirmedAction()\">Ok\r\n  </button>\r\n  <button\r\n    mat-raised-button\r\n    (click)=\"cancelAction()\">{{languageService.translate.instant('igo.geo.workspace.cancel')}}\r\n  </button>\r\n</div>", styles: ["div.mat-dialog-actions{justify-content:center}\n"] }]
+            args: [{ selector: 'igo-confirmation-popup-component', template: "<div mat-dialog-content>\n  <p class=\"mat-typography\">{{data.type === 'add' ?\n    languageService.translate.instant('igo.geo.workspace.addConfirmation') :\n    languageService.translate.instant('igo.geo.workspace.deleteConfirmation')}}</p>\n</div>\n<div mat-dialog-actions>\n  <button\n    mat-raised-button\n    color=\"primary\"\n    (click)=\"confirmedAction()\">Ok\n  </button>\n  <button\n    mat-raised-button\n    (click)=\"cancelAction()\">{{languageService.translate.instant('igo.geo.workspace.cancel')}}\n  </button>\n</div>", styles: ["div.mat-dialog-actions{justify-content:center}\n"] }]
         }], function () {
         return [{ type: i1.MatDialogRef }, { type: i2$1.LanguageService }, { type: undefined, decorators: [{
                         type: Inject,
@@ -42710,7 +43017,7 @@ class NominatimSearchSource extends SearchSource {
                         },
                         {
                             title: 'igo.geo.search.nominatim.type.entertainment',
-                            value: 'arts_centre,brothel,casino,cinema,community_center_fountain,gambling,nightclub,planetarium \
+                            value: 'arts_centre,brothel,casino,cinema,community_center_fountain,gambling,nightclub,planetarium \
                           ,public_bookcase,social_centre,stripclub,studio,swingerclub,theatre,internet_cafe',
                             enabled: false
                         },