@igo2/geo 16.0.0-rc.2 → 16.0.0-rc.3

package/fesm2022/igo2-geo.mjs

@@ -10567,7 +10567,7 @@ class LayerLegendItemComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LayerLegendItemComponent, [{
         type: Component,
-        args: [{ selector: 'igo-layer-legend-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-list-item class=\"igo-layer-list-item\">\n  <span\n    matListItemTitle\n    class=\"igo-layer-title\"\n    [matTooltip]=\"tooltipText\"\n    matTooltipShowDelay=\"500\"\n    >{{ layer.title }}</span\n  >\n</mat-list-item>\n\n<div #legend class=\"igo-layer-legend-container\">\n  <igo-layer-legend\n    [layer]=\"layer\"\n    [updateLegendOnResolutionChange]=\"updateLegendOnResolutionChange\"\n  >\n  </igo-layer-legend>\n</div>\n", styles: [":host{overflow:hidden}:host .igo-layer-list-item{height:48px;clear:both}:host .igo-layer-legend-container{padding-left:18px;width:calc(100% - 18px)}\n"] }]
+        args: [{ selector: 'igo-layer-legend-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-list-item class=\"igo-layer-list-item\">\r\n  <span\r\n    matListItemTitle\r\n    class=\"igo-layer-title\"\r\n    [matTooltip]=\"tooltipText\"\r\n    matTooltipShowDelay=\"500\"\r\n    >{{ layer.title }}</span\r\n  >\r\n</mat-list-item>\r\n\r\n<div #legend class=\"igo-layer-legend-container\">\r\n  <igo-layer-legend\r\n    [layer]=\"layer\"\r\n    [updateLegendOnResolutionChange]=\"updateLegendOnResolutionChange\"\r\n  >\r\n  </igo-layer-legend>\r\n</div>\r\n", styles: [":host{overflow:hidden}:host .igo-layer-list-item{height:48px;clear:both}:host .igo-layer-legend-container{padding-left:18px;width:calc(100% - 18px)}\n"] }]
     }], function () { return [{ type: i2.NetworkService }]; }, { layer: [{
             type: Input
         }], updateLegendOnResolutionChange: [{
@@ -10756,7 +10756,7 @@ class LayerLegendListComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LayerLegendListComponent, [{
         type: Component,
-        args: [{ selector: 'igo-layer-legend-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"layer-legend-list-container\">\n  <mat-slide-toggle\n    tooltip-position=\"above\"\n    matTooltipShowDelay=\"500\"\n    [matTooltip]=\"'igo.geo.layer.legend.showAll' | translate\"\n    [checked]=\"showAllLegendsValue\"\n    class=\"mat-typography\"\n    *ngIf=\"(layersInUi$ | async).length && allowShowAllLegends\"\n    [labelPosition]=\"'before'\"\n    (change)=\"toggleShowAllLegends($event.checked)\"\n  >\n    {{ 'igo.geo.layer.legend.showAll' | translate }}\n  </mat-slide-toggle>\n  <mat-divider\n    *ngIf=\"(layersInUi$ | async).length && allowShowAllLegends\"\n  ></mat-divider>\n  <igo-list [navigation]=\"false\" [selection]=\"false\">\n    <ng-template ngFor let-layer let-i=\"index\" [ngForOf]=\"layers$ | async\">\n      <igo-layer-legend-item\n        *ngIf=\"!(excludeBaseLayers && layer.baseLayer)\"\n        igoListItem\n        [layer]=\"layer\"\n        [updateLegendOnResolutionChange]=\"updateLegendOnResolutionChange\"\n      >\n      </igo-layer-legend-item>\n    </ng-template>\n  </igo-list>\n  <p\n    class=\"layers-empty mat-typography\"\n    *ngIf=\"\n      !showAllLegendsValue &&\n      (layersInUi$ | async).length &&\n      (hasVisibleOrInRangeLayers$ | async) === false &&\n      (hasVisibleAndNotInRangeLayers$ | async) === false &&\n      allowShowAllLegends\n    \"\n  >\n    {{ 'igo.geo.layer.legend.noLayersVisibleWithShowAllButton' | translate }}\n  </p>\n  <p\n    class=\"layers-empty mat-typography\"\n    *ngIf=\"\n      !showAllLegendsValue &&\n      (layersInUi$ | async).length &&\n      (hasVisibleOrInRangeLayers$ | async) === false &&\n      (hasVisibleAndNotInRangeLayers$ | async) &&\n      allowShowAllLegends\n    \"\n  >\n    {{\n      'igo.geo.layer.legend.noLayersVisibleWithShowAllButtonButZoom' | translate\n    }}\n  </p>\n  <p\n    class=\"layers-empty mat-typography\"\n    *ngIf=\"\n      (layersInUi$ | async).length &&\n      (hasVisibleOrInRangeLayers$ | async) === false &&\n      (hasVisibleAndNotInRangeLayers$ | async) === false &&\n      !allowShowAllLegends\n    \"\n  >\n    {{ 'igo.geo.layer.legend.noLayersVisible' | translate }}\n  </p>\n  <p\n    class=\"layers-empty mat-typography\"\n    *ngIf=\"\n      (layersInUi$ | async).length &&\n      (hasVisibleOrInRangeLayers$ | async) === false &&\n      (hasVisibleAndNotInRangeLayers$ | async) &&\n      !allowShowAllLegends\n    \"\n  >\n    {{ 'igo.geo.layer.legend.noLayersVisibleButZoom' | translate }}\n  </p>\n</div>\n", styles: [":host mat-slide-toggle{width:100%;padding:10px}:host mat-slide-toggle ::ng-deep .mdc-form-field{width:100%}:host mat-slide-toggle ::ng-deep .mdc-label{margin-left:0;width:calc(100% - 60px)}:host igo-list{display:contents}:host .layers-empty{text-align:justify;margin:10px}:host .layer-legend-list-container{max-height:100%;overflow:auto}\n"] }]
+        args: [{ selector: 'igo-layer-legend-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"layer-legend-list-container\">\r\n  <mat-slide-toggle\r\n    tooltip-position=\"above\"\r\n    matTooltipShowDelay=\"500\"\r\n    [matTooltip]=\"'igo.geo.layer.legend.showAll' | translate\"\r\n    [checked]=\"showAllLegendsValue\"\r\n    class=\"mat-typography\"\r\n    *ngIf=\"(layersInUi$ | async).length && allowShowAllLegends\"\r\n    [labelPosition]=\"'before'\"\r\n    (change)=\"toggleShowAllLegends($event.checked)\"\r\n  >\r\n    {{ 'igo.geo.layer.legend.showAll' | translate }}\r\n  </mat-slide-toggle>\r\n  <mat-divider\r\n    *ngIf=\"(layersInUi$ | async).length && allowShowAllLegends\"\r\n  ></mat-divider>\r\n  <igo-list [navigation]=\"false\" [selection]=\"false\">\r\n    <ng-template ngFor let-layer let-i=\"index\" [ngForOf]=\"layers$ | async\">\r\n      <igo-layer-legend-item\r\n        *ngIf=\"!(excludeBaseLayers && layer.baseLayer)\"\r\n        igoListItem\r\n        [layer]=\"layer\"\r\n        [updateLegendOnResolutionChange]=\"updateLegendOnResolutionChange\"\r\n      >\r\n      </igo-layer-legend-item>\r\n    </ng-template>\r\n  </igo-list>\r\n  <p\r\n    class=\"layers-empty mat-typography\"\r\n    *ngIf=\"\r\n      !showAllLegendsValue &&\r\n      (layersInUi$ | async).length &&\r\n      (hasVisibleOrInRangeLayers$ | async) === false &&\r\n      (hasVisibleAndNotInRangeLayers$ | async) === false &&\r\n      allowShowAllLegends\r\n    \"\r\n  >\r\n    {{ 'igo.geo.layer.legend.noLayersVisibleWithShowAllButton' | translate }}\r\n  </p>\r\n  <p\r\n    class=\"layers-empty mat-typography\"\r\n    *ngIf=\"\r\n      !showAllLegendsValue &&\r\n      (layersInUi$ | async).length &&\r\n      (hasVisibleOrInRangeLayers$ | async) === false &&\r\n      (hasVisibleAndNotInRangeLayers$ | async) &&\r\n      allowShowAllLegends\r\n    \"\r\n  >\r\n    {{\r\n      'igo.geo.layer.legend.noLayersVisibleWithShowAllButtonButZoom' | translate\r\n    }}\r\n  </p>\r\n  <p\r\n    class=\"layers-empty mat-typography\"\r\n    *ngIf=\"\r\n      (layersInUi$ | async).length &&\r\n      (hasVisibleOrInRangeLayers$ | async) === false &&\r\n      (hasVisibleAndNotInRangeLayers$ | async) === false &&\r\n      !allowShowAllLegends\r\n    \"\r\n  >\r\n    {{ 'igo.geo.layer.legend.noLayersVisible' | translate }}\r\n  </p>\r\n  <p\r\n    class=\"layers-empty mat-typography\"\r\n    *ngIf=\"\r\n      (layersInUi$ | async).length &&\r\n      (hasVisibleOrInRangeLayers$ | async) === false &&\r\n      (hasVisibleAndNotInRangeLayers$ | async) &&\r\n      !allowShowAllLegends\r\n    \"\r\n  >\r\n    {{ 'igo.geo.layer.legend.noLayersVisibleButZoom' | translate }}\r\n  </p>\r\n</div>\r\n", styles: [":host mat-slide-toggle{width:100%;padding:10px}:host mat-slide-toggle ::ng-deep .mdc-form-field{width:100%}:host mat-slide-toggle ::ng-deep .mdc-label{margin-left:0;width:calc(100% - 60px)}:host igo-list{display:contents}:host .layers-empty{text-align:justify;margin:10px}:host .layer-legend-list-container{max-height:100%;overflow:auto}\n"] }]
     }], function () { return []; }, { layers: [{
             type: Input
         }], excludeBaseLayers: [{
@@ -11213,7 +11213,7 @@ class LayerLegendComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LayerLegendComponent, [{
         type: Component,
-        args: [{ selector: 'igo-layer-legend', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"legendItems$ | async as items\">\n  <ng-container *ngIf=\"items.length; else noItems\">\n    <ng-container *ngFor=\"let item of items.slice().reverse()\" #renderedLegends>\n      <div *ngIf=\"getLegend; else noItems\">\n        <mat-list-item *ngIf=\"item.title\">\n          <mat-icon\n            id=\"legend-toggle\"\n            class=\"igo-chevron\"\n            matListItemIcon\n            igoCollapse\n            [target]=\"legend\"\n            [collapsed]=\"item.collapsed\"\n            (toggle)=\"toggleLegendItem($event, item)\"\n            svgIcon=\"chevron-up\"\n          >\n          </mat-icon>\n          <span matListItemTitle>{{ computeItemTitle(item) | async }} </span>\n        </mat-list-item>\n        <div\n          #legend\n          class=\"igo-layer-legend\"\n          [ngClass]=\"{ 'with-title': item.title }\"\n        >\n          <div *ngIf=\"currentStyle !== undefined\">\n            <mat-form-field>\n              <mat-select\n                tooltip-position=\"below\"\n                matTooltipShowDelay=\"500\"\n                [matTooltip]=\"'igo.geo.layer.legend.selectStyle' | translate\"\n                [(ngModel)]=\"currentStyle\"\n                (selectionChange)=\"onChangeStyle()\"\n              >\n                <mat-option *ngFor=\"let style of styles\" [value]=\"style.name\">{{\n                  style.title\n                }}</mat-option>\n              </mat-select>\n            </mat-form-field>\n          </div>\n          <div *ngIf=\"!item.collapsed\">\n            <div *ngIf=\"item.url\">\n              <img\n                igoImageError\n                *ngIf=\"item.imgGraphValue\"\n                hideError=\"true\"\n                #renderedLegend\n                id=\"{{ item.title }}\"\n                (load)=\"onLoadImage(item.title)\"\n                [src]=\"item.imgGraphValue\"\n                alt=\"{{ 'igo.geo.layer.legend.loadingLegendText' | translate }}\"\n              />\n              <small *ngIf=\"imagesHeight[item.title] < 16\">\n                {{ 'igo.geo.layer.legend.noLegendScale' | translate }}\n              </small>\n            </div>\n            <div\n              [ngStyle]=\"item.style\"\n              [innerHTML]=\"item.html | sanitizeHtml\"\n              *ngIf=\"item.html\"\n            ></div>\n          </div>\n        </div>\n      </div>\n    </ng-container>\n  </ng-container>\n\n  <ng-template #noItems>\n    <small>\n      {{ 'igo.geo.layer.legend.noLegendText' | translate }}\n    </small>\n  </ng-template>\n</ng-container>\n", styles: [":host .igo-layer-legend.with-title{padding-left:18px}:host img{max-width:100%}:host img:after{content:\" \";position:relative;height:17px;float:left;width:17px;top:-3px;right:19px;background-color:#fff;border:3px solid #f3f3f3;border-radius:50%;animation:2s linear infinite spin}@-moz-document url-prefix(){:host img:after{margin-left:19px}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
+        args: [{ selector: 'igo-layer-legend', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"legendItems$ | async as items\">\r\n  <ng-container *ngIf=\"items.length; else noItems\">\r\n    <ng-container *ngFor=\"let item of items.slice().reverse()\" #renderedLegends>\r\n      <div *ngIf=\"getLegend; else noItems\">\r\n        <mat-list-item *ngIf=\"item.title\">\r\n          <mat-icon\r\n            id=\"legend-toggle\"\r\n            class=\"igo-chevron\"\r\n            matListItemIcon\r\n            igoCollapse\r\n            [target]=\"legend\"\r\n            [collapsed]=\"item.collapsed\"\r\n            (toggle)=\"toggleLegendItem($event, item)\"\r\n            svgIcon=\"chevron-up\"\r\n          >\r\n          </mat-icon>\r\n          <span matListItemTitle>{{ computeItemTitle(item) | async }} </span>\r\n        </mat-list-item>\r\n        <div\r\n          #legend\r\n          class=\"igo-layer-legend\"\r\n          [ngClass]=\"{ 'with-title': item.title }\"\r\n        >\r\n          <div *ngIf=\"currentStyle !== undefined\">\r\n            <mat-form-field>\r\n              <mat-select\r\n                tooltip-position=\"below\"\r\n                matTooltipShowDelay=\"500\"\r\n                [matTooltip]=\"'igo.geo.layer.legend.selectStyle' | translate\"\r\n                [(ngModel)]=\"currentStyle\"\r\n                (selectionChange)=\"onChangeStyle()\"\r\n              >\r\n                <mat-option *ngFor=\"let style of styles\" [value]=\"style.name\">{{\r\n                  style.title\r\n                }}</mat-option>\r\n              </mat-select>\r\n            </mat-form-field>\r\n          </div>\r\n          <div *ngIf=\"!item.collapsed\">\r\n            <div *ngIf=\"item.url\">\r\n              <img\r\n                igoImageError\r\n                *ngIf=\"item.imgGraphValue\"\r\n                hideError=\"true\"\r\n                #renderedLegend\r\n                id=\"{{ item.title }}\"\r\n                (load)=\"onLoadImage(item.title)\"\r\n                [src]=\"item.imgGraphValue\"\r\n                alt=\"{{ 'igo.geo.layer.legend.loadingLegendText' | translate }}\"\r\n              />\r\n              <small *ngIf=\"imagesHeight[item.title] < 16\">\r\n                {{ 'igo.geo.layer.legend.noLegendScale' | translate }}\r\n              </small>\r\n            </div>\r\n            <div\r\n              [ngStyle]=\"item.style\"\r\n              [innerHTML]=\"item.html | sanitizeHtml\"\r\n              *ngIf=\"item.html\"\r\n            ></div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </ng-container>\r\n\r\n  <ng-template #noItems>\r\n    <small>\r\n      {{ 'igo.geo.layer.legend.noLegendText' | translate }}\r\n    </small>\r\n  </ng-template>\r\n</ng-container>\r\n", styles: [":host .igo-layer-legend.with-title{padding-left:18px}:host img{max-width:100%}:host img:after{content:\" \";position:relative;height:17px;float:left;width:17px;top:-3px;right:19px;background-color:#fff;border:3px solid #f3f3f3;border-radius:50%;animation:2s linear infinite spin}@-moz-document url-prefix(){:host img:after{margin-left:19px}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
     }], function () { return [{ type: CapabilitiesService }, { type: i2.LanguageService }, { type: i2.ConfigService }, { type: i1.HttpClient }, { type: i0.ChangeDetectorRef }]; }, { updateLegendOnResolutionChange: [{
             type: Input
         }], renderedLegends: [{
@@ -12385,7 +12385,7 @@ class LayerListComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LayerListComponent, [{
         type: Component,
-        args: [{ selector: 'igo-layer-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<igo-layer-list-tool\n  *ngIf=\"showToolbar$ | async\"\n  floatLabel=\"auto\"\n  [layersAreAllVisible]=\"layersAreAllVisible\"\n  [term]=\"layerFilterAndSortOptions.keyword\"\n  [onlyVisible]=\"layerFilterAndSortOptions.onlyVisible\"\n  [sortAlpha]=\"layerFilterAndSortOptions.sortAlpha\"\n  (appliedFilterAndSort)=\"onAppliedFilterAndSortChange($event)\"\n  (selection)=\"toggleSelectionMode($event)\"\n>\n</igo-layer-list-tool>\n\n<div *ngIf=\"selection\" class=\"select-all\">\n  <mat-checkbox\n    class=\"select-all-checkbox\"\n    [color]=\"!selectAllCheck && layersChecked.length > 0 ? 'accent' : 'primary'\"\n    (change)=\"selectAll()\"\n    [checked]=\"selectAllCheck\"\n    [indeterminate]=\"!selectAllCheck && layersChecked.length > 0\"\n  >\n    {{\n      selectAllCheck\n        ? ('igo.geo.layer.deselectAll' | translate)\n        : ('igo.geo.layer.selectAll' | translate)\n    }}\n  </mat-checkbox>\n</div>\n<mat-divider></mat-divider>\n\n<igo-list #igoList [navigation]=\"false\" [selection]=\"false\">\n  <ng-template ngFor let-layer let-i=\"index\" [ngForOf]=\"layers$ | async\">\n    <igo-layer-item\n      *ngIf=\"!(excludeBaseLayers && layer.baseLayer)\"\n      igoListItem\n      [layer]=\"layer\"\n      [activeLayer]=\"activeLayer\"\n      [orderable]=\"orderable && !layer.baseLayer\"\n      [lowerDisabled]=\"getLowerLayer().id === layer.id\"\n      [raiseDisabled]=\"getUpperLayer().id === layer.id\"\n      [queryBadge]=\"queryBadge\"\n      [expandLegendIfVisible]=\"expandLegendOfVisibleLayers\"\n      [updateLegendOnResolutionChange]=\"updateLegendOnResolutionChange\"\n      [toggleLegendOnVisibilityChange]=\"toggleLegendOnVisibilityChange\"\n      [selectionMode]=\"selection\"\n      [selectAll]=\"selectAllCheck\"\n      [layerCheck]=\"layer.options.check\"\n      [changeDetection]=\"layerItemChangeDetection$\"\n      (action)=\"toggleLayerTool($event)\"\n      (checkbox)=\"layersCheck($event)\"\n    >\n    </igo-layer-item>\n  </ng-template>\n</igo-list>\n\n<igo-panel\n  *ngIf=\"!selection && layerTool && activeLayer\"\n  class=\"igo-layer-actions-container\"\n  [title]=\"activeLayer.title\"\n>\n  <div class=\"igo-layer-button-group\">\n    <button\n      *ngIf=\"isLayerRemovable(activeLayer)\"\n      class=\"delete-button\"\n      mat-icon-button\n      color=\"warn\"\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"'igo.geo.layer.removeLayer' | translate\"\n      (click)=\"removeLayers()\"\n    >\n      <mat-icon svgIcon=\"delete\"></mat-icon>\n    </button>\n\n    <button\n      class=\"down-button\"\n      mat-icon-button\n      color=\"primary\"\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"\n        sortAlpha || onlyVisible || keyword\n          ? ('igo.geo.layer.filterLowerLayer' | translate)\n          : ('igo.geo.layer.lowerLayer' | translate)\n      \"\n      [disabled]=\"lowerDisabled\"\n      (click)=\"moveActiveLayer(activeLayer, layerListDisplacement.Lower, true)\"\n    >\n      <mat-icon\n        aria-hidden=\"false\"\n        [matBadge]=\"sortAlpha || onlyVisible || keyword ? '!' : ''\"\n        matBadgeColor=\"warn\"\n        matBadgeSize=\"medium\"\n        [matBadgeHidden]=\"lowerDisabled\"\n        svgIcon=\"arrow-down\"\n      ></mat-icon>\n    </button>\n\n    <button\n      class=\"up-button\"\n      color=\"primary\"\n      mat-icon-button\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"\n        sortAlpha || onlyVisible || keyword\n          ? ('igo.geo.layer.filterRaiseLayer' | translate)\n          : ('igo.geo.layer.raiseLayer' | translate)\n      \"\n      [disabled]=\"raiseDisabled\"\n      (click)=\"moveActiveLayer(activeLayer, layerListDisplacement.Raise, true)\"\n    >\n      <mat-icon\n        aria-hidden=\"false\"\n        [matBadge]=\"sortAlpha || onlyVisible || keyword ? '!' : ''\"\n        matBadgeColor=\"warn\"\n        matBadgeSize=\"medium\"\n        [matBadgeHidden]=\"raiseDisabled\"\n        svgIcon=\"arrow-up\"\n      ></mat-icon>\n    </button>\n\n    <!-- <label>{{ 'igo.geo.layer.opacity' | translate }} </label> -->\n    <button\n      class=\"opacity-button\"\n      color=\"primary\"\n      mat-icon-button\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matMenuTriggerFor]=\"opacityMenu\"\n      [matTooltip]=\"'igo.geo.layer.opacity' | translate\"\n    >\n      <mat-icon\n        aria-hidden=\"false\"\n        [matBadge]=\"badgeOpacity\"\n        matBadgeColor=\"primary\"\n        matBadgeSize=\"medium\"\n        svgIcon=\"opacity\"\n      ></mat-icon>\n    </button>\n\n    <mat-menu #opacityMenu=\"matMenu\" class=\"panel-opacity-menu\">\n      <mat-slider\n        id=\"opacity-slider\"\n        color=\"primary\"\n        discrete\n        step=\"5\"\n        [min]=\"0\"\n        [max]=\"100\"\n        [matTooltip]=\"'igo.geo.layer.opacity' | translate\"\n        (click)=\"$event.stopPropagation()\"\n        matTooltipShowDelay=\"500\"\n        tooltip-position=\"below\"\n        #ngSlider\n        ><input\n          matSliderThumb\n          [value]=\"opacity\"\n          (input)=\"\n            changeOpacity({\n              source: ngSliderThumb,\n              parent: ngSlider,\n              value: ngSliderThumb.value\n            })\n          \"\n          #ngSliderThumb=\"matSliderThumb\"\n        />\n      </mat-slider>\n    </mat-menu>\n\n    <button\n      *ngIf=\"activeLayerExtentIsValid(activeLayer)\"\n      class=\"zoomLayer-button\"\n      color=\"primary\"\n      mat-icon-button\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"'igo.geo.layer.zoomLayer' | translate\"\n      (click)=\"zoomLayerExtents(activeLayer)\"\n    >\n      <mat-icon\n        matBadgeColor=\"primary\"\n        matBadgeSize=\"medium\"\n        svgIcon=\"magnify-scan\"\n      ></mat-icon>\n    </button>\n\n    <ng-container\n      igoLayerItemToolbar\n      [ngTemplateOutlet]=\"templateLayerToolbar\"\n      [ngTemplateOutletContext]=\"{ layer: activeLayer }\"\n    >\n    </ng-container>\n\n    <ng-content select=\"[igoLayerItemToolbar]\"></ng-content>\n  </div>\n</igo-panel>\n\n<igo-panel\n  *ngIf=\"selection && layers.length > 0\"\n  class=\"igo-layer-actions-container\"\n  [title]=\"'igo.geo.layer.tools' | translate\"\n>\n  <div class=\"actions-buttons-multi\">\n    <button\n      class=\"delete-button\"\n      mat-icon-button\n      color=\"warn\"\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [disabled]=\"layersChecked.length === 0\"\n      [matTooltip]=\"\n        isAllLayersRemovable(layersChecked)\n          ? ('igo.geo.layer.removeSelectedLayers' | translate)\n          : ('igo.geo.layer.removeSelectedLayersRestriction' | translate)\n      \"\n      (click)=\"removeLayers(layersChecked)\"\n    >\n      <mat-icon\n        aria-hidden=\"false\"\n        [matBadge]=\"'!'\"\n        matBadgeColor=\"warn\"\n        matBadgeSize=\"medium\"\n        [matBadgeHidden]=\"isAllLayersRemovable(layersChecked)\"\n        svgIcon=\"delete\"\n      ></mat-icon>\n    </button>\n\n    <button\n      class=\"eye-button\"\n      mat-icon-button\n      color=\"primary\"\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [disabled]=\"layersChecked.length === 0\"\n      [matTooltip]=\"\n        statusSelectedLayersCheck === 'ALL_HIDDEN'\n          ? ('igo.geo.layer.showSelectedLayers' | translate)\n          : ('igo.geo.layer.hideSelectedLayers' | translate)\n      \"\n      (click)=\"toggleVisibility(layersChecked)\"\n    >\n      <mat-icon\n        [svgIcon]=\"\n          statusSelectedLayersCheck === 'ALL_HIDDEN' ? 'eye-off' : 'eye'\n        \"\n      ></mat-icon>\n    </button>\n\n    <button\n      class=\"down-button\"\n      mat-icon-button\n      color=\"primary\"\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"\n        sortAlpha || onlyVisible || keyword\n          ? ('igo.geo.layer.filterLowerLayer' | translate)\n          : ('igo.geo.layer.lowerLayer' | translate)\n      \"\n      [disabled]=\"lowerDisabledSelection\"\n      (click)=\"lowerLayers(layersChecked)\"\n    >\n      <mat-icon\n        aria-hidden=\"false\"\n        [matBadge]=\"sortAlpha || onlyVisible || keyword ? '!' : ''\"\n        matBadgeColor=\"warn\"\n        matBadgeSize=\"medium\"\n        [matBadgeHidden]=\"lowerDisabledSelection\"\n        svgIcon=\"arrow-down\"\n      ></mat-icon>\n    </button>\n\n    <button\n      class=\"up-button\"\n      color=\"primary\"\n      mat-icon-button\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"\n        sortAlpha || onlyVisible || keyword\n          ? ('igo.geo.layer.filterRaiseLayer' | translate)\n          : ('igo.geo.layer.raiseLayer' | translate)\n      \"\n      [disabled]=\"raiseDisabledSelection\"\n      (click)=\"raiseLayers(layersChecked)\"\n    >\n      <mat-icon\n        aria-hidden=\"false\"\n        [matBadge]=\"sortAlpha || onlyVisible || keyword ? '!' : ''\"\n        matBadgeColor=\"warn\"\n        matBadgeSize=\"medium\"\n        [matBadgeHidden]=\"raiseDisabledSelection\"\n        svgIcon=\"arrow-up\"\n      ></mat-icon>\n    </button>\n\n    <button\n      class=\"opacity-button\"\n      color=\"primary\"\n      mat-icon-button\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [disabled]=\"layersChecked.length === 0\"\n      [matMenuTriggerFor]=\"opacityMenu\"\n      [matTooltip]=\"'igo.geo.layer.opacity' | translate\"\n    >\n      <mat-icon svgIcon=\"opacity\"></mat-icon>\n    </button>\n\n    <mat-menu #opacityMenu=\"matMenu\" class=\"mat-menu-opacity-slider\">\n      <div id=\"opacity-menu\">\n        <!-- TODO: The 'tickInterval' property no longer exists -->\n        <mat-slider\n          *ngIf=\"layersChecked.length\"\n          id=\"opacity-slider\"\n          color=\"primary\"\n          thumbLabel\n          showTickMarks\n          step=\"5\"\n          [min]=\"0\"\n          [max]=\"100\"\n          [(ngModel)]=\"checkOpacity\"\n          [matTooltip]=\"'igo.geo.layer.opacity' | translate\"\n          matTooltipShowDelay=\"500\"\n          tooltip-position=\"below\"\n          (click)=\"$event.stopPropagation()\"\n          ><input matSliderThumb />\n        </mat-slider>\n      </div>\n    </mat-menu>\n\n    <button\n      *ngIf=\"\n        layersChecked.length !== 0 && activeLayersExtentAreValid(layersChecked)\n      \"\n      class=\"zoomLayer-button\"\n      color=\"primary\"\n      mat-icon-button\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"'igo.geo.layer.zoomLayers' | translate\"\n      (click)=\"zoomLayersExtents(layersChecked)\"\n    >\n      <mat-icon svgIcon=\"magnify-scan\"></mat-icon>\n    </button>\n  </div>\n</igo-panel>\n", styles: [":host{display:flex;flex-direction:column;height:100%}:host igo-list{flex:1;padding-top:8px}:host mat-form-field.inputFilter{width:calc(100% - 100px);max-width:200px}:host .igo-layer-actions-container{padding:0 6px 0 4px}:host .igo-layer-actions-container>div{text-align:center}:host mat-list-item ::ng-deep .mdc-list-item__content{margin-bottom:10px}:host .igo-layer-button-group,:host .actions-buttons-multi{display:flex;align-items:center;flex-direction:row-reverse;overflow-x:auto;overflow-y:hidden}:host .igo-layer-button-group::-webkit-scrollbar,:host .actions-buttons-multi::-webkit-scrollbar{height:4px}:host .igo-layer-button-group::-webkit-scrollbar-track,:host .actions-buttons-multi::-webkit-scrollbar-track{background:#f1f1f1}:host .igo-layer-button-group::-webkit-scrollbar-thumb,:host .actions-buttons-multi::-webkit-scrollbar-thumb{background:#888}:host .igo-layer-button-group::-webkit-scrollbar-thumb:hover,:host .actions-buttons-multi::-webkit-scrollbar-thumb:hover{background:#555}:host .igo-layer-button-group{padding-top:5px}:host igo-panel{height:unset}:host .select-all{display:flex;align-items:center;height:48px;padding:0 16px}::ng-deep .panel-opacity-menu{overflow:visible!important}::ng-deep .panel-opacity-menu #opacity-slider{margin:0 16px}\n"] }]
+        args: [{ selector: 'igo-layer-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<igo-layer-list-tool\r\n  *ngIf=\"showToolbar$ | async\"\r\n  floatLabel=\"auto\"\r\n  [layersAreAllVisible]=\"layersAreAllVisible\"\r\n  [term]=\"layerFilterAndSortOptions.keyword\"\r\n  [onlyVisible]=\"layerFilterAndSortOptions.onlyVisible\"\r\n  [sortAlpha]=\"layerFilterAndSortOptions.sortAlpha\"\r\n  (appliedFilterAndSort)=\"onAppliedFilterAndSortChange($event)\"\r\n  (selection)=\"toggleSelectionMode($event)\"\r\n>\r\n</igo-layer-list-tool>\r\n\r\n<div *ngIf=\"selection\" class=\"select-all\">\r\n  <mat-checkbox\r\n    class=\"select-all-checkbox\"\r\n    [color]=\"!selectAllCheck && layersChecked.length > 0 ? 'accent' : 'primary'\"\r\n    (change)=\"selectAll()\"\r\n    [checked]=\"selectAllCheck\"\r\n    [indeterminate]=\"!selectAllCheck && layersChecked.length > 0\"\r\n  >\r\n    {{\r\n      selectAllCheck\r\n        ? ('igo.geo.layer.deselectAll' | translate)\r\n        : ('igo.geo.layer.selectAll' | translate)\r\n    }}\r\n  </mat-checkbox>\r\n</div>\r\n<mat-divider></mat-divider>\r\n\r\n<igo-list #igoList [navigation]=\"false\" [selection]=\"false\">\r\n  <ng-template ngFor let-layer let-i=\"index\" [ngForOf]=\"layers$ | async\">\r\n    <igo-layer-item\r\n      *ngIf=\"!(excludeBaseLayers && layer.baseLayer)\"\r\n      igoListItem\r\n      [layer]=\"layer\"\r\n      [activeLayer]=\"activeLayer\"\r\n      [orderable]=\"orderable && !layer.baseLayer\"\r\n      [lowerDisabled]=\"getLowerLayer().id === layer.id\"\r\n      [raiseDisabled]=\"getUpperLayer().id === layer.id\"\r\n      [queryBadge]=\"queryBadge\"\r\n      [expandLegendIfVisible]=\"expandLegendOfVisibleLayers\"\r\n      [updateLegendOnResolutionChange]=\"updateLegendOnResolutionChange\"\r\n      [toggleLegendOnVisibilityChange]=\"toggleLegendOnVisibilityChange\"\r\n      [selectionMode]=\"selection\"\r\n      [selectAll]=\"selectAllCheck\"\r\n      [layerCheck]=\"layer.options.check\"\r\n      [changeDetection]=\"layerItemChangeDetection$\"\r\n      (action)=\"toggleLayerTool($event)\"\r\n      (checkbox)=\"layersCheck($event)\"\r\n    >\r\n    </igo-layer-item>\r\n  </ng-template>\r\n</igo-list>\r\n\r\n<igo-panel\r\n  *ngIf=\"!selection && layerTool && activeLayer\"\r\n  class=\"igo-layer-actions-container\"\r\n  [title]=\"activeLayer.title\"\r\n>\r\n  <div class=\"igo-layer-button-group\">\r\n    <button\r\n      *ngIf=\"isLayerRemovable(activeLayer)\"\r\n      class=\"delete-button\"\r\n      mat-icon-button\r\n      color=\"warn\"\r\n      tooltip-position=\"below\"\r\n      matTooltipShowDelay=\"500\"\r\n      [matTooltip]=\"'igo.geo.layer.removeLayer' | translate\"\r\n      (click)=\"removeLayers()\"\r\n    >\r\n      <mat-icon svgIcon=\"delete\"></mat-icon>\r\n    </button>\r\n\r\n    <button\r\n      class=\"down-button\"\r\n      mat-icon-button\r\n      color=\"primary\"\r\n      tooltip-position=\"below\"\r\n      matTooltipShowDelay=\"500\"\r\n      [matTooltip]=\"\r\n        sortAlpha || onlyVisible || keyword\r\n          ? ('igo.geo.layer.filterLowerLayer' | translate)\r\n          : ('igo.geo.layer.lowerLayer' | translate)\r\n      \"\r\n      [disabled]=\"lowerDisabled\"\r\n      (click)=\"moveActiveLayer(activeLayer, layerListDisplacement.Lower, true)\"\r\n    >\r\n      <mat-icon\r\n        aria-hidden=\"false\"\r\n        [matBadge]=\"sortAlpha || onlyVisible || keyword ? '!' : ''\"\r\n        matBadgeColor=\"warn\"\r\n        matBadgeSize=\"medium\"\r\n        [matBadgeHidden]=\"lowerDisabled\"\r\n        svgIcon=\"arrow-down\"\r\n      ></mat-icon>\r\n    </button>\r\n\r\n    <button\r\n      class=\"up-button\"\r\n      color=\"primary\"\r\n      mat-icon-button\r\n      tooltip-position=\"below\"\r\n      matTooltipShowDelay=\"500\"\r\n      [matTooltip]=\"\r\n        sortAlpha || onlyVisible || keyword\r\n          ? ('igo.geo.layer.filterRaiseLayer' | translate)\r\n          : ('igo.geo.layer.raiseLayer' | translate)\r\n      \"\r\n      [disabled]=\"raiseDisabled\"\r\n      (click)=\"moveActiveLayer(activeLayer, layerListDisplacement.Raise, true)\"\r\n    >\r\n      <mat-icon\r\n        aria-hidden=\"false\"\r\n        [matBadge]=\"sortAlpha || onlyVisible || keyword ? '!' : ''\"\r\n        matBadgeColor=\"warn\"\r\n        matBadgeSize=\"medium\"\r\n        [matBadgeHidden]=\"raiseDisabled\"\r\n        svgIcon=\"arrow-up\"\r\n      ></mat-icon>\r\n    </button>\r\n\r\n    <!-- <label>{{ 'igo.geo.layer.opacity' | translate }} </label> -->\r\n    <button\r\n      class=\"opacity-button\"\r\n      color=\"primary\"\r\n      mat-icon-button\r\n      tooltip-position=\"below\"\r\n      matTooltipShowDelay=\"500\"\r\n      [matMenuTriggerFor]=\"opacityMenu\"\r\n      [matTooltip]=\"'igo.geo.layer.opacity' | translate\"\r\n    >\r\n      <mat-icon\r\n        aria-hidden=\"false\"\r\n        [matBadge]=\"badgeOpacity\"\r\n        matBadgeColor=\"primary\"\r\n        matBadgeSize=\"medium\"\r\n        svgIcon=\"opacity\"\r\n      ></mat-icon>\r\n    </button>\r\n\r\n    <mat-menu #opacityMenu=\"matMenu\" class=\"panel-opacity-menu\">\r\n      <mat-slider\r\n        id=\"opacity-slider\"\r\n        color=\"primary\"\r\n        discrete\r\n        step=\"5\"\r\n        [min]=\"0\"\r\n        [max]=\"100\"\r\n        [matTooltip]=\"'igo.geo.layer.opacity' | translate\"\r\n        (click)=\"$event.stopPropagation()\"\r\n        matTooltipShowDelay=\"500\"\r\n        tooltip-position=\"below\"\r\n        #ngSlider\r\n        ><input\r\n          matSliderThumb\r\n          [value]=\"opacity\"\r\n          (input)=\"\r\n            changeOpacity({\r\n              source: ngSliderThumb,\r\n              parent: ngSlider,\r\n              value: ngSliderThumb.value\r\n            })\r\n          \"\r\n          #ngSliderThumb=\"matSliderThumb\"\r\n        />\r\n      </mat-slider>\r\n    </mat-menu>\r\n\r\n    <button\r\n      *ngIf=\"activeLayerExtentIsValid(activeLayer)\"\r\n      class=\"zoomLayer-button\"\r\n      color=\"primary\"\r\n      mat-icon-button\r\n      tooltip-position=\"below\"\r\n      matTooltipShowDelay=\"500\"\r\n      [matTooltip]=\"'igo.geo.layer.zoomLayer' | translate\"\r\n      (click)=\"zoomLayerExtents(activeLayer)\"\r\n    >\r\n      <mat-icon\r\n        matBadgeColor=\"primary\"\r\n        matBadgeSize=\"medium\"\r\n        svgIcon=\"magnify-scan\"\r\n      ></mat-icon>\r\n    </button>\r\n\r\n    <ng-container\r\n      igoLayerItemToolbar\r\n      [ngTemplateOutlet]=\"templateLayerToolbar\"\r\n      [ngTemplateOutletContext]=\"{ layer: activeLayer }\"\r\n    >\r\n    </ng-container>\r\n\r\n    <ng-content select=\"[igoLayerItemToolbar]\"></ng-content>\r\n  </div>\r\n</igo-panel>\r\n\r\n<igo-panel\r\n  *ngIf=\"selection && layers.length > 0\"\r\n  class=\"igo-layer-actions-container\"\r\n  [title]=\"'igo.geo.layer.tools' | translate\"\r\n>\r\n  <div class=\"actions-buttons-multi\">\r\n    <button\r\n      class=\"delete-button\"\r\n      mat-icon-button\r\n      color=\"warn\"\r\n      tooltip-position=\"below\"\r\n      matTooltipShowDelay=\"500\"\r\n      [disabled]=\"layersChecked.length === 0\"\r\n      [matTooltip]=\"\r\n        isAllLayersRemovable(layersChecked)\r\n          ? ('igo.geo.layer.removeSelectedLayers' | translate)\r\n          : ('igo.geo.layer.removeSelectedLayersRestriction' | translate)\r\n      \"\r\n      (click)=\"removeLayers(layersChecked)\"\r\n    >\r\n      <mat-icon\r\n        aria-hidden=\"false\"\r\n        [matBadge]=\"'!'\"\r\n        matBadgeColor=\"warn\"\r\n        matBadgeSize=\"medium\"\r\n        [matBadgeHidden]=\"isAllLayersRemovable(layersChecked)\"\r\n        svgIcon=\"delete\"\r\n      ></mat-icon>\r\n    </button>\r\n\r\n    <button\r\n      class=\"eye-button\"\r\n      mat-icon-button\r\n      color=\"primary\"\r\n      tooltip-position=\"below\"\r\n      matTooltipShowDelay=\"500\"\r\n      [disabled]=\"layersChecked.length === 0\"\r\n      [matTooltip]=\"\r\n        statusSelectedLayersCheck === 'ALL_HIDDEN'\r\n          ? ('igo.geo.layer.showSelectedLayers' | translate)\r\n          : ('igo.geo.layer.hideSelectedLayers' | translate)\r\n      \"\r\n      (click)=\"toggleVisibility(layersChecked)\"\r\n    >\r\n      <mat-icon\r\n        [svgIcon]=\"\r\n          statusSelectedLayersCheck === 'ALL_HIDDEN' ? 'eye-off' : 'eye'\r\n        \"\r\n      ></mat-icon>\r\n    </button>\r\n\r\n    <button\r\n      class=\"down-button\"\r\n      mat-icon-button\r\n      color=\"primary\"\r\n      tooltip-position=\"below\"\r\n      matTooltipShowDelay=\"500\"\r\n      [matTooltip]=\"\r\n        sortAlpha || onlyVisible || keyword\r\n          ? ('igo.geo.layer.filterLowerLayer' | translate)\r\n          : ('igo.geo.layer.lowerLayer' | translate)\r\n      \"\r\n      [disabled]=\"lowerDisabledSelection\"\r\n      (click)=\"lowerLayers(layersChecked)\"\r\n    >\r\n      <mat-icon\r\n        aria-hidden=\"false\"\r\n        [matBadge]=\"sortAlpha || onlyVisible || keyword ? '!' : ''\"\r\n        matBadgeColor=\"warn\"\r\n        matBadgeSize=\"medium\"\r\n        [matBadgeHidden]=\"lowerDisabledSelection\"\r\n        svgIcon=\"arrow-down\"\r\n      ></mat-icon>\r\n    </button>\r\n\r\n    <button\r\n      class=\"up-button\"\r\n      color=\"primary\"\r\n      mat-icon-button\r\n      tooltip-position=\"below\"\r\n      matTooltipShowDelay=\"500\"\r\n      [matTooltip]=\"\r\n        sortAlpha || onlyVisible || keyword\r\n          ? ('igo.geo.layer.filterRaiseLayer' | translate)\r\n          : ('igo.geo.layer.raiseLayer' | translate)\r\n      \"\r\n      [disabled]=\"raiseDisabledSelection\"\r\n      (click)=\"raiseLayers(layersChecked)\"\r\n    >\r\n      <mat-icon\r\n        aria-hidden=\"false\"\r\n        [matBadge]=\"sortAlpha || onlyVisible || keyword ? '!' : ''\"\r\n        matBadgeColor=\"warn\"\r\n        matBadgeSize=\"medium\"\r\n        [matBadgeHidden]=\"raiseDisabledSelection\"\r\n        svgIcon=\"arrow-up\"\r\n      ></mat-icon>\r\n    </button>\r\n\r\n    <button\r\n      class=\"opacity-button\"\r\n      color=\"primary\"\r\n      mat-icon-button\r\n      tooltip-position=\"below\"\r\n      matTooltipShowDelay=\"500\"\r\n      [disabled]=\"layersChecked.length === 0\"\r\n      [matMenuTriggerFor]=\"opacityMenu\"\r\n      [matTooltip]=\"'igo.geo.layer.opacity' | translate\"\r\n    >\r\n      <mat-icon svgIcon=\"opacity\"></mat-icon>\r\n    </button>\r\n\r\n    <mat-menu #opacityMenu=\"matMenu\" class=\"mat-menu-opacity-slider\">\r\n      <div id=\"opacity-menu\">\r\n        <!-- TODO: The 'tickInterval' property no longer exists -->\r\n        <mat-slider\r\n          *ngIf=\"layersChecked.length\"\r\n          id=\"opacity-slider\"\r\n          color=\"primary\"\r\n          thumbLabel\r\n          showTickMarks\r\n          step=\"5\"\r\n          [min]=\"0\"\r\n          [max]=\"100\"\r\n          [(ngModel)]=\"checkOpacity\"\r\n          [matTooltip]=\"'igo.geo.layer.opacity' | translate\"\r\n          matTooltipShowDelay=\"500\"\r\n          tooltip-position=\"below\"\r\n          (click)=\"$event.stopPropagation()\"\r\n          ><input matSliderThumb />\r\n        </mat-slider>\r\n      </div>\r\n    </mat-menu>\r\n\r\n    <button\r\n      *ngIf=\"\r\n        layersChecked.length !== 0 && activeLayersExtentAreValid(layersChecked)\r\n      \"\r\n      class=\"zoomLayer-button\"\r\n      color=\"primary\"\r\n      mat-icon-button\r\n      tooltip-position=\"below\"\r\n      matTooltipShowDelay=\"500\"\r\n      [matTooltip]=\"'igo.geo.layer.zoomLayers' | translate\"\r\n      (click)=\"zoomLayersExtents(layersChecked)\"\r\n    >\r\n      <mat-icon svgIcon=\"magnify-scan\"></mat-icon>\r\n    </button>\r\n  </div>\r\n</igo-panel>\r\n", styles: [":host{display:flex;flex-direction:column;height:100%}:host igo-list{flex:1;padding-top:8px}:host mat-form-field.inputFilter{width:calc(100% - 100px);max-width:200px}:host .igo-layer-actions-container{padding:0 6px 0 4px}:host .igo-layer-actions-container>div{text-align:center}:host mat-list-item ::ng-deep .mdc-list-item__content{margin-bottom:10px}:host .igo-layer-button-group,:host .actions-buttons-multi{display:flex;align-items:center;flex-direction:row-reverse;overflow-x:auto;overflow-y:hidden}:host .igo-layer-button-group::-webkit-scrollbar,:host .actions-buttons-multi::-webkit-scrollbar{height:4px}:host .igo-layer-button-group::-webkit-scrollbar-track,:host .actions-buttons-multi::-webkit-scrollbar-track{background:#f1f1f1}:host .igo-layer-button-group::-webkit-scrollbar-thumb,:host .actions-buttons-multi::-webkit-scrollbar-thumb{background:#888}:host .igo-layer-button-group::-webkit-scrollbar-thumb:hover,:host .actions-buttons-multi::-webkit-scrollbar-thumb:hover{background:#555}:host .igo-layer-button-group{padding-top:5px}:host igo-panel{height:unset}:host .select-all{display:flex;align-items:center;height:48px;padding:0 16px}::ng-deep .panel-opacity-menu{overflow:visible!important}::ng-deep .panel-opacity-menu #opacity-slider{margin:0 16px}\n"] }]
     }], function () { return [{ type: i0.ElementRef }]; }, { templateLayerToolbar: [{
             type: ContentChild,
             args: ['igoLayerItemToolbar', /* TODO: add static flag */ {}]
@@ -13082,7 +13082,7 @@ class TrackFeatureButtonComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TrackFeatureButtonComponent, [{
         type: Component,
-        args: [{ selector: 'igo-track-feature-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  *ngIf=\"options.trackFeature\"\n  mat-icon-button\n  collapsibleButton\n  tooltip-position=\"below\"\n  matTooltipShowDelay=\"500\"\n  [matTooltip]=\"'igo.geo.layer.trackFeature' | translate\"\n  [color]=\"color\"\n  (click)=\"toggleTrackFeature()\"\n>\n  <mat-icon svgIcon=\"crosshairs-gps\"></mat-icon>\n</button>\n" }]
+        args: [{ selector: 'igo-track-feature-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\r\n  *ngIf=\"options.trackFeature\"\r\n  mat-icon-button\r\n  collapsibleButton\r\n  tooltip-position=\"below\"\r\n  matTooltipShowDelay=\"500\"\r\n  [matTooltip]=\"'igo.geo.layer.trackFeature' | translate\"\r\n  [color]=\"color\"\r\n  (click)=\"toggleTrackFeature()\"\r\n>\r\n  <mat-icon svgIcon=\"crosshairs-gps\"></mat-icon>\r\n</button>\r\n" }]
     }], function () { return []; }, { layer: [{
             type: Input
         }], trackFeature: [{
@@ -13326,7 +13326,7 @@ class MetadataButtonComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MetadataButtonComponent, [{
         type: Component,
-        args: [{ selector: 'igo-metadata-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  *ngIf=\"\n    (options && options.metadata && options.metadata.url) ||\n    (options && options.metadata && options.metadata.abstract)\n  \"\n  mat-icon-button\n  tooltip-position=\"below\"\n  matTooltipShowDelay=\"500\"\n  [matTooltip]=\"'igo.geo.metadata.show' | translate\"\n  [color]=\"color\"\n  (click)=\"openMetadata(options.metadata)\"\n>\n  <mat-icon svgIcon=\"information-outline\"></mat-icon>\n</button>\n" }]
+        args: [{ selector: 'igo-metadata-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\r\n  *ngIf=\"\r\n    (options && options.metadata && options.metadata.url) ||\r\n    (options && options.metadata && options.metadata.abstract)\r\n  \"\r\n  mat-icon-button\r\n  tooltip-position=\"below\"\r\n  matTooltipShowDelay=\"500\"\r\n  [matTooltip]=\"'igo.geo.metadata.show' | translate\"\r\n  [color]=\"color\"\r\n  (click)=\"openMetadata(options.metadata)\"\r\n>\r\n  <mat-icon svgIcon=\"information-outline\"></mat-icon>\r\n</button>\r\n" }]
     }], function () { return [{ type: MetadataService }, { type: i1$3.MatDialog }]; }, { layer: [{
             type: Input
         }], color: [{
@@ -16371,7 +16371,7 @@ class CatalogBrowserComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CatalogBrowserComponent, [{
         type: Component,
-        args: [{ selector: 'igo-catalog-browser', changeDetection: ChangeDetectionStrategy.OnPush, template: "<igo-list [navigation]=\"false\" [selection]=\"false\">\n  <ng-template ngFor let-item [ngForOf]=\"store.view.all$() | async\">\n    <ng-container *ngIf=\"isGroup(item)\">\n      <igo-catalog-browser-group\n        [catalog]=\"catalog\"\n        [group]=\"item\"\n        [map]=\"map\"\n        [state]=\"store.state\"\n        [resolution]=\"resolution$ | async\"\n        [catalogAllowLegend]=\"catalogAllowLegend\"\n        [collapsed]=\"store.count === 1 ? false : true\"\n        [toggleCollapsed]=\"toggleCollapsedGroup\"\n        (addedChange)=\"onGroupAddedChange($event)\"\n        (layerAddedChange)=\"onLayerAddedChange($event)\"\n      >\n      </igo-catalog-browser-group>\n    </ng-container>\n\n    <ng-container *ngIf=\"isLayer(item)\">\n      <igo-catalog-browser-layer\n        igoListItem\n        [layer]=\"item\"\n        [map]=\"map\"\n        [resolution]=\"resolution$ | async\"\n        [catalogAllowLegend]=\"catalogAllowLegend\"\n        [added]=\"store.state.get(item).added\"\n        (addedChange)=\"onLayerAddedChange($event)\"\n      >\n      </igo-catalog-browser-layer>\n    </ng-container>\n  </ng-template>\n</igo-list>\n" }]
+        args: [{ selector: 'igo-catalog-browser', changeDetection: ChangeDetectionStrategy.OnPush, template: "<igo-list [navigation]=\"false\" [selection]=\"false\">\r\n  <ng-template ngFor let-item [ngForOf]=\"store.view.all$() | async\">\r\n    <ng-container *ngIf=\"isGroup(item)\">\r\n      <igo-catalog-browser-group\r\n        [catalog]=\"catalog\"\r\n        [group]=\"item\"\r\n        [map]=\"map\"\r\n        [state]=\"store.state\"\r\n        [resolution]=\"resolution$ | async\"\r\n        [catalogAllowLegend]=\"catalogAllowLegend\"\r\n        [collapsed]=\"store.count === 1 ? false : true\"\r\n        [toggleCollapsed]=\"toggleCollapsedGroup\"\r\n        (addedChange)=\"onGroupAddedChange($event)\"\r\n        (layerAddedChange)=\"onLayerAddedChange($event)\"\r\n      >\r\n      </igo-catalog-browser-group>\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"isLayer(item)\">\r\n      <igo-catalog-browser-layer\r\n        igoListItem\r\n        [layer]=\"item\"\r\n        [map]=\"map\"\r\n        [resolution]=\"resolution$ | async\"\r\n        [catalogAllowLegend]=\"catalogAllowLegend\"\r\n        [added]=\"store.state.get(item).added\"\r\n        (addedChange)=\"onLayerAddedChange($event)\"\r\n      >\r\n      </igo-catalog-browser-layer>\r\n    </ng-container>\r\n  </ng-template>\r\n</igo-list>\r\n" }]
     }], function () { return [{ type: LayerService }, { type: i0.ChangeDetectorRef }]; }, { catalogAllowLegend: [{
             type: Input
         }], catalog: [{
@@ -16640,7 +16640,7 @@ class AddCatalogDialogComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AddCatalogDialogComponent, [{
         type: Component,
-        args: [{ selector: 'igo-add-catalog-dialog', template: "<h1 mat-dialog-title class=\"mat-typography\">\n  {{ 'igo.geo.catalog.library.addTitle' | translate }}\n</h1>\n<div mat-dialog-content class=\"mat-typography\">\n  <form class=\"igo-form\" [formGroup]=\"form\">\n    <div class=\"igo-input-container\">\n      <mat-form-field>\n        <input\n          type=\"text\"\n          formControlName=\"title\"\n          placeholder=\"{{ 'igo.geo.printForm.title' | translate }}\"\n          matInput\n          [matAutocomplete]=\"auto2\"\n        />\n        <mat-autocomplete\n          #auto2=\"matAutocomplete\"\n          (optionSelected)=\"changeUrlOrTitle($event.option.value)\"\n        >\n          <mat-option\n            *ngFor=\"let predefinedCatalog of predefinedCatalogsList$ | async\"\n            matTooltipShowDelay=\"500\"\n            [matTooltip]=\"predefinedCatalog.title\"\n            [value]=\"predefinedCatalog\"\n          >\n            {{ predefinedCatalog.title }}\n          </mat-option>\n        </mat-autocomplete>\n      </mat-form-field>\n    </div>\n    <div class=\"igo-input-container\">\n      <mat-form-field>\n        <input\n          type=\"text\"\n          formControlName=\"url\"\n          placeholder=\"URL\"\n          matInput\n          [matAutocomplete]=\"auto\"\n        />\n        <mat-autocomplete\n          #auto=\"matAutocomplete\"\n          (optionSelected)=\"changeUrlOrTitle($event.option.value)\"\n        >\n          <mat-option\n            *ngFor=\"let predefinedCatalog of predefinedCatalogsList$ | async\"\n            matTooltipShowDelay=\"500\"\n            [matTooltip]=\"predefinedCatalog.url\"\n            [value]=\"predefinedCatalog\"\n          >\n            {{ predefinedCatalog.url }}\n          </mat-option>\n        </mat-autocomplete>\n      </mat-form-field>\n    </div>\n    <div class=\"igo-input-container\">\n      <mat-form-field>\n        <mat-select formControlName=\"type\" placeholder=\"Type\">\n          <mat-option\n            *ngFor=\"let type of typeCapabilities\"\n            [value]=\"type\"\n            (click)=\"$event.stopPropagation()\"\n          >\n            <p matListItemTitle>{{ type }}</p>\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n    </div>\n  </form>\n  <span *ngIf=\"error && addedCatalog && emailAddress\">\n    <p class=\"error\">\n      {{\n        languageService.translate.instant(\n          'igo.geo.catalog.externalProvider.unavailableWithEmail',\n          { value: addedCatalog.url, email: emailAddress }\n        )\n      }}\n    </p>\n  </span>\n  <span *ngIf=\"error && addedCatalog && !emailAddress\">\n    <p class=\"error\">\n      {{\n        languageService.translate.instant('igo.geo.catalog.unavailable', {\n          value: addedCatalog.url\n        })\n      }}\n    </p>\n  </span>\n</div>\n<div mat-dialog-actions style=\"justify-content: center\">\n  <div class=\"igo-form-button-group add-catalog-button-top-padding\">\n    <button mat-raised-button type=\"button\" (click)=\"cancel()\">\n      {{ 'igo.geo.catalog.library.cancel' | translate }}\n    </button>\n    <button\n      id=\"addCatalogBtnDialog\"\n      mat-raised-button\n      type=\"button\"\n      color=\"primary\"\n      [disabled]=\"!form.valid\"\n      (click)=\"addCatalog(form.value)\"\n    >\n      {{ 'igo.geo.catalog.library.add' | translate }}\n    </button>\n  </div>\n</div>\n", styles: ["mat-form-field{width:100%}.add-catalog-button-top-padding{padding-top:25px}.igo-form{padding:10px 5px 5px}.igo-form-button-group{text-align:center}button{cursor:pointer}button#addCatalogBtnDialog[disabled=true]{cursor:default;background-color:#0000001f;color:#00000042}.error{color:red}\n"] }]
+        args: [{ selector: 'igo-add-catalog-dialog', template: "<h1 mat-dialog-title class=\"mat-typography\">\r\n  {{ 'igo.geo.catalog.library.addTitle' | translate }}\r\n</h1>\r\n<div mat-dialog-content class=\"mat-typography\">\r\n  <form class=\"igo-form\" [formGroup]=\"form\">\r\n    <div class=\"igo-input-container\">\r\n      <mat-form-field>\r\n        <input\r\n          type=\"text\"\r\n          formControlName=\"title\"\r\n          placeholder=\"{{ 'igo.geo.printForm.title' | translate }}\"\r\n          matInput\r\n          [matAutocomplete]=\"auto2\"\r\n        />\r\n        <mat-autocomplete\r\n          #auto2=\"matAutocomplete\"\r\n          (optionSelected)=\"changeUrlOrTitle($event.option.value)\"\r\n        >\r\n          <mat-option\r\n            *ngFor=\"let predefinedCatalog of predefinedCatalogsList$ | async\"\r\n            matTooltipShowDelay=\"500\"\r\n            [matTooltip]=\"predefinedCatalog.title\"\r\n            [value]=\"predefinedCatalog\"\r\n          >\r\n            {{ predefinedCatalog.title }}\r\n          </mat-option>\r\n        </mat-autocomplete>\r\n      </mat-form-field>\r\n    </div>\r\n    <div class=\"igo-input-container\">\r\n      <mat-form-field>\r\n        <input\r\n          type=\"text\"\r\n          formControlName=\"url\"\r\n          placeholder=\"URL\"\r\n          matInput\r\n          [matAutocomplete]=\"auto\"\r\n        />\r\n        <mat-autocomplete\r\n          #auto=\"matAutocomplete\"\r\n          (optionSelected)=\"changeUrlOrTitle($event.option.value)\"\r\n        >\r\n          <mat-option\r\n            *ngFor=\"let predefinedCatalog of predefinedCatalogsList$ | async\"\r\n            matTooltipShowDelay=\"500\"\r\n            [matTooltip]=\"predefinedCatalog.url\"\r\n            [value]=\"predefinedCatalog\"\r\n          >\r\n            {{ predefinedCatalog.url }}\r\n          </mat-option>\r\n        </mat-autocomplete>\r\n      </mat-form-field>\r\n    </div>\r\n    <div class=\"igo-input-container\">\r\n      <mat-form-field>\r\n        <mat-select formControlName=\"type\" placeholder=\"Type\">\r\n          <mat-option\r\n            *ngFor=\"let type of typeCapabilities\"\r\n            [value]=\"type\"\r\n            (click)=\"$event.stopPropagation()\"\r\n          >\r\n            <p matListItemTitle>{{ type }}</p>\r\n          </mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </div>\r\n  </form>\r\n  <span *ngIf=\"error && addedCatalog && emailAddress\">\r\n    <p class=\"error\">\r\n      {{\r\n        languageService.translate.instant(\r\n          'igo.geo.catalog.externalProvider.unavailableWithEmail',\r\n          { value: addedCatalog.url, email: emailAddress }\r\n        )\r\n      }}\r\n    </p>\r\n  </span>\r\n  <span *ngIf=\"error && addedCatalog && !emailAddress\">\r\n    <p class=\"error\">\r\n      {{\r\n        languageService.translate.instant('igo.geo.catalog.unavailable', {\r\n          value: addedCatalog.url\r\n        })\r\n      }}\r\n    </p>\r\n  </span>\r\n</div>\r\n<div mat-dialog-actions style=\"justify-content: center\">\r\n  <div class=\"igo-form-button-group add-catalog-button-top-padding\">\r\n    <button mat-raised-button type=\"button\" (click)=\"cancel()\">\r\n      {{ 'igo.geo.catalog.library.cancel' | translate }}\r\n    </button>\r\n    <button\r\n      id=\"addCatalogBtnDialog\"\r\n      mat-raised-button\r\n      type=\"button\"\r\n      color=\"primary\"\r\n      [disabled]=\"!form.valid\"\r\n      (click)=\"addCatalog(form.value)\"\r\n    >\r\n      {{ 'igo.geo.catalog.library.add' | translate }}\r\n    </button>\r\n  </div>\r\n</div>\r\n", styles: ["mat-form-field{width:100%}.add-catalog-button-top-padding{padding-top:25px}.igo-form{padding:10px 5px 5px}.igo-form-button-group{text-align:center}button{cursor:pointer}button#addCatalogBtnDialog[disabled=true]{cursor:default;background-color:#0000001f;color:#00000042}.error{color:red}\n"] }]
     }], function () { return [{ type: i2$1.UntypedFormBuilder }, { type: i2.LanguageService }, { type: i2.ConfigService }, { type: i1$3.MatDialogRef }, { type: undefined, decorators: [{
                 type: Optional
             }, {
@@ -16928,7 +16928,7 @@ class CatalogLibaryComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CatalogLibaryComponent, [{
         type: Component,
-        args: [{ selector: 'igo-catalog-library', changeDetection: ChangeDetectionStrategy.OnPush, template: "<igo-list [navigation]=\"false\">\n  <ng-template ngFor let-catalog [ngForOf]=\"getCatalogs() | async\">\n    <igo-catalog-library-item\n      igoListItem\n      color=\"accent\"\n      [map]=\"map\"\n      [catalog]=\"catalog\"\n      (catalogRemove)=\"onCatalogRemove(catalog)\"\n      (select)=\"onCatalogSelect(catalog)\"\n    >\n    </igo-catalog-library-item>\n  </ng-template>\n</igo-list>\n\n<div *ngIf=\"addCatalogAllowed\" class=\"btnAddCatalog\">\n  <button\n    mat-raised-button\n    [matTooltip]=\"'igo.geo.catalog.library.addBtn' | translate\"\n    matTooltipPosition=\"above\"\n    color=\"primary\"\n    (click)=\"addCatalogDialog()\"\n  >\n    {{ 'igo.geo.catalog.library.addBtn' | translate }}\n    <mat-icon svgIcon=\"earth-plus\"></mat-icon>\n  </button>\n</div>\n", styles: [":host igo-list{height:auto}:host .btnAddCatalog{justify-content:center;display:flex;margin:30px 0}\n"] }]
+        args: [{ selector: 'igo-catalog-library', changeDetection: ChangeDetectionStrategy.OnPush, template: "<igo-list [navigation]=\"false\">\r\n  <ng-template ngFor let-catalog [ngForOf]=\"getCatalogs() | async\">\r\n    <igo-catalog-library-item\r\n      igoListItem\r\n      color=\"accent\"\r\n      [map]=\"map\"\r\n      [catalog]=\"catalog\"\r\n      (catalogRemove)=\"onCatalogRemove(catalog)\"\r\n      (select)=\"onCatalogSelect(catalog)\"\r\n    >\r\n    </igo-catalog-library-item>\r\n  </ng-template>\r\n</igo-list>\r\n\r\n<div *ngIf=\"addCatalogAllowed\" class=\"btnAddCatalog\">\r\n  <button\r\n    mat-raised-button\r\n    [matTooltip]=\"'igo.geo.catalog.library.addBtn' | translate\"\r\n    matTooltipPosition=\"above\"\r\n    color=\"primary\"\r\n    (click)=\"addCatalogDialog()\"\r\n  >\r\n    {{ 'igo.geo.catalog.library.addBtn' | translate }}\r\n    <mat-icon svgIcon=\"earth-plus\"></mat-icon>\r\n  </button>\r\n</div>\r\n", styles: [":host igo-list{height:auto}:host .btnAddCatalog{justify-content:center;display:flex;margin:30px 0}\n"] }]
     }], function () { return [{ type: CapabilitiesService }, { type: i2.MessageService }, { type: i2.StorageService }, { type: i1$3.MatDialog }]; }, { store: [{
             type: Input
         }], map: [{
@@ -18769,7 +18769,7 @@ class PrintFormComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrintFormComponent, [{
         type: Component,
-        args: [{ selector: 'igo-print-form', template: "<form class=\"igo-form\" [formGroup]=\"form\">\n  <div class=\"igo-input-container\">\n    <mat-form-field>\n      <mat-label>{{ 'igo.geo.printForm.title' | translate }}</mat-label>\n      <input\n        matInput\n        formControlName=\"title\"\n        placeholder=\"{{ 'igo.geo.printForm.title' | translate }}\"\n      />\n      <mat-error *ngIf=\"titleField.errors?.maxlength\">{{\n        'igo.geo.formValidation.maxLength'\n          | translate\n            : {\n                column: 'igo.geo.printForm.title' | translate,\n                value: 130\n              }\n      }}</mat-error>\n    </mat-form-field>\n  </div>\n  <div class=\"igo-input-container\">\n    <mat-form-field>\n      <mat-label>{{ 'igo.geo.printForm.subtitle' | translate }}</mat-label>\n      <input\n        matInput\n        formControlName=\"subtitle\"\n        placeholder=\"{{ 'igo.geo.printForm.subtitle' | translate }}\"\n      />\n      <mat-error *ngIf=\"subtitleField.errors?.maxlength\">{{\n        'igo.geo.formValidation.maxLength'\n          | translate\n            : {\n                column: 'igo.geo.printForm.subtitle' | translate,\n                value: 120\n              }\n      }}</mat-error>\n    </mat-form-field>\n  </div>\n  <div class=\"igo-input-container\">\n    <mat-form-field>\n      <mat-label>{{ 'igo.geo.printForm.comment' | translate }}</mat-label>\n      <input\n        matInput\n        formControlName=\"comment\"\n        placeholder=\"{{ 'igo.geo.printForm.comment' | translate }}\"\n      />\n      <mat-error *ngIf=\"commentField.errors?.maxlength\">{{\n        'igo.geo.formValidation.maxLength'\n          | translate\n            : {\n                column: 'igo.geo.printForm.comment' | translate,\n                value: maxLength\n              }\n      }}</mat-error>\n    </mat-form-field>\n  </div>\n\n  <div class=\"igo-input-container slide-toggle-container\">\n    <div class=\"print-slide-toggle-container\">\n      <mat-slide-toggle\n        class=\"print-option\"\n        formControlName=\"showProjection\"\n        [labelPosition]=\"'before'\"\n      >\n        {{ 'igo.geo.printForm.showProjection' | translate }}\n      </mat-slide-toggle>\n      <mat-slide-toggle\n        class=\"print-option\"\n        formControlName=\"showScale\"\n        [labelPosition]=\"'before'\"\n      >\n        {{ 'igo.geo.printForm.showScale' | translate }}\n      </mat-slide-toggle>\n      <mat-slide-toggle\n        class=\"print-option\"\n        formControlName=\"doZipFile\"\n        [labelPosition]=\"'before'\"\n        [style.display]=\"isPrintService ? 'none' : ''\"\n      >\n        {{ 'igo.geo.printForm.doZipFile' | translate }}\n      </mat-slide-toggle>\n    </div>\n  </div>\n\n  <div class=\"igo-input-container\">\n    <mat-form-field>\n      <mat-label>{{\n        'igo.geo.printForm.legendPosition' | translate\n      }}</mat-label>\n      <mat-select\n        formControlName=\"legendPosition\"\n        placeholder=\"{{ 'igo.geo.printForm.legendPosition' | translate }}\"\n      >\n        <mat-option\n          *ngFor=\"let legendPosition of legendPositions | keyvalue\"\n          [value]=\"legendPosition.key\"\n        >\n          <ng-container\n            *ngIf=\"!['newpage', 'newimage'].includes(legendPosition.value)\"\n          >\n            {{\n              'igo.geo.printForm.legendPositions.' + legendPosition.value\n                | translate\n            }}\n          </ng-container>\n\n          <ng-container\n            *ngIf=\"['newpage', 'newimage'].includes(legendPosition.value)\"\n          >\n            {{\n              (outputFormat === 'Pdf'\n                ? 'igo.geo.printForm.legendPositions.newpage'\n                : 'igo.geo.printForm.legendPositions.newimage'\n              ) | translate\n            }}\n          </ng-container>\n        </mat-option>\n      </mat-select>\n    </mat-form-field>\n  </div>\n\n  <div class=\"igo-input-container\">\n    <mat-form-field>\n      <mat-label>{{ 'igo.geo.printForm.outputFormat' | translate }}</mat-label>\n      <mat-select\n        (selectionChange)=\"toggleImageSaveProp()\"\n        formControlName=\"outputFormat\"\n        placeholder=\"{{ 'igo.geo.printForm.outputFormat' | translate }}\"\n      >\n        <mat-option\n          *ngFor=\"let outputFormat of outputFormats | keyvalue\"\n          [value]=\"outputFormat.key\"\n        >\n          {{ outputFormat.value }}\n        </mat-option>\n      </mat-select>\n    </mat-form-field>\n  </div>\n\n  <div\n    class=\"igo-input-container\"\n    [style.display]=\"isPrintService ? 'block' : 'none'\"\n  >\n    <mat-form-field>\n      <mat-label>{{ 'igo.geo.printForm.paperFormat' | translate }}</mat-label>\n      <mat-select\n        (selectionChange)=\"changeCommentLength()\"\n        formControlName=\"paperFormat\"\n        placeholder=\"{{ 'igo.geo.printForm.paperFormat' | translate }}\"\n      >\n        <mat-option\n          *ngFor=\"let paperFormat of paperFormats | keyvalue\"\n          [value]=\"paperFormat.key\"\n        >\n          {{\n            'igo.geo.printForm.paperFormats.' + paperFormat.value | translate\n          }}\n        </mat-option>\n      </mat-select>\n    </mat-form-field>\n  </div>\n\n  <div\n    class=\"igo-input-container\"\n    [style.display]=\"isPrintService ? 'none' : 'block'\"\n  >\n    <mat-form-field>\n      <mat-label>{{ 'igo.geo.printForm.imageFormat' | translate }}</mat-label>\n      <mat-select\n        formControlName=\"imageFormat\"\n        placeholder=\"{{ 'igo.geo.printForm.imageFormat' | translate }}\"\n      >\n        <mat-option\n          *ngFor=\"let imageFormat of imageFormats | keyvalue\"\n          [value]=\"imageFormat.key\"\n        >\n          {{ imageFormat.value }}\n        </mat-option>\n      </mat-select>\n    </mat-form-field>\n  </div>\n\n  <div class=\"igo-input-container\">\n    <mat-form-field>\n      <mat-label>{{ 'igo.geo.printForm.resolution' | translate }}</mat-label>\n      <mat-select\n        formControlName=\"resolution\"\n        placeholder=\"{{ 'igo.geo.printForm.resolution' | translate }}\"\n      >\n        <mat-option\n          *ngFor=\"let resolution of resolutions | keyvalue\"\n          [value]=\"resolution.key\"\n        >\n          {{ resolution.value + ' PPI' }}\n        </mat-option>\n      </mat-select>\n    </mat-form-field>\n  </div>\n\n  <div\n    class=\"igo-input-container\"\n    [style.display]=\"isPrintService ? 'block' : 'none'\"\n  >\n    <mat-form-field>\n      <mat-label>{{ 'igo.geo.printForm.orientation' | translate }}</mat-label>\n      <mat-select\n        (selectionChange)=\"changeCommentLength()\"\n        formControlName=\"orientation\"\n        placeholder=\"{{ 'igo.geo.printForm.orientation' | translate }}\"\n      >\n        <mat-option\n          *ngFor=\"let orientation of orientations | keyvalue\"\n          [value]=\"orientation.key\"\n        >\n          {{ 'igo.geo.printForm.' + orientation.value | translate }}\n        </mat-option>\n      </mat-select>\n    </mat-form-field>\n  </div>\n\n  <div class=\"igo-form-button-group print-button-top-padding\">\n    <button\n      mat-raised-button\n      type=\"button\"\n      [disabled]=\"!form.valid || (disabled$ | async)\"\n      (click)=\"handleFormSubmit(form.value, form.valid)\"\n    >\n      {{ 'igo.geo.printForm.saveBtn' | translate }}\n    </button>\n  </div>\n</form>\n", styles: [":host mat-form-field{width:100%}:host .slide-toggle-container{margin-bottom:16px}:host .print-slide-toggle-container mat-slide-toggle{width:100%;padding:0 8px}:host .print-slide-toggle-container mat-slide-toggle ::ng-deep .mdc-form-field{width:100%}:host .print-slide-toggle-container mat-slide-toggle ::ng-deep .mdc-label{margin-left:0;width:calc(100% - 60px)}:host .print-option{display:block;margin-bottom:12px}:host .igo-form{padding:10px 5px 5px}:host .igo-form-button-group{text-align:center}\n"] }]
+        args: [{ selector: 'igo-print-form', template: "<form class=\"igo-form\" [formGroup]=\"form\">\r\n  <div class=\"igo-input-container\">\r\n    <mat-form-field>\r\n      <mat-label>{{ 'igo.geo.printForm.title' | translate }}</mat-label>\r\n      <input\r\n        matInput\r\n        formControlName=\"title\"\r\n        placeholder=\"{{ 'igo.geo.printForm.title' | translate }}\"\r\n      />\r\n      <mat-error *ngIf=\"titleField.errors?.maxlength\">{{\r\n        'igo.geo.formValidation.maxLength'\r\n          | translate\r\n            : {\r\n                column: 'igo.geo.printForm.title' | translate,\r\n                value: 130\r\n              }\r\n      }}</mat-error>\r\n    </mat-form-field>\r\n  </div>\r\n  <div class=\"igo-input-container\">\r\n    <mat-form-field>\r\n      <mat-label>{{ 'igo.geo.printForm.subtitle' | translate }}</mat-label>\r\n      <input\r\n        matInput\r\n        formControlName=\"subtitle\"\r\n        placeholder=\"{{ 'igo.geo.printForm.subtitle' | translate }}\"\r\n      />\r\n      <mat-error *ngIf=\"subtitleField.errors?.maxlength\">{{\r\n        'igo.geo.formValidation.maxLength'\r\n          | translate\r\n            : {\r\n                column: 'igo.geo.printForm.subtitle' | translate,\r\n                value: 120\r\n              }\r\n      }}</mat-error>\r\n    </mat-form-field>\r\n  </div>\r\n  <div class=\"igo-input-container\">\r\n    <mat-form-field>\r\n      <mat-label>{{ 'igo.geo.printForm.comment' | translate }}</mat-label>\r\n      <input\r\n        matInput\r\n        formControlName=\"comment\"\r\n        placeholder=\"{{ 'igo.geo.printForm.comment' | translate }}\"\r\n      />\r\n      <mat-error *ngIf=\"commentField.errors?.maxlength\">{{\r\n        'igo.geo.formValidation.maxLength'\r\n          | translate\r\n            : {\r\n                column: 'igo.geo.printForm.comment' | translate,\r\n                value: maxLength\r\n              }\r\n      }}</mat-error>\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <div class=\"igo-input-container slide-toggle-container\">\r\n    <div class=\"print-slide-toggle-container\">\r\n      <mat-slide-toggle\r\n        class=\"print-option\"\r\n        formControlName=\"showProjection\"\r\n        [labelPosition]=\"'before'\"\r\n      >\r\n        {{ 'igo.geo.printForm.showProjection' | translate }}\r\n      </mat-slide-toggle>\r\n      <mat-slide-toggle\r\n        class=\"print-option\"\r\n        formControlName=\"showScale\"\r\n        [labelPosition]=\"'before'\"\r\n      >\r\n        {{ 'igo.geo.printForm.showScale' | translate }}\r\n      </mat-slide-toggle>\r\n      <mat-slide-toggle\r\n        class=\"print-option\"\r\n        formControlName=\"doZipFile\"\r\n        [labelPosition]=\"'before'\"\r\n        [style.display]=\"isPrintService ? 'none' : ''\"\r\n      >\r\n        {{ 'igo.geo.printForm.doZipFile' | translate }}\r\n      </mat-slide-toggle>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"igo-input-container\">\r\n    <mat-form-field>\r\n      <mat-label>{{\r\n        'igo.geo.printForm.legendPosition' | translate\r\n      }}</mat-label>\r\n      <mat-select\r\n        formControlName=\"legendPosition\"\r\n        placeholder=\"{{ 'igo.geo.printForm.legendPosition' | translate }}\"\r\n      >\r\n        <mat-option\r\n          *ngFor=\"let legendPosition of legendPositions | keyvalue\"\r\n          [value]=\"legendPosition.key\"\r\n        >\r\n          <ng-container\r\n            *ngIf=\"!['newpage', 'newimage'].includes(legendPosition.value)\"\r\n          >\r\n            {{\r\n              'igo.geo.printForm.legendPositions.' + legendPosition.value\r\n                | translate\r\n            }}\r\n          </ng-container>\r\n\r\n          <ng-container\r\n            *ngIf=\"['newpage', 'newimage'].includes(legendPosition.value)\"\r\n          >\r\n            {{\r\n              (outputFormat === 'Pdf'\r\n                ? 'igo.geo.printForm.legendPositions.newpage'\r\n                : 'igo.geo.printForm.legendPositions.newimage'\r\n              ) | translate\r\n            }}\r\n          </ng-container>\r\n        </mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <div class=\"igo-input-container\">\r\n    <mat-form-field>\r\n      <mat-label>{{ 'igo.geo.printForm.outputFormat' | translate }}</mat-label>\r\n      <mat-select\r\n        (selectionChange)=\"toggleImageSaveProp()\"\r\n        formControlName=\"outputFormat\"\r\n        placeholder=\"{{ 'igo.geo.printForm.outputFormat' | translate }}\"\r\n      >\r\n        <mat-option\r\n          *ngFor=\"let outputFormat of outputFormats | keyvalue\"\r\n          [value]=\"outputFormat.key\"\r\n        >\r\n          {{ outputFormat.value }}\r\n        </mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <div\r\n    class=\"igo-input-container\"\r\n    [style.display]=\"isPrintService ? 'block' : 'none'\"\r\n  >\r\n    <mat-form-field>\r\n      <mat-label>{{ 'igo.geo.printForm.paperFormat' | translate }}</mat-label>\r\n      <mat-select\r\n        (selectionChange)=\"changeCommentLength()\"\r\n        formControlName=\"paperFormat\"\r\n        placeholder=\"{{ 'igo.geo.printForm.paperFormat' | translate }}\"\r\n      >\r\n        <mat-option\r\n          *ngFor=\"let paperFormat of paperFormats | keyvalue\"\r\n          [value]=\"paperFormat.key\"\r\n        >\r\n          {{\r\n            'igo.geo.printForm.paperFormats.' + paperFormat.value | translate\r\n          }}\r\n        </mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <div\r\n    class=\"igo-input-container\"\r\n    [style.display]=\"isPrintService ? 'none' : 'block'\"\r\n  >\r\n    <mat-form-field>\r\n      <mat-label>{{ 'igo.geo.printForm.imageFormat' | translate }}</mat-label>\r\n      <mat-select\r\n        formControlName=\"imageFormat\"\r\n        placeholder=\"{{ 'igo.geo.printForm.imageFormat' | translate }}\"\r\n      >\r\n        <mat-option\r\n          *ngFor=\"let imageFormat of imageFormats | keyvalue\"\r\n          [value]=\"imageFormat.key\"\r\n        >\r\n          {{ imageFormat.value }}\r\n        </mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <div class=\"igo-input-container\">\r\n    <mat-form-field>\r\n      <mat-label>{{ 'igo.geo.printForm.resolution' | translate }}</mat-label>\r\n      <mat-select\r\n        formControlName=\"resolution\"\r\n        placeholder=\"{{ 'igo.geo.printForm.resolution' | translate }}\"\r\n      >\r\n        <mat-option\r\n          *ngFor=\"let resolution of resolutions | keyvalue\"\r\n          [value]=\"resolution.key\"\r\n        >\r\n          {{ resolution.value + ' PPI' }}\r\n        </mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <div\r\n    class=\"igo-input-container\"\r\n    [style.display]=\"isPrintService ? 'block' : 'none'\"\r\n  >\r\n    <mat-form-field>\r\n      <mat-label>{{ 'igo.geo.printForm.orientation' | translate }}</mat-label>\r\n      <mat-select\r\n        (selectionChange)=\"changeCommentLength()\"\r\n        formControlName=\"orientation\"\r\n        placeholder=\"{{ 'igo.geo.printForm.orientation' | translate }}\"\r\n      >\r\n        <mat-option\r\n          *ngFor=\"let orientation of orientations | keyvalue\"\r\n          [value]=\"orientation.key\"\r\n        >\r\n          {{ 'igo.geo.printForm.' + orientation.value | translate }}\r\n        </mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <div class=\"igo-form-button-group print-button-top-padding\">\r\n    <button\r\n      mat-raised-button\r\n      type=\"button\"\r\n      [disabled]=\"!form.valid || (disabled$ | async)\"\r\n      (click)=\"handleFormSubmit(form.value, form.valid)\"\r\n    >\r\n      {{ 'igo.geo.printForm.saveBtn' | translate }}\r\n    </button>\r\n  </div>\r\n</form>\r\n", styles: [":host mat-form-field{width:100%}:host .slide-toggle-container{margin-bottom:16px}:host .print-slide-toggle-container mat-slide-toggle{width:100%;padding:0 8px}:host .print-slide-toggle-container mat-slide-toggle ::ng-deep .mdc-form-field{width:100%}:host .print-slide-toggle-container mat-slide-toggle ::ng-deep .mdc-label{margin-left:0;width:calc(100% - 60px)}:host .print-option{display:block;margin-bottom:12px}:host .igo-form{padding:10px 5px 5px}:host .igo-form-button-group{text-align:center}\n"] }]
     }], function () { return [{ type: i2$1.UntypedFormBuilder }]; }, { disabled$: [{
             type: Input
         }], imageFormat: [{
@@ -18898,7 +18898,7 @@ class PrintComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrintComponent, [{
         type: Component,
-        args: [{ selector: 'igo-print', template: "<igo-print-form\n  [outputFormat]=\"outputFormat\"\n  [paperFormat]=\"paperFormat\"\n  [orientation]=\"orientation\"\n  [imageFormat]=\"imageFormat\"\n  [resolution]=\"resolution\"\n  [legendPosition]=\"legendPosition\"\n  [disabled$]=\"disabled$\"\n  (submit)=\"handleFormSubmit($event)\"\n>\n</igo-print-form>\n" }]
+        args: [{ selector: 'igo-print', template: "<igo-print-form\r\n  [outputFormat]=\"outputFormat\"\r\n  [paperFormat]=\"paperFormat\"\r\n  [orientation]=\"orientation\"\r\n  [imageFormat]=\"imageFormat\"\r\n  [resolution]=\"resolution\"\r\n  [legendPosition]=\"legendPosition\"\r\n  [disabled$]=\"disabled$\"\r\n  (submit)=\"handleFormSubmit($event)\"\r\n>\r\n</igo-print-form>\r\n" }]
     }], function () { return [{ type: PrintService }]; }, { map: [{
             type: Input
         }], outputFormat: [{
@@ -19945,7 +19945,7 @@ class DirectionsButtonsComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DirectionsButtonsComponent, [{
         type: Component,
-        args: [{ selector: 'igo-directions-buttons', template: "<div class=\"igo-form-button-group\">\n  <button\n    mat-icon-button\n    tooltip-position=\"below\"\n    matTooltipShowDelay=\"500\"\n    [matTooltip]=\"'igo.geo.directionsForm.addStop' | translate\"\n    color=\"primary\"\n    (click)=\"addStop()\"\n  >\n    <mat-icon svgIcon=\"map-marker-plus\"></mat-icon>\n  </button>\n  <button\n    mat-icon-button\n    tooltip-position=\"below\"\n    matTooltipShowDelay=\"500\"\n    *ngIf=\"\n      (routesFeatureStore.count$ | async) >= 1 ||\n      (stopsStore.count$ | async) >= 1\n    \"\n    [matTooltip]=\"'igo.geo.directionsForm.resetDirectionsBtn' | translate\"\n    color=\"warn\"\n    (click)=\"resetStops()\"\n  >\n    <mat-icon svgIcon=\"file-restore\"></mat-icon>\n  </button>\n  <button\n    mat-icon-button\n    tooltip-position=\"below\"\n    matTooltipShowDelay=\"500\"\n    *ngIf=\"(routesFeatureStore.count$ | async) >= 1\"\n    (click)=\"zoomRoute()\"\n    [matTooltip]=\"'igo.geo.directionsForm.zoomRoute' | translate\"\n    color=\"primary\"\n  >\n    <mat-icon svgIcon=\"magnify-plus-outline\"></mat-icon>\n  </button>\n  <button\n    mat-icon-button\n    tooltip-position=\"below\"\n    matTooltipShowDelay=\"500\"\n    *ngIf=\"(routesFeatureStore.count$ | async) >= 1\"\n    (click)=\"copyDirectionsToClipboard()\"\n    [matTooltip]=\"'igo.geo.directionsForm.copy' | translate\"\n    color=\"primary\"\n  >\n    <mat-icon svgIcon=\"content-copy\"></mat-icon>\n  </button>\n  <button\n    mat-icon-button\n    tooltip-position=\"below\"\n    matTooltipShowDelay=\"500\"\n    *ngIf=\"(routesFeatureStore.count$ | async) >= 1\"\n    (click)=\"copyLinkToClipboard()\"\n    [matTooltip]=\"'igo.geo.directionsForm.link' | translate\"\n    color=\"primary\"\n  >\n    <mat-icon svgIcon=\"link\"></mat-icon>\n  </button>\n\n  <button\n    mat-icon-button\n    tooltip-position=\"below\"\n    matTooltipShowDelay=\"500\"\n    *ngIf=\"(routesFeatureStore.count$ | async) >= 1\"\n    (click)=\"printDirections()\"\n    [disabled]=\"disabled$ | async\"\n    [matTooltip]=\"'igo.geo.directionsForm.print' | translate\"\n    color=\"primary\"\n  >\n    <mat-icon svgIcon=\"printer\"></mat-icon>\n  </button>\n</div>\n" }]
+        args: [{ selector: 'igo-directions-buttons', template: "<div class=\"igo-form-button-group\">\r\n  <button\r\n    mat-icon-button\r\n    tooltip-position=\"below\"\r\n    matTooltipShowDelay=\"500\"\r\n    [matTooltip]=\"'igo.geo.directionsForm.addStop' | translate\"\r\n    color=\"primary\"\r\n    (click)=\"addStop()\"\r\n  >\r\n    <mat-icon svgIcon=\"map-marker-plus\"></mat-icon>\r\n  </button>\r\n  <button\r\n    mat-icon-button\r\n    tooltip-position=\"below\"\r\n    matTooltipShowDelay=\"500\"\r\n    *ngIf=\"\r\n      (routesFeatureStore.count$ | async) >= 1 ||\r\n      (stopsStore.count$ | async) >= 1\r\n    \"\r\n    [matTooltip]=\"'igo.geo.directionsForm.resetDirectionsBtn' | translate\"\r\n    color=\"warn\"\r\n    (click)=\"resetStops()\"\r\n  >\r\n    <mat-icon svgIcon=\"file-restore\"></mat-icon>\r\n  </button>\r\n  <button\r\n    mat-icon-button\r\n    tooltip-position=\"below\"\r\n    matTooltipShowDelay=\"500\"\r\n    *ngIf=\"(routesFeatureStore.count$ | async) >= 1\"\r\n    (click)=\"zoomRoute()\"\r\n    [matTooltip]=\"'igo.geo.directionsForm.zoomRoute' | translate\"\r\n    color=\"primary\"\r\n  >\r\n    <mat-icon svgIcon=\"magnify-plus-outline\"></mat-icon>\r\n  </button>\r\n  <button\r\n    mat-icon-button\r\n    tooltip-position=\"below\"\r\n    matTooltipShowDelay=\"500\"\r\n    *ngIf=\"(routesFeatureStore.count$ | async) >= 1\"\r\n    (click)=\"copyDirectionsToClipboard()\"\r\n    [matTooltip]=\"'igo.geo.directionsForm.copy' | translate\"\r\n    color=\"primary\"\r\n  >\r\n    <mat-icon svgIcon=\"content-copy\"></mat-icon>\r\n  </button>\r\n  <button\r\n    mat-icon-button\r\n    tooltip-position=\"below\"\r\n    matTooltipShowDelay=\"500\"\r\n    *ngIf=\"(routesFeatureStore.count$ | async) >= 1\"\r\n    (click)=\"copyLinkToClipboard()\"\r\n    [matTooltip]=\"'igo.geo.directionsForm.link' | translate\"\r\n    color=\"primary\"\r\n  >\r\n    <mat-icon svgIcon=\"link\"></mat-icon>\r\n  </button>\r\n\r\n  <button\r\n    mat-icon-button\r\n    tooltip-position=\"below\"\r\n    matTooltipShowDelay=\"500\"\r\n    *ngIf=\"(routesFeatureStore.count$ | async) >= 1\"\r\n    (click)=\"printDirections()\"\r\n    [disabled]=\"disabled$ | async\"\r\n    [matTooltip]=\"'igo.geo.directionsForm.print' | translate\"\r\n    color=\"primary\"\r\n  >\r\n    <mat-icon svgIcon=\"printer\"></mat-icon>\r\n  </button>\r\n</div>\r\n" }]
     }], function () { return [{ type: i2.LanguageService }, { type: i2.MessageService }, { type: i2.RouteService, decorators: [{
                 type: Optional
             }] }, { type: DirectionsService }]; }, { contextUri: [{
@@ -20418,7 +20418,7 @@ class DirectionsResultsComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DirectionsResultsComponent, [{
         type: Component,
-        args: [{ selector: 'igo-directions-results', template: "<div class=\"igo-input-container\" *ngIf=\"directions && activeDirection\">\n  <mat-form-field *ngIf=\"directions && directions.length > 1\">\n    <mat-label>{{\n      'igo.geo.directionsForm.drivingOptions' | translate\n    }}</mat-label>\n    <mat-select\n      placeholder=\"{{ 'igo.geo.directionsForm.drivingOptions' | translate }}\"\n      (selectionChange)=\"changeRoute()\"\n      [(ngModel)]=\"activeDirection\"\n    >\n      <mat-option\n        *ngFor=\"let direction of directions; let cnt = index\"\n        [value]=\"direction\"\n      >\n        Option {{ cnt + 1 }} : {{ formatDistance(direction.distance) }} ({{\n          formatDuration(direction.duration)\n        }})\n      </mat-option>\n    </mat-select>\n  </mat-form-field>\n\n  <mat-divider *ngIf=\"directions && directions.length === 0\"></mat-divider>\n\n  <mat-list (mouseleave)=\"onStepsListBlur()\">\n    <h2 mat-header class=\"igo-route-title\">{{ activeDirection.title }}</h2>\n    <span class=\"mat-caption\">\n      {{ formatDistance(activeDirection.distance) }},\n      {{ formatDuration(activeDirection.duration) }}\n    </span>\n    <mat-list-item\n      class=\"igo-steps\"\n      (mouseenter)=\"showSegment(step)\"\n      (click)=\"showSegment(step, true)\"\n      *ngFor=\"let step of activeDirection.steps; let cnt = index\"\n      igoListItem\n    >\n      <mat-icon\n        [ngClass]=\"formatStep(step, cnt).cssClass\"\n        matListItemIcon\n        svgIcon=\"{{ formatStep(step, cnt).image }}\"\n      >\n      </mat-icon>\n\n      <span class=\"igo-step-text\">\n        {{ cnt + 1 }}. {{ formatStep(step, cnt).instruction }}\n      </span>\n      <span matListItemMeta>\n        {{ formatDistance(step.distance) }}\n      </span>\n    </mat-list-item>\n\n    <mat-divider></mat-divider>\n  </mat-list>\n</div>\n", styles: [".igo-input-container{width:100%;padding:20px 10px;box-sizing:border-box}.igo-input-container mat-form-field{width:70%}.igo-route-title{font-weight:700}.igo-steps{cursor:pointer;padding:35px 0}.igo-steps .igo-step-text{overflow-wrap:break-word;word-wrap:break-word;white-space:pre-wrap}.mat-mdc-list-item{word-wrap:break-word!important;white-space:pre-wrap!important}.rotate-90{transform:rotate(90deg)}.rotate-45{transform:rotate(45deg)}.rotate-270{transform:rotate(270deg)}.rotate-250{transform:rotate(250deg)}.rotate-290{transform:rotate(290deg)}.icon-flipped{transform:scaleY(-1)}\n"] }]
+        args: [{ selector: 'igo-directions-results', template: "<div class=\"igo-input-container\" *ngIf=\"directions && activeDirection\">\r\n  <mat-form-field *ngIf=\"directions && directions.length > 1\">\r\n    <mat-label>{{\r\n      'igo.geo.directionsForm.drivingOptions' | translate\r\n    }}</mat-label>\r\n    <mat-select\r\n      placeholder=\"{{ 'igo.geo.directionsForm.drivingOptions' | translate }}\"\r\n      (selectionChange)=\"changeRoute()\"\r\n      [(ngModel)]=\"activeDirection\"\r\n    >\r\n      <mat-option\r\n        *ngFor=\"let direction of directions; let cnt = index\"\r\n        [value]=\"direction\"\r\n      >\r\n        Option {{ cnt + 1 }} : {{ formatDistance(direction.distance) }} ({{\r\n          formatDuration(direction.duration)\r\n        }})\r\n      </mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n\r\n  <mat-divider *ngIf=\"directions && directions.length === 0\"></mat-divider>\r\n\r\n  <mat-list (mouseleave)=\"onStepsListBlur()\">\r\n    <h2 mat-header class=\"igo-route-title\">{{ activeDirection.title }}</h2>\r\n    <span class=\"mat-caption\">\r\n      {{ formatDistance(activeDirection.distance) }},\r\n      {{ formatDuration(activeDirection.duration) }}\r\n    </span>\r\n    <mat-list-item\r\n      class=\"igo-steps\"\r\n      (mouseenter)=\"showSegment(step)\"\r\n      (click)=\"showSegment(step, true)\"\r\n      *ngFor=\"let step of activeDirection.steps; let cnt = index\"\r\n      igoListItem\r\n    >\r\n      <mat-icon\r\n        [ngClass]=\"formatStep(step, cnt).cssClass\"\r\n        matListItemIcon\r\n        svgIcon=\"{{ formatStep(step, cnt).image }}\"\r\n      >\r\n      </mat-icon>\r\n\r\n      <span class=\"igo-step-text\">\r\n        {{ cnt + 1 }}. {{ formatStep(step, cnt).instruction }}\r\n      </span>\r\n      <span matListItemMeta>\r\n        {{ formatDistance(step.distance) }}\r\n      </span>\r\n    </mat-list-item>\r\n\r\n    <mat-divider></mat-divider>\r\n  </mat-list>\r\n</div>\r\n", styles: [".igo-input-container{width:100%;padding:20px 10px;box-sizing:border-box}.igo-input-container mat-form-field{width:70%}.igo-route-title{font-weight:700}.igo-steps{cursor:pointer;padding:35px 0}.igo-steps .igo-step-text{overflow-wrap:break-word;word-wrap:break-word;white-space:pre-wrap}.mat-mdc-list-item{word-wrap:break-word!important;white-space:pre-wrap!important}.rotate-90{transform:rotate(90deg)}.rotate-45{transform:rotate(45deg)}.rotate-270{transform:rotate(270deg)}.rotate-250{transform:rotate(250deg)}.rotate-290{transform:rotate(290deg)}.icon-flipped{transform:scaleY(-1)}\n"] }]
     }], function () { return [{ type: i2.LanguageService }, { type: i0.ChangeDetectorRef }]; }, { routesFeatureStore: [{
             type: Input
         }], stepFeatureStore: [{
@@ -20460,7 +20460,7 @@ class ZoomButtonComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ZoomButtonComponent, [{
         type: Component,
-        args: [{ selector: 'igo-zoom-button', template: "<div class=\"igo-zoom-button-container\">\n  <button\n    mat-icon-button\n    [matTooltip]=\"'igo.geo.mapButtons.zoomIn' | translate: { zoom: zoom + 1 }\"\n    matTooltipPosition=\"left\"\n    [color]=\"color\"\n    [disabled]=\"zoom >= maxZoom\"\n    (click)=\"map.viewController.zoomIn()\"\n  >\n    <mat-icon svgIcon=\"plus\"></mat-icon>\n  </button>\n\n  <button\n    mat-icon-button\n    [matTooltip]=\"'igo.geo.mapButtons.zoomOut' | translate: { zoom: zoom - 1 }\"\n    matTooltipPosition=\"left\"\n    [color]=\"color\"\n    [disabled]=\"zoom <= minZoom\"\n    (click)=\"map.viewController.zoomOut()\"\n  >\n    <mat-icon svgIcon=\"minus\"></mat-icon>\n  </button>\n</div>\n", styles: [":host button{border-radius:0!important}:host button .mat-ripple,:host button .mdc-icon-button__ripple{border-radius:0!important}:host .igo-zoom-button-container{width:40px}:host .igo-zoom-button-container button{background-color:#fff}:host .igo-zoom-button-container button:hover{background-color:#efefef}:host .igo-zoom-button-container button:first-child{margin-bottom:2px}\n"] }]
+        args: [{ selector: 'igo-zoom-button', template: "<div class=\"igo-zoom-button-container\">\r\n  <button\r\n    mat-icon-button\r\n    [matTooltip]=\"'igo.geo.mapButtons.zoomIn' | translate: { zoom: zoom + 1 }\"\r\n    matTooltipPosition=\"left\"\r\n    [color]=\"color\"\r\n    [disabled]=\"zoom >= maxZoom\"\r\n    (click)=\"map.viewController.zoomIn()\"\r\n  >\r\n    <mat-icon svgIcon=\"plus\"></mat-icon>\r\n  </button>\r\n\r\n  <button\r\n    mat-icon-button\r\n    [matTooltip]=\"'igo.geo.mapButtons.zoomOut' | translate: { zoom: zoom - 1 }\"\r\n    matTooltipPosition=\"left\"\r\n    [color]=\"color\"\r\n    [disabled]=\"zoom <= minZoom\"\r\n    (click)=\"map.viewController.zoomOut()\"\r\n  >\r\n    <mat-icon svgIcon=\"minus\"></mat-icon>\r\n  </button>\r\n</div>\r\n", styles: [":host button{border-radius:0!important}:host button .mat-ripple,:host button .mdc-icon-button__ripple{border-radius:0!important}:host .igo-zoom-button-container{width:40px}:host .igo-zoom-button-container button{background-color:#fff}:host .igo-zoom-button-container button:hover{background-color:#efefef}:host .igo-zoom-button-container button:first-child{margin-bottom:2px}\n"] }]
     }], function () { return []; }, { map: [{
             type: Input
         }], color: [{
@@ -20506,7 +20506,7 @@ class MenuButtonComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MenuButtonComponent, [{
         type: Component,
-        args: [{ selector: 'igo-menu-button', template: "<button\n  mat-icon-button\n  id=\"menu-button\"\n  [ngClass]=\"menuButtonClass\"\n  tooltip-position=\"below\"\n  matTooltipShowDelay=\"500\"\n  [matTooltip]=\"(sidenavOpened ? 'menu.close' : 'menu.open') | translate\"\n  (click)=\"onToggleSidenavClick()\"\n>\n  <mat-icon svgIcon=\"menu\"></mat-icon>\n</button>\n", styles: [":host button{border-radius:0!important}:host button .mat-ripple,:host button .mdc-icon-button__ripple{border-radius:0!important}\n"] }]
+        args: [{ selector: 'igo-menu-button', template: "<button\r\n  mat-icon-button\r\n  id=\"menu-button\"\r\n  [ngClass]=\"menuButtonClass\"\r\n  tooltip-position=\"below\"\r\n  matTooltipShowDelay=\"500\"\r\n  [matTooltip]=\"(sidenavOpened ? 'menu.close' : 'menu.open') | translate\"\r\n  (click)=\"onToggleSidenavClick()\"\r\n>\r\n  <mat-icon svgIcon=\"menu\"></mat-icon>\r\n</button>\r\n", styles: [":host button{border-radius:0!important}:host button .mat-ripple,:host button .mdc-icon-button__ripple{border-radius:0!important}\n"] }]
     }], function () { return [{ type: i2.ConfigService }]; }, { sidenavOpened: [{
             type: Input
         }], openSidenav: [{
@@ -20582,7 +20582,7 @@ class GeolocateButtonComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(GeolocateButtonComponent, [{
         type: Component,
-        args: [{ selector: 'igo-geolocate-button', template: "<div class=\"igo-geolocate-button-container\" *ngIf=\"map.geolocationController\">\n  <button\n    mat-icon-button\n    [matTooltip]=\"\n      map.geolocationController.tracking\n        ? ('igo.geo.mapButtons.geolocateInactive' | translate)\n        : ('igo.geo.mapButtons.geolocate' | translate)\n    \"\n    matTooltipPosition=\"left\"\n    [color]=\"color\"\n    (click)=\"onGeolocationClick()\"\n  >\n    <mat-icon svgIcon=\"{{ icon$ | async }}\"></mat-icon>\n  </button>\n</div>\n", styles: [":host button{border-radius:0!important}:host button .mat-ripple,:host button .mdc-icon-button__ripple{border-radius:0!important}:host .igo-geolocate-button-container{width:40px;background-color:#fff}:host .igo-geolocate-button-container:hover{background-color:#efefef}\n"] }]
+        args: [{ selector: 'igo-geolocate-button', template: "<div class=\"igo-geolocate-button-container\" *ngIf=\"map.geolocationController\">\r\n  <button\r\n    mat-icon-button\r\n    [matTooltip]=\"\r\n      map.geolocationController.tracking\r\n        ? ('igo.geo.mapButtons.geolocateInactive' | translate)\r\n        : ('igo.geo.mapButtons.geolocate' | translate)\r\n    \"\r\n    matTooltipPosition=\"left\"\r\n    [color]=\"color\"\r\n    (click)=\"onGeolocationClick()\"\r\n  >\r\n    <mat-icon svgIcon=\"{{ icon$ | async }}\"></mat-icon>\r\n  </button>\r\n</div>\r\n", styles: [":host button{border-radius:0!important}:host button .mat-ripple,:host button .mdc-icon-button__ripple{border-radius:0!important}:host .igo-geolocate-button-container{width:40px;background-color:#fff}:host .igo-geolocate-button-container:hover{background-color:#efefef}\n"] }]
     }], function () { return [{ type: i2.ConfigService }]; }, { map: [{
             type: Input
         }], color: [{
@@ -20609,11 +20609,11 @@ class HomeExtentButtonComponent {
     computeHomeExtent() {
         const homeExtentButtonOptions = this.configService.getConfig('homeExtentButton');
         this.homeExtentButtonExtent =
-            this.extentOverride || homeExtentButtonOptions.homeExtButtonExtent;
+            this.extentOverride || homeExtentButtonOptions?.homeExtButtonExtent;
         this.homeExtentButtonCenter =
-            this.centerOverride || homeExtentButtonOptions.homeExtButtonCenter;
+            this.centerOverride || homeExtentButtonOptions?.homeExtButtonCenter;
         this.homeExtentButtonZoom =
-            this.zoomOverride || homeExtentButtonOptions.homeExtButtonZoom;
+            this.zoomOverride || homeExtentButtonOptions?.homeExtButtonZoom;
         // priority over extent if these 2 properties are defined;
         if (this.centerOverride && this.zoomOverride) {
             this.homeExtentButtonExtent = undefined;
@@ -20644,7 +20644,7 @@ class HomeExtentButtonComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HomeExtentButtonComponent, [{
         type: Component,
-        args: [{ selector: 'igo-home-extent-button', template: "<div class=\"igo-home-extent-button-container\">\n  <button\n    mat-icon-button\n    [matTooltip]=\"'igo.geo.mapButtons.home-extent' | translate\"\n    matTooltipPosition=\"left\"\n    [color]=\"color\"\n    (click)=\"onToggleClick()\"\n  >\n    <mat-icon svgIcon=\"home-map-marker\"></mat-icon>\n  </button>\n</div>\n", styles: [":host button{border-radius:0!important}:host button .mat-ripple,:host button .mdc-icon-button__ripple{border-radius:0!important}:host .igo-home-extent-button-container{width:40px;background-color:#fff}:host .igo-home-extent-button-container:hover{background-color:#efefef}\n"] }]
+        args: [{ selector: 'igo-home-extent-button', template: "<div class=\"igo-home-extent-button-container\">\r\n  <button\r\n    mat-icon-button\r\n    [matTooltip]=\"'igo.geo.mapButtons.home-extent' | translate\"\r\n    matTooltipPosition=\"left\"\r\n    [color]=\"color\"\r\n    (click)=\"onToggleClick()\"\r\n  >\r\n    <mat-icon svgIcon=\"home-map-marker\"></mat-icon>\r\n  </button>\r\n</div>\r\n", styles: [":host button{border-radius:0!important}:host button .mat-ripple,:host button .mdc-icon-button__ripple{border-radius:0!important}:host .igo-home-extent-button-container{width:40px;background-color:#fff}:host .igo-home-extent-button-container:hover{background-color:#efefef}\n"] }]
     }], function () { return [{ type: i2.ConfigService }]; }, { map: [{
             type: Input
         }], color: [{
@@ -20695,7 +20695,7 @@ class OfflineButtonComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(OfflineButtonComponent, [{
         type: Component,
-        args: [{ selector: 'igo-offline-button', template: "<div class=\"igo-user-button-container\">\n  <button\n    mat-icon-button\n    [matTooltip]=\"\n      enabled\n        ? ('igo.geo.mapButtons.online' | translate)\n        : ('igo.geo.mapButtons.offline' | translate)\n    \"\n    matTooltipPosition=\"left\"\n    [ngClass]=\"[btnStyle]\"\n    [color]=\"enabled ? color : null\"\n    (click)=\"onClick()\"\n  >\n    <mat-icon svgIcon=\"wifi-strength-off\"></mat-icon>\n  </button>\n</div>\n", styles: [":host button{border-radius:0!important}:host button .mat-ripple,:host button .mdc-icon-button__ripple{border-radius:0!important}:host .onlineStyle{width:40px;background-color:#fff}:host .onlineStyle:hover{background-color:#efefef}:host .offlineStyle{width:40px;background-color:#b9b9b9}\n"] }]
+        args: [{ selector: 'igo-offline-button', template: "<div class=\"igo-user-button-container\">\r\n  <button\r\n    mat-icon-button\r\n    [matTooltip]=\"\r\n      enabled\r\n        ? ('igo.geo.mapButtons.online' | translate)\r\n        : ('igo.geo.mapButtons.offline' | translate)\r\n    \"\r\n    matTooltipPosition=\"left\"\r\n    [ngClass]=\"[btnStyle]\"\r\n    [color]=\"enabled ? color : null\"\r\n    (click)=\"onClick()\"\r\n  >\r\n    <mat-icon svgIcon=\"wifi-strength-off\"></mat-icon>\r\n  </button>\r\n</div>\r\n", styles: [":host button{border-radius:0!important}:host button .mat-ripple,:host button .mdc-icon-button__ripple{border-radius:0!important}:host .onlineStyle{width:40px;background-color:#fff}:host .onlineStyle:hover{background-color:#efefef}:host .offlineStyle{width:40px;background-color:#b9b9b9}\n"] }]
     }], function () { return []; }, { map: [{
             type: Input
         }], color: [{
@@ -20791,7 +20791,7 @@ class WakeLockButtonComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(WakeLockButtonComponent, [{
         type: Component,
-        args: [{ selector: 'igo-wake-lock-button', template: "<div class=\"igo-wake-lock-button-container\">\n  <button\n    [color]=\"color\"\n    mat-icon-button\n    [matTooltip]=\"\n      enabled\n        ? ('igo.geo.mapButtons.preventScreenLock' | translate)\n        : ('igo.geo.mapButtons.letScreenLock' | translate)\n    \"\n    matTooltipPosition=\"left\"\n    (click)=\"toggleWakeLock()\"\n  >\n    <mat-icon svgIcon=\"{{ icon$ | async }}\"></mat-icon>\n  </button>\n</div>\n", styles: [":host button{border-radius:0!important}:host button .mat-ripple,:host button .mdc-icon-button__ripple{border-radius:0!important}:host .igo-wake-lock-button-container{width:40px;background-color:#fff}:host .igo-wake-lock-button-container:hover{background-color:#efefef}\n"] }]
+        args: [{ selector: 'igo-wake-lock-button', template: "<div class=\"igo-wake-lock-button-container\">\r\n  <button\r\n    [color]=\"color\"\r\n    mat-icon-button\r\n    [matTooltip]=\"\r\n      enabled\r\n        ? ('igo.geo.mapButtons.preventScreenLock' | translate)\r\n        : ('igo.geo.mapButtons.letScreenLock' | translate)\r\n    \"\r\n    matTooltipPosition=\"left\"\r\n    (click)=\"toggleWakeLock()\"\r\n  >\r\n    <mat-icon svgIcon=\"{{ icon$ | async }}\"></mat-icon>\r\n  </button>\r\n</div>\r\n", styles: [":host button{border-radius:0!important}:host button .mat-ripple,:host button .mdc-icon-button__ripple{border-radius:0!important}:host .igo-wake-lock-button-container{width:40px;background-color:#fff}:host .igo-wake-lock-button-container:hover{background-color:#efefef}\n"] }]
     }], function () { return [{ type: i2.StorageService }]; }, { color: [{
             type: Input
         }], enabled: [{
@@ -20949,7 +20949,7 @@ class MiniBaseMapComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MiniBaseMapComponent, [{
         type: Component,
-        args: [{ selector: 'igo-mini-basemap', 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', template: "<div class=\"igo-mini-basemap-container\">\r\n  <div *ngIf=\"display\" (click)=\"changeBaseLayer(baseLayer)\">\r\n    <igo-map-browser [map]=\"basemap\"></igo-map-browser>\r\n    <div *ngIf=\"title\" class=\"igo-mini-basemap-title\">{{ title }}</div>\r\n  </div>\r\n</div>\r\n", styles: [".igo-mini-basemap-container{width:80px;height:80px;background-color:#ffffff03;border:2px solid white;box-shadow:0 1px 4px #0000004d;cursor:pointer}.igo-mini-basemap-container:hover .igo-mini-basemap-title{color:#000;text-shadow:0 0 5px white}.igo-mini-basemap-container>div{width:100%;height:100%}.igo-mini-basemap-title{position:relative;top:-76px;height:76px;width:76px;text-align:center;vertical-align:bottom;color:#fff;text-shadow:0 0 5px black;white-space:normal;display:flex;align-items:flex-end;justify-content:center}\n"] }]
     }], function () { return [{ type: LayerService }, { type: i0.ApplicationRef }, { type: i0.ChangeDetectorRef }]; }, { map: [{
             type: Input
         }], disabled: [{
@@ -21063,7 +21063,7 @@ class BaseLayersSwitcherComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(BaseLayersSwitcherComponent, [{
         type: Component,
-        args: [{ selector: 'igo-baselayers-switcher', animations: [baseLayersSwitcherSlideInOut()], template: "<div\n  *ngIf=\"baseLayers.length > 0\"\n  class=\"igo-baselayers-switcher-container\"\n  [ngClass]=\"{ 'container-expand': expand }\"\n  [@baseLayerSwitcherState]=\"\n    expand ? 'expand' : useStaticIcon ? 'collapseIcon' : ''\n  \"\n  (@baseLayerSwitcherState.start)=\"showButton = false\"\n  (@baseLayerSwitcherState.done)=\"showButton = true\"\n  (click)=\"collapseOrExpand()\"\n>\n  <div\n    *ngIf=\"useStaticIcon && !expand && showButton\"\n    class=\"igo-baselayers-switcher-button-container\"\n  >\n    <button\n      mat-icon-button\n      [matTooltip]=\"'igo.geo.mapButtons.baselayerSwitcher' | translate\"\n      matTooltipPosition=\"right\"\n      color=\"primary\"\n    >\n      <mat-icon svgIcon=\"image-multiple\"></mat-icon>\n    </button>\n  </div>\n\n  <igo-mini-basemap\n    class=\"mat-typography\"\n    *ngFor=\"let baseLayer of baseLayers; let i = index\"\n    [map]=\"map\"\n    [baseLayer]=\"baseLayer\"\n    [title]=\"\n      baseLayers.length > 2 && !expand\n        ? ('igo.geo.baselayersSwitcher.title' | translate)\n        : baseLayer.title\n    \"\n    [display]=\"expand || (i === 0 && !useStaticIcon)\"\n    [disabled]=\"!expand && baseLayers.length > 1\"\n  >\n  </igo-mini-basemap>\n\n  <div *ngIf=\"hasMoreThanTwo\" class=\"more-baselayers\">\n    <mat-icon\n      class=\"material-icons mat-icon\"\n      color=\"primary\"\n      svgIcon=\"menu-down\"\n    ></mat-icon>\n  </div>\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-baselayers-switcher-container{height:auto;position:relative}:host .container-expand{overflow:hidden;border-width:0}:host .more-baselayers{width:80px;height:20px;background-color:#fff;text-align:center;cursor:pointer}:host .more-baselayers:hover{background-color:#efefef}:host .igo-baselayers-switcher-button-container{width:40px;background-color:#fff}:host .igo-baselayers-switcher-button-container:hover{background-color:#efefef}\n"] }]
+        args: [{ selector: 'igo-baselayers-switcher', animations: [baseLayersSwitcherSlideInOut()], template: "<div\r\n  *ngIf=\"baseLayers.length > 0\"\r\n  class=\"igo-baselayers-switcher-container\"\r\n  [ngClass]=\"{ 'container-expand': expand }\"\r\n  [@baseLayerSwitcherState]=\"\r\n    expand ? 'expand' : useStaticIcon ? 'collapseIcon' : ''\r\n  \"\r\n  (@baseLayerSwitcherState.start)=\"showButton = false\"\r\n  (@baseLayerSwitcherState.done)=\"showButton = true\"\r\n  (click)=\"collapseOrExpand()\"\r\n>\r\n  <div\r\n    *ngIf=\"useStaticIcon && !expand && showButton\"\r\n    class=\"igo-baselayers-switcher-button-container\"\r\n  >\r\n    <button\r\n      mat-icon-button\r\n      [matTooltip]=\"'igo.geo.mapButtons.baselayerSwitcher' | translate\"\r\n      matTooltipPosition=\"right\"\r\n      color=\"primary\"\r\n    >\r\n      <mat-icon svgIcon=\"image-multiple\"></mat-icon>\r\n    </button>\r\n  </div>\r\n\r\n  <igo-mini-basemap\r\n    class=\"mat-typography\"\r\n    *ngFor=\"let baseLayer of baseLayers; let i = index\"\r\n    [map]=\"map\"\r\n    [baseLayer]=\"baseLayer\"\r\n    [title]=\"\r\n      baseLayers.length > 2 && !expand\r\n        ? ('igo.geo.baselayersSwitcher.title' | translate)\r\n        : baseLayer.title\r\n    \"\r\n    [display]=\"expand || (i === 0 && !useStaticIcon)\"\r\n    [disabled]=\"!expand && baseLayers.length > 1\"\r\n  >\r\n  </igo-mini-basemap>\r\n\r\n  <div *ngIf=\"hasMoreThanTwo\" class=\"more-baselayers\">\r\n    <mat-icon\r\n      class=\"material-icons mat-icon\"\r\n      color=\"primary\"\r\n      svgIcon=\"menu-down\"\r\n    ></mat-icon>\r\n  </div>\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-baselayers-switcher-container{height:auto;position:relative}:host .container-expand{overflow:hidden;border-width:0}:host .more-baselayers{width:80px;height:20px;background-color:#fff;text-align:center;cursor:pointer}:host .more-baselayers:hover{background-color:#efefef}:host .igo-baselayers-switcher-button-container{width:40px;background-color:#fff}:host .igo-baselayers-switcher-button-container:hover{background-color:#efefef}\n"] }]
     }], function () { return [{ type: i2.MediaService }]; }, { map: [{
             type: Input
         }], useStaticIcon: [{
@@ -21124,7 +21124,7 @@ class RotationButtonComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(RotationButtonComponent, [{
         type: Component,
-        args: [{ selector: 'igo-rotation-button', template: "<div\n  *ngIf=\"((rotated$ | async) && !showIfNoRotation) || showIfNoRotation\"\n  class=\"igo-rotation-button-container\"\n  [matTooltip]=\"\n    (rotated$ | async)\n      ? ('igo.geo.mapButtons.resetRotation'\n        | translate: { azimuth: azimuthRounded, rotation: rotationRounded })\n      : ('igo.geo.mapButtons.tipRotation' | translate)\n  \"\n  matTooltipPosition=\"left\"\n>\n  <button\n    mat-icon-button\n    matTooltipPosition=\"left\"\n    [color]=\"color\"\n    [disabled]=\"(rotated$ | async) === false\"\n    (click)=\"map.viewController.resetRotation()\"\n  >\n    <mat-icon [ngStyle]=\"currentStyle$ | async\" svgIcon=\"navigation\">\n    </mat-icon>\n  </button>\n</div>\n", styles: [":host button{border-radius:0!important}:host button .mat-ripple,:host button .mdc-icon-button__ripple{border-radius:0!important}:host .igo-rotation-button-container{width:40px;background-color:#fff}:host .igo-rotation-button-container:hover{background-color:#efefef}\n"] }]
+        args: [{ selector: 'igo-rotation-button', template: "<div\r\n  *ngIf=\"((rotated$ | async) && !showIfNoRotation) || showIfNoRotation\"\r\n  class=\"igo-rotation-button-container\"\r\n  [matTooltip]=\"\r\n    (rotated$ | async)\r\n      ? ('igo.geo.mapButtons.resetRotation'\r\n        | translate: { azimuth: azimuthRounded, rotation: rotationRounded })\r\n      : ('igo.geo.mapButtons.tipRotation' | translate)\r\n  \"\r\n  matTooltipPosition=\"left\"\r\n>\r\n  <button\r\n    mat-icon-button\r\n    matTooltipPosition=\"left\"\r\n    [color]=\"color\"\r\n    [disabled]=\"(rotated$ | async) === false\"\r\n    (click)=\"map.viewController.resetRotation()\"\r\n  >\r\n    <mat-icon [ngStyle]=\"currentStyle$ | async\" svgIcon=\"navigation\">\r\n    </mat-icon>\r\n  </button>\r\n</div>\r\n", styles: [":host button{border-radius:0!important}:host button .mat-ripple,:host button .mdc-icon-button__ripple{border-radius:0!important}:host .igo-rotation-button-container{width:40px;background-color:#fff}:host .igo-rotation-button-container:hover{background-color:#efefef}\n"] }]
     }], function () { return []; }, { map: [{
             type: Input
         }], showIfNoRotation: [{
@@ -21343,7 +21343,7 @@ class SwipeControlComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SwipeControlComponent, [{
         type: Component,
-        args: [{ selector: 'igo-swipe-control', template: "<div\n  class=\"igo-swipe-control-container\"\n  id=\"igo-layer-swipe\"\n  (mousedown)=\"dragDown($event)\"\n  (mouseup)=\"closeDragMouseElement()\"\n  (touchstart)=\"dragDown($event)\"\n  (touchend)=\"closeDragTouchElement()\"\n>\n  <div class=\"igo-swipe-control-line\"></div>\n\n  <div class=\"igo-swipe-control-arrows\" id=\"arrows\">\n    <div class=\"igo-arrow-left\"></div>\n    <div class=\"igo-arrow-right\"></div>\n  </div>\n</div>\n", styles: [".igo-swipe-control-container{position:absolute;width:80px;height:100%;top:0%;left:50%;cursor:grab;z-index:1;transform:translate(-40px)}.igo-swipe-control-container:active{cursor:grabbing}.igo-swipe-control-line{position:absolute;width:4px;height:100%;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#5e5a5a}.igo-swipe-control-arrows{position:absolute;width:32px;height:32px;left:50%;top:50%;transform:translate(-50%,-50%);margin-top:-16px;padding:5px 4px;background-color:#5e5a5a;z-index:2;-webkit-tap-highlight-color:rgba(0,0,0,0)}.igo-swipe-control-arrows div{display:inline-block;width:0;height:0;border-top:10px solid transparent;border-bottom:10px solid transparent}.igo-swipe-control-arrows .igo-arrow-right{margin-left:4px;border-left:10px solid white}.igo-swipe-control-arrows .igo-arrow-left{border-right:10px solid white}.igo-swipe-control-arrows:active{display:none}\n"] }]
+        args: [{ selector: 'igo-swipe-control', template: "<div\r\n  class=\"igo-swipe-control-container\"\r\n  id=\"igo-layer-swipe\"\r\n  (mousedown)=\"dragDown($event)\"\r\n  (mouseup)=\"closeDragMouseElement()\"\r\n  (touchstart)=\"dragDown($event)\"\r\n  (touchend)=\"closeDragTouchElement()\"\r\n>\r\n  <div class=\"igo-swipe-control-line\"></div>\r\n\r\n  <div class=\"igo-swipe-control-arrows\" id=\"arrows\">\r\n    <div class=\"igo-arrow-left\"></div>\r\n    <div class=\"igo-arrow-right\"></div>\r\n  </div>\r\n</div>\r\n", styles: [".igo-swipe-control-container{position:absolute;width:80px;height:100%;top:0%;left:50%;cursor:grab;z-index:1;transform:translate(-40px)}.igo-swipe-control-container:active{cursor:grabbing}.igo-swipe-control-line{position:absolute;width:4px;height:100%;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#5e5a5a}.igo-swipe-control-arrows{position:absolute;width:32px;height:32px;left:50%;top:50%;transform:translate(-50%,-50%);margin-top:-16px;padding:5px 4px;background-color:#5e5a5a;z-index:2;-webkit-tap-highlight-color:rgba(0,0,0,0)}.igo-swipe-control-arrows div{display:inline-block;width:0;height:0;border-top:10px solid transparent;border-bottom:10px solid transparent}.igo-swipe-control-arrows .igo-arrow-right{margin-left:4px;border-left:10px solid white}.igo-swipe-control-arrows .igo-arrow-left{border-right:10px solid white}.igo-swipe-control-arrows:active{display:none}\n"] }]
     }], function () { return []; }, { map: [{
             type: Input
         }] }); })();
@@ -21401,7 +21401,7 @@ class MapCenterComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MapCenterComponent, [{
         type: Component,
-        args: [{ selector: 'igo-map-center', template: "<div class=\"mapCenter\" id=\"mapCenter\">\n  <div class=\"vertical\"></div>\n  <div class=\"horizontal\"></div>\n</div>\n", styles: [".mapCenter{width:30px;height:30px;position:absolute;top:50%;left:50%;transform:translate(-15px,-15px);pointer-events:none}.mapCenter .vertical,.mapCenter .horizontal{width:4px;height:30px;position:absolute;left:13px;background-color:#000}.mapCenter .horizontal{transform:rotate(90deg)}\n"] }]
+        args: [{ selector: 'igo-map-center', template: "<div class=\"mapCenter\" id=\"mapCenter\">\r\n  <div class=\"vertical\"></div>\r\n  <div class=\"horizontal\"></div>\r\n</div>\r\n", styles: [".mapCenter{width:30px;height:30px;position:absolute;top:50%;left:50%;transform:translate(-15px,-15px);pointer-events:none}.mapCenter .vertical,.mapCenter .horizontal{width:4px;height:30px;position:absolute;left:13px;background-color:#000}.mapCenter .horizontal{transform:rotate(90deg)}\n"] }]
     }], function () { return []; }, { map: [{
             type: Input
         }] }); })();
@@ -21427,7 +21427,7 @@ class InfoSectionComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(InfoSectionComponent, [{
         type: Component,
-        args: [{ selector: 'igo-info-section', template: "<div *ngIf=\"infoContent && infoContent.length\" class=\"infoSection\">\n  <pre>{{ infoContent }}</pre>\n</div>\n", styles: [".infoSection{border-radius:10px;background-color:#6e6e6e66;padding:2.5px;position:absolute;text-align:center;top:5px;left:50%;text-shadow:0 0 5px white,0 0 10px white,0 0 15px white}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){.infoSection{top:50px;left:10%}}\n"] }]
+        args: [{ selector: 'igo-info-section', template: "<div *ngIf=\"infoContent && infoContent.length\" class=\"infoSection\">\r\n  <pre>{{ infoContent }}</pre>\r\n</div>\r\n", styles: [".infoSection{border-radius:10px;background-color:#6e6e6e66;padding:2.5px;position:absolute;text-align:center;top:5px;left:50%;text-shadow:0 0 5px white,0 0 10px white,0 0 15px white}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){.infoSection{top:50px;left:10%}}\n"] }]
     }], function () { return []; }, { infoContent: [{
             type: Input
         }] }); })();
@@ -22734,7 +22734,7 @@ class DownloadButtonComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DownloadButtonComponent, [{
         type: Component,
-        args: [{ selector: 'igo-download-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  *ngIf=\"\n    options &&\n    options.download &&\n    (options.download['dynamicUrl'] || options.download['url'])\n  \"\n  mat-icon-button\n  tooltip-position=\"below\"\n  matTooltipShowDelay=\"500\"\n  [matTooltip]=\"'igo.geo.download.action' | translate\"\n  [color]=\"color\"\n  (click)=\"openDownload(layer)\"\n>\n  <mat-icon svgIcon=\"download\"></mat-icon>\n</button>\n" }]
+        args: [{ selector: 'igo-download-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\r\n  *ngIf=\"\r\n    options &&\r\n    options.download &&\r\n    (options.download['dynamicUrl'] || options.download['url'])\r\n  \"\r\n  mat-icon-button\r\n  tooltip-position=\"below\"\r\n  matTooltipShowDelay=\"500\"\r\n  [matTooltip]=\"'igo.geo.download.action' | translate\"\r\n  [color]=\"color\"\r\n  (click)=\"openDownload(layer)\"\r\n>\r\n  <mat-icon svgIcon=\"download\"></mat-icon>\r\n</button>\r\n" }]
     }], function () { return [{ type: DownloadService }]; }, { layer: [{
             type: Input
         }], color: [{
@@ -22819,7 +22819,7 @@ class DrawLayerPopupComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DrawLayerPopupComponent, [{
         type: Component,
-        args: [{ selector: 'igo-draw-popup-component', template: "<div mat-dialog-content>\n  <p class=\"mat-typography\">\n    {{ 'igo.geo.draw.layer.layerDialogInstruction' | translate }}\n  </p>\n  <mat-form-field class=\"example-full-width\">\n    <input\n      #input\n      matInput\n      placeholder=\"{{ 'igo.geo.draw.layer.title' | translate }}\"\n    />\n  </mat-form-field>\n</div>\n<div mat-dialog-actions>\n  <button mat-raised-button (click)=\"cancelDrawing()\">\n    {{ 'igo.geo.draw.cancel' | translate }}\n  </button>\n  <button mat-raised-button color=\"primary\" (click)=\"confirm(input.value)\">\n    OK\n  </button>\n</div>\n", styles: [":host .fields-container{display:flex}\n"] }]
+        args: [{ selector: 'igo-draw-popup-component', template: "<div mat-dialog-content>\r\n  <p class=\"mat-typography\">\r\n    {{ 'igo.geo.draw.layer.layerDialogInstruction' | translate }}\r\n  </p>\r\n  <mat-form-field class=\"example-full-width\">\r\n    <input\r\n      #input\r\n      matInput\r\n      placeholder=\"{{ 'igo.geo.draw.layer.title' | translate }}\"\r\n    />\r\n  </mat-form-field>\r\n</div>\r\n<div mat-dialog-actions>\r\n  <button mat-raised-button (click)=\"cancelDrawing()\">\r\n    {{ 'igo.geo.draw.cancel' | translate }}\r\n  </button>\r\n  <button mat-raised-button color=\"primary\" (click)=\"confirm(input.value)\">\r\n    OK\r\n  </button>\r\n</div>\r\n", styles: [":host .fields-container{display:flex}\n"] }]
     }], function () { return [{ type: i1$3.MatDialogRef }]; }, { confirmFlag: [{
             type: Input
         }] }); })();
@@ -24123,7 +24123,7 @@ class DrawPopupComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DrawPopupComponent, [{
         type: Component,
-        args: [{ selector: 'igo-draw-popup-component', template: "<h2 mat-dialog-title>\n  {{ 'igo.geo.draw.popupTitle' | translate }}\n</h2>\n\n<ng-container *ngIf=\"labelFlag !== labelType.Custom\">\n  <div mat-dialog-content class=\"geometry-type-toggle\">\n    <div class=\"button-toggle-container\">\n      <mat-button-toggle-group\n        (change)=\"onLabelTypeChange($event.value)\"\n        [value]=\"customOrPredefined\"\n      >\n        <mat-button-toggle [value]=\"labelType.Custom\">\n          {{ 'igo.geo.draw.labelType.custom' | translate }}\n        </mat-button-toggle>\n        <mat-button-toggle [value]=\"labelType.Predefined\">\n          {{ 'igo.geo.draw.labelType.predefined' | translate }}\n        </mat-button-toggle>\n      </mat-button-toggle-group>\n    </div>\n    <div>\n      <p>\n        {{ 'igo.geo.draw.builtInInstructions' | translate }}\n      </p>\n      <mat-radio-group *ngIf=\"olGeometryType !== 'Polygon'\">\n        <mat-radio-button\n          *ngFor=\"let option of arrayBuiltInType\"\n          [value]=\"option.value\"\n          [disabled]=\"optionAvailable(option.value)\"\n          (change)=\"onLabelTypeChange($event.value)\"\n          [checked]=\"option.checked\"\n        >\n          {{ getProperLengthLabel(option.value) }}\n        </mat-radio-button>\n      </mat-radio-group>\n      <ng-container *ngIf=\"olGeometryType === 'Polygon'\">\n        <mat-checkbox\n          *ngFor=\"let option of arrayBuiltInType\"\n          class=\"mat-typography\"\n          [value]=\"option.value\"\n          [disabled]=\"optionAvailable(option.value)\"\n          (change)=\"onLabelTypeChange($event.source.value, $event.checked)\"\n          [checked]=\"option.checked\"\n        >\n          {{ getProperLengthLabel(option.value) }}\n        </mat-checkbox>\n      </ng-container>\n      <div *ngIf=\"labelFlag === labelType.Coordinates\" class=\"fields-container\">\n        <mat-form-field class=\"readOnly-Input\">\n          <mat-label>(Latitude, Longitude)</mat-label>\n          <input\n            #input\n            matInput\n            placeholder=\"(Latitude, Longitude)\"\n            value=\"{{ currentCoordinates }}\"\n            readonly\n          />\n        </mat-form-field>\n        <mat-form-field class=\"unit-field\">\n          <mat-select\n            [value]=\"coordinatesMeasureUnit\"\n            (selectionChange)=\"onChangeCoordinateUnit($event.value)\"\n          >\n            <mat-option *ngFor=\"let unit of allCoordinatesUnits\" [value]=\"unit\">\n              {{ unit }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n      <div\n        *ngIf=\"labelFlag === labelType.Length || polygonCheck === 2\"\n        class=\"fields-container\"\n      >\n        <mat-form-field class=\"readOnly-Input\">\n          <mat-label>{{ lengthLabelT }}</mat-label>\n          <input\n            #input\n            matInput\n            placeholder=\"{{ lengthLabelT }}\"\n            value=\"{{ currentLength }}\"\n            readonly\n          />\n        </mat-form-field>\n        <mat-form-field class=\"unit-field\">\n          <mat-select\n            [value]=\"lengthMeasureUnit\"\n            (selectionChange)=\"onChangeLengthUnit($event.value)\"\n          >\n            <mat-option *ngFor=\"let unit of allLengthUnits\" [value]=\"unit\">\n              {{ getLengthUnitEnum(unit) }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n      <div\n        *ngIf=\"labelFlag === labelType.Area || polygonCheck === 2\"\n        class=\"fields-container\"\n      >\n        <mat-form-field class=\"readOnly-Input\">\n          <mat-label>{{ 'igo.geo.draw.labelType.Area' | translate }}</mat-label>\n          <input\n            #input\n            matInput\n            placeholder=\"{{ 'igo.geo.draw.labelType.Area' | translate }}\"\n            value=\"{{ currentArea }}\"\n            readonly\n          />\n        </mat-form-field>\n        <mat-form-field class=\"unit-field\">\n          <mat-select\n            [value]=\"areaMeasureUnit\"\n            (selectionChange)=\"onChangeAreaUnit($event.value)\"\n          >\n            <mat-option *ngFor=\"let unit of allAreaUnits\" [value]=\"unit\">\n              {{ getAreaUnitEnum(unit) }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n    </div>\n  </div>\n\n  <div mat-dialog-actions>\n    <button mat-raised-button (click)=\"cancelDrawing()\">\n      {{ 'igo.geo.draw.cancel' | translate }}\n    </button>\n    <button mat-raised-button color=\"primary\" (click)=\"confirm()\">\n      {{ noLabelButton() }}\n    </button>\n  </div>\n</ng-container>\n\n<ng-container *ngIf=\"labelFlag === labelType.Custom\">\n  <div mat-dialog-content class=\"geometry-type-toggle\">\n    <div class=\"button-toggle-container\">\n      <mat-button-toggle-group\n        (change)=\"onLabelTypeChange($event.value)\"\n        [value]=\"customOrPredefined\"\n      >\n        <mat-button-toggle [value]=\"labelType.Custom\">\n          {{ 'igo.geo.draw.labelType.custom' | translate }}\n        </mat-button-toggle>\n        <mat-button-toggle [value]=\"labelType.Predefined\">\n          {{ 'igo.geo.draw.labelType.predefined' | translate }}\n        </mat-button-toggle>\n      </mat-button-toggle-group>\n    </div>\n    <p>\n      {{ 'igo.geo.draw.dialogInstruction' | translate }}\n    </p>\n    <mat-form-field class=\"input\">\n      <mat-label>{{ 'igo.geo.draw.dialogTitle' | translate }}</mat-label>\n      <input\n        #input\n        matInput\n        (select)=\"(true)\"\n        (input)=\"getLabelLength($event.target.value)\"\n        placeholder=\"{{ 'igo.geo.draw.dialogTitle' | translate }}\"\n        value=\"{{ currentLabel }}\"\n        cdkFocusInitial\n      />\n    </mat-form-field>\n  </div>\n\n  <div mat-dialog-actions>\n    <button mat-raised-button (click)=\"cancelDrawing()\">\n      {{ 'igo.geo.draw.cancel' | translate }}\n    </button>\n    <button mat-raised-button color=\"primary\" (click)=\"confirm(input.value)\">\n      {{ noLabelButton() }}\n    </button>\n  </div>\n</ng-container>\n", styles: [":host .mat-mdc-radio-button~.mat-radio-button{margin-left:12px}:host .readOnly-Input{width:200px!important}:host .button-toggle-container{margin-bottom:12px}:host .unit-field{margin-left:12px}:host .unit-field ::ng-deep .mat-mdc-form-field-infix{width:-moz-fit-content;width:fit-content}:host .unit-field ::ng-deep .mat-mdc-select-min-line{padding-right:24px}:host .mat-mdc-form-field{position:sticky!important}:host .coordinatesInputView{top:5em!important}:host .mat-mdc-dialog-actions{display:flex!important;justify-content:flex-end}:host .input{width:auto!important}:host .mat-button-toggle-group,:host .mat-button-toggle{width:100%}:host mat-checkbox{margin-right:10px}:host ::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{display:none}\n"] }]
+        args: [{ selector: 'igo-draw-popup-component', template: "<h2 mat-dialog-title>\r\n  {{ 'igo.geo.draw.popupTitle' | translate }}\r\n</h2>\r\n\r\n<ng-container *ngIf=\"labelFlag !== labelType.Custom\">\r\n  <div mat-dialog-content class=\"geometry-type-toggle\">\r\n    <div class=\"button-toggle-container\">\r\n      <mat-button-toggle-group\r\n        (change)=\"onLabelTypeChange($event.value)\"\r\n        [value]=\"customOrPredefined\"\r\n      >\r\n        <mat-button-toggle [value]=\"labelType.Custom\">\r\n          {{ 'igo.geo.draw.labelType.custom' | translate }}\r\n        </mat-button-toggle>\r\n        <mat-button-toggle [value]=\"labelType.Predefined\">\r\n          {{ 'igo.geo.draw.labelType.predefined' | translate }}\r\n        </mat-button-toggle>\r\n      </mat-button-toggle-group>\r\n    </div>\r\n    <div>\r\n      <p>\r\n        {{ 'igo.geo.draw.builtInInstructions' | translate }}\r\n      </p>\r\n      <mat-radio-group *ngIf=\"olGeometryType !== 'Polygon'\">\r\n        <mat-radio-button\r\n          *ngFor=\"let option of arrayBuiltInType\"\r\n          [value]=\"option.value\"\r\n          [disabled]=\"optionAvailable(option.value)\"\r\n          (change)=\"onLabelTypeChange($event.value)\"\r\n          [checked]=\"option.checked\"\r\n        >\r\n          {{ getProperLengthLabel(option.value) }}\r\n        </mat-radio-button>\r\n      </mat-radio-group>\r\n      <ng-container *ngIf=\"olGeometryType === 'Polygon'\">\r\n        <mat-checkbox\r\n          *ngFor=\"let option of arrayBuiltInType\"\r\n          class=\"mat-typography\"\r\n          [value]=\"option.value\"\r\n          [disabled]=\"optionAvailable(option.value)\"\r\n          (change)=\"onLabelTypeChange($event.source.value, $event.checked)\"\r\n          [checked]=\"option.checked\"\r\n        >\r\n          {{ getProperLengthLabel(option.value) }}\r\n        </mat-checkbox>\r\n      </ng-container>\r\n      <div *ngIf=\"labelFlag === labelType.Coordinates\" class=\"fields-container\">\r\n        <mat-form-field class=\"readOnly-Input\">\r\n          <mat-label>(Latitude, Longitude)</mat-label>\r\n          <input\r\n            #input\r\n            matInput\r\n            placeholder=\"(Latitude, Longitude)\"\r\n            value=\"{{ currentCoordinates }}\"\r\n            readonly\r\n          />\r\n        </mat-form-field>\r\n        <mat-form-field class=\"unit-field\">\r\n          <mat-select\r\n            [value]=\"coordinatesMeasureUnit\"\r\n            (selectionChange)=\"onChangeCoordinateUnit($event.value)\"\r\n          >\r\n            <mat-option *ngFor=\"let unit of allCoordinatesUnits\" [value]=\"unit\">\r\n              {{ unit }}\r\n            </mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </div>\r\n      <div\r\n        *ngIf=\"labelFlag === labelType.Length || polygonCheck === 2\"\r\n        class=\"fields-container\"\r\n      >\r\n        <mat-form-field class=\"readOnly-Input\">\r\n          <mat-label>{{ lengthLabelT }}</mat-label>\r\n          <input\r\n            #input\r\n            matInput\r\n            placeholder=\"{{ lengthLabelT }}\"\r\n            value=\"{{ currentLength }}\"\r\n            readonly\r\n          />\r\n        </mat-form-field>\r\n        <mat-form-field class=\"unit-field\">\r\n          <mat-select\r\n            [value]=\"lengthMeasureUnit\"\r\n            (selectionChange)=\"onChangeLengthUnit($event.value)\"\r\n          >\r\n            <mat-option *ngFor=\"let unit of allLengthUnits\" [value]=\"unit\">\r\n              {{ getLengthUnitEnum(unit) }}\r\n            </mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </div>\r\n      <div\r\n        *ngIf=\"labelFlag === labelType.Area || polygonCheck === 2\"\r\n        class=\"fields-container\"\r\n      >\r\n        <mat-form-field class=\"readOnly-Input\">\r\n          <mat-label>{{ 'igo.geo.draw.labelType.Area' | translate }}</mat-label>\r\n          <input\r\n            #input\r\n            matInput\r\n            placeholder=\"{{ 'igo.geo.draw.labelType.Area' | translate }}\"\r\n            value=\"{{ currentArea }}\"\r\n            readonly\r\n          />\r\n        </mat-form-field>\r\n        <mat-form-field class=\"unit-field\">\r\n          <mat-select\r\n            [value]=\"areaMeasureUnit\"\r\n            (selectionChange)=\"onChangeAreaUnit($event.value)\"\r\n          >\r\n            <mat-option *ngFor=\"let unit of allAreaUnits\" [value]=\"unit\">\r\n              {{ getAreaUnitEnum(unit) }}\r\n            </mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div mat-dialog-actions>\r\n    <button mat-raised-button (click)=\"cancelDrawing()\">\r\n      {{ 'igo.geo.draw.cancel' | translate }}\r\n    </button>\r\n    <button mat-raised-button color=\"primary\" (click)=\"confirm()\">\r\n      {{ noLabelButton() }}\r\n    </button>\r\n  </div>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"labelFlag === labelType.Custom\">\r\n  <div mat-dialog-content class=\"geometry-type-toggle\">\r\n    <div class=\"button-toggle-container\">\r\n      <mat-button-toggle-group\r\n        (change)=\"onLabelTypeChange($event.value)\"\r\n        [value]=\"customOrPredefined\"\r\n      >\r\n        <mat-button-toggle [value]=\"labelType.Custom\">\r\n          {{ 'igo.geo.draw.labelType.custom' | translate }}\r\n        </mat-button-toggle>\r\n        <mat-button-toggle [value]=\"labelType.Predefined\">\r\n          {{ 'igo.geo.draw.labelType.predefined' | translate }}\r\n        </mat-button-toggle>\r\n      </mat-button-toggle-group>\r\n    </div>\r\n    <p>\r\n      {{ 'igo.geo.draw.dialogInstruction' | translate }}\r\n    </p>\r\n    <mat-form-field class=\"input\">\r\n      <mat-label>{{ 'igo.geo.draw.dialogTitle' | translate }}</mat-label>\r\n      <input\r\n        #input\r\n        matInput\r\n        (select)=\"(true)\"\r\n        (input)=\"getLabelLength($event.target.value)\"\r\n        placeholder=\"{{ 'igo.geo.draw.dialogTitle' | translate }}\"\r\n        value=\"{{ currentLabel }}\"\r\n        cdkFocusInitial\r\n      />\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <div mat-dialog-actions>\r\n    <button mat-raised-button (click)=\"cancelDrawing()\">\r\n      {{ 'igo.geo.draw.cancel' | translate }}\r\n    </button>\r\n    <button mat-raised-button color=\"primary\" (click)=\"confirm(input.value)\">\r\n      {{ noLabelButton() }}\r\n    </button>\r\n  </div>\r\n</ng-container>\r\n", styles: [":host .mat-mdc-radio-button~.mat-radio-button{margin-left:12px}:host .readOnly-Input{width:200px!important}:host .button-toggle-container{margin-bottom:12px}:host .unit-field{margin-left:12px}:host .unit-field ::ng-deep .mat-mdc-form-field-infix{width:-moz-fit-content;width:fit-content}:host .unit-field ::ng-deep .mat-mdc-select-min-line{padding-right:24px}:host .mat-mdc-form-field{position:sticky!important}:host .coordinatesInputView{top:5em!important}:host .mat-mdc-dialog-actions{display:flex!important;justify-content:flex-end}:host .input{width:auto!important}:host .mat-button-toggle-group,:host .mat-button-toggle{width:100%}:host mat-checkbox{margin-right:10px}:host ::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{display:none}\n"] }]
     }], function () { return [{ type: i2.LanguageService }, { type: i1$3.MatDialogRef }, { type: undefined, decorators: [{
                 type: Inject,
                 args: [MAT_DIALOG_DATA]
@@ -24178,7 +24178,7 @@ class DrawShorcutsComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DrawShorcutsComponent, [{
         type: Component,
-        args: [{ selector: 'igo-draw-shorcuts', template: "<mat-dialog-content>\n  <div>\n    <span class=\"shortcut mat-typography\">\n      <mat-icon class=\"shortcut-icon\" svgIcon=\"keyboard-return\"></mat-icon\n      >{{ 'igo.geo.draw.finish' | translate }}</span\n    >\n  </div>\n  <div>\n    <span class=\"shortcut mat-typography\">\n      <mat-icon class=\"shortcut-icon\" svgIcon=\"backspace-outline\"></mat-icon\n      >{{ 'igo.geo.draw.undo' | translate }}</span\n    >\n  </div>\n  <div>\n    <span class=\"shortcut mat-typography\">\n      <mat-icon class=\"shortcut-icon\" svgIcon=\"keyboard-esc\"></mat-icon\n      >{{ 'igo.geo.draw.abort' | translate }}</span\n    >\n  </div>\n  <div>\n    <span class=\"shortcut mat-typography\">\n      <mat-icon class=\"shortcut-icon\" svgIcon=\"keyboard-space\"></mat-icon\n      >{{ 'igo.geo.draw.move' | translate }}</span\n    >\n  </div>\n</mat-dialog-content>\n<mat-dialog-actions class=\"shortcuts-close\">\n  <button mat-raised-button mat-dialog-close color=\"primary\">OK</button>\n</mat-dialog-actions>\n", styles: [".shortcut{display:flex;align-items:center}.shortcut-icon{margin-right:10px}.shortcuts-close{display:flex;justify-content:center}\n"] }]
+        args: [{ selector: 'igo-draw-shorcuts', template: "<mat-dialog-content>\r\n  <div>\r\n    <span class=\"shortcut mat-typography\">\r\n      <mat-icon class=\"shortcut-icon\" svgIcon=\"keyboard-return\"></mat-icon\r\n      >{{ 'igo.geo.draw.finish' | translate }}</span\r\n    >\r\n  </div>\r\n  <div>\r\n    <span class=\"shortcut mat-typography\">\r\n      <mat-icon class=\"shortcut-icon\" svgIcon=\"backspace-outline\"></mat-icon\r\n      >{{ 'igo.geo.draw.undo' | translate }}</span\r\n    >\r\n  </div>\r\n  <div>\r\n    <span class=\"shortcut mat-typography\">\r\n      <mat-icon class=\"shortcut-icon\" svgIcon=\"keyboard-esc\"></mat-icon\r\n      >{{ 'igo.geo.draw.abort' | translate }}</span\r\n    >\r\n  </div>\r\n  <div>\r\n    <span class=\"shortcut mat-typography\">\r\n      <mat-icon class=\"shortcut-icon\" svgIcon=\"keyboard-space\"></mat-icon\r\n      >{{ 'igo.geo.draw.move' | translate }}</span\r\n    >\r\n  </div>\r\n</mat-dialog-content>\r\n<mat-dialog-actions class=\"shortcuts-close\">\r\n  <button mat-raised-button mat-dialog-close color=\"primary\">OK</button>\r\n</mat-dialog-actions>\r\n", styles: [".shortcut{display:flex;align-items:center}.shortcut-icon{margin-right:10px}.shortcuts-close{display:flex;justify-content:center}\n"] }]
     }], null, null); })();
 
 function FeatureDetailsComponent_table_0_tr_2_td_1_Template(rf, ctx) { if (rf & 1) {
@@ -24702,7 +24702,7 @@ class FeatureFormComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FeatureFormComponent, [{
         type: Component,
-        args: [{ selector: 'igo-feature-form', changeDetection: ChangeDetectionStrategy.OnPush, template: "<igo-form\n  #igoForm\n  [form]=\"form\"\n  [formData]=\"feature$ | async\"\n  (submitForm)=\"onSubmit($event)\"\n>\n  <ng-content></ng-content>\n\n  <ng-content select=\"[formButtons]\" formButtons></ng-content>\n</igo-form>\n", styles: [":host{display:block}igo-form{height:100%}\n"] }]
+        args: [{ selector: 'igo-feature-form', changeDetection: ChangeDetectionStrategy.OnPush, template: "<igo-form\r\n  #igoForm\r\n  [form]=\"form\"\r\n  [formData]=\"feature$ | async\"\r\n  (submitForm)=\"onSubmit($event)\"\r\n>\r\n  <ng-content></ng-content>\r\n\r\n  <ng-content select=\"[formButtons]\" formButtons></ng-content>\r\n</igo-form>\r\n", styles: [":host{display:block}igo-form{height:100%}\n"] }]
     }], function () { return []; }, { form: [{
             type: Input
         }], feature: [{
@@ -28162,7 +28162,7 @@ class MeasurerDialogComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MeasurerDialogComponent, [{
         type: Component,
-        args: [{ selector: 'igo-measurer-dialog', template: "<h3 mat-dialog-title>{{ 'igo.geo.measure.dialog.title' | translate }}</h3>\n<div mat-dialog-content>\n  <table *ngIf=\"data.length > 0\" class=\"mat-typography\">\n    <thead>\n      <tr>\n        <th colspan=\"2\">\n          {{ 'igo.geo.measure.dialog.length.title' | translate }}\n        </th>\n      </tr>\n    </thead>\n    <tbody>\n      <tr>\n        <td>{{ data.length | measureFormat: measureLengthUnit.Meters }}</td>\n        <td>{{ 'igo.geo.measure.dialog.lengthInMeters' | translate }}</td>\n      </tr>\n      <tr>\n        <td>\n          {{ data.length | measureFormat: measureLengthUnit.Kilometers }}\n        </td>\n        <td>{{ 'igo.geo.measure.dialog.lengthInKilometers' | translate }}</td>\n      </tr>\n      <tr>\n        <td>{{ data.length | measureFormat: measureLengthUnit.Miles }}</td>\n        <td>{{ 'igo.geo.measure.dialog.lengthInMiles' | translate }}</td>\n      </tr>\n      <tr>\n        <td>{{ data.length | measureFormat: measureLengthUnit.Feet }}</td>\n        <td>{{ 'igo.geo.measure.dialog.lengthInFeet' | translate }}</td>\n      </tr>\n    </tbody>\n  </table>\n\n  <table *ngIf=\"data.area > 0\" class=\"mat-typography\">\n    <thead>\n      <tr>\n        <th colspan=\"2\">\n          {{ 'igo.geo.measure.dialog.area.title' | translate }}\n        </th>\n      </tr>\n    </thead>\n    <tbody>\n      <tr>\n        <td>{{ data.area | measureFormat: measureAreaUnit.SquareMeters }}</td>\n        <td>{{ 'igo.geo.measure.dialog.areaInSquareMeters' | translate }}</td>\n      </tr>\n      <tr>\n        <td>\n          {{ data.area | measureFormat: measureAreaUnit.SquareKilometers }}\n        </td>\n        <td>\n          {{ 'igo.geo.measure.dialog.areaInSquareKilometers' | translate }}\n        </td>\n      </tr>\n      <tr>\n        <td>{{ data.area | measureFormat: measureAreaUnit.SquareMiles }}</td>\n        <td>{{ 'igo.geo.measure.dialog.areaInSquareMiles' | translate }}</td>\n      </tr>\n      <tr>\n        <td>{{ data.area | measureFormat: measureAreaUnit.Acres }}</td>\n        <td>{{ 'igo.geo.measure.dialog.areaInAcres' | translate }}</td>\n      </tr>\n      <tr>\n        <td>{{ data.area | measureFormat: measureAreaUnit.Hectares }}</td>\n        <td>{{ 'igo.geo.measure.dialog.areaInHectares' | translate }}</td>\n      </tr>\n      <tr>\n        <td>{{ 'igo.geo.measure.dialog.perimeterInMeters' | translate }}</td>\n        <td>{{ data.perimeter | measureFormat: measureLengthUnit.Meters }}</td>\n      </tr>\n    </tbody>\n  </table>\n</div>\n", styles: [":host{font-family:Roboto,Helvetica Neue,sans-serif}h3{text-align:center;margin:0}table{width:100%;padding:10px}table tbody tr td:last-child{padding-left:10px}\n"] }]
+        args: [{ selector: 'igo-measurer-dialog', template: "<h3 mat-dialog-title>{{ 'igo.geo.measure.dialog.title' | translate }}</h3>\r\n<div mat-dialog-content>\r\n  <table *ngIf=\"data.length > 0\" class=\"mat-typography\">\r\n    <thead>\r\n      <tr>\r\n        <th colspan=\"2\">\r\n          {{ 'igo.geo.measure.dialog.length.title' | translate }}\r\n        </th>\r\n      </tr>\r\n    </thead>\r\n    <tbody>\r\n      <tr>\r\n        <td>{{ data.length | measureFormat: measureLengthUnit.Meters }}</td>\r\n        <td>{{ 'igo.geo.measure.dialog.lengthInMeters' | translate }}</td>\r\n      </tr>\r\n      <tr>\r\n        <td>\r\n          {{ data.length | measureFormat: measureLengthUnit.Kilometers }}\r\n        </td>\r\n        <td>{{ 'igo.geo.measure.dialog.lengthInKilometers' | translate }}</td>\r\n      </tr>\r\n      <tr>\r\n        <td>{{ data.length | measureFormat: measureLengthUnit.Miles }}</td>\r\n        <td>{{ 'igo.geo.measure.dialog.lengthInMiles' | translate }}</td>\r\n      </tr>\r\n      <tr>\r\n        <td>{{ data.length | measureFormat: measureLengthUnit.Feet }}</td>\r\n        <td>{{ 'igo.geo.measure.dialog.lengthInFeet' | translate }}</td>\r\n      </tr>\r\n    </tbody>\r\n  </table>\r\n\r\n  <table *ngIf=\"data.area > 0\" class=\"mat-typography\">\r\n    <thead>\r\n      <tr>\r\n        <th colspan=\"2\">\r\n          {{ 'igo.geo.measure.dialog.area.title' | translate }}\r\n        </th>\r\n      </tr>\r\n    </thead>\r\n    <tbody>\r\n      <tr>\r\n        <td>{{ data.area | measureFormat: measureAreaUnit.SquareMeters }}</td>\r\n        <td>{{ 'igo.geo.measure.dialog.areaInSquareMeters' | translate }}</td>\r\n      </tr>\r\n      <tr>\r\n        <td>\r\n          {{ data.area | measureFormat: measureAreaUnit.SquareKilometers }}\r\n        </td>\r\n        <td>\r\n          {{ 'igo.geo.measure.dialog.areaInSquareKilometers' | translate }}\r\n        </td>\r\n      </tr>\r\n      <tr>\r\n        <td>{{ data.area | measureFormat: measureAreaUnit.SquareMiles }}</td>\r\n        <td>{{ 'igo.geo.measure.dialog.areaInSquareMiles' | translate }}</td>\r\n      </tr>\r\n      <tr>\r\n        <td>{{ data.area | measureFormat: measureAreaUnit.Acres }}</td>\r\n        <td>{{ 'igo.geo.measure.dialog.areaInAcres' | translate }}</td>\r\n      </tr>\r\n      <tr>\r\n        <td>{{ data.area | measureFormat: measureAreaUnit.Hectares }}</td>\r\n        <td>{{ 'igo.geo.measure.dialog.areaInHectares' | translate }}</td>\r\n      </tr>\r\n      <tr>\r\n        <td>{{ 'igo.geo.measure.dialog.perimeterInMeters' | translate }}</td>\r\n        <td>{{ data.perimeter | measureFormat: measureLengthUnit.Meters }}</td>\r\n      </tr>\r\n    </tbody>\r\n  </table>\r\n</div>\r\n", styles: [":host{font-family:Roboto,Helvetica Neue,sans-serif}h3{text-align:center;margin:0}table{width:100%;padding:10px}table tbody tr td:last-child{padding-left:10px}\n"] }]
     }], function () { return [{ type: i1$3.MatDialogRef }, { type: undefined, decorators: [{
                 type: Inject,
                 args: [MAT_DIALOG_DATA]
@@ -29820,7 +29820,7 @@ class GeometryFormFieldInputComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(GeometryFormFieldInputComponent, [{
         type: Component,
-        args: [{ selector: 'igo-geometry-form-field-input', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template></ng-template>\n" }]
+        args: [{ selector: 'igo-geometry-form-field-input', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template></ng-template>\r\n" }]
     }], function () { return [{ type: i0.ChangeDetectorRef }, { type: i2$1.NgControl, decorators: [{
                 type: Optional
             }, {
@@ -30027,7 +30027,7 @@ GeometryFormFieldComponent = __decorate([
 ], GeometryFormFieldComponent);
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(GeometryFormFieldComponent, [{
         type: Component,
-        args: [{ selector: 'igo-geometry-form-field', changeDetection: ChangeDetectionStrategy.OnPush, template: "<igo-geometry-form-field-input\n  [formControl]=\"formControl\"\n  [map]=\"map\"\n  [geometryType]=\"geometryType$ | async\"\n  [drawGuide]=\"drawGuide$ | async\"\n  [measure]=\"measure\"\n  [drawControlIsActive]=\"drawControlIsActive\"\n  [freehandDrawIsActive]=\"freehandDrawIsActive\"\n  [controlOptions]=\"controlOptions\"\n  [drawStyle]=\"drawStyle\"\n  [overlayStyle]=\"overlayStyle\"\n>\n</igo-geometry-form-field-input>\n\n<div *ngIf=\"geometryTypeField\" class=\"geometry-type-toggle\">\n  <mat-button-toggle-group\n    [disabled]=\"(value$ | async) !== undefined\"\n    [(ngModel)]=\"geometryType\"\n  >\n    <mat-button-toggle\n      value=\"Point\"\n      [disabled]=\"geometryTypes.indexOf('Point') < 0\"\n    >\n      {{ 'igo.geo.geometry.point' | translate }}\n    </mat-button-toggle>\n    <mat-button-toggle\n      value=\"LineString\"\n      [disabled]=\"geometryTypes.indexOf('LineString') < 0\"\n    >\n      {{ 'igo.geo.geometry.line' | translate }}\n    </mat-button-toggle>\n    <mat-button-toggle\n      value=\"Polygon\"\n      [disabled]=\"geometryTypes.indexOf('Polygon') < 0\"\n    >\n      {{ 'igo.geo.geometry.polygon' | translate }}\n    </mat-button-toggle>\n  </mat-button-toggle-group>\n</div>\n\n<mat-form-field *ngIf=\"drawGuideField\" class=\"draw-guide-field\">\n  <input\n    matInput\n    type=\"number\"\n    [placeholder]=\"drawGuidePlaceholder\"\n    [(ngModel)]=\"drawGuide\"\n  />\n  <mat-icon matPrefix [color]=\"'primary'\" svgIcon=\"adjust\"> </mat-icon>\n  <span matSuffix class=\"draw-guide-units\">{{\n    'igo.geo.measure.meters' | translate\n  }}</span>\n</mat-form-field>\n", styles: [":host{display:block;width:100%}.geometry-type-toggle,.draw-guide-field{width:100%}.geometry-type-toggle{padding:10px;text-align:center}.draw-guide-field mat-icon{margin:0 10px}.draw-guide-units{padding:10px}\n"] }]
+        args: [{ selector: 'igo-geometry-form-field', changeDetection: ChangeDetectionStrategy.OnPush, template: "<igo-geometry-form-field-input\r\n  [formControl]=\"formControl\"\r\n  [map]=\"map\"\r\n  [geometryType]=\"geometryType$ | async\"\r\n  [drawGuide]=\"drawGuide$ | async\"\r\n  [measure]=\"measure\"\r\n  [drawControlIsActive]=\"drawControlIsActive\"\r\n  [freehandDrawIsActive]=\"freehandDrawIsActive\"\r\n  [controlOptions]=\"controlOptions\"\r\n  [drawStyle]=\"drawStyle\"\r\n  [overlayStyle]=\"overlayStyle\"\r\n>\r\n</igo-geometry-form-field-input>\r\n\r\n<div *ngIf=\"geometryTypeField\" class=\"geometry-type-toggle\">\r\n  <mat-button-toggle-group\r\n    [disabled]=\"(value$ | async) !== undefined\"\r\n    [(ngModel)]=\"geometryType\"\r\n  >\r\n    <mat-button-toggle\r\n      value=\"Point\"\r\n      [disabled]=\"geometryTypes.indexOf('Point') < 0\"\r\n    >\r\n      {{ 'igo.geo.geometry.point' | translate }}\r\n    </mat-button-toggle>\r\n    <mat-button-toggle\r\n      value=\"LineString\"\r\n      [disabled]=\"geometryTypes.indexOf('LineString') < 0\"\r\n    >\r\n      {{ 'igo.geo.geometry.line' | translate }}\r\n    </mat-button-toggle>\r\n    <mat-button-toggle\r\n      value=\"Polygon\"\r\n      [disabled]=\"geometryTypes.indexOf('Polygon') < 0\"\r\n    >\r\n      {{ 'igo.geo.geometry.polygon' | translate }}\r\n    </mat-button-toggle>\r\n  </mat-button-toggle-group>\r\n</div>\r\n\r\n<mat-form-field *ngIf=\"drawGuideField\" class=\"draw-guide-field\">\r\n  <input\r\n    matInput\r\n    type=\"number\"\r\n    [placeholder]=\"drawGuidePlaceholder\"\r\n    [(ngModel)]=\"drawGuide\"\r\n  />\r\n  <mat-icon matPrefix [color]=\"'primary'\" svgIcon=\"adjust\"> </mat-icon>\r\n  <span matSuffix class=\"draw-guide-units\">{{\r\n    'igo.geo.measure.meters' | translate\r\n  }}</span>\r\n</mat-form-field>\r\n", styles: [":host{display:block;width:100%}.geometry-type-toggle,.draw-guide-field{width:100%}.geometry-type-toggle{padding:10px;text-align:center}.draw-guide-field mat-icon{margin:0 10px}.draw-guide-units{padding:10px}\n"] }]
     }], function () { return [{ type: i0.ChangeDetectorRef }]; }, { formControl: [{
             type: Input
         }], map: [{
@@ -30252,7 +30252,7 @@ class OgcFilterButtonComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(OgcFilterButtonComponent, [{
         type: Component,
-        args: [{ selector: 'igo-ogc-filter-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  *ngIf=\"\n    header &&\n    options.ogcFilters &&\n    options.ogcFilters.enabled &&\n    (options.ogcFilters.pushButtons ||\n      options.ogcFilters.checkboxes ||\n      options.ogcFilters.radioButtons ||\n      options.ogcFilters.select ||\n      options.ogcFilters.autocomplete ||\n      options.ogcFilters.editable)\n  \"\n  mat-icon-button\n  collapsibleButton\n  tooltip-position=\"below\"\n  matTooltipShowDelay=\"500\"\n  [matTooltip]=\"'igo.geo.filter.filterBy' | translate\"\n  [color]=\"color\"\n>\n  <mat-icon\n    aria-hidden=\"false\"\n    [matBadge]=\"badge\"\n    matBadgeColor=\"warn\"\n    matBadgeSize=\"medium\"\n    svgIcon=\"filter\"\n  ></mat-icon>\n</button>\n\n<div\n  #ogcFilter\n  class=\"igo-layer-actions-container\"\n  *ngIf=\"\n    options.ogcFilters &&\n    options.ogcFilters.enabled &&\n    (options.ogcFilters.pushButtons ||\n      options.ogcFilters.checkboxes ||\n      options.ogcFilters.radioButtons ||\n      options.ogcFilters.select ||\n      options.ogcFilters.autocomplete ||\n      options.ogcFilters.editable)\n  \"\n>\n  <igo-ogc-filterable-item\n    *ngIf=\"ogcFilterCollapse && options.ogcFilters.enabled\"\n    igoListItem\n    [header]=\"false\"\n    [map]=\"layer.map\"\n    [layer]=\"layer\"\n  >\n  </igo-ogc-filterable-item>\n</div>\n" }]
+        args: [{ selector: 'igo-ogc-filter-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\r\n  *ngIf=\"\r\n    header &&\r\n    options.ogcFilters &&\r\n    options.ogcFilters.enabled &&\r\n    (options.ogcFilters.pushButtons ||\r\n      options.ogcFilters.checkboxes ||\r\n      options.ogcFilters.radioButtons ||\r\n      options.ogcFilters.select ||\r\n      options.ogcFilters.autocomplete ||\r\n      options.ogcFilters.editable)\r\n  \"\r\n  mat-icon-button\r\n  collapsibleButton\r\n  tooltip-position=\"below\"\r\n  matTooltipShowDelay=\"500\"\r\n  [matTooltip]=\"'igo.geo.filter.filterBy' | translate\"\r\n  [color]=\"color\"\r\n>\r\n  <mat-icon\r\n    aria-hidden=\"false\"\r\n    [matBadge]=\"badge\"\r\n    matBadgeColor=\"warn\"\r\n    matBadgeSize=\"medium\"\r\n    svgIcon=\"filter\"\r\n  ></mat-icon>\r\n</button>\r\n\r\n<div\r\n  #ogcFilter\r\n  class=\"igo-layer-actions-container\"\r\n  *ngIf=\"\r\n    options.ogcFilters &&\r\n    options.ogcFilters.enabled &&\r\n    (options.ogcFilters.pushButtons ||\r\n      options.ogcFilters.checkboxes ||\r\n      options.ogcFilters.radioButtons ||\r\n      options.ogcFilters.select ||\r\n      options.ogcFilters.autocomplete ||\r\n      options.ogcFilters.editable)\r\n  \"\r\n>\r\n  <igo-ogc-filterable-item\r\n    *ngIf=\"ogcFilterCollapse && options.ogcFilters.enabled\"\r\n    igoListItem\r\n    [header]=\"false\"\r\n    [map]=\"layer.map\"\r\n    [layer]=\"layer\"\r\n  >\r\n  </igo-ogc-filterable-item>\r\n</div>\r\n" }]
     }], function () { return []; }, { layer: [{
             type: Input
         }], map: [{
@@ -32458,7 +32458,7 @@ class OgcFilterSelectionComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(OgcFilterSelectionComponent, [{
         type: Component,
-        args: [{ selector: 'igo-ogc-filter-selection', providers: [DOMService], template: "<form [formGroup]=\"form\">\n  <div *ngFor=\"let selector of ogcFiltersSelectors\">\n    <div\n      class=\"pushButtonGroups\"\n      *ngIf=\"selector.selectorType === 'pushButton'\"\n    >\n      <mat-divider></mat-divider>\n      <div class=\"groupsSelector\" *ngIf=\"getPushButtonsGroups().length > 1\">\n        <mat-form-field>\n          <mat-select\n            formControlName=\"pushButtonsGroup\"\n            [matTooltip]=\"'igo.geo.layer.legend.selectStyle' | translate\"\n            tooltip-position=\"below\"\n            matTooltipShowDelay=\"500\"\n            [(value)]=\"currentPushButtonsGroup\"\n          >\n            <mat-option\n              *ngFor=\"let selectorGroup of getPushButtonsGroups()\"\n              [value]=\"selectorGroup\"\n              >{{ selectorGroup.title }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n      <ng-container\n        *ngFor=\"let bundle of currentPushButtonsGroup.computedSelectors\"\n      >\n        <h3>{{ bundle.title }}</h3>\n        <mat-button-toggle-group\n          formControlName=\"pushButtons\"\n          class=\"mat-typography\"\n          appearance=\"legacy\"\n          vertical=\"{{ bundleIsVertical(bundle) }}\"\n          multiple=\"true\"\n        >\n          <mat-button-toggle\n            *ngFor=\"let ogcPushButton of bundle.selectors\"\n            [matTooltip]=\"getToolTip(ogcPushButton)\"\n            tooltip-position=\"below\"\n            matTooltipShowDelay=\"500\"\n            matTooltipClass=\"material-tooltip\"\n            [ngStyle]=\"getButtonColor(ogcPushButton)\"\n            [checked]=\"ogcPushButton.enabled\"\n            (change)=\"onSelectionChange(ogcPushButton, selector.selectorType)\"\n            [value]=\"ogcPushButton\"\n            >{{ ogcPushButton.title }}\n          </mat-button-toggle>\n        </mat-button-toggle-group>\n      </ng-container>\n    </div>\n\n    <div class=\"checkboxGroups\" *ngIf=\"selector.selectorType === 'checkbox'\">\n      <mat-divider></mat-divider>\n      <div class=\"groupsSelector\" *ngIf=\"getCheckboxesGroups().length > 1\">\n        <mat-form-field>\n          <mat-select\n            formControlName=\"checkboxesGroup\"\n            [matTooltip]=\"'igo.geo.layer.legend.selectStyle' | translate\"\n            tooltip-position=\"below\"\n            matTooltipShowDelay=\"500\"\n            [(value)]=\"currentCheckboxesGroup\"\n          >\n            <mat-option\n              *ngFor=\"let selectorGroup of getCheckboxesGroups()\"\n              [value]=\"selectorGroup\"\n              >{{ selectorGroup.title }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n      <ng-container\n        *ngFor=\"let bundle of currentCheckboxesGroup.computedSelectors\"\n      >\n        <h3>{{ bundle.title }}</h3>\n        <div class=\"checkboxes mat-typography\">\n          <mat-checkbox\n            *ngFor=\"let ogcCheckbox of bundle.selectors\"\n            [matTooltip]=\"getToolTip(ogcCheckbox)\"\n            tooltip-position=\"below\"\n            matTooltipShowDelay=\"500\"\n            matTooltipClass=\"material-tooltip\"\n            [checked]=\"ogcCheckbox.enabled\"\n            (change)=\"onSelectionChange(ogcCheckbox, selector.selectorType)\"\n            [value]=\"ogcCheckbox\"\n            >{{ ogcCheckbox.title }}\n          </mat-checkbox>\n        </div>\n        <p\n          *ngIf=\"\n            isLessResults(bundle, 'checkbox') ||\n            isMoreResults(bundle, 'checkbox')\n          \"\n        >\n          <u\n            *ngIf=\"isLessResults(bundle, 'checkbox')\"\n            class=\"lessResults mat-typography\"\n            (click)=\"displayLessResults('checkbox')\"\n            >{{ 'igo.geo.filter.displayLessResults' | translate }}\n          </u>\n          <u\n            *ngIf=\"isMoreResults(bundle, 'checkbox')\"\n            class=\"moreResults mat-typography\"\n            (click)=\"displayMoreResults('checkbox')\"\n            >{{ 'igo.geo.filter.displayMoreResults' | translate }}\n          </u>\n        </p>\n      </ng-container>\n    </div>\n\n    <div\n      class=\"radioButtonGroups\"\n      *ngIf=\"selector.selectorType === 'radioButton'\"\n    >\n      <mat-divider></mat-divider>\n      <div class=\"groupsSelector\" *ngIf=\"getRadioButtonsGroups().length > 1\">\n        <mat-form-field>\n          <mat-select\n            formControlName=\"radioButtonsGroup\"\n            [matTooltip]=\"'igo.geo.layer.legend.selectStyle' | translate\"\n            tooltip-position=\"below\"\n            matTooltipShowDelay=\"500\"\n            [(value)]=\"currentRadioButtonsGroup\"\n          >\n            <mat-option\n              *ngFor=\"let selectorGroup of getRadioButtonsGroups()\"\n              [value]=\"selectorGroup\"\n              >{{ selectorGroup.title }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n      <ng-container\n        *ngFor=\"let bundle of currentRadioButtonsGroup.computedSelectors\"\n      >\n        <h3>{{ bundle.title }}</h3>\n        <mat-radio-group formControlName=\"radioButtons\" class=\"mat-typography\">\n          <mat-radio-button\n            *ngIf=\"bundle.unfiltered\"\n            [matTooltip]=\"'igo.geo.filter.resetFilters' | translate\"\n            tooltip-position=\"below\"\n            matTooltipShowDelay=\"500\"\n            matTooltipClass=\"material-tooltip\"\n            (change)=\"emptyRadioButtons()\"\n            >{{ 'igo.geo.filter.resetFilters' | translate }}\n          </mat-radio-button>\n          <mat-radio-button\n            *ngFor=\"let ogcRadioButton of bundle.selectors\"\n            [matTooltip]=\"getToolTip(ogcRadioButton)\"\n            tooltip-position=\"below\"\n            matTooltipShowDelay=\"500\"\n            matTooltipClass=\"material-tooltip\"\n            [checked]=\"ogcRadioButton.enabled\"\n            (change)=\"onSelectionChange(ogcRadioButton, selector.selectorType)\"\n            [value]=\"ogcRadioButton\"\n            >{{ ogcRadioButton.title }}\n          </mat-radio-button>\n          <p\n            *ngIf=\"\n              isLessResults(bundle, 'radio') || isMoreResults(bundle, 'radio')\n            \"\n          >\n            <u\n              *ngIf=\"isLessResults(bundle, 'radio')\"\n              class=\"lessResults mat-typography\"\n              (click)=\"displayLessResults('radio')\"\n              >{{ 'igo.geo.filter.displayLessResults' | translate }}\n            </u>\n            <u\n              *ngIf=\"isMoreResults(bundle, 'radio')\"\n              class=\"moreResults mat-typography\"\n              (click)=\"displayMoreResults('radio')\"\n              >{{ 'igo.geo.filter.displayMoreResults' | translate }}\n            </u>\n          </p>\n        </mat-radio-group>\n      </ng-container>\n    </div>\n\n    <div class=\"selectGroups\" *ngIf=\"selector.selectorType === 'select'\">\n      <mat-divider></mat-divider>\n      <div class=\"groupsSelector\" *ngIf=\"getSelectGroups().length > 1\">\n        <mat-form-field>\n          <mat-select\n            formControlName=\"selectGroup\"\n            [matTooltip]=\"'igo.geo.layer.legend.selectStyle' | translate\"\n            tooltip-position=\"below\"\n            matTooltipShowDelay=\"500\"\n            [(value)]=\"currentSelectGroup\"\n          >\n            <mat-option\n              *ngFor=\"let selectorGroup of getSelectGroups()\"\n              [value]=\"selectorGroup\"\n              >{{ selectorGroup.title }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n      <ng-container *ngFor=\"let bundle of currentSelectGroup.computedSelectors\">\n        <h3>{{ bundle.title }}</h3>\n        <div class=\"groupsSelector\">\n          <mat-button\n            *ngIf=\"bundle.unfiltered && !bundle.multiple\"\n            mat-icon-button\n            color=\"warn\"\n            [matTooltip]=\"'igo.geo.filter.resetFilters' | translate\"\n            tooltip-position=\"below\"\n            matTooltipShowDelay=\"500\"\n            matTooltipClass=\"material-tooltip\"\n            (click)=\"emptySelect()\"\n          >\n            <mat-icon svgIcon=\"filter-remove\"></mat-icon>\n          </mat-button>\n          <mat-form-field\n            [style.width.%]=\"bundle.width ? bundle.width : undefined\"\n          >\n            <div *ngIf=\"bundle.multiple; else notMulti\">\n              <mat-select\n                #selection\n                [multiple]=\"bundle.multiple\"\n                [placeholder]=\"bundle.title\"\n                formControlName=\"selectMulti\"\n              >\n                <div class=\"checkboxes mat-typography\">\n                  <mat-checkbox\n                    *ngIf=\"bundle.multiple\"\n                    [(ngModel)]=\"selectAllSelected\"\n                    [ngModelOptions]=\"{ standalone: true }\"\n                    (change)=\"toggleAllSelection()\"\n                    >Tous\n                  </mat-checkbox>\n                </div>\n                <mat-option\n                  *ngFor=\"let ogcSelect of bundle.selectors\"\n                  [matTooltip]=\"getToolTip(ogcSelect)\"\n                  tooltip-position=\"below\"\n                  matTooltipDelay=\"500\"\n                  matTooltipClass=\"material-tooltip\"\n                  (onSelectionChange)=\"\n                    selectOptionClick($event.source.value, bundle, $event)\n                  \"\n                  [value]=\"ogcSelect\"\n                  >{{ ogcSelect.title }}\n                </mat-option>\n              </mat-select>\n            </div>\n            <ng-template #notMulti>\n              <mat-select [placeholder]=\"bundle.title\" formControlName=\"select\">\n                <mat-option\n                  *ngFor=\"let ogcSelect of bundle.selectors\"\n                  [matTooltip]=\"getToolTip(ogcSelect)\"\n                  tooltip-position=\"below\"\n                  matTooltipDelay=\"500\"\n                  matTooltipClass=\"material-tooltip\"\n                  [value]=\"ogcSelect\"\n                  (onSelectionChange)=\"\n                    selectOptionClick($event.source.value, bundle)\n                  \"\n                  >{{ ogcSelect.title }}\n                </mat-option>\n              </mat-select>\n            </ng-template>\n          </mat-form-field>\n        </div>\n      </ng-container>\n    </div>\n\n    <div\n      class=\"autocompleteGroups\"\n      *ngIf=\"selector.selectorType === 'autocomplete'\"\n    >\n      <mat-divider></mat-divider>\n      <div class=\"groupsSelector\" *ngIf=\"getAutocompleteGroups().length > 1\">\n        <mat-form-field>\n          <mat-select\n            formControlName=\"autocompleteGroup\"\n            [matTooltip]=\"'igo.geo.layer.legend.selectStyle' | translate\"\n            tooltip-position=\"below\"\n            matTooltipShowDelay=\"500\"\n            [(value)]=\"currentAutocompleteGroup\"\n          >\n            <mat-option\n              *ngFor=\"let autocompleteGroup of getAutocompleteGroups()\"\n              [value]=\"autocompleteGroup\"\n              >{{ autocompleteGroup.title }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n      <ng-container\n        *ngFor=\"let bundle of currentAutocompleteGroup.computedSelectors\"\n      >\n        <h3>{{ bundle.title }}</h3>\n        <div class=\"groupsSelector\">\n          <mat-button\n            *ngIf=\"bundle.unfiltered\"\n            mat-icon-button\n            color=\"warn\"\n            [matTooltip]=\"'igo.geo.filter.resetFilters' | translate\"\n            tooltip-position=\"below\"\n            matTooltipShowDelay=\"500\"\n            matTooltipClass=\"material-tooltip\"\n            (click)=\"emptyAutocomplete()\"\n          >\n            <mat-icon svgIcon=\"filter-remove\"></mat-icon>\n          </mat-button>\n          <mat-form-field\n            *ngIf=\"filteredOgcAutocomplete[bundle.id]\"\n            [style.width.%]=\"bundle.width ? bundle.width : undefined\"\n          >\n            <input\n              matInput\n              type=\"text\"\n              formControlName=\"autocomplete\"\n              #autocomplete\n              class=\"autocomplete\"\n              [matAutocomplete]=\"auto\"\n              [placeholder]=\"bundle.title\"\n            />\n            <mat-autocomplete\n              #auto=\"matAutocomplete\"\n              #autocomplete\n              (optionSelected)=\"autocompleteOptionClick($event.option.value)\"\n              [displayWith]=\"displayFn\"\n            >\n              <mat-option\n                *ngFor=\"\n                  let ogcAutocomplete of filteredOgcAutocomplete[bundle.id]\n                    | async\n                \"\n                [value]=\"ogcAutocomplete\"\n              >\n                {{ ogcAutocomplete.value }}\n              </mat-option>\n            </mat-autocomplete>\n          </mat-form-field>\n        </div>\n      </ng-container>\n    </div>\n  </div>\n</form>\n\n<div *ngIf=\"isTemporalOperator()\">\n  <mat-divider></mat-divider>\n  <h3 *ngIf=\"!currentFilter.title\">\n    {{ 'igo.geo.filter.reportingDate' | translate }}\n  </h3>\n  <h3 *ngIf=\"currentFilter.title\">{{ currentFilter.title }}</h3>\n  <igo-ogc-filter-time\n    [(datasource)]=\"datasource\"\n    [(currentFilter)]=\"currentFilter\"\n    (changeProperty)=\"changeProperty($event.value, $event.pos)\"\n  >\n  </igo-ogc-filter-time>\n</div>\n", styles: [":host .mat-button-toggle-group{margin:5px;flex-wrap:wrap;box-shadow:none!important;width:95%}:host .checkboxes{flex-wrap:wrap;box-shadow:none}:host .groupsSelector{text-align:center}:host mat-button-toggle{display:inline-flex;border:1.5px solid black;border-radius:5px;margin:5px;white-space:normal;min-height:40px;height:auto;width:142px}:host mat-button-toggle ::ng-deep .mat-button-toggle-label-content{line-height:unset;font-size:small;display:block}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){:host mat-button-toggle{width:45%}}:host ::ng-deep .material-tooltip{white-space:pre-wrap}:host mat-checkbox,:host mat-radio-button{margin:7px;width:95%;display:inline-flex;font-size:larger}:host mat-checkbox ::ng-deep label,:host mat-radio-button ::ng-deep label{white-space:normal}:host mat-checkbox{vertical-align:middle}:host mat-button{padding-right:10px;cursor:pointer}:host h3{margin:7px;text-align:left}:host u{cursor:pointer;color:#00f;margin:5px}:host p{margin:unset}\n"] }]
+        args: [{ selector: 'igo-ogc-filter-selection', providers: [DOMService], template: "<form [formGroup]=\"form\">\r\n  <div *ngFor=\"let selector of ogcFiltersSelectors\">\r\n    <div\r\n      class=\"pushButtonGroups\"\r\n      *ngIf=\"selector.selectorType === 'pushButton'\"\r\n    >\r\n      <mat-divider></mat-divider>\r\n      <div class=\"groupsSelector\" *ngIf=\"getPushButtonsGroups().length > 1\">\r\n        <mat-form-field>\r\n          <mat-select\r\n            formControlName=\"pushButtonsGroup\"\r\n            [matTooltip]=\"'igo.geo.layer.legend.selectStyle' | translate\"\r\n            tooltip-position=\"below\"\r\n            matTooltipShowDelay=\"500\"\r\n            [(value)]=\"currentPushButtonsGroup\"\r\n          >\r\n            <mat-option\r\n              *ngFor=\"let selectorGroup of getPushButtonsGroups()\"\r\n              [value]=\"selectorGroup\"\r\n              >{{ selectorGroup.title }}\r\n            </mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </div>\r\n      <ng-container\r\n        *ngFor=\"let bundle of currentPushButtonsGroup.computedSelectors\"\r\n      >\r\n        <h3>{{ bundle.title }}</h3>\r\n        <mat-button-toggle-group\r\n          formControlName=\"pushButtons\"\r\n          class=\"mat-typography\"\r\n          appearance=\"legacy\"\r\n          vertical=\"{{ bundleIsVertical(bundle) }}\"\r\n          multiple=\"true\"\r\n        >\r\n          <mat-button-toggle\r\n            *ngFor=\"let ogcPushButton of bundle.selectors\"\r\n            [matTooltip]=\"getToolTip(ogcPushButton)\"\r\n            tooltip-position=\"below\"\r\n            matTooltipShowDelay=\"500\"\r\n            matTooltipClass=\"material-tooltip\"\r\n            [ngStyle]=\"getButtonColor(ogcPushButton)\"\r\n            [checked]=\"ogcPushButton.enabled\"\r\n            (change)=\"onSelectionChange(ogcPushButton, selector.selectorType)\"\r\n            [value]=\"ogcPushButton\"\r\n            >{{ ogcPushButton.title }}\r\n          </mat-button-toggle>\r\n        </mat-button-toggle-group>\r\n      </ng-container>\r\n    </div>\r\n\r\n    <div class=\"checkboxGroups\" *ngIf=\"selector.selectorType === 'checkbox'\">\r\n      <mat-divider></mat-divider>\r\n      <div class=\"groupsSelector\" *ngIf=\"getCheckboxesGroups().length > 1\">\r\n        <mat-form-field>\r\n          <mat-select\r\n            formControlName=\"checkboxesGroup\"\r\n            [matTooltip]=\"'igo.geo.layer.legend.selectStyle' | translate\"\r\n            tooltip-position=\"below\"\r\n            matTooltipShowDelay=\"500\"\r\n            [(value)]=\"currentCheckboxesGroup\"\r\n          >\r\n            <mat-option\r\n              *ngFor=\"let selectorGroup of getCheckboxesGroups()\"\r\n              [value]=\"selectorGroup\"\r\n              >{{ selectorGroup.title }}\r\n            </mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </div>\r\n      <ng-container\r\n        *ngFor=\"let bundle of currentCheckboxesGroup.computedSelectors\"\r\n      >\r\n        <h3>{{ bundle.title }}</h3>\r\n        <div class=\"checkboxes mat-typography\">\r\n          <mat-checkbox\r\n            *ngFor=\"let ogcCheckbox of bundle.selectors\"\r\n            [matTooltip]=\"getToolTip(ogcCheckbox)\"\r\n            tooltip-position=\"below\"\r\n            matTooltipShowDelay=\"500\"\r\n            matTooltipClass=\"material-tooltip\"\r\n            [checked]=\"ogcCheckbox.enabled\"\r\n            (change)=\"onSelectionChange(ogcCheckbox, selector.selectorType)\"\r\n            [value]=\"ogcCheckbox\"\r\n            >{{ ogcCheckbox.title }}\r\n          </mat-checkbox>\r\n        </div>\r\n        <p\r\n          *ngIf=\"\r\n            isLessResults(bundle, 'checkbox') ||\r\n            isMoreResults(bundle, 'checkbox')\r\n          \"\r\n        >\r\n          <u\r\n            *ngIf=\"isLessResults(bundle, 'checkbox')\"\r\n            class=\"lessResults mat-typography\"\r\n            (click)=\"displayLessResults('checkbox')\"\r\n            >{{ 'igo.geo.filter.displayLessResults' | translate }}\r\n          </u>\r\n          <u\r\n            *ngIf=\"isMoreResults(bundle, 'checkbox')\"\r\n            class=\"moreResults mat-typography\"\r\n            (click)=\"displayMoreResults('checkbox')\"\r\n            >{{ 'igo.geo.filter.displayMoreResults' | translate }}\r\n          </u>\r\n        </p>\r\n      </ng-container>\r\n    </div>\r\n\r\n    <div\r\n      class=\"radioButtonGroups\"\r\n      *ngIf=\"selector.selectorType === 'radioButton'\"\r\n    >\r\n      <mat-divider></mat-divider>\r\n      <div class=\"groupsSelector\" *ngIf=\"getRadioButtonsGroups().length > 1\">\r\n        <mat-form-field>\r\n          <mat-select\r\n            formControlName=\"radioButtonsGroup\"\r\n            [matTooltip]=\"'igo.geo.layer.legend.selectStyle' | translate\"\r\n            tooltip-position=\"below\"\r\n            matTooltipShowDelay=\"500\"\r\n            [(value)]=\"currentRadioButtonsGroup\"\r\n          >\r\n            <mat-option\r\n              *ngFor=\"let selectorGroup of getRadioButtonsGroups()\"\r\n              [value]=\"selectorGroup\"\r\n              >{{ selectorGroup.title }}\r\n            </mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </div>\r\n      <ng-container\r\n        *ngFor=\"let bundle of currentRadioButtonsGroup.computedSelectors\"\r\n      >\r\n        <h3>{{ bundle.title }}</h3>\r\n        <mat-radio-group formControlName=\"radioButtons\" class=\"mat-typography\">\r\n          <mat-radio-button\r\n            *ngIf=\"bundle.unfiltered\"\r\n            [matTooltip]=\"'igo.geo.filter.resetFilters' | translate\"\r\n            tooltip-position=\"below\"\r\n            matTooltipShowDelay=\"500\"\r\n            matTooltipClass=\"material-tooltip\"\r\n            (change)=\"emptyRadioButtons()\"\r\n            >{{ 'igo.geo.filter.resetFilters' | translate }}\r\n          </mat-radio-button>\r\n          <mat-radio-button\r\n            *ngFor=\"let ogcRadioButton of bundle.selectors\"\r\n            [matTooltip]=\"getToolTip(ogcRadioButton)\"\r\n            tooltip-position=\"below\"\r\n            matTooltipShowDelay=\"500\"\r\n            matTooltipClass=\"material-tooltip\"\r\n            [checked]=\"ogcRadioButton.enabled\"\r\n            (change)=\"onSelectionChange(ogcRadioButton, selector.selectorType)\"\r\n            [value]=\"ogcRadioButton\"\r\n            >{{ ogcRadioButton.title }}\r\n          </mat-radio-button>\r\n          <p\r\n            *ngIf=\"\r\n              isLessResults(bundle, 'radio') || isMoreResults(bundle, 'radio')\r\n            \"\r\n          >\r\n            <u\r\n              *ngIf=\"isLessResults(bundle, 'radio')\"\r\n              class=\"lessResults mat-typography\"\r\n              (click)=\"displayLessResults('radio')\"\r\n              >{{ 'igo.geo.filter.displayLessResults' | translate }}\r\n            </u>\r\n            <u\r\n              *ngIf=\"isMoreResults(bundle, 'radio')\"\r\n              class=\"moreResults mat-typography\"\r\n              (click)=\"displayMoreResults('radio')\"\r\n              >{{ 'igo.geo.filter.displayMoreResults' | translate }}\r\n            </u>\r\n          </p>\r\n        </mat-radio-group>\r\n      </ng-container>\r\n    </div>\r\n\r\n    <div class=\"selectGroups\" *ngIf=\"selector.selectorType === 'select'\">\r\n      <mat-divider></mat-divider>\r\n      <div class=\"groupsSelector\" *ngIf=\"getSelectGroups().length > 1\">\r\n        <mat-form-field>\r\n          <mat-select\r\n            formControlName=\"selectGroup\"\r\n            [matTooltip]=\"'igo.geo.layer.legend.selectStyle' | translate\"\r\n            tooltip-position=\"below\"\r\n            matTooltipShowDelay=\"500\"\r\n            [(value)]=\"currentSelectGroup\"\r\n          >\r\n            <mat-option\r\n              *ngFor=\"let selectorGroup of getSelectGroups()\"\r\n              [value]=\"selectorGroup\"\r\n              >{{ selectorGroup.title }}\r\n            </mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </div>\r\n      <ng-container *ngFor=\"let bundle of currentSelectGroup.computedSelectors\">\r\n        <h3>{{ bundle.title }}</h3>\r\n        <div class=\"groupsSelector\">\r\n          <mat-button\r\n            *ngIf=\"bundle.unfiltered && !bundle.multiple\"\r\n            mat-icon-button\r\n            color=\"warn\"\r\n            [matTooltip]=\"'igo.geo.filter.resetFilters' | translate\"\r\n            tooltip-position=\"below\"\r\n            matTooltipShowDelay=\"500\"\r\n            matTooltipClass=\"material-tooltip\"\r\n            (click)=\"emptySelect()\"\r\n          >\r\n            <mat-icon svgIcon=\"filter-remove\"></mat-icon>\r\n          </mat-button>\r\n          <mat-form-field\r\n            [style.width.%]=\"bundle.width ? bundle.width : undefined\"\r\n          >\r\n            <div *ngIf=\"bundle.multiple; else notMulti\">\r\n              <mat-select\r\n                #selection\r\n                [multiple]=\"bundle.multiple\"\r\n                [placeholder]=\"bundle.title\"\r\n                formControlName=\"selectMulti\"\r\n              >\r\n                <div class=\"checkboxes mat-typography\">\r\n                  <mat-checkbox\r\n                    *ngIf=\"bundle.multiple\"\r\n                    [(ngModel)]=\"selectAllSelected\"\r\n                    [ngModelOptions]=\"{ standalone: true }\"\r\n                    (change)=\"toggleAllSelection()\"\r\n                    >Tous\r\n                  </mat-checkbox>\r\n                </div>\r\n                <mat-option\r\n                  *ngFor=\"let ogcSelect of bundle.selectors\"\r\n                  [matTooltip]=\"getToolTip(ogcSelect)\"\r\n                  tooltip-position=\"below\"\r\n                  matTooltipDelay=\"500\"\r\n                  matTooltipClass=\"material-tooltip\"\r\n                  (onSelectionChange)=\"\r\n                    selectOptionClick($event.source.value, bundle, $event)\r\n                  \"\r\n                  [value]=\"ogcSelect\"\r\n                  >{{ ogcSelect.title }}\r\n                </mat-option>\r\n              </mat-select>\r\n            </div>\r\n            <ng-template #notMulti>\r\n              <mat-select [placeholder]=\"bundle.title\" formControlName=\"select\">\r\n                <mat-option\r\n                  *ngFor=\"let ogcSelect of bundle.selectors\"\r\n                  [matTooltip]=\"getToolTip(ogcSelect)\"\r\n                  tooltip-position=\"below\"\r\n                  matTooltipDelay=\"500\"\r\n                  matTooltipClass=\"material-tooltip\"\r\n                  [value]=\"ogcSelect\"\r\n                  (onSelectionChange)=\"\r\n                    selectOptionClick($event.source.value, bundle)\r\n                  \"\r\n                  >{{ ogcSelect.title }}\r\n                </mat-option>\r\n              </mat-select>\r\n            </ng-template>\r\n          </mat-form-field>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n\r\n    <div\r\n      class=\"autocompleteGroups\"\r\n      *ngIf=\"selector.selectorType === 'autocomplete'\"\r\n    >\r\n      <mat-divider></mat-divider>\r\n      <div class=\"groupsSelector\" *ngIf=\"getAutocompleteGroups().length > 1\">\r\n        <mat-form-field>\r\n          <mat-select\r\n            formControlName=\"autocompleteGroup\"\r\n            [matTooltip]=\"'igo.geo.layer.legend.selectStyle' | translate\"\r\n            tooltip-position=\"below\"\r\n            matTooltipShowDelay=\"500\"\r\n            [(value)]=\"currentAutocompleteGroup\"\r\n          >\r\n            <mat-option\r\n              *ngFor=\"let autocompleteGroup of getAutocompleteGroups()\"\r\n              [value]=\"autocompleteGroup\"\r\n              >{{ autocompleteGroup.title }}\r\n            </mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </div>\r\n      <ng-container\r\n        *ngFor=\"let bundle of currentAutocompleteGroup.computedSelectors\"\r\n      >\r\n        <h3>{{ bundle.title }}</h3>\r\n        <div class=\"groupsSelector\">\r\n          <mat-button\r\n            *ngIf=\"bundle.unfiltered\"\r\n            mat-icon-button\r\n            color=\"warn\"\r\n            [matTooltip]=\"'igo.geo.filter.resetFilters' | translate\"\r\n            tooltip-position=\"below\"\r\n            matTooltipShowDelay=\"500\"\r\n            matTooltipClass=\"material-tooltip\"\r\n            (click)=\"emptyAutocomplete()\"\r\n          >\r\n            <mat-icon svgIcon=\"filter-remove\"></mat-icon>\r\n          </mat-button>\r\n          <mat-form-field\r\n            *ngIf=\"filteredOgcAutocomplete[bundle.id]\"\r\n            [style.width.%]=\"bundle.width ? bundle.width : undefined\"\r\n          >\r\n            <input\r\n              matInput\r\n              type=\"text\"\r\n              formControlName=\"autocomplete\"\r\n              #autocomplete\r\n              class=\"autocomplete\"\r\n              [matAutocomplete]=\"auto\"\r\n              [placeholder]=\"bundle.title\"\r\n            />\r\n            <mat-autocomplete\r\n              #auto=\"matAutocomplete\"\r\n              #autocomplete\r\n              (optionSelected)=\"autocompleteOptionClick($event.option.value)\"\r\n              [displayWith]=\"displayFn\"\r\n            >\r\n              <mat-option\r\n                *ngFor=\"\r\n                  let ogcAutocomplete of filteredOgcAutocomplete[bundle.id]\r\n                    | async\r\n                \"\r\n                [value]=\"ogcAutocomplete\"\r\n              >\r\n                {{ ogcAutocomplete.value }}\r\n              </mat-option>\r\n            </mat-autocomplete>\r\n          </mat-form-field>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</form>\r\n\r\n<div *ngIf=\"isTemporalOperator()\">\r\n  <mat-divider></mat-divider>\r\n  <h3 *ngIf=\"!currentFilter.title\">\r\n    {{ 'igo.geo.filter.reportingDate' | translate }}\r\n  </h3>\r\n  <h3 *ngIf=\"currentFilter.title\">{{ currentFilter.title }}</h3>\r\n  <igo-ogc-filter-time\r\n    [(datasource)]=\"datasource\"\r\n    [(currentFilter)]=\"currentFilter\"\r\n    (changeProperty)=\"changeProperty($event.value, $event.pos)\"\r\n  >\r\n  </igo-ogc-filter-time>\r\n</div>\r\n", styles: [":host .mat-button-toggle-group{margin:5px;flex-wrap:wrap;box-shadow:none!important;width:95%}:host .checkboxes{flex-wrap:wrap;box-shadow:none}:host .groupsSelector{text-align:center}:host mat-button-toggle{display:inline-flex;border:1.5px solid black;border-radius:5px;margin:5px;white-space:normal;min-height:40px;height:auto;width:142px}:host mat-button-toggle ::ng-deep .mat-button-toggle-label-content{line-height:unset;font-size:small;display:block}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){:host mat-button-toggle{width:45%}}:host ::ng-deep .material-tooltip{white-space:pre-wrap}:host mat-checkbox,:host mat-radio-button{margin:7px;width:95%;display:inline-flex;font-size:larger}:host mat-checkbox ::ng-deep label,:host mat-radio-button ::ng-deep label{white-space:normal}:host mat-checkbox{vertical-align:middle}:host mat-button{padding-right:10px;cursor:pointer}:host h3{margin:7px;text-align:left}:host u{cursor:pointer;color:#00f;margin:5px}:host p{margin:unset}\n"] }]
     }], function () { return [{ type: OGCFilterService }, { type: i2$1.UntypedFormBuilder }, { type: i5$1.DOMService }, { type: i2.ConfigService }, { type: i0.ChangeDetectorRef }]; }, { sel: [{
             type: ViewChild,
             args: ['selection']
@@ -32748,7 +32748,7 @@ class OgcFilterTimeSliderComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(OgcFilterTimeSliderComponent, [{
         type: Component,
-        args: [{ selector: 'igo-ogc-filter-time-slider', template: "<div class=\"slider-container\">\n  <mat-slider\n    id=\"time-slider\"\n    [step]=\"1\"\n    [min]=\"1\"\n    [max]=\"calculatedStep\"\n    [(ngModel)]=\"sliderValue\"\n    [displayWith]=\"sliderDisplayWith\"\n    thumbLabel\n    #ngSlider\n    ><input\n      matSliderThumb\n      (input)=\"\n        handleSliderInput({\n          source: ngSliderThumb,\n          parent: ngSlider,\n          value: ngSliderThumb.value\n        })\n      \"\n      #ngSliderThumb=\"matSliderThumb\"\n    />\n  </mat-slider>\n  <button mat-icon-button color=\"primary\" (click)=\"playFilter($event)\">\n    <mat-icon [svgIcon]=\"playIcon\"></mat-icon>\n  </button>\n  <button mat-icon-button color=\"primary\" (click)=\"resetFilter($event)\">\n    <mat-icon svgIcon=\"{{ resetIcon }}\"></mat-icon>\n  </button>\n</div>\n", styles: [":host ::ng-deep input{text-align:center!important;margin:auto 5px!important}:host .datetime-container{text-align:center}:host .slider-container{text-align:center}:host .datetime-input{display:inline-block;margin:5px 25px}:host .date-input{width:120px;margin-right:25px}:host .time-input{display:inherit;margin-right:25px}:host .hour-input,:host .minute-input{width:40px}:host .minute-input{margin-left:10px}\n"] }]
+        args: [{ selector: 'igo-ogc-filter-time-slider', template: "<div class=\"slider-container\">\r\n  <mat-slider\r\n    id=\"time-slider\"\r\n    [step]=\"1\"\r\n    [min]=\"1\"\r\n    [max]=\"calculatedStep\"\r\n    [(ngModel)]=\"sliderValue\"\r\n    [displayWith]=\"sliderDisplayWith\"\r\n    thumbLabel\r\n    #ngSlider\r\n    ><input\r\n      matSliderThumb\r\n      (input)=\"\r\n        handleSliderInput({\r\n          source: ngSliderThumb,\r\n          parent: ngSlider,\r\n          value: ngSliderThumb.value\r\n        })\r\n      \"\r\n      #ngSliderThumb=\"matSliderThumb\"\r\n    />\r\n  </mat-slider>\r\n  <button mat-icon-button color=\"primary\" (click)=\"playFilter($event)\">\r\n    <mat-icon [svgIcon]=\"playIcon\"></mat-icon>\r\n  </button>\r\n  <button mat-icon-button color=\"primary\" (click)=\"resetFilter($event)\">\r\n    <mat-icon svgIcon=\"{{ resetIcon }}\"></mat-icon>\r\n  </button>\r\n</div>\r\n", styles: [":host ::ng-deep input{text-align:center!important;margin:auto 5px!important}:host .datetime-container{text-align:center}:host .slider-container{text-align:center}:host .datetime-input{display:inline-block;margin:5px 25px}:host .date-input{width:120px;margin-right:25px}:host .time-input{display:inherit;margin-right:25px}:host .hour-input,:host .minute-input{width:40px}:host .minute-input{margin-left:10px}\n"] }]
     }], function () { return [{ type: OGCFilterTimeService }]; }, { currentFilter: [{
             type: Input
         }], begin: [{
@@ -33672,7 +33672,7 @@ class OgcFilterTimeComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(OgcFilterTimeComponent, [{
         type: Component,
-        args: [{ selector: 'igo-ogc-filter-time', template: "<div class=\"datetime-container\">\n  <mat-slide-toggle\n    *ngIf=\"this.currentFilter.sliderOptions?.enabled\"\n    [(ngModel)]=\"sliderMode\"\n    (change)=\"modeChange($event)\"\n  >\n    {{ 'igo.geo.filter.sliderModeTitle' | translate }}\n  </mat-slide-toggle>\n\n  <div class=\"slider-container\" *ngIf=\"sliderMode\">\n    <igo-ogc-filter-time-slider\n      [begin]=\"beginValue\"\n      [max]=\"this.restrictedToStep() ? this.maxDate : this.endValue\"\n      [currentFilter]=\"currentFilter\"\n      [datasource]=\"datasource\"\n      (changeProperty)=\"changePropertyByPass($event)\"\n    >\n    </igo-ogc-filter-time-slider>\n  </div>\n\n  <div *ngIf=\"!sliderMode\">\n    <div class=\"year-input-container\" *ngIf=\"calendarTypeYear\">\n      <!-- to emulate a year-picker, 2 input: first input to show user just year and second input hiden and bind \n        with the datepicker  -->\n      <mat-form-field class=\"year-input\" subscriptSizing=\"dynamic\">\n        <mat-label>{{ 'igo.geo.timeFilter.startYear' | translate }}</mat-label>\n        <input\n          matInput\n          class=\"year-input-only-year\"\n          value=\"{{ onlyYearBegin }}\"\n          (change)=\"yearOnlyInputChange($event, beginDatepicker, 'begin')\"\n          [disabled]=\"filterStateDisable\"\n        />\n        <mat-datepicker-toggle\n          matSuffix\n          [for]=\"beginDatepicker\"\n          [disabled]=\"filterStateDisable\"\n        ></mat-datepicker-toggle>\n\n        <mat-datepicker\n          panelClass=\"datepicker-year\"\n          #beginDatepicker\n          [startView]=\"calendarView()\"\n          [startAt]=\"beginValue\"\n          (yearSelected)=\"yearSelected($event, beginDatepicker, 'begin')\"\n        >\n        </mat-datepicker>\n\n        <input\n          #beginYear\n          class=\"year-input-hide\"\n          matInput\n          [matDatepicker]=\"beginDatepicker\"\n          enabled=\"false\"\n          readonly=\"true\"\n          [value]=\"\n            beginValue ? beginValue : handleDate(datasource.options.minDate)\n          \"\n          [min]=\"handleDate(datasource.options.minDate)\"\n          [max]=\"\n            endValue && !restrictedToStep()\n              ? endValue\n              : handleDate(datasource.options.maxDate)\n          \"\n        />\n      </mat-form-field>\n\n      <mat-form-field class=\"year-input\" subscriptSizing=\"dynamic\">\n        <mat-label>{{ 'igo.geo.timeFilter.endYear' | translate }}</mat-label>\n        <input\n          matInput\n          class=\"year-input-only-year\"\n          value=\"{{ onlyYearEnd }}\"\n          (change)=\"yearOnlyInputChange($event, endDatepicker, 'end')\"\n          [disabled]=\"filterStateDisable\"\n        />\n        <mat-datepicker-toggle\n          matSuffix\n          [for]=\"endDatepicker\"\n          [disabled]=\"filterStateDisable\"\n        ></mat-datepicker-toggle>\n        <mat-datepicker\n          panelClass=\"datepicker-year\"\n          #endDatepicker\n          [startView]=\"calendarView()\"\n          [startAt]=\"endValue\"\n          (yearSelected)=\"yearSelected($event, endDatepicker, 'end')\"\n        >\n        </mat-datepicker>\n\n        <input\n          #endYear\n          class=\"year-input-hide\"\n          matInput\n          [matDatepicker]=\"endDatepicker\"\n          enabled=\"false\"\n          readonly=\"true\"\n          [value]=\"endValue ? endValue : handleDate(datasource.options.maxDate)\"\n          [min]=\"\n            beginValue ? beginValue : handleDate(datasource.options.minDate)\n          \"\n          [max]=\"handleDate(datasource.options.maxDate)\"\n        />\n      </mat-form-field>\n      <div class=\"actions-container\">\n        <button\n          class=\"reset-button\"\n          mat-icon-button\n          color=\"primary\"\n          (click)=\"resetFilter()\"\n          [matTooltip]=\"'igo.geo.filter.resetFilters' | translate\"\n          [disabled]=\"filterStateDisable\"\n        >\n          <mat-icon svgIcon=\"{{ resetIcon }}\"></mat-icon>\n        </button>\n        <mat-slide-toggle\n          class=\"toggle-filter-state\"\n          (change)=\"toggleFilterState()\"\n          [matTooltip]=\"'igo.geo.filter.toggleFilterState' | translate\"\n          tooltip-position=\"below\"\n          matTooltipShowDelay=\"500\"\n          [checked]=\"!filterStateDisable\"\n        >\n        </mat-slide-toggle>\n      </div>\n    </div>\n\n    <div class=\"datetime-input-container\" *ngIf=\"calendarType() !== 'year'\">\n      <div class=\"datetime-input\">\n        <mat-form-field class=\"date-input\" subscriptSizing=\"dynamic\">\n          <mat-datepicker-toggle\n            matSuffix\n            [for]=\"beginDatepicker\"\n            [disabled]=\"filterStateDisable\"\n          ></mat-datepicker-toggle>\n          <input\n            #begin\n            matInput\n            [matDatepicker]=\"beginDatepicker\"\n            [placeholder]=\"'igo.geo.timeFilter.startDate' | translate\"\n            [attr.disabled]=\"!currentFilter.active\"\n            (dateChange)=\"changeTemporalProperty(begin.value, 1)\"\n            [matDatepickerFilter]=\"filterBeginFunction\"\n            [value]=\"\n              beginValue ? beginValue : handleDate(datasource.options.minDate)\n            \"\n            [min]=\"handleDate(datasource.options.minDate)\"\n            [max]=\"\n              endValue && !restrictedToStep()\n                ? endValue\n                : handleDate(datasource.options.maxDate)\n            \"\n            [disabled]=\"filterStateDisable\"\n          />\n          <span class=\"filler\"></span>\n          <mat-datepicker\n            #beginDatepicker\n            [startView]=\"calendarView()\"\n            [startAt]=\"beginValue\"\n            (yearSelected)=\"yearSelected($event, beginDatepicker, 'begin')\"\n            (monthSelected)=\"monthSelected($event, beginDatepicker, 'begin')\"\n          >\n          </mat-datepicker>\n        </mat-form-field>\n\n        <div *ngIf=\"calendarType() === 'datetime'\" class=\"time-input\">\n          <mat-form-field class=\"hour-input\" subscriptSizing=\"dynamic\">\n            <mat-label>{{ 'igo.geo.timeFilter.hour' | translate }}</mat-label>\n            <mat-select\n              [formControl]=\"beginHourFormControl\"\n              [attr.disabled]=\"!currentFilter.active\"\n              (selectionChange)=\"changeTemporalProperty(begin.value, 1)\"\n            >\n              <mat-option *ngFor=\"let hour of beginHours\" [value]=\"hour\">{{\n                hour\n              }}</mat-option>\n            </mat-select>\n          </mat-form-field>\n          <mat-form-field class=\"minute-input\" subscriptSizing=\"dynamic\">\n            <mat-label>{{ 'igo.geo.timeFilter.minute' | translate }}</mat-label>\n            <mat-select\n              [formControl]=\"beginMinuteFormControl\"\n              [attr.disabled]=\"!currentFilter.active\"\n              (selectionChange)=\"changeTemporalProperty(begin.value, 1)\"\n            >\n              <mat-option\n                *ngFor=\"let minute of beginMinutes\"\n                [value]=\"minute\"\n                >{{ minute }}</mat-option\n              >\n            </mat-select>\n          </mat-form-field>\n        </div>\n      </div>\n\n      <div *ngIf=\"!restrictedToStep()\" class=\"datetime-input\">\n        <mat-form-field class=\"date-input\" subscriptSizing=\"dynamic\">\n          <mat-datepicker-toggle\n            matSuffix\n            [for]=\"endDatepicker\"\n            [disabled]=\"filterStateDisable\"\n          ></mat-datepicker-toggle>\n          <input\n            #end\n            matInput\n            [matDatepicker]=\"endDatepicker\"\n            [placeholder]=\"'igo.geo.timeFilter.endDate' | translate\"\n            [attr.disabled]=\"!currentFilter.active\"\n            (dateChange)=\"changeTemporalProperty(end.value, 2)\"\n            [matDatepickerFilter]=\"filterEndFunction\"\n            [value]=\"\n              endValue ? endValue : handleDate(datasource.options.maxDate)\n            \"\n            [min]=\"\n              beginValue ? beginValue : handleDate(datasource.options.minDate)\n            \"\n            [max]=\"handleDate(datasource.options.maxDate)\"\n            [disabled]=\"filterStateDisable\"\n          />\n          <span class=\"filler\"></span>\n          <mat-datepicker\n            #endDatepicker\n            [startView]=\"calendarView()\"\n            [startAt]=\"endValue\"\n            (yearSelected)=\"yearSelected($event, endDatepicker, 'end')\"\n            (monthSelected)=\"monthSelected($event, endDatepicker, 'end')\"\n          >\n          </mat-datepicker>\n        </mat-form-field>\n\n        <div *ngIf=\"calendarType() === 'datetime'\" class=\"time-input\">\n          <mat-form-field class=\"hour-input\" subscriptSizing=\"dynamic\">\n            <mat-label>{{ 'igo.geo.timeFilter.hour' | translate }}</mat-label>\n            <mat-select\n              [formControl]=\"endHourFormControl\"\n              [attr.disabled]=\"!currentFilter.active\"\n              (selectionChange)=\"changeTemporalProperty(end.value, 2)\"\n            >\n              <mat-option *ngFor=\"let hour of endHours\" [value]=\"hour\">{{\n                hour\n              }}</mat-option>\n            </mat-select>\n          </mat-form-field>\n          <mat-form-field class=\"minute-input\" subscriptSizing=\"dynamic\">\n            <mat-label>{{ 'igo.geo.timeFilter.minute' | translate }}</mat-label>\n            <mat-select\n              [formControl]=\"endMinuteFormControl\"\n              [attr.disabled]=\"!currentFilter.active\"\n              (selectionChange)=\"changeTemporalProperty(end.value, 2)\"\n            >\n              <mat-option *ngFor=\"let minute of endMinutes\" [value]=\"minute\">{{\n                minute\n              }}</mat-option>\n            </mat-select>\n          </mat-form-field>\n        </div>\n      </div>\n\n      <div class=\"actions-container\">\n        <button\n          class=\"reset-button\"\n          mat-icon-button\n          color=\"primary\"\n          (click)=\"resetFilter()\"\n          [matTooltip]=\"'igo.geo.filter.resetFilters' | translate\"\n          [disabled]=\"filterStateDisable\"\n        >\n          <mat-icon svgIcon=\"{{ resetIcon }}\"></mat-icon>\n        </button>\n        <mat-slide-toggle\n          class=\"toggle-filter-state\"\n          (change)=\"toggleFilterState()\"\n          tooltip-position=\"below\"\n          matTooltipShowDelay=\"500\"\n          [matTooltip]=\"'igo.geo.filter.toggleFilterState' | translate\"\n          [checked]=\"!filterStateDisable\"\n        >\n        </mat-slide-toggle>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [":host ::ng-deep input{text-align:center!important;margin:auto 5px!important}:host .slider-container{text-align:center}:host .datetime-input-container{display:flex;align-items:center;flex-wrap:wrap}:host .datetime-input-container>:not(:last-child){margin-right:8px}:host .datetime-input{display:block}:host .date-input{width:154px}:host .actions-container{display:flex;align-items:center}:host .time-input{margin-top:16px}:host .time-input>:not(:last-child){margin-right:8px}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){:host .time-input{margin-top:4px}}:host .hour-input,:host .minute-input{width:100px}:host .year-input-container{display:flex;width:100%}:host .year-input-container mat-form-field:not(:last-child){margin-right:4px}:host .year-input-hide{width:120px;margin-right:25px;display:none}:host .year-input-only-year{width:120px;margin-right:25px;text-align:left!important}:host ::ng-deep .datepicker-year ::ng-deep .mat-calendar-arrow{display:none}:host ::ng-deep .datepicker-year ::ng-deep .mat-calendar-period-button{pointer-events:none}:host ::ng-deep .datepicker-year ::ng-deep .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover{background-color:#0000001f;border-radius:999px}\n"] }]
+        args: [{ selector: 'igo-ogc-filter-time', template: "<div class=\"datetime-container\">\r\n  <mat-slide-toggle\r\n    *ngIf=\"this.currentFilter.sliderOptions?.enabled\"\r\n    [(ngModel)]=\"sliderMode\"\r\n    (change)=\"modeChange($event)\"\r\n  >\r\n    {{ 'igo.geo.filter.sliderModeTitle' | translate }}\r\n  </mat-slide-toggle>\r\n\r\n  <div class=\"slider-container\" *ngIf=\"sliderMode\">\r\n    <igo-ogc-filter-time-slider\r\n      [begin]=\"beginValue\"\r\n      [max]=\"this.restrictedToStep() ? this.maxDate : this.endValue\"\r\n      [currentFilter]=\"currentFilter\"\r\n      [datasource]=\"datasource\"\r\n      (changeProperty)=\"changePropertyByPass($event)\"\r\n    >\r\n    </igo-ogc-filter-time-slider>\r\n  </div>\r\n\r\n  <div *ngIf=\"!sliderMode\">\r\n    <div class=\"year-input-container\" *ngIf=\"calendarTypeYear\">\r\n      <!-- to emulate a year-picker, 2 input: first input to show user just year and second input hiden and bind \r\n        with the datepicker  -->\r\n      <mat-form-field class=\"year-input\" subscriptSizing=\"dynamic\">\r\n        <mat-label>{{ 'igo.geo.timeFilter.startYear' | translate }}</mat-label>\r\n        <input\r\n          matInput\r\n          class=\"year-input-only-year\"\r\n          value=\"{{ onlyYearBegin }}\"\r\n          (change)=\"yearOnlyInputChange($event, beginDatepicker, 'begin')\"\r\n          [disabled]=\"filterStateDisable\"\r\n        />\r\n        <mat-datepicker-toggle\r\n          matSuffix\r\n          [for]=\"beginDatepicker\"\r\n          [disabled]=\"filterStateDisable\"\r\n        ></mat-datepicker-toggle>\r\n\r\n        <mat-datepicker\r\n          panelClass=\"datepicker-year\"\r\n          #beginDatepicker\r\n          [startView]=\"calendarView()\"\r\n          [startAt]=\"beginValue\"\r\n          (yearSelected)=\"yearSelected($event, beginDatepicker, 'begin')\"\r\n        >\r\n        </mat-datepicker>\r\n\r\n        <input\r\n          #beginYear\r\n          class=\"year-input-hide\"\r\n          matInput\r\n          [matDatepicker]=\"beginDatepicker\"\r\n          enabled=\"false\"\r\n          readonly=\"true\"\r\n          [value]=\"\r\n            beginValue ? beginValue : handleDate(datasource.options.minDate)\r\n          \"\r\n          [min]=\"handleDate(datasource.options.minDate)\"\r\n          [max]=\"\r\n            endValue && !restrictedToStep()\r\n              ? endValue\r\n              : handleDate(datasource.options.maxDate)\r\n          \"\r\n        />\r\n      </mat-form-field>\r\n\r\n      <mat-form-field class=\"year-input\" subscriptSizing=\"dynamic\">\r\n        <mat-label>{{ 'igo.geo.timeFilter.endYear' | translate }}</mat-label>\r\n        <input\r\n          matInput\r\n          class=\"year-input-only-year\"\r\n          value=\"{{ onlyYearEnd }}\"\r\n          (change)=\"yearOnlyInputChange($event, endDatepicker, 'end')\"\r\n          [disabled]=\"filterStateDisable\"\r\n        />\r\n        <mat-datepicker-toggle\r\n          matSuffix\r\n          [for]=\"endDatepicker\"\r\n          [disabled]=\"filterStateDisable\"\r\n        ></mat-datepicker-toggle>\r\n        <mat-datepicker\r\n          panelClass=\"datepicker-year\"\r\n          #endDatepicker\r\n          [startView]=\"calendarView()\"\r\n          [startAt]=\"endValue\"\r\n          (yearSelected)=\"yearSelected($event, endDatepicker, 'end')\"\r\n        >\r\n        </mat-datepicker>\r\n\r\n        <input\r\n          #endYear\r\n          class=\"year-input-hide\"\r\n          matInput\r\n          [matDatepicker]=\"endDatepicker\"\r\n          enabled=\"false\"\r\n          readonly=\"true\"\r\n          [value]=\"endValue ? endValue : handleDate(datasource.options.maxDate)\"\r\n          [min]=\"\r\n            beginValue ? beginValue : handleDate(datasource.options.minDate)\r\n          \"\r\n          [max]=\"handleDate(datasource.options.maxDate)\"\r\n        />\r\n      </mat-form-field>\r\n      <div class=\"actions-container\">\r\n        <button\r\n          class=\"reset-button\"\r\n          mat-icon-button\r\n          color=\"primary\"\r\n          (click)=\"resetFilter()\"\r\n          [matTooltip]=\"'igo.geo.filter.resetFilters' | translate\"\r\n          [disabled]=\"filterStateDisable\"\r\n        >\r\n          <mat-icon svgIcon=\"{{ resetIcon }}\"></mat-icon>\r\n        </button>\r\n        <mat-slide-toggle\r\n          class=\"toggle-filter-state\"\r\n          (change)=\"toggleFilterState()\"\r\n          [matTooltip]=\"'igo.geo.filter.toggleFilterState' | translate\"\r\n          tooltip-position=\"below\"\r\n          matTooltipShowDelay=\"500\"\r\n          [checked]=\"!filterStateDisable\"\r\n        >\r\n        </mat-slide-toggle>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"datetime-input-container\" *ngIf=\"calendarType() !== 'year'\">\r\n      <div class=\"datetime-input\">\r\n        <mat-form-field class=\"date-input\" subscriptSizing=\"dynamic\">\r\n          <mat-datepicker-toggle\r\n            matSuffix\r\n            [for]=\"beginDatepicker\"\r\n            [disabled]=\"filterStateDisable\"\r\n          ></mat-datepicker-toggle>\r\n          <input\r\n            #begin\r\n            matInput\r\n            [matDatepicker]=\"beginDatepicker\"\r\n            [placeholder]=\"'igo.geo.timeFilter.startDate' | translate\"\r\n            [attr.disabled]=\"!currentFilter.active\"\r\n            (dateChange)=\"changeTemporalProperty(begin.value, 1)\"\r\n            [matDatepickerFilter]=\"filterBeginFunction\"\r\n            [value]=\"\r\n              beginValue ? beginValue : handleDate(datasource.options.minDate)\r\n            \"\r\n            [min]=\"handleDate(datasource.options.minDate)\"\r\n            [max]=\"\r\n              endValue && !restrictedToStep()\r\n                ? endValue\r\n                : handleDate(datasource.options.maxDate)\r\n            \"\r\n            [disabled]=\"filterStateDisable\"\r\n          />\r\n          <span class=\"filler\"></span>\r\n          <mat-datepicker\r\n            #beginDatepicker\r\n            [startView]=\"calendarView()\"\r\n            [startAt]=\"beginValue\"\r\n            (yearSelected)=\"yearSelected($event, beginDatepicker, 'begin')\"\r\n            (monthSelected)=\"monthSelected($event, beginDatepicker, 'begin')\"\r\n          >\r\n          </mat-datepicker>\r\n        </mat-form-field>\r\n\r\n        <div *ngIf=\"calendarType() === 'datetime'\" class=\"time-input\">\r\n          <mat-form-field class=\"hour-input\" subscriptSizing=\"dynamic\">\r\n            <mat-label>{{ 'igo.geo.timeFilter.hour' | translate }}</mat-label>\r\n            <mat-select\r\n              [formControl]=\"beginHourFormControl\"\r\n              [attr.disabled]=\"!currentFilter.active\"\r\n              (selectionChange)=\"changeTemporalProperty(begin.value, 1)\"\r\n            >\r\n              <mat-option *ngFor=\"let hour of beginHours\" [value]=\"hour\">{{\r\n                hour\r\n              }}</mat-option>\r\n            </mat-select>\r\n          </mat-form-field>\r\n          <mat-form-field class=\"minute-input\" subscriptSizing=\"dynamic\">\r\n            <mat-label>{{ 'igo.geo.timeFilter.minute' | translate }}</mat-label>\r\n            <mat-select\r\n              [formControl]=\"beginMinuteFormControl\"\r\n              [attr.disabled]=\"!currentFilter.active\"\r\n              (selectionChange)=\"changeTemporalProperty(begin.value, 1)\"\r\n            >\r\n              <mat-option\r\n                *ngFor=\"let minute of beginMinutes\"\r\n                [value]=\"minute\"\r\n                >{{ minute }}</mat-option\r\n              >\r\n            </mat-select>\r\n          </mat-form-field>\r\n        </div>\r\n      </div>\r\n\r\n      <div *ngIf=\"!restrictedToStep()\" class=\"datetime-input\">\r\n        <mat-form-field class=\"date-input\" subscriptSizing=\"dynamic\">\r\n          <mat-datepicker-toggle\r\n            matSuffix\r\n            [for]=\"endDatepicker\"\r\n            [disabled]=\"filterStateDisable\"\r\n          ></mat-datepicker-toggle>\r\n          <input\r\n            #end\r\n            matInput\r\n            [matDatepicker]=\"endDatepicker\"\r\n            [placeholder]=\"'igo.geo.timeFilter.endDate' | translate\"\r\n            [attr.disabled]=\"!currentFilter.active\"\r\n            (dateChange)=\"changeTemporalProperty(end.value, 2)\"\r\n            [matDatepickerFilter]=\"filterEndFunction\"\r\n            [value]=\"\r\n              endValue ? endValue : handleDate(datasource.options.maxDate)\r\n            \"\r\n            [min]=\"\r\n              beginValue ? beginValue : handleDate(datasource.options.minDate)\r\n            \"\r\n            [max]=\"handleDate(datasource.options.maxDate)\"\r\n            [disabled]=\"filterStateDisable\"\r\n          />\r\n          <span class=\"filler\"></span>\r\n          <mat-datepicker\r\n            #endDatepicker\r\n            [startView]=\"calendarView()\"\r\n            [startAt]=\"endValue\"\r\n            (yearSelected)=\"yearSelected($event, endDatepicker, 'end')\"\r\n            (monthSelected)=\"monthSelected($event, endDatepicker, 'end')\"\r\n          >\r\n          </mat-datepicker>\r\n        </mat-form-field>\r\n\r\n        <div *ngIf=\"calendarType() === 'datetime'\" class=\"time-input\">\r\n          <mat-form-field class=\"hour-input\" subscriptSizing=\"dynamic\">\r\n            <mat-label>{{ 'igo.geo.timeFilter.hour' | translate }}</mat-label>\r\n            <mat-select\r\n              [formControl]=\"endHourFormControl\"\r\n              [attr.disabled]=\"!currentFilter.active\"\r\n              (selectionChange)=\"changeTemporalProperty(end.value, 2)\"\r\n            >\r\n              <mat-option *ngFor=\"let hour of endHours\" [value]=\"hour\">{{\r\n                hour\r\n              }}</mat-option>\r\n            </mat-select>\r\n          </mat-form-field>\r\n          <mat-form-field class=\"minute-input\" subscriptSizing=\"dynamic\">\r\n            <mat-label>{{ 'igo.geo.timeFilter.minute' | translate }}</mat-label>\r\n            <mat-select\r\n              [formControl]=\"endMinuteFormControl\"\r\n              [attr.disabled]=\"!currentFilter.active\"\r\n              (selectionChange)=\"changeTemporalProperty(end.value, 2)\"\r\n            >\r\n              <mat-option *ngFor=\"let minute of endMinutes\" [value]=\"minute\">{{\r\n                minute\r\n              }}</mat-option>\r\n            </mat-select>\r\n          </mat-form-field>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"actions-container\">\r\n        <button\r\n          class=\"reset-button\"\r\n          mat-icon-button\r\n          color=\"primary\"\r\n          (click)=\"resetFilter()\"\r\n          [matTooltip]=\"'igo.geo.filter.resetFilters' | translate\"\r\n          [disabled]=\"filterStateDisable\"\r\n        >\r\n          <mat-icon svgIcon=\"{{ resetIcon }}\"></mat-icon>\r\n        </button>\r\n        <mat-slide-toggle\r\n          class=\"toggle-filter-state\"\r\n          (change)=\"toggleFilterState()\"\r\n          tooltip-position=\"below\"\r\n          matTooltipShowDelay=\"500\"\r\n          [matTooltip]=\"'igo.geo.filter.toggleFilterState' | translate\"\r\n          [checked]=\"!filterStateDisable\"\r\n        >\r\n        </mat-slide-toggle>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host ::ng-deep input{text-align:center!important;margin:auto 5px!important}:host .slider-container{text-align:center}:host .datetime-input-container{display:flex;align-items:center;flex-wrap:wrap}:host .datetime-input-container>:not(:last-child){margin-right:8px}:host .datetime-input{display:block}:host .date-input{width:154px}:host .actions-container{display:flex;align-items:center}:host .time-input{margin-top:16px}:host .time-input>:not(:last-child){margin-right:8px}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){:host .time-input{margin-top:4px}}:host .hour-input,:host .minute-input{width:100px}:host .year-input-container{display:flex;width:100%}:host .year-input-container mat-form-field:not(:last-child){margin-right:4px}:host .year-input-hide{width:120px;margin-right:25px;display:none}:host .year-input-only-year{width:120px;margin-right:25px;text-align:left!important}:host ::ng-deep .datepicker-year ::ng-deep .mat-calendar-arrow{display:none}:host ::ng-deep .datepicker-year ::ng-deep .mat-calendar-period-button{pointer-events:none}:host ::ng-deep .datepicker-year ::ng-deep .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover{background-color:#0000001f;border-radius:999px}\n"] }]
     }], function () { return [{ type: OGCFilterTimeService }]; }, { datasource: [{
             type: Input
         }], currentFilter: [{
@@ -33762,7 +33762,7 @@ class OgcFilterableFormComponent {
                         provide: MAT_AUTOCOMPLETE_DEFAULT_OPTIONS,
                         useValue: { overlayPanelClass: 'igo-overlay-panel-width' }
                     }
-                ], template: "<igo-ogc-filter-selection\n  *ngIf=\"!advancedOgcFilters\"\n  igoListItem\n  [refreshFilters]=\"refreshFunc\"\n  [datasource]=\"datasource\"\n  [map]=\"map\"\n  [currentFilter]=\"currentFilter\"\n>\n</igo-ogc-filter-selection>\n\n<ng-template\n  *ngIf=\"advancedOgcFilters && datasource.options.ogcFilters.editable\"\n  ngFor\n  let-currentFilter\n  [ngForOf]=\"datasource.options.ogcFilters.interfaceOgcFilters\"\n>\n  <igo-ogc-filter-form\n    [currentFilter]=\"currentFilter\"\n    [refreshFilters]=\"refreshFunc\"\n    [datasource]=\"datasource\"\n    [map]=\"map\"\n  >\n  </igo-ogc-filter-form>\n</ng-template>\n", styles: ["::ng-deep .igo-overlay-panel-width{min-width:-moz-fit-content;min-width:fit-content}\n"] }]
+                ], template: "<igo-ogc-filter-selection\r\n  *ngIf=\"!advancedOgcFilters\"\r\n  igoListItem\r\n  [refreshFilters]=\"refreshFunc\"\r\n  [datasource]=\"datasource\"\r\n  [map]=\"map\"\r\n  [currentFilter]=\"currentFilter\"\r\n>\r\n</igo-ogc-filter-selection>\r\n\r\n<ng-template\r\n  *ngIf=\"advancedOgcFilters && datasource.options.ogcFilters.editable\"\r\n  ngFor\r\n  let-currentFilter\r\n  [ngForOf]=\"datasource.options.ogcFilters.interfaceOgcFilters\"\r\n>\r\n  <igo-ogc-filter-form\r\n    [currentFilter]=\"currentFilter\"\r\n    [refreshFilters]=\"refreshFunc\"\r\n    [datasource]=\"datasource\"\r\n    [map]=\"map\"\r\n  >\r\n  </igo-ogc-filter-form>\r\n</ng-template>\r\n", styles: ["::ng-deep .igo-overlay-panel-width{min-width:-moz-fit-content;min-width:fit-content}\n"] }]
     }], function () { return []; }, { datasource: [{
             type: Input
         }], map: [{
@@ -34069,11 +34069,11 @@ class OgcFilterableItemComponent {
             i0.ɵɵproperty("datasource", ctx.datasource)("map", ctx.map)("refreshFilters", ctx.refreshFunc);
             i0.ɵɵadvance(1);
             i0.ɵɵproperty("ngIf", ctx.hasSelector && ctx.filtersAreEditable);
-        } }, styles: ["[_nghost-%COMP%]{overflow:hidden}[_nghost-%COMP%]   .advancedOgcFilters[_ngcontent-%COMP%]{text-align:center;width:100%;display:inline-block}[_nghost-%COMP%]   .mat-mdc-list-item[_ngcontent-%COMP%]{height:auto}[_nghost-%COMP%]   .igo-layer-legend-container[_ngcontent-%COMP%]{padding-left:1.125em;width:calc(100% - 18px)}[_nghost-%COMP%]   mat-icon.disabled[_ngcontent-%COMP%]{color:#00000061}[_nghost-%COMP%]   .separate-item[_ngcontent-%COMP%]{border-bottom:4px solid darkgrey}"] });
+        } }, styles: ["[_nghost-%COMP%]{overflow:hidden}[_nghost-%COMP%]   .advancedOgcFilters[_ngcontent-%COMP%]{text-align:center;width:100%;display:inline-block}[_nghost-%COMP%]   .mat-mdc-list-item[_ngcontent-%COMP%]{height:auto}[_nghost-%COMP%]   .igo-layer-legend-container[_ngcontent-%COMP%]{padding-left:1.125em;width:calc(100% - 18px)}[_nghost-%COMP%]   mat-icon.disabled[_ngcontent-%COMP%]{color:#00000061}[_nghost-%COMP%]   .separate-item[_ngcontent-%COMP%]{border-bottom:4px solid darkgrey}[_nghost-%COMP%]     .mdc-list-item__start, [_nghost-%COMP%]     .mdc-list-item__end, [_nghost-%COMP%]     .mdc-list-item__content{pointer-events:auto}"] });
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(OgcFilterableItemComponent, [{
         type: Component,
-        args: [{ selector: 'igo-ogc-filterable-item', template: "<div [ngClass]=\"{ 'separate-item': header === true }\">\n  <mat-list-item>\n    <mat-icon\n      *ngIf=\"header\"\n      class=\"igo-chevron\"\n      matListItemIcon\n      igoCollapse\n      [target]=\"ogcFilters\"\n      [collapsed]=\"filtersCollapsed\"\n      (click)=\"toggleFiltersCollapsed()\"\n      svgIcon=\"chevron-up\"\n    >\n    </mat-icon>\n    <span\n      *ngIf=\"header\"\n      matListItemTitle\n      [ngStyle]=\"{ cursor: filtersCollapsed ? 'default' : 'pointer' }\"\n      [matTooltip]=\"layer.title\"\n      matTooltipShowDelay=\"500\"\n      (click)=\"toggleLegendOnClick()\"\n    >\n      {{ layer.title }}\n    </span>\n    <div matListItemMeta>\n      <button\n        *ngIf=\"isAdvancedOgcFilters() && filtersAreEditable\"\n        [disabled]=\"addFilterDisabled()\"\n        mat-icon-button\n        tooltip-position=\"below\"\n        matTooltipShowDelay=\"500\"\n        [matTooltip]=\"'igo.geo.filter.addFilter' | translate\"\n        [color]=\"color\"\n        (click)=\"addFilterToSequence()\"\n      >\n        <mat-icon svgIcon=\"plus\"></mat-icon>\n      </button>\n      <button\n        *ngIf=\"header\"\n        mat-icon-button\n        [color]=\"layer.visible ? 'primary' : 'default'\"\n        collapsibleButton\n        tooltip-position=\"below\"\n        matTooltipShowDelay=\"500\"\n        [matTooltip]=\"\n          layer.visible\n            ? ('igo.geo.layer.hideLayer' | translate)\n            : ('igo.geo.layer.showLayer' | translate)\n        \"\n        (click)=\"layer.visible = !layer.visible\"\n      >\n        <mat-icon\n          [ngClass]=\"{ disabled: (inResolutionRange$ | async) === false }\"\n          [svgIcon]=\"layer.visible ? 'eye' : 'eye-off'\"\n        >\n        </mat-icon>\n      </button>\n    </div>\n  </mat-list-item>\n\n  <div #ogcFilters>\n    <div *ngIf=\"header\" #legend class=\"igo-layer-legend-container\">\n      <igo-layer-legend *ngIf=\"showLegend$ | async\" [layer]=\"layer\">\n      </igo-layer-legend>\n    </div>\n    <igo-ogc-filterable-form\n      [datasource]=\"datasource\"\n      [map]=\"map\"\n      [refreshFilters]=\"refreshFunc\"\n    >\n    </igo-ogc-filterable-form>\n\n    <section\n      *ngIf=\"hasSelector && filtersAreEditable\"\n      class=\"mat-typography advancedOgcFilters\"\n    >\n      <mat-divider></mat-divider>\n      <mat-checkbox\n        (change)=\"changeOgcFilterType($event)\"\n        [(ngModel)]=\"datasource.options.ogcFilters.advancedOgcFilters\"\n      >\n        {{ 'igo.geo.filter.advancedOgcFilters' | translate }}\n      </mat-checkbox>\n    </section>\n  </div>\n</div>\n", styles: [":host{overflow:hidden}:host .advancedOgcFilters{text-align:center;width:100%;display:inline-block}:host .mat-mdc-list-item{height:auto}:host .igo-layer-legend-container{padding-left:1.125em;width:calc(100% - 18px)}:host mat-icon.disabled{color:#00000061}:host .separate-item{border-bottom:4px solid darkgrey}\n"] }]
+        args: [{ selector: 'igo-ogc-filterable-item', template: "<div [ngClass]=\"{ 'separate-item': header === true }\">\r\n  <mat-list-item>\r\n    <mat-icon\r\n      *ngIf=\"header\"\r\n      class=\"igo-chevron\"\r\n      matListItemIcon\r\n      igoCollapse\r\n      [target]=\"ogcFilters\"\r\n      [collapsed]=\"filtersCollapsed\"\r\n      (click)=\"toggleFiltersCollapsed()\"\r\n      svgIcon=\"chevron-up\"\r\n    >\r\n    </mat-icon>\r\n    <span\r\n      *ngIf=\"header\"\r\n      matListItemTitle\r\n      [ngStyle]=\"{ cursor: filtersCollapsed ? 'default' : 'pointer' }\"\r\n      [matTooltip]=\"layer.title\"\r\n      matTooltipShowDelay=\"500\"\r\n      (click)=\"toggleLegendOnClick()\"\r\n    >\r\n      {{ layer.title }}\r\n    </span>\r\n    <div matListItemMeta>\r\n      <button\r\n        *ngIf=\"isAdvancedOgcFilters() && filtersAreEditable\"\r\n        [disabled]=\"addFilterDisabled()\"\r\n        mat-icon-button\r\n        tooltip-position=\"below\"\r\n        matTooltipShowDelay=\"500\"\r\n        [matTooltip]=\"'igo.geo.filter.addFilter' | translate\"\r\n        [color]=\"color\"\r\n        (click)=\"addFilterToSequence()\"\r\n      >\r\n        <mat-icon svgIcon=\"plus\"></mat-icon>\r\n      </button>\r\n      <button\r\n        *ngIf=\"header\"\r\n        mat-icon-button\r\n        [color]=\"layer.visible ? 'primary' : 'default'\"\r\n        collapsibleButton\r\n        tooltip-position=\"below\"\r\n        matTooltipShowDelay=\"500\"\r\n        [matTooltip]=\"\r\n          layer.visible\r\n            ? ('igo.geo.layer.hideLayer' | translate)\r\n            : ('igo.geo.layer.showLayer' | translate)\r\n        \"\r\n        (click)=\"layer.visible = !layer.visible\"\r\n      >\r\n        <mat-icon\r\n          [ngClass]=\"{ disabled: (inResolutionRange$ | async) === false }\"\r\n          [svgIcon]=\"layer.visible ? 'eye' : 'eye-off'\"\r\n        >\r\n        </mat-icon>\r\n      </button>\r\n    </div>\r\n  </mat-list-item>\r\n\r\n  <div #ogcFilters>\r\n    <div *ngIf=\"header\" #legend class=\"igo-layer-legend-container\">\r\n      <igo-layer-legend *ngIf=\"showLegend$ | async\" [layer]=\"layer\">\r\n      </igo-layer-legend>\r\n    </div>\r\n    <igo-ogc-filterable-form\r\n      [datasource]=\"datasource\"\r\n      [map]=\"map\"\r\n      [refreshFilters]=\"refreshFunc\"\r\n    >\r\n    </igo-ogc-filterable-form>\r\n\r\n    <section\r\n      *ngIf=\"hasSelector && filtersAreEditable\"\r\n      class=\"mat-typography advancedOgcFilters\"\r\n    >\r\n      <mat-divider></mat-divider>\r\n      <mat-checkbox\r\n        (change)=\"changeOgcFilterType($event)\"\r\n        [(ngModel)]=\"datasource.options.ogcFilters.advancedOgcFilters\"\r\n      >\r\n        {{ 'igo.geo.filter.advancedOgcFilters' | translate }}\r\n      </mat-checkbox>\r\n    </section>\r\n  </div>\r\n</div>\r\n", styles: [":host{overflow:hidden}:host .advancedOgcFilters{text-align:center;width:100%;display:inline-block}:host .mat-mdc-list-item{height:auto}:host .igo-layer-legend-container{padding-left:1.125em;width:calc(100% - 18px)}:host mat-icon.disabled{color:#00000061}:host .separate-item{border-bottom:4px solid darkgrey}:host ::ng-deep .mdc-list-item__start,:host ::ng-deep .mdc-list-item__end,:host ::ng-deep .mdc-list-item__content{pointer-events:auto}\n"] }]
     }], function () { return [{ type: OGCFilterService }]; }, { layer: [{
             type: Input
         }], map: [{
@@ -34119,7 +34119,7 @@ class OgcFilterableListComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(OgcFilterableListComponent, [{
         type: Component,
-        args: [{ selector: 'igo-ogc-filterable-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<igo-list [navigation]=\"false\" [selection]=\"false\">\n  <div\n    id=\"no-layer-message\"\n    *ngIf=\"(layers | filterableDataSource: 'ogc').length === 0\"\n  >\n    {{ 'igo.geo.filter.noFilterableLayer' | translate }}\n  </div>\n  <ng-template ngFor let-layer [ngForOf]=\"layers | filterableDataSource: 'ogc'\">\n    <igo-ogc-filterable-item\n      igoListItem\n      [header]=\"true\"\n      [layer]=\"layer\"\n      [map]=\"layer.map\"\n    ></igo-ogc-filterable-item>\n  </ng-template>\n</igo-list>\n", styles: ["#no-layer-message{padding:7%;text-align:center;font-size:medium;font-weight:700}\n"] }]
+        args: [{ selector: 'igo-ogc-filterable-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<igo-list [navigation]=\"false\" [selection]=\"false\">\r\n  <div\r\n    id=\"no-layer-message\"\r\n    *ngIf=\"(layers | filterableDataSource: 'ogc').length === 0\"\r\n  >\r\n    {{ 'igo.geo.filter.noFilterableLayer' | translate }}\r\n  </div>\r\n  <ng-template ngFor let-layer [ngForOf]=\"layers | filterableDataSource: 'ogc'\">\r\n    <igo-ogc-filterable-item\r\n      igoListItem\r\n      [header]=\"true\"\r\n      [layer]=\"layer\"\r\n      [map]=\"layer.map\"\r\n    ></igo-ogc-filterable-item>\r\n  </ng-template>\r\n</igo-list>\r\n", styles: ["#no-layer-message{padding:7%;text-align:center;font-size:medium;font-weight:700}\n"] }]
     }], function () { return []; }, { layers: [{
             type: Input
         }], map: [{
@@ -35638,7 +35638,7 @@ class SpatialFilterTypeComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SpatialFilterTypeComponent, [{
         type: Component,
-        args: [{ selector: 'igo-spatial-filter-type', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-tab-group\n  [selectedIndex]=\"selectedTypeIndex.value\"\n  (selectedIndexChange)=\"selectedTypeIndex.setValue($event)\"\n  (selectedTabChange)=\"onTypeChange($event)\"\n>\n  <mat-tab [label]=\"'igo.geo.spatialFilter.predefined' | translate\">\n    <mat-form-field>\n      <mat-label>{{\n        'igo.geo.spatialFilter.searchLabel' | translate\n      }}</mat-label>\n      <mat-select\n        (selectionChange)=\"onSelectionChange()\"\n        [(value)]=\"selectedQueryType\"\n      >\n        <mat-option *ngFor=\"let queryType of queryType\" [value]=\"queryType\">\n          {{ 'igo.geo.terrapi.' + queryType | translate }}\n        </mat-option>\n      </mat-select>\n    </mat-form-field>\n    <igo-spatial-filter-list\n      [store]=\"store\"\n      [queryType]=\"selectedQueryType\"\n      [zone]=\"zone\"\n      [layers]=\"layers\"\n      (zoneChange)=\"zoneChange.emit($event)\"\n      (zoneWithBufferChange)=\"zoneWithBufferChange.emit($event)\"\n      (bufferChange)=\"bufferChange.emit($event)\"\n      (measureUnitChange)=\"measureUnitChange.emit($event)\"\n    >\n    </igo-spatial-filter-list>\n  </mat-tab>\n\n  <mat-tab [label]=\"'igo.geo.spatialFilter.draw' | translate\">\n    <div class=\"spatial-type-toggle\">\n      <mat-button-toggle-group\n        [value]=\"activeDrawType\"\n        (change)=\"onDrawTypeChange($event.value)\"\n      >\n        <mat-button-toggle\n          [value]=\"spatialType.Polygon\"\n          [matTooltip]=\"'igo.geo.spatialFilter.drawPolygon' | translate\"\n        >\n          <mat-icon svgIcon=\"pentagon-outline\"></mat-icon>\n        </mat-button-toggle>\n        <mat-button-toggle\n          [value]=\"spatialType.Point\"\n          [matTooltip]=\"'igo.geo.spatialFilter.drawCircle' | translate\"\n        >\n          <mat-icon svgIcon=\"record-circle-outline\"></mat-icon>\n        </mat-button-toggle>\n      </mat-button-toggle-group>\n    </div>\n  </mat-tab>\n</mat-tab-group>\n", styles: [":host .mat-mdc-form-field{width:100%}:host .mat-mdc-tab-group ::ng-deep .mat-mdc-tab-body-content{overflow:hidden}:host .mat-mdc-tab-group ::ng-deep .mat-mdc-tab-label{padding:10px}:host .mat-mdc-tab-group ::ng-deep .mat-mdc-tab-body-wrapper{margin-top:5px}:host .spatial-type-toggle{padding:10px;text-align:center}:host .spatial-type-toggle mat-button-toggle-group{width:50%}:host .spatial-type-toggle mat-button-toggle-group mat-button-toggle{width:50%}\n"] }]
+        args: [{ selector: 'igo-spatial-filter-type', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-tab-group\r\n  [selectedIndex]=\"selectedTypeIndex.value\"\r\n  (selectedIndexChange)=\"selectedTypeIndex.setValue($event)\"\r\n  (selectedTabChange)=\"onTypeChange($event)\"\r\n>\r\n  <mat-tab [label]=\"'igo.geo.spatialFilter.predefined' | translate\">\r\n    <mat-form-field>\r\n      <mat-label>{{\r\n        'igo.geo.spatialFilter.searchLabel' | translate\r\n      }}</mat-label>\r\n      <mat-select\r\n        (selectionChange)=\"onSelectionChange()\"\r\n        [(value)]=\"selectedQueryType\"\r\n      >\r\n        <mat-option *ngFor=\"let queryType of queryType\" [value]=\"queryType\">\r\n          {{ 'igo.geo.terrapi.' + queryType | translate }}\r\n        </mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <igo-spatial-filter-list\r\n      [store]=\"store\"\r\n      [queryType]=\"selectedQueryType\"\r\n      [zone]=\"zone\"\r\n      [layers]=\"layers\"\r\n      (zoneChange)=\"zoneChange.emit($event)\"\r\n      (zoneWithBufferChange)=\"zoneWithBufferChange.emit($event)\"\r\n      (bufferChange)=\"bufferChange.emit($event)\"\r\n      (measureUnitChange)=\"measureUnitChange.emit($event)\"\r\n    >\r\n    </igo-spatial-filter-list>\r\n  </mat-tab>\r\n\r\n  <mat-tab [label]=\"'igo.geo.spatialFilter.draw' | translate\">\r\n    <div class=\"spatial-type-toggle\">\r\n      <mat-button-toggle-group\r\n        [value]=\"activeDrawType\"\r\n        (change)=\"onDrawTypeChange($event.value)\"\r\n      >\r\n        <mat-button-toggle\r\n          [value]=\"spatialType.Polygon\"\r\n          [matTooltip]=\"'igo.geo.spatialFilter.drawPolygon' | translate\"\r\n        >\r\n          <mat-icon svgIcon=\"pentagon-outline\"></mat-icon>\r\n        </mat-button-toggle>\r\n        <mat-button-toggle\r\n          [value]=\"spatialType.Point\"\r\n          [matTooltip]=\"'igo.geo.spatialFilter.drawCircle' | translate\"\r\n        >\r\n          <mat-icon svgIcon=\"record-circle-outline\"></mat-icon>\r\n        </mat-button-toggle>\r\n      </mat-button-toggle-group>\r\n    </div>\r\n  </mat-tab>\r\n</mat-tab-group>\r\n", styles: [":host .mat-mdc-form-field{width:100%}:host .mat-mdc-tab-group ::ng-deep .mat-mdc-tab-body-content{overflow:hidden}:host .mat-mdc-tab-group ::ng-deep .mat-mdc-tab-label{padding:10px}:host .mat-mdc-tab-group ::ng-deep .mat-mdc-tab-body-wrapper{margin-top:5px}:host .spatial-type-toggle{padding:10px;text-align:center}:host .spatial-type-toggle mat-button-toggle-group{width:50%}:host .spatial-type-toggle mat-button-toggle-group mat-button-toggle{width:50%}\n"] }]
     }], function () { return []; }, { store: [{
             type: Input
         }], selectedQueryType: [{
@@ -35728,7 +35728,7 @@ class TimeFilterButtonComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TimeFilterButtonComponent, [{
         type: Component,
-        args: [{ selector: 'igo-time-filter-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  *ngIf=\"header && options.timeFilterable && options.timeFilter\"\n  mat-icon-button\n  collapsibleButton\n  tooltip-position=\"below\"\n  matTooltipShowDelay=\"500\"\n  [matTooltip]=\"'igo.geo.filter.filterBy' | translate\"\n  [color]=\"color\"\n>\n  <mat-icon\n    aria-hidden=\"false\"\n    [matBadge]=\"badge\"\n    matBadgeColor=\"warn\"\n    matBadgeSize=\"medium\"\n    svgIcon=\"history\"\n  ></mat-icon>\n</button>\n\n<div\n  #ogcFilter\n  class=\"igo-layer-actions-container\"\n  *ngIf=\"header && options.timeFilterable && options.timeFilter\"\n>\n  <igo-time-filter-item\n    *ngIf=\"timeFilterCollapse && options.timeFilter\"\n    igoListItem\n    [header]=\"false\"\n    [layer]=\"layer\"\n  >\n  </igo-time-filter-item>\n</div>\n" }]
+        args: [{ selector: 'igo-time-filter-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\r\n  *ngIf=\"header && options.timeFilterable && options.timeFilter\"\r\n  mat-icon-button\r\n  collapsibleButton\r\n  tooltip-position=\"below\"\r\n  matTooltipShowDelay=\"500\"\r\n  [matTooltip]=\"'igo.geo.filter.filterBy' | translate\"\r\n  [color]=\"color\"\r\n>\r\n  <mat-icon\r\n    aria-hidden=\"false\"\r\n    [matBadge]=\"badge\"\r\n    matBadgeColor=\"warn\"\r\n    matBadgeSize=\"medium\"\r\n    svgIcon=\"history\"\r\n  ></mat-icon>\r\n</button>\r\n\r\n<div\r\n  #ogcFilter\r\n  class=\"igo-layer-actions-container\"\r\n  *ngIf=\"header && options.timeFilterable && options.timeFilter\"\r\n>\r\n  <igo-time-filter-item\r\n    *ngIf=\"timeFilterCollapse && options.timeFilter\"\r\n    igoListItem\r\n    [header]=\"false\"\r\n    [layer]=\"layer\"\r\n  >\r\n  </igo-time-filter-item>\r\n</div>\r\n" }]
     }], function () { return []; }, { layer: [{
             type: Input
         }], map: [{
@@ -36458,7 +36458,7 @@ class TimeFilterFormComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TimeFilterFormComponent, [{
         type: Component,
-        args: [{ selector: 'igo-time-filter-form', template: "<div *ngIf=\"style === 'calendar' && type !== 'year'\">\n  <div *ngIf=\"!isRange\" class=\"igo-col igo-col-100 igo-col-100-m\">\n    <mat-form-field>\n      <mat-datetimepicker-toggle\n        class=\"time-filter-mat-datetimepicker-toggle\"\n        [for]=\"datetimePicker\"\n        matSuffix\n      ></mat-datetimepicker-toggle>\n      <mat-datetimepicker\n        #datetimePicker\n        type=\"{{ type }}\"\n        openOnFocus=\"true\"\n        timeInterval=\"5\"\n      ></mat-datetimepicker>\n      <input\n        matInput\n        autocomplete=\"false\"\n        placeholder=\"{{ 'igo.geo.timeFilter.date' | translate }}\"\n        [matDatetimepicker]=\"datetimePicker\"\n        [(ngModel)]=\"date\"\n        [min]=\"min\"\n        [max]=\"max\"\n        readonly=\"readonly\"\n        (dateChange)=\"handleDateChange($event)\"\n      />\n    </mat-form-field>\n  </div>\n\n  <div *ngIf=\"isRange\">\n    <div class=\"igo-col igo-col-100\">\n      <mat-form-field>\n        <mat-datetimepicker-toggle\n          class=\"time-filter-mat-datetimepicker-toggle\"\n          [for]=\"minDatetimePicker\"\n          matSuffix\n        ></mat-datetimepicker-toggle>\n        <mat-datetimepicker\n          #minDatetimePicker\n          type=\"{{ type }}\"\n          openOnFocus=\"true\"\n          timeInterval=\"5\"\n        ></mat-datetimepicker>\n        <input\n          matInput\n          autocomplete=\"false\"\n          placeholder=\"{{ 'igo.geo.timeFilter.startDate' | translate }}\"\n          [matDatetimepicker]=\"minDatetimePicker\"\n          [(ngModel)]=\"startDate\"\n          [min]=\"min\"\n          [max]=\"getRangeMaxDate()\"\n          readonly=\"readonly\"\n          (input)=\"(startDate)\"\n          (dateChange)=\"handleDateChange($event)\"\n        />\n      </mat-form-field>\n    </div>\n\n    <div class=\"igo-col igo-col-100\">\n      <mat-form-field>\n        <mat-datetimepicker-toggle\n          class=\"time-filter-mat-datetimepicker-toggle\"\n          [for]=\"maxDatetimePicker\"\n          matSuffix\n        ></mat-datetimepicker-toggle>\n        <mat-datetimepicker\n          #maxDatetimePicker\n          type=\"{{ type }}\"\n          openOnFocus=\"true\"\n          timeInterval=\"5\"\n        ></mat-datetimepicker>\n        <input\n          matInput\n          autocomplete=\"false\"\n          placeholder=\"{{ 'igo.geo.timeFilter.endDate' | translate }}\"\n          [matDatetimepicker]=\"maxDatetimePicker\"\n          [(ngModel)]=\"endDate\"\n          [min]=\"getRangeMinDate()\"\n          [max]=\"max\"\n          readonly=\"readonly\"\n          (dateChange)=\"handleDateChange($event)\"\n        />\n      </mat-form-field>\n    </div>\n  </div>\n</div>\n\n<div *ngIf=\"style === 'calendar' && type === 'year'\">\n  <div *ngIf=\"!isRange\" class=\"igo-col igo-col-100 igo-col-100-m\">\n    <mat-form-field>\n      <mat-select\n        placeholder=\"{{ 'igo.geo.timeFilter.date' | translate }}\"\n        [(ngModel)]=\"year\"\n        (selectionChange)=\"handleYearChange($event)\"\n      >\n        <mat-option [value]=\"year\" *ngFor=\"let year of listYears\">{{\n          year\n        }}</mat-option>\n      </mat-select>\n    </mat-form-field>\n  </div>\n\n  <div *ngIf=\"isRange\">\n    <div class=\"igo-col igo-col-100\">\n      <mat-form-field>\n        <mat-select\n          placeholder=\"{{ 'igo.geo.timeFilter.startDate' | translate }}\"\n          [(ngModel)]=\"startYear\"\n          (selectionChange)=\"handleYearChange($event)\"\n        >\n          <mat-option\n            [value]=\"startYear\"\n            *ngFor=\"let startYear of startListYears\"\n            >{{ startYear }}</mat-option\n          >\n        </mat-select>\n      </mat-form-field>\n    </div>\n\n    <div class=\"igo-col igo-col-100\">\n      <mat-form-field>\n        <mat-select\n          placeholder=\"{{ 'igo.geo.timeFilter.endDate' | translate }}\"\n          [(ngModel)]=\"endYear\"\n          (selectionChange)=\"handleYearChange($event)\"\n        >\n          <mat-option [value]=\"endYear\" *ngFor=\"let endYear of endListYears\">{{\n            endYear\n          }}</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </div>\n  </div>\n</div>\n\n<br />\n<div\n  *ngIf=\"!isRange && style === 'slider' && type === 'year'\"\n  class=\"igo-col igo-col-100 igo-col-100-m mat-typography\"\n>\n  <span>{{ startYear }}</span>\n  <!-- TODO: The 'tickInterval' property no longer exists -->\n  <mat-slider\n    id=\"time-slider\"\n    step=\"{{ step }}\"\n    [min]=\"startYear\"\n    [max]=\"endYear\"\n    [color]=\"color\"\n    thumbLabel\n    [disabled]=\"!options.enabled || !layer.visible\"\n    #ngSlider\n    ><input\n      matSliderThumb\n      [value]=\"handleSliderValue()\"\n      (input)=\"\n        handleSliderYearChange({\n          source: ngSliderThumb,\n          parent: ngSlider,\n          value: ngSliderThumb.value\n        })\n      \"\n      #ngSliderThumb=\"matSliderThumb\"\n      (change)=\"\n        handleSliderYearChange({\n          source: ngSliderThumb,\n          parent: ngSlider,\n          value: ngSliderThumb.value\n        })\n      \"\n    />\n  </mat-slider>\n  <span>{{ endYear }}</span>\n  <p *ngIf=\"options.enabled\" class=\"date-below\">{{ year }}</p>\n  <div #actions class=\"igo-layer-actions-container\">\n    <mat-slide-toggle\n      (change)=\"toggleFilterState()\"\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"'igo.geo.filter.toggleFilterState' | translate\"\n      [color]=\"color\"\n      [checked]=\"options.enabled\"\n      [disabled]=\"!layer.visible\"\n    >\n    </mat-slide-toggle>\n    <button\n      [disabled]=\"!options.enabled || !layer.visible\"\n      mat-icon-button\n      color=\"primary\"\n      (click)=\"playYear($event)\"\n    >\n      <mat-icon svgIcon=\"{{ playIcon }}\"></mat-icon>\n    </button>\n    <button\n      [disabled]=\"!options.enabled || !layer.visible\"\n      mat-icon-button\n      color=\"primary\"\n      (click)=\"resetFilter($event)\"\n    >\n      <mat-icon svgIcon=\"{{ resetIcon }}\"></mat-icon>\n    </button>\n  </div>\n</div>\n\n<div\n  *ngIf=\"style === 'slider' && type !== 'year'\"\n  class=\"igo-col igo-col-100 igo-col-100-m\"\n>\n  <!-- TODO: The 'tickInterval' property no longer exists -->\n  <mat-slider\n    id=\"time-slider\"\n    step=\"{{ step }}\"\n    [min]=\"dateToNumber(min)\"\n    [max]=\"dateToNumber(max)\"\n    thumbLabel\n    (selectionChange)=\"handleSliderDateChange($event)\"\n    #ngSlider\n    ><input\n      matSliderThumb\n      [value]=\"handleSliderValue()\"\n      (input)=\"\n        handleSliderDateChange({\n          source: ngSliderThumb,\n          parent: ngSlider,\n          value: ngSliderThumb.value\n        })\n      \"\n      #ngSliderThumb=\"matSliderThumb\"\n    />\n  </mat-slider>\n  <p class=\"date-below\">{{ handleSliderTooltip() }}</p>\n  <button mat-icon-button color=\"primary\" (click)=\"playFilter($event)\">\n    <mat-icon svgIcon=\"{{ playIcon }}\"></mat-icon>\n  </button>\n</div>\n", styles: [":host .igo-layer-filters-container{padding-left:5px}:host #time-slider{width:70%}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){:host #time-slider{width:60%}}:host .date-below{margin:0}:host .igo-layer-actions-container{display:flex;align-items:center;justify-content:center}\n"] }]
+        args: [{ selector: 'igo-time-filter-form', template: "<div *ngIf=\"style === 'calendar' && type !== 'year'\">\r\n  <div *ngIf=\"!isRange\" class=\"igo-col igo-col-100 igo-col-100-m\">\r\n    <mat-form-field>\r\n      <mat-datetimepicker-toggle\r\n        class=\"time-filter-mat-datetimepicker-toggle\"\r\n        [for]=\"datetimePicker\"\r\n        matSuffix\r\n      ></mat-datetimepicker-toggle>\r\n      <mat-datetimepicker\r\n        #datetimePicker\r\n        type=\"{{ type }}\"\r\n        openOnFocus=\"true\"\r\n        timeInterval=\"5\"\r\n      ></mat-datetimepicker>\r\n      <input\r\n        matInput\r\n        autocomplete=\"false\"\r\n        placeholder=\"{{ 'igo.geo.timeFilter.date' | translate }}\"\r\n        [matDatetimepicker]=\"datetimePicker\"\r\n        [(ngModel)]=\"date\"\r\n        [min]=\"min\"\r\n        [max]=\"max\"\r\n        readonly=\"readonly\"\r\n        (dateChange)=\"handleDateChange($event)\"\r\n      />\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <div *ngIf=\"isRange\">\r\n    <div class=\"igo-col igo-col-100\">\r\n      <mat-form-field>\r\n        <mat-datetimepicker-toggle\r\n          class=\"time-filter-mat-datetimepicker-toggle\"\r\n          [for]=\"minDatetimePicker\"\r\n          matSuffix\r\n        ></mat-datetimepicker-toggle>\r\n        <mat-datetimepicker\r\n          #minDatetimePicker\r\n          type=\"{{ type }}\"\r\n          openOnFocus=\"true\"\r\n          timeInterval=\"5\"\r\n        ></mat-datetimepicker>\r\n        <input\r\n          matInput\r\n          autocomplete=\"false\"\r\n          placeholder=\"{{ 'igo.geo.timeFilter.startDate' | translate }}\"\r\n          [matDatetimepicker]=\"minDatetimePicker\"\r\n          [(ngModel)]=\"startDate\"\r\n          [min]=\"min\"\r\n          [max]=\"getRangeMaxDate()\"\r\n          readonly=\"readonly\"\r\n          (input)=\"(startDate)\"\r\n          (dateChange)=\"handleDateChange($event)\"\r\n        />\r\n      </mat-form-field>\r\n    </div>\r\n\r\n    <div class=\"igo-col igo-col-100\">\r\n      <mat-form-field>\r\n        <mat-datetimepicker-toggle\r\n          class=\"time-filter-mat-datetimepicker-toggle\"\r\n          [for]=\"maxDatetimePicker\"\r\n          matSuffix\r\n        ></mat-datetimepicker-toggle>\r\n        <mat-datetimepicker\r\n          #maxDatetimePicker\r\n          type=\"{{ type }}\"\r\n          openOnFocus=\"true\"\r\n          timeInterval=\"5\"\r\n        ></mat-datetimepicker>\r\n        <input\r\n          matInput\r\n          autocomplete=\"false\"\r\n          placeholder=\"{{ 'igo.geo.timeFilter.endDate' | translate }}\"\r\n          [matDatetimepicker]=\"maxDatetimePicker\"\r\n          [(ngModel)]=\"endDate\"\r\n          [min]=\"getRangeMinDate()\"\r\n          [max]=\"max\"\r\n          readonly=\"readonly\"\r\n          (dateChange)=\"handleDateChange($event)\"\r\n        />\r\n      </mat-form-field>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div *ngIf=\"style === 'calendar' && type === 'year'\">\r\n  <div *ngIf=\"!isRange\" class=\"igo-col igo-col-100 igo-col-100-m\">\r\n    <mat-form-field>\r\n      <mat-select\r\n        placeholder=\"{{ 'igo.geo.timeFilter.date' | translate }}\"\r\n        [(ngModel)]=\"year\"\r\n        (selectionChange)=\"handleYearChange($event)\"\r\n      >\r\n        <mat-option [value]=\"year\" *ngFor=\"let year of listYears\">{{\r\n          year\r\n        }}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <div *ngIf=\"isRange\">\r\n    <div class=\"igo-col igo-col-100\">\r\n      <mat-form-field>\r\n        <mat-select\r\n          placeholder=\"{{ 'igo.geo.timeFilter.startDate' | translate }}\"\r\n          [(ngModel)]=\"startYear\"\r\n          (selectionChange)=\"handleYearChange($event)\"\r\n        >\r\n          <mat-option\r\n            [value]=\"startYear\"\r\n            *ngFor=\"let startYear of startListYears\"\r\n            >{{ startYear }}</mat-option\r\n          >\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </div>\r\n\r\n    <div class=\"igo-col igo-col-100\">\r\n      <mat-form-field>\r\n        <mat-select\r\n          placeholder=\"{{ 'igo.geo.timeFilter.endDate' | translate }}\"\r\n          [(ngModel)]=\"endYear\"\r\n          (selectionChange)=\"handleYearChange($event)\"\r\n        >\r\n          <mat-option [value]=\"endYear\" *ngFor=\"let endYear of endListYears\">{{\r\n            endYear\r\n          }}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<br />\r\n<div\r\n  *ngIf=\"!isRange && style === 'slider' && type === 'year'\"\r\n  class=\"igo-col igo-col-100 igo-col-100-m mat-typography\"\r\n>\r\n  <span>{{ startYear }}</span>\r\n  <!-- TODO: The 'tickInterval' property no longer exists -->\r\n  <mat-slider\r\n    id=\"time-slider\"\r\n    step=\"{{ step }}\"\r\n    [min]=\"startYear\"\r\n    [max]=\"endYear\"\r\n    [color]=\"color\"\r\n    thumbLabel\r\n    [disabled]=\"!options.enabled || !layer.visible\"\r\n    #ngSlider\r\n    ><input\r\n      matSliderThumb\r\n      [value]=\"handleSliderValue()\"\r\n      (input)=\"\r\n        handleSliderYearChange({\r\n          source: ngSliderThumb,\r\n          parent: ngSlider,\r\n          value: ngSliderThumb.value\r\n        })\r\n      \"\r\n      #ngSliderThumb=\"matSliderThumb\"\r\n      (change)=\"\r\n        handleSliderYearChange({\r\n          source: ngSliderThumb,\r\n          parent: ngSlider,\r\n          value: ngSliderThumb.value\r\n        })\r\n      \"\r\n    />\r\n  </mat-slider>\r\n  <span>{{ endYear }}</span>\r\n  <p *ngIf=\"options.enabled\" class=\"date-below\">{{ year }}</p>\r\n  <div #actions class=\"igo-layer-actions-container\">\r\n    <mat-slide-toggle\r\n      (change)=\"toggleFilterState()\"\r\n      tooltip-position=\"below\"\r\n      matTooltipShowDelay=\"500\"\r\n      [matTooltip]=\"'igo.geo.filter.toggleFilterState' | translate\"\r\n      [color]=\"color\"\r\n      [checked]=\"options.enabled\"\r\n      [disabled]=\"!layer.visible\"\r\n    >\r\n    </mat-slide-toggle>\r\n    <button\r\n      [disabled]=\"!options.enabled || !layer.visible\"\r\n      mat-icon-button\r\n      color=\"primary\"\r\n      (click)=\"playYear($event)\"\r\n    >\r\n      <mat-icon svgIcon=\"{{ playIcon }}\"></mat-icon>\r\n    </button>\r\n    <button\r\n      [disabled]=\"!options.enabled || !layer.visible\"\r\n      mat-icon-button\r\n      color=\"primary\"\r\n      (click)=\"resetFilter($event)\"\r\n    >\r\n      <mat-icon svgIcon=\"{{ resetIcon }}\"></mat-icon>\r\n    </button>\r\n  </div>\r\n</div>\r\n\r\n<div\r\n  *ngIf=\"style === 'slider' && type !== 'year'\"\r\n  class=\"igo-col igo-col-100 igo-col-100-m\"\r\n>\r\n  <!-- TODO: The 'tickInterval' property no longer exists -->\r\n  <mat-slider\r\n    id=\"time-slider\"\r\n    step=\"{{ step }}\"\r\n    [min]=\"dateToNumber(min)\"\r\n    [max]=\"dateToNumber(max)\"\r\n    thumbLabel\r\n    (selectionChange)=\"handleSliderDateChange($event)\"\r\n    #ngSlider\r\n    ><input\r\n      matSliderThumb\r\n      [value]=\"handleSliderValue()\"\r\n      (input)=\"\r\n        handleSliderDateChange({\r\n          source: ngSliderThumb,\r\n          parent: ngSlider,\r\n          value: ngSliderThumb.value\r\n        })\r\n      \"\r\n      #ngSliderThumb=\"matSliderThumb\"\r\n    />\r\n  </mat-slider>\r\n  <p class=\"date-below\">{{ handleSliderTooltip() }}</p>\r\n  <button mat-icon-button color=\"primary\" (click)=\"playFilter($event)\">\r\n    <mat-icon svgIcon=\"{{ playIcon }}\"></mat-icon>\r\n  </button>\r\n</div>\r\n", styles: [":host .igo-layer-filters-container{padding-left:5px}:host #time-slider{width:70%}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){:host #time-slider{width:60%}}:host .date-below{margin:0}:host .igo-layer-actions-container{display:flex;align-items:center;justify-content:center}\n"] }]
     }], function () { return [{ type: i11.DateAdapter }]; }, { layer: [{
             type: Input
         }], options: [{
@@ -36585,7 +36585,7 @@ class TimeFilterItemComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TimeFilterItemComponent, [{
         type: Component,
-        args: [{ selector: 'igo-time-filter-item', template: "<mat-list-item *ngIf=\"header\">\n  <mat-icon\n    class=\"igo-chevron\"\n    matListItemIcon\n    igoCollapse\n    [target]=\"filters\"\n    [collapsed]=\"filtersCollapsed\"\n    (click)=\"toggleFiltersCollapsed()\"\n    svgIcon=\"chevron-up\"\n  >\n  </mat-icon>\n\n  <span\n    matListItemTitle\n    (click)=\"toggleLegendOnClick()\"\n    [ngStyle]=\"{ cursor: filtersCollapsed ? 'default' : 'pointer' }\"\n    >{{ layer.title }}</span\n  >\n\n  <button\n    *ngIf=\"header\"\n    mat-icon-button\n    matListItemMeta\n    [color]=\"layer.visible ? 'primary' : 'default'\"\n    collapsibleButton\n    tooltip-position=\"below\"\n    matTooltipShowDelay=\"500\"\n    [matTooltip]=\"\n      layer.visible\n        ? ('igo.geo.layer.hideLayer' | translate)\n        : ('igo.geo.layer.showLayer' | translate)\n    \"\n    (click)=\"layer.visible = !layer.visible\"\n  >\n    <mat-icon\n      [ngClass]=\"{ disabled: (inResolutionRange$ | async) === false }\"\n      [svgIcon]=\"layer.visible ? 'eye' : 'eye-off'\"\n    >\n    </mat-icon>\n  </button>\n</mat-list-item>\n\n<div #filters class=\"igo-datasource-filters-container\">\n  <div #legend class=\"igo-layer-legend-container\">\n    <igo-layer-legend *ngIf=\"showLegend$ | async\" [layer]=\"layer\">\n    </igo-layer-legend>\n  </div>\n  <igo-time-filter-form\n    [layer]=\"layer\"\n    [options]=\"datasource.options.timeFilter\"\n    [currentValue]=\"datasource.options.params.TIME\"\n    (change)=\"handleDateChange($event)\"\n    (yearChange)=\"handleYearChange($event)\"\n  >\n  </igo-time-filter-form>\n</div>\n", styles: [":host{overflow:hidden}:host .igo-datasource-filters-container{text-align:center;width:100%;display:inline-block;padding-top:5px}:host .igo-layer-legend-container{padding-left:1.125em;width:calc(100% - 18px)}\n"] }]
+        args: [{ selector: 'igo-time-filter-item', template: "<mat-list-item *ngIf=\"header\">\r\n  <mat-icon\r\n    class=\"igo-chevron\"\r\n    matListItemIcon\r\n    igoCollapse\r\n    [target]=\"filters\"\r\n    [collapsed]=\"filtersCollapsed\"\r\n    (click)=\"toggleFiltersCollapsed()\"\r\n    svgIcon=\"chevron-up\"\r\n  >\r\n  </mat-icon>\r\n\r\n  <span\r\n    matListItemTitle\r\n    (click)=\"toggleLegendOnClick()\"\r\n    [ngStyle]=\"{ cursor: filtersCollapsed ? 'default' : 'pointer' }\"\r\n    >{{ layer.title }}</span\r\n  >\r\n\r\n  <button\r\n    *ngIf=\"header\"\r\n    mat-icon-button\r\n    matListItemMeta\r\n    [color]=\"layer.visible ? 'primary' : 'default'\"\r\n    collapsibleButton\r\n    tooltip-position=\"below\"\r\n    matTooltipShowDelay=\"500\"\r\n    [matTooltip]=\"\r\n      layer.visible\r\n        ? ('igo.geo.layer.hideLayer' | translate)\r\n        : ('igo.geo.layer.showLayer' | translate)\r\n    \"\r\n    (click)=\"layer.visible = !layer.visible\"\r\n  >\r\n    <mat-icon\r\n      [ngClass]=\"{ disabled: (inResolutionRange$ | async) === false }\"\r\n      [svgIcon]=\"layer.visible ? 'eye' : 'eye-off'\"\r\n    >\r\n    </mat-icon>\r\n  </button>\r\n</mat-list-item>\r\n\r\n<div #filters class=\"igo-datasource-filters-container\">\r\n  <div #legend class=\"igo-layer-legend-container\">\r\n    <igo-layer-legend *ngIf=\"showLegend$ | async\" [layer]=\"layer\">\r\n    </igo-layer-legend>\r\n  </div>\r\n  <igo-time-filter-form\r\n    [layer]=\"layer\"\r\n    [options]=\"datasource.options.timeFilter\"\r\n    [currentValue]=\"datasource.options.params.TIME\"\r\n    (change)=\"handleDateChange($event)\"\r\n    (yearChange)=\"handleYearChange($event)\"\r\n  >\r\n  </igo-time-filter-form>\r\n</div>\r\n", styles: [":host{overflow:hidden}:host .igo-datasource-filters-container{text-align:center;width:100%;display:inline-block;padding-top:5px}:host .igo-layer-legend-container{padding-left:1.125em;width:calc(100% - 18px)}\n"] }]
     }], function () { return [{ type: TimeFilterService }]; }, { header: [{
             type: Input
         }], layer: [{
@@ -36625,7 +36625,7 @@ class TimeFilterListComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TimeFilterListComponent, [{
         type: Component,
-        args: [{ selector: 'igo-time-filter-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<igo-list [navigation]=\"false\" [selection]=\"false\">\n  <ng-template\n    ngFor\n    let-layer\n    [ngForOf]=\"layers | filterableDataSource: 'time'\"\n  >\n    <igo-time-filter-item\n      [header]=\"true\"\n      igoListItem\n      [layer]=\"layer\"\n    ></igo-time-filter-item>\n  </ng-template>\n</igo-list>\n" }]
+        args: [{ selector: 'igo-time-filter-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<igo-list [navigation]=\"false\" [selection]=\"false\">\r\n  <ng-template\r\n    ngFor\r\n    let-layer\r\n    [ngForOf]=\"layers | filterableDataSource: 'time'\"\r\n  >\r\n    <igo-time-filter-item\r\n      [header]=\"true\"\r\n      igoListItem\r\n      [layer]=\"layer\"\r\n    ></igo-time-filter-item>\r\n  </ng-template>\r\n</igo-list>\r\n" }]
     }], function () { return [{ type: i0.ChangeDetectorRef }]; }, { layers: [{
             type: Input
         }] }); })();
@@ -36933,7 +36933,7 @@ class ExportButtonComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ExportButtonComponent, [{
         type: Component,
-        args: [{ selector: 'igo-export-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  *ngIf=\"layerIsExportable()\"\n  mat-icon-button\n  tooltip-position=\"below\"\n  matTooltipShowDelay=\"500\"\n  [matTooltip]=\"'igo.geo.download.action' | translate\"\n  [color]=\"color\"\n>\n  <!-- (click)=\"openDownload(layer)\"> -->\n  <mat-icon svgIcon=\"file-export\"></mat-icon>\n</button>\n" }]
+        args: [{ selector: 'igo-export-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\r\n  *ngIf=\"layerIsExportable()\"\r\n  mat-icon-button\r\n  tooltip-position=\"below\"\r\n  matTooltipShowDelay=\"500\"\r\n  [matTooltip]=\"'igo.geo.download.action' | translate\"\r\n  [color]=\"color\"\r\n>\r\n  <!-- (click)=\"openDownload(layer)\"> -->\r\n  <mat-icon svgIcon=\"file-export\"></mat-icon>\r\n</button>\r\n" }]
     }], function () { return []; }, { layer: [{
             type: Input
         }], color: [{
@@ -38982,7 +38982,7 @@ class ImportExportComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ImportExportComponent, [{
         type: Component,
-        args: [{ selector: 'igo-import-export', template: "<div class=\"import-export-toggle mat-typography\">\n  <mat-button-toggle-group\n    [value]=\"selectedMode\"\n    (change)=\"onImportExportChange($event)\"\n  >\n    <mat-button-toggle [value]=\"'import'\">\n      {{ 'igo.geo.importExportForm.importTabTitle' | translate }}\n    </mat-button-toggle>\n    <mat-button-toggle [value]=\"'export'\">\n      {{ 'igo.geo.importExportForm.exportTabTitle' | translate }}\n    </mat-button-toggle>\n  </mat-button-toggle-group>\n</div>\n\n<form\n  class=\"igo-form\"\n  [formGroup]=\"importForm\"\n  *ngIf=\"selectedMode === 'import'\"\n>\n  <div class=\"igo-input-container\">\n    <mat-form-field>\n      <mat-label>{{\n        'igo.geo.importExportForm.importProjPlaceholder' | translate\n      }}</mat-label>\n      <mat-select [(value)]=\"inputProj\">\n        <mat-option\n          *ngFor=\"let projection of projections$ | async\"\n          [value]=\"projection\"\n          (click)=\"$event.stopPropagation()\"\n        >\n          <p matListItemTitle *ngIf=\"projection.translateKey\">\n            {{\n              'igo.geo.importExportForm.projections.' + projection.translateKey\n                | translate: projection\n            }}\n          </p>\n          <p matListItemTitle *ngIf=\"!projection.translateKey\">\n            {{ projection.alias }}\n          </p>\n        </mat-option>\n      </mat-select>\n    </mat-form-field>\n  </div>\n\n  <div\n    tooltip-position=\"below\"\n    matTooltipShowDelay=\"500\"\n    [matTooltip]=\"\n      importForm.invalid\n        ? ('igo.geo.importExportForm.projections.choose' | translate)\n        : ('igo.geo.importExportForm.importButton' | translate)\n    \"\n    class=\"igo-form-button-group\"\n  >\n    <button\n      [disabled]=\"importForm.invalid || (loading$ | async)\"\n      mat-raised-button\n      type=\"button\"\n      (click)=\"fileInput.click()\"\n    >\n      {{ 'igo.geo.importExportForm.importButton' | translate }}\n    </button>\n    <igo-spinner [shown]=\"loading$ | async\"></igo-spinner>\n    <input\n      hidden\n      #fileInput\n      type=\"file\"\n      [style.display]=\"'none'\"\n      (click)=\"fileInput.value = null\"\n      (change)=\"importFiles($event.target.files)\"\n    />\n  </div>\n</form>\n<section class=\"mat-typography\" *ngIf=\"selectedMode === 'import'\">\n  <div *ngIf=\"importHtmlClarifications === ''\">\n    <h4>{{ 'igo.geo.importExportForm.importClarifications' | translate }}</h4>\n    <ul>\n      <li>\n        {{\n          'igo.geo.importExportForm.importSizeMax'\n            | translate: { size: fileSizeMb }\n        }}\n      </li>\n      <li>\n        {{ 'igo.geo.importExportForm.importFormatAuthorized' | translate }}\n      </li>\n      <li>{{ 'igo.geo.importExportForm.importShpZip' | translate }}</li>\n    </ul>\n  </div>\n  <igo-custom-html\n    *ngIf=\"importHtmlClarifications !== ''\"\n    class=\"mat-typography\"\n    [html]=\"importHtmlClarifications\"\n  >\n  </igo-custom-html>\n</section>\n\n<section\n  class=\"mat-typography\"\n  *ngIf=\"(exportableLayers$ | async).length === 0 && selectedMode === 'export'\"\n>\n  <h4>{{ 'igo.geo.importExportForm.exportNoLayersExportable' | translate }}</h4>\n</section>\n\n<form\n  class=\"igo-form\"\n  [formGroup]=\"form\"\n  *ngIf=\"(exportableLayers$ | async).length > 0 && selectedMode === 'export'\"\n>\n  <div class=\"igo-input-container\">\n    <mat-form-field>\n      <mat-label>{{\n        'igo.geo.importExportForm.exportLayerPlaceholder' | translate\n      }}</mat-label>\n      <mat-select [(value)]=\"layers\" multiple>\n        <mat-select-trigger>\n          {{ layers.length ? getLayerTitleById(layers[0]) : '' }}\n          <span *ngIf=\"layers.length > 1\" class=\"export-select-trigger\">\n            (+{{ layers.length - 1 }}\n            {{\n              (layers?.length === 2\n                ? 'igo.geo.importExportForm.other'\n                : 'igo.geo.importExportForm.others'\n              ) | translate\n            }})\n          </span>\n        </mat-select-trigger>\n        <mat-option\n          *ngFor=\"let layer of exportableLayers$ | async\"\n          [ngClass]=\"{\n            'igo-export-layer-mat-option': layerHasSelectedFeatures(layer)\n          }\"\n          [value]=\"layer.id\"\n          (click)=\"$event.stopPropagation()\"\n        >\n          <p matListItemTitle>{{ layer.title }}</p>\n          <p matListItemTitle>\n            <mat-slide-toggle\n              *ngIf=\"layerHasSelectedFeatures(layer)\"\n              (click)=\"onlySelectedClick($event, layer.id)\"\n              (checked)=\"inLayersIdToExportSelectionOnly(layer)\"\n              (change)=\"onlySelected($event, layer.id)\"\n            >\n              <small>{{\n                'igo.geo.importExportForm.exportSelectedFeature' | translate\n              }}</small>\n            </mat-slide-toggle>\n          </p>\n        </mat-option>\n      </mat-select>\n    </mat-form-field>\n  </div>\n\n  <div class=\"igo-input-container\">\n    <mat-form-field>\n      <mat-label>{{\n        'igo.geo.importExportForm.exportFormatPlaceholder' | translate\n      }}</mat-label>\n      <mat-select formControlName=\"format\">\n        <ng-container *ngIf=\"(formats$ | async).length !== 0\">\n          <mat-option\n            *ngFor=\"let format of formats$ | async | keyvalue\"\n            [value]=\"format.key\"\n          >\n            {{ 'igo.geo.export.format.' + format.value | translate }}\n          </mat-option>\n        </ng-container>\n        <mat-option *ngIf=\"(formats$ | async).length === 0\" disabled=\"true\">\n          {{ 'igo.geo.export.noFormat.title' | translate }}\n        </mat-option>\n      </mat-select>\n    </mat-form-field>\n  </div>\n\n  <div\n    class=\"igo-input-container\"\n    *ngIf=\"forceNaming && form.value.format !== 'URL'\"\n  >\n    <mat-form-field>\n      <input\n        matInput\n        formControlName=\"name\"\n        placeholder=\"{{\n          'igo.geo.importExportForm.exportFileNamePlaceholder' | translate\n        }}\"\n      />\n    </mat-form-field>\n  </div>\n\n  <div\n    class=\"igo-input-container\"\n    *ngIf=\"\n      form.value.format === 'CSVcomma' || form.value.format === 'CSVsemicolon'\n    \"\n  >\n    <mat-form-field>\n      <mat-label>{{\n        'igo.geo.importExportForm.encodingPlaceholder' | translate\n      }}</mat-label>\n      <mat-select formControlName=\"encoding\">\n        <ng-container *ngIf=\"(encodings$ | async).length !== 0\">\n          <mat-option\n            *ngFor=\"let encoding of encodings$ | async | keyvalue\"\n            [value]=\"encoding.key\"\n          >\n            {{ 'igo.geo.export.encoding.' + encoding.value | translate }}\n          </mat-option>\n        </ng-container>\n      </mat-select>\n    </mat-form-field>\n  </div>\n\n  <div\n    class=\"export-combine-layers mat-typography\"\n    *ngIf=\"\n      layers.length > 1 &&\n      (form.value.format === 'CSVcomma' || form.value.format === 'CSVsemicolon')\n    \"\n  >\n    <mat-slide-toggle\n      formControlName=\"combineLayers\"\n      [labelPosition]=\"'before'\"\n    >\n      {{ 'igo.geo.importExportForm.exportCombineResults' | translate }}\n    </mat-slide-toggle>\n  </div>\n\n  <div\n    class=\"export-separator mat-typography\"\n    *ngIf=\"\n      layers.length > 1 &&\n      (form.value.format === 'CSVcomma' ||\n        form.value.format === 'CSVsemicolon') &&\n      form.value.combineLayers\n    \"\n  >\n    <mat-slide-toggle formControlName=\"separator\" [labelPosition]=\"'before'\">\n      {{ 'igo.geo.importExportForm.exportSeparator' | translate }}\n    </mat-slide-toggle>\n  </div>\n\n  <div\n    class=\"export-options mat-typography\"\n    *ngIf=\"form.value.format !== 'URL'\"\n  >\n    <mat-slide-toggle\n      formControlName=\"featureInMapExtent\"\n      [labelPosition]=\"'before'\"\n    >\n      {{ 'igo.geo.importExportForm.exportFeatureInExtent' | translate }}\n    </mat-slide-toggle>\n  </div>\n\n  <div class=\"igo-form-button-group\">\n    <button\n      mat-raised-button\n      type=\"button\"\n      [disabled]=\"!form.valid || (loading$ | async)\"\n      (click)=\"handleExportFormSubmit(form.value)\"\n    >\n      {{\n        form.value.format !== 'URL'\n          ? ('igo.geo.importExportForm.exportButton' | translate)\n          : form.value.layers.length > 1\n          ? ('igo.geo.importExportForm.exportButtonLinks' | translate)\n          : ('igo.geo.importExportForm.exportButtonLink' | translate)\n      }}\n    </button>\n    <igo-spinner [shown]=\"loading$ | async\"></igo-spinner>\n  </div>\n\n  <igo-custom-html\n    *ngIf=\"exportHtmlClarifications !== ''\"\n    class=\"mat-typography\"\n    [html]=\"exportHtmlClarifications\"\n  >\n  </igo-custom-html>\n</form>\n", styles: [":host mat-option.igo-export-layer-mat-option{height:5em;line-height:1em}:host .import-export-toggle{padding:10px;text-align:center}:host .import-export-toggle mat-button-toggle-group{width:100%}:host .import-export-toggle mat-button-toggle-group mat-button-toggle{width:50%}:host h4{padding:0 5px}:host .igo-form{padding:15px 5px}:host .igo-input-container mat-form-field{width:100%}:host .igo-form-button-group{text-align:center;padding-top:10px}:host igo-spinner{position:absolute;padding-left:10px}:host .export-options mat-slide-toggle,:host .export-combine-layers mat-slide-toggle,:host .export-separator mat-slide-toggle{width:100%;padding:10px}:host .export-options mat-slide-toggle ::ng-deep .mdc-form-field,:host .export-combine-layers mat-slide-toggle ::ng-deep .mdc-form-field,:host .export-separator mat-slide-toggle ::ng-deep .mdc-form-field{width:100%}:host .export-options mat-slide-toggle ::ng-deep .mdc-label,:host .export-combine-layers mat-slide-toggle ::ng-deep .mdc-label,:host .export-separator mat-slide-toggle ::ng-deep .mdc-label{margin-left:0;width:calc(100% - 60px)}:host .export-select-trigger{opacity:.75;font-size:.75em}\n"] }]
+        args: [{ selector: 'igo-import-export', template: "<div class=\"import-export-toggle mat-typography\">\r\n  <mat-button-toggle-group\r\n    [value]=\"selectedMode\"\r\n    (change)=\"onImportExportChange($event)\"\r\n  >\r\n    <mat-button-toggle [value]=\"'import'\">\r\n      {{ 'igo.geo.importExportForm.importTabTitle' | translate }}\r\n    </mat-button-toggle>\r\n    <mat-button-toggle [value]=\"'export'\">\r\n      {{ 'igo.geo.importExportForm.exportTabTitle' | translate }}\r\n    </mat-button-toggle>\r\n  </mat-button-toggle-group>\r\n</div>\r\n\r\n<form\r\n  class=\"igo-form\"\r\n  [formGroup]=\"importForm\"\r\n  *ngIf=\"selectedMode === 'import'\"\r\n>\r\n  <div class=\"igo-input-container\">\r\n    <mat-form-field>\r\n      <mat-label>{{\r\n        'igo.geo.importExportForm.importProjPlaceholder' | translate\r\n      }}</mat-label>\r\n      <mat-select [(value)]=\"inputProj\">\r\n        <mat-option\r\n          *ngFor=\"let projection of projections$ | async\"\r\n          [value]=\"projection\"\r\n          (click)=\"$event.stopPropagation()\"\r\n        >\r\n          <p matListItemTitle *ngIf=\"projection.translateKey\">\r\n            {{\r\n              'igo.geo.importExportForm.projections.' + projection.translateKey\r\n                | translate: projection\r\n            }}\r\n          </p>\r\n          <p matListItemTitle *ngIf=\"!projection.translateKey\">\r\n            {{ projection.alias }}\r\n          </p>\r\n        </mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <div\r\n    tooltip-position=\"below\"\r\n    matTooltipShowDelay=\"500\"\r\n    [matTooltip]=\"\r\n      importForm.invalid\r\n        ? ('igo.geo.importExportForm.projections.choose' | translate)\r\n        : ('igo.geo.importExportForm.importButton' | translate)\r\n    \"\r\n    class=\"igo-form-button-group\"\r\n  >\r\n    <button\r\n      [disabled]=\"importForm.invalid || (loading$ | async)\"\r\n      mat-raised-button\r\n      type=\"button\"\r\n      (click)=\"fileInput.click()\"\r\n    >\r\n      {{ 'igo.geo.importExportForm.importButton' | translate }}\r\n    </button>\r\n    <igo-spinner [shown]=\"loading$ | async\"></igo-spinner>\r\n    <input\r\n      hidden\r\n      #fileInput\r\n      type=\"file\"\r\n      [style.display]=\"'none'\"\r\n      (click)=\"fileInput.value = null\"\r\n      (change)=\"importFiles($event.target.files)\"\r\n    />\r\n  </div>\r\n</form>\r\n<section class=\"mat-typography\" *ngIf=\"selectedMode === 'import'\">\r\n  <div *ngIf=\"importHtmlClarifications === ''\">\r\n    <h4>{{ 'igo.geo.importExportForm.importClarifications' | translate }}</h4>\r\n    <ul>\r\n      <li>\r\n        {{\r\n          'igo.geo.importExportForm.importSizeMax'\r\n            | translate: { size: fileSizeMb }\r\n        }}\r\n      </li>\r\n      <li>\r\n        {{ 'igo.geo.importExportForm.importFormatAuthorized' | translate }}\r\n      </li>\r\n      <li>{{ 'igo.geo.importExportForm.importShpZip' | translate }}</li>\r\n    </ul>\r\n  </div>\r\n  <igo-custom-html\r\n    *ngIf=\"importHtmlClarifications !== ''\"\r\n    class=\"mat-typography\"\r\n    [html]=\"importHtmlClarifications\"\r\n  >\r\n  </igo-custom-html>\r\n</section>\r\n\r\n<section\r\n  class=\"mat-typography\"\r\n  *ngIf=\"(exportableLayers$ | async).length === 0 && selectedMode === 'export'\"\r\n>\r\n  <h4>{{ 'igo.geo.importExportForm.exportNoLayersExportable' | translate }}</h4>\r\n</section>\r\n\r\n<form\r\n  class=\"igo-form\"\r\n  [formGroup]=\"form\"\r\n  *ngIf=\"(exportableLayers$ | async).length > 0 && selectedMode === 'export'\"\r\n>\r\n  <div class=\"igo-input-container\">\r\n    <mat-form-field>\r\n      <mat-label>{{\r\n        'igo.geo.importExportForm.exportLayerPlaceholder' | translate\r\n      }}</mat-label>\r\n      <mat-select [(value)]=\"layers\" multiple>\r\n        <mat-select-trigger>\r\n          {{ layers.length ? getLayerTitleById(layers[0]) : '' }}\r\n          <span *ngIf=\"layers.length > 1\" class=\"export-select-trigger\">\r\n            (+{{ layers.length - 1 }}\r\n            {{\r\n              (layers?.length === 2\r\n                ? 'igo.geo.importExportForm.other'\r\n                : 'igo.geo.importExportForm.others'\r\n              ) | translate\r\n            }})\r\n          </span>\r\n        </mat-select-trigger>\r\n        <mat-option\r\n          *ngFor=\"let layer of exportableLayers$ | async\"\r\n          [ngClass]=\"{\r\n            'igo-export-layer-mat-option': layerHasSelectedFeatures(layer)\r\n          }\"\r\n          [value]=\"layer.id\"\r\n          (click)=\"$event.stopPropagation()\"\r\n        >\r\n          <p matListItemTitle>{{ layer.title }}</p>\r\n          <p matListItemTitle>\r\n            <mat-slide-toggle\r\n              *ngIf=\"layerHasSelectedFeatures(layer)\"\r\n              (click)=\"onlySelectedClick($event, layer.id)\"\r\n              (checked)=\"inLayersIdToExportSelectionOnly(layer)\"\r\n              (change)=\"onlySelected($event, layer.id)\"\r\n            >\r\n              <small>{{\r\n                'igo.geo.importExportForm.exportSelectedFeature' | translate\r\n              }}</small>\r\n            </mat-slide-toggle>\r\n          </p>\r\n        </mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <div class=\"igo-input-container\">\r\n    <mat-form-field>\r\n      <mat-label>{{\r\n        'igo.geo.importExportForm.exportFormatPlaceholder' | translate\r\n      }}</mat-label>\r\n      <mat-select formControlName=\"format\">\r\n        <ng-container *ngIf=\"(formats$ | async).length !== 0\">\r\n          <mat-option\r\n            *ngFor=\"let format of formats$ | async | keyvalue\"\r\n            [value]=\"format.key\"\r\n          >\r\n            {{ 'igo.geo.export.format.' + format.value | translate }}\r\n          </mat-option>\r\n        </ng-container>\r\n        <mat-option *ngIf=\"(formats$ | async).length === 0\" disabled=\"true\">\r\n          {{ 'igo.geo.export.noFormat.title' | translate }}\r\n        </mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <div\r\n    class=\"igo-input-container\"\r\n    *ngIf=\"forceNaming && form.value.format !== 'URL'\"\r\n  >\r\n    <mat-form-field>\r\n      <input\r\n        matInput\r\n        formControlName=\"name\"\r\n        placeholder=\"{{\r\n          'igo.geo.importExportForm.exportFileNamePlaceholder' | translate\r\n        }}\"\r\n      />\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <div\r\n    class=\"igo-input-container\"\r\n    *ngIf=\"\r\n      form.value.format === 'CSVcomma' || form.value.format === 'CSVsemicolon'\r\n    \"\r\n  >\r\n    <mat-form-field>\r\n      <mat-label>{{\r\n        'igo.geo.importExportForm.encodingPlaceholder' | translate\r\n      }}</mat-label>\r\n      <mat-select formControlName=\"encoding\">\r\n        <ng-container *ngIf=\"(encodings$ | async).length !== 0\">\r\n          <mat-option\r\n            *ngFor=\"let encoding of encodings$ | async | keyvalue\"\r\n            [value]=\"encoding.key\"\r\n          >\r\n            {{ 'igo.geo.export.encoding.' + encoding.value | translate }}\r\n          </mat-option>\r\n        </ng-container>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <div\r\n    class=\"export-combine-layers mat-typography\"\r\n    *ngIf=\"\r\n      layers.length > 1 &&\r\n      (form.value.format === 'CSVcomma' || form.value.format === 'CSVsemicolon')\r\n    \"\r\n  >\r\n    <mat-slide-toggle\r\n      formControlName=\"combineLayers\"\r\n      [labelPosition]=\"'before'\"\r\n    >\r\n      {{ 'igo.geo.importExportForm.exportCombineResults' | translate }}\r\n    </mat-slide-toggle>\r\n  </div>\r\n\r\n  <div\r\n    class=\"export-separator mat-typography\"\r\n    *ngIf=\"\r\n      layers.length > 1 &&\r\n      (form.value.format === 'CSVcomma' ||\r\n        form.value.format === 'CSVsemicolon') &&\r\n      form.value.combineLayers\r\n    \"\r\n  >\r\n    <mat-slide-toggle formControlName=\"separator\" [labelPosition]=\"'before'\">\r\n      {{ 'igo.geo.importExportForm.exportSeparator' | translate }}\r\n    </mat-slide-toggle>\r\n  </div>\r\n\r\n  <div\r\n    class=\"export-options mat-typography\"\r\n    *ngIf=\"form.value.format !== 'URL'\"\r\n  >\r\n    <mat-slide-toggle\r\n      formControlName=\"featureInMapExtent\"\r\n      [labelPosition]=\"'before'\"\r\n    >\r\n      {{ 'igo.geo.importExportForm.exportFeatureInExtent' | translate }}\r\n    </mat-slide-toggle>\r\n  </div>\r\n\r\n  <div class=\"igo-form-button-group\">\r\n    <button\r\n      mat-raised-button\r\n      type=\"button\"\r\n      [disabled]=\"!form.valid || (loading$ | async)\"\r\n      (click)=\"handleExportFormSubmit(form.value)\"\r\n    >\r\n      {{\r\n        form.value.format !== 'URL'\r\n          ? ('igo.geo.importExportForm.exportButton' | translate)\r\n          : form.value.layers.length > 1\r\n          ? ('igo.geo.importExportForm.exportButtonLinks' | translate)\r\n          : ('igo.geo.importExportForm.exportButtonLink' | translate)\r\n      }}\r\n    </button>\r\n    <igo-spinner [shown]=\"loading$ | async\"></igo-spinner>\r\n  </div>\r\n\r\n  <igo-custom-html\r\n    *ngIf=\"exportHtmlClarifications !== ''\"\r\n    class=\"mat-typography\"\r\n    [html]=\"exportHtmlClarifications\"\r\n  >\r\n  </igo-custom-html>\r\n</form>\r\n", styles: [":host mat-option.igo-export-layer-mat-option{height:5em;line-height:1em}:host .import-export-toggle{padding:10px;text-align:center}:host .import-export-toggle mat-button-toggle-group{width:100%}:host .import-export-toggle mat-button-toggle-group mat-button-toggle{width:50%}:host h4{padding:0 5px}:host .igo-form{padding:15px 5px}:host .igo-input-container mat-form-field{width:100%}:host .igo-form-button-group{text-align:center;padding-top:10px}:host igo-spinner{position:absolute;padding-left:10px}:host .export-options mat-slide-toggle,:host .export-combine-layers mat-slide-toggle,:host .export-separator mat-slide-toggle{width:100%;padding:10px}:host .export-options mat-slide-toggle ::ng-deep .mdc-form-field,:host .export-combine-layers mat-slide-toggle ::ng-deep .mdc-form-field,:host .export-separator mat-slide-toggle ::ng-deep .mdc-form-field{width:100%}:host .export-options mat-slide-toggle ::ng-deep .mdc-label,:host .export-combine-layers mat-slide-toggle ::ng-deep .mdc-label,:host .export-separator mat-slide-toggle ::ng-deep .mdc-label{margin-left:0;width:calc(100% - 60px)}:host .export-select-trigger{opacity:.75;font-size:.75em}\n"] }]
     }], function () { return [{ type: ImportService }, { type: ExportService }, { type: i2.LanguageService }, { type: i2.MessageService }, { type: StyleListService }, { type: StyleService }, { type: i2$1.UntypedFormBuilder }, { type: i2.ConfigService }, { type: i0.ChangeDetectorRef }, { type: i2.StorageService }, { type: DownloadService }, { type: LayerService }, { type: i5$1.ConfirmDialogService }]; }, { selectFirstProj: [{
             type: Input
         }], map: [{
@@ -39457,7 +39457,7 @@ class MeasurerItemComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MeasurerItemComponent, [{
         type: Component,
-        args: [{ selector: 'igo-measurer-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-form-field class=\"measure-field\" floatLabel=\"always\">\n  <mat-label>{{ placeholder }}</mat-label>\n  <input\n    matInput\n    [disabled]=\"true\"\n    [readonly]=\"true\"\n    [value]=\"(measure$ | async) || 0 | measureFormat: measureUnit\"\n  />\n</mat-form-field>\n<mat-form-field class=\"unit-field\">\n  <mat-select\n    [value]=\"measureUnit\"\n    [disabled]=\"auto\"\n    (selectionChange)=\"onMeasureUnitChange($event.value)\"\n  >\n    <mat-option *ngFor=\"let measureUnit of measureUnits\" [value]=\"measureUnit\">\n      {{ 'igo.geo.measure.' + measureUnit | translate }}\n    </mat-option>\n  </mat-select>\n</mat-form-field>\n", styles: [":host{display:flex;width:100%;padding:5px 10px}:host .measure-field{pointer-events:none}:host .unit-field{margin-left:12px}:host .unit-field ::ng-deep .mat-mdc-form-field-infix{width:-moz-fit-content;width:fit-content}:host .unit-field ::ng-deep .mat-mdc-select-min-line{padding-right:8px}:host ::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{display:none}\n"] }]
+        args: [{ selector: 'igo-measurer-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-form-field class=\"measure-field\" floatLabel=\"always\">\r\n  <mat-label>{{ placeholder }}</mat-label>\r\n  <input\r\n    matInput\r\n    [disabled]=\"true\"\r\n    [readonly]=\"true\"\r\n    [value]=\"(measure$ | async) || 0 | measureFormat: measureUnit\"\r\n  />\r\n</mat-form-field>\r\n<mat-form-field class=\"unit-field\">\r\n  <mat-select\r\n    [value]=\"measureUnit\"\r\n    [disabled]=\"auto\"\r\n    (selectionChange)=\"onMeasureUnitChange($event.value)\"\r\n  >\r\n    <mat-option *ngFor=\"let measureUnit of measureUnits\" [value]=\"measureUnit\">\r\n      {{ 'igo.geo.measure.' + measureUnit | translate }}\r\n    </mat-option>\r\n  </mat-select>\r\n</mat-form-field>\r\n", styles: [":host{display:flex;width:100%;padding:5px 10px}:host .measure-field{pointer-events:none}:host .unit-field{margin-left:12px}:host .unit-field ::ng-deep .mat-mdc-form-field-infix{width:-moz-fit-content;width:fit-content}:host .unit-field ::ng-deep .mat-mdc-select-min-line{padding-right:8px}:host ::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{display:none}\n"] }]
     }], function () { return []; }, { measureType: [{
             type: Input
         }], measureUnit: [{
@@ -39837,7 +39837,7 @@ class SearchSelectorComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SearchSelectorComponent, [{
         type: Component,
-        args: [{ selector: 'igo-search-selector', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"igo-search-selector\">\n  <button\n    mat-icon-button\n    class=\"igo-search-selector-button\"\n    color=\"primary\"\n    tooltip-position=\"below\"\n    matTooltipShowDelay=\"500\"\n    [matTooltip]=\"'igo.geo.search.menu.tooltip' | translate\"\n    [matMenuTriggerFor]=\"searchSelectorMenu\"\n  >\n    <mat-icon svgIcon=\"menu-down\"></mat-icon>\n  </button>\n\n  <mat-menu\n    #searchSelectorMenu=\"matMenu\"\n    class=\"no-border-radius\"\n    xPosition=\"before\"\n    yPosition=\"above\"\n  >\n    <mat-radio-group\n      class=\"igo-search-selector-radio-group\"\n      [value]=\"searchType$ | async\"\n      (change)=\"onSearchTypeChange($event.value)\"\n    >\n      <mat-radio-button\n        *ngFor=\"let searchType of searchTypes\"\n        [value]=\"searchType\"\n      >\n        {{ getSearchTypeTitle(searchType) | translate }}\n      </mat-radio-button>\n    </mat-radio-group>\n  </mat-menu>\n</div>\n", styles: [":host .igo-search-selector-button{border-radius:0}:host .igo-search-selector-button button{border-radius:0!important}:host .igo-search-selector-button button .mat-ripple,:host .igo-search-selector-button button .mdc-icon-button__ripple{border-radius:0!important}:host .igo-search-selector-radio-group{display:inline-flex;flex-direction:column}:host .igo-search-selector-radio-group mat-radio-button{margin:5px}\n"] }]
+        args: [{ selector: 'igo-search-selector', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"igo-search-selector\">\r\n  <button\r\n    mat-icon-button\r\n    class=\"igo-search-selector-button\"\r\n    color=\"primary\"\r\n    tooltip-position=\"below\"\r\n    matTooltipShowDelay=\"500\"\r\n    [matTooltip]=\"'igo.geo.search.menu.tooltip' | translate\"\r\n    [matMenuTriggerFor]=\"searchSelectorMenu\"\r\n  >\r\n    <mat-icon svgIcon=\"menu-down\"></mat-icon>\r\n  </button>\r\n\r\n  <mat-menu\r\n    #searchSelectorMenu=\"matMenu\"\r\n    class=\"no-border-radius\"\r\n    xPosition=\"before\"\r\n    yPosition=\"above\"\r\n  >\r\n    <mat-radio-group\r\n      class=\"igo-search-selector-radio-group\"\r\n      [value]=\"searchType$ | async\"\r\n      (change)=\"onSearchTypeChange($event.value)\"\r\n    >\r\n      <mat-radio-button\r\n        *ngFor=\"let searchType of searchTypes\"\r\n        [value]=\"searchType\"\r\n      >\r\n        {{ getSearchTypeTitle(searchType) | translate }}\r\n      </mat-radio-button>\r\n    </mat-radio-group>\r\n  </mat-menu>\r\n</div>\r\n", styles: [":host .igo-search-selector-button{border-radius:0}:host .igo-search-selector-button button{border-radius:0!important}:host .igo-search-selector-button button .mat-ripple,:host .igo-search-selector-button button .mdc-icon-button__ripple{border-radius:0!important}:host .igo-search-selector-radio-group{display:inline-flex;flex-direction:column}:host .igo-search-selector-radio-group mat-radio-button{margin:5px}\n"] }]
     }], function () { return [{ type: SearchSourceService }]; }, { searchTypes: [{
             type: Input
         }], searchType: [{
@@ -40301,7 +40301,7 @@ class SearchSettingsComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SearchSettingsComponent, [{
         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 mat-menu-item>\n                <mat-checkbox\n                  *ngFor=\"let settingValue of getAvailableValues(setting)\"\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}.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}\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 mat-menu-item>\r\n                <mat-checkbox\r\n                  *ngFor=\"let settingValue of getAvailableValues(setting)\"\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}.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}\n"] }]
     }], function () { return [{ type: SearchSourceService }, { type: i2.MediaService }, { type: i2.StorageService }]; }, { pointerSummaryEnabled: [{
             type: Input
         }], searchResultsGeometryEnabled: [{
@@ -40843,7 +40843,7 @@ class SearchBarComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SearchBarComponent, [{
         type: Component,
-        args: [{ selector: 'igo-search-bar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"igo-search-bar-container\" [ngClass]=\"{ empty: empty$ | async }\">\n  <mat-form-field [floatLabel]=\"floatLabel\" [appearance]=\"appearance\">\n    <mat-label *ngIf=\"label\">{{ label }}</mat-label>\n    <input\n      #input\n      matInput\n      autocomplete=\"off\"\n      [ngClass]=\"{ hasSearchIcon: showSearchButton }\"\n      [disabled]=\"disabled$ | async\"\n      [placeholder]=\"\n        placeholder\n          ? placeholder\n          : (placeholder$ | async)\n          ? (placeholder$.value | translate)\n          : undefined\n      \"\n      [value]=\"term$ | async\"\n      (keyup)=\"onKeyup($event)\"\n      (touchend)=\"onKeyup($event)\"\n    />\n    <button\n      *ngIf=\"(empty$ | async) === false\"\n      mat-icon-button\n      matSuffix\n      [color]=\"color\"\n      (click)=\"onClearButtonClick()\"\n      [matTooltip]=\"'igo.geo.search.clearSearch' | translate\"\n    >\n      <mat-icon svgIcon=\"close\"></mat-icon>\n    </button>\n  </mat-form-field>\n\n  <mat-divider *ngIf=\"withDivider\" [vertical]=\"true\"></mat-divider>\n\n  <div class=\"search-bar-buttons\">\n    <button *ngIf=\"showSearchButton\" mat-icon-button [color]=\"color\">\n      <mat-icon svgIcon=\"magnify\"></mat-icon>\n    </button>\n\n    <igo-search-selector\n      *ngIf=\"searchSelector\"\n      [searchTypes]=\"searchTypes\"\n      [searchType]=\"searchType$ | async\"\n      (searchTypeChange)=\"onSearchTypeChange($event)\"\n    >\n    </igo-search-selector>\n\n    <igo-search-settings\n      *ngIf=\"searchSettings\"\n      [pointerSummaryEnabled]=\"pointerSummaryEnabled\"\n      (pointerSummaryStatus)=\"pointerSummaryStatus.emit($event)\"\n      [searchResultsGeometryEnabled]=\"searchResultsGeometryEnabled\"\n      (searchResultsGeometryStatus)=\"searchResultsGeometryStatus.emit($event)\"\n      [reverseSearchCoordsFormatEnabled]=\"reverseSearchCoordsFormatEnabled\"\n      (reverseSearchCoordsFormatStatus)=\"\n        reverseSearchCoordsFormatStatus.emit($event)\n      \"\n      (searchSourceChange)=\"onSearchSettingsChange()\"\n    >\n    </igo-search-settings>\n  </div>\n</div>\n", styles: [":host .igo-search-bar-container{position:relative;width:100%;display:flex}:host mat-form-field{flex:1}:host mat-divider{margin:8px 0}:host ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}:host ::ng-deep .mat-mdc-text-field-wrapper{align-items:center;padding-right:0}:host ::ng-deep .mat-mdc-form-field-infix{align-self:center}:host ::ng-deep mat-form-field input{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host .search-bar-buttons{position:relative;display:inline-flex}:host .search-bar-buttons>button:nth-child(2):before{content:\"\";border-right:1px solid #ddd;height:28px}:host igo-search-selector{background-color:#fff;top:0;border-radius:0}:host igo-search-settings{background-color:#fff;top:0;border-radius:0}:host ::ng-deep mat-form-field .mdc-line-ripple{display:none}\n"] }]
+        args: [{ selector: 'igo-search-bar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"igo-search-bar-container\" [ngClass]=\"{ empty: empty$ | async }\">\r\n  <mat-form-field [floatLabel]=\"floatLabel\" [appearance]=\"appearance\">\r\n    <mat-label *ngIf=\"label\">{{ label }}</mat-label>\r\n    <input\r\n      #input\r\n      matInput\r\n      autocomplete=\"off\"\r\n      [ngClass]=\"{ hasSearchIcon: showSearchButton }\"\r\n      [disabled]=\"disabled$ | async\"\r\n      [placeholder]=\"\r\n        placeholder\r\n          ? placeholder\r\n          : (placeholder$ | async)\r\n          ? (placeholder$.value | translate)\r\n          : undefined\r\n      \"\r\n      [value]=\"term$ | async\"\r\n      (keyup)=\"onKeyup($event)\"\r\n      (touchend)=\"onKeyup($event)\"\r\n    />\r\n    <button\r\n      *ngIf=\"(empty$ | async) === false\"\r\n      mat-icon-button\r\n      matSuffix\r\n      [color]=\"color\"\r\n      (click)=\"onClearButtonClick()\"\r\n      [matTooltip]=\"'igo.geo.search.clearSearch' | translate\"\r\n    >\r\n      <mat-icon svgIcon=\"close\"></mat-icon>\r\n    </button>\r\n  </mat-form-field>\r\n\r\n  <mat-divider *ngIf=\"withDivider\" [vertical]=\"true\"></mat-divider>\r\n\r\n  <div class=\"search-bar-buttons\">\r\n    <button *ngIf=\"showSearchButton\" mat-icon-button [color]=\"color\">\r\n      <mat-icon svgIcon=\"magnify\"></mat-icon>\r\n    </button>\r\n\r\n    <igo-search-selector\r\n      *ngIf=\"searchSelector\"\r\n      [searchTypes]=\"searchTypes\"\r\n      [searchType]=\"searchType$ | async\"\r\n      (searchTypeChange)=\"onSearchTypeChange($event)\"\r\n    >\r\n    </igo-search-selector>\r\n\r\n    <igo-search-settings\r\n      *ngIf=\"searchSettings\"\r\n      [pointerSummaryEnabled]=\"pointerSummaryEnabled\"\r\n      (pointerSummaryStatus)=\"pointerSummaryStatus.emit($event)\"\r\n      [searchResultsGeometryEnabled]=\"searchResultsGeometryEnabled\"\r\n      (searchResultsGeometryStatus)=\"searchResultsGeometryStatus.emit($event)\"\r\n      [reverseSearchCoordsFormatEnabled]=\"reverseSearchCoordsFormatEnabled\"\r\n      (reverseSearchCoordsFormatStatus)=\"\r\n        reverseSearchCoordsFormatStatus.emit($event)\r\n      \"\r\n      (searchSourceChange)=\"onSearchSettingsChange()\"\r\n    >\r\n    </igo-search-settings>\r\n  </div>\r\n</div>\r\n", styles: [":host .igo-search-bar-container{position:relative;width:100%;display:flex}:host mat-form-field{flex:1}:host mat-divider{margin:8px 0}:host ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}:host ::ng-deep .mat-mdc-text-field-wrapper{align-items:center;padding-right:0}:host ::ng-deep .mat-mdc-form-field-infix{align-self:center}:host ::ng-deep mat-form-field input{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host .search-bar-buttons{position:relative;display:inline-flex}:host .search-bar-buttons>button:nth-child(2):before{content:\"\";border-right:1px solid #ddd;height:28px}:host igo-search-selector{background-color:#fff;top:0;border-radius:0}:host igo-search-settings{background-color:#fff;top:0;border-radius:0}:host ::ng-deep mat-form-field .mdc-line-ripple{display:none}\n"] }]
     }], function () { return [{ type: i2.ConfigService }, { type: SearchService }, { type: SearchSourceService }]; }, { searchTypes: [{
             type: Input
         }], withDivider: [{
@@ -41136,7 +41136,7 @@ class SearchResultsItemComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SearchResultsItemComponent, [{
         type: Component,
-        args: [{ selector: 'igo-search-results-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-list-item\n  (mouseenter)=\"onMouseEvent($event)\"\n  (mouseleave)=\"onMouseEvent($event)\"\n>\n  <mat-icon\n    *ngIf=\"icon\"\n    matListItemIcon\n    [svgIcon]=\"showIcons ? icon : 'blank'\"\n  ></mat-icon>\n\n  <div\n    matListItemTitle\n    *ngIf=\"titleHtml; else normalTitle\"\n    [innerHtml]=\"titleHtml\"\n    matTooltipShowDelay=\"500\"\n    [matTooltip]=\"tooltipHtml\"\n    matTooltipClass=\"search-result-tooltip\"\n  ></div>\n  <ng-template #normalTitle>\n    <span\n      matListItemTitle\n      *ngIf=\"!titleHtml\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"title\"\n      >{{ title }}</span\n    >\n  </ng-template>\n\n  <div matListItemMeta>\n    <button\n      *ngIf=\"withZoomButton\"\n      igoStopPropagation\n      mat-icon-button\n      (click)=\"onZoomHandler()\"\n    >\n      <mat-icon svgIcon=\"magnify\"></mat-icon>\n    </button>\n\n    <ng-content select=\"[igoSearchItemToolbar]\"> </ng-content>\n  </div>\n</mat-list-item>\n", styles: [":host ::ng-deep small{color:#8c8c8c}:host div[matlistitemmeta]:empty{display:none}:host ::ng-deep .search-result-tooltip{white-space:pre-line}\n"] }]
+        args: [{ selector: 'igo-search-results-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-list-item\r\n  (mouseenter)=\"onMouseEvent($event)\"\r\n  (mouseleave)=\"onMouseEvent($event)\"\r\n>\r\n  <mat-icon\r\n    *ngIf=\"icon\"\r\n    matListItemIcon\r\n    [svgIcon]=\"showIcons ? icon : 'blank'\"\r\n  ></mat-icon>\r\n\r\n  <div\r\n    matListItemTitle\r\n    *ngIf=\"titleHtml; else normalTitle\"\r\n    [innerHtml]=\"titleHtml\"\r\n    matTooltipShowDelay=\"500\"\r\n    [matTooltip]=\"tooltipHtml\"\r\n    matTooltipClass=\"search-result-tooltip\"\r\n  ></div>\r\n  <ng-template #normalTitle>\r\n    <span\r\n      matListItemTitle\r\n      *ngIf=\"!titleHtml\"\r\n      matTooltipShowDelay=\"500\"\r\n      [matTooltip]=\"title\"\r\n      >{{ title }}</span\r\n    >\r\n  </ng-template>\r\n\r\n  <div matListItemMeta>\r\n    <button\r\n      *ngIf=\"withZoomButton\"\r\n      igoStopPropagation\r\n      mat-icon-button\r\n      (click)=\"onZoomHandler()\"\r\n    >\r\n      <mat-icon svgIcon=\"magnify\"></mat-icon>\r\n    </button>\r\n\r\n    <ng-content select=\"[igoSearchItemToolbar]\"> </ng-content>\r\n  </div>\r\n</mat-list-item>\r\n", styles: [":host ::ng-deep small{color:#8c8c8c}:host div[matlistitemmeta]:empty{display:none}:host ::ng-deep .search-result-tooltip{white-space:pre-line}\n"] }]
     }], null, { result: [{
             type: Input
         }], map: [{
@@ -41254,7 +41254,7 @@ class SaveFeatureDialogComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SaveFeatureDialogComponent, [{
         type: Component,
-        args: [{ selector: 'igo-save-feature-dialog', template: "<h1 mat-dialog-title class=\"mat-typography\">\n  {{ 'igo.geo.layer.saveFeatureInLayer' | translate }}\n</h1>\n\n<div mat-dialog-content class=\"mat-typography\">\n  <form class=\"igo-form\" [formGroup]=\"form\">\n    <igo-list [navigation]=\"false\" [selection]=\"false\">\n      <igo-search-results-item\n        igoListItem\n        color=\"accent\"\n        [result]=\"feature\"\n        showIcons=\"true\"\n      >\n      </igo-search-results-item>\n    </igo-list>\n\n    <div class=\"igo-input-container\">\n      <mat-form-field>\n        <input\n          type=\"text\"\n          placeholder=\"{{ 'igo.geo.layer.chooseOrSet' | translate }}\"\n          matInput\n          [matAutocomplete]=\"auto\"\n          formControlName=\"layerName\"\n        />\n        <mat-autocomplete [displayWith]=\"displayFn\" #auto=\"matAutocomplete\">\n          <mat-option\n            *ngFor=\"let layer of filteredLayers$ | async\"\n            [value]=\"layer\"\n          >\n            <p matListItemTitle>{{ layer.title }}</p>\n          </mat-option>\n        </mat-autocomplete>\n      </mat-form-field>\n    </div>\n  </form>\n</div>\n\n<div mat-dialog-actions style=\"justify-content: center\">\n  <div class=\"igo-form-button-group create-layer-button-top-padding\">\n    <button mat-raised-button type=\"button\" (click)=\"cancel()\">\n      {{ 'igo.geo.layer.cancelBtn' | translate }}\n    </button>\n    <button\n      id=\"createLayerBtnDialog\"\n      mat-raised-button\n      type=\"button\"\n      color=\"primary\"\n      (click)=\"save()\"\n    >\n      {{ 'igo.geo.layer.saveBtn' | translate }}\n    </button>\n  </div>\n</div>\n", styles: [":host mat-form-field{width:100%}:host .create-layer-button-top-padding{padding-top:25px}:host .igo-form{padding:10px 5px 5px}:host .igo-form-button-group{text-align:center}:host button{cursor:pointer}:host button#createLayerBtnDialog[disabled=true]{cursor:default;background-color:#0000001f;color:#00000042}:host .error{color:red}\n"] }]
+        args: [{ selector: 'igo-save-feature-dialog', template: "<h1 mat-dialog-title class=\"mat-typography\">\r\n  {{ 'igo.geo.layer.saveFeatureInLayer' | translate }}\r\n</h1>\r\n\r\n<div mat-dialog-content class=\"mat-typography\">\r\n  <form class=\"igo-form\" [formGroup]=\"form\">\r\n    <igo-list [navigation]=\"false\" [selection]=\"false\">\r\n      <igo-search-results-item\r\n        igoListItem\r\n        color=\"accent\"\r\n        [result]=\"feature\"\r\n        showIcons=\"true\"\r\n      >\r\n      </igo-search-results-item>\r\n    </igo-list>\r\n\r\n    <div class=\"igo-input-container\">\r\n      <mat-form-field>\r\n        <input\r\n          type=\"text\"\r\n          placeholder=\"{{ 'igo.geo.layer.chooseOrSet' | translate }}\"\r\n          matInput\r\n          [matAutocomplete]=\"auto\"\r\n          formControlName=\"layerName\"\r\n        />\r\n        <mat-autocomplete [displayWith]=\"displayFn\" #auto=\"matAutocomplete\">\r\n          <mat-option\r\n            *ngFor=\"let layer of filteredLayers$ | async\"\r\n            [value]=\"layer\"\r\n          >\r\n            <p matListItemTitle>{{ layer.title }}</p>\r\n          </mat-option>\r\n        </mat-autocomplete>\r\n      </mat-form-field>\r\n    </div>\r\n  </form>\r\n</div>\r\n\r\n<div mat-dialog-actions style=\"justify-content: center\">\r\n  <div class=\"igo-form-button-group create-layer-button-top-padding\">\r\n    <button mat-raised-button type=\"button\" (click)=\"cancel()\">\r\n      {{ 'igo.geo.layer.cancelBtn' | translate }}\r\n    </button>\r\n    <button\r\n      id=\"createLayerBtnDialog\"\r\n      mat-raised-button\r\n      type=\"button\"\r\n      color=\"primary\"\r\n      (click)=\"save()\"\r\n    >\r\n      {{ 'igo.geo.layer.saveBtn' | translate }}\r\n    </button>\r\n  </div>\r\n</div>\r\n", styles: [":host mat-form-field{width:100%}:host .create-layer-button-top-padding{padding-top:25px}:host .igo-form{padding:10px 5px 5px}:host .igo-form-button-group{text-align:center}:host button{cursor:pointer}:host button#createLayerBtnDialog[disabled=true]{cursor:default;background-color:#0000001f;color:#00000042}:host .error{color:red}\n"] }]
     }], function () { return [{ type: i2$1.UntypedFormBuilder }, { type: i2.LanguageService }, { type: i1$3.MatDialogRef }, { type: undefined, decorators: [{
                 type: Optional
             }, {
@@ -41672,7 +41672,7 @@ class SearchResultAddButtonComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SearchResultAddButtonComponent, [{
         type: Component,
-        args: [{ selector: 'igo-search-add-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  igoStopPropagation\n  (mouseenter)=\"onMouseEvent($event)\"\n  (mouseleave)=\"onMouseEvent($event)\"\n  *ngIf=\"layer.meta.dataType === 'Layer'\"\n  mat-icon-button\n  tooltip-position=\"below\"\n  matTooltipShowDelay=\"500\"\n  [matTooltip]=\"computeTooltip() | translate\"\n  [color]=\"(isPreview$ | async) ? '' : added ? 'warn' : ''\"\n  (click)=\"onToggleClick($event)\"\n>\n  <mat-icon\n    aria-hidden=\"false\"\n    matBadge=\"icon\"\n    [igoMatBadgeIcon]=\"getBadgeIcon()\"\n    igoMatBadgeColor=\"rgba(0,0,0,0.87)\"\n    igoMatBadgeBackgroundColor=\"none\"\n    igoMatBadgeInverseColor=\"true\"\n    [matBadgeHidden]=\"\n      ((inRange$ | async) && (isVisible$ | async) === true) ||\n      ((inRange$ | async) && !added) ||\n      ((inRange$ | async) && (isPreview$ | async))\n    \"\n    [matBadgeDisabled]=\"(inRange$ | async) === false\"\n    matBadgeSize=\"small\"\n    matBadgePosition=\"after\"\n    [svgIcon]=\"(isPreview$ | async) ? 'plus' : added ? 'delete' : 'plus'\"\n  >\n  </mat-icon>\n</button>\n\n<button\n  [id]=\"!isMobile ? 'hide-save-search-result-btn' : ''\"\n  igoStopPropagation\n  *ngIf=\"layer.meta.dataType === 'Feature' && saveSearchResultInLayer\"\n  mat-icon-button\n  tooltip-position=\"below\"\n  matTooltipShowDelay=\"500\"\n  [matTooltip]=\"addFeatureToLayerTooltip$ | async | translate\"\n  (click)=\"addFeatureToLayer()\"\n>\n  <mat-icon\n    aria-hidden=\"false\"\n    matBadge=\"icon\"\n    igoMatBadgeIcon=\"eye-off\"\n    igoMatBadgeInverseColor=\"true\"\n    [matBadgeHidden]=\"inRange$ | async\"\n    matBadgeDisabled=\"true\"\n    matBadgeSize=\"small\"\n    matBadgePosition=\"after\"\n    svgIcon=\"file-plus-outline\"\n  >\n  </mat-icon>\n</button>\n", styles: [":host #hide-save-search-result-btn{display:none}:host #show-save-search-result-btn{display:block}\n"] }]
+        args: [{ selector: 'igo-search-add-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\r\n  igoStopPropagation\r\n  (mouseenter)=\"onMouseEvent($event)\"\r\n  (mouseleave)=\"onMouseEvent($event)\"\r\n  *ngIf=\"layer.meta.dataType === 'Layer'\"\r\n  mat-icon-button\r\n  tooltip-position=\"below\"\r\n  matTooltipShowDelay=\"500\"\r\n  [matTooltip]=\"computeTooltip() | translate\"\r\n  [color]=\"(isPreview$ | async) ? '' : added ? 'warn' : ''\"\r\n  (click)=\"onToggleClick($event)\"\r\n>\r\n  <mat-icon\r\n    aria-hidden=\"false\"\r\n    matBadge=\"icon\"\r\n    [igoMatBadgeIcon]=\"getBadgeIcon()\"\r\n    igoMatBadgeColor=\"rgba(0,0,0,0.87)\"\r\n    igoMatBadgeBackgroundColor=\"none\"\r\n    igoMatBadgeInverseColor=\"true\"\r\n    [matBadgeHidden]=\"\r\n      ((inRange$ | async) && (isVisible$ | async) === true) ||\r\n      ((inRange$ | async) && !added) ||\r\n      ((inRange$ | async) && (isPreview$ | async))\r\n    \"\r\n    [matBadgeDisabled]=\"(inRange$ | async) === false\"\r\n    matBadgeSize=\"small\"\r\n    matBadgePosition=\"after\"\r\n    [svgIcon]=\"(isPreview$ | async) ? 'plus' : added ? 'delete' : 'plus'\"\r\n  >\r\n  </mat-icon>\r\n</button>\r\n\r\n<button\r\n  [id]=\"!isMobile ? 'hide-save-search-result-btn' : ''\"\r\n  igoStopPropagation\r\n  *ngIf=\"layer.meta.dataType === 'Feature' && saveSearchResultInLayer\"\r\n  mat-icon-button\r\n  tooltip-position=\"below\"\r\n  matTooltipShowDelay=\"500\"\r\n  [matTooltip]=\"addFeatureToLayerTooltip$ | async | translate\"\r\n  (click)=\"addFeatureToLayer()\"\r\n>\r\n  <mat-icon\r\n    aria-hidden=\"false\"\r\n    matBadge=\"icon\"\r\n    igoMatBadgeIcon=\"eye-off\"\r\n    igoMatBadgeInverseColor=\"true\"\r\n    [matBadgeHidden]=\"inRange$ | async\"\r\n    matBadgeDisabled=\"true\"\r\n    matBadgeSize=\"small\"\r\n    matBadgePosition=\"after\"\r\n    svgIcon=\"file-plus-outline\"\r\n  >\r\n  </mat-icon>\r\n</button>\r\n", styles: [":host #hide-save-search-result-btn{display:none}:host #show-save-search-result-btn{display:block}\n"] }]
     }], function () { return [{ type: LayerService }, { type: i1$3.MatDialog }, { type: DataSourceService }, { type: i2.MediaService }]; }, { layer: [{
             type: Input
         }], store: [{
@@ -42118,7 +42118,7 @@ class SearchResultsComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SearchResultsComponent, [{
         type: Component,
-        args: [{ selector: 'igo-search-results', changeDetection: ChangeDetectionStrategy.OnPush, template: "<igo-list [navigation]=\"true\" *ngIf=\"tabsMode === false\">\n  <ng-template #groupTemplate ngFor let-group [ngForOf]=\"results$ | async\">\n    <igo-collapsible\n      [class]=\"group.source.getId()\"\n      *ngIf=\"mode === searchResultMode.Grouped; else flatTemplate\"\n      [title]=\"computeGroupTitle(group)\"\n      [collapsed]=\"collapsed[group.source.title]\"\n      (toggle)=\"collapsed[group.source.title] = $event\"\n    >\n      <ng-container\n        *ngTemplateOutlet=\"\n          storeItemTemplate;\n          context: { results: group.results }\n        \"\n      ></ng-container>\n    </igo-collapsible>\n\n    <ng-template #flatTemplate>\n      <ng-container\n        *ngTemplateOutlet=\"\n          storeItemTemplate;\n          context: { results: group.results }\n        \"\n      ></ng-container>\n    </ng-template>\n\n    <ng-template #storeItemTemplate let-results=\"results\">\n      <ng-template ngFor let-result [ngForOf]=\"results\">\n        <igo-search-results-item\n          igoListItem\n          color=\"accent\"\n          [map]=\"map\"\n          [result]=\"result\"\n          [showIcons]=\"showIcons\"\n          [withZoomButton]=\"withZoomButton\"\n          [focused]=\"store.state.get(result).focused\"\n          [selected]=\"store.state.get(result).selected\"\n          (focus)=\"resultFocus.emit(result)\"\n          (unfocus)=\"resultUnfocus.emit(result)\"\n          (select)=\"onResultSelect(result)\"\n          (mouseenter)=\"resultFocus.emit(result)\"\n          (mouseleave)=\"resultUnfocus.emit(result)\"\n        >\n          <ng-container\n            igoSearchItemToolbar\n            [ngTemplateOutlet]=\"templateSearchToolbar\"\n            [ngTemplateOutletContext]=\"{ result: result }\"\n          >\n          </ng-container>\n        </igo-search-results-item>\n      </ng-template>\n      <span\n        class=\"moreResults mat-typography\"\n        *ngIf=\"isMoreResults(group)\"\n        (click)=\"displayMoreResults(group)\"\n      >\n        <u>{{ 'igo.geo.search.displayMoreResults' | translate }}</u>\n      </span>\n    </ng-template>\n  </ng-template>\n</igo-list>\n\n<igo-list [navigation]=\"true\" *ngIf=\"tabsMode\">\n  <ng-container\n    *ngIf=\"\n      mode === searchResultMode.Grouped;\n      then tabsTemplate;\n      else flatTemplate\n    \"\n  ></ng-container>\n\n  <ng-template #tabsTemplate>\n    <mat-tab-group class=\"custom-tabs-view\" dynamicHeight>\n      <mat-tab\n        *ngFor=\"let group of results$ | async\"\n        [label]=\"computeGroupTitle(group)\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"storeItemTemplate; context: { group: group }\"\n        ></ng-container>\n      </mat-tab>\n    </mat-tab-group>\n  </ng-template>\n\n  <ng-template #flatTemplate>\n    <ng-template ngFor let-group [ngForOf]=\"results$ | async\">\n      <ng-container\n        *ngTemplateOutlet=\"storeItemTemplate; context: { group: group }\"\n      ></ng-container>\n    </ng-template>\n  </ng-template>\n\n  <ng-template #storeItemTemplate let-group=\"group\">\n    <ng-template ngFor let-result [ngForOf]=\"group.results\">\n      <igo-search-results-item\n        igoListItem\n        color=\"accent\"\n        [map]=\"map\"\n        [result]=\"result\"\n        [showIcons]=\"showIcons\"\n        [withZoomButton]=\"withZoomButton\"\n        [focused]=\"store.state.get(result).focused\"\n        [selected]=\"store.state.get(result).selected\"\n        (focus)=\"resultFocus.emit(result)\"\n        (unfocus)=\"resultUnfocus.emit(result)\"\n        (select)=\"onResultSelect(result)\"\n        (mouseenter)=\"resultFocus.emit(result)\"\n        (mouseleave)=\"resultUnfocus.emit(result)\"\n      >\n        <ng-container\n          igoSearchItemToolbar\n          [ngTemplateOutlet]=\"templateSearchToolbar\"\n          [ngTemplateOutletContext]=\"{ result: result }\"\n        >\n        </ng-container>\n      </igo-search-results-item>\n    </ng-template>\n    <span\n      class=\"moreResults mat-typography\"\n      *ngIf=\"isMoreResults(group)\"\n      (click)=\"displayMoreResults(group)\"\n    >\n      <u>{{ 'igo.geo.search.displayMoreResults' | translate }}</u>\n    </span>\n  </ng-template>\n</igo-list>\n", styles: [":host .moreResults{cursor:pointer;color:#00f;float:right;margin-right:10px;margin-top:5px}:host igo-list ::ng-deep mat-list{height:100%}:host igo-list ::ng-deep mat-list .custom-tabs-view .mat-mdc-tab-header-pagination{min-width:20px}\n"] }]
+        args: [{ selector: 'igo-search-results', changeDetection: ChangeDetectionStrategy.OnPush, template: "<igo-list [navigation]=\"true\" *ngIf=\"tabsMode === false\">\r\n  <ng-template #groupTemplate ngFor let-group [ngForOf]=\"results$ | async\">\r\n    <igo-collapsible\r\n      [class]=\"group.source.getId()\"\r\n      *ngIf=\"mode === searchResultMode.Grouped; else flatTemplate\"\r\n      [title]=\"computeGroupTitle(group)\"\r\n      [collapsed]=\"collapsed[group.source.title]\"\r\n      (toggle)=\"collapsed[group.source.title] = $event\"\r\n    >\r\n      <ng-container\r\n        *ngTemplateOutlet=\"\r\n          storeItemTemplate;\r\n          context: { results: group.results }\r\n        \"\r\n      ></ng-container>\r\n    </igo-collapsible>\r\n\r\n    <ng-template #flatTemplate>\r\n      <ng-container\r\n        *ngTemplateOutlet=\"\r\n          storeItemTemplate;\r\n          context: { results: group.results }\r\n        \"\r\n      ></ng-container>\r\n    </ng-template>\r\n\r\n    <ng-template #storeItemTemplate let-results=\"results\">\r\n      <ng-template ngFor let-result [ngForOf]=\"results\">\r\n        <igo-search-results-item\r\n          igoListItem\r\n          color=\"accent\"\r\n          [map]=\"map\"\r\n          [result]=\"result\"\r\n          [showIcons]=\"showIcons\"\r\n          [withZoomButton]=\"withZoomButton\"\r\n          [focused]=\"store.state.get(result).focused\"\r\n          [selected]=\"store.state.get(result).selected\"\r\n          (focus)=\"resultFocus.emit(result)\"\r\n          (unfocus)=\"resultUnfocus.emit(result)\"\r\n          (select)=\"onResultSelect(result)\"\r\n          (mouseenter)=\"resultFocus.emit(result)\"\r\n          (mouseleave)=\"resultUnfocus.emit(result)\"\r\n        >\r\n          <ng-container\r\n            igoSearchItemToolbar\r\n            [ngTemplateOutlet]=\"templateSearchToolbar\"\r\n            [ngTemplateOutletContext]=\"{ result: result }\"\r\n          >\r\n          </ng-container>\r\n        </igo-search-results-item>\r\n      </ng-template>\r\n      <span\r\n        class=\"moreResults mat-typography\"\r\n        *ngIf=\"isMoreResults(group)\"\r\n        (click)=\"displayMoreResults(group)\"\r\n      >\r\n        <u>{{ 'igo.geo.search.displayMoreResults' | translate }}</u>\r\n      </span>\r\n    </ng-template>\r\n  </ng-template>\r\n</igo-list>\r\n\r\n<igo-list [navigation]=\"true\" *ngIf=\"tabsMode\">\r\n  <ng-container\r\n    *ngIf=\"\r\n      mode === searchResultMode.Grouped;\r\n      then tabsTemplate;\r\n      else flatTemplate\r\n    \"\r\n  ></ng-container>\r\n\r\n  <ng-template #tabsTemplate>\r\n    <mat-tab-group class=\"custom-tabs-view\" dynamicHeight>\r\n      <mat-tab\r\n        *ngFor=\"let group of results$ | async\"\r\n        [label]=\"computeGroupTitle(group)\"\r\n      >\r\n        <ng-container\r\n          *ngTemplateOutlet=\"storeItemTemplate; context: { group: group }\"\r\n        ></ng-container>\r\n      </mat-tab>\r\n    </mat-tab-group>\r\n  </ng-template>\r\n\r\n  <ng-template #flatTemplate>\r\n    <ng-template ngFor let-group [ngForOf]=\"results$ | async\">\r\n      <ng-container\r\n        *ngTemplateOutlet=\"storeItemTemplate; context: { group: group }\"\r\n      ></ng-container>\r\n    </ng-template>\r\n  </ng-template>\r\n\r\n  <ng-template #storeItemTemplate let-group=\"group\">\r\n    <ng-template ngFor let-result [ngForOf]=\"group.results\">\r\n      <igo-search-results-item\r\n        igoListItem\r\n        color=\"accent\"\r\n        [map]=\"map\"\r\n        [result]=\"result\"\r\n        [showIcons]=\"showIcons\"\r\n        [withZoomButton]=\"withZoomButton\"\r\n        [focused]=\"store.state.get(result).focused\"\r\n        [selected]=\"store.state.get(result).selected\"\r\n        (focus)=\"resultFocus.emit(result)\"\r\n        (unfocus)=\"resultUnfocus.emit(result)\"\r\n        (select)=\"onResultSelect(result)\"\r\n        (mouseenter)=\"resultFocus.emit(result)\"\r\n        (mouseleave)=\"resultUnfocus.emit(result)\"\r\n      >\r\n        <ng-container\r\n          igoSearchItemToolbar\r\n          [ngTemplateOutlet]=\"templateSearchToolbar\"\r\n          [ngTemplateOutletContext]=\"{ result: result }\"\r\n        >\r\n        </ng-container>\r\n      </igo-search-results-item>\r\n    </ng-template>\r\n    <span\r\n      class=\"moreResults mat-typography\"\r\n      *ngIf=\"isMoreResults(group)\"\r\n      (click)=\"displayMoreResults(group)\"\r\n    >\r\n      <u>{{ 'igo.geo.search.displayMoreResults' | translate }}</u>\r\n    </span>\r\n  </ng-template>\r\n</igo-list>\r\n", styles: [":host .moreResults{cursor:pointer;color:#00f;float:right;margin-right:10px;margin-top:5px}:host igo-list ::ng-deep mat-list{height:100%}:host igo-list ::ng-deep mat-list .custom-tabs-view .mat-mdc-tab-header-pagination{min-width:20px}\n"] }]
     }], function () { return [{ type: i0.ChangeDetectorRef }, { type: SearchService }, { type: i2.ConfigService }]; }, { map: [{
             type: Input
         }], store: [{
@@ -44248,7 +44248,7 @@ class StyleModalLayerButtonComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(StyleModalLayerButtonComponent, [{
         type: Component,
-        args: [{ selector: 'igo-style-modal-layer-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  mat-icon-button\n  color=\"primary\"\n  (click)=\"openStyleModalDialog()\"\n  [matTooltip]=\"'igo.geo.style.styleModalTooltipLayer' | translate\"\n>\n  <mat-icon class=\"style-icon\" svgIcon=\"palette\"> </mat-icon>\n</button>\n" }]
+        args: [{ selector: 'igo-style-modal-layer-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\r\n  mat-icon-button\r\n  color=\"primary\"\r\n  (click)=\"openStyleModalDialog()\"\r\n  [matTooltip]=\"'igo.geo.style.styleModalTooltipLayer' | translate\"\r\n>\r\n  <mat-icon class=\"style-icon\" svgIcon=\"palette\"> </mat-icon>\r\n</button>\r\n" }]
     }], function () { return [{ type: i1$3.MatDialog }]; }, { layer: [{
             type: Input
         }] }); })();
@@ -44421,7 +44421,7 @@ class ToastComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ToastComponent, [{
         type: Component,
-        args: [{ selector: 'igo-toast', template: "<igo-flexible\n  #flex\n  collapsedMobile=\"51px\"\n  expandedMobile=\"300px\"\n  [state]=\"state\"\n  (swipeup)=\"swipe($event.type)\"\n  (swipedown)=\"swipe($event.type)\"\n>\n  <igo-panel [title]=\"title\">\n    <button mat-icon-button panelLeftButton (click)=\"toggle()\">\n      <mat-icon\n        [svgIcon]=\"\n          ['collapsed', 'initial'].indexOf(flex.state) >= 0\n            ? 'arrow_upward'\n            : 'arrow_downward'\n        \"\n      ></mat-icon>\n    </button>\n\n    <button\n      mat-icon-button\n      panelRightButton\n      class=\"igo-icon-button\"\n      (click)=\"zoomToFeatureExtent()\"\n      *ngIf=\"feature.geometry\"\n    >\n      <mat-icon svgIcon=\"zoom-in\"></mat-icon>\n    </button>\n\n    <igo-feature-details [feature]=\"feature\"></igo-feature-details>\n  </igo-panel>\n</igo-flexible>\n", styles: [":host{position:absolute;bottom:0;width:100%;max-height:calc(100% - 50px);background-color:#fff}igo-feature-details ::ng-deep table{width:100%}\n"] }]
+        args: [{ selector: 'igo-toast', template: "<igo-flexible\r\n  #flex\r\n  collapsedMobile=\"51px\"\r\n  expandedMobile=\"300px\"\r\n  [state]=\"state\"\r\n  (swipeup)=\"swipe($event.type)\"\r\n  (swipedown)=\"swipe($event.type)\"\r\n>\r\n  <igo-panel [title]=\"title\">\r\n    <button mat-icon-button panelLeftButton (click)=\"toggle()\">\r\n      <mat-icon\r\n        [svgIcon]=\"\r\n          ['collapsed', 'initial'].indexOf(flex.state) >= 0\r\n            ? 'arrow_upward'\r\n            : 'arrow_downward'\r\n        \"\r\n      ></mat-icon>\r\n    </button>\r\n\r\n    <button\r\n      mat-icon-button\r\n      panelRightButton\r\n      class=\"igo-icon-button\"\r\n      (click)=\"zoomToFeatureExtent()\"\r\n      *ngIf=\"feature.geometry\"\r\n    >\r\n      <mat-icon svgIcon=\"zoom-in\"></mat-icon>\r\n    </button>\r\n\r\n    <igo-feature-details [feature]=\"feature\"></igo-feature-details>\r\n  </igo-panel>\r\n</igo-flexible>\r\n", styles: [":host{position:absolute;bottom:0;width:100%;max-height:calc(100% - 50px);background-color:#fff}igo-feature-details ::ng-deep table{width:100%}\n"] }]
     }], function () { return []; }, { expanded: [{
             type: Input
         }], map: [{
@@ -44528,7 +44528,7 @@ class ConfirmationPopupComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ConfirmationPopupComponent, [{
         type: Component,
-        args: [{ selector: 'igo-confirmation-popup-component', template: "<div mat-dialog-content>\n  <p class=\"mat-typography\">\n    {{\n      data.type === 'add'\n        ? languageService.translate.instant('igo.geo.workspace.addConfirmation')\n        : languageService.translate.instant(\n            'igo.geo.workspace.deleteConfirmation'\n          )\n    }}\n  </p>\n</div>\n<div mat-dialog-actions>\n  <button mat-raised-button color=\"primary\" (click)=\"confirmedAction()\">\n    Ok\n  </button>\n  <button mat-raised-button (click)=\"cancelAction()\">\n    {{ languageService.translate.instant('igo.geo.workspace.cancel') }}\n  </button>\n</div>\n", styles: ["div.mat-mdc-dialog-actions{justify-content:center}\n"] }]
+        args: [{ selector: 'igo-confirmation-popup-component', template: "<div mat-dialog-content>\r\n  <p class=\"mat-typography\">\r\n    {{\r\n      data.type === 'add'\r\n        ? languageService.translate.instant('igo.geo.workspace.addConfirmation')\r\n        : languageService.translate.instant(\r\n            'igo.geo.workspace.deleteConfirmation'\r\n          )\r\n    }}\r\n  </p>\r\n</div>\r\n<div mat-dialog-actions>\r\n  <button mat-raised-button color=\"primary\" (click)=\"confirmedAction()\">\r\n    Ok\r\n  </button>\r\n  <button mat-raised-button (click)=\"cancelAction()\">\r\n    {{ languageService.translate.instant('igo.geo.workspace.cancel') }}\r\n  </button>\r\n</div>\r\n", styles: ["div.mat-mdc-dialog-actions{justify-content:center}\n"] }]
     }], function () { return [{ type: i1$3.MatDialogRef }, { type: i2.LanguageService }, { type: undefined, decorators: [{
                 type: Inject,
                 args: [MAT_DIALOG_DATA]
@@ -44599,7 +44599,7 @@ class OgcFilterComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(OgcFilterComponent, [{
         type: Component,
-        args: [{ selector: 'igo-ogc-filter', changeDetection: ChangeDetectionStrategy.OnPush, template: "<igo-ogc-filterable-item\n  igoListItem\n  [layer]=\"layer\"\n  [header]=\"false\"\n  [map]=\"map\"\n>\n</igo-ogc-filterable-item>\n" }]
+        args: [{ selector: 'igo-ogc-filter', changeDetection: ChangeDetectionStrategy.OnPush, template: "<igo-ogc-filterable-item\r\n  igoListItem\r\n  [layer]=\"layer\"\r\n  [header]=\"false\"\r\n  [map]=\"map\"\r\n>\r\n</igo-ogc-filterable-item>\r\n" }]
     }], function () { return [{ type: i0.ChangeDetectorRef }]; }, { layer: [{
             type: Input
         }], map: [{