@igo2/geo 20.1.0-next.15 → 20.1.0-next.16

package/fesm2022/igo2-geo.mjs

@@ -1,10 +1,10 @@
 import * as i0 from '@angular/core';
-import { inject, DOCUMENT, Injectable, Optional, input, model, Component, output, ChangeDetectorRef, ChangeDetectionStrategy, HostBinding, viewChildren, signal, effect, Directive, contentChild, TemplateRef, HostListener, Input, ApplicationRef, NgModule, Pipe, computed, viewChild, ElementRef, Self, EventEmitter, Output, ViewEncapsulation, Inject, Injector, InjectionToken, provideAppInitializer, makeEnvironmentProviders, APP_INITIALIZER } from '@angular/core';
+import { inject, DOCUMENT, Injectable, Optional, input, output, Component, ChangeDetectorRef, computed, ChangeDetectionStrategy, HostBinding, viewChildren, signal, model, effect, DestroyRef, Directive, viewChild, contentChild, TemplateRef, HostListener, Input, ApplicationRef, NgModule, Pipe, ElementRef, Self, EventEmitter, Output, ViewEncapsulation, Inject, Injector, InjectionToken, provideAppInitializer, makeEnvironmentProviders, APP_INITIALIZER } from '@angular/core';
 import { Clipboard } from '@angular/cdk/clipboard';
 import * as i1 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
 import * as i3 from '@angular/material/icon';
-import { MatIconModule } from '@angular/material/icon';
+import { MatIconModule, MatIconRegistry } from '@angular/material/icon';
 import * as i2 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { LanguageService, IgoLanguageModule } from '@igo2/core/language';
@@ -111,29 +111,31 @@ import * as olproj4 from 'ol/proj/proj4';
 import proj4 from 'proj4';
 import * as i2$1 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
+import { toSignal, toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i4$4 from '@angular/material/badge';
 import { MatBadgeModule } from '@angular/material/badge';
+import { DomSanitizer } from '@angular/platform-browser';
+import { IgoBadgeIconDirective } from '@igo2/common/badge';
 import { IgoIconComponent, VECTOR_SQUARE_ICON, KEYBOARD_ESC_ICON, ENGINE_ICON } from '@igo2/common/icon';
-import { NetworkService } from '@igo2/core/network';
-import { CollapseDirective, CollapsibleComponent } from '@igo2/common/collapsible';
-import { SanitizeHtmlPipe, CustomHtmlComponent } from '@igo2/common/custom-html';
+import { stylefunction } from 'ol-mapbox-style';
 import { optionsFromCapabilities } from 'ol/source/WMTS.js';
 import { Cacheable } from 'ts-cacheable';
-import { ListComponent, ListItemDirective } from '@igo2/common/list';
-import { stylefunction } from 'ol-mapbox-style';
+import { NetworkService } from '@igo2/core/network';
 import olLayerImage from 'ol/layer/Image';
 import olLayerTile from 'ol/layer/Tile';
 import olLayerVectorTile from 'ol/layer/VectorTile';
 import { Group } from 'ol/layer.js';
 import { SelectionModel } from '@angular/cdk/collections';
+import { CollapseDirective, CollapsibleComponent } from '@igo2/common/collapsible';
+import { SanitizeHtmlPipe, CustomHtmlComponent } from '@igo2/common/custom-html';
+import { ListComponent, ListItemDirective } from '@igo2/common/list';
 import * as i3$2 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
 import { FormDialogService, FormComponent, IgoFormDialogModule, FormService, FormFieldComponent, IgoFormFieldComponent } from '@igo2/common/form';
-import { FlatTreeControl, NestedTreeControl } from '@angular/cdk/tree';
 import * as i6 from '@angular/material/slider';
 import { MatSliderModule, MatSlider } from '@angular/material/slider';
 import * as i8 from '@angular/material/tree';
-import { MatTreeFlattener, MatTreeFlatDataSource, MatTreeModule, MatTreeNestedDataSource } from '@angular/material/tree';
+import { MatTree, MatTreeModule, MatTreeNestedDataSource } from '@angular/material/tree';
 import { TreeDragDropDirective, DragAndDropDirective } from '@igo2/common/drag-drop';
 import { PanelComponent } from '@igo2/common/panel';
 import olGeolocation from 'ol/Geolocation';
@@ -158,13 +160,13 @@ import { MatChipsModule } from '@angular/material/chips';
 import * as i8$1 from '@angular/material/radio';
 import { MatRadioModule } from '@angular/material/radio';
 import { DOMService } from '@igo2/common/dom';
+import { NestedTreeControl } from '@angular/cdk/tree';
 import * as i6$1 from '@angular/material/table';
 import { MatTableModule } from '@angular/material/table';
 import OlOverlay from 'ol/Overlay';
 import * as i2$3 from '@angular/material/dialog';
 import { MatDialogRef, MAT_DIALOG_DATA, MatDialogTitle, MatDialogContent, MatDialogActions, MatDialogClose, MatDialog, MatDialogModule } from '@angular/material/dialog';
 import { Document } from 'flexsearch';
-import { DomSanitizer } from '@angular/platform-browser';
 import OlDraw from 'ol/interaction/Draw';
 import OlModify from 'ol/interaction/Modify';
 import OlSelect from 'ol/interaction/Select';
@@ -181,7 +183,6 @@ import * as i2$2 from '@mat-datetimepicker/core';
 import { MatDatetimepickerModule, MatNativeDatetimeModule } from '@mat-datetimepicker/core';
 import { ConfirmDialogService } from '@igo2/common/confirm-dialog';
 import { SpinnerComponent } from '@igo2/common/spinner';
-import { IgoBadgeIconDirective } from '@igo2/common/badge';
 import { StopPropagationDirective } from '@igo2/common/stop-propagation';
 import Circle from 'ol/style/Circle';
 import Fill from 'ol/style/Fill';
@@ -3319,6 +3320,83 @@ function handleFilterDate(filter, interfaceOgc, saveableInterface) {
         }
     });
 }
+function isOgcFilterableDataSourceOptions(dataSourceOptions) {
+    return 'ogcFilters' in dataSourceOptions;
+}
+function isTimeFilterableDataSourceOptions(datasourceOption) {
+    return 'timeFilter' in datasourceOption;
+}
+function getFilterBadge(dataSourceOptions) {
+    if (!isOgcFilterableDataSourceOptions(dataSourceOptions) &&
+        !isTimeFilterableDataSourceOptions(dataSourceOptions)) {
+        return undefined;
+    }
+    let cnt = 0;
+    if (isOgcFilterableDataSourceOptions(dataSourceOptions) &&
+        dataSourceOptions.ogcFilters) {
+        cnt += getOGCFilterBadge(dataSourceOptions.ogcFilters) ?? 0;
+    }
+    if (isTimeFilterableDataSourceOptions(dataSourceOptions) &&
+        dataSourceOptions.timeFilter) {
+        cnt += getTimeFilterBadge(dataSourceOptions) ?? 0;
+    }
+    return cnt > 0 ? cnt : undefined;
+}
+function getOGCFilterBadge(options) {
+    if (!options)
+        return undefined;
+    let cnt = 0;
+    if (!options.advancedOgcFilters) {
+        cnt += countOgcActiveSelectors(options);
+    }
+    else if (options.filters) {
+        cnt +=
+            isIgoLogicalArray(options.filters) &&
+                Array.isArray(options.filters.filters)
+                ? options.filters.filters.length
+                : 1;
+    }
+    if (options.filters && options.interfaceOgcFilters) {
+        cnt += countOgcActiveInterface(options);
+    }
+    return cnt || undefined;
+}
+function countOgcActiveSelectors(options) {
+    return OgcSelectorFields.reduce((total, field) => {
+        const selectorField = options[field];
+        if (!selectorField)
+            return total;
+        const activeGroup = selectorField.groups.find((group) => group.enabled);
+        if (!activeGroup)
+            return total;
+        const activatedCount = (activeGroup.computedSelectors ?? []).reduce((sum, selectorGroup) => sum +
+            (selectorGroup.selectors?.filter((button) => button.enabled).length ??
+                0), 0);
+        return total + activatedCount;
+    }, 0);
+}
+function countOgcActiveInterface(options) {
+    return options.interfaceOgcFilters.reduce((cnt, interfaceOgc) => {
+        const layerFilter = searchFilter(options.filters, 'propertyName', interfaceOgc.propertyName);
+        if (layerFilter &&
+            isOgcFilterDuringOptions(layerFilter) &&
+            interfaceOgc.active) {
+            return cnt + (interfaceOgc.begin || interfaceOgc.end ? 1 : 0);
+        }
+        return cnt;
+    }, 0);
+}
+function getTimeFilterBadge(timeFilterableOptions) {
+    if (timeFilterableOptions.timeFilterable &&
+        timeFilterableOptions.timeFilter &&
+        timeFilterableOptions.timeFilter.value &&
+        timeFilterableOptions.timeFilter.enabled) {
+        return 1;
+    }
+    else {
+        return undefined;
+    }
+}
 
 class WFSDataSource extends DataSource {
     options;
@@ -5153,6 +5231,13 @@ class LayerBase {
     }
     _visible$ = new BehaviorSubject(undefined);
     visible$ = this._visible$.asObservable();
+    get parent() {
+        return this.parent$.value;
+    }
+    set parent(parent) {
+        this.parent$.next(parent);
+    }
+    parent$ = new BehaviorSubject(undefined);
     get displayed() {
         return this._displayed$.value;
     }
@@ -5170,6 +5255,7 @@ class LayerBase {
     }
     get saveableOptions() {
         return {
+            id: this.id,
             title: this.options.title,
             zIndex: this.zIndex,
             visible: this.visible,
@@ -5769,6 +5855,14 @@ class Linked {
         });
         this.enable(LinkedProperties.ZINDEX);
     }
+    display() {
+        // Some child doesn't have a z-index and may be hidden by the main layer.
+        this.children.forEach((link) => {
+            if (link.options.zIndex == null) {
+                link.zIndex = (this.layer.zIndex ?? 1) + 1;
+            }
+        });
+    }
     disable(...properties) {
         properties.forEach((property) => {
             if (this.disabledProperties.includes(property)) {
@@ -5873,7 +5967,6 @@ let Layer = class Layer extends LayerBase {
     options;
     messageService;
     authInterceptor;
-    parent;
     ol;
     hasBeenVisible$ = new BehaviorSubject(undefined);
     legend;
@@ -5894,6 +5987,9 @@ let Layer = class Layer extends LayerBase {
                 .filter((m) => m.options?.showOnEachLayerVisibility)
                 .map((message) => this.showMessage(message));
         }
+        if (value && this.link) {
+            this.link.display();
+        }
         value ? this.dataSource.addEvents() : this.dataSource.removeEvents();
     }
     get maxResolution() {
@@ -5924,6 +6020,9 @@ let Layer = class Layer extends LayerBase {
         this.options = options;
         this.messageService = messageService;
         this.authInterceptor = authInterceptor;
+        if (!options.id) {
+            options.id = uuid();
+        }
         this.dataSource = options.source;
         this.legendCollapsed = options.legendOptions
             ? options.legendOptions.collapsed
@@ -8446,10 +8545,10 @@ class DirectionsButtonsComponent {
     routeService = inject(RouteService, { optional: true });
     directionsService = inject(DirectionsService);
     contextUri = input.required(...(ngDevMode ? [{ debugName: "contextUri" }] : []));
-    zoomOnActiveRoute = model.required(...(ngDevMode ? [{ debugName: "zoomOnActiveRoute" }] : []));
     stopsStore = input.required(...(ngDevMode ? [{ debugName: "stopsStore" }] : []));
     routesFeatureStore = input.required(...(ngDevMode ? [{ debugName: "routesFeatureStore" }] : []));
     stepsFeatureStore = input.required(...(ngDevMode ? [{ debugName: "stepsFeatureStore" }] : []));
+    zoomOnActiveRoute = output();
     downloadDirectionsBtnDisabled = false;
     /**
      * Returns the active route from the routesFeatureStore.
@@ -8468,13 +8567,6 @@ class DirectionsButtonsComponent {
     resetStops() {
         this.stopsStore().clearStops();
     }
-    /**
-     * Triggers the zoom on the active route.
-     *
-     */
-    setZoomOnActiveRoute() {
-        this.zoomOnActiveRoute.set(true);
-    }
     /**
      * Copies the directions to the clipboard and displays a success message if the copy is successful.
      *
@@ -8628,12 +8720,12 @@ class DirectionsButtonsComponent {
         return;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DirectionsButtonsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.18", type: DirectionsButtonsComponent, isStandalone: true, selector: "igo-directions-buttons", inputs: { contextUri: { classPropertyName: "contextUri", publicName: "contextUri", isSignal: true, isRequired: true, transformFunction: null }, zoomOnActiveRoute: { classPropertyName: "zoomOnActiveRoute", publicName: "zoomOnActiveRoute", isSignal: true, isRequired: true, transformFunction: null }, stopsStore: { classPropertyName: "stopsStore", publicName: "stopsStore", isSignal: true, isRequired: true, transformFunction: null }, routesFeatureStore: { classPropertyName: "routesFeatureStore", publicName: "routesFeatureStore", isSignal: true, isRequired: true, transformFunction: null }, stepsFeatureStore: { classPropertyName: "stepsFeatureStore", publicName: "stepsFeatureStore", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { zoomOnActiveRoute: "zoomOnActiveRouteChange" }, ngImport: i0, template: "<button\n  mat-icon-button\n  [matTooltip]=\"'igo.geo.directions.buttons.resetStops' | translate\"\n  color=\"warn\"\n  (click)=\"resetStops()\"\n>\n  <mat-icon>restart_alt</mat-icon>\n</button>\n<button\n  mat-icon-button\n  [matTooltip]=\"'igo.geo.directions.buttons.zoomOnRoute' | translate\"\n  color=\"primary\"\n  (click)=\"setZoomOnActiveRoute()\"\n>\n  <mat-icon>frame_inspect</mat-icon>\n</button>\n<button\n  mat-icon-button\n  [matTooltip]=\"'igo.geo.directions.buttons.copyDirections' | translate\"\n  color=\"primary\"\n  (click)=\"copyDirectionsToClipboard()\"\n>\n  <mat-icon>content_copy</mat-icon>\n</button>\n<button\n  mat-icon-button\n  [matTooltip]=\"'igo.geo.directions.buttons.copyLink' | translate\"\n  color=\"primary\"\n  (click)=\"copyLinkToClipboard()\"\n>\n  <mat-icon>link</mat-icon>\n</button>\n\n<button\n  mat-icon-button\n  [disabled]=\"downloadDirectionsBtnDisabled\"\n  [matTooltip]=\"'igo.geo.directions.buttons.downloadDirections' | translate\"\n  color=\"primary\"\n  (click)=\"downloadDirections()\"\n>\n  <mat-icon>download</mat-icon>\n</button>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: IgoLanguageModule }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.18", type: DirectionsButtonsComponent, isStandalone: true, selector: "igo-directions-buttons", inputs: { contextUri: { classPropertyName: "contextUri", publicName: "contextUri", isSignal: true, isRequired: true, transformFunction: null }, stopsStore: { classPropertyName: "stopsStore", publicName: "stopsStore", isSignal: true, isRequired: true, transformFunction: null }, routesFeatureStore: { classPropertyName: "routesFeatureStore", publicName: "routesFeatureStore", isSignal: true, isRequired: true, transformFunction: null }, stepsFeatureStore: { classPropertyName: "stepsFeatureStore", publicName: "stepsFeatureStore", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { zoomOnActiveRoute: "zoomOnActiveRoute" }, ngImport: i0, template: "<button\n  mat-icon-button\n  [matTooltip]=\"'igo.geo.directions.buttons.resetStops' | translate\"\n  color=\"warn\"\n  (click)=\"resetStops()\"\n>\n  <mat-icon>restart_alt</mat-icon>\n</button>\n<button\n  mat-icon-button\n  [matTooltip]=\"'igo.geo.directions.buttons.zoomOnRoute' | translate\"\n  color=\"primary\"\n  (click)=\"zoomOnActiveRoute.emit()\"\n>\n  <mat-icon>frame_inspect</mat-icon>\n</button>\n<button\n  mat-icon-button\n  [matTooltip]=\"'igo.geo.directions.buttons.copyDirections' | translate\"\n  color=\"primary\"\n  (click)=\"copyDirectionsToClipboard()\"\n>\n  <mat-icon>content_copy</mat-icon>\n</button>\n<button\n  mat-icon-button\n  [matTooltip]=\"'igo.geo.directions.buttons.copyLink' | translate\"\n  color=\"primary\"\n  (click)=\"copyLinkToClipboard()\"\n>\n  <mat-icon>link</mat-icon>\n</button>\n\n<button\n  mat-icon-button\n  [disabled]=\"downloadDirectionsBtnDisabled\"\n  [matTooltip]=\"'igo.geo.directions.buttons.downloadDirections' | translate\"\n  color=\"primary\"\n  (click)=\"downloadDirections()\"\n>\n  <mat-icon>download</mat-icon>\n</button>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: IgoLanguageModule }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DirectionsButtonsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'igo-directions-buttons', imports: [MatButtonModule, MatTooltipModule, MatIconModule, IgoLanguageModule], template: "<button\n  mat-icon-button\n  [matTooltip]=\"'igo.geo.directions.buttons.resetStops' | translate\"\n  color=\"warn\"\n  (click)=\"resetStops()\"\n>\n  <mat-icon>restart_alt</mat-icon>\n</button>\n<button\n  mat-icon-button\n  [matTooltip]=\"'igo.geo.directions.buttons.zoomOnRoute' | translate\"\n  color=\"primary\"\n  (click)=\"setZoomOnActiveRoute()\"\n>\n  <mat-icon>frame_inspect</mat-icon>\n</button>\n<button\n  mat-icon-button\n  [matTooltip]=\"'igo.geo.directions.buttons.copyDirections' | translate\"\n  color=\"primary\"\n  (click)=\"copyDirectionsToClipboard()\"\n>\n  <mat-icon>content_copy</mat-icon>\n</button>\n<button\n  mat-icon-button\n  [matTooltip]=\"'igo.geo.directions.buttons.copyLink' | translate\"\n  color=\"primary\"\n  (click)=\"copyLinkToClipboard()\"\n>\n  <mat-icon>link</mat-icon>\n</button>\n\n<button\n  mat-icon-button\n  [disabled]=\"downloadDirectionsBtnDisabled\"\n  [matTooltip]=\"'igo.geo.directions.buttons.downloadDirections' | translate\"\n  color=\"primary\"\n  (click)=\"downloadDirections()\"\n>\n  <mat-icon>download</mat-icon>\n</button>\n" }]
-        }], propDecorators: { contextUri: [{ type: i0.Input, args: [{ isSignal: true, alias: "contextUri", required: true }] }], zoomOnActiveRoute: [{ type: i0.Input, args: [{ isSignal: true, alias: "zoomOnActiveRoute", required: true }] }, { type: i0.Output, args: ["zoomOnActiveRouteChange"] }], stopsStore: [{ type: i0.Input, args: [{ isSignal: true, alias: "stopsStore", required: true }] }], routesFeatureStore: [{ type: i0.Input, args: [{ isSignal: true, alias: "routesFeatureStore", required: true }] }], stepsFeatureStore: [{ type: i0.Input, args: [{ isSignal: true, alias: "stepsFeatureStore", required: true }] }] } });
+            args: [{ selector: 'igo-directions-buttons', imports: [MatButtonModule, MatTooltipModule, MatIconModule, IgoLanguageModule], template: "<button\n  mat-icon-button\n  [matTooltip]=\"'igo.geo.directions.buttons.resetStops' | translate\"\n  color=\"warn\"\n  (click)=\"resetStops()\"\n>\n  <mat-icon>restart_alt</mat-icon>\n</button>\n<button\n  mat-icon-button\n  [matTooltip]=\"'igo.geo.directions.buttons.zoomOnRoute' | translate\"\n  color=\"primary\"\n  (click)=\"zoomOnActiveRoute.emit()\"\n>\n  <mat-icon>frame_inspect</mat-icon>\n</button>\n<button\n  mat-icon-button\n  [matTooltip]=\"'igo.geo.directions.buttons.copyDirections' | translate\"\n  color=\"primary\"\n  (click)=\"copyDirectionsToClipboard()\"\n>\n  <mat-icon>content_copy</mat-icon>\n</button>\n<button\n  mat-icon-button\n  [matTooltip]=\"'igo.geo.directions.buttons.copyLink' | translate\"\n  color=\"primary\"\n  (click)=\"copyLinkToClipboard()\"\n>\n  <mat-icon>link</mat-icon>\n</button>\n\n<button\n  mat-icon-button\n  [disabled]=\"downloadDirectionsBtnDisabled\"\n  [matTooltip]=\"'igo.geo.directions.buttons.downloadDirections' | translate\"\n  color=\"primary\"\n  (click)=\"downloadDirections()\"\n>\n  <mat-icon>download</mat-icon>\n</button>\n" }]
+        }], propDecorators: { contextUri: [{ type: i0.Input, args: [{ isSignal: true, alias: "contextUri", required: true }] }], stopsStore: [{ type: i0.Input, args: [{ isSignal: true, alias: "stopsStore", required: true }] }], routesFeatureStore: [{ type: i0.Input, args: [{ isSignal: true, alias: "routesFeatureStore", required: true }] }], stepsFeatureStore: [{ type: i0.Input, args: [{ isSignal: true, alias: "stepsFeatureStore", required: true }] }], zoomOnActiveRoute: [{ type: i0.Output, args: ["zoomOnActiveRoute"] }] } });
 
 class DirectionsInputsComponent {
     languageService = inject(LanguageService);
@@ -9043,178 +9135,70 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                     ], template: "@if (routes && activeRoute) {\n  <div class=\"igo-input-container\">\n    @if (routes.length > 1) {\n      <mat-form-field [matTooltip]=\"activeRoute.title\">\n        <mat-label>{{\n          'igo.geo.directions.results.routeOptions' | translate\n        }}</mat-label>\n        <mat-select\n          (selectionChange)=\"chooseRouteOption()\"\n          [(ngModel)]=\"activeRoute\"\n        >\n          @for (route of routes; track route; let routeIndex = $index) {\n            <mat-option [value]=\"route\">\n              Option {{ routeIndex + 1 }}: {{ route.title }} ({{\n                formatDistance(route.distance)\n              }}\n              - {{ formatDuration(route.duration) }})\n            </mat-option>\n          }\n        </mat-select>\n      </mat-form-field>\n    }\n    <h4 mat-header class=\"igo-route-title\">\n      {{ activeRoute.title }}\n      {{ getTitleDurationAndDistance() }}\n    </h4>\n    <mat-list (mouseleave)=\"onLeaveList()\">\n      @for (step of activeRoute.steps; track step; let stepIndex = $index) {\n        @if (\n          (formatDistance(step.distance) && formatDuration(step.duration)) ||\n          stepIndex === activeRoute.steps.length - 1\n        ) {\n          <mat-list-item\n            matListItem\n            class=\"igo-steps step\"\n            (mouseenter)=\"showStep(step)\"\n            (click)=\"showStep(step, true)\"\n          >\n            <mat-icon\n              matListItemIcon\n              [matTooltip]=\"\n                'igo.geo.directions.results.stepTitleTooltip' | translate\n              \"\n              >{{ getFormattedStep(step, stepIndex).iconName }}\n            </mat-icon>\n            <span\n              matListItemTitle\n              class=\"step-title\"\n              [matTooltip]=\"getFormattedStep(step, stepIndex).instruction\"\n            >\n              {{ getFormattedStep(step, stepIndex).instruction }}\n            </span>\n            @if (stepIndex !== activeRoute.steps.length - 1) {\n              <span matListItemLine>\n                {{ formatDistance(step.distance) }} -\n                {{ formatDuration(step.duration) }}\n              </span>\n            }\n          </mat-list-item>\n        }\n      }\n    </mat-list>\n  </div>\n}\n", styles: [".igo-input-container{width:100%;padding:20px 10px;box-sizing:border-box}.igo-input-container mat-form-field{width:100%}.igo-route-title{font-weight:700;margin:0}.step{cursor:pointer}mat-list-item.igo-steps:hover{background-color:var(--mat-sys-primary-container)}\n"] }]
         }], propDecorators: { routesFeatureStore: [{ type: i0.Input, args: [{ isSignal: true, alias: "routesFeatureStore", required: true }] }], stepsFeatureStore: [{ type: i0.Input, args: [{ isSignal: true, alias: "stepsFeatureStore", required: true }] }] } });
 
-const EYE_CLOSE_SVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>eye-closed</title><path d="M12 17.5C8.2 17.5 4.8 15.4 3.2 12H1C2.7 16.4 7 19.5 12 19.5S21.3 16.4 23 12H20.8C19.2 15.4 15.8 17.5 12 17.5Z" /></svg>`;
-class LayerVisibilityButtonComponent {
-    cdr = inject(ChangeDetectorRef);
-    eyeClosedSvg = {
-        name: 'eye-closed',
-        svg: EYE_CLOSE_SVG
-    };
-    hiddenByParent;
-    visible;
-    layer = input.required(...(ngDevMode ? [{ debugName: "layer" }] : []));
-    tooltip = input(undefined, ...(ngDevMode ? [{ debugName: "tooltip" }] : []));
-    disabled = input(undefined, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
-    showQueryBadge = input(undefined, ...(ngDevMode ? [{ debugName: "showQueryBadge" }] : []));
-    inResolutionsRange = input(undefined, ...(ngDevMode ? [{ debugName: "inResolutionsRange" }] : []));
-    get defaultTooltip() {
-        const layer = this.layer();
-        return !layer.isInResolutionsRange
-            ? 'igo.geo.layer.notInResolution'
-            : layer.visible && this.disabled()
-                ? 'igo.geo.layer.group.hideChildren'
-                : layer.visible
-                    ? 'igo.geo.layer.hideLayer'
-                    : 'igo.geo.layer.showLayer';
-    }
-    visibilityChange = output();
-    ngOnInit() {
-        this.layer().parent?.displayed$.subscribe((displayed) => {
-            this.hiddenByParent = !displayed;
-            this.cdr.markForCheck();
-        });
-        this.layer().visible$.subscribe((visible) => {
-            this.visible = visible;
-            this.cdr.markForCheck();
-        });
-    }
-    toggle(event) {
-        this.layer().visible = !this.layer().visible;
-        this.visibilityChange.emit(event);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: LayerVisibilityButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.18", type: LayerVisibilityButtonComponent, isStandalone: true, selector: "igo-layer-visibility-button", inputs: { layer: { classPropertyName: "layer", publicName: "layer", isSignal: true, isRequired: true, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, showQueryBadge: { classPropertyName: "showQueryBadge", publicName: "showQueryBadge", isSignal: true, isRequired: false, transformFunction: null }, inResolutionsRange: { classPropertyName: "inResolutionsRange", publicName: "inResolutionsRange", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visibilityChange: "visibilityChange" }, ngImport: i0, template: "<button\n  mat-icon-button\n  [ngClass]=\"{\n    disabled: disabled(),\n    'out-of-range': !inResolutionsRange(),\n    'visibility-hidden': !visible\n  }\"\n  [color]=\"visible ? 'primary' : 'default'\"\n  tooltip-position=\"below\"\n  matTooltipShowDelay=\"500\"\n  [matTooltip]=\"tooltip() ?? defaultTooltip | translate\"\n  (click)=\"toggle($event)\"\n>\n  <igo-icon\n    matBadge=\"?\"\n    matBadgeColor=\"accent\"\n    matBadgeSize=\"small\"\n    matBadgePosition=\"after\"\n    [matBadgeHidden]=\"!showQueryBadge()\"\n    [icon]=\"\n      visible\n        ? hiddenByParent\n          ? eyeClosedSvg\n          : 'visibility'\n        : 'visibility_off'\n    \"\n    iconPositionEnd\n  />\n</button>\n", styles: [":host .disabled.out-of-range,:host .visibility-hidden.out-of-range{opacity:.44}:host ::ng-deep button.mat-default mat-icon{color:var(--mat-sys-on-secondary-fixed);fill:var(--mat-sys-on-secondary-fixed);opacity:.64}:host ::ng-deep button.out-of-range mat-icon,:host ::ng-deep button.disabled mat-icon{color:var(--mat-sys-on-secondary-fixed);fill:var(--mat-sys-on-secondary-fixed);opacity:.64}mat-icon[matBadge] ::ng-deep .mat-badge-content{font-size:12px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatBadgeModule }, { kind: "directive", type: i4$4.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: IgoLanguageModule }, { kind: "component", type: IgoIconComponent, selector: "igo-icon", inputs: ["color", "icon"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: LayerVisibilityButtonComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'igo-layer-visibility-button', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        NgClass,
-                        MatBadgeModule,
-                        MatButtonModule,
-                        MatIconModule,
-                        MatTooltipModule,
-                        IgoLanguageModule,
-                        IgoIconComponent
-                    ], template: "<button\n  mat-icon-button\n  [ngClass]=\"{\n    disabled: disabled(),\n    'out-of-range': !inResolutionsRange(),\n    'visibility-hidden': !visible\n  }\"\n  [color]=\"visible ? 'primary' : 'default'\"\n  tooltip-position=\"below\"\n  matTooltipShowDelay=\"500\"\n  [matTooltip]=\"tooltip() ?? defaultTooltip | translate\"\n  (click)=\"toggle($event)\"\n>\n  <igo-icon\n    matBadge=\"?\"\n    matBadgeColor=\"accent\"\n    matBadgeSize=\"small\"\n    matBadgePosition=\"after\"\n    [matBadgeHidden]=\"!showQueryBadge()\"\n    [icon]=\"\n      visible\n        ? hiddenByParent\n          ? eyeClosedSvg\n          : 'visibility'\n        : 'visibility_off'\n    \"\n    iconPositionEnd\n  />\n</button>\n", styles: [":host .disabled.out-of-range,:host .visibility-hidden.out-of-range{opacity:.44}:host ::ng-deep button.mat-default mat-icon{color:var(--mat-sys-on-secondary-fixed);fill:var(--mat-sys-on-secondary-fixed);opacity:.64}:host ::ng-deep button.out-of-range mat-icon,:host ::ng-deep button.disabled mat-icon{color:var(--mat-sys-on-secondary-fixed);fill:var(--mat-sys-on-secondary-fixed);opacity:.64}mat-icon[matBadge] ::ng-deep .mat-badge-content{font-size:12px}\n"] }]
-        }], propDecorators: { layer: [{ type: i0.Input, args: [{ isSignal: true, alias: "layer", required: true }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], showQueryBadge: [{ type: i0.Input, args: [{ isSignal: true, alias: "showQueryBadge", required: false }] }], inResolutionsRange: [{ type: i0.Input, args: [{ isSignal: true, alias: "inResolutionsRange", required: false }] }], visibilityChange: [{ type: i0.Output, args: ["visibilityChange"] }] } });
-
-class LayerGroupComponent {
-    layer = input(undefined, ...(ngDevMode ? [{ debugName: "layer" }] : []));
-    viewerOptions = input(undefined, ...(ngDevMode ? [{ debugName: "viewerOptions" }] : []));
-    selected = input(undefined, ...(ngDevMode ? [{ debugName: "selected" }] : []));
-    selectionDisabled = input(undefined, ...(ngDevMode ? [{ debugName: "selectionDisabled" }] : []));
-    action = output();
-    visibilityChange = output();
-    expand = output();
-    selectChange = output();
-    isDisabled;
-    get title() {
-        return this.layer().title;
-    }
-    get collapsed() {
-        return this.layer().collapsed;
-    }
-    set collapsed(value) {
-        this.layer().collapsed = value;
-    }
-    get tooltipMessage() {
-        const layer = this.layer();
-        return !layer.isInResolutionsRange
-            ? 'igo.geo.layer.notInResolution'
-            : layer.visible && this.isDisabled
-                ? 'igo.geo.layer.group.hideChildren'
-                : layer.visible
-                    ? 'igo.geo.layer.group.hide'
-                    : 'igo.geo.layer.group.show';
-    }
-    ngOnInit() {
-        this.layer().displayed$.subscribe((displayed) => {
-            this.isDisabled = !displayed;
-        });
-    }
-    onToggle() {
-        this.collapsed = !this.collapsed;
-    }
-    toggleVisibility(event) {
-        event.stopPropagation();
-        this.visibilityChange.emit(event);
+let ImageWatcher = class ImageWatcher extends Watcher {
+    messageService;
+    id;
+    loaded = 0;
+    loading = 0;
+    source;
+    constructor(layer, messageService) {
+        super();
+        this.messageService = messageService;
+        this.source = layer.options.source.ol;
+        this.id = uuid();
     }
-    toggleLayerGroupTool(event) {
-        event.stopPropagation();
-        this.action.emit(this.layer());
+    watch() {
+        this.source.on(`imageloadstart`, (e) => this.handleLoadStart(e));
+        this.source.on(`imageloadend`, (e) => this.handleLoadEnd(e));
+        this.source.on(`imageloaderror`, (e) => this.handleLoadEnd(e));
+        this.source.on(`imageloaderror`, (e) => this.handleLoadError(e));
     }
-    toggleLayerTool(layer) {
-        this.action.emit(layer);
+    unwatch() {
+        this.source.un(`imageloadstart`, (e) => this.handleLoadStart(e));
+        this.source.un(`imageloadend`, (e) => this.handleLoadEnd(e));
+        this.source.un(`imageloaderror`, (e) => this.handleLoadEnd(e));
+        this.source.un(`imageloaderror`, (e) => this.handleLoadError(e));
     }
-    handleExpand() {
-        // TODO: The 'emit' function requires a mandatory void argument
-        this.expand.emit();
+    handleLoadStart(event) {
+        if (!event.image.__watchers__) {
+            event.image.__watchers__ = [];
+        }
+        event.image.__watchers__.push(this.id);
+        this.loading += 1;
+        this.status = SubjectStatus.Working;
     }
-    handleSelect(event) {
-        this.selectChange.emit(event.checked);
+    handleLoadEnd(event) {
+        if (!event.image.__watchers__) {
+            return;
+        }
+        const watcherIndex = event.image.__watchers__.indexOf(this.id);
+        if (watcherIndex < 0) {
+            return;
+        }
+        event.image.__watchers__.splice(watcherIndex, 1);
+        this.loaded += 1;
+        const loading = this.loading;
+        if (this.loaded >= loading) {
+            if (loading === this.loading) {
+                this.status = SubjectStatus.Done;
+                this.loaded = this.loading = 0;
+            }
+        }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: LayerGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: LayerGroupComponent, isStandalone: true, selector: "igo-layer-group", inputs: { layer: { classPropertyName: "layer", publicName: "layer", isSignal: true, isRequired: false, transformFunction: null }, viewerOptions: { classPropertyName: "viewerOptions", publicName: "viewerOptions", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, selectionDisabled: { classPropertyName: "selectionDisabled", publicName: "selectionDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { action: "action", visibilityChange: "visibilityChange", expand: "expand", selectChange: "selectChange" }, host: { properties: { "class.disabled": "this.isDisabled" } }, ngImport: i0, template: "<div class=\"layer-content\">\n  <ng-content />\n\n  @if (viewerOptions().mode === 'selection') {\n    <mat-checkbox\n      [checked]=\"selected()\"\n      [disabled]=\"selectionDisabled()\"\n      (change)=\"handleSelect($event)\"\n    />\n  }\n  <span class=\"igo-layer-title\" (click)=\"handleExpand()\">{{\n    layer().title\n  }}</span>\n</div>\n\n<div class=\"list-actions\">\n  <div class=\"list-secondary-actions\">\n    <button\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)=\"toggleLayerGroupTool($event)\"\n    >\n      <mat-icon>more_horiz</mat-icon>\n    </button>\n  </div>\n\n  <igo-layer-visibility-button\n    [layer]=\"layer()\"\n    [disabled]=\"isDisabled\"\n    [tooltip]=\"tooltipMessage\"\n    [inResolutionsRange]=\"layer().isInResolutionsRange$ | async\"\n    (visibilityChange)=\"toggleVisibility($event)\"\n  />\n</div>\n", styles: [":host ::ng-deep .list-secondary-actions button{visibility:hidden}:host ::ng-deep .list-secondary-actions button.disabled{visibility:visible}:host:hover ::ng-deep .list-secondary-actions button{visibility:visible}:host.disabled ::ng-deep .igo-layer-title,:host.disabled ::ng-deep .list-secondary-actions{opacity:.54}:host{display:flex;align-items:center;justify-content:space-between;background-color:var(--mat-sys-surface)}:host ::ng-deep button.mat-default mat-icon{color:var(--mat-sys-on-surface);fill:var(--mat-sys-on-surface)}:host ::ng-deep button.disabled mat-icon{color:var(--mat-sys-on-secondary-fixed);fill:var(--mat-sys-on-secondary-fixed);opacity:.64}.igo-layer-title{flex:1;font-weight:700;cursor:pointer;max-height:48px;white-space:normal;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;box-orient:vertical;-webkit-box-orient:vertical;line-clamp:2;-webkit-line-clamp:2}.layer-browser-group-carret{margin-right:10px}.layer-content{display:flex;align-items:center;flex:1}.list-actions{display:flex;margin-left:4px;margin-right:4px}.child-list{padding-left:26px}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i2$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: LayerVisibilityButtonComponent, selector: "igo-layer-visibility-button", inputs: ["layer", "tooltip", "disabled", "showQueryBadge", "inResolutionsRange"], outputs: ["visibilityChange"] }, { kind: "ngmodule", type: IgoLanguageModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: LayerGroupComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'igo-layer-group', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        AsyncPipe,
-                        MatButtonModule,
-                        MatCheckboxModule,
-                        MatTooltipModule,
-                        MatIconModule,
-                        LayerVisibilityButtonComponent,
-                        IgoLanguageModule
-                    ], template: "<div class=\"layer-content\">\n  <ng-content />\n\n  @if (viewerOptions().mode === 'selection') {\n    <mat-checkbox\n      [checked]=\"selected()\"\n      [disabled]=\"selectionDisabled()\"\n      (change)=\"handleSelect($event)\"\n    />\n  }\n  <span class=\"igo-layer-title\" (click)=\"handleExpand()\">{{\n    layer().title\n  }}</span>\n</div>\n\n<div class=\"list-actions\">\n  <div class=\"list-secondary-actions\">\n    <button\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)=\"toggleLayerGroupTool($event)\"\n    >\n      <mat-icon>more_horiz</mat-icon>\n    </button>\n  </div>\n\n  <igo-layer-visibility-button\n    [layer]=\"layer()\"\n    [disabled]=\"isDisabled\"\n    [tooltip]=\"tooltipMessage\"\n    [inResolutionsRange]=\"layer().isInResolutionsRange$ | async\"\n    (visibilityChange)=\"toggleVisibility($event)\"\n  />\n</div>\n", styles: [":host ::ng-deep .list-secondary-actions button{visibility:hidden}:host ::ng-deep .list-secondary-actions button.disabled{visibility:visible}:host:hover ::ng-deep .list-secondary-actions button{visibility:visible}:host.disabled ::ng-deep .igo-layer-title,:host.disabled ::ng-deep .list-secondary-actions{opacity:.54}:host{display:flex;align-items:center;justify-content:space-between;background-color:var(--mat-sys-surface)}:host ::ng-deep button.mat-default mat-icon{color:var(--mat-sys-on-surface);fill:var(--mat-sys-on-surface)}:host ::ng-deep button.disabled mat-icon{color:var(--mat-sys-on-secondary-fixed);fill:var(--mat-sys-on-secondary-fixed);opacity:.64}.igo-layer-title{flex:1;font-weight:700;cursor:pointer;max-height:48px;white-space:normal;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;box-orient:vertical;-webkit-box-orient:vertical;line-clamp:2;-webkit-line-clamp:2}.layer-browser-group-carret{margin-right:10px}.layer-content{display:flex;align-items:center;flex:1}.list-actions{display:flex;margin-left:4px;margin-right:4px}.child-list{padding-left:26px}\n"] }]
-        }], propDecorators: { layer: [{ type: i0.Input, args: [{ isSignal: true, alias: "layer", required: false }] }], viewerOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewerOptions", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], selectionDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionDisabled", required: false }] }], action: [{ type: i0.Output, args: ["action"] }], visibilityChange: [{ type: i0.Output, args: ["visibilityChange"] }], expand: [{ type: i0.Output, args: ["expand"] }], selectChange: [{ type: i0.Output, args: ["selectChange"] }], isDisabled: [{
-                type: HostBinding,
-                args: ['class.disabled']
-            }] } });
-
-/**
- * Whether a layer is queryable
- * @param layer Layer
- * @returns True if the layer s squeryable
- */
-function layerIsQueryable(layer) {
-    if (isLayerGroup(layer)) {
-        return false;
+    handleLoadError(event) {
+        if (!event.image.__watchers__) {
+            return;
+        }
+        this.messageService?.error('igo.geo.dataSource.unavailable', 'igo.geo.dataSource.unavailableTitle', undefined, { value: event.target.params_.LAYERS });
+        this.loaded = -1;
+        this.loading = 0;
+        this.status = SubjectStatus.Error;
     }
-    const dataSource = layer.dataSource;
-    return dataSource.options.queryable === true;
-}
-/**
- * Whether an OL layer is queryable
- * @param layer Layer
- * @returns True if the ol layer is queryable
- */
-function olLayerIsQueryable(olLayer) {
-    const layer = olLayer.get('_layer');
-    return layer === undefined ? false : layerIsQueryable(layer);
-}
-/**
- * Whether a layer's feature is queryable
- * @param layer Layer
- * @returns True if the layer's feature is queryable
- */
-function layerFeatureIsQueryable(layer) {
-    const dataSource = layer.dataSource;
-    return dataSource.options.queryLayerFeatures !== undefined
-        ? dataSource.options.queryLayerFeatures === true
-        : true;
-}
-/**
- * Whether an OL Vector layer is queryable
- * @param layer Layer
- * @returns True if the ol vector layer is queryable
- */
-function olLayerFeatureIsQueryable(olLayer) {
-    const layer = olLayer.get('_layer');
-    return layer === undefined
-        ? false
-        : layerIsQueryable(layer) && layerFeatureIsQueryable(layer);
-}
+};
+ImageWatcher = __decorate([
+    __param(1, Optional()),
+    __metadata("design:paramtypes", [Function, MessageService])
+], ImageWatcher);
 
 var TimeFilterType;
 (function (TimeFilterType) {
@@ -10054,626 +10038,166 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                 }]
         }], propDecorators: { getArcgisOptions: [], getImageArcgisOptions: [], getTileArcgisOptions: [], getCapabilities: [] } });
 
-class LayerLegendComponent {
+class OptionsService {
+}
+
+class DataSourceService {
     capabilitiesService = inject(CapabilitiesService);
+    optionsService = inject(OptionsService, { optional: true });
+    wfsDataSourceService = inject(WFSService);
+    ogcFilterService = inject(OGCFilterService);
     languageService = inject(LanguageService);
-    cdRef = inject(ChangeDetectorRef);
-    config = inject(ConfigService);
-    http = inject(HttpClient);
-    updateLegendOnResolutionChange = input(false, ...(ngDevMode ? [{ debugName: "updateLegendOnResolutionChange" }] : []));
-    /**
-     * Observable of the legend items
-     */
-    legendItems$ = new BehaviorSubject([]);
-    /**
-     * Subscription to the map's resolution
-     */
-    state$$;
-    /**
-     * The available styles
-     */
-    styles;
-    /**
-     * The style used to make the legend
-     */
-    currentStyle;
-    /**
-     * The extent used to make the legend
-     */
-    view = undefined;
-    /**
-     * Get list of images display
-     */
-    renderedLegends = viewChildren('renderedLegend', ...(ngDevMode ? [{ debugName: "renderedLegends" }] : []));
-    /**
-     * List of size of images displayed
-     */
-    imagesHeight = {};
-    layer = input(undefined, ...(ngDevMode ? [{ debugName: "layer" }] : []));
-    /**
-     * if getLegendGraphic is authorized
-     */
-    getLegend = true;
-    /**
-     * On init, subscribe to the map's resolution and update the legend accordingly
-     */
-    ngOnInit() {
-        let lastlLegend = this.layer().legend;
-        this.styles = this.listStyles();
-        const sourceOptions = this.layer().options.source.options;
-        if (sourceOptions && sourceOptions.params && sourceOptions.params.STYLES) {
-            // if a styles is provided into the layers wms params
-            this.currentStyle = this.styles.find((style) => style.name === sourceOptions.params.STYLES).name;
+    messageService = inject(MessageService);
+    authInterceptor = inject(AuthInterceptor);
+    datasources$ = new BehaviorSubject([]);
+    createAsyncDataSource(options, detailedContextUri) {
+        if (!options.type) {
+            console.error(options);
+            throw new Error('Datasource needs a type');
         }
-        else if (!lastlLegend) {
-            // if no legend is manually provided
-            if (this.styles && this.styles.length > 1) {
-                this.currentStyle = this.styles[0].name;
+        let dataSource;
+        switch (options.type.toLowerCase()) {
+            case 'osm':
+                dataSource = this.createOSMDataSource(options);
+                break;
+            case 'vector':
+                dataSource = this.createFeatureDataSource(options);
+                break;
+            case 'wfs':
+                dataSource = this.createWFSDataSource(options);
+                break;
+            case 'wms': {
+                const wmsContext = options;
+                ObjectUtils.removeDuplicateCaseInsensitive(wmsContext.params);
+                dataSource = this.createWMSDataSource(wmsContext, detailedContextUri);
+                break;
             }
+            case 'wmts':
+                dataSource = this.createWMTSDataSource(options);
+                break;
+            case 'xyz':
+                dataSource = this.createXYZDataSource(options);
+                break;
+            case 'tiledebug':
+                dataSource = this.createTileDebugDataSource(options);
+                break;
+            case 'carto':
+                dataSource = this.createCartoDataSource(options);
+                break;
+            case 'arcgisrest':
+                dataSource = this.createArcGISRestDataSource(options, detailedContextUri);
+                break;
+            case 'imagearcgisrest':
+                dataSource = this.createArcGISRestImageDataSource(options, detailedContextUri);
+                break;
+            case 'websocket':
+                dataSource = this.createWebSocketDataSource(options);
+                break;
+            case 'mvt':
+                dataSource = this.createMVTDataSource(options);
+                break;
+            case 'tilearcgisrest':
+                dataSource = this.createTileArcGISRestDataSource(options, detailedContextUri);
+                break;
+            case 'cluster':
+                dataSource = this.createClusterDataSource(options);
+                break;
+            default:
+                console.error(options);
+                throw new Error('Invalid datasource type');
         }
-        else if (this.styles && this.styles.length > 1) {
-            this.currentStyle = lastlLegend[0].currentStyle;
-        }
-        const layer = this.layer();
-        if (typeof layer.options.legendOptions !== 'undefined' &&
-            layer.options.legendOptions.display === false) {
-            lastlLegend = [];
-        }
-        else {
-            lastlLegend = layer.dataSource.getLegend(this.currentStyle, this.view);
+        this.datasources$.next(this.datasources$.value.concat([dataSource]));
+        return dataSource;
+    }
+    createOSMDataSource(options) {
+        return new Observable((d) => d.next(new OSMDataSource(options)));
+    }
+    createFeatureDataSource(options) {
+        return new Observable((d) => d.next(new FeatureDataSource(options)));
+    }
+    createWebSocketDataSource(options) {
+        return new Observable((d) => d.next(new WebSocketDataSource(options)));
+    }
+    createWFSDataSource(options) {
+        return new Observable((d) => d.next(new WFSDataSource(options, this.wfsDataSourceService, this.ogcFilterService, this.authInterceptor)));
+    }
+    createWMSDataSource(options, detailedContextUri) {
+        const observables = [];
+        if (options.optionsFromCapabilities && window.navigator.onLine) {
+            observables.push(this.capabilitiesService.getWMSOptions(options).pipe(catchError$1((e) => {
+                this.messageService.error('igo.geo.dataSource.unavailable', 'igo.geo.dataSource.unavailableTitle', undefined, { value: options.params.LAYERS });
+                throw e;
+            })));
         }
-        if (this.updateLegendOnResolutionChange() ||
-            sourceOptions.contentDependentLegend) {
-            const state$ = layer.map.viewController.state$;
-            this.state$$ = state$.subscribe(() => this.onViewControllerStateChange());
+        if (this.optionsService &&
+            options.optionsFromApi &&
+            window.navigator.onLine) {
+            observables.push(this.optionsService.getWMSOptions(options, detailedContextUri).pipe(catchError$1((e) => {
+                e.error.toDisplay = true;
+                e.error.title = this.languageService.translate.instant('igo.geo.dataSource.unavailableTitle');
+                e.error.message = this.languageService.translate.instant('igo.geo.dataSource.optionsApiUnavailable');
+                return of({});
+            })));
         }
-        else if (lastlLegend && lastlLegend.length !== 0) {
-            this.legendItems$.next(lastlLegend);
-            for (const legend of lastlLegend) {
-                this.getLegendGraphic(legend);
+        observables.push(of(options));
+        return forkJoin(observables).pipe(map((options) => {
+            const optionsMerged = options.reduce((a, b) => ObjectUtils.mergeDeep(a, b));
+            if (optionsMerged?.params) {
+                optionsMerged.params = this.normalizeParams(optionsMerged.params);
             }
-        }
+            return new WMSDataSource(optionsMerged, this.wfsDataSourceService, this.ogcFilterService);
+        }), catchError$1(() => {
+            return of(undefined);
+        }));
     }
-    /**
-     * On destroy, unsubscribe to the map's view state
-     */
-    ngOnDestroy() {
-        if (this.state$$ !== undefined) {
-            this.state$$.unsubscribe();
+    normalizeParams(params) {
+        const uppercasedParams = {};
+        for (const key in params) {
+            if (Object.prototype.hasOwnProperty.call(params, key)) {
+                uppercasedParams[key.toUpperCase()] = params[key];
+            }
         }
+        return uppercasedParams;
     }
-    getLegendGraphic(item) {
-        if (item.url) {
-            const depotUrl = this.config?.getConfig('depot.url');
-            fetchImageFromDepotUrl(item.url, depotUrl, this.http)
-                .pipe(catchError$1((err) => {
-                if (err.error) {
-                    err.error.caught = true;
-                    this.getLegend = false;
-                    this.cdRef.detectChanges();
-                    return err;
-                }
-            }))
-                .subscribe((obsLegGraph) => {
-                const idx = this.legendItems$.value.findIndex((leg) => leg.title === item.title);
-                const legendGraph = obsLegGraph;
-                this.legendItems$.value[idx].imgGraphValue = legendGraph;
-                this.cdRef.detectChanges();
-            });
+    createWMTSDataSource(options) {
+        if (options.optionsFromCapabilities && window.navigator.onLine) {
+            return this.capabilitiesService.getWMTSOptions(options).pipe(map((options) => {
+                return options ? new WMTSDataSource(options) : undefined;
+            }), catchError$1(() => {
+                this.messageService.error('igo.geo.dataSource.unavailable', 'igo.geo.dataSource.unavailableTitle', undefined, { value: options.layer });
+                return of(undefined);
+            }));
         }
+        return new Observable((d) => d.next(new WMTSDataSource(options)));
     }
-    toggleLegendItem(collapsed, item) {
-        item.collapsed = collapsed;
+    createXYZDataSource(options) {
+        return new Observable((d) => d.next(new XYZDataSource(options)));
     }
-    transfertToggleLegendItem(newLegends) {
-        const outLegends = newLegends;
-        const lastLegends = this.layer().legend;
-        for (let i = 0; i < lastLegends.length; i++) {
-            outLegends[i].collapsed = lastLegends[i].collapsed;
-        }
-        return outLegends;
+    createTileDebugDataSource(options) {
+        return new Observable((d) => d.next(new TileDebugDataSource(options)));
     }
-    computeItemTitle(layerLegend) {
-        const layerOptions = this.layer().dataSource.options;
-        if (layerOptions.type !== 'wms') {
-            return of(layerLegend.title);
+    createCartoDataSource(options) {
+        if (options.mapId) {
+            return this.capabilitiesService
+                .getCartoOptions(options)
+                .pipe(map((options) => new CartoDataSource(options)));
         }
-        const layers = layerOptions.params.LAYERS.split(',');
-        const localLayerOptions = JSON.parse(JSON.stringify(layerOptions)); // to avoid to alter the original options.
-        localLayerOptions.params.LAYERS = layers.find((layer) => layer === layerLegend.title);
-        return this.capabilitiesService.getWMSOptions(localLayerOptions).pipe(map((wmsDataSourceOptions) => {
-            return wmsDataSourceOptions._layerOptionsFromSource.title;
-        }));
-    }
-    /**
-     * On resolution change, compute the effective scale level and update the
-     * legend accordingly.
-     * @param resolution Map resolution
-     */
-    onViewControllerStateChange() {
-        this.view = {
-            resolution: this.layer().map.viewController.getResolution(),
-            extent: this.layer().map.viewController.getExtent(),
-            projection: this.layer().map.viewController.getOlProjection().getCode(),
-            scale: this.layer().map.viewController.getScale(),
-            size: this.layer().map.ol.getSize()
-        };
-        this.updateLegend();
+        return new Observable((d) => d.next(new CartoDataSource(options)));
     }
-    /**
-     * Update the legend with scale level and style define
-     */
-    updateLegend() {
-        let legendItems = this.layer().dataSource.getLegend(this.currentStyle, this.view);
-        const layer = this.layer();
-        if (layer.legend && layer.legend.length > 1) {
-            legendItems = this.transfertToggleLegendItem(legendItems);
-        }
-        layer.legend = legendItems;
-        if (legendItems.length === 0 && this.legendItems$.value.length === 0) {
-            return;
-        }
-        this.legendItems$.next(legendItems);
-        for (const legend of this.legendItems$.value) {
-            this.getLegendGraphic(legend);
-        }
-    }
-    listStyles() {
-        const layerOptions = this.layer().options;
-        if (layerOptions && layerOptions.legendOptions) {
-            const translate = this.languageService.translate;
-            const title = translate.instant('igo.geo.layer.legend.default');
-            let stylesAvailable = [{ name: '', title }];
-            if (layerOptions.legendOptions.stylesAvailable) {
-                stylesAvailable = stylesAvailable.concat(layerOptions.legendOptions.stylesAvailable.filter((sA) => sA.name.normalize('NFD').replace(/[\u0300-\u036f]/gi, '') !==
-                    'default' &&
-                    sA.name.normalize('NFD').replace(/[\u0300-\u036f]/gi, '') !==
-                        'defaut'));
-            }
-            stylesAvailable
-                .filter((sa) => !sa.title)
-                .map((sa) => (sa.title = sa.name));
-            stylesAvailable.map((s) => (s.title =
-                s.title.charAt(0).toUpperCase() +
-                    s.title.slice(1).replace(/_/g, ' ')));
-            return stylesAvailable;
-        }
-        return;
-    }
-    onChangeStyle() {
-        this.updateLegend();
-        let STYLES = '';
-        const layer = this.layer();
-        if (layer.dataSource instanceof WMSDataSource) {
-            layer.dataSource.ol
-                .getParams()
-                .LAYERS.split(',')
-                .map(() => (STYLES += this.currentStyle + ','));
-            STYLES = STYLES.slice(0, -1);
-            layer.dataSource.stylesParams = STYLES;
-        }
-    }
-    onLoadImage(id) {
-        let elemRef;
-        const renderedLegends = this.renderedLegends();
-        if (renderedLegends.length === 1) {
-            elemRef = renderedLegends.at(0).nativeElement;
-        }
-        else {
-            elemRef = renderedLegends.find((renderedLegend) => renderedLegend.nativeElement.id === id).nativeElement;
-        }
-        this.imagesHeight[id] = elemRef.height;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: LayerLegendComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: LayerLegendComponent, isStandalone: true, selector: "igo-layer-legend", inputs: { updateLegendOnResolutionChange: { classPropertyName: "updateLegendOnResolutionChange", publicName: "updateLegendOnResolutionChange", isSignal: true, isRequired: false, transformFunction: null }, layer: { classPropertyName: "layer", publicName: "layer", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "renderedLegends", predicate: ["renderedLegend"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (legendItems$ | async; as items) {\n  @if (items.length) {\n    @for (item of items.slice().reverse(); track item) {\n      <ng-container #renderedLegends>\n        @if (getLegend) {\n          <div>\n            @if (item.title) {\n              <mat-list-item>\n                <mat-icon\n                  id=\"legend-toggle\"\n                  class=\"igo-chevron\"\n                  matListItemIcon\n                  igoCollapse\n                  [target]=\"legend\"\n                  [collapsed]=\"item.collapsed\"\n                  (toggle)=\"toggleLegendItem($event, item)\"\n                  >expand_less\n                </mat-icon>\n                <span matListItemTitle\n                  >{{ computeItemTitle(item) | async }}\n                </span>\n              </mat-list-item>\n            }\n            <div\n              #legend\n              class=\"igo-layer-legend\"\n              [ngClass]=\"{ 'with-title': item.title }\"\n            >\n              @if (currentStyle !== undefined) {\n                <mat-form-field subscriptSizing=\"dynamic\">\n                  <mat-select\n                    tooltip-position=\"below\"\n                    matTooltipShowDelay=\"500\"\n                    [matTooltip]=\"\n                      'igo.geo.layer.legend.selectStyle' | translate\n                    \"\n                    [(ngModel)]=\"currentStyle\"\n                    (selectionChange)=\"onChangeStyle()\"\n                  >\n                    @for (style of styles; track style) {\n                      <mat-option [value]=\"style.name\">{{\n                        style.title\n                      }}</mat-option>\n                    }\n                  </mat-select>\n                </mat-form-field>\n              }\n              @if (!item.collapsed) {\n                <div>\n                  @if (item.url) {\n                    <div>\n                      @if (item.imgGraphValue) {\n                        <img\n                          igoImageError\n                          [hideError]=\"true\"\n                          #renderedLegend\n                          id=\"{{ item.title }}\"\n                          (load)=\"onLoadImage(item.title)\"\n                          [src]=\"item.imgGraphValue\"\n                          alt=\"{{\n                            'igo.geo.layer.legend.loadingLegendText' | translate\n                          }}\"\n                        />\n                      }\n                      @if (imagesHeight[item.title] < 16) {\n                        <small>\n                          {{ 'igo.geo.layer.legend.noLegendScale' | translate }}\n                        </small>\n                      }\n                    </div>\n                  }\n                  @if (item.html) {\n                    <div\n                      [ngStyle]=\"item.style\"\n                      [innerHTML]=\"item.html | sanitizeHtml\"\n                    ></div>\n                  }\n                </div>\n              }\n            </div>\n          </div>\n        } @else {\n          <small>\n            {{ 'igo.geo.layer.legend.noLegendText' | translate }}\n          </small>\n        }\n      </ng-container>\n    }\n  } @else {\n    <small>\n      {{ 'igo.geo.layer.legend.noLegendText' | translate }}\n    </small>\n  }\n}\n", styles: [":host{--mat-form-field-container-height: 48px;--mat-form-field-container-vertical-padding: 12px}@-moz-document url-prefix(){:host img:after{margin-left:19px}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.igo-layer-legend.with-title{padding-left:18px}img{max-width:100%}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%;border-top-color:var(--mat-sys-primary-container);animation:2s linear infinite spin}mat-form-field{margin-bottom:4px}\n"], dependencies: [{ kind: "ngmodule", type: MatListModule }, { kind: "component", type: i1$2.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i1$2.MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "directive", type: i1$2.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: CollapseDirective, selector: "[igoCollapse]", inputs: ["target", "collapsed"], outputs: ["toggle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i4$3.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i4$3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "directive", type: ImageErrorDirective, selector: "[igoImageError]", inputs: ["errorImageUrl", "hideError"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: IgoLanguageModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: LayerLegendComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'igo-layer-legend', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        MatListModule,
-                        MatIconModule,
-                        CollapseDirective,
-                        NgClass,
-                        MatFormFieldModule,
-                        MatSelectModule,
-                        MatTooltipModule,
-                        FormsModule,
-                        MatOptionModule,
-                        ImageErrorDirective,
-                        NgStyle,
-                        AsyncPipe,
-                        IgoLanguageModule,
-                        SanitizeHtmlPipe
-                    ], template: "@if (legendItems$ | async; as items) {\n  @if (items.length) {\n    @for (item of items.slice().reverse(); track item) {\n      <ng-container #renderedLegends>\n        @if (getLegend) {\n          <div>\n            @if (item.title) {\n              <mat-list-item>\n                <mat-icon\n                  id=\"legend-toggle\"\n                  class=\"igo-chevron\"\n                  matListItemIcon\n                  igoCollapse\n                  [target]=\"legend\"\n                  [collapsed]=\"item.collapsed\"\n                  (toggle)=\"toggleLegendItem($event, item)\"\n                  >expand_less\n                </mat-icon>\n                <span matListItemTitle\n                  >{{ computeItemTitle(item) | async }}\n                </span>\n              </mat-list-item>\n            }\n            <div\n              #legend\n              class=\"igo-layer-legend\"\n              [ngClass]=\"{ 'with-title': item.title }\"\n            >\n              @if (currentStyle !== undefined) {\n                <mat-form-field subscriptSizing=\"dynamic\">\n                  <mat-select\n                    tooltip-position=\"below\"\n                    matTooltipShowDelay=\"500\"\n                    [matTooltip]=\"\n                      'igo.geo.layer.legend.selectStyle' | translate\n                    \"\n                    [(ngModel)]=\"currentStyle\"\n                    (selectionChange)=\"onChangeStyle()\"\n                  >\n                    @for (style of styles; track style) {\n                      <mat-option [value]=\"style.name\">{{\n                        style.title\n                      }}</mat-option>\n                    }\n                  </mat-select>\n                </mat-form-field>\n              }\n              @if (!item.collapsed) {\n                <div>\n                  @if (item.url) {\n                    <div>\n                      @if (item.imgGraphValue) {\n                        <img\n                          igoImageError\n                          [hideError]=\"true\"\n                          #renderedLegend\n                          id=\"{{ item.title }}\"\n                          (load)=\"onLoadImage(item.title)\"\n                          [src]=\"item.imgGraphValue\"\n                          alt=\"{{\n                            'igo.geo.layer.legend.loadingLegendText' | translate\n                          }}\"\n                        />\n                      }\n                      @if (imagesHeight[item.title] < 16) {\n                        <small>\n                          {{ 'igo.geo.layer.legend.noLegendScale' | translate }}\n                        </small>\n                      }\n                    </div>\n                  }\n                  @if (item.html) {\n                    <div\n                      [ngStyle]=\"item.style\"\n                      [innerHTML]=\"item.html | sanitizeHtml\"\n                    ></div>\n                  }\n                </div>\n              }\n            </div>\n          </div>\n        } @else {\n          <small>\n            {{ 'igo.geo.layer.legend.noLegendText' | translate }}\n          </small>\n        }\n      </ng-container>\n    }\n  } @else {\n    <small>\n      {{ 'igo.geo.layer.legend.noLegendText' | translate }}\n    </small>\n  }\n}\n", styles: [":host{--mat-form-field-container-height: 48px;--mat-form-field-container-vertical-padding: 12px}@-moz-document url-prefix(){:host img:after{margin-left:19px}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.igo-layer-legend.with-title{padding-left:18px}img{max-width:100%}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%;border-top-color:var(--mat-sys-primary-container);animation:2s linear infinite spin}mat-form-field{margin-bottom:4px}\n"] }]
-        }], propDecorators: { updateLegendOnResolutionChange: [{ type: i0.Input, args: [{ isSignal: true, alias: "updateLegendOnResolutionChange", required: false }] }], renderedLegends: [{ type: i0.ViewChildren, args: ['renderedLegend', { isSignal: true }] }], layer: [{ type: i0.Input, args: [{ isSignal: true, alias: "layer", required: false }] }] } });
-
-var TooltipType;
-(function (TooltipType) {
-    TooltipType["TITLE"] = "title";
-    TooltipType["ABSTRACT"] = "abstract";
-    TooltipType["CUSTOM"] = "custom";
-})(TooltipType || (TooltipType = {}));
-
-class LayerItemComponent {
-    networkService = inject(NetworkService);
-    showLegend = signal(true, ...(ngDevMode ? [{ debugName: "showLegend" }] : []));
-    inResolutionRange = true;
-    queryBadgeHidden = signal(true, ...(ngDevMode ? [{ debugName: "queryBadgeHidden" }] : []));
-    tooltipText;
-    state;
-    resolution$$;
-    network$$;
-    layer = input.required(...(ngDevMode ? [{ debugName: "layer" }] : []));
-    /** Pass the visibility to trigger change detection */
-    visible = input.required(...(ngDevMode ? [{ debugName: "visible" }] : []));
-    selected = input(undefined, ...(ngDevMode ? [{ debugName: "selected" }] : []));
-    selectionDisabled = input(undefined, ...(ngDevMode ? [{ debugName: "selectionDisabled" }] : []));
-    viewerOptions = input(undefined, ...(ngDevMode ? [{ debugName: "viewerOptions" }] : []));
-    action = output();
-    selectChange = output();
-    visibilityChange = output();
-    isDisabled;
-    get opacity() {
-        return this.layer().opacity * 100;
-    }
-    set opacity(opacity) {
-        this.layer().opacity = opacity / 100;
-    }
-    get visibilityTooltip() {
-        if (this.viewerOptions().mode !== 'selection' && !this.inResolutionRange) {
-            return this.layer().visible
-                ? this.isDisabled
-                    ? 'igo.geo.layer.notInResolution'
-                    : 'igo.geo.layer.group.hideChildren'
-                : 'igo.geo.layer.showLayer';
-        }
-        return this.layer().visible
-            ? this.isDisabled
-                ? 'igo.geo.layer.group.hideChildren'
-                : 'igo.geo.layer.hideLayer'
-            : 'igo.geo.layer.showLayer';
-    }
-    ngOnInit() {
-        this.layer().displayed$.subscribe((displayed) => {
-            this.isDisabled = !displayed;
-        });
-        const layer = this.layer();
-        if (layer.visible &&
-            this.viewerOptions()?.legend?.showForVisibleLayers &&
-            layer.firstLoadComponent === true) {
-            layer.firstLoadComponent = false;
-            layer.legendCollapsed = false;
-        }
-        this.toggleLegend(layer.legendCollapsed);
-        this.updateQueryBadge();
-        const resolution$ = layer.map.viewController.resolution$;
-        this.resolution$$ = resolution$.subscribe(() => {
-            this.onResolutionChange();
-        });
-        this.tooltipText = this.computeTooltip();
-        this.network$$ = this.networkService
-            .currentState()
-            .subscribe((state) => {
-            this.state = state;
-            this.onResolutionChange();
-        });
-    }
-    ngOnDestroy() {
-        this.resolution$$?.unsubscribe();
-        this.network$$?.unsubscribe();
-    }
-    toggleLegend(collapsed) {
-        this.layer().legendCollapsed = collapsed;
-        this.showLegend.set(!collapsed);
-    }
-    toggleLegendOnClick() {
-        this.toggleLegend(this.showLegend());
-    }
-    handleVisibilityChange(event) {
-        event.stopPropagation();
-        if (this.viewerOptions().legend?.showOnVisibilityChange) {
-            this.toggleLegend(!this.layer().visible);
-        }
-        this.updateQueryBadge();
-        this.visibilityChange.emit(event);
-    }
-    computeTooltip() {
-        const layerOptions = this.layer().options;
-        if (!layerOptions.tooltip) {
-            return this.layer().title;
-        }
-        const layerTooltip = layerOptions.tooltip;
-        const layerMetadata = layerOptions.metadata;
-        switch (layerOptions.tooltip.type) {
-            case TooltipType.TITLE:
-                return this.layer().title;
-            case TooltipType.ABSTRACT:
-                if (layerMetadata && layerMetadata.abstract) {
-                    return layerMetadata.abstract;
-                }
-                else {
-                    return this.layer().title;
-                }
-            case TooltipType.CUSTOM:
-                if (layerTooltip && layerTooltip.text) {
-                    return layerTooltip.text;
-                }
-                else {
-                    return this.layer().title;
-                }
-            default:
-                return this.layer().title;
-        }
-    }
-    onResolutionChange() {
-        const inResolutionRange = this.layer().isInResolutionsRange;
-        if (inResolutionRange === false &&
-            this.viewerOptions().legend.updateOnResolutionChange === true) {
-            this.toggleLegend(true);
-        }
-        this.inResolutionRange = inResolutionRange;
-    }
-    updateQueryBadge() {
-        const layer = this.layer();
-        const hidden = this.viewerOptions().queryBadge === false ||
-            layer.visible === false ||
-            !layerIsQueryable(layer);
-        this.queryBadgeHidden.set(hidden);
-    }
-    toggleLayerTool() {
-        this.action.emit(this.layer());
-    }
-    handleSelect(event) {
-        this.selectChange.emit(event.checked);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: LayerItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: LayerItemComponent, isStandalone: true, selector: "igo-layer-item", inputs: { layer: { classPropertyName: "layer", publicName: "layer", isSignal: true, isRequired: true, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: true, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, selectionDisabled: { classPropertyName: "selectionDisabled", publicName: "selectionDisabled", isSignal: true, isRequired: false, transformFunction: null }, viewerOptions: { classPropertyName: "viewerOptions", publicName: "viewerOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { action: "action", selectChange: "selectChange", visibilityChange: "visibilityChange" }, host: { properties: { "class.disabled": "this.isDisabled" } }, ngImport: i0, template: "<div class=\"igo-layer-list-item\">\n  <div class=\"layer-content\">\n    @if (viewerOptions().mode === 'selection') {\n      <mat-checkbox\n        [checked]=\"selected()\"\n        [disabled]=\"selectionDisabled()\"\n        (change)=\"handleSelect($event)\"\n      />\n    }\n    <ng-content />\n    <span\n      class=\"igo-layer-title\"\n      [matTooltip]=\"tooltipText\"\n      matTooltipShowDelay=\"500\"\n      (click)=\"toggleLegendOnClick()\"\n    >\n      {{ layer().title }}\n    </span>\n  </div>\n\n  <div class=\"list-actions\">\n    <div class=\"list-secondary-actions\">\n      @if (viewerOptions().mode !== 'selection') {\n        <button\n          class=\"actions-button\"\n          tooltip-position=\"below\"\n          matTooltipShowDelay=\"500\"\n          [matTooltip]=\"'igo.geo.layer.moreOptions' | translate\"\n          mat-icon-button\n          color=\"primary\"\n          (click)=\"toggleLayerTool()\"\n        >\n          <mat-icon>more_horiz</mat-icon>\n        </button>\n      }\n    </div>\n\n    <igo-layer-visibility-button\n      [layer]=\"layer()\"\n      [tooltip]=\"visibilityTooltip\"\n      [disabled]=\"isDisabled\"\n      [inResolutionsRange]=\"layer().isInResolutionsRange$ | async\"\n      [showQueryBadge]=\"queryBadgeHidden() === false\"\n      (visibilityChange)=\"handleVisibilityChange($event)\"\n    />\n  </div>\n</div>\n\n@if (showLegend()) {\n  <div class=\"igo-layer-legend-container\">\n    <igo-layer-legend\n      [layer]=\"layer()\"\n      [updateLegendOnResolutionChange]=\"\n        viewerOptions().legend.updateOnResolutionChange\n      \"\n    />\n  </div>\n}\n", styles: [":host ::ng-deep .list-secondary-actions button{visibility:hidden}:host ::ng-deep .list-secondary-actions button.disabled{visibility:visible}:host:hover ::ng-deep .list-secondary-actions button{visibility:visible}:host.disabled ::ng-deep .igo-layer-title,:host.disabled ::ng-deep .list-secondary-actions{opacity:.54}:host{overflow:hidden;background-color:var(--mat-sys-surface)}:host ::ng-deep button.mat-default mat-icon{color:var(--mat-sys-on-surface);fill:var(--mat-sys-on-surface)}:host ::ng-deep button.disabled mat-icon{color:var(--mat-sys-on-secondary-fixed);fill:var(--mat-sys-on-secondary-fixed);opacity:.64}.list-actions{display:flex;margin-left:4px;margin-right:4px}.layer-content{display:flex;align-items:center;flex:1}.igo-layer-title{display:block;cursor:pointer;max-height:48px;white-space:normal;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;box-orient:vertical;-webkit-box-orient:vertical;line-clamp:2;-webkit-line-clamp:2}.igo-layer-list-item{display:flex;align-items:center;justify-content:space-between}.igo-layer-legend-container{padding-top:4px;width:calc(100% - 12px)}\n"], dependencies: [{ kind: "ngmodule", type: MatListModule }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i2$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatBadgeModule }, { kind: "component", type: LayerLegendComponent, selector: "igo-layer-legend", inputs: ["updateLegendOnResolutionChange", "layer"] }, { kind: "ngmodule", type: IgoLanguageModule }, { kind: "component", type: LayerVisibilityButtonComponent, selector: "igo-layer-visibility-button", inputs: ["layer", "tooltip", "disabled", "showQueryBadge", "inResolutionsRange"], outputs: ["visibilityChange"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: LayerItemComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'igo-layer-item', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        MatListModule,
-                        MatCheckboxModule,
-                        MatTooltipModule,
-                        MatButtonModule,
-                        MatIconModule,
-                        MatBadgeModule,
-                        LayerLegendComponent,
-                        AsyncPipe,
-                        IgoLanguageModule,
-                        LayerVisibilityButtonComponent
-                    ], template: "<div class=\"igo-layer-list-item\">\n  <div class=\"layer-content\">\n    @if (viewerOptions().mode === 'selection') {\n      <mat-checkbox\n        [checked]=\"selected()\"\n        [disabled]=\"selectionDisabled()\"\n        (change)=\"handleSelect($event)\"\n      />\n    }\n    <ng-content />\n    <span\n      class=\"igo-layer-title\"\n      [matTooltip]=\"tooltipText\"\n      matTooltipShowDelay=\"500\"\n      (click)=\"toggleLegendOnClick()\"\n    >\n      {{ layer().title }}\n    </span>\n  </div>\n\n  <div class=\"list-actions\">\n    <div class=\"list-secondary-actions\">\n      @if (viewerOptions().mode !== 'selection') {\n        <button\n          class=\"actions-button\"\n          tooltip-position=\"below\"\n          matTooltipShowDelay=\"500\"\n          [matTooltip]=\"'igo.geo.layer.moreOptions' | translate\"\n          mat-icon-button\n          color=\"primary\"\n          (click)=\"toggleLayerTool()\"\n        >\n          <mat-icon>more_horiz</mat-icon>\n        </button>\n      }\n    </div>\n\n    <igo-layer-visibility-button\n      [layer]=\"layer()\"\n      [tooltip]=\"visibilityTooltip\"\n      [disabled]=\"isDisabled\"\n      [inResolutionsRange]=\"layer().isInResolutionsRange$ | async\"\n      [showQueryBadge]=\"queryBadgeHidden() === false\"\n      (visibilityChange)=\"handleVisibilityChange($event)\"\n    />\n  </div>\n</div>\n\n@if (showLegend()) {\n  <div class=\"igo-layer-legend-container\">\n    <igo-layer-legend\n      [layer]=\"layer()\"\n      [updateLegendOnResolutionChange]=\"\n        viewerOptions().legend.updateOnResolutionChange\n      \"\n    />\n  </div>\n}\n", styles: [":host ::ng-deep .list-secondary-actions button{visibility:hidden}:host ::ng-deep .list-secondary-actions button.disabled{visibility:visible}:host:hover ::ng-deep .list-secondary-actions button{visibility:visible}:host.disabled ::ng-deep .igo-layer-title,:host.disabled ::ng-deep .list-secondary-actions{opacity:.54}:host{overflow:hidden;background-color:var(--mat-sys-surface)}:host ::ng-deep button.mat-default mat-icon{color:var(--mat-sys-on-surface);fill:var(--mat-sys-on-surface)}:host ::ng-deep button.disabled mat-icon{color:var(--mat-sys-on-secondary-fixed);fill:var(--mat-sys-on-secondary-fixed);opacity:.64}.list-actions{display:flex;margin-left:4px;margin-right:4px}.layer-content{display:flex;align-items:center;flex:1}.igo-layer-title{display:block;cursor:pointer;max-height:48px;white-space:normal;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;box-orient:vertical;-webkit-box-orient:vertical;line-clamp:2;-webkit-line-clamp:2}.igo-layer-list-item{display:flex;align-items:center;justify-content:space-between}.igo-layer-legend-container{padding-top:4px;width:calc(100% - 12px)}\n"] }]
-        }], propDecorators: { layer: [{ type: i0.Input, args: [{ isSignal: true, alias: "layer", required: true }] }], visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: true }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], selectionDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionDisabled", required: false }] }], viewerOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewerOptions", required: false }] }], action: [{ type: i0.Output, args: ["action"] }], selectChange: [{ type: i0.Output, args: ["selectChange"] }], visibilityChange: [{ type: i0.Output, args: ["visibilityChange"] }], isDisabled: [{
-                type: HostBinding,
-                args: ['class.disabled']
-            }] } });
-
-class LayerLegendItemComponent {
-    networkService = inject(NetworkService);
-    inResolutionRange$ = new BehaviorSubject(true);
-    tooltipText;
-    state;
-    resolution$$;
-    network$$;
-    layer = input(undefined, ...(ngDevMode ? [{ debugName: "layer" }] : []));
-    updateLegendOnResolutionChange = input(false, ...(ngDevMode ? [{ debugName: "updateLegendOnResolutionChange" }] : []));
-    ngOnInit() {
-        const resolution$ = this.layer().map.viewController.resolution$;
-        this.resolution$$ = resolution$.subscribe(() => {
-            this.onResolutionChange();
-        });
-        this.tooltipText = this.computeTooltip();
-        this.network$$ = this.networkService
-            .currentState()
-            .subscribe((state) => {
-            this.state = state;
-            this.onResolutionChange();
-        });
-    }
-    ngOnDestroy() {
-        this.resolution$$.unsubscribe();
-        this.network$$.unsubscribe();
-    }
-    computeTooltip() {
-        const layerOptions = this.layer().options;
-        if (!layerOptions.tooltip) {
-            return this.layer().title;
-        }
-        const layerTooltip = layerOptions.tooltip;
-        const layerMetadata = layerOptions.metadata;
-        switch (layerOptions.tooltip.type) {
-            case TooltipType.TITLE:
-                return this.layer().title;
-            case TooltipType.ABSTRACT:
-                if (layerMetadata && layerMetadata.abstract) {
-                    return layerMetadata.abstract;
-                }
-                else {
-                    return this.layer().title;
-                }
-            case TooltipType.CUSTOM:
-                if (layerTooltip && layerTooltip.text) {
-                    return layerTooltip.text;
-                }
-                else {
-                    return this.layer().title;
-                }
-            default:
-                return this.layer().title;
-        }
-    }
-    onResolutionChange() {
-        const inResolutionRange = this.layer().isInResolutionsRange;
-        this.inResolutionRange$.next(inResolutionRange);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: LayerLegendItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.18", type: LayerLegendItemComponent, isStandalone: true, selector: "igo-layer-legend-item", inputs: { layer: { classPropertyName: "layer", publicName: "layer", isSignal: true, isRequired: false, transformFunction: null }, updateLegendOnResolutionChange: { classPropertyName: "updateLegendOnResolutionChange", publicName: "updateLegendOnResolutionChange", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<mat-list-item class=\"igo-layer-list-item\">\n  <span\n    matListItemTitle\n    class=\"igo-layer-title\"\n    [matTooltip]=\"tooltipText\"\n    matTooltipShowDelay=\"500\"\n    >{{ layer().title }}</span\n  >\n</mat-list-item>\n\n<div #legend class=\"igo-layer-legend-container\">\n  <igo-layer-legend\n    [layer]=\"layer()\"\n    [updateLegendOnResolutionChange]=\"updateLegendOnResolutionChange()\"\n  />\n</div>\n", styles: [":host{overflow:hidden}:host .igo-layer-list-item{height:48px;clear:both}:host .igo-layer-legend-container{padding-left:18px;width:calc(100% - 18px)}\n"], dependencies: [{ kind: "ngmodule", type: MatListModule }, { kind: "component", type: i1$2.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i1$2.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: LayerLegendComponent, selector: "igo-layer-legend", inputs: ["updateLegendOnResolutionChange", "layer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: LayerLegendItemComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'igo-layer-legend-item', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatListModule, MatTooltipModule, LayerLegendComponent], template: "<mat-list-item class=\"igo-layer-list-item\">\n  <span\n    matListItemTitle\n    class=\"igo-layer-title\"\n    [matTooltip]=\"tooltipText\"\n    matTooltipShowDelay=\"500\"\n    >{{ layer().title }}</span\n  >\n</mat-list-item>\n\n<div #legend class=\"igo-layer-legend-container\">\n  <igo-layer-legend\n    [layer]=\"layer()\"\n    [updateLegendOnResolutionChange]=\"updateLegendOnResolutionChange()\"\n  />\n</div>\n", styles: [":host{overflow:hidden}:host .igo-layer-list-item{height:48px;clear:both}:host .igo-layer-legend-container{padding-left:18px;width:calc(100% - 18px)}\n"] }]
-        }], propDecorators: { layer: [{ type: i0.Input, args: [{ isSignal: true, alias: "layer", required: false }] }], updateLegendOnResolutionChange: [{ type: i0.Input, args: [{ isSignal: true, alias: "updateLegendOnResolutionChange", required: false }] }] } });
-
-let ImageWatcher = class ImageWatcher extends Watcher {
-    messageService;
-    id;
-    loaded = 0;
-    loading = 0;
-    source;
-    constructor(layer, messageService) {
-        super();
-        this.messageService = messageService;
-        this.source = layer.options.source.ol;
-        this.id = uuid();
-    }
-    watch() {
-        this.source.on(`imageloadstart`, (e) => this.handleLoadStart(e));
-        this.source.on(`imageloadend`, (e) => this.handleLoadEnd(e));
-        this.source.on(`imageloaderror`, (e) => this.handleLoadEnd(e));
-        this.source.on(`imageloaderror`, (e) => this.handleLoadError(e));
-    }
-    unwatch() {
-        this.source.un(`imageloadstart`, (e) => this.handleLoadStart(e));
-        this.source.un(`imageloadend`, (e) => this.handleLoadEnd(e));
-        this.source.un(`imageloaderror`, (e) => this.handleLoadEnd(e));
-        this.source.un(`imageloaderror`, (e) => this.handleLoadError(e));
-    }
-    handleLoadStart(event) {
-        if (!event.image.__watchers__) {
-            event.image.__watchers__ = [];
-        }
-        event.image.__watchers__.push(this.id);
-        this.loading += 1;
-        this.status = SubjectStatus.Working;
-    }
-    handleLoadEnd(event) {
-        if (!event.image.__watchers__) {
-            return;
-        }
-        const watcherIndex = event.image.__watchers__.indexOf(this.id);
-        if (watcherIndex < 0) {
-            return;
-        }
-        event.image.__watchers__.splice(watcherIndex, 1);
-        this.loaded += 1;
-        const loading = this.loading;
-        if (this.loaded >= loading) {
-            if (loading === this.loading) {
-                this.status = SubjectStatus.Done;
-                this.loaded = this.loading = 0;
-            }
-        }
-    }
-    handleLoadError(event) {
-        if (!event.image.__watchers__) {
-            return;
-        }
-        this.messageService?.error('igo.geo.dataSource.unavailable', 'igo.geo.dataSource.unavailableTitle', undefined, { value: event.target.params_.LAYERS });
-        this.loaded = -1;
-        this.loading = 0;
-        this.status = SubjectStatus.Error;
-    }
-};
-ImageWatcher = __decorate([
-    __param(1, Optional()),
-    __metadata("design:paramtypes", [Function, MessageService])
-], ImageWatcher);
-
-class OptionsService {
-}
-
-class DataSourceService {
-    capabilitiesService = inject(CapabilitiesService);
-    optionsService = inject(OptionsService, { optional: true });
-    wfsDataSourceService = inject(WFSService);
-    ogcFilterService = inject(OGCFilterService);
-    languageService = inject(LanguageService);
-    messageService = inject(MessageService);
-    authInterceptor = inject(AuthInterceptor);
-    datasources$ = new BehaviorSubject([]);
-    createAsyncDataSource(options, detailedContextUri) {
-        if (!options.type) {
-            console.error(options);
-            throw new Error('Datasource needs a type');
-        }
-        let dataSource;
-        switch (options.type.toLowerCase()) {
-            case 'osm':
-                dataSource = this.createOSMDataSource(options);
-                break;
-            case 'vector':
-                dataSource = this.createFeatureDataSource(options);
-                break;
-            case 'wfs':
-                dataSource = this.createWFSDataSource(options);
-                break;
-            case 'wms': {
-                const wmsContext = options;
-                ObjectUtils.removeDuplicateCaseInsensitive(wmsContext.params);
-                dataSource = this.createWMSDataSource(wmsContext, detailedContextUri);
-                break;
-            }
-            case 'wmts':
-                dataSource = this.createWMTSDataSource(options);
-                break;
-            case 'xyz':
-                dataSource = this.createXYZDataSource(options);
-                break;
-            case 'tiledebug':
-                dataSource = this.createTileDebugDataSource(options);
-                break;
-            case 'carto':
-                dataSource = this.createCartoDataSource(options);
-                break;
-            case 'arcgisrest':
-                dataSource = this.createArcGISRestDataSource(options, detailedContextUri);
-                break;
-            case 'imagearcgisrest':
-                dataSource = this.createArcGISRestImageDataSource(options, detailedContextUri);
-                break;
-            case 'websocket':
-                dataSource = this.createWebSocketDataSource(options);
-                break;
-            case 'mvt':
-                dataSource = this.createMVTDataSource(options);
-                break;
-            case 'tilearcgisrest':
-                dataSource = this.createTileArcGISRestDataSource(options, detailedContextUri);
-                break;
-            case 'cluster':
-                dataSource = this.createClusterDataSource(options);
-                break;
-            default:
-                console.error(options);
-                throw new Error('Invalid datasource type');
-        }
-        this.datasources$.next(this.datasources$.value.concat([dataSource]));
-        return dataSource;
-    }
-    createOSMDataSource(options) {
-        return new Observable((d) => d.next(new OSMDataSource(options)));
-    }
-    createFeatureDataSource(options) {
-        return new Observable((d) => d.next(new FeatureDataSource(options)));
-    }
-    createWebSocketDataSource(options) {
-        return new Observable((d) => d.next(new WebSocketDataSource(options)));
-    }
-    createWFSDataSource(options) {
-        return new Observable((d) => d.next(new WFSDataSource(options, this.wfsDataSourceService, this.ogcFilterService, this.authInterceptor)));
-    }
-    createWMSDataSource(options, detailedContextUri) {
+    createArcGISRestDataSource(options, detailedContextUri) {
         const observables = [];
-        if (options.optionsFromCapabilities && window.navigator.onLine) {
-            observables.push(this.capabilitiesService.getWMSOptions(options).pipe(catchError$1((e) => {
-                this.messageService.error('igo.geo.dataSource.unavailable', 'igo.geo.dataSource.unavailableTitle', undefined, { value: options.params.LAYERS });
+        if (window.navigator.onLine) {
+            observables.push(this.capabilitiesService.getArcgisOptions(options).pipe(catchError$1((e) => {
+                this.messageService.error('igo.geo.dataSource.unavailable', 'igo.geo.dataSource.unavailableTitle', undefined, { value: options.layer });
                 throw e;
             })));
         }
         if (this.optionsService &&
             options.optionsFromApi &&
             window.navigator.onLine) {
-            observables.push(this.optionsService.getWMSOptions(options, detailedContextUri).pipe(catchError$1((e) => {
+            observables.push(this.optionsService
+                .getArcgisRestOptions(options, detailedContextUri)
+                .pipe(catchError$1((e) => {
                 e.error.toDisplay = true;
                 e.error.title = this.languageService.translate.instant('igo.geo.dataSource.unavailableTitle');
                 e.error.message = this.languageService.translate.instant('igo.geo.dataSource.optionsApiUnavailable');
@@ -10683,81 +10207,16 @@ class DataSourceService {
         observables.push(of(options));
         return forkJoin(observables).pipe(map((options) => {
             const optionsMerged = options.reduce((a, b) => ObjectUtils.mergeDeep(a, b));
-            if (optionsMerged?.params) {
-                optionsMerged.params = this.normalizeParams(optionsMerged.params);
-            }
-            return new WMSDataSource(optionsMerged, this.wfsDataSourceService, this.ogcFilterService);
+            return new ArcGISRestDataSource(optionsMerged);
         }), catchError$1(() => {
             return of(undefined);
         }));
     }
-    normalizeParams(params) {
-        const uppercasedParams = {};
-        for (const key in params) {
-            if (Object.prototype.hasOwnProperty.call(params, key)) {
-                uppercasedParams[key.toUpperCase()] = params[key];
-            }
-        }
-        return uppercasedParams;
-    }
-    createWMTSDataSource(options) {
-        if (options.optionsFromCapabilities && window.navigator.onLine) {
-            return this.capabilitiesService.getWMTSOptions(options).pipe(map((options) => {
-                return options ? new WMTSDataSource(options) : undefined;
-            }), catchError$1(() => {
-                this.messageService.error('igo.geo.dataSource.unavailable', 'igo.geo.dataSource.unavailableTitle', undefined, { value: options.layer });
-                return of(undefined);
-            }));
-        }
-        return new Observable((d) => d.next(new WMTSDataSource(options)));
-    }
-    createXYZDataSource(options) {
-        return new Observable((d) => d.next(new XYZDataSource(options)));
-    }
-    createTileDebugDataSource(options) {
-        return new Observable((d) => d.next(new TileDebugDataSource(options)));
-    }
-    createCartoDataSource(options) {
-        if (options.mapId) {
-            return this.capabilitiesService
-                .getCartoOptions(options)
-                .pipe(map((options) => new CartoDataSource(options)));
-        }
-        return new Observable((d) => d.next(new CartoDataSource(options)));
-    }
-    createArcGISRestDataSource(options, detailedContextUri) {
+    createArcGISRestImageDataSource(options, detailedContextUri) {
         const observables = [];
         if (window.navigator.onLine) {
-            observables.push(this.capabilitiesService.getArcgisOptions(options).pipe(catchError$1((e) => {
-                this.messageService.error('igo.geo.dataSource.unavailable', 'igo.geo.dataSource.unavailableTitle', undefined, { value: options.layer });
-                throw e;
-            })));
-        }
-        if (this.optionsService &&
-            options.optionsFromApi &&
-            window.navigator.onLine) {
-            observables.push(this.optionsService
-                .getArcgisRestOptions(options, detailedContextUri)
-                .pipe(catchError$1((e) => {
-                e.error.toDisplay = true;
-                e.error.title = this.languageService.translate.instant('igo.geo.dataSource.unavailableTitle');
-                e.error.message = this.languageService.translate.instant('igo.geo.dataSource.optionsApiUnavailable');
-                return of({});
-            })));
-        }
-        observables.push(of(options));
-        return forkJoin(observables).pipe(map((options) => {
-            const optionsMerged = options.reduce((a, b) => ObjectUtils.mergeDeep(a, b));
-            return new ArcGISRestDataSource(optionsMerged);
-        }), catchError$1(() => {
-            return of(undefined);
-        }));
-    }
-    createArcGISRestImageDataSource(options, detailedContextUri) {
-        const observables = [];
-        if (window.navigator.onLine) {
-            observables.push(this.capabilitiesService.getImageArcgisOptions(options).pipe(catchError$1((e) => {
-                this.messageService.error('igo.geo.dataSource.unavailable', 'igo.geo.dataSource.unavailableTitle', undefined, { value: options.params.LAYERS });
+            observables.push(this.capabilitiesService.getImageArcgisOptions(options).pipe(catchError$1((e) => {
+                this.messageService.error('igo.geo.dataSource.unavailable', 'igo.geo.dataSource.unavailableTitle', undefined, { value: options.params.LAYERS });
                 throw e;
             })));
         }
@@ -11384,6 +10843,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                 }]
         }] });
 
+var TooltipType;
+(function (TooltipType) {
+    TooltipType["TITLE"] = "title";
+    TooltipType["ABSTRACT"] = "abstract";
+    TooltipType["CUSTOM"] = "custom";
+})(TooltipType || (TooltipType = {}));
+
 let ImageLayer = class ImageLayer extends Layer {
     messageService;
     authInterceptor;
@@ -11680,7 +11146,6 @@ const ID_GROUP_PREFIX = 'local-group_';
 class LayerGroup extends LayerGroupBase {
     children;
     options;
-    parent;
     expanded;
     isInResolutionsRange$$;
     isInResolutionsRange$ = new BehaviorSubject(true);
@@ -12006,10 +11471,7 @@ class LayerService {
         }
     }
     getStuff(url) {
-        return this.http.get(url).pipe(map((res) => res), catchError$1((err) => {
-            console.log('No style was found');
-            return of(err);
-        }));
+        return this.http.get(url);
     }
     getAbsoluteUrl(source, url) {
         const r = new RegExp('^http|//', 'i');
@@ -12107,8 +11569,6 @@ class LayerSelectionModel {
     }
 }
 
-// Below 10 is reserved for BaseLayer
-const ZINDEX_MIN = 10;
 /**
  * We got four kind of layers
  * TreeLayer: all layers to show in the layer manager
@@ -12177,7 +11637,8 @@ class LayerController extends LayerSelectionModel {
         // Because the Layer may have have LinkedLayer who need to find the parent.
         this.layersFlattened = [...this.tree.flattened];
         addedLayers.forEach((layer) => layer.add());
-        this.recalculateZindex();
+        const baseLayerZindex = this.baseLayer ? 1 : 0;
+        this.recalculateZindex(baseLayerZindex);
         this.notify();
     }
     selectBaseLayer(layer) {
@@ -12188,6 +11649,7 @@ class LayerController extends LayerSelectionModel {
             this.baseLayerSelection.visible = false;
         }
         layer.visible = true;
+        layer.zIndex = 0;
         this.baseLayerSelection = layer;
         this._map.viewController.olView.setMinZoom(layer.dataSource.options.minZoom || (this._map.options.view || {}).minZoom);
         this._map.viewController.olView.setMaxZoom(layer.dataSource.options.maxZoom || (this._map.options.view || {}).maxZoom);
@@ -12293,325 +11755,950 @@ class LayerController extends LayerSelectionModel {
         layers.forEach((layer) => {
             layer.moveTo(keepCurrentParent ? layer.parent : parent);
         });
-        this._internalMove();
+        this._internalMove();
+    }
+    _internalMove() {
+        this.recalculateZindex();
+        this.notify();
+    }
+    /** Recursive */
+    recalculateZindex(minIndex = 0, layers = this.treeLayers) {
+        return [...layers].reverse().reduce((previousZindex, layer) => {
+            let zIndex = ++previousZindex;
+            layer.zIndex = zIndex;
+            if (isLayerGroup(layer)) {
+                zIndex = this.recalculateZindex(zIndex, layer.children);
+            }
+            return zIndex;
+        }, minIndex);
+    }
+    handleAdd(layer, offset) {
+        const existingLayer = this.getById(layer.id);
+        if (existingLayer !== undefined) {
+            existingLayer.visible = true;
+            return;
+        }
+        const zIndex = this.getZindexOffset(layer, offset);
+        this.setZindex(layer, zIndex);
+        layer.init(this._map);
+        if (isBaseLayer(layer)) {
+            if (layer.visible) {
+                this.selectBaseLayer(layer);
+            }
+            this._baseLayers.push(layer);
+        }
+        else if (this.isOtherLayer(layer)) {
+            this._otherLayers.push(layer);
+        }
+        else if (this.isSystemLayer(layer) && !layer.showInLayerList) {
+            this._systemLayers.push(layer);
+        }
+        else if (layer.showInLayerList) {
+            return layer;
+        }
+        else {
+            this._otherLayers.push(layer);
+        }
+        const parent = layer.parentId
+            ? this.getById(layer.parentId.toString().split(TREE_SEPERATOR).pop())
+            : undefined;
+        layer.add(parent);
+        return;
+    }
+    _remove(layer) {
+        if (isBaseLayer(layer)) {
+            this.removeBaselayer(layer);
+        }
+        else if (this.isOtherLayer(layer)) {
+            this.removeOtherLayer(layer);
+        }
+        else if (this.isSystemLayer(layer)) {
+            this.removeSystemLayer(layer);
+        }
+        layer.remove();
+        return layer;
+    }
+    removeBaselayer(layer) {
+        this.removeIn(layer, this._baseLayers);
+    }
+    removeSystemLayer(layer) {
+        this.removeIn(layer, this._systemLayers);
+    }
+    removeOtherLayer(layer) {
+        this.removeIn(layer, this._otherLayers);
+    }
+    removeIn(layer, store) {
+        const index = store.findIndex((sysLayer) => sysLayer.id === layer.id);
+        if (index === -1) {
+            return;
+        }
+        store.splice(index, 1);
+    }
+    isSystemLayer(layer) {
+        return isLayerItem(layer) && layer.isIgoInternalLayer;
+    }
+    isOtherLayer(layer) {
+        return isLayerLinked(layer) && !layer.showInLayerList;
+    }
+    clearBaselayers() {
+        this.baseLayers.forEach((layer) => this._remove(layer));
+        this._baseLayers = [];
+    }
+    clearTree() {
+        this.treeLayers.forEach((layer) => this._remove(layer));
+        this.tree.clear();
+    }
+    clearOther() {
+        this._otherLayers.forEach((layer) => this._remove(layer));
+        this._otherLayers = [];
+    }
+    getZindexOffset(layer, previousOffset = 0) {
+        return layer.zIndex ? 0 : previousOffset++;
+    }
+    setZindex(layer, offset) {
+        if (isBaseLayer(layer)) {
+            return;
+        }
+        if (layer.zIndex === undefined || layer.zIndex === 0) {
+            const maxZIndex = Math.max(...this.treeLayers.map((l) => l.zIndex), 0);
+            layer.zIndex = maxZIndex + 1 + (offset ?? 0);
+        }
+    }
+    notify() {
+        this.layersFlattened = [...this.tree.flattened];
+        this._layers$.next([...this.treeLayers]);
+        this._baseLayers$.next([...this.baseLayers]);
+    }
+}
+
+function mergeLayersOptions(layersOptionsTree, layersOptions) {
+    const tree = [...layersOptionsTree];
+    layersOptions.forEach((options) => {
+        const identifier = getLayerOptionIdentifier(options);
+        if (!identifier)
+            return;
+        const currentNode = _getNodeById(identifier, tree) ?? _getNodeByTitle(options.title, tree);
+        if (currentNode) {
+            // if we get layer options by title, we update the id of current layer.
+            if (isLayerGroupOptions(currentNode) &&
+                currentNode.id.toString().includes(ID_GROUP_PREFIX)) {
+                currentNode.id = identifier;
+            }
+            const currentNodeParentID = currentNode.parentId ?? findParentId(tree, currentNode);
+            const mergedOptions = ObjectUtils.mergeDeep(currentNode, options);
+            if (currentNodeParentID === options.parentId) {
+                moveOptions(tree, identifier, mergedOptions);
+            }
+            else {
+                // if we have no parent id it means that we are in the root of the tree.
+                if (!options.parentId)
+                    mergedOptions.parentId = undefined;
+                const initialIdentifier = getLayerOptionIdentifier(currentNode);
+                moveOptions(tree, initialIdentifier, mergedOptions);
+            }
+        }
+        else {
+            // Some layers in local context doesn't have an id, if this is the case we
+            // check if the layer is already in the tree by its title
+            // and if it is we don't add it again. The changes is ignored
+            if (isLayerGroupOptions(options)) {
+                const currentNode = _getNodeByTitle(options.title, tree);
+                if (currentNode) {
+                    return;
+                }
+            }
+            // handel external Data source options
+            if (isLayerItemOptions(options)) {
+                handleExternalDataSource(options);
+            }
+            insertOptions(tree, options);
+        }
+    });
+    return tree;
+}
+function handleExternalDataSource(options) {
+    options.sourceOptions = {
+        ...options.sourceOptions,
+        optionsFromCapabilities: true,
+        optionsFromApi: true,
+        crossOrigin: 'anonymous'
+    };
+}
+function getLayerOptionIdentifier(layerOptions) {
+    return isLayerGroupOptions(layerOptions)
+        ? String(layerOptions.id)
+        : (getLayerParam(layerOptions) ??
+            (layerOptions.id !== undefined
+                ? layerOptions.id.toString()
+                : undefined));
+}
+function moveOptions(tree, initialIdentifier, options) {
+    removeNode(tree, initialIdentifier);
+    insertOptions(tree, options);
+}
+function insertOptions(tree, options) {
+    const parentId = options.parentId;
+    if (!parentId) {
+        tree.push(options);
+    }
+    else {
+        const parent = _getNodeById(parentId, tree);
+        if (parent) {
+            (parent.children ??= []).push(options);
+            sortLayersOptionsByZIndex(parent.children);
+        }
+    }
+}
+/** Recursive */
+function _getNodeById(id, data) {
+    let node;
+    data.some((item) => {
+        const identifier = getLayerOptionIdentifier(item);
+        if (identifier === id) {
+            node = item;
+            return true;
+        }
+        const children = isLayerGroupOptions(item) ? item.children : undefined;
+        if (children) {
+            node = _getNodeById(id, children);
+            if (node)
+                return true;
+        }
+        return false;
+    });
+    return node;
+}
+/** Recursive */
+function _getNodeByTitle(title, data) {
+    if (!title)
+        return;
+    let node;
+    data.some((item) => {
+        const itemTitle = item.title;
+        if (itemTitle === title) {
+            node = item;
+            return true;
+        }
+        const children = isLayerGroupOptions(item) ? item.children : undefined;
+        if (children) {
+            node = _getNodeByTitle(title, children);
+            if (node)
+                return true;
+        }
+        return false;
+    });
+    return node;
+}
+function removeNode(tree, nodeId) {
+    for (let i = 0; i < tree.length; i++) {
+        const node = tree[i];
+        const currentId = getLayerOptionIdentifier(node);
+        if (currentId === nodeId) {
+            tree.splice(i, 1);
+            return true;
+        }
+        if (isLayerGroupOptions(node) && node.children?.length) {
+            const removed = removeNode(node.children, nodeId);
+            if (removed && node.children.length === 0) {
+                delete node.children;
+            }
+            if (removed)
+                return true;
+        }
+    }
+    return false;
+}
+function sortLayersOptionsByZIndex(layers) {
+    layers.sort((a, b) => (a.zIndex ?? 0) - (b.zIndex ?? 0));
+}
+function getLayerParam(layerOptions) {
+    const { sourceOptions } = layerOptions;
+    if (!sourceOptions)
+        return;
+    const { type } = sourceOptions;
+    switch (type) {
+        case 'wms':
+            return (sourceOptions.params.LAYERS ??
+                sourceOptions.params['layers']);
+        case 'wmts':
+        case 'arcgisrest':
+            return sourceOptions.layer;
+        case 'imagearcgisrest':
+        case 'tilearcgisrest': {
+            const { layer, params } = sourceOptions;
+            return layer ?? params?.layer;
+        }
+        default:
+            return undefined;
+    }
+}
+/**
+ * Recursively finds the parent ID of a target layer option within a tree structure.
+ *
+ * @param tree - The array of layer options representing the tree structure.
+ * @param target - The target layer option whose parent ID is to be found.
+ * @param path - The current path of IDs traversed during the search (used internally).
+ * @returns The parent ID as a dot-separated string, or undefined if no parent is found.
+ */
+function findParentId(tree, target, path = []) {
+    const targetId = getLayerOptionIdentifier(target);
+    for (const node of tree) {
+        const currentPath = node.id ? [...path, node.id.toString()] : [...path];
+        if (isLayerGroupOptions(node) && node.children) {
+            for (const child of node.children) {
+                // Check if the current child node matches the target node by comparing their IDs
+                if (getLayerOptionIdentifier(child) === targetId) {
+                    const targetPath = currentPath?.join('.');
+                    return targetPath === undefined || targetPath === ''
+                        ? undefined
+                        : targetPath;
+                }
+            }
+            const result = findParentId(node.children, target, currentPath);
+            if (result) {
+                return result;
+            }
+        }
+    }
+    return undefined;
+}
+
+const EYE_CLOSE_BY_GROUP_SVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 17.5C8.2 17.5 4.8 15.4 3.2 12H1C2.7 16.4 7 19.5 12 19.5S21.3 16.4 23 12H20.8C19.2 15.4 15.8 17.5 12 17.5Z" /></svg>`;
+class LayerVisibilityButtonComponent {
+    iconRegistry = inject(MatIconRegistry);
+    sanitizer = inject(DomSanitizer);
+    languageService = inject(LanguageService);
+    eyeClosedByGroupSvg = {
+        name: 'eye-closed',
+        svg: EYE_CLOSE_BY_GROUP_SVG
+    };
+    layer = input.required(...(ngDevMode ? [{ debugName: "layer" }] : []));
+    tooltip = input(undefined, ...(ngDevMode ? [{ debugName: "tooltip" }] : []));
+    disabled = input(undefined, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    showQueryBadge = input(undefined, ...(ngDevMode ? [{ debugName: "showQueryBadge" }] : []));
+    inResolutionsRange = input(undefined, ...(ngDevMode ? [{ debugName: "inResolutionsRange" }] : []));
+    parentDisplayed = toSignal(toObservable(this.layer).pipe(switchMap((layer) => layer.parent$), switchMap((parent) => (parent ? parent.displayed$ : of(undefined)))), { initialValue: false });
+    visible = toSignal(toObservable(this.layer).pipe(switchMap((layer) => layer.visible$)));
+    badge = computed(() => this.getBadge(this.layer()), ...(ngDevMode ? [{ debugName: "badge" }] : []));
+    defaultTooltipText = computed(() => {
+        return this.languageService.translate.instant(this.tooltip() ?? this.getDefaultTooltip());
+    }, ...(ngDevMode ? [{ debugName: "defaultTooltipText" }] : []));
+    tooltipText = computed(() => {
+        const tooltip = this.defaultTooltipText();
+        if (this.badge()) {
+            return (`${tooltip}. ` +
+                this.languageService.translate.instant('igo.geo.layer.filterAppliedOnLayer'));
+        }
+        return tooltip;
+    }, ...(ngDevMode ? [{ debugName: "tooltipText" }] : []));
+    visibilityChange = output();
+    constructor() {
+        this.iconRegistry.addSvgIconLiteral('eye-closed-by-group', this.sanitizer.bypassSecurityTrustHtml(EYE_CLOSE_BY_GROUP_SVG));
+    }
+    toggle(event) {
+        this.layer().visible = !this.layer().visible;
+        this.visibilityChange.emit(event);
+    }
+    getBadge(layer) {
+        return isLayerItem(layer)
+            ? getFilterBadge(layer.dataSource.options)
+            : undefined;
+    }
+    getDefaultTooltip() {
+        return !this.inResolutionsRange()
+            ? 'igo.geo.layer.notInResolution'
+            : this.visible() && this.disabled()
+                ? 'igo.geo.layer.group.hideChildren'
+                : this.visible()
+                    ? 'igo.geo.layer.hideLayer'
+                    : 'igo.geo.layer.showLayer';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: LayerVisibilityButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.18", type: LayerVisibilityButtonComponent, isStandalone: true, selector: "igo-layer-visibility-button", inputs: { layer: { classPropertyName: "layer", publicName: "layer", isSignal: true, isRequired: true, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, showQueryBadge: { classPropertyName: "showQueryBadge", publicName: "showQueryBadge", isSignal: true, isRequired: false, transformFunction: null }, inResolutionsRange: { classPropertyName: "inResolutionsRange", publicName: "inResolutionsRange", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visibilityChange: "visibilityChange" }, ngImport: i0, template: "@let hiddenByParent = this.parentDisplayed() === false ? true : false;\n<button\n  mat-icon-button\n  [ngClass]=\"{\n    disabled: disabled(),\n    'out-of-range': !inResolutionsRange(),\n    'visibility-hidden': !visible()\n  }\"\n  [color]=\"visible() ? 'primary' : 'default'\"\n  tooltip-position=\"below\"\n  matTooltipShowDelay=\"500\"\n  [matTooltip]=\"tooltipText()\"\n  (click)=\"toggle($event)\"\n>\n  @let badge = this.badge();\n  <igo-icon\n    matBadge=\"icon\"\n    [igoMatBadgeIcon]=\"badge ? 'filter_alt' : 'help'\"\n    [igoMatBadgeInverseColor]=\"!!badge\"\n    [igoMatBadgeBackgroundColor]=\"badge ? '#fff' : null\"\n    [matBadgeDisabled]=\"visible() ? (hiddenByParent ? true : false) : true\"\n    matBadgeColor=\"accent\"\n    matBadgeSize=\"small\"\n    matBadgePosition=\"after\"\n    [matBadgeHidden]=\"!badge && !showQueryBadge()\"\n    [icon]=\"\n      visible()\n        ? hiddenByParent\n          ? eyeClosedByGroupSvg\n          : 'visibility'\n        : 'visibility_off'\n    \"\n    iconPositionEnd\n  />\n</button>\n", styles: [":host .disabled.out-of-range,:host .visibility-hidden.out-of-range{opacity:.54}:host ::ng-deep .mat-badge-content{height:16px;width:16px;z-index:2;margin:-9px!important;background-color:transparent!important}:host ::ng-deep .mat-badge-content mat-icon{color:var(--mat-sys-on-primary-container);width:12px!important;height:12px!important;font-size:12px!important}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatBadgeModule }, { kind: "directive", type: i4$4.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: IgoLanguageModule }, { kind: "component", type: IgoIconComponent, selector: "igo-icon", inputs: ["color", "icon"] }, { kind: "directive", type: IgoBadgeIconDirective, selector: "[igoMatBadgeIcon]", inputs: ["igoMatBadgeIcon", "matBadgeHidden", "matBadgeDisabled", "igoMatBadgeInverseColor", "igoMatBadgeInheritColor", "igoMatBadgeColor", "igoMatBadgeBackgroundColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: LayerVisibilityButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'igo-layer-visibility-button', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        NgClass,
+                        MatBadgeModule,
+                        MatButtonModule,
+                        MatIconModule,
+                        MatTooltipModule,
+                        IgoLanguageModule,
+                        IgoIconComponent,
+                        IgoBadgeIconDirective
+                    ], template: "@let hiddenByParent = this.parentDisplayed() === false ? true : false;\n<button\n  mat-icon-button\n  [ngClass]=\"{\n    disabled: disabled(),\n    'out-of-range': !inResolutionsRange(),\n    'visibility-hidden': !visible()\n  }\"\n  [color]=\"visible() ? 'primary' : 'default'\"\n  tooltip-position=\"below\"\n  matTooltipShowDelay=\"500\"\n  [matTooltip]=\"tooltipText()\"\n  (click)=\"toggle($event)\"\n>\n  @let badge = this.badge();\n  <igo-icon\n    matBadge=\"icon\"\n    [igoMatBadgeIcon]=\"badge ? 'filter_alt' : 'help'\"\n    [igoMatBadgeInverseColor]=\"!!badge\"\n    [igoMatBadgeBackgroundColor]=\"badge ? '#fff' : null\"\n    [matBadgeDisabled]=\"visible() ? (hiddenByParent ? true : false) : true\"\n    matBadgeColor=\"accent\"\n    matBadgeSize=\"small\"\n    matBadgePosition=\"after\"\n    [matBadgeHidden]=\"!badge && !showQueryBadge()\"\n    [icon]=\"\n      visible()\n        ? hiddenByParent\n          ? eyeClosedByGroupSvg\n          : 'visibility'\n        : 'visibility_off'\n    \"\n    iconPositionEnd\n  />\n</button>\n", styles: [":host .disabled.out-of-range,:host .visibility-hidden.out-of-range{opacity:.54}:host ::ng-deep .mat-badge-content{height:16px;width:16px;z-index:2;margin:-9px!important;background-color:transparent!important}:host ::ng-deep .mat-badge-content mat-icon{color:var(--mat-sys-on-primary-container);width:12px!important;height:12px!important;font-size:12px!important}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { layer: [{ type: i0.Input, args: [{ isSignal: true, alias: "layer", required: true }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], showQueryBadge: [{ type: i0.Input, args: [{ isSignal: true, alias: "showQueryBadge", required: false }] }], inResolutionsRange: [{ type: i0.Input, args: [{ isSignal: true, alias: "inResolutionsRange", required: false }] }], visibilityChange: [{ type: i0.Output, args: ["visibilityChange"] }] } });
+
+class LayerGroupComponent {
+    layer = input(undefined, ...(ngDevMode ? [{ debugName: "layer" }] : []));
+    viewerOptions = input(undefined, ...(ngDevMode ? [{ debugName: "viewerOptions" }] : []));
+    selected = input(undefined, ...(ngDevMode ? [{ debugName: "selected" }] : []));
+    selectionDisabled = input(undefined, ...(ngDevMode ? [{ debugName: "selectionDisabled" }] : []));
+    action = output();
+    visibilityChange = output();
+    expand = output();
+    selectChange = output();
+    isDisabled;
+    get title() {
+        return this.layer().title;
+    }
+    get collapsed() {
+        return this.layer().collapsed;
+    }
+    set collapsed(value) {
+        this.layer().collapsed = value;
+    }
+    get tooltipMessage() {
+        const layer = this.layer();
+        return !layer.isInResolutionsRange
+            ? 'igo.geo.layer.notInResolution'
+            : layer.visible && this.isDisabled
+                ? 'igo.geo.layer.group.hideChildren'
+                : layer.visible
+                    ? 'igo.geo.layer.group.hide'
+                    : 'igo.geo.layer.group.show';
+    }
+    ngOnInit() {
+        this.layer().displayed$.subscribe((displayed) => {
+            this.isDisabled = !displayed;
+        });
+    }
+    onToggle() {
+        this.collapsed = !this.collapsed;
+    }
+    toggleVisibility(event) {
+        event.stopPropagation();
+        this.visibilityChange.emit(event);
+    }
+    toggleLayerGroupTool(event) {
+        event.stopPropagation();
+        this.action.emit(this.layer());
+    }
+    toggleLayerTool(layer) {
+        this.action.emit(layer);
+    }
+    handleExpand() {
+        this.expand.emit();
+    }
+    handleSelect(event) {
+        this.selectChange.emit(event.checked);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: LayerGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: LayerGroupComponent, isStandalone: true, selector: "igo-layer-group", inputs: { layer: { classPropertyName: "layer", publicName: "layer", isSignal: true, isRequired: false, transformFunction: null }, viewerOptions: { classPropertyName: "viewerOptions", publicName: "viewerOptions", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, selectionDisabled: { classPropertyName: "selectionDisabled", publicName: "selectionDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { action: "action", visibilityChange: "visibilityChange", expand: "expand", selectChange: "selectChange" }, host: { properties: { "class.disabled": "this.isDisabled" } }, ngImport: i0, template: "<div class=\"layer-content\">\n  <ng-content />\n\n  @if (viewerOptions().mode === 'selection') {\n    <mat-checkbox\n      [checked]=\"selected()\"\n      [disabled]=\"selectionDisabled()\"\n      (change)=\"handleSelect($event)\"\n    />\n  }\n  <span class=\"igo-layer-title\" (click)=\"handleExpand()\">{{\n    layer().title\n  }}</span>\n</div>\n\n<div class=\"list-actions\">\n  <div class=\"list-secondary-actions\">\n    <button\n      class=\"actions-button\"\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"'igo.geo.layer.group.moreOptions' | translate\"\n      mat-icon-button\n      color=\"primary\"\n      (click)=\"toggleLayerGroupTool($event)\"\n    >\n      <mat-icon>more_horiz</mat-icon>\n    </button>\n  </div>\n\n  <igo-layer-visibility-button\n    [layer]=\"layer()\"\n    [disabled]=\"isDisabled\"\n    [tooltip]=\"tooltipMessage\"\n    [inResolutionsRange]=\"layer().isInResolutionsRange$ | async\"\n    (visibilityChange)=\"toggleVisibility($event)\"\n  />\n</div>\n", styles: [":host ::ng-deep .list-secondary-actions button{visibility:hidden}:host ::ng-deep .list-secondary-actions button.disabled{visibility:visible}:host:hover ::ng-deep .list-secondary-actions button{visibility:visible}:host.disabled ::ng-deep .igo-layer-title,:host.disabled ::ng-deep .list-secondary-actions{opacity:.54}:host{display:flex;align-items:center;justify-content:space-between;background-color:var(--mat-sys-surface)}:host ::ng-deep button.mat-default mat-icon{color:var(--mat-sys-on-surface);fill:var(--mat-sys-on-surface)}:host ::ng-deep button.disabled mat-icon{color:var(--mat-sys-on-secondary-fixed);fill:var(--mat-sys-on-secondary-fixed);opacity:.64}.igo-layer-title{flex:1;font-weight:700;cursor:pointer;max-height:48px;white-space:normal;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;box-orient:vertical;-webkit-box-orient:vertical;line-clamp:2;-webkit-line-clamp:2}.layer-browser-group-carret{margin-right:10px}.layer-content{display:flex;align-items:center;flex:1}.list-actions{display:flex;margin-left:4px;margin-right:4px}.child-list{padding-left:26px}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i2$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: LayerVisibilityButtonComponent, selector: "igo-layer-visibility-button", inputs: ["layer", "tooltip", "disabled", "showQueryBadge", "inResolutionsRange"], outputs: ["visibilityChange"] }, { kind: "ngmodule", type: IgoLanguageModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: LayerGroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'igo-layer-group', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        AsyncPipe,
+                        MatButtonModule,
+                        MatCheckboxModule,
+                        MatTooltipModule,
+                        MatIconModule,
+                        LayerVisibilityButtonComponent,
+                        IgoLanguageModule
+                    ], template: "<div class=\"layer-content\">\n  <ng-content />\n\n  @if (viewerOptions().mode === 'selection') {\n    <mat-checkbox\n      [checked]=\"selected()\"\n      [disabled]=\"selectionDisabled()\"\n      (change)=\"handleSelect($event)\"\n    />\n  }\n  <span class=\"igo-layer-title\" (click)=\"handleExpand()\">{{\n    layer().title\n  }}</span>\n</div>\n\n<div class=\"list-actions\">\n  <div class=\"list-secondary-actions\">\n    <button\n      class=\"actions-button\"\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"'igo.geo.layer.group.moreOptions' | translate\"\n      mat-icon-button\n      color=\"primary\"\n      (click)=\"toggleLayerGroupTool($event)\"\n    >\n      <mat-icon>more_horiz</mat-icon>\n    </button>\n  </div>\n\n  <igo-layer-visibility-button\n    [layer]=\"layer()\"\n    [disabled]=\"isDisabled\"\n    [tooltip]=\"tooltipMessage\"\n    [inResolutionsRange]=\"layer().isInResolutionsRange$ | async\"\n    (visibilityChange)=\"toggleVisibility($event)\"\n  />\n</div>\n", styles: [":host ::ng-deep .list-secondary-actions button{visibility:hidden}:host ::ng-deep .list-secondary-actions button.disabled{visibility:visible}:host:hover ::ng-deep .list-secondary-actions button{visibility:visible}:host.disabled ::ng-deep .igo-layer-title,:host.disabled ::ng-deep .list-secondary-actions{opacity:.54}:host{display:flex;align-items:center;justify-content:space-between;background-color:var(--mat-sys-surface)}:host ::ng-deep button.mat-default mat-icon{color:var(--mat-sys-on-surface);fill:var(--mat-sys-on-surface)}:host ::ng-deep button.disabled mat-icon{color:var(--mat-sys-on-secondary-fixed);fill:var(--mat-sys-on-secondary-fixed);opacity:.64}.igo-layer-title{flex:1;font-weight:700;cursor:pointer;max-height:48px;white-space:normal;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;box-orient:vertical;-webkit-box-orient:vertical;line-clamp:2;-webkit-line-clamp:2}.layer-browser-group-carret{margin-right:10px}.layer-content{display:flex;align-items:center;flex:1}.list-actions{display:flex;margin-left:4px;margin-right:4px}.child-list{padding-left:26px}\n"] }]
+        }], propDecorators: { layer: [{ type: i0.Input, args: [{ isSignal: true, alias: "layer", required: false }] }], viewerOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewerOptions", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], selectionDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionDisabled", required: false }] }], action: [{ type: i0.Output, args: ["action"] }], visibilityChange: [{ type: i0.Output, args: ["visibilityChange"] }], expand: [{ type: i0.Output, args: ["expand"] }], selectChange: [{ type: i0.Output, args: ["selectChange"] }], isDisabled: [{
+                type: HostBinding,
+                args: ['class.disabled']
+            }] } });
+
+/**
+ * Whether a layer is queryable
+ * @param layer Layer
+ * @returns True if the layer s squeryable
+ */
+function layerIsQueryable(layer) {
+    if (isLayerGroup(layer)) {
+        return false;
+    }
+    const dataSource = layer.dataSource;
+    return dataSource.options.queryable === true;
+}
+/**
+ * Whether an OL layer is queryable
+ * @param layer Layer
+ * @returns True if the ol layer is queryable
+ */
+function olLayerIsQueryable(olLayer) {
+    const layer = olLayer.get('_layer');
+    return layer === undefined ? false : layerIsQueryable(layer);
+}
+/**
+ * Whether a layer's feature is queryable
+ * @param layer Layer
+ * @returns True if the layer's feature is queryable
+ */
+function layerFeatureIsQueryable(layer) {
+    const dataSource = layer.dataSource;
+    return dataSource.options.queryLayerFeatures !== undefined
+        ? dataSource.options.queryLayerFeatures === true
+        : true;
+}
+/**
+ * Whether an OL Vector layer is queryable
+ * @param layer Layer
+ * @returns True if the ol vector layer is queryable
+ */
+function olLayerFeatureIsQueryable(olLayer) {
+    const layer = olLayer.get('_layer');
+    return layer === undefined
+        ? false
+        : layerIsQueryable(layer) && layerFeatureIsQueryable(layer);
+}
+
+class LayerLegendComponent {
+    capabilitiesService = inject(CapabilitiesService);
+    languageService = inject(LanguageService);
+    cdRef = inject(ChangeDetectorRef);
+    config = inject(ConfigService);
+    http = inject(HttpClient);
+    updateLegendOnResolutionChange = input(false, ...(ngDevMode ? [{ debugName: "updateLegendOnResolutionChange" }] : []));
+    /**
+     * Observable of the legend items
+     */
+    legendItems$ = new BehaviorSubject([]);
+    /**
+     * Subscription to the map's resolution
+     */
+    state$$;
+    /**
+     * The available styles
+     */
+    styles;
+    /**
+     * The style used to make the legend
+     */
+    currentStyle;
+    /**
+     * The extent used to make the legend
+     */
+    view = undefined;
+    /**
+     * Get list of images display
+     */
+    renderedLegends = viewChildren('renderedLegend', ...(ngDevMode ? [{ debugName: "renderedLegends" }] : []));
+    /**
+     * List of size of images displayed
+     */
+    imagesHeight = {};
+    layer = input(undefined, ...(ngDevMode ? [{ debugName: "layer" }] : []));
+    /**
+     * if getLegendGraphic is authorized
+     */
+    getLegend = true;
+    /**
+     * On init, subscribe to the map's resolution and update the legend accordingly
+     */
+    ngOnInit() {
+        let lastlLegend = this.layer().legend;
+        this.styles = this.listStyles();
+        const sourceOptions = this.layer().options.source.options;
+        if (sourceOptions && sourceOptions.params && sourceOptions.params.STYLES) {
+            // if a styles is provided into the layers wms params
+            this.currentStyle = this.styles.find((style) => style.name === sourceOptions.params.STYLES).name;
+        }
+        else if (!lastlLegend) {
+            // if no legend is manually provided
+            if (this.styles && this.styles.length > 1) {
+                this.currentStyle = this.styles[0].name;
+            }
+        }
+        else if (this.styles && this.styles.length > 1) {
+            this.currentStyle = lastlLegend[0].currentStyle;
+        }
+        const layer = this.layer();
+        if (typeof layer.options.legendOptions !== 'undefined' &&
+            layer.options.legendOptions.display === false) {
+            lastlLegend = [];
+        }
+        else {
+            lastlLegend = layer.dataSource.getLegend(this.currentStyle, this.view);
+        }
+        if (this.updateLegendOnResolutionChange() ||
+            sourceOptions.contentDependentLegend) {
+            const state$ = layer.map.viewController.state$;
+            this.state$$ = state$.subscribe(() => this.onViewControllerStateChange());
+        }
+        else if (lastlLegend && lastlLegend.length !== 0) {
+            this.legendItems$.next(lastlLegend);
+            for (const legend of lastlLegend) {
+                this.getLegendGraphic(legend);
+            }
+        }
+    }
+    /**
+     * On destroy, unsubscribe to the map's view state
+     */
+    ngOnDestroy() {
+        if (this.state$$ !== undefined) {
+            this.state$$.unsubscribe();
+        }
+    }
+    getLegendGraphic(item) {
+        if (item.url) {
+            const depotUrl = this.config?.getConfig('depot.url');
+            fetchImageFromDepotUrl(item.url, depotUrl, this.http)
+                .pipe(catchError$1((err) => {
+                if (err.error) {
+                    err.error.caught = true;
+                    this.getLegend = false;
+                    this.cdRef.detectChanges();
+                }
+                throw err;
+            }))
+                .subscribe((obsLegGraph) => {
+                const idx = this.legendItems$.value.findIndex((leg) => leg.title === item.title);
+                const legendGraph = obsLegGraph;
+                this.legendItems$.value[idx].imgGraphValue = legendGraph;
+                this.cdRef.detectChanges();
+            });
+        }
+    }
+    toggleLegendItem(collapsed, item) {
+        item.collapsed = collapsed;
+    }
+    transfertToggleLegendItem(newLegends) {
+        const outLegends = newLegends;
+        const lastLegends = this.layer().legend;
+        for (let i = 0; i < lastLegends.length; i++) {
+            outLegends[i].collapsed = lastLegends[i].collapsed;
+        }
+        return outLegends;
+    }
+    computeItemTitle(layerLegend) {
+        const layerOptions = this.layer().dataSource.options;
+        if (layerOptions.type !== 'wms') {
+            return of(layerLegend.title);
+        }
+        const layers = layerOptions.params.LAYERS.split(',');
+        const localLayerOptions = JSON.parse(JSON.stringify(layerOptions)); // to avoid to alter the original options.
+        localLayerOptions.params.LAYERS = layers.find((layer) => layer === layerLegend.title);
+        return this.capabilitiesService.getWMSOptions(localLayerOptions).pipe(map((wmsDataSourceOptions) => {
+            return wmsDataSourceOptions._layerOptionsFromSource.title;
+        }));
+    }
+    /**
+     * On resolution change, compute the effective scale level and update the
+     * legend accordingly.
+     * @param resolution Map resolution
+     */
+    onViewControllerStateChange() {
+        this.view = {
+            resolution: this.layer().map.viewController.getResolution(),
+            extent: this.layer().map.viewController.getExtent(),
+            projection: this.layer().map.viewController.getOlProjection().getCode(),
+            scale: this.layer().map.viewController.getScale(),
+            size: this.layer().map.ol.getSize()
+        };
+        this.updateLegend();
+    }
+    /**
+     * Update the legend with scale level and style define
+     */
+    updateLegend() {
+        let legendItems = this.layer().dataSource.getLegend(this.currentStyle, this.view);
+        const layer = this.layer();
+        if (layer.legend && layer.legend.length > 1) {
+            legendItems = this.transfertToggleLegendItem(legendItems);
+        }
+        layer.legend = legendItems;
+        if (legendItems.length === 0 && this.legendItems$.value.length === 0) {
+            return;
+        }
+        this.legendItems$.next(legendItems);
+        for (const legend of this.legendItems$.value) {
+            this.getLegendGraphic(legend);
+        }
+    }
+    listStyles() {
+        const layerOptions = this.layer().options;
+        if (layerOptions && layerOptions.legendOptions) {
+            const translate = this.languageService.translate;
+            const title = translate.instant('igo.geo.layer.legend.default');
+            let stylesAvailable = [{ name: '', title }];
+            if (layerOptions.legendOptions.stylesAvailable) {
+                stylesAvailable = stylesAvailable.concat(layerOptions.legendOptions.stylesAvailable.filter((sA) => sA.name.normalize('NFD').replace(/[\u0300-\u036f]/gi, '') !==
+                    'default' &&
+                    sA.name.normalize('NFD').replace(/[\u0300-\u036f]/gi, '') !==
+                        'defaut'));
+            }
+            stylesAvailable
+                .filter((sa) => !sa.title)
+                .map((sa) => (sa.title = sa.name));
+            stylesAvailable.map((s) => (s.title =
+                s.title.charAt(0).toUpperCase() +
+                    s.title.slice(1).replace(/_/g, ' ')));
+            return stylesAvailable;
+        }
+        return;
+    }
+    onChangeStyle() {
+        this.updateLegend();
+        let STYLES = '';
+        const layer = this.layer();
+        if (layer.dataSource instanceof WMSDataSource) {
+            layer.dataSource.ol
+                .getParams()
+                .LAYERS.split(',')
+                .map(() => (STYLES += this.currentStyle + ','));
+            STYLES = STYLES.slice(0, -1);
+            layer.dataSource.stylesParams = STYLES;
+        }
+    }
+    onLoadImage(id) {
+        let elemRef;
+        const renderedLegends = this.renderedLegends();
+        if (renderedLegends.length === 1) {
+            elemRef = renderedLegends.at(0).nativeElement;
+        }
+        else {
+            elemRef = renderedLegends.find((renderedLegend) => renderedLegend.nativeElement.id === id).nativeElement;
+        }
+        this.imagesHeight[id] = elemRef.height;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: LayerLegendComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: LayerLegendComponent, isStandalone: true, selector: "igo-layer-legend", inputs: { updateLegendOnResolutionChange: { classPropertyName: "updateLegendOnResolutionChange", publicName: "updateLegendOnResolutionChange", isSignal: true, isRequired: false, transformFunction: null }, layer: { classPropertyName: "layer", publicName: "layer", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "renderedLegends", predicate: ["renderedLegend"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (legendItems$ | async; as items) {\n  @if (items.length) {\n    @for (item of items.slice().reverse(); track item) {\n      <ng-container #renderedLegends>\n        @if (getLegend) {\n          <div>\n            @if (item.title) {\n              <mat-list-item>\n                <mat-icon\n                  id=\"legend-toggle\"\n                  class=\"igo-chevron\"\n                  matListItemIcon\n                  igoCollapse\n                  [target]=\"legend\"\n                  [collapsed]=\"item.collapsed\"\n                  (toggle)=\"toggleLegendItem($event, item)\"\n                  >expand_less\n                </mat-icon>\n                <span matListItemTitle\n                  >{{ computeItemTitle(item) | async }}\n                </span>\n              </mat-list-item>\n            }\n            <div\n              #legend\n              class=\"igo-layer-legend\"\n              [ngClass]=\"{ 'with-title': item.title }\"\n            >\n              @if (currentStyle !== undefined) {\n                <mat-form-field subscriptSizing=\"dynamic\">\n                  <mat-select\n                    tooltip-position=\"below\"\n                    matTooltipShowDelay=\"500\"\n                    [matTooltip]=\"\n                      'igo.geo.layer.legend.selectStyle' | translate\n                    \"\n                    [(ngModel)]=\"currentStyle\"\n                    (selectionChange)=\"onChangeStyle()\"\n                  >\n                    @for (style of styles; track style) {\n                      <mat-option [value]=\"style.name\">{{\n                        style.title\n                      }}</mat-option>\n                    }\n                  </mat-select>\n                </mat-form-field>\n              }\n              @if (!item.collapsed) {\n                <div>\n                  @if (item.url) {\n                    <div>\n                      @if (item.imgGraphValue) {\n                        <img\n                          igoImageError\n                          [hideError]=\"true\"\n                          #renderedLegend\n                          id=\"{{ item.title }}\"\n                          (load)=\"onLoadImage(item.title)\"\n                          [src]=\"item.imgGraphValue\"\n                          alt=\"{{\n                            'igo.geo.layer.legend.loadingLegendText' | translate\n                          }}\"\n                        />\n                      }\n                      @if (imagesHeight[item.title] < 16) {\n                        <small>\n                          {{ 'igo.geo.layer.legend.noLegendScale' | translate }}\n                        </small>\n                      }\n                    </div>\n                  }\n                  @if (item.html) {\n                    <div\n                      [ngStyle]=\"item.style\"\n                      [innerHTML]=\"item.html | sanitizeHtml\"\n                    ></div>\n                  }\n                </div>\n              }\n            </div>\n          </div>\n        } @else {\n          <small>\n            {{ 'igo.geo.layer.legend.noLegendText' | translate }}\n          </small>\n        }\n      </ng-container>\n    }\n  } @else {\n    <small>\n      {{ 'igo.geo.layer.legend.noLegendText' | translate }}\n    </small>\n  }\n}\n", styles: [":host{--mat-form-field-container-height: 48px;--mat-form-field-container-vertical-padding: 12px}@-moz-document url-prefix(){:host img:after{margin-left:19px}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.igo-layer-legend.with-title{padding-left:18px}img{max-width:100%}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%;border-top-color:var(--mat-sys-primary-container);animation:2s linear infinite spin}mat-form-field{margin-bottom:4px}\n"], dependencies: [{ kind: "ngmodule", type: MatListModule }, { kind: "component", type: i1$2.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i1$2.MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "directive", type: i1$2.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: CollapseDirective, selector: "[igoCollapse]", inputs: ["target", "collapsed"], outputs: ["toggle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i4$3.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i4$3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "directive", type: ImageErrorDirective, selector: "[igoImageError]", inputs: ["errorImageUrl", "hideError"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: IgoLanguageModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: LayerLegendComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'igo-layer-legend', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        MatListModule,
+                        MatIconModule,
+                        CollapseDirective,
+                        NgClass,
+                        MatFormFieldModule,
+                        MatSelectModule,
+                        MatTooltipModule,
+                        FormsModule,
+                        MatOptionModule,
+                        ImageErrorDirective,
+                        NgStyle,
+                        AsyncPipe,
+                        IgoLanguageModule,
+                        SanitizeHtmlPipe
+                    ], template: "@if (legendItems$ | async; as items) {\n  @if (items.length) {\n    @for (item of items.slice().reverse(); track item) {\n      <ng-container #renderedLegends>\n        @if (getLegend) {\n          <div>\n            @if (item.title) {\n              <mat-list-item>\n                <mat-icon\n                  id=\"legend-toggle\"\n                  class=\"igo-chevron\"\n                  matListItemIcon\n                  igoCollapse\n                  [target]=\"legend\"\n                  [collapsed]=\"item.collapsed\"\n                  (toggle)=\"toggleLegendItem($event, item)\"\n                  >expand_less\n                </mat-icon>\n                <span matListItemTitle\n                  >{{ computeItemTitle(item) | async }}\n                </span>\n              </mat-list-item>\n            }\n            <div\n              #legend\n              class=\"igo-layer-legend\"\n              [ngClass]=\"{ 'with-title': item.title }\"\n            >\n              @if (currentStyle !== undefined) {\n                <mat-form-field subscriptSizing=\"dynamic\">\n                  <mat-select\n                    tooltip-position=\"below\"\n                    matTooltipShowDelay=\"500\"\n                    [matTooltip]=\"\n                      'igo.geo.layer.legend.selectStyle' | translate\n                    \"\n                    [(ngModel)]=\"currentStyle\"\n                    (selectionChange)=\"onChangeStyle()\"\n                  >\n                    @for (style of styles; track style) {\n                      <mat-option [value]=\"style.name\">{{\n                        style.title\n                      }}</mat-option>\n                    }\n                  </mat-select>\n                </mat-form-field>\n              }\n              @if (!item.collapsed) {\n                <div>\n                  @if (item.url) {\n                    <div>\n                      @if (item.imgGraphValue) {\n                        <img\n                          igoImageError\n                          [hideError]=\"true\"\n                          #renderedLegend\n                          id=\"{{ item.title }}\"\n                          (load)=\"onLoadImage(item.title)\"\n                          [src]=\"item.imgGraphValue\"\n                          alt=\"{{\n                            'igo.geo.layer.legend.loadingLegendText' | translate\n                          }}\"\n                        />\n                      }\n                      @if (imagesHeight[item.title] < 16) {\n                        <small>\n                          {{ 'igo.geo.layer.legend.noLegendScale' | translate }}\n                        </small>\n                      }\n                    </div>\n                  }\n                  @if (item.html) {\n                    <div\n                      [ngStyle]=\"item.style\"\n                      [innerHTML]=\"item.html | sanitizeHtml\"\n                    ></div>\n                  }\n                </div>\n              }\n            </div>\n          </div>\n        } @else {\n          <small>\n            {{ 'igo.geo.layer.legend.noLegendText' | translate }}\n          </small>\n        }\n      </ng-container>\n    }\n  } @else {\n    <small>\n      {{ 'igo.geo.layer.legend.noLegendText' | translate }}\n    </small>\n  }\n}\n", styles: [":host{--mat-form-field-container-height: 48px;--mat-form-field-container-vertical-padding: 12px}@-moz-document url-prefix(){:host img:after{margin-left:19px}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.igo-layer-legend.with-title{padding-left:18px}img{max-width:100%}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%;border-top-color:var(--mat-sys-primary-container);animation:2s linear infinite spin}mat-form-field{margin-bottom:4px}\n"] }]
+        }], propDecorators: { updateLegendOnResolutionChange: [{ type: i0.Input, args: [{ isSignal: true, alias: "updateLegendOnResolutionChange", required: false }] }], renderedLegends: [{ type: i0.ViewChildren, args: ['renderedLegend', { isSignal: true }] }], layer: [{ type: i0.Input, args: [{ isSignal: true, alias: "layer", required: false }] }] } });
+
+class LayerItemComponent {
+    networkService = inject(NetworkService);
+    showLegend = signal(true, ...(ngDevMode ? [{ debugName: "showLegend" }] : []));
+    inResolutionRange = true;
+    queryBadgeHidden = signal(true, ...(ngDevMode ? [{ debugName: "queryBadgeHidden" }] : []));
+    tooltipText;
+    state;
+    resolution$$;
+    network$$;
+    layer = input.required(...(ngDevMode ? [{ debugName: "layer" }] : []));
+    /** Pass the visibility to trigger change detection */
+    visible = input.required(...(ngDevMode ? [{ debugName: "visible" }] : []));
+    selected = input(undefined, ...(ngDevMode ? [{ debugName: "selected" }] : []));
+    selectionDisabled = input(undefined, ...(ngDevMode ? [{ debugName: "selectionDisabled" }] : []));
+    viewerOptions = input(undefined, ...(ngDevMode ? [{ debugName: "viewerOptions" }] : []));
+    action = output();
+    selectChange = output();
+    visibilityChange = output();
+    isDisabled;
+    get opacity() {
+        return this.layer().opacity * 100;
+    }
+    set opacity(opacity) {
+        this.layer().opacity = opacity / 100;
+    }
+    get visibilityTooltip() {
+        if (this.viewerOptions().mode !== 'selection' && !this.inResolutionRange) {
+            return this.layer().visible
+                ? this.isDisabled
+                    ? 'igo.geo.layer.notInResolution'
+                    : 'igo.geo.layer.group.hideChildren'
+                : 'igo.geo.layer.showLayer';
+        }
+        return this.layer().visible
+            ? this.isDisabled
+                ? 'igo.geo.layer.group.hideChildren'
+                : 'igo.geo.layer.hideLayer'
+            : 'igo.geo.layer.showLayer';
+    }
+    ngOnInit() {
+        this.layer().displayed$.subscribe((displayed) => {
+            this.isDisabled = !displayed;
+        });
+        const layer = this.layer();
+        if (layer.visible &&
+            this.viewerOptions()?.legend?.showForVisibleLayers &&
+            layer.firstLoadComponent === true) {
+            layer.firstLoadComponent = false;
+            layer.legendCollapsed = false;
+        }
+        this.toggleLegend(layer.legendCollapsed);
+        this.updateQueryBadge();
+        const resolution$ = layer.map.viewController.resolution$;
+        this.resolution$$ = resolution$.subscribe(() => {
+            this.onResolutionChange();
+        });
+        this.tooltipText = this.computeTooltip();
+        this.network$$ = this.networkService
+            .currentState()
+            .subscribe((state) => {
+            this.state = state;
+            this.onResolutionChange();
+        });
     }
-    _internalMove() {
-        this.recalculateZindex();
-        this.notify();
+    ngOnDestroy() {
+        this.resolution$$?.unsubscribe();
+        this.network$$?.unsubscribe();
     }
-    getBefore(layer) {
-        return this.treeLayers.find((layerTree) => layerTree.zIndex <= layer.zIndex);
+    toggleLegend(collapsed) {
+        this.layer().legendCollapsed = collapsed;
+        this.showLegend.set(!collapsed);
     }
-    /** Recursive */
-    recalculateZindex(minIndex = this.baseLayers.length, layers = this.treeLayers) {
-        return [...layers].reverse().reduce((previousZindex, layer) => {
-            let zIndex = ++previousZindex;
-            layer.zIndex = zIndex;
-            if (isLayerGroup(layer)) {
-                zIndex = this.recalculateZindex(zIndex, layer.children);
-            }
-            return zIndex;
-        }, minIndex);
+    toggleLegendOnClick() {
+        this.toggleLegend(this.showLegend());
     }
-    handleAdd(layer, offset) {
-        const existingLayer = this.getById(layer.id);
-        if (existingLayer !== undefined) {
-            existingLayer.visible = true;
-            return;
-        }
-        const zIndex = this.getZindexOffset(layer, offset);
-        this.setZindex(layer, zIndex);
-        layer.init(this._map);
-        if (isBaseLayer(layer)) {
-            if (layer.visible) {
-                this.selectBaseLayer(layer);
-            }
-            this._baseLayers.push(layer);
-        }
-        else if (this.isOtherLayer(layer)) {
-            this._otherLayers.push(layer);
-        }
-        else if (this.isSystemLayer(layer) && !layer.showInLayerList) {
-            this._systemLayers.push(layer);
-        }
-        else if (layer.showInLayerList) {
-            return layer;
-        }
-        else {
-            this._otherLayers.push(layer);
+    handleVisibilityChange(event) {
+        event.stopPropagation();
+        if (this.viewerOptions().legend?.showOnVisibilityChange) {
+            this.toggleLegend(!this.layer().visible);
         }
-        const parent = layer.parentId
-            ? this.getById(layer.parentId.toString().split(TREE_SEPERATOR).pop())
-            : undefined;
-        layer.add(parent);
-        return;
+        this.updateQueryBadge();
+        this.visibilityChange.emit(event);
     }
-    _remove(layer) {
-        if (isBaseLayer(layer)) {
-            this.removeBaselayer(layer);
-        }
-        else if (this.isOtherLayer(layer)) {
-            this.removeOtherLayer(layer);
+    computeTooltip() {
+        const layerOptions = this.layer().options;
+        if (!layerOptions.tooltip) {
+            return this.layer().title;
         }
-        else if (this.isSystemLayer(layer)) {
-            this.removeSystemLayer(layer);
+        const layerTooltip = layerOptions.tooltip;
+        const layerMetadata = layerOptions.metadata;
+        switch (layerOptions.tooltip.type) {
+            case TooltipType.TITLE:
+                return this.layer().title;
+            case TooltipType.ABSTRACT:
+                if (layerMetadata && layerMetadata.abstract) {
+                    return layerMetadata.abstract;
+                }
+                else {
+                    return this.layer().title;
+                }
+            case TooltipType.CUSTOM:
+                if (layerTooltip && layerTooltip.text) {
+                    return layerTooltip.text;
+                }
+                else {
+                    return this.layer().title;
+                }
+            default:
+                return this.layer().title;
         }
-        layer.remove();
-        return layer;
-    }
-    removeBaselayer(layer) {
-        this.removeIn(layer, this._baseLayers);
-    }
-    removeSystemLayer(layer) {
-        this.removeIn(layer, this._systemLayers);
     }
-    removeOtherLayer(layer) {
-        this.removeIn(layer, this._otherLayers);
-    }
-    removeIn(layer, store) {
-        const index = store.findIndex((sysLayer) => sysLayer.id === layer.id);
-        if (index === -1) {
-            return;
+    onResolutionChange() {
+        const inResolutionRange = this.layer().isInResolutionsRange;
+        if (inResolutionRange === false &&
+            this.viewerOptions().legend.updateOnResolutionChange === true) {
+            this.toggleLegend(true);
         }
-        store.splice(index, 1);
-    }
-    isSystemLayer(layer) {
-        return isLayerItem(layer) && layer.isIgoInternalLayer;
-    }
-    isOtherLayer(layer) {
-        return isLayerLinked(layer) && !layer.showInLayerList;
-    }
-    clearBaselayers() {
-        this.baseLayers.forEach((layer) => this._remove(layer));
-        this._baseLayers = [];
-    }
-    clearTree() {
-        this.treeLayers.forEach((layer) => this._remove(layer));
-        this.tree.clear();
-    }
-    clearSystems() {
-        this._systemLayers.forEach((layer) => this._remove(layer));
-        this._systemLayers = [];
-    }
-    clearOther() {
-        this._otherLayers.forEach((layer) => this._remove(layer));
-        this._otherLayers = [];
-    }
-    getZindexOffset(layer, previousOffset = 0) {
-        return layer.zIndex ? 0 : previousOffset++;
+        this.inResolutionRange = inResolutionRange;
     }
-    setZindex(layer, offset) {
-        if (isBaseLayer(layer)) {
-            return this.handleBaselayerZIndex(layer, offset);
-        }
-        if (layer.zIndex === undefined || layer.zIndex === 0) {
-            const maxZIndex = Math.max(ZINDEX_MIN, ...this.treeLayers.map((l) => l.zIndex));
-            layer.zIndex = maxZIndex + 1 + (offset ?? 0);
-        }
+    updateQueryBadge() {
+        const layer = this.layer();
+        const hidden = this.viewerOptions().queryBadge === false ||
+            layer.visible === false ||
+            !layerIsQueryable(layer);
+        this.queryBadgeHidden.set(hidden);
     }
-    handleBaselayerZIndex(layer, offset) {
-        const maxZIndex = Math.max(0, ...this.baseLayers.map((l) => l.zIndex));
-        const zIndex = maxZIndex + 1 + (offset ?? 0);
-        layer.zIndex = zIndex > ZINDEX_MIN ? ZINDEX_MIN : zIndex;
+    toggleLayerTool() {
+        this.action.emit(this.layer());
     }
-    notify() {
-        this.layersFlattened = [...this.tree.flattened];
-        this._layers$.next([...this.treeLayers]);
-        this._baseLayers$.next([...this.baseLayers]);
+    handleSelect(event) {
+        this.selectChange.emit(event.checked);
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: LayerItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: LayerItemComponent, isStandalone: true, selector: "igo-layer-item", inputs: { layer: { classPropertyName: "layer", publicName: "layer", isSignal: true, isRequired: true, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: true, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, selectionDisabled: { classPropertyName: "selectionDisabled", publicName: "selectionDisabled", isSignal: true, isRequired: false, transformFunction: null }, viewerOptions: { classPropertyName: "viewerOptions", publicName: "viewerOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { action: "action", selectChange: "selectChange", visibilityChange: "visibilityChange" }, host: { properties: { "class.disabled": "this.isDisabled" } }, ngImport: i0, template: "<div class=\"igo-layer-list-item\">\n  <div class=\"layer-content\">\n    @if (viewerOptions().mode === 'selection') {\n      <mat-checkbox\n        [checked]=\"selected()\"\n        [disabled]=\"selectionDisabled()\"\n        (change)=\"handleSelect($event)\"\n      />\n    }\n    <ng-content />\n    <span\n      class=\"igo-layer-title\"\n      [matTooltip]=\"tooltipText\"\n      matTooltipShowDelay=\"500\"\n      (click)=\"toggleLegendOnClick()\"\n    >\n      {{ layer().title }}\n    </span>\n  </div>\n\n  <div class=\"list-actions\">\n    <div class=\"list-secondary-actions\">\n      @if (viewerOptions().mode !== 'selection') {\n        <button\n          class=\"actions-button\"\n          tooltip-position=\"below\"\n          matTooltipShowDelay=\"500\"\n          [matTooltip]=\"'igo.geo.layer.moreOptions' | translate\"\n          mat-icon-button\n          color=\"primary\"\n          (click)=\"toggleLayerTool()\"\n        >\n          <mat-icon>more_horiz</mat-icon>\n        </button>\n      }\n    </div>\n\n    <igo-layer-visibility-button\n      [layer]=\"layer()\"\n      [tooltip]=\"visibilityTooltip\"\n      [disabled]=\"isDisabled\"\n      [inResolutionsRange]=\"layer().isInResolutionsRange$ | async\"\n      [showQueryBadge]=\"queryBadgeHidden() === false\"\n      (visibilityChange)=\"handleVisibilityChange($event)\"\n    />\n  </div>\n</div>\n\n@if (showLegend()) {\n  <div class=\"igo-layer-legend-container\">\n    <igo-layer-legend\n      [layer]=\"layer()\"\n      [updateLegendOnResolutionChange]=\"\n        viewerOptions().legend.updateOnResolutionChange\n      \"\n    />\n  </div>\n}\n", styles: [":host ::ng-deep .list-secondary-actions button{visibility:hidden}:host ::ng-deep .list-secondary-actions button.disabled{visibility:visible}:host:hover ::ng-deep .list-secondary-actions button{visibility:visible}:host.disabled ::ng-deep .igo-layer-title,:host.disabled ::ng-deep .list-secondary-actions{opacity:.54}:host{overflow:hidden;background-color:var(--mat-sys-surface)}:host ::ng-deep button.mat-default mat-icon{color:var(--mat-sys-on-surface);fill:var(--mat-sys-on-surface)}:host ::ng-deep button.disabled mat-icon{color:var(--mat-sys-on-secondary-fixed);fill:var(--mat-sys-on-secondary-fixed);opacity:.64}.list-actions{display:flex;margin-left:4px;margin-right:4px}.layer-content{display:flex;align-items:center;flex:1}.igo-layer-title{display:block;cursor:pointer;max-height:48px;white-space:normal;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;box-orient:vertical;-webkit-box-orient:vertical;line-clamp:2;-webkit-line-clamp:2}.igo-layer-list-item{display:flex;align-items:center;justify-content:space-between}.igo-layer-legend-container{padding-top:4px;width:calc(100% - 12px)}\n"], dependencies: [{ kind: "ngmodule", type: MatListModule }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i2$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatBadgeModule }, { kind: "component", type: LayerLegendComponent, selector: "igo-layer-legend", inputs: ["updateLegendOnResolutionChange", "layer"] }, { kind: "ngmodule", type: IgoLanguageModule }, { kind: "component", type: LayerVisibilityButtonComponent, selector: "igo-layer-visibility-button", inputs: ["layer", "tooltip", "disabled", "showQueryBadge", "inResolutionsRange"], outputs: ["visibilityChange"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: LayerItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'igo-layer-item', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        MatListModule,
+                        MatCheckboxModule,
+                        MatTooltipModule,
+                        MatButtonModule,
+                        MatIconModule,
+                        MatBadgeModule,
+                        LayerLegendComponent,
+                        AsyncPipe,
+                        IgoLanguageModule,
+                        LayerVisibilityButtonComponent
+                    ], template: "<div class=\"igo-layer-list-item\">\n  <div class=\"layer-content\">\n    @if (viewerOptions().mode === 'selection') {\n      <mat-checkbox\n        [checked]=\"selected()\"\n        [disabled]=\"selectionDisabled()\"\n        (change)=\"handleSelect($event)\"\n      />\n    }\n    <ng-content />\n    <span\n      class=\"igo-layer-title\"\n      [matTooltip]=\"tooltipText\"\n      matTooltipShowDelay=\"500\"\n      (click)=\"toggleLegendOnClick()\"\n    >\n      {{ layer().title }}\n    </span>\n  </div>\n\n  <div class=\"list-actions\">\n    <div class=\"list-secondary-actions\">\n      @if (viewerOptions().mode !== 'selection') {\n        <button\n          class=\"actions-button\"\n          tooltip-position=\"below\"\n          matTooltipShowDelay=\"500\"\n          [matTooltip]=\"'igo.geo.layer.moreOptions' | translate\"\n          mat-icon-button\n          color=\"primary\"\n          (click)=\"toggleLayerTool()\"\n        >\n          <mat-icon>more_horiz</mat-icon>\n        </button>\n      }\n    </div>\n\n    <igo-layer-visibility-button\n      [layer]=\"layer()\"\n      [tooltip]=\"visibilityTooltip\"\n      [disabled]=\"isDisabled\"\n      [inResolutionsRange]=\"layer().isInResolutionsRange$ | async\"\n      [showQueryBadge]=\"queryBadgeHidden() === false\"\n      (visibilityChange)=\"handleVisibilityChange($event)\"\n    />\n  </div>\n</div>\n\n@if (showLegend()) {\n  <div class=\"igo-layer-legend-container\">\n    <igo-layer-legend\n      [layer]=\"layer()\"\n      [updateLegendOnResolutionChange]=\"\n        viewerOptions().legend.updateOnResolutionChange\n      \"\n    />\n  </div>\n}\n", styles: [":host ::ng-deep .list-secondary-actions button{visibility:hidden}:host ::ng-deep .list-secondary-actions button.disabled{visibility:visible}:host:hover ::ng-deep .list-secondary-actions button{visibility:visible}:host.disabled ::ng-deep .igo-layer-title,:host.disabled ::ng-deep .list-secondary-actions{opacity:.54}:host{overflow:hidden;background-color:var(--mat-sys-surface)}:host ::ng-deep button.mat-default mat-icon{color:var(--mat-sys-on-surface);fill:var(--mat-sys-on-surface)}:host ::ng-deep button.disabled mat-icon{color:var(--mat-sys-on-secondary-fixed);fill:var(--mat-sys-on-secondary-fixed);opacity:.64}.list-actions{display:flex;margin-left:4px;margin-right:4px}.layer-content{display:flex;align-items:center;flex:1}.igo-layer-title{display:block;cursor:pointer;max-height:48px;white-space:normal;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;box-orient:vertical;-webkit-box-orient:vertical;line-clamp:2;-webkit-line-clamp:2}.igo-layer-list-item{display:flex;align-items:center;justify-content:space-between}.igo-layer-legend-container{padding-top:4px;width:calc(100% - 12px)}\n"] }]
+        }], propDecorators: { layer: [{ type: i0.Input, args: [{ isSignal: true, alias: "layer", required: true }] }], visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: true }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], selectionDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionDisabled", required: false }] }], viewerOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewerOptions", required: false }] }], action: [{ type: i0.Output, args: ["action"] }], selectChange: [{ type: i0.Output, args: ["selectChange"] }], visibilityChange: [{ type: i0.Output, args: ["visibilityChange"] }], isDisabled: [{
+                type: HostBinding,
+                args: ['class.disabled']
+            }] } });
 
-function mergeLayersOptions(layersOptionsTree, layersOptions) {
-    const tree = [...layersOptionsTree];
-    layersOptions.forEach((options) => {
-        const identifier = getLayerOptionIdentifier(options);
-        if (!identifier)
-            return;
-        const currentNode = _getNodeById(identifier, tree) ?? _getNodeByTitle(options.title, tree);
-        if (currentNode) {
-            // if we get layer options by title, we update the id of current layer.
-            if (isLayerGroupOptions(currentNode) &&
-                currentNode.id.toString().includes(ID_GROUP_PREFIX)) {
-                currentNode.id = identifier;
-            }
-            const currentNodeParentID = currentNode.parentId ?? findParentId(tree, currentNode);
-            const mergedOptions = ObjectUtils.mergeDeep(currentNode, options);
-            if (currentNodeParentID === options.parentId) {
-                moveOptions(tree, identifier, mergedOptions);
-            }
-            else {
-                // if we have no parent id it means that we are in the root of the tree.
-                if (!options.parentId)
-                    mergedOptions.parentId = undefined;
-                const initialIdentifier = getLayerOptionIdentifier(currentNode);
-                moveOptions(tree, initialIdentifier, mergedOptions);
-            }
-        }
-        else {
-            // Some layers in local context doesn't have an id, if this is the case we
-            // check if the layer is already in the tree by its title
-            // and if it is we don't add it again. The changes is ignored
-            if (isLayerGroupOptions(options)) {
-                const currentNode = _getNodeByTitle(options.title, tree);
-                if (currentNode) {
-                    return;
-                }
-            }
-            // handel external Data source options
-            if (isLayerItemOptions(options)) {
-                handleExternalDataSource(options);
-            }
-            insertOptions(tree, options);
-        }
-    });
-    return tree;
-}
-function handleExternalDataSource(options) {
-    options.sourceOptions = {
-        ...options.sourceOptions,
-        optionsFromCapabilities: true,
-        optionsFromApi: true,
-        crossOrigin: 'anonymous'
-    };
-}
-function getLayerOptionIdentifier(layerOptions) {
-    return isLayerGroupOptions(layerOptions)
-        ? String(layerOptions.id)
-        : (getLayerParam(layerOptions) ??
-            (layerOptions.id !== undefined
-                ? layerOptions.id.toString()
-                : undefined));
-}
-function moveOptions(tree, initialIdentifier, options) {
-    removeNode(tree, initialIdentifier);
-    insertOptions(tree, options);
-}
-function insertOptions(tree, options) {
-    const parentId = options.parentId;
-    if (!parentId) {
-        tree.push(options);
-    }
-    else {
-        const parent = _getNodeById(parentId, tree);
-        if (parent) {
-            (parent.children ??= []).push(options);
-            sortLayersOptionsByZIndex(parent.children);
-        }
+class LayerLegendItemComponent {
+    networkService = inject(NetworkService);
+    inResolutionRange$ = new BehaviorSubject(true);
+    tooltipText;
+    state;
+    resolution$$;
+    network$$;
+    layer = input(undefined, ...(ngDevMode ? [{ debugName: "layer" }] : []));
+    updateLegendOnResolutionChange = input(false, ...(ngDevMode ? [{ debugName: "updateLegendOnResolutionChange" }] : []));
+    ngOnInit() {
+        const resolution$ = this.layer().map.viewController.resolution$;
+        this.resolution$$ = resolution$.subscribe(() => {
+            this.onResolutionChange();
+        });
+        this.tooltipText = this.computeTooltip();
+        this.network$$ = this.networkService
+            .currentState()
+            .subscribe((state) => {
+            this.state = state;
+            this.onResolutionChange();
+        });
     }
-}
-/** Recursive */
-function _getNodeById(id, data) {
-    let node;
-    data.some((item) => {
-        const identifier = getLayerOptionIdentifier(item);
-        if (identifier === id) {
-            node = item;
-            return true;
-        }
-        const children = isLayerGroupOptions(item) ? item.children : undefined;
-        if (children) {
-            node = _getNodeById(id, children);
-            if (node)
-                return true;
-        }
-        return false;
-    });
-    return node;
-}
-/** Recursive */
-function _getNodeByTitle(title, data) {
-    if (!title)
-        return;
-    let node;
-    data.some((item) => {
-        const itemTitle = item.title;
-        if (itemTitle === title) {
-            node = item;
-            return true;
-        }
-        const children = isLayerGroupOptions(item) ? item.children : undefined;
-        if (children) {
-            node = _getNodeByTitle(title, children);
-            if (node)
-                return true;
-        }
-        return false;
-    });
-    return node;
-}
-function removeNode(tree, nodeId) {
-    for (let i = 0; i < tree.length; i++) {
-        const node = tree[i];
-        const currentId = getLayerOptionIdentifier(node);
-        if (currentId === nodeId) {
-            tree.splice(i, 1);
-            return true;
-        }
-        if (isLayerGroupOptions(node) && node.children?.length) {
-            const removed = removeNode(node.children, nodeId);
-            if (removed && node.children.length === 0) {
-                delete node.children;
-            }
-            if (removed)
-                return true;
-        }
+    ngOnDestroy() {
+        this.resolution$$.unsubscribe();
+        this.network$$.unsubscribe();
     }
-    return false;
-}
-function sortLayersOptionsByZIndex(layers) {
-    layers.sort((a, b) => (a.zIndex ?? 0) - (b.zIndex ?? 0));
-}
-function getLayerParam(layerOptions) {
-    const { sourceOptions } = layerOptions;
-    if (!sourceOptions)
-        return;
-    const { type } = sourceOptions;
-    switch (type) {
-        case 'wms':
-            return (sourceOptions.params.LAYERS ??
-                sourceOptions.params['layers']);
-        case 'wmts':
-        case 'arcgisrest':
-            return sourceOptions.layer;
-        case 'imagearcgisrest':
-        case 'tilearcgisrest': {
-            const { layer, params } = sourceOptions;
-            return layer ?? params?.layer;
+    computeTooltip() {
+        const layerOptions = this.layer().options;
+        if (!layerOptions.tooltip) {
+            return this.layer().title;
         }
-        default:
-            return undefined;
-    }
-}
-/**
- * Recursively finds the parent ID of a target layer option within a tree structure.
- *
- * @param tree - The array of layer options representing the tree structure.
- * @param target - The target layer option whose parent ID is to be found.
- * @param path - The current path of IDs traversed during the search (used internally).
- * @returns The parent ID as a dot-separated string, or undefined if no parent is found.
- */
-function findParentId(tree, target, path = []) {
-    const targetId = getLayerOptionIdentifier(target);
-    for (const node of tree) {
-        const currentPath = node.id ? [...path, node.id.toString()] : [...path];
-        if (isLayerGroupOptions(node) && node.children) {
-            for (const child of node.children) {
-                // Check if the current child node matches the target node by comparing their IDs
-                if (getLayerOptionIdentifier(child) === targetId) {
-                    const targetPath = currentPath?.join('.');
-                    return targetPath === undefined || targetPath === ''
-                        ? undefined
-                        : targetPath;
+        const layerTooltip = layerOptions.tooltip;
+        const layerMetadata = layerOptions.metadata;
+        switch (layerOptions.tooltip.type) {
+            case TooltipType.TITLE:
+                return this.layer().title;
+            case TooltipType.ABSTRACT:
+                if (layerMetadata && layerMetadata.abstract) {
+                    return layerMetadata.abstract;
                 }
-            }
-            const result = findParentId(node.children, target, currentPath);
-            if (result) {
-                return result;
-            }
+                else {
+                    return this.layer().title;
+                }
+            case TooltipType.CUSTOM:
+                if (layerTooltip && layerTooltip.text) {
+                    return layerTooltip.text;
+                }
+                else {
+                    return this.layer().title;
+                }
+            default:
+                return this.layer().title;
         }
     }
-    return undefined;
+    onResolutionChange() {
+        const inResolutionRange = this.layer().isInResolutionsRange;
+        this.inResolutionRange$.next(inResolutionRange);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: LayerLegendItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.18", type: LayerLegendItemComponent, isStandalone: true, selector: "igo-layer-legend-item", inputs: { layer: { classPropertyName: "layer", publicName: "layer", isSignal: true, isRequired: false, transformFunction: null }, updateLegendOnResolutionChange: { classPropertyName: "updateLegendOnResolutionChange", publicName: "updateLegendOnResolutionChange", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<mat-list-item class=\"igo-layer-list-item\">\n  <span\n    matListItemTitle\n    class=\"igo-layer-title\"\n    [matTooltip]=\"tooltipText\"\n    matTooltipShowDelay=\"500\"\n    >{{ layer().title }}</span\n  >\n</mat-list-item>\n\n<div #legend class=\"igo-layer-legend-container\">\n  <igo-layer-legend\n    [layer]=\"layer()\"\n    [updateLegendOnResolutionChange]=\"updateLegendOnResolutionChange()\"\n  />\n</div>\n", styles: [":host{overflow:hidden}:host .igo-layer-list-item{height:48px;clear:both}:host .igo-layer-legend-container{padding-left:18px;width:calc(100% - 18px)}\n"], dependencies: [{ kind: "ngmodule", type: MatListModule }, { kind: "component", type: i1$2.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i1$2.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: LayerLegendComponent, selector: "igo-layer-legend", inputs: ["updateLegendOnResolutionChange", "layer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: LayerLegendItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'igo-layer-legend-item', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatListModule, MatTooltipModule, LayerLegendComponent], template: "<mat-list-item class=\"igo-layer-list-item\">\n  <span\n    matListItemTitle\n    class=\"igo-layer-title\"\n    [matTooltip]=\"tooltipText\"\n    matTooltipShowDelay=\"500\"\n    >{{ layer().title }}</span\n  >\n</mat-list-item>\n\n<div #legend class=\"igo-layer-legend-container\">\n  <igo-layer-legend\n    [layer]=\"layer()\"\n    [updateLegendOnResolutionChange]=\"updateLegendOnResolutionChange()\"\n  />\n</div>\n", styles: [":host{overflow:hidden}:host .igo-layer-list-item{height:48px;clear:both}:host .igo-layer-legend-container{padding-left:18px;width:calc(100% - 18px)}\n"] }]
+        }], propDecorators: { layer: [{ type: i0.Input, args: [{ isSignal: true, alias: "layer", required: false }] }], updateLegendOnResolutionChange: [{ type: i0.Input, args: [{ isSignal: true, alias: "updateLegendOnResolutionChange", required: false }] }] } });
 
 class LayerLegendListComponent {
     orderable = true;
@@ -12629,21 +12716,21 @@ class LayerLegendListComponent {
     isLayerItem = isLayerItem;
     constructor() {
         effect(() => {
-            const layers = this.computeShownLayers(this.layers());
+            const layers = this.layers() ?? [];
+            const shownLayers = this.computeShownLayers(layers);
+            this.layersLegend.set(shownLayers);
             this.handleLayersChange(layers);
         });
     }
     handleLayersChange(layers) {
-        this.layersLegend.set(layers);
-        const layersValue = this.layers();
-        this.hasVisibleOrInRangeLayers.set(layersValue
+        this.hasVisibleOrInRangeLayers.set(layers
             .filter((layer) => !isBaseLayer(layer))
             .filter((layer) => layer.displayed).length > 0);
-        this.hasVisibleAndNotInRangeLayers.set(layersValue
+        this.hasVisibleAndNotInRangeLayers.set(layers
             .filter((layer) => !isBaseLayer(layer))
             .filter((layer) => layer.visible && !layer.isInResolutionsRange)
             .length > 0);
-        this.layersInUi.set(layersValue.filter((layer) => layer.showInLayerList !== false &&
+        this.layersInUi.set(layers.filter((layer) => layer.showInLayerList !== false &&
             (!this.excludeBaseLayers() || !isBaseLayer(layer))) ?? []);
     }
     computeShownLayers(layers) {
@@ -12679,34 +12766,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
 
 class LayerLegendListBindingDirective {
     mapService = inject(MapService);
-    component;
-    layersOrResolutionChange$$;
-    layersVisibility$$;
-    constructor() {
-        this.component = inject(LayerLegendListComponent, { self: true });
-    }
+    component = inject(LayerLegendListComponent, { self: true });
+    destroyRef = inject(DestroyRef);
     ngOnInit() {
-        const map = this.mapService.getMap();
-        // Override input layers
-        this.component.setLayers([]);
-        this.layersOrResolutionChange$$ = combineLatest([
-            map.layerController.all$,
-            map.viewController.resolution$
+        const mapInstance = this.mapService.getMap();
+        combineLatest([
+            mapInstance.layerController.all$,
+            mapInstance.viewController.resolution$
         ])
-            .pipe(debounceTime(10))
-            .subscribe((bunch) => {
-            const shownLayers = bunch[0].filter((layer) => {
-                return isLayerItem(layer) && layer.showInLayerList === true;
-            });
-            this.component.setLayers(shownLayers);
-        });
-    }
-    ngOnDestroy() {
-        this.layersOrResolutionChange$$.unsubscribe();
-        if (this.layersVisibility$$ !== undefined) {
-            this.layersVisibility$$.unsubscribe();
-            this.layersVisibility$$ = undefined;
-        }
+            .pipe(debounceTime(10), switchMap$1(([layers]) => {
+            const shownLayers = layers.filter((layer) => isLayerItem(layer) && layer.showInLayerList === true);
+            if (shownLayers.length === 0) {
+                return of(shownLayers);
+            }
+            return merge(of(shownLayers), merge(...shownLayers.map((l) => l.displayed$)).pipe(map(() => [...shownLayers])));
+        }), takeUntilDestroyed(this.destroyRef))
+            .subscribe((shownLayers) => this.component.setLayers(shownLayers));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: LayerLegendListBindingDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: LayerLegendListBindingDirective, isStandalone: true, selector: "[igoLayerLegendListBinding]", ngImport: i0 });
@@ -12717,7 +12792,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                     selector: '[igoLayerLegendListBinding]',
                     standalone: true
                 }]
-        }], ctorParameters: () => [] });
+        }] });
 
 class LayerSearchComponent {
     control = new FormControl();
@@ -12862,7 +12937,7 @@ var LayerListControlsEnum;
 class LayerListComponent {
     messageService = inject(MessageService);
     toggleOpacity = false;
-    isInit;
+    expansionKey = (node) => String(node.id);
     controller = input.required(...(ngDevMode ? [{ debugName: "controller" }] : []));
     layers = input.required(...(ngDevMode ? [{ debugName: "layers" }] : []));
     isDesktop = input(undefined, ...(ngDevMode ? [{ debugName: "isDesktop" }] : []));
@@ -12870,32 +12945,31 @@ class LayerListComponent {
     selectAll = input(undefined, ...(ngDevMode ? [{ debugName: "selectAll" }] : []));
     viewerOptions = input(undefined, ...(ngDevMode ? [{ debugName: "viewerOptions" }] : []));
     activeChange = output();
-    _transformer = (layer, level) => {
-        return {
-            id: layer.id?.toString() || layer.options.name,
-            isGroup: !!isLayerGroup(layer),
-            descendantLevels: isLayerGroup(layer)
-                ? layer.descendantsLevel
-                : undefined,
-            level: level,
-            data: layer,
-            disabled: false
-        };
+    tree = viewChild(MatTree, ...(ngDevMode ? [{ debugName: "tree" }] : []));
+    childrenAccessor = (layer) => {
+        if (isLayerGroup(layer)) {
+            return layer.children
+                .filter((l) => l.showInLayerList)
+                .sort((a, b) => a.zIndex + b.zIndex);
+        }
+        return [];
     };
-    treeControl = new FlatTreeControl((node) => node.level, (node) => node.isGroup);
-    treeFlattener = new MatTreeFlattener(this._transformer, (node) => node.level, (node) => node.isGroup, (node) => node.children
-        .filter((layer) => layer.showInLayerList)
-        .sort((a, b) => a.zIndex + b.zIndex));
-    dataSource;
-    constructor() {
-        this.dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener, []);
-        effect(() => this.updateDatasource(this.layers() ?? []));
-    }
-    isGroup = (_, node) => node.isGroup;
+    treeConfig = {
+        isGroup: (layer) => isLayerGroup(layer),
+        descendantLevels: (layer) => isLayerGroup(layer) ? layer.descendantsLevel : undefined
+    };
+    isNodeGroup = (_, node) => isLayerGroup(node);
     isLayerGroup = isLayerGroup;
     isLayerItem = isLayerItem;
     isSelected = (layer) => this.controller().isSelected(layer);
     isDescendantSelection = (layer) => this.controller().isDescendantSelection(layer);
+    ngAfterViewInit() {
+        const layers = this.layers();
+        const tree = this.tree();
+        if (tree && layers) {
+            this.expandGroup(layers, tree);
+        }
+    }
     toggleActive(layer) {
         const isSelected = this.controller().isSelected(layer);
         this.controller().clearSelection();
@@ -12931,34 +13005,37 @@ class LayerListComponent {
                     ? 'draw'
                     : VECTOR_SQUARE_ICON;
     }
-    dropNode({ node, ref, position }) {
-        let nodesToDrop = [node.data];
+    trackByFn(_index, node) {
+        return String(node.id);
+    }
+    dropNode(event) {
+        const { node, ref, position } = event;
+        let nodesToDrop = [node];
         const controller = this.controller();
         if (controller.hasSelection) {
-            // The selection could contains data from the outside the TreeController
-            nodesToDrop = controller.selected.filter((layer) => !!this.findNodeByLayerId(layer.id));
+            nodesToDrop = controller.selected;
         }
-        if (node.isGroup) {
-            nodesToDrop = nodesToDrop.filter((nodeDrop) => !node.data.isDescendant(nodeDrop));
+        if (isLayerGroup(node)) {
+            nodesToDrop = nodesToDrop.filter((nodeDrop) => !node.isDescendant(nodeDrop));
         }
-        if (ref.isGroup) {
+        if (isLayerGroup(ref)) {
             const isSelected = nodesToDrop.some((nodeDrop) => nodeDrop.id === ref.id);
             if (isSelected) {
                 nodesToDrop = nodesToDrop.filter((nodeDrop) => nodeDrop.id !== ref.id);
             }
         }
-        if (!nodesToDrop.includes(node.data)) {
-            nodesToDrop.push(node.data);
+        if (!nodesToDrop.includes(node)) {
+            nodesToDrop.push(node);
         }
         switch (position) {
             case 'above':
-                controller.moveAbove(ref.data, ...nodesToDrop);
+                controller.moveAbove(ref, ...nodesToDrop);
                 break;
             case 'inside':
-                controller.moveInside(ref.data, ...nodesToDrop);
+                controller.moveInside(ref, ...nodesToDrop);
                 break;
             default:
-                controller.moveBelow(ref.data, ...nodesToDrop);
+                controller.moveBelow(ref, ...nodesToDrop);
                 break;
         }
     }
@@ -12972,48 +13049,26 @@ class LayerListComponent {
         this.controller().clearSelection();
     }
     handleNodeToggle(node) {
-        node.data.expanded = this.treeControl.isExpanded(node);
-    }
-    findNodeByLayerId(id) {
-        return this.treeControl.dataNodes.find((node) => node.id === id);
-    }
-    updateDatasource(layers) {
-        const expansionModel = this.treeControl.expansionModel;
-        this.dataSource.data = layers;
-        this.isInit
-            ? this.restoreModel(expansionModel, (node) => this.treeControl.expand(node))
-            : this.expandGroup(layers);
-        if (!this.isInit && layers.length) {
-            this.isInit = true;
+        if (!isLayerGroup(node)) {
+            return;
         }
+        const tree = this.tree();
+        tree.toggle(node);
+        node.expanded = tree.isExpanded(node);
     }
-    /** Recursive */
-    expandGroup(layers) {
+    expandGroup(layers, tree) {
         layers.forEach((layer) => {
             if (!isLayerGroup(layer)) {
                 return;
             }
             if (layer.expanded) {
-                const node = this.findNodeByLayerId(layer.id);
-                if (!node) {
-                    return;
-                }
-                this.treeControl.expand(node);
-            }
-            this.expandGroup(layer.children);
-        });
-    }
-    restoreModel(model, callback) {
-        const ids = Array.from(model['_selection']).map((value) => value['id']);
-        model.clear();
-        this.treeControl.dataNodes.forEach((node) => {
-            if (model.isSelected(node) || ids.includes(node.id)) {
-                callback(node);
+                tree.expand(layer);
             }
+            this.expandGroup(layer.children, tree);
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: LayerListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.18", type: LayerListComponent, isStandalone: true, selector: "igo-layer-list", inputs: { controller: { classPropertyName: "controller", publicName: "controller", isSignal: true, isRequired: true, transformFunction: null }, layers: { classPropertyName: "layers", publicName: "layers", isSignal: true, isRequired: true, transformFunction: null }, isDesktop: { classPropertyName: "isDesktop", publicName: "isDesktop", isSignal: true, isRequired: false, transformFunction: null }, isDragDropDisabled: { classPropertyName: "isDragDropDisabled", publicName: "isDragDropDisabled", isSignal: true, isRequired: false, transformFunction: null }, selectAll: { classPropertyName: "selectAll", publicName: "selectAll", isSignal: true, isRequired: false, transformFunction: null }, viewerOptions: { classPropertyName: "viewerOptions", publicName: "viewerOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeChange: "activeChange" }, ngImport: i0, template: "<mat-tree\n  [class.--not-desktop]=\"!isDesktop()\"\n  igoTreeDragDrop\n  [treeDragDropIsDisabled]=\"isDragDropDisabled()\"\n  [maxLevel]=\"viewerOptions()?.group?.maxHierarchyLevel\"\n  [dataSource]=\"dataSource\"\n  [treeControl]=\"treeControl\"\n  (dragStart)=\"dragStart()\"\n  (onDrop)=\"dropNode($event)\"\n  (onDropError)=\"dropNodeError($event)\"\n>\n  <!-- This is the tree node template for leaf nodes -->\n  <mat-tree-node\n    *matTreeNodeDef=\"let node\"\n    [class.--selected]=\"isSelected(node.data)\"\n    [class.--children-selected]=\"isDescendantSelection(node.data)\"\n  >\n    <igo-layer-item\n      [matTreeNodePadding]=\"node.level === 0 ? 1 : node.level\"\n      [matTreeNodePaddingIndent]=\"node.level === 0 ? 16 : 24 + 16 / node.level\"\n      class=\"tree-node-item\"\n      [layer]=\"node.data\"\n      [visible]=\"node.data.visible\"\n      [viewerOptions]=\"viewerOptions()\"\n      [selected]=\"isSelected(node.data) || isDescendantSelection(node.data)\"\n      [selectionDisabled]=\"isDescendantSelection(node.data)\"\n      (action)=\"toggleActive($event)\"\n      (selectChange)=\"handleSelect($event, node.data)\"\n    />\n  </mat-tree-node>\n  <!-- This is the tree node template for expandable nodes -->\n  <mat-tree-node\n    *matTreeNodeDef=\"let node; when: isGroup\"\n    [class.--selected]=\"isSelected(node.data)\"\n    [class.--children-selected]=\"isDescendantSelection(node.data)\"\n  >\n    <igo-layer-group\n      matTreeNodePadding\n      [matTreeNodePaddingIndent]=\"24\"\n      class=\"tree-node-item\"\n      [layer]=\"node.data\"\n      [viewerOptions]=\"viewerOptions()\"\n      [selected]=\"isSelected(node.data) || isDescendantSelection(node.data)\"\n      [selectionDisabled]=\"isDescendantSelection(node.data)\"\n      (action)=\"toggleActive($event)\"\n      (expand)=\"treeControl.toggle(node); handleNodeToggle(node)\"\n      (selectChange)=\"handleSelect($event, node.data)\"\n    >\n      <button\n        mat-icon-button\n        matTreeNodeToggle\n        class=\"layer-indicator\"\n        [attr.aria-label]=\"'Toggle ' + node.data.title\"\n        (click)=\"handleNodeToggle(node)\"\n      >\n        <mat-icon class=\"mat-icon-rtl-mirror\">\n          {{\n            treeControl.isExpanded(node)\n              ? 'keyboard_arrow_down'\n              : 'keyboard_arrow_right'\n          }}\n        </mat-icon>\n      </button>\n    </igo-layer-group>\n  </mat-tree-node>\n</mat-tree>\n", styles: [".--not-desktop igo-layer-group ::ng-deep .list-secondary-actions button,.--not-desktop igo-layer-item ::ng-deep .list-secondary-actions button{visibility:visible!important}.tree-node-item{flex:1}mat-tree-node{position:relative;min-height:40px;font:var(--mat-sys-body-medium)}mat-tree-node:hover:after,mat-tree-node.--drag-hover:after{content:\"\";position:absolute;inset:0;border-style:solid;border-width:1px;border-color:transparent;pointer-events:none}mat-tree-node.--selected igo-layer-group,mat-tree-node.--selected igo-layer-item,mat-tree-node.--dragged igo-layer-group,mat-tree-node.--dragged igo-layer-item{background-color:var(--mat-sys-secondary-fixed-dim);color:var(--mat-sys-on-tertiary-fixed)}mat-tree-node.--children-selected igo-layer-group,mat-tree-node.--children-selected igo-layer-item{background-color:var(--mat-sys-secondary-container);color:var(--mat-sys-on-tertiary-fixed)}mat-tree-node.--drag-hover:after{border-color:var(--mat-sys-tertiary)!important}mat-tree:not(.--dragging) mat-tree-node:hover:after{border-color:var(--mat-sys-tertiary)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatBadgeModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "ngmodule", type: MatDividerModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "ngmodule", type: MatSliderModule }, { kind: "ngmodule", type: MatTreeModule }, { kind: "directive", type: i8.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: i8.MatTreeNodePadding, selector: "[matTreeNodePadding]", inputs: ["matTreeNodePadding", "matTreeNodePaddingIndent"] }, { kind: "directive", type: i8.MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { kind: "component", type: i8.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i8.MatTreeNode, selector: "mat-tree-node", inputs: ["tabIndex", "disabled"], outputs: ["activation", "expandedChange"], exportAs: ["matTreeNode"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: TreeDragDropDirective, selector: "[igoTreeDragDrop]", inputs: ["treeControl", "maxLevel", "treeDragDropIsDisabled"], outputs: ["dragStart", "onDrop", "onDropError"] }, { kind: "component", type: LayerGroupComponent, selector: "igo-layer-group", inputs: ["layer", "viewerOptions", "selected", "selectionDisabled"], outputs: ["action", "visibilityChange", "expand", "selectChange"] }, { kind: "component", type: LayerItemComponent, selector: "igo-layer-item", inputs: ["layer", "visible", "selected", "selectionDisabled", "viewerOptions"], outputs: ["action", "selectChange", "visibilityChange"] }, { kind: "ngmodule", type: IgoLanguageModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.18", type: LayerListComponent, isStandalone: true, selector: "igo-layer-list", inputs: { controller: { classPropertyName: "controller", publicName: "controller", isSignal: true, isRequired: true, transformFunction: null }, layers: { classPropertyName: "layers", publicName: "layers", isSignal: true, isRequired: true, transformFunction: null }, isDesktop: { classPropertyName: "isDesktop", publicName: "isDesktop", isSignal: true, isRequired: false, transformFunction: null }, isDragDropDisabled: { classPropertyName: "isDragDropDisabled", publicName: "isDragDropDisabled", isSignal: true, isRequired: false, transformFunction: null }, selectAll: { classPropertyName: "selectAll", publicName: "selectAll", isSignal: true, isRequired: false, transformFunction: null }, viewerOptions: { classPropertyName: "viewerOptions", publicName: "viewerOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeChange: "activeChange" }, viewQueries: [{ propertyName: "tree", first: true, predicate: MatTree, descendants: true, isSignal: true }], ngImport: i0, template: "<mat-tree\n  #tree\n  [class.--not-desktop]=\"!isDesktop()\"\n  igoTreeDragDrop\n  [tree]=\"tree\"\n  [config]=\"treeConfig\"\n  [treeDragDropIsDisabled]=\"isDragDropDisabled()\"\n  [maxLevel]=\"viewerOptions()?.group?.maxHierarchyLevel\"\n  [dataSource]=\"layers()\"\n  [childrenAccessor]=\"childrenAccessor\"\n  [trackBy]=\"trackByFn\"\n  [expansionKey]=\"expansionKey\"\n  (dragStart)=\"dragStart()\"\n  (dropped)=\"dropNode($event)\"\n  (droppedError)=\"dropNodeError($event)\"\n>\n  <!-- This is the tree node template for leaf nodes -->\n  <mat-tree-node\n    #treeNode=\"matTreeNode\"\n    *matTreeNodeDef=\"let node\"\n    [class.--selected]=\"isSelected(node)\"\n    [class.--children-selected]=\"isDescendantSelection(node)\"\n  >\n    <igo-layer-item\n      [matTreeNodePadding]=\"treeNode.level === 0 ? 1 : treeNode.level\"\n      [matTreeNodePaddingIndent]=\"\n        treeNode.level === 0 ? 16 : 24 + 16 / treeNode.level\n      \"\n      class=\"tree-node-item\"\n      [layer]=\"node\"\n      [visible]=\"node.visible\"\n      [viewerOptions]=\"viewerOptions()\"\n      [selected]=\"isSelected(node) || isDescendantSelection(node)\"\n      [selectionDisabled]=\"isDescendantSelection(node)\"\n      (action)=\"toggleActive($event)\"\n      (selectChange)=\"handleSelect($event, node)\"\n    />\n  </mat-tree-node>\n  <!-- This is the tree node template for expandable nodes -->\n  <mat-tree-node\n    #treeNode=\"matTreeNode\"\n    *matTreeNodeDef=\"let node; when: isNodeGroup\"\n    [class.--selected]=\"isSelected(node)\"\n    [class.--children-selected]=\"isDescendantSelection(node)\"\n  >\n    <igo-layer-group\n      [matTreeNodePadding]=\"treeNode.level\"\n      [matTreeNodePaddingIndent]=\"24\"\n      class=\"tree-node-item\"\n      [layer]=\"node\"\n      [viewerOptions]=\"viewerOptions()\"\n      [selected]=\"isSelected(node) || isDescendantSelection(node)\"\n      [selectionDisabled]=\"isDescendantSelection(node)\"\n      (action)=\"toggleActive($event)\"\n      (expand)=\"handleNodeToggle(node)\"\n      (selectChange)=\"handleSelect($event, node)\"\n    >\n      <button\n        mat-icon-button\n        class=\"layer-indicator\"\n        [attr.aria-label]=\"'Toggle ' + node.title\"\n        (click)=\"handleNodeToggle(node)\"\n      >\n        <mat-icon class=\"mat-icon-rtl-mirror\">\n          {{\n            tree.isExpanded(node)\n              ? 'keyboard_arrow_down'\n              : 'keyboard_arrow_right'\n          }}\n        </mat-icon>\n      </button>\n    </igo-layer-group>\n  </mat-tree-node>\n</mat-tree>\n", styles: [".--not-desktop igo-layer-group ::ng-deep .list-secondary-actions button,.--not-desktop igo-layer-item ::ng-deep .list-secondary-actions button{visibility:visible!important}.tree-node-item{flex:1}mat-tree-node{position:relative;min-height:40px;font:var(--mat-sys-body-medium)}mat-tree-node:hover:after,mat-tree-node.--drag-hover:after{content:\"\";position:absolute;inset:0;border-style:solid;border-width:1px;border-color:transparent;pointer-events:none}mat-tree-node.--selected igo-layer-group,mat-tree-node.--selected igo-layer-item,mat-tree-node.--dragged igo-layer-group,mat-tree-node.--dragged igo-layer-item{background-color:var(--mat-sys-secondary-fixed-dim);color:var(--mat-sys-on-tertiary-fixed)}mat-tree-node.--children-selected igo-layer-group,mat-tree-node.--children-selected igo-layer-item{background-color:var(--mat-sys-secondary-container);color:var(--mat-sys-on-tertiary-fixed)}mat-tree-node.--drag-hover:after{border-color:var(--mat-sys-tertiary)!important}mat-tree:not(.--dragging) mat-tree-node:hover:after{border-color:var(--mat-sys-tertiary)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatBadgeModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "ngmodule", type: MatDividerModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "ngmodule", type: MatSliderModule }, { kind: "ngmodule", type: MatTreeModule }, { kind: "directive", type: i8.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: i8.MatTreeNodePadding, selector: "[matTreeNodePadding]", inputs: ["matTreeNodePadding", "matTreeNodePaddingIndent"] }, { kind: "component", type: i8.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i8.MatTreeNode, selector: "mat-tree-node", inputs: ["tabIndex", "disabled"], outputs: ["activation", "expandedChange"], exportAs: ["matTreeNode"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: TreeDragDropDirective, selector: "[igoTreeDragDrop]", inputs: ["tree", "childrenAccessor", "config", "maxLevel", "treeDragDropIsDisabled"], outputs: ["dragStart", "dropped", "droppedError"] }, { kind: "component", type: LayerGroupComponent, selector: "igo-layer-group", inputs: ["layer", "viewerOptions", "selected", "selectionDisabled"], outputs: ["action", "visibilityChange", "expand", "selectChange"] }, { kind: "component", type: LayerItemComponent, selector: "igo-layer-item", inputs: ["layer", "visible", "selected", "selectionDisabled", "viewerOptions"], outputs: ["action", "selectChange", "visibilityChange"] }, { kind: "ngmodule", type: IgoLanguageModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: LayerListComponent, decorators: [{
             type: Component,
@@ -13032,8 +13087,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                         LayerGroupComponent,
                         LayerItemComponent,
                         IgoLanguageModule
-                    ], template: "<mat-tree\n  [class.--not-desktop]=\"!isDesktop()\"\n  igoTreeDragDrop\n  [treeDragDropIsDisabled]=\"isDragDropDisabled()\"\n  [maxLevel]=\"viewerOptions()?.group?.maxHierarchyLevel\"\n  [dataSource]=\"dataSource\"\n  [treeControl]=\"treeControl\"\n  (dragStart)=\"dragStart()\"\n  (onDrop)=\"dropNode($event)\"\n  (onDropError)=\"dropNodeError($event)\"\n>\n  <!-- This is the tree node template for leaf nodes -->\n  <mat-tree-node\n    *matTreeNodeDef=\"let node\"\n    [class.--selected]=\"isSelected(node.data)\"\n    [class.--children-selected]=\"isDescendantSelection(node.data)\"\n  >\n    <igo-layer-item\n      [matTreeNodePadding]=\"node.level === 0 ? 1 : node.level\"\n      [matTreeNodePaddingIndent]=\"node.level === 0 ? 16 : 24 + 16 / node.level\"\n      class=\"tree-node-item\"\n      [layer]=\"node.data\"\n      [visible]=\"node.data.visible\"\n      [viewerOptions]=\"viewerOptions()\"\n      [selected]=\"isSelected(node.data) || isDescendantSelection(node.data)\"\n      [selectionDisabled]=\"isDescendantSelection(node.data)\"\n      (action)=\"toggleActive($event)\"\n      (selectChange)=\"handleSelect($event, node.data)\"\n    />\n  </mat-tree-node>\n  <!-- This is the tree node template for expandable nodes -->\n  <mat-tree-node\n    *matTreeNodeDef=\"let node; when: isGroup\"\n    [class.--selected]=\"isSelected(node.data)\"\n    [class.--children-selected]=\"isDescendantSelection(node.data)\"\n  >\n    <igo-layer-group\n      matTreeNodePadding\n      [matTreeNodePaddingIndent]=\"24\"\n      class=\"tree-node-item\"\n      [layer]=\"node.data\"\n      [viewerOptions]=\"viewerOptions()\"\n      [selected]=\"isSelected(node.data) || isDescendantSelection(node.data)\"\n      [selectionDisabled]=\"isDescendantSelection(node.data)\"\n      (action)=\"toggleActive($event)\"\n      (expand)=\"treeControl.toggle(node); handleNodeToggle(node)\"\n      (selectChange)=\"handleSelect($event, node.data)\"\n    >\n      <button\n        mat-icon-button\n        matTreeNodeToggle\n        class=\"layer-indicator\"\n        [attr.aria-label]=\"'Toggle ' + node.data.title\"\n        (click)=\"handleNodeToggle(node)\"\n      >\n        <mat-icon class=\"mat-icon-rtl-mirror\">\n          {{\n            treeControl.isExpanded(node)\n              ? 'keyboard_arrow_down'\n              : 'keyboard_arrow_right'\n          }}\n        </mat-icon>\n      </button>\n    </igo-layer-group>\n  </mat-tree-node>\n</mat-tree>\n", styles: [".--not-desktop igo-layer-group ::ng-deep .list-secondary-actions button,.--not-desktop igo-layer-item ::ng-deep .list-secondary-actions button{visibility:visible!important}.tree-node-item{flex:1}mat-tree-node{position:relative;min-height:40px;font:var(--mat-sys-body-medium)}mat-tree-node:hover:after,mat-tree-node.--drag-hover:after{content:\"\";position:absolute;inset:0;border-style:solid;border-width:1px;border-color:transparent;pointer-events:none}mat-tree-node.--selected igo-layer-group,mat-tree-node.--selected igo-layer-item,mat-tree-node.--dragged igo-layer-group,mat-tree-node.--dragged igo-layer-item{background-color:var(--mat-sys-secondary-fixed-dim);color:var(--mat-sys-on-tertiary-fixed)}mat-tree-node.--children-selected igo-layer-group,mat-tree-node.--children-selected igo-layer-item{background-color:var(--mat-sys-secondary-container);color:var(--mat-sys-on-tertiary-fixed)}mat-tree-node.--drag-hover:after{border-color:var(--mat-sys-tertiary)!important}mat-tree:not(.--dragging) mat-tree-node:hover:after{border-color:var(--mat-sys-tertiary)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { controller: [{ type: i0.Input, args: [{ isSignal: true, alias: "controller", required: true }] }], layers: [{ type: i0.Input, args: [{ isSignal: true, alias: "layers", required: true }] }], isDesktop: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDesktop", required: false }] }], isDragDropDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDragDropDisabled", required: false }] }], selectAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAll", required: false }] }], viewerOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewerOptions", required: false }] }], activeChange: [{ type: i0.Output, args: ["activeChange"] }] } });
+                    ], template: "<mat-tree\n  #tree\n  [class.--not-desktop]=\"!isDesktop()\"\n  igoTreeDragDrop\n  [tree]=\"tree\"\n  [config]=\"treeConfig\"\n  [treeDragDropIsDisabled]=\"isDragDropDisabled()\"\n  [maxLevel]=\"viewerOptions()?.group?.maxHierarchyLevel\"\n  [dataSource]=\"layers()\"\n  [childrenAccessor]=\"childrenAccessor\"\n  [trackBy]=\"trackByFn\"\n  [expansionKey]=\"expansionKey\"\n  (dragStart)=\"dragStart()\"\n  (dropped)=\"dropNode($event)\"\n  (droppedError)=\"dropNodeError($event)\"\n>\n  <!-- This is the tree node template for leaf nodes -->\n  <mat-tree-node\n    #treeNode=\"matTreeNode\"\n    *matTreeNodeDef=\"let node\"\n    [class.--selected]=\"isSelected(node)\"\n    [class.--children-selected]=\"isDescendantSelection(node)\"\n  >\n    <igo-layer-item\n      [matTreeNodePadding]=\"treeNode.level === 0 ? 1 : treeNode.level\"\n      [matTreeNodePaddingIndent]=\"\n        treeNode.level === 0 ? 16 : 24 + 16 / treeNode.level\n      \"\n      class=\"tree-node-item\"\n      [layer]=\"node\"\n      [visible]=\"node.visible\"\n      [viewerOptions]=\"viewerOptions()\"\n      [selected]=\"isSelected(node) || isDescendantSelection(node)\"\n      [selectionDisabled]=\"isDescendantSelection(node)\"\n      (action)=\"toggleActive($event)\"\n      (selectChange)=\"handleSelect($event, node)\"\n    />\n  </mat-tree-node>\n  <!-- This is the tree node template for expandable nodes -->\n  <mat-tree-node\n    #treeNode=\"matTreeNode\"\n    *matTreeNodeDef=\"let node; when: isNodeGroup\"\n    [class.--selected]=\"isSelected(node)\"\n    [class.--children-selected]=\"isDescendantSelection(node)\"\n  >\n    <igo-layer-group\n      [matTreeNodePadding]=\"treeNode.level\"\n      [matTreeNodePaddingIndent]=\"24\"\n      class=\"tree-node-item\"\n      [layer]=\"node\"\n      [viewerOptions]=\"viewerOptions()\"\n      [selected]=\"isSelected(node) || isDescendantSelection(node)\"\n      [selectionDisabled]=\"isDescendantSelection(node)\"\n      (action)=\"toggleActive($event)\"\n      (expand)=\"handleNodeToggle(node)\"\n      (selectChange)=\"handleSelect($event, node)\"\n    >\n      <button\n        mat-icon-button\n        class=\"layer-indicator\"\n        [attr.aria-label]=\"'Toggle ' + node.title\"\n        (click)=\"handleNodeToggle(node)\"\n      >\n        <mat-icon class=\"mat-icon-rtl-mirror\">\n          {{\n            tree.isExpanded(node)\n              ? 'keyboard_arrow_down'\n              : 'keyboard_arrow_right'\n          }}\n        </mat-icon>\n      </button>\n    </igo-layer-group>\n  </mat-tree-node>\n</mat-tree>\n", styles: [".--not-desktop igo-layer-group ::ng-deep .list-secondary-actions button,.--not-desktop igo-layer-item ::ng-deep .list-secondary-actions button{visibility:visible!important}.tree-node-item{flex:1}mat-tree-node{position:relative;min-height:40px;font:var(--mat-sys-body-medium)}mat-tree-node:hover:after,mat-tree-node.--drag-hover:after{content:\"\";position:absolute;inset:0;border-style:solid;border-width:1px;border-color:transparent;pointer-events:none}mat-tree-node.--selected igo-layer-group,mat-tree-node.--selected igo-layer-item,mat-tree-node.--dragged igo-layer-group,mat-tree-node.--dragged igo-layer-item{background-color:var(--mat-sys-secondary-fixed-dim);color:var(--mat-sys-on-tertiary-fixed)}mat-tree-node.--children-selected igo-layer-group,mat-tree-node.--children-selected igo-layer-item{background-color:var(--mat-sys-secondary-container);color:var(--mat-sys-on-tertiary-fixed)}mat-tree-node.--drag-hover:after{border-color:var(--mat-sys-tertiary)!important}mat-tree:not(.--dragging) mat-tree-node:hover:after{border-color:var(--mat-sys-tertiary)}\n"] }]
+        }], propDecorators: { controller: [{ type: i0.Input, args: [{ isSignal: true, alias: "controller", required: true }] }], layers: [{ type: i0.Input, args: [{ isSignal: true, alias: "layers", required: true }] }], isDesktop: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDesktop", required: false }] }], isDragDropDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDragDropDisabled", required: false }] }], selectAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAll", required: false }] }], viewerOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewerOptions", required: false }] }], activeChange: [{ type: i0.Output, args: ["activeChange"] }], tree: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatTree), { isSignal: true }] }] } });
 
 class LayerUnavailableComponent {
     layerOptions = input(undefined, ...(ngDevMode ? [{ debugName: "layerOptions" }] : []));
@@ -13122,6 +13177,7 @@ class LayerViewerBottomActionsComponent {
         return isLayerGroup(layer);
     }
     isLayerItem = isLayerItem;
+    isLayerGroup = isLayerGroup;
     handleRename() {
         const layer = this.selected[0];
         this.layerListToolService.renameGroup(layer).subscribe((name) => {
@@ -13238,7 +13294,7 @@ class LayerViewerBottomActionsComponent {
         return layer.options.removable !== false;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: LayerViewerBottomActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: LayerViewerBottomActionsComponent, isStandalone: true, selector: "igo-layer-viewer-bottom-actions", inputs: { map: { classPropertyName: "map", publicName: "map", isSignal: true, isRequired: true, transformFunction: null }, controller: { classPropertyName: "controller", publicName: "controller", isSignal: true, isRequired: true, transformFunction: null }, searchTerm: { classPropertyName: "searchTerm", publicName: "searchTerm", isSignal: true, isRequired: true, transformFunction: null }, viewerOptions: { classPropertyName: "viewerOptions", publicName: "viewerOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { layerChange: "layerChange" }, providers: [LayerListToolService, FormDialogService], ngImport: i0, template: "<igo-panel\n  class=\"igo-layer-actions-container\"\n  [title]=\"\n    hasMultipleSelection\n      ? ('igo.geo.layer.tools' | translate)\n      : selected[0].title\n  \"\n>\n  <div class=\"igo-layer-button-group\">\n    @if (isLayersRemovable(selected)) {\n      <button\n        class=\"delete-button\"\n        mat-icon-button\n        color=\"warn\"\n        tooltip-position=\"below\"\n        matTooltipShowDelay=\"500\"\n        [matTooltip]=\"\n          (hasMultipleSelection\n            ? isLayersRemovable(selected)\n              ? ('igo.geo.layer.removeSelectedLayers' | translate)\n              : ('igo.geo.layer.removeSelectedLayersRestriction' | translate)\n            : 'igo.geo.layer.removeLayer'\n          ) | translate\n        \"\n        (click)=\"removeLayers()\"\n      >\n        <mat-icon\n          aria-hidden=\"false\"\n          [matBadge]=\"'!'\"\n          matBadgeColor=\"warn\"\n          matBadgeSize=\"medium\"\n          [matBadgeHidden]=\"\n            !hasMultipleSelection || isLayersRemovable(selected)\n          \"\n          >delete</mat-icon\n        >\n      </button>\n    }\n\n    @if (hasMultipleSelection) {\n      <button\n        class=\"eye-button\"\n        mat-icon-button\n        color=\"primary\"\n        tooltip-position=\"below\"\n        matTooltipShowDelay=\"500\"\n        [disabled]=\"selected.length === 0\"\n        [matTooltip]=\"\n          allSelectionVisibilityHidden\n            ? ('igo.geo.layer.showSelectedLayers' | translate)\n            : ('igo.geo.layer.hideSelectedLayers' | translate)\n        \"\n        (click)=\"toggleSelectionVisibility()\"\n      >\n        <mat-icon>{{\n          allSelectionVisibilityHidden ? 'visibility_off' : 'visibility'\n        }}</mat-icon>\n      </button>\n    }\n\n    <button\n      class=\"down-button\"\n      mat-icon-button\n      color=\"primary\"\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"\n        searchTerm()\n          ? ('igo.geo.layer.filterLowerLayer' | translate)\n          : ('igo.geo.layer.lowerLayer' | translate)\n      \"\n      [disabled]=\"!isSelectionLowerable\"\n      (click)=\"lowerSelection()\"\n    >\n      <mat-icon\n        aria-hidden=\"false\"\n        [matBadge]=\"searchTerm() ? '!' : ''\"\n        matBadgeColor=\"warn\"\n        matBadgeSize=\"medium\"\n        [matBadgeHidden]=\"!isSelectionLowerable\"\n        >arrow_downward</mat-icon\n      >\n    </button>\n\n    <button\n      class=\"up-button\"\n      color=\"primary\"\n      mat-icon-button\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"\n        searchTerm()\n          ? ('igo.geo.layer.filterRaiseLayer' | translate)\n          : ('igo.geo.layer.raiseLayer' | translate)\n      \"\n      [disabled]=\"!isSelectionRaisable\"\n      (click)=\"raiseSelection()\"\n    >\n      <mat-icon\n        aria-hidden=\"false\"\n        [matBadge]=\"searchTerm() ? '!' : ''\"\n        matBadgeColor=\"warn\"\n        matBadgeSize=\"medium\"\n        [matBadgeHidden]=\"!isSelectionRaisable\"\n      >\n        arrow_upward\n      </mat-icon>\n    </button>\n\n    @if (controller().selected.length === 1) {\n      <button\n        class=\"opacity-button\"\n        color=\"primary\"\n        mat-icon-button\n        tooltip-position=\"below\"\n        matTooltipShowDelay=\"500\"\n        [matMenuTriggerFor]=\"opacityMenu\"\n        [matTooltip]=\"'igo.geo.layer.opacity' | translate\"\n      >\n        <mat-icon\n          aria-hidden=\"false\"\n          [matBadge]=\"opacity === 100 ? null : opacity\"\n          matBadgeColor=\"primary\"\n          matBadgeSize=\"medium\"\n          >opacity</mat-icon\n        >\n      </button>\n      <mat-menu #opacityMenu=\"matMenu\" class=\"panel-opacity-menu\">\n        <mat-slider\n          id=\"opacity-slider\"\n          color=\"primary\"\n          discrete\n          step=\"5\"\n          [min]=\"0\"\n          [max]=\"100\"\n          [matTooltip]=\"'igo.geo.layer.opacity' | translate\"\n          (click)=\"$event.stopPropagation()\"\n          matTooltipShowDelay=\"500\"\n          tooltip-position=\"below\"\n          #ngSlider\n          ><input\n            matSliderThumb\n            [value]=\"opacity\"\n            (input)=\"\n              changeOpacity({\n                source: ngSliderThumb,\n                parent: ngSlider,\n                value: ngSliderThumb.value\n              })\n            \"\n            #ngSliderThumb=\"matSliderThumb\"\n          />\n        </mat-slider>\n      </mat-menu>\n    }\n\n    @if (isExtentsValid()) {\n      <button\n        class=\"zoomLayer-button\"\n        color=\"primary\"\n        mat-icon-button\n        tooltip-position=\"below\"\n        matTooltipShowDelay=\"500\"\n        [matTooltip]=\"\n          (hasMultipleSelection\n            ? 'igo.geo.layer.zoomLayers'\n            : 'igo.geo.layer.zoomLayer'\n          ) | translate\n        \"\n        (click)=\"zoomLayersExtents()\"\n      >\n        <mat-icon matBadgeColor=\"primary\" matBadgeSize=\"medium\"\n          >frame_inspect</mat-icon\n        >\n      </button>\n    }\n\n    @if (canRename) {\n      <button\n        color=\"primary\"\n        mat-icon-button\n        tooltip-position=\"below\"\n        matTooltipShowDelay=\"500\"\n        [matTooltip]=\"'igo.geo.layer.group.rename' | translate\"\n        (click)=\"handleRename()\"\n      >\n        <mat-icon>edit</mat-icon>\n      </button>\n    }\n\n    <ng-content />\n  </div>\n</igo-panel>\n", styles: [".igo-layer-actions-container{padding:0 6px 0 4px}.igo-layer-actions-container>div{text-align:center}.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:4px}igo-panel{height:unset}::ng-deep .panel-opacity-menu{overflow:visible!important}::ng-deep .panel-opacity-menu #opacity-slider{margin:0 16px}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatBadgeModule }, { kind: "directive", type: i4$4.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: i3$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatSliderModule }, { kind: "component", type: i6.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i6.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }, { kind: "ngmodule", type: IgoLanguageModule }, { kind: "component", type: PanelComponent, selector: "igo-panel", inputs: ["title", "withHeader", "cursorPointer"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: LayerViewerBottomActionsComponent, isStandalone: true, selector: "igo-layer-viewer-bottom-actions", inputs: { map: { classPropertyName: "map", publicName: "map", isSignal: true, isRequired: true, transformFunction: null }, controller: { classPropertyName: "controller", publicName: "controller", isSignal: true, isRequired: true, transformFunction: null }, searchTerm: { classPropertyName: "searchTerm", publicName: "searchTerm", isSignal: true, isRequired: true, transformFunction: null }, viewerOptions: { classPropertyName: "viewerOptions", publicName: "viewerOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { layerChange: "layerChange" }, providers: [LayerListToolService, FormDialogService], ngImport: i0, template: "<igo-panel\n  class=\"igo-layer-actions-container\"\n  [title]=\"\n    hasMultipleSelection\n      ? ('igo.geo.layer.tools' | translate)\n      : selected[0].title\n  \"\n>\n  <div class=\"igo-layer-button-group\">\n    @if (isLayersRemovable(selected)) {\n      <button\n        class=\"delete-button\"\n        mat-icon-button\n        color=\"warn\"\n        tooltip-position=\"below\"\n        matTooltipShowDelay=\"500\"\n        [matTooltip]=\"\n          (hasMultipleSelection\n            ? isLayersRemovable(selected)\n              ? ('igo.geo.layer.removeSelectedLayers' | translate)\n              : ('igo.geo.layer.removeSelectedLayersRestriction' | translate)\n            : isLayerGroup(selected[0])\n              ? ('igo.geo.layer.group.remove' | translate)\n              : ('igo.geo.layer.removeLayer' | translate)\n          ) | translate\n        \"\n        (click)=\"removeLayers()\"\n      >\n        <mat-icon\n          aria-hidden=\"false\"\n          [matBadge]=\"'!'\"\n          matBadgeColor=\"warn\"\n          matBadgeSize=\"medium\"\n          [matBadgeHidden]=\"\n            !hasMultipleSelection || isLayersRemovable(selected)\n          \"\n          >delete</mat-icon\n        >\n      </button>\n    }\n\n    @if (hasMultipleSelection) {\n      <button\n        class=\"eye-button\"\n        mat-icon-button\n        color=\"primary\"\n        tooltip-position=\"below\"\n        matTooltipShowDelay=\"500\"\n        [disabled]=\"selected.length === 0\"\n        [matTooltip]=\"\n          allSelectionVisibilityHidden\n            ? ('igo.geo.layer.showSelectedLayers' | translate)\n            : ('igo.geo.layer.hideSelectedLayers' | translate)\n        \"\n        (click)=\"toggleSelectionVisibility()\"\n      >\n        <mat-icon>{{\n          allSelectionVisibilityHidden ? 'visibility_off' : 'visibility'\n        }}</mat-icon>\n      </button>\n    }\n\n    <button\n      class=\"down-button\"\n      mat-icon-button\n      color=\"primary\"\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"\n        searchTerm()\n          ? ('igo.geo.layer.filterLowerLayer' | translate)\n          : ('igo.geo.layer.lowerLayer' | translate)\n      \"\n      [disabled]=\"!isSelectionLowerable\"\n      (click)=\"lowerSelection()\"\n    >\n      <mat-icon\n        aria-hidden=\"false\"\n        [matBadge]=\"searchTerm() ? '!' : ''\"\n        matBadgeColor=\"warn\"\n        matBadgeSize=\"medium\"\n        [matBadgeHidden]=\"!isSelectionLowerable\"\n        >arrow_downward</mat-icon\n      >\n    </button>\n\n    <button\n      class=\"up-button\"\n      color=\"primary\"\n      mat-icon-button\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"\n        searchTerm()\n          ? ('igo.geo.layer.filterRaiseLayer' | translate)\n          : ('igo.geo.layer.raiseLayer' | translate)\n      \"\n      [disabled]=\"!isSelectionRaisable\"\n      (click)=\"raiseSelection()\"\n    >\n      <mat-icon\n        aria-hidden=\"false\"\n        [matBadge]=\"searchTerm() ? '!' : ''\"\n        matBadgeColor=\"warn\"\n        matBadgeSize=\"medium\"\n        [matBadgeHidden]=\"!isSelectionRaisable\"\n      >\n        arrow_upward\n      </mat-icon>\n    </button>\n\n    @if (controller().selected.length === 1) {\n      <button\n        class=\"opacity-button\"\n        color=\"primary\"\n        mat-icon-button\n        tooltip-position=\"below\"\n        matTooltipShowDelay=\"500\"\n        [matMenuTriggerFor]=\"opacityMenu\"\n        [matTooltip]=\"'igo.geo.layer.opacity' | translate\"\n      >\n        <mat-icon\n          aria-hidden=\"false\"\n          [matBadge]=\"opacity === 100 ? null : opacity\"\n          matBadgeColor=\"primary\"\n          matBadgeSize=\"medium\"\n          >opacity</mat-icon\n        >\n      </button>\n      <mat-menu #opacityMenu=\"matMenu\" class=\"panel-opacity-menu\">\n        <mat-slider\n          id=\"opacity-slider\"\n          color=\"primary\"\n          discrete\n          step=\"5\"\n          [min]=\"0\"\n          [max]=\"100\"\n          [matTooltip]=\"'igo.geo.layer.opacity' | translate\"\n          (click)=\"$event.stopPropagation()\"\n          matTooltipShowDelay=\"500\"\n          tooltip-position=\"below\"\n          #ngSlider\n          ><input\n            matSliderThumb\n            [value]=\"opacity\"\n            (input)=\"\n              changeOpacity({\n                source: ngSliderThumb,\n                parent: ngSlider,\n                value: ngSliderThumb.value\n              })\n            \"\n            #ngSliderThumb=\"matSliderThumb\"\n          />\n        </mat-slider>\n      </mat-menu>\n    }\n\n    @if (isExtentsValid()) {\n      <button\n        class=\"zoomLayer-button\"\n        color=\"primary\"\n        mat-icon-button\n        tooltip-position=\"below\"\n        matTooltipShowDelay=\"500\"\n        [matTooltip]=\"\n          (hasMultipleSelection\n            ? 'igo.geo.layer.zoomLayers'\n            : 'igo.geo.layer.zoomLayer'\n          ) | translate\n        \"\n        (click)=\"zoomLayersExtents()\"\n      >\n        <mat-icon matBadgeColor=\"primary\" matBadgeSize=\"medium\"\n          >frame_inspect</mat-icon\n        >\n      </button>\n    }\n\n    @if (canRename) {\n      <button\n        color=\"primary\"\n        mat-icon-button\n        tooltip-position=\"below\"\n        matTooltipShowDelay=\"500\"\n        [matTooltip]=\"'igo.geo.layer.group.rename' | translate\"\n        (click)=\"handleRename()\"\n      >\n        <mat-icon>edit</mat-icon>\n      </button>\n    }\n\n    <ng-content />\n  </div>\n</igo-panel>\n", styles: [".igo-layer-actions-container{padding:0 6px 0 4px}.igo-layer-actions-container>div{text-align:center}.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:4px}igo-panel{height:unset}::ng-deep .panel-opacity-menu{overflow:visible!important}::ng-deep .panel-opacity-menu #opacity-slider{margin:0 16px}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatBadgeModule }, { kind: "directive", type: i4$4.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: i3$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatSliderModule }, { kind: "component", type: i6.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i6.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }, { kind: "ngmodule", type: IgoLanguageModule }, { kind: "component", type: PanelComponent, selector: "igo-panel", inputs: ["title", "withHeader", "cursorPointer"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: LayerViewerBottomActionsComponent, decorators: [{
             type: Component,
@@ -13251,7 +13307,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                         MatSliderModule,
                         IgoLanguageModule,
                         PanelComponent
-                    ], providers: [LayerListToolService, FormDialogService], template: "<igo-panel\n  class=\"igo-layer-actions-container\"\n  [title]=\"\n    hasMultipleSelection\n      ? ('igo.geo.layer.tools' | translate)\n      : selected[0].title\n  \"\n>\n  <div class=\"igo-layer-button-group\">\n    @if (isLayersRemovable(selected)) {\n      <button\n        class=\"delete-button\"\n        mat-icon-button\n        color=\"warn\"\n        tooltip-position=\"below\"\n        matTooltipShowDelay=\"500\"\n        [matTooltip]=\"\n          (hasMultipleSelection\n            ? isLayersRemovable(selected)\n              ? ('igo.geo.layer.removeSelectedLayers' | translate)\n              : ('igo.geo.layer.removeSelectedLayersRestriction' | translate)\n            : 'igo.geo.layer.removeLayer'\n          ) | translate\n        \"\n        (click)=\"removeLayers()\"\n      >\n        <mat-icon\n          aria-hidden=\"false\"\n          [matBadge]=\"'!'\"\n          matBadgeColor=\"warn\"\n          matBadgeSize=\"medium\"\n          [matBadgeHidden]=\"\n            !hasMultipleSelection || isLayersRemovable(selected)\n          \"\n          >delete</mat-icon\n        >\n      </button>\n    }\n\n    @if (hasMultipleSelection) {\n      <button\n        class=\"eye-button\"\n        mat-icon-button\n        color=\"primary\"\n        tooltip-position=\"below\"\n        matTooltipShowDelay=\"500\"\n        [disabled]=\"selected.length === 0\"\n        [matTooltip]=\"\n          allSelectionVisibilityHidden\n            ? ('igo.geo.layer.showSelectedLayers' | translate)\n            : ('igo.geo.layer.hideSelectedLayers' | translate)\n        \"\n        (click)=\"toggleSelectionVisibility()\"\n      >\n        <mat-icon>{{\n          allSelectionVisibilityHidden ? 'visibility_off' : 'visibility'\n        }}</mat-icon>\n      </button>\n    }\n\n    <button\n      class=\"down-button\"\n      mat-icon-button\n      color=\"primary\"\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"\n        searchTerm()\n          ? ('igo.geo.layer.filterLowerLayer' | translate)\n          : ('igo.geo.layer.lowerLayer' | translate)\n      \"\n      [disabled]=\"!isSelectionLowerable\"\n      (click)=\"lowerSelection()\"\n    >\n      <mat-icon\n        aria-hidden=\"false\"\n        [matBadge]=\"searchTerm() ? '!' : ''\"\n        matBadgeColor=\"warn\"\n        matBadgeSize=\"medium\"\n        [matBadgeHidden]=\"!isSelectionLowerable\"\n        >arrow_downward</mat-icon\n      >\n    </button>\n\n    <button\n      class=\"up-button\"\n      color=\"primary\"\n      mat-icon-button\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"\n        searchTerm()\n          ? ('igo.geo.layer.filterRaiseLayer' | translate)\n          : ('igo.geo.layer.raiseLayer' | translate)\n      \"\n      [disabled]=\"!isSelectionRaisable\"\n      (click)=\"raiseSelection()\"\n    >\n      <mat-icon\n        aria-hidden=\"false\"\n        [matBadge]=\"searchTerm() ? '!' : ''\"\n        matBadgeColor=\"warn\"\n        matBadgeSize=\"medium\"\n        [matBadgeHidden]=\"!isSelectionRaisable\"\n      >\n        arrow_upward\n      </mat-icon>\n    </button>\n\n    @if (controller().selected.length === 1) {\n      <button\n        class=\"opacity-button\"\n        color=\"primary\"\n        mat-icon-button\n        tooltip-position=\"below\"\n        matTooltipShowDelay=\"500\"\n        [matMenuTriggerFor]=\"opacityMenu\"\n        [matTooltip]=\"'igo.geo.layer.opacity' | translate\"\n      >\n        <mat-icon\n          aria-hidden=\"false\"\n          [matBadge]=\"opacity === 100 ? null : opacity\"\n          matBadgeColor=\"primary\"\n          matBadgeSize=\"medium\"\n          >opacity</mat-icon\n        >\n      </button>\n      <mat-menu #opacityMenu=\"matMenu\" class=\"panel-opacity-menu\">\n        <mat-slider\n          id=\"opacity-slider\"\n          color=\"primary\"\n          discrete\n          step=\"5\"\n          [min]=\"0\"\n          [max]=\"100\"\n          [matTooltip]=\"'igo.geo.layer.opacity' | translate\"\n          (click)=\"$event.stopPropagation()\"\n          matTooltipShowDelay=\"500\"\n          tooltip-position=\"below\"\n          #ngSlider\n          ><input\n            matSliderThumb\n            [value]=\"opacity\"\n            (input)=\"\n              changeOpacity({\n                source: ngSliderThumb,\n                parent: ngSlider,\n                value: ngSliderThumb.value\n              })\n            \"\n            #ngSliderThumb=\"matSliderThumb\"\n          />\n        </mat-slider>\n      </mat-menu>\n    }\n\n    @if (isExtentsValid()) {\n      <button\n        class=\"zoomLayer-button\"\n        color=\"primary\"\n        mat-icon-button\n        tooltip-position=\"below\"\n        matTooltipShowDelay=\"500\"\n        [matTooltip]=\"\n          (hasMultipleSelection\n            ? 'igo.geo.layer.zoomLayers'\n            : 'igo.geo.layer.zoomLayer'\n          ) | translate\n        \"\n        (click)=\"zoomLayersExtents()\"\n      >\n        <mat-icon matBadgeColor=\"primary\" matBadgeSize=\"medium\"\n          >frame_inspect</mat-icon\n        >\n      </button>\n    }\n\n    @if (canRename) {\n      <button\n        color=\"primary\"\n        mat-icon-button\n        tooltip-position=\"below\"\n        matTooltipShowDelay=\"500\"\n        [matTooltip]=\"'igo.geo.layer.group.rename' | translate\"\n        (click)=\"handleRename()\"\n      >\n        <mat-icon>edit</mat-icon>\n      </button>\n    }\n\n    <ng-content />\n  </div>\n</igo-panel>\n", styles: [".igo-layer-actions-container{padding:0 6px 0 4px}.igo-layer-actions-container>div{text-align:center}.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:4px}igo-panel{height:unset}::ng-deep .panel-opacity-menu{overflow:visible!important}::ng-deep .panel-opacity-menu #opacity-slider{margin:0 16px}\n"] }]
+                    ], providers: [LayerListToolService, FormDialogService], template: "<igo-panel\n  class=\"igo-layer-actions-container\"\n  [title]=\"\n    hasMultipleSelection\n      ? ('igo.geo.layer.tools' | translate)\n      : selected[0].title\n  \"\n>\n  <div class=\"igo-layer-button-group\">\n    @if (isLayersRemovable(selected)) {\n      <button\n        class=\"delete-button\"\n        mat-icon-button\n        color=\"warn\"\n        tooltip-position=\"below\"\n        matTooltipShowDelay=\"500\"\n        [matTooltip]=\"\n          (hasMultipleSelection\n            ? isLayersRemovable(selected)\n              ? ('igo.geo.layer.removeSelectedLayers' | translate)\n              : ('igo.geo.layer.removeSelectedLayersRestriction' | translate)\n            : isLayerGroup(selected[0])\n              ? ('igo.geo.layer.group.remove' | translate)\n              : ('igo.geo.layer.removeLayer' | translate)\n          ) | translate\n        \"\n        (click)=\"removeLayers()\"\n      >\n        <mat-icon\n          aria-hidden=\"false\"\n          [matBadge]=\"'!'\"\n          matBadgeColor=\"warn\"\n          matBadgeSize=\"medium\"\n          [matBadgeHidden]=\"\n            !hasMultipleSelection || isLayersRemovable(selected)\n          \"\n          >delete</mat-icon\n        >\n      </button>\n    }\n\n    @if (hasMultipleSelection) {\n      <button\n        class=\"eye-button\"\n        mat-icon-button\n        color=\"primary\"\n        tooltip-position=\"below\"\n        matTooltipShowDelay=\"500\"\n        [disabled]=\"selected.length === 0\"\n        [matTooltip]=\"\n          allSelectionVisibilityHidden\n            ? ('igo.geo.layer.showSelectedLayers' | translate)\n            : ('igo.geo.layer.hideSelectedLayers' | translate)\n        \"\n        (click)=\"toggleSelectionVisibility()\"\n      >\n        <mat-icon>{{\n          allSelectionVisibilityHidden ? 'visibility_off' : 'visibility'\n        }}</mat-icon>\n      </button>\n    }\n\n    <button\n      class=\"down-button\"\n      mat-icon-button\n      color=\"primary\"\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"\n        searchTerm()\n          ? ('igo.geo.layer.filterLowerLayer' | translate)\n          : ('igo.geo.layer.lowerLayer' | translate)\n      \"\n      [disabled]=\"!isSelectionLowerable\"\n      (click)=\"lowerSelection()\"\n    >\n      <mat-icon\n        aria-hidden=\"false\"\n        [matBadge]=\"searchTerm() ? '!' : ''\"\n        matBadgeColor=\"warn\"\n        matBadgeSize=\"medium\"\n        [matBadgeHidden]=\"!isSelectionLowerable\"\n        >arrow_downward</mat-icon\n      >\n    </button>\n\n    <button\n      class=\"up-button\"\n      color=\"primary\"\n      mat-icon-button\n      tooltip-position=\"below\"\n      matTooltipShowDelay=\"500\"\n      [matTooltip]=\"\n        searchTerm()\n          ? ('igo.geo.layer.filterRaiseLayer' | translate)\n          : ('igo.geo.layer.raiseLayer' | translate)\n      \"\n      [disabled]=\"!isSelectionRaisable\"\n      (click)=\"raiseSelection()\"\n    >\n      <mat-icon\n        aria-hidden=\"false\"\n        [matBadge]=\"searchTerm() ? '!' : ''\"\n        matBadgeColor=\"warn\"\n        matBadgeSize=\"medium\"\n        [matBadgeHidden]=\"!isSelectionRaisable\"\n      >\n        arrow_upward\n      </mat-icon>\n    </button>\n\n    @if (controller().selected.length === 1) {\n      <button\n        class=\"opacity-button\"\n        color=\"primary\"\n        mat-icon-button\n        tooltip-position=\"below\"\n        matTooltipShowDelay=\"500\"\n        [matMenuTriggerFor]=\"opacityMenu\"\n        [matTooltip]=\"'igo.geo.layer.opacity' | translate\"\n      >\n        <mat-icon\n          aria-hidden=\"false\"\n          [matBadge]=\"opacity === 100 ? null : opacity\"\n          matBadgeColor=\"primary\"\n          matBadgeSize=\"medium\"\n          >opacity</mat-icon\n        >\n      </button>\n      <mat-menu #opacityMenu=\"matMenu\" class=\"panel-opacity-menu\">\n        <mat-slider\n          id=\"opacity-slider\"\n          color=\"primary\"\n          discrete\n          step=\"5\"\n          [min]=\"0\"\n          [max]=\"100\"\n          [matTooltip]=\"'igo.geo.layer.opacity' | translate\"\n          (click)=\"$event.stopPropagation()\"\n          matTooltipShowDelay=\"500\"\n          tooltip-position=\"below\"\n          #ngSlider\n          ><input\n            matSliderThumb\n            [value]=\"opacity\"\n            (input)=\"\n              changeOpacity({\n                source: ngSliderThumb,\n                parent: ngSlider,\n                value: ngSliderThumb.value\n              })\n            \"\n            #ngSliderThumb=\"matSliderThumb\"\n          />\n        </mat-slider>\n      </mat-menu>\n    }\n\n    @if (isExtentsValid()) {\n      <button\n        class=\"zoomLayer-button\"\n        color=\"primary\"\n        mat-icon-button\n        tooltip-position=\"below\"\n        matTooltipShowDelay=\"500\"\n        [matTooltip]=\"\n          (hasMultipleSelection\n            ? 'igo.geo.layer.zoomLayers'\n            : 'igo.geo.layer.zoomLayer'\n          ) | translate\n        \"\n        (click)=\"zoomLayersExtents()\"\n      >\n        <mat-icon matBadgeColor=\"primary\" matBadgeSize=\"medium\"\n          >frame_inspect</mat-icon\n        >\n      </button>\n    }\n\n    @if (canRename) {\n      <button\n        color=\"primary\"\n        mat-icon-button\n        tooltip-position=\"below\"\n        matTooltipShowDelay=\"500\"\n        [matTooltip]=\"'igo.geo.layer.group.rename' | translate\"\n        (click)=\"handleRename()\"\n      >\n        <mat-icon>edit</mat-icon>\n      </button>\n    }\n\n    <ng-content />\n  </div>\n</igo-panel>\n", styles: [".igo-layer-actions-container{padding:0 6px 0 4px}.igo-layer-actions-container>div{text-align:center}.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:4px}igo-panel{height:unset}::ng-deep .panel-opacity-menu{overflow:visible!important}::ng-deep .panel-opacity-menu #opacity-slider{margin:0 16px}\n"] }]
         }], propDecorators: { map: [{ type: i0.Input, args: [{ isSignal: true, alias: "map", required: true }] }], controller: [{ type: i0.Input, args: [{ isSignal: true, alias: "controller", required: true }] }], searchTerm: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchTerm", required: true }] }], viewerOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewerOptions", required: false }] }], layerChange: [{ type: i0.Output, args: ["layerChange"] }] } });
 
 class LayerViewerComponent {
@@ -16093,16 +16149,24 @@ class MiniBaseMapComponent {
         interactions: false
     });
     constructor() {
-        effect(() => {
-            this.display();
-            this.basemap.ol.getView().changed();
-        });
         effect(() => {
             this.handleBaseLayerChanged(this.baseLayer());
         });
     }
     ngAfterViewInit() {
-        this.basemap.ol.setView(this.map().ol.getView());
+        const mainView = this.map().ol.getView();
+        const basemapView = new olView({
+            center: mainView.getCenter(),
+            zoom: mainView.getZoom(),
+            projection: mainView.getProjection(),
+            minZoom: mainView.getMinZoom(),
+            maxZoom: mainView.getMaxZoom()
+        });
+        this.basemap.ol.setView(basemapView);
+        mainView.on(['change:center', 'change:resolution'], () => {
+            this.basemap.ol.getView().setCenter(mainView.getCenter());
+            this.basemap.ol.getView().setZoom(mainView.getZoom());
+        });
     }
     changeBaseLayer(baseLayer) {
         if (this.disabled()) {
@@ -16259,6 +16323,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
  * Tool to swipe the layers
  */
 class SwipeControlComponent {
+    destroyRef = inject(DestroyRef);
     /**
      * Get an active map
      */
@@ -16279,38 +16344,35 @@ class SwipeControlComponent {
      * State of draggable action
      */
     inDragAction = false;
-    /**
-     * Listener of toggle from advanced-map-tool
-     */
-    swipeEnabled$$;
     /**
      * Binder of prerender on the same element
      */
     boundPrerender = this.prerender.bind(this);
+    activated = signal(false, ...(ngDevMode ? [{ debugName: "activated" }] : []));
     /**
      * Get the list of layers for swipe and activate of deactivate the swipe
      * @internal
      */
     ngAfterViewInit() {
         this.getListOfLayers();
-        this.swipeEnabled$$ = this.map().swipeEnabled$.subscribe((value) => {
+        this.map()
+            .swipeEnabled$?.pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((value) => {
             value ? this.displaySwipe() : this.displaySwipeOff();
         });
-        this.letZoom();
     }
     /**
      * Clear the overlay layer and any interaction added by this component.
      * @internal
      */
     ngOnDestroy() {
-        this.swipeEnabled$$.unsubscribe();
-        this.map().swipeEnabled$.unsubscribe();
         this.displaySwipeOff();
     }
     /**
      * Display a swipe-element and render the layers
      */
     displaySwipe() {
+        this.activated.set(true);
         if (this.swipeId) {
             this.swipeId.style.visibility = 'visible';
         }
@@ -16322,6 +16384,9 @@ class SwipeControlComponent {
      * Clear a swipe-element and render the layers on the initial state
      */
     displaySwipeOff() {
+        if (!this.activated()) {
+            return;
+        }
         if (this.swipeId) {
             this.swipeId.style.visibility = 'hidden';
         }
@@ -16329,6 +16394,7 @@ class SwipeControlComponent {
         this.layers.map((layer) => layer.ol.un('postrender', this.postrender));
         this.map().ol.render();
         this.layers = [];
+        this.activated.set(false);
     }
     /**
      * Getter of element
@@ -16442,22 +16508,12 @@ class SwipeControlComponent {
         event.context.restore();
         event.context.save();
     }
-    /**
-     * Zoom on div
-     */
-    letZoom() {
-        document.getElementById('igo-layer-swipe').addEventListener('wheel', (event) => {
-            event.deltaY > 0
-                ? this.map().viewController.zoomOut()
-                : this.map().viewController.zoomIn();
-        }, true);
-    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SwipeControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.18", type: SwipeControlComponent, isStandalone: true, selector: "igo-swipe-control", inputs: { map: { classPropertyName: "map", publicName: "map", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  class=\"igo-swipe-control-container\"\n  id=\"igo-layer-swipe\"\n  (mousedown)=\"dragDown($event)\"\n  (mouseup)=\"closeDragMouseElement()\"\n  (touchstart)=\"dragDown($event)\"\n  (touchend)=\"closeDragTouchElement()\"\n>\n  <div class=\"igo-swipe-control-line\"></div>\n\n  <div class=\"igo-swipe-control-arrows\" id=\"arrows\">\n    <div class=\"igo-arrow-left\"></div>\n    <div class=\"igo-arrow-right\"></div>\n  </div>\n</div>\n", styles: [".igo-swipe-control-container{position:absolute;width:80px;height:100%;top:0%;left:50%;cursor:grab;z-index:1;transform:translate(-40px)}.igo-swipe-control-container:active{cursor:grabbing}.igo-swipe-control-line{position:absolute;width:4px;height:100%;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#5e5a5a}.igo-swipe-control-arrows{position:absolute;width:32px;height:32px;left:50%;top:50%;transform:translate(-50%,-50%);margin-top:-16px;padding:5px 4px;background-color:#5e5a5a;z-index:2;-webkit-tap-highlight-color:rgba(0,0,0,0)}.igo-swipe-control-arrows div{display:inline-block;width:0;height:0;border-top:10px solid transparent;border-bottom:10px solid transparent}.igo-swipe-control-arrows .igo-arrow-right{margin-left:4px;border-left:10px solid white}.igo-swipe-control-arrows .igo-arrow-left{border-right:10px solid white}.igo-swipe-control-arrows:active{display:none}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: SwipeControlComponent, isStandalone: true, selector: "igo-swipe-control", inputs: { map: { classPropertyName: "map", publicName: "map", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (activated()) {\n  <div\n    class=\"igo-swipe-control-container\"\n    id=\"igo-layer-swipe\"\n    (mousedown)=\"dragDown($event)\"\n    (mouseup)=\"closeDragMouseElement()\"\n    (touchstart)=\"dragDown($event)\"\n    (touchend)=\"closeDragTouchElement()\"\n  >\n    <div class=\"igo-swipe-control-line\"></div>\n\n    <div class=\"igo-swipe-control-arrows\" id=\"arrows\">\n      <div class=\"igo-arrow-left\"></div>\n      <div class=\"igo-arrow-right\"></div>\n    </div>\n  </div>\n}\n", styles: [".igo-swipe-control-container{position:absolute;width:80px;height:100%;top:0%;left:50%;cursor:grab;z-index:1;transform:translate(-40px)}.igo-swipe-control-container:active{cursor:grabbing}.igo-swipe-control-line{position:absolute;width:4px;height:100%;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#5e5a5a}.igo-swipe-control-arrows{position:absolute;width:32px;height:32px;left:50%;top:50%;transform:translate(-50%,-50%);margin-top:-16px;padding:5px 4px;background-color:#5e5a5a;z-index:2;-webkit-tap-highlight-color:rgba(0,0,0,0)}.igo-swipe-control-arrows div{display:inline-block;width:0;height:0;border-top:10px solid transparent;border-bottom:10px solid transparent}.igo-swipe-control-arrows .igo-arrow-right{margin-left:4px;border-left:10px solid white}.igo-swipe-control-arrows .igo-arrow-left{border-right:10px solid white}.igo-swipe-control-arrows:active{display:none}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SwipeControlComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'igo-swipe-control', standalone: true, template: "<div\n  class=\"igo-swipe-control-container\"\n  id=\"igo-layer-swipe\"\n  (mousedown)=\"dragDown($event)\"\n  (mouseup)=\"closeDragMouseElement()\"\n  (touchstart)=\"dragDown($event)\"\n  (touchend)=\"closeDragTouchElement()\"\n>\n  <div class=\"igo-swipe-control-line\"></div>\n\n  <div class=\"igo-swipe-control-arrows\" id=\"arrows\">\n    <div class=\"igo-arrow-left\"></div>\n    <div class=\"igo-arrow-right\"></div>\n  </div>\n</div>\n", styles: [".igo-swipe-control-container{position:absolute;width:80px;height:100%;top:0%;left:50%;cursor:grab;z-index:1;transform:translate(-40px)}.igo-swipe-control-container:active{cursor:grabbing}.igo-swipe-control-line{position:absolute;width:4px;height:100%;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#5e5a5a}.igo-swipe-control-arrows{position:absolute;width:32px;height:32px;left:50%;top:50%;transform:translate(-50%,-50%);margin-top:-16px;padding:5px 4px;background-color:#5e5a5a;z-index:2;-webkit-tap-highlight-color:rgba(0,0,0,0)}.igo-swipe-control-arrows div{display:inline-block;width:0;height:0;border-top:10px solid transparent;border-bottom:10px solid transparent}.igo-swipe-control-arrows .igo-arrow-right{margin-left:4px;border-left:10px solid white}.igo-swipe-control-arrows .igo-arrow-left{border-right:10px solid white}.igo-swipe-control-arrows:active{display:none}\n"] }]
+            args: [{ selector: 'igo-swipe-control', standalone: true, template: "@if (activated()) {\n  <div\n    class=\"igo-swipe-control-container\"\n    id=\"igo-layer-swipe\"\n    (mousedown)=\"dragDown($event)\"\n    (mouseup)=\"closeDragMouseElement()\"\n    (touchstart)=\"dragDown($event)\"\n    (touchend)=\"closeDragTouchElement()\"\n  >\n    <div class=\"igo-swipe-control-line\"></div>\n\n    <div class=\"igo-swipe-control-arrows\" id=\"arrows\">\n      <div class=\"igo-arrow-left\"></div>\n      <div class=\"igo-arrow-right\"></div>\n    </div>\n  </div>\n}\n", styles: [".igo-swipe-control-container{position:absolute;width:80px;height:100%;top:0%;left:50%;cursor:grab;z-index:1;transform:translate(-40px)}.igo-swipe-control-container:active{cursor:grabbing}.igo-swipe-control-line{position:absolute;width:4px;height:100%;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#5e5a5a}.igo-swipe-control-arrows{position:absolute;width:32px;height:32px;left:50%;top:50%;transform:translate(-50%,-50%);margin-top:-16px;padding:5px 4px;background-color:#5e5a5a;z-index:2;-webkit-tap-highlight-color:rgba(0,0,0,0)}.igo-swipe-control-arrows div{display:inline-block;width:0;height:0;border-top:10px solid transparent;border-bottom:10px solid transparent}.igo-swipe-control-arrows .igo-arrow-right{margin-left:4px;border-left:10px solid white}.igo-swipe-control-arrows .igo-arrow-left{border-right:10px solid white}.igo-swipe-control-arrows:active{display:none}\n"] }]
         }], propDecorators: { map: [{ type: i0.Input, args: [{ isSignal: true, alias: "map", required: false }] }] } });
 
 /**
@@ -17541,7 +17597,6 @@ class DirectionsComponent {
     projection = 'EPSG:4326';
     hasOsrmPrivateAccess = false;
     twoSourcesAvailable = false;
-    zoomOnActiveRoute$$;
     storeEmpty$$;
     storeChange$$;
     routesQueries$$ = [];
@@ -17561,7 +17616,6 @@ class DirectionsComponent {
     debounce = input(200, ...(ngDevMode ? [{ debugName: "debounce" }] : []));
     length = input(2, ...(ngDevMode ? [{ debugName: "length" }] : []));
     coordRoundedDecimals = input(6, ...(ngDevMode ? [{ debugName: "coordRoundedDecimals" }] : []));
-    zoomOnActiveRoute = input.required(...(ngDevMode ? [{ debugName: "zoomOnActiveRoute" }] : []));
     authenticated$ = input.required(...(ngDevMode ? [{ debugName: "authenticated$" }] : []));
     /**
      * Wheter one of the direction control is active
@@ -17577,9 +17631,6 @@ class DirectionsComponent {
         return this.directionsSourceService.sources[0].getEnabledProfile()
             .authorization;
     }
-    constructor() {
-        this.monitorActiveRouteZoom();
-    }
     ngOnInit() {
         this.authenticated$$ = this.authenticated$().subscribe((authenticated) => {
             if (authenticated) {
@@ -17612,7 +17663,6 @@ class DirectionsComponent {
         this.storeEmpty$$.unsubscribe();
         this.storeChange$$.unsubscribe();
         this.routesQueries$$.map((u) => u.unsubscribe());
-        this.zoomOnActiveRoute$$.destroy();
         this.authenticated$$.unsubscribe();
         this.freezeStores();
         const stopsFeatureStore = this.stopsFeatureStore();
@@ -17635,32 +17685,29 @@ class DirectionsComponent {
         this.monitorEmptyEntityStore();
         this.monitorEntityStoreChange();
     }
-    monitorActiveRouteZoom() {
-        this.zoomOnActiveRoute$$ = effect(() => {
-            this.zoomOnActiveRoute();
-            if (this.routesFeatureStore().count >= 1) {
-                const activeRoute = this.routesFeatureStore()
+    zoomOnActiveRoute() {
+        if (this.routesFeatureStore().count >= 1) {
+            const activeRoute = this.routesFeatureStore()
+                .all()
+                .find((route) => route.properties.active);
+            if (activeRoute) {
+                const stopsCoordinates = this.stopsStore()
                     .all()
-                    .find((route) => route.properties.active);
-                if (activeRoute) {
-                    const stopsCoordinates = this.stopsStore()
-                        .all()
-                        .map((stop) => olproj.transform(stop.coordinates, 'EPSG:4326', 'EPSG:3857'));
-                    const routeCoordinates = activeRoute.geometry.coordinates;
-                    const coordinates = [
-                        ...stopsCoordinates,
-                        ...routeCoordinates
-                    ];
-                    const routeExtent = coordinates.reduce(([x_min, y_min, x_max, y_max], [x, y]) => [
-                        Math.min(x_min, x),
-                        Math.min(y_min, y),
-                        Math.max(x_max, x),
-                        Math.max(y_max, y)
-                    ], [Infinity, Infinity, -Infinity, -Infinity]);
-                    this.routesFeatureStore().layer.map.viewController.zoomToExtent(routeExtent);
-                }
+                    .map((stop) => olproj.transform(stop.coordinates, 'EPSG:4326', 'EPSG:3857'));
+                const routeCoordinates = activeRoute.geometry.coordinates;
+                const coordinates = [
+                    ...stopsCoordinates,
+                    ...routeCoordinates
+                ];
+                const routeExtent = coordinates.reduce(([x_min, y_min, x_max, y_max], [x, y]) => [
+                    Math.min(x_min, x),
+                    Math.min(y_min, y),
+                    Math.max(x_max, x),
+                    Math.max(y_max, y)
+                ], [Infinity, Infinity, -Infinity, -Infinity]);
+                this.routesFeatureStore().layer.map.viewController.zoomToExtent(routeExtent);
             }
-        }, ...(ngDevMode ? [{ debugName: "zoomOnActiveRoute$$" }] : []));
+        }
     }
     initOlInteraction() {
         this.selectStopInteraction = new olInteraction.Select({
@@ -17884,7 +17931,7 @@ class DirectionsComponent {
         this.getRoutes();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DirectionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: DirectionsComponent, isStandalone: true, selector: "igo-directions", inputs: { contextUri: { classPropertyName: "contextUri", publicName: "contextUri", isSignal: true, isRequired: false, transformFunction: null }, stopsStore: { classPropertyName: "stopsStore", publicName: "stopsStore", isSignal: true, isRequired: true, transformFunction: null }, stopsFeatureStore: { classPropertyName: "stopsFeatureStore", publicName: "stopsFeatureStore", isSignal: true, isRequired: true, transformFunction: null }, routesFeatureStore: { classPropertyName: "routesFeatureStore", publicName: "routesFeatureStore", isSignal: true, isRequired: true, transformFunction: null }, stepsFeatureStore: { classPropertyName: "stepsFeatureStore", publicName: "stepsFeatureStore", isSignal: true, isRequired: true, transformFunction: null }, debounce: { classPropertyName: "debounce", publicName: "debounce", isSignal: true, isRequired: false, transformFunction: null }, length: { classPropertyName: "length", publicName: "length", isSignal: true, isRequired: false, transformFunction: null }, coordRoundedDecimals: { classPropertyName: "coordRoundedDecimals", publicName: "coordRoundedDecimals", isSignal: true, isRequired: false, transformFunction: null }, zoomOnActiveRoute: { classPropertyName: "zoomOnActiveRoute", publicName: "zoomOnActiveRoute", isSignal: true, isRequired: true, transformFunction: null }, authenticated$: { classPropertyName: "authenticated$", publicName: "authenticated$", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"directions-options\">\n  <mat-slide-toggle\n    [checked]=\"directionControlIsActive\"\n    [labelPosition]=\"'before'\"\n    (change)=\"onToggleDirectionsControl($event.checked)\"\n  >\n    {{ 'igo.geo.directions.toggle.activateControl' | translate }}\n  </mat-slide-toggle>\n  @if (hasOsrmPrivateAccess && twoSourcesAvailable) {\n    <mat-slide-toggle\n      [checked]=\"enabledProfileHasAuthorization\"\n      [labelPosition]=\"'before'\"\n      (change)=\"onTogglePrivateModeControl($event.checked)\"\n    >\n      {{ 'igo.geo.directions.toggle.type' | translate }}\n    </mat-slide-toggle>\n  }\n</div>\n\n<igo-directions-inputs\n  (stopInputHasFocus)=\"onStopInputHasFocusChange($event)\"\n  [coordRoundedDecimals]=\"coordRoundedDecimals()\"\n  [projection]=\"projection\"\n  [stopsFeatureStore]=\"stopsFeatureStore()\"\n  [stopsStore]=\"stopsStore()\"\n  [debounce]=\"debounce()\"\n  [length]=\"length()\"\n/>\n\n@if (routesFeatureStore().all().length > 0) {\n  <igo-directions-buttons\n    [stepsFeatureStore]=\"stepsFeatureStore()\"\n    [contextUri]=\"contextUri()\"\n    [zoomOnActiveRoute]=\"zoomOnActiveRoute()\"\n    [routesFeatureStore]=\"routesFeatureStore()\"\n    [stopsStore]=\"stopsStore()\"\n  />\n}\n\n<igo-directions-results\n  [stepsFeatureStore]=\"stepsFeatureStore()\"\n  [routesFeatureStore]=\"routesFeatureStore()\"\n/>\n", styles: [":host{display:block;padding:16px}.directions-options{display:flex;flex-flow:column;align-items:center;row-gap:8px;margin-bottom:16px}.directions-options mat-slide-toggle{width:100%}.directions-options mat-slide-toggle ::ng-deep .mdc-form-field{width:100%}.directions-options mat-slide-toggle ::ng-deep .mdc-label{margin-left:0;margin-right:auto;width:auto;padding-right:0}.directions-options mat-slide-toggle ::ng-deep .mdc-slide-toggle{margin-left:auto;margin-right:0}\n"], dependencies: [{ kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i1$3.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "component", type: DirectionsButtonsComponent, selector: "igo-directions-buttons", inputs: ["contextUri", "zoomOnActiveRoute", "stopsStore", "routesFeatureStore", "stepsFeatureStore"], outputs: ["zoomOnActiveRouteChange"] }, { kind: "component", type: DirectionsInputsComponent, selector: "igo-directions-inputs", inputs: ["stopsStore", "stopsFeatureStore", "projection", "coordRoundedDecimals", "debounce", "length"], outputs: ["stopInputHasFocus"] }, { kind: "component", type: DirectionsResultsComponent, selector: "igo-directions-results", inputs: ["routesFeatureStore", "stepsFeatureStore"] }, { kind: "ngmodule", type: IgoLanguageModule }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: DirectionsComponent, isStandalone: true, selector: "igo-directions", inputs: { contextUri: { classPropertyName: "contextUri", publicName: "contextUri", isSignal: true, isRequired: false, transformFunction: null }, stopsStore: { classPropertyName: "stopsStore", publicName: "stopsStore", isSignal: true, isRequired: true, transformFunction: null }, stopsFeatureStore: { classPropertyName: "stopsFeatureStore", publicName: "stopsFeatureStore", isSignal: true, isRequired: true, transformFunction: null }, routesFeatureStore: { classPropertyName: "routesFeatureStore", publicName: "routesFeatureStore", isSignal: true, isRequired: true, transformFunction: null }, stepsFeatureStore: { classPropertyName: "stepsFeatureStore", publicName: "stepsFeatureStore", isSignal: true, isRequired: true, transformFunction: null }, debounce: { classPropertyName: "debounce", publicName: "debounce", isSignal: true, isRequired: false, transformFunction: null }, length: { classPropertyName: "length", publicName: "length", isSignal: true, isRequired: false, transformFunction: null }, coordRoundedDecimals: { classPropertyName: "coordRoundedDecimals", publicName: "coordRoundedDecimals", isSignal: true, isRequired: false, transformFunction: null }, authenticated$: { classPropertyName: "authenticated$", publicName: "authenticated$", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"directions-options\">\n  <mat-slide-toggle\n    [checked]=\"directionControlIsActive\"\n    [labelPosition]=\"'before'\"\n    (change)=\"onToggleDirectionsControl($event.checked)\"\n  >\n    {{ 'igo.geo.directions.toggle.activateControl' | translate }}\n  </mat-slide-toggle>\n  @if (hasOsrmPrivateAccess && twoSourcesAvailable) {\n    <mat-slide-toggle\n      [checked]=\"enabledProfileHasAuthorization\"\n      [labelPosition]=\"'before'\"\n      (change)=\"onTogglePrivateModeControl($event.checked)\"\n    >\n      {{ 'igo.geo.directions.toggle.type' | translate }}\n    </mat-slide-toggle>\n  }\n</div>\n\n<igo-directions-inputs\n  (stopInputHasFocus)=\"onStopInputHasFocusChange($event)\"\n  [coordRoundedDecimals]=\"coordRoundedDecimals()\"\n  [projection]=\"projection\"\n  [stopsFeatureStore]=\"stopsFeatureStore()\"\n  [stopsStore]=\"stopsStore()\"\n  [debounce]=\"debounce()\"\n  [length]=\"length()\"\n/>\n\n@if (routesFeatureStore().all().length > 0) {\n  <igo-directions-buttons\n    [stepsFeatureStore]=\"stepsFeatureStore()\"\n    [contextUri]=\"contextUri()\"\n    (zoomOnActiveRoute)=\"zoomOnActiveRoute()\"\n    [routesFeatureStore]=\"routesFeatureStore()\"\n    [stopsStore]=\"stopsStore()\"\n  />\n}\n\n<igo-directions-results\n  [stepsFeatureStore]=\"stepsFeatureStore()\"\n  [routesFeatureStore]=\"routesFeatureStore()\"\n/>\n", styles: [":host{display:block;padding:16px}.directions-options{display:flex;flex-flow:column;align-items:center;row-gap:8px;margin-bottom:16px}.directions-options mat-slide-toggle{width:100%}.directions-options mat-slide-toggle ::ng-deep .mdc-form-field{width:100%}.directions-options mat-slide-toggle ::ng-deep .mdc-label{margin-left:0;margin-right:auto;width:auto;padding-right:0}.directions-options mat-slide-toggle ::ng-deep .mdc-slide-toggle{margin-left:auto;margin-right:0}\n"], dependencies: [{ kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i1$3.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "component", type: DirectionsButtonsComponent, selector: "igo-directions-buttons", inputs: ["contextUri", "stopsStore", "routesFeatureStore", "stepsFeatureStore"], outputs: ["zoomOnActiveRoute"] }, { kind: "component", type: DirectionsInputsComponent, selector: "igo-directions-inputs", inputs: ["stopsStore", "stopsFeatureStore", "projection", "coordRoundedDecimals", "debounce", "length"], outputs: ["stopInputHasFocus"] }, { kind: "component", type: DirectionsResultsComponent, selector: "igo-directions-results", inputs: ["routesFeatureStore", "stepsFeatureStore"] }, { kind: "ngmodule", type: IgoLanguageModule }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DirectionsComponent, decorators: [{
             type: Component,
@@ -17894,8 +17941,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                         DirectionsInputsComponent,
                         DirectionsResultsComponent,
                         IgoLanguageModule
-                    ], template: "<div class=\"directions-options\">\n  <mat-slide-toggle\n    [checked]=\"directionControlIsActive\"\n    [labelPosition]=\"'before'\"\n    (change)=\"onToggleDirectionsControl($event.checked)\"\n  >\n    {{ 'igo.geo.directions.toggle.activateControl' | translate }}\n  </mat-slide-toggle>\n  @if (hasOsrmPrivateAccess && twoSourcesAvailable) {\n    <mat-slide-toggle\n      [checked]=\"enabledProfileHasAuthorization\"\n      [labelPosition]=\"'before'\"\n      (change)=\"onTogglePrivateModeControl($event.checked)\"\n    >\n      {{ 'igo.geo.directions.toggle.type' | translate }}\n    </mat-slide-toggle>\n  }\n</div>\n\n<igo-directions-inputs\n  (stopInputHasFocus)=\"onStopInputHasFocusChange($event)\"\n  [coordRoundedDecimals]=\"coordRoundedDecimals()\"\n  [projection]=\"projection\"\n  [stopsFeatureStore]=\"stopsFeatureStore()\"\n  [stopsStore]=\"stopsStore()\"\n  [debounce]=\"debounce()\"\n  [length]=\"length()\"\n/>\n\n@if (routesFeatureStore().all().length > 0) {\n  <igo-directions-buttons\n    [stepsFeatureStore]=\"stepsFeatureStore()\"\n    [contextUri]=\"contextUri()\"\n    [zoomOnActiveRoute]=\"zoomOnActiveRoute()\"\n    [routesFeatureStore]=\"routesFeatureStore()\"\n    [stopsStore]=\"stopsStore()\"\n  />\n}\n\n<igo-directions-results\n  [stepsFeatureStore]=\"stepsFeatureStore()\"\n  [routesFeatureStore]=\"routesFeatureStore()\"\n/>\n", styles: [":host{display:block;padding:16px}.directions-options{display:flex;flex-flow:column;align-items:center;row-gap:8px;margin-bottom:16px}.directions-options mat-slide-toggle{width:100%}.directions-options mat-slide-toggle ::ng-deep .mdc-form-field{width:100%}.directions-options mat-slide-toggle ::ng-deep .mdc-label{margin-left:0;margin-right:auto;width:auto;padding-right:0}.directions-options mat-slide-toggle ::ng-deep .mdc-slide-toggle{margin-left:auto;margin-right:0}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { contextUri: [{ type: i0.Input, args: [{ isSignal: true, alias: "contextUri", required: false }] }], stopsStore: [{ type: i0.Input, args: [{ isSignal: true, alias: "stopsStore", required: true }] }], stopsFeatureStore: [{ type: i0.Input, args: [{ isSignal: true, alias: "stopsFeatureStore", required: true }] }], routesFeatureStore: [{ type: i0.Input, args: [{ isSignal: true, alias: "routesFeatureStore", required: true }] }], stepsFeatureStore: [{ type: i0.Input, args: [{ isSignal: true, alias: "stepsFeatureStore", required: true }] }], debounce: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounce", required: false }] }], length: [{ type: i0.Input, args: [{ isSignal: true, alias: "length", required: false }] }], coordRoundedDecimals: [{ type: i0.Input, args: [{ isSignal: true, alias: "coordRoundedDecimals", required: false }] }], zoomOnActiveRoute: [{ type: i0.Input, args: [{ isSignal: true, alias: "zoomOnActiveRoute", required: true }] }], authenticated$: [{ type: i0.Input, args: [{ isSignal: true, alias: "authenticated$", required: true }] }] } });
+                    ], template: "<div class=\"directions-options\">\n  <mat-slide-toggle\n    [checked]=\"directionControlIsActive\"\n    [labelPosition]=\"'before'\"\n    (change)=\"onToggleDirectionsControl($event.checked)\"\n  >\n    {{ 'igo.geo.directions.toggle.activateControl' | translate }}\n  </mat-slide-toggle>\n  @if (hasOsrmPrivateAccess && twoSourcesAvailable) {\n    <mat-slide-toggle\n      [checked]=\"enabledProfileHasAuthorization\"\n      [labelPosition]=\"'before'\"\n      (change)=\"onTogglePrivateModeControl($event.checked)\"\n    >\n      {{ 'igo.geo.directions.toggle.type' | translate }}\n    </mat-slide-toggle>\n  }\n</div>\n\n<igo-directions-inputs\n  (stopInputHasFocus)=\"onStopInputHasFocusChange($event)\"\n  [coordRoundedDecimals]=\"coordRoundedDecimals()\"\n  [projection]=\"projection\"\n  [stopsFeatureStore]=\"stopsFeatureStore()\"\n  [stopsStore]=\"stopsStore()\"\n  [debounce]=\"debounce()\"\n  [length]=\"length()\"\n/>\n\n@if (routesFeatureStore().all().length > 0) {\n  <igo-directions-buttons\n    [stepsFeatureStore]=\"stepsFeatureStore()\"\n    [contextUri]=\"contextUri()\"\n    (zoomOnActiveRoute)=\"zoomOnActiveRoute()\"\n    [routesFeatureStore]=\"routesFeatureStore()\"\n    [stopsStore]=\"stopsStore()\"\n  />\n}\n\n<igo-directions-results\n  [stepsFeatureStore]=\"stepsFeatureStore()\"\n  [routesFeatureStore]=\"routesFeatureStore()\"\n/>\n", styles: [":host{display:block;padding:16px}.directions-options{display:flex;flex-flow:column;align-items:center;row-gap:8px;margin-bottom:16px}.directions-options mat-slide-toggle{width:100%}.directions-options mat-slide-toggle ::ng-deep .mdc-form-field{width:100%}.directions-options mat-slide-toggle ::ng-deep .mdc-label{margin-left:0;margin-right:auto;width:auto;padding-right:0}.directions-options mat-slide-toggle ::ng-deep .mdc-slide-toggle{margin-left:auto;margin-right:0}\n"] }]
+        }], propDecorators: { contextUri: [{ type: i0.Input, args: [{ isSignal: true, alias: "contextUri", required: false }] }], stopsStore: [{ type: i0.Input, args: [{ isSignal: true, alias: "stopsStore", required: true }] }], stopsFeatureStore: [{ type: i0.Input, args: [{ isSignal: true, alias: "stopsFeatureStore", required: true }] }], routesFeatureStore: [{ type: i0.Input, args: [{ isSignal: true, alias: "routesFeatureStore", required: true }] }], stepsFeatureStore: [{ type: i0.Input, args: [{ isSignal: true, alias: "stepsFeatureStore", required: true }] }], debounce: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounce", required: false }] }], length: [{ type: i0.Input, args: [{ isSignal: true, alias: "length", required: false }] }], coordRoundedDecimals: [{ type: i0.Input, args: [{ isSignal: true, alias: "coordRoundedDecimals", required: false }] }], authenticated$: [{ type: i0.Input, args: [{ isSignal: true, alias: "authenticated$", required: true }] }] } });
 
 class IgoDirectionsModule {
     /**
@@ -22444,7 +22491,7 @@ class FeatureDetailsComponent {
         if (!value.body) {
             return;
         }
-        const regexBase = /<base href="[\w:\/\.]+">/;
+        const regexBase = /<base href="[\w:/.]+">/;
         if (!regexBase.test(value.body)) {
             const url = new URL(value.url, window.location.origin);
             value.body = value.body.replace('<head>', `<head><base href="${url.origin}">`);
@@ -22473,7 +22520,7 @@ class FeatureDetailsComponent {
         }
         else {
             let url = value;
-            if (this.isEmbeddedLink(value)) {
+            if (this.hasEmbeddedLinks(value)) {
                 const div = document.createElement('div');
                 div.innerHTML = value;
                 url = div.children[0].getAttribute('href');
@@ -22509,7 +22556,7 @@ class FeatureDetailsComponent {
             }
         }
     }
-    isEmbeddedLink(value) {
+    hasEmbeddedLinks(value) {
         if (typeof value === 'string') {
             const matchRegex = /<a/g;
             const match = value.match(matchRegex) || [];
@@ -22604,7 +22651,7 @@ class FeatureDetailsComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: FeatureDetailsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: FeatureDetailsComponent, isStandalone: true, selector: "igo-feature-details", inputs: { source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: false, transformFunction: null }, map: { classPropertyName: "map", publicName: "map", isSignal: true, isRequired: false, transformFunction: null }, toolbox: { classPropertyName: "toolbox", publicName: "toolbox", isSignal: true, isRequired: false, transformFunction: null }, feature: { classPropertyName: "feature", publicName: "feature", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { routeEvent: "routeEvent", selectFeature: "selectFeature", htmlDisplayEvent: "htmlDisplayEvent" }, ngImport: i0, template: "@let properties = feature()?.properties;\n@if (\n  ready && feature() && isObject(properties) && properties.target !== 'iframe'\n) {\n  <table class=\"igo-striped\">\n    <tbody>\n      @for (\n        property of filterFeatureProperties(feature()) | keyvalue;\n        track property\n      ) {\n        <tr>\n          @if (properties.target === '_blank' && property.key === 'url') {\n            <td>\n              <mat-icon matListItemIcon>{{ icon }}</mat-icon>\n            </td>\n          }\n          @if (properties.target === '_blank' && property.key === 'url') {\n            <td>\n              <a\n                href=\"{{ property.value }}\"\n                target=\"_blank\"\n                rel=\"noopener noreferrer\"\n              >\n                {{ 'igo.geo.targetHtmlUrl' | translate }} {{ title }}</a\n              >\n              <button\n                class=\"copyClipboard\"\n                mat-icon-button\n                (click)=\"copyTextToClipboard(property.value)\"\n              >\n                <mat-icon>content_copy</mat-icon>\n              </button>\n            </td>\n          }\n          @if (properties.target === undefined) {\n            <td id=\"keyValue\">\n              {{ property.key }}\n            </td>\n          }\n          @if (\n            properties.target === undefined &&\n            !isObject(property.value) &&\n            !isUrl(property.value) &&\n            !isEmbeddedLink(property.value)\n          ) {\n            <td [innerHTML]=\"property.value\"></td>\n          }\n          @if (\n            properties.target === undefined && isEmbeddedLink(property.value)\n          ) {\n            <td>\n              <u\n                [ngStyle]=\"{ cursor: 'pointer', color: 'blue' }\"\n                (click)=\"openSecureUrl(property.value)\"\n                >{{ getEmbeddedLinkText(property.value) }}</u\n              >\n            </td>\n          }\n          @if (\n            properties.target === undefined &&\n            !isObject(property.value) &&\n            (isDoc(property.value) || isUrl(property.value)) &&\n            !isImg(property.value)\n          ) {\n            <td>\n              <u\n                [ngStyle]=\"{ cursor: 'pointer', color: 'blue' }\"\n                (click)=\"openSecureUrl(property.value)\"\n                >{{ 'igo.geo.targetHtmlUrl' | translate }}</u\n              >\n              <button\n                class=\"copyClipboard\"\n                mat-icon-button\n                (click)=\"copyTextToClipboard(property.value)\"\n              >\n                <mat-icon>content_copy</mat-icon>\n              </button>\n            </td>\n          }\n          @if (\n            properties.target === undefined &&\n            !isObject(property.value) &&\n            isUrl(property.value) &&\n            isImg(property.value)\n          ) {\n            <td>\n              <a\n                href=\"{{ property.value }}\"\n                target=\"_blank\"\n                (click)=\"openSecureUrl(property.value)\"\n                rel=\"noopener noreferrer\"\n              >\n                <img\n                  igoImageError\n                  src=\"{{ property.value | secureImage | async }}\"\n                  width=\"225\"\n                  height=\"auto\"\n                />\n              </a>\n            </td>\n          }\n          @if (properties.target === undefined && isObject(property.value)) {\n            <td [innerHTML]=\"property.value | json\"></td>\n          }\n        </tr>\n      }\n    </tbody>\n  </table>\n}\n\n@if (isHtmlDisplay()) {\n  <iframe\n    [srcdoc]=\"htmlSanitizer(properties)\"\n    [src]=\"urlSanitizer(properties.url)\"\n  ></iframe>\n}\n", styles: ["table{width:100%}table .igo-striped tbody tr:nth-child(odd){background-color:var(--mat-sys-surface-container-low);color:#000}table td{padding:4px}#keyValue{width:30%}table ::ng-deep .routing{cursor:pointer}iframe{height:calc(100% - 4px);width:100%;border:0}.copyClipboard{border:none;background:transparent;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: ImageErrorDirective, selector: "[igoImageError]", inputs: ["errorImageUrl", "hideError"] }, { kind: "ngmodule", type: IgoLanguageModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: JsonPipe, name: "json" }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: SecureImagePipe, name: "secureImage" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: FeatureDetailsComponent, isStandalone: true, selector: "igo-feature-details", inputs: { source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: false, transformFunction: null }, map: { classPropertyName: "map", publicName: "map", isSignal: true, isRequired: false, transformFunction: null }, toolbox: { classPropertyName: "toolbox", publicName: "toolbox", isSignal: true, isRequired: false, transformFunction: null }, feature: { classPropertyName: "feature", publicName: "feature", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { routeEvent: "routeEvent", selectFeature: "selectFeature", htmlDisplayEvent: "htmlDisplayEvent" }, ngImport: i0, template: "@let properties = feature()?.properties;\n@if (\n  ready && feature() && isObject(properties) && properties?.target !== 'iframe'\n) {\n  <table class=\"igo-striped\">\n    <tbody>\n      @for (\n        property of filterFeatureProperties(feature()) | keyvalue;\n        track property\n      ) {\n        <tr>\n          @if (properties?.target === '_blank' && property.key === 'url') {\n            <td>\n              <mat-icon matListItemIcon>{{ icon }}</mat-icon>\n            </td>\n          }\n          @if (properties?.target === '_blank' && property.key === 'url') {\n            <td>\n              <a\n                href=\"{{ property.value }}\"\n                target=\"_blank\"\n                rel=\"noopener noreferrer\"\n              >\n                {{ 'igo.geo.targetHtmlUrl' | translate }} {{ title }}</a\n              >\n              <button\n                matIconButton\n                (click)=\"copyTextToClipboard(property.value)\"\n              >\n                <mat-icon>content_copy</mat-icon>\n              </button>\n            </td>\n          }\n          @if (properties?.target === undefined) {\n            <td id=\"keyValue\">\n              {{ property.key }}\n            </td>\n          }\n          @if (\n            properties?.target === undefined &&\n            !isObject(property.value) &&\n            !isUrl(property.value) &&\n            !hasEmbeddedLinks(property.value)\n          ) {\n            <td [innerHTML]=\"property.value\"></td>\n          }\n          @if (\n            properties?.target === undefined && hasEmbeddedLinks(property.value)\n          ) {\n            <td>\n              <u\n                [ngStyle]=\"{ cursor: 'pointer', color: 'blue' }\"\n                (click)=\"openSecureUrl(property.value)\"\n                >{{ getEmbeddedLinkText(property.value) }}</u\n              >\n            </td>\n          }\n          @if (\n            properties?.target === undefined &&\n            !isObject(property.value) &&\n            (isDoc(property.value) || isUrl(property.value)) &&\n            !isImg(property.value)\n          ) {\n            <td>\n              <u\n                [ngStyle]=\"{ cursor: 'pointer', color: 'blue' }\"\n                (click)=\"openSecureUrl(property.value)\"\n                >{{ 'igo.geo.targetHtmlUrl' | translate }}</u\n              >\n              <button\n                matIconButton\n                (click)=\"copyTextToClipboard(property.value)\"\n              >\n                <mat-icon>content_copy</mat-icon>\n              </button>\n            </td>\n          }\n          @if (\n            properties?.target === undefined &&\n            !isObject(property.value) &&\n            isUrl(property.value) &&\n            isImg(property.value)\n          ) {\n            <td>\n              <a\n                href=\"{{ property.value }}\"\n                target=\"_blank\"\n                (click)=\"openSecureUrl(property.value)\"\n                rel=\"noopener noreferrer\"\n              >\n                <img\n                  igoImageError\n                  src=\"{{ property.value | secureImage | async }}\"\n                  width=\"225\"\n                  height=\"auto\"\n                />\n              </a>\n            </td>\n          }\n          @if (properties?.target === undefined && isObject(property.value)) {\n            <td [innerHTML]=\"property.value | json\"></td>\n          }\n        </tr>\n      }\n    </tbody>\n  </table>\n}\n\n@if (isHtmlDisplay()) {\n  <iframe\n    [srcdoc]=\"htmlSanitizer(properties)\"\n    [src]=\"urlSanitizer(properties?.url)\"\n  ></iframe>\n}\n", styles: ["table{width:100%}table.igo-striped tbody tr:nth-child(odd){background-color:var(--mat-sys-surface-container-high)}table td{padding:4px}#keyValue{width:30%}table ::ng-deep .routing{cursor:pointer}iframe{height:calc(100% - 4px);width:100%;border:0}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: ImageErrorDirective, selector: "[igoImageError]", inputs: ["errorImageUrl", "hideError"] }, { kind: "ngmodule", type: IgoLanguageModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: JsonPipe, name: "json" }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: SecureImagePipe, name: "secureImage" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: FeatureDetailsComponent, decorators: [{
             type: Component,
@@ -22616,8 +22663,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                         JsonPipe,
                         KeyValuePipe,
                         IgoLanguageModule,
-                        SecureImagePipe
-                    ], template: "@let properties = feature()?.properties;\n@if (\n  ready && feature() && isObject(properties) && properties.target !== 'iframe'\n) {\n  <table class=\"igo-striped\">\n    <tbody>\n      @for (\n        property of filterFeatureProperties(feature()) | keyvalue;\n        track property\n      ) {\n        <tr>\n          @if (properties.target === '_blank' && property.key === 'url') {\n            <td>\n              <mat-icon matListItemIcon>{{ icon }}</mat-icon>\n            </td>\n          }\n          @if (properties.target === '_blank' && property.key === 'url') {\n            <td>\n              <a\n                href=\"{{ property.value }}\"\n                target=\"_blank\"\n                rel=\"noopener noreferrer\"\n              >\n                {{ 'igo.geo.targetHtmlUrl' | translate }} {{ title }}</a\n              >\n              <button\n                class=\"copyClipboard\"\n                mat-icon-button\n                (click)=\"copyTextToClipboard(property.value)\"\n              >\n                <mat-icon>content_copy</mat-icon>\n              </button>\n            </td>\n          }\n          @if (properties.target === undefined) {\n            <td id=\"keyValue\">\n              {{ property.key }}\n            </td>\n          }\n          @if (\n            properties.target === undefined &&\n            !isObject(property.value) &&\n            !isUrl(property.value) &&\n            !isEmbeddedLink(property.value)\n          ) {\n            <td [innerHTML]=\"property.value\"></td>\n          }\n          @if (\n            properties.target === undefined && isEmbeddedLink(property.value)\n          ) {\n            <td>\n              <u\n                [ngStyle]=\"{ cursor: 'pointer', color: 'blue' }\"\n                (click)=\"openSecureUrl(property.value)\"\n                >{{ getEmbeddedLinkText(property.value) }}</u\n              >\n            </td>\n          }\n          @if (\n            properties.target === undefined &&\n            !isObject(property.value) &&\n            (isDoc(property.value) || isUrl(property.value)) &&\n            !isImg(property.value)\n          ) {\n            <td>\n              <u\n                [ngStyle]=\"{ cursor: 'pointer', color: 'blue' }\"\n                (click)=\"openSecureUrl(property.value)\"\n                >{{ 'igo.geo.targetHtmlUrl' | translate }}</u\n              >\n              <button\n                class=\"copyClipboard\"\n                mat-icon-button\n                (click)=\"copyTextToClipboard(property.value)\"\n              >\n                <mat-icon>content_copy</mat-icon>\n              </button>\n            </td>\n          }\n          @if (\n            properties.target === undefined &&\n            !isObject(property.value) &&\n            isUrl(property.value) &&\n            isImg(property.value)\n          ) {\n            <td>\n              <a\n                href=\"{{ property.value }}\"\n                target=\"_blank\"\n                (click)=\"openSecureUrl(property.value)\"\n                rel=\"noopener noreferrer\"\n              >\n                <img\n                  igoImageError\n                  src=\"{{ property.value | secureImage | async }}\"\n                  width=\"225\"\n                  height=\"auto\"\n                />\n              </a>\n            </td>\n          }\n          @if (properties.target === undefined && isObject(property.value)) {\n            <td [innerHTML]=\"property.value | json\"></td>\n          }\n        </tr>\n      }\n    </tbody>\n  </table>\n}\n\n@if (isHtmlDisplay()) {\n  <iframe\n    [srcdoc]=\"htmlSanitizer(properties)\"\n    [src]=\"urlSanitizer(properties.url)\"\n  ></iframe>\n}\n", styles: ["table{width:100%}table .igo-striped tbody tr:nth-child(odd){background-color:var(--mat-sys-surface-container-low);color:#000}table td{padding:4px}#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"] }]
+                        SecureImagePipe,
+                        MatButtonModule
+                    ], template: "@let properties = feature()?.properties;\n@if (\n  ready && feature() && isObject(properties) && properties?.target !== 'iframe'\n) {\n  <table class=\"igo-striped\">\n    <tbody>\n      @for (\n        property of filterFeatureProperties(feature()) | keyvalue;\n        track property\n      ) {\n        <tr>\n          @if (properties?.target === '_blank' && property.key === 'url') {\n            <td>\n              <mat-icon matListItemIcon>{{ icon }}</mat-icon>\n            </td>\n          }\n          @if (properties?.target === '_blank' && property.key === 'url') {\n            <td>\n              <a\n                href=\"{{ property.value }}\"\n                target=\"_blank\"\n                rel=\"noopener noreferrer\"\n              >\n                {{ 'igo.geo.targetHtmlUrl' | translate }} {{ title }}</a\n              >\n              <button\n                matIconButton\n                (click)=\"copyTextToClipboard(property.value)\"\n              >\n                <mat-icon>content_copy</mat-icon>\n              </button>\n            </td>\n          }\n          @if (properties?.target === undefined) {\n            <td id=\"keyValue\">\n              {{ property.key }}\n            </td>\n          }\n          @if (\n            properties?.target === undefined &&\n            !isObject(property.value) &&\n            !isUrl(property.value) &&\n            !hasEmbeddedLinks(property.value)\n          ) {\n            <td [innerHTML]=\"property.value\"></td>\n          }\n          @if (\n            properties?.target === undefined && hasEmbeddedLinks(property.value)\n          ) {\n            <td>\n              <u\n                [ngStyle]=\"{ cursor: 'pointer', color: 'blue' }\"\n                (click)=\"openSecureUrl(property.value)\"\n                >{{ getEmbeddedLinkText(property.value) }}</u\n              >\n            </td>\n          }\n          @if (\n            properties?.target === undefined &&\n            !isObject(property.value) &&\n            (isDoc(property.value) || isUrl(property.value)) &&\n            !isImg(property.value)\n          ) {\n            <td>\n              <u\n                [ngStyle]=\"{ cursor: 'pointer', color: 'blue' }\"\n                (click)=\"openSecureUrl(property.value)\"\n                >{{ 'igo.geo.targetHtmlUrl' | translate }}</u\n              >\n              <button\n                matIconButton\n                (click)=\"copyTextToClipboard(property.value)\"\n              >\n                <mat-icon>content_copy</mat-icon>\n              </button>\n            </td>\n          }\n          @if (\n            properties?.target === undefined &&\n            !isObject(property.value) &&\n            isUrl(property.value) &&\n            isImg(property.value)\n          ) {\n            <td>\n              <a\n                href=\"{{ property.value }}\"\n                target=\"_blank\"\n                (click)=\"openSecureUrl(property.value)\"\n                rel=\"noopener noreferrer\"\n              >\n                <img\n                  igoImageError\n                  src=\"{{ property.value | secureImage | async }}\"\n                  width=\"225\"\n                  height=\"auto\"\n                />\n              </a>\n            </td>\n          }\n          @if (properties?.target === undefined && isObject(property.value)) {\n            <td [innerHTML]=\"property.value | json\"></td>\n          }\n        </tr>\n      }\n    </tbody>\n  </table>\n}\n\n@if (isHtmlDisplay()) {\n  <iframe\n    [srcdoc]=\"htmlSanitizer(properties)\"\n    [src]=\"urlSanitizer(properties?.url)\"\n  ></iframe>\n}\n", styles: ["table{width:100%}table.igo-striped tbody tr:nth-child(odd){background-color:var(--mat-sys-surface-container-high)}table td{padding:4px}#keyValue{width:30%}table ::ng-deep .routing{cursor:pointer}iframe{height:calc(100% - 4px);width:100%;border:0}\n"] }]
         }], ctorParameters: () => [], propDecorators: { source: [{ type: i0.Input, args: [{ isSignal: true, alias: "source", required: false }] }], map: [{ type: i0.Input, args: [{ isSignal: true, alias: "map", required: false }] }], toolbox: [{ type: i0.Input, args: [{ isSignal: true, alias: "toolbox", required: false }] }], feature: [{ type: i0.Input, args: [{ isSignal: true, alias: "feature", required: false }] }], routeEvent: [{ type: i0.Output, args: ["routeEvent"] }], selectFeature: [{ type: i0.Output, args: ["selectFeature"] }], htmlDisplayEvent: [{ type: i0.Output, args: ["htmlDisplayEvent"] }] } });
 
 class FeatureDetailsDirective {
@@ -30641,9 +30689,10 @@ class ImportExportComponent {
                 if (isLayerGroup(layer)) {
                     return false;
                 }
-                return ((layer instanceof VectorLayer && layer.exportable === true) ||
-                    (layer.dataSource.options.download &&
-                        layer.dataSource.options.download.url));
+                if (layer instanceof VectorLayer) {
+                    return layer.exportable || layer.dataSource.options.download?.url;
+                }
+                return false;
             });
             this.exportableLayers$.next(exportableLayers);
         });
@@ -33032,7 +33081,7 @@ class SaveFeatureDialogComponent {
         this.dialogRef.close();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SaveFeatureDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: SaveFeatureDialogComponent, isStandalone: true, selector: "igo-save-feature-dialog", ngImport: i0, template: "<h1 mat-dialog-title>\n  {{ 'igo.geo.layer.saveFeatureInLayer' | translate }}\n</h1>\n\n<div mat-dialog-content>\n  <form class=\"igo-form\" [formGroup]=\"form\">\n    <igo-list [navigation]=\"false\" [selection]=\"false\">\n      <igo-search-results-item\n        igoListItem\n        color=\"accent\"\n        [result]=\"feature\"\n        [showIcons]=\"true\"\n      />\n    </igo-list>\n\n    <div class=\"igo-input-container\">\n      <mat-form-field>\n        <input\n          type=\"text\"\n          placeholder=\"{{ 'igo.geo.layer.chooseOrSet' | translate }}\"\n          matInput\n          [matAutocomplete]=\"auto\"\n          formControlName=\"layerName\"\n        />\n        <mat-autocomplete [displayWith]=\"displayFn\" #auto=\"matAutocomplete\">\n          @for (layer of filteredLayers$ | async; track layer) {\n            <mat-option [value]=\"layer\">\n              <p matListItemTitle>{{ layer.title }}</p>\n            </mat-option>\n          }\n        </mat-autocomplete>\n      </mat-form-field>\n    </div>\n  </form>\n</div>\n\n<div mat-dialog-actions style=\"justify-content: center\">\n  <div class=\"igo-form-button-group create-layer-button-top-padding\">\n    <button matButton=\"elevated\" type=\"button\" (click)=\"cancel()\">\n      {{ 'igo.geo.layer.cancelBtn' | translate }}\n    </button>\n    <button\n      id=\"createLayerBtnDialog\"\n      matButton=\"elevated\"\n      type=\"button\"\n      color=\"primary\"\n      (click)=\"save()\"\n    >\n      {{ 'igo.geo.layer.saveBtn' | translate }}\n    </button>\n  </div>\n</div>\n", styles: [":host mat-form-field{width:100%}:host .create-layer-button-top-padding{padding-top:25px}:host .igo-form{padding:10px 5px 5px}:host .igo-form-button-group{text-align:center}:host button{cursor:pointer}:host button#createLayerBtnDialog[disabled=true]{cursor:default;background-color:#0000001f;color:#00000042}:host .error{color:red}\n"], dependencies: [{ kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: ListComponent, selector: "igo-list", inputs: ["navigation", "selection"] }, { kind: "component", type: SearchResultsItemComponent, selector: "igo-search-results-item", inputs: ["result", "map", "showIcons", "withZoomButton"], outputs: ["zoomEvent"] }, { kind: "directive", type: ListItemDirective, selector: "[igoListItem]", inputs: ["color", "focused", "selected", "disabled"], outputs: ["beforeSelect", "beforeFocus", "beforeUnselect", "beforeUnfocus", "beforeDisable", "beforeEnable", "focus", "unfocus", "select", "unselect", "disable", "enable"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i4$2.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i4$3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i4$2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatListModule }, { kind: "directive", type: i1$2.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: IgoLanguageModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: SaveFeatureDialogComponent, isStandalone: true, selector: "igo-save-feature-dialog", ngImport: i0, template: "<h1 mat-dialog-title>\n  {{ 'igo.geo.layer.saveFeatureInLayer' | translate }}\n</h1>\n\n<div mat-dialog-content>\n  <form class=\"igo-form\" [formGroup]=\"form\">\n    <igo-list [navigation]=\"false\" [selection]=\"false\">\n      <igo-search-results-item\n        igoListItem\n        color=\"accent\"\n        [result]=\"feature\"\n        [showIcons]=\"true\"\n      />\n    </igo-list>\n\n    <div class=\"igo-input-container\">\n      <mat-form-field>\n        <input\n          type=\"text\"\n          placeholder=\"{{ 'igo.geo.layer.chooseOrSet' | translate }}\"\n          matInput\n          [matAutocomplete]=\"auto\"\n          formControlName=\"layerName\"\n        />\n        <mat-autocomplete [displayWith]=\"displayFn\" #auto=\"matAutocomplete\">\n          @for (layer of filteredLayers$ | async; track layer) {\n            <mat-option [value]=\"layer\">\n              {{ layer.title }}\n            </mat-option>\n          }\n        </mat-autocomplete>\n      </mat-form-field>\n    </div>\n  </form>\n</div>\n\n<div mat-dialog-actions style=\"justify-content: center\">\n  <div class=\"igo-form-button-group create-layer-button-top-padding\">\n    <button matButton=\"elevated\" type=\"button\" (click)=\"cancel()\">\n      {{ 'igo.geo.layer.cancelBtn' | translate }}\n    </button>\n    <button\n      id=\"createLayerBtnDialog\"\n      matButton=\"elevated\"\n      type=\"button\"\n      color=\"primary\"\n      (click)=\"save()\"\n    >\n      {{ 'igo.geo.layer.saveBtn' | translate }}\n    </button>\n  </div>\n</div>\n", styles: [":host mat-form-field{width:100%}:host .create-layer-button-top-padding{padding-top:25px}:host .igo-form{padding:10px 5px 5px}:host .igo-form-button-group{text-align:center}:host button{cursor:pointer}:host button#createLayerBtnDialog[disabled=true]{cursor:default;background-color:#0000001f;color:#00000042}:host .error{color:red}\n"], dependencies: [{ kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: ListComponent, selector: "igo-list", inputs: ["navigation", "selection"] }, { kind: "component", type: SearchResultsItemComponent, selector: "igo-search-results-item", inputs: ["result", "map", "showIcons", "withZoomButton"], outputs: ["zoomEvent"] }, { kind: "directive", type: ListItemDirective, selector: "[igoListItem]", inputs: ["color", "focused", "selected", "disabled"], outputs: ["beforeSelect", "beforeFocus", "beforeUnselect", "beforeUnfocus", "beforeDisable", "beforeEnable", "focus", "unfocus", "select", "unselect", "disable", "enable"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i4$2.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i4$3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i4$2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatListModule }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: IgoLanguageModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SaveFeatureDialogComponent, decorators: [{
             type: Component,
@@ -33053,7 +33102,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                         MatButtonModule,
                         AsyncPipe,
                         IgoLanguageModule
-                    ], template: "<h1 mat-dialog-title>\n  {{ 'igo.geo.layer.saveFeatureInLayer' | translate }}\n</h1>\n\n<div mat-dialog-content>\n  <form class=\"igo-form\" [formGroup]=\"form\">\n    <igo-list [navigation]=\"false\" [selection]=\"false\">\n      <igo-search-results-item\n        igoListItem\n        color=\"accent\"\n        [result]=\"feature\"\n        [showIcons]=\"true\"\n      />\n    </igo-list>\n\n    <div class=\"igo-input-container\">\n      <mat-form-field>\n        <input\n          type=\"text\"\n          placeholder=\"{{ 'igo.geo.layer.chooseOrSet' | translate }}\"\n          matInput\n          [matAutocomplete]=\"auto\"\n          formControlName=\"layerName\"\n        />\n        <mat-autocomplete [displayWith]=\"displayFn\" #auto=\"matAutocomplete\">\n          @for (layer of filteredLayers$ | async; track layer) {\n            <mat-option [value]=\"layer\">\n              <p matListItemTitle>{{ layer.title }}</p>\n            </mat-option>\n          }\n        </mat-autocomplete>\n      </mat-form-field>\n    </div>\n  </form>\n</div>\n\n<div mat-dialog-actions style=\"justify-content: center\">\n  <div class=\"igo-form-button-group create-layer-button-top-padding\">\n    <button matButton=\"elevated\" type=\"button\" (click)=\"cancel()\">\n      {{ 'igo.geo.layer.cancelBtn' | translate }}\n    </button>\n    <button\n      id=\"createLayerBtnDialog\"\n      matButton=\"elevated\"\n      type=\"button\"\n      color=\"primary\"\n      (click)=\"save()\"\n    >\n      {{ 'igo.geo.layer.saveBtn' | translate }}\n    </button>\n  </div>\n</div>\n", styles: [":host mat-form-field{width:100%}:host .create-layer-button-top-padding{padding-top:25px}:host .igo-form{padding:10px 5px 5px}:host .igo-form-button-group{text-align:center}:host button{cursor:pointer}:host button#createLayerBtnDialog[disabled=true]{cursor:default;background-color:#0000001f;color:#00000042}:host .error{color:red}\n"] }]
+                    ], template: "<h1 mat-dialog-title>\n  {{ 'igo.geo.layer.saveFeatureInLayer' | translate }}\n</h1>\n\n<div mat-dialog-content>\n  <form class=\"igo-form\" [formGroup]=\"form\">\n    <igo-list [navigation]=\"false\" [selection]=\"false\">\n      <igo-search-results-item\n        igoListItem\n        color=\"accent\"\n        [result]=\"feature\"\n        [showIcons]=\"true\"\n      />\n    </igo-list>\n\n    <div class=\"igo-input-container\">\n      <mat-form-field>\n        <input\n          type=\"text\"\n          placeholder=\"{{ 'igo.geo.layer.chooseOrSet' | translate }}\"\n          matInput\n          [matAutocomplete]=\"auto\"\n          formControlName=\"layerName\"\n        />\n        <mat-autocomplete [displayWith]=\"displayFn\" #auto=\"matAutocomplete\">\n          @for (layer of filteredLayers$ | async; track layer) {\n            <mat-option [value]=\"layer\">\n              {{ layer.title }}\n            </mat-option>\n          }\n        </mat-autocomplete>\n      </mat-form-field>\n    </div>\n  </form>\n</div>\n\n<div mat-dialog-actions style=\"justify-content: center\">\n  <div class=\"igo-form-button-group create-layer-button-top-padding\">\n    <button matButton=\"elevated\" type=\"button\" (click)=\"cancel()\">\n      {{ 'igo.geo.layer.cancelBtn' | translate }}\n    </button>\n    <button\n      id=\"createLayerBtnDialog\"\n      matButton=\"elevated\"\n      type=\"button\"\n      color=\"primary\"\n      (click)=\"save()\"\n    >\n      {{ 'igo.geo.layer.saveBtn' | translate }}\n    </button>\n  </div>\n</div>\n", styles: [":host mat-form-field{width:100%}:host .create-layer-button-top-padding{padding-top:25px}:host .igo-form{padding:10px 5px 5px}:host .igo-form-button-group{text-align:center}:host button{cursor:pointer}:host button#createLayerBtnDialog[disabled=true]{cursor:default;background-color:#0000001f;color:#00000042}:host .error{color:red}\n"] }]
         }], ctorParameters: () => [] });
 
 class SearchResultAddButtonComponent {
@@ -34460,15 +34509,15 @@ class IChercheSearchSource extends SearchSource {
                         },
                         {
                             title: 'igo.geo.search.icherche.type.cycleStop',
-                            value: 'haltes_cyclables',
-                            enabled: types.indexOf('haltes_cyclables') !== -1,
-                            hashtags: ['haltevelo', 'haltes_cyclables']
+                            value: 'haltes-cyclables',
+                            enabled: types.indexOf('haltes-cyclables') !== -1,
+                            hashtags: ['haltevelo']
                         },
                         {
                             title: 'igo.geo.search.icherche.type.restArea',
-                            value: 'haltes_routieres',
-                            enabled: types.indexOf('haltes_routieres') !== -1,
-                            hashtags: ['halteroute', 'haltes_routieres']
+                            value: 'haltes-routieres',
+                            enabled: types.indexOf('haltes-routieres') !== -1,
+                            hashtags: ['halteroute']
                         },
                         {
                             title: 'igo.geo.search.icherche.type.hq',
@@ -39787,7 +39836,7 @@ class AddCatalogDialogComponent {
     configService = inject(ConfigService);
     formService = inject(FormService);
     dialogRef = inject(MatDialogRef);
-    data = inject(MAT_DIALOG_DATA, { optional: true });
+    data = inject(MAT_DIALOG_DATA);
     predefinedForm$ = new BehaviorSubject(undefined);
     customForm$ = new BehaviorSubject(undefined);
     data$ = new BehaviorSubject(undefined);
@@ -39888,7 +39937,7 @@ class AddCatalogDialogComponent {
             .every((e) => e);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AddCatalogDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: AddCatalogDialogComponent, isStandalone: true, selector: "igo-add-catalog-dialog", ngImport: i0, template: "<mat-tab-group\n  [selectedIndex]=\"!data.addedCatalog && data.predefinedCatalogs.length ? 0 : 1\"\n>\n  <mat-tab\n    [label]=\"'igo.geo.catalog.library.predefined' | translate\"\n    [disabled]=\"!data.predefinedCatalogs.length\"\n  >\n    @if (predefinedForm$ | async; as form) {\n      <igo-form\n        [form]=\"form\"\n        [formData]=\"data$ | async\"\n        (submitForm)=\"onPredefinedSubmit($any($event))\"\n      >\n        @if (form.fields.length) {\n          <div class=\"form-container\">\n            @for (field of form.fields; track field) {\n              <igo-form-field [field]=\"field\" />\n            }\n          </div>\n        }\n        <div formButtons class=\"actions-container\">\n          <button matButton=\"filled\" type=\"submit\" color=\"primary\">\n            {{ 'igo.geo.catalog.library.add' | translate }}\n          </button>\n        </div>\n      </igo-form>\n    }\n  </mat-tab>\n\n  <mat-tab class=\"tabs\" [label]=\"'igo.geo.catalog.library.custom' | translate\">\n    @if (customForm$ | async; as form) {\n      <igo-form\n        [form]=\"form\"\n        [formData]=\"customData$ | async\"\n        (submitForm)=\"onCustomSubmit($any($event))\"\n      >\n        @if (form.fields.length) {\n          <div class=\"form-container\">\n            @for (field of form.fields; track field) {\n              <igo-form-field [field]=\"field\" />\n            }\n          </div>\n        }\n        <div formButtons class=\"actions-container\">\n          <button matButton=\"filled\" type=\"submit\" color=\"primary\">\n            {{ 'igo.geo.catalog.library.add' | translate }}\n          </button>\n        </div>\n      </igo-form>\n    }\n    @if (data.error && data.addedCatalog && emailAddress) {\n      <span>\n        <p class=\"error\">\n          {{\n            languageService.translate.instant(\n              'igo.geo.catalog.externalProvider.unavailableWithEmail',\n              { value: data.addedCatalog.url, email: emailAddress }\n            )\n          }}\n        </p>\n      </span>\n    }\n    @if (data.error && data.addedCatalog && !emailAddress) {\n      <span>\n        <p class=\"error\">\n          {{\n            languageService.translate.instant('igo.geo.catalog.unavailable', {\n              value: data.addedCatalog.url\n            })\n          }}\n        </p>\n      </span>\n    }\n  </mat-tab>\n</mat-tab-group>\n", styles: [":host mat-tab-group{padding:10px}:host igo-form{overflow:hidden}:host .actions-container button:not(:last-child){margin-right:8px}:host .form-container{width:100%;height:auto;padding:10px}:host .form-container igo-form-field{display:block;height:auto}:host .error{color:red}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i1$5.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i1$5.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: MatListModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: IgoLanguageModule }, { kind: "component", type: FormComponent, selector: "igo-form", inputs: ["form", "formData", "autocomplete"], outputs: ["submitForm"] }, { kind: "component", type: FormFieldComponent, selector: "igo-form-field", inputs: ["field"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: AddCatalogDialogComponent, isStandalone: true, selector: "igo-add-catalog-dialog", ngImport: i0, template: "<mat-tab-group\n  [selectedIndex]=\"\n    !data.addedCatalog ||\n    (data.error && data.isPredefinedCatalog && data.predefinedCatalogs.length)\n      ? 0\n      : 1\n  \"\n>\n  <mat-tab\n    [label]=\"'igo.geo.catalog.library.predefined' | translate\"\n    [disabled]=\"!data.predefinedCatalogs.length\"\n  >\n    @if (predefinedForm$ | async; as form) {\n      <igo-form\n        [form]=\"form\"\n        [formData]=\"data$ | async\"\n        (submitForm)=\"onPredefinedSubmit($any($event))\"\n      >\n        @if (form.fields.length) {\n          <div class=\"form-container\">\n            @for (field of form.fields; track field) {\n              <igo-form-field [field]=\"field\" />\n            }\n          </div>\n        }\n        <div formButtons class=\"actions-container\">\n          <button matButton=\"filled\" type=\"submit\" color=\"primary\">\n            {{ 'igo.geo.catalog.library.add' | translate }}\n          </button>\n        </div>\n      </igo-form>\n    }\n  </mat-tab>\n\n  <mat-tab class=\"tabs\" [label]=\"'igo.geo.catalog.library.custom' | translate\">\n    @if (customForm$ | async; as form) {\n      <igo-form\n        [form]=\"form\"\n        [formData]=\"customData$ | async\"\n        (submitForm)=\"onCustomSubmit($any($event))\"\n      >\n        @if (form.fields.length) {\n          <div class=\"form-container\">\n            @for (field of form.fields; track field) {\n              <igo-form-field [field]=\"field\" />\n            }\n          </div>\n        }\n        <div formButtons class=\"actions-container\">\n          <button matButton=\"filled\" type=\"submit\" color=\"primary\">\n            {{ 'igo.geo.catalog.library.add' | translate }}\n          </button>\n        </div>\n      </igo-form>\n    }\n  </mat-tab>\n</mat-tab-group>\n\n@if (data.error && data.addedCatalog) {\n  <p class=\"error\">\n    {{\n      emailAddress\n        ? languageService.translate.instant(\n            'igo.geo.catalog.externalProvider.unavailableWithEmail',\n            { value: data.addedCatalog.url, email: emailAddress }\n          )\n        : languageService.translate.instant('igo.geo.catalog.unavailable', {\n            value: data.addedCatalog.url\n          })\n    }}\n  </p>\n}\n", styles: [":host mat-tab-group{padding:10px}:host igo-form{overflow:hidden}:host .actions-container button:not(:last-child){margin-right:8px}:host .form-container{width:100%;height:auto;padding:10px}:host .form-container igo-form-field{display:block;height:auto}:host .error{overflow-wrap:break-word;padding:0 20px;color:red}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i1$5.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i1$5.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: MatListModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: IgoLanguageModule }, { kind: "component", type: FormComponent, selector: "igo-form", inputs: ["form", "formData", "autocomplete"], outputs: ["submitForm"] }, { kind: "component", type: FormFieldComponent, selector: "igo-form-field", inputs: ["field"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AddCatalogDialogComponent, decorators: [{
             type: Component,
@@ -39908,7 +39957,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                         IgoLanguageModule,
                         FormComponent,
                         FormFieldComponent
-                    ], template: "<mat-tab-group\n  [selectedIndex]=\"!data.addedCatalog && data.predefinedCatalogs.length ? 0 : 1\"\n>\n  <mat-tab\n    [label]=\"'igo.geo.catalog.library.predefined' | translate\"\n    [disabled]=\"!data.predefinedCatalogs.length\"\n  >\n    @if (predefinedForm$ | async; as form) {\n      <igo-form\n        [form]=\"form\"\n        [formData]=\"data$ | async\"\n        (submitForm)=\"onPredefinedSubmit($any($event))\"\n      >\n        @if (form.fields.length) {\n          <div class=\"form-container\">\n            @for (field of form.fields; track field) {\n              <igo-form-field [field]=\"field\" />\n            }\n          </div>\n        }\n        <div formButtons class=\"actions-container\">\n          <button matButton=\"filled\" type=\"submit\" color=\"primary\">\n            {{ 'igo.geo.catalog.library.add' | translate }}\n          </button>\n        </div>\n      </igo-form>\n    }\n  </mat-tab>\n\n  <mat-tab class=\"tabs\" [label]=\"'igo.geo.catalog.library.custom' | translate\">\n    @if (customForm$ | async; as form) {\n      <igo-form\n        [form]=\"form\"\n        [formData]=\"customData$ | async\"\n        (submitForm)=\"onCustomSubmit($any($event))\"\n      >\n        @if (form.fields.length) {\n          <div class=\"form-container\">\n            @for (field of form.fields; track field) {\n              <igo-form-field [field]=\"field\" />\n            }\n          </div>\n        }\n        <div formButtons class=\"actions-container\">\n          <button matButton=\"filled\" type=\"submit\" color=\"primary\">\n            {{ 'igo.geo.catalog.library.add' | translate }}\n          </button>\n        </div>\n      </igo-form>\n    }\n    @if (data.error && data.addedCatalog && emailAddress) {\n      <span>\n        <p class=\"error\">\n          {{\n            languageService.translate.instant(\n              'igo.geo.catalog.externalProvider.unavailableWithEmail',\n              { value: data.addedCatalog.url, email: emailAddress }\n            )\n          }}\n        </p>\n      </span>\n    }\n    @if (data.error && data.addedCatalog && !emailAddress) {\n      <span>\n        <p class=\"error\">\n          {{\n            languageService.translate.instant('igo.geo.catalog.unavailable', {\n              value: data.addedCatalog.url\n            })\n          }}\n        </p>\n      </span>\n    }\n  </mat-tab>\n</mat-tab-group>\n", styles: [":host mat-tab-group{padding:10px}:host igo-form{overflow:hidden}:host .actions-container button:not(:last-child){margin-right:8px}:host .form-container{width:100%;height:auto;padding:10px}:host .form-container igo-form-field{display:block;height:auto}:host .error{color:red}\n"] }]
+                    ], template: "<mat-tab-group\n  [selectedIndex]=\"\n    !data.addedCatalog ||\n    (data.error && data.isPredefinedCatalog && data.predefinedCatalogs.length)\n      ? 0\n      : 1\n  \"\n>\n  <mat-tab\n    [label]=\"'igo.geo.catalog.library.predefined' | translate\"\n    [disabled]=\"!data.predefinedCatalogs.length\"\n  >\n    @if (predefinedForm$ | async; as form) {\n      <igo-form\n        [form]=\"form\"\n        [formData]=\"data$ | async\"\n        (submitForm)=\"onPredefinedSubmit($any($event))\"\n      >\n        @if (form.fields.length) {\n          <div class=\"form-container\">\n            @for (field of form.fields; track field) {\n              <igo-form-field [field]=\"field\" />\n            }\n          </div>\n        }\n        <div formButtons class=\"actions-container\">\n          <button matButton=\"filled\" type=\"submit\" color=\"primary\">\n            {{ 'igo.geo.catalog.library.add' | translate }}\n          </button>\n        </div>\n      </igo-form>\n    }\n  </mat-tab>\n\n  <mat-tab class=\"tabs\" [label]=\"'igo.geo.catalog.library.custom' | translate\">\n    @if (customForm$ | async; as form) {\n      <igo-form\n        [form]=\"form\"\n        [formData]=\"customData$ | async\"\n        (submitForm)=\"onCustomSubmit($any($event))\"\n      >\n        @if (form.fields.length) {\n          <div class=\"form-container\">\n            @for (field of form.fields; track field) {\n              <igo-form-field [field]=\"field\" />\n            }\n          </div>\n        }\n        <div formButtons class=\"actions-container\">\n          <button matButton=\"filled\" type=\"submit\" color=\"primary\">\n            {{ 'igo.geo.catalog.library.add' | translate }}\n          </button>\n        </div>\n      </igo-form>\n    }\n  </mat-tab>\n</mat-tab-group>\n\n@if (data.error && data.addedCatalog) {\n  <p class=\"error\">\n    {{\n      emailAddress\n        ? languageService.translate.instant(\n            'igo.geo.catalog.externalProvider.unavailableWithEmail',\n            { value: data.addedCatalog.url, email: emailAddress }\n          )\n        : languageService.translate.instant('igo.geo.catalog.unavailable', {\n            value: data.addedCatalog.url\n          })\n    }}\n  </p>\n}\n", styles: [":host mat-tab-group{padding:10px}:host igo-form{overflow:hidden}:host .actions-container button:not(:last-child){margin-right:8px}:host .form-container{width:100%;height:auto;padding:10px}:host .form-container igo-form-field{display:block;height:auto}:host .error{overflow-wrap:break-word;padding:0 20px;color:red}\n"] }]
         }] });
 
 /**
@@ -40037,34 +40086,31 @@ class CatalogLibraryComponent {
         }
         this.unsubscribeAddingCatalog();
         if (predefinedCatalog) {
-            predefinedCatalog.removable ??= true;
-            this.handleAddCatalogToStore(predefinedCatalog);
-        }
-        else {
-            this.addingCatalog$$ = this.capabilitiesService
-                .getCapabilities(addedCatalog.type, addedCatalog.url)
-                .pipe(catchError((e) => {
-                if (e.error) {
-                    this.addCatalogDialog(true, addedCatalog);
-                    e.error.caught = true;
-                    return e;
-                }
-                this.messageService.error('igo.geo.catalog.unavailable', 'igo.geo.catalog.unavailableTitle', undefined, { value: addedCatalog.url });
-                throw e;
-            }))
-                .subscribe((capabilities) => {
-                const catalogToAdd = ObjectUtils.removeUndefined(Object.assign({}, {
-                    id,
-                    title: addedCatalog.title,
-                    url: addedCatalog.url,
-                    type: addedCatalog.type || 'wms',
-                    externalProvider: true,
-                    removable: true,
-                    version: addedCatalog.type === 'wms' ? capabilities.version : '1.3.0'
-                }));
-                this.handleAddCatalogToStore(catalogToAdd);
-            });
+            addedCatalog.removable ??= true;
         }
+        this.addingCatalog$$ = this.capabilitiesService
+            .getCapabilities(addedCatalog.type, addedCatalog.url)
+            .pipe(catchError((e) => {
+            if (e.error) {
+                this.addCatalogDialog(true, addedCatalog, !!predefinedCatalog);
+                e.error.caught = true;
+                return EMPTY;
+            }
+            this.messageService.error('igo.geo.catalog.unavailable', 'igo.geo.catalog.unavailableTitle', undefined, { value: addedCatalog.url });
+            throw e;
+        }))
+            .subscribe((capabilities) => {
+            const catalogToAdd = ObjectUtils.removeUndefined(Object.assign({}, {
+                id,
+                title: addedCatalog.title,
+                url: addedCatalog.url,
+                type: addedCatalog.type || 'wms',
+                externalProvider: true,
+                removable: true,
+                version: addedCatalog.type === 'wms' ? capabilities.version : '1.3.0'
+            }));
+            this.handleAddCatalogToStore(catalogToAdd);
+        });
     }
     ngOnDestroy() {
         this.unsubscribeAddingCatalog();
@@ -40080,14 +40126,15 @@ class CatalogLibraryComponent {
             .slice(0)
             .filter((c) => c.id !== catalog.id);
     }
-    addCatalogDialog(error, addedCatalog) {
+    addCatalogDialog(error, addedCatalog, isPredefinedCatalog) {
         const dialogRef = this.dialog.open(AddCatalogDialogComponent, {
             width: '700px',
             data: {
                 predefinedCatalogs: this.predefinedCatalogs(),
                 store: this.store(),
                 error,
-                addedCatalog
+                addedCatalog,
+                isPredefinedCatalog
             }
         });
         dialogRef.afterClosed().subscribe((catalog) => {
@@ -42376,5 +42423,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AddCatalogDialogComponent, ArcGISRestCapabilitiesLayerTypes, ArcGISRestDataSource, BaseLayersSwitcherComponent, CATALOG_DIRECTIVES, CATALOG_LIBRARY_DIRECTIVES, CadastreSearchSource, CapabilitiesService, CartoDataSource, Catalog, CatalogBrowserComponent, CatalogItemType, CatalogLibraryComponent, CatalogService, ClusterDataSource, ConfigFileToGeoDBService, ConfirmationPopupComponent, CoordinatesReverseSearchSource, CoordinatesReverseSearchSourceFactory, CoordinatesSearchResultFormatter, CoordinatesUnit, CsvSeparator, DDtoDMS, DataService, DataSource, DataSourceService, DirectionRelativePositionType, DirectionSourceKind, DirectionsButtonsComponent, DirectionsComponent, DirectionsFormat, DirectionsInputsComponent, DirectionsResultsComponent, DirectionsService, DirectionsSource, DirectionsType, DownloadButtonComponent, DownloadService, DrawComponent, DrawControl, DrawIconService, DrawStyleService, DropGeoFileDirective, EditionWorkspace, EditionWorkspaceService, EpsgSelectorModalComponent, EsriStyleGenerator, EventRefresh, ExportButtonComponent, ExportError, ExportFormat, ExportFormatLegacy, ExportInvalidFileError, ExportNothingToExportError, ExportService, FEATURE, FEATURE_DETAILS_DIRECTIVES, FEATURE_DIRECTIVES, FILTER_DIRECTIVES, FeatureDataSource, FeatureDetailsComponent, FeatureDetailsDirective, FeatureFormComponent, FeatureMotion, FeatureStore, FeatureStoreInMapExtentStrategy, FeatureStoreInMapResolutionStrategy, FeatureStoreLoadingLayerStrategy, FeatureStoreLoadingStrategy, FeatureStoreSearchIndexStrategy, FeatureStoreSelectionStrategy, FeatureWorkspace, FeatureWorkspaceService, FilterableDataSourcePipe, GEOMETRY_FORM_FIELD_DIRECTIVES, GeoDB, GeoNetworkService, GeoPropertiesStrategy, GeolocateButtonComponent, GeolocationOverlayType, GeometryFormFieldComponent, GeometryFormFieldInputComponent, GeometrySliceError, GeometrySliceLineStringError, GeometrySliceMultiPolygonError, GeometrySliceTooManyIntersectionError, GeometryType, GoogleLinks, HomeExtentButtonComponent, HoverFeatureDirective, IChercheReverseSearchSource, IChercheSearchResultFormatter, IChercheSearchSource, ID_GROUP_PREFIX, ILayerSearchResultFormatter, ILayerSearchSource, IMPORT_EXPORT_DIRECTIVES, IgoCatalogBrowserModule, IgoCatalogLibraryModule, IgoCatalogModule, IgoConfirmationPopupModule, IgoDirectionsModule, IgoDownloadModule, IgoDrawModule, IgoDrawingToolModule, IgoFeatureDetailsModule, IgoFeatureFormModule, IgoFeatureModule, IgoFilterModule, IgoGeoModule, IgoGeoWorkspaceModule, IgoGeometryFormFieldModule, IgoGeometryModule, IgoHttpParameterCodec, IgoImportExportModule, IgoLayerModule, IgoMap, IgoMapModule, IgoMeasureModule, IgoMeasurerModule, IgoMetadataModule, IgoOgcFilterModule, IgoPrintModule, IgoQueryModule, IgoSearchBarModule, IgoSearchModule, IgoSearchResultsModule, IgoSearchSelectorModule, IgoSearchSettingsModule, IgoStyleListModule, IgoStyleModule, IgoToastModule, IgoWktModule, IgoWorkspaceSelectorModule, IgoWorkspaceUpdatorModule, ImageArcGISRestDataSource, ImageLayer, ImageWatcher, ImportError, ImportExportComponent, ImportInvalidFileError, ImportNothingToImportError, ImportOgreServerError, ImportSRSError, ImportService, ImportSizeError, ImportUnreadableFileError, InfoSectionComponent, InsertSourceInsertDBEnum, InteractiveSelectionFormWidget, LAYER, LAYER_DIRECTIVES, LabelType, LaneType, Layer, LayerBase, LayerController, LayerDB, LayerGroup, LayerGroupBase, LayerGroupComponent, LayerItemComponent, LayerLegendComponent, LayerLegendItemComponent, LayerLegendListBindingDirective, LayerLegendListComponent, LayerListComponent, LayerListControlsEnum, LayerListToolComponent, LayerListToolService, LayerSearchComponent, LayerService, LayerUnavailableComponent, LayerUnavailableListComponent, LayerViewerBottomActionsComponent, LayerViewerComponent, LayerVisibilityButtonComponent, Linked, LinkedProperties, MAP_DIRECTIVES, MEASURER_DIRECTIVES, MEASURE_UNIT_AUTO, METADATA_DIRECTIVES, MVTDataSource, ManeuverModifier, ManeuverType, MapBase, MapBrowserComponent, MapCenterComponent, MapController, MapGeolocationController, MapOfflineDirective, MapService, MapViewAction, MapViewController, MeasureAreaUnit, MeasureAreaUnitAbbreviation, MeasureFormatPipe, MeasureLengthUnit, MeasureLengthUnitAbbreviation, MeasureType, MeasurerComponent, MenuButtonComponent, MetadataAbstractComponent, MetadataButtonComponent, MetadataService, MiniBaseMapComponent, ModifyControl, NominatimSearchSource, OGCFilterService, OSMDataSource, OfflineButtonComponent, OgcFilterButtonComponent, OgcFilterComponent, OgcFilterFormComponent, OgcFilterOperator, OgcFilterOperatorType, OgcFilterSelectionComponent, OgcFilterTimeComponent, OgcFilterTimeSliderComponent, OgcFilterWidget, OgcFilterWriter, OgcFilterableFormComponent, OgcFilterableItemComponent, OgcFilterableListBindingDirective, OgcFilterableListComponent, OgcSelectorFields, OlDragSelectInteraction, OptionsApiService, OptionsService, OsmLinks, OsrmDirectionsSource, Overlay, OverlayAction, PointerPositionDirective, PrintComponent, PrintFormComponent, PrintLegendPosition, PrintOrientation, PrintOutputFormat, PrintPaperFormat, PrintResolution, PrintSaveImageFormat, PrintService, ProjectionService, PropertyTypeDetectorService, ProposalType, QueryDirective, QueryFormat, QueryFormatMimeType, QueryHtmlTarget, QuerySearchSource, QueryService, RADIUS_NAME, RotationButtonComponent, RoutesFeatureStore, SEARCH_DIRECTIVES, SEARCH_RESULTS_DIRECTIVES, SEARCH_TYPES, STYLELIST_OPTIONS, SearchBarComponent, SearchPointerSummaryDirective, SearchResultAddButtonComponent, SearchResultMode, SearchResultsComponent, SearchSelectorComponent, SearchService, SearchSettingsComponent, SearchSource, SearchSourceKind, SearchSourceService, SliceControl, SourceDirectionsType, SpatialFilterItemComponent, SpatialFilterItemType, SpatialFilterListComponent, SpatialFilterQueryType, SpatialFilterService, SpatialFilterType, SpatialFilterTypeComponent, StepsFeatureStore, StopsFeatureStore, StopsStore, StoredQueriesReverseSearchSource, StoredQueriesSearchSource, StyleListService, StyleModalDrawingComponent, StyleModalLayerButtonComponent, StyleModalLayerComponent, StyleService, SwipeControlComponent, TileArcGISRestDataSource, TileDebugDataSource, TileLayer, TileWatcher, TimeFilterButtonComponent, TimeFilterFormComponent, TimeFilterItemComponent, TimeFilterListBindingDirective, TimeFilterListComponent, TimeFilterService, TimeFilterStyle, TimeFilterType, ToastComponent, TooltipType, TrackFeatureButtonComponent, TypeCapabilities, TypeCatalog, VectorLayer, VectorTileLayer, VectorWatcher, WFSDataSource, WFSService, WMSDataSource, WMTSDataSource, WakeLockButtonComponent, WebSocketDataSource, WfsWorkspace, WfsWorkspaceService, WktService, WorkspaceSearchSource, WorkspaceSelectorDirective, WorkspaceUpdatorDirective, XYZDataSource, ZoomButtonComponent, addLayerAndFeaturesStyledToMap, addLayerAndFeaturesToMap, addLinearRingToOlPolygon, addOrRemoveLayer, addRouteToRoutesFeatureStore, addStopToStopsFeatureStore, addStopToStore, bufferOlGeometry, buildUrl, cadastreSearchSourceFactory, checkWfsParams, clearOlGeometryMidpoints, computeBestAreaUnit, computeBestLengthUnit, computeLayerTitleFromFile, computeMVTOptionsOnHover, computeOlFeatureExtent, computeOlFeaturesDiff, computeOlFeaturesExtent, computeProjectionsConstraints, computeRelativePosition, computeStopsPosition, computeTermSimilarity, convertDDToDMS, createDefaultTileGrid, createDrawHoleInteractionStyle, createDrawInteractionStyle, createFilterInMapExtentOrResolutionStrategy, createInteractionStyle, createMeasureInteractionStyle, createMeasureLayerStyle, createOlTooltipAtPoint, createOlTooltipDrawAtPoint, createOverlayDefaultStyle, createOverlayLayer, createOverlayLayerStyle, createOverlayMarkerStyle, createTableTemplate, ctrlKeyDown, defaultCoordinatesSearchResultFormatterFactory, defaultEpsg, defaultFieldNameGeometry, defaultIChercheSearchResultFormatterFactory, defaultMaxFeatures, defaultWfsVersion, detectFileEPSG, directionsStyle, doesOlGeometryIntersects, entitiesToRowData, exportToCSV, featureFromOl, featureRandomStyle, featureRandomStyleFunction, featureToOl, featureToSearchResult, featuresAreOutOfView, featuresAreTooDeepInView, findDiff, findLayerByLinkId, findParentId, formatDistance, formatDuration, formatMeasure, formatScale, formatStep, formatWFSQueryString, generateArcgisRestIdFromSourceOptions, generateFeatureIdFromSourceOptions, generateId, generateIdFromSourceOptions, generateWMSIdFromSourceOptions, generateWMTSIdFromSourceOptions, generateWfsIdFromSourceOptions, generateXYZIdFromSourceOptions, getAllChildLayersByDeletion, getAllChildLayersByProperty, getCommonVectorSelectedStyle, getCommonVectorStyle, getFileExtension, getFormatFromOptions, getGeoServiceAction, getLayerOptionIdentifier, getLayersByDeletion, getLayersLegends, getLinkedLayersOptions, getMousePositionFromOlGeometryEvent, getOlTooltipAtCenter, getOlTooltipsAtMidpoints, getResolutionFromScale, getRootParentByDeletion, getRootParentByProperty, getRowsInMapExtent, getSaveableOgcParams, getScaleFromResolution, getSelectedOnly, getTooltipsOfOlGeometry, gmlRegex, handleFileExportError, handleFileExportSuccess, handleFileImportError, handleFileImportSuccess, handleInvalidFileImportError, handleLayerPropertyChange, handleNothingToExportError, handleNothingToImportError, handleOgreServerImportError, handleSRSImportError, handleSizeFileImportError, handleUnreadbleFileImportError, hideOlFeature, hoverFeatureMarkerStyle, ichercheReverseSearchSourceFactory, ichercheSearchSourceFactory, ilayerSearchResultFormatterFactory, ilayerSearchSourceFactory, initRoutesFeatureStore, initStepsFeatureStore, initStopsFeatureStore, interactiveSelectionFormWidgetFactory, isBaseLayer, isBaseLayerLinked, isCsvExport, isLayerGroup, isLayerGroupOptions, isLayerItem, isLayerItemOptions, isLayerLinked, isLayerLinkedOptions, isLayerLinkedTogether, isLinkMaster, isSaveableLayer, jsonRegex, layerFeatureIsQueryable, layerIsQueryable, lonLatConversion, mapExtentStrategyActiveToolTip, measureOlGeometry, measureOlGeometryArea, measureOlGeometryLength, mergeLayersOptions, metersToFeet, metersToKilometers, metersToMiles, metersToUnit, moveToOlFeatures, mtmZoneFromLonLat, noElementSelected, nominatimSearchSourceFactory, ogcFilterWidgetFactory, olLayerFeatureIsQueryable, olLayerIsQueryable, olStyleToBasicIgoStyle, optionsApiFactory, osrmDirectionsSourcesFactory, pointerPositionSummaryMarkerStyle, provideCadastreSearchSource, provideCoordinatesReverseSearchSource, provideDefaultCoordinatesSearchResultFormatter, provideDefaultIChercheSearchResultFormatter, provideDirection, provideIChercheReverseSearchSource, provideIChercheSearchSource, provideILayerSearchResultFormatter, provideILayerSearchSource, provideInteractiveSelectionFormWidget, provideNominatimSearchSource, provideOffline, provideOgcFilterWidget, provideOptionsApi, provideOsrmDirectionsSource, provideQuerySearchSource, provideSearch, provideSearchSourceService, provideStoredQueriesReverseSearchSource, provideStoredQueriesSearchSource, provideStyleListLoader, provideStyleListOptions, provideWorkspaceSearchSource, querySearchSourceFactory, removeStopFromStore, renderFeatureFromOl, roundCoordTo, roundCoordToString, scaleExtent, searchSourceServiceFactory, setRowsInMapExtent, setSelectedOnly, sliceOlGeometry, sliceOlPolygon, sortLayersByZindex, sourceCanReverseSearch, sourceCanReverseSearchAsSummary, sourceCanSearch, squareMetersToAcres, squareMetersToHectares, squareMetersToSquareFeet, squareMetersToSquareKilometers, squareMetersToSquareMiles, squareMetersToUnit, standardizeUrl, storedqueriesReverseSearchSourceFactory, storedqueriesSearchSourceFactory, stringToLonLat, translateManeuverBearing, translateManeuverModifier, tryAddLoadingStrategy, tryAddSelectionStrategy, tryBindStoreLayer, updateOlGeometryCenter, updateOlGeometryMidpoints, updateOlTooltipAtCenter, updateOlTooltipDrawAtCenter, updateOlTooltipsAtMidpoints, updateOlTooltipsDrawAtMidpoints, updateStoreSorting, utmZoneFromLonLat, viewStatesAreEqual, withCadastreSource, withCoordinatesReverseSource, withIChercheReverseSource, withIChercheSource, withILayerSource, withNominatimSource, withOsrmSource, withStoredQueriesReverseSource, withStoredQueriesSource, withWorkspaceSource, workspaceSearchSourceFactory, zoneMtm, zoneUtm };
+export { AddCatalogDialogComponent, ArcGISRestCapabilitiesLayerTypes, ArcGISRestDataSource, BaseLayersSwitcherComponent, CATALOG_DIRECTIVES, CATALOG_LIBRARY_DIRECTIVES, CadastreSearchSource, CapabilitiesService, CartoDataSource, Catalog, CatalogBrowserComponent, CatalogItemType, CatalogLibraryComponent, CatalogService, ClusterDataSource, ConfigFileToGeoDBService, ConfirmationPopupComponent, CoordinatesReverseSearchSource, CoordinatesReverseSearchSourceFactory, CoordinatesSearchResultFormatter, CoordinatesUnit, CsvSeparator, DDtoDMS, DataService, DataSource, DataSourceService, DirectionRelativePositionType, DirectionSourceKind, DirectionsButtonsComponent, DirectionsComponent, DirectionsFormat, DirectionsInputsComponent, DirectionsResultsComponent, DirectionsService, DirectionsSource, DirectionsType, DownloadButtonComponent, DownloadService, DrawComponent, DrawControl, DrawIconService, DrawStyleService, DropGeoFileDirective, EditionWorkspace, EditionWorkspaceService, EpsgSelectorModalComponent, EsriStyleGenerator, EventRefresh, ExportButtonComponent, ExportError, ExportFormat, ExportFormatLegacy, ExportInvalidFileError, ExportNothingToExportError, ExportService, FEATURE, FEATURE_DETAILS_DIRECTIVES, FEATURE_DIRECTIVES, FILTER_DIRECTIVES, FeatureDataSource, FeatureDetailsComponent, FeatureDetailsDirective, FeatureFormComponent, FeatureMotion, FeatureStore, FeatureStoreInMapExtentStrategy, FeatureStoreInMapResolutionStrategy, FeatureStoreLoadingLayerStrategy, FeatureStoreLoadingStrategy, FeatureStoreSearchIndexStrategy, FeatureStoreSelectionStrategy, FeatureWorkspace, FeatureWorkspaceService, FilterableDataSourcePipe, GEOMETRY_FORM_FIELD_DIRECTIVES, GeoDB, GeoNetworkService, GeoPropertiesStrategy, GeolocateButtonComponent, GeolocationOverlayType, GeometryFormFieldComponent, GeometryFormFieldInputComponent, GeometrySliceError, GeometrySliceLineStringError, GeometrySliceMultiPolygonError, GeometrySliceTooManyIntersectionError, GeometryType, GoogleLinks, HomeExtentButtonComponent, HoverFeatureDirective, IChercheReverseSearchSource, IChercheSearchResultFormatter, IChercheSearchSource, ID_GROUP_PREFIX, ILayerSearchResultFormatter, ILayerSearchSource, IMPORT_EXPORT_DIRECTIVES, IgoCatalogBrowserModule, IgoCatalogLibraryModule, IgoCatalogModule, IgoConfirmationPopupModule, IgoDirectionsModule, IgoDownloadModule, IgoDrawModule, IgoDrawingToolModule, IgoFeatureDetailsModule, IgoFeatureFormModule, IgoFeatureModule, IgoFilterModule, IgoGeoModule, IgoGeoWorkspaceModule, IgoGeometryFormFieldModule, IgoGeometryModule, IgoHttpParameterCodec, IgoImportExportModule, IgoLayerModule, IgoMap, IgoMapModule, IgoMeasureModule, IgoMeasurerModule, IgoMetadataModule, IgoOgcFilterModule, IgoPrintModule, IgoQueryModule, IgoSearchBarModule, IgoSearchModule, IgoSearchResultsModule, IgoSearchSelectorModule, IgoSearchSettingsModule, IgoStyleListModule, IgoStyleModule, IgoToastModule, IgoWktModule, IgoWorkspaceSelectorModule, IgoWorkspaceUpdatorModule, ImageArcGISRestDataSource, ImageLayer, ImageWatcher, ImportError, ImportExportComponent, ImportInvalidFileError, ImportNothingToImportError, ImportOgreServerError, ImportSRSError, ImportService, ImportSizeError, ImportUnreadableFileError, InfoSectionComponent, InsertSourceInsertDBEnum, InteractiveSelectionFormWidget, LAYER, LAYER_DIRECTIVES, LabelType, LaneType, Layer, LayerBase, LayerController, LayerDB, LayerGroup, LayerGroupBase, LayerGroupComponent, LayerItemComponent, LayerLegendComponent, LayerLegendItemComponent, LayerLegendListBindingDirective, LayerLegendListComponent, LayerListComponent, LayerListControlsEnum, LayerListToolComponent, LayerListToolService, LayerSearchComponent, LayerService, LayerUnavailableComponent, LayerUnavailableListComponent, LayerViewerBottomActionsComponent, LayerViewerComponent, LayerVisibilityButtonComponent, Linked, LinkedProperties, MAP_DIRECTIVES, MEASURER_DIRECTIVES, MEASURE_UNIT_AUTO, METADATA_DIRECTIVES, MVTDataSource, ManeuverModifier, ManeuverType, MapBase, MapBrowserComponent, MapCenterComponent, MapController, MapGeolocationController, MapOfflineDirective, MapService, MapViewAction, MapViewController, MeasureAreaUnit, MeasureAreaUnitAbbreviation, MeasureFormatPipe, MeasureLengthUnit, MeasureLengthUnitAbbreviation, MeasureType, MeasurerComponent, MenuButtonComponent, MetadataAbstractComponent, MetadataButtonComponent, MetadataService, MiniBaseMapComponent, ModifyControl, NominatimSearchSource, OGCFilterService, OSMDataSource, OfflineButtonComponent, OgcFilterButtonComponent, OgcFilterComponent, OgcFilterFormComponent, OgcFilterOperator, OgcFilterOperatorType, OgcFilterSelectionComponent, OgcFilterTimeComponent, OgcFilterTimeSliderComponent, OgcFilterWidget, OgcFilterWriter, OgcFilterableFormComponent, OgcFilterableItemComponent, OgcFilterableListBindingDirective, OgcFilterableListComponent, OgcSelectorFields, OlDragSelectInteraction, OptionsApiService, OptionsService, OsmLinks, OsrmDirectionsSource, Overlay, OverlayAction, PointerPositionDirective, PrintComponent, PrintFormComponent, PrintLegendPosition, PrintOrientation, PrintOutputFormat, PrintPaperFormat, PrintResolution, PrintSaveImageFormat, PrintService, ProjectionService, PropertyTypeDetectorService, ProposalType, QueryDirective, QueryFormat, QueryFormatMimeType, QueryHtmlTarget, QuerySearchSource, QueryService, RADIUS_NAME, RotationButtonComponent, RoutesFeatureStore, SEARCH_DIRECTIVES, SEARCH_RESULTS_DIRECTIVES, SEARCH_TYPES, STYLELIST_OPTIONS, SearchBarComponent, SearchPointerSummaryDirective, SearchResultAddButtonComponent, SearchResultMode, SearchResultsComponent, SearchSelectorComponent, SearchService, SearchSettingsComponent, SearchSource, SearchSourceKind, SearchSourceService, SliceControl, SourceDirectionsType, SpatialFilterItemComponent, SpatialFilterItemType, SpatialFilterListComponent, SpatialFilterQueryType, SpatialFilterService, SpatialFilterType, SpatialFilterTypeComponent, StepsFeatureStore, StopsFeatureStore, StopsStore, StoredQueriesReverseSearchSource, StoredQueriesSearchSource, StyleListService, StyleModalDrawingComponent, StyleModalLayerButtonComponent, StyleModalLayerComponent, StyleService, SwipeControlComponent, TileArcGISRestDataSource, TileDebugDataSource, TileLayer, TileWatcher, TimeFilterButtonComponent, TimeFilterFormComponent, TimeFilterItemComponent, TimeFilterListBindingDirective, TimeFilterListComponent, TimeFilterService, TimeFilterStyle, TimeFilterType, ToastComponent, TooltipType, TrackFeatureButtonComponent, TypeCapabilities, TypeCatalog, VectorLayer, VectorTileLayer, VectorWatcher, WFSDataSource, WFSService, WMSDataSource, WMTSDataSource, WakeLockButtonComponent, WebSocketDataSource, WfsWorkspace, WfsWorkspaceService, WktService, WorkspaceSearchSource, WorkspaceSelectorDirective, WorkspaceUpdatorDirective, XYZDataSource, ZoomButtonComponent, addLayerAndFeaturesStyledToMap, addLayerAndFeaturesToMap, addLinearRingToOlPolygon, addOrRemoveLayer, addRouteToRoutesFeatureStore, addStopToStopsFeatureStore, addStopToStore, bufferOlGeometry, buildUrl, cadastreSearchSourceFactory, checkWfsParams, clearOlGeometryMidpoints, computeBestAreaUnit, computeBestLengthUnit, computeLayerTitleFromFile, computeMVTOptionsOnHover, computeOlFeatureExtent, computeOlFeaturesDiff, computeOlFeaturesExtent, computeProjectionsConstraints, computeRelativePosition, computeStopsPosition, computeTermSimilarity, convertDDToDMS, createDefaultTileGrid, createDrawHoleInteractionStyle, createDrawInteractionStyle, createFilterInMapExtentOrResolutionStrategy, createInteractionStyle, createMeasureInteractionStyle, createMeasureLayerStyle, createOlTooltipAtPoint, createOlTooltipDrawAtPoint, createOverlayDefaultStyle, createOverlayLayer, createOverlayLayerStyle, createOverlayMarkerStyle, createTableTemplate, ctrlKeyDown, defaultCoordinatesSearchResultFormatterFactory, defaultEpsg, defaultFieldNameGeometry, defaultIChercheSearchResultFormatterFactory, defaultMaxFeatures, defaultWfsVersion, detectFileEPSG, directionsStyle, doesOlGeometryIntersects, entitiesToRowData, exportToCSV, featureFromOl, featureRandomStyle, featureRandomStyleFunction, featureToOl, featureToSearchResult, featuresAreOutOfView, featuresAreTooDeepInView, findDiff, findLayerByLinkId, findParentId, formatDistance, formatDuration, formatMeasure, formatScale, formatStep, formatWFSQueryString, generateArcgisRestIdFromSourceOptions, generateFeatureIdFromSourceOptions, generateId, generateIdFromSourceOptions, generateWMSIdFromSourceOptions, generateWMTSIdFromSourceOptions, generateWfsIdFromSourceOptions, generateXYZIdFromSourceOptions, getAllChildLayersByDeletion, getAllChildLayersByProperty, getCommonVectorSelectedStyle, getCommonVectorStyle, getFileExtension, getFilterBadge, getFormatFromOptions, getGeoServiceAction, getLayerOptionIdentifier, getLayersByDeletion, getLayersLegends, getLinkedLayersOptions, getMousePositionFromOlGeometryEvent, getOlTooltipAtCenter, getOlTooltipsAtMidpoints, getResolutionFromScale, getRootParentByDeletion, getRootParentByProperty, getRowsInMapExtent, getSaveableOgcParams, getScaleFromResolution, getSelectedOnly, getTooltipsOfOlGeometry, gmlRegex, handleFileExportError, handleFileExportSuccess, handleFileImportError, handleFileImportSuccess, handleInvalidFileImportError, handleLayerPropertyChange, handleNothingToExportError, handleNothingToImportError, handleOgreServerImportError, handleSRSImportError, handleSizeFileImportError, handleUnreadbleFileImportError, hideOlFeature, hoverFeatureMarkerStyle, ichercheReverseSearchSourceFactory, ichercheSearchSourceFactory, ilayerSearchResultFormatterFactory, ilayerSearchSourceFactory, initRoutesFeatureStore, initStepsFeatureStore, initStopsFeatureStore, interactiveSelectionFormWidgetFactory, isBaseLayer, isBaseLayerLinked, isCsvExport, isLayerGroup, isLayerGroupOptions, isLayerItem, isLayerItemOptions, isLayerLinked, isLayerLinkedOptions, isLayerLinkedTogether, isLinkMaster, isSaveableLayer, jsonRegex, layerFeatureIsQueryable, layerIsQueryable, lonLatConversion, mapExtentStrategyActiveToolTip, measureOlGeometry, measureOlGeometryArea, measureOlGeometryLength, mergeLayersOptions, metersToFeet, metersToKilometers, metersToMiles, metersToUnit, moveToOlFeatures, mtmZoneFromLonLat, noElementSelected, nominatimSearchSourceFactory, ogcFilterWidgetFactory, olLayerFeatureIsQueryable, olLayerIsQueryable, olStyleToBasicIgoStyle, optionsApiFactory, osrmDirectionsSourcesFactory, pointerPositionSummaryMarkerStyle, provideCadastreSearchSource, provideCoordinatesReverseSearchSource, provideDefaultCoordinatesSearchResultFormatter, provideDefaultIChercheSearchResultFormatter, provideDirection, provideIChercheReverseSearchSource, provideIChercheSearchSource, provideILayerSearchResultFormatter, provideILayerSearchSource, provideInteractiveSelectionFormWidget, provideNominatimSearchSource, provideOffline, provideOgcFilterWidget, provideOptionsApi, provideOsrmDirectionsSource, provideQuerySearchSource, provideSearch, provideSearchSourceService, provideStoredQueriesReverseSearchSource, provideStoredQueriesSearchSource, provideStyleListLoader, provideStyleListOptions, provideWorkspaceSearchSource, querySearchSourceFactory, removeStopFromStore, renderFeatureFromOl, roundCoordTo, roundCoordToString, scaleExtent, searchSourceServiceFactory, setRowsInMapExtent, setSelectedOnly, sliceOlGeometry, sliceOlPolygon, sortLayersByZindex, sourceCanReverseSearch, sourceCanReverseSearchAsSummary, sourceCanSearch, squareMetersToAcres, squareMetersToHectares, squareMetersToSquareFeet, squareMetersToSquareKilometers, squareMetersToSquareMiles, squareMetersToUnit, standardizeUrl, storedqueriesReverseSearchSourceFactory, storedqueriesSearchSourceFactory, stringToLonLat, translateManeuverBearing, translateManeuverModifier, tryAddLoadingStrategy, tryAddSelectionStrategy, tryBindStoreLayer, updateOlGeometryCenter, updateOlGeometryMidpoints, updateOlTooltipAtCenter, updateOlTooltipDrawAtCenter, updateOlTooltipsAtMidpoints, updateOlTooltipsDrawAtMidpoints, updateStoreSorting, utmZoneFromLonLat, viewStatesAreEqual, withCadastreSource, withCoordinatesReverseSource, withIChercheReverseSource, withIChercheSource, withILayerSource, withNominatimSource, withOsrmSource, withStoredQueriesReverseSource, withStoredQueriesSource, withWorkspaceSource, workspaceSearchSourceFactory, zoneMtm, zoneUtm };
 //# sourceMappingURL=igo2-geo.mjs.map