@provoly/dashboard 1.4.9 → 1.4.11

package/fesm2022/provoly-dashboard-widgets-widget-map.mjs

@@ -291,7 +291,7 @@ class CqlUtils {
         const values = (Array.isArray(cond.value) ? cond.value : [cond.value]);
         if (attributeName) {
             values.forEach((value) => {
-                if (value && (typeof value !== 'string' || value.length > 0)) {
+                if (value !== undefined && (typeof value !== 'string' || value.length > 0)) {
                     const quoteSafeValue = `${value}`.replace(/'/g, "''");
                     switch (cond.operator) {
                         case 'EQUALS':
@@ -1171,8 +1171,6 @@ class TooltipManager {
         this.classicFeatures$ = new BehaviorSubject([]);
         this.tooltipNumber = 0;
         this.tooltipDisplayedIndex$ = new BehaviorSubject(0);
-        this.previous = '-';
-        this.previousPromise = undefined;
     }
     init(tooltipFactoryService, injector, store, subscriptions, widgetSize$, displayHeader$, map, popup, popupContent, interactionManager, parent) {
         this.tooltipFactoryService = tooltipFactoryService;
@@ -1196,34 +1194,36 @@ class TooltipManager {
                     offset: [9, 9]
                 });
                 this.map.addOverlay(this.popupOverlay);
-                this.popupContent.clear();
                 const allTooltipValues = [...wmsFeatures, ...classicFeatures.map((cf) => cf.values)];
-                this.generateTooltip(allTooltipValues[tooltipIndex]).then((component) => {
-                    this.tooltipNumber = allTooltipValues.length;
-                    if (!component) {
-                        popup.nativeElement.hidden = true;
-                        this.popupOverlay?.setPosition([-9999999999, -9999999999]);
-                    }
-                    else {
-                        popup.nativeElement.hidden = false;
-                        // Do not go outside the map
-                        const rect = {
-                            height: 200 + (header ? WIDGET_HEADER_HEIGHT.value : 0) + TOOLTIP_PADDING,
-                            width: 300 + TOOLTIP_PADDING
-                        };
-                        if (!this.calculatedTooltipPosition) {
-                            let pixel = this.tooltipEvent?.pixel;
-                            if (!!pixel && pixel[0] + rect.width > size.width) {
-                                pixel[0] = size.width - rect.width;
-                            }
-                            if (!!pixel && pixel[1] + rect.height > size.height) {
-                                pixel[1] = size.height - rect.height;
+                if (allTooltipValues[tooltipIndex]) {
+                    this.popupContent.clear();
+                    this.generateTooltip(allTooltipValues[tooltipIndex]).then((component) => {
+                        this.tooltipNumber = allTooltipValues.length;
+                        if (!component) {
+                            popup.nativeElement.hidden = true;
+                            this.popupOverlay?.setPosition([-9999999999, -9999999999]);
+                        }
+                        else {
+                            popup.nativeElement.hidden = false;
+                            // Do not go outside the map
+                            const rect = {
+                                height: 200 + (header ? WIDGET_HEADER_HEIGHT.value : 0) + TOOLTIP_PADDING,
+                                width: 300 + TOOLTIP_PADDING
+                            };
+                            if (!this.calculatedTooltipPosition) {
+                                let pixel = this.tooltipEvent?.pixel;
+                                if (!!pixel && pixel[0] + rect.width > size.width) {
+                                    pixel[0] = size.width - rect.width;
+                                }
+                                if (!!pixel && pixel[1] + rect.height > size.height) {
+                                    pixel[1] = size.height - rect.height;
+                                }
+                                this.calculatedTooltipPosition = this.map.getCoordinateFromPixel(pixel ?? [0, 0]);
                             }
-                            this.calculatedTooltipPosition = this.map.getCoordinateFromPixel(pixel ?? [0, 0]);
+                            this.popupOverlay?.setPosition(this.calculatedTooltipPosition);
                         }
-                        this.popupOverlay?.setPosition(this.calculatedTooltipPosition);
-                    }
-                });
+                    });
+                }
             }
         }));
         window.addEventListener('forceCloseMapTooltip', () => {
@@ -1266,28 +1266,21 @@ class TooltipManager {
     }
     generateTooltip(value) {
         if (value) {
-            if (this.previous !== JSON.stringify(value)) {
-                this.previous = JSON.stringify(value);
-                this.previousPromise = new Promise((resolve) => {
-                    const component$ = this.tooltipFactoryService.generateTooltip(value.oClass, this.injector, this.popupContent);
-                    this.previousTooltipSub?.unsubscribe();
-                    this.previousTooltipSub = component$.subscribe((component) => {
-                        if (component) {
-                            if (this.previousTooltip) {
-                                this.previousTooltip.destroy();
-                            }
-                            component.instance.data.item = value;
-                            component.instance.popup = this.popup;
-                            resolve(component);
+            return new Promise((resolve) => {
+                const component$ = this.tooltipFactoryService.generateTooltip(value.oClass, this.injector, this.popupContent);
+                this.previousTooltipSub?.unsubscribe();
+                this.previousTooltipSub = component$.subscribe((component) => {
+                    if (component) {
+                        if (this.previousTooltip) {
+                            this.previousTooltip.destroy();
                         }
-                        resolve(null);
-                    });
+                        component.instance.data.item = value;
+                        component.instance.popup = this.popup;
+                        resolve(component);
+                    }
+                    resolve(null);
                 });
-                return this.previousPromise;
-            }
-            else {
-                return this.previousPromise;
-            }
+            });
         }
         else {
             return Promise.resolve(null);
@@ -1493,7 +1486,6 @@ class WidgetMapComponent extends DataWidgetComponent {
         this.actionMenuOpen$ = new BehaviorSubject(false);
         this.olZoomElement$ = new BehaviorSubject(null);
         this.previousLayers = [];
-        this.layerGroups = [];
         this.layerSettingsExpandedState = {};
         this.DEFAULT_LAYER_GROUP = DEFAULT_LAYER_GROUP;
         this.getOlZoomElement();
@@ -1683,24 +1675,26 @@ class WidgetMapComponent extends DataWidgetComponent {
                     this.store.dispatch(DashboardActions.getCapability({ url: url }));
                 }
             });
+            autoOptions.layers = autoOptions.layers.map((layer) => ({
+                ...layer,
+                title: layer.title ?? this.translateService.instant(`@pry.widget.map.layerType.${layer.type}`, { ...layer }),
+                group: layer.group ?? DEFAULT_LAYER_GROUP
+            }));
+            autoOptions.layerGroups = autoOptions.layerGroups ?? [];
+            if (!autoOptions.layerGroups.find((g) => g.name === DEFAULT_LAYER_GROUP)) {
+                autoOptions.layerGroups.push({
+                    name: 'DEFAULT',
+                    singleLayer: false,
+                    visibleLayers: autoOptions.layers
+                        ? autoOptions.layers.filter((layer) => layer.group === DEFAULT_LAYER_GROUP).map((layer) => layer.title)
+                        : []
+                });
+            }
             return autoOptions;
         }), distinctUntilChanged((p, c) => equal(p, c)));
         this.subscriptions.add(this.options$.pipe(filter((opt) => !!opt)).subscribe((options) => {
             this.optionsCopy = JSON.parse(JSON.stringify(options));
             this.optionsCopy.layers?.forEach((layer) => (this.layerSettingsExpandedState[layer.title ?? 'MISSING TITLE'] = false));
-            if (this.optionsCopy.layers &&
-                this.optionsCopy.layers.some((layer) => !layer.group || layer.group === DEFAULT_LAYER_GROUP))
-                this.optionsCopy.layers
-                    ?.filter((l) => (!l.group || l.group === DEFAULT_LAYER_GROUP) &&
-                    !this.layerGroups
-                        .find((group) => group.name === DEFAULT_LAYER_GROUP)
-                        ?.visibleLayers.includes(l.title ?? 'MISSING TITLE'))
-                    .forEach((layer) => {
-                    this.store.dispatch(DashboardActions.updateLayerVisibility({
-                        name: DEFAULT_LAYER_GROUP,
-                        visibleLayers: layer.title ?? 'MISSING TITLE'
-                    }));
-                });
             this.optionsCopy.layers = this.optionsCopy.layers?.map((layer) => ({
                 ...layer,
                 group: layer.group ?? DEFAULT_LAYER_GROUP
@@ -1746,15 +1740,6 @@ class WidgetMapComponent extends DataWidgetComponent {
             : {}), startWith({}))
             .subscribe((possibleStyles) => (this.possibleStyles = possibleStyles)));
         this.hasSlideLayer$ = this.options$.pipe(map((options) => (options.layers ?? []).map((layer) => !!layer.slide && layer.slide !== 'all').reduce((a, b) => a || b, false)));
-        this.layerGroups$ = this.store.select(DashboardSelectors.layerGroups);
-        this.subscriptions.add(this.layerGroups$.subscribe((layerGroups) => {
-            this.layerGroups = layerGroups;
-        }));
-        this.store.dispatch(DashboardActions.initDefaultLayerGroup({
-            layers: this.optionsCopy.layers
-                ?.filter((layer) => layer.group === undefined)
-                .map((layer) => layer.title ?? this.translateService.instant(`@pry.widget.map.layerType.${layer.type}`, { ...layer }))
-        }));
     }
     initInteractionManager() {
         return this.interactionManager.init(this);
@@ -1817,7 +1802,7 @@ class WidgetMapComponent extends DataWidgetComponent {
             this.itemStyles$,
             this.datasourceFilters$,
             this.fields$
-        ]).pipe(filter(([resultSet, options, classes, additionalLayers, itemStyles, filters, fields]) => !!resultSet && !!options && !!classes && !!fields), withLatestFrom(this.layerGroups$), map(([[resultSet, options, classes, additionalLayers, itemStyles, filters, fields], layerGroups]) => {
+        ]).pipe(filter(([resultSet, options, classes, additionalLayers, itemStyles, filters, fields]) => !!resultSet && !!options && !!classes && !!fields), map(([resultSet, options, classes, additionalLayers, itemStyles, filters, fields]) => {
             let hasRelationLayer = null;
             const layers = (options?.layers || [])
                 .filter(
@@ -1902,7 +1887,7 @@ class WidgetMapComponent extends DataWidgetComponent {
                 });
             }
             layers.push(...additionalLayers);
-            const visibleLayers = layerGroups.map((group) => group.visibleLayers).flat();
+            const visibleLayers = options.layerGroups.map((group) => group.visibleLayers).flat();
             layers.forEach((layer, idx) => {
                 if (!visibleLayers.includes(layer.get('title'))) {
                     layer.setVisible(false);
@@ -2192,9 +2177,9 @@ class WidgetMapComponent extends DataWidgetComponent {
         this.updateLayerGroup(group, singleLayer, singleLayer ? [group.visibleLayers[0]] : group.visibleLayers);
     }
     updateLayerGroup(group, singleLayer, visibleLayers) {
-        const layerGroup = typeof group === 'string' ? this.layerGroups.find((g) => g.name === group) : group;
-        const groupIndex = this.layerGroups.findIndex((g) => g.name === layerGroup.name);
-        this.layerGroups = this.layerGroups.map((g, i) => i === groupIndex
+        const layerGroup = typeof group === 'string' ? this.optionsCopy.layerGroups.find((g) => g.name === group) : group;
+        const groupIndex = this.optionsCopy.layerGroups.findIndex((g) => g.name === layerGroup.name);
+        this.optionsCopy.layerGroups = this.optionsCopy.layerGroups.map((g, i) => i === groupIndex
             ? {
                 ...g,
                 singleLayer: singleLayer ?? layerGroup.singleLayer,
@@ -2206,8 +2191,8 @@ class WidgetMapComponent extends DataWidgetComponent {
     }
     changeTitle($event, layer, group) {
         const newTitle = $event.currentTarget.value;
-        this.updateLayerGroup(group, undefined, this.layerGroups
-            .filter((g) => g.name === group.name)
+        this.updateLayerGroup(group, undefined, this.optionsCopy
+            .layerGroups.filter((g) => g.name === group.name)
             .map((g, i) => g.visibleLayers.map((l) => (l === layer.title ? newTitle : l)))
             .flat());
         delete this.layerSettingsExpandedState[layer.title];
@@ -2216,7 +2201,6 @@ class WidgetMapComponent extends DataWidgetComponent {
     }
     emitManifest() {
         this.removeEmptyLayerGroups();
-        this.store.dispatch(DashboardActions.updateLayerGroups({ layerGroups: this.layerGroups }));
         this.manifestModified.emit({
             widgetIndex: this.widgetIndex,
             manifest: {
@@ -2343,10 +2327,10 @@ class WidgetMapComponent extends DataWidgetComponent {
             });
             if (_layer) {
                 olLayer?.setVisible(true);
-                this.store.dispatch(DashboardActions.updateLayerVisibility({ name: group.name, visibleLayers: [_layer.title] }));
+                this.updateLayerVisibility(group.name, [_layer.title]);
             }
             else {
-                this.store.dispatch(DashboardActions.updateLayerVisibility({ name: group.name, visibleLayers: [] }));
+                this.updateLayerVisibility(group.name, []);
             }
         }
         else {
@@ -2354,7 +2338,7 @@ class WidgetMapComponent extends DataWidgetComponent {
             const visibleLayers = group.visibleLayers.includes(_layer?.title)
                 ? group.visibleLayers.filter((layer) => layer !== _layer?.title)
                 : [...group.visibleLayers, _layer?.title];
-            this.store.dispatch(DashboardActions.updateLayerVisibility({ name: group.name, visibleLayers }));
+            this.updateLayerVisibility(group.name, visibleLayers);
         }
         this.map.updateSize();
     }
@@ -2363,9 +2347,25 @@ class WidgetMapComponent extends DataWidgetComponent {
             return group.visibleLayers.includes(layer.title ?? '');
         }
         else {
-            return !!this.layerGroups.find((g) => g.name === layer.group)?.visibleLayers.includes(layer.title ?? '');
+            return !!this.optionsCopy
+                .layerGroups.find((g) => g.name === layer.group)
+                ?.visibleLayers.includes(layer.title ?? '');
         }
     }
+    updateLayerVisibility(name, visibleLayers) {
+        this.optionsCopy.layerGroups = [
+            ...(this.optionsCopy.layerGroups ?? []).map((group) => group.name === name
+                ? {
+                    ...group,
+                    visibleLayers: visibleLayers
+                        ? typeof visibleLayers === 'string'
+                            ? [...group.visibleLayers, visibleLayers]
+                            : visibleLayers
+                        : group.visibleLayers
+                }
+                : group)
+        ];
+    }
     changeAutoLayer($event) {
         this.optionsCopy.automaticLayers = $event;
         if (!this.optionsCopy.automaticLayers) {
@@ -2472,36 +2472,34 @@ class WidgetMapComponent extends DataWidgetComponent {
         });
     }
     addLayerGroup() {
-        console.log(this.layerGroups);
-        console.log(this.optionsCopy.layers);
-        this.layerGroups = [
-            ...this.layerGroups,
+        this.optionsCopy.layerGroups = [
+            ...this.optionsCopy.layerGroups,
             {
-                name: this.translateService.instant('@pry.widget.map.layerSettings.group') + ' ' + (this.layerGroups.length + 1),
+                name: this.translateService.instant('@pry.widget.map.layerSettings.group') +
+                    ' ' +
+                    (this.optionsCopy.layerGroups.length + 1),
                 singleLayer: false,
                 visibleLayers: []
             }
         ];
-        console.log(this.layerGroups);
-        console.log(this.optionsCopy.layers);
-        const group = this.layerGroups[this.layerGroups.length - 1];
+        const group = this.optionsCopy.layerGroups[this.optionsCopy.layerGroups.length - 1];
         this.addLayer(group);
     }
     updateLayerGroupName(group, $event) {
         const [name, singleLayer, visibleLayers] = [group.name, group.singleLayer, group.visibleLayers];
-        const groupIndex = this.layerGroups.findIndex((g) => g.name === group.name);
+        const groupIndex = this.optionsCopy.layerGroups.findIndex((g) => g.name === group.name);
         const newName = $event.currentTarget.value;
         if (name === DEFAULT_LAYER_GROUP) {
             const layersToTransfer = this.optionsCopy.layers?.filter((layer) => layer.group === DEFAULT_LAYER_GROUP).map((l) => l.title) ?? [];
-            this.layerGroups = [
-                ...this.layerGroups,
+            this.optionsCopy.layerGroups = [
+                ...this.optionsCopy.layerGroups,
                 {
                     name: newName,
                     singleLayer,
                     visibleLayers: visibleLayers.filter((l) => layersToTransfer.includes(l))
                 }
             ];
-            this.layerGroups = this.layerGroups.map((g, i) => i === groupIndex
+            this.optionsCopy.layerGroups = this.optionsCopy.layerGroups.map((g, i) => i === groupIndex
                 ? {
                     name: DEFAULT_LAYER_GROUP,
                     singleLayer,
@@ -2510,7 +2508,7 @@ class WidgetMapComponent extends DataWidgetComponent {
                 : g);
         }
         else {
-            this.layerGroups = this.layerGroups.map((g, i) => i === groupIndex ? { name: newName, singleLayer, visibleLayers } : g);
+            this.optionsCopy.layerGroups = this.optionsCopy.layerGroups.map((g, i) => i === groupIndex ? { name: newName, singleLayer, visibleLayers } : g);
         }
         // update groups on options layers
         if (this.optionsCopy.layers) {
@@ -2528,7 +2526,7 @@ class WidgetMapComponent extends DataWidgetComponent {
         });
     }
     deleteLayerGroup(name) {
-        this.layerGroups = this.layerGroups.filter((group) => group.name !== name);
+        this.optionsCopy.layerGroups = this.optionsCopy.layerGroups.filter((group) => group.name !== name);
         this.optionsCopy.layers = this.optionsCopy.layers?.map((layer) => layer.group == name ? { ...layer, group: DEFAULT_LAYER_GROUP } : layer);
     }
     drop(event, group) {
@@ -2540,7 +2538,7 @@ class WidgetMapComponent extends DataWidgetComponent {
     }
     moveLayerBetweenGroups(movedLayer, newGroup) {
         // remove it from old group
-        this.updateLayerGroup(movedLayer.group, undefined, this.layerGroups
+        this.updateLayerGroup(movedLayer.group, undefined, this.optionsCopy.layerGroups
             ?.find((group) => group.name === movedLayer.group)
             ?.visibleLayers.filter((layer) => layer !== movedLayer.title));
         // add it to new group
@@ -2578,7 +2576,7 @@ class WidgetMapComponent extends DataWidgetComponent {
     }
     updateLayerOrder() {
         let order = 1;
-        this.layerGroups?.forEach((group) => {
+        this.optionsCopy.layerGroups?.forEach((group) => {
             const groupLayers = this.optionsCopy.layers?.filter((layer) => layer.group === group.name);
             if (groupLayers) {
                 groupLayers.forEach((layer) => (layer.order = order++));
@@ -2589,14 +2587,14 @@ class WidgetMapComponent extends DataWidgetComponent {
         return this.optionsCopy.layers?.some((layer) => layer.group === group.name);
     }
     removeEmptyLayerGroups() {
-        this.layerGroups = this.layerGroups.filter((group) => this.optionsCopy.layers?.some((layer) => layer.group === group.name) || group.name === DEFAULT_LAYER_GROUP);
+        this.optionsCopy.layerGroups = this.optionsCopy.layerGroups.filter((group) => this.optionsCopy.layers?.some((layer) => layer.group === group.name) || group.name === DEFAULT_LAYER_GROUP);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: WidgetMapComponent, deps: [{ token: i1.Store }, { token: i2.PryI18nService }, { token: i2.TooltipFactoryService }, { token: i2.SymbolService }, { token: i0.Injector }, { token: WidgetMapLayerService }, { token: i2.PryAggregationService }, { token: i0.ElementRef }, { token: PRY_GEOAUTH_TOKEN, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: WidgetMapComponent, selector: "pry-widget-map", viewQueries: [{ propertyName: "mapRef", first: true, predicate: ["mapRef"], descendants: true }, { propertyName: "popup", first: true, predicate: ["popup"], descendants: true }, { propertyName: "popupContent", first: true, predicate: ["popupContent"], descendants: true, read: ViewContainerRef }, { propertyName: "exportTypeTemplate", first: true, predicate: ["exportTypeTemplate"], descendants: true, read: TemplateRef }, { propertyName: "sliderElement", first: true, predicate: ["sliderElement"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<pry-widget-map-css></pry-widget-map-css>\n<div class=\"o-widget o-widget--map\">\n  <pry-widget-header\n    [datasourceIds]=\"(datasourceIds$ | async) ?? []\"\n    *ngIf=\"displayHeader$ | async\"\n    [widgetIndex]=\"widgetIndex\"\n    [manifest]=\"manifest\"\n    (manifestModified)=\"manifestModified.emit($event)\"\n    [headerOptions]=\"(displayHeader$ | async) ?? {}\"\n    #header\n  >\n    <pry-settings\n      (saveTriggered)=\"emitManifest()\"\n      (changeTitle)=\"changeWidgetTitle($event)\"\n      [headerPresent]=\"displayHeader$ | async\"\n      [widgetIndex]=\"widgetIndex\"\n      [header]=\"header\"\n      [open$]=\"open$\"\n      class=\"o-settings\"\n    >\n      <div class=\"m-form-label-field\">\n        <label class=\"a-label\" for=\"map_style\">{{ '@pry.widget.map.style' | i18n }} :</label>\n        <pry-select\n          (ngModelChange)=\"changeStyle($event)\"\n          [items]=\"styles$ | async\"\n          [ngModel]=\"optionsCopy.style\"\n          bindLabel=\"label\"\n          bindValue=\"identifier\"\n          id=\"map_style\"\n        ></pry-select>\n      </div>\n\n      <div class=\"m-form-label-field\" *ngIf=\"optionsCopy.style === STYLE_FROM_URL\">\n        <label class=\"a-label\" for=\"style_URL\">{{ '@pry.widget.map.styleUrl' | i18n }}</label>\n        <input\n          id=\"style_URL\"\n          class=\"a-form-field\"\n          type=\"text\"\n          (input)=\"changeStyleURL($event)\"\n          [value]=\"optionsCopy.styleURL ?? ''\"\n        />\n      </div>\n\n      <pry-checkbox (ngModelChange)=\"changeAutoLayer($event)\" [ngModel]=\"optionsCopy.automaticLayers ?? false\">\n        {{ '@pry.widget.map.autoLayer' | i18n }}\n      </pry-checkbox>\n\n      <pry-checkbox (ngModelChange)=\"changeAttributions($event)\" [ngModel]=\"optionsCopy.attributions ?? false\">\n        {{ '@pry.widget.map.attributions' | i18n }}\n      </pry-checkbox>\n\n      <pry-checkbox (ngModelChange)=\"changeSlideOption($event)\" [ngModel]=\"hasSlideLayer$ | async\">\n        {{ '@pry.widget.map.slide.global' | i18n }}\n      </pry-checkbox>\n\n      <div class=\"o-layer-settings\" cdkDropListGroup cdkDragBoundary>\n        <h4 class=\"a-label\">{{ '@pry.widget.map.layerSettings.title' | i18n }}</h4>\n        <div class=\"u-display-flex -justify-center\">\n          <button class=\"a-btn a-btn--primary\" (click)=\"addLayerGroup()\" type=\"button\">\n            {{ '@pry.widget.map.layerSettings.addLayerGroup' | i18n }}\n          </button>\n        </div>\n        <ng-container *ngFor=\"let group of layerGroups; let groupIdx = index\">\n          <div *ngIf=\"isGroupUsedByWidgetLayers(group)\" class=\"o-layer-settings__group\">\n            <div class=\"m-form-label-field o-layer-settings__group-title\">\n              <label class=\"a-label\" for=\"map_layerGroupTitle-{{ groupIdx }}\">\n                {{ '@pry.widget.map.layerSettings.layerGroupName' | i18n }}<span class=\"-obligatory-red\">*</span\n                >{{ '@pry.widget.map.layerSettings.optionalColon' | i18n }}\n              </label>\n              <div class=\"u-display-flex\">\n                <div class=\"m-form-label-field u-display-flex -row -gap-10\">\n                  <input\n                    id=\"map_layerGroupTitle-{{ groupIdx }}\"\n                    class=\"a-form-field\"\n                    type=\"text\"\n                    (change)=\"updateLayerGroupName(group, $event)\"\n                    [value]=\"group.name === DEFAULT_LAYER_GROUP ? ('@pry.widget.map.noGroup' | i18n) : group.name\"\n                  />\n                  <button\n                    *ngIf=\"group.name !== DEFAULT_LAYER_GROUP\"\n                    class=\"a-btn--icon-only a-tooltip o-layer-settings__delete-group\"\n                    [attr.data-tooltip]=\"'@pry.widget.map.layerSettings.deleteGroup' | i18n\"\n                    data-tooltip-position=\"left\"\n                    (click)=\"deleteLayerGroup(group.name)\"\n                  >\n                    <pry-icon [height]=\"16\" [width]=\"16\" iconSvg=\"bin_normal\"></pry-icon>\n                  </button>\n                </div>\n              </div>\n            </div>\n            @if (group.name !== DEFAULT_LAYER_GROUP) {\n              <div class=\"m-form-radio-group\">\n                <div class=\"m-form-radio-group__item\">\n                  <input\n                    type=\"radio\"\n                    id=\"multiselection-{{ groupIdx }}\"\n                    [ngModel]=\"group.singleLayer\"\n                    (ngModelChange)=\"updateLayerGroupSingleLayer(group, $event)\"\n                    [value]=\"false\"\n                    [name]=\"group.name\"\n                  />\n                  <label class=\"a-label\" for=\"multiselection-{{ groupIdx }}\">{{\n                    '@pry.widget.map.layerSettings.multipleLayer' | i18n\n                  }}</label>\n                </div>\n                <div class=\"m-form-radio-group__item\">\n                  <input\n                    type=\"radio\"\n                    id=\"monoselection-{{ groupIdx }}\"\n                    [ngModel]=\"group.singleLayer\"\n                    (ngModelChange)=\"updateLayerGroupSingleLayer(group, $event)\"\n                    [value]=\"true\"\n                    [name]=\"group.name\"\n                  />\n                  <label class=\"a-label\" for=\"monoselection-{{ groupIdx }}\">{{\n                    '@pry.widget.map.layerSettings.singleLayer' | i18n\n                  }}</label>\n                </div>\n              </div>\n            }\n            <div class=\"m-btn-group\">\n              <div class=\"u-display-flex -align-center\">\n                <button (click)=\"addLayer(group)\" class=\"a-btn -link-like\" type=\"button\">\n                  + {{ '@pry.widget.map.addLayer' | i18n }}\n                </button>\n              </div>\n              <button (click)=\"toggleExpandAll(group)\" class=\"a-btn -link-like\" type=\"button\">\n                {{\n                  layerSettingsExpandedState[group.name]\n                    ? ('@pry.widget.map.layerSettings.foldAll' | i18n)\n                    : ('@pry.widget.map.layerSettings.unfoldAll' | i18n)\n                }}\n              </button>\n            </div>\n            <div\n              cdkDropList\n              class=\"o-layer-settings__layers\"\n              (cdkDropListDropped)=\"drop($event, group)\"\n              [attr.data-layer-group]=\"group.name\"\n            >\n              <ng-container *ngFor=\"let layer of optionsCopy?.layers; let i = index\">\n                <div\n                  *ngIf=\"layer.group === group.name\"\n                  class=\"o-layer-settings__layer-wrapper\"\n                  cdkDrag\n                  [cdkDragData]=\"layer\"\n                  [cdkDragDisabled]=\"layerSettingsExpandedState[layer.title!]\"\n                >\n                  <div class=\"drag-placeholder\" *cdkDragPlaceholder></div>\n                  <div class=\"o-layer-settings__layer-header\">\n                    <div class=\"u-display-flex -align-center\">\n                      <pry-icon\n                        [class.-disabled]=\"layerSettingsExpandedState[layer.title!]\"\n                        class=\"drag-handle\"\n                        [height]=\"16\"\n                        [width]=\"16\"\n                        iconSvg=\"drag_indicator\"\n                      ></pry-icon>\n                      <button\n                        class=\"a-btn--icon-only unfold-layer\"\n                        (click)=\"toggleLayerExpand(layer, group)\"\n                        type=\"button\"\n                      >\n                        <pry-icon\n                          [height]=\"5\"\n                          [width]=\"9\"\n                          [iconSvg]=\"layerSettingsExpandedState[layer.title!] ? 'chevron_top' : 'chevron_bottom'\"\n                        ></pry-icon>\n                      </button>\n                      <h5 class=\"a-h5\">{{ layer.title ?? ('@pry.widget.map.layer' | i18n: { index: i + 1 }) }}</h5>\n                    </div>\n                    <button\n                      class=\"o-layer-settings__delete-layer a-btn--icon-only a-tooltip\"\n                      [attr.data-tooltip]=\"'@pry.widget.map.layerSettings.deleteLayer' | i18n\"\n                      data-tooltip-position=\"left\"\n                      (click)=\"deleteLayer(i, layer, group)\"\n                    >\n                      <pry-icon [height]=\"16\" [width]=\"16\" iconSvg=\"bin_normal\"></pry-icon>\n                    </button>\n                  </div>\n                  <div *ngIf=\"layerSettingsExpandedState[layer.title!]\" class=\"o-layer-settings__layer-content\">\n                    <div class=\"o-settings__popup__content__fields__content\">\n                      <pry-range\n                        [ngModel]=\"(layer?.opacity ?? 100) + ''\"\n                        (ngModelChange)=\"changeOpacity(layer, $event)\"\n                        labelTranslate=\"@pry.widget.map.opacity\"\n                        min=\"0\"\n                        max=\"100\"\n                      ></pry-range>\n\n                      <fieldset>\n                        <legend class=\"u-visually-hidden\">\n                          {{ '@pry.widget.map.layerOptions' | i18n: { index: i + 1 } }}\n                        </legend>\n                        <div class=\"m-form-label-field\">\n                          <label class=\"a-label\" for=\"layer_{{ i + 1 }}_title\">{{\n                            '@pry.widget.map.layerTitle' | i18n\n                          }}</label>\n                          <input\n                            id=\"layer_{{ i + 1 }}_title\"\n                            class=\"a-form-field\"\n                            type=\"text\"\n                            (change)=\"changeTitle($event, layer, group)\"\n                            [value]=\"layer.title\"\n                          />\n                        </div>\n                        <div class=\"m-form-label-field\" *ngIf=\"!['geoserver', 'auto'].includes(layer.type)\">\n                          <label class=\"a-label\" for=\"map_layerType\">{{\n                            '@pry.widget.map.layerType.title' | i18n\n                          }}</label>\n                          <pry-select\n                            (ngModelChange)=\"changeLayerType($event, i)\"\n                            [items]=\"layerTypes\"\n                            [ngModel]=\"layer.type\"\n                            i18nPrefix=\"@pry.widget.map.layerType.\"\n                            id=\"map_layerType\"\n                          ></pry-select>\n                        </div>\n\n                        <div class=\"m-form-label-field\" *ngIf=\"['geoserver', 'wms'].includes(layer.type)\">\n                          <ng-container *ngIf=\"getAsWmsType(layer) as wmslayer\">\n                            <label class=\"a-label\" for=\"map_layerStyle\">{{\n                              '@pry.widget.map.layerStyle' | i18n\n                            }}</label>\n                            <pry-select\n                              (ngModelChange)=\"changeLayerStyle($event, layer)\"\n                              [items]=\"layerStyleOptions(layer)\"\n                              [ngModel]=\"getStyle(layer)\"\n                              bindLabel=\"label\"\n                              bindValue=\"id\"\n                              id=\"map_layerStyle\"\n                            ></pry-select>\n                          </ng-container>\n                        </div>\n\n                        <div class=\"m-form-label-field\">\n                          <pry-checkbox (ngModelChange)=\"changeFit($event, layer)\" [ngModel]=\"layer.fit\">\n                            {{ '@pry.widget.map.fit' | i18n }}\n                          </pry-checkbox>\n                        </div>\n\n                        <div\n                          *ngIf=\"\n                            layer.type !== 'relation' &&\n                            layer.type !== 'wms' &&\n                            layer.type !== 'wmts' &&\n                            layer.type !== 'geoserver' &&\n                            layer.type !== 'featurelayer' &&\n                            layer.type !== 'vectortile' &&\n                            layer.type !== 'rastertile' &&\n                            layer.type !== 'auto'\n                          \"\n                          class=\"m-form-label-field\"\n                        >\n                          <label class=\"a-label\" for=\"map_classes\">{{ '@pry.widget.map.classes' | i18n }}</label>\n                          <pry-select\n                            (ngModelChange)=\"changeClasses($event, layer)\"\n                            [items]=\"usedClasses$ | async\"\n                            [multiple]=\"true\"\n                            [ngModel]=\"layer.classes\"\n                            bindLabel=\"name\"\n                            bindValue=\"id\"\n                            id=\"map_classes\"\n                          ></pry-select>\n                        </div>\n                      </fieldset>\n                    </div>\n\n                    <fieldset\n                      *ngIf=\"\n                        layer.type !== 'relation' &&\n                        layer.type !== 'wms' &&\n                        layer.type !== 'wmts' &&\n                        layer.type !== 'geoserver' &&\n                        layer.type !== 'featurelayer' &&\n                        layer.type !== 'vectortile' &&\n                        layer.type !== 'rastertile'\n                      \"\n                    >\n                      <legend class=\"u-visually-hidden\">{{ '@pry.widget.map.locationAttr' | i18n }}</legend>\n                      <ng-container\n                        *ngIf=\"\n                          layer\n                            | geometryFieldsFor: { resultSet: resultSet$, classes: layer.classes, type: layer.type }\n                            | async as fields\n                        \"\n                      >\n                        <div\n                          *ngIf=\"\n                            [\n                              'heatmap',\n                              'bubble',\n                              'marker',\n                              'point',\n                              'line',\n                              'polygon',\n                              'multi-line',\n                              'multi-polygon'\n                            ].indexOf(layer.type) >= 0\n                          \"\n                        >\n                          <div class=\"m-form-label-field\">\n                            <label class=\"a-label\" for=\"map_locationAttribute_both\">{{\n                              '@pry.widget.map.locationAttribute.both' | i18n\n                            }}</label>\n                            <pry-select\n                              (ngModelChange)=\"changeLocationAttributes($event, layer)\"\n                              [items]=\"fields\"\n                              [ngModel]=\"layer.attribute\"\n                              bindLabel=\"name\"\n                              bindValue=\"name\"\n                              id=\"map_locationAttribute_both\"\n                            ></pry-select>\n                          </div>\n                        </div>\n\n                        <div *ngIf=\"['heatmap', 'bubble'].indexOf(layer.type) >= 0\">\n                          <div class=\"m-form-label-field\">\n                            <label class=\"a-label\" for=\"map_intensityAttribute\">{{\n                              '@pry.widget.map.intensityAttribute' | i18n\n                            }}</label>\n                            <pry-select\n                              (ngModelChange)=\"changeIntensityAttributes($event, layer)\"\n                              [items]=\"fields\"\n                              [ngModel]=\"layerHasIntensity(layer).intensityAttribute\"\n                              bindLabel=\"name\"\n                              bindValue=\"name\"\n                              id=\"map_intensityAttribute\"\n                            ></pry-select>\n                          </div>\n                        </div>\n                      </ng-container>\n                    </fieldset>\n\n                    <fieldset\n                      *ngIf=\"\n                        layer.type === 'wms' ||\n                        layer.type === 'geoserver' ||\n                        layer.type === 'wmts' ||\n                        layer.type === 'featurelayer' ||\n                        layer.type === 'vectortile' ||\n                        layer.type === 'rastertile'\n                      \"\n                    >\n                      <ng-container *ngIf=\"layer.type !== 'geoserver'\">\n                        <div class=\"m-form-label-field\">\n                          <label class=\"a-label\" for=\"map_wms_url\">{{ '@pry.widget.map.wms.url' | i18n }}</label>\n                          <input\n                            id=\"map_wms_url\"\n                            class=\"a-form-field\"\n                            type=\"text\"\n                            (input)=\"changeUrl($event, layer)\"\n                            [value]=\"layer.url\"\n                          />\n                        </div>\n                      </ng-container>\n\n                      <div class=\"m-form-label-field\" *ngIf=\"layer.type === 'wms' || layer.type === 'wmts'\">\n                        <label class=\"a-label\" for=\"map_wms_paramLayer\">{{\n                          '@pry.widget.map.wms.paramLayer' | i18n\n                        }}</label>\n                        <input\n                          id=\"map_wms_paramLayer\"\n                          class=\"a-form-field\"\n                          type=\"text\"\n                          (input)=\"changeParamLayer($event, layer)\"\n                          [value]=\"layer.paramLayer\"\n                        />\n                      </div>\n\n                      <div class=\"m-form-label-field\" *ngIf=\"layer.type === 'wmts'\">\n                        <label class=\"a-label\" for=\"map_wms_matrixSet\">{{\n                          '@pry.widget.map.wms.matrixSet' | i18n\n                        }}</label>\n                        <input\n                          id=\"map_wms_matrixSet\"\n                          class=\"a-form-field\"\n                          type=\"text\"\n                          (input)=\"changeMatrixSet($event, layer)\"\n                          [value]=\"layer.matrixSet\"\n                        />\n                      </div>\n\n                      <div class=\"m-form-label-field\" *ngIf=\"layer.type === 'wmts'\">\n                        <label class=\"a-label\" for=\"map_wms_style\">{{ '@pry.widget.map.wms.style' | i18n }}</label>\n                        <input\n                          id=\"map_wms_style\"\n                          class=\"a-form-field\"\n                          type=\"text\"\n                          (input)=\"changeParamStyle($event, layer)\"\n                          [value]=\"layer.style\"\n                        />\n                      </div>\n\n                      <div class=\"m-form-label-field\" *ngIf=\"layer.type === 'wms' || layer.type === 'geoserver'\">\n                        <legend class=\"u-visually-hidden\">{{ '@pry.widget.map.tile' | i18n }}</legend>\n                        <pry-checkbox\n                          (ngModelChange)=\"changeParamTiled($event, layer)\"\n                          [ngModel]=\"layer?.paramTiled ?? false\"\n                        >\n                          {{ '@pry.widget.map.wms.paramTiled' | i18n }}\n                        </pry-checkbox>\n                      </div>\n                    </fieldset>\n\n                    <fieldset *ngIf=\"layer.type === 'marker'\">\n                      <legend class=\"u-visually-hidden\">{{ '@pry.widget.map.clustering' | i18n }}</legend>\n                      <div class=\"m-form-label-field\">\n                        <pry-checkbox (ngModelChange)=\"changeClustered(layer, $event)\" [ngModel]=\"layer.clustered\">\n                          {{ '@pry.widget.map.clustered' | i18n }}\n                        </pry-checkbox>\n                      </div>\n                      <div *ngIf=\"layer.clustered\">\n                        <pry-range\n                          [ngModel]=\"layer.clustered\"\n                          (ngModelChange)=\"changeClusterDistance(layer, $event)\"\n                          labelTranslate=\"@pry.widget.map.clusterDistance\"\n                          min=\"1\"\n                          max=\"500\"\n                        ></pry-range>\n                      </div>\n                    </fieldset>\n\n                    <div class=\"m-form-label-field\" *ngIf=\"optionsCopy.slide ?? false\">\n                      <label class=\"a-label\" for=\"slide_select\">{{ '@pry.widget.map.slide.title' | i18n }}</label>\n                      <pry-select\n                        (ngModelChange)=\"changeSlide($event, layer)\"\n                        [items]=\"slides\"\n                        [ngModel]=\"layer.slide ?? 'all'\"\n                        bindLabel=\"label\"\n                        bindValue=\"id\"\n                        id=\"slide_select\"\n                      ></pry-select>\n                    </div>\n\n                    <div class=\"m-form-label-field\" *ngIf=\"optionsCopy.attributions\">\n                      <label class=\"a-label\" for=\"attribution\">{{ '@pry.widget.map.attribution' | i18n }}</label>\n                      <input\n                        id=\"attribution\"\n                        class=\"a-form-field\"\n                        type=\"text\"\n                        (input)=\"changeAttribution($event, layer)\"\n                        [value]=\"layer.attribution ? layer.attribution : ''\"\n                      />\n                    </div>\n                  </div>\n                </div>\n              </ng-container>\n            </div>\n          </div>\n        </ng-container>\n      </div>\n    </pry-settings>\n  </pry-widget-header>\n\n  <div\n    class=\"m-btn-group -map-selection-choice -vertical\"\n    [class.-with-header]=\"displayHeader$ | async\"\n    [class.-closed]=\"!(actionMenuOpen$ | async)\"\n  >\n    <div class=\"-vertical\">\n      <ng-container *ngFor=\"let action of basicActions$ | async\">\n        <button\n          type=\"button\"\n          class=\"a-btn a-btn--icon-only a-tooltip a-tooltip--{{ action }}\"\n          (click)=\"changeSelection(action)\"\n          [attr.data-tooltip]=\"'@pry.widget.map.' + action | i18n\"\n          data-tooltip-position=\"right\"\n        >\n          <pry-icon [iconSvg]=\"action\"></pry-icon>\n          <span class=\"u-visually-hidden\">{{ '@pry.widget.map.' + action | i18n }}</span>\n        </button>\n      </ng-container>\n    </div>\n\n    <button\n      type=\"button\"\n      class=\"a-btn a-btn--icon-only a-tooltip -map-toggle\"\n      id=\"open_menu\"\n      [attr.aria-expanded]=\"actionMenuOpen$ | async\"\n      aria-controls=\"export_type\"\n      aria-haspopup=\"menu\"\n      (click)=\"toggleMenu()\"\n    >\n      <pry-icon\n        [iconSvg]=\"(actionMenuOpen$ | async) ? 'chevron_top' : 'chevron_bottom'\"\n        [width]=\"12\"\n        [height]=\"24\"\n      ></pry-icon>\n      <span class=\"u-visually-hidden\">{{ '@pry.widget.map.open' | i18n }}</span>\n    </button>\n  </div>\n\n  <div class=\"m-btn-group -map-selection-choice -map-export\" [class.-with-header]=\"displayHeader$ | async\">\n    <button\n      type=\"button\"\n      class=\"a-btn a-btn--icon-only a-tooltip\"\n      id=\"export_card\"\n      aria-expanded=\"false\"\n      aria-controls=\"export_type\"\n      aria-haspopup=\"menu\"\n      [attr.data-tooltip]=\"'@pry.widget.map.export' | i18n\"\n      data-tooltip-position=\"right\"\n      (click)=\"export()\"\n    >\n      <pry-icon iconSvg=\"file_download\"></pry-icon>\n      <span class=\"u-visually-hidden\">{{ '@pry.widget.map.export' | i18n }}</span>\n    </button>\n  </div>\n\n  @if ((layers$ | async)?.length) {\n    <div class=\"ol-control m-map-action m-map-action--layers\" [style.top.px]=\"layersTop$ | async\">\n      <button\n        class=\"m-map-action__button\"\n        [class.a-tooltip]=\"!this.layersTabOpen\"\n        [class.-tooltip-no-wrap]=\"!this.layersTabOpen\"\n        (click)=\"toggleLayersWindow()\"\n        [attr.data-tooltip]=\"'@pry.widget.map.selectLayers' | i18n\"\n        data-tooltip-position=\"left\"\n      >\n        <pry-icon iconSvg=\"layers\" [width]=\"18\" [height]=\"18\"></pry-icon>\n      </button>\n    </div>\n    <div class=\"m-map-pop-in -max-width-220\" [class.-hidden]=\"!layersTabOpen\" [style.top.px]=\"layersTop$ | async\">\n      <h4 class=\"a-h4\">{{ '@pry.widget.map.layerSettings.selectLayers' | i18n }}</h4>\n      <div class=\"m-map-pop-in__content\" [style.max-height.px]=\"layersHeight$ | async\">\n        @for (group of layerGroups$ | async; track group; let groupIdx = $index) {\n          @if (isGroupUsedByWidgetLayers(group)) {\n            <div class=\"m-map-pop-in__title m-map-pop-in__group-title\">\n              <h5 class=\"a-h5\">\n                {{ group.name === DEFAULT_LAYER_GROUP ? ('@pry.widget.map.noGroup' | i18n) : group.name }}\n              </h5>\n            </div>\n            @if (group.singleLayer) {\n              <div class=\"m-map-pop-in__radios\">\n                <div class=\"m-map-pop-in__title\" [class.-hidden]=\"!layersTabOpen\">\n                  <input\n                    type=\"radio\"\n                    [name]=\"group.name\"\n                    id=\"radio-layer-group-{{ groupIdx }}\"\n                    [ngModel]=\"group.visibleLayers.length\"\n                    [value]=\"0\"\n                    (change)=\"changeVisibility(group)\"\n                  />\n                  <label class=\"a-label\" for=\"radio-layer-group-{{ groupIdx }}\">{{\n                    '@pry.widget.map.layerSettings.noLayer' | i18n\n                  }}</label>\n                </div>\n                @for (layer of optionsCopy.layers; track layer; let index = $index) {\n                  @if (layer.group === group.name) {\n                    <div class=\"m-map-pop-in__title\" [class.-hidden]=\"!layersTabOpen\">\n                      <input\n                        type=\"radio\"\n                        [name]=\"group.name\"\n                        id=\"radio-{{ group.name }}-layer-{{ index }}\"\n                        [ngModel]=\"group.visibleLayers[0]\"\n                        [value]=\"layer.title\"\n                        (change)=\"changeVisibility(group, layer)\"\n                      />\n                      <label class=\"a-label\" for=\"radio-{{ group.name }}-layer-{{ index }}\">{{\n                        layer.title ?? ('@pry.widget.map.missingTitle' | i18n)\n                      }}</label>\n                    </div>\n                  }\n                }\n              </div>\n            } @else {\n              @for (layer of optionsCopy.layers; track layer; let index = $index) {\n                @if (layer.group === group.name) {\n                  <div class=\"m-map-pop-in__title\" [class.-hidden]=\"!layersTabOpen\">\n                    <pry-checkbox\n                      [ngModel]=\"isLayerVisible(layer, group)\"\n                      (change)=\"changeVisibility(group, layer)\"\n                      id=\"checkbox-layer-{{ index }}\"\n                    ></pry-checkbox>\n                    <label class=\"a-label\" for=\"checkbox-layer-{{ index }}\">\n                      {{ layer.title ?? ('@pry.widget.map.missingTitle' | i18n) }}\n                    </label>\n                  </div>\n                }\n              }\n            }\n          }\n        }\n      </div>\n    </div>\n  }\n  @if ((legendLayers$ | async)?.length) {\n    <div class=\"ol-control m-map-action m-map-action--legend\" [style.top.px]=\"legendTop$ | async\">\n      <button\n        [class.a-tooltip]=\"!this.legendTabOpen\"\n        [class.-tooltip-no-wrap]=\"!this.legendTabOpen\"\n        class=\"m-map-action__button\"\n        (click)=\"toggleLegendWindow()\"\n        [attr.data-tooltip]=\"'@pry.widget.map.legends' | i18n\"\n        data-tooltip-position=\"left\"\n      >\n        <pry-icon iconSvg=\"legend\" [width]=\"18\" [height]=\"15\"></pry-icon>\n      </button>\n    </div>\n    <div class=\"m-map-pop-in\" [class.-hidden]=\"!legendTabOpen\" [style.top.px]=\"legendTop$ | async\">\n      <h4 class=\"a-h4\">{{ '@pry.widget.map.legendsTitle' | i18n }}</h4>\n      <div class=\"m-map-pop-in__content\" [style.max-height.px]=\"layersHeight$ | async\">\n        @for (geoLayer of legendLayers$ | async; track geoLayer; let index = $index) {\n          @if (isLayerVisible(geoLayer)) {\n            <div class=\"m-map-pop-in__title\" (click)=\"toggleLegend(index)\">\n              @if (isLayerRendered(geoLayer) && !!geoLayer.title) {\n                <pry-icon\n                  class=\"m-map-pop-in__dropdown-icon\"\n                  [iconSvg]=\"legendTabClosed[index] ? 'chevron_bottom' : 'chevron_top'\"\n                  [width]=\"12\"\n                  [height]=\"12\"\n                ></pry-icon>\n              }\n              <h5 class=\"a-h5\">{{ geoLayer.title }}</h5>\n              @if (!isLayerRendered(geoLayer)) {\n                <pry-icon\n                  class=\"a-tooltip\"\n                  [attr.data-tooltip]=\"'@pry.widget.map.layerLoadError' | i18n\"\n                  [iconSvg]=\"'close'\"\n                  [width]=\"22\"\n                  [height]=\"22\"\n                ></pry-icon>\n              }\n            </div>\n          }\n          <div\n            class=\"m-map-pop-in__image\"\n            [class.-hidden]=\"!legendTabOpen || legendTabClosed[index] || !isLayerRendered(geoLayer)\"\n            [style.max-height.px]=\"legendHeight$ | async\"\n          >\n            @if (geoLayer | legendUrl: { capabilities: (wmsCapabilities$ | async) }; as url) {\n              <img\n                [src]=\"url | getSecuredImage | async\"\n                [alt]=\"'@pry.widget.map.legend' | i18n: { layer: geoLayer.title }\"\n                (error)=\"imageNotProvided[index] = true\"\n              />\n            }\n            @if (!(geoLayer | legendUrl: { capabilities: (wmsCapabilities$ | async) })) {\n              <p class=\"m-map-pop-in__error\">{{ '@pry.widget.map.legendNotProvided' | i18n }}</p>\n            }\n          </div>\n        }\n      </div>\n    </div>\n  }\n\n  @if (leftSlideLayers.length > 0) {\n    <div class=\"m-map-slide-legend -left\" [style.top.px]=\"legendTop$ | async\">\n      <span class=\"m-map-slide-legend__title\">{{ '@pry.widget.map.slideTitle' | i18n }}:</span>\n      @for (layer of leftSlideLayers; track layer) {\n        <div>{{ layer.get('title') }}</div>\n      }\n    </div>\n  }\n\n  @if (rightSlideLayers.length > 0) {\n    <div class=\"m-map-slide-legend -right\" [style.top.px]=\"legendTop$ | async\">\n      <span class=\"m-map-slide-legend__title\">{{ '@pry.widget.map.slideTitle' | i18n }}:</span>\n      @for (layer of rightSlideLayers; track layer) {\n        <div>{{ layer.get('title') }}</div>\n      }\n    </div>\n  }\n\n  <div [style.height.px]=\"height$ | async\" class=\"o-map-wrapper\">\n    <div class=\"o-map\">\n      <div #mapRef id=\"map\"></div>\n      <input\n        type=\"range\"\n        min=\"0\"\n        max=\"100\"\n        step=\"0.01\"\n        value=\"50\"\n        #sliderElement\n        class=\"o-map-slider\"\n        [class.-hidden]=\"!(hasSlideLayer$ | async)\"\n        (input)=\"triggerLayerRender()\"\n      />\n    </div>\n  </div>\n\n  <div #popup class=\"m-tooltip m-tooltip--popup\" [hidden]=\"true\" role=\"tooltip\">\n    <div class=\"m-tooltip--popup__header\">\n      <p>{{ ((tooltipManager.tooltipDisplayedIndex$ | async) ?? 0) + 1 }} / {{ tooltipManager.tooltipNumber }}</p>\n      <button\n        class=\"a-btn a-btn--primary a-btn--icon-only\"\n        (click)=\"tooltipManager.tooltipMove(-1)\"\n        [disabled]=\"!tooltipManager.tooltipCanMove(-1)\"\n      >\n        <pry-icon iconSvg=\"arrow_back\"></pry-icon>\n      </button>\n      <button\n        class=\"a-btn a-btn--primary a-btn--icon-only\"\n        (click)=\"tooltipManager.tooltipMove(1)\"\n        [disabled]=\"!tooltipManager.tooltipCanMove(1)\"\n      >\n        <pry-icon iconSvg=\"arrow_right\"></pry-icon>\n      </button>\n      <button class=\"a-btn a-btn--primary a-btn--icon-only\" (click)=\"tooltipManager.clearTooltip(true)\">\n        <pry-icon iconSvg=\"close\"></pry-icon>\n      </button>\n    </div>\n    <div class=\"m-tooltip--popup__container\">\n      <ng-container #popupContent></ng-container>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.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: i5.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.SettingsComponent, selector: "pry-settings", inputs: ["widgetIndex", "isDisable", "headerPresent", "open$", "header"], outputs: ["triggerClick", "saveTriggered", "changeTitle"] }, { kind: "component", type: i2.PryWidgetHeaderComponent, selector: "pry-widget-header", inputs: ["manifest", "openData$", "additionalOptions", "headerOptions", "displayCount", "datasourceIds", "widgetIndex"], outputs: ["manifestModified"] }, { kind: "component", type: i2.PrySelectComponent, selector: "pry-select", inputs: ["items", "clearable", "multiple", "closeOnSelect", "placeholder", "isForm", "required", "name", "autocomplete", "alwaysShowAutosuggestedValues", "externalAutocompleteService", "bindValue", "bindLabel", "iconSize", "bindIcon", "template", "i18nPrefix", "bindClasses", "loading", "elementRef"], outputs: ["searched", "cleared", "clicked", "pressedEnter"] }, { kind: "component", type: i2.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "component", type: i6.PryCheckboxComponent, selector: "pry-checkbox", inputs: ["circle", "name", "inputId", "inhibit"] }, { kind: "component", type: i2.PryRangeComponent, selector: "pry-range", inputs: ["min", "max", "step", "disabled", "labelTranslate"] }, { kind: "directive", type: i7.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i7.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: i7.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i7.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "component", type: PryWidgetMapCssComponent, selector: "pry-widget-map-css" }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.GetSecuredImagePipe, name: "getSecuredImage" }, { kind: "pipe", type: i2.I18nPipe, name: "i18n" }, { kind: "pipe", type: GeometryFieldsForPipe, name: "geometryFieldsFor" }, { kind: "pipe", type: WidgetMapLegendUrlPipe, name: "legendUrl" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: WidgetMapComponent, selector: "pry-widget-map", viewQueries: [{ propertyName: "mapRef", first: true, predicate: ["mapRef"], descendants: true }, { propertyName: "popup", first: true, predicate: ["popup"], descendants: true }, { propertyName: "popupContent", first: true, predicate: ["popupContent"], descendants: true, read: ViewContainerRef }, { propertyName: "exportTypeTemplate", first: true, predicate: ["exportTypeTemplate"], descendants: true, read: TemplateRef }, { propertyName: "sliderElement", first: true, predicate: ["sliderElement"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<pry-widget-map-css></pry-widget-map-css>\n<div class=\"o-widget o-widget--map\">\n  <pry-widget-header\n    [datasourceIds]=\"(datasourceIds$ | async) ?? []\"\n    *ngIf=\"displayHeader$ | async\"\n    [widgetIndex]=\"widgetIndex\"\n    [manifest]=\"manifest\"\n    (manifestModified)=\"manifestModified.emit($event)\"\n    [headerOptions]=\"(displayHeader$ | async) ?? {}\"\n    #header\n  >\n    <pry-settings\n      (saveTriggered)=\"emitManifest()\"\n      (changeTitle)=\"changeWidgetTitle($event)\"\n      [headerPresent]=\"displayHeader$ | async\"\n      [widgetIndex]=\"widgetIndex\"\n      [header]=\"header\"\n      [open$]=\"open$\"\n      class=\"o-settings\"\n    >\n      <div class=\"m-form-label-field\">\n        <label class=\"a-label\" for=\"map_style\">{{ '@pry.widget.map.style' | i18n }} :</label>\n        <pry-select\n          (ngModelChange)=\"changeStyle($event)\"\n          [items]=\"styles$ | async\"\n          [ngModel]=\"optionsCopy.style\"\n          bindLabel=\"label\"\n          bindValue=\"identifier\"\n          id=\"map_style\"\n        ></pry-select>\n      </div>\n\n      <div class=\"m-form-label-field\" *ngIf=\"optionsCopy.style === STYLE_FROM_URL\">\n        <label class=\"a-label\" for=\"style_URL\">{{ '@pry.widget.map.styleUrl' | i18n }}</label>\n        <input\n          id=\"style_URL\"\n          class=\"a-form-field\"\n          type=\"text\"\n          (input)=\"changeStyleURL($event)\"\n          [value]=\"optionsCopy.styleURL ?? ''\"\n        />\n      </div>\n\n      <pry-checkbox (ngModelChange)=\"changeAutoLayer($event)\" [ngModel]=\"optionsCopy.automaticLayers ?? false\">\n        {{ '@pry.widget.map.autoLayer' | i18n }}\n      </pry-checkbox>\n\n      <pry-checkbox (ngModelChange)=\"changeAttributions($event)\" [ngModel]=\"optionsCopy.attributions ?? false\">\n        {{ '@pry.widget.map.attributions' | i18n }}\n      </pry-checkbox>\n\n      <pry-checkbox (ngModelChange)=\"changeSlideOption($event)\" [ngModel]=\"hasSlideLayer$ | async\">\n        {{ '@pry.widget.map.slide.global' | i18n }}\n      </pry-checkbox>\n\n      <div class=\"o-layer-settings\" cdkDropListGroup cdkDragBoundary>\n        <h4 class=\"a-label\">{{ '@pry.widget.map.layerSettings.title' | i18n }}</h4>\n        <div class=\"u-display-flex -justify-center\">\n          <button class=\"a-btn a-btn--primary\" (click)=\"addLayerGroup()\" type=\"button\">\n            {{ '@pry.widget.map.layerSettings.addLayerGroup' | i18n }}\n          </button>\n        </div>\n        <ng-container *ngFor=\"let group of optionsCopy.layerGroups; let groupIdx = index\">\n          <div *ngIf=\"isGroupUsedByWidgetLayers(group)\" class=\"o-layer-settings__group\">\n            <div class=\"m-form-label-field o-layer-settings__group-title\">\n              <label class=\"a-label\" for=\"map_layerGroupTitle-{{ groupIdx }}\">\n                {{ '@pry.widget.map.layerSettings.layerGroupName' | i18n }}<span class=\"-obligatory-red\">*</span\n                >{{ '@pry.widget.map.layerSettings.optionalColon' | i18n }}\n              </label>\n              <div class=\"u-display-flex\">\n                <div class=\"m-form-label-field u-display-flex -row -gap-10\">\n                  <input\n                    id=\"map_layerGroupTitle-{{ groupIdx }}\"\n                    class=\"a-form-field\"\n                    type=\"text\"\n                    (change)=\"updateLayerGroupName(group, $event)\"\n                    [value]=\"group.name === DEFAULT_LAYER_GROUP ? ('@pry.widget.map.noGroup' | i18n) : group.name\"\n                  />\n                  <button\n                    *ngIf=\"group.name !== DEFAULT_LAYER_GROUP\"\n                    class=\"a-btn--icon-only a-tooltip o-layer-settings__delete-group\"\n                    [attr.data-tooltip]=\"'@pry.widget.map.layerSettings.deleteGroup' | i18n\"\n                    data-tooltip-position=\"left\"\n                    (click)=\"deleteLayerGroup(group.name)\"\n                  >\n                    <pry-icon [height]=\"16\" [width]=\"16\" iconSvg=\"bin_normal\"></pry-icon>\n                  </button>\n                </div>\n              </div>\n            </div>\n            @if (group.name !== DEFAULT_LAYER_GROUP) {\n              <div class=\"m-form-radio-group\">\n                <div class=\"m-form-radio-group__item\">\n                  <input\n                    type=\"radio\"\n                    id=\"multiselection-{{ groupIdx }}\"\n                    [ngModel]=\"group.singleLayer\"\n                    (ngModelChange)=\"updateLayerGroupSingleLayer(group, $event)\"\n                    [value]=\"false\"\n                    [name]=\"group.name\"\n                  />\n                  <label class=\"a-label\" for=\"multiselection-{{ groupIdx }}\">{{\n                    '@pry.widget.map.layerSettings.multipleLayer' | i18n\n                  }}</label>\n                </div>\n                <div class=\"m-form-radio-group__item\">\n                  <input\n                    type=\"radio\"\n                    id=\"monoselection-{{ groupIdx }}\"\n                    [ngModel]=\"group.singleLayer\"\n                    (ngModelChange)=\"updateLayerGroupSingleLayer(group, $event)\"\n                    [value]=\"true\"\n                    [name]=\"group.name\"\n                  />\n                  <label class=\"a-label\" for=\"monoselection-{{ groupIdx }}\">{{\n                    '@pry.widget.map.layerSettings.singleLayer' | i18n\n                  }}</label>\n                </div>\n              </div>\n            }\n            <div class=\"m-btn-group\">\n              <div class=\"u-display-flex -align-center\">\n                <button (click)=\"addLayer(group)\" class=\"a-btn -link-like\" type=\"button\">\n                  + {{ '@pry.widget.map.addLayer' | i18n }}\n                </button>\n              </div>\n              <button (click)=\"toggleExpandAll(group)\" class=\"a-btn -link-like\" type=\"button\">\n                {{\n                  layerSettingsExpandedState[group.name]\n                    ? ('@pry.widget.map.layerSettings.foldAll' | i18n)\n                    : ('@pry.widget.map.layerSettings.unfoldAll' | i18n)\n                }}\n              </button>\n            </div>\n            <div\n              cdkDropList\n              class=\"o-layer-settings__layers\"\n              (cdkDropListDropped)=\"drop($event, group)\"\n              [attr.data-layer-group]=\"group.name\"\n            >\n              <ng-container *ngFor=\"let layer of optionsCopy?.layers; let i = index\">\n                <div\n                  *ngIf=\"layer.group === group.name\"\n                  class=\"o-layer-settings__layer-wrapper\"\n                  cdkDrag\n                  [cdkDragData]=\"layer\"\n                  [cdkDragDisabled]=\"layerSettingsExpandedState[layer.title!]\"\n                >\n                  <div class=\"drag-placeholder\" *cdkDragPlaceholder></div>\n                  <div class=\"o-layer-settings__layer-header\">\n                    <div class=\"u-display-flex -align-center\">\n                      <pry-icon\n                        [class.-disabled]=\"layerSettingsExpandedState[layer.title!]\"\n                        class=\"drag-handle\"\n                        [height]=\"16\"\n                        [width]=\"16\"\n                        iconSvg=\"drag_indicator\"\n                      ></pry-icon>\n                      <button\n                        class=\"a-btn--icon-only unfold-layer\"\n                        (click)=\"toggleLayerExpand(layer, group)\"\n                        type=\"button\"\n                      >\n                        <pry-icon\n                          [height]=\"5\"\n                          [width]=\"9\"\n                          [iconSvg]=\"layerSettingsExpandedState[layer.title!] ? 'chevron_top' : 'chevron_bottom'\"\n                        ></pry-icon>\n                      </button>\n                      <h5 class=\"a-h5\">{{ layer.title ?? ('@pry.widget.map.layer' | i18n: { index: i + 1 }) }}</h5>\n                    </div>\n                    <button\n                      class=\"o-layer-settings__delete-layer a-btn--icon-only a-tooltip\"\n                      [attr.data-tooltip]=\"'@pry.widget.map.layerSettings.deleteLayer' | i18n\"\n                      data-tooltip-position=\"left\"\n                      (click)=\"deleteLayer(i, layer, group)\"\n                    >\n                      <pry-icon [height]=\"16\" [width]=\"16\" iconSvg=\"bin_normal\"></pry-icon>\n                    </button>\n                  </div>\n                  <div *ngIf=\"layerSettingsExpandedState[layer.title!]\" class=\"o-layer-settings__layer-content\">\n                    <div class=\"o-settings__popup__content__fields__content\">\n                      <pry-range\n                        [ngModel]=\"(layer?.opacity ?? 100) + ''\"\n                        (ngModelChange)=\"changeOpacity(layer, $event)\"\n                        labelTranslate=\"@pry.widget.map.opacity\"\n                        min=\"0\"\n                        max=\"100\"\n                      ></pry-range>\n\n                      <fieldset>\n                        <legend class=\"u-visually-hidden\">\n                          {{ '@pry.widget.map.layerOptions' | i18n: { index: i + 1 } }}\n                        </legend>\n                        <div class=\"m-form-label-field\">\n                          <label class=\"a-label\" for=\"layer_{{ i + 1 }}_title\">{{\n                            '@pry.widget.map.layerTitle' | i18n\n                          }}</label>\n                          <input\n                            id=\"layer_{{ i + 1 }}_title\"\n                            class=\"a-form-field\"\n                            type=\"text\"\n                            (change)=\"changeTitle($event, layer, group)\"\n                            [value]=\"layer.title\"\n                          />\n                        </div>\n                        <div class=\"m-form-label-field\" *ngIf=\"!['geoserver', 'auto'].includes(layer.type)\">\n                          <label class=\"a-label\" for=\"map_layerType\">{{\n                            '@pry.widget.map.layerType.title' | i18n\n                          }}</label>\n                          <pry-select\n                            (ngModelChange)=\"changeLayerType($event, i)\"\n                            [items]=\"layerTypes\"\n                            [ngModel]=\"layer.type\"\n                            i18nPrefix=\"@pry.widget.map.layerType.\"\n                            id=\"map_layerType\"\n                          ></pry-select>\n                        </div>\n\n                        <div class=\"m-form-label-field\" *ngIf=\"['geoserver', 'wms'].includes(layer.type)\">\n                          <ng-container *ngIf=\"getAsWmsType(layer) as wmslayer\">\n                            <label class=\"a-label\" for=\"map_layerStyle\">{{\n                              '@pry.widget.map.layerStyle' | i18n\n                            }}</label>\n                            <pry-select\n                              (ngModelChange)=\"changeLayerStyle($event, layer)\"\n                              [items]=\"layerStyleOptions(layer)\"\n                              [ngModel]=\"getStyle(layer)\"\n                              bindLabel=\"label\"\n                              bindValue=\"id\"\n                              id=\"map_layerStyle\"\n                            ></pry-select>\n                          </ng-container>\n                        </div>\n\n                        <div class=\"m-form-label-field\">\n                          <pry-checkbox (ngModelChange)=\"changeFit($event, layer)\" [ngModel]=\"layer.fit\">\n                            {{ '@pry.widget.map.fit' | i18n }}\n                          </pry-checkbox>\n                        </div>\n\n                        <div\n                          *ngIf=\"\n                            layer.type !== 'relation' &&\n                            layer.type !== 'wms' &&\n                            layer.type !== 'wmts' &&\n                            layer.type !== 'geoserver' &&\n                            layer.type !== 'featurelayer' &&\n                            layer.type !== 'vectortile' &&\n                            layer.type !== 'rastertile' &&\n                            layer.type !== 'auto'\n                          \"\n                          class=\"m-form-label-field\"\n                        >\n                          <label class=\"a-label\" for=\"map_classes\">{{ '@pry.widget.map.classes' | i18n }}</label>\n                          <pry-select\n                            (ngModelChange)=\"changeClasses($event, layer)\"\n                            [items]=\"usedClasses$ | async\"\n                            [multiple]=\"true\"\n                            [ngModel]=\"layer.classes\"\n                            bindLabel=\"name\"\n                            bindValue=\"id\"\n                            id=\"map_classes\"\n                          ></pry-select>\n                        </div>\n                      </fieldset>\n                    </div>\n\n                    <fieldset\n                      *ngIf=\"\n                        layer.type !== 'relation' &&\n                        layer.type !== 'wms' &&\n                        layer.type !== 'wmts' &&\n                        layer.type !== 'geoserver' &&\n                        layer.type !== 'featurelayer' &&\n                        layer.type !== 'vectortile' &&\n                        layer.type !== 'rastertile'\n                      \"\n                    >\n                      <legend class=\"u-visually-hidden\">{{ '@pry.widget.map.locationAttr' | i18n }}</legend>\n                      <ng-container\n                        *ngIf=\"\n                          layer\n                            | geometryFieldsFor: { resultSet: resultSet$, classes: layer.classes, type: layer.type }\n                            | async as fields\n                        \"\n                      >\n                        <div\n                          *ngIf=\"\n                            [\n                              'heatmap',\n                              'bubble',\n                              'marker',\n                              'point',\n                              'line',\n                              'polygon',\n                              'multi-line',\n                              'multi-polygon'\n                            ].indexOf(layer.type) >= 0\n                          \"\n                        >\n                          <div class=\"m-form-label-field\">\n                            <label class=\"a-label\" for=\"map_locationAttribute_both\">{{\n                              '@pry.widget.map.locationAttribute.both' | i18n\n                            }}</label>\n                            <pry-select\n                              (ngModelChange)=\"changeLocationAttributes($event, layer)\"\n                              [items]=\"fields\"\n                              [ngModel]=\"layer.attribute\"\n                              bindLabel=\"name\"\n                              bindValue=\"name\"\n                              id=\"map_locationAttribute_both\"\n                            ></pry-select>\n                          </div>\n                        </div>\n\n                        <div *ngIf=\"['heatmap', 'bubble'].indexOf(layer.type) >= 0\">\n                          <div class=\"m-form-label-field\">\n                            <label class=\"a-label\" for=\"map_intensityAttribute\">{{\n                              '@pry.widget.map.intensityAttribute' | i18n\n                            }}</label>\n                            <pry-select\n                              (ngModelChange)=\"changeIntensityAttributes($event, layer)\"\n                              [items]=\"fields\"\n                              [ngModel]=\"layerHasIntensity(layer).intensityAttribute\"\n                              bindLabel=\"name\"\n                              bindValue=\"name\"\n                              id=\"map_intensityAttribute\"\n                            ></pry-select>\n                          </div>\n                        </div>\n                      </ng-container>\n                    </fieldset>\n\n                    <fieldset\n                      *ngIf=\"\n                        layer.type === 'wms' ||\n                        layer.type === 'geoserver' ||\n                        layer.type === 'wmts' ||\n                        layer.type === 'featurelayer' ||\n                        layer.type === 'vectortile' ||\n                        layer.type === 'rastertile'\n                      \"\n                    >\n                      <ng-container *ngIf=\"layer.type !== 'geoserver'\">\n                        <div class=\"m-form-label-field\">\n                          <label class=\"a-label\" for=\"map_wms_url\">{{ '@pry.widget.map.wms.url' | i18n }}</label>\n                          <input\n                            id=\"map_wms_url\"\n                            class=\"a-form-field\"\n                            type=\"text\"\n                            (input)=\"changeUrl($event, layer)\"\n                            [value]=\"layer.url\"\n                          />\n                        </div>\n                      </ng-container>\n\n                      <div class=\"m-form-label-field\" *ngIf=\"layer.type === 'wms' || layer.type === 'wmts'\">\n                        <label class=\"a-label\" for=\"map_wms_paramLayer\">{{\n                          '@pry.widget.map.wms.paramLayer' | i18n\n                        }}</label>\n                        <input\n                          id=\"map_wms_paramLayer\"\n                          class=\"a-form-field\"\n                          type=\"text\"\n                          (input)=\"changeParamLayer($event, layer)\"\n                          [value]=\"layer.paramLayer\"\n                        />\n                      </div>\n\n                      <div class=\"m-form-label-field\" *ngIf=\"layer.type === 'wmts'\">\n                        <label class=\"a-label\" for=\"map_wms_matrixSet\">{{\n                          '@pry.widget.map.wms.matrixSet' | i18n\n                        }}</label>\n                        <input\n                          id=\"map_wms_matrixSet\"\n                          class=\"a-form-field\"\n                          type=\"text\"\n                          (input)=\"changeMatrixSet($event, layer)\"\n                          [value]=\"layer.matrixSet\"\n                        />\n                      </div>\n\n                      <div class=\"m-form-label-field\" *ngIf=\"layer.type === 'wmts'\">\n                        <label class=\"a-label\" for=\"map_wms_style\">{{ '@pry.widget.map.wms.style' | i18n }}</label>\n                        <input\n                          id=\"map_wms_style\"\n                          class=\"a-form-field\"\n                          type=\"text\"\n                          (input)=\"changeParamStyle($event, layer)\"\n                          [value]=\"layer.style\"\n                        />\n                      </div>\n\n                      <div class=\"m-form-label-field\" *ngIf=\"layer.type === 'wms' || layer.type === 'geoserver'\">\n                        <legend class=\"u-visually-hidden\">{{ '@pry.widget.map.tile' | i18n }}</legend>\n                        <pry-checkbox\n                          (ngModelChange)=\"changeParamTiled($event, layer)\"\n                          [ngModel]=\"layer?.paramTiled ?? false\"\n                        >\n                          {{ '@pry.widget.map.wms.paramTiled' | i18n }}\n                        </pry-checkbox>\n                      </div>\n                    </fieldset>\n\n                    <fieldset *ngIf=\"layer.type === 'marker'\">\n                      <legend class=\"u-visually-hidden\">{{ '@pry.widget.map.clustering' | i18n }}</legend>\n                      <div class=\"m-form-label-field\">\n                        <pry-checkbox (ngModelChange)=\"changeClustered(layer, $event)\" [ngModel]=\"layer.clustered\">\n                          {{ '@pry.widget.map.clustered' | i18n }}\n                        </pry-checkbox>\n                      </div>\n                      <div *ngIf=\"layer.clustered\">\n                        <pry-range\n                          [ngModel]=\"layer.clustered\"\n                          (ngModelChange)=\"changeClusterDistance(layer, $event)\"\n                          labelTranslate=\"@pry.widget.map.clusterDistance\"\n                          min=\"1\"\n                          max=\"500\"\n                        ></pry-range>\n                      </div>\n                    </fieldset>\n\n                    <div class=\"m-form-label-field\" *ngIf=\"optionsCopy.slide ?? false\">\n                      <label class=\"a-label\" for=\"slide_select\">{{ '@pry.widget.map.slide.title' | i18n }}</label>\n                      <pry-select\n                        (ngModelChange)=\"changeSlide($event, layer)\"\n                        [items]=\"slides\"\n                        [ngModel]=\"layer.slide ?? 'all'\"\n                        bindLabel=\"label\"\n                        bindValue=\"id\"\n                        id=\"slide_select\"\n                      ></pry-select>\n                    </div>\n\n                    <div class=\"m-form-label-field\" *ngIf=\"optionsCopy.attributions\">\n                      <label class=\"a-label\" for=\"attribution\">{{ '@pry.widget.map.attribution' | i18n }}</label>\n                      <input\n                        id=\"attribution\"\n                        class=\"a-form-field\"\n                        type=\"text\"\n                        (input)=\"changeAttribution($event, layer)\"\n                        [value]=\"layer.attribution ? layer.attribution : ''\"\n                      />\n                    </div>\n                  </div>\n                </div>\n              </ng-container>\n            </div>\n          </div>\n        </ng-container>\n      </div>\n    </pry-settings>\n  </pry-widget-header>\n\n  <div\n    class=\"m-btn-group -map-selection-choice -vertical\"\n    [class.-with-header]=\"displayHeader$ | async\"\n    [class.-closed]=\"!(actionMenuOpen$ | async)\"\n  >\n    <div class=\"-vertical\">\n      <ng-container *ngFor=\"let action of basicActions$ | async\">\n        <button\n          type=\"button\"\n          class=\"a-btn a-btn--icon-only a-tooltip a-tooltip--{{ action }}\"\n          (click)=\"changeSelection(action)\"\n          [attr.data-tooltip]=\"'@pry.widget.map.' + action | i18n\"\n          data-tooltip-position=\"right\"\n        >\n          <pry-icon [iconSvg]=\"action\"></pry-icon>\n          <span class=\"u-visually-hidden\">{{ '@pry.widget.map.' + action | i18n }}</span>\n        </button>\n      </ng-container>\n    </div>\n\n    <button\n      type=\"button\"\n      class=\"a-btn a-btn--icon-only a-tooltip -map-toggle\"\n      id=\"open_menu\"\n      [attr.aria-expanded]=\"actionMenuOpen$ | async\"\n      aria-controls=\"export_type\"\n      aria-haspopup=\"menu\"\n      (click)=\"toggleMenu()\"\n    >\n      <pry-icon\n        [iconSvg]=\"(actionMenuOpen$ | async) ? 'chevron_top' : 'chevron_bottom'\"\n        [width]=\"12\"\n        [height]=\"24\"\n      ></pry-icon>\n      <span class=\"u-visually-hidden\">{{ '@pry.widget.map.open' | i18n }}</span>\n    </button>\n  </div>\n\n  <div class=\"m-btn-group -map-selection-choice -map-export\" [class.-with-header]=\"displayHeader$ | async\">\n    <button\n      type=\"button\"\n      class=\"a-btn a-btn--icon-only a-tooltip\"\n      id=\"export_card\"\n      aria-expanded=\"false\"\n      aria-controls=\"export_type\"\n      aria-haspopup=\"menu\"\n      [attr.data-tooltip]=\"'@pry.widget.map.export' | i18n\"\n      data-tooltip-position=\"right\"\n      (click)=\"export()\"\n    >\n      <pry-icon iconSvg=\"file_download\"></pry-icon>\n      <span class=\"u-visually-hidden\">{{ '@pry.widget.map.export' | i18n }}</span>\n    </button>\n  </div>\n\n  @if ((layers$ | async)?.length) {\n    <div class=\"ol-control m-map-action m-map-action--layers\" [style.top.px]=\"layersTop$ | async\">\n      <button\n        class=\"m-map-action__button\"\n        [class.a-tooltip]=\"!this.layersTabOpen\"\n        [class.-tooltip-no-wrap]=\"!this.layersTabOpen\"\n        (click)=\"toggleLayersWindow()\"\n        [attr.data-tooltip]=\"'@pry.widget.map.selectLayers' | i18n\"\n        data-tooltip-position=\"left\"\n      >\n        <pry-icon iconSvg=\"layers\" [width]=\"18\" [height]=\"18\"></pry-icon>\n      </button>\n    </div>\n    <div class=\"m-map-pop-in -max-width-220\" [class.-hidden]=\"!layersTabOpen\" [style.top.px]=\"layersTop$ | async\">\n      <h4 class=\"a-h4\">{{ '@pry.widget.map.layerSettings.selectLayers' | i18n }}</h4>\n      <div class=\"m-map-pop-in__content\" [style.max-height.px]=\"layersHeight$ | async\">\n        @for (group of (options$ | async)?.layerGroups ?? []; track group; let groupIdx = $index) {\n          @if (isGroupUsedByWidgetLayers(group)) {\n            <div class=\"m-map-pop-in__title m-map-pop-in__group-title\">\n              <h5 class=\"a-h5\">\n                {{ group.name === DEFAULT_LAYER_GROUP ? ('@pry.widget.map.noGroup' | i18n) : group.name }}\n              </h5>\n            </div>\n            @if (group.singleLayer) {\n              <div class=\"m-map-pop-in__radios\">\n                <div class=\"m-map-pop-in__title\" [class.-hidden]=\"!layersTabOpen\">\n                  <input\n                    type=\"radio\"\n                    [name]=\"group.name\"\n                    id=\"radio-layer-group-{{ groupIdx }}\"\n                    [ngModel]=\"group.visibleLayers.length\"\n                    [value]=\"0\"\n                    (change)=\"changeVisibility(group)\"\n                  />\n                  <label class=\"a-label\" for=\"radio-layer-group-{{ groupIdx }}\">{{\n                    '@pry.widget.map.layerSettings.noLayer' | i18n\n                  }}</label>\n                </div>\n                @for (layer of optionsCopy.layers; track layer; let index = $index) {\n                  @if (layer.group === group.name) {\n                    <div class=\"m-map-pop-in__title\" [class.-hidden]=\"!layersTabOpen\">\n                      <input\n                        type=\"radio\"\n                        [name]=\"group.name\"\n                        id=\"radio-{{ group.name }}-layer-{{ index }}\"\n                        [ngModel]=\"group.visibleLayers[0]\"\n                        [value]=\"layer.title\"\n                        (change)=\"changeVisibility(group, layer)\"\n                      />\n                      <label class=\"a-label\" for=\"radio-{{ group.name }}-layer-{{ index }}\">{{\n                        layer.title ?? ('@pry.widget.map.missingTitle' | i18n)\n                      }}</label>\n                    </div>\n                  }\n                }\n              </div>\n            } @else {\n              @for (layer of optionsCopy.layers; track layer; let index = $index) {\n                @if (layer.group === group.name) {\n                  <div class=\"m-map-pop-in__title\" [class.-hidden]=\"!layersTabOpen\">\n                    <pry-checkbox\n                      [ngModel]=\"isLayerVisible(layer, group)\"\n                      (change)=\"changeVisibility(group, layer)\"\n                      id=\"checkbox-layer-{{ index }}\"\n                    ></pry-checkbox>\n                    <label class=\"a-label\" for=\"checkbox-layer-{{ index }}\">\n                      {{ layer.title ?? ('@pry.widget.map.missingTitle' | i18n) }}\n                    </label>\n                  </div>\n                }\n              }\n            }\n          }\n        }\n      </div>\n    </div>\n  }\n  @if ((legendLayers$ | async)?.length) {\n    <div class=\"ol-control m-map-action m-map-action--legend\" [style.top.px]=\"legendTop$ | async\">\n      <button\n        [class.a-tooltip]=\"!this.legendTabOpen\"\n        [class.-tooltip-no-wrap]=\"!this.legendTabOpen\"\n        class=\"m-map-action__button\"\n        (click)=\"toggleLegendWindow()\"\n        [attr.data-tooltip]=\"'@pry.widget.map.legends' | i18n\"\n        data-tooltip-position=\"left\"\n      >\n        <pry-icon iconSvg=\"legend\" [width]=\"18\" [height]=\"15\"></pry-icon>\n      </button>\n    </div>\n    <div class=\"m-map-pop-in\" [class.-hidden]=\"!legendTabOpen\" [style.top.px]=\"legendTop$ | async\">\n      <h4 class=\"a-h4\">{{ '@pry.widget.map.legendsTitle' | i18n }}</h4>\n      <div class=\"m-map-pop-in__content\" [style.max-height.px]=\"layersHeight$ | async\">\n        @for (geoLayer of legendLayers$ | async; track geoLayer; let index = $index) {\n          @if (isLayerVisible(geoLayer)) {\n            <div class=\"m-map-pop-in__title\" (click)=\"toggleLegend(index)\">\n              @if (isLayerRendered(geoLayer) && !!geoLayer.title) {\n                <pry-icon\n                  class=\"m-map-pop-in__dropdown-icon\"\n                  [iconSvg]=\"legendTabClosed[index] ? 'chevron_bottom' : 'chevron_top'\"\n                  [width]=\"12\"\n                  [height]=\"12\"\n                ></pry-icon>\n              }\n              <h5 class=\"a-h5\">{{ geoLayer.title }}</h5>\n              @if (!isLayerRendered(geoLayer)) {\n                <pry-icon\n                  class=\"a-tooltip\"\n                  [attr.data-tooltip]=\"'@pry.widget.map.layerLoadError' | i18n\"\n                  [iconSvg]=\"'close'\"\n                  [width]=\"22\"\n                  [height]=\"22\"\n                ></pry-icon>\n              }\n            </div>\n          }\n          <div\n            class=\"m-map-pop-in__image\"\n            [class.-hidden]=\"!legendTabOpen || legendTabClosed[index] || !isLayerRendered(geoLayer)\"\n            [style.max-height.px]=\"legendHeight$ | async\"\n          >\n            @if (geoLayer | legendUrl: { capabilities: (wmsCapabilities$ | async) }; as url) {\n              <img\n                [src]=\"url | getSecuredImage | async\"\n                [alt]=\"'@pry.widget.map.legend' | i18n: { layer: geoLayer.title }\"\n                (error)=\"imageNotProvided[index] = true\"\n              />\n            }\n            @if (!(geoLayer | legendUrl: { capabilities: (wmsCapabilities$ | async) })) {\n              <p class=\"m-map-pop-in__error\">{{ '@pry.widget.map.legendNotProvided' | i18n }}</p>\n            }\n          </div>\n        }\n      </div>\n    </div>\n  }\n\n  @if (leftSlideLayers.length > 0) {\n    <div class=\"m-map-slide-legend -left\" [style.top.px]=\"legendTop$ | async\">\n      <span class=\"m-map-slide-legend__title\">{{ '@pry.widget.map.slideTitle' | i18n }}:</span>\n      @for (layer of leftSlideLayers; track layer) {\n        <div>{{ layer.get('title') }}</div>\n      }\n    </div>\n  }\n\n  @if (rightSlideLayers.length > 0) {\n    <div class=\"m-map-slide-legend -right\" [style.top.px]=\"legendTop$ | async\">\n      <span class=\"m-map-slide-legend__title\">{{ '@pry.widget.map.slideTitle' | i18n }}:</span>\n      @for (layer of rightSlideLayers; track layer) {\n        <div>{{ layer.get('title') }}</div>\n      }\n    </div>\n  }\n\n  <div [style.height.px]=\"height$ | async\" class=\"o-map-wrapper\">\n    <div class=\"o-map\">\n      <div #mapRef id=\"map\"></div>\n      <input\n        type=\"range\"\n        min=\"0\"\n        max=\"100\"\n        step=\"0.01\"\n        value=\"50\"\n        #sliderElement\n        class=\"o-map-slider\"\n        [class.-hidden]=\"!(hasSlideLayer$ | async)\"\n        (input)=\"triggerLayerRender()\"\n      />\n    </div>\n  </div>\n\n  <div #popup class=\"m-tooltip m-tooltip--popup\" [hidden]=\"true\" role=\"tooltip\">\n    <div class=\"m-tooltip--popup__header\">\n      <p>{{ ((tooltipManager.tooltipDisplayedIndex$ | async) ?? 0) + 1 }} / {{ tooltipManager.tooltipNumber }}</p>\n      <button\n        class=\"a-btn a-btn--primary a-btn--icon-only\"\n        (click)=\"tooltipManager.tooltipMove(-1)\"\n        [disabled]=\"!tooltipManager.tooltipCanMove(-1)\"\n      >\n        <pry-icon iconSvg=\"arrow_back\"></pry-icon>\n      </button>\n      <button\n        class=\"a-btn a-btn--primary a-btn--icon-only\"\n        (click)=\"tooltipManager.tooltipMove(1)\"\n        [disabled]=\"!tooltipManager.tooltipCanMove(1)\"\n      >\n        <pry-icon iconSvg=\"arrow_right\"></pry-icon>\n      </button>\n      <button class=\"a-btn a-btn--primary a-btn--icon-only\" (click)=\"tooltipManager.clearTooltip(true)\">\n        <pry-icon iconSvg=\"close\"></pry-icon>\n      </button>\n    </div>\n    <div class=\"m-tooltip--popup__container\">\n      <ng-container #popupContent></ng-container>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.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: i5.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.SettingsComponent, selector: "pry-settings", inputs: ["widgetIndex", "isDisable", "headerPresent", "open$", "header"], outputs: ["triggerClick", "saveTriggered", "changeTitle"] }, { kind: "component", type: i2.PryWidgetHeaderComponent, selector: "pry-widget-header", inputs: ["manifest", "openData$", "additionalOptions", "headerOptions", "displayCount", "datasourceIds", "widgetIndex"], outputs: ["manifestModified"] }, { kind: "component", type: i2.PrySelectComponent, selector: "pry-select", inputs: ["items", "clearable", "multiple", "closeOnSelect", "placeholder", "isForm", "required", "name", "autocomplete", "alwaysShowAutosuggestedValues", "externalAutocompleteService", "bindValue", "bindLabel", "iconSize", "bindIcon", "template", "i18nPrefix", "bindClasses", "loading", "elementRef"], outputs: ["searched", "cleared", "clicked", "pressedEnter"] }, { kind: "component", type: i2.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "component", type: i6.PryCheckboxComponent, selector: "pry-checkbox", inputs: ["circle", "name", "inputId", "inhibit"] }, { kind: "component", type: i2.PryRangeComponent, selector: "pry-range", inputs: ["min", "max", "step", "disabled", "labelTranslate"] }, { kind: "directive", type: i7.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i7.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: i7.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i7.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "component", type: PryWidgetMapCssComponent, selector: "pry-widget-map-css" }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.GetSecuredImagePipe, name: "getSecuredImage" }, { kind: "pipe", type: i2.I18nPipe, name: "i18n" }, { kind: "pipe", type: GeometryFieldsForPipe, name: "geometryFieldsFor" }, { kind: "pipe", type: WidgetMapLegendUrlPipe, name: "legendUrl" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: WidgetMapComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pry-widget-map', template: "<pry-widget-map-css></pry-widget-map-css>\n<div class=\"o-widget o-widget--map\">\n  <pry-widget-header\n    [datasourceIds]=\"(datasourceIds$ | async) ?? []\"\n    *ngIf=\"displayHeader$ | async\"\n    [widgetIndex]=\"widgetIndex\"\n    [manifest]=\"manifest\"\n    (manifestModified)=\"manifestModified.emit($event)\"\n    [headerOptions]=\"(displayHeader$ | async) ?? {}\"\n    #header\n  >\n    <pry-settings\n      (saveTriggered)=\"emitManifest()\"\n      (changeTitle)=\"changeWidgetTitle($event)\"\n      [headerPresent]=\"displayHeader$ | async\"\n      [widgetIndex]=\"widgetIndex\"\n      [header]=\"header\"\n      [open$]=\"open$\"\n      class=\"o-settings\"\n    >\n      <div class=\"m-form-label-field\">\n        <label class=\"a-label\" for=\"map_style\">{{ '@pry.widget.map.style' | i18n }} :</label>\n        <pry-select\n          (ngModelChange)=\"changeStyle($event)\"\n          [items]=\"styles$ | async\"\n          [ngModel]=\"optionsCopy.style\"\n          bindLabel=\"label\"\n          bindValue=\"identifier\"\n          id=\"map_style\"\n        ></pry-select>\n      </div>\n\n      <div class=\"m-form-label-field\" *ngIf=\"optionsCopy.style === STYLE_FROM_URL\">\n        <label class=\"a-label\" for=\"style_URL\">{{ '@pry.widget.map.styleUrl' | i18n }}</label>\n        <input\n          id=\"style_URL\"\n          class=\"a-form-field\"\n          type=\"text\"\n          (input)=\"changeStyleURL($event)\"\n          [value]=\"optionsCopy.styleURL ?? ''\"\n        />\n      </div>\n\n      <pry-checkbox (ngModelChange)=\"changeAutoLayer($event)\" [ngModel]=\"optionsCopy.automaticLayers ?? false\">\n        {{ '@pry.widget.map.autoLayer' | i18n }}\n      </pry-checkbox>\n\n      <pry-checkbox (ngModelChange)=\"changeAttributions($event)\" [ngModel]=\"optionsCopy.attributions ?? false\">\n        {{ '@pry.widget.map.attributions' | i18n }}\n      </pry-checkbox>\n\n      <pry-checkbox (ngModelChange)=\"changeSlideOption($event)\" [ngModel]=\"hasSlideLayer$ | async\">\n        {{ '@pry.widget.map.slide.global' | i18n }}\n      </pry-checkbox>\n\n      <div class=\"o-layer-settings\" cdkDropListGroup cdkDragBoundary>\n        <h4 class=\"a-label\">{{ '@pry.widget.map.layerSettings.title' | i18n }}</h4>\n        <div class=\"u-display-flex -justify-center\">\n          <button class=\"a-btn a-btn--primary\" (click)=\"addLayerGroup()\" type=\"button\">\n            {{ '@pry.widget.map.layerSettings.addLayerGroup' | i18n }}\n          </button>\n        </div>\n        <ng-container *ngFor=\"let group of layerGroups; let groupIdx = index\">\n          <div *ngIf=\"isGroupUsedByWidgetLayers(group)\" class=\"o-layer-settings__group\">\n            <div class=\"m-form-label-field o-layer-settings__group-title\">\n              <label class=\"a-label\" for=\"map_layerGroupTitle-{{ groupIdx }}\">\n                {{ '@pry.widget.map.layerSettings.layerGroupName' | i18n }}<span class=\"-obligatory-red\">*</span\n                >{{ '@pry.widget.map.layerSettings.optionalColon' | i18n }}\n              </label>\n              <div class=\"u-display-flex\">\n                <div class=\"m-form-label-field u-display-flex -row -gap-10\">\n                  <input\n                    id=\"map_layerGroupTitle-{{ groupIdx }}\"\n                    class=\"a-form-field\"\n                    type=\"text\"\n                    (change)=\"updateLayerGroupName(group, $event)\"\n                    [value]=\"group.name === DEFAULT_LAYER_GROUP ? ('@pry.widget.map.noGroup' | i18n) : group.name\"\n                  />\n                  <button\n                    *ngIf=\"group.name !== DEFAULT_LAYER_GROUP\"\n                    class=\"a-btn--icon-only a-tooltip o-layer-settings__delete-group\"\n                    [attr.data-tooltip]=\"'@pry.widget.map.layerSettings.deleteGroup' | i18n\"\n                    data-tooltip-position=\"left\"\n                    (click)=\"deleteLayerGroup(group.name)\"\n                  >\n                    <pry-icon [height]=\"16\" [width]=\"16\" iconSvg=\"bin_normal\"></pry-icon>\n                  </button>\n                </div>\n              </div>\n            </div>\n            @if (group.name !== DEFAULT_LAYER_GROUP) {\n              <div class=\"m-form-radio-group\">\n                <div class=\"m-form-radio-group__item\">\n                  <input\n                    type=\"radio\"\n                    id=\"multiselection-{{ groupIdx }}\"\n                    [ngModel]=\"group.singleLayer\"\n                    (ngModelChange)=\"updateLayerGroupSingleLayer(group, $event)\"\n                    [value]=\"false\"\n                    [name]=\"group.name\"\n                  />\n                  <label class=\"a-label\" for=\"multiselection-{{ groupIdx }}\">{{\n                    '@pry.widget.map.layerSettings.multipleLayer' | i18n\n                  }}</label>\n                </div>\n                <div class=\"m-form-radio-group__item\">\n                  <input\n                    type=\"radio\"\n                    id=\"monoselection-{{ groupIdx }}\"\n                    [ngModel]=\"group.singleLayer\"\n                    (ngModelChange)=\"updateLayerGroupSingleLayer(group, $event)\"\n                    [value]=\"true\"\n                    [name]=\"group.name\"\n                  />\n                  <label class=\"a-label\" for=\"monoselection-{{ groupIdx }}\">{{\n                    '@pry.widget.map.layerSettings.singleLayer' | i18n\n                  }}</label>\n                </div>\n              </div>\n            }\n            <div class=\"m-btn-group\">\n              <div class=\"u-display-flex -align-center\">\n                <button (click)=\"addLayer(group)\" class=\"a-btn -link-like\" type=\"button\">\n                  + {{ '@pry.widget.map.addLayer' | i18n }}\n                </button>\n              </div>\n              <button (click)=\"toggleExpandAll(group)\" class=\"a-btn -link-like\" type=\"button\">\n                {{\n                  layerSettingsExpandedState[group.name]\n                    ? ('@pry.widget.map.layerSettings.foldAll' | i18n)\n                    : ('@pry.widget.map.layerSettings.unfoldAll' | i18n)\n                }}\n              </button>\n            </div>\n            <div\n              cdkDropList\n              class=\"o-layer-settings__layers\"\n              (cdkDropListDropped)=\"drop($event, group)\"\n              [attr.data-layer-group]=\"group.name\"\n            >\n              <ng-container *ngFor=\"let layer of optionsCopy?.layers; let i = index\">\n                <div\n                  *ngIf=\"layer.group === group.name\"\n                  class=\"o-layer-settings__layer-wrapper\"\n                  cdkDrag\n                  [cdkDragData]=\"layer\"\n                  [cdkDragDisabled]=\"layerSettingsExpandedState[layer.title!]\"\n                >\n                  <div class=\"drag-placeholder\" *cdkDragPlaceholder></div>\n                  <div class=\"o-layer-settings__layer-header\">\n                    <div class=\"u-display-flex -align-center\">\n                      <pry-icon\n                        [class.-disabled]=\"layerSettingsExpandedState[layer.title!]\"\n                        class=\"drag-handle\"\n                        [height]=\"16\"\n                        [width]=\"16\"\n                        iconSvg=\"drag_indicator\"\n                      ></pry-icon>\n                      <button\n                        class=\"a-btn--icon-only unfold-layer\"\n                        (click)=\"toggleLayerExpand(layer, group)\"\n                        type=\"button\"\n                      >\n                        <pry-icon\n                          [height]=\"5\"\n                          [width]=\"9\"\n                          [iconSvg]=\"layerSettingsExpandedState[layer.title!] ? 'chevron_top' : 'chevron_bottom'\"\n                        ></pry-icon>\n                      </button>\n                      <h5 class=\"a-h5\">{{ layer.title ?? ('@pry.widget.map.layer' | i18n: { index: i + 1 }) }}</h5>\n                    </div>\n                    <button\n                      class=\"o-layer-settings__delete-layer a-btn--icon-only a-tooltip\"\n                      [attr.data-tooltip]=\"'@pry.widget.map.layerSettings.deleteLayer' | i18n\"\n                      data-tooltip-position=\"left\"\n                      (click)=\"deleteLayer(i, layer, group)\"\n                    >\n                      <pry-icon [height]=\"16\" [width]=\"16\" iconSvg=\"bin_normal\"></pry-icon>\n                    </button>\n                  </div>\n                  <div *ngIf=\"layerSettingsExpandedState[layer.title!]\" class=\"o-layer-settings__layer-content\">\n                    <div class=\"o-settings__popup__content__fields__content\">\n                      <pry-range\n                        [ngModel]=\"(layer?.opacity ?? 100) + ''\"\n                        (ngModelChange)=\"changeOpacity(layer, $event)\"\n                        labelTranslate=\"@pry.widget.map.opacity\"\n                        min=\"0\"\n                        max=\"100\"\n                      ></pry-range>\n\n                      <fieldset>\n                        <legend class=\"u-visually-hidden\">\n                          {{ '@pry.widget.map.layerOptions' | i18n: { index: i + 1 } }}\n                        </legend>\n                        <div class=\"m-form-label-field\">\n                          <label class=\"a-label\" for=\"layer_{{ i + 1 }}_title\">{{\n                            '@pry.widget.map.layerTitle' | i18n\n                          }}</label>\n                          <input\n                            id=\"layer_{{ i + 1 }}_title\"\n                            class=\"a-form-field\"\n                            type=\"text\"\n                            (change)=\"changeTitle($event, layer, group)\"\n                            [value]=\"layer.title\"\n                          />\n                        </div>\n                        <div class=\"m-form-label-field\" *ngIf=\"!['geoserver', 'auto'].includes(layer.type)\">\n                          <label class=\"a-label\" for=\"map_layerType\">{{\n                            '@pry.widget.map.layerType.title' | i18n\n                          }}</label>\n                          <pry-select\n                            (ngModelChange)=\"changeLayerType($event, i)\"\n                            [items]=\"layerTypes\"\n                            [ngModel]=\"layer.type\"\n                            i18nPrefix=\"@pry.widget.map.layerType.\"\n                            id=\"map_layerType\"\n                          ></pry-select>\n                        </div>\n\n                        <div class=\"m-form-label-field\" *ngIf=\"['geoserver', 'wms'].includes(layer.type)\">\n                          <ng-container *ngIf=\"getAsWmsType(layer) as wmslayer\">\n                            <label class=\"a-label\" for=\"map_layerStyle\">{{\n                              '@pry.widget.map.layerStyle' | i18n\n                            }}</label>\n                            <pry-select\n                              (ngModelChange)=\"changeLayerStyle($event, layer)\"\n                              [items]=\"layerStyleOptions(layer)\"\n                              [ngModel]=\"getStyle(layer)\"\n                              bindLabel=\"label\"\n                              bindValue=\"id\"\n                              id=\"map_layerStyle\"\n                            ></pry-select>\n                          </ng-container>\n                        </div>\n\n                        <div class=\"m-form-label-field\">\n                          <pry-checkbox (ngModelChange)=\"changeFit($event, layer)\" [ngModel]=\"layer.fit\">\n                            {{ '@pry.widget.map.fit' | i18n }}\n                          </pry-checkbox>\n                        </div>\n\n                        <div\n                          *ngIf=\"\n                            layer.type !== 'relation' &&\n                            layer.type !== 'wms' &&\n                            layer.type !== 'wmts' &&\n                            layer.type !== 'geoserver' &&\n                            layer.type !== 'featurelayer' &&\n                            layer.type !== 'vectortile' &&\n                            layer.type !== 'rastertile' &&\n                            layer.type !== 'auto'\n                          \"\n                          class=\"m-form-label-field\"\n                        >\n                          <label class=\"a-label\" for=\"map_classes\">{{ '@pry.widget.map.classes' | i18n }}</label>\n                          <pry-select\n                            (ngModelChange)=\"changeClasses($event, layer)\"\n                            [items]=\"usedClasses$ | async\"\n                            [multiple]=\"true\"\n                            [ngModel]=\"layer.classes\"\n                            bindLabel=\"name\"\n                            bindValue=\"id\"\n                            id=\"map_classes\"\n                          ></pry-select>\n                        </div>\n                      </fieldset>\n                    </div>\n\n                    <fieldset\n                      *ngIf=\"\n                        layer.type !== 'relation' &&\n                        layer.type !== 'wms' &&\n                        layer.type !== 'wmts' &&\n                        layer.type !== 'geoserver' &&\n                        layer.type !== 'featurelayer' &&\n                        layer.type !== 'vectortile' &&\n                        layer.type !== 'rastertile'\n                      \"\n                    >\n                      <legend class=\"u-visually-hidden\">{{ '@pry.widget.map.locationAttr' | i18n }}</legend>\n                      <ng-container\n                        *ngIf=\"\n                          layer\n                            | geometryFieldsFor: { resultSet: resultSet$, classes: layer.classes, type: layer.type }\n                            | async as fields\n                        \"\n                      >\n                        <div\n                          *ngIf=\"\n                            [\n                              'heatmap',\n                              'bubble',\n                              'marker',\n                              'point',\n                              'line',\n                              'polygon',\n                              'multi-line',\n                              'multi-polygon'\n                            ].indexOf(layer.type) >= 0\n                          \"\n                        >\n                          <div class=\"m-form-label-field\">\n                            <label class=\"a-label\" for=\"map_locationAttribute_both\">{{\n                              '@pry.widget.map.locationAttribute.both' | i18n\n                            }}</label>\n                            <pry-select\n                              (ngModelChange)=\"changeLocationAttributes($event, layer)\"\n                              [items]=\"fields\"\n                              [ngModel]=\"layer.attribute\"\n                              bindLabel=\"name\"\n                              bindValue=\"name\"\n                              id=\"map_locationAttribute_both\"\n                            ></pry-select>\n                          </div>\n                        </div>\n\n                        <div *ngIf=\"['heatmap', 'bubble'].indexOf(layer.type) >= 0\">\n                          <div class=\"m-form-label-field\">\n                            <label class=\"a-label\" for=\"map_intensityAttribute\">{{\n                              '@pry.widget.map.intensityAttribute' | i18n\n                            }}</label>\n                            <pry-select\n                              (ngModelChange)=\"changeIntensityAttributes($event, layer)\"\n                              [items]=\"fields\"\n                              [ngModel]=\"layerHasIntensity(layer).intensityAttribute\"\n                              bindLabel=\"name\"\n                              bindValue=\"name\"\n                              id=\"map_intensityAttribute\"\n                            ></pry-select>\n                          </div>\n                        </div>\n                      </ng-container>\n                    </fieldset>\n\n                    <fieldset\n                      *ngIf=\"\n                        layer.type === 'wms' ||\n                        layer.type === 'geoserver' ||\n                        layer.type === 'wmts' ||\n                        layer.type === 'featurelayer' ||\n                        layer.type === 'vectortile' ||\n                        layer.type === 'rastertile'\n                      \"\n                    >\n                      <ng-container *ngIf=\"layer.type !== 'geoserver'\">\n                        <div class=\"m-form-label-field\">\n                          <label class=\"a-label\" for=\"map_wms_url\">{{ '@pry.widget.map.wms.url' | i18n }}</label>\n                          <input\n                            id=\"map_wms_url\"\n                            class=\"a-form-field\"\n                            type=\"text\"\n                            (input)=\"changeUrl($event, layer)\"\n                            [value]=\"layer.url\"\n                          />\n                        </div>\n                      </ng-container>\n\n                      <div class=\"m-form-label-field\" *ngIf=\"layer.type === 'wms' || layer.type === 'wmts'\">\n                        <label class=\"a-label\" for=\"map_wms_paramLayer\">{{\n                          '@pry.widget.map.wms.paramLayer' | i18n\n                        }}</label>\n                        <input\n                          id=\"map_wms_paramLayer\"\n                          class=\"a-form-field\"\n                          type=\"text\"\n                          (input)=\"changeParamLayer($event, layer)\"\n                          [value]=\"layer.paramLayer\"\n                        />\n                      </div>\n\n                      <div class=\"m-form-label-field\" *ngIf=\"layer.type === 'wmts'\">\n                        <label class=\"a-label\" for=\"map_wms_matrixSet\">{{\n                          '@pry.widget.map.wms.matrixSet' | i18n\n                        }}</label>\n                        <input\n                          id=\"map_wms_matrixSet\"\n                          class=\"a-form-field\"\n                          type=\"text\"\n                          (input)=\"changeMatrixSet($event, layer)\"\n                          [value]=\"layer.matrixSet\"\n                        />\n                      </div>\n\n                      <div class=\"m-form-label-field\" *ngIf=\"layer.type === 'wmts'\">\n                        <label class=\"a-label\" for=\"map_wms_style\">{{ '@pry.widget.map.wms.style' | i18n }}</label>\n                        <input\n                          id=\"map_wms_style\"\n                          class=\"a-form-field\"\n                          type=\"text\"\n                          (input)=\"changeParamStyle($event, layer)\"\n                          [value]=\"layer.style\"\n                        />\n                      </div>\n\n                      <div class=\"m-form-label-field\" *ngIf=\"layer.type === 'wms' || layer.type === 'geoserver'\">\n                        <legend class=\"u-visually-hidden\">{{ '@pry.widget.map.tile' | i18n }}</legend>\n                        <pry-checkbox\n                          (ngModelChange)=\"changeParamTiled($event, layer)\"\n                          [ngModel]=\"layer?.paramTiled ?? false\"\n                        >\n                          {{ '@pry.widget.map.wms.paramTiled' | i18n }}\n                        </pry-checkbox>\n                      </div>\n                    </fieldset>\n\n                    <fieldset *ngIf=\"layer.type === 'marker'\">\n                      <legend class=\"u-visually-hidden\">{{ '@pry.widget.map.clustering' | i18n }}</legend>\n                      <div class=\"m-form-label-field\">\n                        <pry-checkbox (ngModelChange)=\"changeClustered(layer, $event)\" [ngModel]=\"layer.clustered\">\n                          {{ '@pry.widget.map.clustered' | i18n }}\n                        </pry-checkbox>\n                      </div>\n                      <div *ngIf=\"layer.clustered\">\n                        <pry-range\n                          [ngModel]=\"layer.clustered\"\n                          (ngModelChange)=\"changeClusterDistance(layer, $event)\"\n                          labelTranslate=\"@pry.widget.map.clusterDistance\"\n                          min=\"1\"\n                          max=\"500\"\n                        ></pry-range>\n                      </div>\n                    </fieldset>\n\n                    <div class=\"m-form-label-field\" *ngIf=\"optionsCopy.slide ?? false\">\n                      <label class=\"a-label\" for=\"slide_select\">{{ '@pry.widget.map.slide.title' | i18n }}</label>\n                      <pry-select\n                        (ngModelChange)=\"changeSlide($event, layer)\"\n                        [items]=\"slides\"\n                        [ngModel]=\"layer.slide ?? 'all'\"\n                        bindLabel=\"label\"\n                        bindValue=\"id\"\n                        id=\"slide_select\"\n                      ></pry-select>\n                    </div>\n\n                    <div class=\"m-form-label-field\" *ngIf=\"optionsCopy.attributions\">\n                      <label class=\"a-label\" for=\"attribution\">{{ '@pry.widget.map.attribution' | i18n }}</label>\n                      <input\n                        id=\"attribution\"\n                        class=\"a-form-field\"\n                        type=\"text\"\n                        (input)=\"changeAttribution($event, layer)\"\n                        [value]=\"layer.attribution ? layer.attribution : ''\"\n                      />\n                    </div>\n                  </div>\n                </div>\n              </ng-container>\n            </div>\n          </div>\n        </ng-container>\n      </div>\n    </pry-settings>\n  </pry-widget-header>\n\n  <div\n    class=\"m-btn-group -map-selection-choice -vertical\"\n    [class.-with-header]=\"displayHeader$ | async\"\n    [class.-closed]=\"!(actionMenuOpen$ | async)\"\n  >\n    <div class=\"-vertical\">\n      <ng-container *ngFor=\"let action of basicActions$ | async\">\n        <button\n          type=\"button\"\n          class=\"a-btn a-btn--icon-only a-tooltip a-tooltip--{{ action }}\"\n          (click)=\"changeSelection(action)\"\n          [attr.data-tooltip]=\"'@pry.widget.map.' + action | i18n\"\n          data-tooltip-position=\"right\"\n        >\n          <pry-icon [iconSvg]=\"action\"></pry-icon>\n          <span class=\"u-visually-hidden\">{{ '@pry.widget.map.' + action | i18n }}</span>\n        </button>\n      </ng-container>\n    </div>\n\n    <button\n      type=\"button\"\n      class=\"a-btn a-btn--icon-only a-tooltip -map-toggle\"\n      id=\"open_menu\"\n      [attr.aria-expanded]=\"actionMenuOpen$ | async\"\n      aria-controls=\"export_type\"\n      aria-haspopup=\"menu\"\n      (click)=\"toggleMenu()\"\n    >\n      <pry-icon\n        [iconSvg]=\"(actionMenuOpen$ | async) ? 'chevron_top' : 'chevron_bottom'\"\n        [width]=\"12\"\n        [height]=\"24\"\n      ></pry-icon>\n      <span class=\"u-visually-hidden\">{{ '@pry.widget.map.open' | i18n }}</span>\n    </button>\n  </div>\n\n  <div class=\"m-btn-group -map-selection-choice -map-export\" [class.-with-header]=\"displayHeader$ | async\">\n    <button\n      type=\"button\"\n      class=\"a-btn a-btn--icon-only a-tooltip\"\n      id=\"export_card\"\n      aria-expanded=\"false\"\n      aria-controls=\"export_type\"\n      aria-haspopup=\"menu\"\n      [attr.data-tooltip]=\"'@pry.widget.map.export' | i18n\"\n      data-tooltip-position=\"right\"\n      (click)=\"export()\"\n    >\n      <pry-icon iconSvg=\"file_download\"></pry-icon>\n      <span class=\"u-visually-hidden\">{{ '@pry.widget.map.export' | i18n }}</span>\n    </button>\n  </div>\n\n  @if ((layers$ | async)?.length) {\n    <div class=\"ol-control m-map-action m-map-action--layers\" [style.top.px]=\"layersTop$ | async\">\n      <button\n        class=\"m-map-action__button\"\n        [class.a-tooltip]=\"!this.layersTabOpen\"\n        [class.-tooltip-no-wrap]=\"!this.layersTabOpen\"\n        (click)=\"toggleLayersWindow()\"\n        [attr.data-tooltip]=\"'@pry.widget.map.selectLayers' | i18n\"\n        data-tooltip-position=\"left\"\n      >\n        <pry-icon iconSvg=\"layers\" [width]=\"18\" [height]=\"18\"></pry-icon>\n      </button>\n    </div>\n    <div class=\"m-map-pop-in -max-width-220\" [class.-hidden]=\"!layersTabOpen\" [style.top.px]=\"layersTop$ | async\">\n      <h4 class=\"a-h4\">{{ '@pry.widget.map.layerSettings.selectLayers' | i18n }}</h4>\n      <div class=\"m-map-pop-in__content\" [style.max-height.px]=\"layersHeight$ | async\">\n        @for (group of layerGroups$ | async; track group; let groupIdx = $index) {\n          @if (isGroupUsedByWidgetLayers(group)) {\n            <div class=\"m-map-pop-in__title m-map-pop-in__group-title\">\n              <h5 class=\"a-h5\">\n                {{ group.name === DEFAULT_LAYER_GROUP ? ('@pry.widget.map.noGroup' | i18n) : group.name }}\n              </h5>\n            </div>\n            @if (group.singleLayer) {\n              <div class=\"m-map-pop-in__radios\">\n                <div class=\"m-map-pop-in__title\" [class.-hidden]=\"!layersTabOpen\">\n                  <input\n                    type=\"radio\"\n                    [name]=\"group.name\"\n                    id=\"radio-layer-group-{{ groupIdx }}\"\n                    [ngModel]=\"group.visibleLayers.length\"\n                    [value]=\"0\"\n                    (change)=\"changeVisibility(group)\"\n                  />\n                  <label class=\"a-label\" for=\"radio-layer-group-{{ groupIdx }}\">{{\n                    '@pry.widget.map.layerSettings.noLayer' | i18n\n                  }}</label>\n                </div>\n                @for (layer of optionsCopy.layers; track layer; let index = $index) {\n                  @if (layer.group === group.name) {\n                    <div class=\"m-map-pop-in__title\" [class.-hidden]=\"!layersTabOpen\">\n                      <input\n                        type=\"radio\"\n                        [name]=\"group.name\"\n                        id=\"radio-{{ group.name }}-layer-{{ index }}\"\n                        [ngModel]=\"group.visibleLayers[0]\"\n                        [value]=\"layer.title\"\n                        (change)=\"changeVisibility(group, layer)\"\n                      />\n                      <label class=\"a-label\" for=\"radio-{{ group.name }}-layer-{{ index }}\">{{\n                        layer.title ?? ('@pry.widget.map.missingTitle' | i18n)\n                      }}</label>\n                    </div>\n                  }\n                }\n              </div>\n            } @else {\n              @for (layer of optionsCopy.layers; track layer; let index = $index) {\n                @if (layer.group === group.name) {\n                  <div class=\"m-map-pop-in__title\" [class.-hidden]=\"!layersTabOpen\">\n                    <pry-checkbox\n                      [ngModel]=\"isLayerVisible(layer, group)\"\n                      (change)=\"changeVisibility(group, layer)\"\n                      id=\"checkbox-layer-{{ index }}\"\n                    ></pry-checkbox>\n                    <label class=\"a-label\" for=\"checkbox-layer-{{ index }}\">\n                      {{ layer.title ?? ('@pry.widget.map.missingTitle' | i18n) }}\n                    </label>\n                  </div>\n                }\n              }\n            }\n          }\n        }\n      </div>\n    </div>\n  }\n  @if ((legendLayers$ | async)?.length) {\n    <div class=\"ol-control m-map-action m-map-action--legend\" [style.top.px]=\"legendTop$ | async\">\n      <button\n        [class.a-tooltip]=\"!this.legendTabOpen\"\n        [class.-tooltip-no-wrap]=\"!this.legendTabOpen\"\n        class=\"m-map-action__button\"\n        (click)=\"toggleLegendWindow()\"\n        [attr.data-tooltip]=\"'@pry.widget.map.legends' | i18n\"\n        data-tooltip-position=\"left\"\n      >\n        <pry-icon iconSvg=\"legend\" [width]=\"18\" [height]=\"15\"></pry-icon>\n      </button>\n    </div>\n    <div class=\"m-map-pop-in\" [class.-hidden]=\"!legendTabOpen\" [style.top.px]=\"legendTop$ | async\">\n      <h4 class=\"a-h4\">{{ '@pry.widget.map.legendsTitle' | i18n }}</h4>\n      <div class=\"m-map-pop-in__content\" [style.max-height.px]=\"layersHeight$ | async\">\n        @for (geoLayer of legendLayers$ | async; track geoLayer; let index = $index) {\n          @if (isLayerVisible(geoLayer)) {\n            <div class=\"m-map-pop-in__title\" (click)=\"toggleLegend(index)\">\n              @if (isLayerRendered(geoLayer) && !!geoLayer.title) {\n                <pry-icon\n                  class=\"m-map-pop-in__dropdown-icon\"\n                  [iconSvg]=\"legendTabClosed[index] ? 'chevron_bottom' : 'chevron_top'\"\n                  [width]=\"12\"\n                  [height]=\"12\"\n                ></pry-icon>\n              }\n              <h5 class=\"a-h5\">{{ geoLayer.title }}</h5>\n              @if (!isLayerRendered(geoLayer)) {\n                <pry-icon\n                  class=\"a-tooltip\"\n                  [attr.data-tooltip]=\"'@pry.widget.map.layerLoadError' | i18n\"\n                  [iconSvg]=\"'close'\"\n                  [width]=\"22\"\n                  [height]=\"22\"\n                ></pry-icon>\n              }\n            </div>\n          }\n          <div\n            class=\"m-map-pop-in__image\"\n            [class.-hidden]=\"!legendTabOpen || legendTabClosed[index] || !isLayerRendered(geoLayer)\"\n            [style.max-height.px]=\"legendHeight$ | async\"\n          >\n            @if (geoLayer | legendUrl: { capabilities: (wmsCapabilities$ | async) }; as url) {\n              <img\n                [src]=\"url | getSecuredImage | async\"\n                [alt]=\"'@pry.widget.map.legend' | i18n: { layer: geoLayer.title }\"\n                (error)=\"imageNotProvided[index] = true\"\n              />\n            }\n            @if (!(geoLayer | legendUrl: { capabilities: (wmsCapabilities$ | async) })) {\n              <p class=\"m-map-pop-in__error\">{{ '@pry.widget.map.legendNotProvided' | i18n }}</p>\n            }\n          </div>\n        }\n      </div>\n    </div>\n  }\n\n  @if (leftSlideLayers.length > 0) {\n    <div class=\"m-map-slide-legend -left\" [style.top.px]=\"legendTop$ | async\">\n      <span class=\"m-map-slide-legend__title\">{{ '@pry.widget.map.slideTitle' | i18n }}:</span>\n      @for (layer of leftSlideLayers; track layer) {\n        <div>{{ layer.get('title') }}</div>\n      }\n    </div>\n  }\n\n  @if (rightSlideLayers.length > 0) {\n    <div class=\"m-map-slide-legend -right\" [style.top.px]=\"legendTop$ | async\">\n      <span class=\"m-map-slide-legend__title\">{{ '@pry.widget.map.slideTitle' | i18n }}:</span>\n      @for (layer of rightSlideLayers; track layer) {\n        <div>{{ layer.get('title') }}</div>\n      }\n    </div>\n  }\n\n  <div [style.height.px]=\"height$ | async\" class=\"o-map-wrapper\">\n    <div class=\"o-map\">\n      <div #mapRef id=\"map\"></div>\n      <input\n        type=\"range\"\n        min=\"0\"\n        max=\"100\"\n        step=\"0.01\"\n        value=\"50\"\n        #sliderElement\n        class=\"o-map-slider\"\n        [class.-hidden]=\"!(hasSlideLayer$ | async)\"\n        (input)=\"triggerLayerRender()\"\n      />\n    </div>\n  </div>\n\n  <div #popup class=\"m-tooltip m-tooltip--popup\" [hidden]=\"true\" role=\"tooltip\">\n    <div class=\"m-tooltip--popup__header\">\n      <p>{{ ((tooltipManager.tooltipDisplayedIndex$ | async) ?? 0) + 1 }} / {{ tooltipManager.tooltipNumber }}</p>\n      <button\n        class=\"a-btn a-btn--primary a-btn--icon-only\"\n        (click)=\"tooltipManager.tooltipMove(-1)\"\n        [disabled]=\"!tooltipManager.tooltipCanMove(-1)\"\n      >\n        <pry-icon iconSvg=\"arrow_back\"></pry-icon>\n      </button>\n      <button\n        class=\"a-btn a-btn--primary a-btn--icon-only\"\n        (click)=\"tooltipManager.tooltipMove(1)\"\n        [disabled]=\"!tooltipManager.tooltipCanMove(1)\"\n      >\n        <pry-icon iconSvg=\"arrow_right\"></pry-icon>\n      </button>\n      <button class=\"a-btn a-btn--primary a-btn--icon-only\" (click)=\"tooltipManager.clearTooltip(true)\">\n        <pry-icon iconSvg=\"close\"></pry-icon>\n      </button>\n    </div>\n    <div class=\"m-tooltip--popup__container\">\n      <ng-container #popupContent></ng-container>\n    </div>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'pry-widget-map', template: "<pry-widget-map-css></pry-widget-map-css>\n<div class=\"o-widget o-widget--map\">\n  <pry-widget-header\n    [datasourceIds]=\"(datasourceIds$ | async) ?? []\"\n    *ngIf=\"displayHeader$ | async\"\n    [widgetIndex]=\"widgetIndex\"\n    [manifest]=\"manifest\"\n    (manifestModified)=\"manifestModified.emit($event)\"\n    [headerOptions]=\"(displayHeader$ | async) ?? {}\"\n    #header\n  >\n    <pry-settings\n      (saveTriggered)=\"emitManifest()\"\n      (changeTitle)=\"changeWidgetTitle($event)\"\n      [headerPresent]=\"displayHeader$ | async\"\n      [widgetIndex]=\"widgetIndex\"\n      [header]=\"header\"\n      [open$]=\"open$\"\n      class=\"o-settings\"\n    >\n      <div class=\"m-form-label-field\">\n        <label class=\"a-label\" for=\"map_style\">{{ '@pry.widget.map.style' | i18n }} :</label>\n        <pry-select\n          (ngModelChange)=\"changeStyle($event)\"\n          [items]=\"styles$ | async\"\n          [ngModel]=\"optionsCopy.style\"\n          bindLabel=\"label\"\n          bindValue=\"identifier\"\n          id=\"map_style\"\n        ></pry-select>\n      </div>\n\n      <div class=\"m-form-label-field\" *ngIf=\"optionsCopy.style === STYLE_FROM_URL\">\n        <label class=\"a-label\" for=\"style_URL\">{{ '@pry.widget.map.styleUrl' | i18n }}</label>\n        <input\n          id=\"style_URL\"\n          class=\"a-form-field\"\n          type=\"text\"\n          (input)=\"changeStyleURL($event)\"\n          [value]=\"optionsCopy.styleURL ?? ''\"\n        />\n      </div>\n\n      <pry-checkbox (ngModelChange)=\"changeAutoLayer($event)\" [ngModel]=\"optionsCopy.automaticLayers ?? false\">\n        {{ '@pry.widget.map.autoLayer' | i18n }}\n      </pry-checkbox>\n\n      <pry-checkbox (ngModelChange)=\"changeAttributions($event)\" [ngModel]=\"optionsCopy.attributions ?? false\">\n        {{ '@pry.widget.map.attributions' | i18n }}\n      </pry-checkbox>\n\n      <pry-checkbox (ngModelChange)=\"changeSlideOption($event)\" [ngModel]=\"hasSlideLayer$ | async\">\n        {{ '@pry.widget.map.slide.global' | i18n }}\n      </pry-checkbox>\n\n      <div class=\"o-layer-settings\" cdkDropListGroup cdkDragBoundary>\n        <h4 class=\"a-label\">{{ '@pry.widget.map.layerSettings.title' | i18n }}</h4>\n        <div class=\"u-display-flex -justify-center\">\n          <button class=\"a-btn a-btn--primary\" (click)=\"addLayerGroup()\" type=\"button\">\n            {{ '@pry.widget.map.layerSettings.addLayerGroup' | i18n }}\n          </button>\n        </div>\n        <ng-container *ngFor=\"let group of optionsCopy.layerGroups; let groupIdx = index\">\n          <div *ngIf=\"isGroupUsedByWidgetLayers(group)\" class=\"o-layer-settings__group\">\n            <div class=\"m-form-label-field o-layer-settings__group-title\">\n              <label class=\"a-label\" for=\"map_layerGroupTitle-{{ groupIdx }}\">\n                {{ '@pry.widget.map.layerSettings.layerGroupName' | i18n }}<span class=\"-obligatory-red\">*</span\n                >{{ '@pry.widget.map.layerSettings.optionalColon' | i18n }}\n              </label>\n              <div class=\"u-display-flex\">\n                <div class=\"m-form-label-field u-display-flex -row -gap-10\">\n                  <input\n                    id=\"map_layerGroupTitle-{{ groupIdx }}\"\n                    class=\"a-form-field\"\n                    type=\"text\"\n                    (change)=\"updateLayerGroupName(group, $event)\"\n                    [value]=\"group.name === DEFAULT_LAYER_GROUP ? ('@pry.widget.map.noGroup' | i18n) : group.name\"\n                  />\n                  <button\n                    *ngIf=\"group.name !== DEFAULT_LAYER_GROUP\"\n                    class=\"a-btn--icon-only a-tooltip o-layer-settings__delete-group\"\n                    [attr.data-tooltip]=\"'@pry.widget.map.layerSettings.deleteGroup' | i18n\"\n                    data-tooltip-position=\"left\"\n                    (click)=\"deleteLayerGroup(group.name)\"\n                  >\n                    <pry-icon [height]=\"16\" [width]=\"16\" iconSvg=\"bin_normal\"></pry-icon>\n                  </button>\n                </div>\n              </div>\n            </div>\n            @if (group.name !== DEFAULT_LAYER_GROUP) {\n              <div class=\"m-form-radio-group\">\n                <div class=\"m-form-radio-group__item\">\n                  <input\n                    type=\"radio\"\n                    id=\"multiselection-{{ groupIdx }}\"\n                    [ngModel]=\"group.singleLayer\"\n                    (ngModelChange)=\"updateLayerGroupSingleLayer(group, $event)\"\n                    [value]=\"false\"\n                    [name]=\"group.name\"\n                  />\n                  <label class=\"a-label\" for=\"multiselection-{{ groupIdx }}\">{{\n                    '@pry.widget.map.layerSettings.multipleLayer' | i18n\n                  }}</label>\n                </div>\n                <div class=\"m-form-radio-group__item\">\n                  <input\n                    type=\"radio\"\n                    id=\"monoselection-{{ groupIdx }}\"\n                    [ngModel]=\"group.singleLayer\"\n                    (ngModelChange)=\"updateLayerGroupSingleLayer(group, $event)\"\n                    [value]=\"true\"\n                    [name]=\"group.name\"\n                  />\n                  <label class=\"a-label\" for=\"monoselection-{{ groupIdx }}\">{{\n                    '@pry.widget.map.layerSettings.singleLayer' | i18n\n                  }}</label>\n                </div>\n              </div>\n            }\n            <div class=\"m-btn-group\">\n              <div class=\"u-display-flex -align-center\">\n                <button (click)=\"addLayer(group)\" class=\"a-btn -link-like\" type=\"button\">\n                  + {{ '@pry.widget.map.addLayer' | i18n }}\n                </button>\n              </div>\n              <button (click)=\"toggleExpandAll(group)\" class=\"a-btn -link-like\" type=\"button\">\n                {{\n                  layerSettingsExpandedState[group.name]\n                    ? ('@pry.widget.map.layerSettings.foldAll' | i18n)\n                    : ('@pry.widget.map.layerSettings.unfoldAll' | i18n)\n                }}\n              </button>\n            </div>\n            <div\n              cdkDropList\n              class=\"o-layer-settings__layers\"\n              (cdkDropListDropped)=\"drop($event, group)\"\n              [attr.data-layer-group]=\"group.name\"\n            >\n              <ng-container *ngFor=\"let layer of optionsCopy?.layers; let i = index\">\n                <div\n                  *ngIf=\"layer.group === group.name\"\n                  class=\"o-layer-settings__layer-wrapper\"\n                  cdkDrag\n                  [cdkDragData]=\"layer\"\n                  [cdkDragDisabled]=\"layerSettingsExpandedState[layer.title!]\"\n                >\n                  <div class=\"drag-placeholder\" *cdkDragPlaceholder></div>\n                  <div class=\"o-layer-settings__layer-header\">\n                    <div class=\"u-display-flex -align-center\">\n                      <pry-icon\n                        [class.-disabled]=\"layerSettingsExpandedState[layer.title!]\"\n                        class=\"drag-handle\"\n                        [height]=\"16\"\n                        [width]=\"16\"\n                        iconSvg=\"drag_indicator\"\n                      ></pry-icon>\n                      <button\n                        class=\"a-btn--icon-only unfold-layer\"\n                        (click)=\"toggleLayerExpand(layer, group)\"\n                        type=\"button\"\n                      >\n                        <pry-icon\n                          [height]=\"5\"\n                          [width]=\"9\"\n                          [iconSvg]=\"layerSettingsExpandedState[layer.title!] ? 'chevron_top' : 'chevron_bottom'\"\n                        ></pry-icon>\n                      </button>\n                      <h5 class=\"a-h5\">{{ layer.title ?? ('@pry.widget.map.layer' | i18n: { index: i + 1 }) }}</h5>\n                    </div>\n                    <button\n                      class=\"o-layer-settings__delete-layer a-btn--icon-only a-tooltip\"\n                      [attr.data-tooltip]=\"'@pry.widget.map.layerSettings.deleteLayer' | i18n\"\n                      data-tooltip-position=\"left\"\n                      (click)=\"deleteLayer(i, layer, group)\"\n                    >\n                      <pry-icon [height]=\"16\" [width]=\"16\" iconSvg=\"bin_normal\"></pry-icon>\n                    </button>\n                  </div>\n                  <div *ngIf=\"layerSettingsExpandedState[layer.title!]\" class=\"o-layer-settings__layer-content\">\n                    <div class=\"o-settings__popup__content__fields__content\">\n                      <pry-range\n                        [ngModel]=\"(layer?.opacity ?? 100) + ''\"\n                        (ngModelChange)=\"changeOpacity(layer, $event)\"\n                        labelTranslate=\"@pry.widget.map.opacity\"\n                        min=\"0\"\n                        max=\"100\"\n                      ></pry-range>\n\n                      <fieldset>\n                        <legend class=\"u-visually-hidden\">\n                          {{ '@pry.widget.map.layerOptions' | i18n: { index: i + 1 } }}\n                        </legend>\n                        <div class=\"m-form-label-field\">\n                          <label class=\"a-label\" for=\"layer_{{ i + 1 }}_title\">{{\n                            '@pry.widget.map.layerTitle' | i18n\n                          }}</label>\n                          <input\n                            id=\"layer_{{ i + 1 }}_title\"\n                            class=\"a-form-field\"\n                            type=\"text\"\n                            (change)=\"changeTitle($event, layer, group)\"\n                            [value]=\"layer.title\"\n                          />\n                        </div>\n                        <div class=\"m-form-label-field\" *ngIf=\"!['geoserver', 'auto'].includes(layer.type)\">\n                          <label class=\"a-label\" for=\"map_layerType\">{{\n                            '@pry.widget.map.layerType.title' | i18n\n                          }}</label>\n                          <pry-select\n                            (ngModelChange)=\"changeLayerType($event, i)\"\n                            [items]=\"layerTypes\"\n                            [ngModel]=\"layer.type\"\n                            i18nPrefix=\"@pry.widget.map.layerType.\"\n                            id=\"map_layerType\"\n                          ></pry-select>\n                        </div>\n\n                        <div class=\"m-form-label-field\" *ngIf=\"['geoserver', 'wms'].includes(layer.type)\">\n                          <ng-container *ngIf=\"getAsWmsType(layer) as wmslayer\">\n                            <label class=\"a-label\" for=\"map_layerStyle\">{{\n                              '@pry.widget.map.layerStyle' | i18n\n                            }}</label>\n                            <pry-select\n                              (ngModelChange)=\"changeLayerStyle($event, layer)\"\n                              [items]=\"layerStyleOptions(layer)\"\n                              [ngModel]=\"getStyle(layer)\"\n                              bindLabel=\"label\"\n                              bindValue=\"id\"\n                              id=\"map_layerStyle\"\n                            ></pry-select>\n                          </ng-container>\n                        </div>\n\n                        <div class=\"m-form-label-field\">\n                          <pry-checkbox (ngModelChange)=\"changeFit($event, layer)\" [ngModel]=\"layer.fit\">\n                            {{ '@pry.widget.map.fit' | i18n }}\n                          </pry-checkbox>\n                        </div>\n\n                        <div\n                          *ngIf=\"\n                            layer.type !== 'relation' &&\n                            layer.type !== 'wms' &&\n                            layer.type !== 'wmts' &&\n                            layer.type !== 'geoserver' &&\n                            layer.type !== 'featurelayer' &&\n                            layer.type !== 'vectortile' &&\n                            layer.type !== 'rastertile' &&\n                            layer.type !== 'auto'\n                          \"\n                          class=\"m-form-label-field\"\n                        >\n                          <label class=\"a-label\" for=\"map_classes\">{{ '@pry.widget.map.classes' | i18n }}</label>\n                          <pry-select\n                            (ngModelChange)=\"changeClasses($event, layer)\"\n                            [items]=\"usedClasses$ | async\"\n                            [multiple]=\"true\"\n                            [ngModel]=\"layer.classes\"\n                            bindLabel=\"name\"\n                            bindValue=\"id\"\n                            id=\"map_classes\"\n                          ></pry-select>\n                        </div>\n                      </fieldset>\n                    </div>\n\n                    <fieldset\n                      *ngIf=\"\n                        layer.type !== 'relation' &&\n                        layer.type !== 'wms' &&\n                        layer.type !== 'wmts' &&\n                        layer.type !== 'geoserver' &&\n                        layer.type !== 'featurelayer' &&\n                        layer.type !== 'vectortile' &&\n                        layer.type !== 'rastertile'\n                      \"\n                    >\n                      <legend class=\"u-visually-hidden\">{{ '@pry.widget.map.locationAttr' | i18n }}</legend>\n                      <ng-container\n                        *ngIf=\"\n                          layer\n                            | geometryFieldsFor: { resultSet: resultSet$, classes: layer.classes, type: layer.type }\n                            | async as fields\n                        \"\n                      >\n                        <div\n                          *ngIf=\"\n                            [\n                              'heatmap',\n                              'bubble',\n                              'marker',\n                              'point',\n                              'line',\n                              'polygon',\n                              'multi-line',\n                              'multi-polygon'\n                            ].indexOf(layer.type) >= 0\n                          \"\n                        >\n                          <div class=\"m-form-label-field\">\n                            <label class=\"a-label\" for=\"map_locationAttribute_both\">{{\n                              '@pry.widget.map.locationAttribute.both' | i18n\n                            }}</label>\n                            <pry-select\n                              (ngModelChange)=\"changeLocationAttributes($event, layer)\"\n                              [items]=\"fields\"\n                              [ngModel]=\"layer.attribute\"\n                              bindLabel=\"name\"\n                              bindValue=\"name\"\n                              id=\"map_locationAttribute_both\"\n                            ></pry-select>\n                          </div>\n                        </div>\n\n                        <div *ngIf=\"['heatmap', 'bubble'].indexOf(layer.type) >= 0\">\n                          <div class=\"m-form-label-field\">\n                            <label class=\"a-label\" for=\"map_intensityAttribute\">{{\n                              '@pry.widget.map.intensityAttribute' | i18n\n                            }}</label>\n                            <pry-select\n                              (ngModelChange)=\"changeIntensityAttributes($event, layer)\"\n                              [items]=\"fields\"\n                              [ngModel]=\"layerHasIntensity(layer).intensityAttribute\"\n                              bindLabel=\"name\"\n                              bindValue=\"name\"\n                              id=\"map_intensityAttribute\"\n                            ></pry-select>\n                          </div>\n                        </div>\n                      </ng-container>\n                    </fieldset>\n\n                    <fieldset\n                      *ngIf=\"\n                        layer.type === 'wms' ||\n                        layer.type === 'geoserver' ||\n                        layer.type === 'wmts' ||\n                        layer.type === 'featurelayer' ||\n                        layer.type === 'vectortile' ||\n                        layer.type === 'rastertile'\n                      \"\n                    >\n                      <ng-container *ngIf=\"layer.type !== 'geoserver'\">\n                        <div class=\"m-form-label-field\">\n                          <label class=\"a-label\" for=\"map_wms_url\">{{ '@pry.widget.map.wms.url' | i18n }}</label>\n                          <input\n                            id=\"map_wms_url\"\n                            class=\"a-form-field\"\n                            type=\"text\"\n                            (input)=\"changeUrl($event, layer)\"\n                            [value]=\"layer.url\"\n                          />\n                        </div>\n                      </ng-container>\n\n                      <div class=\"m-form-label-field\" *ngIf=\"layer.type === 'wms' || layer.type === 'wmts'\">\n                        <label class=\"a-label\" for=\"map_wms_paramLayer\">{{\n                          '@pry.widget.map.wms.paramLayer' | i18n\n                        }}</label>\n                        <input\n                          id=\"map_wms_paramLayer\"\n                          class=\"a-form-field\"\n                          type=\"text\"\n                          (input)=\"changeParamLayer($event, layer)\"\n                          [value]=\"layer.paramLayer\"\n                        />\n                      </div>\n\n                      <div class=\"m-form-label-field\" *ngIf=\"layer.type === 'wmts'\">\n                        <label class=\"a-label\" for=\"map_wms_matrixSet\">{{\n                          '@pry.widget.map.wms.matrixSet' | i18n\n                        }}</label>\n                        <input\n                          id=\"map_wms_matrixSet\"\n                          class=\"a-form-field\"\n                          type=\"text\"\n                          (input)=\"changeMatrixSet($event, layer)\"\n                          [value]=\"layer.matrixSet\"\n                        />\n                      </div>\n\n                      <div class=\"m-form-label-field\" *ngIf=\"layer.type === 'wmts'\">\n                        <label class=\"a-label\" for=\"map_wms_style\">{{ '@pry.widget.map.wms.style' | i18n }}</label>\n                        <input\n                          id=\"map_wms_style\"\n                          class=\"a-form-field\"\n                          type=\"text\"\n                          (input)=\"changeParamStyle($event, layer)\"\n                          [value]=\"layer.style\"\n                        />\n                      </div>\n\n                      <div class=\"m-form-label-field\" *ngIf=\"layer.type === 'wms' || layer.type === 'geoserver'\">\n                        <legend class=\"u-visually-hidden\">{{ '@pry.widget.map.tile' | i18n }}</legend>\n                        <pry-checkbox\n                          (ngModelChange)=\"changeParamTiled($event, layer)\"\n                          [ngModel]=\"layer?.paramTiled ?? false\"\n                        >\n                          {{ '@pry.widget.map.wms.paramTiled' | i18n }}\n                        </pry-checkbox>\n                      </div>\n                    </fieldset>\n\n                    <fieldset *ngIf=\"layer.type === 'marker'\">\n                      <legend class=\"u-visually-hidden\">{{ '@pry.widget.map.clustering' | i18n }}</legend>\n                      <div class=\"m-form-label-field\">\n                        <pry-checkbox (ngModelChange)=\"changeClustered(layer, $event)\" [ngModel]=\"layer.clustered\">\n                          {{ '@pry.widget.map.clustered' | i18n }}\n                        </pry-checkbox>\n                      </div>\n                      <div *ngIf=\"layer.clustered\">\n                        <pry-range\n                          [ngModel]=\"layer.clustered\"\n                          (ngModelChange)=\"changeClusterDistance(layer, $event)\"\n                          labelTranslate=\"@pry.widget.map.clusterDistance\"\n                          min=\"1\"\n                          max=\"500\"\n                        ></pry-range>\n                      </div>\n                    </fieldset>\n\n                    <div class=\"m-form-label-field\" *ngIf=\"optionsCopy.slide ?? false\">\n                      <label class=\"a-label\" for=\"slide_select\">{{ '@pry.widget.map.slide.title' | i18n }}</label>\n                      <pry-select\n                        (ngModelChange)=\"changeSlide($event, layer)\"\n                        [items]=\"slides\"\n                        [ngModel]=\"layer.slide ?? 'all'\"\n                        bindLabel=\"label\"\n                        bindValue=\"id\"\n                        id=\"slide_select\"\n                      ></pry-select>\n                    </div>\n\n                    <div class=\"m-form-label-field\" *ngIf=\"optionsCopy.attributions\">\n                      <label class=\"a-label\" for=\"attribution\">{{ '@pry.widget.map.attribution' | i18n }}</label>\n                      <input\n                        id=\"attribution\"\n                        class=\"a-form-field\"\n                        type=\"text\"\n                        (input)=\"changeAttribution($event, layer)\"\n                        [value]=\"layer.attribution ? layer.attribution : ''\"\n                      />\n                    </div>\n                  </div>\n                </div>\n              </ng-container>\n            </div>\n          </div>\n        </ng-container>\n      </div>\n    </pry-settings>\n  </pry-widget-header>\n\n  <div\n    class=\"m-btn-group -map-selection-choice -vertical\"\n    [class.-with-header]=\"displayHeader$ | async\"\n    [class.-closed]=\"!(actionMenuOpen$ | async)\"\n  >\n    <div class=\"-vertical\">\n      <ng-container *ngFor=\"let action of basicActions$ | async\">\n        <button\n          type=\"button\"\n          class=\"a-btn a-btn--icon-only a-tooltip a-tooltip--{{ action }}\"\n          (click)=\"changeSelection(action)\"\n          [attr.data-tooltip]=\"'@pry.widget.map.' + action | i18n\"\n          data-tooltip-position=\"right\"\n        >\n          <pry-icon [iconSvg]=\"action\"></pry-icon>\n          <span class=\"u-visually-hidden\">{{ '@pry.widget.map.' + action | i18n }}</span>\n        </button>\n      </ng-container>\n    </div>\n\n    <button\n      type=\"button\"\n      class=\"a-btn a-btn--icon-only a-tooltip -map-toggle\"\n      id=\"open_menu\"\n      [attr.aria-expanded]=\"actionMenuOpen$ | async\"\n      aria-controls=\"export_type\"\n      aria-haspopup=\"menu\"\n      (click)=\"toggleMenu()\"\n    >\n      <pry-icon\n        [iconSvg]=\"(actionMenuOpen$ | async) ? 'chevron_top' : 'chevron_bottom'\"\n        [width]=\"12\"\n        [height]=\"24\"\n      ></pry-icon>\n      <span class=\"u-visually-hidden\">{{ '@pry.widget.map.open' | i18n }}</span>\n    </button>\n  </div>\n\n  <div class=\"m-btn-group -map-selection-choice -map-export\" [class.-with-header]=\"displayHeader$ | async\">\n    <button\n      type=\"button\"\n      class=\"a-btn a-btn--icon-only a-tooltip\"\n      id=\"export_card\"\n      aria-expanded=\"false\"\n      aria-controls=\"export_type\"\n      aria-haspopup=\"menu\"\n      [attr.data-tooltip]=\"'@pry.widget.map.export' | i18n\"\n      data-tooltip-position=\"right\"\n      (click)=\"export()\"\n    >\n      <pry-icon iconSvg=\"file_download\"></pry-icon>\n      <span class=\"u-visually-hidden\">{{ '@pry.widget.map.export' | i18n }}</span>\n    </button>\n  </div>\n\n  @if ((layers$ | async)?.length) {\n    <div class=\"ol-control m-map-action m-map-action--layers\" [style.top.px]=\"layersTop$ | async\">\n      <button\n        class=\"m-map-action__button\"\n        [class.a-tooltip]=\"!this.layersTabOpen\"\n        [class.-tooltip-no-wrap]=\"!this.layersTabOpen\"\n        (click)=\"toggleLayersWindow()\"\n        [attr.data-tooltip]=\"'@pry.widget.map.selectLayers' | i18n\"\n        data-tooltip-position=\"left\"\n      >\n        <pry-icon iconSvg=\"layers\" [width]=\"18\" [height]=\"18\"></pry-icon>\n      </button>\n    </div>\n    <div class=\"m-map-pop-in -max-width-220\" [class.-hidden]=\"!layersTabOpen\" [style.top.px]=\"layersTop$ | async\">\n      <h4 class=\"a-h4\">{{ '@pry.widget.map.layerSettings.selectLayers' | i18n }}</h4>\n      <div class=\"m-map-pop-in__content\" [style.max-height.px]=\"layersHeight$ | async\">\n        @for (group of (options$ | async)?.layerGroups ?? []; track group; let groupIdx = $index) {\n          @if (isGroupUsedByWidgetLayers(group)) {\n            <div class=\"m-map-pop-in__title m-map-pop-in__group-title\">\n              <h5 class=\"a-h5\">\n                {{ group.name === DEFAULT_LAYER_GROUP ? ('@pry.widget.map.noGroup' | i18n) : group.name }}\n              </h5>\n            </div>\n            @if (group.singleLayer) {\n              <div class=\"m-map-pop-in__radios\">\n                <div class=\"m-map-pop-in__title\" [class.-hidden]=\"!layersTabOpen\">\n                  <input\n                    type=\"radio\"\n                    [name]=\"group.name\"\n                    id=\"radio-layer-group-{{ groupIdx }}\"\n                    [ngModel]=\"group.visibleLayers.length\"\n                    [value]=\"0\"\n                    (change)=\"changeVisibility(group)\"\n                  />\n                  <label class=\"a-label\" for=\"radio-layer-group-{{ groupIdx }}\">{{\n                    '@pry.widget.map.layerSettings.noLayer' | i18n\n                  }}</label>\n                </div>\n                @for (layer of optionsCopy.layers; track layer; let index = $index) {\n                  @if (layer.group === group.name) {\n                    <div class=\"m-map-pop-in__title\" [class.-hidden]=\"!layersTabOpen\">\n                      <input\n                        type=\"radio\"\n                        [name]=\"group.name\"\n                        id=\"radio-{{ group.name }}-layer-{{ index }}\"\n                        [ngModel]=\"group.visibleLayers[0]\"\n                        [value]=\"layer.title\"\n                        (change)=\"changeVisibility(group, layer)\"\n                      />\n                      <label class=\"a-label\" for=\"radio-{{ group.name }}-layer-{{ index }}\">{{\n                        layer.title ?? ('@pry.widget.map.missingTitle' | i18n)\n                      }}</label>\n                    </div>\n                  }\n                }\n              </div>\n            } @else {\n              @for (layer of optionsCopy.layers; track layer; let index = $index) {\n                @if (layer.group === group.name) {\n                  <div class=\"m-map-pop-in__title\" [class.-hidden]=\"!layersTabOpen\">\n                    <pry-checkbox\n                      [ngModel]=\"isLayerVisible(layer, group)\"\n                      (change)=\"changeVisibility(group, layer)\"\n                      id=\"checkbox-layer-{{ index }}\"\n                    ></pry-checkbox>\n                    <label class=\"a-label\" for=\"checkbox-layer-{{ index }}\">\n                      {{ layer.title ?? ('@pry.widget.map.missingTitle' | i18n) }}\n                    </label>\n                  </div>\n                }\n              }\n            }\n          }\n        }\n      </div>\n    </div>\n  }\n  @if ((legendLayers$ | async)?.length) {\n    <div class=\"ol-control m-map-action m-map-action--legend\" [style.top.px]=\"legendTop$ | async\">\n      <button\n        [class.a-tooltip]=\"!this.legendTabOpen\"\n        [class.-tooltip-no-wrap]=\"!this.legendTabOpen\"\n        class=\"m-map-action__button\"\n        (click)=\"toggleLegendWindow()\"\n        [attr.data-tooltip]=\"'@pry.widget.map.legends' | i18n\"\n        data-tooltip-position=\"left\"\n      >\n        <pry-icon iconSvg=\"legend\" [width]=\"18\" [height]=\"15\"></pry-icon>\n      </button>\n    </div>\n    <div class=\"m-map-pop-in\" [class.-hidden]=\"!legendTabOpen\" [style.top.px]=\"legendTop$ | async\">\n      <h4 class=\"a-h4\">{{ '@pry.widget.map.legendsTitle' | i18n }}</h4>\n      <div class=\"m-map-pop-in__content\" [style.max-height.px]=\"layersHeight$ | async\">\n        @for (geoLayer of legendLayers$ | async; track geoLayer; let index = $index) {\n          @if (isLayerVisible(geoLayer)) {\n            <div class=\"m-map-pop-in__title\" (click)=\"toggleLegend(index)\">\n              @if (isLayerRendered(geoLayer) && !!geoLayer.title) {\n                <pry-icon\n                  class=\"m-map-pop-in__dropdown-icon\"\n                  [iconSvg]=\"legendTabClosed[index] ? 'chevron_bottom' : 'chevron_top'\"\n                  [width]=\"12\"\n                  [height]=\"12\"\n                ></pry-icon>\n              }\n              <h5 class=\"a-h5\">{{ geoLayer.title }}</h5>\n              @if (!isLayerRendered(geoLayer)) {\n                <pry-icon\n                  class=\"a-tooltip\"\n                  [attr.data-tooltip]=\"'@pry.widget.map.layerLoadError' | i18n\"\n                  [iconSvg]=\"'close'\"\n                  [width]=\"22\"\n                  [height]=\"22\"\n                ></pry-icon>\n              }\n            </div>\n          }\n          <div\n            class=\"m-map-pop-in__image\"\n            [class.-hidden]=\"!legendTabOpen || legendTabClosed[index] || !isLayerRendered(geoLayer)\"\n            [style.max-height.px]=\"legendHeight$ | async\"\n          >\n            @if (geoLayer | legendUrl: { capabilities: (wmsCapabilities$ | async) }; as url) {\n              <img\n                [src]=\"url | getSecuredImage | async\"\n                [alt]=\"'@pry.widget.map.legend' | i18n: { layer: geoLayer.title }\"\n                (error)=\"imageNotProvided[index] = true\"\n              />\n            }\n            @if (!(geoLayer | legendUrl: { capabilities: (wmsCapabilities$ | async) })) {\n              <p class=\"m-map-pop-in__error\">{{ '@pry.widget.map.legendNotProvided' | i18n }}</p>\n            }\n          </div>\n        }\n      </div>\n    </div>\n  }\n\n  @if (leftSlideLayers.length > 0) {\n    <div class=\"m-map-slide-legend -left\" [style.top.px]=\"legendTop$ | async\">\n      <span class=\"m-map-slide-legend__title\">{{ '@pry.widget.map.slideTitle' | i18n }}:</span>\n      @for (layer of leftSlideLayers; track layer) {\n        <div>{{ layer.get('title') }}</div>\n      }\n    </div>\n  }\n\n  @if (rightSlideLayers.length > 0) {\n    <div class=\"m-map-slide-legend -right\" [style.top.px]=\"legendTop$ | async\">\n      <span class=\"m-map-slide-legend__title\">{{ '@pry.widget.map.slideTitle' | i18n }}:</span>\n      @for (layer of rightSlideLayers; track layer) {\n        <div>{{ layer.get('title') }}</div>\n      }\n    </div>\n  }\n\n  <div [style.height.px]=\"height$ | async\" class=\"o-map-wrapper\">\n    <div class=\"o-map\">\n      <div #mapRef id=\"map\"></div>\n      <input\n        type=\"range\"\n        min=\"0\"\n        max=\"100\"\n        step=\"0.01\"\n        value=\"50\"\n        #sliderElement\n        class=\"o-map-slider\"\n        [class.-hidden]=\"!(hasSlideLayer$ | async)\"\n        (input)=\"triggerLayerRender()\"\n      />\n    </div>\n  </div>\n\n  <div #popup class=\"m-tooltip m-tooltip--popup\" [hidden]=\"true\" role=\"tooltip\">\n    <div class=\"m-tooltip--popup__header\">\n      <p>{{ ((tooltipManager.tooltipDisplayedIndex$ | async) ?? 0) + 1 }} / {{ tooltipManager.tooltipNumber }}</p>\n      <button\n        class=\"a-btn a-btn--primary a-btn--icon-only\"\n        (click)=\"tooltipManager.tooltipMove(-1)\"\n        [disabled]=\"!tooltipManager.tooltipCanMove(-1)\"\n      >\n        <pry-icon iconSvg=\"arrow_back\"></pry-icon>\n      </button>\n      <button\n        class=\"a-btn a-btn--primary a-btn--icon-only\"\n        (click)=\"tooltipManager.tooltipMove(1)\"\n        [disabled]=\"!tooltipManager.tooltipCanMove(1)\"\n      >\n        <pry-icon iconSvg=\"arrow_right\"></pry-icon>\n      </button>\n      <button class=\"a-btn a-btn--primary a-btn--icon-only\" (click)=\"tooltipManager.clearTooltip(true)\">\n        <pry-icon iconSvg=\"close\"></pry-icon>\n      </button>\n    </div>\n    <div class=\"m-tooltip--popup__container\">\n      <ng-container #popupContent></ng-container>\n    </div>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1.Store }, { type: i2.PryI18nService }, { type: i2.TooltipFactoryService }, { type: i2.SymbolService }, { type: i0.Injector }, { type: WidgetMapLayerService }, { type: i2.PryAggregationService }, { type: i0.ElementRef }, { type: i2.PryGeoAuthService, decorators: [{
                     type: Optional
                 }, {