npm - @igo2/geo - Versions diffs - 1.13.3 → 1.13.4 - Mend

@igo2/geo 1.13.3 → 1.13.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (442) hide show

package/fesm2015/igo2-geo.mjs CHANGED Viewed

@@ -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,
@@ -7767,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];
@@ -7824,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];
@@ -8406,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: [{
@@ -9263,7 +9263,7 @@ ZoomButtonComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ZoomBut
 (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: [{
@@ -9322,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: [{
@@ -9400,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: [{
@@ -9532,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: [{
@@ -9645,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: [{
@@ -9772,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: [{
@@ -10306,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: [{
@@ -10379,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: [{
@@ -10577,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
             }] });
@@ -10629,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
             }] });
@@ -10664,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
             }] });
@@ -12815,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: [{
@@ -13234,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: [{
@@ -13495,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: [{
@@ -13799,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: [{
@@ -14123,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: [{
@@ -15180,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 */ {}]
@@ -15353,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: [{
@@ -15630,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: [{
@@ -15744,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: [{
@@ -15828,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: [{
@@ -17099,7 +17099,7 @@ 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"] }]
+            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: [{
@@ -17216,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: [{
@@ -17681,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,
@@ -17735,7 +17735,7 @@ 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);
 })();
@@ -17786,7 +17786,7 @@ DrawLayerPopupComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Dra
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DrawLayerPopupComponent, [{
             type: Component,
-            args: [{ selector: 'igo-draw-popup-component', template: "<div mat-dialog-content>\r\n  <p class=\"mat-typography\">\r\n    {{ 'igo.geo.draw.layer.layerDialogInstruction' | translate }}\r\n  </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.layer.title' | translate }}\"\r\n      />\r\n  </mat-form-field>\r\n</div>\r\n<div mat-dialog-actions>\r\n  <button mat-raised-button (click)=\"cancelDrawing()\">\r\n    {{ 'igo.geo.draw.cancel' | translate }}\r\n  </button>\r\n  <button mat-raised-button color=\"primary\" (click)=\"confirm(input.value)\">\r\n    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\">\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
             }] });
@@ -18817,7 +18817,7 @@ 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    >\r\n      {{ 'igo.geo.draw.toggleMapTooltips' | translate }}\r\n    </mat-slide-toggle>\r\n  </div>\r\n\r\n  <mat-divider></mat-divider>\r\n\r\n  <div>\r\n    <mat-form-field appearance=\"outline\" class=\"layer-select\">\r\n      <mat-label>{{'igo.geo.draw.layer.title' | translate}}</mat-label>\r\n      <mat-select #selectedLayer (selectionChange)=\"onLayerChange(selectedLayer.value)\" [value]=\"updateActiveLayer()\">\r\n        <mat-option *ngFor=\"let layer of allLayers\" [value]=\"layer\">\r\n          {{ layer.title }}\r\n        </mat-option>\r\n        <mat-option id=\"createNewLayer\" >\r\n          {{'igo.geo.draw.layer.createNewLayer' | translate}}\r\n        </mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <button\r\n      *ngIf=\"activeDrawingLayer\"\r\n      mat-icon-button\r\n      [color]=\"activeDrawingLayer.visible ? 'primary' : 'default'\"\r\n      collapsibleButton\r\n      tooltip-position=\"below\"\r\n      matTooltipShowDelay=\"500\"\r\n      [matTooltip]=\"activeDrawingLayer.visible ?\r\n                    ('igo.geo.layer.hideLayer' | translate) :\r\n                    ('igo.geo.layer.showLayer' | translate)\"\r\n      (click)=\"activeDrawingLayer.visible = !activeDrawingLayer.visible\">\r\n      <mat-icon\r\n        [svgIcon]=\"activeDrawingLayer.visible ? 'eye' : 'eye-off'\">\r\n      </mat-icon>\r\n    </button>\r\n  </div>\r\n  <mat-divider></mat-divider>\r\n  <div>\r\n    <button\r\n      *ngIf=\"activeStore.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        [store]=\"activeStore\"\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  >\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    >\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}.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"] }]
+                    ], 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: [{
@@ -19121,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,
@@ -19542,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
@@ -19757,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: [{
@@ -19843,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: [{
@@ -20602,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: [{
@@ -21778,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,
@@ -22835,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: [{
@@ -23547,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: [{
@@ -23736,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: [{
@@ -24491,7 +24491,7 @@ TimeFilterFormComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Tim
 (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: [{
@@ -24629,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: [{
@@ -24676,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
             }] });
@@ -24724,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,
@@ -25640,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: [{
@@ -25715,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: [{
@@ -26042,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: [{
@@ -26097,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: [{
@@ -26277,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: [{
@@ -27787,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']
@@ -27932,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: [{
@@ -28139,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: [{
@@ -29226,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: [{
@@ -30169,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: [{
@@ -30351,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: [{
@@ -30642,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: [{
@@ -32652,7 +32652,7 @@ ImportExportComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Impor
 (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: [{
@@ -33143,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: [{
@@ -34552,7 +34552,7 @@ PrintFormComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrintFor
 (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: [{
@@ -34690,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: [{
@@ -35625,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: [{
@@ -36136,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
@@ -36340,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: [{
@@ -36622,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: [{
@@ -38189,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: [{
@@ -38673,7 +38673,7 @@ SearchSettingsComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Sea
 (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: [{
@@ -39179,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: [{
@@ -39450,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: [{
@@ -39780,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: [{
@@ -39992,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: [{
@@ -40532,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: [{
@@ -40622,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: [{
@@ -41147,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,
@@ -43017,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
                         },