@igo2/geo 16.0.0-rc.8 → 16.0.0

package/fesm2022/igo2-geo.mjs

@@ -8578,7 +8578,7 @@ class MapBrowserComponent {
 }
 (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>\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}:host ::ng-deep igo-wake-lock-button{position:absolute;top:95px;right:5px}: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>\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}:host ::ng-deep igo-wake-lock-button{position:absolute;top:95px;right:5px}: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.ActivityService }]; }, { map: [{
             type: Input
         }], view: [{
@@ -10466,7 +10466,7 @@ class LayerItemComponent {
 }
 (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\">\n  <mat-checkbox\n    *ngIf=\"selectionMode\"\n    class=\"layerCheck\"\n    matListItemIcon\n    (change)=\"check()\"\n    [checked]=\"layerCheck\"\n  >\n  </mat-checkbox>\n  <span\n    matListItemTitle\n    class=\"igo-layer-title\"\n    [matTooltip]=\"tooltipText\"\n    matTooltipShowDelay=\"500\"\n    (click)=\"toggleLegendOnClick()\"\n  >\n    {{ layer.title }}\n  </span>\n\n  <div matListItemMeta>\n    <button\n      *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($event)\"\n    >\n      <mat-icon\n        aria-hidden=\"false\"\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      >\n      </mat-icon>\n    </button>\n\n    <button\n      *ngIf=\"selectionMode\"\n      class=\"selection-eye\"\n      mat-icon-button\n      [color]=\"layer.visible ? 'primary' : 'default'\"\n      collapsibleButton\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"\n        layer.visible\n          ? ('igo.geo.layer.hideLayer' | translate)\n          : ('igo.geo.layer.showLayer' | translate)\n      \"\n      (click)=\"toggleVisibility($event)\"\n    >\n      <mat-icon\n        aria-hidden=\"false\"\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      >\n      </mat-icon>\n    </button>\n\n    <button\n      *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    >\n      <mat-icon svgIcon=\"dots-horizontal\"></mat-icon>\n    </button>\n  </div>\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  >\n  </igo-layer-legend>\n</div>\n", styles: [":host{overflow:hidden}:host ::ng-deep .igo-layer-title{display:block;width:100%;cursor:pointer}:host .igo-layer-legend-container{padding-left:18px;width:calc(100% - 18px)}:host mat-icon[matBadge] ::ng-deep .mat-badge-content{font-size:12px}:host .layerCheck{align-self:baseline;width:16px;padding-right:0}\n"] }]
+        args: [{ selector: 'igo-layer-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-list-item class=\"igo-layer-list-item\">\r\n  <mat-checkbox\r\n    *ngIf=\"selectionMode\"\r\n    class=\"layerCheck\"\r\n    matListItemIcon\r\n    (change)=\"check()\"\r\n    [checked]=\"layerCheck\"\r\n  >\r\n  </mat-checkbox>\r\n  <span\r\n    matListItemTitle\r\n    class=\"igo-layer-title\"\r\n    [matTooltip]=\"tooltipText\"\r\n    matTooltipShowDelay=\"500\"\r\n    (click)=\"toggleLegendOnClick()\"\r\n  >\r\n    {{ layer.title }}\r\n  </span>\r\n\r\n  <div matListItemMeta>\r\n    <button\r\n      *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($event)\"\r\n    >\r\n      <mat-icon\r\n        aria-hidden=\"false\"\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      >\r\n      </mat-icon>\r\n    </button>\r\n\r\n    <button\r\n      *ngIf=\"selectionMode\"\r\n      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]=\"\r\n        layer.visible\r\n          ? ('igo.geo.layer.hideLayer' | translate)\r\n          : ('igo.geo.layer.showLayer' | translate)\r\n      \"\r\n      (click)=\"toggleVisibility($event)\"\r\n    >\r\n      <mat-icon\r\n        aria-hidden=\"false\"\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      >\r\n      </mat-icon>\r\n    </button>\r\n\r\n    <button\r\n      *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    >\r\n      <mat-icon svgIcon=\"dots-horizontal\"></mat-icon>\r\n    </button>\r\n  </div>\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  >\r\n  </igo-layer-legend>\r\n</div>\r\n", styles: [":host{overflow:hidden}:host ::ng-deep .igo-layer-title{display:block;width:100%;cursor:pointer}:host .igo-layer-legend-container{padding-left:18px;width:calc(100% - 18px)}:host mat-icon[matBadge] ::ng-deep .mat-badge-content{font-size:12px}:host .layerCheck{align-self:baseline;width:16px;padding-right:0}\n"] }]
     }], function () { return [{ type: i2.NetworkService }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, { activeLayer: [{
             type: Input
         }], selectAll: [{
@@ -10579,7 +10579,7 @@ class LayerLegendItemComponent {
 }
 (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\">\n  <span\n    matListItemTitle\n    class=\"igo-layer-title\"\n    [matTooltip]=\"tooltipText\"\n    matTooltipShowDelay=\"500\"\n    >{{ layer.title }}</span\n  >\n</mat-list-item>\n\n<div #legend class=\"igo-layer-legend-container\">\n  <igo-layer-legend\n    [layer]=\"layer\"\n    [updateLegendOnResolutionChange]=\"updateLegendOnResolutionChange\"\n  >\n  </igo-layer-legend>\n</div>\n", styles: [":host{overflow:hidden}:host .igo-layer-list-item{height:48px;clear:both}:host .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\">\r\n  <span\r\n    matListItemTitle\r\n    class=\"igo-layer-title\"\r\n    [matTooltip]=\"tooltipText\"\r\n    matTooltipShowDelay=\"500\"\r\n    >{{ layer.title }}</span\r\n  >\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  >\r\n  </igo-layer-legend>\r\n</div>\r\n", styles: [":host{overflow:hidden}:host .igo-layer-list-item{height:48px;clear:both}:host .igo-layer-legend-container{padding-left:18px;width:calc(100% - 18px)}\n"] }]
     }], function () { return [{ type: i2.NetworkService }]; }, { layer: [{
             type: Input
         }], updateLegendOnResolutionChange: [{
@@ -10768,7 +10768,7 @@ class LayerLegendListComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LayerLegendListComponent, [{
         type: Component,
-        args: [{ selector: 'igo-layer-legend-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<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\"\n    class=\"mat-typography\"\n    *ngIf=\"(layersInUi$ | async).length && allowShowAllLegends\"\n    [labelPosition]=\"'before'\"\n    (change)=\"toggleShowAllLegends($event.checked)\"\n  >\n    {{ 'igo.geo.layer.legend.showAll' | translate }}\n  </mat-slide-toggle>\n  <mat-divider\n    *ngIf=\"(layersInUi$ | async).length && allowShowAllLegends\"\n  ></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\n        *ngIf=\"!(excludeBaseLayers && layer.baseLayer)\"\n        igoListItem\n        [layer]=\"layer\"\n        [updateLegendOnResolutionChange]=\"updateLegendOnResolutionChange\"\n      >\n      </igo-layer-legend-item>\n    </ng-template>\n  </igo-list>\n  <p\n    class=\"layers-empty mat-typography\"\n    *ngIf=\"\n      !showAllLegendsValue &&\n      (layersInUi$ | async).length &&\n      (hasVisibleOrInRangeLayers$ | async) === false &&\n      (hasVisibleAndNotInRangeLayers$ | async) === false &&\n      allowShowAllLegends\n    \"\n  >\n    {{ 'igo.geo.layer.legend.noLayersVisibleWithShowAllButton' | translate }}\n  </p>\n  <p\n    class=\"layers-empty mat-typography\"\n    *ngIf=\"\n      !showAllLegendsValue &&\n      (layersInUi$ | async).length &&\n      (hasVisibleOrInRangeLayers$ | async) === false &&\n      (hasVisibleAndNotInRangeLayers$ | async) &&\n      allowShowAllLegends\n    \"\n  >\n    {{\n      'igo.geo.layer.legend.noLayersVisibleWithShowAllButtonButZoom' | translate\n    }}\n  </p>\n  <p\n    class=\"layers-empty mat-typography\"\n    *ngIf=\"\n      (layersInUi$ | async).length &&\n      (hasVisibleOrInRangeLayers$ | async) === false &&\n      (hasVisibleAndNotInRangeLayers$ | async) === false &&\n      !allowShowAllLegends\n    \"\n  >\n    {{ 'igo.geo.layer.legend.noLayersVisible' | translate }}\n  </p>\n  <p\n    class=\"layers-empty mat-typography\"\n    *ngIf=\"\n      (layersInUi$ | async).length &&\n      (hasVisibleOrInRangeLayers$ | async) === false &&\n      (hasVisibleAndNotInRangeLayers$ | async) &&\n      !allowShowAllLegends\n    \"\n  >\n    {{ 'igo.geo.layer.legend.noLayersVisibleButZoom' | translate }}\n  </p>\n</div>\n", styles: [":host mat-slide-toggle{width:100%;padding:10px}:host mat-slide-toggle ::ng-deep .mdc-form-field{width:100%}:host mat-slide-toggle ::ng-deep .mdc-label{margin-left:0;width:calc(100% - 60px)}:host igo-list{display:contents}:host .layers-empty{text-align:justify;margin:10px}:host .layer-legend-list-container{max-height:100%;overflow:auto}\n"] }]
+        args: [{ selector: 'igo-layer-legend-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<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\"\r\n    class=\"mat-typography\"\r\n    *ngIf=\"(layersInUi$ | async).length && allowShowAllLegends\"\r\n    [labelPosition]=\"'before'\"\r\n    (change)=\"toggleShowAllLegends($event.checked)\"\r\n  >\r\n    {{ 'igo.geo.layer.legend.showAll' | translate }}\r\n  </mat-slide-toggle>\r\n  <mat-divider\r\n    *ngIf=\"(layersInUi$ | async).length && allowShowAllLegends\"\r\n  ></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\r\n        *ngIf=\"!(excludeBaseLayers && layer.baseLayer)\"\r\n        igoListItem\r\n        [layer]=\"layer\"\r\n        [updateLegendOnResolutionChange]=\"updateLegendOnResolutionChange\"\r\n      >\r\n      </igo-layer-legend-item>\r\n    </ng-template>\r\n  </igo-list>\r\n  <p\r\n    class=\"layers-empty mat-typography\"\r\n    *ngIf=\"\r\n      !showAllLegendsValue &&\r\n      (layersInUi$ | async).length &&\r\n      (hasVisibleOrInRangeLayers$ | async) === false &&\r\n      (hasVisibleAndNotInRangeLayers$ | async) === false &&\r\n      allowShowAllLegends\r\n    \"\r\n  >\r\n    {{ 'igo.geo.layer.legend.noLayersVisibleWithShowAllButton' | translate }}\r\n  </p>\r\n  <p\r\n    class=\"layers-empty mat-typography\"\r\n    *ngIf=\"\r\n      !showAllLegendsValue &&\r\n      (layersInUi$ | async).length &&\r\n      (hasVisibleOrInRangeLayers$ | async) === false &&\r\n      (hasVisibleAndNotInRangeLayers$ | async) &&\r\n      allowShowAllLegends\r\n    \"\r\n  >\r\n    {{\r\n      'igo.geo.layer.legend.noLayersVisibleWithShowAllButtonButZoom' | translate\r\n    }}\r\n  </p>\r\n  <p\r\n    class=\"layers-empty mat-typography\"\r\n    *ngIf=\"\r\n      (layersInUi$ | async).length &&\r\n      (hasVisibleOrInRangeLayers$ | async) === false &&\r\n      (hasVisibleAndNotInRangeLayers$ | async) === false &&\r\n      !allowShowAllLegends\r\n    \"\r\n  >\r\n    {{ 'igo.geo.layer.legend.noLayersVisible' | translate }}\r\n  </p>\r\n  <p\r\n    class=\"layers-empty mat-typography\"\r\n    *ngIf=\"\r\n      (layersInUi$ | async).length &&\r\n      (hasVisibleOrInRangeLayers$ | async) === false &&\r\n      (hasVisibleAndNotInRangeLayers$ | async) &&\r\n      !allowShowAllLegends\r\n    \"\r\n  >\r\n    {{ 'igo.geo.layer.legend.noLayersVisibleButZoom' | translate }}\r\n  </p>\r\n</div>\r\n", styles: [":host mat-slide-toggle{width:100%;padding:10px}:host mat-slide-toggle ::ng-deep .mdc-form-field{width:100%}:host mat-slide-toggle ::ng-deep .mdc-label{margin-left:0;width:calc(100% - 60px)}:host igo-list{display:contents}:host .layers-empty{text-align:justify;margin:10px}:host .layer-legend-list-container{max-height:100%;overflow:auto}\n"] }]
     }], function () { return []; }, { layers: [{
             type: Input
         }], excludeBaseLayers: [{
@@ -11225,7 +11225,7 @@ class LayerLegendComponent {
 }
 (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\">\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            matListItemIcon\n            igoCollapse\n            [target]=\"legend\"\n            [collapsed]=\"item.collapsed\"\n            (toggle)=\"toggleLegendItem($event, item)\"\n            svgIcon=\"chevron-up\"\n          >\n          </mat-icon>\n          <span matListItemTitle>{{ computeItemTitle(item) | async }} </span>\n        </mat-list-item>\n        <div\n          #legend\n          class=\"igo-layer-legend\"\n          [ngClass]=\"{ 'with-title': item.title }\"\n        >\n          <div *ngIf=\"currentStyle !== undefined\">\n            <mat-form-field>\n              <mat-select\n                tooltip-position=\"below\"\n                matTooltipShowDelay=\"500\"\n                [matTooltip]=\"'igo.geo.layer.legend.selectStyle' | translate\"\n                [(ngModel)]=\"currentStyle\"\n                (selectionChange)=\"onChangeStyle()\"\n              >\n                <mat-option *ngFor=\"let style of styles\" [value]=\"style.name\">{{\n                  style.title\n                }}</mat-option>\n              </mat-select>\n            </mat-form-field>\n          </div>\n          <div *ngIf=\"!item.collapsed\">\n            <div *ngIf=\"item.url\">\n              <img\n                igoImageError\n                *ngIf=\"item.imgGraphValue\"\n                hideError=\"true\"\n                #renderedLegend\n                id=\"{{ item.title }}\"\n                (load)=\"onLoadImage(item.title)\"\n                [src]=\"item.imgGraphValue\"\n                alt=\"{{ 'igo.geo.layer.legend.loadingLegendText' | translate }}\"\n              />\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</ng-container>\n", styles: [":host .igo-layer-legend.with-title{padding-left:18px}:host img{max-width:100%}:host 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%;animation:2s linear infinite spin}@-moz-document url-prefix(){:host img:after{margin-left:19px}}@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\">\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            matListItemIcon\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          >\r\n          </mat-icon>\r\n          <span matListItemTitle>{{ computeItemTitle(item) | async }} </span>\r\n        </mat-list-item>\r\n        <div\r\n          #legend\r\n          class=\"igo-layer-legend\"\r\n          [ngClass]=\"{ 'with-title': item.title }\"\r\n        >\r\n          <div *ngIf=\"currentStyle !== undefined\">\r\n            <mat-form-field>\r\n              <mat-select\r\n                tooltip-position=\"below\"\r\n                matTooltipShowDelay=\"500\"\r\n                [matTooltip]=\"'igo.geo.layer.legend.selectStyle' | translate\"\r\n                [(ngModel)]=\"currentStyle\"\r\n                (selectionChange)=\"onChangeStyle()\"\r\n              >\r\n                <mat-option *ngFor=\"let style of styles\" [value]=\"style.name\">{{\r\n                  style.title\r\n                }}</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\r\n                igoImageError\r\n                *ngIf=\"item.imgGraphValue\"\r\n                hideError=\"true\"\r\n                #renderedLegend\r\n                id=\"{{ item.title }}\"\r\n                (load)=\"onLoadImage(item.title)\"\r\n                [src]=\"item.imgGraphValue\"\r\n                alt=\"{{ 'igo.geo.layer.legend.loadingLegendText' | translate }}\"\r\n              />\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</ng-container>\r\n", styles: [":host .igo-layer-legend.with-title{padding-left:18px}:host img{max-width:100%}:host 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%;animation:2s linear infinite spin}@-moz-document url-prefix(){:host img:after{margin-left:19px}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
     }], function () { return [{ type: CapabilitiesService }, { type: i2.LanguageService }, { type: i2.ConfigService }, { type: i1.HttpClient }, { type: i0.ChangeDetectorRef }]; }, { updateLegendOnResolutionChange: [{
             type: Input
         }], renderedLegends: [{
@@ -11362,7 +11362,7 @@ class LayerListToolComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LayerListToolComponent, [{
         type: Component,
-        args: [{ selector: 'igo-layer-list-tool', changeDetection: ChangeDetectionStrategy.OnPush, template: "<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\"\n    [(ngModel)]=\"term\"\n  />\n  <button\n    *ngIf=\"term\"\n    matSuffix\n    mat-icon-button\n    aria-label=\"Clear\"\n    color=\"warn\"\n    (click)=\"clearTerm()\"\n  >\n    <mat-icon svgIcon=\"close\"></mat-icon>\n  </button>\n</mat-form-field>\n\n<div class=\"actions-container\">\n  <button\n    class=\"sort-alpha\"\n    [color]=\"sortAlpha ? 'warn' : 'primary'\"\n    mat-icon-button\n    [matTooltip]=\"\n      sortAlpha\n        ? ('igo.geo.layer.sortMapOrder' | translate)\n        : ('igo.geo.layer.sortAlphabetically' | translate)\n    \"\n    matTooltipShowDelay=\"500\"\n    (click)=\"toggleSortAlpha()\"\n  >\n    <mat-icon\n      [svgIcon]=\"sortAlpha ? 'sort-ascending' : 'sort-alphabetical-ascending'\"\n    ></mat-icon>\n  </button>\n\n  <button\n    class=\"only-visible\"\n    mat-icon-button\n    [disabled]=\"layersAreAllVisible && !onlyVisible\"\n    [color]=\"onlyVisible ? 'warn' : 'primary'\"\n    [matTooltip]=\"\n      onlyVisible\n        ? ('igo.geo.layer.resetLayersList' | translate)\n        : ('igo.geo.layer.subsetLayersListOnlyVisible' | translate)\n    \"\n    matTooltipShowDelay=\"500\"\n    (click)=\"toggleOnlyVisible()\"\n  >\n    <mat-icon\n      aria-hidden=\"false\"\n      matBadge=\"icon\"\n      igoMatBadgeIcon=\"eye\"\n      igoMatBadgeInverseColor=\"true\"\n      igoMatBadgeInheritColor=\"true\"\n      [svgIcon]=\"onlyVisible ? 'filter-remove' : 'filter'\"\n    >\n    </mat-icon>\n  </button>\n\n  <button\n    class=\"selection-mode\"\n    mat-icon-button\n    color=\"primary\"\n    [matTooltip]=\"\n      selectionMode\n        ? ('igo.geo.layer.deactivateSelectionMode' | translate)\n        : ('igo.geo.layer.activateSelectionMode' | translate)\n    \"\n    matTooltipShowDelay=\"500\"\n    (click)=\"toggleSelectionMode()\"\n  >\n    <mat-icon\n      [svgIcon]=\"\n        selectionMode\n          ? 'checkbox-multiple-marked-outline'\n          : 'checkbox-multiple-blank-outline'\n      \"\n    ></mat-icon>\n  </button>\n</div>\n", styles: [":host{display:flex;align-items:center;justify-content:space-between;padding:8px 12px}:host .inputFilter{width:calc(100% - 100px);max-width:200px}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){:host .inputFilter{width:50%}}:host ::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{display:none}\n"] }]
+        args: [{ selector: 'igo-layer-list-tool', changeDetection: ChangeDetectionStrategy.OnPush, template: "<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\"\r\n    [(ngModel)]=\"term\"\r\n  />\r\n  <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  >\r\n    <mat-icon svgIcon=\"close\"></mat-icon>\r\n  </button>\r\n</mat-form-field>\r\n\r\n<div class=\"actions-container\">\r\n  <button\r\n    class=\"sort-alpha\"\r\n    [color]=\"sortAlpha ? 'warn' : 'primary'\"\r\n    mat-icon-button\r\n    [matTooltip]=\"\r\n      sortAlpha\r\n        ? ('igo.geo.layer.sortMapOrder' | translate)\r\n        : ('igo.geo.layer.sortAlphabetically' | translate)\r\n    \"\r\n    matTooltipShowDelay=\"500\"\r\n    (click)=\"toggleSortAlpha()\"\r\n  >\r\n    <mat-icon\r\n      [svgIcon]=\"sortAlpha ? 'sort-ascending' : 'sort-alphabetical-ascending'\"\r\n    ></mat-icon>\r\n  </button>\r\n\r\n  <button\r\n    class=\"only-visible\"\r\n    mat-icon-button\r\n    [disabled]=\"layersAreAllVisible && !onlyVisible\"\r\n    [color]=\"onlyVisible ? 'warn' : 'primary'\"\r\n    [matTooltip]=\"\r\n      onlyVisible\r\n        ? ('igo.geo.layer.resetLayersList' | translate)\r\n        : ('igo.geo.layer.subsetLayersListOnlyVisible' | translate)\r\n    \"\r\n    matTooltipShowDelay=\"500\"\r\n    (click)=\"toggleOnlyVisible()\"\r\n  >\r\n    <mat-icon\r\n      aria-hidden=\"false\"\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    >\r\n    </mat-icon>\r\n  </button>\r\n\r\n  <button\r\n    class=\"selection-mode\"\r\n    mat-icon-button\r\n    color=\"primary\"\r\n    [matTooltip]=\"\r\n      selectionMode\r\n        ? ('igo.geo.layer.deactivateSelectionMode' | translate)\r\n        : ('igo.geo.layer.activateSelectionMode' | translate)\r\n    \"\r\n    matTooltipShowDelay=\"500\"\r\n    (click)=\"toggleSelectionMode()\"\r\n  >\r\n    <mat-icon\r\n      [svgIcon]=\"\r\n        selectionMode\r\n          ? 'checkbox-multiple-marked-outline'\r\n          : 'checkbox-multiple-blank-outline'\r\n      \"\r\n    ></mat-icon>\r\n  </button>\r\n</div>\r\n", styles: [":host{display:flex;align-items:center;justify-content:space-between;padding:8px 12px}:host .inputFilter{width:calc(100% - 100px);max-width:200px}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){:host .inputFilter{width:50%}}:host ::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{display:none}\n"] }]
     }], null, { layersAreAllVisible: [{
             type: Input
         }], floatLabel: [{
@@ -12397,7 +12397,7 @@ class LayerListComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LayerListComponent, [{
         type: Component,
-        args: [{ selector: 'igo-layer-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<igo-layer-list-tool\n  *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>\n</igo-layer-list-tool>\n\n<div *ngIf=\"selection\" class=\"select-all\">\n  <mat-checkbox\n    class=\"select-all-checkbox\"\n    [color]=\"!selectAllCheck && layersChecked.length > 0 ? 'accent' : 'primary'\"\n    (change)=\"selectAll()\"\n    [checked]=\"selectAllCheck\"\n    [indeterminate]=\"!selectAllCheck && layersChecked.length > 0\"\n  >\n    {{\n      selectAllCheck\n        ? ('igo.geo.layer.deselectAll' | translate)\n        : ('igo.geo.layer.selectAll' | translate)\n    }}\n  </mat-checkbox>\n</div>\n<mat-divider></mat-divider>\n\n<igo-list #igoList [navigation]=\"false\" [selection]=\"false\">\n  <ng-template ngFor let-layer let-i=\"index\" [ngForOf]=\"layers$ | async\">\n    <igo-layer-item\n      *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    >\n    </igo-layer-item>\n  </ng-template>\n</igo-list>\n\n<igo-panel\n  *ngIf=\"!selection && layerTool && activeLayer\"\n  class=\"igo-layer-actions-container\"\n  [title]=\"activeLayer.title\"\n>\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    >\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]=\"\n        sortAlpha || onlyVisible || keyword\n          ? ('igo.geo.layer.filterLowerLayer' | translate)\n          : ('igo.geo.layer.lowerLayer' | translate)\n      \"\n      [disabled]=\"lowerDisabled\"\n      (click)=\"moveActiveLayer(activeLayer, layerListDisplacement.Lower, true)\"\n    >\n      <mat-icon\n        aria-hidden=\"false\"\n        [matBadge]=\"sortAlpha || onlyVisible || keyword ? '!' : ''\"\n        matBadgeColor=\"warn\"\n        matBadgeSize=\"medium\"\n        [matBadgeHidden]=\"lowerDisabled\"\n        svgIcon=\"arrow-down\"\n      ></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]=\"\n        sortAlpha || onlyVisible || keyword\n          ? ('igo.geo.layer.filterRaiseLayer' | translate)\n          : ('igo.geo.layer.raiseLayer' | translate)\n      \"\n      [disabled]=\"raiseDisabled\"\n      (click)=\"moveActiveLayer(activeLayer, layerListDisplacement.Raise, true)\"\n    >\n      <mat-icon\n        aria-hidden=\"false\"\n        [matBadge]=\"sortAlpha || onlyVisible || keyword ? '!' : ''\"\n        matBadgeColor=\"warn\"\n        matBadgeSize=\"medium\"\n        [matBadgeHidden]=\"raiseDisabled\"\n        svgIcon=\"arrow-up\"\n      ></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    >\n      <mat-icon\n        aria-hidden=\"false\"\n        [matBadge]=\"badgeOpacity\"\n        matBadgeColor=\"primary\"\n        matBadgeSize=\"medium\"\n        svgIcon=\"opacity\"\n      ></mat-icon>\n    </button>\n\n    <mat-menu #opacityMenu=\"matMenu\" class=\"panel-opacity-menu\">\n      <mat-slider\n        id=\"opacity-slider\"\n        color=\"primary\"\n        discrete\n        step=\"5\"\n        [min]=\"0\"\n        [max]=\"100\"\n        [matTooltip]=\"'igo.geo.layer.opacity' | translate\"\n        (click)=\"$event.stopPropagation()\"\n        matTooltipShowDelay=\"500\"\n        tooltip-position=\"below\"\n        #ngSlider\n        ><input\n          matSliderThumb\n          [value]=\"opacity\"\n          (input)=\"\n            changeOpacity({\n              source: ngSliderThumb,\n              parent: ngSlider,\n              value: ngSliderThumb.value\n            })\n          \"\n          #ngSliderThumb=\"matSliderThumb\"\n        />\n      </mat-slider>\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    >\n      <mat-icon\n        matBadgeColor=\"primary\"\n        matBadgeSize=\"medium\"\n        svgIcon=\"magnify-scan\"\n      ></mat-icon>\n    </button>\n\n    <ng-container\n      igoLayerItemToolbar\n      [ngTemplateOutlet]=\"templateLayerToolbar\"\n      [ngTemplateOutletContext]=\"{ layer: activeLayer }\"\n    >\n    </ng-container>\n\n    <ng-content select=\"[igoLayerItemToolbar]\"></ng-content>\n  </div>\n</igo-panel>\n\n<igo-panel\n  *ngIf=\"selection && layers.length > 0\"\n  class=\"igo-layer-actions-container\"\n  [title]=\"'igo.geo.layer.tools' | translate\"\n>\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]=\"\n        isAllLayersRemovable(layersChecked)\n          ? ('igo.geo.layer.removeSelectedLayers' | translate)\n          : ('igo.geo.layer.removeSelectedLayersRestriction' | translate)\n      \"\n      (click)=\"removeLayers(layersChecked)\"\n    >\n      <mat-icon\n        aria-hidden=\"false\"\n        [matBadge]=\"'!'\"\n        matBadgeColor=\"warn\"\n        matBadgeSize=\"medium\"\n        [matBadgeHidden]=\"isAllLayersRemovable(layersChecked)\"\n        svgIcon=\"delete\"\n      ></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]=\"\n        statusSelectedLayersCheck === 'ALL_HIDDEN'\n          ? ('igo.geo.layer.showSelectedLayers' | translate)\n          : ('igo.geo.layer.hideSelectedLayers' | translate)\n      \"\n      (click)=\"toggleVisibility(layersChecked)\"\n    >\n      <mat-icon\n        [svgIcon]=\"\n          statusSelectedLayersCheck === 'ALL_HIDDEN' ? 'eye-off' : 'eye'\n        \"\n      ></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]=\"\n        sortAlpha || onlyVisible || keyword\n          ? ('igo.geo.layer.filterLowerLayer' | translate)\n          : ('igo.geo.layer.lowerLayer' | translate)\n      \"\n      [disabled]=\"lowerDisabledSelection\"\n      (click)=\"lowerLayers(layersChecked)\"\n    >\n      <mat-icon\n        aria-hidden=\"false\"\n        [matBadge]=\"sortAlpha || onlyVisible || keyword ? '!' : ''\"\n        matBadgeColor=\"warn\"\n        matBadgeSize=\"medium\"\n        [matBadgeHidden]=\"lowerDisabledSelection\"\n        svgIcon=\"arrow-down\"\n      ></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]=\"\n        sortAlpha || onlyVisible || keyword\n          ? ('igo.geo.layer.filterRaiseLayer' | translate)\n          : ('igo.geo.layer.raiseLayer' | translate)\n      \"\n      [disabled]=\"raiseDisabledSelection\"\n      (click)=\"raiseLayers(layersChecked)\"\n    >\n      <mat-icon\n        aria-hidden=\"false\"\n        [matBadge]=\"sortAlpha || onlyVisible || keyword ? '!' : ''\"\n        matBadgeColor=\"warn\"\n        matBadgeSize=\"medium\"\n        [matBadgeHidden]=\"raiseDisabledSelection\"\n        svgIcon=\"arrow-up\"\n      ></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    >\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        <!-- TODO: The 'tickInterval' property no longer exists -->\n        <mat-slider\n          *ngIf=\"layersChecked.length\"\n          id=\"opacity-slider\"\n          color=\"primary\"\n          thumbLabel\n          showTickMarks\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          ><input matSliderThumb />\n        </mat-slider>\n      </div>\n    </mat-menu>\n\n    <button\n      *ngIf=\"\n        layersChecked.length !== 0 && activeLayersExtentAreValid(layersChecked)\n      \"\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    >\n      <mat-icon svgIcon=\"magnify-scan\"></mat-icon>\n    </button>\n  </div>\n</igo-panel>\n", styles: [":host{display:flex;flex-direction:column;height:100%}:host igo-list{flex:1;padding-top:8px}:host mat-form-field.inputFilter{width:calc(100% - 100px);max-width:200px}:host .igo-layer-actions-container{padding:0 6px 0 4px}:host .igo-layer-actions-container>div{text-align:center}:host mat-list-item ::ng-deep .mdc-list-item__content{margin-bottom:10px}:host .igo-layer-button-group,:host .actions-buttons-multi{display:flex;align-items:center;flex-direction:row-reverse;overflow-x:auto;overflow-y:hidden}:host .igo-layer-button-group::-webkit-scrollbar,:host .actions-buttons-multi::-webkit-scrollbar{height:4px}:host .igo-layer-button-group::-webkit-scrollbar-track,:host .actions-buttons-multi::-webkit-scrollbar-track{background:#f1f1f1}:host .igo-layer-button-group::-webkit-scrollbar-thumb,:host .actions-buttons-multi::-webkit-scrollbar-thumb{background:#888}:host .igo-layer-button-group::-webkit-scrollbar-thumb:hover,:host .actions-buttons-multi::-webkit-scrollbar-thumb:hover{background:#555}:host .igo-layer-button-group{padding-top:5px}:host igo-panel{height:unset}:host .select-all{display:flex;align-items:center;height:48px;padding:0 16px}::ng-deep .panel-opacity-menu{overflow:visible!important}::ng-deep .panel-opacity-menu #opacity-slider{margin:0 16px}\n"] }]
+        args: [{ selector: 'igo-layer-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<igo-layer-list-tool\r\n  *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>\r\n</igo-layer-list-tool>\r\n\r\n<div *ngIf=\"selection\" class=\"select-all\">\r\n  <mat-checkbox\r\n    class=\"select-all-checkbox\"\r\n    [color]=\"!selectAllCheck && layersChecked.length > 0 ? 'accent' : 'primary'\"\r\n    (change)=\"selectAll()\"\r\n    [checked]=\"selectAllCheck\"\r\n    [indeterminate]=\"!selectAllCheck && layersChecked.length > 0\"\r\n  >\r\n    {{\r\n      selectAllCheck\r\n        ? ('igo.geo.layer.deselectAll' | translate)\r\n        : ('igo.geo.layer.selectAll' | translate)\r\n    }}\r\n  </mat-checkbox>\r\n</div>\r\n<mat-divider></mat-divider>\r\n\r\n<igo-list #igoList [navigation]=\"false\" [selection]=\"false\">\r\n  <ng-template ngFor let-layer let-i=\"index\" [ngForOf]=\"layers$ | async\">\r\n    <igo-layer-item\r\n      *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    >\r\n    </igo-layer-item>\r\n  </ng-template>\r\n</igo-list>\r\n\r\n<igo-panel\r\n  *ngIf=\"!selection && layerTool && activeLayer\"\r\n  class=\"igo-layer-actions-container\"\r\n  [title]=\"activeLayer.title\"\r\n>\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    >\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]=\"\r\n        sortAlpha || onlyVisible || keyword\r\n          ? ('igo.geo.layer.filterLowerLayer' | translate)\r\n          : ('igo.geo.layer.lowerLayer' | translate)\r\n      \"\r\n      [disabled]=\"lowerDisabled\"\r\n      (click)=\"moveActiveLayer(activeLayer, layerListDisplacement.Lower, true)\"\r\n    >\r\n      <mat-icon\r\n        aria-hidden=\"false\"\r\n        [matBadge]=\"sortAlpha || onlyVisible || keyword ? '!' : ''\"\r\n        matBadgeColor=\"warn\"\r\n        matBadgeSize=\"medium\"\r\n        [matBadgeHidden]=\"lowerDisabled\"\r\n        svgIcon=\"arrow-down\"\r\n      ></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]=\"\r\n        sortAlpha || onlyVisible || keyword\r\n          ? ('igo.geo.layer.filterRaiseLayer' | translate)\r\n          : ('igo.geo.layer.raiseLayer' | translate)\r\n      \"\r\n      [disabled]=\"raiseDisabled\"\r\n      (click)=\"moveActiveLayer(activeLayer, layerListDisplacement.Raise, true)\"\r\n    >\r\n      <mat-icon\r\n        aria-hidden=\"false\"\r\n        [matBadge]=\"sortAlpha || onlyVisible || keyword ? '!' : ''\"\r\n        matBadgeColor=\"warn\"\r\n        matBadgeSize=\"medium\"\r\n        [matBadgeHidden]=\"raiseDisabled\"\r\n        svgIcon=\"arrow-up\"\r\n      ></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    >\r\n      <mat-icon\r\n        aria-hidden=\"false\"\r\n        [matBadge]=\"badgeOpacity\"\r\n        matBadgeColor=\"primary\"\r\n        matBadgeSize=\"medium\"\r\n        svgIcon=\"opacity\"\r\n      ></mat-icon>\r\n    </button>\r\n\r\n    <mat-menu #opacityMenu=\"matMenu\" class=\"panel-opacity-menu\">\r\n      <mat-slider\r\n        id=\"opacity-slider\"\r\n        color=\"primary\"\r\n        discrete\r\n        step=\"5\"\r\n        [min]=\"0\"\r\n        [max]=\"100\"\r\n        [matTooltip]=\"'igo.geo.layer.opacity' | translate\"\r\n        (click)=\"$event.stopPropagation()\"\r\n        matTooltipShowDelay=\"500\"\r\n        tooltip-position=\"below\"\r\n        #ngSlider\r\n        ><input\r\n          matSliderThumb\r\n          [value]=\"opacity\"\r\n          (input)=\"\r\n            changeOpacity({\r\n              source: ngSliderThumb,\r\n              parent: ngSlider,\r\n              value: ngSliderThumb.value\r\n            })\r\n          \"\r\n          #ngSliderThumb=\"matSliderThumb\"\r\n        />\r\n      </mat-slider>\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    >\r\n      <mat-icon\r\n        matBadgeColor=\"primary\"\r\n        matBadgeSize=\"medium\"\r\n        svgIcon=\"magnify-scan\"\r\n      ></mat-icon>\r\n    </button>\r\n\r\n    <ng-container\r\n      igoLayerItemToolbar\r\n      [ngTemplateOutlet]=\"templateLayerToolbar\"\r\n      [ngTemplateOutletContext]=\"{ layer: activeLayer }\"\r\n    >\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\r\n  *ngIf=\"selection && layers.length > 0\"\r\n  class=\"igo-layer-actions-container\"\r\n  [title]=\"'igo.geo.layer.tools' | translate\"\r\n>\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]=\"\r\n        isAllLayersRemovable(layersChecked)\r\n          ? ('igo.geo.layer.removeSelectedLayers' | translate)\r\n          : ('igo.geo.layer.removeSelectedLayersRestriction' | translate)\r\n      \"\r\n      (click)=\"removeLayers(layersChecked)\"\r\n    >\r\n      <mat-icon\r\n        aria-hidden=\"false\"\r\n        [matBadge]=\"'!'\"\r\n        matBadgeColor=\"warn\"\r\n        matBadgeSize=\"medium\"\r\n        [matBadgeHidden]=\"isAllLayersRemovable(layersChecked)\"\r\n        svgIcon=\"delete\"\r\n      ></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]=\"\r\n        statusSelectedLayersCheck === 'ALL_HIDDEN'\r\n          ? ('igo.geo.layer.showSelectedLayers' | translate)\r\n          : ('igo.geo.layer.hideSelectedLayers' | translate)\r\n      \"\r\n      (click)=\"toggleVisibility(layersChecked)\"\r\n    >\r\n      <mat-icon\r\n        [svgIcon]=\"\r\n          statusSelectedLayersCheck === 'ALL_HIDDEN' ? 'eye-off' : 'eye'\r\n        \"\r\n      ></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]=\"\r\n        sortAlpha || onlyVisible || keyword\r\n          ? ('igo.geo.layer.filterLowerLayer' | translate)\r\n          : ('igo.geo.layer.lowerLayer' | translate)\r\n      \"\r\n      [disabled]=\"lowerDisabledSelection\"\r\n      (click)=\"lowerLayers(layersChecked)\"\r\n    >\r\n      <mat-icon\r\n        aria-hidden=\"false\"\r\n        [matBadge]=\"sortAlpha || onlyVisible || keyword ? '!' : ''\"\r\n        matBadgeColor=\"warn\"\r\n        matBadgeSize=\"medium\"\r\n        [matBadgeHidden]=\"lowerDisabledSelection\"\r\n        svgIcon=\"arrow-down\"\r\n      ></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]=\"\r\n        sortAlpha || onlyVisible || keyword\r\n          ? ('igo.geo.layer.filterRaiseLayer' | translate)\r\n          : ('igo.geo.layer.raiseLayer' | translate)\r\n      \"\r\n      [disabled]=\"raiseDisabledSelection\"\r\n      (click)=\"raiseLayers(layersChecked)\"\r\n    >\r\n      <mat-icon\r\n        aria-hidden=\"false\"\r\n        [matBadge]=\"sortAlpha || onlyVisible || keyword ? '!' : ''\"\r\n        matBadgeColor=\"warn\"\r\n        matBadgeSize=\"medium\"\r\n        [matBadgeHidden]=\"raiseDisabledSelection\"\r\n        svgIcon=\"arrow-up\"\r\n      ></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    >\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        <!-- TODO: The 'tickInterval' property no longer exists -->\r\n        <mat-slider\r\n          *ngIf=\"layersChecked.length\"\r\n          id=\"opacity-slider\"\r\n          color=\"primary\"\r\n          thumbLabel\r\n          showTickMarks\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          ><input matSliderThumb />\r\n        </mat-slider>\r\n      </div>\r\n    </mat-menu>\r\n\r\n    <button\r\n      *ngIf=\"\r\n        layersChecked.length !== 0 && activeLayersExtentAreValid(layersChecked)\r\n      \"\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    >\r\n      <mat-icon svgIcon=\"magnify-scan\"></mat-icon>\r\n    </button>\r\n  </div>\r\n</igo-panel>\r\n", styles: [":host{display:flex;flex-direction:column;height:100%}:host igo-list{flex:1;padding-top:8px}:host mat-form-field.inputFilter{width:calc(100% - 100px);max-width:200px}:host .igo-layer-actions-container{padding:0 6px 0 4px}:host .igo-layer-actions-container>div{text-align:center}:host mat-list-item ::ng-deep .mdc-list-item__content{margin-bottom:10px}:host .igo-layer-button-group,:host .actions-buttons-multi{display:flex;align-items:center;flex-direction:row-reverse;overflow-x:auto;overflow-y:hidden}:host .igo-layer-button-group::-webkit-scrollbar,:host .actions-buttons-multi::-webkit-scrollbar{height:4px}:host .igo-layer-button-group::-webkit-scrollbar-track,:host .actions-buttons-multi::-webkit-scrollbar-track{background:#f1f1f1}:host .igo-layer-button-group::-webkit-scrollbar-thumb,:host .actions-buttons-multi::-webkit-scrollbar-thumb{background:#888}:host .igo-layer-button-group::-webkit-scrollbar-thumb:hover,:host .actions-buttons-multi::-webkit-scrollbar-thumb:hover{background:#555}:host .igo-layer-button-group{padding-top:5px}:host igo-panel{height:unset}:host .select-all{display:flex;align-items:center;height:48px;padding:0 16px}::ng-deep .panel-opacity-menu{overflow:visible!important}::ng-deep .panel-opacity-menu #opacity-slider{margin:0 16px}\n"] }]
     }], function () { return [{ type: i0.ElementRef }]; }, { templateLayerToolbar: [{
             type: ContentChild,
             args: ['igoLayerItemToolbar', /* TODO: add static flag */ {}]
@@ -13094,7 +13094,7 @@ class TrackFeatureButtonComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TrackFeatureButtonComponent, [{
         type: Component,
-        args: [{ selector: 'igo-track-feature-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  *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>\n  <mat-icon svgIcon=\"crosshairs-gps\"></mat-icon>\n</button>\n" }]
+        args: [{ selector: 'igo-track-feature-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\r\n  *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>\r\n  <mat-icon svgIcon=\"crosshairs-gps\"></mat-icon>\r\n</button>\r\n" }]
     }], function () { return []; }, { layer: [{
             type: Input
         }], trackFeature: [{
@@ -13338,7 +13338,7 @@ class MetadataButtonComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MetadataButtonComponent, [{
         type: Component,
-        args: [{ selector: 'igo-metadata-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  *ngIf=\"\n    (options && options.metadata && options.metadata.url) ||\n    (options && options.metadata && options.metadata.abstract)\n  \"\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>\n  <mat-icon svgIcon=\"information-outline\"></mat-icon>\n</button>\n" }]
+        args: [{ selector: 'igo-metadata-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\r\n  *ngIf=\"\r\n    (options && options.metadata && options.metadata.url) ||\r\n    (options && options.metadata && options.metadata.abstract)\r\n  \"\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>\r\n  <mat-icon svgIcon=\"information-outline\"></mat-icon>\r\n</button>\r\n" }]
     }], function () { return [{ type: MetadataService }, { type: i1$3.MatDialog }]; }, { layer: [{
             type: Input
         }], color: [{
@@ -13370,7 +13370,7 @@ class MetadataAbstractComponent {
 }
 (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>\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: [":host{position:relative;display:block}:host .close-button{top:5px;right:5px;padding:7px;line-height:10px;position:absolute!important;min-width:auto}\n"] }]
+        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: [":host{position:relative;display:block}:host .close-button{top:5px;right:5px;padding:7px;line-height:10px;position:absolute!important;min-width:auto}\n"] }]
     }], function () { return [{ type: undefined, decorators: [{
                 type: Inject,
                 args: [MAT_DIALOG_DATA]
@@ -16383,7 +16383,7 @@ class CatalogBrowserComponent {
 }
 (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\">\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        [map]=\"map\"\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      >\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        [map]=\"map\"\n        [resolution]=\"resolution$ | async\"\n        [catalogAllowLegend]=\"catalogAllowLegend\"\n        [added]=\"store.state.get(item).added\"\n        (addedChange)=\"onLayerAddedChange($event)\"\n      >\n      </igo-catalog-browser-layer>\n    </ng-container>\n  </ng-template>\n</igo-list>\n" }]
+        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        [map]=\"map\"\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      >\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        [map]=\"map\"\r\n        [resolution]=\"resolution$ | async\"\r\n        [catalogAllowLegend]=\"catalogAllowLegend\"\r\n        [added]=\"store.state.get(item).added\"\r\n        (addedChange)=\"onLayerAddedChange($event)\"\r\n      >\r\n      </igo-catalog-browser-layer>\r\n    </ng-container>\r\n  </ng-template>\r\n</igo-list>\r\n" }]
     }], function () { return [{ type: LayerService }, { type: i0.ChangeDetectorRef }]; }, { catalogAllowLegend: [{
             type: Input
         }], catalog: [{
@@ -16652,7 +16652,7 @@ class AddCatalogDialogComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AddCatalogDialogComponent, [{
         type: Component,
-        args: [{ selector: 'igo-add-catalog-dialog', template: "<h1 mat-dialog-title class=\"mat-typography\">\n  {{ 'igo.geo.catalog.library.addTitle' | translate }}\n</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\n          type=\"text\"\n          formControlName=\"title\"\n          placeholder=\"{{ 'igo.geo.printForm.title' | translate }}\"\n          matInput\n          [matAutocomplete]=\"auto2\"\n        />\n        <mat-autocomplete\n          #auto2=\"matAutocomplete\"\n          (optionSelected)=\"changeUrlOrTitle($event.option.value)\"\n        >\n          <mat-option\n            *ngFor=\"let predefinedCatalog of predefinedCatalogsList$ | async\"\n            matTooltipShowDelay=\"500\"\n            [matTooltip]=\"predefinedCatalog.title\"\n            [value]=\"predefinedCatalog\"\n          >\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\n          type=\"text\"\n          formControlName=\"url\"\n          placeholder=\"URL\"\n          matInput\n          [matAutocomplete]=\"auto\"\n        />\n        <mat-autocomplete\n          #auto=\"matAutocomplete\"\n          (optionSelected)=\"changeUrlOrTitle($event.option.value)\"\n        >\n          <mat-option\n            *ngFor=\"let predefinedCatalog of predefinedCatalogsList$ | async\"\n            matTooltipShowDelay=\"500\"\n            [matTooltip]=\"predefinedCatalog.url\"\n            [value]=\"predefinedCatalog\"\n          >\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 formControlName=\"type\" placeholder=\"Type\">\n          <mat-option\n            *ngFor=\"let type of typeCapabilities\"\n            [value]=\"type\"\n            (click)=\"$event.stopPropagation()\"\n          >\n            <p matListItemTitle>{{ 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\">\n      {{\n        languageService.translate.instant(\n          'igo.geo.catalog.externalProvider.unavailableWithEmail',\n          { value: addedCatalog.url, email: emailAddress }\n        )\n      }}\n    </p>\n  </span>\n  <span *ngIf=\"error && addedCatalog && !emailAddress\">\n    <p class=\"error\">\n      {{\n        languageService.translate.instant('igo.geo.catalog.unavailable', {\n          value: addedCatalog.url\n        })\n      }}\n    </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 mat-raised-button type=\"button\" (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    >\n      {{ 'igo.geo.catalog.library.add' | translate }}\n    </button>\n  </div>\n</div>\n", 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\">\r\n  {{ 'igo.geo.catalog.library.addTitle' | translate }}\r\n</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\r\n          type=\"text\"\r\n          formControlName=\"title\"\r\n          placeholder=\"{{ 'igo.geo.printForm.title' | translate }}\"\r\n          matInput\r\n          [matAutocomplete]=\"auto2\"\r\n        />\r\n        <mat-autocomplete\r\n          #auto2=\"matAutocomplete\"\r\n          (optionSelected)=\"changeUrlOrTitle($event.option.value)\"\r\n        >\r\n          <mat-option\r\n            *ngFor=\"let predefinedCatalog of predefinedCatalogsList$ | async\"\r\n            matTooltipShowDelay=\"500\"\r\n            [matTooltip]=\"predefinedCatalog.title\"\r\n            [value]=\"predefinedCatalog\"\r\n          >\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\r\n          type=\"text\"\r\n          formControlName=\"url\"\r\n          placeholder=\"URL\"\r\n          matInput\r\n          [matAutocomplete]=\"auto\"\r\n        />\r\n        <mat-autocomplete\r\n          #auto=\"matAutocomplete\"\r\n          (optionSelected)=\"changeUrlOrTitle($event.option.value)\"\r\n        >\r\n          <mat-option\r\n            *ngFor=\"let predefinedCatalog of predefinedCatalogsList$ | async\"\r\n            matTooltipShowDelay=\"500\"\r\n            [matTooltip]=\"predefinedCatalog.url\"\r\n            [value]=\"predefinedCatalog\"\r\n          >\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 formControlName=\"type\" placeholder=\"Type\">\r\n          <mat-option\r\n            *ngFor=\"let type of typeCapabilities\"\r\n            [value]=\"type\"\r\n            (click)=\"$event.stopPropagation()\"\r\n          >\r\n            <p matListItemTitle>{{ 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\">\r\n      {{\r\n        languageService.translate.instant(\r\n          'igo.geo.catalog.externalProvider.unavailableWithEmail',\r\n          { value: addedCatalog.url, email: emailAddress }\r\n        )\r\n      }}\r\n    </p>\r\n  </span>\r\n  <span *ngIf=\"error && addedCatalog && !emailAddress\">\r\n    <p class=\"error\">\r\n      {{\r\n        languageService.translate.instant('igo.geo.catalog.unavailable', {\r\n          value: addedCatalog.url\r\n        })\r\n      }}\r\n    </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 mat-raised-button type=\"button\" (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    >\r\n      {{ 'igo.geo.catalog.library.add' | translate }}\r\n    </button>\r\n  </div>\r\n</div>\r\n", 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$1.UntypedFormBuilder }, { type: i2.LanguageService }, { type: i2.ConfigService }, { type: i1$3.MatDialogRef }, { type: undefined, decorators: [{
                 type: Optional
             }, {
@@ -16729,7 +16729,7 @@ class CatalogLibaryItemComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CatalogLibaryItemComponent, [{
         type: Component,
-        args: [{ selector: 'igo-catalog-library-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-list-item>\n  <span matListItemTitle>\n    {{ title }}\n  </span>\n  <div matListItemMeta>\n    <mat-icon\n      *ngIf=\"catalog.externalProvider\"\n      matListItemIcon\n      class=\"igo-external-provider\"\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    >\n    </mat-icon>\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    >\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    >\n      <mat-icon svgIcon=\"blank\"></mat-icon>\n    </button>\n  </div>\n</mat-list-item>\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>\r\n  <span matListItemTitle>\r\n    {{ title }}\r\n  </span>\r\n  <div matListItemMeta>\r\n    <mat-icon\r\n      *ngIf=\"catalog.externalProvider\"\r\n      matListItemIcon\r\n      class=\"igo-external-provider\"\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    >\r\n    </mat-icon>\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    >\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    >\r\n      <mat-icon svgIcon=\"blank\"></mat-icon>\r\n    </button>\r\n  </div>\r\n</mat-list-item>\r\n", styles: [".igo-blank{cursor:pointer}.igo-external-provider{cursor:help}\n"] }]
     }], null, { catalog: [{
             type: Input
         }], map: [{
@@ -16940,7 +16940,7 @@ class CatalogLibaryComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CatalogLibaryComponent, [{
         type: Component,
-        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    >\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  >\n    {{ 'igo.geo.catalog.library.addBtn' | translate }}\n    <mat-icon svgIcon=\"earth-plus\"></mat-icon>\n  </button>\n</div>\n", styles: [":host igo-list{height:auto}:host .btnAddCatalog{justify-content:center;display:flex;margin:30px 0}\n"] }]
+        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    >\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  >\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: [":host igo-list{height:auto}:host .btnAddCatalog{justify-content:center;display:flex;margin:30px 0}\n"] }]
     }], function () { return [{ type: CapabilitiesService }, { type: i2.MessageService }, { type: i2.StorageService }, { type: i1$3.MatDialog }]; }, { store: [{
             type: Input
         }], map: [{
@@ -18781,7 +18781,7 @@ class PrintFormComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrintFormComponent, [{
         type: Component,
-        args: [{ selector: 'igo-print-form', template: "<form class=\"igo-form\" [formGroup]=\"form\">\n  <div class=\"igo-input-container\">\n    <mat-form-field>\n      <mat-label>{{ 'igo.geo.printForm.title' | translate }}</mat-label>\n      <input\n        matInput\n        formControlName=\"title\"\n        placeholder=\"{{ 'igo.geo.printForm.title' | translate }}\"\n      />\n      <mat-error *ngIf=\"titleField.errors?.maxlength\">{{\n        'igo.geo.formValidation.maxLength'\n          | translate\n            : {\n                column: 'igo.geo.printForm.title' | translate,\n                value: 130\n              }\n      }}</mat-error>\n    </mat-form-field>\n  </div>\n  <div class=\"igo-input-container\">\n    <mat-form-field>\n      <mat-label>{{ 'igo.geo.printForm.subtitle' | translate }}</mat-label>\n      <input\n        matInput\n        formControlName=\"subtitle\"\n        placeholder=\"{{ 'igo.geo.printForm.subtitle' | translate }}\"\n      />\n      <mat-error *ngIf=\"subtitleField.errors?.maxlength\">{{\n        'igo.geo.formValidation.maxLength'\n          | translate\n            : {\n                column: 'igo.geo.printForm.subtitle' | translate,\n                value: 120\n              }\n      }}</mat-error>\n    </mat-form-field>\n  </div>\n  <div class=\"igo-input-container\">\n    <mat-form-field>\n      <mat-label>{{ 'igo.geo.printForm.comment' | translate }}</mat-label>\n      <input\n        matInput\n        formControlName=\"comment\"\n        placeholder=\"{{ 'igo.geo.printForm.comment' | translate }}\"\n      />\n      <mat-error *ngIf=\"commentField.errors?.maxlength\">{{\n        'igo.geo.formValidation.maxLength'\n          | translate\n            : {\n                column: 'igo.geo.printForm.comment' | translate,\n                value: maxLength\n              }\n      }}</mat-error>\n    </mat-form-field>\n  </div>\n\n  <div class=\"igo-input-container slide-toggle-container\">\n    <div class=\"print-slide-toggle-container\">\n      <mat-slide-toggle\n        class=\"print-option\"\n        formControlName=\"showProjection\"\n        [labelPosition]=\"'before'\"\n      >\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      >\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      >\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-label>{{\n        'igo.geo.printForm.legendPosition' | translate\n      }}</mat-label>\n      <mat-select\n        formControlName=\"legendPosition\"\n        placeholder=\"{{ 'igo.geo.printForm.legendPosition' | translate }}\"\n      >\n        <mat-option\n          *ngFor=\"let legendPosition of legendPositions | keyvalue\"\n          [value]=\"legendPosition.key\"\n        >\n          <ng-container\n            *ngIf=\"!['newpage', 'newimage'].includes(legendPosition.value)\"\n          >\n            {{\n              'igo.geo.printForm.legendPositions.' + legendPosition.value\n                | translate\n            }}\n          </ng-container>\n\n          <ng-container\n            *ngIf=\"['newpage', 'newimage'].includes(legendPosition.value)\"\n          >\n            {{\n              (outputFormat === 'Pdf'\n                ? 'igo.geo.printForm.legendPositions.newpage'\n                : 'igo.geo.printForm.legendPositions.newimage'\n              ) | translate\n            }}\n          </ng-container>\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.printForm.outputFormat' | translate }}</mat-label>\n      <mat-select\n        (selectionChange)=\"toggleImageSaveProp()\"\n        formControlName=\"outputFormat\"\n        placeholder=\"{{ 'igo.geo.printForm.outputFormat' | translate }}\"\n      >\n        <mat-option\n          *ngFor=\"let outputFormat of outputFormats | keyvalue\"\n          [value]=\"outputFormat.key\"\n        >\n          {{ outputFormat.value }}\n        </mat-option>\n      </mat-select>\n    </mat-form-field>\n  </div>\n\n  <div\n    class=\"igo-input-container\"\n    [style.display]=\"isPrintService ? 'block' : 'none'\"\n  >\n    <mat-form-field>\n      <mat-label>{{ 'igo.geo.printForm.paperFormat' | translate }}</mat-label>\n      <mat-select\n        (selectionChange)=\"changeCommentLength()\"\n        formControlName=\"paperFormat\"\n        placeholder=\"{{ 'igo.geo.printForm.paperFormat' | translate }}\"\n      >\n        <mat-option\n          *ngFor=\"let paperFormat of paperFormats | keyvalue\"\n          [value]=\"paperFormat.key\"\n        >\n          {{\n            'igo.geo.printForm.paperFormats.' + paperFormat.value | translate\n          }}\n        </mat-option>\n      </mat-select>\n    </mat-form-field>\n  </div>\n\n  <div\n    class=\"igo-input-container\"\n    [style.display]=\"isPrintService ? 'none' : 'block'\"\n  >\n    <mat-form-field>\n      <mat-label>{{ 'igo.geo.printForm.imageFormat' | translate }}</mat-label>\n      <mat-select\n        formControlName=\"imageFormat\"\n        placeholder=\"{{ 'igo.geo.printForm.imageFormat' | translate }}\"\n      >\n        <mat-option\n          *ngFor=\"let imageFormat of imageFormats | keyvalue\"\n          [value]=\"imageFormat.key\"\n        >\n          {{ imageFormat.value }}\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.printForm.resolution' | translate }}</mat-label>\n      <mat-select\n        formControlName=\"resolution\"\n        placeholder=\"{{ 'igo.geo.printForm.resolution' | translate }}\"\n      >\n        <mat-option\n          *ngFor=\"let resolution of resolutions | keyvalue\"\n          [value]=\"resolution.key\"\n        >\n          {{ resolution.value + ' PPI' }}\n        </mat-option>\n      </mat-select>\n    </mat-form-field>\n  </div>\n\n  <div\n    class=\"igo-input-container\"\n    [style.display]=\"isPrintService ? 'block' : 'none'\"\n  >\n    <mat-form-field>\n      <mat-label>{{ 'igo.geo.printForm.orientation' | translate }}</mat-label>\n      <mat-select\n        (selectionChange)=\"changeCommentLength()\"\n        formControlName=\"orientation\"\n        placeholder=\"{{ 'igo.geo.printForm.orientation' | translate }}\"\n      >\n        <mat-option\n          *ngFor=\"let orientation of orientations | keyvalue\"\n          [value]=\"orientation.key\"\n        >\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    >\n      {{ 'igo.geo.printForm.saveBtn' | translate }}\n    </button>\n  </div>\n</form>\n", styles: [":host mat-form-field{width:100%}:host .slide-toggle-container{margin-bottom:16px}:host .print-slide-toggle-container mat-slide-toggle{width:100%;padding:0 8px}:host .print-slide-toggle-container mat-slide-toggle ::ng-deep .mdc-form-field{width:100%}:host .print-slide-toggle-container mat-slide-toggle ::ng-deep .mdc-label{margin-left:0;width:calc(100% - 60px)}:host .print-option{display:block;margin-bottom:12px}:host .igo-form{padding:10px 5px 5px}:host .igo-form-button-group{text-align:center}\n"] }]
+        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      <mat-label>{{ 'igo.geo.printForm.title' | translate }}</mat-label>\r\n      <input\r\n        matInput\r\n        formControlName=\"title\"\r\n        placeholder=\"{{ 'igo.geo.printForm.title' | translate }}\"\r\n      />\r\n      <mat-error *ngIf=\"titleField.errors?.maxlength\">{{\r\n        'igo.geo.formValidation.maxLength'\r\n          | translate\r\n            : {\r\n                column: 'igo.geo.printForm.title' | translate,\r\n                value: 130\r\n              }\r\n      }}</mat-error>\r\n    </mat-form-field>\r\n  </div>\r\n  <div class=\"igo-input-container\">\r\n    <mat-form-field>\r\n      <mat-label>{{ 'igo.geo.printForm.subtitle' | translate }}</mat-label>\r\n      <input\r\n        matInput\r\n        formControlName=\"subtitle\"\r\n        placeholder=\"{{ 'igo.geo.printForm.subtitle' | translate }}\"\r\n      />\r\n      <mat-error *ngIf=\"subtitleField.errors?.maxlength\">{{\r\n        'igo.geo.formValidation.maxLength'\r\n          | translate\r\n            : {\r\n                column: 'igo.geo.printForm.subtitle' | translate,\r\n                value: 120\r\n              }\r\n      }}</mat-error>\r\n    </mat-form-field>\r\n  </div>\r\n  <div class=\"igo-input-container\">\r\n    <mat-form-field>\r\n      <mat-label>{{ 'igo.geo.printForm.comment' | translate }}</mat-label>\r\n      <input\r\n        matInput\r\n        formControlName=\"comment\"\r\n        placeholder=\"{{ 'igo.geo.printForm.comment' | translate }}\"\r\n      />\r\n      <mat-error *ngIf=\"commentField.errors?.maxlength\">{{\r\n        'igo.geo.formValidation.maxLength'\r\n          | translate\r\n            : {\r\n                column: 'igo.geo.printForm.comment' | translate,\r\n                value: maxLength\r\n              }\r\n      }}</mat-error>\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <div class=\"igo-input-container slide-toggle-container\">\r\n    <div class=\"print-slide-toggle-container\">\r\n      <mat-slide-toggle\r\n        class=\"print-option\"\r\n        formControlName=\"showProjection\"\r\n        [labelPosition]=\"'before'\"\r\n      >\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      >\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      >\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-label>{{\r\n        'igo.geo.printForm.legendPosition' | translate\r\n      }}</mat-label>\r\n      <mat-select\r\n        formControlName=\"legendPosition\"\r\n        placeholder=\"{{ 'igo.geo.printForm.legendPosition' | translate }}\"\r\n      >\r\n        <mat-option\r\n          *ngFor=\"let legendPosition of legendPositions | keyvalue\"\r\n          [value]=\"legendPosition.key\"\r\n        >\r\n          <ng-container\r\n            *ngIf=\"!['newpage', 'newimage'].includes(legendPosition.value)\"\r\n          >\r\n            {{\r\n              'igo.geo.printForm.legendPositions.' + legendPosition.value\r\n                | translate\r\n            }}\r\n          </ng-container>\r\n\r\n          <ng-container\r\n            *ngIf=\"['newpage', 'newimage'].includes(legendPosition.value)\"\r\n          >\r\n            {{\r\n              (outputFormat === 'Pdf'\r\n                ? 'igo.geo.printForm.legendPositions.newpage'\r\n                : 'igo.geo.printForm.legendPositions.newimage'\r\n              ) | translate\r\n            }}\r\n          </ng-container>\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.printForm.outputFormat' | translate }}</mat-label>\r\n      <mat-select\r\n        (selectionChange)=\"toggleImageSaveProp()\"\r\n        formControlName=\"outputFormat\"\r\n        placeholder=\"{{ 'igo.geo.printForm.outputFormat' | translate }}\"\r\n      >\r\n        <mat-option\r\n          *ngFor=\"let outputFormat of outputFormats | keyvalue\"\r\n          [value]=\"outputFormat.key\"\r\n        >\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\r\n    class=\"igo-input-container\"\r\n    [style.display]=\"isPrintService ? 'block' : 'none'\"\r\n  >\r\n    <mat-form-field>\r\n      <mat-label>{{ 'igo.geo.printForm.paperFormat' | translate }}</mat-label>\r\n      <mat-select\r\n        (selectionChange)=\"changeCommentLength()\"\r\n        formControlName=\"paperFormat\"\r\n        placeholder=\"{{ 'igo.geo.printForm.paperFormat' | translate }}\"\r\n      >\r\n        <mat-option\r\n          *ngFor=\"let paperFormat of paperFormats | keyvalue\"\r\n          [value]=\"paperFormat.key\"\r\n        >\r\n          {{\r\n            'igo.geo.printForm.paperFormats.' + paperFormat.value | translate\r\n          }}\r\n        </mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <div\r\n    class=\"igo-input-container\"\r\n    [style.display]=\"isPrintService ? 'none' : 'block'\"\r\n  >\r\n    <mat-form-field>\r\n      <mat-label>{{ 'igo.geo.printForm.imageFormat' | translate }}</mat-label>\r\n      <mat-select\r\n        formControlName=\"imageFormat\"\r\n        placeholder=\"{{ 'igo.geo.printForm.imageFormat' | translate }}\"\r\n      >\r\n        <mat-option\r\n          *ngFor=\"let imageFormat of imageFormats | keyvalue\"\r\n          [value]=\"imageFormat.key\"\r\n        >\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\">\r\n    <mat-form-field>\r\n      <mat-label>{{ 'igo.geo.printForm.resolution' | translate }}</mat-label>\r\n      <mat-select\r\n        formControlName=\"resolution\"\r\n        placeholder=\"{{ 'igo.geo.printForm.resolution' | translate }}\"\r\n      >\r\n        <mat-option\r\n          *ngFor=\"let resolution of resolutions | keyvalue\"\r\n          [value]=\"resolution.key\"\r\n        >\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\r\n    class=\"igo-input-container\"\r\n    [style.display]=\"isPrintService ? 'block' : 'none'\"\r\n  >\r\n    <mat-form-field>\r\n      <mat-label>{{ 'igo.geo.printForm.orientation' | translate }}</mat-label>\r\n      <mat-select\r\n        (selectionChange)=\"changeCommentLength()\"\r\n        formControlName=\"orientation\"\r\n        placeholder=\"{{ 'igo.geo.printForm.orientation' | translate }}\"\r\n      >\r\n        <mat-option\r\n          *ngFor=\"let orientation of orientations | keyvalue\"\r\n          [value]=\"orientation.key\"\r\n        >\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    >\r\n      {{ 'igo.geo.printForm.saveBtn' | translate }}\r\n    </button>\r\n  </div>\r\n</form>\r\n", styles: [":host mat-form-field{width:100%}:host .slide-toggle-container{margin-bottom:16px}:host .print-slide-toggle-container mat-slide-toggle{width:100%;padding:0 8px}:host .print-slide-toggle-container mat-slide-toggle ::ng-deep .mdc-form-field{width:100%}:host .print-slide-toggle-container mat-slide-toggle ::ng-deep .mdc-label{margin-left:0;width:calc(100% - 60px)}:host .print-option{display:block;margin-bottom:12px}:host .igo-form{padding:10px 5px 5px}:host .igo-form-button-group{text-align:center}\n"] }]
     }], function () { return [{ type: i2$1.UntypedFormBuilder }]; }, { disabled$: [{
             type: Input
         }], imageFormat: [{
@@ -18910,7 +18910,7 @@ class PrintComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrintComponent, [{
         type: Component,
-        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>\n</igo-print-form>\n" }]
+        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>\r\n</igo-print-form>\r\n" }]
     }], function () { return [{ type: PrintService }]; }, { map: [{
             type: Input
         }], outputFormat: [{
@@ -19957,7 +19957,7 @@ class DirectionsButtonsComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DirectionsButtonsComponent, [{
         type: Component,
-        args: [{ selector: 'igo-directions-buttons', template: "<div class=\"igo-form-button-group\">\n  <button\n    mat-icon-button\n    tooltip-position=\"below\"\n    matTooltipShowDelay=\"500\"\n    [matTooltip]=\"'igo.geo.directionsForm.addStop' | translate\"\n    color=\"primary\"\n    (click)=\"addStop()\"\n  >\n    <mat-icon svgIcon=\"map-marker-plus\"></mat-icon>\n  </button>\n  <button\n    mat-icon-button\n    tooltip-position=\"below\"\n    matTooltipShowDelay=\"500\"\n    *ngIf=\"\n      (routesFeatureStore.count$ | async) >= 1 ||\n      (stopsStore.count$ | async) >= 1\n    \"\n    [matTooltip]=\"'igo.geo.directionsForm.resetDirectionsBtn' | translate\"\n    color=\"warn\"\n    (click)=\"resetStops()\"\n  >\n    <mat-icon svgIcon=\"file-restore\"></mat-icon>\n  </button>\n  <button\n    mat-icon-button\n    tooltip-position=\"below\"\n    matTooltipShowDelay=\"500\"\n    *ngIf=\"(routesFeatureStore.count$ | async) >= 1\"\n    (click)=\"zoomRoute()\"\n    [matTooltip]=\"'igo.geo.directionsForm.zoomRoute' | translate\"\n    color=\"primary\"\n  >\n    <mat-icon svgIcon=\"magnify-plus-outline\"></mat-icon>\n  </button>\n  <button\n    mat-icon-button\n    tooltip-position=\"below\"\n    matTooltipShowDelay=\"500\"\n    *ngIf=\"(routesFeatureStore.count$ | async) >= 1\"\n    (click)=\"copyDirectionsToClipboard()\"\n    [matTooltip]=\"'igo.geo.directionsForm.copy' | translate\"\n    color=\"primary\"\n  >\n    <mat-icon svgIcon=\"content-copy\"></mat-icon>\n  </button>\n  <button\n    mat-icon-button\n    tooltip-position=\"below\"\n    matTooltipShowDelay=\"500\"\n    *ngIf=\"(routesFeatureStore.count$ | async) >= 1\"\n    (click)=\"copyLinkToClipboard()\"\n    [matTooltip]=\"'igo.geo.directionsForm.link' | translate\"\n    color=\"primary\"\n  >\n    <mat-icon svgIcon=\"link\"></mat-icon>\n  </button>\n\n  <button\n    mat-icon-button\n    tooltip-position=\"below\"\n    matTooltipShowDelay=\"500\"\n    *ngIf=\"(routesFeatureStore.count$ | async) >= 1\"\n    (click)=\"printDirections()\"\n    [disabled]=\"disabled$ | async\"\n    [matTooltip]=\"'igo.geo.directionsForm.print' | translate\"\n    color=\"primary\"\n  >\n    <mat-icon svgIcon=\"printer\"></mat-icon>\n  </button>\n</div>\n" }]
+        args: [{ selector: 'igo-directions-buttons', template: "<div class=\"igo-form-button-group\">\r\n  <button\r\n    mat-icon-button\r\n    tooltip-position=\"below\"\r\n    matTooltipShowDelay=\"500\"\r\n    [matTooltip]=\"'igo.geo.directionsForm.addStop' | translate\"\r\n    color=\"primary\"\r\n    (click)=\"addStop()\"\r\n  >\r\n    <mat-icon svgIcon=\"map-marker-plus\"></mat-icon>\r\n  </button>\r\n  <button\r\n    mat-icon-button\r\n    tooltip-position=\"below\"\r\n    matTooltipShowDelay=\"500\"\r\n    *ngIf=\"\r\n      (routesFeatureStore.count$ | async) >= 1 ||\r\n      (stopsStore.count$ | async) >= 1\r\n    \"\r\n    [matTooltip]=\"'igo.geo.directionsForm.resetDirectionsBtn' | translate\"\r\n    color=\"warn\"\r\n    (click)=\"resetStops()\"\r\n  >\r\n    <mat-icon svgIcon=\"file-restore\"></mat-icon>\r\n  </button>\r\n  <button\r\n    mat-icon-button\r\n    tooltip-position=\"below\"\r\n    matTooltipShowDelay=\"500\"\r\n    *ngIf=\"(routesFeatureStore.count$ | async) >= 1\"\r\n    (click)=\"zoomRoute()\"\r\n    [matTooltip]=\"'igo.geo.directionsForm.zoomRoute' | translate\"\r\n    color=\"primary\"\r\n  >\r\n    <mat-icon svgIcon=\"magnify-plus-outline\"></mat-icon>\r\n  </button>\r\n  <button\r\n    mat-icon-button\r\n    tooltip-position=\"below\"\r\n    matTooltipShowDelay=\"500\"\r\n    *ngIf=\"(routesFeatureStore.count$ | async) >= 1\"\r\n    (click)=\"copyDirectionsToClipboard()\"\r\n    [matTooltip]=\"'igo.geo.directionsForm.copy' | translate\"\r\n    color=\"primary\"\r\n  >\r\n    <mat-icon svgIcon=\"content-copy\"></mat-icon>\r\n  </button>\r\n  <button\r\n    mat-icon-button\r\n    tooltip-position=\"below\"\r\n    matTooltipShowDelay=\"500\"\r\n    *ngIf=\"(routesFeatureStore.count$ | async) >= 1\"\r\n    (click)=\"copyLinkToClipboard()\"\r\n    [matTooltip]=\"'igo.geo.directionsForm.link' | translate\"\r\n    color=\"primary\"\r\n  >\r\n    <mat-icon svgIcon=\"link\"></mat-icon>\r\n  </button>\r\n\r\n  <button\r\n    mat-icon-button\r\n    tooltip-position=\"below\"\r\n    matTooltipShowDelay=\"500\"\r\n    *ngIf=\"(routesFeatureStore.count$ | async) >= 1\"\r\n    (click)=\"printDirections()\"\r\n    [disabled]=\"disabled$ | async\"\r\n    [matTooltip]=\"'igo.geo.directionsForm.print' | translate\"\r\n    color=\"primary\"\r\n  >\r\n    <mat-icon svgIcon=\"printer\"></mat-icon>\r\n  </button>\r\n</div>\r\n" }]
     }], function () { return [{ type: i2.LanguageService }, { type: i2.MessageService }, { type: i2.RouteService, decorators: [{
                 type: Optional
             }] }, { type: DirectionsService }]; }, { contextUri: [{
@@ -20226,7 +20226,7 @@ class DirectionsInputsComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DirectionsInputsComponent, [{
         type: Component,
-        args: [{ selector: 'igo-directions-inputs', template: "<div cdkDropList class=\"stops-list\" (cdkDropListDropped)=\"drop($event)\">\n  <div\n    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\"\n    class=\"stop-box\"\n    *ngFor=\"let stop of stopsStore.view.all$() | async; let i = index\"\n    cdkDrag\n  >\n    <div [ngClass]=\"getNgClass(stop)\">\n      <mat-form-field subscriptSizing=\"dynamic\">\n        <mat-label>{{ getPlaceholder(stop) }}</mat-label>\n        <input\n          id=\"{{ stop.id }}\"\n          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        />\n        <button\n          *ngIf=\"\n            (stop.text || stop.coordinates) &&\n            stopWithHover &&\n            stop.id === stopWithHover.id\n          \"\n          mat-icon-button\n          matSuffix\n          matTooltipShowDelay=\"500\"\n          [matTooltip]=\"'igo.geo.directionsForm.clearStop' | translate\"\n          color=\"warn\"\n          aria-label=\"Clear\"\n          (click)=\"clearStop(stop)\"\n        >\n          <mat-icon svgIcon=\"close\"></mat-icon>\n        </button>\n\n        <mat-autocomplete\n          [displayWith]=\"getOptionText\"\n          #auto=\"matAutocomplete\"\n          (optionSelected)=\"chooseProposal($event, stop)\"\n        >\n          <mat-optgroup\n            *ngFor=\"let source of stop.searchProposals\"\n            [label]=\"source.source.title\"\n            [disabled]=\"source.source.enabled === false\"\n          >\n            <mat-option\n              *ngFor=\"let result of source.results\"\n              [value]=\"result\"\n              matTooltipShowDelay=\"500\"\n              [matTooltip]=\"result.meta ? result.meta.title : ''\"\n            >\n              {{ result.meta ? result.meta.title : '' }}\n            </mat-option>\n          </mat-optgroup>\n        </mat-autocomplete>\n      </mat-form-field>\n    </div>\n\n    <div\n      *ngIf=\"!stopIsDragged && stopWithHover && stop.id === stopWithHover.id\"\n      class=\"igo-form-button-group\"\n    >\n      <button\n        class=\"swipe-vertical\"\n        cdkDragHandle\n        mat-icon-button\n        tooltip-position=\"below\"\n        matTooltipShowDelay=\"500\"\n        [matTooltip]=\"'igo.geo.directionsForm.moveStop' | translate\"\n        color=\"primary\"\n      >\n        <mat-icon svgIcon=\"gesture-swipe-vertical\"></mat-icon>\n      </button>\n\n      <button\n        *ngIf=\"(stopsStore.count$ | async) > 2\"\n        mat-icon-button\n        tooltip-position=\"below\"\n        matTooltipShowDelay=\"500\"\n        [matTooltip]=\"'igo.geo.directionsForm.removeStop' | translate\"\n        color=\"warn\"\n        (click)=\"removeStop(stop)\"\n      >\n        <mat-icon svgIcon=\"delete\"></mat-icon>\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [":host .igo-input-container{display:flex;width:100%}:host .igo-input-container mat-form-field{flex:1}:host .igo-form-button-group{display:flex;align-items:center;padding-left:12px}:host .stops-list{max-width:100%;min-height:60px;display:block;background:white;border-radius:4px;overflow:hidden;padding:20px 10px}:host .swipe-vertical{cursor:move}:host .stop-box{color:#000000de;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;background:white}:host .stop-box:not(:last-child){margin-bottom:16px}:host .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}:host .cdk-drag-placeholder{opacity:0}:host .cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}:host .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)\">\r\n  <div\r\n    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\"\r\n    class=\"stop-box\"\r\n    *ngFor=\"let stop of stopsStore.view.all$() | async; let i = index\"\r\n    cdkDrag\r\n  >\r\n    <div [ngClass]=\"getNgClass(stop)\">\r\n      <mat-form-field subscriptSizing=\"dynamic\">\r\n        <mat-label>{{ getPlaceholder(stop) }}</mat-label>\r\n        <input\r\n          id=\"{{ stop.id }}\"\r\n          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        />\r\n        <button\r\n          *ngIf=\"\r\n            (stop.text || stop.coordinates) &&\r\n            stopWithHover &&\r\n            stop.id === stopWithHover.id\r\n          \"\r\n          mat-icon-button\r\n          matSuffix\r\n          matTooltipShowDelay=\"500\"\r\n          [matTooltip]=\"'igo.geo.directionsForm.clearStop' | translate\"\r\n          color=\"warn\"\r\n          aria-label=\"Clear\"\r\n          (click)=\"clearStop(stop)\"\r\n        >\r\n          <mat-icon svgIcon=\"close\"></mat-icon>\r\n        </button>\r\n\r\n        <mat-autocomplete\r\n          [displayWith]=\"getOptionText\"\r\n          #auto=\"matAutocomplete\"\r\n          (optionSelected)=\"chooseProposal($event, stop)\"\r\n        >\r\n          <mat-optgroup\r\n            *ngFor=\"let source of stop.searchProposals\"\r\n            [label]=\"source.source.title\"\r\n            [disabled]=\"source.source.enabled === false\"\r\n          >\r\n            <mat-option\r\n              *ngFor=\"let result of source.results\"\r\n              [value]=\"result\"\r\n              matTooltipShowDelay=\"500\"\r\n              [matTooltip]=\"result.meta ? result.meta.title : ''\"\r\n            >\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    <div\r\n      *ngIf=\"!stopIsDragged && stopWithHover && stop.id === stopWithHover.id\"\r\n      class=\"igo-form-button-group\"\r\n    >\r\n      <button\r\n        class=\"swipe-vertical\"\r\n        cdkDragHandle\r\n        mat-icon-button\r\n        tooltip-position=\"below\"\r\n        matTooltipShowDelay=\"500\"\r\n        [matTooltip]=\"'igo.geo.directionsForm.moveStop' | translate\"\r\n        color=\"primary\"\r\n      >\r\n        <mat-icon svgIcon=\"gesture-swipe-vertical\"></mat-icon>\r\n      </button>\r\n\r\n      <button\r\n        *ngIf=\"(stopsStore.count$ | async) > 2\"\r\n        mat-icon-button\r\n        tooltip-position=\"below\"\r\n        matTooltipShowDelay=\"500\"\r\n        [matTooltip]=\"'igo.geo.directionsForm.removeStop' | translate\"\r\n        color=\"warn\"\r\n        (click)=\"removeStop(stop)\"\r\n      >\r\n        <mat-icon svgIcon=\"delete\"></mat-icon>\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host .igo-input-container{display:flex;width:100%}:host .igo-input-container mat-form-field{flex:1}:host .igo-form-button-group{display:flex;align-items:center;padding-left:12px}:host .stops-list{max-width:100%;min-height:60px;display:block;background:white;border-radius:4px;overflow:hidden;padding:20px 10px}:host .swipe-vertical{cursor:move}:host .stop-box{color:#000000de;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;background:white}:host .stop-box:not(:last-child){margin-bottom:16px}:host .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}:host .cdk-drag-placeholder{opacity:0}:host .cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}:host .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.LanguageService }]; }, { stopsStore: [{
             type: Input
         }], stopsFeatureStore: [{
@@ -20430,7 +20430,7 @@ class DirectionsResultsComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DirectionsResultsComponent, [{
         type: Component,
-        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-label>{{\n      'igo.geo.directionsForm.drivingOptions' | translate\n    }}</mat-label>\n    <mat-select\n      placeholder=\"{{ 'igo.geo.directionsForm.drivingOptions' | translate }}\"\n      (selectionChange)=\"changeRoute()\"\n      [(ngModel)]=\"activeDirection\"\n    >\n      <mat-option\n        *ngFor=\"let direction of directions; let cnt = index\"\n        [value]=\"direction\"\n      >\n        Option {{ cnt + 1 }} : {{ formatDistance(direction.distance) }} ({{\n          formatDuration(direction.duration)\n        }})\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\">{{ activeDirection.title }}</h2>\n    <span class=\"mat-caption\">\n      {{ formatDistance(activeDirection.distance) }},\n      {{ formatDuration(activeDirection.duration) }}\n    </span>\n    <mat-list-item\n      class=\"igo-steps\"\n      (mouseenter)=\"showSegment(step)\"\n      (click)=\"showSegment(step, true)\"\n      *ngFor=\"let step of activeDirection.steps; let cnt = index\"\n      igoListItem\n    >\n      <mat-icon\n        [ngClass]=\"formatStep(step, cnt).cssClass\"\n        matListItemIcon\n        svgIcon=\"{{ formatStep(step, cnt).image }}\"\n      >\n      </mat-icon>\n\n      <span class=\"igo-step-text\">\n        {{ cnt + 1 }}. {{ formatStep(step, cnt).instruction }}\n      </span>\n      <span matListItemMeta>\n        {{ formatDistance(step.distance) }}\n      </span>\n    </mat-list-item>\n\n    <mat-divider></mat-divider>\n  </mat-list>\n</div>\n", styles: [".igo-input-container{width:100%;padding:20px 10px;box-sizing:border-box}.igo-input-container mat-form-field{width:70%}.igo-route-title{font-weight:700}.igo-steps{cursor:pointer;padding:35px 0}.igo-steps .igo-step-text{overflow-wrap:break-word;word-wrap:break-word;white-space:pre-wrap}.mat-mdc-list-item{word-wrap:break-word!important;white-space:pre-wrap!important}.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\">\r\n  <mat-form-field *ngIf=\"directions && directions.length > 1\">\r\n    <mat-label>{{\r\n      'igo.geo.directionsForm.drivingOptions' | translate\r\n    }}</mat-label>\r\n    <mat-select\r\n      placeholder=\"{{ 'igo.geo.directionsForm.drivingOptions' | translate }}\"\r\n      (selectionChange)=\"changeRoute()\"\r\n      [(ngModel)]=\"activeDirection\"\r\n    >\r\n      <mat-option\r\n        *ngFor=\"let direction of directions; let cnt = index\"\r\n        [value]=\"direction\"\r\n      >\r\n        Option {{ cnt + 1 }} : {{ formatDistance(direction.distance) }} ({{\r\n          formatDuration(direction.duration)\r\n        }})\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\">{{ activeDirection.title }}</h2>\r\n    <span class=\"mat-caption\">\r\n      {{ formatDistance(activeDirection.distance) }},\r\n      {{ formatDuration(activeDirection.duration) }}\r\n    </span>\r\n    <mat-list-item\r\n      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\"\r\n      igoListItem\r\n    >\r\n      <mat-icon\r\n        [ngClass]=\"formatStep(step, cnt).cssClass\"\r\n        matListItemIcon\r\n        svgIcon=\"{{ formatStep(step, cnt).image }}\"\r\n      >\r\n      </mat-icon>\r\n\r\n      <span class=\"igo-step-text\">\r\n        {{ cnt + 1 }}. {{ formatStep(step, cnt).instruction }}\r\n      </span>\r\n      <span matListItemMeta>\r\n        {{ formatDistance(step.distance) }}\r\n      </span>\r\n    </mat-list-item>\r\n\r\n    <mat-divider></mat-divider>\r\n  </mat-list>\r\n</div>\r\n", styles: [".igo-input-container{width:100%;padding:20px 10px;box-sizing:border-box}.igo-input-container mat-form-field{width:70%}.igo-route-title{font-weight:700}.igo-steps{cursor:pointer;padding:35px 0}.igo-steps .igo-step-text{overflow-wrap:break-word;word-wrap:break-word;white-space:pre-wrap}.mat-mdc-list-item{word-wrap:break-word!important;white-space:pre-wrap!important}.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.LanguageService }, { type: i0.ChangeDetectorRef }]; }, { routesFeatureStore: [{
             type: Input
         }], stepFeatureStore: [{
@@ -20472,7 +20472,7 @@ class ZoomButtonComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ZoomButtonComponent, [{
         type: Component,
-        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  >\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  >\n    <mat-icon svgIcon=\"minus\"></mat-icon>\n  </button>\n</div>\n", styles: [":host button{border-radius:0!important}:host button .mat-ripple,:host button .mdc-icon-button__ripple{border-radius:0!important}:host .igo-zoom-button-container{width:40px}:host .igo-zoom-button-container button{background-color:#fff}:host .igo-zoom-button-container button:hover{background-color:#efefef}:host .igo-zoom-button-container button:first-child{margin-bottom:2px}\n"] }]
+        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  >\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  >\r\n    <mat-icon svgIcon=\"minus\"></mat-icon>\r\n  </button>\r\n</div>\r\n", styles: [":host button{border-radius:0!important}:host button .mat-ripple,:host button .mdc-icon-button__ripple{border-radius:0!important}:host .igo-zoom-button-container{width:40px}:host .igo-zoom-button-container button{background-color:#fff}:host .igo-zoom-button-container button:hover{background-color:#efefef}:host .igo-zoom-button-container button:first-child{margin-bottom:2px}\n"] }]
     }], function () { return []; }, { map: [{
             type: Input
         }], color: [{
@@ -20518,7 +20518,7 @@ class MenuButtonComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MenuButtonComponent, [{
         type: Component,
-        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>\n  <mat-icon svgIcon=\"menu\"></mat-icon>\n</button>\n", styles: [":host button{border-radius:0!important}:host button .mat-ripple,:host button .mdc-icon-button__ripple{border-radius:0!important}\n"] }]
+        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>\r\n  <mat-icon svgIcon=\"menu\"></mat-icon>\r\n</button>\r\n", styles: [":host button{border-radius:0!important}:host button .mat-ripple,:host button .mdc-icon-button__ripple{border-radius:0!important}\n"] }]
     }], function () { return [{ type: i2.ConfigService }]; }, { sidenavOpened: [{
             type: Input
         }], openSidenav: [{
@@ -20594,7 +20594,7 @@ class GeolocateButtonComponent {
 }
 (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\">\n  <button\n    mat-icon-button\n    [matTooltip]=\"\n      map.geolocationController.tracking\n        ? ('igo.geo.mapButtons.geolocateInactive' | translate)\n        : ('igo.geo.mapButtons.geolocate' | translate)\n    \"\n    matTooltipPosition=\"left\"\n    [color]=\"color\"\n    (click)=\"onGeolocationClick()\"\n  >\n    <mat-icon svgIcon=\"{{ icon$ | async }}\"></mat-icon>\n  </button>\n</div>\n", styles: [":host button{border-radius:0!important}:host button .mat-ripple,:host button .mdc-icon-button__ripple{border-radius:0!important}:host .igo-geolocate-button-container{width:40px;background-color:#fff}:host .igo-geolocate-button-container:hover{background-color:#efefef}\n"] }]
+        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]=\"\r\n      map.geolocationController.tracking\r\n        ? ('igo.geo.mapButtons.geolocateInactive' | translate)\r\n        : ('igo.geo.mapButtons.geolocate' | translate)\r\n    \"\r\n    matTooltipPosition=\"left\"\r\n    [color]=\"color\"\r\n    (click)=\"onGeolocationClick()\"\r\n  >\r\n    <mat-icon svgIcon=\"{{ icon$ | async }}\"></mat-icon>\r\n  </button>\r\n</div>\r\n", styles: [":host button{border-radius:0!important}:host button .mat-ripple,:host button .mdc-icon-button__ripple{border-radius:0!important}:host .igo-geolocate-button-container{width:40px;background-color:#fff}:host .igo-geolocate-button-container:hover{background-color:#efefef}\n"] }]
     }], function () { return [{ type: i2.ConfigService }]; }, { map: [{
             type: Input
         }], color: [{
@@ -20656,7 +20656,7 @@ class HomeExtentButtonComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HomeExtentButtonComponent, [{
         type: Component,
-        args: [{ selector: 'igo-home-extent-button', template: "<div class=\"igo-home-extent-button-container\">\n  <button\n    mat-icon-button\n    [matTooltip]=\"'igo.geo.mapButtons.home-extent' | translate\"\n    matTooltipPosition=\"left\"\n    [color]=\"color\"\n    (click)=\"onToggleClick()\"\n  >\n    <mat-icon svgIcon=\"home-map-marker\"></mat-icon>\n  </button>\n</div>\n", styles: [":host button{border-radius:0!important}:host button .mat-ripple,:host button .mdc-icon-button__ripple{border-radius:0!important}:host .igo-home-extent-button-container{width:40px;background-color:#fff}:host .igo-home-extent-button-container:hover{background-color:#efefef}\n"] }]
+        args: [{ selector: 'igo-home-extent-button', template: "<div class=\"igo-home-extent-button-container\">\r\n  <button\r\n    mat-icon-button\r\n    [matTooltip]=\"'igo.geo.mapButtons.home-extent' | translate\"\r\n    matTooltipPosition=\"left\"\r\n    [color]=\"color\"\r\n    (click)=\"onToggleClick()\"\r\n  >\r\n    <mat-icon svgIcon=\"home-map-marker\"></mat-icon>\r\n  </button>\r\n</div>\r\n", styles: [":host button{border-radius:0!important}:host button .mat-ripple,:host button .mdc-icon-button__ripple{border-radius:0!important}:host .igo-home-extent-button-container{width:40px;background-color:#fff}:host .igo-home-extent-button-container:hover{background-color:#efefef}\n"] }]
     }], function () { return [{ type: i2.ConfigService }]; }, { map: [{
             type: Input
         }], color: [{
@@ -20707,7 +20707,7 @@ class OfflineButtonComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(OfflineButtonComponent, [{
         type: Component,
-        args: [{ selector: 'igo-offline-button', template: "<div class=\"igo-user-button-container\">\n  <button\n    mat-icon-button\n    [matTooltip]=\"\n      enabled\n        ? ('igo.geo.mapButtons.online' | translate)\n        : ('igo.geo.mapButtons.offline' | translate)\n    \"\n    matTooltipPosition=\"left\"\n    [ngClass]=\"[btnStyle]\"\n    [color]=\"enabled ? color : null\"\n    (click)=\"onClick()\"\n  >\n    <mat-icon svgIcon=\"wifi-strength-off\"></mat-icon>\n  </button>\n</div>\n", styles: [":host button{border-radius:0!important}:host button .mat-ripple,:host button .mdc-icon-button__ripple{border-radius:0!important}:host .onlineStyle{width:40px;background-color:#fff}:host .onlineStyle:hover{background-color:#efefef}:host .offlineStyle{width:40px;background-color:#b9b9b9}\n"] }]
+        args: [{ selector: 'igo-offline-button', template: "<div class=\"igo-user-button-container\">\r\n  <button\r\n    mat-icon-button\r\n    [matTooltip]=\"\r\n      enabled\r\n        ? ('igo.geo.mapButtons.online' | translate)\r\n        : ('igo.geo.mapButtons.offline' | translate)\r\n    \"\r\n    matTooltipPosition=\"left\"\r\n    [ngClass]=\"[btnStyle]\"\r\n    [color]=\"enabled ? color : null\"\r\n    (click)=\"onClick()\"\r\n  >\r\n    <mat-icon svgIcon=\"wifi-strength-off\"></mat-icon>\r\n  </button>\r\n</div>\r\n", styles: [":host button{border-radius:0!important}:host button .mat-ripple,:host button .mdc-icon-button__ripple{border-radius:0!important}:host .onlineStyle{width:40px;background-color:#fff}:host .onlineStyle:hover{background-color:#efefef}:host .offlineStyle{width:40px;background-color:#b9b9b9}\n"] }]
     }], function () { return []; }, { map: [{
             type: Input
         }], color: [{
@@ -20803,7 +20803,7 @@ class WakeLockButtonComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(WakeLockButtonComponent, [{
         type: Component,
-        args: [{ selector: 'igo-wake-lock-button', template: "<div class=\"igo-wake-lock-button-container\">\n  <button\n    [color]=\"color\"\n    mat-icon-button\n    [matTooltip]=\"\n      enabled\n        ? ('igo.geo.mapButtons.preventScreenLock' | translate)\n        : ('igo.geo.mapButtons.letScreenLock' | translate)\n    \"\n    matTooltipPosition=\"left\"\n    (click)=\"toggleWakeLock()\"\n  >\n    <mat-icon svgIcon=\"{{ icon$ | async }}\"></mat-icon>\n  </button>\n</div>\n", styles: [":host button{border-radius:0!important}:host button .mat-ripple,:host button .mdc-icon-button__ripple{border-radius:0!important}:host .igo-wake-lock-button-container{width:40px;background-color:#fff}:host .igo-wake-lock-button-container:hover{background-color:#efefef}\n"] }]
+        args: [{ selector: 'igo-wake-lock-button', template: "<div class=\"igo-wake-lock-button-container\">\r\n  <button\r\n    [color]=\"color\"\r\n    mat-icon-button\r\n    [matTooltip]=\"\r\n      enabled\r\n        ? ('igo.geo.mapButtons.preventScreenLock' | translate)\r\n        : ('igo.geo.mapButtons.letScreenLock' | translate)\r\n    \"\r\n    matTooltipPosition=\"left\"\r\n    (click)=\"toggleWakeLock()\"\r\n  >\r\n    <mat-icon svgIcon=\"{{ icon$ | async }}\"></mat-icon>\r\n  </button>\r\n</div>\r\n", styles: [":host button{border-radius:0!important}:host button .mat-ripple,:host button .mdc-icon-button__ripple{border-radius:0!important}:host .igo-wake-lock-button-container{width:40px;background-color:#fff}:host .igo-wake-lock-button-container:hover{background-color:#efefef}\n"] }]
     }], function () { return [{ type: i2.StorageService }]; }, { color: [{
             type: Input
         }], enabled: [{
@@ -21068,7 +21068,7 @@ class MiniBaseMapComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MiniBaseMapComponent, [{
         type: Component,
-        args: [{ selector: 'igo-mini-basemap', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"igo-mini-basemap-container\">\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</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}.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', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"igo-mini-basemap-container\">\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</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}.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: [{
@@ -21135,7 +21135,7 @@ class RotationButtonComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(RotationButtonComponent, [{
         type: Component,
-        args: [{ selector: 'igo-rotation-button', template: "<div\n  *ngIf=\"((rotated$ | async) && !showIfNoRotation) || showIfNoRotation\"\n  class=\"igo-rotation-button-container\"\n  [matTooltip]=\"\n    (rotated$ | async)\n      ? ('igo.geo.mapButtons.resetRotation'\n        | translate: { azimuth: azimuthRounded, rotation: rotationRounded })\n      : ('igo.geo.mapButtons.tipRotation' | translate)\n  \"\n  matTooltipPosition=\"left\"\n>\n  <button\n    mat-icon-button\n    matTooltipPosition=\"left\"\n    [color]=\"color\"\n    [disabled]=\"(rotated$ | async) === false\"\n    (click)=\"map.viewController.resetRotation()\"\n  >\n    <mat-icon [ngStyle]=\"currentStyle$ | async\" svgIcon=\"navigation\">\n    </mat-icon>\n  </button>\n</div>\n", styles: [":host button{border-radius:0!important}:host button .mat-ripple,:host button .mdc-icon-button__ripple{border-radius:0!important}:host .igo-rotation-button-container{width:40px;background-color:#fff}:host .igo-rotation-button-container:hover{background-color:#efefef}\n"] }]
+        args: [{ selector: 'igo-rotation-button', template: "<div\r\n  *ngIf=\"((rotated$ | async) && !showIfNoRotation) || showIfNoRotation\"\r\n  class=\"igo-rotation-button-container\"\r\n  [matTooltip]=\"\r\n    (rotated$ | async)\r\n      ? ('igo.geo.mapButtons.resetRotation'\r\n        | translate: { azimuth: azimuthRounded, rotation: rotationRounded })\r\n      : ('igo.geo.mapButtons.tipRotation' | translate)\r\n  \"\r\n  matTooltipPosition=\"left\"\r\n>\r\n  <button\r\n    mat-icon-button\r\n    matTooltipPosition=\"left\"\r\n    [color]=\"color\"\r\n    [disabled]=\"(rotated$ | async) === false\"\r\n    (click)=\"map.viewController.resetRotation()\"\r\n  >\r\n    <mat-icon [ngStyle]=\"currentStyle$ | async\" svgIcon=\"navigation\">\r\n    </mat-icon>\r\n  </button>\r\n</div>\r\n", styles: [":host button{border-radius:0!important}:host button .mat-ripple,:host button .mdc-icon-button__ripple{border-radius:0!important}:host .igo-rotation-button-container{width:40px;background-color:#fff}:host .igo-rotation-button-container:hover{background-color:#efefef}\n"] }]
     }], function () { return []; }, { map: [{
             type: Input
         }], showIfNoRotation: [{
@@ -21354,7 +21354,7 @@ class SwipeControlComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SwipeControlComponent, [{
         type: Component,
-        args: [{ selector: 'igo-swipe-control', template: "<div\n  class=\"igo-swipe-control-container\"\n  id=\"igo-layer-swipe\"\n  (mousedown)=\"dragDown($event)\"\n  (mouseup)=\"closeDragMouseElement()\"\n  (touchstart)=\"dragDown($event)\"\n  (touchend)=\"closeDragTouchElement()\"\n>\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:grab;z-index:1;transform:translate(-40px)}.igo-swipe-control-container:active{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\r\n  class=\"igo-swipe-control-container\"\r\n  id=\"igo-layer-swipe\"\r\n  (mousedown)=\"dragDown($event)\"\r\n  (mouseup)=\"closeDragMouseElement()\"\r\n  (touchstart)=\"dragDown($event)\"\r\n  (touchend)=\"closeDragTouchElement()\"\r\n>\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:grab;z-index:1;transform:translate(-40px)}.igo-swipe-control-container:active{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
         }] }); })();
@@ -21412,7 +21412,7 @@ class MapCenterComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MapCenterComponent, [{
         type: Component,
-        args: [{ selector: 'igo-map-center', template: "<div class=\"mapCenter\" 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"] }]
+        args: [{ selector: 'igo-map-center', template: "<div class=\"mapCenter\" 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"] }]
     }], function () { return []; }, { map: [{
             type: Input
         }] }); })();
@@ -21438,7 +21438,7 @@ class InfoSectionComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(InfoSectionComponent, [{
         type: Component,
-        args: [{ selector: 'igo-info-section', template: "<div *ngIf=\"infoContent && infoContent.length\" class=\"infoSection\">\n  <pre>{{ infoContent }}</pre>\n</div>\n", 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\">\r\n  <pre>{{ infoContent }}</pre>\r\n</div>\r\n", 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
         }] }); })();
@@ -22745,7 +22745,7 @@ class DownloadButtonComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DownloadButtonComponent, [{
         type: Component,
-        args: [{ selector: 'igo-download-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  *ngIf=\"\n    options &&\n    options.download &&\n    (options.download['dynamicUrl'] || options.download['url'])\n  \"\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>\n  <mat-icon svgIcon=\"download\"></mat-icon>\n</button>\n" }]
+        args: [{ selector: 'igo-download-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\r\n  *ngIf=\"\r\n    options &&\r\n    options.download &&\r\n    (options.download['dynamicUrl'] || options.download['url'])\r\n  \"\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>\r\n  <mat-icon svgIcon=\"download\"></mat-icon>\r\n</button>\r\n" }]
     }], function () { return [{ type: DownloadService }]; }, { layer: [{
             type: Input
         }], color: [{
@@ -22830,7 +22830,7 @@ class DrawLayerPopupComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DrawLayerPopupComponent, [{
         type: Component,
-        args: [{ selector: 'igo-draw-popup-component', template: "<div mat-dialog-content>\n  <p class=\"mat-typography\">\n    {{ 'igo.geo.draw.layer.layerDialogInstruction' | translate }}\n  </p>\n  <mat-form-field class=\"example-full-width\">\n    <input\n      #input\n      matInput\n      placeholder=\"{{ 'igo.geo.draw.layer.title' | translate }}\"\n    />\n  </mat-form-field>\n</div>\n<div mat-dialog-actions>\n  <button mat-raised-button (click)=\"cancelDrawing()\">\n    {{ 'igo.geo.draw.cancel' | translate }}\n  </button>\n  <button mat-raised-button color=\"primary\" (click)=\"confirm(input.value)\">\n    OK\n  </button>\n</div>\n", styles: [":host .fields-container{display:flex}\n"] }]
+        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", styles: [":host .fields-container{display:flex}\n"] }]
     }], function () { return [{ type: i1$3.MatDialogRef }]; }, { confirmFlag: [{
             type: Input
         }] }); })();
@@ -24134,7 +24134,7 @@ class DrawPopupComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DrawPopupComponent, [{
         type: Component,
-        args: [{ selector: 'igo-draw-popup-component', template: "<h2 mat-dialog-title>\n  {{ 'igo.geo.draw.popupTitle' | translate }}\n</h2>\n\n<ng-container *ngIf=\"labelFlag !== labelType.Custom\">\n  <div mat-dialog-content class=\"geometry-type-toggle\">\n    <div class=\"button-toggle-container\">\n      <mat-button-toggle-group\n        (change)=\"onLabelTypeChange($event.value)\"\n        [value]=\"customOrPredefined\"\n      >\n        <mat-button-toggle [value]=\"labelType.Custom\">\n          {{ 'igo.geo.draw.labelType.custom' | translate }}\n        </mat-button-toggle>\n        <mat-button-toggle [value]=\"labelType.Predefined\">\n          {{ 'igo.geo.draw.labelType.predefined' | translate }}\n        </mat-button-toggle>\n      </mat-button-toggle-group>\n    </div>\n    <div>\n      <p>\n        {{ 'igo.geo.draw.builtInInstructions' | translate }}\n      </p>\n      <mat-radio-group *ngIf=\"olGeometryType !== 'Polygon'\">\n        <mat-radio-button\n          *ngFor=\"let option of arrayBuiltInType\"\n          [value]=\"option.value\"\n          [disabled]=\"optionAvailable(option.value)\"\n          (change)=\"onLabelTypeChange($event.value)\"\n          [checked]=\"option.checked\"\n        >\n          {{ getProperLengthLabel(option.value) }}\n        </mat-radio-button>\n      </mat-radio-group>\n      <ng-container *ngIf=\"olGeometryType === 'Polygon'\">\n        <mat-checkbox\n          *ngFor=\"let option of arrayBuiltInType\"\n          class=\"mat-typography\"\n          [value]=\"option.value\"\n          [disabled]=\"optionAvailable(option.value)\"\n          (change)=\"onLabelTypeChange($event.source.value, $event.checked)\"\n          [checked]=\"option.checked\"\n        >\n          {{ getProperLengthLabel(option.value) }}\n        </mat-checkbox>\n      </ng-container>\n      <div *ngIf=\"labelFlag === labelType.Coordinates\" class=\"fields-container\">\n        <mat-form-field class=\"readOnly-Input\">\n          <mat-label>(Latitude, Longitude)</mat-label>\n          <input\n            #input\n            matInput\n            placeholder=\"(Latitude, Longitude)\"\n            value=\"{{ currentCoordinates }}\"\n            readonly\n          />\n        </mat-form-field>\n        <mat-form-field class=\"unit-field\">\n          <mat-select\n            [value]=\"coordinatesMeasureUnit\"\n            (selectionChange)=\"onChangeCoordinateUnit($event.value)\"\n          >\n            <mat-option *ngFor=\"let unit of allCoordinatesUnits\" [value]=\"unit\">\n              {{ unit }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n      <div\n        *ngIf=\"labelFlag === labelType.Length || polygonCheck === 2\"\n        class=\"fields-container\"\n      >\n        <mat-form-field class=\"readOnly-Input\">\n          <mat-label>{{ lengthLabelT }}</mat-label>\n          <input\n            #input\n            matInput\n            placeholder=\"{{ lengthLabelT }}\"\n            value=\"{{ currentLength }}\"\n            readonly\n          />\n        </mat-form-field>\n        <mat-form-field class=\"unit-field\">\n          <mat-select\n            [value]=\"lengthMeasureUnit\"\n            (selectionChange)=\"onChangeLengthUnit($event.value)\"\n          >\n            <mat-option *ngFor=\"let unit of allLengthUnits\" [value]=\"unit\">\n              {{ getLengthUnitEnum(unit) }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n      <div\n        *ngIf=\"labelFlag === labelType.Area || polygonCheck === 2\"\n        class=\"fields-container\"\n      >\n        <mat-form-field class=\"readOnly-Input\">\n          <mat-label>{{ 'igo.geo.draw.labelType.Area' | translate }}</mat-label>\n          <input\n            #input\n            matInput\n            placeholder=\"{{ 'igo.geo.draw.labelType.Area' | translate }}\"\n            value=\"{{ currentArea }}\"\n            readonly\n          />\n        </mat-form-field>\n        <mat-form-field class=\"unit-field\">\n          <mat-select\n            [value]=\"areaMeasureUnit\"\n            (selectionChange)=\"onChangeAreaUnit($event.value)\"\n          >\n            <mat-option *ngFor=\"let unit of allAreaUnits\" [value]=\"unit\">\n              {{ getAreaUnitEnum(unit) }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n    </div>\n  </div>\n\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()\">\n      {{ noLabelButton() }}\n    </button>\n  </div>\n</ng-container>\n\n<ng-container *ngIf=\"labelFlag === labelType.Custom\">\n  <div mat-dialog-content class=\"geometry-type-toggle\">\n    <div class=\"button-toggle-container\">\n      <mat-button-toggle-group\n        (change)=\"onLabelTypeChange($event.value)\"\n        [value]=\"customOrPredefined\"\n      >\n        <mat-button-toggle [value]=\"labelType.Custom\">\n          {{ 'igo.geo.draw.labelType.custom' | translate }}\n        </mat-button-toggle>\n        <mat-button-toggle [value]=\"labelType.Predefined\">\n          {{ 'igo.geo.draw.labelType.predefined' | translate }}\n        </mat-button-toggle>\n      </mat-button-toggle-group>\n    </div>\n    <p>\n      {{ 'igo.geo.draw.dialogInstruction' | translate }}\n    </p>\n    <mat-form-field class=\"input\">\n      <mat-label>{{ 'igo.geo.draw.dialogTitle' | translate }}</mat-label>\n      <input\n        #input\n        matInput\n        (select)=\"(true)\"\n        (input)=\"getLabelLength($event.target.value)\"\n        placeholder=\"{{ 'igo.geo.draw.dialogTitle' | translate }}\"\n        value=\"{{ currentLabel }}\"\n        cdkFocusInitial\n      />\n    </mat-form-field>\n  </div>\n\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      {{ noLabelButton() }}\n    </button>\n  </div>\n</ng-container>\n", styles: [":host .mat-mdc-radio-button~.mat-radio-button{margin-left:12px}:host .readOnly-Input{width:200px!important}:host .button-toggle-container{margin-bottom:12px}:host .unit-field{margin-left:12px}:host .unit-field ::ng-deep .mat-mdc-form-field-infix{width:-moz-fit-content;width:fit-content}:host .unit-field ::ng-deep .mat-mdc-select-min-line{padding-right:24px}:host .mat-mdc-form-field{position:sticky!important}:host .coordinatesInputView{top:5em!important}:host .mat-mdc-dialog-actions{display:flex!important;justify-content:flex-end}:host .input{width:auto!important}:host .mat-button-toggle-group,:host .mat-button-toggle{width:100%}:host mat-checkbox{margin-right:10px}:host ::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{display:none}\n"] }]
+        args: [{ selector: 'igo-draw-popup-component', template: "<h2 mat-dialog-title>\r\n  {{ 'igo.geo.draw.popupTitle' | translate }}\r\n</h2>\r\n\r\n<ng-container *ngIf=\"labelFlag !== labelType.Custom\">\r\n  <div mat-dialog-content class=\"geometry-type-toggle\">\r\n    <div class=\"button-toggle-container\">\r\n      <mat-button-toggle-group\r\n        (change)=\"onLabelTypeChange($event.value)\"\r\n        [value]=\"customOrPredefined\"\r\n      >\r\n        <mat-button-toggle [value]=\"labelType.Custom\">\r\n          {{ 'igo.geo.draw.labelType.custom' | translate }}\r\n        </mat-button-toggle>\r\n        <mat-button-toggle [value]=\"labelType.Predefined\">\r\n          {{ 'igo.geo.draw.labelType.predefined' | translate }}\r\n        </mat-button-toggle>\r\n      </mat-button-toggle-group>\r\n    </div>\r\n    <div>\r\n      <p>\r\n        {{ 'igo.geo.draw.builtInInstructions' | translate }}\r\n      </p>\r\n      <mat-radio-group *ngIf=\"olGeometryType !== 'Polygon'\">\r\n        <mat-radio-button\r\n          *ngFor=\"let option of arrayBuiltInType\"\r\n          [value]=\"option.value\"\r\n          [disabled]=\"optionAvailable(option.value)\"\r\n          (change)=\"onLabelTypeChange($event.value)\"\r\n          [checked]=\"option.checked\"\r\n        >\r\n          {{ getProperLengthLabel(option.value) }}\r\n        </mat-radio-button>\r\n      </mat-radio-group>\r\n      <ng-container *ngIf=\"olGeometryType === 'Polygon'\">\r\n        <mat-checkbox\r\n          *ngFor=\"let option of arrayBuiltInType\"\r\n          class=\"mat-typography\"\r\n          [value]=\"option.value\"\r\n          [disabled]=\"optionAvailable(option.value)\"\r\n          (change)=\"onLabelTypeChange($event.source.value, $event.checked)\"\r\n          [checked]=\"option.checked\"\r\n        >\r\n          {{ getProperLengthLabel(option.value) }}\r\n        </mat-checkbox>\r\n      </ng-container>\r\n      <div *ngIf=\"labelFlag === labelType.Coordinates\" class=\"fields-container\">\r\n        <mat-form-field class=\"readOnly-Input\">\r\n          <mat-label>(Latitude, Longitude)</mat-label>\r\n          <input\r\n            #input\r\n            matInput\r\n            placeholder=\"(Latitude, Longitude)\"\r\n            value=\"{{ currentCoordinates }}\"\r\n            readonly\r\n          />\r\n        </mat-form-field>\r\n        <mat-form-field class=\"unit-field\">\r\n          <mat-select\r\n            [value]=\"coordinatesMeasureUnit\"\r\n            (selectionChange)=\"onChangeCoordinateUnit($event.value)\"\r\n          >\r\n            <mat-option *ngFor=\"let unit of allCoordinatesUnits\" [value]=\"unit\">\r\n              {{ unit }}\r\n            </mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </div>\r\n      <div\r\n        *ngIf=\"labelFlag === labelType.Length || polygonCheck === 2\"\r\n        class=\"fields-container\"\r\n      >\r\n        <mat-form-field class=\"readOnly-Input\">\r\n          <mat-label>{{ lengthLabelT }}</mat-label>\r\n          <input\r\n            #input\r\n            matInput\r\n            placeholder=\"{{ lengthLabelT }}\"\r\n            value=\"{{ currentLength }}\"\r\n            readonly\r\n          />\r\n        </mat-form-field>\r\n        <mat-form-field class=\"unit-field\">\r\n          <mat-select\r\n            [value]=\"lengthMeasureUnit\"\r\n            (selectionChange)=\"onChangeLengthUnit($event.value)\"\r\n          >\r\n            <mat-option *ngFor=\"let unit of allLengthUnits\" [value]=\"unit\">\r\n              {{ getLengthUnitEnum(unit) }}\r\n            </mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </div>\r\n      <div\r\n        *ngIf=\"labelFlag === labelType.Area || polygonCheck === 2\"\r\n        class=\"fields-container\"\r\n      >\r\n        <mat-form-field class=\"readOnly-Input\">\r\n          <mat-label>{{ 'igo.geo.draw.labelType.Area' | translate }}</mat-label>\r\n          <input\r\n            #input\r\n            matInput\r\n            placeholder=\"{{ 'igo.geo.draw.labelType.Area' | translate }}\"\r\n            value=\"{{ currentArea }}\"\r\n            readonly\r\n          />\r\n        </mat-form-field>\r\n        <mat-form-field class=\"unit-field\">\r\n          <mat-select\r\n            [value]=\"areaMeasureUnit\"\r\n            (selectionChange)=\"onChangeAreaUnit($event.value)\"\r\n          >\r\n            <mat-option *ngFor=\"let unit of allAreaUnits\" [value]=\"unit\">\r\n              {{ getAreaUnitEnum(unit) }}\r\n            </mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\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()\">\r\n      {{ noLabelButton() }}\r\n    </button>\r\n  </div>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"labelFlag === labelType.Custom\">\r\n  <div mat-dialog-content class=\"geometry-type-toggle\">\r\n    <div class=\"button-toggle-container\">\r\n      <mat-button-toggle-group\r\n        (change)=\"onLabelTypeChange($event.value)\"\r\n        [value]=\"customOrPredefined\"\r\n      >\r\n        <mat-button-toggle [value]=\"labelType.Custom\">\r\n          {{ 'igo.geo.draw.labelType.custom' | translate }}\r\n        </mat-button-toggle>\r\n        <mat-button-toggle [value]=\"labelType.Predefined\">\r\n          {{ 'igo.geo.draw.labelType.predefined' | translate }}\r\n        </mat-button-toggle>\r\n      </mat-button-toggle-group>\r\n    </div>\r\n    <p>\r\n      {{ 'igo.geo.draw.dialogInstruction' | translate }}\r\n    </p>\r\n    <mat-form-field class=\"input\">\r\n      <mat-label>{{ 'igo.geo.draw.dialogTitle' | translate }}</mat-label>\r\n      <input\r\n        #input\r\n        matInput\r\n        (select)=\"(true)\"\r\n        (input)=\"getLabelLength($event.target.value)\"\r\n        placeholder=\"{{ 'igo.geo.draw.dialogTitle' | translate }}\"\r\n        value=\"{{ currentLabel }}\"\r\n        cdkFocusInitial\r\n      />\r\n    </mat-form-field>\r\n  </div>\r\n\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      {{ noLabelButton() }}\r\n    </button>\r\n  </div>\r\n</ng-container>\r\n", styles: [":host .mat-mdc-radio-button~.mat-radio-button{margin-left:12px}:host .readOnly-Input{width:200px!important}:host .button-toggle-container{margin-bottom:12px}:host .unit-field{margin-left:12px}:host .unit-field ::ng-deep .mat-mdc-form-field-infix{width:-moz-fit-content;width:fit-content}:host .unit-field ::ng-deep .mat-mdc-select-min-line{padding-right:24px}:host .mat-mdc-form-field{position:sticky!important}:host .coordinatesInputView{top:5em!important}:host .mat-mdc-dialog-actions{display:flex!important;justify-content:flex-end}:host .input{width:auto!important}:host .mat-button-toggle-group,:host .mat-button-toggle{width:100%}:host mat-checkbox{margin-right:10px}:host ::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{display:none}\n"] }]
     }], function () { return [{ type: i2.LanguageService }, { type: i1$3.MatDialogRef }, { type: undefined, decorators: [{
                 type: Inject,
                 args: [MAT_DIALOG_DATA]
@@ -24189,7 +24189,7 @@ class DrawShorcutsComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DrawShorcutsComponent, [{
         type: Component,
-        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\n      >{{ 'igo.geo.draw.finish' | translate }}</span\n    >\n  </div>\n  <div>\n    <span class=\"shortcut mat-typography\">\n      <mat-icon class=\"shortcut-icon\" svgIcon=\"backspace-outline\"></mat-icon\n      >{{ 'igo.geo.draw.undo' | translate }}</span\n    >\n  </div>\n  <div>\n    <span class=\"shortcut mat-typography\">\n      <mat-icon class=\"shortcut-icon\" svgIcon=\"keyboard-esc\"></mat-icon\n      >{{ 'igo.geo.draw.abort' | translate }}</span\n    >\n  </div>\n  <div>\n    <span class=\"shortcut mat-typography\">\n      <mat-icon class=\"shortcut-icon\" svgIcon=\"keyboard-space\"></mat-icon\n      >{{ 'igo.geo.draw.move' | translate }}</span\n    >\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>\n", 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>\r\n  <div>\r\n    <span class=\"shortcut mat-typography\">\r\n      <mat-icon class=\"shortcut-icon\" svgIcon=\"keyboard-return\"></mat-icon\r\n      >{{ 'igo.geo.draw.finish' | translate }}</span\r\n    >\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\r\n      >{{ 'igo.geo.draw.undo' | translate }}</span\r\n    >\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\r\n      >{{ 'igo.geo.draw.abort' | translate }}</span\r\n    >\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\r\n      >{{ 'igo.geo.draw.move' | translate }}</span\r\n    >\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>\r\n", styles: [".shortcut{display:flex;align-items:center}.shortcut-icon{margin-right:10px}.shortcuts-close{display:flex;justify-content:center}\n"] }]
     }], null, null); })();
 
 function FeatureDetailsComponent_table_0_tr_2_td_1_Template(rf, ctx) { if (rf & 1) {
@@ -24596,7 +24596,7 @@ class FeatureDetailsComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FeatureDetailsComponent, [{
         type: Component,
-        args: [{ selector: 'igo-feature-details', changeDetection: ChangeDetectionStrategy.OnPush, template: "<table\n  class=\"igo-striped mat-typography\"\n  *ngIf=\"\n    ready &&\n    feature &&\n    isObject(feature.properties) &&\n    feature.properties.target !== 'iframe'\n  \"\n>\n  <tbody>\n    <tr *ngFor=\"let property of filterFeatureProperties(feature) | keyvalue\">\n      <td\n        *ngIf=\"feature.properties.target === '_blank' && property.key === 'url'\"\n      >\n        <mat-icon matListItemIcon svgIcon=\"{{ icon }}\"></mat-icon>\n      </td>\n\n      <td\n        *ngIf=\"feature.properties.target === '_blank' && property.key === 'url'\"\n      >\n        <a\n          href=\"{{ property.value }}\"\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n        >\n          {{ 'igo.geo.targetHtmlUrl' | translate }} {{ title }}</a\n        >\n        <button\n          class=\"copyClipboard\"\n          mat-icon-button\n          (click)=\"copyTextToClipboard(property.value)\"\n        >\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\n        *ngIf=\"\n          feature.properties.target === undefined &&\n          !isObject(property.value) &&\n          !isUrl(property.value) &&\n          !isEmbeddedLink(property.value)\n        \"\n        [innerHTML]=\"property.value\"\n      ></td>\n\n      <td\n        *ngIf=\"\n          feature.properties.target === undefined &&\n          isEmbeddedLink(property.value)\n        \"\n      >\n        <u\n          [ngStyle]=\"{ cursor: 'pointer', color: 'blue' }\"\n          (click)=\"openSecureUrl(property.value)\"\n          >{{ getEmbeddedLinkText(property.value) }}</u\n        >\n      </td>\n\n      <td\n        *ngIf=\"\n          feature.properties.target === undefined &&\n          !isObject(property.value) &&\n          (isDoc(property.value) || isUrl(property.value)) &&\n          !isImg(property.value)\n        \"\n      >\n        <u\n          [ngStyle]=\"{ cursor: 'pointer', color: 'blue' }\"\n          (click)=\"openSecureUrl(property.value)\"\n          >{{ 'igo.geo.targetHtmlUrl' | translate }}</u\n        >\n        <button\n          class=\"copyClipboard\"\n          mat-icon-button\n          (click)=\"copyTextToClipboard(property.value)\"\n        >\n          <mat-icon svgIcon=\"content-copy\"></mat-icon>\n        </button>\n      </td>\n\n      <td\n        *ngIf=\"\n          feature.properties.target === undefined &&\n          !isObject(property.value) &&\n          isUrl(property.value) &&\n          isImg(property.value)\n        \"\n      >\n        <a\n          href=\"{{ property.value }}\"\n          target=\"_blank\"\n          (click)=\"openSecureUrl(property.value)\"\n          rel=\"noopener noreferrer\"\n        >\n          <img\n            igoImageError\n            src=\"{{ property.value | secureImage | async }}\"\n            width=\"225\"\n            height=\"auto\"\n          />\n        </a>\n      </td>\n\n      <td\n        *ngIf=\"\n          feature.properties.target === undefined && isObject(property.value)\n        \"\n        [innerHTML]=\"property.value | json\"\n      ></td>\n    </tr>\n  </tbody>\n</table>\n\n<iframe\n  *ngIf=\"isHtmlDisplay()\"\n  [srcdoc]=\"htmlSanitizer(feature.properties)\"\n  [src]=\"urlSanitizer(feature.properties.url)\"\n></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"] }]
+        args: [{ selector: 'igo-feature-details', changeDetection: ChangeDetectionStrategy.OnPush, template: "<table\r\n  class=\"igo-striped mat-typography\"\r\n  *ngIf=\"\r\n    ready &&\r\n    feature &&\r\n    isObject(feature.properties) &&\r\n    feature.properties.target !== 'iframe'\r\n  \"\r\n>\r\n  <tbody>\r\n    <tr *ngFor=\"let property of filterFeatureProperties(feature) | keyvalue\">\r\n      <td\r\n        *ngIf=\"feature.properties.target === '_blank' && property.key === 'url'\"\r\n      >\r\n        <mat-icon matListItemIcon svgIcon=\"{{ icon }}\"></mat-icon>\r\n      </td>\r\n\r\n      <td\r\n        *ngIf=\"feature.properties.target === '_blank' && property.key === 'url'\"\r\n      >\r\n        <a\r\n          href=\"{{ property.value }}\"\r\n          target=\"_blank\"\r\n          rel=\"noopener noreferrer\"\r\n        >\r\n          {{ 'igo.geo.targetHtmlUrl' | translate }} {{ title }}</a\r\n        >\r\n        <button\r\n          class=\"copyClipboard\"\r\n          mat-icon-button\r\n          (click)=\"copyTextToClipboard(property.value)\"\r\n        >\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\r\n        *ngIf=\"\r\n          feature.properties.target === undefined &&\r\n          !isObject(property.value) &&\r\n          !isUrl(property.value) &&\r\n          !isEmbeddedLink(property.value)\r\n        \"\r\n        [innerHTML]=\"property.value\"\r\n      ></td>\r\n\r\n      <td\r\n        *ngIf=\"\r\n          feature.properties.target === undefined &&\r\n          isEmbeddedLink(property.value)\r\n        \"\r\n      >\r\n        <u\r\n          [ngStyle]=\"{ cursor: 'pointer', color: 'blue' }\"\r\n          (click)=\"openSecureUrl(property.value)\"\r\n          >{{ getEmbeddedLinkText(property.value) }}</u\r\n        >\r\n      </td>\r\n\r\n      <td\r\n        *ngIf=\"\r\n          feature.properties.target === undefined &&\r\n          !isObject(property.value) &&\r\n          (isDoc(property.value) || isUrl(property.value)) &&\r\n          !isImg(property.value)\r\n        \"\r\n      >\r\n        <u\r\n          [ngStyle]=\"{ cursor: 'pointer', color: 'blue' }\"\r\n          (click)=\"openSecureUrl(property.value)\"\r\n          >{{ 'igo.geo.targetHtmlUrl' | translate }}</u\r\n        >\r\n        <button\r\n          class=\"copyClipboard\"\r\n          mat-icon-button\r\n          (click)=\"copyTextToClipboard(property.value)\"\r\n        >\r\n          <mat-icon svgIcon=\"content-copy\"></mat-icon>\r\n        </button>\r\n      </td>\r\n\r\n      <td\r\n        *ngIf=\"\r\n          feature.properties.target === undefined &&\r\n          !isObject(property.value) &&\r\n          isUrl(property.value) &&\r\n          isImg(property.value)\r\n        \"\r\n      >\r\n        <a\r\n          href=\"{{ property.value }}\"\r\n          target=\"_blank\"\r\n          (click)=\"openSecureUrl(property.value)\"\r\n          rel=\"noopener noreferrer\"\r\n        >\r\n          <img\r\n            igoImageError\r\n            src=\"{{ property.value | secureImage | async }}\"\r\n            width=\"225\"\r\n            height=\"auto\"\r\n          />\r\n        </a>\r\n      </td>\r\n\r\n      <td\r\n        *ngIf=\"\r\n          feature.properties.target === undefined && isObject(property.value)\r\n        \"\r\n        [innerHTML]=\"property.value | json\"\r\n      ></td>\r\n    </tr>\r\n  </tbody>\r\n</table>\r\n\r\n<iframe\r\n  *ngIf=\"isHtmlDisplay()\"\r\n  [srcdoc]=\"htmlSanitizer(feature.properties)\"\r\n  [src]=\"urlSanitizer(feature.properties.url)\"\r\n></iframe>\r\n", styles: ["table{width:100%}table td{padding:5px}#keyValue{width:30%}table ::ng-deep .routing{cursor:pointer}iframe{height:calc(100% - 4px);width:100%;border:0}.copyClipboard{border:none;background:transparent;cursor:pointer}\n"] }]
     }], function () { return [{ type: i1.HttpClient }, { type: i0.ChangeDetectorRef }, { type: i2$3.DomSanitizer }, { type: i2.NetworkService }, { type: i2.MessageService }, { type: i2.ConfigService }]; }, { source: [{
             type: Input
         }], map: [{
@@ -24713,7 +24713,7 @@ class FeatureFormComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FeatureFormComponent, [{
         type: Component,
-        args: [{ selector: 'igo-feature-form', changeDetection: ChangeDetectionStrategy.OnPush, template: "<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</igo-form>\n", styles: [":host{display:block}igo-form{height:100%}\n"] }]
+        args: [{ selector: 'igo-feature-form', changeDetection: ChangeDetectionStrategy.OnPush, template: "<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</igo-form>\r\n", styles: [":host{display:block}igo-form{height:100%}\n"] }]
     }], function () { return []; }, { form: [{
             type: Input
         }], feature: [{
@@ -27034,7 +27034,7 @@ class DrawComponent {
                         transition('open => closed', [animate('600ms ease')]),
                         transition('closed => open', [animate('800ms ease')])
                     ])
-                ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div>\n  <div class=\"geometry-type-toggle mat-typography\">\n    <mat-button-toggle-group\n      (change)=\"onGeometryTypeChange($event.value)\"\n      [value]=\"geometryType.Point\"\n    >\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    >\n      {{ 'igo.geo.draw.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\n    <mat-slide-toggle\n      *ngIf=\"!isPoint()\"\n      [checked]=\"freehandMode\"\n      [labelPosition]=\"'before'\"\n      (change)=\"onToggleFreehandMode($event)\"\n    >\n      {{ 'igo.geo.draw.freehandMode' | translate }}\n    </mat-slide-toggle>\n\n    <div class=\"radius-unit\" *ngIf=\"isCircle()\">\n      <form class=\"radius-form\">\n        <mat-form-field class=\"radius\">\n          <input\n            matInput\n            type=\"number\"\n            min=\"0\"\n            placeholder=\"{{ 'igo.geo.spatialFilter.radius' | translate }}\"\n            [formControl]=\"radiusFormControl\"\n            [readonly]=\"this.freehandMode\"\n          />\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        >\n          <mat-option\n            *ngFor=\"let measureUnit of measureUnits\"\n            [value]=\"measureUnit\"\n          >\n            {{ 'igo.geo.measure.' + measureUnit | translate }}\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n    </div>\n  </div>\n\n  <mat-divider></mat-divider>\n\n  <div class=\"layer-select-container\">\n    <mat-form-field class=\"layer-select\" subscriptSizing=\"dynamic\">\n      <mat-label>{{ 'igo.geo.draw.layer.title' | translate }}</mat-label>\n      <mat-select\n        #selectedLayer\n        (selectionChange)=\"onLayerChange(selectedLayer.value)\"\n        [value]=\"updateActiveLayer()\"\n      >\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]=\"\n        activeDrawingLayer.visible\n          ? ('igo.geo.layer.hideLayer' | translate)\n          : ('igo.geo.layer.showLayer' | translate)\n      \"\n      (click)=\"activeDrawingLayer.visible = !activeDrawingLayer.visible\"\n    >\n      <mat-icon [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    >\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      >\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()\">{{\n          'igo.geo.draw.noIcon' | translate\n        }}</mat-option>\n        <mat-option\n          *ngFor=\"let icon_html of icons\"\n          [value]=\"icon_html\"\n          (click)=\"onIconChange(icon_html)\"\n        >\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  <div class=\"actions-container\">\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.style.styleModalTooltipSelected' | translate\"\n    >\n      {{ 'igo.geo.style.styleModal' | translate }}\n      <mat-icon\n        aria-hidden=\"false\"\n        iconPositionEnd\n        class=\"style-icon\"\n        svgIcon=\"palette\"\n        [matBadge]=\"selectedFeatures$.value.length\"\n        matBadgeColor=\"warn\"\n        matBadgeSize=\"medium\"\n      >\n      </mat-icon>\n    </button>\n  </div>\n</div>\n", styles: [":host .geometry-type-toggle{padding:10px;text-align:center}:host .geometry-type-toggle mat-button-toggle-group{width:100%}:host .geometry-type-toggle mat-button-toggle-group mat-button-toggle{width:25%}:host .draw-options mat-slide-toggle{width:100%;padding:10px}:host .draw-options mat-slide-toggle ::ng-deep .mdc-form-field{width:100%}:host .draw-options mat-slide-toggle ::ng-deep .mdc-label{margin-left:0;width:calc(100% - 60px)}:host .icon-options{margin:5px 5px 0}:host .deleteBtn{margin-left:16px}:host .edition-drawing{padding:10px 0}:host img{width:100%;height:100%}:host .deleteBtn{margin-left:12px}:host .storeTable{height:auto!important}:host .layer-select{flex:1;margin-right:8px}:host .input-button-container{padding:10px}:host .input-button-container mat-form-field{width:25%}:host .input-button-container button{left:8px;bottom:10px}:host .radius{display:flex;flex-flow:column nowrap;width:110%}:host .unit-field{width:110px;margin-left:30px}:host .radius-unit{display:flex;width:100%;padding:4px 8px}:host ::ng-deep igo-entity-table td:last-child{text-align:right!important}:host ::ng-deep igo-entity-table td:last-child button{margin:0%!important}:host .layer-select-container{margin:16px 8px}:host .actions-container,:host .layer-select-container{display:flex;align-items:center}\n"] }]
+                ], 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)\"\r\n      [value]=\"geometryType.Point\"\r\n    >\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    >\r\n      {{ 'igo.geo.draw.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\r\n    <mat-slide-toggle\r\n      *ngIf=\"!isPoint()\"\r\n      [checked]=\"freehandMode\"\r\n      [labelPosition]=\"'before'\"\r\n      (change)=\"onToggleFreehandMode($event)\"\r\n    >\r\n      {{ 'igo.geo.draw.freehandMode' | translate }}\r\n    </mat-slide-toggle>\r\n\r\n    <div class=\"radius-unit\" *ngIf=\"isCircle()\">\r\n      <form class=\"radius-form\">\r\n        <mat-form-field class=\"radius\">\r\n          <input\r\n            matInput\r\n            type=\"number\"\r\n            min=\"0\"\r\n            placeholder=\"{{ 'igo.geo.spatialFilter.radius' | translate }}\"\r\n            [formControl]=\"radiusFormControl\"\r\n            [readonly]=\"this.freehandMode\"\r\n          />\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        >\r\n          <mat-option\r\n            *ngFor=\"let measureUnit of measureUnits\"\r\n            [value]=\"measureUnit\"\r\n          >\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  </div>\r\n\r\n  <mat-divider></mat-divider>\r\n\r\n  <div class=\"layer-select-container\">\r\n    <mat-form-field class=\"layer-select\" subscriptSizing=\"dynamic\">\r\n      <mat-label>{{ 'igo.geo.draw.layer.title' | translate }}</mat-label>\r\n      <mat-select\r\n        #selectedLayer\r\n        (selectionChange)=\"onLayerChange(selectedLayer.value)\"\r\n        [value]=\"updateActiveLayer()\"\r\n      >\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]=\"\r\n        activeDrawingLayer.visible\r\n          ? ('igo.geo.layer.hideLayer' | translate)\r\n          : ('igo.geo.layer.showLayer' | translate)\r\n      \"\r\n      (click)=\"activeDrawingLayer.visible = !activeDrawingLayer.visible\"\r\n    >\r\n      <mat-icon [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    >\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      >\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()\">{{\r\n          'igo.geo.draw.noIcon' | translate\r\n        }}</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        >\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  <div class=\"actions-container\">\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.style.styleModalTooltipSelected' | translate\"\r\n    >\r\n      {{ 'igo.geo.style.styleModal' | translate }}\r\n      <mat-icon\r\n        aria-hidden=\"false\"\r\n        iconPositionEnd\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      >\r\n      </mat-icon>\r\n    </button>\r\n  </div>\r\n</div>\r\n", styles: [":host .geometry-type-toggle{padding:10px;text-align:center}:host .geometry-type-toggle mat-button-toggle-group{width:100%}:host .geometry-type-toggle mat-button-toggle-group mat-button-toggle{width:25%}:host .draw-options mat-slide-toggle{width:100%;padding:10px}:host .draw-options mat-slide-toggle ::ng-deep .mdc-form-field{width:100%}:host .draw-options mat-slide-toggle ::ng-deep .mdc-label{margin-left:0;width:calc(100% - 60px)}:host .icon-options{margin:5px 5px 0}:host .deleteBtn{margin-left:16px}:host .edition-drawing{padding:10px 0}:host img{width:100%;height:100%}:host .deleteBtn{margin-left:12px}:host .storeTable{height:auto!important}:host .layer-select{flex:1;margin-right:8px}:host .input-button-container{padding:10px}:host .input-button-container mat-form-field{width:25%}:host .input-button-container button{left:8px;bottom:10px}:host .radius{display:flex;flex-flow:column nowrap;width:110%}:host .unit-field{width:110px;margin-left:30px}:host .radius-unit{display:flex;width:100%;padding:4px 8px}:host ::ng-deep igo-entity-table td:last-child{text-align:right!important}:host ::ng-deep igo-entity-table td:last-child button{margin:0%!important}:host .layer-select-container{margin:16px 8px}:host .actions-container,:host .layer-select-container{display:flex;align-items:center}\n"] }]
     }], function () { return [{ type: i2.LanguageService }, { type: i2$1.UntypedFormBuilder }, { type: DrawStyleService }, { type: i1$3.MatDialog }, { type: DrawIconService }]; }, { map: [{
             type: Input
         }], stores: [{
@@ -28173,7 +28173,7 @@ class MeasurerDialogComponent {
 }
 (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>\n<div mat-dialog-content>\n  <table *ngIf=\"data.length > 0\" class=\"mat-typography\">\n    <thead>\n      <tr>\n        <th colspan=\"2\">\n          {{ 'igo.geo.measure.dialog.length.title' | translate }}\n        </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>\n          {{ data.length | measureFormat: measureLengthUnit.Kilometers }}\n        </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\" class=\"mat-typography\">\n    <thead>\n      <tr>\n        <th colspan=\"2\">\n          {{ 'igo.geo.measure.dialog.area.title' | translate }}\n        </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>\n          {{ data.area | measureFormat: measureAreaUnit.SquareKilometers }}\n        </td>\n        <td>\n          {{ 'igo.geo.measure.dialog.areaInSquareKilometers' | translate }}\n        </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</div>\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>\r\n<div mat-dialog-content>\r\n  <table *ngIf=\"data.length > 0\" class=\"mat-typography\">\r\n    <thead>\r\n      <tr>\r\n        <th colspan=\"2\">\r\n          {{ 'igo.geo.measure.dialog.length.title' | translate }}\r\n        </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>\r\n          {{ data.length | measureFormat: measureLengthUnit.Kilometers }}\r\n        </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\" class=\"mat-typography\">\r\n    <thead>\r\n      <tr>\r\n        <th colspan=\"2\">\r\n          {{ 'igo.geo.measure.dialog.area.title' | translate }}\r\n        </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>\r\n          {{ data.area | measureFormat: measureAreaUnit.SquareKilometers }}\r\n        </td>\r\n        <td>\r\n          {{ 'igo.geo.measure.dialog.areaInSquareKilometers' | translate }}\r\n        </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</div>\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"] }]
     }], function () { return [{ type: i1$3.MatDialogRef }, { type: undefined, decorators: [{
                 type: Inject,
                 args: [MAT_DIALOG_DATA]
@@ -29265,7 +29265,7 @@ class MeasurerComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MeasurerComponent, [{
         type: Component,
-        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    >\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    >\n      {{ 'igo.geo.measure.toggleActive' | translate }}\n    </mat-slide-toggle>\n\n    <mat-divider *ngIf=\"hasLine$ | async\"></mat-divider>\n\n    <mat-slide-toggle\n      *ngIf=\"hasLine$ | async\"\n      [checked]=\"displayLines\"\n      [labelPosition]=\"'before'\"\n      (change)=\"onToggleDisplayLines($event.checked)\"\n    >\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\n      *ngIf=\"hasArea$ | async\"\n      [checked]=\"displayDistance\"\n      [labelPosition]=\"'before'\"\n      (change)=\"onToggleDisplayDistance($event.checked)\"\n    >\n      {{ 'igo.geo.measure.toggleDisplayDistance' | translate }}\n    </mat-slide-toggle>\n\n    <mat-slide-toggle\n      *ngIf=\"hasArea$ | async\"\n      [checked]=\"displayAreas\"\n      [labelPosition]=\"'before'\"\n      (change)=\"onToggleDisplayAreas($event.checked)\"\n    >\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    >\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\n      *ngIf=\"\n        activeMeasureType === measureType.Length ||\n        activeMeasureType === measureType.Area\n      \"\n      [measureType]=\"measureType.Length\"\n      [measureUnit]=\"measureLengthUnit.Meters\"\n      [measure]=\"measure.length\"\n      [auto]=\"measureUnitsAuto\"\n      [placeholder]=\"\n        (activeMeasureType === measureType.Area\n          ? 'igo.geo.measure.perimeter'\n          : 'igo.geo.measure.length'\n        ) | translate\n      \"\n      (measureUnitChange)=\"onLengthUnitChange($event)\"\n    >\n    </igo-measurer-item>\n\n    <igo-measurer-item\n      *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    >\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\n      *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    >\n      <mat-icon svgIcon=\"calculator\"></mat-icon>\n    </button>\n\n    <button\n      *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    >\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  >\n  </igo-entity-table>\n</div>\n", styles: [":host .measure-type-toggle{padding:10px;text-align:center}:host .measure-type-toggle mat-button-toggle-group{width:100%}:host .measure-type-toggle mat-button-toggle-group mat-button-toggle{width:50%}:host .measure-options mat-slide-toggle{width:100%;padding:10px}:host .measure-options mat-slide-toggle ::ng-deep .mdc-form-field{width:100%}:host .measure-options mat-slide-toggle ::ng-deep .mdc-label{margin-left:0;width:calc(100% - 60px)}:host .measure-store-buttons{margin-left:-2px}:host .measure-store-buttons button:first-of-type{margin-left:14px}:host .table-compact ::ng-deep .mat-mdc-header-cell.mat-column-selectionCheckbox{width:52px}:host .igo-map-tooltip{position:relative;border-radius:4px;padding:4px 8px;white-space:nowrap}:host .igo-map-tooltip-hidden{display:none}:host .igo-map-tooltip-measure-by-display{display:none}\n"] }]
+        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    >\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    >\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\r\n      *ngIf=\"hasLine$ | async\"\r\n      [checked]=\"displayLines\"\r\n      [labelPosition]=\"'before'\"\r\n      (change)=\"onToggleDisplayLines($event.checked)\"\r\n    >\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\r\n      *ngIf=\"hasArea$ | async\"\r\n      [checked]=\"displayDistance\"\r\n      [labelPosition]=\"'before'\"\r\n      (change)=\"onToggleDisplayDistance($event.checked)\"\r\n    >\r\n      {{ 'igo.geo.measure.toggleDisplayDistance' | translate }}\r\n    </mat-slide-toggle>\r\n\r\n    <mat-slide-toggle\r\n      *ngIf=\"hasArea$ | async\"\r\n      [checked]=\"displayAreas\"\r\n      [labelPosition]=\"'before'\"\r\n      (change)=\"onToggleDisplayAreas($event.checked)\"\r\n    >\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    >\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\r\n      *ngIf=\"\r\n        activeMeasureType === measureType.Length ||\r\n        activeMeasureType === measureType.Area\r\n      \"\r\n      [measureType]=\"measureType.Length\"\r\n      [measureUnit]=\"measureLengthUnit.Meters\"\r\n      [measure]=\"measure.length\"\r\n      [auto]=\"measureUnitsAuto\"\r\n      [placeholder]=\"\r\n        (activeMeasureType === measureType.Area\r\n          ? 'igo.geo.measure.perimeter'\r\n          : 'igo.geo.measure.length'\r\n        ) | translate\r\n      \"\r\n      (measureUnitChange)=\"onLengthUnitChange($event)\"\r\n    >\r\n    </igo-measurer-item>\r\n\r\n    <igo-measurer-item\r\n      *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    >\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\r\n      *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    >\r\n      <mat-icon svgIcon=\"calculator\"></mat-icon>\r\n    </button>\r\n\r\n    <button\r\n      *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    >\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  >\r\n  </igo-entity-table>\r\n</div>\r\n", styles: [":host .measure-type-toggle{padding:10px;text-align:center}:host .measure-type-toggle mat-button-toggle-group{width:100%}:host .measure-type-toggle mat-button-toggle-group mat-button-toggle{width:50%}:host .measure-options mat-slide-toggle{width:100%;padding:10px}:host .measure-options mat-slide-toggle ::ng-deep .mdc-form-field{width:100%}:host .measure-options mat-slide-toggle ::ng-deep .mdc-label{margin-left:0;width:calc(100% - 60px)}:host .measure-store-buttons{margin-left:-2px}:host .measure-store-buttons button:first-of-type{margin-left:14px}:host .table-compact ::ng-deep .mat-mdc-header-cell.mat-column-selectionCheckbox{width:52px}:host .igo-map-tooltip{position:relative;border-radius:4px;padding:4px 8px;white-space:nowrap}:host .igo-map-tooltip-hidden{display:none}:host .igo-map-tooltip-measure-by-display{display:none}\n"] }]
     }], function () { return [{ type: i2.LanguageService }, { type: i1$3.MatDialog }, { type: i2.StorageService }]; }, { map: [{
             type: Input
         }], store: [{
@@ -29831,7 +29831,7 @@ class GeometryFormFieldInputComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(GeometryFormFieldInputComponent, [{
         type: Component,
-        args: [{ selector: 'igo-geometry-form-field-input', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template></ng-template>\n" }]
+        args: [{ selector: 'igo-geometry-form-field-input', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template></ng-template>\r\n" }]
     }], function () { return [{ type: i0.ChangeDetectorRef }, { type: i2$1.NgControl, decorators: [{
                 type: Optional
             }, {
@@ -30038,7 +30038,7 @@ GeometryFormFieldComponent = __decorate([
 ], GeometryFormFieldComponent);
 (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\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>\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  >\n    <mat-button-toggle\n      value=\"Point\"\n      [disabled]=\"geometryTypes.indexOf('Point') < 0\"\n    >\n      {{ 'igo.geo.geometry.point' | translate }}\n    </mat-button-toggle>\n    <mat-button-toggle\n      value=\"LineString\"\n      [disabled]=\"geometryTypes.indexOf('LineString') < 0\"\n    >\n      {{ 'igo.geo.geometry.line' | translate }}\n    </mat-button-toggle>\n    <mat-button-toggle\n      value=\"Polygon\"\n      [disabled]=\"geometryTypes.indexOf('Polygon') < 0\"\n    >\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  />\n  <mat-icon matPrefix [color]=\"'primary'\" svgIcon=\"adjust\"> </mat-icon>\n  <span matSuffix class=\"draw-guide-units\">{{\n    'igo.geo.measure.meters' | translate\n  }}</span>\n</mat-form-field>\n", 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\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>\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  >\r\n    <mat-button-toggle\r\n      value=\"Point\"\r\n      [disabled]=\"geometryTypes.indexOf('Point') < 0\"\r\n    >\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    >\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    >\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  />\r\n  <mat-icon matPrefix [color]=\"'primary'\" svgIcon=\"adjust\"> </mat-icon>\r\n  <span matSuffix class=\"draw-guide-units\">{{\r\n    'igo.geo.measure.meters' | translate\r\n  }}</span>\r\n</mat-form-field>\r\n", 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: [{
@@ -30263,7 +30263,7 @@ class OgcFilterButtonComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(OgcFilterButtonComponent, [{
         type: Component,
-        args: [{ selector: 'igo-ogc-filter-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  *ngIf=\"\n    header &&\n    options.ogcFilters &&\n    options.ogcFilters.enabled &&\n    (options.ogcFilters.pushButtons ||\n      options.ogcFilters.checkboxes ||\n      options.ogcFilters.radioButtons ||\n      options.ogcFilters.select ||\n      options.ogcFilters.autocomplete ||\n      options.ogcFilters.editable)\n  \"\n  mat-icon-button\n  collapsibleButton\n  tooltip-position=\"below\"\n  matTooltipShowDelay=\"500\"\n  [matTooltip]=\"'igo.geo.filter.filterBy' | translate\"\n  [color]=\"color\"\n>\n  <mat-icon\n    aria-hidden=\"false\"\n    [matBadge]=\"badge\"\n    matBadgeColor=\"warn\"\n    matBadgeSize=\"medium\"\n    svgIcon=\"filter\"\n  ></mat-icon>\n</button>\n\n<div\n  #ogcFilter\n  class=\"igo-layer-actions-container\"\n  *ngIf=\"\n    options.ogcFilters &&\n    options.ogcFilters.enabled &&\n    (options.ogcFilters.pushButtons ||\n      options.ogcFilters.checkboxes ||\n      options.ogcFilters.radioButtons ||\n      options.ogcFilters.select ||\n      options.ogcFilters.autocomplete ||\n      options.ogcFilters.editable)\n  \"\n>\n  <igo-ogc-filterable-item\n    *ngIf=\"ogcFilterCollapse && options.ogcFilters.enabled\"\n    igoListItem\n    [header]=\"false\"\n    [map]=\"layer.map\"\n    [layer]=\"layer\"\n  >\n  </igo-ogc-filterable-item>\n</div>\n" }]
+        args: [{ selector: 'igo-ogc-filter-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\r\n  *ngIf=\"\r\n    header &&\r\n    options.ogcFilters &&\r\n    options.ogcFilters.enabled &&\r\n    (options.ogcFilters.pushButtons ||\r\n      options.ogcFilters.checkboxes ||\r\n      options.ogcFilters.radioButtons ||\r\n      options.ogcFilters.select ||\r\n      options.ogcFilters.autocomplete ||\r\n      options.ogcFilters.editable)\r\n  \"\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>\r\n  <mat-icon\r\n    aria-hidden=\"false\"\r\n    [matBadge]=\"badge\"\r\n    matBadgeColor=\"warn\"\r\n    matBadgeSize=\"medium\"\r\n    svgIcon=\"filter\"\r\n  ></mat-icon>\r\n</button>\r\n\r\n<div\r\n  #ogcFilter\r\n  class=\"igo-layer-actions-container\"\r\n  *ngIf=\"\r\n    options.ogcFilters &&\r\n    options.ogcFilters.enabled &&\r\n    (options.ogcFilters.pushButtons ||\r\n      options.ogcFilters.checkboxes ||\r\n      options.ogcFilters.radioButtons ||\r\n      options.ogcFilters.select ||\r\n      options.ogcFilters.autocomplete ||\r\n      options.ogcFilters.editable)\r\n  \"\r\n>\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  >\r\n  </igo-ogc-filterable-item>\r\n</div>\r\n" }]
     }], function () { return []; }, { layer: [{
             type: Input
         }], map: [{
@@ -31148,7 +31148,7 @@ class OgcFilterFormComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(OgcFilterFormComponent, [{
         type: Component,
-        args: [{ selector: 'igo-ogc-filter-form', template: "<div class=\"ogc-filter-form-container\">\n  <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  >\n  </mat-checkbox>\n\n  <mat-form-field\n    [ngClass]=\"{\n      logical:\n        activeFilters.indexOf(currentFilter) !== 0 &&\n        currentFilter.active === true,\n      logicalHidden:\n        activeFilters.indexOf(currentFilter) === 0 ||\n        currentFilter.active !== true\n    }\"\n  >\n    <mat-select\n      [disabled]=\"!currentFilter.active\"\n      [value]=\"currentFilter.parentLogical\"\n      tooltip-position=\"above\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"\n        currentFilter.parentLogical\n          ? ('igo.geo.operators.tooltip.' + currentFilter.parentLogical\n            | translate)\n          : ''\n      \"\n      (selectionChange)=\"changeLogical($event.value)\"\n    >\n      <mat-option\n        [value]=\"ogcFilterOperator.And\"\n        tooltip-position=\"above\"\n        matTooltipShowDelay=\"500\"\n        [matTooltip]=\"'igo.geo.operators.tooltip.And' | translate\"\n      >\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      >\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=\"\n      (currentFilterIsSpatial$ | async) === false &&\n      (fields$ | async) &&\n      (fields$ | async).length > 0 &&\n      (fields$ | async)[0].name !== ''\n    \"\n    (mouseenter)=\"inputClearable = 'selectField'\"\n    (mouseleave)=\"inputClearable = undefined\"\n    [floatLabel]=\"floatLabel\"\n  >\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]=\"\n        (selectedField$ | async)\n          ? (selectedField$ | async).alias\n          : ('igo.geo.sourceFields.selectField' | translate)\n      \"\n      (input)=\"updateFieldsList($event.target.value)\"\n    />\n    <mat-autocomplete\n      #autoCompleteField=\"matAutocomplete\"\n      (optionSelected)=\"changeField($event.option.id)\"\n    >\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      >\n        {{ field.alias }}\n      </mat-option>\n    </mat-autocomplete>\n    <button\n      *ngIf=\"\n        currentFilter.propertyName &&\n        inputClearable === 'selectField' &&\n        currentFilter.active\n      \"\n      matSuffix\n      mat-icon-button\n      aria-label=\"Clear\"\n      [disabled]=\"!currentFilter.active\"\n      (click)=\"clearSelectedField()\"\n    >\n      <mat-icon svgIcon=\"close\"></mat-icon>\n    </button>\n  </mat-form-field>\n\n  <mat-form-field\n    [ngClass]=\"{\n      operator: (currentFilterIsSpatial$ | async) === false,\n      dualInput: (currentFilterIsSpatial$ | async)\n    }\"\n    [floatLabel]=\"floatLabel\"\n  >\n    <mat-select\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"\n        currentFilter.operator\n          ? ('igo.geo.operators.tooltip.' + currentFilter.operator | translate)\n          : ('igo.geo.filter.selectOperator' | translate)\n      \"\n      [disabled]=\"!currentFilter.active\"\n      [value]=\"currentFilter.operator\"\n      (selectionChange)=\"changeOperator($event.value)\"\n    >\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      >\n        {{ 'igo.geo.operators.' + operator.key | translate }}\n      </mat-option>\n    </mat-select>\n  </mat-form-field>\n\n  <mat-form-field\n    class=\"spatialSelector\"\n    *ngIf=\"currentFilterIsSpatial$ | async\"\n  >\n    <mat-select\n      [disabled]=\"!currentFilter.active\"\n      [value]=\"currentFilter.igoSpatialSelector\"\n      (selectionChange)=\"changeSpatialSelector($event.value)\"\n    >\n      <mat-option\n        *ngFor=\"let igoSpatialSelector of igoSpatialSelectors\"\n        [value]=\"igoSpatialSelector.type\"\n      >\n        {{ 'igo.geo.spatialSelector.' + igoSpatialSelector.type | translate }}\n      </mat-option>\n    </mat-select>\n  </mat-form-field>\n\n  <mat-form-field\n    class=\"singleInput\"\n    *ngIf=\"['expression', 'pattern'].indexOf(detectProperty()) !== -1\"\n    (mouseenter)=\"inputClearable = 'selectProperty'\"\n    (mouseleave)=\"inputClearable = undefined\"\n    [floatLabel]=\"floatLabel\"\n  >\n    <input\n      matInput\n      [placeholder]=\"'igo.geo.filter.placeholder' | translate\"\n      [disabled]=\"!currentFilter.active\"\n      [matAutocomplete]=\"autoCompleteValues\"\n      [value]=\"\n        detectProperty() === 'expression'\n          ? currentFilter.expression\n          : currentFilter.pattern\n      \"\n      tooltip-position=\"above\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"\n        detectProperty() === 'expression'\n          ? currentFilter.expression || ''\n          : currentFilter.pattern || ''\n      \"\n      (input)=\"updateValuesList($event.target.value)\"\n    />\n    <mat-autocomplete\n      #autoCompleteValues=\"matAutocomplete\"\n      (optionSelected)=\"changeProperty($event.option.value)\"\n    >\n      <mat-option\n        *ngFor=\"let value of filteredValues$ | async\"\n        matTooltipShowDelay=\"500\"\n        [value]=\"value\"\n        [matTooltip]=\"value\"\n      >\n        {{ value }}\n      </mat-option>\n    </mat-autocomplete>\n    <button\n      *ngIf=\"\n        isClearable() &&\n        inputClearable === 'selectProperty' &&\n        currentFilter.active\n      \"\n      matSuffix\n      mat-icon-button\n      aria-label=\"Clear\"\n      [disabled]=\"!currentFilter.active\"\n      (click)=\"clearProperty()\"\n    >\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    >\n      <mat-icon svgIcon=\"delete\"></mat-icon>\n    </button>\n  </div>\n\n  <mat-form-field\n    class=\"snrc\"\n    *ngIf=\"\n      (currentFilterIsSpatial$ | async) &&\n      currentFilter.igoSpatialSelector === 'snrc'\n    \"\n    (mouseenter)=\"inputClearable = 'selectSNRC'\"\n    (mouseleave)=\"inputClearable = undefined\"\n    [floatLabel]=\"floatLabel\"\n  >\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    />\n    <button\n      *ngIf=\"currentFilter.igoSNRC\"\n      matSuffix\n      mat-icon-button\n      aria-label=\"Clear\"\n      [disabled]=\"\n        !currentFilter.active &&\n        inputClearable === 'selectSNRC' &&\n        currentFilter.active\n      \"\n      (click)=\"currentFilter.igoSNRC = ''\"\n    >\n      <mat-icon svgIcon=\"close\"></mat-icon>\n    </button>\n  </mat-form-field>\n\n  <ng-container\n    *ngIf=\"\n      (currentFilterIsSpatial$ | async) &&\n      currentFilter.igoSpatialSelector === 'fixedExtent'\n    \"\n  >\n    <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    >\n      <mat-icon svgIcon=\"arrow-expand-all\"></mat-icon>\n    </button>\n  </ng-container>\n</div>\n\n<div class=\"ogc-filter-form-container\">\n  <mat-form-field\n    class=\"dualInput\"\n    *ngIf=\"\n      !isTemporalOperator() &&\n      ['lowerBoundary', 'begin'].indexOf(detectProperty(1)) !== -1\n    \"\n    (mouseenter)=\"inputClearable = 'selectProperty1'\"\n    (mouseleave)=\"inputClearable = undefined\"\n    [floatLabel]=\"floatLabel\"\n  >\n    <input\n      matInput\n      [placeholder]=\"'igo.geo.filter.placeholder' | translate\"\n      [disabled]=\"!currentFilter.active\"\n      [matAutocomplete]=\"autoDualValueOperator1\"\n      type=\"number\"\n      [value]=\"\n        detectProperty(1) === 'lowerBoundary'\n          ? currentFilter.lowerBoundary\n          : currentFilter.begin\n      \"\n      (input)=\"updateValuesList($event.target.value, 1)\"\n    />\n    <mat-autocomplete\n      #autoDualValueOperator1=\"matAutocomplete\"\n      (optionSelected)=\"changeNumericProperty($event.option.value, 1)\"\n    >\n      <mat-option\n        *ngFor=\"let value of filteredValues$ | async\"\n        matTooltipShowDelay=\"500\"\n        [value]=\"value\"\n        [matTooltip]=\"value\"\n      >\n        {{ value }}\n      </mat-option>\n    </mat-autocomplete>\n    <button\n      *ngIf=\"\n        isClearable(1) &&\n        inputClearable === 'selectProperty1' &&\n        currentFilter.active\n      \"\n      matSuffix\n      mat-icon-button\n      aria-label=\"Clear\"\n      [disabled]=\"!currentFilter.active\"\n      (click)=\"clearProperty(1)\"\n    >\n      <mat-icon svgIcon=\"close\"></mat-icon>\n    </button>\n  </mat-form-field>\n\n  <mat-form-field\n    class=\"dualInput\"\n    *ngIf=\"\n      !isTemporalOperator() &&\n      ['upperBoundary', 'end'].indexOf(detectProperty(2)) !== -1\n    \"\n    (mouseenter)=\"inputClearable = 'selectProperty2'\"\n    (mouseleave)=\"inputClearable = undefined\"\n    [floatLabel]=\"floatLabel\"\n  >\n    <input\n      matInput\n      [placeholder]=\"'igo.geo.filter.placeholder' | translate\"\n      [disabled]=\"!currentFilter.active\"\n      [matAutocomplete]=\"autoDualValueOperator2\"\n      type=\"number\"\n      [value]=\"\n        detectProperty(2) === 'upperBoundary'\n          ? currentFilter.upperBoundary\n          : currentFilter.end\n      \"\n      (input)=\"updateValuesList($event.target.value, 2)\"\n    />\n    <mat-autocomplete\n      #autoDualValueOperator2=\"matAutocomplete\"\n      (optionSelected)=\"changeNumericProperty($event.option.value, 2)\"\n    >\n      <mat-option\n        *ngFor=\"let value of filteredValues$ | async\"\n        matTooltipShowDelay=\"500\"\n        [value]=\"value\"\n        [matTooltip]=\"value\"\n      >\n        {{ value }}\n      </mat-option>\n    </mat-autocomplete>\n    <button\n      *ngIf=\"\n        isClearable(2) &&\n        inputClearable === 'selectProperty2' &&\n        currentFilter.active\n      \"\n      matSuffix\n      mat-icon-button\n      aria-label=\"Clear\"\n      [disabled]=\"!currentFilter.active\"\n      (click)=\"clearProperty(2)\"\n    >\n      <mat-icon svgIcon=\"close\"></mat-icon>\n    </button>\n  </mat-form-field>\n</div>\n\n<igo-ogc-filter-time\n  *ngIf=\"isTemporalOperator()\"\n  [(datasource)]=\"datasource\"\n  [(currentFilter)]=\"currentFilter\"\n  (changeProperty)=\"changeProperty($event.value, $event.pos)\"\n>\n</igo-ogc-filter-time>\n", styles: [":host{width:100%;padding:5px 10px}:host ::ng-deep .mat-mdc-form-field .mat-icon svg{width:1em;height:1em;color:#d3d3d3}:host .ogc-filter-form-container{display:flex}:host .mat-mdc-form-field{width:100%}:host .mat-mdc-select-arrow{visibility:hidden}:host .mat-mdc-slide-toggle{margin-top:10px}:host .logical{flex-flow:column nowrap;width:100%;max-width:60px;margin-right:5px}:host .logicalHidden{width:0px;visibility:hidden;max-width:0px}:host ::ng-deep .logical .mat-mdc-select-arrow{visibility:hidden}:host ::ng-deep .logicalHidden .mat-mdc-select-arrow{visibility:hidden}:host .field{width:150px;margin-right:5px}:host ::ng-deep .field .mat-mdc-select-arrow{visibility:hidden}:host .operator{width:150px;margin-right:5px;text-align:center}:host ::ng-deep .operator .mat-mdc-select-arrow{visibility:hidden}:host .spatialSelector{width:110px;margin-right:5px}:host ::ng-deep .spatialSelector .mat-mdc-select-arrow{visibility:hidden}:host .singleInput{width:150px;margin-right:5px}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){:host .singleInput{width:27%}}:host .snrc{width:110px;margin-right:5px}:host ::ng-deep .singleInput .mat-mdc-select-arrow{visibility:hidden}:host .dualInput{width:150px;margin-right:5px}:host ::ng-deep .dualInput .mat-mdc-select-arrow{visibility:hidden}:host .igo-layer-button-group{display:flex;padding-top:5px}:host .container{display:flex}\n"] }]
+        args: [{ selector: 'igo-ogc-filter-form', template: "<div class=\"ogc-filter-form-container\">\r\n  <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  >\r\n  </mat-checkbox>\r\n\r\n  <mat-form-field\r\n    [ngClass]=\"{\r\n      logical:\r\n        activeFilters.indexOf(currentFilter) !== 0 &&\r\n        currentFilter.active === true,\r\n      logicalHidden:\r\n        activeFilters.indexOf(currentFilter) === 0 ||\r\n        currentFilter.active !== true\r\n    }\"\r\n  >\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]=\"\r\n        currentFilter.parentLogical\r\n          ? ('igo.geo.operators.tooltip.' + currentFilter.parentLogical\r\n            | translate)\r\n          : ''\r\n      \"\r\n      (selectionChange)=\"changeLogical($event.value)\"\r\n    >\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      >\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      >\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=\"\r\n      (currentFilterIsSpatial$ | async) === false &&\r\n      (fields$ | async) &&\r\n      (fields$ | async).length > 0 &&\r\n      (fields$ | async)[0].name !== ''\r\n    \"\r\n    (mouseenter)=\"inputClearable = 'selectField'\"\r\n    (mouseleave)=\"inputClearable = undefined\"\r\n    [floatLabel]=\"floatLabel\"\r\n  >\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]=\"\r\n        (selectedField$ | async)\r\n          ? (selectedField$ | async).alias\r\n          : ('igo.geo.sourceFields.selectField' | translate)\r\n      \"\r\n      (input)=\"updateFieldsList($event.target.value)\"\r\n    />\r\n    <mat-autocomplete\r\n      #autoCompleteField=\"matAutocomplete\"\r\n      (optionSelected)=\"changeField($event.option.id)\"\r\n    >\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      >\r\n        {{ field.alias }}\r\n      </mat-option>\r\n    </mat-autocomplete>\r\n    <button\r\n      *ngIf=\"\r\n        currentFilter.propertyName &&\r\n        inputClearable === 'selectField' &&\r\n        currentFilter.active\r\n      \"\r\n      matSuffix\r\n      mat-icon-button\r\n      aria-label=\"Clear\"\r\n      [disabled]=\"!currentFilter.active\"\r\n      (click)=\"clearSelectedField()\"\r\n    >\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    [ngClass]=\"{\r\n      operator: (currentFilterIsSpatial$ | async) === false,\r\n      dualInput: (currentFilterIsSpatial$ | async)\r\n    }\"\r\n    [floatLabel]=\"floatLabel\"\r\n  >\r\n    <mat-select\r\n      tooltip-position=\"below\"\r\n      matTooltipShowDelay=\"500\"\r\n      [matTooltip]=\"\r\n        currentFilter.operator\r\n          ? ('igo.geo.operators.tooltip.' + currentFilter.operator | translate)\r\n          : ('igo.geo.filter.selectOperator' | translate)\r\n      \"\r\n      [disabled]=\"!currentFilter.active\"\r\n      [value]=\"currentFilter.operator\"\r\n      (selectionChange)=\"changeOperator($event.value)\"\r\n    >\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      >\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\n    class=\"spatialSelector\"\r\n    *ngIf=\"currentFilterIsSpatial$ | async\"\r\n  >\r\n    <mat-select\r\n      [disabled]=\"!currentFilter.active\"\r\n      [value]=\"currentFilter.igoSpatialSelector\"\r\n      (selectionChange)=\"changeSpatialSelector($event.value)\"\r\n    >\r\n      <mat-option\r\n        *ngFor=\"let igoSpatialSelector of igoSpatialSelectors\"\r\n        [value]=\"igoSpatialSelector.type\"\r\n      >\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\n    class=\"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  >\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]=\"\r\n        detectProperty() === 'expression'\r\n          ? currentFilter.expression\r\n          : currentFilter.pattern\r\n      \"\r\n      tooltip-position=\"above\"\r\n      matTooltipShowDelay=\"500\"\r\n      [matTooltip]=\"\r\n        detectProperty() === 'expression'\r\n          ? currentFilter.expression || ''\r\n          : currentFilter.pattern || ''\r\n      \"\r\n      (input)=\"updateValuesList($event.target.value)\"\r\n    />\r\n    <mat-autocomplete\r\n      #autoCompleteValues=\"matAutocomplete\"\r\n      (optionSelected)=\"changeProperty($event.option.value)\"\r\n    >\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      >\r\n        {{ value }}\r\n      </mat-option>\r\n    </mat-autocomplete>\r\n    <button\r\n      *ngIf=\"\r\n        isClearable() &&\r\n        inputClearable === 'selectProperty' &&\r\n        currentFilter.active\r\n      \"\r\n      matSuffix\r\n      mat-icon-button\r\n      aria-label=\"Clear\"\r\n      [disabled]=\"!currentFilter.active\"\r\n      (click)=\"clearProperty()\"\r\n    >\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    >\r\n      <mat-icon svgIcon=\"delete\"></mat-icon>\r\n    </button>\r\n  </div>\r\n\r\n  <mat-form-field\r\n    class=\"snrc\"\r\n    *ngIf=\"\r\n      (currentFilterIsSpatial$ | async) &&\r\n      currentFilter.igoSpatialSelector === 'snrc'\r\n    \"\r\n    (mouseenter)=\"inputClearable = 'selectSNRC'\"\r\n    (mouseleave)=\"inputClearable = undefined\"\r\n    [floatLabel]=\"floatLabel\"\r\n  >\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    />\r\n    <button\r\n      *ngIf=\"currentFilter.igoSNRC\"\r\n      matSuffix\r\n      mat-icon-button\r\n      aria-label=\"Clear\"\r\n      [disabled]=\"\r\n        !currentFilter.active &&\r\n        inputClearable === 'selectSNRC' &&\r\n        currentFilter.active\r\n      \"\r\n      (click)=\"currentFilter.igoSNRC = ''\"\r\n    >\r\n      <mat-icon svgIcon=\"close\"></mat-icon>\r\n    </button>\r\n  </mat-form-field>\r\n\r\n  <ng-container\r\n    *ngIf=\"\r\n      (currentFilterIsSpatial$ | async) &&\r\n      currentFilter.igoSpatialSelector === 'fixedExtent'\r\n    \"\r\n  >\r\n    <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    >\r\n      <mat-icon svgIcon=\"arrow-expand-all\"></mat-icon>\r\n    </button>\r\n  </ng-container>\r\n</div>\r\n\r\n<div class=\"ogc-filter-form-container\">\r\n  <mat-form-field\r\n    class=\"dualInput\"\r\n    *ngIf=\"\r\n      !isTemporalOperator() &&\r\n      ['lowerBoundary', 'begin'].indexOf(detectProperty(1)) !== -1\r\n    \"\r\n    (mouseenter)=\"inputClearable = 'selectProperty1'\"\r\n    (mouseleave)=\"inputClearable = undefined\"\r\n    [floatLabel]=\"floatLabel\"\r\n  >\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]=\"\r\n        detectProperty(1) === 'lowerBoundary'\r\n          ? currentFilter.lowerBoundary\r\n          : currentFilter.begin\r\n      \"\r\n      (input)=\"updateValuesList($event.target.value, 1)\"\r\n    />\r\n    <mat-autocomplete\r\n      #autoDualValueOperator1=\"matAutocomplete\"\r\n      (optionSelected)=\"changeNumericProperty($event.option.value, 1)\"\r\n    >\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      >\r\n        {{ value }}\r\n      </mat-option>\r\n    </mat-autocomplete>\r\n    <button\r\n      *ngIf=\"\r\n        isClearable(1) &&\r\n        inputClearable === 'selectProperty1' &&\r\n        currentFilter.active\r\n      \"\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    >\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=\"\r\n      !isTemporalOperator() &&\r\n      ['upperBoundary', 'end'].indexOf(detectProperty(2)) !== -1\r\n    \"\r\n    (mouseenter)=\"inputClearable = 'selectProperty2'\"\r\n    (mouseleave)=\"inputClearable = undefined\"\r\n    [floatLabel]=\"floatLabel\"\r\n  >\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]=\"\r\n        detectProperty(2) === 'upperBoundary'\r\n          ? currentFilter.upperBoundary\r\n          : currentFilter.end\r\n      \"\r\n      (input)=\"updateValuesList($event.target.value, 2)\"\r\n    />\r\n    <mat-autocomplete\r\n      #autoDualValueOperator2=\"matAutocomplete\"\r\n      (optionSelected)=\"changeNumericProperty($event.option.value, 2)\"\r\n    >\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      >\r\n        {{ value }}\r\n      </mat-option>\r\n    </mat-autocomplete>\r\n    <button\r\n      *ngIf=\"\r\n        isClearable(2) &&\r\n        inputClearable === 'selectProperty2' &&\r\n        currentFilter.active\r\n      \"\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    >\r\n      <mat-icon svgIcon=\"close\"></mat-icon>\r\n    </button>\r\n  </mat-form-field>\r\n</div>\r\n\r\n<igo-ogc-filter-time\r\n  *ngIf=\"isTemporalOperator()\"\r\n  [(datasource)]=\"datasource\"\r\n  [(currentFilter)]=\"currentFilter\"\r\n  (changeProperty)=\"changeProperty($event.value, $event.pos)\"\r\n>\r\n</igo-ogc-filter-time>\r\n", styles: [":host{width:100%;padding:5px 10px}:host ::ng-deep .mat-mdc-form-field .mat-icon svg{width:1em;height:1em;color:#d3d3d3}:host .ogc-filter-form-container{display:flex}:host .mat-mdc-form-field{width:100%}:host .mat-mdc-select-arrow{visibility:hidden}:host .mat-mdc-slide-toggle{margin-top:10px}:host .logical{flex-flow:column nowrap;width:100%;max-width:60px;margin-right:5px}:host .logicalHidden{width:0px;visibility:hidden;max-width:0px}:host ::ng-deep .logical .mat-mdc-select-arrow{visibility:hidden}:host ::ng-deep .logicalHidden .mat-mdc-select-arrow{visibility:hidden}:host .field{width:150px;margin-right:5px}:host ::ng-deep .field .mat-mdc-select-arrow{visibility:hidden}:host .operator{width:150px;margin-right:5px;text-align:center}:host ::ng-deep .operator .mat-mdc-select-arrow{visibility:hidden}:host .spatialSelector{width:110px;margin-right:5px}:host ::ng-deep .spatialSelector .mat-mdc-select-arrow{visibility:hidden}:host .singleInput{width:150px;margin-right:5px}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){:host .singleInput{width:27%}}:host .snrc{width:110px;margin-right:5px}:host ::ng-deep .singleInput .mat-mdc-select-arrow{visibility:hidden}:host .dualInput{width:150px;margin-right:5px}:host ::ng-deep .dualInput .mat-mdc-select-arrow{visibility:hidden}:host .igo-layer-button-group{display:flex;padding-top:5px}:host .container{display:flex}\n"] }]
     }], function () { return [{ type: WktService }]; }, { refreshFilters: [{
             type: Input
         }], datasource: [{
@@ -32469,7 +32469,7 @@ class OgcFilterSelectionComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(OgcFilterSelectionComponent, [{
         type: Component,
-        args: [{ selector: 'igo-ogc-filter-selection', providers: [DOMService], template: "<form [formGroup]=\"form\">\n  <div *ngFor=\"let selector of ogcFiltersSelectors\">\n    <div\n      class=\"pushButtonGroups\"\n      *ngIf=\"selector.selectorType === 'pushButton'\"\n    >\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\"\n            tooltip-position=\"below\"\n            matTooltipShowDelay=\"500\"\n            [(value)]=\"currentPushButtonsGroup\"\n          >\n            <mat-option\n              *ngFor=\"let selectorGroup of getPushButtonsGroups()\"\n              [value]=\"selectorGroup\"\n              >{{ selectorGroup.title }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n      <ng-container\n        *ngFor=\"let bundle of currentPushButtonsGroup.computedSelectors\"\n      >\n        <h3>{{ bundle.title }}</h3>\n        <mat-button-toggle-group\n          formControlName=\"pushButtons\"\n          class=\"mat-typography\"\n          appearance=\"legacy\"\n          vertical=\"{{ bundleIsVertical(bundle) }}\"\n          multiple=\"true\"\n        >\n          <mat-button-toggle\n            *ngFor=\"let ogcPushButton of bundle.selectors\"\n            [matTooltip]=\"getToolTip(ogcPushButton)\"\n            tooltip-position=\"below\"\n            matTooltipShowDelay=\"500\"\n            matTooltipClass=\"material-tooltip\"\n            [ngStyle]=\"getButtonColor(ogcPushButton)\"\n            [checked]=\"ogcPushButton.enabled\"\n            (change)=\"onSelectionChange(ogcPushButton, selector.selectorType)\"\n            [value]=\"ogcPushButton\"\n            >{{ 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\"\n            tooltip-position=\"below\"\n            matTooltipShowDelay=\"500\"\n            [(value)]=\"currentCheckboxesGroup\"\n          >\n            <mat-option\n              *ngFor=\"let selectorGroup of getCheckboxesGroups()\"\n              [value]=\"selectorGroup\"\n              >{{ selectorGroup.title }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n      <ng-container\n        *ngFor=\"let bundle of currentCheckboxesGroup.computedSelectors\"\n      >\n        <h3>{{ bundle.title }}</h3>\n        <div class=\"checkboxes mat-typography\">\n          <mat-checkbox\n            *ngFor=\"let ogcCheckbox of bundle.selectors\"\n            [matTooltip]=\"getToolTip(ogcCheckbox)\"\n            tooltip-position=\"below\"\n            matTooltipShowDelay=\"500\"\n            matTooltipClass=\"material-tooltip\"\n            [checked]=\"ogcCheckbox.enabled\"\n            (change)=\"onSelectionChange(ogcCheckbox, selector.selectorType)\"\n            [value]=\"ogcCheckbox\"\n            >{{ ogcCheckbox.title }}\n          </mat-checkbox>\n        </div>\n        <p\n          *ngIf=\"\n            isLessResults(bundle, 'checkbox') ||\n            isMoreResults(bundle, 'checkbox')\n          \"\n        >\n          <u\n            *ngIf=\"isLessResults(bundle, 'checkbox')\"\n            class=\"lessResults mat-typography\"\n            (click)=\"displayLessResults('checkbox')\"\n            >{{ 'igo.geo.filter.displayLessResults' | translate }}\n          </u>\n          <u\n            *ngIf=\"isMoreResults(bundle, 'checkbox')\"\n            class=\"moreResults mat-typography\"\n            (click)=\"displayMoreResults('checkbox')\"\n            >{{ 'igo.geo.filter.displayMoreResults' | translate }}\n          </u>\n        </p>\n      </ng-container>\n    </div>\n\n    <div\n      class=\"radioButtonGroups\"\n      *ngIf=\"selector.selectorType === 'radioButton'\"\n    >\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\"\n            tooltip-position=\"below\"\n            matTooltipShowDelay=\"500\"\n            [(value)]=\"currentRadioButtonsGroup\"\n          >\n            <mat-option\n              *ngFor=\"let selectorGroup of getRadioButtonsGroups()\"\n              [value]=\"selectorGroup\"\n              >{{ selectorGroup.title }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n      <ng-container\n        *ngFor=\"let bundle of currentRadioButtonsGroup.computedSelectors\"\n      >\n        <h3>{{ bundle.title }}</h3>\n        <mat-radio-group formControlName=\"radioButtons\" class=\"mat-typography\">\n          <mat-radio-button\n            *ngIf=\"bundle.unfiltered\"\n            [matTooltip]=\"'igo.geo.filter.resetFilters' | translate\"\n            tooltip-position=\"below\"\n            matTooltipShowDelay=\"500\"\n            matTooltipClass=\"material-tooltip\"\n            (change)=\"emptyRadioButtons()\"\n            >{{ 'igo.geo.filter.resetFilters' | translate }}\n          </mat-radio-button>\n          <mat-radio-button\n            *ngFor=\"let ogcRadioButton of bundle.selectors\"\n            [matTooltip]=\"getToolTip(ogcRadioButton)\"\n            tooltip-position=\"below\"\n            matTooltipShowDelay=\"500\"\n            matTooltipClass=\"material-tooltip\"\n            [checked]=\"ogcRadioButton.enabled\"\n            (change)=\"onSelectionChange(ogcRadioButton, selector.selectorType)\"\n            [value]=\"ogcRadioButton\"\n            >{{ ogcRadioButton.title }}\n          </mat-radio-button>\n          <p\n            *ngIf=\"\n              isLessResults(bundle, 'radio') || isMoreResults(bundle, 'radio')\n            \"\n          >\n            <u\n              *ngIf=\"isLessResults(bundle, 'radio')\"\n              class=\"lessResults mat-typography\"\n              (click)=\"displayLessResults('radio')\"\n              >{{ 'igo.geo.filter.displayLessResults' | translate }}\n            </u>\n            <u\n              *ngIf=\"isMoreResults(bundle, 'radio')\"\n              class=\"moreResults mat-typography\"\n              (click)=\"displayMoreResults('radio')\"\n              >{{ '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\"\n            tooltip-position=\"below\"\n            matTooltipShowDelay=\"500\"\n            [(value)]=\"currentSelectGroup\"\n          >\n            <mat-option\n              *ngFor=\"let selectorGroup of getSelectGroups()\"\n              [value]=\"selectorGroup\"\n              >{{ selectorGroup.title }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n      <ng-container *ngFor=\"let bundle of currentSelectGroup.computedSelectors\">\n        <h3>{{ bundle.title }}</h3>\n        <div class=\"groupsSelector\">\n          <mat-button\n            *ngIf=\"bundle.unfiltered && !bundle.multiple\"\n            mat-icon-button\n            color=\"warn\"\n            [matTooltip]=\"'igo.geo.filter.resetFilters' | translate\"\n            tooltip-position=\"below\"\n            matTooltipShowDelay=\"500\"\n            matTooltipClass=\"material-tooltip\"\n            (click)=\"emptySelect()\"\n          >\n            <mat-icon svgIcon=\"filter-remove\"></mat-icon>\n          </mat-button>\n          <mat-form-field\n            [style.width.%]=\"bundle.width ? bundle.width : undefined\"\n          >\n            <div *ngIf=\"bundle.multiple; else notMulti\">\n              <mat-select\n                #selection\n                [multiple]=\"bundle.multiple\"\n                [placeholder]=\"bundle.title\"\n                formControlName=\"selectMulti\"\n              >\n                <div class=\"checkboxes mat-typography\">\n                  <mat-checkbox\n                    *ngIf=\"bundle.multiple\"\n                    [(ngModel)]=\"selectAllSelected\"\n                    [ngModelOptions]=\"{ standalone: true }\"\n                    (change)=\"toggleAllSelection()\"\n                    >Tous\n                  </mat-checkbox>\n                </div>\n                <mat-option\n                  *ngFor=\"let ogcSelect of bundle.selectors\"\n                  [matTooltip]=\"getToolTip(ogcSelect)\"\n                  tooltip-position=\"below\"\n                  matTooltipDelay=\"500\"\n                  matTooltipClass=\"material-tooltip\"\n                  (onSelectionChange)=\"\n                    selectOptionClick($event.source.value, bundle, $event)\n                  \"\n                  [value]=\"ogcSelect\"\n                  >{{ ogcSelect.title }}\n                </mat-option>\n              </mat-select>\n            </div>\n            <ng-template #notMulti>\n              <mat-select [placeholder]=\"bundle.title\" formControlName=\"select\">\n                <mat-option\n                  *ngFor=\"let ogcSelect of bundle.selectors\"\n                  [matTooltip]=\"getToolTip(ogcSelect)\"\n                  tooltip-position=\"below\"\n                  matTooltipDelay=\"500\"\n                  matTooltipClass=\"material-tooltip\"\n                  [value]=\"ogcSelect\"\n                  (onSelectionChange)=\"\n                    selectOptionClick($event.source.value, bundle)\n                  \"\n                  >{{ 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\n      class=\"autocompleteGroups\"\n      *ngIf=\"selector.selectorType === 'autocomplete'\"\n    >\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\"\n            tooltip-position=\"below\"\n            matTooltipShowDelay=\"500\"\n            [(value)]=\"currentAutocompleteGroup\"\n          >\n            <mat-option\n              *ngFor=\"let autocompleteGroup of getAutocompleteGroups()\"\n              [value]=\"autocompleteGroup\"\n              >{{ autocompleteGroup.title }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n      <ng-container\n        *ngFor=\"let bundle of currentAutocompleteGroup.computedSelectors\"\n      >\n        <h3>{{ bundle.title }}</h3>\n        <div class=\"groupsSelector\">\n          <mat-button\n            *ngIf=\"bundle.unfiltered\"\n            mat-icon-button\n            color=\"warn\"\n            [matTooltip]=\"'igo.geo.filter.resetFilters' | translate\"\n            tooltip-position=\"below\"\n            matTooltipShowDelay=\"500\"\n            matTooltipClass=\"material-tooltip\"\n            (click)=\"emptyAutocomplete()\"\n          >\n            <mat-icon svgIcon=\"filter-remove\"></mat-icon>\n          </mat-button>\n          <mat-form-field\n            *ngIf=\"filteredOgcAutocomplete[bundle.id]\"\n            [style.width.%]=\"bundle.width ? bundle.width : undefined\"\n          >\n            <input\n              matInput\n              type=\"text\"\n              formControlName=\"autocomplete\"\n              #autocomplete\n              class=\"autocomplete\"\n              [matAutocomplete]=\"auto\"\n              [placeholder]=\"bundle.title\"\n            />\n            <mat-autocomplete\n              #auto=\"matAutocomplete\"\n              #autocomplete\n              (optionSelected)=\"autocompleteOptionClick($event.option.value)\"\n              [displayWith]=\"displayFn\"\n            >\n              <mat-option\n                *ngFor=\"\n                  let ogcAutocomplete of filteredOgcAutocomplete[bundle.id]\n                    | async\n                \"\n                [value]=\"ogcAutocomplete\"\n              >\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  <h3 *ngIf=\"!currentFilter.title\">\n    {{ 'igo.geo.filter.reportingDate' | translate }}\n  </h3>\n  <h3 *ngIf=\"currentFilter.title\">{{ currentFilter.title }}</h3>\n  <igo-ogc-filter-time\n    [(datasource)]=\"datasource\"\n    [(currentFilter)]=\"currentFilter\"\n    (changeProperty)=\"changeProperty($event.value, $event.pos)\"\n  >\n  </igo-ogc-filter-time>\n</div>\n", styles: [":host .mat-button-toggle-group{margin:5px;flex-wrap:wrap;box-shadow:none!important;width:95%}:host .checkboxes{flex-wrap:wrap;box-shadow:none}:host .groupsSelector{text-align:center}:host 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}:host mat-button-toggle ::ng-deep .mat-button-toggle-label-content{line-height:unset;font-size:small;display:block}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){:host mat-button-toggle{width:45%}}:host ::ng-deep .material-tooltip{white-space:pre-wrap}:host mat-checkbox,:host mat-radio-button{margin:7px;width:95%;display:inline-flex;font-size:larger}:host mat-checkbox ::ng-deep label,:host mat-radio-button ::ng-deep label{white-space:normal}:host mat-checkbox{vertical-align:middle}:host mat-button{padding-right:10px;cursor:pointer}:host h3{margin:7px;text-align:left}:host u{cursor:pointer;color:#00f;margin:5px}:host p{margin:unset}\n"] }]
+        args: [{ selector: 'igo-ogc-filter-selection', providers: [DOMService], template: "<form [formGroup]=\"form\">\r\n  <div *ngFor=\"let selector of ogcFiltersSelectors\">\r\n    <div\r\n      class=\"pushButtonGroups\"\r\n      *ngIf=\"selector.selectorType === 'pushButton'\"\r\n    >\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\"\r\n            tooltip-position=\"below\"\r\n            matTooltipShowDelay=\"500\"\r\n            [(value)]=\"currentPushButtonsGroup\"\r\n          >\r\n            <mat-option\r\n              *ngFor=\"let selectorGroup of getPushButtonsGroups()\"\r\n              [value]=\"selectorGroup\"\r\n              >{{ selectorGroup.title }}\r\n            </mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </div>\r\n      <ng-container\r\n        *ngFor=\"let bundle of currentPushButtonsGroup.computedSelectors\"\r\n      >\r\n        <h3>{{ bundle.title }}</h3>\r\n        <mat-button-toggle-group\r\n          formControlName=\"pushButtons\"\r\n          class=\"mat-typography\"\r\n          appearance=\"legacy\"\r\n          vertical=\"{{ bundleIsVertical(bundle) }}\"\r\n          multiple=\"true\"\r\n        >\r\n          <mat-button-toggle\r\n            *ngFor=\"let ogcPushButton of bundle.selectors\"\r\n            [matTooltip]=\"getToolTip(ogcPushButton)\"\r\n            tooltip-position=\"below\"\r\n            matTooltipShowDelay=\"500\"\r\n            matTooltipClass=\"material-tooltip\"\r\n            [ngStyle]=\"getButtonColor(ogcPushButton)\"\r\n            [checked]=\"ogcPushButton.enabled\"\r\n            (change)=\"onSelectionChange(ogcPushButton, selector.selectorType)\"\r\n            [value]=\"ogcPushButton\"\r\n            >{{ 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\"\r\n            tooltip-position=\"below\"\r\n            matTooltipShowDelay=\"500\"\r\n            [(value)]=\"currentCheckboxesGroup\"\r\n          >\r\n            <mat-option\r\n              *ngFor=\"let selectorGroup of getCheckboxesGroups()\"\r\n              [value]=\"selectorGroup\"\r\n              >{{ selectorGroup.title }}\r\n            </mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </div>\r\n      <ng-container\r\n        *ngFor=\"let bundle of currentCheckboxesGroup.computedSelectors\"\r\n      >\r\n        <h3>{{ bundle.title }}</h3>\r\n        <div class=\"checkboxes mat-typography\">\r\n          <mat-checkbox\r\n            *ngFor=\"let ogcCheckbox of bundle.selectors\"\r\n            [matTooltip]=\"getToolTip(ogcCheckbox)\"\r\n            tooltip-position=\"below\"\r\n            matTooltipShowDelay=\"500\"\r\n            matTooltipClass=\"material-tooltip\"\r\n            [checked]=\"ogcCheckbox.enabled\"\r\n            (change)=\"onSelectionChange(ogcCheckbox, selector.selectorType)\"\r\n            [value]=\"ogcCheckbox\"\r\n            >{{ ogcCheckbox.title }}\r\n          </mat-checkbox>\r\n        </div>\r\n        <p\r\n          *ngIf=\"\r\n            isLessResults(bundle, 'checkbox') ||\r\n            isMoreResults(bundle, 'checkbox')\r\n          \"\r\n        >\r\n          <u\r\n            *ngIf=\"isLessResults(bundle, 'checkbox')\"\r\n            class=\"lessResults mat-typography\"\r\n            (click)=\"displayLessResults('checkbox')\"\r\n            >{{ 'igo.geo.filter.displayLessResults' | translate }}\r\n          </u>\r\n          <u\r\n            *ngIf=\"isMoreResults(bundle, 'checkbox')\"\r\n            class=\"moreResults mat-typography\"\r\n            (click)=\"displayMoreResults('checkbox')\"\r\n            >{{ 'igo.geo.filter.displayMoreResults' | translate }}\r\n          </u>\r\n        </p>\r\n      </ng-container>\r\n    </div>\r\n\r\n    <div\r\n      class=\"radioButtonGroups\"\r\n      *ngIf=\"selector.selectorType === 'radioButton'\"\r\n    >\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\"\r\n            tooltip-position=\"below\"\r\n            matTooltipShowDelay=\"500\"\r\n            [(value)]=\"currentRadioButtonsGroup\"\r\n          >\r\n            <mat-option\r\n              *ngFor=\"let selectorGroup of getRadioButtonsGroups()\"\r\n              [value]=\"selectorGroup\"\r\n              >{{ selectorGroup.title }}\r\n            </mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </div>\r\n      <ng-container\r\n        *ngFor=\"let bundle of currentRadioButtonsGroup.computedSelectors\"\r\n      >\r\n        <h3>{{ bundle.title }}</h3>\r\n        <mat-radio-group formControlName=\"radioButtons\" class=\"mat-typography\">\r\n          <mat-radio-button\r\n            *ngIf=\"bundle.unfiltered\"\r\n            [matTooltip]=\"'igo.geo.filter.resetFilters' | translate\"\r\n            tooltip-position=\"below\"\r\n            matTooltipShowDelay=\"500\"\r\n            matTooltipClass=\"material-tooltip\"\r\n            (change)=\"emptyRadioButtons()\"\r\n            >{{ 'igo.geo.filter.resetFilters' | translate }}\r\n          </mat-radio-button>\r\n          <mat-radio-button\r\n            *ngFor=\"let ogcRadioButton of bundle.selectors\"\r\n            [matTooltip]=\"getToolTip(ogcRadioButton)\"\r\n            tooltip-position=\"below\"\r\n            matTooltipShowDelay=\"500\"\r\n            matTooltipClass=\"material-tooltip\"\r\n            [checked]=\"ogcRadioButton.enabled\"\r\n            (change)=\"onSelectionChange(ogcRadioButton, selector.selectorType)\"\r\n            [value]=\"ogcRadioButton\"\r\n            >{{ ogcRadioButton.title }}\r\n          </mat-radio-button>\r\n          <p\r\n            *ngIf=\"\r\n              isLessResults(bundle, 'radio') || isMoreResults(bundle, 'radio')\r\n            \"\r\n          >\r\n            <u\r\n              *ngIf=\"isLessResults(bundle, 'radio')\"\r\n              class=\"lessResults mat-typography\"\r\n              (click)=\"displayLessResults('radio')\"\r\n              >{{ 'igo.geo.filter.displayLessResults' | translate }}\r\n            </u>\r\n            <u\r\n              *ngIf=\"isMoreResults(bundle, 'radio')\"\r\n              class=\"moreResults mat-typography\"\r\n              (click)=\"displayMoreResults('radio')\"\r\n              >{{ '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\"\r\n            tooltip-position=\"below\"\r\n            matTooltipShowDelay=\"500\"\r\n            [(value)]=\"currentSelectGroup\"\r\n          >\r\n            <mat-option\r\n              *ngFor=\"let selectorGroup of getSelectGroups()\"\r\n              [value]=\"selectorGroup\"\r\n              >{{ 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        <h3>{{ bundle.title }}</h3>\r\n        <div class=\"groupsSelector\">\r\n          <mat-button\r\n            *ngIf=\"bundle.unfiltered && !bundle.multiple\"\r\n            mat-icon-button\r\n            color=\"warn\"\r\n            [matTooltip]=\"'igo.geo.filter.resetFilters' | translate\"\r\n            tooltip-position=\"below\"\r\n            matTooltipShowDelay=\"500\"\r\n            matTooltipClass=\"material-tooltip\"\r\n            (click)=\"emptySelect()\"\r\n          >\r\n            <mat-icon svgIcon=\"filter-remove\"></mat-icon>\r\n          </mat-button>\r\n          <mat-form-field\r\n            [style.width.%]=\"bundle.width ? bundle.width : undefined\"\r\n          >\r\n            <div *ngIf=\"bundle.multiple; else notMulti\">\r\n              <mat-select\r\n                #selection\r\n                [multiple]=\"bundle.multiple\"\r\n                [placeholder]=\"bundle.title\"\r\n                formControlName=\"selectMulti\"\r\n              >\r\n                <div class=\"checkboxes mat-typography\">\r\n                  <mat-checkbox\r\n                    *ngIf=\"bundle.multiple\"\r\n                    [(ngModel)]=\"selectAllSelected\"\r\n                    [ngModelOptions]=\"{ standalone: true }\"\r\n                    (change)=\"toggleAllSelection()\"\r\n                    >Tous\r\n                  </mat-checkbox>\r\n                </div>\r\n                <mat-option\r\n                  *ngFor=\"let ogcSelect of bundle.selectors\"\r\n                  [matTooltip]=\"getToolTip(ogcSelect)\"\r\n                  tooltip-position=\"below\"\r\n                  matTooltipDelay=\"500\"\r\n                  matTooltipClass=\"material-tooltip\"\r\n                  (onSelectionChange)=\"\r\n                    selectOptionClick($event.source.value, bundle, $event)\r\n                  \"\r\n                  [value]=\"ogcSelect\"\r\n                  >{{ ogcSelect.title }}\r\n                </mat-option>\r\n              </mat-select>\r\n            </div>\r\n            <ng-template #notMulti>\r\n              <mat-select [placeholder]=\"bundle.title\" formControlName=\"select\">\r\n                <mat-option\r\n                  *ngFor=\"let ogcSelect of bundle.selectors\"\r\n                  [matTooltip]=\"getToolTip(ogcSelect)\"\r\n                  tooltip-position=\"below\"\r\n                  matTooltipDelay=\"500\"\r\n                  matTooltipClass=\"material-tooltip\"\r\n                  [value]=\"ogcSelect\"\r\n                  (onSelectionChange)=\"\r\n                    selectOptionClick($event.source.value, bundle)\r\n                  \"\r\n                  >{{ 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\r\n      class=\"autocompleteGroups\"\r\n      *ngIf=\"selector.selectorType === 'autocomplete'\"\r\n    >\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\"\r\n            tooltip-position=\"below\"\r\n            matTooltipShowDelay=\"500\"\r\n            [(value)]=\"currentAutocompleteGroup\"\r\n          >\r\n            <mat-option\r\n              *ngFor=\"let autocompleteGroup of getAutocompleteGroups()\"\r\n              [value]=\"autocompleteGroup\"\r\n              >{{ autocompleteGroup.title }}\r\n            </mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </div>\r\n      <ng-container\r\n        *ngFor=\"let bundle of currentAutocompleteGroup.computedSelectors\"\r\n      >\r\n        <h3>{{ bundle.title }}</h3>\r\n        <div class=\"groupsSelector\">\r\n          <mat-button\r\n            *ngIf=\"bundle.unfiltered\"\r\n            mat-icon-button\r\n            color=\"warn\"\r\n            [matTooltip]=\"'igo.geo.filter.resetFilters' | translate\"\r\n            tooltip-position=\"below\"\r\n            matTooltipShowDelay=\"500\"\r\n            matTooltipClass=\"material-tooltip\"\r\n            (click)=\"emptyAutocomplete()\"\r\n          >\r\n            <mat-icon svgIcon=\"filter-remove\"></mat-icon>\r\n          </mat-button>\r\n          <mat-form-field\r\n            *ngIf=\"filteredOgcAutocomplete[bundle.id]\"\r\n            [style.width.%]=\"bundle.width ? bundle.width : undefined\"\r\n          >\r\n            <input\r\n              matInput\r\n              type=\"text\"\r\n              formControlName=\"autocomplete\"\r\n              #autocomplete\r\n              class=\"autocomplete\"\r\n              [matAutocomplete]=\"auto\"\r\n              [placeholder]=\"bundle.title\"\r\n            />\r\n            <mat-autocomplete\r\n              #auto=\"matAutocomplete\"\r\n              #autocomplete\r\n              (optionSelected)=\"autocompleteOptionClick($event.option.value)\"\r\n              [displayWith]=\"displayFn\"\r\n            >\r\n              <mat-option\r\n                *ngFor=\"\r\n                  let ogcAutocomplete of filteredOgcAutocomplete[bundle.id]\r\n                    | async\r\n                \"\r\n                [value]=\"ogcAutocomplete\"\r\n              >\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  <h3 *ngIf=\"!currentFilter.title\">\r\n    {{ 'igo.geo.filter.reportingDate' | translate }}\r\n  </h3>\r\n  <h3 *ngIf=\"currentFilter.title\">{{ currentFilter.title }}</h3>\r\n  <igo-ogc-filter-time\r\n    [(datasource)]=\"datasource\"\r\n    [(currentFilter)]=\"currentFilter\"\r\n    (changeProperty)=\"changeProperty($event.value, $event.pos)\"\r\n  >\r\n  </igo-ogc-filter-time>\r\n</div>\r\n", styles: [":host .mat-button-toggle-group{margin:5px;flex-wrap:wrap;box-shadow:none!important;width:95%}:host .checkboxes{flex-wrap:wrap;box-shadow:none}:host .groupsSelector{text-align:center}:host 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}:host mat-button-toggle ::ng-deep .mat-button-toggle-label-content{line-height:unset;font-size:small;display:block}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){:host mat-button-toggle{width:45%}}:host ::ng-deep .material-tooltip{white-space:pre-wrap}:host mat-checkbox,:host mat-radio-button{margin:7px;width:95%;display:inline-flex;font-size:larger}:host mat-checkbox ::ng-deep label,:host mat-radio-button ::ng-deep label{white-space:normal}:host mat-checkbox{vertical-align:middle}:host mat-button{padding-right:10px;cursor:pointer}:host h3{margin:7px;text-align:left}:host u{cursor:pointer;color:#00f;margin:5px}:host p{margin:unset}\n"] }]
     }], function () { return [{ type: OGCFilterService }, { type: i2$1.UntypedFormBuilder }, { type: i5$1.DOMService }, { type: i2.ConfigService }, { type: i0.ChangeDetectorRef }]; }, { sel: [{
             type: ViewChild,
             args: ['selection']
@@ -32759,7 +32759,7 @@ class OgcFilterTimeSliderComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(OgcFilterTimeSliderComponent, [{
         type: Component,
-        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    thumbLabel\n    #ngSlider\n    ><input\n      matSliderThumb\n      (input)=\"\n        handleSliderInput({\n          source: ngSliderThumb,\n          parent: ngSlider,\n          value: ngSliderThumb.value\n        })\n      \"\n      #ngSliderThumb=\"matSliderThumb\"\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</div>\n", styles: [":host ::ng-deep input{text-align:center!important;margin:auto 5px!important}:host .datetime-container{text-align:center}:host .slider-container{text-align:center}:host .datetime-input{display:inline-block;margin:5px 25px}:host .date-input{width:120px;margin-right:25px}:host .time-input{display:inherit;margin-right:25px}:host .hour-input,:host .minute-input{width:40px}:host .minute-input{margin-left:10px}\n"] }]
+        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    thumbLabel\r\n    #ngSlider\r\n    ><input\r\n      matSliderThumb\r\n      (input)=\"\r\n        handleSliderInput({\r\n          source: ngSliderThumb,\r\n          parent: ngSlider,\r\n          value: ngSliderThumb.value\r\n        })\r\n      \"\r\n      #ngSliderThumb=\"matSliderThumb\"\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</div>\r\n", styles: [":host ::ng-deep input{text-align:center!important;margin:auto 5px!important}:host .datetime-container{text-align:center}:host .slider-container{text-align:center}:host .datetime-input{display:inline-block;margin:5px 25px}:host .date-input{width:120px;margin-right:25px}:host .time-input{display:inherit;margin-right:25px}:host .hour-input,:host .minute-input{width:40px}:host .minute-input{margin-left:10px}\n"] }]
     }], function () { return [{ type: OGCFilterTimeService }]; }, { currentFilter: [{
             type: Input
         }], begin: [{
@@ -33683,7 +33683,7 @@ class OgcFilterTimeComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(OgcFilterTimeComponent, [{
         type: Component,
-        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  >\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  </div>\n\n  <div *ngIf=\"!sliderMode\">\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\" subscriptSizing=\"dynamic\">\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\n          matSuffix\n          [for]=\"beginDatepicker\"\n          [disabled]=\"filterStateDisable\"\n        ></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\n          #beginYear\n          class=\"year-input-hide\"\n          matInput\n          [matDatepicker]=\"beginDatepicker\"\n          enabled=\"false\"\n          readonly=\"true\"\n          [value]=\"\n            beginValue ? beginValue : handleDate(datasource.options.minDate)\n          \"\n          [min]=\"handleDate(datasource.options.minDate)\"\n          [max]=\"\n            endValue && !restrictedToStep()\n              ? endValue\n              : handleDate(datasource.options.maxDate)\n          \"\n        />\n      </mat-form-field>\n\n      <mat-form-field class=\"year-input\" subscriptSizing=\"dynamic\">\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        />\n        <mat-datepicker-toggle\n          matSuffix\n          [for]=\"endDatepicker\"\n          [disabled]=\"filterStateDisable\"\n        ></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\n          #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]=\"\n            beginValue ? beginValue : handleDate(datasource.options.minDate)\n          \"\n          [max]=\"handleDate(datasource.options.maxDate)\"\n        />\n      </mat-form-field>\n      <div class=\"actions-container\">\n        <button\n          class=\"reset-button\"\n          mat-icon-button\n          color=\"primary\"\n          (click)=\"resetFilter()\"\n          [matTooltip]=\"'igo.geo.filter.resetFilters' | translate\"\n          [disabled]=\"filterStateDisable\"\n        >\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        >\n        </mat-slide-toggle>\n      </div>\n    </div>\n\n    <div class=\"datetime-input-container\" *ngIf=\"calendarType() !== 'year'\">\n      <div class=\"datetime-input\">\n        <mat-form-field class=\"date-input\" subscriptSizing=\"dynamic\">\n          <mat-datepicker-toggle\n            matSuffix\n            [for]=\"beginDatepicker\"\n            [disabled]=\"filterStateDisable\"\n          ></mat-datepicker-toggle>\n          <input\n            #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]=\"filterBeginFunction\"\n            [value]=\"\n              beginValue ? beginValue : handleDate(datasource.options.minDate)\n            \"\n            [min]=\"handleDate(datasource.options.minDate)\"\n            [max]=\"\n              endValue && !restrictedToStep()\n                ? endValue\n                : handleDate(datasource.options.maxDate)\n            \"\n            [disabled]=\"filterStateDisable\"\n          />\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          >\n          </mat-datepicker>\n        </mat-form-field>\n\n        <div *ngIf=\"calendarType() === 'datetime'\" class=\"time-input\">\n          <mat-form-field class=\"hour-input\" subscriptSizing=\"dynamic\">\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            >\n              <mat-option *ngFor=\"let hour of beginHours\" [value]=\"hour\">{{\n                hour\n              }}</mat-option>\n            </mat-select>\n          </mat-form-field>\n          <mat-form-field class=\"minute-input\" subscriptSizing=\"dynamic\">\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            >\n              <mat-option\n                *ngFor=\"let minute of beginMinutes\"\n                [value]=\"minute\"\n                >{{ minute }}</mat-option\n              >\n            </mat-select>\n          </mat-form-field>\n        </div>\n      </div>\n\n      <div *ngIf=\"!restrictedToStep()\" class=\"datetime-input\">\n        <mat-form-field class=\"date-input\" subscriptSizing=\"dynamic\">\n          <mat-datepicker-toggle\n            matSuffix\n            [for]=\"endDatepicker\"\n            [disabled]=\"filterStateDisable\"\n          ></mat-datepicker-toggle>\n          <input\n            #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]=\"filterEndFunction\"\n            [value]=\"\n              endValue ? endValue : handleDate(datasource.options.maxDate)\n            \"\n            [min]=\"\n              beginValue ? beginValue : handleDate(datasource.options.minDate)\n            \"\n            [max]=\"handleDate(datasource.options.maxDate)\"\n            [disabled]=\"filterStateDisable\"\n          />\n          <span class=\"filler\"></span>\n          <mat-datepicker\n            #endDatepicker\n            [startView]=\"calendarView()\"\n            [startAt]=\"endValue\"\n            (yearSelected)=\"yearSelected($event, endDatepicker, 'end')\"\n            (monthSelected)=\"monthSelected($event, endDatepicker, 'end')\"\n          >\n          </mat-datepicker>\n        </mat-form-field>\n\n        <div *ngIf=\"calendarType() === 'datetime'\" class=\"time-input\">\n          <mat-form-field class=\"hour-input\" subscriptSizing=\"dynamic\">\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            >\n              <mat-option *ngFor=\"let hour of endHours\" [value]=\"hour\">{{\n                hour\n              }}</mat-option>\n            </mat-select>\n          </mat-form-field>\n          <mat-form-field class=\"minute-input\" subscriptSizing=\"dynamic\">\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            >\n              <mat-option *ngFor=\"let minute of endMinutes\" [value]=\"minute\">{{\n                minute\n              }}</mat-option>\n            </mat-select>\n          </mat-form-field>\n        </div>\n      </div>\n\n      <div class=\"actions-container\">\n        <button\n          class=\"reset-button\"\n          mat-icon-button\n          color=\"primary\"\n          (click)=\"resetFilter()\"\n          [matTooltip]=\"'igo.geo.filter.resetFilters' | translate\"\n          [disabled]=\"filterStateDisable\"\n        >\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        >\n        </mat-slide-toggle>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [":host ::ng-deep input{text-align:center!important;margin:auto 5px!important}:host .slider-container{text-align:center}:host .datetime-input-container{display:flex;align-items:center;flex-wrap:wrap}:host .datetime-input-container>:not(:last-child){margin-right:8px}:host .datetime-input{display:block}:host .date-input{width:154px}:host .actions-container{display:flex;align-items:center}:host .time-input{margin-top:16px}:host .time-input>:not(:last-child){margin-right:8px}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){:host .time-input{margin-top:4px}}:host .hour-input,:host .minute-input{width:100px}:host .year-input-container{display:flex;width:100%}:host .year-input-container mat-form-field:not(:last-child){margin-right:4px}:host .year-input-hide{width:120px;margin-right:25px;display:none}:host .year-input-only-year{width:120px;margin-right:25px;text-align:left!important}:host ::ng-deep .datepicker-year ::ng-deep .mat-calendar-arrow{display:none}:host ::ng-deep .datepicker-year ::ng-deep .mat-calendar-period-button{pointer-events:none}:host ::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\">\r\n  <mat-slide-toggle\r\n    *ngIf=\"this.currentFilter.sliderOptions?.enabled\"\r\n    [(ngModel)]=\"sliderMode\"\r\n    (change)=\"modeChange($event)\"\r\n  >\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  </div>\r\n\r\n  <div *ngIf=\"!sliderMode\">\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\" subscriptSizing=\"dynamic\">\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\r\n          matSuffix\r\n          [for]=\"beginDatepicker\"\r\n          [disabled]=\"filterStateDisable\"\r\n        ></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\r\n          #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]=\"\r\n            beginValue ? beginValue : handleDate(datasource.options.minDate)\r\n          \"\r\n          [min]=\"handleDate(datasource.options.minDate)\"\r\n          [max]=\"\r\n            endValue && !restrictedToStep()\r\n              ? endValue\r\n              : handleDate(datasource.options.maxDate)\r\n          \"\r\n        />\r\n      </mat-form-field>\r\n\r\n      <mat-form-field class=\"year-input\" subscriptSizing=\"dynamic\">\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        />\r\n        <mat-datepicker-toggle\r\n          matSuffix\r\n          [for]=\"endDatepicker\"\r\n          [disabled]=\"filterStateDisable\"\r\n        ></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\r\n          #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]=\"\r\n            beginValue ? beginValue : handleDate(datasource.options.minDate)\r\n          \"\r\n          [max]=\"handleDate(datasource.options.maxDate)\"\r\n        />\r\n      </mat-form-field>\r\n      <div class=\"actions-container\">\r\n        <button\r\n          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        >\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        >\r\n        </mat-slide-toggle>\r\n      </div>\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\" subscriptSizing=\"dynamic\">\r\n          <mat-datepicker-toggle\r\n            matSuffix\r\n            [for]=\"beginDatepicker\"\r\n            [disabled]=\"filterStateDisable\"\r\n          ></mat-datepicker-toggle>\r\n          <input\r\n            #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]=\"filterBeginFunction\"\r\n            [value]=\"\r\n              beginValue ? beginValue : handleDate(datasource.options.minDate)\r\n            \"\r\n            [min]=\"handleDate(datasource.options.minDate)\"\r\n            [max]=\"\r\n              endValue && !restrictedToStep()\r\n                ? endValue\r\n                : handleDate(datasource.options.maxDate)\r\n            \"\r\n            [disabled]=\"filterStateDisable\"\r\n          />\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          >\r\n          </mat-datepicker>\r\n        </mat-form-field>\r\n\r\n        <div *ngIf=\"calendarType() === 'datetime'\" class=\"time-input\">\r\n          <mat-form-field class=\"hour-input\" subscriptSizing=\"dynamic\">\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            >\r\n              <mat-option *ngFor=\"let hour of beginHours\" [value]=\"hour\">{{\r\n                hour\r\n              }}</mat-option>\r\n            </mat-select>\r\n          </mat-form-field>\r\n          <mat-form-field class=\"minute-input\" subscriptSizing=\"dynamic\">\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            >\r\n              <mat-option\r\n                *ngFor=\"let minute of beginMinutes\"\r\n                [value]=\"minute\"\r\n                >{{ minute }}</mat-option\r\n              >\r\n            </mat-select>\r\n          </mat-form-field>\r\n        </div>\r\n      </div>\r\n\r\n      <div *ngIf=\"!restrictedToStep()\" class=\"datetime-input\">\r\n        <mat-form-field class=\"date-input\" subscriptSizing=\"dynamic\">\r\n          <mat-datepicker-toggle\r\n            matSuffix\r\n            [for]=\"endDatepicker\"\r\n            [disabled]=\"filterStateDisable\"\r\n          ></mat-datepicker-toggle>\r\n          <input\r\n            #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]=\"filterEndFunction\"\r\n            [value]=\"\r\n              endValue ? endValue : handleDate(datasource.options.maxDate)\r\n            \"\r\n            [min]=\"\r\n              beginValue ? beginValue : handleDate(datasource.options.minDate)\r\n            \"\r\n            [max]=\"handleDate(datasource.options.maxDate)\"\r\n            [disabled]=\"filterStateDisable\"\r\n          />\r\n          <span class=\"filler\"></span>\r\n          <mat-datepicker\r\n            #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          >\r\n          </mat-datepicker>\r\n        </mat-form-field>\r\n\r\n        <div *ngIf=\"calendarType() === 'datetime'\" class=\"time-input\">\r\n          <mat-form-field class=\"hour-input\" subscriptSizing=\"dynamic\">\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            >\r\n              <mat-option *ngFor=\"let hour of endHours\" [value]=\"hour\">{{\r\n                hour\r\n              }}</mat-option>\r\n            </mat-select>\r\n          </mat-form-field>\r\n          <mat-form-field class=\"minute-input\" subscriptSizing=\"dynamic\">\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            >\r\n              <mat-option *ngFor=\"let minute of endMinutes\" [value]=\"minute\">{{\r\n                minute\r\n              }}</mat-option>\r\n            </mat-select>\r\n          </mat-form-field>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"actions-container\">\r\n        <button\r\n          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        >\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        >\r\n        </mat-slide-toggle>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host ::ng-deep input{text-align:center!important;margin:auto 5px!important}:host .slider-container{text-align:center}:host .datetime-input-container{display:flex;align-items:center;flex-wrap:wrap}:host .datetime-input-container>:not(:last-child){margin-right:8px}:host .datetime-input{display:block}:host .date-input{width:154px}:host .actions-container{display:flex;align-items:center}:host .time-input{margin-top:16px}:host .time-input>:not(:last-child){margin-right:8px}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){:host .time-input{margin-top:4px}}:host .hour-input,:host .minute-input{width:100px}:host .year-input-container{display:flex;width:100%}:host .year-input-container mat-form-field:not(:last-child){margin-right:4px}:host .year-input-hide{width:120px;margin-right:25px;display:none}:host .year-input-only-year{width:120px;margin-right:25px;text-align:left!important}:host ::ng-deep .datepicker-year ::ng-deep .mat-calendar-arrow{display:none}:host ::ng-deep .datepicker-year ::ng-deep .mat-calendar-period-button{pointer-events:none}:host ::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: [{
@@ -33773,7 +33773,7 @@ class OgcFilterableFormComponent {
                         provide: MAT_AUTOCOMPLETE_DEFAULT_OPTIONS,
                         useValue: { overlayPanelClass: 'igo-overlay-panel-width' }
                     }
-                ], template: "<igo-ogc-filter-selection\n  *ngIf=\"!advancedOgcFilters\"\n  igoListItem\n  [refreshFilters]=\"refreshFunc\"\n  [datasource]=\"datasource\"\n  [map]=\"map\"\n  [currentFilter]=\"currentFilter\"\n>\n</igo-ogc-filter-selection>\n\n<ng-template\n  *ngIf=\"advancedOgcFilters && datasource.options.ogcFilters.editable\"\n  ngFor\n  let-currentFilter\n  [ngForOf]=\"datasource.options.ogcFilters.interfaceOgcFilters\"\n>\n  <igo-ogc-filter-form\n    [currentFilter]=\"currentFilter\"\n    [refreshFilters]=\"refreshFunc\"\n    [datasource]=\"datasource\"\n    [map]=\"map\"\n  >\n  </igo-ogc-filter-form>\n</ng-template>\n", styles: ["::ng-deep .igo-overlay-panel-width{min-width:-moz-fit-content;min-width:fit-content}\n"] }]
+                ], 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>\r\n</igo-ogc-filter-selection>\r\n\r\n<ng-template\r\n  *ngIf=\"advancedOgcFilters && datasource.options.ogcFilters.editable\"\r\n  ngFor\r\n  let-currentFilter\r\n  [ngForOf]=\"datasource.options.ogcFilters.interfaceOgcFilters\"\r\n>\r\n  <igo-ogc-filter-form\r\n    [currentFilter]=\"currentFilter\"\r\n    [refreshFilters]=\"refreshFunc\"\r\n    [datasource]=\"datasource\"\r\n    [map]=\"map\"\r\n  >\r\n  </igo-ogc-filter-form>\r\n</ng-template>\r\n", styles: ["::ng-deep .igo-overlay-panel-width{min-width:-moz-fit-content;min-width:fit-content}\n"] }]
     }], function () { return []; }, { datasource: [{
             type: Input
         }], map: [{
@@ -34084,7 +34084,7 @@ class OgcFilterableItemComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(OgcFilterableItemComponent, [{
         type: Component,
-        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      matListItemIcon\n      igoCollapse\n      [target]=\"ogcFilters\"\n      [collapsed]=\"filtersCollapsed\"\n      (click)=\"toggleFiltersCollapsed()\"\n      svgIcon=\"chevron-up\"\n    >\n    </mat-icon>\n    <span\n      *ngIf=\"header\"\n      matListItemTitle\n      [ngStyle]=\"{ cursor: filtersCollapsed ? 'default' : 'pointer' }\"\n      [matTooltip]=\"layer.title\"\n      matTooltipShowDelay=\"500\"\n      (click)=\"toggleLegendOnClick()\"\n    >\n      {{ layer.title }}\n    </span>\n    <div matListItemMeta>\n      <button\n        *ngIf=\"isAdvancedOgcFilters() && filtersAreEditable\"\n        [disabled]=\"addFilterDisabled()\"\n        mat-icon-button\n        tooltip-position=\"below\"\n        matTooltipShowDelay=\"500\"\n        [matTooltip]=\"'igo.geo.filter.addFilter' | translate\"\n        [color]=\"color\"\n        (click)=\"addFilterToSequence()\"\n      >\n        <mat-icon svgIcon=\"plus\"></mat-icon>\n      </button>\n      <button\n        *ngIf=\"header\"\n        mat-icon-button\n        [color]=\"layer.visible ? 'primary' : 'default'\"\n        collapsibleButton\n        tooltip-position=\"below\"\n        matTooltipShowDelay=\"500\"\n        [matTooltip]=\"\n          layer.visible\n            ? ('igo.geo.layer.hideLayer' | translate)\n            : ('igo.geo.layer.showLayer' | translate)\n        \"\n        (click)=\"layer.visible = !layer.visible\"\n      >\n        <mat-icon\n          [ngClass]=\"{ disabled: (inResolutionRange$ | async) === false }\"\n          [svgIcon]=\"layer.visible ? 'eye' : 'eye-off'\"\n        >\n        </mat-icon>\n      </button>\n    </div>\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\n      [datasource]=\"datasource\"\n      [map]=\"map\"\n      [refreshFilters]=\"refreshFunc\"\n    >\n    </igo-ogc-filterable-form>\n\n    <section\n      *ngIf=\"hasSelector && filtersAreEditable\"\n      class=\"mat-typography advancedOgcFilters\"\n    >\n      <mat-divider></mat-divider>\n      <mat-checkbox\n        (change)=\"changeOgcFilterType($event)\"\n        [(ngModel)]=\"datasource.options.ogcFilters.advancedOgcFilters\"\n      >\n        {{ 'igo.geo.filter.advancedOgcFilters' | translate }}\n      </mat-checkbox>\n    </section>\n  </div>\n</div>\n", styles: [":host{overflow:hidden}:host .advancedOgcFilters{text-align:center;width:100%;display:inline-block}:host .mat-mdc-list-item{height:auto}:host .igo-layer-legend-container{padding-left:1.125em;width:calc(100% - 18px)}:host mat-icon.disabled{color:#00000061}:host .separate-item{border-bottom:4px solid darkgrey}:host ::ng-deep .mdc-list-item__start,:host ::ng-deep .mdc-list-item__end,:host ::ng-deep .mdc-list-item__content{pointer-events:auto}\n"] }]
+        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      matListItemIcon\r\n      igoCollapse\r\n      [target]=\"ogcFilters\"\r\n      [collapsed]=\"filtersCollapsed\"\r\n      (click)=\"toggleFiltersCollapsed()\"\r\n      svgIcon=\"chevron-up\"\r\n    >\r\n    </mat-icon>\r\n    <span\r\n      *ngIf=\"header\"\r\n      matListItemTitle\r\n      [ngStyle]=\"{ cursor: filtersCollapsed ? 'default' : 'pointer' }\"\r\n      [matTooltip]=\"layer.title\"\r\n      matTooltipShowDelay=\"500\"\r\n      (click)=\"toggleLegendOnClick()\"\r\n    >\r\n      {{ layer.title }}\r\n    </span>\r\n    <div matListItemMeta>\r\n      <button\r\n        *ngIf=\"isAdvancedOgcFilters() && filtersAreEditable\"\r\n        [disabled]=\"addFilterDisabled()\"\r\n        mat-icon-button\r\n        tooltip-position=\"below\"\r\n        matTooltipShowDelay=\"500\"\r\n        [matTooltip]=\"'igo.geo.filter.addFilter' | translate\"\r\n        [color]=\"color\"\r\n        (click)=\"addFilterToSequence()\"\r\n      >\r\n        <mat-icon svgIcon=\"plus\"></mat-icon>\r\n      </button>\r\n      <button\r\n        *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]=\"\r\n          layer.visible\r\n            ? ('igo.geo.layer.hideLayer' | translate)\r\n            : ('igo.geo.layer.showLayer' | translate)\r\n        \"\r\n        (click)=\"layer.visible = !layer.visible\"\r\n      >\r\n        <mat-icon\r\n          [ngClass]=\"{ disabled: (inResolutionRange$ | async) === false }\"\r\n          [svgIcon]=\"layer.visible ? 'eye' : 'eye-off'\"\r\n        >\r\n        </mat-icon>\r\n      </button>\r\n    </div>\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\r\n      [datasource]=\"datasource\"\r\n      [map]=\"map\"\r\n      [refreshFilters]=\"refreshFunc\"\r\n    >\r\n    </igo-ogc-filterable-form>\r\n\r\n    <section\r\n      *ngIf=\"hasSelector && filtersAreEditable\"\r\n      class=\"mat-typography advancedOgcFilters\"\r\n    >\r\n      <mat-divider></mat-divider>\r\n      <mat-checkbox\r\n        (change)=\"changeOgcFilterType($event)\"\r\n        [(ngModel)]=\"datasource.options.ogcFilters.advancedOgcFilters\"\r\n      >\r\n        {{ 'igo.geo.filter.advancedOgcFilters' | translate }}\r\n      </mat-checkbox>\r\n    </section>\r\n  </div>\r\n</div>\r\n", styles: [":host{overflow:hidden}:host .advancedOgcFilters{text-align:center;width:100%;display:inline-block}:host .mat-mdc-list-item{height:auto}:host .igo-layer-legend-container{padding-left:1.125em;width:calc(100% - 18px)}:host mat-icon.disabled{color:#00000061}:host .separate-item{border-bottom:4px solid darkgrey}:host ::ng-deep .mdc-list-item__start,:host ::ng-deep .mdc-list-item__end,:host ::ng-deep .mdc-list-item__content{pointer-events:auto}\n"] }]
     }], function () { return [{ type: OGCFilterService }]; }, { layer: [{
             type: Input
         }], map: [{
@@ -34130,7 +34130,7 @@ class OgcFilterableListComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(OgcFilterableListComponent, [{
         type: Component,
-        args: [{ selector: 'igo-ogc-filterable-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<igo-list [navigation]=\"false\" [selection]=\"false\">\n  <div\n    id=\"no-layer-message\"\n    *ngIf=\"(layers | filterableDataSource: 'ogc').length === 0\"\n  >\n    {{ 'igo.geo.filter.noFilterableLayer' | translate }}\n  </div>\n  <ng-template ngFor let-layer [ngForOf]=\"layers | filterableDataSource: 'ogc'\">\n    <igo-ogc-filterable-item\n      igoListItem\n      [header]=\"true\"\n      [layer]=\"layer\"\n      [map]=\"layer.map\"\n    ></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"] }]
+        args: [{ selector: 'igo-ogc-filterable-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<igo-list [navigation]=\"false\" [selection]=\"false\">\r\n  <div\r\n    id=\"no-layer-message\"\r\n    *ngIf=\"(layers | filterableDataSource: 'ogc').length === 0\"\r\n  >\r\n    {{ 'igo.geo.filter.noFilterableLayer' | translate }}\r\n  </div>\r\n  <ng-template ngFor let-layer [ngForOf]=\"layers | filterableDataSource: 'ogc'\">\r\n    <igo-ogc-filterable-item\r\n      igoListItem\r\n      [header]=\"true\"\r\n      [layer]=\"layer\"\r\n      [map]=\"layer.map\"\r\n    ></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"] }]
     }], function () { return []; }, { layers: [{
             type: Input
         }], map: [{
@@ -35244,7 +35244,7 @@ class SpatialFilterItemComponent {
 }
 (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\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  [predefinedRadius]=\"predefinedRadius\"\n>\n</igo-geometry-form-field-input>\n\n<div class=\"header\">\n  <mat-slide-toggle\n    *ngIf=\"!isPredefined()\"\n    [checked]=\"drawControlIsActive\"\n    [labelPosition]=\"'before'\"\n    (change)=\"onDrawControlChange()\"\n  >\n    {{ 'igo.geo.spatialFilter.drawControl' | translate }}\n  </mat-slide-toggle>\n  <mat-slide-toggle\n    *ngIf=\"!isPredefined()\"\n    [checked]=\"freehandDrawIsActive\"\n    [labelPosition]=\"'before'\"\n    (change)=\"onfreehandControlChange()\"\n  >\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\n        type=\"number\"\n        matInput\n        placeholder=\"{{ 'igo.geo.spatialFilter.buffer' | translate }}\"\n        [formControl]=\"bufferFormControl\"\n        [value]=\"0\"\n        [readonly]=\"this.formControl.value === null\"\n      />\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    >\n      <mat-option\n        *ngFor=\"let measureUnit of measureUnits\"\n        [value]=\"measureUnit\"\n      >\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\n        type=\"number\"\n        matInput\n        placeholder=\"{{ 'igo.geo.spatialFilter.radius' | translate }}\"\n        [formControl]=\"radiusFormControl\"\n        [value]=\"1000\"\n        (input)=\"getRadius()\"\n        [readonly]=\"\n          this.freehandDrawIsActive && this.formControl.value === null\n        \"\n      />\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    >\n      <mat-option\n        *ngFor=\"let measureUnit of measureUnits\"\n        [value]=\"measureUnit\"\n      >\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\"\n  >{{ 'igo.geo.spatialFilter.search' | translate }} :\n</mat-label>\n<mat-radio-group [value]=\"selectedItemType\">\n  <mat-radio-button\n    *ngFor=\"let item of itemType\"\n    [value]=\"item\"\n    (change)=\"onItemTypeChange($event)\"\n  >\n    {{ 'igo.geo.spatialFilter.' + item | translate }}\n  </mat-radio-button>\n</mat-radio-group>\n\n<div\n  class=\"thematics\"\n  *ngIf=\"\n    (selectedItemType === 'Thematics' && !tableTemplate) ||\n    (selectedItemType === 'Thematics' && tableTemplate && !listIsVisible)\n  \"\n>\n  <mat-table>\n    <!-- Name Column -->\n    <ng-container matColumnDef=\"name\">\n      <mat-header-cell *matHeaderCellDef class=\"thematics-header\">{{\n        'igo.geo.spatialFilter.Thematics' | translate\n      }}</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\n          (change)=\"$event ? masterToggle() : null\"\n          [checked]=\"isAllSelected()\"\n          [indeterminate]=\"selectedThematics.hasValue() && !isAllSelected()\"\n        >\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  </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\n          class=\"tree-check\"\n          (click)=\"$event.stopPropagation()\"\n          (change)=\"$event ? onToggleChange(node) : null\"\n          [checked]=\"selectedThematics.isSelected(node)\"\n        >\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 (click)=\"onToggleClick(node)\">\n          <mat-icon\n            [svgIcon]=\"\n              treeControl.isExpanded(node) ? 'chevron-down' : 'chevron-right'\n            \"\n          ></mat-icon>\n        </button>\n        {{ node.name }}\n        <mat-checkbox\n          class=\"tree-check-2\"\n          (change)=\"$event ? childrensToggle(node) : null\"\n          [checked]=\"isAllSelected(node)\"\n          [indeterminate]=\"hasChildrenSelected(node) && !isAllSelected(node)\"\n        >\n        </mat-checkbox>\n      </div>\n      <ul\n        class=\"tree-ul\"\n        [class.example-tree-invisible]=\"!treeControl.isExpanded(node)\"\n      >\n        <ng-container matTreeNodeOutlet></ng-container>\n      </ul>\n    </mat-nested-tree-node>\n  </mat-tree>\n</div>\n\n<div class=\"buttons\">\n  <button\n    *ngIf=\"isPredefined()\"\n    mat-raised-button\n    class=\"clear-search-button\"\n    [disabled]=\"disabledClearSearch()\"\n    (click)=\"clearSearch()\"\n  >\n    {{ 'igo.geo.spatialFilter.clearSearch' | translate }}\n  </button>\n\n  <button\n    *ngIf=\"isPolygon() || isPoint()\"\n    mat-raised-button\n    class=\"clear-form-button\"\n    [disabled]=\"this.formControl.value === null\"\n    (click)=\"clearDrawZone()\"\n  >\n    {{ 'igo.geo.spatialFilter.clearForm' | translate }}\n  </button>\n\n  <button\n    mat-raised-button\n    class=\"search-button\"\n    [disabled]=\"disableSearchButton()\"\n    color=\"primary\"\n    (click)=\"toggleSearchButton()\"\n  >\n    {{ 'igo.geo.spatialFilter.goSearch' | translate }}\n  </button>\n\n  <button\n    mat-raised-button\n    class=\"remove-button\"\n    [disabled]=\"allLayers.length === 0\"\n    (click)=\"clearButton()\"\n  >\n    {{ 'igo.geo.spatialFilter.removeLayer' | translate }}\n  </button>\n\n  <button\n    mat-raised-button\n    class=\"export-button\"\n    [disabled]=\"!store.entities$.getValue().length\"\n    (click)=\"export.emit()\"\n  >\n    {{ 'igo.geo.spatialFilter.exportLayer' | translate }}\n  </button>\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>\n  <mat-icon svgIcon=\"chevron-down\"></mat-icon>\n</button>\n\n<div\n  class=\"results\"\n  *ngIf=\"store.all().length && tableTemplate && listIsVisible\"\n>\n  <button\n    *ngIf=\"listIsVisible\"\n    mat-icon-button\n    matTooltipShowDelay=\"500\"\n    [matTooltip]=\"'igo.geo.spatialFilter.hideSearchResults' | translate\"\n    (click)=\"toggleVisibleList()\"\n  >\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  >\n  </igo-entity-table>\n</div>\n", styles: [":host .header{margin-top:5px;width:100%}:host .mat-mdc-slide-toggle{padding:5px;width:100%}:host .mat-mdc-slide-toggle ::ng-deep .mdc-form-field{width:100%}:host .mat-mdc-slide-toggle ::ng-deep .mdc-label{margin-left:0;width:calc(100% - 60px)}:host .title{margin-left:5px;font-size:initial}:host .mat-mdc-radio-group{display:flex;flex-direction:column}:host .mat-mdc-radio-button{display:inline-flex;position:relative;margin-left:12px}:host .mat-mdc-form-field{margin-top:5px}:host .mat-column-select{overflow:auto}:host .buttons{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:16px 0}:host .thematics{max-height:35%;overflow:auto;margin-top:5px;width:98%}:host .results{overflow:auto;max-height:250px;width:98%}:host .mat-column-typeResults{max-width:100px;margin-right:5px}:host .buffer-unit,:host .radius-unit{display:flex;width:100%;padding:5px;box-sizing:border-box}:host .radius,:host .buffer{display:flex;flex-flow:column nowrap;width:110%}:host .unit-field{width:110px;margin-left:30px}:host .example-tree-invisible{display:none}:host .tree-ul{margin:0;padding:0 0 0 20px;list-style-type:none}:host .tree-check,:host .tree-check-2{position:relative;margin-left:auto;margin-right:5px}:host .thematics-header{max-width:250px}:host .checks-header{padding:none;max-width:calc(100% - 316px);overflow:hidden}:host .mat-mdc-checkbox{padding:5px}:host .mat-tree-node{position:relative;min-height:42px;width:280px}:host .mat-mdc-header-cell{height:56px}:host .results{max-height:45%;width:98%}:host .results igo-entity-table ::ng-deep div.table-container{overflow:unset}\n"] }]
+        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  [predefinedRadius]=\"predefinedRadius\"\r\n>\r\n</igo-geometry-form-field-input>\r\n\r\n<div class=\"header\">\r\n  <mat-slide-toggle\r\n    *ngIf=\"!isPredefined()\"\r\n    [checked]=\"drawControlIsActive\"\r\n    [labelPosition]=\"'before'\"\r\n    (change)=\"onDrawControlChange()\"\r\n  >\r\n    {{ 'igo.geo.spatialFilter.drawControl' | translate }}\r\n  </mat-slide-toggle>\r\n  <mat-slide-toggle\r\n    *ngIf=\"!isPredefined()\"\r\n    [checked]=\"freehandDrawIsActive\"\r\n    [labelPosition]=\"'before'\"\r\n    (change)=\"onfreehandControlChange()\"\r\n  >\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\r\n        type=\"number\"\r\n        matInput\r\n        placeholder=\"{{ 'igo.geo.spatialFilter.buffer' | translate }}\"\r\n        [formControl]=\"bufferFormControl\"\r\n        [value]=\"0\"\r\n        [readonly]=\"this.formControl.value === null\"\r\n      />\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    >\r\n      <mat-option\r\n        *ngFor=\"let measureUnit of measureUnits\"\r\n        [value]=\"measureUnit\"\r\n      >\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\r\n        type=\"number\"\r\n        matInput\r\n        placeholder=\"{{ 'igo.geo.spatialFilter.radius' | translate }}\"\r\n        [formControl]=\"radiusFormControl\"\r\n        [value]=\"1000\"\r\n        (input)=\"getRadius()\"\r\n        [readonly]=\"\r\n          this.freehandDrawIsActive && this.formControl.value === null\r\n        \"\r\n      />\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    >\r\n      <mat-option\r\n        *ngFor=\"let measureUnit of measureUnits\"\r\n        [value]=\"measureUnit\"\r\n      >\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\"\r\n  >{{ 'igo.geo.spatialFilter.search' | translate }} :\r\n</mat-label>\r\n<mat-radio-group [value]=\"selectedItemType\">\r\n  <mat-radio-button\r\n    *ngFor=\"let item of itemType\"\r\n    [value]=\"item\"\r\n    (change)=\"onItemTypeChange($event)\"\r\n  >\r\n    {{ 'igo.geo.spatialFilter.' + item | translate }}\r\n  </mat-radio-button>\r\n</mat-radio-group>\r\n\r\n<div\r\n  class=\"thematics\"\r\n  *ngIf=\"\r\n    (selectedItemType === 'Thematics' && !tableTemplate) ||\r\n    (selectedItemType === 'Thematics' && tableTemplate && !listIsVisible)\r\n  \"\r\n>\r\n  <mat-table>\r\n    <!-- Name Column -->\r\n    <ng-container matColumnDef=\"name\">\r\n      <mat-header-cell *matHeaderCellDef class=\"thematics-header\">{{\r\n        'igo.geo.spatialFilter.Thematics' | translate\r\n      }}</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\r\n          (change)=\"$event ? masterToggle() : null\"\r\n          [checked]=\"isAllSelected()\"\r\n          [indeterminate]=\"selectedThematics.hasValue() && !isAllSelected()\"\r\n        >\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  </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\r\n          class=\"tree-check\"\r\n          (click)=\"$event.stopPropagation()\"\r\n          (change)=\"$event ? onToggleChange(node) : null\"\r\n          [checked]=\"selectedThematics.isSelected(node)\"\r\n        >\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 (click)=\"onToggleClick(node)\">\r\n          <mat-icon\r\n            [svgIcon]=\"\r\n              treeControl.isExpanded(node) ? 'chevron-down' : 'chevron-right'\r\n            \"\r\n          ></mat-icon>\r\n        </button>\r\n        {{ node.name }}\r\n        <mat-checkbox\r\n          class=\"tree-check-2\"\r\n          (change)=\"$event ? childrensToggle(node) : null\"\r\n          [checked]=\"isAllSelected(node)\"\r\n          [indeterminate]=\"hasChildrenSelected(node) && !isAllSelected(node)\"\r\n        >\r\n        </mat-checkbox>\r\n      </div>\r\n      <ul\r\n        class=\"tree-ul\"\r\n        [class.example-tree-invisible]=\"!treeControl.isExpanded(node)\"\r\n      >\r\n        <ng-container matTreeNodeOutlet></ng-container>\r\n      </ul>\r\n    </mat-nested-tree-node>\r\n  </mat-tree>\r\n</div>\r\n\r\n<div class=\"buttons\">\r\n  <button\r\n    *ngIf=\"isPredefined()\"\r\n    mat-raised-button\r\n    class=\"clear-search-button\"\r\n    [disabled]=\"disabledClearSearch()\"\r\n    (click)=\"clearSearch()\"\r\n  >\r\n    {{ 'igo.geo.spatialFilter.clearSearch' | translate }}\r\n  </button>\r\n\r\n  <button\r\n    *ngIf=\"isPolygon() || isPoint()\"\r\n    mat-raised-button\r\n    class=\"clear-form-button\"\r\n    [disabled]=\"this.formControl.value === null\"\r\n    (click)=\"clearDrawZone()\"\r\n  >\r\n    {{ 'igo.geo.spatialFilter.clearForm' | translate }}\r\n  </button>\r\n\r\n  <button\r\n    mat-raised-button\r\n    class=\"search-button\"\r\n    [disabled]=\"disableSearchButton()\"\r\n    color=\"primary\"\r\n    (click)=\"toggleSearchButton()\"\r\n  >\r\n    {{ 'igo.geo.spatialFilter.goSearch' | translate }}\r\n  </button>\r\n\r\n  <button\r\n    mat-raised-button\r\n    class=\"remove-button\"\r\n    [disabled]=\"allLayers.length === 0\"\r\n    (click)=\"clearButton()\"\r\n  >\r\n    {{ 'igo.geo.spatialFilter.removeLayer' | translate }}\r\n  </button>\r\n\r\n  <button\r\n    mat-raised-button\r\n    class=\"export-button\"\r\n    [disabled]=\"!store.entities$.getValue().length\"\r\n    (click)=\"export.emit()\"\r\n  >\r\n    {{ 'igo.geo.spatialFilter.exportLayer' | translate }}\r\n  </button>\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>\r\n  <mat-icon svgIcon=\"chevron-down\"></mat-icon>\r\n</button>\r\n\r\n<div\r\n  class=\"results\"\r\n  *ngIf=\"store.all().length && tableTemplate && listIsVisible\"\r\n>\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  >\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  >\r\n  </igo-entity-table>\r\n</div>\r\n", styles: [":host .header{margin-top:5px;width:100%}:host .mat-mdc-slide-toggle{padding:5px;width:100%}:host .mat-mdc-slide-toggle ::ng-deep .mdc-form-field{width:100%}:host .mat-mdc-slide-toggle ::ng-deep .mdc-label{margin-left:0;width:calc(100% - 60px)}:host .title{margin-left:5px;font-size:initial}:host .mat-mdc-radio-group{display:flex;flex-direction:column}:host .mat-mdc-radio-button{display:inline-flex;position:relative;margin-left:12px}:host .mat-mdc-form-field{margin-top:5px}:host .mat-column-select{overflow:auto}:host .buttons{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:16px 0}:host .thematics{max-height:35%;overflow:auto;margin-top:5px;width:98%}:host .results{overflow:auto;max-height:250px;width:98%}:host .mat-column-typeResults{max-width:100px;margin-right:5px}:host .buffer-unit,:host .radius-unit{display:flex;width:100%;padding:5px;box-sizing:border-box}:host .radius,:host .buffer{display:flex;flex-flow:column nowrap;width:110%}:host .unit-field{width:110px;margin-left:30px}:host .example-tree-invisible{display:none}:host .tree-ul{margin:0;padding:0 0 0 20px;list-style-type:none}:host .tree-check,:host .tree-check-2{position:relative;margin-left:auto;margin-right:5px}:host .thematics-header{max-width:250px}:host .checks-header{padding:none;max-width:calc(100% - 316px);overflow:hidden}:host .mat-mdc-checkbox{padding:5px}:host .mat-tree-node{position:relative;min-height:42px;width:280px}:host .mat-mdc-header-cell{height:56px}:host .results{max-height:45%;width:98%}:host .results igo-entity-table ::ng-deep div.table-container{overflow:unset}\n"] }]
     }], function () { return [{ type: i0.ChangeDetectorRef }, { type: SpatialFilterService }, { type: i2.MessageService }, { type: i2.LanguageService }]; }, { map: [{
             type: Input
         }], type: [{
@@ -35501,7 +35501,7 @@ class SpatialFilterListComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SpatialFilterListComponent, [{
         type: Component,
-        args: [{ selector: 'igo-spatial-filter-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"form-list\">\n  <mat-form-field class=\"zone-list\">\n    <mat-label>{{ 'igo.geo.spatialFilter.listLabel' | translate }}</mat-label>\n    <input\n      #input\n      type=\"text\"\n      placeholder=\"{{ 'igo.geo.spatialFilter.listLabel' | translate }}\"\n      matInput\n      [formControl]=\"formControl\"\n      [matAutocomplete]=\"auto\"\n    />\n    <mat-autocomplete\n      #auto=\"matAutocomplete\"\n      (optionSelected)=\"onZoneChange($event.option.value)\"\n      [displayWith]=\"displayFn\"\n    >\n      <mat-option\n        *ngFor=\"let entities of this.store.view.all$() | async\"\n        [value]=\"entities\"\n      >\n        {{ entities.properties.nom }}\n      </mat-option>\n    </mat-autocomplete>\n  </mat-form-field>\n  <div>\n    <div class=\"buffer-div\">\n      <mat-form-field class=\"buffer\">\n        <mat-label>{{ 'igo.geo.spatialFilter.buffer' | translate }}</mat-label>\n        <input\n          type=\"number\"\n          matInput\n          placeholder=\"{{ 'igo.geo.spatialFilter.buffer' | translate }}\"\n          [formControl]=\"bufferFormControl\"\n          [value]=\"0\"\n          [readonly]=\"!zone\"\n        />\n      </mat-form-field>\n\n      <mat-form-field class=\"unit-field\">\n        <mat-select\n          [value]=\"measureUnit\"\n          (selectionChange)=\"onMeasureUnitChange($event.value)\"\n        >\n          <mat-option\n            *ngFor=\"let measureUnit of measureUnits\"\n            [value]=\"measureUnit\"\n          >\n            {{ 'igo.geo.measure.' + measureUnit | translate }}\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block}:host .buffer-div{display:flex;width:100%}:host .zone-list{width:100%}:host .buffer{display:flex;flex-flow:column nowrap;width:110%}:host .unit-field{width:110px;margin-left:16px}\n"] }]
+        args: [{ selector: 'igo-spatial-filter-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"form-list\">\r\n  <mat-form-field class=\"zone-list\">\r\n    <mat-label>{{ 'igo.geo.spatialFilter.listLabel' | translate }}</mat-label>\r\n    <input\r\n      #input\r\n      type=\"text\"\r\n      placeholder=\"{{ 'igo.geo.spatialFilter.listLabel' | translate }}\"\r\n      matInput\r\n      [formControl]=\"formControl\"\r\n      [matAutocomplete]=\"auto\"\r\n    />\r\n    <mat-autocomplete\r\n      #auto=\"matAutocomplete\"\r\n      (optionSelected)=\"onZoneChange($event.option.value)\"\r\n      [displayWith]=\"displayFn\"\r\n    >\r\n      <mat-option\r\n        *ngFor=\"let entities of this.store.view.all$() | async\"\r\n        [value]=\"entities\"\r\n      >\r\n        {{ entities.properties.nom }}\r\n      </mat-option>\r\n    </mat-autocomplete>\r\n  </mat-form-field>\r\n  <div>\r\n    <div class=\"buffer-div\">\r\n      <mat-form-field class=\"buffer\">\r\n        <mat-label>{{ 'igo.geo.spatialFilter.buffer' | translate }}</mat-label>\r\n        <input\r\n          type=\"number\"\r\n          matInput\r\n          placeholder=\"{{ 'igo.geo.spatialFilter.buffer' | translate }}\"\r\n          [formControl]=\"bufferFormControl\"\r\n          [value]=\"0\"\r\n          [readonly]=\"!zone\"\r\n        />\r\n      </mat-form-field>\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        >\r\n          <mat-option\r\n            *ngFor=\"let measureUnit of measureUnits\"\r\n            [value]=\"measureUnit\"\r\n          >\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  </div>\r\n</div>\r\n", styles: [":host{display:block}:host .buffer-div{display:flex;width:100%}:host .zone-list{width:100%}:host .buffer{display:flex;flex-flow:column nowrap;width:110%}:host .unit-field{width:110px;margin-left:16px}\n"] }]
     }], function () { return [{ type: SpatialFilterService }, { type: i2.MessageService }]; }, { store: [{
             type: Input
         }], queryType: [{
@@ -35649,7 +35649,7 @@ class SpatialFilterTypeComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SpatialFilterTypeComponent, [{
         type: Component,
-        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' | translate\">\n    <mat-form-field>\n      <mat-label>{{\n        'igo.geo.spatialFilter.searchLabel' | translate\n      }}</mat-label>\n      <mat-select\n        (selectionChange)=\"onSelectionChange()\"\n        [(value)]=\"selectedQueryType\"\n      >\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    >\n    </igo-spatial-filter-list>\n  </mat-tab>\n\n  <mat-tab [label]=\"'igo.geo.spatialFilter.draw' | translate\">\n    <div class=\"spatial-type-toggle\">\n      <mat-button-toggle-group\n        [value]=\"activeDrawType\"\n        (change)=\"onDrawTypeChange($event.value)\"\n      >\n        <mat-button-toggle\n          [value]=\"spatialType.Polygon\"\n          [matTooltip]=\"'igo.geo.spatialFilter.drawPolygon' | translate\"\n        >\n          <mat-icon svgIcon=\"pentagon-outline\"></mat-icon>\n        </mat-button-toggle>\n        <mat-button-toggle\n          [value]=\"spatialType.Point\"\n          [matTooltip]=\"'igo.geo.spatialFilter.drawCircle' | translate\"\n        >\n          <mat-icon svgIcon=\"record-circle-outline\"></mat-icon>\n        </mat-button-toggle>\n      </mat-button-toggle-group>\n    </div>\n  </mat-tab>\n</mat-tab-group>\n", styles: [":host .mat-mdc-form-field{width:100%}:host .mat-mdc-tab-group ::ng-deep .mat-mdc-tab-body-content{overflow:hidden}:host .mat-mdc-tab-group ::ng-deep .mat-mdc-tab-label{padding:10px}:host .mat-mdc-tab-group ::ng-deep .mat-mdc-tab-body-wrapper{margin-top:5px}:host .spatial-type-toggle{padding:10px;text-align:center}:host .spatial-type-toggle mat-button-toggle-group{width:50%}:host .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\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' | translate\">\r\n    <mat-form-field>\r\n      <mat-label>{{\r\n        'igo.geo.spatialFilter.searchLabel' | translate\r\n      }}</mat-label>\r\n      <mat-select\r\n        (selectionChange)=\"onSelectionChange()\"\r\n        [(value)]=\"selectedQueryType\"\r\n      >\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    >\r\n    </igo-spatial-filter-list>\r\n  </mat-tab>\r\n\r\n  <mat-tab [label]=\"'igo.geo.spatialFilter.draw' | translate\">\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      >\r\n        <mat-button-toggle\r\n          [value]=\"spatialType.Polygon\"\r\n          [matTooltip]=\"'igo.geo.spatialFilter.drawPolygon' | translate\"\r\n        >\r\n          <mat-icon svgIcon=\"pentagon-outline\"></mat-icon>\r\n        </mat-button-toggle>\r\n        <mat-button-toggle\r\n          [value]=\"spatialType.Point\"\r\n          [matTooltip]=\"'igo.geo.spatialFilter.drawCircle' | translate\"\r\n        >\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</mat-tab-group>\r\n", styles: [":host .mat-mdc-form-field{width:100%}:host .mat-mdc-tab-group ::ng-deep .mat-mdc-tab-body-content{overflow:hidden}:host .mat-mdc-tab-group ::ng-deep .mat-mdc-tab-label{padding:10px}:host .mat-mdc-tab-group ::ng-deep .mat-mdc-tab-body-wrapper{margin-top:5px}:host .spatial-type-toggle{padding:10px;text-align:center}:host .spatial-type-toggle mat-button-toggle-group{width:50%}:host .spatial-type-toggle mat-button-toggle-group mat-button-toggle{width:50%}\n"] }]
     }], function () { return []; }, { store: [{
             type: Input
         }], selectedQueryType: [{
@@ -35739,7 +35739,7 @@ class TimeFilterButtonComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TimeFilterButtonComponent, [{
         type: Component,
-        args: [{ selector: 'igo-time-filter-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  *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>\n  <mat-icon\n    aria-hidden=\"false\"\n    [matBadge]=\"badge\"\n    matBadgeColor=\"warn\"\n    matBadgeSize=\"medium\"\n    svgIcon=\"history\"\n  ></mat-icon>\n</button>\n\n<div\n  #ogcFilter\n  class=\"igo-layer-actions-container\"\n  *ngIf=\"header && options.timeFilterable && options.timeFilter\"\n>\n  <igo-time-filter-item\n    *ngIf=\"timeFilterCollapse && options.timeFilter\"\n    igoListItem\n    [header]=\"false\"\n    [layer]=\"layer\"\n  >\n  </igo-time-filter-item>\n</div>\n" }]
+        args: [{ selector: 'igo-time-filter-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\r\n  *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>\r\n  <mat-icon\r\n    aria-hidden=\"false\"\r\n    [matBadge]=\"badge\"\r\n    matBadgeColor=\"warn\"\r\n    matBadgeSize=\"medium\"\r\n    svgIcon=\"history\"\r\n  ></mat-icon>\r\n</button>\r\n\r\n<div\r\n  #ogcFilter\r\n  class=\"igo-layer-actions-container\"\r\n  *ngIf=\"header && options.timeFilterable && options.timeFilter\"\r\n>\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  >\r\n  </igo-time-filter-item>\r\n</div>\r\n" }]
     }], function () { return []; }, { layer: [{
             type: Input
         }], map: [{
@@ -36469,7 +36469,7 @@ class TimeFilterFormComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TimeFilterFormComponent, [{
         type: Component,
-        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\n        class=\"time-filter-mat-datetimepicker-toggle\"\n        [for]=\"datetimePicker\"\n        matSuffix\n      ></mat-datetimepicker-toggle>\n      <mat-datetimepicker\n        #datetimePicker\n        type=\"{{ type }}\"\n        openOnFocus=\"true\"\n        timeInterval=\"5\"\n      ></mat-datetimepicker>\n      <input\n        matInput\n        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      />\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-datetimepicker-toggle\n          class=\"time-filter-mat-datetimepicker-toggle\"\n          [for]=\"minDatetimePicker\"\n          matSuffix\n        ></mat-datetimepicker-toggle>\n        <mat-datetimepicker\n          #minDatetimePicker\n          type=\"{{ type }}\"\n          openOnFocus=\"true\"\n          timeInterval=\"5\"\n        ></mat-datetimepicker>\n        <input\n          matInput\n          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        />\n      </mat-form-field>\n    </div>\n\n    <div class=\"igo-col igo-col-100\">\n      <mat-form-field>\n        <mat-datetimepicker-toggle\n          class=\"time-filter-mat-datetimepicker-toggle\"\n          [for]=\"maxDatetimePicker\"\n          matSuffix\n        ></mat-datetimepicker-toggle>\n        <mat-datetimepicker\n          #maxDatetimePicker\n          type=\"{{ type }}\"\n          openOnFocus=\"true\"\n          timeInterval=\"5\"\n        ></mat-datetimepicker>\n        <input\n          matInput\n          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        />\n      </mat-form-field>\n    </div>\n  </div>\n</div>\n\n<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-select\n        placeholder=\"{{ 'igo.geo.timeFilter.date' | translate }}\"\n        [(ngModel)]=\"year\"\n        (selectionChange)=\"handleYearChange($event)\"\n      >\n        <mat-option [value]=\"year\" *ngFor=\"let year of listYears\">{{\n          year\n        }}</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\n          placeholder=\"{{ 'igo.geo.timeFilter.startDate' | translate }}\"\n          [(ngModel)]=\"startYear\"\n          (selectionChange)=\"handleYearChange($event)\"\n        >\n          <mat-option\n            [value]=\"startYear\"\n            *ngFor=\"let startYear of startListYears\"\n            >{{ startYear }}</mat-option\n          >\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\n          placeholder=\"{{ 'igo.geo.timeFilter.endDate' | translate }}\"\n          [(ngModel)]=\"endYear\"\n          (selectionChange)=\"handleYearChange($event)\"\n        >\n          <mat-option [value]=\"endYear\" *ngFor=\"let endYear of endListYears\">{{\n            endYear\n          }}</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </div>\n  </div>\n</div>\n\n<br />\n<div\n  *ngIf=\"!isRange && style === 'slider' && type === 'year'\"\n  class=\"igo-col igo-col-100 igo-col-100-m mat-typography\"\n>\n  <span>{{ startYear }}</span>\n  <!-- TODO: The 'tickInterval' property no longer exists -->\n  <mat-slider\n    id=\"time-slider\"\n    step=\"{{ step }}\"\n    [min]=\"startYear\"\n    [max]=\"endYear\"\n    [color]=\"color\"\n    thumbLabel\n    [disabled]=\"!options.enabled || !layer.visible\"\n    #ngSlider\n    ><input\n      matSliderThumb\n      [value]=\"handleSliderValue()\"\n      (input)=\"\n        handleSliderYearChange({\n          source: ngSliderThumb,\n          parent: ngSlider,\n          value: ngSliderThumb.value\n        })\n      \"\n      #ngSliderThumb=\"matSliderThumb\"\n      (change)=\"\n        handleSliderYearChange({\n          source: ngSliderThumb,\n          parent: ngSlider,\n          value: ngSliderThumb.value\n        })\n      \"\n    />\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\n      (change)=\"toggleFilterState()\"\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"'igo.geo.filter.toggleFilterState' | translate\"\n      [color]=\"color\"\n      [checked]=\"options.enabled\"\n      [disabled]=\"!layer.visible\"\n    >\n    </mat-slide-toggle>\n    <button\n      [disabled]=\"!options.enabled || !layer.visible\"\n      mat-icon-button\n      color=\"primary\"\n      (click)=\"playYear($event)\"\n    >\n      <mat-icon svgIcon=\"{{ playIcon }}\"></mat-icon>\n    </button>\n    <button\n      [disabled]=\"!options.enabled || !layer.visible\"\n      mat-icon-button\n      color=\"primary\"\n      (click)=\"resetFilter($event)\"\n    >\n      <mat-icon svgIcon=\"{{ resetIcon }}\"></mat-icon>\n    </button>\n  </div>\n</div>\n\n<div\n  *ngIf=\"style === 'slider' && type !== 'year'\"\n  class=\"igo-col igo-col-100 igo-col-100-m\"\n>\n  <!-- TODO: The 'tickInterval' property no longer exists -->\n  <mat-slider\n    id=\"time-slider\"\n    step=\"{{ step }}\"\n    [min]=\"dateToNumber(min)\"\n    [max]=\"dateToNumber(max)\"\n    thumbLabel\n    (selectionChange)=\"handleSliderDateChange($event)\"\n    #ngSlider\n    ><input\n      matSliderThumb\n      [value]=\"handleSliderValue()\"\n      (input)=\"\n        handleSliderDateChange({\n          source: ngSliderThumb,\n          parent: ngSlider,\n          value: ngSliderThumb.value\n        })\n      \"\n      #ngSliderThumb=\"matSliderThumb\"\n    />\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: [":host .igo-layer-filters-container{padding-left:5px}:host #time-slider{width:70%}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){:host #time-slider{width:60%}}:host .date-below{margin:0}:host .igo-layer-actions-container{display:flex;align-items:center;justify-content:center}\n"] }]
+        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\r\n        class=\"time-filter-mat-datetimepicker-toggle\"\r\n        [for]=\"datetimePicker\"\r\n        matSuffix\r\n      ></mat-datetimepicker-toggle>\r\n      <mat-datetimepicker\r\n        #datetimePicker\r\n        type=\"{{ type }}\"\r\n        openOnFocus=\"true\"\r\n        timeInterval=\"5\"\r\n      ></mat-datetimepicker>\r\n      <input\r\n        matInput\r\n        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      />\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-datetimepicker-toggle\r\n          class=\"time-filter-mat-datetimepicker-toggle\"\r\n          [for]=\"minDatetimePicker\"\r\n          matSuffix\r\n        ></mat-datetimepicker-toggle>\r\n        <mat-datetimepicker\r\n          #minDatetimePicker\r\n          type=\"{{ type }}\"\r\n          openOnFocus=\"true\"\r\n          timeInterval=\"5\"\r\n        ></mat-datetimepicker>\r\n        <input\r\n          matInput\r\n          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        />\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\r\n          class=\"time-filter-mat-datetimepicker-toggle\"\r\n          [for]=\"maxDatetimePicker\"\r\n          matSuffix\r\n        ></mat-datetimepicker-toggle>\r\n        <mat-datetimepicker\r\n          #maxDatetimePicker\r\n          type=\"{{ type }}\"\r\n          openOnFocus=\"true\"\r\n          timeInterval=\"5\"\r\n        ></mat-datetimepicker>\r\n        <input\r\n          matInput\r\n          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        />\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  <div *ngIf=\"!isRange\" class=\"igo-col igo-col-100 igo-col-100-m\">\r\n    <mat-form-field>\r\n      <mat-select\r\n        placeholder=\"{{ 'igo.geo.timeFilter.date' | translate }}\"\r\n        [(ngModel)]=\"year\"\r\n        (selectionChange)=\"handleYearChange($event)\"\r\n      >\r\n        <mat-option [value]=\"year\" *ngFor=\"let year of listYears\">{{\r\n          year\r\n        }}</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\r\n          placeholder=\"{{ 'igo.geo.timeFilter.startDate' | translate }}\"\r\n          [(ngModel)]=\"startYear\"\r\n          (selectionChange)=\"handleYearChange($event)\"\r\n        >\r\n          <mat-option\r\n            [value]=\"startYear\"\r\n            *ngFor=\"let startYear of startListYears\"\r\n            >{{ startYear }}</mat-option\r\n          >\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\r\n          placeholder=\"{{ 'igo.geo.timeFilter.endDate' | translate }}\"\r\n          [(ngModel)]=\"endYear\"\r\n          (selectionChange)=\"handleYearChange($event)\"\r\n        >\r\n          <mat-option [value]=\"endYear\" *ngFor=\"let endYear of endListYears\">{{\r\n            endYear\r\n          }}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<br />\r\n<div\r\n  *ngIf=\"!isRange && style === 'slider' && type === 'year'\"\r\n  class=\"igo-col igo-col-100 igo-col-100-m mat-typography\"\r\n>\r\n  <span>{{ startYear }}</span>\r\n  <!-- TODO: The 'tickInterval' property no longer exists -->\r\n  <mat-slider\r\n    id=\"time-slider\"\r\n    step=\"{{ step }}\"\r\n    [min]=\"startYear\"\r\n    [max]=\"endYear\"\r\n    [color]=\"color\"\r\n    thumbLabel\r\n    [disabled]=\"!options.enabled || !layer.visible\"\r\n    #ngSlider\r\n    ><input\r\n      matSliderThumb\r\n      [value]=\"handleSliderValue()\"\r\n      (input)=\"\r\n        handleSliderYearChange({\r\n          source: ngSliderThumb,\r\n          parent: ngSlider,\r\n          value: ngSliderThumb.value\r\n        })\r\n      \"\r\n      #ngSliderThumb=\"matSliderThumb\"\r\n      (change)=\"\r\n        handleSliderYearChange({\r\n          source: ngSliderThumb,\r\n          parent: ngSlider,\r\n          value: ngSliderThumb.value\r\n        })\r\n      \"\r\n    />\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\r\n      (change)=\"toggleFilterState()\"\r\n      tooltip-position=\"below\"\r\n      matTooltipShowDelay=\"500\"\r\n      [matTooltip]=\"'igo.geo.filter.toggleFilterState' | translate\"\r\n      [color]=\"color\"\r\n      [checked]=\"options.enabled\"\r\n      [disabled]=\"!layer.visible\"\r\n    >\r\n    </mat-slide-toggle>\r\n    <button\r\n      [disabled]=\"!options.enabled || !layer.visible\"\r\n      mat-icon-button\r\n      color=\"primary\"\r\n      (click)=\"playYear($event)\"\r\n    >\r\n      <mat-icon svgIcon=\"{{ playIcon }}\"></mat-icon>\r\n    </button>\r\n    <button\r\n      [disabled]=\"!options.enabled || !layer.visible\"\r\n      mat-icon-button\r\n      color=\"primary\"\r\n      (click)=\"resetFilter($event)\"\r\n    >\r\n      <mat-icon svgIcon=\"{{ resetIcon }}\"></mat-icon>\r\n    </button>\r\n  </div>\r\n</div>\r\n\r\n<div\r\n  *ngIf=\"style === 'slider' && type !== 'year'\"\r\n  class=\"igo-col igo-col-100 igo-col-100-m\"\r\n>\r\n  <!-- TODO: The 'tickInterval' property no longer exists -->\r\n  <mat-slider\r\n    id=\"time-slider\"\r\n    step=\"{{ step }}\"\r\n    [min]=\"dateToNumber(min)\"\r\n    [max]=\"dateToNumber(max)\"\r\n    thumbLabel\r\n    (selectionChange)=\"handleSliderDateChange($event)\"\r\n    #ngSlider\r\n    ><input\r\n      matSliderThumb\r\n      [value]=\"handleSliderValue()\"\r\n      (input)=\"\r\n        handleSliderDateChange({\r\n          source: ngSliderThumb,\r\n          parent: ngSlider,\r\n          value: ngSliderThumb.value\r\n        })\r\n      \"\r\n      #ngSliderThumb=\"matSliderThumb\"\r\n    />\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: [":host .igo-layer-filters-container{padding-left:5px}:host #time-slider{width:70%}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){:host #time-slider{width:60%}}:host .date-below{margin:0}:host .igo-layer-actions-container{display:flex;align-items:center;justify-content:center}\n"] }]
     }], function () { return [{ type: i11.DateAdapter }]; }, { layer: [{
             type: Input
         }], options: [{
@@ -36596,7 +36596,7 @@ class TimeFilterItemComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TimeFilterItemComponent, [{
         type: Component,
-        args: [{ selector: 'igo-time-filter-item', template: "<mat-list-item *ngIf=\"header\">\n  <mat-icon\n    class=\"igo-chevron\"\n    matListItemIcon\n    igoCollapse\n    [target]=\"filters\"\n    [collapsed]=\"filtersCollapsed\"\n    (click)=\"toggleFiltersCollapsed()\"\n    svgIcon=\"chevron-up\"\n  >\n  </mat-icon>\n\n  <span\n    matListItemTitle\n    (click)=\"toggleLegendOnClick()\"\n    [ngStyle]=\"{ cursor: filtersCollapsed ? 'default' : 'pointer' }\"\n    >{{ layer.title }}</span\n  >\n\n  <button\n    *ngIf=\"header\"\n    mat-icon-button\n    matListItemMeta\n    [color]=\"layer.visible ? 'primary' : 'default'\"\n    collapsibleButton\n    tooltip-position=\"below\"\n    matTooltipShowDelay=\"500\"\n    [matTooltip]=\"\n      layer.visible\n        ? ('igo.geo.layer.hideLayer' | translate)\n        : ('igo.geo.layer.showLayer' | translate)\n    \"\n    (click)=\"layer.visible = !layer.visible\"\n  >\n    <mat-icon\n      [ngClass]=\"{ disabled: (inResolutionRange$ | async) === false }\"\n      [svgIcon]=\"layer.visible ? 'eye' : 'eye-off'\"\n    >\n    </mat-icon>\n  </button>\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  >\n  </igo-time-filter-form>\n</div>\n", styles: [":host{overflow:hidden}:host .igo-datasource-filters-container{text-align:center;width:100%;display:inline-block;padding-top:5px}:host .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\">\r\n  <mat-icon\r\n    class=\"igo-chevron\"\r\n    matListItemIcon\r\n    igoCollapse\r\n    [target]=\"filters\"\r\n    [collapsed]=\"filtersCollapsed\"\r\n    (click)=\"toggleFiltersCollapsed()\"\r\n    svgIcon=\"chevron-up\"\r\n  >\r\n  </mat-icon>\r\n\r\n  <span\r\n    matListItemTitle\r\n    (click)=\"toggleLegendOnClick()\"\r\n    [ngStyle]=\"{ cursor: filtersCollapsed ? 'default' : 'pointer' }\"\r\n    >{{ layer.title }}</span\r\n  >\r\n\r\n  <button\r\n    *ngIf=\"header\"\r\n    mat-icon-button\r\n    matListItemMeta\r\n    [color]=\"layer.visible ? 'primary' : 'default'\"\r\n    collapsibleButton\r\n    tooltip-position=\"below\"\r\n    matTooltipShowDelay=\"500\"\r\n    [matTooltip]=\"\r\n      layer.visible\r\n        ? ('igo.geo.layer.hideLayer' | translate)\r\n        : ('igo.geo.layer.showLayer' | translate)\r\n    \"\r\n    (click)=\"layer.visible = !layer.visible\"\r\n  >\r\n    <mat-icon\r\n      [ngClass]=\"{ disabled: (inResolutionRange$ | async) === false }\"\r\n      [svgIcon]=\"layer.visible ? 'eye' : 'eye-off'\"\r\n    >\r\n    </mat-icon>\r\n  </button>\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  >\r\n  </igo-time-filter-form>\r\n</div>\r\n", styles: [":host{overflow:hidden}:host .igo-datasource-filters-container{text-align:center;width:100%;display:inline-block;padding-top:5px}:host .igo-layer-legend-container{padding-left:1.125em;width:calc(100% - 18px)}\n"] }]
     }], function () { return [{ type: TimeFilterService }]; }, { header: [{
             type: Input
         }], layer: [{
@@ -36636,7 +36636,7 @@ class TimeFilterListComponent {
 }
 (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\">\n  <ng-template\n    ngFor\n    let-layer\n    [ngForOf]=\"layers | filterableDataSource: 'time'\"\n  >\n    <igo-time-filter-item\n      [header]=\"true\"\n      igoListItem\n      [layer]=\"layer\"\n    ></igo-time-filter-item>\n  </ng-template>\n</igo-list>\n" }]
+        args: [{ selector: 'igo-time-filter-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<igo-list [navigation]=\"false\" [selection]=\"false\">\r\n  <ng-template\r\n    ngFor\r\n    let-layer\r\n    [ngForOf]=\"layers | filterableDataSource: 'time'\"\r\n  >\r\n    <igo-time-filter-item\r\n      [header]=\"true\"\r\n      igoListItem\r\n      [layer]=\"layer\"\r\n    ></igo-time-filter-item>\r\n  </ng-template>\r\n</igo-list>\r\n" }]
     }], function () { return [{ type: i0.ChangeDetectorRef }]; }, { layers: [{
             type: Input
         }] }); })();
@@ -36944,7 +36944,7 @@ class ExportButtonComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ExportButtonComponent, [{
         type: Component,
-        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>\n  <!-- (click)=\"openDownload(layer)\"> -->\n  <mat-icon svgIcon=\"file-export\"></mat-icon>\n</button>\n" }]
+        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>\r\n  <!-- (click)=\"openDownload(layer)\"> -->\r\n  <mat-icon svgIcon=\"file-export\"></mat-icon>\r\n</button>\r\n" }]
     }], function () { return []; }, { layer: [{
             type: Input
         }], color: [{
@@ -38993,7 +38993,7 @@ class ImportExportComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ImportExportComponent, [{
         type: Component,
-        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  >\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\n  class=\"igo-form\"\n  [formGroup]=\"importForm\"\n  *ngIf=\"selectedMode === 'import'\"\n>\n  <div class=\"igo-input-container\">\n    <mat-form-field>\n      <mat-label>{{\n        'igo.geo.importExportForm.importProjPlaceholder' | translate\n      }}</mat-label>\n      <mat-select [(value)]=\"inputProj\">\n        <mat-option\n          *ngFor=\"let projection of projections$ | async\"\n          [value]=\"projection\"\n          (click)=\"$event.stopPropagation()\"\n        >\n          <p matListItemTitle *ngIf=\"projection.translateKey\">\n            {{\n              'igo.geo.importExportForm.projections.' + projection.translateKey\n                | translate: projection\n            }}\n          </p>\n          <p matListItemTitle *ngIf=\"!projection.translateKey\">\n            {{ projection.alias }}\n          </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]=\"\n      importForm.invalid\n        ? ('igo.geo.importExportForm.projections.choose' | translate)\n        : ('igo.geo.importExportForm.importButton' | translate)\n    \"\n    class=\"igo-form-button-group\"\n  >\n    <button\n      [disabled]=\"importForm.invalid || (loading$ | async)\"\n      mat-raised-button\n      type=\"button\"\n      (click)=\"fileInput.click()\"\n    >\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    />\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>\n        {{\n          'igo.geo.importExportForm.importSizeMax'\n            | translate: { size: fileSizeMb }\n        }}\n      </li>\n      <li>\n        {{ 'igo.geo.importExportForm.importFormatAuthorized' | translate }}\n      </li>\n      <li>{{ 'igo.geo.importExportForm.importShpZip' | translate }}</li>\n    </ul>\n  </div>\n  <igo-custom-html\n    *ngIf=\"importHtmlClarifications !== ''\"\n    class=\"mat-typography\"\n    [html]=\"importHtmlClarifications\"\n  >\n  </igo-custom-html>\n</section>\n\n<section\n  class=\"mat-typography\"\n  *ngIf=\"(exportableLayers$ | async).length === 0 && selectedMode === 'export'\"\n>\n  <h4>{{ 'igo.geo.importExportForm.exportNoLayersExportable' | translate }}</h4>\n</section>\n\n<form\n  class=\"igo-form\"\n  [formGroup]=\"form\"\n  *ngIf=\"(exportableLayers$ | async).length > 0 && selectedMode === 'export'\"\n>\n  <div class=\"igo-input-container\">\n    <mat-form-field>\n      <mat-label>{{\n        'igo.geo.importExportForm.exportLayerPlaceholder' | translate\n      }}</mat-label>\n      <mat-select [(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 }}\n            {{\n              (layers?.length === 2\n                ? 'igo.geo.importExportForm.other'\n                : 'igo.geo.importExportForm.others'\n              ) | translate\n            }})\n          </span>\n        </mat-select-trigger>\n        <mat-option\n          *ngFor=\"let layer of exportableLayers$ | async\"\n          [ngClass]=\"{\n            'igo-export-layer-mat-option': layerHasSelectedFeatures(layer)\n          }\"\n          [value]=\"layer.id\"\n          (click)=\"$event.stopPropagation()\"\n        >\n          <p matListItemTitle>{{ layer.title }}</p>\n          <p matListItemTitle>\n            <mat-slide-toggle\n              *ngIf=\"layerHasSelectedFeatures(layer)\"\n              (click)=\"onlySelectedClick($event, layer.id)\"\n              (checked)=\"inLayersIdToExportSelectionOnly(layer)\"\n              (change)=\"onlySelected($event, layer.id)\"\n            >\n              <small>{{\n                'igo.geo.importExportForm.exportSelectedFeature' | translate\n              }}</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>{{\n        'igo.geo.importExportForm.exportFormatPlaceholder' | translate\n      }}</mat-label>\n      <mat-select formControlName=\"format\">\n        <ng-container *ngIf=\"(formats$ | async).length !== 0\">\n          <mat-option\n            *ngFor=\"let format of formats$ | async | keyvalue\"\n            [value]=\"format.key\"\n          >\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\n    class=\"igo-input-container\"\n    *ngIf=\"forceNaming && form.value.format !== 'URL'\"\n  >\n    <mat-form-field>\n      <input\n        matInput\n        formControlName=\"name\"\n        placeholder=\"{{\n          'igo.geo.importExportForm.exportFileNamePlaceholder' | translate\n        }}\"\n      />\n    </mat-form-field>\n  </div>\n\n  <div\n    class=\"igo-input-container\"\n    *ngIf=\"\n      form.value.format === 'CSVcomma' || form.value.format === 'CSVsemicolon'\n    \"\n  >\n    <mat-form-field>\n      <mat-label>{{\n        'igo.geo.importExportForm.encodingPlaceholder' | translate\n      }}</mat-label>\n      <mat-select formControlName=\"encoding\">\n        <ng-container *ngIf=\"(encodings$ | async).length !== 0\">\n          <mat-option\n            *ngFor=\"let encoding of encodings$ | async | keyvalue\"\n            [value]=\"encoding.key\"\n          >\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\n    class=\"export-combine-layers mat-typography\"\n    *ngIf=\"\n      layers.length > 1 &&\n      (form.value.format === 'CSVcomma' || form.value.format === 'CSVsemicolon')\n    \"\n  >\n    <mat-slide-toggle\n      formControlName=\"combineLayers\"\n      [labelPosition]=\"'before'\"\n    >\n      {{ 'igo.geo.importExportForm.exportCombineResults' | translate }}\n    </mat-slide-toggle>\n  </div>\n\n  <div\n    class=\"export-separator mat-typography\"\n    *ngIf=\"\n      layers.length > 1 &&\n      (form.value.format === 'CSVcomma' ||\n        form.value.format === 'CSVsemicolon') &&\n      form.value.combineLayers\n    \"\n  >\n    <mat-slide-toggle formControlName=\"separator\" [labelPosition]=\"'before'\">\n      {{ 'igo.geo.importExportForm.exportSeparator' | translate }}\n    </mat-slide-toggle>\n  </div>\n\n  <div\n    class=\"export-options mat-typography\"\n    *ngIf=\"form.value.format !== 'URL'\"\n  >\n    <mat-slide-toggle\n      formControlName=\"featureInMapExtent\"\n      [labelPosition]=\"'before'\"\n    >\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    >\n      {{\n        form.value.format !== 'URL'\n          ? ('igo.geo.importExportForm.exportButton' | translate)\n          : form.value.layers.length > 1\n          ? ('igo.geo.importExportForm.exportButtonLinks' | translate)\n          : ('igo.geo.importExportForm.exportButtonLink' | translate)\n      }}\n    </button>\n    <igo-spinner [shown]=\"loading$ | async\"></igo-spinner>\n  </div>\n\n  <igo-custom-html\n    *ngIf=\"exportHtmlClarifications !== ''\"\n    class=\"mat-typography\"\n    [html]=\"exportHtmlClarifications\"\n  >\n  </igo-custom-html>\n</form>\n", styles: [":host mat-option.igo-export-layer-mat-option{height:5em;line-height:1em}:host .import-export-toggle{padding:10px;text-align:center}:host .import-export-toggle mat-button-toggle-group{width:100%}:host .import-export-toggle mat-button-toggle-group mat-button-toggle{width:50%}:host h4{padding:0 5px}:host .igo-form{padding:15px 5px}:host .igo-input-container mat-form-field{width:100%}:host .igo-form-button-group{text-align:center;padding-top:10px}:host igo-spinner{position:absolute;padding-left:10px}:host .export-options mat-slide-toggle,:host .export-combine-layers mat-slide-toggle,:host .export-separator mat-slide-toggle{width:100%;padding:10px}:host .export-options mat-slide-toggle ::ng-deep .mdc-form-field,:host .export-combine-layers mat-slide-toggle ::ng-deep .mdc-form-field,:host .export-separator mat-slide-toggle ::ng-deep .mdc-form-field{width:100%}:host .export-options mat-slide-toggle ::ng-deep .mdc-label,:host .export-combine-layers mat-slide-toggle ::ng-deep .mdc-label,:host .export-separator mat-slide-toggle ::ng-deep .mdc-label{margin-left:0;width:calc(100% - 60px)}:host .export-select-trigger{opacity:.75;font-size:.75em}\n"] }]
+        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  >\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\r\n  class=\"igo-form\"\r\n  [formGroup]=\"importForm\"\r\n  *ngIf=\"selectedMode === 'import'\"\r\n>\r\n  <div class=\"igo-input-container\">\r\n    <mat-form-field>\r\n      <mat-label>{{\r\n        'igo.geo.importExportForm.importProjPlaceholder' | translate\r\n      }}</mat-label>\r\n      <mat-select [(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        >\r\n          <p matListItemTitle *ngIf=\"projection.translateKey\">\r\n            {{\r\n              'igo.geo.importExportForm.projections.' + projection.translateKey\r\n                | translate: projection\r\n            }}\r\n          </p>\r\n          <p matListItemTitle *ngIf=\"!projection.translateKey\">\r\n            {{ projection.alias }}\r\n          </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]=\"\r\n      importForm.invalid\r\n        ? ('igo.geo.importExportForm.projections.choose' | translate)\r\n        : ('igo.geo.importExportForm.importButton' | translate)\r\n    \"\r\n    class=\"igo-form-button-group\"\r\n  >\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    >\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    />\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>\r\n        {{\r\n          'igo.geo.importExportForm.importSizeMax'\r\n            | translate: { size: fileSizeMb }\r\n        }}\r\n      </li>\r\n      <li>\r\n        {{ 'igo.geo.importExportForm.importFormatAuthorized' | translate }}\r\n      </li>\r\n      <li>{{ 'igo.geo.importExportForm.importShpZip' | translate }}</li>\r\n    </ul>\r\n  </div>\r\n  <igo-custom-html\r\n    *ngIf=\"importHtmlClarifications !== ''\"\r\n    class=\"mat-typography\"\r\n    [html]=\"importHtmlClarifications\"\r\n  >\r\n  </igo-custom-html>\r\n</section>\r\n\r\n<section\r\n  class=\"mat-typography\"\r\n  *ngIf=\"(exportableLayers$ | async).length === 0 && selectedMode === 'export'\"\r\n>\r\n  <h4>{{ 'igo.geo.importExportForm.exportNoLayersExportable' | translate }}</h4>\r\n</section>\r\n\r\n<form\r\n  class=\"igo-form\"\r\n  [formGroup]=\"form\"\r\n  *ngIf=\"(exportableLayers$ | async).length > 0 && selectedMode === 'export'\"\r\n>\r\n  <div class=\"igo-input-container\">\r\n    <mat-form-field>\r\n      <mat-label>{{\r\n        'igo.geo.importExportForm.exportLayerPlaceholder' | translate\r\n      }}</mat-label>\r\n      <mat-select [(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 }}\r\n            {{\r\n              (layers?.length === 2\r\n                ? 'igo.geo.importExportForm.other'\r\n                : 'igo.geo.importExportForm.others'\r\n              ) | translate\r\n            }})\r\n          </span>\r\n        </mat-select-trigger>\r\n        <mat-option\r\n          *ngFor=\"let layer of exportableLayers$ | async\"\r\n          [ngClass]=\"{\r\n            'igo-export-layer-mat-option': layerHasSelectedFeatures(layer)\r\n          }\"\r\n          [value]=\"layer.id\"\r\n          (click)=\"$event.stopPropagation()\"\r\n        >\r\n          <p matListItemTitle>{{ layer.title }}</p>\r\n          <p matListItemTitle>\r\n            <mat-slide-toggle\r\n              *ngIf=\"layerHasSelectedFeatures(layer)\"\r\n              (click)=\"onlySelectedClick($event, layer.id)\"\r\n              (checked)=\"inLayersIdToExportSelectionOnly(layer)\"\r\n              (change)=\"onlySelected($event, layer.id)\"\r\n            >\r\n              <small>{{\r\n                'igo.geo.importExportForm.exportSelectedFeature' | translate\r\n              }}</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>{{\r\n        'igo.geo.importExportForm.exportFormatPlaceholder' | translate\r\n      }}</mat-label>\r\n      <mat-select formControlName=\"format\">\r\n        <ng-container *ngIf=\"(formats$ | async).length !== 0\">\r\n          <mat-option\r\n            *ngFor=\"let format of formats$ | async | keyvalue\"\r\n            [value]=\"format.key\"\r\n          >\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\r\n    class=\"igo-input-container\"\r\n    *ngIf=\"forceNaming && form.value.format !== 'URL'\"\r\n  >\r\n    <mat-form-field>\r\n      <input\r\n        matInput\r\n        formControlName=\"name\"\r\n        placeholder=\"{{\r\n          'igo.geo.importExportForm.exportFileNamePlaceholder' | translate\r\n        }}\"\r\n      />\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <div\r\n    class=\"igo-input-container\"\r\n    *ngIf=\"\r\n      form.value.format === 'CSVcomma' || form.value.format === 'CSVsemicolon'\r\n    \"\r\n  >\r\n    <mat-form-field>\r\n      <mat-label>{{\r\n        'igo.geo.importExportForm.encodingPlaceholder' | translate\r\n      }}</mat-label>\r\n      <mat-select formControlName=\"encoding\">\r\n        <ng-container *ngIf=\"(encodings$ | async).length !== 0\">\r\n          <mat-option\r\n            *ngFor=\"let encoding of encodings$ | async | keyvalue\"\r\n            [value]=\"encoding.key\"\r\n          >\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\r\n    class=\"export-combine-layers mat-typography\"\r\n    *ngIf=\"\r\n      layers.length > 1 &&\r\n      (form.value.format === 'CSVcomma' || form.value.format === 'CSVsemicolon')\r\n    \"\r\n  >\r\n    <mat-slide-toggle\r\n      formControlName=\"combineLayers\"\r\n      [labelPosition]=\"'before'\"\r\n    >\r\n      {{ 'igo.geo.importExportForm.exportCombineResults' | translate }}\r\n    </mat-slide-toggle>\r\n  </div>\r\n\r\n  <div\r\n    class=\"export-separator mat-typography\"\r\n    *ngIf=\"\r\n      layers.length > 1 &&\r\n      (form.value.format === 'CSVcomma' ||\r\n        form.value.format === 'CSVsemicolon') &&\r\n      form.value.combineLayers\r\n    \"\r\n  >\r\n    <mat-slide-toggle formControlName=\"separator\" [labelPosition]=\"'before'\">\r\n      {{ 'igo.geo.importExportForm.exportSeparator' | translate }}\r\n    </mat-slide-toggle>\r\n  </div>\r\n\r\n  <div\r\n    class=\"export-options mat-typography\"\r\n    *ngIf=\"form.value.format !== 'URL'\"\r\n  >\r\n    <mat-slide-toggle\r\n      formControlName=\"featureInMapExtent\"\r\n      [labelPosition]=\"'before'\"\r\n    >\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    >\r\n      {{\r\n        form.value.format !== 'URL'\r\n          ? ('igo.geo.importExportForm.exportButton' | translate)\r\n          : form.value.layers.length > 1\r\n          ? ('igo.geo.importExportForm.exportButtonLinks' | translate)\r\n          : ('igo.geo.importExportForm.exportButtonLink' | translate)\r\n      }}\r\n    </button>\r\n    <igo-spinner [shown]=\"loading$ | async\"></igo-spinner>\r\n  </div>\r\n\r\n  <igo-custom-html\r\n    *ngIf=\"exportHtmlClarifications !== ''\"\r\n    class=\"mat-typography\"\r\n    [html]=\"exportHtmlClarifications\"\r\n  >\r\n  </igo-custom-html>\r\n</form>\r\n", styles: [":host mat-option.igo-export-layer-mat-option{height:5em;line-height:1em}:host .import-export-toggle{padding:10px;text-align:center}:host .import-export-toggle mat-button-toggle-group{width:100%}:host .import-export-toggle mat-button-toggle-group mat-button-toggle{width:50%}:host h4{padding:0 5px}:host .igo-form{padding:15px 5px}:host .igo-input-container mat-form-field{width:100%}:host .igo-form-button-group{text-align:center;padding-top:10px}:host igo-spinner{position:absolute;padding-left:10px}:host .export-options mat-slide-toggle,:host .export-combine-layers mat-slide-toggle,:host .export-separator mat-slide-toggle{width:100%;padding:10px}:host .export-options mat-slide-toggle ::ng-deep .mdc-form-field,:host .export-combine-layers mat-slide-toggle ::ng-deep .mdc-form-field,:host .export-separator mat-slide-toggle ::ng-deep .mdc-form-field{width:100%}:host .export-options mat-slide-toggle ::ng-deep .mdc-label,:host .export-combine-layers mat-slide-toggle ::ng-deep .mdc-label,:host .export-separator mat-slide-toggle ::ng-deep .mdc-label{margin-left:0;width:calc(100% - 60px)}:host .export-select-trigger{opacity:.75;font-size:.75em}\n"] }]
     }], function () { return [{ type: ImportService }, { type: ExportService }, { type: i2.LanguageService }, { type: i2.MessageService }, { type: StyleListService }, { type: StyleService }, { type: i2$1.UntypedFormBuilder }, { type: i2.ConfigService }, { type: i0.ChangeDetectorRef }, { type: i2.StorageService }, { type: DownloadService }, { type: LayerService }, { type: i5$1.ConfirmDialogService }]; }, { selectFirstProj: [{
             type: Input
         }], map: [{
@@ -39470,7 +39470,7 @@ class MeasurerItemComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MeasurerItemComponent, [{
         type: Component,
-        args: [{ selector: 'igo-measurer-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-form-field class=\"measure-field\" floatLabel=\"always\">\n  <mat-label>{{ placeholder }}</mat-label>\n  <input\n    matInput\n    [disabled]=\"true\"\n    [readonly]=\"true\"\n    [value]=\"(measure$ | async) || 0 | measureFormat: measureUnit\"\n  />\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  >\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}:host .measure-field{pointer-events:none}:host .unit-field{margin-left:12px}:host .unit-field ::ng-deep .mat-mdc-form-field-infix{width:-moz-fit-content;width:fit-content}:host .unit-field ::ng-deep .mat-mdc-select-min-line{padding-right:8px}:host ::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{display:none}\n"] }]
+        args: [{ selector: 'igo-measurer-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-form-field class=\"measure-field\" floatLabel=\"always\">\r\n  <mat-label>{{ placeholder }}</mat-label>\r\n  <input\r\n    matInput\r\n    [disabled]=\"true\"\r\n    [readonly]=\"true\"\r\n    [value]=\"(measure$ | async) || 0 | measureFormat: measureUnit\"\r\n  />\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  >\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}:host .measure-field{pointer-events:none}:host .unit-field{margin-left:12px}:host .unit-field ::ng-deep .mat-mdc-form-field-infix{width:-moz-fit-content;width:fit-content}:host .unit-field ::ng-deep .mat-mdc-select-min-line{padding-right:8px}:host ::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{display:none}\n"] }]
     }], function () { return []; }, { measureType: [{
             type: Input
         }], measureUnit: [{
@@ -39850,7 +39850,7 @@ class SearchSelectorComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SearchSelectorComponent, [{
         type: Component,
-        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  >\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  >\n    <mat-radio-group\n      class=\"igo-search-selector-radio-group\"\n      [value]=\"searchType$ | async\"\n      (change)=\"onSearchTypeChange($event.value)\"\n    >\n      <mat-radio-button\n        *ngFor=\"let searchType of searchTypes\"\n        [value]=\"searchType\"\n      >\n        {{ getSearchTypeTitle(searchType) | translate }}\n      </mat-radio-button>\n    </mat-radio-group>\n  </mat-menu>\n</div>\n", styles: [":host .igo-search-selector-button{border-radius:0}:host .igo-search-selector-button button{border-radius:0!important}:host .igo-search-selector-button button .mat-ripple,:host .igo-search-selector-button button .mdc-icon-button__ripple{border-radius:0!important}:host .igo-search-selector-radio-group{display:inline-flex;flex-direction:column}:host .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\">\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  >\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  >\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    >\r\n      <mat-radio-button\r\n        *ngFor=\"let searchType of searchTypes\"\r\n        [value]=\"searchType\"\r\n      >\r\n        {{ getSearchTypeTitle(searchType) | translate }}\r\n      </mat-radio-button>\r\n    </mat-radio-group>\r\n  </mat-menu>\r\n</div>\r\n", styles: [":host .igo-search-selector-button{border-radius:0}:host .igo-search-selector-button button{border-radius:0!important}:host .igo-search-selector-button button .mat-ripple,:host .igo-search-selector-button button .mdc-icon-button__ripple{border-radius:0!important}:host .igo-search-selector-radio-group{display:inline-flex;flex-direction:column}:host .igo-search-selector-radio-group mat-radio-button{margin:5px}\n"] }]
     }], function () { return [{ type: SearchSourceService }]; }, { searchTypes: [{
             type: Input
         }], searchType: [{
@@ -40856,7 +40856,7 @@ class SearchBarComponent {
 }
 (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 }\">\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: showSearchButton }\"\n      [disabled]=\"disabled$ | async\"\n      [placeholder]=\"\n        placeholder\n          ? placeholder\n          : (placeholder$ | async)\n          ? (placeholder$.value | translate)\n          : undefined\n      \"\n      [value]=\"term$ | async\"\n      (keyup)=\"onKeyup($event)\"\n      (touchend)=\"onKeyup($event)\"\n    />\n    <button\n      *ngIf=\"(empty$ | async) === false\"\n      mat-icon-button\n      matSuffix\n      [color]=\"color\"\n      (click)=\"onClearButtonClick()\"\n      [matTooltip]=\"'igo.geo.search.clearSearch' | translate\"\n    >\n      <mat-icon svgIcon=\"close\"></mat-icon>\n    </button>\n  </mat-form-field>\n\n  <mat-divider *ngIf=\"withDivider\" [vertical]=\"true\"></mat-divider>\n\n  <div class=\"search-bar-buttons\">\n    <button *ngIf=\"showSearchButton\" mat-icon-button [color]=\"color\">\n      <mat-icon svgIcon=\"magnify\"></mat-icon>\n    </button>\n\n    <igo-search-selector\n      *ngIf=\"searchSelector\"\n      [searchTypes]=\"searchTypes\"\n      [searchType]=\"searchType$ | async\"\n      (searchTypeChange)=\"onSearchTypeChange($event)\"\n    >\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      [reverseSearchCoordsFormatEnabled]=\"reverseSearchCoordsFormatEnabled\"\n      (reverseSearchCoordsFormatStatus)=\"\n        reverseSearchCoordsFormatStatus.emit($event)\n      \"\n      (searchSourceChange)=\"onSearchSettingsChange()\"\n    >\n    </igo-search-settings>\n  </div>\n</div>\n", styles: [":host .igo-search-bar-container{position:relative;width:100%;display:flex}:host mat-form-field{flex:1}:host mat-divider{margin:8px 0}:host ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}:host ::ng-deep .mat-mdc-text-field-wrapper{align-items:center;padding-right:0}:host ::ng-deep .mat-mdc-form-field-infix{align-self:center}:host ::ng-deep mat-form-field input{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host .search-bar-buttons{position:relative;display:inline-flex}:host .search-bar-buttons>button:nth-child(2):before{content:\"\";border-right:1px solid #ddd;height:28px}:host igo-search-selector{background-color:#fff;top:0;border-radius:0}:host igo-search-settings{background-color:#fff;top:0;border-radius:0}:host ::ng-deep mat-form-field .mdc-line-ripple{display:none}\n"] }]
+        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: showSearchButton }\"\r\n      [disabled]=\"disabled$ | async\"\r\n      [placeholder]=\"\r\n        placeholder\r\n          ? placeholder\r\n          : (placeholder$ | async)\r\n          ? (placeholder$.value | translate)\r\n          : undefined\r\n      \"\r\n      [value]=\"term$ | async\"\r\n      (keyup)=\"onKeyup($event)\"\r\n      (touchend)=\"onKeyup($event)\"\r\n    />\r\n    <button\r\n      *ngIf=\"(empty$ | async) === false\"\r\n      mat-icon-button\r\n      matSuffix\r\n      [color]=\"color\"\r\n      (click)=\"onClearButtonClick()\"\r\n      [matTooltip]=\"'igo.geo.search.clearSearch' | translate\"\r\n    >\r\n      <mat-icon svgIcon=\"close\"></mat-icon>\r\n    </button>\r\n  </mat-form-field>\r\n\r\n  <mat-divider *ngIf=\"withDivider\" [vertical]=\"true\"></mat-divider>\r\n\r\n  <div class=\"search-bar-buttons\">\r\n    <button *ngIf=\"showSearchButton\" mat-icon-button [color]=\"color\">\r\n      <mat-icon svgIcon=\"magnify\"></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    >\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      [reverseSearchCoordsFormatEnabled]=\"reverseSearchCoordsFormatEnabled\"\r\n      (reverseSearchCoordsFormatStatus)=\"\r\n        reverseSearchCoordsFormatStatus.emit($event)\r\n      \"\r\n      (searchSourceChange)=\"onSearchSettingsChange()\"\r\n    >\r\n    </igo-search-settings>\r\n  </div>\r\n</div>\r\n", styles: [":host .igo-search-bar-container{position:relative;width:100%;display:flex}:host mat-form-field{flex:1}:host mat-divider{margin:8px 0}:host ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}:host ::ng-deep .mat-mdc-text-field-wrapper{align-items:center;padding-right:0}:host ::ng-deep .mat-mdc-form-field-infix{align-self:center}:host ::ng-deep mat-form-field input{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host .search-bar-buttons{position:relative;display:inline-flex}:host .search-bar-buttons>button:nth-child(2):before{content:\"\";border-right:1px solid #ddd;height:28px}:host igo-search-selector{background-color:#fff;top:0;border-radius:0}:host igo-search-settings{background-color:#fff;top:0;border-radius:0}:host ::ng-deep mat-form-field .mdc-line-ripple{display:none}\n"] }]
     }], function () { return [{ type: i2.ConfigService }, { type: SearchService }, { type: SearchSourceService }]; }, { searchTypes: [{
             type: Input
         }], withDivider: [{
@@ -41149,7 +41149,7 @@ class SearchResultsItemComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SearchResultsItemComponent, [{
         type: Component,
-        args: [{ selector: 'igo-search-results-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-list-item\n  (mouseenter)=\"onMouseEvent($event)\"\n  (mouseleave)=\"onMouseEvent($event)\"\n>\n  <mat-icon\n    *ngIf=\"icon\"\n    matListItemIcon\n    [svgIcon]=\"showIcons ? icon : 'blank'\"\n  ></mat-icon>\n\n  <div\n    matListItemTitle\n    *ngIf=\"titleHtml; else normalTitle\"\n    [innerHtml]=\"titleHtml\"\n    matTooltipShowDelay=\"500\"\n    [matTooltip]=\"tooltipHtml\"\n    matTooltipClass=\"search-result-tooltip\"\n  ></div>\n  <ng-template #normalTitle>\n    <span\n      matListItemTitle\n      *ngIf=\"!titleHtml\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"title\"\n      >{{ title }}</span\n    >\n  </ng-template>\n\n  <div matListItemMeta>\n    <button\n      *ngIf=\"withZoomButton\"\n      igoStopPropagation\n      mat-icon-button\n      (click)=\"onZoomHandler()\"\n    >\n      <mat-icon svgIcon=\"magnify\"></mat-icon>\n    </button>\n\n    <ng-content select=\"[igoSearchItemToolbar]\"> </ng-content>\n  </div>\n</mat-list-item>\n", styles: [":host ::ng-deep small{color:#8c8c8c}:host div[matlistitemmeta]:empty{display:none}:host ::ng-deep .search-result-tooltip{white-space:pre-line}\n"] }]
+        args: [{ selector: 'igo-search-results-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-list-item\r\n  (mouseenter)=\"onMouseEvent($event)\"\r\n  (mouseleave)=\"onMouseEvent($event)\"\r\n>\r\n  <mat-icon\r\n    *ngIf=\"icon\"\r\n    matListItemIcon\r\n    [svgIcon]=\"showIcons ? icon : 'blank'\"\r\n  ></mat-icon>\r\n\r\n  <div\r\n    matListItemTitle\r\n    *ngIf=\"titleHtml; else normalTitle\"\r\n    [innerHtml]=\"titleHtml\"\r\n    matTooltipShowDelay=\"500\"\r\n    [matTooltip]=\"tooltipHtml\"\r\n    matTooltipClass=\"search-result-tooltip\"\r\n  ></div>\r\n  <ng-template #normalTitle>\r\n    <span\r\n      matListItemTitle\r\n      *ngIf=\"!titleHtml\"\r\n      matTooltipShowDelay=\"500\"\r\n      [matTooltip]=\"title\"\r\n      >{{ title }}</span\r\n    >\r\n  </ng-template>\r\n\r\n  <div matListItemMeta>\r\n    <button\r\n      *ngIf=\"withZoomButton\"\r\n      igoStopPropagation\r\n      mat-icon-button\r\n      (click)=\"onZoomHandler()\"\r\n    >\r\n      <mat-icon svgIcon=\"magnify\"></mat-icon>\r\n    </button>\r\n\r\n    <ng-content select=\"[igoSearchItemToolbar]\"> </ng-content>\r\n  </div>\r\n</mat-list-item>\r\n", styles: [":host ::ng-deep small{color:#8c8c8c}:host div[matlistitemmeta]:empty{display:none}:host ::ng-deep .search-result-tooltip{white-space:pre-line}\n"] }]
     }], null, { result: [{
             type: Input
         }], map: [{
@@ -41267,7 +41267,7 @@ class SaveFeatureDialogComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SaveFeatureDialogComponent, [{
         type: Component,
-        args: [{ selector: 'igo-save-feature-dialog', template: "<h1 mat-dialog-title class=\"mat-typography\">\n  {{ 'igo.geo.layer.saveFeatureInLayer' | translate }}\n</h1>\n\n<div mat-dialog-content class=\"mat-typography\">\n  <form class=\"igo-form\" [formGroup]=\"form\">\n    <igo-list [navigation]=\"false\" [selection]=\"false\">\n      <igo-search-results-item\n        igoListItem\n        color=\"accent\"\n        [result]=\"feature\"\n        showIcons=\"true\"\n      >\n      </igo-search-results-item>\n    </igo-list>\n\n    <div class=\"igo-input-container\">\n      <mat-form-field>\n        <input\n          type=\"text\"\n          placeholder=\"{{ 'igo.geo.layer.chooseOrSet' | translate }}\"\n          matInput\n          [matAutocomplete]=\"auto\"\n          formControlName=\"layerName\"\n        />\n        <mat-autocomplete [displayWith]=\"displayFn\" #auto=\"matAutocomplete\">\n          <mat-option\n            *ngFor=\"let layer of filteredLayers$ | async\"\n            [value]=\"layer\"\n          >\n            <p matListItemTitle>{{ layer.title }}</p>\n          </mat-option>\n        </mat-autocomplete>\n      </mat-form-field>\n    </div>\n  </form>\n</div>\n\n<div mat-dialog-actions style=\"justify-content: center\">\n  <div class=\"igo-form-button-group create-layer-button-top-padding\">\n    <button mat-raised-button type=\"button\" (click)=\"cancel()\">\n      {{ 'igo.geo.layer.cancelBtn' | translate }}\n    </button>\n    <button\n      id=\"createLayerBtnDialog\"\n      mat-raised-button\n      type=\"button\"\n      color=\"primary\"\n      (click)=\"save()\"\n    >\n      {{ 'igo.geo.layer.saveBtn' | translate }}\n    </button>\n  </div>\n</div>\n", styles: [":host mat-form-field{width:100%}:host .create-layer-button-top-padding{padding-top:25px}:host .igo-form{padding:10px 5px 5px}:host .igo-form-button-group{text-align:center}:host button{cursor:pointer}:host button#createLayerBtnDialog[disabled=true]{cursor:default;background-color:#0000001f;color:#00000042}:host .error{color:red}\n"] }]
+        args: [{ selector: 'igo-save-feature-dialog', template: "<h1 mat-dialog-title class=\"mat-typography\">\r\n  {{ 'igo.geo.layer.saveFeatureInLayer' | translate }}\r\n</h1>\r\n\r\n<div mat-dialog-content class=\"mat-typography\">\r\n  <form class=\"igo-form\" [formGroup]=\"form\">\r\n    <igo-list [navigation]=\"false\" [selection]=\"false\">\r\n      <igo-search-results-item\r\n        igoListItem\r\n        color=\"accent\"\r\n        [result]=\"feature\"\r\n        showIcons=\"true\"\r\n      >\r\n      </igo-search-results-item>\r\n    </igo-list>\r\n\r\n    <div class=\"igo-input-container\">\r\n      <mat-form-field>\r\n        <input\r\n          type=\"text\"\r\n          placeholder=\"{{ 'igo.geo.layer.chooseOrSet' | translate }}\"\r\n          matInput\r\n          [matAutocomplete]=\"auto\"\r\n          formControlName=\"layerName\"\r\n        />\r\n        <mat-autocomplete [displayWith]=\"displayFn\" #auto=\"matAutocomplete\">\r\n          <mat-option\r\n            *ngFor=\"let layer of filteredLayers$ | async\"\r\n            [value]=\"layer\"\r\n          >\r\n            <p matListItemTitle>{{ layer.title }}</p>\r\n          </mat-option>\r\n        </mat-autocomplete>\r\n      </mat-form-field>\r\n    </div>\r\n  </form>\r\n</div>\r\n\r\n<div mat-dialog-actions style=\"justify-content: center\">\r\n  <div class=\"igo-form-button-group create-layer-button-top-padding\">\r\n    <button mat-raised-button type=\"button\" (click)=\"cancel()\">\r\n      {{ 'igo.geo.layer.cancelBtn' | translate }}\r\n    </button>\r\n    <button\r\n      id=\"createLayerBtnDialog\"\r\n      mat-raised-button\r\n      type=\"button\"\r\n      color=\"primary\"\r\n      (click)=\"save()\"\r\n    >\r\n      {{ 'igo.geo.layer.saveBtn' | translate }}\r\n    </button>\r\n  </div>\r\n</div>\r\n", styles: [":host mat-form-field{width:100%}:host .create-layer-button-top-padding{padding-top:25px}:host .igo-form{padding:10px 5px 5px}:host .igo-form-button-group{text-align:center}:host button{cursor:pointer}:host button#createLayerBtnDialog[disabled=true]{cursor:default;background-color:#0000001f;color:#00000042}:host .error{color:red}\n"] }]
     }], function () { return [{ type: i2$1.UntypedFormBuilder }, { type: i2.LanguageService }, { type: i1$3.MatDialogRef }, { type: undefined, decorators: [{
                 type: Optional
             }, {
@@ -41685,7 +41685,7 @@ class SearchResultAddButtonComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SearchResultAddButtonComponent, [{
         type: Component,
-        args: [{ selector: 'igo-search-add-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  igoStopPropagation\n  (mouseenter)=\"onMouseEvent($event)\"\n  (mouseleave)=\"onMouseEvent($event)\"\n  *ngIf=\"layer.meta.dataType === 'Layer'\"\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>\n  <mat-icon\n    aria-hidden=\"false\"\n    matBadge=\"icon\"\n    [igoMatBadgeIcon]=\"getBadgeIcon()\"\n    igoMatBadgeColor=\"rgba(0,0,0,0.87)\"\n    igoMatBadgeBackgroundColor=\"none\"\n    igoMatBadgeInverseColor=\"true\"\n    [matBadgeHidden]=\"\n      ((inRange$ | async) && (isVisible$ | async) === true) ||\n      ((inRange$ | async) && !added) ||\n      ((inRange$ | async) && (isPreview$ | async))\n    \"\n    [matBadgeDisabled]=\"(inRange$ | async) === false\"\n    matBadgeSize=\"small\"\n    matBadgePosition=\"after\"\n    [svgIcon]=\"(isPreview$ | async) ? 'plus' : added ? 'delete' : 'plus'\"\n  >\n  </mat-icon>\n</button>\n\n<button\n  [id]=\"!isMobile ? 'hide-save-search-result-btn' : ''\"\n  igoStopPropagation\n  *ngIf=\"layer.meta.dataType === 'Feature' && saveSearchResultInLayer\"\n  mat-icon-button\n  tooltip-position=\"below\"\n  matTooltipShowDelay=\"500\"\n  [matTooltip]=\"addFeatureToLayerTooltip$ | async | translate\"\n  (click)=\"addFeatureToLayer()\"\n>\n  <mat-icon\n    aria-hidden=\"false\"\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=\"file-plus-outline\"\n  >\n  </mat-icon>\n</button>\n", styles: [":host #hide-save-search-result-btn{display:none}:host #show-save-search-result-btn{display:block}\n"] }]
+        args: [{ selector: 'igo-search-add-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\r\n  igoStopPropagation\r\n  (mouseenter)=\"onMouseEvent($event)\"\r\n  (mouseleave)=\"onMouseEvent($event)\"\r\n  *ngIf=\"layer.meta.dataType === 'Layer'\"\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>\r\n  <mat-icon\r\n    aria-hidden=\"false\"\r\n    matBadge=\"icon\"\r\n    [igoMatBadgeIcon]=\"getBadgeIcon()\"\r\n    igoMatBadgeColor=\"rgba(0,0,0,0.87)\"\r\n    igoMatBadgeBackgroundColor=\"none\"\r\n    igoMatBadgeInverseColor=\"true\"\r\n    [matBadgeHidden]=\"\r\n      ((inRange$ | async) && (isVisible$ | async) === true) ||\r\n      ((inRange$ | async) && !added) ||\r\n      ((inRange$ | async) && (isPreview$ | async))\r\n    \"\r\n    [matBadgeDisabled]=\"(inRange$ | async) === false\"\r\n    matBadgeSize=\"small\"\r\n    matBadgePosition=\"after\"\r\n    [svgIcon]=\"(isPreview$ | async) ? 'plus' : added ? 'delete' : 'plus'\"\r\n  >\r\n  </mat-icon>\r\n</button>\r\n\r\n<button\r\n  [id]=\"!isMobile ? 'hide-save-search-result-btn' : ''\"\r\n  igoStopPropagation\r\n  *ngIf=\"layer.meta.dataType === 'Feature' && saveSearchResultInLayer\"\r\n  mat-icon-button\r\n  tooltip-position=\"below\"\r\n  matTooltipShowDelay=\"500\"\r\n  [matTooltip]=\"addFeatureToLayerTooltip$ | async | translate\"\r\n  (click)=\"addFeatureToLayer()\"\r\n>\r\n  <mat-icon\r\n    aria-hidden=\"false\"\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=\"file-plus-outline\"\r\n  >\r\n  </mat-icon>\r\n</button>\r\n", styles: [":host #hide-save-search-result-btn{display:none}:host #show-save-search-result-btn{display:block}\n"] }]
     }], function () { return [{ type: LayerService }, { type: i1$3.MatDialog }, { type: DataSourceService }, { type: i2.MediaService }]; }, { layer: [{
             type: Input
         }], store: [{
@@ -42131,7 +42131,7 @@ class SearchResultsComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SearchResultsComponent, [{
         type: Component,
-        args: [{ selector: 'igo-search-results', changeDetection: ChangeDetectionStrategy.OnPush, template: "<igo-list [navigation]=\"true\" *ngIf=\"tabsMode === false\">\n  <ng-template #groupTemplate ngFor let-group [ngForOf]=\"results$ | async\">\n    <igo-collapsible\n      [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    >\n      <ng-container\n        *ngTemplateOutlet=\"\n          storeItemTemplate;\n          context: { results: group.results }\n        \"\n      ></ng-container>\n    </igo-collapsible>\n\n    <ng-template #flatTemplate>\n      <ng-container\n        *ngTemplateOutlet=\"\n          storeItemTemplate;\n          context: { results: group.results }\n        \"\n      ></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\n            igoSearchItemToolbar\n            [ngTemplateOutlet]=\"templateSearchToolbar\"\n            [ngTemplateOutletContext]=\"{ result: result }\"\n          >\n          </ng-container>\n        </igo-search-results-item>\n      </ng-template>\n      <span\n        class=\"moreResults mat-typography\"\n        *ngIf=\"isMoreResults(group)\"\n        (click)=\"displayMoreResults(group)\"\n      >\n        <u>{{ 'igo.geo.search.displayMoreResults' | translate }}</u>\n      </span>\n    </ng-template>\n  </ng-template>\n</igo-list>\n\n<igo-list [navigation]=\"true\" *ngIf=\"tabsMode\">\n  <ng-container\n    *ngIf=\"\n      mode === searchResultMode.Grouped;\n      then tabsTemplate;\n      else flatTemplate\n    \"\n  ></ng-container>\n\n  <ng-template #tabsTemplate>\n    <mat-tab-group class=\"custom-tabs-view\" dynamicHeight>\n      <mat-tab\n        *ngFor=\"let group of results$ | async\"\n        [label]=\"computeGroupTitle(group)\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"storeItemTemplate; context: { group: group }\"\n        ></ng-container>\n      </mat-tab>\n    </mat-tab-group>\n  </ng-template>\n\n  <ng-template #flatTemplate>\n    <ng-template ngFor let-group [ngForOf]=\"results$ | async\">\n      <ng-container\n        *ngTemplateOutlet=\"storeItemTemplate; context: { group: group }\"\n      ></ng-container>\n    </ng-template>\n  </ng-template>\n\n  <ng-template #storeItemTemplate let-group=\"group\">\n    <ng-template ngFor let-result [ngForOf]=\"group.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\n          igoSearchItemToolbar\n          [ngTemplateOutlet]=\"templateSearchToolbar\"\n          [ngTemplateOutletContext]=\"{ result: result }\"\n        >\n        </ng-container>\n      </igo-search-results-item>\n    </ng-template>\n    <span\n      class=\"moreResults mat-typography\"\n      *ngIf=\"isMoreResults(group)\"\n      (click)=\"displayMoreResults(group)\"\n    >\n      <u>{{ 'igo.geo.search.displayMoreResults' | translate }}</u>\n    </span>\n  </ng-template>\n</igo-list>\n", styles: [":host .moreResults{cursor:pointer;color:#00f;float:right;margin-right:10px;margin-top:5px}:host igo-list ::ng-deep mat-list{height:100%}:host igo-list ::ng-deep mat-list .custom-tabs-view .mat-mdc-tab-header-pagination{min-width:20px}\n"] }]
+        args: [{ selector: 'igo-search-results', changeDetection: ChangeDetectionStrategy.OnPush, template: "<igo-list [navigation]=\"true\" *ngIf=\"tabsMode === false\">\r\n  <ng-template #groupTemplate ngFor let-group [ngForOf]=\"results$ | async\">\r\n    <igo-collapsible\r\n      [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    >\r\n      <ng-container\r\n        *ngTemplateOutlet=\"\r\n          storeItemTemplate;\r\n          context: { results: group.results }\r\n        \"\r\n      ></ng-container>\r\n    </igo-collapsible>\r\n\r\n    <ng-template #flatTemplate>\r\n      <ng-container\r\n        *ngTemplateOutlet=\"\r\n          storeItemTemplate;\r\n          context: { results: group.results }\r\n        \"\r\n      ></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\r\n            igoSearchItemToolbar\r\n            [ngTemplateOutlet]=\"templateSearchToolbar\"\r\n            [ngTemplateOutletContext]=\"{ result: result }\"\r\n          >\r\n          </ng-container>\r\n        </igo-search-results-item>\r\n      </ng-template>\r\n      <span\r\n        class=\"moreResults mat-typography\"\r\n        *ngIf=\"isMoreResults(group)\"\r\n        (click)=\"displayMoreResults(group)\"\r\n      >\r\n        <u>{{ 'igo.geo.search.displayMoreResults' | translate }}</u>\r\n      </span>\r\n    </ng-template>\r\n  </ng-template>\r\n</igo-list>\r\n\r\n<igo-list [navigation]=\"true\" *ngIf=\"tabsMode\">\r\n  <ng-container\r\n    *ngIf=\"\r\n      mode === searchResultMode.Grouped;\r\n      then tabsTemplate;\r\n      else flatTemplate\r\n    \"\r\n  ></ng-container>\r\n\r\n  <ng-template #tabsTemplate>\r\n    <mat-tab-group class=\"custom-tabs-view\" dynamicHeight>\r\n      <mat-tab\r\n        *ngFor=\"let group of results$ | async\"\r\n        [label]=\"computeGroupTitle(group)\"\r\n      >\r\n        <ng-container\r\n          *ngTemplateOutlet=\"storeItemTemplate; context: { group: group }\"\r\n        ></ng-container>\r\n      </mat-tab>\r\n    </mat-tab-group>\r\n  </ng-template>\r\n\r\n  <ng-template #flatTemplate>\r\n    <ng-template ngFor let-group [ngForOf]=\"results$ | async\">\r\n      <ng-container\r\n        *ngTemplateOutlet=\"storeItemTemplate; context: { group: group }\"\r\n      ></ng-container>\r\n    </ng-template>\r\n  </ng-template>\r\n\r\n  <ng-template #storeItemTemplate let-group=\"group\">\r\n    <ng-template ngFor let-result [ngForOf]=\"group.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\r\n          igoSearchItemToolbar\r\n          [ngTemplateOutlet]=\"templateSearchToolbar\"\r\n          [ngTemplateOutletContext]=\"{ result: result }\"\r\n        >\r\n        </ng-container>\r\n      </igo-search-results-item>\r\n    </ng-template>\r\n    <span\r\n      class=\"moreResults mat-typography\"\r\n      *ngIf=\"isMoreResults(group)\"\r\n      (click)=\"displayMoreResults(group)\"\r\n    >\r\n      <u>{{ 'igo.geo.search.displayMoreResults' | translate }}</u>\r\n    </span>\r\n  </ng-template>\r\n</igo-list>\r\n", styles: [":host .moreResults{cursor:pointer;color:#00f;float:right;margin-right:10px;margin-top:5px}:host igo-list ::ng-deep mat-list{height:100%}:host igo-list ::ng-deep mat-list .custom-tabs-view .mat-mdc-tab-header-pagination{min-width:20px}\n"] }]
     }], function () { return [{ type: i0.ChangeDetectorRef }, { type: SearchService }, { type: i2.ConfigService }]; }, { map: [{
             type: Input
         }], store: [{
@@ -44264,7 +44264,7 @@ class StyleModalLayerButtonComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(StyleModalLayerButtonComponent, [{
         type: Component,
-        args: [{ selector: 'igo-style-modal-layer-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  mat-icon-button\n  color=\"primary\"\n  (click)=\"openStyleModalDialog()\"\n  [matTooltip]=\"'igo.geo.style.styleModalTooltipLayer' | translate\"\n>\n  <mat-icon class=\"style-icon\" svgIcon=\"palette\"> </mat-icon>\n</button>\n" }]
+        args: [{ selector: 'igo-style-modal-layer-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\r\n  mat-icon-button\r\n  color=\"primary\"\r\n  (click)=\"openStyleModalDialog()\"\r\n  [matTooltip]=\"'igo.geo.style.styleModalTooltipLayer' | translate\"\r\n>\r\n  <mat-icon class=\"style-icon\" svgIcon=\"palette\"> </mat-icon>\r\n</button>\r\n" }]
     }], function () { return [{ type: i1$3.MatDialog }]; }, { layer: [{
             type: Input
         }] }); })();
@@ -44437,7 +44437,7 @@ class ToastComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ToastComponent, [{
         type: Component,
-        args: [{ selector: 'igo-toast', template: "<igo-flexible\n  #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 mat-icon-button panelLeftButton (click)=\"toggle()\">\n      <mat-icon\n        [svgIcon]=\"\n          ['collapsed', 'initial'].indexOf(flex.state) >= 0\n            ? 'arrow_upward'\n            : 'arrow_downward'\n        \"\n      ></mat-icon>\n    </button>\n\n    <button\n      mat-icon-button\n      panelRightButton\n      class=\"igo-icon-button\"\n      (click)=\"zoomToFeatureExtent()\"\n      *ngIf=\"feature.geometry\"\n    >\n      <mat-icon svgIcon=\"zoom-in\"></mat-icon>\n    </button>\n\n    <igo-feature-details [feature]=\"feature\"></igo-feature-details>\n  </igo-panel>\n</igo-flexible>\n", styles: [":host{position:absolute;bottom:0;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\r\n  #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 mat-icon-button panelLeftButton (click)=\"toggle()\">\r\n      <mat-icon\r\n        [svgIcon]=\"\r\n          ['collapsed', 'initial'].indexOf(flex.state) >= 0\r\n            ? 'arrow_upward'\r\n            : 'arrow_downward'\r\n        \"\r\n      ></mat-icon>\r\n    </button>\r\n\r\n    <button\r\n      mat-icon-button\r\n      panelRightButton\r\n      class=\"igo-icon-button\"\r\n      (click)=\"zoomToFeatureExtent()\"\r\n      *ngIf=\"feature.geometry\"\r\n    >\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</igo-flexible>\r\n", styles: [":host{position:absolute;bottom:0;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: [{
@@ -44544,7 +44544,7 @@ class ConfirmationPopupComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ConfirmationPopupComponent, [{
         type: Component,
-        args: [{ selector: 'igo-confirmation-popup-component', template: "<div mat-dialog-content>\n  <p class=\"mat-typography\">\n    {{\n      data.type === 'add'\n        ? languageService.translate.instant('igo.geo.workspace.addConfirmation')\n        : languageService.translate.instant(\n            'igo.geo.workspace.deleteConfirmation'\n          )\n    }}\n  </p>\n</div>\n<div mat-dialog-actions>\n  <button mat-raised-button color=\"primary\" (click)=\"confirmedAction()\">\n    Ok\n  </button>\n  <button mat-raised-button (click)=\"cancelAction()\">\n    {{ languageService.translate.instant('igo.geo.workspace.cancel') }}\n  </button>\n</div>\n", styles: ["div.mat-mdc-dialog-actions{justify-content:center}\n"] }]
+        args: [{ selector: 'igo-confirmation-popup-component', template: "<div mat-dialog-content>\r\n  <p class=\"mat-typography\">\r\n    {{\r\n      data.type === 'add'\r\n        ? languageService.translate.instant('igo.geo.workspace.addConfirmation')\r\n        : languageService.translate.instant(\r\n            'igo.geo.workspace.deleteConfirmation'\r\n          )\r\n    }}\r\n  </p>\r\n</div>\r\n<div mat-dialog-actions>\r\n  <button mat-raised-button color=\"primary\" (click)=\"confirmedAction()\">\r\n    Ok\r\n  </button>\r\n  <button mat-raised-button (click)=\"cancelAction()\">\r\n    {{ languageService.translate.instant('igo.geo.workspace.cancel') }}\r\n  </button>\r\n</div>\r\n", styles: ["div.mat-mdc-dialog-actions{justify-content:center}\n"] }]
     }], function () { return [{ type: i1$3.MatDialogRef }, { type: i2.LanguageService }, { type: undefined, decorators: [{
                 type: Inject,
                 args: [MAT_DIALOG_DATA]
@@ -44615,7 +44615,7 @@ class OgcFilterComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(OgcFilterComponent, [{
         type: Component,
-        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>\n</igo-ogc-filterable-item>\n" }]
+        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>\r\n</igo-ogc-filterable-item>\r\n" }]
     }], function () { return [{ type: i0.ChangeDetectorRef }]; }, { layer: [{
             type: Input
         }], map: [{