npm - @igo2/geo - Versions diffs - 17.0.0-next.5 → 17.0.0-next.6 - Mend

@igo2/geo 17.0.0-next.5 → 17.0.0-next.6

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

Files changed (109) hide show

package/fesm2022/igo2-geo.mjs CHANGED Viewed

@@ -14,7 +14,7 @@ import { MatInputModule } from '@angular/material/input';
 import * as i3 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import * as i3$6 from '@igo2/common';
-import { getEntityId, getEntityTitle, getEntityProperty, getEntityRevision, getEntityIcon, EntityStore, EntityStoreStrategy, ImageErrorDirective, SecureImagePipe, FormComponent, EntityTableComponent, getEntityTitleHtml, StopPropagationDirective, ListComponent, ListItemDirective, IgoBadgeIconDirective, EntityStoreWatcher, EntityStoreFilterCustomFuncStrategy, CollapsibleComponent, CollapseDirective, SanitizeHtmlPipe, DOMService, ColorPickerFormFieldComponent, EntityTableColumnRenderer, EntityStoreFilterSelectionStrategy, ConfirmDialogService, SpinnerComponent, CustomHtmlComponent, DragAndDropDirective, PanelComponent, FlexibleComponent, WidgetService, Workspace, ActionStore, IgoWidgetModule, IgoFormFieldComponent } from '@igo2/common';
+import { getEntityId, getEntityTitle, getEntityProperty, getEntityRevision, getEntityIcon, EntityStore, EntityStoreStrategy, ImageErrorDirective, SecureImagePipe, FormComponent, EntityTableComponent, getEntityTitleHtml, StopPropagationDirective, ListComponent, ListItemDirective, IgoBadgeIconDirective, EntityStoreWatcher, EntityStoreFilterCustomFuncStrategy, CollapsibleComponent, ENGINE_ICON, CollapseDirective, SanitizeHtmlPipe, DOMService, ColorPickerFormFieldComponent, KEYBOARD_ESC_ICON, IgoIconComponent, EntityTableColumnRenderer, EntityStoreFilterSelectionStrategy, ConfirmDialogService, SpinnerComponent, CustomHtmlComponent, DragAndDropDirective, MAGNIFY_SCAN_ICON, PanelComponent, FlexibleComponent, WidgetService, Workspace, ActionStore, IgoWidgetModule, IgoFormFieldComponent } from '@igo2/common';
 import * as i1 from '@igo2/core/config';
 import { ConfigService } from '@igo2/core/config';
 import * as i5 from '@ngx-translate/core';
@@ -325,7 +325,7 @@ class SearchSelectorComponent {
         this.searchTypeChange.emit(searchType);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SearchSelectorComponent, deps: [{ token: SearchSourceService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: SearchSelectorComponent, isStandalone: true, selector: "igo-search-selector", inputs: { searchTypes: "searchTypes", searchType: "searchType" }, outputs: { searchTypeChange: "searchTypeChange" }, ngImport: i0, template: "<div class=\"igo-search-selector\">\n  <button\n    mat-icon-button\n    class=\"igo-search-selector-button\"\n    color=\"primary\"\n    tooltip-position=\"below\"\n    matTooltipShowDelay=\"500\"\n    [matTooltip]=\"'igo.geo.search.menu.tooltip' | translate\"\n    [matMenuTriggerFor]=\"searchSelectorMenu\"\n  >\n    <mat-icon svgIcon=\"menu-down\"></mat-icon>\n  </button>\n\n  <mat-menu\n    #searchSelectorMenu=\"matMenu\"\n    class=\"no-border-radius\"\n    xPosition=\"before\"\n    yPosition=\"above\"\n  >\n    <mat-radio-group\n      class=\"igo-search-selector-radio-group\"\n      [value]=\"searchType$ | async\"\n      (change)=\"onSearchTypeChange($event.value)\"\n    >\n      <mat-radio-button\n        *ngFor=\"let searchType of searchTypes\"\n        [value]=\"searchType\"\n      >\n        {{ getSearchTypeTitle(searchType) | translate }}\n      </mat-radio-button>\n    </mat-radio-group>\n  </mat-menu>\n</div>\n", styles: [":host .igo-search-selector-button{border-radius:0}:host .igo-search-selector-button button{border-radius:0!important}:host .igo-search-selector-button button .mat-ripple,:host .igo-search-selector-button button .mdc-icon-button__ripple{border-radius:0!important}:host .igo-search-selector-radio-group{display:inline-flex;flex-direction:column}:host .igo-search-selector-radio-group mat-radio-button{margin:5px}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i6.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: i6.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i6$1.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i6$1.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: SearchSelectorComponent, isStandalone: true, selector: "igo-search-selector", inputs: { searchTypes: "searchTypes", searchType: "searchType" }, outputs: { searchTypeChange: "searchTypeChange" }, ngImport: i0, template: "<div class=\"igo-search-selector\">\n  <button\n    mat-icon-button\n    class=\"igo-search-selector-button\"\n    color=\"primary\"\n    tooltip-position=\"below\"\n    matTooltipShowDelay=\"500\"\n    [matTooltip]=\"'igo.geo.search.menu.tooltip' | translate\"\n    [matMenuTriggerFor]=\"searchSelectorMenu\"\n  >\n    <mat-icon>arrow_drop_down</mat-icon>\n  </button>\n\n  <mat-menu\n    #searchSelectorMenu=\"matMenu\"\n    class=\"no-border-radius\"\n    xPosition=\"before\"\n    yPosition=\"above\"\n  >\n    <mat-radio-group\n      class=\"igo-search-selector-radio-group\"\n      [value]=\"searchType$ | async\"\n      (change)=\"onSearchTypeChange($event.value)\"\n    >\n      <mat-radio-button\n        *ngFor=\"let searchType of searchTypes\"\n        [value]=\"searchType\"\n      >\n        {{ getSearchTypeTitle(searchType) | translate }}\n      </mat-radio-button>\n    </mat-radio-group>\n  </mat-menu>\n</div>\n", styles: [":host .igo-search-selector-button{border-radius:0}:host .igo-search-selector-button button{border-radius:0!important}:host .igo-search-selector-button button .mat-ripple,:host .igo-search-selector-button button .mdc-icon-button__ripple{border-radius:0!important}:host .igo-search-selector-radio-group{display:inline-flex;flex-direction:column}:host .igo-search-selector-radio-group mat-radio-button{margin:5px}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i6.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: i6.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i6$1.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i6$1.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SearchSelectorComponent, decorators: [{
             type: Component,
@@ -338,7 +338,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                         NgFor,
                         AsyncPipe,
                         TranslateModule
-                    ], 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"] }]
+                    ], 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>arrow_drop_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"] }]
         }], ctorParameters: () => [{ type: SearchSourceService }], propDecorators: { searchTypes: [{
                 type: Input
             }], searchType: [{
@@ -401,7 +401,7 @@ function featureToSearchResult(feature, source) {
             dataType: FEATURE,
             id: feature.meta.id,
             title: feature.meta.title,
-            icon: feature.meta.icon || 'map-marker'
+            icon: feature.meta.icon || 'location_on'
         }
     };
 }
@@ -636,7 +636,7 @@ class SearchSettingsComponent {
         this.reverseSearchCoordsFormatStatus.emit(this.reverseSearchCoordsFormatEnabled);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SearchSettingsComponent, deps: [{ token: SearchSourceService }, { token: i2$1.MediaService }, { token: i3$2.StorageService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: SearchSettingsComponent, isStandalone: true, selector: "igo-search-settings", inputs: { pointerSummaryEnabled: "pointerSummaryEnabled", searchResultsGeometryEnabled: "searchResultsGeometryEnabled", reverseSearchCoordsFormatEnabled: "reverseSearchCoordsFormatEnabled" }, outputs: { searchSourceChange: "searchSourceChange", pointerSummaryStatus: "pointerSummaryStatus", searchResultsGeometryStatus: "searchResultsGeometryStatus", reverseSearchCoordsFormatStatus: "reverseSearchCoordsFormatStatus" }, host: { listeners: { "document:keydown": "handleKeyboardEvent($event)" } }, ngImport: i0, template: "<div class=\"igo-search-settings\">\n  <button\n    mat-icon-button\n    class=\"igo-search-settings-button\"\n    color=\"primary\"\n    tooltip-position=\"below\"\n    matTooltipShowDelay=\"500\"\n    [matTooltip]=\"'igo.geo.search.menu.tooltip' | translate\"\n    [matMenuTriggerFor]=\"searchSettingsMenu\"\n  >\n    <mat-icon svgIcon=\"chevron-down\"></mat-icon>\n  </button>\n  <mat-menu #searchSettingsMenu=\"matMenu\" class=\"no-border-radius\">\n    <div class=\"checkAllButton\" *ngIf=\"getSearchSources().length > 4\">\n      <button mat-raised-button (click)=\"checkUncheckAllSources($event)\">\n        {{\n          !searchSourcesAllEnabled\n            ? ('igo.geo.search.searchSources.unselectAll' | translate)\n            : ('igo.geo.search.searchSources.selectAll' | translate)\n        }}\n      </button>\n    </div>\n    <ng-container *ngFor=\"let source of getSearchSources()\">\n      <span class=\"igo-search-settings-search-source\">\n        <mat-checkbox\n          class=\"igo-search-settings-checkbox\"\n          [checked]=\"source.enabled\"\n          [value]=\"$any(source)\"\n          (click)=\"$event.stopPropagation()\"\n          (change)=\"onCheckSearchSource($event, source)\"\n        >\n        </mat-checkbox>\n        <button\n          *ngIf=\"source.settings.length > 0\"\n          [matMenuTriggerFor]=\"sub_menu\"\n          mat-menu-item\n        >\n          {{ source.title }}\n        </button>\n        <button mat-menu-item *ngIf=\"source.settings.length === 0\">\n          {{ source.title }}\n        </button>\n      </span>\n      <mat-menu #sub_menu=\"matMenu\">\n        <ng-container *ngFor=\"let setting of source.settings\">\n          <button mat-menu-item [matMenuTriggerFor]=\"test_sub_menu\">\n            {{\n              'igo.geo.search.searchSources.settings.' + setting.title\n                | translate\n            }}\n          </button>\n          <mat-menu\n            #test_sub_menu=\"matMenu\"\n            [ngSwitch]=\"setting.type\"\n            yPosition=\"above\"\n          >\n            <span *ngSwitchCase=\"'radiobutton'\">\n              <mat-radio-group\n                class=\"igo-search-settings-radio-group\"\n                [value]=\"setting\"\n              >\n                <mat-radio-button\n                  *ngFor=\"let settingValue of setting.values\"\n                  class=\"mat-typography\"\n                  [value]=\"settingValue\"\n                  [matTooltip]=\"getAvailableHashtagsValues(settingValue)\"\n                  [checked]=\"settingValue.enabled\"\n                  (click)=\"$event.stopPropagation()\"\n                  (change)=\"\n                    settingsValueCheckedRadioButton(\n                      $event,\n                      source,\n                      setting,\n                      settingValue\n                    )\n                  \"\n                >\n                  {{ settingValue.title | translate }}\n                </mat-radio-button>\n              </mat-radio-group>\n            </span>\n            <span *ngSwitchCase=\"'checkbox'\">\n              <div class=\"checkAllButton\" *ngIf=\"setting.values.length > 3\">\n                <button\n                  mat-raised-button\n                  (click)=\"checkUncheckAll($event, source, setting)\"\n                >\n                  {{\n                    setting.allEnabled || setting.allEnabled === undefined\n                      ? ('igo.geo.search.searchSources.settings.unselectAll'\n                        | translate)\n                      : ('igo.geo.search.searchSources.settings.selectAll'\n                        | translate)\n                  }}\n                </button>\n              </div>\n              <div\n                class=\"igo-search-settings-sub-menu\"\n                mat-menu-item\n                *ngFor=\"let settingValue of getAvailableValues(setting)\"\n              >\n                <mat-checkbox\n                  [style.display]=\"displayBlock\"\n                  [checked]=\"settingValue.enabled\"\n                  [value]=\"$any(setting)\"\n                  [matTooltip]=\"getAvailableHashtagsValues(settingValue)\"\n                  (click)=\"$event.stopPropagation()\"\n                  (change)=\"\n                    settingsValueCheckedCheckbox(\n                      $event,\n                      source,\n                      setting,\n                      settingValue\n                    )\n                  \"\n                >\n                  {{ settingValue.title | translate }}\n                </mat-checkbox>\n              </div>\n            </span>\n          </mat-menu>\n        </ng-container>\n      </mat-menu>\n    </ng-container>\n    <mat-divider></mat-divider>\n    <span class=\"pointer-summary-slide-toggle-container\">\n      <div mat-menu-item>\n        <mat-slide-toggle\n          class=\"search-option\"\n          (change)=\"changePointerReverseSearch($event)\"\n          tooltip-position=\"below\"\n          *ngIf=\"hasPointerReverseSearchSource && !isTouchScreen\"\n          matTooltipShowDelay=\"500\"\n          [matTooltip]=\"\n            'igo.geo.search.pointerSearchSummary.tooltip' | translate\n          \"\n          (click)=\"$event.stopPropagation()\"\n          [checked]=\"pointerSummaryEnabled\"\n        >\n          {{ 'igo.geo.search.pointerSearchSummary.title' | translate }}\n        </mat-slide-toggle>\n      </div>\n      <div mat-menu-item>\n        <mat-slide-toggle\n          class=\"search-option\"\n          (change)=\"changeSearchResultsGeometry($event)\"\n          tooltip-position=\"below\"\n          matTooltipShowDelay=\"500\"\n          [matTooltip]=\"\n            'igo.geo.search.searchResultsGeometry.tooltip' | translate\n          \"\n          (click)=\"$event.stopPropagation()\"\n          [checked]=\"searchResultsGeometryEnabled\"\n        >\n          {{ 'igo.geo.search.searchResultsGeometry.title' | translate }}\n        </mat-slide-toggle>\n      </div>\n      <div mat-menu-item>\n        <mat-slide-toggle\n          class=\"search-option\"\n          (change)=\"reverseSearchCoordsFormat($event)\"\n          tooltip-position=\"below\"\n          matTooltipShowDelay=\"500\"\n          [matTooltip]=\"\n            reverseSearchCoordsFormatEnabled\n              ? ('igo.geo.search.reverseCoordFormat.tooltipLatLon' | translate)\n              : ('igo.geo.search.reverseCoordFormat.tooltipLonLat' | translate)\n          \"\n          (click)=\"$event.stopPropagation()\"\n          [checked]=\"reverseSearchCoordsFormatEnabled\"\n        >\n          {{ 'igo.geo.search.reverseCoordFormat.title' | translate }}\n        </mat-slide-toggle>\n      </div>\n    </span>\n  </mat-menu>\n</div>\n", styles: [":host{display:flex;align-items:center}.checkAllButton{text-align:center;padding:0 5px}.igo-search-settings-radio-group{display:flex;flex-direction:column;padding-right:16px}.igo-search-settings-checkbox mat-radio-button{display:flex}.igo-search-settings-search-source{display:flex;width:100%}.igo-search-settings-search-source mat-checkbox{display:flex;margin-left:5px;margin-right:5px}.search-option{display:block;margin-right:10px;margin-bottom:15px}.pointer-summary-slide-toggle-container{overflow-x:hidden}.pointer-summary-slide-toggle-container mat-slide-toggle{margin:10px 0}.igo-search-settings-button button,.igo-search-settings-button button .mat-ripple,.igo-search-settings-button button .mdc-icon-button__ripple{border-radius:0!important}.igo-search-settings-sub-menu{min-height:34px}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i6.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i6.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i8.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i6$1.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i6$1.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i6$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i5$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: SearchSettingsComponent, isStandalone: true, selector: "igo-search-settings", inputs: { pointerSummaryEnabled: "pointerSummaryEnabled", searchResultsGeometryEnabled: "searchResultsGeometryEnabled", reverseSearchCoordsFormatEnabled: "reverseSearchCoordsFormatEnabled" }, outputs: { searchSourceChange: "searchSourceChange", pointerSummaryStatus: "pointerSummaryStatus", searchResultsGeometryStatus: "searchResultsGeometryStatus", reverseSearchCoordsFormatStatus: "reverseSearchCoordsFormatStatus" }, host: { listeners: { "document:keydown": "handleKeyboardEvent($event)" } }, ngImport: i0, template: "<div class=\"igo-search-settings\">\n  <button\n    mat-icon-button\n    class=\"igo-search-settings-button\"\n    color=\"primary\"\n    tooltip-position=\"below\"\n    matTooltipShowDelay=\"500\"\n    [matTooltip]=\"'igo.geo.search.menu.tooltip' | translate\"\n    [matMenuTriggerFor]=\"searchSettingsMenu\"\n  >\n    <mat-icon>expand_more</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]=\"$any(source)\"\n          (click)=\"$event.stopPropagation()\"\n          (change)=\"onCheckSearchSource($event, source)\"\n        >\n        </mat-checkbox>\n        <button\n          *ngIf=\"source.settings.length > 0\"\n          [matMenuTriggerFor]=\"sub_menu\"\n          mat-menu-item\n        >\n          {{ source.title }}\n        </button>\n        <button mat-menu-item *ngIf=\"source.settings.length === 0\">\n          {{ source.title }}\n        </button>\n      </span>\n      <mat-menu #sub_menu=\"matMenu\">\n        <ng-container *ngFor=\"let setting of source.settings\">\n          <button mat-menu-item [matMenuTriggerFor]=\"test_sub_menu\">\n            {{\n              'igo.geo.search.searchSources.settings.' + setting.title\n                | translate\n            }}\n          </button>\n          <mat-menu\n            #test_sub_menu=\"matMenu\"\n            [ngSwitch]=\"setting.type\"\n            yPosition=\"above\"\n          >\n            <span *ngSwitchCase=\"'radiobutton'\">\n              <mat-radio-group\n                class=\"igo-search-settings-radio-group\"\n                [value]=\"setting\"\n              >\n                <mat-radio-button\n                  *ngFor=\"let settingValue of setting.values\"\n                  class=\"mat-typography\"\n                  [value]=\"settingValue\"\n                  [matTooltip]=\"getAvailableHashtagsValues(settingValue)\"\n                  [checked]=\"settingValue.enabled\"\n                  (click)=\"$event.stopPropagation()\"\n                  (change)=\"\n                    settingsValueCheckedRadioButton(\n                      $event,\n                      source,\n                      setting,\n                      settingValue\n                    )\n                  \"\n                >\n                  {{ settingValue.title | translate }}\n                </mat-radio-button>\n              </mat-radio-group>\n            </span>\n            <span *ngSwitchCase=\"'checkbox'\">\n              <div class=\"checkAllButton\" *ngIf=\"setting.values.length > 3\">\n                <button\n                  mat-raised-button\n                  (click)=\"checkUncheckAll($event, source, setting)\"\n                >\n                  {{\n                    setting.allEnabled || setting.allEnabled === undefined\n                      ? ('igo.geo.search.searchSources.settings.unselectAll'\n                        | translate)\n                      : ('igo.geo.search.searchSources.settings.selectAll'\n                        | translate)\n                  }}\n                </button>\n              </div>\n              <div\n                class=\"igo-search-settings-sub-menu\"\n                mat-menu-item\n                *ngFor=\"let settingValue of getAvailableValues(setting)\"\n              >\n                <mat-checkbox\n                  [style.display]=\"displayBlock\"\n                  [checked]=\"settingValue.enabled\"\n                  [value]=\"$any(setting)\"\n                  [matTooltip]=\"getAvailableHashtagsValues(settingValue)\"\n                  (click)=\"$event.stopPropagation()\"\n                  (change)=\"\n                    settingsValueCheckedCheckbox(\n                      $event,\n                      source,\n                      setting,\n                      settingValue\n                    )\n                  \"\n                >\n                  {{ settingValue.title | translate }}\n                </mat-checkbox>\n              </div>\n            </span>\n          </mat-menu>\n        </ng-container>\n      </mat-menu>\n    </ng-container>\n    <mat-divider></mat-divider>\n    <span class=\"pointer-summary-slide-toggle-container\">\n      <div mat-menu-item>\n        <mat-slide-toggle\n          class=\"search-option\"\n          (change)=\"changePointerReverseSearch($event)\"\n          tooltip-position=\"below\"\n          *ngIf=\"hasPointerReverseSearchSource && !isTouchScreen\"\n          matTooltipShowDelay=\"500\"\n          [matTooltip]=\"\n            'igo.geo.search.pointerSearchSummary.tooltip' | translate\n          \"\n          (click)=\"$event.stopPropagation()\"\n          [checked]=\"pointerSummaryEnabled\"\n        >\n          {{ 'igo.geo.search.pointerSearchSummary.title' | translate }}\n        </mat-slide-toggle>\n      </div>\n      <div mat-menu-item>\n        <mat-slide-toggle\n          class=\"search-option\"\n          (change)=\"changeSearchResultsGeometry($event)\"\n          tooltip-position=\"below\"\n          matTooltipShowDelay=\"500\"\n          [matTooltip]=\"\n            'igo.geo.search.searchResultsGeometry.tooltip' | translate\n          \"\n          (click)=\"$event.stopPropagation()\"\n          [checked]=\"searchResultsGeometryEnabled\"\n        >\n          {{ 'igo.geo.search.searchResultsGeometry.title' | translate }}\n        </mat-slide-toggle>\n      </div>\n      <div mat-menu-item>\n        <mat-slide-toggle\n          class=\"search-option\"\n          (change)=\"reverseSearchCoordsFormat($event)\"\n          tooltip-position=\"below\"\n          matTooltipShowDelay=\"500\"\n          [matTooltip]=\"\n            reverseSearchCoordsFormatEnabled\n              ? ('igo.geo.search.reverseCoordFormat.tooltipLatLon' | translate)\n              : ('igo.geo.search.reverseCoordFormat.tooltipLonLat' | translate)\n          \"\n          (click)=\"$event.stopPropagation()\"\n          [checked]=\"reverseSearchCoordsFormatEnabled\"\n        >\n          {{ 'igo.geo.search.reverseCoordFormat.title' | translate }}\n        </mat-slide-toggle>\n      </div>\n    </span>\n  </mat-menu>\n</div>\n", styles: [":host{display:flex;align-items:center}.checkAllButton{text-align:center;padding:0 5px}.igo-search-settings-radio-group{display:flex;flex-direction:column;padding-right:16px}.igo-search-settings-checkbox mat-radio-button{display:flex}.igo-search-settings-search-source{display:flex;width:100%}.igo-search-settings-search-source mat-checkbox{display:flex;margin-left:5px;margin-right:5px}.search-option{display:block;margin-right:10px;margin-bottom:15px}.pointer-summary-slide-toggle-container{overflow-x:hidden}.pointer-summary-slide-toggle-container mat-slide-toggle{margin:10px 0}.igo-search-settings-button button,.igo-search-settings-button button .mat-ripple,.igo-search-settings-button button .mdc-icon-button__ripple{border-radius:0!important}.igo-search-settings-sub-menu{min-height:34px}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i6.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i6.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i8.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i6$1.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i6$1.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i6$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i5$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SearchSettingsComponent, decorators: [{
             type: Component,
@@ -654,7 +654,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                         MatDividerModule,
                         MatSlideToggleModule,
                         TranslateModule
-                    ], 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]=\"$any(source)\"\n          (click)=\"$event.stopPropagation()\"\n          (change)=\"onCheckSearchSource($event, source)\"\n        >\n        </mat-checkbox>\n        <button\n          *ngIf=\"source.settings.length > 0\"\n          [matMenuTriggerFor]=\"sub_menu\"\n          mat-menu-item\n        >\n          {{ source.title }}\n        </button>\n        <button mat-menu-item *ngIf=\"source.settings.length === 0\">\n          {{ source.title }}\n        </button>\n      </span>\n      <mat-menu #sub_menu=\"matMenu\">\n        <ng-container *ngFor=\"let setting of source.settings\">\n          <button mat-menu-item [matMenuTriggerFor]=\"test_sub_menu\">\n            {{\n              'igo.geo.search.searchSources.settings.' + setting.title\n                | translate\n            }}\n          </button>\n          <mat-menu\n            #test_sub_menu=\"matMenu\"\n            [ngSwitch]=\"setting.type\"\n            yPosition=\"above\"\n          >\n            <span *ngSwitchCase=\"'radiobutton'\">\n              <mat-radio-group\n                class=\"igo-search-settings-radio-group\"\n                [value]=\"setting\"\n              >\n                <mat-radio-button\n                  *ngFor=\"let settingValue of setting.values\"\n                  class=\"mat-typography\"\n                  [value]=\"settingValue\"\n                  [matTooltip]=\"getAvailableHashtagsValues(settingValue)\"\n                  [checked]=\"settingValue.enabled\"\n                  (click)=\"$event.stopPropagation()\"\n                  (change)=\"\n                    settingsValueCheckedRadioButton(\n                      $event,\n                      source,\n                      setting,\n                      settingValue\n                    )\n                  \"\n                >\n                  {{ settingValue.title | translate }}\n                </mat-radio-button>\n              </mat-radio-group>\n            </span>\n            <span *ngSwitchCase=\"'checkbox'\">\n              <div class=\"checkAllButton\" *ngIf=\"setting.values.length > 3\">\n                <button\n                  mat-raised-button\n                  (click)=\"checkUncheckAll($event, source, setting)\"\n                >\n                  {{\n                    setting.allEnabled || setting.allEnabled === undefined\n                      ? ('igo.geo.search.searchSources.settings.unselectAll'\n                        | translate)\n                      : ('igo.geo.search.searchSources.settings.selectAll'\n                        | translate)\n                  }}\n                </button>\n              </div>\n              <div\n                class=\"igo-search-settings-sub-menu\"\n                mat-menu-item\n                *ngFor=\"let settingValue of getAvailableValues(setting)\"\n              >\n                <mat-checkbox\n                  [style.display]=\"displayBlock\"\n                  [checked]=\"settingValue.enabled\"\n                  [value]=\"$any(setting)\"\n                  [matTooltip]=\"getAvailableHashtagsValues(settingValue)\"\n                  (click)=\"$event.stopPropagation()\"\n                  (change)=\"\n                    settingsValueCheckedCheckbox(\n                      $event,\n                      source,\n                      setting,\n                      settingValue\n                    )\n                  \"\n                >\n                  {{ settingValue.title | translate }}\n                </mat-checkbox>\n              </div>\n            </span>\n          </mat-menu>\n        </ng-container>\n      </mat-menu>\n    </ng-container>\n    <mat-divider></mat-divider>\n    <span class=\"pointer-summary-slide-toggle-container\">\n      <div mat-menu-item>\n        <mat-slide-toggle\n          class=\"search-option\"\n          (change)=\"changePointerReverseSearch($event)\"\n          tooltip-position=\"below\"\n          *ngIf=\"hasPointerReverseSearchSource && !isTouchScreen\"\n          matTooltipShowDelay=\"500\"\n          [matTooltip]=\"\n            'igo.geo.search.pointerSearchSummary.tooltip' | translate\n          \"\n          (click)=\"$event.stopPropagation()\"\n          [checked]=\"pointerSummaryEnabled\"\n        >\n          {{ 'igo.geo.search.pointerSearchSummary.title' | translate }}\n        </mat-slide-toggle>\n      </div>\n      <div mat-menu-item>\n        <mat-slide-toggle\n          class=\"search-option\"\n          (change)=\"changeSearchResultsGeometry($event)\"\n          tooltip-position=\"below\"\n          matTooltipShowDelay=\"500\"\n          [matTooltip]=\"\n            'igo.geo.search.searchResultsGeometry.tooltip' | translate\n          \"\n          (click)=\"$event.stopPropagation()\"\n          [checked]=\"searchResultsGeometryEnabled\"\n        >\n          {{ 'igo.geo.search.searchResultsGeometry.title' | translate }}\n        </mat-slide-toggle>\n      </div>\n      <div mat-menu-item>\n        <mat-slide-toggle\n          class=\"search-option\"\n          (change)=\"reverseSearchCoordsFormat($event)\"\n          tooltip-position=\"below\"\n          matTooltipShowDelay=\"500\"\n          [matTooltip]=\"\n            reverseSearchCoordsFormatEnabled\n              ? ('igo.geo.search.reverseCoordFormat.tooltipLatLon' | translate)\n              : ('igo.geo.search.reverseCoordFormat.tooltipLonLat' | translate)\n          \"\n          (click)=\"$event.stopPropagation()\"\n          [checked]=\"reverseSearchCoordsFormatEnabled\"\n        >\n          {{ 'igo.geo.search.reverseCoordFormat.title' | translate }}\n        </mat-slide-toggle>\n      </div>\n    </span>\n  </mat-menu>\n</div>\n", styles: [":host{display:flex;align-items:center}.checkAllButton{text-align:center;padding:0 5px}.igo-search-settings-radio-group{display:flex;flex-direction:column;padding-right:16px}.igo-search-settings-checkbox mat-radio-button{display:flex}.igo-search-settings-search-source{display:flex;width:100%}.igo-search-settings-search-source mat-checkbox{display:flex;margin-left:5px;margin-right:5px}.search-option{display:block;margin-right:10px;margin-bottom:15px}.pointer-summary-slide-toggle-container{overflow-x:hidden}.pointer-summary-slide-toggle-container mat-slide-toggle{margin:10px 0}.igo-search-settings-button button,.igo-search-settings-button button .mat-ripple,.igo-search-settings-button button .mdc-icon-button__ripple{border-radius:0!important}.igo-search-settings-sub-menu{min-height:34px}\n"] }]
+                    ], 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>expand_more</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]=\"$any(source)\"\n          (click)=\"$event.stopPropagation()\"\n          (change)=\"onCheckSearchSource($event, source)\"\n        >\n        </mat-checkbox>\n        <button\n          *ngIf=\"source.settings.length > 0\"\n          [matMenuTriggerFor]=\"sub_menu\"\n          mat-menu-item\n        >\n          {{ source.title }}\n        </button>\n        <button mat-menu-item *ngIf=\"source.settings.length === 0\">\n          {{ source.title }}\n        </button>\n      </span>\n      <mat-menu #sub_menu=\"matMenu\">\n        <ng-container *ngFor=\"let setting of source.settings\">\n          <button mat-menu-item [matMenuTriggerFor]=\"test_sub_menu\">\n            {{\n              'igo.geo.search.searchSources.settings.' + setting.title\n                | translate\n            }}\n          </button>\n          <mat-menu\n            #test_sub_menu=\"matMenu\"\n            [ngSwitch]=\"setting.type\"\n            yPosition=\"above\"\n          >\n            <span *ngSwitchCase=\"'radiobutton'\">\n              <mat-radio-group\n                class=\"igo-search-settings-radio-group\"\n                [value]=\"setting\"\n              >\n                <mat-radio-button\n                  *ngFor=\"let settingValue of setting.values\"\n                  class=\"mat-typography\"\n                  [value]=\"settingValue\"\n                  [matTooltip]=\"getAvailableHashtagsValues(settingValue)\"\n                  [checked]=\"settingValue.enabled\"\n                  (click)=\"$event.stopPropagation()\"\n                  (change)=\"\n                    settingsValueCheckedRadioButton(\n                      $event,\n                      source,\n                      setting,\n                      settingValue\n                    )\n                  \"\n                >\n                  {{ settingValue.title | translate }}\n                </mat-radio-button>\n              </mat-radio-group>\n            </span>\n            <span *ngSwitchCase=\"'checkbox'\">\n              <div class=\"checkAllButton\" *ngIf=\"setting.values.length > 3\">\n                <button\n                  mat-raised-button\n                  (click)=\"checkUncheckAll($event, source, setting)\"\n                >\n                  {{\n                    setting.allEnabled || setting.allEnabled === undefined\n                      ? ('igo.geo.search.searchSources.settings.unselectAll'\n                        | translate)\n                      : ('igo.geo.search.searchSources.settings.selectAll'\n                        | translate)\n                  }}\n                </button>\n              </div>\n              <div\n                class=\"igo-search-settings-sub-menu\"\n                mat-menu-item\n                *ngFor=\"let settingValue of getAvailableValues(setting)\"\n              >\n                <mat-checkbox\n                  [style.display]=\"displayBlock\"\n                  [checked]=\"settingValue.enabled\"\n                  [value]=\"$any(setting)\"\n                  [matTooltip]=\"getAvailableHashtagsValues(settingValue)\"\n                  (click)=\"$event.stopPropagation()\"\n                  (change)=\"\n                    settingsValueCheckedCheckbox(\n                      $event,\n                      source,\n                      setting,\n                      settingValue\n                    )\n                  \"\n                >\n                  {{ settingValue.title | translate }}\n                </mat-checkbox>\n              </div>\n            </span>\n          </mat-menu>\n        </ng-container>\n      </mat-menu>\n    </ng-container>\n    <mat-divider></mat-divider>\n    <span class=\"pointer-summary-slide-toggle-container\">\n      <div mat-menu-item>\n        <mat-slide-toggle\n          class=\"search-option\"\n          (change)=\"changePointerReverseSearch($event)\"\n          tooltip-position=\"below\"\n          *ngIf=\"hasPointerReverseSearchSource && !isTouchScreen\"\n          matTooltipShowDelay=\"500\"\n          [matTooltip]=\"\n            'igo.geo.search.pointerSearchSummary.tooltip' | translate\n          \"\n          (click)=\"$event.stopPropagation()\"\n          [checked]=\"pointerSummaryEnabled\"\n        >\n          {{ 'igo.geo.search.pointerSearchSummary.title' | translate }}\n        </mat-slide-toggle>\n      </div>\n      <div mat-menu-item>\n        <mat-slide-toggle\n          class=\"search-option\"\n          (change)=\"changeSearchResultsGeometry($event)\"\n          tooltip-position=\"below\"\n          matTooltipShowDelay=\"500\"\n          [matTooltip]=\"\n            'igo.geo.search.searchResultsGeometry.tooltip' | translate\n          \"\n          (click)=\"$event.stopPropagation()\"\n          [checked]=\"searchResultsGeometryEnabled\"\n        >\n          {{ 'igo.geo.search.searchResultsGeometry.title' | translate }}\n        </mat-slide-toggle>\n      </div>\n      <div mat-menu-item>\n        <mat-slide-toggle\n          class=\"search-option\"\n          (change)=\"reverseSearchCoordsFormat($event)\"\n          tooltip-position=\"below\"\n          matTooltipShowDelay=\"500\"\n          [matTooltip]=\"\n            reverseSearchCoordsFormatEnabled\n              ? ('igo.geo.search.reverseCoordFormat.tooltipLatLon' | translate)\n              : ('igo.geo.search.reverseCoordFormat.tooltipLonLat' | translate)\n          \"\n          (click)=\"$event.stopPropagation()\"\n          [checked]=\"reverseSearchCoordsFormatEnabled\"\n        >\n          {{ 'igo.geo.search.reverseCoordFormat.title' | translate }}\n        </mat-slide-toggle>\n      </div>\n    </span>\n  </mat-menu>\n</div>\n", styles: [":host{display:flex;align-items:center}.checkAllButton{text-align:center;padding:0 5px}.igo-search-settings-radio-group{display:flex;flex-direction:column;padding-right:16px}.igo-search-settings-checkbox mat-radio-button{display:flex}.igo-search-settings-search-source{display:flex;width:100%}.igo-search-settings-search-source mat-checkbox{display:flex;margin-left:5px;margin-right:5px}.search-option{display:block;margin-right:10px;margin-bottom:15px}.pointer-summary-slide-toggle-container{overflow-x:hidden}.pointer-summary-slide-toggle-container mat-slide-toggle{margin:10px 0}.igo-search-settings-button button,.igo-search-settings-button button .mat-ripple,.igo-search-settings-button button .mdc-icon-button__ripple{border-radius:0!important}.igo-search-settings-sub-menu{min-height:34px}\n"] }]
         }], ctorParameters: () => [{ type: SearchSourceService }, { type: i2$1.MediaService }, { type: i3$2.StorageService }], propDecorators: { pointerSummaryEnabled: [{
                 type: Input
             }], searchResultsGeometryEnabled: [{
@@ -1647,7 +1647,7 @@ class SearchBarComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SearchBarComponent, deps: [{ token: i1.ConfigService }, { token: SearchService }, { token: SearchSourceService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: SearchBarComponent, isStandalone: true, selector: "igo-search-bar", inputs: { searchTypes: "searchTypes", withDivider: "withDivider", searchType: "searchType", term: "term", disabled: "disabled", pointerSummaryEnabled: "pointerSummaryEnabled", searchResultsGeometryEnabled: "searchResultsGeometryEnabled", reverseSearchCoordsFormatEnabled: "reverseSearchCoordsFormatEnabled", floatLabel: "floatLabel", appearance: "appearance", placeholder: "placeholder", label: "label", color: "color", termSplitter: "termSplitter", debounce: "debounce", minLength: "minLength", searchSelector: "searchSelector", searchSettings: "searchSettings", forceNA: "forceNA", store: "store" }, outputs: { pointerSummaryStatus: "pointerSummaryStatus", searchResultsGeometryStatus: "searchResultsGeometryStatus", reverseSearchCoordsFormatStatus: "reverseSearchCoordsFormatStatus", searchTermChange: "searchTermChange", search: "search", searchTypeChange: "searchTypeChange", clearFeature: "clearFeature", searchSettingsChange: "searchSettingsChange" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true, static: true }], ngImport: i0, 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    />\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 ::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}@media (max-width: 599px){:host ::ng-deep .mat-mdc-form-field-infix{width:158px}}:host ::ng-deep mat-form-field .mdc-line-ripple{display:none}:host ::ng-deep mat-form-field input{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.igo-search-bar-container{position:relative;width:100%;display:flex}mat-form-field{flex:1}mat-divider{margin:8px 0}.search-bar-buttons{position:relative;display:inline-flex}.search-bar-buttons>button:nth-child(2):before{content:\"\";border-right:1px solid #ddd;height:28px}igo-search-selector{background-color:#fff;top:0;border-radius:0}igo-search-settings{background-color:#fff;top:0;border-radius:0}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i6$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: SearchSelectorComponent, selector: "igo-search-selector", inputs: ["searchTypes", "searchType"], outputs: ["searchTypeChange"] }, { kind: "component", type: SearchSettingsComponent, selector: "igo-search-settings", inputs: ["pointerSummaryEnabled", "searchResultsGeometryEnabled", "reverseSearchCoordsFormatEnabled"], outputs: ["searchSourceChange", "pointerSummaryStatus", "searchResultsGeometryStatus", "reverseSearchCoordsFormatStatus"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: SearchBarComponent, isStandalone: true, selector: "igo-search-bar", inputs: { searchTypes: "searchTypes", withDivider: "withDivider", searchType: "searchType", term: "term", disabled: "disabled", pointerSummaryEnabled: "pointerSummaryEnabled", searchResultsGeometryEnabled: "searchResultsGeometryEnabled", reverseSearchCoordsFormatEnabled: "reverseSearchCoordsFormatEnabled", floatLabel: "floatLabel", appearance: "appearance", placeholder: "placeholder", label: "label", color: "color", termSplitter: "termSplitter", debounce: "debounce", minLength: "minLength", searchSelector: "searchSelector", searchSettings: "searchSettings", forceNA: "forceNA", store: "store" }, outputs: { pointerSummaryStatus: "pointerSummaryStatus", searchResultsGeometryStatus: "searchResultsGeometryStatus", reverseSearchCoordsFormatStatus: "reverseSearchCoordsFormatStatus", searchTermChange: "searchTermChange", search: "search", searchTypeChange: "searchTypeChange", clearFeature: "clearFeature", searchSettingsChange: "searchSettingsChange" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true, static: true }], ngImport: i0, 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    />\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>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>search</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 ::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}@media (max-width: 599px){:host ::ng-deep .mat-mdc-form-field-infix{width:158px}}:host ::ng-deep mat-form-field .mdc-line-ripple{display:none}:host ::ng-deep mat-form-field input{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.igo-search-bar-container{position:relative;width:100%;display:flex}mat-form-field{flex:1}mat-divider{margin:8px 0}.search-bar-buttons{position:relative;display:inline-flex}.search-bar-buttons>button:nth-child(2):before{content:\"\";border-right:1px solid #ddd;height:28px}igo-search-selector{background-color:#fff;top:0;border-radius:0}igo-search-settings{background-color:#fff;top:0;border-radius:0}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i6$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: SearchSelectorComponent, selector: "igo-search-selector", inputs: ["searchTypes", "searchType"], outputs: ["searchTypeChange"] }, { kind: "component", type: SearchSettingsComponent, selector: "igo-search-settings", inputs: ["pointerSummaryEnabled", "searchResultsGeometryEnabled", "reverseSearchCoordsFormatEnabled"], outputs: ["searchSourceChange", "pointerSummaryStatus", "searchResultsGeometryStatus", "reverseSearchCoordsFormatStatus"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SearchBarComponent, decorators: [{
             type: Component,
@@ -1664,7 +1664,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                         SearchSettingsComponent,
                         AsyncPipe,
                         TranslateModule
-                    ], 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    />\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 ::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}@media (max-width: 599px){:host ::ng-deep .mat-mdc-form-field-infix{width:158px}}:host ::ng-deep mat-form-field .mdc-line-ripple{display:none}:host ::ng-deep mat-form-field input{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.igo-search-bar-container{position:relative;width:100%;display:flex}mat-form-field{flex:1}mat-divider{margin:8px 0}.search-bar-buttons{position:relative;display:inline-flex}.search-bar-buttons>button:nth-child(2):before{content:\"\";border-right:1px solid #ddd;height:28px}igo-search-selector{background-color:#fff;top:0;border-radius:0}igo-search-settings{background-color:#fff;top:0;border-radius:0}\n"] }]
+                    ], 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    />\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>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>search</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 ::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}@media (max-width: 599px){:host ::ng-deep .mat-mdc-form-field-infix{width:158px}}:host ::ng-deep mat-form-field .mdc-line-ripple{display:none}:host ::ng-deep mat-form-field input{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.igo-search-bar-container{position:relative;width:100%;display:flex}mat-form-field{flex:1}mat-divider{margin:8px 0}.search-bar-buttons{position:relative;display:inline-flex}.search-bar-buttons>button:nth-child(2):before{content:\"\";border-right:1px solid #ddd;height:28px}igo-search-selector{background-color:#fff;top:0;border-radius:0}igo-search-settings{background-color:#fff;top:0;border-radius:0}\n"] }]
         }], ctorParameters: () => [{ type: i1.ConfigService }, { type: SearchService }, { type: SearchSourceService }], propDecorators: { searchTypes: [{
                 type: Input
             }], withDivider: [{
@@ -11622,7 +11622,7 @@ class FeatureDetailsComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: FeatureDetailsComponent, deps: [{ token: i1$1.HttpClient }, { token: i0.ChangeDetectorRef }, { token: i2$4.DomSanitizer }, { token: i3$3.NetworkService }, { token: i2$3.MessageService }, { token: i1.ConfigService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: FeatureDetailsComponent, isStandalone: true, selector: "igo-feature-details", inputs: { source: "source", map: "map", toolbox: "toolbox", feature: "feature" }, outputs: { routeEvent: "routeEvent", selectFeature: "selectFeature", htmlDisplayEvent: "htmlDisplayEvent" }, ngImport: i0, template: "<table\n  class=\"igo-striped mat-typography\"\n  *ngIf=\"\n    ready &&\n    feature &&\n    isObject(feature.properties) &&\n    feature.properties.target !== 'iframe'\n  \"\n>\n  <tbody>\n    <tr *ngFor=\"let property of filterFeatureProperties(feature) | keyvalue\">\n      <td\n        *ngIf=\"feature.properties.target === '_blank' && property.key === 'url'\"\n      >\n        <mat-icon matListItemIcon svgIcon=\"{{ icon }}\"></mat-icon>\n      </td>\n\n      <td\n        *ngIf=\"feature.properties.target === '_blank' && property.key === 'url'\"\n      >\n        <a\n          href=\"{{ property.value }}\"\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n        >\n          {{ 'igo.geo.targetHtmlUrl' | translate }} {{ title }}</a\n        >\n        <button\n          class=\"copyClipboard\"\n          mat-icon-button\n          (click)=\"copyTextToClipboard(property.value)\"\n        >\n          <mat-icon svgIcon=\"content-copy\"></mat-icon>\n        </button>\n      </td>\n\n      <td id=\"keyValue\" *ngIf=\"feature.properties.target === undefined\">\n        {{ property.key }}\n      </td>\n\n      <td\n        *ngIf=\"\n          feature.properties.target === undefined &&\n          !isObject(property.value) &&\n          !isUrl(property.value) &&\n          !isEmbeddedLink(property.value)\n        \"\n        [innerHTML]=\"property.value\"\n      ></td>\n\n      <td\n        *ngIf=\"\n          feature.properties.target === undefined &&\n          isEmbeddedLink(property.value)\n        \"\n      >\n        <u\n          [ngStyle]=\"{ cursor: 'pointer', color: 'blue' }\"\n          (click)=\"openSecureUrl(property.value)\"\n          >{{ getEmbeddedLinkText(property.value) }}</u\n        >\n      </td>\n\n      <td\n        *ngIf=\"\n          feature.properties.target === undefined &&\n          !isObject(property.value) &&\n          (isDoc(property.value) || isUrl(property.value)) &&\n          !isImg(property.value)\n        \"\n      >\n        <u\n          [ngStyle]=\"{ cursor: 'pointer', color: 'blue' }\"\n          (click)=\"openSecureUrl(property.value)\"\n          >{{ 'igo.geo.targetHtmlUrl' | translate }}</u\n        >\n        <button\n          class=\"copyClipboard\"\n          mat-icon-button\n          (click)=\"copyTextToClipboard(property.value)\"\n        >\n          <mat-icon svgIcon=\"content-copy\"></mat-icon>\n        </button>\n      </td>\n\n      <td\n        *ngIf=\"\n          feature.properties.target === undefined &&\n          !isObject(property.value) &&\n          isUrl(property.value) &&\n          isImg(property.value)\n        \"\n      >\n        <a\n          href=\"{{ property.value }}\"\n          target=\"_blank\"\n          (click)=\"openSecureUrl(property.value)\"\n          rel=\"noopener noreferrer\"\n        >\n          <img\n            igoImageError\n            src=\"{{ property.value | secureImage | async }}\"\n            width=\"225\"\n            height=\"auto\"\n          />\n        </a>\n      </td>\n\n      <td\n        *ngIf=\"\n          feature.properties.target === undefined && isObject(property.value)\n        \"\n        [innerHTML]=\"property.value | json\"\n      ></td>\n    </tr>\n  </tbody>\n</table>\n\n<iframe\n  *ngIf=\"isHtmlDisplay()\"\n  [srcdoc]=\"htmlSanitizer(feature.properties)\"\n  [src]=\"urlSanitizer(feature.properties.url)\"\n></iframe>\n", styles: ["table{width:100%}table td{padding:5px}#keyValue{width:30%}table ::ng-deep .routing{cursor:pointer}iframe{height:calc(100% - 4px);width:100%;border:0}.copyClipboard{border:none;background:transparent;cursor:pointer}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: ImageErrorDirective, selector: "[igoImageError]", inputs: ["errorImageUrl", "hideError"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: JsonPipe, name: "json" }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: SecureImagePipe, name: "secureImage" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: FeatureDetailsComponent, isStandalone: true, selector: "igo-feature-details", inputs: { source: "source", map: "map", toolbox: "toolbox", feature: "feature" }, outputs: { routeEvent: "routeEvent", selectFeature: "selectFeature", htmlDisplayEvent: "htmlDisplayEvent" }, ngImport: i0, template: "<table\n  class=\"igo-striped mat-typography\"\n  *ngIf=\"\n    ready &&\n    feature &&\n    isObject(feature.properties) &&\n    feature.properties.target !== 'iframe'\n  \"\n>\n  <tbody>\n    <tr *ngFor=\"let property of filterFeatureProperties(feature) | keyvalue\">\n      <td\n        *ngIf=\"feature.properties.target === '_blank' && property.key === 'url'\"\n      >\n        <mat-icon matListItemIcon>{{ icon }}</mat-icon>\n      </td>\n\n      <td\n        *ngIf=\"feature.properties.target === '_blank' && property.key === 'url'\"\n      >\n        <a\n          href=\"{{ property.value }}\"\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n        >\n          {{ 'igo.geo.targetHtmlUrl' | translate }} {{ title }}</a\n        >\n        <button\n          class=\"copyClipboard\"\n          mat-icon-button\n          (click)=\"copyTextToClipboard(property.value)\"\n        >\n          <mat-icon>content_copy</mat-icon>\n        </button>\n      </td>\n\n      <td id=\"keyValue\" *ngIf=\"feature.properties.target === undefined\">\n        {{ property.key }}\n      </td>\n\n      <td\n        *ngIf=\"\n          feature.properties.target === undefined &&\n          !isObject(property.value) &&\n          !isUrl(property.value) &&\n          !isEmbeddedLink(property.value)\n        \"\n        [innerHTML]=\"property.value\"\n      ></td>\n\n      <td\n        *ngIf=\"\n          feature.properties.target === undefined &&\n          isEmbeddedLink(property.value)\n        \"\n      >\n        <u\n          [ngStyle]=\"{ cursor: 'pointer', color: 'blue' }\"\n          (click)=\"openSecureUrl(property.value)\"\n          >{{ getEmbeddedLinkText(property.value) }}</u\n        >\n      </td>\n\n      <td\n        *ngIf=\"\n          feature.properties.target === undefined &&\n          !isObject(property.value) &&\n          (isDoc(property.value) || isUrl(property.value)) &&\n          !isImg(property.value)\n        \"\n      >\n        <u\n          [ngStyle]=\"{ cursor: 'pointer', color: 'blue' }\"\n          (click)=\"openSecureUrl(property.value)\"\n          >{{ 'igo.geo.targetHtmlUrl' | translate }}</u\n        >\n        <button\n          class=\"copyClipboard\"\n          mat-icon-button\n          (click)=\"copyTextToClipboard(property.value)\"\n        >\n          <mat-icon>content_copy</mat-icon>\n        </button>\n      </td>\n\n      <td\n        *ngIf=\"\n          feature.properties.target === undefined &&\n          !isObject(property.value) &&\n          isUrl(property.value) &&\n          isImg(property.value)\n        \"\n      >\n        <a\n          href=\"{{ property.value }}\"\n          target=\"_blank\"\n          (click)=\"openSecureUrl(property.value)\"\n          rel=\"noopener noreferrer\"\n        >\n          <img\n            igoImageError\n            src=\"{{ property.value | secureImage | async }}\"\n            width=\"225\"\n            height=\"auto\"\n          />\n        </a>\n      </td>\n\n      <td\n        *ngIf=\"\n          feature.properties.target === undefined && isObject(property.value)\n        \"\n        [innerHTML]=\"property.value | json\"\n      ></td>\n    </tr>\n  </tbody>\n</table>\n\n<iframe\n  *ngIf=\"isHtmlDisplay()\"\n  [srcdoc]=\"htmlSanitizer(feature.properties)\"\n  [src]=\"urlSanitizer(feature.properties.url)\"\n></iframe>\n", styles: ["table{width:100%}table td{padding:5px}#keyValue{width:30%}table ::ng-deep .routing{cursor:pointer}iframe{height:calc(100% - 4px);width:100%;border:0}.copyClipboard{border:none;background:transparent;cursor:pointer}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: ImageErrorDirective, selector: "[igoImageError]", inputs: ["errorImageUrl", "hideError"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: JsonPipe, name: "json" }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: SecureImagePipe, name: "secureImage" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: FeatureDetailsComponent, decorators: [{
             type: Component,
@@ -11637,7 +11637,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                         KeyValuePipe,
                         TranslateModule,
                         SecureImagePipe
-                    ], template: "<table\n  class=\"igo-striped mat-typography\"\n  *ngIf=\"\n    ready &&\n    feature &&\n    isObject(feature.properties) &&\n    feature.properties.target !== 'iframe'\n  \"\n>\n  <tbody>\n    <tr *ngFor=\"let property of filterFeatureProperties(feature) | keyvalue\">\n      <td\n        *ngIf=\"feature.properties.target === '_blank' && property.key === 'url'\"\n      >\n        <mat-icon matListItemIcon svgIcon=\"{{ icon }}\"></mat-icon>\n      </td>\n\n      <td\n        *ngIf=\"feature.properties.target === '_blank' && property.key === 'url'\"\n      >\n        <a\n          href=\"{{ property.value }}\"\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n        >\n          {{ 'igo.geo.targetHtmlUrl' | translate }} {{ title }}</a\n        >\n        <button\n          class=\"copyClipboard\"\n          mat-icon-button\n          (click)=\"copyTextToClipboard(property.value)\"\n        >\n          <mat-icon svgIcon=\"content-copy\"></mat-icon>\n        </button>\n      </td>\n\n      <td id=\"keyValue\" *ngIf=\"feature.properties.target === undefined\">\n        {{ property.key }}\n      </td>\n\n      <td\n        *ngIf=\"\n          feature.properties.target === undefined &&\n          !isObject(property.value) &&\n          !isUrl(property.value) &&\n          !isEmbeddedLink(property.value)\n        \"\n        [innerHTML]=\"property.value\"\n      ></td>\n\n      <td\n        *ngIf=\"\n          feature.properties.target === undefined &&\n          isEmbeddedLink(property.value)\n        \"\n      >\n        <u\n          [ngStyle]=\"{ cursor: 'pointer', color: 'blue' }\"\n          (click)=\"openSecureUrl(property.value)\"\n          >{{ getEmbeddedLinkText(property.value) }}</u\n        >\n      </td>\n\n      <td\n        *ngIf=\"\n          feature.properties.target === undefined &&\n          !isObject(property.value) &&\n          (isDoc(property.value) || isUrl(property.value)) &&\n          !isImg(property.value)\n        \"\n      >\n        <u\n          [ngStyle]=\"{ cursor: 'pointer', color: 'blue' }\"\n          (click)=\"openSecureUrl(property.value)\"\n          >{{ 'igo.geo.targetHtmlUrl' | translate }}</u\n        >\n        <button\n          class=\"copyClipboard\"\n          mat-icon-button\n          (click)=\"copyTextToClipboard(property.value)\"\n        >\n          <mat-icon svgIcon=\"content-copy\"></mat-icon>\n        </button>\n      </td>\n\n      <td\n        *ngIf=\"\n          feature.properties.target === undefined &&\n          !isObject(property.value) &&\n          isUrl(property.value) &&\n          isImg(property.value)\n        \"\n      >\n        <a\n          href=\"{{ property.value }}\"\n          target=\"_blank\"\n          (click)=\"openSecureUrl(property.value)\"\n          rel=\"noopener noreferrer\"\n        >\n          <img\n            igoImageError\n            src=\"{{ property.value | secureImage | async }}\"\n            width=\"225\"\n            height=\"auto\"\n          />\n        </a>\n      </td>\n\n      <td\n        *ngIf=\"\n          feature.properties.target === undefined && isObject(property.value)\n        \"\n        [innerHTML]=\"property.value | json\"\n      ></td>\n    </tr>\n  </tbody>\n</table>\n\n<iframe\n  *ngIf=\"isHtmlDisplay()\"\n  [srcdoc]=\"htmlSanitizer(feature.properties)\"\n  [src]=\"urlSanitizer(feature.properties.url)\"\n></iframe>\n", styles: ["table{width:100%}table td{padding:5px}#keyValue{width:30%}table ::ng-deep .routing{cursor:pointer}iframe{height:calc(100% - 4px);width:100%;border:0}.copyClipboard{border:none;background:transparent;cursor:pointer}\n"] }]
+                    ], template: "<table\n  class=\"igo-striped mat-typography\"\n  *ngIf=\"\n    ready &&\n    feature &&\n    isObject(feature.properties) &&\n    feature.properties.target !== 'iframe'\n  \"\n>\n  <tbody>\n    <tr *ngFor=\"let property of filterFeatureProperties(feature) | keyvalue\">\n      <td\n        *ngIf=\"feature.properties.target === '_blank' && property.key === 'url'\"\n      >\n        <mat-icon matListItemIcon>{{ icon }}</mat-icon>\n      </td>\n\n      <td\n        *ngIf=\"feature.properties.target === '_blank' && property.key === 'url'\"\n      >\n        <a\n          href=\"{{ property.value }}\"\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n        >\n          {{ 'igo.geo.targetHtmlUrl' | translate }} {{ title }}</a\n        >\n        <button\n          class=\"copyClipboard\"\n          mat-icon-button\n          (click)=\"copyTextToClipboard(property.value)\"\n        >\n          <mat-icon>content_copy</mat-icon>\n        </button>\n      </td>\n\n      <td id=\"keyValue\" *ngIf=\"feature.properties.target === undefined\">\n        {{ property.key }}\n      </td>\n\n      <td\n        *ngIf=\"\n          feature.properties.target === undefined &&\n          !isObject(property.value) &&\n          !isUrl(property.value) &&\n          !isEmbeddedLink(property.value)\n        \"\n        [innerHTML]=\"property.value\"\n      ></td>\n\n      <td\n        *ngIf=\"\n          feature.properties.target === undefined &&\n          isEmbeddedLink(property.value)\n        \"\n      >\n        <u\n          [ngStyle]=\"{ cursor: 'pointer', color: 'blue' }\"\n          (click)=\"openSecureUrl(property.value)\"\n          >{{ getEmbeddedLinkText(property.value) }}</u\n        >\n      </td>\n\n      <td\n        *ngIf=\"\n          feature.properties.target === undefined &&\n          !isObject(property.value) &&\n          (isDoc(property.value) || isUrl(property.value)) &&\n          !isImg(property.value)\n        \"\n      >\n        <u\n          [ngStyle]=\"{ cursor: 'pointer', color: 'blue' }\"\n          (click)=\"openSecureUrl(property.value)\"\n          >{{ 'igo.geo.targetHtmlUrl' | translate }}</u\n        >\n        <button\n          class=\"copyClipboard\"\n          mat-icon-button\n          (click)=\"copyTextToClipboard(property.value)\"\n        >\n          <mat-icon>content_copy</mat-icon>\n        </button>\n      </td>\n\n      <td\n        *ngIf=\"\n          feature.properties.target === undefined &&\n          !isObject(property.value) &&\n          isUrl(property.value) &&\n          isImg(property.value)\n        \"\n      >\n        <a\n          href=\"{{ property.value }}\"\n          target=\"_blank\"\n          (click)=\"openSecureUrl(property.value)\"\n          rel=\"noopener noreferrer\"\n        >\n          <img\n            igoImageError\n            src=\"{{ property.value | secureImage | async }}\"\n            width=\"225\"\n            height=\"auto\"\n          />\n        </a>\n      </td>\n\n      <td\n        *ngIf=\"\n          feature.properties.target === undefined && isObject(property.value)\n        \"\n        [innerHTML]=\"property.value | json\"\n      ></td>\n    </tr>\n  </tbody>\n</table>\n\n<iframe\n  *ngIf=\"isHtmlDisplay()\"\n  [srcdoc]=\"htmlSanitizer(feature.properties)\"\n  [src]=\"urlSanitizer(feature.properties.url)\"\n></iframe>\n", styles: ["table{width:100%}table td{padding:5px}#keyValue{width:30%}table ::ng-deep .routing{cursor:pointer}iframe{height:calc(100% - 4px);width:100%;border:0}.copyClipboard{border:none;background:transparent;cursor:pointer}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.HttpClient }, { type: i0.ChangeDetectorRef }, { type: i2$4.DomSanitizer }, { type: i3$3.NetworkService }, { type: i2$3.MessageService }, { type: i1.ConfigService }], propDecorators: { source: [{
                 type: Input
             }], map: [{
@@ -15182,7 +15182,7 @@ class MeasurerComponent {
         this.activeAreaUnit = areaUnit ? areaUnit : this.activeAreaUnit;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: MeasurerComponent, deps: [{ token: i1$2.LanguageService }, { token: i1$5.MatDialog }, { token: i3$2.StorageService }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: MeasurerComponent, isStandalone: true, selector: "igo-measurer", inputs: { map: "map", store: "store", activeMeasureType: "activeMeasureType", minSegmentLength: "minSegmentLength" }, viewQueries: [{ propertyName: "table", first: true, predicate: ["table"], descendants: true, static: true }], ngImport: i0, template: "<div>\n  <div class=\"measure-type-toggle mat-typography\">\n    <mat-button-toggle-group\n      [value]=\"activeMeasureType\"\n      (change)=\"onMeasureTypeChange($event.value)\"\n    >\n      <mat-button-toggle [value]=\"measureType.Length\">\n        {{ 'igo.geo.measure.' + measureType.Length | translate }}\n      </mat-button-toggle>\n      <mat-button-toggle [value]=\"measureType.Area\">\n        {{ 'igo.geo.measure.' + measureType.Area | translate }}\n      </mat-button-toggle>\n    </mat-button-toggle-group>\n  </div>\n\n  <div class=\"measure-options mat-typography\">\n    <mat-slide-toggle\n      [disabled]=\"drawControlIsDisabled\"\n      [checked]=\"drawControlIsActive\"\n      [labelPosition]=\"'before'\"\n      (change)=\"onToggleDrawControl($event.checked)\"\n    >\n      {{ 'igo.geo.measure.toggleActive' | translate }}\n    </mat-slide-toggle>\n\n    <mat-divider *ngIf=\"hasLine$ | async\"></mat-divider>\n\n    <mat-slide-toggle\n      *ngIf=\"hasLine$ | async\"\n      [checked]=\"displayLines\"\n      [labelPosition]=\"'before'\"\n      (change)=\"onToggleDisplayLines($event.checked)\"\n    >\n      {{ 'igo.geo.measure.toggleDisplayLines' | translate }}\n    </mat-slide-toggle>\n\n    <mat-divider *ngIf=\"(hasLine$ | async) || (hasArea$ | async)\"></mat-divider>\n\n    <mat-slide-toggle\n      *ngIf=\"hasArea$ | async\"\n      [checked]=\"displayDistance\"\n      [labelPosition]=\"'before'\"\n      (change)=\"onToggleDisplayDistance($event.checked)\"\n    >\n      {{ 'igo.geo.measure.toggleDisplayDistance' | translate }}\n    </mat-slide-toggle>\n\n    <mat-slide-toggle\n      *ngIf=\"hasArea$ | async\"\n      [checked]=\"displayAreas\"\n      [labelPosition]=\"'before'\"\n      (change)=\"onToggleDisplayAreas($event.checked)\"\n    >\n      {{ 'igo.geo.measure.toggleDisplayAreas' | translate }}\n    </mat-slide-toggle>\n\n    <mat-divider *ngIf=\"hasArea$ | async\"></mat-divider>\n\n    <mat-slide-toggle\n      [checked]=\"measureUnitsAuto\"\n      [labelPosition]=\"'before'\"\n      (change)=\"onToggleMeasureUnitsAuto($event.checked)\"\n    >\n      {{ 'igo.geo.measure.toggleAutoUnits' | translate }}\n    </mat-slide-toggle>\n  </div>\n\n  <ng-container *ngIf=\"measure$ | async as measure\">\n    <igo-measurer-item\n      *ngIf=\"\n        activeMeasureType === measureType.Length ||\n        activeMeasureType === measureType.Area\n      \"\n      [measureType]=\"measureType.Length\"\n      [measureUnit]=\"activeLengthUnit\"\n      [measure]=\"measure.length\"\n      [auto]=\"measureUnitsAuto\"\n      [placeholder]=\"\n        (activeMeasureType === measureType.Area\n          ? 'igo.geo.measure.perimeter'\n          : 'igo.geo.measure.length'\n        ) | translate\n      \"\n      (measureUnitChange)=\"onLengthUnitChange($any($event))\"\n    >\n    </igo-measurer-item>\n\n    <igo-measurer-item\n      *ngIf=\"activeMeasureType === measureType.Area\"\n      [measureType]=\"measureType.Area\"\n      [measureUnit]=\"activeAreaUnit\"\n      [measure]=\"measure.area\"\n      [auto]=\"measureUnitsAuto\"\n      [placeholder]=\"'igo.geo.measure.area' | translate\"\n      (measureUnitChange)=\"onAreaUnitChange($any($event))\"\n    >\n    </igo-measurer-item>\n  </ng-container>\n\n  <mat-divider *ngIf=\"(hasLine$ | async) || (hasArea$ | async)\"></mat-divider>\n\n  <div class=\"measure-store-buttons\">\n    <button\n      *ngIf=\"(hasLine$ | async) || (hasArea$ | async)\"\n      mat-icon-button\n      [matTooltip]=\"'igo.geo.measure.actionbar.calculate.tooltip' | translate\"\n      [disabled]=\"(selectedFeatures$ | async).length === 0\"\n      color=\"accent\"\n      (click)=\"onCalculateClick()\"\n    >\n      <mat-icon svgIcon=\"calculator\"></mat-icon>\n    </button>\n\n    <button\n      *ngIf=\"(hasLine$ | async) || (hasArea$ | async)\"\n      mat-icon-button\n      [matTooltip]=\"'igo.geo.measure.actionbar.delete.tooltip' | translate\"\n      [disabled]=\"(selectedFeatures$ | async).length === 0\"\n      color=\"warn\"\n      (click)=\"onDeleteClick()\"\n    >\n      <mat-icon svgIcon=\"delete\"></mat-icon>\n    </button>\n\n    <!--button\n      mat-icon-button\n      [matTooltip]=\"'igo.geo.measure.actionbar.modify.tooltip' | translate\"\n      [disabled]=\"(selectedFeatures$ | async).length !== 1\"\n      (click)=\"onModifyClick()\">\n      <mat-icon svgIcon=\"edit\"></mat-icon>\n    </button-->\n  </div>\n\n  <igo-entity-table\n    #table\n    class=\"table-compact\"\n    [store]=\"store\"\n    [template]=\"tableTemplate\"\n  >\n  </igo-entity-table>\n</div>\n", styles: [":host .measure-type-toggle{padding:10px;text-align:center}:host .measure-type-toggle mat-button-toggle-group{width:100%}:host .measure-type-toggle mat-button-toggle-group mat-button-toggle{width:50%}:host .measure-options mat-slide-toggle{width:100%;padding:10px}:host .measure-options mat-slide-toggle ::ng-deep .mdc-form-field{width:100%}:host .measure-options mat-slide-toggle ::ng-deep .mdc-label{margin-left:0;width:calc(100% - 60px)}:host .measure-store-buttons{margin-left:-2px}:host .measure-store-buttons button:first-of-type{margin-left:14px}:host .table-compact ::ng-deep .mat-mdc-header-cell.mat-column-selectionCheckbox{width:52px}:host .igo-map-tooltip{position:relative;border-radius:4px;padding:4px 8px;white-space:nowrap}::ng-deep .igo-map-tooltip-hidden,.igo-map-tooltip-measure-by-display{display:none}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i4$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i4$1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i5$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i6$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: MeasurerItemComponent, selector: "igo-measurer-item", inputs: ["measureType", "measureUnit", "measure", "auto", "placeholder"], outputs: ["measureUnitChange"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: EntityTableComponent, selector: "igo-entity-table", inputs: ["store", "paginator", "template", "scrollBehavior", "sortNullsFirst", "withPaginator", "paginatorOptions"], outputs: ["entityClick", "entitySelectChange", "entitySortChange"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: MeasurerComponent, isStandalone: true, selector: "igo-measurer", inputs: { map: "map", store: "store", activeMeasureType: "activeMeasureType", minSegmentLength: "minSegmentLength" }, viewQueries: [{ propertyName: "table", first: true, predicate: ["table"], descendants: true, static: true }], ngImport: i0, template: "<div>\n  <div class=\"measure-type-toggle mat-typography\">\n    <mat-button-toggle-group\n      [value]=\"activeMeasureType\"\n      (change)=\"onMeasureTypeChange($event.value)\"\n    >\n      <mat-button-toggle [value]=\"measureType.Length\">\n        {{ 'igo.geo.measure.' + measureType.Length | translate }}\n      </mat-button-toggle>\n      <mat-button-toggle [value]=\"measureType.Area\">\n        {{ 'igo.geo.measure.' + measureType.Area | translate }}\n      </mat-button-toggle>\n    </mat-button-toggle-group>\n  </div>\n\n  <div class=\"measure-options mat-typography\">\n    <mat-slide-toggle\n      [disabled]=\"drawControlIsDisabled\"\n      [checked]=\"drawControlIsActive\"\n      [labelPosition]=\"'before'\"\n      (change)=\"onToggleDrawControl($event.checked)\"\n    >\n      {{ 'igo.geo.measure.toggleActive' | translate }}\n    </mat-slide-toggle>\n\n    <mat-divider *ngIf=\"hasLine$ | async\"></mat-divider>\n\n    <mat-slide-toggle\n      *ngIf=\"hasLine$ | async\"\n      [checked]=\"displayLines\"\n      [labelPosition]=\"'before'\"\n      (change)=\"onToggleDisplayLines($event.checked)\"\n    >\n      {{ 'igo.geo.measure.toggleDisplayLines' | translate }}\n    </mat-slide-toggle>\n\n    <mat-divider *ngIf=\"(hasLine$ | async) || (hasArea$ | async)\"></mat-divider>\n\n    <mat-slide-toggle\n      *ngIf=\"hasArea$ | async\"\n      [checked]=\"displayDistance\"\n      [labelPosition]=\"'before'\"\n      (change)=\"onToggleDisplayDistance($event.checked)\"\n    >\n      {{ 'igo.geo.measure.toggleDisplayDistance' | translate }}\n    </mat-slide-toggle>\n\n    <mat-slide-toggle\n      *ngIf=\"hasArea$ | async\"\n      [checked]=\"displayAreas\"\n      [labelPosition]=\"'before'\"\n      (change)=\"onToggleDisplayAreas($event.checked)\"\n    >\n      {{ 'igo.geo.measure.toggleDisplayAreas' | translate }}\n    </mat-slide-toggle>\n\n    <mat-divider *ngIf=\"hasArea$ | async\"></mat-divider>\n\n    <mat-slide-toggle\n      [checked]=\"measureUnitsAuto\"\n      [labelPosition]=\"'before'\"\n      (change)=\"onToggleMeasureUnitsAuto($event.checked)\"\n    >\n      {{ 'igo.geo.measure.toggleAutoUnits' | translate }}\n    </mat-slide-toggle>\n  </div>\n\n  <ng-container *ngIf=\"measure$ | async as measure\">\n    <igo-measurer-item\n      *ngIf=\"\n        activeMeasureType === measureType.Length ||\n        activeMeasureType === measureType.Area\n      \"\n      [measureType]=\"measureType.Length\"\n      [measureUnit]=\"activeLengthUnit\"\n      [measure]=\"measure.length\"\n      [auto]=\"measureUnitsAuto\"\n      [placeholder]=\"\n        (activeMeasureType === measureType.Area\n          ? 'igo.geo.measure.perimeter'\n          : 'igo.geo.measure.length'\n        ) | translate\n      \"\n      (measureUnitChange)=\"onLengthUnitChange($any($event))\"\n    >\n    </igo-measurer-item>\n\n    <igo-measurer-item\n      *ngIf=\"activeMeasureType === measureType.Area\"\n      [measureType]=\"measureType.Area\"\n      [measureUnit]=\"activeAreaUnit\"\n      [measure]=\"measure.area\"\n      [auto]=\"measureUnitsAuto\"\n      [placeholder]=\"'igo.geo.measure.area' | translate\"\n      (measureUnitChange)=\"onAreaUnitChange($any($event))\"\n    >\n    </igo-measurer-item>\n  </ng-container>\n\n  <mat-divider *ngIf=\"(hasLine$ | async) || (hasArea$ | async)\"></mat-divider>\n\n  <div class=\"measure-store-buttons\">\n    <button\n      *ngIf=\"(hasLine$ | async) || (hasArea$ | async)\"\n      mat-icon-button\n      [matTooltip]=\"'igo.geo.measure.actionbar.calculate.tooltip' | translate\"\n      [disabled]=\"(selectedFeatures$ | async).length === 0\"\n      color=\"accent\"\n      (click)=\"onCalculateClick()\"\n    >\n      <mat-icon>calculate</mat-icon>\n    </button>\n\n    <button\n      *ngIf=\"(hasLine$ | async) || (hasArea$ | async)\"\n      mat-icon-button\n      [matTooltip]=\"'igo.geo.measure.actionbar.delete.tooltip' | translate\"\n      [disabled]=\"(selectedFeatures$ | async).length === 0\"\n      color=\"warn\"\n      (click)=\"onDeleteClick()\"\n    >\n      <mat-icon>delete</mat-icon>\n    </button>\n  </div>\n\n  <igo-entity-table\n    #table\n    class=\"table-compact\"\n    [store]=\"store\"\n    [template]=\"tableTemplate\"\n  >\n  </igo-entity-table>\n</div>\n", styles: [":host .measure-type-toggle{padding:10px;text-align:center}:host .measure-type-toggle mat-button-toggle-group{width:100%}:host .measure-type-toggle mat-button-toggle-group mat-button-toggle{width:50%}:host .measure-options mat-slide-toggle{width:100%;padding:10px}:host .measure-options mat-slide-toggle ::ng-deep .mdc-form-field{width:100%}:host .measure-options mat-slide-toggle ::ng-deep .mdc-label{margin-left:0;width:calc(100% - 60px)}:host .measure-store-buttons{margin-left:-2px}:host .measure-store-buttons button:first-of-type{margin-left:14px}:host .table-compact ::ng-deep .mat-mdc-header-cell.mat-column-selectionCheckbox{width:52px}:host .igo-map-tooltip{position:relative;border-radius:4px;padding:4px 8px;white-space:nowrap}::ng-deep .igo-map-tooltip-hidden,.igo-map-tooltip-measure-by-display{display:none}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i4$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i4$1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i5$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i6$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: MeasurerItemComponent, selector: "igo-measurer-item", inputs: ["measureType", "measureUnit", "measure", "auto", "placeholder"], outputs: ["measureUnitChange"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: EntityTableComponent, selector: "igo-entity-table", inputs: ["store", "paginator", "template", "scrollBehavior", "sortNullsFirst", "withPaginator", "paginatorOptions"], outputs: ["entityClick", "entitySelectChange", "entitySortChange"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: MeasurerComponent, decorators: [{
             type: Component,
@@ -15198,7 +15198,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                         EntityTableComponent,
                         AsyncPipe,
                         TranslateModule
-                    ], template: "<div>\n  <div class=\"measure-type-toggle mat-typography\">\n    <mat-button-toggle-group\n      [value]=\"activeMeasureType\"\n      (change)=\"onMeasureTypeChange($event.value)\"\n    >\n      <mat-button-toggle [value]=\"measureType.Length\">\n        {{ 'igo.geo.measure.' + measureType.Length | translate }}\n      </mat-button-toggle>\n      <mat-button-toggle [value]=\"measureType.Area\">\n        {{ 'igo.geo.measure.' + measureType.Area | translate }}\n      </mat-button-toggle>\n    </mat-button-toggle-group>\n  </div>\n\n  <div class=\"measure-options mat-typography\">\n    <mat-slide-toggle\n      [disabled]=\"drawControlIsDisabled\"\n      [checked]=\"drawControlIsActive\"\n      [labelPosition]=\"'before'\"\n      (change)=\"onToggleDrawControl($event.checked)\"\n    >\n      {{ 'igo.geo.measure.toggleActive' | translate }}\n    </mat-slide-toggle>\n\n    <mat-divider *ngIf=\"hasLine$ | async\"></mat-divider>\n\n    <mat-slide-toggle\n      *ngIf=\"hasLine$ | async\"\n      [checked]=\"displayLines\"\n      [labelPosition]=\"'before'\"\n      (change)=\"onToggleDisplayLines($event.checked)\"\n    >\n      {{ 'igo.geo.measure.toggleDisplayLines' | translate }}\n    </mat-slide-toggle>\n\n    <mat-divider *ngIf=\"(hasLine$ | async) || (hasArea$ | async)\"></mat-divider>\n\n    <mat-slide-toggle\n      *ngIf=\"hasArea$ | async\"\n      [checked]=\"displayDistance\"\n      [labelPosition]=\"'before'\"\n      (change)=\"onToggleDisplayDistance($event.checked)\"\n    >\n      {{ 'igo.geo.measure.toggleDisplayDistance' | translate }}\n    </mat-slide-toggle>\n\n    <mat-slide-toggle\n      *ngIf=\"hasArea$ | async\"\n      [checked]=\"displayAreas\"\n      [labelPosition]=\"'before'\"\n      (change)=\"onToggleDisplayAreas($event.checked)\"\n    >\n      {{ 'igo.geo.measure.toggleDisplayAreas' | translate }}\n    </mat-slide-toggle>\n\n    <mat-divider *ngIf=\"hasArea$ | async\"></mat-divider>\n\n    <mat-slide-toggle\n      [checked]=\"measureUnitsAuto\"\n      [labelPosition]=\"'before'\"\n      (change)=\"onToggleMeasureUnitsAuto($event.checked)\"\n    >\n      {{ 'igo.geo.measure.toggleAutoUnits' | translate }}\n    </mat-slide-toggle>\n  </div>\n\n  <ng-container *ngIf=\"measure$ | async as measure\">\n    <igo-measurer-item\n      *ngIf=\"\n        activeMeasureType === measureType.Length ||\n        activeMeasureType === measureType.Area\n      \"\n      [measureType]=\"measureType.Length\"\n      [measureUnit]=\"activeLengthUnit\"\n      [measure]=\"measure.length\"\n      [auto]=\"measureUnitsAuto\"\n      [placeholder]=\"\n        (activeMeasureType === measureType.Area\n          ? 'igo.geo.measure.perimeter'\n          : 'igo.geo.measure.length'\n        ) | translate\n      \"\n      (measureUnitChange)=\"onLengthUnitChange($any($event))\"\n    >\n    </igo-measurer-item>\n\n    <igo-measurer-item\n      *ngIf=\"activeMeasureType === measureType.Area\"\n      [measureType]=\"measureType.Area\"\n      [measureUnit]=\"activeAreaUnit\"\n      [measure]=\"measure.area\"\n      [auto]=\"measureUnitsAuto\"\n      [placeholder]=\"'igo.geo.measure.area' | translate\"\n      (measureUnitChange)=\"onAreaUnitChange($any($event))\"\n    >\n    </igo-measurer-item>\n  </ng-container>\n\n  <mat-divider *ngIf=\"(hasLine$ | async) || (hasArea$ | async)\"></mat-divider>\n\n  <div class=\"measure-store-buttons\">\n    <button\n      *ngIf=\"(hasLine$ | async) || (hasArea$ | async)\"\n      mat-icon-button\n      [matTooltip]=\"'igo.geo.measure.actionbar.calculate.tooltip' | translate\"\n      [disabled]=\"(selectedFeatures$ | async).length === 0\"\n      color=\"accent\"\n      (click)=\"onCalculateClick()\"\n    >\n      <mat-icon svgIcon=\"calculator\"></mat-icon>\n    </button>\n\n    <button\n      *ngIf=\"(hasLine$ | async) || (hasArea$ | async)\"\n      mat-icon-button\n      [matTooltip]=\"'igo.geo.measure.actionbar.delete.tooltip' | translate\"\n      [disabled]=\"(selectedFeatures$ | async).length === 0\"\n      color=\"warn\"\n      (click)=\"onDeleteClick()\"\n    >\n      <mat-icon svgIcon=\"delete\"></mat-icon>\n    </button>\n\n    <!--button\n      mat-icon-button\n      [matTooltip]=\"'igo.geo.measure.actionbar.modify.tooltip' | translate\"\n      [disabled]=\"(selectedFeatures$ | async).length !== 1\"\n      (click)=\"onModifyClick()\">\n      <mat-icon svgIcon=\"edit\"></mat-icon>\n    </button-->\n  </div>\n\n  <igo-entity-table\n    #table\n    class=\"table-compact\"\n    [store]=\"store\"\n    [template]=\"tableTemplate\"\n  >\n  </igo-entity-table>\n</div>\n", styles: [":host .measure-type-toggle{padding:10px;text-align:center}:host .measure-type-toggle mat-button-toggle-group{width:100%}:host .measure-type-toggle mat-button-toggle-group mat-button-toggle{width:50%}:host .measure-options mat-slide-toggle{width:100%;padding:10px}:host .measure-options mat-slide-toggle ::ng-deep .mdc-form-field{width:100%}:host .measure-options mat-slide-toggle ::ng-deep .mdc-label{margin-left:0;width:calc(100% - 60px)}:host .measure-store-buttons{margin-left:-2px}:host .measure-store-buttons button:first-of-type{margin-left:14px}:host .table-compact ::ng-deep .mat-mdc-header-cell.mat-column-selectionCheckbox{width:52px}:host .igo-map-tooltip{position:relative;border-radius:4px;padding:4px 8px;white-space:nowrap}::ng-deep .igo-map-tooltip-hidden,.igo-map-tooltip-measure-by-display{display:none}\n"] }]
+                    ], template: "<div>\n  <div class=\"measure-type-toggle mat-typography\">\n    <mat-button-toggle-group\n      [value]=\"activeMeasureType\"\n      (change)=\"onMeasureTypeChange($event.value)\"\n    >\n      <mat-button-toggle [value]=\"measureType.Length\">\n        {{ 'igo.geo.measure.' + measureType.Length | translate }}\n      </mat-button-toggle>\n      <mat-button-toggle [value]=\"measureType.Area\">\n        {{ 'igo.geo.measure.' + measureType.Area | translate }}\n      </mat-button-toggle>\n    </mat-button-toggle-group>\n  </div>\n\n  <div class=\"measure-options mat-typography\">\n    <mat-slide-toggle\n      [disabled]=\"drawControlIsDisabled\"\n      [checked]=\"drawControlIsActive\"\n      [labelPosition]=\"'before'\"\n      (change)=\"onToggleDrawControl($event.checked)\"\n    >\n      {{ 'igo.geo.measure.toggleActive' | translate }}\n    </mat-slide-toggle>\n\n    <mat-divider *ngIf=\"hasLine$ | async\"></mat-divider>\n\n    <mat-slide-toggle\n      *ngIf=\"hasLine$ | async\"\n      [checked]=\"displayLines\"\n      [labelPosition]=\"'before'\"\n      (change)=\"onToggleDisplayLines($event.checked)\"\n    >\n      {{ 'igo.geo.measure.toggleDisplayLines' | translate }}\n    </mat-slide-toggle>\n\n    <mat-divider *ngIf=\"(hasLine$ | async) || (hasArea$ | async)\"></mat-divider>\n\n    <mat-slide-toggle\n      *ngIf=\"hasArea$ | async\"\n      [checked]=\"displayDistance\"\n      [labelPosition]=\"'before'\"\n      (change)=\"onToggleDisplayDistance($event.checked)\"\n    >\n      {{ 'igo.geo.measure.toggleDisplayDistance' | translate }}\n    </mat-slide-toggle>\n\n    <mat-slide-toggle\n      *ngIf=\"hasArea$ | async\"\n      [checked]=\"displayAreas\"\n      [labelPosition]=\"'before'\"\n      (change)=\"onToggleDisplayAreas($event.checked)\"\n    >\n      {{ 'igo.geo.measure.toggleDisplayAreas' | translate }}\n    </mat-slide-toggle>\n\n    <mat-divider *ngIf=\"hasArea$ | async\"></mat-divider>\n\n    <mat-slide-toggle\n      [checked]=\"measureUnitsAuto\"\n      [labelPosition]=\"'before'\"\n      (change)=\"onToggleMeasureUnitsAuto($event.checked)\"\n    >\n      {{ 'igo.geo.measure.toggleAutoUnits' | translate }}\n    </mat-slide-toggle>\n  </div>\n\n  <ng-container *ngIf=\"measure$ | async as measure\">\n    <igo-measurer-item\n      *ngIf=\"\n        activeMeasureType === measureType.Length ||\n        activeMeasureType === measureType.Area\n      \"\n      [measureType]=\"measureType.Length\"\n      [measureUnit]=\"activeLengthUnit\"\n      [measure]=\"measure.length\"\n      [auto]=\"measureUnitsAuto\"\n      [placeholder]=\"\n        (activeMeasureType === measureType.Area\n          ? 'igo.geo.measure.perimeter'\n          : 'igo.geo.measure.length'\n        ) | translate\n      \"\n      (measureUnitChange)=\"onLengthUnitChange($any($event))\"\n    >\n    </igo-measurer-item>\n\n    <igo-measurer-item\n      *ngIf=\"activeMeasureType === measureType.Area\"\n      [measureType]=\"measureType.Area\"\n      [measureUnit]=\"activeAreaUnit\"\n      [measure]=\"measure.area\"\n      [auto]=\"measureUnitsAuto\"\n      [placeholder]=\"'igo.geo.measure.area' | translate\"\n      (measureUnitChange)=\"onAreaUnitChange($any($event))\"\n    >\n    </igo-measurer-item>\n  </ng-container>\n\n  <mat-divider *ngIf=\"(hasLine$ | async) || (hasArea$ | async)\"></mat-divider>\n\n  <div class=\"measure-store-buttons\">\n    <button\n      *ngIf=\"(hasLine$ | async) || (hasArea$ | async)\"\n      mat-icon-button\n      [matTooltip]=\"'igo.geo.measure.actionbar.calculate.tooltip' | translate\"\n      [disabled]=\"(selectedFeatures$ | async).length === 0\"\n      color=\"accent\"\n      (click)=\"onCalculateClick()\"\n    >\n      <mat-icon>calculate</mat-icon>\n    </button>\n\n    <button\n      *ngIf=\"(hasLine$ | async) || (hasArea$ | async)\"\n      mat-icon-button\n      [matTooltip]=\"'igo.geo.measure.actionbar.delete.tooltip' | translate\"\n      [disabled]=\"(selectedFeatures$ | async).length === 0\"\n      color=\"warn\"\n      (click)=\"onDeleteClick()\"\n    >\n      <mat-icon>delete</mat-icon>\n    </button>\n  </div>\n\n  <igo-entity-table\n    #table\n    class=\"table-compact\"\n    [store]=\"store\"\n    [template]=\"tableTemplate\"\n  >\n  </igo-entity-table>\n</div>\n", styles: [":host .measure-type-toggle{padding:10px;text-align:center}:host .measure-type-toggle mat-button-toggle-group{width:100%}:host .measure-type-toggle mat-button-toggle-group mat-button-toggle{width:50%}:host .measure-options mat-slide-toggle{width:100%;padding:10px}:host .measure-options mat-slide-toggle ::ng-deep .mdc-form-field{width:100%}:host .measure-options mat-slide-toggle ::ng-deep .mdc-label{margin-left:0;width:calc(100% - 60px)}:host .measure-store-buttons{margin-left:-2px}:host .measure-store-buttons button:first-of-type{margin-left:14px}:host .table-compact ::ng-deep .mat-mdc-header-cell.mat-column-selectionCheckbox{width:52px}:host .igo-map-tooltip{position:relative;border-radius:4px;padding:4px 8px;white-space:nowrap}::ng-deep .igo-map-tooltip-hidden,.igo-map-tooltip-measure-by-display{display:none}\n"] }]
         }], ctorParameters: () => [{ type: i1$2.LanguageService }, { type: i1$5.MatDialog }, { type: i3$2.StorageService }, { type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
@@ -15298,7 +15298,7 @@ class SearchResultsItemComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SearchResultsItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: SearchResultsItemComponent, isStandalone: true, selector: "igo-search-results-item", inputs: { result: "result", map: "map", showIcons: "showIcons", withZoomButton: "withZoomButton" }, outputs: { zoomEvent: "zoomEvent" }, ngImport: i0, template: "<mat-list-item\n  (mouseenter)=\"onMouseEvent($event)\"\n  (mouseleave)=\"onMouseEvent($event)\"\n>\n  <mat-icon\n    *ngIf=\"icon\"\n    matListItemIcon\n    [svgIcon]=\"showIcons ? icon : 'blank'\"\n  ></mat-icon>\n\n  <div\n    matListItemTitle\n    *ngIf=\"titleHtml; else normalTitle\"\n    [innerHtml]=\"titleHtml\"\n    matTooltipShowDelay=\"500\"\n    [matTooltip]=\"tooltipHtml\"\n    matTooltipClass=\"search-result-tooltip\"\n  ></div>\n  <ng-template #normalTitle>\n    <span\n      matListItemTitle\n      *ngIf=\"!titleHtml\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"title\"\n      >{{ title }}</span\n    >\n  </ng-template>\n\n  <div matListItemMeta>\n    <button\n      *ngIf=\"withZoomButton\"\n      igoStopPropagation\n      mat-icon-button\n      (click)=\"onZoomHandler()\"\n    >\n      <mat-icon svgIcon=\"magnify\"></mat-icon>\n    </button>\n\n    <ng-content select=\"[igoSearchItemToolbar]\"> </ng-content>\n  </div>\n</mat-list-item>\n", styles: [":host ::ng-deep small{color:#8c8c8c}:host div[matlistitemmeta]:empty{display:none}:host ::ng-deep .search-result-tooltip{white-space:pre-line}\n"], dependencies: [{ kind: "ngmodule", type: MatListModule }, { kind: "component", type: i2$5.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i2$5.MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "directive", type: i2$5.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "directive", type: i2$5.MatListItemMeta, selector: "[matListItemMeta]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: StopPropagationDirective, selector: "[igoStopPropagation]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: SearchResultsItemComponent, isStandalone: true, selector: "igo-search-results-item", inputs: { result: "result", map: "map", showIcons: "showIcons", withZoomButton: "withZoomButton" }, outputs: { zoomEvent: "zoomEvent" }, ngImport: i0, template: "<mat-list-item\n  (mouseenter)=\"onMouseEvent($event)\"\n  (mouseleave)=\"onMouseEvent($event)\"\n>\n  <mat-icon *ngIf=\"icon\" matListItemIcon>{{\n    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>search</mat-icon>\n    </button>\n\n    <ng-content select=\"[igoSearchItemToolbar]\"> </ng-content>\n  </div>\n</mat-list-item>\n", styles: [":host ::ng-deep small{color:#8c8c8c}:host div[matlistitemmeta]:empty{display:none}:host ::ng-deep .search-result-tooltip{white-space:pre-line}\n"], dependencies: [{ kind: "ngmodule", type: MatListModule }, { kind: "component", type: i2$5.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i2$5.MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "directive", type: i2$5.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "directive", type: i2$5.MatListItemMeta, selector: "[matListItemMeta]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: StopPropagationDirective, selector: "[igoStopPropagation]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SearchResultsItemComponent, decorators: [{
             type: Component,
@@ -15309,7 +15309,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                         MatTooltipModule,
                         MatButtonModule,
                         StopPropagationDirective
-                    ], 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"] }]
+                    ], template: "<mat-list-item\n  (mouseenter)=\"onMouseEvent($event)\"\n  (mouseleave)=\"onMouseEvent($event)\"\n>\n  <mat-icon *ngIf=\"icon\" matListItemIcon>{{\n    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>search</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"] }]
         }], propDecorators: { result: [{
                 type: Input
             }], map: [{
@@ -15588,10 +15588,10 @@ class SearchResultAddButtonComponent {
     }
     getBadgeIcon() {
         if (this.inRange$.value) {
-            return this.isVisible$.value ? '' : 'eye-off';
+            return this.isVisible$.value ? '' : 'visibility_off';
         }
         else {
-            return 'eye-off';
+            return 'visibility_off';
         }
     }
     computeTooltip() {
@@ -15760,7 +15760,7 @@ class SearchResultAddButtonComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SearchResultAddButtonComponent, deps: [{ token: LayerService }, { token: i1$5.MatDialog }, { token: DataSourceService }, { token: i2$1.MediaService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: SearchResultAddButtonComponent, isStandalone: true, selector: "igo-search-add-button", inputs: { layer: "layer", store: "store", added: "added", map: "map", saveSearchResultInLayer: "saveSearchResultInLayer", color: "color", stores: "stores" }, ngImport: i0, template: "<button\n  igoStopPropagation\n  (mouseenter)=\"onMouseEvent($event)\"\n  (mouseleave)=\"onMouseEvent($event)\"\n  *ngIf=\"layer.meta.dataType === 'Layer'\"\n  mat-icon-button\n  tooltip-position=\"below\"\n  matTooltipShowDelay=\"500\"\n  [matTooltip]=\"computeTooltip() | translate\"\n  [color]=\"(isPreview$ | async) ? '' : added ? 'warn' : ''\"\n  (click)=\"onToggleClick($event)\"\n>\n  <mat-icon\n    aria-hidden=\"false\"\n    matBadge=\"icon\"\n    [igoMatBadgeIcon]=\"getBadgeIcon()\"\n    igoMatBadgeColor=\"rgba(0,0,0,0.87)\"\n    igoMatBadgeBackgroundColor=\"none\"\n    [igoMatBadgeInverseColor]=\"true\"\n    [matBadgeHidden]=\"\n      ((inRange$ | async) && (isVisible$ | async) === true) ||\n      ((inRange$ | async) && !added) ||\n      ((inRange$ | async) && (isPreview$ | async))\n    \"\n    [matBadgeDisabled]=\"(inRange$ | async) === false\"\n    matBadgeSize=\"small\"\n    matBadgePosition=\"after\"\n    [svgIcon]=\"(isPreview$ | async) ? 'plus' : added ? 'delete' : 'plus'\"\n  >\n  </mat-icon>\n</button>\n\n<button\n  [id]=\"!isMobile ? 'hide-save-search-result-btn' : ''\"\n  igoStopPropagation\n  *ngIf=\"layer.meta.dataType === 'Feature' && saveSearchResultInLayer\"\n  mat-icon-button\n  tooltip-position=\"below\"\n  matTooltipShowDelay=\"500\"\n  [matTooltip]=\"addFeatureToLayerTooltip$ | async | translate\"\n  (click)=\"addFeatureToLayer()\"\n>\n  <mat-icon\n    aria-hidden=\"false\"\n    matBadge=\"icon\"\n    igoMatBadgeIcon=\"eye-off\"\n    [igoMatBadgeInverseColor]=\"true\"\n    [matBadgeHidden]=\"inRange$ | async\"\n    [matBadgeDisabled]=\"true\"\n    matBadgeSize=\"small\"\n    matBadgePosition=\"after\"\n    svgIcon=\"file-plus-outline\"\n  >\n  </mat-icon>\n</button>\n", styles: [":host #hide-save-search-result-btn{display:none}:host #show-save-search-result-btn{display:block}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: StopPropagationDirective, selector: "[igoStopPropagation]" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatBadgeModule }, { kind: "directive", type: i4$2.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: IgoBadgeIconDirective, selector: "[igoMatBadgeIcon]", inputs: ["igoMatBadgeIcon", "matBadgeHidden", "matBadgeDisabled", "igoMatBadgeInverseColor", "igoMatBadgeInheritColor", "igoMatBadgeColor", "igoMatBadgeBackgroundColor"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: SearchResultAddButtonComponent, isStandalone: true, selector: "igo-search-add-button", inputs: { layer: "layer", store: "store", added: "added", map: "map", saveSearchResultInLayer: "saveSearchResultInLayer", color: "color", stores: "stores" }, ngImport: i0, template: "<button\n  igoStopPropagation\n  (mouseenter)=\"onMouseEvent($event)\"\n  (mouseleave)=\"onMouseEvent($event)\"\n  *ngIf=\"layer.meta.dataType === 'Layer'\"\n  mat-icon-button\n  tooltip-position=\"below\"\n  matTooltipShowDelay=\"500\"\n  [matTooltip]=\"computeTooltip() | translate\"\n  [color]=\"(isPreview$ | async) ? '' : added ? 'warn' : ''\"\n  (click)=\"onToggleClick($event)\"\n>\n  <mat-icon\n    aria-hidden=\"false\"\n    matBadge=\"icon\"\n    [igoMatBadgeIcon]=\"getBadgeIcon()\"\n    igoMatBadgeColor=\"rgba(0,0,0,0.87)\"\n    igoMatBadgeBackgroundColor=\"none\"\n    [igoMatBadgeInverseColor]=\"true\"\n    [matBadgeHidden]=\"\n      ((inRange$ | async) && (isVisible$ | async) === true) ||\n      ((inRange$ | async) && !added) ||\n      ((inRange$ | async) && (isPreview$ | async))\n    \"\n    [matBadgeDisabled]=\"(inRange$ | async) === false\"\n    matBadgeSize=\"small\"\n    matBadgePosition=\"after\"\n    >{{ (isPreview$ | async) ? 'add' : added ? 'delete' : 'add' }}\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=\"visibility_off\"\n    [igoMatBadgeInverseColor]=\"true\"\n    [matBadgeHidden]=\"inRange$ | async\"\n    [matBadgeDisabled]=\"true\"\n    matBadgeSize=\"small\"\n    matBadgePosition=\"after\"\n    >add_to_photos\n  </mat-icon>\n</button>\n", styles: [":host #hide-save-search-result-btn{display:none}:host #show-save-search-result-btn{display:block}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: StopPropagationDirective, selector: "[igoStopPropagation]" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatBadgeModule }, { kind: "directive", type: i4$2.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: IgoBadgeIconDirective, selector: "[igoMatBadgeIcon]", inputs: ["igoMatBadgeIcon", "matBadgeHidden", "matBadgeDisabled", "igoMatBadgeInverseColor", "igoMatBadgeInheritColor", "igoMatBadgeColor", "igoMatBadgeBackgroundColor"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SearchResultAddButtonComponent, decorators: [{
             type: Component,
@@ -15774,7 +15774,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                         IgoBadgeIconDirective,
                         AsyncPipe,
                         TranslateModule
-                    ], 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"] }]
+                    ], 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    >{{ (isPreview$ | async) ? 'add' : added ? 'delete' : 'add' }}\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=\"visibility_off\"\n    [igoMatBadgeInverseColor]=\"true\"\n    [matBadgeHidden]=\"inRange$ | async\"\n    [matBadgeDisabled]=\"true\"\n    matBadgeSize=\"small\"\n    matBadgePosition=\"after\"\n    >add_to_photos\n  </mat-icon>\n</button>\n", styles: [":host #hide-save-search-result-btn{display:none}:host #show-save-search-result-btn{display:block}\n"] }]
         }], ctorParameters: () => [{ type: LayerService }, { type: i1$5.MatDialog }, { type: DataSourceService }, { type: i2$1.MediaService }], propDecorators: { layer: [{
                 type: Input
             }], store: [{
@@ -16593,7 +16593,7 @@ class CoordinatesReverseSearchSource extends SearchSource {
                 id: data[0].toString() + ',' + data[1].toString(),
                 title: roundedCoordString,
                 titleHtml: roundedCoordString + subtitleHtml,
-                icon: 'map-marker',
+                icon: 'location_on',
                 score: 100 // every coord exists
             }
         };
@@ -16655,6 +16655,37 @@ function provideCoordinatesReverseSearchSource() {
     };
 }
+/**
+ * Icons mappings to be retrocompatible with iCherche
+ */
+const ICHERCHE_ICONS = {
+    'map-marker': 'location_on',
+    city: 'location_city',
+    'flag-triangle': 'flag',
+    'map-marker-alert': 'fmd_bad',
+    'map-marker-radius': 'pin_drop',
+    'map-marker-multiple': 'local_post_office',
+    'map-legend': 'map',
+    bank: 'account_balance',
+    'map-search': 'search_insights',
+    'book-open-variant': 'menu_book',
+    'office-building': 'apartment',
+    'table-picnic': 'table_restaurant',
+    flash: 'flash_on',
+    engine: ENGINE_ICON,
+    'road-variant': 'add_road',
+    'baby-face-outline': 'child_care',
+    'home-account': 'location_home',
+    hospital: 'local_hospital',
+    pharmacy: 'local_pharmacy',
+    'police-badge-outline': 'local_police',
+    parking: 'local_parking',
+    tree: 'nature',
+    'home-city': 'home_work',
+    terrain: 'landscape',
+    'panorama-horizontal': 'panorama_horizontal'
+};
 class IChercheSearchResultFormatter {
     languageService;
     constructor(languageService) {
@@ -17056,6 +17087,10 @@ class IChercheSearchSource extends SearchSource {
         const subtitleHtml2 = data.highlight.title3
             ? '<br><small> ' + data.highlight.title3 + '</small>'
             : '';
+        let icon = data.icon;
+        if (typeof icon == 'string' && Object.keys(ICHERCHE_ICONS).includes(icon)) {
+            icon = ICHERCHE_ICONS[icon];
+        }
         return {
             source: this,
             data: {
@@ -17074,7 +17109,7 @@ class IChercheSearchSource extends SearchSource {
                 id,
                 title: data.properties.nom,
                 titleHtml: titleHtml + subtitleHtml + subtitleHtml2,
-                icon: data.icon || 'map-marker',
+                icon: icon || 'location_on',
                 score: data.score || computeTermSimilarity(term.trim(), data.properties.nom),
                 nextPage: response.features.length % +this.options.params.limit === 0 &&
                     +this.options.params.page < 10
@@ -17408,7 +17443,7 @@ class IChercheReverseSearchSource extends SearchSource {
                 id,
                 title: data.properties.nom,
                 titleHtml: titleHtml + subtitleHtml,
-                icon: data.icon || 'map-marker',
+                icon: data.icon || 'location_on',
                 pointerSummaryTitle: this.getSubtitle(data) + ': ' + data.properties.nom
             }
         };
@@ -19474,7 +19509,7 @@ function formatDuration(duration) {
 function formatInstruction(type, modifier, route, direction, stepPosition, exit, languageService, lastStep = false) {
     const translate = languageService.translate;
     let directive;
-    let image = 'forward';
+    let image = 'arrow_forward';
     let cssClass = 'rotate-270';
     const translatedDirection = translateBearing(direction, languageService);
     const translatedModifier = translateModifier(modifier, languageService);
@@ -19486,34 +19521,34 @@ function formatInstruction(type, modifier, route, direction, stepPosition, exit,
         aggregatedDirection = translatedModifier;
     }
     if (modifier === 'uturn') {
-        image = 'forward';
+        image = 'arrow_forward';
         cssClass = 'rotate-90';
     }
     else if (modifier === 'sharp right') {
-        image = 'subdirectory-arrow-right';
+        image = 'subdirectory_arrow_right';
         cssClass = 'icon-flipped';
     }
     else if (modifier === 'right') {
-        image = 'subdirectory-arrow-right';
+        image = 'subdirectory_arrow_right';
         cssClass = 'icon-flipped';
     }
     else if (modifier === 'slight right') {
-        image = 'forward';
+        image = 'arrow_forward';
         cssClass = 'rotate-290';
     }
     else if (modifier === 'straight') {
-        image = 'forward';
+        image = 'arrow_forward';
     }
     else if (modifier === 'slight left') {
-        image = 'forward';
+        image = 'arrow_forward';
         cssClass = 'rotate-250';
     }
     else if (modifier === 'left') {
-        image = 'subdirectory-arrow-left';
+        image = 'subdirectory_arrow_left';
         cssClass = 'icon-flipped';
     }
     else if (modifier === 'sharp left') {
-        image = 'subdirectory-arrow-left';
+        image = 'subdirectory_arrow_left';
         cssClass = 'icon-flipped';
     }
     if (type === 'turn') {
@@ -19538,7 +19573,7 @@ function formatInstruction(type, modifier, route, direction, stepPosition, exit,
             route,
             translatedDirection
         });
-        image = 'compass';
+        image = 'explore';
         cssClass = '';
     }
     else if (type === 'depart') {
@@ -19546,7 +19581,7 @@ function formatInstruction(type, modifier, route, direction, stepPosition, exit,
             route,
             translatedDirection
         });
-        image = 'compass';
+        image = 'explore';
         cssClass = '';
     }
     else if (type === 'arrive') {
@@ -19562,13 +19597,13 @@ function formatInstruction(type, modifier, route, direction, stepPosition, exit,
             directive = translate.instant('igo.geo.directions.arrive.intermediate', {
                 route
             });
-            image = 'map-marker';
+            image = 'location_on';
             cssClass = '';
         }
     }
     else if (type === 'merge') {
         directive = translate.instant('igo.geo.directions.merge', { route });
-        image = 'forward';
+        image = 'arrow_forward';
         cssClass = 'rotate-270';
     }
     else if (type === 'on ramp') {
@@ -19605,7 +19640,7 @@ function formatInstruction(type, modifier, route, direction, stepPosition, exit,
         directive = translate.instant('igo.geo.directions.continue.notUturn', {
             route
         });
-        image = 'forward';
+        image = 'arrow_forward';
         cssClass = 'rotate-270';
     }
     else if (type === 'roundabout') {
@@ -19617,24 +19652,24 @@ function formatInstruction(type, modifier, route, direction, stepPosition, exit,
             cntSuffix,
             route
         });
-        image = 'chart-donut';
+        image = 'donut_large';
         cssClass = '';
     }
     else if (type === 'rotary') {
         directive = translate.instant('igo.geo.directions.rotary');
-        image = 'chart-donut';
+        image = 'donut_large';
         cssClass = '';
     }
     else if (type === 'roundabout turn') {
         directive = translate.instant('igo.geo.directions.roundabout turn');
-        image = 'chart-donut';
+        image = 'donut_large';
         cssClass = '';
     }
     else if (type === 'exit roundabout') {
         directive = translate.instant('igo.geo.directions.exit roundabout', {
             route
         });
-        image = 'forward';
+        image = 'arrow_forward';
         cssClass = 'rotate-270';
     }
     else if (type === 'notification') {
@@ -19649,9 +19684,9 @@ function formatInstruction(type, modifier, route, direction, stepPosition, exit,
     else {
         directive = translate.instant('igo.geo.directions.unknown');
     }
-    image = lastStep ? 'flag-variant' : image;
+    image = lastStep ? 'flag' : image;
     cssClass = lastStep ? '' : cssClass;
-    image = stepPosition === 0 ? 'compass' : image;
+    image = stepPosition === 0 ? 'explore' : image;
     cssClass = stepPosition === 0 ? '' : cssClass;
     return { instruction: directive, image, cssClass };
 }
@@ -20066,7 +20101,7 @@ class DirectionsButtonsComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: DirectionsButtonsComponent, deps: [{ token: i1$2.LanguageService }, { token: i2$3.MessageService }, { token: i3$5.RouteService, optional: true }, { token: DirectionsService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: DirectionsButtonsComponent, isStandalone: true, selector: "igo-directions-buttons", inputs: { contextUri: "contextUri", zoomToActiveRoute$: "zoomToActiveRoute$", stopsStore: "stopsStore", routesFeatureStore: "routesFeatureStore", stepFeatureStore: "stepFeatureStore" }, ngImport: i0, template: "<div class=\"igo-form-button-group\">\n  <button\n    mat-icon-button\n    tooltip-position=\"below\"\n    matTooltipShowDelay=\"500\"\n    [matTooltip]=\"'igo.geo.directionsForm.addStop' | translate\"\n    color=\"primary\"\n    (click)=\"addStop()\"\n  >\n    <mat-icon svgIcon=\"map-marker-plus\"></mat-icon>\n  </button>\n  <button\n    mat-icon-button\n    tooltip-position=\"below\"\n    matTooltipShowDelay=\"500\"\n    *ngIf=\"\n      (routesFeatureStore.count$ | async) >= 1 ||\n      (stopsStore.count$ | async) >= 1\n    \"\n    [matTooltip]=\"'igo.geo.directionsForm.resetDirectionsBtn' | translate\"\n    color=\"warn\"\n    (click)=\"resetStops()\"\n  >\n    <mat-icon svgIcon=\"file-restore\"></mat-icon>\n  </button>\n  <button\n    mat-icon-button\n    tooltip-position=\"below\"\n    matTooltipShowDelay=\"500\"\n    *ngIf=\"(routesFeatureStore.count$ | async) >= 1\"\n    (click)=\"zoomRoute()\"\n    [matTooltip]=\"'igo.geo.directionsForm.zoomRoute' | translate\"\n    color=\"primary\"\n  >\n    <mat-icon svgIcon=\"magnify-plus-outline\"></mat-icon>\n  </button>\n  <button\n    mat-icon-button\n    tooltip-position=\"below\"\n    matTooltipShowDelay=\"500\"\n    *ngIf=\"(routesFeatureStore.count$ | async) >= 1\"\n    (click)=\"copyDirectionsToClipboard()\"\n    [matTooltip]=\"'igo.geo.directionsForm.copy' | translate\"\n    color=\"primary\"\n  >\n    <mat-icon svgIcon=\"content-copy\"></mat-icon>\n  </button>\n  <button\n    mat-icon-button\n    tooltip-position=\"below\"\n    matTooltipShowDelay=\"500\"\n    *ngIf=\"(routesFeatureStore.count$ | async) >= 1\"\n    (click)=\"copyLinkToClipboard()\"\n    [matTooltip]=\"'igo.geo.directionsForm.link' | translate\"\n    color=\"primary\"\n  >\n    <mat-icon svgIcon=\"link\"></mat-icon>\n  </button>\n\n  <button\n    mat-icon-button\n    tooltip-position=\"below\"\n    matTooltipShowDelay=\"500\"\n    *ngIf=\"(routesFeatureStore.count$ | async) >= 1\"\n    (click)=\"printDirections()\"\n    [disabled]=\"disabled$ | async\"\n    [matTooltip]=\"'igo.geo.directionsForm.print' | translate\"\n    color=\"primary\"\n  >\n    <mat-icon svgIcon=\"printer\"></mat-icon>\n  </button>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: DirectionsButtonsComponent, isStandalone: true, selector: "igo-directions-buttons", inputs: { contextUri: "contextUri", zoomToActiveRoute$: "zoomToActiveRoute$", stopsStore: "stopsStore", routesFeatureStore: "routesFeatureStore", stepFeatureStore: "stepFeatureStore" }, ngImport: i0, template: "<div class=\"igo-form-button-group\">\n  <button\n    mat-icon-button\n    tooltip-position=\"below\"\n    matTooltipShowDelay=\"500\"\n    [matTooltip]=\"'igo.geo.directionsForm.addStop' | translate\"\n    color=\"primary\"\n    (click)=\"addStop()\"\n  >\n    <mat-icon>add_location_alt</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>restore_page</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>zoom_in</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>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>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>print</mat-icon>\n  </button>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: DirectionsButtonsComponent, decorators: [{
             type: Component,
@@ -20077,7 +20112,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                         NgIf,
                         AsyncPipe,
                         TranslateModule
-                    ], 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" }]
+                    ], 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>add_location_alt</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>restore_page</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>zoom_in</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>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>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>print</mat-icon>\n  </button>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1$2.LanguageService }, { type: i2$3.MessageService }, { type: i3$5.RouteService, decorators: [{
                     type: Optional
                 }] }, { type: DirectionsService }], propDecorators: { contextUri: [{
@@ -20241,7 +20276,7 @@ class DirectionsInputsComponent {
         this.onMapClickEventKeys = [];
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: DirectionsInputsComponent, deps: [{ token: i1$2.LanguageService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: DirectionsInputsComponent, isStandalone: true, selector: "igo-directions-inputs", inputs: { stopsStore: "stopsStore", stopsFeatureStore: "stopsFeatureStore", projection: "projection", coordRoundedDecimals: "coordRoundedDecimals", debounce: "debounce", length: "length" }, outputs: { stopInputHasFocus: "stopInputHasFocus" }, ngImport: i0, template: "<div cdkDropList class=\"stops-list\" (cdkDropListDropped)=\"drop($event)\">\n  <div\n    touchleave\n    (touchenter)=\"onStopEnter(stop)\"\n    (touchleave)=\"onStopLeave()\"\n    (mouseover)=\"onStopEnter(stop)\"\n    (mouseleave)=\"onStopLeave()\"\n    (cdkDragStarted)=\"stopIsDragged = true\"\n    (cdkDragEnded)=\"stopIsDragged = false\"\n    cdkDragLockAxis=\"y\"\n    class=\"stop-box\"\n    *ngFor=\"let stop of stopsStore.view.all$() | async; let i = index\"\n    cdkDrag\n  >\n    <div [ngClass]=\"getNgClass(stop)\">\n      <mat-form-field subscriptSizing=\"dynamic\">\n        <mat-label>{{ getPlaceholder(stop) }}</mat-label>\n        <input\n          id=\"{{ stop.id }}\"\n          type=\"text\"\n          [placeholder]=\"getPlaceholder(stop)\"\n          matTooltipShowDelay=\"500\"\n          [matTooltip]=\"stop.text\"\n          aria-label=\"Number\"\n          matInput\n          (focus)=\"onInputFocus(stop)\"\n          [(ngModel)]=\"stop.text\"\n          (keyup)=\"setStopText($event, stop)\"\n          (keydown.enter)=\"$event.preventDefault()\"\n          [matAutocomplete]=\"auto\"\n        />\n        <button\n          *ngIf=\"\n            (stop.text || stop.coordinates) &&\n            stopWithHover &&\n            stop.id === stopWithHover.id\n          \"\n          mat-icon-button\n          matSuffix\n          matTooltipShowDelay=\"500\"\n          [matTooltip]=\"'igo.geo.directionsForm.clearStop' | translate\"\n          color=\"warn\"\n          aria-label=\"Clear\"\n          (click)=\"clearStop(stop)\"\n        >\n          <mat-icon svgIcon=\"close\"></mat-icon>\n        </button>\n\n        <mat-autocomplete\n          [displayWith]=\"getOptionText\"\n          #auto=\"matAutocomplete\"\n          (optionSelected)=\"chooseProposal($event, stop)\"\n        >\n          <mat-optgroup\n            *ngFor=\"let source of stop.searchProposals\"\n            [label]=\"source.source.title\"\n            [disabled]=\"source.source.enabled === false\"\n          >\n            <mat-option\n              *ngFor=\"let result of source.results\"\n              [value]=\"result\"\n              matTooltipShowDelay=\"500\"\n              [matTooltip]=\"result.meta ? result.meta.title : ''\"\n            >\n              {{ result.meta ? result.meta.title : '' }}\n            </mat-option>\n          </mat-optgroup>\n        </mat-autocomplete>\n      </mat-form-field>\n    </div>\n\n    <div\n      *ngIf=\"!stopIsDragged && stopWithHover && stop.id === stopWithHover.id\"\n      class=\"igo-form-button-group\"\n    >\n      <button\n        class=\"swipe-vertical\"\n        cdkDragHandle\n        mat-icon-button\n        tooltip-position=\"below\"\n        matTooltipShowDelay=\"500\"\n        [matTooltip]=\"'igo.geo.directionsForm.moveStop' | translate\"\n        color=\"primary\"\n      >\n        <mat-icon svgIcon=\"gesture-swipe-vertical\"></mat-icon>\n      </button>\n\n      <button\n        *ngIf=\"(stopsStore.count$ | async) > 2\"\n        mat-icon-button\n        tooltip-position=\"below\"\n        matTooltipShowDelay=\"500\"\n        [matTooltip]=\"'igo.geo.directionsForm.removeStop' | translate\"\n        color=\"warn\"\n        (click)=\"removeStop(stop)\"\n      >\n        <mat-icon svgIcon=\"delete\"></mat-icon>\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [":host .igo-input-container{display:flex;width:100%}:host .igo-input-container mat-form-field{flex:1}:host .igo-form-button-group{display:flex;align-items:center;padding-left:12px}:host .stops-list{max-width:100%;min-height:60px;display:block;background:#fff;border-radius:4px;overflow:hidden;padding:20px 10px}:host .swipe-vertical{cursor:move}:host .stop-box{color:#000000de;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;background:#fff}:host .stop-box:not(:last-child){margin-bottom:16px}:host .cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}:host .cdk-drag-placeholder{opacity:0}:host .cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}:host .stops-list.cdk-drop-list-dragging .stop-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i6$5.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i6$4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i6$4.MatOptgroup, selector: "mat-optgroup", inputs: ["label", "disabled"], exportAs: ["matOptgroup"] }, { kind: "directive", type: i6$5.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: DirectionsInputsComponent, isStandalone: true, selector: "igo-directions-inputs", inputs: { stopsStore: "stopsStore", stopsFeatureStore: "stopsFeatureStore", projection: "projection", coordRoundedDecimals: "coordRoundedDecimals", debounce: "debounce", length: "length" }, outputs: { stopInputHasFocus: "stopInputHasFocus" }, ngImport: i0, template: "<div cdkDropList class=\"stops-list\" (cdkDropListDropped)=\"drop($event)\">\n  <div\n    touchleave\n    (touchenter)=\"onStopEnter(stop)\"\n    (touchleave)=\"onStopLeave()\"\n    (mouseover)=\"onStopEnter(stop)\"\n    (mouseleave)=\"onStopLeave()\"\n    (cdkDragStarted)=\"stopIsDragged = true\"\n    (cdkDragEnded)=\"stopIsDragged = false\"\n    cdkDragLockAxis=\"y\"\n    class=\"stop-box\"\n    *ngFor=\"let stop of stopsStore.view.all$() | async; let i = index\"\n    cdkDrag\n  >\n    <div [ngClass]=\"getNgClass(stop)\">\n      <mat-form-field subscriptSizing=\"dynamic\">\n        <mat-label>{{ getPlaceholder(stop) }}</mat-label>\n        <input\n          id=\"{{ stop.id }}\"\n          type=\"text\"\n          [placeholder]=\"getPlaceholder(stop)\"\n          matTooltipShowDelay=\"500\"\n          [matTooltip]=\"stop.text\"\n          aria-label=\"Number\"\n          matInput\n          (focus)=\"onInputFocus(stop)\"\n          [(ngModel)]=\"stop.text\"\n          (keyup)=\"setStopText($event, stop)\"\n          (keydown.enter)=\"$event.preventDefault()\"\n          [matAutocomplete]=\"auto\"\n        />\n        <button\n          *ngIf=\"\n            (stop.text || stop.coordinates) &&\n            stopWithHover &&\n            stop.id === stopWithHover.id\n          \"\n          mat-icon-button\n          matSuffix\n          matTooltipShowDelay=\"500\"\n          [matTooltip]=\"'igo.geo.directionsForm.clearStop' | translate\"\n          color=\"warn\"\n          aria-label=\"Clear\"\n          (click)=\"clearStop(stop)\"\n        >\n          <mat-icon>close</mat-icon>\n        </button>\n\n        <mat-autocomplete\n          [displayWith]=\"getOptionText\"\n          #auto=\"matAutocomplete\"\n          (optionSelected)=\"chooseProposal($event, stop)\"\n        >\n          <mat-optgroup\n            *ngFor=\"let source of stop.searchProposals\"\n            [label]=\"source.source.title\"\n            [disabled]=\"source.source.enabled === false\"\n          >\n            <mat-option\n              *ngFor=\"let result of source.results\"\n              [value]=\"result\"\n              matTooltipShowDelay=\"500\"\n              [matTooltip]=\"result.meta ? result.meta.title : ''\"\n            >\n              {{ result.meta ? result.meta.title : '' }}\n            </mat-option>\n          </mat-optgroup>\n        </mat-autocomplete>\n      </mat-form-field>\n    </div>\n\n    <div\n      *ngIf=\"!stopIsDragged && stopWithHover && stop.id === stopWithHover.id\"\n      class=\"igo-form-button-group\"\n    >\n      <button\n        class=\"swipe-vertical\"\n        cdkDragHandle\n        mat-icon-button\n        tooltip-position=\"below\"\n        matTooltipShowDelay=\"500\"\n        [matTooltip]=\"'igo.geo.directionsForm.moveStop' | translate\"\n        color=\"primary\"\n      >\n        <mat-icon>drag_indicator</mat-icon>\n      </button>\n\n      <button\n        *ngIf=\"(stopsStore.count$ | async) > 2\"\n        mat-icon-button\n        tooltip-position=\"below\"\n        matTooltipShowDelay=\"500\"\n        [matTooltip]=\"'igo.geo.directionsForm.removeStop' | translate\"\n        color=\"warn\"\n        (click)=\"removeStop(stop)\"\n      >\n        <mat-icon>delete</mat-icon>\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [":host .igo-input-container{display:flex;width:100%}:host .igo-input-container mat-form-field{flex:1}:host .igo-form-button-group{display:flex;align-items:center;padding-left:12px}:host .stops-list{max-width:100%;min-height:60px;display:block;background:#fff;border-radius:4px;overflow:hidden;padding:20px 10px}:host .swipe-vertical{cursor:move}:host .stop-box{color:#000000de;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;background:#fff}:host .stop-box:not(:last-child){margin-bottom:16px}:host .cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}:host .cdk-drag-placeholder{opacity:0}:host .cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}:host .stops-list.cdk-drop-list-dragging .stop-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i6$5.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i6$4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i6$4.MatOptgroup, selector: "mat-optgroup", inputs: ["label", "disabled"], exportAs: ["matOptgroup"] }, { kind: "directive", type: i6$5.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: DirectionsInputsComponent, decorators: [{
             type: Component,
@@ -20262,7 +20297,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                         CdkDragHandle,
                         AsyncPipe,
                         TranslateModule
-                    ], template: "<div cdkDropList class=\"stops-list\" (cdkDropListDropped)=\"drop($event)\">\n  <div\n    touchleave\n    (touchenter)=\"onStopEnter(stop)\"\n    (touchleave)=\"onStopLeave()\"\n    (mouseover)=\"onStopEnter(stop)\"\n    (mouseleave)=\"onStopLeave()\"\n    (cdkDragStarted)=\"stopIsDragged = true\"\n    (cdkDragEnded)=\"stopIsDragged = false\"\n    cdkDragLockAxis=\"y\"\n    class=\"stop-box\"\n    *ngFor=\"let stop of stopsStore.view.all$() | async; let i = index\"\n    cdkDrag\n  >\n    <div [ngClass]=\"getNgClass(stop)\">\n      <mat-form-field subscriptSizing=\"dynamic\">\n        <mat-label>{{ getPlaceholder(stop) }}</mat-label>\n        <input\n          id=\"{{ stop.id }}\"\n          type=\"text\"\n          [placeholder]=\"getPlaceholder(stop)\"\n          matTooltipShowDelay=\"500\"\n          [matTooltip]=\"stop.text\"\n          aria-label=\"Number\"\n          matInput\n          (focus)=\"onInputFocus(stop)\"\n          [(ngModel)]=\"stop.text\"\n          (keyup)=\"setStopText($event, stop)\"\n          (keydown.enter)=\"$event.preventDefault()\"\n          [matAutocomplete]=\"auto\"\n        />\n        <button\n          *ngIf=\"\n            (stop.text || stop.coordinates) &&\n            stopWithHover &&\n            stop.id === stopWithHover.id\n          \"\n          mat-icon-button\n          matSuffix\n          matTooltipShowDelay=\"500\"\n          [matTooltip]=\"'igo.geo.directionsForm.clearStop' | translate\"\n          color=\"warn\"\n          aria-label=\"Clear\"\n          (click)=\"clearStop(stop)\"\n        >\n          <mat-icon svgIcon=\"close\"></mat-icon>\n        </button>\n\n        <mat-autocomplete\n          [displayWith]=\"getOptionText\"\n          #auto=\"matAutocomplete\"\n          (optionSelected)=\"chooseProposal($event, stop)\"\n        >\n          <mat-optgroup\n            *ngFor=\"let source of stop.searchProposals\"\n            [label]=\"source.source.title\"\n            [disabled]=\"source.source.enabled === false\"\n          >\n            <mat-option\n              *ngFor=\"let result of source.results\"\n              [value]=\"result\"\n              matTooltipShowDelay=\"500\"\n              [matTooltip]=\"result.meta ? result.meta.title : ''\"\n            >\n              {{ result.meta ? result.meta.title : '' }}\n            </mat-option>\n          </mat-optgroup>\n        </mat-autocomplete>\n      </mat-form-field>\n    </div>\n\n    <div\n      *ngIf=\"!stopIsDragged && stopWithHover && stop.id === stopWithHover.id\"\n      class=\"igo-form-button-group\"\n    >\n      <button\n        class=\"swipe-vertical\"\n        cdkDragHandle\n        mat-icon-button\n        tooltip-position=\"below\"\n        matTooltipShowDelay=\"500\"\n        [matTooltip]=\"'igo.geo.directionsForm.moveStop' | translate\"\n        color=\"primary\"\n      >\n        <mat-icon svgIcon=\"gesture-swipe-vertical\"></mat-icon>\n      </button>\n\n      <button\n        *ngIf=\"(stopsStore.count$ | async) > 2\"\n        mat-icon-button\n        tooltip-position=\"below\"\n        matTooltipShowDelay=\"500\"\n        [matTooltip]=\"'igo.geo.directionsForm.removeStop' | translate\"\n        color=\"warn\"\n        (click)=\"removeStop(stop)\"\n      >\n        <mat-icon svgIcon=\"delete\"></mat-icon>\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [":host .igo-input-container{display:flex;width:100%}:host .igo-input-container mat-form-field{flex:1}:host .igo-form-button-group{display:flex;align-items:center;padding-left:12px}:host .stops-list{max-width:100%;min-height:60px;display:block;background:#fff;border-radius:4px;overflow:hidden;padding:20px 10px}:host .swipe-vertical{cursor:move}:host .stop-box{color:#000000de;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;background:#fff}:host .stop-box:not(:last-child){margin-bottom:16px}:host .cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}:host .cdk-drag-placeholder{opacity:0}:host .cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}:host .stops-list.cdk-drop-list-dragging .stop-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"] }]
+                    ], template: "<div cdkDropList class=\"stops-list\" (cdkDropListDropped)=\"drop($event)\">\n  <div\n    touchleave\n    (touchenter)=\"onStopEnter(stop)\"\n    (touchleave)=\"onStopLeave()\"\n    (mouseover)=\"onStopEnter(stop)\"\n    (mouseleave)=\"onStopLeave()\"\n    (cdkDragStarted)=\"stopIsDragged = true\"\n    (cdkDragEnded)=\"stopIsDragged = false\"\n    cdkDragLockAxis=\"y\"\n    class=\"stop-box\"\n    *ngFor=\"let stop of stopsStore.view.all$() | async; let i = index\"\n    cdkDrag\n  >\n    <div [ngClass]=\"getNgClass(stop)\">\n      <mat-form-field subscriptSizing=\"dynamic\">\n        <mat-label>{{ getPlaceholder(stop) }}</mat-label>\n        <input\n          id=\"{{ stop.id }}\"\n          type=\"text\"\n          [placeholder]=\"getPlaceholder(stop)\"\n          matTooltipShowDelay=\"500\"\n          [matTooltip]=\"stop.text\"\n          aria-label=\"Number\"\n          matInput\n          (focus)=\"onInputFocus(stop)\"\n          [(ngModel)]=\"stop.text\"\n          (keyup)=\"setStopText($event, stop)\"\n          (keydown.enter)=\"$event.preventDefault()\"\n          [matAutocomplete]=\"auto\"\n        />\n        <button\n          *ngIf=\"\n            (stop.text || stop.coordinates) &&\n            stopWithHover &&\n            stop.id === stopWithHover.id\n          \"\n          mat-icon-button\n          matSuffix\n          matTooltipShowDelay=\"500\"\n          [matTooltip]=\"'igo.geo.directionsForm.clearStop' | translate\"\n          color=\"warn\"\n          aria-label=\"Clear\"\n          (click)=\"clearStop(stop)\"\n        >\n          <mat-icon>close</mat-icon>\n        </button>\n\n        <mat-autocomplete\n          [displayWith]=\"getOptionText\"\n          #auto=\"matAutocomplete\"\n          (optionSelected)=\"chooseProposal($event, stop)\"\n        >\n          <mat-optgroup\n            *ngFor=\"let source of stop.searchProposals\"\n            [label]=\"source.source.title\"\n            [disabled]=\"source.source.enabled === false\"\n          >\n            <mat-option\n              *ngFor=\"let result of source.results\"\n              [value]=\"result\"\n              matTooltipShowDelay=\"500\"\n              [matTooltip]=\"result.meta ? result.meta.title : ''\"\n            >\n              {{ result.meta ? result.meta.title : '' }}\n            </mat-option>\n          </mat-optgroup>\n        </mat-autocomplete>\n      </mat-form-field>\n    </div>\n\n    <div\n      *ngIf=\"!stopIsDragged && stopWithHover && stop.id === stopWithHover.id\"\n      class=\"igo-form-button-group\"\n    >\n      <button\n        class=\"swipe-vertical\"\n        cdkDragHandle\n        mat-icon-button\n        tooltip-position=\"below\"\n        matTooltipShowDelay=\"500\"\n        [matTooltip]=\"'igo.geo.directionsForm.moveStop' | translate\"\n        color=\"primary\"\n      >\n        <mat-icon>drag_indicator</mat-icon>\n      </button>\n\n      <button\n        *ngIf=\"(stopsStore.count$ | async) > 2\"\n        mat-icon-button\n        tooltip-position=\"below\"\n        matTooltipShowDelay=\"500\"\n        [matTooltip]=\"'igo.geo.directionsForm.removeStop' | translate\"\n        color=\"warn\"\n        (click)=\"removeStop(stop)\"\n      >\n        <mat-icon>delete</mat-icon>\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [":host .igo-input-container{display:flex;width:100%}:host .igo-input-container mat-form-field{flex:1}:host .igo-form-button-group{display:flex;align-items:center;padding-left:12px}:host .stops-list{max-width:100%;min-height:60px;display:block;background:#fff;border-radius:4px;overflow:hidden;padding:20px 10px}:host .swipe-vertical{cursor:move}:host .stop-box{color:#000000de;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;background:#fff}:host .stop-box:not(:last-child){margin-bottom:16px}:host .cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}:host .cdk-drag-placeholder{opacity:0}:host .cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}:host .stops-list.cdk-drop-list-dragging .stop-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"] }]
         }], ctorParameters: () => [{ type: i1$2.LanguageService }], propDecorators: { stopsStore: [{
                 type: Input
             }], stopsFeatureStore: [{
@@ -20370,7 +20405,7 @@ class DirectionsResultsComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: DirectionsResultsComponent, deps: [{ token: i1$2.LanguageService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: DirectionsResultsComponent, isStandalone: true, selector: "igo-directions-results", inputs: { routesFeatureStore: "routesFeatureStore", stepFeatureStore: "stepFeatureStore" }, ngImport: i0, template: "<div class=\"igo-input-container\" *ngIf=\"directions && activeDirection\">\n  <mat-form-field *ngIf=\"directions && directions.length > 1\">\n    <mat-label>{{\n      'igo.geo.directionsForm.drivingOptions' | translate\n    }}</mat-label>\n    <mat-select\n      placeholder=\"{{ 'igo.geo.directionsForm.drivingOptions' | translate }}\"\n      (selectionChange)=\"changeRoute()\"\n      [(ngModel)]=\"activeDirection\"\n    >\n      <mat-option\n        *ngFor=\"let direction of directions; let cnt = index\"\n        [value]=\"direction\"\n      >\n        Option {{ cnt + 1 }} : {{ formatDistance(direction.distance) }} ({{\n          formatDuration(direction.duration)\n        }})\n      </mat-option>\n    </mat-select>\n  </mat-form-field>\n\n  <mat-divider *ngIf=\"directions && directions.length === 0\"></mat-divider>\n\n  <mat-list (mouseleave)=\"onStepsListBlur()\">\n    <h2 mat-header class=\"igo-route-title\">{{ activeDirection.title }}</h2>\n    <span class=\"mat-caption\">\n      {{ formatDistance(activeDirection.distance) }},\n      {{ formatDuration(activeDirection.duration) }}\n    </span>\n    <mat-list-item\n      class=\"igo-steps\"\n      (mouseenter)=\"showSegment(step)\"\n      (click)=\"showSegment(step, true)\"\n      *ngFor=\"let step of activeDirection.steps; let cnt = index\"\n      igoListItem\n    >\n      <mat-icon\n        [ngClass]=\"formatStep(step, cnt).cssClass\"\n        matListItemIcon\n        svgIcon=\"{{ formatStep(step, cnt).image }}\"\n      >\n      </mat-icon>\n\n      <span class=\"igo-step-text\">\n        {{ cnt + 1 }}. {{ formatStep(step, cnt).instruction }}\n      </span>\n      <span matListItemMeta>\n        {{ formatDistance(step.distance) }}\n      </span>\n    </mat-list-item>\n\n    <mat-divider></mat-divider>\n  </mat-list>\n</div>\n", styles: [".igo-input-container{width:100%;padding:20px 10px;box-sizing:border-box}.igo-input-container mat-form-field{width:70%}.igo-route-title{font-weight:700}.igo-steps{cursor:pointer;padding:35px 0}.igo-steps .igo-step-text{overflow-wrap:break-word;word-wrap:break-word;white-space:pre-wrap}.mat-mdc-list-item{word-wrap:break-word!important;white-space:pre-wrap!important}.rotate-90{-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-ms-transform:rotate(90deg);-o-transform:rotate(90deg);transform:rotate(90deg)}.rotate-45{-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)}.rotate-270{-webkit-transform:rotate(270deg);-moz-transform:rotate(270deg);-ms-transform:rotate(270deg);-o-transform:rotate(270deg);transform:rotate(270deg)}.rotate-250{-webkit-transform:rotate(250deg);-moz-transform:rotate(250deg);-ms-transform:rotate(250deg);-o-transform:rotate(250deg);transform:rotate(250deg)}.rotate-290{-webkit-transform:rotate(290deg);-moz-transform:rotate(290deg);-ms-transform:rotate(290deg);-o-transform:rotate(290deg);transform:rotate(290deg)}.icon-flipped{-o-transform:scaleY(-1);-moz-transform:scaleY(-1);-webkit-transform:scaleY(-1);-ms-transform:scaleY(-1);transform:scaleY(-1)}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i8$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6$4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i6$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i2$5.MatList, selector: "mat-list", exportAs: ["matList"] }, { kind: "component", type: i2$5.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i2$5.MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "directive", type: i2$5.MatListItemMeta, selector: "[matListItemMeta]" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: DirectionsResultsComponent, isStandalone: true, selector: "igo-directions-results", inputs: { routesFeatureStore: "routesFeatureStore", stepFeatureStore: "stepFeatureStore" }, ngImport: i0, template: "<div class=\"igo-input-container\" *ngIf=\"directions && activeDirection\">\n  <mat-form-field *ngIf=\"directions && directions.length > 1\">\n    <mat-label>{{\n      'igo.geo.directionsForm.drivingOptions' | translate\n    }}</mat-label>\n    <mat-select\n      placeholder=\"{{ 'igo.geo.directionsForm.drivingOptions' | translate }}\"\n      (selectionChange)=\"changeRoute()\"\n      [(ngModel)]=\"activeDirection\"\n    >\n      <mat-option\n        *ngFor=\"let direction of directions; let cnt = index\"\n        [value]=\"direction\"\n      >\n        Option {{ cnt + 1 }} : {{ formatDistance(direction.distance) }} ({{\n          formatDuration(direction.duration)\n        }})\n      </mat-option>\n    </mat-select>\n  </mat-form-field>\n\n  <mat-divider *ngIf=\"directions && directions.length === 0\"></mat-divider>\n\n  <mat-list (mouseleave)=\"onStepsListBlur()\">\n    <h2 mat-header class=\"igo-route-title\">{{ activeDirection.title }}</h2>\n    <span class=\"mat-caption\">\n      {{ formatDistance(activeDirection.distance) }},\n      {{ formatDuration(activeDirection.duration) }}\n    </span>\n    <mat-list-item\n      class=\"igo-steps\"\n      (mouseenter)=\"showSegment(step)\"\n      (click)=\"showSegment(step, true)\"\n      *ngFor=\"let step of activeDirection.steps; let cnt = index\"\n      igoListItem\n    >\n      <mat-icon [ngClass]=\"formatStep(step, cnt).cssClass\" matListItemIcon\n        >{{ formatStep(step, cnt).image }}\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{-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-ms-transform:rotate(90deg);-o-transform:rotate(90deg);transform:rotate(90deg)}.rotate-45{-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)}.rotate-270{-webkit-transform:rotate(270deg);-moz-transform:rotate(270deg);-ms-transform:rotate(270deg);-o-transform:rotate(270deg);transform:rotate(270deg)}.rotate-250{-webkit-transform:rotate(250deg);-moz-transform:rotate(250deg);-ms-transform:rotate(250deg);-o-transform:rotate(250deg);transform:rotate(250deg)}.rotate-290{-webkit-transform:rotate(290deg);-moz-transform:rotate(290deg);-ms-transform:rotate(290deg);-o-transform:rotate(290deg);transform:rotate(290deg)}.icon-flipped{-o-transform:scaleY(-1);-moz-transform:scaleY(-1);-webkit-transform:scaleY(-1);-ms-transform:scaleY(-1);transform:scaleY(-1)}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i8$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6$4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i6$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i2$5.MatList, selector: "mat-list", exportAs: ["matList"] }, { kind: "component", type: i2$5.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i2$5.MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "directive", type: i2$5.MatListItemMeta, selector: "[matListItemMeta]" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: DirectionsResultsComponent, decorators: [{
             type: Component,
@@ -20386,7 +20421,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                         MatIconModule,
                         NgClass,
                         TranslateModule
-                    ], 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{-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-ms-transform:rotate(90deg);-o-transform:rotate(90deg);transform:rotate(90deg)}.rotate-45{-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)}.rotate-270{-webkit-transform:rotate(270deg);-moz-transform:rotate(270deg);-ms-transform:rotate(270deg);-o-transform:rotate(270deg);transform:rotate(270deg)}.rotate-250{-webkit-transform:rotate(250deg);-moz-transform:rotate(250deg);-ms-transform:rotate(250deg);-o-transform:rotate(250deg);transform:rotate(250deg)}.rotate-290{-webkit-transform:rotate(290deg);-moz-transform:rotate(290deg);-ms-transform:rotate(290deg);-o-transform:rotate(290deg);transform:rotate(290deg)}.icon-flipped{-o-transform:scaleY(-1);-moz-transform:scaleY(-1);-webkit-transform:scaleY(-1);-ms-transform:scaleY(-1);transform:scaleY(-1)}\n"] }]
+                    ], 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 [ngClass]=\"formatStep(step, cnt).cssClass\" matListItemIcon\n        >{{ formatStep(step, cnt).image }}\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{-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-ms-transform:rotate(90deg);-o-transform:rotate(90deg);transform:rotate(90deg)}.rotate-45{-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)}.rotate-270{-webkit-transform:rotate(270deg);-moz-transform:rotate(270deg);-ms-transform:rotate(270deg);-o-transform:rotate(270deg);transform:rotate(270deg)}.rotate-250{-webkit-transform:rotate(250deg);-moz-transform:rotate(250deg);-ms-transform:rotate(250deg);-o-transform:rotate(250deg);transform:rotate(250deg)}.rotate-290{-webkit-transform:rotate(290deg);-moz-transform:rotate(290deg);-ms-transform:rotate(290deg);-o-transform:rotate(290deg);transform:rotate(290deg)}.icon-flipped{-o-transform:scaleY(-1);-moz-transform:scaleY(-1);-webkit-transform:scaleY(-1);-ms-transform:scaleY(-1);transform:scaleY(-1)}\n"] }]
         }], ctorParameters: () => [{ type: i1$2.LanguageService }, { type: i0.ChangeDetectorRef }], propDecorators: { routesFeatureStore: [{
                 type: Input
             }], stepFeatureStore: [{
@@ -20575,7 +20610,7 @@ class BaseLayersSwitcherComponent {
         return blHidden.length + 1 === bl.length ? blHidden : bl;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: BaseLayersSwitcherComponent, deps: [{ token: i2$1.MediaService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: BaseLayersSwitcherComponent, isStandalone: true, selector: "igo-baselayers-switcher", inputs: { map: "map", useStaticIcon: "useStaticIcon" }, ngImport: i0, 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' : 'collapseMap'\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  <div class=\"basemap-list\">\n    <igo-mini-basemap\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  </div>\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}.basemap-list igo-mini-basemap{display:block}.basemap-list igo-mini-basemap:not(:first-child){margin-top:4px}.igo-baselayers-switcher-container{height:auto;position:relative}.container-expand{overflow:hidden;border-width:0}.more-baselayers{width:80px;height:20px;background-color:#fff;text-align:center;cursor:pointer}.more-baselayers:hover{background-color:#efefef}.igo-baselayers-switcher-button-container{width:40px;background-color:#fff}.igo-baselayers-switcher-button-container:hover{background-color:#efefef}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: MiniBaseMapComponent, selector: "igo-mini-basemap", inputs: ["map", "disabled", "title", "display", "baseLayer"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], animations: [baseLayersSwitcherSlideInOut()] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: BaseLayersSwitcherComponent, isStandalone: true, selector: "igo-baselayers-switcher", inputs: { map: "map", useStaticIcon: "useStaticIcon" }, ngImport: i0, 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' : 'collapseMap'\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>photo_library</mat-icon>\n    </button>\n  </div>\n\n  <div class=\"basemap-list\">\n    <igo-mini-basemap\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  </div>\n\n  <div *ngIf=\"hasMoreThanTwo\" class=\"more-baselayers\">\n    <mat-icon class=\"material-icons mat-icon\" color=\"primary\"\n      >arrow_drop_down</mat-icon\n    >\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}.basemap-list igo-mini-basemap{display:block}.basemap-list igo-mini-basemap:not(:first-child){margin-top:4px}.igo-baselayers-switcher-container{height:auto;position:relative}.container-expand{overflow:hidden;border-width:0}.more-baselayers{width:80px;height:20px;background-color:#fff;text-align:center;cursor:pointer}.more-baselayers:hover{background-color:#efefef}.igo-baselayers-switcher-button-container{width:40px;background-color:#fff}.igo-baselayers-switcher-button-container:hover{background-color:#efefef}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: MiniBaseMapComponent, selector: "igo-mini-basemap", inputs: ["map", "disabled", "title", "display", "baseLayer"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], animations: [baseLayersSwitcherSlideInOut()] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: BaseLayersSwitcherComponent, decorators: [{
             type: Component,
@@ -20588,7 +20623,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                         NgFor,
                         MiniBaseMapComponent,
                         TranslateModule
-                    ], 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' : 'collapseMap'\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  <div class=\"basemap-list\">\n    <igo-mini-basemap\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  </div>\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}.basemap-list igo-mini-basemap{display:block}.basemap-list igo-mini-basemap:not(:first-child){margin-top:4px}.igo-baselayers-switcher-container{height:auto;position:relative}.container-expand{overflow:hidden;border-width:0}.more-baselayers{width:80px;height:20px;background-color:#fff;text-align:center;cursor:pointer}.more-baselayers:hover{background-color:#efefef}.igo-baselayers-switcher-button-container{width:40px;background-color:#fff}.igo-baselayers-switcher-button-container:hover{background-color:#efefef}\n"] }]
+                    ], 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' : 'collapseMap'\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>photo_library</mat-icon>\n    </button>\n  </div>\n\n  <div class=\"basemap-list\">\n    <igo-mini-basemap\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  </div>\n\n  <div *ngIf=\"hasMoreThanTwo\" class=\"more-baselayers\">\n    <mat-icon class=\"material-icons mat-icon\" color=\"primary\"\n      >arrow_drop_down</mat-icon\n    >\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}.basemap-list igo-mini-basemap{display:block}.basemap-list igo-mini-basemap:not(:first-child){margin-top:4px}.igo-baselayers-switcher-container{height:auto;position:relative}.container-expand{overflow:hidden;border-width:0}.more-baselayers{width:80px;height:20px;background-color:#fff;text-align:center;cursor:pointer}.more-baselayers:hover{background-color:#efefef}.igo-baselayers-switcher-button-container{width:40px;background-color:#fff}.igo-baselayers-switcher-button-container:hover{background-color:#efefef}\n"] }]
         }], ctorParameters: () => [{ type: i2$1.MediaService }], propDecorators: { map: [{
                 type: Input
             }], useStaticIcon: [{
@@ -20598,7 +20633,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
 class GeolocateButtonComponent {
     configService;
     tracking$$;
-    icon$ = new BehaviorSubject('crosshairs-gps');
+    icon$ = new BehaviorSubject('my_location');
     get map() {
         return this._map;
     }
@@ -20620,12 +20655,12 @@ class GeolocateButtonComponent {
         this.map.ol.once('rendercomplete', () => {
             this.tracking$$ = this.map.geolocationController.tracking$.subscribe((tracking) => {
                 if (tracking) {
-                    this.icon$.next('crosshairs-gps');
+                    this.icon$.next('my_location');
                 }
                 else {
                     this.configService.getConfig('geolocate.basic')
-                        ? this.icon$.next('crosshairs-gps')
-                        : this.icon$.next('crosshairs');
+                        ? this.icon$.next('my_location')
+                        : this.icon$.next('location_searching');
                 }
             });
         });
@@ -20640,7 +20675,7 @@ class GeolocateButtonComponent {
         this.map.geolocationController.tracking = tracking ? false : true;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: GeolocateButtonComponent, deps: [{ token: i1.ConfigService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: GeolocateButtonComponent, isStandalone: true, selector: "igo-geolocate-button", inputs: { map: "map", color: "color" }, ngImport: i0, template: "<div class=\"igo-geolocate-button-container\" *ngIf=\"map.geolocationController\">\n  <button\n    mat-icon-button\n    [matTooltip]=\"\n      map.geolocationController.tracking\n        ? ('igo.geo.mapButtons.geolocateInactive' | translate)\n        : ('igo.geo.mapButtons.geolocate' | translate)\n    \"\n    matTooltipPosition=\"left\"\n    [color]=\"color\"\n    (click)=\"onGeolocationClick()\"\n  >\n    <mat-icon svgIcon=\"{{ icon$ | async }}\"></mat-icon>\n  </button>\n</div>\n", styles: [":host button{border-radius:0!important}:host button .mat-ripple,:host button .mdc-icon-button__ripple{border-radius:0!important}:host .igo-geolocate-button-container{width:40px;background-color:#fff}:host .igo-geolocate-button-container:hover{background-color:#efefef}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: GeolocateButtonComponent, isStandalone: true, selector: "igo-geolocate-button", inputs: { map: "map", color: "color" }, ngImport: i0, template: "<div class=\"igo-geolocate-button-container\" *ngIf=\"map.geolocationController\">\n  <button\n    mat-icon-button\n    [matTooltip]=\"\n      map.geolocationController.tracking\n        ? ('igo.geo.mapButtons.geolocateInactive' | translate)\n        : ('igo.geo.mapButtons.geolocate' | translate)\n    \"\n    matTooltipPosition=\"left\"\n    [color]=\"color\"\n    (click)=\"onGeolocationClick()\"\n  >\n    <mat-icon>{{ icon$ | async }}</mat-icon>\n  </button>\n</div>\n", styles: [":host button{border-radius:0!important}:host button .mat-ripple,:host button .mdc-icon-button__ripple{border-radius:0!important}:host .igo-geolocate-button-container{width:40px;background-color:#fff}:host .igo-geolocate-button-container:hover{background-color:#efefef}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: GeolocateButtonComponent, decorators: [{
             type: Component,
@@ -20651,7 +20686,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                         MatIconModule,
                         AsyncPipe,
                         TranslateModule
-                    ], 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"] }]
+                    ], 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>{{ 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"] }]
         }], ctorParameters: () => [{ type: i1.ConfigService }], propDecorators: { map: [{
                 type: Input
             }], color: [{
@@ -20700,11 +20735,11 @@ class HomeExtentButtonComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: HomeExtentButtonComponent, deps: [{ token: i1.ConfigService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: HomeExtentButtonComponent, isStandalone: true, selector: "igo-home-extent-button", inputs: { map: "map", color: "color", extentOverride: "extentOverride", centerOverride: "centerOverride", zoomOverride: "zoomOverride" }, ngImport: i0, template: "<div class=\"igo-home-extent-button-container\">\n  <button\n    mat-icon-button\n    [matTooltip]=\"'igo.geo.mapButtons.home-extent' | translate\"\n    matTooltipPosition=\"left\"\n    [color]=\"color\"\n    (click)=\"onToggleClick()\"\n  >\n    <mat-icon svgIcon=\"home-map-marker\"></mat-icon>\n  </button>\n</div>\n", styles: [":host button{border-radius:0!important}:host button .mat-ripple,:host button .mdc-icon-button__ripple{border-radius:0!important}:host .igo-home-extent-button-container{width:40px;background-color:#fff}:host .igo-home-extent-button-container:hover{background-color:#efefef}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: HomeExtentButtonComponent, isStandalone: true, selector: "igo-home-extent-button", inputs: { map: "map", color: "color", extentOverride: "extentOverride", centerOverride: "centerOverride", zoomOverride: "zoomOverride" }, ngImport: i0, template: "<div class=\"igo-home-extent-button-container\">\n  <button\n    mat-icon-button\n    [matTooltip]=\"'igo.geo.mapButtons.home-extent' | translate\"\n    matTooltipPosition=\"left\"\n    [color]=\"color\"\n    (click)=\"onToggleClick()\"\n  >\n    <mat-icon>home</mat-icon>\n  </button>\n</div>\n", styles: [":host button{border-radius:0!important}:host button .mat-ripple,:host button .mdc-icon-button__ripple{border-radius:0!important}:host .igo-home-extent-button-container{width:40px;background-color:#fff}:host .igo-home-extent-button-container:hover{background-color:#efefef}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: HomeExtentButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'igo-home-extent-button', standalone: true, imports: [MatButtonModule, MatTooltipModule, MatIconModule, TranslateModule], 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', standalone: true, imports: [MatButtonModule, MatTooltipModule, MatIconModule, TranslateModule], 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>home</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"] }]
         }], ctorParameters: () => [{ type: i1.ConfigService }], propDecorators: { map: [{
                 type: Input
             }], color: [{
@@ -20811,7 +20846,7 @@ class MenuButtonComponent {
         this.openSidenav.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: MenuButtonComponent, deps: [{ token: i1.ConfigService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: MenuButtonComponent, isStandalone: true, selector: "igo-menu-button", inputs: { sidenavOpened: "sidenavOpened" }, outputs: { openSidenav: "openSidenav" }, ngImport: i0, template: "<button\n  mat-icon-button\n  id=\"menu-button\"\n  [ngClass]=\"menuButtonClass\"\n  tooltip-position=\"below\"\n  matTooltipShowDelay=\"500\"\n  [matTooltip]=\"(sidenavOpened ? 'menu.close' : 'menu.open') | translate\"\n  (click)=\"onToggleSidenavClick()\"\n>\n  <mat-icon svgIcon=\"menu\"></mat-icon>\n</button>\n", styles: [":host button{border-radius:0!important}:host button .mat-ripple,:host button .mdc-icon-button__ripple{border-radius:0!important}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: MenuButtonComponent, isStandalone: true, selector: "igo-menu-button", inputs: { sidenavOpened: "sidenavOpened" }, outputs: { openSidenav: "openSidenav" }, ngImport: i0, template: "<button\n  mat-icon-button\n  id=\"menu-button\"\n  [ngClass]=\"menuButtonClass\"\n  tooltip-position=\"below\"\n  matTooltipShowDelay=\"500\"\n  [matTooltip]=\"(sidenavOpened ? 'menu.close' : 'menu.open') | translate\"\n  (click)=\"onToggleSidenavClick()\"\n>\n  <mat-icon>menu</mat-icon>\n</button>\n", styles: [":host button{border-radius:0!important}:host button .mat-ripple,:host button .mdc-icon-button__ripple{border-radius:0!important}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: MenuButtonComponent, decorators: [{
             type: Component,
@@ -20821,7 +20856,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                         MatTooltipModule,
                         MatIconModule,
                         TranslateModule
-                    ], 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"] }]
+                    ], 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>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"] }]
         }], ctorParameters: () => [{ type: i1.ConfigService }], propDecorators: { sidenavOpened: [{
                 type: Input
             }], openSidenav: [{
@@ -20851,7 +20886,7 @@ class OfflineButtonComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: OfflineButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: OfflineButtonComponent, isStandalone: true, selector: "igo-offline-button", inputs: { map: "map", color: "color", enabled: "enabled" }, ngImport: i0, template: "<div class=\"igo-user-button-container\">\n  <button\n    mat-icon-button\n    [matTooltip]=\"\n      enabled\n        ? ('igo.geo.mapButtons.online' | translate)\n        : ('igo.geo.mapButtons.offline' | translate)\n    \"\n    matTooltipPosition=\"left\"\n    [ngClass]=\"[btnStyle]\"\n    [color]=\"enabled ? color : null\"\n    (click)=\"onClick()\"\n  >\n    <mat-icon svgIcon=\"wifi-strength-off\"></mat-icon>\n  </button>\n</div>\n", styles: [":host button{border-radius:0!important}:host button .mat-ripple,:host button .mdc-icon-button__ripple{border-radius:0!important}:host .onlineStyle{width:40px;background-color:#fff}:host .onlineStyle:hover{background-color:#efefef}:host .offlineStyle{width:40px;background-color:#b9b9b9}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: OfflineButtonComponent, isStandalone: true, selector: "igo-offline-button", inputs: { map: "map", color: "color", enabled: "enabled" }, ngImport: i0, template: "<div class=\"igo-user-button-container\">\n  <button\n    mat-icon-button\n    [matTooltip]=\"\n      enabled\n        ? ('igo.geo.mapButtons.online' | translate)\n        : ('igo.geo.mapButtons.offline' | translate)\n    \"\n    matTooltipPosition=\"left\"\n    [ngClass]=\"[btnStyle]\"\n    [color]=\"enabled ? color : null\"\n    (click)=\"onClick()\"\n  >\n    <mat-icon>wifi_off</mat-icon>\n  </button>\n</div>\n", styles: [":host button{border-radius:0!important}:host button .mat-ripple,:host button .mdc-icon-button__ripple{border-radius:0!important}:host .onlineStyle{width:40px;background-color:#fff}:host .onlineStyle:hover{background-color:#efefef}:host .offlineStyle{width:40px;background-color:#b9b9b9}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: OfflineButtonComponent, decorators: [{
             type: Component,
@@ -20861,7 +20896,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                         NgClass,
                         MatIconModule,
                         TranslateModule
-                    ], 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"] }]
+                    ], 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>wifi_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"] }]
         }], ctorParameters: () => [], propDecorators: { map: [{
                 type: Input
             }], color: [{
@@ -20894,7 +20929,7 @@ class RotationButtonComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: RotationButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: RotationButtonComponent, isStandalone: true, selector: "igo-rotation-button", inputs: { map: "map", showIfNoRotation: "showIfNoRotation", color: "color" }, ngImport: i0, template: "<div\n  *ngIf=\"((rotated$ | async) && !showIfNoRotation) || showIfNoRotation\"\n  class=\"igo-rotation-button-container\"\n  [matTooltip]=\"\n    (rotated$ | async)\n      ? ('igo.geo.mapButtons.resetRotation'\n        | translate: { azimuth: azimuthRounded, rotation: rotationRounded })\n      : ('igo.geo.mapButtons.tipRotation' | translate)\n  \"\n  matTooltipPosition=\"left\"\n>\n  <button\n    mat-icon-button\n    matTooltipPosition=\"left\"\n    [color]=\"color\"\n    [disabled]=\"(rotated$ | async) === false\"\n    (click)=\"map.viewController.resetRotation()\"\n  >\n    <mat-icon [ngStyle]=\"currentStyle$ | async\" svgIcon=\"navigation\">\n    </mat-icon>\n  </button>\n</div>\n", styles: [":host button{border-radius:0!important}:host button .mat-ripple,:host button .mdc-icon-button__ripple{border-radius:0!important}:host .igo-rotation-button-container{width:40px;background-color:#fff}:host .igo-rotation-button-container:hover{background-color:#efefef}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: RotationButtonComponent, isStandalone: true, selector: "igo-rotation-button", inputs: { map: "map", showIfNoRotation: "showIfNoRotation", color: "color" }, ngImport: i0, template: "<div\n  *ngIf=\"((rotated$ | async) && !showIfNoRotation) || showIfNoRotation\"\n  class=\"igo-rotation-button-container\"\n  [matTooltip]=\"\n    (rotated$ | async)\n      ? ('igo.geo.mapButtons.resetRotation'\n        | translate: { azimuth: azimuthRounded, rotation: rotationRounded })\n      : ('igo.geo.mapButtons.tipRotation' | translate)\n  \"\n  matTooltipPosition=\"left\"\n>\n  <button\n    mat-icon-button\n    matTooltipPosition=\"left\"\n    [color]=\"color\"\n    [disabled]=\"(rotated$ | async) === false\"\n    (click)=\"map.viewController.resetRotation()\"\n  >\n    <mat-icon [ngStyle]=\"currentStyle$ | async\">navigation </mat-icon>\n  </button>\n</div>\n", styles: [":host button{border-radius:0!important}:host button .mat-ripple,:host button .mdc-icon-button__ripple{border-radius:0!important}:host .igo-rotation-button-container{width:40px;background-color:#fff}:host .igo-rotation-button-container:hover{background-color:#efefef}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: RotationButtonComponent, decorators: [{
             type: Component,
@@ -20906,7 +20941,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                         NgStyle,
                         AsyncPipe,
                         TranslateModule
-                    ], 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"] }]
+                    ], 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\">navigation </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"] }]
         }], ctorParameters: () => [], propDecorators: { map: [{
                 type: Input
             }], showIfNoRotation: [{
@@ -21142,7 +21177,7 @@ class WakeLockButtonComponent {
         this.storageService.set('wakeLockEnabled', value);
     }
     noSleep;
-    icon$ = new BehaviorSubject('sleep');
+    icon$ = new BehaviorSubject('bedtime');
     visible = false;
     constructor(storageService) {
         this.storageService = storageService;
@@ -21174,7 +21209,7 @@ class WakeLockButtonComponent {
     enableWakeLock() {
         this.noSleep.enable();
         this.enabled = true;
-        this.icon$.next('sleep-off');
+        this.icon$.next('bedtime_off');
     }
     /**
      * Let display sleep
@@ -21182,7 +21217,7 @@ class WakeLockButtonComponent {
     disableWakeLock() {
         this.noSleep.disable();
         this.enabled = false;
-        this.icon$.next('sleep');
+        this.icon$.next('bedtime');
     }
     toggleWakeLock() {
         if (this.enabled) {
@@ -21193,7 +21228,7 @@ class WakeLockButtonComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: WakeLockButtonComponent, deps: [{ token: i3$2.StorageService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: WakeLockButtonComponent, isStandalone: true, selector: "igo-wake-lock-button", inputs: { color: "color", enabled: "enabled" }, ngImport: i0, template: "<div class=\"igo-wake-lock-button-container\">\n  <button\n    [color]=\"color\"\n    mat-icon-button\n    [matTooltip]=\"\n      enabled\n        ? ('igo.geo.mapButtons.preventScreenLock' | translate)\n        : ('igo.geo.mapButtons.letScreenLock' | translate)\n    \"\n    matTooltipPosition=\"left\"\n    (click)=\"toggleWakeLock()\"\n  >\n    <mat-icon svgIcon=\"{{ icon$ | async }}\"></mat-icon>\n  </button>\n</div>\n", styles: [":host button{border-radius:0!important}:host button .mat-ripple,:host button .mdc-icon-button__ripple{border-radius:0!important}:host .igo-wake-lock-button-container{width:40px;background-color:#fff}:host .igo-wake-lock-button-container:hover{background-color:#efefef}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: WakeLockButtonComponent, isStandalone: true, selector: "igo-wake-lock-button", inputs: { color: "color", enabled: "enabled" }, ngImport: i0, template: "<div class=\"igo-wake-lock-button-container\">\n  <button\n    [color]=\"color\"\n    mat-icon-button\n    [matTooltip]=\"\n      enabled\n        ? ('igo.geo.mapButtons.preventScreenLock' | translate)\n        : ('igo.geo.mapButtons.letScreenLock' | translate)\n    \"\n    matTooltipPosition=\"left\"\n    (click)=\"toggleWakeLock()\"\n  >\n    <mat-icon>{{ icon$ | async }}</mat-icon>\n  </button>\n</div>\n", styles: [":host button{border-radius:0!important}:host button .mat-ripple,:host button .mdc-icon-button__ripple{border-radius:0!important}:host .igo-wake-lock-button-container{width:40px;background-color:#fff}:host .igo-wake-lock-button-container:hover{background-color:#efefef}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: WakeLockButtonComponent, decorators: [{
             type: Component,
@@ -21203,7 +21238,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                         MatIconModule,
                         AsyncPipe,
                         TranslateModule
-                    ], 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"] }]
+                    ], 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>{{ 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"] }]
         }], ctorParameters: () => [{ type: i3$2.StorageService }], propDecorators: { color: [{
                 type: Input
             }], enabled: [{
@@ -21224,11 +21259,11 @@ class ZoomButtonComponent {
     }
     constructor() { }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ZoomButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: ZoomButtonComponent, isStandalone: true, selector: "igo-zoom-button", inputs: { map: "map", color: "color" }, ngImport: i0, template: "<div class=\"igo-zoom-button-container\">\n  <button\n    mat-icon-button\n    [matTooltip]=\"'igo.geo.mapButtons.zoomIn' | translate: { zoom: zoom + 1 }\"\n    matTooltipPosition=\"left\"\n    [color]=\"color\"\n    [disabled]=\"zoom >= maxZoom\"\n    (click)=\"map.viewController.zoomIn()\"\n  >\n    <mat-icon svgIcon=\"plus\"></mat-icon>\n  </button>\n\n  <button\n    mat-icon-button\n    [matTooltip]=\"'igo.geo.mapButtons.zoomOut' | translate: { zoom: zoom - 1 }\"\n    matTooltipPosition=\"left\"\n    [color]=\"color\"\n    [disabled]=\"zoom <= minZoom\"\n    (click)=\"map.viewController.zoomOut()\"\n  >\n    <mat-icon svgIcon=\"minus\"></mat-icon>\n  </button>\n</div>\n", styles: [":host button{border-radius:0!important}:host button .mat-ripple,:host button .mdc-icon-button__ripple{border-radius:0!important}:host .igo-zoom-button-container{width:40px}:host .igo-zoom-button-container button{background-color:#fff}:host .igo-zoom-button-container button:hover{background-color:#efefef}:host .igo-zoom-button-container button:first-child{margin-bottom:2px}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: ZoomButtonComponent, isStandalone: true, selector: "igo-zoom-button", inputs: { map: "map", color: "color" }, ngImport: i0, template: "<div class=\"igo-zoom-button-container\">\n  <button\n    mat-icon-button\n    [matTooltip]=\"'igo.geo.mapButtons.zoomIn' | translate: { zoom: zoom + 1 }\"\n    matTooltipPosition=\"left\"\n    [color]=\"color\"\n    [disabled]=\"zoom >= maxZoom\"\n    (click)=\"map.viewController.zoomIn()\"\n  >\n    <mat-icon>add</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>remove</mat-icon>\n  </button>\n</div>\n", styles: [":host button{border-radius:0!important}:host button .mat-ripple,:host button .mdc-icon-button__ripple{border-radius:0!important}:host .igo-zoom-button-container{width:40px}:host .igo-zoom-button-container button{background-color:#fff}:host .igo-zoom-button-container button:hover{background-color:#efefef}:host .igo-zoom-button-container button:first-child{margin-bottom:2px}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ZoomButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'igo-zoom-button', standalone: true, imports: [MatButtonModule, MatTooltipModule, MatIconModule, TranslateModule], 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', standalone: true, imports: [MatButtonModule, MatTooltipModule, MatIconModule, TranslateModule], 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>add</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>remove</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"] }]
         }], ctorParameters: () => [], propDecorators: { map: [{
                 type: Input
             }], color: [{
@@ -22946,7 +22981,7 @@ class DownloadButtonComponent {
         return this.layer.dataSource.options;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: DownloadButtonComponent, deps: [{ token: DownloadService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: DownloadButtonComponent, isStandalone: true, selector: "igo-download-button", inputs: { layer: "layer", color: "color" }, ngImport: i0, template: "<button\n  *ngIf=\"\n    options &&\n    options.download &&\n    (options.download['dynamicUrl'] || options.download['url'])\n  \"\n  mat-icon-button\n  tooltip-position=\"below\"\n  matTooltipShowDelay=\"500\"\n  [matTooltip]=\"'igo.geo.download.action' | translate\"\n  [color]=\"color\"\n  (click)=\"openDownload(layer)\"\n>\n  <mat-icon svgIcon=\"download\"></mat-icon>\n</button>\n", styles: [""], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: DownloadButtonComponent, isStandalone: true, selector: "igo-download-button", inputs: { layer: "layer", color: "color" }, ngImport: i0, template: "<button\n  *ngIf=\"\n    options &&\n    options.download &&\n    (options.download['dynamicUrl'] || options.download['url'])\n  \"\n  mat-icon-button\n  tooltip-position=\"below\"\n  matTooltipShowDelay=\"500\"\n  [matTooltip]=\"'igo.geo.download.action' | translate\"\n  [color]=\"color\"\n  (click)=\"openDownload(layer)\"\n>\n  <mat-icon>download</mat-icon>\n</button>\n", styles: [""], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: DownloadButtonComponent, decorators: [{
             type: Component,
@@ -22956,7 +22991,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                         MatTooltipModule,
                         MatIconModule,
                         TranslateModule
-                    ], 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" }]
+                    ], 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>download</mat-icon>\n</button>\n" }]
         }], ctorParameters: () => [{ type: DownloadService }], propDecorators: { layer: [{
                 type: Input
             }], color: [{
@@ -23209,7 +23244,7 @@ class LayerLegendComponent {
         this.imagesHeight[id] = elemRef.height;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: LayerLegendComponent, deps: [{ token: CapabilitiesService }, { token: i1$2.LanguageService }, { token: i1.ConfigService }, { token: i1$1.HttpClient }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: LayerLegendComponent, isStandalone: true, selector: "igo-layer-legend", inputs: { updateLegendOnResolutionChange: "updateLegendOnResolutionChange", layer: "layer" }, viewQueries: [{ propertyName: "renderedLegends", predicate: ["renderedLegend"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"legendItems$ | async as items\">\n  <ng-container *ngIf=\"items.length; else noItems\">\n    <ng-container *ngFor=\"let item of items.slice().reverse()\" #renderedLegends>\n      <div *ngIf=\"getLegend; else noItems\">\n        <mat-list-item *ngIf=\"item.title\">\n          <mat-icon\n            id=\"legend-toggle\"\n            class=\"igo-chevron\"\n            matListItemIcon\n            igoCollapse\n            [target]=\"legend\"\n            [collapsed]=\"item.collapsed\"\n            (toggle)=\"toggleLegendItem($event, item)\"\n            svgIcon=\"chevron-up\"\n          >\n          </mat-icon>\n          <span matListItemTitle>{{ computeItemTitle(item) | async }} </span>\n        </mat-list-item>\n        <div\n          #legend\n          class=\"igo-layer-legend\"\n          [ngClass]=\"{ 'with-title': item.title }\"\n        >\n          <div *ngIf=\"currentStyle !== undefined\">\n            <mat-form-field>\n              <mat-select\n                tooltip-position=\"below\"\n                matTooltipShowDelay=\"500\"\n                [matTooltip]=\"'igo.geo.layer.legend.selectStyle' | translate\"\n                [(ngModel)]=\"currentStyle\"\n                (selectionChange)=\"onChangeStyle()\"\n              >\n                <mat-option *ngFor=\"let style of styles\" [value]=\"style.name\">{{\n                  style.title\n                }}</mat-option>\n              </mat-select>\n            </mat-form-field>\n          </div>\n          <div *ngIf=\"!item.collapsed\">\n            <div *ngIf=\"item.url\">\n              <img\n                igoImageError\n                *ngIf=\"item.imgGraphValue\"\n                [hideError]=\"true\"\n                #renderedLegend\n                id=\"{{ item.title }}\"\n                (load)=\"onLoadImage(item.title)\"\n                [src]=\"item.imgGraphValue\"\n                alt=\"{{ 'igo.geo.layer.legend.loadingLegendText' | translate }}\"\n              />\n              <small *ngIf=\"imagesHeight[item.title] < 16\">\n                {{ 'igo.geo.layer.legend.noLegendScale' | translate }}\n              </small>\n            </div>\n            <div\n              [ngStyle]=\"item.style\"\n              [innerHTML]=\"item.html | sanitizeHtml\"\n              *ngIf=\"item.html\"\n            ></div>\n          </div>\n        </div>\n      </div>\n    </ng-container>\n  </ng-container>\n\n  <ng-template #noItems>\n    <small>\n      {{ 'igo.geo.layer.legend.noLegendText' | translate }}\n    </small>\n  </ng-template>\n</ng-container>\n", styles: [":host .igo-layer-legend.with-title{padding-left:18px}:host img{max-width:100%}:host img:after{content:\" \";position:relative;height:17px;float:left;width:17px;top:-3px;right:19px;background-color:#fff;border:3px solid #f3f3f3;border-radius:50%;animation:2s linear infinite spin}@-moz-document url-prefix(){:host img:after{margin-left:19px}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i2$5.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i2$5.MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "directive", type: i2$5.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: CollapseDirective, selector: "[igoCollapse]", inputs: ["target", "collapsed"], outputs: ["toggle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i8$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6$4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "directive", type: ImageErrorDirective, selector: "[igoImageError]", inputs: ["errorImageUrl", "hideError"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: LayerLegendComponent, isStandalone: true, selector: "igo-layer-legend", inputs: { updateLegendOnResolutionChange: "updateLegendOnResolutionChange", layer: "layer" }, viewQueries: [{ propertyName: "renderedLegends", predicate: ["renderedLegend"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"legendItems$ | async as items\">\n  <ng-container *ngIf=\"items.length; else noItems\">\n    <ng-container *ngFor=\"let item of items.slice().reverse()\" #renderedLegends>\n      <div *ngIf=\"getLegend; else noItems\">\n        <mat-list-item *ngIf=\"item.title\">\n          <mat-icon\n            id=\"legend-toggle\"\n            class=\"igo-chevron\"\n            matListItemIcon\n            igoCollapse\n            [target]=\"legend\"\n            [collapsed]=\"item.collapsed\"\n            (toggle)=\"toggleLegendItem($event, item)\"\n            >expand_less\n          </mat-icon>\n          <span matListItemTitle>{{ computeItemTitle(item) | async }} </span>\n        </mat-list-item>\n        <div\n          #legend\n          class=\"igo-layer-legend\"\n          [ngClass]=\"{ 'with-title': item.title }\"\n        >\n          <div *ngIf=\"currentStyle !== undefined\">\n            <mat-form-field>\n              <mat-select\n                tooltip-position=\"below\"\n                matTooltipShowDelay=\"500\"\n                [matTooltip]=\"'igo.geo.layer.legend.selectStyle' | translate\"\n                [(ngModel)]=\"currentStyle\"\n                (selectionChange)=\"onChangeStyle()\"\n              >\n                <mat-option *ngFor=\"let style of styles\" [value]=\"style.name\">{{\n                  style.title\n                }}</mat-option>\n              </mat-select>\n            </mat-form-field>\n          </div>\n          <div *ngIf=\"!item.collapsed\">\n            <div *ngIf=\"item.url\">\n              <img\n                igoImageError\n                *ngIf=\"item.imgGraphValue\"\n                [hideError]=\"true\"\n                #renderedLegend\n                id=\"{{ item.title }}\"\n                (load)=\"onLoadImage(item.title)\"\n                [src]=\"item.imgGraphValue\"\n                alt=\"{{ 'igo.geo.layer.legend.loadingLegendText' | translate }}\"\n              />\n              <small *ngIf=\"imagesHeight[item.title] < 16\">\n                {{ 'igo.geo.layer.legend.noLegendScale' | translate }}\n              </small>\n            </div>\n            <div\n              [ngStyle]=\"item.style\"\n              [innerHTML]=\"item.html | sanitizeHtml\"\n              *ngIf=\"item.html\"\n            ></div>\n          </div>\n        </div>\n      </div>\n    </ng-container>\n  </ng-container>\n\n  <ng-template #noItems>\n    <small>\n      {{ 'igo.geo.layer.legend.noLegendText' | translate }}\n    </small>\n  </ng-template>\n</ng-container>\n", styles: [":host .igo-layer-legend.with-title{padding-left:18px}:host img{max-width:100%}:host img:after{content:\" \";position:relative;height:17px;float:left;width:17px;top:-3px;right:19px;background-color:#fff;border:3px solid #f3f3f3;border-radius:50%;animation:2s linear infinite spin}@-moz-document url-prefix(){:host img:after{margin-left:19px}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i2$5.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i2$5.MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "directive", type: i2$5.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: CollapseDirective, selector: "[igoCollapse]", inputs: ["target", "collapsed"], outputs: ["toggle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i8$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6$4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "directive", type: ImageErrorDirective, selector: "[igoImageError]", inputs: ["errorImageUrl", "hideError"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: LayerLegendComponent, decorators: [{
             type: Component,
@@ -23230,7 +23265,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                         AsyncPipe,
                         TranslateModule,
                         SanitizeHtmlPipe
-                    ], 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"] }]
+                    ], 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            >expand_less\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"] }]
         }], ctorParameters: () => [{ type: CapabilitiesService }, { type: i1$2.LanguageService }, { type: i1.ConfigService }, { type: i1$1.HttpClient }, { type: i0.ChangeDetectorRef }], propDecorators: { updateLegendOnResolutionChange: [{
                 type: Input
             }], renderedLegends: [{
@@ -23555,7 +23590,7 @@ class OgcFilterTimeSliderComponent {
     calculatedStep = 0;
     _defaultDisplayFormat = 'DD/MM/YYYY HH:mm A';
     _defaultSliderInterval = 2000;
-    playIcon = 'play-circle';
+    playIcon = 'play_circle';
     resetIcon = 'replay';
     get sliderInterval() {
         return this.currentFilter.sliderInterval === undefined
@@ -23613,7 +23648,7 @@ class OgcFilterTimeSliderComponent {
             this.stopFilter();
         }
         else {
-            this.playIcon = 'pause-circle';
+            this.playIcon = 'pause_circle';
             this.interval = setInterval((that) => {
                 if (this.slider.step < this.calculatedStep) {
                     const _increment = '_increment';
@@ -23632,14 +23667,14 @@ class OgcFilterTimeSliderComponent {
             clearInterval(this.interval);
         }
         this.interval = undefined;
-        this.playIcon = 'play-circle';
+        this.playIcon = 'play_circle';
     }
     resetFilter(event) {
         if (this.interval) {
             clearInterval(this.interval);
         }
         this.interval = undefined;
-        this.playIcon = 'play-circle';
+        this.playIcon = 'play_circle';
         this.slider.step = 1;
         const _increment = '_increment';
         const _emitInputEvent = '_emitInputEvent';
@@ -23711,11 +23746,11 @@ class OgcFilterTimeSliderComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: OgcFilterTimeSliderComponent, deps: [{ token: OGCFilterTimeService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: OgcFilterTimeSliderComponent, isStandalone: true, selector: "igo-ogc-filter-time-slider", inputs: { currentFilter: "currentFilter", begin: "begin", max: "max", datasource: "datasource" }, outputs: { changeProperty: "changeProperty" }, providers: [OGCFilterTimeService], viewQueries: [{ propertyName: "slider", first: true, predicate: MatSlider, descendants: true }], ngImport: i0, template: "<div class=\"slider-container\">\n  <mat-slider\n    id=\"time-slider\"\n    [step]=\"1\"\n    [min]=\"1\"\n    [max]=\"calculatedStep\"\n    [(ngModel)]=\"sliderValue\"\n    [displayWith]=\"sliderDisplayWith\"\n    thumbLabel\n    #ngSlider\n    ><input\n      matSliderThumb\n      (input)=\"\n        handleSliderInput({\n          source: ngSliderThumb,\n          parent: ngSlider,\n          value: ngSliderThumb.value\n        })\n      \"\n      #ngSliderThumb=\"matSliderThumb\"\n    />\n  </mat-slider>\n  <button mat-icon-button color=\"primary\" (click)=\"playFilter($event)\">\n    <mat-icon [svgIcon]=\"playIcon\"></mat-icon>\n  </button>\n  <button mat-icon-button color=\"primary\" (click)=\"resetFilter($event)\">\n    <mat-icon svgIcon=\"{{ resetIcon }}\"></mat-icon>\n  </button>\n</div>\n", styles: [":host ::ng-deep input{text-align:center!important;margin:auto 5px!important}:host .datetime-container{text-align:center}:host .slider-container{text-align:center}:host .datetime-input{display:inline-block;margin:5px 25px}:host .date-input{width:120px;margin-right:25px}:host .time-input{display:inherit;margin-right:25px}:host .hour-input,:host .minute-input{width:40px}:host .minute-input{margin-left:10px}\n"], dependencies: [{ kind: "ngmodule", type: MatSliderModule }, { kind: "component", type: i2$6.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i2$6.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: OgcFilterTimeSliderComponent, isStandalone: true, selector: "igo-ogc-filter-time-slider", inputs: { currentFilter: "currentFilter", begin: "begin", max: "max", datasource: "datasource" }, outputs: { changeProperty: "changeProperty" }, providers: [OGCFilterTimeService], viewQueries: [{ propertyName: "slider", first: true, predicate: MatSlider, descendants: true }], ngImport: i0, template: "<div class=\"slider-container\">\n  <mat-slider\n    id=\"time-slider\"\n    [step]=\"1\"\n    [min]=\"1\"\n    [max]=\"calculatedStep\"\n    [(ngModel)]=\"sliderValue\"\n    [displayWith]=\"sliderDisplayWith\"\n    thumbLabel\n    #ngSlider\n    ><input\n      matSliderThumb\n      (input)=\"\n        handleSliderInput({\n          source: ngSliderThumb,\n          parent: ngSlider,\n          value: ngSliderThumb.value\n        })\n      \"\n      #ngSliderThumb=\"matSliderThumb\"\n    />\n  </mat-slider>\n  <button mat-icon-button color=\"primary\" (click)=\"playFilter($event)\">\n    <mat-icon>{{ playIcon }}</mat-icon>\n  </button>\n  <button mat-icon-button color=\"primary\" (click)=\"resetFilter($event)\">\n    <mat-icon>{{ resetIcon }}</mat-icon>\n  </button>\n</div>\n", styles: [":host ::ng-deep input{text-align:center!important;margin:auto 5px!important}:host .datetime-container{text-align:center}:host .slider-container{text-align:center}:host .datetime-input{display:inline-block;margin:5px 25px}:host .date-input{width:120px;margin-right:25px}:host .time-input{display:inherit;margin-right:25px}:host .hour-input,:host .minute-input{width:40px}:host .minute-input{margin-left:10px}\n"], dependencies: [{ kind: "ngmodule", type: MatSliderModule }, { kind: "component", type: i2$6.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i2$6.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: OgcFilterTimeSliderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'igo-ogc-filter-time-slider', standalone: true, imports: [MatSliderModule, FormsModule, MatButtonModule, MatIconModule], providers: [OGCFilterTimeService], 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', standalone: true, imports: [MatSliderModule, FormsModule, MatButtonModule, MatIconModule], providers: [OGCFilterTimeService], 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>{{ playIcon }}</mat-icon>\n  </button>\n  <button mat-icon-button color=\"primary\" (click)=\"resetFilter($event)\">\n    <mat-icon>{{ 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"] }]
         }], ctorParameters: () => [{ type: OGCFilterTimeService }], propDecorators: { currentFilter: [{
                 type: Input
             }], begin: [{
@@ -24326,7 +24361,7 @@ class OgcFilterTimeComponent {
         return date instanceof Date && !isNaN(date.getTime());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: OgcFilterTimeComponent, deps: [{ token: OGCFilterTimeService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: OgcFilterTimeComponent, isStandalone: true, selector: "igo-ogc-filter-time", inputs: { datasource: "datasource", currentFilter: "currentFilter" }, outputs: { changeProperty: "changeProperty" }, providers: [OGCFilterTimeService, provideMomentDateAdapter()], viewQueries: [{ propertyName: "endDatepickerTime", first: true, predicate: ["endDatepickerTime"], descendants: true }, { propertyName: "beginDatepickerTime", first: true, predicate: ["beginDatepickerTime"], descendants: true }, { propertyName: "beginTime", first: true, predicate: ["beginTime"], descendants: true }, { propertyName: "endTime", first: true, predicate: ["endTime"], descendants: true }], ngImport: i0, template: "<div class=\"datetime-container\">\n  <mat-slide-toggle\n    *ngIf=\"this.currentFilter.sliderOptions?.enabled\"\n    [(ngModel)]=\"sliderMode\"\n    (change)=\"modeChange($event)\"\n  >\n    {{ 'igo.geo.filter.sliderModeTitle' | translate }}\n  </mat-slide-toggle>\n\n  <div class=\"slider-container\" *ngIf=\"sliderMode\">\n    <igo-ogc-filter-time-slider\n      [begin]=\"beginValue\"\n      [max]=\"this.restrictedToStep() ? this.maxDate : this.endValue\"\n      [currentFilter]=\"currentFilter\"\n      [datasource]=\"datasource\"\n      (changeProperty)=\"changePropertyByPass($event)\"\n    >\n    </igo-ogc-filter-time-slider>\n  </div>\n\n  <div *ngIf=\"!sliderMode\">\n    <div class=\"year-input-container\" *ngIf=\"calendarTypeYear\">\n      <!-- to emulate a year-picker, 2 input: first input to show user just year and second input hiden and bind \n        with the datepicker  -->\n      <mat-form-field class=\"year-input\" subscriptSizing=\"dynamic\">\n        <mat-label>{{ 'igo.geo.timeFilter.startYear' | translate }}</mat-label>\n        <input\n          matInput\n          class=\"year-input-only-year\"\n          value=\"{{ onlyYearBegin }}\"\n          (change)=\"yearOnlyInputChange($event, beginDatepicker, 'begin')\"\n          [disabled]=\"filterStateDisable\"\n        />\n        <mat-datepicker-toggle\n          matSuffix\n          [for]=\"beginDatepicker\"\n          [disabled]=\"filterStateDisable\"\n        ></mat-datepicker-toggle>\n\n        <mat-datepicker\n          panelClass=\"datepicker-year\"\n          #beginDatepicker\n          [startView]=\"calendarView()\"\n          [startAt]=\"beginValue\"\n          (yearSelected)=\"yearSelected($event, beginDatepicker, 'begin')\"\n        >\n        </mat-datepicker>\n\n        <input\n          #beginYear\n          class=\"year-input-hide\"\n          matInput\n          [matDatepicker]=\"beginDatepicker\"\n          enabled=\"false\"\n          readonly=\"true\"\n          [value]=\"\n            beginValue ? beginValue : handleDate(datasource.options.minDate)\n          \"\n          [min]=\"handleDate(datasource.options.minDate)\"\n          [max]=\"\n            endValue && !restrictedToStep()\n              ? endValue\n              : handleDate(datasource.options.maxDate)\n          \"\n        />\n      </mat-form-field>\n\n      <mat-form-field class=\"year-input\" subscriptSizing=\"dynamic\">\n        <mat-label>{{ 'igo.geo.timeFilter.endYear' | translate }}</mat-label>\n        <input\n          matInput\n          class=\"year-input-only-year\"\n          value=\"{{ onlyYearEnd }}\"\n          (change)=\"yearOnlyInputChange($event, endDatepicker, 'end')\"\n          [disabled]=\"filterStateDisable\"\n        />\n        <mat-datepicker-toggle\n          matSuffix\n          [for]=\"endDatepicker\"\n          [disabled]=\"filterStateDisable\"\n        ></mat-datepicker-toggle>\n        <mat-datepicker\n          panelClass=\"datepicker-year\"\n          #endDatepicker\n          [startView]=\"calendarView()\"\n          [startAt]=\"endValue\"\n          (yearSelected)=\"yearSelected($event, endDatepicker, 'end')\"\n        >\n        </mat-datepicker>\n\n        <input\n          #endYear\n          class=\"year-input-hide\"\n          matInput\n          [matDatepicker]=\"endDatepicker\"\n          enabled=\"false\"\n          readonly=\"true\"\n          [value]=\"endValue ? endValue : handleDate(datasource.options.maxDate)\"\n          [min]=\"\n            beginValue ? beginValue : handleDate(datasource.options.minDate)\n          \"\n          [max]=\"handleDate(datasource.options.maxDate)\"\n        />\n      </mat-form-field>\n      <div class=\"actions-container\">\n        <button\n          class=\"reset-button\"\n          mat-icon-button\n          color=\"primary\"\n          (click)=\"resetFilter()\"\n          [matTooltip]=\"'igo.geo.filter.resetFilters' | translate\"\n          [disabled]=\"filterStateDisable\"\n        >\n          <mat-icon svgIcon=\"{{ resetIcon }}\"></mat-icon>\n        </button>\n        <mat-slide-toggle\n          class=\"toggle-filter-state\"\n          (change)=\"toggleFilterState()\"\n          [matTooltip]=\"'igo.geo.filter.toggleFilterState' | translate\"\n          tooltip-position=\"below\"\n          matTooltipShowDelay=\"500\"\n          [checked]=\"!filterStateDisable\"\n        >\n        </mat-slide-toggle>\n      </div>\n    </div>\n\n    <div class=\"datetime-input-container\" *ngIf=\"calendarType() !== 'year'\">\n      <div class=\"datetime-input\">\n        <mat-form-field class=\"date-input\" subscriptSizing=\"dynamic\">\n          <mat-datepicker-toggle\n            matSuffix\n            [for]=\"beginDatepicker\"\n            [disabled]=\"filterStateDisable\"\n          ></mat-datepicker-toggle>\n          <input\n            #begin\n            matInput\n            [matDatepicker]=\"beginDatepicker\"\n            [placeholder]=\"'igo.geo.timeFilter.startDate' | translate\"\n            [attr.disabled]=\"!currentFilter.active\"\n            (dateChange)=\"changeTemporalProperty(begin.value, 1)\"\n            [matDatepickerFilter]=\"filterBeginFunction\"\n            [value]=\"\n              beginValue ? beginValue : handleDate(datasource.options.minDate)\n            \"\n            [min]=\"handleDate(datasource.options.minDate)\"\n            [max]=\"\n              endValue && !restrictedToStep()\n                ? endValue\n                : handleDate(datasource.options.maxDate)\n            \"\n            [disabled]=\"filterStateDisable\"\n          />\n          <span class=\"filler\"></span>\n          <mat-datepicker\n            #beginDatepicker\n            [startView]=\"calendarView()\"\n            [startAt]=\"beginValue\"\n            (yearSelected)=\"yearSelected($event, beginDatepicker, 'begin')\"\n            (monthSelected)=\"monthSelected($event, beginDatepicker, 'begin')\"\n          >\n          </mat-datepicker>\n        </mat-form-field>\n\n        <div *ngIf=\"calendarType() === 'datetime'\" class=\"time-input\">\n          <mat-form-field class=\"hour-input\" subscriptSizing=\"dynamic\">\n            <mat-label>{{ 'igo.geo.timeFilter.hour' | translate }}</mat-label>\n            <mat-select\n              [formControl]=\"beginHourFormControl\"\n              [attr.disabled]=\"!currentFilter.active\"\n              (selectionChange)=\"changeTemporalProperty(begin.value, 1)\"\n            >\n              <mat-option *ngFor=\"let hour of beginHours\" [value]=\"hour\">{{\n                hour\n              }}</mat-option>\n            </mat-select>\n          </mat-form-field>\n          <mat-form-field class=\"minute-input\" subscriptSizing=\"dynamic\">\n            <mat-label>{{ 'igo.geo.timeFilter.minute' | translate }}</mat-label>\n            <mat-select\n              [formControl]=\"beginMinuteFormControl\"\n              [attr.disabled]=\"!currentFilter.active\"\n              (selectionChange)=\"changeTemporalProperty(begin.value, 1)\"\n            >\n              <mat-option\n                *ngFor=\"let minute of beginMinutes\"\n                [value]=\"minute\"\n                >{{ minute }}</mat-option\n              >\n            </mat-select>\n          </mat-form-field>\n        </div>\n      </div>\n\n      <div *ngIf=\"!restrictedToStep()\" class=\"datetime-input\">\n        <mat-form-field class=\"date-input\" subscriptSizing=\"dynamic\">\n          <mat-datepicker-toggle\n            matSuffix\n            [for]=\"endDatepicker\"\n            [disabled]=\"filterStateDisable\"\n          ></mat-datepicker-toggle>\n          <input\n            #end\n            matInput\n            [matDatepicker]=\"endDatepicker\"\n            [placeholder]=\"'igo.geo.timeFilter.endDate' | translate\"\n            [attr.disabled]=\"!currentFilter.active\"\n            (dateChange)=\"changeTemporalProperty(end.value, 2)\"\n            [matDatepickerFilter]=\"filterEndFunction\"\n            [value]=\"\n              endValue ? endValue : handleDate(datasource.options.maxDate)\n            \"\n            [min]=\"\n              beginValue ? beginValue : handleDate(datasource.options.minDate)\n            \"\n            [max]=\"handleDate(datasource.options.maxDate)\"\n            [disabled]=\"filterStateDisable\"\n          />\n          <span class=\"filler\"></span>\n          <mat-datepicker\n            #endDatepicker\n            [startView]=\"calendarView()\"\n            [startAt]=\"endValue\"\n            (yearSelected)=\"yearSelected($event, endDatepicker, 'end')\"\n            (monthSelected)=\"monthSelected($event, endDatepicker, 'end')\"\n          >\n          </mat-datepicker>\n        </mat-form-field>\n\n        <div *ngIf=\"calendarType() === 'datetime'\" class=\"time-input\">\n          <mat-form-field class=\"hour-input\" subscriptSizing=\"dynamic\">\n            <mat-label>{{ 'igo.geo.timeFilter.hour' | translate }}</mat-label>\n            <mat-select\n              [formControl]=\"endHourFormControl\"\n              [attr.disabled]=\"!currentFilter.active\"\n              (selectionChange)=\"changeTemporalProperty(end.value, 2)\"\n            >\n              <mat-option *ngFor=\"let hour of endHours\" [value]=\"hour\">{{\n                hour\n              }}</mat-option>\n            </mat-select>\n          </mat-form-field>\n          <mat-form-field class=\"minute-input\" subscriptSizing=\"dynamic\">\n            <mat-label>{{ 'igo.geo.timeFilter.minute' | translate }}</mat-label>\n            <mat-select\n              [formControl]=\"endMinuteFormControl\"\n              [attr.disabled]=\"!currentFilter.active\"\n              (selectionChange)=\"changeTemporalProperty(end.value, 2)\"\n            >\n              <mat-option *ngFor=\"let minute of endMinutes\" [value]=\"minute\">{{\n                minute\n              }}</mat-option>\n            </mat-select>\n          </mat-form-field>\n        </div>\n      </div>\n\n      <div class=\"actions-container\">\n        <button\n          class=\"reset-button\"\n          mat-icon-button\n          color=\"primary\"\n          (click)=\"resetFilter()\"\n          [matTooltip]=\"'igo.geo.filter.resetFilters' | translate\"\n          [disabled]=\"filterStateDisable\"\n        >\n          <mat-icon svgIcon=\"{{ resetIcon }}\"></mat-icon>\n        </button>\n        <mat-slide-toggle\n          class=\"toggle-filter-state\"\n          (change)=\"toggleFilterState()\"\n          tooltip-position=\"below\"\n          matTooltipShowDelay=\"500\"\n          [matTooltip]=\"'igo.geo.filter.toggleFilterState' | translate\"\n          [checked]=\"!filterStateDisable\"\n        >\n        </mat-slide-toggle>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [":host ::ng-deep input{text-align:center!important;margin:auto 5px!important}:host .slider-container{text-align:center}:host .datetime-input-container{display:flex;align-items:center;flex-wrap:wrap}:host .datetime-input-container>:not(:last-child){margin-right:8px}:host .datetime-input{display:block}:host .date-input{width:154px}:host .actions-container{display:flex;align-items:center}:host .time-input{margin-top:16px}:host .time-input>:not(:last-child){margin-right:8px}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){:host .time-input{margin-top:4px}}:host .hour-input,:host .minute-input{width:100px}:host .year-input-container{display:flex;width:100%}:host .year-input-container mat-form-field:not(:last-child){margin-right:4px}:host .year-input-hide{width:120px;margin-right:25px;display:none}:host .year-input-only-year{width:120px;margin-right:25px;text-align:left!important}:host ::ng-deep .datepicker-year ::ng-deep .mat-calendar-arrow{display:none}:host ::ng-deep .datepicker-year ::ng-deep .mat-calendar-period-button{pointer-events:none}:host ::ng-deep .datepicker-year ::ng-deep .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover{background-color:#0000001f;border-radius:999px}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i5$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: OgcFilterTimeSliderComponent, selector: "igo-ogc-filter-time-slider", inputs: ["currentFilter", "begin", "max", "datasource"], outputs: ["changeProperty"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i6$6.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i6$6.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i6$6.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i8$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6$4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$6.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: OgcFilterTimeComponent, isStandalone: true, selector: "igo-ogc-filter-time", inputs: { datasource: "datasource", currentFilter: "currentFilter" }, outputs: { changeProperty: "changeProperty" }, providers: [OGCFilterTimeService, provideMomentDateAdapter()], viewQueries: [{ propertyName: "endDatepickerTime", first: true, predicate: ["endDatepickerTime"], descendants: true }, { propertyName: "beginDatepickerTime", first: true, predicate: ["beginDatepickerTime"], descendants: true }, { propertyName: "beginTime", first: true, predicate: ["beginTime"], descendants: true }, { propertyName: "endTime", first: true, predicate: ["endTime"], descendants: true }], ngImport: i0, template: "<div class=\"datetime-container\">\n  <mat-slide-toggle\n    *ngIf=\"this.currentFilter.sliderOptions?.enabled\"\n    [(ngModel)]=\"sliderMode\"\n    (change)=\"modeChange($event)\"\n  >\n    {{ 'igo.geo.filter.sliderModeTitle' | translate }}\n  </mat-slide-toggle>\n\n  <div class=\"slider-container\" *ngIf=\"sliderMode\">\n    <igo-ogc-filter-time-slider\n      [begin]=\"beginValue\"\n      [max]=\"this.restrictedToStep() ? this.maxDate : this.endValue\"\n      [currentFilter]=\"currentFilter\"\n      [datasource]=\"datasource\"\n      (changeProperty)=\"changePropertyByPass($event)\"\n    >\n    </igo-ogc-filter-time-slider>\n  </div>\n\n  <div *ngIf=\"!sliderMode\">\n    <div class=\"year-input-container\" *ngIf=\"calendarTypeYear\">\n      <!-- to emulate a year-picker, 2 input: first input to show user just year and second input hiden and bind \n        with the datepicker  -->\n      <mat-form-field class=\"year-input\" subscriptSizing=\"dynamic\">\n        <mat-label>{{ 'igo.geo.timeFilter.startYear' | translate }}</mat-label>\n        <input\n          matInput\n          class=\"year-input-only-year\"\n          value=\"{{ onlyYearBegin }}\"\n          (change)=\"yearOnlyInputChange($event, beginDatepicker, 'begin')\"\n          [disabled]=\"filterStateDisable\"\n        />\n        <mat-datepicker-toggle\n          matSuffix\n          [for]=\"beginDatepicker\"\n          [disabled]=\"filterStateDisable\"\n        ></mat-datepicker-toggle>\n\n        <mat-datepicker\n          panelClass=\"datepicker-year\"\n          #beginDatepicker\n          [startView]=\"calendarView()\"\n          [startAt]=\"beginValue\"\n          (yearSelected)=\"yearSelected($event, beginDatepicker, 'begin')\"\n        >\n        </mat-datepicker>\n\n        <input\n          #beginYear\n          class=\"year-input-hide\"\n          matInput\n          [matDatepicker]=\"beginDatepicker\"\n          enabled=\"false\"\n          readonly=\"true\"\n          [value]=\"\n            beginValue ? beginValue : handleDate(datasource.options.minDate)\n          \"\n          [min]=\"handleDate(datasource.options.minDate)\"\n          [max]=\"\n            endValue && !restrictedToStep()\n              ? endValue\n              : handleDate(datasource.options.maxDate)\n          \"\n        />\n      </mat-form-field>\n\n      <mat-form-field class=\"year-input\" subscriptSizing=\"dynamic\">\n        <mat-label>{{ 'igo.geo.timeFilter.endYear' | translate }}</mat-label>\n        <input\n          matInput\n          class=\"year-input-only-year\"\n          value=\"{{ onlyYearEnd }}\"\n          (change)=\"yearOnlyInputChange($event, endDatepicker, 'end')\"\n          [disabled]=\"filterStateDisable\"\n        />\n        <mat-datepicker-toggle\n          matSuffix\n          [for]=\"endDatepicker\"\n          [disabled]=\"filterStateDisable\"\n        ></mat-datepicker-toggle>\n        <mat-datepicker\n          panelClass=\"datepicker-year\"\n          #endDatepicker\n          [startView]=\"calendarView()\"\n          [startAt]=\"endValue\"\n          (yearSelected)=\"yearSelected($event, endDatepicker, 'end')\"\n        >\n        </mat-datepicker>\n\n        <input\n          #endYear\n          class=\"year-input-hide\"\n          matInput\n          [matDatepicker]=\"endDatepicker\"\n          enabled=\"false\"\n          readonly=\"true\"\n          [value]=\"endValue ? endValue : handleDate(datasource.options.maxDate)\"\n          [min]=\"\n            beginValue ? beginValue : handleDate(datasource.options.minDate)\n          \"\n          [max]=\"handleDate(datasource.options.maxDate)\"\n        />\n      </mat-form-field>\n      <div class=\"actions-container\">\n        <button\n          class=\"reset-button\"\n          mat-icon-button\n          color=\"primary\"\n          (click)=\"resetFilter()\"\n          [matTooltip]=\"'igo.geo.filter.resetFilters' | translate\"\n          [disabled]=\"filterStateDisable\"\n        >\n          <mat-icon>{{ 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>{{ resetIcon }}</mat-icon>\n        </button>\n        <mat-slide-toggle\n          class=\"toggle-filter-state\"\n          (change)=\"toggleFilterState()\"\n          tooltip-position=\"below\"\n          matTooltipShowDelay=\"500\"\n          [matTooltip]=\"'igo.geo.filter.toggleFilterState' | translate\"\n          [checked]=\"!filterStateDisable\"\n        >\n        </mat-slide-toggle>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [":host ::ng-deep input{text-align:center!important;margin:auto 5px!important}:host .slider-container{text-align:center}:host .datetime-input-container{display:flex;align-items:center;flex-wrap:wrap}:host .datetime-input-container>:not(:last-child){margin-right:8px}:host .datetime-input{display:block}:host .date-input{width:154px}:host .actions-container{display:flex;align-items:center}:host .time-input{margin-top:16px}:host .time-input>:not(:last-child){margin-right:8px}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){:host .time-input{margin-top:4px}}:host .hour-input,:host .minute-input{width:100px}:host .year-input-container{display:flex;width:100%}:host .year-input-container mat-form-field:not(:last-child){margin-right:4px}:host .year-input-hide{width:120px;margin-right:25px;display:none}:host .year-input-only-year{width:120px;margin-right:25px;text-align:left!important}:host ::ng-deep .datepicker-year ::ng-deep .mat-calendar-arrow{display:none}:host ::ng-deep .datepicker-year ::ng-deep .mat-calendar-period-button{pointer-events:none}:host ::ng-deep .datepicker-year ::ng-deep .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover{background-color:#0000001f;border-radius:999px}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i5$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: OgcFilterTimeSliderComponent, selector: "igo-ogc-filter-time-slider", inputs: ["currentFilter", "begin", "max", "datasource"], outputs: ["changeProperty"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i6$6.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i6$6.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i6$6.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i8$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6$4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$6.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: OgcFilterTimeComponent, decorators: [{
             type: Component,
@@ -24346,7 +24381,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                         NgFor,
                         MatOptionModule,
                         TranslateModule
-                    ], providers: [OGCFilterTimeService, provideMomentDateAdapter()], 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"] }]
+                    ], providers: [OGCFilterTimeService, provideMomentDateAdapter()], 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>{{ 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>{{ 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"] }]
         }], ctorParameters: () => [{ type: OGCFilterTimeService }], propDecorators: { datasource: [{
                 type: Input
             }], currentFilter: [{
@@ -24627,7 +24662,7 @@ class OgcFilterFormComponent {
             this.ogcFilterOperator.During.toLowerCase());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: OgcFilterFormComponent, deps: [{ token: WktService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: OgcFilterFormComponent, isStandalone: true, selector: "igo-ogc-filter-form", inputs: { refreshFilters: "refreshFilters", datasource: "datasource", map: "map", currentFilter: "currentFilter", floatLabel: "floatLabel" }, ngImport: i0, template: "<div class=\"ogc-filter-form-container\">\n  <mat-checkbox\n    tooltip-position=\"below\"\n    matTooltipShowDelay=\"500\"\n    [matTooltip]=\"'igo.geo.filter.toggleFilterState' | translate\"\n    (click)=\"$event.stopPropagation()\"\n    (change)=\"toggleFilterState($event)\"\n    [checked]=\"currentFilter.active\"\n  >\n  </mat-checkbox>\n\n  <mat-form-field\n    [ngClass]=\"{\n      logical:\n        activeFilters.indexOf(currentFilter) !== 0 &&\n        currentFilter.active === true,\n      logicalHidden:\n        activeFilters.indexOf(currentFilter) === 0 ||\n        currentFilter.active !== true\n    }\"\n  >\n    <mat-select\n      [disabled]=\"!currentFilter.active\"\n      [value]=\"currentFilter.parentLogical\"\n      tooltip-position=\"above\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"\n        currentFilter.parentLogical\n          ? ('igo.geo.operators.tooltip.' + currentFilter.parentLogical\n            | translate)\n          : ''\n      \"\n      (selectionChange)=\"changeLogical($event.value)\"\n    >\n      <mat-option\n        [value]=\"ogcFilterOperator.And\"\n        tooltip-position=\"above\"\n        matTooltipShowDelay=\"500\"\n        [matTooltip]=\"'igo.geo.operators.tooltip.And' | translate\"\n      >\n        {{ 'igo.geo.operators.And' | translate }}\n      </mat-option>\n      <mat-option\n        [value]=\"ogcFilterOperator.Or\"\n        tooltip-position=\"above\"\n        matTooltipShowDelay=\"500\"\n        [matTooltip]=\"'igo.geo.operators.tooltip.Or' | translate\"\n      >\n        {{ 'igo.geo.operators.Or' | translate }}\n      </mat-option>\n    </mat-select>\n  </mat-form-field>\n\n  <mat-form-field\n    class=\"field\"\n    *ngIf=\"\n      (currentFilterIsSpatial$ | async) === false &&\n      (fields$ | async) &&\n      (fields$ | async).length > 0 &&\n      (fields$ | async)[0].name !== ''\n    \"\n    (mouseenter)=\"inputClearable = 'selectField'\"\n    (mouseleave)=\"inputClearable = undefined\"\n    [floatLabel]=\"floatLabel\"\n  >\n    <input\n      matInput\n      [placeholder]=\"'igo.geo.sourceFields.selectField' | translate\"\n      [disabled]=\"!currentFilter.active\"\n      [matAutocomplete]=\"autoCompleteField\"\n      [value]=\"(selectedField$ | async) ? (selectedField$ | async).alias : ''\"\n      tooltip-position=\"above\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"\n        (selectedField$ | async)\n          ? (selectedField$ | async).alias\n          : ('igo.geo.sourceFields.selectField' | translate)\n      \"\n      (input)=\"updateFieldsList($any($event.target).value)\"\n    />\n    <mat-autocomplete\n      #autoCompleteField=\"matAutocomplete\"\n      (optionSelected)=\"changeField($event.option.id)\"\n    >\n      <mat-option\n        *ngFor=\"let field of filteredFields$ | async\"\n        matTooltipShowDelay=\"500\"\n        [value]=\"field.alias\"\n        [id]=\"field.name\"\n        [matTooltip]=\"field.alias\"\n      >\n        {{ field.alias }}\n      </mat-option>\n    </mat-autocomplete>\n    <button\n      *ngIf=\"\n        currentFilter.propertyName &&\n        inputClearable === 'selectField' &&\n        currentFilter.active\n      \"\n      matSuffix\n      mat-icon-button\n      aria-label=\"Clear\"\n      [disabled]=\"!currentFilter.active\"\n      (click)=\"clearSelectedField()\"\n    >\n      <mat-icon svgIcon=\"close\"></mat-icon>\n    </button>\n  </mat-form-field>\n\n  <mat-form-field\n    [ngClass]=\"{\n      operator: (currentFilterIsSpatial$ | async) === false,\n      dualInput: (currentFilterIsSpatial$ | async)\n    }\"\n    [floatLabel]=\"floatLabel\"\n  >\n    <mat-select\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"\n        currentFilter.operator\n          ? ('igo.geo.operators.tooltip.' + currentFilter.operator | translate)\n          : ('igo.geo.filter.selectOperator' | translate)\n      \"\n      [disabled]=\"!currentFilter.active\"\n      [value]=\"currentFilter.operator\"\n      (selectionChange)=\"changeOperator($event.value)\"\n    >\n      <mat-option\n        *ngFor=\"let operator of ogcFilterOperators$ | async | keyvalue\"\n        tooltip-position=\"above\"\n        matTooltipShowDelay=\"500\"\n        [value]=\"operator.key\"\n        [matTooltip]=\"'igo.geo.operators.tooltip.' + operator.key | translate\"\n      >\n        {{ 'igo.geo.operators.' + operator.key | translate }}\n      </mat-option>\n    </mat-select>\n  </mat-form-field>\n\n  <mat-form-field\n    class=\"spatialSelector\"\n    *ngIf=\"currentFilterIsSpatial$ | async\"\n  >\n    <mat-select\n      [disabled]=\"!currentFilter.active\"\n      [value]=\"currentFilter.igoSpatialSelector\"\n      (selectionChange)=\"changeSpatialSelector($event.value)\"\n    >\n      <mat-option\n        *ngFor=\"let igoSpatialSelector of igoSpatialSelectors\"\n        [value]=\"igoSpatialSelector.type\"\n      >\n        {{ 'igo.geo.spatialSelector.' + igoSpatialSelector.type | translate }}\n      </mat-option>\n    </mat-select>\n  </mat-form-field>\n\n  <mat-form-field\n    class=\"singleInput\"\n    *ngIf=\"['expression', 'pattern'].indexOf(detectProperty()) !== -1\"\n    (mouseenter)=\"inputClearable = 'selectProperty'\"\n    (mouseleave)=\"inputClearable = undefined\"\n    [floatLabel]=\"floatLabel\"\n  >\n    <input\n      matInput\n      [placeholder]=\"'igo.geo.filter.placeholder' | translate\"\n      [disabled]=\"!currentFilter.active\"\n      [matAutocomplete]=\"autoCompleteValues\"\n      [value]=\"\n        detectProperty() === 'expression'\n          ? currentFilter.expression\n          : currentFilter.pattern\n      \"\n      tooltip-position=\"above\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"\n        detectProperty() === 'expression'\n          ? currentFilter.expression || ''\n          : currentFilter.pattern || ''\n      \"\n      (input)=\"updateValuesList($any($event.target).value)\"\n    />\n    <mat-autocomplete\n      #autoCompleteValues=\"matAutocomplete\"\n      (optionSelected)=\"changeProperty($event.option.value)\"\n    >\n      <mat-option\n        *ngFor=\"let value of filteredValues$ | async\"\n        matTooltipShowDelay=\"500\"\n        [value]=\"value\"\n        [matTooltip]=\"value\"\n      >\n        {{ value }}\n      </mat-option>\n    </mat-autocomplete>\n    <button\n      *ngIf=\"\n        isClearable() &&\n        inputClearable === 'selectProperty' &&\n        currentFilter.active\n      \"\n      matSuffix\n      mat-icon-button\n      aria-label=\"Clear\"\n      [disabled]=\"!currentFilter.active\"\n      (click)=\"clearProperty()\"\n    >\n      <mat-icon svgIcon=\"close\"></mat-icon>\n    </button>\n  </mat-form-field>\n\n  <div class=\"igo-layer-button-group\">\n    <button\n      mat-icon-button\n      collapsibleButton\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"'igo.geo.filter.removeFilter' | translate\"\n      color=\"warn\"\n      (click)=\"deleteFilter()\"\n    >\n      <mat-icon svgIcon=\"delete\"></mat-icon>\n    </button>\n  </div>\n\n  <mat-form-field\n    class=\"snrc\"\n    *ngIf=\"\n      (currentFilterIsSpatial$ | async) &&\n      currentFilter.igoSpatialSelector === 'snrc'\n    \"\n    (mouseenter)=\"inputClearable = 'selectSNRC'\"\n    (mouseleave)=\"inputClearable = undefined\"\n    [floatLabel]=\"floatLabel\"\n  >\n    <input\n      matInput\n      [placeholder]=\"'igo.geo.filter.placeholderSnrc' | translate\"\n      [value]=\"currentFilter.igoSNRC\"\n      tooltip-position=\"above\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"currentFilter.igoSNRC ? currentFilter.igoSNRC : ''\"\n      (input)=\"changeSNRC($any($event.target).value)\"\n    />\n    <button\n      *ngIf=\"currentFilter.igoSNRC\"\n      matSuffix\n      mat-icon-button\n      aria-label=\"Clear\"\n      [disabled]=\"\n        !currentFilter.active &&\n        inputClearable === 'selectSNRC' &&\n        currentFilter.active\n      \"\n      (click)=\"currentFilter.igoSNRC = ''\"\n    >\n      <mat-icon svgIcon=\"close\"></mat-icon>\n    </button>\n  </mat-form-field>\n\n  <ng-container\n    *ngIf=\"\n      (currentFilterIsSpatial$ | async) &&\n      currentFilter.igoSpatialSelector === 'fixedExtent'\n    \"\n  >\n    <button\n      [disabled]=\"!currentFilter.active\"\n      *ngIf=\"currentFilter.igoSpatialSelector === 'fixedExtent'\"\n      matSuffix\n      mat-icon-button\n      [disabled]=\"!currentFilter.active\"\n      (click)=\"changeMapExtentGeometry()\"\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"'igo.geo.spatialSelector.btnSetExtent' | translate\"\n    >\n      <mat-icon svgIcon=\"arrow-expand-all\"></mat-icon>\n    </button>\n  </ng-container>\n</div>\n\n<div class=\"ogc-filter-form-container\">\n  <mat-form-field\n    class=\"dualInput\"\n    *ngIf=\"\n      !isTemporalOperator() &&\n      ['lowerBoundary', 'begin'].indexOf(detectProperty(1)) !== -1\n    \"\n    (mouseenter)=\"inputClearable = 'selectProperty1'\"\n    (mouseleave)=\"inputClearable = undefined\"\n    [floatLabel]=\"floatLabel\"\n  >\n    <input\n      matInput\n      [placeholder]=\"'igo.geo.filter.placeholder' | translate\"\n      [disabled]=\"!currentFilter.active\"\n      [matAutocomplete]=\"autoDualValueOperator1\"\n      type=\"number\"\n      [value]=\"\n        detectProperty(1) === 'lowerBoundary'\n          ? currentFilter.lowerBoundary\n          : currentFilter.begin\n      \"\n      (input)=\"updateValuesList($any($event.target).value, 1)\"\n    />\n    <mat-autocomplete\n      #autoDualValueOperator1=\"matAutocomplete\"\n      (optionSelected)=\"changeNumericProperty($event.option.value, 1)\"\n    >\n      <mat-option\n        *ngFor=\"let value of filteredValues$ | async\"\n        matTooltipShowDelay=\"500\"\n        [value]=\"value\"\n        [matTooltip]=\"value\"\n      >\n        {{ value }}\n      </mat-option>\n    </mat-autocomplete>\n    <button\n      *ngIf=\"\n        isClearable(1) &&\n        inputClearable === 'selectProperty1' &&\n        currentFilter.active\n      \"\n      matSuffix\n      mat-icon-button\n      aria-label=\"Clear\"\n      [disabled]=\"!currentFilter.active\"\n      (click)=\"clearProperty(1)\"\n    >\n      <mat-icon svgIcon=\"close\"></mat-icon>\n    </button>\n  </mat-form-field>\n\n  <mat-form-field\n    class=\"dualInput\"\n    *ngIf=\"\n      !isTemporalOperator() &&\n      ['upperBoundary', 'end'].indexOf(detectProperty(2)) !== -1\n    \"\n    (mouseenter)=\"inputClearable = 'selectProperty2'\"\n    (mouseleave)=\"inputClearable = undefined\"\n    [floatLabel]=\"floatLabel\"\n  >\n    <input\n      matInput\n      [placeholder]=\"'igo.geo.filter.placeholder' | translate\"\n      [disabled]=\"!currentFilter.active\"\n      [matAutocomplete]=\"autoDualValueOperator2\"\n      type=\"number\"\n      [value]=\"\n        detectProperty(2) === 'upperBoundary'\n          ? currentFilter.upperBoundary\n          : currentFilter.end\n      \"\n      (input)=\"updateValuesList($any($event.target).value, 2)\"\n    />\n    <mat-autocomplete\n      #autoDualValueOperator2=\"matAutocomplete\"\n      (optionSelected)=\"changeNumericProperty($event.option.value, 2)\"\n    >\n      <mat-option\n        *ngFor=\"let value of filteredValues$ | async\"\n        matTooltipShowDelay=\"500\"\n        [value]=\"value\"\n        [matTooltip]=\"value\"\n      >\n        {{ value }}\n      </mat-option>\n    </mat-autocomplete>\n    <button\n      *ngIf=\"\n        isClearable(2) &&\n        inputClearable === 'selectProperty2' &&\n        currentFilter.active\n      \"\n      matSuffix\n      mat-icon-button\n      aria-label=\"Clear\"\n      [disabled]=\"!currentFilter.active\"\n      (click)=\"clearProperty(2)\"\n    >\n      <mat-icon svgIcon=\"close\"></mat-icon>\n    </button>\n  </mat-form-field>\n</div>\n\n<igo-ogc-filter-time\n  *ngIf=\"isTemporalOperator()\"\n  [datasource]=\"datasource\"\n  [currentFilter]=\"currentFilter\"\n  (changeProperty)=\"changeProperty($event.value, $event.pos)\"\n>\n</igo-ogc-filter-time>\n", styles: [":host{width:100%;padding:5px 10px}:host ::ng-deep .mat-mdc-form-field .mat-icon svg{width:1em;height:1em;color:#d3d3d3}:host .ogc-filter-form-container{display:flex}:host .mat-mdc-form-field{width:100%}:host .mat-mdc-select-arrow{visibility:hidden}:host .mat-mdc-slide-toggle{margin-top:10px}:host .logical{flex-flow:column nowrap;width:100%;max-width:60px;margin-right:5px}:host .logicalHidden{width:0px;visibility:hidden;max-width:0px}:host ::ng-deep .logical .mat-mdc-select-arrow{visibility:hidden}:host ::ng-deep .logicalHidden .mat-mdc-select-arrow{visibility:hidden}:host .field{width:150px;margin-right:5px}:host ::ng-deep .field .mat-mdc-select-arrow{visibility:hidden}:host .operator{width:150px;margin-right:5px;text-align:center}:host ::ng-deep .operator .mat-mdc-select-arrow{visibility:hidden}:host .spatialSelector{width:110px;margin-right:5px}:host ::ng-deep .spatialSelector .mat-mdc-select-arrow{visibility:hidden}:host .singleInput{width:150px;margin-right:5px}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){:host .singleInput{width:27%}}:host .snrc{width:110px;margin-right:5px}:host ::ng-deep .singleInput .mat-mdc-select-arrow{visibility:hidden}:host .dualInput{width:150px;margin-right:5px}:host ::ng-deep .dualInput .mat-mdc-select-arrow{visibility:hidden}:host .igo-layer-button-group{display:flex;padding-top:5px}:host .container{display:flex}\n"], dependencies: [{ kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i8.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i8$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6$4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i6$5.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i6$5.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: OgcFilterTimeComponent, selector: "igo-ogc-filter-time", inputs: ["datasource", "currentFilter"], outputs: ["changeProperty"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: OgcFilterFormComponent, isStandalone: true, selector: "igo-ogc-filter-form", inputs: { refreshFilters: "refreshFilters", datasource: "datasource", map: "map", currentFilter: "currentFilter", floatLabel: "floatLabel" }, ngImport: i0, template: "<div class=\"ogc-filter-form-container\">\n  <mat-checkbox\n    tooltip-position=\"below\"\n    matTooltipShowDelay=\"500\"\n    [matTooltip]=\"'igo.geo.filter.toggleFilterState' | translate\"\n    (click)=\"$event.stopPropagation()\"\n    (change)=\"toggleFilterState($event)\"\n    [checked]=\"currentFilter.active\"\n  >\n  </mat-checkbox>\n\n  <mat-form-field\n    [ngClass]=\"{\n      logical:\n        activeFilters.indexOf(currentFilter) !== 0 &&\n        currentFilter.active === true,\n      logicalHidden:\n        activeFilters.indexOf(currentFilter) === 0 ||\n        currentFilter.active !== true\n    }\"\n  >\n    <mat-select\n      [disabled]=\"!currentFilter.active\"\n      [value]=\"currentFilter.parentLogical\"\n      tooltip-position=\"above\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"\n        currentFilter.parentLogical\n          ? ('igo.geo.operators.tooltip.' + currentFilter.parentLogical\n            | translate)\n          : ''\n      \"\n      (selectionChange)=\"changeLogical($event.value)\"\n    >\n      <mat-option\n        [value]=\"ogcFilterOperator.And\"\n        tooltip-position=\"above\"\n        matTooltipShowDelay=\"500\"\n        [matTooltip]=\"'igo.geo.operators.tooltip.And' | translate\"\n      >\n        {{ 'igo.geo.operators.And' | translate }}\n      </mat-option>\n      <mat-option\n        [value]=\"ogcFilterOperator.Or\"\n        tooltip-position=\"above\"\n        matTooltipShowDelay=\"500\"\n        [matTooltip]=\"'igo.geo.operators.tooltip.Or' | translate\"\n      >\n        {{ 'igo.geo.operators.Or' | translate }}\n      </mat-option>\n    </mat-select>\n  </mat-form-field>\n\n  <mat-form-field\n    class=\"field\"\n    *ngIf=\"\n      (currentFilterIsSpatial$ | async) === false &&\n      (fields$ | async) &&\n      (fields$ | async).length > 0 &&\n      (fields$ | async)[0].name !== ''\n    \"\n    (mouseenter)=\"inputClearable = 'selectField'\"\n    (mouseleave)=\"inputClearable = undefined\"\n    [floatLabel]=\"floatLabel\"\n  >\n    <input\n      matInput\n      [placeholder]=\"'igo.geo.sourceFields.selectField' | translate\"\n      [disabled]=\"!currentFilter.active\"\n      [matAutocomplete]=\"autoCompleteField\"\n      [value]=\"(selectedField$ | async) ? (selectedField$ | async).alias : ''\"\n      tooltip-position=\"above\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"\n        (selectedField$ | async)\n          ? (selectedField$ | async).alias\n          : ('igo.geo.sourceFields.selectField' | translate)\n      \"\n      (input)=\"updateFieldsList($any($event.target).value)\"\n    />\n    <mat-autocomplete\n      #autoCompleteField=\"matAutocomplete\"\n      (optionSelected)=\"changeField($event.option.id)\"\n    >\n      <mat-option\n        *ngFor=\"let field of filteredFields$ | async\"\n        matTooltipShowDelay=\"500\"\n        [value]=\"field.alias\"\n        [id]=\"field.name\"\n        [matTooltip]=\"field.alias\"\n      >\n        {{ field.alias }}\n      </mat-option>\n    </mat-autocomplete>\n    <button\n      *ngIf=\"\n        currentFilter.propertyName &&\n        inputClearable === 'selectField' &&\n        currentFilter.active\n      \"\n      matSuffix\n      mat-icon-button\n      aria-label=\"Clear\"\n      [disabled]=\"!currentFilter.active\"\n      (click)=\"clearSelectedField()\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <mat-form-field\n    [ngClass]=\"{\n      operator: (currentFilterIsSpatial$ | async) === false,\n      dualInput: (currentFilterIsSpatial$ | async)\n    }\"\n    [floatLabel]=\"floatLabel\"\n  >\n    <mat-select\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"\n        currentFilter.operator\n          ? ('igo.geo.operators.tooltip.' + currentFilter.operator | translate)\n          : ('igo.geo.filter.selectOperator' | translate)\n      \"\n      [disabled]=\"!currentFilter.active\"\n      [value]=\"currentFilter.operator\"\n      (selectionChange)=\"changeOperator($event.value)\"\n    >\n      <mat-option\n        *ngFor=\"let operator of ogcFilterOperators$ | async | keyvalue\"\n        tooltip-position=\"above\"\n        matTooltipShowDelay=\"500\"\n        [value]=\"operator.key\"\n        [matTooltip]=\"'igo.geo.operators.tooltip.' + operator.key | translate\"\n      >\n        {{ 'igo.geo.operators.' + operator.key | translate }}\n      </mat-option>\n    </mat-select>\n  </mat-form-field>\n\n  <mat-form-field\n    class=\"spatialSelector\"\n    *ngIf=\"currentFilterIsSpatial$ | async\"\n  >\n    <mat-select\n      [disabled]=\"!currentFilter.active\"\n      [value]=\"currentFilter.igoSpatialSelector\"\n      (selectionChange)=\"changeSpatialSelector($event.value)\"\n    >\n      <mat-option\n        *ngFor=\"let igoSpatialSelector of igoSpatialSelectors\"\n        [value]=\"igoSpatialSelector.type\"\n      >\n        {{ 'igo.geo.spatialSelector.' + igoSpatialSelector.type | translate }}\n      </mat-option>\n    </mat-select>\n  </mat-form-field>\n\n  <mat-form-field\n    class=\"singleInput\"\n    *ngIf=\"['expression', 'pattern'].indexOf(detectProperty()) !== -1\"\n    (mouseenter)=\"inputClearable = 'selectProperty'\"\n    (mouseleave)=\"inputClearable = undefined\"\n    [floatLabel]=\"floatLabel\"\n  >\n    <input\n      matInput\n      [placeholder]=\"'igo.geo.filter.placeholder' | translate\"\n      [disabled]=\"!currentFilter.active\"\n      [matAutocomplete]=\"autoCompleteValues\"\n      [value]=\"\n        detectProperty() === 'expression'\n          ? currentFilter.expression\n          : currentFilter.pattern\n      \"\n      tooltip-position=\"above\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"\n        detectProperty() === 'expression'\n          ? currentFilter.expression || ''\n          : currentFilter.pattern || ''\n      \"\n      (input)=\"updateValuesList($any($event.target).value)\"\n    />\n    <mat-autocomplete\n      #autoCompleteValues=\"matAutocomplete\"\n      (optionSelected)=\"changeProperty($event.option.value)\"\n    >\n      <mat-option\n        *ngFor=\"let value of filteredValues$ | async\"\n        matTooltipShowDelay=\"500\"\n        [value]=\"value\"\n        [matTooltip]=\"value\"\n      >\n        {{ value }}\n      </mat-option>\n    </mat-autocomplete>\n    <button\n      *ngIf=\"\n        isClearable() &&\n        inputClearable === 'selectProperty' &&\n        currentFilter.active\n      \"\n      matSuffix\n      mat-icon-button\n      aria-label=\"Clear\"\n      [disabled]=\"!currentFilter.active\"\n      (click)=\"clearProperty()\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <div class=\"igo-layer-button-group\">\n    <button\n      mat-icon-button\n      collapsibleButton\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"'igo.geo.filter.removeFilter' | translate\"\n      color=\"warn\"\n      (click)=\"deleteFilter()\"\n    >\n      <mat-icon>delete</mat-icon>\n    </button>\n  </div>\n\n  <mat-form-field\n    class=\"snrc\"\n    *ngIf=\"\n      (currentFilterIsSpatial$ | async) &&\n      currentFilter.igoSpatialSelector === 'snrc'\n    \"\n    (mouseenter)=\"inputClearable = 'selectSNRC'\"\n    (mouseleave)=\"inputClearable = undefined\"\n    [floatLabel]=\"floatLabel\"\n  >\n    <input\n      matInput\n      [placeholder]=\"'igo.geo.filter.placeholderSnrc' | translate\"\n      [value]=\"currentFilter.igoSNRC\"\n      tooltip-position=\"above\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"currentFilter.igoSNRC ? currentFilter.igoSNRC : ''\"\n      (input)=\"changeSNRC($any($event.target).value)\"\n    />\n    <button\n      *ngIf=\"currentFilter.igoSNRC\"\n      matSuffix\n      mat-icon-button\n      aria-label=\"Clear\"\n      [disabled]=\"\n        !currentFilter.active &&\n        inputClearable === 'selectSNRC' &&\n        currentFilter.active\n      \"\n      (click)=\"currentFilter.igoSNRC = ''\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <ng-container\n    *ngIf=\"\n      (currentFilterIsSpatial$ | async) &&\n      currentFilter.igoSpatialSelector === 'fixedExtent'\n    \"\n  >\n    <button\n      [disabled]=\"!currentFilter.active\"\n      *ngIf=\"currentFilter.igoSpatialSelector === 'fixedExtent'\"\n      matSuffix\n      mat-icon-button\n      [disabled]=\"!currentFilter.active\"\n      (click)=\"changeMapExtentGeometry()\"\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"'igo.geo.spatialSelector.btnSetExtent' | translate\"\n    >\n      <mat-icon>zoom_out_map</mat-icon>\n    </button>\n  </ng-container>\n</div>\n\n<div class=\"ogc-filter-form-container\">\n  <mat-form-field\n    class=\"dualInput\"\n    *ngIf=\"\n      !isTemporalOperator() &&\n      ['lowerBoundary', 'begin'].indexOf(detectProperty(1)) !== -1\n    \"\n    (mouseenter)=\"inputClearable = 'selectProperty1'\"\n    (mouseleave)=\"inputClearable = undefined\"\n    [floatLabel]=\"floatLabel\"\n  >\n    <input\n      matInput\n      [placeholder]=\"'igo.geo.filter.placeholder' | translate\"\n      [disabled]=\"!currentFilter.active\"\n      [matAutocomplete]=\"autoDualValueOperator1\"\n      type=\"number\"\n      [value]=\"\n        detectProperty(1) === 'lowerBoundary'\n          ? currentFilter.lowerBoundary\n          : currentFilter.begin\n      \"\n      (input)=\"updateValuesList($any($event.target).value, 1)\"\n    />\n    <mat-autocomplete\n      #autoDualValueOperator1=\"matAutocomplete\"\n      (optionSelected)=\"changeNumericProperty($event.option.value, 1)\"\n    >\n      <mat-option\n        *ngFor=\"let value of filteredValues$ | async\"\n        matTooltipShowDelay=\"500\"\n        [value]=\"value\"\n        [matTooltip]=\"value\"\n      >\n        {{ value }}\n      </mat-option>\n    </mat-autocomplete>\n    <button\n      *ngIf=\"\n        isClearable(1) &&\n        inputClearable === 'selectProperty1' &&\n        currentFilter.active\n      \"\n      matSuffix\n      mat-icon-button\n      aria-label=\"Clear\"\n      [disabled]=\"!currentFilter.active\"\n      (click)=\"clearProperty(1)\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <mat-form-field\n    class=\"dualInput\"\n    *ngIf=\"\n      !isTemporalOperator() &&\n      ['upperBoundary', 'end'].indexOf(detectProperty(2)) !== -1\n    \"\n    (mouseenter)=\"inputClearable = 'selectProperty2'\"\n    (mouseleave)=\"inputClearable = undefined\"\n    [floatLabel]=\"floatLabel\"\n  >\n    <input\n      matInput\n      [placeholder]=\"'igo.geo.filter.placeholder' | translate\"\n      [disabled]=\"!currentFilter.active\"\n      [matAutocomplete]=\"autoDualValueOperator2\"\n      type=\"number\"\n      [value]=\"\n        detectProperty(2) === 'upperBoundary'\n          ? currentFilter.upperBoundary\n          : currentFilter.end\n      \"\n      (input)=\"updateValuesList($any($event.target).value, 2)\"\n    />\n    <mat-autocomplete\n      #autoDualValueOperator2=\"matAutocomplete\"\n      (optionSelected)=\"changeNumericProperty($event.option.value, 2)\"\n    >\n      <mat-option\n        *ngFor=\"let value of filteredValues$ | async\"\n        matTooltipShowDelay=\"500\"\n        [value]=\"value\"\n        [matTooltip]=\"value\"\n      >\n        {{ value }}\n      </mat-option>\n    </mat-autocomplete>\n    <button\n      *ngIf=\"\n        isClearable(2) &&\n        inputClearable === 'selectProperty2' &&\n        currentFilter.active\n      \"\n      matSuffix\n      mat-icon-button\n      aria-label=\"Clear\"\n      [disabled]=\"!currentFilter.active\"\n      (click)=\"clearProperty(2)\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n</div>\n\n<igo-ogc-filter-time\n  *ngIf=\"isTemporalOperator()\"\n  [datasource]=\"datasource\"\n  [currentFilter]=\"currentFilter\"\n  (changeProperty)=\"changeProperty($event.value, $event.pos)\"\n>\n</igo-ogc-filter-time>\n", styles: [":host{width:100%;padding:5px 10px}:host ::ng-deep .mat-mdc-form-field .mat-icon svg{width:1em;height:1em;color:#d3d3d3}:host .ogc-filter-form-container{display:flex}:host .mat-mdc-form-field{width:100%}:host .mat-mdc-select-arrow{visibility:hidden}:host .mat-mdc-slide-toggle{margin-top:10px}:host .logical{flex-flow:column nowrap;width:100%;max-width:60px;margin-right:5px}:host .logicalHidden{width:0px;visibility:hidden;max-width:0px}:host ::ng-deep .logical .mat-mdc-select-arrow{visibility:hidden}:host ::ng-deep .logicalHidden .mat-mdc-select-arrow{visibility:hidden}:host .field{width:150px;margin-right:5px}:host ::ng-deep .field .mat-mdc-select-arrow{visibility:hidden}:host .operator{width:150px;margin-right:5px;text-align:center}:host ::ng-deep .operator .mat-mdc-select-arrow{visibility:hidden}:host .spatialSelector{width:110px;margin-right:5px}:host ::ng-deep .spatialSelector .mat-mdc-select-arrow{visibility:hidden}:host .singleInput{width:150px;margin-right:5px}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){:host .singleInput{width:27%}}:host .snrc{width:110px;margin-right:5px}:host ::ng-deep .singleInput .mat-mdc-select-arrow{visibility:hidden}:host .dualInput{width:150px;margin-right:5px}:host ::ng-deep .dualInput .mat-mdc-select-arrow{visibility:hidden}:host .igo-layer-button-group{display:flex;padding-top:5px}:host .container{display:flex}\n"], dependencies: [{ kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i8.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i8$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6$4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i6$5.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i6$5.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: OgcFilterTimeComponent, selector: "igo-ogc-filter-time", inputs: ["datasource", "currentFilter"], outputs: ["changeProperty"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: OgcFilterFormComponent, decorators: [{
             type: Component,
@@ -24648,7 +24683,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                         AsyncPipe,
                         KeyValuePipe,
                         TranslateModule
-                    ], template: "<div class=\"ogc-filter-form-container\">\n  <mat-checkbox\n    tooltip-position=\"below\"\n    matTooltipShowDelay=\"500\"\n    [matTooltip]=\"'igo.geo.filter.toggleFilterState' | translate\"\n    (click)=\"$event.stopPropagation()\"\n    (change)=\"toggleFilterState($event)\"\n    [checked]=\"currentFilter.active\"\n  >\n  </mat-checkbox>\n\n  <mat-form-field\n    [ngClass]=\"{\n      logical:\n        activeFilters.indexOf(currentFilter) !== 0 &&\n        currentFilter.active === true,\n      logicalHidden:\n        activeFilters.indexOf(currentFilter) === 0 ||\n        currentFilter.active !== true\n    }\"\n  >\n    <mat-select\n      [disabled]=\"!currentFilter.active\"\n      [value]=\"currentFilter.parentLogical\"\n      tooltip-position=\"above\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"\n        currentFilter.parentLogical\n          ? ('igo.geo.operators.tooltip.' + currentFilter.parentLogical\n            | translate)\n          : ''\n      \"\n      (selectionChange)=\"changeLogical($event.value)\"\n    >\n      <mat-option\n        [value]=\"ogcFilterOperator.And\"\n        tooltip-position=\"above\"\n        matTooltipShowDelay=\"500\"\n        [matTooltip]=\"'igo.geo.operators.tooltip.And' | translate\"\n      >\n        {{ 'igo.geo.operators.And' | translate }}\n      </mat-option>\n      <mat-option\n        [value]=\"ogcFilterOperator.Or\"\n        tooltip-position=\"above\"\n        matTooltipShowDelay=\"500\"\n        [matTooltip]=\"'igo.geo.operators.tooltip.Or' | translate\"\n      >\n        {{ 'igo.geo.operators.Or' | translate }}\n      </mat-option>\n    </mat-select>\n  </mat-form-field>\n\n  <mat-form-field\n    class=\"field\"\n    *ngIf=\"\n      (currentFilterIsSpatial$ | async) === false &&\n      (fields$ | async) &&\n      (fields$ | async).length > 0 &&\n      (fields$ | async)[0].name !== ''\n    \"\n    (mouseenter)=\"inputClearable = 'selectField'\"\n    (mouseleave)=\"inputClearable = undefined\"\n    [floatLabel]=\"floatLabel\"\n  >\n    <input\n      matInput\n      [placeholder]=\"'igo.geo.sourceFields.selectField' | translate\"\n      [disabled]=\"!currentFilter.active\"\n      [matAutocomplete]=\"autoCompleteField\"\n      [value]=\"(selectedField$ | async) ? (selectedField$ | async).alias : ''\"\n      tooltip-position=\"above\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"\n        (selectedField$ | async)\n          ? (selectedField$ | async).alias\n          : ('igo.geo.sourceFields.selectField' | translate)\n      \"\n      (input)=\"updateFieldsList($any($event.target).value)\"\n    />\n    <mat-autocomplete\n      #autoCompleteField=\"matAutocomplete\"\n      (optionSelected)=\"changeField($event.option.id)\"\n    >\n      <mat-option\n        *ngFor=\"let field of filteredFields$ | async\"\n        matTooltipShowDelay=\"500\"\n        [value]=\"field.alias\"\n        [id]=\"field.name\"\n        [matTooltip]=\"field.alias\"\n      >\n        {{ field.alias }}\n      </mat-option>\n    </mat-autocomplete>\n    <button\n      *ngIf=\"\n        currentFilter.propertyName &&\n        inputClearable === 'selectField' &&\n        currentFilter.active\n      \"\n      matSuffix\n      mat-icon-button\n      aria-label=\"Clear\"\n      [disabled]=\"!currentFilter.active\"\n      (click)=\"clearSelectedField()\"\n    >\n      <mat-icon svgIcon=\"close\"></mat-icon>\n    </button>\n  </mat-form-field>\n\n  <mat-form-field\n    [ngClass]=\"{\n      operator: (currentFilterIsSpatial$ | async) === false,\n      dualInput: (currentFilterIsSpatial$ | async)\n    }\"\n    [floatLabel]=\"floatLabel\"\n  >\n    <mat-select\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"\n        currentFilter.operator\n          ? ('igo.geo.operators.tooltip.' + currentFilter.operator | translate)\n          : ('igo.geo.filter.selectOperator' | translate)\n      \"\n      [disabled]=\"!currentFilter.active\"\n      [value]=\"currentFilter.operator\"\n      (selectionChange)=\"changeOperator($event.value)\"\n    >\n      <mat-option\n        *ngFor=\"let operator of ogcFilterOperators$ | async | keyvalue\"\n        tooltip-position=\"above\"\n        matTooltipShowDelay=\"500\"\n        [value]=\"operator.key\"\n        [matTooltip]=\"'igo.geo.operators.tooltip.' + operator.key | translate\"\n      >\n        {{ 'igo.geo.operators.' + operator.key | translate }}\n      </mat-option>\n    </mat-select>\n  </mat-form-field>\n\n  <mat-form-field\n    class=\"spatialSelector\"\n    *ngIf=\"currentFilterIsSpatial$ | async\"\n  >\n    <mat-select\n      [disabled]=\"!currentFilter.active\"\n      [value]=\"currentFilter.igoSpatialSelector\"\n      (selectionChange)=\"changeSpatialSelector($event.value)\"\n    >\n      <mat-option\n        *ngFor=\"let igoSpatialSelector of igoSpatialSelectors\"\n        [value]=\"igoSpatialSelector.type\"\n      >\n        {{ 'igo.geo.spatialSelector.' + igoSpatialSelector.type | translate }}\n      </mat-option>\n    </mat-select>\n  </mat-form-field>\n\n  <mat-form-field\n    class=\"singleInput\"\n    *ngIf=\"['expression', 'pattern'].indexOf(detectProperty()) !== -1\"\n    (mouseenter)=\"inputClearable = 'selectProperty'\"\n    (mouseleave)=\"inputClearable = undefined\"\n    [floatLabel]=\"floatLabel\"\n  >\n    <input\n      matInput\n      [placeholder]=\"'igo.geo.filter.placeholder' | translate\"\n      [disabled]=\"!currentFilter.active\"\n      [matAutocomplete]=\"autoCompleteValues\"\n      [value]=\"\n        detectProperty() === 'expression'\n          ? currentFilter.expression\n          : currentFilter.pattern\n      \"\n      tooltip-position=\"above\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"\n        detectProperty() === 'expression'\n          ? currentFilter.expression || ''\n          : currentFilter.pattern || ''\n      \"\n      (input)=\"updateValuesList($any($event.target).value)\"\n    />\n    <mat-autocomplete\n      #autoCompleteValues=\"matAutocomplete\"\n      (optionSelected)=\"changeProperty($event.option.value)\"\n    >\n      <mat-option\n        *ngFor=\"let value of filteredValues$ | async\"\n        matTooltipShowDelay=\"500\"\n        [value]=\"value\"\n        [matTooltip]=\"value\"\n      >\n        {{ value }}\n      </mat-option>\n    </mat-autocomplete>\n    <button\n      *ngIf=\"\n        isClearable() &&\n        inputClearable === 'selectProperty' &&\n        currentFilter.active\n      \"\n      matSuffix\n      mat-icon-button\n      aria-label=\"Clear\"\n      [disabled]=\"!currentFilter.active\"\n      (click)=\"clearProperty()\"\n    >\n      <mat-icon svgIcon=\"close\"></mat-icon>\n    </button>\n  </mat-form-field>\n\n  <div class=\"igo-layer-button-group\">\n    <button\n      mat-icon-button\n      collapsibleButton\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"'igo.geo.filter.removeFilter' | translate\"\n      color=\"warn\"\n      (click)=\"deleteFilter()\"\n    >\n      <mat-icon svgIcon=\"delete\"></mat-icon>\n    </button>\n  </div>\n\n  <mat-form-field\n    class=\"snrc\"\n    *ngIf=\"\n      (currentFilterIsSpatial$ | async) &&\n      currentFilter.igoSpatialSelector === 'snrc'\n    \"\n    (mouseenter)=\"inputClearable = 'selectSNRC'\"\n    (mouseleave)=\"inputClearable = undefined\"\n    [floatLabel]=\"floatLabel\"\n  >\n    <input\n      matInput\n      [placeholder]=\"'igo.geo.filter.placeholderSnrc' | translate\"\n      [value]=\"currentFilter.igoSNRC\"\n      tooltip-position=\"above\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"currentFilter.igoSNRC ? currentFilter.igoSNRC : ''\"\n      (input)=\"changeSNRC($any($event.target).value)\"\n    />\n    <button\n      *ngIf=\"currentFilter.igoSNRC\"\n      matSuffix\n      mat-icon-button\n      aria-label=\"Clear\"\n      [disabled]=\"\n        !currentFilter.active &&\n        inputClearable === 'selectSNRC' &&\n        currentFilter.active\n      \"\n      (click)=\"currentFilter.igoSNRC = ''\"\n    >\n      <mat-icon svgIcon=\"close\"></mat-icon>\n    </button>\n  </mat-form-field>\n\n  <ng-container\n    *ngIf=\"\n      (currentFilterIsSpatial$ | async) &&\n      currentFilter.igoSpatialSelector === 'fixedExtent'\n    \"\n  >\n    <button\n      [disabled]=\"!currentFilter.active\"\n      *ngIf=\"currentFilter.igoSpatialSelector === 'fixedExtent'\"\n      matSuffix\n      mat-icon-button\n      [disabled]=\"!currentFilter.active\"\n      (click)=\"changeMapExtentGeometry()\"\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"'igo.geo.spatialSelector.btnSetExtent' | translate\"\n    >\n      <mat-icon svgIcon=\"arrow-expand-all\"></mat-icon>\n    </button>\n  </ng-container>\n</div>\n\n<div class=\"ogc-filter-form-container\">\n  <mat-form-field\n    class=\"dualInput\"\n    *ngIf=\"\n      !isTemporalOperator() &&\n      ['lowerBoundary', 'begin'].indexOf(detectProperty(1)) !== -1\n    \"\n    (mouseenter)=\"inputClearable = 'selectProperty1'\"\n    (mouseleave)=\"inputClearable = undefined\"\n    [floatLabel]=\"floatLabel\"\n  >\n    <input\n      matInput\n      [placeholder]=\"'igo.geo.filter.placeholder' | translate\"\n      [disabled]=\"!currentFilter.active\"\n      [matAutocomplete]=\"autoDualValueOperator1\"\n      type=\"number\"\n      [value]=\"\n        detectProperty(1) === 'lowerBoundary'\n          ? currentFilter.lowerBoundary\n          : currentFilter.begin\n      \"\n      (input)=\"updateValuesList($any($event.target).value, 1)\"\n    />\n    <mat-autocomplete\n      #autoDualValueOperator1=\"matAutocomplete\"\n      (optionSelected)=\"changeNumericProperty($event.option.value, 1)\"\n    >\n      <mat-option\n        *ngFor=\"let value of filteredValues$ | async\"\n        matTooltipShowDelay=\"500\"\n        [value]=\"value\"\n        [matTooltip]=\"value\"\n      >\n        {{ value }}\n      </mat-option>\n    </mat-autocomplete>\n    <button\n      *ngIf=\"\n        isClearable(1) &&\n        inputClearable === 'selectProperty1' &&\n        currentFilter.active\n      \"\n      matSuffix\n      mat-icon-button\n      aria-label=\"Clear\"\n      [disabled]=\"!currentFilter.active\"\n      (click)=\"clearProperty(1)\"\n    >\n      <mat-icon svgIcon=\"close\"></mat-icon>\n    </button>\n  </mat-form-field>\n\n  <mat-form-field\n    class=\"dualInput\"\n    *ngIf=\"\n      !isTemporalOperator() &&\n      ['upperBoundary', 'end'].indexOf(detectProperty(2)) !== -1\n    \"\n    (mouseenter)=\"inputClearable = 'selectProperty2'\"\n    (mouseleave)=\"inputClearable = undefined\"\n    [floatLabel]=\"floatLabel\"\n  >\n    <input\n      matInput\n      [placeholder]=\"'igo.geo.filter.placeholder' | translate\"\n      [disabled]=\"!currentFilter.active\"\n      [matAutocomplete]=\"autoDualValueOperator2\"\n      type=\"number\"\n      [value]=\"\n        detectProperty(2) === 'upperBoundary'\n          ? currentFilter.upperBoundary\n          : currentFilter.end\n      \"\n      (input)=\"updateValuesList($any($event.target).value, 2)\"\n    />\n    <mat-autocomplete\n      #autoDualValueOperator2=\"matAutocomplete\"\n      (optionSelected)=\"changeNumericProperty($event.option.value, 2)\"\n    >\n      <mat-option\n        *ngFor=\"let value of filteredValues$ | async\"\n        matTooltipShowDelay=\"500\"\n        [value]=\"value\"\n        [matTooltip]=\"value\"\n      >\n        {{ value }}\n      </mat-option>\n    </mat-autocomplete>\n    <button\n      *ngIf=\"\n        isClearable(2) &&\n        inputClearable === 'selectProperty2' &&\n        currentFilter.active\n      \"\n      matSuffix\n      mat-icon-button\n      aria-label=\"Clear\"\n      [disabled]=\"!currentFilter.active\"\n      (click)=\"clearProperty(2)\"\n    >\n      <mat-icon svgIcon=\"close\"></mat-icon>\n    </button>\n  </mat-form-field>\n</div>\n\n<igo-ogc-filter-time\n  *ngIf=\"isTemporalOperator()\"\n  [datasource]=\"datasource\"\n  [currentFilter]=\"currentFilter\"\n  (changeProperty)=\"changeProperty($event.value, $event.pos)\"\n>\n</igo-ogc-filter-time>\n", styles: [":host{width:100%;padding:5px 10px}:host ::ng-deep .mat-mdc-form-field .mat-icon svg{width:1em;height:1em;color:#d3d3d3}:host .ogc-filter-form-container{display:flex}:host .mat-mdc-form-field{width:100%}:host .mat-mdc-select-arrow{visibility:hidden}:host .mat-mdc-slide-toggle{margin-top:10px}:host .logical{flex-flow:column nowrap;width:100%;max-width:60px;margin-right:5px}:host .logicalHidden{width:0px;visibility:hidden;max-width:0px}:host ::ng-deep .logical .mat-mdc-select-arrow{visibility:hidden}:host ::ng-deep .logicalHidden .mat-mdc-select-arrow{visibility:hidden}:host .field{width:150px;margin-right:5px}:host ::ng-deep .field .mat-mdc-select-arrow{visibility:hidden}:host .operator{width:150px;margin-right:5px;text-align:center}:host ::ng-deep .operator .mat-mdc-select-arrow{visibility:hidden}:host .spatialSelector{width:110px;margin-right:5px}:host ::ng-deep .spatialSelector .mat-mdc-select-arrow{visibility:hidden}:host .singleInput{width:150px;margin-right:5px}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){:host .singleInput{width:27%}}:host .snrc{width:110px;margin-right:5px}:host ::ng-deep .singleInput .mat-mdc-select-arrow{visibility:hidden}:host .dualInput{width:150px;margin-right:5px}:host ::ng-deep .dualInput .mat-mdc-select-arrow{visibility:hidden}:host .igo-layer-button-group{display:flex;padding-top:5px}:host .container{display:flex}\n"] }]
+                    ], template: "<div class=\"ogc-filter-form-container\">\n  <mat-checkbox\n    tooltip-position=\"below\"\n    matTooltipShowDelay=\"500\"\n    [matTooltip]=\"'igo.geo.filter.toggleFilterState' | translate\"\n    (click)=\"$event.stopPropagation()\"\n    (change)=\"toggleFilterState($event)\"\n    [checked]=\"currentFilter.active\"\n  >\n  </mat-checkbox>\n\n  <mat-form-field\n    [ngClass]=\"{\n      logical:\n        activeFilters.indexOf(currentFilter) !== 0 &&\n        currentFilter.active === true,\n      logicalHidden:\n        activeFilters.indexOf(currentFilter) === 0 ||\n        currentFilter.active !== true\n    }\"\n  >\n    <mat-select\n      [disabled]=\"!currentFilter.active\"\n      [value]=\"currentFilter.parentLogical\"\n      tooltip-position=\"above\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"\n        currentFilter.parentLogical\n          ? ('igo.geo.operators.tooltip.' + currentFilter.parentLogical\n            | translate)\n          : ''\n      \"\n      (selectionChange)=\"changeLogical($event.value)\"\n    >\n      <mat-option\n        [value]=\"ogcFilterOperator.And\"\n        tooltip-position=\"above\"\n        matTooltipShowDelay=\"500\"\n        [matTooltip]=\"'igo.geo.operators.tooltip.And' | translate\"\n      >\n        {{ 'igo.geo.operators.And' | translate }}\n      </mat-option>\n      <mat-option\n        [value]=\"ogcFilterOperator.Or\"\n        tooltip-position=\"above\"\n        matTooltipShowDelay=\"500\"\n        [matTooltip]=\"'igo.geo.operators.tooltip.Or' | translate\"\n      >\n        {{ 'igo.geo.operators.Or' | translate }}\n      </mat-option>\n    </mat-select>\n  </mat-form-field>\n\n  <mat-form-field\n    class=\"field\"\n    *ngIf=\"\n      (currentFilterIsSpatial$ | async) === false &&\n      (fields$ | async) &&\n      (fields$ | async).length > 0 &&\n      (fields$ | async)[0].name !== ''\n    \"\n    (mouseenter)=\"inputClearable = 'selectField'\"\n    (mouseleave)=\"inputClearable = undefined\"\n    [floatLabel]=\"floatLabel\"\n  >\n    <input\n      matInput\n      [placeholder]=\"'igo.geo.sourceFields.selectField' | translate\"\n      [disabled]=\"!currentFilter.active\"\n      [matAutocomplete]=\"autoCompleteField\"\n      [value]=\"(selectedField$ | async) ? (selectedField$ | async).alias : ''\"\n      tooltip-position=\"above\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"\n        (selectedField$ | async)\n          ? (selectedField$ | async).alias\n          : ('igo.geo.sourceFields.selectField' | translate)\n      \"\n      (input)=\"updateFieldsList($any($event.target).value)\"\n    />\n    <mat-autocomplete\n      #autoCompleteField=\"matAutocomplete\"\n      (optionSelected)=\"changeField($event.option.id)\"\n    >\n      <mat-option\n        *ngFor=\"let field of filteredFields$ | async\"\n        matTooltipShowDelay=\"500\"\n        [value]=\"field.alias\"\n        [id]=\"field.name\"\n        [matTooltip]=\"field.alias\"\n      >\n        {{ field.alias }}\n      </mat-option>\n    </mat-autocomplete>\n    <button\n      *ngIf=\"\n        currentFilter.propertyName &&\n        inputClearable === 'selectField' &&\n        currentFilter.active\n      \"\n      matSuffix\n      mat-icon-button\n      aria-label=\"Clear\"\n      [disabled]=\"!currentFilter.active\"\n      (click)=\"clearSelectedField()\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <mat-form-field\n    [ngClass]=\"{\n      operator: (currentFilterIsSpatial$ | async) === false,\n      dualInput: (currentFilterIsSpatial$ | async)\n    }\"\n    [floatLabel]=\"floatLabel\"\n  >\n    <mat-select\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"\n        currentFilter.operator\n          ? ('igo.geo.operators.tooltip.' + currentFilter.operator | translate)\n          : ('igo.geo.filter.selectOperator' | translate)\n      \"\n      [disabled]=\"!currentFilter.active\"\n      [value]=\"currentFilter.operator\"\n      (selectionChange)=\"changeOperator($event.value)\"\n    >\n      <mat-option\n        *ngFor=\"let operator of ogcFilterOperators$ | async | keyvalue\"\n        tooltip-position=\"above\"\n        matTooltipShowDelay=\"500\"\n        [value]=\"operator.key\"\n        [matTooltip]=\"'igo.geo.operators.tooltip.' + operator.key | translate\"\n      >\n        {{ 'igo.geo.operators.' + operator.key | translate }}\n      </mat-option>\n    </mat-select>\n  </mat-form-field>\n\n  <mat-form-field\n    class=\"spatialSelector\"\n    *ngIf=\"currentFilterIsSpatial$ | async\"\n  >\n    <mat-select\n      [disabled]=\"!currentFilter.active\"\n      [value]=\"currentFilter.igoSpatialSelector\"\n      (selectionChange)=\"changeSpatialSelector($event.value)\"\n    >\n      <mat-option\n        *ngFor=\"let igoSpatialSelector of igoSpatialSelectors\"\n        [value]=\"igoSpatialSelector.type\"\n      >\n        {{ 'igo.geo.spatialSelector.' + igoSpatialSelector.type | translate }}\n      </mat-option>\n    </mat-select>\n  </mat-form-field>\n\n  <mat-form-field\n    class=\"singleInput\"\n    *ngIf=\"['expression', 'pattern'].indexOf(detectProperty()) !== -1\"\n    (mouseenter)=\"inputClearable = 'selectProperty'\"\n    (mouseleave)=\"inputClearable = undefined\"\n    [floatLabel]=\"floatLabel\"\n  >\n    <input\n      matInput\n      [placeholder]=\"'igo.geo.filter.placeholder' | translate\"\n      [disabled]=\"!currentFilter.active\"\n      [matAutocomplete]=\"autoCompleteValues\"\n      [value]=\"\n        detectProperty() === 'expression'\n          ? currentFilter.expression\n          : currentFilter.pattern\n      \"\n      tooltip-position=\"above\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"\n        detectProperty() === 'expression'\n          ? currentFilter.expression || ''\n          : currentFilter.pattern || ''\n      \"\n      (input)=\"updateValuesList($any($event.target).value)\"\n    />\n    <mat-autocomplete\n      #autoCompleteValues=\"matAutocomplete\"\n      (optionSelected)=\"changeProperty($event.option.value)\"\n    >\n      <mat-option\n        *ngFor=\"let value of filteredValues$ | async\"\n        matTooltipShowDelay=\"500\"\n        [value]=\"value\"\n        [matTooltip]=\"value\"\n      >\n        {{ value }}\n      </mat-option>\n    </mat-autocomplete>\n    <button\n      *ngIf=\"\n        isClearable() &&\n        inputClearable === 'selectProperty' &&\n        currentFilter.active\n      \"\n      matSuffix\n      mat-icon-button\n      aria-label=\"Clear\"\n      [disabled]=\"!currentFilter.active\"\n      (click)=\"clearProperty()\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <div class=\"igo-layer-button-group\">\n    <button\n      mat-icon-button\n      collapsibleButton\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"'igo.geo.filter.removeFilter' | translate\"\n      color=\"warn\"\n      (click)=\"deleteFilter()\"\n    >\n      <mat-icon>delete</mat-icon>\n    </button>\n  </div>\n\n  <mat-form-field\n    class=\"snrc\"\n    *ngIf=\"\n      (currentFilterIsSpatial$ | async) &&\n      currentFilter.igoSpatialSelector === 'snrc'\n    \"\n    (mouseenter)=\"inputClearable = 'selectSNRC'\"\n    (mouseleave)=\"inputClearable = undefined\"\n    [floatLabel]=\"floatLabel\"\n  >\n    <input\n      matInput\n      [placeholder]=\"'igo.geo.filter.placeholderSnrc' | translate\"\n      [value]=\"currentFilter.igoSNRC\"\n      tooltip-position=\"above\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"currentFilter.igoSNRC ? currentFilter.igoSNRC : ''\"\n      (input)=\"changeSNRC($any($event.target).value)\"\n    />\n    <button\n      *ngIf=\"currentFilter.igoSNRC\"\n      matSuffix\n      mat-icon-button\n      aria-label=\"Clear\"\n      [disabled]=\"\n        !currentFilter.active &&\n        inputClearable === 'selectSNRC' &&\n        currentFilter.active\n      \"\n      (click)=\"currentFilter.igoSNRC = ''\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <ng-container\n    *ngIf=\"\n      (currentFilterIsSpatial$ | async) &&\n      currentFilter.igoSpatialSelector === 'fixedExtent'\n    \"\n  >\n    <button\n      [disabled]=\"!currentFilter.active\"\n      *ngIf=\"currentFilter.igoSpatialSelector === 'fixedExtent'\"\n      matSuffix\n      mat-icon-button\n      [disabled]=\"!currentFilter.active\"\n      (click)=\"changeMapExtentGeometry()\"\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"'igo.geo.spatialSelector.btnSetExtent' | translate\"\n    >\n      <mat-icon>zoom_out_map</mat-icon>\n    </button>\n  </ng-container>\n</div>\n\n<div class=\"ogc-filter-form-container\">\n  <mat-form-field\n    class=\"dualInput\"\n    *ngIf=\"\n      !isTemporalOperator() &&\n      ['lowerBoundary', 'begin'].indexOf(detectProperty(1)) !== -1\n    \"\n    (mouseenter)=\"inputClearable = 'selectProperty1'\"\n    (mouseleave)=\"inputClearable = undefined\"\n    [floatLabel]=\"floatLabel\"\n  >\n    <input\n      matInput\n      [placeholder]=\"'igo.geo.filter.placeholder' | translate\"\n      [disabled]=\"!currentFilter.active\"\n      [matAutocomplete]=\"autoDualValueOperator1\"\n      type=\"number\"\n      [value]=\"\n        detectProperty(1) === 'lowerBoundary'\n          ? currentFilter.lowerBoundary\n          : currentFilter.begin\n      \"\n      (input)=\"updateValuesList($any($event.target).value, 1)\"\n    />\n    <mat-autocomplete\n      #autoDualValueOperator1=\"matAutocomplete\"\n      (optionSelected)=\"changeNumericProperty($event.option.value, 1)\"\n    >\n      <mat-option\n        *ngFor=\"let value of filteredValues$ | async\"\n        matTooltipShowDelay=\"500\"\n        [value]=\"value\"\n        [matTooltip]=\"value\"\n      >\n        {{ value }}\n      </mat-option>\n    </mat-autocomplete>\n    <button\n      *ngIf=\"\n        isClearable(1) &&\n        inputClearable === 'selectProperty1' &&\n        currentFilter.active\n      \"\n      matSuffix\n      mat-icon-button\n      aria-label=\"Clear\"\n      [disabled]=\"!currentFilter.active\"\n      (click)=\"clearProperty(1)\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <mat-form-field\n    class=\"dualInput\"\n    *ngIf=\"\n      !isTemporalOperator() &&\n      ['upperBoundary', 'end'].indexOf(detectProperty(2)) !== -1\n    \"\n    (mouseenter)=\"inputClearable = 'selectProperty2'\"\n    (mouseleave)=\"inputClearable = undefined\"\n    [floatLabel]=\"floatLabel\"\n  >\n    <input\n      matInput\n      [placeholder]=\"'igo.geo.filter.placeholder' | translate\"\n      [disabled]=\"!currentFilter.active\"\n      [matAutocomplete]=\"autoDualValueOperator2\"\n      type=\"number\"\n      [value]=\"\n        detectProperty(2) === 'upperBoundary'\n          ? currentFilter.upperBoundary\n          : currentFilter.end\n      \"\n      (input)=\"updateValuesList($any($event.target).value, 2)\"\n    />\n    <mat-autocomplete\n      #autoDualValueOperator2=\"matAutocomplete\"\n      (optionSelected)=\"changeNumericProperty($event.option.value, 2)\"\n    >\n      <mat-option\n        *ngFor=\"let value of filteredValues$ | async\"\n        matTooltipShowDelay=\"500\"\n        [value]=\"value\"\n        [matTooltip]=\"value\"\n      >\n        {{ value }}\n      </mat-option>\n    </mat-autocomplete>\n    <button\n      *ngIf=\"\n        isClearable(2) &&\n        inputClearable === 'selectProperty2' &&\n        currentFilter.active\n      \"\n      matSuffix\n      mat-icon-button\n      aria-label=\"Clear\"\n      [disabled]=\"!currentFilter.active\"\n      (click)=\"clearProperty(2)\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n</div>\n\n<igo-ogc-filter-time\n  *ngIf=\"isTemporalOperator()\"\n  [datasource]=\"datasource\"\n  [currentFilter]=\"currentFilter\"\n  (changeProperty)=\"changeProperty($event.value, $event.pos)\"\n>\n</igo-ogc-filter-time>\n", styles: [":host{width:100%;padding:5px 10px}:host ::ng-deep .mat-mdc-form-field .mat-icon svg{width:1em;height:1em;color:#d3d3d3}:host .ogc-filter-form-container{display:flex}:host .mat-mdc-form-field{width:100%}:host .mat-mdc-select-arrow{visibility:hidden}:host .mat-mdc-slide-toggle{margin-top:10px}:host .logical{flex-flow:column nowrap;width:100%;max-width:60px;margin-right:5px}:host .logicalHidden{width:0px;visibility:hidden;max-width:0px}:host ::ng-deep .logical .mat-mdc-select-arrow{visibility:hidden}:host ::ng-deep .logicalHidden .mat-mdc-select-arrow{visibility:hidden}:host .field{width:150px;margin-right:5px}:host ::ng-deep .field .mat-mdc-select-arrow{visibility:hidden}:host .operator{width:150px;margin-right:5px;text-align:center}:host ::ng-deep .operator .mat-mdc-select-arrow{visibility:hidden}:host .spatialSelector{width:110px;margin-right:5px}:host ::ng-deep .spatialSelector .mat-mdc-select-arrow{visibility:hidden}:host .singleInput{width:150px;margin-right:5px}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){:host .singleInput{width:27%}}:host .snrc{width:110px;margin-right:5px}:host ::ng-deep .singleInput .mat-mdc-select-arrow{visibility:hidden}:host .dualInput{width:150px;margin-right:5px}:host ::ng-deep .dualInput .mat-mdc-select-arrow{visibility:hidden}:host .igo-layer-button-group{display:flex;padding-top:5px}:host .container{display:flex}\n"] }]
         }], ctorParameters: () => [{ type: WktService }], propDecorators: { refreshFilters: [{
                 type: Input
             }], datasource: [{
@@ -25365,7 +25400,7 @@ class OgcFilterSelectionComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: OgcFilterSelectionComponent, deps: [{ token: OGCFilterService }, { token: i1$6.UntypedFormBuilder }, { token: i3$6.DOMService }, { token: i1.ConfigService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: OgcFilterSelectionComponent, isStandalone: true, selector: "igo-ogc-filter-selection", inputs: { refreshFilters: "refreshFilters", datasource: "datasource", map: "map", checkboxesIndex: "checkboxesIndex", radioButtonsIndex: "radioButtonsIndex", baseIndex: "baseIndex", currentFilter: "currentFilter" }, providers: [DOMService], viewQueries: [{ propertyName: "sel", first: true, predicate: ["selection"], descendants: true }], ngImport: i0, template: "<form [formGroup]=\"form\">\n  <div *ngFor=\"let selector of ogcFiltersSelectors\">\n    <div\n      class=\"pushButtonGroups\"\n      *ngIf=\"selector.selectorType === 'pushButton'\"\n    >\n      <mat-divider></mat-divider>\n      <div class=\"groupsSelector\" *ngIf=\"getPushButtonsGroups().length > 1\">\n        <mat-form-field>\n          <mat-select\n            formControlName=\"pushButtonsGroup\"\n            [matTooltip]=\"'igo.geo.layer.legend.selectStyle' | translate\"\n            tooltip-position=\"below\"\n            matTooltipShowDelay=\"500\"\n            [(value)]=\"currentPushButtonsGroup\"\n          >\n            <mat-option\n              *ngFor=\"let selectorGroup of getPushButtonsGroups()\"\n              [value]=\"selectorGroup\"\n              >{{ selectorGroup.title }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n      <ng-container\n        *ngFor=\"let bundle of currentPushButtonsGroup.computedSelectors\"\n      >\n        <h3>{{ bundle.title }}</h3>\n        <mat-button-toggle-group\n          formControlName=\"pushButtons\"\n          class=\"mat-typography\"\n          appearance=\"legacy\"\n          vertical=\"{{ bundleIsVertical(bundle) }}\"\n          multiple=\"true\"\n        >\n          <mat-button-toggle\n            *ngFor=\"let ogcPushButton of bundle.selectors\"\n            [matTooltip]=\"getToolTip(ogcPushButton)\"\n            tooltip-position=\"below\"\n            matTooltipShowDelay=\"500\"\n            matTooltipClass=\"material-tooltip\"\n            [ngStyle]=\"getButtonColor(ogcPushButton)\"\n            [checked]=\"ogcPushButton.enabled\"\n            (change)=\"onSelectionChange(ogcPushButton, selector.selectorType)\"\n            [value]=\"ogcPushButton\"\n            >{{ ogcPushButton.title }}\n          </mat-button-toggle>\n        </mat-button-toggle-group>\n      </ng-container>\n    </div>\n\n    <div class=\"checkboxGroups\" *ngIf=\"selector.selectorType === 'checkbox'\">\n      <mat-divider></mat-divider>\n      <div class=\"groupsSelector\" *ngIf=\"getCheckboxesGroups().length > 1\">\n        <mat-form-field>\n          <mat-select\n            formControlName=\"checkboxesGroup\"\n            [matTooltip]=\"'igo.geo.layer.legend.selectStyle' | translate\"\n            tooltip-position=\"below\"\n            matTooltipShowDelay=\"500\"\n            [(value)]=\"currentCheckboxesGroup\"\n          >\n            <mat-option\n              *ngFor=\"let selectorGroup of getCheckboxesGroups()\"\n              [value]=\"selectorGroup\"\n              >{{ selectorGroup.title }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n      <ng-container\n        *ngFor=\"let bundle of currentCheckboxesGroup.computedSelectors\"\n      >\n        <h3>{{ bundle.title }}</h3>\n        <div class=\"checkboxes mat-typography\">\n          <mat-checkbox\n            *ngFor=\"let ogcCheckbox of bundle.selectors\"\n            [matTooltip]=\"getToolTip(ogcCheckbox)\"\n            tooltip-position=\"below\"\n            matTooltipShowDelay=\"500\"\n            matTooltipClass=\"material-tooltip\"\n            [checked]=\"ogcCheckbox.enabled\"\n            (change)=\"onSelectionChange(ogcCheckbox, selector.selectorType)\"\n            [value]=\"ogcCheckbox\"\n            >{{ ogcCheckbox.title }}\n          </mat-checkbox>\n        </div>\n        <p\n          *ngIf=\"\n            isLessResults(bundle, 'checkbox') ||\n            isMoreResults(bundle, 'checkbox')\n          \"\n        >\n          <u\n            *ngIf=\"isLessResults(bundle, 'checkbox')\"\n            class=\"lessResults mat-typography\"\n            (click)=\"displayLessResults('checkbox')\"\n            >{{ 'igo.geo.filter.displayLessResults' | translate }}\n          </u>\n          <u\n            *ngIf=\"isMoreResults(bundle, 'checkbox')\"\n            class=\"moreResults mat-typography\"\n            (click)=\"displayMoreResults('checkbox')\"\n            >{{ 'igo.geo.filter.displayMoreResults' | translate }}\n          </u>\n        </p>\n      </ng-container>\n    </div>\n\n    <div\n      class=\"radioButtonGroups\"\n      *ngIf=\"selector.selectorType === 'radioButton'\"\n    >\n      <mat-divider></mat-divider>\n      <div class=\"groupsSelector\" *ngIf=\"getRadioButtonsGroups().length > 1\">\n        <mat-form-field>\n          <mat-select\n            formControlName=\"radioButtonsGroup\"\n            [matTooltip]=\"'igo.geo.layer.legend.selectStyle' | translate\"\n            tooltip-position=\"below\"\n            matTooltipShowDelay=\"500\"\n            [(value)]=\"currentRadioButtonsGroup\"\n          >\n            <mat-option\n              *ngFor=\"let selectorGroup of getRadioButtonsGroups()\"\n              [value]=\"selectorGroup\"\n              >{{ selectorGroup.title }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n      <ng-container\n        *ngFor=\"let bundle of currentRadioButtonsGroup.computedSelectors\"\n      >\n        <h3>{{ bundle.title }}</h3>\n        <mat-radio-group formControlName=\"radioButtons\" class=\"mat-typography\">\n          <mat-radio-button\n            *ngIf=\"bundle.unfiltered\"\n            [matTooltip]=\"'igo.geo.filter.resetFilters' | translate\"\n            tooltip-position=\"below\"\n            matTooltipShowDelay=\"500\"\n            matTooltipClass=\"material-tooltip\"\n            (change)=\"emptyRadioButtons()\"\n            >{{ 'igo.geo.filter.resetFilters' | translate }}\n          </mat-radio-button>\n          <mat-radio-button\n            *ngFor=\"let ogcRadioButton of bundle.selectors\"\n            [matTooltip]=\"getToolTip(ogcRadioButton)\"\n            tooltip-position=\"below\"\n            matTooltipShowDelay=\"500\"\n            matTooltipClass=\"material-tooltip\"\n            [checked]=\"ogcRadioButton.enabled\"\n            (change)=\"onSelectionChange(ogcRadioButton, selector.selectorType)\"\n            [value]=\"ogcRadioButton\"\n            >{{ ogcRadioButton.title }}\n          </mat-radio-button>\n          <p\n            *ngIf=\"\n              isLessResults(bundle, 'radio') || isMoreResults(bundle, 'radio')\n            \"\n          >\n            <u\n              *ngIf=\"isLessResults(bundle, 'radio')\"\n              class=\"lessResults mat-typography\"\n              (click)=\"displayLessResults('radio')\"\n              >{{ 'igo.geo.filter.displayLessResults' | translate }}\n            </u>\n            <u\n              *ngIf=\"isMoreResults(bundle, 'radio')\"\n              class=\"moreResults mat-typography\"\n              (click)=\"displayMoreResults('radio')\"\n              >{{ 'igo.geo.filter.displayMoreResults' | translate }}\n            </u>\n          </p>\n        </mat-radio-group>\n      </ng-container>\n    </div>\n\n    <div class=\"selectGroups\" *ngIf=\"selector.selectorType === 'select'\">\n      <mat-divider></mat-divider>\n      <div class=\"groupsSelector\" *ngIf=\"getSelectGroups().length > 1\">\n        <mat-form-field>\n          <mat-select\n            formControlName=\"selectGroup\"\n            [matTooltip]=\"'igo.geo.layer.legend.selectStyle' | translate\"\n            tooltip-position=\"below\"\n            matTooltipShowDelay=\"500\"\n            [(value)]=\"currentSelectGroup\"\n          >\n            <mat-option\n              *ngFor=\"let selectorGroup of getSelectGroups()\"\n              [value]=\"selectorGroup\"\n              >{{ selectorGroup.title }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n      <ng-container *ngFor=\"let bundle of currentSelectGroup.computedSelectors\">\n        <h3>{{ bundle.title }}</h3>\n        <div class=\"groupsSelector\">\n          <mat-button\n            *ngIf=\"bundle.unfiltered && !bundle.multiple\"\n            mat-icon-button\n            color=\"warn\"\n            [matTooltip]=\"'igo.geo.filter.resetFilters' | translate\"\n            tooltip-position=\"below\"\n            matTooltipShowDelay=\"500\"\n            matTooltipClass=\"material-tooltip\"\n            (click)=\"emptySelect()\"\n          >\n            <mat-icon svgIcon=\"filter-remove\"></mat-icon>\n          </mat-button>\n          <mat-form-field\n            [style.width.%]=\"bundle.width ? bundle.width : undefined\"\n          >\n            <div *ngIf=\"bundle.multiple; else notMulti\">\n              <mat-select\n                #selection\n                [multiple]=\"bundle.multiple\"\n                [placeholder]=\"bundle.title\"\n                formControlName=\"selectMulti\"\n              >\n                <div class=\"checkboxes mat-typography\">\n                  <mat-checkbox\n                    *ngIf=\"bundle.multiple\"\n                    [(ngModel)]=\"selectAllSelected\"\n                    [ngModelOptions]=\"{ standalone: true }\"\n                    (change)=\"toggleAllSelection()\"\n                    >Tous\n                  </mat-checkbox>\n                </div>\n                <mat-option\n                  *ngFor=\"let ogcSelect of bundle.selectors\"\n                  [matTooltip]=\"getToolTip(ogcSelect)\"\n                  tooltip-position=\"below\"\n                  matTooltipDelay=\"500\"\n                  matTooltipClass=\"material-tooltip\"\n                  (onSelectionChange)=\"\n                    selectOptionClick($event.source.value, bundle, $event)\n                  \"\n                  [value]=\"ogcSelect\"\n                  >{{ ogcSelect.title }}\n                </mat-option>\n              </mat-select>\n            </div>\n            <ng-template #notMulti>\n              <mat-select [placeholder]=\"bundle.title\" formControlName=\"select\">\n                <mat-option\n                  *ngFor=\"let ogcSelect of bundle.selectors\"\n                  [matTooltip]=\"getToolTip(ogcSelect)\"\n                  tooltip-position=\"below\"\n                  matTooltipDelay=\"500\"\n                  matTooltipClass=\"material-tooltip\"\n                  [value]=\"ogcSelect\"\n                  (onSelectionChange)=\"\n                    selectOptionClick($event.source.value, bundle)\n                  \"\n                  >{{ ogcSelect.title }}\n                </mat-option>\n              </mat-select>\n            </ng-template>\n          </mat-form-field>\n        </div>\n      </ng-container>\n    </div>\n\n    <div\n      class=\"autocompleteGroups\"\n      *ngIf=\"selector.selectorType === 'autocomplete'\"\n    >\n      <mat-divider></mat-divider>\n      <div class=\"groupsSelector\" *ngIf=\"getAutocompleteGroups().length > 1\">\n        <mat-form-field>\n          <mat-select\n            formControlName=\"autocompleteGroup\"\n            [matTooltip]=\"'igo.geo.layer.legend.selectStyle' | translate\"\n            tooltip-position=\"below\"\n            matTooltipShowDelay=\"500\"\n            [(value)]=\"currentAutocompleteGroup\"\n          >\n            <mat-option\n              *ngFor=\"let autocompleteGroup of getAutocompleteGroups()\"\n              [value]=\"autocompleteGroup\"\n              >{{ autocompleteGroup.title }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n      <ng-container\n        *ngFor=\"let bundle of currentAutocompleteGroup.computedSelectors\"\n      >\n        <h3>{{ bundle.title }}</h3>\n        <div class=\"groupsSelector\">\n          <mat-button\n            *ngIf=\"bundle.unfiltered\"\n            mat-icon-button\n            color=\"warn\"\n            [matTooltip]=\"'igo.geo.filter.resetFilters' | translate\"\n            tooltip-position=\"below\"\n            matTooltipShowDelay=\"500\"\n            matTooltipClass=\"material-tooltip\"\n            (click)=\"emptyAutocomplete()\"\n          >\n            <mat-icon svgIcon=\"filter-remove\"></mat-icon>\n          </mat-button>\n          <mat-form-field\n            *ngIf=\"filteredOgcAutocomplete[bundle.id]\"\n            [style.width.%]=\"bundle.width ? bundle.width : undefined\"\n          >\n            <input\n              matInput\n              type=\"text\"\n              formControlName=\"autocomplete\"\n              #autocomplete\n              class=\"autocomplete\"\n              [matAutocomplete]=\"auto\"\n              [placeholder]=\"bundle.title\"\n            />\n            <mat-autocomplete\n              #auto=\"matAutocomplete\"\n              #autocomplete\n              (optionSelected)=\"autocompleteOptionClick($event.option.value)\"\n              [displayWith]=\"displayFn\"\n            >\n              <mat-option\n                *ngFor=\"\n                  let ogcAutocomplete of filteredOgcAutocomplete[bundle.id]\n                    | async\n                \"\n                [value]=\"ogcAutocomplete\"\n              >\n                {{ ogcAutocomplete.value }}\n              </mat-option>\n            </mat-autocomplete>\n          </mat-form-field>\n        </div>\n      </ng-container>\n    </div>\n  </div>\n</form>\n\n<div *ngIf=\"isTemporalOperator()\">\n  <mat-divider></mat-divider>\n  <h3 *ngIf=\"!currentFilter.title\">\n    {{ 'igo.geo.filter.reportingDate' | translate }}\n  </h3>\n  <h3 *ngIf=\"currentFilter.title\">{{ currentFilter.title }}</h3>\n  <igo-ogc-filter-time\n    [datasource]=\"datasource\"\n    [currentFilter]=\"currentFilter\"\n    (changeProperty)=\"changeProperty($event.value, $event.pos)\"\n  >\n  </igo-ogc-filter-time>\n</div>\n", styles: [":host .mat-button-toggle-group{margin:5px;flex-wrap:wrap;box-shadow:none!important;width:95%}:host .checkboxes{flex-wrap:wrap;box-shadow:none}:host .groupsSelector{text-align:center}:host mat-button-toggle{display:inline-flex;border:1.5px solid black;border-radius:5px;margin:5px;white-space:normal;min-height:40px;height:auto;width:142px}:host mat-button-toggle ::ng-deep .mat-button-toggle-label-content{line-height:unset;font-size:small;display:block}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){:host mat-button-toggle{width:45%}}:host ::ng-deep .material-tooltip{white-space:pre-wrap}:host mat-checkbox,:host mat-radio-button{margin:7px;width:95%;display:inline-flex;font-size:larger}:host mat-checkbox ::ng-deep label,:host mat-radio-button ::ng-deep label{white-space:normal}:host mat-checkbox{vertical-align:middle}:host mat-button{padding-right:10px;cursor:pointer}:host h3{margin:7px;text-align:left}:host u{cursor:pointer;color:#00f;margin:5px}:host p{margin:unset}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$6.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$6.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i6$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i8$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6$4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i4$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i4$1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i8.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i6$1.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i6$1.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i6$5.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i6$5.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: OgcFilterTimeComponent, selector: "igo-ogc-filter-time", inputs: ["datasource", "currentFilter"], outputs: ["changeProperty"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: OgcFilterSelectionComponent, isStandalone: true, selector: "igo-ogc-filter-selection", inputs: { refreshFilters: "refreshFilters", datasource: "datasource", map: "map", checkboxesIndex: "checkboxesIndex", radioButtonsIndex: "radioButtonsIndex", baseIndex: "baseIndex", currentFilter: "currentFilter" }, providers: [DOMService], viewQueries: [{ propertyName: "sel", first: true, predicate: ["selection"], descendants: true }], ngImport: i0, template: "<form [formGroup]=\"form\">\n  <div *ngFor=\"let selector of ogcFiltersSelectors\">\n    <div\n      class=\"pushButtonGroups\"\n      *ngIf=\"selector.selectorType === 'pushButton'\"\n    >\n      <mat-divider></mat-divider>\n      <div class=\"groupsSelector\" *ngIf=\"getPushButtonsGroups().length > 1\">\n        <mat-form-field>\n          <mat-select\n            formControlName=\"pushButtonsGroup\"\n            [matTooltip]=\"'igo.geo.layer.legend.selectStyle' | translate\"\n            tooltip-position=\"below\"\n            matTooltipShowDelay=\"500\"\n            [(value)]=\"currentPushButtonsGroup\"\n          >\n            <mat-option\n              *ngFor=\"let selectorGroup of getPushButtonsGroups()\"\n              [value]=\"selectorGroup\"\n              >{{ selectorGroup.title }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n      <ng-container\n        *ngFor=\"let bundle of currentPushButtonsGroup.computedSelectors\"\n      >\n        <h3>{{ bundle.title }}</h3>\n        <mat-button-toggle-group\n          formControlName=\"pushButtons\"\n          class=\"mat-typography\"\n          appearance=\"legacy\"\n          vertical=\"{{ bundleIsVertical(bundle) }}\"\n          multiple=\"true\"\n        >\n          <mat-button-toggle\n            *ngFor=\"let ogcPushButton of bundle.selectors\"\n            [matTooltip]=\"getToolTip(ogcPushButton)\"\n            tooltip-position=\"below\"\n            matTooltipShowDelay=\"500\"\n            matTooltipClass=\"material-tooltip\"\n            [ngStyle]=\"getButtonColor(ogcPushButton)\"\n            [checked]=\"ogcPushButton.enabled\"\n            (change)=\"onSelectionChange(ogcPushButton, selector.selectorType)\"\n            [value]=\"ogcPushButton\"\n            >{{ ogcPushButton.title }}\n          </mat-button-toggle>\n        </mat-button-toggle-group>\n      </ng-container>\n    </div>\n\n    <div class=\"checkboxGroups\" *ngIf=\"selector.selectorType === 'checkbox'\">\n      <mat-divider></mat-divider>\n      <div class=\"groupsSelector\" *ngIf=\"getCheckboxesGroups().length > 1\">\n        <mat-form-field>\n          <mat-select\n            formControlName=\"checkboxesGroup\"\n            [matTooltip]=\"'igo.geo.layer.legend.selectStyle' | translate\"\n            tooltip-position=\"below\"\n            matTooltipShowDelay=\"500\"\n            [(value)]=\"currentCheckboxesGroup\"\n          >\n            <mat-option\n              *ngFor=\"let selectorGroup of getCheckboxesGroups()\"\n              [value]=\"selectorGroup\"\n              >{{ selectorGroup.title }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n      <ng-container\n        *ngFor=\"let bundle of currentCheckboxesGroup.computedSelectors\"\n      >\n        <h3>{{ bundle.title }}</h3>\n        <div class=\"checkboxes mat-typography\">\n          <mat-checkbox\n            *ngFor=\"let ogcCheckbox of bundle.selectors\"\n            [matTooltip]=\"getToolTip(ogcCheckbox)\"\n            tooltip-position=\"below\"\n            matTooltipShowDelay=\"500\"\n            matTooltipClass=\"material-tooltip\"\n            [checked]=\"ogcCheckbox.enabled\"\n            (change)=\"onSelectionChange(ogcCheckbox, selector.selectorType)\"\n            [value]=\"ogcCheckbox\"\n            >{{ ogcCheckbox.title }}\n          </mat-checkbox>\n        </div>\n        <p\n          *ngIf=\"\n            isLessResults(bundle, 'checkbox') ||\n            isMoreResults(bundle, 'checkbox')\n          \"\n        >\n          <u\n            *ngIf=\"isLessResults(bundle, 'checkbox')\"\n            class=\"lessResults mat-typography\"\n            (click)=\"displayLessResults('checkbox')\"\n            >{{ 'igo.geo.filter.displayLessResults' | translate }}\n          </u>\n          <u\n            *ngIf=\"isMoreResults(bundle, 'checkbox')\"\n            class=\"moreResults mat-typography\"\n            (click)=\"displayMoreResults('checkbox')\"\n            >{{ 'igo.geo.filter.displayMoreResults' | translate }}\n          </u>\n        </p>\n      </ng-container>\n    </div>\n\n    <div\n      class=\"radioButtonGroups\"\n      *ngIf=\"selector.selectorType === 'radioButton'\"\n    >\n      <mat-divider></mat-divider>\n      <div class=\"groupsSelector\" *ngIf=\"getRadioButtonsGroups().length > 1\">\n        <mat-form-field>\n          <mat-select\n            formControlName=\"radioButtonsGroup\"\n            [matTooltip]=\"'igo.geo.layer.legend.selectStyle' | translate\"\n            tooltip-position=\"below\"\n            matTooltipShowDelay=\"500\"\n            [(value)]=\"currentRadioButtonsGroup\"\n          >\n            <mat-option\n              *ngFor=\"let selectorGroup of getRadioButtonsGroups()\"\n              [value]=\"selectorGroup\"\n              >{{ selectorGroup.title }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n      <ng-container\n        *ngFor=\"let bundle of currentRadioButtonsGroup.computedSelectors\"\n      >\n        <h3>{{ bundle.title }}</h3>\n        <mat-radio-group formControlName=\"radioButtons\" class=\"mat-typography\">\n          <mat-radio-button\n            *ngIf=\"bundle.unfiltered\"\n            [matTooltip]=\"'igo.geo.filter.resetFilters' | translate\"\n            tooltip-position=\"below\"\n            matTooltipShowDelay=\"500\"\n            matTooltipClass=\"material-tooltip\"\n            (change)=\"emptyRadioButtons()\"\n            >{{ 'igo.geo.filter.resetFilters' | translate }}\n          </mat-radio-button>\n          <mat-radio-button\n            *ngFor=\"let ogcRadioButton of bundle.selectors\"\n            [matTooltip]=\"getToolTip(ogcRadioButton)\"\n            tooltip-position=\"below\"\n            matTooltipShowDelay=\"500\"\n            matTooltipClass=\"material-tooltip\"\n            [checked]=\"ogcRadioButton.enabled\"\n            (change)=\"onSelectionChange(ogcRadioButton, selector.selectorType)\"\n            [value]=\"ogcRadioButton\"\n            >{{ ogcRadioButton.title }}\n          </mat-radio-button>\n          <p\n            *ngIf=\"\n              isLessResults(bundle, 'radio') || isMoreResults(bundle, 'radio')\n            \"\n          >\n            <u\n              *ngIf=\"isLessResults(bundle, 'radio')\"\n              class=\"lessResults mat-typography\"\n              (click)=\"displayLessResults('radio')\"\n              >{{ 'igo.geo.filter.displayLessResults' | translate }}\n            </u>\n            <u\n              *ngIf=\"isMoreResults(bundle, 'radio')\"\n              class=\"moreResults mat-typography\"\n              (click)=\"displayMoreResults('radio')\"\n              >{{ 'igo.geo.filter.displayMoreResults' | translate }}\n            </u>\n          </p>\n        </mat-radio-group>\n      </ng-container>\n    </div>\n\n    <div class=\"selectGroups\" *ngIf=\"selector.selectorType === 'select'\">\n      <mat-divider></mat-divider>\n      <div class=\"groupsSelector\" *ngIf=\"getSelectGroups().length > 1\">\n        <mat-form-field>\n          <mat-select\n            formControlName=\"selectGroup\"\n            [matTooltip]=\"'igo.geo.layer.legend.selectStyle' | translate\"\n            tooltip-position=\"below\"\n            matTooltipShowDelay=\"500\"\n            [(value)]=\"currentSelectGroup\"\n          >\n            <mat-option\n              *ngFor=\"let selectorGroup of getSelectGroups()\"\n              [value]=\"selectorGroup\"\n              >{{ selectorGroup.title }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n      <ng-container *ngFor=\"let bundle of currentSelectGroup.computedSelectors\">\n        <h3>{{ bundle.title }}</h3>\n        <div class=\"groupsSelector\">\n          <mat-button\n            *ngIf=\"bundle.unfiltered && !bundle.multiple\"\n            mat-icon-button\n            color=\"warn\"\n            [matTooltip]=\"'igo.geo.filter.resetFilters' | translate\"\n            tooltip-position=\"below\"\n            matTooltipShowDelay=\"500\"\n            matTooltipClass=\"material-tooltip\"\n            (click)=\"emptySelect()\"\n          >\n            <mat-icon>filter_alt_off</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>filter_alt_off</mat-icon>\n          </mat-button>\n          <mat-form-field\n            *ngIf=\"filteredOgcAutocomplete[bundle.id]\"\n            [style.width.%]=\"bundle.width ? bundle.width : undefined\"\n          >\n            <input\n              matInput\n              type=\"text\"\n              formControlName=\"autocomplete\"\n              #autocomplete\n              class=\"autocomplete\"\n              [matAutocomplete]=\"auto\"\n              [placeholder]=\"bundle.title\"\n            />\n            <mat-autocomplete\n              #auto=\"matAutocomplete\"\n              #autocomplete\n              (optionSelected)=\"autocompleteOptionClick($event.option.value)\"\n              [displayWith]=\"displayFn\"\n            >\n              <mat-option\n                *ngFor=\"\n                  let ogcAutocomplete of filteredOgcAutocomplete[bundle.id]\n                    | async\n                \"\n                [value]=\"ogcAutocomplete\"\n              >\n                {{ ogcAutocomplete.value }}\n              </mat-option>\n            </mat-autocomplete>\n          </mat-form-field>\n        </div>\n      </ng-container>\n    </div>\n  </div>\n</form>\n\n<div *ngIf=\"isTemporalOperator()\">\n  <mat-divider></mat-divider>\n  <h3 *ngIf=\"!currentFilter.title\">\n    {{ 'igo.geo.filter.reportingDate' | translate }}\n  </h3>\n  <h3 *ngIf=\"currentFilter.title\">{{ currentFilter.title }}</h3>\n  <igo-ogc-filter-time\n    [datasource]=\"datasource\"\n    [currentFilter]=\"currentFilter\"\n    (changeProperty)=\"changeProperty($event.value, $event.pos)\"\n  >\n  </igo-ogc-filter-time>\n</div>\n", styles: [":host .mat-button-toggle-group{margin:5px;flex-wrap:wrap;box-shadow:none!important;width:95%}:host .checkboxes{flex-wrap:wrap;box-shadow:none}:host .groupsSelector{text-align:center}:host mat-button-toggle{display:inline-flex;border:1.5px solid black;border-radius:5px;margin:5px;white-space:normal;min-height:40px;height:auto;width:142px}:host mat-button-toggle ::ng-deep .mat-button-toggle-label-content{line-height:unset;font-size:small;display:block}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){:host mat-button-toggle{width:45%}}:host ::ng-deep .material-tooltip{white-space:pre-wrap}:host mat-checkbox,:host mat-radio-button{margin:7px;width:95%;display:inline-flex;font-size:larger}:host mat-checkbox ::ng-deep label,:host mat-radio-button ::ng-deep label{white-space:normal}:host mat-checkbox{vertical-align:middle}:host mat-button{padding-right:10px;cursor:pointer}:host h3{margin:7px;text-align:left}:host u{cursor:pointer;color:#00f;margin:5px}:host p{margin:unset}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$6.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$6.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i6$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i8$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6$4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i4$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i4$1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i8.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i6$1.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i6$1.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i6$5.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i6$5.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: OgcFilterTimeComponent, selector: "igo-ogc-filter-time", inputs: ["datasource", "currentFilter"], outputs: ["changeProperty"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: OgcFilterSelectionComponent, decorators: [{
             type: Component,
@@ -25389,7 +25424,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                         OgcFilterTimeComponent,
                         AsyncPipe,
                         TranslateModule
-                    ], 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"] }]
+                    ], 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>filter_alt_off</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>filter_alt_off</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"] }]
         }], ctorParameters: () => [{ type: OGCFilterService }, { type: i1$6.UntypedFormBuilder }, { type: i3$6.DOMService }, { type: i1.ConfigService }, { type: i0.ChangeDetectorRef }], propDecorators: { sel: [{
                 type: ViewChild,
                 args: ['selection']
@@ -25653,7 +25688,7 @@ class OgcFilterableItemComponent {
         this.filtersCollapsed = !this.filtersCollapsed;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: OgcFilterableItemComponent, deps: [{ token: OGCFilterService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: OgcFilterableItemComponent, isStandalone: true, selector: "igo-ogc-filterable-item", inputs: { layer: "layer", map: "map", header: "header" }, providers: [OGCFilterService], ngImport: i0, template: "<div [ngClass]=\"{ 'separate-item': header === true }\">\n  <mat-list-item>\n    <mat-icon\n      *ngIf=\"header\"\n      class=\"igo-chevron\"\n      matListItemIcon\n      igoCollapse\n      [target]=\"ogcFilters\"\n      [collapsed]=\"filtersCollapsed\"\n      (click)=\"toggleFiltersCollapsed()\"\n      svgIcon=\"chevron-up\"\n    >\n    </mat-icon>\n    <span\n      *ngIf=\"header\"\n      matListItemTitle\n      [ngStyle]=\"{ cursor: filtersCollapsed ? 'default' : 'pointer' }\"\n      [matTooltip]=\"layer.title\"\n      matTooltipShowDelay=\"500\"\n      (click)=\"toggleLegendOnClick()\"\n    >\n      {{ layer.title }}\n    </span>\n    <div matListItemMeta>\n      <button\n        *ngIf=\"isAdvancedOgcFilters() && filtersAreEditable\"\n        [disabled]=\"addFilterDisabled()\"\n        mat-icon-button\n        tooltip-position=\"below\"\n        matTooltipShowDelay=\"500\"\n        [matTooltip]=\"'igo.geo.filter.addFilter' | translate\"\n        [color]=\"color\"\n        (click)=\"addFilterToSequence()\"\n      >\n        <mat-icon svgIcon=\"plus\"></mat-icon>\n      </button>\n      <button\n        *ngIf=\"header\"\n        mat-icon-button\n        [color]=\"layer.visible ? 'primary' : 'default'\"\n        collapsibleButton\n        tooltip-position=\"below\"\n        matTooltipShowDelay=\"500\"\n        [matTooltip]=\"\n          layer.visible\n            ? ('igo.geo.layer.hideLayer' | translate)\n            : ('igo.geo.layer.showLayer' | translate)\n        \"\n        (click)=\"layer.visible = !layer.visible\"\n      >\n        <mat-icon\n          [ngClass]=\"{ disabled: (inResolutionRange$ | async) === false }\"\n          [svgIcon]=\"layer.visible ? 'eye' : 'eye-off'\"\n        >\n        </mat-icon>\n      </button>\n    </div>\n  </mat-list-item>\n\n  <div #ogcFilters>\n    <div *ngIf=\"header\" #legend class=\"igo-layer-legend-container\">\n      <igo-layer-legend *ngIf=\"showLegend$ | async\" [layer]=\"layer\">\n      </igo-layer-legend>\n    </div>\n    <igo-ogc-filterable-form\n      [datasource]=\"datasource\"\n      [map]=\"map\"\n      [refreshFilters]=\"refreshFunc\"\n    >\n    </igo-ogc-filterable-form>\n\n    <section\n      *ngIf=\"hasSelector && filtersAreEditable\"\n      class=\"mat-typography advancedOgcFilters\"\n    >\n      <mat-divider></mat-divider>\n      <mat-checkbox\n        (change)=\"changeOgcFilterType($event)\"\n        [(ngModel)]=\"datasource.options.ogcFilters.advancedOgcFilters\"\n      >\n        {{ 'igo.geo.filter.advancedOgcFilters' | translate }}\n      </mat-checkbox>\n    </section>\n  </div>\n</div>\n", styles: [":host{overflow:hidden}:host .advancedOgcFilters{text-align:center;width:100%;display:inline-block}:host .mat-mdc-list-item{height:auto}:host .igo-layer-legend-container{padding-left:1.125em;width:calc(100% - 18px)}:host mat-icon.disabled{color:#00000061}:host .separate-item{border-bottom:4px solid darkgrey}:host ::ng-deep .mdc-list-item__start,:host ::ng-deep .mdc-list-item__end,:host ::ng-deep .mdc-list-item__content{pointer-events:auto}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i2$5.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i2$5.MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "component", type: i6$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i2$5.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "directive", type: i2$5.MatListItemMeta, selector: "[matListItemMeta]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: CollapseDirective, selector: "[igoCollapse]", inputs: ["target", "collapsed"], outputs: ["toggle"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: LayerLegendComponent, selector: "igo-layer-legend", inputs: ["updateLegendOnResolutionChange", "layer"] }, { kind: "component", type: OgcFilterableFormComponent, selector: "igo-ogc-filterable-form", inputs: ["datasource", "map", "refreshFilters"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i8.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: OgcFilterableItemComponent, isStandalone: true, selector: "igo-ogc-filterable-item", inputs: { layer: "layer", map: "map", header: "header" }, providers: [OGCFilterService], ngImport: i0, template: "<div [ngClass]=\"{ 'separate-item': header === true }\">\n  <mat-list-item>\n    <mat-icon\n      *ngIf=\"header\"\n      class=\"igo-chevron\"\n      matListItemIcon\n      igoCollapse\n      [target]=\"ogcFilters\"\n      [collapsed]=\"filtersCollapsed\"\n      (click)=\"toggleFiltersCollapsed()\"\n      >expand_less\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>add</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          >{{ layer.visible ? 'visibility' : 'visibility_off' }}\n        </mat-icon>\n      </button>\n    </div>\n  </mat-list-item>\n\n  <div #ogcFilters>\n    <div *ngIf=\"header\" #legend class=\"igo-layer-legend-container\">\n      <igo-layer-legend *ngIf=\"showLegend$ | async\" [layer]=\"layer\">\n      </igo-layer-legend>\n    </div>\n    <igo-ogc-filterable-form\n      [datasource]=\"datasource\"\n      [map]=\"map\"\n      [refreshFilters]=\"refreshFunc\"\n    >\n    </igo-ogc-filterable-form>\n\n    <section\n      *ngIf=\"hasSelector && filtersAreEditable\"\n      class=\"mat-typography advancedOgcFilters\"\n    >\n      <mat-divider></mat-divider>\n      <mat-checkbox\n        (change)=\"changeOgcFilterType($event)\"\n        [(ngModel)]=\"datasource.options.ogcFilters.advancedOgcFilters\"\n      >\n        {{ 'igo.geo.filter.advancedOgcFilters' | translate }}\n      </mat-checkbox>\n    </section>\n  </div>\n</div>\n", styles: [":host{overflow:hidden}:host .advancedOgcFilters{text-align:center;width:100%;display:inline-block}:host .mat-mdc-list-item{height:auto}:host .igo-layer-legend-container{padding-left:1.125em;width:calc(100% - 18px)}:host mat-icon.disabled{color:#00000061}:host .separate-item{border-bottom:4px solid darkgrey}:host ::ng-deep .mdc-list-item__start,:host ::ng-deep .mdc-list-item__end,:host ::ng-deep .mdc-list-item__content{pointer-events:auto}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i2$5.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i2$5.MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "component", type: i6$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i2$5.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "directive", type: i2$5.MatListItemMeta, selector: "[matListItemMeta]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: CollapseDirective, selector: "[igoCollapse]", inputs: ["target", "collapsed"], outputs: ["toggle"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: LayerLegendComponent, selector: "igo-layer-legend", inputs: ["updateLegendOnResolutionChange", "layer"] }, { kind: "component", type: OgcFilterableFormComponent, selector: "igo-ogc-filterable-form", inputs: ["datasource", "map", "refreshFilters"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i8.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: OgcFilterableItemComponent, decorators: [{
             type: Component,
@@ -25673,7 +25708,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                         FormsModule,
                         AsyncPipe,
                         TranslateModule
-                    ], providers: [OGCFilterService], template: "<div [ngClass]=\"{ 'separate-item': header === true }\">\n  <mat-list-item>\n    <mat-icon\n      *ngIf=\"header\"\n      class=\"igo-chevron\"\n      matListItemIcon\n      igoCollapse\n      [target]=\"ogcFilters\"\n      [collapsed]=\"filtersCollapsed\"\n      (click)=\"toggleFiltersCollapsed()\"\n      svgIcon=\"chevron-up\"\n    >\n    </mat-icon>\n    <span\n      *ngIf=\"header\"\n      matListItemTitle\n      [ngStyle]=\"{ cursor: filtersCollapsed ? 'default' : 'pointer' }\"\n      [matTooltip]=\"layer.title\"\n      matTooltipShowDelay=\"500\"\n      (click)=\"toggleLegendOnClick()\"\n    >\n      {{ layer.title }}\n    </span>\n    <div matListItemMeta>\n      <button\n        *ngIf=\"isAdvancedOgcFilters() && filtersAreEditable\"\n        [disabled]=\"addFilterDisabled()\"\n        mat-icon-button\n        tooltip-position=\"below\"\n        matTooltipShowDelay=\"500\"\n        [matTooltip]=\"'igo.geo.filter.addFilter' | translate\"\n        [color]=\"color\"\n        (click)=\"addFilterToSequence()\"\n      >\n        <mat-icon svgIcon=\"plus\"></mat-icon>\n      </button>\n      <button\n        *ngIf=\"header\"\n        mat-icon-button\n        [color]=\"layer.visible ? 'primary' : 'default'\"\n        collapsibleButton\n        tooltip-position=\"below\"\n        matTooltipShowDelay=\"500\"\n        [matTooltip]=\"\n          layer.visible\n            ? ('igo.geo.layer.hideLayer' | translate)\n            : ('igo.geo.layer.showLayer' | translate)\n        \"\n        (click)=\"layer.visible = !layer.visible\"\n      >\n        <mat-icon\n          [ngClass]=\"{ disabled: (inResolutionRange$ | async) === false }\"\n          [svgIcon]=\"layer.visible ? 'eye' : 'eye-off'\"\n        >\n        </mat-icon>\n      </button>\n    </div>\n  </mat-list-item>\n\n  <div #ogcFilters>\n    <div *ngIf=\"header\" #legend class=\"igo-layer-legend-container\">\n      <igo-layer-legend *ngIf=\"showLegend$ | async\" [layer]=\"layer\">\n      </igo-layer-legend>\n    </div>\n    <igo-ogc-filterable-form\n      [datasource]=\"datasource\"\n      [map]=\"map\"\n      [refreshFilters]=\"refreshFunc\"\n    >\n    </igo-ogc-filterable-form>\n\n    <section\n      *ngIf=\"hasSelector && filtersAreEditable\"\n      class=\"mat-typography advancedOgcFilters\"\n    >\n      <mat-divider></mat-divider>\n      <mat-checkbox\n        (change)=\"changeOgcFilterType($event)\"\n        [(ngModel)]=\"datasource.options.ogcFilters.advancedOgcFilters\"\n      >\n        {{ 'igo.geo.filter.advancedOgcFilters' | translate }}\n      </mat-checkbox>\n    </section>\n  </div>\n</div>\n", styles: [":host{overflow:hidden}:host .advancedOgcFilters{text-align:center;width:100%;display:inline-block}:host .mat-mdc-list-item{height:auto}:host .igo-layer-legend-container{padding-left:1.125em;width:calc(100% - 18px)}:host mat-icon.disabled{color:#00000061}:host .separate-item{border-bottom:4px solid darkgrey}:host ::ng-deep .mdc-list-item__start,:host ::ng-deep .mdc-list-item__end,:host ::ng-deep .mdc-list-item__content{pointer-events:auto}\n"] }]
+                    ], providers: [OGCFilterService], 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      >expand_less\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>add</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          >{{ layer.visible ? 'visibility' : 'visibility_off' }}\n        </mat-icon>\n      </button>\n    </div>\n  </mat-list-item>\n\n  <div #ogcFilters>\n    <div *ngIf=\"header\" #legend class=\"igo-layer-legend-container\">\n      <igo-layer-legend *ngIf=\"showLegend$ | async\" [layer]=\"layer\">\n      </igo-layer-legend>\n    </div>\n    <igo-ogc-filterable-form\n      [datasource]=\"datasource\"\n      [map]=\"map\"\n      [refreshFilters]=\"refreshFunc\"\n    >\n    </igo-ogc-filterable-form>\n\n    <section\n      *ngIf=\"hasSelector && filtersAreEditable\"\n      class=\"mat-typography advancedOgcFilters\"\n    >\n      <mat-divider></mat-divider>\n      <mat-checkbox\n        (change)=\"changeOgcFilterType($event)\"\n        [(ngModel)]=\"datasource.options.ogcFilters.advancedOgcFilters\"\n      >\n        {{ 'igo.geo.filter.advancedOgcFilters' | translate }}\n      </mat-checkbox>\n    </section>\n  </div>\n</div>\n", styles: [":host{overflow:hidden}:host .advancedOgcFilters{text-align:center;width:100%;display:inline-block}:host .mat-mdc-list-item{height:auto}:host .igo-layer-legend-container{padding-left:1.125em;width:calc(100% - 18px)}:host mat-icon.disabled{color:#00000061}:host .separate-item{border-bottom:4px solid darkgrey}:host ::ng-deep .mdc-list-item__start,:host ::ng-deep .mdc-list-item__end,:host ::ng-deep .mdc-list-item__content{pointer-events:auto}\n"] }]
         }], ctorParameters: () => [{ type: OGCFilterService }], propDecorators: { layer: [{
                 type: Input
             }], map: [{
@@ -25783,7 +25818,7 @@ class OgcFilterButtonComponent {
             .options;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: OgcFilterButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: OgcFilterButtonComponent, isStandalone: true, selector: "igo-ogc-filter-button", inputs: { layer: "layer", map: "map", color: "color", header: "header" }, ngImport: i0, template: "<button\n  *ngIf=\"\n    header &&\n    options.ogcFilters &&\n    options.ogcFilters.enabled &&\n    (options.ogcFilters.pushButtons ||\n      options.ogcFilters.checkboxes ||\n      options.ogcFilters.radioButtons ||\n      options.ogcFilters.select ||\n      options.ogcFilters.autocomplete ||\n      options.ogcFilters.editable)\n  \"\n  mat-icon-button\n  collapsibleButton\n  tooltip-position=\"below\"\n  matTooltipShowDelay=\"500\"\n  [matTooltip]=\"'igo.geo.filter.filterBy' | translate\"\n  [color]=\"color\"\n>\n  <mat-icon\n    aria-hidden=\"false\"\n    [matBadge]=\"badge\"\n    matBadgeColor=\"warn\"\n    matBadgeSize=\"medium\"\n    svgIcon=\"filter\"\n  ></mat-icon>\n</button>\n\n<div\n  #ogcFilter\n  class=\"igo-layer-actions-container\"\n  *ngIf=\"\n    options.ogcFilters &&\n    options.ogcFilters.enabled &&\n    (options.ogcFilters.pushButtons ||\n      options.ogcFilters.checkboxes ||\n      options.ogcFilters.radioButtons ||\n      options.ogcFilters.select ||\n      options.ogcFilters.autocomplete ||\n      options.ogcFilters.editable)\n  \"\n>\n  <igo-ogc-filterable-item\n    *ngIf=\"ogcFilterCollapse && options.ogcFilters.enabled\"\n    igoListItem\n    [header]=\"false\"\n    [map]=\"layer.map\"\n    [layer]=\"layer\"\n  >\n  </igo-ogc-filterable-item>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatBadgeModule }, { kind: "directive", type: i4$2.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: OgcFilterableItemComponent, selector: "igo-ogc-filterable-item", inputs: ["layer", "map", "header"] }, { kind: "directive", type: ListItemDirective, selector: "[igoListItem]", inputs: ["color", "focused", "selected", "disabled"], outputs: ["beforeSelect", "beforeFocus", "beforeUnselect", "beforeUnfocus", "beforeDisable", "beforeEnable", "focus", "unfocus", "select", "unselect", "disable", "enable"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: OgcFilterButtonComponent, isStandalone: true, selector: "igo-ogc-filter-button", inputs: { layer: "layer", map: "map", color: "color", header: "header" }, ngImport: i0, template: "<button\n  *ngIf=\"\n    header &&\n    options.ogcFilters &&\n    options.ogcFilters.enabled &&\n    (options.ogcFilters.pushButtons ||\n      options.ogcFilters.checkboxes ||\n      options.ogcFilters.radioButtons ||\n      options.ogcFilters.select ||\n      options.ogcFilters.autocomplete ||\n      options.ogcFilters.editable)\n  \"\n  mat-icon-button\n  collapsibleButton\n  tooltip-position=\"below\"\n  matTooltipShowDelay=\"500\"\n  [matTooltip]=\"'igo.geo.filter.filterBy' | translate\"\n  [color]=\"color\"\n>\n  <mat-icon\n    aria-hidden=\"false\"\n    [matBadge]=\"badge\"\n    matBadgeColor=\"warn\"\n    matBadgeSize=\"medium\"\n    >filter_alt</mat-icon\n  >\n</button>\n\n<div\n  #ogcFilter\n  class=\"igo-layer-actions-container\"\n  *ngIf=\"\n    options.ogcFilters &&\n    options.ogcFilters.enabled &&\n    (options.ogcFilters.pushButtons ||\n      options.ogcFilters.checkboxes ||\n      options.ogcFilters.radioButtons ||\n      options.ogcFilters.select ||\n      options.ogcFilters.autocomplete ||\n      options.ogcFilters.editable)\n  \"\n>\n  <igo-ogc-filterable-item\n    *ngIf=\"ogcFilterCollapse && options.ogcFilters.enabled\"\n    igoListItem\n    [header]=\"false\"\n    [map]=\"layer.map\"\n    [layer]=\"layer\"\n  >\n  </igo-ogc-filterable-item>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatBadgeModule }, { kind: "directive", type: i4$2.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: OgcFilterableItemComponent, selector: "igo-ogc-filterable-item", inputs: ["layer", "map", "header"] }, { kind: "directive", type: ListItemDirective, selector: "[igoListItem]", inputs: ["color", "focused", "selected", "disabled"], outputs: ["beforeSelect", "beforeFocus", "beforeUnselect", "beforeUnfocus", "beforeDisable", "beforeEnable", "focus", "unfocus", "select", "unselect", "disable", "enable"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: OgcFilterButtonComponent, decorators: [{
             type: Component,
@@ -25796,7 +25831,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                         OgcFilterableItemComponent,
                         ListItemDirective,
                         TranslateModule
-                    ], 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" }]
+                    ], 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    >filter_alt</mat-icon\n  >\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" }]
         }], ctorParameters: () => [], propDecorators: { layer: [{
                 type: Input
             }], map: [{
@@ -26523,7 +26558,7 @@ class StyleModalDrawingComponent {
         this.dialogRef.disableClose = false;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: StyleModalDrawingComponent, deps: [{ token: i1$5.MatDialogRef }, { token: i1$6.UntypedFormBuilder }, { token: DrawStyleService }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: StyleModalDrawingComponent, isStandalone: true, selector: "igo-style-modal-drawing", inputs: { confirmFlag: "confirmFlag" }, ngImport: i0, template: "<h2 mat-dialog-title>\n  {{ 'igo.geo.style.styleModal' | translate }}\n</h2>\n<div\n  class=\"edition-drawing\"\n  mat-dialog-content\n  [hidden]=\"data.features.length === 0\"\n>\n  <form class=\"igo-form\" [formGroup]=\"form\">\n    <div class=\"color-picker\">\n      <ng-container *ngIf=\"linestringOnly !== true\">\n        <span>\n          <mat-icon class=\"stroke-palette-icon\" svgIcon=\"square\"></mat-icon>\n          {{ 'igo.geo.style.fill' | translate }}\n        </span>\n\n        <igo-color-picker-form-field\n          formControlName=\"fill\"\n        ></igo-color-picker-form-field>\n      </ng-container>\n\n      <span>\n        <mat-icon class=\"stroke-palette-icon\" svgIcon=\"square-outline\">\n        </mat-icon>\n        {{ 'igo.geo.style.stroke' | translate }}\n      </span>\n\n      <igo-color-picker-form-field\n        formControlName=\"stroke\"\n      ></igo-color-picker-form-field>\n    </div>\n\n    <div class=\"igo-input-container\">\n      <mat-form-field class=\"igo-form-input-box\" subscriptSizing=\"dynamic\">\n        <mat-label>{{ 'igo.geo.style.fontSize' | translate }}</mat-label>\n        <input\n          matInput\n          #testFontSize\n          type=\"number\"\n          placeholder=\"10\"\n          min=\"10\"\n          onkeydown=\"return event.keyCode !== 69\"\n          [value]=\"getFeatureFontSize()\"\n          (input)=\"styleModalData.fontSize = $any($event.target).value\"\n        />\n        <span matTextSuffix>px</span>\n      </mat-form-field>\n      <mat-form-field class=\"igo-form-input-box\" subscriptSizing=\"dynamic\">\n        <mat-label>{{ 'igo.geo.style.fontStyle' | translate }}</mat-label>\n        <mat-select\n          #testFontStyle\n          [value]=\"getFeatureFontStyle()\"\n          (selectionChange)=\"styleModalData.fontStyle = $event.value\"\n        >\n          <mat-option\n            *ngFor=\"let fontSelect of allFontStyles\"\n            [value]=\"fontSelect\"\n          >\n            {{ fontSelect }}\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field class=\"igo-form-input-box\" subscriptSizing=\"dynamic\">\n        <mat-label>{{ 'igo.geo.style.offsetX' | translate }}</mat-label>\n        <input\n          matInput\n          #offsetXInput\n          type=\"number\"\n          onkeydown=\"return event.keyCode !== 69\"\n          [value]=\"getFeatureOffsetX()\"\n          (input)=\"styleModalData.offsetX = $any($event.target).value\"\n        />\n      </mat-form-field>\n      <mat-form-field class=\"igo-form-input-box\" subscriptSizing=\"dynamic\">\n        <mat-label>{{ 'igo.geo.style.offsetY' | translate }}</mat-label>\n        <input\n          matInput\n          #offsetYInput\n          type=\"number\"\n          onkeydown=\"return event.keyCode !== 69\"\n          [value]=\"getFeatureOffsetY()\"\n          (input)=\"styleModalData.offsetY = $any($event.target).value\"\n        />\n      </mat-form-field>\n    </div>\n  </form>\n</div>\n<div mat-dialog-actions>\n  <button mat-raised-button (click)=\"cancelDrawing()\">\n    {{ 'igo.geo.style.cancel' | translate }}\n  </button>\n  <button mat-raised-button color=\"primary\" (click)=\"confirm()\">OK</button>\n</div>\n", styles: [":host h2{margin:0 0 1px}:host form{padding-top:16px}:host .fill-field,:host .stroke-field{width:140px}:host .color-picker{display:grid;grid-template-columns:auto 1fr;align-items:center;grid-gap:16px;margin-bottom:16px}:host .color-picker span{display:flex;align-items:center}:host .color-picker span mat-icon{margin-right:8px}:host .box{width:25px;height:25px}:host .igo-input-container{display:grid;grid-template-columns:1fr 1fr;grid-gap:16px}:host .igo-form-input-box{width:150px}:host button{margin-right:5px}\n"], dependencies: [{ kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$6.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$6.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: ColorPickerFormFieldComponent, selector: "igo-color-picker-form-field", inputs: ["outputFormat"], outputs: ["colorChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i8$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6$4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: StyleModalDrawingComponent, isStandalone: true, selector: "igo-style-modal-drawing", inputs: { confirmFlag: "confirmFlag" }, ngImport: i0, template: "<h2 mat-dialog-title>\n  {{ 'igo.geo.style.styleModal' | translate }}\n</h2>\n<div\n  class=\"edition-drawing\"\n  mat-dialog-content\n  [hidden]=\"data.features.length === 0\"\n>\n  <form class=\"igo-form\" [formGroup]=\"form\">\n    <div class=\"color-picker\">\n      <ng-container *ngIf=\"linestringOnly !== true\">\n        <span>\n          <mat-icon class=\"stroke-palette-icon\">format_color_fill</mat-icon>\n          {{ 'igo.geo.style.fill' | translate }}\n        </span>\n\n        <igo-color-picker-form-field\n          formControlName=\"fill\"\n        ></igo-color-picker-form-field>\n      </ng-container>\n\n      <span>\n        <mat-icon class=\"stroke-palette-icon\">border_color </mat-icon>\n        {{ 'igo.geo.style.stroke' | translate }}\n      </span>\n\n      <igo-color-picker-form-field\n        formControlName=\"stroke\"\n      ></igo-color-picker-form-field>\n    </div>\n\n    <div class=\"igo-input-container\">\n      <mat-form-field class=\"igo-form-input-box\" subscriptSizing=\"dynamic\">\n        <mat-label>{{ 'igo.geo.style.fontSize' | translate }}</mat-label>\n        <input\n          matInput\n          #testFontSize\n          type=\"number\"\n          placeholder=\"10\"\n          min=\"10\"\n          onkeydown=\"return event.keyCode !== 69\"\n          [value]=\"getFeatureFontSize()\"\n          (input)=\"styleModalData.fontSize = $any($event.target).value\"\n        />\n        <span matTextSuffix>px</span>\n      </mat-form-field>\n      <mat-form-field class=\"igo-form-input-box\" subscriptSizing=\"dynamic\">\n        <mat-label>{{ 'igo.geo.style.fontStyle' | translate }}</mat-label>\n        <mat-select\n          #testFontStyle\n          [value]=\"getFeatureFontStyle()\"\n          (selectionChange)=\"styleModalData.fontStyle = $event.value\"\n        >\n          <mat-option\n            *ngFor=\"let fontSelect of allFontStyles\"\n            [value]=\"fontSelect\"\n          >\n            {{ fontSelect }}\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field class=\"igo-form-input-box\" subscriptSizing=\"dynamic\">\n        <mat-label>{{ 'igo.geo.style.offsetX' | translate }}</mat-label>\n        <input\n          matInput\n          #offsetXInput\n          type=\"number\"\n          onkeydown=\"return event.keyCode !== 69\"\n          [value]=\"getFeatureOffsetX()\"\n          (input)=\"styleModalData.offsetX = $any($event.target).value\"\n        />\n      </mat-form-field>\n      <mat-form-field class=\"igo-form-input-box\" subscriptSizing=\"dynamic\">\n        <mat-label>{{ 'igo.geo.style.offsetY' | translate }}</mat-label>\n        <input\n          matInput\n          #offsetYInput\n          type=\"number\"\n          onkeydown=\"return event.keyCode !== 69\"\n          [value]=\"getFeatureOffsetY()\"\n          (input)=\"styleModalData.offsetY = $any($event.target).value\"\n        />\n      </mat-form-field>\n    </div>\n  </form>\n</div>\n<div mat-dialog-actions>\n  <button mat-raised-button (click)=\"cancelDrawing()\">\n    {{ 'igo.geo.style.cancel' | translate }}\n  </button>\n  <button mat-raised-button color=\"primary\" (click)=\"confirm()\">OK</button>\n</div>\n", styles: [":host h2{margin:0 0 1px}:host form{padding-top:16px}:host .fill-field,:host .stroke-field{width:140px}:host .color-picker{display:grid;grid-template-columns:auto 1fr;align-items:center;grid-gap:16px;margin-bottom:16px}:host .color-picker span{display:flex;align-items:center}:host .color-picker span mat-icon{margin-right:8px}:host .box{width:25px;height:25px}:host .igo-input-container{display:grid;grid-template-columns:1fr 1fr;grid-gap:16px}:host .igo-form-input-box{width:150px}:host button{margin-right:5px}\n"], dependencies: [{ kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$6.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$6.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: ColorPickerFormFieldComponent, selector: "igo-color-picker-form-field", inputs: ["outputFormat"], outputs: ["colorChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i8$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6$4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: StyleModalDrawingComponent, decorators: [{
             type: Component,
@@ -26543,7 +26578,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                         MatDialogActions,
                         MatButtonModule,
                         TranslateModule
-                    ], template: "<h2 mat-dialog-title>\n  {{ 'igo.geo.style.styleModal' | translate }}\n</h2>\n<div\n  class=\"edition-drawing\"\n  mat-dialog-content\n  [hidden]=\"data.features.length === 0\"\n>\n  <form class=\"igo-form\" [formGroup]=\"form\">\n    <div class=\"color-picker\">\n      <ng-container *ngIf=\"linestringOnly !== true\">\n        <span>\n          <mat-icon class=\"stroke-palette-icon\" svgIcon=\"square\"></mat-icon>\n          {{ 'igo.geo.style.fill' | translate }}\n        </span>\n\n        <igo-color-picker-form-field\n          formControlName=\"fill\"\n        ></igo-color-picker-form-field>\n      </ng-container>\n\n      <span>\n        <mat-icon class=\"stroke-palette-icon\" svgIcon=\"square-outline\">\n        </mat-icon>\n        {{ 'igo.geo.style.stroke' | translate }}\n      </span>\n\n      <igo-color-picker-form-field\n        formControlName=\"stroke\"\n      ></igo-color-picker-form-field>\n    </div>\n\n    <div class=\"igo-input-container\">\n      <mat-form-field class=\"igo-form-input-box\" subscriptSizing=\"dynamic\">\n        <mat-label>{{ 'igo.geo.style.fontSize' | translate }}</mat-label>\n        <input\n          matInput\n          #testFontSize\n          type=\"number\"\n          placeholder=\"10\"\n          min=\"10\"\n          onkeydown=\"return event.keyCode !== 69\"\n          [value]=\"getFeatureFontSize()\"\n          (input)=\"styleModalData.fontSize = $any($event.target).value\"\n        />\n        <span matTextSuffix>px</span>\n      </mat-form-field>\n      <mat-form-field class=\"igo-form-input-box\" subscriptSizing=\"dynamic\">\n        <mat-label>{{ 'igo.geo.style.fontStyle' | translate }}</mat-label>\n        <mat-select\n          #testFontStyle\n          [value]=\"getFeatureFontStyle()\"\n          (selectionChange)=\"styleModalData.fontStyle = $event.value\"\n        >\n          <mat-option\n            *ngFor=\"let fontSelect of allFontStyles\"\n            [value]=\"fontSelect\"\n          >\n            {{ fontSelect }}\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field class=\"igo-form-input-box\" subscriptSizing=\"dynamic\">\n        <mat-label>{{ 'igo.geo.style.offsetX' | translate }}</mat-label>\n        <input\n          matInput\n          #offsetXInput\n          type=\"number\"\n          onkeydown=\"return event.keyCode !== 69\"\n          [value]=\"getFeatureOffsetX()\"\n          (input)=\"styleModalData.offsetX = $any($event.target).value\"\n        />\n      </mat-form-field>\n      <mat-form-field class=\"igo-form-input-box\" subscriptSizing=\"dynamic\">\n        <mat-label>{{ 'igo.geo.style.offsetY' | translate }}</mat-label>\n        <input\n          matInput\n          #offsetYInput\n          type=\"number\"\n          onkeydown=\"return event.keyCode !== 69\"\n          [value]=\"getFeatureOffsetY()\"\n          (input)=\"styleModalData.offsetY = $any($event.target).value\"\n        />\n      </mat-form-field>\n    </div>\n  </form>\n</div>\n<div mat-dialog-actions>\n  <button mat-raised-button (click)=\"cancelDrawing()\">\n    {{ 'igo.geo.style.cancel' | translate }}\n  </button>\n  <button mat-raised-button color=\"primary\" (click)=\"confirm()\">OK</button>\n</div>\n", styles: [":host h2{margin:0 0 1px}:host form{padding-top:16px}:host .fill-field,:host .stroke-field{width:140px}:host .color-picker{display:grid;grid-template-columns:auto 1fr;align-items:center;grid-gap:16px;margin-bottom:16px}:host .color-picker span{display:flex;align-items:center}:host .color-picker span mat-icon{margin-right:8px}:host .box{width:25px;height:25px}:host .igo-input-container{display:grid;grid-template-columns:1fr 1fr;grid-gap:16px}:host .igo-form-input-box{width:150px}:host button{margin-right:5px}\n"] }]
+                    ], template: "<h2 mat-dialog-title>\n  {{ 'igo.geo.style.styleModal' | translate }}\n</h2>\n<div\n  class=\"edition-drawing\"\n  mat-dialog-content\n  [hidden]=\"data.features.length === 0\"\n>\n  <form class=\"igo-form\" [formGroup]=\"form\">\n    <div class=\"color-picker\">\n      <ng-container *ngIf=\"linestringOnly !== true\">\n        <span>\n          <mat-icon class=\"stroke-palette-icon\">format_color_fill</mat-icon>\n          {{ 'igo.geo.style.fill' | translate }}\n        </span>\n\n        <igo-color-picker-form-field\n          formControlName=\"fill\"\n        ></igo-color-picker-form-field>\n      </ng-container>\n\n      <span>\n        <mat-icon class=\"stroke-palette-icon\">border_color </mat-icon>\n        {{ 'igo.geo.style.stroke' | translate }}\n      </span>\n\n      <igo-color-picker-form-field\n        formControlName=\"stroke\"\n      ></igo-color-picker-form-field>\n    </div>\n\n    <div class=\"igo-input-container\">\n      <mat-form-field class=\"igo-form-input-box\" subscriptSizing=\"dynamic\">\n        <mat-label>{{ 'igo.geo.style.fontSize' | translate }}</mat-label>\n        <input\n          matInput\n          #testFontSize\n          type=\"number\"\n          placeholder=\"10\"\n          min=\"10\"\n          onkeydown=\"return event.keyCode !== 69\"\n          [value]=\"getFeatureFontSize()\"\n          (input)=\"styleModalData.fontSize = $any($event.target).value\"\n        />\n        <span matTextSuffix>px</span>\n      </mat-form-field>\n      <mat-form-field class=\"igo-form-input-box\" subscriptSizing=\"dynamic\">\n        <mat-label>{{ 'igo.geo.style.fontStyle' | translate }}</mat-label>\n        <mat-select\n          #testFontStyle\n          [value]=\"getFeatureFontStyle()\"\n          (selectionChange)=\"styleModalData.fontStyle = $event.value\"\n        >\n          <mat-option\n            *ngFor=\"let fontSelect of allFontStyles\"\n            [value]=\"fontSelect\"\n          >\n            {{ fontSelect }}\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field class=\"igo-form-input-box\" subscriptSizing=\"dynamic\">\n        <mat-label>{{ 'igo.geo.style.offsetX' | translate }}</mat-label>\n        <input\n          matInput\n          #offsetXInput\n          type=\"number\"\n          onkeydown=\"return event.keyCode !== 69\"\n          [value]=\"getFeatureOffsetX()\"\n          (input)=\"styleModalData.offsetX = $any($event.target).value\"\n        />\n      </mat-form-field>\n      <mat-form-field class=\"igo-form-input-box\" subscriptSizing=\"dynamic\">\n        <mat-label>{{ 'igo.geo.style.offsetY' | translate }}</mat-label>\n        <input\n          matInput\n          #offsetYInput\n          type=\"number\"\n          onkeydown=\"return event.keyCode !== 69\"\n          [value]=\"getFeatureOffsetY()\"\n          (input)=\"styleModalData.offsetY = $any($event.target).value\"\n        />\n      </mat-form-field>\n    </div>\n  </form>\n</div>\n<div mat-dialog-actions>\n  <button mat-raised-button (click)=\"cancelDrawing()\">\n    {{ 'igo.geo.style.cancel' | translate }}\n  </button>\n  <button mat-raised-button color=\"primary\" (click)=\"confirm()\">OK</button>\n</div>\n", styles: [":host h2{margin:0 0 1px}:host form{padding-top:16px}:host .fill-field,:host .stroke-field{width:140px}:host .color-picker{display:grid;grid-template-columns:auto 1fr;align-items:center;grid-gap:16px;margin-bottom:16px}:host .color-picker span{display:flex;align-items:center}:host .color-picker span mat-icon{margin-right:8px}:host .box{width:25px;height:25px}:host .igo-input-container{display:grid;grid-template-columns:1fr 1fr;grid-gap:16px}:host .igo-form-input-box{width:150px}:host button{margin-right:5px}\n"] }]
         }], ctorParameters: () => [{ type: i1$5.MatDialogRef }, { type: i1$6.UntypedFormBuilder }, { type: DrawStyleService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
@@ -26968,8 +27003,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
             }] } });
 class DrawShorcutsComponent {
+    svgIcon = KEYBOARD_ESC_ICON;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: DrawShorcutsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: DrawShorcutsComponent, isStandalone: true, selector: "igo-draw-shorcuts", ngImport: i0, template: "<mat-dialog-content>\n  <div>\n    <span class=\"shortcut mat-typography\">\n      <mat-icon class=\"shortcut-icon\" svgIcon=\"keyboard-return\"></mat-icon\n      >{{ 'igo.geo.draw.finish' | translate }}</span\n    >\n  </div>\n  <div>\n    <span class=\"shortcut mat-typography\">\n      <mat-icon class=\"shortcut-icon\" svgIcon=\"backspace-outline\"></mat-icon\n      >{{ 'igo.geo.draw.undo' | translate }}</span\n    >\n  </div>\n  <div>\n    <span class=\"shortcut mat-typography\">\n      <mat-icon class=\"shortcut-icon\" svgIcon=\"keyboard-esc\"></mat-icon\n      >{{ 'igo.geo.draw.abort' | translate }}</span\n    >\n  </div>\n  <div>\n    <span class=\"shortcut mat-typography\">\n      <mat-icon class=\"shortcut-icon\" svgIcon=\"keyboard-space\"></mat-icon\n      >{{ 'igo.geo.draw.move' | translate }}</span\n    >\n  </div>\n</mat-dialog-content>\n<mat-dialog-actions class=\"shortcuts-close\">\n  <button mat-raised-button mat-dialog-close color=\"primary\">OK</button>\n</mat-dialog-actions>\n", styles: [".shortcut{display:flex;align-items:center}.shortcut-icon{margin-right:10px}.shortcuts-close{display:flex;justify-content:center}\n"], dependencies: [{ kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: DrawShorcutsComponent, isStandalone: true, selector: "igo-draw-shorcuts", ngImport: i0, template: "<mat-dialog-content>\n  <div>\n    <span class=\"shortcut mat-typography\">\n      <mat-icon class=\"shortcut-icon\">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\">keyboard_backspace</mat-icon\n      >{{ 'igo.geo.draw.undo' | translate }}</span\n    >\n  </div>\n  <div>\n    <span class=\"shortcut mat-typography\">\n      <igo-icon [icon]=\"svgIcon\" />\n      {{ 'igo.geo.draw.abort' | translate }}\n    </span>\n  </div>\n  <div>\n    <span class=\"shortcut mat-typography\">\n      <mat-icon class=\"shortcut-icon\">space_bar</mat-icon\n      >{{ 'igo.geo.draw.move' | translate }}</span\n    >\n  </div>\n</mat-dialog-content>\n<mat-dialog-actions class=\"shortcuts-close\">\n  <button mat-raised-button mat-dialog-close color=\"primary\">OK</button>\n</mat-dialog-actions>\n", styles: [".shortcut{display:flex;align-items:center}.shortcut-icon{margin-right:10px}.shortcuts-close{display:flex;justify-content:center}\n"], dependencies: [{ kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "component", type: IgoIconComponent, selector: "igo-icon", inputs: ["icon"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: DrawShorcutsComponent, decorators: [{
             type: Component,
@@ -26979,8 +27015,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                         MatDialogActions,
                         MatButtonModule,
                         MatDialogClose,
-                        TranslateModule
-                    ], 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"] }]
+                        TranslateModule,
+                        IgoIconComponent
+                    ], template: "<mat-dialog-content>\n  <div>\n    <span class=\"shortcut mat-typography\">\n      <mat-icon class=\"shortcut-icon\">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\">keyboard_backspace</mat-icon\n      >{{ 'igo.geo.draw.undo' | translate }}</span\n    >\n  </div>\n  <div>\n    <span class=\"shortcut mat-typography\">\n      <igo-icon [icon]=\"svgIcon\" />\n      {{ 'igo.geo.draw.abort' | translate }}\n    </span>\n  </div>\n  <div>\n    <span class=\"shortcut mat-typography\">\n      <mat-icon class=\"shortcut-icon\">space_bar</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"] }]
         }] });
 class DrawComponent {
@@ -27089,7 +27126,7 @@ class DrawComponent {
                         return [
                             {
                                 editMode: false,
-                                icon: 'pencil',
+                                icon: 'edit',
                                 color: 'primary',
                                 click: () => {
                                     this.editLabelDrawing(feature);
@@ -27974,7 +28011,7 @@ class DrawComponent {
         return Number(length / (2 * Math.PI));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: DrawComponent, deps: [{ token: i1$2.LanguageService }, { token: i1$6.UntypedFormBuilder }, { token: DrawStyleService }, { token: i1$5.MatDialog }, { token: DrawIconService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: DrawComponent, isStandalone: true, selector: "igo-draw", inputs: { map: "map", stores: "stores", drawControls: "drawControls", activeDrawingLayer: "activeDrawingLayer" }, outputs: { activeLayerChange: "activeLayerChange", drawControlsEvent: "drawControlsEvent", layersIDEvent: "layersIDEvent", fillColor: "fillColor", strokeColor: "strokeColor", strokeWidth: "strokeWidth", fontSize: "fontSize", fontStyle: "fontStyle" }, viewQueries: [{ propertyName: "select", first: true, predicate: ["selectedLayer"], descendants: true }], ngImport: i0, template: "<div>\n  <div class=\"geometry-type-toggle mat-typography\">\n    <mat-button-toggle-group\n      (change)=\"onGeometryTypeChange($event.value)\"\n      [value]=\"geometryType.Point\"\n    >\n      <mat-button-toggle [value]=\"geometryType.Point\">\n        {{ 'igo.geo.draw.' + geometryType.Point | translate }}\n      </mat-button-toggle>\n\n      <mat-button-toggle [value]=\"geometryType.LineString\">\n        {{ 'igo.geo.draw.' + geometryType.LineString | translate }}\n      </mat-button-toggle>\n\n      <mat-button-toggle [value]=\"geometryType.Polygon\">\n        {{ 'igo.geo.draw.' + geometryType.Polygon | translate }}\n      </mat-button-toggle>\n\n      <mat-button-toggle [value]=\"geometryType.Circle\">\n        {{ 'igo.geo.draw.' + geometryType.Circle | translate }}\n      </mat-button-toggle>\n    </mat-button-toggle-group>\n  </div>\n\n  <div class=\"draw-options mat-typography\">\n    <mat-slide-toggle\n      [disabled]=\"drawControlIsDisabled\"\n      [checked]=\"drawControlIsActive\"\n      [labelPosition]=\"'before'\"\n      (change)=\"onToggleDrawControl($event.checked)\"\n    >\n      {{ 'igo.geo.draw.drawControl' | translate }}\n    </mat-slide-toggle>\n\n    <mat-slide-toggle\n      [checked]=\"labelsAreShown\"\n      [labelPosition]=\"'before'\"\n      (change)=\"onToggleLabels()\"\n    >\n      {{ 'igo.geo.draw.toggleMapTooltips' | translate }}\n    </mat-slide-toggle>\n\n    <mat-slide-toggle\n      *ngIf=\"!isPoint()\"\n      [checked]=\"freehandMode\"\n      [labelPosition]=\"'before'\"\n      (change)=\"onToggleFreehandMode($event)\"\n    >\n      {{ 'igo.geo.draw.freehandMode' | translate }}\n    </mat-slide-toggle>\n\n    <div class=\"radius-unit\" *ngIf=\"isCircle()\">\n      <mat-form-field class=\"radius\">\n        <input\n          matInput\n          type=\"number\"\n          min=\"0\"\n          placeholder=\"{{ 'igo.geo.spatialFilter.radius' | translate }}\"\n          [formControl]=\"radiusFormControl\"\n          [readonly]=\"this.freehandMode\"\n        />\n      </mat-form-field>\n\n      <mat-form-field class=\"unit-field\">\n        <mat-select\n          [value]=\"measureUnit\"\n          (selectionChange)=\"onMeasureUnitChange($event.value)\"\n        >\n          <mat-option\n            *ngFor=\"let measureUnit of measureUnits\"\n            [value]=\"measureUnit\"\n          >\n            {{ 'igo.geo.measure.' + measureUnit | translate }}\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n    </div>\n  </div>\n\n  <mat-divider></mat-divider>\n\n  <div class=\"layer-select-container\">\n    <mat-form-field class=\"layer-select\" subscriptSizing=\"dynamic\">\n      <mat-label>{{ 'igo.geo.draw.layer.title' | translate }}</mat-label>\n      <mat-select\n        #selectedLayer\n        (selectionChange)=\"onLayerChange(selectedLayer.value)\"\n        [value]=\"updateActiveLayer()\"\n      >\n        <mat-option *ngFor=\"let layer of allLayers\" [value]=\"layer\">\n          {{ layer.title }}\n        </mat-option>\n        <mat-option id=\"createNewLayer\">\n          {{ 'igo.geo.draw.layer.createNewLayer' | translate }}\n        </mat-option>\n      </mat-select>\n    </mat-form-field>\n    <button\n      *ngIf=\"activeDrawingLayer\"\n      mat-icon-button\n      [color]=\"activeDrawingLayer.visible ? 'primary' : 'default'\"\n      collapsibleButton\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"\n        activeDrawingLayer.visible\n          ? ('igo.geo.layer.hideLayer' | translate)\n          : ('igo.geo.layer.showLayer' | translate)\n      \"\n      (click)=\"activeDrawingLayer.visible = !activeDrawingLayer.visible\"\n    >\n      <mat-icon [svgIcon]=\"activeDrawingLayer.visible ? 'eye' : 'eye-off'\">\n      </mat-icon>\n    </button>\n  </div>\n  <mat-divider></mat-divider>\n  <div>\n    <button\n      *ngIf=\"activeStore.count$.getValue() > 0\"\n      class=\"deleteBtn\"\n      mat-icon-button\n      color=\"warn\"\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"'igo.geo.draw.delete' | translate\"\n      [disabled]=\"(selectedFeatures$ | async).length === 0\"\n      (click)=\"deleteDrawings()\"\n    >\n      <mat-icon svgIcon=\"delete\"></mat-icon>\n    </button>\n\n    <div>\n      <igo-entity-table\n        #table\n        class=\"table-compact\"\n        [store]=\"activeStore\"\n        [template]=\"tableTemplate\"\n      >\n      </igo-entity-table>\n    </div>\n  </div>\n\n  <div class=\"icon-options\">\n    <mat-form-field *ngIf=\"icons.length >= 1\">\n      <mat-label>{{ 'igo.geo.draw.icon' | translate }}</mat-label>\n      <mat-select>\n        <mat-select-trigger>\n          <div *ngIf=\"icon\" class=\"box\">\n            <img src=\"{{ icon }}\" />\n          </div>\n        </mat-select-trigger>\n        <mat-option value=\"\" (click)=\"onIconChange()\">{{\n          'igo.geo.draw.noIcon' | translate\n        }}</mat-option>\n        <mat-option\n          *ngFor=\"let icon_html of icons\"\n          [value]=\"icon_html\"\n          (click)=\"onIconChange(icon_html)\"\n        >\n          <div class=\"box\">\n            <img src=\"{{ icon_html }}\" />\n          </div>\n        </mat-option>\n      </mat-select>\n    </mat-form-field>\n  </div>\n\n  <div class=\"actions-container\">\n    <button\n      mat-icon-button\n      color=\"accent\"\n      disableRipple=\"true\"\n      (click)=\"openShorcutsDialog()\"\n    >\n      <mat-icon\n        class=\"shortcuts-icon\"\n        svgIcon=\"keyboard-outline\"\n        tooltip-position=\"below\"\n        matTooltipShowDelay=\"500\"\n        [matTooltip]=\"'igo.geo.draw.shortcuts' | translate\"\n      >\n      </mat-icon>\n    </button>\n\n    <button\n      *ngIf=\"selectedFeatures$.value.length\"\n      mat-raised-button\n      color=\"primary\"\n      (click)=\"openStyleModalDialog()\"\n      [matTooltip]=\"'igo.geo.style.styleModalTooltipSelected' | translate\"\n    >\n      {{ 'igo.geo.style.styleModal' | translate }}\n      <mat-icon\n        aria-hidden=\"false\"\n        iconPositionEnd\n        class=\"style-icon\"\n        svgIcon=\"palette\"\n        [matBadge]=\"selectedFeatures$.value.length\"\n        matBadgeColor=\"warn\"\n        matBadgeSize=\"medium\"\n      >\n      </mat-icon>\n    </button>\n  </div>\n</div>\n", styles: [":host .geometry-type-toggle{padding:10px;text-align:center}:host .geometry-type-toggle mat-button-toggle-group{width:100%}:host .geometry-type-toggle mat-button-toggle-group mat-button-toggle{width:25%}:host .draw-options mat-slide-toggle{width:100%;padding:10px}:host .draw-options mat-slide-toggle ::ng-deep .mdc-form-field{width:100%}:host .draw-options mat-slide-toggle ::ng-deep .mdc-label{margin-left:0;width:calc(100% - 60px)}:host .icon-options{margin:5px 5px 0}:host .deleteBtn{margin-left:16px}:host .edition-drawing{padding:10px 0}:host img{width:100%;height:100%}:host .deleteBtn{margin-left:12px}:host .storeTable{height:auto!important}:host .layer-select{flex:1;margin-right:8px}:host .input-button-container{padding:10px}:host .input-button-container mat-form-field{width:25%}:host .input-button-container button{left:8px;bottom:10px}:host .radius{flex:2}:host .unit-field{flex:1;margin-left:8px}:host .radius-unit{display:flex;width:100%;padding:4px 8px}:host ::ng-deep igo-entity-table td:last-child{text-align:right!important}:host ::ng-deep igo-entity-table td:last-child button{margin:0%!important}:host .layer-select-container{margin:16px 8px}:host .actions-container,:host .layer-select-container{display:flex;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i4$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i4$1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i5$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$6.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$6.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i8$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i8$1.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i6$4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i6$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: EntityTableComponent, selector: "igo-entity-table", inputs: ["store", "paginator", "template", "scrollBehavior", "sortNullsFirst", "withPaginator", "paginatorOptions"], outputs: ["entityClick", "entitySelectChange", "entitySortChange"] }, { kind: "ngmodule", type: MatBadgeModule }, { kind: "directive", type: i4$2.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], animations: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: DrawComponent, isStandalone: true, selector: "igo-draw", inputs: { map: "map", stores: "stores", drawControls: "drawControls", activeDrawingLayer: "activeDrawingLayer" }, outputs: { activeLayerChange: "activeLayerChange", drawControlsEvent: "drawControlsEvent", layersIDEvent: "layersIDEvent", fillColor: "fillColor", strokeColor: "strokeColor", strokeWidth: "strokeWidth", fontSize: "fontSize", fontStyle: "fontStyle" }, viewQueries: [{ propertyName: "select", first: true, predicate: ["selectedLayer"], descendants: true }], ngImport: i0, template: "<div>\n  <div class=\"geometry-type-toggle mat-typography\">\n    <mat-button-toggle-group\n      (change)=\"onGeometryTypeChange($event.value)\"\n      [value]=\"geometryType.Point\"\n    >\n      <mat-button-toggle [value]=\"geometryType.Point\">\n        {{ 'igo.geo.draw.' + geometryType.Point | translate }}\n      </mat-button-toggle>\n\n      <mat-button-toggle [value]=\"geometryType.LineString\">\n        {{ 'igo.geo.draw.' + geometryType.LineString | translate }}\n      </mat-button-toggle>\n\n      <mat-button-toggle [value]=\"geometryType.Polygon\">\n        {{ 'igo.geo.draw.' + geometryType.Polygon | translate }}\n      </mat-button-toggle>\n\n      <mat-button-toggle [value]=\"geometryType.Circle\">\n        {{ 'igo.geo.draw.' + geometryType.Circle | translate }}\n      </mat-button-toggle>\n    </mat-button-toggle-group>\n  </div>\n\n  <div class=\"draw-options mat-typography\">\n    <mat-slide-toggle\n      [disabled]=\"drawControlIsDisabled\"\n      [checked]=\"drawControlIsActive\"\n      [labelPosition]=\"'before'\"\n      (change)=\"onToggleDrawControl($event.checked)\"\n    >\n      {{ 'igo.geo.draw.drawControl' | translate }}\n    </mat-slide-toggle>\n\n    <mat-slide-toggle\n      [checked]=\"labelsAreShown\"\n      [labelPosition]=\"'before'\"\n      (change)=\"onToggleLabels()\"\n    >\n      {{ 'igo.geo.draw.toggleMapTooltips' | translate }}\n    </mat-slide-toggle>\n\n    <mat-slide-toggle\n      *ngIf=\"!isPoint()\"\n      [checked]=\"freehandMode\"\n      [labelPosition]=\"'before'\"\n      (change)=\"onToggleFreehandMode($event)\"\n    >\n      {{ 'igo.geo.draw.freehandMode' | translate }}\n    </mat-slide-toggle>\n\n    <div class=\"radius-unit\" *ngIf=\"isCircle()\">\n      <mat-form-field class=\"radius\">\n        <input\n          matInput\n          type=\"number\"\n          min=\"0\"\n          placeholder=\"{{ 'igo.geo.spatialFilter.radius' | translate }}\"\n          [formControl]=\"radiusFormControl\"\n          [readonly]=\"this.freehandMode\"\n        />\n      </mat-form-field>\n\n      <mat-form-field class=\"unit-field\">\n        <mat-select\n          [value]=\"measureUnit\"\n          (selectionChange)=\"onMeasureUnitChange($event.value)\"\n        >\n          <mat-option\n            *ngFor=\"let measureUnit of measureUnits\"\n            [value]=\"measureUnit\"\n          >\n            {{ 'igo.geo.measure.' + measureUnit | translate }}\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n    </div>\n  </div>\n\n  <mat-divider></mat-divider>\n\n  <div class=\"layer-select-container\">\n    <mat-form-field class=\"layer-select\" subscriptSizing=\"dynamic\">\n      <mat-label>{{ 'igo.geo.draw.layer.title' | translate }}</mat-label>\n      <mat-select\n        #selectedLayer\n        (selectionChange)=\"onLayerChange(selectedLayer.value)\"\n        [value]=\"updateActiveLayer()\"\n      >\n        <mat-option *ngFor=\"let layer of allLayers\" [value]=\"layer\">\n          {{ layer.title }}\n        </mat-option>\n        <mat-option id=\"createNewLayer\">\n          {{ 'igo.geo.draw.layer.createNewLayer' | translate }}\n        </mat-option>\n      </mat-select>\n    </mat-form-field>\n    <button\n      *ngIf=\"activeDrawingLayer\"\n      mat-icon-button\n      [color]=\"activeDrawingLayer.visible ? 'primary' : 'default'\"\n      collapsibleButton\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"\n        activeDrawingLayer.visible\n          ? ('igo.geo.layer.hideLayer' | translate)\n          : ('igo.geo.layer.showLayer' | translate)\n      \"\n      (click)=\"activeDrawingLayer.visible = !activeDrawingLayer.visible\"\n    >\n      <mat-icon>\n        {{ activeDrawingLayer.visible ? 'visibility' : 'visibility_off' }}\n      </mat-icon>\n    </button>\n  </div>\n  <mat-divider></mat-divider>\n  <div>\n    <button\n      *ngIf=\"activeStore.count$.getValue() > 0\"\n      class=\"deleteBtn\"\n      mat-icon-button\n      color=\"warn\"\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"'igo.geo.draw.delete' | translate\"\n      [disabled]=\"(selectedFeatures$ | async).length === 0\"\n      (click)=\"deleteDrawings()\"\n    >\n      <mat-icon>delete</mat-icon>\n    </button>\n\n    <div>\n      <igo-entity-table\n        #table\n        class=\"table-compact\"\n        [store]=\"activeStore\"\n        [template]=\"tableTemplate\"\n      >\n      </igo-entity-table>\n    </div>\n  </div>\n\n  <div class=\"icon-options\">\n    <mat-form-field *ngIf=\"icons.length >= 1\">\n      <mat-label>{{ 'igo.geo.draw.icon' | translate }}</mat-label>\n      <mat-select>\n        <mat-select-trigger>\n          <div *ngIf=\"icon\" class=\"box\">\n            <img src=\"{{ icon }}\" />\n          </div>\n        </mat-select-trigger>\n        <mat-option value=\"\" (click)=\"onIconChange()\">{{\n          'igo.geo.draw.noIcon' | translate\n        }}</mat-option>\n        <mat-option\n          *ngFor=\"let icon_html of icons\"\n          [value]=\"icon_html\"\n          (click)=\"onIconChange(icon_html)\"\n        >\n          <div class=\"box\">\n            <img src=\"{{ icon_html }}\" />\n          </div>\n        </mat-option>\n      </mat-select>\n    </mat-form-field>\n  </div>\n\n  <div class=\"actions-container\">\n    <button\n      mat-icon-button\n      color=\"accent\"\n      disableRipple=\"true\"\n      (click)=\"openShorcutsDialog()\"\n    >\n      <mat-icon\n        class=\"shortcuts-icon\"\n        tooltip-position=\"below\"\n        matTooltipShowDelay=\"500\"\n        [matTooltip]=\"'igo.geo.draw.shortcuts' | translate\"\n        >keyboard\n      </mat-icon>\n    </button>\n\n    <button\n      *ngIf=\"selectedFeatures$.value.length\"\n      mat-raised-button\n      color=\"primary\"\n      (click)=\"openStyleModalDialog()\"\n      [matTooltip]=\"'igo.geo.style.styleModalTooltipSelected' | translate\"\n    >\n      {{ 'igo.geo.style.styleModal' | translate }}\n      <mat-icon\n        aria-hidden=\"false\"\n        iconPositionEnd\n        class=\"style-icon\"\n        [matBadge]=\"selectedFeatures$.value.length\"\n        matBadgeColor=\"warn\"\n        matBadgeSize=\"medium\"\n        >palette\n      </mat-icon>\n    </button>\n  </div>\n</div>\n", styles: [":host .geometry-type-toggle{padding:10px;text-align:center}:host .geometry-type-toggle mat-button-toggle-group{width:100%}:host .geometry-type-toggle mat-button-toggle-group mat-button-toggle{width:25%}:host .draw-options mat-slide-toggle{width:100%;padding:10px}:host .draw-options mat-slide-toggle ::ng-deep .mdc-form-field{width:100%}:host .draw-options mat-slide-toggle ::ng-deep .mdc-label{margin-left:0;width:calc(100% - 60px)}:host .icon-options{margin:5px 5px 0}:host .deleteBtn{margin-left:16px}:host .edition-drawing{padding:10px 0}:host img{width:100%;height:100%}:host .deleteBtn{margin-left:12px}:host .storeTable{height:auto!important}:host .layer-select{flex:1;margin-right:8px}:host .input-button-container{padding:10px}:host .input-button-container mat-form-field{width:25%}:host .input-button-container button{left:8px;bottom:10px}:host .radius{flex:2}:host .unit-field{flex:1;margin-left:8px}:host .radius-unit{display:flex;width:100%;padding:4px 8px}:host ::ng-deep igo-entity-table td:last-child{text-align:right!important}:host ::ng-deep igo-entity-table td:last-child button{margin:0%!important}:host .layer-select-container{margin:16px 8px}:host .actions-container,:host .layer-select-container{display:flex;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i4$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i4$1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i5$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$6.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$6.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i8$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i8$1.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i6$4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i6$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: EntityTableComponent, selector: "igo-entity-table", inputs: ["store", "paginator", "template", "scrollBehavior", "sortNullsFirst", "withPaginator", "paginatorOptions"], outputs: ["entityClick", "entitySelectChange", "entitySortChange"] }, { kind: "ngmodule", type: MatBadgeModule }, { kind: "directive", type: i4$2.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], animations: [
             trigger('openClose', [
                 state('open', style({
                     opacity: 1
@@ -28019,7 +28056,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                         MatBadgeModule,
                         AsyncPipe,
                         TranslateModule
-                    ], template: "<div>\n  <div class=\"geometry-type-toggle mat-typography\">\n    <mat-button-toggle-group\n      (change)=\"onGeometryTypeChange($event.value)\"\n      [value]=\"geometryType.Point\"\n    >\n      <mat-button-toggle [value]=\"geometryType.Point\">\n        {{ 'igo.geo.draw.' + geometryType.Point | translate }}\n      </mat-button-toggle>\n\n      <mat-button-toggle [value]=\"geometryType.LineString\">\n        {{ 'igo.geo.draw.' + geometryType.LineString | translate }}\n      </mat-button-toggle>\n\n      <mat-button-toggle [value]=\"geometryType.Polygon\">\n        {{ 'igo.geo.draw.' + geometryType.Polygon | translate }}\n      </mat-button-toggle>\n\n      <mat-button-toggle [value]=\"geometryType.Circle\">\n        {{ 'igo.geo.draw.' + geometryType.Circle | translate }}\n      </mat-button-toggle>\n    </mat-button-toggle-group>\n  </div>\n\n  <div class=\"draw-options mat-typography\">\n    <mat-slide-toggle\n      [disabled]=\"drawControlIsDisabled\"\n      [checked]=\"drawControlIsActive\"\n      [labelPosition]=\"'before'\"\n      (change)=\"onToggleDrawControl($event.checked)\"\n    >\n      {{ 'igo.geo.draw.drawControl' | translate }}\n    </mat-slide-toggle>\n\n    <mat-slide-toggle\n      [checked]=\"labelsAreShown\"\n      [labelPosition]=\"'before'\"\n      (change)=\"onToggleLabels()\"\n    >\n      {{ 'igo.geo.draw.toggleMapTooltips' | translate }}\n    </mat-slide-toggle>\n\n    <mat-slide-toggle\n      *ngIf=\"!isPoint()\"\n      [checked]=\"freehandMode\"\n      [labelPosition]=\"'before'\"\n      (change)=\"onToggleFreehandMode($event)\"\n    >\n      {{ 'igo.geo.draw.freehandMode' | translate }}\n    </mat-slide-toggle>\n\n    <div class=\"radius-unit\" *ngIf=\"isCircle()\">\n      <mat-form-field class=\"radius\">\n        <input\n          matInput\n          type=\"number\"\n          min=\"0\"\n          placeholder=\"{{ 'igo.geo.spatialFilter.radius' | translate }}\"\n          [formControl]=\"radiusFormControl\"\n          [readonly]=\"this.freehandMode\"\n        />\n      </mat-form-field>\n\n      <mat-form-field class=\"unit-field\">\n        <mat-select\n          [value]=\"measureUnit\"\n          (selectionChange)=\"onMeasureUnitChange($event.value)\"\n        >\n          <mat-option\n            *ngFor=\"let measureUnit of measureUnits\"\n            [value]=\"measureUnit\"\n          >\n            {{ 'igo.geo.measure.' + measureUnit | translate }}\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n    </div>\n  </div>\n\n  <mat-divider></mat-divider>\n\n  <div class=\"layer-select-container\">\n    <mat-form-field class=\"layer-select\" subscriptSizing=\"dynamic\">\n      <mat-label>{{ 'igo.geo.draw.layer.title' | translate }}</mat-label>\n      <mat-select\n        #selectedLayer\n        (selectionChange)=\"onLayerChange(selectedLayer.value)\"\n        [value]=\"updateActiveLayer()\"\n      >\n        <mat-option *ngFor=\"let layer of allLayers\" [value]=\"layer\">\n          {{ layer.title }}\n        </mat-option>\n        <mat-option id=\"createNewLayer\">\n          {{ 'igo.geo.draw.layer.createNewLayer' | translate }}\n        </mat-option>\n      </mat-select>\n    </mat-form-field>\n    <button\n      *ngIf=\"activeDrawingLayer\"\n      mat-icon-button\n      [color]=\"activeDrawingLayer.visible ? 'primary' : 'default'\"\n      collapsibleButton\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"\n        activeDrawingLayer.visible\n          ? ('igo.geo.layer.hideLayer' | translate)\n          : ('igo.geo.layer.showLayer' | translate)\n      \"\n      (click)=\"activeDrawingLayer.visible = !activeDrawingLayer.visible\"\n    >\n      <mat-icon [svgIcon]=\"activeDrawingLayer.visible ? 'eye' : 'eye-off'\">\n      </mat-icon>\n    </button>\n  </div>\n  <mat-divider></mat-divider>\n  <div>\n    <button\n      *ngIf=\"activeStore.count$.getValue() > 0\"\n      class=\"deleteBtn\"\n      mat-icon-button\n      color=\"warn\"\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"'igo.geo.draw.delete' | translate\"\n      [disabled]=\"(selectedFeatures$ | async).length === 0\"\n      (click)=\"deleteDrawings()\"\n    >\n      <mat-icon svgIcon=\"delete\"></mat-icon>\n    </button>\n\n    <div>\n      <igo-entity-table\n        #table\n        class=\"table-compact\"\n        [store]=\"activeStore\"\n        [template]=\"tableTemplate\"\n      >\n      </igo-entity-table>\n    </div>\n  </div>\n\n  <div class=\"icon-options\">\n    <mat-form-field *ngIf=\"icons.length >= 1\">\n      <mat-label>{{ 'igo.geo.draw.icon' | translate }}</mat-label>\n      <mat-select>\n        <mat-select-trigger>\n          <div *ngIf=\"icon\" class=\"box\">\n            <img src=\"{{ icon }}\" />\n          </div>\n        </mat-select-trigger>\n        <mat-option value=\"\" (click)=\"onIconChange()\">{{\n          'igo.geo.draw.noIcon' | translate\n        }}</mat-option>\n        <mat-option\n          *ngFor=\"let icon_html of icons\"\n          [value]=\"icon_html\"\n          (click)=\"onIconChange(icon_html)\"\n        >\n          <div class=\"box\">\n            <img src=\"{{ icon_html }}\" />\n          </div>\n        </mat-option>\n      </mat-select>\n    </mat-form-field>\n  </div>\n\n  <div class=\"actions-container\">\n    <button\n      mat-icon-button\n      color=\"accent\"\n      disableRipple=\"true\"\n      (click)=\"openShorcutsDialog()\"\n    >\n      <mat-icon\n        class=\"shortcuts-icon\"\n        svgIcon=\"keyboard-outline\"\n        tooltip-position=\"below\"\n        matTooltipShowDelay=\"500\"\n        [matTooltip]=\"'igo.geo.draw.shortcuts' | translate\"\n      >\n      </mat-icon>\n    </button>\n\n    <button\n      *ngIf=\"selectedFeatures$.value.length\"\n      mat-raised-button\n      color=\"primary\"\n      (click)=\"openStyleModalDialog()\"\n      [matTooltip]=\"'igo.geo.style.styleModalTooltipSelected' | translate\"\n    >\n      {{ 'igo.geo.style.styleModal' | translate }}\n      <mat-icon\n        aria-hidden=\"false\"\n        iconPositionEnd\n        class=\"style-icon\"\n        svgIcon=\"palette\"\n        [matBadge]=\"selectedFeatures$.value.length\"\n        matBadgeColor=\"warn\"\n        matBadgeSize=\"medium\"\n      >\n      </mat-icon>\n    </button>\n  </div>\n</div>\n", styles: [":host .geometry-type-toggle{padding:10px;text-align:center}:host .geometry-type-toggle mat-button-toggle-group{width:100%}:host .geometry-type-toggle mat-button-toggle-group mat-button-toggle{width:25%}:host .draw-options mat-slide-toggle{width:100%;padding:10px}:host .draw-options mat-slide-toggle ::ng-deep .mdc-form-field{width:100%}:host .draw-options mat-slide-toggle ::ng-deep .mdc-label{margin-left:0;width:calc(100% - 60px)}:host .icon-options{margin:5px 5px 0}:host .deleteBtn{margin-left:16px}:host .edition-drawing{padding:10px 0}:host img{width:100%;height:100%}:host .deleteBtn{margin-left:12px}:host .storeTable{height:auto!important}:host .layer-select{flex:1;margin-right:8px}:host .input-button-container{padding:10px}:host .input-button-container mat-form-field{width:25%}:host .input-button-container button{left:8px;bottom:10px}:host .radius{flex:2}:host .unit-field{flex:1;margin-left:8px}:host .radius-unit{display:flex;width:100%;padding:4px 8px}:host ::ng-deep igo-entity-table td:last-child{text-align:right!important}:host ::ng-deep igo-entity-table td:last-child button{margin:0%!important}:host .layer-select-container{margin:16px 8px}:host .actions-container,:host .layer-select-container{display:flex;align-items:center}\n"] }]
+                    ], template: "<div>\n  <div class=\"geometry-type-toggle mat-typography\">\n    <mat-button-toggle-group\n      (change)=\"onGeometryTypeChange($event.value)\"\n      [value]=\"geometryType.Point\"\n    >\n      <mat-button-toggle [value]=\"geometryType.Point\">\n        {{ 'igo.geo.draw.' + geometryType.Point | translate }}\n      </mat-button-toggle>\n\n      <mat-button-toggle [value]=\"geometryType.LineString\">\n        {{ 'igo.geo.draw.' + geometryType.LineString | translate }}\n      </mat-button-toggle>\n\n      <mat-button-toggle [value]=\"geometryType.Polygon\">\n        {{ 'igo.geo.draw.' + geometryType.Polygon | translate }}\n      </mat-button-toggle>\n\n      <mat-button-toggle [value]=\"geometryType.Circle\">\n        {{ 'igo.geo.draw.' + geometryType.Circle | translate }}\n      </mat-button-toggle>\n    </mat-button-toggle-group>\n  </div>\n\n  <div class=\"draw-options mat-typography\">\n    <mat-slide-toggle\n      [disabled]=\"drawControlIsDisabled\"\n      [checked]=\"drawControlIsActive\"\n      [labelPosition]=\"'before'\"\n      (change)=\"onToggleDrawControl($event.checked)\"\n    >\n      {{ 'igo.geo.draw.drawControl' | translate }}\n    </mat-slide-toggle>\n\n    <mat-slide-toggle\n      [checked]=\"labelsAreShown\"\n      [labelPosition]=\"'before'\"\n      (change)=\"onToggleLabels()\"\n    >\n      {{ 'igo.geo.draw.toggleMapTooltips' | translate }}\n    </mat-slide-toggle>\n\n    <mat-slide-toggle\n      *ngIf=\"!isPoint()\"\n      [checked]=\"freehandMode\"\n      [labelPosition]=\"'before'\"\n      (change)=\"onToggleFreehandMode($event)\"\n    >\n      {{ 'igo.geo.draw.freehandMode' | translate }}\n    </mat-slide-toggle>\n\n    <div class=\"radius-unit\" *ngIf=\"isCircle()\">\n      <mat-form-field class=\"radius\">\n        <input\n          matInput\n          type=\"number\"\n          min=\"0\"\n          placeholder=\"{{ 'igo.geo.spatialFilter.radius' | translate }}\"\n          [formControl]=\"radiusFormControl\"\n          [readonly]=\"this.freehandMode\"\n        />\n      </mat-form-field>\n\n      <mat-form-field class=\"unit-field\">\n        <mat-select\n          [value]=\"measureUnit\"\n          (selectionChange)=\"onMeasureUnitChange($event.value)\"\n        >\n          <mat-option\n            *ngFor=\"let measureUnit of measureUnits\"\n            [value]=\"measureUnit\"\n          >\n            {{ 'igo.geo.measure.' + measureUnit | translate }}\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n    </div>\n  </div>\n\n  <mat-divider></mat-divider>\n\n  <div class=\"layer-select-container\">\n    <mat-form-field class=\"layer-select\" subscriptSizing=\"dynamic\">\n      <mat-label>{{ 'igo.geo.draw.layer.title' | translate }}</mat-label>\n      <mat-select\n        #selectedLayer\n        (selectionChange)=\"onLayerChange(selectedLayer.value)\"\n        [value]=\"updateActiveLayer()\"\n      >\n        <mat-option *ngFor=\"let layer of allLayers\" [value]=\"layer\">\n          {{ layer.title }}\n        </mat-option>\n        <mat-option id=\"createNewLayer\">\n          {{ 'igo.geo.draw.layer.createNewLayer' | translate }}\n        </mat-option>\n      </mat-select>\n    </mat-form-field>\n    <button\n      *ngIf=\"activeDrawingLayer\"\n      mat-icon-button\n      [color]=\"activeDrawingLayer.visible ? 'primary' : 'default'\"\n      collapsibleButton\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"\n        activeDrawingLayer.visible\n          ? ('igo.geo.layer.hideLayer' | translate)\n          : ('igo.geo.layer.showLayer' | translate)\n      \"\n      (click)=\"activeDrawingLayer.visible = !activeDrawingLayer.visible\"\n    >\n      <mat-icon>\n        {{ activeDrawingLayer.visible ? 'visibility' : 'visibility_off' }}\n      </mat-icon>\n    </button>\n  </div>\n  <mat-divider></mat-divider>\n  <div>\n    <button\n      *ngIf=\"activeStore.count$.getValue() > 0\"\n      class=\"deleteBtn\"\n      mat-icon-button\n      color=\"warn\"\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"'igo.geo.draw.delete' | translate\"\n      [disabled]=\"(selectedFeatures$ | async).length === 0\"\n      (click)=\"deleteDrawings()\"\n    >\n      <mat-icon>delete</mat-icon>\n    </button>\n\n    <div>\n      <igo-entity-table\n        #table\n        class=\"table-compact\"\n        [store]=\"activeStore\"\n        [template]=\"tableTemplate\"\n      >\n      </igo-entity-table>\n    </div>\n  </div>\n\n  <div class=\"icon-options\">\n    <mat-form-field *ngIf=\"icons.length >= 1\">\n      <mat-label>{{ 'igo.geo.draw.icon' | translate }}</mat-label>\n      <mat-select>\n        <mat-select-trigger>\n          <div *ngIf=\"icon\" class=\"box\">\n            <img src=\"{{ icon }}\" />\n          </div>\n        </mat-select-trigger>\n        <mat-option value=\"\" (click)=\"onIconChange()\">{{\n          'igo.geo.draw.noIcon' | translate\n        }}</mat-option>\n        <mat-option\n          *ngFor=\"let icon_html of icons\"\n          [value]=\"icon_html\"\n          (click)=\"onIconChange(icon_html)\"\n        >\n          <div class=\"box\">\n            <img src=\"{{ icon_html }}\" />\n          </div>\n        </mat-option>\n      </mat-select>\n    </mat-form-field>\n  </div>\n\n  <div class=\"actions-container\">\n    <button\n      mat-icon-button\n      color=\"accent\"\n      disableRipple=\"true\"\n      (click)=\"openShorcutsDialog()\"\n    >\n      <mat-icon\n        class=\"shortcuts-icon\"\n        tooltip-position=\"below\"\n        matTooltipShowDelay=\"500\"\n        [matTooltip]=\"'igo.geo.draw.shortcuts' | translate\"\n        >keyboard\n      </mat-icon>\n    </button>\n\n    <button\n      *ngIf=\"selectedFeatures$.value.length\"\n      mat-raised-button\n      color=\"primary\"\n      (click)=\"openStyleModalDialog()\"\n      [matTooltip]=\"'igo.geo.style.styleModalTooltipSelected' | translate\"\n    >\n      {{ 'igo.geo.style.styleModal' | translate }}\n      <mat-icon\n        aria-hidden=\"false\"\n        iconPositionEnd\n        class=\"style-icon\"\n        [matBadge]=\"selectedFeatures$.value.length\"\n        matBadgeColor=\"warn\"\n        matBadgeSize=\"medium\"\n        >palette\n      </mat-icon>\n    </button>\n  </div>\n</div>\n", styles: [":host .geometry-type-toggle{padding:10px;text-align:center}:host .geometry-type-toggle mat-button-toggle-group{width:100%}:host .geometry-type-toggle mat-button-toggle-group mat-button-toggle{width:25%}:host .draw-options mat-slide-toggle{width:100%;padding:10px}:host .draw-options mat-slide-toggle ::ng-deep .mdc-form-field{width:100%}:host .draw-options mat-slide-toggle ::ng-deep .mdc-label{margin-left:0;width:calc(100% - 60px)}:host .icon-options{margin:5px 5px 0}:host .deleteBtn{margin-left:16px}:host .edition-drawing{padding:10px 0}:host img{width:100%;height:100%}:host .deleteBtn{margin-left:12px}:host .storeTable{height:auto!important}:host .layer-select{flex:1;margin-right:8px}:host .input-button-container{padding:10px}:host .input-button-container mat-form-field{width:25%}:host .input-button-container button{left:8px;bottom:10px}:host .radius{flex:2}:host .unit-field{flex:1;margin-left:8px}:host .radius-unit{display:flex;width:100%;padding:4px 8px}:host ::ng-deep igo-entity-table td:last-child{text-align:right!important}:host ::ng-deep igo-entity-table td:last-child button{margin:0%!important}:host .layer-select-container{margin:16px 8px}:host .actions-container,:host .layer-select-container{display:flex;align-items:center}\n"] }]
         }], ctorParameters: () => [{ type: i1$2.LanguageService }, { type: i1$6.UntypedFormBuilder }, { type: DrawStyleService }, { type: i1$5.MatDialog }, { type: DrawIconService }], propDecorators: { map: [{
                 type: Input
             }], stores: [{
@@ -29340,7 +29377,7 @@ class SpatialFilterItemComponent {
         };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SpatialFilterItemComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: SpatialFilterService }, { token: i2$3.MessageService }, { token: i1$2.LanguageService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: SpatialFilterItemComponent, isStandalone: true, selector: "igo-spatial-filter-item", inputs: { map: "map", type: "type", queryType: "queryType", zone: "zone", loading: "loading", store: "store", layers: "layers", allLayers: "allLayers", thematicLength: "thematicLength" }, outputs: { toggleSearch: "toggleSearch", itemTypeChange: "itemTypeChange", thematicChange: "thematicChange", drawZoneEvent: "drawZoneEvent", bufferEvent: "bufferEvent", zoneWithBufferChange: "zoneWithBufferChange", measureUnitChange: "measureUnitChange", radiusEvent: "radiusEvent", freehandControl: "freehandControl", predefinedRadius: "predefinedRadius", clearButtonEvent: "clearButtonEvent", clearSearchEvent: "clearSearchEvent", export: "export", openWorkspace: "openWorkspace", entityChange: "entityChange" }, ngImport: i0, template: "<igo-geometry-form-field-input\n  [formControl]=\"formControl\"\n  [map]=\"map\"\n  [geometryType]=\"geometryType\"\n  [drawGuide]=\"drawGuide$ | async\"\n  [measure]=\"measure\"\n  [drawControlIsActive]=\"drawControlIsActive\"\n  [freehandDrawIsActive]=\"freehandDrawIsActive\"\n  [drawStyle]=\"drawStyle$ | async\"\n  [overlayStyle]=\"overlayStyle$ | async\"\n  [radius]=\"radius\"\n  [predefinedRadius]=\"$any(predefinedRadius)\"\n>\n</igo-geometry-form-field-input>\n\n<div class=\"header\">\n  <mat-slide-toggle\n    *ngIf=\"!isPredefined()\"\n    [checked]=\"drawControlIsActive\"\n    [labelPosition]=\"'before'\"\n    (change)=\"onDrawControlChange()\"\n  >\n    {{ 'igo.geo.spatialFilter.drawControl' | translate }}\n  </mat-slide-toggle>\n  <mat-slide-toggle\n    *ngIf=\"!isPredefined()\"\n    [checked]=\"freehandDrawIsActive\"\n    [labelPosition]=\"'before'\"\n    (change)=\"onfreehandControlChange()\"\n  >\n    {{ 'igo.geo.spatialFilter.freehandControl' | translate }}\n  </mat-slide-toggle>\n</div>\n\n<div class=\"buffer-unit\" *ngIf=\"isPolygon()\">\n  <mat-form-field class=\"buffer\">\n    <input\n      type=\"number\"\n      matInput\n      placeholder=\"{{ 'igo.geo.spatialFilter.buffer' | translate }}\"\n      [formControl]=\"bufferFormControl\"\n      [value]=\"0\"\n      [readonly]=\"this.formControl.value === null\"\n    />\n  </mat-form-field>\n\n  <mat-form-field class=\"unit-field\">\n    <mat-select\n      [value]=\"measureUnit\"\n      (selectionChange)=\"onMeasureUnitChange($event.value)\"\n    >\n      <mat-option\n        *ngFor=\"let measureUnit of measureUnits\"\n        [value]=\"measureUnit\"\n      >\n        {{ 'igo.geo.measure.' + measureUnit | translate }}\n      </mat-option>\n    </mat-select>\n  </mat-form-field>\n</div>\n\n<div class=\"radius-unit\" *ngIf=\"isPoint()\">\n  <mat-form-field class=\"radius\">\n    <input\n      type=\"number\"\n      matInput\n      placeholder=\"{{ 'igo.geo.spatialFilter.radius' | translate }}\"\n      [formControl]=\"radiusFormControl\"\n      [value]=\"1000\"\n      (input)=\"getRadius()\"\n      [readonly]=\"this.freehandDrawIsActive && this.formControl.value === null\"\n    />\n  </mat-form-field>\n\n  <mat-form-field class=\"unit-field\">\n    <mat-select\n      [value]=\"measureUnit\"\n      (selectionChange)=\"onMeasureUnitChange($event.value)\"\n    >\n      <mat-option\n        *ngFor=\"let measureUnit of measureUnits\"\n        [value]=\"measureUnit\"\n      >\n        {{ 'igo.geo.measure.' + measureUnit | translate }}\n      </mat-option>\n    </mat-select>\n  </mat-form-field>\n</div>\n\n<mat-label class=\"title mat-typography\"\n  >{{ 'igo.geo.spatialFilter.search' | translate }} :\n</mat-label>\n<mat-radio-group [value]=\"selectedItemType\">\n  <mat-radio-button\n    *ngFor=\"let item of itemType\"\n    [value]=\"item\"\n    (change)=\"onItemTypeChange($event)\"\n  >\n    {{ 'igo.geo.spatialFilter.' + item | translate }}\n  </mat-radio-button>\n</mat-radio-group>\n\n<div\n  class=\"thematics\"\n  *ngIf=\"\n    (selectedItemType === 'Thematics' && !tableTemplate) ||\n    (selectedItemType === 'Thematics' && tableTemplate && !listIsVisible)\n  \"\n>\n  <mat-table>\n    <!-- Name Column -->\n    <ng-container matColumnDef=\"name\">\n      <mat-header-cell *matHeaderCellDef class=\"thematics-header\">{{\n        'igo.geo.spatialFilter.Thematics' | translate\n      }}</mat-header-cell>\n    </ng-container>\n\n    <!-- Select Column -->\n    <ng-container matColumnDef=\"select\">\n      <mat-header-cell *matHeaderCellDef class=\"checks-header\">\n        <mat-checkbox\n          (change)=\"$event ? masterToggle() : null\"\n          [checked]=\"isAllSelected()\"\n          [indeterminate]=\"selectedThematics.hasValue() && !isAllSelected()\"\n        >\n        </mat-checkbox>\n      </mat-header-cell>\n    </ng-container>\n\n    <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n    <mat-row *matRowDef=\"let row; columns: displayedColumns\"></mat-row>\n  </mat-table>\n\n  <mat-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\">\n    <!-- This is the tree node template for leaf nodes -->\n    <mat-tree-node *matTreeNodeDef=\"let node\" matTreeNodeToggle>\n      <li class=\"mat-tree-node\">\n        <!-- use a disabled button to provide padding for tree leaf -->\n        <button mat-icon-button disabled></button>\n        {{ node.name }}\n        <mat-checkbox\n          class=\"tree-check\"\n          (click)=\"$event.stopPropagation()\"\n          (change)=\"$event ? onToggleChange(node) : null\"\n          [checked]=\"selectedThematics.isSelected(node)\"\n        >\n        </mat-checkbox>\n      </li>\n    </mat-tree-node>\n\n    <!-- This is the tree node template for expandable nodes -->\n    <mat-nested-tree-node *matTreeNodeDef=\"let node; when: hasChild\">\n      <div class=\"mat-tree-node\">\n        <button mat-icon-button (click)=\"onToggleClick(node)\">\n          <mat-icon\n            [svgIcon]=\"\n              treeControl.isExpanded(node) ? 'chevron-down' : 'chevron-right'\n            \"\n          ></mat-icon>\n        </button>\n        {{ node.name }}\n        <mat-checkbox\n          class=\"tree-check-2\"\n          (change)=\"$event ? childrensToggle(node) : null\"\n          [checked]=\"isAllSelected(node)\"\n          [indeterminate]=\"hasChildrenSelected(node) && !isAllSelected(node)\"\n        >\n        </mat-checkbox>\n      </div>\n      <ul\n        class=\"tree-ul\"\n        [class.example-tree-invisible]=\"!treeControl.isExpanded(node)\"\n      >\n        <ng-container matTreeNodeOutlet></ng-container>\n      </ul>\n    </mat-nested-tree-node>\n  </mat-tree>\n</div>\n\n<div class=\"buttons\">\n  <button\n    *ngIf=\"isPredefined()\"\n    mat-raised-button\n    class=\"clear-search-button\"\n    [disabled]=\"disabledClearSearch()\"\n    (click)=\"clearSearch()\"\n  >\n    {{ 'igo.geo.spatialFilter.clearSearch' | translate }}\n  </button>\n\n  <button\n    *ngIf=\"isPolygon() || isPoint()\"\n    mat-raised-button\n    class=\"clear-form-button\"\n    [disabled]=\"this.formControl.value === null\"\n    (click)=\"clearDrawZone()\"\n  >\n    {{ 'igo.geo.spatialFilter.clearForm' | translate }}\n  </button>\n\n  <button\n    mat-raised-button\n    class=\"search-button\"\n    [disabled]=\"disableSearchButton()\"\n    color=\"primary\"\n    (click)=\"toggleSearchButton()\"\n  >\n    {{ 'igo.geo.spatialFilter.goSearch' | translate }}\n  </button>\n\n  <button\n    mat-raised-button\n    class=\"remove-button\"\n    [disabled]=\"allLayers.length === 0\"\n    (click)=\"clearButton()\"\n  >\n    {{ 'igo.geo.spatialFilter.removeLayer' | translate }}\n  </button>\n\n  <button\n    mat-raised-button\n    class=\"export-button\"\n    [disabled]=\"!store.entities$.getValue().length\"\n    (click)=\"export.emit()\"\n  >\n    {{ 'igo.geo.spatialFilter.exportLayer' | translate }}\n  </button>\n</div>\n\n<button\n  class=\"chevron-down\"\n  *ngIf=\"store.all().length && tableTemplate && !listIsVisible\"\n  mat-icon-button\n  matTooltipShowDelay=\"500\"\n  [matTooltip]=\"'igo.geo.spatialFilter.showSearchResults' | translate\"\n  (click)=\"toggleVisibleList()\"\n>\n  <mat-icon svgIcon=\"chevron-down\"></mat-icon>\n</button>\n\n<div\n  class=\"results\"\n  *ngIf=\"store.all().length && tableTemplate && listIsVisible\"\n>\n  <button\n    *ngIf=\"listIsVisible\"\n    mat-icon-button\n    matTooltipShowDelay=\"500\"\n    [matTooltip]=\"'igo.geo.spatialFilter.hideSearchResults' | translate\"\n    (click)=\"toggleVisibleList()\"\n  >\n    <mat-icon svgIcon=\"chevron-up\"></mat-icon>\n  </button>\n  <igo-entity-table\n    class=\"results-list\"\n    [template]=\"tableTemplate\"\n    [store]=\"store\"\n    (entitySelectChange)=\"entityChange.emit($event)\"\n  >\n  </igo-entity-table>\n</div>\n", styles: [":host .header{margin-top:5px;width:100%}:host .mat-mdc-slide-toggle{padding:5px;width:100%}:host .mat-mdc-slide-toggle ::ng-deep .mdc-form-field{width:100%}:host .mat-mdc-slide-toggle ::ng-deep .mdc-label{margin-left:0;width:calc(100% - 60px)}:host .title{margin-left:5px;font-size:initial}:host .mat-mdc-radio-group{display:flex;flex-direction:column}:host .mat-mdc-radio-button{display:inline-flex;position:relative;margin-left:12px}:host .mat-mdc-form-field{margin-top:5px}:host .mat-column-select{overflow:auto}:host .buttons{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:16px 0}:host .thematics{max-height:35%;overflow:auto;margin-top:5px;width:98%}:host .results{overflow:auto;max-height:250px;width:98%}:host .mat-column-typeResults{max-width:100px;margin-right:5px}:host .buffer-unit,:host .radius-unit{display:flex;width:100%;padding:5px;box-sizing:border-box}:host .radius,:host .buffer{flex-flow:column nowrap;flex:2}:host .unit-field{flex:1;margin-left:8px}:host .example-tree-invisible{display:none}:host .tree-ul{margin:0;padding:0 0 0 20px;list-style-type:none}:host .tree-check,:host .tree-check-2{position:relative;margin-left:auto;margin-right:5px}:host .thematics-header{max-width:250px}:host .checks-header{padding:none;max-width:calc(100% - 316px);overflow:hidden}:host .mat-mdc-checkbox{padding:5px}:host .mat-tree-node{position:relative;min-height:42px;width:280px}:host .mat-mdc-header-cell{height:56px}:host .results{max-height:45%;width:98%}:host .results igo-entity-table ::ng-deep div.table-container{overflow:unset}\n"], dependencies: [{ kind: "component", type: GeometryFormFieldInputComponent, selector: "igo-geometry-form-field-input", inputs: ["map", "geometryType", "drawGuide", "measure", "drawControlIsActive", "freehandDrawIsActive", "predefinedRadius", "controlOptions", "drawStyle", "overlayStyle", "value", "radius"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$6.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$6.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i5$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i8$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6$4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i6$1.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i6$1.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i11.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i11.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i11.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i11.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i11.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i11.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "component", type: i11.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i11.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i8.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatTreeModule }, { kind: "directive", type: i13.MatNestedTreeNode, selector: "mat-nested-tree-node", inputs: ["matNestedTreeNode", "disabled", "tabIndex"], exportAs: ["matNestedTreeNode"] }, { kind: "directive", type: i13.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: i13.MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { kind: "component", type: i13.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i13.MatTreeNode, selector: "mat-tree-node", inputs: ["disabled", "tabIndex"], exportAs: ["matTreeNode"] }, { kind: "directive", type: i13.MatTreeNodeOutlet, selector: "[matTreeNodeOutlet]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: EntityTableComponent, selector: "igo-entity-table", inputs: ["store", "paginator", "template", "scrollBehavior", "sortNullsFirst", "withPaginator", "paginatorOptions"], outputs: ["entityClick", "entitySelectChange", "entitySortChange"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: SpatialFilterItemComponent, isStandalone: true, selector: "igo-spatial-filter-item", inputs: { map: "map", type: "type", queryType: "queryType", zone: "zone", loading: "loading", store: "store", layers: "layers", allLayers: "allLayers", thematicLength: "thematicLength" }, outputs: { toggleSearch: "toggleSearch", itemTypeChange: "itemTypeChange", thematicChange: "thematicChange", drawZoneEvent: "drawZoneEvent", bufferEvent: "bufferEvent", zoneWithBufferChange: "zoneWithBufferChange", measureUnitChange: "measureUnitChange", radiusEvent: "radiusEvent", freehandControl: "freehandControl", predefinedRadius: "predefinedRadius", clearButtonEvent: "clearButtonEvent", clearSearchEvent: "clearSearchEvent", export: "export", openWorkspace: "openWorkspace", entityChange: "entityChange" }, ngImport: i0, template: "<igo-geometry-form-field-input\n  [formControl]=\"formControl\"\n  [map]=\"map\"\n  [geometryType]=\"geometryType\"\n  [drawGuide]=\"drawGuide$ | async\"\n  [measure]=\"measure\"\n  [drawControlIsActive]=\"drawControlIsActive\"\n  [freehandDrawIsActive]=\"freehandDrawIsActive\"\n  [drawStyle]=\"drawStyle$ | async\"\n  [overlayStyle]=\"overlayStyle$ | async\"\n  [radius]=\"radius\"\n  [predefinedRadius]=\"$any(predefinedRadius)\"\n>\n</igo-geometry-form-field-input>\n\n<div class=\"header\">\n  <mat-slide-toggle\n    *ngIf=\"!isPredefined()\"\n    [checked]=\"drawControlIsActive\"\n    [labelPosition]=\"'before'\"\n    (change)=\"onDrawControlChange()\"\n  >\n    {{ 'igo.geo.spatialFilter.drawControl' | translate }}\n  </mat-slide-toggle>\n  <mat-slide-toggle\n    *ngIf=\"!isPredefined()\"\n    [checked]=\"freehandDrawIsActive\"\n    [labelPosition]=\"'before'\"\n    (change)=\"onfreehandControlChange()\"\n  >\n    {{ 'igo.geo.spatialFilter.freehandControl' | translate }}\n  </mat-slide-toggle>\n</div>\n\n<div class=\"buffer-unit\" *ngIf=\"isPolygon()\">\n  <mat-form-field class=\"buffer\">\n    <input\n      type=\"number\"\n      matInput\n      placeholder=\"{{ 'igo.geo.spatialFilter.buffer' | translate }}\"\n      [formControl]=\"bufferFormControl\"\n      [value]=\"0\"\n      [readonly]=\"this.formControl.value === null\"\n    />\n  </mat-form-field>\n\n  <mat-form-field class=\"unit-field\">\n    <mat-select\n      [value]=\"measureUnit\"\n      (selectionChange)=\"onMeasureUnitChange($event.value)\"\n    >\n      <mat-option\n        *ngFor=\"let measureUnit of measureUnits\"\n        [value]=\"measureUnit\"\n      >\n        {{ 'igo.geo.measure.' + measureUnit | translate }}\n      </mat-option>\n    </mat-select>\n  </mat-form-field>\n</div>\n\n<div class=\"radius-unit\" *ngIf=\"isPoint()\">\n  <mat-form-field class=\"radius\">\n    <input\n      type=\"number\"\n      matInput\n      placeholder=\"{{ 'igo.geo.spatialFilter.radius' | translate }}\"\n      [formControl]=\"radiusFormControl\"\n      [value]=\"1000\"\n      (input)=\"getRadius()\"\n      [readonly]=\"this.freehandDrawIsActive && this.formControl.value === null\"\n    />\n  </mat-form-field>\n\n  <mat-form-field class=\"unit-field\">\n    <mat-select\n      [value]=\"measureUnit\"\n      (selectionChange)=\"onMeasureUnitChange($event.value)\"\n    >\n      <mat-option\n        *ngFor=\"let measureUnit of measureUnits\"\n        [value]=\"measureUnit\"\n      >\n        {{ 'igo.geo.measure.' + measureUnit | translate }}\n      </mat-option>\n    </mat-select>\n  </mat-form-field>\n</div>\n\n<mat-label class=\"title mat-typography\"\n  >{{ 'igo.geo.spatialFilter.search' | translate }} :\n</mat-label>\n<mat-radio-group [value]=\"selectedItemType\">\n  <mat-radio-button\n    *ngFor=\"let item of itemType\"\n    [value]=\"item\"\n    (change)=\"onItemTypeChange($event)\"\n  >\n    {{ 'igo.geo.spatialFilter.' + item | translate }}\n  </mat-radio-button>\n</mat-radio-group>\n\n<div\n  class=\"thematics\"\n  *ngIf=\"\n    (selectedItemType === 'Thematics' && !tableTemplate) ||\n    (selectedItemType === 'Thematics' && tableTemplate && !listIsVisible)\n  \"\n>\n  <mat-table>\n    <!-- Name Column -->\n    <ng-container matColumnDef=\"name\">\n      <mat-header-cell *matHeaderCellDef class=\"thematics-header\">{{\n        'igo.geo.spatialFilter.Thematics' | translate\n      }}</mat-header-cell>\n    </ng-container>\n\n    <!-- Select Column -->\n    <ng-container matColumnDef=\"select\">\n      <mat-header-cell *matHeaderCellDef class=\"checks-header\">\n        <mat-checkbox\n          (change)=\"$event ? masterToggle() : null\"\n          [checked]=\"isAllSelected()\"\n          [indeterminate]=\"selectedThematics.hasValue() && !isAllSelected()\"\n        >\n        </mat-checkbox>\n      </mat-header-cell>\n    </ng-container>\n\n    <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n    <mat-row *matRowDef=\"let row; columns: displayedColumns\"></mat-row>\n  </mat-table>\n\n  <mat-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\">\n    <!-- This is the tree node template for leaf nodes -->\n    <mat-tree-node *matTreeNodeDef=\"let node\" matTreeNodeToggle>\n      <li class=\"mat-tree-node\">\n        <!-- use a disabled button to provide padding for tree leaf -->\n        <button mat-icon-button disabled></button>\n        {{ node.name }}\n        <mat-checkbox\n          class=\"tree-check\"\n          (click)=\"$event.stopPropagation()\"\n          (change)=\"$event ? onToggleChange(node) : null\"\n          [checked]=\"selectedThematics.isSelected(node)\"\n        >\n        </mat-checkbox>\n      </li>\n    </mat-tree-node>\n\n    <!-- This is the tree node template for expandable nodes -->\n    <mat-nested-tree-node *matTreeNodeDef=\"let node; when: hasChild\">\n      <div class=\"mat-tree-node\">\n        <button mat-icon-button (click)=\"onToggleClick(node)\">\n          <mat-icon>{{\n            treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'\n          }}</mat-icon>\n        </button>\n        {{ node.name }}\n        <mat-checkbox\n          class=\"tree-check-2\"\n          (change)=\"$event ? childrensToggle(node) : null\"\n          [checked]=\"isAllSelected(node)\"\n          [indeterminate]=\"hasChildrenSelected(node) && !isAllSelected(node)\"\n        >\n        </mat-checkbox>\n      </div>\n      <ul\n        class=\"tree-ul\"\n        [class.example-tree-invisible]=\"!treeControl.isExpanded(node)\"\n      >\n        <ng-container matTreeNodeOutlet></ng-container>\n      </ul>\n    </mat-nested-tree-node>\n  </mat-tree>\n</div>\n\n<div class=\"buttons\">\n  <button\n    *ngIf=\"isPredefined()\"\n    mat-raised-button\n    class=\"clear-search-button\"\n    [disabled]=\"disabledClearSearch()\"\n    (click)=\"clearSearch()\"\n  >\n    {{ 'igo.geo.spatialFilter.clearSearch' | translate }}\n  </button>\n\n  <button\n    *ngIf=\"isPolygon() || isPoint()\"\n    mat-raised-button\n    class=\"clear-form-button\"\n    [disabled]=\"this.formControl.value === null\"\n    (click)=\"clearDrawZone()\"\n  >\n    {{ 'igo.geo.spatialFilter.clearForm' | translate }}\n  </button>\n\n  <button\n    mat-raised-button\n    class=\"search-button\"\n    [disabled]=\"disableSearchButton()\"\n    color=\"primary\"\n    (click)=\"toggleSearchButton()\"\n  >\n    {{ 'igo.geo.spatialFilter.goSearch' | translate }}\n  </button>\n\n  <button\n    mat-raised-button\n    class=\"remove-button\"\n    [disabled]=\"allLayers.length === 0\"\n    (click)=\"clearButton()\"\n  >\n    {{ 'igo.geo.spatialFilter.removeLayer' | translate }}\n  </button>\n\n  <button\n    mat-raised-button\n    class=\"export-button\"\n    [disabled]=\"!store.entities$.getValue().length\"\n    (click)=\"export.emit()\"\n  >\n    {{ 'igo.geo.spatialFilter.exportLayer' | translate }}\n  </button>\n</div>\n\n<button\n  class=\"expand-more\"\n  *ngIf=\"store.all().length && tableTemplate && !listIsVisible\"\n  mat-icon-button\n  matTooltipShowDelay=\"500\"\n  [matTooltip]=\"'igo.geo.spatialFilter.showSearchResults' | translate\"\n  (click)=\"toggleVisibleList()\"\n>\n  <mat-icon>expand_more</mat-icon>\n</button>\n\n<div\n  class=\"results\"\n  *ngIf=\"store.all().length && tableTemplate && listIsVisible\"\n>\n  <button\n    *ngIf=\"listIsVisible\"\n    mat-icon-button\n    matTooltipShowDelay=\"500\"\n    [matTooltip]=\"'igo.geo.spatialFilter.hideSearchResults' | translate\"\n    (click)=\"toggleVisibleList()\"\n  >\n    <mat-icon>expand_less</mat-icon>\n  </button>\n  <igo-entity-table\n    class=\"results-list\"\n    [template]=\"tableTemplate\"\n    [store]=\"store\"\n    (entitySelectChange)=\"entityChange.emit($event)\"\n  >\n  </igo-entity-table>\n</div>\n", styles: [":host .header{margin-top:5px;width:100%}:host .mat-mdc-slide-toggle{padding:5px;width:100%}:host .mat-mdc-slide-toggle ::ng-deep .mdc-form-field{width:100%}:host .mat-mdc-slide-toggle ::ng-deep .mdc-label{margin-left:0;width:calc(100% - 60px)}:host .title{margin-left:5px;font-size:initial}:host .mat-mdc-radio-group{display:flex;flex-direction:column}:host .mat-mdc-radio-button{display:inline-flex;position:relative;margin-left:12px}:host .mat-mdc-form-field{margin-top:5px}:host .mat-column-select{overflow:auto}:host .buttons{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:16px 0}:host .thematics{max-height:35%;overflow:auto;margin-top:5px;width:98%}:host .results{overflow:auto;max-height:250px;width:98%}:host .mat-column-typeResults{max-width:100px;margin-right:5px}:host .buffer-unit,:host .radius-unit{display:flex;width:100%;padding:5px;box-sizing:border-box}:host .radius,:host .buffer{flex-flow:column nowrap;flex:2}:host .unit-field{flex:1;margin-left:8px}:host .example-tree-invisible{display:none}:host .tree-ul{margin:0;padding:0 0 0 20px;list-style-type:none}:host .tree-check,:host .tree-check-2{position:relative;margin-left:auto;margin-right:5px}:host .thematics-header{max-width:250px}:host .checks-header{padding:none;max-width:calc(100% - 316px);overflow:hidden}:host .mat-mdc-checkbox{padding:5px}:host .mat-tree-node{position:relative;min-height:42px;width:280px}:host .mat-mdc-header-cell{height:56px}:host .results{max-height:45%;width:98%}:host .results igo-entity-table ::ng-deep div.table-container{overflow:unset}\n"], dependencies: [{ kind: "component", type: GeometryFormFieldInputComponent, selector: "igo-geometry-form-field-input", inputs: ["map", "geometryType", "drawGuide", "measure", "drawControlIsActive", "freehandDrawIsActive", "predefinedRadius", "controlOptions", "drawStyle", "overlayStyle", "value", "radius"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$6.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$6.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i5$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i8$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6$4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i6$1.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i6$1.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i11.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i11.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i11.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i11.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i11.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i11.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "component", type: i11.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i11.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i8.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatTreeModule }, { kind: "directive", type: i13.MatNestedTreeNode, selector: "mat-nested-tree-node", inputs: ["matNestedTreeNode", "disabled", "tabIndex"], exportAs: ["matNestedTreeNode"] }, { kind: "directive", type: i13.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: i13.MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { kind: "component", type: i13.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i13.MatTreeNode, selector: "mat-tree-node", inputs: ["disabled", "tabIndex"], exportAs: ["matTreeNode"] }, { kind: "directive", type: i13.MatTreeNodeOutlet, selector: "[matTreeNodeOutlet]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: EntityTableComponent, selector: "igo-entity-table", inputs: ["store", "paginator", "template", "scrollBehavior", "sortNullsFirst", "withPaginator", "paginatorOptions"], outputs: ["entityClick", "entitySelectChange", "entitySortChange"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SpatialFilterItemComponent, decorators: [{
             type: Component,
@@ -29365,7 +29402,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                         EntityTableComponent,
                         AsyncPipe,
                         TranslateModule
-                    ], template: "<igo-geometry-form-field-input\n  [formControl]=\"formControl\"\n  [map]=\"map\"\n  [geometryType]=\"geometryType\"\n  [drawGuide]=\"drawGuide$ | async\"\n  [measure]=\"measure\"\n  [drawControlIsActive]=\"drawControlIsActive\"\n  [freehandDrawIsActive]=\"freehandDrawIsActive\"\n  [drawStyle]=\"drawStyle$ | async\"\n  [overlayStyle]=\"overlayStyle$ | async\"\n  [radius]=\"radius\"\n  [predefinedRadius]=\"$any(predefinedRadius)\"\n>\n</igo-geometry-form-field-input>\n\n<div class=\"header\">\n  <mat-slide-toggle\n    *ngIf=\"!isPredefined()\"\n    [checked]=\"drawControlIsActive\"\n    [labelPosition]=\"'before'\"\n    (change)=\"onDrawControlChange()\"\n  >\n    {{ 'igo.geo.spatialFilter.drawControl' | translate }}\n  </mat-slide-toggle>\n  <mat-slide-toggle\n    *ngIf=\"!isPredefined()\"\n    [checked]=\"freehandDrawIsActive\"\n    [labelPosition]=\"'before'\"\n    (change)=\"onfreehandControlChange()\"\n  >\n    {{ 'igo.geo.spatialFilter.freehandControl' | translate }}\n  </mat-slide-toggle>\n</div>\n\n<div class=\"buffer-unit\" *ngIf=\"isPolygon()\">\n  <mat-form-field class=\"buffer\">\n    <input\n      type=\"number\"\n      matInput\n      placeholder=\"{{ 'igo.geo.spatialFilter.buffer' | translate }}\"\n      [formControl]=\"bufferFormControl\"\n      [value]=\"0\"\n      [readonly]=\"this.formControl.value === null\"\n    />\n  </mat-form-field>\n\n  <mat-form-field class=\"unit-field\">\n    <mat-select\n      [value]=\"measureUnit\"\n      (selectionChange)=\"onMeasureUnitChange($event.value)\"\n    >\n      <mat-option\n        *ngFor=\"let measureUnit of measureUnits\"\n        [value]=\"measureUnit\"\n      >\n        {{ 'igo.geo.measure.' + measureUnit | translate }}\n      </mat-option>\n    </mat-select>\n  </mat-form-field>\n</div>\n\n<div class=\"radius-unit\" *ngIf=\"isPoint()\">\n  <mat-form-field class=\"radius\">\n    <input\n      type=\"number\"\n      matInput\n      placeholder=\"{{ 'igo.geo.spatialFilter.radius' | translate }}\"\n      [formControl]=\"radiusFormControl\"\n      [value]=\"1000\"\n      (input)=\"getRadius()\"\n      [readonly]=\"this.freehandDrawIsActive && this.formControl.value === null\"\n    />\n  </mat-form-field>\n\n  <mat-form-field class=\"unit-field\">\n    <mat-select\n      [value]=\"measureUnit\"\n      (selectionChange)=\"onMeasureUnitChange($event.value)\"\n    >\n      <mat-option\n        *ngFor=\"let measureUnit of measureUnits\"\n        [value]=\"measureUnit\"\n      >\n        {{ 'igo.geo.measure.' + measureUnit | translate }}\n      </mat-option>\n    </mat-select>\n  </mat-form-field>\n</div>\n\n<mat-label class=\"title mat-typography\"\n  >{{ 'igo.geo.spatialFilter.search' | translate }} :\n</mat-label>\n<mat-radio-group [value]=\"selectedItemType\">\n  <mat-radio-button\n    *ngFor=\"let item of itemType\"\n    [value]=\"item\"\n    (change)=\"onItemTypeChange($event)\"\n  >\n    {{ 'igo.geo.spatialFilter.' + item | translate }}\n  </mat-radio-button>\n</mat-radio-group>\n\n<div\n  class=\"thematics\"\n  *ngIf=\"\n    (selectedItemType === 'Thematics' && !tableTemplate) ||\n    (selectedItemType === 'Thematics' && tableTemplate && !listIsVisible)\n  \"\n>\n  <mat-table>\n    <!-- Name Column -->\n    <ng-container matColumnDef=\"name\">\n      <mat-header-cell *matHeaderCellDef class=\"thematics-header\">{{\n        'igo.geo.spatialFilter.Thematics' | translate\n      }}</mat-header-cell>\n    </ng-container>\n\n    <!-- Select Column -->\n    <ng-container matColumnDef=\"select\">\n      <mat-header-cell *matHeaderCellDef class=\"checks-header\">\n        <mat-checkbox\n          (change)=\"$event ? masterToggle() : null\"\n          [checked]=\"isAllSelected()\"\n          [indeterminate]=\"selectedThematics.hasValue() && !isAllSelected()\"\n        >\n        </mat-checkbox>\n      </mat-header-cell>\n    </ng-container>\n\n    <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n    <mat-row *matRowDef=\"let row; columns: displayedColumns\"></mat-row>\n  </mat-table>\n\n  <mat-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\">\n    <!-- This is the tree node template for leaf nodes -->\n    <mat-tree-node *matTreeNodeDef=\"let node\" matTreeNodeToggle>\n      <li class=\"mat-tree-node\">\n        <!-- use a disabled button to provide padding for tree leaf -->\n        <button mat-icon-button disabled></button>\n        {{ node.name }}\n        <mat-checkbox\n          class=\"tree-check\"\n          (click)=\"$event.stopPropagation()\"\n          (change)=\"$event ? onToggleChange(node) : null\"\n          [checked]=\"selectedThematics.isSelected(node)\"\n        >\n        </mat-checkbox>\n      </li>\n    </mat-tree-node>\n\n    <!-- This is the tree node template for expandable nodes -->\n    <mat-nested-tree-node *matTreeNodeDef=\"let node; when: hasChild\">\n      <div class=\"mat-tree-node\">\n        <button mat-icon-button (click)=\"onToggleClick(node)\">\n          <mat-icon\n            [svgIcon]=\"\n              treeControl.isExpanded(node) ? 'chevron-down' : 'chevron-right'\n            \"\n          ></mat-icon>\n        </button>\n        {{ node.name }}\n        <mat-checkbox\n          class=\"tree-check-2\"\n          (change)=\"$event ? childrensToggle(node) : null\"\n          [checked]=\"isAllSelected(node)\"\n          [indeterminate]=\"hasChildrenSelected(node) && !isAllSelected(node)\"\n        >\n        </mat-checkbox>\n      </div>\n      <ul\n        class=\"tree-ul\"\n        [class.example-tree-invisible]=\"!treeControl.isExpanded(node)\"\n      >\n        <ng-container matTreeNodeOutlet></ng-container>\n      </ul>\n    </mat-nested-tree-node>\n  </mat-tree>\n</div>\n\n<div class=\"buttons\">\n  <button\n    *ngIf=\"isPredefined()\"\n    mat-raised-button\n    class=\"clear-search-button\"\n    [disabled]=\"disabledClearSearch()\"\n    (click)=\"clearSearch()\"\n  >\n    {{ 'igo.geo.spatialFilter.clearSearch' | translate }}\n  </button>\n\n  <button\n    *ngIf=\"isPolygon() || isPoint()\"\n    mat-raised-button\n    class=\"clear-form-button\"\n    [disabled]=\"this.formControl.value === null\"\n    (click)=\"clearDrawZone()\"\n  >\n    {{ 'igo.geo.spatialFilter.clearForm' | translate }}\n  </button>\n\n  <button\n    mat-raised-button\n    class=\"search-button\"\n    [disabled]=\"disableSearchButton()\"\n    color=\"primary\"\n    (click)=\"toggleSearchButton()\"\n  >\n    {{ 'igo.geo.spatialFilter.goSearch' | translate }}\n  </button>\n\n  <button\n    mat-raised-button\n    class=\"remove-button\"\n    [disabled]=\"allLayers.length === 0\"\n    (click)=\"clearButton()\"\n  >\n    {{ 'igo.geo.spatialFilter.removeLayer' | translate }}\n  </button>\n\n  <button\n    mat-raised-button\n    class=\"export-button\"\n    [disabled]=\"!store.entities$.getValue().length\"\n    (click)=\"export.emit()\"\n  >\n    {{ 'igo.geo.spatialFilter.exportLayer' | translate }}\n  </button>\n</div>\n\n<button\n  class=\"chevron-down\"\n  *ngIf=\"store.all().length && tableTemplate && !listIsVisible\"\n  mat-icon-button\n  matTooltipShowDelay=\"500\"\n  [matTooltip]=\"'igo.geo.spatialFilter.showSearchResults' | translate\"\n  (click)=\"toggleVisibleList()\"\n>\n  <mat-icon svgIcon=\"chevron-down\"></mat-icon>\n</button>\n\n<div\n  class=\"results\"\n  *ngIf=\"store.all().length && tableTemplate && listIsVisible\"\n>\n  <button\n    *ngIf=\"listIsVisible\"\n    mat-icon-button\n    matTooltipShowDelay=\"500\"\n    [matTooltip]=\"'igo.geo.spatialFilter.hideSearchResults' | translate\"\n    (click)=\"toggleVisibleList()\"\n  >\n    <mat-icon svgIcon=\"chevron-up\"></mat-icon>\n  </button>\n  <igo-entity-table\n    class=\"results-list\"\n    [template]=\"tableTemplate\"\n    [store]=\"store\"\n    (entitySelectChange)=\"entityChange.emit($event)\"\n  >\n  </igo-entity-table>\n</div>\n", styles: [":host .header{margin-top:5px;width:100%}:host .mat-mdc-slide-toggle{padding:5px;width:100%}:host .mat-mdc-slide-toggle ::ng-deep .mdc-form-field{width:100%}:host .mat-mdc-slide-toggle ::ng-deep .mdc-label{margin-left:0;width:calc(100% - 60px)}:host .title{margin-left:5px;font-size:initial}:host .mat-mdc-radio-group{display:flex;flex-direction:column}:host .mat-mdc-radio-button{display:inline-flex;position:relative;margin-left:12px}:host .mat-mdc-form-field{margin-top:5px}:host .mat-column-select{overflow:auto}:host .buttons{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:16px 0}:host .thematics{max-height:35%;overflow:auto;margin-top:5px;width:98%}:host .results{overflow:auto;max-height:250px;width:98%}:host .mat-column-typeResults{max-width:100px;margin-right:5px}:host .buffer-unit,:host .radius-unit{display:flex;width:100%;padding:5px;box-sizing:border-box}:host .radius,:host .buffer{flex-flow:column nowrap;flex:2}:host .unit-field{flex:1;margin-left:8px}:host .example-tree-invisible{display:none}:host .tree-ul{margin:0;padding:0 0 0 20px;list-style-type:none}:host .tree-check,:host .tree-check-2{position:relative;margin-left:auto;margin-right:5px}:host .thematics-header{max-width:250px}:host .checks-header{padding:none;max-width:calc(100% - 316px);overflow:hidden}:host .mat-mdc-checkbox{padding:5px}:host .mat-tree-node{position:relative;min-height:42px;width:280px}:host .mat-mdc-header-cell{height:56px}:host .results{max-height:45%;width:98%}:host .results igo-entity-table ::ng-deep div.table-container{overflow:unset}\n"] }]
+                    ], template: "<igo-geometry-form-field-input\n  [formControl]=\"formControl\"\n  [map]=\"map\"\n  [geometryType]=\"geometryType\"\n  [drawGuide]=\"drawGuide$ | async\"\n  [measure]=\"measure\"\n  [drawControlIsActive]=\"drawControlIsActive\"\n  [freehandDrawIsActive]=\"freehandDrawIsActive\"\n  [drawStyle]=\"drawStyle$ | async\"\n  [overlayStyle]=\"overlayStyle$ | async\"\n  [radius]=\"radius\"\n  [predefinedRadius]=\"$any(predefinedRadius)\"\n>\n</igo-geometry-form-field-input>\n\n<div class=\"header\">\n  <mat-slide-toggle\n    *ngIf=\"!isPredefined()\"\n    [checked]=\"drawControlIsActive\"\n    [labelPosition]=\"'before'\"\n    (change)=\"onDrawControlChange()\"\n  >\n    {{ 'igo.geo.spatialFilter.drawControl' | translate }}\n  </mat-slide-toggle>\n  <mat-slide-toggle\n    *ngIf=\"!isPredefined()\"\n    [checked]=\"freehandDrawIsActive\"\n    [labelPosition]=\"'before'\"\n    (change)=\"onfreehandControlChange()\"\n  >\n    {{ 'igo.geo.spatialFilter.freehandControl' | translate }}\n  </mat-slide-toggle>\n</div>\n\n<div class=\"buffer-unit\" *ngIf=\"isPolygon()\">\n  <mat-form-field class=\"buffer\">\n    <input\n      type=\"number\"\n      matInput\n      placeholder=\"{{ 'igo.geo.spatialFilter.buffer' | translate }}\"\n      [formControl]=\"bufferFormControl\"\n      [value]=\"0\"\n      [readonly]=\"this.formControl.value === null\"\n    />\n  </mat-form-field>\n\n  <mat-form-field class=\"unit-field\">\n    <mat-select\n      [value]=\"measureUnit\"\n      (selectionChange)=\"onMeasureUnitChange($event.value)\"\n    >\n      <mat-option\n        *ngFor=\"let measureUnit of measureUnits\"\n        [value]=\"measureUnit\"\n      >\n        {{ 'igo.geo.measure.' + measureUnit | translate }}\n      </mat-option>\n    </mat-select>\n  </mat-form-field>\n</div>\n\n<div class=\"radius-unit\" *ngIf=\"isPoint()\">\n  <mat-form-field class=\"radius\">\n    <input\n      type=\"number\"\n      matInput\n      placeholder=\"{{ 'igo.geo.spatialFilter.radius' | translate }}\"\n      [formControl]=\"radiusFormControl\"\n      [value]=\"1000\"\n      (input)=\"getRadius()\"\n      [readonly]=\"this.freehandDrawIsActive && this.formControl.value === null\"\n    />\n  </mat-form-field>\n\n  <mat-form-field class=\"unit-field\">\n    <mat-select\n      [value]=\"measureUnit\"\n      (selectionChange)=\"onMeasureUnitChange($event.value)\"\n    >\n      <mat-option\n        *ngFor=\"let measureUnit of measureUnits\"\n        [value]=\"measureUnit\"\n      >\n        {{ 'igo.geo.measure.' + measureUnit | translate }}\n      </mat-option>\n    </mat-select>\n  </mat-form-field>\n</div>\n\n<mat-label class=\"title mat-typography\"\n  >{{ 'igo.geo.spatialFilter.search' | translate }} :\n</mat-label>\n<mat-radio-group [value]=\"selectedItemType\">\n  <mat-radio-button\n    *ngFor=\"let item of itemType\"\n    [value]=\"item\"\n    (change)=\"onItemTypeChange($event)\"\n  >\n    {{ 'igo.geo.spatialFilter.' + item | translate }}\n  </mat-radio-button>\n</mat-radio-group>\n\n<div\n  class=\"thematics\"\n  *ngIf=\"\n    (selectedItemType === 'Thematics' && !tableTemplate) ||\n    (selectedItemType === 'Thematics' && tableTemplate && !listIsVisible)\n  \"\n>\n  <mat-table>\n    <!-- Name Column -->\n    <ng-container matColumnDef=\"name\">\n      <mat-header-cell *matHeaderCellDef class=\"thematics-header\">{{\n        'igo.geo.spatialFilter.Thematics' | translate\n      }}</mat-header-cell>\n    </ng-container>\n\n    <!-- Select Column -->\n    <ng-container matColumnDef=\"select\">\n      <mat-header-cell *matHeaderCellDef class=\"checks-header\">\n        <mat-checkbox\n          (change)=\"$event ? masterToggle() : null\"\n          [checked]=\"isAllSelected()\"\n          [indeterminate]=\"selectedThematics.hasValue() && !isAllSelected()\"\n        >\n        </mat-checkbox>\n      </mat-header-cell>\n    </ng-container>\n\n    <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n    <mat-row *matRowDef=\"let row; columns: displayedColumns\"></mat-row>\n  </mat-table>\n\n  <mat-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\">\n    <!-- This is the tree node template for leaf nodes -->\n    <mat-tree-node *matTreeNodeDef=\"let node\" matTreeNodeToggle>\n      <li class=\"mat-tree-node\">\n        <!-- use a disabled button to provide padding for tree leaf -->\n        <button mat-icon-button disabled></button>\n        {{ node.name }}\n        <mat-checkbox\n          class=\"tree-check\"\n          (click)=\"$event.stopPropagation()\"\n          (change)=\"$event ? onToggleChange(node) : null\"\n          [checked]=\"selectedThematics.isSelected(node)\"\n        >\n        </mat-checkbox>\n      </li>\n    </mat-tree-node>\n\n    <!-- This is the tree node template for expandable nodes -->\n    <mat-nested-tree-node *matTreeNodeDef=\"let node; when: hasChild\">\n      <div class=\"mat-tree-node\">\n        <button mat-icon-button (click)=\"onToggleClick(node)\">\n          <mat-icon>{{\n            treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'\n          }}</mat-icon>\n        </button>\n        {{ node.name }}\n        <mat-checkbox\n          class=\"tree-check-2\"\n          (change)=\"$event ? childrensToggle(node) : null\"\n          [checked]=\"isAllSelected(node)\"\n          [indeterminate]=\"hasChildrenSelected(node) && !isAllSelected(node)\"\n        >\n        </mat-checkbox>\n      </div>\n      <ul\n        class=\"tree-ul\"\n        [class.example-tree-invisible]=\"!treeControl.isExpanded(node)\"\n      >\n        <ng-container matTreeNodeOutlet></ng-container>\n      </ul>\n    </mat-nested-tree-node>\n  </mat-tree>\n</div>\n\n<div class=\"buttons\">\n  <button\n    *ngIf=\"isPredefined()\"\n    mat-raised-button\n    class=\"clear-search-button\"\n    [disabled]=\"disabledClearSearch()\"\n    (click)=\"clearSearch()\"\n  >\n    {{ 'igo.geo.spatialFilter.clearSearch' | translate }}\n  </button>\n\n  <button\n    *ngIf=\"isPolygon() || isPoint()\"\n    mat-raised-button\n    class=\"clear-form-button\"\n    [disabled]=\"this.formControl.value === null\"\n    (click)=\"clearDrawZone()\"\n  >\n    {{ 'igo.geo.spatialFilter.clearForm' | translate }}\n  </button>\n\n  <button\n    mat-raised-button\n    class=\"search-button\"\n    [disabled]=\"disableSearchButton()\"\n    color=\"primary\"\n    (click)=\"toggleSearchButton()\"\n  >\n    {{ 'igo.geo.spatialFilter.goSearch' | translate }}\n  </button>\n\n  <button\n    mat-raised-button\n    class=\"remove-button\"\n    [disabled]=\"allLayers.length === 0\"\n    (click)=\"clearButton()\"\n  >\n    {{ 'igo.geo.spatialFilter.removeLayer' | translate }}\n  </button>\n\n  <button\n    mat-raised-button\n    class=\"export-button\"\n    [disabled]=\"!store.entities$.getValue().length\"\n    (click)=\"export.emit()\"\n  >\n    {{ 'igo.geo.spatialFilter.exportLayer' | translate }}\n  </button>\n</div>\n\n<button\n  class=\"expand-more\"\n  *ngIf=\"store.all().length && tableTemplate && !listIsVisible\"\n  mat-icon-button\n  matTooltipShowDelay=\"500\"\n  [matTooltip]=\"'igo.geo.spatialFilter.showSearchResults' | translate\"\n  (click)=\"toggleVisibleList()\"\n>\n  <mat-icon>expand_more</mat-icon>\n</button>\n\n<div\n  class=\"results\"\n  *ngIf=\"store.all().length && tableTemplate && listIsVisible\"\n>\n  <button\n    *ngIf=\"listIsVisible\"\n    mat-icon-button\n    matTooltipShowDelay=\"500\"\n    [matTooltip]=\"'igo.geo.spatialFilter.hideSearchResults' | translate\"\n    (click)=\"toggleVisibleList()\"\n  >\n    <mat-icon>expand_less</mat-icon>\n  </button>\n  <igo-entity-table\n    class=\"results-list\"\n    [template]=\"tableTemplate\"\n    [store]=\"store\"\n    (entitySelectChange)=\"entityChange.emit($event)\"\n  >\n  </igo-entity-table>\n</div>\n", styles: [":host .header{margin-top:5px;width:100%}:host .mat-mdc-slide-toggle{padding:5px;width:100%}:host .mat-mdc-slide-toggle ::ng-deep .mdc-form-field{width:100%}:host .mat-mdc-slide-toggle ::ng-deep .mdc-label{margin-left:0;width:calc(100% - 60px)}:host .title{margin-left:5px;font-size:initial}:host .mat-mdc-radio-group{display:flex;flex-direction:column}:host .mat-mdc-radio-button{display:inline-flex;position:relative;margin-left:12px}:host .mat-mdc-form-field{margin-top:5px}:host .mat-column-select{overflow:auto}:host .buttons{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:16px 0}:host .thematics{max-height:35%;overflow:auto;margin-top:5px;width:98%}:host .results{overflow:auto;max-height:250px;width:98%}:host .mat-column-typeResults{max-width:100px;margin-right:5px}:host .buffer-unit,:host .radius-unit{display:flex;width:100%;padding:5px;box-sizing:border-box}:host .radius,:host .buffer{flex-flow:column nowrap;flex:2}:host .unit-field{flex:1;margin-left:8px}:host .example-tree-invisible{display:none}:host .tree-ul{margin:0;padding:0 0 0 20px;list-style-type:none}:host .tree-check,:host .tree-check-2{position:relative;margin-left:auto;margin-right:5px}:host .thematics-header{max-width:250px}:host .checks-header{padding:none;max-width:calc(100% - 316px);overflow:hidden}:host .mat-mdc-checkbox{padding:5px}:host .mat-tree-node{position:relative;min-height:42px;width:280px}:host .mat-mdc-header-cell{height:56px}:host .results{max-height:45%;width:98%}:host .results igo-entity-table ::ng-deep div.table-container{overflow:unset}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: SpatialFilterService }, { type: i2$3.MessageService }, { type: i1$2.LanguageService }], propDecorators: { map: [{
                 type: Input
             }], type: [{
@@ -29654,7 +29691,7 @@ class SpatialFilterTypeComponent {
         this.zoneChange.emit(undefined);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SpatialFilterTypeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: SpatialFilterTypeComponent, isStandalone: true, selector: "igo-spatial-filter-type", inputs: { store: "store", selectedQueryType: "selectedQueryType", zone: "zone", layers: "layers" }, outputs: { eventType: "eventType", eventQueryType: "eventQueryType", zoneChange: "zoneChange", zoneWithBufferChange: "zoneWithBufferChange", bufferChange: "bufferChange", measureUnitChange: "measureUnitChange" }, ngImport: i0, template: "<mat-tab-group\n  [selectedIndex]=\"selectedTypeIndex.value\"\n  (selectedIndexChange)=\"selectedTypeIndex.setValue($event)\"\n  (selectedTabChange)=\"onTypeChange($event)\"\n>\n  <mat-tab [label]=\"'igo.geo.spatialFilter.predefined' | translate\">\n    <mat-form-field>\n      <mat-label>{{\n        'igo.geo.spatialFilter.searchLabel' | translate\n      }}</mat-label>\n      <mat-select\n        (selectionChange)=\"onSelectionChange()\"\n        [(value)]=\"selectedQueryType\"\n      >\n        <mat-option *ngFor=\"let queryType of queryType\" [value]=\"queryType\">\n          {{ 'igo.geo.terrapi.' + queryType | translate }}\n        </mat-option>\n      </mat-select>\n    </mat-form-field>\n    <igo-spatial-filter-list\n      [store]=\"store\"\n      [queryType]=\"selectedQueryType\"\n      [zone]=\"zone\"\n      [layers]=\"layers\"\n      (zoneChange)=\"zoneChange.emit($event)\"\n      (zoneWithBufferChange)=\"zoneWithBufferChange.emit($event)\"\n      (bufferChange)=\"bufferChange.emit($event)\"\n      (measureUnitChange)=\"measureUnitChange.emit($event)\"\n    >\n    </igo-spatial-filter-list>\n  </mat-tab>\n\n  <mat-tab [label]=\"'igo.geo.spatialFilter.draw' | translate\">\n    <div class=\"spatial-type-toggle\">\n      <mat-button-toggle-group\n        [value]=\"activeDrawType\"\n        (change)=\"onDrawTypeChange($event.value)\"\n      >\n        <mat-button-toggle\n          [value]=\"spatialType.Polygon\"\n          [matTooltip]=\"'igo.geo.spatialFilter.drawPolygon' | translate\"\n        >\n          <mat-icon svgIcon=\"pentagon-outline\"></mat-icon>\n        </mat-button-toggle>\n        <mat-button-toggle\n          [value]=\"spatialType.Point\"\n          [matTooltip]=\"'igo.geo.spatialFilter.drawCircle' | translate\"\n        >\n          <mat-icon svgIcon=\"record-circle-outline\"></mat-icon>\n        </mat-button-toggle>\n      </mat-button-toggle-group>\n    </div>\n  </mat-tab>\n</mat-tab-group>\n", styles: [":host .mat-mdc-form-field{width:100%}:host .mat-mdc-tab-group ::ng-deep .mat-mdc-tab-body-content{overflow:hidden}:host .mat-mdc-tab-group ::ng-deep .mat-mdc-tab-label{padding:10px}:host .mat-mdc-tab-group ::ng-deep .mat-mdc-tab-body-wrapper{margin-top:5px}:host .spatial-type-toggle{padding:10px;text-align:center}:host .spatial-type-toggle mat-button-toggle-group{width:50%}:host .spatial-type-toggle mat-button-toggle-group mat-button-toggle{width:50%}\n"], dependencies: [{ kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i3$4.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i3$4.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i8$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6$4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "component", type: SpatialFilterListComponent, selector: "igo-spatial-filter-list", inputs: ["store", "queryType", "zone", "layers"], outputs: ["zoneChange", "zoneWithBufferChange", "bufferChange", "measureUnitChange"] }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i4$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i4$1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: SpatialFilterTypeComponent, isStandalone: true, selector: "igo-spatial-filter-type", inputs: { store: "store", selectedQueryType: "selectedQueryType", zone: "zone", layers: "layers" }, outputs: { eventType: "eventType", eventQueryType: "eventQueryType", zoneChange: "zoneChange", zoneWithBufferChange: "zoneWithBufferChange", bufferChange: "bufferChange", measureUnitChange: "measureUnitChange" }, ngImport: i0, template: "<mat-tab-group\n  [selectedIndex]=\"selectedTypeIndex.value\"\n  (selectedIndexChange)=\"selectedTypeIndex.setValue($event)\"\n  (selectedTabChange)=\"onTypeChange($event)\"\n>\n  <mat-tab [label]=\"'igo.geo.spatialFilter.predefined' | translate\">\n    <mat-form-field>\n      <mat-label>{{\n        'igo.geo.spatialFilter.searchLabel' | translate\n      }}</mat-label>\n      <mat-select\n        (selectionChange)=\"onSelectionChange()\"\n        [(value)]=\"selectedQueryType\"\n      >\n        <mat-option *ngFor=\"let queryType of queryType\" [value]=\"queryType\">\n          {{ 'igo.geo.terrapi.' + queryType | translate }}\n        </mat-option>\n      </mat-select>\n    </mat-form-field>\n    <igo-spatial-filter-list\n      [store]=\"store\"\n      [queryType]=\"selectedQueryType\"\n      [zone]=\"zone\"\n      [layers]=\"layers\"\n      (zoneChange)=\"zoneChange.emit($event)\"\n      (zoneWithBufferChange)=\"zoneWithBufferChange.emit($event)\"\n      (bufferChange)=\"bufferChange.emit($event)\"\n      (measureUnitChange)=\"measureUnitChange.emit($event)\"\n    >\n    </igo-spatial-filter-list>\n  </mat-tab>\n\n  <mat-tab [label]=\"'igo.geo.spatialFilter.draw' | translate\">\n    <div class=\"spatial-type-toggle\">\n      <mat-button-toggle-group\n        [value]=\"activeDrawType\"\n        (change)=\"onDrawTypeChange($event.value)\"\n      >\n        <mat-button-toggle\n          [value]=\"spatialType.Polygon\"\n          [matTooltip]=\"'igo.geo.spatialFilter.drawPolygon' | translate\"\n        >\n          <mat-icon>pentagon</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>circle</mat-icon>\n        </mat-button-toggle>\n      </mat-button-toggle-group>\n    </div>\n  </mat-tab>\n</mat-tab-group>\n", styles: [":host .mat-mdc-form-field{width:100%}:host .mat-mdc-tab-group ::ng-deep .mat-mdc-tab-body-content{overflow:hidden}:host .mat-mdc-tab-group ::ng-deep .mat-mdc-tab-label{padding:10px}:host .mat-mdc-tab-group ::ng-deep .mat-mdc-tab-body-wrapper{margin-top:5px}:host .spatial-type-toggle{padding:10px;text-align:center}:host .spatial-type-toggle mat-button-toggle-group{width:50%}:host .spatial-type-toggle mat-button-toggle-group mat-button-toggle{width:50%}\n"], dependencies: [{ kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i3$4.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i3$4.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i8$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6$4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "component", type: SpatialFilterListComponent, selector: "igo-spatial-filter-list", inputs: ["store", "queryType", "zone", "layers"], outputs: ["zoneChange", "zoneWithBufferChange", "bufferChange", "measureUnitChange"] }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i4$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i4$1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SpatialFilterTypeComponent, decorators: [{
             type: Component,
@@ -29669,7 +29706,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                         MatTooltipModule,
                         MatIconModule,
                         TranslateModule
-                    ], 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"] }]
+                    ], 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>pentagon</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>circle</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"] }]
         }], ctorParameters: () => [], propDecorators: { store: [{
                 type: Input
             }], selectedQueryType: [{
@@ -29726,7 +29763,7 @@ class TimeFilterFormComponent {
         }
     }
     interval;
-    playIcon = 'play-circle';
+    playIcon = 'play_circle';
     resetIcon = 'replay';
     change = new EventEmitter();
     yearChange = new EventEmitter();
@@ -29979,7 +30016,7 @@ class TimeFilterFormComponent {
             this.stopFilter();
         }
         else {
-            this.playIcon = 'pause-circle';
+            this.playIcon = 'pause_circle';
             this.interval = setInterval((that) => {
                 let newMinDateNumber;
                 const maxDateNumber = new Date(that.max);
@@ -30004,7 +30041,7 @@ class TimeFilterFormComponent {
             this.stopFilter();
         }
         else {
-            this.playIcon = 'pause-circle';
+            this.playIcon = 'pause_circle';
             this.interval = setInterval(() => {
                 if (this.year + this.mySlider.step > this.max.getFullYear()) {
                     this.stopFilter();
@@ -30021,7 +30058,7 @@ class TimeFilterFormComponent {
             clearInterval(this.interval);
         }
         this.interval = undefined;
-        this.playIcon = 'play-circle';
+        this.playIcon = 'play_circle';
     }
     handleSliderDateChange(event) {
         this.date = new Date(event.value);
@@ -30159,7 +30196,7 @@ class TimeFilterFormComponent {
         return moment.duration(step).asMilliseconds();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: TimeFilterFormComponent, deps: [{ token: i6$4.DateAdapter }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: TimeFilterFormComponent, isStandalone: true, selector: "igo-time-filter-form", inputs: { layer: "layer", options: "options", currentValue: "currentValue" }, outputs: { change: "change", yearChange: "yearChange" }, viewQueries: [{ propertyName: "mySlider", first: true, predicate: MatSlider, descendants: true }], ngImport: i0, template: "<div *ngIf=\"style === 'calendar' && type !== 'year'\">\n  <div *ngIf=\"!isRange\" class=\"igo-col igo-col-100 igo-col-100-m\">\n    <mat-form-field>\n      <mat-datetimepicker-toggle\n        class=\"time-filter-mat-datetimepicker-toggle\"\n        [for]=\"datetimePicker\"\n        matSuffix\n      ></mat-datetimepicker-toggle>\n      <mat-datetimepicker\n        #datetimePicker\n        [type]=\"type\"\n        [openOnFocus]=\"true\"\n        [timeInterval]=\"5\"\n      ></mat-datetimepicker>\n      <input\n        matInput\n        autocomplete=\"false\"\n        placeholder=\"{{ 'igo.geo.timeFilter.date' | translate }}\"\n        [matDatetimepicker]=\"datetimePicker\"\n        [(ngModel)]=\"date\"\n        [min]=\"min\"\n        [max]=\"max\"\n        readonly=\"readonly\"\n        (dateChange)=\"handleDateChange($event)\"\n      />\n    </mat-form-field>\n  </div>\n\n  <div *ngIf=\"isRange\">\n    <div class=\"igo-col igo-col-100\">\n      <mat-form-field>\n        <mat-datetimepicker-toggle\n          class=\"time-filter-mat-datetimepicker-toggle\"\n          [for]=\"minDatetimePicker\"\n          matSuffix\n        ></mat-datetimepicker-toggle>\n        <mat-datetimepicker\n          #minDatetimePicker\n          [type]=\"type\"\n          [openOnFocus]=\"true\"\n          [timeInterval]=\"5\"\n        ></mat-datetimepicker>\n        <input\n          matInput\n          autocomplete=\"false\"\n          placeholder=\"{{ 'igo.geo.timeFilter.startDate' | translate }}\"\n          [matDatetimepicker]=\"minDatetimePicker\"\n          [(ngModel)]=\"startDate\"\n          [min]=\"min\"\n          [max]=\"getRangeMaxDate()\"\n          readonly=\"readonly\"\n          (input)=\"(startDate)\"\n          (dateChange)=\"handleDateChange($event)\"\n        />\n      </mat-form-field>\n    </div>\n\n    <div class=\"igo-col igo-col-100\">\n      <mat-form-field>\n        <mat-datetimepicker-toggle\n          class=\"time-filter-mat-datetimepicker-toggle\"\n          [for]=\"maxDatetimePicker\"\n          matSuffix\n        ></mat-datetimepicker-toggle>\n        <mat-datetimepicker\n          #maxDatetimePicker\n          [type]=\"type\"\n          [openOnFocus]=\"true\"\n          [timeInterval]=\"5\"\n        ></mat-datetimepicker>\n        <input\n          matInput\n          autocomplete=\"false\"\n          placeholder=\"{{ 'igo.geo.timeFilter.endDate' | translate }}\"\n          [matDatetimepicker]=\"maxDatetimePicker\"\n          [(ngModel)]=\"endDate\"\n          [min]=\"getRangeMinDate()\"\n          [max]=\"max\"\n          readonly=\"readonly\"\n          (dateChange)=\"handleDateChange($event)\"\n        />\n      </mat-form-field>\n    </div>\n  </div>\n</div>\n\n<div *ngIf=\"style === 'calendar' && type === 'year'\">\n  <div *ngIf=\"!isRange\" class=\"igo-col igo-col-100 igo-col-100-m\">\n    <mat-form-field>\n      <mat-select\n        placeholder=\"{{ 'igo.geo.timeFilter.date' | translate }}\"\n        [(ngModel)]=\"year\"\n        (selectionChange)=\"handleYearChange($event)\"\n      >\n        <mat-option [value]=\"year\" *ngFor=\"let year of listYears\">{{\n          year\n        }}</mat-option>\n      </mat-select>\n    </mat-form-field>\n  </div>\n\n  <div *ngIf=\"isRange\">\n    <div class=\"igo-col igo-col-100\">\n      <mat-form-field>\n        <mat-select\n          placeholder=\"{{ 'igo.geo.timeFilter.startDate' | translate }}\"\n          [(ngModel)]=\"startYear\"\n          (selectionChange)=\"handleYearChange($event)\"\n        >\n          <mat-option\n            [value]=\"startYear\"\n            *ngFor=\"let startYear of startListYears\"\n            >{{ startYear }}</mat-option\n          >\n        </mat-select>\n      </mat-form-field>\n    </div>\n\n    <div class=\"igo-col igo-col-100\">\n      <mat-form-field>\n        <mat-select\n          placeholder=\"{{ 'igo.geo.timeFilter.endDate' | translate }}\"\n          [(ngModel)]=\"endYear\"\n          (selectionChange)=\"handleYearChange($event)\"\n        >\n          <mat-option [value]=\"endYear\" *ngFor=\"let endYear of endListYears\">{{\n            endYear\n          }}</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </div>\n  </div>\n</div>\n\n<br />\n<div\n  *ngIf=\"!isRange && style === 'slider' && type === 'year'\"\n  class=\"igo-col igo-col-100 igo-col-100-m mat-typography\"\n>\n  <span>{{ startYear }}</span>\n  <!-- TODO: The 'tickInterval' property no longer exists -->\n  <mat-slider\n    id=\"time-slider\"\n    step=\"{{ step }}\"\n    [min]=\"startYear\"\n    [max]=\"endYear\"\n    [color]=\"color\"\n    thumbLabel\n    [disabled]=\"!options.enabled || !layer.visible\"\n    #ngSlider\n    ><input\n      matSliderThumb\n      [value]=\"handleSliderValue()\"\n      (input)=\"\n        handleSliderYearChange({\n          source: ngSliderThumb,\n          parent: ngSlider,\n          value: ngSliderThumb.value\n        })\n      \"\n      #ngSliderThumb=\"matSliderThumb\"\n      (change)=\"\n        handleSliderYearChange({\n          source: ngSliderThumb,\n          parent: ngSlider,\n          value: ngSliderThumb.value\n        })\n      \"\n    />\n  </mat-slider>\n  <span>{{ endYear }}</span>\n  <p *ngIf=\"options.enabled\" class=\"date-below\">{{ year }}</p>\n  <div #actions class=\"igo-layer-actions-container\">\n    <mat-slide-toggle\n      (change)=\"toggleFilterState()\"\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"'igo.geo.filter.toggleFilterState' | translate\"\n      [color]=\"color\"\n      [checked]=\"options.enabled\"\n      [disabled]=\"!layer.visible\"\n    >\n    </mat-slide-toggle>\n    <button\n      [disabled]=\"!options.enabled || !layer.visible\"\n      mat-icon-button\n      color=\"primary\"\n      (click)=\"playYear($event)\"\n    >\n      <mat-icon svgIcon=\"{{ playIcon }}\"></mat-icon>\n    </button>\n    <button\n      [disabled]=\"!options.enabled || !layer.visible\"\n      mat-icon-button\n      color=\"primary\"\n      (click)=\"resetFilter($event)\"\n    >\n      <mat-icon svgIcon=\"{{ resetIcon }}\"></mat-icon>\n    </button>\n  </div>\n</div>\n\n<div\n  *ngIf=\"style === 'slider' && type !== 'year'\"\n  class=\"igo-col igo-col-100 igo-col-100-m\"\n>\n  <!-- TODO: The 'tickInterval' property no longer exists -->\n  <mat-slider\n    id=\"time-slider\"\n    step=\"{{ step }}\"\n    [min]=\"dateToNumber(min)\"\n    [max]=\"dateToNumber(max)\"\n    thumbLabel\n    (selectionChange)=\"handleSliderDateChange($event)\"\n    #ngSlider\n    ><input\n      matSliderThumb\n      [value]=\"handleSliderValue()\"\n      (input)=\"\n        handleSliderDateChange({\n          source: ngSliderThumb,\n          parent: ngSlider,\n          value: ngSliderThumb.value\n        })\n      \"\n      #ngSliderThumb=\"matSliderThumb\"\n    />\n  </mat-slider>\n  <p class=\"date-below\">{{ handleSliderTooltip() }}</p>\n  <button mat-icon-button color=\"primary\" (click)=\"playFilter($event)\">\n    <mat-icon svgIcon=\"{{ playIcon }}\"></mat-icon>\n  </button>\n</div>\n", styles: [":host .igo-layer-filters-container{padding-left:5px}:host #time-slider{width:70%}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){:host #time-slider{width:60%}}:host .date-below{margin:0}:host .igo-layer-actions-container{display:flex;align-items:center;justify-content:center}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatDatetimepickerModule }, { kind: "component", type: i3$7.MatDatetimepickerComponent, selector: "mat-datetimepicker", inputs: ["multiYearSelector", "twelvehour", "startView", "mode", "timeInterval", "ariaNextMonthLabel", "ariaPrevMonthLabel", "ariaNextYearLabel", "ariaPrevYearLabel", "preventSameDateTimeSelection", "panelClass", "startAt", "openOnFocus", "type", "touchUi", "disabled"], outputs: ["selectedChanged", "opened", "closed", "viewChanged"], exportAs: ["matDatetimepicker"] }, { kind: "component", type: i3$7.MatDatetimepickerToggleComponent, selector: "mat-datetimepicker-toggle", inputs: ["for", "disabled"], exportAs: ["matDatetimepickerToggle"] }, { kind: "directive", type: i3$7.MatDatetimepickerInputDirective, selector: "input[matDatetimepicker]", inputs: ["matDatetimepicker", "matDatepickerFilter", "value", "min", "max", "disabled"], outputs: ["dateChange", "dateInput"], exportAs: ["matDatepickerInput"] }, { kind: "ngmodule", type: MatNativeDateModule }, { kind: "ngmodule", type: // For the DateAdapter provider
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: TimeFilterFormComponent, isStandalone: true, selector: "igo-time-filter-form", inputs: { layer: "layer", options: "options", currentValue: "currentValue" }, outputs: { change: "change", yearChange: "yearChange" }, viewQueries: [{ propertyName: "mySlider", first: true, predicate: MatSlider, descendants: true }], ngImport: i0, template: "<div *ngIf=\"style === 'calendar' && type !== 'year'\">\n  <div *ngIf=\"!isRange\" class=\"igo-col igo-col-100 igo-col-100-m\">\n    <mat-form-field>\n      <mat-datetimepicker-toggle\n        class=\"time-filter-mat-datetimepicker-toggle\"\n        [for]=\"datetimePicker\"\n        matSuffix\n      ></mat-datetimepicker-toggle>\n      <mat-datetimepicker\n        #datetimePicker\n        [type]=\"type\"\n        [openOnFocus]=\"true\"\n        [timeInterval]=\"5\"\n      ></mat-datetimepicker>\n      <input\n        matInput\n        autocomplete=\"false\"\n        placeholder=\"{{ 'igo.geo.timeFilter.date' | translate }}\"\n        [matDatetimepicker]=\"datetimePicker\"\n        [(ngModel)]=\"date\"\n        [min]=\"min\"\n        [max]=\"max\"\n        readonly=\"readonly\"\n        (dateChange)=\"handleDateChange($event)\"\n      />\n    </mat-form-field>\n  </div>\n\n  <div *ngIf=\"isRange\">\n    <div class=\"igo-col igo-col-100\">\n      <mat-form-field>\n        <mat-datetimepicker-toggle\n          class=\"time-filter-mat-datetimepicker-toggle\"\n          [for]=\"minDatetimePicker\"\n          matSuffix\n        ></mat-datetimepicker-toggle>\n        <mat-datetimepicker\n          #minDatetimePicker\n          [type]=\"type\"\n          [openOnFocus]=\"true\"\n          [timeInterval]=\"5\"\n        ></mat-datetimepicker>\n        <input\n          matInput\n          autocomplete=\"false\"\n          placeholder=\"{{ 'igo.geo.timeFilter.startDate' | translate }}\"\n          [matDatetimepicker]=\"minDatetimePicker\"\n          [(ngModel)]=\"startDate\"\n          [min]=\"min\"\n          [max]=\"getRangeMaxDate()\"\n          readonly=\"readonly\"\n          (input)=\"(startDate)\"\n          (dateChange)=\"handleDateChange($event)\"\n        />\n      </mat-form-field>\n    </div>\n\n    <div class=\"igo-col igo-col-100\">\n      <mat-form-field>\n        <mat-datetimepicker-toggle\n          class=\"time-filter-mat-datetimepicker-toggle\"\n          [for]=\"maxDatetimePicker\"\n          matSuffix\n        ></mat-datetimepicker-toggle>\n        <mat-datetimepicker\n          #maxDatetimePicker\n          [type]=\"type\"\n          [openOnFocus]=\"true\"\n          [timeInterval]=\"5\"\n        ></mat-datetimepicker>\n        <input\n          matInput\n          autocomplete=\"false\"\n          placeholder=\"{{ 'igo.geo.timeFilter.endDate' | translate }}\"\n          [matDatetimepicker]=\"maxDatetimePicker\"\n          [(ngModel)]=\"endDate\"\n          [min]=\"getRangeMinDate()\"\n          [max]=\"max\"\n          readonly=\"readonly\"\n          (dateChange)=\"handleDateChange($event)\"\n        />\n      </mat-form-field>\n    </div>\n  </div>\n</div>\n\n<div *ngIf=\"style === 'calendar' && type === 'year'\">\n  <div *ngIf=\"!isRange\" class=\"igo-col igo-col-100 igo-col-100-m\">\n    <mat-form-field>\n      <mat-select\n        placeholder=\"{{ 'igo.geo.timeFilter.date' | translate }}\"\n        [(ngModel)]=\"year\"\n        (selectionChange)=\"handleYearChange($event)\"\n      >\n        <mat-option [value]=\"year\" *ngFor=\"let year of listYears\">{{\n          year\n        }}</mat-option>\n      </mat-select>\n    </mat-form-field>\n  </div>\n\n  <div *ngIf=\"isRange\">\n    <div class=\"igo-col igo-col-100\">\n      <mat-form-field>\n        <mat-select\n          placeholder=\"{{ 'igo.geo.timeFilter.startDate' | translate }}\"\n          [(ngModel)]=\"startYear\"\n          (selectionChange)=\"handleYearChange($event)\"\n        >\n          <mat-option\n            [value]=\"startYear\"\n            *ngFor=\"let startYear of startListYears\"\n            >{{ startYear }}</mat-option\n          >\n        </mat-select>\n      </mat-form-field>\n    </div>\n\n    <div class=\"igo-col igo-col-100\">\n      <mat-form-field>\n        <mat-select\n          placeholder=\"{{ 'igo.geo.timeFilter.endDate' | translate }}\"\n          [(ngModel)]=\"endYear\"\n          (selectionChange)=\"handleYearChange($event)\"\n        >\n          <mat-option [value]=\"endYear\" *ngFor=\"let endYear of endListYears\">{{\n            endYear\n          }}</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </div>\n  </div>\n</div>\n\n<br />\n<div\n  *ngIf=\"!isRange && style === 'slider' && type === 'year'\"\n  class=\"igo-col igo-col-100 igo-col-100-m mat-typography\"\n>\n  <span>{{ startYear }}</span>\n  <!-- TODO: The 'tickInterval' property no longer exists -->\n  <mat-slider\n    id=\"time-slider\"\n    step=\"{{ step }}\"\n    [min]=\"startYear\"\n    [max]=\"endYear\"\n    [color]=\"color\"\n    thumbLabel\n    [disabled]=\"!options.enabled || !layer.visible\"\n    #ngSlider\n    ><input\n      matSliderThumb\n      [value]=\"handleSliderValue()\"\n      (input)=\"\n        handleSliderYearChange({\n          source: ngSliderThumb,\n          parent: ngSlider,\n          value: ngSliderThumb.value\n        })\n      \"\n      #ngSliderThumb=\"matSliderThumb\"\n      (change)=\"\n        handleSliderYearChange({\n          source: ngSliderThumb,\n          parent: ngSlider,\n          value: ngSliderThumb.value\n        })\n      \"\n    />\n  </mat-slider>\n  <span>{{ endYear }}</span>\n  <p *ngIf=\"options.enabled\" class=\"date-below\">{{ year }}</p>\n  <div #actions class=\"igo-layer-actions-container\">\n    <mat-slide-toggle\n      (change)=\"toggleFilterState()\"\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"'igo.geo.filter.toggleFilterState' | translate\"\n      [color]=\"color\"\n      [checked]=\"options.enabled\"\n      [disabled]=\"!layer.visible\"\n    >\n    </mat-slide-toggle>\n    <button\n      [disabled]=\"!options.enabled || !layer.visible\"\n      mat-icon-button\n      color=\"primary\"\n      (click)=\"playYear($event)\"\n    >\n      <mat-icon>{{ 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>{{ 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>{{ playIcon }}</mat-icon>\n  </button>\n</div>\n", styles: [":host .igo-layer-filters-container{padding-left:5px}:host #time-slider{width:70%}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){:host #time-slider{width:60%}}:host .date-below{margin:0}:host .igo-layer-actions-container{display:flex;align-items:center;justify-content:center}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatDatetimepickerModule }, { kind: "component", type: i3$7.MatDatetimepickerComponent, selector: "mat-datetimepicker", inputs: ["multiYearSelector", "twelvehour", "startView", "mode", "timeInterval", "ariaNextMonthLabel", "ariaPrevMonthLabel", "ariaNextYearLabel", "ariaPrevYearLabel", "preventSameDateTimeSelection", "panelClass", "startAt", "openOnFocus", "type", "touchUi", "disabled"], outputs: ["selectedChanged", "opened", "closed", "viewChanged"], exportAs: ["matDatetimepicker"] }, { kind: "component", type: i3$7.MatDatetimepickerToggleComponent, selector: "mat-datetimepicker-toggle", inputs: ["for", "disabled"], exportAs: ["matDatetimepickerToggle"] }, { kind: "directive", type: i3$7.MatDatetimepickerInputDirective, selector: "input[matDatetimepicker]", inputs: ["matDatetimepicker", "matDatepickerFilter", "value", "min", "max", "disabled"], outputs: ["dateChange", "dateInput"], exportAs: ["matDatepickerInput"] }, { kind: "ngmodule", type: MatNativeDateModule }, { kind: "ngmodule", type: // For the DateAdapter provider
                 MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i8$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6$4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatSliderModule }, { kind: "component", type: i2$6.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i2$6.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i5$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: TimeFilterFormComponent, decorators: [{
@@ -30180,7 +30217,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                         MatButtonModule,
                         MatIconModule,
                         TranslateModule
-                    ], 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"] }]
+                    ], 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>{{ 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>{{ 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>{{ 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"] }]
         }], ctorParameters: () => [{ type: i6$4.DateAdapter }], propDecorators: { layer: [{
                 type: Input
             }], options: [{
@@ -30242,7 +30279,7 @@ class TimeFilterItemComponent {
         this.filtersCollapsed = !this.filtersCollapsed;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: TimeFilterItemComponent, deps: [{ token: TimeFilterService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: TimeFilterItemComponent, isStandalone: true, selector: "igo-time-filter-item", inputs: { header: "header", layer: "layer" }, providers: [TimeFilterService], ngImport: i0, template: "<mat-list-item *ngIf=\"header\">\n  <mat-icon\n    class=\"igo-chevron\"\n    matListItemIcon\n    igoCollapse\n    [target]=\"filters\"\n    [collapsed]=\"filtersCollapsed\"\n    (click)=\"toggleFiltersCollapsed()\"\n    svgIcon=\"chevron-up\"\n  >\n  </mat-icon>\n\n  <span\n    matListItemTitle\n    (click)=\"toggleLegendOnClick()\"\n    [ngStyle]=\"{ cursor: filtersCollapsed ? 'default' : 'pointer' }\"\n    >{{ layer.title }}</span\n  >\n\n  <button\n    *ngIf=\"header\"\n    mat-icon-button\n    matListItemMeta\n    [color]=\"layer.visible ? 'primary' : 'default'\"\n    collapsibleButton\n    tooltip-position=\"below\"\n    matTooltipShowDelay=\"500\"\n    [matTooltip]=\"\n      layer.visible\n        ? ('igo.geo.layer.hideLayer' | translate)\n        : ('igo.geo.layer.showLayer' | translate)\n    \"\n    (click)=\"layer.visible = !layer.visible\"\n  >\n    <mat-icon\n      [ngClass]=\"{ disabled: (inResolutionRange$ | async) === false }\"\n      [svgIcon]=\"layer.visible ? 'eye' : 'eye-off'\"\n    >\n    </mat-icon>\n  </button>\n</mat-list-item>\n\n<div #filters class=\"igo-datasource-filters-container\">\n  <div #legend class=\"igo-layer-legend-container\">\n    <igo-layer-legend *ngIf=\"showLegend$ | async\" [layer]=\"layer\">\n    </igo-layer-legend>\n  </div>\n  <igo-time-filter-form\n    [layer]=\"layer\"\n    [options]=\"datasource.options.timeFilter\"\n    [currentValue]=\"datasource.options.params.TIME\"\n    (change)=\"handleDateChange($event)\"\n    (yearChange)=\"handleYearChange($event)\"\n  >\n  </igo-time-filter-form>\n</div>\n", styles: [":host{overflow:hidden}:host .igo-datasource-filters-container{text-align:center;width:100%;display:inline-block;padding-top:5px}:host .igo-layer-legend-container{padding-left:1.125em;width:calc(100% - 18px)}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i2$5.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i2$5.MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "directive", type: i2$5.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "directive", type: i2$5.MatListItemMeta, selector: "[matListItemMeta]" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: CollapseDirective, selector: "[igoCollapse]", inputs: ["target", "collapsed"], outputs: ["toggle"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: LayerLegendComponent, selector: "igo-layer-legend", inputs: ["updateLegendOnResolutionChange", "layer"] }, { kind: "component", type: TimeFilterFormComponent, selector: "igo-time-filter-form", inputs: ["layer", "options", "currentValue"], outputs: ["change", "yearChange"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: TimeFilterItemComponent, isStandalone: true, selector: "igo-time-filter-item", inputs: { header: "header", layer: "layer" }, providers: [TimeFilterService], ngImport: i0, template: "<mat-list-item *ngIf=\"header\">\n  <mat-icon\n    class=\"igo-chevron\"\n    matListItemIcon\n    igoCollapse\n    [target]=\"filters\"\n    [collapsed]=\"filtersCollapsed\"\n    (click)=\"toggleFiltersCollapsed()\"\n  >\n    expand_less\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 [ngClass]=\"{ disabled: (inResolutionRange$ | async) === false }\"\n      >{{ layer.visible ? 'visibility' : 'visibility_off' }}\n    </mat-icon>\n  </button>\n</mat-list-item>\n\n<div #filters class=\"igo-datasource-filters-container\">\n  <div #legend class=\"igo-layer-legend-container\">\n    <igo-layer-legend *ngIf=\"showLegend$ | async\" [layer]=\"layer\">\n    </igo-layer-legend>\n  </div>\n  <igo-time-filter-form\n    [layer]=\"layer\"\n    [options]=\"datasource.options.timeFilter\"\n    [currentValue]=\"datasource.options.params.TIME\"\n    (change)=\"handleDateChange($event)\"\n    (yearChange)=\"handleYearChange($event)\"\n  >\n  </igo-time-filter-form>\n</div>\n", styles: [":host{overflow:hidden}:host .igo-datasource-filters-container{text-align:center;width:100%;display:inline-block;padding-top:5px}:host .igo-layer-legend-container{padding-left:1.125em;width:calc(100% - 18px)}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i2$5.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i2$5.MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "directive", type: i2$5.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "directive", type: i2$5.MatListItemMeta, selector: "[matListItemMeta]" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: CollapseDirective, selector: "[igoCollapse]", inputs: ["target", "collapsed"], outputs: ["toggle"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: LayerLegendComponent, selector: "igo-layer-legend", inputs: ["updateLegendOnResolutionChange", "layer"] }, { kind: "component", type: TimeFilterFormComponent, selector: "igo-time-filter-form", inputs: ["layer", "options", "currentValue"], outputs: ["change", "yearChange"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: TimeFilterItemComponent, decorators: [{
             type: Component,
@@ -30259,7 +30296,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                         TimeFilterFormComponent,
                         AsyncPipe,
                         TranslateModule
-                    ], providers: [TimeFilterService], 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"] }]
+                    ], providers: [TimeFilterService], 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  >\n    expand_less\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 [ngClass]=\"{ disabled: (inResolutionRange$ | async) === false }\"\n      >{{ layer.visible ? 'visibility' : 'visibility_off' }}\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"] }]
         }], ctorParameters: () => [{ type: TimeFilterService }], propDecorators: { header: [{
                 type: Input
             }], layer: [{
@@ -30296,7 +30333,7 @@ class TimeFilterButtonComponent {
         this.options = this.layer.dataSource.options;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: TimeFilterButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: TimeFilterButtonComponent, isStandalone: true, selector: "igo-time-filter-button", inputs: { layer: "layer", map: "map", color: "color", header: "header" }, ngImport: i0, template: "<button\n  *ngIf=\"header && options.timeFilterable && options.timeFilter\"\n  mat-icon-button\n  collapsibleButton\n  tooltip-position=\"below\"\n  matTooltipShowDelay=\"500\"\n  [matTooltip]=\"'igo.geo.filter.filterBy' | translate\"\n  [color]=\"color\"\n>\n  <mat-icon\n    aria-hidden=\"false\"\n    [matBadge]=\"badge\"\n    matBadgeColor=\"warn\"\n    matBadgeSize=\"medium\"\n    svgIcon=\"history\"\n  ></mat-icon>\n</button>\n\n<div\n  #ogcFilter\n  class=\"igo-layer-actions-container\"\n  *ngIf=\"header && options.timeFilterable && options.timeFilter\"\n>\n  <igo-time-filter-item\n    *ngIf=\"timeFilterCollapse && options.timeFilter\"\n    igoListItem\n    [header]=\"false\"\n    [layer]=\"layer\"\n  >\n  </igo-time-filter-item>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatBadgeModule }, { kind: "directive", type: i4$2.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: TimeFilterItemComponent, selector: "igo-time-filter-item", inputs: ["header", "layer"] }, { kind: "directive", type: ListItemDirective, selector: "[igoListItem]", inputs: ["color", "focused", "selected", "disabled"], outputs: ["beforeSelect", "beforeFocus", "beforeUnselect", "beforeUnfocus", "beforeDisable", "beforeEnable", "focus", "unfocus", "select", "unselect", "disable", "enable"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: TimeFilterButtonComponent, isStandalone: true, selector: "igo-time-filter-button", inputs: { layer: "layer", map: "map", color: "color", header: "header" }, ngImport: i0, template: "<button\n  *ngIf=\"header && options.timeFilterable && options.timeFilter\"\n  mat-icon-button\n  collapsibleButton\n  tooltip-position=\"below\"\n  matTooltipShowDelay=\"500\"\n  [matTooltip]=\"'igo.geo.filter.filterBy' | translate\"\n  [color]=\"color\"\n>\n  <mat-icon\n    aria-hidden=\"false\"\n    [matBadge]=\"badge\"\n    matBadgeColor=\"warn\"\n    matBadgeSize=\"medium\"\n    >history</mat-icon\n  >\n</button>\n\n<div\n  #ogcFilter\n  class=\"igo-layer-actions-container\"\n  *ngIf=\"header && options.timeFilterable && options.timeFilter\"\n>\n  <igo-time-filter-item\n    *ngIf=\"timeFilterCollapse && options.timeFilter\"\n    igoListItem\n    [header]=\"false\"\n    [layer]=\"layer\"\n  >\n  </igo-time-filter-item>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatBadgeModule }, { kind: "directive", type: i4$2.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: TimeFilterItemComponent, selector: "igo-time-filter-item", inputs: ["header", "layer"] }, { kind: "directive", type: ListItemDirective, selector: "[igoListItem]", inputs: ["color", "focused", "selected", "disabled"], outputs: ["beforeSelect", "beforeFocus", "beforeUnselect", "beforeUnfocus", "beforeDisable", "beforeEnable", "focus", "unfocus", "select", "unselect", "disable", "enable"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: TimeFilterButtonComponent, decorators: [{
             type: Component,
@@ -30309,7 +30346,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                         TimeFilterItemComponent,
                         ListItemDirective,
                         TranslateModule
-                    ], 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" }]
+                    ], 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    >history</mat-icon\n  >\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" }]
         }], ctorParameters: () => [], propDecorators: { layer: [{
                 type: Input
             }], map: [{
@@ -30519,7 +30556,7 @@ class ExportButtonComponent {
         return false;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ExportButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: ExportButtonComponent, isStandalone: true, selector: "igo-export-button", inputs: { layer: "layer", color: "color" }, ngImport: i0, template: "<button\n  *ngIf=\"layerIsExportable()\"\n  mat-icon-button\n  tooltip-position=\"below\"\n  matTooltipShowDelay=\"500\"\n  [matTooltip]=\"'igo.geo.download.action' | translate\"\n  [color]=\"color\"\n>\n  <!-- (click)=\"openDownload(layer)\"> -->\n  <mat-icon svgIcon=\"file-export\"></mat-icon>\n</button>\n", styles: [""], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: ExportButtonComponent, isStandalone: true, selector: "igo-export-button", inputs: { layer: "layer", color: "color" }, ngImport: i0, template: "<button\n  *ngIf=\"layerIsExportable()\"\n  mat-icon-button\n  tooltip-position=\"below\"\n  matTooltipShowDelay=\"500\"\n  [matTooltip]=\"'igo.geo.download.action' | translate\"\n  [color]=\"color\"\n>\n  <mat-icon>file_save</mat-icon>\n</button>\n", styles: [""], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ExportButtonComponent, decorators: [{
             type: Component,
@@ -30529,7 +30566,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                         MatTooltipModule,
                         MatIconModule,
                         TranslateModule
-                    ], 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" }]
+                    ], 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  <mat-icon>file_save</mat-icon>\n</button>\n" }]
         }], ctorParameters: () => [], propDecorators: { layer: [{
                 type: Input
             }], color: [{
@@ -32554,7 +32591,7 @@ class LayerItemComponent {
         this.checkbox.emit({ layer: this.layer, check: this.layerCheck });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: LayerItemComponent, deps: [{ token: i3$3.NetworkService }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: LayerItemComponent, isStandalone: true, selector: "igo-layer-item", inputs: { activeLayer: "activeLayer", selectAll: "selectAll", layerCheck: "layerCheck", layer: "layer", toggleLegendOnVisibilityChange: "toggleLegendOnVisibilityChange", expandLegendIfVisible: "expandLegendIfVisible", updateLegendOnResolutionChange: "updateLegendOnResolutionChange", orderable: "orderable", lowerDisabled: "lowerDisabled", raiseDisabled: "raiseDisabled", queryBadge: "queryBadge", selectionMode: "selectionMode", changeDetection: "changeDetection" }, outputs: { action: "action", checkbox: "checkbox" }, ngImport: i0, template: "<mat-list-item class=\"igo-layer-list-item\">\n  <mat-checkbox\n    *ngIf=\"selectionMode\"\n    class=\"layerCheck\"\n    matListItemIcon\n    (change)=\"check()\"\n    [checked]=\"layerCheck\"\n  >\n  </mat-checkbox>\n  <span\n    matListItemTitle\n    class=\"igo-layer-title\"\n    [matTooltip]=\"tooltipText\"\n    matTooltipShowDelay=\"500\"\n    (click)=\"toggleLegendOnClick()\"\n  >\n    {{ layer.title }}\n  </span>\n\n  <div matListItemMeta>\n    <button\n      *ngIf=\"!selectionMode\"\n      mat-icon-button\n      [color]=\"layer.visible ? 'primary' : 'default'\"\n      collapsibleButton\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"eyeTooltip | translate\"\n      (click)=\"toggleVisibility($event)\"\n    >\n      <mat-icon\n        aria-hidden=\"false\"\n        matBadge=\"?\"\n        matBadgeColor=\"accent\"\n        matBadgeSize=\"small\"\n        matBadgePosition=\"after\"\n        [matBadgeHidden]=\"queryBadgeHidden$ | async\"\n        [ngClass]=\"{ disabled: (inResolutionRange$ | async) === false }\"\n        [svgIcon]=\"(layer.visible$ | async) ? 'eye' : 'eye-off'\"\n      >\n      </mat-icon>\n    </button>\n\n    <button\n      *ngIf=\"selectionMode\"\n      class=\"selection-eye\"\n      mat-icon-button\n      [color]=\"layer.visible ? 'primary' : 'default'\"\n      collapsibleButton\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"\n        layer.visible\n          ? ('igo.geo.layer.hideLayer' | translate)\n          : ('igo.geo.layer.showLayer' | translate)\n      \"\n      (click)=\"toggleVisibility($event)\"\n    >\n      <mat-icon\n        aria-hidden=\"false\"\n        matBadge=\"?\"\n        matBadgeColor=\"accent\"\n        matBadgeSize=\"small\"\n        matBadgePosition=\"after\"\n        [matBadgeHidden]=\"queryBadgeHidden$ | async\"\n        [ngClass]=\"{ disabled: (inResolutionRange$ | async) === false }\"\n        [svgIcon]=\"layer.visible ? 'eye' : 'eye-off'\"\n      >\n      </mat-icon>\n    </button>\n\n    <button\n      *ngIf=\"!selectionMode\"\n      class=\"actions-button\"\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"'igo.geo.layer.moreOptions' | translate\"\n      mat-icon-button\n      color=\"primary\"\n      (click)=\"toggleLayerTool()\"\n    >\n      <mat-icon svgIcon=\"dots-horizontal\"></mat-icon>\n    </button>\n  </div>\n</mat-list-item>\n\n<div #legend class=\"igo-layer-legend-container\">\n  <igo-layer-legend\n    *ngIf=\"showLegend$ | async\"\n    [layer]=\"layer\"\n    [updateLegendOnResolutionChange]=\"updateLegendOnResolutionChange\"\n  >\n  </igo-layer-legend>\n</div>\n", styles: [":host{overflow:hidden}:host ::ng-deep .igo-layer-title{display:block;width:100%;cursor:pointer}:host .igo-layer-legend-container{padding-left:18px;width:calc(100% - 18px)}:host mat-icon[matBadge] ::ng-deep .mat-badge-content{font-size:12px}:host .layerCheck{align-self:baseline;width:16px;padding-right:0}\n"], dependencies: [{ kind: "ngmodule", type: MatListModule }, { kind: "component", type: i2$5.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i2$5.MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "directive", type: i2$5.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "directive", type: i2$5.MatListItemMeta, selector: "[matListItemMeta]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i8.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatBadgeModule }, { kind: "directive", type: i4$2.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: LayerLegendComponent, selector: "igo-layer-legend", inputs: ["updateLegendOnResolutionChange", "layer"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: LayerItemComponent, isStandalone: true, selector: "igo-layer-item", inputs: { activeLayer: "activeLayer", selectAll: "selectAll", layerCheck: "layerCheck", layer: "layer", toggleLegendOnVisibilityChange: "toggleLegendOnVisibilityChange", expandLegendIfVisible: "expandLegendIfVisible", updateLegendOnResolutionChange: "updateLegendOnResolutionChange", orderable: "orderable", lowerDisabled: "lowerDisabled", raiseDisabled: "raiseDisabled", queryBadge: "queryBadge", selectionMode: "selectionMode", changeDetection: "changeDetection" }, outputs: { action: "action", checkbox: "checkbox" }, ngImport: i0, template: "<mat-list-item class=\"igo-layer-list-item\">\n  <mat-checkbox\n    *ngIf=\"selectionMode\"\n    class=\"layerCheck\"\n    matListItemIcon\n    (change)=\"check()\"\n    [checked]=\"layerCheck\"\n  >\n  </mat-checkbox>\n  <span\n    matListItemTitle\n    class=\"igo-layer-title\"\n    [matTooltip]=\"tooltipText\"\n    matTooltipShowDelay=\"500\"\n    (click)=\"toggleLegendOnClick()\"\n  >\n    {{ layer.title }}\n  </span>\n\n  <div matListItemMeta>\n    <button\n      *ngIf=\"!selectionMode\"\n      mat-icon-button\n      [color]=\"layer.visible ? 'primary' : 'default'\"\n      collapsibleButton\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"eyeTooltip | translate\"\n      (click)=\"toggleVisibility($event)\"\n    >\n      <mat-icon\n        aria-hidden=\"false\"\n        matBadge=\"?\"\n        matBadgeColor=\"accent\"\n        matBadgeSize=\"small\"\n        matBadgePosition=\"after\"\n        [matBadgeHidden]=\"queryBadgeHidden$ | async\"\n        [ngClass]=\"{ disabled: (inResolutionRange$ | async) === false }\"\n        >{{ (layer.visible$ | async) ? 'visibility' : 'visibility_off' }}\n      </mat-icon>\n    </button>\n\n    <button\n      *ngIf=\"selectionMode\"\n      class=\"selection-eye\"\n      mat-icon-button\n      [color]=\"layer.visible ? 'primary' : 'default'\"\n      collapsibleButton\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"\n        layer.visible\n          ? ('igo.geo.layer.hideLayer' | translate)\n          : ('igo.geo.layer.showLayer' | translate)\n      \"\n      (click)=\"toggleVisibility($event)\"\n    >\n      <mat-icon\n        aria-hidden=\"false\"\n        matBadge=\"?\"\n        matBadgeColor=\"accent\"\n        matBadgeSize=\"small\"\n        matBadgePosition=\"after\"\n        [matBadgeHidden]=\"queryBadgeHidden$ | async\"\n        [ngClass]=\"{ disabled: (inResolutionRange$ | async) === false }\"\n        >{{ layer.visible ? 'visibility' : 'visibility_off' }}\n      </mat-icon>\n    </button>\n\n    <button\n      *ngIf=\"!selectionMode\"\n      class=\"actions-button\"\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"'igo.geo.layer.moreOptions' | translate\"\n      mat-icon-button\n      color=\"primary\"\n      (click)=\"toggleLayerTool()\"\n    >\n      <mat-icon>more_horiz</mat-icon>\n    </button>\n  </div>\n</mat-list-item>\n\n<div #legend class=\"igo-layer-legend-container\">\n  <igo-layer-legend\n    *ngIf=\"showLegend$ | async\"\n    [layer]=\"layer\"\n    [updateLegendOnResolutionChange]=\"updateLegendOnResolutionChange\"\n  >\n  </igo-layer-legend>\n</div>\n", styles: [":host{overflow:hidden}:host ::ng-deep .igo-layer-title{display:block;width:100%;cursor:pointer}:host .igo-layer-legend-container{padding-left:18px;width:calc(100% - 18px)}:host mat-icon[matBadge] ::ng-deep .mat-badge-content{font-size:12px}:host .layerCheck{align-self:baseline;width:16px;padding-right:0}\n"], dependencies: [{ kind: "ngmodule", type: MatListModule }, { kind: "component", type: i2$5.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i2$5.MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "directive", type: i2$5.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "directive", type: i2$5.MatListItemMeta, selector: "[matListItemMeta]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i8.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatBadgeModule }, { kind: "directive", type: i4$2.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: LayerLegendComponent, selector: "igo-layer-legend", inputs: ["updateLegendOnResolutionChange", "layer"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: LayerItemComponent, decorators: [{
             type: Component,
@@ -32570,7 +32607,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                         LayerLegendComponent,
                         AsyncPipe,
                         TranslateModule
-                    ], template: "<mat-list-item class=\"igo-layer-list-item\">\n  <mat-checkbox\n    *ngIf=\"selectionMode\"\n    class=\"layerCheck\"\n    matListItemIcon\n    (change)=\"check()\"\n    [checked]=\"layerCheck\"\n  >\n  </mat-checkbox>\n  <span\n    matListItemTitle\n    class=\"igo-layer-title\"\n    [matTooltip]=\"tooltipText\"\n    matTooltipShowDelay=\"500\"\n    (click)=\"toggleLegendOnClick()\"\n  >\n    {{ layer.title }}\n  </span>\n\n  <div matListItemMeta>\n    <button\n      *ngIf=\"!selectionMode\"\n      mat-icon-button\n      [color]=\"layer.visible ? 'primary' : 'default'\"\n      collapsibleButton\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"eyeTooltip | translate\"\n      (click)=\"toggleVisibility($event)\"\n    >\n      <mat-icon\n        aria-hidden=\"false\"\n        matBadge=\"?\"\n        matBadgeColor=\"accent\"\n        matBadgeSize=\"small\"\n        matBadgePosition=\"after\"\n        [matBadgeHidden]=\"queryBadgeHidden$ | async\"\n        [ngClass]=\"{ disabled: (inResolutionRange$ | async) === false }\"\n        [svgIcon]=\"(layer.visible$ | async) ? 'eye' : 'eye-off'\"\n      >\n      </mat-icon>\n    </button>\n\n    <button\n      *ngIf=\"selectionMode\"\n      class=\"selection-eye\"\n      mat-icon-button\n      [color]=\"layer.visible ? 'primary' : 'default'\"\n      collapsibleButton\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"\n        layer.visible\n          ? ('igo.geo.layer.hideLayer' | translate)\n          : ('igo.geo.layer.showLayer' | translate)\n      \"\n      (click)=\"toggleVisibility($event)\"\n    >\n      <mat-icon\n        aria-hidden=\"false\"\n        matBadge=\"?\"\n        matBadgeColor=\"accent\"\n        matBadgeSize=\"small\"\n        matBadgePosition=\"after\"\n        [matBadgeHidden]=\"queryBadgeHidden$ | async\"\n        [ngClass]=\"{ disabled: (inResolutionRange$ | async) === false }\"\n        [svgIcon]=\"layer.visible ? 'eye' : 'eye-off'\"\n      >\n      </mat-icon>\n    </button>\n\n    <button\n      *ngIf=\"!selectionMode\"\n      class=\"actions-button\"\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"'igo.geo.layer.moreOptions' | translate\"\n      mat-icon-button\n      color=\"primary\"\n      (click)=\"toggleLayerTool()\"\n    >\n      <mat-icon svgIcon=\"dots-horizontal\"></mat-icon>\n    </button>\n  </div>\n</mat-list-item>\n\n<div #legend class=\"igo-layer-legend-container\">\n  <igo-layer-legend\n    *ngIf=\"showLegend$ | async\"\n    [layer]=\"layer\"\n    [updateLegendOnResolutionChange]=\"updateLegendOnResolutionChange\"\n  >\n  </igo-layer-legend>\n</div>\n", styles: [":host{overflow:hidden}:host ::ng-deep .igo-layer-title{display:block;width:100%;cursor:pointer}:host .igo-layer-legend-container{padding-left:18px;width:calc(100% - 18px)}:host mat-icon[matBadge] ::ng-deep .mat-badge-content{font-size:12px}:host .layerCheck{align-self:baseline;width:16px;padding-right:0}\n"] }]
+                    ], template: "<mat-list-item class=\"igo-layer-list-item\">\n  <mat-checkbox\n    *ngIf=\"selectionMode\"\n    class=\"layerCheck\"\n    matListItemIcon\n    (change)=\"check()\"\n    [checked]=\"layerCheck\"\n  >\n  </mat-checkbox>\n  <span\n    matListItemTitle\n    class=\"igo-layer-title\"\n    [matTooltip]=\"tooltipText\"\n    matTooltipShowDelay=\"500\"\n    (click)=\"toggleLegendOnClick()\"\n  >\n    {{ layer.title }}\n  </span>\n\n  <div matListItemMeta>\n    <button\n      *ngIf=\"!selectionMode\"\n      mat-icon-button\n      [color]=\"layer.visible ? 'primary' : 'default'\"\n      collapsibleButton\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"eyeTooltip | translate\"\n      (click)=\"toggleVisibility($event)\"\n    >\n      <mat-icon\n        aria-hidden=\"false\"\n        matBadge=\"?\"\n        matBadgeColor=\"accent\"\n        matBadgeSize=\"small\"\n        matBadgePosition=\"after\"\n        [matBadgeHidden]=\"queryBadgeHidden$ | async\"\n        [ngClass]=\"{ disabled: (inResolutionRange$ | async) === false }\"\n        >{{ (layer.visible$ | async) ? 'visibility' : 'visibility_off' }}\n      </mat-icon>\n    </button>\n\n    <button\n      *ngIf=\"selectionMode\"\n      class=\"selection-eye\"\n      mat-icon-button\n      [color]=\"layer.visible ? 'primary' : 'default'\"\n      collapsibleButton\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"\n        layer.visible\n          ? ('igo.geo.layer.hideLayer' | translate)\n          : ('igo.geo.layer.showLayer' | translate)\n      \"\n      (click)=\"toggleVisibility($event)\"\n    >\n      <mat-icon\n        aria-hidden=\"false\"\n        matBadge=\"?\"\n        matBadgeColor=\"accent\"\n        matBadgeSize=\"small\"\n        matBadgePosition=\"after\"\n        [matBadgeHidden]=\"queryBadgeHidden$ | async\"\n        [ngClass]=\"{ disabled: (inResolutionRange$ | async) === false }\"\n        >{{ layer.visible ? 'visibility' : 'visibility_off' }}\n      </mat-icon>\n    </button>\n\n    <button\n      *ngIf=\"!selectionMode\"\n      class=\"actions-button\"\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"'igo.geo.layer.moreOptions' | translate\"\n      mat-icon-button\n      color=\"primary\"\n      (click)=\"toggleLayerTool()\"\n    >\n      <mat-icon>more_horiz</mat-icon>\n    </button>\n  </div>\n</mat-list-item>\n\n<div #legend class=\"igo-layer-legend-container\">\n  <igo-layer-legend\n    *ngIf=\"showLegend$ | async\"\n    [layer]=\"layer\"\n    [updateLegendOnResolutionChange]=\"updateLegendOnResolutionChange\"\n  >\n  </igo-layer-legend>\n</div>\n", styles: [":host{overflow:hidden}:host ::ng-deep .igo-layer-title{display:block;width:100%;cursor:pointer}:host .igo-layer-legend-container{padding-left:18px;width:calc(100% - 18px)}:host mat-icon[matBadge] ::ng-deep .mat-badge-content{font-size:12px}:host .layerCheck{align-self:baseline;width:16px;padding-right:0}\n"] }]
         }], ctorParameters: () => [{ type: i3$3.NetworkService }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { activeLayer: [{
                 type: Input
             }], selectAll: [{
@@ -32892,7 +32929,7 @@ class LayerListToolComponent {
         this.selection.emit(this.selectionMode);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: LayerListToolComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: LayerListToolComponent, isStandalone: true, selector: "igo-layer-list-tool", inputs: { layersAreAllVisible: "layersAreAllVisible", floatLabel: "floatLabel", onlyVisible: "onlyVisible", sortAlpha: "sortAlpha", term: "term" }, outputs: { appliedFilterAndSort: "appliedFilterAndSort", selection: "selection" }, ngImport: i0, template: "<mat-form-field class=\"inputFilter\" [floatLabel]=\"floatLabel\">\n  <input\n    matInput\n    [placeholder]=\"'igo.geo.layer.filterPlaceholder' | translate\"\n    [matTooltip]=\"'igo.geo.layer.subsetLayersListKeyword' | translate\"\n    matTooltipShowDelay=\"500\"\n    type=\"text\"\n    [(ngModel)]=\"term\"\n  />\n  <button\n    *ngIf=\"term\"\n    matSuffix\n    mat-icon-button\n    aria-label=\"Clear\"\n    color=\"warn\"\n    (click)=\"clearTerm()\"\n  >\n    <mat-icon svgIcon=\"close\"></mat-icon>\n  </button>\n</mat-form-field>\n\n<div class=\"actions-container\">\n  <button\n    class=\"sort-alpha\"\n    [color]=\"sortAlpha ? 'warn' : 'primary'\"\n    mat-icon-button\n    [matTooltip]=\"\n      sortAlpha\n        ? ('igo.geo.layer.sortMapOrder' | translate)\n        : ('igo.geo.layer.sortAlphabetically' | translate)\n    \"\n    matTooltipShowDelay=\"500\"\n    (click)=\"toggleSortAlpha()\"\n  >\n    <mat-icon\n      [svgIcon]=\"sortAlpha ? 'sort-ascending' : 'sort-alphabetical-ascending'\"\n    ></mat-icon>\n  </button>\n\n  <button\n    class=\"only-visible\"\n    mat-icon-button\n    [disabled]=\"layersAreAllVisible && !onlyVisible\"\n    [color]=\"onlyVisible ? 'warn' : 'primary'\"\n    [matTooltip]=\"\n      onlyVisible\n        ? ('igo.geo.layer.resetLayersList' | translate)\n        : ('igo.geo.layer.subsetLayersListOnlyVisible' | translate)\n    \"\n    matTooltipShowDelay=\"500\"\n    (click)=\"toggleOnlyVisible()\"\n  >\n    <mat-icon\n      aria-hidden=\"false\"\n      matBadge=\"icon\"\n      igoMatBadgeIcon=\"eye\"\n      [igoMatBadgeInverseColor]=\"true\"\n      [igoMatBadgeInheritColor]=\"true\"\n      [svgIcon]=\"onlyVisible ? 'filter-remove' : 'filter'\"\n    >\n    </mat-icon>\n  </button>\n\n  <button\n    class=\"selection-mode\"\n    mat-icon-button\n    color=\"primary\"\n    [matTooltip]=\"\n      selectionMode\n        ? ('igo.geo.layer.deactivateSelectionMode' | translate)\n        : ('igo.geo.layer.activateSelectionMode' | translate)\n    \"\n    matTooltipShowDelay=\"500\"\n    (click)=\"toggleSelectionMode()\"\n  >\n    <mat-icon\n      [svgIcon]=\"\n        selectionMode\n          ? 'checkbox-multiple-marked-outline'\n          : 'checkbox-multiple-blank-outline'\n      \"\n    ></mat-icon>\n  </button>\n</div>\n", styles: [":host{display:flex;align-items:center;justify-content:space-between;padding:8px 12px}:host .inputFilter{width:calc(100% - 100px);max-width:200px}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){:host .inputFilter{width:50%}}:host ::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{display:none}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatBadgeModule }, { kind: "directive", type: i4$2.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: IgoBadgeIconDirective, selector: "[igoMatBadgeIcon]", inputs: ["igoMatBadgeIcon", "matBadgeHidden", "matBadgeDisabled", "igoMatBadgeInverseColor", "igoMatBadgeInheritColor", "igoMatBadgeColor", "igoMatBadgeBackgroundColor"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: LayerListToolComponent, isStandalone: true, selector: "igo-layer-list-tool", inputs: { layersAreAllVisible: "layersAreAllVisible", floatLabel: "floatLabel", onlyVisible: "onlyVisible", sortAlpha: "sortAlpha", term: "term" }, outputs: { appliedFilterAndSort: "appliedFilterAndSort", selection: "selection" }, ngImport: i0, template: "<mat-form-field class=\"inputFilter\" [floatLabel]=\"floatLabel\">\n  <input\n    matInput\n    [placeholder]=\"'igo.geo.layer.filterPlaceholder' | translate\"\n    [matTooltip]=\"'igo.geo.layer.subsetLayersListKeyword' | translate\"\n    matTooltipShowDelay=\"500\"\n    type=\"text\"\n    [(ngModel)]=\"term\"\n  />\n  <button\n    *ngIf=\"term\"\n    matSuffix\n    mat-icon-button\n    aria-label=\"Clear\"\n    color=\"warn\"\n    (click)=\"clearTerm()\"\n  >\n    <mat-icon>close</mat-icon>\n  </button>\n</mat-form-field>\n\n<div class=\"actions-container\">\n  <button\n    class=\"sort-alpha\"\n    [class.--active]=\"sortAlpha\"\n    [color]=\"sortAlpha ? 'warn' : 'primary'\"\n    mat-icon-button\n    [matTooltip]=\"\n      sortAlpha\n        ? ('igo.geo.layer.sortMapOrder' | translate)\n        : ('igo.geo.layer.sortAlphabetically' | translate)\n    \"\n    matTooltipShowDelay=\"500\"\n    (click)=\"toggleSortAlpha()\"\n  >\n    <mat-icon>sort_by_alpha</mat-icon>\n  </button>\n  <button\n    class=\"only-visible\"\n    mat-icon-button\n    [disabled]=\"layersAreAllVisible && !onlyVisible\"\n    [color]=\"onlyVisible ? 'warn' : 'primary'\"\n    [matTooltip]=\"\n      onlyVisible\n        ? ('igo.geo.layer.resetLayersList' | translate)\n        : ('igo.geo.layer.subsetLayersListOnlyVisible' | translate)\n    \"\n    matTooltipShowDelay=\"500\"\n    (click)=\"toggleOnlyVisible()\"\n  >\n    <mat-icon\n      aria-hidden=\"false\"\n      matBadge=\"icon\"\n      igoMatBadgeIcon=\"visibility\"\n      [igoMatBadgeInverseColor]=\"true\"\n      [igoMatBadgeInheritColor]=\"true\"\n    >\n      {{ onlyVisible ? 'filter_alt_off' : 'filter_alt' }}\n    </mat-icon>\n  </button>\n\n  <button\n    class=\"selection-mode\"\n    mat-icon-button\n    color=\"primary\"\n    [matTooltip]=\"\n      selectionMode\n        ? ('igo.geo.layer.deactivateSelectionMode' | translate)\n        : ('igo.geo.layer.activateSelectionMode' | translate)\n    \"\n    matTooltipShowDelay=\"500\"\n    (click)=\"toggleSelectionMode()\"\n  >\n    <mat-icon>{{\n      selectionMode ? 'library_add_check' : 'filter_none'\n    }}</mat-icon>\n  </button>\n</div>\n", styles: [":host{display:flex;align-items:center;justify-content:space-between;padding:8px 12px}:host .inputFilter{width:calc(100% - 100px);max-width:200px}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){:host .inputFilter{width:50%}}:host ::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{display:none}.sort-alpha.--active mat-icon{color:red}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatBadgeModule }, { kind: "directive", type: i4$2.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: IgoBadgeIconDirective, selector: "[igoMatBadgeIcon]", inputs: ["igoMatBadgeIcon", "matBadgeHidden", "matBadgeDisabled", "igoMatBadgeInverseColor", "igoMatBadgeInheritColor", "igoMatBadgeColor", "igoMatBadgeBackgroundColor"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: LayerListToolComponent, decorators: [{
             type: Component,
@@ -32907,7 +32944,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                         MatBadgeModule,
                         IgoBadgeIconDirective,
                         TranslateModule
-                    ], template: "<mat-form-field class=\"inputFilter\" [floatLabel]=\"floatLabel\">\n  <input\n    matInput\n    [placeholder]=\"'igo.geo.layer.filterPlaceholder' | translate\"\n    [matTooltip]=\"'igo.geo.layer.subsetLayersListKeyword' | translate\"\n    matTooltipShowDelay=\"500\"\n    type=\"text\"\n    [(ngModel)]=\"term\"\n  />\n  <button\n    *ngIf=\"term\"\n    matSuffix\n    mat-icon-button\n    aria-label=\"Clear\"\n    color=\"warn\"\n    (click)=\"clearTerm()\"\n  >\n    <mat-icon svgIcon=\"close\"></mat-icon>\n  </button>\n</mat-form-field>\n\n<div class=\"actions-container\">\n  <button\n    class=\"sort-alpha\"\n    [color]=\"sortAlpha ? 'warn' : 'primary'\"\n    mat-icon-button\n    [matTooltip]=\"\n      sortAlpha\n        ? ('igo.geo.layer.sortMapOrder' | translate)\n        : ('igo.geo.layer.sortAlphabetically' | translate)\n    \"\n    matTooltipShowDelay=\"500\"\n    (click)=\"toggleSortAlpha()\"\n  >\n    <mat-icon\n      [svgIcon]=\"sortAlpha ? 'sort-ascending' : 'sort-alphabetical-ascending'\"\n    ></mat-icon>\n  </button>\n\n  <button\n    class=\"only-visible\"\n    mat-icon-button\n    [disabled]=\"layersAreAllVisible && !onlyVisible\"\n    [color]=\"onlyVisible ? 'warn' : 'primary'\"\n    [matTooltip]=\"\n      onlyVisible\n        ? ('igo.geo.layer.resetLayersList' | translate)\n        : ('igo.geo.layer.subsetLayersListOnlyVisible' | translate)\n    \"\n    matTooltipShowDelay=\"500\"\n    (click)=\"toggleOnlyVisible()\"\n  >\n    <mat-icon\n      aria-hidden=\"false\"\n      matBadge=\"icon\"\n      igoMatBadgeIcon=\"eye\"\n      [igoMatBadgeInverseColor]=\"true\"\n      [igoMatBadgeInheritColor]=\"true\"\n      [svgIcon]=\"onlyVisible ? 'filter-remove' : 'filter'\"\n    >\n    </mat-icon>\n  </button>\n\n  <button\n    class=\"selection-mode\"\n    mat-icon-button\n    color=\"primary\"\n    [matTooltip]=\"\n      selectionMode\n        ? ('igo.geo.layer.deactivateSelectionMode' | translate)\n        : ('igo.geo.layer.activateSelectionMode' | translate)\n    \"\n    matTooltipShowDelay=\"500\"\n    (click)=\"toggleSelectionMode()\"\n  >\n    <mat-icon\n      [svgIcon]=\"\n        selectionMode\n          ? 'checkbox-multiple-marked-outline'\n          : 'checkbox-multiple-blank-outline'\n      \"\n    ></mat-icon>\n  </button>\n</div>\n", styles: [":host{display:flex;align-items:center;justify-content:space-between;padding:8px 12px}:host .inputFilter{width:calc(100% - 100px);max-width:200px}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){:host .inputFilter{width:50%}}:host ::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{display:none}\n"] }]
+                    ], template: "<mat-form-field class=\"inputFilter\" [floatLabel]=\"floatLabel\">\n  <input\n    matInput\n    [placeholder]=\"'igo.geo.layer.filterPlaceholder' | translate\"\n    [matTooltip]=\"'igo.geo.layer.subsetLayersListKeyword' | translate\"\n    matTooltipShowDelay=\"500\"\n    type=\"text\"\n    [(ngModel)]=\"term\"\n  />\n  <button\n    *ngIf=\"term\"\n    matSuffix\n    mat-icon-button\n    aria-label=\"Clear\"\n    color=\"warn\"\n    (click)=\"clearTerm()\"\n  >\n    <mat-icon>close</mat-icon>\n  </button>\n</mat-form-field>\n\n<div class=\"actions-container\">\n  <button\n    class=\"sort-alpha\"\n    [class.--active]=\"sortAlpha\"\n    [color]=\"sortAlpha ? 'warn' : 'primary'\"\n    mat-icon-button\n    [matTooltip]=\"\n      sortAlpha\n        ? ('igo.geo.layer.sortMapOrder' | translate)\n        : ('igo.geo.layer.sortAlphabetically' | translate)\n    \"\n    matTooltipShowDelay=\"500\"\n    (click)=\"toggleSortAlpha()\"\n  >\n    <mat-icon>sort_by_alpha</mat-icon>\n  </button>\n  <button\n    class=\"only-visible\"\n    mat-icon-button\n    [disabled]=\"layersAreAllVisible && !onlyVisible\"\n    [color]=\"onlyVisible ? 'warn' : 'primary'\"\n    [matTooltip]=\"\n      onlyVisible\n        ? ('igo.geo.layer.resetLayersList' | translate)\n        : ('igo.geo.layer.subsetLayersListOnlyVisible' | translate)\n    \"\n    matTooltipShowDelay=\"500\"\n    (click)=\"toggleOnlyVisible()\"\n  >\n    <mat-icon\n      aria-hidden=\"false\"\n      matBadge=\"icon\"\n      igoMatBadgeIcon=\"visibility\"\n      [igoMatBadgeInverseColor]=\"true\"\n      [igoMatBadgeInheritColor]=\"true\"\n    >\n      {{ onlyVisible ? 'filter_alt_off' : 'filter_alt' }}\n    </mat-icon>\n  </button>\n\n  <button\n    class=\"selection-mode\"\n    mat-icon-button\n    color=\"primary\"\n    [matTooltip]=\"\n      selectionMode\n        ? ('igo.geo.layer.deactivateSelectionMode' | translate)\n        : ('igo.geo.layer.activateSelectionMode' | translate)\n    \"\n    matTooltipShowDelay=\"500\"\n    (click)=\"toggleSelectionMode()\"\n  >\n    <mat-icon>{{\n      selectionMode ? 'library_add_check' : 'filter_none'\n    }}</mat-icon>\n  </button>\n</div>\n", styles: [":host{display:flex;align-items:center;justify-content:space-between;padding:8px 12px}:host .inputFilter{width:calc(100% - 100px);max-width:200px}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){:host .inputFilter{width:50%}}:host ::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{display:none}.sort-alpha.--active mat-icon{color:red}\n"] }]
         }], propDecorators: { layersAreAllVisible: [{
                 type: Input
             }], floatLabel: [{
@@ -33101,6 +33138,7 @@ class LayerListComponent {
     selectAllCheck;
     selectAllCheck$ = new BehaviorSubject(undefined);
     selectAllCheck$$;
+    svgIcon = MAGNIFY_SCAN_ICON;
     constructor(elRef) {
         this.elRef = elRef;
     }
@@ -33702,7 +33740,7 @@ class LayerListComponent {
         return layersList;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: LayerListComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: LayerListComponent, isStandalone: true, selector: "igo-layer-list", inputs: { layersAreAllVisible: "layersAreAllVisible", ogcButton: "ogcButton", timeButton: "timeButton", map: "map", layers: "layers", floatLabel: "floatLabel", layerFilterAndSortOptions: "layerFilterAndSortOptions", excludeBaseLayers: "excludeBaseLayers", toggleLegendOnVisibilityChange: "toggleLegendOnVisibilityChange", expandLegendOfVisibleLayers: "expandLegendOfVisibleLayers", updateLegendOnResolutionChange: "updateLegendOnResolutionChange", queryBadge: "queryBadge" }, outputs: { appliedFilterAndSort: "appliedFilterAndSort" }, queries: [{ propertyName: "templateLayerToolbar", first: true, predicate: ["igoLayerItemToolbar"], descendants: true }], ngImport: i0, template: "<igo-layer-list-tool\n  *ngIf=\"showToolbar$ | async\"\n  floatLabel=\"auto\"\n  [layersAreAllVisible]=\"layersAreAllVisible\"\n  [term]=\"layerFilterAndSortOptions.keyword\"\n  [onlyVisible]=\"layerFilterAndSortOptions.onlyVisible\"\n  [sortAlpha]=\"layerFilterAndSortOptions.sortAlpha\"\n  (appliedFilterAndSort)=\"onAppliedFilterAndSortChange($event)\"\n  (selection)=\"toggleSelectionMode($event)\"\n>\n</igo-layer-list-tool>\n\n<div *ngIf=\"selection\" class=\"select-all\">\n  <mat-checkbox\n    class=\"select-all-checkbox\"\n    [color]=\"!selectAllCheck && layersChecked.length > 0 ? 'accent' : 'primary'\"\n    (change)=\"selectAll()\"\n    [checked]=\"selectAllCheck\"\n    [indeterminate]=\"!selectAllCheck && layersChecked.length > 0\"\n  >\n    {{\n      selectAllCheck\n        ? ('igo.geo.layer.deselectAll' | translate)\n        : ('igo.geo.layer.selectAll' | translate)\n    }}\n  </mat-checkbox>\n</div>\n<mat-divider></mat-divider>\n\n<igo-list #igoList [navigation]=\"false\" [selection]=\"false\">\n  <ng-template ngFor let-layer let-i=\"index\" [ngForOf]=\"layers$ | async\">\n    <igo-layer-item\n      *ngIf=\"!(excludeBaseLayers && layer.baseLayer)\"\n      igoListItem\n      [layer]=\"layer\"\n      [activeLayer]=\"activeLayer\"\n      [orderable]=\"orderable && !layer.baseLayer\"\n      [lowerDisabled]=\"getLowerLayer().id === layer.id\"\n      [raiseDisabled]=\"getUpperLayer().id === layer.id\"\n      [queryBadge]=\"queryBadge\"\n      [expandLegendIfVisible]=\"expandLegendOfVisibleLayers\"\n      [updateLegendOnResolutionChange]=\"updateLegendOnResolutionChange\"\n      [toggleLegendOnVisibilityChange]=\"toggleLegendOnVisibilityChange\"\n      [selectionMode]=\"selection\"\n      [selectAll]=\"selectAllCheck\"\n      [layerCheck]=\"layer.options.check\"\n      [changeDetection]=\"layerItemChangeDetection$\"\n      (action)=\"toggleLayerTool($event)\"\n      (checkbox)=\"layersCheck($event)\"\n    >\n    </igo-layer-item>\n  </ng-template>\n</igo-list>\n\n<igo-panel\n  *ngIf=\"!selection && layerTool && activeLayer\"\n  class=\"igo-layer-actions-container\"\n  [title]=\"activeLayer.title\"\n>\n  <div class=\"igo-layer-button-group\">\n    <button\n      *ngIf=\"isLayerRemovable(activeLayer)\"\n      class=\"delete-button\"\n      mat-icon-button\n      color=\"warn\"\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"'igo.geo.layer.removeLayer' | translate\"\n      (click)=\"removeLayers()\"\n    >\n      <mat-icon svgIcon=\"delete\"></mat-icon>\n    </button>\n\n    <button\n      class=\"down-button\"\n      mat-icon-button\n      color=\"primary\"\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"\n        sortAlpha || onlyVisible || keyword\n          ? ('igo.geo.layer.filterLowerLayer' | translate)\n          : ('igo.geo.layer.lowerLayer' | translate)\n      \"\n      [disabled]=\"lowerDisabled\"\n      (click)=\"moveActiveLayer(activeLayer, layerListDisplacement.Lower, true)\"\n    >\n      <mat-icon\n        aria-hidden=\"false\"\n        [matBadge]=\"sortAlpha || onlyVisible || keyword ? '!' : ''\"\n        matBadgeColor=\"warn\"\n        matBadgeSize=\"medium\"\n        [matBadgeHidden]=\"lowerDisabled\"\n        svgIcon=\"arrow-down\"\n      ></mat-icon>\n    </button>\n\n    <button\n      class=\"up-button\"\n      color=\"primary\"\n      mat-icon-button\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"\n        sortAlpha || onlyVisible || keyword\n          ? ('igo.geo.layer.filterRaiseLayer' | translate)\n          : ('igo.geo.layer.raiseLayer' | translate)\n      \"\n      [disabled]=\"raiseDisabled\"\n      (click)=\"moveActiveLayer(activeLayer, layerListDisplacement.Raise, true)\"\n    >\n      <mat-icon\n        aria-hidden=\"false\"\n        [matBadge]=\"sortAlpha || onlyVisible || keyword ? '!' : ''\"\n        matBadgeColor=\"warn\"\n        matBadgeSize=\"medium\"\n        [matBadgeHidden]=\"raiseDisabled\"\n        svgIcon=\"arrow-up\"\n      ></mat-icon>\n    </button>\n\n    <!-- <label>{{ 'igo.geo.layer.opacity' | translate }} </label> -->\n    <button\n      class=\"opacity-button\"\n      color=\"primary\"\n      mat-icon-button\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matMenuTriggerFor]=\"opacityMenu\"\n      [matTooltip]=\"'igo.geo.layer.opacity' | translate\"\n    >\n      <mat-icon\n        aria-hidden=\"false\"\n        [matBadge]=\"badgeOpacity\"\n        matBadgeColor=\"primary\"\n        matBadgeSize=\"medium\"\n        svgIcon=\"opacity\"\n      ></mat-icon>\n    </button>\n\n    <mat-menu #opacityMenu=\"matMenu\" class=\"panel-opacity-menu\">\n      <mat-slider\n        id=\"opacity-slider\"\n        color=\"primary\"\n        discrete\n        step=\"5\"\n        [min]=\"0\"\n        [max]=\"100\"\n        [matTooltip]=\"'igo.geo.layer.opacity' | translate\"\n        (click)=\"$event.stopPropagation()\"\n        matTooltipShowDelay=\"500\"\n        tooltip-position=\"below\"\n        #ngSlider\n        ><input\n          matSliderThumb\n          [value]=\"opacity\"\n          (input)=\"\n            changeOpacity({\n              source: ngSliderThumb,\n              parent: ngSlider,\n              value: ngSliderThumb.value\n            })\n          \"\n          #ngSliderThumb=\"matSliderThumb\"\n        />\n      </mat-slider>\n    </mat-menu>\n\n    <button\n      *ngIf=\"activeLayerExtentIsValid(activeLayer)\"\n      class=\"zoomLayer-button\"\n      color=\"primary\"\n      mat-icon-button\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"'igo.geo.layer.zoomLayer' | translate\"\n      (click)=\"zoomLayerExtents(activeLayer)\"\n    >\n      <mat-icon\n        matBadgeColor=\"primary\"\n        matBadgeSize=\"medium\"\n        svgIcon=\"magnify-scan\"\n      ></mat-icon>\n    </button>\n\n    <ng-container\n      igoLayerItemToolbar\n      [ngTemplateOutlet]=\"templateLayerToolbar\"\n      [ngTemplateOutletContext]=\"{ layer: activeLayer }\"\n    >\n    </ng-container>\n\n    <ng-content select=\"[igoLayerItemToolbar]\"></ng-content>\n  </div>\n</igo-panel>\n\n<igo-panel\n  *ngIf=\"selection && layers.length > 0\"\n  class=\"igo-layer-actions-container\"\n  [title]=\"'igo.geo.layer.tools' | translate\"\n>\n  <div class=\"actions-buttons-multi\">\n    <button\n      class=\"delete-button\"\n      mat-icon-button\n      color=\"warn\"\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [disabled]=\"layersChecked.length === 0\"\n      [matTooltip]=\"\n        isAllLayersRemovable(layersChecked)\n          ? ('igo.geo.layer.removeSelectedLayers' | translate)\n          : ('igo.geo.layer.removeSelectedLayersRestriction' | translate)\n      \"\n      (click)=\"removeLayers(layersChecked)\"\n    >\n      <mat-icon\n        aria-hidden=\"false\"\n        [matBadge]=\"'!'\"\n        matBadgeColor=\"warn\"\n        matBadgeSize=\"medium\"\n        [matBadgeHidden]=\"isAllLayersRemovable(layersChecked)\"\n        svgIcon=\"delete\"\n      ></mat-icon>\n    </button>\n\n    <button\n      class=\"eye-button\"\n      mat-icon-button\n      color=\"primary\"\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [disabled]=\"layersChecked.length === 0\"\n      [matTooltip]=\"\n        statusSelectedLayersCheck === 'ALL_HIDDEN'\n          ? ('igo.geo.layer.showSelectedLayers' | translate)\n          : ('igo.geo.layer.hideSelectedLayers' | translate)\n      \"\n      (click)=\"toggleVisibility(layersChecked)\"\n    >\n      <mat-icon\n        [svgIcon]=\"\n          statusSelectedLayersCheck === 'ALL_HIDDEN' ? 'eye-off' : 'eye'\n        \"\n      ></mat-icon>\n    </button>\n\n    <button\n      class=\"down-button\"\n      mat-icon-button\n      color=\"primary\"\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"\n        sortAlpha || onlyVisible || keyword\n          ? ('igo.geo.layer.filterLowerLayer' | translate)\n          : ('igo.geo.layer.lowerLayer' | translate)\n      \"\n      [disabled]=\"lowerDisabledSelection\"\n      (click)=\"lowerLayers(layersChecked)\"\n    >\n      <mat-icon\n        aria-hidden=\"false\"\n        [matBadge]=\"sortAlpha || onlyVisible || keyword ? '!' : ''\"\n        matBadgeColor=\"warn\"\n        matBadgeSize=\"medium\"\n        [matBadgeHidden]=\"lowerDisabledSelection\"\n        svgIcon=\"arrow-down\"\n      ></mat-icon>\n    </button>\n\n    <button\n      class=\"up-button\"\n      color=\"primary\"\n      mat-icon-button\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"\n        sortAlpha || onlyVisible || keyword\n          ? ('igo.geo.layer.filterRaiseLayer' | translate)\n          : ('igo.geo.layer.raiseLayer' | translate)\n      \"\n      [disabled]=\"raiseDisabledSelection\"\n      (click)=\"raiseLayers(layersChecked)\"\n    >\n      <mat-icon\n        aria-hidden=\"false\"\n        [matBadge]=\"sortAlpha || onlyVisible || keyword ? '!' : ''\"\n        matBadgeColor=\"warn\"\n        matBadgeSize=\"medium\"\n        [matBadgeHidden]=\"raiseDisabledSelection\"\n        svgIcon=\"arrow-up\"\n      ></mat-icon>\n    </button>\n\n    <button\n      class=\"opacity-button\"\n      color=\"primary\"\n      mat-icon-button\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [disabled]=\"layersChecked.length === 0\"\n      [matMenuTriggerFor]=\"opacityMenu\"\n      [matTooltip]=\"'igo.geo.layer.opacity' | translate\"\n    >\n      <mat-icon svgIcon=\"opacity\"></mat-icon>\n    </button>\n\n    <mat-menu #opacityMenu=\"matMenu\" class=\"mat-menu-opacity-slider\">\n      <div id=\"opacity-menu\">\n        <!-- TODO: The 'tickInterval' property no longer exists -->\n        <mat-slider\n          *ngIf=\"layersChecked.length\"\n          id=\"opacity-slider\"\n          color=\"primary\"\n          thumbLabel\n          showTickMarks\n          step=\"5\"\n          [min]=\"0\"\n          [max]=\"100\"\n          [(ngModel)]=\"checkOpacity\"\n          [matTooltip]=\"'igo.geo.layer.opacity' | translate\"\n          matTooltipShowDelay=\"500\"\n          tooltip-position=\"below\"\n          (click)=\"$event.stopPropagation()\"\n          ><input matSliderThumb />\n        </mat-slider>\n      </div>\n    </mat-menu>\n\n    <button\n      *ngIf=\"\n        layersChecked.length !== 0 && activeLayersExtentAreValid(layersChecked)\n      \"\n      class=\"zoomLayer-button\"\n      color=\"primary\"\n      mat-icon-button\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"'igo.geo.layer.zoomLayers' | translate\"\n      (click)=\"zoomLayersExtents(layersChecked)\"\n    >\n      <mat-icon svgIcon=\"magnify-scan\"></mat-icon>\n    </button>\n  </div>\n</igo-panel>\n", styles: [":host{display:flex;flex-direction:column;height:100%}:host igo-list{flex:1;padding-top:8px}:host mat-form-field.inputFilter{width:calc(100% - 100px);max-width:200px}:host .igo-layer-actions-container{padding:0 6px 0 4px}:host .igo-layer-actions-container>div{text-align:center}:host mat-list-item ::ng-deep .mdc-list-item__content{margin-bottom:10px}:host .igo-layer-button-group,:host .actions-buttons-multi{display:flex;align-items:center;flex-direction:row-reverse;overflow-x:auto;overflow-y:hidden}:host .igo-layer-button-group::-webkit-scrollbar,:host .actions-buttons-multi::-webkit-scrollbar{height:4px}:host .igo-layer-button-group::-webkit-scrollbar-track,:host .actions-buttons-multi::-webkit-scrollbar-track{background:#f1f1f1}:host .igo-layer-button-group::-webkit-scrollbar-thumb,:host .actions-buttons-multi::-webkit-scrollbar-thumb{background:#888}:host .igo-layer-button-group::-webkit-scrollbar-thumb:hover,:host .actions-buttons-multi::-webkit-scrollbar-thumb:hover{background:#555}:host .igo-layer-button-group{padding-top:5px}:host igo-panel{height:unset}:host .select-all{display:flex;align-items:center;height:48px;padding:0 16px}::ng-deep .panel-opacity-menu{overflow:visible!important}::ng-deep .panel-opacity-menu #opacity-slider{margin:0 16px}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LayerListToolComponent, selector: "igo-layer-list-tool", inputs: ["layersAreAllVisible", "floatLabel", "onlyVisible", "sortAlpha", "term"], outputs: ["appliedFilterAndSort", "selection"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i8.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i6$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: ListComponent, selector: "igo-list", inputs: ["navigation", "selection"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: LayerItemComponent, selector: "igo-layer-item", inputs: ["activeLayer", "selectAll", "layerCheck", "layer", "toggleLegendOnVisibilityChange", "expandLegendIfVisible", "updateLegendOnResolutionChange", "orderable", "lowerDisabled", "raiseDisabled", "queryBadge", "selectionMode", "changeDetection"], outputs: ["action", "checkbox"] }, { kind: "directive", type: ListItemDirective, selector: "[igoListItem]", inputs: ["color", "focused", "selected", "disabled"], outputs: ["beforeSelect", "beforeFocus", "beforeUnselect", "beforeUnfocus", "beforeDisable", "beforeEnable", "focus", "unfocus", "select", "unselect", "disable", "enable"] }, { kind: "component", type: PanelComponent, selector: "igo-panel", inputs: ["title", "withHeader", "cursorPointer"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatBadgeModule }, { kind: "directive", type: i4$2.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i6.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: i6.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatSliderModule }, { kind: "component", type: i2$6.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i2$6.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: LayerListComponent, isStandalone: true, selector: "igo-layer-list", inputs: { layersAreAllVisible: "layersAreAllVisible", ogcButton: "ogcButton", timeButton: "timeButton", map: "map", layers: "layers", floatLabel: "floatLabel", layerFilterAndSortOptions: "layerFilterAndSortOptions", excludeBaseLayers: "excludeBaseLayers", toggleLegendOnVisibilityChange: "toggleLegendOnVisibilityChange", expandLegendOfVisibleLayers: "expandLegendOfVisibleLayers", updateLegendOnResolutionChange: "updateLegendOnResolutionChange", queryBadge: "queryBadge" }, outputs: { appliedFilterAndSort: "appliedFilterAndSort" }, queries: [{ propertyName: "templateLayerToolbar", first: true, predicate: ["igoLayerItemToolbar"], descendants: true }], ngImport: i0, template: "<igo-layer-list-tool\n  *ngIf=\"showToolbar$ | async\"\n  floatLabel=\"auto\"\n  [layersAreAllVisible]=\"layersAreAllVisible\"\n  [term]=\"layerFilterAndSortOptions.keyword\"\n  [onlyVisible]=\"layerFilterAndSortOptions.onlyVisible\"\n  [sortAlpha]=\"layerFilterAndSortOptions.sortAlpha\"\n  (appliedFilterAndSort)=\"onAppliedFilterAndSortChange($event)\"\n  (selection)=\"toggleSelectionMode($event)\"\n>\n</igo-layer-list-tool>\n\n<div *ngIf=\"selection\" class=\"select-all\">\n  <mat-checkbox\n    class=\"select-all-checkbox\"\n    [color]=\"!selectAllCheck && layersChecked.length > 0 ? 'accent' : 'primary'\"\n    (change)=\"selectAll()\"\n    [checked]=\"selectAllCheck\"\n    [indeterminate]=\"!selectAllCheck && layersChecked.length > 0\"\n  >\n    {{\n      selectAllCheck\n        ? ('igo.geo.layer.deselectAll' | translate)\n        : ('igo.geo.layer.selectAll' | translate)\n    }}\n  </mat-checkbox>\n</div>\n<mat-divider></mat-divider>\n\n<igo-list #igoList [navigation]=\"false\" [selection]=\"false\">\n  <ng-template ngFor let-layer let-i=\"index\" [ngForOf]=\"layers$ | async\">\n    <igo-layer-item\n      *ngIf=\"!(excludeBaseLayers && layer.baseLayer)\"\n      igoListItem\n      [layer]=\"layer\"\n      [activeLayer]=\"activeLayer\"\n      [orderable]=\"orderable && !layer.baseLayer\"\n      [lowerDisabled]=\"getLowerLayer().id === layer.id\"\n      [raiseDisabled]=\"getUpperLayer().id === layer.id\"\n      [queryBadge]=\"queryBadge\"\n      [expandLegendIfVisible]=\"expandLegendOfVisibleLayers\"\n      [updateLegendOnResolutionChange]=\"updateLegendOnResolutionChange\"\n      [toggleLegendOnVisibilityChange]=\"toggleLegendOnVisibilityChange\"\n      [selectionMode]=\"selection\"\n      [selectAll]=\"selectAllCheck\"\n      [layerCheck]=\"layer.options.check\"\n      [changeDetection]=\"layerItemChangeDetection$\"\n      (action)=\"toggleLayerTool($event)\"\n      (checkbox)=\"layersCheck($event)\"\n    >\n    </igo-layer-item>\n  </ng-template>\n</igo-list>\n\n<igo-panel\n  *ngIf=\"!selection && layerTool && activeLayer\"\n  class=\"igo-layer-actions-container\"\n  [title]=\"activeLayer.title\"\n>\n  <div class=\"igo-layer-button-group\">\n    <button\n      *ngIf=\"isLayerRemovable(activeLayer)\"\n      class=\"delete-button\"\n      mat-icon-button\n      color=\"warn\"\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"'igo.geo.layer.removeLayer' | translate\"\n      (click)=\"removeLayers()\"\n    >\n      <mat-icon>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        >arrow_downward</mat-icon\n      >\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        >arrow_upward</mat-icon\n      >\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        >opacity</mat-icon\n      >\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        >delete</mat-icon\n      >\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        statusSelectedLayersCheck === 'ALL_HIDDEN'\n          ? 'visibility_off'\n          : 'visibility'\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        >arrow_downward</mat-icon\n      >\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        >arrow_upward</mat-icon\n      >\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>opacity</mat-icon>\n    </button>\n\n    <mat-menu #opacityMenu=\"matMenu\" class=\"mat-menu-opacity-slider\">\n      <div id=\"opacity-menu\">\n        <!-- TODO: The 'tickInterval' property no longer exists -->\n        <mat-slider\n          *ngIf=\"layersChecked.length\"\n          id=\"opacity-slider\"\n          color=\"primary\"\n          thumbLabel\n          showTickMarks\n          step=\"5\"\n          [min]=\"0\"\n          [max]=\"100\"\n          [(ngModel)]=\"checkOpacity\"\n          [matTooltip]=\"'igo.geo.layer.opacity' | translate\"\n          matTooltipShowDelay=\"500\"\n          tooltip-position=\"below\"\n          (click)=\"$event.stopPropagation()\"\n          ><input matSliderThumb />\n        </mat-slider>\n      </div>\n    </mat-menu>\n\n    <button\n      *ngIf=\"\n        layersChecked.length !== 0 && activeLayersExtentAreValid(layersChecked)\n      \"\n      class=\"zoomLayer-button\"\n      color=\"primary\"\n      mat-icon-button\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"'igo.geo.layer.zoomLayers' | translate\"\n      (click)=\"zoomLayersExtents(layersChecked)\"\n    >\n      <mat-icon svgIcon=\"magnify-scan\"></mat-icon>\n    </button>\n  </div>\n</igo-panel>\n", styles: [":host{display:flex;flex-direction:column;height:100%}:host igo-list{flex:1;padding-top:8px}:host mat-form-field.inputFilter{width:calc(100% - 100px);max-width:200px}:host .igo-layer-actions-container{padding:0 6px 0 4px}:host .igo-layer-actions-container>div{text-align:center}:host mat-list-item ::ng-deep .mdc-list-item__content{margin-bottom:10px}:host .igo-layer-button-group,:host .actions-buttons-multi{display:flex;align-items:center;flex-direction:row-reverse;overflow-x:auto;overflow-y:hidden}:host .igo-layer-button-group::-webkit-scrollbar,:host .actions-buttons-multi::-webkit-scrollbar{height:4px}:host .igo-layer-button-group::-webkit-scrollbar-track,:host .actions-buttons-multi::-webkit-scrollbar-track{background:#f1f1f1}:host .igo-layer-button-group::-webkit-scrollbar-thumb,:host .actions-buttons-multi::-webkit-scrollbar-thumb{background:#888}:host .igo-layer-button-group::-webkit-scrollbar-thumb:hover,:host .actions-buttons-multi::-webkit-scrollbar-thumb:hover{background:#555}:host .igo-layer-button-group{padding-top:5px}:host igo-panel{height:unset}:host .select-all{display:flex;align-items:center;height:48px;padding:0 16px}::ng-deep .panel-opacity-menu{overflow:visible!important}::ng-deep .panel-opacity-menu #opacity-slider{margin:0 16px}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LayerListToolComponent, selector: "igo-layer-list-tool", inputs: ["layersAreAllVisible", "floatLabel", "onlyVisible", "sortAlpha", "term"], outputs: ["appliedFilterAndSort", "selection"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i8.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i6$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: ListComponent, selector: "igo-list", inputs: ["navigation", "selection"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: LayerItemComponent, selector: "igo-layer-item", inputs: ["activeLayer", "selectAll", "layerCheck", "layer", "toggleLegendOnVisibilityChange", "expandLegendIfVisible", "updateLegendOnResolutionChange", "orderable", "lowerDisabled", "raiseDisabled", "queryBadge", "selectionMode", "changeDetection"], outputs: ["action", "checkbox"] }, { kind: "directive", type: ListItemDirective, selector: "[igoListItem]", inputs: ["color", "focused", "selected", "disabled"], outputs: ["beforeSelect", "beforeFocus", "beforeUnselect", "beforeUnfocus", "beforeDisable", "beforeEnable", "focus", "unfocus", "select", "unselect", "disable", "enable"] }, { kind: "component", type: PanelComponent, selector: "igo-panel", inputs: ["title", "withHeader", "cursorPointer"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatBadgeModule }, { kind: "directive", type: i4$2.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i6.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: i6.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatSliderModule }, { kind: "component", type: i2$6.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i2$6.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: LayerListComponent, decorators: [{
             type: Component,
@@ -33726,7 +33764,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                         FormsModule,
                         AsyncPipe,
                         TranslateModule
-                    ], 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"] }]
+                    ], 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>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        >arrow_downward</mat-icon\n      >\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        >arrow_upward</mat-icon\n      >\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        >opacity</mat-icon\n      >\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        >delete</mat-icon\n      >\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        statusSelectedLayersCheck === 'ALL_HIDDEN'\n          ? 'visibility_off'\n          : 'visibility'\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        >arrow_downward</mat-icon\n      >\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        >arrow_upward</mat-icon\n      >\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>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"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { templateLayerToolbar: [{
                 type: ContentChild,
                 args: ['igoLayerItemToolbar', /* TODO: add static flag */ {}]
@@ -33844,7 +33882,7 @@ class TrackFeatureButtonComponent {
         this.trackFeature = !this.trackFeature;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: TrackFeatureButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: TrackFeatureButtonComponent, isStandalone: true, selector: "igo-track-feature-button", inputs: { layer: "layer", trackFeature: "trackFeature" }, ngImport: i0, template: "<button\n  *ngIf=\"options.trackFeature\"\n  mat-icon-button\n  collapsibleButton\n  tooltip-position=\"below\"\n  matTooltipShowDelay=\"500\"\n  [matTooltip]=\"'igo.geo.layer.trackFeature' | translate\"\n  [color]=\"color\"\n  (click)=\"toggleTrackFeature()\"\n>\n  <mat-icon svgIcon=\"crosshairs-gps\"></mat-icon>\n</button>\n", styles: [""], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: TrackFeatureButtonComponent, isStandalone: true, selector: "igo-track-feature-button", inputs: { layer: "layer", trackFeature: "trackFeature" }, ngImport: i0, template: "<button\n  *ngIf=\"options.trackFeature\"\n  mat-icon-button\n  collapsibleButton\n  tooltip-position=\"below\"\n  matTooltipShowDelay=\"500\"\n  [matTooltip]=\"'igo.geo.layer.trackFeature' | translate\"\n  [color]=\"color\"\n  (click)=\"toggleTrackFeature()\"\n>\n  <mat-icon>my_location</mat-icon>\n</button>\n", styles: [""], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: TrackFeatureButtonComponent, decorators: [{
             type: Component,
@@ -33854,7 +33892,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                         MatTooltipModule,
                         MatIconModule,
                         TranslateModule
-                    ], 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" }]
+                    ], 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>my_location</mat-icon>\n</button>\n" }]
         }], ctorParameters: () => [], propDecorators: { layer: [{
                 type: Input
             }], trackFeature: [{
@@ -33995,7 +34033,7 @@ class MetadataButtonComponent {
         return this.layer.options;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: MetadataButtonComponent, deps: [{ token: MetadataService }, { token: i1$5.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: MetadataButtonComponent, isStandalone: true, selector: "igo-metadata-button", inputs: { layer: "layer", color: "color" }, ngImport: i0, template: "<button\n  *ngIf=\"\n    (options && options.metadata && options.metadata.url) ||\n    (options && options.metadata && options.metadata.abstract)\n  \"\n  mat-icon-button\n  tooltip-position=\"below\"\n  matTooltipShowDelay=\"500\"\n  [matTooltip]=\"'igo.geo.metadata.show' | translate\"\n  [color]=\"color\"\n  (click)=\"openMetadata(options.metadata)\"\n>\n  <mat-icon svgIcon=\"information-outline\"></mat-icon>\n</button>\n", styles: [""], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MatDialogModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: MetadataButtonComponent, isStandalone: true, selector: "igo-metadata-button", inputs: { layer: "layer", color: "color" }, ngImport: i0, template: "<button\n  *ngIf=\"\n    (options && options.metadata && options.metadata.url) ||\n    (options && options.metadata && options.metadata.abstract)\n  \"\n  mat-icon-button\n  tooltip-position=\"below\"\n  matTooltipShowDelay=\"500\"\n  [matTooltip]=\"'igo.geo.metadata.show' | translate\"\n  [color]=\"color\"\n  (click)=\"openMetadata(options.metadata)\"\n>\n  <mat-icon>info</mat-icon>\n</button>\n", styles: [""], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MatDialogModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: MetadataButtonComponent, decorators: [{
             type: Component,
@@ -34006,7 +34044,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                         MatIconModule,
                         TranslateModule,
                         MatDialogModule
-                    ], 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" }]
+                    ], 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>info</mat-icon>\n</button>\n" }]
         }], ctorParameters: () => [{ type: MetadataService }, { type: i1$5.MatDialog }], propDecorators: { layer: [{
                 type: Input
             }], color: [{
@@ -34623,7 +34661,7 @@ class StyleModalLayerComponent {
         this.dialogRef.disableClose = false;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: StyleModalLayerComponent, deps: [{ token: i1$5.MatDialogRef }, { token: i1$6.UntypedFormBuilder }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: StyleModalLayerComponent, isStandalone: true, selector: "igo-style-modal-layer", inputs: { confirmFlag: "confirmFlag" }, ngImport: i0, template: "<h2 mat-dialog-title class=\"mat-typography\">\n  {{ 'igo.geo.style.styleModal' | translate }}\n</h2>\n<div mat-dialog-content>\n  <div class=\"edition-drawing mat-typography\">\n    <form class=\"igo-form\" [formGroup]=\"form\">\n      <div\n        class=\"fill-color-picker mat-typography\"\n        *ngIf=\"linestringOnly !== true\"\n      >\n        <span>\n          <mat-icon class=\"stroke-palette-icon\" svgIcon=\"square\"></mat-icon>\n          {{ 'igo.geo.style.fill' | translate }}\n        </span>\n        <igo-color-picker-form-field\n          formControlName=\"fill\"\n          (colorChange)=\"setLayerFillColor($event)\"\n        ></igo-color-picker-form-field>\n      </div>\n\n      <div class=\"stroke-color-picker mat-typography\">\n        <span>\n          <mat-icon class=\"stroke-palette-icon\" svgIcon=\"square-outline\">\n          </mat-icon>\n          {{ 'igo.geo.style.stroke' | translate }}\n        </span>\n        <igo-color-picker-form-field\n          formControlName=\"stroke\"\n          (colorChange)=\"setLayerStrokeColor($event)\"\n        ></igo-color-picker-form-field>\n      </div>\n    </form>\n  </div>\n</div>\n<div mat-dialog-actions>\n  <button mat-raised-button (click)=\"cancel()\">\n    {{ 'igo.geo.style.cancel' | translate }}\n  </button>\n  <button mat-raised-button color=\"primary\" (click)=\"confirm()\">OK</button>\n</div>\n", styles: ["h2{font-weight:700;font-size:large}.igo-form{padding:10px}.fill-field,.stroke-field{width:130px}.fill-color-picker mat-icon{position:relative;top:7px}.fill-color-picker mat-form-field{left:8px}.stroke-color-picker mat-icon{position:relative;top:7px}.stroke-color-picker mat-form-field{left:35px}.box{width:25px;height:25px}.edition-drawing{padding:10px 0}.igo-input-container .mat-mdc-form-field+.mat-form-field{margin-left:8px}.igo-form-input-box{width:150px}button{margin-right:5px}\n"], dependencies: [{ kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$6.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$6.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: ColorPickerFormFieldComponent, selector: "igo-color-picker-form-field", inputs: ["outputFormat"], outputs: ["colorChange"] }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: StyleModalLayerComponent, isStandalone: true, selector: "igo-style-modal-layer", inputs: { confirmFlag: "confirmFlag" }, ngImport: i0, template: "<h2 mat-dialog-title class=\"mat-typography\">\n  {{ 'igo.geo.style.styleModal' | translate }}\n</h2>\n<div mat-dialog-content>\n  <div class=\"edition-drawing mat-typography\">\n    <form class=\"igo-form\" [formGroup]=\"form\">\n      <div\n        class=\"fill-color-picker mat-typography\"\n        *ngIf=\"linestringOnly !== true\"\n      >\n        <span>\n          <mat-icon class=\"stroke-palette-icon\">format_color_fill</mat-icon>\n          {{ 'igo.geo.style.fill' | translate }}\n        </span>\n        <igo-color-picker-form-field\n          formControlName=\"fill\"\n          (colorChange)=\"setLayerFillColor($event)\"\n        ></igo-color-picker-form-field>\n      </div>\n\n      <div class=\"stroke-color-picker mat-typography\">\n        <span>\n          <mat-icon class=\"stroke-palette-icon\">border_color</mat-icon>\n          {{ 'igo.geo.style.stroke' | translate }}\n        </span>\n        <igo-color-picker-form-field\n          formControlName=\"stroke\"\n          (colorChange)=\"setLayerStrokeColor($event)\"\n        ></igo-color-picker-form-field>\n      </div>\n    </form>\n  </div>\n</div>\n<div mat-dialog-actions>\n  <button mat-raised-button (click)=\"cancel()\">\n    {{ 'igo.geo.style.cancel' | translate }}\n  </button>\n  <button mat-raised-button color=\"primary\" (click)=\"confirm()\">OK</button>\n</div>\n", styles: ["h2{font-weight:700;font-size:large}.igo-form{padding:10px}.fill-field,.stroke-field{width:130px}.fill-color-picker mat-icon{position:relative;top:7px}.fill-color-picker mat-form-field{left:8px}.stroke-color-picker mat-icon{position:relative;top:7px}.stroke-color-picker mat-form-field{left:35px}.box{width:25px;height:25px}.edition-drawing{padding:10px 0}.igo-input-container .mat-mdc-form-field+.mat-form-field{margin-left:8px}.igo-form-input-box{width:150px}button{margin-right:5px}\n"], dependencies: [{ kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$6.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$6.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: ColorPickerFormFieldComponent, selector: "igo-color-picker-form-field", inputs: ["outputFormat"], outputs: ["colorChange"] }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: StyleModalLayerComponent, decorators: [{
             type: Component,
@@ -34638,7 +34676,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                         MatDialogActions,
                         MatButtonModule,
                         TranslateModule
-                    ], template: "<h2 mat-dialog-title class=\"mat-typography\">\n  {{ 'igo.geo.style.styleModal' | translate }}\n</h2>\n<div mat-dialog-content>\n  <div class=\"edition-drawing mat-typography\">\n    <form class=\"igo-form\" [formGroup]=\"form\">\n      <div\n        class=\"fill-color-picker mat-typography\"\n        *ngIf=\"linestringOnly !== true\"\n      >\n        <span>\n          <mat-icon class=\"stroke-palette-icon\" svgIcon=\"square\"></mat-icon>\n          {{ 'igo.geo.style.fill' | translate }}\n        </span>\n        <igo-color-picker-form-field\n          formControlName=\"fill\"\n          (colorChange)=\"setLayerFillColor($event)\"\n        ></igo-color-picker-form-field>\n      </div>\n\n      <div class=\"stroke-color-picker mat-typography\">\n        <span>\n          <mat-icon class=\"stroke-palette-icon\" svgIcon=\"square-outline\">\n          </mat-icon>\n          {{ 'igo.geo.style.stroke' | translate }}\n        </span>\n        <igo-color-picker-form-field\n          formControlName=\"stroke\"\n          (colorChange)=\"setLayerStrokeColor($event)\"\n        ></igo-color-picker-form-field>\n      </div>\n    </form>\n  </div>\n</div>\n<div mat-dialog-actions>\n  <button mat-raised-button (click)=\"cancel()\">\n    {{ 'igo.geo.style.cancel' | translate }}\n  </button>\n  <button mat-raised-button color=\"primary\" (click)=\"confirm()\">OK</button>\n</div>\n", styles: ["h2{font-weight:700;font-size:large}.igo-form{padding:10px}.fill-field,.stroke-field{width:130px}.fill-color-picker mat-icon{position:relative;top:7px}.fill-color-picker mat-form-field{left:8px}.stroke-color-picker mat-icon{position:relative;top:7px}.stroke-color-picker mat-form-field{left:35px}.box{width:25px;height:25px}.edition-drawing{padding:10px 0}.igo-input-container .mat-mdc-form-field+.mat-form-field{margin-left:8px}.igo-form-input-box{width:150px}button{margin-right:5px}\n"] }]
+                    ], template: "<h2 mat-dialog-title class=\"mat-typography\">\n  {{ 'igo.geo.style.styleModal' | translate }}\n</h2>\n<div mat-dialog-content>\n  <div class=\"edition-drawing mat-typography\">\n    <form class=\"igo-form\" [formGroup]=\"form\">\n      <div\n        class=\"fill-color-picker mat-typography\"\n        *ngIf=\"linestringOnly !== true\"\n      >\n        <span>\n          <mat-icon class=\"stroke-palette-icon\">format_color_fill</mat-icon>\n          {{ 'igo.geo.style.fill' | translate }}\n        </span>\n        <igo-color-picker-form-field\n          formControlName=\"fill\"\n          (colorChange)=\"setLayerFillColor($event)\"\n        ></igo-color-picker-form-field>\n      </div>\n\n      <div class=\"stroke-color-picker mat-typography\">\n        <span>\n          <mat-icon class=\"stroke-palette-icon\">border_color</mat-icon>\n          {{ 'igo.geo.style.stroke' | translate }}\n        </span>\n        <igo-color-picker-form-field\n          formControlName=\"stroke\"\n          (colorChange)=\"setLayerStrokeColor($event)\"\n        ></igo-color-picker-form-field>\n      </div>\n    </form>\n  </div>\n</div>\n<div mat-dialog-actions>\n  <button mat-raised-button (click)=\"cancel()\">\n    {{ 'igo.geo.style.cancel' | translate }}\n  </button>\n  <button mat-raised-button color=\"primary\" (click)=\"confirm()\">OK</button>\n</div>\n", styles: ["h2{font-weight:700;font-size:large}.igo-form{padding:10px}.fill-field,.stroke-field{width:130px}.fill-color-picker mat-icon{position:relative;top:7px}.fill-color-picker mat-form-field{left:8px}.stroke-color-picker mat-icon{position:relative;top:7px}.stroke-color-picker mat-form-field{left:35px}.box{width:25px;height:25px}.edition-drawing{padding:10px 0}.igo-input-container .mat-mdc-form-field+.mat-form-field{margin-left:8px}.igo-form-input-box{width:150px}button{margin-right:5px}\n"] }]
         }], ctorParameters: () => [{ type: i1$5.MatDialogRef }, { type: i1$6.UntypedFormBuilder }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
@@ -34667,11 +34705,11 @@ class StyleModalLayerButtonComponent {
         }, 250);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: StyleModalLayerButtonComponent, deps: [{ token: i1$5.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: StyleModalLayerButtonComponent, isStandalone: true, selector: "igo-style-modal-layer-button", inputs: { layer: "layer" }, ngImport: i0, template: "<button\n  mat-icon-button\n  color=\"primary\"\n  (click)=\"openStyleModalDialog()\"\n  [matTooltip]=\"'igo.geo.style.styleModalTooltipLayer' | translate\"\n>\n  <mat-icon class=\"style-icon\" svgIcon=\"palette\"> </mat-icon>\n</button>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: StyleModalLayerButtonComponent, isStandalone: true, selector: "igo-style-modal-layer-button", inputs: { layer: "layer" }, ngImport: i0, template: "<button\n  mat-icon-button\n  color=\"primary\"\n  (click)=\"openStyleModalDialog()\"\n  [matTooltip]=\"'igo.geo.style.styleModalTooltipLayer' | translate\"\n>\n  <mat-icon class=\"style-icon\">palette </mat-icon>\n</button>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: StyleModalLayerButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'igo-style-modal-layer-button', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [MatButtonModule, MatTooltipModule, MatIconModule, TranslateModule], 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, standalone: true, imports: [MatButtonModule, MatTooltipModule, MatIconModule, TranslateModule], 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\">palette </mat-icon>\n</button>\n" }]
         }], ctorParameters: () => [{ type: i1$5.MatDialog }], propDecorators: { layer: [{
                 type: Input
             }] } });
@@ -34776,7 +34814,7 @@ class ToastComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: ToastComponent, isStandalone: true, selector: "igo-toast", inputs: { expanded: "expanded", map: "map", feature: "feature" }, outputs: { opened: "opened" }, ngImport: i0, template: "<igo-flexible\n  #flex\n  collapsedMobile=\"51px\"\n  expandedMobile=\"300px\"\n  [state]=\"state\"\n  (swipeup)=\"swipe($event.type)\"\n  (swipedown)=\"swipe($event.type)\"\n>\n  <igo-panel [title]=\"title\">\n    <button mat-icon-button panelLeftButton (click)=\"toggle()\">\n      <mat-icon\n        [svgIcon]=\"\n          ['collapsed', 'initial'].indexOf(flex.state) >= 0\n            ? 'arrow_upward'\n            : 'arrow_downward'\n        \"\n      ></mat-icon>\n    </button>\n\n    <button\n      mat-icon-button\n      panelRightButton\n      class=\"igo-icon-button\"\n      (click)=\"zoomToFeatureExtent()\"\n      *ngIf=\"feature.geometry\"\n    >\n      <mat-icon svgIcon=\"zoom-in\"></mat-icon>\n    </button>\n\n    <igo-feature-details [feature]=\"feature\"></igo-feature-details>\n  </igo-panel>\n</igo-flexible>\n", styles: [":host{position:absolute;bottom:0;width:100%;max-height:calc(100% - 50px);background-color:#fff}igo-feature-details ::ng-deep table{width:100%}\n"], dependencies: [{ kind: "component", type: FlexibleComponent, selector: "igo-flexible", inputs: ["initial", "collapsed", "expanded", "initialMobile", "collapsedMobile", "expandedMobile", "direction", "state"] }, { kind: "component", type: PanelComponent, selector: "igo-panel", inputs: ["title", "withHeader", "cursorPointer"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FeatureDetailsComponent, selector: "igo-feature-details", inputs: ["source", "map", "toolbox", "feature"], outputs: ["routeEvent", "selectFeature", "htmlDisplayEvent"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: ToastComponent, isStandalone: true, selector: "igo-toast", inputs: { expanded: "expanded", map: "map", feature: "feature" }, outputs: { opened: "opened" }, ngImport: i0, template: "<igo-flexible\n  #flex\n  collapsedMobile=\"51px\"\n  expandedMobile=\"300px\"\n  [state]=\"state\"\n  (swipeup)=\"swipe($event.type)\"\n  (swipedown)=\"swipe($event.type)\"\n>\n  <igo-panel [title]=\"title\">\n    <button mat-icon-button panelLeftButton (click)=\"toggle()\">\n      <mat-icon>{{\n        ['collapsed', 'initial'].indexOf(flex.state) >= 0\n          ? 'arrow_upward'\n          : 'arrow_downward'\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>zoom_in</mat-icon>\n    </button>\n\n    <igo-feature-details [feature]=\"feature\"></igo-feature-details>\n  </igo-panel>\n</igo-flexible>\n", styles: [":host{position:absolute;bottom:0;width:100%;max-height:calc(100% - 50px);background-color:#fff}igo-feature-details ::ng-deep table{width:100%}\n"], dependencies: [{ kind: "component", type: FlexibleComponent, selector: "igo-flexible", inputs: ["initial", "collapsed", "expanded", "initialMobile", "collapsedMobile", "expandedMobile", "direction", "state"] }, { kind: "component", type: PanelComponent, selector: "igo-panel", inputs: ["title", "withHeader", "cursorPointer"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FeatureDetailsComponent, selector: "igo-feature-details", inputs: ["source", "map", "toolbox", "feature"], outputs: ["routeEvent", "selectFeature", "htmlDisplayEvent"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ToastComponent, decorators: [{
             type: Component,
@@ -34787,7 +34825,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                         MatIconModule,
                         NgIf,
                         FeatureDetailsComponent
-                    ], 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"] }]
+                    ], 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        ['collapsed', 'initial'].indexOf(flex.state) >= 0\n          ? 'arrow_upward'\n          : 'arrow_downward'\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>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"] }]
         }], ctorParameters: () => [], propDecorators: { expanded: [{
                 type: Input
             }], map: [{
@@ -35307,7 +35345,7 @@ function getGeoServiceAction(workspace, layerService) {
                     else {
                         return [
                             {
-                                icon: 'plus',
+                                icon: 'add',
                                 color: 'primary',
                                 click: (row, record) => {
                                     addOrRemoveLayer('add', workspace.map, record.state.geoService.url, record.state.geoService.type, record.state.geoService.layerName, layerService);
@@ -35619,7 +35657,7 @@ class EditionWorkspaceService {
                     return [
                         {
                             editMode: false,
-                            icon: 'pencil',
+                            icon: 'edit',
                             color: 'primary',
                             disabled: layer.dataSource.options.edition.modifyButton === false
                                 ? true
@@ -35650,7 +35688,7 @@ class EditionWorkspaceService {
                         },
                         {
                             editMode: true,
-                            icon: 'alpha-x',
+                            icon: 'close',
                             color: 'primary',
                             disabled: this.loading,
                             click: (feature) => {
@@ -37935,10 +37973,10 @@ class CatalogBrowserLayerComponent {
     }
     getBadgeIcon() {
         if (this.inRange$.getValue()) {
-            return this.isVisible$.getValue() ? '' : 'eye-off';
+            return this.isVisible$.getValue() ? '' : 'visibility_off';
         }
         else {
-            return 'eye-off';
+            return 'visibility_off';
         }
     }
     computeTooltip() {
@@ -37962,7 +38000,7 @@ class CatalogBrowserLayerComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CatalogBrowserLayerComponent, deps: [{ token: LayerService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: CatalogBrowserLayerComponent, isStandalone: true, selector: "igo-catalog-browser-layer", inputs: { resolution: "resolution", catalogAllowLegend: "catalogAllowLegend", layer: "layer", map: "map", added: "added" }, outputs: { addedChange: "addedChange", addedLayerIsPreview: "addedLayerIsPreview" }, ngImport: i0, template: "<mat-list-item>\n  <mat-icon\n    *ngIf=\"haveGroup()\"\n    class=\"catalog-browser-layer-carret\"\n    matListItemIcon\n    svgIcon=\"blank\"\n  ></mat-icon>\n  <span\n    matListItemTitle\n    matTooltipShowDelay=\"500\"\n    [ngClass]=\"catalogAllowLegend ? 'igo-cataloglayer-title' : ''\"\n    (click)=\"askForLegend($event)\"\n    [matTooltip]=\"computeTitleTooltip()\"\n  >\n    {{ title }}\n  </span>\n\n  <div matListItemMeta>\n    <button *ngIf=\"layer.externalProvider\" disabled=\"true\" mat-icon-button>\n      <mat-icon\n        class=\"igo-cataloglayer-external-icon\"\n        tooltip-position=\"below\"\n        matTooltipShowDelay=\"500\"\n        [matTooltip]=\"'igo.geo.catalog.externalProvider.layer' | translate\"\n        color=\"primary\"\n        (click)=\"$event.stopPropagation()\"\n        svgIcon=\"earth-arrow-right\"\n      >\n      </mat-icon>\n    </button>\n    <igo-metadata-button [layer]=\"$any(layer)\"></igo-metadata-button>\n\n    <button\n      (mouseenter)=\"onMouseEvent($event)\"\n      (mouseleave)=\"onMouseEvent($event)\"\n      mat-icon-button\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"computeTooltip() | translate\"\n      [color]=\"(isPreview$ | async) ? '' : added ? 'warn' : ''\"\n      (click)=\"onToggleClick($event)\"\n    >\n      <mat-icon\n        aria-hidden=\"false\"\n        matBadge=\"icon\"\n        [igoMatBadgeIcon]=\"getBadgeIcon()\"\n        igoMatBadgeColor=\"rgba(0,0,0,0.87)\"\n        igoMatBadgeBackgroundColor=\"none\"\n        [igoMatBadgeInverseColor]=\"true\"\n        [matBadgeHidden]=\"\n          ((inRange$ | async) && (isVisible$ | async) === true) ||\n          ((inRange$ | async) && !added) ||\n          ((inRange$ | async) && (isPreview$ | async))\n        \"\n        [matBadgeDisabled]=\"(inRange$ | async) === false\"\n        matBadgeSize=\"small\"\n        matBadgePosition=\"after\"\n        [svgIcon]=\"(isPreview$ | async) ? 'plus' : added ? 'delete' : 'plus'\"\n      >\n      </mat-icon>\n    </button>\n  </div>\n</mat-list-item>\n\n<div #legend class=\"igo-cataloglayer-legend-container\">\n  <igo-layer-legend\n    *ngIf=\"\n      (layerLegendShown$ | async) && (igoLayer$ | async) && catalogAllowLegend\n    \"\n    [layer]=\"igoLayer$ | async\"\n  >\n  </igo-layer-legend>\n</div>\n", styles: [".igo-cataloglayer-title{cursor:pointer}.catalog-browser-layer-carret{margin-right:16px}.igo-cataloglayer-legend-container{padding-left:18px;width:calc(100% - 18px);margin-left:40px}.igo-cataloglayer-external-icon{cursor:help}:host .mdc-list-item__end,:host .mdc-list-item__start{color:#000}\n"], dependencies: [{ kind: "ngmodule", type: MatListModule }, { kind: "component", type: i2$5.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i2$5.MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "directive", type: i2$5.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "directive", type: i2$5.MatListItemMeta, selector: "[matListItemMeta]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: MetadataButtonComponent, selector: "igo-metadata-button", inputs: ["layer", "color"] }, { kind: "ngmodule", type: MatBadgeModule }, { kind: "directive", type: i4$2.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: IgoBadgeIconDirective, selector: "[igoMatBadgeIcon]", inputs: ["igoMatBadgeIcon", "matBadgeHidden", "matBadgeDisabled", "igoMatBadgeInverseColor", "igoMatBadgeInheritColor", "igoMatBadgeColor", "igoMatBadgeBackgroundColor"] }, { kind: "component", type: LayerLegendComponent, selector: "igo-layer-legend", inputs: ["updateLegendOnResolutionChange", "layer"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: CatalogBrowserLayerComponent, isStandalone: true, selector: "igo-catalog-browser-layer", inputs: { resolution: "resolution", catalogAllowLegend: "catalogAllowLegend", layer: "layer", map: "map", added: "added" }, outputs: { addedChange: "addedChange", addedLayerIsPreview: "addedLayerIsPreview" }, ngImport: i0, template: "<mat-list-item>\n  <mat-icon\n    *ngIf=\"haveGroup()\"\n    class=\"catalog-browser-layer-carret\"\n    matListItemIcon\n  ></mat-icon>\n  <span\n    matListItemTitle\n    matTooltipShowDelay=\"500\"\n    [ngClass]=\"catalogAllowLegend ? 'igo-cataloglayer-title' : ''\"\n    (click)=\"askForLegend($event)\"\n    [matTooltip]=\"computeTitleTooltip()\"\n  >\n    {{ title }}\n  </span>\n\n  <div matListItemMeta>\n    <button *ngIf=\"layer.externalProvider\" disabled=\"true\" mat-icon-button>\n      <mat-icon\n        class=\"igo-cataloglayer-external-icon\"\n        tooltip-position=\"below\"\n        matTooltipShowDelay=\"500\"\n        [matTooltip]=\"'igo.geo.catalog.externalProvider.layer' | translate\"\n        color=\"primary\"\n        (click)=\"$event.stopPropagation()\"\n      >\n        public\n      </mat-icon>\n    </button>\n    <igo-metadata-button [layer]=\"$any(layer)\"></igo-metadata-button>\n\n    <button\n      (mouseenter)=\"onMouseEvent($event)\"\n      (mouseleave)=\"onMouseEvent($event)\"\n      mat-icon-button\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"computeTooltip() | translate\"\n      [color]=\"(isPreview$ | async) ? '' : added ? 'warn' : ''\"\n      (click)=\"onToggleClick($event)\"\n    >\n      <mat-icon\n        aria-hidden=\"false\"\n        matBadge=\"icon\"\n        [igoMatBadgeIcon]=\"getBadgeIcon()\"\n        igoMatBadgeColor=\"rgba(0,0,0,0.87)\"\n        igoMatBadgeBackgroundColor=\"none\"\n        [igoMatBadgeInverseColor]=\"true\"\n        [matBadgeHidden]=\"\n          ((inRange$ | async) && (isVisible$ | async) === true) ||\n          ((inRange$ | async) && !added) ||\n          ((inRange$ | async) && (isPreview$ | async))\n        \"\n        [matBadgeDisabled]=\"(inRange$ | async) === false\"\n        matBadgeSize=\"small\"\n        matBadgePosition=\"after\"\n      >\n        {{ (isPreview$ | async) ? 'plus' : added ? 'delete' : 'add' }}\n      </mat-icon>\n    </button>\n  </div>\n</mat-list-item>\n\n<div #legend class=\"igo-cataloglayer-legend-container\">\n  <igo-layer-legend\n    *ngIf=\"\n      (layerLegendShown$ | async) && (igoLayer$ | async) && catalogAllowLegend\n    \"\n    [layer]=\"igoLayer$ | async\"\n  >\n  </igo-layer-legend>\n</div>\n", styles: [".igo-cataloglayer-title{cursor:pointer}.catalog-browser-layer-carret{margin-right:16px}.igo-cataloglayer-legend-container{padding-left:18px;width:calc(100% - 18px);margin-left:40px}.igo-cataloglayer-external-icon{cursor:help}:host .mdc-list-item__end,:host .mdc-list-item__start{color:#000}\n"], dependencies: [{ kind: "ngmodule", type: MatListModule }, { kind: "component", type: i2$5.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i2$5.MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "directive", type: i2$5.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "directive", type: i2$5.MatListItemMeta, selector: "[matListItemMeta]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: MetadataButtonComponent, selector: "igo-metadata-button", inputs: ["layer", "color"] }, { kind: "ngmodule", type: MatBadgeModule }, { kind: "directive", type: i4$2.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: IgoBadgeIconDirective, selector: "[igoMatBadgeIcon]", inputs: ["igoMatBadgeIcon", "matBadgeHidden", "matBadgeDisabled", "igoMatBadgeInverseColor", "igoMatBadgeInheritColor", "igoMatBadgeColor", "igoMatBadgeBackgroundColor"] }, { kind: "component", type: LayerLegendComponent, selector: "igo-layer-legend", inputs: ["updateLegendOnResolutionChange", "layer"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CatalogBrowserLayerComponent, decorators: [{
             type: Component,
@@ -37979,7 +38017,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                         LayerLegendComponent,
                         AsyncPipe,
                         TranslateModule
-                    ], template: "<mat-list-item>\n  <mat-icon\n    *ngIf=\"haveGroup()\"\n    class=\"catalog-browser-layer-carret\"\n    matListItemIcon\n    svgIcon=\"blank\"\n  ></mat-icon>\n  <span\n    matListItemTitle\n    matTooltipShowDelay=\"500\"\n    [ngClass]=\"catalogAllowLegend ? 'igo-cataloglayer-title' : ''\"\n    (click)=\"askForLegend($event)\"\n    [matTooltip]=\"computeTitleTooltip()\"\n  >\n    {{ title }}\n  </span>\n\n  <div matListItemMeta>\n    <button *ngIf=\"layer.externalProvider\" disabled=\"true\" mat-icon-button>\n      <mat-icon\n        class=\"igo-cataloglayer-external-icon\"\n        tooltip-position=\"below\"\n        matTooltipShowDelay=\"500\"\n        [matTooltip]=\"'igo.geo.catalog.externalProvider.layer' | translate\"\n        color=\"primary\"\n        (click)=\"$event.stopPropagation()\"\n        svgIcon=\"earth-arrow-right\"\n      >\n      </mat-icon>\n    </button>\n    <igo-metadata-button [layer]=\"$any(layer)\"></igo-metadata-button>\n\n    <button\n      (mouseenter)=\"onMouseEvent($event)\"\n      (mouseleave)=\"onMouseEvent($event)\"\n      mat-icon-button\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"computeTooltip() | translate\"\n      [color]=\"(isPreview$ | async) ? '' : added ? 'warn' : ''\"\n      (click)=\"onToggleClick($event)\"\n    >\n      <mat-icon\n        aria-hidden=\"false\"\n        matBadge=\"icon\"\n        [igoMatBadgeIcon]=\"getBadgeIcon()\"\n        igoMatBadgeColor=\"rgba(0,0,0,0.87)\"\n        igoMatBadgeBackgroundColor=\"none\"\n        [igoMatBadgeInverseColor]=\"true\"\n        [matBadgeHidden]=\"\n          ((inRange$ | async) && (isVisible$ | async) === true) ||\n          ((inRange$ | async) && !added) ||\n          ((inRange$ | async) && (isPreview$ | async))\n        \"\n        [matBadgeDisabled]=\"(inRange$ | async) === false\"\n        matBadgeSize=\"small\"\n        matBadgePosition=\"after\"\n        [svgIcon]=\"(isPreview$ | async) ? 'plus' : added ? 'delete' : 'plus'\"\n      >\n      </mat-icon>\n    </button>\n  </div>\n</mat-list-item>\n\n<div #legend class=\"igo-cataloglayer-legend-container\">\n  <igo-layer-legend\n    *ngIf=\"\n      (layerLegendShown$ | async) && (igoLayer$ | async) && catalogAllowLegend\n    \"\n    [layer]=\"igoLayer$ | async\"\n  >\n  </igo-layer-legend>\n</div>\n", styles: [".igo-cataloglayer-title{cursor:pointer}.catalog-browser-layer-carret{margin-right:16px}.igo-cataloglayer-legend-container{padding-left:18px;width:calc(100% - 18px);margin-left:40px}.igo-cataloglayer-external-icon{cursor:help}:host .mdc-list-item__end,:host .mdc-list-item__start{color:#000}\n"] }]
+                    ], template: "<mat-list-item>\n  <mat-icon\n    *ngIf=\"haveGroup()\"\n    class=\"catalog-browser-layer-carret\"\n    matListItemIcon\n  ></mat-icon>\n  <span\n    matListItemTitle\n    matTooltipShowDelay=\"500\"\n    [ngClass]=\"catalogAllowLegend ? 'igo-cataloglayer-title' : ''\"\n    (click)=\"askForLegend($event)\"\n    [matTooltip]=\"computeTitleTooltip()\"\n  >\n    {{ title }}\n  </span>\n\n  <div matListItemMeta>\n    <button *ngIf=\"layer.externalProvider\" disabled=\"true\" mat-icon-button>\n      <mat-icon\n        class=\"igo-cataloglayer-external-icon\"\n        tooltip-position=\"below\"\n        matTooltipShowDelay=\"500\"\n        [matTooltip]=\"'igo.geo.catalog.externalProvider.layer' | translate\"\n        color=\"primary\"\n        (click)=\"$event.stopPropagation()\"\n      >\n        public\n      </mat-icon>\n    </button>\n    <igo-metadata-button [layer]=\"$any(layer)\"></igo-metadata-button>\n\n    <button\n      (mouseenter)=\"onMouseEvent($event)\"\n      (mouseleave)=\"onMouseEvent($event)\"\n      mat-icon-button\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"computeTooltip() | translate\"\n      [color]=\"(isPreview$ | async) ? '' : added ? 'warn' : ''\"\n      (click)=\"onToggleClick($event)\"\n    >\n      <mat-icon\n        aria-hidden=\"false\"\n        matBadge=\"icon\"\n        [igoMatBadgeIcon]=\"getBadgeIcon()\"\n        igoMatBadgeColor=\"rgba(0,0,0,0.87)\"\n        igoMatBadgeBackgroundColor=\"none\"\n        [igoMatBadgeInverseColor]=\"true\"\n        [matBadgeHidden]=\"\n          ((inRange$ | async) && (isVisible$ | async) === true) ||\n          ((inRange$ | async) && !added) ||\n          ((inRange$ | async) && (isPreview$ | async))\n        \"\n        [matBadgeDisabled]=\"(inRange$ | async) === false\"\n        matBadgeSize=\"small\"\n        matBadgePosition=\"after\"\n      >\n        {{ (isPreview$ | async) ? 'plus' : added ? 'delete' : 'add' }}\n      </mat-icon>\n    </button>\n  </div>\n</mat-list-item>\n\n<div #legend class=\"igo-cataloglayer-legend-container\">\n  <igo-layer-legend\n    *ngIf=\"\n      (layerLegendShown$ | async) && (igoLayer$ | async) && catalogAllowLegend\n    \"\n    [layer]=\"igoLayer$ | async\"\n  >\n  </igo-layer-legend>\n</div>\n", styles: [".igo-cataloglayer-title{cursor:pointer}.catalog-browser-layer-carret{margin-right:16px}.igo-cataloglayer-legend-container{padding-left:18px;width:calc(100% - 18px);margin-left:40px}.igo-cataloglayer-external-icon{cursor:help}:host .mdc-list-item__end,:host .mdc-list-item__start{color:#000}\n"] }]
         }], ctorParameters: () => [{ type: LayerService }], propDecorators: { resolution: [{
                 type: Input
             }], catalogAllowLegend: [{
@@ -38171,7 +38209,7 @@ class CatalogBrowserGroupComponent {
         this.collapsed = !this.collapsed;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CatalogBrowserGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: CatalogBrowserGroupComponent, isStandalone: true, selector: "igo-catalog-browser-group", inputs: { catalog: "catalog", group: "group", map: "map", collapsed: "collapsed", resolution: "resolution", catalogAllowLegend: "catalogAllowLegend", toggleCollapsed: "toggleCollapsed", state: "state" }, outputs: { addedChange: "addedChange", layerAddedChange: "layerAddedChange" }, ngImport: i0, template: "<mat-list-item>\n  <mat-icon\n    matListItemIcon\n    svgIcon=\"chevron-up\"\n    igoCollapse\n    class=\"igo-chevron catalog-browser-group-carret\"\n    [target]=\"items\"\n    [collapsed]=\"collapsed\"\n    (toggle)=\"onToggleCollapsed($event)\"\n  >\n  </mat-icon>\n\n  <span\n    class=\"igo-catalog-group-title\"\n    matListItemTitle\n    matTooltipShowDelay=\"500\"\n    [matTooltip]=\"title\"\n    (click)=\"onTitleClick()\"\n    >{{ title }}</span\n  >\n\n  <div matListItemMeta>\n    <button *ngIf=\"group.externalProvider\" disabled=\"true\" mat-icon-button>\n      <mat-icon\n        class=\"igo-cataloggroup-external-icon\"\n        *ngIf=\"group.externalProvider\"\n        tooltip-position=\"below\"\n        matTooltipShowDelay=\"500\"\n        [matTooltip]=\"'igo.geo.catalog.externalProvider.group' | translate\"\n        color=\"primary\"\n        (click)=\"$event.stopPropagation()\"\n        svgIcon=\"earth-arrow-right\"\n      >\n      </mat-icon>\n    </button>\n\n    <ng-container\n      *ngIf=\"(added$ | async) && (preview$ | async) === false; else notadded\"\n    >\n      <button\n        mat-icon-button\n        tooltip-position=\"below\"\n        matTooltipShowDelay=\"500\"\n        [matTooltip]=\"'igo.geo.catalog.group.removeFromMap' | translate\"\n        color=\"warn\"\n        [disabled]=\"disabled$ | async\"\n        (click)=\"onToggleClick($event)\"\n      >\n        <mat-icon svgIcon=\"delete\"></mat-icon>\n      </button>\n    </ng-container>\n\n    <ng-template #notadded>\n      <button\n        mat-icon-button\n        tooltip-position=\"below\"\n        matTooltipShowDelay=\"500\"\n        [matTooltip]=\"'igo.geo.catalog.group.addToMap' | translate\"\n        [disabled]=\"disabled$ | async\"\n        (click)=\"onToggleClick($event)\"\n      >\n        <mat-icon svgIcon=\"plus\"></mat-icon>\n      </button>\n    </ng-template>\n  </div>\n</mat-list-item>\n\n<div #items>\n  <ng-template ngFor let-item [ngForOf]=\"store.view.all$() | async\">\n    <ng-container *ngIf=\"isGroup(item)\">\n      <!-- todo: add display ans manage CatalogItemGroup -->\n    </ng-container>\n    <ng-container *ngIf=\"isLayer(item)\">\n      <igo-catalog-browser-layer\n        igoListItem\n        [layer]=\"$any(item)\"\n        [resolution]=\"resolution\"\n        [map]=\"map\"\n        [catalogAllowLegend]=\"catalogAllowLegend\"\n        [added]=\"state.get(item).added\"\n        (addedLayerIsPreview)=\"onLayerPreview($event)\"\n        (addedChange)=\"onLayerAddedChange($event)\"\n      >\n      </igo-catalog-browser-layer>\n    </ng-container>\n  </ng-template>\n</div>\n", styles: [".igo-catalog-group-title{cursor:pointer}.igo-cataloggroup-external-icon{cursor:help}.catalog-browser-group-carret{margin-right:16px}.igo-catalog-group-title{font-weight:500}:host .mdc-list-item__end,:host .mdc-list-item__start{color:#000}\n"], dependencies: [{ kind: "ngmodule", type: MatListModule }, { kind: "component", type: i2$5.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i2$5.MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "directive", type: i2$5.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "directive", type: i2$5.MatListItemMeta, selector: "[matListItemMeta]" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: CollapseDirective, selector: "[igoCollapse]", inputs: ["target", "collapsed"], outputs: ["toggle"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: CatalogBrowserLayerComponent, selector: "igo-catalog-browser-layer", inputs: ["resolution", "catalogAllowLegend", "layer", "map", "added"], outputs: ["addedChange", "addedLayerIsPreview"] }, { kind: "directive", type: ListItemDirective, selector: "[igoListItem]", inputs: ["color", "focused", "selected", "disabled"], outputs: ["beforeSelect", "beforeFocus", "beforeUnselect", "beforeUnfocus", "beforeDisable", "beforeEnable", "focus", "unfocus", "select", "unselect", "disable", "enable"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: CatalogBrowserGroupComponent, isStandalone: true, selector: "igo-catalog-browser-group", inputs: { catalog: "catalog", group: "group", map: "map", collapsed: "collapsed", resolution: "resolution", catalogAllowLegend: "catalogAllowLegend", toggleCollapsed: "toggleCollapsed", state: "state" }, outputs: { addedChange: "addedChange", layerAddedChange: "layerAddedChange" }, ngImport: i0, template: "<mat-list-item>\n  <mat-icon\n    matListItemIcon\n    igoCollapse\n    class=\"igo-chevron catalog-browser-group-carret\"\n    [target]=\"items\"\n    [collapsed]=\"collapsed\"\n    (toggle)=\"onToggleCollapsed($event)\"\n  >\n    expand_less\n  </mat-icon>\n\n  <span\n    class=\"igo-catalog-group-title\"\n    matListItemTitle\n    matTooltipShowDelay=\"500\"\n    [matTooltip]=\"title\"\n    (click)=\"onTitleClick()\"\n    >{{ title }}</span\n  >\n\n  <div matListItemMeta>\n    <button *ngIf=\"group.externalProvider\" disabled=\"true\" mat-icon-button>\n      <mat-icon\n        class=\"igo-cataloggroup-external-icon\"\n        *ngIf=\"group.externalProvider\"\n        tooltip-position=\"below\"\n        matTooltipShowDelay=\"500\"\n        [matTooltip]=\"'igo.geo.catalog.externalProvider.group' | translate\"\n        color=\"primary\"\n        (click)=\"$event.stopPropagation()\"\n      >\n        public\n      </mat-icon>\n    </button>\n\n    <ng-container\n      *ngIf=\"(added$ | async) && (preview$ | async) === false; else notadded\"\n    >\n      <button\n        mat-icon-button\n        tooltip-position=\"below\"\n        matTooltipShowDelay=\"500\"\n        [matTooltip]=\"'igo.geo.catalog.group.removeFromMap' | translate\"\n        color=\"warn\"\n        [disabled]=\"disabled$ | async\"\n        (click)=\"onToggleClick($event)\"\n      >\n        <mat-icon>delete</mat-icon>\n      </button>\n    </ng-container>\n\n    <ng-template #notadded>\n      <button\n        mat-icon-button\n        tooltip-position=\"below\"\n        matTooltipShowDelay=\"500\"\n        [matTooltip]=\"'igo.geo.catalog.group.addToMap' | translate\"\n        [disabled]=\"disabled$ | async\"\n        (click)=\"onToggleClick($event)\"\n      >\n        <mat-icon>add</mat-icon>\n      </button>\n    </ng-template>\n  </div>\n</mat-list-item>\n\n<div #items>\n  <ng-template ngFor let-item [ngForOf]=\"store.view.all$() | async\">\n    <ng-container *ngIf=\"isGroup(item)\">\n      <!-- todo: add display ans manage CatalogItemGroup -->\n    </ng-container>\n    <ng-container *ngIf=\"isLayer(item)\">\n      <igo-catalog-browser-layer\n        igoListItem\n        [layer]=\"$any(item)\"\n        [resolution]=\"resolution\"\n        [map]=\"map\"\n        [catalogAllowLegend]=\"catalogAllowLegend\"\n        [added]=\"state.get(item).added\"\n        (addedLayerIsPreview)=\"onLayerPreview($event)\"\n        (addedChange)=\"onLayerAddedChange($event)\"\n      >\n      </igo-catalog-browser-layer>\n    </ng-container>\n  </ng-template>\n</div>\n", styles: [".igo-catalog-group-title{cursor:pointer}.igo-cataloggroup-external-icon{cursor:help}.catalog-browser-group-carret{margin-right:16px}.igo-catalog-group-title{font-weight:500}:host .mdc-list-item__end,:host .mdc-list-item__start{color:#000}\n"], dependencies: [{ kind: "ngmodule", type: MatListModule }, { kind: "component", type: i2$5.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i2$5.MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "directive", type: i2$5.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "directive", type: i2$5.MatListItemMeta, selector: "[matListItemMeta]" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: CollapseDirective, selector: "[igoCollapse]", inputs: ["target", "collapsed"], outputs: ["toggle"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: CatalogBrowserLayerComponent, selector: "igo-catalog-browser-layer", inputs: ["resolution", "catalogAllowLegend", "layer", "map", "added"], outputs: ["addedChange", "addedLayerIsPreview"] }, { kind: "directive", type: ListItemDirective, selector: "[igoListItem]", inputs: ["color", "focused", "selected", "disabled"], outputs: ["beforeSelect", "beforeFocus", "beforeUnselect", "beforeUnfocus", "beforeDisable", "beforeEnable", "focus", "unfocus", "select", "unselect", "disable", "enable"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CatalogBrowserGroupComponent, decorators: [{
             type: Component,
@@ -38187,7 +38225,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                         ListItemDirective,
                         AsyncPipe,
                         TranslateModule
-                    ], template: "<mat-list-item>\n  <mat-icon\n    matListItemIcon\n    svgIcon=\"chevron-up\"\n    igoCollapse\n    class=\"igo-chevron catalog-browser-group-carret\"\n    [target]=\"items\"\n    [collapsed]=\"collapsed\"\n    (toggle)=\"onToggleCollapsed($event)\"\n  >\n  </mat-icon>\n\n  <span\n    class=\"igo-catalog-group-title\"\n    matListItemTitle\n    matTooltipShowDelay=\"500\"\n    [matTooltip]=\"title\"\n    (click)=\"onTitleClick()\"\n    >{{ title }}</span\n  >\n\n  <div matListItemMeta>\n    <button *ngIf=\"group.externalProvider\" disabled=\"true\" mat-icon-button>\n      <mat-icon\n        class=\"igo-cataloggroup-external-icon\"\n        *ngIf=\"group.externalProvider\"\n        tooltip-position=\"below\"\n        matTooltipShowDelay=\"500\"\n        [matTooltip]=\"'igo.geo.catalog.externalProvider.group' | translate\"\n        color=\"primary\"\n        (click)=\"$event.stopPropagation()\"\n        svgIcon=\"earth-arrow-right\"\n      >\n      </mat-icon>\n    </button>\n\n    <ng-container\n      *ngIf=\"(added$ | async) && (preview$ | async) === false; else notadded\"\n    >\n      <button\n        mat-icon-button\n        tooltip-position=\"below\"\n        matTooltipShowDelay=\"500\"\n        [matTooltip]=\"'igo.geo.catalog.group.removeFromMap' | translate\"\n        color=\"warn\"\n        [disabled]=\"disabled$ | async\"\n        (click)=\"onToggleClick($event)\"\n      >\n        <mat-icon svgIcon=\"delete\"></mat-icon>\n      </button>\n    </ng-container>\n\n    <ng-template #notadded>\n      <button\n        mat-icon-button\n        tooltip-position=\"below\"\n        matTooltipShowDelay=\"500\"\n        [matTooltip]=\"'igo.geo.catalog.group.addToMap' | translate\"\n        [disabled]=\"disabled$ | async\"\n        (click)=\"onToggleClick($event)\"\n      >\n        <mat-icon svgIcon=\"plus\"></mat-icon>\n      </button>\n    </ng-template>\n  </div>\n</mat-list-item>\n\n<div #items>\n  <ng-template ngFor let-item [ngForOf]=\"store.view.all$() | async\">\n    <ng-container *ngIf=\"isGroup(item)\">\n      <!-- todo: add display ans manage CatalogItemGroup -->\n    </ng-container>\n    <ng-container *ngIf=\"isLayer(item)\">\n      <igo-catalog-browser-layer\n        igoListItem\n        [layer]=\"$any(item)\"\n        [resolution]=\"resolution\"\n        [map]=\"map\"\n        [catalogAllowLegend]=\"catalogAllowLegend\"\n        [added]=\"state.get(item).added\"\n        (addedLayerIsPreview)=\"onLayerPreview($event)\"\n        (addedChange)=\"onLayerAddedChange($event)\"\n      >\n      </igo-catalog-browser-layer>\n    </ng-container>\n  </ng-template>\n</div>\n", styles: [".igo-catalog-group-title{cursor:pointer}.igo-cataloggroup-external-icon{cursor:help}.catalog-browser-group-carret{margin-right:16px}.igo-catalog-group-title{font-weight:500}:host .mdc-list-item__end,:host .mdc-list-item__start{color:#000}\n"] }]
+                    ], template: "<mat-list-item>\n  <mat-icon\n    matListItemIcon\n    igoCollapse\n    class=\"igo-chevron catalog-browser-group-carret\"\n    [target]=\"items\"\n    [collapsed]=\"collapsed\"\n    (toggle)=\"onToggleCollapsed($event)\"\n  >\n    expand_less\n  </mat-icon>\n\n  <span\n    class=\"igo-catalog-group-title\"\n    matListItemTitle\n    matTooltipShowDelay=\"500\"\n    [matTooltip]=\"title\"\n    (click)=\"onTitleClick()\"\n    >{{ title }}</span\n  >\n\n  <div matListItemMeta>\n    <button *ngIf=\"group.externalProvider\" disabled=\"true\" mat-icon-button>\n      <mat-icon\n        class=\"igo-cataloggroup-external-icon\"\n        *ngIf=\"group.externalProvider\"\n        tooltip-position=\"below\"\n        matTooltipShowDelay=\"500\"\n        [matTooltip]=\"'igo.geo.catalog.externalProvider.group' | translate\"\n        color=\"primary\"\n        (click)=\"$event.stopPropagation()\"\n      >\n        public\n      </mat-icon>\n    </button>\n\n    <ng-container\n      *ngIf=\"(added$ | async) && (preview$ | async) === false; else notadded\"\n    >\n      <button\n        mat-icon-button\n        tooltip-position=\"below\"\n        matTooltipShowDelay=\"500\"\n        [matTooltip]=\"'igo.geo.catalog.group.removeFromMap' | translate\"\n        color=\"warn\"\n        [disabled]=\"disabled$ | async\"\n        (click)=\"onToggleClick($event)\"\n      >\n        <mat-icon>delete</mat-icon>\n      </button>\n    </ng-container>\n\n    <ng-template #notadded>\n      <button\n        mat-icon-button\n        tooltip-position=\"below\"\n        matTooltipShowDelay=\"500\"\n        [matTooltip]=\"'igo.geo.catalog.group.addToMap' | translate\"\n        [disabled]=\"disabled$ | async\"\n        (click)=\"onToggleClick($event)\"\n      >\n        <mat-icon>add</mat-icon>\n      </button>\n    </ng-template>\n  </div>\n</mat-list-item>\n\n<div #items>\n  <ng-template ngFor let-item [ngForOf]=\"store.view.all$() | async\">\n    <ng-container *ngIf=\"isGroup(item)\">\n      <!-- todo: add display ans manage CatalogItemGroup -->\n    </ng-container>\n    <ng-container *ngIf=\"isLayer(item)\">\n      <igo-catalog-browser-layer\n        igoListItem\n        [layer]=\"$any(item)\"\n        [resolution]=\"resolution\"\n        [map]=\"map\"\n        [catalogAllowLegend]=\"catalogAllowLegend\"\n        [added]=\"state.get(item).added\"\n        (addedLayerIsPreview)=\"onLayerPreview($event)\"\n        (addedChange)=\"onLayerAddedChange($event)\"\n      >\n      </igo-catalog-browser-layer>\n    </ng-container>\n  </ng-template>\n</div>\n", styles: [".igo-catalog-group-title{cursor:pointer}.igo-cataloggroup-external-icon{cursor:help}.catalog-browser-group-carret{margin-right:16px}.igo-catalog-group-title{font-weight:500}:host .mdc-list-item__end,:host .mdc-list-item__start{color:#000}\n"] }]
         }], propDecorators: { catalog: [{
                 type: Input
             }], group: [{
@@ -38586,7 +38624,7 @@ class CatalogLibaryItemComponent {
         this.catalogRemove.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CatalogLibaryItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: CatalogLibaryItemComponent, isStandalone: true, selector: "igo-catalog-library-item", inputs: { catalog: "catalog", map: "map" }, outputs: { catalogRemove: "catalogRemove" }, ngImport: i0, template: "<mat-list-item>\n  <span matListItemTitle>\n    {{ title }}\n  </span>\n  <div matListItemMeta>\n    <mat-icon\n      *ngIf=\"catalog.externalProvider\"\n      matListItemIcon\n      class=\"igo-external-provider\"\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"'igo.geo.catalog.externalProvider.catalog' | translate\"\n      color=\"primary\"\n      (click)=\"$event.stopPropagation()\"\n      svgIcon=\"earth-arrow-right\"\n    >\n    </mat-icon>\n    <button\n      *ngIf=\"catalog.removable\"\n      mat-icon-button\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"'igo.geo.catalog.library.remove' | translate\"\n      color=\"warn\"\n      (click)=\"removeCatalogFromLibrary($event)\"\n    >\n      <mat-icon svgIcon=\"delete\"></mat-icon>\n    </button>\n\n    <button\n      class=\"igo-blank\"\n      *ngIf=\"!catalog.removable\"\n      disabled=\"true\"\n      mat-icon-button\n    >\n      <mat-icon svgIcon=\"blank\"></mat-icon>\n    </button>\n  </div>\n</mat-list-item>\n", styles: [".igo-blank{cursor:pointer}.igo-external-provider{cursor:help}\n"], dependencies: [{ kind: "ngmodule", type: MatListModule }, { kind: "component", type: i2$5.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i2$5.MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "directive", type: i2$5.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "directive", type: i2$5.MatListItemMeta, selector: "[matListItemMeta]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: CatalogLibaryItemComponent, isStandalone: true, selector: "igo-catalog-library-item", inputs: { catalog: "catalog", map: "map" }, outputs: { catalogRemove: "catalogRemove" }, ngImport: i0, template: "<mat-list-item>\n  <span matListItemTitle>\n    {{ title }}\n  </span>\n  <div matListItemMeta>\n    <mat-icon\n      *ngIf=\"catalog.externalProvider\"\n      matListItemIcon\n      class=\"igo-external-provider\"\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"'igo.geo.catalog.externalProvider.catalog' | translate\"\n      color=\"primary\"\n      (click)=\"$event.stopPropagation()\"\n    >\n      public\n    </mat-icon>\n    <button\n      *ngIf=\"catalog.removable\"\n      mat-icon-button\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"'igo.geo.catalog.library.remove' | translate\"\n      color=\"warn\"\n      (click)=\"removeCatalogFromLibrary($event)\"\n    >\n      <mat-icon>delete</mat-icon>\n    </button>\n\n    <button\n      class=\"igo-blank\"\n      *ngIf=\"!catalog.removable\"\n      disabled=\"true\"\n      mat-icon-button\n    >\n      <mat-icon></mat-icon>\n    </button>\n  </div>\n</mat-list-item>\n", styles: [".igo-blank{cursor:pointer}.igo-external-provider{cursor:help}\n"], dependencies: [{ kind: "ngmodule", type: MatListModule }, { kind: "component", type: i2$5.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i2$5.MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "directive", type: i2$5.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "directive", type: i2$5.MatListItemMeta, selector: "[matListItemMeta]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CatalogLibaryItemComponent, decorators: [{
             type: Component,
@@ -38597,7 +38635,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                         MatTooltipModule,
                         MatButtonModule,
                         TranslateModule
-                    ], template: "<mat-list-item>\n  <span matListItemTitle>\n    {{ title }}\n  </span>\n  <div matListItemMeta>\n    <mat-icon\n      *ngIf=\"catalog.externalProvider\"\n      matListItemIcon\n      class=\"igo-external-provider\"\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"'igo.geo.catalog.externalProvider.catalog' | translate\"\n      color=\"primary\"\n      (click)=\"$event.stopPropagation()\"\n      svgIcon=\"earth-arrow-right\"\n    >\n    </mat-icon>\n    <button\n      *ngIf=\"catalog.removable\"\n      mat-icon-button\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"'igo.geo.catalog.library.remove' | translate\"\n      color=\"warn\"\n      (click)=\"removeCatalogFromLibrary($event)\"\n    >\n      <mat-icon svgIcon=\"delete\"></mat-icon>\n    </button>\n\n    <button\n      class=\"igo-blank\"\n      *ngIf=\"!catalog.removable\"\n      disabled=\"true\"\n      mat-icon-button\n    >\n      <mat-icon svgIcon=\"blank\"></mat-icon>\n    </button>\n  </div>\n</mat-list-item>\n", styles: [".igo-blank{cursor:pointer}.igo-external-provider{cursor:help}\n"] }]
+                    ], template: "<mat-list-item>\n  <span matListItemTitle>\n    {{ title }}\n  </span>\n  <div matListItemMeta>\n    <mat-icon\n      *ngIf=\"catalog.externalProvider\"\n      matListItemIcon\n      class=\"igo-external-provider\"\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"'igo.geo.catalog.externalProvider.catalog' | translate\"\n      color=\"primary\"\n      (click)=\"$event.stopPropagation()\"\n    >\n      public\n    </mat-icon>\n    <button\n      *ngIf=\"catalog.removable\"\n      mat-icon-button\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"'igo.geo.catalog.library.remove' | translate\"\n      color=\"warn\"\n      (click)=\"removeCatalogFromLibrary($event)\"\n    >\n      <mat-icon>delete</mat-icon>\n    </button>\n\n    <button\n      class=\"igo-blank\"\n      *ngIf=\"!catalog.removable\"\n      disabled=\"true\"\n      mat-icon-button\n    >\n      <mat-icon></mat-icon>\n    </button>\n  </div>\n</mat-list-item>\n", styles: [".igo-blank{cursor:pointer}.igo-external-provider{cursor:help}\n"] }]
         }], propDecorators: { catalog: [{
                 type: Input
             }], map: [{
@@ -38767,7 +38805,7 @@ class CatalogLibaryComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CatalogLibaryComponent, deps: [{ token: CapabilitiesService }, { token: i2$3.MessageService }, { token: i3$2.StorageService }, { token: i1$5.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: CatalogLibaryComponent, isStandalone: true, selector: "igo-catalog-library", inputs: { store: "store", map: "map", addCatalogAllowed: "addCatalogAllowed", predefinedCatalogs: "predefinedCatalogs" }, outputs: { catalogSelectChange: "catalogSelectChange" }, ngImport: i0, template: "<igo-list [navigation]=\"false\">\n  <ng-template ngFor let-catalog [ngForOf]=\"getCatalogs() | async\">\n    <igo-catalog-library-item\n      igoListItem\n      color=\"accent\"\n      [map]=\"map\"\n      [catalog]=\"catalog\"\n      (catalogRemove)=\"onCatalogRemove(catalog)\"\n      (select)=\"onCatalogSelect(catalog)\"\n    >\n    </igo-catalog-library-item>\n  </ng-template>\n</igo-list>\n\n<div *ngIf=\"addCatalogAllowed\" class=\"btnAddCatalog\">\n  <button\n    mat-raised-button\n    [matTooltip]=\"'igo.geo.catalog.library.addBtn' | translate\"\n    matTooltipPosition=\"above\"\n    color=\"primary\"\n    (click)=\"addCatalogDialog()\"\n  >\n    {{ 'igo.geo.catalog.library.addBtn' | translate }}\n    <mat-icon svgIcon=\"earth-plus\"></mat-icon>\n  </button>\n</div>\n", styles: [":host igo-list{height:auto}:host .btnAddCatalog{justify-content:center;display:flex;margin:30px 0}\n"], dependencies: [{ kind: "component", type: ListComponent, selector: "igo-list", inputs: ["navigation", "selection"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: CatalogLibaryItemComponent, selector: "igo-catalog-library-item", inputs: ["catalog", "map"], outputs: ["catalogRemove"] }, { kind: "directive", type: ListItemDirective, selector: "[igoListItem]", inputs: ["color", "focused", "selected", "disabled"], outputs: ["beforeSelect", "beforeFocus", "beforeUnselect", "beforeUnfocus", "beforeDisable", "beforeEnable", "focus", "unfocus", "select", "unselect", "disable", "enable"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: CatalogLibaryComponent, isStandalone: true, selector: "igo-catalog-library", inputs: { store: "store", map: "map", addCatalogAllowed: "addCatalogAllowed", predefinedCatalogs: "predefinedCatalogs" }, outputs: { catalogSelectChange: "catalogSelectChange" }, ngImport: i0, template: "<igo-list [navigation]=\"false\">\n  <ng-template ngFor let-catalog [ngForOf]=\"getCatalogs() | async\">\n    <igo-catalog-library-item\n      igoListItem\n      color=\"accent\"\n      [map]=\"map\"\n      [catalog]=\"catalog\"\n      (catalogRemove)=\"onCatalogRemove(catalog)\"\n      (select)=\"onCatalogSelect(catalog)\"\n    >\n    </igo-catalog-library-item>\n  </ng-template>\n</igo-list>\n\n<div *ngIf=\"addCatalogAllowed\" class=\"btnAddCatalog\">\n  <button\n    mat-raised-button\n    [matTooltip]=\"'igo.geo.catalog.library.addBtn' | translate\"\n    matTooltipPosition=\"above\"\n    color=\"primary\"\n    (click)=\"addCatalogDialog()\"\n  >\n    {{ 'igo.geo.catalog.library.addBtn' | translate }}\n    <mat-icon>library_add</mat-icon>\n  </button>\n</div>\n", styles: [":host igo-list{height:auto}:host .btnAddCatalog{justify-content:center;display:flex;margin:30px 0}\n"], dependencies: [{ kind: "component", type: ListComponent, selector: "igo-list", inputs: ["navigation", "selection"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: CatalogLibaryItemComponent, selector: "igo-catalog-library-item", inputs: ["catalog", "map"], outputs: ["catalogRemove"] }, { kind: "directive", type: ListItemDirective, selector: "[igoListItem]", inputs: ["color", "focused", "selected", "disabled"], outputs: ["beforeSelect", "beforeFocus", "beforeUnselect", "beforeUnfocus", "beforeDisable", "beforeEnable", "focus", "unfocus", "select", "unselect", "disable", "enable"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CatalogLibaryComponent, decorators: [{
             type: Component,
@@ -38782,7 +38820,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                         MatIconModule,
                         AsyncPipe,
                         TranslateModule
-                    ], 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"] }]
+                    ], 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>library_add</mat-icon>\n  </button>\n</div>\n", styles: [":host igo-list{height:auto}:host .btnAddCatalog{justify-content:center;display:flex;margin:30px 0}\n"] }]
         }], ctorParameters: () => [{ type: CapabilitiesService }, { type: i2$3.MessageService }, { type: i3$2.StorageService }, { type: i1$5.MatDialog }], propDecorators: { store: [{
                 type: Input
             }], map: [{
@@ -39007,7 +39045,7 @@ let GeometryFormFieldComponent = class GeometryFormFieldComponent {
         this.value$$.unsubscribe();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: GeometryFormFieldComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: GeometryFormFieldComponent, isStandalone: true, selector: "igo-geometry-form-field", inputs: { formControl: "formControl", map: "map", geometryType: "geometryType", geometryTypeField: "geometryTypeField", geometryTypes: "geometryTypes", drawGuideField: "drawGuideField", drawGuide: "drawGuide", drawGuidePlaceholder: "drawGuidePlaceholder", measure: "measure", controlOptions: "controlOptions", drawStyle: "drawStyle", overlayStyle: "overlayStyle" }, ngImport: i0, template: "<igo-geometry-form-field-input\n  [formControl]=\"formControl\"\n  [map]=\"map\"\n  [geometryType]=\"geometryType$ | async\"\n  [drawGuide]=\"drawGuide$ | async\"\n  [measure]=\"measure\"\n  [drawControlIsActive]=\"drawControlIsActive\"\n  [freehandDrawIsActive]=\"freehandDrawIsActive\"\n  [controlOptions]=\"controlOptions\"\n  [drawStyle]=\"drawStyle\"\n  [overlayStyle]=\"overlayStyle\"\n>\n</igo-geometry-form-field-input>\n\n<div *ngIf=\"geometryTypeField\" class=\"geometry-type-toggle\">\n  <mat-button-toggle-group\n    [disabled]=\"(value$ | async) !== undefined\"\n    [(ngModel)]=\"geometryType\"\n  >\n    <mat-button-toggle\n      value=\"Point\"\n      [disabled]=\"geometryTypes.indexOf('Point') < 0\"\n    >\n      {{ 'igo.geo.geometry.point' | translate }}\n    </mat-button-toggle>\n    <mat-button-toggle\n      value=\"LineString\"\n      [disabled]=\"geometryTypes.indexOf('LineString') < 0\"\n    >\n      {{ 'igo.geo.geometry.line' | translate }}\n    </mat-button-toggle>\n    <mat-button-toggle\n      value=\"Polygon\"\n      [disabled]=\"geometryTypes.indexOf('Polygon') < 0\"\n    >\n      {{ 'igo.geo.geometry.polygon' | translate }}\n    </mat-button-toggle>\n  </mat-button-toggle-group>\n</div>\n\n<mat-form-field *ngIf=\"drawGuideField\" class=\"draw-guide-field\">\n  <input\n    matInput\n    type=\"number\"\n    [placeholder]=\"drawGuidePlaceholder\"\n    [(ngModel)]=\"drawGuide\"\n  />\n  <mat-icon matPrefix [color]=\"'primary'\" svgIcon=\"adjust\"> </mat-icon>\n  <span matSuffix class=\"draw-guide-units\">{{\n    'igo.geo.measure.meters' | translate\n  }}</span>\n</mat-form-field>\n", styles: [":host{display:block;width:100%}.geometry-type-toggle,.draw-guide-field{width:100%}.geometry-type-toggle{padding:10px;text-align:center}.draw-guide-field mat-icon{margin:0 10px}.draw-guide-units{padding:10px}\n"], dependencies: [{ kind: "component", type: GeometryFormFieldInputComponent, selector: "igo-geometry-form-field-input", inputs: ["map", "geometryType", "drawGuide", "measure", "drawControlIsActive", "freehandDrawIsActive", "predefinedRadius", "controlOptions", "drawStyle", "overlayStyle", "value", "radius"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$6.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$6.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i4$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i4$1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: GeometryFormFieldComponent, isStandalone: true, selector: "igo-geometry-form-field", inputs: { formControl: "formControl", map: "map", geometryType: "geometryType", geometryTypeField: "geometryTypeField", geometryTypes: "geometryTypes", drawGuideField: "drawGuideField", drawGuide: "drawGuide", drawGuidePlaceholder: "drawGuidePlaceholder", measure: "measure", controlOptions: "controlOptions", drawStyle: "drawStyle", overlayStyle: "overlayStyle" }, ngImport: i0, template: "<igo-geometry-form-field-input\n  [formControl]=\"formControl\"\n  [map]=\"map\"\n  [geometryType]=\"geometryType$ | async\"\n  [drawGuide]=\"drawGuide$ | async\"\n  [measure]=\"measure\"\n  [drawControlIsActive]=\"drawControlIsActive\"\n  [freehandDrawIsActive]=\"freehandDrawIsActive\"\n  [controlOptions]=\"controlOptions\"\n  [drawStyle]=\"drawStyle\"\n  [overlayStyle]=\"overlayStyle\"\n>\n</igo-geometry-form-field-input>\n\n<div *ngIf=\"geometryTypeField\" class=\"geometry-type-toggle\">\n  <mat-button-toggle-group\n    [disabled]=\"(value$ | async) !== undefined\"\n    [(ngModel)]=\"geometryType\"\n  >\n    <mat-button-toggle\n      value=\"Point\"\n      [disabled]=\"geometryTypes.indexOf('Point') < 0\"\n    >\n      {{ 'igo.geo.geometry.point' | translate }}\n    </mat-button-toggle>\n    <mat-button-toggle\n      value=\"LineString\"\n      [disabled]=\"geometryTypes.indexOf('LineString') < 0\"\n    >\n      {{ 'igo.geo.geometry.line' | translate }}\n    </mat-button-toggle>\n    <mat-button-toggle\n      value=\"Polygon\"\n      [disabled]=\"geometryTypes.indexOf('Polygon') < 0\"\n    >\n      {{ 'igo.geo.geometry.polygon' | translate }}\n    </mat-button-toggle>\n  </mat-button-toggle-group>\n</div>\n\n<mat-form-field *ngIf=\"drawGuideField\" class=\"draw-guide-field\">\n  <input\n    matInput\n    type=\"number\"\n    [placeholder]=\"drawGuidePlaceholder\"\n    [(ngModel)]=\"drawGuide\"\n  />\n  <mat-icon matPrefix [color]=\"'primary'\">adjust </mat-icon>\n  <span matSuffix class=\"draw-guide-units\">{{\n    'igo.geo.measure.meters' | translate\n  }}</span>\n</mat-form-field>\n", styles: [":host{display:block;width:100%}.geometry-type-toggle,.draw-guide-field{width:100%}.geometry-type-toggle{padding:10px;text-align:center}.draw-guide-field mat-icon{margin:0 10px}.draw-guide-units{padding:10px}\n"], dependencies: [{ kind: "component", type: GeometryFormFieldInputComponent, selector: "igo-geometry-form-field-input", inputs: ["map", "geometryType", "drawGuide", "measure", "drawControlIsActive", "freehandDrawIsActive", "predefinedRadius", "controlOptions", "drawStyle", "overlayStyle", "value", "radius"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$6.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$6.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i4$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i4$1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 };
 GeometryFormFieldComponent = __decorate([
     IgoFormFieldComponent('geometry'),
@@ -39026,7 +39064,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                         MatIconModule,
                         AsyncPipe,
                         TranslateModule
-                    ], 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"] }]
+                    ], 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'\">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"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { formControl: [{
                 type: Input
             }], map: [{
@@ -39997,7 +40035,7 @@ class CadastreSearchSource extends SearchSource {
                 id,
                 title: numero,
                 score: computeTermSimilarity(term.trim(), numero),
-                icon: 'map-marker'
+                icon: 'location_on'
             },
             data: {
                 type: FEATURE,
@@ -40210,7 +40248,7 @@ class NominatimSearchSource extends SearchSource {
                 dataType: FEATURE,
                 id,
                 title: data.display_name,
-                icon: 'map-marker',
+                icon: 'location_on',
                 score: computeTermSimilarity(term.trim(), data.display_name)
             },
             data: {
@@ -40566,7 +40604,7 @@ class StoredQueriesSearchSource extends SearchSource {
                 id,
                 title: data.properties.title,
                 titleHtml: data.properties[title],
-                icon: 'map-marker',
+                icon: 'location_on',
                 score: data.properties.title
                     ? computeTermSimilarity(term.trim(), data.properties.title)
                     : computeTermSimilarity(term.trim(), data.properties[title])
@@ -40735,7 +40773,7 @@ class StoredQueriesReverseSearchSource extends SearchSource {
                 dataType: FEATURE,
                 id,
                 title: data.properties[title],
-                icon: 'map-marker'
+                icon: 'location_on'
             }
         };
     }
@@ -40923,7 +40961,7 @@ class WorkspaceSearchSource extends SearchSource {
                 id,
                 title: data.feature.meta.title,
                 titleHtml: titleHtml + subtitleHtml2,
-                icon: 'map-marker',
+                icon: 'location_on',
                 score: data.score,
                 nextPage: resultsCnt % +this.options.params.limit === 0 &&
                     +this.options.params.page < 10