@igo2/geo 1.13.4 → 1.14.0

package/fesm2020/igo2-geo.mjs

@@ -11,7 +11,7 @@ import { MatListModule } from '@angular/material/list';
 import * as i4 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import * as i5$1 from '@igo2/common';
-import { getEntityId, getEntityTitle, getEntityProperty, getEntityRevision, getEntityIcon, EntityStore, EntityStoreStrategy, EntityStoreWatcher, SecureImagePipe, IgoListModule, IgoCollapsibleModule, IgoImageModule, IgoPanelModule, IgoMatBadgeIconModule, IgoCustomHtmlModule, IgoEntityTableModule, IgoKeyValueModule, IgoFormModule, IgoFormFieldComponent, DOMService, EntityStoreFilterSelectionStrategy, EntityTableColumnRenderer, IgoEntityModule, IgoDOMModule, DragAndDropDirective, IgoSpinnerModule, IgoDrapDropModule, IgoConfirmDialogModule, getEntityTitleHtml, EntityStoreFilterCustomFuncStrategy, IgoStopPropagationModule, IgoFlexibleModule, WidgetService, Workspace, ActionStore, IgoWidgetModule } from '@igo2/common';
+import { getEntityId, getEntityTitle, getEntityProperty, getEntityRevision, getEntityIcon, EntityStore, EntityStoreStrategy, EntityStoreWatcher, SecureImagePipe, EntityTableColumnRenderer, IgoListModule, IgoCollapsibleModule, IgoImageModule, IgoPanelModule, IgoMatBadgeIconModule, IgoCustomHtmlModule, IgoEntityTableModule, IgoKeyValueModule, IgoFormModule, IgoFormFieldComponent, DOMService, EntityStoreFilterSelectionStrategy, IgoEntityModule, IgoDOMModule, DragAndDropDirective, IgoSpinnerModule, IgoDrapDropModule, IgoConfirmDialogModule, getEntityTitleHtml, EntityStoreFilterCustomFuncStrategy, IgoStopPropagationModule, IgoFlexibleModule, WidgetService, Workspace, ActionStore, IgoWidgetModule } from '@igo2/common';
 import * as i3 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
 import * as i2$1 from '@igo2/core';
@@ -19,7 +19,7 @@ import { IgoLanguageModule, ConfigService, Media, StorageScope, IgoMessageModule
 import * as i1 from '@angular/material/dialog';
 import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
 import * as i7 from '@ngx-translate/core';
-import { BehaviorSubject, combineLatest, of, Observable, forkJoin, Subject, interval, skipWhile as skipWhile$1, zip, EMPTY, ReplaySubject, timer, fromEvent, throwError } from 'rxjs';
+import { BehaviorSubject, combineLatest, of, Observable, forkJoin, Subject, interval, skipWhile as skipWhile$1, zip, EMPTY, ReplaySubject, timer, fromEvent, Subscription, throwError } from 'rxjs';
 import { map, concatMap, first, catchError, skipWhile, debounceTime, skip, distinctUntilChanged, switchMap, take, mergeMap, debounce, takeUntil } from 'rxjs/operators';
 import { Watcher, uuid, SubjectStatus, NumberUtils, ObjectUtils, userAgent, Clipboard, downloadContent, strEnum, ChangeUtils } from '@igo2/utils';
 import olMap from 'ol/Map';
@@ -54,7 +54,7 @@ import { WMSCapabilities, WMTSCapabilities, EsriJSON } from 'ol/format';
 import { Md5 } from 'ts-md5';
 import { MAC } from 'ol/has';
 import * as olfilter from 'ol/format/filter';
-import olWKT from 'ol/format/WKT';
+import olFormatWKT from 'ol/format/WKT';
 import olFormatWFS from 'ol/format/WFS';
 import moment from 'moment';
 import olFormatGML2 from 'ol/format/GML2';
@@ -105,10 +105,10 @@ import { MAT_DATE_LOCALE, MatOptionModule, MatNativeDateModule } from '@angular/
 import * as i13 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import * as i2$2 from '@angular/forms';
-import { ReactiveFormsModule, FormsModule, Validators, UntypedFormControl } from '@angular/forms';
+import { UntypedFormControl, ReactiveFormsModule, FormsModule, Validators } from '@angular/forms';
 import * as i15 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
-import * as i12$1 from '@angular/material/checkbox';
+import * as i12 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import * as i11 from '@angular/material/divider';
 import { MatDividerModule } from '@angular/material/divider';
@@ -120,7 +120,7 @@ import * as i23 from '@angular/material/slide-toggle';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import * as i13$1 from '@angular/material/slider';
 import { MatSliderModule, MatSlider } from '@angular/material/slider';
-import * as i12 from 'ngx-color-picker';
+import * as i12$1 from 'ngx-color-picker';
 import { ColorPickerModule } from 'ngx-color-picker';
 import scrollIntoView from 'scroll-into-view-if-needed';
 import OlOverlay from 'ol/Overlay';
@@ -135,13 +135,13 @@ import { doubleClick } from 'ol/events/condition';
 import lineIntersect from '@turf/line-intersect';
 import * as i18 from '@angular/material/button-toggle';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
+import * as i17 from '@angular/material/radio';
+import { MatRadioModule } from '@angular/material/radio';
 import * as i11$1 from '@angular/material/autocomplete';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import * as i25 from '@angular/material/datepicker';
 import { MatDatepickerModule } from '@angular/material/datepicker';
-import * as i17 from '@angular/material/radio';
-import { MatRadioModule } from '@angular/material/radio';
 import * as i21 from '@angular/material/table';
 import { MatTableModule } from '@angular/material/table';
 import * as i20 from '@angular/material/tabs';
@@ -157,7 +157,7 @@ import { SelectionModel } from '@angular/cdk/collections';
 import { NestedTreeControl } from '@angular/cdk/tree';
 import { encode } from 'windows-1252';
 import { saveAs } from 'file-saver';
-import jspdf from 'jspdf';
+import jsPDF from 'jspdf';
 import html2canvas from 'html2canvas';
 import JSZip from 'jszip';
 import * as i3$1 from '@angular/cdk/drag-drop';
@@ -269,7 +269,7 @@ MetadataButtonComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Met
     } }, dependencies: [i1$1.NgIf, i2.MatIcon, i3.MatButton, i4.MatTooltip, i7.TranslatePipe], changeDetection: 0 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MetadataButtonComponent, [{
         type: Component,
-        args: [{ selector: 'igo-metadata-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  *ngIf=\"(options && options.metadata && options.metadata.url) || (options && options.metadata && options.metadata.abstract)\"\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  <mat-icon svgIcon=\"information-outline\"></mat-icon>\n</button>\n" }]
+        args: [{ selector: 'igo-metadata-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\r\n  *ngIf=\"(options && options.metadata && options.metadata.url) || (options && options.metadata && options.metadata.abstract)\"\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  <mat-icon svgIcon=\"information-outline\"></mat-icon>\r\n</button>\r\n" }]
     }], function () { return [{ type: MetadataService }, { type: i1.MatDialog }]; }, { layer: [{
             type: Input
         }], color: [{
@@ -300,7 +300,7 @@ MetadataAbstractComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: M
     } }, dependencies: [i1$1.NgIf, i3.MatButton, i1.MatDialogClose, i1.MatDialogTitle, i1.MatDialogContent], styles: [".close-button{top:5px;right:5px;padding:7px;line-height:10px;position:absolute!important;min-width:auto}mat-dialog-container{position:relative}\n"], encapsulation: 2 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MetadataAbstractComponent, [{
         type: Component,
-        args: [{ selector: 'igo-metadata-abstract', encapsulation: ViewEncapsulation.None, template: "<h2 mat-dialog-title>{{ data.layerTitle }}</h2>\n<button class=\"close-button\" mat-button mat-dialog-close>X</button>\n<mat-dialog-content *ngIf=\"data.type !== 'arcgisrest'\" class=\"mat-typography\">\n  <h3>{{ data.abstract }}</h3>\n</mat-dialog-content>\n<mat-dialog-content *ngIf=\"data.type === 'arcgisrest'\" class=\"mat-typography\">\n  <h3 [innerHTML]=\"data.abstract\"></h3>\n</mat-dialog-content>\n", styles: [".close-button{top:5px;right:5px;padding:7px;line-height:10px;position:absolute!important;min-width:auto}mat-dialog-container{position:relative}\n"] }]
+        args: [{ selector: 'igo-metadata-abstract', encapsulation: ViewEncapsulation.None, template: "<h2 mat-dialog-title>{{ data.layerTitle }}</h2>\r\n<button class=\"close-button\" mat-button mat-dialog-close>X</button>\r\n<mat-dialog-content *ngIf=\"data.type !== 'arcgisrest'\" class=\"mat-typography\">\r\n  <h3>{{ data.abstract }}</h3>\r\n</mat-dialog-content>\r\n<mat-dialog-content *ngIf=\"data.type === 'arcgisrest'\" class=\"mat-typography\">\r\n  <h3 [innerHTML]=\"data.abstract\"></h3>\r\n</mat-dialog-content>\r\n", styles: [".close-button{top:5px;right:5px;padding:7px;line-height:10px;position:absolute!important;min-width:auto}mat-dialog-container{position:relative}\n"] }]
     }], function () { return [{ type: undefined, decorators: [{
                 type: Inject,
                 args: [MAT_DIALOG_DATA]
@@ -1095,6 +1095,9 @@ function roundCoordTo(coord, decimal = 3) {
         NumberUtils.roundToNDecimal(coord[1], decimal)
     ];
 }
+function roundCoordToString(coord, decimal = 3) {
+    return roundCoordTo(coord, decimal).map(r => r.toString());
+}
 /**
  * Returns an array of converted coordinates.
  * Conversion is done for every configured projections
@@ -1554,7 +1557,7 @@ class OgcFilterWriter {
         const wfsExpression = filterOptions.expression;
         let geometry;
         if (wfsWktGeometry) {
-            const wkt = new olWKT();
+            const wkt = new olFormatWKT();
             geometry = wkt.readGeometry(wfsWktGeometry, {
                 dataProjection: wfsSrsName,
                 featureProjection: wfsSrsName || 'EPSG:3857'
@@ -7713,7 +7716,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];
@@ -7768,7 +7771,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];
@@ -8345,7 +8348,7 @@ MapBrowserComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MapBrow
     } }, styles: ["[_nghost-%COMP%]{position:relative;display:block}[_nghost-%COMP%], .igo-map-browser-target[_ngcontent-%COMP%]{width:100%;height:100%}[_nghost-%COMP%]     igo-zoom-button{position:absolute;bottom:50px;right:5px}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){[_nghost-%COMP%]     igo-zoom-button{display:none}}[_nghost-%COMP%]     igo-offline-button{position:absolute;bottom:15px;right:5px}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){[_nghost-%COMP%]     igo-offline-button{bottom:5px}}[_nghost-%COMP%]     igo-geolocate-button{position:absolute;bottom:5px;right:5px}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){[_nghost-%COMP%]     igo-geolocate-button{bottom:5px}}[_nghost-%COMP%]     igo-rotation-button{position:absolute;top:50px;right:5px}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){[_nghost-%COMP%]     igo-rotation-button{bottom:50px}}[_nghost-%COMP%]     igo-wake-lock-button{position:absolute;top:95px;right:5px}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){[_nghost-%COMP%]     igo-wake-lock-button{bottom:50px}}[_nghost-%COMP%]     igo-home-extent-button{position:absolute;bottom:135px;right:5px}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){[_nghost-%COMP%]     igo-home-extent-button{bottom:5px;right:95px}}[_nghost-%COMP%]     igo-user-button{position:absolute;bottom:5px;right:55px}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){[_nghost-%COMP%]     igo-user-button{right:90px}}[_nghost-%COMP%]     igo-baselayers-switcher{position:absolute;bottom:5px;left:5px}[_nghost-%COMP%]     .ol-attribution{flex-flow:row;left:50px;bottom:5px;text-align:left;padding:0;margin-right:90px;background-color:#fff0;width:calc(100% - 100px)}[_nghost-%COMP%]     .ol-attribution.ol-logo-only{height:inherit}[_nghost-%COMP%]     .ol-attribution.ol-collapsed{background:none}[_nghost-%COMP%]     .ol-attribution.ol-collapsed button{transform:none}[_nghost-%COMP%]     .ol-attribution button{transform:rotate(180deg);background-color:#fff;cursor:pointer;outline:none}[_nghost-%COMP%]     .ol-scale-line-inner{color:#000;border-color:#000;text-shadow:rgb(255,255,255) -1px -1px 3px,rgb(255,255,255) 1px -1px 3px,rgb(255,255,255) -1px 1px 3px,rgb(255,255,255) 1px 1px 4px;box-shadow:0 1px 0 1px #fff9}[_nghost-%COMP%]     .ol-scale-line{background-color:#fff0;bottom:4px;transform:translate(-50%);left:50%}[_nghost-%COMP%]     .ol-scale-bar{background-color:#fff0;bottom:4px;transform:translate(-50%);left:50%}[_nghost-%COMP%]     .ol-scale-text{text-shadow:rgb(255,255,255) -1px -1px 3px,rgb(255,255,255) 1px -1px 3px,rgb(255,255,255) -1px 1px 3px,rgb(255,255,255) 1px 1px 4px}[_nghost-%COMP%]     .ol-scale-step-text{text-shadow:rgb(255,255,255) -1px -1px 3px,rgb(255,255,255) 1px -1px 3px,rgb(255,255,255) -1px 1px 3px,rgb(255,255,255) 1px 1px 4px}[_nghost-%COMP%]     canvas{display:block}"] });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MapBrowserComponent, [{
         type: Component,
-        args: [{ selector: 'igo-map-browser', template: "<div [id]=\"id\" class=\"igo-map-browser-target\"></div>\n<ng-content></ng-content>\n", styles: [":host{position:relative;display:block}:host,.igo-map-browser-target{width:100%;height:100%}:host ::ng-deep igo-zoom-button{position:absolute;bottom:50px;right:5px}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){:host ::ng-deep igo-zoom-button{display:none}}:host ::ng-deep igo-offline-button{position:absolute;bottom:15px;right:5px}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){:host ::ng-deep igo-offline-button{bottom:5px}}:host ::ng-deep igo-geolocate-button{position:absolute;bottom:5px;right:5px}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){:host ::ng-deep igo-geolocate-button{bottom:5px}}:host ::ng-deep igo-rotation-button{position:absolute;top:50px;right:5px}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){:host ::ng-deep igo-rotation-button{bottom:50px}}:host ::ng-deep igo-wake-lock-button{position:absolute;top:95px;right:5px}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){:host ::ng-deep igo-wake-lock-button{bottom:50px}}:host ::ng-deep igo-home-extent-button{position:absolute;bottom:135px;right:5px}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){:host ::ng-deep igo-home-extent-button{bottom:5px;right:95px}}:host ::ng-deep igo-user-button{position:absolute;bottom:5px;right:55px}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){:host ::ng-deep igo-user-button{right:90px}}:host ::ng-deep igo-baselayers-switcher{position:absolute;bottom:5px;left:5px}:host ::ng-deep .ol-attribution{flex-flow:row;left:50px;bottom:5px;text-align:left;padding:0;margin-right:90px;background-color:#fff0;width:calc(100% - 100px)}:host ::ng-deep .ol-attribution.ol-logo-only{height:inherit}:host ::ng-deep .ol-attribution.ol-collapsed{background:none}:host ::ng-deep .ol-attribution.ol-collapsed button{transform:none}:host ::ng-deep .ol-attribution button{transform:rotate(180deg);background-color:#fff;cursor:pointer;outline:none}:host ::ng-deep .ol-scale-line-inner{color:#000;border-color:#000;text-shadow:rgb(255,255,255) -1px -1px 3px,rgb(255,255,255) 1px -1px 3px,rgb(255,255,255) -1px 1px 3px,rgb(255,255,255) 1px 1px 4px;box-shadow:0 1px 0 1px #fff9}:host ::ng-deep .ol-scale-line{background-color:#fff0;bottom:4px;transform:translate(-50%);left:50%}:host ::ng-deep .ol-scale-bar{background-color:#fff0;bottom:4px;transform:translate(-50%);left:50%}:host ::ng-deep .ol-scale-text{text-shadow:rgb(255,255,255) -1px -1px 3px,rgb(255,255,255) 1px -1px 3px,rgb(255,255,255) -1px 1px 3px,rgb(255,255,255) 1px 1px 4px}:host ::ng-deep .ol-scale-step-text{text-shadow:rgb(255,255,255) -1px -1px 3px,rgb(255,255,255) 1px -1px 3px,rgb(255,255,255) -1px 1px 3px,rgb(255,255,255) 1px 1px 4px}:host ::ng-deep canvas{display:block}\n"] }]
+        args: [{ selector: 'igo-map-browser', template: "<div [id]=\"id\" class=\"igo-map-browser-target\"></div>\r\n<ng-content></ng-content>\r\n", styles: [":host{position:relative;display:block}:host,.igo-map-browser-target{width:100%;height:100%}:host ::ng-deep igo-zoom-button{position:absolute;bottom:50px;right:5px}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){:host ::ng-deep igo-zoom-button{display:none}}:host ::ng-deep igo-offline-button{position:absolute;bottom:15px;right:5px}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){:host ::ng-deep igo-offline-button{bottom:5px}}:host ::ng-deep igo-geolocate-button{position:absolute;bottom:5px;right:5px}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){:host ::ng-deep igo-geolocate-button{bottom:5px}}:host ::ng-deep igo-rotation-button{position:absolute;top:50px;right:5px}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){:host ::ng-deep igo-rotation-button{bottom:50px}}:host ::ng-deep igo-wake-lock-button{position:absolute;top:95px;right:5px}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){:host ::ng-deep igo-wake-lock-button{bottom:50px}}:host ::ng-deep igo-home-extent-button{position:absolute;bottom:135px;right:5px}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){:host ::ng-deep igo-home-extent-button{bottom:5px;right:95px}}:host ::ng-deep igo-user-button{position:absolute;bottom:5px;right:55px}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){:host ::ng-deep igo-user-button{right:90px}}:host ::ng-deep igo-baselayers-switcher{position:absolute;bottom:5px;left:5px}:host ::ng-deep .ol-attribution{flex-flow:row;left:50px;bottom:5px;text-align:left;padding:0;margin-right:90px;background-color:#fff0;width:calc(100% - 100px)}:host ::ng-deep .ol-attribution.ol-logo-only{height:inherit}:host ::ng-deep .ol-attribution.ol-collapsed{background:none}:host ::ng-deep .ol-attribution.ol-collapsed button{transform:none}:host ::ng-deep .ol-attribution button{transform:rotate(180deg);background-color:#fff;cursor:pointer;outline:none}:host ::ng-deep .ol-scale-line-inner{color:#000;border-color:#000;text-shadow:rgb(255,255,255) -1px -1px 3px,rgb(255,255,255) 1px -1px 3px,rgb(255,255,255) -1px 1px 3px,rgb(255,255,255) 1px 1px 4px;box-shadow:0 1px 0 1px #fff9}:host ::ng-deep .ol-scale-line{background-color:#fff0;bottom:4px;transform:translate(-50%);left:50%}:host ::ng-deep .ol-scale-bar{background-color:#fff0;bottom:4px;transform:translate(-50%);left:50%}:host ::ng-deep .ol-scale-text{text-shadow:rgb(255,255,255) -1px -1px 3px,rgb(255,255,255) 1px -1px 3px,rgb(255,255,255) -1px 1px 3px,rgb(255,255,255) 1px 1px 4px}:host ::ng-deep .ol-scale-step-text{text-shadow:rgb(255,255,255) -1px -1px 3px,rgb(255,255,255) 1px -1px 3px,rgb(255,255,255) -1px 1px 3px,rgb(255,255,255) 1px 1px 4px}:host ::ng-deep canvas{display:block}\n"] }]
     }], function () { return [{ type: i2$1.ActivityService }]; }, { map: [{
             type: Input
         }], view: [{
@@ -8687,7 +8690,7 @@ class HoverFeatureDirective {
             zIndex: 901,
             renderMode: "vector",
             declutter: true,
-            source: new olSourceVectorTile({}),
+            source: new olSourceVectorTile({ projection: this.map.projection }),
             style: (feature, resolution) => {
                 if (this.mvtStyleOptions && feature.getId() in this.selectionMVT) {
                     return this.createHoverStyle(feature, this.mvtStyleOptions, resolution);
@@ -9182,7 +9185,7 @@ ZoomButtonComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ZoomBut
     } }, dependencies: [i2.MatIcon, i3.MatButton, i4.MatTooltip, i7.TranslatePipe], styles: [".igo-zoom-button-container[_ngcontent-%COMP%]{width:40px}.igo-zoom-button-container[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]{background-color:#fff}.igo-zoom-button-container[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]:hover{background-color:#efefef}.igo-zoom-button-container[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]:first-child{margin-bottom:2px}button[_ngcontent-%COMP%], [_nghost-%COMP%]     button .mat-button-ripple-round{border-radius:0}"] });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ZoomButtonComponent, [{
         type: Component,
-        args: [{ selector: 'igo-zoom-button', template: "<div class=\"igo-zoom-button-container\">\n  <button\n    mat-icon-button\n    [matTooltip]=\"'igo.geo.mapButtons.zoomIn' | translate: {zoom: zoom + 1}\"\n    matTooltipPosition=\"left\"\n    [color]=\"color\"\n    [disabled]=\"zoom >= maxZoom\"\n    (click)=\"map.viewController.zoomIn()\">\n    <mat-icon svgIcon=\"plus\"></mat-icon>\n  </button>\n\n  <button\n    mat-icon-button\n    [matTooltip]=\"'igo.geo.mapButtons.zoomOut' | translate: {zoom: zoom - 1}\"\n    matTooltipPosition=\"left\"\n    [color]=\"color\"\n    [disabled]=\"zoom <= minZoom\"\n    (click)=\"map.viewController.zoomOut()\">\n    <mat-icon svgIcon=\"minus\"></mat-icon>\n  </button>\n</div>\n", styles: [".igo-zoom-button-container{width:40px}.igo-zoom-button-container button{background-color:#fff}.igo-zoom-button-container button:hover{background-color:#efefef}.igo-zoom-button-container button:first-child{margin-bottom:2px}button,:host ::ng-deep button .mat-button-ripple-round{border-radius:0}\n"] }]
+        args: [{ selector: 'igo-zoom-button', template: "<div class=\"igo-zoom-button-container\">\r\n  <button\r\n    mat-icon-button\r\n    [matTooltip]=\"'igo.geo.mapButtons.zoomIn' | translate: {zoom: zoom + 1}\"\r\n    matTooltipPosition=\"left\"\r\n    [color]=\"color\"\r\n    [disabled]=\"zoom >= maxZoom\"\r\n    (click)=\"map.viewController.zoomIn()\">\r\n    <mat-icon svgIcon=\"plus\"></mat-icon>\r\n  </button>\r\n\r\n  <button\r\n    mat-icon-button\r\n    [matTooltip]=\"'igo.geo.mapButtons.zoomOut' | translate: {zoom: zoom - 1}\"\r\n    matTooltipPosition=\"left\"\r\n    [color]=\"color\"\r\n    [disabled]=\"zoom <= minZoom\"\r\n    (click)=\"map.viewController.zoomOut()\">\r\n    <mat-icon svgIcon=\"minus\"></mat-icon>\r\n  </button>\r\n</div>\r\n", styles: [".igo-zoom-button-container{width:40px}.igo-zoom-button-container button{background-color:#fff}.igo-zoom-button-container button:hover{background-color:#efefef}.igo-zoom-button-container button:first-child{margin-bottom:2px}button,:host ::ng-deep button .mat-button-ripple-round{border-radius:0}\n"] }]
     }], function () { return []; }, { map: [{
             type: Input
         }], color: [{
@@ -9236,7 +9239,7 @@ MenuButtonComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MenuBut
     } }, dependencies: [i1$1.NgClass, i2.MatIcon, i3.MatButton, i4.MatTooltip, i7.TranslatePipe], styles: ["#menu-button[_ngcontent-%COMP%]{background-color:#fff;border-radius:0;left:5px;top:5px}#menu-button.menu-button-reverse-color[_ngcontent-%COMP%]{height:40px;border-radius:0;height:45px;width:48px;left:0px;top:3px}#menu-button.menu-button-reverse-color-close[_ngcontent-%COMP%]{border-radius:0;left:5px;top:5px}mat-icon.disabled[_ngcontent-%COMP%]{color:#00000061}#menu-button[_ngcontent-%COMP%]     div.mat-button-ripple-round{border-radius:0}"] });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MenuButtonComponent, [{
         type: Component,
-        args: [{ selector: 'igo-menu-button', template: "<button\n    mat-icon-button\n    id= \"menu-button\"\n    [ngClass]=\"menuButtonClass\"\n    tooltip-position=\"below\"\n    matTooltipShowDelay=\"500\"\n    [matTooltip]=\"(sidenavOpened ? 'menu.close' : 'menu.open') | translate\"\n    (click)=\"onToggleSidenavClick()\">\n    <mat-icon svgIcon=\"menu\"></mat-icon>\n</button>\n", styles: ["#menu-button{background-color:#fff;border-radius:0;left:5px;top:5px}#menu-button.menu-button-reverse-color{height:40px;border-radius:0;height:45px;width:48px;left:0px;top:3px}#menu-button.menu-button-reverse-color-close{border-radius:0;left:5px;top:5px}mat-icon.disabled{color:#00000061}#menu-button ::ng-deep div.mat-button-ripple-round{border-radius:0}\n"] }]
+        args: [{ selector: 'igo-menu-button', template: "<button\r\n    mat-icon-button\r\n    id= \"menu-button\"\r\n    [ngClass]=\"menuButtonClass\"\r\n    tooltip-position=\"below\"\r\n    matTooltipShowDelay=\"500\"\r\n    [matTooltip]=\"(sidenavOpened ? 'menu.close' : 'menu.open') | translate\"\r\n    (click)=\"onToggleSidenavClick()\">\r\n    <mat-icon svgIcon=\"menu\"></mat-icon>\r\n</button>\r\n", styles: ["#menu-button{background-color:#fff;border-radius:0;left:5px;top:5px}#menu-button.menu-button-reverse-color{height:40px;border-radius:0;height:45px;width:48px;left:0px;top:3px}#menu-button.menu-button-reverse-color-close{border-radius:0;left:5px;top:5px}mat-icon.disabled{color:#00000061}#menu-button ::ng-deep div.mat-button-ripple-round{border-radius:0}\n"] }]
     }], function () { return [{ type: i2$1.ConfigService }]; }, { sidenavOpened: [{
             type: Input
         }], openSidenav: [{
@@ -9306,7 +9309,7 @@ GeolocateButtonComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Ge
     } }, dependencies: [i1$1.NgIf, i2.MatIcon, i3.MatButton, i4.MatTooltip, i1$1.AsyncPipe, i7.TranslatePipe], styles: [".igo-geolocate-button-container[_ngcontent-%COMP%]{width:40px;background-color:#fff}.igo-geolocate-button-container[_ngcontent-%COMP%]:hover{background-color:#efefef}button[_ngcontent-%COMP%], [_nghost-%COMP%]     button .mat-button-ripple-round{border-radius:0}"] });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(GeolocateButtonComponent, [{
         type: Component,
-        args: [{ selector: 'igo-geolocate-button', template: "<div class=\"igo-geolocate-button-container\" *ngIf=\"map.geolocationController\">\n  <button\n    mat-icon-button\n    [matTooltip]=\"map.geolocationController.tracking ? ('igo.geo.mapButtons.geolocateInactive' | translate) :('igo.geo.mapButtons.geolocate' | translate)\"\n    matTooltipPosition=\"left\"\n    [color]=\"color\"\n    (click)=\"onGeolocationClick()\">\n    <mat-icon svgIcon=\"{{icon$ | async}}\"></mat-icon>\n  </button>\n</div>\n", styles: [".igo-geolocate-button-container{width:40px;background-color:#fff}.igo-geolocate-button-container:hover{background-color:#efefef}button,:host ::ng-deep button .mat-button-ripple-round{border-radius:0}\n"] }]
+        args: [{ selector: 'igo-geolocate-button', template: "<div class=\"igo-geolocate-button-container\" *ngIf=\"map.geolocationController\">\r\n  <button\r\n    mat-icon-button\r\n    [matTooltip]=\"map.geolocationController.tracking ? ('igo.geo.mapButtons.geolocateInactive' | translate) :('igo.geo.mapButtons.geolocate' | translate)\"\r\n    matTooltipPosition=\"left\"\r\n    [color]=\"color\"\r\n    (click)=\"onGeolocationClick()\">\r\n    <mat-icon svgIcon=\"{{icon$ | async}}\"></mat-icon>\r\n  </button>\r\n</div>\r\n", styles: [".igo-geolocate-button-container{width:40px;background-color:#fff}.igo-geolocate-button-container:hover{background-color:#efefef}button,:host ::ng-deep button .mat-button-ripple-round{border-radius:0}\n"] }]
     }], function () { return [{ type: i2$1.ConfigService }]; }, { map: [{
             type: Input
         }], color: [{
@@ -9425,7 +9428,7 @@ OfflineButtonComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Offl
     } }, dependencies: [i1$1.NgClass, i1$1.NgIf, i2.MatIcon, i3.MatButton, i4.MatTooltip, i7.TranslatePipe], styles: [".baseStyle[_ngcontent-%COMP%]{width:40px;background-color:#fff}.baseStyle[_ngcontent-%COMP%]:hover{background-color:#efefef}.toggleStyle[_ngcontent-%COMP%]{width:40px;background-color:#b9b9b9}button[_ngcontent-%COMP%], [_nghost-%COMP%]     button .mat-button-ripple-round{border-radius:0}"] });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(OfflineButtonComponent, [{
         type: Component,
-        args: [{ selector: 'igo-offline-button', template: "<div *ngIf=\"visible\" class=\"igo-user-button-container\">\n  <div>\n    <button\n      mat-icon-button\n      [matTooltip]=\"checked ? ('igo.geo.mapButtons.online' | translate): ('igo.geo.mapButtons.offline' | translate)\"\n      matTooltipPosition=\"left\"\n      [ngClass]=\"[btnStyle]\"\n      [color]=\"checked ? color : [colorOff]\"\n      (click)=\"onToggle()\"\n      (click)=\"map.onOfflineToggle(check)\">\n      <mat-icon svgIcon=\"wifi-strength-off\"></mat-icon>\n    </button>\n  </div>\n</div>", styles: [".baseStyle{width:40px;background-color:#fff}.baseStyle:hover{background-color:#efefef}.toggleStyle{width:40px;background-color:#b9b9b9}button,:host ::ng-deep button .mat-button-ripple-round{border-radius:0}\n"] }]
+        args: [{ selector: 'igo-offline-button', template: "<div *ngIf=\"visible\" class=\"igo-user-button-container\">\r\n  <div>\r\n    <button\r\n      mat-icon-button\r\n      [matTooltip]=\"checked ? ('igo.geo.mapButtons.online' | translate): ('igo.geo.mapButtons.offline' | translate)\"\r\n      matTooltipPosition=\"left\"\r\n      [ngClass]=\"[btnStyle]\"\r\n      [color]=\"checked ? color : [colorOff]\"\r\n      (click)=\"onToggle()\"\r\n      (click)=\"map.onOfflineToggle(check)\">\r\n      <mat-icon svgIcon=\"wifi-strength-off\"></mat-icon>\r\n    </button>\r\n  </div>\r\n</div>", styles: [".baseStyle{width:40px;background-color:#fff}.baseStyle:hover{background-color:#efefef}.toggleStyle{width:40px;background-color:#b9b9b9}button,:host ::ng-deep button .mat-button-ripple-round{border-radius:0}\n"] }]
     }], function () { return [{ type: i2$1.ConfigService }]; }, { change: [{
             type: Output
         }], map: [{
@@ -9530,7 +9533,7 @@ WakeLockButtonComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Wak
     } }, dependencies: [i1$1.NgIf, i2.MatIcon, i3.MatButton, i4.MatTooltip, i1$1.AsyncPipe, i7.TranslatePipe], styles: [".igo-wake-lock-button-container[_ngcontent-%COMP%]{width:40px;background-color:#fff}.igo-wake-lock-button-container[_ngcontent-%COMP%]:hover{background-color:#efefef}button[_ngcontent-%COMP%], [_nghost-%COMP%]     button .mat-button-ripple-round{border-radius:0}"] });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(WakeLockButtonComponent, [{
         type: Component,
-        args: [{ selector: 'igo-wake-lock-button', template: "<div *ngIf=\"visible\" class=\"igo-wake-lock-button-container\">\n  <div>\n    <button \n      [color]=\"color\"\n      mat-icon-button\n      [matTooltip]=\"enabled ? ('igo.geo.mapButtons.preventSreenLock' | translate): ('igo.geo.mapButtons.letScreenLock' | translate)\"\n      matTooltipPosition=\"left\"\n      (click)=\"toggleWakeLock()\">\n      <mat-icon svgIcon=\"{{icon$ | async}}\"></mat-icon>\n    </button>\n  </div>\n</div>", styles: [".igo-wake-lock-button-container{width:40px;background-color:#fff}.igo-wake-lock-button-container:hover{background-color:#efefef}button,:host ::ng-deep button .mat-button-ripple-round{border-radius:0}\n"] }]
+        args: [{ selector: 'igo-wake-lock-button', template: "<div *ngIf=\"visible\" class=\"igo-wake-lock-button-container\">\r\n  <div>\r\n    <button \r\n      [color]=\"color\"\r\n      mat-icon-button\r\n      [matTooltip]=\"enabled ? ('igo.geo.mapButtons.preventSreenLock' | translate): ('igo.geo.mapButtons.letScreenLock' | translate)\"\r\n      matTooltipPosition=\"left\"\r\n      (click)=\"toggleWakeLock()\">\r\n      <mat-icon svgIcon=\"{{icon$ | async}}\"></mat-icon>\r\n    </button>\r\n  </div>\r\n</div>", styles: [".igo-wake-lock-button-container{width:40px;background-color:#fff}.igo-wake-lock-button-container:hover{background-color:#efefef}button,:host ::ng-deep button .mat-button-ripple-round{border-radius:0}\n"] }]
     }], function () { return [{ type: i2$1.ConfigService }, { type: i2$1.StorageService }]; }, { color: [{
             type: Input
         }], map: [{
@@ -9643,7 +9646,7 @@ BaseLayersSwitcherComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
     } }, styles: [".igo-baselayers-switcher-container[_ngcontent-%COMP%]{height:auto;position:relative}.container-expand[_ngcontent-%COMP%]{overflow:hidden;border-width:0}.more-baselayers[_ngcontent-%COMP%]{width:80px;height:20px;background-color:#fff;text-align:center;cursor:pointer}.more-baselayers[_ngcontent-%COMP%]:hover{background-color:#efefef}.igo-baselayers-switcher-button-container[_ngcontent-%COMP%]{width:40px;background-color:#fff}.igo-baselayers-switcher-button-container[_ngcontent-%COMP%]:hover{background-color:#efefef}button[_ngcontent-%COMP%], [_nghost-%COMP%]     button .mat-button-ripple-round{border-radius:0}"], data: { animation: [baseLayersSwitcherSlideInOut()] } });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(BaseLayersSwitcherComponent, [{
         type: Component,
-        args: [{ selector: 'igo-baselayers-switcher', animations: [baseLayersSwitcherSlideInOut()], template: "<div *ngIf=\"baseLayers.length > 0\"\n     class=\"igo-baselayers-switcher-container\"\n     [ngClass]=\"{'container-expand': expand}\"\n     [@baseLayerSwitcherState]=\"expand ? 'expand' : useStaticIcon ? 'collapseIcon' : 'collapseMap'\"\n     (@baseLayerSwitcherState.start)=\"showButton=false\"\n     (@baseLayerSwitcherState.done)=\"showButton=true\"\n     (click)=\"collapseOrExpand()\">\n\n     <div *ngIf=\"useStaticIcon && !expand && showButton\" class=\"igo-baselayers-switcher-button-container\">\n       <button\n         mat-icon-button\n         [matTooltip]=\"'igo.geo.mapButtons.baselayerSwitcher' | translate\"\n         matTooltipPosition=\"right\"\n         color=\"primary\">\n         <mat-icon svgIcon=\"image-multiple\"></mat-icon>\n       </button>\n     </div>\n\n     <igo-mini-basemap class=\"mat-typography\" *ngFor=\"let baseLayer of baseLayers; let i = index\"\n       [map]=\"map\"\n       [baseLayer]=\"baseLayer\"\n       [title]=\"(baseLayers.length > 2 && !expand) ? ('igo.geo.baselayersSwitcher.title' | translate) : baseLayer.title\"\n       [display]=\"expand || (i === 0 && !useStaticIcon)\"\n       [disabled]=\"!expand && baseLayers.length > 1\">\n     </igo-mini-basemap>\n\n    <div class=\"more-baselayers\">\n      <mat-icon class=\"material-icons mat-icon mat-list-avatar\" color=\"primary\" svgIcon=\"menu-down\"></mat-icon>\n    </div>\n\n</div>\n", styles: [".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}button,:host ::ng-deep button .mat-button-ripple-round{border-radius:0}\n"] }]
+        args: [{ selector: 'igo-baselayers-switcher', animations: [baseLayersSwitcherSlideInOut()], template: "<div *ngIf=\"baseLayers.length > 0\"\r\n     class=\"igo-baselayers-switcher-container\"\r\n     [ngClass]=\"{'container-expand': expand}\"\r\n     [@baseLayerSwitcherState]=\"expand ? 'expand' : useStaticIcon ? 'collapseIcon' : 'collapseMap'\"\r\n     (@baseLayerSwitcherState.start)=\"showButton=false\"\r\n     (@baseLayerSwitcherState.done)=\"showButton=true\"\r\n     (click)=\"collapseOrExpand()\">\r\n\r\n     <div *ngIf=\"useStaticIcon && !expand && showButton\" class=\"igo-baselayers-switcher-button-container\">\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         <mat-icon svgIcon=\"image-multiple\"></mat-icon>\r\n       </button>\r\n     </div>\r\n\r\n     <igo-mini-basemap class=\"mat-typography\" *ngFor=\"let baseLayer of baseLayers; let i = index\"\r\n       [map]=\"map\"\r\n       [baseLayer]=\"baseLayer\"\r\n       [title]=\"(baseLayers.length > 2 && !expand) ? ('igo.geo.baselayersSwitcher.title' | translate) : baseLayer.title\"\r\n       [display]=\"expand || (i === 0 && !useStaticIcon)\"\r\n       [disabled]=\"!expand && baseLayers.length > 1\">\r\n     </igo-mini-basemap>\r\n\r\n    <div class=\"more-baselayers\">\r\n      <mat-icon class=\"material-icons mat-icon mat-list-avatar\" color=\"primary\" svgIcon=\"menu-down\"></mat-icon>\r\n    </div>\r\n\r\n</div>\r\n", styles: [".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}button,:host ::ng-deep button .mat-button-ripple-round{border-radius:0}\n"] }]
     }], function () { return [{ type: i2$1.MediaService }]; }, { map: [{
             type: Input
         }], useStaticIcon: [{
@@ -9656,7 +9659,7 @@ class GeoDBService {
         this.compression = compression;
         this.dbName = 'geoData';
         this.collisionsMap = new Map();
-        this._newTiles = 0;
+        this._newData = 0;
     }
     /**
      * Only blob can be will be compressed
@@ -9691,7 +9694,7 @@ class GeoDBService {
             return this.ngxIndexedDBService.getByID(this.dbName, url);
         }), concatMap((dbObject) => {
             if (!dbObject) {
-                this._newTiles++;
+                this._newData++;
                 return this.ngxIndexedDBService.add(this.dbName, geoDBData);
             }
             else {
@@ -9743,11 +9746,11 @@ class GeoDBService {
     deleteByKey(url) {
         return this.ngxIndexedDBService.deleteByKey(this.dbName, url);
     }
-    getRegionTileCountByID(id) {
+    getRegionCountByID(id) {
         const subject = new Subject();
         const dbRequest = this.getRegionByID(id)
-            .subscribe((tiles) => {
-            subject.next(tiles.length);
+            .subscribe((datas) => {
+            subject.next(datas.length);
             subject.complete();
         });
         return subject;
@@ -9766,9 +9769,9 @@ class GeoDBService {
         }
         const IDBKey = IDBKeyRange.only(id);
         const dbRequest = this.ngxIndexedDBService.getAllByIndex(this.dbName, 'regionID', IDBKey);
-        dbRequest.subscribe((tiles) => {
-            tiles.forEach((tile) => {
-                this.ngxIndexedDBService.deleteByKey(this.dbName, tile.url);
+        dbRequest.subscribe((datas) => {
+            datas.forEach((data) => {
+                this.ngxIndexedDBService.deleteByKey(this.dbName, data.url);
             });
         });
         return dbRequest;
@@ -9779,7 +9782,7 @@ class GeoDBService {
     }
     resetCounters() {
         this.resetCollisionsMap();
-        this._newTiles = 0;
+        this._newData = 0;
     }
     resetCollisionsMap() {
         this.collisionsMap = new Map();
@@ -9797,8 +9800,8 @@ class GeoDBService {
             }
         }
     }
-    get newTiles() {
-        return this._newTiles;
+    get newData() {
+        return this._newData;
     }
 }
 GeoDBService.ɵfac = function GeoDBService_Factory(t) { return new (t || GeoDBService)(i0.ɵɵinject(i1$3.NgxIndexedDBService), i0.ɵɵinject(i2$1.CompressionService)); };
@@ -10158,7 +10161,7 @@ MiniBaseMapComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MiniBa
     } }, styles: [".igo-mini-basemap-container[_ngcontent-%COMP%]{width:80px;height:80px;background-color:#ffffff03;border:2px solid white;box-shadow:0 1px 4px #0000004d;cursor:pointer;margin-top:5px}.igo-mini-basemap-container[_ngcontent-%COMP%]:hover   .igo-mini-basemap-title[_ngcontent-%COMP%]{color:#000;text-shadow:0 0 5px white}.igo-mini-basemap-container[_ngcontent-%COMP%] > div[_ngcontent-%COMP%]{width:100%;height:100%}.igo-mini-basemap-title[_ngcontent-%COMP%]{position:relative;top:-76px;height:76px;width:76px;text-align:center;vertical-align:bottom;color:#fff;text-shadow:0 0 5px black;white-space:normal;display:flex;align-items:flex-end;justify-content:center}"] });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MiniBaseMapComponent, [{
         type: Component,
-        args: [{ selector: 'igo-mini-basemap', template: "<div class=\"igo-mini-basemap-container\">\n\n  <div *ngIf=\"display\" (click)=\"changeBaseLayer(baseLayer)\">\n    <igo-map-browser [map]=\"basemap\"></igo-map-browser>\n    <div *ngIf='title' class='igo-mini-basemap-title'> {{title}} </div>\n  </div>\n\n</div>\n", styles: [".igo-mini-basemap-container{width:80px;height:80px;background-color:#ffffff03;border:2px solid white;box-shadow:0 1px 4px #0000004d;cursor:pointer;margin-top:5px}.igo-mini-basemap-container:hover .igo-mini-basemap-title{color:#000;text-shadow:0 0 5px white}.igo-mini-basemap-container>div{width:100%;height:100%}.igo-mini-basemap-title{position:relative;top:-76px;height:76px;width:76px;text-align:center;vertical-align:bottom;color:#fff;text-shadow:0 0 5px black;white-space:normal;display:flex;align-items:flex-end;justify-content:center}\n"] }]
+        args: [{ selector: 'igo-mini-basemap', template: "<div class=\"igo-mini-basemap-container\">\r\n\r\n  <div *ngIf=\"display\" (click)=\"changeBaseLayer(baseLayer)\">\r\n    <igo-map-browser [map]=\"basemap\"></igo-map-browser>\r\n    <div *ngIf='title' class='igo-mini-basemap-title'> {{title}} </div>\r\n  </div>\r\n\r\n</div>\r\n", styles: [".igo-mini-basemap-container{width:80px;height:80px;background-color:#ffffff03;border:2px solid white;box-shadow:0 1px 4px #0000004d;cursor:pointer;margin-top:5px}.igo-mini-basemap-container:hover .igo-mini-basemap-title{color:#000;text-shadow:0 0 5px white}.igo-mini-basemap-container>div{width:100%;height:100%}.igo-mini-basemap-title{position:relative;top:-76px;height:76px;width:76px;text-align:center;vertical-align:bottom;color:#fff;text-shadow:0 0 5px black;white-space:normal;display:flex;align-items:flex-end;justify-content:center}\n"] }]
     }], function () { return [{ type: LayerService }, { type: i0.ApplicationRef }]; }, { map: [{
             type: Input
         }], disabled: [{
@@ -10223,7 +10226,7 @@ RotationButtonComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Rot
     } }, dependencies: [i1$1.NgIf, i1$1.NgStyle, i2.MatIcon, i3.MatButton, i4.MatTooltip, i1$1.AsyncPipe, i7.TranslatePipe], styles: [".igo-rotation-button-container[_ngcontent-%COMP%]{width:40px;background-color:#fff}.igo-rotation-button-container[_ngcontent-%COMP%]:hover{background-color:#efefef}button[_ngcontent-%COMP%], [_nghost-%COMP%]     button .mat-button-ripple-round{border-radius:0}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){button[_ngcontent-%COMP%]:disabled, [_nghost-%COMP%]     button .mat-button-ripple-round:disabled{display:none}}"] });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(RotationButtonComponent, [{
         type: Component,
-        args: [{ selector: 'igo-rotation-button', template: "<div *ngIf=\"((rotated$ | async) && !showIfNoRotation) || showIfNoRotation\" class=\"igo-rotation-button-container\"\n  [matTooltip]=\"(rotated$ | async) ? ('igo.geo.mapButtons.resetRotation' | translate: {azimuth: azimuthRounded, rotation: rotationRounded}): ('igo.geo.mapButtons.tipRotation' | translate)\"\n  matTooltipPosition=\"left\">\n  <button mat-icon-button matTooltipPosition=\"left\" [color]=\"color\" [disabled]=\"(rotated$ | async) === false\"\n    (click)=\"map.viewController.resetRotation()\">\n    <mat-icon [ngStyle]=\"currentStyle$ | async\" svgIcon=\"navigation\">\n    </mat-icon>\n  </button>\n</div>\n", styles: [".igo-rotation-button-container{width:40px;background-color:#fff}.igo-rotation-button-container:hover{background-color:#efefef}button,:host ::ng-deep button .mat-button-ripple-round{border-radius:0}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){button:disabled,:host ::ng-deep button .mat-button-ripple-round:disabled{display:none}}\n"] }]
+        args: [{ selector: 'igo-rotation-button', template: "<div *ngIf=\"((rotated$ | async) && !showIfNoRotation) || showIfNoRotation\" class=\"igo-rotation-button-container\"\r\n  [matTooltip]=\"(rotated$ | async) ? ('igo.geo.mapButtons.resetRotation' | translate: {azimuth: azimuthRounded, rotation: rotationRounded}): ('igo.geo.mapButtons.tipRotation' | translate)\"\r\n  matTooltipPosition=\"left\">\r\n  <button mat-icon-button matTooltipPosition=\"left\" [color]=\"color\" [disabled]=\"(rotated$ | async) === false\"\r\n    (click)=\"map.viewController.resetRotation()\">\r\n    <mat-icon [ngStyle]=\"currentStyle$ | async\" svgIcon=\"navigation\">\r\n    </mat-icon>\r\n  </button>\r\n</div>\r\n", styles: [".igo-rotation-button-container{width:40px;background-color:#fff}.igo-rotation-button-container:hover{background-color:#efefef}button,:host ::ng-deep button .mat-button-ripple-round{border-radius:0}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){button:disabled,:host ::ng-deep button .mat-button-ripple-round:disabled{display:none}}\n"] }]
     }], function () { return []; }, { map: [{
             type: Input
         }], showIfNoRotation: [{
@@ -10417,7 +10420,7 @@ SwipeControlComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Swipe
     } }, styles: [".igo-swipe-control-container[_ngcontent-%COMP%]{position:absolute;width:80px;height:100%;top:0%;left:50%;cursor:-webkit-grab;cursor:grab;z-index:1;transform:translate(-40px)}.igo-swipe-control-container[_ngcontent-%COMP%]:active{cursor:-webkit-grabbing;cursor:grabbing}.igo-swipe-control-line[_ngcontent-%COMP%]{position:absolute;width:4px;height:100%;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#5e5a5a}.igo-swipe-control-arrows[_ngcontent-%COMP%]{position:absolute;width:32px;height:32px;left:50%;top:50%;transform:translate(-50%,-50%);margin-top:-16px;padding:5px 4px;background-color:#5e5a5a;z-index:2;-webkit-tap-highlight-color:rgba(0,0,0,0)}.igo-swipe-control-arrows[_ngcontent-%COMP%]   div[_ngcontent-%COMP%]{display:inline-block;width:0;height:0;border-top:10px solid transparent;border-bottom:10px solid transparent}.igo-swipe-control-arrows[_ngcontent-%COMP%]   .igo-arrow-right[_ngcontent-%COMP%]{margin-left:4px;border-left:10px solid white}.igo-swipe-control-arrows[_ngcontent-%COMP%]   .igo-arrow-left[_ngcontent-%COMP%]{border-right:10px solid white}.igo-swipe-control-arrows[_ngcontent-%COMP%]:active{display:none}"] });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SwipeControlComponent, [{
         type: Component,
-        args: [{ selector: 'igo-swipe-control', template: "<div class=\"igo-swipe-control-container\"  id=\"igo-layer-swipe\"\n  (mousedown)=\"dragDown($event)\"\n  (mouseup)=\"closeDragMouseElement()\"\n  (touchstart)=\"dragDown($event)\"\n  (touchend)=\"closeDragTouchElement()\">\n  <div class=\"igo-swipe-control-line\" ></div>\n  \n  <div class=\"igo-swipe-control-arrows\" id=\"arrows\">\n    <div class=\"igo-arrow-left\"></div>\n    <div class=\"igo-arrow-right\"></div>\n  </div>\n</div>\n", styles: [".igo-swipe-control-container{position:absolute;width:80px;height:100%;top:0%;left:50%;cursor:-webkit-grab;cursor:grab;z-index:1;transform:translate(-40px)}.igo-swipe-control-container:active{cursor:-webkit-grabbing;cursor:grabbing}.igo-swipe-control-line{position:absolute;width:4px;height:100%;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#5e5a5a}.igo-swipe-control-arrows{position:absolute;width:32px;height:32px;left:50%;top:50%;transform:translate(-50%,-50%);margin-top:-16px;padding:5px 4px;background-color:#5e5a5a;z-index:2;-webkit-tap-highlight-color:rgba(0,0,0,0)}.igo-swipe-control-arrows div{display:inline-block;width:0;height:0;border-top:10px solid transparent;border-bottom:10px solid transparent}.igo-swipe-control-arrows .igo-arrow-right{margin-left:4px;border-left:10px solid white}.igo-swipe-control-arrows .igo-arrow-left{border-right:10px solid white}.igo-swipe-control-arrows:active{display:none}\n"] }]
+        args: [{ selector: 'igo-swipe-control', template: "<div class=\"igo-swipe-control-container\"  id=\"igo-layer-swipe\"\r\n  (mousedown)=\"dragDown($event)\"\r\n  (mouseup)=\"closeDragMouseElement()\"\r\n  (touchstart)=\"dragDown($event)\"\r\n  (touchend)=\"closeDragTouchElement()\">\r\n  <div class=\"igo-swipe-control-line\" ></div>\r\n  \r\n  <div class=\"igo-swipe-control-arrows\" id=\"arrows\">\r\n    <div class=\"igo-arrow-left\"></div>\r\n    <div class=\"igo-arrow-right\"></div>\r\n  </div>\r\n</div>\r\n", styles: [".igo-swipe-control-container{position:absolute;width:80px;height:100%;top:0%;left:50%;cursor:-webkit-grab;cursor:grab;z-index:1;transform:translate(-40px)}.igo-swipe-control-container:active{cursor:-webkit-grabbing;cursor:grabbing}.igo-swipe-control-line{position:absolute;width:4px;height:100%;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#5e5a5a}.igo-swipe-control-arrows{position:absolute;width:32px;height:32px;left:50%;top:50%;transform:translate(-50%,-50%);margin-top:-16px;padding:5px 4px;background-color:#5e5a5a;z-index:2;-webkit-tap-highlight-color:rgba(0,0,0,0)}.igo-swipe-control-arrows div{display:inline-block;width:0;height:0;border-top:10px solid transparent;border-bottom:10px solid transparent}.igo-swipe-control-arrows .igo-arrow-right{margin-left:4px;border-left:10px solid white}.igo-swipe-control-arrows .igo-arrow-left{border-right:10px solid white}.igo-swipe-control-arrows:active{display:none}\n"] }]
     }], function () { return []; }, { map: [{
             type: Input
         }] }); })();
@@ -10465,7 +10468,7 @@ MapCenterComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MapCente
     } }, styles: [".mapCenter[_ngcontent-%COMP%]{width:30px;height:30px;position:absolute;top:50%;left:50%;transform:translate(-15px,-15px);pointer-events:none}.mapCenter[_ngcontent-%COMP%]   .vertical[_ngcontent-%COMP%], .mapCenter[_ngcontent-%COMP%]   .horizontal[_ngcontent-%COMP%]{width:4px;height:30px;position:absolute;left:13px;background-color:#000}.mapCenter[_ngcontent-%COMP%]   .horizontal[_ngcontent-%COMP%]{transform:rotate(90deg)}"] });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MapCenterComponent, [{
         type: Component,
-        args: [{ selector: 'igo-map-center', template: "<div\n    class=\"mapCenter\"\n    id=\"mapCenter\">\n    <div class=\"vertical\"></div>\n    <div class=\"horizontal\"></div>\n</div>\n", styles: [".mapCenter{width:30px;height:30px;position:absolute;top:50%;left:50%;transform:translate(-15px,-15px);pointer-events:none}.mapCenter .vertical,.mapCenter .horizontal{width:4px;height:30px;position:absolute;left:13px;background-color:#000}.mapCenter .horizontal{transform:rotate(90deg)}\n"] }]
+        args: [{ selector: 'igo-map-center', template: "<div\r\n    class=\"mapCenter\"\r\n    id=\"mapCenter\">\r\n    <div class=\"vertical\"></div>\r\n    <div class=\"horizontal\"></div>\r\n</div>\r\n", styles: [".mapCenter{width:30px;height:30px;position:absolute;top:50%;left:50%;transform:translate(-15px,-15px);pointer-events:none}.mapCenter .vertical,.mapCenter .horizontal{width:4px;height:30px;position:absolute;left:13px;background-color:#000}.mapCenter .horizontal{transform:rotate(90deg)}\n"] }]
     }], function () { return []; }, { map: [{
             type: Input
         }] }); })();
@@ -10492,7 +10495,7 @@ InfoSectionComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: InfoSe
     } }, dependencies: [i1$1.NgIf], styles: [".infoSection[_ngcontent-%COMP%]{border-radius:10px;background-color:#6e6e6e66;padding:2.5px;position:absolute;text-align:center;top:5px;left:50%;text-shadow:0 0 5px white,0 0 10px white,0 0 15px white}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){.infoSection[_ngcontent-%COMP%]{top:50px;left:10%}}"] });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(InfoSectionComponent, [{
         type: Component,
-        args: [{ selector: 'igo-info-section', template: "<div *ngIf=\"infoContent && infoContent.length\" class=\"infoSection\">\n    <pre>{{infoContent}}</pre>\n</div>", styles: [".infoSection{border-radius:10px;background-color:#6e6e6e66;padding:2.5px;position:absolute;text-align:center;top:5px;left:50%;text-shadow:0 0 5px white,0 0 10px white,0 0 15px white}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){.infoSection{top:50px;left:10%}}\n"] }]
+        args: [{ selector: 'igo-info-section', template: "<div *ngIf=\"infoContent && infoContent.length\" class=\"infoSection\">\r\n    <pre>{{infoContent}}</pre>\r\n</div>", styles: [".infoSection{border-radius:10px;background-color:#6e6e6e66;padding:2.5px;position:absolute;text-align:center;top:5px;left:50%;text-shadow:0 0 5px white,0 0 10px white,0 0 15px white}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){.infoSection{top:50px;left:10%}}\n"] }]
     }], function () { return []; }, { infoContent: [{
             type: Input
         }] }); })();
@@ -10819,7 +10822,7 @@ class QueryService {
                 features = this.extractGML2Data(res, layer, allowedFieldsAndAlias);
                 break;
         }
-        if (features.length > 0 && features[0].geometry === null) {
+        if (features.length > 0 && (features[0].geometry === null || !features[0].geometry)) {
             const geomToAdd = this.createGeometryFromUrlClick(url);
             for (const feature of features) {
                 feature.geometry = geomToAdd;
@@ -10830,7 +10833,7 @@ class QueryService {
             new RegExp('FEATURE_COUNT=' + this.featureCount) :
             new RegExp('FEATURE_COUNT=' + this.defaultFeatureCount);
         if (featureCount.test(url) &&
-            ((wmsDatasource.params?.FEATURE_COUNT && features.length === this.featureCount) ||
+            ((wmsDatasource.params?.FEATURE_COUNT && this.featureCount > 1 && features.length === this.featureCount) ||
                 (!wmsDatasource.params?.FEATURE_COUNT && features.length === this.defaultFeatureCount))) {
             this.languageService.translate.get('igo.geo.query.featureCountMax', { value: layer.title }).subscribe(message => {
                 const messageObj = this.messageService.info(message);
@@ -12520,6 +12523,9 @@ class CatalogBrowserComponent {
             if (!layer.options.sourceOptions.optionsFromApi) {
                 layer.options.sourceOptions.optionsFromApi = true;
             }
+            if (this.catalog.profils?.length) {
+                layer.options.security = { profils: this.catalog.profils };
+            }
             return this.layerService.createAsyncLayer(layer.options);
         });
         zip(...layers$).subscribe((oLayers) => {
@@ -12612,7 +12618,7 @@ CatalogBrowserComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Cat
     } }, encapsulation: 2, changeDetection: 0 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CatalogBrowserComponent, [{
         type: Component,
-        args: [{ selector: 'igo-catalog-browser', changeDetection: ChangeDetectionStrategy.OnPush, template: "<igo-list [navigation]=\"false\" [selection]=\"false\">\n  <ng-template ngFor let-item [ngForOf]=\"store.view.all$() | async\">\n    <ng-container *ngIf=\"isGroup(item)\">\n      <igo-catalog-browser-group\n        [catalog]=\"catalog\"\n        [group]=\"item\"\n        [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      </igo-catalog-browser-group>\n    </ng-container>\n\n    <ng-container *ngIf=\"isLayer(item)\">\n      <igo-catalog-browser-layer\n        igoListItem\n        [layer]=\"item\"\n        [resolution]=\"resolution$ | async\"\n        [catalogAllowLegend]=\"catalogAllowLegend\"\n        [added]=\"store.state.get(item).added\"\n        (addedChange)=\"onLayerAddedChange($event)\">\n      </igo-catalog-browser-layer>\n    </ng-container>\n  </ng-template>\n</igo-list>\n" }]
+        args: [{ selector: 'igo-catalog-browser', changeDetection: ChangeDetectionStrategy.OnPush, template: "<igo-list [navigation]=\"false\" [selection]=\"false\">\r\n  <ng-template ngFor let-item [ngForOf]=\"store.view.all$() | async\">\r\n    <ng-container *ngIf=\"isGroup(item)\">\r\n      <igo-catalog-browser-group\r\n        [catalog]=\"catalog\"\r\n        [group]=\"item\"\r\n        [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      </igo-catalog-browser-group>\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"isLayer(item)\">\r\n      <igo-catalog-browser-layer\r\n        igoListItem\r\n        [layer]=\"item\"\r\n        [resolution]=\"resolution$ | async\"\r\n        [catalogAllowLegend]=\"catalogAllowLegend\"\r\n        [added]=\"store.state.get(item).added\"\r\n        (addedChange)=\"onLayerAddedChange($event)\">\r\n      </igo-catalog-browser-layer>\r\n    </ng-container>\r\n  </ng-template>\r\n</igo-list>\r\n" }]
     }], function () { return [{ type: LayerService }, { type: i0.ChangeDetectorRef }]; }, { catalogAllowLegend: [{
             type: Input
         }], catalog: [{
@@ -12984,7 +12990,7 @@ LayerLegendComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LayerL
     } }, dependencies: [i13.MatFormField, i2$2.NgControlStatus, i1$1.NgClass, i1$1.NgForOf, i1$1.NgIf, i1$1.NgStyle, i2$2.NgModel, i2.MatIcon, i15.MatSelect, i9.MatOption, i4.MatTooltip, i5.MatListItem, i5.MatListAvatarCssMatStyler, i9.MatLine, i5$1.CollapseDirective, i5$1.ImageErrorDirective, i1$1.AsyncPipe, i7.TranslatePipe, i5$1.SanitizeHtmlPipe], styles: [".igo-layer-legend.with-title[_ngcontent-%COMP%]{padding-left:18px}img[_ngcontent-%COMP%]:after{content:\" \";position:relative;height:17px;float:left;width:17px;top:-3px;right:19px;background-color:#fff;border:3px solid #f3f3f3;border-radius:50%;-webkit-animation:2s linear infinite spin;animation:2s linear infinite spin}@-moz-document url-prefix(){img:after{margin-left:19px}}@-webkit-keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}"], changeDetection: 0 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LayerLegendComponent, [{
         type: Component,
-        args: [{ selector: 'igo-layer-legend', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"legendItems$ | async as items\">\n  <ng-container *ngIf=\"items.length; else noItems\">\n    <ng-container *ngFor=\"let item of items.slice().reverse()\" #renderedLegends>\n      <div *ngIf=\"getLegend; else noItems\">\n        <mat-list-item *ngIf=\"item.title\">\n          <mat-icon\n            id=\"legend-toggle\"\n            class=\"igo-chevron\"\n            mat-list-avatar\n            igoCollapse\n            [target]=\"legend\"\n            [collapsed]=\"(item.collapsed)\"\n            (toggle)=\"toggleLegendItem($event, item)\"\n            svgIcon=\"chevron-up\">\n          </mat-icon>\n          <h4 matLine>{{computeItemTitle(item) | async}} </h4>\n        </mat-list-item>\n        <div #legend class=\"igo-layer-legend\" [ngClass]=\"{'with-title': item.title}\">\n          <div *ngIf=\"currentStyle !== undefined\">\n              <mat-form-field>\n                <mat-select tooltip-position=\"below\" matTooltipShowDelay=\"500\"\n                  [matTooltip]=\"'igo.geo.layer.legend.selectStyle' | translate\" [(ngModel)]=\"currentStyle\"\n                  (selectionChange)=\"onChangeStyle()\">\n                  <mat-option *ngFor=\"let style of styles\" [value]=\"style.name\">{{style.title}}</mat-option>\n                </mat-select>\n            </mat-form-field>\n          </div>\n          <div *ngIf=\"!(item.collapsed)\">\n            <div *ngIf=\"item.url\">\n              <img igoImageError *ngIf=\"item.imgGraphValue\" hideError=\"true\" #renderedLegend id=\"{{item.title}}\" (load)=\"onLoadImage(item.title)\"\n                [src]=\"item.imgGraphValue\"\n                alt=\"{{'igo.geo.layer.legend.loadingLegendText' | translate}}\">\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\n</ng-container>\n", styles: [".igo-layer-legend.with-title{padding-left:18px}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%;-webkit-animation:2s linear infinite spin;animation:2s linear infinite spin}@-moz-document url-prefix(){img:after{margin-left:19px}}@-webkit-keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
+        args: [{ selector: 'igo-layer-legend', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"legendItems$ | async as items\">\r\n  <ng-container *ngIf=\"items.length; else noItems\">\r\n    <ng-container *ngFor=\"let item of items.slice().reverse()\" #renderedLegends>\r\n      <div *ngIf=\"getLegend; else noItems\">\r\n        <mat-list-item *ngIf=\"item.title\">\r\n          <mat-icon\r\n            id=\"legend-toggle\"\r\n            class=\"igo-chevron\"\r\n            mat-list-avatar\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          </mat-icon>\r\n          <h4 matLine>{{computeItemTitle(item) | async}} </h4>\r\n        </mat-list-item>\r\n        <div #legend class=\"igo-layer-legend\" [ngClass]=\"{'with-title': item.title}\">\r\n          <div *ngIf=\"currentStyle !== undefined\">\r\n              <mat-form-field>\r\n                <mat-select tooltip-position=\"below\" matTooltipShowDelay=\"500\"\r\n                  [matTooltip]=\"'igo.geo.layer.legend.selectStyle' | translate\" [(ngModel)]=\"currentStyle\"\r\n                  (selectionChange)=\"onChangeStyle()\">\r\n                  <mat-option *ngFor=\"let style of styles\" [value]=\"style.name\">{{style.title}}</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 igoImageError *ngIf=\"item.imgGraphValue\" hideError=\"true\" #renderedLegend id=\"{{item.title}}\" (load)=\"onLoadImage(item.title)\"\r\n                [src]=\"item.imgGraphValue\"\r\n                alt=\"{{'igo.geo.layer.legend.loadingLegendText' | translate}}\">\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\r\n</ng-container>\r\n", styles: [".igo-layer-legend.with-title{padding-left:18px}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%;-webkit-animation:2s linear infinite spin;animation:2s linear infinite spin}@-moz-document url-prefix(){img:after{margin-left:19px}}@-webkit-keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
     }], function () { return [{ type: CapabilitiesService }, { type: i2$1.LanguageService }, { type: i2$1.ConfigService }, { type: i1$2.HttpClient }, { type: i0.ChangeDetectorRef }]; }, { updateLegendOnResolutionChange: [{
             type: Input
         }], renderedLegends: [{
@@ -13229,7 +13235,7 @@ CatalogBrowserLayerComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type
     } }, dependencies: [i1$1.NgClass, i1$1.NgIf, i7$1.MatBadge, i3.MatButton, i2.MatIcon, i5.MatListItem, i5.MatListAvatarCssMatStyler, i9.MatLine, i4.MatTooltip, i5$1.IgoBadgeIconDirective, MetadataButtonComponent, LayerLegendComponent, i1$1.AsyncPipe, i7.TranslatePipe], styles: [".igo-cataloglayer-title[_ngcontent-%COMP%]{cursor:pointer}.igo-cataloglayer-legend-container[_ngcontent-%COMP%]{padding-left:18px;width:calc(100% - 18px);margin-left:40px}.igo-cataloglayer-external-icon[_ngcontent-%COMP%]{cursor:help}"], changeDetection: 0 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CatalogBrowserLayerComponent, [{
         type: Component,
-        args: [{ selector: 'igo-catalog-browser-layer', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-list-item>\n  <mat-icon *ngIf=\"haveGroup()\" mat-list-avatar svgIcon=\"blank\"></mat-icon>\n  <h4 mat-line matTooltipShowDelay=\"500\" [ngClass]=\"(catalogAllowLegend)?'igo-cataloglayer-title':''\" (click)=\"askForLegend($event)\" [matTooltip]=\"computeTitleTooltip()\">{{title}}</h4>\n\n    <button *ngIf=\"layer.externalProvider\"\n      disabled=\"true\"\n      mat-icon-button>\n    <mat-icon\n      class=\"igo-cataloglayer-external-icon\"\n      *ngIf=\"layer.externalProvider\"\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    </mat-icon>\n  </button>\n  <igo-metadata-button [layer]=\"layer\"></igo-metadata-button>\n\n  <button\n    (mouseenter)=\"onMouseEvent($event)\" (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    <mat-icon\n       matBadge=\"icon\"\n       igoMatBadgeIcon=\"eye-off\"\n       igoMatBadgeInverseColor=\"true\"\n       [matBadgeHidden]=\"isInResolutionsRange()\"\n       matBadgeDisabled=\"true\"\n       matBadgeSize=\"small\"\n       matBadgePosition=\"after\"\n       [svgIcon]=\"(isPreview$ | async) ? 'plus' : added ? 'delete' : 'plus'\">\n    </mat-icon>\n  </button>\n\n</mat-list-item>\n\n<div #legend class=\"igo-cataloglayer-legend-container\">\n  <igo-layer-legend\n    *ngIf=\"(layerLegendShown$ | async) && (igoLayer$ | async) && catalogAllowLegend\"\n    [layer]=\"igoLayer$ | async\">\n  </igo-layer-legend>\n</div>\n", styles: [".igo-cataloglayer-title{cursor:pointer}.igo-cataloglayer-legend-container{padding-left:18px;width:calc(100% - 18px);margin-left:40px}.igo-cataloglayer-external-icon{cursor:help}\n"] }]
+        args: [{ selector: 'igo-catalog-browser-layer', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-list-item>\r\n  <mat-icon *ngIf=\"haveGroup()\" mat-list-avatar svgIcon=\"blank\"></mat-icon>\r\n  <h4 mat-line matTooltipShowDelay=\"500\" [ngClass]=\"(catalogAllowLegend)?'igo-cataloglayer-title':''\" (click)=\"askForLegend($event)\" [matTooltip]=\"computeTitleTooltip()\">{{title}}</h4>\r\n\r\n    <button *ngIf=\"layer.externalProvider\"\r\n      disabled=\"true\"\r\n      mat-icon-button>\r\n    <mat-icon\r\n      class=\"igo-cataloglayer-external-icon\"\r\n      *ngIf=\"layer.externalProvider\"\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    </mat-icon>\r\n  </button>\r\n  <igo-metadata-button [layer]=\"layer\"></igo-metadata-button>\r\n\r\n  <button\r\n    (mouseenter)=\"onMouseEvent($event)\" (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    <mat-icon\r\n       matBadge=\"icon\"\r\n       igoMatBadgeIcon=\"eye-off\"\r\n       igoMatBadgeInverseColor=\"true\"\r\n       [matBadgeHidden]=\"isInResolutionsRange()\"\r\n       matBadgeDisabled=\"true\"\r\n       matBadgeSize=\"small\"\r\n       matBadgePosition=\"after\"\r\n       [svgIcon]=\"(isPreview$ | async) ? 'plus' : added ? 'delete' : 'plus'\">\r\n    </mat-icon>\r\n  </button>\r\n\r\n</mat-list-item>\r\n\r\n<div #legend class=\"igo-cataloglayer-legend-container\">\r\n  <igo-layer-legend\r\n    *ngIf=\"(layerLegendShown$ | async) && (igoLayer$ | async) && catalogAllowLegend\"\r\n    [layer]=\"igoLayer$ | async\">\r\n  </igo-layer-legend>\r\n</div>\r\n", styles: [".igo-cataloglayer-title{cursor:pointer}.igo-cataloglayer-legend-container{padding-left:18px;width:calc(100% - 18px);margin-left:40px}.igo-cataloglayer-external-icon{cursor:help}\n"] }]
     }], function () { return [{ type: LayerService }]; }, { resolution: [{
             type: Input
         }], catalogAllowLegend: [{
@@ -13508,7 +13514,7 @@ CatalogBrowserGroupComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type
     } }, dependencies: [i1$1.NgForOf, i1$1.NgIf, i3.MatButton, i2.MatIcon, i5.MatListItem, i5.MatListAvatarCssMatStyler, i9.MatLine, i4.MatTooltip, i5$1.ListItemDirective, i5$1.CollapseDirective, CatalogBrowserLayerComponent, i1$1.AsyncPipe, i7.TranslatePipe], styles: [".igo-catalog-group-title[_ngcontent-%COMP%]{cursor:pointer;opacity:.9}#catalog-group-title[_ngcontent-%COMP%]{font-weight:700}.igo-cataloggroup-external-icon[_ngcontent-%COMP%]{cursor:help}"], changeDetection: 0 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CatalogBrowserGroupComponent, [{
         type: Component,
-        args: [{ selector: 'igo-catalog-browser-group', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-list-item>\n  <mat-icon\n    mat-list-avatar\n    svgIcon=\"chevron-up\"\n    igoCollapse\n    class=\"igo-chevron\"\n    [target]=\"items\"\n    [collapsed]=\"collapsed\"\n    (toggle)=\"onToggleCollapsed($event)\">\n  </mat-icon>\n\n  <h4 class=\"igo-catalog-group-title\" id=\"catalog-group-title\" mat-line matTooltipShowDelay=\"500\" [matTooltip]=\"title\" (click)=\"onTitleClick()\">{{title}}</h4>\n\n  <button *ngIf=\"group.externalProvider\"\n    disabled=\"true\"\n    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    </mat-icon>\n  </button>\n\n  <ng-container *ngIf=\"(added$ | async) && (preview$ | async) === false; else notadded\">\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()\">\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()\">\n      <mat-icon svgIcon=\"plus\"></mat-icon>\n    </button>\n  </ng-template>\n</mat-list-item>\n\n<div #items>\n  <ng-template ngFor let-item [ngForOf]=\"store.view.all$() | async\">\n    <ng-container *ngIf=\"isGroup(item)\">\n      <!-- todo: add display ans manage CatalogItemGroup -->\n    </ng-container>\n    <ng-container *ngIf=\"isLayer(item)\">\n      <igo-catalog-browser-layer\n        igoListItem\n        [layer]=\"item\"\n        [resolution]=\"resolution\"\n        [catalogAllowLegend]=\"catalogAllowLegend\"\n        [added]=\"state.get(item).added\"\n        (addedLayerIsPreview)=\"onLayerPreview($event)\"\n        (addedChange)=\"onLayerAddedChange($event)\">\n      </igo-catalog-browser-layer>\n    </ng-container>\n  </ng-template>\n</div>\n", styles: [".igo-catalog-group-title{cursor:pointer;opacity:.9}#catalog-group-title{font-weight:700}.igo-cataloggroup-external-icon{cursor:help}\n"] }]
+        args: [{ selector: 'igo-catalog-browser-group', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-list-item>\r\n  <mat-icon\r\n    mat-list-avatar\r\n    svgIcon=\"chevron-up\"\r\n    igoCollapse\r\n    class=\"igo-chevron\"\r\n    [target]=\"items\"\r\n    [collapsed]=\"collapsed\"\r\n    (toggle)=\"onToggleCollapsed($event)\">\r\n  </mat-icon>\r\n\r\n  <h4 class=\"igo-catalog-group-title\" id=\"catalog-group-title\" mat-line matTooltipShowDelay=\"500\" [matTooltip]=\"title\" (click)=\"onTitleClick()\">{{title}}</h4>\r\n\r\n  <button *ngIf=\"group.externalProvider\"\r\n    disabled=\"true\"\r\n    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    </mat-icon>\r\n  </button>\r\n\r\n  <ng-container *ngIf=\"(added$ | async) && (preview$ | async) === false; else 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.removeFromMap' | translate\"\r\n      color=\"warn\"\r\n      [disabled]=\"disabled$ | async\"\r\n      (click)=\"onToggleClick()\">\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()\">\r\n      <mat-icon svgIcon=\"plus\"></mat-icon>\r\n    </button>\r\n  </ng-template>\r\n</mat-list-item>\r\n\r\n<div #items>\r\n  <ng-template ngFor let-item [ngForOf]=\"store.view.all$() | async\">\r\n    <ng-container *ngIf=\"isGroup(item)\">\r\n      <!-- todo: add display ans manage CatalogItemGroup -->\r\n    </ng-container>\r\n    <ng-container *ngIf=\"isLayer(item)\">\r\n      <igo-catalog-browser-layer\r\n        igoListItem\r\n        [layer]=\"item\"\r\n        [resolution]=\"resolution\"\r\n        [catalogAllowLegend]=\"catalogAllowLegend\"\r\n        [added]=\"state.get(item).added\"\r\n        (addedLayerIsPreview)=\"onLayerPreview($event)\"\r\n        (addedChange)=\"onLayerAddedChange($event)\">\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;opacity:.9}#catalog-group-title{font-weight:700}.igo-cataloggroup-external-icon{cursor:help}\n"] }]
     }], null, { catalog: [{
             type: Input
         }], group: [{
@@ -13810,7 +13816,7 @@ LayerItemComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LayerIte
     } }, styles: ["[_nghost-%COMP%]{overflow:hidden}mat-list-item[_ngcontent-%COMP%]     .mat-list-item-content .layerCheck{align-self:baseline;width:16px;padding-right:0}.igo-layer-list-item[_ngcontent-%COMP%]{height:46px;clear:both}.igo-layer-title[_ngcontent-%COMP%]{cursor:pointer}.igo-layer-legend-container[_ngcontent-%COMP%]{padding-left:18px;width:calc(100% - 18px)}mat-icon.disabled[_ngcontent-%COMP%]{color:#00000061}mat-icon[matBadge][_ngcontent-%COMP%]     .mat-badge-content{font-size:12px}.selection-eye[_ngcontent-%COMP%]{padding-right:45px}"], changeDetection: 0 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LayerItemComponent, [{
         type: Component,
-        args: [{ selector: 'igo-layer-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-list-item class= \"igo-layer-list-item\">\n  <mat-checkbox *ngIf=\"selectionMode\"\n    class=\"layerCheck\"\n    mat-list-icon\n    (change)=\"check()\"\n    [checked]=\"layerCheck\">\n  </mat-checkbox>\n  <h4 (click)=\"toggleLegendOnClick()\" matLine class=\"igo-layer-title\" [matTooltip]=\"tooltipText\" matTooltipShowDelay=\"500\">{{layer.title}}</h4>\n\n  <button *ngIf=\"!selectionMode\"\n    mat-icon-button\n    [color]=\"layer.visible ? 'primary' : 'default'\"\n    collapsibleButton\n    tooltip-position=\"below\"\n    matTooltipShowDelay=\"500\"\n    [matTooltip]=\"eyeTooltip | translate\"\n    (click)=\"toggleVisibility()\">\n    <mat-icon\n      matBadge=\"?\"\n      matBadgeColor=\"accent\"\n      matBadgeSize=\"small\"\n      matBadgePosition=\"after\"\n      [matBadgeHidden]=\"queryBadgeHidden$ | async\"\n      [ngClass]=\"{disabled: (inResolutionRange$ | async)===false}\"\n      [svgIcon]=\"(layer.visible$ | async) ? 'eye' : 'eye-off'\">\n    </mat-icon>\n  </button>\n\n  <button *ngIf=\"selectionMode\" class=\"selection-eye\"\n  mat-icon-button\n  [color]=\"layer.visible ? 'primary' : 'default'\"\n  collapsibleButton\n  tooltip-position=\"below\"\n  matTooltipShowDelay=\"500\"\n  [matTooltip]=\"layer.visible ?\n                ('igo.geo.layer.hideLayer' | translate) :\n                ('igo.geo.layer.showLayer' | translate)\"\n  (click)=\"toggleVisibility()\">\n  <mat-icon\n    matBadge=\"?\"\n    matBadgeColor=\"accent\"\n    matBadgeSize=\"small\"\n    matBadgePosition=\"after\"\n    [matBadgeHidden]=\"queryBadgeHidden$ | async\"\n    [ngClass]=\"{disabled: (inResolutionRange$ | async)===false}\"\n    [svgIcon]=\"layer.visible ? 'eye' : 'eye-off'\">\n  </mat-icon>\n</button>\n\n  <button *ngIf=\"!selectionMode\"\n    class=\"actions-button\"\n    tooltip-position=\"below\"\n    matTooltipShowDelay=\"500\"\n    [matTooltip]= \"'igo.geo.layer.moreOptions' | translate\"\n    mat-icon-button\n    color=\"primary\"\n    (click)=\"toggleLayerTool()\">\n    <mat-icon svgIcon=\"dots-horizontal\"></mat-icon>\n  </button>\n</mat-list-item>\n\n<div #legend class=\"igo-layer-legend-container\">\n  <igo-layer-legend\n    *ngIf=\"showLegend$ | async\"\n    [layer]=\"layer\"\n    [updateLegendOnResolutionChange]=\"updateLegendOnResolutionChange\">\n  </igo-layer-legend>\n</div>\n", styles: [":host{overflow:hidden}mat-list-item ::ng-deep .mat-list-item-content .layerCheck{align-self:baseline;width:16px;padding-right:0}.igo-layer-list-item{height:46px;clear:both}.igo-layer-title{cursor:pointer}.igo-layer-legend-container{padding-left:18px;width:calc(100% - 18px)}mat-icon.disabled{color:#00000061}mat-icon[matBadge] ::ng-deep .mat-badge-content{font-size:12px}.selection-eye{padding-right:45px}\n"] }]
+        args: [{ selector: 'igo-layer-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-list-item class= \"igo-layer-list-item\">\r\n  <mat-checkbox *ngIf=\"selectionMode\"\r\n    class=\"layerCheck\"\r\n    mat-list-icon\r\n    (change)=\"check()\"\r\n    [checked]=\"layerCheck\">\r\n  </mat-checkbox>\r\n  <h4 (click)=\"toggleLegendOnClick()\" matLine class=\"igo-layer-title\" [matTooltip]=\"tooltipText\" matTooltipShowDelay=\"500\">{{layer.title}}</h4>\r\n\r\n  <button *ngIf=\"!selectionMode\"\r\n    mat-icon-button\r\n    [color]=\"layer.visible ? 'primary' : 'default'\"\r\n    collapsibleButton\r\n    tooltip-position=\"below\"\r\n    matTooltipShowDelay=\"500\"\r\n    [matTooltip]=\"eyeTooltip | translate\"\r\n    (click)=\"toggleVisibility()\">\r\n    <mat-icon\r\n      matBadge=\"?\"\r\n      matBadgeColor=\"accent\"\r\n      matBadgeSize=\"small\"\r\n      matBadgePosition=\"after\"\r\n      [matBadgeHidden]=\"queryBadgeHidden$ | async\"\r\n      [ngClass]=\"{disabled: (inResolutionRange$ | async)===false}\"\r\n      [svgIcon]=\"(layer.visible$ | async) ? 'eye' : 'eye-off'\">\r\n    </mat-icon>\r\n  </button>\r\n\r\n  <button *ngIf=\"selectionMode\" class=\"selection-eye\"\r\n  mat-icon-button\r\n  [color]=\"layer.visible ? 'primary' : 'default'\"\r\n  collapsibleButton\r\n  tooltip-position=\"below\"\r\n  matTooltipShowDelay=\"500\"\r\n  [matTooltip]=\"layer.visible ?\r\n                ('igo.geo.layer.hideLayer' | translate) :\r\n                ('igo.geo.layer.showLayer' | translate)\"\r\n  (click)=\"toggleVisibility()\">\r\n  <mat-icon\r\n    matBadge=\"?\"\r\n    matBadgeColor=\"accent\"\r\n    matBadgeSize=\"small\"\r\n    matBadgePosition=\"after\"\r\n    [matBadgeHidden]=\"queryBadgeHidden$ | async\"\r\n    [ngClass]=\"{disabled: (inResolutionRange$ | async)===false}\"\r\n    [svgIcon]=\"layer.visible ? 'eye' : 'eye-off'\">\r\n  </mat-icon>\r\n</button>\r\n\r\n  <button *ngIf=\"!selectionMode\"\r\n    class=\"actions-button\"\r\n    tooltip-position=\"below\"\r\n    matTooltipShowDelay=\"500\"\r\n    [matTooltip]= \"'igo.geo.layer.moreOptions' | translate\"\r\n    mat-icon-button\r\n    color=\"primary\"\r\n    (click)=\"toggleLayerTool()\">\r\n    <mat-icon svgIcon=\"dots-horizontal\"></mat-icon>\r\n  </button>\r\n</mat-list-item>\r\n\r\n<div #legend class=\"igo-layer-legend-container\">\r\n  <igo-layer-legend\r\n    *ngIf=\"showLegend$ | async\"\r\n    [layer]=\"layer\"\r\n    [updateLegendOnResolutionChange]=\"updateLegendOnResolutionChange\">\r\n  </igo-layer-legend>\r\n</div>\r\n", styles: [":host{overflow:hidden}mat-list-item ::ng-deep .mat-list-item-content .layerCheck{align-self:baseline;width:16px;padding-right:0}.igo-layer-list-item{height:46px;clear:both}.igo-layer-title{cursor:pointer}.igo-layer-legend-container{padding-left:18px;width:calc(100% - 18px)}mat-icon.disabled{color:#00000061}mat-icon[matBadge] ::ng-deep .mat-badge-content{font-size:12px}.selection-eye{padding-right:45px}\n"] }]
     }], function () { return [{ type: i2$1.NetworkService }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, { activeLayer: [{
             type: Input
         }], selectAll: [{
@@ -14829,7 +14835,7 @@ LayerListComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LayerLis
     } }, styles: ["[_nghost-%COMP%]   .igo-list-no-tools[_ngcontent-%COMP%]{height:calc(100% - 57px);padding-top:8px}[_nghost-%COMP%]   .igo-list-tools-single[_ngcontent-%COMP%]{height:calc(100% - 153px);padding-top:8px}[_nghost-%COMP%]   .igo-list-tools-multi[_ngcontent-%COMP%]{height:calc(100% - 191px);padding-top:8px}mat-form-field.inputFilter[_ngcontent-%COMP%]{width:calc(100% - 100px);max-width:200px}.igo-layer-actions-container[_ngcontent-%COMP%]{width:calc(100% - 5px);padding-left:4px}.igo-layer-actions-container[_ngcontent-%COMP%] > div[_ngcontent-%COMP%]{text-align:center}mat-list-item[_ngcontent-%COMP%]     .mat-list-item-content{margin-bottom:10px}mat-checkbox[_ngcontent-%COMP%]     .mat-checkbox-inner-container{margin-left:8px;margin-right:16px}#opacity-slider[_ngcontent-%COMP%]{float:left;min-width:0;min-width:initial;width:110px;left:10px;top:10px}.igo-layer-button-group[_ngcontent-%COMP%], .actions-buttons-multi[_ngcontent-%COMP%]{display:flex;align-items:center;flex-direction:row-reverse;overflow-x:auto;overflow-y:hidden}.igo-layer-button-group[_ngcontent-%COMP%]::-webkit-scrollbar, .actions-buttons-multi[_ngcontent-%COMP%]::-webkit-scrollbar{height:4px}.igo-layer-button-group[_ngcontent-%COMP%]::-webkit-scrollbar-track, .actions-buttons-multi[_ngcontent-%COMP%]::-webkit-scrollbar-track{background:#f1f1f1}.igo-layer-button-group[_ngcontent-%COMP%]::-webkit-scrollbar-thumb, .actions-buttons-multi[_ngcontent-%COMP%]::-webkit-scrollbar-thumb{background:#888}.igo-layer-button-group[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover, .actions-buttons-multi[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover{background:#555}.igo-layer-button-group[_ngcontent-%COMP%]{padding-top:5px}[_nghost-%COMP%]   igo-panel[_ngcontent-%COMP%]{height:auto;height:initial}#opacity-menu[_ngcontent-%COMP%]{max-width:none;max-width:initial;width:132px;height:50px}#opacity-menu[_ngcontent-%COMP%]   .mat-menu-content[_ngcontent-%COMP%]:not(:empty){padding-top:20px}.select-all[_ngcontent-%COMP%]     .mat-list-item-content{margin:0}"], changeDetection: 0 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LayerListComponent, [{
         type: Component,
-        args: [{ selector: 'igo-layer-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-list>\n  <igo-layer-list-tool *ngIf=\"showToolbar$ | async\"\n    floatLabel=\"auto\"\n    [layersAreAllVisible]=\"layersAreAllVisible\"\n    [term]=\"layerFilterAndSortOptions.keyword\"\n    [onlyVisible]=\"layerFilterAndSortOptions.onlyVisible\"\n    [sortAlpha]=\"layerFilterAndSortOptions.sortAlpha\"\n    (appliedFilterAndSort)=\"onAppliedFilterAndSortChange($event)\"\n    (selection)=\"toggleSelectionMode($event)\">\n  </igo-layer-list-tool>\n</mat-list>\n\n<mat-list-item *ngIf=\"selection\" class=\"select-all\">\n  <mat-checkbox\n    class=\"select-all-checkbox mat-subheading-2\"\n    [color]=\"!selectAllCheck && layersChecked.length > 0 ? 'accent' : 'primary'\"\n    (change)=\"selectAll()\"\n    [checked]=\"selectAllCheck\"\n    [indeterminate]=\"!selectAllCheck && layersChecked.length > 0\"> {{selectAllCheck ? ('igo.geo.layer.deselectAll' | translate) : ('igo.geo.layer.selectAll' | translate)}}\n  </mat-checkbox>\n</mat-list-item>\n<mat-divider></mat-divider>\n\n<igo-list #igoList [ngClass]=\"{'igo-list-tools-multi': selection, 'igo-list-tools-single': (layerTool && !selection), 'igo-list-no-tools': (!layerTool && !selection)}\" [navigation]=\"false\" [selection]=\"false\">\n  <ng-template ngFor let-layer let-i=\"index\" [ngForOf]=\"layers$ | async\">\n    <igo-layer-item *ngIf=\"!(excludeBaseLayers && layer.baseLayer)\"\n      igoListItem\n      [layer]=\"layer\"\n      [activeLayer]=\"activeLayer\"\n      [orderable]=\"orderable && !layer.baseLayer\"\n      [lowerDisabled]=\"getLowerLayer().id === layer.id\"\n      [raiseDisabled]=\"getUpperLayer().id === layer.id\"\n      [queryBadge]=\"queryBadge\"\n      [expandLegendIfVisible]=\"expandLegendOfVisibleLayers\"\n      [updateLegendOnResolutionChange]=\"updateLegendOnResolutionChange\"\n      [toggleLegendOnVisibilityChange]=\"toggleLegendOnVisibilityChange\"\n      [selectionMode]=\"selection\"\n      [selectAll]=\"selectAllCheck\"\n      [layerCheck]=\"layer.options.check\"\n      [changeDetection]=\"layerItemChangeDetection$\"\n      (action)=\"toggleLayerTool($event)\"\n      (checkbox)=\"layersCheck($event)\">\n    </igo-layer-item>\n  </ng-template>\n</igo-list>\n\n<igo-panel *ngIf=\"!selection && layerTool && activeLayer\" class=\"igo-layer-actions-container\" [title]=\"activeLayer.title\">\n  <div class=\"igo-layer-button-group\">\n    <button\n      *ngIf=\"isLayerRemovable(activeLayer)\"\n      class=\"delete-button\"\n      mat-icon-button\n      color=\"warn\"\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"'igo.geo.layer.removeLayer' | translate\"\n      (click)=\"removeLayers()\">\n      <mat-icon svgIcon=\"delete\"></mat-icon>\n    </button>\n\n    <button\n      class=\"down-button\"\n      mat-icon-button\n      color=\"primary\"\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"(sortAlpha || onlyVisible || keyword) ? ('igo.geo.layer.filterLowerLayer' | translate) : ('igo.geo.layer.lowerLayer' | translate)\"\n      [disabled]=\"lowerDisabled\"\n      (click)=\"moveActiveLayer(activeLayer,layerListDisplacement.Lower, true)\">\n      <mat-icon [matBadge]=\"(sortAlpha || onlyVisible || keyword) ? '!' : ''\" matBadgeColor=\"warn\" matBadgeSize=\"medium\" [matBadgeHidden]=\"lowerDisabled\"\n                svgIcon=\"arrow-down\"></mat-icon>\n    </button>\n\n    <button\n      class=\"up-button\"\n      color=\"primary\"\n      mat-icon-button\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"(sortAlpha || onlyVisible || keyword) ? ('igo.geo.layer.filterRaiseLayer' | translate) : ('igo.geo.layer.raiseLayer' | translate)\"\n      [disabled]=\"raiseDisabled\"\n      (click)=\"moveActiveLayer(activeLayer,layerListDisplacement.Raise, true)\">\n      <mat-icon [matBadge]=\"(sortAlpha || onlyVisible || keyword) ? '!' : ''\" matBadgeColor=\"warn\" matBadgeSize=\"medium\" [matBadgeHidden]=\"raiseDisabled\"\n                svgIcon=\"arrow-up\"></mat-icon>\n    </button>\n\n    <!-- <label>{{ 'igo.geo.layer.opacity' | translate }} </label> -->\n    <button\n      class=\"opacity-button\"\n      color=\"primary\"\n      mat-icon-button\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matMenuTriggerFor]=\"opacityMenu\"\n      [matTooltip]=\"'igo.geo.layer.opacity' | translate\">\n      <mat-icon [matBadge]=\"badgeOpacity\" matBadgeColor=\"primary\" matBadgeSize=\"medium\" svgIcon=\"opacity\"></mat-icon>\n    </button>\n\n    <mat-menu #opacityMenu=\"matMenu\" class=\"mat-menu-opacity-slider\">\n      <div id=\"opacity-menu\">\n        <mat-slider\n          id=\"opacity-slider\"\n          color=\"primary\"\n          thumbLabel\n          tickInterval=\"5\"\n          step=\"5\"\n          [min]=\"0\"\n          [max]=\"100\"\n          [value]=\"opacity\"\n          (input)=\"changeOpacity($event)\"\n          [matTooltip]=\"'igo.geo.layer.opacity' | translate\"\n          (click) = \"$event.stopPropagation()\"\n          matTooltipShowDelay=\"500\"\n          tooltip-position=\"below\">\n        </mat-slider>\n      </div>\n    </mat-menu>\n\n    <button\n      *ngIf=\"activeLayerExtentIsValid(activeLayer)\"\n      class=\"zoomLayer-button\"\n      color=\"primary\"\n      mat-icon-button\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"'igo.geo.layer.zoomLayer' | translate\"\n      (click)=\"zoomLayerExtents(activeLayer)\">\n      <mat-icon matBadgeColor=\"primary\" matBadgeSize=\"medium\" svgIcon=\"magnify-scan\"></mat-icon>\n    </button>\n\n    <ng-container igoLayerItemToolbar\n      [ngTemplateOutlet]=\"templateLayerToolbar\"\n      [ngTemplateOutletContext]=\"{layer: activeLayer}\">\n    </ng-container>\n\n    <ng-content select=\"[igoLayerItemToolbar]\"></ng-content>\n  </div>\n</igo-panel>\n\n<igo-panel *ngIf=\"selection && layers.length > 0\" class=\"igo-layer-actions-container\" [title]=\"'igo.geo.layer.tools' | translate\">\n  <div class=\"actions-buttons-multi\">\n    <button\n      class=\"delete-button\"\n      mat-icon-button\n      color=\"warn\"\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [disabled]=\"layersChecked.length === 0\"\n      [matTooltip]=\"isAllLayersRemovable(layersChecked) ? ('igo.geo.layer.removeSelectedLayers' | translate) : 'igo.geo.layer.removeSelectedLayersRestriction' | translate\"\n      (click)=\"removeLayers(layersChecked)\">\n      <mat-icon [matBadge]=\"'!'\" matBadgeColor=\"warn\" matBadgeSize=\"medium\" [matBadgeHidden]=\"isAllLayersRemovable(layersChecked)\"\n                svgIcon=\"delete\"></mat-icon>\n    </button>\n\n    <button\n      class=\"eye-button\"\n      mat-icon-button\n      color=\"primary\"\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [disabled]=\"layersChecked.length === 0\"\n      [matTooltip]=\"statusSelectedLayersCheck === 'ALL_HIDDEN' ? ('igo.geo.layer.showSelectedLayers' | translate) : ('igo.geo.layer.hideSelectedLayers' | translate)\"\n      (click)=\"toggleVisibility(layersChecked)\">\n      <mat-icon\t[svgIcon]=\"(statusSelectedLayersCheck === 'ALL_HIDDEN') ? 'eye-off' : 'eye'\"></mat-icon>\n    </button>\n\n    <button\n      class=\"down-button\"\n      mat-icon-button\n      color=\"primary\"\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"(sortAlpha || onlyVisible || keyword) ? ('igo.geo.layer.filterLowerLayer' | translate) : ('igo.geo.layer.lowerLayer' | translate)\"\n      [disabled]=\"lowerDisabledSelection\"\n      (click)=\"lowerLayers(layersChecked)\">\n      <mat-icon [matBadge]=\"(sortAlpha || onlyVisible || keyword) ? '!' : ''\" matBadgeColor=\"warn\" matBadgeSize=\"medium\" [matBadgeHidden]=\"lowerDisabledSelection\"\n                svgIcon=\"arrow-down\"></mat-icon>\n    </button>\n\n    <button\n      class=\"up-button\"\n      color=\"primary\"\n      mat-icon-button\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"(sortAlpha || onlyVisible || keyword) ? ('igo.geo.layer.filterRaiseLayer' | translate) : ('igo.geo.layer.raiseLayer' | translate)\"\n      [disabled]=\"raiseDisabledSelection\"\n      (click)=\"raiseLayers(layersChecked)\">\n      <mat-icon [matBadge]=\"(sortAlpha || onlyVisible || keyword) ? '!' : ''\" matBadgeColor=\"warn\" matBadgeSize=\"medium\" [matBadgeHidden]=\"raiseDisabledSelection\"\n                svgIcon=\"arrow-up\"></mat-icon>\n    </button>\n\n    <button\n      class=\"opacity-button\"\n      color=\"primary\"\n      mat-icon-button\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [disabled]=\"layersChecked.length === 0\"\n      [matMenuTriggerFor]=\"opacityMenu\"\n      [matTooltip]=\"'igo.geo.layer.opacity' | translate\">\n      <mat-icon svgIcon=\"opacity\"></mat-icon>\n    </button>\n\n    <mat-menu #opacityMenu=\"matMenu\"  class=\"mat-menu-opacity-slider\">\n      <div id=\"opacity-menu\">\n        <mat-slider *ngIf=\"layersChecked.length\"\n          id=\"opacity-slider\"\n          color=\"primary\"\n          thumbLabel\n          tickInterval=\"5\"\n          step=\"5\"\n          [min]=\"0\"\n          [max]=\"100\"\n          [(ngModel)]=\"checkOpacity\"\n          [matTooltip]=\"'igo.geo.layer.opacity' | translate\"\n          matTooltipShowDelay=\"500\"\n          tooltip-position=\"below\"\n          (click) = \"$event.stopPropagation()\">\n        </mat-slider>\n      </div>\n    </mat-menu>\n\n    <button\n    *ngIf=\"layersChecked.length !== 0 && activeLayersExtentAreValid(layersChecked)\"\n      class=\"zoomLayer-button\"\n      color=\"primary\"\n      mat-icon-button\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"'igo.geo.layer.zoomLayers' | translate\"\n      (click)=\"zoomLayersExtents(layersChecked)\">\n      <mat-icon svgIcon=\"magnify-scan\"></mat-icon>\n    </button>\n  </div>\n</igo-panel>\n", styles: [":host .igo-list-no-tools{height:calc(100% - 57px);padding-top:8px}:host .igo-list-tools-single{height:calc(100% - 153px);padding-top:8px}:host .igo-list-tools-multi{height:calc(100% - 191px);padding-top:8px}mat-form-field.inputFilter{width:calc(100% - 100px);max-width:200px}.igo-layer-actions-container{width:calc(100% - 5px);padding-left:4px}.igo-layer-actions-container>div{text-align:center}mat-list-item ::ng-deep .mat-list-item-content{margin-bottom:10px}mat-checkbox ::ng-deep .mat-checkbox-inner-container{margin-left:8px;margin-right:16px}#opacity-slider{float:left;min-width:0;min-width:initial;width:110px;left:10px;top:10px}.igo-layer-button-group,.actions-buttons-multi{display:flex;align-items:center;flex-direction:row-reverse;overflow-x:auto;overflow-y:hidden}.igo-layer-button-group::-webkit-scrollbar,.actions-buttons-multi::-webkit-scrollbar{height:4px}.igo-layer-button-group::-webkit-scrollbar-track,.actions-buttons-multi::-webkit-scrollbar-track{background:#f1f1f1}.igo-layer-button-group::-webkit-scrollbar-thumb,.actions-buttons-multi::-webkit-scrollbar-thumb{background:#888}.igo-layer-button-group::-webkit-scrollbar-thumb:hover,.actions-buttons-multi::-webkit-scrollbar-thumb:hover{background:#555}.igo-layer-button-group{padding-top:5px}:host igo-panel{height:auto;height:initial}#opacity-menu{max-width:none;max-width:initial;width:132px;height:50px}#opacity-menu .mat-menu-content:not(:empty){padding-top:20px}.select-all ::ng-deep .mat-list-item-content{margin:0}\n"] }]
+        args: [{ selector: 'igo-layer-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-list>\r\n  <igo-layer-list-tool *ngIf=\"showToolbar$ | async\"\r\n    floatLabel=\"auto\"\r\n    [layersAreAllVisible]=\"layersAreAllVisible\"\r\n    [term]=\"layerFilterAndSortOptions.keyword\"\r\n    [onlyVisible]=\"layerFilterAndSortOptions.onlyVisible\"\r\n    [sortAlpha]=\"layerFilterAndSortOptions.sortAlpha\"\r\n    (appliedFilterAndSort)=\"onAppliedFilterAndSortChange($event)\"\r\n    (selection)=\"toggleSelectionMode($event)\">\r\n  </igo-layer-list-tool>\r\n</mat-list>\r\n\r\n<mat-list-item *ngIf=\"selection\" class=\"select-all\">\r\n  <mat-checkbox\r\n    class=\"select-all-checkbox mat-subheading-2\"\r\n    [color]=\"!selectAllCheck && layersChecked.length > 0 ? 'accent' : 'primary'\"\r\n    (change)=\"selectAll()\"\r\n    [checked]=\"selectAllCheck\"\r\n    [indeterminate]=\"!selectAllCheck && layersChecked.length > 0\"> {{selectAllCheck ? ('igo.geo.layer.deselectAll' | translate) : ('igo.geo.layer.selectAll' | translate)}}\r\n  </mat-checkbox>\r\n</mat-list-item>\r\n<mat-divider></mat-divider>\r\n\r\n<igo-list #igoList [ngClass]=\"{'igo-list-tools-multi': selection, 'igo-list-tools-single': (layerTool && !selection), 'igo-list-no-tools': (!layerTool && !selection)}\" [navigation]=\"false\" [selection]=\"false\">\r\n  <ng-template ngFor let-layer let-i=\"index\" [ngForOf]=\"layers$ | async\">\r\n    <igo-layer-item *ngIf=\"!(excludeBaseLayers && layer.baseLayer)\"\r\n      igoListItem\r\n      [layer]=\"layer\"\r\n      [activeLayer]=\"activeLayer\"\r\n      [orderable]=\"orderable && !layer.baseLayer\"\r\n      [lowerDisabled]=\"getLowerLayer().id === layer.id\"\r\n      [raiseDisabled]=\"getUpperLayer().id === layer.id\"\r\n      [queryBadge]=\"queryBadge\"\r\n      [expandLegendIfVisible]=\"expandLegendOfVisibleLayers\"\r\n      [updateLegendOnResolutionChange]=\"updateLegendOnResolutionChange\"\r\n      [toggleLegendOnVisibilityChange]=\"toggleLegendOnVisibilityChange\"\r\n      [selectionMode]=\"selection\"\r\n      [selectAll]=\"selectAllCheck\"\r\n      [layerCheck]=\"layer.options.check\"\r\n      [changeDetection]=\"layerItemChangeDetection$\"\r\n      (action)=\"toggleLayerTool($event)\"\r\n      (checkbox)=\"layersCheck($event)\">\r\n    </igo-layer-item>\r\n  </ng-template>\r\n</igo-list>\r\n\r\n<igo-panel *ngIf=\"!selection && layerTool && activeLayer\" class=\"igo-layer-actions-container\" [title]=\"activeLayer.title\">\r\n  <div class=\"igo-layer-button-group\">\r\n    <button\r\n      *ngIf=\"isLayerRemovable(activeLayer)\"\r\n      class=\"delete-button\"\r\n      mat-icon-button\r\n      color=\"warn\"\r\n      tooltip-position=\"below\"\r\n      matTooltipShowDelay=\"500\"\r\n      [matTooltip]=\"'igo.geo.layer.removeLayer' | translate\"\r\n      (click)=\"removeLayers()\">\r\n      <mat-icon svgIcon=\"delete\"></mat-icon>\r\n    </button>\r\n\r\n    <button\r\n      class=\"down-button\"\r\n      mat-icon-button\r\n      color=\"primary\"\r\n      tooltip-position=\"below\"\r\n      matTooltipShowDelay=\"500\"\r\n      [matTooltip]=\"(sortAlpha || onlyVisible || keyword) ? ('igo.geo.layer.filterLowerLayer' | translate) : ('igo.geo.layer.lowerLayer' | translate)\"\r\n      [disabled]=\"lowerDisabled\"\r\n      (click)=\"moveActiveLayer(activeLayer,layerListDisplacement.Lower, true)\">\r\n      <mat-icon [matBadge]=\"(sortAlpha || onlyVisible || keyword) ? '!' : ''\" matBadgeColor=\"warn\" matBadgeSize=\"medium\" [matBadgeHidden]=\"lowerDisabled\"\r\n                svgIcon=\"arrow-down\"></mat-icon>\r\n    </button>\r\n\r\n    <button\r\n      class=\"up-button\"\r\n      color=\"primary\"\r\n      mat-icon-button\r\n      tooltip-position=\"below\"\r\n      matTooltipShowDelay=\"500\"\r\n      [matTooltip]=\"(sortAlpha || onlyVisible || keyword) ? ('igo.geo.layer.filterRaiseLayer' | translate) : ('igo.geo.layer.raiseLayer' | translate)\"\r\n      [disabled]=\"raiseDisabled\"\r\n      (click)=\"moveActiveLayer(activeLayer,layerListDisplacement.Raise, true)\">\r\n      <mat-icon [matBadge]=\"(sortAlpha || onlyVisible || keyword) ? '!' : ''\" matBadgeColor=\"warn\" matBadgeSize=\"medium\" [matBadgeHidden]=\"raiseDisabled\"\r\n                svgIcon=\"arrow-up\"></mat-icon>\r\n    </button>\r\n\r\n    <!-- <label>{{ 'igo.geo.layer.opacity' | translate }} </label> -->\r\n    <button\r\n      class=\"opacity-button\"\r\n      color=\"primary\"\r\n      mat-icon-button\r\n      tooltip-position=\"below\"\r\n      matTooltipShowDelay=\"500\"\r\n      [matMenuTriggerFor]=\"opacityMenu\"\r\n      [matTooltip]=\"'igo.geo.layer.opacity' | translate\">\r\n      <mat-icon [matBadge]=\"badgeOpacity\" matBadgeColor=\"primary\" matBadgeSize=\"medium\" svgIcon=\"opacity\"></mat-icon>\r\n    </button>\r\n\r\n    <mat-menu #opacityMenu=\"matMenu\" class=\"mat-menu-opacity-slider\">\r\n      <div id=\"opacity-menu\">\r\n        <mat-slider\r\n          id=\"opacity-slider\"\r\n          color=\"primary\"\r\n          thumbLabel\r\n          tickInterval=\"5\"\r\n          step=\"5\"\r\n          [min]=\"0\"\r\n          [max]=\"100\"\r\n          [value]=\"opacity\"\r\n          (input)=\"changeOpacity($event)\"\r\n          [matTooltip]=\"'igo.geo.layer.opacity' | translate\"\r\n          (click) = \"$event.stopPropagation()\"\r\n          matTooltipShowDelay=\"500\"\r\n          tooltip-position=\"below\">\r\n        </mat-slider>\r\n      </div>\r\n    </mat-menu>\r\n\r\n    <button\r\n      *ngIf=\"activeLayerExtentIsValid(activeLayer)\"\r\n      class=\"zoomLayer-button\"\r\n      color=\"primary\"\r\n      mat-icon-button\r\n      tooltip-position=\"below\"\r\n      matTooltipShowDelay=\"500\"\r\n      [matTooltip]=\"'igo.geo.layer.zoomLayer' | translate\"\r\n      (click)=\"zoomLayerExtents(activeLayer)\">\r\n      <mat-icon matBadgeColor=\"primary\" matBadgeSize=\"medium\" svgIcon=\"magnify-scan\"></mat-icon>\r\n    </button>\r\n\r\n    <ng-container igoLayerItemToolbar\r\n      [ngTemplateOutlet]=\"templateLayerToolbar\"\r\n      [ngTemplateOutletContext]=\"{layer: activeLayer}\">\r\n    </ng-container>\r\n\r\n    <ng-content select=\"[igoLayerItemToolbar]\"></ng-content>\r\n  </div>\r\n</igo-panel>\r\n\r\n<igo-panel *ngIf=\"selection && layers.length > 0\" class=\"igo-layer-actions-container\" [title]=\"'igo.geo.layer.tools' | translate\">\r\n  <div class=\"actions-buttons-multi\">\r\n    <button\r\n      class=\"delete-button\"\r\n      mat-icon-button\r\n      color=\"warn\"\r\n      tooltip-position=\"below\"\r\n      matTooltipShowDelay=\"500\"\r\n      [disabled]=\"layersChecked.length === 0\"\r\n      [matTooltip]=\"isAllLayersRemovable(layersChecked) ? ('igo.geo.layer.removeSelectedLayers' | translate) : 'igo.geo.layer.removeSelectedLayersRestriction' | translate\"\r\n      (click)=\"removeLayers(layersChecked)\">\r\n      <mat-icon [matBadge]=\"'!'\" matBadgeColor=\"warn\" matBadgeSize=\"medium\" [matBadgeHidden]=\"isAllLayersRemovable(layersChecked)\"\r\n                svgIcon=\"delete\"></mat-icon>\r\n    </button>\r\n\r\n    <button\r\n      class=\"eye-button\"\r\n      mat-icon-button\r\n      color=\"primary\"\r\n      tooltip-position=\"below\"\r\n      matTooltipShowDelay=\"500\"\r\n      [disabled]=\"layersChecked.length === 0\"\r\n      [matTooltip]=\"statusSelectedLayersCheck === 'ALL_HIDDEN' ? ('igo.geo.layer.showSelectedLayers' | translate) : ('igo.geo.layer.hideSelectedLayers' | translate)\"\r\n      (click)=\"toggleVisibility(layersChecked)\">\r\n      <mat-icon\t[svgIcon]=\"(statusSelectedLayersCheck === 'ALL_HIDDEN') ? 'eye-off' : 'eye'\"></mat-icon>\r\n    </button>\r\n\r\n    <button\r\n      class=\"down-button\"\r\n      mat-icon-button\r\n      color=\"primary\"\r\n      tooltip-position=\"below\"\r\n      matTooltipShowDelay=\"500\"\r\n      [matTooltip]=\"(sortAlpha || onlyVisible || keyword) ? ('igo.geo.layer.filterLowerLayer' | translate) : ('igo.geo.layer.lowerLayer' | translate)\"\r\n      [disabled]=\"lowerDisabledSelection\"\r\n      (click)=\"lowerLayers(layersChecked)\">\r\n      <mat-icon [matBadge]=\"(sortAlpha || onlyVisible || keyword) ? '!' : ''\" matBadgeColor=\"warn\" matBadgeSize=\"medium\" [matBadgeHidden]=\"lowerDisabledSelection\"\r\n                svgIcon=\"arrow-down\"></mat-icon>\r\n    </button>\r\n\r\n    <button\r\n      class=\"up-button\"\r\n      color=\"primary\"\r\n      mat-icon-button\r\n      tooltip-position=\"below\"\r\n      matTooltipShowDelay=\"500\"\r\n      [matTooltip]=\"(sortAlpha || onlyVisible || keyword) ? ('igo.geo.layer.filterRaiseLayer' | translate) : ('igo.geo.layer.raiseLayer' | translate)\"\r\n      [disabled]=\"raiseDisabledSelection\"\r\n      (click)=\"raiseLayers(layersChecked)\">\r\n      <mat-icon [matBadge]=\"(sortAlpha || onlyVisible || keyword) ? '!' : ''\" matBadgeColor=\"warn\" matBadgeSize=\"medium\" [matBadgeHidden]=\"raiseDisabledSelection\"\r\n                svgIcon=\"arrow-up\"></mat-icon>\r\n    </button>\r\n\r\n    <button\r\n      class=\"opacity-button\"\r\n      color=\"primary\"\r\n      mat-icon-button\r\n      tooltip-position=\"below\"\r\n      matTooltipShowDelay=\"500\"\r\n      [disabled]=\"layersChecked.length === 0\"\r\n      [matMenuTriggerFor]=\"opacityMenu\"\r\n      [matTooltip]=\"'igo.geo.layer.opacity' | translate\">\r\n      <mat-icon svgIcon=\"opacity\"></mat-icon>\r\n    </button>\r\n\r\n    <mat-menu #opacityMenu=\"matMenu\"  class=\"mat-menu-opacity-slider\">\r\n      <div id=\"opacity-menu\">\r\n        <mat-slider *ngIf=\"layersChecked.length\"\r\n          id=\"opacity-slider\"\r\n          color=\"primary\"\r\n          thumbLabel\r\n          tickInterval=\"5\"\r\n          step=\"5\"\r\n          [min]=\"0\"\r\n          [max]=\"100\"\r\n          [(ngModel)]=\"checkOpacity\"\r\n          [matTooltip]=\"'igo.geo.layer.opacity' | translate\"\r\n          matTooltipShowDelay=\"500\"\r\n          tooltip-position=\"below\"\r\n          (click) = \"$event.stopPropagation()\">\r\n        </mat-slider>\r\n      </div>\r\n    </mat-menu>\r\n\r\n    <button\r\n    *ngIf=\"layersChecked.length !== 0 && activeLayersExtentAreValid(layersChecked)\"\r\n      class=\"zoomLayer-button\"\r\n      color=\"primary\"\r\n      mat-icon-button\r\n      tooltip-position=\"below\"\r\n      matTooltipShowDelay=\"500\"\r\n      [matTooltip]=\"'igo.geo.layer.zoomLayers' | translate\"\r\n      (click)=\"zoomLayersExtents(layersChecked)\">\r\n      <mat-icon svgIcon=\"magnify-scan\"></mat-icon>\r\n    </button>\r\n  </div>\r\n</igo-panel>\r\n", styles: [":host .igo-list-no-tools{height:calc(100% - 57px);padding-top:8px}:host .igo-list-tools-single{height:calc(100% - 153px);padding-top:8px}:host .igo-list-tools-multi{height:calc(100% - 191px);padding-top:8px}mat-form-field.inputFilter{width:calc(100% - 100px);max-width:200px}.igo-layer-actions-container{width:calc(100% - 5px);padding-left:4px}.igo-layer-actions-container>div{text-align:center}mat-list-item ::ng-deep .mat-list-item-content{margin-bottom:10px}mat-checkbox ::ng-deep .mat-checkbox-inner-container{margin-left:8px;margin-right:16px}#opacity-slider{float:left;min-width:0;min-width:initial;width:110px;left:10px;top:10px}.igo-layer-button-group,.actions-buttons-multi{display:flex;align-items:center;flex-direction:row-reverse;overflow-x:auto;overflow-y:hidden}.igo-layer-button-group::-webkit-scrollbar,.actions-buttons-multi::-webkit-scrollbar{height:4px}.igo-layer-button-group::-webkit-scrollbar-track,.actions-buttons-multi::-webkit-scrollbar-track{background:#f1f1f1}.igo-layer-button-group::-webkit-scrollbar-thumb,.actions-buttons-multi::-webkit-scrollbar-thumb{background:#888}.igo-layer-button-group::-webkit-scrollbar-thumb:hover,.actions-buttons-multi::-webkit-scrollbar-thumb:hover{background:#555}.igo-layer-button-group{padding-top:5px}:host igo-panel{height:auto;height:initial}#opacity-menu{max-width:none;max-width:initial;width:132px;height:50px}#opacity-menu .mat-menu-content:not(:empty){padding-top:20px}.select-all ::ng-deep .mat-list-item-content{margin:0}\n"] }]
     }], function () { return [{ type: i0.ElementRef }]; }, { templateLayerToolbar: [{
             type: ContentChild,
             args: ['igoLayerItemToolbar', /* TODO: add static flag */ {}]
@@ -14995,7 +15001,7 @@ LayerListToolComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Laye
     } }, dependencies: [i13.MatFormField, i13.MatSuffix, i14.MatInput, i2$2.DefaultValueAccessor, i2$2.NgControlStatus, i1$1.NgIf, i2$2.NgModel, i2.MatIcon, i3.MatButton, i4.MatTooltip, i5.MatListItem, i7$1.MatBadge, i5$1.IgoBadgeIconDirective, i7.TranslatePipe], styles: ["mat-form-field.inputFilter[_ngcontent-%COMP%]{width:calc(100% - 100px);max-width:200px}.selection-mode[_ngcontent-%COMP%]{margin-left:5px}"], changeDetection: 0 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LayerListToolComponent, [{
         type: Component,
-        args: [{ selector: 'igo-layer-list-tool', changeDetection: ChangeDetectionStrategy.OnPush, template: "  <mat-list-item>\n      <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\" [(ngModel)]=\"term\">\n        <button\n          mat-button\n          *ngIf=\"term\"\n          matSuffix\n          mat-icon-button\n          aria-label=\"Clear\"\n          color=\"warn\"\n          (click)=\"clearTerm()\">\n          <mat-icon svgIcon=\"close\"></mat-icon>\n        </button>\n      </mat-form-field>\n\n      <div [matTooltip]=\"sortAlpha ?\n      ('igo.geo.layer.sortMapOrder' | translate) :\n      ('igo.geo.layer.sortAlphabetically' | translate)\" matTooltipShowDelay=\"500\">\n        <button class=\"sort-alpha\" [color]=\"sortAlpha ? 'warn' : 'primary'\" mat-icon-button (click)=\"toggleSortAlpha()\">\n          <mat-icon [svgIcon]=\"sortAlpha ? 'sort-ascending' : 'sort-alphabetical-ascending'\"></mat-icon>\n        </button>\n      </div>\n\n       <div [matTooltip]=\"onlyVisible ?\n        ('igo.geo.layer.resetLayersList' | translate) :\n        ('igo.geo.layer.subsetLayersListOnlyVisible' | translate)\" matTooltipShowDelay=\"500\">\n         <button class=\"only-visible\" mat-icon-button [disabled]=\"layersAreAllVisible && !onlyVisible\"\n           [color]=\"onlyVisible ? 'warn' : 'primary'\" (click)=\"toggleOnlyVisible()\">\n           <mat-icon\n             matBadge=\"icon\"\n             igoMatBadgeIcon=\"eye\"\n             igoMatBadgeInverseColor=\"true\"\n             igoMatBadgeInheritColor=\"true\"\n             [svgIcon]=\"onlyVisible ? 'filter-remove' : 'filter'\">\n           </mat-icon>\n         </button>\n       </div>\n\n       <div [matTooltip]=\"selectionMode ?\n        ('igo.geo.layer.deactivateSelectionMode' | translate) :\n        ('igo.geo.layer.activateSelectionMode' | translate)\" matTooltipShowDelay=\"500\">\n         <button class=\"selection-mode\" mat-icon-button\n           color=\"primary\" (click)=\"toggleSelectionMode()\">\n           <mat-icon [svgIcon]=\"selectionMode ? 'checkbox-multiple-marked-outline' : 'checkbox-multiple-blank-outline'\"></mat-icon>\n         </button>\n       </div>\n\n</mat-list-item>\n", styles: ["mat-form-field.inputFilter{width:calc(100% - 100px);max-width:200px}.selection-mode{margin-left:5px}\n"] }]
+        args: [{ selector: 'igo-layer-list-tool', changeDetection: ChangeDetectionStrategy.OnPush, template: "  <mat-list-item>\r\n      <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\" [(ngModel)]=\"term\">\r\n        <button\r\n          mat-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          <mat-icon svgIcon=\"close\"></mat-icon>\r\n        </button>\r\n      </mat-form-field>\r\n\r\n      <div [matTooltip]=\"sortAlpha ?\r\n      ('igo.geo.layer.sortMapOrder' | translate) :\r\n      ('igo.geo.layer.sortAlphabetically' | translate)\" matTooltipShowDelay=\"500\">\r\n        <button class=\"sort-alpha\" [color]=\"sortAlpha ? 'warn' : 'primary'\" mat-icon-button (click)=\"toggleSortAlpha()\">\r\n          <mat-icon [svgIcon]=\"sortAlpha ? 'sort-ascending' : 'sort-alphabetical-ascending'\"></mat-icon>\r\n        </button>\r\n      </div>\r\n\r\n       <div [matTooltip]=\"onlyVisible ?\r\n        ('igo.geo.layer.resetLayersList' | translate) :\r\n        ('igo.geo.layer.subsetLayersListOnlyVisible' | translate)\" matTooltipShowDelay=\"500\">\r\n         <button class=\"only-visible\" mat-icon-button [disabled]=\"layersAreAllVisible && !onlyVisible\"\r\n           [color]=\"onlyVisible ? 'warn' : 'primary'\" (click)=\"toggleOnlyVisible()\">\r\n           <mat-icon\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           </mat-icon>\r\n         </button>\r\n       </div>\r\n\r\n       <div [matTooltip]=\"selectionMode ?\r\n        ('igo.geo.layer.deactivateSelectionMode' | translate) :\r\n        ('igo.geo.layer.activateSelectionMode' | translate)\" matTooltipShowDelay=\"500\">\r\n         <button class=\"selection-mode\" mat-icon-button\r\n           color=\"primary\" (click)=\"toggleSelectionMode()\">\r\n           <mat-icon [svgIcon]=\"selectionMode ? 'checkbox-multiple-marked-outline' : 'checkbox-multiple-blank-outline'\"></mat-icon>\r\n         </button>\r\n       </div>\r\n\r\n</mat-list-item>\r\n", styles: ["mat-form-field.inputFilter{width:calc(100% - 100px);max-width:200px}.selection-mode{margin-left:5px}\n"] }]
     }], null, { layersAreAllVisible: [{
             type: Input
         }], floatLabel: [{
@@ -15240,7 +15246,7 @@ LayerLegendListComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: La
     } }, styles: ["mat-slide-toggle[_ngcontent-%COMP%]{width:100%;margin:10px}mat-slide-toggle[_ngcontent-%COMP%]     .mat-slide-toggle-content{width:calc(100% - 60px)}igo-list[_ngcontent-%COMP%]{display:contents}.layers-empty[_ngcontent-%COMP%]{text-align:justify;margin:10px}.layer-legend-list-container[_ngcontent-%COMP%]{max-height:100%;overflow:auto}"], changeDetection: 0 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LayerLegendListComponent, [{
         type: Component,
-        args: [{ selector: 'igo-layer-legend-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "\n<div class=\"layer-legend-list-container\">\n  <mat-slide-toggle \n  tooltip-position=\"above\"\n  matTooltipShowDelay=\"500\"\n  [matTooltip]=\"'igo.geo.layer.legend.showAll' | translate\"\n  [checked]=\"showAllLegendsValue\" class=\"mat-typography\" \n  *ngIf=\"(layersInUi$ | async).length && allowShowAllLegends\" [labelPosition]=\"'before'\" (change)=\"toggleShowAllLegends($event.checked)\">\n    {{'igo.geo.layer.legend.showAll' | translate}}\n  </mat-slide-toggle>\n  <mat-divider *ngIf=\"(layersInUi$ | async).length && allowShowAllLegends\"></mat-divider>\n  <igo-list [navigation]=\"false\" [selection]=\"false\">\n    <ng-template ngFor let-layer let-i=\"index\" [ngForOf]=\"layers$ | async\">\n      <igo-layer-legend-item *ngIf=\"!(excludeBaseLayers && layer.baseLayer)\"\n          igoListItem [layer]=\"layer\"\n          [updateLegendOnResolutionChange]=\"updateLegendOnResolutionChange\">\n      </igo-layer-legend-item>\n    </ng-template>\n  </igo-list>\n  <p class=\"layers-empty mat-typography\" \n    *ngIf=\"!showAllLegendsValue && (layersInUi$ | async).length && (hasVisibleOrInRangeLayers$ | async)===false && (hasVisibleAndNotInRangeLayers$ | async)===false && allowShowAllLegends\">\n    {{'igo.geo.layer.legend.noLayersVisibleWithShowAllButton' | translate}} \n  </p>\n  <p class=\"layers-empty mat-typography\" \n    *ngIf=\"!showAllLegendsValue && (layersInUi$ | async).length && (hasVisibleOrInRangeLayers$ | async)===false && (hasVisibleAndNotInRangeLayers$ | async) && allowShowAllLegends\">\n    {{'igo.geo.layer.legend.noLayersVisibleWithShowAllButtonButZoom' | translate}} \n  </p>\n  <p class=\"layers-empty mat-typography\"\n    *ngIf=\"(layersInUi$ | async).length && (hasVisibleOrInRangeLayers$ | async)===false && (hasVisibleAndNotInRangeLayers$ | async)===false && !allowShowAllLegends\">\n    {{'igo.geo.layer.legend.noLayersVisible' | translate}} \n  </p>\n  <p class=\"layers-empty mat-typography\"\n    *ngIf=\"(layersInUi$ | async).length && (hasVisibleOrInRangeLayers$ | async)===false && (hasVisibleAndNotInRangeLayers$ | async) && !allowShowAllLegends\">\n    {{'igo.geo.layer.legend.noLayersVisibleButZoom' | translate}} \n  </p>\n\n</div>", styles: ["mat-slide-toggle{width:100%;margin:10px}mat-slide-toggle ::ng-deep .mat-slide-toggle-content{width:calc(100% - 60px)}igo-list{display:contents}.layers-empty{text-align:justify;margin:10px}.layer-legend-list-container{max-height:100%;overflow:auto}\n"] }]
+        args: [{ selector: 'igo-layer-legend-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "\r\n<div class=\"layer-legend-list-container\">\r\n  <mat-slide-toggle \r\n  tooltip-position=\"above\"\r\n  matTooltipShowDelay=\"500\"\r\n  [matTooltip]=\"'igo.geo.layer.legend.showAll' | translate\"\r\n  [checked]=\"showAllLegendsValue\" class=\"mat-typography\" \r\n  *ngIf=\"(layersInUi$ | async).length && allowShowAllLegends\" [labelPosition]=\"'before'\" (change)=\"toggleShowAllLegends($event.checked)\">\r\n    {{'igo.geo.layer.legend.showAll' | translate}}\r\n  </mat-slide-toggle>\r\n  <mat-divider *ngIf=\"(layersInUi$ | async).length && allowShowAllLegends\"></mat-divider>\r\n  <igo-list [navigation]=\"false\" [selection]=\"false\">\r\n    <ng-template ngFor let-layer let-i=\"index\" [ngForOf]=\"layers$ | async\">\r\n      <igo-layer-legend-item *ngIf=\"!(excludeBaseLayers && layer.baseLayer)\"\r\n          igoListItem [layer]=\"layer\"\r\n          [updateLegendOnResolutionChange]=\"updateLegendOnResolutionChange\">\r\n      </igo-layer-legend-item>\r\n    </ng-template>\r\n  </igo-list>\r\n  <p class=\"layers-empty mat-typography\" \r\n    *ngIf=\"!showAllLegendsValue && (layersInUi$ | async).length && (hasVisibleOrInRangeLayers$ | async)===false && (hasVisibleAndNotInRangeLayers$ | async)===false && allowShowAllLegends\">\r\n    {{'igo.geo.layer.legend.noLayersVisibleWithShowAllButton' | translate}} \r\n  </p>\r\n  <p class=\"layers-empty mat-typography\" \r\n    *ngIf=\"!showAllLegendsValue && (layersInUi$ | async).length && (hasVisibleOrInRangeLayers$ | async)===false && (hasVisibleAndNotInRangeLayers$ | async) && allowShowAllLegends\">\r\n    {{'igo.geo.layer.legend.noLayersVisibleWithShowAllButtonButZoom' | translate}} \r\n  </p>\r\n  <p class=\"layers-empty mat-typography\"\r\n    *ngIf=\"(layersInUi$ | async).length && (hasVisibleOrInRangeLayers$ | async)===false && (hasVisibleAndNotInRangeLayers$ | async)===false && !allowShowAllLegends\">\r\n    {{'igo.geo.layer.legend.noLayersVisible' | translate}} \r\n  </p>\r\n  <p class=\"layers-empty mat-typography\"\r\n    *ngIf=\"(layersInUi$ | async).length && (hasVisibleOrInRangeLayers$ | async)===false && (hasVisibleAndNotInRangeLayers$ | async) && !allowShowAllLegends\">\r\n    {{'igo.geo.layer.legend.noLayersVisibleButZoom' | translate}} \r\n  </p>\r\n\r\n</div>", styles: ["mat-slide-toggle{width:100%;margin:10px}mat-slide-toggle ::ng-deep .mat-slide-toggle-content{width:calc(100% - 60px)}igo-list{display:contents}.layers-empty{text-align:justify;margin:10px}.layer-legend-list-container{max-height:100%;overflow:auto}\n"] }]
     }], function () { return []; }, { layers: [{
             type: Input
         }], excludeBaseLayers: [{
@@ -15342,7 +15348,7 @@ TrackFeatureButtonComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
     } }, dependencies: [i1$1.NgIf, i2.MatIcon, i3.MatButton, i4.MatTooltip, i7.TranslatePipe], changeDetection: 0 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TrackFeatureButtonComponent, [{
         type: Component,
-        args: [{ selector: 'igo-track-feature-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button *ngIf=\"options.trackFeature\"\n  mat-icon-button\n  collapsibleButton\n  tooltip-position=\"below\"\n  matTooltipShowDelay=\"500\"\n  [matTooltip]=\"'igo.geo.layer.trackFeature' | translate\"\n  [color]=\"color\"\n  (click)=\"toggleTrackFeature()\">\n  <mat-icon svgIcon=\"crosshairs-gps\"></mat-icon>\n</button>\n" }]
+        args: [{ selector: 'igo-track-feature-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button *ngIf=\"options.trackFeature\"\r\n  mat-icon-button\r\n  collapsibleButton\r\n  tooltip-position=\"below\"\r\n  matTooltipShowDelay=\"500\"\r\n  [matTooltip]=\"'igo.geo.layer.trackFeature' | translate\"\r\n  [color]=\"color\"\r\n  (click)=\"toggleTrackFeature()\">\r\n  <mat-icon svgIcon=\"crosshairs-gps\"></mat-icon>\r\n</button>\r\n" }]
     }], function () { return []; }, { layer: [{
             type: Input
         }], trackFeature: [{
@@ -15421,7 +15427,7 @@ LayerLegendItemComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: La
     } }, styles: ["[_nghost-%COMP%]{overflow:hidden}.igo-layer-list-item[_ngcontent-%COMP%]{height:46px;clear:both}.igo-layer-legend-container[_ngcontent-%COMP%]{padding-left:18px;width:calc(100% - 18px)}"], changeDetection: 0 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LayerLegendItemComponent, [{
         type: Component,
-        args: [{ selector: 'igo-layer-legend-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-list-item class= \"igo-layer-list-item\">\n  <h4 matLine class=\"igo-layer-title\" [matTooltip]=\"tooltipText\" matTooltipShowDelay=\"500\">{{layer.title}}</h4>\n</mat-list-item>\n\n<div #legend class=\"igo-layer-legend-container\">\n  <igo-layer-legend\n    [layer]=\"layer\"\n    [updateLegendOnResolutionChange]=\"updateLegendOnResolutionChange\">\n  </igo-layer-legend>\n</div>\n", styles: [":host{overflow:hidden}.igo-layer-list-item{height:46px;clear:both}.igo-layer-legend-container{padding-left:18px;width:calc(100% - 18px)}\n"] }]
+        args: [{ selector: 'igo-layer-legend-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-list-item class= \"igo-layer-list-item\">\r\n  <h4 matLine class=\"igo-layer-title\" [matTooltip]=\"tooltipText\" matTooltipShowDelay=\"500\">{{layer.title}}</h4>\r\n</mat-list-item>\r\n\r\n<div #legend class=\"igo-layer-legend-container\">\r\n  <igo-layer-legend\r\n    [layer]=\"layer\"\r\n    [updateLegendOnResolutionChange]=\"updateLegendOnResolutionChange\">\r\n  </igo-layer-legend>\r\n</div>\r\n", styles: [":host{overflow:hidden}.igo-layer-list-item{height:46px;clear:both}.igo-layer-legend-container{padding-left:18px;width:calc(100% - 18px)}\n"] }]
     }], function () { return [{ type: i2$1.NetworkService }]; }, { layer: [{
             type: Input
         }], updateLegendOnResolutionChange: [{
@@ -15450,7 +15456,20 @@ var FontType;
     FontType["LucidaConsole"] = "Lucida Console";
     FontType["BrushScriptMT"] = "Brush Script MT";
     FontType["ComicSansMS"] = "Comic Sans MS";
-})(FontType || (FontType = {}));
+})(FontType || (FontType = {}));
+var LabelType;
+(function (LabelType) {
+    LabelType["Coordinates"] = "Coordinates";
+    LabelType["Length"] = "Length";
+    LabelType["Area"] = "Area";
+    LabelType["Predefined"] = "Predefined";
+    LabelType["Custom"] = "Custom";
+})(LabelType || (LabelType = {}));
+var CoordinatesUnit;
+(function (CoordinatesUnit) {
+    CoordinatesUnit["DecimalDegree"] = "DD";
+    CoordinatesUnit["DegreesMinutesSeconds"] = "DMS";
+})(CoordinatesUnit || (CoordinatesUnit = {}));
 
 class DrawIconService {
     constructor(config) {
@@ -16090,6 +16109,22 @@ function createOlTooltipDrawAtPoint(olPoint) {
     olTooltip.setPosition(olPoint.getFlatCoordinates());
     olPoint.set('_tooltip', olTooltip);
     return olTooltip;
+}
+function DDtoDMS(value, unit) {
+    const conversionMapper = new Map([
+        [CoordinatesUnit.DecimalDegree, (val) => {
+                if (typeof val[0] === 'number') {
+                    return roundCoordToString(val, 5);
+                }
+                else {
+                    const numVal = [Number(val[0]), Number(val[1])];
+                    return roundCoordToString(numVal, 5);
+                }
+            }],
+        [CoordinatesUnit.DegreesMinutesSeconds, (val) => convertDDToDMS(val, 2)]
+    ]);
+    let conversion = conversionMapper.get(unit);
+    return conversion ? conversion(value) : undefined;
 }
 
 class DrawStyleService {
@@ -16099,7 +16134,7 @@ class DrawStyleService {
         this.strokeColor = 'rgba(143,7,7,1)';
         this.strokeWidth = 1;
         this.labelsAreShown = true;
-        this.fontSize = '20';
+        this.fontSize = '15';
         this.fontStyle = FontType.Arial.toString();
         this.offsetX = 0;
         this.offsetY = 0;
@@ -16649,7 +16684,7 @@ FeatureDetailsComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Fea
     } }, dependencies: [i1$1.NgForOf, i1$1.NgIf, i1$1.NgStyle, i2.MatIcon, i5$1.ImageErrorDirective, i1$1.AsyncPipe, i1$1.JsonPipe, i7.TranslatePipe, i5$1.KeyValuePipe, i5$1.SecureImagePipe], styles: ["table[_ngcontent-%COMP%]{width:100%}table[_ngcontent-%COMP%]   td[_ngcontent-%COMP%]{padding:5px}#keyValue[_ngcontent-%COMP%]{width:30%}table[_ngcontent-%COMP%]     .routing{cursor:pointer}iframe[_ngcontent-%COMP%]{height:calc(100% - 4px);width:100%;border:0}.copyClipboard[_ngcontent-%COMP%]{border:none;background:transparent;cursor:pointer}"], changeDetection: 0 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FeatureDetailsComponent, [{
         type: Component,
-        args: [{ selector: 'igo-feature-details', changeDetection: ChangeDetectionStrategy.OnPush, template: "<table class=\"igo-striped mat-typography\" *ngIf=\"ready && feature && isObject(feature.properties) && feature.properties.target !== 'iframe'\">\n  <tbody>\n    <tr *ngFor=\"let property of filterFeatureProperties(feature) | keyvalue\">\n\n      <td *ngIf=\"feature.properties.target === '_blank' && property.key === 'url'\">\n        <mat-icon mat-list-avatar svgIcon=\"{{icon}}\"></mat-icon>\n      </td>\n\n      <td *ngIf=\"feature.properties.target === '_blank' && property.key === 'url'\">\n        <a href=\"{{property.value}}\" target='_blank' rel=\"noopener noreferrer\"> {{ 'igo.geo.targetHtmlUrl' | translate }} {{title}}</a>\n        <button class=\"copyClipboard\" mat-icon-button (click)=\"copyTextToClipboard(property.value)\">\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 *ngIf=\"feature.properties.target === undefined && !isObject(property.value) && !isUrl(property.value) && !isEmbeddedLink(property.value)\" [innerHTML]=\"property.value\">\n      </td>\n\n      <td *ngIf=\"feature.properties.target === undefined && isEmbeddedLink(property.value)\">\n        <u [ngStyle]=\"{'cursor': 'pointer', 'color': 'blue'}\" (click)=\"openSecureUrl(property.value)\">{{ getEmbeddedLinkText(property.value) }}</u>\n      </td>\n\n      <td *ngIf=\"feature.properties.target === undefined && !isObject(property.value) && (isDoc(property.value) || isUrl(property.value)) && !isImg(property.value)\">\n        <u [ngStyle]=\"{'cursor': 'pointer', 'color': 'blue'}\" (click)=\"openSecureUrl(property.value)\">{{ 'igo.geo.targetHtmlUrl' | translate }}</u>\n        <button class=\"copyClipboard\" mat-icon-button (click)=\"copyTextToClipboard(property.value)\">\n          <mat-icon svgIcon=\"content-copy\"></mat-icon>\n        </button>\n      </td>\n\n      <td *ngIf=\"feature.properties.target === undefined && !isObject(property.value) && isUrl(property.value) && isImg(property.value)\">\n        <a href=\"{{property.value}}\" target='_blank' (click)=\"openSecureUrl(property.value)\" rel=\"noopener noreferrer\">\n          <img igoImageError src=\"{{(property.value | secureImage) |\u00A0async}}\" width=\"225\" height=\"auto\">\n        </a>\n      </td>\n\n      <td *ngIf=\"feature.properties.target === undefined && isObject(property.value)\" [innerHTML]=\"property.value | json\">\n      </td>\n\n    </tr>\n  </tbody>\n</table>\n\n<iframe *ngIf=\"isHtmlDisplay()\" [srcdoc]=\"htmlSanitizer(feature.properties)\" [src]=\"urlSanitizer(feature.properties.url)\"></iframe>\n", styles: ["table{width:100%}table td{padding:5px}#keyValue{width:30%}table ::ng-deep .routing{cursor:pointer}iframe{height:calc(100% - 4px);width:100%;border:0}.copyClipboard{border:none;background:transparent;cursor:pointer}\n"] }]
+        args: [{ selector: 'igo-feature-details', changeDetection: ChangeDetectionStrategy.OnPush, template: "<table class=\"igo-striped mat-typography\" *ngIf=\"ready && feature && isObject(feature.properties) && feature.properties.target !== 'iframe'\">\r\n  <tbody>\r\n    <tr *ngFor=\"let property of filterFeatureProperties(feature) | keyvalue\">\r\n\r\n      <td *ngIf=\"feature.properties.target === '_blank' && property.key === 'url'\">\r\n        <mat-icon mat-list-avatar svgIcon=\"{{icon}}\"></mat-icon>\r\n      </td>\r\n\r\n      <td *ngIf=\"feature.properties.target === '_blank' && property.key === 'url'\">\r\n        <a href=\"{{property.value}}\" target='_blank' rel=\"noopener noreferrer\"> {{ 'igo.geo.targetHtmlUrl' | translate }} {{title}}</a>\r\n        <button class=\"copyClipboard\" mat-icon-button (click)=\"copyTextToClipboard(property.value)\">\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 *ngIf=\"feature.properties.target === undefined && !isObject(property.value) && !isUrl(property.value) && !isEmbeddedLink(property.value)\" [innerHTML]=\"property.value\">\r\n      </td>\r\n\r\n      <td *ngIf=\"feature.properties.target === undefined && isEmbeddedLink(property.value)\">\r\n        <u [ngStyle]=\"{'cursor': 'pointer', 'color': 'blue'}\" (click)=\"openSecureUrl(property.value)\">{{ getEmbeddedLinkText(property.value) }}</u>\r\n      </td>\r\n\r\n      <td *ngIf=\"feature.properties.target === undefined && !isObject(property.value) && (isDoc(property.value) || isUrl(property.value)) && !isImg(property.value)\">\r\n        <u [ngStyle]=\"{'cursor': 'pointer', 'color': 'blue'}\" (click)=\"openSecureUrl(property.value)\">{{ 'igo.geo.targetHtmlUrl' | translate }}</u>\r\n        <button class=\"copyClipboard\" mat-icon-button (click)=\"copyTextToClipboard(property.value)\">\r\n          <mat-icon svgIcon=\"content-copy\"></mat-icon>\r\n        </button>\r\n      </td>\r\n\r\n      <td *ngIf=\"feature.properties.target === undefined && !isObject(property.value) && isUrl(property.value) && isImg(property.value)\">\r\n        <a href=\"{{property.value}}\" target='_blank' (click)=\"openSecureUrl(property.value)\" rel=\"noopener noreferrer\">\r\n          <img igoImageError src=\"{{(property.value | secureImage) |\u00A0async}}\" width=\"225\" height=\"auto\">\r\n        </a>\r\n      </td>\r\n\r\n      <td *ngIf=\"feature.properties.target === undefined && isObject(property.value)\" [innerHTML]=\"property.value | json\">\r\n      </td>\r\n\r\n    </tr>\r\n  </tbody>\r\n</table>\r\n\r\n<iframe *ngIf=\"isHtmlDisplay()\" [srcdoc]=\"htmlSanitizer(feature.properties)\" [src]=\"urlSanitizer(feature.properties.url)\"></iframe>\r\n", styles: ["table{width:100%}table td{padding:5px}#keyValue{width:30%}table ::ng-deep .routing{cursor:pointer}iframe{height:calc(100% - 4px);width:100%;border:0}.copyClipboard{border:none;background:transparent;cursor:pointer}\n"] }]
     }], function () { return [{ type: i1$2.HttpClient }, { type: i0.ChangeDetectorRef }, { type: i2$3.DomSanitizer }, { type: i2$1.NetworkService }, { type: i2$1.MessageService }, { type: i2$1.ConfigService }]; }, { source: [{
             type: Input
         }], map: [{
@@ -16758,7 +16793,7 @@ FeatureFormComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Featur
     } }, dependencies: [i5$1.FormComponent, i1$1.AsyncPipe], styles: ["[_nghost-%COMP%]{display:block}igo-form[_ngcontent-%COMP%]{height:100%}"], changeDetection: 0 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FeatureFormComponent, [{
         type: Component,
-        args: [{ selector: 'igo-feature-form', changeDetection: ChangeDetectionStrategy.OnPush, template: "\n<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  \n</igo-form>\n", styles: [":host{display:block}igo-form{height:100%}\n"] }]
+        args: [{ selector: 'igo-feature-form', changeDetection: ChangeDetectionStrategy.OnPush, template: "\r\n<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  \r\n</igo-form>\r\n", styles: [":host{display:block}igo-form{height:100%}\n"] }]
     }], function () { return []; }, { form: [{
             type: Input
         }], feature: [{
@@ -16945,8 +16980,24 @@ class DrawControl {
          * Freehand mode observable (defaults to false)
          */
         this.freehand$ = new BehaviorSubject(false);
+        /**
+         * Observables from predefined radius (defaults to false and undefined)
+         */
+        this.ispredefinedRadius$ = new BehaviorSubject(false);
+        this.predefinedRadius$ = new BehaviorSubject(undefined);
+        this.radiusDrawEnd$ = new BehaviorSubject(undefined);
         this.olDrawingLayer = options.drawingLayer ? options.drawingLayer : this.createOlInnerOverlayLayer();
         this.olGeometryType = this.options.geometryType;
+        this.olInteractionStyle = this.options.interactionStyle;
+    }
+    /**
+     * take the value of radius
+     */
+    get radiusVal() {
+        return this.predefinedRadius$.getValue();
+    }
+    set radiusValData(radiusCercle) {
+        this.predefinedRadius$.next(radiusCercle);
     }
     /**
      * Wheter the control is active
@@ -16983,6 +17034,9 @@ class DrawControl {
     getSource() {
         return this.olDrawingLayerSource;
     }
+    setOlInteractionStyle(style) {
+        this.olInteractionStyle = style;
+    }
     /**
      * Set the current geometry type
      * @param geometryType the geometry type
@@ -16990,6 +17044,12 @@ class DrawControl {
     setGeometryType(geometryType) {
         this.olGeometryType = geometryType;
     }
+    /**
+     * Get the current geometry type
+     */
+    getGeometryType() {
+        return this.olGeometryType;
+    }
     /**
      * Create a drawing source if none is defined in the options
      */
@@ -17031,21 +17091,35 @@ class DrawControl {
         // Create Draw interaction
         let olDrawInteraction;
         if (!this.freehand$.getValue()) {
-            olDrawInteraction = new OlDraw({
-                type: this.olGeometryType,
-                source: this.getSource(),
-                stopClick: true,
-                style: this.options.interactionStyle,
-                maxPoints: this.options.maxPoints,
-                freehand: false,
-                freehandCondition: () => false
-            });
+            if (!this.ispredefinedRadius$.getValue()) {
+                olDrawInteraction = new OlDraw({
+                    type: this.olGeometryType,
+                    source: this.getSource(),
+                    stopClick: true,
+                    style: this.olInteractionStyle,
+                    maxPoints: this.options.maxPoints,
+                    freehand: false,
+                    freehandCondition: () => false
+                });
+            }
+            else {
+                olDrawInteraction = new OlDraw({
+                    type: 'Point',
+                    source: this.getSource(),
+                    stopClick: true,
+                    style: this.olInteractionStyle,
+                    maxPoints: this.options.maxPoints,
+                    freehand: false,
+                    freehandCondition: () => false
+                });
+            }
         }
         else {
             if (this.olGeometryType === 'Point') {
                 olDrawInteraction = new OlDraw({
                     type: 'Circle',
                     source: this.getSource(),
+                    style: typeof this.olInteractionStyle === 'function' ? undefined : this.olInteractionStyle,
                     maxPoints: this.options.maxPoints,
                     freehand: true
                 });
@@ -17054,6 +17128,7 @@ class DrawControl {
                 olDrawInteraction = new OlDraw({
                     type: this.olGeometryType,
                     source: this.getSource(),
+                    style: this.olInteractionStyle,
                     maxPoints: this.options.maxPoints,
                     freehand: true
                 });
@@ -17116,6 +17191,9 @@ class DrawControl {
      * @param event Draw event (drawend)
      */
     onDrawEnd(event) {
+        if (event.feature.getGeometry().getType() === 'Point') {
+            this.radiusDrawEnd$.next(this.predefinedRadius$.getValue());
+        }
         this.unsubscribeKeyDown();
         unByKey(this.onDrawKey);
         const olGeometry = event.feature.getGeometry();
@@ -17173,57 +17251,570 @@ class DrawControl {
     }
 }
 
+function DrawPopupComponent_div_12_mat_radio_group_5_mat_radio_button_1_Template(rf, ctx) { if (rf & 1) {
+    const _r10 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mat-radio-button", 11);
+    i0.ɵɵlistener("change", function DrawPopupComponent_div_12_mat_radio_group_5_mat_radio_button_1_Template_mat_radio_button_change_0_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r9 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r9.onLabelTypeChange($event.value)); });
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const option_r8 = ctx.$implicit;
+    const ctx_r7 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("value", option_r8.value)("disabled", ctx_r7.optionAvailable(option_r8.value))("checked", option_r8.checked);
+    i0.ɵɵadvance(1);
+    i0.ɵɵtextInterpolate1(" ", ctx_r7.getProperLengthLabel(option_r8.value), " ");
+} }
+function DrawPopupComponent_div_12_mat_radio_group_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "mat-radio-group", 5);
+    i0.ɵɵtemplate(1, DrawPopupComponent_div_12_mat_radio_group_5_mat_radio_button_1_Template, 2, 4, "mat-radio-button", 10);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(1);
+    i0.ɵɵproperty("ngForOf", ctx_r2.arrayBuiltInType);
+} }
+function DrawPopupComponent_div_12_ng_container_6_mat_checkbox_1_Template(rf, ctx) { if (rf & 1) {
+    const _r14 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mat-checkbox", 13);
+    i0.ɵɵlistener("change", function DrawPopupComponent_div_12_ng_container_6_mat_checkbox_1_Template_mat_checkbox_change_0_listener($event) { i0.ɵɵrestoreView(_r14); const ctx_r13 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r13.onLabelTypeChange($event.source.value, $event.checked)); });
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const option_r12 = ctx.$implicit;
+    const ctx_r11 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("value", option_r12.value)("disabled", ctx_r11.optionAvailable(option_r12.value))("checked", option_r12.checked);
+    i0.ɵɵadvance(1);
+    i0.ɵɵtextInterpolate1(" ", ctx_r11.getProperLengthLabel(option_r12.value), " ");
+} }
+function DrawPopupComponent_div_12_ng_container_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainerStart(0, 5);
+    i0.ɵɵtemplate(1, DrawPopupComponent_div_12_ng_container_6_mat_checkbox_1_Template, 2, 4, "mat-checkbox", 12);
+    i0.ɵɵelementContainerEnd();
+} if (rf & 2) {
+    const ctx_r3 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(1);
+    i0.ɵɵproperty("ngForOf", ctx_r3.arrayBuiltInType);
+} }
+function DrawPopupComponent_div_12_div_7_mat_option_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "mat-option", 3);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const unit_r17 = ctx.$implicit;
+    i0.ɵɵproperty("value", unit_r17);
+    i0.ɵɵadvance(1);
+    i0.ɵɵtextInterpolate1(" ", unit_r17, " ");
+} }
+function DrawPopupComponent_div_12_div_7_Template(rf, ctx) { if (rf & 1) {
+    const _r19 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div")(1, "mat-form-field", 14);
+    i0.ɵɵelement(2, "input", 15, 16);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "mat-form-field", 17)(5, "mat-select", 18);
+    i0.ɵɵlistener("selectionChange", function DrawPopupComponent_div_12_div_7_Template_mat_select_selectionChange_5_listener($event) { i0.ɵɵrestoreView(_r19); const ctx_r18 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r18.onChangeCoordinateUnit($event.value)); });
+    i0.ɵɵtemplate(6, DrawPopupComponent_div_12_div_7_mat_option_6_Template, 2, 2, "mat-option", 19);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r4 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(2);
+    i0.ɵɵpropertyInterpolate("value", ctx_r4.currentCoordinates);
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("value", ctx_r4.coordinatesMeasureUnit);
+    i0.ɵɵadvance(1);
+    i0.ɵɵproperty("ngForOf", ctx_r4.allCoordinatesUnits);
+} }
+function DrawPopupComponent_div_12_div_8_mat_option_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "mat-option", 3);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const unit_r22 = ctx.$implicit;
+    const ctx_r21 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("value", unit_r22);
+    i0.ɵɵadvance(1);
+    i0.ɵɵtextInterpolate1(" ", ctx_r21.getLengthUnitEnum(unit_r22), " ");
+} }
+function DrawPopupComponent_div_12_div_8_Template(rf, ctx) { if (rf & 1) {
+    const _r24 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div")(1, "mat-form-field", 14);
+    i0.ɵɵelement(2, "input", 20, 16);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "mat-form-field", 17)(5, "mat-select", 18);
+    i0.ɵɵlistener("selectionChange", function DrawPopupComponent_div_12_div_8_Template_mat_select_selectionChange_5_listener($event) { i0.ɵɵrestoreView(_r24); const ctx_r23 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r23.onChangeLengthUnit($event.value)); });
+    i0.ɵɵtemplate(6, DrawPopupComponent_div_12_div_8_mat_option_6_Template, 2, 2, "mat-option", 19);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r5 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(2);
+    i0.ɵɵpropertyInterpolate("placeholder", ctx_r5.lengthLabelT);
+    i0.ɵɵpropertyInterpolate("value", ctx_r5.currentLength);
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("value", ctx_r5.lengthMeasureUnit);
+    i0.ɵɵadvance(1);
+    i0.ɵɵproperty("ngForOf", ctx_r5.allLengthUnits);
+} }
+function DrawPopupComponent_div_12_div_9_mat_option_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "mat-option", 3);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const unit_r27 = ctx.$implicit;
+    const ctx_r26 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("value", unit_r27);
+    i0.ɵɵadvance(1);
+    i0.ɵɵtextInterpolate1(" ", ctx_r26.getAreaUnitEnum(unit_r27), " ");
+} }
+function DrawPopupComponent_div_12_div_9_Template(rf, ctx) { if (rf & 1) {
+    const _r29 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div")(1, "mat-form-field", 14);
+    i0.ɵɵelement(2, "input", 20, 16);
+    i0.ɵɵpipe(4, "translate");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "mat-form-field", 17)(6, "mat-select", 18);
+    i0.ɵɵlistener("selectionChange", function DrawPopupComponent_div_12_div_9_Template_mat_select_selectionChange_6_listener($event) { i0.ɵɵrestoreView(_r29); const ctx_r28 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r28.onChangeAreaUnit($event.value)); });
+    i0.ɵɵtemplate(7, DrawPopupComponent_div_12_div_9_mat_option_7_Template, 2, 2, "mat-option", 19);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r6 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(2);
+    i0.ɵɵpropertyInterpolate("placeholder", i0.ɵɵpipeBind1(4, 4, "igo.geo.draw.labelType.Area"));
+    i0.ɵɵpropertyInterpolate("value", ctx_r6.currentArea);
+    i0.ɵɵadvance(4);
+    i0.ɵɵproperty("value", ctx_r6.areaMeasureUnit);
+    i0.ɵɵadvance(1);
+    i0.ɵɵproperty("ngForOf", ctx_r6.allAreaUnits);
+} }
+function DrawPopupComponent_div_12_Template(rf, ctx) { if (rf & 1) {
+    const _r31 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div")(1, "div")(2, "p", 5);
+    i0.ɵɵtext(3);
+    i0.ɵɵpipe(4, "translate");
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(5, DrawPopupComponent_div_12_mat_radio_group_5_Template, 2, 1, "mat-radio-group", 6);
+    i0.ɵɵtemplate(6, DrawPopupComponent_div_12_ng_container_6_Template, 2, 1, "ng-container", 6);
+    i0.ɵɵtemplate(7, DrawPopupComponent_div_12_div_7_Template, 7, 3, "div", 4);
+    i0.ɵɵtemplate(8, DrawPopupComponent_div_12_div_8_Template, 7, 4, "div", 4);
+    i0.ɵɵtemplate(9, DrawPopupComponent_div_12_div_9_Template, 8, 6, "div", 4);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(10, "div", 7)(11, "button", 8);
+    i0.ɵɵlistener("click", function DrawPopupComponent_div_12_Template_button_click_11_listener() { i0.ɵɵrestoreView(_r31); const ctx_r30 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r30.cancelDrawing()); });
+    i0.ɵɵtext(12);
+    i0.ɵɵpipe(13, "translate");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(14, "button", 9);
+    i0.ɵɵlistener("click", function DrawPopupComponent_div_12_Template_button_click_14_listener() { i0.ɵɵrestoreView(_r31); const ctx_r32 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r32.confirm()); });
+    i0.ɵɵtext(15);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(4, 8, "igo.geo.draw.builtInInstructions"));
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngIf", ctx_r0.olGeometryType !== "Polygon");
+    i0.ɵɵadvance(1);
+    i0.ɵɵproperty("ngIf", ctx_r0.olGeometryType === "Polygon");
+    i0.ɵɵadvance(1);
+    i0.ɵɵproperty("ngIf", ctx_r0.labelFlag === ctx_r0.labelType.Coordinates);
+    i0.ɵɵadvance(1);
+    i0.ɵɵproperty("ngIf", ctx_r0.labelFlag === ctx_r0.labelType.Length || ctx_r0.polygonCheck === 2);
+    i0.ɵɵadvance(1);
+    i0.ɵɵproperty("ngIf", ctx_r0.labelFlag === ctx_r0.labelType.Area || ctx_r0.polygonCheck === 2);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(13, 10, "igo.geo.draw.cancel"), " ");
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate1(" ", ctx_r0.noLabelButton(), " ");
+} }
+function DrawPopupComponent_div_13_Template(rf, ctx) { if (rf & 1) {
+    const _r36 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div")(1, "div")(2, "p", 5);
+    i0.ɵɵtext(3);
+    i0.ɵɵpipe(4, "translate");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "mat-form-field", 21)(6, "input", 22, 16);
+    i0.ɵɵlistener("select", function DrawPopupComponent_div_13_Template_input_select_6_listener() { return true; })("input", function DrawPopupComponent_div_13_Template_input_input_6_listener($event) { i0.ɵɵrestoreView(_r36); const ctx_r35 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r35.getLabelLength($event.target.value)); });
+    i0.ɵɵpipe(8, "translate");
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(9, "div", 7)(10, "button", 8);
+    i0.ɵɵlistener("click", function DrawPopupComponent_div_13_Template_button_click_10_listener() { i0.ɵɵrestoreView(_r36); const ctx_r37 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r37.cancelDrawing()); });
+    i0.ɵɵtext(11);
+    i0.ɵɵpipe(12, "translate");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(13, "button", 9);
+    i0.ɵɵlistener("click", function DrawPopupComponent_div_13_Template_button_click_13_listener() { i0.ɵɵrestoreView(_r36); const _r33 = i0.ɵɵreference(7); const ctx_r38 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r38.confirm(_r33.value)); });
+    i0.ɵɵtext(14);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(4, 5, "igo.geo.draw.dialogInstruction"));
+    i0.ɵɵadvance(3);
+    i0.ɵɵpropertyInterpolate("placeholder", i0.ɵɵpipeBind1(8, 7, "igo.geo.draw.dialogTitle"));
+    i0.ɵɵpropertyInterpolate("value", ctx_r1.currentLabel);
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(12, 9, "igo.geo.draw.cancel"), " ");
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.noLabelButton(), " ");
+} }
 class DrawPopupComponent {
-    constructor(dialogRef, data) {
+    constructor(languageService, dialogRef, data) {
+        this.languageService = languageService;
         this.dialogRef = dialogRef;
         this.data = data;
         this.confirmFlag = false;
-    }
+        this.labelFlag = LabelType.Custom;
+        this.geometryType = GeometryType;
+        this.labelType = LabelType;
+        this.arrayBuiltInType = [];
+        this.olGeometryType = undefined;
+        this.polygonCheck = 0; // Count for polygon label types checkboxes
+        this.currentLabel = this.data.olGeometry.get('draw');
+        this.labelLength = this.currentLabel ? this.currentLabel.length : 0;
+        let olGeometry;
+        const projection = this.data.map.ol.getView().getProjection();
+        if (this.data.olGeometry instanceof OlFeature) {
+            if (this.data.olGeometry.get('rad')) {
+                const longitudeLatitude = [this.data.olGeometry.get('longitude'), this.data.olGeometry.get('latitude')];
+                this.olGeometryType = GeometryType.Circle;
+                olGeometry = new OlCircle(longitudeLatitude, this.data.olGeometry.get('rad'));
+            }
+            else {
+                this.olGeometryType = this.data.olGeometry.getGeometry().getType();
+                olGeometry = this.data.olGeometry.get('geometry');
+            }
+        }
+        else {
+            this.olGeometryType = this.data.olGeometry.getType();
+            olGeometry = this.data.olGeometry;
+        }
+        if (this.olGeometryType === GeometryType.Point || this.olGeometryType === GeometryType.Circle) {
+            if (this.data.olGeometry instanceof OlFeature) {
+                let longitude = this.data.olGeometry.get('longitude');
+                let latitude = this.data.olGeometry.get('latitude');
+                this.longlatDD = roundCoordTo([longitude, latitude], 5);
+                this.coordinatesInDD = '(' + latitude + ', '
+                    + longitude + ')';
+            }
+            else {
+                let point4326 = transform(this.data.olGeometry.getFlatCoordinates(), projection, 'EPSG:4326');
+                this.longlatDD = roundCoordTo([point4326[0], point4326[1]], 5);
+                this.coordinatesInDD =
+                    '(' + this.longlatDD[1] + ', ' + this.longlatDD[0] + ')';
+            }
+            this.currentCoordinates = this.coordinatesInDD;
+        }
+        if (this.olGeometryType === GeometryType.LineString) {
+            this.lengthInMeters = measureOlGeometryLength(olGeometry, projection.getCode()).toFixed(2);
+            this.currentLength = this.lengthInMeters;
+        }
+        else if (this.olGeometryType === GeometryType.Polygon) {
+            this.lengthInMeters = measureOlGeometryLength(olGeometry, projection.getCode()).toFixed(2);
+            this.currentLength = this.lengthInMeters;
+            this.areaInMetersSquare = measureOlGeometryArea(olGeometry, projection.getCode()).toFixed(2);
+            this.currentArea = this.areaInMetersSquare;
+        }
+        else if (this.olGeometryType === GeometryType.Circle) {
+            let circularPolygon = fromCircle(olGeometry, 10000);
+            const radius = this.getRadius(circularPolygon);
+            this.lengthInMeters = radius.toFixed(2);
+            this.currentLength = this.lengthInMeters;
+            this.areaInMetersSquare = measureOlGeometryArea(circularPolygon, projection.getCode()).toFixed(2);
+            this.currentArea = this.areaInMetersSquare;
+        }
+        if (data.olGeometry.get('labelType') === LabelType.Coordinates) {
+            this.onLabelTypeChange(LabelType.Predefined);
+            this.onLabelTypeChange(LabelType.Coordinates, true);
+            this.coordinatesMeasureUnit = data.olGeometry.get('measureUnit');
+        }
+        else if (data.olGeometry.get('labelType') === LabelType.Length) {
+            this.onLabelTypeChange(LabelType.Predefined);
+            this.onLabelTypeChange(LabelType.Length, true);
+            this.lengthMeasureUnit = data.olGeometry.get('measureUnit');
+        }
+        else if (data.olGeometry.get('labelType') === LabelType.Area) {
+            this.onLabelTypeChange(LabelType.Predefined);
+            this.onLabelTypeChange(LabelType.Area, true);
+            this.areaMeasureUnit = data.olGeometry.get('measureUnit');
+        }
+        else if (data.olGeometry.get('labelType')?.length === 2) {
+            this.onLabelTypeChange(LabelType.Predefined);
+            this.onLabelTypeChange(LabelType.Length, true);
+            this.onLabelTypeChange(LabelType.Area, true);
+            this.lengthMeasureUnit = data.olGeometry.get('measureUnit')[0];
+            this.areaMeasureUnit = data.olGeometry.get('measureUnit')[1];
+        }
+        this.buildArrayType();
+    }
+    /**
+     * HTML Interactions
+     */
     cancelDrawing() {
         this.dialogRef.close();
     }
-    confirm(labelString) {
+    confirm(input) {
         this.confirmFlag = true;
-        this.dialogRef.close(labelString);
+        if (this.labelFlag === LabelType.Predefined) {
+            this.dialogRef.close();
+        }
+        else if (this.labelFlag === LabelType.Custom) {
+            this.dialogRef.close({
+                label: input
+            });
+        }
+        else if (this.labelFlag === LabelType.Coordinates) {
+            this.dialogRef.close({
+                label: this.currentCoordinates,
+                measureUnit: this.coordinatesMeasureUnit
+            });
+        }
+        else if (this.olGeometryType === GeometryType.Polygon) {
+            if (this.polygonCheck === 2) {
+                this.labelFlag = [LabelType.Length, LabelType.Area];
+                this.dialogRef.close({
+                    label: 'P: ' + this.currentLength + ' ' + MeasureLengthUnitAbbreviation[MeasureLengthUnit.Meters] + '\n'
+                        + this.languageService.translate.instant('igo.geo.draw.labelType.A') + this.currentArea + ' ' +
+                        MeasureAreaUnitAbbreviation[MeasureAreaUnit.SquareMeters], measureUnit: [this.lengthMeasureUnit, this.areaMeasureUnit]
+                });
+            }
+            else {
+                this.labelFlag === LabelType.Length ?
+                    this.dialogRef.close({
+                        label: 'P: ' + this.currentLength + ' ' + MeasureLengthUnitAbbreviation[this.lengthMeasureUnit],
+                        measureUnit: this.lengthMeasureUnit
+                    }) :
+                    this.dialogRef.close({
+                        label: this.currentArea + ' ' + MeasureAreaUnitAbbreviation[this.areaMeasureUnit],
+                        measureUnit: this.areaMeasureUnit
+                    });
+            }
+        }
+        else if (this.labelFlag === LabelType.Length) {
+            if (this.olGeometryType === GeometryType.Circle) {
+                this.dialogRef.close({
+                    label: 'R: ' + this.currentLength + ' ' + MeasureLengthUnitAbbreviation[this.lengthMeasureUnit],
+                    measureUnit: this.lengthMeasureUnit
+                });
+            }
+            else if (this.olGeometryType === GeometryType.LineString) {
+                this.dialogRef.close({
+                    label: this.currentLength + ' ' + MeasureLengthUnitAbbreviation[this.lengthMeasureUnit],
+                    measureUnit: this.lengthMeasureUnit
+                });
+            }
+        }
+        else if (this.labelFlag === LabelType.Area) {
+            this.dialogRef.close({
+                label: this.currentArea + ' ' + MeasureAreaUnitAbbreviation[this.areaMeasureUnit],
+                measureUnit: this.areaMeasureUnit
+            });
+        }
+    }
+    onLabelTypeChange(labelType, checked) {
+        if (labelType !== LabelType.Predefined &&
+            labelType !== LabelType.Custom &&
+            this.olGeometryType === GeometryType.Polygon) {
+            this.arrayBuiltInType.find(type => type.value === labelType) ?
+                this.arrayBuiltInType.find(type => type.value === labelType).checked = checked : this.labelFlag = undefined;
+            checked ? this.labelFlag = labelType : this.labelFlag = this.arrayBuiltInType.find(type => type.checked)?.value;
+        }
+        else {
+            this.labelFlag = labelType;
+        }
+        if (labelType === LabelType.Predefined) {
+            if (this.olGeometryType === GeometryType.Point) {
+                this.labelFlag = LabelType.Coordinates;
+                this.currentCoordinates = this.coordinatesInDD;
+                this.coordinatesMeasureUnit = CoordinatesUnit.DecimalDegree;
+            }
+            else if (this.olGeometryType === GeometryType.LineString) {
+                this.labelFlag = LabelType.Length;
+                this.currentLength = this.lengthInMeters;
+                this.lengthMeasureUnit = MeasureLengthUnit.Meters;
+            }
+        }
+        else if (labelType === LabelType.Area) {
+            this.currentArea = this.areaInMetersSquare;
+            this.areaMeasureUnit = MeasureAreaUnit.SquareMeters;
+        }
+        else if (labelType === LabelType.Length) {
+            this.currentLength = this.lengthInMeters;
+            this.lengthMeasureUnit = MeasureLengthUnit.Meters;
+        }
+        else if (this.labelFlag === LabelType.Coordinates) {
+            this.currentCoordinates = this.coordinatesInDD;
+            this.coordinatesMeasureUnit = CoordinatesUnit.DecimalDegree;
+        }
+        const labeltypes = [this.labelType.Length, this.labelType.Area];
+        if (this.olGeometryType === GeometryType.Polygon &&
+            labeltypes.includes(labelType)) {
+            checked ? this.polygonCheck += 1 : this.polygonCheck -= 1;
+            ;
+        }
+        else {
+            this.polygonCheck = 0;
+        }
+    }
+    onChangeLengthUnit(lengthUnit) {
+        this.lengthMeasureUnit = lengthUnit;
+        this.currentLength = metersToUnit(Number(this.lengthInMeters), lengthUnit).toFixed(2);
+    }
+    onChangeAreaUnit(areaUnit) {
+        this.areaMeasureUnit = areaUnit;
+        this.currentArea = squareMetersToUnit(Number(this.areaInMetersSquare), areaUnit).toFixed(2);
+    }
+    onChangeCoordinateUnit(coordinatesUnit) {
+        this.coordinatesMeasureUnit = coordinatesUnit;
+        let coordinates = DDtoDMS(this.longlatDD, coordinatesUnit);
+        this.currentCoordinates = '(' + coordinates[1] + ', ' + coordinates[0] + ')';
+    }
+    buildArrayType() {
+        for (const labelType of Object.values(LabelType)) {
+            if (labelType !== LabelType.Custom && labelType !== LabelType.Predefined) {
+                this.arrayBuiltInType.push({
+                    value: labelType,
+                    checked: this.selectOptions(labelType) ||
+                        this.labelFlag === labelType ||
+                        (this.polygonCheck === 2 && labelType !== LabelType.Coordinates)
+                });
+            }
+        }
+    }
+    noLabelButton() {
+        if (this.labelFlag === LabelType.Predefined || (this.labelFlag === LabelType.Custom && this.labelLength === 0)) {
+            return this.languageService.translate.instant('igo.geo.draw.noLabel');
+        }
+        return 'OK';
+    }
+    get customOrPredefined() {
+        if (this.labelFlag === LabelType.Custom) {
+            return LabelType.Custom;
+        }
+        return LabelType.Predefined;
+    }
+    optionAvailable(currentOption) {
+        switch (this.olGeometryType) {
+            case GeometryType.Point:
+                if (currentOption === LabelType.Coordinates) {
+                    return false;
+                }
+                return true;
+            case GeometryType.LineString:
+                if (currentOption === LabelType.Length) {
+                    return false;
+                }
+                return true;
+            case GeometryType.Polygon:
+                if (currentOption === LabelType.Coordinates) {
+                    return true;
+                }
+                return false;
+            default:
+                return false;
+        }
+    }
+    get allLengthUnits() {
+        return Object.values(MeasureLengthUnit);
+    }
+    getLengthUnitEnum(lengthUnit) {
+        return MeasureLengthUnitAbbreviation[lengthUnit];
+    }
+    get allAreaUnits() {
+        return Object.values(MeasureAreaUnit);
+    }
+    get allCoordinatesUnits() {
+        return Object.values(CoordinatesUnit);
+    }
+    getAreaUnitEnum(areaUnit) {
+        return MeasureAreaUnitAbbreviation[areaUnit];
+    }
+    getRadius(olGeometry) {
+        const length = getLength(olGeometry);
+        return Number(length / (2 * Math.PI));
+    }
+    get lengthLabelT() {
+        if (this.olGeometryType === GeometryType.Polygon) {
+            return this.languageService.translate.instant('igo.geo.measure.perimeter');
+        }
+        if (this.olGeometryType === GeometryType.Circle) {
+            return this.languageService.translate.instant('igo.geo.search.coordinates.radius');
+        }
+        return this.languageService.translate.instant('igo.geo.draw.labelType.Length');
+    }
+    getLabelLength(event) {
+        this.labelLength = event.length;
+    }
+    selectOptions(option) {
+        if (this.olGeometryType === GeometryType.Point) {
+            return option === LabelType.Coordinates;
+        }
+        else if (this.olGeometryType === GeometryType.LineString) {
+            return option === LabelType.Length;
+        }
+    }
+    getProperLengthLabel(option) {
+        if (option === LabelType.Length) {
+            if (this.olGeometryType === GeometryType.Polygon) {
+                return this.languageService.translate.instant('igo.geo.measure.perimeter');
+            }
+            if (this.olGeometryType === GeometryType.Circle) {
+                return this.languageService.translate.instant('igo.geo.search.coordinates.radius');
+            }
+            return this.languageService.translate.instant('igo.geo.draw.labelType.Length');
+        }
+        return this.languageService.translate.instant('igo.geo.draw.labelType.' + option);
     }
 }
-DrawPopupComponent.ɵfac = function DrawPopupComponent_Factory(t) { return new (t || DrawPopupComponent)(i0.ɵɵdirectiveInject(i1.MatDialogRef), i0.ɵɵdirectiveInject(MAT_DIALOG_DATA)); };
-DrawPopupComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DrawPopupComponent, selectors: [["igo-draw-popup-component"]], inputs: { confirmFlag: "confirmFlag" }, decls: 14, vars: 10, consts: [["mat-dialog-content", ""], [1, "mat-typography"], [1, "example-full-width"], ["matInput", "", 3, "placeholder", "value"], ["input", ""], ["mat-dialog-actions", ""], ["mat-raised-button", "", 3, "click"], ["mat-raised-button", "", "color", "primary", 3, "click"]], template: function DrawPopupComponent_Template(rf, ctx) { if (rf & 1) {
-        const _r1 = i0.ɵɵgetCurrentView();
-        i0.ɵɵelementStart(0, "div", 0)(1, "p", 1);
+DrawPopupComponent.ɵfac = function DrawPopupComponent_Factory(t) { return new (t || DrawPopupComponent)(i0.ɵɵdirectiveInject(i2$1.LanguageService), i0.ɵɵdirectiveInject(i1.MatDialogRef), i0.ɵɵdirectiveInject(MAT_DIALOG_DATA)); };
+DrawPopupComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DrawPopupComponent, selectors: [["igo-draw-popup-component"]], inputs: { confirmFlag: "confirmFlag", labelFlag: "labelFlag", coordinatesMeasureUnit: "coordinatesMeasureUnit", lengthMeasureUnit: "lengthMeasureUnit", areaMeasureUnit: "areaMeasureUnit" }, decls: 14, vars: 14, consts: [["mat-dialog-title", ""], [1, "geometry-type-toggle", "mat-typography"], [3, "value", "change"], [3, "value"], [4, "ngIf"], [1, "mat-typography"], ["class", "mat-typography", 4, "ngIf"], ["mat-dialog-actions", ""], ["mat-raised-button", "", 3, "click"], ["mat-raised-button", "", "color", "primary", 3, "click"], [3, "value", "disabled", "checked", "change", 4, "ngFor", "ngForOf"], [3, "value", "disabled", "checked", "change"], ["class", "mat-typography", 3, "value", "disabled", "checked", "change", 4, "ngFor", "ngForOf"], [1, "mat-typography", 3, "value", "disabled", "checked", "change"], [1, "readOnly-Input"], ["matInput", "", "placeholder", "(Latitude, Longitude)", "readonly", "", 3, "value"], ["input", ""], [1, "unit-field"], [3, "value", "selectionChange"], [3, "value", 4, "ngFor", "ngForOf"], ["matInput", "", "readonly", "", 3, "placeholder", "value"], [1, "input"], ["matInput", "", "cdkFocusInitial", "", 3, "placeholder", "value", "select", "input"]], template: function DrawPopupComponent_Template(rf, ctx) { if (rf & 1) {
+        i0.ɵɵelementStart(0, "div")(1, "h2", 0);
         i0.ɵɵtext(2);
         i0.ɵɵpipe(3, "translate");
-        i0.ɵɵelementEnd();
-        i0.ɵɵelementStart(4, "mat-form-field", 2);
-        i0.ɵɵelement(5, "input", 3, 4);
-        i0.ɵɵpipe(7, "translate");
         i0.ɵɵelementEnd()();
-        i0.ɵɵelementStart(8, "div", 5)(9, "button", 6);
-        i0.ɵɵlistener("click", function DrawPopupComponent_Template_button_click_9_listener() { return ctx.cancelDrawing(); });
+        i0.ɵɵelementStart(4, "div", 1)(5, "mat-button-toggle-group", 2);
+        i0.ɵɵlistener("change", function DrawPopupComponent_Template_mat_button_toggle_group_change_5_listener($event) { return ctx.onLabelTypeChange($event.value); });
+        i0.ɵɵelementStart(6, "mat-button-toggle", 3);
+        i0.ɵɵtext(7);
+        i0.ɵɵpipe(8, "translate");
+        i0.ɵɵelementEnd();
+        i0.ɵɵelementStart(9, "mat-button-toggle", 3);
         i0.ɵɵtext(10);
         i0.ɵɵpipe(11, "translate");
-        i0.ɵɵelementEnd();
-        i0.ɵɵelementStart(12, "button", 7);
-        i0.ɵɵlistener("click", function DrawPopupComponent_Template_button_click_12_listener() { i0.ɵɵrestoreView(_r1); const _r0 = i0.ɵɵreference(6); return i0.ɵɵresetView(ctx.confirm(_r0.value)); });
-        i0.ɵɵtext(13, "OK ");
-        i0.ɵɵelementEnd()();
+        i0.ɵɵelementEnd()()();
+        i0.ɵɵtemplate(12, DrawPopupComponent_div_12_Template, 16, 12, "div", 4);
+        i0.ɵɵtemplate(13, DrawPopupComponent_div_13_Template, 15, 11, "div", 4);
     } if (rf & 2) {
         i0.ɵɵadvance(2);
-        i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(3, 4, "igo.geo.draw.dialogInstruction"));
+        i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(3, 8, "igo.geo.draw.popupTitle"), " ");
         i0.ɵɵadvance(3);
-        i0.ɵɵpropertyInterpolate("placeholder", i0.ɵɵpipeBind1(7, 6, "igo.geo.draw.dialogTitle"));
-        i0.ɵɵpropertyInterpolate("value", ctx.data.currentLabel);
-        i0.ɵɵadvance(5);
-        i0.ɵɵtextInterpolate1("", i0.ɵɵpipeBind1(11, 8, "igo.geo.draw.cancel"), " ");
-    } }, dependencies: [i3.MatButton, i13.MatFormField, i14.MatInput, i1.MatDialogContent, i1.MatDialogActions, i7.TranslatePipe] });
+        i0.ɵɵproperty("value", ctx.customOrPredefined);
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("value", ctx.labelType.Custom);
+        i0.ɵɵadvance(1);
+        i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(8, 10, "igo.geo.draw.labelType.custom"), " ");
+        i0.ɵɵadvance(2);
+        i0.ɵɵproperty("value", ctx.labelType.Predefined);
+        i0.ɵɵadvance(1);
+        i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(11, 12, "igo.geo.draw.labelType.predefined"), " ");
+        i0.ɵɵadvance(2);
+        i0.ɵɵproperty("ngIf", ctx.labelFlag !== ctx.labelType.Custom);
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngIf", ctx.labelFlag === ctx.labelType.Custom);
+    } }, dependencies: [i1$1.NgForOf, i1$1.NgIf, i3.MatButton, i18.MatButtonToggleGroup, i18.MatButtonToggle, i13.MatFormField, i14.MatInput, i15.MatSelect, i9.MatOption, i1.MatDialogTitle, i1.MatDialogActions, i17.MatRadioGroup, i17.MatRadioButton, i12.MatCheckbox, i7.TranslatePipe], styles: [".mat-radio-button[_ngcontent-%COMP%] ~ .mat-radio-button[_ngcontent-%COMP%]{margin-left:16px}.readOnly-Input[_ngcontent-%COMP%]{width:200px!important}.unit-field[_ngcontent-%COMP%]{width:50px;margin-left:10px;margin-top:10px}.mat-form-field[_ngcontent-%COMP%]{position:-webkit-sticky!important;position:sticky!important}.coordinatesInputView[_ngcontent-%COMP%]{top:5em!important}  .mat-form-field-wrapper{margin-bottom:-1.25em;margin-top:.25em}.geometry-type-toggle[_ngcontent-%COMP%], .mat-dialog-actions[_ngcontent-%COMP%]{display:flex!important;justify-content:center}.input[_ngcontent-%COMP%]{width:auto!important}.mat-button-toggle-group[_ngcontent-%COMP%], .mat-button-toggle[_ngcontent-%COMP%]{width:100%}mat-checkbox[_ngcontent-%COMP%]{margin-right:10px}"] });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DrawPopupComponent, [{
         type: Component,
-        args: [{ selector: 'igo-draw-popup-component', template: "<div mat-dialog-content>\n  <p class=\"mat-typography\">{{ 'igo.geo.draw.dialogInstruction' | translate }}</p>\n  <mat-form-field class=\"example-full-width\">\n    <input\n      #input\n      matInput\n      placeholder=\"{{'igo.geo.draw.dialogTitle' | translate}}\"\n      value=\"{{data.currentLabel}}\"/>\n  </mat-form-field>\n</div>\n<div mat-dialog-actions>\n  <button \n    mat-raised-button \n    (click)=\"cancelDrawing()\">{{'igo.geo.draw.cancel' | translate}}\n  </button>\n  <button \n    mat-raised-button \n    color=\"primary\" \n    (click)=\"confirm(input.value)\">OK\n  </button>\n</div>\n" }]
-    }], function () { return [{ type: i1.MatDialogRef }, { type: undefined, decorators: [{
+        args: [{ selector: 'igo-draw-popup-component', template: "<div>\r\n  <h2 mat-dialog-title>\r\n    {{ 'igo.geo.draw.popupTitle' | translate }}\r\n  </h2>\r\n</div>\r\n\r\n\r\n<div class=\"geometry-type-toggle mat-typography\">\r\n  <mat-button-toggle-group\r\n    (change)=\"onLabelTypeChange($event.value)\" [value]=\"customOrPredefined\">\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\r\n<div *ngIf=\"labelFlag !== labelType.Custom\">\r\n  <div>\r\n    <p class=\"mat-typography\">{{ 'igo.geo.draw.builtInInstructions' | translate }}</p>\r\n    <mat-radio-group *ngIf=\"olGeometryType !== 'Polygon'\" class=\"mat-typography\">\r\n      <mat-radio-button *ngFor=\"let option of arrayBuiltInType\" [value]=\"option.value\" [disabled]=\"optionAvailable(option.value)\" \r\n      (change)=\"onLabelTypeChange($event.value)\" [checked]=\"option.checked\">\r\n        {{getProperLengthLabel(option.value)}}\r\n      </mat-radio-button>\r\n    </mat-radio-group>\r\n    <ng-container class=\"mat-typography\" *ngIf=\"olGeometryType === 'Polygon'\">\r\n      <mat-checkbox\r\n        *ngFor=\"let option of arrayBuiltInType\"\r\n        class=\"mat-typography\"\r\n        [value]=\"option.value\"\r\n        [disabled]=\"optionAvailable(option.value)\"\r\n        (change)=\"onLabelTypeChange($event.source.value, $event.checked)\"\r\n        [checked]=\"option.checked\">\r\n        {{getProperLengthLabel(option.value)}}\r\n      </mat-checkbox>\r\n    </ng-container>\r\n    <div *ngIf=\"labelFlag === labelType.Coordinates\">\r\n      <mat-form-field class=\"readOnly-Input\">\r\n        <input\r\n          #input\r\n          matInput\r\n          placeholder=\"(Latitude, Longitude)\"\r\n          value=\"{{currentCoordinates}}\" readonly>\r\n      </mat-form-field>\r\n      <mat-form-field class=\"unit-field\">\r\n        <mat-select [value]=\"coordinatesMeasureUnit\" (selectionChange)=\"onChangeCoordinateUnit($event.value)\">\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 *ngIf=\"labelFlag === labelType.Length || polygonCheck === 2\">\r\n      <mat-form-field class=\"readOnly-Input\">\r\n        <input\r\n          #input\r\n          matInput\r\n          placeholder={{lengthLabelT}}\r\n          value=\"{{currentLength}}\" readonly>\r\n      </mat-form-field>\r\n      <mat-form-field class=\"unit-field\">\r\n        <mat-select [value]=\"lengthMeasureUnit\" (selectionChange)=\"onChangeLengthUnit($event.value)\">\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 *ngIf=\"labelFlag === labelType.Area || polygonCheck === 2\">\r\n      <mat-form-field class=\"readOnly-Input\">\r\n        <input\r\n          #input\r\n          matInput\r\n          placeholder=\"{{ 'igo.geo.draw.labelType.Area' | translate }}\"\r\n          value=\"{{currentArea}}\" readonly>\r\n      </mat-form-field>\r\n      <mat-form-field class=\"unit-field\">\r\n        <mat-select [value]=\"areaMeasureUnit\" (selectionChange)=\"onChangeAreaUnit($event.value)\">\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\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 \r\n      mat-raised-button \r\n      color=\"primary\" \r\n      (click)=\"confirm()\"> \r\n      {{noLabelButton()}} \r\n    </button>\r\n  </div>\r\n</div>\r\n\r\n<div *ngIf=\"labelFlag === labelType.Custom\">\r\n  <div>\r\n    <p class=\"mat-typography\">{{ 'igo.geo.draw.dialogInstruction' | translate }}</p>\r\n    <mat-form-field class=\"input\">\r\n      <input\r\n        #input\r\n        matInput\r\n        (select)=\"true\"\r\n        (input)=\"getLabelLength($event.target.value)\"\r\n        placeholder=\"{{'igo.geo.draw.dialogTitle' | translate}}\"\r\n        value=\"{{ currentLabel }}\"\r\n        cdkFocusInitial/>\r\n    </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 \r\n      mat-raised-button \r\n      color=\"primary\" \r\n      (click)=\"confirm(input.value)\">\r\n      {{noLabelButton()}}\r\n    </button>\r\n  </div>\r\n</div>\r\n", styles: [".mat-radio-button~.mat-radio-button{margin-left:16px}.readOnly-Input{width:200px!important}.unit-field{width:50px;margin-left:10px;margin-top:10px}.mat-form-field{position:-webkit-sticky!important;position:sticky!important}.coordinatesInputView{top:5em!important}::ng-deep .mat-form-field-wrapper{margin-bottom:-1.25em;margin-top:.25em}.geometry-type-toggle,.mat-dialog-actions{display:flex!important;justify-content:center}.input{width:auto!important}.mat-button-toggle-group,.mat-button-toggle{width:100%}mat-checkbox{margin-right:10px}\n"] }]
+    }], function () { return [{ type: i2$1.LanguageService }, { type: i1.MatDialogRef }, { type: undefined, decorators: [{
                 type: Inject,
                 args: [MAT_DIALOG_DATA]
             }] }]; }, { confirmFlag: [{
             type: Input
+        }], labelFlag: [{
+            type: Input
+        }], coordinatesMeasureUnit: [{
+            type: Input
+        }], lengthMeasureUnit: [{
+            type: Input
+        }], areaMeasureUnit: [{
+            type: Input
         }] }); })();
 
 class DrawShorcutsComponent {
@@ -17265,7 +17856,7 @@ DrawShorcutsComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DrawS
     } }, dependencies: [i3.MatButton, i2.MatIcon, i1.MatDialogClose, i1.MatDialogContent, i1.MatDialogActions, i7.TranslatePipe], styles: [".shortcut[_ngcontent-%COMP%]{display:flex;align-items:center}.shortcut-icon[_ngcontent-%COMP%]{margin-right:10px}.shortcuts-close[_ngcontent-%COMP%]{display:flex;justify-content:center}"] });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DrawShorcutsComponent, [{
         type: Component,
-        args: [{ selector: 'igo-draw-shorcuts', template: "<mat-dialog-content>\n  <div>\n    <span class=\"shortcut mat-typography\">\n      <mat-icon class=\"shortcut-icon\" svgIcon=\"keyboard-return\"></mat-icon>{{'igo.geo.draw.finish' | translate}}</span>\n  </div>\n  <div>\n    <span class=\"shortcut mat-typography\">\n      <mat-icon class=\"shortcut-icon\" svgIcon=\"backspace-outline\"></mat-icon>{{'igo.geo.draw.undo' | translate}}</span>\n  </div>\n  <div>\n    <span class=\"shortcut mat-typography\">\n      <mat-icon class=\"shortcut-icon\" svgIcon=\"keyboard-esc\"></mat-icon>{{'igo.geo.draw.abort' | translate}}</span>\n  </div>\n  <div>\n    <span class=\"shortcut mat-typography\">\n      <mat-icon class=\"shortcut-icon\" svgIcon=\"keyboard-space\"></mat-icon>{{'igo.geo.draw.move' | translate}}</span>\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>", styles: [".shortcut{display:flex;align-items:center}.shortcut-icon{margin-right:10px}.shortcuts-close{display:flex;justify-content:center}\n"] }]
+        args: [{ selector: 'igo-draw-shorcuts', template: "<mat-dialog-content>\r\n  <div>\r\n    <span class=\"shortcut mat-typography\">\r\n      <mat-icon class=\"shortcut-icon\" svgIcon=\"keyboard-return\"></mat-icon>{{'igo.geo.draw.finish' | translate}}</span>\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>{{'igo.geo.draw.undo' | translate}}</span>\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>{{'igo.geo.draw.abort' | translate}}</span>\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>{{'igo.geo.draw.move' | translate}}</span>\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>", styles: [".shortcut{display:flex;align-items:center}.shortcut-icon{margin-right:10px}.shortcuts-close{display:flex;justify-content:center}\n"] }]
     }], null, null); })();
 
 class DrawLayerPopupComponent {
@@ -17311,113 +17902,157 @@ DrawLayerPopupComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Dra
     } }, dependencies: [i3.MatButton, i13.MatFormField, i14.MatInput, i1.MatDialogContent, i1.MatDialogActions, i7.TranslatePipe] });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DrawLayerPopupComponent, [{
         type: Component,
-        args: [{ selector: 'igo-draw-popup-component', template: "<div mat-dialog-content>\n  <p class=\"mat-typography\">\n    {{ 'igo.geo.draw.layer.layerDialogInstruction' | translate }}\n  </p>\n  <mat-form-field class=\"example-full-width\">\n    <input\n      #input\n      matInput\n      placeholder=\"{{ 'igo.geo.draw.layer.title' | translate }}\"\n      />\n  </mat-form-field>\n</div>\n<div mat-dialog-actions>\n  <button mat-raised-button (click)=\"cancelDrawing()\">\n    {{ 'igo.geo.draw.cancel' | translate }}\n  </button>\n  <button mat-raised-button color=\"primary\" (click)=\"confirm(input.value)\">\n    OK\n  </button>\n</div>\n" }]
+        args: [{ selector: 'igo-draw-popup-component', template: "<div mat-dialog-content>\r\n  <p class=\"mat-typography\">\r\n    {{ 'igo.geo.draw.layer.layerDialogInstruction' | translate }}\r\n  </p>\r\n  <mat-form-field class=\"example-full-width\">\r\n    <input\r\n      #input\r\n      matInput\r\n      placeholder=\"{{ 'igo.geo.draw.layer.title' | translate }}\"\r\n      />\r\n  </mat-form-field>\r\n</div>\r\n<div mat-dialog-actions>\r\n  <button mat-raised-button (click)=\"cancelDrawing()\">\r\n    {{ 'igo.geo.draw.cancel' | translate }}\r\n  </button>\r\n  <button mat-raised-button color=\"primary\" (click)=\"confirm(input.value)\">\r\n    OK\r\n  </button>\r\n</div>\r\n" }]
     }], function () { return [{ type: i1.MatDialogRef }]; }, { confirmFlag: [{
             type: Input
         }] }); })();
 
 const _c0$c = ["selectedLayer"];
-function DrawComponent_mat_option_30_Template(rf, ctx) { if (rf & 1) {
+function DrawComponent_mat_slide_toggle_22_Template(rf, ctx) { if (rf & 1) {
+    const _r10 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mat-slide-toggle", 5);
+    i0.ɵɵlistener("change", function DrawComponent_mat_slide_toggle_22_Template_mat_slide_toggle_change_0_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r9 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r9.onToggleFreehandMode($event)); });
+    i0.ɵɵtext(1);
+    i0.ɵɵpipe(2, "translate");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("checked", ctx_r0.freehandMode)("labelPosition", "before");
+    i0.ɵɵadvance(1);
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(2, 3, "igo.geo.draw.freehandMode"), " ");
+} }
+function DrawComponent_div_23_mat_option_7_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "mat-option", 2);
     i0.ɵɵtext(1);
+    i0.ɵɵpipe(2, "translate");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const layer_r7 = ctx.$implicit;
-    i0.ɵɵproperty("value", layer_r7);
+    const measureUnit_r12 = ctx.$implicit;
+    i0.ɵɵproperty("value", measureUnit_r12);
     i0.ɵɵadvance(1);
-    i0.ɵɵtextInterpolate1(" ", layer_r7.title, " ");
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(2, 2, "igo.geo.measure." + measureUnit_r12), " ");
 } }
-function DrawComponent_button_34_Template(rf, ctx) { if (rf & 1) {
-    const _r9 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 20);
-    i0.ɵɵlistener("click", function DrawComponent_button_34_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r9); const ctx_r8 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r8.activeDrawingLayer.visible = !ctx_r8.activeDrawingLayer.visible); });
+function DrawComponent_div_23_Template(rf, ctx) { if (rf & 1) {
+    const _r14 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 22)(1, "form", 23)(2, "mat-form-field", 24);
+    i0.ɵɵelement(3, "input", 25);
+    i0.ɵɵpipe(4, "translate");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(5, "mat-form-field", 26)(6, "mat-select", 9);
+    i0.ɵɵlistener("selectionChange", function DrawComponent_div_23_Template_mat_select_selectionChange_6_listener($event) { i0.ɵɵrestoreView(_r14); const ctx_r13 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r13.onMeasureUnitChange($event.value)); });
+    i0.ɵɵtemplate(7, DrawComponent_div_23_mat_option_7_Template, 3, 4, "mat-option", 11);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(3);
+    i0.ɵɵpropertyInterpolate("placeholder", i0.ɵɵpipeBind1(4, 5, "igo.geo.spatialFilter.radius"));
+    i0.ɵɵproperty("formControl", ctx_r1.radiusFormControl)("readonly", ctx_r1.freehandMode);
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("value", ctx_r1.measureUnit);
+    i0.ɵɵadvance(1);
+    i0.ɵɵproperty("ngForOf", ctx_r1.measureUnits);
+} }
+function DrawComponent_mat_option_32_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "mat-option", 2);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const layer_r15 = ctx.$implicit;
+    i0.ɵɵproperty("value", layer_r15);
+    i0.ɵɵadvance(1);
+    i0.ɵɵtextInterpolate1(" ", layer_r15.title, " ");
+} }
+function DrawComponent_button_36_Template(rf, ctx) { if (rf & 1) {
+    const _r17 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 27);
+    i0.ɵɵlistener("click", function DrawComponent_button_36_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r17); const ctx_r16 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r16.activeDrawingLayer.visible = !ctx_r16.activeDrawingLayer.visible); });
     i0.ɵɵpipe(1, "translate");
     i0.ɵɵpipe(2, "translate");
-    i0.ɵɵelement(3, "mat-icon", 21);
+    i0.ɵɵelement(3, "mat-icon", 28);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("color", ctx_r2.activeDrawingLayer.visible ? "primary" : "default")("matTooltip", ctx_r2.activeDrawingLayer.visible ? i0.ɵɵpipeBind1(1, 3, "igo.geo.layer.hideLayer") : i0.ɵɵpipeBind1(2, 5, "igo.geo.layer.showLayer"));
+    const ctx_r4 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("color", ctx_r4.activeDrawingLayer.visible ? "primary" : "default")("matTooltip", ctx_r4.activeDrawingLayer.visible ? i0.ɵɵpipeBind1(1, 3, "igo.geo.layer.hideLayer") : i0.ɵɵpipeBind1(2, 5, "igo.geo.layer.showLayer"));
     i0.ɵɵadvance(3);
-    i0.ɵɵproperty("svgIcon", ctx_r2.activeDrawingLayer.visible ? "eye" : "eye-off");
+    i0.ɵɵproperty("svgIcon", ctx_r4.activeDrawingLayer.visible ? "eye" : "eye-off");
 } }
-function DrawComponent_button_37_Template(rf, ctx) { if (rf & 1) {
-    const _r11 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 22);
-    i0.ɵɵlistener("click", function DrawComponent_button_37_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r11); const ctx_r10 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r10.deleteDrawings()); });
+function DrawComponent_button_39_Template(rf, ctx) { if (rf & 1) {
+    const _r19 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 29);
+    i0.ɵɵlistener("click", function DrawComponent_button_39_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r19); const ctx_r18 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r18.deleteDrawings()); });
     i0.ɵɵpipe(1, "translate");
     i0.ɵɵpipe(2, "async");
-    i0.ɵɵelement(3, "mat-icon", 23);
+    i0.ɵɵelement(3, "mat-icon", 30);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r3 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("matTooltip", i0.ɵɵpipeBind1(1, 2, "igo.geo.draw.delete"))("disabled", i0.ɵɵpipeBind1(2, 4, ctx_r3.selectedFeatures$).length === 0);
+    const ctx_r5 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("matTooltip", i0.ɵɵpipeBind1(1, 2, "igo.geo.draw.delete"))("disabled", i0.ɵɵpipeBind1(2, 4, ctx_r5.selectedFeatures$).length === 0);
 } }
-function DrawComponent_mat_form_field_42_div_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 27);
-    i0.ɵɵelement(1, "img", 28);
+function DrawComponent_mat_form_field_44_div_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 34);
+    i0.ɵɵelement(1, "img", 35);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r12 = i0.ɵɵnextContext(2);
+    const ctx_r20 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(1);
-    i0.ɵɵpropertyInterpolate("src", ctx_r12.icon, i0.ɵɵsanitizeUrl);
+    i0.ɵɵpropertyInterpolate("src", ctx_r20.icon, i0.ɵɵsanitizeUrl);
 } }
-function DrawComponent_mat_form_field_42_mat_option_10_Template(rf, ctx) { if (rf & 1) {
-    const _r16 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mat-option", 29);
-    i0.ɵɵlistener("click", function DrawComponent_mat_form_field_42_mat_option_10_Template_mat_option_click_0_listener() { const restoredCtx = i0.ɵɵrestoreView(_r16); const icon_html_r14 = restoredCtx.$implicit; const ctx_r15 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r15.onIconChange(icon_html_r14)); });
-    i0.ɵɵelementStart(1, "div", 27);
-    i0.ɵɵelement(2, "img", 28);
+function DrawComponent_mat_form_field_44_mat_option_10_Template(rf, ctx) { if (rf & 1) {
+    const _r24 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mat-option", 36);
+    i0.ɵɵlistener("click", function DrawComponent_mat_form_field_44_mat_option_10_Template_mat_option_click_0_listener() { const restoredCtx = i0.ɵɵrestoreView(_r24); const icon_html_r22 = restoredCtx.$implicit; const ctx_r23 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r23.onIconChange(icon_html_r22)); });
+    i0.ɵɵelementStart(1, "div", 34);
+    i0.ɵɵelement(2, "img", 35);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const icon_html_r14 = ctx.$implicit;
-    i0.ɵɵproperty("value", icon_html_r14);
+    const icon_html_r22 = ctx.$implicit;
+    i0.ɵɵproperty("value", icon_html_r22);
     i0.ɵɵadvance(2);
-    i0.ɵɵpropertyInterpolate("src", icon_html_r14, i0.ɵɵsanitizeUrl);
+    i0.ɵɵpropertyInterpolate("src", icon_html_r22, i0.ɵɵsanitizeUrl);
 } }
-function DrawComponent_mat_form_field_42_Template(rf, ctx) { if (rf & 1) {
-    const _r18 = i0.ɵɵgetCurrentView();
+function DrawComponent_mat_form_field_44_Template(rf, ctx) { if (rf & 1) {
+    const _r26 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "mat-form-field")(1, "mat-label");
     i0.ɵɵtext(2);
     i0.ɵɵpipe(3, "translate");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(4, "mat-select")(5, "mat-select-trigger");
-    i0.ɵɵtemplate(6, DrawComponent_mat_form_field_42_div_6_Template, 2, 1, "div", 24);
+    i0.ɵɵtemplate(6, DrawComponent_mat_form_field_44_div_6_Template, 2, 1, "div", 31);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "mat-option", 25);
-    i0.ɵɵlistener("click", function DrawComponent_mat_form_field_42_Template_mat_option_click_7_listener() { i0.ɵɵrestoreView(_r18); const ctx_r17 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r17.onIconChange()); });
+    i0.ɵɵelementStart(7, "mat-option", 32);
+    i0.ɵɵlistener("click", function DrawComponent_mat_form_field_44_Template_mat_option_click_7_listener() { i0.ɵɵrestoreView(_r26); const ctx_r25 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r25.onIconChange()); });
     i0.ɵɵtext(8);
     i0.ɵɵpipe(9, "translate");
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(10, DrawComponent_mat_form_field_42_mat_option_10_Template, 3, 2, "mat-option", 26);
+    i0.ɵɵtemplate(10, DrawComponent_mat_form_field_44_mat_option_10_Template, 3, 2, "mat-option", 33);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r5 = i0.ɵɵnextContext();
+    const ctx_r7 = i0.ɵɵnextContext();
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(3, 4, "igo.geo.draw.icon"));
     i0.ɵɵadvance(4);
-    i0.ɵɵproperty("ngIf", ctx_r5.icon);
+    i0.ɵɵproperty("ngIf", ctx_r7.icon);
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(9, 6, "igo.geo.draw.noIcon"));
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngForOf", ctx_r5.icons);
+    i0.ɵɵproperty("ngForOf", ctx_r7.icons);
 } }
-function DrawComponent_button_46_Template(rf, ctx) { if (rf & 1) {
-    const _r20 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 30);
-    i0.ɵɵlistener("click", function DrawComponent_button_46_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r20); const ctx_r19 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r19.openStyleModalDialog()); });
+function DrawComponent_button_48_Template(rf, ctx) { if (rf & 1) {
+    const _r28 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 37);
+    i0.ɵɵlistener("click", function DrawComponent_button_48_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r28); const ctx_r27 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r27.openStyleModalDialog()); });
     i0.ɵɵpipe(1, "translate");
     i0.ɵɵtext(2);
     i0.ɵɵpipe(3, "translate");
-    i0.ɵɵelement(4, "mat-icon", 31);
+    i0.ɵɵelement(4, "mat-icon", 38);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r6 = i0.ɵɵnextContext();
+    const ctx_r8 = i0.ɵɵnextContext();
     i0.ɵɵproperty("matTooltip", i0.ɵɵpipeBind1(1, 3, "igo.geo.layer.style.styleModalTooltip"));
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(3, 5, "igo.geo.layer.style.styleModal"), " ");
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("matBadge", ctx_r6.selectedFeatures$.value.length);
+    i0.ɵɵproperty("matBadge", ctx_r8.selectedFeatures$.value.length);
 } }
 class DrawComponent {
     constructor(languageService, formBuilder, drawStyleService, dialog, drawIconService) {
@@ -17441,10 +18076,24 @@ class DrawComponent {
                 {
                     name: 'Drawing',
                     title: this.languageService.translate.instant('igo.geo.draw.labels'),
-                    tooltip: this.languageService.translate.instant('igo.geo.draw.changeLabel'),
                     valueAccessor: (feature) => {
                         return feature.properties.draw;
                     }
+                },
+                {
+                    name: 'Edition',
+                    title: '',
+                    sort: false,
+                    valueAccessor: (feature) => {
+                        return [{
+                                editMode: false,
+                                icon: 'pencil',
+                                color: 'primary',
+                                click: () => { this.editLabelDrawing(feature); },
+                                style: 'mat-icon-button'
+                            }];
+                    },
+                    renderer: EntityTableColumnRenderer.ButtonGroup,
                 }
             ]
         };
@@ -17460,8 +18109,14 @@ class DrawComponent {
         this.selectedFeatures$ = new BehaviorSubject([]);
         this.drawControlIsDisabled = true;
         this.drawControlIsActive = false;
+        this.freehandMode = false;
         this.subscriptions$$ = [];
         this.position = 'bottom';
+        this.radiusFormControl = new UntypedFormControl(1000);
+        this.measureUnit = MeasureLengthUnit.Meters;
+        this.radiusFormControlChange$$ = new Subscription();
+        this.predefinedRadius$ = new BehaviorSubject(undefined);
+        this.radiusDrawEnd$ = new BehaviorSubject(undefined);
         this.isCreatingNewLayer = false;
         this.currGeometryType = this.geometryType.Point;
         this.buildForm();
@@ -17492,6 +18147,13 @@ class DrawComponent {
     set activeDrawingLayer(value) {
         this._activeDrawingLayer = value;
     }
+    /**
+     * Available measure units for the measure type given
+     * @internal
+     */
+    get measureUnits() {
+        return [MeasureLengthUnit.Meters, MeasureLengthUnit.Kilometers];
+    }
     // Initialize the store that will contain the entities and create the Draw control
     ngOnInit() {
         if (!this.stores.length) {
@@ -17544,6 +18206,11 @@ class DrawComponent {
             });
             this.onLayerChange(this.activeDrawingLayer);
         }
+        this.radiusFormControlChange$$ = this.radiusFormControl.valueChanges.subscribe(value => {
+            if (this.activeDrawControl.ispredefinedRadius$.getValue()) {
+                this.changeRadius(value);
+            }
+        });
     }
     /**
      * Remove the drawing layer and the interactions
@@ -17554,6 +18221,7 @@ class DrawComponent {
         this.activeStore.state.updateAll({ selected: false });
         this.deactivateDrawControl();
         this.subscriptions$$.map((s) => s.unsubscribe());
+        this.radiusFormControlChange$$.unsubscribe();
     }
     /**
      * Create a Draw Control
@@ -17627,30 +18295,21 @@ class DrawComponent {
             // open the dialog box used to enter label
             const dialogRef = this.dialog.open(DrawPopupComponent, {
                 disableClose: false,
-                data: { currentLabel: olGeometry.get('draw') }
+                data: { olGeometry: olGeometry, map: this.map }
             });
             // when dialog box is closed, get label and set it to geometry
-            dialogRef.afterClosed().subscribe((label) => {
+            dialogRef.afterClosed().subscribe((result) => {
                 // checks if the user clicked ok
                 if (dialogRef.componentInstance.confirmFlag) {
-                    this.updateLabelOfOlGeometry(olGeometry, label);
-                    if (!olGeometry.values_.fontStyle) {
-                        this.updateFontSizeAndStyle(olGeometry, '20', FontType.Arial);
-                    }
-                    if (!olGeometry.values_.drawingStyle) {
+                    this.updateLabelOfOlGeometry(olGeometry, result.label);
+                    this.updateLabelType(olGeometry, dialogRef.componentInstance.labelFlag);
+                    this.updateMeasureUnit(olGeometry, result.measureUnit);
+                    if (!(olGeometry instanceof OlFeature)) {
+                        this.updateFontSizeAndStyle(olGeometry, '15', FontType.Arial);
                         this.updateFillAndStrokeColor(olGeometry, 'rgba(255,255,255,0.4)', 'rgba(143,7,7,1)');
+                        this.updateOffset(olGeometry, 0, (olGeometry instanceof OlPoint) ? -15 : 0);
                     }
-                    if (!(olGeometry.values_.offsetX || olGeometry.values_.offsetY)) {
-                        this.updateOffset(olGeometry, 0, olGeometry instanceof OlPoint ? -15 : 0);
-                    }
-                    // if event was fired at draw end
-                    if (isDrawEnd) {
-                        this.onDrawEnd(olGeometry);
-                        // if event was fired at select
-                    }
-                    else {
-                        this.onSelectDraw(olGeometry, label);
-                    }
+                    isDrawEnd ? this.onDrawEnd(olGeometry) : this.onSelectDraw(olGeometry, result.label, [dialogRef.componentInstance.labelFlag, result.measureUnit]);
                     this.updateHeightTable();
                 }
                 // deletes the feature
@@ -17682,7 +18341,55 @@ class DrawComponent {
             const entityId = entity.properties.id;
             const olGeometryId = olGeometry.ol_uid;
             if (entityId === olGeometryId) {
-                this.updateLabelOfOlGeometry(olGeometry, entity.properties.draw);
+                if (entity.properties.labelType === LabelType.Coordinates) {
+                    let longLat = DDtoDMS([entity.properties.longitude, entity.properties.latitude], entity.properties.measureUnit);
+                    this.updateLabelOfOlGeometry(olGeometry, '(' + longLat[1] + ', ' + longLat[0] + ')');
+                }
+                else if (entity.properties.labelType === LabelType.Length) {
+                    if (olGeometry instanceof OlCircle) {
+                        let circularPolygon = fromCircle(olGeometry, 10000);
+                        const radius = metersToUnit(this.getRadius(circularPolygon), entity.properties.measureUnit);
+                        const unit = MeasureLengthUnitAbbreviation[entity.properties.measureUnit];
+                        const radiusLabel = 'R: ' + radius.toFixed(2).toString() + ' ' + unit;
+                        this.updateLabelOfOlGeometry(olGeometry, radiusLabel);
+                    }
+                    else {
+                        let olGeometryLength = measureOlGeometryLength(olGeometry, this.map.ol.getView().getProjection().getCode());
+                        let measureUnit;
+                        const temp = entity.properties.measureUnit;
+                        measureUnit = MeasureLengthUnitAbbreviation[entity.properties.measureUnit];
+                        olGeometryLength = metersToUnit(olGeometryLength, temp);
+                        let lengthLabel = olGeometry instanceof OlPolygon ?
+                            'P: ' + olGeometryLength.toFixed(2).toString() + ' ' + measureUnit
+                            : olGeometryLength.toFixed(2).toString() + ' ' + measureUnit;
+                        this.updateLabelOfOlGeometry(olGeometry, lengthLabel);
+                    }
+                }
+                else if (entity.properties.labelType === LabelType.Area) {
+                    if (olGeometry instanceof OlCircle) {
+                        let circularPolygon = fromCircle(olGeometry, 10000);
+                        let circleArea = measureOlGeometryArea(circularPolygon, this.map.ol.getView().getProjection().getCode());
+                        const unit = MeasureAreaUnitAbbreviation[entity.properties.measureUnit];
+                        const temp = entity.properties.measureUnit;
+                        circleArea = squareMetersToUnit(circleArea, temp);
+                        const areaLabel = circleArea.toFixed(2).toString() + ' ' + unit;
+                        this.updateLabelOfOlGeometry(olGeometry, areaLabel);
+                    }
+                    else {
+                        let olGeometryArea = measureOlGeometryArea(olGeometry, this.map.ol.getView().getProjection().getCode());
+                        let measureUnit;
+                        const temp = entity.properties.measureUnit;
+                        measureUnit = MeasureAreaUnitAbbreviation[entity.properties.measureUnit];
+                        olGeometryArea = squareMetersToUnit(olGeometryArea, temp);
+                        const lengthLabel = olGeometryArea.toFixed(2).toString() + ' ' + measureUnit;
+                        this.updateLabelOfOlGeometry(olGeometry, lengthLabel);
+                    }
+                }
+                else {
+                    this.updateLabelOfOlGeometry(olGeometry, entity.properties.draw);
+                }
+                this.updateLabelType(olGeometry, entity.properties.labelType);
+                this.updateMeasureUnit(olGeometry, entity.properties.measureUnit);
                 this.updateFontSizeAndStyle(olGeometry, entity.properties.fontStyle.split(' ')[0].replace('px', ''), entity.properties.fontStyle.substring(entity.properties.fontStyle.indexOf(' ') + 1));
                 this.updateFillAndStrokeColor(olGeometry, entity.properties.drawingStyle.fill, entity.properties.drawingStyle.stroke);
                 this.updateOffset(olGeometry, entity.properties.offsetX, entity.properties.offsetY);
@@ -17690,7 +18397,7 @@ class DrawComponent {
             }
         });
     }
-    onSelectDraw(olFeature, label) {
+    onSelectDraw(olFeature, label, labelTypeAndUnit) {
         const entities = this.activeStore.all();
         const olGeometry = olFeature.getGeometry();
         olGeometry.ol_uid = olFeature.get('id');
@@ -17716,6 +18423,8 @@ class DrawComponent {
                 this.updateFontSizeAndStyle(olGeometry, fontSize, fontStyle);
                 this.updateFillAndStrokeColor(olGeometry, fillColor, strokeColor);
                 this.updateOffset(olGeometry, offsetX, offsetY);
+                this.updateLabelType(olGeometry, labelTypeAndUnit[0]);
+                this.updateMeasureUnit(olGeometry, labelTypeAndUnit[1]);
                 this.replaceFeatureInStore(entity, olGeometry, rad);
             }
         });
@@ -17755,8 +18464,12 @@ class DrawComponent {
                 lon4326 = center4326[0];
                 lat4326 = center4326[1];
                 rad = getDistance(center4326, extent4326);
+                this.radiusFormControl.setValue(Math.round(rad));
             }
         }
+        if (this.activeDrawControl.radiusDrawEnd$.getValue()) {
+            rad = this.activeDrawControl.radiusDrawEnd$.getValue();
+        }
         if (olGeometry instanceof OlPoint) {
             point4326 = transform(olGeometry.getFlatCoordinates(), projection, 'EPSG:4326');
             lon4326 = point4326[0];
@@ -17778,12 +18491,16 @@ class DrawComponent {
                     stroke: olGeometry.get('strokeColor_')
                 },
                 offsetX: olGeometry.get('offsetX_'),
-                offsetY: olGeometry.get('offsetY_')
+                offsetY: olGeometry.get('offsetY_'),
+                labelType: olGeometry.get('labelType_'),
+                measureUnit: olGeometry.get('measureUnit_')
             },
             meta: {
                 id: featureId
             }
         });
+        this.activeDrawControl.predefinedRadius$.next(undefined);
+        this.activeDrawControl.radiusDrawEnd$.next(undefined);
     }
     buildForm() {
         this.form = this.formBuilder.group({
@@ -17828,11 +18545,9 @@ class DrawComponent {
     /**
      * Called when the user double-clicks the selected drawing
      */
-    editLabelDrawing() {
-        if (this.selectedFeatures$.value.length) {
-            const olGeometry = featureToOl(this.selectedFeatures$.value[0], this.map.ol.getView().getProjection().getCode());
-            this.openDrawDialog(olGeometry, false);
-        }
+    editLabelDrawing(feature) {
+        const olGeometryFeature = featureToOl(feature, this.map.ol.getView().getProjection().getCode());
+        this.openDrawDialog(olGeometryFeature, false);
     }
     openShorcutsDialog() {
         this.dialog.open(DrawShorcutsComponent);
@@ -17869,6 +18584,19 @@ class DrawComponent {
     onToggleDrawControl(toggleIsChecked) {
         toggleIsChecked ? this.toggleDrawControl() : this.deactivateDrawControl();
     }
+    onToggleFreehandMode(event) {
+        if (this.isCircle() && !event.checked) {
+            this.activeDrawControl.ispredefinedRadius$.next(true);
+            this.changeRadius(this.radiusFormControl.value);
+        }
+        else {
+            this.activeDrawControl.setOlInteractionStyle(createInteractionStyle(this.fillColor, this.strokeColor, this.strokeWidth));
+            this.activeDrawControl.ispredefinedRadius$.next(false);
+        }
+        this.freehandMode = event.checked;
+        this.activeDrawControl.freehand$.next(event.checked);
+        this.toggleDrawControl();
+    }
     // User changes properties of a drawing element
     /**
      * Display the current layer with the current store and the current layerSource
@@ -18019,16 +18747,19 @@ class DrawComponent {
     onGeometryTypeChange(geometryType) {
         this.currGeometryType = geometryType;
         this.activeDrawControl.setGeometryType(geometryType);
+        this.freehandMode ?
+            this.onToggleFreehandMode({ checked: true }) :
+            this.onToggleFreehandMode({ checked: false });
         this.toggleDrawControl();
     }
     // Updates the properties of olFeature inputted
     /**
      * Update the label of a geometry when a label is entered in a dialog box
-     * @param olGeometry the geometry
+     * @param OlFeature the feature
      * @param label the label
      */
-    updateLabelOfOlGeometry(olGeometry, label) {
-        olGeometry.setProperties({
+    updateLabelOfOlGeometry(OlFeature, label) {
+        OlFeature.setProperties({
             _label: label
         }, true);
     }
@@ -18049,13 +18780,23 @@ class DrawComponent {
             offsetY_: offsetY
         }, true);
     }
+    updateLabelType(olFeature, typeOfLabel) {
+        olFeature.setProperties({
+            labelType_: typeOfLabel
+        }, true);
+    }
+    updateMeasureUnit(olFeature, measureUnit) {
+        olFeature.setProperties({
+            measureUnit_: measureUnit
+        }, true);
+    }
     // Updates values of the selected element on the HTML view
     getFeatureFontSize() {
         return this.selectedFeatures$.value.length > 0
             ? this.selectedFeatures$.value[0].properties.fontStyle
                 .split(' ')[0]
                 .replace('px', '')
-            : '20';
+            : '15';
     }
     getFeatureFontStyle() {
         return this.selectedFeatures$.value.length > 0
@@ -18159,6 +18900,66 @@ class DrawComponent {
         }
         this.activeDrawControl.setOlMap(this.map.ol, true);
     }
+    /**
+     * get the geometry of design
+     *
+     */
+    isPoint() {
+        return this.activeDrawControl.getGeometryType() === this.geometryType.Point;
+    }
+    isLineString() {
+        return this.activeDrawControl.getGeometryType() === this.geometryType.LineString;
+    }
+    isPolygon() {
+        return this.activeDrawControl.getGeometryType() === this.geometryType.Polygon;
+    }
+    isCircle() {
+        return this.activeDrawControl.getGeometryType() === this.geometryType.Circle;
+    }
+    /**
+     * The fonction to predefine the radius of the user
+     *
+     */
+    changeRadius(radius) {
+        let radiusMeters;
+        if (radius) {
+            this.measureUnit === MeasureLengthUnit.Meters ? radiusMeters = radius :
+                radiusMeters = radius * 1000;
+        }
+        else {
+            radiusMeters = undefined;
+        }
+        const pointStyle = (feature, resolution) => {
+            const geom = feature.getGeometry();
+            const coordinates = olproj.transform(geom.getCoordinates(), this.map.projection, 'EPSG:4326');
+            const radius = radiusMeters / (Math.cos((Math.PI / 180) * coordinates[1])) / resolution;
+            this.activeDrawControl.predefinedRadius$.next(radiusMeters);
+            return new olstyle.Style({
+                image: new olstyle.Circle({
+                    radius: radius,
+                    stroke: new olstyle.Stroke({
+                        width: 1,
+                        color: 'rgba(143,7,7,1)'
+                    }),
+                    fill: new olstyle.Fill({
+                        color: 'rgba(255,255,255,0.4)'
+                    })
+                })
+            });
+        };
+        this.activeDrawControl.setOlInteractionStyle(pointStyle);
+        this.toggleDrawControl();
+    }
+    onMeasureUnitChange(selectedMeasureUnit) {
+        if (selectedMeasureUnit === this.measureUnit) {
+            return;
+        }
+        else {
+            this.measureUnit = selectedMeasureUnit;
+            this.measureUnit === MeasureLengthUnit.Meters ? this.radiusFormControl.setValue(this.radiusFormControl.value * 1000) :
+                this.radiusFormControl.setValue(this.radiusFormControl.value / 1000);
+        }
+    }
     /**
      * Recreates the style of the feature stored
      */
@@ -18174,6 +18975,10 @@ class DrawComponent {
             });
         }
     }
+    getRadius(olGeometry) {
+        const length = getLength(olGeometry);
+        return Number(length / (2 * Math.PI));
+    }
 }
 DrawComponent.ɵfac = function DrawComponent_Factory(t) { return new (t || DrawComponent)(i0.ɵɵdirectiveInject(i2$1.LanguageService), i0.ɵɵdirectiveInject(i2$2.UntypedFormBuilder), i0.ɵɵdirectiveInject(DrawStyleService), i0.ɵɵdirectiveInject(i1.MatDialog), i0.ɵɵdirectiveInject(DrawIconService)); };
 DrawComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DrawComponent, selectors: [["igo-draw"]], viewQuery: function DrawComponent_Query(rf, ctx) { if (rf & 1) {
@@ -18181,8 +18986,8 @@ DrawComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DrawComponent
     } if (rf & 2) {
         let _t;
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.select = _t.first);
-    } }, 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" }, decls: 47, vars: 45, consts: [[1, "geometry-type-toggle", "mat-typography"], [3, "value", "change"], [3, "value"], [1, "draw-options", "mat-typography"], [3, "disabled", "checked", "labelPosition", "change"], [3, "checked", "labelPosition", "change"], ["appearance", "outline", 1, "layer-select"], [3, "value", "selectionChange"], ["selectedLayer", ""], [3, "value", 4, "ngFor", "ngForOf"], ["id", "createNewLayer"], ["mat-icon-button", "", "collapsibleButton", "", "tooltip-position", "below", "matTooltipShowDelay", "500", 3, "color", "matTooltip", "click", 4, "ngIf"], ["class", "deleteBtn", "mat-icon-button", "", "color", "warn", "tooltip-position", "below", "matTooltipShowDelay", "500", 3, "matTooltip", "disabled", "click", 4, "ngIf"], [1, "table-compact", 3, "store", "template", "dblclick"], ["table", ""], [1, "icon-options"], [4, "ngIf"], ["mat-icon-button", "", "color", "accent", "disableRipple", "true", 3, "click"], ["svgIcon", "keyboard-outline", "tooltip-position", "below", "matTooltipShowDelay", "500", 1, "shortcuts-icon", 3, "matTooltip"], ["mat-raised-button", "", "color", "primary", 3, "matTooltip", "click", 4, "ngIf"], ["mat-icon-button", "", "collapsibleButton", "", "tooltip-position", "below", "matTooltipShowDelay", "500", 3, "color", "matTooltip", "click"], [3, "svgIcon"], ["mat-icon-button", "", "color", "warn", "tooltip-position", "below", "matTooltipShowDelay", "500", 1, "deleteBtn", 3, "matTooltip", "disabled", "click"], ["svgIcon", "delete"], ["class", "box", 4, "ngIf"], ["value", "", 3, "click"], [3, "value", "click", 4, "ngFor", "ngForOf"], [1, "box"], [3, "src"], [3, "value", "click"], ["mat-raised-button", "", "color", "primary", 3, "matTooltip", "click"], ["svgIcon", "palette", "matBadgeColor", "warn", "matBadgeSize", "medium", 1, "style-icon", 3, "matBadge"]], template: function DrawComponent_Template(rf, ctx) { if (rf & 1) {
-        const _r21 = i0.ɵɵgetCurrentView();
+    } }, 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" }, decls: 49, vars: 47, consts: [[1, "geometry-type-toggle", "mat-typography"], [3, "value", "change"], [3, "value"], [1, "draw-options", "mat-typography"], [3, "disabled", "checked", "labelPosition", "change"], [3, "checked", "labelPosition", "change"], [3, "checked", "labelPosition", "change", 4, "ngIf"], ["class", "radius-unit", 4, "ngIf"], ["appearance", "outline", 1, "layer-select"], [3, "value", "selectionChange"], ["selectedLayer", ""], [3, "value", 4, "ngFor", "ngForOf"], ["id", "createNewLayer"], ["mat-icon-button", "", "collapsibleButton", "", "tooltip-position", "below", "matTooltipShowDelay", "500", 3, "color", "matTooltip", "click", 4, "ngIf"], ["class", "deleteBtn", "mat-icon-button", "", "color", "warn", "tooltip-position", "below", "matTooltipShowDelay", "500", 3, "matTooltip", "disabled", "click", 4, "ngIf"], [1, "table-compact", 3, "store", "template"], ["table", ""], [1, "icon-options"], [4, "ngIf"], ["mat-icon-button", "", "color", "accent", "disableRipple", "true", 3, "click"], ["svgIcon", "keyboard-outline", "tooltip-position", "below", "matTooltipShowDelay", "500", 1, "shortcuts-icon", 3, "matTooltip"], ["mat-raised-button", "", "color", "primary", 3, "matTooltip", "click", 4, "ngIf"], [1, "radius-unit"], [1, "radius-form"], [1, "radius"], ["matInput", "", "type", "number", "min", "0", 3, "placeholder", "formControl", "readonly"], [1, "unit-field"], ["mat-icon-button", "", "collapsibleButton", "", "tooltip-position", "below", "matTooltipShowDelay", "500", 3, "color", "matTooltip", "click"], [3, "svgIcon"], ["mat-icon-button", "", "color", "warn", "tooltip-position", "below", "matTooltipShowDelay", "500", 1, "deleteBtn", 3, "matTooltip", "disabled", "click"], ["svgIcon", "delete"], ["class", "box", 4, "ngIf"], ["value", "", 3, "click"], [3, "value", "click", 4, "ngFor", "ngForOf"], [1, "box"], [3, "src"], [3, "value", "click"], ["mat-raised-button", "", "color", "primary", 3, "matTooltip", "click"], ["svgIcon", "palette", "matBadgeColor", "warn", "matBadgeSize", "medium", 1, "style-icon", 3, "matBadge"]], template: function DrawComponent_Template(rf, ctx) { if (rf & 1) {
+        const _r29 = i0.ɵɵgetCurrentView();
         i0.ɵɵelementStart(0, "div")(1, "div", 0)(2, "mat-button-toggle-group", 1);
         i0.ɵɵlistener("change", function DrawComponent_Template_mat_button_toggle_group_change_2_listener($event) { return ctx.onGeometryTypeChange($event.value); });
         i0.ɵɵelementStart(3, "mat-button-toggle", 2);
@@ -18210,36 +19015,39 @@ DrawComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DrawComponent
         i0.ɵɵlistener("change", function DrawComponent_Template_mat_slide_toggle_change_19_listener() { return ctx.onToggleLabels(); });
         i0.ɵɵtext(20);
         i0.ɵɵpipe(21, "translate");
-        i0.ɵɵelementEnd()();
-        i0.ɵɵelement(22, "mat-divider");
-        i0.ɵɵelementStart(23, "div")(24, "mat-form-field", 6)(25, "mat-label");
-        i0.ɵɵtext(26);
-        i0.ɵɵpipe(27, "translate");
         i0.ɵɵelementEnd();
-        i0.ɵɵelementStart(28, "mat-select", 7, 8);
-        i0.ɵɵlistener("selectionChange", function DrawComponent_Template_mat_select_selectionChange_28_listener() { i0.ɵɵrestoreView(_r21); const _r0 = i0.ɵɵreference(29); return i0.ɵɵresetView(ctx.onLayerChange(_r0.value)); });
-        i0.ɵɵtemplate(30, DrawComponent_mat_option_30_Template, 2, 2, "mat-option", 9);
-        i0.ɵɵelementStart(31, "mat-option", 10);
-        i0.ɵɵtext(32);
-        i0.ɵɵpipe(33, "translate");
-        i0.ɵɵelementEnd()()();
-        i0.ɵɵtemplate(34, DrawComponent_button_34_Template, 4, 7, "button", 11);
+        i0.ɵɵtemplate(22, DrawComponent_mat_slide_toggle_22_Template, 3, 5, "mat-slide-toggle", 6);
+        i0.ɵɵtemplate(23, DrawComponent_div_23_Template, 8, 7, "div", 7);
         i0.ɵɵelementEnd();
-        i0.ɵɵelement(35, "mat-divider");
-        i0.ɵɵelementStart(36, "div");
-        i0.ɵɵtemplate(37, DrawComponent_button_37_Template, 4, 6, "button", 12);
-        i0.ɵɵelementStart(38, "div")(39, "igo-entity-table", 13, 14);
-        i0.ɵɵlistener("dblclick", function DrawComponent_Template_igo_entity_table_dblclick_39_listener() { return ctx.editLabelDrawing(); });
+        i0.ɵɵelement(24, "mat-divider");
+        i0.ɵɵelementStart(25, "div")(26, "mat-form-field", 8)(27, "mat-label");
+        i0.ɵɵtext(28);
+        i0.ɵɵpipe(29, "translate");
+        i0.ɵɵelementEnd();
+        i0.ɵɵelementStart(30, "mat-select", 9, 10);
+        i0.ɵɵlistener("selectionChange", function DrawComponent_Template_mat_select_selectionChange_30_listener() { i0.ɵɵrestoreView(_r29); const _r2 = i0.ɵɵreference(31); return i0.ɵɵresetView(ctx.onLayerChange(_r2.value)); });
+        i0.ɵɵtemplate(32, DrawComponent_mat_option_32_Template, 2, 2, "mat-option", 11);
+        i0.ɵɵelementStart(33, "mat-option", 12);
+        i0.ɵɵtext(34);
+        i0.ɵɵpipe(35, "translate");
         i0.ɵɵelementEnd()()();
-        i0.ɵɵelementStart(41, "div", 15);
-        i0.ɵɵtemplate(42, DrawComponent_mat_form_field_42_Template, 11, 8, "mat-form-field", 16);
+        i0.ɵɵtemplate(36, DrawComponent_button_36_Template, 4, 7, "button", 13);
         i0.ɵɵelementEnd();
-        i0.ɵɵelementStart(43, "button", 17);
-        i0.ɵɵlistener("click", function DrawComponent_Template_button_click_43_listener() { return ctx.openShorcutsDialog(); });
-        i0.ɵɵelement(44, "mat-icon", 18);
-        i0.ɵɵpipe(45, "translate");
+        i0.ɵɵelement(37, "mat-divider");
+        i0.ɵɵelementStart(38, "div");
+        i0.ɵɵtemplate(39, DrawComponent_button_39_Template, 4, 6, "button", 14);
+        i0.ɵɵelementStart(40, "div");
+        i0.ɵɵelement(41, "igo-entity-table", 15, 16);
+        i0.ɵɵelementEnd()();
+        i0.ɵɵelementStart(43, "div", 17);
+        i0.ɵɵtemplate(44, DrawComponent_mat_form_field_44_Template, 11, 8, "mat-form-field", 18);
+        i0.ɵɵelementEnd();
+        i0.ɵɵelementStart(45, "button", 19);
+        i0.ɵɵlistener("click", function DrawComponent_Template_button_click_45_listener() { return ctx.openShorcutsDialog(); });
+        i0.ɵɵelement(46, "mat-icon", 20);
+        i0.ɵɵpipe(47, "translate");
         i0.ɵɵelementEnd();
-        i0.ɵɵtemplate(46, DrawComponent_button_46_Template, 5, 7, "button", 19);
+        i0.ɵɵtemplate(48, DrawComponent_button_48_Template, 5, 7, "button", 21);
         i0.ɵɵelementEnd();
     } if (rf & 2) {
         i0.ɵɵadvance(2);
@@ -18247,35 +19055,39 @@ DrawComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DrawComponent
         i0.ɵɵadvance(1);
         i0.ɵɵproperty("value", ctx.geometryType.Point);
         i0.ɵɵadvance(1);
-        i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(5, 27, "igo.geo.draw." + ctx.geometryType.Point), " ");
+        i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(5, 29, "igo.geo.draw." + ctx.geometryType.Point), " ");
         i0.ɵɵadvance(2);
         i0.ɵɵproperty("value", ctx.geometryType.LineString);
         i0.ɵɵadvance(1);
-        i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(8, 29, "igo.geo.draw." + ctx.geometryType.LineString), " ");
+        i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(8, 31, "igo.geo.draw." + ctx.geometryType.LineString), " ");
         i0.ɵɵadvance(2);
         i0.ɵɵproperty("value", ctx.geometryType.Polygon);
         i0.ɵɵadvance(1);
-        i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(11, 31, "igo.geo.draw." + ctx.geometryType.Polygon), " ");
+        i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(11, 33, "igo.geo.draw." + ctx.geometryType.Polygon), " ");
         i0.ɵɵadvance(2);
         i0.ɵɵproperty("value", ctx.geometryType.Circle);
         i0.ɵɵadvance(1);
-        i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(14, 33, "igo.geo.draw." + ctx.geometryType.Circle), " ");
+        i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(14, 35, "igo.geo.draw." + ctx.geometryType.Circle), " ");
         i0.ɵɵadvance(3);
         i0.ɵɵproperty("disabled", ctx.drawControlIsDisabled)("checked", ctx.drawControlIsActive)("labelPosition", "before");
         i0.ɵɵadvance(1);
-        i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(18, 35, "igo.geo.spatialFilter.drawControl"), " ");
+        i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(18, 37, "igo.geo.spatialFilter.drawControl"), " ");
         i0.ɵɵadvance(2);
         i0.ɵɵproperty("checked", ctx.labelsAreShown)("labelPosition", "before");
         i0.ɵɵadvance(1);
-        i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(21, 37, "igo.geo.draw.toggleMapTooltips"), " ");
-        i0.ɵɵadvance(6);
-        i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(27, 39, "igo.geo.draw.layer.title"));
+        i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(21, 39, "igo.geo.draw.toggleMapTooltips"), " ");
+        i0.ɵɵadvance(2);
+        i0.ɵɵproperty("ngIf", !ctx.isPoint());
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngIf", ctx.isCircle());
+        i0.ɵɵadvance(5);
+        i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(29, 41, "igo.geo.draw.layer.title"));
         i0.ɵɵadvance(2);
         i0.ɵɵproperty("value", ctx.updateActiveLayer());
         i0.ɵɵadvance(2);
         i0.ɵɵproperty("ngForOf", ctx.allLayers);
         i0.ɵɵadvance(2);
-        i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(33, 41, "igo.geo.draw.layer.createNewLayer"), " ");
+        i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(35, 43, "igo.geo.draw.layer.createNewLayer"), " ");
         i0.ɵɵadvance(2);
         i0.ɵɵproperty("ngIf", ctx.activeDrawingLayer);
         i0.ɵɵadvance(3);
@@ -18285,10 +19097,10 @@ DrawComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DrawComponent
         i0.ɵɵadvance(3);
         i0.ɵɵproperty("ngIf", ctx.icons.length >= 1);
         i0.ɵɵadvance(2);
-        i0.ɵɵproperty("matTooltip", i0.ɵɵpipeBind1(45, 43, "igo.geo.draw.shortcuts"));
+        i0.ɵɵproperty("matTooltip", i0.ɵɵpipeBind1(47, 45, "igo.geo.draw.shortcuts"));
         i0.ɵɵadvance(2);
         i0.ɵɵproperty("ngIf", ctx.selectedFeatures$.value.length);
-    } }, dependencies: [i1$1.NgForOf, i1$1.NgIf, i3.MatButton, i18.MatButtonToggleGroup, i18.MatButtonToggle, i11.MatDivider, i13.MatFormField, i13.MatLabel, i2.MatIcon, i7$1.MatBadge, i4.MatTooltip, i15.MatSelect, i15.MatSelectTrigger, i9.MatOption, i23.MatSlideToggle, i5$1.EntityTableComponent, i1$1.AsyncPipe, i7.TranslatePipe], styles: [".geometry-type-toggle[_ngcontent-%COMP%]{padding:10px;text-align:center}.geometry-type-toggle[_ngcontent-%COMP%]   mat-button-toggle-group[_ngcontent-%COMP%]{width:100%}.geometry-type-toggle[_ngcontent-%COMP%]   mat-button-toggle-group[_ngcontent-%COMP%]   mat-button-toggle[_ngcontent-%COMP%]{width:25%}.draw-options[_ngcontent-%COMP%]{overflow-x:hidden}.draw-options[_ngcontent-%COMP%]   mat-slide-toggle[_ngcontent-%COMP%]{width:100%;margin:10px}.draw-options[_ngcontent-%COMP%]   mat-slide-toggle[_ngcontent-%COMP%]     .mat-slide-toggle-content{width:calc(100% - 60px)}.icon-options[_ngcontent-%COMP%]{margin:5px 5px 0}.edition-drawing[_ngcontent-%COMP%]{padding:10px 0}img[_ngcontent-%COMP%]{width:100%;height:100%}.deleteBtn[_ngcontent-%COMP%]{margin-left:12px}.storeTable[_ngcontent-%COMP%]{height:auto!important}.layer-select[_ngcontent-%COMP%]{width:85%;padding:10px 10px 0%}.input-button-container[_ngcontent-%COMP%]{padding:10px}.input-button-container[_ngcontent-%COMP%]   mat-form-field[_ngcontent-%COMP%]{width:25%}.input-button-container[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]{left:8px;bottom:10px}"], data: { animation: [
+    } }, dependencies: [i2$2.ɵNgNoValidate, i2$2.DefaultValueAccessor, i2$2.NumberValueAccessor, i2$2.NgControlStatus, i2$2.NgControlStatusGroup, i2$2.MinValidator, i2$2.NgForm, i2$2.FormControlDirective, i1$1.NgForOf, i1$1.NgIf, i3.MatButton, i18.MatButtonToggleGroup, i18.MatButtonToggle, i11.MatDivider, i13.MatFormField, i13.MatLabel, i2.MatIcon, i7$1.MatBadge, i4.MatTooltip, i14.MatInput, i15.MatSelect, i15.MatSelectTrigger, i9.MatOption, i23.MatSlideToggle, i5$1.EntityTableComponent, i1$1.AsyncPipe, i7.TranslatePipe], styles: [".geometry-type-toggle[_ngcontent-%COMP%]{padding:10px;text-align:center}.geometry-type-toggle[_ngcontent-%COMP%]   mat-button-toggle-group[_ngcontent-%COMP%]{width:100%}.geometry-type-toggle[_ngcontent-%COMP%]   mat-button-toggle-group[_ngcontent-%COMP%]   mat-button-toggle[_ngcontent-%COMP%]{width:25%}.draw-options[_ngcontent-%COMP%]{overflow-x:hidden}.draw-options[_ngcontent-%COMP%]   mat-slide-toggle[_ngcontent-%COMP%]{width:100%;margin:10px}.draw-options[_ngcontent-%COMP%]   mat-slide-toggle[_ngcontent-%COMP%]     .mat-slide-toggle-content{width:calc(100% - 60px)}.icon-options[_ngcontent-%COMP%]{margin:5px 5px 0}.edition-drawing[_ngcontent-%COMP%]{padding:10px 0}img[_ngcontent-%COMP%]{width:100%;height:100%}.deleteBtn[_ngcontent-%COMP%]{margin-left:12px}.storeTable[_ngcontent-%COMP%]{height:auto!important}.layer-select[_ngcontent-%COMP%]{width:85%;padding:10px 10px 0%}.input-button-container[_ngcontent-%COMP%]{padding:10px}.input-button-container[_ngcontent-%COMP%]   mat-form-field[_ngcontent-%COMP%]{width:25%}.input-button-container[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]{left:8px;bottom:10px}.radius[_ngcontent-%COMP%]{display:flex;flex-flow:column nowrap;width:110%}.unit-field[_ngcontent-%COMP%]{width:110px;margin-left:30px}.radius-unit[_ngcontent-%COMP%]{display:flex;width:100%;margin-left:2px;padding:5px}  igo-entity-table td:last-child{text-align:right!important}  igo-entity-table td:last-child button{margin:0%!important}"], data: { animation: [
             trigger('openClose', [
                 state('open', style({
                     opacity: 1
@@ -18313,7 +19125,7 @@ DrawComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DrawComponent
                         transition('open => closed', [animate('600ms ease')]),
                         transition('closed => open', [animate('800ms ease')])
                     ])
-                ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div>\n  <div class=\"geometry-type-toggle mat-typography\">\n    <mat-button-toggle-group\n      (change)=\"onGeometryTypeChange($event.value)\" [value]=\"geometryType.Point\">\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      {{'igo.geo.spatialFilter.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  </div>\n\n  <mat-divider></mat-divider>\n\n  <div>\n    <mat-form-field appearance=\"outline\" class=\"layer-select\">\n      <mat-label>{{'igo.geo.draw.layer.title' | translate}}</mat-label>\n      <mat-select #selectedLayer (selectionChange)=\"onLayerChange(selectedLayer.value)\" [value]=\"updateActiveLayer()\">\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]=\"activeDrawingLayer.visible ?\n                    ('igo.geo.layer.hideLayer' | translate) :\n                    ('igo.geo.layer.showLayer' | translate)\"\n      (click)=\"activeDrawingLayer.visible = !activeDrawingLayer.visible\">\n      <mat-icon\n        [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      <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        (dblclick)=\"editLabelDrawing()\">\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()\">{{ 'igo.geo.draw.noIcon' | translate }}</mat-option>\n        <mat-option\n          *ngFor=\"let icon_html of icons\"\n          [value]=\"icon_html\"\n          (click)=\"onIconChange(icon_html)\">\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  <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.layer.style.styleModalTooltip' | translate\">\n    {{'igo.geo.layer.style.styleModal' | translate}}\n    <mat-icon\n      class=\"style-icon\"\n      svgIcon=\"palette\"\n      [matBadge]=\"selectedFeatures$.value.length\"\n      matBadgeColor=\"warn\"\n      matBadgeSize=\"medium\">\n    </mat-icon>\n  </button>\n</div>\n", styles: [".geometry-type-toggle{padding:10px;text-align:center}.geometry-type-toggle mat-button-toggle-group{width:100%}.geometry-type-toggle mat-button-toggle-group mat-button-toggle{width:25%}.draw-options{overflow-x:hidden}.draw-options mat-slide-toggle{width:100%;margin:10px}.draw-options mat-slide-toggle ::ng-deep .mat-slide-toggle-content{width:calc(100% - 60px)}.icon-options{margin:5px 5px 0}.edition-drawing{padding:10px 0}img{width:100%;height:100%}.deleteBtn{margin-left:12px}.storeTable{height:auto!important}.layer-select{width:85%;padding:10px 10px 0%}.input-button-container{padding:10px}.input-button-container mat-form-field{width:25%}.input-button-container button{left:8px;bottom:10px}\n"] }]
+                ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div>\r\n  <div class=\"geometry-type-toggle mat-typography\">\r\n    <mat-button-toggle-group\r\n      (change)=\"onGeometryTypeChange($event.value)\" [value]=\"geometryType.Point\">\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      {{'igo.geo.spatialFilter.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      {{ '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      {{ 'igo.geo.draw.freehandMode' | translate }}\r\n    </mat-slide-toggle>\r\n\r\n    <div class=\"radius-unit\" *ngIf=\"isCircle()\">\r\n      <form class=\"radius-form\">\r\n        <mat-form-field class=\"radius\">\r\n          <input\r\n            matInput 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        </mat-form-field>\r\n      </form>\r\n\r\n      <mat-form-field class=\"unit-field\">\r\n        <mat-select\r\n          [value]=\"measureUnit\"\r\n          (selectionChange)=\"onMeasureUnitChange($event.value)\">\r\n          <mat-option\r\n            *ngFor=\"let measureUnit of measureUnits\"\r\n            [value]=\"measureUnit\">\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>\r\n    <mat-form-field appearance=\"outline\" class=\"layer-select\">\r\n      <mat-label>{{'igo.geo.draw.layer.title' | translate}}</mat-label>\r\n      <mat-select #selectedLayer (selectionChange)=\"onLayerChange(selectedLayer.value)\" [value]=\"updateActiveLayer()\">\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]=\"activeDrawingLayer.visible ?\r\n                    ('igo.geo.layer.hideLayer' | translate) :\r\n                    ('igo.geo.layer.showLayer' | translate)\"\r\n      (click)=\"activeDrawingLayer.visible = !activeDrawingLayer.visible\">\r\n      <mat-icon\r\n        [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      </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()\">{{ 'igo.geo.draw.noIcon' | translate }}</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          <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  <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.layer.style.styleModalTooltip' | translate\">\r\n    {{'igo.geo.layer.style.styleModal' | translate}}\r\n    <mat-icon\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    </mat-icon>\r\n  </button>\r\n</div>\r\n", styles: [".geometry-type-toggle{padding:10px;text-align:center}.geometry-type-toggle mat-button-toggle-group{width:100%}.geometry-type-toggle mat-button-toggle-group mat-button-toggle{width:25%}.draw-options{overflow-x:hidden}.draw-options mat-slide-toggle{width:100%;margin:10px}.draw-options mat-slide-toggle ::ng-deep .mat-slide-toggle-content{width:calc(100% - 60px)}.icon-options{margin:5px 5px 0}.edition-drawing{padding:10px 0}img{width:100%;height:100%}.deleteBtn{margin-left:12px}.storeTable{height:auto!important}.layer-select{width:85%;padding:10px 10px 0%}.input-button-container{padding:10px}.input-button-container mat-form-field{width:25%}.input-button-container button{left:8px;bottom:10px}.radius{display:flex;flex-flow:column nowrap;width:110%}.unit-field{width:110px;margin-left:30px}.radius-unit{display:flex;width:100%;margin-left:2px;padding:5px}::ng-deep igo-entity-table td:last-child{text-align:right!important}::ng-deep igo-entity-table td:last-child button{margin:0%!important}\n"] }]
     }], function () { return [{ type: i2$1.LanguageService }, { type: i2$2.UntypedFormBuilder }, { type: DrawStyleService }, { type: i1.MatDialog }, { type: DrawIconService }]; }, { map: [{
             type: Input
         }], stores: [{
@@ -18603,10 +19415,10 @@ StyleModalComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: StyleMo
         i0.ɵɵproperty("value", ctx.getFeatureOffsetY());
         i0.ɵɵadvance(4);
         i0.ɵɵtextInterpolate1("", i0.ɵɵpipeBind1(51, 44, "igo.geo.draw.cancel"), " ");
-    } }, dependencies: [i13.MatFormField, i13.MatLabel, i13.MatSuffix, i14.MatInput, i2$2.ɵNgNoValidate, i2$2.DefaultValueAccessor, i2$2.NgControlStatus, i2$2.NgControlStatusGroup, i2$2.FormGroupDirective, i2$2.FormControlName, i1$1.NgForOf, i1$1.NgIf, i2.MatIcon, i3.MatButton, i15.MatSelect, i9.MatOption, i4.MatTooltip, i12.ColorPickerDirective, i7.TranslatePipe], styles: ["h2[_ngcontent-%COMP%]{font-weight:700;font-size:large}.igo-form[_ngcontent-%COMP%]{padding:10px}.fill-field[_ngcontent-%COMP%], .stroke-field[_ngcontent-%COMP%]{width:130px}.fill-color-picker[_ngcontent-%COMP%]   mat-icon[_ngcontent-%COMP%]{position:relative;top:7px}.fill-color-picker[_ngcontent-%COMP%]   mat-form-field[_ngcontent-%COMP%]{left:8px}.stroke-color-picker[_ngcontent-%COMP%]   mat-icon[_ngcontent-%COMP%]{position:relative;top:7px}.stroke-color-picker[_ngcontent-%COMP%]   mat-form-field[_ngcontent-%COMP%]{left:35px}.box[_ngcontent-%COMP%]{width:25px;height:25px}.edition-drawing[_ngcontent-%COMP%]{padding:10px 0}.igo-input-container[_ngcontent-%COMP%]   .mat-form-field[_ngcontent-%COMP%] + .mat-form-field[_ngcontent-%COMP%]{margin-left:8px}.igo-form-input-box[_ngcontent-%COMP%]{width:150px}button[_ngcontent-%COMP%]{margin-right:5px}"] });
+    } }, dependencies: [i13.MatFormField, i13.MatLabel, i13.MatSuffix, i14.MatInput, i2$2.ɵNgNoValidate, i2$2.DefaultValueAccessor, i2$2.NgControlStatus, i2$2.NgControlStatusGroup, i2$2.FormGroupDirective, i2$2.FormControlName, i1$1.NgForOf, i1$1.NgIf, i2.MatIcon, i3.MatButton, i15.MatSelect, i9.MatOption, i4.MatTooltip, i12$1.ColorPickerDirective, i7.TranslatePipe], styles: ["h2[_ngcontent-%COMP%]{font-weight:700;font-size:large}.igo-form[_ngcontent-%COMP%]{padding:10px}.fill-field[_ngcontent-%COMP%], .stroke-field[_ngcontent-%COMP%]{width:130px}.fill-color-picker[_ngcontent-%COMP%]   mat-icon[_ngcontent-%COMP%]{position:relative;top:7px}.fill-color-picker[_ngcontent-%COMP%]   mat-form-field[_ngcontent-%COMP%]{left:8px}.stroke-color-picker[_ngcontent-%COMP%]   mat-icon[_ngcontent-%COMP%]{position:relative;top:7px}.stroke-color-picker[_ngcontent-%COMP%]   mat-form-field[_ngcontent-%COMP%]{left:35px}.box[_ngcontent-%COMP%]{width:25px;height:25px}.edition-drawing[_ngcontent-%COMP%]{padding:10px 0}.igo-input-container[_ngcontent-%COMP%]   .mat-form-field[_ngcontent-%COMP%] + .mat-form-field[_ngcontent-%COMP%]{margin-left:8px}.igo-form-input-box[_ngcontent-%COMP%]{width:150px}button[_ngcontent-%COMP%]{margin-right:5px}"] });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(StyleModalComponent, [{
         type: Component,
-        args: [{ selector: 'igo-style-modal-component', template: "<div mat-dialog-content>\n  <h2 mat-dialog-title class=\"mat-typography\">{{ 'igo.geo.layer.style.styleModal' | translate }}</h2>\n  <div\n  class=\"edition-drawing mat-typography\"\n  [hidden]=\"data.features.length === 0\">\n    <form\n      class=\"igo-form\"\n      [formGroup]=\"form\">\n      <div class=\"fill-color-picker mat-typography\" *ngIf=\"linestringOnly !== true\">\n        <span>\n          <mat-icon class=\"stroke-palette-icon\" svgIcon=\"square\"></mat-icon>\n          {{ 'igo.geo.draw.fill' | translate }}\n        </span>\n\n        <mat-form-field\n          class=\"fill-field\"\n          appearance=\"outline\"\n          floatLabel=\"always\"\n          tooltip-position=\"below\"\n          matTooltipShowDelay=\"500\"\n          [matTooltip]=\"'igo.geo.draw.colorPicker' | translate\">\n          <mat-label>{{ getFeatureFillColor() }}</mat-label>\n          <input\n            #fillColorInput\n            formControlName=\"fill\"\n            matInput\n            type=\"text\"\n            [style.background]=\"getFeatureFillColor()\"\n            [readonly]=\"true\"\n            [colorPicker]=\"getFeatureFillColor()\"\n            [cpWidth]=\"'200px'\"\n            [cpOutputFormat]=\"'rgba'\"\n            [cpPosition]=\"'bottom'\"\n            [cpPositionOffset]=\"'-75%'\"\n            [cpCancelButton]=\"true\"\n            [cpCancelButtonText]=\"'igo.geo.draw.cancel' | translate\"\n            [cpOKButton]=\"true\"\n            (colorPickerChange)=\"styleModalData.fillColor = $event\">\n        </mat-form-field>\n      </div>\n\n      <div class=\"stroke-color-picker mat-typography\">\n        <span>\n          <mat-icon\n            class=\"stroke-palette-icon\"\n            svgIcon=\"square-outline\">\n          </mat-icon>\n          {{'igo.geo.draw.stroke' | translate}}\n        </span>\n\n        <mat-form-field\n          class=\"stroke-field\"\n          appearance=\"outline\"\n          floatLabel=\"always\"\n          tooltip-position=\"below\"\n          matTooltipShowDelay=\"500\"\n          [matTooltip]=\"'igo.geo.draw.colorPicker' | translate\">\n          <mat-label>{{ getFeatureStrokeColor() }}</mat-label>\n          <input\n            #strokeColorInput\n            formControlName=\"stroke\"\n            matInput\n            type=\"text\"\n            [style.background]=\"getFeatureStrokeColor()\"\n            [readonly]=\"true\"\n            [colorPicker]=\"getFeatureStrokeColor()\"\n            [cpWidth]=\"'200px'\"\n            [cpPosition]=\"'bottom'\"\n            [cpPositionOffset]=\"'-75%'\"\n            [cpOutputFormat]=\"'rgba'\"\n            [cpCancelButton]=\"true\"\n            [cpCancelButtonText]=\"'igo.geo.draw.cancel' | translate\"\n            [cpOKButton]=\"true\"\n            (colorPickerChange)=\"styleModalData.strokeColor = $event\">\n        </mat-form-field>\n      </div>\n\n      <div class=\"igo-input-container\">\n        <mat-form-field appearance=\"outline\" class=\"igo-form-input-box\">\n          <mat-label>{{ 'igo.geo.draw.fontSize' | translate }}</mat-label>\n          <input\n            matInput\n            #testFontSize\n            type=\"number\"\n            placeholder=\"10\"\n            min=\"10\"\n            onkeydown=\"return event.keyCode !== 69\"\n            [value]=\"getFeatureFontSize()\"\n            (input)=\"styleModalData.fontSize = $event.target.value\">\n          <span matSuffix>px</span>\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\" class=\"igo-form-input-box\">\n          <mat-label>{{ 'igo.geo.draw.fontStyle' | translate }}</mat-label>\n          <mat-select\n            #testFontStyle\n            [value]=\"getFeatureFontStyle()\"\n            (selectionChange)=\"styleModalData.fontStyle = $event.value\">\n            <mat-option\n              *ngFor=\"let fontSelect of allFontStyles\"\n              [value]=\"fontSelect\">\n              {{ fontSelect }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n\n      <div class=\"igo-input-container\">\n        <mat-form-field appearance=\"outline\" class=\"igo-form-input-box\">\n          <mat-label>{{ 'igo.geo.draw.offsetX' | translate }}</mat-label>\n          <input\n            matInput\n            #offsetXInput\n            type=\"number\"\n            onkeydown=\"return event.keyCode !== 69\"\n            [value]=\"getFeatureOffsetX()\"\n            (input)=\"styleModalData.offsetX = $event.target.value\">\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\" class=\"igo-form-input-box\">\n          <mat-label>{{ 'igo.geo.draw.offsetY' | translate }}</mat-label>\n          <input\n            matInput\n            #offsetYInput\n            type=\"number\"\n            onkeydown=\"return event.keyCode !== 69\"\n            [value]=\"getFeatureOffsetY()\"\n            (input)=\"styleModalData.offsetY= $event.target.value\">\n        </mat-form-field>\n      </div>\n    </form>\n  </div>\n</div>\n<div mat-dialog-actions>\n  <button \n    mat-raised-button \n    (click)=\"cancelDrawing()\">{{'igo.geo.draw.cancel' | translate}}\n  </button>\n  <button \n    mat-raised-button \n    color=\"primary\" \n    (click)=\"confirm()\">OK\n  </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-form-field+.mat-form-field{margin-left:8px}.igo-form-input-box{width:150px}button{margin-right:5px}\n"] }]
+        args: [{ selector: 'igo-style-modal-component', template: "<div mat-dialog-content>\r\n  <h2 mat-dialog-title class=\"mat-typography\">{{ 'igo.geo.layer.style.styleModal' | translate }}</h2>\r\n  <div\r\n  class=\"edition-drawing mat-typography\"\r\n  [hidden]=\"data.features.length === 0\">\r\n    <form\r\n      class=\"igo-form\"\r\n      [formGroup]=\"form\">\r\n      <div class=\"fill-color-picker mat-typography\" *ngIf=\"linestringOnly !== true\">\r\n        <span>\r\n          <mat-icon class=\"stroke-palette-icon\" svgIcon=\"square\"></mat-icon>\r\n          {{ 'igo.geo.draw.fill' | translate }}\r\n        </span>\r\n\r\n        <mat-form-field\r\n          class=\"fill-field\"\r\n          appearance=\"outline\"\r\n          floatLabel=\"always\"\r\n          tooltip-position=\"below\"\r\n          matTooltipShowDelay=\"500\"\r\n          [matTooltip]=\"'igo.geo.draw.colorPicker' | translate\">\r\n          <mat-label>{{ getFeatureFillColor() }}</mat-label>\r\n          <input\r\n            #fillColorInput\r\n            formControlName=\"fill\"\r\n            matInput\r\n            type=\"text\"\r\n            [style.background]=\"getFeatureFillColor()\"\r\n            [readonly]=\"true\"\r\n            [colorPicker]=\"getFeatureFillColor()\"\r\n            [cpWidth]=\"'200px'\"\r\n            [cpOutputFormat]=\"'rgba'\"\r\n            [cpPosition]=\"'bottom'\"\r\n            [cpPositionOffset]=\"'-75%'\"\r\n            [cpCancelButton]=\"true\"\r\n            [cpCancelButtonText]=\"'igo.geo.draw.cancel' | translate\"\r\n            [cpOKButton]=\"true\"\r\n            (colorPickerChange)=\"styleModalData.fillColor = $event\">\r\n        </mat-form-field>\r\n      </div>\r\n\r\n      <div class=\"stroke-color-picker mat-typography\">\r\n        <span>\r\n          <mat-icon\r\n            class=\"stroke-palette-icon\"\r\n            svgIcon=\"square-outline\">\r\n          </mat-icon>\r\n          {{'igo.geo.draw.stroke' | translate}}\r\n        </span>\r\n\r\n        <mat-form-field\r\n          class=\"stroke-field\"\r\n          appearance=\"outline\"\r\n          floatLabel=\"always\"\r\n          tooltip-position=\"below\"\r\n          matTooltipShowDelay=\"500\"\r\n          [matTooltip]=\"'igo.geo.draw.colorPicker' | translate\">\r\n          <mat-label>{{ getFeatureStrokeColor() }}</mat-label>\r\n          <input\r\n            #strokeColorInput\r\n            formControlName=\"stroke\"\r\n            matInput\r\n            type=\"text\"\r\n            [style.background]=\"getFeatureStrokeColor()\"\r\n            [readonly]=\"true\"\r\n            [colorPicker]=\"getFeatureStrokeColor()\"\r\n            [cpWidth]=\"'200px'\"\r\n            [cpPosition]=\"'bottom'\"\r\n            [cpPositionOffset]=\"'-75%'\"\r\n            [cpOutputFormat]=\"'rgba'\"\r\n            [cpCancelButton]=\"true\"\r\n            [cpCancelButtonText]=\"'igo.geo.draw.cancel' | translate\"\r\n            [cpOKButton]=\"true\"\r\n            (colorPickerChange)=\"styleModalData.strokeColor = $event\">\r\n        </mat-form-field>\r\n      </div>\r\n\r\n      <div class=\"igo-input-container\">\r\n        <mat-form-field appearance=\"outline\" class=\"igo-form-input-box\">\r\n          <mat-label>{{ 'igo.geo.draw.fontSize' | translate }}</mat-label>\r\n          <input\r\n            matInput\r\n            #testFontSize\r\n            type=\"number\"\r\n            placeholder=\"10\"\r\n            min=\"10\"\r\n            onkeydown=\"return event.keyCode !== 69\"\r\n            [value]=\"getFeatureFontSize()\"\r\n            (input)=\"styleModalData.fontSize = $event.target.value\">\r\n          <span matSuffix>px</span>\r\n        </mat-form-field>\r\n        <mat-form-field appearance=\"outline\" class=\"igo-form-input-box\">\r\n          <mat-label>{{ 'igo.geo.draw.fontStyle' | translate }}</mat-label>\r\n          <mat-select\r\n            #testFontStyle\r\n            [value]=\"getFeatureFontStyle()\"\r\n            (selectionChange)=\"styleModalData.fontStyle = $event.value\">\r\n            <mat-option\r\n              *ngFor=\"let fontSelect of allFontStyles\"\r\n              [value]=\"fontSelect\">\r\n              {{ fontSelect }}\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 appearance=\"outline\" class=\"igo-form-input-box\">\r\n          <mat-label>{{ 'igo.geo.draw.offsetX' | translate }}</mat-label>\r\n          <input\r\n            matInput\r\n            #offsetXInput\r\n            type=\"number\"\r\n            onkeydown=\"return event.keyCode !== 69\"\r\n            [value]=\"getFeatureOffsetX()\"\r\n            (input)=\"styleModalData.offsetX = $event.target.value\">\r\n        </mat-form-field>\r\n        <mat-form-field appearance=\"outline\" class=\"igo-form-input-box\">\r\n          <mat-label>{{ 'igo.geo.draw.offsetY' | translate }}</mat-label>\r\n          <input\r\n            matInput\r\n            #offsetYInput\r\n            type=\"number\"\r\n            onkeydown=\"return event.keyCode !== 69\"\r\n            [value]=\"getFeatureOffsetY()\"\r\n            (input)=\"styleModalData.offsetY= $event.target.value\">\r\n        </mat-form-field>\r\n      </div>\r\n    </form>\r\n  </div>\r\n</div>\r\n<div mat-dialog-actions>\r\n  <button \r\n    mat-raised-button \r\n    (click)=\"cancelDrawing()\">{{'igo.geo.draw.cancel' | translate}}\r\n  </button>\r\n  <button \r\n    mat-raised-button \r\n    color=\"primary\" \r\n    (click)=\"confirm()\">OK\r\n  </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-form-field+.mat-form-field{margin-left:8px}.igo-form-input-box{width:150px}button{margin-right:5px}\n"] }]
     }], function () { return [{ type: i1.MatDialogRef }, { type: i2$2.UntypedFormBuilder }, { type: DrawStyleService }, { type: undefined, decorators: [{
                 type: Inject,
                 args: [MAT_DIALOG_DATA]
@@ -18745,9 +19557,9 @@ IgoLayerModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [MatInputM
         LayerLegendListBindingDirective,
         TrackFeatureButtonComponent,
         StyleModalComponent] }); })();
-i0.ɵɵsetComponentScope(LayerItemComponent, [i1$1.NgClass, i1$1.NgIf, i2.MatIcon, i3.MatButton, i4.MatTooltip, i5.MatListItem, i9.MatLine, i5.MatListIconCssMatStyler, i7$1.MatBadge, i12$1.MatCheckbox, LayerLegendComponent], [i1$1.AsyncPipe, i7.TranslatePipe]);
+i0.ɵɵsetComponentScope(LayerItemComponent, [i1$1.NgClass, i1$1.NgIf, i2.MatIcon, i3.MatButton, i4.MatTooltip, i5.MatListItem, i9.MatLine, i5.MatListIconCssMatStyler, i7$1.MatBadge, i12.MatCheckbox, LayerLegendComponent], [i1$1.AsyncPipe, i7.TranslatePipe]);
 i0.ɵɵsetComponentScope(LayerLegendItemComponent, [i4.MatTooltip, i5.MatListItem, i9.MatLine, LayerLegendComponent], []);
-i0.ɵɵsetComponentScope(LayerListComponent, [i2$2.NgControlStatus, i1$1.NgClass, i1$1.NgForOf, i1$1.NgIf, i1$1.NgTemplateOutlet, i2$2.NgModel, i11.MatDivider, i7$2.MatMenu, i7$2.MatMenuTrigger, i2.MatIcon, i3.MatButton, i4.MatTooltip, i5.MatList, i5.MatListItem, i13$1.MatSlider, i7$1.MatBadge, i12$1.MatCheckbox, i5$1.ListItemDirective, i5$1.ListComponent, i5$1.PanelComponent, LayerItemComponent,
+i0.ɵɵsetComponentScope(LayerListComponent, [i2$2.NgControlStatus, i1$1.NgClass, i1$1.NgForOf, i1$1.NgIf, i1$1.NgTemplateOutlet, i2$2.NgModel, i11.MatDivider, i7$2.MatMenu, i7$2.MatMenuTrigger, i2.MatIcon, i3.MatButton, i4.MatTooltip, i5.MatList, i5.MatListItem, i13$1.MatSlider, i7$1.MatBadge, i12.MatCheckbox, i5$1.ListItemDirective, i5$1.ListComponent, i5$1.PanelComponent, LayerItemComponent,
     LayerListToolComponent], [i1$1.AsyncPipe, i7.TranslatePipe]);
 i0.ɵɵsetComponentScope(LayerLegendListComponent, [i1$1.NgForOf, i1$1.NgIf, i11.MatDivider, i23.MatSlideToggle, i4.MatTooltip, i5$1.ListItemDirective, i5$1.ListComponent, LayerLegendItemComponent], [i1$1.AsyncPipe, i7.TranslatePipe]);
 
@@ -18997,7 +19809,7 @@ AddCatalogDialogComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: A
     } }, dependencies: [i1$1.NgForOf, i1$1.NgIf, i9.MatLine, i4.MatTooltip, i3.MatButton, i13.MatFormField, i2$2.ɵNgNoValidate, i2$2.DefaultValueAccessor, i2$2.NgControlStatus, i2$2.NgControlStatusGroup, i2$2.FormGroupDirective, i2$2.FormControlName, i14.MatInput, i15.MatSelect, i9.MatOption, i11$1.MatAutocomplete, i11$1.MatAutocompleteTrigger, i1.MatDialogTitle, i1.MatDialogContent, i1.MatDialogActions, i1$1.AsyncPipe, i7.TranslatePipe], styles: ["mat-form-field[_ngcontent-%COMP%]{width:100%}.add-catalog-button-top-padding[_ngcontent-%COMP%]{padding-top:25px}.igo-form[_ngcontent-%COMP%]{padding:10px 5px 5px}.igo-form-button-group[_ngcontent-%COMP%]{text-align:center}button[_ngcontent-%COMP%]{cursor:pointer}button#addCatalogBtnDialog[disabled=true][_ngcontent-%COMP%]{cursor:default;background-color:#0000001f;color:#00000042}.error[_ngcontent-%COMP%]{color:red}"] });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AddCatalogDialogComponent, [{
         type: Component,
-        args: [{ selector: 'igo-add-catalog-dialog', template: "<h1 mat-dialog-title class=\"mat-typography\">{{'igo.geo.catalog.library.addTitle' | translate}}</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 type=\"text\" formControlName=\"title\" placeholder=\"{{'igo.geo.printForm.title' | translate}}\" matInput [matAutocomplete]=\"auto2\">\n        <mat-autocomplete #auto2=\"matAutocomplete\" (optionSelected)='changeUrlOrTitle($event.option.value)'>\n          <mat-option *ngFor=\"let predefinedCatalog of (predefinedCatalogsList$ | async)\" matTooltipShowDelay=\"500\"\n            [matTooltip]=\"predefinedCatalog.title\" [value]=\"predefinedCatalog\">\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 type=\"text\" formControlName=\"url\" placeholder=\"URL\" matInput [matAutocomplete]=\"auto\">\n        <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)='changeUrlOrTitle($event.option.value)'>\n          <mat-option *ngFor=\"let predefinedCatalog of (predefinedCatalogsList$ | async)\" matTooltipShowDelay=\"500\"\n            [matTooltip]=\"predefinedCatalog.url\" [value]=\"predefinedCatalog\">\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\n          formControlName=\"type\"\n          placeholder=\"Type\">\n          <mat-option\n            *ngFor=\"let type of typeCapabilities\"\n            [value]=\"type\"\n            (click)=\"$event.stopPropagation()\">\n              <p mat-line>{{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\">{{languageService.translate.instant('igo.geo.catalog.externalProvider.unavailableWithEmail', { value: addedCatalog.url, email: emailAddress })}}</p>\n  </span>\n  <span *ngIf=\"error && addedCatalog && !emailAddress\">\n    <p class=\"error\">{{languageService.translate.instant('igo.geo.catalog.unavailable', { value: addedCatalog.url })}}</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\n      mat-raised-button\n      type=\"button\"\n      (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      {{'igo.geo.catalog.library.add' | translate}}\n    </button>\n  </div>\n</div>", styles: ["mat-form-field{width:100%}.add-catalog-button-top-padding{padding-top:25px}.igo-form{padding:10px 5px 5px}.igo-form-button-group{text-align:center}button{cursor:pointer}button#addCatalogBtnDialog[disabled=true]{cursor:default;background-color:#0000001f;color:#00000042}.error{color:red}\n"] }]
+        args: [{ selector: 'igo-add-catalog-dialog', template: "<h1 mat-dialog-title class=\"mat-typography\">{{'igo.geo.catalog.library.addTitle' | translate}}</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 type=\"text\" formControlName=\"title\" placeholder=\"{{'igo.geo.printForm.title' | translate}}\" matInput [matAutocomplete]=\"auto2\">\r\n        <mat-autocomplete #auto2=\"matAutocomplete\" (optionSelected)='changeUrlOrTitle($event.option.value)'>\r\n          <mat-option *ngFor=\"let predefinedCatalog of (predefinedCatalogsList$ | async)\" matTooltipShowDelay=\"500\"\r\n            [matTooltip]=\"predefinedCatalog.title\" [value]=\"predefinedCatalog\">\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 type=\"text\" formControlName=\"url\" placeholder=\"URL\" matInput [matAutocomplete]=\"auto\">\r\n        <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)='changeUrlOrTitle($event.option.value)'>\r\n          <mat-option *ngFor=\"let predefinedCatalog of (predefinedCatalogsList$ | async)\" matTooltipShowDelay=\"500\"\r\n            [matTooltip]=\"predefinedCatalog.url\" [value]=\"predefinedCatalog\">\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\r\n          formControlName=\"type\"\r\n          placeholder=\"Type\">\r\n          <mat-option\r\n            *ngFor=\"let type of typeCapabilities\"\r\n            [value]=\"type\"\r\n            (click)=\"$event.stopPropagation()\">\r\n              <p mat-line>{{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\">{{languageService.translate.instant('igo.geo.catalog.externalProvider.unavailableWithEmail', { value: addedCatalog.url, email: emailAddress })}}</p>\r\n  </span>\r\n  <span *ngIf=\"error && addedCatalog && !emailAddress\">\r\n    <p class=\"error\">{{languageService.translate.instant('igo.geo.catalog.unavailable', { value: addedCatalog.url })}}</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\r\n      mat-raised-button\r\n      type=\"button\"\r\n      (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      {{'igo.geo.catalog.library.add' | translate}}\r\n    </button>\r\n  </div>\r\n</div>", styles: ["mat-form-field{width:100%}.add-catalog-button-top-padding{padding-top:25px}.igo-form{padding:10px 5px 5px}.igo-form-button-group{text-align:center}button{cursor:pointer}button#addCatalogBtnDialog[disabled=true]{cursor:default;background-color:#0000001f;color:#00000042}.error{color:red}\n"] }]
     }], function () { return [{ type: i2$2.UntypedFormBuilder }, { type: i2$1.LanguageService }, { type: i2$1.ConfigService }, { type: i1.MatDialogRef }, { type: undefined, decorators: [{
                 type: Optional
             }, {
@@ -19199,7 +20011,7 @@ CatalogLibaryComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Cata
     } }, styles: ["igo-list[_ngcontent-%COMP%]{height:auto}.btnAddCatalog[_ngcontent-%COMP%]{justify-content:center;display:flex;margin:30px 0}"], changeDetection: 0 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CatalogLibaryComponent, [{
         type: Component,
-        args: [{ selector: 'igo-catalog-library', changeDetection: ChangeDetectionStrategy.OnPush, template: "<igo-list [navigation]=\"false\">\n  <ng-template ngFor let-catalog [ngForOf]=\"getCatalogs() | async\">\n    <igo-catalog-library-item\n      igoListItem\n      color=\"accent\"\n      [map]=\"map\"\n      [catalog]=\"catalog\"\n      (catalogRemove)=\"onCatalogRemove(catalog)\"\n      (select)=\"onCatalogSelect(catalog)\">\n    </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    {{'igo.geo.catalog.library.addBtn' | translate}}\n    <mat-icon svgIcon=\"earth-plus\"></mat-icon>\n  </button>\n</div>\n", styles: ["igo-list{height:auto}.btnAddCatalog{justify-content:center;display:flex;margin:30px 0}\n"] }]
+        args: [{ selector: 'igo-catalog-library', changeDetection: ChangeDetectionStrategy.OnPush, template: "<igo-list [navigation]=\"false\">\r\n  <ng-template ngFor let-catalog [ngForOf]=\"getCatalogs() | async\">\r\n    <igo-catalog-library-item\r\n      igoListItem\r\n      color=\"accent\"\r\n      [map]=\"map\"\r\n      [catalog]=\"catalog\"\r\n      (catalogRemove)=\"onCatalogRemove(catalog)\"\r\n      (select)=\"onCatalogSelect(catalog)\">\r\n    </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    {{'igo.geo.catalog.library.addBtn' | translate}}\r\n    <mat-icon svgIcon=\"earth-plus\"></mat-icon>\r\n  </button>\r\n</div>\r\n", styles: ["igo-list{height:auto}.btnAddCatalog{justify-content:center;display:flex;margin:30px 0}\n"] }]
     }], function () { return [{ type: CapabilitiesService }, { type: i2$1.MessageService }, { type: i2$1.LanguageService }, { type: i2$1.StorageService }, { type: i1.MatDialog }]; }, { store: [{
             type: Input
         }], map: [{
@@ -19272,7 +20084,7 @@ CatalogLibaryItemComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
     } }, dependencies: [i1$1.NgIf, i2.MatIcon, i5.MatListItem, i9.MatLine, i4.MatTooltip, i3.MatButton, i7.TranslatePipe], styles: [".igo-blank[_ngcontent-%COMP%]{cursor:pointer}.igo-external-provider[_ngcontent-%COMP%]{cursor:help}"], changeDetection: 0 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CatalogLibaryItemComponent, [{
         type: Component,
-        args: [{ selector: 'igo-catalog-library-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-list-item>\n  <h4 mat-line>\n    {{title}}\n  </h4>\n  <mat-icon\n    class=\"igo-external-provider\"\n    *ngIf=\"catalog.externalProvider\"\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  </mat-icon>\n\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  <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  <mat-icon svgIcon=\"blank\"></mat-icon>\n</button>\n</mat-list-item>\n", styles: [".igo-blank{cursor:pointer}.igo-external-provider{cursor:help}\n"] }]
+        args: [{ selector: 'igo-catalog-library-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-list-item>\r\n  <h4 mat-line>\r\n    {{title}}\r\n  </h4>\r\n  <mat-icon\r\n    class=\"igo-external-provider\"\r\n    *ngIf=\"catalog.externalProvider\"\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  </mat-icon>\r\n\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  <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  <mat-icon svgIcon=\"blank\"></mat-icon>\r\n</button>\r\n</mat-list-item>\r\n", styles: [".igo-blank{cursor:pointer}.igo-external-provider{cursor:help}\n"] }]
     }], null, { catalog: [{
             type: Input
         }], map: [{
@@ -20003,7 +20815,7 @@ DownloadButtonComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Dow
     } }, dependencies: [i1$1.NgIf, i2.MatIcon, i3.MatButton, i4.MatTooltip, i7.TranslatePipe], changeDetection: 0 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DownloadButtonComponent, [{
         type: Component,
-        args: [{ selector: 'igo-download-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  *ngIf=\"options && options.download && (options.download['dynamicUrl'] || options.download['url']) \"\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  <mat-icon svgIcon=\"download\"></mat-icon>\n</button>\n" }]
+        args: [{ selector: 'igo-download-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\r\n  *ngIf=\"options && options.download && (options.download['dynamicUrl'] || options.download['url']) \"\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  <mat-icon svgIcon=\"download\"></mat-icon>\r\n</button>\r\n" }]
     }], function () { return [{ type: DownloadService }]; }, { layer: [{
             type: Input
         }], color: [{
@@ -20071,7 +20883,9 @@ IgoDrawModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [FormsModul
         IgoEntityTableModule,
         ColorPickerModule,
         BrowserModule,
-        BrowserAnimationsModule] });
+        BrowserAnimationsModule,
+        MatRadioModule,
+        MatCheckboxModule] });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(IgoDrawModule, [{
         type: NgModule,
         args: [{
@@ -20096,7 +20910,9 @@ IgoDrawModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [FormsModul
                     IgoEntityTableModule,
                     ColorPickerModule,
                     BrowserModule,
-                    BrowserAnimationsModule
+                    BrowserAnimationsModule,
+                    MatRadioModule,
+                    MatCheckboxModule
                 ],
                 declarations: [DrawComponent, DrawPopupComponent, DrawLayerPopupComponent, DrawShorcutsComponent],
                 exports: [DrawComponent]
@@ -20122,7 +20938,9 @@ IgoDrawModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [FormsModul
         IgoEntityTableModule,
         ColorPickerModule,
         BrowserModule,
-        BrowserAnimationsModule], exports: [DrawComponent] }); })();
+        BrowserAnimationsModule,
+        MatRadioModule,
+        MatCheckboxModule], exports: [DrawComponent] }); })();
 
 class IgoDrawingToolModule {
 }
@@ -21140,7 +21958,7 @@ MeasurerDialogComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Mea
     } }, styles: ["[_nghost-%COMP%]{font-family:Roboto,Helvetica Neue,sans-serif}h3[_ngcontent-%COMP%]{text-align:center;margin:0}table[_ngcontent-%COMP%]{width:100%;padding:10px}table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]   td[_ngcontent-%COMP%]:last-child{padding-left:10px}"] });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MeasurerDialogComponent, [{
         type: Component,
-        args: [{ selector: 'igo-measurer-dialog', template: "<h3 mat-dialog-title>{{'igo.geo.measure.dialog.title' | translate}}</h3>\n\n<table *ngIf=\"data.length > 0\"\n  class=\"mat-typography\">\n  <thead>\n    <tr>\n      <th colspan=\"2\">{{'igo.geo.measure.dialog.length.title' | translate}}</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>{{data.length | measureFormat: measureLengthUnit.Kilometers}}</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\"\n  class=\"mat-typography\">\n  <thead>\n    <tr>\n      <th colspan=\"2\">{{'igo.geo.measure.dialog.area.title' | translate}}</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>{{data.area | measureFormat:measureAreaUnit.SquareKilometers}}</td>\n      <td>{{'igo.geo.measure.dialog.areaInSquareKilometers' | translate}}</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", styles: [":host{font-family:Roboto,Helvetica Neue,sans-serif}h3{text-align:center;margin:0}table{width:100%;padding:10px}table tbody tr td:last-child{padding-left:10px}\n"] }]
+        args: [{ selector: 'igo-measurer-dialog', template: "<h3 mat-dialog-title>{{'igo.geo.measure.dialog.title' | translate}}</h3>\r\n\r\n<table *ngIf=\"data.length > 0\"\r\n  class=\"mat-typography\">\r\n  <thead>\r\n    <tr>\r\n      <th colspan=\"2\">{{'igo.geo.measure.dialog.length.title' | translate}}</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>{{data.length | measureFormat: measureLengthUnit.Kilometers}}</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\"\r\n  class=\"mat-typography\">\r\n  <thead>\r\n    <tr>\r\n      <th colspan=\"2\">{{'igo.geo.measure.dialog.area.title' | translate}}</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>{{data.area | measureFormat:measureAreaUnit.SquareKilometers}}</td>\r\n      <td>{{'igo.geo.measure.dialog.areaInSquareKilometers' | translate}}</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", styles: [":host{font-family:Roboto,Helvetica Neue,sans-serif}h3{text-align:center;margin:0}table{width:100%;padding:10px}table tbody tr td:last-child{padding-left:10px}\n"] }]
     }], function () { return [{ type: i1.MatDialogRef }, { type: undefined, decorators: [{
                 type: Inject,
                 args: [MAT_DIALOG_DATA]
@@ -22155,7 +22973,7 @@ MeasurerComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MeasurerC
     } }, styles: [".measure-type-toggle[_ngcontent-%COMP%]{padding:10px;text-align:center}.measure-type-toggle[_ngcontent-%COMP%]   mat-button-toggle-group[_ngcontent-%COMP%]{width:100%}.measure-type-toggle[_ngcontent-%COMP%]   mat-button-toggle-group[_ngcontent-%COMP%]   mat-button-toggle[_ngcontent-%COMP%]{width:50%}.measure-options[_ngcontent-%COMP%]{overflow-x:hidden}.measure-options[_ngcontent-%COMP%]   mat-slide-toggle[_ngcontent-%COMP%]{width:100%;margin:10px}.measure-options[_ngcontent-%COMP%]   mat-slide-toggle[_ngcontent-%COMP%]     .mat-slide-toggle-content{width:calc(100% - 60px)}.measure-store-buttons[_ngcontent-%COMP%]{margin-left:-2px}.measure-store-buttons[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]:first-of-type{margin-left:14px}.table-compact[_ngcontent-%COMP%]     .mat-header-cell.mat-column-selectionCheckbox{width:52px}"], changeDetection: 0 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MeasurerComponent, [{
         type: Component,
-        args: [{ selector: 'igo-measurer', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div>\n  <div class=\"measure-type-toggle mat-typography\">\n    <mat-button-toggle-group\n      [value]=\"activeMeasureType\"\n      (change)=\"onMeasureTypeChange($event.value)\">\n      <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      {{'igo.geo.measure.toggleActive' | translate}}\n    </mat-slide-toggle>\n\n    <mat-divider *ngIf=\"(hasLine$ | async)\"></mat-divider>\n\n    <mat-slide-toggle *ngIf=\"(hasLine$ | async)\"\n      [checked]=\"displayLines\"\n      [labelPosition]=\"'before'\"\n      (change)=\"onToggleDisplayLines($event.checked)\">\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 *ngIf=\"(hasArea$ | async)\"\n      [checked]=\"displayDistance\"\n      [labelPosition]=\"'before'\"\n      (change)=\"onToggleDisplayDistance($event.checked)\">\n      {{'igo.geo.measure.toggleDisplayDistance' | translate}}\n    </mat-slide-toggle>\n\n    <mat-slide-toggle *ngIf=\"(hasArea$ | async)\"\n      [checked]=\"displayAreas\"\n      [labelPosition]=\"'before'\"\n      (change)=\"onToggleDisplayAreas($event.checked)\">\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      {{'igo.geo.measure.toggleAutoUnits' | translate}}\n    </mat-slide-toggle>\n  </div>\n\n  <ng-container *ngIf=\"measure$ | async as measure\">\n    <igo-measurer-item *ngIf=\"activeMeasureType === measureType.Length || activeMeasureType === measureType.Area\"\n      [measureType]=\"measureType.Length\"\n      [measureUnit]=\"measureLengthUnit.Meters\"\n      [measure]=\"measure.length\"\n      [auto]=\"measureUnitsAuto\"\n      [placeholder]=\"(activeMeasureType === measureType.Area ? 'igo.geo.measure.perimeter' : 'igo.geo.measure.length') | translate\"\n      (measureUnitChange)=\"onLengthUnitChange($event)\">\n    </igo-measurer-item>\n\n    <igo-measurer-item *ngIf=\"activeMeasureType === measureType.Area\"\n      [measureType]=\"measureType.Area\"\n      [measureUnit]=\"measureAreaUnit.SquareMeters\"\n      [measure]=\"measure.area\"\n      [auto]=\"measureUnitsAuto\"\n      [placeholder]=\"'igo.geo.measure.area' | translate\"\n      (measureUnitChange)=\"onAreaUnitChange($event)\">\n    </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 *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      <mat-icon svgIcon=\"calculator\"></mat-icon>\n    </button>\n\n    <button *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      <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  </igo-entity-table>\n</div>\n", styles: [".measure-type-toggle{padding:10px;text-align:center}.measure-type-toggle mat-button-toggle-group{width:100%}.measure-type-toggle mat-button-toggle-group mat-button-toggle{width:50%}.measure-options{overflow-x:hidden}.measure-options mat-slide-toggle{width:100%;margin:10px}.measure-options mat-slide-toggle ::ng-deep .mat-slide-toggle-content{width:calc(100% - 60px)}.measure-store-buttons{margin-left:-2px}.measure-store-buttons button:first-of-type{margin-left:14px}.table-compact ::ng-deep .mat-header-cell.mat-column-selectionCheckbox{width:52px}\n"] }]
+        args: [{ selector: 'igo-measurer', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div>\r\n  <div class=\"measure-type-toggle mat-typography\">\r\n    <mat-button-toggle-group\r\n      [value]=\"activeMeasureType\"\r\n      (change)=\"onMeasureTypeChange($event.value)\">\r\n      <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      {{'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 *ngIf=\"(hasLine$ | async)\"\r\n      [checked]=\"displayLines\"\r\n      [labelPosition]=\"'before'\"\r\n      (change)=\"onToggleDisplayLines($event.checked)\">\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 *ngIf=\"(hasArea$ | async)\"\r\n      [checked]=\"displayDistance\"\r\n      [labelPosition]=\"'before'\"\r\n      (change)=\"onToggleDisplayDistance($event.checked)\">\r\n      {{'igo.geo.measure.toggleDisplayDistance' | translate}}\r\n    </mat-slide-toggle>\r\n\r\n    <mat-slide-toggle *ngIf=\"(hasArea$ | async)\"\r\n      [checked]=\"displayAreas\"\r\n      [labelPosition]=\"'before'\"\r\n      (change)=\"onToggleDisplayAreas($event.checked)\">\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      {{'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 *ngIf=\"activeMeasureType === measureType.Length || activeMeasureType === measureType.Area\"\r\n      [measureType]=\"measureType.Length\"\r\n      [measureUnit]=\"measureLengthUnit.Meters\"\r\n      [measure]=\"measure.length\"\r\n      [auto]=\"measureUnitsAuto\"\r\n      [placeholder]=\"(activeMeasureType === measureType.Area ? 'igo.geo.measure.perimeter' : 'igo.geo.measure.length') | translate\"\r\n      (measureUnitChange)=\"onLengthUnitChange($event)\">\r\n    </igo-measurer-item>\r\n\r\n    <igo-measurer-item *ngIf=\"activeMeasureType === measureType.Area\"\r\n      [measureType]=\"measureType.Area\"\r\n      [measureUnit]=\"measureAreaUnit.SquareMeters\"\r\n      [measure]=\"measure.area\"\r\n      [auto]=\"measureUnitsAuto\"\r\n      [placeholder]=\"'igo.geo.measure.area' | translate\"\r\n      (measureUnitChange)=\"onAreaUnitChange($event)\">\r\n    </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 *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      <mat-icon svgIcon=\"calculator\"></mat-icon>\r\n    </button>\r\n\r\n    <button *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      <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  </igo-entity-table>\r\n</div>\r\n", styles: [".measure-type-toggle{padding:10px;text-align:center}.measure-type-toggle mat-button-toggle-group{width:100%}.measure-type-toggle mat-button-toggle-group mat-button-toggle{width:50%}.measure-options{overflow-x:hidden}.measure-options mat-slide-toggle{width:100%;margin:10px}.measure-options mat-slide-toggle ::ng-deep .mat-slide-toggle-content{width:calc(100% - 60px)}.measure-store-buttons{margin-left:-2px}.measure-store-buttons button:first-of-type{margin-left:14px}.table-compact ::ng-deep .mat-header-cell.mat-column-selectionCheckbox{width:52px}\n"] }]
     }], function () { return [{ type: i2$1.LanguageService }, { type: i1.MatDialog }, { type: i2$1.StorageService }]; }, { map: [{
             type: Input
         }], store: [{
@@ -22286,6 +23104,14 @@ class GeometryFormFieldInputComponent {
         }
         this.toggleControl();
     }
+    /**
+     * Whether freehand draw control should be active or not
+     */
+    get predefinedRadius() { return this._predefinedRadius; }
+    set predefinedRadius(value) {
+        this._predefinedRadius = value;
+        this.drawControl.ispredefinedRadius$.next(value);
+    }
     /**
      * Style for the draw control (applies while the geometry is being drawn)
      */
@@ -22666,7 +23492,7 @@ class GeometryFormFieldInputComponent {
     }
 }
 GeometryFormFieldInputComponent.ɵfac = function GeometryFormFieldInputComponent_Factory(t) { return new (t || GeometryFormFieldInputComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i2$2.NgControl, 10)); };
-GeometryFormFieldInputComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: GeometryFormFieldInputComponent, selectors: [["igo-geometry-form-field-input"]], inputs: { map: "map", geometryType: "geometryType", drawGuide: "drawGuide", measure: "measure", drawControlIsActive: "drawControlIsActive", freehandDrawIsActive: "freehandDrawIsActive", controlOptions: "controlOptions", drawStyle: "drawStyle", overlayStyle: "overlayStyle", value: "value", radius: "radius" }, decls: 1, vars: 0, template: function GeometryFormFieldInputComponent_Template(rf, ctx) { if (rf & 1) {
+GeometryFormFieldInputComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: GeometryFormFieldInputComponent, selectors: [["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" }, decls: 1, vars: 0, template: function GeometryFormFieldInputComponent_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵtemplate(0, GeometryFormFieldInputComponent_ng_template_0_Template, 0, 0, "ng-template");
     } }, encapsulation: 2, changeDetection: 0 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(GeometryFormFieldInputComponent, [{
@@ -22688,6 +23514,8 @@ GeometryFormFieldInputComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ t
             type: Input
         }], freehandDrawIsActive: [{
             type: Input
+        }], predefinedRadius: [{
+            type: Input
         }], controlOptions: [{
             type: Input
         }], drawStyle: [{
@@ -22848,7 +23676,7 @@ GeometryFormFieldComponent = __decorate([
 ], GeometryFormFieldComponent);
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(GeometryFormFieldComponent, [{
         type: Component,
-        args: [{ selector: 'igo-geometry-form-field', changeDetection: ChangeDetectionStrategy.OnPush, template: "<igo-geometry-form-field-input\n  [formControl]=\"formControl\"\n  [map]=\"map\"\n  [geometryType]=\"geometryType$ | async\"\n  [drawGuide]=\"drawGuide$ | async\"\n  [measure]=\"measure\"\n  [drawControlIsActive]=\"drawControlIsActive\"\n  [freehandDrawIsActive]=\"freehandDrawIsActive\"\n  [controlOptions]=\"controlOptions\"\n  [drawStyle]=\"drawStyle\"\n  [overlayStyle]=\"overlayStyle\">\n</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    <mat-button-toggle\n      value=\"Point\"\n      [disabled]=\"geometryTypes.indexOf('Point') < 0\">\n      {{'igo.geo.geometry.point' | translate}}\n    </mat-button-toggle>\n    <mat-button-toggle\n      value=\"LineString\"\n      [disabled]=\"geometryTypes.indexOf('LineString') < 0\">\n      {{'igo.geo.geometry.line' | translate}}\n    </mat-button-toggle>\n    <mat-button-toggle\n      value=\"Polygon\"\n      [disabled]=\"geometryTypes.indexOf('Polygon') < 0\">\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  <mat-icon\n    matPrefix\n    [color]=\"'primary'\"\n    svgIcon=\"adjust\">    \n  </mat-icon>\n  <span matSuffix class=\"draw-guide-units\">{{'igo.geo.measure.meters' | translate}}</span>\n</mat-form-field>", styles: [":host{display:block;width:100%}.geometry-type-toggle,.draw-guide-field{width:100%}.geometry-type-toggle{padding:10px;text-align:center}.draw-guide-field mat-icon{margin:0 10px}.draw-guide-units{padding:10px}\n"] }]
+        args: [{ selector: 'igo-geometry-form-field', changeDetection: ChangeDetectionStrategy.OnPush, template: "<igo-geometry-form-field-input\r\n  [formControl]=\"formControl\"\r\n  [map]=\"map\"\r\n  [geometryType]=\"geometryType$ | async\"\r\n  [drawGuide]=\"drawGuide$ | async\"\r\n  [measure]=\"measure\"\r\n  [drawControlIsActive]=\"drawControlIsActive\"\r\n  [freehandDrawIsActive]=\"freehandDrawIsActive\"\r\n  [controlOptions]=\"controlOptions\"\r\n  [drawStyle]=\"drawStyle\"\r\n  [overlayStyle]=\"overlayStyle\">\r\n</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    <mat-button-toggle\r\n      value=\"Point\"\r\n      [disabled]=\"geometryTypes.indexOf('Point') < 0\">\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      {{'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      {{'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  <mat-icon\r\n    matPrefix\r\n    [color]=\"'primary'\"\r\n    svgIcon=\"adjust\">    \r\n  </mat-icon>\r\n  <span matSuffix class=\"draw-guide-units\">{{'igo.geo.measure.meters' | translate}}</span>\r\n</mat-form-field>", styles: [":host{display:block;width:100%}.geometry-type-toggle,.draw-guide-field{width:100%}.geometry-type-toggle{padding:10px;text-align:center}.draw-guide-field mat-icon{margin:0 10px}.draw-guide-units{padding:10px}\n"] }]
     }], function () { return [{ type: i0.ChangeDetectorRef }]; }, { formControl: [{
             type: Input
         }], map: [{
@@ -23015,7 +23843,7 @@ TimeFilterButtonComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: T
     } }, changeDetection: 0 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TimeFilterButtonComponent, [{
         type: Component,
-        args: [{ selector: 'igo-time-filter-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button *ngIf=\"header && options.timeFilterable && options.timeFilter\"\n  mat-icon-button\n  collapsibleButton\n  tooltip-position=\"below\"\n  matTooltipShowDelay=\"500\"\n  [matTooltip]=\"'igo.geo.filter.filterBy' | translate\"\n  [color]=\"color\">\n  <mat-icon [matBadge]=\"badge\" matBadgeColor=\"warn\" matBadgeSize=\"medium\" svgIcon=\"history\"></mat-icon>\n</button>\n\n<div #ogcFilter class=\"igo-layer-actions-container\"\n*ngIf=\"header && options.timeFilterable && options.timeFilter\">\n  <igo-time-filter-item\n    *ngIf=\"timeFilterCollapse && options.timeFilter\"\n    igoListItem\n    [header]=\"false\"\n    [layer]=\"layer\">\n  </igo-time-filter-item>\n</div>\n" }]
+        args: [{ selector: 'igo-time-filter-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button *ngIf=\"header && options.timeFilterable && options.timeFilter\"\r\n  mat-icon-button\r\n  collapsibleButton\r\n  tooltip-position=\"below\"\r\n  matTooltipShowDelay=\"500\"\r\n  [matTooltip]=\"'igo.geo.filter.filterBy' | translate\"\r\n  [color]=\"color\">\r\n  <mat-icon [matBadge]=\"badge\" matBadgeColor=\"warn\" matBadgeSize=\"medium\" svgIcon=\"history\"></mat-icon>\r\n</button>\r\n\r\n<div #ogcFilter class=\"igo-layer-actions-container\"\r\n*ngIf=\"header && options.timeFilterable && options.timeFilter\">\r\n  <igo-time-filter-item\r\n    *ngIf=\"timeFilterCollapse && options.timeFilter\"\r\n    igoListItem\r\n    [header]=\"false\"\r\n    [layer]=\"layer\">\r\n  </igo-time-filter-item>\r\n</div>\r\n" }]
     }], function () { return []; }, { layer: [{
             type: Input
         }], map: [{
@@ -23726,7 +24554,7 @@ TimeFilterFormComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Tim
     } }, dependencies: [i1$1.NgForOf, i1$1.NgIf, i2$2.DefaultValueAccessor, i2$2.NgControlStatus, i2$2.NgModel, i9.MatOption, i2.MatIcon, i3.MatButton, i13$1.MatSlider, i23.MatSlideToggle, i13.MatFormField, i13.MatSuffix, i14.MatInput, i15.MatSelect, i4.MatTooltip, i12$2.MatDatetimepickerComponent, i12$2.MatDatetimepickerToggleComponent, i12$2.MatDatetimepickerInputDirective, i7.TranslatePipe], styles: [".igo-layer-filters-container[_ngcontent-%COMP%]{padding-left:5px}mat-slider[_ngcontent-%COMP%]     div.mat-slider-thumb-label{width:32px;height:32px;margin:0 auto}mat-slider[_ngcontent-%COMP%]     span.mat-slider-thumb-label-text{font-size:10px}#time-slider[_ngcontent-%COMP%]{width:70%;margin:0 auto}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){#time-slider[_ngcontent-%COMP%]{width:60%;margin:0 auto}}.date-below[_ngcontent-%COMP%]{margin:0}mat-form-field[_ngcontent-%COMP%]{text-align:center}mat-datetimepicker-toggle[_ngcontent-%COMP%]     .mat-icon{padding-bottom:30px}.igo-layer-actions-container[_ngcontent-%COMP%] > .mat-slide-toggle[_ngcontent-%COMP%]{vertical-align:middle}.time-filter-mat-datetimepicker-toggle[_ngcontent-%COMP%]     .mat-icon{width:auto}"] });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TimeFilterFormComponent, [{
         type: Component,
-        args: [{ selector: 'igo-time-filter-form', template: "<div *ngIf=\"style === 'calendar' && type !=='year'\">\n  <div *ngIf=\"!isRange\" class=\"igo-col igo-col-100 igo-col-100-m\">\n    <mat-form-field>\n      <mat-datetimepicker-toggle class=\"time-filter-mat-datetimepicker-toggle\" [for]=\"datetimePicker\" matSuffix></mat-datetimepicker-toggle>\n      <mat-datetimepicker #datetimePicker type=\"{{type}}\" openOnFocus=\"true\" timeInterval=\"5\"></mat-datetimepicker>\n      <input matInput 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    </mat-form-field>\n\n  </div>\n\n  <div *ngIf=\"isRange\">\n    <div class=\"igo-col igo-col-100\">\n      <mat-form-field>\n        <mat-datetimepicker-toggle class=\"time-filter-mat-datetimepicker-toggle\" [for]=\"minDatetimePicker\" matSuffix></mat-datetimepicker-toggle>\n        <mat-datetimepicker #minDatetimePicker type=\"{{type}}\" openOnFocus=\"true\" timeInterval=\"5\"></mat-datetimepicker>\n        <input matInput 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      </mat-form-field>\n    </div>\n\n    <div class=\"igo-col igo-col-100\">\n      <mat-form-field>\n        <mat-datetimepicker-toggle class=\"time-filter-mat-datetimepicker-toggle\" [for]=\"maxDatetimePicker\" matSuffix></mat-datetimepicker-toggle>\n        <mat-datetimepicker #maxDatetimePicker type=\"{{type}}\" openOnFocus=\"true\" timeInterval=\"5\"></mat-datetimepicker>\n        <input matInput 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      </mat-form-field>\n    </div>\n  </div>\n</div>\n\n<div *ngIf=\"style === 'calendar' && type ==='year'\">\n\n  <div *ngIf=\"!isRange\" class=\"igo-col igo-col-100 igo-col-100-m\">\n        <mat-form-field>\n            <mat-select placeholder=\"{{'igo.geo.timeFilter.date' | translate}}\" [(ngModel)]=\"year\" (selectionChange)=\"handleYearChange($event)\">\n                  <mat-option [value]=\"year\" *ngFor=\"let year of listYears\">{{year}}</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 placeholder=\"{{'igo.geo.timeFilter.startDate' | translate}}\" [(ngModel)]=\"startYear\" (selectionChange)=\"handleYearChange($event)\">\n              <mat-option [value]=\"startYear\" *ngFor=\"let startYear of startListYears\">{{startYear}}</mat-option>\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 placeholder=\"{{'igo.geo.timeFilter.endDate' | translate}}\" [(ngModel)]=\"endYear\" (selectionChange)=\"handleYearChange($event)\">\n              <mat-option [value]=\"endYear\" *ngFor=\"let endYear of endListYears\">{{endYear}}</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </div>\n  </div>\n\n</div>\n\n\n  <br>\n  <div *ngIf=\"!isRange && style === 'slider' && type === 'year'\" class=\"igo-col igo-col-100 igo-col-100-m mat-typography\">\n    <span>{{startYear}}</span>\n    <mat-slider\n        id=\"time-slider\"\n        tickInterval=\"auto\"\n        step=\"{{step}}\"\n        [min]=\"startYear\"\n        [max]=\"endYear\"\n        [value]=\"handleSliderValue()\"\n        [color]=\"color\"\n        thumbLabel\n        (input)=\"handleSliderYearChange($event)\"\n        (change)=\"handleSliderYearChange($event)\"\n        [disabled]= \"!options.enabled || !layer.visible\">\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 (change)=\"toggleFilterState()\" tooltip-position=\"below\" matTooltipShowDelay=\"500\"\n        [matTooltip]=\"'igo.geo.filter.toggleFilterState' | translate\" [color]=\"color\" [checked]=\"options.enabled\"\n        [disabled]=\"!layer.visible\">\n      </mat-slide-toggle>\n      <button [disabled]= \"!options.enabled  || !layer.visible\" mat-icon-button color=\"primary\" (click)=\"playYear($event)\">\n        <mat-icon svgIcon=\"{{playIcon}}\"></mat-icon>\n       </button>\n      <button [disabled]=\"!options.enabled  || !layer.visible\" mat-icon-button color=\"primary\" (click)=\"resetFilter($event)\">\n        <mat-icon svgIcon=\"{{resetIcon}}\"></mat-icon>\n      </button>\n    </div>\n  </div>\n\n<div *ngIf=\"style === 'slider' && type !== 'year'\" class=\"igo-col igo-col-100 igo-col-100-m\">\n  <mat-slider\n      id=\"time-slider\"\n      tickInterval=\"auto\"\n      step=\"{{step}}\"\n      [min]=\"dateToNumber(min)\"\n      [max]=\"dateToNumber(max)\"\n      [value]=\"handleSliderValue()\"\n      thumbLabel\n      (input)=\"handleSliderDateChange($event)\"\n      (selectionChange)=\"handleSliderDateChange($event)\">\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: [".igo-layer-filters-container{padding-left:5px}mat-slider ::ng-deep div.mat-slider-thumb-label{width:32px;height:32px;margin:0 auto}mat-slider ::ng-deep span.mat-slider-thumb-label-text{font-size:10px}#time-slider{width:70%;margin:0 auto}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){#time-slider{width:60%;margin:0 auto}}.date-below{margin:0}mat-form-field{text-align:center}mat-datetimepicker-toggle ::ng-deep .mat-icon{padding-bottom:30px}.igo-layer-actions-container>.mat-slide-toggle{vertical-align:middle}.time-filter-mat-datetimepicker-toggle ::ng-deep .mat-icon{width:auto}\n"] }]
+        args: [{ selector: 'igo-time-filter-form', template: "<div *ngIf=\"style === 'calendar' && type !=='year'\">\r\n  <div *ngIf=\"!isRange\" class=\"igo-col igo-col-100 igo-col-100-m\">\r\n    <mat-form-field>\r\n      <mat-datetimepicker-toggle class=\"time-filter-mat-datetimepicker-toggle\" [for]=\"datetimePicker\" matSuffix></mat-datetimepicker-toggle>\r\n      <mat-datetimepicker #datetimePicker type=\"{{type}}\" openOnFocus=\"true\" timeInterval=\"5\"></mat-datetimepicker>\r\n      <input matInput 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    </mat-form-field>\r\n\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 class=\"time-filter-mat-datetimepicker-toggle\" [for]=\"minDatetimePicker\" matSuffix></mat-datetimepicker-toggle>\r\n        <mat-datetimepicker #minDatetimePicker type=\"{{type}}\" openOnFocus=\"true\" timeInterval=\"5\"></mat-datetimepicker>\r\n        <input matInput 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      </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 class=\"time-filter-mat-datetimepicker-toggle\" [for]=\"maxDatetimePicker\" matSuffix></mat-datetimepicker-toggle>\r\n        <mat-datetimepicker #maxDatetimePicker type=\"{{type}}\" openOnFocus=\"true\" timeInterval=\"5\"></mat-datetimepicker>\r\n        <input matInput 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      </mat-form-field>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div *ngIf=\"style === 'calendar' && type ==='year'\">\r\n\r\n  <div *ngIf=\"!isRange\" class=\"igo-col igo-col-100 igo-col-100-m\">\r\n        <mat-form-field>\r\n            <mat-select placeholder=\"{{'igo.geo.timeFilter.date' | translate}}\" [(ngModel)]=\"year\" (selectionChange)=\"handleYearChange($event)\">\r\n                  <mat-option [value]=\"year\" *ngFor=\"let year of listYears\">{{year}}</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 placeholder=\"{{'igo.geo.timeFilter.startDate' | translate}}\" [(ngModel)]=\"startYear\" (selectionChange)=\"handleYearChange($event)\">\r\n              <mat-option [value]=\"startYear\" *ngFor=\"let startYear of startListYears\">{{startYear}}</mat-option>\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 placeholder=\"{{'igo.geo.timeFilter.endDate' | translate}}\" [(ngModel)]=\"endYear\" (selectionChange)=\"handleYearChange($event)\">\r\n              <mat-option [value]=\"endYear\" *ngFor=\"let endYear of endListYears\">{{endYear}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </div>\r\n  </div>\r\n\r\n</div>\r\n\r\n\r\n  <br>\r\n  <div *ngIf=\"!isRange && style === 'slider' && type === 'year'\" class=\"igo-col igo-col-100 igo-col-100-m mat-typography\">\r\n    <span>{{startYear}}</span>\r\n    <mat-slider\r\n        id=\"time-slider\"\r\n        tickInterval=\"auto\"\r\n        step=\"{{step}}\"\r\n        [min]=\"startYear\"\r\n        [max]=\"endYear\"\r\n        [value]=\"handleSliderValue()\"\r\n        [color]=\"color\"\r\n        thumbLabel\r\n        (input)=\"handleSliderYearChange($event)\"\r\n        (change)=\"handleSliderYearChange($event)\"\r\n        [disabled]= \"!options.enabled || !layer.visible\">\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 (change)=\"toggleFilterState()\" tooltip-position=\"below\" matTooltipShowDelay=\"500\"\r\n        [matTooltip]=\"'igo.geo.filter.toggleFilterState' | translate\" [color]=\"color\" [checked]=\"options.enabled\"\r\n        [disabled]=\"!layer.visible\">\r\n      </mat-slide-toggle>\r\n      <button [disabled]= \"!options.enabled  || !layer.visible\" mat-icon-button color=\"primary\" (click)=\"playYear($event)\">\r\n        <mat-icon svgIcon=\"{{playIcon}}\"></mat-icon>\r\n       </button>\r\n      <button [disabled]=\"!options.enabled  || !layer.visible\" mat-icon-button color=\"primary\" (click)=\"resetFilter($event)\">\r\n        <mat-icon svgIcon=\"{{resetIcon}}\"></mat-icon>\r\n      </button>\r\n    </div>\r\n  </div>\r\n\r\n<div *ngIf=\"style === 'slider' && type !== 'year'\" class=\"igo-col igo-col-100 igo-col-100-m\">\r\n  <mat-slider\r\n      id=\"time-slider\"\r\n      tickInterval=\"auto\"\r\n      step=\"{{step}}\"\r\n      [min]=\"dateToNumber(min)\"\r\n      [max]=\"dateToNumber(max)\"\r\n      [value]=\"handleSliderValue()\"\r\n      thumbLabel\r\n      (input)=\"handleSliderDateChange($event)\"\r\n      (selectionChange)=\"handleSliderDateChange($event)\">\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: [".igo-layer-filters-container{padding-left:5px}mat-slider ::ng-deep div.mat-slider-thumb-label{width:32px;height:32px;margin:0 auto}mat-slider ::ng-deep span.mat-slider-thumb-label-text{font-size:10px}#time-slider{width:70%;margin:0 auto}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){#time-slider{width:60%;margin:0 auto}}.date-below{margin:0}mat-form-field{text-align:center}mat-datetimepicker-toggle ::ng-deep .mat-icon{padding-bottom:30px}.igo-layer-actions-container>.mat-slide-toggle{vertical-align:middle}.time-filter-mat-datetimepicker-toggle ::ng-deep .mat-icon{width:auto}\n"] }]
     }], function () { return [{ type: i9.DateAdapter }]; }, { layer: [{
             type: Input
         }], options: [{
@@ -23850,7 +24678,7 @@ TimeFilterItemComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Tim
     } }, styles: ["[_nghost-%COMP%]{overflow:hidden}.igo-datasource-filters-container[_ngcontent-%COMP%]{text-align:center;width:100%;display:inline-block;padding-top:5px}.igo-layer-legend-container[_ngcontent-%COMP%]{padding-left:1.125em;width:calc(100% - 18px)}"] });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TimeFilterItemComponent, [{
         type: Component,
-        args: [{ selector: 'igo-time-filter-item', template: "<mat-list-item *ngIf=\"header\">\n  <mat-icon\n    class=\"igo-chevron\"\n    mat-list-avatar\n    igoCollapse\n    [target]=\"filters\"\n    [collapsed]=\"filtersCollapsed\"\n    (click)=\"toggleFiltersCollapsed()\"\n    svgIcon=\"chevron-up\" >\n  </mat-icon>\n  <h4 (click)=\"toggleLegendOnClick()\" [ngStyle]=\"{'cursor': filtersCollapsed ? 'default' : 'pointer'}\"  matLine>{{layer.title}}</h4>\n  \n  <button *ngIf=\"header\"\n    mat-icon-button\n    [color]=\"layer.visible ? 'primary' : 'default'\"\n    collapsibleButton\n    tooltip-position=\"below\"\n    matTooltipShowDelay=\"500\"\n    [matTooltip]=\"layer.visible ?\n                  ('igo.geo.layer.hideLayer' | translate) :\n                  ('igo.geo.layer.showLayer' | translate)\"\n    (click)=\"layer.visible = !layer.visible\">\n    <mat-icon\n      [ngClass]=\"{disabled: (inResolutionRange$ | async)===false}\"\n      [svgIcon]=\"layer.visible ? 'eye' : 'eye-off'\">\n    </mat-icon>\n  </button>\n\n</mat-list-item>\n\n<div #filters class=\"igo-datasource-filters-container\">\n  <div #legend class=\"igo-layer-legend-container\">\n    <igo-layer-legend *ngIf=\"showLegend$ | async\" [layer]=\"layer\">\n    </igo-layer-legend>\n  </div>\n  <igo-time-filter-form\n    [layer]= \"layer\"\n    [options]=\"datasource.options.timeFilter\"\n    [currentValue]=\"datasource.options.params.TIME\"\n    (change)=\"handleDateChange($event)\"\n    (yearChange)=\"handleYearChange($event)\">\n  </igo-time-filter-form>\n</div>\n", styles: [":host{overflow:hidden}.igo-datasource-filters-container{text-align:center;width:100%;display:inline-block;padding-top:5px}.igo-layer-legend-container{padding-left:1.125em;width:calc(100% - 18px)}\n"] }]
+        args: [{ selector: 'igo-time-filter-item', template: "<mat-list-item *ngIf=\"header\">\r\n  <mat-icon\r\n    class=\"igo-chevron\"\r\n    mat-list-avatar\r\n    igoCollapse\r\n    [target]=\"filters\"\r\n    [collapsed]=\"filtersCollapsed\"\r\n    (click)=\"toggleFiltersCollapsed()\"\r\n    svgIcon=\"chevron-up\" >\r\n  </mat-icon>\r\n  <h4 (click)=\"toggleLegendOnClick()\" [ngStyle]=\"{'cursor': filtersCollapsed ? 'default' : 'pointer'}\"  matLine>{{layer.title}}</h4>\r\n  \r\n  <button *ngIf=\"header\"\r\n    mat-icon-button\r\n    [color]=\"layer.visible ? 'primary' : 'default'\"\r\n    collapsibleButton\r\n    tooltip-position=\"below\"\r\n    matTooltipShowDelay=\"500\"\r\n    [matTooltip]=\"layer.visible ?\r\n                  ('igo.geo.layer.hideLayer' | translate) :\r\n                  ('igo.geo.layer.showLayer' | translate)\"\r\n    (click)=\"layer.visible = !layer.visible\">\r\n    <mat-icon\r\n      [ngClass]=\"{disabled: (inResolutionRange$ | async)===false}\"\r\n      [svgIcon]=\"layer.visible ? 'eye' : 'eye-off'\">\r\n    </mat-icon>\r\n  </button>\r\n\r\n</mat-list-item>\r\n\r\n<div #filters class=\"igo-datasource-filters-container\">\r\n  <div #legend class=\"igo-layer-legend-container\">\r\n    <igo-layer-legend *ngIf=\"showLegend$ | async\" [layer]=\"layer\">\r\n    </igo-layer-legend>\r\n  </div>\r\n  <igo-time-filter-form\r\n    [layer]= \"layer\"\r\n    [options]=\"datasource.options.timeFilter\"\r\n    [currentValue]=\"datasource.options.params.TIME\"\r\n    (change)=\"handleDateChange($event)\"\r\n    (yearChange)=\"handleYearChange($event)\">\r\n  </igo-time-filter-form>\r\n</div>\r\n", styles: [":host{overflow:hidden}.igo-datasource-filters-container{text-align:center;width:100%;display:inline-block;padding-top:5px}.igo-layer-legend-container{padding-left:1.125em;width:calc(100% - 18px)}\n"] }]
     }], function () { return [{ type: TimeFilterService }]; }, { header: [{
             type: Input
         }], layer: [{
@@ -23889,7 +24717,7 @@ TimeFilterListComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Tim
     } }, encapsulation: 2, changeDetection: 0 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TimeFilterListComponent, [{
         type: Component,
-        args: [{ selector: 'igo-time-filter-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<igo-list [navigation]=\"false\" [selection]=\"false\">\n  <ng-template ngFor let-layer [ngForOf]=\"layers | filterableDataSource: 'time'\">\n    <igo-time-filter-item [header]=\"true\" igoListItem [layer]=\"layer\"></igo-time-filter-item>\n  </ng-template>\n</igo-list>\n" }]
+        args: [{ selector: 'igo-time-filter-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<igo-list [navigation]=\"false\" [selection]=\"false\">\r\n  <ng-template ngFor let-layer [ngForOf]=\"layers | filterableDataSource: 'time'\">\r\n    <igo-time-filter-item [header]=\"true\" igoListItem [layer]=\"layer\"></igo-time-filter-item>\r\n  </ng-template>\r\n</igo-list>\r\n" }]
     }], function () { return [{ type: i0.ChangeDetectorRef }]; }, { layers: [{
             type: Input
         }] }); })();
@@ -23924,7 +24752,7 @@ TimeFilterListBindingDirective.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ ty
 class WktService {
     constructor() { }
     wktToFeature(wkt, wktProj, featureProj) {
-        return new olWKT().readFeature(wkt, {
+        return new olFormatWKT().readFeature(wkt, {
             dataProjection: wktProj,
             featureProjection: featureProj
         });
@@ -23932,22 +24760,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,
@@ -24782,7 +25610,7 @@ OgcFilterFormComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: OgcF
     } }, styles: ["[_nghost-%COMP%]{width:100%;padding:5px 10px}  .mat-form-field .mat-icon svg{width:1em;height:1em;color:#d3d3d3}.mat-form-field[_ngcontent-%COMP%]{width:100%}.mat-select-arrow[_ngcontent-%COMP%]{visibility:hidden}.mat-slide-toggle[_ngcontent-%COMP%]{margin-top:10px}.logical[_ngcontent-%COMP%]{flex-flow:column nowrap;width:10%;max-width:45px;margin-left:5px}.logicalHidden[_ngcontent-%COMP%]{flex-flow:column nowrap;width:10%;visibility:hidden;max-width:45px;margin-left:5px}  .logical .mat-select-arrow{visibility:hidden}  .logicalHidden .mat-select-arrow{visibility:hidden}.field[_ngcontent-%COMP%]{width:20%}  .field .mat-select-arrow{visibility:hidden}.operator[_ngcontent-%COMP%]{width:12%;margin-left:10px;text-align:center}  .operator .mat-select-arrow{visibility:hidden}.spatialSelector[_ngcontent-%COMP%]{width:15%;margin-left:5px}  .spatialSelector .mat-select-arrow{visibility:hidden}.singleInput[_ngcontent-%COMP%]{width:30%;margin-left:5px}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){.singleInput[_ngcontent-%COMP%]{width:27%}}.snrc[_ngcontent-%COMP%]{width:20%;margin-left:5px}  .singleInput .mat-select-arrow{visibility:hidden}.dualInput[_ngcontent-%COMP%]{width:20%;margin-left:5px}  .dualInput .mat-select-arrow{visibility:hidden}.igo-layer-button-group[_ngcontent-%COMP%]{display:flex;float:right;padding-top:5px}.container[_ngcontent-%COMP%]{display:flex}"] });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(OgcFilterFormComponent, [{
         type: Component,
-        args: [{ selector: 'igo-ogc-filter-form', template: "<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</mat-checkbox>\n\n<mat-form-field\n  [ngClass]=\"{'logical': activeFilters.indexOf(currentFilter) !== 0 && currentFilter.active===true, 'logicalHidden': activeFilters.indexOf(currentFilter) === 0 || currentFilter.active!==true}\">\n  <mat-select\n    [disabled]=\"!currentFilter.active\"\n    [value]=\"currentFilter.parentLogical\"\n    tooltip-position=\"above\"\n    matTooltipShowDelay=\"500\"\n    [matTooltip]=\"currentFilter.parentLogical ? (('igo.geo.operators.tooltip.'+ currentFilter.parentLogical) | translate) : ''\"\n    (selectionChange)=\"changeLogical($event.value)\">\n      <mat-option\n        [value]=ogcFilterOperator.And\n        tooltip-position=\"above\"\n        matTooltipShowDelay=\"500\"\n        [matTooltip]=\"'igo.geo.operators.tooltip.And' | translate\">\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          {{'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=\"(currentFilterIsSpatial$ | async)===false && (fields$ | async) && (fields$| async).length > 0 && (fields$| async)[0].name !== ''\"\n  (mouseenter)=\"inputClearable = 'selectField'\"\n  (mouseleave)=\"inputClearable = undefined\"\n  [floatLabel]=\"floatLabel\">\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]=\"(selectedField$ | async) ? (selectedField$ | async).alias : ('igo.geo.sourceFields.selectField' | translate)\"\n  (input)=\"updateFieldsList($event.target.value)\">\n  <mat-autocomplete #autoCompleteField=\"matAutocomplete\"\n  (optionSelected)='changeField($event.option.id)'>\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      {{field.alias}}\n    </mat-option>\n  </mat-autocomplete>\n  <button mat-button\n    *ngIf=\"currentFilter.propertyName && inputClearable === 'selectField' && currentFilter.active\"\n    matSuffix\n    mat-icon-button\n    aria-label=\"Clear\"\n    [disabled]=\"!currentFilter.active\"\n    (click)=\"clearSelectedField()\">\n        <mat-icon svgIcon=\"close\"></mat-icon>\n  </button>\n</mat-form-field>\n\n\n<mat-form-field\n  [ngClass]=\"{'operator': (currentFilterIsSpatial$ | async)===false , 'dualInput': (currentFilterIsSpatial$ | async)}\"\n  [floatLabel]=\"floatLabel\">\n  <mat-select\n    tooltip-position=\"below\"\n    matTooltipShowDelay=\"500\"\n    [matTooltip]=\"currentFilter.operator ? (('igo.geo.operators.tooltip.'+ currentFilter.operator) | translate) : ('igo.geo.filter.selectOperator' | translate)\"\n    [disabled]=\"!currentFilter.active\"\n    [value]=\"currentFilter.operator\"\n    (selectionChange)=\"changeOperator($event.value)\">\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          {{('igo.geo.operators.'+ operator.key) | translate}}\n      </mat-option>\n  </mat-select>\n</mat-form-field>\n\n<mat-form-field\nclass=\"spatialSelector\"\n*ngIf=\"currentFilterIsSpatial$ | async\">\n  <mat-select\n    [disabled]=\"!currentFilter.active\"\n    [value]=\"currentFilter.igoSpatialSelector\"\n    (selectionChange)=\"changeSpatialSelector($event.value)\">\n      <mat-option\n        *ngFor=\"let igoSpatialSelector of igoSpatialSelectors\"\n        [value]=\"igoSpatialSelector.type\">\n          {{('igo.geo.spatialSelector.'+ igoSpatialSelector.type) | translate}}\n      </mat-option>\n  </mat-select>\n</mat-form-field>\n\n<mat-form-field\nclass=\"singleInput\"\n*ngIf=\"['expression','pattern'].indexOf(detectProperty()) !== -1\"\n(mouseenter)=\"inputClearable = 'selectProperty'\"\n(mouseleave)=\"inputClearable = undefined\"\n[floatLabel]=\"floatLabel\">\n  <input\n    matInput\n    [placeholder]=\"'igo.geo.filter.placeholder' | translate\"\n    [disabled]=\"!currentFilter.active\"\n    [matAutocomplete]=\"autoCompleteValues\"\n    [value]=\"detectProperty() === 'expression' ? currentFilter.expression : currentFilter.pattern\"\n    tooltip-position=\"above\"\n    matTooltipShowDelay=\"500\"\n    [matTooltip]=\"detectProperty() === 'expression' ? currentFilter.expression || '' : currentFilter.pattern || ''\"\n    (input)=\"updateValuesList($event.target.value)\">\n  <mat-autocomplete #autoCompleteValues=\"matAutocomplete\"\n    (optionSelected)=\"changeProperty($event.option.value)\">\n    <mat-option\n      *ngFor=\"let value of filteredValues$ | async\"\n      matTooltipShowDelay=\"500\"\n      [value]=\"value\"\n      [matTooltip]=\"value\">\n      {{value}}\n    </mat-option>\n  </mat-autocomplete>\n  <button mat-button\n    *ngIf=\"isClearable() && inputClearable === 'selectProperty' && currentFilter.active\"\n    matSuffix\n    mat-icon-button\n    aria-label=\"Clear\"\n    [disabled]=\"!currentFilter.active\"\n    (click)=\"clearProperty()\">\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    <mat-icon svgIcon=\"delete\"></mat-icon>\n  </button>\n</div>\n\n<mat-form-field\nclass=\"snrc\"\n*ngIf=\"(currentFilterIsSpatial$ | async) && currentFilter.igoSpatialSelector === 'snrc'\"\n(mouseenter)=\"inputClearable = 'selectSNRC'\"\n(mouseleave)=\"inputClearable = undefined\"\n[floatLabel]=\"floatLabel\">\n  <input\n    matInput\n    [placeholder]=\"'igo.geo.filter.placeholderSnrc' | translate\"\n    [value]=\"currentFilter.igoSNRC\"\n    tooltip-position=\"above\"\n    matTooltipShowDelay=\"500\"\n    [matTooltip]=\"currentFilter.igoSNRC ? currentFilter.igoSNRC : ''\"\n    (input)=\"changeSNRC($event.target.value)\">\n  <button\n    mat-button\n    *ngIf=\"currentFilter.igoSNRC\"\n    matSuffix\n    mat-icon-button\n    aria-label=\"Clear\"\n    [disabled]=\"!currentFilter.active && inputClearable === 'selectSNRC' && currentFilter.active\"\n    (click)=\"currentFilter.igoSNRC=''\">\n      <mat-icon svgIcon=\"close\"></mat-icon>\n  </button>\n  </mat-form-field>\n\n  <ng-container *ngIf=\"(currentFilterIsSpatial$ | async) && currentFilter.igoSpatialSelector === 'fixedExtent'\">\n    <button\n    mat-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      <mat-icon svgIcon=\"arrow-expand-all\"></mat-icon>\n  </button>\n</ng-container>\n\n<br/>\n\n<mat-form-field\nclass=\"dualInput\"\n*ngIf=\"!isTemporalOperator() && ['lowerBoundary','begin'].indexOf(detectProperty(1)) !== -1\"\n(mouseenter)=\"inputClearable = 'selectProperty1'\"\n(mouseleave)=\"inputClearable = undefined\"\n[floatLabel]=\"floatLabel\">\n    <input\n      matInput\n      [placeholder]=\"'igo.geo.filter.placeholder' | translate\"\n      [disabled]=\"!currentFilter.active\"\n      [matAutocomplete]=\"autoDualValueOperator1\"\n      type=\"number\"\n      [value]=\"detectProperty(1) === 'lowerBoundary' ? currentFilter.lowerBoundary : currentFilter.begin\"\n      (input)=\"updateValuesList($event.target.value,1)\">\n    <mat-autocomplete #autoDualValueOperator1=\"matAutocomplete\"\n      (optionSelected)=\"changeNumericProperty($event.option.value,1)\">\n      <mat-option\n        *ngFor=\"let value of filteredValues$ | async\"\n        matTooltipShowDelay=\"500\"\n        [value]=\"value\"\n        [matTooltip]=\"value\">\n        {{value}}\n      </mat-option>\n    </mat-autocomplete>\n    <button mat-button\n      *ngIf=\"isClearable(1) && inputClearable === 'selectProperty1' && currentFilter.active\"\n      matSuffix\n      mat-icon-button\n      aria-label=\"Clear\"\n    [disabled]=\"!currentFilter.active\"\n      (click)=\"clearProperty(1)\">\n          <mat-icon svgIcon=\"close\"></mat-icon>\n    </button>\n</mat-form-field>\n\n<mat-form-field\n  class=\"dualInput\"\n  *ngIf=\"!isTemporalOperator() && ['upperBoundary','end'].indexOf(detectProperty(2)) !== -1\"\n  (mouseenter)=\"inputClearable = 'selectProperty2'\"\n  (mouseleave)=\"inputClearable = undefined\"\n  [floatLabel]=\"floatLabel\">\n    <input\n      matInput\n      [placeholder]=\"'igo.geo.filter.placeholder' | translate\"\n      [disabled]=\"!currentFilter.active\"\n      [matAutocomplete]=\"autoDualValueOperator2\"\n      type=\"number\"\n      [value]=\"detectProperty(2) === 'upperBoundary' ? currentFilter.upperBoundary : currentFilter.end\"\n      (input)=\"updateValuesList($event.target.value,2)\">\n    <mat-autocomplete #autoDualValueOperator2=\"matAutocomplete\"\n      (optionSelected)=\"changeNumericProperty($event.option.value,2)\">\n      <mat-option\n        *ngFor=\"let value of filteredValues$ | async\"\n        matTooltipShowDelay=\"500\"\n        [value]=\"value\"\n        [matTooltip]=\"value\">\n        {{value}}\n      </mat-option>\n    </mat-autocomplete>\n    <button mat-button\n      *ngIf=\"isClearable(2) && inputClearable === 'selectProperty2' && currentFilter.active\"\n      matSuffix\n      mat-icon-button\n      aria-label=\"Clear\"\n      [disabled]=\"!currentFilter.active\"\n      (click)=\"clearProperty(2)\">\n          <mat-icon svgIcon=\"close\"></mat-icon>\n    </button>\n</mat-form-field>\n\n<igo-ogc-filter-time *ngIf=\"isTemporalOperator()\"\n  [(datasource)]=\"datasource\"\n  [(currentFilter)]=\"currentFilter\"\n  (changeProperty)=\"changeProperty($event.value, $event.pos)\">\n</igo-ogc-filter-time>\n\n<!--\nTODO C'EST PERTINENT je crois\n<mat-form-field class=\"field\" *ngIf=\"!(currentFilterIsSpatial$ | async) && (fields$| async) && (fields$| async).length === 1 &&  (fields$| async)[0].name === ''\">\n<input [disabled]=\"!currentFilter.active\" matInput #fieldPerUser (keyup)=\"changeProperty(currentFilter,'propertyName',fieldPerUser.value)\"\n  (blur)=\"changeProperty(currentFilter,'propertyName',fieldPerUser.value)\" [(ngModel)]=\"currentFilter.propertyName\">\n<button mat-button *ngIf=\"currentFilter.propertyName\" matSuffix mat-icon-button aria-label=\"Clear\" (click)=\"currentFilter.propertyName=''\">\n  <mat-icon svgIcon=\"close\"></mat-icon>\n</button>\n</mat-form-field>\n\n\n\n<mat-checkbox labelPosition='before' (change)=\"changeCaseSensitive($event)\" [(ngModel)]=\"currentFilter.matchCase\">\n  {{('igo.geo.operators.caseSensitive') | translate}}\n</mat-checkbox>\n\n</mat-list-item> -->\n", styles: [":host{width:100%;padding:5px 10px}::ng-deep .mat-form-field .mat-icon svg{width:1em;height:1em;color:#d3d3d3}.mat-form-field{width:100%}.mat-select-arrow{visibility:hidden}.mat-slide-toggle{margin-top:10px}.logical{flex-flow:column nowrap;width:10%;max-width:45px;margin-left:5px}.logicalHidden{flex-flow:column nowrap;width:10%;visibility:hidden;max-width:45px;margin-left:5px}::ng-deep .logical .mat-select-arrow{visibility:hidden}::ng-deep .logicalHidden .mat-select-arrow{visibility:hidden}.field{width:20%}::ng-deep .field .mat-select-arrow{visibility:hidden}.operator{width:12%;margin-left:10px;text-align:center}::ng-deep .operator .mat-select-arrow{visibility:hidden}.spatialSelector{width:15%;margin-left:5px}::ng-deep .spatialSelector .mat-select-arrow{visibility:hidden}.singleInput{width:30%;margin-left:5px}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){.singleInput{width:27%}}.snrc{width:20%;margin-left:5px}::ng-deep .singleInput .mat-select-arrow{visibility:hidden}.dualInput{width:20%;margin-left:5px}::ng-deep .dualInput .mat-select-arrow{visibility:hidden}.igo-layer-button-group{display:flex;float:right;padding-top:5px}.container{display:flex}\n"] }]
+        args: [{ selector: 'igo-ogc-filter-form', template: "<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</mat-checkbox>\r\n\r\n<mat-form-field\r\n  [ngClass]=\"{'logical': activeFilters.indexOf(currentFilter) !== 0 && currentFilter.active===true, 'logicalHidden': activeFilters.indexOf(currentFilter) === 0 || currentFilter.active!==true}\">\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]=\"currentFilter.parentLogical ? (('igo.geo.operators.tooltip.'+ currentFilter.parentLogical) | translate) : ''\"\r\n    (selectionChange)=\"changeLogical($event.value)\">\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          {{'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          {{'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=\"(currentFilterIsSpatial$ | async)===false && (fields$ | async) && (fields$| async).length > 0 && (fields$| async)[0].name !== ''\"\r\n  (mouseenter)=\"inputClearable = 'selectField'\"\r\n  (mouseleave)=\"inputClearable = undefined\"\r\n  [floatLabel]=\"floatLabel\">\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]=\"(selectedField$ | async) ? (selectedField$ | async).alias : ('igo.geo.sourceFields.selectField' | translate)\"\r\n  (input)=\"updateFieldsList($event.target.value)\">\r\n  <mat-autocomplete #autoCompleteField=\"matAutocomplete\"\r\n  (optionSelected)='changeField($event.option.id)'>\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      {{field.alias}}\r\n    </mat-option>\r\n  </mat-autocomplete>\r\n  <button mat-button\r\n    *ngIf=\"currentFilter.propertyName && inputClearable === 'selectField' && currentFilter.active\"\r\n    matSuffix\r\n    mat-icon-button\r\n    aria-label=\"Clear\"\r\n    [disabled]=\"!currentFilter.active\"\r\n    (click)=\"clearSelectedField()\">\r\n        <mat-icon svgIcon=\"close\"></mat-icon>\r\n  </button>\r\n</mat-form-field>\r\n\r\n\r\n<mat-form-field\r\n  [ngClass]=\"{'operator': (currentFilterIsSpatial$ | async)===false , 'dualInput': (currentFilterIsSpatial$ | async)}\"\r\n  [floatLabel]=\"floatLabel\">\r\n  <mat-select\r\n    tooltip-position=\"below\"\r\n    matTooltipShowDelay=\"500\"\r\n    [matTooltip]=\"currentFilter.operator ? (('igo.geo.operators.tooltip.'+ currentFilter.operator) | translate) : ('igo.geo.filter.selectOperator' | translate)\"\r\n    [disabled]=\"!currentFilter.active\"\r\n    [value]=\"currentFilter.operator\"\r\n    (selectionChange)=\"changeOperator($event.value)\">\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          {{('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\nclass=\"spatialSelector\"\r\n*ngIf=\"currentFilterIsSpatial$ | async\">\r\n  <mat-select\r\n    [disabled]=\"!currentFilter.active\"\r\n    [value]=\"currentFilter.igoSpatialSelector\"\r\n    (selectionChange)=\"changeSpatialSelector($event.value)\">\r\n      <mat-option\r\n        *ngFor=\"let igoSpatialSelector of igoSpatialSelectors\"\r\n        [value]=\"igoSpatialSelector.type\">\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\nclass=\"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  <input\r\n    matInput\r\n    [placeholder]=\"'igo.geo.filter.placeholder' | translate\"\r\n    [disabled]=\"!currentFilter.active\"\r\n    [matAutocomplete]=\"autoCompleteValues\"\r\n    [value]=\"detectProperty() === 'expression' ? currentFilter.expression : currentFilter.pattern\"\r\n    tooltip-position=\"above\"\r\n    matTooltipShowDelay=\"500\"\r\n    [matTooltip]=\"detectProperty() === 'expression' ? currentFilter.expression || '' : currentFilter.pattern || ''\"\r\n    (input)=\"updateValuesList($event.target.value)\">\r\n  <mat-autocomplete #autoCompleteValues=\"matAutocomplete\"\r\n    (optionSelected)=\"changeProperty($event.option.value)\">\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      {{value}}\r\n    </mat-option>\r\n  </mat-autocomplete>\r\n  <button mat-button\r\n    *ngIf=\"isClearable() && inputClearable === 'selectProperty' && currentFilter.active\"\r\n    matSuffix\r\n    mat-icon-button\r\n    aria-label=\"Clear\"\r\n    [disabled]=\"!currentFilter.active\"\r\n    (click)=\"clearProperty()\">\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    <mat-icon svgIcon=\"delete\"></mat-icon>\r\n  </button>\r\n</div>\r\n\r\n<mat-form-field\r\nclass=\"snrc\"\r\n*ngIf=\"(currentFilterIsSpatial$ | async) && currentFilter.igoSpatialSelector === 'snrc'\"\r\n(mouseenter)=\"inputClearable = 'selectSNRC'\"\r\n(mouseleave)=\"inputClearable = undefined\"\r\n[floatLabel]=\"floatLabel\">\r\n  <input\r\n    matInput\r\n    [placeholder]=\"'igo.geo.filter.placeholderSnrc' | translate\"\r\n    [value]=\"currentFilter.igoSNRC\"\r\n    tooltip-position=\"above\"\r\n    matTooltipShowDelay=\"500\"\r\n    [matTooltip]=\"currentFilter.igoSNRC ? currentFilter.igoSNRC : ''\"\r\n    (input)=\"changeSNRC($event.target.value)\">\r\n  <button\r\n    mat-button\r\n    *ngIf=\"currentFilter.igoSNRC\"\r\n    matSuffix\r\n    mat-icon-button\r\n    aria-label=\"Clear\"\r\n    [disabled]=\"!currentFilter.active && inputClearable === 'selectSNRC' && currentFilter.active\"\r\n    (click)=\"currentFilter.igoSNRC=''\">\r\n      <mat-icon svgIcon=\"close\"></mat-icon>\r\n  </button>\r\n  </mat-form-field>\r\n\r\n  <ng-container *ngIf=\"(currentFilterIsSpatial$ | async) && currentFilter.igoSpatialSelector === 'fixedExtent'\">\r\n    <button\r\n    mat-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      <mat-icon svgIcon=\"arrow-expand-all\"></mat-icon>\r\n  </button>\r\n</ng-container>\r\n\r\n<br/>\r\n\r\n<mat-form-field\r\nclass=\"dualInput\"\r\n*ngIf=\"!isTemporalOperator() && ['lowerBoundary','begin'].indexOf(detectProperty(1)) !== -1\"\r\n(mouseenter)=\"inputClearable = 'selectProperty1'\"\r\n(mouseleave)=\"inputClearable = undefined\"\r\n[floatLabel]=\"floatLabel\">\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]=\"detectProperty(1) === 'lowerBoundary' ? currentFilter.lowerBoundary : currentFilter.begin\"\r\n      (input)=\"updateValuesList($event.target.value,1)\">\r\n    <mat-autocomplete #autoDualValueOperator1=\"matAutocomplete\"\r\n      (optionSelected)=\"changeNumericProperty($event.option.value,1)\">\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        {{value}}\r\n      </mat-option>\r\n    </mat-autocomplete>\r\n    <button mat-button\r\n      *ngIf=\"isClearable(1) && inputClearable === 'selectProperty1' && currentFilter.active\"\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          <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=\"!isTemporalOperator() && ['upperBoundary','end'].indexOf(detectProperty(2)) !== -1\"\r\n  (mouseenter)=\"inputClearable = 'selectProperty2'\"\r\n  (mouseleave)=\"inputClearable = undefined\"\r\n  [floatLabel]=\"floatLabel\">\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]=\"detectProperty(2) === 'upperBoundary' ? currentFilter.upperBoundary : currentFilter.end\"\r\n      (input)=\"updateValuesList($event.target.value,2)\">\r\n    <mat-autocomplete #autoDualValueOperator2=\"matAutocomplete\"\r\n      (optionSelected)=\"changeNumericProperty($event.option.value,2)\">\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        {{value}}\r\n      </mat-option>\r\n    </mat-autocomplete>\r\n    <button mat-button\r\n      *ngIf=\"isClearable(2) && inputClearable === 'selectProperty2' && currentFilter.active\"\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          <mat-icon svgIcon=\"close\"></mat-icon>\r\n    </button>\r\n</mat-form-field>\r\n\r\n<igo-ogc-filter-time *ngIf=\"isTemporalOperator()\"\r\n  [(datasource)]=\"datasource\"\r\n  [(currentFilter)]=\"currentFilter\"\r\n  (changeProperty)=\"changeProperty($event.value, $event.pos)\">\r\n</igo-ogc-filter-time>\r\n\r\n<!--\r\nTODO C'EST PERTINENT je crois\r\n<mat-form-field class=\"field\" *ngIf=\"!(currentFilterIsSpatial$ | async) && (fields$| async) && (fields$| async).length === 1 &&  (fields$| async)[0].name === ''\">\r\n<input [disabled]=\"!currentFilter.active\" matInput #fieldPerUser (keyup)=\"changeProperty(currentFilter,'propertyName',fieldPerUser.value)\"\r\n  (blur)=\"changeProperty(currentFilter,'propertyName',fieldPerUser.value)\" [(ngModel)]=\"currentFilter.propertyName\">\r\n<button mat-button *ngIf=\"currentFilter.propertyName\" matSuffix mat-icon-button aria-label=\"Clear\" (click)=\"currentFilter.propertyName=''\">\r\n  <mat-icon svgIcon=\"close\"></mat-icon>\r\n</button>\r\n</mat-form-field>\r\n\r\n\r\n\r\n<mat-checkbox labelPosition='before' (change)=\"changeCaseSensitive($event)\" [(ngModel)]=\"currentFilter.matchCase\">\r\n  {{('igo.geo.operators.caseSensitive') | translate}}\r\n</mat-checkbox>\r\n\r\n</mat-list-item> -->\r\n", styles: [":host{width:100%;padding:5px 10px}::ng-deep .mat-form-field .mat-icon svg{width:1em;height:1em;color:#d3d3d3}.mat-form-field{width:100%}.mat-select-arrow{visibility:hidden}.mat-slide-toggle{margin-top:10px}.logical{flex-flow:column nowrap;width:10%;max-width:45px;margin-left:5px}.logicalHidden{flex-flow:column nowrap;width:10%;visibility:hidden;max-width:45px;margin-left:5px}::ng-deep .logical .mat-select-arrow{visibility:hidden}::ng-deep .logicalHidden .mat-select-arrow{visibility:hidden}.field{width:20%}::ng-deep .field .mat-select-arrow{visibility:hidden}.operator{width:12%;margin-left:10px;text-align:center}::ng-deep .operator .mat-select-arrow{visibility:hidden}.spatialSelector{width:15%;margin-left:5px}::ng-deep .spatialSelector .mat-select-arrow{visibility:hidden}.singleInput{width:30%;margin-left:5px}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){.singleInput{width:27%}}.snrc{width:20%;margin-left:5px}::ng-deep .singleInput .mat-select-arrow{visibility:hidden}.dualInput{width:20%;margin-left:5px}::ng-deep .dualInput .mat-select-arrow{visibility:hidden}.igo-layer-button-group{display:flex;float:right;padding-top:5px}.container{display:flex}\n"] }]
     }], function () { return [{ type: WktService }]; }, { refreshFilters: [{
             type: Input
         }], datasource: [{
@@ -24843,7 +25671,7 @@ OgcFilterableFormComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
     } }, encapsulation: 2 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(OgcFilterableFormComponent, [{
         type: Component,
-        args: [{ selector: 'igo-ogc-filterable-form', template: "<igo-ogc-filter-selection\n  *ngIf=\"!advancedOgcFilters\"\n  igoListItem\n  [refreshFilters]=\"refreshFunc\"\n  [datasource]=\"datasource\"\n  [map]=\"map\"\n  [currentFilter]=\"currentFilter\">\n</igo-ogc-filter-selection>\n\n<ng-template \n*ngIf=\"advancedOgcFilters && datasource.options.ogcFilters.editable\"\nngFor let-currentFilter \n[ngForOf]=\"datasource.options.ogcFilters.interfaceOgcFilters\">\n<igo-ogc-filter-form\n  [currentFilter]=\"currentFilter\"\n  [refreshFilters]=\"refreshFunc\"\n  [datasource]=\"datasource\"\n  [map]=\"map\">\n</igo-ogc-filter-form>\n</ng-template>" }]
+        args: [{ selector: 'igo-ogc-filterable-form', template: "<igo-ogc-filter-selection\r\n  *ngIf=\"!advancedOgcFilters\"\r\n  igoListItem\r\n  [refreshFilters]=\"refreshFunc\"\r\n  [datasource]=\"datasource\"\r\n  [map]=\"map\"\r\n  [currentFilter]=\"currentFilter\">\r\n</igo-ogc-filter-selection>\r\n\r\n<ng-template \r\n*ngIf=\"advancedOgcFilters && datasource.options.ogcFilters.editable\"\r\nngFor let-currentFilter \r\n[ngForOf]=\"datasource.options.ogcFilters.interfaceOgcFilters\">\r\n<igo-ogc-filter-form\r\n  [currentFilter]=\"currentFilter\"\r\n  [refreshFilters]=\"refreshFunc\"\r\n  [datasource]=\"datasource\"\r\n  [map]=\"map\">\r\n</igo-ogc-filter-form>\r\n</ng-template>" }]
     }], function () { return []; }, { datasource: [{
             type: Input
         }], map: [{
@@ -25144,7 +25972,7 @@ OgcFilterableItemComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
     } }, styles: ["[_nghost-%COMP%]{overflow:hidden}.advancedOgcFilters[_ngcontent-%COMP%]{text-align:center;width:100%;display:inline-block}.mat-list-item[_ngcontent-%COMP%]{height:auto}.igo-layer-legend-container[_ngcontent-%COMP%]{padding-left:1.125em;width:calc(100% - 18px)}mat-icon.disabled[_ngcontent-%COMP%]{color:#00000061}.separate-item[_ngcontent-%COMP%]{border-bottom:4px solid darkgrey}"] });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(OgcFilterableItemComponent, [{
         type: Component,
-        args: [{ selector: 'igo-ogc-filterable-item', template: "<div [ngClass]=\"{'separate-item' : header === true}\" >\n  <mat-list-item>\n    <mat-icon\n      *ngIf=\"header\"\n      class=\"igo-chevron\"\n      mat-list-avatar\n      igoCollapse [target]=\"ogcFilters\"\n      [collapsed]=\"filtersCollapsed\"\n      (click)=\"toggleFiltersCollapsed()\"\n      svgIcon=\"chevron-up\">\n    </mat-icon>\n    <h4 (click)=\"toggleLegendOnClick()\" *ngIf=\"header\" [ngStyle]=\"{'cursor': filtersCollapsed ? 'default' : 'pointer'}\" matLine [matTooltip]=\"layer.title\" matTooltipShowDelay=\"500\">{{layer.title}}</h4>\n      <button *ngIf=\"isAdvancedOgcFilters() && filtersAreEditable\" [disabled]=\"addFilterDisabled()\" mat-icon-button tooltip-position=\"below\" matTooltipShowDelay=\"500\"\n        [matTooltip]=\"'igo.geo.filter.addFilter' | translate\" [color]=\"color\" (click)=\"addFilterToSequence()\">\n        <mat-icon svgIcon=\"plus\"></mat-icon>\n      </button>\n      <button *ngIf=\"header\"\n        mat-icon-button\n        [color]=\"layer.visible ? 'primary' : 'default'\"\n        collapsibleButton\n        tooltip-position=\"below\"\n        matTooltipShowDelay=\"500\"\n        [matTooltip]=\"layer.visible ?\n                      ('igo.geo.layer.hideLayer' | translate) :\n                      ('igo.geo.layer.showLayer' | translate)\"\n        (click)=\"layer.visible = !layer.visible\">\n        <mat-icon\n          [ngClass]=\"{disabled: (inResolutionRange$ | async)===false}\"\n          [svgIcon]=\"layer.visible ? 'eye' : 'eye-off'\">\n        </mat-icon>\n      </button>\n  </mat-list-item>\n\n  <div #ogcFilters>\n      <div *ngIf=\"header\" #legend class=\"igo-layer-legend-container\">\n        <igo-layer-legend *ngIf=\"showLegend$ | async\" [layer]=\"layer\">\n        </igo-layer-legend>\n      </div>\n    <igo-ogc-filterable-form [datasource]=\"datasource\" [map]=\"map\" [refreshFilters]=\"refreshFunc\">\n    </igo-ogc-filterable-form>\n\n    <section *ngIf=\"hasSelector && filtersAreEditable\" class=\"mat-typography advancedOgcFilters\">\n      <mat-divider></mat-divider>\n      <mat-checkbox labelPosition='before' (change)=\"changeOgcFilterType($event)\"\n        [(ngModel)]=\"datasource.options.ogcFilters.advancedOgcFilters\">\n        {{'igo.geo.filter.advancedOgcFilters' | translate}}\n      </mat-checkbox>\n    </section>\n  </div>\n</div>", styles: [":host{overflow:hidden}.advancedOgcFilters{text-align:center;width:100%;display:inline-block}.mat-list-item{height:auto}.igo-layer-legend-container{padding-left:1.125em;width:calc(100% - 18px)}mat-icon.disabled{color:#00000061}.separate-item{border-bottom:4px solid darkgrey}\n"] }]
+        args: [{ selector: 'igo-ogc-filterable-item', template: "<div [ngClass]=\"{'separate-item' : header === true}\" >\r\n  <mat-list-item>\r\n    <mat-icon\r\n      *ngIf=\"header\"\r\n      class=\"igo-chevron\"\r\n      mat-list-avatar\r\n      igoCollapse [target]=\"ogcFilters\"\r\n      [collapsed]=\"filtersCollapsed\"\r\n      (click)=\"toggleFiltersCollapsed()\"\r\n      svgIcon=\"chevron-up\">\r\n    </mat-icon>\r\n    <h4 (click)=\"toggleLegendOnClick()\" *ngIf=\"header\" [ngStyle]=\"{'cursor': filtersCollapsed ? 'default' : 'pointer'}\" matLine [matTooltip]=\"layer.title\" matTooltipShowDelay=\"500\">{{layer.title}}</h4>\r\n      <button *ngIf=\"isAdvancedOgcFilters() && filtersAreEditable\" [disabled]=\"addFilterDisabled()\" mat-icon-button tooltip-position=\"below\" matTooltipShowDelay=\"500\"\r\n        [matTooltip]=\"'igo.geo.filter.addFilter' | translate\" [color]=\"color\" (click)=\"addFilterToSequence()\">\r\n        <mat-icon svgIcon=\"plus\"></mat-icon>\r\n      </button>\r\n      <button *ngIf=\"header\"\r\n        mat-icon-button\r\n        [color]=\"layer.visible ? 'primary' : 'default'\"\r\n        collapsibleButton\r\n        tooltip-position=\"below\"\r\n        matTooltipShowDelay=\"500\"\r\n        [matTooltip]=\"layer.visible ?\r\n                      ('igo.geo.layer.hideLayer' | translate) :\r\n                      ('igo.geo.layer.showLayer' | translate)\"\r\n        (click)=\"layer.visible = !layer.visible\">\r\n        <mat-icon\r\n          [ngClass]=\"{disabled: (inResolutionRange$ | async)===false}\"\r\n          [svgIcon]=\"layer.visible ? 'eye' : 'eye-off'\">\r\n        </mat-icon>\r\n      </button>\r\n  </mat-list-item>\r\n\r\n  <div #ogcFilters>\r\n      <div *ngIf=\"header\" #legend class=\"igo-layer-legend-container\">\r\n        <igo-layer-legend *ngIf=\"showLegend$ | async\" [layer]=\"layer\">\r\n        </igo-layer-legend>\r\n      </div>\r\n    <igo-ogc-filterable-form [datasource]=\"datasource\" [map]=\"map\" [refreshFilters]=\"refreshFunc\">\r\n    </igo-ogc-filterable-form>\r\n\r\n    <section *ngIf=\"hasSelector && filtersAreEditable\" class=\"mat-typography advancedOgcFilters\">\r\n      <mat-divider></mat-divider>\r\n      <mat-checkbox labelPosition='before' (change)=\"changeOgcFilterType($event)\"\r\n        [(ngModel)]=\"datasource.options.ogcFilters.advancedOgcFilters\">\r\n        {{'igo.geo.filter.advancedOgcFilters' | translate}}\r\n      </mat-checkbox>\r\n    </section>\r\n  </div>\r\n</div>", styles: [":host{overflow:hidden}.advancedOgcFilters{text-align:center;width:100%;display:inline-block}.mat-list-item{height:auto}.igo-layer-legend-container{padding-left:1.125em;width:calc(100% - 18px)}mat-icon.disabled{color:#00000061}.separate-item{border-bottom:4px solid darkgrey}\n"] }]
     }], function () { return [{ type: OGCFilterService }]; }, { layer: [{
             type: Input
         }], map: [{
@@ -25188,7 +26016,7 @@ OgcFilterableListComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
     } }, styles: ["#no-layer-message[_ngcontent-%COMP%]{padding:7%;text-align:center;font-size:medium;font-weight:700}"], changeDetection: 0 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(OgcFilterableListComponent, [{
         type: Component,
-        args: [{ selector: 'igo-ogc-filterable-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "\n<igo-list [navigation]=\"false\" [selection]=\"false\">\n  <div  id=\"no-layer-message\" *ngIf=\"(layers | filterableDataSource : 'ogc').length === 0\">{{'igo.geo.filter.noFilterableLayer' | translate}}</div>\n  <ng-template ngFor let-layer [ngForOf]=\"layers | filterableDataSource: 'ogc'\">\n    <igo-ogc-filterable-item igoListItem [header]=\"true\" [layer]=\"layer\" \n    [map]=\"layer.map\" ></igo-ogc-filterable-item>\n  </ng-template>\n</igo-list>\n", styles: ["#no-layer-message{padding:7%;text-align:center;font-size:medium;font-weight:700}\n"] }]
+        args: [{ selector: 'igo-ogc-filterable-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "\r\n<igo-list [navigation]=\"false\" [selection]=\"false\">\r\n  <div  id=\"no-layer-message\" *ngIf=\"(layers | filterableDataSource : 'ogc').length === 0\">{{'igo.geo.filter.noFilterableLayer' | translate}}</div>\r\n  <ng-template ngFor let-layer [ngForOf]=\"layers | filterableDataSource: 'ogc'\">\r\n    <igo-ogc-filterable-item igoListItem [header]=\"true\" [layer]=\"layer\" \r\n    [map]=\"layer.map\" ></igo-ogc-filterable-item>\r\n  </ng-template>\r\n</igo-list>\r\n", styles: ["#no-layer-message{padding:7%;text-align:center;font-size:medium;font-weight:700}\n"] }]
     }], function () { return []; }, { layers: [{
             type: Input
         }], map: [{
@@ -25349,7 +26177,7 @@ OgcFilterButtonComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Og
     } }, changeDetection: 0 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(OgcFilterButtonComponent, [{
         type: Component,
-        args: [{ selector: 'igo-ogc-filter-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  *ngIf=\"header && options.ogcFilters && options.ogcFilters.enabled &&\n  (options.ogcFilters.pushButtons || options.ogcFilters.checkboxes || options.ogcFilters.radioButtons || options.ogcFilters.select || options.ogcFilters.autocomplete\n    || options.ogcFilters.editable)\"\n  mat-icon-button\n  collapsibleButton\n  tooltip-position=\"below\"\n  matTooltipShowDelay=\"500\"\n  [matTooltip]=\"'igo.geo.filter.filterBy' | translate\"\n  [color]=\"color\">\n  <mat-icon [matBadge]=\"badge\" matBadgeColor=\"warn\" matBadgeSize=\"medium\" svgIcon=\"filter\"></mat-icon>\n</button>\n\n<div #ogcFilter class=\"igo-layer-actions-container\"\n*ngIf=\"options.ogcFilters && options.ogcFilters.enabled &&\n(options.ogcFilters.pushButtons || options.ogcFilters.checkboxes || options.ogcFilters.radioButtons || options.ogcFilters.select || options.ogcFilters.autocomplete\n  || options.ogcFilters.editable)\">\n  <igo-ogc-filterable-item\n    *ngIf=\"ogcFilterCollapse && options.ogcFilters.enabled\"\n    igoListItem\n    [header]=\"false\"\n    [map]=\"layer.map\"\n    [layer]=\"layer\">\n  </igo-ogc-filterable-item>\n</div>\n" }]
+        args: [{ selector: 'igo-ogc-filter-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\r\n  *ngIf=\"header && options.ogcFilters && options.ogcFilters.enabled &&\r\n  (options.ogcFilters.pushButtons || options.ogcFilters.checkboxes || options.ogcFilters.radioButtons || options.ogcFilters.select || options.ogcFilters.autocomplete\r\n    || options.ogcFilters.editable)\"\r\n  mat-icon-button\r\n  collapsibleButton\r\n  tooltip-position=\"below\"\r\n  matTooltipShowDelay=\"500\"\r\n  [matTooltip]=\"'igo.geo.filter.filterBy' | translate\"\r\n  [color]=\"color\">\r\n  <mat-icon [matBadge]=\"badge\" matBadgeColor=\"warn\" matBadgeSize=\"medium\" svgIcon=\"filter\"></mat-icon>\r\n</button>\r\n\r\n<div #ogcFilter class=\"igo-layer-actions-container\"\r\n*ngIf=\"options.ogcFilters && options.ogcFilters.enabled &&\r\n(options.ogcFilters.pushButtons || options.ogcFilters.checkboxes || options.ogcFilters.radioButtons || options.ogcFilters.select || options.ogcFilters.autocomplete\r\n  || options.ogcFilters.editable)\">\r\n  <igo-ogc-filterable-item\r\n    *ngIf=\"ogcFilterCollapse && options.ogcFilters.enabled\"\r\n    igoListItem\r\n    [header]=\"false\"\r\n    [map]=\"layer.map\"\r\n    [layer]=\"layer\">\r\n  </igo-ogc-filterable-item>\r\n</div>\r\n" }]
     }], function () { return []; }, { layer: [{
             type: Input
         }], map: [{
@@ -26699,7 +27527,7 @@ OgcFilterSelectionComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
     } }, styles: [".mat-button-toggle-group[_ngcontent-%COMP%]{margin:5px;flex-wrap:wrap;box-shadow:none!important;width:95%}.checkboxes[_ngcontent-%COMP%]{flex-wrap:wrap;box-shadow:none}.groupsSelector[_ngcontent-%COMP%]{text-align:center}mat-button-toggle[_ngcontent-%COMP%]{display:inline-flex;border:1.5px solid black;border-radius:5px;margin:5px;white-space:normal;min-height:40px;height:auto;width:142px}mat-button-toggle[_ngcontent-%COMP%]     .mat-button-toggle-label-content{line-height:inherit;font-size:small;display:block}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){mat-button-toggle[_ngcontent-%COMP%]{width:45%}}  .material-tooltip{white-space:pre-wrap}mat-checkbox[_ngcontent-%COMP%], mat-radio-button[_ngcontent-%COMP%]{margin:7px;width:95%;display:inline-flex;font-size:larger}mat-checkbox[_ngcontent-%COMP%]     label, mat-radio-button[_ngcontent-%COMP%]     label{white-space:normal}mat-checkbox[_ngcontent-%COMP%]{vertical-align:middle}mat-button[_ngcontent-%COMP%]{padding-right:10px;cursor:pointer}h4[_ngcontent-%COMP%]{margin:7px;text-align:left}u[_ngcontent-%COMP%]{cursor:pointer;color:#00f;margin:5px}p[_ngcontent-%COMP%]{margin:0;margin:initial}"] });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(OgcFilterSelectionComponent, [{
         type: Component,
-        args: [{ selector: 'igo-ogc-filter-selection', providers: [DOMService], template: "<form [formGroup]=\"form\">\n  <div *ngFor=\"let selector of ogcFiltersSelectors\">\n    <div class=\"pushButtonGroups\" *ngIf=\"selector.selectorType === 'pushButton'\">\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\" tooltip-position=\"below\" matTooltipShowDelay=\"500\"\n            [(value)]=\"currentPushButtonsGroup\">\n            <mat-option *ngFor=\"let selectorGroup of getPushButtonsGroups()\"\n              [value]=\"selectorGroup\">{{selectorGroup.title}}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n      <ng-container *ngFor=\"let bundle of currentPushButtonsGroup.computedSelectors\">\n        <h4>{{bundle.title}}</h4>\n        <mat-button-toggle-group\n          formControlName=\"pushButtons\" class=\"mat-typography\" appearance=\"legacy\" vertical={{bundleIsVertical(bundle)}} multiple=\"true\">\n          <mat-button-toggle *ngFor=\"let ogcPushButton of bundle.selectors\"\n            [matTooltip]=\"getToolTip(ogcPushButton)\" tooltip-position=\"below\" matTooltipShowDelay=\"500\" matTooltipClass=\"material-tooltip\"\n            [ngStyle]=\"getButtonColor(ogcPushButton)\"\n            [checked]=\"ogcPushButton.enabled\" (change)=\"onSelectionChange(ogcPushButton, selector.selectorType)\"\n            [value]=\"ogcPushButton\">{{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\" tooltip-position=\"below\" matTooltipShowDelay=\"500\"\n            [(value)]=\"currentCheckboxesGroup\">\n            <mat-option *ngFor=\"let selectorGroup of getCheckboxesGroups()\"\n              [value]=\"selectorGroup\">{{selectorGroup.title}}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n      <ng-container *ngFor=\"let bundle of currentCheckboxesGroup.computedSelectors\">\n        <h4>{{bundle.title}}</h4>\n        <div class=\"checkboxes mat-typography\">\n          <mat-checkbox *ngFor=\"let ogcCheckbox of bundle.selectors\"\n            [matTooltip]=\"getToolTip(ogcCheckbox)\" tooltip-position=\"below\" matTooltipShowDelay=\"500\"  matTooltipClass=\"material-tooltip\"\n            [checked]=\"ogcCheckbox.enabled\" (change)=\"onSelectionChange(ogcCheckbox, selector.selectorType)\"\n            [value]=\"ogcCheckbox\">{{ogcCheckbox.title}}\n          </mat-checkbox>\n        </div>\n        <p *ngIf=\"isLessResults(bundle, 'checkbox') || isMoreResults(bundle, 'checkbox')\">\n          <u *ngIf=\"isLessResults(bundle, 'checkbox')\"\n            class=\"lessResults mat-typography\"\n            (click)=\"displayLessResults('checkbox')\">{{ 'igo.geo.filter.displayLessResults' | translate }}\n          </u>\n          <u *ngIf=\"isMoreResults(bundle, 'checkbox')\"\n            class=\"moreResults mat-typography\"\n            (click)=\"displayMoreResults('checkbox')\">{{ 'igo.geo.filter.displayMoreResults' | translate }}\n          </u>\n        </p>\n      </ng-container>\n    </div>\n\n    <div class=\"radioButtonGroups\" *ngIf=\"selector.selectorType === 'radioButton'\">\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\" tooltip-position=\"below\" matTooltipShowDelay=\"500\"\n            [(value)]=\"currentRadioButtonsGroup\">\n            <mat-option *ngFor=\"let selectorGroup of getRadioButtonsGroups()\"\n              [value]=\"selectorGroup\">{{selectorGroup.title}}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n      <ng-container *ngFor=\"let bundle of currentRadioButtonsGroup.computedSelectors\">\n        <h4>{{bundle.title}}</h4>\n        <mat-radio-group\n          formControlName=\"radioButtons\" class=\"mat-typography\">\n          <mat-radio-button *ngIf=\"bundle.unfiltered\"\n            [matTooltip]=\"'igo.geo.filter.resetFilters' | translate\" tooltip-position=\"below\" matTooltipShowDelay=\"500\"  matTooltipClass=\"material-tooltip\"\n            (change)=\"emptyRadioButtons()\">{{ 'igo.geo.filter.resetFilters' | translate }}\n          </mat-radio-button>\n          <mat-radio-button *ngFor=\"let ogcRadioButton of bundle.selectors\"\n            [matTooltip]=\"getToolTip(ogcRadioButton)\" tooltip-position=\"below\" matTooltipShowDelay=\"500\"  matTooltipClass=\"material-tooltip\"\n            [checked]=\"ogcRadioButton.enabled\" (change)=\"onSelectionChange(ogcRadioButton, selector.selectorType)\"\n            [value]=\"ogcRadioButton\">{{ogcRadioButton.title}}\n          </mat-radio-button>\n          <p *ngIf=\"isLessResults(bundle, 'radio') || isMoreResults(bundle, 'radio')\">\n            <u *ngIf=\"isLessResults(bundle, 'radio')\"\n              class=\"lessResults mat-typography\"\n              (click)=\"displayLessResults('radio')\">{{ 'igo.geo.filter.displayLessResults' | translate }}\n            </u>\n            <u *ngIf=\"isMoreResults(bundle, 'radio')\"\n              class=\"moreResults mat-typography\"\n              (click)=\"displayMoreResults('radio')\">{{ '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\" tooltip-position=\"below\" matTooltipShowDelay=\"500\"\n            [(value)]=\"currentSelectGroup\">\n            <mat-option *ngFor=\"let selectorGroup of getSelectGroups()\"\n              [value]=\"selectorGroup\">{{selectorGroup.title}}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n      <ng-container *ngFor=\"let bundle of currentSelectGroup.computedSelectors\">\n        <h4>{{bundle.title}}</h4>\n        <div class=\"groupsSelector\">\n          <mat-button *ngIf=\"bundle.unfiltered && !bundle.multiple\"\n            mat-icon-button\n            color=\"warn\"\n            [matTooltip]=\"'igo.geo.filter.resetFilters' | translate\" tooltip-position=\"below\" matTooltipShowDelay=\"500\"  matTooltipClass=\"material-tooltip\"\n            (click)=\"emptySelect()\">\n            <mat-icon svgIcon=\"filter-remove\"></mat-icon>\n          </mat-button>\n          <mat-form-field [style.width.%]=\"bundle.width ? bundle.width : undefined\">\n            <div *ngIf=\"bundle.multiple; else notMulti\">\n              <mat-select\n                #selection [multiple]=\"bundle.multiple\" [placeholder]=\"bundle.title\" formControlName=\"selectMulti\">\n                <div class=\"checkboxes mat-typography\">\n                  <mat-checkbox *ngIf=\"bundle.multiple\"\n                    [(ngModel)]=\"selectAllSelected\" [ngModelOptions]=\"{standalone: true}\"\n                    (change)=\"toggleAllSelection()\">Tous\n                  </mat-checkbox>\n                </div>\n                <mat-option *ngFor=\"let ogcSelect of bundle.selectors\"\n                  [matTooltip]=\"getToolTip(ogcSelect)\" tooltip-position=\"below\" matTooltipDelay=\"500\" matTooltipClass=\"material-tooltip\"\n                  (onSelectionChange)=\"selectOptionClick($event.source.value, bundle, $event)\"\n                  [value]=\"ogcSelect\">{{ogcSelect.title}}\n                </mat-option>\n              </mat-select>\n            </div>\n            <ng-template #notMulti>\n              <mat-select\n                [placeholder]=\"bundle.title\" formControlName=\"select\">\n                <mat-option *ngFor=\"let ogcSelect of bundle.selectors\"\n                  [matTooltip]=\"getToolTip(ogcSelect)\" tooltip-position=\"below\" matTooltipDelay=\"500\" matTooltipClass=\"material-tooltip\"\n                  [value]=\"ogcSelect\" (onSelectionChange)=\"selectOptionClick($event.source.value, bundle)\">{{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 class=\"autocompleteGroups\" *ngIf=\"selector.selectorType === 'autocomplete'\">\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\" tooltip-position=\"below\" matTooltipShowDelay=\"500\"\n            [(value)]=\"currentAutocompleteGroup\">\n            <mat-option *ngFor=\"let autocompleteGroup of getAutocompleteGroups()\"\n              [value]=\"autocompleteGroup\">{{autocompleteGroup.title}}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n      <ng-container *ngFor=\"let bundle of currentAutocompleteGroup.computedSelectors\">\n        <h4>{{bundle.title}}</h4>\n        <div class=\"groupsSelector\">\n          <mat-button *ngIf=\"bundle.unfiltered\"\n            mat-icon-button\n            color=\"warn\"\n            [matTooltip]=\"'igo.geo.filter.resetFilters' | translate\" tooltip-position=\"below\" matTooltipShowDelay=\"500\"  matTooltipClass=\"material-tooltip\"\n            (click)=\"emptyAutocomplete()\">\n            <mat-icon svgIcon=\"filter-remove\"></mat-icon>\n          </mat-button>\n          <mat-form-field *ngIf=\"filteredOgcAutocomplete[bundle.id]\" [style.width.%]=\"bundle.width ? bundle.width : undefined\">\n            <input matInput type=\"text\" formControlName=\"autocomplete\" #autocomplete class=\"autocomplete\"\n              [matAutocomplete]=\"auto\" [placeholder]=\"bundle.title\">\n              <mat-autocomplete #auto=\"matAutocomplete\" #autocomplete (optionSelected)=\"autocompleteOptionClick($event.option.value)\"\n              [displayWith]=\"displayFn\">\n                <mat-option *ngFor=\"let ogcAutocomplete of filteredOgcAutocomplete[bundle.id] | async\" [value]=\"ogcAutocomplete\">\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  <h4 *ngIf=\"!currentFilter.title\">{{ 'igo.geo.filter.reportingDate' | translate }}</h4>\n  <h4 *ngIf=\"currentFilter.title\">{{ currentFilter.title }}</h4>\n  <igo-ogc-filter-time\n    [(datasource)]=\"datasource\"\n    [(currentFilter)]=\"currentFilter\"\n    (changeProperty)=\"changeProperty($event.value, $event.pos)\">\n  </igo-ogc-filter-time>\n</div>", styles: [".mat-button-toggle-group{margin:5px;flex-wrap:wrap;box-shadow:none!important;width:95%}.checkboxes{flex-wrap:wrap;box-shadow:none}.groupsSelector{text-align:center}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}mat-button-toggle ::ng-deep .mat-button-toggle-label-content{line-height:inherit;font-size:small;display:block}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){mat-button-toggle{width:45%}}::ng-deep .material-tooltip{white-space:pre-wrap}mat-checkbox,mat-radio-button{margin:7px;width:95%;display:inline-flex;font-size:larger}mat-checkbox ::ng-deep label,mat-radio-button ::ng-deep label{white-space:normal}mat-checkbox{vertical-align:middle}mat-button{padding-right:10px;cursor:pointer}h4{margin:7px;text-align:left}u{cursor:pointer;color:#00f;margin:5px}p{margin:0;margin:initial}\n"] }]
+        args: [{ selector: 'igo-ogc-filter-selection', providers: [DOMService], template: "<form [formGroup]=\"form\">\r\n  <div *ngFor=\"let selector of ogcFiltersSelectors\">\r\n    <div class=\"pushButtonGroups\" *ngIf=\"selector.selectorType === 'pushButton'\">\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\" tooltip-position=\"below\" matTooltipShowDelay=\"500\"\r\n            [(value)]=\"currentPushButtonsGroup\">\r\n            <mat-option *ngFor=\"let selectorGroup of getPushButtonsGroups()\"\r\n              [value]=\"selectorGroup\">{{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 currentPushButtonsGroup.computedSelectors\">\r\n        <h4>{{bundle.title}}</h4>\r\n        <mat-button-toggle-group\r\n          formControlName=\"pushButtons\" class=\"mat-typography\" appearance=\"legacy\" vertical={{bundleIsVertical(bundle)}} multiple=\"true\">\r\n          <mat-button-toggle *ngFor=\"let ogcPushButton of bundle.selectors\"\r\n            [matTooltip]=\"getToolTip(ogcPushButton)\" tooltip-position=\"below\" matTooltipShowDelay=\"500\" matTooltipClass=\"material-tooltip\"\r\n            [ngStyle]=\"getButtonColor(ogcPushButton)\"\r\n            [checked]=\"ogcPushButton.enabled\" (change)=\"onSelectionChange(ogcPushButton, selector.selectorType)\"\r\n            [value]=\"ogcPushButton\">{{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\" tooltip-position=\"below\" matTooltipShowDelay=\"500\"\r\n            [(value)]=\"currentCheckboxesGroup\">\r\n            <mat-option *ngFor=\"let selectorGroup of getCheckboxesGroups()\"\r\n              [value]=\"selectorGroup\">{{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 currentCheckboxesGroup.computedSelectors\">\r\n        <h4>{{bundle.title}}</h4>\r\n        <div class=\"checkboxes mat-typography\">\r\n          <mat-checkbox *ngFor=\"let ogcCheckbox of bundle.selectors\"\r\n            [matTooltip]=\"getToolTip(ogcCheckbox)\" tooltip-position=\"below\" matTooltipShowDelay=\"500\"  matTooltipClass=\"material-tooltip\"\r\n            [checked]=\"ogcCheckbox.enabled\" (change)=\"onSelectionChange(ogcCheckbox, selector.selectorType)\"\r\n            [value]=\"ogcCheckbox\">{{ogcCheckbox.title}}\r\n          </mat-checkbox>\r\n        </div>\r\n        <p *ngIf=\"isLessResults(bundle, 'checkbox') || isMoreResults(bundle, 'checkbox')\">\r\n          <u *ngIf=\"isLessResults(bundle, 'checkbox')\"\r\n            class=\"lessResults mat-typography\"\r\n            (click)=\"displayLessResults('checkbox')\">{{ 'igo.geo.filter.displayLessResults' | translate }}\r\n          </u>\r\n          <u *ngIf=\"isMoreResults(bundle, 'checkbox')\"\r\n            class=\"moreResults mat-typography\"\r\n            (click)=\"displayMoreResults('checkbox')\">{{ 'igo.geo.filter.displayMoreResults' | translate }}\r\n          </u>\r\n        </p>\r\n      </ng-container>\r\n    </div>\r\n\r\n    <div class=\"radioButtonGroups\" *ngIf=\"selector.selectorType === 'radioButton'\">\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\" tooltip-position=\"below\" matTooltipShowDelay=\"500\"\r\n            [(value)]=\"currentRadioButtonsGroup\">\r\n            <mat-option *ngFor=\"let selectorGroup of getRadioButtonsGroups()\"\r\n              [value]=\"selectorGroup\">{{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 currentRadioButtonsGroup.computedSelectors\">\r\n        <h4>{{bundle.title}}</h4>\r\n        <mat-radio-group\r\n          formControlName=\"radioButtons\" class=\"mat-typography\">\r\n          <mat-radio-button *ngIf=\"bundle.unfiltered\"\r\n            [matTooltip]=\"'igo.geo.filter.resetFilters' | translate\" tooltip-position=\"below\" matTooltipShowDelay=\"500\"  matTooltipClass=\"material-tooltip\"\r\n            (change)=\"emptyRadioButtons()\">{{ 'igo.geo.filter.resetFilters' | translate }}\r\n          </mat-radio-button>\r\n          <mat-radio-button *ngFor=\"let ogcRadioButton of bundle.selectors\"\r\n            [matTooltip]=\"getToolTip(ogcRadioButton)\" tooltip-position=\"below\" matTooltipShowDelay=\"500\"  matTooltipClass=\"material-tooltip\"\r\n            [checked]=\"ogcRadioButton.enabled\" (change)=\"onSelectionChange(ogcRadioButton, selector.selectorType)\"\r\n            [value]=\"ogcRadioButton\">{{ogcRadioButton.title}}\r\n          </mat-radio-button>\r\n          <p *ngIf=\"isLessResults(bundle, 'radio') || isMoreResults(bundle, 'radio')\">\r\n            <u *ngIf=\"isLessResults(bundle, 'radio')\"\r\n              class=\"lessResults mat-typography\"\r\n              (click)=\"displayLessResults('radio')\">{{ 'igo.geo.filter.displayLessResults' | translate }}\r\n            </u>\r\n            <u *ngIf=\"isMoreResults(bundle, 'radio')\"\r\n              class=\"moreResults mat-typography\"\r\n              (click)=\"displayMoreResults('radio')\">{{ '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\" tooltip-position=\"below\" matTooltipShowDelay=\"500\"\r\n            [(value)]=\"currentSelectGroup\">\r\n            <mat-option *ngFor=\"let selectorGroup of getSelectGroups()\"\r\n              [value]=\"selectorGroup\">{{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        <h4>{{bundle.title}}</h4>\r\n        <div class=\"groupsSelector\">\r\n          <mat-button *ngIf=\"bundle.unfiltered && !bundle.multiple\"\r\n            mat-icon-button\r\n            color=\"warn\"\r\n            [matTooltip]=\"'igo.geo.filter.resetFilters' | translate\" tooltip-position=\"below\" matTooltipShowDelay=\"500\"  matTooltipClass=\"material-tooltip\"\r\n            (click)=\"emptySelect()\">\r\n            <mat-icon svgIcon=\"filter-remove\"></mat-icon>\r\n          </mat-button>\r\n          <mat-form-field [style.width.%]=\"bundle.width ? bundle.width : undefined\">\r\n            <div *ngIf=\"bundle.multiple; else notMulti\">\r\n              <mat-select\r\n                #selection [multiple]=\"bundle.multiple\" [placeholder]=\"bundle.title\" formControlName=\"selectMulti\">\r\n                <div class=\"checkboxes mat-typography\">\r\n                  <mat-checkbox *ngIf=\"bundle.multiple\"\r\n                    [(ngModel)]=\"selectAllSelected\" [ngModelOptions]=\"{standalone: true}\"\r\n                    (change)=\"toggleAllSelection()\">Tous\r\n                  </mat-checkbox>\r\n                </div>\r\n                <mat-option *ngFor=\"let ogcSelect of bundle.selectors\"\r\n                  [matTooltip]=\"getToolTip(ogcSelect)\" tooltip-position=\"below\" matTooltipDelay=\"500\" matTooltipClass=\"material-tooltip\"\r\n                  (onSelectionChange)=\"selectOptionClick($event.source.value, bundle, $event)\"\r\n                  [value]=\"ogcSelect\">{{ogcSelect.title}}\r\n                </mat-option>\r\n              </mat-select>\r\n            </div>\r\n            <ng-template #notMulti>\r\n              <mat-select\r\n                [placeholder]=\"bundle.title\" formControlName=\"select\">\r\n                <mat-option *ngFor=\"let ogcSelect of bundle.selectors\"\r\n                  [matTooltip]=\"getToolTip(ogcSelect)\" tooltip-position=\"below\" matTooltipDelay=\"500\" matTooltipClass=\"material-tooltip\"\r\n                  [value]=\"ogcSelect\" (onSelectionChange)=\"selectOptionClick($event.source.value, bundle)\">{{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 class=\"autocompleteGroups\" *ngIf=\"selector.selectorType === 'autocomplete'\">\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\" tooltip-position=\"below\" matTooltipShowDelay=\"500\"\r\n            [(value)]=\"currentAutocompleteGroup\">\r\n            <mat-option *ngFor=\"let autocompleteGroup of getAutocompleteGroups()\"\r\n              [value]=\"autocompleteGroup\">{{autocompleteGroup.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 currentAutocompleteGroup.computedSelectors\">\r\n        <h4>{{bundle.title}}</h4>\r\n        <div class=\"groupsSelector\">\r\n          <mat-button *ngIf=\"bundle.unfiltered\"\r\n            mat-icon-button\r\n            color=\"warn\"\r\n            [matTooltip]=\"'igo.geo.filter.resetFilters' | translate\" tooltip-position=\"below\" matTooltipShowDelay=\"500\"  matTooltipClass=\"material-tooltip\"\r\n            (click)=\"emptyAutocomplete()\">\r\n            <mat-icon svgIcon=\"filter-remove\"></mat-icon>\r\n          </mat-button>\r\n          <mat-form-field *ngIf=\"filteredOgcAutocomplete[bundle.id]\" [style.width.%]=\"bundle.width ? bundle.width : undefined\">\r\n            <input matInput type=\"text\" formControlName=\"autocomplete\" #autocomplete class=\"autocomplete\"\r\n              [matAutocomplete]=\"auto\" [placeholder]=\"bundle.title\">\r\n              <mat-autocomplete #auto=\"matAutocomplete\" #autocomplete (optionSelected)=\"autocompleteOptionClick($event.option.value)\"\r\n              [displayWith]=\"displayFn\">\r\n                <mat-option *ngFor=\"let ogcAutocomplete of filteredOgcAutocomplete[bundle.id] | async\" [value]=\"ogcAutocomplete\">\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  <h4 *ngIf=\"!currentFilter.title\">{{ 'igo.geo.filter.reportingDate' | translate }}</h4>\r\n  <h4 *ngIf=\"currentFilter.title\">{{ currentFilter.title }}</h4>\r\n  <igo-ogc-filter-time\r\n    [(datasource)]=\"datasource\"\r\n    [(currentFilter)]=\"currentFilter\"\r\n    (changeProperty)=\"changeProperty($event.value, $event.pos)\">\r\n  </igo-ogc-filter-time>\r\n</div>", styles: [".mat-button-toggle-group{margin:5px;flex-wrap:wrap;box-shadow:none!important;width:95%}.checkboxes{flex-wrap:wrap;box-shadow:none}.groupsSelector{text-align:center}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}mat-button-toggle ::ng-deep .mat-button-toggle-label-content{line-height:inherit;font-size:small;display:block}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){mat-button-toggle{width:45%}}::ng-deep .material-tooltip{white-space:pre-wrap}mat-checkbox,mat-radio-button{margin:7px;width:95%;display:inline-flex;font-size:larger}mat-checkbox ::ng-deep label,mat-radio-button ::ng-deep label{white-space:normal}mat-checkbox{vertical-align:middle}mat-button{padding-right:10px;cursor:pointer}h4{margin:7px;text-align:left}u{cursor:pointer;color:#00f;margin:5px}p{margin:0;margin:initial}\n"] }]
     }], function () { return [{ type: OGCFilterService }, { type: i2$2.UntypedFormBuilder }, { type: i5$1.DOMService }, { type: i2$1.ConfigService }, { type: i0.ChangeDetectorRef }]; }, { sel: [{
             type: ViewChild,
             args: ['selection']
@@ -26836,7 +27664,7 @@ SpatialFilterTypeComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
     } }, styles: [".mat-form-field[_ngcontent-%COMP%]{padding:5px;width:95%;margin-left:2px}.mat-tab-group[_ngcontent-%COMP%]     .mat-tab-body-content{overflow:hidden}.mat-tab-group[_ngcontent-%COMP%]     .mat-tab-label{padding:10px}.mat-tab-group[_ngcontent-%COMP%]     .mat-tab-body-wrapper{margin-top:5px}.spatial-type-toggle[_ngcontent-%COMP%]{padding:10px;text-align:center}.spatial-type-toggle[_ngcontent-%COMP%]   mat-button-toggle-group[_ngcontent-%COMP%]{width:50%}.spatial-type-toggle[_ngcontent-%COMP%]   mat-button-toggle-group[_ngcontent-%COMP%]   mat-button-toggle[_ngcontent-%COMP%]{width:50%}"], changeDetection: 0 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SpatialFilterTypeComponent, [{
         type: Component,
-        args: [{ selector: 'igo-spatial-filter-type', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-tab-group\n  [selectedIndex]=\"selectedTypeIndex.value\"\n  (selectedIndexChange)=\"selectedTypeIndex.setValue($event)\"\n  (selectedTabChange)=\"onTypeChange($event)\">\n\n  <mat-tab [label]=\"'igo.geo.spatialFilter.predefined' |\u00A0translate\">\n    <mat-form-field>\n      <mat-label>{{'igo.geo.spatialFilter.searchLabel' | translate}}</mat-label>\n      <mat-select (selectionChange)=\"onSelectionChange()\" [(value)]=\"selectedQueryType\">\n        <mat-option *ngFor=\"let queryType of queryType\" [value]=\"queryType\">\n          {{('igo.geo.terrapi.' + queryType) | translate}}\n        </mat-option>\n      </mat-select>\n    </mat-form-field>\n    <igo-spatial-filter-list\n      [store]=\"store\"\n      [queryType]=\"selectedQueryType\"\n      [zone]=\"zone\"\n      [layers]=\"layers\"\n      (zoneChange)=\"zoneChange.emit($event)\"\n      (zoneWithBufferChange)=\"zoneWithBufferChange.emit($event)\"\n      (bufferChange)=\"bufferChange.emit($event)\"\n      (measureUnitChange)=\"measureUnitChange.emit($event)\">\n    </igo-spatial-filter-list>\n  </mat-tab>\n\n  <mat-tab [label]=\"'igo.geo.spatialFilter.draw' |\u00A0translate\">\n    <div class=\"spatial-type-toggle\">\n      <mat-button-toggle-group\n        [value]=\"activeDrawType\"\n        (change)=\"onDrawTypeChange($event.value)\">\n        <mat-button-toggle [value]=\"spatialType.Polygon\" [matTooltip]=\"'igo.geo.spatialFilter.drawPolygon' |\u00A0translate\">\n            <mat-icon svgIcon=\"pentagon-outline\"></mat-icon>\n        </mat-button-toggle>\n        <mat-button-toggle [value]=\"spatialType.Point\" [matTooltip]=\"'igo.geo.spatialFilter.drawCircle' |\u00A0translate\">\n            <mat-icon svgIcon=\"record-circle-outline\"></mat-icon>\n        </mat-button-toggle>\n      </mat-button-toggle-group>\n    </div>\n  </mat-tab>\n\n</mat-tab-group>\n", styles: [".mat-form-field{padding:5px;width:95%;margin-left:2px}.mat-tab-group ::ng-deep .mat-tab-body-content{overflow:hidden}.mat-tab-group ::ng-deep .mat-tab-label{padding:10px}.mat-tab-group ::ng-deep .mat-tab-body-wrapper{margin-top:5px}.spatial-type-toggle{padding:10px;text-align:center}.spatial-type-toggle mat-button-toggle-group{width:50%}.spatial-type-toggle mat-button-toggle-group mat-button-toggle{width:50%}\n"] }]
+        args: [{ selector: 'igo-spatial-filter-type', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-tab-group\r\n  [selectedIndex]=\"selectedTypeIndex.value\"\r\n  (selectedIndexChange)=\"selectedTypeIndex.setValue($event)\"\r\n  (selectedTabChange)=\"onTypeChange($event)\">\r\n\r\n  <mat-tab [label]=\"'igo.geo.spatialFilter.predefined' |\u00A0translate\">\r\n    <mat-form-field>\r\n      <mat-label>{{'igo.geo.spatialFilter.searchLabel' | translate}}</mat-label>\r\n      <mat-select (selectionChange)=\"onSelectionChange()\" [(value)]=\"selectedQueryType\">\r\n        <mat-option *ngFor=\"let queryType of queryType\" [value]=\"queryType\">\r\n          {{('igo.geo.terrapi.' + queryType) | translate}}\r\n        </mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <igo-spatial-filter-list\r\n      [store]=\"store\"\r\n      [queryType]=\"selectedQueryType\"\r\n      [zone]=\"zone\"\r\n      [layers]=\"layers\"\r\n      (zoneChange)=\"zoneChange.emit($event)\"\r\n      (zoneWithBufferChange)=\"zoneWithBufferChange.emit($event)\"\r\n      (bufferChange)=\"bufferChange.emit($event)\"\r\n      (measureUnitChange)=\"measureUnitChange.emit($event)\">\r\n    </igo-spatial-filter-list>\r\n  </mat-tab>\r\n\r\n  <mat-tab [label]=\"'igo.geo.spatialFilter.draw' |\u00A0translate\">\r\n    <div class=\"spatial-type-toggle\">\r\n      <mat-button-toggle-group\r\n        [value]=\"activeDrawType\"\r\n        (change)=\"onDrawTypeChange($event.value)\">\r\n        <mat-button-toggle [value]=\"spatialType.Polygon\" [matTooltip]=\"'igo.geo.spatialFilter.drawPolygon' |\u00A0translate\">\r\n            <mat-icon svgIcon=\"pentagon-outline\"></mat-icon>\r\n        </mat-button-toggle>\r\n        <mat-button-toggle [value]=\"spatialType.Point\" [matTooltip]=\"'igo.geo.spatialFilter.drawCircle' |\u00A0translate\">\r\n            <mat-icon svgIcon=\"record-circle-outline\"></mat-icon>\r\n        </mat-button-toggle>\r\n      </mat-button-toggle-group>\r\n    </div>\r\n  </mat-tab>\r\n\r\n</mat-tab-group>\r\n", styles: [".mat-form-field{padding:5px;width:95%;margin-left:2px}.mat-tab-group ::ng-deep .mat-tab-body-content{overflow:hidden}.mat-tab-group ::ng-deep .mat-tab-label{padding:10px}.mat-tab-group ::ng-deep .mat-tab-body-wrapper{margin-top:5px}.spatial-type-toggle{padding:10px;text-align:center}.spatial-type-toggle mat-button-toggle-group{width:50%}.spatial-type-toggle mat-button-toggle-group mat-button-toggle{width:50%}\n"] }]
     }], function () { return []; }, { store: [{
             type: Input
         }], selectedQueryType: [{
@@ -27032,7 +27860,7 @@ SpatialFilterListComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
     } }, dependencies: [i1$1.NgForOf, i2$2.ɵNgNoValidate, i2$2.DefaultValueAccessor, i2$2.NumberValueAccessor, i2$2.NgControlStatus, i2$2.NgControlStatusGroup, i2$2.NgForm, i2$2.FormControlDirective, i11$1.MatAutocomplete, i11$1.MatAutocompleteTrigger, i9.MatOption, i13.MatFormField, i14.MatInput, i15.MatSelect, i1$1.AsyncPipe, i7.TranslatePipe], styles: [".buffer-div[_ngcontent-%COMP%]{display:flex;width:100%;margin-left:2px;padding:5px}.zone-list[_ngcontent-%COMP%]{padding:5px;width:95%;margin-left:2px}.buffer[_ngcontent-%COMP%]{display:flex;flex-flow:column nowrap;width:110%}.unit-field[_ngcontent-%COMP%]{width:110px;margin-left:30px}"], changeDetection: 0 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SpatialFilterListComponent, [{
         type: Component,
-        args: [{ selector: 'igo-spatial-filter-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<form class=\"form-list\">\n    <mat-form-field class=\"zone-list\">\n        <input #input type=\"text\" placeholder=\"{{'igo.geo.spatialFilter.listLabel' |\u00A0translate}}\" matInput\n        [formControl]=\"formControl\" [matAutocomplete]=\"auto\">\n        <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"onZoneChange($event.option.value)\"\n        [displayWith]=\"displayFn\">\n            <mat-option *ngFor=\"let entities of this.store.view.all$() | async\" [value]=\"entities\">\n                {{entities.properties.nom}}\n            </mat-option>\n        </mat-autocomplete>\n    </mat-form-field>\n<form>\n\n<div class=\"buffer-div\">\n    <form class=\"buffer-form\">\n        <mat-form-field class=\"buffer\">\n            <input type=\"number\" matInput placeholder=\"{{'igo.geo.spatialFilter.buffer' | translate}}\" [formControl]=\"bufferFormControl\"\n            [value]=\"0\" [readonly]=\"!zone\">\n        </mat-form-field>\n    </form>\n\n    <mat-form-field class=\"unit-field\">\n        <mat-select\n        [value]=\"measureUnit\"\n        (selectionChange)=\"onMeasureUnitChange($event.value)\">\n        <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</div>\n", styles: [".buffer-div{display:flex;width:100%;margin-left:2px;padding:5px}.zone-list{padding:5px;width:95%;margin-left:2px}.buffer{display:flex;flex-flow:column nowrap;width:110%}.unit-field{width:110px;margin-left:30px}\n"] }]
+        args: [{ selector: 'igo-spatial-filter-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<form class=\"form-list\">\r\n    <mat-form-field class=\"zone-list\">\r\n        <input #input type=\"text\" placeholder=\"{{'igo.geo.spatialFilter.listLabel' |\u00A0translate}}\" matInput\r\n        [formControl]=\"formControl\" [matAutocomplete]=\"auto\">\r\n        <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"onZoneChange($event.option.value)\"\r\n        [displayWith]=\"displayFn\">\r\n            <mat-option *ngFor=\"let entities of this.store.view.all$() | async\" [value]=\"entities\">\r\n                {{entities.properties.nom}}\r\n            </mat-option>\r\n        </mat-autocomplete>\r\n    </mat-form-field>\r\n<form>\r\n\r\n<div class=\"buffer-div\">\r\n    <form class=\"buffer-form\">\r\n        <mat-form-field class=\"buffer\">\r\n            <input type=\"number\" matInput placeholder=\"{{'igo.geo.spatialFilter.buffer' | translate}}\" [formControl]=\"bufferFormControl\"\r\n            [value]=\"0\" [readonly]=\"!zone\">\r\n        </mat-form-field>\r\n    </form>\r\n\r\n    <mat-form-field class=\"unit-field\">\r\n        <mat-select\r\n        [value]=\"measureUnit\"\r\n        (selectionChange)=\"onMeasureUnitChange($event.value)\">\r\n        <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</div>\r\n", styles: [".buffer-div{display:flex;width:100%;margin-left:2px;padding:5px}.zone-list{padding:5px;width:95%;margin-left:2px}.buffer{display:flex;flex-flow:column nowrap;width:110%}.unit-field{width:110px;margin-left:30px}\n"] }]
     }], function () { return [{ type: SpatialFilterService }, { type: i2$1.MessageService }, { type: i2$1.LanguageService }]; }, { store: [{
             type: Input
         }], queryType: [{
@@ -27324,6 +28152,7 @@ class SpatialFilterItemComponent {
         this.measureUnitChange = new EventEmitter();
         this.radiusEvent = new EventEmitter();
         this.freehandControl = new EventEmitter();
+        this.predefinedRadius = new EventEmitter();
         this.clearButtonEvent = new EventEmitter();
         this.clearSearchEvent = new EventEmitter();
         this.export = new EventEmitter();
@@ -27791,6 +28620,16 @@ class SpatialFilterItemComponent {
     onfreehandControlChange() {
         this.freehandDrawIsActive = !this.freehandDrawIsActive;
         this.freehandControl.emit(this.freehandDrawIsActive);
+        if (this.isPoint()) {
+            this.predefinedRadius.emit(!this.freehandDrawIsActive);
+            if (this.freehandDrawIsActive) {
+                this.overlayStyle$.next(undefined);
+                this.drawStyle$.next(undefined);
+            }
+        }
+        else {
+            this.predefinedRadius.emit(false);
+        }
     }
     /**
      * Launch search button
@@ -27979,7 +28818,7 @@ class SpatialFilterItemComponent {
     }
 }
 SpatialFilterItemComponent.ɵfac = function SpatialFilterItemComponent_Factory(t) { return new (t || SpatialFilterItemComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(SpatialFilterService), i0.ɵɵdirectiveInject(i2$1.MessageService), i0.ɵɵdirectiveInject(i2$1.LanguageService)); };
-SpatialFilterItemComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SpatialFilterItemComponent, selectors: [["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", clearButtonEvent: "clearButtonEvent", clearSearchEvent: "clearSearchEvent", export: "export", openWorkspace: "openWorkspace", entityChange: "entityChange" }, decls: 29, vars: 42, consts: [[3, "formControl", "map", "geometryType", "drawGuide", "measure", "drawControlIsActive", "freehandDrawIsActive", "drawStyle", "overlayStyle", "radius"], [1, "header"], [3, "checked", "labelPosition", "change", 4, "ngIf"], ["class", "buffer-unit", 4, "ngIf"], ["class", "radius-unit", 4, "ngIf"], [1, "title", "mat-typography"], [3, "value"], [3, "value", "change", 4, "ngFor", "ngForOf"], ["class", "thematics", 4, "ngIf"], [1, "buttons"], ["mat-raised-button", "", "class", "clear-search-button", 3, "disabled", "click", 4, "ngIf"], ["mat-raised-button", "", "class", "clear-form-button", 3, "disabled", "click", 4, "ngIf"], ["mat-raised-button", "", "color", "primary", 1, "search-button", 3, "disabled", "click"], ["mat-raised-button", "", 1, "remove-button", 3, "disabled", "click"], ["mat-raised-button", "", 1, "export-button", 3, "disabled", "click"], ["class", "chevron-down", "mat-icon-button", "", "matTooltipShowDelay", "500", 3, "matTooltip", "click", 4, "ngIf"], ["class", "results", 4, "ngIf"], [3, "checked", "labelPosition", "change"], [1, "buffer-unit"], [1, "buffer-form"], [1, "buffer"], ["type", "number", "matInput", "", 3, "placeholder", "formControl", "value", "readonly"], [1, "unit-field"], [3, "value", "selectionChange"], [3, "value", 4, "ngFor", "ngForOf"], [1, "radius-unit"], [1, "radius-form"], [1, "radius"], ["type", "number", "matInput", "", 3, "placeholder", "formControl", "value", "readonly", "input"], [3, "value", "change"], [1, "thematics"], ["matColumnDef", "name"], ["class", "thematics-header", 4, "matHeaderCellDef"], ["matColumnDef", "select"], ["class", "checks-header", 4, "matHeaderCellDef"], [4, "matHeaderRowDef"], [4, "matRowDef", "matRowDefColumns"], [3, "dataSource", "treeControl"], ["matTreeNodeToggle", "", 4, "matTreeNodeDef"], [4, "matTreeNodeDef", "matTreeNodeDefWhen"], [1, "thematics-header"], [1, "checks-header"], [3, "checked", "indeterminate", "change"], ["matTreeNodeToggle", ""], [1, "mat-tree-node"], ["mat-icon-button", "", "disabled", ""], [1, "tree-check", 3, "checked", "click", "change"], ["mat-icon-button", "", 3, "click"], [3, "svgIcon"], [1, "tree-check-2", 3, "checked", "indeterminate", "change"], [1, "tree-ul"], ["matTreeNodeOutlet", ""], ["mat-raised-button", "", 1, "clear-search-button", 3, "disabled", "click"], ["mat-raised-button", "", 1, "clear-form-button", 3, "disabled", "click"], ["mat-icon-button", "", "matTooltipShowDelay", "500", 1, "chevron-down", 3, "matTooltip", "click"], ["svgIcon", "chevron-down"], [1, "results"], ["mat-icon-button", "", "matTooltipShowDelay", "500", 3, "matTooltip", "click", 4, "ngIf"], [1, "results-list", 3, "template", "store", "entitySelectChange"], ["mat-icon-button", "", "matTooltipShowDelay", "500", 3, "matTooltip", "click"], ["svgIcon", "chevron-up"]], template: function SpatialFilterItemComponent_Template(rf, ctx) { if (rf & 1) {
+SpatialFilterItemComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SpatialFilterItemComponent, selectors: [["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" }, decls: 29, vars: 43, consts: [[3, "formControl", "map", "geometryType", "drawGuide", "measure", "drawControlIsActive", "freehandDrawIsActive", "drawStyle", "overlayStyle", "radius", "predefinedRadius"], [1, "header"], [3, "checked", "labelPosition", "change", 4, "ngIf"], ["class", "buffer-unit", 4, "ngIf"], ["class", "radius-unit", 4, "ngIf"], [1, "title", "mat-typography"], [3, "value"], [3, "value", "change", 4, "ngFor", "ngForOf"], ["class", "thematics", 4, "ngIf"], [1, "buttons"], ["mat-raised-button", "", "class", "clear-search-button", 3, "disabled", "click", 4, "ngIf"], ["mat-raised-button", "", "class", "clear-form-button", 3, "disabled", "click", 4, "ngIf"], ["mat-raised-button", "", "color", "primary", 1, "search-button", 3, "disabled", "click"], ["mat-raised-button", "", 1, "remove-button", 3, "disabled", "click"], ["mat-raised-button", "", 1, "export-button", 3, "disabled", "click"], ["class", "chevron-down", "mat-icon-button", "", "matTooltipShowDelay", "500", 3, "matTooltip", "click", 4, "ngIf"], ["class", "results", 4, "ngIf"], [3, "checked", "labelPosition", "change"], [1, "buffer-unit"], [1, "buffer-form"], [1, "buffer"], ["type", "number", "matInput", "", 3, "placeholder", "formControl", "value", "readonly"], [1, "unit-field"], [3, "value", "selectionChange"], [3, "value", 4, "ngFor", "ngForOf"], [1, "radius-unit"], [1, "radius-form"], [1, "radius"], ["type", "number", "matInput", "", 3, "placeholder", "formControl", "value", "readonly", "input"], [3, "value", "change"], [1, "thematics"], ["matColumnDef", "name"], ["class", "thematics-header", 4, "matHeaderCellDef"], ["matColumnDef", "select"], ["class", "checks-header", 4, "matHeaderCellDef"], [4, "matHeaderRowDef"], [4, "matRowDef", "matRowDefColumns"], [3, "dataSource", "treeControl"], ["matTreeNodeToggle", "", 4, "matTreeNodeDef"], [4, "matTreeNodeDef", "matTreeNodeDefWhen"], [1, "thematics-header"], [1, "checks-header"], [3, "checked", "indeterminate", "change"], ["matTreeNodeToggle", ""], [1, "mat-tree-node"], ["mat-icon-button", "", "disabled", ""], [1, "tree-check", 3, "checked", "click", "change"], ["mat-icon-button", "", 3, "click"], [3, "svgIcon"], [1, "tree-check-2", 3, "checked", "indeterminate", "change"], [1, "tree-ul"], ["matTreeNodeOutlet", ""], ["mat-raised-button", "", 1, "clear-search-button", 3, "disabled", "click"], ["mat-raised-button", "", 1, "clear-form-button", 3, "disabled", "click"], ["mat-icon-button", "", "matTooltipShowDelay", "500", 1, "chevron-down", 3, "matTooltip", "click"], ["svgIcon", "chevron-down"], [1, "results"], ["mat-icon-button", "", "matTooltipShowDelay", "500", 3, "matTooltip", "click", 4, "ngIf"], [1, "results-list", 3, "template", "store", "entitySelectChange"], ["mat-icon-button", "", "matTooltipShowDelay", "500", 3, "matTooltip", "click"], ["svgIcon", "chevron-up"]], template: function SpatialFilterItemComponent_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵelement(0, "igo-geometry-form-field-input", 0);
         i0.ɵɵpipe(1, "async");
         i0.ɵɵpipe(2, "async");
@@ -28019,7 +28858,7 @@ SpatialFilterItemComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
         i0.ɵɵtemplate(27, SpatialFilterItemComponent_button_27_Template, 3, 3, "button", 15);
         i0.ɵɵtemplate(28, SpatialFilterItemComponent_div_28_Template, 3, 3, "div", 16);
     } if (rf & 2) {
-        i0.ɵɵproperty("formControl", ctx.formControl)("map", ctx.map)("geometryType", ctx.geometryType)("drawGuide", i0.ɵɵpipeBind1(1, 28, ctx.drawGuide$))("measure", ctx.measure)("drawControlIsActive", ctx.drawControlIsActive)("freehandDrawIsActive", ctx.freehandDrawIsActive)("drawStyle", i0.ɵɵpipeBind1(2, 30, ctx.drawStyle$))("overlayStyle", i0.ɵɵpipeBind1(3, 32, ctx.overlayStyle$))("radius", ctx.radius);
+        i0.ɵɵproperty("formControl", ctx.formControl)("map", ctx.map)("geometryType", ctx.geometryType)("drawGuide", i0.ɵɵpipeBind1(1, 29, ctx.drawGuide$))("measure", ctx.measure)("drawControlIsActive", ctx.drawControlIsActive)("freehandDrawIsActive", ctx.freehandDrawIsActive)("drawStyle", i0.ɵɵpipeBind1(2, 31, ctx.drawStyle$))("overlayStyle", i0.ɵɵpipeBind1(3, 33, ctx.overlayStyle$))("radius", ctx.radius)("predefinedRadius", ctx.predefinedRadius);
         i0.ɵɵadvance(5);
         i0.ɵɵproperty("ngIf", !ctx.isPredefined());
         i0.ɵɵadvance(1);
@@ -28029,7 +28868,7 @@ SpatialFilterItemComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
         i0.ɵɵadvance(1);
         i0.ɵɵproperty("ngIf", ctx.isPoint());
         i0.ɵɵadvance(2);
-        i0.ɵɵtextInterpolate1("", i0.ɵɵpipeBind1(11, 34, "igo.geo.spatialFilter.search"), " : ");
+        i0.ɵɵtextInterpolate1("", i0.ɵɵpipeBind1(11, 35, "igo.geo.spatialFilter.search"), " : ");
         i0.ɵɵadvance(2);
         i0.ɵɵproperty("value", ctx.selectedItemType);
         i0.ɵɵadvance(1);
@@ -28043,15 +28882,15 @@ SpatialFilterItemComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
         i0.ɵɵadvance(1);
         i0.ɵɵproperty("disabled", ctx.disableSearchButton());
         i0.ɵɵadvance(1);
-        i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(20, 36, "igo.geo.spatialFilter.goSearch"), " ");
+        i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(20, 37, "igo.geo.spatialFilter.goSearch"), " ");
         i0.ɵɵadvance(2);
         i0.ɵɵproperty("disabled", ctx.allLayers.length === 0);
         i0.ɵɵadvance(1);
-        i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(23, 38, "igo.geo.spatialFilter.removeLayer"), " ");
+        i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(23, 39, "igo.geo.spatialFilter.removeLayer"), " ");
         i0.ɵɵadvance(2);
         i0.ɵɵproperty("disabled", !ctx.store.entities$.getValue().length);
         i0.ɵɵadvance(1);
-        i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(26, 40, "igo.geo.spatialFilter.exportLayer"), " ");
+        i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(26, 41, "igo.geo.spatialFilter.exportLayer"), " ");
         i0.ɵɵadvance(2);
         i0.ɵɵproperty("ngIf", ctx.store.all().length && ctx.tableTemplate && !ctx.listIsVisible);
         i0.ɵɵadvance(1);
@@ -28059,7 +28898,7 @@ SpatialFilterItemComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
     } }, styles: [".header[_ngcontent-%COMP%]{margin-top:5px;width:100%}.mat-slide-toggle[_ngcontent-%COMP%]{padding:5px;margin-bottom:15px;width:98%}.mat-slide-toggle[_ngcontent-%COMP%]     .mat-slide-toggle-content{width:calc(100% - 20px)}.title[_ngcontent-%COMP%]{margin-left:5px;font-size:medium;font-size:initial}.mat-radio-group[_ngcontent-%COMP%]{display:flex;flex-direction:column;padding-top:10px}.mat-radio-button[_ngcontent-%COMP%]{display:inline-flex;position:relative;margin-left:16px;margin-top:10px}.mat-form-field[_ngcontent-%COMP%]{margin-top:5px}.mat-column-select[_ngcontent-%COMP%]{overflow:auto}.buttons[_ngcontent-%COMP%]{margin-top:15px}.search-button[_ngcontent-%COMP%]{left:15px;width:46%}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){.search-button[_ngcontent-%COMP%]{left:10px;width:45%;min-height:35px;white-space:normal;line-height:normal}}.export-button[_ngcontent-%COMP%]{left:15px;width:46%;margin-bottom:5px}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){.export-button[_ngcontent-%COMP%]{left:10px;margin-top:10px;width:45%;min-height:35px;white-space:normal;line-height:normal}}.remove-button[_ngcontent-%COMP%]{margin-top:12px;left:5px;width:46%}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){.remove-button[_ngcontent-%COMP%]{margin:0;width:45%;min-height:35px;white-space:normal;line-height:normal}}.clear-form-button[_ngcontent-%COMP%]{left:5px;width:46%}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){.clear-form-button[_ngcontent-%COMP%]{width:45%;min-height:35px;white-space:normal;line-height:normal}}.clear-search-button[_ngcontent-%COMP%]{left:5px;width:46%}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){.clear-search-button[_ngcontent-%COMP%]{width:45%;min-height:35px;white-space:normal;line-height:normal}}.thematics[_ngcontent-%COMP%]{max-height:35%;overflow:auto;margin-top:5px;width:98%}.results[_ngcontent-%COMP%]{overflow:auto;max-height:250px;width:98%}.mat-column-typeResults[_ngcontent-%COMP%]{max-width:100px;margin-right:5px}.buffer-unit[_ngcontent-%COMP%], .radius-unit[_ngcontent-%COMP%]{display:flex;width:100%;margin-left:2px;padding:5px}.radius[_ngcontent-%COMP%], .buffer[_ngcontent-%COMP%]{display:flex;flex-flow:column nowrap;width:110%}.unit-field[_ngcontent-%COMP%]{width:110px;margin-left:30px}.example-tree-invisible[_ngcontent-%COMP%]{display:none}.tree-ul[_ngcontent-%COMP%]{margin:0;padding:0 0 0 20px;list-style-type:none}.tree-check[_ngcontent-%COMP%], .tree-check-2[_ngcontent-%COMP%]{position:relative;margin-left:auto;margin-right:5px}.thematics-header[_ngcontent-%COMP%]{max-width:250px}.checks-header[_ngcontent-%COMP%]{padding:none;max-width:calc(100% - 316px);overflow:hidden}.mat-checkbox[_ngcontent-%COMP%]{padding:5px}.mat-tree-node[_ngcontent-%COMP%]{position:relative;min-height:42px;width:280px}.mat-header-cell[_ngcontent-%COMP%]{height:56px}.results[_ngcontent-%COMP%]{max-height:45%;width:98%}.results[_ngcontent-%COMP%]   igo-entity-table[_ngcontent-%COMP%]     div.table-container{overflow:visible;overflow:initial}"], changeDetection: 0 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SpatialFilterItemComponent, [{
         type: Component,
-        args: [{ selector: 'igo-spatial-filter-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<igo-geometry-form-field-input\n  [formControl]=\"formControl\"\n  [map]=\"map\"\n  [geometryType]=\"geometryType\"\n  [drawGuide]=\"drawGuide$ | async\"\n  [measure]=\"measure\"\n  [drawControlIsActive]=\"drawControlIsActive\"\n  [freehandDrawIsActive]=\"freehandDrawIsActive\"\n  [drawStyle]=\"drawStyle$ | async\"\n  [overlayStyle]=\"overlayStyle$ | async\"\n  [radius]=\"radius\">\n</igo-geometry-form-field-input>\n\n<div class=\"header\">\n    <mat-slide-toggle *ngIf=\"!isPredefined()\"\n      [checked]=\"drawControlIsActive\"\n      [labelPosition]=\"'before'\"\n      (change)=\"onDrawControlChange()\">\n      {{'igo.geo.spatialFilter.drawControl' | translate}}\n    </mat-slide-toggle>\n    <mat-slide-toggle *ngIf=\"!isPredefined()\"\n      [checked]=\"freehandDrawIsActive\"\n      [labelPosition]=\"'before'\"\n      (change)=\"onfreehandControlChange()\">\n      {{'igo.geo.spatialFilter.freehandControl' | translate}}\n    </mat-slide-toggle>\n</div>\n\n<div class=\"buffer-unit\" *ngIf=\"isPolygon()\">\n  <form class=\"buffer-form\">\n    <mat-form-field class=\"buffer\">\n      <input type=\"number\" matInput placeholder=\"{{'igo.geo.spatialFilter.buffer' | translate}}\" [formControl]=\"bufferFormControl\"\n      [value]=\"0\" [readonly]=\"this.formControl.value === null\">\n    </mat-form-field>\n  </form>\n\n  <mat-form-field class=\"unit-field\">\n    <mat-select\n    [value]=\"measureUnit\"\n    (selectionChange)=\"onMeasureUnitChange($event.value)\">\n    <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</div>\n\n<div class=\"radius-unit\" *ngIf=\"isPoint()\">\n  <form class=\"radius-form\">\n    <mat-form-field class=\"radius\">\n      <input type=\"number\" matInput placeholder=\"{{'igo.geo.spatialFilter.radius' | translate}}\" [formControl]=\"radiusFormControl\"\n      [value]=\"1000\" (input)=\"getRadius()\" [readonly]=\"this.freehandDrawIsActive && this.formControl.value === null\">\n    </mat-form-field>\n  </form>\n\n  <mat-form-field class=\"unit-field\">\n    <mat-select\n    [value]=\"measureUnit\"\n    (selectionChange)=\"onMeasureUnitChange($event.value)\">\n    <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</div>\n\n<mat-label class=\"title mat-typography\">{{'igo.geo.spatialFilter.search' | translate}} : </mat-label>\n<mat-radio-group [value]=\"selectedItemType\">\n    <mat-radio-button *ngFor=\"let item of itemType\"\n      [value]=\"item\"\n      (change)=\"onItemTypeChange($event)\">\n      {{'igo.geo.spatialFilter.' + item | translate}}\n    </mat-radio-button>\n</mat-radio-group>\n\n<div class=\"thematics\" *ngIf=\"(selectedItemType==='Thematics' && !tableTemplate) || (selectedItemType==='Thematics' && tableTemplate && !listIsVisible)\">\n  <mat-table>\n      <!-- Name Column -->\n      <ng-container matColumnDef=\"name\">\n        <mat-header-cell *matHeaderCellDef class=\"thematics-header\">{{'igo.geo.spatialFilter.Thematics' | translate}}</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 (change)=\"$event ? masterToggle() : null\"\n                        [checked]=\"isAllSelected()\"\n                        [indeterminate]=\"selectedThematics.hasValue() && !isAllSelected()\">\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\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 class=\"tree-check\" (click)=\"$event.stopPropagation()\"\n                      (change)=\"$event ? onToggleChange(node) : null\"\n                      [checked]=\"selectedThematics.isSelected(node)\">\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\n            (click)=\"onToggleClick(node)\">\n            <mat-icon [svgIcon]=\"treeControl.isExpanded(node) ? 'chevron-down' : 'chevron-right'\"></mat-icon>\n          </button>\n          {{node.name}}\n          <mat-checkbox class=\"tree-check-2\" (change)=\"$event ? childrensToggle(node) : null\"\n                        [checked]=\"isAllSelected(node)\"\n                        [indeterminate]=\"hasChildrenSelected(node) && !isAllSelected(node)\">\n          </mat-checkbox>\n        </div>\n        <ul class=\"tree-ul\" [class.example-tree-invisible]=\"!treeControl.isExpanded(node)\">\n          <ng-container matTreeNodeOutlet></ng-container>\n        </ul>\n    </mat-nested-tree-node>\n\n  </mat-tree>\n</div>\n\n<div class=\"buttons\">\n\n  <button *ngIf=\"isPredefined()\" mat-raised-button class=\"clear-search-button\" [disabled]=\"disabledClearSearch()\"\n    (click)=\"clearSearch()\">\n      {{'igo.geo.spatialFilter.clearSearch' | translate}}\n  </button>\n\n  <button *ngIf=\"isPolygon() || isPoint()\" mat-raised-button class=\"clear-form-button\" [disabled]=\"this.formControl.value === null\"\n    (click)=\"clearDrawZone()\">\n    {{'igo.geo.spatialFilter.clearForm' | translate}}\n  </button>\n\n  <button mat-raised-button class=\"search-button\" [disabled]=\"disableSearchButton()\" color=\"primary\"\n    (click)=\"toggleSearchButton()\">\n    {{'igo.geo.spatialFilter.goSearch' | translate}}\n  </button>\n\n  <button mat-raised-button class=\"remove-button\" [disabled]=\"allLayers.length === 0\" (click)=\"clearButton()\">\n    {{'igo.geo.spatialFilter.removeLayer' | translate}}\n  </button>\n\n  <button mat-raised-button class=\"export-button\" [disabled]=\"!store.entities$.getValue().length\" (click)=\"export.emit()\">\n    {{'igo.geo.spatialFilter.exportLayer' | translate}}\n  </button>\n\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  <mat-icon svgIcon=\"chevron-down\"></mat-icon>\n</button>\n\n<div class=\"results\" *ngIf=\"store.all().length && tableTemplate && listIsVisible\">\n  <button\n    *ngIf=\"listIsVisible\"\n    mat-icon-button\n    matTooltipShowDelay=\"500\"\n    [matTooltip]=\"'igo.geo.spatialFilter.hideSearchResults' | translate\"\n    (click)=\"toggleVisibleList()\">\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  </igo-entity-table>\n</div>\n", styles: [".header{margin-top:5px;width:100%}.mat-slide-toggle{padding:5px;margin-bottom:15px;width:98%}.mat-slide-toggle ::ng-deep .mat-slide-toggle-content{width:calc(100% - 20px)}.title{margin-left:5px;font-size:medium;font-size:initial}.mat-radio-group{display:flex;flex-direction:column;padding-top:10px}.mat-radio-button{display:inline-flex;position:relative;margin-left:16px;margin-top:10px}.mat-form-field{margin-top:5px}.mat-column-select{overflow:auto}.buttons{margin-top:15px}.search-button{left:15px;width:46%}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){.search-button{left:10px;width:45%;min-height:35px;white-space:normal;line-height:normal}}.export-button{left:15px;width:46%;margin-bottom:5px}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){.export-button{left:10px;margin-top:10px;width:45%;min-height:35px;white-space:normal;line-height:normal}}.remove-button{margin-top:12px;left:5px;width:46%}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){.remove-button{margin:0;width:45%;min-height:35px;white-space:normal;line-height:normal}}.clear-form-button{left:5px;width:46%}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){.clear-form-button{width:45%;min-height:35px;white-space:normal;line-height:normal}}.clear-search-button{left:5px;width:46%}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){.clear-search-button{width:45%;min-height:35px;white-space:normal;line-height:normal}}.thematics{max-height:35%;overflow:auto;margin-top:5px;width:98%}.results{overflow:auto;max-height:250px;width:98%}.mat-column-typeResults{max-width:100px;margin-right:5px}.buffer-unit,.radius-unit{display:flex;width:100%;margin-left:2px;padding:5px}.radius,.buffer{display:flex;flex-flow:column nowrap;width:110%}.unit-field{width:110px;margin-left:30px}.example-tree-invisible{display:none}.tree-ul{margin:0;padding:0 0 0 20px;list-style-type:none}.tree-check,.tree-check-2{position:relative;margin-left:auto;margin-right:5px}.thematics-header{max-width:250px}.checks-header{padding:none;max-width:calc(100% - 316px);overflow:hidden}.mat-checkbox{padding:5px}.mat-tree-node{position:relative;min-height:42px;width:280px}.mat-header-cell{height:56px}.results{max-height:45%;width:98%}.results igo-entity-table ::ng-deep div.table-container{overflow:visible;overflow:initial}\n"] }]
+        args: [{ selector: 'igo-spatial-filter-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<igo-geometry-form-field-input\r\n  [formControl]=\"formControl\"\r\n  [map]=\"map\"\r\n  [geometryType]=\"geometryType\"\r\n  [drawGuide]=\"drawGuide$ | async\"\r\n  [measure]=\"measure\"\r\n  [drawControlIsActive]=\"drawControlIsActive\"\r\n  [freehandDrawIsActive]=\"freehandDrawIsActive\"\r\n  [drawStyle]=\"drawStyle$ | async\"\r\n  [overlayStyle]=\"overlayStyle$ | async\"\r\n  [radius]=\"radius\"\r\n  [predefinedRadius]=\"predefinedRadius\">\r\n</igo-geometry-form-field-input>\r\n\r\n<div class=\"header\">\r\n    <mat-slide-toggle *ngIf=\"!isPredefined()\"\r\n      [checked]=\"drawControlIsActive\"\r\n      [labelPosition]=\"'before'\"\r\n      (change)=\"onDrawControlChange()\">\r\n      {{'igo.geo.spatialFilter.drawControl' | translate}}\r\n    </mat-slide-toggle>\r\n    <mat-slide-toggle *ngIf=\"!isPredefined()\"\r\n      [checked]=\"freehandDrawIsActive\"\r\n      [labelPosition]=\"'before'\"\r\n      (change)=\"onfreehandControlChange()\">\r\n      {{'igo.geo.spatialFilter.freehandControl' | translate}}\r\n    </mat-slide-toggle>\r\n</div>\r\n\r\n<div class=\"buffer-unit\" *ngIf=\"isPolygon()\">\r\n  <form class=\"buffer-form\">\r\n    <mat-form-field class=\"buffer\">\r\n      <input type=\"number\" matInput placeholder=\"{{'igo.geo.spatialFilter.buffer' | translate}}\" [formControl]=\"bufferFormControl\"\r\n      [value]=\"0\" [readonly]=\"this.formControl.value === null\">\r\n    </mat-form-field>\r\n  </form>\r\n\r\n  <mat-form-field class=\"unit-field\">\r\n    <mat-select\r\n    [value]=\"measureUnit\"\r\n    (selectionChange)=\"onMeasureUnitChange($event.value)\">\r\n    <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</div>\r\n\r\n<div class=\"radius-unit\" *ngIf=\"isPoint()\">\r\n  <form class=\"radius-form\">\r\n    <mat-form-field class=\"radius\">\r\n      <input type=\"number\" matInput placeholder=\"{{'igo.geo.spatialFilter.radius' | translate}}\" [formControl]=\"radiusFormControl\"\r\n      [value]=\"1000\" (input)=\"getRadius()\" [readonly]=\"this.freehandDrawIsActive && this.formControl.value === null\">\r\n    </mat-form-field>\r\n  </form>\r\n\r\n  <mat-form-field class=\"unit-field\">\r\n    <mat-select\r\n    [value]=\"measureUnit\"\r\n    (selectionChange)=\"onMeasureUnitChange($event.value)\">\r\n    <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</div>\r\n\r\n<mat-label class=\"title mat-typography\">{{'igo.geo.spatialFilter.search' | translate}} : </mat-label>\r\n<mat-radio-group [value]=\"selectedItemType\">\r\n    <mat-radio-button *ngFor=\"let item of itemType\"\r\n      [value]=\"item\"\r\n      (change)=\"onItemTypeChange($event)\">\r\n      {{'igo.geo.spatialFilter.' + item | translate}}\r\n    </mat-radio-button>\r\n</mat-radio-group>\r\n\r\n<div class=\"thematics\" *ngIf=\"(selectedItemType==='Thematics' && !tableTemplate) || (selectedItemType==='Thematics' && tableTemplate && !listIsVisible)\">\r\n  <mat-table>\r\n      <!-- Name Column -->\r\n      <ng-container matColumnDef=\"name\">\r\n        <mat-header-cell *matHeaderCellDef class=\"thematics-header\">{{'igo.geo.spatialFilter.Thematics' | translate}}</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 (change)=\"$event ? masterToggle() : null\"\r\n                        [checked]=\"isAllSelected()\"\r\n                        [indeterminate]=\"selectedThematics.hasValue() && !isAllSelected()\">\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\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 class=\"tree-check\" (click)=\"$event.stopPropagation()\"\r\n                      (change)=\"$event ? onToggleChange(node) : null\"\r\n                      [checked]=\"selectedThematics.isSelected(node)\">\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\r\n            (click)=\"onToggleClick(node)\">\r\n            <mat-icon [svgIcon]=\"treeControl.isExpanded(node) ? 'chevron-down' : 'chevron-right'\"></mat-icon>\r\n          </button>\r\n          {{node.name}}\r\n          <mat-checkbox class=\"tree-check-2\" (change)=\"$event ? childrensToggle(node) : null\"\r\n                        [checked]=\"isAllSelected(node)\"\r\n                        [indeterminate]=\"hasChildrenSelected(node) && !isAllSelected(node)\">\r\n          </mat-checkbox>\r\n        </div>\r\n        <ul class=\"tree-ul\" [class.example-tree-invisible]=\"!treeControl.isExpanded(node)\">\r\n          <ng-container matTreeNodeOutlet></ng-container>\r\n        </ul>\r\n    </mat-nested-tree-node>\r\n\r\n  </mat-tree>\r\n</div>\r\n\r\n<div class=\"buttons\">\r\n\r\n  <button *ngIf=\"isPredefined()\" mat-raised-button class=\"clear-search-button\" [disabled]=\"disabledClearSearch()\"\r\n    (click)=\"clearSearch()\">\r\n      {{'igo.geo.spatialFilter.clearSearch' | translate}}\r\n  </button>\r\n\r\n  <button *ngIf=\"isPolygon() || isPoint()\" mat-raised-button class=\"clear-form-button\" [disabled]=\"this.formControl.value === null\"\r\n    (click)=\"clearDrawZone()\">\r\n    {{'igo.geo.spatialFilter.clearForm' | translate}}\r\n  </button>\r\n\r\n  <button mat-raised-button class=\"search-button\" [disabled]=\"disableSearchButton()\" color=\"primary\"\r\n    (click)=\"toggleSearchButton()\">\r\n    {{'igo.geo.spatialFilter.goSearch' | translate}}\r\n  </button>\r\n\r\n  <button mat-raised-button class=\"remove-button\" [disabled]=\"allLayers.length === 0\" (click)=\"clearButton()\">\r\n    {{'igo.geo.spatialFilter.removeLayer' | translate}}\r\n  </button>\r\n\r\n  <button mat-raised-button class=\"export-button\" [disabled]=\"!store.entities$.getValue().length\" (click)=\"export.emit()\">\r\n    {{'igo.geo.spatialFilter.exportLayer' | translate}}\r\n  </button>\r\n\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  <mat-icon svgIcon=\"chevron-down\"></mat-icon>\r\n</button>\r\n\r\n<div class=\"results\" *ngIf=\"store.all().length && tableTemplate && listIsVisible\">\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  <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  </igo-entity-table>\r\n</div>\r\n", styles: [".header{margin-top:5px;width:100%}.mat-slide-toggle{padding:5px;margin-bottom:15px;width:98%}.mat-slide-toggle ::ng-deep .mat-slide-toggle-content{width:calc(100% - 20px)}.title{margin-left:5px;font-size:medium;font-size:initial}.mat-radio-group{display:flex;flex-direction:column;padding-top:10px}.mat-radio-button{display:inline-flex;position:relative;margin-left:16px;margin-top:10px}.mat-form-field{margin-top:5px}.mat-column-select{overflow:auto}.buttons{margin-top:15px}.search-button{left:15px;width:46%}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){.search-button{left:10px;width:45%;min-height:35px;white-space:normal;line-height:normal}}.export-button{left:15px;width:46%;margin-bottom:5px}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){.export-button{left:10px;margin-top:10px;width:45%;min-height:35px;white-space:normal;line-height:normal}}.remove-button{margin-top:12px;left:5px;width:46%}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){.remove-button{margin:0;width:45%;min-height:35px;white-space:normal;line-height:normal}}.clear-form-button{left:5px;width:46%}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){.clear-form-button{width:45%;min-height:35px;white-space:normal;line-height:normal}}.clear-search-button{left:5px;width:46%}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){.clear-search-button{width:45%;min-height:35px;white-space:normal;line-height:normal}}.thematics{max-height:35%;overflow:auto;margin-top:5px;width:98%}.results{overflow:auto;max-height:250px;width:98%}.mat-column-typeResults{max-width:100px;margin-right:5px}.buffer-unit,.radius-unit{display:flex;width:100%;margin-left:2px;padding:5px}.radius,.buffer{display:flex;flex-flow:column nowrap;width:110%}.unit-field{width:110px;margin-left:30px}.example-tree-invisible{display:none}.tree-ul{margin:0;padding:0 0 0 20px;list-style-type:none}.tree-check,.tree-check-2{position:relative;margin-left:auto;margin-right:5px}.thematics-header{max-width:250px}.checks-header{padding:none;max-width:calc(100% - 316px);overflow:hidden}.mat-checkbox{padding:5px}.mat-tree-node{position:relative;min-height:42px;width:280px}.mat-header-cell{height:56px}.results{max-height:45%;width:98%}.results igo-entity-table ::ng-deep div.table-container{overflow:visible;overflow:initial}\n"] }]
     }], function () { return [{ type: i0.ChangeDetectorRef }, { type: SpatialFilterService }, { type: i2$1.MessageService }, { type: i2$1.LanguageService }]; }, { map: [{
             type: Input
         }], type: [{
@@ -28096,6 +28935,8 @@ SpatialFilterItemComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
             type: Output
         }], freehandControl: [{
             type: Output
+        }], predefinedRadius: [{
+            type: Output
         }], clearButtonEvent: [{
             type: Output
         }], clearSearchEvent: [{
@@ -28952,7 +29793,7 @@ OgcFilterTimeComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: OgcF
     } }, styles: ["input{text-align:center!important;margin:auto 5px!important}.slider-container[_ngcontent-%COMP%]{text-align:center}.datetime-input[_ngcontent-%COMP%]{display:inline-block;width:100px;margin:10px 0 5px 10px}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){.datetime-input[_ngcontent-%COMP%]{width:36%;margin:0}}.date-input[_ngcontent-%COMP%]{width:100px;margin-right:25px}.time-input[_ngcontent-%COMP%]{margin-right:25px}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){.time-input[_ngcontent-%COMP%]{margin-right:5px}}.hour-input[_ngcontent-%COMP%], .minute-input[_ngcontent-%COMP%]{width:35px;margin-left:7px}.year-input[_ngcontent-%COMP%]{width:98px;margin:10px 14px 5px 4px}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){.year-input[_ngcontent-%COMP%]{width:32%;margin:0 0 0 10px}}.year-input-hide[_ngcontent-%COMP%]{width:120px;margin-right:25px;display:none}.year-input-only-year[_ngcontent-%COMP%]{width:120px;margin-right:25px}.reset-button[_ngcontent-%COMP%]{width:25px;padding-left:8px}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){.reset-button[_ngcontent-%COMP%]{padding-left:8px}}.toggle-filter-state[_ngcontent-%COMP%]{padding-left:20px}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){.toggle-filter-state[_ngcontent-%COMP%]{padding-left:12px}}  .datepicker-year   .mat-calendar-arrow{display:none}  .datepicker-year   .mat-calendar-period-button{pointer-events:none}  .datepicker-year   .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover{background-color:#0000001f;border-radius:999px}"] });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(OgcFilterTimeComponent, [{
         type: Component,
-        args: [{ selector: 'igo-ogc-filter-time', template: "<div class=\"datetime-container\">\n  <mat-slide-toggle \n    *ngIf=\"this.currentFilter.sliderOptions?.enabled\"\n    [(ngModel)]=\"sliderMode\"\n    (change)=\"modeChange($event)\">\n    {{'igo.geo.filter.sliderModeTitle' | translate}}\n  </mat-slide-toggle>\n\n  <div class=\"slider-container\" *ngIf=\"sliderMode\">\n    <igo-ogc-filter-time-slider\n      [begin]=\"beginValue\"\n      [max]=\"this.restrictedToStep() ? this.maxDate : this.endValue\"\n      [currentFilter]=\"currentFilter\" \n      [datasource]=\"datasource\"\n      (changeProperty)=\"changePropertyByPass($event)\"\n    >\n    </igo-ogc-filter-time-slider>\n    \n  </div>\n\n  <div *ngIf=\"!sliderMode\">\n\n    <div class=\"year-input-container\" *ngIf=\"calendarTypeYear\">\n      <!-- to emulate a year-picker, 2 input: first input to show user just year and second input hiden and bind \n        with the datepicker  -->\n      <mat-form-field  class=\"year-input\">\n        <mat-label>{{'igo.geo.timeFilter.startYear'| translate}}</mat-label>\n        <input\n          matInput\n          class=\"year-input-only-year\"\n          value=\"{{onlyYearBegin}}\"\n          (change)= \"yearOnlyInputChange($event, beginDatepicker, 'begin')\"\n          [disabled]= \"filterStateDisable\"\n          >\n        <mat-datepicker-toggle matSuffix [for]=\"beginDatepicker\" [disabled]=\"filterStateDisable\"></mat-datepicker-toggle>\n  \n        <mat-datepicker\n          panelClass=\"datepicker-year\"\n          #beginDatepicker\n          [startView]=\"calendarView()\"\n          [startAt]=\"beginValue\"\n          (yearSelected)=\"yearSelected($event, beginDatepicker, 'begin')\"\n          >\n        </mat-datepicker>\n\n        <input #beginYear\n          class= \"year-input-hide\"\n          matInput\n          [matDatepicker]=\"beginDatepicker\"\n          enabled= false\n          readonly= true\n          [value]=\"beginValue?beginValue:handleDate(datasource.options.minDate)\"\n          [min]=\"handleDate(datasource.options.minDate)\"\n          [max]=\"(endValue && (!restrictedToStep()))?endValue:handleDate(datasource.options.maxDate)\"\n          >\n      </mat-form-field>\n\n      <mat-form-field  class=\"year-input\">\n        <mat-label>{{'igo.geo.timeFilter.endYear'| translate}}</mat-label>\n        <input\n          matInput\n          class=\"year-input-only-year\"\n          value=\"{{onlyYearEnd}}\"\n          (change)= \"yearOnlyInputChange($event, endDatepicker, 'end')\"\n          [disabled] = \"filterStateDisable\">\n        <mat-datepicker-toggle matSuffix [for]=\"endDatepicker\" [disabled]=\"filterStateDisable\"></mat-datepicker-toggle>\n        <mat-datepicker\n          panelClass=\"datepicker-year\"\n          #endDatepicker\n          [startView]=\"calendarView()\"\n          [startAt]=\"endValue\"\n          (yearSelected)=\"yearSelected($event, endDatepicker, 'end')\"\n          >\n        </mat-datepicker>\n\n        <input #endYear\n          class= \"year-input-hide\"\n          matInput\n          [matDatepicker]=\"endDatepicker\"\n          enabled= false\n          readonly= true\n          [value]=\"endValue?endValue:handleDate(datasource.options.maxDate)\"\n          [min]=\"beginValue?beginValue:handleDate(datasource.options.minDate)\"\n          [max]=\"handleDate(datasource.options.maxDate)\"\n          >\n      </mat-form-field>\n      <button class=\"reset-button\" \n        mat-icon-button\n        color=\"primary\" \n        (click)=\"resetFilter()\" \n        [matTooltip]=\"'igo.geo.filter.resetFilters' | translate\" \n        [disabled]= \"filterStateDisable\">\n        <mat-icon svgIcon=\"{{resetIcon}}\"></mat-icon>\n      </button>\n      <mat-slide-toggle \n        class='toggle-filter-state' \n        (change)=\"toggleFilterState()\" \n        [matTooltip]=\"'igo.geo.filter.toggleFilterState' | translate\" \n        tooltip-position=\"below\" \n        matTooltipShowDelay=\"500\"\n        [checked]=\"!filterStateDisable\">\n      </mat-slide-toggle>\n\n    </div>\n\n    <div class=\"datetime-input-container\" *ngIf=\"calendarType()!=='year'\">\n      <div class=\"datetime-input\">\n        <mat-form-field class=\"date-input\">\n          <mat-datepicker-toggle matSuffix [for]=\"beginDatepicker\" [disabled]= \"filterStateDisable\"></mat-datepicker-toggle>\n          <input #begin\n            matInput\n            [matDatepicker]=\"beginDatepicker\"\n            [placeholder]=\"'igo.geo.timeFilter.startDate' | translate\"\n            [attr.disabled]=\"!currentFilter.active\"\n            (dateChange)=\"changeTemporalProperty(begin.value, 1)\"\n            [matDatepickerFilter]=\"dateFilter.bind(this, 'begin')\"\n            [value]=\"beginValue?beginValue:handleDate(datasource.options.minDate)\"\n            [min]=\"handleDate(datasource.options.minDate)\"\n            [max]=\"(endValue && (!restrictedToStep()))?endValue:handleDate(datasource.options.maxDate)\" \n            [disabled]= \"filterStateDisable\">\n          <span class=\"filler\"></span>\n          <mat-datepicker\n            #beginDatepicker\n            [startView]=\"calendarView()\"\n            [startAt]=\"beginValue\"\n            (yearSelected)=\"yearSelected($event, beginDatepicker, 'begin')\"\n            (monthSelected)=\"monthSelected($event, beginDatepicker, 'begin')\">\n          </mat-datepicker>\n        </mat-form-field>\n\n        <div class=\"time-input\">\n          <mat-form-field class=\"hour-input\" *ngIf=\"calendarType()==='datetime'\">\n            <mat-label>{{'igo.geo.timeFilter.hour' | translate}}</mat-label>\n            <mat-select\n              [formControl]=\"beginHourFormControl\"\n              [attr.disabled]=\"!currentFilter.active\"\n              (selectionChange)=\"changeTemporalProperty(begin.value, 1)\">\n              <mat-option *ngFor=\"let hour of beginHours\" [value]=\"hour\">{{hour}}</mat-option>\n            </mat-select>\n          </mat-form-field>\n          <mat-form-field class=\"minute-input\" *ngIf=\"calendarType()==='datetime'\">\n            <mat-label>{{'igo.geo.timeFilter.minute' | translate}}</mat-label>\n            <mat-select\n              [formControl]=\"beginMinuteFormControl\"\n              [attr.disabled]=\"!currentFilter.active\"\n              (selectionChange)=\"changeTemporalProperty(begin.value, 1)\">\n              <mat-option *ngFor=\"let minute of beginMinutes\" [value]=\"minute\">{{minute}}</mat-option>\n            </mat-select>\n          </mat-form-field>\n        </div>\n      </div>\n\n      <div class=\"datetime-input\" *ngIf=\"!restrictedToStep()\">\n        <mat-form-field class=\"date-input\">\n          <mat-datepicker-toggle matSuffix [for]=\"endDatepicker\" [disabled]= \"filterStateDisable\"></mat-datepicker-toggle>\n            <input #end\n              matInput\n              [matDatepicker]=\"endDatepicker\"\n              [placeholder]=\"'igo.geo.timeFilter.endDate' | translate\"\n              [attr.disabled]=\"!currentFilter.active\"\n              (dateChange)=\"changeTemporalProperty(end.value, 2)\"\n              [matDatepickerFilter]=\"dateFilter.bind(this, 'end')\"\n              [value]=\"endValue?endValue:handleDate(datasource.options.maxDate)\"\n              [min]=\"beginValue?beginValue:handleDate(datasource.options.minDate)\"\n              [max]=\"handleDate(datasource.options.maxDate)\" \n              [disabled]= \"filterStateDisable\">\n            <span class=\"filler\"></span>\n            <mat-datepicker #endDatepicker\n              [startView]=\"calendarView()\"\n              [startAt]=\"endValue\"\n              (yearSelected)=\"yearSelected($event, endDatepicker, 'end')\"\n              (monthSelected)=\"monthSelected($event, endDatepicker, 'end')\">\n          </mat-datepicker>\n        </mat-form-field>\n\n        <div class=\"time-input\">\n          <mat-form-field class=\"hour-input\" *ngIf=\"calendarType()==='datetime'\" >\n            <mat-label>{{'igo.geo.timeFilter.hour' | translate}}</mat-label>\n            <mat-select\n              [formControl]=\"endHourFormControl\"\n              [attr.disabled]=\"!currentFilter.active\"\n              (selectionChange)=\"changeTemporalProperty(end.value, 2)\">\n              <mat-option *ngFor=\"let hour of endHours\" [value]=\"hour\">{{hour}}</mat-option>\n            </mat-select>\n          </mat-form-field>\n          <mat-form-field class=\"minute-input\" *ngIf=\"calendarType()==='datetime'\">\n            <mat-label>{{'igo.geo.timeFilter.minute' | translate}}</mat-label>\n            <mat-select\n              [formControl]=\"endMinuteFormControl\"\n              [attr.disabled]=\"!currentFilter.active\"\n              (selectionChange)=\"changeTemporalProperty(end.value, 2)\">\n              <mat-option *ngFor=\"let minute of endMinutes\" [value]=\"minute\">{{minute}}</mat-option>\n            </mat-select>\n          </mat-form-field>\n        </div>\n      </div>\n\n      <button class=\"reset-button\" \n        mat-icon-button color=\"primary\"\n        (click)=\"resetFilter()\" \n        [matTooltip]=\"'igo.geo.filter.resetFilters' | translate\" \n        [disabled]= \"filterStateDisable\">\n        <mat-icon svgIcon=\"{{resetIcon}}\"></mat-icon>\n      </button>\n      <mat-slide-toggle \n        class=\"toggle-filter-state\" \n        (change)=\"toggleFilterState()\" \n        tooltip-position=\"below\" \n        matTooltipShowDelay=\"500\"\n        [matTooltip]=\"'igo.geo.filter.toggleFilterState' | translate\" \n        [checked]= \"!filterStateDisable\">\n      </mat-slide-toggle>\n    </div>\n  </div>\n</div>\n", styles: ["::ng-deep input{text-align:center!important;margin:auto 5px!important}.slider-container{text-align:center}.datetime-input{display:inline-block;width:100px;margin:10px 0 5px 10px}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){.datetime-input{width:36%;margin:0}}.date-input{width:100px;margin-right:25px}.time-input{margin-right:25px}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){.time-input{margin-right:5px}}.hour-input,.minute-input{width:35px;margin-left:7px}.year-input{width:98px;margin:10px 14px 5px 4px}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){.year-input{width:32%;margin:0 0 0 10px}}.year-input-hide{width:120px;margin-right:25px;display:none}.year-input-only-year{width:120px;margin-right:25px}.reset-button{width:25px;padding-left:8px}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){.reset-button{padding-left:8px}}.toggle-filter-state{padding-left:20px}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){.toggle-filter-state{padding-left:12px}}::ng-deep .datepicker-year ::ng-deep .mat-calendar-arrow{display:none}::ng-deep .datepicker-year ::ng-deep .mat-calendar-period-button{pointer-events:none}::ng-deep .datepicker-year ::ng-deep .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover{background-color:#0000001f;border-radius:999px}\n"] }]
+        args: [{ selector: 'igo-ogc-filter-time', template: "<div class=\"datetime-container\">\r\n  <mat-slide-toggle \r\n    *ngIf=\"this.currentFilter.sliderOptions?.enabled\"\r\n    [(ngModel)]=\"sliderMode\"\r\n    (change)=\"modeChange($event)\">\r\n    {{'igo.geo.filter.sliderModeTitle' | translate}}\r\n  </mat-slide-toggle>\r\n\r\n  <div class=\"slider-container\" *ngIf=\"sliderMode\">\r\n    <igo-ogc-filter-time-slider\r\n      [begin]=\"beginValue\"\r\n      [max]=\"this.restrictedToStep() ? this.maxDate : this.endValue\"\r\n      [currentFilter]=\"currentFilter\" \r\n      [datasource]=\"datasource\"\r\n      (changeProperty)=\"changePropertyByPass($event)\"\r\n    >\r\n    </igo-ogc-filter-time-slider>\r\n    \r\n  </div>\r\n\r\n  <div *ngIf=\"!sliderMode\">\r\n\r\n    <div class=\"year-input-container\" *ngIf=\"calendarTypeYear\">\r\n      <!-- to emulate a year-picker, 2 input: first input to show user just year and second input hiden and bind \r\n        with the datepicker  -->\r\n      <mat-form-field  class=\"year-input\">\r\n        <mat-label>{{'igo.geo.timeFilter.startYear'| translate}}</mat-label>\r\n        <input\r\n          matInput\r\n          class=\"year-input-only-year\"\r\n          value=\"{{onlyYearBegin}}\"\r\n          (change)= \"yearOnlyInputChange($event, beginDatepicker, 'begin')\"\r\n          [disabled]= \"filterStateDisable\"\r\n          >\r\n        <mat-datepicker-toggle matSuffix [for]=\"beginDatepicker\" [disabled]=\"filterStateDisable\"></mat-datepicker-toggle>\r\n  \r\n        <mat-datepicker\r\n          panelClass=\"datepicker-year\"\r\n          #beginDatepicker\r\n          [startView]=\"calendarView()\"\r\n          [startAt]=\"beginValue\"\r\n          (yearSelected)=\"yearSelected($event, beginDatepicker, 'begin')\"\r\n          >\r\n        </mat-datepicker>\r\n\r\n        <input #beginYear\r\n          class= \"year-input-hide\"\r\n          matInput\r\n          [matDatepicker]=\"beginDatepicker\"\r\n          enabled= false\r\n          readonly= true\r\n          [value]=\"beginValue?beginValue:handleDate(datasource.options.minDate)\"\r\n          [min]=\"handleDate(datasource.options.minDate)\"\r\n          [max]=\"(endValue && (!restrictedToStep()))?endValue:handleDate(datasource.options.maxDate)\"\r\n          >\r\n      </mat-form-field>\r\n\r\n      <mat-form-field  class=\"year-input\">\r\n        <mat-label>{{'igo.geo.timeFilter.endYear'| translate}}</mat-label>\r\n        <input\r\n          matInput\r\n          class=\"year-input-only-year\"\r\n          value=\"{{onlyYearEnd}}\"\r\n          (change)= \"yearOnlyInputChange($event, endDatepicker, 'end')\"\r\n          [disabled] = \"filterStateDisable\">\r\n        <mat-datepicker-toggle matSuffix [for]=\"endDatepicker\" [disabled]=\"filterStateDisable\"></mat-datepicker-toggle>\r\n        <mat-datepicker\r\n          panelClass=\"datepicker-year\"\r\n          #endDatepicker\r\n          [startView]=\"calendarView()\"\r\n          [startAt]=\"endValue\"\r\n          (yearSelected)=\"yearSelected($event, endDatepicker, 'end')\"\r\n          >\r\n        </mat-datepicker>\r\n\r\n        <input #endYear\r\n          class= \"year-input-hide\"\r\n          matInput\r\n          [matDatepicker]=\"endDatepicker\"\r\n          enabled= false\r\n          readonly= true\r\n          [value]=\"endValue?endValue:handleDate(datasource.options.maxDate)\"\r\n          [min]=\"beginValue?beginValue:handleDate(datasource.options.minDate)\"\r\n          [max]=\"handleDate(datasource.options.maxDate)\"\r\n          >\r\n      </mat-form-field>\r\n      <button class=\"reset-button\" \r\n        mat-icon-button\r\n        color=\"primary\" \r\n        (click)=\"resetFilter()\" \r\n        [matTooltip]=\"'igo.geo.filter.resetFilters' | translate\" \r\n        [disabled]= \"filterStateDisable\">\r\n        <mat-icon svgIcon=\"{{resetIcon}}\"></mat-icon>\r\n      </button>\r\n      <mat-slide-toggle \r\n        class='toggle-filter-state' \r\n        (change)=\"toggleFilterState()\" \r\n        [matTooltip]=\"'igo.geo.filter.toggleFilterState' | translate\" \r\n        tooltip-position=\"below\" \r\n        matTooltipShowDelay=\"500\"\r\n        [checked]=\"!filterStateDisable\">\r\n      </mat-slide-toggle>\r\n\r\n    </div>\r\n\r\n    <div class=\"datetime-input-container\" *ngIf=\"calendarType()!=='year'\">\r\n      <div class=\"datetime-input\">\r\n        <mat-form-field class=\"date-input\">\r\n          <mat-datepicker-toggle matSuffix [for]=\"beginDatepicker\" [disabled]= \"filterStateDisable\"></mat-datepicker-toggle>\r\n          <input #begin\r\n            matInput\r\n            [matDatepicker]=\"beginDatepicker\"\r\n            [placeholder]=\"'igo.geo.timeFilter.startDate' | translate\"\r\n            [attr.disabled]=\"!currentFilter.active\"\r\n            (dateChange)=\"changeTemporalProperty(begin.value, 1)\"\r\n            [matDatepickerFilter]=\"dateFilter.bind(this, 'begin')\"\r\n            [value]=\"beginValue?beginValue:handleDate(datasource.options.minDate)\"\r\n            [min]=\"handleDate(datasource.options.minDate)\"\r\n            [max]=\"(endValue && (!restrictedToStep()))?endValue:handleDate(datasource.options.maxDate)\" \r\n            [disabled]= \"filterStateDisable\">\r\n          <span class=\"filler\"></span>\r\n          <mat-datepicker\r\n            #beginDatepicker\r\n            [startView]=\"calendarView()\"\r\n            [startAt]=\"beginValue\"\r\n            (yearSelected)=\"yearSelected($event, beginDatepicker, 'begin')\"\r\n            (monthSelected)=\"monthSelected($event, beginDatepicker, 'begin')\">\r\n          </mat-datepicker>\r\n        </mat-form-field>\r\n\r\n        <div class=\"time-input\">\r\n          <mat-form-field class=\"hour-input\" *ngIf=\"calendarType()==='datetime'\">\r\n            <mat-label>{{'igo.geo.timeFilter.hour' | translate}}</mat-label>\r\n            <mat-select\r\n              [formControl]=\"beginHourFormControl\"\r\n              [attr.disabled]=\"!currentFilter.active\"\r\n              (selectionChange)=\"changeTemporalProperty(begin.value, 1)\">\r\n              <mat-option *ngFor=\"let hour of beginHours\" [value]=\"hour\">{{hour}}</mat-option>\r\n            </mat-select>\r\n          </mat-form-field>\r\n          <mat-form-field class=\"minute-input\" *ngIf=\"calendarType()==='datetime'\">\r\n            <mat-label>{{'igo.geo.timeFilter.minute' | translate}}</mat-label>\r\n            <mat-select\r\n              [formControl]=\"beginMinuteFormControl\"\r\n              [attr.disabled]=\"!currentFilter.active\"\r\n              (selectionChange)=\"changeTemporalProperty(begin.value, 1)\">\r\n              <mat-option *ngFor=\"let minute of beginMinutes\" [value]=\"minute\">{{minute}}</mat-option>\r\n            </mat-select>\r\n          </mat-form-field>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"datetime-input\" *ngIf=\"!restrictedToStep()\">\r\n        <mat-form-field class=\"date-input\">\r\n          <mat-datepicker-toggle matSuffix [for]=\"endDatepicker\" [disabled]= \"filterStateDisable\"></mat-datepicker-toggle>\r\n            <input #end\r\n              matInput\r\n              [matDatepicker]=\"endDatepicker\"\r\n              [placeholder]=\"'igo.geo.timeFilter.endDate' | translate\"\r\n              [attr.disabled]=\"!currentFilter.active\"\r\n              (dateChange)=\"changeTemporalProperty(end.value, 2)\"\r\n              [matDatepickerFilter]=\"dateFilter.bind(this, 'end')\"\r\n              [value]=\"endValue?endValue:handleDate(datasource.options.maxDate)\"\r\n              [min]=\"beginValue?beginValue:handleDate(datasource.options.minDate)\"\r\n              [max]=\"handleDate(datasource.options.maxDate)\" \r\n              [disabled]= \"filterStateDisable\">\r\n            <span class=\"filler\"></span>\r\n            <mat-datepicker #endDatepicker\r\n              [startView]=\"calendarView()\"\r\n              [startAt]=\"endValue\"\r\n              (yearSelected)=\"yearSelected($event, endDatepicker, 'end')\"\r\n              (monthSelected)=\"monthSelected($event, endDatepicker, 'end')\">\r\n          </mat-datepicker>\r\n        </mat-form-field>\r\n\r\n        <div class=\"time-input\">\r\n          <mat-form-field class=\"hour-input\" *ngIf=\"calendarType()==='datetime'\" >\r\n            <mat-label>{{'igo.geo.timeFilter.hour' | translate}}</mat-label>\r\n            <mat-select\r\n              [formControl]=\"endHourFormControl\"\r\n              [attr.disabled]=\"!currentFilter.active\"\r\n              (selectionChange)=\"changeTemporalProperty(end.value, 2)\">\r\n              <mat-option *ngFor=\"let hour of endHours\" [value]=\"hour\">{{hour}}</mat-option>\r\n            </mat-select>\r\n          </mat-form-field>\r\n          <mat-form-field class=\"minute-input\" *ngIf=\"calendarType()==='datetime'\">\r\n            <mat-label>{{'igo.geo.timeFilter.minute' | translate}}</mat-label>\r\n            <mat-select\r\n              [formControl]=\"endMinuteFormControl\"\r\n              [attr.disabled]=\"!currentFilter.active\"\r\n              (selectionChange)=\"changeTemporalProperty(end.value, 2)\">\r\n              <mat-option *ngFor=\"let minute of endMinutes\" [value]=\"minute\">{{minute}}</mat-option>\r\n            </mat-select>\r\n          </mat-form-field>\r\n        </div>\r\n      </div>\r\n\r\n      <button class=\"reset-button\" \r\n        mat-icon-button color=\"primary\"\r\n        (click)=\"resetFilter()\" \r\n        [matTooltip]=\"'igo.geo.filter.resetFilters' | translate\" \r\n        [disabled]= \"filterStateDisable\">\r\n        <mat-icon svgIcon=\"{{resetIcon}}\"></mat-icon>\r\n      </button>\r\n      <mat-slide-toggle \r\n        class=\"toggle-filter-state\" \r\n        (change)=\"toggleFilterState()\" \r\n        tooltip-position=\"below\" \r\n        matTooltipShowDelay=\"500\"\r\n        [matTooltip]=\"'igo.geo.filter.toggleFilterState' | translate\" \r\n        [checked]= \"!filterStateDisable\">\r\n      </mat-slide-toggle>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: ["::ng-deep input{text-align:center!important;margin:auto 5px!important}.slider-container{text-align:center}.datetime-input{display:inline-block;width:100px;margin:10px 0 5px 10px}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){.datetime-input{width:36%;margin:0}}.date-input{width:100px;margin-right:25px}.time-input{margin-right:25px}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){.time-input{margin-right:5px}}.hour-input,.minute-input{width:35px;margin-left:7px}.year-input{width:98px;margin:10px 14px 5px 4px}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){.year-input{width:32%;margin:0 0 0 10px}}.year-input-hide{width:120px;margin-right:25px;display:none}.year-input-only-year{width:120px;margin-right:25px}.reset-button{width:25px;padding-left:8px}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){.reset-button{padding-left:8px}}.toggle-filter-state{padding-left:20px}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){.toggle-filter-state{padding-left:12px}}::ng-deep .datepicker-year ::ng-deep .mat-calendar-arrow{display:none}::ng-deep .datepicker-year ::ng-deep .mat-calendar-period-button{pointer-events:none}::ng-deep .datepicker-year ::ng-deep .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover{background-color:#0000001f;border-radius:999px}\n"] }]
     }], function () { return [{ type: OGCFilterTimeService }]; }, { datasource: [{
             type: Input
         }], currentFilter: [{
@@ -29125,7 +29966,7 @@ OgcFilterTimeSliderComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type
     } }, dependencies: [i2$2.NgControlStatus, i2$2.NgModel, i2.MatIcon, i3.MatButton, i13$1.MatSlider], styles: ["input{text-align:center!important;margin:auto 5px!important}  .mat-slider-thumb{transform:scale(0)!important}  .mat-slider-thumb-label{transform:rotate(45deg)!important;border-radius:50% 50% 0!important;background-color:#ffd740!important}  .mat-slider-thumb-label-text{opacity:1!important;transform:rotate(135deg)!important}  .mat-slider-horizontal .mat-slider-thumb-label{top:10px!important;transform:rotate(225deg)!important}  .mat-slider-horizontal.cdk-focused .mat-slider-thumb-label{transform:rotate(225deg)!important}.datetime-container[_ngcontent-%COMP%], .slider-container[_ngcontent-%COMP%]{text-align:center}.datetime-input[_ngcontent-%COMP%]{display:inline-block;margin:5px 25px}.date-input[_ngcontent-%COMP%]{width:120px;margin-right:25px}.time-input[_ngcontent-%COMP%]{display:inherit;margin-right:25px}.hour-input[_ngcontent-%COMP%], .minute-input[_ngcontent-%COMP%]{width:40px}.minute-input[_ngcontent-%COMP%]{margin-left:10px}"] });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(OgcFilterTimeSliderComponent, [{
         type: Component,
-        args: [{ selector: 'igo-ogc-filter-time-slider', template: "<div class=\"slider-container\">\n  <mat-slider\n    id=\"time-slider\"\n    [step]=\"1\"\n    [min]=\"1\"\n    [max]=\"calculatedStep\"\n    [(ngModel)]=\"sliderValue\"\n    [displayWith]=\"sliderDisplayWith\"\n    (input)=\"handleSliderInput($event)\"\n    thumbLabel\n    >\n  </mat-slider>\n  <button mat-icon-button color=\"primary\" (click)=\"playFilter($event)\">\n    <mat-icon [svgIcon]=\"playIcon\"></mat-icon>\n  </button>\n  <button mat-icon-button color=\"primary\" (click)=\"resetFilter($event)\">\n    <mat-icon svgIcon=\"{{resetIcon}}\"></mat-icon>\n  </button>\n  \n</div>", styles: ["::ng-deep input{text-align:center!important;margin:auto 5px!important}::ng-deep .mat-slider-thumb{transform:scale(0)!important}::ng-deep .mat-slider-thumb-label{transform:rotate(45deg)!important;border-radius:50% 50% 0!important;background-color:#ffd740!important}::ng-deep .mat-slider-thumb-label-text{opacity:1!important;transform:rotate(135deg)!important}::ng-deep .mat-slider-horizontal .mat-slider-thumb-label{top:10px!important;transform:rotate(225deg)!important}::ng-deep .mat-slider-horizontal.cdk-focused .mat-slider-thumb-label{transform:rotate(225deg)!important}.datetime-container,.slider-container{text-align:center}.datetime-input{display:inline-block;margin:5px 25px}.date-input{width:120px;margin-right:25px}.time-input{display:inherit;margin-right:25px}.hour-input,.minute-input{width:40px}.minute-input{margin-left:10px}\n"] }]
+        args: [{ selector: 'igo-ogc-filter-time-slider', template: "<div class=\"slider-container\">\r\n  <mat-slider\r\n    id=\"time-slider\"\r\n    [step]=\"1\"\r\n    [min]=\"1\"\r\n    [max]=\"calculatedStep\"\r\n    [(ngModel)]=\"sliderValue\"\r\n    [displayWith]=\"sliderDisplayWith\"\r\n    (input)=\"handleSliderInput($event)\"\r\n    thumbLabel\r\n    >\r\n  </mat-slider>\r\n  <button mat-icon-button color=\"primary\" (click)=\"playFilter($event)\">\r\n    <mat-icon [svgIcon]=\"playIcon\"></mat-icon>\r\n  </button>\r\n  <button mat-icon-button color=\"primary\" (click)=\"resetFilter($event)\">\r\n    <mat-icon svgIcon=\"{{resetIcon}}\"></mat-icon>\r\n  </button>\r\n  \r\n</div>", styles: ["::ng-deep input{text-align:center!important;margin:auto 5px!important}::ng-deep .mat-slider-thumb{transform:scale(0)!important}::ng-deep .mat-slider-thumb-label{transform:rotate(45deg)!important;border-radius:50% 50% 0!important;background-color:#ffd740!important}::ng-deep .mat-slider-thumb-label-text{opacity:1!important;transform:rotate(135deg)!important}::ng-deep .mat-slider-horizontal .mat-slider-thumb-label{top:10px!important;transform:rotate(225deg)!important}::ng-deep .mat-slider-horizontal.cdk-focused .mat-slider-thumb-label{transform:rotate(225deg)!important}.datetime-container,.slider-container{text-align:center}.datetime-input{display:inline-block;margin:5px 25px}.date-input{width:120px;margin-right:25px}.time-input{display:inherit;margin-right:25px}.hour-input,.minute-input{width:40px}.minute-input{margin-left:10px}\n"] }]
     }], function () { return [{ type: OGCFilterTimeService }]; }, { currentFilter: [{
             type: Input
         }], begin: [{
@@ -29343,15 +30184,15 @@ IgoFilterModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ providers: [TimeFi
 i0.ɵɵsetComponentScope(TimeFilterButtonComponent, [i1$1.NgIf, i2.MatIcon, i3.MatButton, i4.MatTooltip, i5$1.ListItemDirective, i7$1.MatBadge, TimeFilterItemComponent], [i7.TranslatePipe]);
 i0.ɵɵsetComponentScope(TimeFilterItemComponent, [i1$1.NgClass, i1$1.NgIf, i1$1.NgStyle, i2.MatIcon, i3.MatButton, i5.MatListItem, i5.MatListAvatarCssMatStyler, i9.MatLine, i4.MatTooltip, LayerLegendComponent, i5$1.CollapseDirective, TimeFilterFormComponent], [i1$1.AsyncPipe, i7.TranslatePipe]);
 i0.ɵɵsetComponentScope(TimeFilterListComponent, [i1$1.NgForOf, i5$1.ListItemDirective, i5$1.ListComponent, TimeFilterItemComponent], [FilterableDataSourcePipe]);
-i0.ɵɵsetComponentScope(OgcFilterFormComponent, [i1$1.NgClass, i1$1.NgForOf, i1$1.NgIf, i11$1.MatAutocomplete, i11$1.MatAutocompleteTrigger, i9.MatOption, i2.MatIcon, i3.MatButton, i12$1.MatCheckbox, i13.MatFormField, i13.MatSuffix, i14.MatInput, i15.MatSelect, i4.MatTooltip, OgcFilterTimeComponent], [i1$1.AsyncPipe, i7.TranslatePipe, i5$1.KeyValuePipe]);
+i0.ɵɵsetComponentScope(OgcFilterFormComponent, [i1$1.NgClass, i1$1.NgForOf, i1$1.NgIf, i11$1.MatAutocomplete, i11$1.MatAutocompleteTrigger, i9.MatOption, i2.MatIcon, i3.MatButton, i12.MatCheckbox, i13.MatFormField, i13.MatSuffix, i14.MatInput, i15.MatSelect, i4.MatTooltip, OgcFilterTimeComponent], [i1$1.AsyncPipe, i7.TranslatePipe, i5$1.KeyValuePipe]);
 i0.ɵɵsetComponentScope(OgcFilterButtonComponent, [i1$1.NgIf, i2.MatIcon, i3.MatButton, i4.MatTooltip, i5$1.ListItemDirective, i7$1.MatBadge, OgcFilterableItemComponent], [i7.TranslatePipe]);
-i0.ɵɵsetComponentScope(OgcFilterSelectionComponent, [i1$1.NgForOf, i1$1.NgIf, i1$1.NgStyle, i2$2.ɵNgNoValidate, i2$2.DefaultValueAccessor, i2$2.NgControlStatus, i2$2.NgControlStatusGroup, i2$2.NgModel, i2$2.FormGroupDirective, i2$2.FormControlName, i11$1.MatAutocomplete, i11$1.MatAutocompleteTrigger, i9.MatOption, i2.MatIcon, i17.MatRadioGroup, i17.MatRadioButton, i18.MatButtonToggleGroup, i18.MatButtonToggle, i12$1.MatCheckbox, i13.MatFormField, i14.MatInput, i15.MatSelect, i11.MatDivider, i4.MatTooltip, OgcFilterTimeComponent], [i1$1.AsyncPipe, i7.TranslatePipe]);
+i0.ɵɵsetComponentScope(OgcFilterSelectionComponent, [i1$1.NgForOf, i1$1.NgIf, i1$1.NgStyle, i2$2.ɵNgNoValidate, i2$2.DefaultValueAccessor, i2$2.NgControlStatus, i2$2.NgControlStatusGroup, i2$2.NgModel, i2$2.FormGroupDirective, i2$2.FormControlName, i11$1.MatAutocomplete, i11$1.MatAutocompleteTrigger, i9.MatOption, i2.MatIcon, i17.MatRadioGroup, i17.MatRadioButton, i18.MatButtonToggleGroup, i18.MatButtonToggle, i12.MatCheckbox, i13.MatFormField, i14.MatInput, i15.MatSelect, i11.MatDivider, i4.MatTooltip, OgcFilterTimeComponent], [i1$1.AsyncPipe, i7.TranslatePipe]);
 i0.ɵɵsetComponentScope(OgcFilterableFormComponent, [i1$1.NgForOf, i1$1.NgIf, i5$1.ListItemDirective, OgcFilterFormComponent,
     OgcFilterSelectionComponent], []);
-i0.ɵɵsetComponentScope(OgcFilterableItemComponent, [i1$1.NgClass, i1$1.NgIf, i1$1.NgStyle, i2$2.NgControlStatus, i2$2.NgModel, i2.MatIcon, i3.MatButton, i12$1.MatCheckbox, i5.MatListItem, i5.MatListAvatarCssMatStyler, i9.MatLine, i11.MatDivider, i4.MatTooltip, LayerLegendComponent, i5$1.CollapseDirective, OgcFilterableFormComponent], [i1$1.AsyncPipe, i7.TranslatePipe]);
+i0.ɵɵsetComponentScope(OgcFilterableItemComponent, [i1$1.NgClass, i1$1.NgIf, i1$1.NgStyle, i2$2.NgControlStatus, i2$2.NgModel, i2.MatIcon, i3.MatButton, i12.MatCheckbox, i5.MatListItem, i5.MatListAvatarCssMatStyler, i9.MatLine, i11.MatDivider, i4.MatTooltip, LayerLegendComponent, i5$1.CollapseDirective, OgcFilterableFormComponent], [i1$1.AsyncPipe, i7.TranslatePipe]);
 i0.ɵɵsetComponentScope(OgcFilterableListComponent, [i1$1.NgForOf, i1$1.NgIf, i5$1.ListItemDirective, i5$1.ListComponent, OgcFilterableItemComponent], [i7.TranslatePipe, FilterableDataSourcePipe]);
 i0.ɵɵsetComponentScope(SpatialFilterTypeComponent, [i1$1.NgForOf, i9.MatOption, i2.MatIcon, i20.MatTabGroup, i20.MatTab, i18.MatButtonToggleGroup, i18.MatButtonToggle, i13.MatFormField, i13.MatLabel, i15.MatSelect, i4.MatTooltip, SpatialFilterListComponent], [i7.TranslatePipe]);
-i0.ɵɵsetComponentScope(SpatialFilterItemComponent, [i1$1.NgForOf, i1$1.NgIf, i2$2.ɵNgNoValidate, i2$2.DefaultValueAccessor, i2$2.NumberValueAccessor, i2$2.NgControlStatus, i2$2.NgControlStatusGroup, i2$2.NgForm, i2$2.FormControlDirective, i9.MatOption, i2.MatIcon, i3.MatButton, i17.MatRadioGroup, i17.MatRadioButton, i21.MatTable, i21.MatHeaderCellDef, i21.MatHeaderRowDef, i21.MatColumnDef, i21.MatRowDef, i21.MatHeaderCell, i21.MatHeaderRow, i21.MatRow, i22.MatNestedTreeNode, i22.MatTreeNodeDef, i22.MatTreeNodeToggle, i22.MatTree, i22.MatTreeNode, i22.MatTreeNodeOutlet, i12$1.MatCheckbox, i23.MatSlideToggle, i13.MatFormField, i13.MatLabel, i14.MatInput, i15.MatSelect, i4.MatTooltip, i5$1.EntityTableComponent, GeometryFormFieldInputComponent], [i1$1.AsyncPipe, i7.TranslatePipe]);
+i0.ɵɵsetComponentScope(SpatialFilterItemComponent, [i1$1.NgForOf, i1$1.NgIf, i2$2.ɵNgNoValidate, i2$2.DefaultValueAccessor, i2$2.NumberValueAccessor, i2$2.NgControlStatus, i2$2.NgControlStatusGroup, i2$2.NgForm, i2$2.FormControlDirective, i9.MatOption, i2.MatIcon, i3.MatButton, i17.MatRadioGroup, i17.MatRadioButton, i21.MatTable, i21.MatHeaderCellDef, i21.MatHeaderRowDef, i21.MatColumnDef, i21.MatRowDef, i21.MatHeaderCell, i21.MatHeaderRow, i21.MatRow, i22.MatNestedTreeNode, i22.MatTreeNodeDef, i22.MatTreeNodeToggle, i22.MatTree, i22.MatTreeNode, i22.MatTreeNodeOutlet, i12.MatCheckbox, i23.MatSlideToggle, i13.MatFormField, i13.MatLabel, i14.MatInput, i15.MatSelect, i4.MatTooltip, i5$1.EntityTableComponent, GeometryFormFieldInputComponent], [i1$1.AsyncPipe, i7.TranslatePipe]);
 i0.ɵɵsetComponentScope(OgcFilterTimeComponent, [i1$1.NgForOf, i1$1.NgIf, i2$2.NgControlStatus, i2$2.NgModel, i2$2.FormControlDirective, i9.MatOption, i2.MatIcon, i3.MatButton, i23.MatSlideToggle, i13.MatFormField, i13.MatLabel, i13.MatSuffix, i14.MatInput, i15.MatSelect, i4.MatTooltip, i25.MatDatepicker, i25.MatDatepickerInput, i25.MatDatepickerToggle, OgcFilterTimeSliderComponent], [i7.TranslatePipe]);
 
 function ExportButtonComponent_button_0_Template(rf, ctx) { if (rf & 1) {
@@ -29403,7 +30244,7 @@ ExportButtonComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Expor
     } }, dependencies: [i2.MatIcon, i4.MatTooltip, i1$1.NgIf, i3.MatButton, i7.TranslatePipe], changeDetection: 0 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ExportButtonComponent, [{
         type: Component,
-        args: [{ selector: 'igo-export-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  *ngIf=\"layerIsExportable()\"\n  mat-icon-button\n  tooltip-position=\"below\"\n  matTooltipShowDelay=\"500\"\n  [matTooltip]=\"'igo.geo.download.action' | translate\"\n  [color]=\"color\">\n  <!-- (click)=\"openDownload(layer)\"> -->\n  <mat-icon svgIcon=\"file-export\"></mat-icon>\n</button>\n\n" }]
+        args: [{ selector: 'igo-export-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\r\n  *ngIf=\"layerIsExportable()\"\r\n  mat-icon-button\r\n  tooltip-position=\"below\"\r\n  matTooltipShowDelay=\"500\"\r\n  [matTooltip]=\"'igo.geo.download.action' | translate\"\r\n  [color]=\"color\">\r\n  <!-- (click)=\"openDownload(layer)\"> -->\r\n  <mat-icon svgIcon=\"file-export\"></mat-icon>\r\n</button>\r\n\r\n" }]
     }], function () { return []; }, { layer: [{
             type: Input
         }], color: [{
@@ -29616,7 +30457,7 @@ class ExportService {
             outputName = `${title}.csv`;
         }
         outputName = outputName.replace(' ', '_');
-        outputName = outputName.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
+        outputName = outputName.normalize('NFD').replace(/[\u0300-\u036f]/g, '').replace(/’/g, "'");
         outputNameField.setAttribute('type', 'hidden');
         outputNameField.setAttribute('name', 'outputName');
         outputNameField.setAttribute('value', outputName);
@@ -29936,21 +30777,34 @@ class ImportService {
     constructor(http, config) {
         this.http = http;
         this.config = config;
-        this.ogreUrl = this.config.getConfig('importExport.url');
-        const configFileSizeMb = this.config.getConfig('importExport.clientSideFileSizeMaxMb');
+        const importConfig = this.config.getConfig('importExport');
+        this.ogreUrl = importConfig.url;
+        const configFileSizeMb = importConfig.clientSideFileSizeMaxMb;
         this.clientSideFileSizeMax = (configFileSizeMb ? configFileSizeMb : 30) * Math.pow(1024, 2);
+        if (importConfig.formats) {
+            ImportService.allowedExtensions = importConfig.formats
+                .map(format => ImportService.formatExtensionAssociation[format])
+                .filter(e => e);
+            if (ImportService.allowedExtensions.includes('geojson')) {
+                ImportService.allowedExtensions.push('json');
+            }
+        }
     }
     import(file, projectionIn = 'EPSG:4326', projectionOut = 'EPSG:4326') {
         return this.importAsync(file, projectionIn, projectionOut);
     }
     getFileImporter(file) {
         const extension = getFileExtension(file);
+        const allowedExtensions = ImportService.allowedExtensions;
+        let zipMimeTypes = [];
+        if (allowedExtensions.includes('zip')) {
+            zipMimeTypes = ImportService.allowedZipMimeTypes;
+        }
         const mimeType = file.type;
         const allowedMimeTypes = [
             ...ImportService.allowedMimeTypes,
-            ...ImportService.allowedZipMimeTypes
+            ...zipMimeTypes
         ];
-        const allowedExtensions = ImportService.allowedExtensions;
         if (allowedMimeTypes.indexOf(mimeType) < 0 &&
             allowedExtensions.indexOf(extension) < 0) {
             return undefined;
@@ -30096,6 +30950,13 @@ class ImportService {
         return features;
     }
 }
+ImportService.formatExtensionAssociation = {
+    GeoJSON: 'geojson',
+    GML: 'gml',
+    GPX: 'gpx',
+    KML: 'kml',
+    Shapefile: 'zip'
+};
 ImportService.allowedMimeTypes = [
     'application/gml+xml',
     'application/vnd.google-earth.kml+xml',
@@ -30107,7 +30968,7 @@ ImportService.allowedZipMimeTypes = [
     'application/x-zip-compressed',
     'application/x-zip'
 ];
-ImportService.allowedExtensions = ['geojson', 'kml', 'gpx', 'json', 'gml'];
+ImportService.allowedExtensions = ['geojson', 'kml', 'gpx', 'json', 'gml', 'zip'];
 ImportService.ɵfac = function ImportService_Factory(t) { return new (t || ImportService)(i0.ɵɵinject(i1$2.HttpClient), i0.ɵɵinject(i2$1.ConfigService)); };
 ImportService.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: ImportService, factory: ImportService.ɵfac, providedIn: 'root' });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ImportService, [{
@@ -31330,7 +32191,7 @@ ImportExportComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Impor
     } }, dependencies: [i4.MatTooltip, i2$2.ɵNgNoValidate, i2$2.DefaultValueAccessor, i2$2.NgControlStatus, i2$2.NgControlStatusGroup, i2$2.FormGroupDirective, i2$2.FormControlName, i1$1.NgClass, i1$1.NgForOf, i1$1.NgIf, i3.MatButton, i18.MatButtonToggleGroup, i18.MatButtonToggle, i13.MatFormField, i13.MatLabel, i15.MatSelect, i15.MatSelectTrigger, i9.MatOption, i14.MatInput, i23.MatSlideToggle, i5$1.SpinnerComponent, i5$1.CustomHtmlComponent, i1$1.AsyncPipe, i7.TranslatePipe, i5$1.KeyValuePipe], styles: ["mat-option.igo-export-layer-mat-option[_ngcontent-%COMP%]{height:5em;line-height:1em}.import-export-toggle[_ngcontent-%COMP%]{padding:10px;text-align:center}.import-export-toggle[_ngcontent-%COMP%]   mat-button-toggle-group[_ngcontent-%COMP%]{width:100%}.import-export-toggle[_ngcontent-%COMP%]   mat-button-toggle-group[_ngcontent-%COMP%]   mat-button-toggle[_ngcontent-%COMP%]{width:50%}h4[_ngcontent-%COMP%]{padding:0 5px}.igo-form[_ngcontent-%COMP%]{padding:15px 5px}.igo-input-container[_ngcontent-%COMP%]   mat-form-field[_ngcontent-%COMP%]{width:100%}.igo-form-button-group[_ngcontent-%COMP%]{text-align:center;padding-top:10px}igo-spinner[_ngcontent-%COMP%]{position:absolute;padding-left:10px}.export-options[_ngcontent-%COMP%], .export-combine-layers[_ngcontent-%COMP%], .export-separator[_ngcontent-%COMP%]{overflow-x:hidden}.export-options[_ngcontent-%COMP%]   mat-slide-toggle[_ngcontent-%COMP%], .export-combine-layers[_ngcontent-%COMP%]   mat-slide-toggle[_ngcontent-%COMP%], .export-separator[_ngcontent-%COMP%]   mat-slide-toggle[_ngcontent-%COMP%]{width:100%;margin:10px}.export-options[_ngcontent-%COMP%]   mat-slide-toggle[_ngcontent-%COMP%]     .mat-slide-toggle-content, .export-combine-layers[_ngcontent-%COMP%]   mat-slide-toggle[_ngcontent-%COMP%]     .mat-slide-toggle-content, .export-separator[_ngcontent-%COMP%]   mat-slide-toggle[_ngcontent-%COMP%]     .mat-slide-toggle-content{width:calc(100% - 60px)}.export-select-trigger[_ngcontent-%COMP%]{opacity:.75;font-size:.75em}"] });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ImportExportComponent, [{
         type: Component,
-        args: [{ selector: 'igo-import-export', template: "<div class=\"import-export-toggle mat-typography\">\n  <mat-button-toggle-group\n        [value]=\"selectedMode\"\n        (change)=\"onImportExportChange($event)\">\n        <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 class=\"igo-form\" [formGroup]=\"importForm\" *ngIf=\"selectedMode === 'import'\">\n  <div class=\"igo-input-container\">\n    <mat-form-field>\n      <mat-label>{{'igo.geo.importExportForm.importProjPlaceholder' | translate}}</mat-label>\n      <mat-select\n        [(value)]=\"inputProj\">\n        <mat-option\n          *ngFor=\"let projection of (projections$ | async)\"\n          [value]=\"projection\"\n          (click)=\"$event.stopPropagation()\">\n          <p mat-line *ngIf=\"projection.translateKey\">{{('igo.geo.importExportForm.projections.' + projection.translateKey) | translate: projection}}</p>\n          <p mat-line *ngIf=\"!projection.translateKey\">{{projection.alias}}</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]=\"importForm.invalid ? ('igo.geo.importExportForm.projections.choose' | translate) : ('igo.geo.importExportForm.importButton' | translate)\"\n    class=\"igo-form-button-group\">\n    <button\n      [disabled]=\"importForm.invalid || (loading$ | async)\"\n      mat-raised-button\n      type=\"button\"\n      (click)=\"fileInput.click()\">\n        {{'igo.geo.importExportForm.importButton' | translate}}\n    </button>\n    <igo-spinner [shown]=\"loading$ | async\"></igo-spinner>\n    <input\n      hidden\n      #fileInput\n      type=\"file\"\n      [style.display]=\"'none'\"\n      (click)=\"fileInput.value = null\"\n      (change)=\"importFiles($event.target.files)\">\n  </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>{{'igo.geo.importExportForm.importSizeMax' | translate: {size: fileSizeMb} }}</li>\n      <li>{{'igo.geo.importExportForm.importFormatAuthorized' | translate}}</li>\n      <li>{{'igo.geo.importExportForm.importShpZip' | translate}}</li>\n    </ul>\n  </div>\n  <igo-custom-html *ngIf=\"importHtmlClarifications !== ''\" class=\"mat-typography\"\n    [html]=\"importHtmlClarifications\">\n  </igo-custom-html>\n</section>\n\n<section class=\"mat-typography\" *ngIf=\"(exportableLayers$ | async).length === 0 && selectedMode === 'export'\">\n  <h4>{{'igo.geo.importExportForm.exportNoLayersExportable' | translate}}</h4>\n</section>\n\n<form class=\"igo-form\" [formGroup]=\"form\" *ngIf=\"(exportableLayers$ | async).length > 0 && selectedMode === 'export'\">\n  <div class=\"igo-input-container\">\n    <mat-form-field>\n      <mat-label>{{'igo.geo.importExportForm.exportLayerPlaceholder' | translate}}</mat-label>\n      <mat-select\n        [(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}} {{(layers?.length === 2 ? 'igo.geo.importExportForm.other' : 'igo.geo.importExportForm.others') | translate }})\n          </span>\n        </mat-select-trigger>\n        <mat-option\n          *ngFor=\"let layer of (exportableLayers$ | async)\"\n          [ngClass]=\"{'igo-export-layer-mat-option': layerHasSelectedFeatures(layer)}\"\n          [value]=\"layer.id\"\n          (click)=\"$event.stopPropagation()\">\n          <p mat-line>{{layer.title}}</p>\n          <p mat-line>\n            <mat-slide-toggle *ngIf=\"layerHasSelectedFeatures(layer)\"\n              [labelPosition]=\"'after'\"\n              (click)=\"onlySelectedClick($event,layer.id)\"\n              (checked)=\"inLayersIdToExportSelectionOnly(layer)\"\n              (change)=\"onlySelected($event,layer.id)\">\n              <small>{{'igo.geo.importExportForm.exportSelectedFeature' | translate}}</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>{{'igo.geo.importExportForm.exportFormatPlaceholder' | translate}}</mat-label>\n      <mat-select\n        formControlName=\"format\">\n        <ng-container *ngIf=\"(formats$ | async).length !== 0\">\n          <mat-option *ngFor=\"let format of (formats$ | async) | keyvalue\" [value]=\"format.key\">\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 class=\"igo-input-container\" *ngIf=\"forceNaming && form.value.format !== 'URL'\">\n    <mat-form-field>\n        <input matInput formControlName=\"name\" placeholder=\"{{'igo.geo.importExportForm.exportFileNamePlaceholder' | translate}}\">\n    </mat-form-field>\n  </div>\n\n  <div class=\"igo-input-container\" *ngIf=\"form.value.format === 'CSVcomma' || form.value.format === 'CSVsemicolon'\">\n    <mat-form-field>\n      <mat-label>{{'igo.geo.importExportForm.encodingPlaceholder' | translate}}</mat-label>\n      <mat-select\n        formControlName=\"encoding\">\n        <ng-container *ngIf=\"(encodings$ | async).length !== 0\">\n          <mat-option *ngFor=\"let encoding of (encodings$ | async) | keyvalue\" [value]=\"encoding.key\">\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 class=\"export-combine-layers mat-typography\" *ngIf=\"layers.length > 1 && (form.value.format === 'CSVcomma' || form.value.format === 'CSVsemicolon')\">\n    <mat-slide-toggle\n        formControlName=\"combineLayers\"\n        [labelPosition]=\"'before'\">\n          {{'igo.geo.importExportForm.exportCombineResults' | translate}}\n    </mat-slide-toggle>\n  </div>\n\n  <div class=\"export-separator mat-typography\" *ngIf=\"layers.length > 1 && (form.value.format === 'CSVcomma' || form.value.format === 'CSVsemicolon') && form.value.combineLayers\">\n    <mat-slide-toggle\n        formControlName=\"separator\"\n        [labelPosition]=\"'before'\">\n          {{'igo.geo.importExportForm.exportSeparator' | translate}}\n    </mat-slide-toggle>\n  </div>\n\n  <div class=\"export-options mat-typography\" *ngIf=\"form.value.format !== 'URL'\">\n    <mat-slide-toggle\n        formControlName=\"featureInMapExtent\"\n        [labelPosition]=\"'before'\">\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      {{form.value.format !== 'URL'  ? ('igo.geo.importExportForm.exportButton' | translate): (form.value.layers.length > 1  ? ('igo.geo.importExportForm.exportButtonLinks' | translate): ('igo.geo.importExportForm.exportButtonLink' | translate))}}\n    </button>\n    <igo-spinner [shown]=\"loading$ | async\"></igo-spinner>\n  </div>\n\n  <igo-custom-html *ngIf=\"exportHtmlClarifications !== ''\" class=\"mat-typography\"\n    [html]=\"exportHtmlClarifications\">\n  </igo-custom-html>\n\n</form>\n", styles: ["mat-option.igo-export-layer-mat-option{height:5em;line-height:1em}.import-export-toggle{padding:10px;text-align:center}.import-export-toggle mat-button-toggle-group{width:100%}.import-export-toggle mat-button-toggle-group mat-button-toggle{width:50%}h4{padding:0 5px}.igo-form{padding:15px 5px}.igo-input-container mat-form-field{width:100%}.igo-form-button-group{text-align:center;padding-top:10px}igo-spinner{position:absolute;padding-left:10px}.export-options,.export-combine-layers,.export-separator{overflow-x:hidden}.export-options mat-slide-toggle,.export-combine-layers mat-slide-toggle,.export-separator mat-slide-toggle{width:100%;margin:10px}.export-options mat-slide-toggle ::ng-deep .mat-slide-toggle-content,.export-combine-layers mat-slide-toggle ::ng-deep .mat-slide-toggle-content,.export-separator mat-slide-toggle ::ng-deep .mat-slide-toggle-content{width:calc(100% - 60px)}.export-select-trigger{opacity:.75;font-size:.75em}\n"] }]
+        args: [{ selector: 'igo-import-export', template: "<div class=\"import-export-toggle mat-typography\">\r\n  <mat-button-toggle-group\r\n        [value]=\"selectedMode\"\r\n        (change)=\"onImportExportChange($event)\">\r\n        <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 class=\"igo-form\" [formGroup]=\"importForm\" *ngIf=\"selectedMode === 'import'\">\r\n  <div class=\"igo-input-container\">\r\n    <mat-form-field>\r\n      <mat-label>{{'igo.geo.importExportForm.importProjPlaceholder' | translate}}</mat-label>\r\n      <mat-select\r\n        [(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          <p mat-line *ngIf=\"projection.translateKey\">{{('igo.geo.importExportForm.projections.' + projection.translateKey) | translate: projection}}</p>\r\n          <p mat-line *ngIf=\"!projection.translateKey\">{{projection.alias}}</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]=\"importForm.invalid ? ('igo.geo.importExportForm.projections.choose' | translate) : ('igo.geo.importExportForm.importButton' | translate)\"\r\n    class=\"igo-form-button-group\">\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        {{'igo.geo.importExportForm.importButton' | translate}}\r\n    </button>\r\n    <igo-spinner [shown]=\"loading$ | async\"></igo-spinner>\r\n    <input\r\n      hidden\r\n      #fileInput\r\n      type=\"file\"\r\n      [style.display]=\"'none'\"\r\n      (click)=\"fileInput.value = null\"\r\n      (change)=\"importFiles($event.target.files)\">\r\n  </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>{{'igo.geo.importExportForm.importSizeMax' | translate: {size: fileSizeMb} }}</li>\r\n      <li>{{'igo.geo.importExportForm.importFormatAuthorized' | translate}}</li>\r\n      <li>{{'igo.geo.importExportForm.importShpZip' | translate}}</li>\r\n    </ul>\r\n  </div>\r\n  <igo-custom-html *ngIf=\"importHtmlClarifications !== ''\" class=\"mat-typography\"\r\n    [html]=\"importHtmlClarifications\">\r\n  </igo-custom-html>\r\n</section>\r\n\r\n<section class=\"mat-typography\" *ngIf=\"(exportableLayers$ | async).length === 0 && selectedMode === 'export'\">\r\n  <h4>{{'igo.geo.importExportForm.exportNoLayersExportable' | translate}}</h4>\r\n</section>\r\n\r\n<form class=\"igo-form\" [formGroup]=\"form\" *ngIf=\"(exportableLayers$ | async).length > 0 && selectedMode === 'export'\">\r\n  <div class=\"igo-input-container\">\r\n    <mat-form-field>\r\n      <mat-label>{{'igo.geo.importExportForm.exportLayerPlaceholder' | translate}}</mat-label>\r\n      <mat-select\r\n        [(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}} {{(layers?.length === 2 ? 'igo.geo.importExportForm.other' : 'igo.geo.importExportForm.others') | translate }})\r\n          </span>\r\n        </mat-select-trigger>\r\n        <mat-option\r\n          *ngFor=\"let layer of (exportableLayers$ | async)\"\r\n          [ngClass]=\"{'igo-export-layer-mat-option': layerHasSelectedFeatures(layer)}\"\r\n          [value]=\"layer.id\"\r\n          (click)=\"$event.stopPropagation()\">\r\n          <p mat-line>{{layer.title}}</p>\r\n          <p mat-line>\r\n            <mat-slide-toggle *ngIf=\"layerHasSelectedFeatures(layer)\"\r\n              [labelPosition]=\"'after'\"\r\n              (click)=\"onlySelectedClick($event,layer.id)\"\r\n              (checked)=\"inLayersIdToExportSelectionOnly(layer)\"\r\n              (change)=\"onlySelected($event,layer.id)\">\r\n              <small>{{'igo.geo.importExportForm.exportSelectedFeature' | translate}}</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>{{'igo.geo.importExportForm.exportFormatPlaceholder' | translate}}</mat-label>\r\n      <mat-select\r\n        formControlName=\"format\">\r\n        <ng-container *ngIf=\"(formats$ | async).length !== 0\">\r\n          <mat-option *ngFor=\"let format of (formats$ | async) | keyvalue\" [value]=\"format.key\">\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 class=\"igo-input-container\" *ngIf=\"forceNaming && form.value.format !== 'URL'\">\r\n    <mat-form-field>\r\n        <input matInput formControlName=\"name\" placeholder=\"{{'igo.geo.importExportForm.exportFileNamePlaceholder' | translate}}\">\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <div class=\"igo-input-container\" *ngIf=\"form.value.format === 'CSVcomma' || form.value.format === 'CSVsemicolon'\">\r\n    <mat-form-field>\r\n      <mat-label>{{'igo.geo.importExportForm.encodingPlaceholder' | translate}}</mat-label>\r\n      <mat-select\r\n        formControlName=\"encoding\">\r\n        <ng-container *ngIf=\"(encodings$ | async).length !== 0\">\r\n          <mat-option *ngFor=\"let encoding of (encodings$ | async) | keyvalue\" [value]=\"encoding.key\">\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 class=\"export-combine-layers mat-typography\" *ngIf=\"layers.length > 1 && (form.value.format === 'CSVcomma' || form.value.format === 'CSVsemicolon')\">\r\n    <mat-slide-toggle\r\n        formControlName=\"combineLayers\"\r\n        [labelPosition]=\"'before'\">\r\n          {{'igo.geo.importExportForm.exportCombineResults' | translate}}\r\n    </mat-slide-toggle>\r\n  </div>\r\n\r\n  <div class=\"export-separator mat-typography\" *ngIf=\"layers.length > 1 && (form.value.format === 'CSVcomma' || form.value.format === 'CSVsemicolon') && form.value.combineLayers\">\r\n    <mat-slide-toggle\r\n        formControlName=\"separator\"\r\n        [labelPosition]=\"'before'\">\r\n          {{'igo.geo.importExportForm.exportSeparator' | translate}}\r\n    </mat-slide-toggle>\r\n  </div>\r\n\r\n  <div class=\"export-options mat-typography\" *ngIf=\"form.value.format !== 'URL'\">\r\n    <mat-slide-toggle\r\n        formControlName=\"featureInMapExtent\"\r\n        [labelPosition]=\"'before'\">\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      {{form.value.format !== 'URL'  ? ('igo.geo.importExportForm.exportButton' | translate): (form.value.layers.length > 1  ? ('igo.geo.importExportForm.exportButtonLinks' | translate): ('igo.geo.importExportForm.exportButtonLink' | translate))}}\r\n    </button>\r\n    <igo-spinner [shown]=\"loading$ | async\"></igo-spinner>\r\n  </div>\r\n\r\n  <igo-custom-html *ngIf=\"exportHtmlClarifications !== ''\" class=\"mat-typography\"\r\n    [html]=\"exportHtmlClarifications\">\r\n  </igo-custom-html>\r\n\r\n</form>\r\n", styles: ["mat-option.igo-export-layer-mat-option{height:5em;line-height:1em}.import-export-toggle{padding:10px;text-align:center}.import-export-toggle mat-button-toggle-group{width:100%}.import-export-toggle mat-button-toggle-group mat-button-toggle{width:50%}h4{padding:0 5px}.igo-form{padding:15px 5px}.igo-input-container mat-form-field{width:100%}.igo-form-button-group{text-align:center;padding-top:10px}igo-spinner{position:absolute;padding-left:10px}.export-options,.export-combine-layers,.export-separator{overflow-x:hidden}.export-options mat-slide-toggle,.export-combine-layers mat-slide-toggle,.export-separator mat-slide-toggle{width:100%;margin:10px}.export-options mat-slide-toggle ::ng-deep .mat-slide-toggle-content,.export-combine-layers mat-slide-toggle ::ng-deep .mat-slide-toggle-content,.export-separator mat-slide-toggle ::ng-deep .mat-slide-toggle-content{width:calc(100% - 60px)}.export-select-trigger{opacity:.75;font-size:.75em}\n"] }]
     }], function () { return [{ type: ImportService }, { type: ExportService }, { type: i2$1.LanguageService }, { type: i2$1.MessageService }, { type: StyleListService }, { type: StyleService }, { type: i2$2.UntypedFormBuilder }, { type: i2$1.ConfigService }, { type: i0.ChangeDetectorRef }, { type: i2$1.StorageService }, { type: DownloadService }]; }, { selectFirstProj: [{
             type: Input
         }], map: [{
@@ -31798,7 +32659,7 @@ MeasurerItemComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Measu
     } }, dependencies: [i1$1.NgForOf, i13.MatFormField, i13.MatLabel, i14.MatInput, i15.MatSelect, i9.MatOption, i1$1.AsyncPipe, i7.TranslatePipe, MeasureFormatPipe], styles: ["[_nghost-%COMP%]{display:flex;width:100%;padding:5px 10px}.measure-field[_ngcontent-%COMP%]{pointer-events:none;display:flex;flex-flow:column nowrap;width:100%}.unit-field[_ngcontent-%COMP%]{width:50px;margin-left:10px;margin-top:10px}"], changeDetection: 0 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MeasurerItemComponent, [{
         type: Component,
-        args: [{ selector: 'igo-measurer-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-form-field\n  class=\"measure-field\"\n  appearance=\"outline\"\n  floatLabel=\"always\">\n  <mat-label>{{placeholder}}</mat-label>\n  <input\n    matInput\n    [readonly]=\"true\"\n    [value]=\"((measure$ | async) || 0) | measureFormat: measureUnit\">\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    <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}.measure-field{pointer-events:none;display:flex;flex-flow:column nowrap;width:100%}.unit-field{width:50px;margin-left:10px;margin-top:10px}\n"] }]
+        args: [{ selector: 'igo-measurer-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-form-field\r\n  class=\"measure-field\"\r\n  appearance=\"outline\"\r\n  floatLabel=\"always\">\r\n  <mat-label>{{placeholder}}</mat-label>\r\n  <input\r\n    matInput\r\n    [readonly]=\"true\"\r\n    [value]=\"((measure$ | async) || 0) | measureFormat: measureUnit\">\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    <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}.measure-field{pointer-events:none;display:flex;flex-flow:column nowrap;width:100%}.unit-field{width:50px;margin-left:10px;margin-top:10px}\n"] }]
     }], function () { return []; }, { measureType: [{
             type: Input
         }], measureUnit: [{
@@ -31976,6 +32837,64 @@ IgoOverlayModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({});
     }], null, null); })();
 (function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(IgoOverlayModule, { declarations: [OverlayDirective], exports: [OverlayDirective] }); })();
 
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2016-2017 Dan "Ducky" Little
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+function jsGeoPdfPlugin(jsPDFAPI) {
+    const setGeoArea = function (pdfExt, geoExt) {
+        const bbox = pdfExt.join(' ');
+        // the ordering may seem odd here but PDF
+        //  flips the Y axis upside down and this accounts for that
+        //  change.
+        const minx = geoExt[0];
+        const maxx = geoExt[2];
+        const maxy = geoExt[1];
+        const miny = geoExt[3];
+        const bounds = [miny, minx, maxy, minx, maxy, maxx, miny, maxx].join(' ');
+        const bbox_obj = this.internal.newAdditionalObject();
+        const bounds_obj = this.internal.newAdditionalObject();
+        const proj_obj = this.internal.newAdditionalObject();
+        proj_obj.content = '<< /EPSG 3857 /Type /PROJCS /WKT (PROJCS["WGS_1984_Web_Mercator_Auxiliary_Sphere"' +
+            ',+GEOGCS["GCS_WGS_1984",DATUM["D_WGS_1984",SPHEROID["WGS_1984",6378137.0,298.257223563]],PRIMEM["Greenwich",0.0]' +
+            ',UNIT["Degree",0.017453292519943295]],PROJECTION["Mercator_Auxiliary_Sphere"],PARAMETER["False_Easting",0.0]' +
+            ',PARAMETER["False_Northing",0.0],PARAMETER["Central_Meridian",0.0],PARAMETER["Standard_Parallel_1",0.0]' +
+            ',PARAMETER["Auxiliary_Sphere_Type",0.0],UNIT["Meter",1.0]]) >>';
+        bounds_obj.content = '<< /Bounds [ 0 1 0 0 1 0 1 1 ] /GCS ' +
+            proj_obj.objId + ' 0 R /GPTS [ ' + bounds + ' ] /LPTS [ 0 1 0 0 1 0 1 1 ] /Subtype /GEO /Type /Measure >>';
+        bbox_obj.content = '<< /BBox [ ' + bbox + ' ] /Measure ' + bounds_obj.objId + ' 0 R /Name (Layer) /Type /Viewport >>';
+        const title_obj = this.internal.newAdditionalObject();
+        const date = new Date().toLocaleDateString('en-CA');
+        title_obj.content = '<< /Name IGO2 /Type OCG /Date ' + date + ' >>';
+        return bbox_obj.objId;
+    };
+    jsPDFAPI.setGeoArea = function (pdfExt, geoExt) {
+        this.internal.events.subscribe('putPage', function () {
+            const bbox_id = setGeoArea.call(this, pdfExt, geoExt);
+            this.internal.write('/VP [ ' + bbox_id + ' 0 R ]');
+        });
+    };
+}
+
 class PrintService {
     constructor(http, messageService, activityService, languageService, configService) {
         this.http = http;
@@ -31983,6 +32902,15 @@ class PrintService {
         this.activityService = activityService;
         this.languageService = languageService;
         this.configService = configService;
+        this.TEXTPDFFONT = {
+            titleFont: 'Times',
+            titleFontStyle: 'bold',
+            subtitleFont: 'Times',
+            subtitleFontStyle: 'bold',
+            commentFont: 'courier',
+            commentFontStyle: 'normal',
+            commentFontSize: 16
+        };
     }
     print(map, options) {
         const status$ = new Subject();
@@ -31991,9 +32919,11 @@ class PrintService {
         const orientation = options.orientation;
         const legendPostion = options.legendPosition;
         this.activityId = this.activityService.register();
-        const doc = new jspdf({
+        jsGeoPdfPlugin(jsPDF.API);
+        const doc = new jsPDF({
             orientation,
-            format: paperFormat.toLowerCase()
+            format: paperFormat.toLowerCase(),
+            unit: 'mm' // default
         });
         const dimensions = [
             doc.internal.pageSize.width,
@@ -32003,17 +32933,21 @@ class PrintService {
         const width = dimensions[0] - margins[3] - margins[1];
         const height = dimensions[1] - margins[0] - margins[2];
         const size = [width, height];
-        let titleSizeResults = [0, 0];
+        let titleSizes;
+        let subtitleSizes;
+        // PDF title
         if (options.title !== undefined) {
-            titleSizeResults = this.getTitleSize(options.title, width, height, doc); // return : size(pt) and left margin (mm)
-            this.addTitle(doc, options.title, titleSizeResults[0], margins[3] + titleSizeResults[1], titleSizeResults[0] * (25.4 / 72));
+            const fontSizeInPt = Math.round(2 * (height + 145) * 0.05) / 2; //calculate the fontSize title from the page height.
+            titleSizes = this.getTextPdfObjectSizeAndMarg(options.title, margins, this.TEXTPDFFONT.titleFont, fontSizeInPt, this.TEXTPDFFONT.titleFontStyle, doc);
+            this.addTextInPdfDoc(doc, options.title, this.TEXTPDFFONT.titleFont, this.TEXTPDFFONT.titleFontStyle, titleSizes.fontSize, titleSizes.marginLeft + margins[3], margins[0]);
+            margins[0] = titleSizes.height + margins[0]; // cumulative margin top for next elem to place in pdf doc
         }
+        // PDF subtitle
         if (options.subtitle !== undefined) {
-            let subtitleSizeResult = 0;
-            const titleH = titleSizeResults[0];
-            subtitleSizeResult = this.getSubTitleSize(options.subtitle, width, height, doc); // return : size(pt) and left margin (mm)
-            this.addSubTitle(doc, options.subtitle, titleH * 0.7, margins[3] + subtitleSizeResult, titleH * 1.7 * (25.4 / 72));
-            margins[0] = margins[0] + titleSizeResults[0] * 0.7 * (25.4 / 72);
+            subtitleSizes = this.getTextPdfObjectSizeAndMarg(options.subtitle, margins, this.TEXTPDFFONT.subtitleFont, titleSizes.fontSize * 0.7, // 70% size of title
+            this.TEXTPDFFONT.subtitleFontStyle, doc);
+            this.addTextInPdfDoc(doc, options.subtitle, this.TEXTPDFFONT.subtitleFont, this.TEXTPDFFONT.subtitleFontStyle, subtitleSizes.fontSize, subtitleSizes.marginLeft + margins[3], margins[0]);
+            margins[0] += 5; // cumulative marg top for next elem to place in pdf doc. 5 is a fix it could be adjust
         }
         if (options.showProjection === true || options.showScale === true) {
             this.addProjScale(doc, map, resolution, options.showProjection, options.showScale);
@@ -32025,6 +32959,10 @@ class PrintService {
             if (status === SubjectStatus.Done) {
                 await this.addScale(doc, map, margins);
                 await this.handleMeasureLayer(doc, map, margins);
+                const width = this.imgSizeAdded[0];
+                const height = this.imgSizeAdded[1];
+                const res = 1;
+                this.addGeoRef(doc, map, width, height, res, margins);
                 if (options.legendPosition !== 'none') {
                     if (['topleft', 'topright', 'bottomleft', 'bottomright'].indexOf(options.legendPosition) > -1) {
                         await this.addLegendSamePage(doc, map, margins, resolution, options.legendPosition);
@@ -32044,6 +32982,20 @@ class PrintService {
         });
         return status$;
     }
+    // ref GeoMoose https://github.com/geomoose/gm3/tree/main/src/gm3/components/print
+    addGeoRef(doc, map, width, height, resolution, margins) {
+        const unit = 'mm';
+        const docHeight = doc.internal.pageSize.getHeight();
+        // x,y = margin left-bottom corner for img in pdf doc
+        const x = margins[3];
+        const y = docHeight - margins[0] - height;
+        let pdf_extents = [x, y, x + width, y + height];
+        for (let i = 0; i < pdf_extents.length; i++) {
+            pdf_extents[i] = this.pdf_units2points(pdf_extents[i], unit);
+        }
+        const mapExtent = map.viewController.getExtent('EPSG:3857');
+        doc.setGeoArea(pdf_extents, mapExtent);
+    }
     /**
      * Add measure overlay on the map on the document when the measure layer is present
      * @param  doc - Pdf document where measure tooltip will be added
@@ -32163,66 +33115,46 @@ class PrintService {
         }
         return status$;
     }
-    getTitleSize(title, pageWidth, pageHeight, doc) {
+    getTextPdfObjectSizeAndMarg(text, margins, font, fontSizeInPt, fontStyle, doc) {
         const pdfResolution = 96;
-        const titleSize = Math.round(2 * (pageHeight + 145) * 0.05) / 2;
-        doc.setFont('Times', 'bold');
-        const width = doc.getTextWidth(title);
-        const titleWidth = doc.getStringUnitWidth(title) * titleSize / doc.internal.scaleFactor;
-        const titleTailleMinimale = Math.round(2 * (pageHeight + 150) * 0.037) / 2;
-        let titleFontSize = 0;
-        let titleMarginLeft;
-        if (titleWidth >= (pageWidth)) {
-            titleMarginLeft = 0;
-            titleFontSize = Math.round(((pageWidth / title.length) * pdfResolution) / 25.4);
-            // If the formula to find the font size gives below the defined minimum size
-            if (titleFontSize < titleTailleMinimale) {
-                titleFontSize = titleTailleMinimale;
-            }
+        const docWidth = doc.internal.pageSize.getWidth();
+        const pageWidth = docWidth - margins[1] - margins[3];
+        // important to set it first, the textDimension change when font change!
+        doc.setFont(font, fontStyle);
+        doc.setFontSize(fontSizeInPt);
+        let textDimensions = doc.getTextDimensions(text);
+        let textMarginLeft;
+        if (textDimensions.w > pageWidth) {
+            // if the text is to long, reduce fontSize 70% and the overflow with be cut in print...
+            textMarginLeft = 0;
+            fontSizeInPt = fontSizeInPt * 0.7;
+            doc.setFontSize(fontSizeInPt);
+            textDimensions = doc.getTextDimensions(text);
         }
         else {
-            titleMarginLeft = (pageWidth - titleWidth) / 2;
-            titleFontSize = titleSize;
+            textMarginLeft = (pageWidth - textDimensions.w) / 2;
         }
-        return [titleFontSize, titleMarginLeft];
-    }
-    getSubTitleSize(subtitle, pageWidth, pageHeight, doc) {
-        const subtitleSize = 0.7 * Math.round(2 * (pageHeight + 145) * 0.05) / 2; // 70% of the title's font size
-        doc.setFont('Times', 'bold');
-        const subtitleWidth = doc.getStringUnitWidth(subtitle) * subtitleSize / doc.internal.scaleFactor;
-        let subtitleMarginLeft;
-        if (subtitleWidth >= (pageWidth)) {
-            subtitleMarginLeft = 0;
-        }
-        else {
-            subtitleMarginLeft = (pageWidth - subtitleWidth) / 2;
-        }
-        return subtitleMarginLeft;
-    }
-    addTitle(doc, title, titleFontSize, titleMarginLeft, titleMarginTop) {
-        doc.setFont('Times', 'bold');
-        doc.setFontSize(titleFontSize);
-        doc.text(title, titleMarginLeft, titleMarginTop);
-    }
-    addSubTitle(doc, subtitle, subtitleFontSize, subtitleMarginLeft, subtitleMarginTop) {
-        doc.setFont('Times', 'bold');
-        doc.setFontSize(subtitleFontSize);
-        doc.text(subtitle, subtitleMarginLeft, subtitleMarginTop);
+        return {
+            'fontSize': fontSizeInPt,
+            'marginLeft': textMarginLeft,
+            'height': textDimensions.h
+        };
     }
     /**
      * Add comment to the document
      * * @param  doc - pdf document
      * * @param  comment - Comment to add in the document
-     * * @param  size - Size of the document
      */
     addComment(doc, comment) {
-        const commentSize = 16;
-        const commentMarginLeft = 20;
-        const marginBottom = 5;
-        const heightPixels = doc.internal.pageSize.height - marginBottom;
-        doc.setFont('courier');
-        doc.setFontSize(commentSize);
-        doc.text(comment, commentMarginLeft, heightPixels);
+        const commentMarginLeft = 20; //margin left and bottom is fix
+        const commentMarginBottom = 5;
+        const marginTop = doc.internal.pageSize.height - commentMarginBottom;
+        this.addTextInPdfDoc(doc, comment, this.TEXTPDFFONT.commentFont, this.TEXTPDFFONT.commentFontStyle, this.TEXTPDFFONT.commentFontSize, commentMarginLeft, marginTop);
+    }
+    addTextInPdfDoc(doc, textToAdd, textFont, textFontStyle, textFontSize, textMarginLeft, textMarginTop) {
+        doc.setFont(textFont, textFontStyle);
+        doc.setFontSize(textFontSize);
+        doc.text(textToAdd, textMarginLeft, textMarginTop);
     }
     /**
      * Add projection and/or scale to the document
@@ -32394,9 +33326,14 @@ class PrintService {
             image = canvas.toDataURL('image/png');
         }
         if (image !== undefined) {
+            if (image.length < 20) { //  img is corrupt    todo: fix addScale in mobile make a corrupt img
+                console.log('Warning: An image cannot be print in pdf file');
+                return;
+            }
             const imageSize = this.getImageSizeToFitPdf(doc, canvas, margins);
             doc.addImage(image, 'PNG', margins[3], margins[0], imageSize[0], imageSize[1]);
             doc.rect(margins[3], margins[0], imageSize[0], imageSize[1]);
+            this.imgSizeAdded = imageSize; // keep img size for georef later
         }
     }
     // TODO fix printing with image resolution
@@ -32630,7 +33567,7 @@ class PrintService {
      * @param  doc - Document to save
      */
     async saveDoc(doc) {
-        await doc.save('map.pdf', { returnPromise: true });
+        await doc.save('map_georef.pdf', { returnPromise: true });
     }
     /**
      * Calculate the best Image size to fit in pdf
@@ -32642,8 +33579,8 @@ class PrintService {
         // Define variable to calculate best size to fit in one page
         const pageHeight = doc.internal.pageSize.getHeight() - (margins[0] + margins[2]);
         const pageWidth = doc.internal.pageSize.getWidth() - (margins[1] + margins[3]);
-        const canHeight = canvas.height;
-        const canWidth = canvas.width;
+        const canHeight = this.pdf_units2points(canvas.height, 'mm');
+        const canWidth = this.pdf_units2points(canvas.width, 'mm');
         const heightRatio = canHeight / pageHeight;
         const widthRatio = canWidth / pageWidth;
         const maxRatio = heightRatio > widthRatio ? heightRatio : widthRatio;
@@ -32759,6 +33696,41 @@ class PrintService {
             delete that.zipFile;
         });
     }
+    pdf_units2points(n, unit) {
+        let k = 1;
+        // this code is borrowed from jsPDF
+        //  as it does not expose a public API
+        //  for converting units to points.
+        switch (unit) {
+            case 'pt':
+                k = 1;
+                break;
+            case 'mm':
+                k = 72 / 25.4;
+                break;
+            case 'cm':
+                k = 72 / 2.54;
+                break;
+            case 'in':
+                k = 72;
+                break;
+            case 'px':
+                k = 96 / 72;
+                break;
+            case 'pc':
+                k = 12;
+                break;
+            case 'em':
+                k = 12;
+                break;
+            case 'ex':
+                k = 6;
+                break;
+            default:
+                throw new Error('Invalid unit: ' + unit);
+        }
+        return n * k;
+    }
 }
 PrintService.ɵfac = function PrintService_Factory(t) { return new (t || PrintService)(i0.ɵɵinject(i1$2.HttpClient), i0.ɵɵinject(i2$1.MessageService), i0.ɵɵinject(i2$1.ActivityService), i0.ɵɵinject(i2$1.LanguageService), i0.ɵɵinject(i2$1.ConfigService)); };
 PrintService.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: PrintService, factory: PrintService.ɵfac, providedIn: 'root' });
@@ -33156,7 +34128,7 @@ PrintFormComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrintFor
     } }, dependencies: [i1$1.NgForOf, i2$2.ɵNgNoValidate, i2$2.DefaultValueAccessor, i2$2.NgControlStatus, i2$2.NgControlStatusGroup, i2$2.FormGroupDirective, i2$2.FormControlName, i3.MatButton, i13.MatFormField, i15.MatSelect, i9.MatOption, i14.MatInput, i23.MatSlideToggle, i1$1.AsyncPipe, i7.TranslatePipe, i5$1.KeyValuePipe], styles: ["mat-form-field[_ngcontent-%COMP%]{width:100%}.print-slide-toggle-container[_ngcontent-%COMP%]{overflow-x:hidden}.print-slide-toggle-container[_ngcontent-%COMP%]   mat-slide-toggle[_ngcontent-%COMP%]{width:100%;margin:10px}.print-slide-toggle-container[_ngcontent-%COMP%]   mat-slide-toggle[_ngcontent-%COMP%]     .mat-slide-toggle-content{width:calc(100% - 60px)}.print-option[_ngcontent-%COMP%]{display:block;margin-right:10px;margin-bottom:15px}.print-button-top-padding[_ngcontent-%COMP%]{padding-top:25px}.igo-form[_ngcontent-%COMP%]{padding:10px 5px 5px}.igo-form-button-group[_ngcontent-%COMP%]{text-align:center}"] });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrintFormComponent, [{
         type: Component,
-        args: [{ selector: 'igo-print-form', template: "<form class=\"igo-form\" [formGroup]=\"form\">\n  <div class=\"igo-input-container\">\n    <mat-form-field>\n      <input\n        matInput\n        formControlName=\"title\"\n        placeholder=\"{{'igo.geo.printForm.title' | translate}}\">\n    </mat-form-field>\n  </div>\n  <div class=\"igo-input-container\">\n    <mat-form-field>\n      <input\n        matInput\n        formControlName=\"subtitle\"\n        placeholder=\"{{'igo.geo.printForm.subtitle' | translate}}\">\n    </mat-form-field>\n  </div>\n  <div class=\"igo-input-container\">\n    <mat-form-field>\n      <input\n        matInput\n        formControlName=\"comment\"\n        placeholder=\"{{'igo.geo.printForm.comment' | translate}}\">\n    </mat-form-field>\n  </div>\n\n  <div class=\"igo-input-container\">\n    <div class=\"print-slide-toggle-container mat-typography\">\n      <mat-slide-toggle\n        class=\"print-option\"\n        formControlName=\"showProjection\"\n        [labelPosition]=\"'before'\">\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        {{'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        {{'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-select\n        formControlName=\"legendPosition\"\n        placeholder=\"{{'igo.geo.printForm.legendPosition' | translate}}\">\n        <mat-option *ngFor=\"let legendPosition of legendPositions | keyvalue \" [value]=\"legendPosition.key\">\n            {{'igo.geo.printForm.legendPositions.' + legendPosition.value | translate}}\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-select (selectionChange)=\"toggleImageSaveProp()\"\n        formControlName=\"outputFormat\"\n        placeholder=\"{{'igo.geo.printForm.outputFormat' | translate}}\">\n        <mat-option *ngFor=\"let outputFormat of outputFormats | keyvalue \" [value]=\"outputFormat.key\">\n            {{outputFormat.value}}\n        </mat-option>\n      </mat-select>\n    </mat-form-field>\n  </div>\n\n  <div class=\"igo-input-container\" [style.display]=\"isPrintService ? 'block' : 'none'\">\n    <mat-form-field>\n      <mat-select\n        formControlName=\"paperFormat\"\n        placeholder=\"{{'igo.geo.printForm.paperFormat' | translate}}\">\n        <mat-option *ngFor=\"let paperFormat of paperFormats | keyvalue \" [value]=\"paperFormat.key\">\n          {{('igo.geo.printForm.paperFormats.' + paperFormat.value) | translate}}\n        </mat-option>\n      </mat-select>\n    </mat-form-field>\n  </div>\n\n  <div class=\"igo-input-container\" [style.display]=\"isPrintService ? 'none' : 'block'\">\n    <mat-form-field>\n      <mat-select\n        formControlName=\"imageFormat\"\n        placeholder=\"{{'igo.geo.printForm.imageFormat' | translate}}\">\n        <mat-option *ngFor=\"let imageFormat of imageFormats | keyvalue \" [value]=\"imageFormat.key\">\n          {{imageFormat.value}}\n        </mat-option>\n      </mat-select>\n    </mat-form-field>\n  </div>\n\n  <div class=\"igo-input-container\" style=\"display: none;\">\n    <mat-form-field>\n      <mat-select\n        formControlName=\"resolution\"\n        placeholder=\"{{'igo.geo.printForm.resolution' | translate}}\">\n        <mat-option *ngFor=\"let resolution of resolutions | keyvalue \" [value]=\"resolution.key\">\n          {{resolution.value + ' PPI'}}\n        </mat-option>\n      </mat-select>\n    </mat-form-field>\n  </div>\n\n  <div class=\"igo-input-container\" [style.display]=\"isPrintService ? 'block' : 'none'\">\n    <mat-form-field>\n      <mat-select\n        formControlName=\"orientation\"\n        placeholder=\"{{'igo.geo.printForm.orientation' | translate}}\">\n        <mat-option *ngFor=\"let orientation of orientations | keyvalue \" [value]=\"orientation.key\">\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      {{'igo.geo.printForm.saveBtn' | translate}}\n    </button>\n  </div>\n\n</form>\n", styles: ["mat-form-field{width:100%}.print-slide-toggle-container{overflow-x:hidden}.print-slide-toggle-container mat-slide-toggle{width:100%;margin:10px}.print-slide-toggle-container mat-slide-toggle ::ng-deep .mat-slide-toggle-content{width:calc(100% - 60px)}.print-option{display:block;margin-right:10px;margin-bottom:15px}.print-button-top-padding{padding-top:25px}.igo-form{padding:10px 5px 5px}.igo-form-button-group{text-align:center}\n"] }]
+        args: [{ selector: 'igo-print-form', template: "<form class=\"igo-form\" [formGroup]=\"form\">\r\n  <div class=\"igo-input-container\">\r\n    <mat-form-field>\r\n      <input\r\n        matInput\r\n        formControlName=\"title\"\r\n        placeholder=\"{{'igo.geo.printForm.title' | translate}}\">\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        matInput\r\n        formControlName=\"subtitle\"\r\n        placeholder=\"{{'igo.geo.printForm.subtitle' | translate}}\">\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        matInput\r\n        formControlName=\"comment\"\r\n        placeholder=\"{{'igo.geo.printForm.comment' | translate}}\">\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <div class=\"igo-input-container\">\r\n    <div class=\"print-slide-toggle-container mat-typography\">\r\n      <mat-slide-toggle\r\n        class=\"print-option\"\r\n        formControlName=\"showProjection\"\r\n        [labelPosition]=\"'before'\">\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        {{'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        {{'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-select\r\n        formControlName=\"legendPosition\"\r\n        placeholder=\"{{'igo.geo.printForm.legendPosition' | translate}}\">\r\n        <mat-option *ngFor=\"let legendPosition of legendPositions | keyvalue \" [value]=\"legendPosition.key\">\r\n            {{'igo.geo.printForm.legendPositions.' + legendPosition.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-input-container\">\r\n    <mat-form-field>\r\n      <mat-select (selectionChange)=\"toggleImageSaveProp()\"\r\n        formControlName=\"outputFormat\"\r\n        placeholder=\"{{'igo.geo.printForm.outputFormat' | translate}}\">\r\n        <mat-option *ngFor=\"let outputFormat of outputFormats | keyvalue \" [value]=\"outputFormat.key\">\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 class=\"igo-input-container\" [style.display]=\"isPrintService ? 'block' : 'none'\">\r\n    <mat-form-field>\r\n      <mat-select\r\n        formControlName=\"paperFormat\"\r\n        placeholder=\"{{'igo.geo.printForm.paperFormat' | translate}}\">\r\n        <mat-option *ngFor=\"let paperFormat of paperFormats | keyvalue \" [value]=\"paperFormat.key\">\r\n          {{('igo.geo.printForm.paperFormats.' + paperFormat.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-input-container\" [style.display]=\"isPrintService ? 'none' : 'block'\">\r\n    <mat-form-field>\r\n      <mat-select\r\n        formControlName=\"imageFormat\"\r\n        placeholder=\"{{'igo.geo.printForm.imageFormat' | translate}}\">\r\n        <mat-option *ngFor=\"let imageFormat of imageFormats | keyvalue \" [value]=\"imageFormat.key\">\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\" style=\"display: none;\">\r\n    <mat-form-field>\r\n      <mat-select\r\n        formControlName=\"resolution\"\r\n        placeholder=\"{{'igo.geo.printForm.resolution' | translate}}\">\r\n        <mat-option *ngFor=\"let resolution of resolutions | keyvalue \" [value]=\"resolution.key\">\r\n          {{resolution.value + ' PPI'}}\r\n        </mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <div class=\"igo-input-container\" [style.display]=\"isPrintService ? 'block' : 'none'\">\r\n    <mat-form-field>\r\n      <mat-select\r\n        formControlName=\"orientation\"\r\n        placeholder=\"{{'igo.geo.printForm.orientation' | translate}}\">\r\n        <mat-option *ngFor=\"let orientation of orientations | keyvalue \" [value]=\"orientation.key\">\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      {{'igo.geo.printForm.saveBtn' | translate}}\r\n    </button>\r\n  </div>\r\n\r\n</form>\r\n", styles: ["mat-form-field{width:100%}.print-slide-toggle-container{overflow-x:hidden}.print-slide-toggle-container mat-slide-toggle{width:100%;margin:10px}.print-slide-toggle-container mat-slide-toggle ::ng-deep .mat-slide-toggle-content{width:calc(100% - 60px)}.print-option{display:block;margin-right:10px;margin-bottom:15px}.print-button-top-padding{padding-top:25px}.igo-form{padding:10px 5px 5px}.igo-form-button-group{text-align:center}\n"] }]
     }], function () { return [{ type: i2$2.UntypedFormBuilder }]; }, { disabled$: [{
             type: Input
         }], imageFormat: [{
@@ -33289,7 +34261,7 @@ PrintComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrintCompone
     } }, dependencies: [PrintFormComponent], encapsulation: 2 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrintComponent, [{
         type: Component,
-        args: [{ selector: 'igo-print', template: "<igo-print-form\n  [outputFormat]=\"outputFormat\"\n  [paperFormat]=\"paperFormat\"\n  [orientation]=\"orientation\"\n  [imageFormat]=\"imageFormat\"\n  [resolution]=\"resolution\"\n  [legendPosition]=\"legendPosition\"\n  [disabled$]=\"disabled$\"\n  (submit)=\"handleFormSubmit($event)\">\n</igo-print-form>\n" }]
+        args: [{ selector: 'igo-print', template: "<igo-print-form\r\n  [outputFormat]=\"outputFormat\"\r\n  [paperFormat]=\"paperFormat\"\r\n  [orientation]=\"orientation\"\r\n  [imageFormat]=\"imageFormat\"\r\n  [resolution]=\"resolution\"\r\n  [legendPosition]=\"legendPosition\"\r\n  [disabled$]=\"disabled$\"\r\n  (submit)=\"handleFormSubmit($event)\">\r\n</igo-print-form>\r\n" }]
     }], function () { return [{ type: PrintService }]; }, { map: [{
             type: Input
         }], outputFormat: [{
@@ -34191,7 +35163,7 @@ DirectionsInputsComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: D
     } }, dependencies: [i1$1.NgClass, i1$1.NgForOf, i1$1.NgIf, i3$1.CdkDropList, i3$1.CdkDrag, i3$1.CdkDragHandle, i2$2.DefaultValueAccessor, i2$2.NgControlStatus, i2$2.NgModel, i2.MatIcon, i3.MatButton, i13.MatFormField, i13.MatSuffix, i14.MatInput, i9.MatOption, i9.MatOptgroup, i4.MatTooltip, i11$1.MatAutocomplete, i11$1.MatAutocompleteTrigger, i1$1.AsyncPipe, i7.TranslatePipe], styles: [".igo-input-container[_ngcontent-%COMP%]{width:100%}.igo-input-container[_ngcontent-%COMP%]   mat-form-field[_ngcontent-%COMP%]{width:100%}.igo-input-container.reduce[_ngcontent-%COMP%]{width:70%}.igo-input-container.reduce[_ngcontent-%COMP%]   mat-form-field[_ngcontent-%COMP%]{width:100%}.stops-list[_ngcontent-%COMP%]{max-width:100%;min-height:60px;display:block;background:white;border-radius:4px;overflow:hidden;padding:20px 10px}.swipe-vertical[_ngcontent-%COMP%]{cursor:move}.stop-box[_ngcontent-%COMP%]{height:60px;padding:20px 10px;color:#000000de;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;background:white}.cdk-drag-preview[_ngcontent-%COMP%]{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder[_ngcontent-%COMP%]{opacity:0}.cdk-drag-animating[_ngcontent-%COMP%]{transition:transform .25s cubic-bezier(0,0,.2,1)}.stops-list.cdk-drop-list-dragging[_ngcontent-%COMP%]   .stop-box[_ngcontent-%COMP%]:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}"] });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DirectionsInputsComponent, [{
         type: Component,
-        args: [{ selector: 'igo-directions-inputs', template: "<div cdkDropList class=\"stops-list\" (cdkDropListDropped)=\"drop($event)\">\n  <div 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\" class=\"stop-box mat-typography\" *ngFor=\"let stop of stopsStore.view.all$() | async; let i = index;\" cdkDrag>\n    <div [ngClass]=\"getNgClass(stop)\">\n      <mat-form-field>\n        <input id=\"{{stop.id}}\" 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        <button \n            mat-button \n            *ngIf=\"(stop.text || stop.coordinates) && stopWithHover && stop.id===stopWithHover.id\"\n            matTooltipShowDelay=\"500\"\n            [matTooltip]=\"'igo.geo.directionsForm.clearStop' | translate\"\n            matSuffix mat-icon-button color=\"warn\" aria-label=\"Clear\" (click)=\"clearStop(stop)\">\n            <mat-icon svgIcon=\"close\"></mat-icon>\n        </button>\n      \n        <mat-autocomplete [displayWith]=\"getOptionText\" #auto=\"matAutocomplete\" (optionSelected)=\"chooseProposal($event,stop)\">\n          <mat-optgroup *ngFor=\"let source of stop.searchProposals\" [label]=\"source.source.title\" [disabled]=\"source.source.enabled === false\">\n          <mat-option *ngFor=\"let result of source.results\" [value]=\"result\" \n          matTooltipShowDelay=\"500\" [matTooltip]=\"result.meta ? result.meta.title : ''\">\n            {{ result.meta ? result.meta.title : '' }}\n          </mat-option>\n          </mat-optgroup>\n        </mat-autocomplete>\n      </mat-form-field>\n    </div>\n\n\n\n\n    <div class=\"igo-form-button-group\" *ngIf=\"!stopIsDragged && stopWithHover && stop.id === stopWithHover.id\">\n      <button class=\"swipe-vertical\" cdkDragHandle mat-icon-button tooltip-position=\"below\" matTooltipShowDelay=\"500\"\n        [matTooltip]=\"'igo.geo.directionsForm.moveStop' | translate\" color=\"primary\">\n        <mat-icon svgIcon=\"gesture-swipe-vertical\"></mat-icon>\n      </button>\n\n      <button *ngIf=\"(stopsStore.count$ | async)> 2\" mat-icon-button tooltip-position=\"below\" matTooltipShowDelay=\"500\"\n        [matTooltip]=\"'igo.geo.directionsForm.removeStop' | translate\" color=\"warn\" (click)=\"removeStop(stop)\">\n        <mat-icon svgIcon=\"delete\"></mat-icon>\n      </button>\n      <button *ngIf=\"(stopsStore.count$ | async)<= 2\" disabled=\"true\" mat-icon-button tooltip-position=\"below\"\n        matTooltipShowDelay=\"500\" [matTooltip]=\"'igo.geo.directionsForm.removeStop' | translate\" color=\"warn\">\n        <mat-icon svgIcon=\"blank\"></mat-icon>\n      </button>\n    </div>\n  </div>\n</div>", styles: [".igo-input-container{width:100%}.igo-input-container mat-form-field{width:100%}.igo-input-container.reduce{width:70%}.igo-input-container.reduce mat-form-field{width:100%}.stops-list{max-width:100%;min-height:60px;display:block;background:white;border-radius:4px;overflow:hidden;padding:20px 10px}.swipe-vertical{cursor:move}.stop-box{height:60px;padding:20px 10px;color:#000000de;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;background:white}.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}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.stops-list.cdk-drop-list-dragging .stop-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"] }]
+        args: [{ selector: 'igo-directions-inputs', template: "<div cdkDropList class=\"stops-list\" (cdkDropListDropped)=\"drop($event)\">\r\n  <div 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\" class=\"stop-box mat-typography\" *ngFor=\"let stop of stopsStore.view.all$() | async; let i = index;\" cdkDrag>\r\n    <div [ngClass]=\"getNgClass(stop)\">\r\n      <mat-form-field>\r\n        <input id=\"{{stop.id}}\" 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        <button \r\n            mat-button \r\n            *ngIf=\"(stop.text || stop.coordinates) && stopWithHover && stop.id===stopWithHover.id\"\r\n            matTooltipShowDelay=\"500\"\r\n            [matTooltip]=\"'igo.geo.directionsForm.clearStop' | translate\"\r\n            matSuffix mat-icon-button color=\"warn\" aria-label=\"Clear\" (click)=\"clearStop(stop)\">\r\n            <mat-icon svgIcon=\"close\"></mat-icon>\r\n        </button>\r\n      \r\n        <mat-autocomplete [displayWith]=\"getOptionText\" #auto=\"matAutocomplete\" (optionSelected)=\"chooseProposal($event,stop)\">\r\n          <mat-optgroup *ngFor=\"let source of stop.searchProposals\" [label]=\"source.source.title\" [disabled]=\"source.source.enabled === false\">\r\n          <mat-option *ngFor=\"let result of source.results\" [value]=\"result\" \r\n          matTooltipShowDelay=\"500\" [matTooltip]=\"result.meta ? result.meta.title : ''\">\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\r\n\r\n\r\n    <div class=\"igo-form-button-group\" *ngIf=\"!stopIsDragged && stopWithHover && stop.id === stopWithHover.id\">\r\n      <button class=\"swipe-vertical\" cdkDragHandle mat-icon-button tooltip-position=\"below\" matTooltipShowDelay=\"500\"\r\n        [matTooltip]=\"'igo.geo.directionsForm.moveStop' | translate\" color=\"primary\">\r\n        <mat-icon svgIcon=\"gesture-swipe-vertical\"></mat-icon>\r\n      </button>\r\n\r\n      <button *ngIf=\"(stopsStore.count$ | async)> 2\" mat-icon-button tooltip-position=\"below\" matTooltipShowDelay=\"500\"\r\n        [matTooltip]=\"'igo.geo.directionsForm.removeStop' | translate\" color=\"warn\" (click)=\"removeStop(stop)\">\r\n        <mat-icon svgIcon=\"delete\"></mat-icon>\r\n      </button>\r\n      <button *ngIf=\"(stopsStore.count$ | async)<= 2\" disabled=\"true\" mat-icon-button tooltip-position=\"below\"\r\n        matTooltipShowDelay=\"500\" [matTooltip]=\"'igo.geo.directionsForm.removeStop' | translate\" color=\"warn\">\r\n        <mat-icon svgIcon=\"blank\"></mat-icon>\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".igo-input-container{width:100%}.igo-input-container mat-form-field{width:100%}.igo-input-container.reduce{width:70%}.igo-input-container.reduce mat-form-field{width:100%}.stops-list{max-width:100%;min-height:60px;display:block;background:white;border-radius:4px;overflow:hidden;padding:20px 10px}.swipe-vertical{cursor:move}.stop-box{height:60px;padding:20px 10px;color:#000000de;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;background:white}.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}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.stops-list.cdk-drop-list-dragging .stop-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"] }]
     }], function () { return [{ type: i2$1.LanguageService }]; }, { stopsStore: [{
             type: Input
         }], stopsFeatureStore: [{
@@ -34681,7 +35653,7 @@ DirectionsButtonsComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
     } }, dependencies: [i1$1.NgIf, i2.MatIcon, i3.MatButton, i4.MatTooltip, i1$1.AsyncPipe, i7.TranslatePipe] });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DirectionsButtonsComponent, [{
         type: Component,
-        args: [{ selector: 'igo-directions-buttons', template: "<div class=\"igo-form-button-group\">\n  <button mat-icon-button tooltip-position=\"below\" matTooltipShowDelay=\"500\"\n    [matTooltip]=\"'igo.geo.directionsForm.addStop' | translate\" color=\"primary\" (click)=\"addStop()\">\n    <mat-icon svgIcon=\"map-marker-plus\"></mat-icon>\n  </button>\n  <button mat-icon-button tooltip-position=\"below\" matTooltipShowDelay=\"500\"\n    *ngIf=\"(routesFeatureStore.count$ | async)>=1 || (stopsStore.count$ | async)>=1\"\n    [matTooltip]=\"'igo.geo.directionsForm.resetDirectionsBtn' | translate\" color=\"warn\" (click)=\"resetStops()\">\n    <mat-icon svgIcon=\"file-restore\"></mat-icon>\n  </button>\n  <button mat-icon-button tooltip-position=\"below\" matTooltipShowDelay=\"500\"\n    *ngIf=\"(routesFeatureStore.count$ | async)>=1\" (click)=\"zoomRoute()\"\n    [matTooltip]=\"'igo.geo.directionsForm.zoomRoute' | translate\" color=\"primary\">\n    <mat-icon svgIcon=\"magnify-plus-outline\"></mat-icon>\n  </button>\n  <button mat-icon-button tooltip-position=\"below\" matTooltipShowDelay=\"500\"\n    *ngIf=\"(routesFeatureStore.count$ | async)>=1\" (click)=\"copyDirectionsToClipboard()\"\n    [matTooltip]=\"'igo.geo.directionsForm.copy' | translate\" color=\"primary\">\n    <mat-icon svgIcon=\"content-copy\"></mat-icon>\n  </button>\n  <button mat-icon-button tooltip-position=\"below\" matTooltipShowDelay=\"500\"\n    *ngIf=\"(routesFeatureStore.count$ | async)>=1\" (click)=\"copyLinkToClipboard()\" \n    [matTooltip]=\"'igo.geo.directionsForm.link' | translate\" color=\"primary\">\n    <mat-icon svgIcon=\"link\"></mat-icon>\n  </button>\n</div>" }]
+        args: [{ selector: 'igo-directions-buttons', template: "<div class=\"igo-form-button-group\">\r\n  <button mat-icon-button tooltip-position=\"below\" matTooltipShowDelay=\"500\"\r\n    [matTooltip]=\"'igo.geo.directionsForm.addStop' | translate\" color=\"primary\" (click)=\"addStop()\">\r\n    <mat-icon svgIcon=\"map-marker-plus\"></mat-icon>\r\n  </button>\r\n  <button mat-icon-button tooltip-position=\"below\" matTooltipShowDelay=\"500\"\r\n    *ngIf=\"(routesFeatureStore.count$ | async)>=1 || (stopsStore.count$ | async)>=1\"\r\n    [matTooltip]=\"'igo.geo.directionsForm.resetDirectionsBtn' | translate\" color=\"warn\" (click)=\"resetStops()\">\r\n    <mat-icon svgIcon=\"file-restore\"></mat-icon>\r\n  </button>\r\n  <button mat-icon-button tooltip-position=\"below\" matTooltipShowDelay=\"500\"\r\n    *ngIf=\"(routesFeatureStore.count$ | async)>=1\" (click)=\"zoomRoute()\"\r\n    [matTooltip]=\"'igo.geo.directionsForm.zoomRoute' | translate\" color=\"primary\">\r\n    <mat-icon svgIcon=\"magnify-plus-outline\"></mat-icon>\r\n  </button>\r\n  <button mat-icon-button tooltip-position=\"below\" matTooltipShowDelay=\"500\"\r\n    *ngIf=\"(routesFeatureStore.count$ | async)>=1\" (click)=\"copyDirectionsToClipboard()\"\r\n    [matTooltip]=\"'igo.geo.directionsForm.copy' | translate\" color=\"primary\">\r\n    <mat-icon svgIcon=\"content-copy\"></mat-icon>\r\n  </button>\r\n  <button mat-icon-button tooltip-position=\"below\" matTooltipShowDelay=\"500\"\r\n    *ngIf=\"(routesFeatureStore.count$ | async)>=1\" (click)=\"copyLinkToClipboard()\" \r\n    [matTooltip]=\"'igo.geo.directionsForm.link' | translate\" color=\"primary\">\r\n    <mat-icon svgIcon=\"link\"></mat-icon>\r\n  </button>\r\n</div>" }]
     }], function () { return [{ type: i2$1.LanguageService }, { type: i2$1.MessageService }, { type: i2$1.RouteService, decorators: [{
                 type: Optional
             }] }]; }, { contextUri: [{
@@ -34864,7 +35836,7 @@ DirectionsResultsComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
     } }, dependencies: [i1$1.NgClass, i1$1.NgForOf, i1$1.NgIf, i2$2.NgControlStatus, i2$2.NgModel, i2.MatIcon, i5.MatList, i5.MatListItem, i9.MatLine, i5.MatListIconCssMatStyler, i5.MatListSubheaderCssMatStyler, i11.MatDivider, i13.MatFormField, i9.MatOption, i15.MatSelect, i7.TranslatePipe], styles: [".igo-input-container[_ngcontent-%COMP%]{width:100%;padding:20px 10px}.igo-input-container[_ngcontent-%COMP%]   mat-form-field[_ngcontent-%COMP%]{width:70%}.igo-route-title[_ngcontent-%COMP%]{font-weight:700}.igo-steps[_ngcontent-%COMP%]{cursor:pointer}.mat-line[_ngcontent-%COMP%]{word-wrap:break-word!important;white-space:pre-wrap!important}.mat-line.right[_ngcontent-%COMP%]{text-align:right}.rotate-90[_ngcontent-%COMP%]{transform:rotate(90deg)}.rotate-45[_ngcontent-%COMP%]{transform:rotate(45deg)}.rotate-270[_ngcontent-%COMP%]{transform:rotate(270deg)}.rotate-250[_ngcontent-%COMP%]{transform:rotate(250deg)}.rotate-290[_ngcontent-%COMP%]{transform:rotate(290deg)}.icon-flipped[_ngcontent-%COMP%]{transform:scaleY(-1)}"] });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DirectionsResultsComponent, [{
         type: Component,
-        args: [{ selector: 'igo-directions-results', template: "<div class=\"igo-input-container\" *ngIf=\"directions && activeDirection\">\n    <mat-form-field *ngIf=\"directions && directions.length > 1\">\n        <mat-select placeholder=\"{{'igo.geo.directionsForm.drivingOptions' | translate}}\"\n            (selectionChange)=\"changeRoute()\" [(ngModel)]=\"activeDirection\">\n            <mat-option *ngFor=\"let direction of directions; let cnt = index;\" [value]=\"direction\">\n                Option {{cnt + 1}} : {{formatDistance(direction.distance)}}\n                ({{formatDuration(direction.duration)}})\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 mat-typography\">{{activeDirection.title}}</h2>\n        <h2 mat-subheader>{{formatDistance(activeDirection.distance)}}, {{formatDuration(activeDirection.duration)}}</h2>\n        <mat-list-item class=\"igo-steps\" \n            (mouseenter)=\"showSegment(step)\" \n            (click)=\"showSegment(step,true)\" \n            *ngFor=\"let step of activeDirection.steps; let cnt = index;\" igoListItem>\n            <mat-icon [ngClass]=\"formatStep(step,cnt).cssClass\" mat-list-icon svgIcon=\"{{formatStep(step,cnt).image}}\">\n            </mat-icon>\n\n            <h4 mat-line>{{cnt +1}}. {{formatStep(step,cnt).instruction}}</h4>\n            <h4 mat-line class=\"right\">{{formatDistance(step.distance)}}</h4>\n        </mat-list-item>\n\n        <mat-divider></mat-divider>\n\n    </mat-list>\n\n</div>", styles: [".igo-input-container{width:100%;padding:20px 10px}.igo-input-container mat-form-field{width:70%}.igo-route-title{font-weight:700}.igo-steps{cursor:pointer}.mat-line{word-wrap:break-word!important;white-space:pre-wrap!important}.mat-line.right{text-align:right}.rotate-90{transform:rotate(90deg)}.rotate-45{transform:rotate(45deg)}.rotate-270{transform:rotate(270deg)}.rotate-250{transform:rotate(250deg)}.rotate-290{transform:rotate(290deg)}.icon-flipped{transform:scaleY(-1)}\n"] }]
+        args: [{ selector: 'igo-directions-results', template: "<div class=\"igo-input-container\" *ngIf=\"directions && activeDirection\">\r\n    <mat-form-field *ngIf=\"directions && directions.length > 1\">\r\n        <mat-select placeholder=\"{{'igo.geo.directionsForm.drivingOptions' | translate}}\"\r\n            (selectionChange)=\"changeRoute()\" [(ngModel)]=\"activeDirection\">\r\n            <mat-option *ngFor=\"let direction of directions; let cnt = index;\" [value]=\"direction\">\r\n                Option {{cnt + 1}} : {{formatDistance(direction.distance)}}\r\n                ({{formatDuration(direction.duration)}})\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 mat-typography\">{{activeDirection.title}}</h2>\r\n        <h2 mat-subheader>{{formatDistance(activeDirection.distance)}}, {{formatDuration(activeDirection.duration)}}</h2>\r\n        <mat-list-item 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;\" igoListItem>\r\n            <mat-icon [ngClass]=\"formatStep(step,cnt).cssClass\" mat-list-icon svgIcon=\"{{formatStep(step,cnt).image}}\">\r\n            </mat-icon>\r\n\r\n            <h4 mat-line>{{cnt +1}}. {{formatStep(step,cnt).instruction}}</h4>\r\n            <h4 mat-line class=\"right\">{{formatDistance(step.distance)}}</h4>\r\n        </mat-list-item>\r\n\r\n        <mat-divider></mat-divider>\r\n\r\n    </mat-list>\r\n\r\n</div>", styles: [".igo-input-container{width:100%;padding:20px 10px}.igo-input-container mat-form-field{width:70%}.igo-route-title{font-weight:700}.igo-steps{cursor:pointer}.mat-line{word-wrap:break-word!important;white-space:pre-wrap!important}.mat-line.right{text-align:right}.rotate-90{transform:rotate(90deg)}.rotate-45{transform:rotate(45deg)}.rotate-270{transform:rotate(270deg)}.rotate-250{transform:rotate(250deg)}.rotate-290{transform:rotate(290deg)}.icon-flipped{transform:scaleY(-1)}\n"] }]
     }], function () { return [{ type: i2$1.LanguageService }, { type: i0.ChangeDetectorRef }]; }, { routesFeatureStore: [{
             type: Input
         }], stepFeatureStore: [{
@@ -35141,7 +36113,7 @@ DirectionsComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Directi
     } }, dependencies: [DirectionsInputsComponent, DirectionsButtonsComponent, DirectionsResultsComponent] });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DirectionsComponent, [{
         type: Component,
-        args: [{ selector: 'igo-directions', template: "<igo-directions-buttons [contextUri]=\"contextUri\" [zoomToActiveRoute$]=\"zoomToActiveRoute$\" [routesFeatureStore]=\"routesFeatureStore\" [stopsStore]=\"stopsStore\"></igo-directions-buttons>\n\n<igo-directions-inputs (stopInputHasFocus)=\"onStopInputHasFocusChange($event)\" [coordRoundedDecimals]=\"coordRoundedDecimals\" [projection]=\"projection\" [stopsFeatureStore]=\"stopsFeatureStore\" [stopsStore]=\"stopsStore\" [debounce]=\"debounce\" [length]=\"length\"></igo-directions-inputs>\n<br>\n<igo-directions-results [stepFeatureStore]=\"stepFeatureStore\" [routesFeatureStore]=\"routesFeatureStore\"></igo-directions-results>" }]
+        args: [{ selector: 'igo-directions', template: "<igo-directions-buttons [contextUri]=\"contextUri\" [zoomToActiveRoute$]=\"zoomToActiveRoute$\" [routesFeatureStore]=\"routesFeatureStore\" [stopsStore]=\"stopsStore\"></igo-directions-buttons>\r\n\r\n<igo-directions-inputs (stopInputHasFocus)=\"onStopInputHasFocusChange($event)\" [coordRoundedDecimals]=\"coordRoundedDecimals\" [projection]=\"projection\" [stopsFeatureStore]=\"stopsFeatureStore\" [stopsStore]=\"stopsStore\" [debounce]=\"debounce\" [length]=\"length\"></igo-directions-inputs>\r\n<br>\r\n<igo-directions-results [stepFeatureStore]=\"stepFeatureStore\" [routesFeatureStore]=\"routesFeatureStore\"></igo-directions-results>" }]
     }], function () { return [{ type: i0.ChangeDetectorRef }, { type: i2$1.LanguageService }, { type: DirectionsService }, { type: SearchService }, { type: QueryService }]; }, { contextUri: [{
             type: Input
         }], stopsStore: [{
@@ -36673,7 +37645,7 @@ SearchSelectorComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Sea
     } }, dependencies: [i1$1.NgForOf, i4.MatTooltip, i2.MatIcon, i3.MatButton, i7$2.MatMenu, i7$2.MatMenuTrigger, i17.MatRadioGroup, i17.MatRadioButton, i1$1.AsyncPipe, i7.TranslatePipe], styles: [".igo-search-selector-button[_ngcontent-%COMP%]     div.mat-button-ripple-round{border-radius:0}.igo-search-selector-radio-group[_ngcontent-%COMP%]{display:inline-flex;flex-direction:column}.igo-search-selector-radio-group[_ngcontent-%COMP%]   mat-radio-button[_ngcontent-%COMP%]{margin:5px}"], changeDetection: 0 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SearchSelectorComponent, [{
         type: Component,
-        args: [{ selector: 'igo-search-selector', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"igo-search-selector\">\n  <button\n    mat-icon-button\n    class=\"igo-search-selector-button\"\n    color=\"primary\"\n    tooltip-position=\"below\"\n    matTooltipShowDelay=\"500\"\n    [matTooltip]=\"'igo.geo.search.menu.tooltip' | translate\"\n    [matMenuTriggerFor]=\"searchSelectorMenu\">\n    <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    <mat-radio-group\n      class=\"igo-search-selector-radio-group\"\n      [value]=\"searchType$ | async\"\n      (change)=\"onSearchTypeChange($event.value)\">\n      <mat-radio-button *ngFor=\"let searchType of searchTypes\" [value]=\"searchType\">\n        {{getSearchTypeTitle(searchType) | translate}}\n      </mat-radio-button>\n    </mat-radio-group>\n  </mat-menu>\n\n</div>\n", styles: [".igo-search-selector-button ::ng-deep div.mat-button-ripple-round{border-radius:0}.igo-search-selector-radio-group{display:inline-flex;flex-direction:column}.igo-search-selector-radio-group mat-radio-button{margin:5px}\n"] }]
+        args: [{ selector: 'igo-search-selector', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"igo-search-selector\">\r\n  <button\r\n    mat-icon-button\r\n    class=\"igo-search-selector-button\"\r\n    color=\"primary\"\r\n    tooltip-position=\"below\"\r\n    matTooltipShowDelay=\"500\"\r\n    [matTooltip]=\"'igo.geo.search.menu.tooltip' | translate\"\r\n    [matMenuTriggerFor]=\"searchSelectorMenu\">\r\n    <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    <mat-radio-group\r\n      class=\"igo-search-selector-radio-group\"\r\n      [value]=\"searchType$ | async\"\r\n      (change)=\"onSearchTypeChange($event.value)\">\r\n      <mat-radio-button *ngFor=\"let searchType of searchTypes\" [value]=\"searchType\">\r\n        {{getSearchTypeTitle(searchType) | translate}}\r\n      </mat-radio-button>\r\n    </mat-radio-group>\r\n  </mat-menu>\r\n\r\n</div>\r\n", styles: [".igo-search-selector-button ::ng-deep div.mat-button-ripple-round{border-radius:0}.igo-search-selector-radio-group{display:inline-flex;flex-direction:column}.igo-search-selector-radio-group mat-radio-button{margin:5px}\n"] }]
     }], function () { return [{ type: SearchSourceService }]; }, { searchTypes: [{
             type: Input
         }], searchType: [{
@@ -37110,10 +38082,10 @@ SearchSettingsComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Sea
         i0.ɵɵproperty("ngForOf", ctx.getSearchSources());
         i0.ɵɵadvance(1);
         i0.ɵɵproperty("ngIf", ctx.hasPointerReverseSearchSource && !ctx.isTouchScreen);
-    } }, dependencies: [i1$1.NgForOf, i1$1.NgIf, i1$1.NgSwitch, i1$1.NgSwitchCase, i4.MatTooltip, i2.MatIcon, i3.MatButton, i7$2.MatMenu, i7$2.MatMenuItem, i7$2.MatMenuTrigger, i17.MatRadioGroup, i17.MatRadioButton, i12$1.MatCheckbox, i11.MatDivider, i23.MatSlideToggle, i7.TranslatePipe], styles: [".checkAllButton[_ngcontent-%COMP%]{text-align:center;padding:0 5px}.igo-search-settings-button[_ngcontent-%COMP%]     div.mat-button-ripple-round{border-radius:0}.igo-search-settings-radio-group[_ngcontent-%COMP%]{display:flex;flex-direction:column}.igo-search-settings-radio-group[_ngcontent-%COMP%]   mat-radio-button[_ngcontent-%COMP%]{margin:5px}.igo-search-settings-checkbox[_ngcontent-%COMP%]   mat-radio-button[_ngcontent-%COMP%]{display:flex}.igo-search-settings-search-source[_ngcontent-%COMP%]{display:flex;width:100%}.igo-search-settings-search-source[_ngcontent-%COMP%]   mat-checkbox[_ngcontent-%COMP%]{display:flex;margin-left:5px;margin-right:5px}.pointer-summary-option[_ngcontent-%COMP%]{display:block;margin-right:10px;margin-bottom:15px}.pointer-summary-slide-toggle-container[_ngcontent-%COMP%]{overflow-x:hidden}.pointer-summary-slide-toggle-container[_ngcontent-%COMP%]   mat-slide-toggle[_ngcontent-%COMP%]{margin:10px}"], changeDetection: 0 });
+    } }, dependencies: [i1$1.NgForOf, i1$1.NgIf, i1$1.NgSwitch, i1$1.NgSwitchCase, i4.MatTooltip, i2.MatIcon, i3.MatButton, i7$2.MatMenu, i7$2.MatMenuItem, i7$2.MatMenuTrigger, i17.MatRadioGroup, i17.MatRadioButton, i12.MatCheckbox, i11.MatDivider, i23.MatSlideToggle, i7.TranslatePipe], styles: [".checkAllButton[_ngcontent-%COMP%]{text-align:center;padding:0 5px}.igo-search-settings-button[_ngcontent-%COMP%]     div.mat-button-ripple-round{border-radius:0}.igo-search-settings-radio-group[_ngcontent-%COMP%]{display:flex;flex-direction:column}.igo-search-settings-radio-group[_ngcontent-%COMP%]   mat-radio-button[_ngcontent-%COMP%]{margin:5px}.igo-search-settings-checkbox[_ngcontent-%COMP%]   mat-radio-button[_ngcontent-%COMP%]{display:flex}.igo-search-settings-search-source[_ngcontent-%COMP%]{display:flex;width:100%}.igo-search-settings-search-source[_ngcontent-%COMP%]   mat-checkbox[_ngcontent-%COMP%]{display:flex;margin-left:5px;margin-right:5px}.pointer-summary-option[_ngcontent-%COMP%]{display:block;margin-right:10px;margin-bottom:15px}.pointer-summary-slide-toggle-container[_ngcontent-%COMP%]{overflow-x:hidden}.pointer-summary-slide-toggle-container[_ngcontent-%COMP%]   mat-slide-toggle[_ngcontent-%COMP%]{margin:10px}"], changeDetection: 0 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SearchSettingsComponent, [{
         type: Component,
-        args: [{ selector: 'igo-search-settings', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"igo-search-settings\">\n\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    <mat-icon svgIcon=\"chevron-down\"></mat-icon>\n  </button>\n  <mat-menu\n    #searchSettingsMenu=\"matMenu\"\n    class=\"no-border-radius\">\n    <div class=\"checkAllButton\" *ngIf=\"getSearchSources().length>4\">\n      <button mat-raised-button\n        (click)=\"checkUncheckAllSources($event)\">{{!searchSourcesAllEnabled  ? ('igo.geo.search.searchSources.unselectAll' | translate): ('igo.geo.search.searchSources.selectAll' | translate)}}</button>\n    </div>\n      <ng-container *ngFor=\"let source of getSearchSources()\">\n        <span class=\"igo-search-settings-search-source\">\n          <mat-checkbox\n            class=\"igo-search-settings-checkbox\"\n            [checked]=\"source.enabled\"\n            [value]=\"source\"\n            (click)=\"$event.stopPropagation()\"\n            (change)=\"onCheckSearchSource($event, source)\">\n          </mat-checkbox>\n          <button *ngIf=\"source.settings.length\u00A0>\u00A00\"\n            [matMenuTriggerFor]=\"sub_menu\"\n            mat-menu-item>{{source.title}}\n          </button>\n          <button\n            mat-menu-item\n            *ngIf=\"source.settings.length\u00A0===\u00A00\">\n            {{source.title}}\n          </button>\n        </span>\n          <mat-menu #sub_menu=\"matMenu\">\n            <ng-container *ngFor=\"let setting of source.settings\">\n              <button\n                  mat-menu-item\n                  [matMenuTriggerFor]=\"test_sub_menu\">\n                {{'igo.geo.search.searchSources.settings.'+ setting.title | translate}}\n              </button>\n              <mat-menu #test_sub_menu=\"matMenu\"\n                [ngSwitch]=\"setting.type\"\n                yPosition=\"above\">\n                <span *ngSwitchCase=\"'radiobutton'\">\n                  <mat-radio-group\n                    class=\"igo-search-settings-radio-group\"\n                    [value]=\"setting\">\n                    <mat-radio-button *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)=\"settingsValueCheckedRadioButton($event, source, setting, settingValue)\">\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\u00A0>\u00A03\">\n                    <button mat-raised-button\n                      (click)=\"checkUncheckAll($event, source, setting)\">{{setting.allEnabled || setting.allEnabled === undefined  ? ('igo.geo.search.searchSources.settings.unselectAll' | translate): ('igo.geo.search.searchSources.settings.selectAll' | translate)}}</button>\n                  </div>\n                  <mat-checkbox *ngFor=\"let settingValue of getAvailableValues(setting)\"\n                    class=\"mat-menu-item\"\n                    [style.display]=\"displayBlock\"\n                    [checked]=\"settingValue.enabled\"\n                    [value]=\"setting\"\n                    [matTooltip]=\"getAvailableHashtagsValues(settingValue)\"\n                    (click)=\"$event.stopPropagation()\"\n                    (change)=\"settingsValueCheckedCheckbox($event, source, setting, settingValue)\">\n                    {{settingValue.title | translate}}\n                  </mat-checkbox>\n                </span>\n              </mat-menu>\n            </ng-container>\n          </mat-menu>\n      </ng-container>\n      <span *ngIf=\"hasPointerReverseSearchSource && !isTouchScreen\">\n        <mat-divider></mat-divider>\n        <span class=\"pointer-summary-slide-toggle-container mat-typography\">\n          <mat-slide-toggle class=\"pointer-summary-option\" (change)=\"changePointerReverseSearch($event)\" tooltip-position=\"below\"\n            matTooltipShowDelay=\"500\" [matTooltip]=\"'igo.geo.search.pointerSearchSummary.tooltip' | translate\"\n            (click)=\"$event.stopPropagation()\" [checked]=\"pointerSummaryEnabled\" [labelPosition]=\"'after'\">\n            {{'igo.geo.search.pointerSearchSummary.title' | translate}}\n          </mat-slide-toggle>\n          <mat-slide-toggle class=\"pointer-summary-option\" (change)=\"changeSearchResultsGeometry($event)\" tooltip-position=\"below\"\n            matTooltipShowDelay=\"500\" [matTooltip]=\"'igo.geo.search.searchResultsGeometry.tooltip' | translate\"\n            (click)=\"$event.stopPropagation()\" [checked]=\"searchResultsGeometryEnabled\" [labelPosition]=\"'after'\">\n            {{'igo.geo.search.searchResultsGeometry.title' | translate}}\n          </mat-slide-toggle>\n        </span>\n      </span>\n  </mat-menu>\n</div>\n", styles: [".checkAllButton{text-align:center;padding:0 5px}.igo-search-settings-button ::ng-deep div.mat-button-ripple-round{border-radius:0}.igo-search-settings-radio-group{display:flex;flex-direction:column}.igo-search-settings-radio-group mat-radio-button{margin:5px}.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}.pointer-summary-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}\n"] }]
+        args: [{ selector: 'igo-search-settings', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"igo-search-settings\">\r\n\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    <mat-icon svgIcon=\"chevron-down\"></mat-icon>\r\n  </button>\r\n  <mat-menu\r\n    #searchSettingsMenu=\"matMenu\"\r\n    class=\"no-border-radius\">\r\n    <div class=\"checkAllButton\" *ngIf=\"getSearchSources().length>4\">\r\n      <button mat-raised-button\r\n        (click)=\"checkUncheckAllSources($event)\">{{!searchSourcesAllEnabled  ? ('igo.geo.search.searchSources.unselectAll' | translate): ('igo.geo.search.searchSources.selectAll' | translate)}}</button>\r\n    </div>\r\n      <ng-container *ngFor=\"let source of getSearchSources()\">\r\n        <span class=\"igo-search-settings-search-source\">\r\n          <mat-checkbox\r\n            class=\"igo-search-settings-checkbox\"\r\n            [checked]=\"source.enabled\"\r\n            [value]=\"source\"\r\n            (click)=\"$event.stopPropagation()\"\r\n            (change)=\"onCheckSearchSource($event, source)\">\r\n          </mat-checkbox>\r\n          <button *ngIf=\"source.settings.length\u00A0>\u00A00\"\r\n            [matMenuTriggerFor]=\"sub_menu\"\r\n            mat-menu-item>{{source.title}}\r\n          </button>\r\n          <button\r\n            mat-menu-item\r\n            *ngIf=\"source.settings.length\u00A0===\u00A00\">\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\r\n                  mat-menu-item\r\n                  [matMenuTriggerFor]=\"test_sub_menu\">\r\n                {{'igo.geo.search.searchSources.settings.'+ setting.title | translate}}\r\n              </button>\r\n              <mat-menu #test_sub_menu=\"matMenu\"\r\n                [ngSwitch]=\"setting.type\"\r\n                yPosition=\"above\">\r\n                <span *ngSwitchCase=\"'radiobutton'\">\r\n                  <mat-radio-group\r\n                    class=\"igo-search-settings-radio-group\"\r\n                    [value]=\"setting\">\r\n                    <mat-radio-button *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)=\"settingsValueCheckedRadioButton($event, source, setting, settingValue)\">\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\u00A0>\u00A03\">\r\n                    <button mat-raised-button\r\n                      (click)=\"checkUncheckAll($event, source, setting)\">{{setting.allEnabled || setting.allEnabled === undefined  ? ('igo.geo.search.searchSources.settings.unselectAll' | translate): ('igo.geo.search.searchSources.settings.selectAll' | translate)}}</button>\r\n                  </div>\r\n                  <mat-checkbox *ngFor=\"let settingValue of getAvailableValues(setting)\"\r\n                    class=\"mat-menu-item\"\r\n                    [style.display]=\"displayBlock\"\r\n                    [checked]=\"settingValue.enabled\"\r\n                    [value]=\"setting\"\r\n                    [matTooltip]=\"getAvailableHashtagsValues(settingValue)\"\r\n                    (click)=\"$event.stopPropagation()\"\r\n                    (change)=\"settingsValueCheckedCheckbox($event, source, setting, settingValue)\">\r\n                    {{settingValue.title | translate}}\r\n                  </mat-checkbox>\r\n                </span>\r\n              </mat-menu>\r\n            </ng-container>\r\n          </mat-menu>\r\n      </ng-container>\r\n      <span *ngIf=\"hasPointerReverseSearchSource && !isTouchScreen\">\r\n        <mat-divider></mat-divider>\r\n        <span class=\"pointer-summary-slide-toggle-container mat-typography\">\r\n          <mat-slide-toggle class=\"pointer-summary-option\" (change)=\"changePointerReverseSearch($event)\" tooltip-position=\"below\"\r\n            matTooltipShowDelay=\"500\" [matTooltip]=\"'igo.geo.search.pointerSearchSummary.tooltip' | translate\"\r\n            (click)=\"$event.stopPropagation()\" [checked]=\"pointerSummaryEnabled\" [labelPosition]=\"'after'\">\r\n            {{'igo.geo.search.pointerSearchSummary.title' | translate}}\r\n          </mat-slide-toggle>\r\n          <mat-slide-toggle class=\"pointer-summary-option\" (change)=\"changeSearchResultsGeometry($event)\" tooltip-position=\"below\"\r\n            matTooltipShowDelay=\"500\" [matTooltip]=\"'igo.geo.search.searchResultsGeometry.tooltip' | translate\"\r\n            (click)=\"$event.stopPropagation()\" [checked]=\"searchResultsGeometryEnabled\" [labelPosition]=\"'after'\">\r\n            {{'igo.geo.search.searchResultsGeometry.title' | translate}}\r\n          </mat-slide-toggle>\r\n        </span>\r\n      </span>\r\n  </mat-menu>\r\n</div>\r\n", styles: [".checkAllButton{text-align:center;padding:0 5px}.igo-search-settings-button ::ng-deep div.mat-button-ripple-round{border-radius:0}.igo-search-settings-radio-group{display:flex;flex-direction:column}.igo-search-settings-radio-group mat-radio-button{margin:5px}.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}.pointer-summary-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}\n"] }]
     }], function () { return [{ type: SearchSourceService }, { type: i2$1.MediaService }, { type: i2$1.StorageService }]; }, { pointerSummaryEnabled: [{
             type: Input
         }], searchResultsGeometryEnabled: [{
@@ -37592,7 +38564,7 @@ SearchBarComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SearchBa
     } }, dependencies: [i1$1.NgClass, i1$1.NgIf, i4.MatTooltip, i2.MatIcon, i3.MatButton, i13.MatFormField, i13.MatLabel, i14.MatInput, SearchSelectorComponent, SearchSettingsComponent, i1$1.AsyncPipe, i7.TranslatePipe], styles: ["[_nghost-%COMP%]     .mat-form-field{padding:0 5px}[_nghost-%COMP%]     .mat-form-field-wrapper{margin-bottom:-1.5em}[_nghost-%COMP%]     span.mat-form-field-label-wrapper{top:-20px}[_nghost-%COMP%]     div.mat-form-field-infix{left:5px;right:5px;padding:0 0 12px!important}[_nghost-%COMP%]     div.mat-form-field-underline{display:none}.igo-search-bar-container[_ngcontent-%COMP%]{position:relative;width:100%;display:inline-flex;overflow:hidden}.igo-search-bar-container[_ngcontent-%COMP%] > mat-form-field[_ngcontent-%COMP%]{width:calc(100% - 80px)}.igo-search-bar-container.empty[_ngcontent-%COMP%] > mat-form-field[_ngcontent-%COMP%]{width:calc(100% - 40px)}.search-bar-buttons[_ngcontent-%COMP%]{position:relative;right:0px;display:inline-flex;top:0}.search-bar-buttons[_ngcontent-%COMP%] > button[_ngcontent-%COMP%]:nth-child(2):before{content:\"\";left:0px;top:5px;border-right:1px solid #ddd;height:28px}igo-search-selector[_ngcontent-%COMP%]{background-color:#fff;top:0;border-radius:0}igo-search-settings[_ngcontent-%COMP%]{background-color:#fff;top:0;border-radius:0}"], changeDetection: 0 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SearchBarComponent, [{
         type: Component,
-        args: [{ selector: 'igo-search-bar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"igo-search-bar-container\" [ngClass]=\"{empty: empty$ | async}\">\n  <mat-form-field [floatLabel]=\"floatLabel\" [appearance]=\"appearance\">\n    <mat-label *ngIf=\"label\">{{label}}</mat-label>\n    <input\n      #input\n      matInput\n      autocomplete=\"off\"\n      [ngClass]=\"{'hasSearchIcon': searchIcon}\"\n      [disabled]=\"disabled$ | async\"\n      [placeholder]=\"placeholder ? placeholder : (placeholder$ | async) ? (placeholder$.value | translate) : undefined\"\n      [value]=\"term$ | async\"\n      (keyup)=\"onKeyup($event)\"\n      (touchend)=\"onKeyup($event)\">\n  </mat-form-field>\n\n  <div class=\"search-bar-buttons\">\n    <button\n      mat-icon-button\n      [color]=\"color\"\n      *ngIf=\"searchIcon !== undefined\">\n      <mat-icon svgIcon=\"{{searchIcon}}\"></mat-icon>\n    </button>\n\n    <button\n      *ngIf=\"(empty$ | async)===false\"\n      mat-icon-button\n      [color]=\"color\"\n      (click)=\"onClearButtonClick()\"\n      [matTooltip]=\"'igo.geo.search.clearSearch' | translate\">\n      <mat-icon svgIcon=\"close\"></mat-icon>\n    </button>\n\n    <igo-search-selector\n      *ngIf=\"searchSelector\"\n      [searchTypes]=\"searchTypes\"\n      [searchType]=\"searchType$ | async\"\n      (searchTypeChange)=\"onSearchTypeChange($event)\">\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      (searchSourceChange)=\"onSearchSettingsChange()\">\n    </igo-search-settings>\n  </div>\n</div>\n", styles: [":host ::ng-deep .mat-form-field{padding:0 5px}:host ::ng-deep .mat-form-field-wrapper{margin-bottom:-1.5em}:host ::ng-deep span.mat-form-field-label-wrapper{top:-20px}:host ::ng-deep div.mat-form-field-infix{left:5px;right:5px;padding:0 0 12px!important}:host ::ng-deep div.mat-form-field-underline{display:none}.igo-search-bar-container{position:relative;width:100%;display:inline-flex;overflow:hidden}.igo-search-bar-container>mat-form-field{width:calc(100% - 80px)}.igo-search-bar-container.empty>mat-form-field{width:calc(100% - 40px)}.search-bar-buttons{position:relative;right:0px;display:inline-flex;top:0}.search-bar-buttons>button:nth-child(2):before{content:\"\";left:0px;top:5px;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"] }]
+        args: [{ selector: 'igo-search-bar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"igo-search-bar-container\" [ngClass]=\"{empty: empty$ | async}\">\r\n  <mat-form-field [floatLabel]=\"floatLabel\" [appearance]=\"appearance\">\r\n    <mat-label *ngIf=\"label\">{{label}}</mat-label>\r\n    <input\r\n      #input\r\n      matInput\r\n      autocomplete=\"off\"\r\n      [ngClass]=\"{'hasSearchIcon': searchIcon}\"\r\n      [disabled]=\"disabled$ | async\"\r\n      [placeholder]=\"placeholder ? placeholder : (placeholder$ | async) ? (placeholder$.value | translate) : undefined\"\r\n      [value]=\"term$ | async\"\r\n      (keyup)=\"onKeyup($event)\"\r\n      (touchend)=\"onKeyup($event)\">\r\n  </mat-form-field>\r\n\r\n  <div class=\"search-bar-buttons\">\r\n    <button\r\n      mat-icon-button\r\n      [color]=\"color\"\r\n      *ngIf=\"searchIcon !== undefined\">\r\n      <mat-icon svgIcon=\"{{searchIcon}}\"></mat-icon>\r\n    </button>\r\n\r\n    <button\r\n      *ngIf=\"(empty$ | async)===false\"\r\n      mat-icon-button\r\n      [color]=\"color\"\r\n      (click)=\"onClearButtonClick()\"\r\n      [matTooltip]=\"'igo.geo.search.clearSearch' | translate\">\r\n      <mat-icon svgIcon=\"close\"></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    </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      (searchSourceChange)=\"onSearchSettingsChange()\">\r\n    </igo-search-settings>\r\n  </div>\r\n</div>\r\n", styles: [":host ::ng-deep .mat-form-field{padding:0 5px}:host ::ng-deep .mat-form-field-wrapper{margin-bottom:-1.5em}:host ::ng-deep span.mat-form-field-label-wrapper{top:-20px}:host ::ng-deep div.mat-form-field-infix{left:5px;right:5px;padding:0 0 12px!important}:host ::ng-deep div.mat-form-field-underline{display:none}.igo-search-bar-container{position:relative;width:100%;display:inline-flex;overflow:hidden}.igo-search-bar-container>mat-form-field{width:calc(100% - 80px)}.igo-search-bar-container.empty>mat-form-field{width:calc(100% - 40px)}.search-bar-buttons{position:relative;right:0px;display:inline-flex;top:0}.search-bar-buttons>button:nth-child(2):before{content:\"\";left:0px;top:5px;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"] }]
     }], function () { return [{ type: i2$1.LanguageService }, { type: SearchService }, { type: SearchSourceService }]; }, { searchTypes: [{
             type: Input
         }], searchType: [{
@@ -37839,7 +38811,7 @@ SearchResultsItemComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
     } }, dependencies: [i1$1.NgIf, i4.MatTooltip, i2.MatIcon, i5.MatListItem, i5.MatListAvatarCssMatStyler, i9.MatLine, i3.MatButton, i5$1.StopPropagationDirective], styles: ["[_nghost-%COMP%]     small{color:#8c8c8c}  .search-result-tooltip{white-space:pre-line}"], changeDetection: 0 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SearchResultsItemComponent, [{
         type: Component,
-        args: [{ selector: 'igo-search-results-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-list-item>\n  <mat-icon *ngIf=\"icon\" mat-list-avatar svgIcon=\"{{showIcons ? icon : 'blank'}}\"></mat-icon>\n\n  <h4 matLine *ngIf=\"titleHtml\" [innerHtml]=\"titleHtml\" matTooltipShowDelay=\"500\" [matTooltip]=\"tooltipHtml\" matTooltipClass=\"search-result-tooltip\"></h4>\n  <h4 matLine *ngIf=\"!titleHtml\" matTooltipShowDelay=\"500\" [matTooltip]=\"title\">{{title}}</h4>\n\n  <button *ngIf=\"withZoomButton\"\n    igoStopPropagation\n    mat-icon-button\n    (click)=\"onZoomHandler()\">\n    <mat-icon svgIcon=\"magnify\"></mat-icon>\n  </button>\n\n  <ng-content\n    select=[igoSearchItemToolbar]>\n  </ng-content>\n\n</mat-list-item>\n", styles: [":host ::ng-deep small{color:#8c8c8c}::ng-deep .search-result-tooltip{white-space:pre-line}\n"] }]
+        args: [{ selector: 'igo-search-results-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-list-item>\r\n  <mat-icon *ngIf=\"icon\" mat-list-avatar svgIcon=\"{{showIcons ? icon : 'blank'}}\"></mat-icon>\r\n\r\n  <h4 matLine *ngIf=\"titleHtml\" [innerHtml]=\"titleHtml\" matTooltipShowDelay=\"500\" [matTooltip]=\"tooltipHtml\" matTooltipClass=\"search-result-tooltip\"></h4>\r\n  <h4 matLine *ngIf=\"!titleHtml\" matTooltipShowDelay=\"500\" [matTooltip]=\"title\">{{title}}</h4>\r\n\r\n  <button *ngIf=\"withZoomButton\"\r\n    igoStopPropagation\r\n    mat-icon-button\r\n    (click)=\"onZoomHandler()\">\r\n    <mat-icon svgIcon=\"magnify\"></mat-icon>\r\n  </button>\r\n\r\n  <ng-content\r\n    select=[igoSearchItemToolbar]>\r\n  </ng-content>\r\n\r\n</mat-list-item>\r\n", styles: [":host ::ng-deep small{color:#8c8c8c}::ng-deep .search-result-tooltip{white-space:pre-line}\n"] }]
     }], function () { return []; }, { result: [{
             type: Input
         }], map: [{
@@ -38139,7 +39111,7 @@ SearchResultsComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Sear
     } }, dependencies: [i1$1.NgForOf, i1$1.NgIf, i1$1.NgTemplateOutlet, i5$1.CollapsibleComponent, i5$1.ListItemDirective, i5$1.ListComponent, SearchResultsItemComponent, i1$1.AsyncPipe, i7.TranslatePipe], styles: [".moreResults[_ngcontent-%COMP%]{cursor:pointer;color:#00f;float:right;margin-right:10px;margin-top:5px}igo-list[_ngcontent-%COMP%]     mat-list{height:100%}"], changeDetection: 0 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SearchResultsComponent, [{
         type: Component,
-        args: [{ selector: 'igo-search-results', changeDetection: ChangeDetectionStrategy.OnPush, template: "<igo-list [navigation]=\"true\">\n  <ng-template\n    #groupTemplate\n    ngFor let-group\n    [ngForOf]=\"results$ | async\">\n\n    <igo-collapsible [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      <ng-container *ngTemplateOutlet=\"storeItemTemplate; context: {results: group.results}\"></ng-container>\n    </igo-collapsible>\n\n    <ng-template #flatTemplate>\n      <ng-container *ngTemplateOutlet=\"storeItemTemplate; context: {results: group.results}\"></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 igoSearchItemToolbar\n            [ngTemplateOutlet]=\"templateSearchToolbar\"\n            [ngTemplateOutletContext]=\"{result: result}\">\n          </ng-container>\n\n        </igo-search-results-item>\n      </ng-template>\n      <span class=\"moreResults mat-typography\" *ngIf=\"isMoreResults(group)\" (click)=\"displayMoreResults(group)\">\n        <u>{{ 'igo.geo.search.displayMoreResults' | translate }}</u>\n      </span>\n    </ng-template>\n\n  </ng-template>\n\n</igo-list>\n", styles: [".moreResults{cursor:pointer;color:#00f;float:right;margin-right:10px;margin-top:5px}igo-list ::ng-deep mat-list{height:100%}\n"] }]
+        args: [{ selector: 'igo-search-results', changeDetection: ChangeDetectionStrategy.OnPush, template: "<igo-list [navigation]=\"true\">\r\n  <ng-template\r\n    #groupTemplate\r\n    ngFor let-group\r\n    [ngForOf]=\"results$ | async\">\r\n\r\n    <igo-collapsible [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      <ng-container *ngTemplateOutlet=\"storeItemTemplate; context: {results: group.results}\"></ng-container>\r\n    </igo-collapsible>\r\n\r\n    <ng-template #flatTemplate>\r\n      <ng-container *ngTemplateOutlet=\"storeItemTemplate; context: {results: group.results}\"></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 igoSearchItemToolbar\r\n            [ngTemplateOutlet]=\"templateSearchToolbar\"\r\n            [ngTemplateOutletContext]=\"{result: result}\">\r\n          </ng-container>\r\n\r\n        </igo-search-results-item>\r\n      </ng-template>\r\n      <span class=\"moreResults mat-typography\" *ngIf=\"isMoreResults(group)\" (click)=\"displayMoreResults(group)\">\r\n        <u>{{ 'igo.geo.search.displayMoreResults' | translate }}</u>\r\n      </span>\r\n    </ng-template>\r\n\r\n  </ng-template>\r\n\r\n</igo-list>\r\n", styles: [".moreResults{cursor:pointer;color:#00f;float:right;margin-right:10px;margin-top:5px}igo-list ::ng-deep mat-list{height:100%}\n"] }]
     }], function () { return [{ type: i0.ChangeDetectorRef }, { type: SearchService }]; }, { map: [{
             type: Input
         }], store: [{
@@ -38343,7 +39315,7 @@ SearchResultAddButtonComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ ty
     } }, dependencies: [i1$1.NgIf, i7$1.MatBadge, i4.MatTooltip, i2.MatIcon, i3.MatButton, i5$1.StopPropagationDirective, i5$1.IgoBadgeIconDirective, i1$1.AsyncPipe, i7.TranslatePipe], changeDetection: 0 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SearchResultAddButtonComponent, [{
         type: Component,
-        args: [{ selector: 'igo-search-add-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\nigoStopPropagation\n(mouseenter)=\"onMouseEvent($event)\" (mouseleave)=\"onMouseEvent($event)\"\n*ngIf=\"layer.meta.dataType === 'Layer'\"\nmat-icon-button\ntooltip-position=\"below\"\nmatTooltipShowDelay=\"500\"\n[matTooltip]=\"(tooltip$ | async) | translate\"\n[color]=\"(isPreview$ | async) ? '' : added ? 'warn' : ''\"\n(click)=\"onToggleClick($event)\">\n<mat-icon\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]=\"(isPreview$ | async) ? 'plus' : added ? 'delete' : 'plus'\">\n</mat-icon>\n</button>\n" }]
+        args: [{ selector: 'igo-search-add-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\r\nigoStopPropagation\r\n(mouseenter)=\"onMouseEvent($event)\" (mouseleave)=\"onMouseEvent($event)\"\r\n*ngIf=\"layer.meta.dataType === 'Layer'\"\r\nmat-icon-button\r\ntooltip-position=\"below\"\r\nmatTooltipShowDelay=\"500\"\r\n[matTooltip]=\"(tooltip$ | async) | translate\"\r\n[color]=\"(isPreview$ | async) ? '' : added ? 'warn' : ''\"\r\n(click)=\"onToggleClick($event)\">\r\n<mat-icon\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]=\"(isPreview$ | async) ? 'plus' : added ? 'delete' : 'plus'\">\r\n</mat-icon>\r\n</button>\r\n" }]
     }], function () { return [{ type: LayerService }]; }, { layer: [{
             type: Input
         }], added: [{
@@ -38864,7 +39836,7 @@ ToastComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ToastCompone
     } }, dependencies: [i1$1.NgIf, i2.MatIcon, i3.MatButton, i5$1.PanelComponent, i5$1.FlexibleComponent, FeatureDetailsComponent], styles: ["[_nghost-%COMP%]{position:absolute;bottom:0px;width:100%;max-height:calc(100% - 50px);background-color:#fff}igo-feature-details[_ngcontent-%COMP%]     table{width:100%}"] });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ToastComponent, [{
         type: Component,
-        args: [{ selector: 'igo-toast', template: "<igo-flexible #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\n      mat-icon-button\n      panelLeftButton\n      (click)=\"toggle()\">\n      <mat-icon [svgIcon]=\"['collapsed', 'initial'].indexOf(flex.state) >= 0 ? 'arrow_upward' : 'arrow_downward'\"></mat-icon>\n    </button>\n\n    <button mat-icon-button panelRightButton class=\"igo-icon-button\" (click)=\"zoomToFeatureExtent()\" *ngIf=\"feature.geometry\">\n      <mat-icon svgIcon=\"zoom-in\"></mat-icon>\n    </button>\n\n    <igo-feature-details [feature]=\"feature\"></igo-feature-details>\n  </igo-panel>\n\n</igo-flexible>\n", styles: [":host{position:absolute;bottom:0px;width:100%;max-height:calc(100% - 50px);background-color:#fff}igo-feature-details ::ng-deep table{width:100%}\n"] }]
+        args: [{ selector: 'igo-toast', template: "<igo-flexible #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\r\n      mat-icon-button\r\n      panelLeftButton\r\n      (click)=\"toggle()\">\r\n      <mat-icon [svgIcon]=\"['collapsed', 'initial'].indexOf(flex.state) >= 0 ? 'arrow_upward' : 'arrow_downward'\"></mat-icon>\r\n    </button>\r\n\r\n    <button mat-icon-button panelRightButton class=\"igo-icon-button\" (click)=\"zoomToFeatureExtent()\" *ngIf=\"feature.geometry\">\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\r\n</igo-flexible>\r\n", styles: [":host{position:absolute;bottom:0px;width:100%;max-height:calc(100% - 50px);background-color:#fff}igo-feature-details ::ng-deep table{width:100%}\n"] }]
     }], function () { return []; }, { expanded: [{
             type: Input
         }], map: [{
@@ -38945,7 +39917,7 @@ OgcFilterComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: OgcFilte
     } }, dependencies: [OgcFilterableItemComponent], changeDetection: 0 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(OgcFilterComponent, [{
         type: Component,
-        args: [{ selector: 'igo-ogc-filter', changeDetection: ChangeDetectionStrategy.OnPush, template: "<igo-ogc-filterable-item\n  igoListItem\n  [layer]=\"layer\"\n  [header]=\"false\" \n  [map]=\"map\" >\n</igo-ogc-filterable-item>" }]
+        args: [{ selector: 'igo-ogc-filter', changeDetection: ChangeDetectionStrategy.OnPush, template: "<igo-ogc-filterable-item\r\n  igoListItem\r\n  [layer]=\"layer\"\r\n  [header]=\"false\" \r\n  [map]=\"map\" >\r\n</igo-ogc-filterable-item>" }]
     }], function () { return [{ type: i0.ChangeDetectorRef }]; }, { layer: [{
             type: Input
         }], map: [{
@@ -39452,7 +40424,7 @@ ConfirmationPopupComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
     } }, dependencies: [i3.MatButton, i1.MatDialogContent, i1.MatDialogActions], styles: ["div.mat-dialog-actions[_ngcontent-%COMP%]{justify-content:center}"] });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ConfirmationPopupComponent, [{
         type: Component,
-        args: [{ selector: 'igo-confirmation-popup-component', template: "<div mat-dialog-content>\n  <p class=\"mat-typography\">{{data.type === 'add' ?\n    languageService.translate.instant('igo.geo.workspace.addConfirmation') :\n    languageService.translate.instant('igo.geo.workspace.deleteConfirmation')}}</p>\n</div>\n<div mat-dialog-actions>\n  <button\n    mat-raised-button\n    color=\"primary\"\n    (click)=\"confirmedAction()\">Ok\n  </button>\n  <button\n    mat-raised-button\n    (click)=\"cancelAction()\">{{languageService.translate.instant('igo.geo.workspace.cancel')}}\n  </button>\n</div>", styles: ["div.mat-dialog-actions{justify-content:center}\n"] }]
+        args: [{ selector: 'igo-confirmation-popup-component', template: "<div mat-dialog-content>\r\n  <p class=\"mat-typography\">{{data.type === 'add' ?\r\n    languageService.translate.instant('igo.geo.workspace.addConfirmation') :\r\n    languageService.translate.instant('igo.geo.workspace.deleteConfirmation')}}</p>\r\n</div>\r\n<div mat-dialog-actions>\r\n  <button\r\n    mat-raised-button\r\n    color=\"primary\"\r\n    (click)=\"confirmedAction()\">Ok\r\n  </button>\r\n  <button\r\n    mat-raised-button\r\n    (click)=\"cancelAction()\">{{languageService.translate.instant('igo.geo.workspace.cancel')}}\r\n  </button>\r\n</div>", styles: ["div.mat-dialog-actions{justify-content:center}\n"] }]
     }], function () { return [{ type: i1.MatDialogRef }, { type: i2$1.LanguageService }, { type: undefined, decorators: [{
                 type: Inject,
                 args: [MAT_DIALOG_DATA]
@@ -41103,138 +42075,6 @@ function provideOsrmDirectionsSource() {
     };
 }
 
-/**
- * Cadastre search source
- */
-class CadastreSearchSource extends SearchSource {
-    constructor(http, languageService, storageService, options) {
-        super(options, storageService);
-        this.http = http;
-        this.languageService = languageService;
-    }
-    getId() {
-        return CadastreSearchSource.id;
-    }
-    getType() {
-        return CadastreSearchSource.type;
-    }
-    /*
-     * Source : https://wiki.openstreetmap.org/wiki/Key:amenity
-     */
-    getDefaultOptions() {
-        return {
-            title: 'Cadastre (Québec)',
-            searchUrl: 'https://carto.cptaq.gouv.qc.ca/php/find_lot_v1.php?'
-        };
-    }
-    /**
-     * Search a place by name
-     * @param term Place name
-     * @returns Observable of <SearchResult<Feature>[]
-     */
-    search(term, options) {
-        term = term.endsWith(',') ? term.slice(0, -1) : term;
-        term = term.startsWith(',') ? term.substr(1) : term;
-        term = term.replace(/ /g, '');
-        const params = this.computeSearchRequestParams(term, options || {});
-        if (!params.get('numero') || !params.get('numero').match(/^[0-9,]+$/g)) {
-            return of([]);
-        }
-        return this.http
-            .get(this.searchUrl, { params, responseType: 'text' })
-            .pipe(map((response) => this.extractResults(response, term)));
-    }
-    computeSearchRequestParams(term, options) {
-        return new HttpParams({
-            fromObject: Object.assign({
-                numero: term,
-                epsg: '4326'
-            }, this.params, options.params || {})
-        });
-    }
-    extractResults(response, term) {
-        return response
-            .split('<br />')
-            .filter((lot) => lot.length > 0)
-            .map((lot) => this.dataToResult(lot, term));
-    }
-    dataToResult(data, term) {
-        const lot = data.split(';');
-        const numero = lot[0];
-        const wkt = lot[7];
-        const geometry = this.computeGeometry(wkt);
-        const properties = {
-            NoLot: numero,
-            Route: '<span class="routing"> <u>' + this.languageService.translate.instant('igo.geo.seeRouting') + '</u> </span>'
-        };
-        const id = [this.getId(), 'cadastre', numero].join('.');
-        return {
-            source: this,
-            meta: {
-                dataType: FEATURE,
-                id,
-                title: numero,
-                score: computeTermSimilarity(term.trim(), numero),
-                icon: 'map-marker'
-            },
-            data: {
-                type: FEATURE,
-                projection: 'EPSG:4326',
-                geometry,
-                properties,
-                meta: {
-                    id,
-                    title: numero
-                }
-            }
-        };
-    }
-    computeGeometry(wkt) {
-        const feature = new olWKT().readFeature(wkt, {
-            dataProjection: 'EPSG:4326',
-            featureProjection: 'EPSG:4326'
-        });
-        return {
-            type: feature.getGeometry().getType(),
-            coordinates: feature.getGeometry().getCoordinates()
-        };
-    }
-}
-CadastreSearchSource.id = 'cadastre';
-CadastreSearchSource.type = FEATURE;
-CadastreSearchSource.ɵfac = function CadastreSearchSource_Factory(t) { return new (t || CadastreSearchSource)(i0.ɵɵinject(i1$2.HttpClient), i0.ɵɵinject(i2$1.LanguageService), i0.ɵɵinject(i2$1.StorageService), i0.ɵɵinject('options')); };
-CadastreSearchSource.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: CadastreSearchSource, factory: CadastreSearchSource.ɵfac });
-__decorate([
-    Cacheable({
-        maxCacheCount: 20
-    })
-], CadastreSearchSource.prototype, "search", null);
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CadastreSearchSource, [{
-        type: Injectable
-    }], function () { return [{ type: i1$2.HttpClient }, { type: i2$1.LanguageService }, { type: i2$1.StorageService }, { type: undefined, decorators: [{
-                type: Inject,
-                args: ['options']
-            }] }]; }, { search: [] }); })();
-
-/**
- * Cadastre search source factory
- * @ignore
- */
-function cadastreSearchSourceFactory(http, languageService, storageService, config) {
-    return new CadastreSearchSource(http, languageService, storageService, config.getConfig(`searchSources.${CadastreSearchSource.id}`));
-}
-/**
- * Function that returns a provider for the Cadastre search source
- */
-function provideCadastreSearchSource() {
-    return {
-        provide: SearchSource,
-        useFactory: cadastreSearchSourceFactory,
-        multi: true,
-        deps: [HttpClient, LanguageService, StorageService, ConfigService]
-    };
-}
-
 /**
  * Nominatim search source
  */
@@ -41274,7 +42114,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
                         },
@@ -41994,7 +42834,7 @@ class ConfigFileToGeoDBService {
                     }
                     if (currentDate >= geoData.triggerDate) {
                         if (geoData.action === 'update') {
-                            const insertEvent = `${geoData.source || 'automatedDataUpdate'} (${geoData.triggerDate})`;
+                            const insertEvent = `${geoData.source || InsertSourceInsertDBEnum.System} (${geoData.triggerDate})`;
                             geoData.urls.map((url) => {
                                 datas$.push(this.geoDBService.getByID(url).pipe(concatMap((res) => {
                                     if (res?.insertEvent !== insertEvent) {
@@ -42003,8 +42843,31 @@ class ConfigFileToGeoDBService {
                                                 .info('igo.geo.indexedDb.data-download-start', undefined, { disableTimeOut: true, progressBar: false, closeButton: true, tapToDismiss: false });
                                             firstDownload = false;
                                         }
-                                        return this.http.get(url)
-                                            .pipe(concatMap(r => this.geoDBService.update(url, url, r, 'system', insertEvent)));
+                                        let responseType = 'json';
+                                        const isZip = this.isZip(url);
+                                        if (isZip) {
+                                            responseType = 'arraybuffer';
+                                        }
+                                        return this.http.get(url, { responseType }).pipe(concatMap(r => {
+                                            if (isZip) {
+                                                const observables$ = [this.geoDBService.update(url, url, {}, InsertSourceInsertDBEnum.System, insertEvent)];
+                                                JSZip.loadAsync(r)
+                                                    .then((zipped) => {
+                                                    zipped.forEach((relativePath) => {
+                                                        if (relativePath.toLocaleLowerCase().endsWith('.geojson')) {
+                                                            zipped.file(relativePath).async("base64").then((r) => {
+                                                                const geojson = JSON.parse(atob(r));
+                                                                const subUrl = geoData.zippedBaseUrl || '';
+                                                                const zippedUrl = subUrl + (subUrl.endsWith('/') ? '' : '/') + relativePath;
+                                                                observables$.push(this.geoDBService.update(zippedUrl, url, geojson, InsertSourceInsertDBEnum.System, insertEvent));
+                                                            });
+                                                        }
+                                                    });
+                                                });
+                                                return zip(observables$);
+                                            }
+                                            return this.geoDBService.update(url, url, r, InsertSourceInsertDBEnum.System, insertEvent);
+                                        }));
                                     }
                                     else {
                                         return of(false);
@@ -42030,6 +42893,10 @@ class ConfigFileToGeoDBService {
             }
         });
     }
+    isZip(value) {
+        const regex = /(zip)$/;
+        return typeof value === 'string' && regex.test(value.toLowerCase());
+    }
 }
 ConfigFileToGeoDBService.ɵfac = function ConfigFileToGeoDBService_Factory(t) { return new (t || ConfigFileToGeoDBService)(i0.ɵɵinject(i1$2.HttpClient), i0.ɵɵinject(GeoDBService), i0.ɵɵinject(i2$1.MessageService)); };
 ConfigFileToGeoDBService.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: ConfigFileToGeoDBService, factory: ConfigFileToGeoDBService.ɵfac, providedIn: 'root' });
@@ -42048,5 +42915,5 @@ ConfigFileToGeoDBService.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token:
  * Generated bundle index. Do not edit.
  */
 
-export { AddCatalogDialogComponent, ArcGISRestDataSource, BaseLayersSwitcherComponent, CadastreSearchSource, CapabilitiesService, CartoDataSource, Catalog, CatalogBrowserComponent, CatalogFactory, CatalogItemType, CatalogLibaryComponent, CatalogService, ClusterDataSource, CompositeCatalog, ConfigFileToGeoDBService, ConfirmationPopupComponent, CoordinatesReverseSearchSource, CoordinatesReverseSearchSourceFactory, CoordinatesSearchResultFormatter, DataService, DataSource, DataSourceService, DirectionRelativePositionType, DirectionType, DirectionsButtonsComponent, DirectionsComponent, DirectionsFormat, DirectionsInputsComponent, DirectionsResultsComponent, DirectionsService, DirectionsSource, DownloadButtonComponent, DownloadService, DrawComponent, DrawControl, DrawIconService, DrawStyleService, DropGeoFileDirective, EditionWorkspace, EditionWorkspaceService, EncodingFormat, EsriStyleGenerator, ExportButtonComponent, ExportError, ExportFormat, ExportInvalidFileError, ExportNothingToExportError, ExportService, FEATURE, FeatureDataSource, FeatureDetailsComponent, FeatureDetailsDirective, FeatureFormComponent, FeatureMotion, FeatureStore, FeatureStoreInMapExtentStrategy, FeatureStoreInMapResolutionStrategy, FeatureStoreLoadingLayerStrategy, FeatureStoreLoadingStrategy, FeatureStoreSelectionStrategy, FeatureWorkspace, FeatureWorkspaceService, FilterableDataSourcePipe, FontType, GeoDBService, GeoNetworkService, GeolocateButtonComponent, GeometryFormFieldComponent, GeometryFormFieldInputComponent, GeometrySliceError, GeometrySliceLineStringError, GeometrySliceMultiPolygonError, GeometrySliceTooManyIntersectionError, GeometryType, GoogleLinks, HomeExtentButtonComponent, HoverFeatureDirective, IChercheReverseSearchSource, IChercheSearchResultFormatter, IChercheSearchSource, ILayerSearchResultFormatter, ILayerSearchSource, IgoCatalogBrowserModule, IgoCatalogLibraryModule, IgoCatalogModule, IgoConfirmationPopupModule, IgoDataSourceModule, IgoDirectionsModule, IgoDownloadModule, IgoDrawModule, IgoDrawingToolModule, IgoFeatureDetailsModule, IgoFeatureFormModule, IgoFeatureModule, IgoFilterModule, IgoGeoModule, IgoGeoWorkspaceModule, IgoGeometryFormFieldModule, IgoGeometryModule, IgoHttpParameterCodec, IgoImportExportModule, IgoLayerModule, IgoMap, IgoMapModule, IgoMeasureModule, IgoMeasurerModule, IgoMetadataModule, IgoOgcFilterModule, IgoOverlayModule, IgoPrintModule, IgoQueryModule, IgoSearchBarModule, IgoSearchModule, IgoSearchResultsModule, IgoSearchSelectorModule, IgoSearchSettingsModule, IgoStyleListModule, IgoToastModule, IgoWktModule, IgoWorkspaceSelectorModule, IgoWorkspaceUpdatorModule, ImageArcGISRestDataSource, ImageLayer, ImageWatcher, ImportError, ImportExportComponent, ImportInvalidFileError, ImportNothingToImportError, ImportOgreServerError, ImportSRSError, ImportService, ImportSizeError, ImportUnreadableFileError, InfoSectionComponent, InsertSourceInsertDBEnum, LAYER, Layer, LayerItemComponent, LayerLegendComponent, LayerLegendItemComponent, LayerLegendListBindingDirective, LayerLegendListComponent, LayerListBindingDirective, LayerListComponent, LayerListControlsEnum, LayerListDisplacement, LayerListSelectVisibleEnum, LayerListToolComponent, LayerListToolControlsEnum, LayerListToolService, LayerService, LinkedProperties, MEASURE_UNIT_AUTO, MVTDataSource, 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, ProposalType, QueryDirective, QueryFormat, QueryFormatMimeType, QueryHtmlTarget, QuerySearchSource, QueryService, ResponseType, RotationButtonComponent, RoutesFeatureStore, SEARCH_TYPES, STYLELIST_OPTIONS, SearchBarComponent, SearchPointerSummaryDirective, SearchResultAddButtonComponent, SearchResultMode, SearchResultsComponent, SearchResultsItemComponent, SearchSelectorComponent, SearchService, SearchSettingsComponent, SearchSource, SearchSourceService, SliceControl, SourceDirectionsType, SpatialFilterItemComponent, SpatialFilterItemType, SpatialFilterListComponent, SpatialFilterQueryType, SpatialFilterService, SpatialFilterType, SpatialFilterTypeComponent, StepFeatureStore, StopsFeatureStore, StopsStore, StoredQueriesReverseSearchSource, StoredQueriesSearchSource, StyleListService, StyleModalComponent, 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, WorkspaceSelectorDirective, WorkspaceUpdatorDirective, XYZDataSource, ZoomButtonComponent, addDirectionToRoutesFeatureStore, addLayerAndFeaturesStyledToMap, addLayerAndFeaturesToMap, addLinearRingToOlPolygon, addStopToStopsFeatureStore, addStopToStore, buildUrl, cadastreSearchSourceFactory, checkWfsParams, clearOlGeometryMidpoints, computeBestAreaUnit, computeBestLengthUnit, computeLayerTitleFromFile, computeMVTOptionsOnHover, computeOlFeatureExtent, computeOlFeaturesDiff, computeOlFeaturesExtent, computeProjectionsConstraints, computeRelativePosition, computeStopsPosition, computeTermSimilarity, convertDDToDMS, createDefaultTileGrid, createDrawHoleInteractionStyle, createDrawInteractionStyle, createInteractionStyle, createMeasureInteractionStyle, createMeasureLayerStyle, createOlTooltipAtPoint, createOlTooltipDrawAtPoint, createOverlayDefaultStyle, createOverlayLayer, createOverlayMarkerStyle, ctrlKeyDown, defaultCoordinatesSearchResultFormatterFactory, defaultEpsg, defaultFieldNameGeometry, defaultIChercheSearchResultFormatterFactory, defaultMaxFeatures, defaultWfsVersion, directionsStyle, entitiesToRowData, exportToCSV, featureFromOl, 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, 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, hoverFeatureMarker, 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, optionsApiFactory, osrmDirectionsSourcesFactory, pointerPositionSummaryMarker, provideCadastreSearchSource, provideCoordinatesReverseSearchSource, provideDefaultCoordinatesSearchResultFormatter, provideDefaultIChercheSearchResultFormatter, provideIChercheReverseSearchSource, provideIChercheSearchSource, provideILayerSearchResultFormatter, provideILayerSearchSource, provideNominatimSearchSource, provideOgcFilterWidget, provideOptionsApi, provideOsrmDirectionsSource, provideSearchSourceService, provideStoredQueriesReverseSearchSource, provideStoredQueriesSearchSource, provideStyleListLoader, provideStyleListOptions, removeStopFromStore, renderFeatureFromOl, roundCoordTo, 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, zoneMtm, zoneUtm };
+export { AddCatalogDialogComponent, ArcGISRestDataSource, BaseLayersSwitcherComponent, CapabilitiesService, CartoDataSource, Catalog, CatalogBrowserComponent, CatalogFactory, CatalogItemType, CatalogLibaryComponent, CatalogService, ClusterDataSource, CompositeCatalog, ConfigFileToGeoDBService, ConfirmationPopupComponent, CoordinatesReverseSearchSource, CoordinatesReverseSearchSourceFactory, CoordinatesSearchResultFormatter, CoordinatesUnit, DDtoDMS, DataService, DataSource, DataSourceService, DirectionRelativePositionType, DirectionType, DirectionsButtonsComponent, DirectionsComponent, DirectionsFormat, DirectionsInputsComponent, DirectionsResultsComponent, DirectionsService, DirectionsSource, DownloadButtonComponent, DownloadService, DrawComponent, DrawControl, DrawIconService, DrawStyleService, DropGeoFileDirective, EditionWorkspace, EditionWorkspaceService, EncodingFormat, EsriStyleGenerator, ExportButtonComponent, ExportError, ExportFormat, ExportInvalidFileError, ExportNothingToExportError, ExportService, FEATURE, FeatureDataSource, FeatureDetailsComponent, FeatureDetailsDirective, FeatureFormComponent, FeatureMotion, FeatureStore, FeatureStoreInMapExtentStrategy, FeatureStoreInMapResolutionStrategy, FeatureStoreLoadingLayerStrategy, FeatureStoreLoadingStrategy, FeatureStoreSelectionStrategy, FeatureWorkspace, FeatureWorkspaceService, FilterableDataSourcePipe, FontType, GeoDBService, GeoNetworkService, GeolocateButtonComponent, GeometryFormFieldComponent, GeometryFormFieldInputComponent, GeometrySliceError, GeometrySliceLineStringError, GeometrySliceMultiPolygonError, GeometrySliceTooManyIntersectionError, GeometryType, GoogleLinks, HomeExtentButtonComponent, HoverFeatureDirective, IChercheReverseSearchSource, IChercheSearchResultFormatter, IChercheSearchSource, ILayerSearchResultFormatter, ILayerSearchSource, IgoCatalogBrowserModule, IgoCatalogLibraryModule, IgoCatalogModule, IgoConfirmationPopupModule, IgoDataSourceModule, IgoDirectionsModule, IgoDownloadModule, IgoDrawModule, IgoDrawingToolModule, IgoFeatureDetailsModule, IgoFeatureFormModule, IgoFeatureModule, IgoFilterModule, IgoGeoModule, IgoGeoWorkspaceModule, IgoGeometryFormFieldModule, IgoGeometryModule, IgoHttpParameterCodec, IgoImportExportModule, IgoLayerModule, IgoMap, IgoMapModule, IgoMeasureModule, IgoMeasurerModule, IgoMetadataModule, IgoOgcFilterModule, IgoOverlayModule, IgoPrintModule, IgoQueryModule, IgoSearchBarModule, IgoSearchModule, IgoSearchResultsModule, IgoSearchSelectorModule, IgoSearchSettingsModule, IgoStyleListModule, IgoToastModule, IgoWktModule, IgoWorkspaceSelectorModule, IgoWorkspaceUpdatorModule, ImageArcGISRestDataSource, ImageLayer, ImageWatcher, ImportError, ImportExportComponent, ImportInvalidFileError, ImportNothingToImportError, ImportOgreServerError, ImportSRSError, ImportService, ImportSizeError, ImportUnreadableFileError, InfoSectionComponent, InsertSourceInsertDBEnum, LAYER, LabelType, Layer, LayerItemComponent, LayerLegendComponent, LayerLegendItemComponent, LayerLegendListBindingDirective, LayerLegendListComponent, LayerListBindingDirective, LayerListComponent, LayerListControlsEnum, LayerListDisplacement, LayerListSelectVisibleEnum, LayerListToolComponent, LayerListToolControlsEnum, LayerListToolService, LayerService, LinkedProperties, MEASURE_UNIT_AUTO, MVTDataSource, 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, ProposalType, QueryDirective, QueryFormat, QueryFormatMimeType, QueryHtmlTarget, QuerySearchSource, QueryService, ResponseType, RotationButtonComponent, RoutesFeatureStore, SEARCH_TYPES, STYLELIST_OPTIONS, SearchBarComponent, SearchPointerSummaryDirective, SearchResultAddButtonComponent, SearchResultMode, SearchResultsComponent, SearchResultsItemComponent, SearchSelectorComponent, SearchService, SearchSettingsComponent, SearchSource, SearchSourceService, SliceControl, SourceDirectionsType, SpatialFilterItemComponent, SpatialFilterItemType, SpatialFilterListComponent, SpatialFilterQueryType, SpatialFilterService, SpatialFilterType, SpatialFilterTypeComponent, StepFeatureStore, StopsFeatureStore, StopsStore, StoredQueriesReverseSearchSource, StoredQueriesSearchSource, StyleListService, StyleModalComponent, 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, WorkspaceSelectorDirective, WorkspaceUpdatorDirective, XYZDataSource, ZoomButtonComponent, addDirectionToRoutesFeatureStore, addLayerAndFeaturesStyledToMap, addLayerAndFeaturesToMap, addLinearRingToOlPolygon, addStopToStopsFeatureStore, addStopToStore, buildUrl, checkWfsParams, clearOlGeometryMidpoints, computeBestAreaUnit, computeBestLengthUnit, computeLayerTitleFromFile, computeMVTOptionsOnHover, computeOlFeatureExtent, computeOlFeaturesDiff, computeOlFeaturesExtent, computeProjectionsConstraints, computeRelativePosition, computeStopsPosition, computeTermSimilarity, convertDDToDMS, createDefaultTileGrid, createDrawHoleInteractionStyle, createDrawInteractionStyle, createInteractionStyle, createMeasureInteractionStyle, createMeasureLayerStyle, createOlTooltipAtPoint, createOlTooltipDrawAtPoint, createOverlayDefaultStyle, createOverlayLayer, createOverlayMarkerStyle, ctrlKeyDown, defaultCoordinatesSearchResultFormatterFactory, defaultEpsg, defaultFieldNameGeometry, defaultIChercheSearchResultFormatterFactory, defaultMaxFeatures, defaultWfsVersion, directionsStyle, entitiesToRowData, exportToCSV, featureFromOl, 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, 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, hoverFeatureMarker, 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, optionsApiFactory, osrmDirectionsSourcesFactory, pointerPositionSummaryMarker, provideCoordinatesReverseSearchSource, provideDefaultCoordinatesSearchResultFormatter, provideDefaultIChercheSearchResultFormatter, provideIChercheReverseSearchSource, provideIChercheSearchSource, provideILayerSearchResultFormatter, provideILayerSearchSource, provideNominatimSearchSource, provideOgcFilterWidget, provideOptionsApi, provideOsrmDirectionsSource, provideSearchSourceService, provideStoredQueriesReverseSearchSource, provideStoredQueriesSearchSource, provideStyleListLoader, provideStyleListOptions, 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, zoneMtm, zoneUtm };
 //# sourceMappingURL=igo2-geo.mjs.map