@provoly/dashboard 0.21.4 → 0.21.5

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

@@ -6,23 +6,23 @@ import { Injectable, Component, ViewEncapsulation, Pipe, ViewContainerRef, Templ
 import * as i5 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import * as i2 from '@provoly/dashboard';
-import { widgetMapConfig, DashboardActions, ContextMenuActions, TooltipMode, DEFAULT_PROJECTION, ItemUtils, FieldType, ClassSelectors, FieldSelectors, DataWidgetComponent, WIDGET_HEADER_HEIGHT, NamedQueryTypes, DashboardSelectors, ConfigSelectors, DatasourceUtils, GeoMetadata, GeometricFieldTypes, Operation, DataSourceSelectors, ResultsetUtils, PRY_GEOAUTH_TOKEN, BaseWidgetModule, PryCoreModule, PryDashboardModule, PrySelectModule, PryIconModule, PryToggleModule, PryOverlayModule, PryI18nModule, PryRangeModule } from '@provoly/dashboard';
+import { widgetMapConfig, DashboardActions, ContextMenuActions, TooltipMode, TextFieldTypes, DEFAULT_PROJECTION, ItemUtils, FieldType, ClassSelectors, FieldSelectors, DataWidgetComponent, WIDGET_HEADER_HEIGHT, NamedQueryTypes, DashboardSelectors, ConfigSelectors, DatasourceUtils, GeoMetadata, GeometricFieldTypes, Operation, DataSourceSelectors, ResultsetUtils, PRY_GEOAUTH_TOKEN, BaseWidgetModule, PryCoreModule, PryDashboardModule, PrySelectModule, PryIconModule, PryToggleModule, PryOverlayModule, PryI18nModule, PryRangeModule } from '@provoly/dashboard';
 import * as i6 from '@provoly/dashboard/components/checkbox';
 import { PryCheckboxModule } from '@provoly/dashboard/components/checkbox';
 import equal from 'fast-deep-equal/es6';
 import { Feature, Overlay, Map, View } from 'ol';
 import { getWidth, getTopLeft, createEmpty, boundingExtent } from 'ol/extent';
 import { Heatmap, Tile } from 'ol/layer';
+import VectorLayer from 'ol/layer/Vector';
 import { toLonLat, get, transform, fromLonLat } from 'ol/proj';
 import { register } from 'ol/proj/proj4';
 import { Vector, TileWMS, ImageWMS, WMTS, XYZ, Cluster, DataTile } from 'ol/source';
 import proj4 from 'proj4';
-import { BehaviorSubject, map, combineLatest, filter, distinctUntilChanged, startWith, debounceTime, delay, mergeMap, of, from, switchMap, catchError } from 'rxjs';
+import { BehaviorSubject, map, combineLatest, filter, distinctUntilChanged, startWith, debounceTime, delay, mergeMap, of, from, switchMap, catchError, withLatestFrom } from 'rxjs';
 import { ScaleLine, Attribution, defaults } from 'ol/control';
 import { Polygon, Circle as Circle$1, LineString } from 'ol/geom';
 import PointerInteraction from 'ol/interaction/Pointer';
 import TileLayer from 'ol/layer/Tile';
-import VectorLayer from 'ol/layer/Vector';
 import VectorTileLayer from 'ol/layer/VectorTile';
 import RenderBox from 'ol/render/Box';
 import VectorSource from 'ol/source/Vector';
@@ -273,7 +273,8 @@ class InteractionManager {
                 bar: true,
                 steps: 4,
                 text: true,
-                minWidth: 140
+                minWidth: 140,
+                dpi: 90
             });
             this.component.map.addControl(this.scaleControl);
         }
