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

package/fesm2022/igo2-geo.mjs

@@ -19,7 +19,7 @@ import * as i1 from '@igo2/core/config';
 import { ConfigService } from '@igo2/core/config';
 import * as i5 from '@ngx-translate/core';
 import { TranslateModule } from '@ngx-translate/core';
-import { BehaviorSubject, timer, forkJoin, of, Observable, combineLatest, debounceTime as debounceTime$1, pairwise, interval, Subject, fromEvent, zip, skipWhile as skipWhile$1, take as take$1, EMPTY, first as first$1, Subscription, throwError, ReplaySubject } from 'rxjs';
+import { BehaviorSubject, timer, forkJoin, of, Observable, combineLatest, debounceTime as debounceTime$1, pairwise, interval, Subject, from, fromEvent, zip, skipWhile as skipWhile$1, take as take$1, EMPTY, first as first$1, Subscription, throwError, ReplaySubject } from 'rxjs';
 import { distinctUntilChanged, debounce, map, catchError, concatMap, first, skipWhile, debounceTime, skip, switchMap, delay, takeUntil, take, startWith, mergeMap } from 'rxjs/operators';
 import * as i6 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
@@ -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\">\r\n  <button\r\n    mat-icon-button\r\n    class=\"igo-search-selector-button\"\r\n    color=\"primary\"\r\n    tooltip-position=\"below\"\r\n    matTooltipShowDelay=\"500\"\r\n    [matTooltip]=\"'igo.geo.search.menu.tooltip' | translate\"\r\n    [matMenuTriggerFor]=\"searchSelectorMenu\"\r\n  >\r\n    <mat-icon svgIcon=\"menu-down\"></mat-icon>\r\n  </button>\r\n\r\n  <mat-menu\r\n    #searchSelectorMenu=\"matMenu\"\r\n    class=\"no-border-radius\"\r\n    xPosition=\"before\"\r\n    yPosition=\"above\"\r\n  >\r\n    <mat-radio-group\r\n      class=\"igo-search-selector-radio-group\"\r\n      [value]=\"searchType$ | async\"\r\n      (change)=\"onSearchTypeChange($event.value)\"\r\n    >\r\n      <mat-radio-button\r\n        *ngFor=\"let searchType of searchTypes\"\r\n        [value]=\"searchType\"\r\n      >\r\n        {{ getSearchTypeTitle(searchType) | translate }}\r\n      </mat-radio-button>\r\n    </mat-radio-group>\r\n  </mat-menu>\r\n</div>\r\n", styles: [":host .igo-search-selector-button{border-radius:0}:host .igo-search-selector-button button{border-radius:0!important}:host .igo-search-selector-button button .mat-ripple,:host .igo-search-selector-button button .mdc-icon-button__ripple{border-radius:0!important}:host .igo-search-selector-radio-group{display:inline-flex;flex-direction:column}:host .igo-search-selector-radio-group mat-radio-button{margin:5px}\n"], dependencies: [{ kind: "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 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 });
 }
 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\">\r\n  <button\r\n    mat-icon-button\r\n    class=\"igo-search-selector-button\"\r\n    color=\"primary\"\r\n    tooltip-position=\"below\"\r\n    matTooltipShowDelay=\"500\"\r\n    [matTooltip]=\"'igo.geo.search.menu.tooltip' | translate\"\r\n    [matMenuTriggerFor]=\"searchSelectorMenu\"\r\n  >\r\n    <mat-icon svgIcon=\"menu-down\"></mat-icon>\r\n  </button>\r\n\r\n  <mat-menu\r\n    #searchSelectorMenu=\"matMenu\"\r\n    class=\"no-border-radius\"\r\n    xPosition=\"before\"\r\n    yPosition=\"above\"\r\n  >\r\n    <mat-radio-group\r\n      class=\"igo-search-selector-radio-group\"\r\n      [value]=\"searchType$ | async\"\r\n      (change)=\"onSearchTypeChange($event.value)\"\r\n    >\r\n      <mat-radio-button\r\n        *ngFor=\"let searchType of searchTypes\"\r\n        [value]=\"searchType\"\r\n      >\r\n        {{ getSearchTypeTitle(searchType) | translate }}\r\n      </mat-radio-button>\r\n    </mat-radio-group>\r\n  </mat-menu>\r\n</div>\r\n", styles: [":host .igo-search-selector-button{border-radius:0}:host .igo-search-selector-button button{border-radius:0!important}:host .igo-search-selector-button button .mat-ripple,:host .igo-search-selector-button button .mdc-icon-button__ripple{border-radius:0!important}:host .igo-search-selector-radio-group{display:inline-flex;flex-direction:column}:host .igo-search-selector-radio-group mat-radio-button{margin:5px}\n"] }]
+                    ], 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"] }]
         }], ctorParameters: () => [{ type: SearchSourceService }], propDecorators: { searchTypes: [{
                 type: Input
             }], searchType: [{
@@ -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\">\r\n  <button\r\n    mat-icon-button\r\n    class=\"igo-search-settings-button\"\r\n    color=\"primary\"\r\n    tooltip-position=\"below\"\r\n    matTooltipShowDelay=\"500\"\r\n    [matTooltip]=\"'igo.geo.search.menu.tooltip' | translate\"\r\n    [matMenuTriggerFor]=\"searchSettingsMenu\"\r\n  >\r\n    <mat-icon svgIcon=\"chevron-down\"></mat-icon>\r\n  </button>\r\n  <mat-menu #searchSettingsMenu=\"matMenu\" class=\"no-border-radius\">\r\n    <div class=\"checkAllButton\" *ngIf=\"getSearchSources().length > 4\">\r\n      <button mat-raised-button (click)=\"checkUncheckAllSources($event)\">\r\n        {{\r\n          !searchSourcesAllEnabled\r\n            ? ('igo.geo.search.searchSources.unselectAll' | translate)\r\n            : ('igo.geo.search.searchSources.selectAll' | translate)\r\n        }}\r\n      </button>\r\n    </div>\r\n    <ng-container *ngFor=\"let source of getSearchSources()\">\r\n      <span class=\"igo-search-settings-search-source\">\r\n        <mat-checkbox\r\n          class=\"igo-search-settings-checkbox\"\r\n          [checked]=\"source.enabled\"\r\n          [value]=\"$any(source)\"\r\n          (click)=\"$event.stopPropagation()\"\r\n          (change)=\"onCheckSearchSource($event, source)\"\r\n        >\r\n        </mat-checkbox>\r\n        <button\r\n          *ngIf=\"source.settings.length > 0\"\r\n          [matMenuTriggerFor]=\"sub_menu\"\r\n          mat-menu-item\r\n        >\r\n          {{ source.title }}\r\n        </button>\r\n        <button mat-menu-item *ngIf=\"source.settings.length === 0\">\r\n          {{ source.title }}\r\n        </button>\r\n      </span>\r\n      <mat-menu #sub_menu=\"matMenu\">\r\n        <ng-container *ngFor=\"let setting of source.settings\">\r\n          <button mat-menu-item [matMenuTriggerFor]=\"test_sub_menu\">\r\n            {{\r\n              'igo.geo.search.searchSources.settings.' + setting.title\r\n                | translate\r\n            }}\r\n          </button>\r\n          <mat-menu\r\n            #test_sub_menu=\"matMenu\"\r\n            [ngSwitch]=\"setting.type\"\r\n            yPosition=\"above\"\r\n          >\r\n            <span *ngSwitchCase=\"'radiobutton'\">\r\n              <mat-radio-group\r\n                class=\"igo-search-settings-radio-group\"\r\n                [value]=\"setting\"\r\n              >\r\n                <mat-radio-button\r\n                  *ngFor=\"let settingValue of setting.values\"\r\n                  class=\"mat-typography\"\r\n                  [value]=\"settingValue\"\r\n                  [matTooltip]=\"getAvailableHashtagsValues(settingValue)\"\r\n                  [checked]=\"settingValue.enabled\"\r\n                  (click)=\"$event.stopPropagation()\"\r\n                  (change)=\"\r\n                    settingsValueCheckedRadioButton(\r\n                      $event,\r\n                      source,\r\n                      setting,\r\n                      settingValue\r\n                    )\r\n                  \"\r\n                >\r\n                  {{ settingValue.title | translate }}\r\n                </mat-radio-button>\r\n              </mat-radio-group>\r\n            </span>\r\n            <span *ngSwitchCase=\"'checkbox'\">\r\n              <div class=\"checkAllButton\" *ngIf=\"setting.values.length > 3\">\r\n                <button\r\n                  mat-raised-button\r\n                  (click)=\"checkUncheckAll($event, source, setting)\"\r\n                >\r\n                  {{\r\n                    setting.allEnabled || setting.allEnabled === undefined\r\n                      ? ('igo.geo.search.searchSources.settings.unselectAll'\r\n                        | translate)\r\n                      : ('igo.geo.search.searchSources.settings.selectAll'\r\n                        | translate)\r\n                  }}\r\n                </button>\r\n              </div>\r\n              <div\r\n                class=\"igo-search-settings-sub-menu\"\r\n                mat-menu-item\r\n                *ngFor=\"let settingValue of getAvailableValues(setting)\"\r\n              >\r\n                <mat-checkbox\r\n                  [style.display]=\"displayBlock\"\r\n                  [checked]=\"settingValue.enabled\"\r\n                  [value]=\"$any(setting)\"\r\n                  [matTooltip]=\"getAvailableHashtagsValues(settingValue)\"\r\n                  (click)=\"$event.stopPropagation()\"\r\n                  (change)=\"\r\n                    settingsValueCheckedCheckbox(\r\n                      $event,\r\n                      source,\r\n                      setting,\r\n                      settingValue\r\n                    )\r\n                  \"\r\n                >\r\n                  {{ settingValue.title | translate }}\r\n                </mat-checkbox>\r\n              </div>\r\n            </span>\r\n          </mat-menu>\r\n        </ng-container>\r\n      </mat-menu>\r\n    </ng-container>\r\n    <mat-divider></mat-divider>\r\n    <span class=\"pointer-summary-slide-toggle-container\">\r\n      <div mat-menu-item>\r\n        <mat-slide-toggle\r\n          class=\"search-option\"\r\n          (change)=\"changePointerReverseSearch($event)\"\r\n          tooltip-position=\"below\"\r\n          *ngIf=\"hasPointerReverseSearchSource && !isTouchScreen\"\r\n          matTooltipShowDelay=\"500\"\r\n          [matTooltip]=\"\r\n            'igo.geo.search.pointerSearchSummary.tooltip' | translate\r\n          \"\r\n          (click)=\"$event.stopPropagation()\"\r\n          [checked]=\"pointerSummaryEnabled\"\r\n        >\r\n          {{ 'igo.geo.search.pointerSearchSummary.title' | translate }}\r\n        </mat-slide-toggle>\r\n      </div>\r\n      <div mat-menu-item>\r\n        <mat-slide-toggle\r\n          class=\"search-option\"\r\n          (change)=\"changeSearchResultsGeometry($event)\"\r\n          tooltip-position=\"below\"\r\n          matTooltipShowDelay=\"500\"\r\n          [matTooltip]=\"\r\n            'igo.geo.search.searchResultsGeometry.tooltip' | translate\r\n          \"\r\n          (click)=\"$event.stopPropagation()\"\r\n          [checked]=\"searchResultsGeometryEnabled\"\r\n        >\r\n          {{ 'igo.geo.search.searchResultsGeometry.title' | translate }}\r\n        </mat-slide-toggle>\r\n      </div>\r\n      <div mat-menu-item>\r\n        <mat-slide-toggle\r\n          class=\"search-option\"\r\n          (change)=\"reverseSearchCoordsFormat($event)\"\r\n          tooltip-position=\"below\"\r\n          matTooltipShowDelay=\"500\"\r\n          [matTooltip]=\"\r\n            reverseSearchCoordsFormatEnabled\r\n              ? ('igo.geo.search.reverseCoordFormat.tooltipLatLon' | translate)\r\n              : ('igo.geo.search.reverseCoordFormat.tooltipLonLat' | translate)\r\n          \"\r\n          (click)=\"$event.stopPropagation()\"\r\n          [checked]=\"reverseSearchCoordsFormatEnabled\"\r\n        >\r\n          {{ 'igo.geo.search.reverseCoordFormat.title' | translate }}\r\n        </mat-slide-toggle>\r\n      </div>\r\n    </span>\r\n  </mat-menu>\r\n</div>\r\n", styles: [":host{display:flex;align-items:center}.checkAllButton{text-align:center;padding:0 5px}.igo-search-settings-radio-group{display:flex;flex-direction:column;padding-right:16px}.igo-search-settings-checkbox mat-radio-button{display:flex}.igo-search-settings-search-source{display:flex;width:100%}.igo-search-settings-search-source mat-checkbox{display:flex;margin-left:5px;margin-right:5px}.search-option{display:block;margin-right:10px;margin-bottom:15px}.pointer-summary-slide-toggle-container{overflow-x:hidden}.pointer-summary-slide-toggle-container mat-slide-toggle{margin:10px 0}.igo-search-settings-button button,.igo-search-settings-button button .mat-ripple,.igo-search-settings-button button .mdc-icon-button__ripple{border-radius:0!important}.igo-search-settings-sub-menu{min-height:34px}\n"], dependencies: [{ kind: "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 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 });
 }
 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\">\r\n  <button\r\n    mat-icon-button\r\n    class=\"igo-search-settings-button\"\r\n    color=\"primary\"\r\n    tooltip-position=\"below\"\r\n    matTooltipShowDelay=\"500\"\r\n    [matTooltip]=\"'igo.geo.search.menu.tooltip' | translate\"\r\n    [matMenuTriggerFor]=\"searchSettingsMenu\"\r\n  >\r\n    <mat-icon svgIcon=\"chevron-down\"></mat-icon>\r\n  </button>\r\n  <mat-menu #searchSettingsMenu=\"matMenu\" class=\"no-border-radius\">\r\n    <div class=\"checkAllButton\" *ngIf=\"getSearchSources().length > 4\">\r\n      <button mat-raised-button (click)=\"checkUncheckAllSources($event)\">\r\n        {{\r\n          !searchSourcesAllEnabled\r\n            ? ('igo.geo.search.searchSources.unselectAll' | translate)\r\n            : ('igo.geo.search.searchSources.selectAll' | translate)\r\n        }}\r\n      </button>\r\n    </div>\r\n    <ng-container *ngFor=\"let source of getSearchSources()\">\r\n      <span class=\"igo-search-settings-search-source\">\r\n        <mat-checkbox\r\n          class=\"igo-search-settings-checkbox\"\r\n          [checked]=\"source.enabled\"\r\n          [value]=\"$any(source)\"\r\n          (click)=\"$event.stopPropagation()\"\r\n          (change)=\"onCheckSearchSource($event, source)\"\r\n        >\r\n        </mat-checkbox>\r\n        <button\r\n          *ngIf=\"source.settings.length > 0\"\r\n          [matMenuTriggerFor]=\"sub_menu\"\r\n          mat-menu-item\r\n        >\r\n          {{ source.title }}\r\n        </button>\r\n        <button mat-menu-item *ngIf=\"source.settings.length === 0\">\r\n          {{ source.title }}\r\n        </button>\r\n      </span>\r\n      <mat-menu #sub_menu=\"matMenu\">\r\n        <ng-container *ngFor=\"let setting of source.settings\">\r\n          <button mat-menu-item [matMenuTriggerFor]=\"test_sub_menu\">\r\n            {{\r\n              'igo.geo.search.searchSources.settings.' + setting.title\r\n                | translate\r\n            }}\r\n          </button>\r\n          <mat-menu\r\n            #test_sub_menu=\"matMenu\"\r\n            [ngSwitch]=\"setting.type\"\r\n            yPosition=\"above\"\r\n          >\r\n            <span *ngSwitchCase=\"'radiobutton'\">\r\n              <mat-radio-group\r\n                class=\"igo-search-settings-radio-group\"\r\n                [value]=\"setting\"\r\n              >\r\n                <mat-radio-button\r\n                  *ngFor=\"let settingValue of setting.values\"\r\n                  class=\"mat-typography\"\r\n                  [value]=\"settingValue\"\r\n                  [matTooltip]=\"getAvailableHashtagsValues(settingValue)\"\r\n                  [checked]=\"settingValue.enabled\"\r\n                  (click)=\"$event.stopPropagation()\"\r\n                  (change)=\"\r\n                    settingsValueCheckedRadioButton(\r\n                      $event,\r\n                      source,\r\n                      setting,\r\n                      settingValue\r\n                    )\r\n                  \"\r\n                >\r\n                  {{ settingValue.title | translate }}\r\n                </mat-radio-button>\r\n              </mat-radio-group>\r\n            </span>\r\n            <span *ngSwitchCase=\"'checkbox'\">\r\n              <div class=\"checkAllButton\" *ngIf=\"setting.values.length > 3\">\r\n                <button\r\n                  mat-raised-button\r\n                  (click)=\"checkUncheckAll($event, source, setting)\"\r\n                >\r\n                  {{\r\n                    setting.allEnabled || setting.allEnabled === undefined\r\n                      ? ('igo.geo.search.searchSources.settings.unselectAll'\r\n                        | translate)\r\n                      : ('igo.geo.search.searchSources.settings.selectAll'\r\n                        | translate)\r\n                  }}\r\n                </button>\r\n              </div>\r\n              <div\r\n                class=\"igo-search-settings-sub-menu\"\r\n                mat-menu-item\r\n                *ngFor=\"let settingValue of getAvailableValues(setting)\"\r\n              >\r\n                <mat-checkbox\r\n                  [style.display]=\"displayBlock\"\r\n                  [checked]=\"settingValue.enabled\"\r\n                  [value]=\"$any(setting)\"\r\n                  [matTooltip]=\"getAvailableHashtagsValues(settingValue)\"\r\n                  (click)=\"$event.stopPropagation()\"\r\n                  (change)=\"\r\n                    settingsValueCheckedCheckbox(\r\n                      $event,\r\n                      source,\r\n                      setting,\r\n                      settingValue\r\n                    )\r\n                  \"\r\n                >\r\n                  {{ settingValue.title | translate }}\r\n                </mat-checkbox>\r\n              </div>\r\n            </span>\r\n          </mat-menu>\r\n        </ng-container>\r\n      </mat-menu>\r\n    </ng-container>\r\n    <mat-divider></mat-divider>\r\n    <span class=\"pointer-summary-slide-toggle-container\">\r\n      <div mat-menu-item>\r\n        <mat-slide-toggle\r\n          class=\"search-option\"\r\n          (change)=\"changePointerReverseSearch($event)\"\r\n          tooltip-position=\"below\"\r\n          *ngIf=\"hasPointerReverseSearchSource && !isTouchScreen\"\r\n          matTooltipShowDelay=\"500\"\r\n          [matTooltip]=\"\r\n            'igo.geo.search.pointerSearchSummary.tooltip' | translate\r\n          \"\r\n          (click)=\"$event.stopPropagation()\"\r\n          [checked]=\"pointerSummaryEnabled\"\r\n        >\r\n          {{ 'igo.geo.search.pointerSearchSummary.title' | translate }}\r\n        </mat-slide-toggle>\r\n      </div>\r\n      <div mat-menu-item>\r\n        <mat-slide-toggle\r\n          class=\"search-option\"\r\n          (change)=\"changeSearchResultsGeometry($event)\"\r\n          tooltip-position=\"below\"\r\n          matTooltipShowDelay=\"500\"\r\n          [matTooltip]=\"\r\n            'igo.geo.search.searchResultsGeometry.tooltip' | translate\r\n          \"\r\n          (click)=\"$event.stopPropagation()\"\r\n          [checked]=\"searchResultsGeometryEnabled\"\r\n        >\r\n          {{ 'igo.geo.search.searchResultsGeometry.title' | translate }}\r\n        </mat-slide-toggle>\r\n      </div>\r\n      <div mat-menu-item>\r\n        <mat-slide-toggle\r\n          class=\"search-option\"\r\n          (change)=\"reverseSearchCoordsFormat($event)\"\r\n          tooltip-position=\"below\"\r\n          matTooltipShowDelay=\"500\"\r\n          [matTooltip]=\"\r\n            reverseSearchCoordsFormatEnabled\r\n              ? ('igo.geo.search.reverseCoordFormat.tooltipLatLon' | translate)\r\n              : ('igo.geo.search.reverseCoordFormat.tooltipLonLat' | translate)\r\n          \"\r\n          (click)=\"$event.stopPropagation()\"\r\n          [checked]=\"reverseSearchCoordsFormatEnabled\"\r\n        >\r\n          {{ 'igo.geo.search.reverseCoordFormat.title' | translate }}\r\n        </mat-slide-toggle>\r\n      </div>\r\n    </span>\r\n  </mat-menu>\r\n</div>\r\n", styles: [":host{display:flex;align-items:center}.checkAllButton{text-align:center;padding:0 5px}.igo-search-settings-radio-group{display:flex;flex-direction:column;padding-right:16px}.igo-search-settings-checkbox mat-radio-button{display:flex}.igo-search-settings-search-source{display:flex;width:100%}.igo-search-settings-search-source mat-checkbox{display:flex;margin-left:5px;margin-right:5px}.search-option{display:block;margin-right:10px;margin-bottom:15px}.pointer-summary-slide-toggle-container{overflow-x:hidden}.pointer-summary-slide-toggle-container mat-slide-toggle{margin:10px 0}.igo-search-settings-button button,.igo-search-settings-button button .mat-ripple,.igo-search-settings-button button .mdc-icon-button__ripple{border-radius:0!important}.igo-search-settings-sub-menu{min-height:34px}\n"] }]
+                    ], 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"] }]
         }], 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 }\">\r\n  <mat-form-field [floatLabel]=\"floatLabel\" [appearance]=\"appearance\">\r\n    <mat-label *ngIf=\"label\">{{ label }}</mat-label>\r\n    <input\r\n      #input\r\n      matInput\r\n      autocomplete=\"off\"\r\n      [ngClass]=\"{ hasSearchIcon: showSearchButton }\"\r\n      [disabled]=\"disabled$ | async\"\r\n      [placeholder]=\"\r\n        placeholder\r\n          ? placeholder\r\n          : (placeholder$ | async)\r\n            ? (placeholder$.value | translate)\r\n            : undefined\r\n      \"\r\n      [value]=\"term$ | async\"\r\n      (keyup)=\"onKeyup($event)\"\r\n    />\r\n    <button\r\n      *ngIf=\"(empty$ | async) === false\"\r\n      mat-icon-button\r\n      matSuffix\r\n      [color]=\"color\"\r\n      (click)=\"onClearButtonClick()\"\r\n      [matTooltip]=\"'igo.geo.search.clearSearch' | translate\"\r\n    >\r\n      <mat-icon svgIcon=\"close\"></mat-icon>\r\n    </button>\r\n  </mat-form-field>\r\n\r\n  <mat-divider *ngIf=\"withDivider\" [vertical]=\"true\"></mat-divider>\r\n\r\n  <div class=\"search-bar-buttons\">\r\n    <button *ngIf=\"showSearchButton\" mat-icon-button [color]=\"color\">\r\n      <mat-icon svgIcon=\"magnify\"></mat-icon>\r\n    </button>\r\n\r\n    <igo-search-selector\r\n      *ngIf=\"searchSelector\"\r\n      [searchTypes]=\"searchTypes\"\r\n      [searchType]=\"searchType$ | async\"\r\n      (searchTypeChange)=\"onSearchTypeChange($event)\"\r\n    >\r\n    </igo-search-selector>\r\n\r\n    <igo-search-settings\r\n      *ngIf=\"searchSettings\"\r\n      [pointerSummaryEnabled]=\"pointerSummaryEnabled\"\r\n      (pointerSummaryStatus)=\"pointerSummaryStatus.emit($event)\"\r\n      [searchResultsGeometryEnabled]=\"searchResultsGeometryEnabled\"\r\n      (searchResultsGeometryStatus)=\"searchResultsGeometryStatus.emit($event)\"\r\n      [reverseSearchCoordsFormatEnabled]=\"reverseSearchCoordsFormatEnabled\"\r\n      (reverseSearchCoordsFormatStatus)=\"\r\n        reverseSearchCoordsFormatStatus.emit($event)\r\n      \"\r\n      (searchSourceChange)=\"onSearchSettingsChange()\"\r\n    >\r\n    </igo-search-settings>\r\n  </div>\r\n</div>\r\n", styles: [":host ::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 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 });
 }
 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 }\">\r\n  <mat-form-field [floatLabel]=\"floatLabel\" [appearance]=\"appearance\">\r\n    <mat-label *ngIf=\"label\">{{ label }}</mat-label>\r\n    <input\r\n      #input\r\n      matInput\r\n      autocomplete=\"off\"\r\n      [ngClass]=\"{ hasSearchIcon: showSearchButton }\"\r\n      [disabled]=\"disabled$ | async\"\r\n      [placeholder]=\"\r\n        placeholder\r\n          ? placeholder\r\n          : (placeholder$ | async)\r\n            ? (placeholder$.value | translate)\r\n            : undefined\r\n      \"\r\n      [value]=\"term$ | async\"\r\n      (keyup)=\"onKeyup($event)\"\r\n    />\r\n    <button\r\n      *ngIf=\"(empty$ | async) === false\"\r\n      mat-icon-button\r\n      matSuffix\r\n      [color]=\"color\"\r\n      (click)=\"onClearButtonClick()\"\r\n      [matTooltip]=\"'igo.geo.search.clearSearch' | translate\"\r\n    >\r\n      <mat-icon svgIcon=\"close\"></mat-icon>\r\n    </button>\r\n  </mat-form-field>\r\n\r\n  <mat-divider *ngIf=\"withDivider\" [vertical]=\"true\"></mat-divider>\r\n\r\n  <div class=\"search-bar-buttons\">\r\n    <button *ngIf=\"showSearchButton\" mat-icon-button [color]=\"color\">\r\n      <mat-icon svgIcon=\"magnify\"></mat-icon>\r\n    </button>\r\n\r\n    <igo-search-selector\r\n      *ngIf=\"searchSelector\"\r\n      [searchTypes]=\"searchTypes\"\r\n      [searchType]=\"searchType$ | async\"\r\n      (searchTypeChange)=\"onSearchTypeChange($event)\"\r\n    >\r\n    </igo-search-selector>\r\n\r\n    <igo-search-settings\r\n      *ngIf=\"searchSettings\"\r\n      [pointerSummaryEnabled]=\"pointerSummaryEnabled\"\r\n      (pointerSummaryStatus)=\"pointerSummaryStatus.emit($event)\"\r\n      [searchResultsGeometryEnabled]=\"searchResultsGeometryEnabled\"\r\n      (searchResultsGeometryStatus)=\"searchResultsGeometryStatus.emit($event)\"\r\n      [reverseSearchCoordsFormatEnabled]=\"reverseSearchCoordsFormatEnabled\"\r\n      (reverseSearchCoordsFormatStatus)=\"\r\n        reverseSearchCoordsFormatStatus.emit($event)\r\n      \"\r\n      (searchSourceChange)=\"onSearchSettingsChange()\"\r\n    >\r\n    </igo-search-settings>\r\n  </div>\r\n</div>\r\n", styles: [":host ::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 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"] }]
         }], ctorParameters: () => [{ type: i1.ConfigService }, { type: SearchService }, { type: SearchSourceService }], propDecorators: { searchTypes: [{
                 type: Input
             }], withDivider: [{
@@ -9615,6 +9615,64 @@ function computeProjectionsConstraints(projectionsLimitations) {
     };
     return projectionsConstraints;
 }
+/**
+ * Method allowing to read the file and try to detect projection/Coord system
+ * Only geojson/json/gml could be detected at this moment.
+ * @param options A file and an optional number of line to read the EPSG Code. Used only for GML files
+ * @returns Observable string, epsgNotDefined if the EPSG is not detected or a EPSG string ex: EPSG:3857
+ */
+function detectFileEPSG(options) {
+    const file = options.file;
+    const nbLines = options.nbLines ?? 500;
+    const reader = new FileReader();
+    return from(new Promise((resolve) => {
+        if (!file.name.toLowerCase().endsWith('.geojson') &&
+            !file.name.toLowerCase().endsWith('.json') &&
+            !file.name.toLowerCase().endsWith('.gml')) {
+            resolve('epsgNotDefined');
+            return;
+        }
+        reader.onload = (e) => {
+            if (file.name.toLowerCase().endsWith('.geojson') ||
+                file.name.toLowerCase().endsWith('.json')) {
+                const geojson = JSON.parse(reader.result);
+                if (geojson.crs?.properties?.name) {
+                    const epsg = geojson.crs.properties.name.match(/EPSG:{1,2}\d{0,6}/gm);
+                    if (epsg !== null && epsg.length) {
+                        resolve(epsg[0].replace(/::/g, ':'));
+                        return;
+                    }
+                    else {
+                        resolve('epsgNotDefined');
+                        return;
+                    }
+                }
+                else {
+                    resolve('epsgNotDefined');
+                    return;
+                }
+            }
+            else if (file.name.toLowerCase().endsWith('.gml')) {
+                const text = reader.result;
+                const lines = text.split('\n');
+                for (let line = 0; line <= nbLines; line++) {
+                    const epsg = lines[line].match(/EPSG:\d{0,6}/gm);
+                    if (epsg !== null && epsg.length) {
+                        resolve(epsg[0]);
+                        break;
+                    }
+                    else {
+                        resolve(undefined);
+                    }
+                }
+            }
+            else {
+                resolve('epsgNotDefined');
+            }
+        };
+        reader.readAsText(file, 'UTF-8');
+    }));
+}
 
 function getLinkedLayersOptions(layer) {
     return layer.options.linkedLayers;
@@ -9668,7 +9726,7 @@ function getDirectParentLayerByProperty(map, layer, property) {
             }
         });
         if (parents.length > 1) {
-            console.warn(`Your layer ${layer.title || layer.id} must only have 1 parent (${parents.map((p) => p.title || p.id)})
+            console.warn(`Your layer ${layer.title || layer.id} must only have 1 parent (${parents.map((p) => p.title || p.id)})
             , The first parent (${parents[0].title || parents[0].id}) will be use to sync properties`);
         }
         return parents[0];
@@ -9723,7 +9781,7 @@ function getDirectParentLayerByDeletion(map, layer) {
             }
         });
         if (parents.length > 1) {
-            console.warn(`Your layer ${layer.title || layer.id} must only have 1 parent (${parents.map((p) => p.title || p.id)})
+            console.warn(`Your layer ${layer.title || layer.id} must only have 1 parent (${parents.map((p) => p.title || p.id)})
           , The first parent (${parents[0].title || parents[0].id}) will be use to sync properties`);
         }
         return parents[0];
@@ -11564,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\r\n  class=\"igo-striped mat-typography\"\r\n  *ngIf=\"\r\n    ready &&\r\n    feature &&\r\n    isObject(feature.properties) &&\r\n    feature.properties.target !== 'iframe'\r\n  \"\r\n>\r\n  <tbody>\r\n    <tr *ngFor=\"let property of filterFeatureProperties(feature) | keyvalue\">\r\n      <td\r\n        *ngIf=\"feature.properties.target === '_blank' && property.key === 'url'\"\r\n      >\r\n        <mat-icon matListItemIcon svgIcon=\"{{ icon }}\"></mat-icon>\r\n      </td>\r\n\r\n      <td\r\n        *ngIf=\"feature.properties.target === '_blank' && property.key === 'url'\"\r\n      >\r\n        <a\r\n          href=\"{{ property.value }}\"\r\n          target=\"_blank\"\r\n          rel=\"noopener noreferrer\"\r\n        >\r\n          {{ 'igo.geo.targetHtmlUrl' | translate }} {{ title }}</a\r\n        >\r\n        <button\r\n          class=\"copyClipboard\"\r\n          mat-icon-button\r\n          (click)=\"copyTextToClipboard(property.value)\"\r\n        >\r\n          <mat-icon svgIcon=\"content-copy\"></mat-icon>\r\n        </button>\r\n      </td>\r\n\r\n      <td id=\"keyValue\" *ngIf=\"feature.properties.target === undefined\">\r\n        {{ property.key }}\r\n      </td>\r\n\r\n      <td\r\n        *ngIf=\"\r\n          feature.properties.target === undefined &&\r\n          !isObject(property.value) &&\r\n          !isUrl(property.value) &&\r\n          !isEmbeddedLink(property.value)\r\n        \"\r\n        [innerHTML]=\"property.value\"\r\n      ></td>\r\n\r\n      <td\r\n        *ngIf=\"\r\n          feature.properties.target === undefined &&\r\n          isEmbeddedLink(property.value)\r\n        \"\r\n      >\r\n        <u\r\n          [ngStyle]=\"{ cursor: 'pointer', color: 'blue' }\"\r\n          (click)=\"openSecureUrl(property.value)\"\r\n          >{{ getEmbeddedLinkText(property.value) }}</u\r\n        >\r\n      </td>\r\n\r\n      <td\r\n        *ngIf=\"\r\n          feature.properties.target === undefined &&\r\n          !isObject(property.value) &&\r\n          (isDoc(property.value) || isUrl(property.value)) &&\r\n          !isImg(property.value)\r\n        \"\r\n      >\r\n        <u\r\n          [ngStyle]=\"{ cursor: 'pointer', color: 'blue' }\"\r\n          (click)=\"openSecureUrl(property.value)\"\r\n          >{{ 'igo.geo.targetHtmlUrl' | translate }}</u\r\n        >\r\n        <button\r\n          class=\"copyClipboard\"\r\n          mat-icon-button\r\n          (click)=\"copyTextToClipboard(property.value)\"\r\n        >\r\n          <mat-icon svgIcon=\"content-copy\"></mat-icon>\r\n        </button>\r\n      </td>\r\n\r\n      <td\r\n        *ngIf=\"\r\n          feature.properties.target === undefined &&\r\n          !isObject(property.value) &&\r\n          isUrl(property.value) &&\r\n          isImg(property.value)\r\n        \"\r\n      >\r\n        <a\r\n          href=\"{{ property.value }}\"\r\n          target=\"_blank\"\r\n          (click)=\"openSecureUrl(property.value)\"\r\n          rel=\"noopener noreferrer\"\r\n        >\r\n          <img\r\n            igoImageError\r\n            src=\"{{ property.value | secureImage | async }}\"\r\n            width=\"225\"\r\n            height=\"auto\"\r\n          />\r\n        </a>\r\n      </td>\r\n\r\n      <td\r\n        *ngIf=\"\r\n          feature.properties.target === undefined && isObject(property.value)\r\n        \"\r\n        [innerHTML]=\"property.value | json\"\r\n      ></td>\r\n    </tr>\r\n  </tbody>\r\n</table>\r\n\r\n<iframe\r\n  *ngIf=\"isHtmlDisplay()\"\r\n  [srcdoc]=\"htmlSanitizer(feature.properties)\"\r\n  [src]=\"urlSanitizer(feature.properties.url)\"\r\n></iframe>\r\n", styles: ["table{width:100%}table td{padding:5px}#keyValue{width:30%}table ::ng-deep .routing{cursor:pointer}iframe{height:calc(100% - 4px);width:100%;border:0}.copyClipboard{border:none;background:transparent;cursor:pointer}\n"], dependencies: [{ kind: "directive", type: 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 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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: FeatureDetailsComponent, decorators: [{
             type: Component,
@@ -11579,7 +11637,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                         KeyValuePipe,
                         TranslateModule,
                         SecureImagePipe
-                    ], template: "<table\r\n  class=\"igo-striped mat-typography\"\r\n  *ngIf=\"\r\n    ready &&\r\n    feature &&\r\n    isObject(feature.properties) &&\r\n    feature.properties.target !== 'iframe'\r\n  \"\r\n>\r\n  <tbody>\r\n    <tr *ngFor=\"let property of filterFeatureProperties(feature) | keyvalue\">\r\n      <td\r\n        *ngIf=\"feature.properties.target === '_blank' && property.key === 'url'\"\r\n      >\r\n        <mat-icon matListItemIcon svgIcon=\"{{ icon }}\"></mat-icon>\r\n      </td>\r\n\r\n      <td\r\n        *ngIf=\"feature.properties.target === '_blank' && property.key === 'url'\"\r\n      >\r\n        <a\r\n          href=\"{{ property.value }}\"\r\n          target=\"_blank\"\r\n          rel=\"noopener noreferrer\"\r\n        >\r\n          {{ 'igo.geo.targetHtmlUrl' | translate }} {{ title }}</a\r\n        >\r\n        <button\r\n          class=\"copyClipboard\"\r\n          mat-icon-button\r\n          (click)=\"copyTextToClipboard(property.value)\"\r\n        >\r\n          <mat-icon svgIcon=\"content-copy\"></mat-icon>\r\n        </button>\r\n      </td>\r\n\r\n      <td id=\"keyValue\" *ngIf=\"feature.properties.target === undefined\">\r\n        {{ property.key }}\r\n      </td>\r\n\r\n      <td\r\n        *ngIf=\"\r\n          feature.properties.target === undefined &&\r\n          !isObject(property.value) &&\r\n          !isUrl(property.value) &&\r\n          !isEmbeddedLink(property.value)\r\n        \"\r\n        [innerHTML]=\"property.value\"\r\n      ></td>\r\n\r\n      <td\r\n        *ngIf=\"\r\n          feature.properties.target === undefined &&\r\n          isEmbeddedLink(property.value)\r\n        \"\r\n      >\r\n        <u\r\n          [ngStyle]=\"{ cursor: 'pointer', color: 'blue' }\"\r\n          (click)=\"openSecureUrl(property.value)\"\r\n          >{{ getEmbeddedLinkText(property.value) }}</u\r\n        >\r\n      </td>\r\n\r\n      <td\r\n        *ngIf=\"\r\n          feature.properties.target === undefined &&\r\n          !isObject(property.value) &&\r\n          (isDoc(property.value) || isUrl(property.value)) &&\r\n          !isImg(property.value)\r\n        \"\r\n      >\r\n        <u\r\n          [ngStyle]=\"{ cursor: 'pointer', color: 'blue' }\"\r\n          (click)=\"openSecureUrl(property.value)\"\r\n          >{{ 'igo.geo.targetHtmlUrl' | translate }}</u\r\n        >\r\n        <button\r\n          class=\"copyClipboard\"\r\n          mat-icon-button\r\n          (click)=\"copyTextToClipboard(property.value)\"\r\n        >\r\n          <mat-icon svgIcon=\"content-copy\"></mat-icon>\r\n        </button>\r\n      </td>\r\n\r\n      <td\r\n        *ngIf=\"\r\n          feature.properties.target === undefined &&\r\n          !isObject(property.value) &&\r\n          isUrl(property.value) &&\r\n          isImg(property.value)\r\n        \"\r\n      >\r\n        <a\r\n          href=\"{{ property.value }}\"\r\n          target=\"_blank\"\r\n          (click)=\"openSecureUrl(property.value)\"\r\n          rel=\"noopener noreferrer\"\r\n        >\r\n          <img\r\n            igoImageError\r\n            src=\"{{ property.value | secureImage | async }}\"\r\n            width=\"225\"\r\n            height=\"auto\"\r\n          />\r\n        </a>\r\n      </td>\r\n\r\n      <td\r\n        *ngIf=\"\r\n          feature.properties.target === undefined && isObject(property.value)\r\n        \"\r\n        [innerHTML]=\"property.value | json\"\r\n      ></td>\r\n    </tr>\r\n  </tbody>\r\n</table>\r\n\r\n<iframe\r\n  *ngIf=\"isHtmlDisplay()\"\r\n  [srcdoc]=\"htmlSanitizer(feature.properties)\"\r\n  [src]=\"urlSanitizer(feature.properties.url)\"\r\n></iframe>\r\n", styles: ["table{width:100%}table td{padding:5px}#keyValue{width:30%}table ::ng-deep .routing{cursor:pointer}iframe{height:calc(100% - 4px);width:100%;border:0}.copyClipboard{border:none;background:transparent;cursor:pointer}\n"] }]
+                    ], 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"] }]
         }], 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: [{
@@ -11730,11 +11788,11 @@ class FeatureFormComponent {
         };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: FeatureFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: FeatureFormComponent, isStandalone: true, selector: "igo-feature-form", inputs: { form: "form", feature: "feature" }, outputs: { submitForm: "submitForm" }, viewQueries: [{ propertyName: "igoForm", first: true, predicate: ["igoForm"], descendants: true, static: true }], ngImport: i0, template: "<igo-form\r\n  #igoForm\r\n  [form]=\"form\"\r\n  [formData]=\"feature$ | async\"\r\n  (submitForm)=\"onSubmit($event)\"\r\n>\r\n  <ng-content></ng-content>\r\n\r\n  <ng-content select=\"[formButtons]\" formButtons></ng-content>\r\n</igo-form>\r\n", styles: [":host{display:block}igo-form{height:100%}\n"], dependencies: [{ kind: "component", type: FormComponent, selector: "igo-form", inputs: ["form", "formData", "autocomplete"], outputs: ["submitForm"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: FeatureFormComponent, isStandalone: true, selector: "igo-feature-form", inputs: { form: "form", feature: "feature" }, outputs: { submitForm: "submitForm" }, viewQueries: [{ propertyName: "igoForm", first: true, predicate: ["igoForm"], descendants: true, static: true }], ngImport: i0, template: "<igo-form\n  #igoForm\n  [form]=\"form\"\n  [formData]=\"feature$ | async\"\n  (submitForm)=\"onSubmit($event)\"\n>\n  <ng-content></ng-content>\n\n  <ng-content select=\"[formButtons]\" formButtons></ng-content>\n</igo-form>\n", styles: [":host{display:block}igo-form{height:100%}\n"], dependencies: [{ kind: "component", type: FormComponent, selector: "igo-form", inputs: ["form", "formData", "autocomplete"], outputs: ["submitForm"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: FeatureFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'igo-feature-form', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [FormComponent, AsyncPipe], template: "<igo-form\r\n  #igoForm\r\n  [form]=\"form\"\r\n  [formData]=\"feature$ | async\"\r\n  (submitForm)=\"onSubmit($event)\"\r\n>\r\n  <ng-content></ng-content>\r\n\r\n  <ng-content select=\"[formButtons]\" formButtons></ng-content>\r\n</igo-form>\r\n", styles: [":host{display:block}igo-form{height:100%}\n"] }]
+            args: [{ selector: 'igo-feature-form', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [FormComponent, AsyncPipe], template: "<igo-form\n  #igoForm\n  [form]=\"form\"\n  [formData]=\"feature$ | async\"\n  (submitForm)=\"onSubmit($event)\"\n>\n  <ng-content></ng-content>\n\n  <ng-content select=\"[formButtons]\" formButtons></ng-content>\n</igo-form>\n", styles: [":host{display:block}igo-form{height:100%}\n"] }]
         }], ctorParameters: () => [], propDecorators: { form: [{
                 type: Input
             }], feature: [{
@@ -12222,11 +12280,11 @@ class LayerService {
                 }
                 layerOptions.igoStyle[newKey] = layerOptions[legacyOption];
                 delete layerOptions[legacyOption];
-                console.warn(`
-        The location of this style option (${legacyOption}) is deprecated.
-        Please move this property within igoStyle property.
-        Ex: ${legacyOption}: {...} must be transfered to igoStyle: { ${newKey}: {...} }
-        This legacy conversion will be deleted in 2024.
+                console.warn(`
+        The location of this style option (${legacyOption}) is deprecated.
+        Please move this property within igoStyle property.
+        Ex: ${legacyOption}: {...} must be transfered to igoStyle: { ${newKey}: {...} }
+        This legacy conversion will be deleted in 2024.
         `);
             }
         });
@@ -14080,7 +14138,7 @@ class MeasurerDialogComponent {
         this.dialogRef.close();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: MeasurerDialogComponent, deps: [{ token: i1$5.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: MeasurerDialogComponent, isStandalone: true, selector: "igo-measurer-dialog", ngImport: i0, template: "<h3 mat-dialog-title>{{ 'igo.geo.measure.dialog.title' | translate }}</h3>\r\n<div mat-dialog-content>\r\n  <table *ngIf=\"data.length > 0\" class=\"mat-typography\">\r\n    <thead>\r\n      <tr>\r\n        <th colspan=\"2\">\r\n          {{ 'igo.geo.measure.dialog.length.title' | translate }}\r\n        </th>\r\n      </tr>\r\n    </thead>\r\n    <tbody>\r\n      <tr>\r\n        <td>{{ data.length | measureFormat: measureLengthUnit.Meters }}</td>\r\n        <td>{{ 'igo.geo.measure.dialog.lengthInMeters' | translate }}</td>\r\n      </tr>\r\n      <tr>\r\n        <td>\r\n          {{ data.length | measureFormat: measureLengthUnit.Kilometers }}\r\n        </td>\r\n        <td>{{ 'igo.geo.measure.dialog.lengthInKilometers' | translate }}</td>\r\n      </tr>\r\n      <tr>\r\n        <td>{{ data.length | measureFormat: measureLengthUnit.Miles }}</td>\r\n        <td>{{ 'igo.geo.measure.dialog.lengthInMiles' | translate }}</td>\r\n      </tr>\r\n      <tr>\r\n        <td>{{ data.length | measureFormat: measureLengthUnit.Feet }}</td>\r\n        <td>{{ 'igo.geo.measure.dialog.lengthInFeet' | translate }}</td>\r\n      </tr>\r\n    </tbody>\r\n  </table>\r\n\r\n  <table *ngIf=\"data.area > 0\" class=\"mat-typography\">\r\n    <thead>\r\n      <tr>\r\n        <th colspan=\"2\">\r\n          {{ 'igo.geo.measure.dialog.area.title' | translate }}\r\n        </th>\r\n      </tr>\r\n    </thead>\r\n    <tbody>\r\n      <tr>\r\n        <td>{{ data.area | measureFormat: measureAreaUnit.SquareMeters }}</td>\r\n        <td>{{ 'igo.geo.measure.dialog.areaInSquareMeters' | translate }}</td>\r\n      </tr>\r\n      <tr>\r\n        <td>\r\n          {{ data.area | measureFormat: measureAreaUnit.SquareKilometers }}\r\n        </td>\r\n        <td>\r\n          {{ 'igo.geo.measure.dialog.areaInSquareKilometers' | translate }}\r\n        </td>\r\n      </tr>\r\n      <tr>\r\n        <td>{{ data.area | measureFormat: measureAreaUnit.SquareMiles }}</td>\r\n        <td>{{ 'igo.geo.measure.dialog.areaInSquareMiles' | translate }}</td>\r\n      </tr>\r\n      <tr>\r\n        <td>{{ data.area | measureFormat: measureAreaUnit.Acres }}</td>\r\n        <td>{{ 'igo.geo.measure.dialog.areaInAcres' | translate }}</td>\r\n      </tr>\r\n      <tr>\r\n        <td>{{ data.area | measureFormat: measureAreaUnit.Hectares }}</td>\r\n        <td>{{ 'igo.geo.measure.dialog.areaInHectares' | translate }}</td>\r\n      </tr>\r\n      <tr>\r\n        <td>{{ 'igo.geo.measure.dialog.perimeterInMeters' | translate }}</td>\r\n        <td>{{ data.perimeter | measureFormat: measureLengthUnit.Meters }}</td>\r\n      </tr>\r\n    </tbody>\r\n  </table>\r\n</div>\r\n", styles: [":host{font-family:Roboto,Helvetica Neue,sans-serif}h3{text-align:center;margin:0}table{width:100%;padding:10px}table tbody tr td:last-child{padding-left:10px}\n"], dependencies: [{ kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: MeasureFormatPipe, name: "measureFormat" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: MeasurerDialogComponent, isStandalone: true, selector: "igo-measurer-dialog", ngImport: i0, template: "<h3 mat-dialog-title>{{ 'igo.geo.measure.dialog.title' | translate }}</h3>\n<div mat-dialog-content>\n  <table *ngIf=\"data.length > 0\" class=\"mat-typography\">\n    <thead>\n      <tr>\n        <th colspan=\"2\">\n          {{ 'igo.geo.measure.dialog.length.title' | translate }}\n        </th>\n      </tr>\n    </thead>\n    <tbody>\n      <tr>\n        <td>{{ data.length | measureFormat: measureLengthUnit.Meters }}</td>\n        <td>{{ 'igo.geo.measure.dialog.lengthInMeters' | translate }}</td>\n      </tr>\n      <tr>\n        <td>\n          {{ data.length | measureFormat: measureLengthUnit.Kilometers }}\n        </td>\n        <td>{{ 'igo.geo.measure.dialog.lengthInKilometers' | translate }}</td>\n      </tr>\n      <tr>\n        <td>{{ data.length | measureFormat: measureLengthUnit.Miles }}</td>\n        <td>{{ 'igo.geo.measure.dialog.lengthInMiles' | translate }}</td>\n      </tr>\n      <tr>\n        <td>{{ data.length | measureFormat: measureLengthUnit.Feet }}</td>\n        <td>{{ 'igo.geo.measure.dialog.lengthInFeet' | translate }}</td>\n      </tr>\n    </tbody>\n  </table>\n\n  <table *ngIf=\"data.area > 0\" class=\"mat-typography\">\n    <thead>\n      <tr>\n        <th colspan=\"2\">\n          {{ 'igo.geo.measure.dialog.area.title' | translate }}\n        </th>\n      </tr>\n    </thead>\n    <tbody>\n      <tr>\n        <td>{{ data.area | measureFormat: measureAreaUnit.SquareMeters }}</td>\n        <td>{{ 'igo.geo.measure.dialog.areaInSquareMeters' | translate }}</td>\n      </tr>\n      <tr>\n        <td>\n          {{ data.area | measureFormat: measureAreaUnit.SquareKilometers }}\n        </td>\n        <td>\n          {{ 'igo.geo.measure.dialog.areaInSquareKilometers' | translate }}\n        </td>\n      </tr>\n      <tr>\n        <td>{{ data.area | measureFormat: measureAreaUnit.SquareMiles }}</td>\n        <td>{{ 'igo.geo.measure.dialog.areaInSquareMiles' | translate }}</td>\n      </tr>\n      <tr>\n        <td>{{ data.area | measureFormat: measureAreaUnit.Acres }}</td>\n        <td>{{ 'igo.geo.measure.dialog.areaInAcres' | translate }}</td>\n      </tr>\n      <tr>\n        <td>{{ data.area | measureFormat: measureAreaUnit.Hectares }}</td>\n        <td>{{ 'igo.geo.measure.dialog.areaInHectares' | translate }}</td>\n      </tr>\n      <tr>\n        <td>{{ 'igo.geo.measure.dialog.perimeterInMeters' | translate }}</td>\n        <td>{{ data.perimeter | measureFormat: measureLengthUnit.Meters }}</td>\n      </tr>\n    </tbody>\n  </table>\n</div>\n", styles: [":host{font-family:Roboto,Helvetica Neue,sans-serif}h3{text-align:center;margin:0}table{width:100%;padding:10px}table tbody tr td:last-child{padding-left:10px}\n"], dependencies: [{ kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: MeasureFormatPipe, name: "measureFormat" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: MeasurerDialogComponent, decorators: [{
             type: Component,
@@ -14090,7 +14148,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                         NgIf,
                         TranslateModule,
                         MeasureFormatPipe
-                    ], template: "<h3 mat-dialog-title>{{ 'igo.geo.measure.dialog.title' | translate }}</h3>\r\n<div mat-dialog-content>\r\n  <table *ngIf=\"data.length > 0\" class=\"mat-typography\">\r\n    <thead>\r\n      <tr>\r\n        <th colspan=\"2\">\r\n          {{ 'igo.geo.measure.dialog.length.title' | translate }}\r\n        </th>\r\n      </tr>\r\n    </thead>\r\n    <tbody>\r\n      <tr>\r\n        <td>{{ data.length | measureFormat: measureLengthUnit.Meters }}</td>\r\n        <td>{{ 'igo.geo.measure.dialog.lengthInMeters' | translate }}</td>\r\n      </tr>\r\n      <tr>\r\n        <td>\r\n          {{ data.length | measureFormat: measureLengthUnit.Kilometers }}\r\n        </td>\r\n        <td>{{ 'igo.geo.measure.dialog.lengthInKilometers' | translate }}</td>\r\n      </tr>\r\n      <tr>\r\n        <td>{{ data.length | measureFormat: measureLengthUnit.Miles }}</td>\r\n        <td>{{ 'igo.geo.measure.dialog.lengthInMiles' | translate }}</td>\r\n      </tr>\r\n      <tr>\r\n        <td>{{ data.length | measureFormat: measureLengthUnit.Feet }}</td>\r\n        <td>{{ 'igo.geo.measure.dialog.lengthInFeet' | translate }}</td>\r\n      </tr>\r\n    </tbody>\r\n  </table>\r\n\r\n  <table *ngIf=\"data.area > 0\" class=\"mat-typography\">\r\n    <thead>\r\n      <tr>\r\n        <th colspan=\"2\">\r\n          {{ 'igo.geo.measure.dialog.area.title' | translate }}\r\n        </th>\r\n      </tr>\r\n    </thead>\r\n    <tbody>\r\n      <tr>\r\n        <td>{{ data.area | measureFormat: measureAreaUnit.SquareMeters }}</td>\r\n        <td>{{ 'igo.geo.measure.dialog.areaInSquareMeters' | translate }}</td>\r\n      </tr>\r\n      <tr>\r\n        <td>\r\n          {{ data.area | measureFormat: measureAreaUnit.SquareKilometers }}\r\n        </td>\r\n        <td>\r\n          {{ 'igo.geo.measure.dialog.areaInSquareKilometers' | translate }}\r\n        </td>\r\n      </tr>\r\n      <tr>\r\n        <td>{{ data.area | measureFormat: measureAreaUnit.SquareMiles }}</td>\r\n        <td>{{ 'igo.geo.measure.dialog.areaInSquareMiles' | translate }}</td>\r\n      </tr>\r\n      <tr>\r\n        <td>{{ data.area | measureFormat: measureAreaUnit.Acres }}</td>\r\n        <td>{{ 'igo.geo.measure.dialog.areaInAcres' | translate }}</td>\r\n      </tr>\r\n      <tr>\r\n        <td>{{ data.area | measureFormat: measureAreaUnit.Hectares }}</td>\r\n        <td>{{ 'igo.geo.measure.dialog.areaInHectares' | translate }}</td>\r\n      </tr>\r\n      <tr>\r\n        <td>{{ 'igo.geo.measure.dialog.perimeterInMeters' | translate }}</td>\r\n        <td>{{ data.perimeter | measureFormat: measureLengthUnit.Meters }}</td>\r\n      </tr>\r\n    </tbody>\r\n  </table>\r\n</div>\r\n", styles: [":host{font-family:Roboto,Helvetica Neue,sans-serif}h3{text-align:center;margin:0}table{width:100%;padding:10px}table tbody tr td:last-child{padding-left:10px}\n"] }]
+                    ], template: "<h3 mat-dialog-title>{{ 'igo.geo.measure.dialog.title' | translate }}</h3>\n<div mat-dialog-content>\n  <table *ngIf=\"data.length > 0\" class=\"mat-typography\">\n    <thead>\n      <tr>\n        <th colspan=\"2\">\n          {{ 'igo.geo.measure.dialog.length.title' | translate }}\n        </th>\n      </tr>\n    </thead>\n    <tbody>\n      <tr>\n        <td>{{ data.length | measureFormat: measureLengthUnit.Meters }}</td>\n        <td>{{ 'igo.geo.measure.dialog.lengthInMeters' | translate }}</td>\n      </tr>\n      <tr>\n        <td>\n          {{ data.length | measureFormat: measureLengthUnit.Kilometers }}\n        </td>\n        <td>{{ 'igo.geo.measure.dialog.lengthInKilometers' | translate }}</td>\n      </tr>\n      <tr>\n        <td>{{ data.length | measureFormat: measureLengthUnit.Miles }}</td>\n        <td>{{ 'igo.geo.measure.dialog.lengthInMiles' | translate }}</td>\n      </tr>\n      <tr>\n        <td>{{ data.length | measureFormat: measureLengthUnit.Feet }}</td>\n        <td>{{ 'igo.geo.measure.dialog.lengthInFeet' | translate }}</td>\n      </tr>\n    </tbody>\n  </table>\n\n  <table *ngIf=\"data.area > 0\" class=\"mat-typography\">\n    <thead>\n      <tr>\n        <th colspan=\"2\">\n          {{ 'igo.geo.measure.dialog.area.title' | translate }}\n        </th>\n      </tr>\n    </thead>\n    <tbody>\n      <tr>\n        <td>{{ data.area | measureFormat: measureAreaUnit.SquareMeters }}</td>\n        <td>{{ 'igo.geo.measure.dialog.areaInSquareMeters' | translate }}</td>\n      </tr>\n      <tr>\n        <td>\n          {{ data.area | measureFormat: measureAreaUnit.SquareKilometers }}\n        </td>\n        <td>\n          {{ 'igo.geo.measure.dialog.areaInSquareKilometers' | translate }}\n        </td>\n      </tr>\n      <tr>\n        <td>{{ data.area | measureFormat: measureAreaUnit.SquareMiles }}</td>\n        <td>{{ 'igo.geo.measure.dialog.areaInSquareMiles' | translate }}</td>\n      </tr>\n      <tr>\n        <td>{{ data.area | measureFormat: measureAreaUnit.Acres }}</td>\n        <td>{{ 'igo.geo.measure.dialog.areaInAcres' | translate }}</td>\n      </tr>\n      <tr>\n        <td>{{ data.area | measureFormat: measureAreaUnit.Hectares }}</td>\n        <td>{{ 'igo.geo.measure.dialog.areaInHectares' | translate }}</td>\n      </tr>\n      <tr>\n        <td>{{ 'igo.geo.measure.dialog.perimeterInMeters' | translate }}</td>\n        <td>{{ data.perimeter | measureFormat: measureLengthUnit.Meters }}</td>\n      </tr>\n    </tbody>\n  </table>\n</div>\n", styles: [":host{font-family:Roboto,Helvetica Neue,sans-serif}h3{text-align:center;margin:0}table{width:100%;padding:10px}table tbody tr td:last-child{padding-left:10px}\n"] }]
         }], ctorParameters: () => [{ type: i1$5.MatDialogRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
@@ -14195,7 +14253,7 @@ class MeasurerItemComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: MeasurerItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: MeasurerItemComponent, isStandalone: true, selector: "igo-measurer-item", inputs: { measureType: "measureType", measureUnit: "measureUnit", measure: "measure", auto: "auto", placeholder: "placeholder" }, outputs: { measureUnitChange: "measureUnitChange" }, ngImport: i0, template: "<mat-form-field class=\"measure-field\" floatLabel=\"always\">\r\n  <mat-label>{{ placeholder }}</mat-label>\r\n  <input\r\n    matInput\r\n    [disabled]=\"true\"\r\n    [readonly]=\"true\"\r\n    [value]=\"(measure$ | async) || 0 | measureFormat: measureUnit\"\r\n  />\r\n</mat-form-field>\r\n<mat-form-field class=\"unit-field\">\r\n  <mat-select\r\n    [value]=\"measureUnit\"\r\n    [disabled]=\"auto\"\r\n    (selectionChange)=\"onMeasureUnitChange($event.value)\"\r\n  >\r\n    <mat-option *ngFor=\"let measureUnit of measureUnits\" [value]=\"measureUnit\">\r\n      {{ 'igo.geo.measure.' + measureUnit | translate }}\r\n    </mat-option>\r\n  </mat-select>\r\n</mat-form-field>\r\n", styles: [":host{display:flex;width:100%;padding:5px 10px}:host .measure-field{pointer-events:none;flex:2}:host .unit-field{margin-left:8px;flex:1}:host ::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{display:none}\n"], dependencies: [{ kind: "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: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: MeasureFormatPipe, name: "measureFormat" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: MeasurerItemComponent, isStandalone: true, selector: "igo-measurer-item", inputs: { measureType: "measureType", measureUnit: "measureUnit", measure: "measure", auto: "auto", placeholder: "placeholder" }, outputs: { measureUnitChange: "measureUnitChange" }, ngImport: i0, template: "<mat-form-field class=\"measure-field\" floatLabel=\"always\">\n  <mat-label>{{ placeholder }}</mat-label>\n  <input\n    matInput\n    [disabled]=\"true\"\n    [readonly]=\"true\"\n    [value]=\"(measure$ | async) || 0 | measureFormat: measureUnit\"\n  />\n</mat-form-field>\n<mat-form-field class=\"unit-field\">\n  <mat-select\n    [value]=\"measureUnit\"\n    [disabled]=\"auto\"\n    (selectionChange)=\"onMeasureUnitChange($event.value)\"\n  >\n    <mat-option *ngFor=\"let measureUnit of measureUnits\" [value]=\"measureUnit\">\n      {{ 'igo.geo.measure.' + measureUnit | translate }}\n    </mat-option>\n  </mat-select>\n</mat-form-field>\n", styles: [":host{display:flex;width:100%;padding:5px 10px}:host .measure-field{pointer-events:none;flex:2}:host .unit-field{margin-left:8px;flex:1}:host ::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{display:none}\n"], dependencies: [{ kind: "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: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: MeasureFormatPipe, name: "measureFormat" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: MeasurerItemComponent, decorators: [{
             type: Component,
@@ -14208,7 +14266,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                         AsyncPipe,
                         TranslateModule,
                         MeasureFormatPipe
-                    ], template: "<mat-form-field class=\"measure-field\" floatLabel=\"always\">\r\n  <mat-label>{{ placeholder }}</mat-label>\r\n  <input\r\n    matInput\r\n    [disabled]=\"true\"\r\n    [readonly]=\"true\"\r\n    [value]=\"(measure$ | async) || 0 | measureFormat: measureUnit\"\r\n  />\r\n</mat-form-field>\r\n<mat-form-field class=\"unit-field\">\r\n  <mat-select\r\n    [value]=\"measureUnit\"\r\n    [disabled]=\"auto\"\r\n    (selectionChange)=\"onMeasureUnitChange($event.value)\"\r\n  >\r\n    <mat-option *ngFor=\"let measureUnit of measureUnits\" [value]=\"measureUnit\">\r\n      {{ 'igo.geo.measure.' + measureUnit | translate }}\r\n    </mat-option>\r\n  </mat-select>\r\n</mat-form-field>\r\n", styles: [":host{display:flex;width:100%;padding:5px 10px}:host .measure-field{pointer-events:none;flex:2}:host .unit-field{margin-left:8px;flex:1}:host ::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{display:none}\n"] }]
+                    ], template: "<mat-form-field class=\"measure-field\" floatLabel=\"always\">\n  <mat-label>{{ placeholder }}</mat-label>\n  <input\n    matInput\n    [disabled]=\"true\"\n    [readonly]=\"true\"\n    [value]=\"(measure$ | async) || 0 | measureFormat: measureUnit\"\n  />\n</mat-form-field>\n<mat-form-field class=\"unit-field\">\n  <mat-select\n    [value]=\"measureUnit\"\n    [disabled]=\"auto\"\n    (selectionChange)=\"onMeasureUnitChange($event.value)\"\n  >\n    <mat-option *ngFor=\"let measureUnit of measureUnits\" [value]=\"measureUnit\">\n      {{ 'igo.geo.measure.' + measureUnit | translate }}\n    </mat-option>\n  </mat-select>\n</mat-form-field>\n", styles: [":host{display:flex;width:100%;padding:5px 10px}:host .measure-field{pointer-events:none;flex:2}:host .unit-field{margin-left:8px;flex:1}:host ::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{display:none}\n"] }]
         }], ctorParameters: () => [], propDecorators: { measureType: [{
                 type: Input
             }], measureUnit: [{
@@ -15124,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>\r\n  <div class=\"measure-type-toggle mat-typography\">\r\n    <mat-button-toggle-group\r\n      [value]=\"activeMeasureType\"\r\n      (change)=\"onMeasureTypeChange($event.value)\"\r\n    >\r\n      <mat-button-toggle [value]=\"measureType.Length\">\r\n        {{ 'igo.geo.measure.' + measureType.Length | translate }}\r\n      </mat-button-toggle>\r\n      <mat-button-toggle [value]=\"measureType.Area\">\r\n        {{ 'igo.geo.measure.' + measureType.Area | translate }}\r\n      </mat-button-toggle>\r\n    </mat-button-toggle-group>\r\n  </div>\r\n\r\n  <div class=\"measure-options mat-typography\">\r\n    <mat-slide-toggle\r\n      [disabled]=\"drawControlIsDisabled\"\r\n      [checked]=\"drawControlIsActive\"\r\n      [labelPosition]=\"'before'\"\r\n      (change)=\"onToggleDrawControl($event.checked)\"\r\n    >\r\n      {{ 'igo.geo.measure.toggleActive' | translate }}\r\n    </mat-slide-toggle>\r\n\r\n    <mat-divider *ngIf=\"hasLine$ | async\"></mat-divider>\r\n\r\n    <mat-slide-toggle\r\n      *ngIf=\"hasLine$ | async\"\r\n      [checked]=\"displayLines\"\r\n      [labelPosition]=\"'before'\"\r\n      (change)=\"onToggleDisplayLines($event.checked)\"\r\n    >\r\n      {{ 'igo.geo.measure.toggleDisplayLines' | translate }}\r\n    </mat-slide-toggle>\r\n\r\n    <mat-divider *ngIf=\"(hasLine$ | async) || (hasArea$ | async)\"></mat-divider>\r\n\r\n    <mat-slide-toggle\r\n      *ngIf=\"hasArea$ | async\"\r\n      [checked]=\"displayDistance\"\r\n      [labelPosition]=\"'before'\"\r\n      (change)=\"onToggleDisplayDistance($event.checked)\"\r\n    >\r\n      {{ 'igo.geo.measure.toggleDisplayDistance' | translate }}\r\n    </mat-slide-toggle>\r\n\r\n    <mat-slide-toggle\r\n      *ngIf=\"hasArea$ | async\"\r\n      [checked]=\"displayAreas\"\r\n      [labelPosition]=\"'before'\"\r\n      (change)=\"onToggleDisplayAreas($event.checked)\"\r\n    >\r\n      {{ 'igo.geo.measure.toggleDisplayAreas' | translate }}\r\n    </mat-slide-toggle>\r\n\r\n    <mat-divider *ngIf=\"hasArea$ | async\"></mat-divider>\r\n\r\n    <mat-slide-toggle\r\n      [checked]=\"measureUnitsAuto\"\r\n      [labelPosition]=\"'before'\"\r\n      (change)=\"onToggleMeasureUnitsAuto($event.checked)\"\r\n    >\r\n      {{ 'igo.geo.measure.toggleAutoUnits' | translate }}\r\n    </mat-slide-toggle>\r\n  </div>\r\n\r\n  <ng-container *ngIf=\"measure$ | async as measure\">\r\n    <igo-measurer-item\r\n      *ngIf=\"\r\n        activeMeasureType === measureType.Length ||\r\n        activeMeasureType === measureType.Area\r\n      \"\r\n      [measureType]=\"measureType.Length\"\r\n      [measureUnit]=\"activeLengthUnit\"\r\n      [measure]=\"measure.length\"\r\n      [auto]=\"measureUnitsAuto\"\r\n      [placeholder]=\"\r\n        (activeMeasureType === measureType.Area\r\n          ? 'igo.geo.measure.perimeter'\r\n          : 'igo.geo.measure.length'\r\n        ) | translate\r\n      \"\r\n      (measureUnitChange)=\"onLengthUnitChange($any($event))\"\r\n    >\r\n    </igo-measurer-item>\r\n\r\n    <igo-measurer-item\r\n      *ngIf=\"activeMeasureType === measureType.Area\"\r\n      [measureType]=\"measureType.Area\"\r\n      [measureUnit]=\"activeAreaUnit\"\r\n      [measure]=\"measure.area\"\r\n      [auto]=\"measureUnitsAuto\"\r\n      [placeholder]=\"'igo.geo.measure.area' | translate\"\r\n      (measureUnitChange)=\"onAreaUnitChange($any($event))\"\r\n    >\r\n    </igo-measurer-item>\r\n  </ng-container>\r\n\r\n  <mat-divider *ngIf=\"(hasLine$ | async) || (hasArea$ | async)\"></mat-divider>\r\n\r\n  <div class=\"measure-store-buttons\">\r\n    <button\r\n      *ngIf=\"(hasLine$ | async) || (hasArea$ | async)\"\r\n      mat-icon-button\r\n      [matTooltip]=\"'igo.geo.measure.actionbar.calculate.tooltip' | translate\"\r\n      [disabled]=\"(selectedFeatures$ | async).length === 0\"\r\n      color=\"accent\"\r\n      (click)=\"onCalculateClick()\"\r\n    >\r\n      <mat-icon svgIcon=\"calculator\"></mat-icon>\r\n    </button>\r\n\r\n    <button\r\n      *ngIf=\"(hasLine$ | async) || (hasArea$ | async)\"\r\n      mat-icon-button\r\n      [matTooltip]=\"'igo.geo.measure.actionbar.delete.tooltip' | translate\"\r\n      [disabled]=\"(selectedFeatures$ | async).length === 0\"\r\n      color=\"warn\"\r\n      (click)=\"onDeleteClick()\"\r\n    >\r\n      <mat-icon svgIcon=\"delete\"></mat-icon>\r\n    </button>\r\n\r\n    <!--button\r\n      mat-icon-button\r\n      [matTooltip]=\"'igo.geo.measure.actionbar.modify.tooltip' | translate\"\r\n      [disabled]=\"(selectedFeatures$ | async).length !== 1\"\r\n      (click)=\"onModifyClick()\">\r\n      <mat-icon svgIcon=\"edit\"></mat-icon>\r\n    </button-->\r\n  </div>\r\n\r\n  <igo-entity-table\r\n    #table\r\n    class=\"table-compact\"\r\n    [store]=\"store\"\r\n    [template]=\"tableTemplate\"\r\n  >\r\n  </igo-entity-table>\r\n</div>\r\n", styles: [":host .measure-type-toggle{padding:10px;text-align:center}:host .measure-type-toggle mat-button-toggle-group{width:100%}:host .measure-type-toggle mat-button-toggle-group mat-button-toggle{width:50%}:host .measure-options mat-slide-toggle{width:100%;padding:10px}:host .measure-options mat-slide-toggle ::ng-deep .mdc-form-field{width:100%}:host .measure-options mat-slide-toggle ::ng-deep .mdc-label{margin-left:0;width:calc(100% - 60px)}:host .measure-store-buttons{margin-left:-2px}:host .measure-store-buttons button:first-of-type{margin-left:14px}:host .table-compact ::ng-deep .mat-mdc-header-cell.mat-column-selectionCheckbox{width:52px}:host .igo-map-tooltip{position:relative;border-radius:4px;padding:4px 8px;white-space:nowrap}::ng-deep .igo-map-tooltip-hidden,.igo-map-tooltip-measure-by-display{display:none}\n"], dependencies: [{ kind: "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 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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: MeasurerComponent, decorators: [{
             type: Component,
@@ -15140,7 +15198,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                         EntityTableComponent,
                         AsyncPipe,
                         TranslateModule
-                    ], template: "<div>\r\n  <div class=\"measure-type-toggle mat-typography\">\r\n    <mat-button-toggle-group\r\n      [value]=\"activeMeasureType\"\r\n      (change)=\"onMeasureTypeChange($event.value)\"\r\n    >\r\n      <mat-button-toggle [value]=\"measureType.Length\">\r\n        {{ 'igo.geo.measure.' + measureType.Length | translate }}\r\n      </mat-button-toggle>\r\n      <mat-button-toggle [value]=\"measureType.Area\">\r\n        {{ 'igo.geo.measure.' + measureType.Area | translate }}\r\n      </mat-button-toggle>\r\n    </mat-button-toggle-group>\r\n  </div>\r\n\r\n  <div class=\"measure-options mat-typography\">\r\n    <mat-slide-toggle\r\n      [disabled]=\"drawControlIsDisabled\"\r\n      [checked]=\"drawControlIsActive\"\r\n      [labelPosition]=\"'before'\"\r\n      (change)=\"onToggleDrawControl($event.checked)\"\r\n    >\r\n      {{ 'igo.geo.measure.toggleActive' | translate }}\r\n    </mat-slide-toggle>\r\n\r\n    <mat-divider *ngIf=\"hasLine$ | async\"></mat-divider>\r\n\r\n    <mat-slide-toggle\r\n      *ngIf=\"hasLine$ | async\"\r\n      [checked]=\"displayLines\"\r\n      [labelPosition]=\"'before'\"\r\n      (change)=\"onToggleDisplayLines($event.checked)\"\r\n    >\r\n      {{ 'igo.geo.measure.toggleDisplayLines' | translate }}\r\n    </mat-slide-toggle>\r\n\r\n    <mat-divider *ngIf=\"(hasLine$ | async) || (hasArea$ | async)\"></mat-divider>\r\n\r\n    <mat-slide-toggle\r\n      *ngIf=\"hasArea$ | async\"\r\n      [checked]=\"displayDistance\"\r\n      [labelPosition]=\"'before'\"\r\n      (change)=\"onToggleDisplayDistance($event.checked)\"\r\n    >\r\n      {{ 'igo.geo.measure.toggleDisplayDistance' | translate }}\r\n    </mat-slide-toggle>\r\n\r\n    <mat-slide-toggle\r\n      *ngIf=\"hasArea$ | async\"\r\n      [checked]=\"displayAreas\"\r\n      [labelPosition]=\"'before'\"\r\n      (change)=\"onToggleDisplayAreas($event.checked)\"\r\n    >\r\n      {{ 'igo.geo.measure.toggleDisplayAreas' | translate }}\r\n    </mat-slide-toggle>\r\n\r\n    <mat-divider *ngIf=\"hasArea$ | async\"></mat-divider>\r\n\r\n    <mat-slide-toggle\r\n      [checked]=\"measureUnitsAuto\"\r\n      [labelPosition]=\"'before'\"\r\n      (change)=\"onToggleMeasureUnitsAuto($event.checked)\"\r\n    >\r\n      {{ 'igo.geo.measure.toggleAutoUnits' | translate }}\r\n    </mat-slide-toggle>\r\n  </div>\r\n\r\n  <ng-container *ngIf=\"measure$ | async as measure\">\r\n    <igo-measurer-item\r\n      *ngIf=\"\r\n        activeMeasureType === measureType.Length ||\r\n        activeMeasureType === measureType.Area\r\n      \"\r\n      [measureType]=\"measureType.Length\"\r\n      [measureUnit]=\"activeLengthUnit\"\r\n      [measure]=\"measure.length\"\r\n      [auto]=\"measureUnitsAuto\"\r\n      [placeholder]=\"\r\n        (activeMeasureType === measureType.Area\r\n          ? 'igo.geo.measure.perimeter'\r\n          : 'igo.geo.measure.length'\r\n        ) | translate\r\n      \"\r\n      (measureUnitChange)=\"onLengthUnitChange($any($event))\"\r\n    >\r\n    </igo-measurer-item>\r\n\r\n    <igo-measurer-item\r\n      *ngIf=\"activeMeasureType === measureType.Area\"\r\n      [measureType]=\"measureType.Area\"\r\n      [measureUnit]=\"activeAreaUnit\"\r\n      [measure]=\"measure.area\"\r\n      [auto]=\"measureUnitsAuto\"\r\n      [placeholder]=\"'igo.geo.measure.area' | translate\"\r\n      (measureUnitChange)=\"onAreaUnitChange($any($event))\"\r\n    >\r\n    </igo-measurer-item>\r\n  </ng-container>\r\n\r\n  <mat-divider *ngIf=\"(hasLine$ | async) || (hasArea$ | async)\"></mat-divider>\r\n\r\n  <div class=\"measure-store-buttons\">\r\n    <button\r\n      *ngIf=\"(hasLine$ | async) || (hasArea$ | async)\"\r\n      mat-icon-button\r\n      [matTooltip]=\"'igo.geo.measure.actionbar.calculate.tooltip' | translate\"\r\n      [disabled]=\"(selectedFeatures$ | async).length === 0\"\r\n      color=\"accent\"\r\n      (click)=\"onCalculateClick()\"\r\n    >\r\n      <mat-icon svgIcon=\"calculator\"></mat-icon>\r\n    </button>\r\n\r\n    <button\r\n      *ngIf=\"(hasLine$ | async) || (hasArea$ | async)\"\r\n      mat-icon-button\r\n      [matTooltip]=\"'igo.geo.measure.actionbar.delete.tooltip' | translate\"\r\n      [disabled]=\"(selectedFeatures$ | async).length === 0\"\r\n      color=\"warn\"\r\n      (click)=\"onDeleteClick()\"\r\n    >\r\n      <mat-icon svgIcon=\"delete\"></mat-icon>\r\n    </button>\r\n\r\n    <!--button\r\n      mat-icon-button\r\n      [matTooltip]=\"'igo.geo.measure.actionbar.modify.tooltip' | translate\"\r\n      [disabled]=\"(selectedFeatures$ | async).length !== 1\"\r\n      (click)=\"onModifyClick()\">\r\n      <mat-icon svgIcon=\"edit\"></mat-icon>\r\n    </button-->\r\n  </div>\r\n\r\n  <igo-entity-table\r\n    #table\r\n    class=\"table-compact\"\r\n    [store]=\"store\"\r\n    [template]=\"tableTemplate\"\r\n  >\r\n  </igo-entity-table>\r\n</div>\r\n", styles: [":host .measure-type-toggle{padding:10px;text-align:center}:host .measure-type-toggle mat-button-toggle-group{width:100%}:host .measure-type-toggle mat-button-toggle-group mat-button-toggle{width:50%}:host .measure-options mat-slide-toggle{width:100%;padding:10px}:host .measure-options mat-slide-toggle ::ng-deep .mdc-form-field{width:100%}:host .measure-options mat-slide-toggle ::ng-deep .mdc-label{margin-left:0;width:calc(100% - 60px)}:host .measure-store-buttons{margin-left:-2px}:host .measure-store-buttons button:first-of-type{margin-left:14px}:host .table-compact ::ng-deep .mat-mdc-header-cell.mat-column-selectionCheckbox{width:52px}:host .igo-map-tooltip{position:relative;border-radius:4px;padding:4px 8px;white-space:nowrap}::ng-deep .igo-map-tooltip-hidden,.igo-map-tooltip-measure-by-display{display:none}\n"] }]
+                    ], 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"] }]
         }], ctorParameters: () => [{ type: i1$2.LanguageService }, { type: i1$5.MatDialog }, { type: i3$2.StorageService }, { type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
@@ -15240,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\r\n  (mouseenter)=\"onMouseEvent($event)\"\r\n  (mouseleave)=\"onMouseEvent($event)\"\r\n>\r\n  <mat-icon\r\n    *ngIf=\"icon\"\r\n    matListItemIcon\r\n    [svgIcon]=\"showIcons ? icon : 'blank'\"\r\n  ></mat-icon>\r\n\r\n  <div\r\n    matListItemTitle\r\n    *ngIf=\"titleHtml; else normalTitle\"\r\n    [innerHtml]=\"titleHtml\"\r\n    matTooltipShowDelay=\"500\"\r\n    [matTooltip]=\"tooltipHtml\"\r\n    matTooltipClass=\"search-result-tooltip\"\r\n  ></div>\r\n  <ng-template #normalTitle>\r\n    <span\r\n      matListItemTitle\r\n      *ngIf=\"!titleHtml\"\r\n      matTooltipShowDelay=\"500\"\r\n      [matTooltip]=\"title\"\r\n      >{{ title }}</span\r\n    >\r\n  </ng-template>\r\n\r\n  <div matListItemMeta>\r\n    <button\r\n      *ngIf=\"withZoomButton\"\r\n      igoStopPropagation\r\n      mat-icon-button\r\n      (click)=\"onZoomHandler()\"\r\n    >\r\n      <mat-icon svgIcon=\"magnify\"></mat-icon>\r\n    </button>\r\n\r\n    <ng-content select=\"[igoSearchItemToolbar]\"> </ng-content>\r\n  </div>\r\n</mat-list-item>\r\n", styles: [":host ::ng-deep small{color:#8c8c8c}:host div[matlistitemmeta]:empty{display:none}:host ::ng-deep .search-result-tooltip{white-space:pre-line}\n"], dependencies: [{ kind: "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\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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SearchResultsItemComponent, decorators: [{
             type: Component,
@@ -15251,7 +15309,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                         MatTooltipModule,
                         MatButtonModule,
                         StopPropagationDirective
-                    ], template: "<mat-list-item\r\n  (mouseenter)=\"onMouseEvent($event)\"\r\n  (mouseleave)=\"onMouseEvent($event)\"\r\n>\r\n  <mat-icon\r\n    *ngIf=\"icon\"\r\n    matListItemIcon\r\n    [svgIcon]=\"showIcons ? icon : 'blank'\"\r\n  ></mat-icon>\r\n\r\n  <div\r\n    matListItemTitle\r\n    *ngIf=\"titleHtml; else normalTitle\"\r\n    [innerHtml]=\"titleHtml\"\r\n    matTooltipShowDelay=\"500\"\r\n    [matTooltip]=\"tooltipHtml\"\r\n    matTooltipClass=\"search-result-tooltip\"\r\n  ></div>\r\n  <ng-template #normalTitle>\r\n    <span\r\n      matListItemTitle\r\n      *ngIf=\"!titleHtml\"\r\n      matTooltipShowDelay=\"500\"\r\n      [matTooltip]=\"title\"\r\n      >{{ title }}</span\r\n    >\r\n  </ng-template>\r\n\r\n  <div matListItemMeta>\r\n    <button\r\n      *ngIf=\"withZoomButton\"\r\n      igoStopPropagation\r\n      mat-icon-button\r\n      (click)=\"onZoomHandler()\"\r\n    >\r\n      <mat-icon svgIcon=\"magnify\"></mat-icon>\r\n    </button>\r\n\r\n    <ng-content select=\"[igoSearchItemToolbar]\"> </ng-content>\r\n  </div>\r\n</mat-list-item>\r\n", styles: [":host ::ng-deep small{color:#8c8c8c}:host div[matlistitemmeta]:empty{display:none}:host ::ng-deep .search-result-tooltip{white-space:pre-line}\n"] }]
+                    ], 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"] }]
         }], propDecorators: { result: [{
                 type: Input
             }], map: [{
@@ -15309,7 +15367,7 @@ class SaveFeatureDialogComponent {
         this.dialogRef.close();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SaveFeatureDialogComponent, deps: [{ token: i1$6.UntypedFormBuilder }, { token: i1$2.LanguageService }, { token: i1$5.MatDialogRef }, { token: MAT_DIALOG_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: SaveFeatureDialogComponent, isStandalone: true, selector: "igo-save-feature-dialog", ngImport: i0, template: "<h1 mat-dialog-title class=\"mat-typography\">\r\n  {{ 'igo.geo.layer.saveFeatureInLayer' | translate }}\r\n</h1>\r\n\r\n<div mat-dialog-content class=\"mat-typography\">\r\n  <form class=\"igo-form\" [formGroup]=\"form\">\r\n    <igo-list [navigation]=\"false\" [selection]=\"false\">\r\n      <igo-search-results-item\r\n        igoListItem\r\n        color=\"accent\"\r\n        [result]=\"feature\"\r\n        [showIcons]=\"true\"\r\n      >\r\n      </igo-search-results-item>\r\n    </igo-list>\r\n\r\n    <div class=\"igo-input-container\">\r\n      <mat-form-field>\r\n        <input\r\n          type=\"text\"\r\n          placeholder=\"{{ 'igo.geo.layer.chooseOrSet' | translate }}\"\r\n          matInput\r\n          [matAutocomplete]=\"auto\"\r\n          formControlName=\"layerName\"\r\n        />\r\n        <mat-autocomplete [displayWith]=\"displayFn\" #auto=\"matAutocomplete\">\r\n          <mat-option\r\n            *ngFor=\"let layer of filteredLayers$ | async\"\r\n            [value]=\"layer\"\r\n          >\r\n            <p matListItemTitle>{{ layer.title }}</p>\r\n          </mat-option>\r\n        </mat-autocomplete>\r\n      </mat-form-field>\r\n    </div>\r\n  </form>\r\n</div>\r\n\r\n<div mat-dialog-actions style=\"justify-content: center\">\r\n  <div class=\"igo-form-button-group create-layer-button-top-padding\">\r\n    <button mat-raised-button type=\"button\" (click)=\"cancel()\">\r\n      {{ 'igo.geo.layer.cancelBtn' | translate }}\r\n    </button>\r\n    <button\r\n      id=\"createLayerBtnDialog\"\r\n      mat-raised-button\r\n      type=\"button\"\r\n      color=\"primary\"\r\n      (click)=\"save()\"\r\n    >\r\n      {{ 'igo.geo.layer.saveBtn' | translate }}\r\n    </button>\r\n  </div>\r\n</div>\r\n", styles: [":host mat-form-field{width:100%}:host .create-layer-button-top-padding{padding-top:25px}:host .igo-form{padding:10px 5px 5px}:host .igo-form-button-group{text-align:center}:host button{cursor:pointer}:host button#createLayerBtnDialog[disabled=true]{cursor:default;background-color:#0000001f;color:#00000042}:host .error{color:red}\n"], dependencies: [{ kind: "directive", type: 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.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: "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: "component", type: ListComponent, selector: "igo-list", inputs: ["navigation", "selection"] }, { kind: "component", type: SearchResultsItemComponent, selector: "igo-search-results-item", inputs: ["result", "map", "showIcons", "withZoomButton"], outputs: ["zoomEvent"] }, { 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: MatFormFieldModule }, { kind: "component", type: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { 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: "component", type: i6$4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { 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: MatOptionModule }, { kind: "ngmodule", type: MatListModule }, { kind: "directive", type: i2$5.MatListItemTitle, selector: "[matListItemTitle]" }, { 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: "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: SaveFeatureDialogComponent, isStandalone: true, selector: "igo-save-feature-dialog", ngImport: i0, template: "<h1 mat-dialog-title class=\"mat-typography\">\n  {{ 'igo.geo.layer.saveFeatureInLayer' | translate }}\n</h1>\n\n<div mat-dialog-content class=\"mat-typography\">\n  <form class=\"igo-form\" [formGroup]=\"form\">\n    <igo-list [navigation]=\"false\" [selection]=\"false\">\n      <igo-search-results-item\n        igoListItem\n        color=\"accent\"\n        [result]=\"feature\"\n        [showIcons]=\"true\"\n      >\n      </igo-search-results-item>\n    </igo-list>\n\n    <div class=\"igo-input-container\">\n      <mat-form-field>\n        <input\n          type=\"text\"\n          placeholder=\"{{ 'igo.geo.layer.chooseOrSet' | translate }}\"\n          matInput\n          [matAutocomplete]=\"auto\"\n          formControlName=\"layerName\"\n        />\n        <mat-autocomplete [displayWith]=\"displayFn\" #auto=\"matAutocomplete\">\n          <mat-option\n            *ngFor=\"let layer of filteredLayers$ | async\"\n            [value]=\"layer\"\n          >\n            <p matListItemTitle>{{ layer.title }}</p>\n          </mat-option>\n        </mat-autocomplete>\n      </mat-form-field>\n    </div>\n  </form>\n</div>\n\n<div mat-dialog-actions style=\"justify-content: center\">\n  <div class=\"igo-form-button-group create-layer-button-top-padding\">\n    <button mat-raised-button type=\"button\" (click)=\"cancel()\">\n      {{ 'igo.geo.layer.cancelBtn' | translate }}\n    </button>\n    <button\n      id=\"createLayerBtnDialog\"\n      mat-raised-button\n      type=\"button\"\n      color=\"primary\"\n      (click)=\"save()\"\n    >\n      {{ 'igo.geo.layer.saveBtn' | translate }}\n    </button>\n  </div>\n</div>\n", styles: [":host mat-form-field{width:100%}:host .create-layer-button-top-padding{padding-top:25px}:host .igo-form{padding:10px 5px 5px}:host .igo-form-button-group{text-align:center}:host button{cursor:pointer}:host button#createLayerBtnDialog[disabled=true]{cursor:default;background-color:#0000001f;color:#00000042}:host .error{color:red}\n"], dependencies: [{ kind: "directive", type: 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.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: "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: "component", type: ListComponent, selector: "igo-list", inputs: ["navigation", "selection"] }, { kind: "component", type: SearchResultsItemComponent, selector: "igo-search-results-item", inputs: ["result", "map", "showIcons", "withZoomButton"], outputs: ["zoomEvent"] }, { 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: MatFormFieldModule }, { kind: "component", type: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { 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: "component", type: i6$4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { 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: MatOptionModule }, { kind: "ngmodule", type: MatListModule }, { kind: "directive", type: i2$5.MatListItemTitle, selector: "[matListItemTitle]" }, { 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: "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: SaveFeatureDialogComponent, decorators: [{
             type: Component,
@@ -15331,7 +15389,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                         MatButtonModule,
                         AsyncPipe,
                         TranslateModule
-                    ], template: "<h1 mat-dialog-title class=\"mat-typography\">\r\n  {{ 'igo.geo.layer.saveFeatureInLayer' | translate }}\r\n</h1>\r\n\r\n<div mat-dialog-content class=\"mat-typography\">\r\n  <form class=\"igo-form\" [formGroup]=\"form\">\r\n    <igo-list [navigation]=\"false\" [selection]=\"false\">\r\n      <igo-search-results-item\r\n        igoListItem\r\n        color=\"accent\"\r\n        [result]=\"feature\"\r\n        [showIcons]=\"true\"\r\n      >\r\n      </igo-search-results-item>\r\n    </igo-list>\r\n\r\n    <div class=\"igo-input-container\">\r\n      <mat-form-field>\r\n        <input\r\n          type=\"text\"\r\n          placeholder=\"{{ 'igo.geo.layer.chooseOrSet' | translate }}\"\r\n          matInput\r\n          [matAutocomplete]=\"auto\"\r\n          formControlName=\"layerName\"\r\n        />\r\n        <mat-autocomplete [displayWith]=\"displayFn\" #auto=\"matAutocomplete\">\r\n          <mat-option\r\n            *ngFor=\"let layer of filteredLayers$ | async\"\r\n            [value]=\"layer\"\r\n          >\r\n            <p matListItemTitle>{{ layer.title }}</p>\r\n          </mat-option>\r\n        </mat-autocomplete>\r\n      </mat-form-field>\r\n    </div>\r\n  </form>\r\n</div>\r\n\r\n<div mat-dialog-actions style=\"justify-content: center\">\r\n  <div class=\"igo-form-button-group create-layer-button-top-padding\">\r\n    <button mat-raised-button type=\"button\" (click)=\"cancel()\">\r\n      {{ 'igo.geo.layer.cancelBtn' | translate }}\r\n    </button>\r\n    <button\r\n      id=\"createLayerBtnDialog\"\r\n      mat-raised-button\r\n      type=\"button\"\r\n      color=\"primary\"\r\n      (click)=\"save()\"\r\n    >\r\n      {{ 'igo.geo.layer.saveBtn' | translate }}\r\n    </button>\r\n  </div>\r\n</div>\r\n", styles: [":host mat-form-field{width:100%}:host .create-layer-button-top-padding{padding-top:25px}:host .igo-form{padding:10px 5px 5px}:host .igo-form-button-group{text-align:center}:host button{cursor:pointer}:host button#createLayerBtnDialog[disabled=true]{cursor:default;background-color:#0000001f;color:#00000042}:host .error{color:red}\n"] }]
+                    ], template: "<h1 mat-dialog-title class=\"mat-typography\">\n  {{ 'igo.geo.layer.saveFeatureInLayer' | translate }}\n</h1>\n\n<div mat-dialog-content class=\"mat-typography\">\n  <form class=\"igo-form\" [formGroup]=\"form\">\n    <igo-list [navigation]=\"false\" [selection]=\"false\">\n      <igo-search-results-item\n        igoListItem\n        color=\"accent\"\n        [result]=\"feature\"\n        [showIcons]=\"true\"\n      >\n      </igo-search-results-item>\n    </igo-list>\n\n    <div class=\"igo-input-container\">\n      <mat-form-field>\n        <input\n          type=\"text\"\n          placeholder=\"{{ 'igo.geo.layer.chooseOrSet' | translate }}\"\n          matInput\n          [matAutocomplete]=\"auto\"\n          formControlName=\"layerName\"\n        />\n        <mat-autocomplete [displayWith]=\"displayFn\" #auto=\"matAutocomplete\">\n          <mat-option\n            *ngFor=\"let layer of filteredLayers$ | async\"\n            [value]=\"layer\"\n          >\n            <p matListItemTitle>{{ layer.title }}</p>\n          </mat-option>\n        </mat-autocomplete>\n      </mat-form-field>\n    </div>\n  </form>\n</div>\n\n<div mat-dialog-actions style=\"justify-content: center\">\n  <div class=\"igo-form-button-group create-layer-button-top-padding\">\n    <button mat-raised-button type=\"button\" (click)=\"cancel()\">\n      {{ 'igo.geo.layer.cancelBtn' | translate }}\n    </button>\n    <button\n      id=\"createLayerBtnDialog\"\n      mat-raised-button\n      type=\"button\"\n      color=\"primary\"\n      (click)=\"save()\"\n    >\n      {{ 'igo.geo.layer.saveBtn' | translate }}\n    </button>\n  </div>\n</div>\n", styles: [":host mat-form-field{width:100%}:host .create-layer-button-top-padding{padding-top:25px}:host .igo-form{padding:10px 5px 5px}:host .igo-form-button-group{text-align:center}:host button{cursor:pointer}:host button#createLayerBtnDialog[disabled=true]{cursor:default;background-color:#0000001f;color:#00000042}:host .error{color:red}\n"] }]
         }], ctorParameters: () => [{ type: i1$6.UntypedFormBuilder }, { type: i1$2.LanguageService }, { type: i1$5.MatDialogRef }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -15702,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\r\n  igoStopPropagation\r\n  (mouseenter)=\"onMouseEvent($event)\"\r\n  (mouseleave)=\"onMouseEvent($event)\"\r\n  *ngIf=\"layer.meta.dataType === 'Layer'\"\r\n  mat-icon-button\r\n  tooltip-position=\"below\"\r\n  matTooltipShowDelay=\"500\"\r\n  [matTooltip]=\"computeTooltip() | translate\"\r\n  [color]=\"(isPreview$ | async) ? '' : added ? 'warn' : ''\"\r\n  (click)=\"onToggleClick($event)\"\r\n>\r\n  <mat-icon\r\n    aria-hidden=\"false\"\r\n    matBadge=\"icon\"\r\n    [igoMatBadgeIcon]=\"getBadgeIcon()\"\r\n    igoMatBadgeColor=\"rgba(0,0,0,0.87)\"\r\n    igoMatBadgeBackgroundColor=\"none\"\r\n    [igoMatBadgeInverseColor]=\"true\"\r\n    [matBadgeHidden]=\"\r\n      ((inRange$ | async) && (isVisible$ | async) === true) ||\r\n      ((inRange$ | async) && !added) ||\r\n      ((inRange$ | async) && (isPreview$ | async))\r\n    \"\r\n    [matBadgeDisabled]=\"(inRange$ | async) === false\"\r\n    matBadgeSize=\"small\"\r\n    matBadgePosition=\"after\"\r\n    [svgIcon]=\"(isPreview$ | async) ? 'plus' : added ? 'delete' : 'plus'\"\r\n  >\r\n  </mat-icon>\r\n</button>\r\n\r\n<button\r\n  [id]=\"!isMobile ? 'hide-save-search-result-btn' : ''\"\r\n  igoStopPropagation\r\n  *ngIf=\"layer.meta.dataType === 'Feature' && saveSearchResultInLayer\"\r\n  mat-icon-button\r\n  tooltip-position=\"below\"\r\n  matTooltipShowDelay=\"500\"\r\n  [matTooltip]=\"addFeatureToLayerTooltip$ | async | translate\"\r\n  (click)=\"addFeatureToLayer()\"\r\n>\r\n  <mat-icon\r\n    aria-hidden=\"false\"\r\n    matBadge=\"icon\"\r\n    igoMatBadgeIcon=\"eye-off\"\r\n    [igoMatBadgeInverseColor]=\"true\"\r\n    [matBadgeHidden]=\"inRange$ | async\"\r\n    [matBadgeDisabled]=\"true\"\r\n    matBadgeSize=\"small\"\r\n    matBadgePosition=\"after\"\r\n    svgIcon=\"file-plus-outline\"\r\n  >\r\n  </mat-icon>\r\n</button>\r\n", styles: [":host #hide-save-search-result-btn{display:none}:host #show-save-search-result-btn{display:block}\n"], dependencies: [{ kind: "directive", type: 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    [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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SearchResultAddButtonComponent, decorators: [{
             type: Component,
@@ -15716,7 +15774,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                         IgoBadgeIconDirective,
                         AsyncPipe,
                         TranslateModule
-                    ], template: "<button\r\n  igoStopPropagation\r\n  (mouseenter)=\"onMouseEvent($event)\"\r\n  (mouseleave)=\"onMouseEvent($event)\"\r\n  *ngIf=\"layer.meta.dataType === 'Layer'\"\r\n  mat-icon-button\r\n  tooltip-position=\"below\"\r\n  matTooltipShowDelay=\"500\"\r\n  [matTooltip]=\"computeTooltip() | translate\"\r\n  [color]=\"(isPreview$ | async) ? '' : added ? 'warn' : ''\"\r\n  (click)=\"onToggleClick($event)\"\r\n>\r\n  <mat-icon\r\n    aria-hidden=\"false\"\r\n    matBadge=\"icon\"\r\n    [igoMatBadgeIcon]=\"getBadgeIcon()\"\r\n    igoMatBadgeColor=\"rgba(0,0,0,0.87)\"\r\n    igoMatBadgeBackgroundColor=\"none\"\r\n    [igoMatBadgeInverseColor]=\"true\"\r\n    [matBadgeHidden]=\"\r\n      ((inRange$ | async) && (isVisible$ | async) === true) ||\r\n      ((inRange$ | async) && !added) ||\r\n      ((inRange$ | async) && (isPreview$ | async))\r\n    \"\r\n    [matBadgeDisabled]=\"(inRange$ | async) === false\"\r\n    matBadgeSize=\"small\"\r\n    matBadgePosition=\"after\"\r\n    [svgIcon]=\"(isPreview$ | async) ? 'plus' : added ? 'delete' : 'plus'\"\r\n  >\r\n  </mat-icon>\r\n</button>\r\n\r\n<button\r\n  [id]=\"!isMobile ? 'hide-save-search-result-btn' : ''\"\r\n  igoStopPropagation\r\n  *ngIf=\"layer.meta.dataType === 'Feature' && saveSearchResultInLayer\"\r\n  mat-icon-button\r\n  tooltip-position=\"below\"\r\n  matTooltipShowDelay=\"500\"\r\n  [matTooltip]=\"addFeatureToLayerTooltip$ | async | translate\"\r\n  (click)=\"addFeatureToLayer()\"\r\n>\r\n  <mat-icon\r\n    aria-hidden=\"false\"\r\n    matBadge=\"icon\"\r\n    igoMatBadgeIcon=\"eye-off\"\r\n    [igoMatBadgeInverseColor]=\"true\"\r\n    [matBadgeHidden]=\"inRange$ | async\"\r\n    [matBadgeDisabled]=\"true\"\r\n    matBadgeSize=\"small\"\r\n    matBadgePosition=\"after\"\r\n    svgIcon=\"file-plus-outline\"\r\n  >\r\n  </mat-icon>\r\n</button>\r\n", styles: [":host #hide-save-search-result-btn{display:none}:host #show-save-search-result-btn{display:block}\n"] }]
+                    ], 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"] }]
         }], ctorParameters: () => [{ type: LayerService }, { type: i1$5.MatDialog }, { type: DataSourceService }, { type: i2$1.MediaService }], propDecorators: { layer: [{
                 type: Input
             }], store: [{
@@ -15961,7 +16019,7 @@ class SearchResultsComponent {
         return;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SearchResultsComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: SearchService }, { token: i1.ConfigService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: SearchResultsComponent, isStandalone: true, selector: "igo-search-results", inputs: { map: "map", store: "store", showIcons: "showIcons", mode: "mode", withZoomButton: "withZoomButton", tabsMode: "tabsMode", term: "term", settingsChange$: "settingsChange$", termSplitter: "termSplitter" }, outputs: { resultFocus: "resultFocus", resultUnfocus: "resultUnfocus", resultSelect: "resultSelect", moreResults: "moreResults", resultMouseenter: "resultMouseenter", resultMouseleave: "resultMouseleave" }, queries: [{ propertyName: "templateSearchToolbar", first: true, predicate: ["igoSearchItemToolbar"], descendants: true }], ngImport: i0, template: "<igo-list [navigation]=\"true\" *ngIf=\"tabsMode === false\">\r\n  <ng-template #groupTemplate ngFor let-group [ngForOf]=\"results$ | async\">\r\n    <igo-collapsible\r\n      [class]=\"group.source.getId()\"\r\n      *ngIf=\"mode === searchResultMode.Grouped; else flatTemplate\"\r\n      [title]=\"computeGroupTitle(group)\"\r\n      [collapsed]=\"collapsed[group.source.title]\"\r\n      (toggle)=\"collapsed[group.source.title] = $event\"\r\n    >\r\n      <ng-container\r\n        *ngTemplateOutlet=\"\r\n          storeItemTemplate;\r\n          context: { results: group.results }\r\n        \"\r\n      ></ng-container>\r\n    </igo-collapsible>\r\n\r\n    <ng-template #flatTemplate>\r\n      <ng-container\r\n        *ngTemplateOutlet=\"\r\n          storeItemTemplate;\r\n          context: { results: group.results }\r\n        \"\r\n      ></ng-container>\r\n    </ng-template>\r\n\r\n    <ng-template #storeItemTemplate let-results=\"results\">\r\n      <ng-template ngFor let-result [ngForOf]=\"results\">\r\n        <igo-search-results-item\r\n          igoListItem\r\n          color=\"accent\"\r\n          [map]=\"map\"\r\n          [result]=\"result\"\r\n          [showIcons]=\"showIcons\"\r\n          [withZoomButton]=\"withZoomButton\"\r\n          [focused]=\"store.state.get(result).focused\"\r\n          [selected]=\"store.state.get(result).selected\"\r\n          (focus)=\"resultFocus.emit(result)\"\r\n          (unfocus)=\"resultUnfocus.emit(result)\"\r\n          (select)=\"onResultSelect(result)\"\r\n          (mouseenter)=\"resultFocus.emit(result)\"\r\n          (mouseleave)=\"resultUnfocus.emit(result)\"\r\n        >\r\n          <ng-container\r\n            igoSearchItemToolbar\r\n            [ngTemplateOutlet]=\"templateSearchToolbar\"\r\n            [ngTemplateOutletContext]=\"{ result: result }\"\r\n          >\r\n          </ng-container>\r\n        </igo-search-results-item>\r\n      </ng-template>\r\n      <span\r\n        class=\"moreResults mat-typography\"\r\n        *ngIf=\"isMoreResults(group)\"\r\n        (click)=\"displayMoreResults(group)\"\r\n      >\r\n        <u>{{ 'igo.geo.search.displayMoreResults' | translate }}</u>\r\n      </span>\r\n    </ng-template>\r\n  </ng-template>\r\n</igo-list>\r\n\r\n<igo-list [navigation]=\"true\" *ngIf=\"tabsMode\">\r\n  <ng-container\r\n    *ngIf=\"\r\n      mode === searchResultMode.Grouped;\r\n      then tabsTemplate;\r\n      else flatTemplate\r\n    \"\r\n  ></ng-container>\r\n\r\n  <ng-template #tabsTemplate>\r\n    <mat-tab-group class=\"custom-tabs-view\" dynamicHeight>\r\n      <mat-tab\r\n        *ngFor=\"let group of results$ | async\"\r\n        [label]=\"computeGroupTitle(group)\"\r\n      >\r\n        <ng-container\r\n          *ngTemplateOutlet=\"storeItemTemplate; context: { group: group }\"\r\n        ></ng-container>\r\n      </mat-tab>\r\n    </mat-tab-group>\r\n  </ng-template>\r\n\r\n  <ng-template #flatTemplate>\r\n    <ng-template ngFor let-group [ngForOf]=\"results$ | async\">\r\n      <ng-container\r\n        *ngTemplateOutlet=\"storeItemTemplate; context: { group: group }\"\r\n      ></ng-container>\r\n    </ng-template>\r\n  </ng-template>\r\n\r\n  <ng-template #storeItemTemplate let-group=\"group\">\r\n    <ng-template ngFor let-result [ngForOf]=\"group.results\">\r\n      <igo-search-results-item\r\n        igoListItem\r\n        color=\"accent\"\r\n        [map]=\"map\"\r\n        [result]=\"result\"\r\n        [showIcons]=\"showIcons\"\r\n        [withZoomButton]=\"withZoomButton\"\r\n        [focused]=\"store.state.get(result).focused\"\r\n        [selected]=\"store.state.get(result).selected\"\r\n        (focus)=\"resultFocus.emit(result)\"\r\n        (unfocus)=\"resultUnfocus.emit(result)\"\r\n        (select)=\"onResultSelect(result)\"\r\n        (mouseenter)=\"resultFocus.emit(result)\"\r\n        (mouseleave)=\"resultUnfocus.emit(result)\"\r\n      >\r\n        <ng-container\r\n          igoSearchItemToolbar\r\n          [ngTemplateOutlet]=\"templateSearchToolbar\"\r\n          [ngTemplateOutletContext]=\"{ result: result }\"\r\n        >\r\n        </ng-container>\r\n      </igo-search-results-item>\r\n    </ng-template>\r\n    <span\r\n      class=\"moreResults mat-typography\"\r\n      *ngIf=\"isMoreResults(group)\"\r\n      (click)=\"displayMoreResults(group)\"\r\n    >\r\n      <u>{{ 'igo.geo.search.displayMoreResults' | translate }}</u>\r\n    </span>\r\n  </ng-template>\r\n</igo-list>\r\n", styles: [":host .moreResults{cursor:pointer;color:#00f;float:right;margin-right:10px;margin-top:5px}:host igo-list ::ng-deep mat-list{height:100%}:host igo-list ::ng-deep mat-list .custom-tabs-view .mat-mdc-tab-header-pagination{min-width:20px}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ListComponent, selector: "igo-list", inputs: ["navigation", "selection"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: CollapsibleComponent, selector: "igo-collapsible", inputs: ["title", "collapsed"], outputs: ["toggle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SearchResultsItemComponent, selector: "igo-search-results-item", inputs: ["result", "map", "showIcons", "withZoomButton"], outputs: ["zoomEvent"] }, { 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: 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: "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: SearchResultsComponent, isStandalone: true, selector: "igo-search-results", inputs: { map: "map", store: "store", showIcons: "showIcons", mode: "mode", withZoomButton: "withZoomButton", tabsMode: "tabsMode", term: "term", settingsChange$: "settingsChange$", termSplitter: "termSplitter" }, outputs: { resultFocus: "resultFocus", resultUnfocus: "resultUnfocus", resultSelect: "resultSelect", moreResults: "moreResults", resultMouseenter: "resultMouseenter", resultMouseleave: "resultMouseleave" }, queries: [{ propertyName: "templateSearchToolbar", first: true, predicate: ["igoSearchItemToolbar"], descendants: true }], ngImport: i0, template: "<igo-list [navigation]=\"true\" *ngIf=\"tabsMode === false\">\n  <ng-template #groupTemplate ngFor let-group [ngForOf]=\"results$ | async\">\n    <igo-collapsible\n      [class]=\"group.source.getId()\"\n      *ngIf=\"mode === searchResultMode.Grouped; else flatTemplate\"\n      [title]=\"computeGroupTitle(group)\"\n      [collapsed]=\"collapsed[group.source.title]\"\n      (toggle)=\"collapsed[group.source.title] = $event\"\n    >\n      <ng-container\n        *ngTemplateOutlet=\"\n          storeItemTemplate;\n          context: { results: group.results }\n        \"\n      ></ng-container>\n    </igo-collapsible>\n\n    <ng-template #flatTemplate>\n      <ng-container\n        *ngTemplateOutlet=\"\n          storeItemTemplate;\n          context: { results: group.results }\n        \"\n      ></ng-container>\n    </ng-template>\n\n    <ng-template #storeItemTemplate let-results=\"results\">\n      <ng-template ngFor let-result [ngForOf]=\"results\">\n        <igo-search-results-item\n          igoListItem\n          color=\"accent\"\n          [map]=\"map\"\n          [result]=\"result\"\n          [showIcons]=\"showIcons\"\n          [withZoomButton]=\"withZoomButton\"\n          [focused]=\"store.state.get(result).focused\"\n          [selected]=\"store.state.get(result).selected\"\n          (focus)=\"resultFocus.emit(result)\"\n          (unfocus)=\"resultUnfocus.emit(result)\"\n          (select)=\"onResultSelect(result)\"\n          (mouseenter)=\"resultFocus.emit(result)\"\n          (mouseleave)=\"resultUnfocus.emit(result)\"\n        >\n          <ng-container\n            igoSearchItemToolbar\n            [ngTemplateOutlet]=\"templateSearchToolbar\"\n            [ngTemplateOutletContext]=\"{ result: result }\"\n          >\n          </ng-container>\n        </igo-search-results-item>\n      </ng-template>\n      <span\n        class=\"moreResults mat-typography\"\n        *ngIf=\"isMoreResults(group)\"\n        (click)=\"displayMoreResults(group)\"\n      >\n        <u>{{ 'igo.geo.search.displayMoreResults' | translate }}</u>\n      </span>\n    </ng-template>\n  </ng-template>\n</igo-list>\n\n<igo-list [navigation]=\"true\" *ngIf=\"tabsMode\">\n  <ng-container\n    *ngIf=\"\n      mode === searchResultMode.Grouped;\n      then tabsTemplate;\n      else flatTemplate\n    \"\n  ></ng-container>\n\n  <ng-template #tabsTemplate>\n    <mat-tab-group class=\"custom-tabs-view\" dynamicHeight>\n      <mat-tab\n        *ngFor=\"let group of results$ | async\"\n        [label]=\"computeGroupTitle(group)\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"storeItemTemplate; context: { group: group }\"\n        ></ng-container>\n      </mat-tab>\n    </mat-tab-group>\n  </ng-template>\n\n  <ng-template #flatTemplate>\n    <ng-template ngFor let-group [ngForOf]=\"results$ | async\">\n      <ng-container\n        *ngTemplateOutlet=\"storeItemTemplate; context: { group: group }\"\n      ></ng-container>\n    </ng-template>\n  </ng-template>\n\n  <ng-template #storeItemTemplate let-group=\"group\">\n    <ng-template ngFor let-result [ngForOf]=\"group.results\">\n      <igo-search-results-item\n        igoListItem\n        color=\"accent\"\n        [map]=\"map\"\n        [result]=\"result\"\n        [showIcons]=\"showIcons\"\n        [withZoomButton]=\"withZoomButton\"\n        [focused]=\"store.state.get(result).focused\"\n        [selected]=\"store.state.get(result).selected\"\n        (focus)=\"resultFocus.emit(result)\"\n        (unfocus)=\"resultUnfocus.emit(result)\"\n        (select)=\"onResultSelect(result)\"\n        (mouseenter)=\"resultFocus.emit(result)\"\n        (mouseleave)=\"resultUnfocus.emit(result)\"\n      >\n        <ng-container\n          igoSearchItemToolbar\n          [ngTemplateOutlet]=\"templateSearchToolbar\"\n          [ngTemplateOutletContext]=\"{ result: result }\"\n        >\n        </ng-container>\n      </igo-search-results-item>\n    </ng-template>\n    <span\n      class=\"moreResults mat-typography\"\n      *ngIf=\"isMoreResults(group)\"\n      (click)=\"displayMoreResults(group)\"\n    >\n      <u>{{ 'igo.geo.search.displayMoreResults' | translate }}</u>\n    </span>\n  </ng-template>\n</igo-list>\n", styles: [":host .moreResults{cursor:pointer;color:#00f;float:right;margin-right:10px;margin-top:5px}:host igo-list ::ng-deep mat-list{height:100%}:host igo-list ::ng-deep mat-list .custom-tabs-view .mat-mdc-tab-header-pagination{min-width:20px}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ListComponent, selector: "igo-list", inputs: ["navigation", "selection"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: CollapsibleComponent, selector: "igo-collapsible", inputs: ["title", "collapsed"], outputs: ["toggle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SearchResultsItemComponent, selector: "igo-search-results-item", inputs: ["result", "map", "showIcons", "withZoomButton"], outputs: ["zoomEvent"] }, { 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: 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: "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: SearchResultsComponent, decorators: [{
             type: Component,
@@ -15976,7 +16034,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                         MatTabsModule,
                         AsyncPipe,
                         TranslateModule
-                    ], template: "<igo-list [navigation]=\"true\" *ngIf=\"tabsMode === false\">\r\n  <ng-template #groupTemplate ngFor let-group [ngForOf]=\"results$ | async\">\r\n    <igo-collapsible\r\n      [class]=\"group.source.getId()\"\r\n      *ngIf=\"mode === searchResultMode.Grouped; else flatTemplate\"\r\n      [title]=\"computeGroupTitle(group)\"\r\n      [collapsed]=\"collapsed[group.source.title]\"\r\n      (toggle)=\"collapsed[group.source.title] = $event\"\r\n    >\r\n      <ng-container\r\n        *ngTemplateOutlet=\"\r\n          storeItemTemplate;\r\n          context: { results: group.results }\r\n        \"\r\n      ></ng-container>\r\n    </igo-collapsible>\r\n\r\n    <ng-template #flatTemplate>\r\n      <ng-container\r\n        *ngTemplateOutlet=\"\r\n          storeItemTemplate;\r\n          context: { results: group.results }\r\n        \"\r\n      ></ng-container>\r\n    </ng-template>\r\n\r\n    <ng-template #storeItemTemplate let-results=\"results\">\r\n      <ng-template ngFor let-result [ngForOf]=\"results\">\r\n        <igo-search-results-item\r\n          igoListItem\r\n          color=\"accent\"\r\n          [map]=\"map\"\r\n          [result]=\"result\"\r\n          [showIcons]=\"showIcons\"\r\n          [withZoomButton]=\"withZoomButton\"\r\n          [focused]=\"store.state.get(result).focused\"\r\n          [selected]=\"store.state.get(result).selected\"\r\n          (focus)=\"resultFocus.emit(result)\"\r\n          (unfocus)=\"resultUnfocus.emit(result)\"\r\n          (select)=\"onResultSelect(result)\"\r\n          (mouseenter)=\"resultFocus.emit(result)\"\r\n          (mouseleave)=\"resultUnfocus.emit(result)\"\r\n        >\r\n          <ng-container\r\n            igoSearchItemToolbar\r\n            [ngTemplateOutlet]=\"templateSearchToolbar\"\r\n            [ngTemplateOutletContext]=\"{ result: result }\"\r\n          >\r\n          </ng-container>\r\n        </igo-search-results-item>\r\n      </ng-template>\r\n      <span\r\n        class=\"moreResults mat-typography\"\r\n        *ngIf=\"isMoreResults(group)\"\r\n        (click)=\"displayMoreResults(group)\"\r\n      >\r\n        <u>{{ 'igo.geo.search.displayMoreResults' | translate }}</u>\r\n      </span>\r\n    </ng-template>\r\n  </ng-template>\r\n</igo-list>\r\n\r\n<igo-list [navigation]=\"true\" *ngIf=\"tabsMode\">\r\n  <ng-container\r\n    *ngIf=\"\r\n      mode === searchResultMode.Grouped;\r\n      then tabsTemplate;\r\n      else flatTemplate\r\n    \"\r\n  ></ng-container>\r\n\r\n  <ng-template #tabsTemplate>\r\n    <mat-tab-group class=\"custom-tabs-view\" dynamicHeight>\r\n      <mat-tab\r\n        *ngFor=\"let group of results$ | async\"\r\n        [label]=\"computeGroupTitle(group)\"\r\n      >\r\n        <ng-container\r\n          *ngTemplateOutlet=\"storeItemTemplate; context: { group: group }\"\r\n        ></ng-container>\r\n      </mat-tab>\r\n    </mat-tab-group>\r\n  </ng-template>\r\n\r\n  <ng-template #flatTemplate>\r\n    <ng-template ngFor let-group [ngForOf]=\"results$ | async\">\r\n      <ng-container\r\n        *ngTemplateOutlet=\"storeItemTemplate; context: { group: group }\"\r\n      ></ng-container>\r\n    </ng-template>\r\n  </ng-template>\r\n\r\n  <ng-template #storeItemTemplate let-group=\"group\">\r\n    <ng-template ngFor let-result [ngForOf]=\"group.results\">\r\n      <igo-search-results-item\r\n        igoListItem\r\n        color=\"accent\"\r\n        [map]=\"map\"\r\n        [result]=\"result\"\r\n        [showIcons]=\"showIcons\"\r\n        [withZoomButton]=\"withZoomButton\"\r\n        [focused]=\"store.state.get(result).focused\"\r\n        [selected]=\"store.state.get(result).selected\"\r\n        (focus)=\"resultFocus.emit(result)\"\r\n        (unfocus)=\"resultUnfocus.emit(result)\"\r\n        (select)=\"onResultSelect(result)\"\r\n        (mouseenter)=\"resultFocus.emit(result)\"\r\n        (mouseleave)=\"resultUnfocus.emit(result)\"\r\n      >\r\n        <ng-container\r\n          igoSearchItemToolbar\r\n          [ngTemplateOutlet]=\"templateSearchToolbar\"\r\n          [ngTemplateOutletContext]=\"{ result: result }\"\r\n        >\r\n        </ng-container>\r\n      </igo-search-results-item>\r\n    </ng-template>\r\n    <span\r\n      class=\"moreResults mat-typography\"\r\n      *ngIf=\"isMoreResults(group)\"\r\n      (click)=\"displayMoreResults(group)\"\r\n    >\r\n      <u>{{ 'igo.geo.search.displayMoreResults' | translate }}</u>\r\n    </span>\r\n  </ng-template>\r\n</igo-list>\r\n", styles: [":host .moreResults{cursor:pointer;color:#00f;float:right;margin-right:10px;margin-top:5px}:host igo-list ::ng-deep mat-list{height:100%}:host igo-list ::ng-deep mat-list .custom-tabs-view .mat-mdc-tab-header-pagination{min-width:20px}\n"] }]
+                    ], template: "<igo-list [navigation]=\"true\" *ngIf=\"tabsMode === false\">\n  <ng-template #groupTemplate ngFor let-group [ngForOf]=\"results$ | async\">\n    <igo-collapsible\n      [class]=\"group.source.getId()\"\n      *ngIf=\"mode === searchResultMode.Grouped; else flatTemplate\"\n      [title]=\"computeGroupTitle(group)\"\n      [collapsed]=\"collapsed[group.source.title]\"\n      (toggle)=\"collapsed[group.source.title] = $event\"\n    >\n      <ng-container\n        *ngTemplateOutlet=\"\n          storeItemTemplate;\n          context: { results: group.results }\n        \"\n      ></ng-container>\n    </igo-collapsible>\n\n    <ng-template #flatTemplate>\n      <ng-container\n        *ngTemplateOutlet=\"\n          storeItemTemplate;\n          context: { results: group.results }\n        \"\n      ></ng-container>\n    </ng-template>\n\n    <ng-template #storeItemTemplate let-results=\"results\">\n      <ng-template ngFor let-result [ngForOf]=\"results\">\n        <igo-search-results-item\n          igoListItem\n          color=\"accent\"\n          [map]=\"map\"\n          [result]=\"result\"\n          [showIcons]=\"showIcons\"\n          [withZoomButton]=\"withZoomButton\"\n          [focused]=\"store.state.get(result).focused\"\n          [selected]=\"store.state.get(result).selected\"\n          (focus)=\"resultFocus.emit(result)\"\n          (unfocus)=\"resultUnfocus.emit(result)\"\n          (select)=\"onResultSelect(result)\"\n          (mouseenter)=\"resultFocus.emit(result)\"\n          (mouseleave)=\"resultUnfocus.emit(result)\"\n        >\n          <ng-container\n            igoSearchItemToolbar\n            [ngTemplateOutlet]=\"templateSearchToolbar\"\n            [ngTemplateOutletContext]=\"{ result: result }\"\n          >\n          </ng-container>\n        </igo-search-results-item>\n      </ng-template>\n      <span\n        class=\"moreResults mat-typography\"\n        *ngIf=\"isMoreResults(group)\"\n        (click)=\"displayMoreResults(group)\"\n      >\n        <u>{{ 'igo.geo.search.displayMoreResults' | translate }}</u>\n      </span>\n    </ng-template>\n  </ng-template>\n</igo-list>\n\n<igo-list [navigation]=\"true\" *ngIf=\"tabsMode\">\n  <ng-container\n    *ngIf=\"\n      mode === searchResultMode.Grouped;\n      then tabsTemplate;\n      else flatTemplate\n    \"\n  ></ng-container>\n\n  <ng-template #tabsTemplate>\n    <mat-tab-group class=\"custom-tabs-view\" dynamicHeight>\n      <mat-tab\n        *ngFor=\"let group of results$ | async\"\n        [label]=\"computeGroupTitle(group)\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"storeItemTemplate; context: { group: group }\"\n        ></ng-container>\n      </mat-tab>\n    </mat-tab-group>\n  </ng-template>\n\n  <ng-template #flatTemplate>\n    <ng-template ngFor let-group [ngForOf]=\"results$ | async\">\n      <ng-container\n        *ngTemplateOutlet=\"storeItemTemplate; context: { group: group }\"\n      ></ng-container>\n    </ng-template>\n  </ng-template>\n\n  <ng-template #storeItemTemplate let-group=\"group\">\n    <ng-template ngFor let-result [ngForOf]=\"group.results\">\n      <igo-search-results-item\n        igoListItem\n        color=\"accent\"\n        [map]=\"map\"\n        [result]=\"result\"\n        [showIcons]=\"showIcons\"\n        [withZoomButton]=\"withZoomButton\"\n        [focused]=\"store.state.get(result).focused\"\n        [selected]=\"store.state.get(result).selected\"\n        (focus)=\"resultFocus.emit(result)\"\n        (unfocus)=\"resultUnfocus.emit(result)\"\n        (select)=\"onResultSelect(result)\"\n        (mouseenter)=\"resultFocus.emit(result)\"\n        (mouseleave)=\"resultUnfocus.emit(result)\"\n      >\n        <ng-container\n          igoSearchItemToolbar\n          [ngTemplateOutlet]=\"templateSearchToolbar\"\n          [ngTemplateOutletContext]=\"{ result: result }\"\n        >\n        </ng-container>\n      </igo-search-results-item>\n    </ng-template>\n    <span\n      class=\"moreResults mat-typography\"\n      *ngIf=\"isMoreResults(group)\"\n      (click)=\"displayMoreResults(group)\"\n    >\n      <u>{{ 'igo.geo.search.displayMoreResults' | translate }}</u>\n    </span>\n  </ng-template>\n</igo-list>\n", styles: [":host .moreResults{cursor:pointer;color:#00f;float:right;margin-right:10px;margin-top:5px}:host igo-list ::ng-deep mat-list{height:100%}:host igo-list ::ng-deep mat-list .custom-tabs-view .mat-mdc-tab-header-pagination{min-width:20px}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: SearchService }, { type: i1.ConfigService }], propDecorators: { map: [{
                 type: Input
             }], store: [{
@@ -20008,7 +20066,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\">\r\n  <button\r\n    mat-icon-button\r\n    tooltip-position=\"below\"\r\n    matTooltipShowDelay=\"500\"\r\n    [matTooltip]=\"'igo.geo.directionsForm.addStop' | translate\"\r\n    color=\"primary\"\r\n    (click)=\"addStop()\"\r\n  >\r\n    <mat-icon svgIcon=\"map-marker-plus\"></mat-icon>\r\n  </button>\r\n  <button\r\n    mat-icon-button\r\n    tooltip-position=\"below\"\r\n    matTooltipShowDelay=\"500\"\r\n    *ngIf=\"\r\n      (routesFeatureStore.count$ | async) >= 1 ||\r\n      (stopsStore.count$ | async) >= 1\r\n    \"\r\n    [matTooltip]=\"'igo.geo.directionsForm.resetDirectionsBtn' | translate\"\r\n    color=\"warn\"\r\n    (click)=\"resetStops()\"\r\n  >\r\n    <mat-icon svgIcon=\"file-restore\"></mat-icon>\r\n  </button>\r\n  <button\r\n    mat-icon-button\r\n    tooltip-position=\"below\"\r\n    matTooltipShowDelay=\"500\"\r\n    *ngIf=\"(routesFeatureStore.count$ | async) >= 1\"\r\n    (click)=\"zoomRoute()\"\r\n    [matTooltip]=\"'igo.geo.directionsForm.zoomRoute' | translate\"\r\n    color=\"primary\"\r\n  >\r\n    <mat-icon svgIcon=\"magnify-plus-outline\"></mat-icon>\r\n  </button>\r\n  <button\r\n    mat-icon-button\r\n    tooltip-position=\"below\"\r\n    matTooltipShowDelay=\"500\"\r\n    *ngIf=\"(routesFeatureStore.count$ | async) >= 1\"\r\n    (click)=\"copyDirectionsToClipboard()\"\r\n    [matTooltip]=\"'igo.geo.directionsForm.copy' | translate\"\r\n    color=\"primary\"\r\n  >\r\n    <mat-icon svgIcon=\"content-copy\"></mat-icon>\r\n  </button>\r\n  <button\r\n    mat-icon-button\r\n    tooltip-position=\"below\"\r\n    matTooltipShowDelay=\"500\"\r\n    *ngIf=\"(routesFeatureStore.count$ | async) >= 1\"\r\n    (click)=\"copyLinkToClipboard()\"\r\n    [matTooltip]=\"'igo.geo.directionsForm.link' | translate\"\r\n    color=\"primary\"\r\n  >\r\n    <mat-icon svgIcon=\"link\"></mat-icon>\r\n  </button>\r\n\r\n  <button\r\n    mat-icon-button\r\n    tooltip-position=\"below\"\r\n    matTooltipShowDelay=\"500\"\r\n    *ngIf=\"(routesFeatureStore.count$ | async) >= 1\"\r\n    (click)=\"printDirections()\"\r\n    [disabled]=\"disabled$ | async\"\r\n    [matTooltip]=\"'igo.geo.directionsForm.print' | translate\"\r\n    color=\"primary\"\r\n  >\r\n    <mat-icon svgIcon=\"printer\"></mat-icon>\r\n  </button>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "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 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" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: DirectionsButtonsComponent, decorators: [{
             type: Component,
@@ -20019,7 +20077,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                         NgIf,
                         AsyncPipe,
                         TranslateModule
-                    ], template: "<div class=\"igo-form-button-group\">\r\n  <button\r\n    mat-icon-button\r\n    tooltip-position=\"below\"\r\n    matTooltipShowDelay=\"500\"\r\n    [matTooltip]=\"'igo.geo.directionsForm.addStop' | translate\"\r\n    color=\"primary\"\r\n    (click)=\"addStop()\"\r\n  >\r\n    <mat-icon svgIcon=\"map-marker-plus\"></mat-icon>\r\n  </button>\r\n  <button\r\n    mat-icon-button\r\n    tooltip-position=\"below\"\r\n    matTooltipShowDelay=\"500\"\r\n    *ngIf=\"\r\n      (routesFeatureStore.count$ | async) >= 1 ||\r\n      (stopsStore.count$ | async) >= 1\r\n    \"\r\n    [matTooltip]=\"'igo.geo.directionsForm.resetDirectionsBtn' | translate\"\r\n    color=\"warn\"\r\n    (click)=\"resetStops()\"\r\n  >\r\n    <mat-icon svgIcon=\"file-restore\"></mat-icon>\r\n  </button>\r\n  <button\r\n    mat-icon-button\r\n    tooltip-position=\"below\"\r\n    matTooltipShowDelay=\"500\"\r\n    *ngIf=\"(routesFeatureStore.count$ | async) >= 1\"\r\n    (click)=\"zoomRoute()\"\r\n    [matTooltip]=\"'igo.geo.directionsForm.zoomRoute' | translate\"\r\n    color=\"primary\"\r\n  >\r\n    <mat-icon svgIcon=\"magnify-plus-outline\"></mat-icon>\r\n  </button>\r\n  <button\r\n    mat-icon-button\r\n    tooltip-position=\"below\"\r\n    matTooltipShowDelay=\"500\"\r\n    *ngIf=\"(routesFeatureStore.count$ | async) >= 1\"\r\n    (click)=\"copyDirectionsToClipboard()\"\r\n    [matTooltip]=\"'igo.geo.directionsForm.copy' | translate\"\r\n    color=\"primary\"\r\n  >\r\n    <mat-icon svgIcon=\"content-copy\"></mat-icon>\r\n  </button>\r\n  <button\r\n    mat-icon-button\r\n    tooltip-position=\"below\"\r\n    matTooltipShowDelay=\"500\"\r\n    *ngIf=\"(routesFeatureStore.count$ | async) >= 1\"\r\n    (click)=\"copyLinkToClipboard()\"\r\n    [matTooltip]=\"'igo.geo.directionsForm.link' | translate\"\r\n    color=\"primary\"\r\n  >\r\n    <mat-icon svgIcon=\"link\"></mat-icon>\r\n  </button>\r\n\r\n  <button\r\n    mat-icon-button\r\n    tooltip-position=\"below\"\r\n    matTooltipShowDelay=\"500\"\r\n    *ngIf=\"(routesFeatureStore.count$ | async) >= 1\"\r\n    (click)=\"printDirections()\"\r\n    [disabled]=\"disabled$ | async\"\r\n    [matTooltip]=\"'igo.geo.directionsForm.print' | translate\"\r\n    color=\"primary\"\r\n  >\r\n    <mat-icon svgIcon=\"printer\"></mat-icon>\r\n  </button>\r\n</div>\r\n" }]
+                    ], 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" }]
         }], ctorParameters: () => [{ type: i1$2.LanguageService }, { type: i2$3.MessageService }, { type: i3$5.RouteService, decorators: [{
                     type: Optional
                 }] }, { type: DirectionsService }], propDecorators: { contextUri: [{
@@ -20183,7 +20241,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)\">\r\n  <div\r\n    touchleave\r\n    (touchenter)=\"onStopEnter(stop)\"\r\n    (touchleave)=\"onStopLeave()\"\r\n    (mouseover)=\"onStopEnter(stop)\"\r\n    (mouseleave)=\"onStopLeave()\"\r\n    (cdkDragStarted)=\"stopIsDragged = true\"\r\n    (cdkDragEnded)=\"stopIsDragged = false\"\r\n    cdkDragLockAxis=\"y\"\r\n    class=\"stop-box\"\r\n    *ngFor=\"let stop of stopsStore.view.all$() | async; let i = index\"\r\n    cdkDrag\r\n  >\r\n    <div [ngClass]=\"getNgClass(stop)\">\r\n      <mat-form-field subscriptSizing=\"dynamic\">\r\n        <mat-label>{{ getPlaceholder(stop) }}</mat-label>\r\n        <input\r\n          id=\"{{ stop.id }}\"\r\n          type=\"text\"\r\n          [placeholder]=\"getPlaceholder(stop)\"\r\n          matTooltipShowDelay=\"500\"\r\n          [matTooltip]=\"stop.text\"\r\n          aria-label=\"Number\"\r\n          matInput\r\n          (focus)=\"onInputFocus(stop)\"\r\n          [(ngModel)]=\"stop.text\"\r\n          (keyup)=\"setStopText($event, stop)\"\r\n          (keydown.enter)=\"$event.preventDefault()\"\r\n          [matAutocomplete]=\"auto\"\r\n        />\r\n        <button\r\n          *ngIf=\"\r\n            (stop.text || stop.coordinates) &&\r\n            stopWithHover &&\r\n            stop.id === stopWithHover.id\r\n          \"\r\n          mat-icon-button\r\n          matSuffix\r\n          matTooltipShowDelay=\"500\"\r\n          [matTooltip]=\"'igo.geo.directionsForm.clearStop' | translate\"\r\n          color=\"warn\"\r\n          aria-label=\"Clear\"\r\n          (click)=\"clearStop(stop)\"\r\n        >\r\n          <mat-icon svgIcon=\"close\"></mat-icon>\r\n        </button>\r\n\r\n        <mat-autocomplete\r\n          [displayWith]=\"getOptionText\"\r\n          #auto=\"matAutocomplete\"\r\n          (optionSelected)=\"chooseProposal($event, stop)\"\r\n        >\r\n          <mat-optgroup\r\n            *ngFor=\"let source of stop.searchProposals\"\r\n            [label]=\"source.source.title\"\r\n            [disabled]=\"source.source.enabled === false\"\r\n          >\r\n            <mat-option\r\n              *ngFor=\"let result of source.results\"\r\n              [value]=\"result\"\r\n              matTooltipShowDelay=\"500\"\r\n              [matTooltip]=\"result.meta ? result.meta.title : ''\"\r\n            >\r\n              {{ result.meta ? result.meta.title : '' }}\r\n            </mat-option>\r\n          </mat-optgroup>\r\n        </mat-autocomplete>\r\n      </mat-form-field>\r\n    </div>\r\n\r\n    <div\r\n      *ngIf=\"!stopIsDragged && stopWithHover && stop.id === stopWithHover.id\"\r\n      class=\"igo-form-button-group\"\r\n    >\r\n      <button\r\n        class=\"swipe-vertical\"\r\n        cdkDragHandle\r\n        mat-icon-button\r\n        tooltip-position=\"below\"\r\n        matTooltipShowDelay=\"500\"\r\n        [matTooltip]=\"'igo.geo.directionsForm.moveStop' | translate\"\r\n        color=\"primary\"\r\n      >\r\n        <mat-icon svgIcon=\"gesture-swipe-vertical\"></mat-icon>\r\n      </button>\r\n\r\n      <button\r\n        *ngIf=\"(stopsStore.count$ | async) > 2\"\r\n        mat-icon-button\r\n        tooltip-position=\"below\"\r\n        matTooltipShowDelay=\"500\"\r\n        [matTooltip]=\"'igo.geo.directionsForm.removeStop' | translate\"\r\n        color=\"warn\"\r\n        (click)=\"removeStop(stop)\"\r\n      >\r\n        <mat-icon svgIcon=\"delete\"></mat-icon>\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host .igo-input-container{display:flex;width:100%}:host .igo-input-container mat-form-field{flex:1}:host .igo-form-button-group{display:flex;align-items:center;padding-left:12px}:host .stops-list{max-width:100%;min-height:60px;display:block;background:#fff;border-radius:4px;overflow:hidden;padding:20px 10px}:host .swipe-vertical{cursor:move}:host .stop-box{color:#000000de;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;background:#fff}:host .stop-box:not(:last-child){margin-bottom:16px}:host .cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}:host .cdk-drag-placeholder{opacity:0}:host .cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}:host .stops-list.cdk-drop-list-dragging .stop-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "directive", type: 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 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" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: DirectionsInputsComponent, decorators: [{
             type: Component,
@@ -20204,7 +20262,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                         CdkDragHandle,
                         AsyncPipe,
                         TranslateModule
-                    ], template: "<div cdkDropList class=\"stops-list\" (cdkDropListDropped)=\"drop($event)\">\r\n  <div\r\n    touchleave\r\n    (touchenter)=\"onStopEnter(stop)\"\r\n    (touchleave)=\"onStopLeave()\"\r\n    (mouseover)=\"onStopEnter(stop)\"\r\n    (mouseleave)=\"onStopLeave()\"\r\n    (cdkDragStarted)=\"stopIsDragged = true\"\r\n    (cdkDragEnded)=\"stopIsDragged = false\"\r\n    cdkDragLockAxis=\"y\"\r\n    class=\"stop-box\"\r\n    *ngFor=\"let stop of stopsStore.view.all$() | async; let i = index\"\r\n    cdkDrag\r\n  >\r\n    <div [ngClass]=\"getNgClass(stop)\">\r\n      <mat-form-field subscriptSizing=\"dynamic\">\r\n        <mat-label>{{ getPlaceholder(stop) }}</mat-label>\r\n        <input\r\n          id=\"{{ stop.id }}\"\r\n          type=\"text\"\r\n          [placeholder]=\"getPlaceholder(stop)\"\r\n          matTooltipShowDelay=\"500\"\r\n          [matTooltip]=\"stop.text\"\r\n          aria-label=\"Number\"\r\n          matInput\r\n          (focus)=\"onInputFocus(stop)\"\r\n          [(ngModel)]=\"stop.text\"\r\n          (keyup)=\"setStopText($event, stop)\"\r\n          (keydown.enter)=\"$event.preventDefault()\"\r\n          [matAutocomplete]=\"auto\"\r\n        />\r\n        <button\r\n          *ngIf=\"\r\n            (stop.text || stop.coordinates) &&\r\n            stopWithHover &&\r\n            stop.id === stopWithHover.id\r\n          \"\r\n          mat-icon-button\r\n          matSuffix\r\n          matTooltipShowDelay=\"500\"\r\n          [matTooltip]=\"'igo.geo.directionsForm.clearStop' | translate\"\r\n          color=\"warn\"\r\n          aria-label=\"Clear\"\r\n          (click)=\"clearStop(stop)\"\r\n        >\r\n          <mat-icon svgIcon=\"close\"></mat-icon>\r\n        </button>\r\n\r\n        <mat-autocomplete\r\n          [displayWith]=\"getOptionText\"\r\n          #auto=\"matAutocomplete\"\r\n          (optionSelected)=\"chooseProposal($event, stop)\"\r\n        >\r\n          <mat-optgroup\r\n            *ngFor=\"let source of stop.searchProposals\"\r\n            [label]=\"source.source.title\"\r\n            [disabled]=\"source.source.enabled === false\"\r\n          >\r\n            <mat-option\r\n              *ngFor=\"let result of source.results\"\r\n              [value]=\"result\"\r\n              matTooltipShowDelay=\"500\"\r\n              [matTooltip]=\"result.meta ? result.meta.title : ''\"\r\n            >\r\n              {{ result.meta ? result.meta.title : '' }}\r\n            </mat-option>\r\n          </mat-optgroup>\r\n        </mat-autocomplete>\r\n      </mat-form-field>\r\n    </div>\r\n\r\n    <div\r\n      *ngIf=\"!stopIsDragged && stopWithHover && stop.id === stopWithHover.id\"\r\n      class=\"igo-form-button-group\"\r\n    >\r\n      <button\r\n        class=\"swipe-vertical\"\r\n        cdkDragHandle\r\n        mat-icon-button\r\n        tooltip-position=\"below\"\r\n        matTooltipShowDelay=\"500\"\r\n        [matTooltip]=\"'igo.geo.directionsForm.moveStop' | translate\"\r\n        color=\"primary\"\r\n      >\r\n        <mat-icon svgIcon=\"gesture-swipe-vertical\"></mat-icon>\r\n      </button>\r\n\r\n      <button\r\n        *ngIf=\"(stopsStore.count$ | async) > 2\"\r\n        mat-icon-button\r\n        tooltip-position=\"below\"\r\n        matTooltipShowDelay=\"500\"\r\n        [matTooltip]=\"'igo.geo.directionsForm.removeStop' | translate\"\r\n        color=\"warn\"\r\n        (click)=\"removeStop(stop)\"\r\n      >\r\n        <mat-icon svgIcon=\"delete\"></mat-icon>\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host .igo-input-container{display:flex;width:100%}:host .igo-input-container mat-form-field{flex:1}:host .igo-form-button-group{display:flex;align-items:center;padding-left:12px}:host .stops-list{max-width:100%;min-height:60px;display:block;background:#fff;border-radius:4px;overflow:hidden;padding:20px 10px}:host .swipe-vertical{cursor:move}:host .stop-box{color:#000000de;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;background:#fff}:host .stop-box:not(:last-child){margin-bottom:16px}:host .cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}:host .cdk-drag-placeholder{opacity:0}:host .cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}:host .stops-list.cdk-drop-list-dragging .stop-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"] }]
+                    ], 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"] }]
         }], ctorParameters: () => [{ type: i1$2.LanguageService }], propDecorators: { stopsStore: [{
                 type: Input
             }], stopsFeatureStore: [{
@@ -20312,7 +20370,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\">\r\n  <mat-form-field *ngIf=\"directions && directions.length > 1\">\r\n    <mat-label>{{\r\n      'igo.geo.directionsForm.drivingOptions' | translate\r\n    }}</mat-label>\r\n    <mat-select\r\n      placeholder=\"{{ 'igo.geo.directionsForm.drivingOptions' | translate }}\"\r\n      (selectionChange)=\"changeRoute()\"\r\n      [(ngModel)]=\"activeDirection\"\r\n    >\r\n      <mat-option\r\n        *ngFor=\"let direction of directions; let cnt = index\"\r\n        [value]=\"direction\"\r\n      >\r\n        Option {{ cnt + 1 }} : {{ formatDistance(direction.distance) }} ({{\r\n          formatDuration(direction.duration)\r\n        }})\r\n      </mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n\r\n  <mat-divider *ngIf=\"directions && directions.length === 0\"></mat-divider>\r\n\r\n  <mat-list (mouseleave)=\"onStepsListBlur()\">\r\n    <h2 mat-header class=\"igo-route-title\">{{ activeDirection.title }}</h2>\r\n    <span class=\"mat-caption\">\r\n      {{ formatDistance(activeDirection.distance) }},\r\n      {{ formatDuration(activeDirection.duration) }}\r\n    </span>\r\n    <mat-list-item\r\n      class=\"igo-steps\"\r\n      (mouseenter)=\"showSegment(step)\"\r\n      (click)=\"showSegment(step, true)\"\r\n      *ngFor=\"let step of activeDirection.steps; let cnt = index\"\r\n      igoListItem\r\n    >\r\n      <mat-icon\r\n        [ngClass]=\"formatStep(step, cnt).cssClass\"\r\n        matListItemIcon\r\n        svgIcon=\"{{ formatStep(step, cnt).image }}\"\r\n      >\r\n      </mat-icon>\r\n\r\n      <span class=\"igo-step-text\">\r\n        {{ cnt + 1 }}. {{ formatStep(step, cnt).instruction }}\r\n      </span>\r\n      <span matListItemMeta>\r\n        {{ formatDistance(step.distance) }}\r\n      </span>\r\n    </mat-list-item>\r\n\r\n    <mat-divider></mat-divider>\r\n  </mat-list>\r\n</div>\r\n", styles: [".igo-input-container{width:100%;padding:20px 10px;box-sizing:border-box}.igo-input-container mat-form-field{width:70%}.igo-route-title{font-weight:700}.igo-steps{cursor:pointer;padding:35px 0}.igo-steps .igo-step-text{overflow-wrap:break-word;word-wrap:break-word;white-space:pre-wrap}.mat-mdc-list-item{word-wrap:break-word!important;white-space:pre-wrap!important}.rotate-90{-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\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" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: DirectionsResultsComponent, decorators: [{
             type: Component,
@@ -20328,7 +20386,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                         MatIconModule,
                         NgClass,
                         TranslateModule
-                    ], template: "<div class=\"igo-input-container\" *ngIf=\"directions && activeDirection\">\r\n  <mat-form-field *ngIf=\"directions && directions.length > 1\">\r\n    <mat-label>{{\r\n      'igo.geo.directionsForm.drivingOptions' | translate\r\n    }}</mat-label>\r\n    <mat-select\r\n      placeholder=\"{{ 'igo.geo.directionsForm.drivingOptions' | translate }}\"\r\n      (selectionChange)=\"changeRoute()\"\r\n      [(ngModel)]=\"activeDirection\"\r\n    >\r\n      <mat-option\r\n        *ngFor=\"let direction of directions; let cnt = index\"\r\n        [value]=\"direction\"\r\n      >\r\n        Option {{ cnt + 1 }} : {{ formatDistance(direction.distance) }} ({{\r\n          formatDuration(direction.duration)\r\n        }})\r\n      </mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n\r\n  <mat-divider *ngIf=\"directions && directions.length === 0\"></mat-divider>\r\n\r\n  <mat-list (mouseleave)=\"onStepsListBlur()\">\r\n    <h2 mat-header class=\"igo-route-title\">{{ activeDirection.title }}</h2>\r\n    <span class=\"mat-caption\">\r\n      {{ formatDistance(activeDirection.distance) }},\r\n      {{ formatDuration(activeDirection.duration) }}\r\n    </span>\r\n    <mat-list-item\r\n      class=\"igo-steps\"\r\n      (mouseenter)=\"showSegment(step)\"\r\n      (click)=\"showSegment(step, true)\"\r\n      *ngFor=\"let step of activeDirection.steps; let cnt = index\"\r\n      igoListItem\r\n    >\r\n      <mat-icon\r\n        [ngClass]=\"formatStep(step, cnt).cssClass\"\r\n        matListItemIcon\r\n        svgIcon=\"{{ formatStep(step, cnt).image }}\"\r\n      >\r\n      </mat-icon>\r\n\r\n      <span class=\"igo-step-text\">\r\n        {{ cnt + 1 }}. {{ formatStep(step, cnt).instruction }}\r\n      </span>\r\n      <span matListItemMeta>\r\n        {{ formatDistance(step.distance) }}\r\n      </span>\r\n    </mat-list-item>\r\n\r\n    <mat-divider></mat-divider>\r\n  </mat-list>\r\n</div>\r\n", styles: [".igo-input-container{width:100%;padding:20px 10px;box-sizing:border-box}.igo-input-container mat-form-field{width:70%}.igo-route-title{font-weight:700}.igo-steps{cursor:pointer;padding:35px 0}.igo-steps .igo-step-text{overflow-wrap:break-word;word-wrap:break-word;white-space:pre-wrap}.mat-mdc-list-item{word-wrap:break-word!important;white-space:pre-wrap!important}.rotate-90{-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\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"] }]
         }], ctorParameters: () => [{ type: i1$2.LanguageService }, { type: i0.ChangeDetectorRef }], propDecorators: { routesFeatureStore: [{
                 type: Input
             }], stepFeatureStore: [{
@@ -20517,7 +20575,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\r\n  *ngIf=\"baseLayers.length > 0\"\r\n  class=\"igo-baselayers-switcher-container\"\r\n  [ngClass]=\"{ 'container-expand': expand }\"\r\n  [@baseLayerSwitcherState]=\"\r\n    expand ? 'expand' : useStaticIcon ? 'collapseIcon' : 'collapseMap'\r\n  \"\r\n  (@baseLayerSwitcherState.start)=\"showButton = false\"\r\n  (@baseLayerSwitcherState.done)=\"showButton = true\"\r\n  (click)=\"collapseOrExpand()\"\r\n>\r\n  <div\r\n    *ngIf=\"useStaticIcon && !expand && showButton\"\r\n    class=\"igo-baselayers-switcher-button-container\"\r\n  >\r\n    <button\r\n      mat-icon-button\r\n      [matTooltip]=\"'igo.geo.mapButtons.baselayerSwitcher' | translate\"\r\n      matTooltipPosition=\"right\"\r\n      color=\"primary\"\r\n    >\r\n      <mat-icon svgIcon=\"image-multiple\"></mat-icon>\r\n    </button>\r\n  </div>\r\n\r\n  <div class=\"basemap-list\">\r\n    <igo-mini-basemap\r\n      *ngFor=\"let baseLayer of baseLayers; let i = index\"\r\n      [map]=\"map\"\r\n      [baseLayer]=\"baseLayer\"\r\n      [title]=\"\r\n        baseLayers.length > 2 && !expand\r\n          ? ('igo.geo.baselayersSwitcher.title' | translate)\r\n          : baseLayer.title\r\n      \"\r\n      [display]=\"expand || (i === 0 && !useStaticIcon)\"\r\n      [disabled]=\"!expand && baseLayers.length > 1\"\r\n    >\r\n    </igo-mini-basemap>\r\n  </div>\r\n\r\n  <div *ngIf=\"hasMoreThanTwo\" class=\"more-baselayers\">\r\n    <mat-icon\r\n      class=\"material-icons mat-icon\"\r\n      color=\"primary\"\r\n      svgIcon=\"menu-down\"\r\n    ></mat-icon>\r\n  </div>\r\n</div>\r\n", styles: [":host button{border-radius:0!important}:host button .mat-ripple,:host button .mdc-icon-button__ripple{border-radius:0!important}.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 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()] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: BaseLayersSwitcherComponent, decorators: [{
             type: Component,
@@ -20530,7 +20588,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                         NgFor,
                         MiniBaseMapComponent,
                         TranslateModule
-                    ], template: "<div\r\n  *ngIf=\"baseLayers.length > 0\"\r\n  class=\"igo-baselayers-switcher-container\"\r\n  [ngClass]=\"{ 'container-expand': expand }\"\r\n  [@baseLayerSwitcherState]=\"\r\n    expand ? 'expand' : useStaticIcon ? 'collapseIcon' : 'collapseMap'\r\n  \"\r\n  (@baseLayerSwitcherState.start)=\"showButton = false\"\r\n  (@baseLayerSwitcherState.done)=\"showButton = true\"\r\n  (click)=\"collapseOrExpand()\"\r\n>\r\n  <div\r\n    *ngIf=\"useStaticIcon && !expand && showButton\"\r\n    class=\"igo-baselayers-switcher-button-container\"\r\n  >\r\n    <button\r\n      mat-icon-button\r\n      [matTooltip]=\"'igo.geo.mapButtons.baselayerSwitcher' | translate\"\r\n      matTooltipPosition=\"right\"\r\n      color=\"primary\"\r\n    >\r\n      <mat-icon svgIcon=\"image-multiple\"></mat-icon>\r\n    </button>\r\n  </div>\r\n\r\n  <div class=\"basemap-list\">\r\n    <igo-mini-basemap\r\n      *ngFor=\"let baseLayer of baseLayers; let i = index\"\r\n      [map]=\"map\"\r\n      [baseLayer]=\"baseLayer\"\r\n      [title]=\"\r\n        baseLayers.length > 2 && !expand\r\n          ? ('igo.geo.baselayersSwitcher.title' | translate)\r\n          : baseLayer.title\r\n      \"\r\n      [display]=\"expand || (i === 0 && !useStaticIcon)\"\r\n      [disabled]=\"!expand && baseLayers.length > 1\"\r\n    >\r\n    </igo-mini-basemap>\r\n  </div>\r\n\r\n  <div *ngIf=\"hasMoreThanTwo\" class=\"more-baselayers\">\r\n    <mat-icon\r\n      class=\"material-icons mat-icon\"\r\n      color=\"primary\"\r\n      svgIcon=\"menu-down\"\r\n    ></mat-icon>\r\n  </div>\r\n</div>\r\n", styles: [":host button{border-radius:0!important}:host button .mat-ripple,:host button .mdc-icon-button__ripple{border-radius:0!important}.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 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"] }]
         }], ctorParameters: () => [{ type: i2$1.MediaService }], propDecorators: { map: [{
                 type: Input
             }], useStaticIcon: [{
@@ -20582,7 +20640,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\">\r\n  <button\r\n    mat-icon-button\r\n    [matTooltip]=\"\r\n      map.geolocationController.tracking\r\n        ? ('igo.geo.mapButtons.geolocateInactive' | translate)\r\n        : ('igo.geo.mapButtons.geolocate' | translate)\r\n    \"\r\n    matTooltipPosition=\"left\"\r\n    [color]=\"color\"\r\n    (click)=\"onGeolocationClick()\"\r\n  >\r\n    <mat-icon svgIcon=\"{{ icon$ | async }}\"></mat-icon>\r\n  </button>\r\n</div>\r\n", styles: [":host button{border-radius:0!important}:host button .mat-ripple,:host button .mdc-icon-button__ripple{border-radius:0!important}:host .igo-geolocate-button-container{width:40px;background-color:#fff}:host .igo-geolocate-button-container:hover{background-color:#efefef}\n"], dependencies: [{ kind: "directive", type: 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 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" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: GeolocateButtonComponent, decorators: [{
             type: Component,
@@ -20593,7 +20651,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\">\r\n  <button\r\n    mat-icon-button\r\n    [matTooltip]=\"\r\n      map.geolocationController.tracking\r\n        ? ('igo.geo.mapButtons.geolocateInactive' | translate)\r\n        : ('igo.geo.mapButtons.geolocate' | translate)\r\n    \"\r\n    matTooltipPosition=\"left\"\r\n    [color]=\"color\"\r\n    (click)=\"onGeolocationClick()\"\r\n  >\r\n    <mat-icon svgIcon=\"{{ icon$ | async }}\"></mat-icon>\r\n  </button>\r\n</div>\r\n", styles: [":host button{border-radius:0!important}:host button .mat-ripple,:host button .mdc-icon-button__ripple{border-radius:0!important}:host .igo-geolocate-button-container{width:40px;background-color:#fff}:host .igo-geolocate-button-container:hover{background-color:#efefef}\n"] }]
+                    ], 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"] }]
         }], ctorParameters: () => [{ type: i1.ConfigService }], propDecorators: { map: [{
                 type: Input
             }], color: [{
@@ -22228,7 +22286,7 @@ class DirectionsComponent {
             : ol.removeInteraction(interaction));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: DirectionsComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$2.LanguageService }, { token: DirectionsService }, { token: SearchService }, { token: QueryService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: DirectionsComponent, isStandalone: true, selector: "igo-directions", inputs: { contextUri: "contextUri", stopsStore: "stopsStore", stopsFeatureStore: "stopsFeatureStore", routesFeatureStore: "routesFeatureStore", stepFeatureStore: "stepFeatureStore", debounce: "debounce", length: "length", coordRoundedDecimals: "coordRoundedDecimals", zoomToActiveRoute$: "zoomToActiveRoute$" }, ngImport: i0, template: "<div class=\"directions-options\">\r\n  <mat-slide-toggle\r\n    [checked]=\"directionControlIsActive\"\r\n    [labelPosition]=\"'before'\"\r\n    (change)=\"onToggleDirectionsControl($event.checked)\"\r\n  >\r\n    {{ 'igo.geo.directionsForm.toggleActive' | translate }}\r\n  </mat-slide-toggle>\r\n</div>\r\n\r\n<igo-directions-buttons\r\n  [stepFeatureStore]=\"stepFeatureStore\"\r\n  [contextUri]=\"contextUri\"\r\n  [zoomToActiveRoute$]=\"zoomToActiveRoute$\"\r\n  [routesFeatureStore]=\"routesFeatureStore\"\r\n  [stopsStore]=\"stopsStore\"\r\n></igo-directions-buttons>\r\n\r\n<igo-directions-inputs\r\n  (stopInputHasFocus)=\"onStopInputHasFocusChange($event)\"\r\n  [coordRoundedDecimals]=\"coordRoundedDecimals\"\r\n  [projection]=\"projection\"\r\n  [stopsFeatureStore]=\"stopsFeatureStore\"\r\n  [stopsStore]=\"stopsStore\"\r\n  [debounce]=\"debounce\"\r\n  [length]=\"length\"\r\n></igo-directions-inputs>\r\n\r\n<igo-directions-results\r\n  [stepFeatureStore]=\"stepFeatureStore\"\r\n  [routesFeatureStore]=\"routesFeatureStore\"\r\n></igo-directions-results>\r\n", styles: [".directions-options mat-slide-toggle{width:100%;padding:10px}.directions-options mat-slide-toggle ::ng-deep .mdc-form-field{width:100%}.directions-options mat-slide-toggle ::ng-deep .mdc-label{margin-left:0;width:calc(100% - 60px)}\n"], dependencies: [{ kind: "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: "component", type: DirectionsButtonsComponent, selector: "igo-directions-buttons", inputs: ["contextUri", "zoomToActiveRoute$", "stopsStore", "routesFeatureStore", "stepFeatureStore"] }, { kind: "component", type: DirectionsInputsComponent, selector: "igo-directions-inputs", inputs: ["stopsStore", "stopsFeatureStore", "projection", "coordRoundedDecimals", "debounce", "length"], outputs: ["stopInputHasFocus"] }, { kind: "component", type: DirectionsResultsComponent, selector: "igo-directions-results", inputs: ["routesFeatureStore", "stepFeatureStore"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: DirectionsComponent, isStandalone: true, selector: "igo-directions", inputs: { contextUri: "contextUri", stopsStore: "stopsStore", stopsFeatureStore: "stopsFeatureStore", routesFeatureStore: "routesFeatureStore", stepFeatureStore: "stepFeatureStore", debounce: "debounce", length: "length", coordRoundedDecimals: "coordRoundedDecimals", zoomToActiveRoute$: "zoomToActiveRoute$" }, ngImport: i0, template: "<div class=\"directions-options\">\n  <mat-slide-toggle\n    [checked]=\"directionControlIsActive\"\n    [labelPosition]=\"'before'\"\n    (change)=\"onToggleDirectionsControl($event.checked)\"\n  >\n    {{ 'igo.geo.directionsForm.toggleActive' | translate }}\n  </mat-slide-toggle>\n</div>\n\n<igo-directions-buttons\n  [stepFeatureStore]=\"stepFeatureStore\"\n  [contextUri]=\"contextUri\"\n  [zoomToActiveRoute$]=\"zoomToActiveRoute$\"\n  [routesFeatureStore]=\"routesFeatureStore\"\n  [stopsStore]=\"stopsStore\"\n></igo-directions-buttons>\n\n<igo-directions-inputs\n  (stopInputHasFocus)=\"onStopInputHasFocusChange($event)\"\n  [coordRoundedDecimals]=\"coordRoundedDecimals\"\n  [projection]=\"projection\"\n  [stopsFeatureStore]=\"stopsFeatureStore\"\n  [stopsStore]=\"stopsStore\"\n  [debounce]=\"debounce\"\n  [length]=\"length\"\n></igo-directions-inputs>\n\n<igo-directions-results\n  [stepFeatureStore]=\"stepFeatureStore\"\n  [routesFeatureStore]=\"routesFeatureStore\"\n></igo-directions-results>\n", styles: [".directions-options mat-slide-toggle{width:100%;padding:10px}.directions-options mat-slide-toggle ::ng-deep .mdc-form-field{width:100%}.directions-options mat-slide-toggle ::ng-deep .mdc-label{margin-left:0;width:calc(100% - 60px)}\n"], dependencies: [{ kind: "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: "component", type: DirectionsButtonsComponent, selector: "igo-directions-buttons", inputs: ["contextUri", "zoomToActiveRoute$", "stopsStore", "routesFeatureStore", "stepFeatureStore"] }, { kind: "component", type: DirectionsInputsComponent, selector: "igo-directions-inputs", inputs: ["stopsStore", "stopsFeatureStore", "projection", "coordRoundedDecimals", "debounce", "length"], outputs: ["stopInputHasFocus"] }, { kind: "component", type: DirectionsResultsComponent, selector: "igo-directions-results", inputs: ["routesFeatureStore", "stepFeatureStore"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: DirectionsComponent, decorators: [{
             type: Component,
@@ -22238,7 +22296,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                         DirectionsInputsComponent,
                         DirectionsResultsComponent,
                         TranslateModule
-                    ], template: "<div class=\"directions-options\">\r\n  <mat-slide-toggle\r\n    [checked]=\"directionControlIsActive\"\r\n    [labelPosition]=\"'before'\"\r\n    (change)=\"onToggleDirectionsControl($event.checked)\"\r\n  >\r\n    {{ 'igo.geo.directionsForm.toggleActive' | translate }}\r\n  </mat-slide-toggle>\r\n</div>\r\n\r\n<igo-directions-buttons\r\n  [stepFeatureStore]=\"stepFeatureStore\"\r\n  [contextUri]=\"contextUri\"\r\n  [zoomToActiveRoute$]=\"zoomToActiveRoute$\"\r\n  [routesFeatureStore]=\"routesFeatureStore\"\r\n  [stopsStore]=\"stopsStore\"\r\n></igo-directions-buttons>\r\n\r\n<igo-directions-inputs\r\n  (stopInputHasFocus)=\"onStopInputHasFocusChange($event)\"\r\n  [coordRoundedDecimals]=\"coordRoundedDecimals\"\r\n  [projection]=\"projection\"\r\n  [stopsFeatureStore]=\"stopsFeatureStore\"\r\n  [stopsStore]=\"stopsStore\"\r\n  [debounce]=\"debounce\"\r\n  [length]=\"length\"\r\n></igo-directions-inputs>\r\n\r\n<igo-directions-results\r\n  [stepFeatureStore]=\"stepFeatureStore\"\r\n  [routesFeatureStore]=\"routesFeatureStore\"\r\n></igo-directions-results>\r\n", styles: [".directions-options mat-slide-toggle{width:100%;padding:10px}.directions-options mat-slide-toggle ::ng-deep .mdc-form-field{width:100%}.directions-options mat-slide-toggle ::ng-deep .mdc-label{margin-left:0;width:calc(100% - 60px)}\n"] }]
+                    ], template: "<div class=\"directions-options\">\n  <mat-slide-toggle\n    [checked]=\"directionControlIsActive\"\n    [labelPosition]=\"'before'\"\n    (change)=\"onToggleDirectionsControl($event.checked)\"\n  >\n    {{ 'igo.geo.directionsForm.toggleActive' | translate }}\n  </mat-slide-toggle>\n</div>\n\n<igo-directions-buttons\n  [stepFeatureStore]=\"stepFeatureStore\"\n  [contextUri]=\"contextUri\"\n  [zoomToActiveRoute$]=\"zoomToActiveRoute$\"\n  [routesFeatureStore]=\"routesFeatureStore\"\n  [stopsStore]=\"stopsStore\"\n></igo-directions-buttons>\n\n<igo-directions-inputs\n  (stopInputHasFocus)=\"onStopInputHasFocusChange($event)\"\n  [coordRoundedDecimals]=\"coordRoundedDecimals\"\n  [projection]=\"projection\"\n  [stopsFeatureStore]=\"stopsFeatureStore\"\n  [stopsStore]=\"stopsStore\"\n  [debounce]=\"debounce\"\n  [length]=\"length\"\n></igo-directions-inputs>\n\n<igo-directions-results\n  [stepFeatureStore]=\"stepFeatureStore\"\n  [routesFeatureStore]=\"routesFeatureStore\"\n></igo-directions-results>\n", styles: [".directions-options mat-slide-toggle{width:100%;padding:10px}.directions-options mat-slide-toggle ::ng-deep .mdc-form-field{width:100%}.directions-options mat-slide-toggle ::ng-deep .mdc-label{margin-left:0;width:calc(100% - 60px)}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$2.LanguageService }, { type: DirectionsService }, { type: SearchService }, { type: QueryService }], propDecorators: { contextUri: [{
                 type: Input
             }], stopsStore: [{
@@ -22888,7 +22946,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\r\n  *ngIf=\"\r\n    options &&\r\n    options.download &&\r\n    (options.download['dynamicUrl'] || options.download['url'])\r\n  \"\r\n  mat-icon-button\r\n  tooltip-position=\"below\"\r\n  matTooltipShowDelay=\"500\"\r\n  [matTooltip]=\"'igo.geo.download.action' | translate\"\r\n  [color]=\"color\"\r\n  (click)=\"openDownload(layer)\"\r\n>\r\n  <mat-icon svgIcon=\"download\"></mat-icon>\r\n</button>\r\n", styles: [""], dependencies: [{ kind: "directive", type: 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 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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: DownloadButtonComponent, decorators: [{
             type: Component,
@@ -22898,7 +22956,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                         MatTooltipModule,
                         MatIconModule,
                         TranslateModule
-                    ], template: "<button\r\n  *ngIf=\"\r\n    options &&\r\n    options.download &&\r\n    (options.download['dynamicUrl'] || options.download['url'])\r\n  \"\r\n  mat-icon-button\r\n  tooltip-position=\"below\"\r\n  matTooltipShowDelay=\"500\"\r\n  [matTooltip]=\"'igo.geo.download.action' | translate\"\r\n  [color]=\"color\"\r\n  (click)=\"openDownload(layer)\"\r\n>\r\n  <mat-icon svgIcon=\"download\"></mat-icon>\r\n</button>\r\n" }]
+                    ], 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" }]
         }], ctorParameters: () => [{ type: DownloadService }], propDecorators: { layer: [{
                 type: Input
             }], color: [{
@@ -23151,7 +23209,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\">\r\n  <ng-container *ngIf=\"items.length; else noItems\">\r\n    <ng-container *ngFor=\"let item of items.slice().reverse()\" #renderedLegends>\r\n      <div *ngIf=\"getLegend; else noItems\">\r\n        <mat-list-item *ngIf=\"item.title\">\r\n          <mat-icon\r\n            id=\"legend-toggle\"\r\n            class=\"igo-chevron\"\r\n            matListItemIcon\r\n            igoCollapse\r\n            [target]=\"legend\"\r\n            [collapsed]=\"item.collapsed\"\r\n            (toggle)=\"toggleLegendItem($event, item)\"\r\n            svgIcon=\"chevron-up\"\r\n          >\r\n          </mat-icon>\r\n          <span matListItemTitle>{{ computeItemTitle(item) | async }} </span>\r\n        </mat-list-item>\r\n        <div\r\n          #legend\r\n          class=\"igo-layer-legend\"\r\n          [ngClass]=\"{ 'with-title': item.title }\"\r\n        >\r\n          <div *ngIf=\"currentStyle !== undefined\">\r\n            <mat-form-field>\r\n              <mat-select\r\n                tooltip-position=\"below\"\r\n                matTooltipShowDelay=\"500\"\r\n                [matTooltip]=\"'igo.geo.layer.legend.selectStyle' | translate\"\r\n                [(ngModel)]=\"currentStyle\"\r\n                (selectionChange)=\"onChangeStyle()\"\r\n              >\r\n                <mat-option *ngFor=\"let style of styles\" [value]=\"style.name\">{{\r\n                  style.title\r\n                }}</mat-option>\r\n              </mat-select>\r\n            </mat-form-field>\r\n          </div>\r\n          <div *ngIf=\"!item.collapsed\">\r\n            <div *ngIf=\"item.url\">\r\n              <img\r\n                igoImageError\r\n                *ngIf=\"item.imgGraphValue\"\r\n                [hideError]=\"true\"\r\n                #renderedLegend\r\n                id=\"{{ item.title }}\"\r\n                (load)=\"onLoadImage(item.title)\"\r\n                [src]=\"item.imgGraphValue\"\r\n                alt=\"{{ 'igo.geo.layer.legend.loadingLegendText' | translate }}\"\r\n              />\r\n              <small *ngIf=\"imagesHeight[item.title] < 16\">\r\n                {{ 'igo.geo.layer.legend.noLegendScale' | translate }}\r\n              </small>\r\n            </div>\r\n            <div\r\n              [ngStyle]=\"item.style\"\r\n              [innerHTML]=\"item.html | sanitizeHtml\"\r\n              *ngIf=\"item.html\"\r\n            ></div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </ng-container>\r\n\r\n  <ng-template #noItems>\r\n    <small>\r\n      {{ 'igo.geo.layer.legend.noLegendText' | translate }}\r\n    </small>\r\n  </ng-template>\r\n</ng-container>\r\n", styles: [":host .igo-layer-legend.with-title{padding-left:18px}:host img{max-width:100%}:host img:after{content:\" \";position:relative;height:17px;float:left;width:17px;top:-3px;right:19px;background-color:#fff;border:3px solid #f3f3f3;border-radius:50%;animation:2s linear infinite spin}@-moz-document url-prefix(){:host img:after{margin-left:19px}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "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            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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: LayerLegendComponent, decorators: [{
             type: Component,
@@ -23172,7 +23230,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                         AsyncPipe,
                         TranslateModule,
                         SanitizeHtmlPipe
-                    ], template: "<ng-container *ngIf=\"legendItems$ | async as items\">\r\n  <ng-container *ngIf=\"items.length; else noItems\">\r\n    <ng-container *ngFor=\"let item of items.slice().reverse()\" #renderedLegends>\r\n      <div *ngIf=\"getLegend; else noItems\">\r\n        <mat-list-item *ngIf=\"item.title\">\r\n          <mat-icon\r\n            id=\"legend-toggle\"\r\n            class=\"igo-chevron\"\r\n            matListItemIcon\r\n            igoCollapse\r\n            [target]=\"legend\"\r\n            [collapsed]=\"item.collapsed\"\r\n            (toggle)=\"toggleLegendItem($event, item)\"\r\n            svgIcon=\"chevron-up\"\r\n          >\r\n          </mat-icon>\r\n          <span matListItemTitle>{{ computeItemTitle(item) | async }} </span>\r\n        </mat-list-item>\r\n        <div\r\n          #legend\r\n          class=\"igo-layer-legend\"\r\n          [ngClass]=\"{ 'with-title': item.title }\"\r\n        >\r\n          <div *ngIf=\"currentStyle !== undefined\">\r\n            <mat-form-field>\r\n              <mat-select\r\n                tooltip-position=\"below\"\r\n                matTooltipShowDelay=\"500\"\r\n                [matTooltip]=\"'igo.geo.layer.legend.selectStyle' | translate\"\r\n                [(ngModel)]=\"currentStyle\"\r\n                (selectionChange)=\"onChangeStyle()\"\r\n              >\r\n                <mat-option *ngFor=\"let style of styles\" [value]=\"style.name\">{{\r\n                  style.title\r\n                }}</mat-option>\r\n              </mat-select>\r\n            </mat-form-field>\r\n          </div>\r\n          <div *ngIf=\"!item.collapsed\">\r\n            <div *ngIf=\"item.url\">\r\n              <img\r\n                igoImageError\r\n                *ngIf=\"item.imgGraphValue\"\r\n                [hideError]=\"true\"\r\n                #renderedLegend\r\n                id=\"{{ item.title }}\"\r\n                (load)=\"onLoadImage(item.title)\"\r\n                [src]=\"item.imgGraphValue\"\r\n                alt=\"{{ 'igo.geo.layer.legend.loadingLegendText' | translate }}\"\r\n              />\r\n              <small *ngIf=\"imagesHeight[item.title] < 16\">\r\n                {{ 'igo.geo.layer.legend.noLegendScale' | translate }}\r\n              </small>\r\n            </div>\r\n            <div\r\n              [ngStyle]=\"item.style\"\r\n              [innerHTML]=\"item.html | sanitizeHtml\"\r\n              *ngIf=\"item.html\"\r\n            ></div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </ng-container>\r\n\r\n  <ng-template #noItems>\r\n    <small>\r\n      {{ 'igo.geo.layer.legend.noLegendText' | translate }}\r\n    </small>\r\n  </ng-template>\r\n</ng-container>\r\n", styles: [":host .igo-layer-legend.with-title{padding-left:18px}:host img{max-width:100%}:host img:after{content:\" \";position:relative;height:17px;float:left;width:17px;top:-3px;right:19px;background-color:#fff;border:3px solid #f3f3f3;border-radius:50%;animation:2s linear infinite spin}@-moz-document url-prefix(){:host img:after{margin-left:19px}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
+                    ], 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"] }]
         }], ctorParameters: () => [{ type: CapabilitiesService }, { type: i1$2.LanguageService }, { type: i1.ConfigService }, { type: i1$1.HttpClient }, { type: i0.ChangeDetectorRef }], propDecorators: { updateLegendOnResolutionChange: [{
                 type: Input
             }], renderedLegends: [{
@@ -23193,22 +23251,22 @@ class WktService {
     extentToWkt(epsgTO, extent, extentProj) {
         let currentExtent = olproj.transformExtent(extent, extentProj, epsgTO);
         currentExtent = this.roundCoordinateArray(currentExtent, epsgTO, 0);
-        const wktPoly = `POLYGON((
-      ${extent[0]} ${extent[1]},
-      ${extent[0]} ${extent[3]},
-      ${extent[2]} ${extent[3]},
-      ${extent[2]} ${extent[1]},
+        const wktPoly = `POLYGON((
+      ${extent[0]} ${extent[1]},
+      ${extent[0]} ${extent[3]},
+      ${extent[2]} ${extent[3]},
+      ${extent[2]} ${extent[1]},
       ${extent[0]} ${extent[1]}))`;
-        const wktLine = `LINESTRING(
-      ${extent[0]} ${extent[1]},
-      ${extent[0]} ${extent[3]},
-      ${extent[2]} ${extent[3]},
-      ${extent[2]} ${extent[1]},
+        const wktLine = `LINESTRING(
+      ${extent[0]} ${extent[1]},
+      ${extent[0]} ${extent[3]},
+      ${extent[2]} ${extent[3]},
+      ${extent[2]} ${extent[1]},
       ${extent[0]} ${extent[1]})`;
-        const wktMultiPoints = `MULTIPOINT(
-        ${extent[0]} ${extent[1]},
-        ${extent[0]} ${extent[3]},
-        ${extent[2]} ${extent[3]},
+        const wktMultiPoints = `MULTIPOINT(
+        ${extent[0]} ${extent[1]},
+        ${extent[0]} ${extent[3]},
+        ${extent[2]} ${extent[3]},
         ${extent[2]} ${extent[1]})`;
         return {
             wktPoly,
@@ -24569,7 +24627,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\">\r\n  <mat-checkbox\r\n    tooltip-position=\"below\"\r\n    matTooltipShowDelay=\"500\"\r\n    [matTooltip]=\"'igo.geo.filter.toggleFilterState' | translate\"\r\n    (click)=\"$event.stopPropagation()\"\r\n    (change)=\"toggleFilterState($event)\"\r\n    [checked]=\"currentFilter.active\"\r\n  >\r\n  </mat-checkbox>\r\n\r\n  <mat-form-field\r\n    [ngClass]=\"{\r\n      logical:\r\n        activeFilters.indexOf(currentFilter) !== 0 &&\r\n        currentFilter.active === true,\r\n      logicalHidden:\r\n        activeFilters.indexOf(currentFilter) === 0 ||\r\n        currentFilter.active !== true\r\n    }\"\r\n  >\r\n    <mat-select\r\n      [disabled]=\"!currentFilter.active\"\r\n      [value]=\"currentFilter.parentLogical\"\r\n      tooltip-position=\"above\"\r\n      matTooltipShowDelay=\"500\"\r\n      [matTooltip]=\"\r\n        currentFilter.parentLogical\r\n          ? ('igo.geo.operators.tooltip.' + currentFilter.parentLogical\r\n            | translate)\r\n          : ''\r\n      \"\r\n      (selectionChange)=\"changeLogical($event.value)\"\r\n    >\r\n      <mat-option\r\n        [value]=\"ogcFilterOperator.And\"\r\n        tooltip-position=\"above\"\r\n        matTooltipShowDelay=\"500\"\r\n        [matTooltip]=\"'igo.geo.operators.tooltip.And' | translate\"\r\n      >\r\n        {{ 'igo.geo.operators.And' | translate }}\r\n      </mat-option>\r\n      <mat-option\r\n        [value]=\"ogcFilterOperator.Or\"\r\n        tooltip-position=\"above\"\r\n        matTooltipShowDelay=\"500\"\r\n        [matTooltip]=\"'igo.geo.operators.tooltip.Or' | translate\"\r\n      >\r\n        {{ 'igo.geo.operators.Or' | translate }}\r\n      </mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n\r\n  <mat-form-field\r\n    class=\"field\"\r\n    *ngIf=\"\r\n      (currentFilterIsSpatial$ | async) === false &&\r\n      (fields$ | async) &&\r\n      (fields$ | async).length > 0 &&\r\n      (fields$ | async)[0].name !== ''\r\n    \"\r\n    (mouseenter)=\"inputClearable = 'selectField'\"\r\n    (mouseleave)=\"inputClearable = undefined\"\r\n    [floatLabel]=\"floatLabel\"\r\n  >\r\n    <input\r\n      matInput\r\n      [placeholder]=\"'igo.geo.sourceFields.selectField' | translate\"\r\n      [disabled]=\"!currentFilter.active\"\r\n      [matAutocomplete]=\"autoCompleteField\"\r\n      [value]=\"(selectedField$ | async) ? (selectedField$ | async).alias : ''\"\r\n      tooltip-position=\"above\"\r\n      matTooltipShowDelay=\"500\"\r\n      [matTooltip]=\"\r\n        (selectedField$ | async)\r\n          ? (selectedField$ | async).alias\r\n          : ('igo.geo.sourceFields.selectField' | translate)\r\n      \"\r\n      (input)=\"updateFieldsList($any($event.target).value)\"\r\n    />\r\n    <mat-autocomplete\r\n      #autoCompleteField=\"matAutocomplete\"\r\n      (optionSelected)=\"changeField($event.option.id)\"\r\n    >\r\n      <mat-option\r\n        *ngFor=\"let field of filteredFields$ | async\"\r\n        matTooltipShowDelay=\"500\"\r\n        [value]=\"field.alias\"\r\n        [id]=\"field.name\"\r\n        [matTooltip]=\"field.alias\"\r\n      >\r\n        {{ field.alias }}\r\n      </mat-option>\r\n    </mat-autocomplete>\r\n    <button\r\n      *ngIf=\"\r\n        currentFilter.propertyName &&\r\n        inputClearable === 'selectField' &&\r\n        currentFilter.active\r\n      \"\r\n      matSuffix\r\n      mat-icon-button\r\n      aria-label=\"Clear\"\r\n      [disabled]=\"!currentFilter.active\"\r\n      (click)=\"clearSelectedField()\"\r\n    >\r\n      <mat-icon svgIcon=\"close\"></mat-icon>\r\n    </button>\r\n  </mat-form-field>\r\n\r\n  <mat-form-field\r\n    [ngClass]=\"{\r\n      operator: (currentFilterIsSpatial$ | async) === false,\r\n      dualInput: (currentFilterIsSpatial$ | async)\r\n    }\"\r\n    [floatLabel]=\"floatLabel\"\r\n  >\r\n    <mat-select\r\n      tooltip-position=\"below\"\r\n      matTooltipShowDelay=\"500\"\r\n      [matTooltip]=\"\r\n        currentFilter.operator\r\n          ? ('igo.geo.operators.tooltip.' + currentFilter.operator | translate)\r\n          : ('igo.geo.filter.selectOperator' | translate)\r\n      \"\r\n      [disabled]=\"!currentFilter.active\"\r\n      [value]=\"currentFilter.operator\"\r\n      (selectionChange)=\"changeOperator($event.value)\"\r\n    >\r\n      <mat-option\r\n        *ngFor=\"let operator of ogcFilterOperators$ | async | keyvalue\"\r\n        tooltip-position=\"above\"\r\n        matTooltipShowDelay=\"500\"\r\n        [value]=\"operator.key\"\r\n        [matTooltip]=\"'igo.geo.operators.tooltip.' + operator.key | translate\"\r\n      >\r\n        {{ 'igo.geo.operators.' + operator.key | translate }}\r\n      </mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n\r\n  <mat-form-field\r\n    class=\"spatialSelector\"\r\n    *ngIf=\"currentFilterIsSpatial$ | async\"\r\n  >\r\n    <mat-select\r\n      [disabled]=\"!currentFilter.active\"\r\n      [value]=\"currentFilter.igoSpatialSelector\"\r\n      (selectionChange)=\"changeSpatialSelector($event.value)\"\r\n    >\r\n      <mat-option\r\n        *ngFor=\"let igoSpatialSelector of igoSpatialSelectors\"\r\n        [value]=\"igoSpatialSelector.type\"\r\n      >\r\n        {{ 'igo.geo.spatialSelector.' + igoSpatialSelector.type | translate }}\r\n      </mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n\r\n  <mat-form-field\r\n    class=\"singleInput\"\r\n    *ngIf=\"['expression', 'pattern'].indexOf(detectProperty()) !== -1\"\r\n    (mouseenter)=\"inputClearable = 'selectProperty'\"\r\n    (mouseleave)=\"inputClearable = undefined\"\r\n    [floatLabel]=\"floatLabel\"\r\n  >\r\n    <input\r\n      matInput\r\n      [placeholder]=\"'igo.geo.filter.placeholder' | translate\"\r\n      [disabled]=\"!currentFilter.active\"\r\n      [matAutocomplete]=\"autoCompleteValues\"\r\n      [value]=\"\r\n        detectProperty() === 'expression'\r\n          ? currentFilter.expression\r\n          : currentFilter.pattern\r\n      \"\r\n      tooltip-position=\"above\"\r\n      matTooltipShowDelay=\"500\"\r\n      [matTooltip]=\"\r\n        detectProperty() === 'expression'\r\n          ? currentFilter.expression || ''\r\n          : currentFilter.pattern || ''\r\n      \"\r\n      (input)=\"updateValuesList($any($event.target).value)\"\r\n    />\r\n    <mat-autocomplete\r\n      #autoCompleteValues=\"matAutocomplete\"\r\n      (optionSelected)=\"changeProperty($event.option.value)\"\r\n    >\r\n      <mat-option\r\n        *ngFor=\"let value of filteredValues$ | async\"\r\n        matTooltipShowDelay=\"500\"\r\n        [value]=\"value\"\r\n        [matTooltip]=\"value\"\r\n      >\r\n        {{ value }}\r\n      </mat-option>\r\n    </mat-autocomplete>\r\n    <button\r\n      *ngIf=\"\r\n        isClearable() &&\r\n        inputClearable === 'selectProperty' &&\r\n        currentFilter.active\r\n      \"\r\n      matSuffix\r\n      mat-icon-button\r\n      aria-label=\"Clear\"\r\n      [disabled]=\"!currentFilter.active\"\r\n      (click)=\"clearProperty()\"\r\n    >\r\n      <mat-icon svgIcon=\"close\"></mat-icon>\r\n    </button>\r\n  </mat-form-field>\r\n\r\n  <div class=\"igo-layer-button-group\">\r\n    <button\r\n      mat-icon-button\r\n      collapsibleButton\r\n      tooltip-position=\"below\"\r\n      matTooltipShowDelay=\"500\"\r\n      [matTooltip]=\"'igo.geo.filter.removeFilter' | translate\"\r\n      color=\"warn\"\r\n      (click)=\"deleteFilter()\"\r\n    >\r\n      <mat-icon svgIcon=\"delete\"></mat-icon>\r\n    </button>\r\n  </div>\r\n\r\n  <mat-form-field\r\n    class=\"snrc\"\r\n    *ngIf=\"\r\n      (currentFilterIsSpatial$ | async) &&\r\n      currentFilter.igoSpatialSelector === 'snrc'\r\n    \"\r\n    (mouseenter)=\"inputClearable = 'selectSNRC'\"\r\n    (mouseleave)=\"inputClearable = undefined\"\r\n    [floatLabel]=\"floatLabel\"\r\n  >\r\n    <input\r\n      matInput\r\n      [placeholder]=\"'igo.geo.filter.placeholderSnrc' | translate\"\r\n      [value]=\"currentFilter.igoSNRC\"\r\n      tooltip-position=\"above\"\r\n      matTooltipShowDelay=\"500\"\r\n      [matTooltip]=\"currentFilter.igoSNRC ? currentFilter.igoSNRC : ''\"\r\n      (input)=\"changeSNRC($any($event.target).value)\"\r\n    />\r\n    <button\r\n      *ngIf=\"currentFilter.igoSNRC\"\r\n      matSuffix\r\n      mat-icon-button\r\n      aria-label=\"Clear\"\r\n      [disabled]=\"\r\n        !currentFilter.active &&\r\n        inputClearable === 'selectSNRC' &&\r\n        currentFilter.active\r\n      \"\r\n      (click)=\"currentFilter.igoSNRC = ''\"\r\n    >\r\n      <mat-icon svgIcon=\"close\"></mat-icon>\r\n    </button>\r\n  </mat-form-field>\r\n\r\n  <ng-container\r\n    *ngIf=\"\r\n      (currentFilterIsSpatial$ | async) &&\r\n      currentFilter.igoSpatialSelector === 'fixedExtent'\r\n    \"\r\n  >\r\n    <button\r\n      [disabled]=\"!currentFilter.active\"\r\n      *ngIf=\"currentFilter.igoSpatialSelector === 'fixedExtent'\"\r\n      matSuffix\r\n      mat-icon-button\r\n      [disabled]=\"!currentFilter.active\"\r\n      (click)=\"changeMapExtentGeometry()\"\r\n      tooltip-position=\"below\"\r\n      matTooltipShowDelay=\"500\"\r\n      [matTooltip]=\"'igo.geo.spatialSelector.btnSetExtent' | translate\"\r\n    >\r\n      <mat-icon svgIcon=\"arrow-expand-all\"></mat-icon>\r\n    </button>\r\n  </ng-container>\r\n</div>\r\n\r\n<div class=\"ogc-filter-form-container\">\r\n  <mat-form-field\r\n    class=\"dualInput\"\r\n    *ngIf=\"\r\n      !isTemporalOperator() &&\r\n      ['lowerBoundary', 'begin'].indexOf(detectProperty(1)) !== -1\r\n    \"\r\n    (mouseenter)=\"inputClearable = 'selectProperty1'\"\r\n    (mouseleave)=\"inputClearable = undefined\"\r\n    [floatLabel]=\"floatLabel\"\r\n  >\r\n    <input\r\n      matInput\r\n      [placeholder]=\"'igo.geo.filter.placeholder' | translate\"\r\n      [disabled]=\"!currentFilter.active\"\r\n      [matAutocomplete]=\"autoDualValueOperator1\"\r\n      type=\"number\"\r\n      [value]=\"\r\n        detectProperty(1) === 'lowerBoundary'\r\n          ? currentFilter.lowerBoundary\r\n          : currentFilter.begin\r\n      \"\r\n      (input)=\"updateValuesList($any($event.target).value, 1)\"\r\n    />\r\n    <mat-autocomplete\r\n      #autoDualValueOperator1=\"matAutocomplete\"\r\n      (optionSelected)=\"changeNumericProperty($event.option.value, 1)\"\r\n    >\r\n      <mat-option\r\n        *ngFor=\"let value of filteredValues$ | async\"\r\n        matTooltipShowDelay=\"500\"\r\n        [value]=\"value\"\r\n        [matTooltip]=\"value\"\r\n      >\r\n        {{ value }}\r\n      </mat-option>\r\n    </mat-autocomplete>\r\n    <button\r\n      *ngIf=\"\r\n        isClearable(1) &&\r\n        inputClearable === 'selectProperty1' &&\r\n        currentFilter.active\r\n      \"\r\n      matSuffix\r\n      mat-icon-button\r\n      aria-label=\"Clear\"\r\n      [disabled]=\"!currentFilter.active\"\r\n      (click)=\"clearProperty(1)\"\r\n    >\r\n      <mat-icon svgIcon=\"close\"></mat-icon>\r\n    </button>\r\n  </mat-form-field>\r\n\r\n  <mat-form-field\r\n    class=\"dualInput\"\r\n    *ngIf=\"\r\n      !isTemporalOperator() &&\r\n      ['upperBoundary', 'end'].indexOf(detectProperty(2)) !== -1\r\n    \"\r\n    (mouseenter)=\"inputClearable = 'selectProperty2'\"\r\n    (mouseleave)=\"inputClearable = undefined\"\r\n    [floatLabel]=\"floatLabel\"\r\n  >\r\n    <input\r\n      matInput\r\n      [placeholder]=\"'igo.geo.filter.placeholder' | translate\"\r\n      [disabled]=\"!currentFilter.active\"\r\n      [matAutocomplete]=\"autoDualValueOperator2\"\r\n      type=\"number\"\r\n      [value]=\"\r\n        detectProperty(2) === 'upperBoundary'\r\n          ? currentFilter.upperBoundary\r\n          : currentFilter.end\r\n      \"\r\n      (input)=\"updateValuesList($any($event.target).value, 2)\"\r\n    />\r\n    <mat-autocomplete\r\n      #autoDualValueOperator2=\"matAutocomplete\"\r\n      (optionSelected)=\"changeNumericProperty($event.option.value, 2)\"\r\n    >\r\n      <mat-option\r\n        *ngFor=\"let value of filteredValues$ | async\"\r\n        matTooltipShowDelay=\"500\"\r\n        [value]=\"value\"\r\n        [matTooltip]=\"value\"\r\n      >\r\n        {{ value }}\r\n      </mat-option>\r\n    </mat-autocomplete>\r\n    <button\r\n      *ngIf=\"\r\n        isClearable(2) &&\r\n        inputClearable === 'selectProperty2' &&\r\n        currentFilter.active\r\n      \"\r\n      matSuffix\r\n      mat-icon-button\r\n      aria-label=\"Clear\"\r\n      [disabled]=\"!currentFilter.active\"\r\n      (click)=\"clearProperty(2)\"\r\n    >\r\n      <mat-icon svgIcon=\"close\"></mat-icon>\r\n    </button>\r\n  </mat-form-field>\r\n</div>\r\n\r\n<igo-ogc-filter-time\r\n  *ngIf=\"isTemporalOperator()\"\r\n  [datasource]=\"datasource\"\r\n  [currentFilter]=\"currentFilter\"\r\n  (changeProperty)=\"changeProperty($event.value, $event.pos)\"\r\n>\r\n</igo-ogc-filter-time>\r\n", styles: [":host{width:100%;padding:5px 10px}:host ::ng-deep .mat-mdc-form-field .mat-icon svg{width:1em;height:1em;color:#d3d3d3}:host .ogc-filter-form-container{display:flex}:host .mat-mdc-form-field{width:100%}:host .mat-mdc-select-arrow{visibility:hidden}:host .mat-mdc-slide-toggle{margin-top:10px}:host .logical{flex-flow:column nowrap;width:100%;max-width:60px;margin-right:5px}:host .logicalHidden{width:0px;visibility:hidden;max-width:0px}:host ::ng-deep .logical .mat-mdc-select-arrow{visibility:hidden}:host ::ng-deep .logicalHidden .mat-mdc-select-arrow{visibility:hidden}:host .field{width:150px;margin-right:5px}:host ::ng-deep .field .mat-mdc-select-arrow{visibility:hidden}:host .operator{width:150px;margin-right:5px;text-align:center}:host ::ng-deep .operator .mat-mdc-select-arrow{visibility:hidden}:host .spatialSelector{width:110px;margin-right:5px}:host ::ng-deep .spatialSelector .mat-mdc-select-arrow{visibility:hidden}:host .singleInput{width:150px;margin-right:5px}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){:host .singleInput{width:27%}}:host .snrc{width:110px;margin-right:5px}:host ::ng-deep .singleInput .mat-mdc-select-arrow{visibility:hidden}:host .dualInput{width:150px;margin-right:5px}:host ::ng-deep .dualInput .mat-mdc-select-arrow{visibility:hidden}:host .igo-layer-button-group{display:flex;padding-top:5px}:host .container{display:flex}\n"], dependencies: [{ kind: "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 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" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: OgcFilterFormComponent, decorators: [{
             type: Component,
@@ -24590,7 +24648,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                         AsyncPipe,
                         KeyValuePipe,
                         TranslateModule
-                    ], template: "<div class=\"ogc-filter-form-container\">\r\n  <mat-checkbox\r\n    tooltip-position=\"below\"\r\n    matTooltipShowDelay=\"500\"\r\n    [matTooltip]=\"'igo.geo.filter.toggleFilterState' | translate\"\r\n    (click)=\"$event.stopPropagation()\"\r\n    (change)=\"toggleFilterState($event)\"\r\n    [checked]=\"currentFilter.active\"\r\n  >\r\n  </mat-checkbox>\r\n\r\n  <mat-form-field\r\n    [ngClass]=\"{\r\n      logical:\r\n        activeFilters.indexOf(currentFilter) !== 0 &&\r\n        currentFilter.active === true,\r\n      logicalHidden:\r\n        activeFilters.indexOf(currentFilter) === 0 ||\r\n        currentFilter.active !== true\r\n    }\"\r\n  >\r\n    <mat-select\r\n      [disabled]=\"!currentFilter.active\"\r\n      [value]=\"currentFilter.parentLogical\"\r\n      tooltip-position=\"above\"\r\n      matTooltipShowDelay=\"500\"\r\n      [matTooltip]=\"\r\n        currentFilter.parentLogical\r\n          ? ('igo.geo.operators.tooltip.' + currentFilter.parentLogical\r\n            | translate)\r\n          : ''\r\n      \"\r\n      (selectionChange)=\"changeLogical($event.value)\"\r\n    >\r\n      <mat-option\r\n        [value]=\"ogcFilterOperator.And\"\r\n        tooltip-position=\"above\"\r\n        matTooltipShowDelay=\"500\"\r\n        [matTooltip]=\"'igo.geo.operators.tooltip.And' | translate\"\r\n      >\r\n        {{ 'igo.geo.operators.And' | translate }}\r\n      </mat-option>\r\n      <mat-option\r\n        [value]=\"ogcFilterOperator.Or\"\r\n        tooltip-position=\"above\"\r\n        matTooltipShowDelay=\"500\"\r\n        [matTooltip]=\"'igo.geo.operators.tooltip.Or' | translate\"\r\n      >\r\n        {{ 'igo.geo.operators.Or' | translate }}\r\n      </mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n\r\n  <mat-form-field\r\n    class=\"field\"\r\n    *ngIf=\"\r\n      (currentFilterIsSpatial$ | async) === false &&\r\n      (fields$ | async) &&\r\n      (fields$ | async).length > 0 &&\r\n      (fields$ | async)[0].name !== ''\r\n    \"\r\n    (mouseenter)=\"inputClearable = 'selectField'\"\r\n    (mouseleave)=\"inputClearable = undefined\"\r\n    [floatLabel]=\"floatLabel\"\r\n  >\r\n    <input\r\n      matInput\r\n      [placeholder]=\"'igo.geo.sourceFields.selectField' | translate\"\r\n      [disabled]=\"!currentFilter.active\"\r\n      [matAutocomplete]=\"autoCompleteField\"\r\n      [value]=\"(selectedField$ | async) ? (selectedField$ | async).alias : ''\"\r\n      tooltip-position=\"above\"\r\n      matTooltipShowDelay=\"500\"\r\n      [matTooltip]=\"\r\n        (selectedField$ | async)\r\n          ? (selectedField$ | async).alias\r\n          : ('igo.geo.sourceFields.selectField' | translate)\r\n      \"\r\n      (input)=\"updateFieldsList($any($event.target).value)\"\r\n    />\r\n    <mat-autocomplete\r\n      #autoCompleteField=\"matAutocomplete\"\r\n      (optionSelected)=\"changeField($event.option.id)\"\r\n    >\r\n      <mat-option\r\n        *ngFor=\"let field of filteredFields$ | async\"\r\n        matTooltipShowDelay=\"500\"\r\n        [value]=\"field.alias\"\r\n        [id]=\"field.name\"\r\n        [matTooltip]=\"field.alias\"\r\n      >\r\n        {{ field.alias }}\r\n      </mat-option>\r\n    </mat-autocomplete>\r\n    <button\r\n      *ngIf=\"\r\n        currentFilter.propertyName &&\r\n        inputClearable === 'selectField' &&\r\n        currentFilter.active\r\n      \"\r\n      matSuffix\r\n      mat-icon-button\r\n      aria-label=\"Clear\"\r\n      [disabled]=\"!currentFilter.active\"\r\n      (click)=\"clearSelectedField()\"\r\n    >\r\n      <mat-icon svgIcon=\"close\"></mat-icon>\r\n    </button>\r\n  </mat-form-field>\r\n\r\n  <mat-form-field\r\n    [ngClass]=\"{\r\n      operator: (currentFilterIsSpatial$ | async) === false,\r\n      dualInput: (currentFilterIsSpatial$ | async)\r\n    }\"\r\n    [floatLabel]=\"floatLabel\"\r\n  >\r\n    <mat-select\r\n      tooltip-position=\"below\"\r\n      matTooltipShowDelay=\"500\"\r\n      [matTooltip]=\"\r\n        currentFilter.operator\r\n          ? ('igo.geo.operators.tooltip.' + currentFilter.operator | translate)\r\n          : ('igo.geo.filter.selectOperator' | translate)\r\n      \"\r\n      [disabled]=\"!currentFilter.active\"\r\n      [value]=\"currentFilter.operator\"\r\n      (selectionChange)=\"changeOperator($event.value)\"\r\n    >\r\n      <mat-option\r\n        *ngFor=\"let operator of ogcFilterOperators$ | async | keyvalue\"\r\n        tooltip-position=\"above\"\r\n        matTooltipShowDelay=\"500\"\r\n        [value]=\"operator.key\"\r\n        [matTooltip]=\"'igo.geo.operators.tooltip.' + operator.key | translate\"\r\n      >\r\n        {{ 'igo.geo.operators.' + operator.key | translate }}\r\n      </mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n\r\n  <mat-form-field\r\n    class=\"spatialSelector\"\r\n    *ngIf=\"currentFilterIsSpatial$ | async\"\r\n  >\r\n    <mat-select\r\n      [disabled]=\"!currentFilter.active\"\r\n      [value]=\"currentFilter.igoSpatialSelector\"\r\n      (selectionChange)=\"changeSpatialSelector($event.value)\"\r\n    >\r\n      <mat-option\r\n        *ngFor=\"let igoSpatialSelector of igoSpatialSelectors\"\r\n        [value]=\"igoSpatialSelector.type\"\r\n      >\r\n        {{ 'igo.geo.spatialSelector.' + igoSpatialSelector.type | translate }}\r\n      </mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n\r\n  <mat-form-field\r\n    class=\"singleInput\"\r\n    *ngIf=\"['expression', 'pattern'].indexOf(detectProperty()) !== -1\"\r\n    (mouseenter)=\"inputClearable = 'selectProperty'\"\r\n    (mouseleave)=\"inputClearable = undefined\"\r\n    [floatLabel]=\"floatLabel\"\r\n  >\r\n    <input\r\n      matInput\r\n      [placeholder]=\"'igo.geo.filter.placeholder' | translate\"\r\n      [disabled]=\"!currentFilter.active\"\r\n      [matAutocomplete]=\"autoCompleteValues\"\r\n      [value]=\"\r\n        detectProperty() === 'expression'\r\n          ? currentFilter.expression\r\n          : currentFilter.pattern\r\n      \"\r\n      tooltip-position=\"above\"\r\n      matTooltipShowDelay=\"500\"\r\n      [matTooltip]=\"\r\n        detectProperty() === 'expression'\r\n          ? currentFilter.expression || ''\r\n          : currentFilter.pattern || ''\r\n      \"\r\n      (input)=\"updateValuesList($any($event.target).value)\"\r\n    />\r\n    <mat-autocomplete\r\n      #autoCompleteValues=\"matAutocomplete\"\r\n      (optionSelected)=\"changeProperty($event.option.value)\"\r\n    >\r\n      <mat-option\r\n        *ngFor=\"let value of filteredValues$ | async\"\r\n        matTooltipShowDelay=\"500\"\r\n        [value]=\"value\"\r\n        [matTooltip]=\"value\"\r\n      >\r\n        {{ value }}\r\n      </mat-option>\r\n    </mat-autocomplete>\r\n    <button\r\n      *ngIf=\"\r\n        isClearable() &&\r\n        inputClearable === 'selectProperty' &&\r\n        currentFilter.active\r\n      \"\r\n      matSuffix\r\n      mat-icon-button\r\n      aria-label=\"Clear\"\r\n      [disabled]=\"!currentFilter.active\"\r\n      (click)=\"clearProperty()\"\r\n    >\r\n      <mat-icon svgIcon=\"close\"></mat-icon>\r\n    </button>\r\n  </mat-form-field>\r\n\r\n  <div class=\"igo-layer-button-group\">\r\n    <button\r\n      mat-icon-button\r\n      collapsibleButton\r\n      tooltip-position=\"below\"\r\n      matTooltipShowDelay=\"500\"\r\n      [matTooltip]=\"'igo.geo.filter.removeFilter' | translate\"\r\n      color=\"warn\"\r\n      (click)=\"deleteFilter()\"\r\n    >\r\n      <mat-icon svgIcon=\"delete\"></mat-icon>\r\n    </button>\r\n  </div>\r\n\r\n  <mat-form-field\r\n    class=\"snrc\"\r\n    *ngIf=\"\r\n      (currentFilterIsSpatial$ | async) &&\r\n      currentFilter.igoSpatialSelector === 'snrc'\r\n    \"\r\n    (mouseenter)=\"inputClearable = 'selectSNRC'\"\r\n    (mouseleave)=\"inputClearable = undefined\"\r\n    [floatLabel]=\"floatLabel\"\r\n  >\r\n    <input\r\n      matInput\r\n      [placeholder]=\"'igo.geo.filter.placeholderSnrc' | translate\"\r\n      [value]=\"currentFilter.igoSNRC\"\r\n      tooltip-position=\"above\"\r\n      matTooltipShowDelay=\"500\"\r\n      [matTooltip]=\"currentFilter.igoSNRC ? currentFilter.igoSNRC : ''\"\r\n      (input)=\"changeSNRC($any($event.target).value)\"\r\n    />\r\n    <button\r\n      *ngIf=\"currentFilter.igoSNRC\"\r\n      matSuffix\r\n      mat-icon-button\r\n      aria-label=\"Clear\"\r\n      [disabled]=\"\r\n        !currentFilter.active &&\r\n        inputClearable === 'selectSNRC' &&\r\n        currentFilter.active\r\n      \"\r\n      (click)=\"currentFilter.igoSNRC = ''\"\r\n    >\r\n      <mat-icon svgIcon=\"close\"></mat-icon>\r\n    </button>\r\n  </mat-form-field>\r\n\r\n  <ng-container\r\n    *ngIf=\"\r\n      (currentFilterIsSpatial$ | async) &&\r\n      currentFilter.igoSpatialSelector === 'fixedExtent'\r\n    \"\r\n  >\r\n    <button\r\n      [disabled]=\"!currentFilter.active\"\r\n      *ngIf=\"currentFilter.igoSpatialSelector === 'fixedExtent'\"\r\n      matSuffix\r\n      mat-icon-button\r\n      [disabled]=\"!currentFilter.active\"\r\n      (click)=\"changeMapExtentGeometry()\"\r\n      tooltip-position=\"below\"\r\n      matTooltipShowDelay=\"500\"\r\n      [matTooltip]=\"'igo.geo.spatialSelector.btnSetExtent' | translate\"\r\n    >\r\n      <mat-icon svgIcon=\"arrow-expand-all\"></mat-icon>\r\n    </button>\r\n  </ng-container>\r\n</div>\r\n\r\n<div class=\"ogc-filter-form-container\">\r\n  <mat-form-field\r\n    class=\"dualInput\"\r\n    *ngIf=\"\r\n      !isTemporalOperator() &&\r\n      ['lowerBoundary', 'begin'].indexOf(detectProperty(1)) !== -1\r\n    \"\r\n    (mouseenter)=\"inputClearable = 'selectProperty1'\"\r\n    (mouseleave)=\"inputClearable = undefined\"\r\n    [floatLabel]=\"floatLabel\"\r\n  >\r\n    <input\r\n      matInput\r\n      [placeholder]=\"'igo.geo.filter.placeholder' | translate\"\r\n      [disabled]=\"!currentFilter.active\"\r\n      [matAutocomplete]=\"autoDualValueOperator1\"\r\n      type=\"number\"\r\n      [value]=\"\r\n        detectProperty(1) === 'lowerBoundary'\r\n          ? currentFilter.lowerBoundary\r\n          : currentFilter.begin\r\n      \"\r\n      (input)=\"updateValuesList($any($event.target).value, 1)\"\r\n    />\r\n    <mat-autocomplete\r\n      #autoDualValueOperator1=\"matAutocomplete\"\r\n      (optionSelected)=\"changeNumericProperty($event.option.value, 1)\"\r\n    >\r\n      <mat-option\r\n        *ngFor=\"let value of filteredValues$ | async\"\r\n        matTooltipShowDelay=\"500\"\r\n        [value]=\"value\"\r\n        [matTooltip]=\"value\"\r\n      >\r\n        {{ value }}\r\n      </mat-option>\r\n    </mat-autocomplete>\r\n    <button\r\n      *ngIf=\"\r\n        isClearable(1) &&\r\n        inputClearable === 'selectProperty1' &&\r\n        currentFilter.active\r\n      \"\r\n      matSuffix\r\n      mat-icon-button\r\n      aria-label=\"Clear\"\r\n      [disabled]=\"!currentFilter.active\"\r\n      (click)=\"clearProperty(1)\"\r\n    >\r\n      <mat-icon svgIcon=\"close\"></mat-icon>\r\n    </button>\r\n  </mat-form-field>\r\n\r\n  <mat-form-field\r\n    class=\"dualInput\"\r\n    *ngIf=\"\r\n      !isTemporalOperator() &&\r\n      ['upperBoundary', 'end'].indexOf(detectProperty(2)) !== -1\r\n    \"\r\n    (mouseenter)=\"inputClearable = 'selectProperty2'\"\r\n    (mouseleave)=\"inputClearable = undefined\"\r\n    [floatLabel]=\"floatLabel\"\r\n  >\r\n    <input\r\n      matInput\r\n      [placeholder]=\"'igo.geo.filter.placeholder' | translate\"\r\n      [disabled]=\"!currentFilter.active\"\r\n      [matAutocomplete]=\"autoDualValueOperator2\"\r\n      type=\"number\"\r\n      [value]=\"\r\n        detectProperty(2) === 'upperBoundary'\r\n          ? currentFilter.upperBoundary\r\n          : currentFilter.end\r\n      \"\r\n      (input)=\"updateValuesList($any($event.target).value, 2)\"\r\n    />\r\n    <mat-autocomplete\r\n      #autoDualValueOperator2=\"matAutocomplete\"\r\n      (optionSelected)=\"changeNumericProperty($event.option.value, 2)\"\r\n    >\r\n      <mat-option\r\n        *ngFor=\"let value of filteredValues$ | async\"\r\n        matTooltipShowDelay=\"500\"\r\n        [value]=\"value\"\r\n        [matTooltip]=\"value\"\r\n      >\r\n        {{ value }}\r\n      </mat-option>\r\n    </mat-autocomplete>\r\n    <button\r\n      *ngIf=\"\r\n        isClearable(2) &&\r\n        inputClearable === 'selectProperty2' &&\r\n        currentFilter.active\r\n      \"\r\n      matSuffix\r\n      mat-icon-button\r\n      aria-label=\"Clear\"\r\n      [disabled]=\"!currentFilter.active\"\r\n      (click)=\"clearProperty(2)\"\r\n    >\r\n      <mat-icon svgIcon=\"close\"></mat-icon>\r\n    </button>\r\n  </mat-form-field>\r\n</div>\r\n\r\n<igo-ogc-filter-time\r\n  *ngIf=\"isTemporalOperator()\"\r\n  [datasource]=\"datasource\"\r\n  [currentFilter]=\"currentFilter\"\r\n  (changeProperty)=\"changeProperty($event.value, $event.pos)\"\r\n>\r\n</igo-ogc-filter-time>\r\n", styles: [":host{width:100%;padding:5px 10px}:host ::ng-deep .mat-mdc-form-field .mat-icon svg{width:1em;height:1em;color:#d3d3d3}:host .ogc-filter-form-container{display:flex}:host .mat-mdc-form-field{width:100%}:host .mat-mdc-select-arrow{visibility:hidden}:host .mat-mdc-slide-toggle{margin-top:10px}:host .logical{flex-flow:column nowrap;width:100%;max-width:60px;margin-right:5px}:host .logicalHidden{width:0px;visibility:hidden;max-width:0px}:host ::ng-deep .logical .mat-mdc-select-arrow{visibility:hidden}:host ::ng-deep .logicalHidden .mat-mdc-select-arrow{visibility:hidden}:host .field{width:150px;margin-right:5px}:host ::ng-deep .field .mat-mdc-select-arrow{visibility:hidden}:host .operator{width:150px;margin-right:5px;text-align:center}:host ::ng-deep .operator .mat-mdc-select-arrow{visibility:hidden}:host .spatialSelector{width:110px;margin-right:5px}:host ::ng-deep .spatialSelector .mat-mdc-select-arrow{visibility:hidden}:host .singleInput{width:150px;margin-right:5px}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){:host .singleInput{width:27%}}:host .snrc{width:110px;margin-right:5px}:host ::ng-deep .singleInput .mat-mdc-select-arrow{visibility:hidden}:host .dualInput{width:150px;margin-right:5px}:host ::ng-deep .dualInput .mat-mdc-select-arrow{visibility:hidden}:host .igo-layer-button-group{display:flex;padding-top:5px}:host .container{display:flex}\n"] }]
+                    ], 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"] }]
         }], ctorParameters: () => [{ type: WktService }], propDecorators: { refreshFilters: [{
                 type: Input
             }], datasource: [{
@@ -25307,7 +25365,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\">\r\n  <div *ngFor=\"let selector of ogcFiltersSelectors\">\r\n    <div\r\n      class=\"pushButtonGroups\"\r\n      *ngIf=\"selector.selectorType === 'pushButton'\"\r\n    >\r\n      <mat-divider></mat-divider>\r\n      <div class=\"groupsSelector\" *ngIf=\"getPushButtonsGroups().length > 1\">\r\n        <mat-form-field>\r\n          <mat-select\r\n            formControlName=\"pushButtonsGroup\"\r\n            [matTooltip]=\"'igo.geo.layer.legend.selectStyle' | translate\"\r\n            tooltip-position=\"below\"\r\n            matTooltipShowDelay=\"500\"\r\n            [(value)]=\"currentPushButtonsGroup\"\r\n          >\r\n            <mat-option\r\n              *ngFor=\"let selectorGroup of getPushButtonsGroups()\"\r\n              [value]=\"selectorGroup\"\r\n              >{{ selectorGroup.title }}\r\n            </mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </div>\r\n      <ng-container\r\n        *ngFor=\"let bundle of currentPushButtonsGroup.computedSelectors\"\r\n      >\r\n        <h3>{{ bundle.title }}</h3>\r\n        <mat-button-toggle-group\r\n          formControlName=\"pushButtons\"\r\n          class=\"mat-typography\"\r\n          appearance=\"legacy\"\r\n          vertical=\"{{ bundleIsVertical(bundle) }}\"\r\n          multiple=\"true\"\r\n        >\r\n          <mat-button-toggle\r\n            *ngFor=\"let ogcPushButton of bundle.selectors\"\r\n            [matTooltip]=\"getToolTip(ogcPushButton)\"\r\n            tooltip-position=\"below\"\r\n            matTooltipShowDelay=\"500\"\r\n            matTooltipClass=\"material-tooltip\"\r\n            [ngStyle]=\"getButtonColor(ogcPushButton)\"\r\n            [checked]=\"ogcPushButton.enabled\"\r\n            (change)=\"onSelectionChange(ogcPushButton, selector.selectorType)\"\r\n            [value]=\"ogcPushButton\"\r\n            >{{ ogcPushButton.title }}\r\n          </mat-button-toggle>\r\n        </mat-button-toggle-group>\r\n      </ng-container>\r\n    </div>\r\n\r\n    <div class=\"checkboxGroups\" *ngIf=\"selector.selectorType === 'checkbox'\">\r\n      <mat-divider></mat-divider>\r\n      <div class=\"groupsSelector\" *ngIf=\"getCheckboxesGroups().length > 1\">\r\n        <mat-form-field>\r\n          <mat-select\r\n            formControlName=\"checkboxesGroup\"\r\n            [matTooltip]=\"'igo.geo.layer.legend.selectStyle' | translate\"\r\n            tooltip-position=\"below\"\r\n            matTooltipShowDelay=\"500\"\r\n            [(value)]=\"currentCheckboxesGroup\"\r\n          >\r\n            <mat-option\r\n              *ngFor=\"let selectorGroup of getCheckboxesGroups()\"\r\n              [value]=\"selectorGroup\"\r\n              >{{ selectorGroup.title }}\r\n            </mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </div>\r\n      <ng-container\r\n        *ngFor=\"let bundle of currentCheckboxesGroup.computedSelectors\"\r\n      >\r\n        <h3>{{ bundle.title }}</h3>\r\n        <div class=\"checkboxes mat-typography\">\r\n          <mat-checkbox\r\n            *ngFor=\"let ogcCheckbox of bundle.selectors\"\r\n            [matTooltip]=\"getToolTip(ogcCheckbox)\"\r\n            tooltip-position=\"below\"\r\n            matTooltipShowDelay=\"500\"\r\n            matTooltipClass=\"material-tooltip\"\r\n            [checked]=\"ogcCheckbox.enabled\"\r\n            (change)=\"onSelectionChange(ogcCheckbox, selector.selectorType)\"\r\n            [value]=\"ogcCheckbox\"\r\n            >{{ ogcCheckbox.title }}\r\n          </mat-checkbox>\r\n        </div>\r\n        <p\r\n          *ngIf=\"\r\n            isLessResults(bundle, 'checkbox') ||\r\n            isMoreResults(bundle, 'checkbox')\r\n          \"\r\n        >\r\n          <u\r\n            *ngIf=\"isLessResults(bundle, 'checkbox')\"\r\n            class=\"lessResults mat-typography\"\r\n            (click)=\"displayLessResults('checkbox')\"\r\n            >{{ 'igo.geo.filter.displayLessResults' | translate }}\r\n          </u>\r\n          <u\r\n            *ngIf=\"isMoreResults(bundle, 'checkbox')\"\r\n            class=\"moreResults mat-typography\"\r\n            (click)=\"displayMoreResults('checkbox')\"\r\n            >{{ 'igo.geo.filter.displayMoreResults' | translate }}\r\n          </u>\r\n        </p>\r\n      </ng-container>\r\n    </div>\r\n\r\n    <div\r\n      class=\"radioButtonGroups\"\r\n      *ngIf=\"selector.selectorType === 'radioButton'\"\r\n    >\r\n      <mat-divider></mat-divider>\r\n      <div class=\"groupsSelector\" *ngIf=\"getRadioButtonsGroups().length > 1\">\r\n        <mat-form-field>\r\n          <mat-select\r\n            formControlName=\"radioButtonsGroup\"\r\n            [matTooltip]=\"'igo.geo.layer.legend.selectStyle' | translate\"\r\n            tooltip-position=\"below\"\r\n            matTooltipShowDelay=\"500\"\r\n            [(value)]=\"currentRadioButtonsGroup\"\r\n          >\r\n            <mat-option\r\n              *ngFor=\"let selectorGroup of getRadioButtonsGroups()\"\r\n              [value]=\"selectorGroup\"\r\n              >{{ selectorGroup.title }}\r\n            </mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </div>\r\n      <ng-container\r\n        *ngFor=\"let bundle of currentRadioButtonsGroup.computedSelectors\"\r\n      >\r\n        <h3>{{ bundle.title }}</h3>\r\n        <mat-radio-group formControlName=\"radioButtons\" class=\"mat-typography\">\r\n          <mat-radio-button\r\n            *ngIf=\"bundle.unfiltered\"\r\n            [matTooltip]=\"'igo.geo.filter.resetFilters' | translate\"\r\n            tooltip-position=\"below\"\r\n            matTooltipShowDelay=\"500\"\r\n            matTooltipClass=\"material-tooltip\"\r\n            (change)=\"emptyRadioButtons()\"\r\n            >{{ 'igo.geo.filter.resetFilters' | translate }}\r\n          </mat-radio-button>\r\n          <mat-radio-button\r\n            *ngFor=\"let ogcRadioButton of bundle.selectors\"\r\n            [matTooltip]=\"getToolTip(ogcRadioButton)\"\r\n            tooltip-position=\"below\"\r\n            matTooltipShowDelay=\"500\"\r\n            matTooltipClass=\"material-tooltip\"\r\n            [checked]=\"ogcRadioButton.enabled\"\r\n            (change)=\"onSelectionChange(ogcRadioButton, selector.selectorType)\"\r\n            [value]=\"ogcRadioButton\"\r\n            >{{ ogcRadioButton.title }}\r\n          </mat-radio-button>\r\n          <p\r\n            *ngIf=\"\r\n              isLessResults(bundle, 'radio') || isMoreResults(bundle, 'radio')\r\n            \"\r\n          >\r\n            <u\r\n              *ngIf=\"isLessResults(bundle, 'radio')\"\r\n              class=\"lessResults mat-typography\"\r\n              (click)=\"displayLessResults('radio')\"\r\n              >{{ 'igo.geo.filter.displayLessResults' | translate }}\r\n            </u>\r\n            <u\r\n              *ngIf=\"isMoreResults(bundle, 'radio')\"\r\n              class=\"moreResults mat-typography\"\r\n              (click)=\"displayMoreResults('radio')\"\r\n              >{{ 'igo.geo.filter.displayMoreResults' | translate }}\r\n            </u>\r\n          </p>\r\n        </mat-radio-group>\r\n      </ng-container>\r\n    </div>\r\n\r\n    <div class=\"selectGroups\" *ngIf=\"selector.selectorType === 'select'\">\r\n      <mat-divider></mat-divider>\r\n      <div class=\"groupsSelector\" *ngIf=\"getSelectGroups().length > 1\">\r\n        <mat-form-field>\r\n          <mat-select\r\n            formControlName=\"selectGroup\"\r\n            [matTooltip]=\"'igo.geo.layer.legend.selectStyle' | translate\"\r\n            tooltip-position=\"below\"\r\n            matTooltipShowDelay=\"500\"\r\n            [(value)]=\"currentSelectGroup\"\r\n          >\r\n            <mat-option\r\n              *ngFor=\"let selectorGroup of getSelectGroups()\"\r\n              [value]=\"selectorGroup\"\r\n              >{{ selectorGroup.title }}\r\n            </mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </div>\r\n      <ng-container *ngFor=\"let bundle of currentSelectGroup.computedSelectors\">\r\n        <h3>{{ bundle.title }}</h3>\r\n        <div class=\"groupsSelector\">\r\n          <mat-button\r\n            *ngIf=\"bundle.unfiltered && !bundle.multiple\"\r\n            mat-icon-button\r\n            color=\"warn\"\r\n            [matTooltip]=\"'igo.geo.filter.resetFilters' | translate\"\r\n            tooltip-position=\"below\"\r\n            matTooltipShowDelay=\"500\"\r\n            matTooltipClass=\"material-tooltip\"\r\n            (click)=\"emptySelect()\"\r\n          >\r\n            <mat-icon svgIcon=\"filter-remove\"></mat-icon>\r\n          </mat-button>\r\n          <mat-form-field\r\n            [style.width.%]=\"bundle.width ? bundle.width : undefined\"\r\n          >\r\n            <div *ngIf=\"bundle.multiple; else notMulti\">\r\n              <mat-select\r\n                #selection\r\n                [multiple]=\"bundle.multiple\"\r\n                [placeholder]=\"bundle.title\"\r\n                formControlName=\"selectMulti\"\r\n              >\r\n                <div class=\"checkboxes mat-typography\">\r\n                  <mat-checkbox\r\n                    *ngIf=\"bundle.multiple\"\r\n                    [(ngModel)]=\"selectAllSelected\"\r\n                    [ngModelOptions]=\"{ standalone: true }\"\r\n                    (change)=\"toggleAllSelection()\"\r\n                    >Tous\r\n                  </mat-checkbox>\r\n                </div>\r\n                <mat-option\r\n                  *ngFor=\"let ogcSelect of bundle.selectors\"\r\n                  [matTooltip]=\"getToolTip(ogcSelect)\"\r\n                  tooltip-position=\"below\"\r\n                  matTooltipDelay=\"500\"\r\n                  matTooltipClass=\"material-tooltip\"\r\n                  (onSelectionChange)=\"\r\n                    selectOptionClick($event.source.value, bundle, $event)\r\n                  \"\r\n                  [value]=\"ogcSelect\"\r\n                  >{{ ogcSelect.title }}\r\n                </mat-option>\r\n              </mat-select>\r\n            </div>\r\n            <ng-template #notMulti>\r\n              <mat-select [placeholder]=\"bundle.title\" formControlName=\"select\">\r\n                <mat-option\r\n                  *ngFor=\"let ogcSelect of bundle.selectors\"\r\n                  [matTooltip]=\"getToolTip(ogcSelect)\"\r\n                  tooltip-position=\"below\"\r\n                  matTooltipDelay=\"500\"\r\n                  matTooltipClass=\"material-tooltip\"\r\n                  [value]=\"ogcSelect\"\r\n                  (onSelectionChange)=\"\r\n                    selectOptionClick($event.source.value, bundle)\r\n                  \"\r\n                  >{{ ogcSelect.title }}\r\n                </mat-option>\r\n              </mat-select>\r\n            </ng-template>\r\n          </mat-form-field>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n\r\n    <div\r\n      class=\"autocompleteGroups\"\r\n      *ngIf=\"selector.selectorType === 'autocomplete'\"\r\n    >\r\n      <mat-divider></mat-divider>\r\n      <div class=\"groupsSelector\" *ngIf=\"getAutocompleteGroups().length > 1\">\r\n        <mat-form-field>\r\n          <mat-select\r\n            formControlName=\"autocompleteGroup\"\r\n            [matTooltip]=\"'igo.geo.layer.legend.selectStyle' | translate\"\r\n            tooltip-position=\"below\"\r\n            matTooltipShowDelay=\"500\"\r\n            [(value)]=\"currentAutocompleteGroup\"\r\n          >\r\n            <mat-option\r\n              *ngFor=\"let autocompleteGroup of getAutocompleteGroups()\"\r\n              [value]=\"autocompleteGroup\"\r\n              >{{ autocompleteGroup.title }}\r\n            </mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </div>\r\n      <ng-container\r\n        *ngFor=\"let bundle of currentAutocompleteGroup.computedSelectors\"\r\n      >\r\n        <h3>{{ bundle.title }}</h3>\r\n        <div class=\"groupsSelector\">\r\n          <mat-button\r\n            *ngIf=\"bundle.unfiltered\"\r\n            mat-icon-button\r\n            color=\"warn\"\r\n            [matTooltip]=\"'igo.geo.filter.resetFilters' | translate\"\r\n            tooltip-position=\"below\"\r\n            matTooltipShowDelay=\"500\"\r\n            matTooltipClass=\"material-tooltip\"\r\n            (click)=\"emptyAutocomplete()\"\r\n          >\r\n            <mat-icon svgIcon=\"filter-remove\"></mat-icon>\r\n          </mat-button>\r\n          <mat-form-field\r\n            *ngIf=\"filteredOgcAutocomplete[bundle.id]\"\r\n            [style.width.%]=\"bundle.width ? bundle.width : undefined\"\r\n          >\r\n            <input\r\n              matInput\r\n              type=\"text\"\r\n              formControlName=\"autocomplete\"\r\n              #autocomplete\r\n              class=\"autocomplete\"\r\n              [matAutocomplete]=\"auto\"\r\n              [placeholder]=\"bundle.title\"\r\n            />\r\n            <mat-autocomplete\r\n              #auto=\"matAutocomplete\"\r\n              #autocomplete\r\n              (optionSelected)=\"autocompleteOptionClick($event.option.value)\"\r\n              [displayWith]=\"displayFn\"\r\n            >\r\n              <mat-option\r\n                *ngFor=\"\r\n                  let ogcAutocomplete of filteredOgcAutocomplete[bundle.id]\r\n                    | async\r\n                \"\r\n                [value]=\"ogcAutocomplete\"\r\n              >\r\n                {{ ogcAutocomplete.value }}\r\n              </mat-option>\r\n            </mat-autocomplete>\r\n          </mat-form-field>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</form>\r\n\r\n<div *ngIf=\"isTemporalOperator()\">\r\n  <mat-divider></mat-divider>\r\n  <h3 *ngIf=\"!currentFilter.title\">\r\n    {{ 'igo.geo.filter.reportingDate' | translate }}\r\n  </h3>\r\n  <h3 *ngIf=\"currentFilter.title\">{{ currentFilter.title }}</h3>\r\n  <igo-ogc-filter-time\r\n    [datasource]=\"datasource\"\r\n    [currentFilter]=\"currentFilter\"\r\n    (changeProperty)=\"changeProperty($event.value, $event.pos)\"\r\n  >\r\n  </igo-ogc-filter-time>\r\n</div>\r\n", styles: [":host .mat-button-toggle-group{margin:5px;flex-wrap:wrap;box-shadow:none!important;width:95%}:host .checkboxes{flex-wrap:wrap;box-shadow:none}:host .groupsSelector{text-align:center}:host mat-button-toggle{display:inline-flex;border:1.5px solid black;border-radius:5px;margin:5px;white-space:normal;min-height:40px;height:auto;width:142px}:host mat-button-toggle ::ng-deep .mat-button-toggle-label-content{line-height:unset;font-size:small;display:block}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){:host mat-button-toggle{width:45%}}:host ::ng-deep .material-tooltip{white-space:pre-wrap}:host mat-checkbox,:host mat-radio-button{margin:7px;width:95%;display:inline-flex;font-size:larger}:host mat-checkbox ::ng-deep label,:host mat-radio-button ::ng-deep label{white-space:normal}:host mat-checkbox{vertical-align:middle}:host mat-button{padding-right:10px;cursor:pointer}:host h3{margin:7px;text-align:left}:host u{cursor:pointer;color:#00f;margin:5px}:host p{margin:unset}\n"], dependencies: [{ kind: "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 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" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: OgcFilterSelectionComponent, decorators: [{
             type: Component,
@@ -25331,7 +25389,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                         OgcFilterTimeComponent,
                         AsyncPipe,
                         TranslateModule
-                    ], template: "<form [formGroup]=\"form\">\r\n  <div *ngFor=\"let selector of ogcFiltersSelectors\">\r\n    <div\r\n      class=\"pushButtonGroups\"\r\n      *ngIf=\"selector.selectorType === 'pushButton'\"\r\n    >\r\n      <mat-divider></mat-divider>\r\n      <div class=\"groupsSelector\" *ngIf=\"getPushButtonsGroups().length > 1\">\r\n        <mat-form-field>\r\n          <mat-select\r\n            formControlName=\"pushButtonsGroup\"\r\n            [matTooltip]=\"'igo.geo.layer.legend.selectStyle' | translate\"\r\n            tooltip-position=\"below\"\r\n            matTooltipShowDelay=\"500\"\r\n            [(value)]=\"currentPushButtonsGroup\"\r\n          >\r\n            <mat-option\r\n              *ngFor=\"let selectorGroup of getPushButtonsGroups()\"\r\n              [value]=\"selectorGroup\"\r\n              >{{ selectorGroup.title }}\r\n            </mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </div>\r\n      <ng-container\r\n        *ngFor=\"let bundle of currentPushButtonsGroup.computedSelectors\"\r\n      >\r\n        <h3>{{ bundle.title }}</h3>\r\n        <mat-button-toggle-group\r\n          formControlName=\"pushButtons\"\r\n          class=\"mat-typography\"\r\n          appearance=\"legacy\"\r\n          vertical=\"{{ bundleIsVertical(bundle) }}\"\r\n          multiple=\"true\"\r\n        >\r\n          <mat-button-toggle\r\n            *ngFor=\"let ogcPushButton of bundle.selectors\"\r\n            [matTooltip]=\"getToolTip(ogcPushButton)\"\r\n            tooltip-position=\"below\"\r\n            matTooltipShowDelay=\"500\"\r\n            matTooltipClass=\"material-tooltip\"\r\n            [ngStyle]=\"getButtonColor(ogcPushButton)\"\r\n            [checked]=\"ogcPushButton.enabled\"\r\n            (change)=\"onSelectionChange(ogcPushButton, selector.selectorType)\"\r\n            [value]=\"ogcPushButton\"\r\n            >{{ ogcPushButton.title }}\r\n          </mat-button-toggle>\r\n        </mat-button-toggle-group>\r\n      </ng-container>\r\n    </div>\r\n\r\n    <div class=\"checkboxGroups\" *ngIf=\"selector.selectorType === 'checkbox'\">\r\n      <mat-divider></mat-divider>\r\n      <div class=\"groupsSelector\" *ngIf=\"getCheckboxesGroups().length > 1\">\r\n        <mat-form-field>\r\n          <mat-select\r\n            formControlName=\"checkboxesGroup\"\r\n            [matTooltip]=\"'igo.geo.layer.legend.selectStyle' | translate\"\r\n            tooltip-position=\"below\"\r\n            matTooltipShowDelay=\"500\"\r\n            [(value)]=\"currentCheckboxesGroup\"\r\n          >\r\n            <mat-option\r\n              *ngFor=\"let selectorGroup of getCheckboxesGroups()\"\r\n              [value]=\"selectorGroup\"\r\n              >{{ selectorGroup.title }}\r\n            </mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </div>\r\n      <ng-container\r\n        *ngFor=\"let bundle of currentCheckboxesGroup.computedSelectors\"\r\n      >\r\n        <h3>{{ bundle.title }}</h3>\r\n        <div class=\"checkboxes mat-typography\">\r\n          <mat-checkbox\r\n            *ngFor=\"let ogcCheckbox of bundle.selectors\"\r\n            [matTooltip]=\"getToolTip(ogcCheckbox)\"\r\n            tooltip-position=\"below\"\r\n            matTooltipShowDelay=\"500\"\r\n            matTooltipClass=\"material-tooltip\"\r\n            [checked]=\"ogcCheckbox.enabled\"\r\n            (change)=\"onSelectionChange(ogcCheckbox, selector.selectorType)\"\r\n            [value]=\"ogcCheckbox\"\r\n            >{{ ogcCheckbox.title }}\r\n          </mat-checkbox>\r\n        </div>\r\n        <p\r\n          *ngIf=\"\r\n            isLessResults(bundle, 'checkbox') ||\r\n            isMoreResults(bundle, 'checkbox')\r\n          \"\r\n        >\r\n          <u\r\n            *ngIf=\"isLessResults(bundle, 'checkbox')\"\r\n            class=\"lessResults mat-typography\"\r\n            (click)=\"displayLessResults('checkbox')\"\r\n            >{{ 'igo.geo.filter.displayLessResults' | translate }}\r\n          </u>\r\n          <u\r\n            *ngIf=\"isMoreResults(bundle, 'checkbox')\"\r\n            class=\"moreResults mat-typography\"\r\n            (click)=\"displayMoreResults('checkbox')\"\r\n            >{{ 'igo.geo.filter.displayMoreResults' | translate }}\r\n          </u>\r\n        </p>\r\n      </ng-container>\r\n    </div>\r\n\r\n    <div\r\n      class=\"radioButtonGroups\"\r\n      *ngIf=\"selector.selectorType === 'radioButton'\"\r\n    >\r\n      <mat-divider></mat-divider>\r\n      <div class=\"groupsSelector\" *ngIf=\"getRadioButtonsGroups().length > 1\">\r\n        <mat-form-field>\r\n          <mat-select\r\n            formControlName=\"radioButtonsGroup\"\r\n            [matTooltip]=\"'igo.geo.layer.legend.selectStyle' | translate\"\r\n            tooltip-position=\"below\"\r\n            matTooltipShowDelay=\"500\"\r\n            [(value)]=\"currentRadioButtonsGroup\"\r\n          >\r\n            <mat-option\r\n              *ngFor=\"let selectorGroup of getRadioButtonsGroups()\"\r\n              [value]=\"selectorGroup\"\r\n              >{{ selectorGroup.title }}\r\n            </mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </div>\r\n      <ng-container\r\n        *ngFor=\"let bundle of currentRadioButtonsGroup.computedSelectors\"\r\n      >\r\n        <h3>{{ bundle.title }}</h3>\r\n        <mat-radio-group formControlName=\"radioButtons\" class=\"mat-typography\">\r\n          <mat-radio-button\r\n            *ngIf=\"bundle.unfiltered\"\r\n            [matTooltip]=\"'igo.geo.filter.resetFilters' | translate\"\r\n            tooltip-position=\"below\"\r\n            matTooltipShowDelay=\"500\"\r\n            matTooltipClass=\"material-tooltip\"\r\n            (change)=\"emptyRadioButtons()\"\r\n            >{{ 'igo.geo.filter.resetFilters' | translate }}\r\n          </mat-radio-button>\r\n          <mat-radio-button\r\n            *ngFor=\"let ogcRadioButton of bundle.selectors\"\r\n            [matTooltip]=\"getToolTip(ogcRadioButton)\"\r\n            tooltip-position=\"below\"\r\n            matTooltipShowDelay=\"500\"\r\n            matTooltipClass=\"material-tooltip\"\r\n            [checked]=\"ogcRadioButton.enabled\"\r\n            (change)=\"onSelectionChange(ogcRadioButton, selector.selectorType)\"\r\n            [value]=\"ogcRadioButton\"\r\n            >{{ ogcRadioButton.title }}\r\n          </mat-radio-button>\r\n          <p\r\n            *ngIf=\"\r\n              isLessResults(bundle, 'radio') || isMoreResults(bundle, 'radio')\r\n            \"\r\n          >\r\n            <u\r\n              *ngIf=\"isLessResults(bundle, 'radio')\"\r\n              class=\"lessResults mat-typography\"\r\n              (click)=\"displayLessResults('radio')\"\r\n              >{{ 'igo.geo.filter.displayLessResults' | translate }}\r\n            </u>\r\n            <u\r\n              *ngIf=\"isMoreResults(bundle, 'radio')\"\r\n              class=\"moreResults mat-typography\"\r\n              (click)=\"displayMoreResults('radio')\"\r\n              >{{ 'igo.geo.filter.displayMoreResults' | translate }}\r\n            </u>\r\n          </p>\r\n        </mat-radio-group>\r\n      </ng-container>\r\n    </div>\r\n\r\n    <div class=\"selectGroups\" *ngIf=\"selector.selectorType === 'select'\">\r\n      <mat-divider></mat-divider>\r\n      <div class=\"groupsSelector\" *ngIf=\"getSelectGroups().length > 1\">\r\n        <mat-form-field>\r\n          <mat-select\r\n            formControlName=\"selectGroup\"\r\n            [matTooltip]=\"'igo.geo.layer.legend.selectStyle' | translate\"\r\n            tooltip-position=\"below\"\r\n            matTooltipShowDelay=\"500\"\r\n            [(value)]=\"currentSelectGroup\"\r\n          >\r\n            <mat-option\r\n              *ngFor=\"let selectorGroup of getSelectGroups()\"\r\n              [value]=\"selectorGroup\"\r\n              >{{ selectorGroup.title }}\r\n            </mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </div>\r\n      <ng-container *ngFor=\"let bundle of currentSelectGroup.computedSelectors\">\r\n        <h3>{{ bundle.title }}</h3>\r\n        <div class=\"groupsSelector\">\r\n          <mat-button\r\n            *ngIf=\"bundle.unfiltered && !bundle.multiple\"\r\n            mat-icon-button\r\n            color=\"warn\"\r\n            [matTooltip]=\"'igo.geo.filter.resetFilters' | translate\"\r\n            tooltip-position=\"below\"\r\n            matTooltipShowDelay=\"500\"\r\n            matTooltipClass=\"material-tooltip\"\r\n            (click)=\"emptySelect()\"\r\n          >\r\n            <mat-icon svgIcon=\"filter-remove\"></mat-icon>\r\n          </mat-button>\r\n          <mat-form-field\r\n            [style.width.%]=\"bundle.width ? bundle.width : undefined\"\r\n          >\r\n            <div *ngIf=\"bundle.multiple; else notMulti\">\r\n              <mat-select\r\n                #selection\r\n                [multiple]=\"bundle.multiple\"\r\n                [placeholder]=\"bundle.title\"\r\n                formControlName=\"selectMulti\"\r\n              >\r\n                <div class=\"checkboxes mat-typography\">\r\n                  <mat-checkbox\r\n                    *ngIf=\"bundle.multiple\"\r\n                    [(ngModel)]=\"selectAllSelected\"\r\n                    [ngModelOptions]=\"{ standalone: true }\"\r\n                    (change)=\"toggleAllSelection()\"\r\n                    >Tous\r\n                  </mat-checkbox>\r\n                </div>\r\n                <mat-option\r\n                  *ngFor=\"let ogcSelect of bundle.selectors\"\r\n                  [matTooltip]=\"getToolTip(ogcSelect)\"\r\n                  tooltip-position=\"below\"\r\n                  matTooltipDelay=\"500\"\r\n                  matTooltipClass=\"material-tooltip\"\r\n                  (onSelectionChange)=\"\r\n                    selectOptionClick($event.source.value, bundle, $event)\r\n                  \"\r\n                  [value]=\"ogcSelect\"\r\n                  >{{ ogcSelect.title }}\r\n                </mat-option>\r\n              </mat-select>\r\n            </div>\r\n            <ng-template #notMulti>\r\n              <mat-select [placeholder]=\"bundle.title\" formControlName=\"select\">\r\n                <mat-option\r\n                  *ngFor=\"let ogcSelect of bundle.selectors\"\r\n                  [matTooltip]=\"getToolTip(ogcSelect)\"\r\n                  tooltip-position=\"below\"\r\n                  matTooltipDelay=\"500\"\r\n                  matTooltipClass=\"material-tooltip\"\r\n                  [value]=\"ogcSelect\"\r\n                  (onSelectionChange)=\"\r\n                    selectOptionClick($event.source.value, bundle)\r\n                  \"\r\n                  >{{ ogcSelect.title }}\r\n                </mat-option>\r\n              </mat-select>\r\n            </ng-template>\r\n          </mat-form-field>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n\r\n    <div\r\n      class=\"autocompleteGroups\"\r\n      *ngIf=\"selector.selectorType === 'autocomplete'\"\r\n    >\r\n      <mat-divider></mat-divider>\r\n      <div class=\"groupsSelector\" *ngIf=\"getAutocompleteGroups().length > 1\">\r\n        <mat-form-field>\r\n          <mat-select\r\n            formControlName=\"autocompleteGroup\"\r\n            [matTooltip]=\"'igo.geo.layer.legend.selectStyle' | translate\"\r\n            tooltip-position=\"below\"\r\n            matTooltipShowDelay=\"500\"\r\n            [(value)]=\"currentAutocompleteGroup\"\r\n          >\r\n            <mat-option\r\n              *ngFor=\"let autocompleteGroup of getAutocompleteGroups()\"\r\n              [value]=\"autocompleteGroup\"\r\n              >{{ autocompleteGroup.title }}\r\n            </mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </div>\r\n      <ng-container\r\n        *ngFor=\"let bundle of currentAutocompleteGroup.computedSelectors\"\r\n      >\r\n        <h3>{{ bundle.title }}</h3>\r\n        <div class=\"groupsSelector\">\r\n          <mat-button\r\n            *ngIf=\"bundle.unfiltered\"\r\n            mat-icon-button\r\n            color=\"warn\"\r\n            [matTooltip]=\"'igo.geo.filter.resetFilters' | translate\"\r\n            tooltip-position=\"below\"\r\n            matTooltipShowDelay=\"500\"\r\n            matTooltipClass=\"material-tooltip\"\r\n            (click)=\"emptyAutocomplete()\"\r\n          >\r\n            <mat-icon svgIcon=\"filter-remove\"></mat-icon>\r\n          </mat-button>\r\n          <mat-form-field\r\n            *ngIf=\"filteredOgcAutocomplete[bundle.id]\"\r\n            [style.width.%]=\"bundle.width ? bundle.width : undefined\"\r\n          >\r\n            <input\r\n              matInput\r\n              type=\"text\"\r\n              formControlName=\"autocomplete\"\r\n              #autocomplete\r\n              class=\"autocomplete\"\r\n              [matAutocomplete]=\"auto\"\r\n              [placeholder]=\"bundle.title\"\r\n            />\r\n            <mat-autocomplete\r\n              #auto=\"matAutocomplete\"\r\n              #autocomplete\r\n              (optionSelected)=\"autocompleteOptionClick($event.option.value)\"\r\n              [displayWith]=\"displayFn\"\r\n            >\r\n              <mat-option\r\n                *ngFor=\"\r\n                  let ogcAutocomplete of filteredOgcAutocomplete[bundle.id]\r\n                    | async\r\n                \"\r\n                [value]=\"ogcAutocomplete\"\r\n              >\r\n                {{ ogcAutocomplete.value }}\r\n              </mat-option>\r\n            </mat-autocomplete>\r\n          </mat-form-field>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</form>\r\n\r\n<div *ngIf=\"isTemporalOperator()\">\r\n  <mat-divider></mat-divider>\r\n  <h3 *ngIf=\"!currentFilter.title\">\r\n    {{ 'igo.geo.filter.reportingDate' | translate }}\r\n  </h3>\r\n  <h3 *ngIf=\"currentFilter.title\">{{ currentFilter.title }}</h3>\r\n  <igo-ogc-filter-time\r\n    [datasource]=\"datasource\"\r\n    [currentFilter]=\"currentFilter\"\r\n    (changeProperty)=\"changeProperty($event.value, $event.pos)\"\r\n  >\r\n  </igo-ogc-filter-time>\r\n</div>\r\n", styles: [":host .mat-button-toggle-group{margin:5px;flex-wrap:wrap;box-shadow:none!important;width:95%}:host .checkboxes{flex-wrap:wrap;box-shadow:none}:host .groupsSelector{text-align:center}:host mat-button-toggle{display:inline-flex;border:1.5px solid black;border-radius:5px;margin:5px;white-space:normal;min-height:40px;height:auto;width:142px}:host mat-button-toggle ::ng-deep .mat-button-toggle-label-content{line-height:unset;font-size:small;display:block}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){:host mat-button-toggle{width:45%}}:host ::ng-deep .material-tooltip{white-space:pre-wrap}:host mat-checkbox,:host mat-radio-button{margin:7px;width:95%;display:inline-flex;font-size:larger}:host mat-checkbox ::ng-deep label,:host mat-radio-button ::ng-deep label{white-space:normal}:host mat-checkbox{vertical-align:middle}:host mat-button{padding-right:10px;cursor:pointer}:host h3{margin:7px;text-align:left}:host u{cursor:pointer;color:#00f;margin:5px}:host p{margin:unset}\n"] }]
+                    ], 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"] }]
         }], ctorParameters: () => [{ type: OGCFilterService }, { type: i1$6.UntypedFormBuilder }, { type: i3$6.DOMService }, { type: i1.ConfigService }, { type: i0.ChangeDetectorRef }], propDecorators: { sel: [{
                 type: ViewChild,
                 args: ['selection']
@@ -26465,7 +26523,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>\r\n  {{ 'igo.geo.style.styleModal' | translate }}\r\n</h2>\r\n<div\r\n  class=\"edition-drawing\"\r\n  mat-dialog-content\r\n  [hidden]=\"data.features.length === 0\"\r\n>\r\n  <form class=\"igo-form\" [formGroup]=\"form\">\r\n    <div class=\"color-picker\">\r\n      <ng-container *ngIf=\"linestringOnly !== true\">\r\n        <span>\r\n          <mat-icon class=\"stroke-palette-icon\" svgIcon=\"square\"></mat-icon>\r\n          {{ 'igo.geo.style.fill' | translate }}\r\n        </span>\r\n\r\n        <igo-color-picker-form-field\r\n          formControlName=\"fill\"\r\n        ></igo-color-picker-form-field>\r\n      </ng-container>\r\n\r\n      <span>\r\n        <mat-icon class=\"stroke-palette-icon\" svgIcon=\"square-outline\">\r\n        </mat-icon>\r\n        {{ 'igo.geo.style.stroke' | translate }}\r\n      </span>\r\n\r\n      <igo-color-picker-form-field\r\n        formControlName=\"stroke\"\r\n      ></igo-color-picker-form-field>\r\n    </div>\r\n\r\n    <div class=\"igo-input-container\">\r\n      <mat-form-field class=\"igo-form-input-box\" subscriptSizing=\"dynamic\">\r\n        <mat-label>{{ 'igo.geo.style.fontSize' | translate }}</mat-label>\r\n        <input\r\n          matInput\r\n          #testFontSize\r\n          type=\"number\"\r\n          placeholder=\"10\"\r\n          min=\"10\"\r\n          onkeydown=\"return event.keyCode !== 69\"\r\n          [value]=\"getFeatureFontSize()\"\r\n          (input)=\"styleModalData.fontSize = $any($event.target).value\"\r\n        />\r\n        <span matTextSuffix>px</span>\r\n      </mat-form-field>\r\n      <mat-form-field class=\"igo-form-input-box\" subscriptSizing=\"dynamic\">\r\n        <mat-label>{{ 'igo.geo.style.fontStyle' | translate }}</mat-label>\r\n        <mat-select\r\n          #testFontStyle\r\n          [value]=\"getFeatureFontStyle()\"\r\n          (selectionChange)=\"styleModalData.fontStyle = $event.value\"\r\n        >\r\n          <mat-option\r\n            *ngFor=\"let fontSelect of allFontStyles\"\r\n            [value]=\"fontSelect\"\r\n          >\r\n            {{ fontSelect }}\r\n          </mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n      <mat-form-field class=\"igo-form-input-box\" subscriptSizing=\"dynamic\">\r\n        <mat-label>{{ 'igo.geo.style.offsetX' | translate }}</mat-label>\r\n        <input\r\n          matInput\r\n          #offsetXInput\r\n          type=\"number\"\r\n          onkeydown=\"return event.keyCode !== 69\"\r\n          [value]=\"getFeatureOffsetX()\"\r\n          (input)=\"styleModalData.offsetX = $any($event.target).value\"\r\n        />\r\n      </mat-form-field>\r\n      <mat-form-field class=\"igo-form-input-box\" subscriptSizing=\"dynamic\">\r\n        <mat-label>{{ 'igo.geo.style.offsetY' | translate }}</mat-label>\r\n        <input\r\n          matInput\r\n          #offsetYInput\r\n          type=\"number\"\r\n          onkeydown=\"return event.keyCode !== 69\"\r\n          [value]=\"getFeatureOffsetY()\"\r\n          (input)=\"styleModalData.offsetY = $any($event.target).value\"\r\n        />\r\n      </mat-form-field>\r\n    </div>\r\n  </form>\r\n</div>\r\n<div mat-dialog-actions>\r\n  <button mat-raised-button (click)=\"cancelDrawing()\">\r\n    {{ 'igo.geo.style.cancel' | translate }}\r\n  </button>\r\n  <button mat-raised-button color=\"primary\" (click)=\"confirm()\">OK</button>\r\n</div>\r\n", styles: [":host h2{margin:0 0 1px}:host form{padding-top:16px}:host .fill-field,:host .stroke-field{width:140px}:host .color-picker{display:grid;grid-template-columns:auto 1fr;align-items:center;grid-gap:16px;margin-bottom:16px}:host .color-picker span{display:flex;align-items:center}:host .color-picker span mat-icon{margin-right:8px}:host .box{width:25px;height:25px}:host .igo-input-container{display:grid;grid-template-columns:1fr 1fr;grid-gap:16px}:host .igo-form-input-box{width:150px}:host button{margin-right:5px}\n"], dependencies: [{ kind: "directive", type: 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\" 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" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: StyleModalDrawingComponent, decorators: [{
             type: Component,
@@ -26485,7 +26543,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                         MatDialogActions,
                         MatButtonModule,
                         TranslateModule
-                    ], template: "<h2 mat-dialog-title>\r\n  {{ 'igo.geo.style.styleModal' | translate }}\r\n</h2>\r\n<div\r\n  class=\"edition-drawing\"\r\n  mat-dialog-content\r\n  [hidden]=\"data.features.length === 0\"\r\n>\r\n  <form class=\"igo-form\" [formGroup]=\"form\">\r\n    <div class=\"color-picker\">\r\n      <ng-container *ngIf=\"linestringOnly !== true\">\r\n        <span>\r\n          <mat-icon class=\"stroke-palette-icon\" svgIcon=\"square\"></mat-icon>\r\n          {{ 'igo.geo.style.fill' | translate }}\r\n        </span>\r\n\r\n        <igo-color-picker-form-field\r\n          formControlName=\"fill\"\r\n        ></igo-color-picker-form-field>\r\n      </ng-container>\r\n\r\n      <span>\r\n        <mat-icon class=\"stroke-palette-icon\" svgIcon=\"square-outline\">\r\n        </mat-icon>\r\n        {{ 'igo.geo.style.stroke' | translate }}\r\n      </span>\r\n\r\n      <igo-color-picker-form-field\r\n        formControlName=\"stroke\"\r\n      ></igo-color-picker-form-field>\r\n    </div>\r\n\r\n    <div class=\"igo-input-container\">\r\n      <mat-form-field class=\"igo-form-input-box\" subscriptSizing=\"dynamic\">\r\n        <mat-label>{{ 'igo.geo.style.fontSize' | translate }}</mat-label>\r\n        <input\r\n          matInput\r\n          #testFontSize\r\n          type=\"number\"\r\n          placeholder=\"10\"\r\n          min=\"10\"\r\n          onkeydown=\"return event.keyCode !== 69\"\r\n          [value]=\"getFeatureFontSize()\"\r\n          (input)=\"styleModalData.fontSize = $any($event.target).value\"\r\n        />\r\n        <span matTextSuffix>px</span>\r\n      </mat-form-field>\r\n      <mat-form-field class=\"igo-form-input-box\" subscriptSizing=\"dynamic\">\r\n        <mat-label>{{ 'igo.geo.style.fontStyle' | translate }}</mat-label>\r\n        <mat-select\r\n          #testFontStyle\r\n          [value]=\"getFeatureFontStyle()\"\r\n          (selectionChange)=\"styleModalData.fontStyle = $event.value\"\r\n        >\r\n          <mat-option\r\n            *ngFor=\"let fontSelect of allFontStyles\"\r\n            [value]=\"fontSelect\"\r\n          >\r\n            {{ fontSelect }}\r\n          </mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n      <mat-form-field class=\"igo-form-input-box\" subscriptSizing=\"dynamic\">\r\n        <mat-label>{{ 'igo.geo.style.offsetX' | translate }}</mat-label>\r\n        <input\r\n          matInput\r\n          #offsetXInput\r\n          type=\"number\"\r\n          onkeydown=\"return event.keyCode !== 69\"\r\n          [value]=\"getFeatureOffsetX()\"\r\n          (input)=\"styleModalData.offsetX = $any($event.target).value\"\r\n        />\r\n      </mat-form-field>\r\n      <mat-form-field class=\"igo-form-input-box\" subscriptSizing=\"dynamic\">\r\n        <mat-label>{{ 'igo.geo.style.offsetY' | translate }}</mat-label>\r\n        <input\r\n          matInput\r\n          #offsetYInput\r\n          type=\"number\"\r\n          onkeydown=\"return event.keyCode !== 69\"\r\n          [value]=\"getFeatureOffsetY()\"\r\n          (input)=\"styleModalData.offsetY = $any($event.target).value\"\r\n        />\r\n      </mat-form-field>\r\n    </div>\r\n  </form>\r\n</div>\r\n<div mat-dialog-actions>\r\n  <button mat-raised-button (click)=\"cancelDrawing()\">\r\n    {{ 'igo.geo.style.cancel' | translate }}\r\n  </button>\r\n  <button mat-raised-button color=\"primary\" (click)=\"confirm()\">OK</button>\r\n</div>\r\n", styles: [":host h2{margin:0 0 1px}:host form{padding-top:16px}:host .fill-field,:host .stroke-field{width:140px}:host .color-picker{display:grid;grid-template-columns:auto 1fr;align-items:center;grid-gap:16px;margin-bottom:16px}:host .color-picker span{display:flex;align-items:center}:host .color-picker span mat-icon{margin-right:8px}:host .box{width:25px;height:25px}:host .igo-input-container{display:grid;grid-template-columns:1fr 1fr;grid-gap:16px}:host .igo-form-input-box{width:150px}:host button{margin-right:5px}\n"] }]
+                    ], 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"] }]
         }], ctorParameters: () => [{ type: i1$5.MatDialogRef }, { type: i1$6.UntypedFormBuilder }, { type: DrawStyleService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
@@ -26507,7 +26565,7 @@ class DrawLayerPopupComponent {
         this.dialogRef.close(labelString);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: DrawLayerPopupComponent, deps: [{ token: i1$5.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: DrawLayerPopupComponent, isStandalone: true, selector: "igo-draw-popup-component", inputs: { confirmFlag: "confirmFlag" }, ngImport: i0, template: "<div mat-dialog-content>\r\n  <p class=\"mat-typography\">\r\n    {{ 'igo.geo.draw.layer.layerDialogInstruction' | translate }}\r\n  </p>\r\n  <mat-form-field class=\"example-full-width\">\r\n    <input\r\n      #input\r\n      matInput\r\n      placeholder=\"{{ 'igo.geo.draw.layer.title' | translate }}\"\r\n    />\r\n  </mat-form-field>\r\n</div>\r\n<div mat-dialog-actions>\r\n  <button mat-raised-button (click)=\"cancelDrawing()\">\r\n    {{ 'igo.geo.draw.cancel' | translate }}\r\n  </button>\r\n  <button mat-raised-button color=\"primary\" (click)=\"confirm(input.value)\">\r\n    OK\r\n  </button>\r\n</div>\r\n", styles: [":host .fields-container{display:flex}\n"], dependencies: [{ kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { 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: 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: "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: DrawLayerPopupComponent, isStandalone: true, selector: "igo-draw-popup-component", inputs: { confirmFlag: "confirmFlag" }, ngImport: i0, template: "<div mat-dialog-content>\n  <p class=\"mat-typography\">\n    {{ 'igo.geo.draw.layer.layerDialogInstruction' | translate }}\n  </p>\n  <mat-form-field class=\"example-full-width\">\n    <input\n      #input\n      matInput\n      placeholder=\"{{ 'igo.geo.draw.layer.title' | translate }}\"\n    />\n  </mat-form-field>\n</div>\n<div mat-dialog-actions>\n  <button mat-raised-button (click)=\"cancelDrawing()\">\n    {{ 'igo.geo.draw.cancel' | translate }}\n  </button>\n  <button mat-raised-button color=\"primary\" (click)=\"confirm(input.value)\">\n    OK\n  </button>\n</div>\n", styles: [":host .fields-container{display:flex}\n"], dependencies: [{ kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { 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: 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: "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: DrawLayerPopupComponent, decorators: [{
             type: Component,
@@ -26518,7 +26576,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                         MatDialogActions,
                         MatButtonModule,
                         TranslateModule
-                    ], template: "<div mat-dialog-content>\r\n  <p class=\"mat-typography\">\r\n    {{ 'igo.geo.draw.layer.layerDialogInstruction' | translate }}\r\n  </p>\r\n  <mat-form-field class=\"example-full-width\">\r\n    <input\r\n      #input\r\n      matInput\r\n      placeholder=\"{{ 'igo.geo.draw.layer.title' | translate }}\"\r\n    />\r\n  </mat-form-field>\r\n</div>\r\n<div mat-dialog-actions>\r\n  <button mat-raised-button (click)=\"cancelDrawing()\">\r\n    {{ 'igo.geo.draw.cancel' | translate }}\r\n  </button>\r\n  <button mat-raised-button color=\"primary\" (click)=\"confirm(input.value)\">\r\n    OK\r\n  </button>\r\n</div>\r\n", styles: [":host .fields-container{display:flex}\n"] }]
+                    ], template: "<div mat-dialog-content>\n  <p class=\"mat-typography\">\n    {{ 'igo.geo.draw.layer.layerDialogInstruction' | translate }}\n  </p>\n  <mat-form-field class=\"example-full-width\">\n    <input\n      #input\n      matInput\n      placeholder=\"{{ 'igo.geo.draw.layer.title' | translate }}\"\n    />\n  </mat-form-field>\n</div>\n<div mat-dialog-actions>\n  <button mat-raised-button (click)=\"cancelDrawing()\">\n    {{ 'igo.geo.draw.cancel' | translate }}\n  </button>\n  <button mat-raised-button color=\"primary\" (click)=\"confirm(input.value)\">\n    OK\n  </button>\n</div>\n", styles: [":host .fields-container{display:flex}\n"] }]
         }], ctorParameters: () => [{ type: i1$5.MatDialogRef }], propDecorators: { confirmFlag: [{
                 type: Input
             }] } });
@@ -26874,7 +26932,7 @@ class DrawPopupComponent {
         return this.languageService.translate.instant('igo.geo.draw.labelType.' + option);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: DrawPopupComponent, deps: [{ token: i1$2.LanguageService }, { token: i1$5.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: DrawPopupComponent, isStandalone: true, selector: "igo-draw-popup-component", inputs: { confirmFlag: "confirmFlag", labelFlag: "labelFlag", coordinatesMeasureUnit: "coordinatesMeasureUnit", lengthMeasureUnit: "lengthMeasureUnit", areaMeasureUnit: "areaMeasureUnit" }, ngImport: i0, template: "<h2 mat-dialog-title>\r\n  {{ 'igo.geo.draw.popupTitle' | translate }}\r\n</h2>\r\n\r\n<ng-container *ngIf=\"labelFlag !== labelType.Custom\">\r\n  <div mat-dialog-content class=\"geometry-type-toggle\">\r\n    <div class=\"button-toggle-container\">\r\n      <mat-button-toggle-group\r\n        (change)=\"onLabelTypeChange($event.value)\"\r\n        [value]=\"customOrPredefined\"\r\n      >\r\n        <mat-button-toggle [value]=\"labelType.Custom\">\r\n          {{ 'igo.geo.draw.labelType.custom' | translate }}\r\n        </mat-button-toggle>\r\n        <mat-button-toggle [value]=\"labelType.Predefined\">\r\n          {{ 'igo.geo.draw.labelType.predefined' | translate }}\r\n        </mat-button-toggle>\r\n      </mat-button-toggle-group>\r\n    </div>\r\n    <div>\r\n      <p>\r\n        {{ 'igo.geo.draw.builtInInstructions' | translate }}\r\n      </p>\r\n      <mat-radio-group *ngIf=\"olGeometryType !== 'Polygon'\">\r\n        <mat-radio-button\r\n          *ngFor=\"let option of arrayBuiltInType\"\r\n          [value]=\"option.value\"\r\n          [disabled]=\"optionAvailable(option.value)\"\r\n          (change)=\"onLabelTypeChange($event.value)\"\r\n          [checked]=\"option.checked\"\r\n        >\r\n          {{ getProperLengthLabel(option.value) }}\r\n        </mat-radio-button>\r\n      </mat-radio-group>\r\n      <ng-container *ngIf=\"olGeometryType === 'Polygon'\">\r\n        <mat-checkbox\r\n          *ngFor=\"let option of arrayBuiltInType\"\r\n          class=\"mat-typography\"\r\n          [value]=\"option.value\"\r\n          [disabled]=\"optionAvailable(option.value)\"\r\n          (change)=\"\r\n            onLabelTypeChange($any($event.source.value), $event.checked)\r\n          \"\r\n          [checked]=\"option.checked\"\r\n        >\r\n          {{ getProperLengthLabel(option.value) }}\r\n        </mat-checkbox>\r\n      </ng-container>\r\n      <div *ngIf=\"labelFlag === labelType.Coordinates\" class=\"fields-container\">\r\n        <mat-form-field class=\"readOnly-Input\">\r\n          <mat-label>(Latitude, Longitude)</mat-label>\r\n          <input\r\n            #input\r\n            matInput\r\n            placeholder=\"(Latitude, Longitude)\"\r\n            value=\"{{ currentCoordinates }}\"\r\n            readonly\r\n          />\r\n        </mat-form-field>\r\n        <mat-form-field class=\"unit-field\">\r\n          <mat-select\r\n            [value]=\"coordinatesMeasureUnit\"\r\n            (selectionChange)=\"onChangeCoordinateUnit($event.value)\"\r\n          >\r\n            <mat-option *ngFor=\"let unit of allCoordinatesUnits\" [value]=\"unit\">\r\n              {{ unit }}\r\n            </mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </div>\r\n      <div\r\n        *ngIf=\"labelFlag === labelType.Length || polygonCheck === 2\"\r\n        class=\"fields-container\"\r\n      >\r\n        <mat-form-field class=\"readOnly-Input\">\r\n          <mat-label>{{ lengthLabelT }}</mat-label>\r\n          <input\r\n            #input\r\n            matInput\r\n            placeholder=\"{{ lengthLabelT }}\"\r\n            value=\"{{ currentLength }}\"\r\n            readonly\r\n          />\r\n        </mat-form-field>\r\n        <mat-form-field class=\"unit-field\">\r\n          <mat-select\r\n            [value]=\"lengthMeasureUnit\"\r\n            (selectionChange)=\"onChangeLengthUnit($event.value)\"\r\n          >\r\n            <mat-option *ngFor=\"let unit of allLengthUnits\" [value]=\"unit\">\r\n              {{ getLengthUnitEnum(unit) }}\r\n            </mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </div>\r\n      <div\r\n        *ngIf=\"labelFlag === labelType.Area || polygonCheck === 2\"\r\n        class=\"fields-container\"\r\n      >\r\n        <mat-form-field class=\"readOnly-Input\">\r\n          <mat-label>{{ 'igo.geo.draw.labelType.Area' | translate }}</mat-label>\r\n          <input\r\n            #input\r\n            matInput\r\n            placeholder=\"{{ 'igo.geo.draw.labelType.Area' | translate }}\"\r\n            value=\"{{ currentArea }}\"\r\n            readonly\r\n          />\r\n        </mat-form-field>\r\n        <mat-form-field class=\"unit-field\">\r\n          <mat-select\r\n            [value]=\"areaMeasureUnit\"\r\n            (selectionChange)=\"onChangeAreaUnit($event.value)\"\r\n          >\r\n            <mat-option *ngFor=\"let unit of allAreaUnits\" [value]=\"unit\">\r\n              {{ getAreaUnitEnum(unit) }}\r\n            </mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div mat-dialog-actions>\r\n    <button mat-raised-button (click)=\"cancelDrawing()\">\r\n      {{ 'igo.geo.draw.cancel' | translate }}\r\n    </button>\r\n    <button mat-raised-button color=\"primary\" (click)=\"confirm()\">\r\n      {{ noLabelButton() }}\r\n    </button>\r\n  </div>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"labelFlag === labelType.Custom\">\r\n  <div mat-dialog-content class=\"geometry-type-toggle\">\r\n    <div class=\"button-toggle-container\">\r\n      <mat-button-toggle-group\r\n        (change)=\"onLabelTypeChange($event.value)\"\r\n        [value]=\"customOrPredefined\"\r\n      >\r\n        <mat-button-toggle [value]=\"labelType.Custom\">\r\n          {{ 'igo.geo.draw.labelType.custom' | translate }}\r\n        </mat-button-toggle>\r\n        <mat-button-toggle [value]=\"labelType.Predefined\">\r\n          {{ 'igo.geo.draw.labelType.predefined' | translate }}\r\n        </mat-button-toggle>\r\n      </mat-button-toggle-group>\r\n    </div>\r\n    <p>\r\n      {{ 'igo.geo.draw.dialogInstruction' | translate }}\r\n    </p>\r\n    <mat-form-field class=\"input\">\r\n      <mat-label>{{ 'igo.geo.draw.dialogTitle' | translate }}</mat-label>\r\n      <input\r\n        #input\r\n        matInput\r\n        (select)=\"(true)\"\r\n        (input)=\"getLabelLength($any($event.target).value)\"\r\n        placeholder=\"{{ 'igo.geo.draw.dialogTitle' | translate }}\"\r\n        value=\"{{ currentLabel }}\"\r\n        cdkFocusInitial\r\n      />\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <div mat-dialog-actions>\r\n    <button mat-raised-button (click)=\"cancelDrawing()\">\r\n      {{ 'igo.geo.draw.cancel' | translate }}\r\n    </button>\r\n    <button mat-raised-button color=\"primary\" (click)=\"confirm(input.value)\">\r\n      {{ noLabelButton() }}\r\n    </button>\r\n  </div>\r\n</ng-container>\r\n", styles: [":host .mat-mdc-radio-button~.mat-radio-button{margin-left:12px}:host .readOnly-Input{width:200px!important}:host .button-toggle-container{margin-bottom:12px}:host .unit-field{margin-left:12px}:host .unit-field ::ng-deep .mat-mdc-form-field-infix{width:fit-content}:host .unit-field ::ng-deep .mat-mdc-select-min-line{padding-right:24px}:host .mat-mdc-form-field{position:sticky!important}:host .coordinatesInputView{top:5em!important}:host .mat-mdc-dialog-actions{display:flex!important;justify-content:flex-end}:host .input{width:auto!important}:host .mat-button-toggle-group,:host .mat-button-toggle{width:100%}:host mat-checkbox{margin-right:10px}:host ::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{display:none}\n"], dependencies: [{ kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { 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: 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: "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: 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: "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: DrawPopupComponent, isStandalone: true, selector: "igo-draw-popup-component", inputs: { confirmFlag: "confirmFlag", labelFlag: "labelFlag", coordinatesMeasureUnit: "coordinatesMeasureUnit", lengthMeasureUnit: "lengthMeasureUnit", areaMeasureUnit: "areaMeasureUnit" }, ngImport: i0, template: "<h2 mat-dialog-title>\n  {{ 'igo.geo.draw.popupTitle' | translate }}\n</h2>\n\n<ng-container *ngIf=\"labelFlag !== labelType.Custom\">\n  <div mat-dialog-content class=\"geometry-type-toggle\">\n    <div class=\"button-toggle-container\">\n      <mat-button-toggle-group\n        (change)=\"onLabelTypeChange($event.value)\"\n        [value]=\"customOrPredefined\"\n      >\n        <mat-button-toggle [value]=\"labelType.Custom\">\n          {{ 'igo.geo.draw.labelType.custom' | translate }}\n        </mat-button-toggle>\n        <mat-button-toggle [value]=\"labelType.Predefined\">\n          {{ 'igo.geo.draw.labelType.predefined' | translate }}\n        </mat-button-toggle>\n      </mat-button-toggle-group>\n    </div>\n    <div>\n      <p>\n        {{ 'igo.geo.draw.builtInInstructions' | translate }}\n      </p>\n      <mat-radio-group *ngIf=\"olGeometryType !== 'Polygon'\">\n        <mat-radio-button\n          *ngFor=\"let option of arrayBuiltInType\"\n          [value]=\"option.value\"\n          [disabled]=\"optionAvailable(option.value)\"\n          (change)=\"onLabelTypeChange($event.value)\"\n          [checked]=\"option.checked\"\n        >\n          {{ getProperLengthLabel(option.value) }}\n        </mat-radio-button>\n      </mat-radio-group>\n      <ng-container *ngIf=\"olGeometryType === 'Polygon'\">\n        <mat-checkbox\n          *ngFor=\"let option of arrayBuiltInType\"\n          class=\"mat-typography\"\n          [value]=\"option.value\"\n          [disabled]=\"optionAvailable(option.value)\"\n          (change)=\"\n            onLabelTypeChange($any($event.source.value), $event.checked)\n          \"\n          [checked]=\"option.checked\"\n        >\n          {{ getProperLengthLabel(option.value) }}\n        </mat-checkbox>\n      </ng-container>\n      <div *ngIf=\"labelFlag === labelType.Coordinates\" class=\"fields-container\">\n        <mat-form-field class=\"readOnly-Input\">\n          <mat-label>(Latitude, Longitude)</mat-label>\n          <input\n            #input\n            matInput\n            placeholder=\"(Latitude, Longitude)\"\n            value=\"{{ currentCoordinates }}\"\n            readonly\n          />\n        </mat-form-field>\n        <mat-form-field class=\"unit-field\">\n          <mat-select\n            [value]=\"coordinatesMeasureUnit\"\n            (selectionChange)=\"onChangeCoordinateUnit($event.value)\"\n          >\n            <mat-option *ngFor=\"let unit of allCoordinatesUnits\" [value]=\"unit\">\n              {{ unit }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n      <div\n        *ngIf=\"labelFlag === labelType.Length || polygonCheck === 2\"\n        class=\"fields-container\"\n      >\n        <mat-form-field class=\"readOnly-Input\">\n          <mat-label>{{ lengthLabelT }}</mat-label>\n          <input\n            #input\n            matInput\n            placeholder=\"{{ lengthLabelT }}\"\n            value=\"{{ currentLength }}\"\n            readonly\n          />\n        </mat-form-field>\n        <mat-form-field class=\"unit-field\">\n          <mat-select\n            [value]=\"lengthMeasureUnit\"\n            (selectionChange)=\"onChangeLengthUnit($event.value)\"\n          >\n            <mat-option *ngFor=\"let unit of allLengthUnits\" [value]=\"unit\">\n              {{ getLengthUnitEnum(unit) }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n      <div\n        *ngIf=\"labelFlag === labelType.Area || polygonCheck === 2\"\n        class=\"fields-container\"\n      >\n        <mat-form-field class=\"readOnly-Input\">\n          <mat-label>{{ 'igo.geo.draw.labelType.Area' | translate }}</mat-label>\n          <input\n            #input\n            matInput\n            placeholder=\"{{ 'igo.geo.draw.labelType.Area' | translate }}\"\n            value=\"{{ currentArea }}\"\n            readonly\n          />\n        </mat-form-field>\n        <mat-form-field class=\"unit-field\">\n          <mat-select\n            [value]=\"areaMeasureUnit\"\n            (selectionChange)=\"onChangeAreaUnit($event.value)\"\n          >\n            <mat-option *ngFor=\"let unit of allAreaUnits\" [value]=\"unit\">\n              {{ getAreaUnitEnum(unit) }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n    </div>\n  </div>\n\n  <div mat-dialog-actions>\n    <button mat-raised-button (click)=\"cancelDrawing()\">\n      {{ 'igo.geo.draw.cancel' | translate }}\n    </button>\n    <button mat-raised-button color=\"primary\" (click)=\"confirm()\">\n      {{ noLabelButton() }}\n    </button>\n  </div>\n</ng-container>\n\n<ng-container *ngIf=\"labelFlag === labelType.Custom\">\n  <div mat-dialog-content class=\"geometry-type-toggle\">\n    <div class=\"button-toggle-container\">\n      <mat-button-toggle-group\n        (change)=\"onLabelTypeChange($event.value)\"\n        [value]=\"customOrPredefined\"\n      >\n        <mat-button-toggle [value]=\"labelType.Custom\">\n          {{ 'igo.geo.draw.labelType.custom' | translate }}\n        </mat-button-toggle>\n        <mat-button-toggle [value]=\"labelType.Predefined\">\n          {{ 'igo.geo.draw.labelType.predefined' | translate }}\n        </mat-button-toggle>\n      </mat-button-toggle-group>\n    </div>\n    <p>\n      {{ 'igo.geo.draw.dialogInstruction' | translate }}\n    </p>\n    <mat-form-field class=\"input\">\n      <mat-label>{{ 'igo.geo.draw.dialogTitle' | translate }}</mat-label>\n      <input\n        #input\n        matInput\n        (select)=\"(true)\"\n        (input)=\"getLabelLength($any($event.target).value)\"\n        placeholder=\"{{ 'igo.geo.draw.dialogTitle' | translate }}\"\n        value=\"{{ currentLabel }}\"\n        cdkFocusInitial\n      />\n    </mat-form-field>\n  </div>\n\n  <div mat-dialog-actions>\n    <button mat-raised-button (click)=\"cancelDrawing()\">\n      {{ 'igo.geo.draw.cancel' | translate }}\n    </button>\n    <button mat-raised-button color=\"primary\" (click)=\"confirm(input.value)\">\n      {{ noLabelButton() }}\n    </button>\n  </div>\n</ng-container>\n", styles: [":host .mat-mdc-radio-button~.mat-radio-button{margin-left:12px}:host .readOnly-Input{width:200px!important}:host .button-toggle-container{margin-bottom:12px}:host .unit-field{margin-left:12px}:host .unit-field ::ng-deep .mat-mdc-form-field-infix{width:fit-content}:host .unit-field ::ng-deep .mat-mdc-select-min-line{padding-right:24px}:host .mat-mdc-form-field{position:sticky!important}:host .coordinatesInputView{top:5em!important}:host .mat-mdc-dialog-actions{display:flex!important;justify-content:flex-end}:host .input{width:auto!important}:host .mat-button-toggle-group,:host .mat-button-toggle{width:100%}:host mat-checkbox{margin-right:10px}:host ::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{display:none}\n"], dependencies: [{ kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { 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: 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: "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: 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: "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: DrawPopupComponent, decorators: [{
             type: Component,
@@ -26893,7 +26951,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                         MatDialogActions,
                         MatButtonModule,
                         TranslateModule
-                    ], template: "<h2 mat-dialog-title>\r\n  {{ 'igo.geo.draw.popupTitle' | translate }}\r\n</h2>\r\n\r\n<ng-container *ngIf=\"labelFlag !== labelType.Custom\">\r\n  <div mat-dialog-content class=\"geometry-type-toggle\">\r\n    <div class=\"button-toggle-container\">\r\n      <mat-button-toggle-group\r\n        (change)=\"onLabelTypeChange($event.value)\"\r\n        [value]=\"customOrPredefined\"\r\n      >\r\n        <mat-button-toggle [value]=\"labelType.Custom\">\r\n          {{ 'igo.geo.draw.labelType.custom' | translate }}\r\n        </mat-button-toggle>\r\n        <mat-button-toggle [value]=\"labelType.Predefined\">\r\n          {{ 'igo.geo.draw.labelType.predefined' | translate }}\r\n        </mat-button-toggle>\r\n      </mat-button-toggle-group>\r\n    </div>\r\n    <div>\r\n      <p>\r\n        {{ 'igo.geo.draw.builtInInstructions' | translate }}\r\n      </p>\r\n      <mat-radio-group *ngIf=\"olGeometryType !== 'Polygon'\">\r\n        <mat-radio-button\r\n          *ngFor=\"let option of arrayBuiltInType\"\r\n          [value]=\"option.value\"\r\n          [disabled]=\"optionAvailable(option.value)\"\r\n          (change)=\"onLabelTypeChange($event.value)\"\r\n          [checked]=\"option.checked\"\r\n        >\r\n          {{ getProperLengthLabel(option.value) }}\r\n        </mat-radio-button>\r\n      </mat-radio-group>\r\n      <ng-container *ngIf=\"olGeometryType === 'Polygon'\">\r\n        <mat-checkbox\r\n          *ngFor=\"let option of arrayBuiltInType\"\r\n          class=\"mat-typography\"\r\n          [value]=\"option.value\"\r\n          [disabled]=\"optionAvailable(option.value)\"\r\n          (change)=\"\r\n            onLabelTypeChange($any($event.source.value), $event.checked)\r\n          \"\r\n          [checked]=\"option.checked\"\r\n        >\r\n          {{ getProperLengthLabel(option.value) }}\r\n        </mat-checkbox>\r\n      </ng-container>\r\n      <div *ngIf=\"labelFlag === labelType.Coordinates\" class=\"fields-container\">\r\n        <mat-form-field class=\"readOnly-Input\">\r\n          <mat-label>(Latitude, Longitude)</mat-label>\r\n          <input\r\n            #input\r\n            matInput\r\n            placeholder=\"(Latitude, Longitude)\"\r\n            value=\"{{ currentCoordinates }}\"\r\n            readonly\r\n          />\r\n        </mat-form-field>\r\n        <mat-form-field class=\"unit-field\">\r\n          <mat-select\r\n            [value]=\"coordinatesMeasureUnit\"\r\n            (selectionChange)=\"onChangeCoordinateUnit($event.value)\"\r\n          >\r\n            <mat-option *ngFor=\"let unit of allCoordinatesUnits\" [value]=\"unit\">\r\n              {{ unit }}\r\n            </mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </div>\r\n      <div\r\n        *ngIf=\"labelFlag === labelType.Length || polygonCheck === 2\"\r\n        class=\"fields-container\"\r\n      >\r\n        <mat-form-field class=\"readOnly-Input\">\r\n          <mat-label>{{ lengthLabelT }}</mat-label>\r\n          <input\r\n            #input\r\n            matInput\r\n            placeholder=\"{{ lengthLabelT }}\"\r\n            value=\"{{ currentLength }}\"\r\n            readonly\r\n          />\r\n        </mat-form-field>\r\n        <mat-form-field class=\"unit-field\">\r\n          <mat-select\r\n            [value]=\"lengthMeasureUnit\"\r\n            (selectionChange)=\"onChangeLengthUnit($event.value)\"\r\n          >\r\n            <mat-option *ngFor=\"let unit of allLengthUnits\" [value]=\"unit\">\r\n              {{ getLengthUnitEnum(unit) }}\r\n            </mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </div>\r\n      <div\r\n        *ngIf=\"labelFlag === labelType.Area || polygonCheck === 2\"\r\n        class=\"fields-container\"\r\n      >\r\n        <mat-form-field class=\"readOnly-Input\">\r\n          <mat-label>{{ 'igo.geo.draw.labelType.Area' | translate }}</mat-label>\r\n          <input\r\n            #input\r\n            matInput\r\n            placeholder=\"{{ 'igo.geo.draw.labelType.Area' | translate }}\"\r\n            value=\"{{ currentArea }}\"\r\n            readonly\r\n          />\r\n        </mat-form-field>\r\n        <mat-form-field class=\"unit-field\">\r\n          <mat-select\r\n            [value]=\"areaMeasureUnit\"\r\n            (selectionChange)=\"onChangeAreaUnit($event.value)\"\r\n          >\r\n            <mat-option *ngFor=\"let unit of allAreaUnits\" [value]=\"unit\">\r\n              {{ getAreaUnitEnum(unit) }}\r\n            </mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div mat-dialog-actions>\r\n    <button mat-raised-button (click)=\"cancelDrawing()\">\r\n      {{ 'igo.geo.draw.cancel' | translate }}\r\n    </button>\r\n    <button mat-raised-button color=\"primary\" (click)=\"confirm()\">\r\n      {{ noLabelButton() }}\r\n    </button>\r\n  </div>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"labelFlag === labelType.Custom\">\r\n  <div mat-dialog-content class=\"geometry-type-toggle\">\r\n    <div class=\"button-toggle-container\">\r\n      <mat-button-toggle-group\r\n        (change)=\"onLabelTypeChange($event.value)\"\r\n        [value]=\"customOrPredefined\"\r\n      >\r\n        <mat-button-toggle [value]=\"labelType.Custom\">\r\n          {{ 'igo.geo.draw.labelType.custom' | translate }}\r\n        </mat-button-toggle>\r\n        <mat-button-toggle [value]=\"labelType.Predefined\">\r\n          {{ 'igo.geo.draw.labelType.predefined' | translate }}\r\n        </mat-button-toggle>\r\n      </mat-button-toggle-group>\r\n    </div>\r\n    <p>\r\n      {{ 'igo.geo.draw.dialogInstruction' | translate }}\r\n    </p>\r\n    <mat-form-field class=\"input\">\r\n      <mat-label>{{ 'igo.geo.draw.dialogTitle' | translate }}</mat-label>\r\n      <input\r\n        #input\r\n        matInput\r\n        (select)=\"(true)\"\r\n        (input)=\"getLabelLength($any($event.target).value)\"\r\n        placeholder=\"{{ 'igo.geo.draw.dialogTitle' | translate }}\"\r\n        value=\"{{ currentLabel }}\"\r\n        cdkFocusInitial\r\n      />\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <div mat-dialog-actions>\r\n    <button mat-raised-button (click)=\"cancelDrawing()\">\r\n      {{ 'igo.geo.draw.cancel' | translate }}\r\n    </button>\r\n    <button mat-raised-button color=\"primary\" (click)=\"confirm(input.value)\">\r\n      {{ noLabelButton() }}\r\n    </button>\r\n  </div>\r\n</ng-container>\r\n", styles: [":host .mat-mdc-radio-button~.mat-radio-button{margin-left:12px}:host .readOnly-Input{width:200px!important}:host .button-toggle-container{margin-bottom:12px}:host .unit-field{margin-left:12px}:host .unit-field ::ng-deep .mat-mdc-form-field-infix{width:fit-content}:host .unit-field ::ng-deep .mat-mdc-select-min-line{padding-right:24px}:host .mat-mdc-form-field{position:sticky!important}:host .coordinatesInputView{top:5em!important}:host .mat-mdc-dialog-actions{display:flex!important;justify-content:flex-end}:host .input{width:auto!important}:host .mat-button-toggle-group,:host .mat-button-toggle{width:100%}:host mat-checkbox{margin-right:10px}:host ::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{display:none}\n"] }]
+                    ], template: "<h2 mat-dialog-title>\n  {{ 'igo.geo.draw.popupTitle' | translate }}\n</h2>\n\n<ng-container *ngIf=\"labelFlag !== labelType.Custom\">\n  <div mat-dialog-content class=\"geometry-type-toggle\">\n    <div class=\"button-toggle-container\">\n      <mat-button-toggle-group\n        (change)=\"onLabelTypeChange($event.value)\"\n        [value]=\"customOrPredefined\"\n      >\n        <mat-button-toggle [value]=\"labelType.Custom\">\n          {{ 'igo.geo.draw.labelType.custom' | translate }}\n        </mat-button-toggle>\n        <mat-button-toggle [value]=\"labelType.Predefined\">\n          {{ 'igo.geo.draw.labelType.predefined' | translate }}\n        </mat-button-toggle>\n      </mat-button-toggle-group>\n    </div>\n    <div>\n      <p>\n        {{ 'igo.geo.draw.builtInInstructions' | translate }}\n      </p>\n      <mat-radio-group *ngIf=\"olGeometryType !== 'Polygon'\">\n        <mat-radio-button\n          *ngFor=\"let option of arrayBuiltInType\"\n          [value]=\"option.value\"\n          [disabled]=\"optionAvailable(option.value)\"\n          (change)=\"onLabelTypeChange($event.value)\"\n          [checked]=\"option.checked\"\n        >\n          {{ getProperLengthLabel(option.value) }}\n        </mat-radio-button>\n      </mat-radio-group>\n      <ng-container *ngIf=\"olGeometryType === 'Polygon'\">\n        <mat-checkbox\n          *ngFor=\"let option of arrayBuiltInType\"\n          class=\"mat-typography\"\n          [value]=\"option.value\"\n          [disabled]=\"optionAvailable(option.value)\"\n          (change)=\"\n            onLabelTypeChange($any($event.source.value), $event.checked)\n          \"\n          [checked]=\"option.checked\"\n        >\n          {{ getProperLengthLabel(option.value) }}\n        </mat-checkbox>\n      </ng-container>\n      <div *ngIf=\"labelFlag === labelType.Coordinates\" class=\"fields-container\">\n        <mat-form-field class=\"readOnly-Input\">\n          <mat-label>(Latitude, Longitude)</mat-label>\n          <input\n            #input\n            matInput\n            placeholder=\"(Latitude, Longitude)\"\n            value=\"{{ currentCoordinates }}\"\n            readonly\n          />\n        </mat-form-field>\n        <mat-form-field class=\"unit-field\">\n          <mat-select\n            [value]=\"coordinatesMeasureUnit\"\n            (selectionChange)=\"onChangeCoordinateUnit($event.value)\"\n          >\n            <mat-option *ngFor=\"let unit of allCoordinatesUnits\" [value]=\"unit\">\n              {{ unit }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n      <div\n        *ngIf=\"labelFlag === labelType.Length || polygonCheck === 2\"\n        class=\"fields-container\"\n      >\n        <mat-form-field class=\"readOnly-Input\">\n          <mat-label>{{ lengthLabelT }}</mat-label>\n          <input\n            #input\n            matInput\n            placeholder=\"{{ lengthLabelT }}\"\n            value=\"{{ currentLength }}\"\n            readonly\n          />\n        </mat-form-field>\n        <mat-form-field class=\"unit-field\">\n          <mat-select\n            [value]=\"lengthMeasureUnit\"\n            (selectionChange)=\"onChangeLengthUnit($event.value)\"\n          >\n            <mat-option *ngFor=\"let unit of allLengthUnits\" [value]=\"unit\">\n              {{ getLengthUnitEnum(unit) }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n      <div\n        *ngIf=\"labelFlag === labelType.Area || polygonCheck === 2\"\n        class=\"fields-container\"\n      >\n        <mat-form-field class=\"readOnly-Input\">\n          <mat-label>{{ 'igo.geo.draw.labelType.Area' | translate }}</mat-label>\n          <input\n            #input\n            matInput\n            placeholder=\"{{ 'igo.geo.draw.labelType.Area' | translate }}\"\n            value=\"{{ currentArea }}\"\n            readonly\n          />\n        </mat-form-field>\n        <mat-form-field class=\"unit-field\">\n          <mat-select\n            [value]=\"areaMeasureUnit\"\n            (selectionChange)=\"onChangeAreaUnit($event.value)\"\n          >\n            <mat-option *ngFor=\"let unit of allAreaUnits\" [value]=\"unit\">\n              {{ getAreaUnitEnum(unit) }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n    </div>\n  </div>\n\n  <div mat-dialog-actions>\n    <button mat-raised-button (click)=\"cancelDrawing()\">\n      {{ 'igo.geo.draw.cancel' | translate }}\n    </button>\n    <button mat-raised-button color=\"primary\" (click)=\"confirm()\">\n      {{ noLabelButton() }}\n    </button>\n  </div>\n</ng-container>\n\n<ng-container *ngIf=\"labelFlag === labelType.Custom\">\n  <div mat-dialog-content class=\"geometry-type-toggle\">\n    <div class=\"button-toggle-container\">\n      <mat-button-toggle-group\n        (change)=\"onLabelTypeChange($event.value)\"\n        [value]=\"customOrPredefined\"\n      >\n        <mat-button-toggle [value]=\"labelType.Custom\">\n          {{ 'igo.geo.draw.labelType.custom' | translate }}\n        </mat-button-toggle>\n        <mat-button-toggle [value]=\"labelType.Predefined\">\n          {{ 'igo.geo.draw.labelType.predefined' | translate }}\n        </mat-button-toggle>\n      </mat-button-toggle-group>\n    </div>\n    <p>\n      {{ 'igo.geo.draw.dialogInstruction' | translate }}\n    </p>\n    <mat-form-field class=\"input\">\n      <mat-label>{{ 'igo.geo.draw.dialogTitle' | translate }}</mat-label>\n      <input\n        #input\n        matInput\n        (select)=\"(true)\"\n        (input)=\"getLabelLength($any($event.target).value)\"\n        placeholder=\"{{ 'igo.geo.draw.dialogTitle' | translate }}\"\n        value=\"{{ currentLabel }}\"\n        cdkFocusInitial\n      />\n    </mat-form-field>\n  </div>\n\n  <div mat-dialog-actions>\n    <button mat-raised-button (click)=\"cancelDrawing()\">\n      {{ 'igo.geo.draw.cancel' | translate }}\n    </button>\n    <button mat-raised-button color=\"primary\" (click)=\"confirm(input.value)\">\n      {{ noLabelButton() }}\n    </button>\n  </div>\n</ng-container>\n", styles: [":host .mat-mdc-radio-button~.mat-radio-button{margin-left:12px}:host .readOnly-Input{width:200px!important}:host .button-toggle-container{margin-bottom:12px}:host .unit-field{margin-left:12px}:host .unit-field ::ng-deep .mat-mdc-form-field-infix{width:fit-content}:host .unit-field ::ng-deep .mat-mdc-select-min-line{padding-right:24px}:host .mat-mdc-form-field{position:sticky!important}:host .coordinatesInputView{top:5em!important}:host .mat-mdc-dialog-actions{display:flex!important;justify-content:flex-end}:host .input{width:auto!important}:host .mat-button-toggle-group,:host .mat-button-toggle{width:100%}:host mat-checkbox{margin-right:10px}:host ::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{display:none}\n"] }]
         }], ctorParameters: () => [{ type: i1$2.LanguageService }, { type: i1$5.MatDialogRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
@@ -26911,7 +26969,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
 
 class DrawShorcutsComponent {
     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>\r\n  <div>\r\n    <span class=\"shortcut mat-typography\">\r\n      <mat-icon class=\"shortcut-icon\" svgIcon=\"keyboard-return\"></mat-icon\r\n      >{{ 'igo.geo.draw.finish' | translate }}</span\r\n    >\r\n  </div>\r\n  <div>\r\n    <span class=\"shortcut mat-typography\">\r\n      <mat-icon class=\"shortcut-icon\" svgIcon=\"backspace-outline\"></mat-icon\r\n      >{{ 'igo.geo.draw.undo' | translate }}</span\r\n    >\r\n  </div>\r\n  <div>\r\n    <span class=\"shortcut mat-typography\">\r\n      <mat-icon class=\"shortcut-icon\" svgIcon=\"keyboard-esc\"></mat-icon\r\n      >{{ 'igo.geo.draw.abort' | translate }}</span\r\n    >\r\n  </div>\r\n  <div>\r\n    <span class=\"shortcut mat-typography\">\r\n      <mat-icon class=\"shortcut-icon\" svgIcon=\"keyboard-space\"></mat-icon\r\n      >{{ 'igo.geo.draw.move' | translate }}</span\r\n    >\r\n  </div>\r\n</mat-dialog-content>\r\n<mat-dialog-actions class=\"shortcuts-close\">\r\n  <button mat-raised-button mat-dialog-close color=\"primary\">OK</button>\r\n</mat-dialog-actions>\r\n", styles: [".shortcut{display:flex;align-items:center}.shortcut-icon{margin-right:10px}.shortcuts-close{display:flex;justify-content:center}\n"], dependencies: [{ kind: "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\" 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" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: DrawShorcutsComponent, decorators: [{
             type: Component,
@@ -26922,7 +26980,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                         MatButtonModule,
                         MatDialogClose,
                         TranslateModule
-                    ], template: "<mat-dialog-content>\r\n  <div>\r\n    <span class=\"shortcut mat-typography\">\r\n      <mat-icon class=\"shortcut-icon\" svgIcon=\"keyboard-return\"></mat-icon\r\n      >{{ 'igo.geo.draw.finish' | translate }}</span\r\n    >\r\n  </div>\r\n  <div>\r\n    <span class=\"shortcut mat-typography\">\r\n      <mat-icon class=\"shortcut-icon\" svgIcon=\"backspace-outline\"></mat-icon\r\n      >{{ 'igo.geo.draw.undo' | translate }}</span\r\n    >\r\n  </div>\r\n  <div>\r\n    <span class=\"shortcut mat-typography\">\r\n      <mat-icon class=\"shortcut-icon\" svgIcon=\"keyboard-esc\"></mat-icon\r\n      >{{ 'igo.geo.draw.abort' | translate }}</span\r\n    >\r\n  </div>\r\n  <div>\r\n    <span class=\"shortcut mat-typography\">\r\n      <mat-icon class=\"shortcut-icon\" svgIcon=\"keyboard-space\"></mat-icon\r\n      >{{ 'igo.geo.draw.move' | translate }}</span\r\n    >\r\n  </div>\r\n</mat-dialog-content>\r\n<mat-dialog-actions class=\"shortcuts-close\">\r\n  <button mat-raised-button mat-dialog-close color=\"primary\">OK</button>\r\n</mat-dialog-actions>\r\n", styles: [".shortcut{display:flex;align-items:center}.shortcut-icon{margin-right:10px}.shortcuts-close{display:flex;justify-content:center}\n"] }]
+                    ], 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"] }]
         }] });
 
 class DrawComponent {
@@ -27916,7 +27974,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>\r\n  <div class=\"geometry-type-toggle mat-typography\">\r\n    <mat-button-toggle-group\r\n      (change)=\"onGeometryTypeChange($event.value)\"\r\n      [value]=\"geometryType.Point\"\r\n    >\r\n      <mat-button-toggle [value]=\"geometryType.Point\">\r\n        {{ 'igo.geo.draw.' + geometryType.Point | translate }}\r\n      </mat-button-toggle>\r\n\r\n      <mat-button-toggle [value]=\"geometryType.LineString\">\r\n        {{ 'igo.geo.draw.' + geometryType.LineString | translate }}\r\n      </mat-button-toggle>\r\n\r\n      <mat-button-toggle [value]=\"geometryType.Polygon\">\r\n        {{ 'igo.geo.draw.' + geometryType.Polygon | translate }}\r\n      </mat-button-toggle>\r\n\r\n      <mat-button-toggle [value]=\"geometryType.Circle\">\r\n        {{ 'igo.geo.draw.' + geometryType.Circle | translate }}\r\n      </mat-button-toggle>\r\n    </mat-button-toggle-group>\r\n  </div>\r\n\r\n  <div class=\"draw-options mat-typography\">\r\n    <mat-slide-toggle\r\n      [disabled]=\"drawControlIsDisabled\"\r\n      [checked]=\"drawControlIsActive\"\r\n      [labelPosition]=\"'before'\"\r\n      (change)=\"onToggleDrawControl($event.checked)\"\r\n    >\r\n      {{ 'igo.geo.draw.drawControl' | translate }}\r\n    </mat-slide-toggle>\r\n\r\n    <mat-slide-toggle\r\n      [checked]=\"labelsAreShown\"\r\n      [labelPosition]=\"'before'\"\r\n      (change)=\"onToggleLabels()\"\r\n    >\r\n      {{ 'igo.geo.draw.toggleMapTooltips' | translate }}\r\n    </mat-slide-toggle>\r\n\r\n    <mat-slide-toggle\r\n      *ngIf=\"!isPoint()\"\r\n      [checked]=\"freehandMode\"\r\n      [labelPosition]=\"'before'\"\r\n      (change)=\"onToggleFreehandMode($event)\"\r\n    >\r\n      {{ 'igo.geo.draw.freehandMode' | translate }}\r\n    </mat-slide-toggle>\r\n\r\n    <div class=\"radius-unit\" *ngIf=\"isCircle()\">\r\n      <mat-form-field class=\"radius\">\r\n        <input\r\n          matInput\r\n          type=\"number\"\r\n          min=\"0\"\r\n          placeholder=\"{{ 'igo.geo.spatialFilter.radius' | translate }}\"\r\n          [formControl]=\"radiusFormControl\"\r\n          [readonly]=\"this.freehandMode\"\r\n        />\r\n      </mat-form-field>\r\n\r\n      <mat-form-field class=\"unit-field\">\r\n        <mat-select\r\n          [value]=\"measureUnit\"\r\n          (selectionChange)=\"onMeasureUnitChange($event.value)\"\r\n        >\r\n          <mat-option\r\n            *ngFor=\"let measureUnit of measureUnits\"\r\n            [value]=\"measureUnit\"\r\n          >\r\n            {{ 'igo.geo.measure.' + measureUnit | translate }}\r\n          </mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </div>\r\n  </div>\r\n\r\n  <mat-divider></mat-divider>\r\n\r\n  <div class=\"layer-select-container\">\r\n    <mat-form-field class=\"layer-select\" subscriptSizing=\"dynamic\">\r\n      <mat-label>{{ 'igo.geo.draw.layer.title' | translate }}</mat-label>\r\n      <mat-select\r\n        #selectedLayer\r\n        (selectionChange)=\"onLayerChange(selectedLayer.value)\"\r\n        [value]=\"updateActiveLayer()\"\r\n      >\r\n        <mat-option *ngFor=\"let layer of allLayers\" [value]=\"layer\">\r\n          {{ layer.title }}\r\n        </mat-option>\r\n        <mat-option id=\"createNewLayer\">\r\n          {{ 'igo.geo.draw.layer.createNewLayer' | translate }}\r\n        </mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <button\r\n      *ngIf=\"activeDrawingLayer\"\r\n      mat-icon-button\r\n      [color]=\"activeDrawingLayer.visible ? 'primary' : 'default'\"\r\n      collapsibleButton\r\n      tooltip-position=\"below\"\r\n      matTooltipShowDelay=\"500\"\r\n      [matTooltip]=\"\r\n        activeDrawingLayer.visible\r\n          ? ('igo.geo.layer.hideLayer' | translate)\r\n          : ('igo.geo.layer.showLayer' | translate)\r\n      \"\r\n      (click)=\"activeDrawingLayer.visible = !activeDrawingLayer.visible\"\r\n    >\r\n      <mat-icon [svgIcon]=\"activeDrawingLayer.visible ? 'eye' : 'eye-off'\">\r\n      </mat-icon>\r\n    </button>\r\n  </div>\r\n  <mat-divider></mat-divider>\r\n  <div>\r\n    <button\r\n      *ngIf=\"activeStore.count$.getValue() > 0\"\r\n      class=\"deleteBtn\"\r\n      mat-icon-button\r\n      color=\"warn\"\r\n      tooltip-position=\"below\"\r\n      matTooltipShowDelay=\"500\"\r\n      [matTooltip]=\"'igo.geo.draw.delete' | translate\"\r\n      [disabled]=\"(selectedFeatures$ | async).length === 0\"\r\n      (click)=\"deleteDrawings()\"\r\n    >\r\n      <mat-icon svgIcon=\"delete\"></mat-icon>\r\n    </button>\r\n\r\n    <div>\r\n      <igo-entity-table\r\n        #table\r\n        class=\"table-compact\"\r\n        [store]=\"activeStore\"\r\n        [template]=\"tableTemplate\"\r\n      >\r\n      </igo-entity-table>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"icon-options\">\r\n    <mat-form-field *ngIf=\"icons.length >= 1\">\r\n      <mat-label>{{ 'igo.geo.draw.icon' | translate }}</mat-label>\r\n      <mat-select>\r\n        <mat-select-trigger>\r\n          <div *ngIf=\"icon\" class=\"box\">\r\n            <img src=\"{{ icon }}\" />\r\n          </div>\r\n        </mat-select-trigger>\r\n        <mat-option value=\"\" (click)=\"onIconChange()\">{{\r\n          'igo.geo.draw.noIcon' | translate\r\n        }}</mat-option>\r\n        <mat-option\r\n          *ngFor=\"let icon_html of icons\"\r\n          [value]=\"icon_html\"\r\n          (click)=\"onIconChange(icon_html)\"\r\n        >\r\n          <div class=\"box\">\r\n            <img src=\"{{ icon_html }}\" />\r\n          </div>\r\n        </mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <div class=\"actions-container\">\r\n    <button\r\n      mat-icon-button\r\n      color=\"accent\"\r\n      disableRipple=\"true\"\r\n      (click)=\"openShorcutsDialog()\"\r\n    >\r\n      <mat-icon\r\n        class=\"shortcuts-icon\"\r\n        svgIcon=\"keyboard-outline\"\r\n        tooltip-position=\"below\"\r\n        matTooltipShowDelay=\"500\"\r\n        [matTooltip]=\"'igo.geo.draw.shortcuts' | translate\"\r\n      >\r\n      </mat-icon>\r\n    </button>\r\n\r\n    <button\r\n      *ngIf=\"selectedFeatures$.value.length\"\r\n      mat-raised-button\r\n      color=\"primary\"\r\n      (click)=\"openStyleModalDialog()\"\r\n      [matTooltip]=\"'igo.geo.style.styleModalTooltipSelected' | translate\"\r\n    >\r\n      {{ 'igo.geo.style.styleModal' | translate }}\r\n      <mat-icon\r\n        aria-hidden=\"false\"\r\n        iconPositionEnd\r\n        class=\"style-icon\"\r\n        svgIcon=\"palette\"\r\n        [matBadge]=\"selectedFeatures$.value.length\"\r\n        matBadgeColor=\"warn\"\r\n        matBadgeSize=\"medium\"\r\n      >\r\n      </mat-icon>\r\n    </button>\r\n  </div>\r\n</div>\r\n", styles: [":host .geometry-type-toggle{padding:10px;text-align:center}:host .geometry-type-toggle mat-button-toggle-group{width:100%}:host .geometry-type-toggle mat-button-toggle-group mat-button-toggle{width:25%}:host .draw-options mat-slide-toggle{width:100%;padding:10px}:host .draw-options mat-slide-toggle ::ng-deep .mdc-form-field{width:100%}:host .draw-options mat-slide-toggle ::ng-deep .mdc-label{margin-left:0;width:calc(100% - 60px)}:host .icon-options{margin:5px 5px 0}:host .deleteBtn{margin-left:16px}:host .edition-drawing{padding:10px 0}:host img{width:100%;height:100%}:host .deleteBtn{margin-left:12px}:host .storeTable{height:auto!important}:host .layer-select{flex:1;margin-right:8px}:host .input-button-container{padding:10px}:host .input-button-container mat-form-field{width:25%}:host .input-button-container button{left:8px;bottom:10px}:host .radius{flex:2}:host .unit-field{flex:1;margin-left:8px}:host .radius-unit{display:flex;width:100%;padding:4px 8px}:host ::ng-deep igo-entity-table td:last-child{text-align:right!important}:host ::ng-deep igo-entity-table td:last-child button{margin:0%!important}:host .layer-select-container{margin:16px 8px}:host .actions-container,:host .layer-select-container{display:flex;align-items:center}\n"], dependencies: [{ kind: "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 [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: [
             trigger('openClose', [
                 state('open', style({
                     opacity: 1
@@ -27961,7 +28019,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                         MatBadgeModule,
                         AsyncPipe,
                         TranslateModule
-                    ], template: "<div>\r\n  <div class=\"geometry-type-toggle mat-typography\">\r\n    <mat-button-toggle-group\r\n      (change)=\"onGeometryTypeChange($event.value)\"\r\n      [value]=\"geometryType.Point\"\r\n    >\r\n      <mat-button-toggle [value]=\"geometryType.Point\">\r\n        {{ 'igo.geo.draw.' + geometryType.Point | translate }}\r\n      </mat-button-toggle>\r\n\r\n      <mat-button-toggle [value]=\"geometryType.LineString\">\r\n        {{ 'igo.geo.draw.' + geometryType.LineString | translate }}\r\n      </mat-button-toggle>\r\n\r\n      <mat-button-toggle [value]=\"geometryType.Polygon\">\r\n        {{ 'igo.geo.draw.' + geometryType.Polygon | translate }}\r\n      </mat-button-toggle>\r\n\r\n      <mat-button-toggle [value]=\"geometryType.Circle\">\r\n        {{ 'igo.geo.draw.' + geometryType.Circle | translate }}\r\n      </mat-button-toggle>\r\n    </mat-button-toggle-group>\r\n  </div>\r\n\r\n  <div class=\"draw-options mat-typography\">\r\n    <mat-slide-toggle\r\n      [disabled]=\"drawControlIsDisabled\"\r\n      [checked]=\"drawControlIsActive\"\r\n      [labelPosition]=\"'before'\"\r\n      (change)=\"onToggleDrawControl($event.checked)\"\r\n    >\r\n      {{ 'igo.geo.draw.drawControl' | translate }}\r\n    </mat-slide-toggle>\r\n\r\n    <mat-slide-toggle\r\n      [checked]=\"labelsAreShown\"\r\n      [labelPosition]=\"'before'\"\r\n      (change)=\"onToggleLabels()\"\r\n    >\r\n      {{ 'igo.geo.draw.toggleMapTooltips' | translate }}\r\n    </mat-slide-toggle>\r\n\r\n    <mat-slide-toggle\r\n      *ngIf=\"!isPoint()\"\r\n      [checked]=\"freehandMode\"\r\n      [labelPosition]=\"'before'\"\r\n      (change)=\"onToggleFreehandMode($event)\"\r\n    >\r\n      {{ 'igo.geo.draw.freehandMode' | translate }}\r\n    </mat-slide-toggle>\r\n\r\n    <div class=\"radius-unit\" *ngIf=\"isCircle()\">\r\n      <mat-form-field class=\"radius\">\r\n        <input\r\n          matInput\r\n          type=\"number\"\r\n          min=\"0\"\r\n          placeholder=\"{{ 'igo.geo.spatialFilter.radius' | translate }}\"\r\n          [formControl]=\"radiusFormControl\"\r\n          [readonly]=\"this.freehandMode\"\r\n        />\r\n      </mat-form-field>\r\n\r\n      <mat-form-field class=\"unit-field\">\r\n        <mat-select\r\n          [value]=\"measureUnit\"\r\n          (selectionChange)=\"onMeasureUnitChange($event.value)\"\r\n        >\r\n          <mat-option\r\n            *ngFor=\"let measureUnit of measureUnits\"\r\n            [value]=\"measureUnit\"\r\n          >\r\n            {{ 'igo.geo.measure.' + measureUnit | translate }}\r\n          </mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </div>\r\n  </div>\r\n\r\n  <mat-divider></mat-divider>\r\n\r\n  <div class=\"layer-select-container\">\r\n    <mat-form-field class=\"layer-select\" subscriptSizing=\"dynamic\">\r\n      <mat-label>{{ 'igo.geo.draw.layer.title' | translate }}</mat-label>\r\n      <mat-select\r\n        #selectedLayer\r\n        (selectionChange)=\"onLayerChange(selectedLayer.value)\"\r\n        [value]=\"updateActiveLayer()\"\r\n      >\r\n        <mat-option *ngFor=\"let layer of allLayers\" [value]=\"layer\">\r\n          {{ layer.title }}\r\n        </mat-option>\r\n        <mat-option id=\"createNewLayer\">\r\n          {{ 'igo.geo.draw.layer.createNewLayer' | translate }}\r\n        </mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <button\r\n      *ngIf=\"activeDrawingLayer\"\r\n      mat-icon-button\r\n      [color]=\"activeDrawingLayer.visible ? 'primary' : 'default'\"\r\n      collapsibleButton\r\n      tooltip-position=\"below\"\r\n      matTooltipShowDelay=\"500\"\r\n      [matTooltip]=\"\r\n        activeDrawingLayer.visible\r\n          ? ('igo.geo.layer.hideLayer' | translate)\r\n          : ('igo.geo.layer.showLayer' | translate)\r\n      \"\r\n      (click)=\"activeDrawingLayer.visible = !activeDrawingLayer.visible\"\r\n    >\r\n      <mat-icon [svgIcon]=\"activeDrawingLayer.visible ? 'eye' : 'eye-off'\">\r\n      </mat-icon>\r\n    </button>\r\n  </div>\r\n  <mat-divider></mat-divider>\r\n  <div>\r\n    <button\r\n      *ngIf=\"activeStore.count$.getValue() > 0\"\r\n      class=\"deleteBtn\"\r\n      mat-icon-button\r\n      color=\"warn\"\r\n      tooltip-position=\"below\"\r\n      matTooltipShowDelay=\"500\"\r\n      [matTooltip]=\"'igo.geo.draw.delete' | translate\"\r\n      [disabled]=\"(selectedFeatures$ | async).length === 0\"\r\n      (click)=\"deleteDrawings()\"\r\n    >\r\n      <mat-icon svgIcon=\"delete\"></mat-icon>\r\n    </button>\r\n\r\n    <div>\r\n      <igo-entity-table\r\n        #table\r\n        class=\"table-compact\"\r\n        [store]=\"activeStore\"\r\n        [template]=\"tableTemplate\"\r\n      >\r\n      </igo-entity-table>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"icon-options\">\r\n    <mat-form-field *ngIf=\"icons.length >= 1\">\r\n      <mat-label>{{ 'igo.geo.draw.icon' | translate }}</mat-label>\r\n      <mat-select>\r\n        <mat-select-trigger>\r\n          <div *ngIf=\"icon\" class=\"box\">\r\n            <img src=\"{{ icon }}\" />\r\n          </div>\r\n        </mat-select-trigger>\r\n        <mat-option value=\"\" (click)=\"onIconChange()\">{{\r\n          'igo.geo.draw.noIcon' | translate\r\n        }}</mat-option>\r\n        <mat-option\r\n          *ngFor=\"let icon_html of icons\"\r\n          [value]=\"icon_html\"\r\n          (click)=\"onIconChange(icon_html)\"\r\n        >\r\n          <div class=\"box\">\r\n            <img src=\"{{ icon_html }}\" />\r\n          </div>\r\n        </mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <div class=\"actions-container\">\r\n    <button\r\n      mat-icon-button\r\n      color=\"accent\"\r\n      disableRipple=\"true\"\r\n      (click)=\"openShorcutsDialog()\"\r\n    >\r\n      <mat-icon\r\n        class=\"shortcuts-icon\"\r\n        svgIcon=\"keyboard-outline\"\r\n        tooltip-position=\"below\"\r\n        matTooltipShowDelay=\"500\"\r\n        [matTooltip]=\"'igo.geo.draw.shortcuts' | translate\"\r\n      >\r\n      </mat-icon>\r\n    </button>\r\n\r\n    <button\r\n      *ngIf=\"selectedFeatures$.value.length\"\r\n      mat-raised-button\r\n      color=\"primary\"\r\n      (click)=\"openStyleModalDialog()\"\r\n      [matTooltip]=\"'igo.geo.style.styleModalTooltipSelected' | translate\"\r\n    >\r\n      {{ 'igo.geo.style.styleModal' | translate }}\r\n      <mat-icon\r\n        aria-hidden=\"false\"\r\n        iconPositionEnd\r\n        class=\"style-icon\"\r\n        svgIcon=\"palette\"\r\n        [matBadge]=\"selectedFeatures$.value.length\"\r\n        matBadgeColor=\"warn\"\r\n        matBadgeSize=\"medium\"\r\n      >\r\n      </mat-icon>\r\n    </button>\r\n  </div>\r\n</div>\r\n", styles: [":host .geometry-type-toggle{padding:10px;text-align:center}:host .geometry-type-toggle mat-button-toggle-group{width:100%}:host .geometry-type-toggle mat-button-toggle-group mat-button-toggle{width:25%}:host .draw-options mat-slide-toggle{width:100%;padding:10px}:host .draw-options mat-slide-toggle ::ng-deep .mdc-form-field{width:100%}:host .draw-options mat-slide-toggle ::ng-deep .mdc-label{margin-left:0;width:calc(100% - 60px)}:host .icon-options{margin:5px 5px 0}:host .deleteBtn{margin-left:16px}:host .edition-drawing{padding:10px 0}:host img{width:100%;height:100%}:host .deleteBtn{margin-left:12px}:host .storeTable{height:auto!important}:host .layer-select{flex:1;margin-right:8px}:host .input-button-container{padding:10px}:host .input-button-container mat-form-field{width:25%}:host .input-button-container button{left:8px;bottom:10px}:host .radius{flex:2}:host .unit-field{flex:1;margin-left:8px}:host .radius-unit{display:flex;width:100%;padding:4px 8px}:host ::ng-deep igo-entity-table td:last-child{text-align:right!important}:host ::ng-deep igo-entity-table td:last-child button{margin:0%!important}:host .layer-select-container{margin:16px 8px}:host .actions-container,:host .layer-select-container{display:flex;align-items:center}\n"] }]
+                    ], 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"] }]
         }], ctorParameters: () => [{ type: i1$2.LanguageService }, { type: i1$6.UntypedFormBuilder }, { type: DrawStyleService }, { type: i1$5.MatDialog }, { type: DrawIconService }], propDecorators: { map: [{
                 type: Input
             }], stores: [{
@@ -28501,11 +28559,11 @@ class GeometryFormFieldInputComponent {
         return guideStyle;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: GeometryFormFieldInputComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$6.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: GeometryFormFieldInputComponent, isStandalone: true, selector: "igo-geometry-form-field-input", inputs: { map: "map", geometryType: "geometryType", drawGuide: "drawGuide", measure: "measure", drawControlIsActive: "drawControlIsActive", freehandDrawIsActive: "freehandDrawIsActive", predefinedRadius: "predefinedRadius", controlOptions: "controlOptions", drawStyle: "drawStyle", overlayStyle: "overlayStyle", value: "value", radius: "radius" }, ngImport: i0, template: "<ng-template></ng-template>\r\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: GeometryFormFieldInputComponent, isStandalone: true, selector: "igo-geometry-form-field-input", inputs: { map: "map", geometryType: "geometryType", drawGuide: "drawGuide", measure: "measure", drawControlIsActive: "drawControlIsActive", freehandDrawIsActive: "freehandDrawIsActive", predefinedRadius: "predefinedRadius", controlOptions: "controlOptions", drawStyle: "drawStyle", overlayStyle: "overlayStyle", value: "value", radius: "radius" }, ngImport: i0, template: "<ng-template></ng-template>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: GeometryFormFieldInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'igo-geometry-form-field-input', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<ng-template></ng-template>\r\n" }]
+            args: [{ selector: 'igo-geometry-form-field-input', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<ng-template></ng-template>\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$6.NgControl, decorators: [{
                     type: Optional
                 }, {
@@ -29282,7 +29340,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\r\n  [formControl]=\"formControl\"\r\n  [map]=\"map\"\r\n  [geometryType]=\"geometryType\"\r\n  [drawGuide]=\"drawGuide$ | async\"\r\n  [measure]=\"measure\"\r\n  [drawControlIsActive]=\"drawControlIsActive\"\r\n  [freehandDrawIsActive]=\"freehandDrawIsActive\"\r\n  [drawStyle]=\"drawStyle$ | async\"\r\n  [overlayStyle]=\"overlayStyle$ | async\"\r\n  [radius]=\"radius\"\r\n  [predefinedRadius]=\"$any(predefinedRadius)\"\r\n>\r\n</igo-geometry-form-field-input>\r\n\r\n<div class=\"header\">\r\n  <mat-slide-toggle\r\n    *ngIf=\"!isPredefined()\"\r\n    [checked]=\"drawControlIsActive\"\r\n    [labelPosition]=\"'before'\"\r\n    (change)=\"onDrawControlChange()\"\r\n  >\r\n    {{ 'igo.geo.spatialFilter.drawControl' | translate }}\r\n  </mat-slide-toggle>\r\n  <mat-slide-toggle\r\n    *ngIf=\"!isPredefined()\"\r\n    [checked]=\"freehandDrawIsActive\"\r\n    [labelPosition]=\"'before'\"\r\n    (change)=\"onfreehandControlChange()\"\r\n  >\r\n    {{ 'igo.geo.spatialFilter.freehandControl' | translate }}\r\n  </mat-slide-toggle>\r\n</div>\r\n\r\n<div class=\"buffer-unit\" *ngIf=\"isPolygon()\">\r\n  <mat-form-field class=\"buffer\">\r\n    <input\r\n      type=\"number\"\r\n      matInput\r\n      placeholder=\"{{ 'igo.geo.spatialFilter.buffer' | translate }}\"\r\n      [formControl]=\"bufferFormControl\"\r\n      [value]=\"0\"\r\n      [readonly]=\"this.formControl.value === null\"\r\n    />\r\n  </mat-form-field>\r\n\r\n  <mat-form-field class=\"unit-field\">\r\n    <mat-select\r\n      [value]=\"measureUnit\"\r\n      (selectionChange)=\"onMeasureUnitChange($event.value)\"\r\n    >\r\n      <mat-option\r\n        *ngFor=\"let measureUnit of measureUnits\"\r\n        [value]=\"measureUnit\"\r\n      >\r\n        {{ 'igo.geo.measure.' + measureUnit | translate }}\r\n      </mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n</div>\r\n\r\n<div class=\"radius-unit\" *ngIf=\"isPoint()\">\r\n  <mat-form-field class=\"radius\">\r\n    <input\r\n      type=\"number\"\r\n      matInput\r\n      placeholder=\"{{ 'igo.geo.spatialFilter.radius' | translate }}\"\r\n      [formControl]=\"radiusFormControl\"\r\n      [value]=\"1000\"\r\n      (input)=\"getRadius()\"\r\n      [readonly]=\"this.freehandDrawIsActive && this.formControl.value === null\"\r\n    />\r\n  </mat-form-field>\r\n\r\n  <mat-form-field class=\"unit-field\">\r\n    <mat-select\r\n      [value]=\"measureUnit\"\r\n      (selectionChange)=\"onMeasureUnitChange($event.value)\"\r\n    >\r\n      <mat-option\r\n        *ngFor=\"let measureUnit of measureUnits\"\r\n        [value]=\"measureUnit\"\r\n      >\r\n        {{ 'igo.geo.measure.' + measureUnit | translate }}\r\n      </mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n</div>\r\n\r\n<mat-label class=\"title mat-typography\"\r\n  >{{ 'igo.geo.spatialFilter.search' | translate }} :\r\n</mat-label>\r\n<mat-radio-group [value]=\"selectedItemType\">\r\n  <mat-radio-button\r\n    *ngFor=\"let item of itemType\"\r\n    [value]=\"item\"\r\n    (change)=\"onItemTypeChange($event)\"\r\n  >\r\n    {{ 'igo.geo.spatialFilter.' + item | translate }}\r\n  </mat-radio-button>\r\n</mat-radio-group>\r\n\r\n<div\r\n  class=\"thematics\"\r\n  *ngIf=\"\r\n    (selectedItemType === 'Thematics' && !tableTemplate) ||\r\n    (selectedItemType === 'Thematics' && tableTemplate && !listIsVisible)\r\n  \"\r\n>\r\n  <mat-table>\r\n    <!-- Name Column -->\r\n    <ng-container matColumnDef=\"name\">\r\n      <mat-header-cell *matHeaderCellDef class=\"thematics-header\">{{\r\n        'igo.geo.spatialFilter.Thematics' | translate\r\n      }}</mat-header-cell>\r\n    </ng-container>\r\n\r\n    <!-- Select Column -->\r\n    <ng-container matColumnDef=\"select\">\r\n      <mat-header-cell *matHeaderCellDef class=\"checks-header\">\r\n        <mat-checkbox\r\n          (change)=\"$event ? masterToggle() : null\"\r\n          [checked]=\"isAllSelected()\"\r\n          [indeterminate]=\"selectedThematics.hasValue() && !isAllSelected()\"\r\n        >\r\n        </mat-checkbox>\r\n      </mat-header-cell>\r\n    </ng-container>\r\n\r\n    <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\r\n    <mat-row *matRowDef=\"let row; columns: displayedColumns\"></mat-row>\r\n  </mat-table>\r\n\r\n  <mat-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\">\r\n    <!-- This is the tree node template for leaf nodes -->\r\n    <mat-tree-node *matTreeNodeDef=\"let node\" matTreeNodeToggle>\r\n      <li class=\"mat-tree-node\">\r\n        <!-- use a disabled button to provide padding for tree leaf -->\r\n        <button mat-icon-button disabled></button>\r\n        {{ node.name }}\r\n        <mat-checkbox\r\n          class=\"tree-check\"\r\n          (click)=\"$event.stopPropagation()\"\r\n          (change)=\"$event ? onToggleChange(node) : null\"\r\n          [checked]=\"selectedThematics.isSelected(node)\"\r\n        >\r\n        </mat-checkbox>\r\n      </li>\r\n    </mat-tree-node>\r\n\r\n    <!-- This is the tree node template for expandable nodes -->\r\n    <mat-nested-tree-node *matTreeNodeDef=\"let node; when: hasChild\">\r\n      <div class=\"mat-tree-node\">\r\n        <button mat-icon-button (click)=\"onToggleClick(node)\">\r\n          <mat-icon\r\n            [svgIcon]=\"\r\n              treeControl.isExpanded(node) ? 'chevron-down' : 'chevron-right'\r\n            \"\r\n          ></mat-icon>\r\n        </button>\r\n        {{ node.name }}\r\n        <mat-checkbox\r\n          class=\"tree-check-2\"\r\n          (change)=\"$event ? childrensToggle(node) : null\"\r\n          [checked]=\"isAllSelected(node)\"\r\n          [indeterminate]=\"hasChildrenSelected(node) && !isAllSelected(node)\"\r\n        >\r\n        </mat-checkbox>\r\n      </div>\r\n      <ul\r\n        class=\"tree-ul\"\r\n        [class.example-tree-invisible]=\"!treeControl.isExpanded(node)\"\r\n      >\r\n        <ng-container matTreeNodeOutlet></ng-container>\r\n      </ul>\r\n    </mat-nested-tree-node>\r\n  </mat-tree>\r\n</div>\r\n\r\n<div class=\"buttons\">\r\n  <button\r\n    *ngIf=\"isPredefined()\"\r\n    mat-raised-button\r\n    class=\"clear-search-button\"\r\n    [disabled]=\"disabledClearSearch()\"\r\n    (click)=\"clearSearch()\"\r\n  >\r\n    {{ 'igo.geo.spatialFilter.clearSearch' | translate }}\r\n  </button>\r\n\r\n  <button\r\n    *ngIf=\"isPolygon() || isPoint()\"\r\n    mat-raised-button\r\n    class=\"clear-form-button\"\r\n    [disabled]=\"this.formControl.value === null\"\r\n    (click)=\"clearDrawZone()\"\r\n  >\r\n    {{ 'igo.geo.spatialFilter.clearForm' | translate }}\r\n  </button>\r\n\r\n  <button\r\n    mat-raised-button\r\n    class=\"search-button\"\r\n    [disabled]=\"disableSearchButton()\"\r\n    color=\"primary\"\r\n    (click)=\"toggleSearchButton()\"\r\n  >\r\n    {{ 'igo.geo.spatialFilter.goSearch' | translate }}\r\n  </button>\r\n\r\n  <button\r\n    mat-raised-button\r\n    class=\"remove-button\"\r\n    [disabled]=\"allLayers.length === 0\"\r\n    (click)=\"clearButton()\"\r\n  >\r\n    {{ 'igo.geo.spatialFilter.removeLayer' | translate }}\r\n  </button>\r\n\r\n  <button\r\n    mat-raised-button\r\n    class=\"export-button\"\r\n    [disabled]=\"!store.entities$.getValue().length\"\r\n    (click)=\"export.emit()\"\r\n  >\r\n    {{ 'igo.geo.spatialFilter.exportLayer' | translate }}\r\n  </button>\r\n</div>\r\n\r\n<button\r\n  class=\"chevron-down\"\r\n  *ngIf=\"store.all().length && tableTemplate && !listIsVisible\"\r\n  mat-icon-button\r\n  matTooltipShowDelay=\"500\"\r\n  [matTooltip]=\"'igo.geo.spatialFilter.showSearchResults' | translate\"\r\n  (click)=\"toggleVisibleList()\"\r\n>\r\n  <mat-icon svgIcon=\"chevron-down\"></mat-icon>\r\n</button>\r\n\r\n<div\r\n  class=\"results\"\r\n  *ngIf=\"store.all().length && tableTemplate && listIsVisible\"\r\n>\r\n  <button\r\n    *ngIf=\"listIsVisible\"\r\n    mat-icon-button\r\n    matTooltipShowDelay=\"500\"\r\n    [matTooltip]=\"'igo.geo.spatialFilter.hideSearchResults' | translate\"\r\n    (click)=\"toggleVisibleList()\"\r\n  >\r\n    <mat-icon svgIcon=\"chevron-up\"></mat-icon>\r\n  </button>\r\n  <igo-entity-table\r\n    class=\"results-list\"\r\n    [template]=\"tableTemplate\"\r\n    [store]=\"store\"\r\n    (entitySelectChange)=\"entityChange.emit($event)\"\r\n  >\r\n  </igo-entity-table>\r\n</div>\r\n", styles: [":host .header{margin-top:5px;width:100%}:host .mat-mdc-slide-toggle{padding:5px;width:100%}:host .mat-mdc-slide-toggle ::ng-deep .mdc-form-field{width:100%}:host .mat-mdc-slide-toggle ::ng-deep .mdc-label{margin-left:0;width:calc(100% - 60px)}:host .title{margin-left:5px;font-size:initial}:host .mat-mdc-radio-group{display:flex;flex-direction:column}:host .mat-mdc-radio-button{display:inline-flex;position:relative;margin-left:12px}:host .mat-mdc-form-field{margin-top:5px}:host .mat-column-select{overflow:auto}:host .buttons{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:16px 0}:host .thematics{max-height:35%;overflow:auto;margin-top:5px;width:98%}:host .results{overflow:auto;max-height:250px;width:98%}:host .mat-column-typeResults{max-width:100px;margin-right:5px}:host .buffer-unit,:host .radius-unit{display:flex;width:100%;padding:5px;box-sizing:border-box}:host .radius,:host .buffer{flex-flow:column nowrap;flex:2}:host .unit-field{flex:1;margin-left:8px}:host .example-tree-invisible{display:none}:host .tree-ul{margin:0;padding:0 0 0 20px;list-style-type:none}:host .tree-check,:host .tree-check-2{position:relative;margin-left:auto;margin-right:5px}:host .thematics-header{max-width:250px}:host .checks-header{padding:none;max-width:calc(100% - 316px);overflow:hidden}:host .mat-mdc-checkbox{padding:5px}:host .mat-tree-node{position:relative;min-height:42px;width:280px}:host .mat-mdc-header-cell{height:56px}:host .results{max-height:45%;width:98%}:host .results igo-entity-table ::ng-deep div.table-container{overflow:unset}\n"], dependencies: [{ kind: "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            [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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SpatialFilterItemComponent, decorators: [{
             type: Component,
@@ -29307,7 +29365,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                         EntityTableComponent,
                         AsyncPipe,
                         TranslateModule
-                    ], template: "<igo-geometry-form-field-input\r\n  [formControl]=\"formControl\"\r\n  [map]=\"map\"\r\n  [geometryType]=\"geometryType\"\r\n  [drawGuide]=\"drawGuide$ | async\"\r\n  [measure]=\"measure\"\r\n  [drawControlIsActive]=\"drawControlIsActive\"\r\n  [freehandDrawIsActive]=\"freehandDrawIsActive\"\r\n  [drawStyle]=\"drawStyle$ | async\"\r\n  [overlayStyle]=\"overlayStyle$ | async\"\r\n  [radius]=\"radius\"\r\n  [predefinedRadius]=\"$any(predefinedRadius)\"\r\n>\r\n</igo-geometry-form-field-input>\r\n\r\n<div class=\"header\">\r\n  <mat-slide-toggle\r\n    *ngIf=\"!isPredefined()\"\r\n    [checked]=\"drawControlIsActive\"\r\n    [labelPosition]=\"'before'\"\r\n    (change)=\"onDrawControlChange()\"\r\n  >\r\n    {{ 'igo.geo.spatialFilter.drawControl' | translate }}\r\n  </mat-slide-toggle>\r\n  <mat-slide-toggle\r\n    *ngIf=\"!isPredefined()\"\r\n    [checked]=\"freehandDrawIsActive\"\r\n    [labelPosition]=\"'before'\"\r\n    (change)=\"onfreehandControlChange()\"\r\n  >\r\n    {{ 'igo.geo.spatialFilter.freehandControl' | translate }}\r\n  </mat-slide-toggle>\r\n</div>\r\n\r\n<div class=\"buffer-unit\" *ngIf=\"isPolygon()\">\r\n  <mat-form-field class=\"buffer\">\r\n    <input\r\n      type=\"number\"\r\n      matInput\r\n      placeholder=\"{{ 'igo.geo.spatialFilter.buffer' | translate }}\"\r\n      [formControl]=\"bufferFormControl\"\r\n      [value]=\"0\"\r\n      [readonly]=\"this.formControl.value === null\"\r\n    />\r\n  </mat-form-field>\r\n\r\n  <mat-form-field class=\"unit-field\">\r\n    <mat-select\r\n      [value]=\"measureUnit\"\r\n      (selectionChange)=\"onMeasureUnitChange($event.value)\"\r\n    >\r\n      <mat-option\r\n        *ngFor=\"let measureUnit of measureUnits\"\r\n        [value]=\"measureUnit\"\r\n      >\r\n        {{ 'igo.geo.measure.' + measureUnit | translate }}\r\n      </mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n</div>\r\n\r\n<div class=\"radius-unit\" *ngIf=\"isPoint()\">\r\n  <mat-form-field class=\"radius\">\r\n    <input\r\n      type=\"number\"\r\n      matInput\r\n      placeholder=\"{{ 'igo.geo.spatialFilter.radius' | translate }}\"\r\n      [formControl]=\"radiusFormControl\"\r\n      [value]=\"1000\"\r\n      (input)=\"getRadius()\"\r\n      [readonly]=\"this.freehandDrawIsActive && this.formControl.value === null\"\r\n    />\r\n  </mat-form-field>\r\n\r\n  <mat-form-field class=\"unit-field\">\r\n    <mat-select\r\n      [value]=\"measureUnit\"\r\n      (selectionChange)=\"onMeasureUnitChange($event.value)\"\r\n    >\r\n      <mat-option\r\n        *ngFor=\"let measureUnit of measureUnits\"\r\n        [value]=\"measureUnit\"\r\n      >\r\n        {{ 'igo.geo.measure.' + measureUnit | translate }}\r\n      </mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n</div>\r\n\r\n<mat-label class=\"title mat-typography\"\r\n  >{{ 'igo.geo.spatialFilter.search' | translate }} :\r\n</mat-label>\r\n<mat-radio-group [value]=\"selectedItemType\">\r\n  <mat-radio-button\r\n    *ngFor=\"let item of itemType\"\r\n    [value]=\"item\"\r\n    (change)=\"onItemTypeChange($event)\"\r\n  >\r\n    {{ 'igo.geo.spatialFilter.' + item | translate }}\r\n  </mat-radio-button>\r\n</mat-radio-group>\r\n\r\n<div\r\n  class=\"thematics\"\r\n  *ngIf=\"\r\n    (selectedItemType === 'Thematics' && !tableTemplate) ||\r\n    (selectedItemType === 'Thematics' && tableTemplate && !listIsVisible)\r\n  \"\r\n>\r\n  <mat-table>\r\n    <!-- Name Column -->\r\n    <ng-container matColumnDef=\"name\">\r\n      <mat-header-cell *matHeaderCellDef class=\"thematics-header\">{{\r\n        'igo.geo.spatialFilter.Thematics' | translate\r\n      }}</mat-header-cell>\r\n    </ng-container>\r\n\r\n    <!-- Select Column -->\r\n    <ng-container matColumnDef=\"select\">\r\n      <mat-header-cell *matHeaderCellDef class=\"checks-header\">\r\n        <mat-checkbox\r\n          (change)=\"$event ? masterToggle() : null\"\r\n          [checked]=\"isAllSelected()\"\r\n          [indeterminate]=\"selectedThematics.hasValue() && !isAllSelected()\"\r\n        >\r\n        </mat-checkbox>\r\n      </mat-header-cell>\r\n    </ng-container>\r\n\r\n    <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\r\n    <mat-row *matRowDef=\"let row; columns: displayedColumns\"></mat-row>\r\n  </mat-table>\r\n\r\n  <mat-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\">\r\n    <!-- This is the tree node template for leaf nodes -->\r\n    <mat-tree-node *matTreeNodeDef=\"let node\" matTreeNodeToggle>\r\n      <li class=\"mat-tree-node\">\r\n        <!-- use a disabled button to provide padding for tree leaf -->\r\n        <button mat-icon-button disabled></button>\r\n        {{ node.name }}\r\n        <mat-checkbox\r\n          class=\"tree-check\"\r\n          (click)=\"$event.stopPropagation()\"\r\n          (change)=\"$event ? onToggleChange(node) : null\"\r\n          [checked]=\"selectedThematics.isSelected(node)\"\r\n        >\r\n        </mat-checkbox>\r\n      </li>\r\n    </mat-tree-node>\r\n\r\n    <!-- This is the tree node template for expandable nodes -->\r\n    <mat-nested-tree-node *matTreeNodeDef=\"let node; when: hasChild\">\r\n      <div class=\"mat-tree-node\">\r\n        <button mat-icon-button (click)=\"onToggleClick(node)\">\r\n          <mat-icon\r\n            [svgIcon]=\"\r\n              treeControl.isExpanded(node) ? 'chevron-down' : 'chevron-right'\r\n            \"\r\n          ></mat-icon>\r\n        </button>\r\n        {{ node.name }}\r\n        <mat-checkbox\r\n          class=\"tree-check-2\"\r\n          (change)=\"$event ? childrensToggle(node) : null\"\r\n          [checked]=\"isAllSelected(node)\"\r\n          [indeterminate]=\"hasChildrenSelected(node) && !isAllSelected(node)\"\r\n        >\r\n        </mat-checkbox>\r\n      </div>\r\n      <ul\r\n        class=\"tree-ul\"\r\n        [class.example-tree-invisible]=\"!treeControl.isExpanded(node)\"\r\n      >\r\n        <ng-container matTreeNodeOutlet></ng-container>\r\n      </ul>\r\n    </mat-nested-tree-node>\r\n  </mat-tree>\r\n</div>\r\n\r\n<div class=\"buttons\">\r\n  <button\r\n    *ngIf=\"isPredefined()\"\r\n    mat-raised-button\r\n    class=\"clear-search-button\"\r\n    [disabled]=\"disabledClearSearch()\"\r\n    (click)=\"clearSearch()\"\r\n  >\r\n    {{ 'igo.geo.spatialFilter.clearSearch' | translate }}\r\n  </button>\r\n\r\n  <button\r\n    *ngIf=\"isPolygon() || isPoint()\"\r\n    mat-raised-button\r\n    class=\"clear-form-button\"\r\n    [disabled]=\"this.formControl.value === null\"\r\n    (click)=\"clearDrawZone()\"\r\n  >\r\n    {{ 'igo.geo.spatialFilter.clearForm' | translate }}\r\n  </button>\r\n\r\n  <button\r\n    mat-raised-button\r\n    class=\"search-button\"\r\n    [disabled]=\"disableSearchButton()\"\r\n    color=\"primary\"\r\n    (click)=\"toggleSearchButton()\"\r\n  >\r\n    {{ 'igo.geo.spatialFilter.goSearch' | translate }}\r\n  </button>\r\n\r\n  <button\r\n    mat-raised-button\r\n    class=\"remove-button\"\r\n    [disabled]=\"allLayers.length === 0\"\r\n    (click)=\"clearButton()\"\r\n  >\r\n    {{ 'igo.geo.spatialFilter.removeLayer' | translate }}\r\n  </button>\r\n\r\n  <button\r\n    mat-raised-button\r\n    class=\"export-button\"\r\n    [disabled]=\"!store.entities$.getValue().length\"\r\n    (click)=\"export.emit()\"\r\n  >\r\n    {{ 'igo.geo.spatialFilter.exportLayer' | translate }}\r\n  </button>\r\n</div>\r\n\r\n<button\r\n  class=\"chevron-down\"\r\n  *ngIf=\"store.all().length && tableTemplate && !listIsVisible\"\r\n  mat-icon-button\r\n  matTooltipShowDelay=\"500\"\r\n  [matTooltip]=\"'igo.geo.spatialFilter.showSearchResults' | translate\"\r\n  (click)=\"toggleVisibleList()\"\r\n>\r\n  <mat-icon svgIcon=\"chevron-down\"></mat-icon>\r\n</button>\r\n\r\n<div\r\n  class=\"results\"\r\n  *ngIf=\"store.all().length && tableTemplate && listIsVisible\"\r\n>\r\n  <button\r\n    *ngIf=\"listIsVisible\"\r\n    mat-icon-button\r\n    matTooltipShowDelay=\"500\"\r\n    [matTooltip]=\"'igo.geo.spatialFilter.hideSearchResults' | translate\"\r\n    (click)=\"toggleVisibleList()\"\r\n  >\r\n    <mat-icon svgIcon=\"chevron-up\"></mat-icon>\r\n  </button>\r\n  <igo-entity-table\r\n    class=\"results-list\"\r\n    [template]=\"tableTemplate\"\r\n    [store]=\"store\"\r\n    (entitySelectChange)=\"entityChange.emit($event)\"\r\n  >\r\n  </igo-entity-table>\r\n</div>\r\n", styles: [":host .header{margin-top:5px;width:100%}:host .mat-mdc-slide-toggle{padding:5px;width:100%}:host .mat-mdc-slide-toggle ::ng-deep .mdc-form-field{width:100%}:host .mat-mdc-slide-toggle ::ng-deep .mdc-label{margin-left:0;width:calc(100% - 60px)}:host .title{margin-left:5px;font-size:initial}:host .mat-mdc-radio-group{display:flex;flex-direction:column}:host .mat-mdc-radio-button{display:inline-flex;position:relative;margin-left:12px}:host .mat-mdc-form-field{margin-top:5px}:host .mat-column-select{overflow:auto}:host .buttons{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:16px 0}:host .thematics{max-height:35%;overflow:auto;margin-top:5px;width:98%}:host .results{overflow:auto;max-height:250px;width:98%}:host .mat-column-typeResults{max-width:100px;margin-right:5px}:host .buffer-unit,:host .radius-unit{display:flex;width:100%;padding:5px;box-sizing:border-box}:host .radius,:host .buffer{flex-flow:column nowrap;flex:2}:host .unit-field{flex:1;margin-left:8px}:host .example-tree-invisible{display:none}:host .tree-ul{margin:0;padding:0 0 0 20px;list-style-type:none}:host .tree-check,:host .tree-check-2{position:relative;margin-left:auto;margin-right:5px}:host .thematics-header{max-width:250px}:host .checks-header{padding:none;max-width:calc(100% - 316px);overflow:hidden}:host .mat-mdc-checkbox{padding:5px}:host .mat-tree-node{position:relative;min-height:42px;width:280px}:host .mat-mdc-header-cell{height:56px}:host .results{max-height:45%;width:98%}:host .results igo-entity-table ::ng-deep div.table-container{overflow:unset}\n"] }]
+                    ], 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"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: SpatialFilterService }, { type: i2$3.MessageService }, { type: i1$2.LanguageService }], propDecorators: { map: [{
                 type: Input
             }], type: [{
@@ -30101,7 +30159,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'\">\r\n  <div *ngIf=\"!isRange\" class=\"igo-col igo-col-100 igo-col-100-m\">\r\n    <mat-form-field>\r\n      <mat-datetimepicker-toggle\r\n        class=\"time-filter-mat-datetimepicker-toggle\"\r\n        [for]=\"datetimePicker\"\r\n        matSuffix\r\n      ></mat-datetimepicker-toggle>\r\n      <mat-datetimepicker\r\n        #datetimePicker\r\n        [type]=\"type\"\r\n        [openOnFocus]=\"true\"\r\n        [timeInterval]=\"5\"\r\n      ></mat-datetimepicker>\r\n      <input\r\n        matInput\r\n        autocomplete=\"false\"\r\n        placeholder=\"{{ 'igo.geo.timeFilter.date' | translate }}\"\r\n        [matDatetimepicker]=\"datetimePicker\"\r\n        [(ngModel)]=\"date\"\r\n        [min]=\"min\"\r\n        [max]=\"max\"\r\n        readonly=\"readonly\"\r\n        (dateChange)=\"handleDateChange($event)\"\r\n      />\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <div *ngIf=\"isRange\">\r\n    <div class=\"igo-col igo-col-100\">\r\n      <mat-form-field>\r\n        <mat-datetimepicker-toggle\r\n          class=\"time-filter-mat-datetimepicker-toggle\"\r\n          [for]=\"minDatetimePicker\"\r\n          matSuffix\r\n        ></mat-datetimepicker-toggle>\r\n        <mat-datetimepicker\r\n          #minDatetimePicker\r\n          [type]=\"type\"\r\n          [openOnFocus]=\"true\"\r\n          [timeInterval]=\"5\"\r\n        ></mat-datetimepicker>\r\n        <input\r\n          matInput\r\n          autocomplete=\"false\"\r\n          placeholder=\"{{ 'igo.geo.timeFilter.startDate' | translate }}\"\r\n          [matDatetimepicker]=\"minDatetimePicker\"\r\n          [(ngModel)]=\"startDate\"\r\n          [min]=\"min\"\r\n          [max]=\"getRangeMaxDate()\"\r\n          readonly=\"readonly\"\r\n          (input)=\"(startDate)\"\r\n          (dateChange)=\"handleDateChange($event)\"\r\n        />\r\n      </mat-form-field>\r\n    </div>\r\n\r\n    <div class=\"igo-col igo-col-100\">\r\n      <mat-form-field>\r\n        <mat-datetimepicker-toggle\r\n          class=\"time-filter-mat-datetimepicker-toggle\"\r\n          [for]=\"maxDatetimePicker\"\r\n          matSuffix\r\n        ></mat-datetimepicker-toggle>\r\n        <mat-datetimepicker\r\n          #maxDatetimePicker\r\n          [type]=\"type\"\r\n          [openOnFocus]=\"true\"\r\n          [timeInterval]=\"5\"\r\n        ></mat-datetimepicker>\r\n        <input\r\n          matInput\r\n          autocomplete=\"false\"\r\n          placeholder=\"{{ 'igo.geo.timeFilter.endDate' | translate }}\"\r\n          [matDatetimepicker]=\"maxDatetimePicker\"\r\n          [(ngModel)]=\"endDate\"\r\n          [min]=\"getRangeMinDate()\"\r\n          [max]=\"max\"\r\n          readonly=\"readonly\"\r\n          (dateChange)=\"handleDateChange($event)\"\r\n        />\r\n      </mat-form-field>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div *ngIf=\"style === 'calendar' && type === 'year'\">\r\n  <div *ngIf=\"!isRange\" class=\"igo-col igo-col-100 igo-col-100-m\">\r\n    <mat-form-field>\r\n      <mat-select\r\n        placeholder=\"{{ 'igo.geo.timeFilter.date' | translate }}\"\r\n        [(ngModel)]=\"year\"\r\n        (selectionChange)=\"handleYearChange($event)\"\r\n      >\r\n        <mat-option [value]=\"year\" *ngFor=\"let year of listYears\">{{\r\n          year\r\n        }}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <div *ngIf=\"isRange\">\r\n    <div class=\"igo-col igo-col-100\">\r\n      <mat-form-field>\r\n        <mat-select\r\n          placeholder=\"{{ 'igo.geo.timeFilter.startDate' | translate }}\"\r\n          [(ngModel)]=\"startYear\"\r\n          (selectionChange)=\"handleYearChange($event)\"\r\n        >\r\n          <mat-option\r\n            [value]=\"startYear\"\r\n            *ngFor=\"let startYear of startListYears\"\r\n            >{{ startYear }}</mat-option\r\n          >\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </div>\r\n\r\n    <div class=\"igo-col igo-col-100\">\r\n      <mat-form-field>\r\n        <mat-select\r\n          placeholder=\"{{ 'igo.geo.timeFilter.endDate' | translate }}\"\r\n          [(ngModel)]=\"endYear\"\r\n          (selectionChange)=\"handleYearChange($event)\"\r\n        >\r\n          <mat-option [value]=\"endYear\" *ngFor=\"let endYear of endListYears\">{{\r\n            endYear\r\n          }}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<br />\r\n<div\r\n  *ngIf=\"!isRange && style === 'slider' && type === 'year'\"\r\n  class=\"igo-col igo-col-100 igo-col-100-m mat-typography\"\r\n>\r\n  <span>{{ startYear }}</span>\r\n  <!-- TODO: The 'tickInterval' property no longer exists -->\r\n  <mat-slider\r\n    id=\"time-slider\"\r\n    step=\"{{ step }}\"\r\n    [min]=\"startYear\"\r\n    [max]=\"endYear\"\r\n    [color]=\"color\"\r\n    thumbLabel\r\n    [disabled]=\"!options.enabled || !layer.visible\"\r\n    #ngSlider\r\n    ><input\r\n      matSliderThumb\r\n      [value]=\"handleSliderValue()\"\r\n      (input)=\"\r\n        handleSliderYearChange({\r\n          source: ngSliderThumb,\r\n          parent: ngSlider,\r\n          value: ngSliderThumb.value\r\n        })\r\n      \"\r\n      #ngSliderThumb=\"matSliderThumb\"\r\n      (change)=\"\r\n        handleSliderYearChange({\r\n          source: ngSliderThumb,\r\n          parent: ngSlider,\r\n          value: ngSliderThumb.value\r\n        })\r\n      \"\r\n    />\r\n  </mat-slider>\r\n  <span>{{ endYear }}</span>\r\n  <p *ngIf=\"options.enabled\" class=\"date-below\">{{ year }}</p>\r\n  <div #actions class=\"igo-layer-actions-container\">\r\n    <mat-slide-toggle\r\n      (change)=\"toggleFilterState()\"\r\n      tooltip-position=\"below\"\r\n      matTooltipShowDelay=\"500\"\r\n      [matTooltip]=\"'igo.geo.filter.toggleFilterState' | translate\"\r\n      [color]=\"color\"\r\n      [checked]=\"options.enabled\"\r\n      [disabled]=\"!layer.visible\"\r\n    >\r\n    </mat-slide-toggle>\r\n    <button\r\n      [disabled]=\"!options.enabled || !layer.visible\"\r\n      mat-icon-button\r\n      color=\"primary\"\r\n      (click)=\"playYear($event)\"\r\n    >\r\n      <mat-icon svgIcon=\"{{ playIcon }}\"></mat-icon>\r\n    </button>\r\n    <button\r\n      [disabled]=\"!options.enabled || !layer.visible\"\r\n      mat-icon-button\r\n      color=\"primary\"\r\n      (click)=\"resetFilter($event)\"\r\n    >\r\n      <mat-icon svgIcon=\"{{ resetIcon }}\"></mat-icon>\r\n    </button>\r\n  </div>\r\n</div>\r\n\r\n<div\r\n  *ngIf=\"style === 'slider' && type !== 'year'\"\r\n  class=\"igo-col igo-col-100 igo-col-100-m\"\r\n>\r\n  <!-- TODO: The 'tickInterval' property no longer exists -->\r\n  <mat-slider\r\n    id=\"time-slider\"\r\n    step=\"{{ step }}\"\r\n    [min]=\"dateToNumber(min)\"\r\n    [max]=\"dateToNumber(max)\"\r\n    thumbLabel\r\n    (selectionChange)=\"handleSliderDateChange($event)\"\r\n    #ngSlider\r\n    ><input\r\n      matSliderThumb\r\n      [value]=\"handleSliderValue()\"\r\n      (input)=\"\r\n        handleSliderDateChange({\r\n          source: ngSliderThumb,\r\n          parent: ngSlider,\r\n          value: ngSliderThumb.value\r\n        })\r\n      \"\r\n      #ngSliderThumb=\"matSliderThumb\"\r\n    />\r\n  </mat-slider>\r\n  <p class=\"date-below\">{{ handleSliderTooltip() }}</p>\r\n  <button mat-icon-button color=\"primary\" (click)=\"playFilter($event)\">\r\n    <mat-icon svgIcon=\"{{ playIcon }}\"></mat-icon>\r\n  </button>\r\n</div>\r\n", styles: [":host .igo-layer-filters-container{padding-left:5px}:host #time-slider{width:70%}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){:host #time-slider{width:60%}}:host .date-below{margin:0}:host .igo-layer-actions-container{display:flex;align-items:center;justify-content:center}\n"], dependencies: [{ kind: "directive", type: 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 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
                 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: [{
@@ -30122,7 +30180,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                         MatButtonModule,
                         MatIconModule,
                         TranslateModule
-                    ], template: "<div *ngIf=\"style === 'calendar' && type !== 'year'\">\r\n  <div *ngIf=\"!isRange\" class=\"igo-col igo-col-100 igo-col-100-m\">\r\n    <mat-form-field>\r\n      <mat-datetimepicker-toggle\r\n        class=\"time-filter-mat-datetimepicker-toggle\"\r\n        [for]=\"datetimePicker\"\r\n        matSuffix\r\n      ></mat-datetimepicker-toggle>\r\n      <mat-datetimepicker\r\n        #datetimePicker\r\n        [type]=\"type\"\r\n        [openOnFocus]=\"true\"\r\n        [timeInterval]=\"5\"\r\n      ></mat-datetimepicker>\r\n      <input\r\n        matInput\r\n        autocomplete=\"false\"\r\n        placeholder=\"{{ 'igo.geo.timeFilter.date' | translate }}\"\r\n        [matDatetimepicker]=\"datetimePicker\"\r\n        [(ngModel)]=\"date\"\r\n        [min]=\"min\"\r\n        [max]=\"max\"\r\n        readonly=\"readonly\"\r\n        (dateChange)=\"handleDateChange($event)\"\r\n      />\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <div *ngIf=\"isRange\">\r\n    <div class=\"igo-col igo-col-100\">\r\n      <mat-form-field>\r\n        <mat-datetimepicker-toggle\r\n          class=\"time-filter-mat-datetimepicker-toggle\"\r\n          [for]=\"minDatetimePicker\"\r\n          matSuffix\r\n        ></mat-datetimepicker-toggle>\r\n        <mat-datetimepicker\r\n          #minDatetimePicker\r\n          [type]=\"type\"\r\n          [openOnFocus]=\"true\"\r\n          [timeInterval]=\"5\"\r\n        ></mat-datetimepicker>\r\n        <input\r\n          matInput\r\n          autocomplete=\"false\"\r\n          placeholder=\"{{ 'igo.geo.timeFilter.startDate' | translate }}\"\r\n          [matDatetimepicker]=\"minDatetimePicker\"\r\n          [(ngModel)]=\"startDate\"\r\n          [min]=\"min\"\r\n          [max]=\"getRangeMaxDate()\"\r\n          readonly=\"readonly\"\r\n          (input)=\"(startDate)\"\r\n          (dateChange)=\"handleDateChange($event)\"\r\n        />\r\n      </mat-form-field>\r\n    </div>\r\n\r\n    <div class=\"igo-col igo-col-100\">\r\n      <mat-form-field>\r\n        <mat-datetimepicker-toggle\r\n          class=\"time-filter-mat-datetimepicker-toggle\"\r\n          [for]=\"maxDatetimePicker\"\r\n          matSuffix\r\n        ></mat-datetimepicker-toggle>\r\n        <mat-datetimepicker\r\n          #maxDatetimePicker\r\n          [type]=\"type\"\r\n          [openOnFocus]=\"true\"\r\n          [timeInterval]=\"5\"\r\n        ></mat-datetimepicker>\r\n        <input\r\n          matInput\r\n          autocomplete=\"false\"\r\n          placeholder=\"{{ 'igo.geo.timeFilter.endDate' | translate }}\"\r\n          [matDatetimepicker]=\"maxDatetimePicker\"\r\n          [(ngModel)]=\"endDate\"\r\n          [min]=\"getRangeMinDate()\"\r\n          [max]=\"max\"\r\n          readonly=\"readonly\"\r\n          (dateChange)=\"handleDateChange($event)\"\r\n        />\r\n      </mat-form-field>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div *ngIf=\"style === 'calendar' && type === 'year'\">\r\n  <div *ngIf=\"!isRange\" class=\"igo-col igo-col-100 igo-col-100-m\">\r\n    <mat-form-field>\r\n      <mat-select\r\n        placeholder=\"{{ 'igo.geo.timeFilter.date' | translate }}\"\r\n        [(ngModel)]=\"year\"\r\n        (selectionChange)=\"handleYearChange($event)\"\r\n      >\r\n        <mat-option [value]=\"year\" *ngFor=\"let year of listYears\">{{\r\n          year\r\n        }}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <div *ngIf=\"isRange\">\r\n    <div class=\"igo-col igo-col-100\">\r\n      <mat-form-field>\r\n        <mat-select\r\n          placeholder=\"{{ 'igo.geo.timeFilter.startDate' | translate }}\"\r\n          [(ngModel)]=\"startYear\"\r\n          (selectionChange)=\"handleYearChange($event)\"\r\n        >\r\n          <mat-option\r\n            [value]=\"startYear\"\r\n            *ngFor=\"let startYear of startListYears\"\r\n            >{{ startYear }}</mat-option\r\n          >\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </div>\r\n\r\n    <div class=\"igo-col igo-col-100\">\r\n      <mat-form-field>\r\n        <mat-select\r\n          placeholder=\"{{ 'igo.geo.timeFilter.endDate' | translate }}\"\r\n          [(ngModel)]=\"endYear\"\r\n          (selectionChange)=\"handleYearChange($event)\"\r\n        >\r\n          <mat-option [value]=\"endYear\" *ngFor=\"let endYear of endListYears\">{{\r\n            endYear\r\n          }}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<br />\r\n<div\r\n  *ngIf=\"!isRange && style === 'slider' && type === 'year'\"\r\n  class=\"igo-col igo-col-100 igo-col-100-m mat-typography\"\r\n>\r\n  <span>{{ startYear }}</span>\r\n  <!-- TODO: The 'tickInterval' property no longer exists -->\r\n  <mat-slider\r\n    id=\"time-slider\"\r\n    step=\"{{ step }}\"\r\n    [min]=\"startYear\"\r\n    [max]=\"endYear\"\r\n    [color]=\"color\"\r\n    thumbLabel\r\n    [disabled]=\"!options.enabled || !layer.visible\"\r\n    #ngSlider\r\n    ><input\r\n      matSliderThumb\r\n      [value]=\"handleSliderValue()\"\r\n      (input)=\"\r\n        handleSliderYearChange({\r\n          source: ngSliderThumb,\r\n          parent: ngSlider,\r\n          value: ngSliderThumb.value\r\n        })\r\n      \"\r\n      #ngSliderThumb=\"matSliderThumb\"\r\n      (change)=\"\r\n        handleSliderYearChange({\r\n          source: ngSliderThumb,\r\n          parent: ngSlider,\r\n          value: ngSliderThumb.value\r\n        })\r\n      \"\r\n    />\r\n  </mat-slider>\r\n  <span>{{ endYear }}</span>\r\n  <p *ngIf=\"options.enabled\" class=\"date-below\">{{ year }}</p>\r\n  <div #actions class=\"igo-layer-actions-container\">\r\n    <mat-slide-toggle\r\n      (change)=\"toggleFilterState()\"\r\n      tooltip-position=\"below\"\r\n      matTooltipShowDelay=\"500\"\r\n      [matTooltip]=\"'igo.geo.filter.toggleFilterState' | translate\"\r\n      [color]=\"color\"\r\n      [checked]=\"options.enabled\"\r\n      [disabled]=\"!layer.visible\"\r\n    >\r\n    </mat-slide-toggle>\r\n    <button\r\n      [disabled]=\"!options.enabled || !layer.visible\"\r\n      mat-icon-button\r\n      color=\"primary\"\r\n      (click)=\"playYear($event)\"\r\n    >\r\n      <mat-icon svgIcon=\"{{ playIcon }}\"></mat-icon>\r\n    </button>\r\n    <button\r\n      [disabled]=\"!options.enabled || !layer.visible\"\r\n      mat-icon-button\r\n      color=\"primary\"\r\n      (click)=\"resetFilter($event)\"\r\n    >\r\n      <mat-icon svgIcon=\"{{ resetIcon }}\"></mat-icon>\r\n    </button>\r\n  </div>\r\n</div>\r\n\r\n<div\r\n  *ngIf=\"style === 'slider' && type !== 'year'\"\r\n  class=\"igo-col igo-col-100 igo-col-100-m\"\r\n>\r\n  <!-- TODO: The 'tickInterval' property no longer exists -->\r\n  <mat-slider\r\n    id=\"time-slider\"\r\n    step=\"{{ step }}\"\r\n    [min]=\"dateToNumber(min)\"\r\n    [max]=\"dateToNumber(max)\"\r\n    thumbLabel\r\n    (selectionChange)=\"handleSliderDateChange($event)\"\r\n    #ngSlider\r\n    ><input\r\n      matSliderThumb\r\n      [value]=\"handleSliderValue()\"\r\n      (input)=\"\r\n        handleSliderDateChange({\r\n          source: ngSliderThumb,\r\n          parent: ngSlider,\r\n          value: ngSliderThumb.value\r\n        })\r\n      \"\r\n      #ngSliderThumb=\"matSliderThumb\"\r\n    />\r\n  </mat-slider>\r\n  <p class=\"date-below\">{{ handleSliderTooltip() }}</p>\r\n  <button mat-icon-button color=\"primary\" (click)=\"playFilter($event)\">\r\n    <mat-icon svgIcon=\"{{ playIcon }}\"></mat-icon>\r\n  </button>\r\n</div>\r\n", styles: [":host .igo-layer-filters-container{padding-left:5px}:host #time-slider{width:70%}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){:host #time-slider{width:60%}}:host .date-below{margin:0}:host .igo-layer-actions-container{display:flex;align-items:center;justify-content:center}\n"] }]
+                    ], 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"] }]
         }], ctorParameters: () => [{ type: i6$4.DateAdapter }], propDecorators: { layer: [{
                 type: Input
             }], options: [{
@@ -30461,7 +30519,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\r\n  *ngIf=\"layerIsExportable()\"\r\n  mat-icon-button\r\n  tooltip-position=\"below\"\r\n  matTooltipShowDelay=\"500\"\r\n  [matTooltip]=\"'igo.geo.download.action' | translate\"\r\n  [color]=\"color\"\r\n>\r\n  <!-- (click)=\"openDownload(layer)\"> -->\r\n  <mat-icon svgIcon=\"file-export\"></mat-icon>\r\n</button>\r\n", styles: [""], dependencies: [{ kind: "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  <!-- (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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ExportButtonComponent, decorators: [{
             type: Component,
@@ -30471,7 +30529,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                         MatTooltipModule,
                         MatIconModule,
                         TranslateModule
-                    ], template: "<button\r\n  *ngIf=\"layerIsExportable()\"\r\n  mat-icon-button\r\n  tooltip-position=\"below\"\r\n  matTooltipShowDelay=\"500\"\r\n  [matTooltip]=\"'igo.geo.download.action' | translate\"\r\n  [color]=\"color\"\r\n>\r\n  <!-- (click)=\"openDownload(layer)\"> -->\r\n  <mat-icon svgIcon=\"file-export\"></mat-icon>\r\n</button>\r\n" }]
+                    ], 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" }]
         }], ctorParameters: () => [], propDecorators: { layer: [{
                 type: Input
             }], color: [{
@@ -32107,7 +32165,7 @@ class ImportExportComponent {
         this.selectedMode = event.value;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ImportExportComponent, deps: [{ token: ImportService }, { token: ExportService }, { token: i1$2.LanguageService }, { token: i2$3.MessageService }, { token: StyleListService }, { token: StyleService }, { token: i1$6.UntypedFormBuilder }, { token: i1.ConfigService }, { token: i0.ChangeDetectorRef }, { token: i3$2.StorageService }, { token: DownloadService }, { token: LayerService }, { token: i3$6.ConfirmDialogService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: ImportExportComponent, isStandalone: true, selector: "igo-import-export", inputs: { selectFirstProj: "selectFirstProj", map: "map", contextUri: "contextUri", projectionsLimitations: "projectionsLimitations", store: "store", selectedMode: "selectedMode", exportOptions$: "exportOptions$" }, outputs: { selectMode: "selectMode", exportOptionsChange: "exportOptionsChange" }, providers: [ConfirmDialogService], ngImport: i0, template: "<div class=\"import-export-toggle mat-typography\">\r\n  <mat-button-toggle-group\r\n    [value]=\"selectedMode\"\r\n    (change)=\"onImportExportChange($event)\"\r\n  >\r\n    <mat-button-toggle [value]=\"'import'\">\r\n      {{ 'igo.geo.importExportForm.importTabTitle' | translate }}\r\n    </mat-button-toggle>\r\n    <mat-button-toggle [value]=\"'export'\">\r\n      {{ 'igo.geo.importExportForm.exportTabTitle' | translate }}\r\n    </mat-button-toggle>\r\n  </mat-button-toggle-group>\r\n</div>\r\n\r\n<form\r\n  class=\"igo-form\"\r\n  [formGroup]=\"importForm\"\r\n  *ngIf=\"selectedMode === 'import'\"\r\n>\r\n  <div class=\"igo-input-container\">\r\n    <mat-form-field>\r\n      <mat-label>{{\r\n        'igo.geo.importExportForm.importProjPlaceholder' | translate\r\n      }}</mat-label>\r\n      <mat-select [(value)]=\"inputProj\">\r\n        <mat-option\r\n          *ngFor=\"let projection of projections$ | async\"\r\n          [value]=\"projection\"\r\n          (click)=\"$event.stopPropagation()\"\r\n        >\r\n          <p matListItemTitle *ngIf=\"projection.translateKey\">\r\n            {{\r\n              'igo.geo.importExportForm.projections.' + projection.translateKey\r\n                | translate: projection\r\n            }}\r\n          </p>\r\n          <p matListItemTitle *ngIf=\"!projection.translateKey\">\r\n            {{ projection.alias }}\r\n          </p>\r\n        </mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <div\r\n    tooltip-position=\"below\"\r\n    matTooltipShowDelay=\"500\"\r\n    [matTooltip]=\"\r\n      importForm.invalid\r\n        ? ('igo.geo.importExportForm.projections.choose' | translate)\r\n        : ('igo.geo.importExportForm.importButton' | translate)\r\n    \"\r\n    class=\"igo-form-button-group\"\r\n  >\r\n    <button\r\n      [disabled]=\"importForm.invalid || (loading$ | async)\"\r\n      mat-raised-button\r\n      type=\"button\"\r\n      (click)=\"fileInput.click()\"\r\n    >\r\n      {{ 'igo.geo.importExportForm.importButton' | translate }}\r\n    </button>\r\n    <igo-spinner [shown]=\"loading$ | async\"></igo-spinner>\r\n    <input\r\n      hidden\r\n      #fileInput\r\n      type=\"file\"\r\n      [style.display]=\"'none'\"\r\n      (click)=\"fileInput.value = null\"\r\n      (change)=\"importFiles($any($event.target).files)\"\r\n    />\r\n  </div>\r\n</form>\r\n<section class=\"mat-typography\" *ngIf=\"selectedMode === 'import'\">\r\n  <div *ngIf=\"importHtmlClarifications === ''\">\r\n    <h4>{{ 'igo.geo.importExportForm.importClarifications' | translate }}</h4>\r\n    <ul>\r\n      <li>\r\n        {{\r\n          'igo.geo.importExportForm.importSizeMax'\r\n            | translate: { size: fileSizeMb }\r\n        }}\r\n      </li>\r\n      <li>\r\n        {{ 'igo.geo.importExportForm.importFormatAuthorized' | translate }}\r\n      </li>\r\n      <li>{{ 'igo.geo.importExportForm.importShpZip' | translate }}</li>\r\n    </ul>\r\n  </div>\r\n  <igo-custom-html\r\n    *ngIf=\"importHtmlClarifications !== ''\"\r\n    class=\"mat-typography\"\r\n    [html]=\"importHtmlClarifications\"\r\n  >\r\n  </igo-custom-html>\r\n</section>\r\n\r\n<section\r\n  class=\"mat-typography\"\r\n  *ngIf=\"(exportableLayers$ | async).length === 0 && selectedMode === 'export'\"\r\n>\r\n  <h4>{{ 'igo.geo.importExportForm.exportNoLayersExportable' | translate }}</h4>\r\n</section>\r\n\r\n<form\r\n  class=\"igo-form\"\r\n  [formGroup]=\"form\"\r\n  *ngIf=\"(exportableLayers$ | async).length > 0 && selectedMode === 'export'\"\r\n>\r\n  <div class=\"igo-input-container\">\r\n    <mat-form-field>\r\n      <mat-label>{{\r\n        'igo.geo.importExportForm.exportLayerPlaceholder' | translate\r\n      }}</mat-label>\r\n      <mat-select [(value)]=\"layers\" multiple>\r\n        <mat-select-trigger>\r\n          {{ layers.length ? getLayerTitleById(layers[0]) : '' }}\r\n          <span *ngIf=\"layers.length > 1\" class=\"export-select-trigger\">\r\n            (+{{ layers.length - 1 }}\r\n            {{\r\n              (layers?.length === 2\r\n                ? 'igo.geo.importExportForm.other'\r\n                : 'igo.geo.importExportForm.others'\r\n              ) | translate\r\n            }})\r\n          </span>\r\n        </mat-select-trigger>\r\n        <mat-option\r\n          *ngFor=\"let layer of exportableLayers$ | async\"\r\n          [ngClass]=\"{\r\n            'igo-export-layer-mat-option': layerHasSelectedFeatures(layer)\r\n          }\"\r\n          [value]=\"layer.id\"\r\n          (click)=\"$event.stopPropagation()\"\r\n        >\r\n          <p matListItemTitle>{{ layer.title }}</p>\r\n          <p matListItemTitle>\r\n            <mat-slide-toggle\r\n              *ngIf=\"layerHasSelectedFeatures(layer)\"\r\n              (click)=\"onlySelectedClick($event, layer.id)\"\r\n              (checked)=\"inLayersIdToExportSelectionOnly(layer)\"\r\n              (change)=\"onlySelected($event, layer.id)\"\r\n            >\r\n              <small>{{\r\n                'igo.geo.importExportForm.exportSelectedFeature' | translate\r\n              }}</small>\r\n            </mat-slide-toggle>\r\n          </p>\r\n        </mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <div class=\"igo-input-container\">\r\n    <mat-form-field>\r\n      <mat-label>{{\r\n        'igo.geo.importExportForm.exportFormatPlaceholder' | translate\r\n      }}</mat-label>\r\n      <mat-select formControlName=\"format\">\r\n        <ng-container *ngIf=\"(formats$ | async).length !== 0\">\r\n          <mat-option\r\n            *ngFor=\"let format of formats$ | async | keyvalue\"\r\n            [value]=\"format.key\"\r\n          >\r\n            {{ 'igo.geo.export.format.' + format.value | translate }}\r\n          </mat-option>\r\n        </ng-container>\r\n        <mat-option *ngIf=\"(formats$ | async).length === 0\" disabled=\"true\">\r\n          {{ 'igo.geo.export.noFormat.title' | translate }}\r\n        </mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <div\r\n    class=\"igo-input-container\"\r\n    *ngIf=\"forceNaming && form.value.format !== 'URL'\"\r\n  >\r\n    <mat-form-field>\r\n      <input\r\n        matInput\r\n        formControlName=\"name\"\r\n        placeholder=\"{{\r\n          'igo.geo.importExportForm.exportFileNamePlaceholder' | translate\r\n        }}\"\r\n      />\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <div\r\n    class=\"igo-input-container\"\r\n    *ngIf=\"\r\n      form.value.format === 'CSVcomma' || form.value.format === 'CSVsemicolon'\r\n    \"\r\n  >\r\n    <mat-form-field>\r\n      <mat-label>{{\r\n        'igo.geo.importExportForm.encodingPlaceholder' | translate\r\n      }}</mat-label>\r\n      <mat-select formControlName=\"encoding\">\r\n        <ng-container *ngIf=\"(encodings$ | async).length !== 0\">\r\n          <mat-option\r\n            *ngFor=\"let encoding of encodings$ | async | keyvalue\"\r\n            [value]=\"encoding.key\"\r\n          >\r\n            {{ 'igo.geo.export.encoding.' + encoding.value | translate }}\r\n          </mat-option>\r\n        </ng-container>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <div\r\n    class=\"export-combine-layers mat-typography\"\r\n    *ngIf=\"\r\n      layers.length > 1 &&\r\n      (form.value.format === 'CSVcomma' || form.value.format === 'CSVsemicolon')\r\n    \"\r\n  >\r\n    <mat-slide-toggle\r\n      formControlName=\"combineLayers\"\r\n      [labelPosition]=\"'before'\"\r\n    >\r\n      {{ 'igo.geo.importExportForm.exportCombineResults' | translate }}\r\n    </mat-slide-toggle>\r\n  </div>\r\n\r\n  <div\r\n    class=\"export-separator mat-typography\"\r\n    *ngIf=\"\r\n      layers.length > 1 &&\r\n      (form.value.format === 'CSVcomma' ||\r\n        form.value.format === 'CSVsemicolon') &&\r\n      form.value.combineLayers\r\n    \"\r\n  >\r\n    <mat-slide-toggle formControlName=\"separator\" [labelPosition]=\"'before'\">\r\n      {{ 'igo.geo.importExportForm.exportSeparator' | translate }}\r\n    </mat-slide-toggle>\r\n  </div>\r\n\r\n  <div\r\n    class=\"export-options mat-typography\"\r\n    *ngIf=\"form.value.format !== 'URL'\"\r\n  >\r\n    <mat-slide-toggle\r\n      formControlName=\"featureInMapExtent\"\r\n      [labelPosition]=\"'before'\"\r\n    >\r\n      {{ 'igo.geo.importExportForm.exportFeatureInExtent' | translate }}\r\n    </mat-slide-toggle>\r\n  </div>\r\n\r\n  <div class=\"igo-form-button-group\">\r\n    <button\r\n      mat-raised-button\r\n      type=\"button\"\r\n      [disabled]=\"!form.valid || (loading$ | async)\"\r\n      (click)=\"handleExportFormSubmit(form.value)\"\r\n    >\r\n      {{\r\n        form.value.format !== 'URL'\r\n          ? ('igo.geo.importExportForm.exportButton' | translate)\r\n          : form.value.layers.length > 1\r\n            ? ('igo.geo.importExportForm.exportButtonLinks' | translate)\r\n            : ('igo.geo.importExportForm.exportButtonLink' | translate)\r\n      }}\r\n    </button>\r\n    <igo-spinner [shown]=\"loading$ | async\"></igo-spinner>\r\n  </div>\r\n\r\n  <igo-custom-html\r\n    *ngIf=\"exportHtmlClarifications !== ''\"\r\n    class=\"mat-typography\"\r\n    [html]=\"exportHtmlClarifications\"\r\n  >\r\n  </igo-custom-html>\r\n</form>\r\n", styles: [":host mat-option.igo-export-layer-mat-option{height:5em;line-height:1em}:host .import-export-toggle{padding:10px;text-align:center}:host .import-export-toggle mat-button-toggle-group{width:100%}:host .import-export-toggle mat-button-toggle-group mat-button-toggle{width:50%}:host h4{padding:0 5px}:host .igo-form{padding:15px 5px}:host .igo-input-container mat-form-field{width:100%}:host .igo-form-button-group{text-align:center;padding-top:10px}:host igo-spinner{position:absolute;padding-left:10px}:host .export-options mat-slide-toggle,:host .export-combine-layers mat-slide-toggle,:host .export-separator mat-slide-toggle{width:100%;padding:10px}:host .export-options mat-slide-toggle ::ng-deep .mdc-form-field,:host .export-combine-layers mat-slide-toggle ::ng-deep .mdc-form-field,:host .export-separator mat-slide-toggle ::ng-deep .mdc-form-field{width:100%}:host .export-options mat-slide-toggle ::ng-deep .mdc-label,:host .export-combine-layers mat-slide-toggle ::ng-deep .mdc-label,:host .export-separator mat-slide-toggle ::ng-deep .mdc-label{margin-left:0;width:calc(100% - 60px)}:host .export-select-trigger{opacity:.75;font-size:.75em}\n"], 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: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: "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: "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: "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: 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.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: SpinnerComponent, selector: "igo-spinner", inputs: ["shown"] }, { kind: "component", type: CustomHtmlComponent, selector: "igo-custom-html", inputs: ["html"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: 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: "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: ImportExportComponent, isStandalone: true, selector: "igo-import-export", inputs: { selectFirstProj: "selectFirstProj", map: "map", contextUri: "contextUri", projectionsLimitations: "projectionsLimitations", store: "store", selectedMode: "selectedMode", exportOptions$: "exportOptions$" }, outputs: { selectMode: "selectMode", exportOptionsChange: "exportOptionsChange" }, providers: [ConfirmDialogService], ngImport: i0, template: "<div class=\"import-export-toggle mat-typography\">\n  <mat-button-toggle-group\n    [value]=\"selectedMode\"\n    (change)=\"onImportExportChange($event)\"\n  >\n    <mat-button-toggle [value]=\"'import'\">\n      {{ 'igo.geo.importExportForm.importTabTitle' | translate }}\n    </mat-button-toggle>\n    <mat-button-toggle [value]=\"'export'\">\n      {{ 'igo.geo.importExportForm.exportTabTitle' | translate }}\n    </mat-button-toggle>\n  </mat-button-toggle-group>\n</div>\n\n<form\n  class=\"igo-form\"\n  [formGroup]=\"importForm\"\n  *ngIf=\"selectedMode === 'import'\"\n>\n  <div class=\"igo-input-container\">\n    <mat-form-field>\n      <mat-label>{{\n        'igo.geo.importExportForm.importProjPlaceholder' | translate\n      }}</mat-label>\n      <mat-select [(value)]=\"inputProj\">\n        <mat-option\n          *ngFor=\"let projection of projections$ | async\"\n          [value]=\"projection\"\n          (click)=\"$event.stopPropagation()\"\n        >\n          <p matListItemTitle *ngIf=\"projection.translateKey\">\n            {{\n              'igo.geo.importExportForm.projections.' + projection.translateKey\n                | translate: projection\n            }}\n          </p>\n          <p matListItemTitle *ngIf=\"!projection.translateKey\">\n            {{ projection.alias }}\n          </p>\n        </mat-option>\n      </mat-select>\n    </mat-form-field>\n  </div>\n\n  <div\n    tooltip-position=\"below\"\n    matTooltipShowDelay=\"500\"\n    [matTooltip]=\"\n      importForm.invalid\n        ? ('igo.geo.importExportForm.projections.choose' | translate)\n        : ('igo.geo.importExportForm.importButton' | translate)\n    \"\n    class=\"igo-form-button-group\"\n  >\n    <button\n      [disabled]=\"importForm.invalid || (loading$ | async)\"\n      mat-raised-button\n      type=\"button\"\n      (click)=\"fileInput.click()\"\n    >\n      {{ 'igo.geo.importExportForm.importButton' | translate }}\n    </button>\n    <igo-spinner [shown]=\"loading$ | async\"></igo-spinner>\n    <input\n      hidden\n      #fileInput\n      type=\"file\"\n      [style.display]=\"'none'\"\n      (click)=\"fileInput.value = null\"\n      (change)=\"importFiles($any($event.target).files)\"\n    />\n  </div>\n</form>\n<section class=\"mat-typography\" *ngIf=\"selectedMode === 'import'\">\n  <div *ngIf=\"importHtmlClarifications === ''\">\n    <h4>{{ 'igo.geo.importExportForm.importClarifications' | translate }}</h4>\n    <ul>\n      <li>\n        {{\n          'igo.geo.importExportForm.importSizeMax'\n            | translate: { size: fileSizeMb }\n        }}\n      </li>\n      <li>\n        {{ 'igo.geo.importExportForm.importFormatAuthorized' | translate }}\n      </li>\n      <li>{{ 'igo.geo.importExportForm.importShpZip' | translate }}</li>\n    </ul>\n  </div>\n  <igo-custom-html\n    *ngIf=\"importHtmlClarifications !== ''\"\n    class=\"mat-typography\"\n    [html]=\"importHtmlClarifications\"\n  >\n  </igo-custom-html>\n</section>\n\n<section\n  class=\"mat-typography\"\n  *ngIf=\"(exportableLayers$ | async).length === 0 && selectedMode === 'export'\"\n>\n  <h4>{{ 'igo.geo.importExportForm.exportNoLayersExportable' | translate }}</h4>\n</section>\n\n<form\n  class=\"igo-form\"\n  [formGroup]=\"form\"\n  *ngIf=\"(exportableLayers$ | async).length > 0 && selectedMode === 'export'\"\n>\n  <div class=\"igo-input-container\">\n    <mat-form-field>\n      <mat-label>{{\n        'igo.geo.importExportForm.exportLayerPlaceholder' | translate\n      }}</mat-label>\n      <mat-select [(value)]=\"layers\" multiple>\n        <mat-select-trigger>\n          {{ layers.length ? getLayerTitleById(layers[0]) : '' }}\n          <span *ngIf=\"layers.length > 1\" class=\"export-select-trigger\">\n            (+{{ layers.length - 1 }}\n            {{\n              (layers?.length === 2\n                ? 'igo.geo.importExportForm.other'\n                : 'igo.geo.importExportForm.others'\n              ) | translate\n            }})\n          </span>\n        </mat-select-trigger>\n        <mat-option\n          *ngFor=\"let layer of exportableLayers$ | async\"\n          [ngClass]=\"{\n            'igo-export-layer-mat-option': layerHasSelectedFeatures(layer)\n          }\"\n          [value]=\"layer.id\"\n          (click)=\"$event.stopPropagation()\"\n        >\n          <p matListItemTitle>{{ layer.title }}</p>\n          <p matListItemTitle>\n            <mat-slide-toggle\n              *ngIf=\"layerHasSelectedFeatures(layer)\"\n              (click)=\"onlySelectedClick($event, layer.id)\"\n              (checked)=\"inLayersIdToExportSelectionOnly(layer)\"\n              (change)=\"onlySelected($event, layer.id)\"\n            >\n              <small>{{\n                'igo.geo.importExportForm.exportSelectedFeature' | translate\n              }}</small>\n            </mat-slide-toggle>\n          </p>\n        </mat-option>\n      </mat-select>\n    </mat-form-field>\n  </div>\n\n  <div class=\"igo-input-container\">\n    <mat-form-field>\n      <mat-label>{{\n        'igo.geo.importExportForm.exportFormatPlaceholder' | translate\n      }}</mat-label>\n      <mat-select formControlName=\"format\">\n        <ng-container *ngIf=\"(formats$ | async).length !== 0\">\n          <mat-option\n            *ngFor=\"let format of formats$ | async | keyvalue\"\n            [value]=\"format.key\"\n          >\n            {{ 'igo.geo.export.format.' + format.value | translate }}\n          </mat-option>\n        </ng-container>\n        <mat-option *ngIf=\"(formats$ | async).length === 0\" disabled=\"true\">\n          {{ 'igo.geo.export.noFormat.title' | translate }}\n        </mat-option>\n      </mat-select>\n    </mat-form-field>\n  </div>\n\n  <div\n    class=\"igo-input-container\"\n    *ngIf=\"forceNaming && form.value.format !== 'URL'\"\n  >\n    <mat-form-field>\n      <input\n        matInput\n        formControlName=\"name\"\n        placeholder=\"{{\n          'igo.geo.importExportForm.exportFileNamePlaceholder' | translate\n        }}\"\n      />\n    </mat-form-field>\n  </div>\n\n  <div\n    class=\"igo-input-container\"\n    *ngIf=\"\n      form.value.format === 'CSVcomma' || form.value.format === 'CSVsemicolon'\n    \"\n  >\n    <mat-form-field>\n      <mat-label>{{\n        'igo.geo.importExportForm.encodingPlaceholder' | translate\n      }}</mat-label>\n      <mat-select formControlName=\"encoding\">\n        <ng-container *ngIf=\"(encodings$ | async).length !== 0\">\n          <mat-option\n            *ngFor=\"let encoding of encodings$ | async | keyvalue\"\n            [value]=\"encoding.key\"\n          >\n            {{ 'igo.geo.export.encoding.' + encoding.value | translate }}\n          </mat-option>\n        </ng-container>\n      </mat-select>\n    </mat-form-field>\n  </div>\n\n  <div\n    class=\"export-combine-layers mat-typography\"\n    *ngIf=\"\n      layers.length > 1 &&\n      (form.value.format === 'CSVcomma' || form.value.format === 'CSVsemicolon')\n    \"\n  >\n    <mat-slide-toggle\n      formControlName=\"combineLayers\"\n      [labelPosition]=\"'before'\"\n    >\n      {{ 'igo.geo.importExportForm.exportCombineResults' | translate }}\n    </mat-slide-toggle>\n  </div>\n\n  <div\n    class=\"export-separator mat-typography\"\n    *ngIf=\"\n      layers.length > 1 &&\n      (form.value.format === 'CSVcomma' ||\n        form.value.format === 'CSVsemicolon') &&\n      form.value.combineLayers\n    \"\n  >\n    <mat-slide-toggle formControlName=\"separator\" [labelPosition]=\"'before'\">\n      {{ 'igo.geo.importExportForm.exportSeparator' | translate }}\n    </mat-slide-toggle>\n  </div>\n\n  <div\n    class=\"export-options mat-typography\"\n    *ngIf=\"form.value.format !== 'URL'\"\n  >\n    <mat-slide-toggle\n      formControlName=\"featureInMapExtent\"\n      [labelPosition]=\"'before'\"\n    >\n      {{ 'igo.geo.importExportForm.exportFeatureInExtent' | translate }}\n    </mat-slide-toggle>\n  </div>\n\n  <div class=\"igo-form-button-group\">\n    <button\n      mat-raised-button\n      type=\"button\"\n      [disabled]=\"!form.valid || (loading$ | async)\"\n      (click)=\"handleExportFormSubmit(form.value)\"\n    >\n      {{\n        form.value.format !== 'URL'\n          ? ('igo.geo.importExportForm.exportButton' | translate)\n          : form.value.layers.length > 1\n            ? ('igo.geo.importExportForm.exportButtonLinks' | translate)\n            : ('igo.geo.importExportForm.exportButtonLink' | translate)\n      }}\n    </button>\n    <igo-spinner [shown]=\"loading$ | async\"></igo-spinner>\n  </div>\n\n  <igo-custom-html\n    *ngIf=\"exportHtmlClarifications !== ''\"\n    class=\"mat-typography\"\n    [html]=\"exportHtmlClarifications\"\n  >\n  </igo-custom-html>\n</form>\n", styles: [":host mat-option.igo-export-layer-mat-option{height:5em;line-height:1em}:host .import-export-toggle{padding:10px;text-align:center}:host .import-export-toggle mat-button-toggle-group{width:100%}:host .import-export-toggle mat-button-toggle-group mat-button-toggle{width:50%}:host h4{padding:0 5px}:host .igo-form{padding:15px 5px}:host .igo-input-container mat-form-field{width:100%}:host .igo-form-button-group{text-align:center;padding-top:10px}:host igo-spinner{position:absolute;padding-left:10px}:host .export-options mat-slide-toggle,:host .export-combine-layers mat-slide-toggle,:host .export-separator mat-slide-toggle{width:100%;padding:10px}:host .export-options mat-slide-toggle ::ng-deep .mdc-form-field,:host .export-combine-layers mat-slide-toggle ::ng-deep .mdc-form-field,:host .export-separator mat-slide-toggle ::ng-deep .mdc-form-field{width:100%}:host .export-options mat-slide-toggle ::ng-deep .mdc-label,:host .export-combine-layers mat-slide-toggle ::ng-deep .mdc-label,:host .export-separator mat-slide-toggle ::ng-deep .mdc-label{margin-left:0;width:calc(100% - 60px)}:host .export-select-trigger{opacity:.75;font-size:.75em}\n"], 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: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: "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: "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: "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: 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.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: SpinnerComponent, selector: "igo-spinner", inputs: ["shown"] }, { kind: "component", type: CustomHtmlComponent, selector: "igo-custom-html", inputs: ["html"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: 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: "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: ImportExportComponent, decorators: [{
             type: Component,
@@ -32130,7 +32188,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                         AsyncPipe,
                         KeyValuePipe,
                         TranslateModule
-                    ], providers: [ConfirmDialogService], template: "<div class=\"import-export-toggle mat-typography\">\r\n  <mat-button-toggle-group\r\n    [value]=\"selectedMode\"\r\n    (change)=\"onImportExportChange($event)\"\r\n  >\r\n    <mat-button-toggle [value]=\"'import'\">\r\n      {{ 'igo.geo.importExportForm.importTabTitle' | translate }}\r\n    </mat-button-toggle>\r\n    <mat-button-toggle [value]=\"'export'\">\r\n      {{ 'igo.geo.importExportForm.exportTabTitle' | translate }}\r\n    </mat-button-toggle>\r\n  </mat-button-toggle-group>\r\n</div>\r\n\r\n<form\r\n  class=\"igo-form\"\r\n  [formGroup]=\"importForm\"\r\n  *ngIf=\"selectedMode === 'import'\"\r\n>\r\n  <div class=\"igo-input-container\">\r\n    <mat-form-field>\r\n      <mat-label>{{\r\n        'igo.geo.importExportForm.importProjPlaceholder' | translate\r\n      }}</mat-label>\r\n      <mat-select [(value)]=\"inputProj\">\r\n        <mat-option\r\n          *ngFor=\"let projection of projections$ | async\"\r\n          [value]=\"projection\"\r\n          (click)=\"$event.stopPropagation()\"\r\n        >\r\n          <p matListItemTitle *ngIf=\"projection.translateKey\">\r\n            {{\r\n              'igo.geo.importExportForm.projections.' + projection.translateKey\r\n                | translate: projection\r\n            }}\r\n          </p>\r\n          <p matListItemTitle *ngIf=\"!projection.translateKey\">\r\n            {{ projection.alias }}\r\n          </p>\r\n        </mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <div\r\n    tooltip-position=\"below\"\r\n    matTooltipShowDelay=\"500\"\r\n    [matTooltip]=\"\r\n      importForm.invalid\r\n        ? ('igo.geo.importExportForm.projections.choose' | translate)\r\n        : ('igo.geo.importExportForm.importButton' | translate)\r\n    \"\r\n    class=\"igo-form-button-group\"\r\n  >\r\n    <button\r\n      [disabled]=\"importForm.invalid || (loading$ | async)\"\r\n      mat-raised-button\r\n      type=\"button\"\r\n      (click)=\"fileInput.click()\"\r\n    >\r\n      {{ 'igo.geo.importExportForm.importButton' | translate }}\r\n    </button>\r\n    <igo-spinner [shown]=\"loading$ | async\"></igo-spinner>\r\n    <input\r\n      hidden\r\n      #fileInput\r\n      type=\"file\"\r\n      [style.display]=\"'none'\"\r\n      (click)=\"fileInput.value = null\"\r\n      (change)=\"importFiles($any($event.target).files)\"\r\n    />\r\n  </div>\r\n</form>\r\n<section class=\"mat-typography\" *ngIf=\"selectedMode === 'import'\">\r\n  <div *ngIf=\"importHtmlClarifications === ''\">\r\n    <h4>{{ 'igo.geo.importExportForm.importClarifications' | translate }}</h4>\r\n    <ul>\r\n      <li>\r\n        {{\r\n          'igo.geo.importExportForm.importSizeMax'\r\n            | translate: { size: fileSizeMb }\r\n        }}\r\n      </li>\r\n      <li>\r\n        {{ 'igo.geo.importExportForm.importFormatAuthorized' | translate }}\r\n      </li>\r\n      <li>{{ 'igo.geo.importExportForm.importShpZip' | translate }}</li>\r\n    </ul>\r\n  </div>\r\n  <igo-custom-html\r\n    *ngIf=\"importHtmlClarifications !== ''\"\r\n    class=\"mat-typography\"\r\n    [html]=\"importHtmlClarifications\"\r\n  >\r\n  </igo-custom-html>\r\n</section>\r\n\r\n<section\r\n  class=\"mat-typography\"\r\n  *ngIf=\"(exportableLayers$ | async).length === 0 && selectedMode === 'export'\"\r\n>\r\n  <h4>{{ 'igo.geo.importExportForm.exportNoLayersExportable' | translate }}</h4>\r\n</section>\r\n\r\n<form\r\n  class=\"igo-form\"\r\n  [formGroup]=\"form\"\r\n  *ngIf=\"(exportableLayers$ | async).length > 0 && selectedMode === 'export'\"\r\n>\r\n  <div class=\"igo-input-container\">\r\n    <mat-form-field>\r\n      <mat-label>{{\r\n        'igo.geo.importExportForm.exportLayerPlaceholder' | translate\r\n      }}</mat-label>\r\n      <mat-select [(value)]=\"layers\" multiple>\r\n        <mat-select-trigger>\r\n          {{ layers.length ? getLayerTitleById(layers[0]) : '' }}\r\n          <span *ngIf=\"layers.length > 1\" class=\"export-select-trigger\">\r\n            (+{{ layers.length - 1 }}\r\n            {{\r\n              (layers?.length === 2\r\n                ? 'igo.geo.importExportForm.other'\r\n                : 'igo.geo.importExportForm.others'\r\n              ) | translate\r\n            }})\r\n          </span>\r\n        </mat-select-trigger>\r\n        <mat-option\r\n          *ngFor=\"let layer of exportableLayers$ | async\"\r\n          [ngClass]=\"{\r\n            'igo-export-layer-mat-option': layerHasSelectedFeatures(layer)\r\n          }\"\r\n          [value]=\"layer.id\"\r\n          (click)=\"$event.stopPropagation()\"\r\n        >\r\n          <p matListItemTitle>{{ layer.title }}</p>\r\n          <p matListItemTitle>\r\n            <mat-slide-toggle\r\n              *ngIf=\"layerHasSelectedFeatures(layer)\"\r\n              (click)=\"onlySelectedClick($event, layer.id)\"\r\n              (checked)=\"inLayersIdToExportSelectionOnly(layer)\"\r\n              (change)=\"onlySelected($event, layer.id)\"\r\n            >\r\n              <small>{{\r\n                'igo.geo.importExportForm.exportSelectedFeature' | translate\r\n              }}</small>\r\n            </mat-slide-toggle>\r\n          </p>\r\n        </mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <div class=\"igo-input-container\">\r\n    <mat-form-field>\r\n      <mat-label>{{\r\n        'igo.geo.importExportForm.exportFormatPlaceholder' | translate\r\n      }}</mat-label>\r\n      <mat-select formControlName=\"format\">\r\n        <ng-container *ngIf=\"(formats$ | async).length !== 0\">\r\n          <mat-option\r\n            *ngFor=\"let format of formats$ | async | keyvalue\"\r\n            [value]=\"format.key\"\r\n          >\r\n            {{ 'igo.geo.export.format.' + format.value | translate }}\r\n          </mat-option>\r\n        </ng-container>\r\n        <mat-option *ngIf=\"(formats$ | async).length === 0\" disabled=\"true\">\r\n          {{ 'igo.geo.export.noFormat.title' | translate }}\r\n        </mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <div\r\n    class=\"igo-input-container\"\r\n    *ngIf=\"forceNaming && form.value.format !== 'URL'\"\r\n  >\r\n    <mat-form-field>\r\n      <input\r\n        matInput\r\n        formControlName=\"name\"\r\n        placeholder=\"{{\r\n          'igo.geo.importExportForm.exportFileNamePlaceholder' | translate\r\n        }}\"\r\n      />\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <div\r\n    class=\"igo-input-container\"\r\n    *ngIf=\"\r\n      form.value.format === 'CSVcomma' || form.value.format === 'CSVsemicolon'\r\n    \"\r\n  >\r\n    <mat-form-field>\r\n      <mat-label>{{\r\n        'igo.geo.importExportForm.encodingPlaceholder' | translate\r\n      }}</mat-label>\r\n      <mat-select formControlName=\"encoding\">\r\n        <ng-container *ngIf=\"(encodings$ | async).length !== 0\">\r\n          <mat-option\r\n            *ngFor=\"let encoding of encodings$ | async | keyvalue\"\r\n            [value]=\"encoding.key\"\r\n          >\r\n            {{ 'igo.geo.export.encoding.' + encoding.value | translate }}\r\n          </mat-option>\r\n        </ng-container>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <div\r\n    class=\"export-combine-layers mat-typography\"\r\n    *ngIf=\"\r\n      layers.length > 1 &&\r\n      (form.value.format === 'CSVcomma' || form.value.format === 'CSVsemicolon')\r\n    \"\r\n  >\r\n    <mat-slide-toggle\r\n      formControlName=\"combineLayers\"\r\n      [labelPosition]=\"'before'\"\r\n    >\r\n      {{ 'igo.geo.importExportForm.exportCombineResults' | translate }}\r\n    </mat-slide-toggle>\r\n  </div>\r\n\r\n  <div\r\n    class=\"export-separator mat-typography\"\r\n    *ngIf=\"\r\n      layers.length > 1 &&\r\n      (form.value.format === 'CSVcomma' ||\r\n        form.value.format === 'CSVsemicolon') &&\r\n      form.value.combineLayers\r\n    \"\r\n  >\r\n    <mat-slide-toggle formControlName=\"separator\" [labelPosition]=\"'before'\">\r\n      {{ 'igo.geo.importExportForm.exportSeparator' | translate }}\r\n    </mat-slide-toggle>\r\n  </div>\r\n\r\n  <div\r\n    class=\"export-options mat-typography\"\r\n    *ngIf=\"form.value.format !== 'URL'\"\r\n  >\r\n    <mat-slide-toggle\r\n      formControlName=\"featureInMapExtent\"\r\n      [labelPosition]=\"'before'\"\r\n    >\r\n      {{ 'igo.geo.importExportForm.exportFeatureInExtent' | translate }}\r\n    </mat-slide-toggle>\r\n  </div>\r\n\r\n  <div class=\"igo-form-button-group\">\r\n    <button\r\n      mat-raised-button\r\n      type=\"button\"\r\n      [disabled]=\"!form.valid || (loading$ | async)\"\r\n      (click)=\"handleExportFormSubmit(form.value)\"\r\n    >\r\n      {{\r\n        form.value.format !== 'URL'\r\n          ? ('igo.geo.importExportForm.exportButton' | translate)\r\n          : form.value.layers.length > 1\r\n            ? ('igo.geo.importExportForm.exportButtonLinks' | translate)\r\n            : ('igo.geo.importExportForm.exportButtonLink' | translate)\r\n      }}\r\n    </button>\r\n    <igo-spinner [shown]=\"loading$ | async\"></igo-spinner>\r\n  </div>\r\n\r\n  <igo-custom-html\r\n    *ngIf=\"exportHtmlClarifications !== ''\"\r\n    class=\"mat-typography\"\r\n    [html]=\"exportHtmlClarifications\"\r\n  >\r\n  </igo-custom-html>\r\n</form>\r\n", styles: [":host mat-option.igo-export-layer-mat-option{height:5em;line-height:1em}:host .import-export-toggle{padding:10px;text-align:center}:host .import-export-toggle mat-button-toggle-group{width:100%}:host .import-export-toggle mat-button-toggle-group mat-button-toggle{width:50%}:host h4{padding:0 5px}:host .igo-form{padding:15px 5px}:host .igo-input-container mat-form-field{width:100%}:host .igo-form-button-group{text-align:center;padding-top:10px}:host igo-spinner{position:absolute;padding-left:10px}:host .export-options mat-slide-toggle,:host .export-combine-layers mat-slide-toggle,:host .export-separator mat-slide-toggle{width:100%;padding:10px}:host .export-options mat-slide-toggle ::ng-deep .mdc-form-field,:host .export-combine-layers mat-slide-toggle ::ng-deep .mdc-form-field,:host .export-separator mat-slide-toggle ::ng-deep .mdc-form-field{width:100%}:host .export-options mat-slide-toggle ::ng-deep .mdc-label,:host .export-combine-layers mat-slide-toggle ::ng-deep .mdc-label,:host .export-separator mat-slide-toggle ::ng-deep .mdc-label{margin-left:0;width:calc(100% - 60px)}:host .export-select-trigger{opacity:.75;font-size:.75em}\n"] }]
+                    ], providers: [ConfirmDialogService], template: "<div class=\"import-export-toggle mat-typography\">\n  <mat-button-toggle-group\n    [value]=\"selectedMode\"\n    (change)=\"onImportExportChange($event)\"\n  >\n    <mat-button-toggle [value]=\"'import'\">\n      {{ 'igo.geo.importExportForm.importTabTitle' | translate }}\n    </mat-button-toggle>\n    <mat-button-toggle [value]=\"'export'\">\n      {{ 'igo.geo.importExportForm.exportTabTitle' | translate }}\n    </mat-button-toggle>\n  </mat-button-toggle-group>\n</div>\n\n<form\n  class=\"igo-form\"\n  [formGroup]=\"importForm\"\n  *ngIf=\"selectedMode === 'import'\"\n>\n  <div class=\"igo-input-container\">\n    <mat-form-field>\n      <mat-label>{{\n        'igo.geo.importExportForm.importProjPlaceholder' | translate\n      }}</mat-label>\n      <mat-select [(value)]=\"inputProj\">\n        <mat-option\n          *ngFor=\"let projection of projections$ | async\"\n          [value]=\"projection\"\n          (click)=\"$event.stopPropagation()\"\n        >\n          <p matListItemTitle *ngIf=\"projection.translateKey\">\n            {{\n              'igo.geo.importExportForm.projections.' + projection.translateKey\n                | translate: projection\n            }}\n          </p>\n          <p matListItemTitle *ngIf=\"!projection.translateKey\">\n            {{ projection.alias }}\n          </p>\n        </mat-option>\n      </mat-select>\n    </mat-form-field>\n  </div>\n\n  <div\n    tooltip-position=\"below\"\n    matTooltipShowDelay=\"500\"\n    [matTooltip]=\"\n      importForm.invalid\n        ? ('igo.geo.importExportForm.projections.choose' | translate)\n        : ('igo.geo.importExportForm.importButton' | translate)\n    \"\n    class=\"igo-form-button-group\"\n  >\n    <button\n      [disabled]=\"importForm.invalid || (loading$ | async)\"\n      mat-raised-button\n      type=\"button\"\n      (click)=\"fileInput.click()\"\n    >\n      {{ 'igo.geo.importExportForm.importButton' | translate }}\n    </button>\n    <igo-spinner [shown]=\"loading$ | async\"></igo-spinner>\n    <input\n      hidden\n      #fileInput\n      type=\"file\"\n      [style.display]=\"'none'\"\n      (click)=\"fileInput.value = null\"\n      (change)=\"importFiles($any($event.target).files)\"\n    />\n  </div>\n</form>\n<section class=\"mat-typography\" *ngIf=\"selectedMode === 'import'\">\n  <div *ngIf=\"importHtmlClarifications === ''\">\n    <h4>{{ 'igo.geo.importExportForm.importClarifications' | translate }}</h4>\n    <ul>\n      <li>\n        {{\n          'igo.geo.importExportForm.importSizeMax'\n            | translate: { size: fileSizeMb }\n        }}\n      </li>\n      <li>\n        {{ 'igo.geo.importExportForm.importFormatAuthorized' | translate }}\n      </li>\n      <li>{{ 'igo.geo.importExportForm.importShpZip' | translate }}</li>\n    </ul>\n  </div>\n  <igo-custom-html\n    *ngIf=\"importHtmlClarifications !== ''\"\n    class=\"mat-typography\"\n    [html]=\"importHtmlClarifications\"\n  >\n  </igo-custom-html>\n</section>\n\n<section\n  class=\"mat-typography\"\n  *ngIf=\"(exportableLayers$ | async).length === 0 && selectedMode === 'export'\"\n>\n  <h4>{{ 'igo.geo.importExportForm.exportNoLayersExportable' | translate }}</h4>\n</section>\n\n<form\n  class=\"igo-form\"\n  [formGroup]=\"form\"\n  *ngIf=\"(exportableLayers$ | async).length > 0 && selectedMode === 'export'\"\n>\n  <div class=\"igo-input-container\">\n    <mat-form-field>\n      <mat-label>{{\n        'igo.geo.importExportForm.exportLayerPlaceholder' | translate\n      }}</mat-label>\n      <mat-select [(value)]=\"layers\" multiple>\n        <mat-select-trigger>\n          {{ layers.length ? getLayerTitleById(layers[0]) : '' }}\n          <span *ngIf=\"layers.length > 1\" class=\"export-select-trigger\">\n            (+{{ layers.length - 1 }}\n            {{\n              (layers?.length === 2\n                ? 'igo.geo.importExportForm.other'\n                : 'igo.geo.importExportForm.others'\n              ) | translate\n            }})\n          </span>\n        </mat-select-trigger>\n        <mat-option\n          *ngFor=\"let layer of exportableLayers$ | async\"\n          [ngClass]=\"{\n            'igo-export-layer-mat-option': layerHasSelectedFeatures(layer)\n          }\"\n          [value]=\"layer.id\"\n          (click)=\"$event.stopPropagation()\"\n        >\n          <p matListItemTitle>{{ layer.title }}</p>\n          <p matListItemTitle>\n            <mat-slide-toggle\n              *ngIf=\"layerHasSelectedFeatures(layer)\"\n              (click)=\"onlySelectedClick($event, layer.id)\"\n              (checked)=\"inLayersIdToExportSelectionOnly(layer)\"\n              (change)=\"onlySelected($event, layer.id)\"\n            >\n              <small>{{\n                'igo.geo.importExportForm.exportSelectedFeature' | translate\n              }}</small>\n            </mat-slide-toggle>\n          </p>\n        </mat-option>\n      </mat-select>\n    </mat-form-field>\n  </div>\n\n  <div class=\"igo-input-container\">\n    <mat-form-field>\n      <mat-label>{{\n        'igo.geo.importExportForm.exportFormatPlaceholder' | translate\n      }}</mat-label>\n      <mat-select formControlName=\"format\">\n        <ng-container *ngIf=\"(formats$ | async).length !== 0\">\n          <mat-option\n            *ngFor=\"let format of formats$ | async | keyvalue\"\n            [value]=\"format.key\"\n          >\n            {{ 'igo.geo.export.format.' + format.value | translate }}\n          </mat-option>\n        </ng-container>\n        <mat-option *ngIf=\"(formats$ | async).length === 0\" disabled=\"true\">\n          {{ 'igo.geo.export.noFormat.title' | translate }}\n        </mat-option>\n      </mat-select>\n    </mat-form-field>\n  </div>\n\n  <div\n    class=\"igo-input-container\"\n    *ngIf=\"forceNaming && form.value.format !== 'URL'\"\n  >\n    <mat-form-field>\n      <input\n        matInput\n        formControlName=\"name\"\n        placeholder=\"{{\n          'igo.geo.importExportForm.exportFileNamePlaceholder' | translate\n        }}\"\n      />\n    </mat-form-field>\n  </div>\n\n  <div\n    class=\"igo-input-container\"\n    *ngIf=\"\n      form.value.format === 'CSVcomma' || form.value.format === 'CSVsemicolon'\n    \"\n  >\n    <mat-form-field>\n      <mat-label>{{\n        'igo.geo.importExportForm.encodingPlaceholder' | translate\n      }}</mat-label>\n      <mat-select formControlName=\"encoding\">\n        <ng-container *ngIf=\"(encodings$ | async).length !== 0\">\n          <mat-option\n            *ngFor=\"let encoding of encodings$ | async | keyvalue\"\n            [value]=\"encoding.key\"\n          >\n            {{ 'igo.geo.export.encoding.' + encoding.value | translate }}\n          </mat-option>\n        </ng-container>\n      </mat-select>\n    </mat-form-field>\n  </div>\n\n  <div\n    class=\"export-combine-layers mat-typography\"\n    *ngIf=\"\n      layers.length > 1 &&\n      (form.value.format === 'CSVcomma' || form.value.format === 'CSVsemicolon')\n    \"\n  >\n    <mat-slide-toggle\n      formControlName=\"combineLayers\"\n      [labelPosition]=\"'before'\"\n    >\n      {{ 'igo.geo.importExportForm.exportCombineResults' | translate }}\n    </mat-slide-toggle>\n  </div>\n\n  <div\n    class=\"export-separator mat-typography\"\n    *ngIf=\"\n      layers.length > 1 &&\n      (form.value.format === 'CSVcomma' ||\n        form.value.format === 'CSVsemicolon') &&\n      form.value.combineLayers\n    \"\n  >\n    <mat-slide-toggle formControlName=\"separator\" [labelPosition]=\"'before'\">\n      {{ 'igo.geo.importExportForm.exportSeparator' | translate }}\n    </mat-slide-toggle>\n  </div>\n\n  <div\n    class=\"export-options mat-typography\"\n    *ngIf=\"form.value.format !== 'URL'\"\n  >\n    <mat-slide-toggle\n      formControlName=\"featureInMapExtent\"\n      [labelPosition]=\"'before'\"\n    >\n      {{ 'igo.geo.importExportForm.exportFeatureInExtent' | translate }}\n    </mat-slide-toggle>\n  </div>\n\n  <div class=\"igo-form-button-group\">\n    <button\n      mat-raised-button\n      type=\"button\"\n      [disabled]=\"!form.valid || (loading$ | async)\"\n      (click)=\"handleExportFormSubmit(form.value)\"\n    >\n      {{\n        form.value.format !== 'URL'\n          ? ('igo.geo.importExportForm.exportButton' | translate)\n          : form.value.layers.length > 1\n            ? ('igo.geo.importExportForm.exportButtonLinks' | translate)\n            : ('igo.geo.importExportForm.exportButtonLink' | translate)\n      }}\n    </button>\n    <igo-spinner [shown]=\"loading$ | async\"></igo-spinner>\n  </div>\n\n  <igo-custom-html\n    *ngIf=\"exportHtmlClarifications !== ''\"\n    class=\"mat-typography\"\n    [html]=\"exportHtmlClarifications\"\n  >\n  </igo-custom-html>\n</form>\n", styles: [":host mat-option.igo-export-layer-mat-option{height:5em;line-height:1em}:host .import-export-toggle{padding:10px;text-align:center}:host .import-export-toggle mat-button-toggle-group{width:100%}:host .import-export-toggle mat-button-toggle-group mat-button-toggle{width:50%}:host h4{padding:0 5px}:host .igo-form{padding:15px 5px}:host .igo-input-container mat-form-field{width:100%}:host .igo-form-button-group{text-align:center;padding-top:10px}:host igo-spinner{position:absolute;padding-left:10px}:host .export-options mat-slide-toggle,:host .export-combine-layers mat-slide-toggle,:host .export-separator mat-slide-toggle{width:100%;padding:10px}:host .export-options mat-slide-toggle ::ng-deep .mdc-form-field,:host .export-combine-layers mat-slide-toggle ::ng-deep .mdc-form-field,:host .export-separator mat-slide-toggle ::ng-deep .mdc-form-field{width:100%}:host .export-options mat-slide-toggle ::ng-deep .mdc-label,:host .export-combine-layers mat-slide-toggle ::ng-deep .mdc-label,:host .export-separator mat-slide-toggle ::ng-deep .mdc-label{margin-left:0;width:calc(100% - 60px)}:host .export-select-trigger{opacity:.75;font-size:.75em}\n"] }]
         }], ctorParameters: () => [{ type: ImportService }, { type: ExportService }, { type: i1$2.LanguageService }, { type: i2$3.MessageService }, { type: StyleListService }, { type: StyleService }, { type: i1$6.UntypedFormBuilder }, { type: i1.ConfigService }, { type: i0.ChangeDetectorRef }, { type: i3$2.StorageService }, { type: DownloadService }, { type: LayerService }, { type: i3$6.ConfirmDialogService }], propDecorators: { selectFirstProj: [{
                 type: Input
             }], map: [{
@@ -32162,7 +32220,6 @@ class DropGeoFileDirective extends DragAndDropDirective {
     confirmDialogService;
     filesDropped = new EventEmitter();
     filesInvalid = new EventEmitter();
-    epsgCode$ = new BehaviorSubject(undefined);
     epsgCode$$ = [];
     filesDropped$$;
     get map() {
@@ -32187,6 +32244,7 @@ class DropGeoFileDirective extends DragAndDropDirective {
     }
     ngOnDestroy() {
         this.filesDropped$$.unsubscribe();
+        this.epsgCode$$.map((e) => e.unsubscribe());
     }
     onDragOver(evt) {
         super.onDragOver(evt);
@@ -32199,64 +32257,13 @@ class DropGeoFileDirective extends DragAndDropDirective {
     }
     onFilesDropped(files) {
         for (const file of files) {
-            this.detectEPSG(file);
-            this.epsgCode$$.push(this.epsgCode$
+            this.epsgCode$$.push(detectFileEPSG({ file })
                 .pipe(skipWhile((code) => !code), first(), concatMap((epsgCode) => {
-                const epsg = epsgCode === 'epsgNotDefined' ? undefined : epsgCode;
-                this.epsgCode$.next(undefined);
-                return this.importService.import(file, epsg);
+                return this.importService.import(file, epsgCode === 'epsgNotDefined' ? undefined : epsgCode);
             }))
                 .subscribe((features) => this.onFileImportSuccess(file, features), (error) => this.onFileImportError(file, error)));
         }
     }
-    detectEPSG(file, nbLines = 500) {
-        if (!file.name.toLowerCase().endsWith('.geojson') &&
-            !file.name.toLowerCase().endsWith('.gml')) {
-            this.epsgCode$.next('epsgNotDefined');
-            return;
-        }
-        const reader = new FileReader();
-        reader.onload = (e) => {
-            if (file.name.toLowerCase().endsWith('.geojson')) {
-                const geojson = JSON.parse(reader.result);
-                if (geojson.crs?.properties?.name) {
-                    const epsg = geojson.crs.properties.name.match(/EPSG:{1,2}\d{0,6}/gm);
-                    if (epsg !== null && epsg.length) {
-                        this.epsgCode$.next(epsg[0].replace(/::/g, ':'));
-                        return;
-                    }
-                    else {
-                        this.epsgCode$.next('epsgNotDefined');
-                        return;
-                    }
-                }
-                else {
-                    this.epsgCode$.next('epsgNotDefined');
-                    return;
-                }
-            }
-            else if (file.name.toLowerCase().endsWith('.gml')) {
-                const text = reader.result;
-                const lines = text.split('\n');
-                for (let line = 0; line <= nbLines; line++) {
-                    const epsg = lines[line].match(/EPSG:\d{0,6}/gm);
-                    if (epsg !== null && epsg.length) {
-                        this.epsgCode$.next(epsg[0]);
-                        break;
-                    }
-                    else {
-                        this.epsgCode$.next(undefined);
-                        return;
-                    }
-                }
-            }
-            else {
-                this.epsgCode$.next('epsgNotDefined');
-                return;
-            }
-        };
-        reader.readAsText(file, 'UTF-8');
-    }
     onFileImportSuccess(file, features) {
         const importExportOptions = this.config.getConfig('importExport');
         const confirmDialogService = importExportOptions?.allowToStoreLayer
@@ -32885,7 +32892,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\">\r\n  <input\r\n    matInput\r\n    [placeholder]=\"'igo.geo.layer.filterPlaceholder' | translate\"\r\n    [matTooltip]=\"'igo.geo.layer.subsetLayersListKeyword' | translate\"\r\n    matTooltipShowDelay=\"500\"\r\n    type=\"text\"\r\n    [(ngModel)]=\"term\"\r\n  />\r\n  <button\r\n    *ngIf=\"term\"\r\n    matSuffix\r\n    mat-icon-button\r\n    aria-label=\"Clear\"\r\n    color=\"warn\"\r\n    (click)=\"clearTerm()\"\r\n  >\r\n    <mat-icon svgIcon=\"close\"></mat-icon>\r\n  </button>\r\n</mat-form-field>\r\n\r\n<div class=\"actions-container\">\r\n  <button\r\n    class=\"sort-alpha\"\r\n    [color]=\"sortAlpha ? 'warn' : 'primary'\"\r\n    mat-icon-button\r\n    [matTooltip]=\"\r\n      sortAlpha\r\n        ? ('igo.geo.layer.sortMapOrder' | translate)\r\n        : ('igo.geo.layer.sortAlphabetically' | translate)\r\n    \"\r\n    matTooltipShowDelay=\"500\"\r\n    (click)=\"toggleSortAlpha()\"\r\n  >\r\n    <mat-icon\r\n      [svgIcon]=\"sortAlpha ? 'sort-ascending' : 'sort-alphabetical-ascending'\"\r\n    ></mat-icon>\r\n  </button>\r\n\r\n  <button\r\n    class=\"only-visible\"\r\n    mat-icon-button\r\n    [disabled]=\"layersAreAllVisible && !onlyVisible\"\r\n    [color]=\"onlyVisible ? 'warn' : 'primary'\"\r\n    [matTooltip]=\"\r\n      onlyVisible\r\n        ? ('igo.geo.layer.resetLayersList' | translate)\r\n        : ('igo.geo.layer.subsetLayersListOnlyVisible' | translate)\r\n    \"\r\n    matTooltipShowDelay=\"500\"\r\n    (click)=\"toggleOnlyVisible()\"\r\n  >\r\n    <mat-icon\r\n      aria-hidden=\"false\"\r\n      matBadge=\"icon\"\r\n      igoMatBadgeIcon=\"eye\"\r\n      [igoMatBadgeInverseColor]=\"true\"\r\n      [igoMatBadgeInheritColor]=\"true\"\r\n      [svgIcon]=\"onlyVisible ? 'filter-remove' : 'filter'\"\r\n    >\r\n    </mat-icon>\r\n  </button>\r\n\r\n  <button\r\n    class=\"selection-mode\"\r\n    mat-icon-button\r\n    color=\"primary\"\r\n    [matTooltip]=\"\r\n      selectionMode\r\n        ? ('igo.geo.layer.deactivateSelectionMode' | translate)\r\n        : ('igo.geo.layer.activateSelectionMode' | translate)\r\n    \"\r\n    matTooltipShowDelay=\"500\"\r\n    (click)=\"toggleSelectionMode()\"\r\n  >\r\n    <mat-icon\r\n      [svgIcon]=\"\r\n        selectionMode\r\n          ? 'checkbox-multiple-marked-outline'\r\n          : 'checkbox-multiple-blank-outline'\r\n      \"\r\n    ></mat-icon>\r\n  </button>\r\n</div>\r\n", styles: [":host{display:flex;align-items:center;justify-content:space-between;padding:8px 12px}:host .inputFilter{width:calc(100% - 100px);max-width:200px}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){:host .inputFilter{width:50%}}:host ::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{display:none}\n"], dependencies: [{ kind: "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 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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: LayerListToolComponent, decorators: [{
             type: Component,
@@ -32900,7 +32907,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                         MatBadgeModule,
                         IgoBadgeIconDirective,
                         TranslateModule
-                    ], template: "<mat-form-field class=\"inputFilter\" [floatLabel]=\"floatLabel\">\r\n  <input\r\n    matInput\r\n    [placeholder]=\"'igo.geo.layer.filterPlaceholder' | translate\"\r\n    [matTooltip]=\"'igo.geo.layer.subsetLayersListKeyword' | translate\"\r\n    matTooltipShowDelay=\"500\"\r\n    type=\"text\"\r\n    [(ngModel)]=\"term\"\r\n  />\r\n  <button\r\n    *ngIf=\"term\"\r\n    matSuffix\r\n    mat-icon-button\r\n    aria-label=\"Clear\"\r\n    color=\"warn\"\r\n    (click)=\"clearTerm()\"\r\n  >\r\n    <mat-icon svgIcon=\"close\"></mat-icon>\r\n  </button>\r\n</mat-form-field>\r\n\r\n<div class=\"actions-container\">\r\n  <button\r\n    class=\"sort-alpha\"\r\n    [color]=\"sortAlpha ? 'warn' : 'primary'\"\r\n    mat-icon-button\r\n    [matTooltip]=\"\r\n      sortAlpha\r\n        ? ('igo.geo.layer.sortMapOrder' | translate)\r\n        : ('igo.geo.layer.sortAlphabetically' | translate)\r\n    \"\r\n    matTooltipShowDelay=\"500\"\r\n    (click)=\"toggleSortAlpha()\"\r\n  >\r\n    <mat-icon\r\n      [svgIcon]=\"sortAlpha ? 'sort-ascending' : 'sort-alphabetical-ascending'\"\r\n    ></mat-icon>\r\n  </button>\r\n\r\n  <button\r\n    class=\"only-visible\"\r\n    mat-icon-button\r\n    [disabled]=\"layersAreAllVisible && !onlyVisible\"\r\n    [color]=\"onlyVisible ? 'warn' : 'primary'\"\r\n    [matTooltip]=\"\r\n      onlyVisible\r\n        ? ('igo.geo.layer.resetLayersList' | translate)\r\n        : ('igo.geo.layer.subsetLayersListOnlyVisible' | translate)\r\n    \"\r\n    matTooltipShowDelay=\"500\"\r\n    (click)=\"toggleOnlyVisible()\"\r\n  >\r\n    <mat-icon\r\n      aria-hidden=\"false\"\r\n      matBadge=\"icon\"\r\n      igoMatBadgeIcon=\"eye\"\r\n      [igoMatBadgeInverseColor]=\"true\"\r\n      [igoMatBadgeInheritColor]=\"true\"\r\n      [svgIcon]=\"onlyVisible ? 'filter-remove' : 'filter'\"\r\n    >\r\n    </mat-icon>\r\n  </button>\r\n\r\n  <button\r\n    class=\"selection-mode\"\r\n    mat-icon-button\r\n    color=\"primary\"\r\n    [matTooltip]=\"\r\n      selectionMode\r\n        ? ('igo.geo.layer.deactivateSelectionMode' | translate)\r\n        : ('igo.geo.layer.activateSelectionMode' | translate)\r\n    \"\r\n    matTooltipShowDelay=\"500\"\r\n    (click)=\"toggleSelectionMode()\"\r\n  >\r\n    <mat-icon\r\n      [svgIcon]=\"\r\n        selectionMode\r\n          ? 'checkbox-multiple-marked-outline'\r\n          : 'checkbox-multiple-blank-outline'\r\n      \"\r\n    ></mat-icon>\r\n  </button>\r\n</div>\r\n", styles: [":host{display:flex;align-items:center;justify-content:space-between;padding:8px 12px}:host .inputFilter{width:calc(100% - 100px);max-width:200px}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){:host .inputFilter{width:50%}}:host ::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{display:none}\n"] }]
+                    ], 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"] }]
         }], propDecorators: { layersAreAllVisible: [{
                 type: Input
             }], floatLabel: [{
@@ -33988,7 +33995,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\r\n  *ngIf=\"\r\n    (options && options.metadata && options.metadata.url) ||\r\n    (options && options.metadata && options.metadata.abstract)\r\n  \"\r\n  mat-icon-button\r\n  tooltip-position=\"below\"\r\n  matTooltipShowDelay=\"500\"\r\n  [matTooltip]=\"'igo.geo.metadata.show' | translate\"\r\n  [color]=\"color\"\r\n  (click)=\"openMetadata(options.metadata)\"\r\n>\r\n  <mat-icon svgIcon=\"information-outline\"></mat-icon>\r\n</button>\r\n", styles: [""], dependencies: [{ kind: "directive", type: 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 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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: MetadataButtonComponent, decorators: [{
             type: Component,
@@ -33999,7 +34006,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                         MatIconModule,
                         TranslateModule,
                         MatDialogModule
-                    ], template: "<button\r\n  *ngIf=\"\r\n    (options && options.metadata && options.metadata.url) ||\r\n    (options && options.metadata && options.metadata.abstract)\r\n  \"\r\n  mat-icon-button\r\n  tooltip-position=\"below\"\r\n  matTooltipShowDelay=\"500\"\r\n  [matTooltip]=\"'igo.geo.metadata.show' | translate\"\r\n  [color]=\"color\"\r\n  (click)=\"openMetadata(options.metadata)\"\r\n>\r\n  <mat-icon svgIcon=\"information-outline\"></mat-icon>\r\n</button>\r\n" }]
+                    ], 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" }]
         }], ctorParameters: () => [{ type: MetadataService }, { type: i1$5.MatDialog }], propDecorators: { layer: [{
                 type: Input
             }], color: [{
@@ -34011,7 +34018,7 @@ class MetadataAbstractComponent {
         this.data = data;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: MetadataAbstractComponent, deps: [{ token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: MetadataAbstractComponent, isStandalone: true, selector: "igo-metadata-abstract", ngImport: i0, template: "<h2 mat-dialog-title>{{ data.layerTitle }}</h2>\r\n<button class=\"close-button\" mat-button mat-dialog-close>X</button>\r\n<mat-dialog-content *ngIf=\"data.type !== 'arcgisrest'\" class=\"mat-typography\">\r\n  <h3>{{ data.abstract }}</h3>\r\n</mat-dialog-content>\r\n<mat-dialog-content *ngIf=\"data.type === 'arcgisrest'\" class=\"mat-typography\">\r\n  <h3 [innerHTML]=\"data.abstract\"></h3>\r\n</mat-dialog-content>\r\n", styles: [":host{position:relative;display:block}:host .close-button{top:5px;right:5px;padding:7px;line-height:10px;position:absolute!important;min-width:auto}\n"], dependencies: [{ kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { 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: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: MetadataAbstractComponent, isStandalone: true, selector: "igo-metadata-abstract", ngImport: i0, template: "<h2 mat-dialog-title>{{ data.layerTitle }}</h2>\n<button class=\"close-button\" mat-button mat-dialog-close>X</button>\n<mat-dialog-content *ngIf=\"data.type !== 'arcgisrest'\" class=\"mat-typography\">\n  <h3>{{ data.abstract }}</h3>\n</mat-dialog-content>\n<mat-dialog-content *ngIf=\"data.type === 'arcgisrest'\" class=\"mat-typography\">\n  <h3 [innerHTML]=\"data.abstract\"></h3>\n</mat-dialog-content>\n", styles: [":host{position:relative;display:block}:host .close-button{top:5px;right:5px;padding:7px;line-height:10px;position:absolute!important;min-width:auto}\n"], dependencies: [{ kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { 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: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: MetadataAbstractComponent, decorators: [{
             type: Component,
@@ -34021,7 +34028,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                         MatDialogClose,
                         NgIf,
                         MatDialogContent
-                    ], template: "<h2 mat-dialog-title>{{ data.layerTitle }}</h2>\r\n<button class=\"close-button\" mat-button mat-dialog-close>X</button>\r\n<mat-dialog-content *ngIf=\"data.type !== 'arcgisrest'\" class=\"mat-typography\">\r\n  <h3>{{ data.abstract }}</h3>\r\n</mat-dialog-content>\r\n<mat-dialog-content *ngIf=\"data.type === 'arcgisrest'\" class=\"mat-typography\">\r\n  <h3 [innerHTML]=\"data.abstract\"></h3>\r\n</mat-dialog-content>\r\n", styles: [":host{position:relative;display:block}:host .close-button{top:5px;right:5px;padding:7px;line-height:10px;position:absolute!important;min-width:auto}\n"] }]
+                    ], template: "<h2 mat-dialog-title>{{ data.layerTitle }}</h2>\n<button class=\"close-button\" mat-button mat-dialog-close>X</button>\n<mat-dialog-content *ngIf=\"data.type !== 'arcgisrest'\" class=\"mat-typography\">\n  <h3>{{ data.abstract }}</h3>\n</mat-dialog-content>\n<mat-dialog-content *ngIf=\"data.type === 'arcgisrest'\" class=\"mat-typography\">\n  <h3 [innerHTML]=\"data.abstract\"></h3>\n</mat-dialog-content>\n", styles: [":host{position:relative;display:block}:host .close-button{top:5px;right:5px;padding:7px;line-height:10px;position:absolute!important;min-width:auto}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
@@ -34616,7 +34623,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\">\r\n  {{ 'igo.geo.style.styleModal' | translate }}\r\n</h2>\r\n<div mat-dialog-content>\r\n  <div class=\"edition-drawing mat-typography\">\r\n    <form class=\"igo-form\" [formGroup]=\"form\">\r\n      <div\r\n        class=\"fill-color-picker mat-typography\"\r\n        *ngIf=\"linestringOnly !== true\"\r\n      >\r\n        <span>\r\n          <mat-icon class=\"stroke-palette-icon\" svgIcon=\"square\"></mat-icon>\r\n          {{ 'igo.geo.style.fill' | translate }}\r\n        </span>\r\n        <igo-color-picker-form-field\r\n          formControlName=\"fill\"\r\n          (colorChange)=\"setLayerFillColor($event)\"\r\n        ></igo-color-picker-form-field>\r\n      </div>\r\n\r\n      <div class=\"stroke-color-picker mat-typography\">\r\n        <span>\r\n          <mat-icon class=\"stroke-palette-icon\" svgIcon=\"square-outline\">\r\n          </mat-icon>\r\n          {{ 'igo.geo.style.stroke' | translate }}\r\n        </span>\r\n        <igo-color-picker-form-field\r\n          formControlName=\"stroke\"\r\n          (colorChange)=\"setLayerStrokeColor($event)\"\r\n        ></igo-color-picker-form-field>\r\n      </div>\r\n    </form>\r\n  </div>\r\n</div>\r\n<div mat-dialog-actions>\r\n  <button mat-raised-button (click)=\"cancel()\">\r\n    {{ 'igo.geo.style.cancel' | translate }}\r\n  </button>\r\n  <button mat-raised-button color=\"primary\" (click)=\"confirm()\">OK</button>\r\n</div>\r\n", styles: ["h2{font-weight:700;font-size:large}.igo-form{padding:10px}.fill-field,.stroke-field{width:130px}.fill-color-picker mat-icon{position:relative;top:7px}.fill-color-picker mat-form-field{left:8px}.stroke-color-picker mat-icon{position:relative;top:7px}.stroke-color-picker mat-form-field{left:35px}.box{width:25px;height:25px}.edition-drawing{padding:10px 0}.igo-input-container .mat-mdc-form-field+.mat-form-field{margin-left:8px}.igo-form-input-box{width:150px}button{margin-right:5px}\n"], dependencies: [{ kind: "directive", type: 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\" 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" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: StyleModalLayerComponent, decorators: [{
             type: Component,
@@ -34631,7 +34638,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                         MatDialogActions,
                         MatButtonModule,
                         TranslateModule
-                    ], template: "<h2 mat-dialog-title class=\"mat-typography\">\r\n  {{ 'igo.geo.style.styleModal' | translate }}\r\n</h2>\r\n<div mat-dialog-content>\r\n  <div class=\"edition-drawing mat-typography\">\r\n    <form class=\"igo-form\" [formGroup]=\"form\">\r\n      <div\r\n        class=\"fill-color-picker mat-typography\"\r\n        *ngIf=\"linestringOnly !== true\"\r\n      >\r\n        <span>\r\n          <mat-icon class=\"stroke-palette-icon\" svgIcon=\"square\"></mat-icon>\r\n          {{ 'igo.geo.style.fill' | translate }}\r\n        </span>\r\n        <igo-color-picker-form-field\r\n          formControlName=\"fill\"\r\n          (colorChange)=\"setLayerFillColor($event)\"\r\n        ></igo-color-picker-form-field>\r\n      </div>\r\n\r\n      <div class=\"stroke-color-picker mat-typography\">\r\n        <span>\r\n          <mat-icon class=\"stroke-palette-icon\" svgIcon=\"square-outline\">\r\n          </mat-icon>\r\n          {{ 'igo.geo.style.stroke' | translate }}\r\n        </span>\r\n        <igo-color-picker-form-field\r\n          formControlName=\"stroke\"\r\n          (colorChange)=\"setLayerStrokeColor($event)\"\r\n        ></igo-color-picker-form-field>\r\n      </div>\r\n    </form>\r\n  </div>\r\n</div>\r\n<div mat-dialog-actions>\r\n  <button mat-raised-button (click)=\"cancel()\">\r\n    {{ 'igo.geo.style.cancel' | translate }}\r\n  </button>\r\n  <button mat-raised-button color=\"primary\" (click)=\"confirm()\">OK</button>\r\n</div>\r\n", styles: ["h2{font-weight:700;font-size:large}.igo-form{padding:10px}.fill-field,.stroke-field{width:130px}.fill-color-picker mat-icon{position:relative;top:7px}.fill-color-picker mat-form-field{left:8px}.stroke-color-picker mat-icon{position:relative;top:7px}.stroke-color-picker mat-form-field{left:35px}.box{width:25px;height:25px}.edition-drawing{padding:10px 0}.igo-input-container .mat-mdc-form-field+.mat-form-field{margin-left:8px}.igo-form-input-box{width:150px}button{margin-right:5px}\n"] }]
+                    ], 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"] }]
         }], ctorParameters: () => [{ type: i1$5.MatDialogRef }, { type: i1$6.UntypedFormBuilder }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
@@ -34660,11 +34667,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\r\n  mat-icon-button\r\n  color=\"primary\"\r\n  (click)=\"openStyleModalDialog()\"\r\n  [matTooltip]=\"'igo.geo.style.styleModalTooltipLayer' | translate\"\r\n>\r\n  <mat-icon class=\"style-icon\" svgIcon=\"palette\"> </mat-icon>\r\n</button>\r\n", styles: [""], dependencies: [{ kind: "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\" 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 });
 }
 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\r\n  mat-icon-button\r\n  color=\"primary\"\r\n  (click)=\"openStyleModalDialog()\"\r\n  [matTooltip]=\"'igo.geo.style.styleModalTooltipLayer' | translate\"\r\n>\r\n  <mat-icon class=\"style-icon\" svgIcon=\"palette\"> </mat-icon>\r\n</button>\r\n" }]
+            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" }]
         }], ctorParameters: () => [{ type: i1$5.MatDialog }], propDecorators: { layer: [{
                 type: Input
             }] } });
@@ -34769,7 +34776,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\r\n  #flex\r\n  collapsedMobile=\"51px\"\r\n  expandedMobile=\"300px\"\r\n  [state]=\"state\"\r\n  (swipeup)=\"swipe($event.type)\"\r\n  (swipedown)=\"swipe($event.type)\"\r\n>\r\n  <igo-panel [title]=\"title\">\r\n    <button mat-icon-button panelLeftButton (click)=\"toggle()\">\r\n      <mat-icon\r\n        [svgIcon]=\"\r\n          ['collapsed', 'initial'].indexOf(flex.state) >= 0\r\n            ? 'arrow_upward'\r\n            : 'arrow_downward'\r\n        \"\r\n      ></mat-icon>\r\n    </button>\r\n\r\n    <button\r\n      mat-icon-button\r\n      panelRightButton\r\n      class=\"igo-icon-button\"\r\n      (click)=\"zoomToFeatureExtent()\"\r\n      *ngIf=\"feature.geometry\"\r\n    >\r\n      <mat-icon svgIcon=\"zoom-in\"></mat-icon>\r\n    </button>\r\n\r\n    <igo-feature-details [feature]=\"feature\"></igo-feature-details>\r\n  </igo-panel>\r\n</igo-flexible>\r\n", styles: [":host{position:absolute;bottom:0;width:100%;max-height:calc(100% - 50px);background-color:#fff}igo-feature-details ::ng-deep table{width:100%}\n"], dependencies: [{ kind: "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        [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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ToastComponent, decorators: [{
             type: Component,
@@ -34780,7 +34787,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                         MatIconModule,
                         NgIf,
                         FeatureDetailsComponent
-                    ], template: "<igo-flexible\r\n  #flex\r\n  collapsedMobile=\"51px\"\r\n  expandedMobile=\"300px\"\r\n  [state]=\"state\"\r\n  (swipeup)=\"swipe($event.type)\"\r\n  (swipedown)=\"swipe($event.type)\"\r\n>\r\n  <igo-panel [title]=\"title\">\r\n    <button mat-icon-button panelLeftButton (click)=\"toggle()\">\r\n      <mat-icon\r\n        [svgIcon]=\"\r\n          ['collapsed', 'initial'].indexOf(flex.state) >= 0\r\n            ? 'arrow_upward'\r\n            : 'arrow_downward'\r\n        \"\r\n      ></mat-icon>\r\n    </button>\r\n\r\n    <button\r\n      mat-icon-button\r\n      panelRightButton\r\n      class=\"igo-icon-button\"\r\n      (click)=\"zoomToFeatureExtent()\"\r\n      *ngIf=\"feature.geometry\"\r\n    >\r\n      <mat-icon svgIcon=\"zoom-in\"></mat-icon>\r\n    </button>\r\n\r\n    <igo-feature-details [feature]=\"feature\"></igo-feature-details>\r\n  </igo-panel>\r\n</igo-flexible>\r\n", styles: [":host{position:absolute;bottom:0;width:100%;max-height:calc(100% - 50px);background-color:#fff}igo-feature-details ::ng-deep table{width:100%}\n"] }]
+                    ], 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"] }]
         }], ctorParameters: () => [], propDecorators: { expanded: [{
                 type: Input
             }], map: [{
@@ -34863,11 +34870,11 @@ class OgcFilterComponent {
         this.cancel.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: OgcFilterComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: OgcFilterComponent, isStandalone: true, selector: "igo-ogc-filter", inputs: { layer: "layer", map: "map" }, outputs: { complete: "complete", cancel: "cancel" }, ngImport: i0, template: "<igo-ogc-filterable-item\r\n  igoListItem\r\n  [layer]=\"layer\"\r\n  [header]=\"false\"\r\n  [map]=\"map\"\r\n>\r\n</igo-ogc-filterable-item>\r\n", styles: [""], dependencies: [{ kind: "component", type: OgcFilterableItemComponent, selector: "igo-ogc-filterable-item", inputs: ["layer", "map", "header"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: OgcFilterComponent, isStandalone: true, selector: "igo-ogc-filter", inputs: { layer: "layer", map: "map" }, outputs: { complete: "complete", cancel: "cancel" }, ngImport: i0, template: "<igo-ogc-filterable-item\n  igoListItem\n  [layer]=\"layer\"\n  [header]=\"false\"\n  [map]=\"map\"\n>\n</igo-ogc-filterable-item>\n", styles: [""], dependencies: [{ kind: "component", type: OgcFilterableItemComponent, selector: "igo-ogc-filterable-item", inputs: ["layer", "map", "header"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: OgcFilterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'igo-ogc-filter', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [OgcFilterableItemComponent], template: "<igo-ogc-filterable-item\r\n  igoListItem\r\n  [layer]=\"layer\"\r\n  [header]=\"false\"\r\n  [map]=\"map\"\r\n>\r\n</igo-ogc-filterable-item>\r\n" }]
+            args: [{ selector: 'igo-ogc-filter', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [OgcFilterableItemComponent], template: "<igo-ogc-filterable-item\n  igoListItem\n  [layer]=\"layer\"\n  [header]=\"false\"\n  [map]=\"map\"\n>\n</igo-ogc-filterable-item>\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { layer: [{
                 type: Input
             }], map: [{
@@ -34924,11 +34931,11 @@ class ConfirmationPopupComponent {
         this.dialogRef.close(this.data.cancel);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ConfirmationPopupComponent, deps: [{ token: i1$5.MatDialogRef }, { token: i1$2.LanguageService }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: ConfirmationPopupComponent, isStandalone: true, selector: "igo-confirmation-popup-component", ngImport: i0, template: "<div mat-dialog-content>\r\n  <p class=\"mat-typography\">\r\n    {{\r\n      data.type === 'add'\r\n        ? languageService.translate.instant('igo.geo.workspace.addConfirmation')\r\n        : languageService.translate.instant(\r\n            'igo.geo.workspace.deleteConfirmation'\r\n          )\r\n    }}\r\n  </p>\r\n</div>\r\n<div mat-dialog-actions>\r\n  <button mat-raised-button color=\"primary\" (click)=\"confirmedAction()\">\r\n    Ok\r\n  </button>\r\n  <button mat-raised-button (click)=\"cancelAction()\">\r\n    {{ languageService.translate.instant('igo.geo.workspace.cancel') }}\r\n  </button>\r\n</div>\r\n", styles: ["div.mat-mdc-dialog-actions{justify-content:center}\n"], dependencies: [{ kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { 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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: ConfirmationPopupComponent, isStandalone: true, selector: "igo-confirmation-popup-component", ngImport: i0, template: "<div mat-dialog-content>\n  <p class=\"mat-typography\">\n    {{\n      data.type === 'add'\n        ? languageService.translate.instant('igo.geo.workspace.addConfirmation')\n        : languageService.translate.instant(\n            'igo.geo.workspace.deleteConfirmation'\n          )\n    }}\n  </p>\n</div>\n<div mat-dialog-actions>\n  <button mat-raised-button color=\"primary\" (click)=\"confirmedAction()\">\n    Ok\n  </button>\n  <button mat-raised-button (click)=\"cancelAction()\">\n    {{ languageService.translate.instant('igo.geo.workspace.cancel') }}\n  </button>\n</div>\n", styles: ["div.mat-mdc-dialog-actions{justify-content:center}\n"], dependencies: [{ kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { 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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ConfirmationPopupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'igo-confirmation-popup-component', standalone: true, imports: [MatDialogContent, MatDialogActions, MatButtonModule], template: "<div mat-dialog-content>\r\n  <p class=\"mat-typography\">\r\n    {{\r\n      data.type === 'add'\r\n        ? languageService.translate.instant('igo.geo.workspace.addConfirmation')\r\n        : languageService.translate.instant(\r\n            'igo.geo.workspace.deleteConfirmation'\r\n          )\r\n    }}\r\n  </p>\r\n</div>\r\n<div mat-dialog-actions>\r\n  <button mat-raised-button color=\"primary\" (click)=\"confirmedAction()\">\r\n    Ok\r\n  </button>\r\n  <button mat-raised-button (click)=\"cancelAction()\">\r\n    {{ languageService.translate.instant('igo.geo.workspace.cancel') }}\r\n  </button>\r\n</div>\r\n", styles: ["div.mat-mdc-dialog-actions{justify-content:center}\n"] }]
+            args: [{ selector: 'igo-confirmation-popup-component', standalone: true, imports: [MatDialogContent, MatDialogActions, MatButtonModule], template: "<div mat-dialog-content>\n  <p class=\"mat-typography\">\n    {{\n      data.type === 'add'\n        ? languageService.translate.instant('igo.geo.workspace.addConfirmation')\n        : languageService.translate.instant(\n            'igo.geo.workspace.deleteConfirmation'\n          )\n    }}\n  </p>\n</div>\n<div mat-dialog-actions>\n  <button mat-raised-button color=\"primary\" (click)=\"confirmedAction()\">\n    Ok\n  </button>\n  <button mat-raised-button (click)=\"cancelAction()\">\n    {{ languageService.translate.instant('igo.geo.workspace.cancel') }}\n  </button>\n</div>\n", styles: ["div.mat-mdc-dialog-actions{justify-content:center}\n"] }]
         }], ctorParameters: () => [{ type: i1$5.MatDialogRef }, { type: i1$2.LanguageService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
@@ -37955,7 +37962,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>\r\n  <mat-icon\r\n    *ngIf=\"haveGroup()\"\r\n    class=\"catalog-browser-layer-carret\"\r\n    matListItemIcon\r\n    svgIcon=\"blank\"\r\n  ></mat-icon>\r\n  <span\r\n    matListItemTitle\r\n    matTooltipShowDelay=\"500\"\r\n    [ngClass]=\"catalogAllowLegend ? 'igo-cataloglayer-title' : ''\"\r\n    (click)=\"askForLegend($event)\"\r\n    [matTooltip]=\"computeTitleTooltip()\"\r\n  >\r\n    {{ title }}\r\n  </span>\r\n\r\n  <div matListItemMeta>\r\n    <button *ngIf=\"layer.externalProvider\" disabled=\"true\" mat-icon-button>\r\n      <mat-icon\r\n        class=\"igo-cataloglayer-external-icon\"\r\n        tooltip-position=\"below\"\r\n        matTooltipShowDelay=\"500\"\r\n        [matTooltip]=\"'igo.geo.catalog.externalProvider.layer' | translate\"\r\n        color=\"primary\"\r\n        (click)=\"$event.stopPropagation()\"\r\n        svgIcon=\"earth-arrow-right\"\r\n      >\r\n      </mat-icon>\r\n    </button>\r\n    <igo-metadata-button [layer]=\"$any(layer)\"></igo-metadata-button>\r\n\r\n    <button\r\n      (mouseenter)=\"onMouseEvent($event)\"\r\n      (mouseleave)=\"onMouseEvent($event)\"\r\n      mat-icon-button\r\n      tooltip-position=\"below\"\r\n      matTooltipShowDelay=\"500\"\r\n      [matTooltip]=\"computeTooltip() | translate\"\r\n      [color]=\"(isPreview$ | async) ? '' : added ? 'warn' : ''\"\r\n      (click)=\"onToggleClick($event)\"\r\n    >\r\n      <mat-icon\r\n        aria-hidden=\"false\"\r\n        matBadge=\"icon\"\r\n        [igoMatBadgeIcon]=\"getBadgeIcon()\"\r\n        igoMatBadgeColor=\"rgba(0,0,0,0.87)\"\r\n        igoMatBadgeBackgroundColor=\"none\"\r\n        [igoMatBadgeInverseColor]=\"true\"\r\n        [matBadgeHidden]=\"\r\n          ((inRange$ | async) && (isVisible$ | async) === true) ||\r\n          ((inRange$ | async) && !added) ||\r\n          ((inRange$ | async) && (isPreview$ | async))\r\n        \"\r\n        [matBadgeDisabled]=\"(inRange$ | async) === false\"\r\n        matBadgeSize=\"small\"\r\n        matBadgePosition=\"after\"\r\n        [svgIcon]=\"(isPreview$ | async) ? 'plus' : added ? 'delete' : 'plus'\"\r\n      >\r\n      </mat-icon>\r\n    </button>\r\n  </div>\r\n</mat-list-item>\r\n\r\n<div #legend class=\"igo-cataloglayer-legend-container\">\r\n  <igo-layer-legend\r\n    *ngIf=\"\r\n      (layerLegendShown$ | async) && (igoLayer$ | async) && catalogAllowLegend\r\n    \"\r\n    [layer]=\"igoLayer$ | async\"\r\n  >\r\n  </igo-layer-legend>\r\n</div>\r\n", styles: [".igo-cataloglayer-title{cursor:pointer}.catalog-browser-layer-carret{margin-right:16px}.igo-cataloglayer-legend-container{padding-left:18px;width:calc(100% - 18px);margin-left:40px}.igo-cataloglayer-external-icon{cursor:help}:host .mdc-list-item__end,:host .mdc-list-item__start{color:#000}\n"], dependencies: [{ kind: "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    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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CatalogBrowserLayerComponent, decorators: [{
             type: Component,
@@ -37972,7 +37979,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                         LayerLegendComponent,
                         AsyncPipe,
                         TranslateModule
-                    ], template: "<mat-list-item>\r\n  <mat-icon\r\n    *ngIf=\"haveGroup()\"\r\n    class=\"catalog-browser-layer-carret\"\r\n    matListItemIcon\r\n    svgIcon=\"blank\"\r\n  ></mat-icon>\r\n  <span\r\n    matListItemTitle\r\n    matTooltipShowDelay=\"500\"\r\n    [ngClass]=\"catalogAllowLegend ? 'igo-cataloglayer-title' : ''\"\r\n    (click)=\"askForLegend($event)\"\r\n    [matTooltip]=\"computeTitleTooltip()\"\r\n  >\r\n    {{ title }}\r\n  </span>\r\n\r\n  <div matListItemMeta>\r\n    <button *ngIf=\"layer.externalProvider\" disabled=\"true\" mat-icon-button>\r\n      <mat-icon\r\n        class=\"igo-cataloglayer-external-icon\"\r\n        tooltip-position=\"below\"\r\n        matTooltipShowDelay=\"500\"\r\n        [matTooltip]=\"'igo.geo.catalog.externalProvider.layer' | translate\"\r\n        color=\"primary\"\r\n        (click)=\"$event.stopPropagation()\"\r\n        svgIcon=\"earth-arrow-right\"\r\n      >\r\n      </mat-icon>\r\n    </button>\r\n    <igo-metadata-button [layer]=\"$any(layer)\"></igo-metadata-button>\r\n\r\n    <button\r\n      (mouseenter)=\"onMouseEvent($event)\"\r\n      (mouseleave)=\"onMouseEvent($event)\"\r\n      mat-icon-button\r\n      tooltip-position=\"below\"\r\n      matTooltipShowDelay=\"500\"\r\n      [matTooltip]=\"computeTooltip() | translate\"\r\n      [color]=\"(isPreview$ | async) ? '' : added ? 'warn' : ''\"\r\n      (click)=\"onToggleClick($event)\"\r\n    >\r\n      <mat-icon\r\n        aria-hidden=\"false\"\r\n        matBadge=\"icon\"\r\n        [igoMatBadgeIcon]=\"getBadgeIcon()\"\r\n        igoMatBadgeColor=\"rgba(0,0,0,0.87)\"\r\n        igoMatBadgeBackgroundColor=\"none\"\r\n        [igoMatBadgeInverseColor]=\"true\"\r\n        [matBadgeHidden]=\"\r\n          ((inRange$ | async) && (isVisible$ | async) === true) ||\r\n          ((inRange$ | async) && !added) ||\r\n          ((inRange$ | async) && (isPreview$ | async))\r\n        \"\r\n        [matBadgeDisabled]=\"(inRange$ | async) === false\"\r\n        matBadgeSize=\"small\"\r\n        matBadgePosition=\"after\"\r\n        [svgIcon]=\"(isPreview$ | async) ? 'plus' : added ? 'delete' : 'plus'\"\r\n      >\r\n      </mat-icon>\r\n    </button>\r\n  </div>\r\n</mat-list-item>\r\n\r\n<div #legend class=\"igo-cataloglayer-legend-container\">\r\n  <igo-layer-legend\r\n    *ngIf=\"\r\n      (layerLegendShown$ | async) && (igoLayer$ | async) && catalogAllowLegend\r\n    \"\r\n    [layer]=\"igoLayer$ | async\"\r\n  >\r\n  </igo-layer-legend>\r\n</div>\r\n", styles: [".igo-cataloglayer-title{cursor:pointer}.catalog-browser-layer-carret{margin-right:16px}.igo-cataloglayer-legend-container{padding-left:18px;width:calc(100% - 18px);margin-left:40px}.igo-cataloglayer-external-icon{cursor:help}:host .mdc-list-item__end,:host .mdc-list-item__start{color:#000}\n"] }]
+                    ], 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"] }]
         }], ctorParameters: () => [{ type: LayerService }], propDecorators: { resolution: [{
                 type: Input
             }], catalogAllowLegend: [{
@@ -38164,7 +38171,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>\r\n  <mat-icon\r\n    matListItemIcon\r\n    svgIcon=\"chevron-up\"\r\n    igoCollapse\r\n    class=\"igo-chevron catalog-browser-group-carret\"\r\n    [target]=\"items\"\r\n    [collapsed]=\"collapsed\"\r\n    (toggle)=\"onToggleCollapsed($event)\"\r\n  >\r\n  </mat-icon>\r\n\r\n  <span\r\n    class=\"igo-catalog-group-title\"\r\n    matListItemTitle\r\n    matTooltipShowDelay=\"500\"\r\n    [matTooltip]=\"title\"\r\n    (click)=\"onTitleClick()\"\r\n    >{{ title }}</span\r\n  >\r\n\r\n  <div matListItemMeta>\r\n    <button *ngIf=\"group.externalProvider\" disabled=\"true\" mat-icon-button>\r\n      <mat-icon\r\n        class=\"igo-cataloggroup-external-icon\"\r\n        *ngIf=\"group.externalProvider\"\r\n        tooltip-position=\"below\"\r\n        matTooltipShowDelay=\"500\"\r\n        [matTooltip]=\"'igo.geo.catalog.externalProvider.group' | translate\"\r\n        color=\"primary\"\r\n        (click)=\"$event.stopPropagation()\"\r\n        svgIcon=\"earth-arrow-right\"\r\n      >\r\n      </mat-icon>\r\n    </button>\r\n\r\n    <ng-container\r\n      *ngIf=\"(added$ | async) && (preview$ | async) === false; else notadded\"\r\n    >\r\n      <button\r\n        mat-icon-button\r\n        tooltip-position=\"below\"\r\n        matTooltipShowDelay=\"500\"\r\n        [matTooltip]=\"'igo.geo.catalog.group.removeFromMap' | translate\"\r\n        color=\"warn\"\r\n        [disabled]=\"disabled$ | async\"\r\n        (click)=\"onToggleClick($event)\"\r\n      >\r\n        <mat-icon svgIcon=\"delete\"></mat-icon>\r\n      </button>\r\n    </ng-container>\r\n\r\n    <ng-template #notadded>\r\n      <button\r\n        mat-icon-button\r\n        tooltip-position=\"below\"\r\n        matTooltipShowDelay=\"500\"\r\n        [matTooltip]=\"'igo.geo.catalog.group.addToMap' | translate\"\r\n        [disabled]=\"disabled$ | async\"\r\n        (click)=\"onToggleClick($event)\"\r\n      >\r\n        <mat-icon svgIcon=\"plus\"></mat-icon>\r\n      </button>\r\n    </ng-template>\r\n  </div>\r\n</mat-list-item>\r\n\r\n<div #items>\r\n  <ng-template ngFor let-item [ngForOf]=\"store.view.all$() | async\">\r\n    <ng-container *ngIf=\"isGroup(item)\">\r\n      <!-- todo: add display ans manage CatalogItemGroup -->\r\n    </ng-container>\r\n    <ng-container *ngIf=\"isLayer(item)\">\r\n      <igo-catalog-browser-layer\r\n        igoListItem\r\n        [layer]=\"$any(item)\"\r\n        [resolution]=\"resolution\"\r\n        [map]=\"map\"\r\n        [catalogAllowLegend]=\"catalogAllowLegend\"\r\n        [added]=\"state.get(item).added\"\r\n        (addedLayerIsPreview)=\"onLayerPreview($event)\"\r\n        (addedChange)=\"onLayerAddedChange($event)\"\r\n      >\r\n      </igo-catalog-browser-layer>\r\n    </ng-container>\r\n  </ng-template>\r\n</div>\r\n", styles: [".igo-catalog-group-title{cursor:pointer}.igo-cataloggroup-external-icon{cursor:help}.catalog-browser-group-carret{margin-right:16px}.igo-catalog-group-title{font-weight:500}:host .mdc-list-item__end,:host .mdc-list-item__start{color:#000}\n"], dependencies: [{ kind: "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    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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CatalogBrowserGroupComponent, decorators: [{
             type: Component,
@@ -38180,7 +38187,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                         ListItemDirective,
                         AsyncPipe,
                         TranslateModule
-                    ], template: "<mat-list-item>\r\n  <mat-icon\r\n    matListItemIcon\r\n    svgIcon=\"chevron-up\"\r\n    igoCollapse\r\n    class=\"igo-chevron catalog-browser-group-carret\"\r\n    [target]=\"items\"\r\n    [collapsed]=\"collapsed\"\r\n    (toggle)=\"onToggleCollapsed($event)\"\r\n  >\r\n  </mat-icon>\r\n\r\n  <span\r\n    class=\"igo-catalog-group-title\"\r\n    matListItemTitle\r\n    matTooltipShowDelay=\"500\"\r\n    [matTooltip]=\"title\"\r\n    (click)=\"onTitleClick()\"\r\n    >{{ title }}</span\r\n  >\r\n\r\n  <div matListItemMeta>\r\n    <button *ngIf=\"group.externalProvider\" disabled=\"true\" mat-icon-button>\r\n      <mat-icon\r\n        class=\"igo-cataloggroup-external-icon\"\r\n        *ngIf=\"group.externalProvider\"\r\n        tooltip-position=\"below\"\r\n        matTooltipShowDelay=\"500\"\r\n        [matTooltip]=\"'igo.geo.catalog.externalProvider.group' | translate\"\r\n        color=\"primary\"\r\n        (click)=\"$event.stopPropagation()\"\r\n        svgIcon=\"earth-arrow-right\"\r\n      >\r\n      </mat-icon>\r\n    </button>\r\n\r\n    <ng-container\r\n      *ngIf=\"(added$ | async) && (preview$ | async) === false; else notadded\"\r\n    >\r\n      <button\r\n        mat-icon-button\r\n        tooltip-position=\"below\"\r\n        matTooltipShowDelay=\"500\"\r\n        [matTooltip]=\"'igo.geo.catalog.group.removeFromMap' | translate\"\r\n        color=\"warn\"\r\n        [disabled]=\"disabled$ | async\"\r\n        (click)=\"onToggleClick($event)\"\r\n      >\r\n        <mat-icon svgIcon=\"delete\"></mat-icon>\r\n      </button>\r\n    </ng-container>\r\n\r\n    <ng-template #notadded>\r\n      <button\r\n        mat-icon-button\r\n        tooltip-position=\"below\"\r\n        matTooltipShowDelay=\"500\"\r\n        [matTooltip]=\"'igo.geo.catalog.group.addToMap' | translate\"\r\n        [disabled]=\"disabled$ | async\"\r\n        (click)=\"onToggleClick($event)\"\r\n      >\r\n        <mat-icon svgIcon=\"plus\"></mat-icon>\r\n      </button>\r\n    </ng-template>\r\n  </div>\r\n</mat-list-item>\r\n\r\n<div #items>\r\n  <ng-template ngFor let-item [ngForOf]=\"store.view.all$() | async\">\r\n    <ng-container *ngIf=\"isGroup(item)\">\r\n      <!-- todo: add display ans manage CatalogItemGroup -->\r\n    </ng-container>\r\n    <ng-container *ngIf=\"isLayer(item)\">\r\n      <igo-catalog-browser-layer\r\n        igoListItem\r\n        [layer]=\"$any(item)\"\r\n        [resolution]=\"resolution\"\r\n        [map]=\"map\"\r\n        [catalogAllowLegend]=\"catalogAllowLegend\"\r\n        [added]=\"state.get(item).added\"\r\n        (addedLayerIsPreview)=\"onLayerPreview($event)\"\r\n        (addedChange)=\"onLayerAddedChange($event)\"\r\n      >\r\n      </igo-catalog-browser-layer>\r\n    </ng-container>\r\n  </ng-template>\r\n</div>\r\n", styles: [".igo-catalog-group-title{cursor:pointer}.igo-cataloggroup-external-icon{cursor:help}.catalog-browser-group-carret{margin-right:16px}.igo-catalog-group-title{font-weight:500}:host .mdc-list-item__end,:host .mdc-list-item__start{color:#000}\n"] }]
+                    ], 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"] }]
         }], propDecorators: { catalog: [{
                 type: Input
             }], group: [{
@@ -38409,7 +38416,7 @@ class CatalogBrowserComponent {
         this.removeLayersFromMap(layers);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CatalogBrowserComponent, deps: [{ token: LayerService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: CatalogBrowserComponent, isStandalone: true, selector: "igo-catalog-browser", inputs: { catalogAllowLegend: "catalogAllowLegend", catalog: "catalog", store: "store", map: "map", toggleCollapsedGroup: "toggleCollapsedGroup" }, ngImport: i0, template: "<igo-list [navigation]=\"false\" [selection]=\"false\">\r\n  <ng-template ngFor let-item [ngForOf]=\"store.view.all$() | async\">\r\n    <ng-container *ngIf=\"isGroup(item)\">\r\n      <igo-catalog-browser-group\r\n        [catalog]=\"catalog\"\r\n        [group]=\"item\"\r\n        [map]=\"map\"\r\n        [state]=\"store.state\"\r\n        [resolution]=\"resolution$ | async\"\r\n        [catalogAllowLegend]=\"catalogAllowLegend\"\r\n        [collapsed]=\"store.count === 1 ? false : true\"\r\n        [toggleCollapsed]=\"toggleCollapsedGroup\"\r\n        (addedChange)=\"onGroupAddedChange($event)\"\r\n        (layerAddedChange)=\"onLayerAddedChange($event)\"\r\n      >\r\n      </igo-catalog-browser-group>\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"isLayer(item)\">\r\n      <igo-catalog-browser-layer\r\n        igoListItem\r\n        [layer]=\"$any(item)\"\r\n        [map]=\"map\"\r\n        [resolution]=\"resolution$ | async\"\r\n        [catalogAllowLegend]=\"catalogAllowLegend\"\r\n        [added]=\"store.state.get(item).added\"\r\n        (addedChange)=\"onLayerAddedChange($event)\"\r\n      >\r\n      </igo-catalog-browser-layer>\r\n    </ng-container>\r\n  </ng-template>\r\n</igo-list>\r\n", dependencies: [{ kind: "component", type: ListComponent, selector: "igo-list", inputs: ["navigation", "selection"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CatalogBrowserGroupComponent, selector: "igo-catalog-browser-group", inputs: ["catalog", "group", "map", "collapsed", "resolution", "catalogAllowLegend", "toggleCollapsed", "state"], outputs: ["addedChange", "layerAddedChange"] }, { kind: "component", type: CatalogBrowserLayerComponent, selector: "igo-catalog-browser-layer", inputs: ["resolution", "catalogAllowLegend", "layer", "map", "added"], outputs: ["addedChange", "addedLayerIsPreview"] }, { kind: "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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: CatalogBrowserComponent, isStandalone: true, selector: "igo-catalog-browser", inputs: { catalogAllowLegend: "catalogAllowLegend", catalog: "catalog", store: "store", map: "map", toggleCollapsedGroup: "toggleCollapsedGroup" }, ngImport: i0, template: "<igo-list [navigation]=\"false\" [selection]=\"false\">\n  <ng-template ngFor let-item [ngForOf]=\"store.view.all$() | async\">\n    <ng-container *ngIf=\"isGroup(item)\">\n      <igo-catalog-browser-group\n        [catalog]=\"catalog\"\n        [group]=\"item\"\n        [map]=\"map\"\n        [state]=\"store.state\"\n        [resolution]=\"resolution$ | async\"\n        [catalogAllowLegend]=\"catalogAllowLegend\"\n        [collapsed]=\"store.count === 1 ? false : true\"\n        [toggleCollapsed]=\"toggleCollapsedGroup\"\n        (addedChange)=\"onGroupAddedChange($event)\"\n        (layerAddedChange)=\"onLayerAddedChange($event)\"\n      >\n      </igo-catalog-browser-group>\n    </ng-container>\n\n    <ng-container *ngIf=\"isLayer(item)\">\n      <igo-catalog-browser-layer\n        igoListItem\n        [layer]=\"$any(item)\"\n        [map]=\"map\"\n        [resolution]=\"resolution$ | async\"\n        [catalogAllowLegend]=\"catalogAllowLegend\"\n        [added]=\"store.state.get(item).added\"\n        (addedChange)=\"onLayerAddedChange($event)\"\n      >\n      </igo-catalog-browser-layer>\n    </ng-container>\n  </ng-template>\n</igo-list>\n", dependencies: [{ kind: "component", type: ListComponent, selector: "igo-list", inputs: ["navigation", "selection"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CatalogBrowserGroupComponent, selector: "igo-catalog-browser-group", inputs: ["catalog", "group", "map", "collapsed", "resolution", "catalogAllowLegend", "toggleCollapsed", "state"], outputs: ["addedChange", "layerAddedChange"] }, { kind: "component", type: CatalogBrowserLayerComponent, selector: "igo-catalog-browser-layer", inputs: ["resolution", "catalogAllowLegend", "layer", "map", "added"], outputs: ["addedChange", "addedLayerIsPreview"] }, { kind: "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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CatalogBrowserComponent, decorators: [{
             type: Component,
@@ -38421,7 +38428,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                         CatalogBrowserLayerComponent,
                         ListItemDirective,
                         AsyncPipe
-                    ], template: "<igo-list [navigation]=\"false\" [selection]=\"false\">\r\n  <ng-template ngFor let-item [ngForOf]=\"store.view.all$() | async\">\r\n    <ng-container *ngIf=\"isGroup(item)\">\r\n      <igo-catalog-browser-group\r\n        [catalog]=\"catalog\"\r\n        [group]=\"item\"\r\n        [map]=\"map\"\r\n        [state]=\"store.state\"\r\n        [resolution]=\"resolution$ | async\"\r\n        [catalogAllowLegend]=\"catalogAllowLegend\"\r\n        [collapsed]=\"store.count === 1 ? false : true\"\r\n        [toggleCollapsed]=\"toggleCollapsedGroup\"\r\n        (addedChange)=\"onGroupAddedChange($event)\"\r\n        (layerAddedChange)=\"onLayerAddedChange($event)\"\r\n      >\r\n      </igo-catalog-browser-group>\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"isLayer(item)\">\r\n      <igo-catalog-browser-layer\r\n        igoListItem\r\n        [layer]=\"$any(item)\"\r\n        [map]=\"map\"\r\n        [resolution]=\"resolution$ | async\"\r\n        [catalogAllowLegend]=\"catalogAllowLegend\"\r\n        [added]=\"store.state.get(item).added\"\r\n        (addedChange)=\"onLayerAddedChange($event)\"\r\n      >\r\n      </igo-catalog-browser-layer>\r\n    </ng-container>\r\n  </ng-template>\r\n</igo-list>\r\n" }]
+                    ], template: "<igo-list [navigation]=\"false\" [selection]=\"false\">\n  <ng-template ngFor let-item [ngForOf]=\"store.view.all$() | async\">\n    <ng-container *ngIf=\"isGroup(item)\">\n      <igo-catalog-browser-group\n        [catalog]=\"catalog\"\n        [group]=\"item\"\n        [map]=\"map\"\n        [state]=\"store.state\"\n        [resolution]=\"resolution$ | async\"\n        [catalogAllowLegend]=\"catalogAllowLegend\"\n        [collapsed]=\"store.count === 1 ? false : true\"\n        [toggleCollapsed]=\"toggleCollapsedGroup\"\n        (addedChange)=\"onGroupAddedChange($event)\"\n        (layerAddedChange)=\"onLayerAddedChange($event)\"\n      >\n      </igo-catalog-browser-group>\n    </ng-container>\n\n    <ng-container *ngIf=\"isLayer(item)\">\n      <igo-catalog-browser-layer\n        igoListItem\n        [layer]=\"$any(item)\"\n        [map]=\"map\"\n        [resolution]=\"resolution$ | async\"\n        [catalogAllowLegend]=\"catalogAllowLegend\"\n        [added]=\"store.state.get(item).added\"\n        (addedChange)=\"onLayerAddedChange($event)\"\n      >\n      </igo-catalog-browser-layer>\n    </ng-container>\n  </ng-template>\n</igo-list>\n" }]
         }], ctorParameters: () => [{ type: LayerService }, { type: i0.ChangeDetectorRef }], propDecorators: { catalogAllowLegend: [{
                 type: Input
             }], catalog: [{
@@ -38525,7 +38532,7 @@ class AddCatalogDialogComponent {
         this.dialogRef.close();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: AddCatalogDialogComponent, deps: [{ token: i1$6.UntypedFormBuilder }, { token: i1$2.LanguageService }, { token: i1.ConfigService }, { token: i1$5.MatDialogRef }, { token: MAT_DIALOG_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: AddCatalogDialogComponent, isStandalone: true, selector: "igo-add-catalog-dialog", ngImport: i0, template: "<h1 mat-dialog-title class=\"mat-typography\">\r\n  {{ 'igo.geo.catalog.library.addTitle' | translate }}\r\n</h1>\r\n<div mat-dialog-content class=\"mat-typography\">\r\n  <form class=\"igo-form\" [formGroup]=\"form\">\r\n    <div class=\"igo-input-container\">\r\n      <mat-form-field>\r\n        <input\r\n          type=\"text\"\r\n          formControlName=\"title\"\r\n          placeholder=\"{{ 'igo.geo.printForm.title' | translate }}\"\r\n          matInput\r\n          [matAutocomplete]=\"auto2\"\r\n        />\r\n        <mat-autocomplete\r\n          #auto2=\"matAutocomplete\"\r\n          (optionSelected)=\"changeUrlOrTitle($event.option.value)\"\r\n        >\r\n          <mat-option\r\n            *ngFor=\"let predefinedCatalog of predefinedCatalogsList$ | async\"\r\n            matTooltipShowDelay=\"500\"\r\n            [matTooltip]=\"predefinedCatalog.title\"\r\n            [value]=\"predefinedCatalog\"\r\n          >\r\n            {{ predefinedCatalog.title }}\r\n          </mat-option>\r\n        </mat-autocomplete>\r\n      </mat-form-field>\r\n    </div>\r\n    <div class=\"igo-input-container\">\r\n      <mat-form-field>\r\n        <input\r\n          type=\"text\"\r\n          formControlName=\"url\"\r\n          placeholder=\"URL\"\r\n          matInput\r\n          [matAutocomplete]=\"auto\"\r\n        />\r\n        <mat-autocomplete\r\n          #auto=\"matAutocomplete\"\r\n          (optionSelected)=\"changeUrlOrTitle($event.option.value)\"\r\n        >\r\n          <mat-option\r\n            *ngFor=\"let predefinedCatalog of predefinedCatalogsList$ | async\"\r\n            matTooltipShowDelay=\"500\"\r\n            [matTooltip]=\"predefinedCatalog.url\"\r\n            [value]=\"predefinedCatalog\"\r\n          >\r\n            {{ predefinedCatalog.url }}\r\n          </mat-option>\r\n        </mat-autocomplete>\r\n      </mat-form-field>\r\n    </div>\r\n    <div class=\"igo-input-container\">\r\n      <mat-form-field>\r\n        <mat-select formControlName=\"type\" placeholder=\"Type\">\r\n          <mat-option\r\n            *ngFor=\"let type of typeCapabilities\"\r\n            [value]=\"type\"\r\n            (click)=\"$event.stopPropagation()\"\r\n          >\r\n            <p matListItemTitle>{{ type }}</p>\r\n          </mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </div>\r\n  </form>\r\n  <span *ngIf=\"error && addedCatalog && emailAddress\">\r\n    <p class=\"error\">\r\n      {{\r\n        languageService.translate.instant(\r\n          'igo.geo.catalog.externalProvider.unavailableWithEmail',\r\n          { value: addedCatalog.url, email: emailAddress }\r\n        )\r\n      }}\r\n    </p>\r\n  </span>\r\n  <span *ngIf=\"error && addedCatalog && !emailAddress\">\r\n    <p class=\"error\">\r\n      {{\r\n        languageService.translate.instant('igo.geo.catalog.unavailable', {\r\n          value: addedCatalog.url\r\n        })\r\n      }}\r\n    </p>\r\n  </span>\r\n</div>\r\n<div mat-dialog-actions style=\"justify-content: center\">\r\n  <div class=\"igo-form-button-group add-catalog-button-top-padding\">\r\n    <button mat-raised-button type=\"button\" (click)=\"cancel()\">\r\n      {{ 'igo.geo.catalog.library.cancel' | translate }}\r\n    </button>\r\n    <button\r\n      id=\"addCatalogBtnDialog\"\r\n      mat-raised-button\r\n      type=\"button\"\r\n      color=\"primary\"\r\n      [disabled]=\"!form.valid\"\r\n      (click)=\"addCatalog(form.value)\"\r\n    >\r\n      {{ 'igo.geo.catalog.library.add' | translate }}\r\n    </button>\r\n  </div>\r\n</div>\r\n", styles: ["mat-form-field{width:100%}.add-catalog-button-top-padding{padding-top:25px}.igo-form{padding:10px 5px 5px}.igo-form-button-group{text-align:center}button{cursor:pointer}button#addCatalogBtnDialog[disabled=true]{cursor:default;background-color:#0000001f;color:#00000042}.error{color:red}\n"], dependencies: [{ kind: "directive", type: 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.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: "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: "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: 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: "component", type: i6$4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { 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: MatOptionModule }, { 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: 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: "ngmodule", type: MatListModule }, { kind: "directive", type: i2$5.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: "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: AddCatalogDialogComponent, isStandalone: true, selector: "igo-add-catalog-dialog", ngImport: i0, template: "<h1 mat-dialog-title class=\"mat-typography\">\n  {{ 'igo.geo.catalog.library.addTitle' | translate }}\n</h1>\n<div mat-dialog-content class=\"mat-typography\">\n  <form class=\"igo-form\" [formGroup]=\"form\">\n    <div class=\"igo-input-container\">\n      <mat-form-field>\n        <input\n          type=\"text\"\n          formControlName=\"title\"\n          placeholder=\"{{ 'igo.geo.printForm.title' | translate }}\"\n          matInput\n          [matAutocomplete]=\"auto2\"\n        />\n        <mat-autocomplete\n          #auto2=\"matAutocomplete\"\n          (optionSelected)=\"changeUrlOrTitle($event.option.value)\"\n        >\n          <mat-option\n            *ngFor=\"let predefinedCatalog of predefinedCatalogsList$ | async\"\n            matTooltipShowDelay=\"500\"\n            [matTooltip]=\"predefinedCatalog.title\"\n            [value]=\"predefinedCatalog\"\n          >\n            {{ predefinedCatalog.title }}\n          </mat-option>\n        </mat-autocomplete>\n      </mat-form-field>\n    </div>\n    <div class=\"igo-input-container\">\n      <mat-form-field>\n        <input\n          type=\"text\"\n          formControlName=\"url\"\n          placeholder=\"URL\"\n          matInput\n          [matAutocomplete]=\"auto\"\n        />\n        <mat-autocomplete\n          #auto=\"matAutocomplete\"\n          (optionSelected)=\"changeUrlOrTitle($event.option.value)\"\n        >\n          <mat-option\n            *ngFor=\"let predefinedCatalog of predefinedCatalogsList$ | async\"\n            matTooltipShowDelay=\"500\"\n            [matTooltip]=\"predefinedCatalog.url\"\n            [value]=\"predefinedCatalog\"\n          >\n            {{ predefinedCatalog.url }}\n          </mat-option>\n        </mat-autocomplete>\n      </mat-form-field>\n    </div>\n    <div class=\"igo-input-container\">\n      <mat-form-field>\n        <mat-select formControlName=\"type\" placeholder=\"Type\">\n          <mat-option\n            *ngFor=\"let type of typeCapabilities\"\n            [value]=\"type\"\n            (click)=\"$event.stopPropagation()\"\n          >\n            <p matListItemTitle>{{ type }}</p>\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n    </div>\n  </form>\n  <span *ngIf=\"error && addedCatalog && emailAddress\">\n    <p class=\"error\">\n      {{\n        languageService.translate.instant(\n          'igo.geo.catalog.externalProvider.unavailableWithEmail',\n          { value: addedCatalog.url, email: emailAddress }\n        )\n      }}\n    </p>\n  </span>\n  <span *ngIf=\"error && addedCatalog && !emailAddress\">\n    <p class=\"error\">\n      {{\n        languageService.translate.instant('igo.geo.catalog.unavailable', {\n          value: addedCatalog.url\n        })\n      }}\n    </p>\n  </span>\n</div>\n<div mat-dialog-actions style=\"justify-content: center\">\n  <div class=\"igo-form-button-group add-catalog-button-top-padding\">\n    <button mat-raised-button type=\"button\" (click)=\"cancel()\">\n      {{ 'igo.geo.catalog.library.cancel' | translate }}\n    </button>\n    <button\n      id=\"addCatalogBtnDialog\"\n      mat-raised-button\n      type=\"button\"\n      color=\"primary\"\n      [disabled]=\"!form.valid\"\n      (click)=\"addCatalog(form.value)\"\n    >\n      {{ 'igo.geo.catalog.library.add' | translate }}\n    </button>\n  </div>\n</div>\n", styles: ["mat-form-field{width:100%}.add-catalog-button-top-padding{padding-top:25px}.igo-form{padding:10px 5px 5px}.igo-form-button-group{text-align:center}button{cursor:pointer}button#addCatalogBtnDialog[disabled=true]{cursor:default;background-color:#0000001f;color:#00000042}.error{color:red}\n"], dependencies: [{ kind: "directive", type: 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.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: "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: "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: 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: "component", type: i6$4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { 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: MatOptionModule }, { 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: 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: "ngmodule", type: MatListModule }, { kind: "directive", type: i2$5.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: "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: AddCatalogDialogComponent, decorators: [{
             type: Component,
@@ -38547,7 +38554,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                         MatButtonModule,
                         AsyncPipe,
                         TranslateModule
-                    ], template: "<h1 mat-dialog-title class=\"mat-typography\">\r\n  {{ 'igo.geo.catalog.library.addTitle' | translate }}\r\n</h1>\r\n<div mat-dialog-content class=\"mat-typography\">\r\n  <form class=\"igo-form\" [formGroup]=\"form\">\r\n    <div class=\"igo-input-container\">\r\n      <mat-form-field>\r\n        <input\r\n          type=\"text\"\r\n          formControlName=\"title\"\r\n          placeholder=\"{{ 'igo.geo.printForm.title' | translate }}\"\r\n          matInput\r\n          [matAutocomplete]=\"auto2\"\r\n        />\r\n        <mat-autocomplete\r\n          #auto2=\"matAutocomplete\"\r\n          (optionSelected)=\"changeUrlOrTitle($event.option.value)\"\r\n        >\r\n          <mat-option\r\n            *ngFor=\"let predefinedCatalog of predefinedCatalogsList$ | async\"\r\n            matTooltipShowDelay=\"500\"\r\n            [matTooltip]=\"predefinedCatalog.title\"\r\n            [value]=\"predefinedCatalog\"\r\n          >\r\n            {{ predefinedCatalog.title }}\r\n          </mat-option>\r\n        </mat-autocomplete>\r\n      </mat-form-field>\r\n    </div>\r\n    <div class=\"igo-input-container\">\r\n      <mat-form-field>\r\n        <input\r\n          type=\"text\"\r\n          formControlName=\"url\"\r\n          placeholder=\"URL\"\r\n          matInput\r\n          [matAutocomplete]=\"auto\"\r\n        />\r\n        <mat-autocomplete\r\n          #auto=\"matAutocomplete\"\r\n          (optionSelected)=\"changeUrlOrTitle($event.option.value)\"\r\n        >\r\n          <mat-option\r\n            *ngFor=\"let predefinedCatalog of predefinedCatalogsList$ | async\"\r\n            matTooltipShowDelay=\"500\"\r\n            [matTooltip]=\"predefinedCatalog.url\"\r\n            [value]=\"predefinedCatalog\"\r\n          >\r\n            {{ predefinedCatalog.url }}\r\n          </mat-option>\r\n        </mat-autocomplete>\r\n      </mat-form-field>\r\n    </div>\r\n    <div class=\"igo-input-container\">\r\n      <mat-form-field>\r\n        <mat-select formControlName=\"type\" placeholder=\"Type\">\r\n          <mat-option\r\n            *ngFor=\"let type of typeCapabilities\"\r\n            [value]=\"type\"\r\n            (click)=\"$event.stopPropagation()\"\r\n          >\r\n            <p matListItemTitle>{{ type }}</p>\r\n          </mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </div>\r\n  </form>\r\n  <span *ngIf=\"error && addedCatalog && emailAddress\">\r\n    <p class=\"error\">\r\n      {{\r\n        languageService.translate.instant(\r\n          'igo.geo.catalog.externalProvider.unavailableWithEmail',\r\n          { value: addedCatalog.url, email: emailAddress }\r\n        )\r\n      }}\r\n    </p>\r\n  </span>\r\n  <span *ngIf=\"error && addedCatalog && !emailAddress\">\r\n    <p class=\"error\">\r\n      {{\r\n        languageService.translate.instant('igo.geo.catalog.unavailable', {\r\n          value: addedCatalog.url\r\n        })\r\n      }}\r\n    </p>\r\n  </span>\r\n</div>\r\n<div mat-dialog-actions style=\"justify-content: center\">\r\n  <div class=\"igo-form-button-group add-catalog-button-top-padding\">\r\n    <button mat-raised-button type=\"button\" (click)=\"cancel()\">\r\n      {{ 'igo.geo.catalog.library.cancel' | translate }}\r\n    </button>\r\n    <button\r\n      id=\"addCatalogBtnDialog\"\r\n      mat-raised-button\r\n      type=\"button\"\r\n      color=\"primary\"\r\n      [disabled]=\"!form.valid\"\r\n      (click)=\"addCatalog(form.value)\"\r\n    >\r\n      {{ 'igo.geo.catalog.library.add' | translate }}\r\n    </button>\r\n  </div>\r\n</div>\r\n", styles: ["mat-form-field{width:100%}.add-catalog-button-top-padding{padding-top:25px}.igo-form{padding:10px 5px 5px}.igo-form-button-group{text-align:center}button{cursor:pointer}button#addCatalogBtnDialog[disabled=true]{cursor:default;background-color:#0000001f;color:#00000042}.error{color:red}\n"] }]
+                    ], template: "<h1 mat-dialog-title class=\"mat-typography\">\n  {{ 'igo.geo.catalog.library.addTitle' | translate }}\n</h1>\n<div mat-dialog-content class=\"mat-typography\">\n  <form class=\"igo-form\" [formGroup]=\"form\">\n    <div class=\"igo-input-container\">\n      <mat-form-field>\n        <input\n          type=\"text\"\n          formControlName=\"title\"\n          placeholder=\"{{ 'igo.geo.printForm.title' | translate }}\"\n          matInput\n          [matAutocomplete]=\"auto2\"\n        />\n        <mat-autocomplete\n          #auto2=\"matAutocomplete\"\n          (optionSelected)=\"changeUrlOrTitle($event.option.value)\"\n        >\n          <mat-option\n            *ngFor=\"let predefinedCatalog of predefinedCatalogsList$ | async\"\n            matTooltipShowDelay=\"500\"\n            [matTooltip]=\"predefinedCatalog.title\"\n            [value]=\"predefinedCatalog\"\n          >\n            {{ predefinedCatalog.title }}\n          </mat-option>\n        </mat-autocomplete>\n      </mat-form-field>\n    </div>\n    <div class=\"igo-input-container\">\n      <mat-form-field>\n        <input\n          type=\"text\"\n          formControlName=\"url\"\n          placeholder=\"URL\"\n          matInput\n          [matAutocomplete]=\"auto\"\n        />\n        <mat-autocomplete\n          #auto=\"matAutocomplete\"\n          (optionSelected)=\"changeUrlOrTitle($event.option.value)\"\n        >\n          <mat-option\n            *ngFor=\"let predefinedCatalog of predefinedCatalogsList$ | async\"\n            matTooltipShowDelay=\"500\"\n            [matTooltip]=\"predefinedCatalog.url\"\n            [value]=\"predefinedCatalog\"\n          >\n            {{ predefinedCatalog.url }}\n          </mat-option>\n        </mat-autocomplete>\n      </mat-form-field>\n    </div>\n    <div class=\"igo-input-container\">\n      <mat-form-field>\n        <mat-select formControlName=\"type\" placeholder=\"Type\">\n          <mat-option\n            *ngFor=\"let type of typeCapabilities\"\n            [value]=\"type\"\n            (click)=\"$event.stopPropagation()\"\n          >\n            <p matListItemTitle>{{ type }}</p>\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n    </div>\n  </form>\n  <span *ngIf=\"error && addedCatalog && emailAddress\">\n    <p class=\"error\">\n      {{\n        languageService.translate.instant(\n          'igo.geo.catalog.externalProvider.unavailableWithEmail',\n          { value: addedCatalog.url, email: emailAddress }\n        )\n      }}\n    </p>\n  </span>\n  <span *ngIf=\"error && addedCatalog && !emailAddress\">\n    <p class=\"error\">\n      {{\n        languageService.translate.instant('igo.geo.catalog.unavailable', {\n          value: addedCatalog.url\n        })\n      }}\n    </p>\n  </span>\n</div>\n<div mat-dialog-actions style=\"justify-content: center\">\n  <div class=\"igo-form-button-group add-catalog-button-top-padding\">\n    <button mat-raised-button type=\"button\" (click)=\"cancel()\">\n      {{ 'igo.geo.catalog.library.cancel' | translate }}\n    </button>\n    <button\n      id=\"addCatalogBtnDialog\"\n      mat-raised-button\n      type=\"button\"\n      color=\"primary\"\n      [disabled]=\"!form.valid\"\n      (click)=\"addCatalog(form.value)\"\n    >\n      {{ 'igo.geo.catalog.library.add' | translate }}\n    </button>\n  </div>\n</div>\n", styles: ["mat-form-field{width:100%}.add-catalog-button-top-padding{padding-top:25px}.igo-form{padding:10px 5px 5px}.igo-form-button-group{text-align:center}button{cursor:pointer}button#addCatalogBtnDialog[disabled=true]{cursor:default;background-color:#0000001f;color:#00000042}.error{color:red}\n"] }]
         }], ctorParameters: () => [{ type: i1$6.UntypedFormBuilder }, { type: i1$2.LanguageService }, { type: i1.ConfigService }, { type: i1$5.MatDialogRef }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -38579,7 +38586,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>\r\n  <span matListItemTitle>\r\n    {{ title }}\r\n  </span>\r\n  <div matListItemMeta>\r\n    <mat-icon\r\n      *ngIf=\"catalog.externalProvider\"\r\n      matListItemIcon\r\n      class=\"igo-external-provider\"\r\n      tooltip-position=\"below\"\r\n      matTooltipShowDelay=\"500\"\r\n      [matTooltip]=\"'igo.geo.catalog.externalProvider.catalog' | translate\"\r\n      color=\"primary\"\r\n      (click)=\"$event.stopPropagation()\"\r\n      svgIcon=\"earth-arrow-right\"\r\n    >\r\n    </mat-icon>\r\n    <button\r\n      *ngIf=\"catalog.removable\"\r\n      mat-icon-button\r\n      tooltip-position=\"below\"\r\n      matTooltipShowDelay=\"500\"\r\n      [matTooltip]=\"'igo.geo.catalog.library.remove' | translate\"\r\n      color=\"warn\"\r\n      (click)=\"removeCatalogFromLibrary($event)\"\r\n    >\r\n      <mat-icon svgIcon=\"delete\"></mat-icon>\r\n    </button>\r\n\r\n    <button\r\n      class=\"igo-blank\"\r\n      *ngIf=\"!catalog.removable\"\r\n      disabled=\"true\"\r\n      mat-icon-button\r\n    >\r\n      <mat-icon svgIcon=\"blank\"></mat-icon>\r\n    </button>\r\n  </div>\r\n</mat-list-item>\r\n", styles: [".igo-blank{cursor:pointer}.igo-external-provider{cursor:help}\n"], dependencies: [{ kind: "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      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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CatalogLibaryItemComponent, decorators: [{
             type: Component,
@@ -38590,7 +38597,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                         MatTooltipModule,
                         MatButtonModule,
                         TranslateModule
-                    ], template: "<mat-list-item>\r\n  <span matListItemTitle>\r\n    {{ title }}\r\n  </span>\r\n  <div matListItemMeta>\r\n    <mat-icon\r\n      *ngIf=\"catalog.externalProvider\"\r\n      matListItemIcon\r\n      class=\"igo-external-provider\"\r\n      tooltip-position=\"below\"\r\n      matTooltipShowDelay=\"500\"\r\n      [matTooltip]=\"'igo.geo.catalog.externalProvider.catalog' | translate\"\r\n      color=\"primary\"\r\n      (click)=\"$event.stopPropagation()\"\r\n      svgIcon=\"earth-arrow-right\"\r\n    >\r\n    </mat-icon>\r\n    <button\r\n      *ngIf=\"catalog.removable\"\r\n      mat-icon-button\r\n      tooltip-position=\"below\"\r\n      matTooltipShowDelay=\"500\"\r\n      [matTooltip]=\"'igo.geo.catalog.library.remove' | translate\"\r\n      color=\"warn\"\r\n      (click)=\"removeCatalogFromLibrary($event)\"\r\n    >\r\n      <mat-icon svgIcon=\"delete\"></mat-icon>\r\n    </button>\r\n\r\n    <button\r\n      class=\"igo-blank\"\r\n      *ngIf=\"!catalog.removable\"\r\n      disabled=\"true\"\r\n      mat-icon-button\r\n    >\r\n      <mat-icon svgIcon=\"blank\"></mat-icon>\r\n    </button>\r\n  </div>\r\n</mat-list-item>\r\n", styles: [".igo-blank{cursor:pointer}.igo-external-provider{cursor:help}\n"] }]
+                    ], 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"] }]
         }], propDecorators: { catalog: [{
                 type: Input
             }], map: [{
@@ -38760,7 +38767,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\">\r\n  <ng-template ngFor let-catalog [ngForOf]=\"getCatalogs() | async\">\r\n    <igo-catalog-library-item\r\n      igoListItem\r\n      color=\"accent\"\r\n      [map]=\"map\"\r\n      [catalog]=\"catalog\"\r\n      (catalogRemove)=\"onCatalogRemove(catalog)\"\r\n      (select)=\"onCatalogSelect(catalog)\"\r\n    >\r\n    </igo-catalog-library-item>\r\n  </ng-template>\r\n</igo-list>\r\n\r\n<div *ngIf=\"addCatalogAllowed\" class=\"btnAddCatalog\">\r\n  <button\r\n    mat-raised-button\r\n    [matTooltip]=\"'igo.geo.catalog.library.addBtn' | translate\"\r\n    matTooltipPosition=\"above\"\r\n    color=\"primary\"\r\n    (click)=\"addCatalogDialog()\"\r\n  >\r\n    {{ 'igo.geo.catalog.library.addBtn' | translate }}\r\n    <mat-icon svgIcon=\"earth-plus\"></mat-icon>\r\n  </button>\r\n</div>\r\n", styles: [":host igo-list{height:auto}:host .btnAddCatalog{justify-content:center;display:flex;margin:30px 0}\n"], dependencies: [{ kind: "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 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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CatalogLibaryComponent, decorators: [{
             type: Component,
@@ -38775,7 +38782,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                         MatIconModule,
                         AsyncPipe,
                         TranslateModule
-                    ], template: "<igo-list [navigation]=\"false\">\r\n  <ng-template ngFor let-catalog [ngForOf]=\"getCatalogs() | async\">\r\n    <igo-catalog-library-item\r\n      igoListItem\r\n      color=\"accent\"\r\n      [map]=\"map\"\r\n      [catalog]=\"catalog\"\r\n      (catalogRemove)=\"onCatalogRemove(catalog)\"\r\n      (select)=\"onCatalogSelect(catalog)\"\r\n    >\r\n    </igo-catalog-library-item>\r\n  </ng-template>\r\n</igo-list>\r\n\r\n<div *ngIf=\"addCatalogAllowed\" class=\"btnAddCatalog\">\r\n  <button\r\n    mat-raised-button\r\n    [matTooltip]=\"'igo.geo.catalog.library.addBtn' | translate\"\r\n    matTooltipPosition=\"above\"\r\n    color=\"primary\"\r\n    (click)=\"addCatalogDialog()\"\r\n  >\r\n    {{ 'igo.geo.catalog.library.addBtn' | translate }}\r\n    <mat-icon svgIcon=\"earth-plus\"></mat-icon>\r\n  </button>\r\n</div>\r\n", styles: [":host igo-list{height:auto}:host .btnAddCatalog{justify-content:center;display:flex;margin:30px 0}\n"] }]
+                    ], 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"] }]
         }], ctorParameters: () => [{ type: CapabilitiesService }, { type: i2$3.MessageService }, { type: i3$2.StorageService }, { type: i1$5.MatDialog }], propDecorators: { store: [{
                 type: Input
             }], map: [{
@@ -39000,7 +39007,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\r\n  [formControl]=\"formControl\"\r\n  [map]=\"map\"\r\n  [geometryType]=\"geometryType$ | async\"\r\n  [drawGuide]=\"drawGuide$ | async\"\r\n  [measure]=\"measure\"\r\n  [drawControlIsActive]=\"drawControlIsActive\"\r\n  [freehandDrawIsActive]=\"freehandDrawIsActive\"\r\n  [controlOptions]=\"controlOptions\"\r\n  [drawStyle]=\"drawStyle\"\r\n  [overlayStyle]=\"overlayStyle\"\r\n>\r\n</igo-geometry-form-field-input>\r\n\r\n<div *ngIf=\"geometryTypeField\" class=\"geometry-type-toggle\">\r\n  <mat-button-toggle-group\r\n    [disabled]=\"(value$ | async) !== undefined\"\r\n    [(ngModel)]=\"geometryType\"\r\n  >\r\n    <mat-button-toggle\r\n      value=\"Point\"\r\n      [disabled]=\"geometryTypes.indexOf('Point') < 0\"\r\n    >\r\n      {{ 'igo.geo.geometry.point' | translate }}\r\n    </mat-button-toggle>\r\n    <mat-button-toggle\r\n      value=\"LineString\"\r\n      [disabled]=\"geometryTypes.indexOf('LineString') < 0\"\r\n    >\r\n      {{ 'igo.geo.geometry.line' | translate }}\r\n    </mat-button-toggle>\r\n    <mat-button-toggle\r\n      value=\"Polygon\"\r\n      [disabled]=\"geometryTypes.indexOf('Polygon') < 0\"\r\n    >\r\n      {{ 'igo.geo.geometry.polygon' | translate }}\r\n    </mat-button-toggle>\r\n  </mat-button-toggle-group>\r\n</div>\r\n\r\n<mat-form-field *ngIf=\"drawGuideField\" class=\"draw-guide-field\">\r\n  <input\r\n    matInput\r\n    type=\"number\"\r\n    [placeholder]=\"drawGuidePlaceholder\"\r\n    [(ngModel)]=\"drawGuide\"\r\n  />\r\n  <mat-icon matPrefix [color]=\"'primary'\" svgIcon=\"adjust\"> </mat-icon>\r\n  <span matSuffix class=\"draw-guide-units\">{{\r\n    'igo.geo.measure.meters' | translate\r\n  }}</span>\r\n</mat-form-field>\r\n", styles: [":host{display:block;width:100%}.geometry-type-toggle,.draw-guide-field{width:100%}.geometry-type-toggle{padding:10px;text-align:center}.draw-guide-field mat-icon{margin:0 10px}.draw-guide-units{padding:10px}\n"], dependencies: [{ kind: "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'\" 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 });
 };
 GeometryFormFieldComponent = __decorate([
     IgoFormFieldComponent('geometry'),
@@ -39019,7 +39026,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                         MatIconModule,
                         AsyncPipe,
                         TranslateModule
-                    ], template: "<igo-geometry-form-field-input\r\n  [formControl]=\"formControl\"\r\n  [map]=\"map\"\r\n  [geometryType]=\"geometryType$ | async\"\r\n  [drawGuide]=\"drawGuide$ | async\"\r\n  [measure]=\"measure\"\r\n  [drawControlIsActive]=\"drawControlIsActive\"\r\n  [freehandDrawIsActive]=\"freehandDrawIsActive\"\r\n  [controlOptions]=\"controlOptions\"\r\n  [drawStyle]=\"drawStyle\"\r\n  [overlayStyle]=\"overlayStyle\"\r\n>\r\n</igo-geometry-form-field-input>\r\n\r\n<div *ngIf=\"geometryTypeField\" class=\"geometry-type-toggle\">\r\n  <mat-button-toggle-group\r\n    [disabled]=\"(value$ | async) !== undefined\"\r\n    [(ngModel)]=\"geometryType\"\r\n  >\r\n    <mat-button-toggle\r\n      value=\"Point\"\r\n      [disabled]=\"geometryTypes.indexOf('Point') < 0\"\r\n    >\r\n      {{ 'igo.geo.geometry.point' | translate }}\r\n    </mat-button-toggle>\r\n    <mat-button-toggle\r\n      value=\"LineString\"\r\n      [disabled]=\"geometryTypes.indexOf('LineString') < 0\"\r\n    >\r\n      {{ 'igo.geo.geometry.line' | translate }}\r\n    </mat-button-toggle>\r\n    <mat-button-toggle\r\n      value=\"Polygon\"\r\n      [disabled]=\"geometryTypes.indexOf('Polygon') < 0\"\r\n    >\r\n      {{ 'igo.geo.geometry.polygon' | translate }}\r\n    </mat-button-toggle>\r\n  </mat-button-toggle-group>\r\n</div>\r\n\r\n<mat-form-field *ngIf=\"drawGuideField\" class=\"draw-guide-field\">\r\n  <input\r\n    matInput\r\n    type=\"number\"\r\n    [placeholder]=\"drawGuidePlaceholder\"\r\n    [(ngModel)]=\"drawGuide\"\r\n  />\r\n  <mat-icon matPrefix [color]=\"'primary'\" svgIcon=\"adjust\"> </mat-icon>\r\n  <span matSuffix class=\"draw-guide-units\">{{\r\n    'igo.geo.measure.meters' | translate\r\n  }}</span>\r\n</mat-form-field>\r\n", styles: [":host{display:block;width:100%}.geometry-type-toggle,.draw-guide-field{width:100%}.geometry-type-toggle{padding:10px;text-align:center}.draw-guide-field mat-icon{margin:0 10px}.draw-guide-units{padding:10px}\n"] }]
+                    ], 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"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { formControl: [{
                 type: Input
             }], map: [{
@@ -39415,7 +39422,7 @@ class PrintFormComponent {
         this.commentField.updateValueAndValidity();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: PrintFormComponent, deps: [{ token: i1$6.UntypedFormBuilder }, { token: i2$1.MediaService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: PrintFormComponent, isStandalone: true, selector: "igo-print-form", inputs: { disabled$: "disabled$", imageFormat: "imageFormat", outputFormat: "outputFormat", paperFormat: "paperFormat", orientation: "orientation", resolution: "resolution", legendPosition: "legendPosition", title: "title", subtitle: "subtitle", comment: "comment", showProjection: "showProjection", showScale: "showScale", showLegend: "showLegend", doZipFile: "doZipFile" }, outputs: { submit: "submit" }, ngImport: i0, template: "<form class=\"igo-form\" [formGroup]=\"form\">\r\n  <div class=\"igo-input-container\">\r\n    <mat-form-field>\r\n      <mat-label>{{ 'igo.geo.printForm.title' | translate }}</mat-label>\r\n      <input\r\n        matInput\r\n        formControlName=\"title\"\r\n        placeholder=\"{{ 'igo.geo.printForm.title' | translate }}\"\r\n      />\r\n      <mat-error *ngIf=\"titleField.errors?.maxlength\">{{\r\n        'igo.geo.formValidation.maxLength'\r\n          | translate\r\n            : {\r\n                column: 'igo.geo.printForm.title' | translate,\r\n                value: 130\r\n              }\r\n      }}</mat-error>\r\n    </mat-form-field>\r\n  </div>\r\n  <div class=\"igo-input-container\">\r\n    <mat-form-field>\r\n      <mat-label>{{ 'igo.geo.printForm.subtitle' | translate }}</mat-label>\r\n      <input\r\n        matInput\r\n        formControlName=\"subtitle\"\r\n        placeholder=\"{{ 'igo.geo.printForm.subtitle' | translate }}\"\r\n      />\r\n      <mat-error *ngIf=\"subtitleField.errors?.maxlength\">{{\r\n        'igo.geo.formValidation.maxLength'\r\n          | translate\r\n            : {\r\n                column: 'igo.geo.printForm.subtitle' | translate,\r\n                value: 120\r\n              }\r\n      }}</mat-error>\r\n    </mat-form-field>\r\n  </div>\r\n  <div class=\"igo-input-container\">\r\n    <mat-form-field>\r\n      <mat-label>{{ 'igo.geo.printForm.comment' | translate }}</mat-label>\r\n      <input\r\n        matInput\r\n        formControlName=\"comment\"\r\n        placeholder=\"{{ 'igo.geo.printForm.comment' | translate }}\"\r\n      />\r\n      <mat-error *ngIf=\"commentField.errors?.maxlength\">{{\r\n        'igo.geo.formValidation.maxLength'\r\n          | translate\r\n            : {\r\n                column: 'igo.geo.printForm.comment' | translate,\r\n                value: maxLength\r\n              }\r\n      }}</mat-error>\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <div class=\"igo-input-container slide-toggle-container\">\r\n    <div class=\"print-slide-toggle-container\">\r\n      <mat-slide-toggle\r\n        class=\"print-option\"\r\n        formControlName=\"showProjection\"\r\n        [labelPosition]=\"'before'\"\r\n      >\r\n        {{ 'igo.geo.printForm.showProjection' | translate }}\r\n      </mat-slide-toggle>\r\n      <mat-slide-toggle\r\n        class=\"print-option\"\r\n        formControlName=\"showScale\"\r\n        [labelPosition]=\"'before'\"\r\n      >\r\n        {{ 'igo.geo.printForm.showScale' | translate }}\r\n      </mat-slide-toggle>\r\n      <mat-slide-toggle\r\n        class=\"print-option\"\r\n        formControlName=\"doZipFile\"\r\n        [labelPosition]=\"'before'\"\r\n        [style.display]=\"isPrintService ? 'none' : ''\"\r\n      >\r\n        {{ 'igo.geo.printForm.doZipFile' | translate }}\r\n      </mat-slide-toggle>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"igo-input-container\">\r\n    <mat-form-field>\r\n      <mat-label>{{\r\n        'igo.geo.printForm.legendPosition' | translate\r\n      }}</mat-label>\r\n      <mat-select\r\n        formControlName=\"legendPosition\"\r\n        placeholder=\"{{ 'igo.geo.printForm.legendPosition' | translate }}\"\r\n      >\r\n        <mat-option\r\n          *ngFor=\"let legendPosition of legendPositions | keyvalue\"\r\n          [value]=\"legendPosition.key\"\r\n        >\r\n          <ng-container\r\n            *ngIf=\"!['newpage', 'newimage'].includes(legendPosition.value)\"\r\n          >\r\n            {{\r\n              'igo.geo.printForm.legendPositions.' + legendPosition.value\r\n                | translate\r\n            }}\r\n          </ng-container>\r\n\r\n          <ng-container\r\n            *ngIf=\"['newpage', 'newimage'].includes(legendPosition.value)\"\r\n          >\r\n            {{\r\n              (outputFormat === 'Pdf'\r\n                ? 'igo.geo.printForm.legendPositions.newpage'\r\n                : 'igo.geo.printForm.legendPositions.newimage'\r\n              ) | translate\r\n            }}\r\n          </ng-container>\r\n        </mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <div class=\"igo-input-container\">\r\n    <mat-form-field>\r\n      <mat-label>{{ 'igo.geo.printForm.outputFormat' | translate }}</mat-label>\r\n      <mat-select\r\n        (selectionChange)=\"toggleImageSaveProp()\"\r\n        formControlName=\"outputFormat\"\r\n        placeholder=\"{{ 'igo.geo.printForm.outputFormat' | translate }}\"\r\n      >\r\n        <mat-option\r\n          *ngFor=\"let outputFormat of outputFormats | keyvalue\"\r\n          [value]=\"outputFormat.key\"\r\n        >\r\n          {{ outputFormat.value }}\r\n        </mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <div\r\n    class=\"igo-input-container\"\r\n    [style.display]=\"isPrintService ? 'block' : 'none'\"\r\n  >\r\n    <mat-form-field>\r\n      <mat-label>{{ 'igo.geo.printForm.paperFormat' | translate }}</mat-label>\r\n      <mat-select\r\n        (selectionChange)=\"changeCommentLength()\"\r\n        formControlName=\"paperFormat\"\r\n        placeholder=\"{{ 'igo.geo.printForm.paperFormat' | translate }}\"\r\n      >\r\n        <mat-option\r\n          *ngFor=\"let paperFormat of paperFormats | keyvalue\"\r\n          [value]=\"paperFormat.key\"\r\n        >\r\n          {{\r\n            'igo.geo.printForm.paperFormats.' + paperFormat.value | translate\r\n          }}\r\n        </mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <div\r\n    class=\"igo-input-container\"\r\n    [style.display]=\"isPrintService ? 'none' : 'block'\"\r\n  >\r\n    <mat-form-field>\r\n      <mat-label>{{ 'igo.geo.printForm.imageFormat' | translate }}</mat-label>\r\n      <mat-select\r\n        formControlName=\"imageFormat\"\r\n        placeholder=\"{{ 'igo.geo.printForm.imageFormat' | translate }}\"\r\n      >\r\n        <mat-option\r\n          *ngFor=\"let imageFormat of imageFormats | keyvalue\"\r\n          [value]=\"imageFormat.key\"\r\n        >\r\n          {{ imageFormat.value }}\r\n        </mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <div class=\"igo-input-container\">\r\n    <mat-form-field>\r\n      <mat-label\r\n        >{{ 'igo.geo.printForm.resolution' | translate }} ({{\r\n          'igo.geo.printForm.resolutionUnit' | translate\r\n        }})</mat-label\r\n      >\r\n      <mat-select\r\n        formControlName=\"resolution\"\r\n        placeholder=\"{{ 'igo.geo.printForm.resolution' | translate }}\"\r\n      >\r\n        <mat-option *ngFor=\"let resolution of resolutions\" [value]=\"resolution\">\r\n          {{ resolution }}\r\n        </mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <div\r\n    class=\"igo-input-container\"\r\n    [style.display]=\"isPrintService ? 'block' : 'none'\"\r\n  >\r\n    <mat-form-field>\r\n      <mat-label>{{ 'igo.geo.printForm.orientation' | translate }}</mat-label>\r\n      <mat-select\r\n        (selectionChange)=\"changeCommentLength()\"\r\n        formControlName=\"orientation\"\r\n        placeholder=\"{{ 'igo.geo.printForm.orientation' | translate }}\"\r\n      >\r\n        <mat-option\r\n          *ngFor=\"let orientation of orientations | keyvalue\"\r\n          [value]=\"orientation.key\"\r\n        >\r\n          {{ 'igo.geo.printForm.' + orientation.value | translate }}\r\n        </mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <div class=\"igo-form-button-group print-button-top-padding\">\r\n    <button\r\n      mat-raised-button\r\n      type=\"button\"\r\n      [disabled]=\"!form.valid || (disabled$ | async)\"\r\n      (click)=\"handleFormSubmit(form.value, form.valid)\"\r\n    >\r\n      {{ 'igo.geo.printForm.saveBtn' | translate }}\r\n    </button>\r\n  </div>\r\n</form>\r\n", styles: [":host mat-form-field{width:100%}:host .slide-toggle-container{margin-bottom:16px}:host .print-slide-toggle-container mat-slide-toggle{width:100%;padding:0 8px}:host .print-slide-toggle-container mat-slide-toggle ::ng-deep .mdc-form-field{width:100%}:host .print-slide-toggle-container mat-slide-toggle ::ng-deep .mdc-label{margin-left:0;width:calc(100% - 60px)}:host .print-option{display:block;margin-bottom:12px}:host .igo-form{padding:10px 5px 5px}:host .igo-form-button-group{text-align:center}\n"], dependencies: [{ kind: "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: "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: "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.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { 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: "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: 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: 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: "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: PrintFormComponent, isStandalone: true, selector: "igo-print-form", inputs: { disabled$: "disabled$", imageFormat: "imageFormat", outputFormat: "outputFormat", paperFormat: "paperFormat", orientation: "orientation", resolution: "resolution", legendPosition: "legendPosition", title: "title", subtitle: "subtitle", comment: "comment", showProjection: "showProjection", showScale: "showScale", showLegend: "showLegend", doZipFile: "doZipFile" }, outputs: { submit: "submit" }, ngImport: i0, template: "<form class=\"igo-form\" [formGroup]=\"form\">\n  <div class=\"igo-input-container\">\n    <mat-form-field>\n      <mat-label>{{ 'igo.geo.printForm.title' | translate }}</mat-label>\n      <input\n        matInput\n        formControlName=\"title\"\n        placeholder=\"{{ 'igo.geo.printForm.title' | translate }}\"\n      />\n      <mat-error *ngIf=\"titleField.errors?.maxlength\">{{\n        'igo.geo.formValidation.maxLength'\n          | translate\n            : {\n                column: 'igo.geo.printForm.title' | translate,\n                value: 130\n              }\n      }}</mat-error>\n    </mat-form-field>\n  </div>\n  <div class=\"igo-input-container\">\n    <mat-form-field>\n      <mat-label>{{ 'igo.geo.printForm.subtitle' | translate }}</mat-label>\n      <input\n        matInput\n        formControlName=\"subtitle\"\n        placeholder=\"{{ 'igo.geo.printForm.subtitle' | translate }}\"\n      />\n      <mat-error *ngIf=\"subtitleField.errors?.maxlength\">{{\n        'igo.geo.formValidation.maxLength'\n          | translate\n            : {\n                column: 'igo.geo.printForm.subtitle' | translate,\n                value: 120\n              }\n      }}</mat-error>\n    </mat-form-field>\n  </div>\n  <div class=\"igo-input-container\">\n    <mat-form-field>\n      <mat-label>{{ 'igo.geo.printForm.comment' | translate }}</mat-label>\n      <input\n        matInput\n        formControlName=\"comment\"\n        placeholder=\"{{ 'igo.geo.printForm.comment' | translate }}\"\n      />\n      <mat-error *ngIf=\"commentField.errors?.maxlength\">{{\n        'igo.geo.formValidation.maxLength'\n          | translate\n            : {\n                column: 'igo.geo.printForm.comment' | translate,\n                value: maxLength\n              }\n      }}</mat-error>\n    </mat-form-field>\n  </div>\n\n  <div class=\"igo-input-container slide-toggle-container\">\n    <div class=\"print-slide-toggle-container\">\n      <mat-slide-toggle\n        class=\"print-option\"\n        formControlName=\"showProjection\"\n        [labelPosition]=\"'before'\"\n      >\n        {{ 'igo.geo.printForm.showProjection' | translate }}\n      </mat-slide-toggle>\n      <mat-slide-toggle\n        class=\"print-option\"\n        formControlName=\"showScale\"\n        [labelPosition]=\"'before'\"\n      >\n        {{ 'igo.geo.printForm.showScale' | translate }}\n      </mat-slide-toggle>\n      <mat-slide-toggle\n        class=\"print-option\"\n        formControlName=\"doZipFile\"\n        [labelPosition]=\"'before'\"\n        [style.display]=\"isPrintService ? 'none' : ''\"\n      >\n        {{ 'igo.geo.printForm.doZipFile' | translate }}\n      </mat-slide-toggle>\n    </div>\n  </div>\n\n  <div class=\"igo-input-container\">\n    <mat-form-field>\n      <mat-label>{{\n        'igo.geo.printForm.legendPosition' | translate\n      }}</mat-label>\n      <mat-select\n        formControlName=\"legendPosition\"\n        placeholder=\"{{ 'igo.geo.printForm.legendPosition' | translate }}\"\n      >\n        <mat-option\n          *ngFor=\"let legendPosition of legendPositions | keyvalue\"\n          [value]=\"legendPosition.key\"\n        >\n          <ng-container\n            *ngIf=\"!['newpage', 'newimage'].includes(legendPosition.value)\"\n          >\n            {{\n              'igo.geo.printForm.legendPositions.' + legendPosition.value\n                | translate\n            }}\n          </ng-container>\n\n          <ng-container\n            *ngIf=\"['newpage', 'newimage'].includes(legendPosition.value)\"\n          >\n            {{\n              (outputFormat === 'Pdf'\n                ? 'igo.geo.printForm.legendPositions.newpage'\n                : 'igo.geo.printForm.legendPositions.newimage'\n              ) | translate\n            }}\n          </ng-container>\n        </mat-option>\n      </mat-select>\n    </mat-form-field>\n  </div>\n\n  <div class=\"igo-input-container\">\n    <mat-form-field>\n      <mat-label>{{ 'igo.geo.printForm.outputFormat' | translate }}</mat-label>\n      <mat-select\n        (selectionChange)=\"toggleImageSaveProp()\"\n        formControlName=\"outputFormat\"\n        placeholder=\"{{ 'igo.geo.printForm.outputFormat' | translate }}\"\n      >\n        <mat-option\n          *ngFor=\"let outputFormat of outputFormats | keyvalue\"\n          [value]=\"outputFormat.key\"\n        >\n          {{ outputFormat.value }}\n        </mat-option>\n      </mat-select>\n    </mat-form-field>\n  </div>\n\n  <div\n    class=\"igo-input-container\"\n    [style.display]=\"isPrintService ? 'block' : 'none'\"\n  >\n    <mat-form-field>\n      <mat-label>{{ 'igo.geo.printForm.paperFormat' | translate }}</mat-label>\n      <mat-select\n        (selectionChange)=\"changeCommentLength()\"\n        formControlName=\"paperFormat\"\n        placeholder=\"{{ 'igo.geo.printForm.paperFormat' | translate }}\"\n      >\n        <mat-option\n          *ngFor=\"let paperFormat of paperFormats | keyvalue\"\n          [value]=\"paperFormat.key\"\n        >\n          {{\n            'igo.geo.printForm.paperFormats.' + paperFormat.value | translate\n          }}\n        </mat-option>\n      </mat-select>\n    </mat-form-field>\n  </div>\n\n  <div\n    class=\"igo-input-container\"\n    [style.display]=\"isPrintService ? 'none' : 'block'\"\n  >\n    <mat-form-field>\n      <mat-label>{{ 'igo.geo.printForm.imageFormat' | translate }}</mat-label>\n      <mat-select\n        formControlName=\"imageFormat\"\n        placeholder=\"{{ 'igo.geo.printForm.imageFormat' | translate }}\"\n      >\n        <mat-option\n          *ngFor=\"let imageFormat of imageFormats | keyvalue\"\n          [value]=\"imageFormat.key\"\n        >\n          {{ imageFormat.value }}\n        </mat-option>\n      </mat-select>\n    </mat-form-field>\n  </div>\n\n  <div class=\"igo-input-container\">\n    <mat-form-field>\n      <mat-label\n        >{{ 'igo.geo.printForm.resolution' | translate }} ({{\n          'igo.geo.printForm.resolutionUnit' | translate\n        }})</mat-label\n      >\n      <mat-select\n        formControlName=\"resolution\"\n        placeholder=\"{{ 'igo.geo.printForm.resolution' | translate }}\"\n      >\n        <mat-option *ngFor=\"let resolution of resolutions\" [value]=\"resolution\">\n          {{ resolution }}\n        </mat-option>\n      </mat-select>\n    </mat-form-field>\n  </div>\n\n  <div\n    class=\"igo-input-container\"\n    [style.display]=\"isPrintService ? 'block' : 'none'\"\n  >\n    <mat-form-field>\n      <mat-label>{{ 'igo.geo.printForm.orientation' | translate }}</mat-label>\n      <mat-select\n        (selectionChange)=\"changeCommentLength()\"\n        formControlName=\"orientation\"\n        placeholder=\"{{ 'igo.geo.printForm.orientation' | translate }}\"\n      >\n        <mat-option\n          *ngFor=\"let orientation of orientations | keyvalue\"\n          [value]=\"orientation.key\"\n        >\n          {{ 'igo.geo.printForm.' + orientation.value | translate }}\n        </mat-option>\n      </mat-select>\n    </mat-form-field>\n  </div>\n\n  <div class=\"igo-form-button-group print-button-top-padding\">\n    <button\n      mat-raised-button\n      type=\"button\"\n      [disabled]=\"!form.valid || (disabled$ | async)\"\n      (click)=\"handleFormSubmit(form.value, form.valid)\"\n    >\n      {{ 'igo.geo.printForm.saveBtn' | translate }}\n    </button>\n  </div>\n</form>\n", styles: [":host mat-form-field{width:100%}:host .slide-toggle-container{margin-bottom:16px}:host .print-slide-toggle-container mat-slide-toggle{width:100%;padding:0 8px}:host .print-slide-toggle-container mat-slide-toggle ::ng-deep .mdc-form-field{width:100%}:host .print-slide-toggle-container mat-slide-toggle ::ng-deep .mdc-label{margin-left:0;width:calc(100% - 60px)}:host .print-option{display:block;margin-bottom:12px}:host .igo-form{padding:10px 5px 5px}:host .igo-form-button-group{text-align:center}\n"], dependencies: [{ kind: "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: "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: "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.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { 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: "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: 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: 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: "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: PrintFormComponent, decorators: [{
             type: Component,
@@ -39433,7 +39440,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                         AsyncPipe,
                         KeyValuePipe,
                         TranslateModule
-                    ], template: "<form class=\"igo-form\" [formGroup]=\"form\">\r\n  <div class=\"igo-input-container\">\r\n    <mat-form-field>\r\n      <mat-label>{{ 'igo.geo.printForm.title' | translate }}</mat-label>\r\n      <input\r\n        matInput\r\n        formControlName=\"title\"\r\n        placeholder=\"{{ 'igo.geo.printForm.title' | translate }}\"\r\n      />\r\n      <mat-error *ngIf=\"titleField.errors?.maxlength\">{{\r\n        'igo.geo.formValidation.maxLength'\r\n          | translate\r\n            : {\r\n                column: 'igo.geo.printForm.title' | translate,\r\n                value: 130\r\n              }\r\n      }}</mat-error>\r\n    </mat-form-field>\r\n  </div>\r\n  <div class=\"igo-input-container\">\r\n    <mat-form-field>\r\n      <mat-label>{{ 'igo.geo.printForm.subtitle' | translate }}</mat-label>\r\n      <input\r\n        matInput\r\n        formControlName=\"subtitle\"\r\n        placeholder=\"{{ 'igo.geo.printForm.subtitle' | translate }}\"\r\n      />\r\n      <mat-error *ngIf=\"subtitleField.errors?.maxlength\">{{\r\n        'igo.geo.formValidation.maxLength'\r\n          | translate\r\n            : {\r\n                column: 'igo.geo.printForm.subtitle' | translate,\r\n                value: 120\r\n              }\r\n      }}</mat-error>\r\n    </mat-form-field>\r\n  </div>\r\n  <div class=\"igo-input-container\">\r\n    <mat-form-field>\r\n      <mat-label>{{ 'igo.geo.printForm.comment' | translate }}</mat-label>\r\n      <input\r\n        matInput\r\n        formControlName=\"comment\"\r\n        placeholder=\"{{ 'igo.geo.printForm.comment' | translate }}\"\r\n      />\r\n      <mat-error *ngIf=\"commentField.errors?.maxlength\">{{\r\n        'igo.geo.formValidation.maxLength'\r\n          | translate\r\n            : {\r\n                column: 'igo.geo.printForm.comment' | translate,\r\n                value: maxLength\r\n              }\r\n      }}</mat-error>\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <div class=\"igo-input-container slide-toggle-container\">\r\n    <div class=\"print-slide-toggle-container\">\r\n      <mat-slide-toggle\r\n        class=\"print-option\"\r\n        formControlName=\"showProjection\"\r\n        [labelPosition]=\"'before'\"\r\n      >\r\n        {{ 'igo.geo.printForm.showProjection' | translate }}\r\n      </mat-slide-toggle>\r\n      <mat-slide-toggle\r\n        class=\"print-option\"\r\n        formControlName=\"showScale\"\r\n        [labelPosition]=\"'before'\"\r\n      >\r\n        {{ 'igo.geo.printForm.showScale' | translate }}\r\n      </mat-slide-toggle>\r\n      <mat-slide-toggle\r\n        class=\"print-option\"\r\n        formControlName=\"doZipFile\"\r\n        [labelPosition]=\"'before'\"\r\n        [style.display]=\"isPrintService ? 'none' : ''\"\r\n      >\r\n        {{ 'igo.geo.printForm.doZipFile' | translate }}\r\n      </mat-slide-toggle>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"igo-input-container\">\r\n    <mat-form-field>\r\n      <mat-label>{{\r\n        'igo.geo.printForm.legendPosition' | translate\r\n      }}</mat-label>\r\n      <mat-select\r\n        formControlName=\"legendPosition\"\r\n        placeholder=\"{{ 'igo.geo.printForm.legendPosition' | translate }}\"\r\n      >\r\n        <mat-option\r\n          *ngFor=\"let legendPosition of legendPositions | keyvalue\"\r\n          [value]=\"legendPosition.key\"\r\n        >\r\n          <ng-container\r\n            *ngIf=\"!['newpage', 'newimage'].includes(legendPosition.value)\"\r\n          >\r\n            {{\r\n              'igo.geo.printForm.legendPositions.' + legendPosition.value\r\n                | translate\r\n            }}\r\n          </ng-container>\r\n\r\n          <ng-container\r\n            *ngIf=\"['newpage', 'newimage'].includes(legendPosition.value)\"\r\n          >\r\n            {{\r\n              (outputFormat === 'Pdf'\r\n                ? 'igo.geo.printForm.legendPositions.newpage'\r\n                : 'igo.geo.printForm.legendPositions.newimage'\r\n              ) | translate\r\n            }}\r\n          </ng-container>\r\n        </mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <div class=\"igo-input-container\">\r\n    <mat-form-field>\r\n      <mat-label>{{ 'igo.geo.printForm.outputFormat' | translate }}</mat-label>\r\n      <mat-select\r\n        (selectionChange)=\"toggleImageSaveProp()\"\r\n        formControlName=\"outputFormat\"\r\n        placeholder=\"{{ 'igo.geo.printForm.outputFormat' | translate }}\"\r\n      >\r\n        <mat-option\r\n          *ngFor=\"let outputFormat of outputFormats | keyvalue\"\r\n          [value]=\"outputFormat.key\"\r\n        >\r\n          {{ outputFormat.value }}\r\n        </mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <div\r\n    class=\"igo-input-container\"\r\n    [style.display]=\"isPrintService ? 'block' : 'none'\"\r\n  >\r\n    <mat-form-field>\r\n      <mat-label>{{ 'igo.geo.printForm.paperFormat' | translate }}</mat-label>\r\n      <mat-select\r\n        (selectionChange)=\"changeCommentLength()\"\r\n        formControlName=\"paperFormat\"\r\n        placeholder=\"{{ 'igo.geo.printForm.paperFormat' | translate }}\"\r\n      >\r\n        <mat-option\r\n          *ngFor=\"let paperFormat of paperFormats | keyvalue\"\r\n          [value]=\"paperFormat.key\"\r\n        >\r\n          {{\r\n            'igo.geo.printForm.paperFormats.' + paperFormat.value | translate\r\n          }}\r\n        </mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <div\r\n    class=\"igo-input-container\"\r\n    [style.display]=\"isPrintService ? 'none' : 'block'\"\r\n  >\r\n    <mat-form-field>\r\n      <mat-label>{{ 'igo.geo.printForm.imageFormat' | translate }}</mat-label>\r\n      <mat-select\r\n        formControlName=\"imageFormat\"\r\n        placeholder=\"{{ 'igo.geo.printForm.imageFormat' | translate }}\"\r\n      >\r\n        <mat-option\r\n          *ngFor=\"let imageFormat of imageFormats | keyvalue\"\r\n          [value]=\"imageFormat.key\"\r\n        >\r\n          {{ imageFormat.value }}\r\n        </mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <div class=\"igo-input-container\">\r\n    <mat-form-field>\r\n      <mat-label\r\n        >{{ 'igo.geo.printForm.resolution' | translate }} ({{\r\n          'igo.geo.printForm.resolutionUnit' | translate\r\n        }})</mat-label\r\n      >\r\n      <mat-select\r\n        formControlName=\"resolution\"\r\n        placeholder=\"{{ 'igo.geo.printForm.resolution' | translate }}\"\r\n      >\r\n        <mat-option *ngFor=\"let resolution of resolutions\" [value]=\"resolution\">\r\n          {{ resolution }}\r\n        </mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <div\r\n    class=\"igo-input-container\"\r\n    [style.display]=\"isPrintService ? 'block' : 'none'\"\r\n  >\r\n    <mat-form-field>\r\n      <mat-label>{{ 'igo.geo.printForm.orientation' | translate }}</mat-label>\r\n      <mat-select\r\n        (selectionChange)=\"changeCommentLength()\"\r\n        formControlName=\"orientation\"\r\n        placeholder=\"{{ 'igo.geo.printForm.orientation' | translate }}\"\r\n      >\r\n        <mat-option\r\n          *ngFor=\"let orientation of orientations | keyvalue\"\r\n          [value]=\"orientation.key\"\r\n        >\r\n          {{ 'igo.geo.printForm.' + orientation.value | translate }}\r\n        </mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <div class=\"igo-form-button-group print-button-top-padding\">\r\n    <button\r\n      mat-raised-button\r\n      type=\"button\"\r\n      [disabled]=\"!form.valid || (disabled$ | async)\"\r\n      (click)=\"handleFormSubmit(form.value, form.valid)\"\r\n    >\r\n      {{ 'igo.geo.printForm.saveBtn' | translate }}\r\n    </button>\r\n  </div>\r\n</form>\r\n", styles: [":host mat-form-field{width:100%}:host .slide-toggle-container{margin-bottom:16px}:host .print-slide-toggle-container mat-slide-toggle{width:100%;padding:0 8px}:host .print-slide-toggle-container mat-slide-toggle ::ng-deep .mdc-form-field{width:100%}:host .print-slide-toggle-container mat-slide-toggle ::ng-deep .mdc-label{margin-left:0;width:calc(100% - 60px)}:host .print-option{display:block;margin-bottom:12px}:host .igo-form{padding:10px 5px 5px}:host .igo-form-button-group{text-align:center}\n"] }]
+                    ], template: "<form class=\"igo-form\" [formGroup]=\"form\">\n  <div class=\"igo-input-container\">\n    <mat-form-field>\n      <mat-label>{{ 'igo.geo.printForm.title' | translate }}</mat-label>\n      <input\n        matInput\n        formControlName=\"title\"\n        placeholder=\"{{ 'igo.geo.printForm.title' | translate }}\"\n      />\n      <mat-error *ngIf=\"titleField.errors?.maxlength\">{{\n        'igo.geo.formValidation.maxLength'\n          | translate\n            : {\n                column: 'igo.geo.printForm.title' | translate,\n                value: 130\n              }\n      }}</mat-error>\n    </mat-form-field>\n  </div>\n  <div class=\"igo-input-container\">\n    <mat-form-field>\n      <mat-label>{{ 'igo.geo.printForm.subtitle' | translate }}</mat-label>\n      <input\n        matInput\n        formControlName=\"subtitle\"\n        placeholder=\"{{ 'igo.geo.printForm.subtitle' | translate }}\"\n      />\n      <mat-error *ngIf=\"subtitleField.errors?.maxlength\">{{\n        'igo.geo.formValidation.maxLength'\n          | translate\n            : {\n                column: 'igo.geo.printForm.subtitle' | translate,\n                value: 120\n              }\n      }}</mat-error>\n    </mat-form-field>\n  </div>\n  <div class=\"igo-input-container\">\n    <mat-form-field>\n      <mat-label>{{ 'igo.geo.printForm.comment' | translate }}</mat-label>\n      <input\n        matInput\n        formControlName=\"comment\"\n        placeholder=\"{{ 'igo.geo.printForm.comment' | translate }}\"\n      />\n      <mat-error *ngIf=\"commentField.errors?.maxlength\">{{\n        'igo.geo.formValidation.maxLength'\n          | translate\n            : {\n                column: 'igo.geo.printForm.comment' | translate,\n                value: maxLength\n              }\n      }}</mat-error>\n    </mat-form-field>\n  </div>\n\n  <div class=\"igo-input-container slide-toggle-container\">\n    <div class=\"print-slide-toggle-container\">\n      <mat-slide-toggle\n        class=\"print-option\"\n        formControlName=\"showProjection\"\n        [labelPosition]=\"'before'\"\n      >\n        {{ 'igo.geo.printForm.showProjection' | translate }}\n      </mat-slide-toggle>\n      <mat-slide-toggle\n        class=\"print-option\"\n        formControlName=\"showScale\"\n        [labelPosition]=\"'before'\"\n      >\n        {{ 'igo.geo.printForm.showScale' | translate }}\n      </mat-slide-toggle>\n      <mat-slide-toggle\n        class=\"print-option\"\n        formControlName=\"doZipFile\"\n        [labelPosition]=\"'before'\"\n        [style.display]=\"isPrintService ? 'none' : ''\"\n      >\n        {{ 'igo.geo.printForm.doZipFile' | translate }}\n      </mat-slide-toggle>\n    </div>\n  </div>\n\n  <div class=\"igo-input-container\">\n    <mat-form-field>\n      <mat-label>{{\n        'igo.geo.printForm.legendPosition' | translate\n      }}</mat-label>\n      <mat-select\n        formControlName=\"legendPosition\"\n        placeholder=\"{{ 'igo.geo.printForm.legendPosition' | translate }}\"\n      >\n        <mat-option\n          *ngFor=\"let legendPosition of legendPositions | keyvalue\"\n          [value]=\"legendPosition.key\"\n        >\n          <ng-container\n            *ngIf=\"!['newpage', 'newimage'].includes(legendPosition.value)\"\n          >\n            {{\n              'igo.geo.printForm.legendPositions.' + legendPosition.value\n                | translate\n            }}\n          </ng-container>\n\n          <ng-container\n            *ngIf=\"['newpage', 'newimage'].includes(legendPosition.value)\"\n          >\n            {{\n              (outputFormat === 'Pdf'\n                ? 'igo.geo.printForm.legendPositions.newpage'\n                : 'igo.geo.printForm.legendPositions.newimage'\n              ) | translate\n            }}\n          </ng-container>\n        </mat-option>\n      </mat-select>\n    </mat-form-field>\n  </div>\n\n  <div class=\"igo-input-container\">\n    <mat-form-field>\n      <mat-label>{{ 'igo.geo.printForm.outputFormat' | translate }}</mat-label>\n      <mat-select\n        (selectionChange)=\"toggleImageSaveProp()\"\n        formControlName=\"outputFormat\"\n        placeholder=\"{{ 'igo.geo.printForm.outputFormat' | translate }}\"\n      >\n        <mat-option\n          *ngFor=\"let outputFormat of outputFormats | keyvalue\"\n          [value]=\"outputFormat.key\"\n        >\n          {{ outputFormat.value }}\n        </mat-option>\n      </mat-select>\n    </mat-form-field>\n  </div>\n\n  <div\n    class=\"igo-input-container\"\n    [style.display]=\"isPrintService ? 'block' : 'none'\"\n  >\n    <mat-form-field>\n      <mat-label>{{ 'igo.geo.printForm.paperFormat' | translate }}</mat-label>\n      <mat-select\n        (selectionChange)=\"changeCommentLength()\"\n        formControlName=\"paperFormat\"\n        placeholder=\"{{ 'igo.geo.printForm.paperFormat' | translate }}\"\n      >\n        <mat-option\n          *ngFor=\"let paperFormat of paperFormats | keyvalue\"\n          [value]=\"paperFormat.key\"\n        >\n          {{\n            'igo.geo.printForm.paperFormats.' + paperFormat.value | translate\n          }}\n        </mat-option>\n      </mat-select>\n    </mat-form-field>\n  </div>\n\n  <div\n    class=\"igo-input-container\"\n    [style.display]=\"isPrintService ? 'none' : 'block'\"\n  >\n    <mat-form-field>\n      <mat-label>{{ 'igo.geo.printForm.imageFormat' | translate }}</mat-label>\n      <mat-select\n        formControlName=\"imageFormat\"\n        placeholder=\"{{ 'igo.geo.printForm.imageFormat' | translate }}\"\n      >\n        <mat-option\n          *ngFor=\"let imageFormat of imageFormats | keyvalue\"\n          [value]=\"imageFormat.key\"\n        >\n          {{ imageFormat.value }}\n        </mat-option>\n      </mat-select>\n    </mat-form-field>\n  </div>\n\n  <div class=\"igo-input-container\">\n    <mat-form-field>\n      <mat-label\n        >{{ 'igo.geo.printForm.resolution' | translate }} ({{\n          'igo.geo.printForm.resolutionUnit' | translate\n        }})</mat-label\n      >\n      <mat-select\n        formControlName=\"resolution\"\n        placeholder=\"{{ 'igo.geo.printForm.resolution' | translate }}\"\n      >\n        <mat-option *ngFor=\"let resolution of resolutions\" [value]=\"resolution\">\n          {{ resolution }}\n        </mat-option>\n      </mat-select>\n    </mat-form-field>\n  </div>\n\n  <div\n    class=\"igo-input-container\"\n    [style.display]=\"isPrintService ? 'block' : 'none'\"\n  >\n    <mat-form-field>\n      <mat-label>{{ 'igo.geo.printForm.orientation' | translate }}</mat-label>\n      <mat-select\n        (selectionChange)=\"changeCommentLength()\"\n        formControlName=\"orientation\"\n        placeholder=\"{{ 'igo.geo.printForm.orientation' | translate }}\"\n      >\n        <mat-option\n          *ngFor=\"let orientation of orientations | keyvalue\"\n          [value]=\"orientation.key\"\n        >\n          {{ 'igo.geo.printForm.' + orientation.value | translate }}\n        </mat-option>\n      </mat-select>\n    </mat-form-field>\n  </div>\n\n  <div class=\"igo-form-button-group print-button-top-padding\">\n    <button\n      mat-raised-button\n      type=\"button\"\n      [disabled]=\"!form.valid || (disabled$ | async)\"\n      (click)=\"handleFormSubmit(form.value, form.valid)\"\n    >\n      {{ 'igo.geo.printForm.saveBtn' | translate }}\n    </button>\n  </div>\n</form>\n", styles: [":host mat-form-field{width:100%}:host .slide-toggle-container{margin-bottom:16px}:host .print-slide-toggle-container mat-slide-toggle{width:100%;padding:0 8px}:host .print-slide-toggle-container mat-slide-toggle ::ng-deep .mdc-form-field{width:100%}:host .print-slide-toggle-container mat-slide-toggle ::ng-deep .mdc-label{margin-left:0;width:calc(100% - 60px)}:host .print-option{display:block;margin-bottom:12px}:host .igo-form{padding:10px 5px 5px}:host .igo-form-button-group{text-align:center}\n"] }]
         }], ctorParameters: () => [{ type: i1$6.UntypedFormBuilder }, { type: i2$1.MediaService }], propDecorators: { disabled$: [{
                 type: Input
             }], imageFormat: [{
@@ -39552,11 +39559,11 @@ class PrintComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: PrintComponent, deps: [{ token: PrintService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: PrintComponent, isStandalone: true, selector: "igo-print", inputs: { map: "map", outputFormat: "outputFormat", paperFormat: "paperFormat", orientation: "orientation", imageFormat: "imageFormat", legendPosition: "legendPosition", resolution: "resolution" }, ngImport: i0, template: "<igo-print-form\r\n  [outputFormat]=\"outputFormat\"\r\n  [paperFormat]=\"paperFormat\"\r\n  [orientation]=\"orientation\"\r\n  [imageFormat]=\"imageFormat\"\r\n  [resolution]=\"resolution\"\r\n  [legendPosition]=\"legendPosition\"\r\n  [disabled$]=\"disabled$\"\r\n  (submit)=\"handleFormSubmit($event)\"\r\n>\r\n</igo-print-form>\r\n", dependencies: [{ kind: "component", type: PrintFormComponent, selector: "igo-print-form", inputs: ["disabled$", "imageFormat", "outputFormat", "paperFormat", "orientation", "resolution", "legendPosition", "title", "subtitle", "comment", "showProjection", "showScale", "showLegend", "doZipFile"], outputs: ["submit"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: PrintComponent, isStandalone: true, selector: "igo-print", inputs: { map: "map", outputFormat: "outputFormat", paperFormat: "paperFormat", orientation: "orientation", imageFormat: "imageFormat", legendPosition: "legendPosition", resolution: "resolution" }, ngImport: i0, template: "<igo-print-form\n  [outputFormat]=\"outputFormat\"\n  [paperFormat]=\"paperFormat\"\n  [orientation]=\"orientation\"\n  [imageFormat]=\"imageFormat\"\n  [resolution]=\"resolution\"\n  [legendPosition]=\"legendPosition\"\n  [disabled$]=\"disabled$\"\n  (submit)=\"handleFormSubmit($event)\"\n>\n</igo-print-form>\n", dependencies: [{ kind: "component", type: PrintFormComponent, selector: "igo-print-form", inputs: ["disabled$", "imageFormat", "outputFormat", "paperFormat", "orientation", "resolution", "legendPosition", "title", "subtitle", "comment", "showProjection", "showScale", "showLegend", "doZipFile"], outputs: ["submit"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: PrintComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'igo-print', standalone: true, imports: [PrintFormComponent], template: "<igo-print-form\r\n  [outputFormat]=\"outputFormat\"\r\n  [paperFormat]=\"paperFormat\"\r\n  [orientation]=\"orientation\"\r\n  [imageFormat]=\"imageFormat\"\r\n  [resolution]=\"resolution\"\r\n  [legendPosition]=\"legendPosition\"\r\n  [disabled$]=\"disabled$\"\r\n  (submit)=\"handleFormSubmit($event)\"\r\n>\r\n</igo-print-form>\r\n" }]
+            args: [{ selector: 'igo-print', standalone: true, imports: [PrintFormComponent], template: "<igo-print-form\n  [outputFormat]=\"outputFormat\"\n  [paperFormat]=\"paperFormat\"\n  [orientation]=\"orientation\"\n  [imageFormat]=\"imageFormat\"\n  [resolution]=\"resolution\"\n  [legendPosition]=\"legendPosition\"\n  [disabled$]=\"disabled$\"\n  (submit)=\"handleFormSubmit($event)\"\n>\n</igo-print-form>\n" }]
         }], ctorParameters: () => [{ type: PrintService }], propDecorators: { map: [{
                 type: Input
             }], outputFormat: [{
@@ -40094,7 +40101,7 @@ class NominatimSearchSource extends SearchSource {
                         },
                         {
                             title: 'igo.geo.search.nominatim.type.entertainment',
-                            value: 'arts_centre,brothel,casino,cinema,community_center_fountain,gambling,nightclub,planetarium \
+                            value: 'arts_centre,brothel,casino,cinema,community_center_fountain,gambling,nightclub,planetarium \
                           ,public_bookcase,social_centre,stripclub,studio,swingerclub,theatre,internet_cafe',
                             enabled: false
                         },
@@ -41166,5 +41173,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AddCatalogDialogComponent, ArcGISRestCapabilitiesLayerTypes, ArcGISRestDataSource, BaseLayersSwitcherComponent, CATALOG_DIRECTIVES, CadastreSearchSource, CapabilitiesService, CartoDataSource, Catalog, CatalogBrowserComponent, CatalogItemType, CatalogLibaryComponent, CatalogService, ClusterDataSource, ConfigFileToGeoDBService, ConfirmationPopupComponent, CoordinatesReverseSearchSource, CoordinatesReverseSearchSourceFactory, CoordinatesSearchResultFormatter, CoordinatesUnit, DDtoDMS, DataService, DataSource, DataSourceService, DirectionRelativePositionType, DirectionType, DirectionsButtonsComponent, DirectionsComponent, DirectionsFormat, DirectionsInputsComponent, DirectionsResultsComponent, DirectionsService, DirectionsSource, DownloadButtonComponent, DownloadService, DrawComponent, DrawControl, DrawIconService, DrawStyleService, DropGeoFileDirective, EditionWorkspace, EditionWorkspaceService, EncodingFormat, EsriStyleGenerator, ExportButtonComponent, ExportError, ExportFormat, ExportInvalidFileError, ExportNothingToExportError, ExportService, FEATURE, FEATURE_DETAILS_DIRECTIVES, FEATURE_DIRECTIVES, FILTER_DIRECTIVES, FeatureDataSource, FeatureDetailsComponent, FeatureDetailsDirective, FeatureFormComponent, FeatureMotion, FeatureStore, FeatureStoreInMapExtentStrategy, FeatureStoreInMapResolutionStrategy, FeatureStoreLoadingLayerStrategy, FeatureStoreLoadingStrategy, FeatureStoreSearchIndexStrategy, FeatureStoreSelectionStrategy, FeatureWorkspace, FeatureWorkspaceService, FilterableDataSourcePipe, GEOMETRY_FORM_FIELD_DIRECTIVES, GeoDBService, GeoNetworkService, GeoPropertiesStrategy, GeolocateButtonComponent, GeolocationOverlayType, GeometryFormFieldComponent, GeometryFormFieldInputComponent, GeometrySliceError, GeometrySliceLineStringError, GeometrySliceMultiPolygonError, GeometrySliceTooManyIntersectionError, GeometryType, GoogleLinks, HomeExtentButtonComponent, HoverFeatureDirective, IChercheReverseSearchSource, IChercheSearchResultFormatter, IChercheSearchSource, ILayerSearchResultFormatter, ILayerSearchSource, IMPORT_EXPORT_DIRECTIVES, IgoCatalogBrowserModule, IgoCatalogLibraryModule, IgoCatalogModule, IgoConfirmationPopupModule, IgoDirectionsModule, IgoDownloadModule, IgoDrawModule, IgoDrawingToolModule, IgoFeatureDetailsModule, IgoFeatureFormModule, IgoFeatureModule, IgoFilterModule, IgoGeoModule, IgoGeoWorkspaceModule, IgoGeometryFormFieldModule, IgoGeometryModule, IgoHttpParameterCodec, IgoImportExportModule, IgoLayerModule, IgoMap, IgoMapModule, IgoMeasureModule, IgoMeasurerModule, IgoMetadataModule, IgoOgcFilterModule, IgoOverlayModule, IgoPrintModule, IgoQueryModule, IgoSearchBarModule, IgoSearchModule, IgoSearchResultsModule, IgoSearchSelectorModule, IgoSearchSettingsModule, IgoStyleListModule, IgoStyleModule, IgoToastModule, IgoWktModule, IgoWorkspaceSelectorModule, IgoWorkspaceUpdatorModule, ImageArcGISRestDataSource, ImageLayer, ImageWatcher, ImportError, ImportExportComponent, ImportInvalidFileError, ImportNothingToImportError, ImportOgreServerError, ImportSRSError, ImportService, ImportSizeError, ImportUnreadableFileError, InfoSectionComponent, InsertSourceInsertDBEnum, LAYER, LAYER_DIRECTIVES, LabelType, Layer, LayerDBService, LayerItemComponent, LayerLegendComponent, LayerLegendItemComponent, LayerLegendListBindingDirective, LayerLegendListComponent, LayerListBindingDirective, LayerListComponent, LayerListControlsEnum, LayerListDisplacement, LayerListSelectVisibleEnum, LayerListToolComponent, LayerListToolControlsEnum, LayerListToolService, LayerService, LinkedProperties, MAP_DIRECTIVES, MEASURER_DIRECTIVES, MEASURE_UNIT_AUTO, METADATA_DIRECTIVES, MVTDataSource, MapBase, MapBrowserComponent, MapCenterComponent, MapController, MapGeolocationController, MapOfflineDirective, MapService, MapViewAction, MapViewController, MeasureAreaUnit, MeasureAreaUnitAbbreviation, MeasureFormatPipe, MeasureLengthUnit, MeasureLengthUnitAbbreviation, MeasureType, MeasurerComponent, MenuButtonComponent, MetadataAbstractComponent, MetadataButtonComponent, MetadataService, MiniBaseMapComponent, ModifyControl, NominatimSearchSource, OGCFilterService, OSMDataSource, OfflineButtonComponent, OgcFilterButtonComponent, OgcFilterComponent, OgcFilterFormComponent, OgcFilterOperator, OgcFilterOperatorType, OgcFilterSelectionComponent, OgcFilterTimeComponent, OgcFilterTimeSliderComponent, OgcFilterWidget, OgcFilterWriter, OgcFilterableFormComponent, OgcFilterableItemComponent, OgcFilterableListBindingDirective, OgcFilterableListComponent, OlDragSelectInteraction, OptionsApiService, OptionsService, OsmLinks, OsrmDirectionsSource, Overlay, OverlayAction, OverlayDirective, OverlayService, PointerPositionDirective, PrintComponent, PrintFormComponent, PrintLegendPosition, PrintOrientation, PrintOutputFormat, PrintPaperFormat, PrintResolution, PrintSaveImageFormat, PrintService, ProjectionService, PropertyTypeDetectorService, ProposalType, QueryDirective, QueryFormat, QueryFormatMimeType, QueryHtmlTarget, QuerySearchSource, QueryService, ResponseType, RotationButtonComponent, RoutesFeatureStore, SEARCH_DIRECTIVES, SEARCH_RESULTS_DIRECTIVES, SEARCH_TYPES, STYLELIST_OPTIONS, SearchBarComponent, SearchPointerSummaryDirective, SearchResultAddButtonComponent, SearchResultMode, SearchResultsComponent, SearchSelectorComponent, SearchService, SearchSettingsComponent, SearchSource, SearchSourceService, SliceControl, SourceDirectionsType, SpatialFilterItemComponent, SpatialFilterItemType, SpatialFilterListComponent, SpatialFilterQueryType, SpatialFilterService, SpatialFilterType, SpatialFilterTypeComponent, StepFeatureStore, StopsFeatureStore, StopsStore, StoredQueriesReverseSearchSource, StoredQueriesSearchSource, StyleListService, StyleModalDrawingComponent, StyleModalLayerButtonComponent, StyleModalLayerComponent, StyleService, SwipeControlComponent, TileArcGISRestDataSource, TileDebugDataSource, TileLayer, TileWatcher, TimeFilterButtonComponent, TimeFilterFormComponent, TimeFilterItemComponent, TimeFilterListBindingDirective, TimeFilterListComponent, TimeFilterService, TimeFilterStyle, TimeFilterType, ToastComponent, TooltipType, TrackFeatureButtonComponent, TypeCapabilities, TypeCatalog, VectorLayer, VectorTileLayer, VectorWatcher, WFSDataSource, WFSService, WMSDataSource, WMTSDataSource, WakeLockButtonComponent, WebSocketDataSource, WfsWorkspace, WfsWorkspaceService, WktService, WorkspaceSearchSource, WorkspaceSelectorDirective, WorkspaceUpdatorDirective, XYZDataSource, ZoomButtonComponent, addDirectionToRoutesFeatureStore, addLayerAndFeaturesStyledToMap, addLayerAndFeaturesToMap, addLinearRingToOlPolygon, addOrRemoveLayer, addStopToStopsFeatureStore, addStopToStore, buildUrl, cadastreSearchSourceFactory, checkWfsParams, clearOlGeometryMidpoints, computeBestAreaUnit, computeBestLengthUnit, computeLayerTitleFromFile, computeMVTOptionsOnHover, computeOlFeatureExtent, computeOlFeaturesDiff, computeOlFeaturesExtent, computeProjectionsConstraints, computeRelativePosition, computeStopsPosition, computeTermSimilarity, convertDDToDMS, createDefaultTileGrid, createDrawHoleInteractionStyle, createDrawInteractionStyle, createFilterInMapExtentOrResolutionStrategy, createInteractionStyle, createMeasureInteractionStyle, createMeasureLayerStyle, createOlTooltipAtPoint, createOlTooltipDrawAtPoint, createOverlayDefaultStyle, createOverlayLayer, createOverlayLayerStyle, createOverlayMarkerStyle, createTableTemplate, ctrlKeyDown, defaultCoordinatesSearchResultFormatterFactory, defaultEpsg, defaultFieldNameGeometry, defaultIChercheSearchResultFormatterFactory, defaultMaxFeatures, defaultWfsVersion, directionsStyle, entitiesToRowData, exportToCSV, featureFromOl, featureRandomStyle, featureRandomStyleFunction, featureToOl, featureToSearchResult, featuresAreOutOfView, featuresAreTooDeepInView, findDiff, formatDistance, formatDuration, formatInstruction, formatMeasure, formatScale, formatWFSQueryString, generateArcgisRestIdFromSourceOptions, generateFeatureIdFromSourceOptions, generateId, generateIdFromSourceOptions, generateWMSIdFromSourceOptions, generateWMTSIdFromSourceOptions, generateWfsIdFromSourceOptions, generateXYZIdFromSourceOptions, getAllChildLayersByDeletion, getAllChildLayersByProperty, getCommonVectorSelectedStyle, getCommonVectorStyle, getDirectChildLayersByDeletion, getDirectChildLayersByProperty, getDirectParentLayerByDeletion, getDirectParentLayerByProperty, getFileExtension, getFormatFromOptions, getGeoServiceAction, getIgoLayerByLinkId, getLayersLegends, getLinkedLayersOptions, getMousePositionFromOlGeometryEvent, getOlTooltipAtCenter, getOlTooltipsAtMidpoints, getResolutionFromScale, getRootParentByDeletion, getRootParentByProperty, getRowsInMapExtent, getScaleFromResolution, getSelectedOnly, getTooltipsOfOlGeometry, gmlRegex, handleFileExportError, handleFileExportSuccess, handleFileImportError, handleFileImportSuccess, handleInvalidFileImportError, handleLayerPropertyChange, handleNothingToExportError, handleNothingToImportError, handleOgreServerImportError, handleSRSImportError, handleSizeFileImportError, handleUnreadbleFileImportError, hideOlFeature, hoverFeatureMarkerStyle, ichercheReverseSearchSourceFactory, ichercheSearchSourceFactory, ilayerSearchResultFormatterFactory, ilayerSearchSourceFactory, initLayerSyncFromRootParentLayers, initRoutesFeatureStore, initStepFeatureStore, initStopsFeatureStore, jsonRegex, layerFeatureIsQueryable, layerHasLinkDeletion, layerHasLinkWithProperty, layerIsQueryable, lonLatConversion, mapExtentStrategyActiveToolTip, measureOlGeometry, measureOlGeometryArea, measureOlGeometryLength, metersToFeet, metersToKilometers, metersToMiles, metersToUnit, moveToOlFeatures, mtmZoneFromLonLat, noElementSelected, nominatimSearchSourceFactory, ogcFilterWidgetFactory, olLayerFeatureIsQueryable, olLayerIsQueryable, olStyleToBasicIgoStyle, optionsApiFactory, osrmDirectionsSourcesFactory, pointerPositionSummaryMarkerStyle, provideCadastreSearchSource, provideCoordinatesReverseSearchSource, provideDefaultCoordinatesSearchResultFormatter, provideDefaultIChercheSearchResultFormatter, provideIChercheReverseSearchSource, provideIChercheSearchSource, provideILayerSearchResultFormatter, provideILayerSearchSource, provideNominatimSearchSource, provideOgcFilterWidget, provideOptionsApi, provideOsrmDirectionsSource, provideSearchSourceService, provideStoredQueriesReverseSearchSource, provideStoredQueriesSearchSource, provideStyleListLoader, provideStyleListOptions, provideWorkspaceSearchSource, removeStopFromStore, renderFeatureFromOl, roundCoordTo, roundCoordToString, scaleExtent, searchSourceServiceFactory, setRowsInMapExtent, setSelectedOnly, sliceOlGeometry, sliceOlLineString, sliceOlPolygon, sourceCanReverseSearch, sourceCanReverseSearchAsSummary, sourceCanSearch, squareMetersToAcres, squareMetersToHectares, squareMetersToSquareFeet, squareMetersToSquareKilometers, squareMetersToSquareMiles, squareMetersToUnit, standardizeUrl, storedqueriesReverseSearchSourceFactory, storedqueriesSearchSourceFactory, stringToLonLat, styleListFactory, translateBearing, translateModifier, tryAddLoadingStrategy, tryAddSelectionStrategy, tryBindStoreLayer, updateOlGeometryCenter, updateOlGeometryMidpoints, updateOlTooltipAtCenter, updateOlTooltipDrawAtCenter, updateOlTooltipsAtMidpoints, updateOlTooltipsDrawAtMidpoints, updateStoreSorting, utmZoneFromLonLat, viewStatesAreEqual, workspaceSearchSourceFactory, zoneMtm, zoneUtm };
+export { AddCatalogDialogComponent, ArcGISRestCapabilitiesLayerTypes, ArcGISRestDataSource, BaseLayersSwitcherComponent, CATALOG_DIRECTIVES, CadastreSearchSource, CapabilitiesService, CartoDataSource, Catalog, CatalogBrowserComponent, CatalogItemType, CatalogLibaryComponent, CatalogService, ClusterDataSource, ConfigFileToGeoDBService, ConfirmationPopupComponent, CoordinatesReverseSearchSource, CoordinatesReverseSearchSourceFactory, CoordinatesSearchResultFormatter, CoordinatesUnit, DDtoDMS, DataService, DataSource, DataSourceService, DirectionRelativePositionType, DirectionType, DirectionsButtonsComponent, DirectionsComponent, DirectionsFormat, DirectionsInputsComponent, DirectionsResultsComponent, DirectionsService, DirectionsSource, DownloadButtonComponent, DownloadService, DrawComponent, DrawControl, DrawIconService, DrawStyleService, DropGeoFileDirective, EditionWorkspace, EditionWorkspaceService, EncodingFormat, EsriStyleGenerator, ExportButtonComponent, ExportError, ExportFormat, ExportInvalidFileError, ExportNothingToExportError, ExportService, FEATURE, FEATURE_DETAILS_DIRECTIVES, FEATURE_DIRECTIVES, FILTER_DIRECTIVES, FeatureDataSource, FeatureDetailsComponent, FeatureDetailsDirective, FeatureFormComponent, FeatureMotion, FeatureStore, FeatureStoreInMapExtentStrategy, FeatureStoreInMapResolutionStrategy, FeatureStoreLoadingLayerStrategy, FeatureStoreLoadingStrategy, FeatureStoreSearchIndexStrategy, FeatureStoreSelectionStrategy, FeatureWorkspace, FeatureWorkspaceService, FilterableDataSourcePipe, GEOMETRY_FORM_FIELD_DIRECTIVES, GeoDBService, GeoNetworkService, GeoPropertiesStrategy, GeolocateButtonComponent, GeolocationOverlayType, GeometryFormFieldComponent, GeometryFormFieldInputComponent, GeometrySliceError, GeometrySliceLineStringError, GeometrySliceMultiPolygonError, GeometrySliceTooManyIntersectionError, GeometryType, GoogleLinks, HomeExtentButtonComponent, HoverFeatureDirective, IChercheReverseSearchSource, IChercheSearchResultFormatter, IChercheSearchSource, ILayerSearchResultFormatter, ILayerSearchSource, IMPORT_EXPORT_DIRECTIVES, IgoCatalogBrowserModule, IgoCatalogLibraryModule, IgoCatalogModule, IgoConfirmationPopupModule, IgoDirectionsModule, IgoDownloadModule, IgoDrawModule, IgoDrawingToolModule, IgoFeatureDetailsModule, IgoFeatureFormModule, IgoFeatureModule, IgoFilterModule, IgoGeoModule, IgoGeoWorkspaceModule, IgoGeometryFormFieldModule, IgoGeometryModule, IgoHttpParameterCodec, IgoImportExportModule, IgoLayerModule, IgoMap, IgoMapModule, IgoMeasureModule, IgoMeasurerModule, IgoMetadataModule, IgoOgcFilterModule, IgoOverlayModule, IgoPrintModule, IgoQueryModule, IgoSearchBarModule, IgoSearchModule, IgoSearchResultsModule, IgoSearchSelectorModule, IgoSearchSettingsModule, IgoStyleListModule, IgoStyleModule, IgoToastModule, IgoWktModule, IgoWorkspaceSelectorModule, IgoWorkspaceUpdatorModule, ImageArcGISRestDataSource, ImageLayer, ImageWatcher, ImportError, ImportExportComponent, ImportInvalidFileError, ImportNothingToImportError, ImportOgreServerError, ImportSRSError, ImportService, ImportSizeError, ImportUnreadableFileError, InfoSectionComponent, InsertSourceInsertDBEnum, LAYER, LAYER_DIRECTIVES, LabelType, Layer, LayerDBService, LayerItemComponent, LayerLegendComponent, LayerLegendItemComponent, LayerLegendListBindingDirective, LayerLegendListComponent, LayerListBindingDirective, LayerListComponent, LayerListControlsEnum, LayerListDisplacement, LayerListSelectVisibleEnum, LayerListToolComponent, LayerListToolControlsEnum, LayerListToolService, LayerService, LinkedProperties, MAP_DIRECTIVES, MEASURER_DIRECTIVES, MEASURE_UNIT_AUTO, METADATA_DIRECTIVES, MVTDataSource, MapBase, MapBrowserComponent, MapCenterComponent, MapController, MapGeolocationController, MapOfflineDirective, MapService, MapViewAction, MapViewController, MeasureAreaUnit, MeasureAreaUnitAbbreviation, MeasureFormatPipe, MeasureLengthUnit, MeasureLengthUnitAbbreviation, MeasureType, MeasurerComponent, MenuButtonComponent, MetadataAbstractComponent, MetadataButtonComponent, MetadataService, MiniBaseMapComponent, ModifyControl, NominatimSearchSource, OGCFilterService, OSMDataSource, OfflineButtonComponent, OgcFilterButtonComponent, OgcFilterComponent, OgcFilterFormComponent, OgcFilterOperator, OgcFilterOperatorType, OgcFilterSelectionComponent, OgcFilterTimeComponent, OgcFilterTimeSliderComponent, OgcFilterWidget, OgcFilterWriter, OgcFilterableFormComponent, OgcFilterableItemComponent, OgcFilterableListBindingDirective, OgcFilterableListComponent, OlDragSelectInteraction, OptionsApiService, OptionsService, OsmLinks, OsrmDirectionsSource, Overlay, OverlayAction, OverlayDirective, OverlayService, PointerPositionDirective, PrintComponent, PrintFormComponent, PrintLegendPosition, PrintOrientation, PrintOutputFormat, PrintPaperFormat, PrintResolution, PrintSaveImageFormat, PrintService, ProjectionService, PropertyTypeDetectorService, ProposalType, QueryDirective, QueryFormat, QueryFormatMimeType, QueryHtmlTarget, QuerySearchSource, QueryService, ResponseType, RotationButtonComponent, RoutesFeatureStore, SEARCH_DIRECTIVES, SEARCH_RESULTS_DIRECTIVES, SEARCH_TYPES, STYLELIST_OPTIONS, SearchBarComponent, SearchPointerSummaryDirective, SearchResultAddButtonComponent, SearchResultMode, SearchResultsComponent, SearchSelectorComponent, SearchService, SearchSettingsComponent, SearchSource, SearchSourceService, SliceControl, SourceDirectionsType, SpatialFilterItemComponent, SpatialFilterItemType, SpatialFilterListComponent, SpatialFilterQueryType, SpatialFilterService, SpatialFilterType, SpatialFilterTypeComponent, StepFeatureStore, StopsFeatureStore, StopsStore, StoredQueriesReverseSearchSource, StoredQueriesSearchSource, StyleListService, StyleModalDrawingComponent, StyleModalLayerButtonComponent, StyleModalLayerComponent, StyleService, SwipeControlComponent, TileArcGISRestDataSource, TileDebugDataSource, TileLayer, TileWatcher, TimeFilterButtonComponent, TimeFilterFormComponent, TimeFilterItemComponent, TimeFilterListBindingDirective, TimeFilterListComponent, TimeFilterService, TimeFilterStyle, TimeFilterType, ToastComponent, TooltipType, TrackFeatureButtonComponent, TypeCapabilities, TypeCatalog, VectorLayer, VectorTileLayer, VectorWatcher, WFSDataSource, WFSService, WMSDataSource, WMTSDataSource, WakeLockButtonComponent, WebSocketDataSource, WfsWorkspace, WfsWorkspaceService, WktService, WorkspaceSearchSource, WorkspaceSelectorDirective, WorkspaceUpdatorDirective, XYZDataSource, ZoomButtonComponent, addDirectionToRoutesFeatureStore, addLayerAndFeaturesStyledToMap, addLayerAndFeaturesToMap, addLinearRingToOlPolygon, addOrRemoveLayer, addStopToStopsFeatureStore, addStopToStore, buildUrl, cadastreSearchSourceFactory, checkWfsParams, clearOlGeometryMidpoints, computeBestAreaUnit, computeBestLengthUnit, computeLayerTitleFromFile, computeMVTOptionsOnHover, computeOlFeatureExtent, computeOlFeaturesDiff, computeOlFeaturesExtent, computeProjectionsConstraints, computeRelativePosition, computeStopsPosition, computeTermSimilarity, convertDDToDMS, createDefaultTileGrid, createDrawHoleInteractionStyle, createDrawInteractionStyle, createFilterInMapExtentOrResolutionStrategy, createInteractionStyle, createMeasureInteractionStyle, createMeasureLayerStyle, createOlTooltipAtPoint, createOlTooltipDrawAtPoint, createOverlayDefaultStyle, createOverlayLayer, createOverlayLayerStyle, createOverlayMarkerStyle, createTableTemplate, ctrlKeyDown, defaultCoordinatesSearchResultFormatterFactory, defaultEpsg, defaultFieldNameGeometry, defaultIChercheSearchResultFormatterFactory, defaultMaxFeatures, defaultWfsVersion, detectFileEPSG, directionsStyle, entitiesToRowData, exportToCSV, featureFromOl, featureRandomStyle, featureRandomStyleFunction, featureToOl, featureToSearchResult, featuresAreOutOfView, featuresAreTooDeepInView, findDiff, formatDistance, formatDuration, formatInstruction, formatMeasure, formatScale, formatWFSQueryString, generateArcgisRestIdFromSourceOptions, generateFeatureIdFromSourceOptions, generateId, generateIdFromSourceOptions, generateWMSIdFromSourceOptions, generateWMTSIdFromSourceOptions, generateWfsIdFromSourceOptions, generateXYZIdFromSourceOptions, getAllChildLayersByDeletion, getAllChildLayersByProperty, getCommonVectorSelectedStyle, getCommonVectorStyle, getDirectChildLayersByDeletion, getDirectChildLayersByProperty, getDirectParentLayerByDeletion, getDirectParentLayerByProperty, getFileExtension, getFormatFromOptions, getGeoServiceAction, getIgoLayerByLinkId, getLayersLegends, getLinkedLayersOptions, getMousePositionFromOlGeometryEvent, getOlTooltipAtCenter, getOlTooltipsAtMidpoints, getResolutionFromScale, getRootParentByDeletion, getRootParentByProperty, getRowsInMapExtent, getScaleFromResolution, getSelectedOnly, getTooltipsOfOlGeometry, gmlRegex, handleFileExportError, handleFileExportSuccess, handleFileImportError, handleFileImportSuccess, handleInvalidFileImportError, handleLayerPropertyChange, handleNothingToExportError, handleNothingToImportError, handleOgreServerImportError, handleSRSImportError, handleSizeFileImportError, handleUnreadbleFileImportError, hideOlFeature, hoverFeatureMarkerStyle, ichercheReverseSearchSourceFactory, ichercheSearchSourceFactory, ilayerSearchResultFormatterFactory, ilayerSearchSourceFactory, initLayerSyncFromRootParentLayers, initRoutesFeatureStore, initStepFeatureStore, initStopsFeatureStore, jsonRegex, layerFeatureIsQueryable, layerHasLinkDeletion, layerHasLinkWithProperty, layerIsQueryable, lonLatConversion, mapExtentStrategyActiveToolTip, measureOlGeometry, measureOlGeometryArea, measureOlGeometryLength, metersToFeet, metersToKilometers, metersToMiles, metersToUnit, moveToOlFeatures, mtmZoneFromLonLat, noElementSelected, nominatimSearchSourceFactory, ogcFilterWidgetFactory, olLayerFeatureIsQueryable, olLayerIsQueryable, olStyleToBasicIgoStyle, optionsApiFactory, osrmDirectionsSourcesFactory, pointerPositionSummaryMarkerStyle, provideCadastreSearchSource, provideCoordinatesReverseSearchSource, provideDefaultCoordinatesSearchResultFormatter, provideDefaultIChercheSearchResultFormatter, provideIChercheReverseSearchSource, provideIChercheSearchSource, provideILayerSearchResultFormatter, provideILayerSearchSource, provideNominatimSearchSource, provideOgcFilterWidget, provideOptionsApi, provideOsrmDirectionsSource, provideSearchSourceService, provideStoredQueriesReverseSearchSource, provideStoredQueriesSearchSource, provideStyleListLoader, provideStyleListOptions, provideWorkspaceSearchSource, removeStopFromStore, renderFeatureFromOl, roundCoordTo, roundCoordToString, scaleExtent, searchSourceServiceFactory, setRowsInMapExtent, setSelectedOnly, sliceOlGeometry, sliceOlLineString, sliceOlPolygon, sourceCanReverseSearch, sourceCanReverseSearchAsSummary, sourceCanSearch, squareMetersToAcres, squareMetersToHectares, squareMetersToSquareFeet, squareMetersToSquareKilometers, squareMetersToSquareMiles, squareMetersToUnit, standardizeUrl, storedqueriesReverseSearchSourceFactory, storedqueriesSearchSourceFactory, stringToLonLat, styleListFactory, translateBearing, translateModifier, tryAddLoadingStrategy, tryAddSelectionStrategy, tryBindStoreLayer, updateOlGeometryCenter, updateOlGeometryMidpoints, updateOlTooltipAtCenter, updateOlTooltipDrawAtCenter, updateOlTooltipsAtMidpoints, updateOlTooltipsDrawAtMidpoints, updateStoreSorting, utmZoneFromLonLat, viewStatesAreEqual, workspaceSearchSourceFactory, zoneMtm, zoneUtm };
 //# sourceMappingURL=igo2-geo.mjs.map