@igo2/geo 16.2.0 → 16.3.0

package/fesm2022/igo2-geo.mjs

@@ -1547,6 +1547,12 @@ var TypeCapabilities;
     TypeCapabilities["imagearcgisrest"] = "esriJSON";
     TypeCapabilities["tilearcgisrest"] = "esriJSON";
 })(TypeCapabilities || (TypeCapabilities = {}));
+var ArcGISRestCapabilitiesLayerTypes;
+(function (ArcGISRestCapabilitiesLayerTypes) {
+    ArcGISRestCapabilitiesLayerTypes["FeatureLayer"] = "Feature Layer";
+    ArcGISRestCapabilitiesLayerTypes["RasterLayer"] = "Raster Layer";
+    ArcGISRestCapabilitiesLayerTypes["GroupLayer"] = "Group Layer";
+})(ArcGISRestCapabilitiesLayerTypes || (ArcGISRestCapabilitiesLayerTypes = {}));
 
 class CapabilitiesService {
     http;
@@ -3666,11 +3672,11 @@ class LayerLegendComponent {
         this.imagesHeight[id] = elemRef.height;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LayerLegendComponent, deps: [{ token: CapabilitiesService }, { token: i2.LanguageService }, { token: i2.ConfigService }, { token: i1.HttpClient }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: LayerLegendComponent, selector: "igo-layer-legend", inputs: { updateLegendOnResolutionChange: "updateLegendOnResolutionChange", layer: "layer" }, viewQueries: [{ propertyName: "renderedLegends", predicate: ["renderedLegend"], descendants: true }], ngImport: i0, 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"], dependencies: [{ kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i15.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i9.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i5.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i5.MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "directive", type: i5.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "directive", type: i9$1.CollapseDirective, selector: "[igoCollapse]", inputs: ["target", "collapsed"], outputs: ["toggle"] }, { kind: "directive", type: i9$1.ImageErrorDirective, selector: "[igoImageError]", inputs: ["errorImageUrl", "hideError"] }, { kind: "pipe", type: i2$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }, { kind: "pipe", type: i9$1.SanitizeHtmlPipe, name: "sanitizeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: LayerLegendComponent, selector: "igo-layer-legend", inputs: { updateLegendOnResolutionChange: "updateLegendOnResolutionChange", layer: "layer" }, viewQueries: [{ propertyName: "renderedLegends", predicate: ["renderedLegend"], descendants: true }], ngImport: i0, 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"], dependencies: [{ kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i15.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i9.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i5.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i5.MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "directive", type: i5.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "directive", type: i9$1.CollapseDirective, selector: "[igoCollapse]", inputs: ["target", "collapsed"], outputs: ["toggle"] }, { kind: "directive", type: i9$1.ImageErrorDirective, selector: "[igoImageError]", inputs: ["errorImageUrl", "hideError"] }, { kind: "pipe", type: i2$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }, { kind: "pipe", type: i9$1.SanitizeHtmlPipe, name: "sanitizeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LayerLegendComponent, decorators: [{
             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"] }]
         }], ctorParameters: function () { return [{ type: CapabilitiesService }, { type: i2.LanguageService }, { type: i2.ConfigService }, { type: i1.HttpClient }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { updateLegendOnResolutionChange: [{
                 type: Input
             }], renderedLegends: [{
@@ -3871,11 +3877,11 @@ class LayerItemComponent {
         this.checkbox.emit({ layer: this.layer, check: this.layerCheck });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LayerItemComponent, deps: [{ token: i2.NetworkService }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: LayerItemComponent, selector: "igo-layer-item", inputs: { activeLayer: "activeLayer", selectAll: "selectAll", layerCheck: "layerCheck", layer: "layer", toggleLegendOnVisibilityChange: "toggleLegendOnVisibilityChange", expandLegendIfVisible: "expandLegendIfVisible", updateLegendOnResolutionChange: "updateLegendOnResolutionChange", orderable: "orderable", lowerDisabled: "lowerDisabled", raiseDisabled: "raiseDisabled", queryBadge: "queryBadge", selectionMode: "selectionMode", changeDetection: "changeDetection" }, outputs: { action: "action", checkbox: "checkbox" }, ngImport: i0, 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"], dependencies: [{ kind: "directive", type: i2$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i5.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i5.MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "directive", type: i5.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "directive", type: i5.MatListItemMeta, selector: "[matListItemMeta]" }, { kind: "directive", type: i6.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: i11.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: LayerLegendComponent, selector: "igo-layer-legend", inputs: ["updateLegendOnResolutionChange", "layer"] }, { kind: "pipe", type: i2$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: LayerItemComponent, selector: "igo-layer-item", inputs: { activeLayer: "activeLayer", selectAll: "selectAll", layerCheck: "layerCheck", layer: "layer", toggleLegendOnVisibilityChange: "toggleLegendOnVisibilityChange", expandLegendIfVisible: "expandLegendIfVisible", updateLegendOnResolutionChange: "updateLegendOnResolutionChange", orderable: "orderable", lowerDisabled: "lowerDisabled", raiseDisabled: "raiseDisabled", queryBadge: "queryBadge", selectionMode: "selectionMode", changeDetection: "changeDetection" }, outputs: { action: "action", checkbox: "checkbox" }, ngImport: i0, 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"], dependencies: [{ kind: "directive", type: i2$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i5.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i5.MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "directive", type: i5.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "directive", type: i5.MatListItemMeta, selector: "[matListItemMeta]" }, { kind: "directive", type: i6.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: i11.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: LayerLegendComponent, selector: "igo-layer-legend", inputs: ["updateLegendOnResolutionChange", "layer"] }, { kind: "pipe", type: i2$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LayerItemComponent, decorators: [{
             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"] }]
         }], ctorParameters: function () { return [{ type: i2.NetworkService }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { activeLayer: [{
                 type: Input
             }], selectAll: [{
@@ -3970,11 +3976,11 @@ class LayerLegendItemComponent {
         this.inResolutionRange$.next(inResolutionRange);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LayerLegendItemComponent, deps: [{ token: i2.NetworkService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: LayerLegendItemComponent, selector: "igo-layer-legend-item", inputs: { layer: "layer", updateLegendOnResolutionChange: "updateLegendOnResolutionChange" }, ngImport: i0, 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"], dependencies: [{ kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i5.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i5.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "component", type: LayerLegendComponent, selector: "igo-layer-legend", inputs: ["updateLegendOnResolutionChange", "layer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: LayerLegendItemComponent, selector: "igo-layer-legend-item", inputs: { layer: "layer", updateLegendOnResolutionChange: "updateLegendOnResolutionChange" }, ngImport: i0, 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"], dependencies: [{ kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i5.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i5.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "component", type: LayerLegendComponent, selector: "igo-layer-legend", inputs: ["updateLegendOnResolutionChange", "layer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LayerLegendItemComponent, decorators: [{
             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"] }]
         }], ctorParameters: function () { return [{ type: i2.NetworkService }]; }, propDecorators: { layer: [{
                 type: Input
             }], updateLegendOnResolutionChange: [{
@@ -4048,11 +4054,11 @@ class LayerLegendListComponent {
         this.allLegendsShown.emit(toggle);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LayerLegendListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: LayerLegendListComponent, selector: "igo-layer-legend-list", inputs: { layers: "layers", excludeBaseLayers: "excludeBaseLayers", updateLegendOnResolutionChange: "updateLegendOnResolutionChange", allowShowAllLegends: "allowShowAllLegends", showAllLegendsValue: "showAllLegendsValue" }, outputs: { allLegendsShown: "allLegendsShown" }, ngImport: i0, 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"], dependencies: [{ kind: "directive", type: i2$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i9$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i7.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matSlideToggle"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: i9$1.ListItemDirective, selector: "[igoListItem]", inputs: ["color", "focused", "selected", "disabled"], outputs: ["beforeSelect", "beforeFocus", "beforeUnselect", "beforeUnfocus", "beforeDisable", "beforeEnable", "focus", "unfocus", "select", "unselect", "disable", "enable"] }, { kind: "component", type: i9$1.ListComponent, selector: "igo-list", inputs: ["navigation", "selection"] }, { kind: "component", type: LayerLegendItemComponent, selector: "igo-layer-legend-item", inputs: ["layer", "updateLegendOnResolutionChange"] }, { kind: "pipe", type: i2$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: LayerLegendListComponent, selector: "igo-layer-legend-list", inputs: { layers: "layers", excludeBaseLayers: "excludeBaseLayers", updateLegendOnResolutionChange: "updateLegendOnResolutionChange", allowShowAllLegends: "allowShowAllLegends", showAllLegendsValue: "showAllLegendsValue" }, outputs: { allLegendsShown: "allLegendsShown" }, ngImport: i0, 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"], dependencies: [{ kind: "directive", type: i2$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i9$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i7.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matSlideToggle"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: i9$1.ListItemDirective, selector: "[igoListItem]", inputs: ["color", "focused", "selected", "disabled"], outputs: ["beforeSelect", "beforeFocus", "beforeUnselect", "beforeUnfocus", "beforeDisable", "beforeEnable", "focus", "unfocus", "select", "unselect", "disable", "enable"] }, { kind: "component", type: i9$1.ListComponent, selector: "igo-list", inputs: ["navigation", "selection"] }, { kind: "component", type: LayerLegendItemComponent, selector: "igo-layer-legend-item", inputs: ["layer", "updateLegendOnResolutionChange"] }, { kind: "pipe", type: i2$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LayerLegendListComponent, decorators: [{
             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"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { layers: [{
                 type: Input
             }], excludeBaseLayers: [{
@@ -4185,11 +4191,11 @@ class LayerListToolComponent {
         this.selection.emit(this.selectionMode);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LayerListToolComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: LayerListToolComponent, selector: "igo-layer-list-tool", inputs: { layersAreAllVisible: "layersAreAllVisible", floatLabel: "floatLabel", onlyVisible: "onlyVisible", sortAlpha: "sortAlpha", term: "term" }, outputs: { appliedFilterAndSort: "appliedFilterAndSort", selection: "selection" }, ngImport: i0, 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"], dependencies: [{ kind: "directive", type: i9$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: i6.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: i9$1.IgoBadgeIconDirective, selector: "[igoMatBadgeIcon]", inputs: ["igoMatBadgeIcon", "matBadgeHidden", "matBadgeDisabled", "igoMatBadgeInverseColor", "igoMatBadgeInheritColor", "igoMatBadgeColor", "igoMatBadgeBackgroundColor"] }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: LayerListToolComponent, selector: "igo-layer-list-tool", inputs: { layersAreAllVisible: "layersAreAllVisible", floatLabel: "floatLabel", onlyVisible: "onlyVisible", sortAlpha: "sortAlpha", term: "term" }, outputs: { appliedFilterAndSort: "appliedFilterAndSort", selection: "selection" }, ngImport: i0, 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"], dependencies: [{ kind: "directive", type: i9$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: i6.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: i9$1.IgoBadgeIconDirective, selector: "[igoMatBadgeIcon]", inputs: ["igoMatBadgeIcon", "matBadgeHidden", "matBadgeDisabled", "igoMatBadgeInverseColor", "igoMatBadgeInheritColor", "igoMatBadgeColor", "igoMatBadgeBackgroundColor"] }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LayerListToolComponent, decorators: [{
             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"] }]
         }], propDecorators: { layersAreAllVisible: [{
                 type: Input
             }], floatLabel: [{
@@ -5126,7 +5132,7 @@ class CartoDataSource extends DataSource {
             return legend;
         }
         let htmlString = '<table>';
-        if (this.options.config.layers[0].legend !== null) {
+        if (this.options.config.layers[0].legend) {
             this.options.config.layers[0].legend.items.forEach((f) => {
                 if (f.visible === true) {
                     htmlString +=
@@ -7161,7 +7167,7 @@ class Overlay {
     /**
      * Add a feature to the  overlay and, optionally, move to it
      * @param feature Feature
-     * @param motion Optional: Apply this motion to the map view
+     * @param motion Optional: Apply this motion to the map view (default on FeatureMotion.Default)
      */
     addFeature(feature, motion = FeatureMotion.Default) {
         this.addFeatures([feature], motion);
@@ -11346,11 +11352,11 @@ class LayerListComponent {
         return layersList;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LayerListComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: LayerListComponent, selector: "igo-layer-list", inputs: { layersAreAllVisible: "layersAreAllVisible", ogcButton: "ogcButton", timeButton: "timeButton", map: "map", layers: "layers", floatLabel: "floatLabel", layerFilterAndSortOptions: "layerFilterAndSortOptions", excludeBaseLayers: "excludeBaseLayers", toggleLegendOnVisibilityChange: "toggleLegendOnVisibilityChange", expandLegendOfVisibleLayers: "expandLegendOfVisibleLayers", updateLegendOnResolutionChange: "updateLegendOnResolutionChange", queryBadge: "queryBadge" }, outputs: { appliedFilterAndSort: "appliedFilterAndSort" }, queries: [{ propertyName: "templateLayerToolbar", first: true, predicate: ["igoLayerItemToolbar"], descendants: true }], ngImport: i0, 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"], dependencies: [{ kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i9$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i7$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "directive", type: i7$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i8$1.MatSlider, selector: "mat-slider", inputs: ["color", "disableRipple", "disabled", "discrete", "showTickMarks", "min", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i8$1.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }, { kind: "directive", type: i6.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: i11.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i9$1.ListItemDirective, selector: "[igoListItem]", inputs: ["color", "focused", "selected", "disabled"], outputs: ["beforeSelect", "beforeFocus", "beforeUnselect", "beforeUnfocus", "beforeDisable", "beforeEnable", "focus", "unfocus", "select", "unselect", "disable", "enable"] }, { kind: "component", type: i9$1.ListComponent, selector: "igo-list", inputs: ["navigation", "selection"] }, { kind: "component", type: i9$1.PanelComponent, selector: "igo-panel", inputs: ["title", "withHeader", "cursorPointer"] }, { kind: "component", type: LayerItemComponent, selector: "igo-layer-item", inputs: ["activeLayer", "selectAll", "layerCheck", "layer", "toggleLegendOnVisibilityChange", "expandLegendIfVisible", "updateLegendOnResolutionChange", "orderable", "lowerDisabled", "raiseDisabled", "queryBadge", "selectionMode", "changeDetection"], outputs: ["action", "checkbox"] }, { kind: "component", type: LayerListToolComponent, selector: "igo-layer-list-tool", inputs: ["layersAreAllVisible", "floatLabel", "onlyVisible", "sortAlpha", "term"], outputs: ["appliedFilterAndSort", "selection"] }, { kind: "pipe", type: i2$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: LayerListComponent, selector: "igo-layer-list", inputs: { layersAreAllVisible: "layersAreAllVisible", ogcButton: "ogcButton", timeButton: "timeButton", map: "map", layers: "layers", floatLabel: "floatLabel", layerFilterAndSortOptions: "layerFilterAndSortOptions", excludeBaseLayers: "excludeBaseLayers", toggleLegendOnVisibilityChange: "toggleLegendOnVisibilityChange", expandLegendOfVisibleLayers: "expandLegendOfVisibleLayers", updateLegendOnResolutionChange: "updateLegendOnResolutionChange", queryBadge: "queryBadge" }, outputs: { appliedFilterAndSort: "appliedFilterAndSort" }, queries: [{ propertyName: "templateLayerToolbar", first: true, predicate: ["igoLayerItemToolbar"], descendants: true }], ngImport: i0, 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"], dependencies: [{ kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i9$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i7$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "directive", type: i7$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i8$1.MatSlider, selector: "mat-slider", inputs: ["color", "disableRipple", "disabled", "discrete", "showTickMarks", "min", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i8$1.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }, { kind: "directive", type: i6.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: i11.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i9$1.ListItemDirective, selector: "[igoListItem]", inputs: ["color", "focused", "selected", "disabled"], outputs: ["beforeSelect", "beforeFocus", "beforeUnselect", "beforeUnfocus", "beforeDisable", "beforeEnable", "focus", "unfocus", "select", "unselect", "disable", "enable"] }, { kind: "component", type: i9$1.ListComponent, selector: "igo-list", inputs: ["navigation", "selection"] }, { kind: "component", type: i9$1.PanelComponent, selector: "igo-panel", inputs: ["title", "withHeader", "cursorPointer"] }, { kind: "component", type: LayerItemComponent, selector: "igo-layer-item", inputs: ["activeLayer", "selectAll", "layerCheck", "layer", "toggleLegendOnVisibilityChange", "expandLegendIfVisible", "updateLegendOnResolutionChange", "orderable", "lowerDisabled", "raiseDisabled", "queryBadge", "selectionMode", "changeDetection"], outputs: ["action", "checkbox"] }, { kind: "component", type: LayerListToolComponent, selector: "igo-layer-list-tool", inputs: ["layersAreAllVisible", "floatLabel", "onlyVisible", "sortAlpha", "term"], outputs: ["appliedFilterAndSort", "selection"] }, { kind: "pipe", type: i2$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LayerListComponent, decorators: [{
             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"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { templateLayerToolbar: [{
                 type: ContentChild,
                 args: ['igoLayerItemToolbar', /* TODO: add static flag */ {}]
@@ -12157,11 +12163,11 @@ class LayerService {
                 }
                 layerOptions.igoStyle[newKey] = layerOptions[legacyOption];
                 delete layerOptions[legacyOption];
-                console.warn(`
-        The location of this style option (${legacyOption}) is deprecated.
-        Please move this property within igoStyle property.
-        Ex: ${legacyOption}: {...} must be transfered to igoStyle: { ${newKey}: {...} }
-        This legacy conversion will be deleted in 2024.
+                console.warn(`
+        The location of this style option (${legacyOption}) is deprecated.
+        Please move this property within igoStyle property.
+        Ex: ${legacyOption}: {...} must be transfered to igoStyle: { ${newKey}: {...} }
+        This legacy conversion will be deleted in 2024.
         `);
             }
         });
@@ -12283,11 +12289,11 @@ class TrackFeatureButtonComponent {
         this.trackFeature = !this.trackFeature;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TrackFeatureButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TrackFeatureButtonComponent, selector: "igo-track-feature-button", inputs: { layer: "layer", trackFeature: "trackFeature" }, ngImport: i0, 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", styles: [""], dependencies: [{ kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TrackFeatureButtonComponent, selector: "igo-track-feature-button", inputs: { layer: "layer", trackFeature: "trackFeature" }, ngImport: i0, 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", styles: [""], dependencies: [{ kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TrackFeatureButtonComponent, decorators: [{
             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" }]
         }], ctorParameters: function () { return []; }, propDecorators: { layer: [{
                 type: Input
             }], trackFeature: [{
@@ -12488,11 +12494,11 @@ class MetadataButtonComponent {
         return this.layer.options;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MetadataButtonComponent, deps: [{ token: MetadataService }, { token: i1$2.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MetadataButtonComponent, selector: "igo-metadata-button", inputs: { layer: "layer", color: "color" }, ngImport: i0, 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", styles: [""], dependencies: [{ kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MetadataButtonComponent, selector: "igo-metadata-button", inputs: { layer: "layer", color: "color" }, ngImport: i0, 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", styles: [""], dependencies: [{ kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MetadataButtonComponent, decorators: [{
             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" }]
         }], ctorParameters: function () { return [{ type: MetadataService }, { type: i1$2.MatDialog }]; }, propDecorators: { layer: [{
                 type: Input
             }], color: [{
@@ -13156,17 +13162,19 @@ class CatalogService {
         })
             .filter((item) => item !== undefined);
     }
-    /// ERSI
     getArcGISRESTItems(catalog, capabilities) {
-        if (!capabilities) {
+        if (!capabilities || !capabilities.layers) {
+            this.messageService.error('igo.geo.catalog.someUnavailable', 'igo.geo.catalog.unavailableTitle');
             return [];
         }
+        const groups = !capabilities.layers
+            ? []
+            : capabilities.layers.filter((layer) => layer.subLayerIds);
         const layers = !capabilities.layers
             ? []
-            : capabilities.layers.filter((layer) => !layer.type || layer.type === 'Feature Layer');
-        if (!capabilities.layers) {
-            this.messageService.error('igo.geo.catalog.someUnavailable', 'igo.geo.catalog.unavailableTitle');
-        }
+            : capabilities.layers.filter((layer) => !layer.type ||
+                layer.type === ArcGISRestCapabilitiesLayerTypes.FeatureLayer ||
+                layer.type === ArcGISRestCapabilitiesLayerTypes.RasterLayer);
         const regexes = (catalog.regFilters || []).map((pattern) => new RegExp(pattern));
         let abstract;
         if (capabilities.serviceDescription &&
@@ -13174,17 +13182,11 @@ class CatalogService {
             const regex = /(<([^>]+)>)/gi;
             abstract = capabilities.serviceDescription.replace(regex, '');
         }
-        return layers
+        const items = layers
             .map((layer) => {
             const propertiesToForce = this.computeForcedProperties(layer.name, catalog.forcedProperties);
-            let baseAbstract;
+            let baseAbstract = catalog.abstract;
             let extern = true;
-            if (layer.Abstract) {
-                baseAbstract = layer.Abstract;
-            }
-            else if (!layer.Abstract && catalog.abstract) {
-                baseAbstract = catalog.abstract;
-            }
             let metadataUrl = propertiesToForce?.metadataUrl || propertiesToForce?.metadataUrlAll;
             let metadataAbstract = propertiesToForce?.metadataAbstract ||
                 propertiesToForce?.metadataAbstractAll ||
@@ -13199,21 +13201,16 @@ class CatalogService {
                 propertiesToForce?.metadataUrlAll) {
                 extern = false;
             }
-            if (this.testLayerRegexes(layer.id, regexes) === false) {
+            if (this.testLayerRegexes(layer.id.toString(), regexes) === false) {
                 return undefined;
             }
             const baseSourceOptions = {
                 type: TypeCatalog[catalog.type],
                 url: catalog.url,
-                crossOrigin: catalog.setCrossOriginAnonymous
-                    ? 'anonymous'
-                    : undefined,
-                layer: layer.id,
+                layer: layer.id.toString(),
                 queryable: true,
-                queryFormat: 'esrijson',
-                matrixSet: catalog.matrixSet,
-                optionsFromCapabilities: true,
-                style: 'default'
+                queryFormat: QueryFormat.ESRIJSON,
+                optionsFromCapabilities: true
             };
             const sourceOptions = Object.assign({}, baseSourceOptions, catalog.sourceOptions);
             return ObjectUtils.removeUndefined({
@@ -13223,7 +13220,6 @@ class CatalogService {
                     ? propertiesToForce.title
                     : layer.name,
                 externalProvider: catalog.externalProvider,
-                address: catalog.id,
                 options: {
                     sourceOptions,
                     minResolution: getResolutionFromScale(layer.maxScale),
@@ -13232,12 +13228,59 @@ class CatalogService {
                         url: metadataUrl,
                         extern,
                         abstract: metadataAbstract,
-                        type: baseSourceOptions.type
+                        type: catalog.type
                     }
                 }
             });
         })
             .filter((item) => item !== undefined);
+        const groupHandledLayersIds = [];
+        const groupedItems = groups
+            .map((group) => {
+            return {
+                options: undefined,
+                address: `catalog.group.${group.name}`,
+                id: `catalog.group.${group.name}`,
+                type: CatalogItemType.Group,
+                externalProvider: catalog.externalProvider,
+                sortDirection: catalog.sortDirection,
+                title: group.name,
+                items: items
+                    .filter((i) => {
+                    const subLayerIdsStr = group.subLayerIds.map((r) => r.toString());
+                    return subLayerIdsStr.includes(i.options.sourceOptions.layer);
+                })
+                    .map((i) => {
+                    groupHandledLayersIds.push(i.id);
+                    return Object.assign({}, i, {
+                        address: `catalog.group.${group.name}`
+                    });
+                })
+            };
+        })
+            .filter((g) => g.items.length);
+        if (groups) {
+            const TitleOrId = catalog.title || catalog.id;
+            const nonHandledLayers = items
+                .filter((i) => !groupHandledLayersIds.includes(i.id))
+                .map((i) => Object.assign({}, i, {
+                address: `catalog.group.${TitleOrId}`
+            }));
+            if (nonHandledLayers.length) {
+                const nonHandledGroup = {
+                    options: undefined,
+                    address: `catalog.group.${TitleOrId}`,
+                    id: `catalog.group.${TitleOrId}`,
+                    type: CatalogItemType.Group,
+                    externalProvider: catalog.externalProvider,
+                    sortDirection: catalog.sortDirection,
+                    title: TitleOrId,
+                    items: nonHandledLayers
+                };
+                groupedItems.push(nonHandledGroup);
+            }
+        }
+        return groups ? groupedItems : items;
     }
     testLayerRegexes(layerName, regexes) {
         if (regexes.length === 0) {
@@ -13536,11 +13579,11 @@ class CatalogBrowserLayerComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CatalogBrowserLayerComponent, deps: [{ token: LayerService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CatalogBrowserLayerComponent, selector: "igo-catalog-browser-layer", inputs: { resolution: "resolution", catalogAllowLegend: "catalogAllowLegend", layer: "layer", map: "map", added: "added" }, outputs: { addedChange: "addedChange", addedLayerIsPreview: "addedLayerIsPreview" }, ngImport: i0, template: "<mat-list-item>\n  <mat-icon\n    *ngIf=\"haveGroup()\"\n    class=\"catalog-browser-layer-carret\"\n    matListItemIcon\n    svgIcon=\"blank\"\n  ></mat-icon>\n  <span\n    matListItemTitle\n    matTooltipShowDelay=\"500\"\n    [ngClass]=\"catalogAllowLegend ? 'igo-cataloglayer-title' : ''\"\n    (click)=\"askForLegend($event)\"\n    [matTooltip]=\"computeTitleTooltip()\"\n  >\n    {{ title }}\n  </span>\n\n  <div matListItemMeta>\n    <button *ngIf=\"layer.externalProvider\" disabled=\"true\" mat-icon-button>\n      <mat-icon\n        class=\"igo-cataloglayer-external-icon\"\n        tooltip-position=\"below\"\n        matTooltipShowDelay=\"500\"\n        [matTooltip]=\"'igo.geo.catalog.externalProvider.layer' | translate\"\n        color=\"primary\"\n        (click)=\"$event.stopPropagation()\"\n        svgIcon=\"earth-arrow-right\"\n      >\n      </mat-icon>\n    </button>\n    <igo-metadata-button [layer]=\"layer\"></igo-metadata-button>\n\n    <button\n      (mouseenter)=\"onMouseEvent($event)\"\n      (mouseleave)=\"onMouseEvent($event)\"\n      mat-icon-button\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"computeTooltip() | translate\"\n      [color]=\"(isPreview$ | async) ? '' : added ? 'warn' : ''\"\n      (click)=\"onToggleClick($event)\"\n    >\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  </div>\n</mat-list-item>\n\n<div #legend class=\"igo-cataloglayer-legend-container\">\n  <igo-layer-legend\n    *ngIf=\"\n      (layerLegendShown$ | async) && (igoLayer$ | async) && catalogAllowLegend\n    \"\n    [layer]=\"igoLayer$ | async\"\n  >\n  </igo-layer-legend>\n</div>\n", styles: [".igo-cataloglayer-title{cursor:pointer}.catalog-browser-layer-carret{margin-right:16px}.igo-cataloglayer-legend-container{padding-left:18px;width:calc(100% - 18px);margin-left:40px}.igo-cataloglayer-external-icon{cursor:help}:host .mdc-list-item__end,:host .mdc-list-item__start{color:#000}\n"], dependencies: [{ kind: "directive", type: i2$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: i4$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i5.MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "directive", type: i5.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "directive", type: i5.MatListItemMeta, selector: "[matListItemMeta]" }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: i9$1.IgoBadgeIconDirective, selector: "[igoMatBadgeIcon]", inputs: ["igoMatBadgeIcon", "matBadgeHidden", "matBadgeDisabled", "igoMatBadgeInverseColor", "igoMatBadgeInheritColor", "igoMatBadgeColor", "igoMatBadgeBackgroundColor"] }, { kind: "component", type: MetadataButtonComponent, selector: "igo-metadata-button", inputs: ["layer", "color"] }, { kind: "component", type: LayerLegendComponent, selector: "igo-layer-legend", inputs: ["updateLegendOnResolutionChange", "layer"] }, { kind: "pipe", type: i2$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CatalogBrowserLayerComponent, selector: "igo-catalog-browser-layer", inputs: { resolution: "resolution", catalogAllowLegend: "catalogAllowLegend", layer: "layer", map: "map", added: "added" }, outputs: { addedChange: "addedChange", addedLayerIsPreview: "addedLayerIsPreview" }, ngImport: i0, template: "<mat-list-item>\r\n  <mat-icon\r\n    *ngIf=\"haveGroup()\"\r\n    class=\"catalog-browser-layer-carret\"\r\n    matListItemIcon\r\n    svgIcon=\"blank\"\r\n  ></mat-icon>\r\n  <span\r\n    matListItemTitle\r\n    matTooltipShowDelay=\"500\"\r\n    [ngClass]=\"catalogAllowLegend ? 'igo-cataloglayer-title' : ''\"\r\n    (click)=\"askForLegend($event)\"\r\n    [matTooltip]=\"computeTitleTooltip()\"\r\n  >\r\n    {{ title }}\r\n  </span>\r\n\r\n  <div matListItemMeta>\r\n    <button *ngIf=\"layer.externalProvider\" disabled=\"true\" mat-icon-button>\r\n      <mat-icon\r\n        class=\"igo-cataloglayer-external-icon\"\r\n        tooltip-position=\"below\"\r\n        matTooltipShowDelay=\"500\"\r\n        [matTooltip]=\"'igo.geo.catalog.externalProvider.layer' | translate\"\r\n        color=\"primary\"\r\n        (click)=\"$event.stopPropagation()\"\r\n        svgIcon=\"earth-arrow-right\"\r\n      >\r\n      </mat-icon>\r\n    </button>\r\n    <igo-metadata-button [layer]=\"layer\"></igo-metadata-button>\r\n\r\n    <button\r\n      (mouseenter)=\"onMouseEvent($event)\"\r\n      (mouseleave)=\"onMouseEvent($event)\"\r\n      mat-icon-button\r\n      tooltip-position=\"below\"\r\n      matTooltipShowDelay=\"500\"\r\n      [matTooltip]=\"computeTooltip() | translate\"\r\n      [color]=\"(isPreview$ | async) ? '' : added ? 'warn' : ''\"\r\n      (click)=\"onToggleClick($event)\"\r\n    >\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  </div>\r\n</mat-list-item>\r\n\r\n<div #legend class=\"igo-cataloglayer-legend-container\">\r\n  <igo-layer-legend\r\n    *ngIf=\"\r\n      (layerLegendShown$ | async) && (igoLayer$ | async) && catalogAllowLegend\r\n    \"\r\n    [layer]=\"igoLayer$ | async\"\r\n  >\r\n  </igo-layer-legend>\r\n</div>\r\n", styles: [".igo-cataloglayer-title{cursor:pointer}.catalog-browser-layer-carret{margin-right:16px}.igo-cataloglayer-legend-container{padding-left:18px;width:calc(100% - 18px);margin-left:40px}.igo-cataloglayer-external-icon{cursor:help}:host .mdc-list-item__end,:host .mdc-list-item__start{color:#000}\n"], dependencies: [{ kind: "directive", type: i2$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: i4$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i5.MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "directive", type: i5.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "directive", type: i5.MatListItemMeta, selector: "[matListItemMeta]" }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: i9$1.IgoBadgeIconDirective, selector: "[igoMatBadgeIcon]", inputs: ["igoMatBadgeIcon", "matBadgeHidden", "matBadgeDisabled", "igoMatBadgeInverseColor", "igoMatBadgeInheritColor", "igoMatBadgeColor", "igoMatBadgeBackgroundColor"] }, { kind: "component", type: MetadataButtonComponent, selector: "igo-metadata-button", inputs: ["layer", "color"] }, { kind: "component", type: LayerLegendComponent, selector: "igo-layer-legend", inputs: ["updateLegendOnResolutionChange", "layer"] }, { kind: "pipe", type: i2$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CatalogBrowserLayerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'igo-catalog-browser-layer', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-list-item>\n  <mat-icon\n    *ngIf=\"haveGroup()\"\n    class=\"catalog-browser-layer-carret\"\n    matListItemIcon\n    svgIcon=\"blank\"\n  ></mat-icon>\n  <span\n    matListItemTitle\n    matTooltipShowDelay=\"500\"\n    [ngClass]=\"catalogAllowLegend ? 'igo-cataloglayer-title' : ''\"\n    (click)=\"askForLegend($event)\"\n    [matTooltip]=\"computeTitleTooltip()\"\n  >\n    {{ title }}\n  </span>\n\n  <div matListItemMeta>\n    <button *ngIf=\"layer.externalProvider\" disabled=\"true\" mat-icon-button>\n      <mat-icon\n        class=\"igo-cataloglayer-external-icon\"\n        tooltip-position=\"below\"\n        matTooltipShowDelay=\"500\"\n        [matTooltip]=\"'igo.geo.catalog.externalProvider.layer' | translate\"\n        color=\"primary\"\n        (click)=\"$event.stopPropagation()\"\n        svgIcon=\"earth-arrow-right\"\n      >\n      </mat-icon>\n    </button>\n    <igo-metadata-button [layer]=\"layer\"></igo-metadata-button>\n\n    <button\n      (mouseenter)=\"onMouseEvent($event)\"\n      (mouseleave)=\"onMouseEvent($event)\"\n      mat-icon-button\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"computeTooltip() | translate\"\n      [color]=\"(isPreview$ | async) ? '' : added ? 'warn' : ''\"\n      (click)=\"onToggleClick($event)\"\n    >\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  </div>\n</mat-list-item>\n\n<div #legend class=\"igo-cataloglayer-legend-container\">\n  <igo-layer-legend\n    *ngIf=\"\n      (layerLegendShown$ | async) && (igoLayer$ | async) && catalogAllowLegend\n    \"\n    [layer]=\"igoLayer$ | async\"\n  >\n  </igo-layer-legend>\n</div>\n", styles: [".igo-cataloglayer-title{cursor:pointer}.catalog-browser-layer-carret{margin-right:16px}.igo-cataloglayer-legend-container{padding-left:18px;width:calc(100% - 18px);margin-left:40px}.igo-cataloglayer-external-icon{cursor:help}:host .mdc-list-item__end,:host .mdc-list-item__start{color:#000}\n"] }]
+            args: [{ selector: 'igo-catalog-browser-layer', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-list-item>\r\n  <mat-icon\r\n    *ngIf=\"haveGroup()\"\r\n    class=\"catalog-browser-layer-carret\"\r\n    matListItemIcon\r\n    svgIcon=\"blank\"\r\n  ></mat-icon>\r\n  <span\r\n    matListItemTitle\r\n    matTooltipShowDelay=\"500\"\r\n    [ngClass]=\"catalogAllowLegend ? 'igo-cataloglayer-title' : ''\"\r\n    (click)=\"askForLegend($event)\"\r\n    [matTooltip]=\"computeTitleTooltip()\"\r\n  >\r\n    {{ title }}\r\n  </span>\r\n\r\n  <div matListItemMeta>\r\n    <button *ngIf=\"layer.externalProvider\" disabled=\"true\" mat-icon-button>\r\n      <mat-icon\r\n        class=\"igo-cataloglayer-external-icon\"\r\n        tooltip-position=\"below\"\r\n        matTooltipShowDelay=\"500\"\r\n        [matTooltip]=\"'igo.geo.catalog.externalProvider.layer' | translate\"\r\n        color=\"primary\"\r\n        (click)=\"$event.stopPropagation()\"\r\n        svgIcon=\"earth-arrow-right\"\r\n      >\r\n      </mat-icon>\r\n    </button>\r\n    <igo-metadata-button [layer]=\"layer\"></igo-metadata-button>\r\n\r\n    <button\r\n      (mouseenter)=\"onMouseEvent($event)\"\r\n      (mouseleave)=\"onMouseEvent($event)\"\r\n      mat-icon-button\r\n      tooltip-position=\"below\"\r\n      matTooltipShowDelay=\"500\"\r\n      [matTooltip]=\"computeTooltip() | translate\"\r\n      [color]=\"(isPreview$ | async) ? '' : added ? 'warn' : ''\"\r\n      (click)=\"onToggleClick($event)\"\r\n    >\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  </div>\r\n</mat-list-item>\r\n\r\n<div #legend class=\"igo-cataloglayer-legend-container\">\r\n  <igo-layer-legend\r\n    *ngIf=\"\r\n      (layerLegendShown$ | async) && (igoLayer$ | async) && catalogAllowLegend\r\n    \"\r\n    [layer]=\"igoLayer$ | async\"\r\n  >\r\n  </igo-layer-legend>\r\n</div>\r\n", styles: [".igo-cataloglayer-title{cursor:pointer}.catalog-browser-layer-carret{margin-right:16px}.igo-cataloglayer-legend-container{padding-left:18px;width:calc(100% - 18px);margin-left:40px}.igo-cataloglayer-external-icon{cursor:help}:host .mdc-list-item__end,:host .mdc-list-item__start{color:#000}\n"] }]
         }], ctorParameters: function () { return [{ type: LayerService }]; }, propDecorators: { resolution: [{
                 type: Input
             }], catalogAllowLegend: [{
@@ -13732,11 +13775,11 @@ class CatalogBrowserGroupComponent {
         this.collapsed = !this.collapsed;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CatalogBrowserGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CatalogBrowserGroupComponent, selector: "igo-catalog-browser-group", inputs: { catalog: "catalog", group: "group", map: "map", collapsed: "collapsed", resolution: "resolution", catalogAllowLegend: "catalogAllowLegend", toggleCollapsed: "toggleCollapsed", state: "state" }, outputs: { addedChange: "addedChange", layerAddedChange: "layerAddedChange" }, ngImport: i0, template: "<mat-list-item>\n  <mat-icon\n    matListItemIcon\n    svgIcon=\"chevron-up\"\n    igoCollapse\n    class=\"igo-chevron catalog-browser-group-carret\"\n    [target]=\"items\"\n    [collapsed]=\"collapsed\"\n    (toggle)=\"onToggleCollapsed($event)\"\n  >\n  </mat-icon>\n\n  <span\n    class=\"igo-catalog-group-title\"\n    matListItemTitle\n    matTooltipShowDelay=\"500\"\n    [matTooltip]=\"title\"\n    (click)=\"onTitleClick()\"\n    >{{ title }}</span\n  >\n\n  <div matListItemMeta>\n    <button *ngIf=\"group.externalProvider\" disabled=\"true\" mat-icon-button>\n      <mat-icon\n        class=\"igo-cataloggroup-external-icon\"\n        *ngIf=\"group.externalProvider\"\n        tooltip-position=\"below\"\n        matTooltipShowDelay=\"500\"\n        [matTooltip]=\"'igo.geo.catalog.externalProvider.group' | translate\"\n        color=\"primary\"\n        (click)=\"$event.stopPropagation()\"\n        svgIcon=\"earth-arrow-right\"\n      >\n      </mat-icon>\n    </button>\n\n    <ng-container\n      *ngIf=\"(added$ | async) && (preview$ | async) === false; else notadded\"\n    >\n      <button\n        mat-icon-button\n        tooltip-position=\"below\"\n        matTooltipShowDelay=\"500\"\n        [matTooltip]=\"'igo.geo.catalog.group.removeFromMap' | translate\"\n        color=\"warn\"\n        [disabled]=\"disabled$ | async\"\n        (click)=\"onToggleClick($event)\"\n      >\n        <mat-icon svgIcon=\"delete\"></mat-icon>\n      </button>\n    </ng-container>\n\n    <ng-template #notadded>\n      <button\n        mat-icon-button\n        tooltip-position=\"below\"\n        matTooltipShowDelay=\"500\"\n        [matTooltip]=\"'igo.geo.catalog.group.addToMap' | translate\"\n        [disabled]=\"disabled$ | async\"\n        (click)=\"onToggleClick($event)\"\n      >\n        <mat-icon svgIcon=\"plus\"></mat-icon>\n      </button>\n    </ng-template>\n  </div>\n</mat-list-item>\n\n<div #items>\n  <ng-template ngFor let-item [ngForOf]=\"store.view.all$() | async\">\n    <ng-container *ngIf=\"isGroup(item)\">\n      <!-- todo: add display ans manage CatalogItemGroup -->\n    </ng-container>\n    <ng-container *ngIf=\"isLayer(item)\">\n      <igo-catalog-browser-layer\n        igoListItem\n        [layer]=\"item\"\n        [resolution]=\"resolution\"\n        [map]=\"map\"\n        [catalogAllowLegend]=\"catalogAllowLegend\"\n        [added]=\"state.get(item).added\"\n        (addedLayerIsPreview)=\"onLayerPreview($event)\"\n        (addedChange)=\"onLayerAddedChange($event)\"\n      >\n      </igo-catalog-browser-layer>\n    </ng-container>\n  </ng-template>\n</div>\n", styles: [".igo-catalog-group-title{cursor:pointer}.igo-cataloggroup-external-icon{cursor:help}.catalog-browser-group-carret{margin-right:16px}.igo-catalog-group-title{font-weight:500}:host .mdc-list-item__end,:host .mdc-list-item__start{color:#000}\n"], dependencies: [{ kind: "directive", type: i2$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i5.MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "directive", type: i5.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "directive", type: i5.MatListItemMeta, selector: "[matListItemMeta]" }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: i9$1.ListItemDirective, selector: "[igoListItem]", inputs: ["color", "focused", "selected", "disabled"], outputs: ["beforeSelect", "beforeFocus", "beforeUnselect", "beforeUnfocus", "beforeDisable", "beforeEnable", "focus", "unfocus", "select", "unselect", "disable", "enable"] }, { kind: "directive", type: i9$1.CollapseDirective, selector: "[igoCollapse]", inputs: ["target", "collapsed"], outputs: ["toggle"] }, { kind: "component", type: CatalogBrowserLayerComponent, selector: "igo-catalog-browser-layer", inputs: ["resolution", "catalogAllowLegend", "layer", "map", "added"], outputs: ["addedChange", "addedLayerIsPreview"] }, { kind: "pipe", type: i2$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CatalogBrowserGroupComponent, selector: "igo-catalog-browser-group", inputs: { catalog: "catalog", group: "group", map: "map", collapsed: "collapsed", resolution: "resolution", catalogAllowLegend: "catalogAllowLegend", toggleCollapsed: "toggleCollapsed", state: "state" }, outputs: { addedChange: "addedChange", layerAddedChange: "layerAddedChange" }, ngImport: i0, template: "<mat-list-item>\r\n  <mat-icon\r\n    matListItemIcon\r\n    svgIcon=\"chevron-up\"\r\n    igoCollapse\r\n    class=\"igo-chevron catalog-browser-group-carret\"\r\n    [target]=\"items\"\r\n    [collapsed]=\"collapsed\"\r\n    (toggle)=\"onToggleCollapsed($event)\"\r\n  >\r\n  </mat-icon>\r\n\r\n  <span\r\n    class=\"igo-catalog-group-title\"\r\n    matListItemTitle\r\n    matTooltipShowDelay=\"500\"\r\n    [matTooltip]=\"title\"\r\n    (click)=\"onTitleClick()\"\r\n    >{{ title }}</span\r\n  >\r\n\r\n  <div matListItemMeta>\r\n    <button *ngIf=\"group.externalProvider\" disabled=\"true\" mat-icon-button>\r\n      <mat-icon\r\n        class=\"igo-cataloggroup-external-icon\"\r\n        *ngIf=\"group.externalProvider\"\r\n        tooltip-position=\"below\"\r\n        matTooltipShowDelay=\"500\"\r\n        [matTooltip]=\"'igo.geo.catalog.externalProvider.group' | translate\"\r\n        color=\"primary\"\r\n        (click)=\"$event.stopPropagation()\"\r\n        svgIcon=\"earth-arrow-right\"\r\n      >\r\n      </mat-icon>\r\n    </button>\r\n\r\n    <ng-container\r\n      *ngIf=\"(added$ | async) && (preview$ | async) === false; else notadded\"\r\n    >\r\n      <button\r\n        mat-icon-button\r\n        tooltip-position=\"below\"\r\n        matTooltipShowDelay=\"500\"\r\n        [matTooltip]=\"'igo.geo.catalog.group.removeFromMap' | translate\"\r\n        color=\"warn\"\r\n        [disabled]=\"disabled$ | async\"\r\n        (click)=\"onToggleClick($event)\"\r\n      >\r\n        <mat-icon svgIcon=\"delete\"></mat-icon>\r\n      </button>\r\n    </ng-container>\r\n\r\n    <ng-template #notadded>\r\n      <button\r\n        mat-icon-button\r\n        tooltip-position=\"below\"\r\n        matTooltipShowDelay=\"500\"\r\n        [matTooltip]=\"'igo.geo.catalog.group.addToMap' | translate\"\r\n        [disabled]=\"disabled$ | async\"\r\n        (click)=\"onToggleClick($event)\"\r\n      >\r\n        <mat-icon svgIcon=\"plus\"></mat-icon>\r\n      </button>\r\n    </ng-template>\r\n  </div>\r\n</mat-list-item>\r\n\r\n<div #items>\r\n  <ng-template ngFor let-item [ngForOf]=\"store.view.all$() | async\">\r\n    <ng-container *ngIf=\"isGroup(item)\">\r\n      <!-- todo: add display ans manage CatalogItemGroup -->\r\n    </ng-container>\r\n    <ng-container *ngIf=\"isLayer(item)\">\r\n      <igo-catalog-browser-layer\r\n        igoListItem\r\n        [layer]=\"item\"\r\n        [resolution]=\"resolution\"\r\n        [map]=\"map\"\r\n        [catalogAllowLegend]=\"catalogAllowLegend\"\r\n        [added]=\"state.get(item).added\"\r\n        (addedLayerIsPreview)=\"onLayerPreview($event)\"\r\n        (addedChange)=\"onLayerAddedChange($event)\"\r\n      >\r\n      </igo-catalog-browser-layer>\r\n    </ng-container>\r\n  </ng-template>\r\n</div>\r\n", styles: [".igo-catalog-group-title{cursor:pointer}.igo-cataloggroup-external-icon{cursor:help}.catalog-browser-group-carret{margin-right:16px}.igo-catalog-group-title{font-weight:500}:host .mdc-list-item__end,:host .mdc-list-item__start{color:#000}\n"], dependencies: [{ kind: "directive", type: i2$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i5.MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "directive", type: i5.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "directive", type: i5.MatListItemMeta, selector: "[matListItemMeta]" }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: i9$1.ListItemDirective, selector: "[igoListItem]", inputs: ["color", "focused", "selected", "disabled"], outputs: ["beforeSelect", "beforeFocus", "beforeUnselect", "beforeUnfocus", "beforeDisable", "beforeEnable", "focus", "unfocus", "select", "unselect", "disable", "enable"] }, { kind: "directive", type: i9$1.CollapseDirective, selector: "[igoCollapse]", inputs: ["target", "collapsed"], outputs: ["toggle"] }, { kind: "component", type: CatalogBrowserLayerComponent, selector: "igo-catalog-browser-layer", inputs: ["resolution", "catalogAllowLegend", "layer", "map", "added"], outputs: ["addedChange", "addedLayerIsPreview"] }, { kind: "pipe", type: i2$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CatalogBrowserGroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'igo-catalog-browser-group', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-list-item>\n  <mat-icon\n    matListItemIcon\n    svgIcon=\"chevron-up\"\n    igoCollapse\n    class=\"igo-chevron catalog-browser-group-carret\"\n    [target]=\"items\"\n    [collapsed]=\"collapsed\"\n    (toggle)=\"onToggleCollapsed($event)\"\n  >\n  </mat-icon>\n\n  <span\n    class=\"igo-catalog-group-title\"\n    matListItemTitle\n    matTooltipShowDelay=\"500\"\n    [matTooltip]=\"title\"\n    (click)=\"onTitleClick()\"\n    >{{ title }}</span\n  >\n\n  <div matListItemMeta>\n    <button *ngIf=\"group.externalProvider\" disabled=\"true\" mat-icon-button>\n      <mat-icon\n        class=\"igo-cataloggroup-external-icon\"\n        *ngIf=\"group.externalProvider\"\n        tooltip-position=\"below\"\n        matTooltipShowDelay=\"500\"\n        [matTooltip]=\"'igo.geo.catalog.externalProvider.group' | translate\"\n        color=\"primary\"\n        (click)=\"$event.stopPropagation()\"\n        svgIcon=\"earth-arrow-right\"\n      >\n      </mat-icon>\n    </button>\n\n    <ng-container\n      *ngIf=\"(added$ | async) && (preview$ | async) === false; else notadded\"\n    >\n      <button\n        mat-icon-button\n        tooltip-position=\"below\"\n        matTooltipShowDelay=\"500\"\n        [matTooltip]=\"'igo.geo.catalog.group.removeFromMap' | translate\"\n        color=\"warn\"\n        [disabled]=\"disabled$ | async\"\n        (click)=\"onToggleClick($event)\"\n      >\n        <mat-icon svgIcon=\"delete\"></mat-icon>\n      </button>\n    </ng-container>\n\n    <ng-template #notadded>\n      <button\n        mat-icon-button\n        tooltip-position=\"below\"\n        matTooltipShowDelay=\"500\"\n        [matTooltip]=\"'igo.geo.catalog.group.addToMap' | translate\"\n        [disabled]=\"disabled$ | async\"\n        (click)=\"onToggleClick($event)\"\n      >\n        <mat-icon svgIcon=\"plus\"></mat-icon>\n      </button>\n    </ng-template>\n  </div>\n</mat-list-item>\n\n<div #items>\n  <ng-template ngFor let-item [ngForOf]=\"store.view.all$() | async\">\n    <ng-container *ngIf=\"isGroup(item)\">\n      <!-- todo: add display ans manage CatalogItemGroup -->\n    </ng-container>\n    <ng-container *ngIf=\"isLayer(item)\">\n      <igo-catalog-browser-layer\n        igoListItem\n        [layer]=\"item\"\n        [resolution]=\"resolution\"\n        [map]=\"map\"\n        [catalogAllowLegend]=\"catalogAllowLegend\"\n        [added]=\"state.get(item).added\"\n        (addedLayerIsPreview)=\"onLayerPreview($event)\"\n        (addedChange)=\"onLayerAddedChange($event)\"\n      >\n      </igo-catalog-browser-layer>\n    </ng-container>\n  </ng-template>\n</div>\n", styles: [".igo-catalog-group-title{cursor:pointer}.igo-cataloggroup-external-icon{cursor:help}.catalog-browser-group-carret{margin-right:16px}.igo-catalog-group-title{font-weight:500}:host .mdc-list-item__end,:host .mdc-list-item__start{color:#000}\n"] }]
+            args: [{ selector: 'igo-catalog-browser-group', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-list-item>\r\n  <mat-icon\r\n    matListItemIcon\r\n    svgIcon=\"chevron-up\"\r\n    igoCollapse\r\n    class=\"igo-chevron catalog-browser-group-carret\"\r\n    [target]=\"items\"\r\n    [collapsed]=\"collapsed\"\r\n    (toggle)=\"onToggleCollapsed($event)\"\r\n  >\r\n  </mat-icon>\r\n\r\n  <span\r\n    class=\"igo-catalog-group-title\"\r\n    matListItemTitle\r\n    matTooltipShowDelay=\"500\"\r\n    [matTooltip]=\"title\"\r\n    (click)=\"onTitleClick()\"\r\n    >{{ title }}</span\r\n  >\r\n\r\n  <div matListItemMeta>\r\n    <button *ngIf=\"group.externalProvider\" disabled=\"true\" mat-icon-button>\r\n      <mat-icon\r\n        class=\"igo-cataloggroup-external-icon\"\r\n        *ngIf=\"group.externalProvider\"\r\n        tooltip-position=\"below\"\r\n        matTooltipShowDelay=\"500\"\r\n        [matTooltip]=\"'igo.geo.catalog.externalProvider.group' | translate\"\r\n        color=\"primary\"\r\n        (click)=\"$event.stopPropagation()\"\r\n        svgIcon=\"earth-arrow-right\"\r\n      >\r\n      </mat-icon>\r\n    </button>\r\n\r\n    <ng-container\r\n      *ngIf=\"(added$ | async) && (preview$ | async) === false; else notadded\"\r\n    >\r\n      <button\r\n        mat-icon-button\r\n        tooltip-position=\"below\"\r\n        matTooltipShowDelay=\"500\"\r\n        [matTooltip]=\"'igo.geo.catalog.group.removeFromMap' | translate\"\r\n        color=\"warn\"\r\n        [disabled]=\"disabled$ | async\"\r\n        (click)=\"onToggleClick($event)\"\r\n      >\r\n        <mat-icon svgIcon=\"delete\"></mat-icon>\r\n      </button>\r\n    </ng-container>\r\n\r\n    <ng-template #notadded>\r\n      <button\r\n        mat-icon-button\r\n        tooltip-position=\"below\"\r\n        matTooltipShowDelay=\"500\"\r\n        [matTooltip]=\"'igo.geo.catalog.group.addToMap' | translate\"\r\n        [disabled]=\"disabled$ | async\"\r\n        (click)=\"onToggleClick($event)\"\r\n      >\r\n        <mat-icon svgIcon=\"plus\"></mat-icon>\r\n      </button>\r\n    </ng-template>\r\n  </div>\r\n</mat-list-item>\r\n\r\n<div #items>\r\n  <ng-template ngFor let-item [ngForOf]=\"store.view.all$() | async\">\r\n    <ng-container *ngIf=\"isGroup(item)\">\r\n      <!-- todo: add display ans manage CatalogItemGroup -->\r\n    </ng-container>\r\n    <ng-container *ngIf=\"isLayer(item)\">\r\n      <igo-catalog-browser-layer\r\n        igoListItem\r\n        [layer]=\"item\"\r\n        [resolution]=\"resolution\"\r\n        [map]=\"map\"\r\n        [catalogAllowLegend]=\"catalogAllowLegend\"\r\n        [added]=\"state.get(item).added\"\r\n        (addedLayerIsPreview)=\"onLayerPreview($event)\"\r\n        (addedChange)=\"onLayerAddedChange($event)\"\r\n      >\r\n      </igo-catalog-browser-layer>\r\n    </ng-container>\r\n  </ng-template>\r\n</div>\r\n", styles: [".igo-catalog-group-title{cursor:pointer}.igo-cataloggroup-external-icon{cursor:help}.catalog-browser-group-carret{margin-right:16px}.igo-catalog-group-title{font-weight:500}:host .mdc-list-item__end,:host .mdc-list-item__start{color:#000}\n"] }]
         }], propDecorators: { catalog: [{
                 type: Input
             }], group: [{
@@ -13965,11 +14008,11 @@ class CatalogBrowserComponent {
         this.removeLayersFromMap(layers);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CatalogBrowserComponent, deps: [{ token: LayerService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CatalogBrowserComponent, selector: "igo-catalog-browser", inputs: { catalogAllowLegend: "catalogAllowLegend", catalog: "catalog", store: "store", map: "map", toggleCollapsedGroup: "toggleCollapsedGroup" }, ngImport: i0, 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", dependencies: [{ kind: "directive", type: i2$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i9$1.ListItemDirective, selector: "[igoListItem]", inputs: ["color", "focused", "selected", "disabled"], outputs: ["beforeSelect", "beforeFocus", "beforeUnselect", "beforeUnfocus", "beforeDisable", "beforeEnable", "focus", "unfocus", "select", "unselect", "disable", "enable"] }, { kind: "component", type: i9$1.ListComponent, selector: "igo-list", inputs: ["navigation", "selection"] }, { kind: "component", type: CatalogBrowserGroupComponent, selector: "igo-catalog-browser-group", inputs: ["catalog", "group", "map", "collapsed", "resolution", "catalogAllowLegend", "toggleCollapsed", "state"], outputs: ["addedChange", "layerAddedChange"] }, { kind: "component", type: CatalogBrowserLayerComponent, selector: "igo-catalog-browser-layer", inputs: ["resolution", "catalogAllowLegend", "layer", "map", "added"], outputs: ["addedChange", "addedLayerIsPreview"] }, { kind: "pipe", type: i2$2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CatalogBrowserComponent, selector: "igo-catalog-browser", inputs: { catalogAllowLegend: "catalogAllowLegend", catalog: "catalog", store: "store", map: "map", toggleCollapsedGroup: "toggleCollapsedGroup" }, ngImport: i0, 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", dependencies: [{ kind: "directive", type: i2$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i9$1.ListItemDirective, selector: "[igoListItem]", inputs: ["color", "focused", "selected", "disabled"], outputs: ["beforeSelect", "beforeFocus", "beforeUnselect", "beforeUnfocus", "beforeDisable", "beforeEnable", "focus", "unfocus", "select", "unselect", "disable", "enable"] }, { kind: "component", type: i9$1.ListComponent, selector: "igo-list", inputs: ["navigation", "selection"] }, { kind: "component", type: CatalogBrowserGroupComponent, selector: "igo-catalog-browser-group", inputs: ["catalog", "group", "map", "collapsed", "resolution", "catalogAllowLegend", "toggleCollapsed", "state"], outputs: ["addedChange", "layerAddedChange"] }, { kind: "component", type: CatalogBrowserLayerComponent, selector: "igo-catalog-browser-layer", inputs: ["resolution", "catalogAllowLegend", "layer", "map", "added"], outputs: ["addedChange", "addedLayerIsPreview"] }, { kind: "pipe", type: i2$2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CatalogBrowserComponent, decorators: [{
             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" }]
         }], ctorParameters: function () { return [{ type: LayerService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { catalogAllowLegend: [{
                 type: Input
             }], catalog: [{
@@ -14115,11 +14158,11 @@ class AddCatalogDialogComponent {
         this.dialogRef.close();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AddCatalogDialogComponent, deps: [{ token: i2$1.UntypedFormBuilder }, { token: i2.LanguageService }, { token: i2.ConfigService }, { token: i1$2.MatDialogRef }, { token: MAT_DIALOG_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AddCatalogDialogComponent, selector: "igo-add-catalog-dialog", ngImport: i0, 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"], dependencies: [{ kind: "directive", type: i2$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i4$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i9$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i15.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i9.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i6$2.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple", "hideSingleSelectionIndicator"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i6$2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: i1$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "pipe", type: i2$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AddCatalogDialogComponent, selector: "igo-add-catalog-dialog", ngImport: i0, 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"], dependencies: [{ kind: "directive", type: i2$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i4$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i9$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i15.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i9.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i6$2.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple", "hideSingleSelectionIndicator"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i6$2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: i1$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "pipe", type: i2$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AddCatalogDialogComponent, decorators: [{
             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"] }]
         }], ctorParameters: function () { return [{ type: i2$1.UntypedFormBuilder }, { type: i2.LanguageService }, { type: i2.ConfigService }, { type: i1$2.MatDialogRef }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -14151,11 +14194,11 @@ class CatalogLibaryItemComponent {
         this.catalogRemove.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CatalogLibaryItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CatalogLibaryItemComponent, selector: "igo-catalog-library-item", inputs: { catalog: "catalog", map: "map" }, outputs: { catalogRemove: "catalogRemove" }, ngImport: i0, 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"], dependencies: [{ kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i5.MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "directive", type: i5.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "directive", type: i5.MatListItemMeta, selector: "[matListItemMeta]" }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i4$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CatalogLibaryItemComponent, selector: "igo-catalog-library-item", inputs: { catalog: "catalog", map: "map" }, outputs: { catalogRemove: "catalogRemove" }, ngImport: i0, 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"], dependencies: [{ kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i5.MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "directive", type: i5.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "directive", type: i5.MatListItemMeta, selector: "[matListItemMeta]" }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i4$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CatalogLibaryItemComponent, decorators: [{
             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"] }]
         }], propDecorators: { catalog: [{
                 type: Input
             }], map: [{
@@ -14325,11 +14368,11 @@ class CatalogLibaryComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CatalogLibaryComponent, deps: [{ token: CapabilitiesService }, { token: i2.MessageService }, { token: i2.StorageService }, { token: i1$2.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CatalogLibaryComponent, selector: "igo-catalog-library", inputs: { store: "store", map: "map", addCatalogAllowed: "addCatalogAllowed", predefinedCatalogs: "predefinedCatalogs" }, outputs: { catalogSelectChange: "catalogSelectChange" }, ngImport: i0, 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"], dependencies: [{ kind: "directive", type: i2$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: i9$1.ListItemDirective, selector: "[igoListItem]", inputs: ["color", "focused", "selected", "disabled"], outputs: ["beforeSelect", "beforeFocus", "beforeUnselect", "beforeUnfocus", "beforeDisable", "beforeEnable", "focus", "unfocus", "select", "unselect", "disable", "enable"] }, { kind: "component", type: i9$1.ListComponent, selector: "igo-list", inputs: ["navigation", "selection"] }, { kind: "component", type: i4$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: CatalogLibaryItemComponent, selector: "igo-catalog-library-item", inputs: ["catalog", "map"], outputs: ["catalogRemove"] }, { kind: "pipe", type: i2$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CatalogLibaryComponent, selector: "igo-catalog-library", inputs: { store: "store", map: "map", addCatalogAllowed: "addCatalogAllowed", predefinedCatalogs: "predefinedCatalogs" }, outputs: { catalogSelectChange: "catalogSelectChange" }, ngImport: i0, 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"], dependencies: [{ kind: "directive", type: i2$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: i9$1.ListItemDirective, selector: "[igoListItem]", inputs: ["color", "focused", "selected", "disabled"], outputs: ["beforeSelect", "beforeFocus", "beforeUnselect", "beforeUnfocus", "beforeDisable", "beforeEnable", "focus", "unfocus", "select", "unselect", "disable", "enable"] }, { kind: "component", type: i9$1.ListComponent, selector: "igo-list", inputs: ["navigation", "selection"] }, { kind: "component", type: i4$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: CatalogLibaryItemComponent, selector: "igo-catalog-library-item", inputs: ["catalog", "map"], outputs: ["catalogRemove"] }, { kind: "pipe", type: i2$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CatalogLibaryComponent, decorators: [{
             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"] }]
         }], ctorParameters: function () { return [{ type: CapabilitiesService }, { type: i2.MessageService }, { type: i2.StorageService }, { type: i1$2.MatDialog }]; }, propDecorators: { store: [{
                 type: Input
             }], map: [{
@@ -16608,11 +16651,11 @@ class DirectionsButtonsComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DirectionsButtonsComponent, deps: [{ token: i2.LanguageService }, { token: i2.MessageService }, { token: i2.RouteService, optional: true }, { token: DirectionsService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DirectionsButtonsComponent, selector: "igo-directions-buttons", inputs: { contextUri: "contextUri", zoomToActiveRoute$: "zoomToActiveRoute$", stopsStore: "stopsStore", routesFeatureStore: "routesFeatureStore", stepFeatureStore: "stepFeatureStore" }, ngImport: i0, 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", styles: [""], dependencies: [{ kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "pipe", type: i2$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DirectionsButtonsComponent, selector: "igo-directions-buttons", inputs: { contextUri: "contextUri", zoomToActiveRoute$: "zoomToActiveRoute$", stopsStore: "stopsStore", routesFeatureStore: "routesFeatureStore", stepFeatureStore: "stepFeatureStore" }, ngImport: i0, 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", styles: [""], dependencies: [{ kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "pipe", type: i2$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DirectionsButtonsComponent, decorators: [{
             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" }]
         }], ctorParameters: function () { return [{ type: i2.LanguageService }, { type: i2.MessageService }, { type: i2.RouteService, decorators: [{
                     type: Optional
                 }] }, { type: DirectionsService }]; }, propDecorators: { contextUri: [{
@@ -16776,11 +16819,11 @@ class DirectionsInputsComponent {
         this.onMapClickEventKeys = [];
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DirectionsInputsComponent, deps: [{ token: i2.LanguageService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DirectionsInputsComponent, selector: "igo-directions-inputs", inputs: { stopsStore: "stopsStore", stopsFeatureStore: "stopsFeatureStore", projection: "projection", coordRoundedDecimals: "coordRoundedDecimals", debounce: "debounce", length: "length" }, outputs: { stopInputHasFocus: "stopInputHasFocus" }, ngImport: i0, 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:#fff;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:#fff}: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"], dependencies: [{ kind: "directive", type: i2$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i3.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i9$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i9.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i9.MatOptgroup, selector: "mat-optgroup", inputs: ["disabled"], exportAs: ["matOptgroup"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i6$2.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple", "hideSingleSelectionIndicator"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i6$2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "pipe", type: i2$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DirectionsInputsComponent, selector: "igo-directions-inputs", inputs: { stopsStore: "stopsStore", stopsFeatureStore: "stopsFeatureStore", projection: "projection", coordRoundedDecimals: "coordRoundedDecimals", debounce: "debounce", length: "length" }, outputs: { stopInputHasFocus: "stopInputHasFocus" }, ngImport: i0, 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:#fff;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:#fff}: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"], dependencies: [{ kind: "directive", type: i2$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i3.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i9$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i9.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i9.MatOptgroup, selector: "mat-optgroup", inputs: ["disabled"], exportAs: ["matOptgroup"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i6$2.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple", "hideSingleSelectionIndicator"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i6$2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "pipe", type: i2$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DirectionsInputsComponent, decorators: [{
             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:#fff;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:#fff}: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:#fff;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:#fff}: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"] }]
         }], ctorParameters: function () { return [{ type: i2.LanguageService }]; }, propDecorators: { stopsStore: [{
                 type: Input
             }], stopsFeatureStore: [{
@@ -16888,11 +16931,11 @@ class DirectionsResultsComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DirectionsResultsComponent, deps: [{ token: i2.LanguageService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DirectionsResultsComponent, selector: "igo-directions-results", inputs: { routesFeatureStore: "routesFeatureStore", stepFeatureStore: "stepFeatureStore" }, ngImport: i0, 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"], dependencies: [{ kind: "directive", type: i2$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5.MatList, selector: "mat-list", exportAs: ["matList"] }, { kind: "component", type: i5.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i5.MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "component", type: i9$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i5.MatListItemMeta, selector: "[matListItemMeta]" }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatLabel, selector: "mat-label" }, { kind: "component", type: i9.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i15.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DirectionsResultsComponent, selector: "igo-directions-results", inputs: { routesFeatureStore: "routesFeatureStore", stepFeatureStore: "stepFeatureStore" }, ngImport: i0, 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"], dependencies: [{ kind: "directive", type: i2$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5.MatList, selector: "mat-list", exportAs: ["matList"] }, { kind: "component", type: i5.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i5.MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "component", type: i9$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i5.MatListItemMeta, selector: "[matListItemMeta]" }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatLabel, selector: "mat-label" }, { kind: "component", type: i9.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i15.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DirectionsResultsComponent, decorators: [{
             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"] }]
         }], ctorParameters: function () { return [{ type: i2.LanguageService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { routesFeatureStore: [{
                 type: Input
             }], stepFeatureStore: [{
@@ -16913,11 +16956,11 @@ class ZoomButtonComponent {
     }
     constructor() { }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ZoomButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ZoomButtonComponent, selector: "igo-zoom-button", inputs: { map: "map", color: "color" }, ngImport: i0, 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"], dependencies: [{ kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ZoomButtonComponent, selector: "igo-zoom-button", inputs: { map: "map", color: "color" }, ngImport: i0, 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"], dependencies: [{ kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ZoomButtonComponent, decorators: [{
             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"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { map: [{
                 type: Input
             }], color: [{
@@ -16951,11 +16994,11 @@ class MenuButtonComponent {
         this.openSidenav.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MenuButtonComponent, deps: [{ token: i2.ConfigService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MenuButtonComponent, selector: "igo-menu-button", inputs: { sidenavOpened: "sidenavOpened" }, outputs: { openSidenav: "openSidenav" }, ngImport: i0, 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"], dependencies: [{ kind: "directive", type: i2$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MenuButtonComponent, selector: "igo-menu-button", inputs: { sidenavOpened: "sidenavOpened" }, outputs: { openSidenav: "openSidenav" }, ngImport: i0, 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"], dependencies: [{ kind: "directive", type: i2$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MenuButtonComponent, decorators: [{
             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"] }]
         }], ctorParameters: function () { return [{ type: i2.ConfigService }]; }, propDecorators: { sidenavOpened: [{
                 type: Input
             }], openSidenav: [{
@@ -17007,11 +17050,11 @@ class GeolocateButtonComponent {
         this.map.geolocationController.tracking = tracking ? false : true;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GeolocateButtonComponent, deps: [{ token: i2.ConfigService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GeolocateButtonComponent, selector: "igo-geolocate-button", inputs: { map: "map", color: "color" }, ngImport: i0, 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"], dependencies: [{ kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "pipe", type: i2$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GeolocateButtonComponent, selector: "igo-geolocate-button", inputs: { map: "map", color: "color" }, ngImport: i0, 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"], dependencies: [{ kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "pipe", type: i2$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GeolocateButtonComponent, decorators: [{
             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"] }]
         }], ctorParameters: function () { return [{ type: i2.ConfigService }]; }, propDecorators: { map: [{
                 type: Input
             }], color: [{
@@ -17060,11 +17103,11 @@ class HomeExtentButtonComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HomeExtentButtonComponent, deps: [{ token: i2.ConfigService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: HomeExtentButtonComponent, selector: "igo-home-extent-button", inputs: { map: "map", color: "color", extentOverride: "extentOverride", centerOverride: "centerOverride", zoomOverride: "zoomOverride" }, ngImport: i0, 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"], dependencies: [{ kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: HomeExtentButtonComponent, selector: "igo-home-extent-button", inputs: { map: "map", color: "color", extentOverride: "extentOverride", centerOverride: "centerOverride", zoomOverride: "zoomOverride" }, ngImport: i0, 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"], dependencies: [{ kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HomeExtentButtonComponent, decorators: [{
             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"] }]
         }], ctorParameters: function () { return [{ type: i2.ConfigService }]; }, propDecorators: { map: [{
                 type: Input
             }], color: [{
@@ -17100,11 +17143,11 @@ class OfflineButtonComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: OfflineButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: OfflineButtonComponent, selector: "igo-offline-button", inputs: { map: "map", color: "color", enabled: "enabled" }, ngImport: i0, 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"], dependencies: [{ kind: "directive", type: i2$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: OfflineButtonComponent, selector: "igo-offline-button", inputs: { map: "map", color: "color", enabled: "enabled" }, ngImport: i0, 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"], dependencies: [{ kind: "directive", type: i2$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: OfflineButtonComponent, decorators: [{
             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"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { map: [{
                 type: Input
             }], color: [{
@@ -17183,11 +17226,11 @@ class WakeLockButtonComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: WakeLockButtonComponent, deps: [{ token: i2.StorageService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: WakeLockButtonComponent, selector: "igo-wake-lock-button", inputs: { color: "color", enabled: "enabled" }, ngImport: i0, 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"], dependencies: [{ kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "pipe", type: i2$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: WakeLockButtonComponent, selector: "igo-wake-lock-button", inputs: { color: "color", enabled: "enabled" }, ngImport: i0, 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"], dependencies: [{ kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "pipe", type: i2$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: WakeLockButtonComponent, decorators: [{
             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"] }]
         }], ctorParameters: function () { return [{ type: i2.StorageService }]; }, propDecorators: { color: [{
                 type: Input
             }], enabled: [{
@@ -17310,11 +17353,11 @@ class MiniBaseMapComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MiniBaseMapComponent, deps: [{ token: LayerService }, { token: i0.ApplicationRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MiniBaseMapComponent, selector: "igo-mini-basemap", inputs: { map: "map", disabled: "disabled", title: "title", display: "display", baseLayer: "baseLayer" }, ngImport: i0, 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"], dependencies: [{ kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MapBrowserComponent, selector: "igo-map-browser", inputs: ["map", "view"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MiniBaseMapComponent, selector: "igo-mini-basemap", inputs: { map: "map", disabled: "disabled", title: "title", display: "display", baseLayer: "baseLayer" }, ngImport: i0, 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"], dependencies: [{ kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MapBrowserComponent, selector: "igo-map-browser", inputs: ["map", "view"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MiniBaseMapComponent, decorators: [{
             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"] }]
         }], ctorParameters: function () { return [{ type: LayerService }, { type: i0.ApplicationRef }]; }, propDecorators: { map: [{
                 type: Input
             }], disabled: [{
@@ -17413,11 +17456,11 @@ class RotationButtonComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RotationButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: RotationButtonComponent, selector: "igo-rotation-button", inputs: { map: "map", showIfNoRotation: "showIfNoRotation", color: "color" }, ngImport: i0, 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"], dependencies: [{ kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "pipe", type: i2$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: RotationButtonComponent, selector: "igo-rotation-button", inputs: { map: "map", showIfNoRotation: "showIfNoRotation", color: "color" }, ngImport: i0, 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"], dependencies: [{ kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "pipe", type: i2$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RotationButtonComponent, decorators: [{
             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"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { map: [{
                 type: Input
             }], showIfNoRotation: [{
@@ -17625,11 +17668,11 @@ class SwipeControlComponent {
         }, true);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SwipeControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SwipeControlComponent, selector: "igo-swipe-control", inputs: { map: "map" }, ngImport: i0, 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"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SwipeControlComponent, selector: "igo-swipe-control", inputs: { map: "map" }, ngImport: i0, 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"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SwipeControlComponent, decorators: [{
             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"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { map: [{
                 type: Input
             }] } });
@@ -17679,11 +17722,11 @@ class MapCenterComponent {
         }, true);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MapCenterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MapCenterComponent, selector: "igo-map-center", inputs: { map: "map" }, ngImport: i0, 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"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MapCenterComponent, selector: "igo-map-center", inputs: { map: "map" }, ngImport: i0, 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"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MapCenterComponent, decorators: [{
             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"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { map: [{
                 type: Input
             }] } });
@@ -17692,11 +17735,11 @@ class InfoSectionComponent {
     infoContent = '';
     constructor() { }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: InfoSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: InfoSectionComponent, selector: "igo-info-section", inputs: { infoContent: "infoContent" }, ngImport: i0, 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"], dependencies: [{ kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: InfoSectionComponent, selector: "igo-info-section", inputs: { infoContent: "infoContent" }, ngImport: i0, 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"], dependencies: [{ kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: InfoSectionComponent, decorators: [{
             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"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { infoContent: [{
                 type: Input
             }] } });
@@ -19002,11 +19045,11 @@ class DirectionsComponent {
             : ol.removeInteraction(interaction));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DirectionsComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i2.LanguageService }, { token: DirectionsService }, { token: SearchService }, { token: QueryService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DirectionsComponent, selector: "igo-directions", inputs: { contextUri: "contextUri", stopsStore: "stopsStore", stopsFeatureStore: "stopsFeatureStore", routesFeatureStore: "routesFeatureStore", stepFeatureStore: "stepFeatureStore", debounce: "debounce", length: "length", coordRoundedDecimals: "coordRoundedDecimals", zoomToActiveRoute$: "zoomToActiveRoute$" }, ngImport: i0, template: "<div class=\"directions-options\">\n  <mat-slide-toggle\n    [checked]=\"directionControlIsActive\"\n    [labelPosition]=\"'before'\"\n    (change)=\"onToggleDirectionsControl($event.checked)\"\n  >\n    {{ 'igo.geo.directionsForm.toggleActive' | translate }}\n  </mat-slide-toggle>\n</div>\n\n<igo-directions-buttons\n  [stepFeatureStore]=\"stepFeatureStore\"\n  [contextUri]=\"contextUri\"\n  [zoomToActiveRoute$]=\"zoomToActiveRoute$\"\n  [routesFeatureStore]=\"routesFeatureStore\"\n  [stopsStore]=\"stopsStore\"\n></igo-directions-buttons>\n\n<igo-directions-inputs\n  (stopInputHasFocus)=\"onStopInputHasFocusChange($event)\"\n  [coordRoundedDecimals]=\"coordRoundedDecimals\"\n  [projection]=\"projection\"\n  [stopsFeatureStore]=\"stopsFeatureStore\"\n  [stopsStore]=\"stopsStore\"\n  [debounce]=\"debounce\"\n  [length]=\"length\"\n></igo-directions-inputs>\n\n<igo-directions-results\n  [stepFeatureStore]=\"stepFeatureStore\"\n  [routesFeatureStore]=\"routesFeatureStore\"\n></igo-directions-results>\n", styles: [".directions-options mat-slide-toggle{width:100%;padding:10px}.directions-options mat-slide-toggle ::ng-deep .mdc-form-field{width:100%}.directions-options mat-slide-toggle ::ng-deep .mdc-label{margin-left:0;width:calc(100% - 60px)}\n"], dependencies: [{ kind: "component", type: i7.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matSlideToggle"] }, { kind: "component", type: DirectionsInputsComponent, selector: "igo-directions-inputs", inputs: ["stopsStore", "stopsFeatureStore", "projection", "coordRoundedDecimals", "debounce", "length"], outputs: ["stopInputHasFocus"] }, { kind: "component", type: DirectionsButtonsComponent, selector: "igo-directions-buttons", inputs: ["contextUri", "zoomToActiveRoute$", "stopsStore", "routesFeatureStore", "stepFeatureStore"] }, { kind: "component", type: DirectionsResultsComponent, selector: "igo-directions-results", inputs: ["routesFeatureStore", "stepFeatureStore"] }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DirectionsComponent, selector: "igo-directions", inputs: { contextUri: "contextUri", stopsStore: "stopsStore", stopsFeatureStore: "stopsFeatureStore", routesFeatureStore: "routesFeatureStore", stepFeatureStore: "stepFeatureStore", debounce: "debounce", length: "length", coordRoundedDecimals: "coordRoundedDecimals", zoomToActiveRoute$: "zoomToActiveRoute$" }, ngImport: i0, template: "<div class=\"directions-options\">\r\n  <mat-slide-toggle\r\n    [checked]=\"directionControlIsActive\"\r\n    [labelPosition]=\"'before'\"\r\n    (change)=\"onToggleDirectionsControl($event.checked)\"\r\n  >\r\n    {{ 'igo.geo.directionsForm.toggleActive' | translate }}\r\n  </mat-slide-toggle>\r\n</div>\r\n\r\n<igo-directions-buttons\r\n  [stepFeatureStore]=\"stepFeatureStore\"\r\n  [contextUri]=\"contextUri\"\r\n  [zoomToActiveRoute$]=\"zoomToActiveRoute$\"\r\n  [routesFeatureStore]=\"routesFeatureStore\"\r\n  [stopsStore]=\"stopsStore\"\r\n></igo-directions-buttons>\r\n\r\n<igo-directions-inputs\r\n  (stopInputHasFocus)=\"onStopInputHasFocusChange($event)\"\r\n  [coordRoundedDecimals]=\"coordRoundedDecimals\"\r\n  [projection]=\"projection\"\r\n  [stopsFeatureStore]=\"stopsFeatureStore\"\r\n  [stopsStore]=\"stopsStore\"\r\n  [debounce]=\"debounce\"\r\n  [length]=\"length\"\r\n></igo-directions-inputs>\r\n\r\n<igo-directions-results\r\n  [stepFeatureStore]=\"stepFeatureStore\"\r\n  [routesFeatureStore]=\"routesFeatureStore\"\r\n></igo-directions-results>\r\n", styles: [".directions-options mat-slide-toggle{width:100%;padding:10px}.directions-options mat-slide-toggle ::ng-deep .mdc-form-field{width:100%}.directions-options mat-slide-toggle ::ng-deep .mdc-label{margin-left:0;width:calc(100% - 60px)}\n"], dependencies: [{ kind: "component", type: i7.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matSlideToggle"] }, { kind: "component", type: DirectionsInputsComponent, selector: "igo-directions-inputs", inputs: ["stopsStore", "stopsFeatureStore", "projection", "coordRoundedDecimals", "debounce", "length"], outputs: ["stopInputHasFocus"] }, { kind: "component", type: DirectionsButtonsComponent, selector: "igo-directions-buttons", inputs: ["contextUri", "zoomToActiveRoute$", "stopsStore", "routesFeatureStore", "stepFeatureStore"] }, { kind: "component", type: DirectionsResultsComponent, selector: "igo-directions-results", inputs: ["routesFeatureStore", "stepFeatureStore"] }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DirectionsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'igo-directions', template: "<div class=\"directions-options\">\n  <mat-slide-toggle\n    [checked]=\"directionControlIsActive\"\n    [labelPosition]=\"'before'\"\n    (change)=\"onToggleDirectionsControl($event.checked)\"\n  >\n    {{ 'igo.geo.directionsForm.toggleActive' | translate }}\n  </mat-slide-toggle>\n</div>\n\n<igo-directions-buttons\n  [stepFeatureStore]=\"stepFeatureStore\"\n  [contextUri]=\"contextUri\"\n  [zoomToActiveRoute$]=\"zoomToActiveRoute$\"\n  [routesFeatureStore]=\"routesFeatureStore\"\n  [stopsStore]=\"stopsStore\"\n></igo-directions-buttons>\n\n<igo-directions-inputs\n  (stopInputHasFocus)=\"onStopInputHasFocusChange($event)\"\n  [coordRoundedDecimals]=\"coordRoundedDecimals\"\n  [projection]=\"projection\"\n  [stopsFeatureStore]=\"stopsFeatureStore\"\n  [stopsStore]=\"stopsStore\"\n  [debounce]=\"debounce\"\n  [length]=\"length\"\n></igo-directions-inputs>\n\n<igo-directions-results\n  [stepFeatureStore]=\"stepFeatureStore\"\n  [routesFeatureStore]=\"routesFeatureStore\"\n></igo-directions-results>\n", styles: [".directions-options mat-slide-toggle{width:100%;padding:10px}.directions-options mat-slide-toggle ::ng-deep .mdc-form-field{width:100%}.directions-options mat-slide-toggle ::ng-deep .mdc-label{margin-left:0;width:calc(100% - 60px)}\n"] }]
+            args: [{ selector: 'igo-directions', template: "<div class=\"directions-options\">\r\n  <mat-slide-toggle\r\n    [checked]=\"directionControlIsActive\"\r\n    [labelPosition]=\"'before'\"\r\n    (change)=\"onToggleDirectionsControl($event.checked)\"\r\n  >\r\n    {{ 'igo.geo.directionsForm.toggleActive' | translate }}\r\n  </mat-slide-toggle>\r\n</div>\r\n\r\n<igo-directions-buttons\r\n  [stepFeatureStore]=\"stepFeatureStore\"\r\n  [contextUri]=\"contextUri\"\r\n  [zoomToActiveRoute$]=\"zoomToActiveRoute$\"\r\n  [routesFeatureStore]=\"routesFeatureStore\"\r\n  [stopsStore]=\"stopsStore\"\r\n></igo-directions-buttons>\r\n\r\n<igo-directions-inputs\r\n  (stopInputHasFocus)=\"onStopInputHasFocusChange($event)\"\r\n  [coordRoundedDecimals]=\"coordRoundedDecimals\"\r\n  [projection]=\"projection\"\r\n  [stopsFeatureStore]=\"stopsFeatureStore\"\r\n  [stopsStore]=\"stopsStore\"\r\n  [debounce]=\"debounce\"\r\n  [length]=\"length\"\r\n></igo-directions-inputs>\r\n\r\n<igo-directions-results\r\n  [stepFeatureStore]=\"stepFeatureStore\"\r\n  [routesFeatureStore]=\"routesFeatureStore\"\r\n></igo-directions-results>\r\n", styles: [".directions-options mat-slide-toggle{width:100%;padding:10px}.directions-options mat-slide-toggle ::ng-deep .mdc-form-field{width:100%}.directions-options mat-slide-toggle ::ng-deep .mdc-label{margin-left:0;width:calc(100% - 60px)}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i2.LanguageService }, { type: DirectionsService }, { type: SearchService }, { type: QueryService }]; }, propDecorators: { contextUri: [{
                 type: Input
             }], stopsStore: [{
@@ -19695,11 +19738,11 @@ class DownloadButtonComponent {
         return this.layer.dataSource.options;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DownloadButtonComponent, deps: [{ token: DownloadService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DownloadButtonComponent, selector: "igo-download-button", inputs: { layer: "layer", color: "color" }, ngImport: i0, 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", styles: [""], dependencies: [{ kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DownloadButtonComponent, selector: "igo-download-button", inputs: { layer: "layer", color: "color" }, ngImport: i0, 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", styles: [""], dependencies: [{ kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DownloadButtonComponent, decorators: [{
             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" }]
         }], ctorParameters: function () { return [{ type: DownloadService }]; }, propDecorators: { layer: [{
                 type: Input
             }], color: [{
@@ -19753,11 +19796,11 @@ class DrawLayerPopupComponent {
         this.dialogRef.close(labelString);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DrawLayerPopupComponent, deps: [{ token: i1$2.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DrawLayerPopupComponent, selector: "igo-draw-popup-component", inputs: { confirmFlag: "confirmFlag" }, ngImport: i0, 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"], dependencies: [{ kind: "component", type: i4$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i9$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DrawLayerPopupComponent, selector: "igo-draw-popup-component", inputs: { confirmFlag: "confirmFlag" }, ngImport: i0, 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"], dependencies: [{ kind: "component", type: i4$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i9$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DrawLayerPopupComponent, decorators: [{
             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"] }]
         }], ctorParameters: function () { return [{ type: i1$2.MatDialogRef }]; }, propDecorators: { confirmFlag: [{
                 type: Input
             }] } });
@@ -20778,11 +20821,11 @@ class DrawPopupComponent {
         return this.languageService.translate.instant('igo.geo.draw.labelType.' + option);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DrawPopupComponent, deps: [{ token: i2.LanguageService }, { token: i1$2.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DrawPopupComponent, selector: "igo-draw-popup-component", inputs: { confirmFlag: "confirmFlag", labelFlag: "labelFlag", coordinatesMeasureUnit: "coordinatesMeasureUnit", lengthMeasureUnit: "lengthMeasureUnit", areaMeasureUnit: "areaMeasureUnit" }, ngImport: i0, 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"], dependencies: [{ kind: "directive", type: i2$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i5$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i5$1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatLabel, selector: "mat-label" }, { kind: "directive", type: i9$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i15.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i9.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i1$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i8$2.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { kind: "component", type: i8$2.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { kind: "component", type: i11.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DrawPopupComponent, selector: "igo-draw-popup-component", inputs: { confirmFlag: "confirmFlag", labelFlag: "labelFlag", coordinatesMeasureUnit: "coordinatesMeasureUnit", lengthMeasureUnit: "lengthMeasureUnit", areaMeasureUnit: "areaMeasureUnit" }, ngImport: i0, 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"], dependencies: [{ kind: "directive", type: i2$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i5$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i5$1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatLabel, selector: "mat-label" }, { kind: "directive", type: i9$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i15.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i9.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i1$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i8$2.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { kind: "component", type: i8$2.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { kind: "component", type: i11.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DrawPopupComponent, decorators: [{
             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"] }]
         }], ctorParameters: function () { return [{ type: i2.LanguageService }, { type: i1$2.MatDialogRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
@@ -20800,11 +20843,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
 class DrawShorcutsComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DrawShorcutsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DrawShorcutsComponent, selector: "igo-draw-shorcuts", ngImport: i0, 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"], dependencies: [{ kind: "component", type: i4$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i1$2.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DrawShorcutsComponent, selector: "igo-draw-shorcuts", ngImport: i0, 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"], dependencies: [{ kind: "component", type: i4$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i1$2.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DrawShorcutsComponent, decorators: [{
             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"] }]
         }] });
 
 /**
@@ -21276,11 +21319,11 @@ class FeatureDetailsComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FeatureDetailsComponent, deps: [{ token: i1.HttpClient }, { token: i0.ChangeDetectorRef }, { token: i2$4.DomSanitizer }, { token: i2.NetworkService }, { token: i2.MessageService }, { token: i2.ConfigService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FeatureDetailsComponent, selector: "igo-feature-details", inputs: { source: "source", map: "map", toolbox: "toolbox", feature: "feature" }, outputs: { routeEvent: "routeEvent", selectFeature: "selectFeature", htmlDisplayEvent: "htmlDisplayEvent" }, ngImport: i0, 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"], dependencies: [{ kind: "directive", type: i2$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i9$1.ImageErrorDirective, selector: "[igoImageError]", inputs: ["errorImageUrl", "hideError"] }, { kind: "pipe", type: i2$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$2.JsonPipe, name: "json" }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }, { kind: "pipe", type: i9$1.KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: i9$1.SecureImagePipe, name: "secureImage" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FeatureDetailsComponent, selector: "igo-feature-details", inputs: { source: "source", map: "map", toolbox: "toolbox", feature: "feature" }, outputs: { routeEvent: "routeEvent", selectFeature: "selectFeature", htmlDisplayEvent: "htmlDisplayEvent" }, ngImport: i0, 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"], dependencies: [{ kind: "directive", type: i2$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i9$1.ImageErrorDirective, selector: "[igoImageError]", inputs: ["errorImageUrl", "hideError"] }, { kind: "pipe", type: i2$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$2.JsonPipe, name: "json" }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }, { kind: "pipe", type: i9$1.KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: i9$1.SecureImagePipe, name: "secureImage" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FeatureDetailsComponent, decorators: [{
             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"] }]
         }], ctorParameters: function () { return [{ type: i1.HttpClient }, { type: i0.ChangeDetectorRef }, { type: i2$4.DomSanitizer }, { type: i2.NetworkService }, { type: i2.MessageService }, { type: i2.ConfigService }]; }, propDecorators: { source: [{
                 type: Input
             }], map: [{
@@ -21375,11 +21418,11 @@ class FeatureFormComponent {
         };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FeatureFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FeatureFormComponent, selector: "igo-feature-form", inputs: { form: "form", feature: "feature" }, outputs: { submitForm: "submitForm" }, viewQueries: [{ propertyName: "igoForm", first: true, predicate: ["igoForm"], descendants: true, static: true }], ngImport: i0, 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"], dependencies: [{ kind: "component", type: i9$1.FormComponent, selector: "igo-form", inputs: ["form", "formData", "autocomplete"], outputs: ["submitForm"] }, { kind: "pipe", type: i2$2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FeatureFormComponent, selector: "igo-feature-form", inputs: { form: "form", feature: "feature" }, outputs: { submitForm: "submitForm" }, viewQueries: [{ propertyName: "igoForm", first: true, predicate: ["igoForm"], descendants: true, static: true }], ngImport: i0, 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"], dependencies: [{ kind: "component", type: i9$1.FormComponent, selector: "igo-form", inputs: ["form", "formData", "autocomplete"], outputs: ["submitForm"] }, { kind: "pipe", type: i2$2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FeatureFormComponent, decorators: [{
             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"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { form: [{
                 type: Input
             }], feature: [{
@@ -22270,11 +22313,11 @@ class StyleModalDrawingComponent {
         this.dialogRef.disableClose = false;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: StyleModalDrawingComponent, deps: [{ token: i1$2.MatDialogRef }, { token: i2$1.UntypedFormBuilder }, { token: DrawStyleService }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: StyleModalDrawingComponent, selector: "igo-style-modal-drawing", inputs: { confirmFlag: "confirmFlag" }, ngImport: i0, template: "<h2 mat-dialog-title>\n  {{ 'igo.geo.style.styleModal' | translate }}\n</h2>\n<div\n  class=\"edition-drawing\"\n  mat-dialog-content\n  [hidden]=\"data.features.length === 0\"\n>\n  <form class=\"igo-form\" [formGroup]=\"form\">\n    <div class=\"color-picker\">\n      <ng-container *ngIf=\"linestringOnly !== true\">\n        <span>\n          <mat-icon class=\"stroke-palette-icon\" svgIcon=\"square\"></mat-icon>\n          {{ 'igo.geo.style.fill' | translate }}\n        </span>\n\n        <igo-color-picker-form-field\n          formControlName=\"fill\"\n        ></igo-color-picker-form-field>\n      </ng-container>\n\n      <span>\n        <mat-icon class=\"stroke-palette-icon\" svgIcon=\"square-outline\">\n        </mat-icon>\n        {{ 'igo.geo.style.stroke' | translate }}\n      </span>\n\n      <igo-color-picker-form-field\n        formControlName=\"stroke\"\n      ></igo-color-picker-form-field>\n    </div>\n\n    <div class=\"igo-input-container\">\n      <mat-form-field class=\"igo-form-input-box\" subscriptSizing=\"dynamic\">\n        <mat-label>{{ 'igo.geo.style.fontSize' | translate }}</mat-label>\n        <input\n          matInput\n          #testFontSize\n          type=\"number\"\n          placeholder=\"10\"\n          min=\"10\"\n          onkeydown=\"return event.keyCode !== 69\"\n          [value]=\"getFeatureFontSize()\"\n          (input)=\"styleModalData.fontSize = $event.target.value\"\n        />\n        <span matTextSuffix>px</span>\n      </mat-form-field>\n      <mat-form-field class=\"igo-form-input-box\" subscriptSizing=\"dynamic\">\n        <mat-label>{{ 'igo.geo.style.fontStyle' | translate }}</mat-label>\n        <mat-select\n          #testFontStyle\n          [value]=\"getFeatureFontStyle()\"\n          (selectionChange)=\"styleModalData.fontStyle = $event.value\"\n        >\n          <mat-option\n            *ngFor=\"let fontSelect of allFontStyles\"\n            [value]=\"fontSelect\"\n          >\n            {{ fontSelect }}\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field class=\"igo-form-input-box\" subscriptSizing=\"dynamic\">\n        <mat-label>{{ 'igo.geo.style.offsetX' | translate }}</mat-label>\n        <input\n          matInput\n          #offsetXInput\n          type=\"number\"\n          onkeydown=\"return event.keyCode !== 69\"\n          [value]=\"getFeatureOffsetX()\"\n          (input)=\"styleModalData.offsetX = $event.target.value\"\n        />\n      </mat-form-field>\n      <mat-form-field class=\"igo-form-input-box\" subscriptSizing=\"dynamic\">\n        <mat-label>{{ 'igo.geo.style.offsetY' | translate }}</mat-label>\n        <input\n          matInput\n          #offsetYInput\n          type=\"number\"\n          onkeydown=\"return event.keyCode !== 69\"\n          [value]=\"getFeatureOffsetY()\"\n          (input)=\"styleModalData.offsetY = $event.target.value\"\n        />\n      </mat-form-field>\n    </div>\n  </form>\n</div>\n<div mat-dialog-actions>\n  <button mat-raised-button (click)=\"cancelDrawing()\">\n    {{ 'igo.geo.style.cancel' | translate }}\n  </button>\n  <button mat-raised-button color=\"primary\" (click)=\"confirm()\">OK</button>\n</div>\n", styles: [":host h2{margin:0 0 1px}:host form{padding-top:16px}:host .fill-field,:host .stroke-field{width:140px}:host .color-picker{display:grid;grid-template-columns:auto 1fr;align-items:center;grid-gap:16px;margin-bottom:16px}:host .color-picker span{display:flex;align-items:center}:host .color-picker span mat-icon{margin-right:8px}:host .box{width:25px;height:25px}:host .igo-input-container{display:grid;grid-template-columns:1fr 1fr;grid-gap:16px}:host .igo-form-input-box{width:150px}:host button{margin-right:5px}\n"], dependencies: [{ kind: "directive", type: i2$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i1$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i9$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i15.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i9.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i9$1.ColorPickerFormFieldComponent, selector: "igo-color-picker-form-field", inputs: ["outputFormat"], outputs: ["colorChange"] }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: StyleModalDrawingComponent, selector: "igo-style-modal-drawing", inputs: { confirmFlag: "confirmFlag" }, ngImport: i0, template: "<h2 mat-dialog-title>\r\n  {{ 'igo.geo.style.styleModal' | translate }}\r\n</h2>\r\n<div\r\n  class=\"edition-drawing\"\r\n  mat-dialog-content\r\n  [hidden]=\"data.features.length === 0\"\r\n>\r\n  <form class=\"igo-form\" [formGroup]=\"form\">\r\n    <div class=\"color-picker\">\r\n      <ng-container *ngIf=\"linestringOnly !== true\">\r\n        <span>\r\n          <mat-icon class=\"stroke-palette-icon\" svgIcon=\"square\"></mat-icon>\r\n          {{ 'igo.geo.style.fill' | translate }}\r\n        </span>\r\n\r\n        <igo-color-picker-form-field\r\n          formControlName=\"fill\"\r\n        ></igo-color-picker-form-field>\r\n      </ng-container>\r\n\r\n      <span>\r\n        <mat-icon class=\"stroke-palette-icon\" svgIcon=\"square-outline\">\r\n        </mat-icon>\r\n        {{ 'igo.geo.style.stroke' | translate }}\r\n      </span>\r\n\r\n      <igo-color-picker-form-field\r\n        formControlName=\"stroke\"\r\n      ></igo-color-picker-form-field>\r\n    </div>\r\n\r\n    <div class=\"igo-input-container\">\r\n      <mat-form-field class=\"igo-form-input-box\" subscriptSizing=\"dynamic\">\r\n        <mat-label>{{ 'igo.geo.style.fontSize' | translate }}</mat-label>\r\n        <input\r\n          matInput\r\n          #testFontSize\r\n          type=\"number\"\r\n          placeholder=\"10\"\r\n          min=\"10\"\r\n          onkeydown=\"return event.keyCode !== 69\"\r\n          [value]=\"getFeatureFontSize()\"\r\n          (input)=\"styleModalData.fontSize = $event.target.value\"\r\n        />\r\n        <span matTextSuffix>px</span>\r\n      </mat-form-field>\r\n      <mat-form-field class=\"igo-form-input-box\" subscriptSizing=\"dynamic\">\r\n        <mat-label>{{ 'igo.geo.style.fontStyle' | translate }}</mat-label>\r\n        <mat-select\r\n          #testFontStyle\r\n          [value]=\"getFeatureFontStyle()\"\r\n          (selectionChange)=\"styleModalData.fontStyle = $event.value\"\r\n        >\r\n          <mat-option\r\n            *ngFor=\"let fontSelect of allFontStyles\"\r\n            [value]=\"fontSelect\"\r\n          >\r\n            {{ fontSelect }}\r\n          </mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n      <mat-form-field class=\"igo-form-input-box\" subscriptSizing=\"dynamic\">\r\n        <mat-label>{{ 'igo.geo.style.offsetX' | translate }}</mat-label>\r\n        <input\r\n          matInput\r\n          #offsetXInput\r\n          type=\"number\"\r\n          onkeydown=\"return event.keyCode !== 69\"\r\n          [value]=\"getFeatureOffsetX()\"\r\n          (input)=\"styleModalData.offsetX = $event.target.value\"\r\n        />\r\n      </mat-form-field>\r\n      <mat-form-field class=\"igo-form-input-box\" subscriptSizing=\"dynamic\">\r\n        <mat-label>{{ 'igo.geo.style.offsetY' | translate }}</mat-label>\r\n        <input\r\n          matInput\r\n          #offsetYInput\r\n          type=\"number\"\r\n          onkeydown=\"return event.keyCode !== 69\"\r\n          [value]=\"getFeatureOffsetY()\"\r\n          (input)=\"styleModalData.offsetY = $event.target.value\"\r\n        />\r\n      </mat-form-field>\r\n    </div>\r\n  </form>\r\n</div>\r\n<div mat-dialog-actions>\r\n  <button mat-raised-button (click)=\"cancelDrawing()\">\r\n    {{ 'igo.geo.style.cancel' | translate }}\r\n  </button>\r\n  <button mat-raised-button color=\"primary\" (click)=\"confirm()\">OK</button>\r\n</div>\r\n", styles: [":host h2{margin:0 0 1px}:host form{padding-top:16px}:host .fill-field,:host .stroke-field{width:140px}:host .color-picker{display:grid;grid-template-columns:auto 1fr;align-items:center;grid-gap:16px;margin-bottom:16px}:host .color-picker span{display:flex;align-items:center}:host .color-picker span mat-icon{margin-right:8px}:host .box{width:25px;height:25px}:host .igo-input-container{display:grid;grid-template-columns:1fr 1fr;grid-gap:16px}:host .igo-form-input-box{width:150px}:host button{margin-right:5px}\n"], dependencies: [{ kind: "directive", type: i2$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i1$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i9$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i15.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i9.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i9$1.ColorPickerFormFieldComponent, selector: "igo-color-picker-form-field", inputs: ["outputFormat"], outputs: ["colorChange"] }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: StyleModalDrawingComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'igo-style-modal-drawing', template: "<h2 mat-dialog-title>\n  {{ 'igo.geo.style.styleModal' | translate }}\n</h2>\n<div\n  class=\"edition-drawing\"\n  mat-dialog-content\n  [hidden]=\"data.features.length === 0\"\n>\n  <form class=\"igo-form\" [formGroup]=\"form\">\n    <div class=\"color-picker\">\n      <ng-container *ngIf=\"linestringOnly !== true\">\n        <span>\n          <mat-icon class=\"stroke-palette-icon\" svgIcon=\"square\"></mat-icon>\n          {{ 'igo.geo.style.fill' | translate }}\n        </span>\n\n        <igo-color-picker-form-field\n          formControlName=\"fill\"\n        ></igo-color-picker-form-field>\n      </ng-container>\n\n      <span>\n        <mat-icon class=\"stroke-palette-icon\" svgIcon=\"square-outline\">\n        </mat-icon>\n        {{ 'igo.geo.style.stroke' | translate }}\n      </span>\n\n      <igo-color-picker-form-field\n        formControlName=\"stroke\"\n      ></igo-color-picker-form-field>\n    </div>\n\n    <div class=\"igo-input-container\">\n      <mat-form-field class=\"igo-form-input-box\" subscriptSizing=\"dynamic\">\n        <mat-label>{{ 'igo.geo.style.fontSize' | translate }}</mat-label>\n        <input\n          matInput\n          #testFontSize\n          type=\"number\"\n          placeholder=\"10\"\n          min=\"10\"\n          onkeydown=\"return event.keyCode !== 69\"\n          [value]=\"getFeatureFontSize()\"\n          (input)=\"styleModalData.fontSize = $event.target.value\"\n        />\n        <span matTextSuffix>px</span>\n      </mat-form-field>\n      <mat-form-field class=\"igo-form-input-box\" subscriptSizing=\"dynamic\">\n        <mat-label>{{ 'igo.geo.style.fontStyle' | translate }}</mat-label>\n        <mat-select\n          #testFontStyle\n          [value]=\"getFeatureFontStyle()\"\n          (selectionChange)=\"styleModalData.fontStyle = $event.value\"\n        >\n          <mat-option\n            *ngFor=\"let fontSelect of allFontStyles\"\n            [value]=\"fontSelect\"\n          >\n            {{ fontSelect }}\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field class=\"igo-form-input-box\" subscriptSizing=\"dynamic\">\n        <mat-label>{{ 'igo.geo.style.offsetX' | translate }}</mat-label>\n        <input\n          matInput\n          #offsetXInput\n          type=\"number\"\n          onkeydown=\"return event.keyCode !== 69\"\n          [value]=\"getFeatureOffsetX()\"\n          (input)=\"styleModalData.offsetX = $event.target.value\"\n        />\n      </mat-form-field>\n      <mat-form-field class=\"igo-form-input-box\" subscriptSizing=\"dynamic\">\n        <mat-label>{{ 'igo.geo.style.offsetY' | translate }}</mat-label>\n        <input\n          matInput\n          #offsetYInput\n          type=\"number\"\n          onkeydown=\"return event.keyCode !== 69\"\n          [value]=\"getFeatureOffsetY()\"\n          (input)=\"styleModalData.offsetY = $event.target.value\"\n        />\n      </mat-form-field>\n    </div>\n  </form>\n</div>\n<div mat-dialog-actions>\n  <button mat-raised-button (click)=\"cancelDrawing()\">\n    {{ 'igo.geo.style.cancel' | translate }}\n  </button>\n  <button mat-raised-button color=\"primary\" (click)=\"confirm()\">OK</button>\n</div>\n", styles: [":host h2{margin:0 0 1px}:host form{padding-top:16px}:host .fill-field,:host .stroke-field{width:140px}:host .color-picker{display:grid;grid-template-columns:auto 1fr;align-items:center;grid-gap:16px;margin-bottom:16px}:host .color-picker span{display:flex;align-items:center}:host .color-picker span mat-icon{margin-right:8px}:host .box{width:25px;height:25px}:host .igo-input-container{display:grid;grid-template-columns:1fr 1fr;grid-gap:16px}:host .igo-form-input-box{width:150px}:host button{margin-right:5px}\n"] }]
+            args: [{ selector: 'igo-style-modal-drawing', template: "<h2 mat-dialog-title>\r\n  {{ 'igo.geo.style.styleModal' | translate }}\r\n</h2>\r\n<div\r\n  class=\"edition-drawing\"\r\n  mat-dialog-content\r\n  [hidden]=\"data.features.length === 0\"\r\n>\r\n  <form class=\"igo-form\" [formGroup]=\"form\">\r\n    <div class=\"color-picker\">\r\n      <ng-container *ngIf=\"linestringOnly !== true\">\r\n        <span>\r\n          <mat-icon class=\"stroke-palette-icon\" svgIcon=\"square\"></mat-icon>\r\n          {{ 'igo.geo.style.fill' | translate }}\r\n        </span>\r\n\r\n        <igo-color-picker-form-field\r\n          formControlName=\"fill\"\r\n        ></igo-color-picker-form-field>\r\n      </ng-container>\r\n\r\n      <span>\r\n        <mat-icon class=\"stroke-palette-icon\" svgIcon=\"square-outline\">\r\n        </mat-icon>\r\n        {{ 'igo.geo.style.stroke' | translate }}\r\n      </span>\r\n\r\n      <igo-color-picker-form-field\r\n        formControlName=\"stroke\"\r\n      ></igo-color-picker-form-field>\r\n    </div>\r\n\r\n    <div class=\"igo-input-container\">\r\n      <mat-form-field class=\"igo-form-input-box\" subscriptSizing=\"dynamic\">\r\n        <mat-label>{{ 'igo.geo.style.fontSize' | translate }}</mat-label>\r\n        <input\r\n          matInput\r\n          #testFontSize\r\n          type=\"number\"\r\n          placeholder=\"10\"\r\n          min=\"10\"\r\n          onkeydown=\"return event.keyCode !== 69\"\r\n          [value]=\"getFeatureFontSize()\"\r\n          (input)=\"styleModalData.fontSize = $event.target.value\"\r\n        />\r\n        <span matTextSuffix>px</span>\r\n      </mat-form-field>\r\n      <mat-form-field class=\"igo-form-input-box\" subscriptSizing=\"dynamic\">\r\n        <mat-label>{{ 'igo.geo.style.fontStyle' | translate }}</mat-label>\r\n        <mat-select\r\n          #testFontStyle\r\n          [value]=\"getFeatureFontStyle()\"\r\n          (selectionChange)=\"styleModalData.fontStyle = $event.value\"\r\n        >\r\n          <mat-option\r\n            *ngFor=\"let fontSelect of allFontStyles\"\r\n            [value]=\"fontSelect\"\r\n          >\r\n            {{ fontSelect }}\r\n          </mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n      <mat-form-field class=\"igo-form-input-box\" subscriptSizing=\"dynamic\">\r\n        <mat-label>{{ 'igo.geo.style.offsetX' | translate }}</mat-label>\r\n        <input\r\n          matInput\r\n          #offsetXInput\r\n          type=\"number\"\r\n          onkeydown=\"return event.keyCode !== 69\"\r\n          [value]=\"getFeatureOffsetX()\"\r\n          (input)=\"styleModalData.offsetX = $event.target.value\"\r\n        />\r\n      </mat-form-field>\r\n      <mat-form-field class=\"igo-form-input-box\" subscriptSizing=\"dynamic\">\r\n        <mat-label>{{ 'igo.geo.style.offsetY' | translate }}</mat-label>\r\n        <input\r\n          matInput\r\n          #offsetYInput\r\n          type=\"number\"\r\n          onkeydown=\"return event.keyCode !== 69\"\r\n          [value]=\"getFeatureOffsetY()\"\r\n          (input)=\"styleModalData.offsetY = $event.target.value\"\r\n        />\r\n      </mat-form-field>\r\n    </div>\r\n  </form>\r\n</div>\r\n<div mat-dialog-actions>\r\n  <button mat-raised-button (click)=\"cancelDrawing()\">\r\n    {{ 'igo.geo.style.cancel' | translate }}\r\n  </button>\r\n  <button mat-raised-button color=\"primary\" (click)=\"confirm()\">OK</button>\r\n</div>\r\n", styles: [":host h2{margin:0 0 1px}:host form{padding-top:16px}:host .fill-field,:host .stroke-field{width:140px}:host .color-picker{display:grid;grid-template-columns:auto 1fr;align-items:center;grid-gap:16px;margin-bottom:16px}:host .color-picker span{display:flex;align-items:center}:host .color-picker span mat-icon{margin-right:8px}:host .box{width:25px;height:25px}:host .igo-input-container{display:grid;grid-template-columns:1fr 1fr;grid-gap:16px}:host .igo-form-input-box{width:150px}:host button{margin-right:5px}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$2.MatDialogRef }, { type: i2$1.UntypedFormBuilder }, { type: DrawStyleService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
@@ -23299,7 +23342,7 @@ class DrawComponent {
         return Number(length / (2 * Math.PI));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DrawComponent, deps: [{ token: i2.LanguageService }, { token: i2$1.UntypedFormBuilder }, { token: DrawStyleService }, { token: i1$2.MatDialog }, { token: DrawIconService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DrawComponent, selector: "igo-draw", inputs: { map: "map", stores: "stores", drawControls: "drawControls", activeDrawingLayer: "activeDrawingLayer" }, outputs: { activeLayerChange: "activeLayerChange", drawControlsEvent: "drawControlsEvent", layersIDEvent: "layersIDEvent", fillColor: "fillColor", strokeColor: "strokeColor", strokeWidth: "strokeWidth", fontSize: "fontSize", fontStyle: "fontStyle" }, viewQueries: [{ propertyName: "select", first: true, predicate: ["selectedLayer"], descendants: true }], ngImport: i0, 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      <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\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{flex:2}:host .unit-field{flex:1;margin-left:8px}: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"], dependencies: [{ kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i5$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i5$1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: i9$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatLabel, selector: "mat-label" }, { kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: i9$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i15.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "directive", type: i15.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i9.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i7.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matSlideToggle"] }, { kind: "component", type: i9$1.EntityTableComponent, selector: "igo-entity-table", inputs: ["store", "paginator", "template", "scrollBehavior", "sortNullsFirst", "withPaginator", "paginatorOptions"], outputs: ["entityClick", "entitySelectChange", "entitySortChange"] }, { kind: "pipe", type: i2$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }], animations: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DrawComponent, selector: "igo-draw", inputs: { map: "map", stores: "stores", drawControls: "drawControls", activeDrawingLayer: "activeDrawingLayer" }, outputs: { activeLayerChange: "activeLayerChange", drawControlsEvent: "drawControlsEvent", layersIDEvent: "layersIDEvent", fillColor: "fillColor", strokeColor: "strokeColor", strokeWidth: "strokeWidth", fontSize: "fontSize", fontStyle: "fontStyle" }, viewQueries: [{ propertyName: "select", first: true, predicate: ["selectedLayer"], descendants: true }], ngImport: i0, 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      <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\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{flex:2}:host .unit-field{flex:1;margin-left:8px}: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"], dependencies: [{ kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i5$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i5$1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: i9$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatLabel, selector: "mat-label" }, { kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: i9$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i15.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "directive", type: i15.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i9.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i7.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matSlideToggle"] }, { kind: "component", type: i9$1.EntityTableComponent, selector: "igo-entity-table", inputs: ["store", "paginator", "template", "scrollBehavior", "sortNullsFirst", "withPaginator", "paginatorOptions"], outputs: ["entityClick", "entitySelectChange", "entitySortChange"] }, { kind: "pipe", type: i2$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }], animations: [
             trigger('openClose', [
                 state('open', style({
                     opacity: 1
@@ -23325,7 +23368,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             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      <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\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{flex:2}:host .unit-field{flex:1;margin-left:8px}: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      <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\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{flex:2}:host .unit-field{flex:1;margin-left:8px}: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"] }]
         }], ctorParameters: function () { return [{ type: i2.LanguageService }, { type: i2$1.UntypedFormBuilder }, { type: DrawStyleService }, { type: i1$2.MatDialog }, { type: DrawIconService }]; }, propDecorators: { map: [{
                 type: Input
             }], stores: [{
@@ -24332,11 +24375,11 @@ class MeasurerDialogComponent {
         this.dialogRef.close();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MeasurerDialogComponent, deps: [{ token: i1$2.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MeasurerDialogComponent, selector: "igo-measurer-dialog", ngImport: i0, 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"], dependencies: [{ kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }, { kind: "pipe", type: MeasureFormatPipe, name: "measureFormat" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MeasurerDialogComponent, selector: "igo-measurer-dialog", ngImport: i0, 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"], dependencies: [{ kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }, { kind: "pipe", type: MeasureFormatPipe, name: "measureFormat" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MeasurerDialogComponent, decorators: [{
             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"] }]
         }], ctorParameters: function () { return [{ type: i1$2.MatDialogRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
@@ -24441,11 +24484,11 @@ class MeasurerItemComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MeasurerItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MeasurerItemComponent, selector: "igo-measurer-item", inputs: { measureType: "measureType", measureUnit: "measureUnit", measure: "measure", auto: "auto", placeholder: "placeholder" }, outputs: { measureUnitChange: "measureUnitChange" }, ngImport: i0, 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;flex:2}:host .unit-field{margin-left:8px;flex:1}:host ::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{display:none}\n"], dependencies: [{ kind: "directive", type: i2$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatLabel, selector: "mat-label" }, { kind: "directive", type: i9$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i15.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i9.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "pipe", type: i2$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }, { kind: "pipe", type: MeasureFormatPipe, name: "measureFormat" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MeasurerItemComponent, selector: "igo-measurer-item", inputs: { measureType: "measureType", measureUnit: "measureUnit", measure: "measure", auto: "auto", placeholder: "placeholder" }, outputs: { measureUnitChange: "measureUnitChange" }, ngImport: i0, 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;flex:2}:host .unit-field{margin-left:8px;flex:1}:host ::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{display:none}\n"], dependencies: [{ kind: "directive", type: i2$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatLabel, selector: "mat-label" }, { kind: "directive", type: i9$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i15.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i9.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "pipe", type: i2$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }, { kind: "pipe", type: MeasureFormatPipe, name: "measureFormat" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MeasurerItemComponent, decorators: [{
             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;flex:2}:host .unit-field{margin-left:8px;flex:1}: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;flex:2}:host .unit-field{margin-left:8px;flex:1}:host ::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{display:none}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { measureType: [{
                 type: Input
             }], measureUnit: [{
@@ -25361,11 +25404,11 @@ class MeasurerComponent {
         this.activeAreaUnit = areaUnit ? areaUnit : this.activeAreaUnit;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MeasurerComponent, deps: [{ token: i2.LanguageService }, { token: i1$2.MatDialog }, { token: i2.StorageService }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MeasurerComponent, selector: "igo-measurer", inputs: { map: "map", store: "store", activeMeasureType: "activeMeasureType", minSegmentLength: "minSegmentLength" }, viewQueries: [{ propertyName: "table", first: true, predicate: ["table"], descendants: true, static: true }], ngImport: i0, 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]=\"activeLengthUnit\"\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]=\"activeAreaUnit\"\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}::ng-deep .igo-map-tooltip-hidden,.igo-map-tooltip-measure-by-display{display:none}\n"], dependencies: [{ kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i5$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i5$1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i7.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matSlideToggle"] }, { kind: "component", type: i9$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i9$1.EntityTableComponent, selector: "igo-entity-table", inputs: ["store", "paginator", "template", "scrollBehavior", "sortNullsFirst", "withPaginator", "paginatorOptions"], outputs: ["entityClick", "entitySelectChange", "entitySortChange"] }, { kind: "component", type: MeasurerItemComponent, selector: "igo-measurer-item", inputs: ["measureType", "measureUnit", "measure", "auto", "placeholder"], outputs: ["measureUnitChange"] }, { kind: "pipe", type: i2$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MeasurerComponent, selector: "igo-measurer", inputs: { map: "map", store: "store", activeMeasureType: "activeMeasureType", minSegmentLength: "minSegmentLength" }, viewQueries: [{ propertyName: "table", first: true, predicate: ["table"], descendants: true, static: true }], ngImport: i0, 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]=\"activeLengthUnit\"\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]=\"activeAreaUnit\"\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}::ng-deep .igo-map-tooltip-hidden,.igo-map-tooltip-measure-by-display{display:none}\n"], dependencies: [{ kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i5$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i5$1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i7.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matSlideToggle"] }, { kind: "component", type: i9$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i9$1.EntityTableComponent, selector: "igo-entity-table", inputs: ["store", "paginator", "template", "scrollBehavior", "sortNullsFirst", "withPaginator", "paginatorOptions"], outputs: ["entityClick", "entitySelectChange", "entitySortChange"] }, { kind: "component", type: MeasurerItemComponent, selector: "igo-measurer-item", inputs: ["measureType", "measureUnit", "measure", "auto", "placeholder"], outputs: ["measureUnitChange"] }, { kind: "pipe", type: i2$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MeasurerComponent, decorators: [{
             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]=\"activeLengthUnit\"\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]=\"activeAreaUnit\"\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}::ng-deep .igo-map-tooltip-hidden,.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]=\"activeLengthUnit\"\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]=\"activeAreaUnit\"\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}::ng-deep .igo-map-tooltip-hidden,.igo-map-tooltip-measure-by-display{display:none}\n"] }]
         }], ctorParameters: function () { return [{ type: i2.LanguageService }, { type: i1$2.MatDialog }, { type: i2.StorageService }, { type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
@@ -25892,11 +25935,11 @@ class GeometryFormFieldInputComponent {
         return guideStyle;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GeometryFormFieldInputComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i2$1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GeometryFormFieldInputComponent, selector: "igo-geometry-form-field-input", inputs: { map: "map", geometryType: "geometryType", drawGuide: "drawGuide", measure: "measure", drawControlIsActive: "drawControlIsActive", freehandDrawIsActive: "freehandDrawIsActive", predefinedRadius: "predefinedRadius", controlOptions: "controlOptions", drawStyle: "drawStyle", overlayStyle: "overlayStyle", value: "value", radius: "radius" }, ngImport: i0, template: "<ng-template></ng-template>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GeometryFormFieldInputComponent, selector: "igo-geometry-form-field-input", inputs: { map: "map", geometryType: "geometryType", drawGuide: "drawGuide", measure: "measure", drawControlIsActive: "drawControlIsActive", freehandDrawIsActive: "freehandDrawIsActive", predefinedRadius: "predefinedRadius", controlOptions: "controlOptions", drawStyle: "drawStyle", overlayStyle: "overlayStyle", value: "value", radius: "radius" }, ngImport: i0, template: "<ng-template></ng-template>\r\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GeometryFormFieldInputComponent, decorators: [{
             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" }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i2$1.NgControl, decorators: [{
                     type: Optional
                 }, {
@@ -26030,7 +26073,7 @@ let GeometryFormFieldComponent = class GeometryFormFieldComponent {
         this.value$$.unsubscribe();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GeometryFormFieldComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GeometryFormFieldComponent, selector: "igo-geometry-form-field", inputs: { formControl: "formControl", map: "map", geometryType: "geometryType", geometryTypeField: "geometryTypeField", geometryTypes: "geometryTypes", drawGuideField: "drawGuideField", drawGuide: "drawGuide", drawGuidePlaceholder: "drawGuidePlaceholder", measure: "measure", controlOptions: "controlOptions", drawStyle: "drawStyle", overlayStyle: "overlayStyle" }, ngImport: i0, 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"], dependencies: [{ kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i8.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i9$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i5$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i5$1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: GeometryFormFieldInputComponent, selector: "igo-geometry-form-field-input", inputs: ["map", "geometryType", "drawGuide", "measure", "drawControlIsActive", "freehandDrawIsActive", "predefinedRadius", "controlOptions", "drawStyle", "overlayStyle", "value", "radius"] }, { kind: "pipe", type: i2$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GeometryFormFieldComponent, selector: "igo-geometry-form-field", inputs: { formControl: "formControl", map: "map", geometryType: "geometryType", geometryTypeField: "geometryTypeField", geometryTypes: "geometryTypes", drawGuideField: "drawGuideField", drawGuide: "drawGuide", drawGuidePlaceholder: "drawGuidePlaceholder", measure: "measure", controlOptions: "controlOptions", drawStyle: "drawStyle", overlayStyle: "overlayStyle" }, ngImport: i0, 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"], dependencies: [{ kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i8.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i9$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i5$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i5$1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: GeometryFormFieldInputComponent, selector: "igo-geometry-form-field-input", inputs: ["map", "geometryType", "drawGuide", "measure", "drawControlIsActive", "freehandDrawIsActive", "predefinedRadius", "controlOptions", "drawStyle", "overlayStyle", "value", "radius"] }, { kind: "pipe", type: i2$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 };
 GeometryFormFieldComponent = __decorate([
     IgoFormFieldComponent('geometry'),
@@ -26038,7 +26081,7 @@ GeometryFormFieldComponent = __decorate([
 ], GeometryFormFieldComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GeometryFormFieldComponent, decorators: [{
             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"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { formControl: [{
                 type: Input
             }], map: [{
@@ -26134,22 +26177,22 @@ class WktService {
     extentToWkt(epsgTO, extent, extentProj) {
         let currentExtent = olproj.transformExtent(extent, extentProj, epsgTO);
         currentExtent = this.roundCoordinateArray(currentExtent, epsgTO, 0);
-        const wktPoly = `POLYGON((
-      ${extent[0]} ${extent[1]},
-      ${extent[0]} ${extent[3]},
-      ${extent[2]} ${extent[3]},
-      ${extent[2]} ${extent[1]},
+        const wktPoly = `POLYGON((
+      ${extent[0]} ${extent[1]},
+      ${extent[0]} ${extent[3]},
+      ${extent[2]} ${extent[3]},
+      ${extent[2]} ${extent[1]},
       ${extent[0]} ${extent[1]}))`;
-        const wktLine = `LINESTRING(
-      ${extent[0]} ${extent[1]},
-      ${extent[0]} ${extent[3]},
-      ${extent[2]} ${extent[3]},
-      ${extent[2]} ${extent[1]},
+        const wktLine = `LINESTRING(
+      ${extent[0]} ${extent[1]},
+      ${extent[0]} ${extent[3]},
+      ${extent[2]} ${extent[3]},
+      ${extent[2]} ${extent[1]},
       ${extent[0]} ${extent[1]})`;
-        const wktMultiPoints = `MULTIPOINT(
-        ${extent[0]} ${extent[1]},
-        ${extent[0]} ${extent[3]},
-        ${extent[2]} ${extent[3]},
+        const wktMultiPoints = `MULTIPOINT(
+        ${extent[0]} ${extent[1]},
+        ${extent[0]} ${extent[3]},
+        ${extent[2]} ${extent[3]},
         ${extent[2]} ${extent[1]})`;
         return {
             wktPoly,
@@ -26594,11 +26637,11 @@ class OgcFilterTimeSliderComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: OgcFilterTimeSliderComponent, deps: [{ token: OGCFilterTimeService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: OgcFilterTimeSliderComponent, selector: "igo-ogc-filter-time-slider", inputs: { currentFilter: "currentFilter", begin: "begin", max: "max", datasource: "datasource" }, outputs: { changeProperty: "changeProperty" }, viewQueries: [{ propertyName: "slider", first: true, predicate: MatSlider, descendants: true }], ngImport: i0, 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"], dependencies: [{ kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i8$1.MatSlider, selector: "mat-slider", inputs: ["color", "disableRipple", "disabled", "discrete", "showTickMarks", "min", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i8$1.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: OgcFilterTimeSliderComponent, selector: "igo-ogc-filter-time-slider", inputs: { currentFilter: "currentFilter", begin: "begin", max: "max", datasource: "datasource" }, outputs: { changeProperty: "changeProperty" }, viewQueries: [{ propertyName: "slider", first: true, predicate: MatSlider, descendants: true }], ngImport: i0, 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"], dependencies: [{ kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i8$1.MatSlider, selector: "mat-slider", inputs: ["color", "disableRipple", "disabled", "discrete", "showTickMarks", "min", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i8$1.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: OgcFilterTimeSliderComponent, decorators: [{
             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"] }]
         }], ctorParameters: function () { return [{ type: OGCFilterTimeService }]; }, propDecorators: { currentFilter: [{
                 type: Input
             }], begin: [{
@@ -27209,11 +27252,11 @@ class OgcFilterTimeComponent {
         return date instanceof Date && !isNaN(date.getTime());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: OgcFilterTimeComponent, deps: [{ token: OGCFilterTimeService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: OgcFilterTimeComponent, selector: "igo-ogc-filter-time", inputs: { datasource: "datasource", currentFilter: "currentFilter" }, outputs: { changeProperty: "changeProperty" }, viewQueries: [{ propertyName: "endDatepickerTime", first: true, predicate: ["endDatepickerTime"], descendants: true }, { propertyName: "beginDatepickerTime", first: true, predicate: ["beginDatepickerTime"], descendants: true }, { propertyName: "beginTime", first: true, predicate: ["beginTime"], descendants: true }, { propertyName: "endTime", first: true, predicate: ["endTime"], descendants: true }], ngImport: i0, 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"], dependencies: [{ kind: "directive", type: i2$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i9.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i7.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matSlideToggle"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i9$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i15.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i12.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i12.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i12.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: OgcFilterTimeSliderComponent, selector: "igo-ogc-filter-time-slider", inputs: ["currentFilter", "begin", "max", "datasource"], outputs: ["changeProperty"] }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: OgcFilterTimeComponent, selector: "igo-ogc-filter-time", inputs: { datasource: "datasource", currentFilter: "currentFilter" }, outputs: { changeProperty: "changeProperty" }, viewQueries: [{ propertyName: "endDatepickerTime", first: true, predicate: ["endDatepickerTime"], descendants: true }, { propertyName: "beginDatepickerTime", first: true, predicate: ["beginDatepickerTime"], descendants: true }, { propertyName: "beginTime", first: true, predicate: ["beginTime"], descendants: true }, { propertyName: "endTime", first: true, predicate: ["endTime"], descendants: true }], ngImport: i0, 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"], dependencies: [{ kind: "directive", type: i2$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i9.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i7.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matSlideToggle"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i9$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i15.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i12.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i12.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i12.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: OgcFilterTimeSliderComponent, selector: "igo-ogc-filter-time-slider", inputs: ["currentFilter", "begin", "max", "datasource"], outputs: ["changeProperty"] }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: OgcFilterTimeComponent, decorators: [{
             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"] }]
         }], ctorParameters: function () { return [{ type: OGCFilterTimeService }]; }, propDecorators: { datasource: [{
                 type: Input
             }], currentFilter: [{
@@ -27494,11 +27537,11 @@ class OgcFilterFormComponent {
             this.ogcFilterOperator.During.toLowerCase());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: OgcFilterFormComponent, deps: [{ token: WktService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: OgcFilterFormComponent, selector: "igo-ogc-filter-form", inputs: { refreshFilters: "refreshFilters", datasource: "datasource", map: "map", currentFilter: "currentFilter", floatLabel: "floatLabel" }, ngImport: i0, 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"], dependencies: [{ kind: "directive", type: i2$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6$2.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple", "hideSingleSelectionIndicator"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i9.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i6$2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i11.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i9$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i15.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: OgcFilterTimeComponent, selector: "igo-ogc-filter-time", inputs: ["datasource", "currentFilter"], outputs: ["changeProperty"] }, { kind: "pipe", type: i2$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }, { kind: "pipe", type: i9$1.KeyValuePipe, name: "keyvalue" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: OgcFilterFormComponent, selector: "igo-ogc-filter-form", inputs: { refreshFilters: "refreshFilters", datasource: "datasource", map: "map", currentFilter: "currentFilter", floatLabel: "floatLabel" }, ngImport: i0, 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"], dependencies: [{ kind: "directive", type: i2$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6$2.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple", "hideSingleSelectionIndicator"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i9.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i6$2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i11.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i9$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i15.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: OgcFilterTimeComponent, selector: "igo-ogc-filter-time", inputs: ["datasource", "currentFilter"], outputs: ["changeProperty"] }, { kind: "pipe", type: i2$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }, { kind: "pipe", type: i9$1.KeyValuePipe, name: "keyvalue" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: OgcFilterFormComponent, decorators: [{
             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"] }]
         }], ctorParameters: function () { return [{ type: WktService }]; }, propDecorators: { refreshFilters: [{
                 type: Input
             }], datasource: [{
@@ -28215,11 +28258,11 @@ class OgcFilterSelectionComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: OgcFilterSelectionComponent, deps: [{ token: OGCFilterService }, { token: i2$1.UntypedFormBuilder }, { token: i9$1.DOMService }, { token: i2.ConfigService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: OgcFilterSelectionComponent, selector: "igo-ogc-filter-selection", inputs: { refreshFilters: "refreshFilters", datasource: "datasource", map: "map", checkboxesIndex: "checkboxesIndex", radioButtonsIndex: "radioButtonsIndex", baseIndex: "baseIndex", currentFilter: "currentFilter" }, providers: [DOMService], viewQueries: [{ propertyName: "sel", first: true, predicate: ["selection"], descendants: true }], ngImport: i0, 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"], dependencies: [{ kind: "directive", type: i2$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i6$2.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple", "hideSingleSelectionIndicator"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i9.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i6$2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i8$2.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { kind: "component", type: i8$2.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { kind: "directive", type: i5$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i5$1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: i11.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i9$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i15.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i9$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: OgcFilterTimeComponent, selector: "igo-ogc-filter-time", inputs: ["datasource", "currentFilter"], outputs: ["changeProperty"] }, { kind: "pipe", type: i2$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: OgcFilterSelectionComponent, selector: "igo-ogc-filter-selection", inputs: { refreshFilters: "refreshFilters", datasource: "datasource", map: "map", checkboxesIndex: "checkboxesIndex", radioButtonsIndex: "radioButtonsIndex", baseIndex: "baseIndex", currentFilter: "currentFilter" }, providers: [DOMService], viewQueries: [{ propertyName: "sel", first: true, predicate: ["selection"], descendants: true }], ngImport: i0, 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"], dependencies: [{ kind: "directive", type: i2$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i6$2.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple", "hideSingleSelectionIndicator"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i9.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i6$2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i8$2.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { kind: "component", type: i8$2.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { kind: "directive", type: i5$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i5$1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: i11.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i9$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i15.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i9$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: OgcFilterTimeComponent, selector: "igo-ogc-filter-time", inputs: ["datasource", "currentFilter"], outputs: ["changeProperty"] }, { kind: "pipe", type: i2$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: OgcFilterSelectionComponent, decorators: [{
             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"] }]
         }], ctorParameters: function () { return [{ type: OGCFilterService }, { type: i2$1.UntypedFormBuilder }, { type: i9$1.DOMService }, { type: i2.ConfigService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { sel: [{
                 type: ViewChild,
                 args: ['selection']
@@ -28269,7 +28312,7 @@ class OgcFilterableFormComponent {
                 provide: MAT_AUTOCOMPLETE_DEFAULT_OPTIONS,
                 useValue: { overlayPanelClass: 'igo-overlay-panel-width' }
             }
-        ], ngImport: i0, 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"], dependencies: [{ kind: "directive", type: i2$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i9$1.ListItemDirective, selector: "[igoListItem]", inputs: ["color", "focused", "selected", "disabled"], outputs: ["beforeSelect", "beforeFocus", "beforeUnselect", "beforeUnfocus", "beforeDisable", "beforeEnable", "focus", "unfocus", "select", "unselect", "disable", "enable"] }, { kind: "component", type: OgcFilterFormComponent, selector: "igo-ogc-filter-form", inputs: ["refreshFilters", "datasource", "map", "currentFilter", "floatLabel"] }, { kind: "component", type: OgcFilterSelectionComponent, selector: "igo-ogc-filter-selection", inputs: ["refreshFilters", "datasource", "map", "checkboxesIndex", "radioButtonsIndex", "baseIndex", "currentFilter"] }] });
+        ], ngImport: i0, 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"], dependencies: [{ kind: "directive", type: i2$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i9$1.ListItemDirective, selector: "[igoListItem]", inputs: ["color", "focused", "selected", "disabled"], outputs: ["beforeSelect", "beforeFocus", "beforeUnselect", "beforeUnfocus", "beforeDisable", "beforeEnable", "focus", "unfocus", "select", "unselect", "disable", "enable"] }, { kind: "component", type: OgcFilterFormComponent, selector: "igo-ogc-filter-form", inputs: ["refreshFilters", "datasource", "map", "currentFilter", "floatLabel"] }, { kind: "component", type: OgcFilterSelectionComponent, selector: "igo-ogc-filter-selection", inputs: ["refreshFilters", "datasource", "map", "checkboxesIndex", "radioButtonsIndex", "baseIndex", "currentFilter"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: OgcFilterableFormComponent, decorators: [{
             type: Component,
@@ -28282,7 +28325,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             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"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { datasource: [{
                 type: Input
             }], map: [{
@@ -28477,11 +28520,11 @@ class OgcFilterableItemComponent {
         this.filtersCollapsed = !this.filtersCollapsed;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: OgcFilterableItemComponent, deps: [{ token: OGCFilterService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: OgcFilterableItemComponent, selector: "igo-ogc-filterable-item", inputs: { layer: "layer", map: "map", header: "header" }, ngImport: i0, 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"], dependencies: [{ kind: "directive", type: i2$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i11.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i5.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i5.MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "component", type: i9$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i5.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "directive", type: i5.MatListItemMeta, selector: "[matListItemMeta]" }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: LayerLegendComponent, selector: "igo-layer-legend", inputs: ["updateLegendOnResolutionChange", "layer"] }, { kind: "directive", type: i9$1.CollapseDirective, selector: "[igoCollapse]", inputs: ["target", "collapsed"], outputs: ["toggle"] }, { kind: "component", type: OgcFilterableFormComponent, selector: "igo-ogc-filterable-form", inputs: ["datasource", "map", "refreshFilters"] }, { kind: "pipe", type: i2$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: OgcFilterableItemComponent, selector: "igo-ogc-filterable-item", inputs: { layer: "layer", map: "map", header: "header" }, ngImport: i0, 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"], dependencies: [{ kind: "directive", type: i2$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i11.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i5.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i5.MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "component", type: i9$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i5.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "directive", type: i5.MatListItemMeta, selector: "[matListItemMeta]" }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: LayerLegendComponent, selector: "igo-layer-legend", inputs: ["updateLegendOnResolutionChange", "layer"] }, { kind: "directive", type: i9$1.CollapseDirective, selector: "[igoCollapse]", inputs: ["target", "collapsed"], outputs: ["toggle"] }, { kind: "component", type: OgcFilterableFormComponent, selector: "igo-ogc-filterable-form", inputs: ["datasource", "map", "refreshFilters"] }, { kind: "pipe", type: i2$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: OgcFilterableItemComponent, decorators: [{
             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"] }]
         }], ctorParameters: function () { return [{ type: OGCFilterService }]; }, propDecorators: { layer: [{
                 type: Input
             }], map: [{
@@ -28591,11 +28634,11 @@ class OgcFilterButtonComponent {
             .options;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: OgcFilterButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: OgcFilterButtonComponent, selector: "igo-ogc-filter-button", inputs: { layer: "layer", map: "map", color: "color", header: "header" }, ngImport: i0, 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", styles: [""], dependencies: [{ kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: i9$1.ListItemDirective, selector: "[igoListItem]", inputs: ["color", "focused", "selected", "disabled"], outputs: ["beforeSelect", "beforeFocus", "beforeUnselect", "beforeUnfocus", "beforeDisable", "beforeEnable", "focus", "unfocus", "select", "unselect", "disable", "enable"] }, { kind: "directive", type: i6.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: OgcFilterableItemComponent, selector: "igo-ogc-filterable-item", inputs: ["layer", "map", "header"] }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: OgcFilterButtonComponent, selector: "igo-ogc-filter-button", inputs: { layer: "layer", map: "map", color: "color", header: "header" }, ngImport: i0, 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", styles: [""], dependencies: [{ kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: i9$1.ListItemDirective, selector: "[igoListItem]", inputs: ["color", "focused", "selected", "disabled"], outputs: ["beforeSelect", "beforeFocus", "beforeUnselect", "beforeUnfocus", "beforeDisable", "beforeEnable", "focus", "unfocus", "select", "unselect", "disable", "enable"] }, { kind: "directive", type: i6.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: OgcFilterableItemComponent, selector: "igo-ogc-filterable-item", inputs: ["layer", "map", "header"] }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: OgcFilterButtonComponent, decorators: [{
             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" }]
         }], ctorParameters: function () { return []; }, propDecorators: { layer: [{
                 type: Input
             }], map: [{
@@ -28611,11 +28654,11 @@ class OgcFilterableListComponent {
     map;
     constructor() { }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: OgcFilterableListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: OgcFilterableListComponent, selector: "igo-ogc-filterable-list", inputs: { layers: "layers", map: "map" }, ngImport: i0, 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"], dependencies: [{ kind: "directive", type: i2$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i9$1.ListItemDirective, selector: "[igoListItem]", inputs: ["color", "focused", "selected", "disabled"], outputs: ["beforeSelect", "beforeFocus", "beforeUnselect", "beforeUnfocus", "beforeDisable", "beforeEnable", "focus", "unfocus", "select", "unselect", "disable", "enable"] }, { kind: "component", type: i9$1.ListComponent, selector: "igo-list", inputs: ["navigation", "selection"] }, { kind: "component", type: OgcFilterableItemComponent, selector: "igo-ogc-filterable-item", inputs: ["layer", "map", "header"] }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }, { kind: "pipe", type: FilterableDataSourcePipe, name: "filterableDataSource" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: OgcFilterableListComponent, selector: "igo-ogc-filterable-list", inputs: { layers: "layers", map: "map" }, ngImport: i0, 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"], dependencies: [{ kind: "directive", type: i2$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i9$1.ListItemDirective, selector: "[igoListItem]", inputs: ["color", "focused", "selected", "disabled"], outputs: ["beforeSelect", "beforeFocus", "beforeUnselect", "beforeUnfocus", "beforeDisable", "beforeEnable", "focus", "unfocus", "select", "unselect", "disable", "enable"] }, { kind: "component", type: i9$1.ListComponent, selector: "igo-list", inputs: ["navigation", "selection"] }, { kind: "component", type: OgcFilterableItemComponent, selector: "igo-ogc-filterable-item", inputs: ["layer", "map", "header"] }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }, { kind: "pipe", type: FilterableDataSourcePipe, name: "filterableDataSource" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: OgcFilterableListComponent, decorators: [{
             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"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { layers: [{
                 type: Input
             }], map: [{
@@ -29484,11 +29527,11 @@ class SpatialFilterItemComponent {
         };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SpatialFilterItemComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: SpatialFilterService }, { token: i2.MessageService }, { token: i2.LanguageService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SpatialFilterItemComponent, selector: "igo-spatial-filter-item", inputs: { map: "map", type: "type", queryType: "queryType", zone: "zone", loading: "loading", store: "store", layers: "layers", allLayers: "allLayers", thematicLength: "thematicLength" }, outputs: { toggleSearch: "toggleSearch", itemTypeChange: "itemTypeChange", thematicChange: "thematicChange", drawZoneEvent: "drawZoneEvent", bufferEvent: "bufferEvent", zoneWithBufferChange: "zoneWithBufferChange", measureUnitChange: "measureUnitChange", radiusEvent: "radiusEvent", freehandControl: "freehandControl", predefinedRadius: "predefinedRadius", clearButtonEvent: "clearButtonEvent", clearSearchEvent: "clearSearchEvent", export: "export", openWorkspace: "openWorkspace", entityChange: "entityChange" }, ngImport: i0, 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  <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\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  <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]=\"this.freehandDrawIsActive && this.formControl.value === null\"\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\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{flex-flow:column nowrap;flex:2}:host .unit-field{flex:1;margin-left:8px}: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"], dependencies: [{ kind: "directive", type: i2$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i9.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i8$2.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { kind: "component", type: i8$2.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { kind: "component", type: i9$4.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i9$4.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i9$4.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i9$4.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i9$4.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i9$4.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "component", type: i9$4.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i9$4.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i10$1.MatNestedTreeNode, selector: "mat-nested-tree-node", inputs: ["role", "disabled", "tabIndex", "matNestedTreeNode"], exportAs: ["matNestedTreeNode"] }, { kind: "directive", type: i10$1.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: i10$1.MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { kind: "component", type: i10$1.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i10$1.MatTreeNode, selector: "mat-tree-node", inputs: ["role", "disabled", "tabIndex"], exportAs: ["matTreeNode"] }, { kind: "directive", type: i10$1.MatTreeNodeOutlet, selector: "[matTreeNodeOutlet]" }, { kind: "component", type: i11.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i7.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matSlideToggle"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatLabel, selector: "mat-label" }, { kind: "directive", type: i9$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i15.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i9$1.EntityTableComponent, selector: "igo-entity-table", inputs: ["store", "paginator", "template", "scrollBehavior", "sortNullsFirst", "withPaginator", "paginatorOptions"], outputs: ["entityClick", "entitySelectChange", "entitySortChange"] }, { kind: "component", type: GeometryFormFieldInputComponent, selector: "igo-geometry-form-field-input", inputs: ["map", "geometryType", "drawGuide", "measure", "drawControlIsActive", "freehandDrawIsActive", "predefinedRadius", "controlOptions", "drawStyle", "overlayStyle", "value", "radius"] }, { kind: "pipe", type: i2$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SpatialFilterItemComponent, selector: "igo-spatial-filter-item", inputs: { map: "map", type: "type", queryType: "queryType", zone: "zone", loading: "loading", store: "store", layers: "layers", allLayers: "allLayers", thematicLength: "thematicLength" }, outputs: { toggleSearch: "toggleSearch", itemTypeChange: "itemTypeChange", thematicChange: "thematicChange", drawZoneEvent: "drawZoneEvent", bufferEvent: "bufferEvent", zoneWithBufferChange: "zoneWithBufferChange", measureUnitChange: "measureUnitChange", radiusEvent: "radiusEvent", freehandControl: "freehandControl", predefinedRadius: "predefinedRadius", clearButtonEvent: "clearButtonEvent", clearSearchEvent: "clearSearchEvent", export: "export", openWorkspace: "openWorkspace", entityChange: "entityChange" }, ngImport: i0, 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  <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\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  <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]=\"this.freehandDrawIsActive && this.formControl.value === null\"\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\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{flex-flow:column nowrap;flex:2}:host .unit-field{flex:1;margin-left:8px}: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"], dependencies: [{ kind: "directive", type: i2$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i9.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i8$2.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { kind: "component", type: i8$2.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { kind: "component", type: i9$4.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i9$4.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i9$4.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i9$4.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i9$4.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i9$4.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "component", type: i9$4.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i9$4.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i10$1.MatNestedTreeNode, selector: "mat-nested-tree-node", inputs: ["role", "disabled", "tabIndex", "matNestedTreeNode"], exportAs: ["matNestedTreeNode"] }, { kind: "directive", type: i10$1.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: i10$1.MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { kind: "component", type: i10$1.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i10$1.MatTreeNode, selector: "mat-tree-node", inputs: ["role", "disabled", "tabIndex"], exportAs: ["matTreeNode"] }, { kind: "directive", type: i10$1.MatTreeNodeOutlet, selector: "[matTreeNodeOutlet]" }, { kind: "component", type: i11.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i7.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matSlideToggle"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatLabel, selector: "mat-label" }, { kind: "directive", type: i9$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i15.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i9$1.EntityTableComponent, selector: "igo-entity-table", inputs: ["store", "paginator", "template", "scrollBehavior", "sortNullsFirst", "withPaginator", "paginatorOptions"], outputs: ["entityClick", "entitySelectChange", "entitySortChange"] }, { kind: "component", type: GeometryFormFieldInputComponent, selector: "igo-geometry-form-field-input", inputs: ["map", "geometryType", "drawGuide", "measure", "drawControlIsActive", "freehandDrawIsActive", "predefinedRadius", "controlOptions", "drawStyle", "overlayStyle", "value", "radius"] }, { kind: "pipe", type: i2$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SpatialFilterItemComponent, decorators: [{
             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  <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\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  <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]=\"this.freehandDrawIsActive && this.formControl.value === null\"\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\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{flex-flow:column nowrap;flex:2}:host .unit-field{flex:1;margin-left:8px}: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  <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\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  <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]=\"this.freehandDrawIsActive && this.formControl.value === null\"\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\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{flex-flow:column nowrap;flex:2}:host .unit-field{flex:1;margin-left:8px}: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"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: SpatialFilterService }, { type: i2.MessageService }, { type: i2.LanguageService }]; }, propDecorators: { map: [{
                 type: Input
             }], type: [{
@@ -29677,11 +29720,11 @@ class SpatialFilterListComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SpatialFilterListComponent, deps: [{ token: SpatialFilterService }, { token: i2.MessageService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SpatialFilterListComponent, selector: "igo-spatial-filter-list", inputs: { store: "store", queryType: "queryType", zone: "zone", layers: "layers" }, outputs: { zoneChange: "zoneChange", zoneWithBufferChange: "zoneWithBufferChange", bufferChange: "bufferChange", measureUnitChange: "measureUnitChange" }, ngImport: i0, 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{flex:2}:host .unit-field{flex:1;margin-left:8px}\n"], dependencies: [{ kind: "directive", type: i2$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i6$2.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple", "hideSingleSelectionIndicator"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i9.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i6$2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatLabel, selector: "mat-label" }, { kind: "directive", type: i9$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i15.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "pipe", type: i2$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SpatialFilterListComponent, selector: "igo-spatial-filter-list", inputs: { store: "store", queryType: "queryType", zone: "zone", layers: "layers" }, outputs: { zoneChange: "zoneChange", zoneWithBufferChange: "zoneWithBufferChange", bufferChange: "bufferChange", measureUnitChange: "measureUnitChange" }, ngImport: i0, 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{flex:2}:host .unit-field{flex:1;margin-left:8px}\n"], dependencies: [{ kind: "directive", type: i2$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i6$2.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple", "hideSingleSelectionIndicator"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i9.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i6$2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatLabel, selector: "mat-label" }, { kind: "directive", type: i9$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i15.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "pipe", type: i2$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SpatialFilterListComponent, decorators: [{
             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{flex:2}:host .unit-field{flex:1;margin-left:8px}\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{flex:2}:host .unit-field{flex:1;margin-left:8px}\n"] }]
         }], ctorParameters: function () { return [{ type: SpatialFilterService }, { type: i2.MessageService }]; }, propDecorators: { store: [{
                 type: Input
             }], queryType: [{
@@ -29766,11 +29809,11 @@ class SpatialFilterTypeComponent {
         this.zoneChange.emit(undefined);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SpatialFilterTypeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SpatialFilterTypeComponent, selector: "igo-spatial-filter-type", inputs: { store: "store", selectedQueryType: "selectedQueryType", zone: "zone", layers: "layers" }, outputs: { eventType: "eventType", eventQueryType: "eventQueryType", zoneChange: "zoneChange", zoneWithBufferChange: "zoneWithBufferChange", bufferChange: "bufferChange", measureUnitChange: "measureUnitChange" }, ngImport: i0, 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"], dependencies: [{ kind: "directive", type: i2$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i9.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$2.MatTab, selector: "mat-tab", inputs: ["disabled"], exportAs: ["matTab"] }, { kind: "component", type: i4$2.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple", "fitInkBarToContent", "mat-stretch-tabs"], exportAs: ["matTabGroup"] }, { kind: "directive", type: i5$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i5$1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatLabel, selector: "mat-label" }, { kind: "component", type: i15.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: SpatialFilterListComponent, selector: "igo-spatial-filter-list", inputs: ["store", "queryType", "zone", "layers"], outputs: ["zoneChange", "zoneWithBufferChange", "bufferChange", "measureUnitChange"] }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SpatialFilterTypeComponent, selector: "igo-spatial-filter-type", inputs: { store: "store", selectedQueryType: "selectedQueryType", zone: "zone", layers: "layers" }, outputs: { eventType: "eventType", eventQueryType: "eventQueryType", zoneChange: "zoneChange", zoneWithBufferChange: "zoneWithBufferChange", bufferChange: "bufferChange", measureUnitChange: "measureUnitChange" }, ngImport: i0, 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"], dependencies: [{ kind: "directive", type: i2$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i9.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$2.MatTab, selector: "mat-tab", inputs: ["disabled"], exportAs: ["matTab"] }, { kind: "component", type: i4$2.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple", "fitInkBarToContent", "mat-stretch-tabs"], exportAs: ["matTabGroup"] }, { kind: "directive", type: i5$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i5$1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatLabel, selector: "mat-label" }, { kind: "component", type: i15.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: SpatialFilterListComponent, selector: "igo-spatial-filter-list", inputs: ["store", "queryType", "zone", "layers"], outputs: ["zoneChange", "zoneWithBufferChange", "bufferChange", "measureUnitChange"] }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SpatialFilterTypeComponent, decorators: [{
             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"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { store: [{
                 type: Input
             }], selectedQueryType: [{
@@ -30260,11 +30303,11 @@ class TimeFilterFormComponent {
         return moment.duration(step).asMilliseconds();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TimeFilterFormComponent, deps: [{ token: i9.DateAdapter }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TimeFilterFormComponent, selector: "igo-time-filter-form", inputs: { layer: "layer", options: "options", currentValue: "currentValue" }, outputs: { change: "change", yearChange: "yearChange" }, viewQueries: [{ propertyName: "mySlider", first: true, predicate: MatSlider, descendants: true }], ngImport: i0, 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"], dependencies: [{ kind: "directive", type: i2$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i9.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i8$1.MatSlider, selector: "mat-slider", inputs: ["color", "disableRipple", "disabled", "discrete", "showTickMarks", "min", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i8$1.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }, { kind: "component", type: i7.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matSlideToggle"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i9$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i15.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i12$1.MatDatetimepickerComponent, selector: "mat-datetimepicker", inputs: ["multiYearSelector", "twelvehour", "startView", "mode", "timeInterval", "ariaNextMonthLabel", "ariaPrevMonthLabel", "ariaNextYearLabel", "ariaPrevYearLabel", "preventSameDateTimeSelection", "panelClass", "startAt", "openOnFocus", "type", "touchUi", "disabled"], outputs: ["selectedChanged", "opened", "closed", "viewChanged"], exportAs: ["matDatetimepicker"] }, { kind: "component", type: i12$1.MatDatetimepickerToggleComponent, selector: "mat-datetimepicker-toggle", inputs: ["for", "disabled"], exportAs: ["matDatetimepickerToggle"] }, { kind: "directive", type: i12$1.MatDatetimepickerInputDirective, selector: "input[matDatetimepicker]", inputs: ["matDatetimepicker", "matDatepickerFilter", "value", "min", "max", "disabled"], outputs: ["dateChange", "dateInput"], exportAs: ["matDatepickerInput"] }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TimeFilterFormComponent, selector: "igo-time-filter-form", inputs: { layer: "layer", options: "options", currentValue: "currentValue" }, outputs: { change: "change", yearChange: "yearChange" }, viewQueries: [{ propertyName: "mySlider", first: true, predicate: MatSlider, descendants: true }], ngImport: i0, 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"], dependencies: [{ kind: "directive", type: i2$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i9.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i8$1.MatSlider, selector: "mat-slider", inputs: ["color", "disableRipple", "disabled", "discrete", "showTickMarks", "min", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i8$1.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }, { kind: "component", type: i7.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matSlideToggle"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i9$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i15.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i12$1.MatDatetimepickerComponent, selector: "mat-datetimepicker", inputs: ["multiYearSelector", "twelvehour", "startView", "mode", "timeInterval", "ariaNextMonthLabel", "ariaPrevMonthLabel", "ariaNextYearLabel", "ariaPrevYearLabel", "preventSameDateTimeSelection", "panelClass", "startAt", "openOnFocus", "type", "touchUi", "disabled"], outputs: ["selectedChanged", "opened", "closed", "viewChanged"], exportAs: ["matDatetimepicker"] }, { kind: "component", type: i12$1.MatDatetimepickerToggleComponent, selector: "mat-datetimepicker-toggle", inputs: ["for", "disabled"], exportAs: ["matDatetimepickerToggle"] }, { kind: "directive", type: i12$1.MatDatetimepickerInputDirective, selector: "input[matDatetimepicker]", inputs: ["matDatetimepicker", "matDatepickerFilter", "value", "min", "max", "disabled"], outputs: ["dateChange", "dateInput"], exportAs: ["matDatepickerInput"] }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TimeFilterFormComponent, decorators: [{
             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"] }]
         }], ctorParameters: function () { return [{ type: i9.DateAdapter }]; }, propDecorators: { layer: [{
                 type: Input
             }], options: [{
@@ -30326,11 +30369,11 @@ class TimeFilterItemComponent {
         this.filtersCollapsed = !this.filtersCollapsed;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TimeFilterItemComponent, deps: [{ token: TimeFilterService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TimeFilterItemComponent, selector: "igo-time-filter-item", inputs: { header: "header", layer: "layer" }, ngImport: i0, 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"], dependencies: [{ kind: "directive", type: i2$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i5.MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "directive", type: i5.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "directive", type: i5.MatListItemMeta, selector: "[matListItemMeta]" }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: LayerLegendComponent, selector: "igo-layer-legend", inputs: ["updateLegendOnResolutionChange", "layer"] }, { kind: "directive", type: i9$1.CollapseDirective, selector: "[igoCollapse]", inputs: ["target", "collapsed"], outputs: ["toggle"] }, { kind: "component", type: TimeFilterFormComponent, selector: "igo-time-filter-form", inputs: ["layer", "options", "currentValue"], outputs: ["change", "yearChange"] }, { kind: "pipe", type: i2$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TimeFilterItemComponent, selector: "igo-time-filter-item", inputs: { header: "header", layer: "layer" }, ngImport: i0, 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"], dependencies: [{ kind: "directive", type: i2$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i5.MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "directive", type: i5.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "directive", type: i5.MatListItemMeta, selector: "[matListItemMeta]" }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: LayerLegendComponent, selector: "igo-layer-legend", inputs: ["updateLegendOnResolutionChange", "layer"] }, { kind: "directive", type: i9$1.CollapseDirective, selector: "[igoCollapse]", inputs: ["target", "collapsed"], outputs: ["toggle"] }, { kind: "component", type: TimeFilterFormComponent, selector: "igo-time-filter-form", inputs: ["layer", "options", "currentValue"], outputs: ["change", "yearChange"] }, { kind: "pipe", type: i2$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TimeFilterItemComponent, decorators: [{
             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"] }]
         }], ctorParameters: function () { return [{ type: TimeFilterService }]; }, propDecorators: { header: [{
                 type: Input
             }], layer: [{
@@ -30367,11 +30410,11 @@ class TimeFilterButtonComponent {
         this.options = this.layer.dataSource.options;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TimeFilterButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TimeFilterButtonComponent, selector: "igo-time-filter-button", inputs: { layer: "layer", map: "map", color: "color", header: "header" }, ngImport: i0, 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", styles: [""], dependencies: [{ kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: i9$1.ListItemDirective, selector: "[igoListItem]", inputs: ["color", "focused", "selected", "disabled"], outputs: ["beforeSelect", "beforeFocus", "beforeUnselect", "beforeUnfocus", "beforeDisable", "beforeEnable", "focus", "unfocus", "select", "unselect", "disable", "enable"] }, { kind: "directive", type: i6.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: TimeFilterItemComponent, selector: "igo-time-filter-item", inputs: ["header", "layer"] }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TimeFilterButtonComponent, selector: "igo-time-filter-button", inputs: { layer: "layer", map: "map", color: "color", header: "header" }, ngImport: i0, 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", styles: [""], dependencies: [{ kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: i9$1.ListItemDirective, selector: "[igoListItem]", inputs: ["color", "focused", "selected", "disabled"], outputs: ["beforeSelect", "beforeFocus", "beforeUnselect", "beforeUnfocus", "beforeDisable", "beforeEnable", "focus", "unfocus", "select", "unselect", "disable", "enable"] }, { kind: "directive", type: i6.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: TimeFilterItemComponent, selector: "igo-time-filter-item", inputs: ["header", "layer"] }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TimeFilterButtonComponent, decorators: [{
             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" }]
         }], ctorParameters: function () { return []; }, propDecorators: { layer: [{
                 type: Input
             }], map: [{
@@ -30396,11 +30439,11 @@ class TimeFilterListComponent {
         this.cdRef = cdRef;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TimeFilterListComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TimeFilterListComponent, selector: "igo-time-filter-list", inputs: { layers: "layers" }, ngImport: i0, 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", dependencies: [{ kind: "directive", type: i2$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i9$1.ListItemDirective, selector: "[igoListItem]", inputs: ["color", "focused", "selected", "disabled"], outputs: ["beforeSelect", "beforeFocus", "beforeUnselect", "beforeUnfocus", "beforeDisable", "beforeEnable", "focus", "unfocus", "select", "unselect", "disable", "enable"] }, { kind: "component", type: i9$1.ListComponent, selector: "igo-list", inputs: ["navigation", "selection"] }, { kind: "component", type: TimeFilterItemComponent, selector: "igo-time-filter-item", inputs: ["header", "layer"] }, { kind: "pipe", type: FilterableDataSourcePipe, name: "filterableDataSource" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TimeFilterListComponent, selector: "igo-time-filter-list", inputs: { layers: "layers" }, ngImport: i0, 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", dependencies: [{ kind: "directive", type: i2$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i9$1.ListItemDirective, selector: "[igoListItem]", inputs: ["color", "focused", "selected", "disabled"], outputs: ["beforeSelect", "beforeFocus", "beforeUnselect", "beforeUnfocus", "beforeDisable", "beforeEnable", "focus", "unfocus", "select", "unselect", "disable", "enable"] }, { kind: "component", type: i9$1.ListComponent, selector: "igo-list", inputs: ["navigation", "selection"] }, { kind: "component", type: TimeFilterItemComponent, selector: "igo-time-filter-item", inputs: ["header", "layer"] }, { kind: "pipe", type: FilterableDataSourcePipe, name: "filterableDataSource" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TimeFilterListComponent, decorators: [{
             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" }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { layers: [{
                 type: Input
             }] } });
@@ -30677,11 +30720,11 @@ class ExportButtonComponent {
         return false;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ExportButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ExportButtonComponent, selector: "igo-export-button", inputs: { layer: "layer", color: "color" }, ngImport: i0, 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", styles: [""], dependencies: [{ kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ExportButtonComponent, selector: "igo-export-button", inputs: { layer: "layer", color: "color" }, ngImport: i0, 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", styles: [""], dependencies: [{ kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ExportButtonComponent, decorators: [{
             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" }]
         }], ctorParameters: function () { return []; }, propDecorators: { layer: [{
                 type: Input
             }], color: [{
@@ -33048,11 +33091,11 @@ class PrintFormComponent {
         this.commentField.updateValueAndValidity();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PrintFormComponent, deps: [{ token: i2$1.UntypedFormBuilder }, { token: i2.MediaService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PrintFormComponent, selector: "igo-print-form", inputs: { disabled$: "disabled$", imageFormat: "imageFormat", outputFormat: "outputFormat", paperFormat: "paperFormat", orientation: "orientation", resolution: "resolution", legendPosition: "legendPosition", title: "title", subtitle: "subtitle", comment: "comment", showProjection: "showProjection", showScale: "showScale", showLegend: "showLegend", doZipFile: "doZipFile" }, outputs: { submit: "submit" }, ngImport: i0, 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\n        >{{ 'igo.geo.printForm.resolution' | translate }} ({{\n          'igo.geo.printForm.resolutionUnit' | translate\n        }})</mat-label\n      >\n      <mat-select\n        formControlName=\"resolution\"\n        placeholder=\"{{ 'igo.geo.printForm.resolution' | translate }}\"\n      >\n        <mat-option *ngFor=\"let resolution of resolutions\" [value]=\"resolution\">\n          {{ resolution }}\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"], dependencies: [{ kind: "directive", type: i2$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i4$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i15.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i9.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i9$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i7.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matSlideToggle"] }, { kind: "pipe", type: i2$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }, { kind: "pipe", type: i9$1.KeyValuePipe, name: "keyvalue" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PrintFormComponent, selector: "igo-print-form", inputs: { disabled$: "disabled$", imageFormat: "imageFormat", outputFormat: "outputFormat", paperFormat: "paperFormat", orientation: "orientation", resolution: "resolution", legendPosition: "legendPosition", title: "title", subtitle: "subtitle", comment: "comment", showProjection: "showProjection", showScale: "showScale", showLegend: "showLegend", doZipFile: "doZipFile" }, outputs: { submit: "submit" }, ngImport: i0, 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\r\n        >{{ 'igo.geo.printForm.resolution' | translate }} ({{\r\n          'igo.geo.printForm.resolutionUnit' | translate\r\n        }})</mat-label\r\n      >\r\n      <mat-select\r\n        formControlName=\"resolution\"\r\n        placeholder=\"{{ 'igo.geo.printForm.resolution' | translate }}\"\r\n      >\r\n        <mat-option *ngFor=\"let resolution of resolutions\" [value]=\"resolution\">\r\n          {{ resolution }}\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"], dependencies: [{ kind: "directive", type: i2$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i4$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i15.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i9.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i9$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i7.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matSlideToggle"] }, { kind: "pipe", type: i2$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }, { kind: "pipe", type: i9$1.KeyValuePipe, name: "keyvalue" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PrintFormComponent, decorators: [{
             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\n        >{{ 'igo.geo.printForm.resolution' | translate }} ({{\n          'igo.geo.printForm.resolutionUnit' | translate\n        }})</mat-label\n      >\n      <mat-select\n        formControlName=\"resolution\"\n        placeholder=\"{{ 'igo.geo.printForm.resolution' | translate }}\"\n      >\n        <mat-option *ngFor=\"let resolution of resolutions\" [value]=\"resolution\">\n          {{ resolution }}\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\r\n        >{{ 'igo.geo.printForm.resolution' | translate }} ({{\r\n          'igo.geo.printForm.resolutionUnit' | translate\r\n        }})</mat-label\r\n      >\r\n      <mat-select\r\n        formControlName=\"resolution\"\r\n        placeholder=\"{{ 'igo.geo.printForm.resolution' | translate }}\"\r\n      >\r\n        <mat-option *ngFor=\"let resolution of resolutions\" [value]=\"resolution\">\r\n          {{ resolution }}\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"] }]
         }], ctorParameters: function () { return [{ type: i2$1.UntypedFormBuilder }, { type: i2.MediaService }]; }, propDecorators: { disabled$: [{
                 type: Input
             }], imageFormat: [{
@@ -33171,11 +33214,11 @@ class PrintComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PrintComponent, deps: [{ token: PrintService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PrintComponent, selector: "igo-print", inputs: { map: "map", outputFormat: "outputFormat", paperFormat: "paperFormat", orientation: "orientation", imageFormat: "imageFormat", legendPosition: "legendPosition", resolution: "resolution" }, ngImport: i0, 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", dependencies: [{ kind: "component", type: PrintFormComponent, selector: "igo-print-form", inputs: ["disabled$", "imageFormat", "outputFormat", "paperFormat", "orientation", "resolution", "legendPosition", "title", "subtitle", "comment", "showProjection", "showScale", "showLegend", "doZipFile"], outputs: ["submit"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PrintComponent, selector: "igo-print", inputs: { map: "map", outputFormat: "outputFormat", paperFormat: "paperFormat", orientation: "orientation", imageFormat: "imageFormat", legendPosition: "legendPosition", resolution: "resolution" }, ngImport: i0, 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", dependencies: [{ kind: "component", type: PrintFormComponent, selector: "igo-print-form", inputs: ["disabled$", "imageFormat", "outputFormat", "paperFormat", "orientation", "resolution", "legendPosition", "title", "subtitle", "comment", "showProjection", "showScale", "showLegend", "doZipFile"], outputs: ["submit"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PrintComponent, decorators: [{
             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" }]
         }], ctorParameters: function () { return [{ type: PrintService }]; }, propDecorators: { map: [{
                 type: Input
             }], outputFormat: [{
@@ -33660,11 +33703,11 @@ class SearchSelectorComponent {
         this.searchTypeChange.emit(searchType);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SearchSelectorComponent, deps: [{ token: SearchSourceService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SearchSelectorComponent, selector: "igo-search-selector", inputs: { searchTypes: "searchTypes", searchType: "searchType" }, outputs: { searchTypeChange: "searchTypeChange" }, ngImport: i0, 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"], dependencies: [{ kind: "directive", type: i2$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i7$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "directive", type: i7$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i8$2.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { kind: "component", type: i8$2.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { kind: "pipe", type: i2$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SearchSelectorComponent, selector: "igo-search-selector", inputs: { searchTypes: "searchTypes", searchType: "searchType" }, outputs: { searchTypeChange: "searchTypeChange" }, ngImport: i0, 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"], dependencies: [{ kind: "directive", type: i2$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i7$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "directive", type: i7$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i8$2.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { kind: "component", type: i8$2.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { kind: "pipe", type: i2$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SearchSelectorComponent, decorators: [{
             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"] }]
         }], ctorParameters: function () { return [{ type: SearchSourceService }]; }, propDecorators: { searchTypes: [{
                 type: Input
             }], searchType: [{
@@ -33914,11 +33957,11 @@ class SearchSettingsComponent {
         this.reverseSearchCoordsFormatStatus.emit(this.reverseSearchCoordsFormatEnabled);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SearchSettingsComponent, deps: [{ token: SearchSourceService }, { token: i2.MediaService }, { token: i2.StorageService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SearchSettingsComponent, selector: "igo-search-settings", inputs: { pointerSummaryEnabled: "pointerSummaryEnabled", searchResultsGeometryEnabled: "searchResultsGeometryEnabled", reverseSearchCoordsFormatEnabled: "reverseSearchCoordsFormatEnabled" }, outputs: { searchSourceChange: "searchSourceChange", pointerSummaryStatus: "pointerSummaryStatus", searchResultsGeometryStatus: "searchResultsGeometryStatus", reverseSearchCoordsFormatStatus: "reverseSearchCoordsFormatStatus" }, host: { listeners: { "document:keydown": "handleKeyboardEvent($event)" } }, ngImport: i0, template: "<div class=\"igo-search-settings\">\n  <button\n    mat-icon-button\n    class=\"igo-search-settings-button\"\n    color=\"primary\"\n    tooltip-position=\"below\"\n    matTooltipShowDelay=\"500\"\n    [matTooltip]=\"'igo.geo.search.menu.tooltip' | translate\"\n    [matMenuTriggerFor]=\"searchSettingsMenu\"\n  >\n    <mat-icon svgIcon=\"chevron-down\"></mat-icon>\n  </button>\n  <mat-menu #searchSettingsMenu=\"matMenu\" class=\"no-border-radius\">\n    <div class=\"checkAllButton\" *ngIf=\"getSearchSources().length > 4\">\n      <button mat-raised-button (click)=\"checkUncheckAllSources($event)\">\n        {{\n          !searchSourcesAllEnabled\n            ? ('igo.geo.search.searchSources.unselectAll' | translate)\n            : ('igo.geo.search.searchSources.selectAll' | translate)\n        }}\n      </button>\n    </div>\n    <ng-container *ngFor=\"let source of getSearchSources()\">\n      <span class=\"igo-search-settings-search-source\">\n        <mat-checkbox\n          class=\"igo-search-settings-checkbox\"\n          [checked]=\"source.enabled\"\n          [value]=\"source\"\n          (click)=\"$event.stopPropagation()\"\n          (change)=\"onCheckSearchSource($event, source)\"\n        >\n        </mat-checkbox>\n        <button\n          *ngIf=\"source.settings.length > 0\"\n          [matMenuTriggerFor]=\"sub_menu\"\n          mat-menu-item\n        >\n          {{ source.title }}\n        </button>\n        <button mat-menu-item *ngIf=\"source.settings.length === 0\">\n          {{ source.title }}\n        </button>\n      </span>\n      <mat-menu #sub_menu=\"matMenu\">\n        <ng-container *ngFor=\"let setting of source.settings\">\n          <button mat-menu-item [matMenuTriggerFor]=\"test_sub_menu\">\n            {{\n              'igo.geo.search.searchSources.settings.' + setting.title\n                | translate\n            }}\n          </button>\n          <mat-menu\n            #test_sub_menu=\"matMenu\"\n            [ngSwitch]=\"setting.type\"\n            yPosition=\"above\"\n          >\n            <span *ngSwitchCase=\"'radiobutton'\">\n              <mat-radio-group\n                class=\"igo-search-settings-radio-group\"\n                [value]=\"setting\"\n              >\n                <mat-radio-button\n                  *ngFor=\"let settingValue of setting.values\"\n                  class=\"mat-typography\"\n                  [value]=\"settingValue\"\n                  [matTooltip]=\"getAvailableHashtagsValues(settingValue)\"\n                  [checked]=\"settingValue.enabled\"\n                  (click)=\"$event.stopPropagation()\"\n                  (change)=\"\n                    settingsValueCheckedRadioButton(\n                      $event,\n                      source,\n                      setting,\n                      settingValue\n                    )\n                  \"\n                >\n                  {{ settingValue.title | translate }}\n                </mat-radio-button>\n              </mat-radio-group>\n            </span>\n            <span *ngSwitchCase=\"'checkbox'\">\n              <div class=\"checkAllButton\" *ngIf=\"setting.values.length > 3\">\n                <button\n                  mat-raised-button\n                  (click)=\"checkUncheckAll($event, source, setting)\"\n                >\n                  {{\n                    setting.allEnabled || setting.allEnabled === undefined\n                      ? ('igo.geo.search.searchSources.settings.unselectAll'\n                        | translate)\n                      : ('igo.geo.search.searchSources.settings.selectAll'\n                        | translate)\n                  }}\n                </button>\n              </div>\n              <div\n                class=\"igo-search-settings-sub-menu\"\n                mat-menu-item\n                *ngFor=\"let settingValue of getAvailableValues(setting)\"\n              >\n                <mat-checkbox\n                  [style.display]=\"displayBlock\"\n                  [checked]=\"settingValue.enabled\"\n                  [value]=\"setting\"\n                  [matTooltip]=\"getAvailableHashtagsValues(settingValue)\"\n                  (click)=\"$event.stopPropagation()\"\n                  (change)=\"\n                    settingsValueCheckedCheckbox(\n                      $event,\n                      source,\n                      setting,\n                      settingValue\n                    )\n                  \"\n                >\n                  {{ settingValue.title | translate }}\n                </mat-checkbox>\n              </div>\n            </span>\n          </mat-menu>\n        </ng-container>\n      </mat-menu>\n    </ng-container>\n    <mat-divider></mat-divider>\n    <span class=\"pointer-summary-slide-toggle-container\">\n      <div mat-menu-item>\n        <mat-slide-toggle\n          class=\"search-option\"\n          (change)=\"changePointerReverseSearch($event)\"\n          tooltip-position=\"below\"\n          *ngIf=\"hasPointerReverseSearchSource && !isTouchScreen\"\n          matTooltipShowDelay=\"500\"\n          [matTooltip]=\"\n            'igo.geo.search.pointerSearchSummary.tooltip' | translate\n          \"\n          (click)=\"$event.stopPropagation()\"\n          [checked]=\"pointerSummaryEnabled\"\n        >\n          {{ 'igo.geo.search.pointerSearchSummary.title' | translate }}\n        </mat-slide-toggle>\n      </div>\n      <div mat-menu-item>\n        <mat-slide-toggle\n          class=\"search-option\"\n          (change)=\"changeSearchResultsGeometry($event)\"\n          tooltip-position=\"below\"\n          matTooltipShowDelay=\"500\"\n          [matTooltip]=\"\n            'igo.geo.search.searchResultsGeometry.tooltip' | translate\n          \"\n          (click)=\"$event.stopPropagation()\"\n          [checked]=\"searchResultsGeometryEnabled\"\n        >\n          {{ 'igo.geo.search.searchResultsGeometry.title' | translate }}\n        </mat-slide-toggle>\n      </div>\n      <div mat-menu-item>\n        <mat-slide-toggle\n          class=\"search-option\"\n          (change)=\"reverseSearchCoordsFormat($event)\"\n          tooltip-position=\"below\"\n          matTooltipShowDelay=\"500\"\n          [matTooltip]=\"\n            reverseSearchCoordsFormatEnabled\n              ? ('igo.geo.search.reverseCoordFormat.tooltipLatLon' | translate)\n              : ('igo.geo.search.reverseCoordFormat.tooltipLonLat' | translate)\n          \"\n          (click)=\"$event.stopPropagation()\"\n          [checked]=\"reverseSearchCoordsFormatEnabled\"\n        >\n          {{ 'igo.geo.search.reverseCoordFormat.title' | translate }}\n        </mat-slide-toggle>\n      </div>\n    </span>\n  </mat-menu>\n</div>\n", styles: [":host{display:flex;align-items:center}.checkAllButton{text-align:center;padding:0 5px}.igo-search-settings-radio-group{display:flex;flex-direction:column;padding-right:16px}.igo-search-settings-checkbox mat-radio-button{display:flex}.igo-search-settings-search-source{display:flex;width:100%}.igo-search-settings-search-source mat-checkbox{display:flex;margin-left:5px;margin-right:5px}.search-option{display:block;margin-right:10px;margin-bottom:15px}.pointer-summary-slide-toggle-container{overflow-x:hidden}.pointer-summary-slide-toggle-container mat-slide-toggle{margin:10px 0}.igo-search-settings-button button,.igo-search-settings-button button .mat-ripple,.igo-search-settings-button button .mdc-icon-button__ripple{border-radius:0!important}.igo-search-settings-sub-menu{min-height:34px}\n"], dependencies: [{ kind: "directive", type: i2$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2$2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i7$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i7$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i7$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i8$2.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { kind: "component", type: i8$2.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { kind: "component", type: i11.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i9$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i7.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matSlideToggle"] }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SearchSettingsComponent, selector: "igo-search-settings", inputs: { pointerSummaryEnabled: "pointerSummaryEnabled", searchResultsGeometryEnabled: "searchResultsGeometryEnabled", reverseSearchCoordsFormatEnabled: "reverseSearchCoordsFormatEnabled" }, outputs: { searchSourceChange: "searchSourceChange", pointerSummaryStatus: "pointerSummaryStatus", searchResultsGeometryStatus: "searchResultsGeometryStatus", reverseSearchCoordsFormatStatus: "reverseSearchCoordsFormatStatus" }, host: { listeners: { "document:keydown": "handleKeyboardEvent($event)" } }, ngImport: i0, template: "<div class=\"igo-search-settings\">\r\n  <button\r\n    mat-icon-button\r\n    class=\"igo-search-settings-button\"\r\n    color=\"primary\"\r\n    tooltip-position=\"below\"\r\n    matTooltipShowDelay=\"500\"\r\n    [matTooltip]=\"'igo.geo.search.menu.tooltip' | translate\"\r\n    [matMenuTriggerFor]=\"searchSettingsMenu\"\r\n  >\r\n    <mat-icon svgIcon=\"chevron-down\"></mat-icon>\r\n  </button>\r\n  <mat-menu #searchSettingsMenu=\"matMenu\" class=\"no-border-radius\">\r\n    <div class=\"checkAllButton\" *ngIf=\"getSearchSources().length > 4\">\r\n      <button mat-raised-button (click)=\"checkUncheckAllSources($event)\">\r\n        {{\r\n          !searchSourcesAllEnabled\r\n            ? ('igo.geo.search.searchSources.unselectAll' | translate)\r\n            : ('igo.geo.search.searchSources.selectAll' | translate)\r\n        }}\r\n      </button>\r\n    </div>\r\n    <ng-container *ngFor=\"let source of getSearchSources()\">\r\n      <span class=\"igo-search-settings-search-source\">\r\n        <mat-checkbox\r\n          class=\"igo-search-settings-checkbox\"\r\n          [checked]=\"source.enabled\"\r\n          [value]=\"source\"\r\n          (click)=\"$event.stopPropagation()\"\r\n          (change)=\"onCheckSearchSource($event, source)\"\r\n        >\r\n        </mat-checkbox>\r\n        <button\r\n          *ngIf=\"source.settings.length > 0\"\r\n          [matMenuTriggerFor]=\"sub_menu\"\r\n          mat-menu-item\r\n        >\r\n          {{ source.title }}\r\n        </button>\r\n        <button mat-menu-item *ngIf=\"source.settings.length === 0\">\r\n          {{ source.title }}\r\n        </button>\r\n      </span>\r\n      <mat-menu #sub_menu=\"matMenu\">\r\n        <ng-container *ngFor=\"let setting of source.settings\">\r\n          <button mat-menu-item [matMenuTriggerFor]=\"test_sub_menu\">\r\n            {{\r\n              'igo.geo.search.searchSources.settings.' + setting.title\r\n                | translate\r\n            }}\r\n          </button>\r\n          <mat-menu\r\n            #test_sub_menu=\"matMenu\"\r\n            [ngSwitch]=\"setting.type\"\r\n            yPosition=\"above\"\r\n          >\r\n            <span *ngSwitchCase=\"'radiobutton'\">\r\n              <mat-radio-group\r\n                class=\"igo-search-settings-radio-group\"\r\n                [value]=\"setting\"\r\n              >\r\n                <mat-radio-button\r\n                  *ngFor=\"let settingValue of setting.values\"\r\n                  class=\"mat-typography\"\r\n                  [value]=\"settingValue\"\r\n                  [matTooltip]=\"getAvailableHashtagsValues(settingValue)\"\r\n                  [checked]=\"settingValue.enabled\"\r\n                  (click)=\"$event.stopPropagation()\"\r\n                  (change)=\"\r\n                    settingsValueCheckedRadioButton(\r\n                      $event,\r\n                      source,\r\n                      setting,\r\n                      settingValue\r\n                    )\r\n                  \"\r\n                >\r\n                  {{ settingValue.title | translate }}\r\n                </mat-radio-button>\r\n              </mat-radio-group>\r\n            </span>\r\n            <span *ngSwitchCase=\"'checkbox'\">\r\n              <div class=\"checkAllButton\" *ngIf=\"setting.values.length > 3\">\r\n                <button\r\n                  mat-raised-button\r\n                  (click)=\"checkUncheckAll($event, source, setting)\"\r\n                >\r\n                  {{\r\n                    setting.allEnabled || setting.allEnabled === undefined\r\n                      ? ('igo.geo.search.searchSources.settings.unselectAll'\r\n                        | translate)\r\n                      : ('igo.geo.search.searchSources.settings.selectAll'\r\n                        | translate)\r\n                  }}\r\n                </button>\r\n              </div>\r\n              <div\r\n                class=\"igo-search-settings-sub-menu\"\r\n                mat-menu-item\r\n                *ngFor=\"let settingValue of getAvailableValues(setting)\"\r\n              >\r\n                <mat-checkbox\r\n                  [style.display]=\"displayBlock\"\r\n                  [checked]=\"settingValue.enabled\"\r\n                  [value]=\"setting\"\r\n                  [matTooltip]=\"getAvailableHashtagsValues(settingValue)\"\r\n                  (click)=\"$event.stopPropagation()\"\r\n                  (change)=\"\r\n                    settingsValueCheckedCheckbox(\r\n                      $event,\r\n                      source,\r\n                      setting,\r\n                      settingValue\r\n                    )\r\n                  \"\r\n                >\r\n                  {{ settingValue.title | translate }}\r\n                </mat-checkbox>\r\n              </div>\r\n            </span>\r\n          </mat-menu>\r\n        </ng-container>\r\n      </mat-menu>\r\n    </ng-container>\r\n    <mat-divider></mat-divider>\r\n    <span class=\"pointer-summary-slide-toggle-container\">\r\n      <div mat-menu-item>\r\n        <mat-slide-toggle\r\n          class=\"search-option\"\r\n          (change)=\"changePointerReverseSearch($event)\"\r\n          tooltip-position=\"below\"\r\n          *ngIf=\"hasPointerReverseSearchSource && !isTouchScreen\"\r\n          matTooltipShowDelay=\"500\"\r\n          [matTooltip]=\"\r\n            'igo.geo.search.pointerSearchSummary.tooltip' | translate\r\n          \"\r\n          (click)=\"$event.stopPropagation()\"\r\n          [checked]=\"pointerSummaryEnabled\"\r\n        >\r\n          {{ 'igo.geo.search.pointerSearchSummary.title' | translate }}\r\n        </mat-slide-toggle>\r\n      </div>\r\n      <div mat-menu-item>\r\n        <mat-slide-toggle\r\n          class=\"search-option\"\r\n          (change)=\"changeSearchResultsGeometry($event)\"\r\n          tooltip-position=\"below\"\r\n          matTooltipShowDelay=\"500\"\r\n          [matTooltip]=\"\r\n            'igo.geo.search.searchResultsGeometry.tooltip' | translate\r\n          \"\r\n          (click)=\"$event.stopPropagation()\"\r\n          [checked]=\"searchResultsGeometryEnabled\"\r\n        >\r\n          {{ 'igo.geo.search.searchResultsGeometry.title' | translate }}\r\n        </mat-slide-toggle>\r\n      </div>\r\n      <div mat-menu-item>\r\n        <mat-slide-toggle\r\n          class=\"search-option\"\r\n          (change)=\"reverseSearchCoordsFormat($event)\"\r\n          tooltip-position=\"below\"\r\n          matTooltipShowDelay=\"500\"\r\n          [matTooltip]=\"\r\n            reverseSearchCoordsFormatEnabled\r\n              ? ('igo.geo.search.reverseCoordFormat.tooltipLatLon' | translate)\r\n              : ('igo.geo.search.reverseCoordFormat.tooltipLonLat' | translate)\r\n          \"\r\n          (click)=\"$event.stopPropagation()\"\r\n          [checked]=\"reverseSearchCoordsFormatEnabled\"\r\n        >\r\n          {{ 'igo.geo.search.reverseCoordFormat.title' | translate }}\r\n        </mat-slide-toggle>\r\n      </div>\r\n    </span>\r\n  </mat-menu>\r\n</div>\r\n", styles: [":host{display:flex;align-items:center}.checkAllButton{text-align:center;padding:0 5px}.igo-search-settings-radio-group{display:flex;flex-direction:column;padding-right:16px}.igo-search-settings-checkbox mat-radio-button{display:flex}.igo-search-settings-search-source{display:flex;width:100%}.igo-search-settings-search-source mat-checkbox{display:flex;margin-left:5px;margin-right:5px}.search-option{display:block;margin-right:10px;margin-bottom:15px}.pointer-summary-slide-toggle-container{overflow-x:hidden}.pointer-summary-slide-toggle-container mat-slide-toggle{margin:10px 0}.igo-search-settings-button button,.igo-search-settings-button button .mat-ripple,.igo-search-settings-button button .mdc-icon-button__ripple{border-radius:0!important}.igo-search-settings-sub-menu{min-height:34px}\n"], dependencies: [{ kind: "directive", type: i2$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2$2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i7$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i7$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i7$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i8$2.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { kind: "component", type: i8$2.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { kind: "component", type: i11.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i9$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i7.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matSlideToggle"] }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SearchSettingsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'igo-search-settings', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"igo-search-settings\">\n  <button\n    mat-icon-button\n    class=\"igo-search-settings-button\"\n    color=\"primary\"\n    tooltip-position=\"below\"\n    matTooltipShowDelay=\"500\"\n    [matTooltip]=\"'igo.geo.search.menu.tooltip' | translate\"\n    [matMenuTriggerFor]=\"searchSettingsMenu\"\n  >\n    <mat-icon svgIcon=\"chevron-down\"></mat-icon>\n  </button>\n  <mat-menu #searchSettingsMenu=\"matMenu\" class=\"no-border-radius\">\n    <div class=\"checkAllButton\" *ngIf=\"getSearchSources().length > 4\">\n      <button mat-raised-button (click)=\"checkUncheckAllSources($event)\">\n        {{\n          !searchSourcesAllEnabled\n            ? ('igo.geo.search.searchSources.unselectAll' | translate)\n            : ('igo.geo.search.searchSources.selectAll' | translate)\n        }}\n      </button>\n    </div>\n    <ng-container *ngFor=\"let source of getSearchSources()\">\n      <span class=\"igo-search-settings-search-source\">\n        <mat-checkbox\n          class=\"igo-search-settings-checkbox\"\n          [checked]=\"source.enabled\"\n          [value]=\"source\"\n          (click)=\"$event.stopPropagation()\"\n          (change)=\"onCheckSearchSource($event, source)\"\n        >\n        </mat-checkbox>\n        <button\n          *ngIf=\"source.settings.length > 0\"\n          [matMenuTriggerFor]=\"sub_menu\"\n          mat-menu-item\n        >\n          {{ source.title }}\n        </button>\n        <button mat-menu-item *ngIf=\"source.settings.length === 0\">\n          {{ source.title }}\n        </button>\n      </span>\n      <mat-menu #sub_menu=\"matMenu\">\n        <ng-container *ngFor=\"let setting of source.settings\">\n          <button mat-menu-item [matMenuTriggerFor]=\"test_sub_menu\">\n            {{\n              'igo.geo.search.searchSources.settings.' + setting.title\n                | translate\n            }}\n          </button>\n          <mat-menu\n            #test_sub_menu=\"matMenu\"\n            [ngSwitch]=\"setting.type\"\n            yPosition=\"above\"\n          >\n            <span *ngSwitchCase=\"'radiobutton'\">\n              <mat-radio-group\n                class=\"igo-search-settings-radio-group\"\n                [value]=\"setting\"\n              >\n                <mat-radio-button\n                  *ngFor=\"let settingValue of setting.values\"\n                  class=\"mat-typography\"\n                  [value]=\"settingValue\"\n                  [matTooltip]=\"getAvailableHashtagsValues(settingValue)\"\n                  [checked]=\"settingValue.enabled\"\n                  (click)=\"$event.stopPropagation()\"\n                  (change)=\"\n                    settingsValueCheckedRadioButton(\n                      $event,\n                      source,\n                      setting,\n                      settingValue\n                    )\n                  \"\n                >\n                  {{ settingValue.title | translate }}\n                </mat-radio-button>\n              </mat-radio-group>\n            </span>\n            <span *ngSwitchCase=\"'checkbox'\">\n              <div class=\"checkAllButton\" *ngIf=\"setting.values.length > 3\">\n                <button\n                  mat-raised-button\n                  (click)=\"checkUncheckAll($event, source, setting)\"\n                >\n                  {{\n                    setting.allEnabled || setting.allEnabled === undefined\n                      ? ('igo.geo.search.searchSources.settings.unselectAll'\n                        | translate)\n                      : ('igo.geo.search.searchSources.settings.selectAll'\n                        | translate)\n                  }}\n                </button>\n              </div>\n              <div\n                class=\"igo-search-settings-sub-menu\"\n                mat-menu-item\n                *ngFor=\"let settingValue of getAvailableValues(setting)\"\n              >\n                <mat-checkbox\n                  [style.display]=\"displayBlock\"\n                  [checked]=\"settingValue.enabled\"\n                  [value]=\"setting\"\n                  [matTooltip]=\"getAvailableHashtagsValues(settingValue)\"\n                  (click)=\"$event.stopPropagation()\"\n                  (change)=\"\n                    settingsValueCheckedCheckbox(\n                      $event,\n                      source,\n                      setting,\n                      settingValue\n                    )\n                  \"\n                >\n                  {{ settingValue.title | translate }}\n                </mat-checkbox>\n              </div>\n            </span>\n          </mat-menu>\n        </ng-container>\n      </mat-menu>\n    </ng-container>\n    <mat-divider></mat-divider>\n    <span class=\"pointer-summary-slide-toggle-container\">\n      <div mat-menu-item>\n        <mat-slide-toggle\n          class=\"search-option\"\n          (change)=\"changePointerReverseSearch($event)\"\n          tooltip-position=\"below\"\n          *ngIf=\"hasPointerReverseSearchSource && !isTouchScreen\"\n          matTooltipShowDelay=\"500\"\n          [matTooltip]=\"\n            'igo.geo.search.pointerSearchSummary.tooltip' | translate\n          \"\n          (click)=\"$event.stopPropagation()\"\n          [checked]=\"pointerSummaryEnabled\"\n        >\n          {{ 'igo.geo.search.pointerSearchSummary.title' | translate }}\n        </mat-slide-toggle>\n      </div>\n      <div mat-menu-item>\n        <mat-slide-toggle\n          class=\"search-option\"\n          (change)=\"changeSearchResultsGeometry($event)\"\n          tooltip-position=\"below\"\n          matTooltipShowDelay=\"500\"\n          [matTooltip]=\"\n            'igo.geo.search.searchResultsGeometry.tooltip' | translate\n          \"\n          (click)=\"$event.stopPropagation()\"\n          [checked]=\"searchResultsGeometryEnabled\"\n        >\n          {{ 'igo.geo.search.searchResultsGeometry.title' | translate }}\n        </mat-slide-toggle>\n      </div>\n      <div mat-menu-item>\n        <mat-slide-toggle\n          class=\"search-option\"\n          (change)=\"reverseSearchCoordsFormat($event)\"\n          tooltip-position=\"below\"\n          matTooltipShowDelay=\"500\"\n          [matTooltip]=\"\n            reverseSearchCoordsFormatEnabled\n              ? ('igo.geo.search.reverseCoordFormat.tooltipLatLon' | translate)\n              : ('igo.geo.search.reverseCoordFormat.tooltipLonLat' | translate)\n          \"\n          (click)=\"$event.stopPropagation()\"\n          [checked]=\"reverseSearchCoordsFormatEnabled\"\n        >\n          {{ 'igo.geo.search.reverseCoordFormat.title' | translate }}\n        </mat-slide-toggle>\n      </div>\n    </span>\n  </mat-menu>\n</div>\n", styles: [":host{display:flex;align-items:center}.checkAllButton{text-align:center;padding:0 5px}.igo-search-settings-radio-group{display:flex;flex-direction:column;padding-right:16px}.igo-search-settings-checkbox mat-radio-button{display:flex}.igo-search-settings-search-source{display:flex;width:100%}.igo-search-settings-search-source mat-checkbox{display:flex;margin-left:5px;margin-right:5px}.search-option{display:block;margin-right:10px;margin-bottom:15px}.pointer-summary-slide-toggle-container{overflow-x:hidden}.pointer-summary-slide-toggle-container mat-slide-toggle{margin:10px 0}.igo-search-settings-button button,.igo-search-settings-button button .mat-ripple,.igo-search-settings-button button .mdc-icon-button__ripple{border-radius:0!important}.igo-search-settings-sub-menu{min-height:34px}\n"] }]
+            args: [{ selector: 'igo-search-settings', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"igo-search-settings\">\r\n  <button\r\n    mat-icon-button\r\n    class=\"igo-search-settings-button\"\r\n    color=\"primary\"\r\n    tooltip-position=\"below\"\r\n    matTooltipShowDelay=\"500\"\r\n    [matTooltip]=\"'igo.geo.search.menu.tooltip' | translate\"\r\n    [matMenuTriggerFor]=\"searchSettingsMenu\"\r\n  >\r\n    <mat-icon svgIcon=\"chevron-down\"></mat-icon>\r\n  </button>\r\n  <mat-menu #searchSettingsMenu=\"matMenu\" class=\"no-border-radius\">\r\n    <div class=\"checkAllButton\" *ngIf=\"getSearchSources().length > 4\">\r\n      <button mat-raised-button (click)=\"checkUncheckAllSources($event)\">\r\n        {{\r\n          !searchSourcesAllEnabled\r\n            ? ('igo.geo.search.searchSources.unselectAll' | translate)\r\n            : ('igo.geo.search.searchSources.selectAll' | translate)\r\n        }}\r\n      </button>\r\n    </div>\r\n    <ng-container *ngFor=\"let source of getSearchSources()\">\r\n      <span class=\"igo-search-settings-search-source\">\r\n        <mat-checkbox\r\n          class=\"igo-search-settings-checkbox\"\r\n          [checked]=\"source.enabled\"\r\n          [value]=\"source\"\r\n          (click)=\"$event.stopPropagation()\"\r\n          (change)=\"onCheckSearchSource($event, source)\"\r\n        >\r\n        </mat-checkbox>\r\n        <button\r\n          *ngIf=\"source.settings.length > 0\"\r\n          [matMenuTriggerFor]=\"sub_menu\"\r\n          mat-menu-item\r\n        >\r\n          {{ source.title }}\r\n        </button>\r\n        <button mat-menu-item *ngIf=\"source.settings.length === 0\">\r\n          {{ source.title }}\r\n        </button>\r\n      </span>\r\n      <mat-menu #sub_menu=\"matMenu\">\r\n        <ng-container *ngFor=\"let setting of source.settings\">\r\n          <button mat-menu-item [matMenuTriggerFor]=\"test_sub_menu\">\r\n            {{\r\n              'igo.geo.search.searchSources.settings.' + setting.title\r\n                | translate\r\n            }}\r\n          </button>\r\n          <mat-menu\r\n            #test_sub_menu=\"matMenu\"\r\n            [ngSwitch]=\"setting.type\"\r\n            yPosition=\"above\"\r\n          >\r\n            <span *ngSwitchCase=\"'radiobutton'\">\r\n              <mat-radio-group\r\n                class=\"igo-search-settings-radio-group\"\r\n                [value]=\"setting\"\r\n              >\r\n                <mat-radio-button\r\n                  *ngFor=\"let settingValue of setting.values\"\r\n                  class=\"mat-typography\"\r\n                  [value]=\"settingValue\"\r\n                  [matTooltip]=\"getAvailableHashtagsValues(settingValue)\"\r\n                  [checked]=\"settingValue.enabled\"\r\n                  (click)=\"$event.stopPropagation()\"\r\n                  (change)=\"\r\n                    settingsValueCheckedRadioButton(\r\n                      $event,\r\n                      source,\r\n                      setting,\r\n                      settingValue\r\n                    )\r\n                  \"\r\n                >\r\n                  {{ settingValue.title | translate }}\r\n                </mat-radio-button>\r\n              </mat-radio-group>\r\n            </span>\r\n            <span *ngSwitchCase=\"'checkbox'\">\r\n              <div class=\"checkAllButton\" *ngIf=\"setting.values.length > 3\">\r\n                <button\r\n                  mat-raised-button\r\n                  (click)=\"checkUncheckAll($event, source, setting)\"\r\n                >\r\n                  {{\r\n                    setting.allEnabled || setting.allEnabled === undefined\r\n                      ? ('igo.geo.search.searchSources.settings.unselectAll'\r\n                        | translate)\r\n                      : ('igo.geo.search.searchSources.settings.selectAll'\r\n                        | translate)\r\n                  }}\r\n                </button>\r\n              </div>\r\n              <div\r\n                class=\"igo-search-settings-sub-menu\"\r\n                mat-menu-item\r\n                *ngFor=\"let settingValue of getAvailableValues(setting)\"\r\n              >\r\n                <mat-checkbox\r\n                  [style.display]=\"displayBlock\"\r\n                  [checked]=\"settingValue.enabled\"\r\n                  [value]=\"setting\"\r\n                  [matTooltip]=\"getAvailableHashtagsValues(settingValue)\"\r\n                  (click)=\"$event.stopPropagation()\"\r\n                  (change)=\"\r\n                    settingsValueCheckedCheckbox(\r\n                      $event,\r\n                      source,\r\n                      setting,\r\n                      settingValue\r\n                    )\r\n                  \"\r\n                >\r\n                  {{ settingValue.title | translate }}\r\n                </mat-checkbox>\r\n              </div>\r\n            </span>\r\n          </mat-menu>\r\n        </ng-container>\r\n      </mat-menu>\r\n    </ng-container>\r\n    <mat-divider></mat-divider>\r\n    <span class=\"pointer-summary-slide-toggle-container\">\r\n      <div mat-menu-item>\r\n        <mat-slide-toggle\r\n          class=\"search-option\"\r\n          (change)=\"changePointerReverseSearch($event)\"\r\n          tooltip-position=\"below\"\r\n          *ngIf=\"hasPointerReverseSearchSource && !isTouchScreen\"\r\n          matTooltipShowDelay=\"500\"\r\n          [matTooltip]=\"\r\n            'igo.geo.search.pointerSearchSummary.tooltip' | translate\r\n          \"\r\n          (click)=\"$event.stopPropagation()\"\r\n          [checked]=\"pointerSummaryEnabled\"\r\n        >\r\n          {{ 'igo.geo.search.pointerSearchSummary.title' | translate }}\r\n        </mat-slide-toggle>\r\n      </div>\r\n      <div mat-menu-item>\r\n        <mat-slide-toggle\r\n          class=\"search-option\"\r\n          (change)=\"changeSearchResultsGeometry($event)\"\r\n          tooltip-position=\"below\"\r\n          matTooltipShowDelay=\"500\"\r\n          [matTooltip]=\"\r\n            'igo.geo.search.searchResultsGeometry.tooltip' | translate\r\n          \"\r\n          (click)=\"$event.stopPropagation()\"\r\n          [checked]=\"searchResultsGeometryEnabled\"\r\n        >\r\n          {{ 'igo.geo.search.searchResultsGeometry.title' | translate }}\r\n        </mat-slide-toggle>\r\n      </div>\r\n      <div mat-menu-item>\r\n        <mat-slide-toggle\r\n          class=\"search-option\"\r\n          (change)=\"reverseSearchCoordsFormat($event)\"\r\n          tooltip-position=\"below\"\r\n          matTooltipShowDelay=\"500\"\r\n          [matTooltip]=\"\r\n            reverseSearchCoordsFormatEnabled\r\n              ? ('igo.geo.search.reverseCoordFormat.tooltipLatLon' | translate)\r\n              : ('igo.geo.search.reverseCoordFormat.tooltipLonLat' | translate)\r\n          \"\r\n          (click)=\"$event.stopPropagation()\"\r\n          [checked]=\"reverseSearchCoordsFormatEnabled\"\r\n        >\r\n          {{ 'igo.geo.search.reverseCoordFormat.title' | translate }}\r\n        </mat-slide-toggle>\r\n      </div>\r\n    </span>\r\n  </mat-menu>\r\n</div>\r\n", styles: [":host{display:flex;align-items:center}.checkAllButton{text-align:center;padding:0 5px}.igo-search-settings-radio-group{display:flex;flex-direction:column;padding-right:16px}.igo-search-settings-checkbox mat-radio-button{display:flex}.igo-search-settings-search-source{display:flex;width:100%}.igo-search-settings-search-source mat-checkbox{display:flex;margin-left:5px;margin-right:5px}.search-option{display:block;margin-right:10px;margin-bottom:15px}.pointer-summary-slide-toggle-container{overflow-x:hidden}.pointer-summary-slide-toggle-container mat-slide-toggle{margin:10px 0}.igo-search-settings-button button,.igo-search-settings-button button .mat-ripple,.igo-search-settings-button button .mdc-icon-button__ripple{border-radius:0!important}.igo-search-settings-sub-menu{min-height:34px}\n"] }]
         }], ctorParameters: function () { return [{ type: SearchSourceService }, { type: i2.MediaService }, { type: i2.StorageService }]; }, propDecorators: { pointerSummaryEnabled: [{
                 type: Input
             }], searchResultsGeometryEnabled: [{
@@ -34592,11 +34635,11 @@ class SearchResultsItemComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SearchResultsItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SearchResultsItemComponent, selector: "igo-search-results-item", inputs: { result: "result", map: "map", showIcons: "showIcons", withZoomButton: "withZoomButton" }, outputs: { zoomEvent: "zoomEvent" }, ngImport: i0, 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"], dependencies: [{ kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i9$1.StopPropagationDirective, selector: "[igoStopPropagation]" }, { kind: "component", type: i4$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i5.MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "directive", type: i5.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "directive", type: i5.MatListItemMeta, selector: "[matListItemMeta]" }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SearchResultsItemComponent, selector: "igo-search-results-item", inputs: { result: "result", map: "map", showIcons: "showIcons", withZoomButton: "withZoomButton" }, outputs: { zoomEvent: "zoomEvent" }, ngImport: i0, 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"], dependencies: [{ kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i9$1.StopPropagationDirective, selector: "[igoStopPropagation]" }, { kind: "component", type: i4$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i5.MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "directive", type: i5.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "directive", type: i5.MatListItemMeta, selector: "[matListItemMeta]" }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SearchResultsItemComponent, decorators: [{
             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"] }]
         }], propDecorators: { result: [{
                 type: Input
             }], map: [{
@@ -34654,11 +34697,11 @@ class SaveFeatureDialogComponent {
         this.dialogRef.close();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SaveFeatureDialogComponent, deps: [{ token: i2$1.UntypedFormBuilder }, { token: i2.LanguageService }, { token: i1$2.MatDialogRef }, { token: MAT_DIALOG_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SaveFeatureDialogComponent, selector: "igo-save-feature-dialog", ngImport: i0, 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"], dependencies: [{ kind: "directive", type: i2$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i9$1.ListItemDirective, selector: "[igoListItem]", inputs: ["color", "focused", "selected", "disabled"], outputs: ["beforeSelect", "beforeFocus", "beforeUnselect", "beforeUnfocus", "beforeDisable", "beforeEnable", "focus", "unfocus", "select", "unselect", "disable", "enable"] }, { kind: "component", type: i9$1.ListComponent, selector: "igo-list", inputs: ["navigation", "selection"] }, { kind: "component", type: i6$2.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple", "hideSingleSelectionIndicator"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i9.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i6$2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i4$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i1$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i9$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i5.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: SearchResultsItemComponent, selector: "igo-search-results-item", inputs: ["result", "map", "showIcons", "withZoomButton"], outputs: ["zoomEvent"] }, { kind: "pipe", type: i2$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SaveFeatureDialogComponent, selector: "igo-save-feature-dialog", ngImport: i0, 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"], dependencies: [{ kind: "directive", type: i2$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i9$1.ListItemDirective, selector: "[igoListItem]", inputs: ["color", "focused", "selected", "disabled"], outputs: ["beforeSelect", "beforeFocus", "beforeUnselect", "beforeUnfocus", "beforeDisable", "beforeEnable", "focus", "unfocus", "select", "unselect", "disable", "enable"] }, { kind: "component", type: i9$1.ListComponent, selector: "igo-list", inputs: ["navigation", "selection"] }, { kind: "component", type: i6$2.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple", "hideSingleSelectionIndicator"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i9.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i6$2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i4$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i1$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i9$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i5.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: SearchResultsItemComponent, selector: "igo-search-results-item", inputs: ["result", "map", "showIcons", "withZoomButton"], outputs: ["zoomEvent"] }, { kind: "pipe", type: i2$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SaveFeatureDialogComponent, decorators: [{
             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"] }]
         }], ctorParameters: function () { return [{ type: i2$1.UntypedFormBuilder }, { type: i2.LanguageService }, { type: i1$2.MatDialogRef }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -35029,11 +35072,11 @@ class SearchResultAddButtonComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SearchResultAddButtonComponent, deps: [{ token: LayerService }, { token: i1$2.MatDialog }, { token: DataSourceService }, { token: i2.MediaService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SearchResultAddButtonComponent, selector: "igo-search-add-button", inputs: { layer: "layer", store: "store", added: "added", map: "map", saveSearchResultInLayer: "saveSearchResultInLayer", color: "color", stores: "stores" }, ngImport: i0, 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"], dependencies: [{ kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: i9$1.IgoBadgeIconDirective, selector: "[igoMatBadgeIcon]", inputs: ["igoMatBadgeIcon", "matBadgeHidden", "matBadgeDisabled", "igoMatBadgeInverseColor", "igoMatBadgeInheritColor", "igoMatBadgeColor", "igoMatBadgeBackgroundColor"] }, { kind: "directive", type: i9$1.StopPropagationDirective, selector: "[igoStopPropagation]" }, { kind: "component", type: i4$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "pipe", type: i2$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SearchResultAddButtonComponent, selector: "igo-search-add-button", inputs: { layer: "layer", store: "store", added: "added", map: "map", saveSearchResultInLayer: "saveSearchResultInLayer", color: "color", stores: "stores" }, ngImport: i0, 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"], dependencies: [{ kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: i9$1.IgoBadgeIconDirective, selector: "[igoMatBadgeIcon]", inputs: ["igoMatBadgeIcon", "matBadgeHidden", "matBadgeDisabled", "igoMatBadgeInverseColor", "igoMatBadgeInheritColor", "igoMatBadgeColor", "igoMatBadgeBackgroundColor"] }, { kind: "directive", type: i9$1.StopPropagationDirective, selector: "[igoStopPropagation]" }, { kind: "component", type: i4$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "pipe", type: i2$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SearchResultAddButtonComponent, decorators: [{
             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"] }]
         }], ctorParameters: function () { return [{ type: LayerService }, { type: i1$2.MatDialog }, { type: DataSourceService }, { type: i2.MediaService }]; }, propDecorators: { layer: [{
                 type: Input
             }], store: [{
@@ -35278,11 +35321,11 @@ class SearchResultsComponent {
         return;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SearchResultsComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: SearchService }, { token: i2.ConfigService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SearchResultsComponent, selector: "igo-search-results", inputs: { map: "map", store: "store", showIcons: "showIcons", mode: "mode", withZoomButton: "withZoomButton", tabsMode: "tabsMode", term: "term", settingsChange$: "settingsChange$", termSplitter: "termSplitter" }, outputs: { resultFocus: "resultFocus", resultUnfocus: "resultUnfocus", resultSelect: "resultSelect", moreResults: "moreResults", resultMouseenter: "resultMouseenter", resultMouseleave: "resultMouseleave" }, queries: [{ propertyName: "templateSearchToolbar", first: true, predicate: ["igoSearchItemToolbar"], descendants: true }], ngImport: i0, 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"], dependencies: [{ kind: "directive", type: i2$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i9$1.CollapsibleComponent, selector: "igo-collapsible", inputs: ["title", "collapsed"], outputs: ["toggle"] }, { kind: "directive", type: i9$1.ListItemDirective, selector: "[igoListItem]", inputs: ["color", "focused", "selected", "disabled"], outputs: ["beforeSelect", "beforeFocus", "beforeUnselect", "beforeUnfocus", "beforeDisable", "beforeEnable", "focus", "unfocus", "select", "unselect", "disable", "enable"] }, { kind: "component", type: i9$1.ListComponent, selector: "igo-list", inputs: ["navigation", "selection"] }, { kind: "component", type: i4$2.MatTab, selector: "mat-tab", inputs: ["disabled"], exportAs: ["matTab"] }, { kind: "component", type: i4$2.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple", "fitInkBarToContent", "mat-stretch-tabs"], exportAs: ["matTabGroup"] }, { kind: "component", type: SearchResultsItemComponent, selector: "igo-search-results-item", inputs: ["result", "map", "showIcons", "withZoomButton"], outputs: ["zoomEvent"] }, { kind: "pipe", type: i2$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SearchResultsComponent, selector: "igo-search-results", inputs: { map: "map", store: "store", showIcons: "showIcons", mode: "mode", withZoomButton: "withZoomButton", tabsMode: "tabsMode", term: "term", settingsChange$: "settingsChange$", termSplitter: "termSplitter" }, outputs: { resultFocus: "resultFocus", resultUnfocus: "resultUnfocus", resultSelect: "resultSelect", moreResults: "moreResults", resultMouseenter: "resultMouseenter", resultMouseleave: "resultMouseleave" }, queries: [{ propertyName: "templateSearchToolbar", first: true, predicate: ["igoSearchItemToolbar"], descendants: true }], ngImport: i0, 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"], dependencies: [{ kind: "directive", type: i2$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i9$1.CollapsibleComponent, selector: "igo-collapsible", inputs: ["title", "collapsed"], outputs: ["toggle"] }, { kind: "directive", type: i9$1.ListItemDirective, selector: "[igoListItem]", inputs: ["color", "focused", "selected", "disabled"], outputs: ["beforeSelect", "beforeFocus", "beforeUnselect", "beforeUnfocus", "beforeDisable", "beforeEnable", "focus", "unfocus", "select", "unselect", "disable", "enable"] }, { kind: "component", type: i9$1.ListComponent, selector: "igo-list", inputs: ["navigation", "selection"] }, { kind: "component", type: i4$2.MatTab, selector: "mat-tab", inputs: ["disabled"], exportAs: ["matTab"] }, { kind: "component", type: i4$2.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple", "fitInkBarToContent", "mat-stretch-tabs"], exportAs: ["matTabGroup"] }, { kind: "component", type: SearchResultsItemComponent, selector: "igo-search-results-item", inputs: ["result", "map", "showIcons", "withZoomButton"], outputs: ["zoomEvent"] }, { kind: "pipe", type: i2$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SearchResultsComponent, decorators: [{
             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"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: SearchService }, { type: i2.ConfigService }]; }, propDecorators: { map: [{
                 type: Input
             }], store: [{
@@ -37346,11 +37389,11 @@ class StyleModalLayerComponent {
         this.dialogRef.disableClose = false;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: StyleModalLayerComponent, deps: [{ token: i1$2.MatDialogRef }, { token: i2$1.UntypedFormBuilder }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: StyleModalLayerComponent, selector: "igo-style-modal-layer", inputs: { confirmFlag: "confirmFlag" }, ngImport: i0, template: "<h2 mat-dialog-title class=\"mat-typography\">\n  {{ 'igo.geo.style.styleModal' | translate }}\n</h2>\n<div mat-dialog-content>\n  <div class=\"edition-drawing mat-typography\">\n    <form class=\"igo-form\" [formGroup]=\"form\">\n      <div\n        class=\"fill-color-picker mat-typography\"\n        *ngIf=\"linestringOnly !== true\"\n      >\n        <span>\n          <mat-icon class=\"stroke-palette-icon\" svgIcon=\"square\"></mat-icon>\n          {{ 'igo.geo.style.fill' | translate }}\n        </span>\n        <igo-color-picker-form-field\n          formControlName=\"fill\"\n          (colorChange)=\"setLayerFillColor($event)\"\n        ></igo-color-picker-form-field>\n      </div>\n\n      <div class=\"stroke-color-picker mat-typography\">\n        <span>\n          <mat-icon class=\"stroke-palette-icon\" svgIcon=\"square-outline\">\n          </mat-icon>\n          {{ 'igo.geo.style.stroke' | translate }}\n        </span>\n        <igo-color-picker-form-field\n          formControlName=\"stroke\"\n          (colorChange)=\"setLayerStrokeColor($event)\"\n        ></igo-color-picker-form-field>\n      </div>\n    </form>\n  </div>\n</div>\n<div mat-dialog-actions>\n  <button mat-raised-button (click)=\"cancel()\">\n    {{ 'igo.geo.style.cancel' | translate }}\n  </button>\n  <button mat-raised-button color=\"primary\" (click)=\"confirm()\">OK</button>\n</div>\n", styles: ["h2{font-weight:700;font-size:large}.igo-form{padding:10px}.fill-field,.stroke-field{width:130px}.fill-color-picker mat-icon{position:relative;top:7px}.fill-color-picker mat-form-field{left:8px}.stroke-color-picker mat-icon{position:relative;top:7px}.stroke-color-picker mat-form-field{left:35px}.box{width:25px;height:25px}.edition-drawing{padding:10px 0}.igo-input-container .mat-mdc-form-field+.mat-form-field{margin-left:8px}.igo-form-input-box{width:150px}button{margin-right:5px}\n"], dependencies: [{ kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i1$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i9$1.ColorPickerFormFieldComponent, selector: "igo-color-picker-form-field", inputs: ["outputFormat"], outputs: ["colorChange"] }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: StyleModalLayerComponent, selector: "igo-style-modal-layer", inputs: { confirmFlag: "confirmFlag" }, ngImport: i0, template: "<h2 mat-dialog-title class=\"mat-typography\">\r\n  {{ 'igo.geo.style.styleModal' | translate }}\r\n</h2>\r\n<div mat-dialog-content>\r\n  <div class=\"edition-drawing mat-typography\">\r\n    <form class=\"igo-form\" [formGroup]=\"form\">\r\n      <div\r\n        class=\"fill-color-picker mat-typography\"\r\n        *ngIf=\"linestringOnly !== true\"\r\n      >\r\n        <span>\r\n          <mat-icon class=\"stroke-palette-icon\" svgIcon=\"square\"></mat-icon>\r\n          {{ 'igo.geo.style.fill' | translate }}\r\n        </span>\r\n        <igo-color-picker-form-field\r\n          formControlName=\"fill\"\r\n          (colorChange)=\"setLayerFillColor($event)\"\r\n        ></igo-color-picker-form-field>\r\n      </div>\r\n\r\n      <div class=\"stroke-color-picker mat-typography\">\r\n        <span>\r\n          <mat-icon class=\"stroke-palette-icon\" svgIcon=\"square-outline\">\r\n          </mat-icon>\r\n          {{ 'igo.geo.style.stroke' | translate }}\r\n        </span>\r\n        <igo-color-picker-form-field\r\n          formControlName=\"stroke\"\r\n          (colorChange)=\"setLayerStrokeColor($event)\"\r\n        ></igo-color-picker-form-field>\r\n      </div>\r\n    </form>\r\n  </div>\r\n</div>\r\n<div mat-dialog-actions>\r\n  <button mat-raised-button (click)=\"cancel()\">\r\n    {{ 'igo.geo.style.cancel' | translate }}\r\n  </button>\r\n  <button mat-raised-button color=\"primary\" (click)=\"confirm()\">OK</button>\r\n</div>\r\n", styles: ["h2{font-weight:700;font-size:large}.igo-form{padding:10px}.fill-field,.stroke-field{width:130px}.fill-color-picker mat-icon{position:relative;top:7px}.fill-color-picker mat-form-field{left:8px}.stroke-color-picker mat-icon{position:relative;top:7px}.stroke-color-picker mat-form-field{left:35px}.box{width:25px;height:25px}.edition-drawing{padding:10px 0}.igo-input-container .mat-mdc-form-field+.mat-form-field{margin-left:8px}.igo-form-input-box{width:150px}button{margin-right:5px}\n"], dependencies: [{ kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i1$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i9$1.ColorPickerFormFieldComponent, selector: "igo-color-picker-form-field", inputs: ["outputFormat"], outputs: ["colorChange"] }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: StyleModalLayerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'igo-style-modal-layer', template: "<h2 mat-dialog-title class=\"mat-typography\">\n  {{ 'igo.geo.style.styleModal' | translate }}\n</h2>\n<div mat-dialog-content>\n  <div class=\"edition-drawing mat-typography\">\n    <form class=\"igo-form\" [formGroup]=\"form\">\n      <div\n        class=\"fill-color-picker mat-typography\"\n        *ngIf=\"linestringOnly !== true\"\n      >\n        <span>\n          <mat-icon class=\"stroke-palette-icon\" svgIcon=\"square\"></mat-icon>\n          {{ 'igo.geo.style.fill' | translate }}\n        </span>\n        <igo-color-picker-form-field\n          formControlName=\"fill\"\n          (colorChange)=\"setLayerFillColor($event)\"\n        ></igo-color-picker-form-field>\n      </div>\n\n      <div class=\"stroke-color-picker mat-typography\">\n        <span>\n          <mat-icon class=\"stroke-palette-icon\" svgIcon=\"square-outline\">\n          </mat-icon>\n          {{ 'igo.geo.style.stroke' | translate }}\n        </span>\n        <igo-color-picker-form-field\n          formControlName=\"stroke\"\n          (colorChange)=\"setLayerStrokeColor($event)\"\n        ></igo-color-picker-form-field>\n      </div>\n    </form>\n  </div>\n</div>\n<div mat-dialog-actions>\n  <button mat-raised-button (click)=\"cancel()\">\n    {{ 'igo.geo.style.cancel' | translate }}\n  </button>\n  <button mat-raised-button color=\"primary\" (click)=\"confirm()\">OK</button>\n</div>\n", styles: ["h2{font-weight:700;font-size:large}.igo-form{padding:10px}.fill-field,.stroke-field{width:130px}.fill-color-picker mat-icon{position:relative;top:7px}.fill-color-picker mat-form-field{left:8px}.stroke-color-picker mat-icon{position:relative;top:7px}.stroke-color-picker mat-form-field{left:35px}.box{width:25px;height:25px}.edition-drawing{padding:10px 0}.igo-input-container .mat-mdc-form-field+.mat-form-field{margin-left:8px}.igo-form-input-box{width:150px}button{margin-right:5px}\n"] }]
+            args: [{ selector: 'igo-style-modal-layer', template: "<h2 mat-dialog-title class=\"mat-typography\">\r\n  {{ 'igo.geo.style.styleModal' | translate }}\r\n</h2>\r\n<div mat-dialog-content>\r\n  <div class=\"edition-drawing mat-typography\">\r\n    <form class=\"igo-form\" [formGroup]=\"form\">\r\n      <div\r\n        class=\"fill-color-picker mat-typography\"\r\n        *ngIf=\"linestringOnly !== true\"\r\n      >\r\n        <span>\r\n          <mat-icon class=\"stroke-palette-icon\" svgIcon=\"square\"></mat-icon>\r\n          {{ 'igo.geo.style.fill' | translate }}\r\n        </span>\r\n        <igo-color-picker-form-field\r\n          formControlName=\"fill\"\r\n          (colorChange)=\"setLayerFillColor($event)\"\r\n        ></igo-color-picker-form-field>\r\n      </div>\r\n\r\n      <div class=\"stroke-color-picker mat-typography\">\r\n        <span>\r\n          <mat-icon class=\"stroke-palette-icon\" svgIcon=\"square-outline\">\r\n          </mat-icon>\r\n          {{ 'igo.geo.style.stroke' | translate }}\r\n        </span>\r\n        <igo-color-picker-form-field\r\n          formControlName=\"stroke\"\r\n          (colorChange)=\"setLayerStrokeColor($event)\"\r\n        ></igo-color-picker-form-field>\r\n      </div>\r\n    </form>\r\n  </div>\r\n</div>\r\n<div mat-dialog-actions>\r\n  <button mat-raised-button (click)=\"cancel()\">\r\n    {{ 'igo.geo.style.cancel' | translate }}\r\n  </button>\r\n  <button mat-raised-button color=\"primary\" (click)=\"confirm()\">OK</button>\r\n</div>\r\n", styles: ["h2{font-weight:700;font-size:large}.igo-form{padding:10px}.fill-field,.stroke-field{width:130px}.fill-color-picker mat-icon{position:relative;top:7px}.fill-color-picker mat-form-field{left:8px}.stroke-color-picker mat-icon{position:relative;top:7px}.stroke-color-picker mat-form-field{left:35px}.box{width:25px;height:25px}.edition-drawing{padding:10px 0}.igo-input-container .mat-mdc-form-field+.mat-form-field{margin-left:8px}.igo-form-input-box{width:150px}button{margin-right:5px}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$2.MatDialogRef }, { type: i2$1.UntypedFormBuilder }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
@@ -37379,11 +37422,11 @@ class StyleModalLayerButtonComponent {
         }, 250);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: StyleModalLayerButtonComponent, deps: [{ token: i1$2.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: StyleModalLayerButtonComponent, selector: "igo-style-modal-layer-button", inputs: { layer: "layer" }, ngImport: i0, 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", styles: [""], dependencies: [{ kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: StyleModalLayerButtonComponent, selector: "igo-style-modal-layer-button", inputs: { layer: "layer" }, ngImport: i0, 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", styles: [""], dependencies: [{ kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: StyleModalLayerButtonComponent, decorators: [{
             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" }]
         }], ctorParameters: function () { return [{ type: i1$2.MatDialog }]; }, propDecorators: { layer: [{
                 type: Input
             }] } });
@@ -37522,11 +37565,11 @@ class ToastComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ToastComponent, selector: "igo-toast", inputs: { expanded: "expanded", map: "map", feature: "feature" }, outputs: { opened: "opened" }, ngImport: i0, 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"], dependencies: [{ kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i9$1.PanelComponent, selector: "igo-panel", inputs: ["title", "withHeader", "cursorPointer"] }, { kind: "component", type: i9$1.FlexibleComponent, selector: "igo-flexible", inputs: ["initial", "collapsed", "expanded", "initialMobile", "collapsedMobile", "expandedMobile", "direction", "state"] }, { kind: "component", type: FeatureDetailsComponent, selector: "igo-feature-details", inputs: ["source", "map", "toolbox", "feature"], outputs: ["routeEvent", "selectFeature", "htmlDisplayEvent"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ToastComponent, selector: "igo-toast", inputs: { expanded: "expanded", map: "map", feature: "feature" }, outputs: { opened: "opened" }, ngImport: i0, 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"], dependencies: [{ kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i9$1.PanelComponent, selector: "igo-panel", inputs: ["title", "withHeader", "cursorPointer"] }, { kind: "component", type: i9$1.FlexibleComponent, selector: "igo-flexible", inputs: ["initial", "collapsed", "expanded", "initialMobile", "collapsedMobile", "expandedMobile", "direction", "state"] }, { kind: "component", type: FeatureDetailsComponent, selector: "igo-feature-details", inputs: ["source", "map", "toolbox", "feature"], outputs: ["routeEvent", "selectFeature", "htmlDisplayEvent"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToastComponent, decorators: [{
             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"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { expanded: [{
                 type: Input
             }], map: [{
@@ -37611,11 +37654,11 @@ class ConfirmationPopupComponent {
         this.dialogRef.close(this.data.cancel);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConfirmationPopupComponent, deps: [{ token: i1$2.MatDialogRef }, { token: i2.LanguageService }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ConfirmationPopupComponent, selector: "igo-confirmation-popup-component", ngImport: i0, 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"], dependencies: [{ kind: "component", type: i4$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ConfirmationPopupComponent, selector: "igo-confirmation-popup-component", ngImport: i0, 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"], dependencies: [{ kind: "component", type: i4$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConfirmationPopupComponent, decorators: [{
             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"] }]
         }], ctorParameters: function () { return [{ type: i1$2.MatDialogRef }, { type: i2.LanguageService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
@@ -37677,11 +37720,11 @@ class OgcFilterComponent {
         this.cancel.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: OgcFilterComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: OgcFilterComponent, selector: "igo-ogc-filter", inputs: { layer: "layer", map: "map" }, outputs: { complete: "complete", cancel: "cancel" }, ngImport: i0, template: "<igo-ogc-filterable-item\n  igoListItem\n  [layer]=\"layer\"\n  [header]=\"false\"\n  [map]=\"map\"\n>\n</igo-ogc-filterable-item>\n", styles: [""], dependencies: [{ kind: "component", type: OgcFilterableItemComponent, selector: "igo-ogc-filterable-item", inputs: ["layer", "map", "header"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: OgcFilterComponent, selector: "igo-ogc-filter", inputs: { layer: "layer", map: "map" }, outputs: { complete: "complete", cancel: "cancel" }, ngImport: i0, 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", styles: [""], dependencies: [{ kind: "component", type: OgcFilterableItemComponent, selector: "igo-ogc-filterable-item", inputs: ["layer", "map", "header"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: OgcFilterComponent, decorators: [{
             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" }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { layer: [{
                 type: Input
             }], map: [{
@@ -40225,7 +40268,7 @@ class NominatimSearchSource extends SearchSource {
                         },
                         {
                             title: 'igo.geo.search.nominatim.type.entertainment',
-                            value: 'arts_centre,brothel,casino,cinema,community_center_fountain,gambling,nightclub,planetarium \
+                            value: 'arts_centre,brothel,casino,cinema,community_center_fountain,gambling,nightclub,planetarium \
                           ,public_bookcase,social_centre,stripclub,studio,swingerclub,theatre,internet_cafe',
                             enabled: false
                         },
@@ -41257,5 +41300,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AddCatalogDialogComponent, ArcGISRestDataSource, BaseLayersSwitcherComponent, CadastreSearchSource, CapabilitiesService, CartoDataSource, Catalog, CatalogBrowserComponent, CatalogItemType, CatalogLibaryComponent, CatalogService, ClusterDataSource, ConfigFileToGeoDBService, ConfirmationPopupComponent, CoordinatesReverseSearchSource, CoordinatesReverseSearchSourceFactory, CoordinatesSearchResultFormatter, CoordinatesUnit, DDtoDMS, DataService, DataSource, DataSourceService, DirectionRelativePositionType, DirectionType, DirectionsButtonsComponent, DirectionsComponent, DirectionsFormat, DirectionsInputsComponent, DirectionsResultsComponent, DirectionsService, DirectionsSource, DownloadButtonComponent, DownloadService, DrawComponent, DrawControl, DrawIconService, DrawStyleService, DropGeoFileDirective, EditionWorkspace, EditionWorkspaceService, EncodingFormat, EsriStyleGenerator, ExportButtonComponent, ExportError, ExportFormat, ExportInvalidFileError, ExportNothingToExportError, ExportService, FEATURE, FeatureDataSource, FeatureDetailsComponent, FeatureDetailsDirective, FeatureFormComponent, FeatureMotion, FeatureStore, FeatureStoreInMapExtentStrategy, FeatureStoreInMapResolutionStrategy, FeatureStoreLoadingLayerStrategy, FeatureStoreLoadingStrategy, FeatureStoreSearchIndexStrategy, FeatureStoreSelectionStrategy, FeatureWorkspace, FeatureWorkspaceService, FilterableDataSourcePipe, GeoDBService, GeoNetworkService, GeoPropertiesStrategy, GeolocateButtonComponent, GeolocationOverlayType, GeometryFormFieldComponent, GeometryFormFieldInputComponent, GeometrySliceError, GeometrySliceLineStringError, GeometrySliceMultiPolygonError, GeometrySliceTooManyIntersectionError, GeometryType, GoogleLinks, HomeExtentButtonComponent, HoverFeatureDirective, IChercheReverseSearchSource, IChercheSearchResultFormatter, IChercheSearchSource, ILayerSearchResultFormatter, ILayerSearchSource, IgoCatalogBrowserModule, IgoCatalogLibraryModule, IgoCatalogModule, IgoConfirmationPopupModule, IgoDataSourceModule, IgoDirectionsModule, IgoDownloadModule, IgoDrawModule, IgoDrawingToolModule, IgoFeatureDetailsModule, IgoFeatureFormModule, IgoFeatureModule, IgoFilterModule, IgoGeoModule, IgoGeoWorkspaceModule, IgoGeometryFormFieldModule, IgoGeometryModule, IgoHttpParameterCodec, IgoImportExportModule, IgoLayerModule, IgoMap, IgoMapModule, IgoMeasureModule, IgoMeasurerModule, IgoMetadataModule, IgoOgcFilterModule, IgoOverlayModule, IgoPrintModule, IgoQueryModule, IgoSearchBarModule, IgoSearchModule, IgoSearchResultsModule, IgoSearchSelectorModule, IgoSearchSettingsModule, IgoStyleListModule, IgoStyleModule, IgoToastModule, IgoWktModule, IgoWorkspaceSelectorModule, IgoWorkspaceUpdatorModule, ImageArcGISRestDataSource, ImageLayer, ImageWatcher, ImportError, ImportExportComponent, ImportInvalidFileError, ImportNothingToImportError, ImportOgreServerError, ImportSRSError, ImportService, ImportSizeError, ImportUnreadableFileError, InfoSectionComponent, InsertSourceInsertDBEnum, LAYER, LabelType, Layer, LayerDBService, LayerItemComponent, LayerLegendComponent, LayerLegendItemComponent, LayerLegendListBindingDirective, LayerLegendListComponent, LayerListBindingDirective, LayerListComponent, LayerListControlsEnum, LayerListDisplacement, LayerListSelectVisibleEnum, LayerListToolComponent, LayerListToolControlsEnum, LayerListToolService, LayerService, LinkedProperties, MEASURE_UNIT_AUTO, MVTDataSource, MapBase, MapBrowserComponent, MapCenterComponent, MapController, MapGeolocationController, MapOfflineDirective, MapService, MapViewAction, MapViewController, MeasureAreaUnit, MeasureAreaUnitAbbreviation, MeasureFormatPipe, MeasureLengthUnit, MeasureLengthUnitAbbreviation, MeasureType, MeasurerComponent, MenuButtonComponent, MetadataAbstractComponent, MetadataButtonComponent, MetadataService, MiniBaseMapComponent, ModifyControl, NominatimSearchSource, OGCFilterService, OSMDataSource, OfflineButtonComponent, OgcFilterButtonComponent, OgcFilterComponent, OgcFilterFormComponent, OgcFilterOperator, OgcFilterOperatorType, OgcFilterSelectionComponent, OgcFilterTimeComponent, OgcFilterTimeSliderComponent, OgcFilterWidget, OgcFilterWriter, OgcFilterableFormComponent, OgcFilterableItemComponent, OgcFilterableListBindingDirective, OgcFilterableListComponent, OlDragSelectInteraction, OptionsApiService, OptionsService, OsmLinks, OsrmDirectionsSource, Overlay, OverlayAction, OverlayDirective, OverlayService, PointerPositionDirective, PrintComponent, PrintFormComponent, PrintLegendPosition, PrintOrientation, PrintOutputFormat, PrintPaperFormat, PrintResolution, PrintSaveImageFormat, PrintService, ProjectionService, PropertyTypeDetectorService, ProposalType, QueryDirective, QueryFormat, QueryFormatMimeType, QueryHtmlTarget, QuerySearchSource, QueryService, ResponseType, RotationButtonComponent, RoutesFeatureStore, SEARCH_TYPES, STYLELIST_OPTIONS, SearchBarComponent, SearchPointerSummaryDirective, SearchResultAddButtonComponent, SearchResultMode, SearchResultsComponent, SearchResultsItemComponent, SearchSelectorComponent, SearchService, SearchSettingsComponent, SearchSource, SearchSourceService, SliceControl, SourceDirectionsType, SpatialFilterItemComponent, SpatialFilterItemType, SpatialFilterListComponent, SpatialFilterQueryType, SpatialFilterService, SpatialFilterType, SpatialFilterTypeComponent, StepFeatureStore, StopsFeatureStore, StopsStore, StoredQueriesReverseSearchSource, StoredQueriesSearchSource, StyleListService, StyleModalDrawingComponent, StyleModalLayerButtonComponent, StyleModalLayerComponent, StyleService, SwipeControlComponent, TileArcGISRestDataSource, TileDebugDataSource, TileLayer, TileWatcher, TimeFilterButtonComponent, TimeFilterFormComponent, TimeFilterItemComponent, TimeFilterListBindingDirective, TimeFilterListComponent, TimeFilterService, TimeFilterStyle, TimeFilterType, ToastComponent, TooltipType, TrackFeatureButtonComponent, TypeCapabilities, TypeCatalog, VectorLayer, VectorTileLayer, VectorWatcher, WFSDataSource, WFSService, WMSDataSource, WMTSDataSource, WakeLockButtonComponent, WebSocketDataSource, WfsWorkspace, WfsWorkspaceService, WktService, WorkspaceSearchSource, WorkspaceSelectorDirective, WorkspaceUpdatorDirective, XYZDataSource, ZoomButtonComponent, addDirectionToRoutesFeatureStore, addLayerAndFeaturesStyledToMap, addLayerAndFeaturesToMap, addLinearRingToOlPolygon, addOrRemoveLayer, addStopToStopsFeatureStore, addStopToStore, buildUrl, cadastreSearchSourceFactory, checkWfsParams, clearOlGeometryMidpoints, computeBestAreaUnit, computeBestLengthUnit, computeLayerTitleFromFile, computeMVTOptionsOnHover, computeOlFeatureExtent, computeOlFeaturesDiff, computeOlFeaturesExtent, computeProjectionsConstraints, computeRelativePosition, computeStopsPosition, computeTermSimilarity, convertDDToDMS, createDefaultTileGrid, createDrawHoleInteractionStyle, createDrawInteractionStyle, createFilterInMapExtentOrResolutionStrategy, createInteractionStyle, createMeasureInteractionStyle, createMeasureLayerStyle, createOlTooltipAtPoint, createOlTooltipDrawAtPoint, createOverlayDefaultStyle, createOverlayLayer, createOverlayLayerStyle, createOverlayMarkerStyle, createTableTemplate, ctrlKeyDown, defaultCoordinatesSearchResultFormatterFactory, defaultEpsg, defaultFieldNameGeometry, defaultIChercheSearchResultFormatterFactory, defaultMaxFeatures, defaultWfsVersion, directionsStyle, entitiesToRowData, exportToCSV, featureFromOl, featureRandomStyle, featureRandomStyleFunction, featureToOl, featureToSearchResult, featuresAreOutOfView, featuresAreTooDeepInView, findDiff, formatDistance, formatDuration, formatInstruction, formatMeasure, formatScale, formatWFSQueryString, generateArcgisRestIdFromSourceOptions, generateFeatureIdFromSourceOptions, generateId, generateIdFromSourceOptions, generateWMSIdFromSourceOptions, generateWMTSIdFromSourceOptions, generateWfsIdFromSourceOptions, generateXYZIdFromSourceOptions, getAllChildLayersByDeletion, getAllChildLayersByProperty, getCommonVectorSelectedStyle, getCommonVectorStyle, getDirectChildLayersByDeletion, getDirectChildLayersByProperty, getDirectParentLayerByDeletion, getDirectParentLayerByProperty, getFileExtension, getFormatFromOptions, getGeoServiceAction, getIgoLayerByLinkId, getLayersLegends, getLinkedLayersOptions, getMousePositionFromOlGeometryEvent, getOlTooltipAtCenter, getOlTooltipsAtMidpoints, getResolutionFromScale, getRootParentByDeletion, getRootParentByProperty, getRowsInMapExtent, getScaleFromResolution, getSelectedOnly, getTooltipsOfOlGeometry, gmlRegex, handleFileExportError, handleFileExportSuccess, handleFileImportError, handleFileImportSuccess, handleInvalidFileImportError, handleLayerPropertyChange, handleNothingToExportError, handleNothingToImportError, handleOgreServerImportError, handleSRSImportError, handleSizeFileImportError, handleUnreadbleFileImportError, hideOlFeature, hoverFeatureMarkerStyle, ichercheReverseSearchSourceFactory, ichercheSearchSourceFactory, ilayerSearchResultFormatterFactory, ilayerSearchSourceFactory, initLayerSyncFromRootParentLayers, initRoutesFeatureStore, initStepFeatureStore, initStopsFeatureStore, jsonRegex, layerFeatureIsQueryable, layerHasLinkDeletion, layerHasLinkWithProperty, layerIsQueryable, lonLatConversion, mapExtentStrategyActiveToolTip, measureOlGeometry, measureOlGeometryArea, measureOlGeometryLength, metersToFeet, metersToKilometers, metersToMiles, metersToUnit, moveToOlFeatures, mtmZoneFromLonLat, noElementSelected, nominatimSearchSourceFactory, ogcFilterWidgetFactory, olLayerFeatureIsQueryable, olLayerIsQueryable, olStyleToBasicIgoStyle, optionsApiFactory, osrmDirectionsSourcesFactory, pointerPositionSummaryMarkerStyle, provideCadastreSearchSource, provideCoordinatesReverseSearchSource, provideDefaultCoordinatesSearchResultFormatter, provideDefaultIChercheSearchResultFormatter, provideIChercheReverseSearchSource, provideIChercheSearchSource, provideILayerSearchResultFormatter, provideILayerSearchSource, provideNominatimSearchSource, provideOgcFilterWidget, provideOptionsApi, provideOsrmDirectionsSource, provideSearchSourceService, provideStoredQueriesReverseSearchSource, provideStoredQueriesSearchSource, provideStyleListLoader, provideStyleListOptions, provideWorkspaceSearchSource, removeStopFromStore, renderFeatureFromOl, roundCoordTo, roundCoordToString, scaleExtent, searchSourceServiceFactory, setRowsInMapExtent, setSelectedOnly, sliceOlGeometry, sliceOlLineString, sliceOlPolygon, sourceCanReverseSearch, sourceCanReverseSearchAsSummary, sourceCanSearch, squareMetersToAcres, squareMetersToHectares, squareMetersToSquareFeet, squareMetersToSquareKilometers, squareMetersToSquareMiles, squareMetersToUnit, standardizeUrl, storedqueriesReverseSearchSourceFactory, storedqueriesSearchSourceFactory, stringToLonLat, styleListFactory, translateBearing, translateModifier, tryAddLoadingStrategy, tryAddSelectionStrategy, tryBindStoreLayer, updateOlGeometryCenter, updateOlGeometryMidpoints, updateOlTooltipAtCenter, updateOlTooltipDrawAtCenter, updateOlTooltipsAtMidpoints, updateOlTooltipsDrawAtMidpoints, updateStoreSorting, utmZoneFromLonLat, viewStatesAreEqual, workspaceSearchSourceFactory, zoneMtm, zoneUtm };
+export { AddCatalogDialogComponent, ArcGISRestCapabilitiesLayerTypes, ArcGISRestDataSource, BaseLayersSwitcherComponent, CadastreSearchSource, CapabilitiesService, CartoDataSource, Catalog, CatalogBrowserComponent, CatalogItemType, CatalogLibaryComponent, CatalogService, ClusterDataSource, ConfigFileToGeoDBService, ConfirmationPopupComponent, CoordinatesReverseSearchSource, CoordinatesReverseSearchSourceFactory, CoordinatesSearchResultFormatter, CoordinatesUnit, DDtoDMS, DataService, DataSource, DataSourceService, DirectionRelativePositionType, DirectionType, DirectionsButtonsComponent, DirectionsComponent, DirectionsFormat, DirectionsInputsComponent, DirectionsResultsComponent, DirectionsService, DirectionsSource, DownloadButtonComponent, DownloadService, DrawComponent, DrawControl, DrawIconService, DrawStyleService, DropGeoFileDirective, EditionWorkspace, EditionWorkspaceService, EncodingFormat, EsriStyleGenerator, ExportButtonComponent, ExportError, ExportFormat, ExportInvalidFileError, ExportNothingToExportError, ExportService, FEATURE, FeatureDataSource, FeatureDetailsComponent, FeatureDetailsDirective, FeatureFormComponent, FeatureMotion, FeatureStore, FeatureStoreInMapExtentStrategy, FeatureStoreInMapResolutionStrategy, FeatureStoreLoadingLayerStrategy, FeatureStoreLoadingStrategy, FeatureStoreSearchIndexStrategy, FeatureStoreSelectionStrategy, FeatureWorkspace, FeatureWorkspaceService, FilterableDataSourcePipe, GeoDBService, GeoNetworkService, GeoPropertiesStrategy, GeolocateButtonComponent, GeolocationOverlayType, GeometryFormFieldComponent, GeometryFormFieldInputComponent, GeometrySliceError, GeometrySliceLineStringError, GeometrySliceMultiPolygonError, GeometrySliceTooManyIntersectionError, GeometryType, GoogleLinks, HomeExtentButtonComponent, HoverFeatureDirective, IChercheReverseSearchSource, IChercheSearchResultFormatter, IChercheSearchSource, ILayerSearchResultFormatter, ILayerSearchSource, IgoCatalogBrowserModule, IgoCatalogLibraryModule, IgoCatalogModule, IgoConfirmationPopupModule, IgoDataSourceModule, IgoDirectionsModule, IgoDownloadModule, IgoDrawModule, IgoDrawingToolModule, IgoFeatureDetailsModule, IgoFeatureFormModule, IgoFeatureModule, IgoFilterModule, IgoGeoModule, IgoGeoWorkspaceModule, IgoGeometryFormFieldModule, IgoGeometryModule, IgoHttpParameterCodec, IgoImportExportModule, IgoLayerModule, IgoMap, IgoMapModule, IgoMeasureModule, IgoMeasurerModule, IgoMetadataModule, IgoOgcFilterModule, IgoOverlayModule, IgoPrintModule, IgoQueryModule, IgoSearchBarModule, IgoSearchModule, IgoSearchResultsModule, IgoSearchSelectorModule, IgoSearchSettingsModule, IgoStyleListModule, IgoStyleModule, IgoToastModule, IgoWktModule, IgoWorkspaceSelectorModule, IgoWorkspaceUpdatorModule, ImageArcGISRestDataSource, ImageLayer, ImageWatcher, ImportError, ImportExportComponent, ImportInvalidFileError, ImportNothingToImportError, ImportOgreServerError, ImportSRSError, ImportService, ImportSizeError, ImportUnreadableFileError, InfoSectionComponent, InsertSourceInsertDBEnum, LAYER, LabelType, Layer, LayerDBService, LayerItemComponent, LayerLegendComponent, LayerLegendItemComponent, LayerLegendListBindingDirective, LayerLegendListComponent, LayerListBindingDirective, LayerListComponent, LayerListControlsEnum, LayerListDisplacement, LayerListSelectVisibleEnum, LayerListToolComponent, LayerListToolControlsEnum, LayerListToolService, LayerService, LinkedProperties, MEASURE_UNIT_AUTO, MVTDataSource, MapBase, MapBrowserComponent, MapCenterComponent, MapController, MapGeolocationController, MapOfflineDirective, MapService, MapViewAction, MapViewController, MeasureAreaUnit, MeasureAreaUnitAbbreviation, MeasureFormatPipe, MeasureLengthUnit, MeasureLengthUnitAbbreviation, MeasureType, MeasurerComponent, MenuButtonComponent, MetadataAbstractComponent, MetadataButtonComponent, MetadataService, MiniBaseMapComponent, ModifyControl, NominatimSearchSource, OGCFilterService, OSMDataSource, OfflineButtonComponent, OgcFilterButtonComponent, OgcFilterComponent, OgcFilterFormComponent, OgcFilterOperator, OgcFilterOperatorType, OgcFilterSelectionComponent, OgcFilterTimeComponent, OgcFilterTimeSliderComponent, OgcFilterWidget, OgcFilterWriter, OgcFilterableFormComponent, OgcFilterableItemComponent, OgcFilterableListBindingDirective, OgcFilterableListComponent, OlDragSelectInteraction, OptionsApiService, OptionsService, OsmLinks, OsrmDirectionsSource, Overlay, OverlayAction, OverlayDirective, OverlayService, PointerPositionDirective, PrintComponent, PrintFormComponent, PrintLegendPosition, PrintOrientation, PrintOutputFormat, PrintPaperFormat, PrintResolution, PrintSaveImageFormat, PrintService, ProjectionService, PropertyTypeDetectorService, ProposalType, QueryDirective, QueryFormat, QueryFormatMimeType, QueryHtmlTarget, QuerySearchSource, QueryService, ResponseType, RotationButtonComponent, RoutesFeatureStore, SEARCH_TYPES, STYLELIST_OPTIONS, SearchBarComponent, SearchPointerSummaryDirective, SearchResultAddButtonComponent, SearchResultMode, SearchResultsComponent, SearchResultsItemComponent, SearchSelectorComponent, SearchService, SearchSettingsComponent, SearchSource, SearchSourceService, SliceControl, SourceDirectionsType, SpatialFilterItemComponent, SpatialFilterItemType, SpatialFilterListComponent, SpatialFilterQueryType, SpatialFilterService, SpatialFilterType, SpatialFilterTypeComponent, StepFeatureStore, StopsFeatureStore, StopsStore, StoredQueriesReverseSearchSource, StoredQueriesSearchSource, StyleListService, StyleModalDrawingComponent, StyleModalLayerButtonComponent, StyleModalLayerComponent, StyleService, SwipeControlComponent, TileArcGISRestDataSource, TileDebugDataSource, TileLayer, TileWatcher, TimeFilterButtonComponent, TimeFilterFormComponent, TimeFilterItemComponent, TimeFilterListBindingDirective, TimeFilterListComponent, TimeFilterService, TimeFilterStyle, TimeFilterType, ToastComponent, TooltipType, TrackFeatureButtonComponent, TypeCapabilities, TypeCatalog, VectorLayer, VectorTileLayer, VectorWatcher, WFSDataSource, WFSService, WMSDataSource, WMTSDataSource, WakeLockButtonComponent, WebSocketDataSource, WfsWorkspace, WfsWorkspaceService, WktService, WorkspaceSearchSource, WorkspaceSelectorDirective, WorkspaceUpdatorDirective, XYZDataSource, ZoomButtonComponent, addDirectionToRoutesFeatureStore, addLayerAndFeaturesStyledToMap, addLayerAndFeaturesToMap, addLinearRingToOlPolygon, addOrRemoveLayer, addStopToStopsFeatureStore, addStopToStore, buildUrl, cadastreSearchSourceFactory, checkWfsParams, clearOlGeometryMidpoints, computeBestAreaUnit, computeBestLengthUnit, computeLayerTitleFromFile, computeMVTOptionsOnHover, computeOlFeatureExtent, computeOlFeaturesDiff, computeOlFeaturesExtent, computeProjectionsConstraints, computeRelativePosition, computeStopsPosition, computeTermSimilarity, convertDDToDMS, createDefaultTileGrid, createDrawHoleInteractionStyle, createDrawInteractionStyle, createFilterInMapExtentOrResolutionStrategy, createInteractionStyle, createMeasureInteractionStyle, createMeasureLayerStyle, createOlTooltipAtPoint, createOlTooltipDrawAtPoint, createOverlayDefaultStyle, createOverlayLayer, createOverlayLayerStyle, createOverlayMarkerStyle, createTableTemplate, ctrlKeyDown, defaultCoordinatesSearchResultFormatterFactory, defaultEpsg, defaultFieldNameGeometry, defaultIChercheSearchResultFormatterFactory, defaultMaxFeatures, defaultWfsVersion, directionsStyle, entitiesToRowData, exportToCSV, featureFromOl, featureRandomStyle, featureRandomStyleFunction, featureToOl, featureToSearchResult, featuresAreOutOfView, featuresAreTooDeepInView, findDiff, formatDistance, formatDuration, formatInstruction, formatMeasure, formatScale, formatWFSQueryString, generateArcgisRestIdFromSourceOptions, generateFeatureIdFromSourceOptions, generateId, generateIdFromSourceOptions, generateWMSIdFromSourceOptions, generateWMTSIdFromSourceOptions, generateWfsIdFromSourceOptions, generateXYZIdFromSourceOptions, getAllChildLayersByDeletion, getAllChildLayersByProperty, getCommonVectorSelectedStyle, getCommonVectorStyle, getDirectChildLayersByDeletion, getDirectChildLayersByProperty, getDirectParentLayerByDeletion, getDirectParentLayerByProperty, getFileExtension, getFormatFromOptions, getGeoServiceAction, getIgoLayerByLinkId, getLayersLegends, getLinkedLayersOptions, getMousePositionFromOlGeometryEvent, getOlTooltipAtCenter, getOlTooltipsAtMidpoints, getResolutionFromScale, getRootParentByDeletion, getRootParentByProperty, getRowsInMapExtent, getScaleFromResolution, getSelectedOnly, getTooltipsOfOlGeometry, gmlRegex, handleFileExportError, handleFileExportSuccess, handleFileImportError, handleFileImportSuccess, handleInvalidFileImportError, handleLayerPropertyChange, handleNothingToExportError, handleNothingToImportError, handleOgreServerImportError, handleSRSImportError, handleSizeFileImportError, handleUnreadbleFileImportError, hideOlFeature, hoverFeatureMarkerStyle, ichercheReverseSearchSourceFactory, ichercheSearchSourceFactory, ilayerSearchResultFormatterFactory, ilayerSearchSourceFactory, initLayerSyncFromRootParentLayers, initRoutesFeatureStore, initStepFeatureStore, initStopsFeatureStore, jsonRegex, layerFeatureIsQueryable, layerHasLinkDeletion, layerHasLinkWithProperty, layerIsQueryable, lonLatConversion, mapExtentStrategyActiveToolTip, measureOlGeometry, measureOlGeometryArea, measureOlGeometryLength, metersToFeet, metersToKilometers, metersToMiles, metersToUnit, moveToOlFeatures, mtmZoneFromLonLat, noElementSelected, nominatimSearchSourceFactory, ogcFilterWidgetFactory, olLayerFeatureIsQueryable, olLayerIsQueryable, olStyleToBasicIgoStyle, optionsApiFactory, osrmDirectionsSourcesFactory, pointerPositionSummaryMarkerStyle, provideCadastreSearchSource, provideCoordinatesReverseSearchSource, provideDefaultCoordinatesSearchResultFormatter, provideDefaultIChercheSearchResultFormatter, provideIChercheReverseSearchSource, provideIChercheSearchSource, provideILayerSearchResultFormatter, provideILayerSearchSource, provideNominatimSearchSource, provideOgcFilterWidget, provideOptionsApi, provideOsrmDirectionsSource, provideSearchSourceService, provideStoredQueriesReverseSearchSource, provideStoredQueriesSearchSource, provideStyleListLoader, provideStyleListOptions, provideWorkspaceSearchSource, removeStopFromStore, renderFeatureFromOl, roundCoordTo, roundCoordToString, scaleExtent, searchSourceServiceFactory, setRowsInMapExtent, setSelectedOnly, sliceOlGeometry, sliceOlLineString, sliceOlPolygon, sourceCanReverseSearch, sourceCanReverseSearchAsSummary, sourceCanSearch, squareMetersToAcres, squareMetersToHectares, squareMetersToSquareFeet, squareMetersToSquareKilometers, squareMetersToSquareMiles, squareMetersToUnit, standardizeUrl, storedqueriesReverseSearchSourceFactory, storedqueriesSearchSourceFactory, stringToLonLat, styleListFactory, translateBearing, translateModifier, tryAddLoadingStrategy, tryAddSelectionStrategy, tryBindStoreLayer, updateOlGeometryCenter, updateOlGeometryMidpoints, updateOlTooltipAtCenter, updateOlTooltipDrawAtCenter, updateOlTooltipsAtMidpoints, updateOlTooltipsDrawAtMidpoints, updateStoreSorting, utmZoneFromLonLat, viewStatesAreEqual, workspaceSearchSourceFactory, zoneMtm, zoneUtm };
 //# sourceMappingURL=igo2-geo.mjs.map