@@ -298,7 +299,7 @@ class InteractionManager {
 }
 
 class CqlUtils {
-    static getCQLParamsFor(datasourceId, filters, classes) {
+    static getCQLParamsFor(datasourceId, filters, classes, fields) {
         if (!filters || !datasourceId || !filters[datasourceId] || filters[datasourceId].length === 0) {
             return null;
         }
@@ -306,12 +307,19 @@ class CqlUtils {
         return filters[datasourceId]
             .map((cond) => {
             const conditions = [];
-            const attributeName = attributesReference.find((attr) => attr.id === cond.attribute)?.technicalName;
+            const attribute = attributesReference.find((attr) => attr.id === cond.attribute);
+            const field = fields.find((f) => f.id === attribute?.field);
+            const attributeName = attribute?.technicalName;
             if (attributeName && cond.value && (typeof cond.value !== 'string' || cond.value.length > 0)) {
                 const quoteSafeValue = `${cond.value}`.replace(/'/g, "''");
                 switch (cond.operator) {
                     case 'EQUALS':
-                        conditions.push(`${attributeName}='${quoteSafeValue}'`);
+                        if (!field || TextFieldTypes.includes(field?.type)) {
+                            conditions.push(`${attributeName}='${quoteSafeValue}'`);
+                        }
+                        else {
+                            conditions.push(`${attributeName}=${cond.value}`);
+                        }
                         break;
                     case 'CONTAINS':
                         conditions.push(`${attributeName} LIKE '%${quoteSafeValue}%'`);
@@ -826,6 +834,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }] });
 
 class WidgetMapUtils {
+    static { this.geoJSON = new GeoJSON(); }
     static populateLocationAttribute(layer, resultSet, classesNotFiltered, fields) {
         if (['heatmap', 'marker', 'bubble', 'point', 'line', 'polygon', 'multi-line', 'multi-polygon', 'auto'].includes(layer.type) &&
             !!resultSet &&
@@ -1065,7 +1074,7 @@ class WidgetMapUtils {
         }
         let geometry;
         try {
-            geometry = new GeoJSON().readGeometry(value.value, {
+            geometry = WidgetMapUtils.geoJSON.readGeometry(value.value, {
                 featureProjection: projection
             });
         }
@@ -1180,11 +1189,11 @@ class LayerSlider {
 
 class PryWidgetMapCssComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PryWidgetMapCssComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PryWidgetMapCssComponent, selector: "pry-widget-map-css", ngImport: i0, template: '', isInline: true, styles: [":root,:host{--ol-background-color: white;--ol-accent-background-color: #F5F5F5;--ol-subtle-background-color: rgba(128, 128, 128, .25);--ol-partial-background-color: rgba(255, 255, 255, .75);--ol-foreground-color: #333333;--ol-subtle-foreground-color: #666666;--ol-brand-color: #00AAFF}.ol-box{box-sizing:border-box;border-radius:2px;border:1.5px solid var(--ol-background-color);background-color:var(--ol-partial-background-color)}.ol-mouse-position{top:8px;right:8px;position:absolute}.ol-scale-line{background:var(--ol-partial-background-color);border-radius:4px;bottom:8px;left:8px;padding:2px;position:absolute}.ol-scale-line-inner{border:1px solid var(--ol-subtle-foreground-color);border-top:none;color:var(--ol-foreground-color);font-size:10px;text-align:center;margin:1px;will-change:contents,width;transition:all .25s}.ol-scale-bar{position:absolute;bottom:8px;left:8px}.ol-scale-bar-inner{display:flex}.ol-scale-step-marker{width:1px;height:15px;background-color:var(--ol-foreground-color);float:right;z-index:10}.ol-scale-step-text{position:absolute;bottom:-5px;font-size:10px;z-index:11;color:var(--ol-foreground-color);text-shadow:-1.5px 0 var(--ol-partial-background-color),0 1.5px var(--ol-partial-background-color),1.5px 0 var(--ol-partial-background-color),0 -1.5px var(--ol-partial-background-color)}.ol-scale-text{position:absolute;font-size:12px;text-align:center;bottom:25px;color:var(--ol-foreground-color);text-shadow:-1.5px 0 var(--ol-partial-background-color),0 1.5px var(--ol-partial-background-color),1.5px 0 var(--ol-partial-background-color),0 -1.5px var(--ol-partial-background-color)}.ol-scale-singlebar{position:relative;height:10px;z-index:9;box-sizing:border-box;border:1px solid var(--ol-foreground-color)}.ol-scale-singlebar-even{background-color:var(--ol-subtle-foreground-color)}.ol-scale-singlebar-odd{background-color:var(--ol-background-color)}.ol-unsupported{display:none}.ol-viewport,.ol-unselectable{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.ol-viewport canvas{all:unset}.ol-selectable{-webkit-touch-callout:default;-webkit-user-select:text;user-select:text}.ol-grabbing{cursor:grabbing}.ol-grab{cursor:move;cursor:grab}.ol-control{position:absolute;background-color:var(--ol-subtle-background-color);border-radius:4px}.ol-zoom{top:.5em;left:.5em}.ol-rotate{top:.5em;right:.5em;transition:opacity .25s linear,visibility 0s linear}.ol-rotate.ol-hidden{opacity:0;visibility:hidden;transition:opacity .25s linear,visibility 0s linear .25s}.ol-zoom-extent{top:4.643em;left:.5em}.ol-full-screen{right:.5em;top:.5em}.ol-control button{display:block;margin:1px;padding:0;color:var(--ol-subtle-foreground-color);font-weight:700;text-decoration:none;font-size:inherit;text-align:center;height:1.375em;width:1.375em;line-height:.4em;background-color:var(--ol-background-color);border:none;border-radius:2px}.ol-control button::-moz-focus-inner{border:none;padding:0}.ol-zoom-extent button{line-height:1.4em}.ol-compass{display:block;font-weight:400;will-change:transform}.ol-touch .ol-control button{font-size:1.5em}.ol-touch .ol-zoom-extent{top:5.5em}.ol-control button:hover,.ol-control button:focus{text-decoration:none;outline:1px solid var(--ol-subtle-foreground-color);color:var(--ol-foreground-color)}.ol-zoom .ol-zoom-in{border-radius:2px 2px 0 0}.ol-zoom .ol-zoom-out{border-radius:0 0 2px 2px}.ol-attribution{text-align:right;bottom:.5em;right:.5em;max-width:calc(100% - 1.3em);display:flex;flex-flow:row-reverse;align-items:center}.ol-attribution a{color:var(--ol-subtle-foreground-color);text-decoration:none}.ol-attribution ul{margin:0;padding:1px .5em;color:var(--ol-foreground-color);text-shadow:0 0 2px var(--ol-background-color);font-size:12px}.ol-attribution li{display:inline;list-style:none}.ol-attribution li:not(:last-child):after{content:\" \"}.ol-attribution img{max-height:2em;max-width:inherit;vertical-align:middle}.ol-attribution button{flex-shrink:0}.ol-attribution.ol-collapsed ul{display:none}.ol-attribution:not(.ol-collapsed){background:var(--ol-partial-background-color)}.ol-attribution.ol-uncollapsible{bottom:0;right:0;border-radius:4px 0 0}.ol-attribution.ol-uncollapsible img{margin-top:-.2em;max-height:1.6em}.ol-attribution.ol-uncollapsible button{display:none}.ol-zoomslider{top:4.5em;left:.5em;height:200px}.ol-zoomslider button{position:relative;height:10px}.ol-touch .ol-zoomslider{top:5.5em}.ol-overviewmap{left:.5em;bottom:.5em}.ol-overviewmap.ol-uncollapsible{bottom:0;left:0;border-radius:0 4px 0 0}.ol-overviewmap .ol-overviewmap-map,.ol-overviewmap button{display:block}.ol-overviewmap .ol-overviewmap-map{border:1px solid var(--ol-subtle-foreground-color);height:150px;width:150px}.ol-overviewmap:not(.ol-collapsed) button{bottom:0;left:0;position:absolute}.ol-overviewmap.ol-collapsed .ol-overviewmap-map,.ol-overviewmap.ol-uncollapsible button{display:none}.ol-overviewmap:not(.ol-collapsed){background:var(--ol-subtle-background-color)}.ol-overviewmap-box{border:1.5px dotted var(--ol-subtle-foreground-color)}.ol-overviewmap .ol-overviewmap-box:hover{cursor:move}.o-widget--map{display:flex;flex-direction:column}.o-widget--map div.ol-scale-bar{position:absolute;left:initial;right:8px;bottom:8px}.o-map-wrapper{display:flex;width:100%;flex:1 1}.o-map{width:100%;height:100%}#map,.map-frame{height:100%}.layer-switcher{top:5rem;left:.5rem;right:unset;border-width:.0625rem;border-style:solid;border-radius:.4375rem}.layer-switcher button{background-size:30px;background-position:unset;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjMyIiBoZWlnaHQ9IjMyIj48cGF0aCBmaWxsPSJub25lIiBkPSJNMCAwaDI0djI0SDB6Ii8+PHBhdGggZD0iTTIwLjA4MyAxNS4ybDEuMjAyLjcyMWEuNS41IDAgMCAxIDAgLjg1OGwtOC43NyA1LjI2MmExIDEgMCAwIDEtMS4wMyAwbC04Ljc3LTUuMjYyYS41LjUgMCAwIDEgMC0uODU4bDEuMjAyLS43MjFMMTIgMjAuMDVsOC4wODMtNC44NXptMC00LjdsMS4yMDIuNzIxYS41LjUgMCAwIDEgMCAuODU4TDEyIDE3LjY1bC05LjI4NS01LjU3MWEuNS41IDAgMCAxIDAtLjg1OGwxLjIwMi0uNzIxTDEyIDE1LjM1bDguMDgzLTQuODV6bS03LjU2OS05LjE5MWw4Ljc3MSA1LjI2MmEuNS41IDAgMCAxIDAgLjg1OEwxMiAxMyAyLjcxNSA3LjQyOWEuNS41IDAgMCAxIDAtLjg1OGw4Ljc3LTUuMjYyYTEgMSAwIDAgMSAxLjAzIDB6TTEyIDMuMzMyTDUuODg3IDcgMTIgMTAuNjY4IDE4LjExMyA3IDEyIDMuMzMyeiIvPjwvc3ZnPg==)}.layer-switcher.shown.ol-control:hover{background-color:#fff9}.ol-attribution,.ol-zoom{top:.3125rem;bottom:unset;border-radius:.375rem;padding:0;border:none;background:white}.ol-attribution>button,.ol-zoom>button{padding:0;border:none;background:white}.ol-zoom{top:.3125rem;right:.5rem;left:unset;bottom:unset;border-radius:.375rem;padding:0;border:none;background:white}.ol-zoom>button{padding:0;border:none;background:white}.a-form-field[type=radio]:read-only{pointer-events:auto}.a-tooltip--move[data-tooltip]:not([data-tooltip-position]):after{left:calc(50% + 20px)}.a-tooltip--click[data-tooltip]:not([data-tooltip-position]):after{left:calc(50% + 10px)}.a-tooltip[data-tooltip].--absolute{position:absolute}.a-tooltip[data-tooltip].--nopos{position:unset}.o-map-slider{position:absolute;width:100%;margin-top:-.625rem;z-index:1;-webkit-appearance:none;appearance:none;background:transparent;cursor:grab}.o-map-slider.-hidden{visibility:hidden;pointer-events:none}.o-map-slider::-webkit-slider-runnable-track{background:none}.o-map-slider::-moz-range-track{background:none}.o-map-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background-color:#113b6e;height:125rem;margin-top:-121.875rem;width:.25rem}.o-map-slider::-moz-range-thumb{border:none;border-radius:0;background-color:#113b6e;height:125rem;margin-top:-121.875rem;width:.25rem}\n", ".m-layer-legend{z-index:2;right:.5rem}.m-layer-legend.ol-control{display:flex;flex-direction:column;align-items:flex-start;border:none;background:white}.m-layer-legend button{background-color:#fafafa!important;color:#000}.m-layer-legend .-hidden{display:none}.m-layer-legend__toggle{align-self:flex-end;width:1.875rem;height:1.875rem}.m-layer-legend__title{display:flex;flex-direction:row;align-items:center;background-color:#fff;justify-content:space-between}.m-layer-legend__image{background:white;overflow:scroll}.m-layer-legend__error{font-style:italic;color:#c74646}.m-layer-switcher{z-index:2;right:.5rem;display:flex;flex-direction:column;align-items:normal}.m-layer-switcher.ol-control{border:none;background:white;align-self:flex-end}.m-layer-switcher button{background-color:#fafafa!important;color:#000}.m-layer-switcher .-hidden{display:none}.m-layer-switcher__toggle{width:1.875rem;height:1.875rem;align-self:flex-end}.m-layer-switcher__title{display:flex;flex-direction:row;background-color:#fff;justify-content:space-between;gap:.625rem;padding:5px}.m-layer-switcher__image{background:white;overflow:scroll}.m-layer-switcher__error{font-style:italic;color:#c74646}.m-map-slide-legend{pointer-events:none;position:absolute;z-index:1;background-color:#fff;border-radius:.3125rem;padding:.3125rem}.m-map-slide-legend.-left{left:4.0625rem}.m-map-slide-legend.-right{right:2.9375rem}.m-map-slide-legend__title{font-weight:700}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PryWidgetMapCssComponent, selector: "pry-widget-map-css", ngImport: i0, template: '', isInline: true, styles: [":root,:host{--ol-background-color: white;--ol-accent-background-color: #F5F5F5;--ol-subtle-background-color: rgba(128, 128, 128, .25);--ol-partial-background-color: rgba(255, 255, 255, .75);--ol-foreground-color: #333333;--ol-subtle-foreground-color: #666666;--ol-brand-color: #00AAFF}.ol-box{box-sizing:border-box;border-radius:2px;border:1.5px solid var(--ol-background-color);background-color:var(--ol-partial-background-color)}.ol-mouse-position{top:8px;right:8px;position:absolute}.ol-scale-line{background:var(--ol-partial-background-color);border-radius:4px;bottom:8px;left:8px;padding:2px;position:absolute}.ol-scale-line-inner{border:1px solid var(--ol-subtle-foreground-color);border-top:none;color:var(--ol-foreground-color);font-size:10px;text-align:center;margin:1px;will-change:contents,width;transition:all .25s}.ol-scale-bar{position:absolute;bottom:8px;left:8px}.ol-scale-bar-inner{display:flex}.ol-scale-step-marker{width:1px;height:15px;background-color:var(--ol-foreground-color);float:right;z-index:10}.ol-scale-step-text{position:absolute;bottom:-5px;font-size:10px;z-index:11;color:var(--ol-foreground-color);text-shadow:-1.5px 0 var(--ol-partial-background-color),0 1.5px var(--ol-partial-background-color),1.5px 0 var(--ol-partial-background-color),0 -1.5px var(--ol-partial-background-color)}.ol-scale-text{position:absolute;font-size:12px;text-align:center;bottom:25px;color:var(--ol-foreground-color);text-shadow:-1.5px 0 var(--ol-partial-background-color),0 1.5px var(--ol-partial-background-color),1.5px 0 var(--ol-partial-background-color),0 -1.5px var(--ol-partial-background-color)}.ol-scale-singlebar{position:relative;height:10px;z-index:9;box-sizing:border-box;border:1px solid var(--ol-foreground-color)}.ol-scale-singlebar-even{background-color:var(--ol-subtle-foreground-color)}.ol-scale-singlebar-odd{background-color:var(--ol-background-color)}.ol-unsupported{display:none}.ol-viewport,.ol-unselectable{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.ol-viewport canvas{all:unset}.ol-selectable{-webkit-touch-callout:default;-webkit-user-select:text;user-select:text}.ol-grabbing{cursor:grabbing}.ol-grab{cursor:move;cursor:grab}.ol-control{position:absolute;background-color:var(--ol-subtle-background-color);border-radius:4px}.ol-zoom{top:.5em;left:.5em}.ol-rotate{top:.5em;right:.5em;transition:opacity .25s linear,visibility 0s linear}.ol-rotate.ol-hidden{opacity:0;visibility:hidden;transition:opacity .25s linear,visibility 0s linear .25s}.ol-zoom-extent{top:4.643em;left:.5em}.ol-full-screen{right:.5em;top:.5em}.ol-control button{display:block;margin:1px;padding:0;color:var(--ol-subtle-foreground-color);font-weight:700;text-decoration:none;font-size:inherit;text-align:center;height:1.375em;width:1.375em;line-height:.4em;background-color:var(--ol-background-color);border:none;border-radius:2px}.ol-control button::-moz-focus-inner{border:none;padding:0}.ol-zoom-extent button{line-height:1.4em}.ol-compass{display:block;font-weight:400;will-change:transform}.ol-touch .ol-control button{font-size:1.5em}.ol-touch .ol-zoom-extent{top:5.5em}.ol-control button:hover,.ol-control button:focus{text-decoration:none;outline:1px solid var(--ol-subtle-foreground-color);color:var(--ol-foreground-color)}.ol-zoom .ol-zoom-in{border-radius:2px 2px 0 0}.ol-zoom .ol-zoom-out{border-radius:0 0 2px 2px}.ol-attribution{text-align:right;bottom:.5em;right:.5em;max-width:calc(100% - 1.3em);display:flex;flex-flow:row-reverse;align-items:center}.ol-attribution a{color:var(--ol-subtle-foreground-color);text-decoration:none}.ol-attribution ul{margin:0;padding:1px .5em;color:var(--ol-foreground-color);text-shadow:0 0 2px var(--ol-background-color);font-size:12px}.ol-attribution li{display:inline;list-style:none}.ol-attribution li:not(:last-child):after{content:\" \"}.ol-attribution img{max-height:2em;max-width:inherit;vertical-align:middle}.ol-attribution button{flex-shrink:0}.ol-attribution.ol-collapsed ul{display:none}.ol-attribution:not(.ol-collapsed){background:var(--ol-partial-background-color)}.ol-attribution.ol-uncollapsible{bottom:0;right:0;border-radius:4px 0 0}.ol-attribution.ol-uncollapsible img{margin-top:-.2em;max-height:1.6em}.ol-attribution.ol-uncollapsible button{display:none}.ol-zoomslider{top:4.5em;left:.5em;height:200px}.ol-zoomslider button{position:relative;height:10px}.ol-touch .ol-zoomslider{top:5.5em}.ol-overviewmap{left:.5em;bottom:.5em}.ol-overviewmap.ol-uncollapsible{bottom:0;left:0;border-radius:0 4px 0 0}.ol-overviewmap .ol-overviewmap-map,.ol-overviewmap button{display:block}.ol-overviewmap .ol-overviewmap-map{border:1px solid var(--ol-subtle-foreground-color);height:150px;width:150px}.ol-overviewmap:not(.ol-collapsed) button{bottom:0;left:0;position:absolute}.ol-overviewmap.ol-collapsed .ol-overviewmap-map,.ol-overviewmap.ol-uncollapsible button{display:none}.ol-overviewmap:not(.ol-collapsed){background:var(--ol-subtle-background-color)}.ol-overviewmap-box{border:1.5px dotted var(--ol-subtle-foreground-color)}.ol-overviewmap .ol-overviewmap-box:hover{cursor:move}.o-widget--map{display:flex;flex-direction:column}.o-widget--map div.ol-scale-bar{position:absolute;left:initial;right:8px;bottom:8px}.o-map-wrapper{display:flex;width:100%;flex:1 1}.o-map{width:100%;height:100%}#map,.map-frame{height:100%}.layer-switcher{top:5rem;left:.5rem;right:unset;border-width:.0625rem;border-style:solid;border-radius:.4375rem}.layer-switcher button{background-size:30px;background-position:unset;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjMyIiBoZWlnaHQ9IjMyIj48cGF0aCBmaWxsPSJub25lIiBkPSJNMCAwaDI0djI0SDB6Ii8+PHBhdGggZD0iTTIwLjA4MyAxNS4ybDEuMjAyLjcyMWEuNS41IDAgMCAxIDAgLjg1OGwtOC43NyA1LjI2MmExIDEgMCAwIDEtMS4wMyAwbC04Ljc3LTUuMjYyYS41LjUgMCAwIDEgMC0uODU4bDEuMjAyLS43MjFMMTIgMjAuMDVsOC4wODMtNC44NXptMC00LjdsMS4yMDIuNzIxYS41LjUgMCAwIDEgMCAuODU4TDEyIDE3LjY1bC05LjI4NS01LjU3MWEuNS41IDAgMCAxIDAtLjg1OGwxLjIwMi0uNzIxTDEyIDE1LjM1bDguMDgzLTQuODV6bS03LjU2OS05LjE5MWw4Ljc3MSA1LjI2MmEuNS41IDAgMCAxIDAgLjg1OEwxMiAxMyAyLjcxNSA3LjQyOWEuNS41IDAgMCAxIDAtLjg1OGw4Ljc3LTUuMjYyYTEgMSAwIDAgMSAxLjAzIDB6TTEyIDMuMzMyTDUuODg3IDcgMTIgMTAuNjY4IDE4LjExMyA3IDEyIDMuMzMyeiIvPjwvc3ZnPg==)}.layer-switcher.shown.ol-control:hover{background-color:#fff9}.ol-attribution,.ol-zoom{top:.3125rem;bottom:unset;border-radius:.375rem;padding:0;border:none;background:white}.ol-attribution>button,.ol-zoom>button{padding:0;border:none;background:white}.ol-zoom{top:.3125rem;right:.5rem;left:unset;bottom:unset;border-radius:.375rem;padding:0;border:none;background:white}.ol-zoom>button{padding:0;border:none;background:white}.a-form-field[type=radio]:read-only{pointer-events:auto}.a-tooltip--move[data-tooltip]:not([data-tooltip-position]):after{left:calc(50% + 20px)}.a-tooltip--click[data-tooltip]:not([data-tooltip-position]):after{left:calc(50% + 10px)}.a-tooltip[data-tooltip].--absolute{position:absolute}.a-tooltip[data-tooltip].--nopos{position:unset}.o-map-slider{position:absolute;width:100%;margin-top:-.625rem;z-index:1;-webkit-appearance:none;appearance:none;background:transparent;cursor:grab}.o-map-slider.-hidden{visibility:hidden;pointer-events:none}.o-map-slider::-webkit-slider-runnable-track{background:none}.o-map-slider::-moz-range-track{background:none}.o-map-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background-color:#113b6e;height:125rem;margin-top:-121.875rem;width:.25rem}.o-map-slider::-moz-range-thumb{border:none;border-radius:0;background-color:#113b6e;height:125rem;margin-top:-121.875rem;width:.25rem}\n", ".m-map-layer-action{display:flex;gap:.375rem;z-index:2;right:.5rem}.m-map-layer-action.ol-control{border:none;background-color:transparent}.m-map-layer-action .-hidden{display:none}.m-map-layer-action__toggle{order:2;width:1.875rem;height:1.875rem}.m-map-layer-action button{background-color:#fafafa!important;color:#113b6e}.m-map-layer-action__title{display:flex;flex-direction:row;align-items:center;font-size:12px}.m-map-layer-action__title:hover{cursor:pointer;background-color:#fafafa!important}.m-map-layer-action__container{color:#113b6e;background-color:#fff;border-radius:.125rem;padding:.3125rem .5rem}.m-map-layer-action__container .a-h4{font-size:12px}.m-map-layer-action__container button.m-map-layer-action__toggle{border-radius:50%}.m-map-layer-action__container button.m-map-layer-action__toggle:hover{outline:none}.m-map-layer-action__image{background:white;overflow:scroll}.m-map-layer-action__error{font-style:italic;color:#c74646}.m-layer-legend__title{align-items:flex-start;gap:.3125rem}.m-layer-legend__dropdown-icon{margin-top:.125rem}.m-layer-switcher__title{align-items:flex-start}.m-map-slide-legend{pointer-events:none;position:absolute;z-index:1;background-color:#fff;border-radius:.3125rem;padding:.3125rem}.m-map-slide-legend.-left{left:4.0625rem}.m-map-slide-legend.-right{right:2.9375rem}.m-map-slide-legend__title{font-weight:700}\n"], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PryWidgetMapCssComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pry-widget-map-css', template: '', encapsulation: ViewEncapsulation.None, styles: [":root,:host{--ol-background-color: white;--ol-accent-background-color: #F5F5F5;--ol-subtle-background-color: rgba(128, 128, 128, .25);--ol-partial-background-color: rgba(255, 255, 255, .75);--ol-foreground-color: #333333;--ol-subtle-foreground-color: #666666;--ol-brand-color: #00AAFF}.ol-box{box-sizing:border-box;border-radius:2px;border:1.5px solid var(--ol-background-color);background-color:var(--ol-partial-background-color)}.ol-mouse-position{top:8px;right:8px;position:absolute}.ol-scale-line{background:var(--ol-partial-background-color);border-radius:4px;bottom:8px;left:8px;padding:2px;position:absolute}.ol-scale-line-inner{border:1px solid var(--ol-subtle-foreground-color);border-top:none;color:var(--ol-foreground-color);font-size:10px;text-align:center;margin:1px;will-change:contents,width;transition:all .25s}.ol-scale-bar{position:absolute;bottom:8px;left:8px}.ol-scale-bar-inner{display:flex}.ol-scale-step-marker{width:1px;height:15px;background-color:var(--ol-foreground-color);float:right;z-index:10}.ol-scale-step-text{position:absolute;bottom:-5px;font-size:10px;z-index:11;color:var(--ol-foreground-color);text-shadow:-1.5px 0 var(--ol-partial-background-color),0 1.5px var(--ol-partial-background-color),1.5px 0 var(--ol-partial-background-color),0 -1.5px var(--ol-partial-background-color)}.ol-scale-text{position:absolute;font-size:12px;text-align:center;bottom:25px;color:var(--ol-foreground-color);text-shadow:-1.5px 0 var(--ol-partial-background-color),0 1.5px var(--ol-partial-background-color),1.5px 0 var(--ol-partial-background-color),0 -1.5px var(--ol-partial-background-color)}.ol-scale-singlebar{position:relative;height:10px;z-index:9;box-sizing:border-box;border:1px solid var(--ol-foreground-color)}.ol-scale-singlebar-even{background-color:var(--ol-subtle-foreground-color)}.ol-scale-singlebar-odd{background-color:var(--ol-background-color)}.ol-unsupported{display:none}.ol-viewport,.ol-unselectable{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.ol-viewport canvas{all:unset}.ol-selectable{-webkit-touch-callout:default;-webkit-user-select:text;user-select:text}.ol-grabbing{cursor:grabbing}.ol-grab{cursor:move;cursor:grab}.ol-control{position:absolute;background-color:var(--ol-subtle-background-color);border-radius:4px}.ol-zoom{top:.5em;left:.5em}.ol-rotate{top:.5em;right:.5em;transition:opacity .25s linear,visibility 0s linear}.ol-rotate.ol-hidden{opacity:0;visibility:hidden;transition:opacity .25s linear,visibility 0s linear .25s}.ol-zoom-extent{top:4.643em;left:.5em}.ol-full-screen{right:.5em;top:.5em}.ol-control button{display:block;margin:1px;padding:0;color:var(--ol-subtle-foreground-color);font-weight:700;text-decoration:none;font-size:inherit;text-align:center;height:1.375em;width:1.375em;line-height:.4em;background-color:var(--ol-background-color);border:none;border-radius:2px}.ol-control button::-moz-focus-inner{border:none;padding:0}.ol-zoom-extent button{line-height:1.4em}.ol-compass{display:block;font-weight:400;will-change:transform}.ol-touch .ol-control button{font-size:1.5em}.ol-touch .ol-zoom-extent{top:5.5em}.ol-control button:hover,.ol-control button:focus{text-decoration:none;outline:1px solid var(--ol-subtle-foreground-color);color:var(--ol-foreground-color)}.ol-zoom .ol-zoom-in{border-radius:2px 2px 0 0}.ol-zoom .ol-zoom-out{border-radius:0 0 2px 2px}.ol-attribution{text-align:right;bottom:.5em;right:.5em;max-width:calc(100% - 1.3em);display:flex;flex-flow:row-reverse;align-items:center}.ol-attribution a{color:var(--ol-subtle-foreground-color);text-decoration:none}.ol-attribution ul{margin:0;padding:1px .5em;color:var(--ol-foreground-color);text-shadow:0 0 2px var(--ol-background-color);font-size:12px}.ol-attribution li{display:inline;list-style:none}.ol-attribution li:not(:last-child):after{content:\" \"}.ol-attribution img{max-height:2em;max-width:inherit;vertical-align:middle}.ol-attribution button{flex-shrink:0}.ol-attribution.ol-collapsed ul{display:none}.ol-attribution:not(.ol-collapsed){background:var(--ol-partial-background-color)}.ol-attribution.ol-uncollapsible{bottom:0;right:0;border-radius:4px 0 0}.ol-attribution.ol-uncollapsible img{margin-top:-.2em;max-height:1.6em}.ol-attribution.ol-uncollapsible button{display:none}.ol-zoomslider{top:4.5em;left:.5em;height:200px}.ol-zoomslider button{position:relative;height:10px}.ol-touch .ol-zoomslider{top:5.5em}.ol-overviewmap{left:.5em;bottom:.5em}.ol-overviewmap.ol-uncollapsible{bottom:0;left:0;border-radius:0 4px 0 0}.ol-overviewmap .ol-overviewmap-map,.ol-overviewmap button{display:block}.ol-overviewmap .ol-overviewmap-map{border:1px solid var(--ol-subtle-foreground-color);height:150px;width:150px}.ol-overviewmap:not(.ol-collapsed) button{bottom:0;left:0;position:absolute}.ol-overviewmap.ol-collapsed .ol-overviewmap-map,.ol-overviewmap.ol-uncollapsible button{display:none}.ol-overviewmap:not(.ol-collapsed){background:var(--ol-subtle-background-color)}.ol-overviewmap-box{border:1.5px dotted var(--ol-subtle-foreground-color)}.ol-overviewmap .ol-overviewmap-box:hover{cursor:move}.o-widget--map{display:flex;flex-direction:column}.o-widget--map div.ol-scale-bar{position:absolute;left:initial;right:8px;bottom:8px}.o-map-wrapper{display:flex;width:100%;flex:1 1}.o-map{width:100%;height:100%}#map,.map-frame{height:100%}.layer-switcher{top:5rem;left:.5rem;right:unset;border-width:.0625rem;border-style:solid;border-radius:.4375rem}.layer-switcher button{background-size:30px;background-position:unset;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjMyIiBoZWlnaHQ9IjMyIj48cGF0aCBmaWxsPSJub25lIiBkPSJNMCAwaDI0djI0SDB6Ii8+PHBhdGggZD0iTTIwLjA4MyAxNS4ybDEuMjAyLjcyMWEuNS41IDAgMCAxIDAgLjg1OGwtOC43NyA1LjI2MmExIDEgMCAwIDEtMS4wMyAwbC04Ljc3LTUuMjYyYS41LjUgMCAwIDEgMC0uODU4bDEuMjAyLS43MjFMMTIgMjAuMDVsOC4wODMtNC44NXptMC00LjdsMS4yMDIuNzIxYS41LjUgMCAwIDEgMCAuODU4TDEyIDE3LjY1bC05LjI4NS01LjU3MWEuNS41IDAgMCAxIDAtLjg1OGwxLjIwMi0uNzIxTDEyIDE1LjM1bDguMDgzLTQuODV6bS03LjU2OS05LjE5MWw4Ljc3MSA1LjI2MmEuNS41IDAgMCAxIDAgLjg1OEwxMiAxMyAyLjcxNSA3LjQyOWEuNS41IDAgMCAxIDAtLjg1OGw4Ljc3LTUuMjYyYTEgMSAwIDAgMSAxLjAzIDB6TTEyIDMuMzMyTDUuODg3IDcgMTIgMTAuNjY4IDE4LjExMyA3IDEyIDMuMzMyeiIvPjwvc3ZnPg==)}.layer-switcher.shown.ol-control:hover{background-color:#fff9}.ol-attribution,.ol-zoom{top:.3125rem;bottom:unset;border-radius:.375rem;padding:0;border:none;background:white}.ol-attribution>button,.ol-zoom>button{padding:0;border:none;background:white}.ol-zoom{top:.3125rem;right:.5rem;left:unset;bottom:unset;border-radius:.375rem;padding:0;border:none;background:white}.ol-zoom>button{padding:0;border:none;background:white}.a-form-field[type=radio]:read-only{pointer-events:auto}.a-tooltip--move[data-tooltip]:not([data-tooltip-position]):after{left:calc(50% + 20px)}.a-tooltip--click[data-tooltip]:not([data-tooltip-position]):after{left:calc(50% + 10px)}.a-tooltip[data-tooltip].--absolute{position:absolute}.a-tooltip[data-tooltip].--nopos{position:unset}.o-map-slider{position:absolute;width:100%;margin-top:-.625rem;z-index:1;-webkit-appearance:none;appearance:none;background:transparent;cursor:grab}.o-map-slider.-hidden{visibility:hidden;pointer-events:none}.o-map-slider::-webkit-slider-runnable-track{background:none}.o-map-slider::-moz-range-track{background:none}.o-map-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background-color:#113b6e;height:125rem;margin-top:-121.875rem;width:.25rem}.o-map-slider::-moz-range-thumb{border:none;border-radius:0;background-color:#113b6e;height:125rem;margin-top:-121.875rem;width:.25rem}\n", ".m-layer-legend{z-index:2;right:.5rem}.m-layer-legend.ol-control{display:flex;flex-direction:column;align-items:flex-start;border:none;background:white}.m-layer-legend button{background-color:#fafafa!important;color:#000}.m-layer-legend .-hidden{display:none}.m-layer-legend__toggle{align-self:flex-end;width:1.875rem;height:1.875rem}.m-layer-legend__title{display:flex;flex-direction:row;align-items:center;background-color:#fff;justify-content:space-between}.m-layer-legend__image{background:white;overflow:scroll}.m-layer-legend__error{font-style:italic;color:#c74646}.m-layer-switcher{z-index:2;right:.5rem;display:flex;flex-direction:column;align-items:normal}.m-layer-switcher.ol-control{border:none;background:white;align-self:flex-end}.m-layer-switcher button{background-color:#fafafa!important;color:#000}.m-layer-switcher .-hidden{display:none}.m-layer-switcher__toggle{width:1.875rem;height:1.875rem;align-self:flex-end}.m-layer-switcher__title{display:flex;flex-direction:row;background-color:#fff;justify-content:space-between;gap:.625rem;padding:5px}.m-layer-switcher__image{background:white;overflow:scroll}.m-layer-switcher__error{font-style:italic;color:#c74646}.m-map-slide-legend{pointer-events:none;position:absolute;z-index:1;background-color:#fff;border-radius:.3125rem;padding:.3125rem}.m-map-slide-legend.-left{left:4.0625rem}.m-map-slide-legend.-right{right:2.9375rem}.m-map-slide-legend__title{font-weight:700}\n"] }]
+            args: [{ selector: 'pry-widget-map-css', template: '', encapsulation: ViewEncapsulation.None, styles: [":root,:host{--ol-background-color: white;--ol-accent-background-color: #F5F5F5;--ol-subtle-background-color: rgba(128, 128, 128, .25);--ol-partial-background-color: rgba(255, 255, 255, .75);--ol-foreground-color: #333333;--ol-subtle-foreground-color: #666666;--ol-brand-color: #00AAFF}.ol-box{box-sizing:border-box;border-radius:2px;border:1.5px solid var(--ol-background-color);background-color:var(--ol-partial-background-color)}.ol-mouse-position{top:8px;right:8px;position:absolute}.ol-scale-line{background:var(--ol-partial-background-color);border-radius:4px;bottom:8px;left:8px;padding:2px;position:absolute}.ol-scale-line-inner{border:1px solid var(--ol-subtle-foreground-color);border-top:none;color:var(--ol-foreground-color);font-size:10px;text-align:center;margin:1px;will-change:contents,width;transition:all .25s}.ol-scale-bar{position:absolute;bottom:8px;left:8px}.ol-scale-bar-inner{display:flex}.ol-scale-step-marker{width:1px;height:15px;background-color:var(--ol-foreground-color);float:right;z-index:10}.ol-scale-step-text{position:absolute;bottom:-5px;font-size:10px;z-index:11;color:var(--ol-foreground-color);text-shadow:-1.5px 0 var(--ol-partial-background-color),0 1.5px var(--ol-partial-background-color),1.5px 0 var(--ol-partial-background-color),0 -1.5px var(--ol-partial-background-color)}.ol-scale-text{position:absolute;font-size:12px;text-align:center;bottom:25px;color:var(--ol-foreground-color);text-shadow:-1.5px 0 var(--ol-partial-background-color),0 1.5px var(--ol-partial-background-color),1.5px 0 var(--ol-partial-background-color),0 -1.5px var(--ol-partial-background-color)}.ol-scale-singlebar{position:relative;height:10px;z-index:9;box-sizing:border-box;border:1px solid var(--ol-foreground-color)}.ol-scale-singlebar-even{background-color:var(--ol-subtle-foreground-color)}.ol-scale-singlebar-odd{background-color:var(--ol-background-color)}.ol-unsupported{display:none}.ol-viewport,.ol-unselectable{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.ol-viewport canvas{all:unset}.ol-selectable{-webkit-touch-callout:default;-webkit-user-select:text;user-select:text}.ol-grabbing{cursor:grabbing}.ol-grab{cursor:move;cursor:grab}.ol-control{position:absolute;background-color:var(--ol-subtle-background-color);border-radius:4px}.ol-zoom{top:.5em;left:.5em}.ol-rotate{top:.5em;right:.5em;transition:opacity .25s linear,visibility 0s linear}.ol-rotate.ol-hidden{opacity:0;visibility:hidden;transition:opacity .25s linear,visibility 0s linear .25s}.ol-zoom-extent{top:4.643em;left:.5em}.ol-full-screen{right:.5em;top:.5em}.ol-control button{display:block;margin:1px;padding:0;color:var(--ol-subtle-foreground-color);font-weight:700;text-decoration:none;font-size:inherit;text-align:center;height:1.375em;width:1.375em;line-height:.4em;background-color:var(--ol-background-color);border:none;border-radius:2px}.ol-control button::-moz-focus-inner{border:none;padding:0}.ol-zoom-extent button{line-height:1.4em}.ol-compass{display:block;font-weight:400;will-change:transform}.ol-touch .ol-control button{font-size:1.5em}.ol-touch .ol-zoom-extent{top:5.5em}.ol-control button:hover,.ol-control button:focus{text-decoration:none;outline:1px solid var(--ol-subtle-foreground-color);color:var(--ol-foreground-color)}.ol-zoom .ol-zoom-in{border-radius:2px 2px 0 0}.ol-zoom .ol-zoom-out{border-radius:0 0 2px 2px}.ol-attribution{text-align:right;bottom:.5em;right:.5em;max-width:calc(100% - 1.3em);display:flex;flex-flow:row-reverse;align-items:center}.ol-attribution a{color:var(--ol-subtle-foreground-color);text-decoration:none}.ol-attribution ul{margin:0;padding:1px .5em;color:var(--ol-foreground-color);text-shadow:0 0 2px var(--ol-background-color);font-size:12px}.ol-attribution li{display:inline;list-style:none}.ol-attribution li:not(:last-child):after{content:\" \"}.ol-attribution img{max-height:2em;max-width:inherit;vertical-align:middle}.ol-attribution button{flex-shrink:0}.ol-attribution.ol-collapsed ul{display:none}.ol-attribution:not(.ol-collapsed){background:var(--ol-partial-background-color)}.ol-attribution.ol-uncollapsible{bottom:0;right:0;border-radius:4px 0 0}.ol-attribution.ol-uncollapsible img{margin-top:-.2em;max-height:1.6em}.ol-attribution.ol-uncollapsible button{display:none}.ol-zoomslider{top:4.5em;left:.5em;height:200px}.ol-zoomslider button{position:relative;height:10px}.ol-touch .ol-zoomslider{top:5.5em}.ol-overviewmap{left:.5em;bottom:.5em}.ol-overviewmap.ol-uncollapsible{bottom:0;left:0;border-radius:0 4px 0 0}.ol-overviewmap .ol-overviewmap-map,.ol-overviewmap button{display:block}.ol-overviewmap .ol-overviewmap-map{border:1px solid var(--ol-subtle-foreground-color);height:150px;width:150px}.ol-overviewmap:not(.ol-collapsed) button{bottom:0;left:0;position:absolute}.ol-overviewmap.ol-collapsed .ol-overviewmap-map,.ol-overviewmap.ol-uncollapsible button{display:none}.ol-overviewmap:not(.ol-collapsed){background:var(--ol-subtle-background-color)}.ol-overviewmap-box{border:1.5px dotted var(--ol-subtle-foreground-color)}.ol-overviewmap .ol-overviewmap-box:hover{cursor:move}.o-widget--map{display:flex;flex-direction:column}.o-widget--map div.ol-scale-bar{position:absolute;left:initial;right:8px;bottom:8px}.o-map-wrapper{display:flex;width:100%;flex:1 1}.o-map{width:100%;height:100%}#map,.map-frame{height:100%}.layer-switcher{top:5rem;left:.5rem;right:unset;border-width:.0625rem;border-style:solid;border-radius:.4375rem}.layer-switcher button{background-size:30px;background-position:unset;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjMyIiBoZWlnaHQ9IjMyIj48cGF0aCBmaWxsPSJub25lIiBkPSJNMCAwaDI0djI0SDB6Ii8+PHBhdGggZD0iTTIwLjA4MyAxNS4ybDEuMjAyLjcyMWEuNS41IDAgMCAxIDAgLjg1OGwtOC43NyA1LjI2MmExIDEgMCAwIDEtMS4wMyAwbC04Ljc3LTUuMjYyYS41LjUgMCAwIDEgMC0uODU4bDEuMjAyLS43MjFMMTIgMjAuMDVsOC4wODMtNC44NXptMC00LjdsMS4yMDIuNzIxYS41LjUgMCAwIDEgMCAuODU4TDEyIDE3LjY1bC05LjI4NS01LjU3MWEuNS41IDAgMCAxIDAtLjg1OGwxLjIwMi0uNzIxTDEyIDE1LjM1bDguMDgzLTQuODV6bS03LjU2OS05LjE5MWw4Ljc3MSA1LjI2MmEuNS41IDAgMCAxIDAgLjg1OEwxMiAxMyAyLjcxNSA3LjQyOWEuNS41IDAgMCAxIDAtLjg1OGw4Ljc3LTUuMjYyYTEgMSAwIDAgMSAxLjAzIDB6TTEyIDMuMzMyTDUuODg3IDcgMTIgMTAuNjY4IDE4LjExMyA3IDEyIDMuMzMyeiIvPjwvc3ZnPg==)}.layer-switcher.shown.ol-control:hover{background-color:#fff9}.ol-attribution,.ol-zoom{top:.3125rem;bottom:unset;border-radius:.375rem;padding:0;border:none;background:white}.ol-attribution>button,.ol-zoom>button{padding:0;border:none;background:white}.ol-zoom{top:.3125rem;right:.5rem;left:unset;bottom:unset;border-radius:.375rem;padding:0;border:none;background:white}.ol-zoom>button{padding:0;border:none;background:white}.a-form-field[type=radio]:read-only{pointer-events:auto}.a-tooltip--move[data-tooltip]:not([data-tooltip-position]):after{left:calc(50% + 20px)}.a-tooltip--click[data-tooltip]:not([data-tooltip-position]):after{left:calc(50% + 10px)}.a-tooltip[data-tooltip].--absolute{position:absolute}.a-tooltip[data-tooltip].--nopos{position:unset}.o-map-slider{position:absolute;width:100%;margin-top:-.625rem;z-index:1;-webkit-appearance:none;appearance:none;background:transparent;cursor:grab}.o-map-slider.-hidden{visibility:hidden;pointer-events:none}.o-map-slider::-webkit-slider-runnable-track{background:none}.o-map-slider::-moz-range-track{background:none}.o-map-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background-color:#113b6e;height:125rem;margin-top:-121.875rem;width:.25rem}.o-map-slider::-moz-range-thumb{border:none;border-radius:0;background-color:#113b6e;height:125rem;margin-top:-121.875rem;width:.25rem}\n", ".m-map-layer-action{display:flex;gap:.375rem;z-index:2;right:.5rem}.m-map-layer-action.ol-control{border:none;background-color:transparent}.m-map-layer-action .-hidden{display:none}.m-map-layer-action__toggle{order:2;width:1.875rem;height:1.875rem}.m-map-layer-action button{background-color:#fafafa!important;color:#113b6e}.m-map-layer-action__title{display:flex;flex-direction:row;align-items:center;font-size:12px}.m-map-layer-action__title:hover{cursor:pointer;background-color:#fafafa!important}.m-map-layer-action__container{color:#113b6e;background-color:#fff;border-radius:.125rem;padding:.3125rem .5rem}.m-map-layer-action__container .a-h4{font-size:12px}.m-map-layer-action__container button.m-map-layer-action__toggle{border-radius:50%}.m-map-layer-action__container button.m-map-layer-action__toggle:hover{outline:none}.m-map-layer-action__image{background:white;overflow:scroll}.m-map-layer-action__error{font-style:italic;color:#c74646}.m-layer-legend__title{align-items:flex-start;gap:.3125rem}.m-layer-legend__dropdown-icon{margin-top:.125rem}.m-layer-switcher__title{align-items:flex-start}.m-map-slide-legend{pointer-events:none;position:absolute;z-index:1;background-color:#fff;border-radius:.3125rem;padding:.3125rem}.m-map-slide-legend.-left{left:4.0625rem}.m-map-slide-legend.-right{right:2.9375rem}.m-map-slide-legend__title{font-weight:700}\n"] }]
         }] });
 
 class GeometryFieldsForPipe {
@@ -1320,6 +1329,7 @@ class WidgetMapComponent extends DataWidgetComponent {
         this.attributions = new Attribution();
         this.actionMenuOpen$ = new BehaviorSubject(false);
         this.olZoomElement$ = new BehaviorSubject(null);
+        this.previousLayers = [];
         this.getOlZoomElement();
         this.slides = [
             { id: 'all', label: this.translateService.instant('@pry.widget.map.slide.all') },
@@ -1540,7 +1550,7 @@ class WidgetMapComponent extends DataWidgetComponent {
         }));
         this.height$ = combineLatest([this.widgetSize$.pipe(debounceTime(100)), this.displayHeader$]).pipe(map(([size, display]) => (size.height ?? 100) - (display ? WIDGET_HEADER_HEIGHT : 0)), delay(10));
         this.attributions$ = this.options$.pipe(map((options) => !!options.attributions));
-        this.legendTop$ = combineLatest([this.displayHeader$, this.attributions$]).pipe(map(([header, attr]) => 5 + (header ? 0 : WIDGET_HEADER_HEIGHT) + (attr ? 41 : 0) + 30));
+        this.legendTop$ = combineLatest([this.displayHeader$, this.attributions$]).pipe(map(([header, attr]) => 5 + (header ? WIDGET_HEADER_HEIGHT : 0) + (attr ? 41 : 0)));
         this.legendHeight$ = combineLatest([this.widgetSize$.pipe(debounceTime(100)), this.legendTop$]).pipe(map(([size, top]) => {
             return (size.height ?? 100) - WIDGET_HEADER_HEIGHT - top - 56; // 56px is the tooltip height + margin
         }), delay(10));
@@ -1551,7 +1561,7 @@ class WidgetMapComponent extends DataWidgetComponent {
                 .reduce((p, c) => ({ ...p, [c.url]: c }), {})
             : {}), startWith({}))
             .subscribe((possibleStyles) => (this.possibleStyles = possibleStyles)));
-        this.hasSlideLayer$ = this.options$.pipe(map((options) => (options.layers ?? []).map((layer) => !!layer.slide).reduce((a, b) => a || b, false)));
+        this.hasSlideLayer$ = this.options$.pipe(map((options) => (options.layers ?? []).map((layer) => !!layer.slide && layer.slide !== 'all').reduce((a, b) => a || b, false)));
     }
     initInteractionManager() {
         return this.interactionManager.init(this);
@@ -1584,15 +1594,15 @@ class WidgetMapComponent extends DataWidgetComponent {
                 }) */
             ];
         }));
-        this.options$
+        this.subscriptions.add(this.options$
             .pipe(map((options) => ({
             center: fromLonLat(options.center ?? WidgetMapUtils.DEFAULT_MAP_CENTER),
             maxZoom: options.zoom?.max ?? WidgetMapUtils.DEFAULT_ZOOM_MAX,
             minZoom: options.zoom?.min ?? WidgetMapUtils.DEFAULT_ZOOM_MIN,
             zoom: options.zoom?.start ?? WidgetMapUtils.DEFAULT_ZOOM_START
         })), distinctUntilChanged())
-            .subscribe((view) => this.map.setView(new View(view)));
-        this.options$
+            .subscribe((view) => this.map.setView(new View(view))));
+        this.subscriptions.add(this.options$
             .pipe(map((options) => options.attributions), distinctUntilChanged())
             .subscribe((attributions) => {
             if (!attributions) {
@@ -1601,15 +1611,16 @@ class WidgetMapComponent extends DataWidgetComponent {
             else {
                 this.map.addControl(this.attributions);
             }
-        });
+        }));
         this.layers$ = combineLatest([
             this.resultSet$,
             this.options$,
             this.classes$,
             this.additionalLayers$,
             this.itemStyles$,
-            this.datasourceFilters$
-        ]).pipe(filter(([resultSet, options, classes, additionalLayers, itemStyles, filters]) => !!resultSet && !!options && !!classes), map(([resultSet, options, classes, additionalLayers, itemStyles, filters]) => {
+            this.datasourceFilters$,
+            this.fields$
+        ]).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(
@@ -1656,7 +1667,7 @@ class WidgetMapComponent extends DataWidgetComponent {
                     }
                     resultLayer.set('title', layer.title);
                     if (layer.type === 'geoserver') {
-                        const cql_filter = CqlUtils.getCQLParamsFor(layer.datasourceId, filters, classes);
+                        const cql_filter = CqlUtils.getCQLParamsFor(layer.datasourceId, filters, classes, fields);
                         if (cql_filter) {
                             // Adding CQL query to geoserver layers
                             resultLayer.getSource().updateParams({ cql_filter });
@@ -1699,6 +1710,7 @@ class WidgetMapComponent extends DataWidgetComponent {
             /* Resolve bug drawing webgllayer without nothing underneath: add empty layer below */
             const _layers = this.addEmptyWebGlLayerBelowSlideHeatmaps(layers);
             _layers.forEach((layer, index, arr) => layer.set('zIndex', arr.length - index));
+            this.previousLayers.push(..._layers);
             return _layers;
         }));
         this.fitExtents$ = combineLatest([
@@ -1734,10 +1746,14 @@ class WidgetMapComponent extends DataWidgetComponent {
             ])
             : of([])), startWith([]));
         this.legendLayers$ = this.options$.pipe(map((options) => (options.layers ?? []).filter((layer) => ['geoserver', 'wms'].includes(layer.type))), delay(10));
-        this.layersTop$ = combineLatest([this.legendTop$, this.legendLayers$]).pipe(map(([legendTop, layers]) => legendTop + ((layers.length ?? 0) > 0 ? 38 : 0)));
-        this.subscriptions.add(combineLatest([this.layersTop$, this.olZoomElement$]).subscribe(([layersTop, zoomElement]) => {
+        this.layersTop$ = combineLatest([this.legendTop$, this.legendLayers$]).pipe(map(([legendTop, layers]) => legendTop + ((layers.length ?? 0) > 0 ? 35 : 0)));
+        this.subscriptions.add(combineLatest([this.layersTop$, this.legendLayers$, this.olZoomElement$, this.displayHeader$])
+            .pipe(withLatestFrom(this.layers$))
+            .subscribe(([[layersTop, legend, zoomElement, displayHeader], layers]) => {
             if (zoomElement) {
-                zoomElement.style.top = `${layersTop + 5}px`;
+                zoomElement.style.top = `${layersTop +
+                    ((legend.length ?? 0) > 0 || layers.length > 0 ? 5 : 0) +
+                    (!displayHeader ? WIDGET_HEADER_HEIGHT : 0)}px`;
             }
         }));
         this.subscriptions.add(combineLatest([
@@ -1869,8 +1885,12 @@ class WidgetMapComponent extends DataWidgetComponent {
     generateTooltip(value) {
         return new Promise((resolve) => {
             const component$ = this.tooltipFactoryService.generateTooltip(value.oClass, this.injector, this.popupContent);
-            component$.subscribe((component) => {
+            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);
@@ -2206,6 +2226,16 @@ class WidgetMapComponent extends DataWidgetComponent {
     ngOnDestroy() {
         super.ngOnDestroy();
         this.store.dispatch(DashboardActions.resetWmsFeatures());
+        // Trying to release objects
+        this.clearLayers(this.map.getLayers().getArray());
+        this.clearLayers(this.previousLayers);
+        this.map.getRenderer().dispose();
+        // @ts-ignore
+        delete this.map;
+        // @ts-ignore
+        this.map = null;
+        this.previousTooltipSub?.unsubscribe();
+        this.previousTooltip?.destroy();
     }
     getStyle(_layer) {
         const layer = _layer;
@@ -2244,6 +2274,9 @@ class WidgetMapComponent extends DataWidgetComponent {
     }
     changeSlideOption($event) {
         this.optionsCopy.slide = $event;
+        if ($event === false) {
+            this.optionsCopy.layers?.forEach((layer) => (layer.slide = 'all'));
+        }
     }
     toggleMenu() {
         this.actionMenuOpen$.next(!this.actionMenuOpen$.getValue());
@@ -2274,12 +2307,26 @@ class WidgetMapComponent extends DataWidgetComponent {
         this.interactionManager.selectionInteraction.changeSelection(action);
         this.toggleMenu();
     }
+    clearLayers(layers) {
+        layers.forEach((layer) => {
+            this.map.removeLayer(layer);
+            if (layer instanceof VectorLayer && layer.getSource()) {
+                layer.getSource().clear();
+                layer.setSource(undefined);
+            }
+            if (layer instanceof TileLayer && layer.getSource()) {
+                layer.getSource().clear();
+                layer.setSource(undefined);
+            }
+            layer.dispose();
+        });
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", 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: "14.0.0", version: "16.2.12", 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)=\"changeSingleLayer($event)\" [ngModel]=\"optionsCopy.singleLayer ?? false\">\n        {{ '@pry.widget.map.singleLayer' | i18n }}\n      </pry-checkbox>\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]=\"optionsCopy.slide ?? false\">\n        {{ '@pry.widget.map.slide.global' | i18n }}\n      </pry-checkbox>\n\n      <div class=\"o-settings__popup__content__actions -has-separator\">\n        <button type=\"button\" (click)=\"addLayer()\" class=\"a-btn a-btn--icon-text -link-like\">\n          <pry-icon iconSvg=\"library_add\"></pry-icon>\n          {{ '@pry.widget.map.addLayer' | i18n }}\n        </button>\n      </div>\n\n      <div *ngFor=\"let layer of optionsCopy?.layers; let i = index\" class=\"o-settings__popup__content__fields\">\n        <div class=\"o-settings__popup__content__fields__head\">\n          <h3 class=\"a-h3 settings-layer-title__title\">{{ '@pry.widget.map.layer' | i18n : { index: i + 1 } }}</h3>\n          <div class=\"m-btn-group\">\n            <button type=\"button\" class=\"a-btn a-btn--icon-only\" (click)=\"invertLayers(i, i - 1)\" *ngIf=\"i > 0\">\n              <pry-icon iconSvg=\"fleche_haut\"></pry-icon>\n              <span class=\"u-visually-hidden\">{{ '@pry.action.moveUp' | i18n }}</span>\n            </button>\n            <button\n              type=\"button\"\n              class=\"a-btn a-btn--icon-only\"\n              (click)=\"invertLayers(i, i + 1)\"\n              *ngIf=\"i < (optionsCopy?.layers?.length ?? 0) - 1\"\n            >\n              <pry-icon iconSvg=\"fleche_bas\"></pry-icon>\n              <span class=\"u-visually-hidden\">{{ '@pry.action.moveDown' | i18n }}</span>\n            </button>\n          </div>\n        </div>\n\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\">{{ '@pry.widget.map.layerOptions' | i18n : { index: i + 1 } }}</legend>\n            <div class=\"m-form-label-field\">\n              <label class=\"a-label\" for=\"map_layerTitle\">{{ '@pry.widget.map.layerTitle' | i18n }}</label>\n              <input\n                id=\"map_layerTitle\"\n                class=\"a-form-field\"\n                type=\"text\"\n                (input)=\"changeTitle($event, layer)\"\n                [value]=\"layer.title ?? ''\"\n              />\n            </div>\n\n            <div class=\"m-form-label-field\" *ngIf=\"!['geoserver', 'auto'].includes(layer.type)\">\n              <label class=\"a-label\" for=\"map_layerType\">{{ '@pry.widget.map.layerType.title' | i18n }}</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\">{{ '@pry.widget.map.layerStyle' | i18n }}</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            <pry-checkbox (ngModelChange)=\"changeFit($event, layer)\" [ngModel]=\"layer.fit\">\n              {{ '@pry.widget.map.fit' | i18n }}\n            </pry-checkbox>\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                ['heatmap', 'bubble', 'marker', 'point', 'line', 'polygon', 'multi-line', 'multi-polygon'].indexOf(\n                  layer.type\n                ) >= 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\">{{ '@pry.widget.map.wms.paramLayer' | i18n }}</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\">{{ '@pry.widget.map.wms.matrixSet' | i18n }}</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 (ngModelChange)=\"changeParamTiled($event, layer)\" [ngModel]=\"layer?.paramTiled ?? false\">\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\n        <button\n          type=\"button\"\n          (click)=\"deleteLayer(i, layer)\"\n          class=\"a-btn a-btn--icon-text -link-like\"\n          *ngIf=\"layer.type !== 'geoserver'\"\n          data-func=\"delete\"\n        >\n          <pry-icon iconSvg=\"delete\" [width]=\"19\" [height]=\"19\"></pry-icon>\n          <span>{{ '@pry.widget.map.deleteLayer' | i18n }}</span>\n        </button>\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          [class.-selected]=\"(interactionManager.selectionInteraction.selectionType$ | async) === 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  <div\n    class=\"ol-control m-layer-switcher\"\n    *ngIf=\"((layers$ | async)?.length ?? 0) > 0\"\n    [style.top.px]=\"layersTop$ | async\"\n  >\n    <button\n      class=\"m-layer-switcher__toggle a-tooltip\"\n      (click)=\"toggleLayersWindow()\"\n      [attr.data-tooltip]=\"'@pry.widget.map.selectLayers' | i18n\"\n      data-tooltip-position=\"left\"\n    >\n      <pry-icon iconSvg=\"layers\" [width]=\"22\" [height]=\"22\"></pry-icon>\n    </button>\n    <ng-container *ngFor=\"let layer of mapLayers; let index = index\">\n      <div class=\"m-layer-switcher__title\" [class.-hidden]=\"!layersTabOpen\">\n        {{ layer.get('title') }}\n        <ng-container *ngIf=\"!(options$ | async)?.singleLayer; else singleLayer\">\n          <pry-checkbox [ngModel]=\"layer.getVisible()\" (change)=\"changeVisibility(layer)\"></pry-checkbox>\n        </ng-container>\n        <ng-template #singleLayer>\n          <input\n            type=\"radio\"\n            name=\"layer\"\n            [id]=\"'radio-layer-' + layer.get('title').split(' ')[0]\"\n            [ngModel]=\"layerVisibleIdx\"\n            [value]=\"index\"\n            (change)=\"changeVisibility(layer)\"\n          />\n        </ng-template>\n      </div>\n    </ng-container>\n  </div>\n\n  <div\n    class=\"ol-control m-layer-legend\"\n    *ngIf=\"((legendLayers$ | async)?.length ?? 0) > 0\"\n    [style.top.px]=\"legendTop$ | async\"\n  >\n    <button\n      class=\"m-layer-legend__toggle a-tooltip\"\n      (click)=\"toggleLegendWindow()\"\n      [attr.data-tooltip]=\"'@pry.widget.map.legends' | i18n\"\n      data-tooltip-position=\"left\"\n    >\n      <pry-icon iconSvg=\"legend\" [width]=\"22\" [height]=\"22\"></pry-icon>\n    </button>\n    <ng-container *ngFor=\"let geoLayer of legendLayers$ | async; let index = index\">\n      <div class=\"m-layer-legend__title\" [class.-hidden]=\"!legendTabOpen\">\n        {{ geoLayer.title }}\n        <ng-container *ngIf=\"isLayerRendered(geoLayer)\">\n          <button class=\"m-layer-legend__toggle\" (click)=\"toggleLegend(index)\">\n            <pry-icon\n              [iconSvg]=\"legendTab === index ? 'chevron_top' : 'chevron_bottom'\"\n              [width]=\"22\"\n              [height]=\"22\"\n            ></pry-icon>\n          </button>\n        </ng-container>\n        <ng-container *ngIf=\"!isLayerRendered(geoLayer)\">\n          <pry-icon [iconSvg]=\"'close'\" [width]=\"22\" [height]=\"22\"></pry-icon>\n        </ng-container>\n      </div>\n      <div\n        class=\"m-layer-legend__image\"\n        [class.-hidden]=\"!legendTabOpen || legendTab !== index || !isLayerRendered(geoLayer)\"\n        [style.max-height.px]=\"legendHeight$ | async\"\n      >\n        <ng-container *ngIf=\"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        </ng-container>\n        <ng-container *ngIf=\"!(geoLayer | legendUrl : { capabilities: (wmsCapabilities$ | async) })\">\n          <p class=\"m-layer-legend__error\">{{ '@pry.widget.map.legendNotProvided' | i18n }}</p>\n        </ng-container>\n      </div>\n    </ng-container>\n  </div>\n\n  <div class=\"m-map-slide-legend -left\" *ngIf=\"leftSlideLayers.length > 0\" [style.top.px]=\"legendTop$ | async\">\n    <span class=\"m-map-slide-legend__title\">{{ '@pry.widget.map.slideTitle' | i18n }}:</span>\n    <div *ngFor=\"let layer of leftSlideLayers\">\n      {{ layer.get('title') }}\n    </div>\n  </div>\n\n  <div class=\"m-map-slide-legend -right\" *ngIf=\"rightSlideLayers.length > 0\" [style.top.px]=\"legendTop$ | async\">\n    <span class=\"m-map-slide-legend__title\">{{ '@pry.widget.map.slideTitle' | i18n }}:</span>\n    <div *ngFor=\"let layer of rightSlideLayers\">\n      {{ layer.get('title') }}\n    </div>\n  </div>\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>{{ this.tooltipIndex + 1 }} / {{ this.tooltipNumber }}</p>\n      <button class=\"a-btn a-btn--primary a-btn--icon-only\" (click)=\"tooltipMove(-1)\" [disabled]=\"!tooltipCanMove(-1)\">\n        <pry-icon iconSvg=\"arrow_back\"></pry-icon>\n      </button>\n      <button class=\"a-btn a-btn--primary a-btn--icon-only\" (click)=\"tooltipMove(1)\" [disabled]=\"!tooltipCanMove(1)\">\n        <pry-icon iconSvg=\"arrow_right\"></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", "readonly", "autocomplete", "bindValue", "bindLabel", "iconSize", "bindIcon", "template", "i18nPrefix", "loading", "elementRef"], outputs: ["searched", "cleared"] }, { 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"] }, { kind: "component", type: i2.PryRangeComponent, selector: "pry-range", inputs: ["min", "max", "step", "disabled", "labelTranslate"] }, { 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: "14.0.0", version: "16.2.12", 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)=\"changeSingleLayer($event)\" [ngModel]=\"optionsCopy.singleLayer ?? false\">\n        {{ '@pry.widget.map.singleLayer' | i18n }}\n      </pry-checkbox>\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-settings__popup__content__actions -has-separator\">\n        <button type=\"button\" (click)=\"addLayer()\" class=\"a-btn a-btn--icon-text -link-like\">\n          <pry-icon iconSvg=\"library_add\"></pry-icon>\n          {{ '@pry.widget.map.addLayer' | i18n }}\n        </button>\n      </div>\n\n      <div *ngFor=\"let layer of optionsCopy?.layers; let i = index\" class=\"o-settings__popup__content__fields\">\n        <div class=\"o-settings__popup__content__fields__head\">\n          <h3 class=\"a-h3 settings-layer-title__title\">{{ '@pry.widget.map.layer' | i18n : { index: i + 1 } }}</h3>\n          <div class=\"m-btn-group\">\n            <button type=\"button\" class=\"a-btn a-btn--icon-only\" (click)=\"invertLayers(i, i - 1)\" *ngIf=\"i > 0\">\n              <pry-icon iconSvg=\"fleche_haut\"></pry-icon>\n              <span class=\"u-visually-hidden\">{{ '@pry.action.moveUp' | i18n }}</span>\n            </button>\n            <button\n              type=\"button\"\n              class=\"a-btn a-btn--icon-only\"\n              (click)=\"invertLayers(i, i + 1)\"\n              *ngIf=\"i < (optionsCopy?.layers?.length ?? 0) - 1\"\n            >\n              <pry-icon iconSvg=\"fleche_bas\"></pry-icon>\n              <span class=\"u-visually-hidden\">{{ '@pry.action.moveDown' | i18n }}</span>\n            </button>\n          </div>\n        </div>\n\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\">{{ '@pry.widget.map.layerOptions' | i18n : { index: i + 1 } }}</legend>\n            <div class=\"m-form-label-field\">\n              <label class=\"a-label\" for=\"map_layerTitle\">{{ '@pry.widget.map.layerTitle' | i18n }}</label>\n              <input\n                id=\"map_layerTitle\"\n                class=\"a-form-field\"\n                type=\"text\"\n                (input)=\"changeTitle($event, layer)\"\n                [value]=\"layer.title ?? ''\"\n              />\n            </div>\n\n            <div class=\"m-form-label-field\" *ngIf=\"!['geoserver', 'auto'].includes(layer.type)\">\n              <label class=\"a-label\" for=\"map_layerType\">{{ '@pry.widget.map.layerType.title' | i18n }}</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\">{{ '@pry.widget.map.layerStyle' | i18n }}</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            <pry-checkbox (ngModelChange)=\"changeFit($event, layer)\" [ngModel]=\"layer.fit\">\n              {{ '@pry.widget.map.fit' | i18n }}\n            </pry-checkbox>\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                ['heatmap', 'bubble', 'marker', 'point', 'line', 'polygon', 'multi-line', 'multi-polygon'].indexOf(\n                  layer.type\n                ) >= 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\">{{ '@pry.widget.map.wms.paramLayer' | i18n }}</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\">{{ '@pry.widget.map.wms.matrixSet' | i18n }}</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 (ngModelChange)=\"changeParamTiled($event, layer)\" [ngModel]=\"layer?.paramTiled ?? false\">\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\n        <button\n          type=\"button\"\n          (click)=\"deleteLayer(i, layer)\"\n          class=\"a-btn a-btn--icon-text -link-like\"\n          *ngIf=\"layer.type !== 'geoserver'\"\n          data-func=\"delete\"\n        >\n          <pry-icon iconSvg=\"delete\" [width]=\"19\" [height]=\"19\"></pry-icon>\n          <span>{{ '@pry.widget.map.deleteLayer' | i18n }}</span>\n        </button>\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          [class.-selected]=\"(interactionManager.selectionInteraction.selectionType$ | async) === 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  <div\n    class=\"ol-control m-layer-switcher m-map-layer-action\"\n    *ngIf=\"((layers$ | async)?.length ?? 0) > 0\"\n    [style.top.px]=\"layersTop$ | async\"\n  >\n    <button\n      class=\"m-map-layer-action__toggle\"\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 class=\"m-map-layer-action__container\" [class.-hidden]=\"!layersTabOpen\">\n      <span class=\"a-h4\">{{ '@pry.widget.map.layersTitle' | i18n }}</span>\n      <ng-container *ngFor=\"let layer of mapLayers; let index = index\">\n        <div class=\"m-map-layer-action__title m-layer-switcher__title\" [class.-hidden]=\"!layersTabOpen\">\n          <pry-checkbox\n            *ngIf=\"!(options$ | async)?.singleLayer; else singleLayer\"\n            [ngModel]=\"layer.getVisible()\"\n            (change)=\"changeVisibility(layer)\"\n          ></pry-checkbox>\n          <ng-template #singleLayer>\n            <input\n              type=\"radio\"\n              name=\"layer\"\n              [id]=\"'radio-layer-' + layer.get('title').split(' ')[0]\"\n              [ngModel]=\"layerVisibleIdx\"\n              [value]=\"index\"\n              (change)=\"changeVisibility(layer)\"\n            />\n          </ng-template>\n          {{ layer.get('title') }}\n        </div>\n      </ng-container>\n    </div>\n  </div>\n\n  <div\n    class=\"ol-control m-map-layer-action m-layer-legend\"\n    *ngIf=\"((legendLayers$ | async)?.length ?? 0) > 0\"\n    [style.top.px]=\"legendTop$ | async\"\n  >\n    <button\n      class=\"m-map-layer-action__toggle\"\n      [class.a-tooltip]=\"!this.legendTabOpen\"\n      [class.-tooltip-no-wrap]=\"!this.legendTabOpen\"\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 class=\"m-map-layer-action__container\" [class.-hidden]=\"!legendTabOpen\">\n      <span class=\"a-h4\">{{ '@pry.widget.map.legendsTitle' | i18n }}</span>\n      <ng-container *ngFor=\"let geoLayer of legendLayers$ | async; let index = index\">\n        <div class=\"m-map-layer-action__title m-layer-legend__title\" (click)=\"toggleLegend(index)\">\n          <pry-icon\n            *ngIf=\"isLayerRendered(geoLayer) && !!geoLayer.title\"\n            class=\"m-layer-legend__dropdown-icon\"\n            [iconSvg]=\"legendTab === index ? 'chevron_top' : 'chevron_bottom'\"\n            [width]=\"12\"\n            [height]=\"12\"\n          ></pry-icon>\n          {{ geoLayer.title }}\n          <pry-icon\n            *ngIf=\"!isLayerRendered(geoLayer)\"\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        </div>\n        <div\n          class=\"m-map-layer-action__image\"\n          [class.-hidden]=\"!legendTabOpen || legendTab !== index || !isLayerRendered(geoLayer)\"\n          [style.max-height.px]=\"legendHeight$ | async\"\n        >\n          <ng-container *ngIf=\"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          </ng-container>\n          <ng-container *ngIf=\"!(geoLayer | legendUrl : { capabilities: (wmsCapabilities$ | async) })\">\n            <p class=\"m-map-layer-action__error\">{{ '@pry.widget.map.legendNotProvided' | i18n }}</p>\n          </ng-container>\n        </div>\n      </ng-container>\n    </div>\n  </div>\n\n  <div class=\"m-map-slide-legend -left\" *ngIf=\"leftSlideLayers.length > 0\" [style.top.px]=\"legendTop$ | async\">\n    <span class=\"m-map-slide-legend__title\">{{ '@pry.widget.map.slideTitle' | i18n }}:</span>\n    <div *ngFor=\"let layer of leftSlideLayers\">\n      {{ layer.get('title') }}\n    </div>\n  </div>\n\n  <div class=\"m-map-slide-legend -right\" *ngIf=\"rightSlideLayers.length > 0\" [style.top.px]=\"legendTop$ | async\">\n    <span class=\"m-map-slide-legend__title\">{{ '@pry.widget.map.slideTitle' | i18n }}:</span>\n    <div *ngFor=\"let layer of rightSlideLayers\">\n      {{ layer.get('title') }}\n    </div>\n  </div>\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>{{ this.tooltipIndex + 1 }} / {{ this.tooltipNumber }}</p>\n      <button class=\"a-btn a-btn--primary a-btn--icon-only\" (click)=\"tooltipMove(-1)\" [disabled]=\"!tooltipCanMove(-1)\">\n        <pry-icon iconSvg=\"arrow_back\"></pry-icon>\n      </button>\n      <button class=\"a-btn a-btn--primary a-btn--icon-only\" (click)=\"tooltipMove(1)\" [disabled]=\"!tooltipCanMove(1)\">\n        <pry-icon iconSvg=\"arrow_right\"></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", "readonly", "autocomplete", "bindValue", "bindLabel", "iconSize", "bindIcon", "template", "i18nPrefix", "loading", "elementRef"], outputs: ["searched", "cleared"] }, { 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"] }, { kind: "component", type: i2.PryRangeComponent, selector: "pry-range", inputs: ["min", "max", "step", "disabled", "labelTranslate"] }, { 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: "16.2.12", 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)=\"changeSingleLayer($event)\" [ngModel]=\"optionsCopy.singleLayer ?? false\">\n        {{ '@pry.widget.map.singleLayer' | i18n }}\n      </pry-checkbox>\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]=\"optionsCopy.slide ?? false\">\n        {{ '@pry.widget.map.slide.global' | i18n }}\n      </pry-checkbox>\n\n      <div class=\"o-settings__popup__content__actions -has-separator\">\n        <button type=\"button\" (click)=\"addLayer()\" class=\"a-btn a-btn--icon-text -link-like\">\n          <pry-icon iconSvg=\"library_add\"></pry-icon>\n          {{ '@pry.widget.map.addLayer' | i18n }}\n        </button>\n      </div>\n\n      <div *ngFor=\"let layer of optionsCopy?.layers; let i = index\" class=\"o-settings__popup__content__fields\">\n        <div class=\"o-settings__popup__content__fields__head\">\n          <h3 class=\"a-h3 settings-layer-title__title\">{{ '@pry.widget.map.layer' | i18n : { index: i + 1 } }}</h3>\n          <div class=\"m-btn-group\">\n            <button type=\"button\" class=\"a-btn a-btn--icon-only\" (click)=\"invertLayers(i, i - 1)\" *ngIf=\"i > 0\">\n              <pry-icon iconSvg=\"fleche_haut\"></pry-icon>\n              <span class=\"u-visually-hidden\">{{ '@pry.action.moveUp' | i18n }}</span>\n            </button>\n            <button\n              type=\"button\"\n              class=\"a-btn a-btn--icon-only\"\n              (click)=\"invertLayers(i, i + 1)\"\n              *ngIf=\"i < (optionsCopy?.layers?.length ?? 0) - 1\"\n            >\n              <pry-icon iconSvg=\"fleche_bas\"></pry-icon>\n              <span class=\"u-visually-hidden\">{{ '@pry.action.moveDown' | i18n }}</span>\n            </button>\n          </div>\n        </div>\n\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\">{{ '@pry.widget.map.layerOptions' | i18n : { index: i + 1 } }}</legend>\n            <div class=\"m-form-label-field\">\n              <label class=\"a-label\" for=\"map_layerTitle\">{{ '@pry.widget.map.layerTitle' | i18n }}</label>\n              <input\n                id=\"map_layerTitle\"\n                class=\"a-form-field\"\n                type=\"text\"\n                (input)=\"changeTitle($event, layer)\"\n                [value]=\"layer.title ?? ''\"\n              />\n            </div>\n\n            <div class=\"m-form-label-field\" *ngIf=\"!['geoserver', 'auto'].includes(layer.type)\">\n              <label class=\"a-label\" for=\"map_layerType\">{{ '@pry.widget.map.layerType.title' | i18n }}</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\">{{ '@pry.widget.map.layerStyle' | i18n }}</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            <pry-checkbox (ngModelChange)=\"changeFit($event, layer)\" [ngModel]=\"layer.fit\">\n              {{ '@pry.widget.map.fit' | i18n }}\n            </pry-checkbox>\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                ['heatmap', 'bubble', 'marker', 'point', 'line', 'polygon', 'multi-line', 'multi-polygon'].indexOf(\n                  layer.type\n                ) >= 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\">{{ '@pry.widget.map.wms.paramLayer' | i18n }}</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\">{{ '@pry.widget.map.wms.matrixSet' | i18n }}</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 (ngModelChange)=\"changeParamTiled($event, layer)\" [ngModel]=\"layer?.paramTiled ?? false\">\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\n        <button\n          type=\"button\"\n          (click)=\"deleteLayer(i, layer)\"\n          class=\"a-btn a-btn--icon-text -link-like\"\n          *ngIf=\"layer.type !== 'geoserver'\"\n          data-func=\"delete\"\n        >\n          <pry-icon iconSvg=\"delete\" [width]=\"19\" [height]=\"19\"></pry-icon>\n          <span>{{ '@pry.widget.map.deleteLayer' | i18n }}</span>\n        </button>\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          [class.-selected]=\"(interactionManager.selectionInteraction.selectionType$ | async) === 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  <div\n    class=\"ol-control m-layer-switcher\"\n    *ngIf=\"((layers$ | async)?.length ?? 0) > 0\"\n    [style.top.px]=\"layersTop$ | async\"\n  >\n    <button\n      class=\"m-layer-switcher__toggle a-tooltip\"\n      (click)=\"toggleLayersWindow()\"\n      [attr.data-tooltip]=\"'@pry.widget.map.selectLayers' | i18n\"\n      data-tooltip-position=\"left\"\n    >\n      <pry-icon iconSvg=\"layers\" [width]=\"22\" [height]=\"22\"></pry-icon>\n    </button>\n    <ng-container *ngFor=\"let layer of mapLayers; let index = index\">\n      <div class=\"m-layer-switcher__title\" [class.-hidden]=\"!layersTabOpen\">\n        {{ layer.get('title') }}\n        <ng-container *ngIf=\"!(options$ | async)?.singleLayer; else singleLayer\">\n          <pry-checkbox [ngModel]=\"layer.getVisible()\" (change)=\"changeVisibility(layer)\"></pry-checkbox>\n        </ng-container>\n        <ng-template #singleLayer>\n          <input\n            type=\"radio\"\n            name=\"layer\"\n            [id]=\"'radio-layer-' + layer.get('title').split(' ')[0]\"\n            [ngModel]=\"layerVisibleIdx\"\n            [value]=\"index\"\n            (change)=\"changeVisibility(layer)\"\n          />\n        </ng-template>\n      </div>\n    </ng-container>\n  </div>\n\n  <div\n    class=\"ol-control m-layer-legend\"\n    *ngIf=\"((legendLayers$ | async)?.length ?? 0) > 0\"\n    [style.top.px]=\"legendTop$ | async\"\n  >\n    <button\n      class=\"m-layer-legend__toggle a-tooltip\"\n      (click)=\"toggleLegendWindow()\"\n      [attr.data-tooltip]=\"'@pry.widget.map.legends' | i18n\"\n      data-tooltip-position=\"left\"\n    >\n      <pry-icon iconSvg=\"legend\" [width]=\"22\" [height]=\"22\"></pry-icon>\n    </button>\n    <ng-container *ngFor=\"let geoLayer of legendLayers$ | async; let index = index\">\n      <div class=\"m-layer-legend__title\" [class.-hidden]=\"!legendTabOpen\">\n        {{ geoLayer.title }}\n        <ng-container *ngIf=\"isLayerRendered(geoLayer)\">\n          <button class=\"m-layer-legend__toggle\" (click)=\"toggleLegend(index)\">\n            <pry-icon\n              [iconSvg]=\"legendTab === index ? 'chevron_top' : 'chevron_bottom'\"\n              [width]=\"22\"\n              [height]=\"22\"\n            ></pry-icon>\n          </button>\n        </ng-container>\n        <ng-container *ngIf=\"!isLayerRendered(geoLayer)\">\n          <pry-icon [iconSvg]=\"'close'\" [width]=\"22\" [height]=\"22\"></pry-icon>\n        </ng-container>\n      </div>\n      <div\n        class=\"m-layer-legend__image\"\n        [class.-hidden]=\"!legendTabOpen || legendTab !== index || !isLayerRendered(geoLayer)\"\n        [style.max-height.px]=\"legendHeight$ | async\"\n      >\n        <ng-container *ngIf=\"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        </ng-container>\n        <ng-container *ngIf=\"!(geoLayer | legendUrl : { capabilities: (wmsCapabilities$ | async) })\">\n          <p class=\"m-layer-legend__error\">{{ '@pry.widget.map.legendNotProvided' | i18n }}</p>\n        </ng-container>\n      </div>\n    </ng-container>\n  </div>\n\n  <div class=\"m-map-slide-legend -left\" *ngIf=\"leftSlideLayers.length > 0\" [style.top.px]=\"legendTop$ | async\">\n    <span class=\"m-map-slide-legend__title\">{{ '@pry.widget.map.slideTitle' | i18n }}:</span>\n    <div *ngFor=\"let layer of leftSlideLayers\">\n      {{ layer.get('title') }}\n    </div>\n  </div>\n\n  <div class=\"m-map-slide-legend -right\" *ngIf=\"rightSlideLayers.length > 0\" [style.top.px]=\"legendTop$ | async\">\n    <span class=\"m-map-slide-legend__title\">{{ '@pry.widget.map.slideTitle' | i18n }}:</span>\n    <div *ngFor=\"let layer of rightSlideLayers\">\n      {{ layer.get('title') }}\n    </div>\n  </div>\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>{{ this.tooltipIndex + 1 }} / {{ this.tooltipNumber }}</p>\n      <button class=\"a-btn a-btn--primary a-btn--icon-only\" (click)=\"tooltipMove(-1)\" [disabled]=\"!tooltipCanMove(-1)\">\n        <pry-icon iconSvg=\"arrow_back\"></pry-icon>\n      </button>\n      <button class=\"a-btn a-btn--primary a-btn--icon-only\" (click)=\"tooltipMove(1)\" [disabled]=\"!tooltipCanMove(1)\">\n        <pry-icon iconSvg=\"arrow_right\"></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)=\"changeSingleLayer($event)\" [ngModel]=\"optionsCopy.singleLayer ?? false\">\n        {{ '@pry.widget.map.singleLayer' | i18n }}\n      </pry-checkbox>\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-settings__popup__content__actions -has-separator\">\n        <button type=\"button\" (click)=\"addLayer()\" class=\"a-btn a-btn--icon-text -link-like\">\n          <pry-icon iconSvg=\"library_add\"></pry-icon>\n          {{ '@pry.widget.map.addLayer' | i18n }}\n        </button>\n      </div>\n\n      <div *ngFor=\"let layer of optionsCopy?.layers; let i = index\" class=\"o-settings__popup__content__fields\">\n        <div class=\"o-settings__popup__content__fields__head\">\n          <h3 class=\"a-h3 settings-layer-title__title\">{{ '@pry.widget.map.layer' | i18n : { index: i + 1 } }}</h3>\n          <div class=\"m-btn-group\">\n            <button type=\"button\" class=\"a-btn a-btn--icon-only\" (click)=\"invertLayers(i, i - 1)\" *ngIf=\"i > 0\">\n              <pry-icon iconSvg=\"fleche_haut\"></pry-icon>\n              <span class=\"u-visually-hidden\">{{ '@pry.action.moveUp' | i18n }}</span>\n            </button>\n            <button\n              type=\"button\"\n              class=\"a-btn a-btn--icon-only\"\n              (click)=\"invertLayers(i, i + 1)\"\n              *ngIf=\"i < (optionsCopy?.layers?.length ?? 0) - 1\"\n            >\n              <pry-icon iconSvg=\"fleche_bas\"></pry-icon>\n              <span class=\"u-visually-hidden\">{{ '@pry.action.moveDown' | i18n }}</span>\n            </button>\n          </div>\n        </div>\n\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\">{{ '@pry.widget.map.layerOptions' | i18n : { index: i + 1 } }}</legend>\n            <div class=\"m-form-label-field\">\n              <label class=\"a-label\" for=\"map_layerTitle\">{{ '@pry.widget.map.layerTitle' | i18n }}</label>\n              <input\n                id=\"map_layerTitle\"\n                class=\"a-form-field\"\n                type=\"text\"\n                (input)=\"changeTitle($event, layer)\"\n                [value]=\"layer.title ?? ''\"\n              />\n            </div>\n\n            <div class=\"m-form-label-field\" *ngIf=\"!['geoserver', 'auto'].includes(layer.type)\">\n              <label class=\"a-label\" for=\"map_layerType\">{{ '@pry.widget.map.layerType.title' | i18n }}</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\">{{ '@pry.widget.map.layerStyle' | i18n }}</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            <pry-checkbox (ngModelChange)=\"changeFit($event, layer)\" [ngModel]=\"layer.fit\">\n              {{ '@pry.widget.map.fit' | i18n }}\n            </pry-checkbox>\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                ['heatmap', 'bubble', 'marker', 'point', 'line', 'polygon', 'multi-line', 'multi-polygon'].indexOf(\n                  layer.type\n                ) >= 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\">{{ '@pry.widget.map.wms.paramLayer' | i18n }}</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\">{{ '@pry.widget.map.wms.matrixSet' | i18n }}</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 (ngModelChange)=\"changeParamTiled($event, layer)\" [ngModel]=\"layer?.paramTiled ?? false\">\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\n        <button\n          type=\"button\"\n          (click)=\"deleteLayer(i, layer)\"\n          class=\"a-btn a-btn--icon-text -link-like\"\n          *ngIf=\"layer.type !== 'geoserver'\"\n          data-func=\"delete\"\n        >\n          <pry-icon iconSvg=\"delete\" [width]=\"19\" [height]=\"19\"></pry-icon>\n          <span>{{ '@pry.widget.map.deleteLayer' | i18n }}</span>\n        </button>\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          [class.-selected]=\"(interactionManager.selectionInteraction.selectionType$ | async) === 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  <div\n    class=\"ol-control m-layer-switcher m-map-layer-action\"\n    *ngIf=\"((layers$ | async)?.length ?? 0) > 0\"\n    [style.top.px]=\"layersTop$ | async\"\n  >\n    <button\n      class=\"m-map-layer-action__toggle\"\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 class=\"m-map-layer-action__container\" [class.-hidden]=\"!layersTabOpen\">\n      <span class=\"a-h4\">{{ '@pry.widget.map.layersTitle' | i18n }}</span>\n      <ng-container *ngFor=\"let layer of mapLayers; let index = index\">\n        <div class=\"m-map-layer-action__title m-layer-switcher__title\" [class.-hidden]=\"!layersTabOpen\">\n          <pry-checkbox\n            *ngIf=\"!(options$ | async)?.singleLayer; else singleLayer\"\n            [ngModel]=\"layer.getVisible()\"\n            (change)=\"changeVisibility(layer)\"\n          ></pry-checkbox>\n          <ng-template #singleLayer>\n            <input\n              type=\"radio\"\n              name=\"layer\"\n              [id]=\"'radio-layer-' + layer.get('title').split(' ')[0]\"\n              [ngModel]=\"layerVisibleIdx\"\n              [value]=\"index\"\n              (change)=\"changeVisibility(layer)\"\n            />\n          </ng-template>\n          {{ layer.get('title') }}\n        </div>\n      </ng-container>\n    </div>\n  </div>\n\n  <div\n    class=\"ol-control m-map-layer-action m-layer-legend\"\n    *ngIf=\"((legendLayers$ | async)?.length ?? 0) > 0\"\n    [style.top.px]=\"legendTop$ | async\"\n  >\n    <button\n      class=\"m-map-layer-action__toggle\"\n      [class.a-tooltip]=\"!this.legendTabOpen\"\n      [class.-tooltip-no-wrap]=\"!this.legendTabOpen\"\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 class=\"m-map-layer-action__container\" [class.-hidden]=\"!legendTabOpen\">\n      <span class=\"a-h4\">{{ '@pry.widget.map.legendsTitle' | i18n }}</span>\n      <ng-container *ngFor=\"let geoLayer of legendLayers$ | async; let index = index\">\n        <div class=\"m-map-layer-action__title m-layer-legend__title\" (click)=\"toggleLegend(index)\">\n          <pry-icon\n            *ngIf=\"isLayerRendered(geoLayer) && !!geoLayer.title\"\n            class=\"m-layer-legend__dropdown-icon\"\n            [iconSvg]=\"legendTab === index ? 'chevron_top' : 'chevron_bottom'\"\n            [width]=\"12\"\n            [height]=\"12\"\n          ></pry-icon>\n          {{ geoLayer.title }}\n          <pry-icon\n            *ngIf=\"!isLayerRendered(geoLayer)\"\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        </div>\n        <div\n          class=\"m-map-layer-action__image\"\n          [class.-hidden]=\"!legendTabOpen || legendTab !== index || !isLayerRendered(geoLayer)\"\n          [style.max-height.px]=\"legendHeight$ | async\"\n        >\n          <ng-container *ngIf=\"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          </ng-container>\n          <ng-container *ngIf=\"!(geoLayer | legendUrl : { capabilities: (wmsCapabilities$ | async) })\">\n            <p class=\"m-map-layer-action__error\">{{ '@pry.widget.map.legendNotProvided' | i18n }}</p>\n          </ng-container>\n        </div>\n      </ng-container>\n    </div>\n  </div>\n\n  <div class=\"m-map-slide-legend -left\" *ngIf=\"leftSlideLayers.length > 0\" [style.top.px]=\"legendTop$ | async\">\n    <span class=\"m-map-slide-legend__title\">{{ '@pry.widget.map.slideTitle' | i18n }}:</span>\n    <div *ngFor=\"let layer of leftSlideLayers\">\n      {{ layer.get('title') }}\n    </div>\n  </div>\n\n  <div class=\"m-map-slide-legend -right\" *ngIf=\"rightSlideLayers.length > 0\" [style.top.px]=\"legendTop$ | async\">\n    <span class=\"m-map-slide-legend__title\">{{ '@pry.widget.map.slideTitle' | i18n }}:</span>\n    <div *ngFor=\"let layer of rightSlideLayers\">\n      {{ layer.get('title') }}\n    </div>\n  </div>\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>{{ this.tooltipIndex + 1 }} / {{ this.tooltipNumber }}</p>\n      <button class=\"a-btn a-btn--primary a-btn--icon-only\" (click)=\"tooltipMove(-1)\" [disabled]=\"!tooltipCanMove(-1)\">\n        <pry-icon iconSvg=\"arrow_back\"></pry-icon>\n      </button>\n      <button class=\"a-btn a-btn--primary a-btn--icon-only\" (click)=\"tooltipMove(1)\" [disabled]=\"!tooltipCanMove(1)\">\n        <pry-icon iconSvg=\"arrow_right\"></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: function () { return [{ 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
                 }, {
@@ -2376,7 +2423,9 @@ const enTranslations = {
                 export: 'Export map',
                 legend: 'Legend of layer {{layer}}',
                 legendNotProvided: 'Legend not provided by server',
+                layersTitle: 'Layers',
                 selectLayers: 'Select layers',
+                legendsTitle: 'Legend',
                 legends: 'Display legend',
                 singleLayer: 'Single layer mode',
                 autoLayer: 'Automatic datasource layers configuration',
@@ -2390,7 +2439,8 @@ const enTranslations = {
                 open: 'Open/Close menu',
                 zoomIn: 'Zoom In',
                 zoomOut: 'Zoom Out',
-                slideTitle: 'Displayed data'
+                slideTitle: 'Displayed data',
+                layerLoadError: 'Error loading in layer data'
             }
         }
     }
@@ -2468,8 +2518,10 @@ const frTranslations = {
                 click: 'Sélectionner par clic',
                 zoom: 'Zoom par rectangle',
                 export: 'Exporter la carte',
+                legendsTitle: 'Légende',
                 legend: 'Légende de la couche {{layer}}',
                 legendNotProvided: 'Légende non fournie par le serveur',
+                layersTitle: 'Couches',
                 selectLayers: 'Sélectionner les couches',
                 legends: 'Afficher la légende',
                 singleLayer: 'Mode mono-couche',
@@ -2484,7 +2536,8 @@ const frTranslations = {
                 open: 'Ouverture/Fermeture menu',
                 zoomIn: 'Zoomer',
                 zoomOut: 'Dézoomer',
-                slideTitle: 'Données affichées'
+                slideTitle: 'Données affichées',
+                layerLoadError: 'Erreur de chargement de la couche'
             }
         }
     }