@provoly/dashboard 0.24.9 → 0.24.10

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

@@ -6,7 +6,7 @@ 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, 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 { 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, PryEditInputModule } 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';
@@ -18,7 +18,7 @@ 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, withLatestFrom } from 'rxjs';
+import { BehaviorSubject, map, combineLatest, filter, distinctUntilChanged, startWith, debounceTime, delay, mergeMap, of, from, withLatestFrom, switchMap, catchError } 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';
@@ -36,6 +36,8 @@ import ImageLayer from 'ol/layer/Image';
 import { getRenderPixel } from 'ol/render';
 import WebGLTileLayer from 'ol/layer/WebGLTile';
 import * as i1 from '@ngrx/store';
+import * as i7 from '@angular/cdk/drag-drop';
+import { DragDropModule } from '@angular/cdk/drag-drop';
 
 class SelectionInteraction extends PointerInteraction {
     constructor() {
@@ -1194,11 +1196,11 @@ class LayerSlider {
 
 class PryWidgetMapCssComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: PryWidgetMapCssComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", 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;-moz-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;-moz-user-select:text;user-select:text}.ol-grabbing{cursor:-webkit-grabbing;cursor:-moz-grabbing;cursor:grabbing}.ol-grab{cursor:move;cursor:-webkit-grab;cursor:-moz-grab;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:.5rem}.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:.5rem;padding:0;border:none;background:#fff}.ol-attribution>button,.ol-zoom>button{padding:0;border:none;background:#fff}.ol-zoom{top:.3125rem;right:.5rem;left:unset;bottom:unset;border-radius:.375rem;padding:0;border:none;background:#fff}.ol-zoom>button{padding:0;border:none;background:#fff}.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 button{border-radius:8px}.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__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:.5rem;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:#fff;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:.5rem;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: "17.1.3", 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;-moz-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;-moz-user-select:text;user-select:text}.ol-grabbing{cursor:-webkit-grabbing;cursor:-moz-grabbing;cursor:grabbing}.ol-grab{cursor:move;cursor:-webkit-grab;cursor:-moz-grab;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__general-settings{margin:0 -10px}.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:.5rem}.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:.5rem;padding:0;border:none;background:#fff}.ol-attribution>button,.ol-zoom>button{padding:0;border:none;background:#fff}.ol-zoom{top:.3125rem;right:.5rem;left:unset;bottom:unset;border-radius:.375rem;padding:0;border:none;background:#fff}.ol-zoom>button{padding:0;border:none;background:#fff}.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 button{border-radius:8px}.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__title{display:flex;flex-direction:row;align-items:center}.m-map-layer-action__title:hover{cursor:pointer;background-color:#fafafa!important}.m-map-layer-action__container{border-radius:.5rem;padding:.5rem .625rem}.m-map-layer-action__container--layers{max-width:13.75rem}.m-map-layer-action__container .a-h4{font-size:16px}.m-map-layer-action__container .a-h5{font-size:14px;margin:0}.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:#fff;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__group-title{font-weight:700;margin-bottom:.3125rem}.m-layer-switcher__title{align-items:flex-start}.m-layer-switcher--radios{display:flex;flex-direction:column;gap:.3125rem}.m-layer-switcher--radios input{margin-top:.1875rem}.m-layer-switcher--radios .a-label{margin-left:.3125rem}.m-map-slide-legend{pointer-events:none;position:absolute;z-index:1;background-color:#fff;border-radius:.5rem;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: "17.1.3", 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;-moz-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;-moz-user-select:text;user-select:text}.ol-grabbing{cursor:-webkit-grabbing;cursor:-moz-grabbing;cursor:grabbing}.ol-grab{cursor:move;cursor:-webkit-grab;cursor:-moz-grab;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:.5rem}.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:.5rem;padding:0;border:none;background:#fff}.ol-attribution>button,.ol-zoom>button{padding:0;border:none;background:#fff}.ol-zoom{top:.3125rem;right:.5rem;left:unset;bottom:unset;border-radius:.375rem;padding:0;border:none;background:#fff}.ol-zoom>button{padding:0;border:none;background:#fff}.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 button{border-radius:8px}.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__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:.5rem;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:#fff;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:.5rem;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;-moz-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;-moz-user-select:text;user-select:text}.ol-grabbing{cursor:-webkit-grabbing;cursor:-moz-grabbing;cursor:grabbing}.ol-grab{cursor:move;cursor:-webkit-grab;cursor:-moz-grab;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__general-settings{margin:0 -10px}.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:.5rem}.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:.5rem;padding:0;border:none;background:#fff}.ol-attribution>button,.ol-zoom>button{padding:0;border:none;background:#fff}.ol-zoom{top:.3125rem;right:.5rem;left:unset;bottom:unset;border-radius:.375rem;padding:0;border:none;background:#fff}.ol-zoom>button{padding:0;border:none;background:#fff}.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 button{border-radius:8px}.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__title{display:flex;flex-direction:row;align-items:center}.m-map-layer-action__title:hover{cursor:pointer;background-color:#fafafa!important}.m-map-layer-action__container{border-radius:.5rem;padding:.5rem .625rem}.m-map-layer-action__container--layers{max-width:13.75rem}.m-map-layer-action__container .a-h4{font-size:16px}.m-map-layer-action__container .a-h5{font-size:14px;margin:0}.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:#fff;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__group-title{font-weight:700;margin-bottom:.3125rem}.m-layer-switcher__title{align-items:flex-start}.m-layer-switcher--radios{display:flex;flex-direction:column;gap:.3125rem}.m-layer-switcher--radios input{margin-top:.1875rem}.m-layer-switcher--radios .a-label{margin-left:.3125rem}.m-map-slide-legend{pointer-events:none;position:absolute;z-index:1;background-color:#fff;border-radius:.5rem;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 {
@@ -1296,6 +1298,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImpor
 
 const TOOLTIP_PADDING = 15;
 const NON_MANDATORY_FIT_LAYER_TYPES = ['wms', 'geoserver'];
+const DEFAULT_LAYER_GROUP = 'DEFAULT';
 // Define Lambert Projection
 proj4.defs('EPSG:2154', '+proj=lcc +lat_0=46.5 +lon_0=3 +lat_1=49 +lat_2=44 +x_0=700000 +y_0=6600000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs +type=crs');
 register(proj4);
@@ -1336,6 +1339,8 @@ class WidgetMapComponent extends DataWidgetComponent {
         this.actionMenuOpen$ = new BehaviorSubject(false);
         this.olZoomElement$ = new BehaviorSubject(null);
         this.previousLayers = [];
+        this.layerSettingsExpandedState = {};
+        this.DEFAULT_LAYER_GROUP = DEFAULT_LAYER_GROUP;
         this.getOlZoomElement();
         this.slides = [
             { id: 'all', label: this.translateService.instant('@pry.widget.map.slide.all') },
@@ -1489,8 +1494,8 @@ class WidgetMapComponent extends DataWidgetComponent {
                 }),
                 ...geoLayers.filter((layer) => !actualLayerKeys.includes(layer.key))
             ].filter((layer) => !!layer);
-            autoOptions.layers.forEach((layer) => {
-                this.setDefaultLayerTitle(layer, capabilities);
+            autoOptions.layers.forEach((layer, index) => {
+                this.setDefaultLayerTitle(layer, index, capabilities);
             });
             if (!!mapStyles &&
                 mapStyles.length > 0 &&
@@ -1526,6 +1531,12 @@ class WidgetMapComponent extends DataWidgetComponent {
         }), distinctUntilChanged((p, c) => equal(p, c)));
         this.subscriptions.add(this.options$.pipe(filter((opt) => !!opt)).subscribe((options) => {
             this.optionsCopy = JSON.parse(JSON.stringify(options));
+            this.optionsCopy.layers?.forEach((layer) => (this.layerSettingsExpandedState[layer.title ?? 'MISSING TITLE'] = false));
+            if (this.optionsCopy.layers && this.optionsCopy.layers.some((layer) => !layer.group))
+                this.optionsCopy.layers = this.optionsCopy.layers.map((layer) => ({
+                    ...layer,
+                    group: layer.group ?? DEFAULT_LAYER_GROUP
+                }));
         }));
         this.mapUrl$ = this.store.select(ConfigSelectors.mapUrl);
         this.wmsFeatures$ = this.store.select(DashboardSelectors.wmsFeatures);
@@ -1568,6 +1579,12 @@ class WidgetMapComponent extends DataWidgetComponent {
             : {}), startWith({}))
             .subscribe((possibleStyles) => (this.possibleStyles = possibleStyles)));
         this.hasSlideLayer$ = this.options$.pipe(map((options) => (options.layers ?? []).map((layer) => !!layer.slide && layer.slide !== 'all').reduce((a, b) => a || b, false)));
+        this.layerGroups$ = this.store.select(DashboardSelectors.layerGroups);
+        this.store.dispatch(DashboardActions.initDefaultLayerGroup({
+            layers: this.optionsCopy.layers
+                ?.filter((layer) => layer.group === undefined)
+                .map((layer) => layer.title ?? this.translateService.instant(`@pry.widget.map.layerType.${layer.type}`, { ...layer }))
+        }));
     }
     initInteractionManager() {
         return this.interactionManager.init(this);
@@ -1626,7 +1643,7 @@ class WidgetMapComponent extends DataWidgetComponent {
             this.itemStyles$,
             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]) => {
+        ]).pipe(filter(([resultSet, options, classes, additionalLayers, itemStyles, filters, fields]) => !!resultSet && !!options && !!classes && !!fields), withLatestFrom(this.layerGroups$), map(([[resultSet, options, classes, additionalLayers, itemStyles, filters, fields], layerGroups]) => {
             let hasRelationLayer = null;
             const layers = (options?.layers || [])
                 .filter(
@@ -1710,11 +1727,12 @@ class WidgetMapComponent extends DataWidgetComponent {
                 });
             }
             layers.push(...additionalLayers);
-            if (options.singleLayer) {
-                layers.forEach((layer, idx) => {
-                    layer.setVisible(idx === 0);
-                });
-            }
+            const visibleLayers = layerGroups.map((group) => group.visibleLayers).flat();
+            layers.forEach((layer, idx) => {
+                if (!visibleLayers.includes(layer.get('title'))) {
+                    layer.setVisible(false);
+                }
+            });
             /* Resolve bug drawing webgllayer without nothing underneath: add empty layer below */
             const _layers = this.addEmptyWebGlLayerBelowSlideHeatmaps(layers);
             this.previousLayers.push(..._layers);
@@ -1921,7 +1939,7 @@ class WidgetMapComponent extends DataWidgetComponent {
             });
         });
     }
-    setDefaultLayerTitle(layer, capabilities) {
+    setDefaultLayerTitle(layer, index, capabilities) {
         if (!layer.title) {
             if (['geoserver', 'wms'].includes(layer.type)) {
                 const geoLayer = layer;
@@ -2029,11 +2047,23 @@ class WidgetMapComponent extends DataWidgetComponent {
             this.optionsCopy.layers?.forEach((layer) => delete layer.attribution);
         }
     }
-    addLayer() {
+    addLayer(group) {
         if (!this.optionsCopy.layers) {
             this.optionsCopy.layers = [];
         }
-        this.optionsCopy.layers.push({ attribute: '' });
+        const title = this.translateService.instant(`@pry.widget.map.layer`, { index: this.optionsCopy.layers.length + 1 });
+        const order = this.optionsCopy.layers.some((layer) => layer.order)
+            ? Math.max(...this.optionsCopy.layers.map((layer) => layer.order ?? 0)) + 1
+            : this.optionsCopy.layers.length + 1;
+        this.optionsCopy.layers.unshift({
+            attribute: '',
+            group: group.name,
+            title,
+            order,
+            type: 'marker'
+        });
+        this.layerSettingsExpandedState[title] = false;
+        this.store.dispatch(DashboardActions.updateLayerGroup({ name: group.name, visibleLayers: [...group.visibleLayers, title] }));
     }
     changeLayerType($event, i) {
         if (!this.optionsCopy.layers) {
@@ -2053,12 +2083,17 @@ class WidgetMapComponent extends DataWidgetComponent {
             options.url = options.url ?? '';
         }
         if (['featurelayer', 'vectortile', 'rastertile'].includes(this.optionsCopy.layers[i].type)) {
-            const options = this.optionsCopy.layers[i];
+            let options;
+            options = this.optionsCopy.layers[i];
             options.url = options.url ?? '';
         }
     }
-    changeTitle($event, layer) {
-        layer.title = $event.currentTarget?.value;
+    changeTitle($event, layer, group) {
+        const visibleLayers = group.visibleLayers.map((layerTitle) => (layerTitle === layer.title ? $event : layerTitle));
+        this.store.dispatch(DashboardActions.updateLayerGroup({ name: group.name, visibleLayers }));
+        delete this.layerSettingsExpandedState[layer.title];
+        layer.title = $event;
+        this.layerSettingsExpandedState[$event] = true;
     }
     emitManifest() {
         this.manifestModified.emit({
@@ -2090,16 +2125,6 @@ class WidgetMapComponent extends DataWidgetComponent {
             this.optionsCopy.ignoreAutoLayer = [...(this.optionsCopy.ignoreAutoLayer ?? []), layer.key + '-' + layer.subType];
         }
     }
-    invertLayers(idx, idxWith) {
-        if (!!this.optionsCopy && !!this.optionsCopy.layers) {
-            const tmpOrder = this.optionsCopy.layers[idxWith].order;
-            this.optionsCopy.layers[idxWith].order = this.optionsCopy.layers[idx].order;
-            this.optionsCopy.layers[idx].order = tmpOrder;
-            const tmpIndex = this.optionsCopy.layers[idxWith];
-            this.optionsCopy.layers[idxWith] = this.optionsCopy.layers[idx];
-            this.optionsCopy.layers[idx] = tmpIndex;
-        }
-    }
     changeUrl($event, layer) {
         // @ts-ignore
         layer.url = $event.currentTarget?.value;
@@ -2156,11 +2181,6 @@ class WidgetMapComponent extends DataWidgetComponent {
     isLayerRendered(layer) {
         return !!this.getWMSLayers().find((wmsLayer) => wmsLayer.get('title') === layer.title);
     }
-    isLayerVisible(layer) {
-        return !!this.getWMSLayers()
-            .find((wmsLayer) => wmsLayer.get('title') === layer.title)
-            ?.getVisible();
-    }
     getFeatureFromServer(wmsLayers, pixel) {
         for (const layer of wmsLayers) {
             let url = layer
@@ -2235,18 +2255,34 @@ class WidgetMapComponent extends DataWidgetComponent {
     get leftSlideLayers() {
         return this.mapLayers.filter((layer) => layer.get('slide') === 'left');
     }
-    changeVisibility(layer) {
-        if (this.optionsCopy.singleLayer) {
-            this.mapLayers.forEach((layer) => layer.setVisible(false));
-            layer.setVisible(true);
+    changeVisibility(group, _layer) {
+        const olLayer = this.mapLayers.find((layer) => layer.getProperties()['title'] === _layer?.title);
+        if (group.singleLayer) {
+            const groupLayers = this.optionsCopy.layers?.filter((l) => l.group === group.name).map((layer) => layer.title) ?? [];
+            this.mapLayers.forEach((layer) => {
+                if (groupLayers.includes(layer.getProperties()['title'])) {
+                    layer.setVisible(false);
+                }
+            });
+            olLayer?.setVisible(true);
+            _layer
+                ? this.store.dispatch(DashboardActions.updateLayerGroup({ name: group.name, visibleLayers: [_layer.title] }))
+                : this.store.dispatch(DashboardActions.updateLayerGroup({ name: group.name, visibleLayers: [] }));
         }
         else {
-            layer.setVisible(!layer.getVisible());
+            olLayer?.setVisible(!olLayer?.getVisible());
+            const visibleLayers = group.visibleLayers.includes(_layer?.title)
+                ? group.visibleLayers.filter((layer) => layer !== _layer?.title)
+                : [...group.visibleLayers, _layer?.title];
+            this.store.dispatch(DashboardActions.updateLayerGroup({ name: group.name, visibleLayers }));
         }
         this.map.updateSize();
     }
-    changeSingleLayer($event) {
-        this.optionsCopy.singleLayer = $event;
+    isLayerVisible(layer, group) {
+        if (group.visibleLayers) {
+            return group.visibleLayers.includes(layer.title ?? '');
+        }
+        return false;
     }
     changeAutoLayer($event) {
         this.optionsCopy.automaticLayers = $event;
@@ -2255,7 +2291,7 @@ class WidgetMapComponent extends DataWidgetComponent {
         }
     }
     get layerVisibleIdx() {
-        return this.mapLayers.map((layer, idx) => (layer.getVisible() ? idx : 0)).reduce((a, b) => a + b);
+        return this.mapLayers.map((layer, idx) => (layer.getVisible() ? idx : 0)).reduce((a, b) => a + b) || -1;
     }
     ngOnDestroy() {
         super.ngOnDestroy();
@@ -2355,12 +2391,117 @@ class WidgetMapComponent extends DataWidgetComponent {
             layer.dispose();
         });
     }
+    addLayerGroup() {
+        this.store.dispatch(DashboardActions.addLayerGroup({
+            defaultTitle: this.translateService.instant('@pry.widget.map.layerSettings.group')
+        }));
+    }
+    updateLayerGroup(name, newName, singleLayer, visibleLayers) {
+        if (singleLayer !== undefined && visibleLayers !== undefined) {
+            this.store.dispatch(DashboardActions.updateLayerGroup({
+                name,
+                newName,
+                singleLayer,
+                visibleLayers: singleLayer ? [visibleLayers[0]] : visibleLayers
+            }));
+        }
+        else if (name !== newName) {
+            this.store.dispatch(DashboardActions.updateLayerGroup({ name, newName, singleLayer, visibleLayers }));
+            if (newName !== undefined && this.optionsCopy.layers) {
+                this.optionsCopy.layers = this.optionsCopy.layers.map((layer) => layer.group === name
+                    ? {
+                        ...layer,
+                        group: newName
+                    }
+                    : layer);
+            }
+        }
+    }
+    updateLayerGroupTitle($event, name) {
+        this.updateLayerGroup(name, $event.currentTarget?.value);
+    }
+    deleteLayerGroup(name) {
+        this.store.dispatch(DashboardActions.confirmLayerGroupDeletion({ name }));
+    }
+    drop(event, group) {
+        // if layer is moved between two groups
+        if (event.previousContainer.id !== event.container.id) {
+            const movedLayer = this.optionsCopy.layers?.find((layer) => layer.title === event.item.data?.title);
+            if (movedLayer) {
+                // remove it from old group
+                this.store.dispatch(DashboardActions.updateLayerGroup({
+                    name: movedLayer.group ?? DEFAULT_LAYER_GROUP,
+                    visibleLayers: group?.visibleLayers.filter((layer) => layer !== movedLayer.title)
+                }));
+                const newGroup = event.container.element.nativeElement.getAttribute('data-layer-group') ?? DEFAULT_LAYER_GROUP;
+                // add it to new group
+                movedLayer.group = newGroup;
+                this.store.dispatch(DashboardActions.updateLayerGroup({
+                    name: movedLayer.group ?? DEFAULT_LAYER_GROUP,
+                    visibleLayers: movedLayer.title
+                }));
+            }
+        }
+        const [fromIndex, toIndex] = [event.previousIndex, event.currentIndex];
+        const direction = fromIndex < toIndex ? 1 : -1;
+        this.moveLayerInOptions(event.currentIndex, event.item.data, group, direction);
+    }
+    moveLayerInOptions(targetIdxInGroup, movedLayer, group, direction) {
+        if (this.optionsCopy.layers) {
+            const groupLayers = this.optionsCopy.layers.filter((layer) => layer.group === group.name);
+            // indexes in optionsCopy
+            const fromIndex = this.optionsCopy.layers.findIndex((layer) => layer.title === movedLayer.title);
+            const toIndex = this.optionsCopy.layers.findIndex((layer) => layer.title === groupLayers[targetIdxInGroup].title);
+            let newOrder = toIndex;
+            if (toIndex === 0) {
+                newOrder = (this.optionsCopy.layers[toIndex].order ?? toIndex) + 1;
+            }
+            else if (toIndex === this.optionsCopy.layers.length - 1) {
+                newOrder = (this.optionsCopy.layers[toIndex].order ?? toIndex) / 2;
+            }
+            else {
+                if (direction > 0) {
+                    newOrder =
+                        ((this.optionsCopy.layers[toIndex].order ?? toIndex) +
+                            (this.optionsCopy.layers[toIndex + 1].order ?? toIndex - 1)) /
+                            2;
+                }
+                else {
+                    newOrder =
+                        ((this.optionsCopy.layers[toIndex].order ?? toIndex) +
+                            (this.optionsCopy.layers[toIndex - 1].order ?? toIndex - 1)) /
+                            2;
+                }
+            }
+            this.optionsCopy.layers.splice(fromIndex, 1);
+            this.optionsCopy.layers.splice(toIndex, 0, { ...movedLayer, order: newOrder });
+        }
+    }
+    toggleExpandAll(group) {
+        this.layerSettingsExpandedState[group.name] = !this.layerSettingsExpandedState[group.name];
+        const layersToExpand = this.optionsCopy.layers?.filter((layer) => layer.group === group.name).map((layer) => layer.title) ?? [];
+        Object.keys(this.layerSettingsExpandedState).forEach((layer) => {
+            if (layersToExpand.includes(layer))
+                this.layerSettingsExpandedState[layer] = this.layerSettingsExpandedState[group.name];
+        });
+    }
+    toggleLayerExpand(layer, group) {
+        this.layerSettingsExpandedState[layer.title] = !this.layerSettingsExpandedState[layer.title];
+        if (this.layerSettingsExpandedState[layer.title])
+            this.layerSettingsExpandedState[group.name] = true;
+        if (group.visibleLayers.every((layerTitle) => !this.layerSettingsExpandedState[layerTitle])) {
+            this.layerSettingsExpandedState[group.name] = false;
+        }
+    }
+    updateOrder($event, layer) {
+        layer.order = +$event.currentTarget?.value;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", 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: "17.1.3", 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          [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", "alwaysShowAutosuggestedValues", "externalAutocompleteService", "bindValue", "bindLabel", "iconSize", "bindIcon", "template", "i18nPrefix", "bindClasses", "loading", "elementRef"], outputs: ["searched", "cleared", "clicked"] }, { 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: "17.1.3", type: WidgetMapComponent, selector: "pry-widget-map", viewQueries: [{ propertyName: "mapRef", first: true, predicate: ["mapRef"], descendants: true }, { propertyName: "popup", first: true, predicate: ["popup"], descendants: true }, { propertyName: "popupContent", first: true, predicate: ["popupContent"], descendants: true, read: ViewContainerRef }, { propertyName: "exportTypeTemplate", first: true, predicate: ["exportTypeTemplate"], descendants: true, read: TemplateRef }, { propertyName: "sliderElement", first: true, predicate: ["sliderElement"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<pry-widget-map-css></pry-widget-map-css>\n<div class=\"o-widget o-widget--map\">\n  <pry-widget-header\n    [datasourceIds]=\"(datasourceIds$ | async) ?? []\"\n    *ngIf=\"displayHeader$ | async\"\n    [widgetIndex]=\"widgetIndex\"\n    [manifest]=\"manifest\"\n    (manifestModified)=\"manifestModified.emit($event)\"\n    [headerOptions]=\"(displayHeader$ | async) ?? {}\"\n    #header\n  >\n    <pry-settings\n      (saveTriggered)=\"emitManifest()\"\n      (changeTitle)=\"changeWidgetTitle($event)\"\n      [headerPresent]=\"displayHeader$ | async\"\n      [widgetIndex]=\"widgetIndex\"\n      [header]=\"header\"\n      [open$]=\"open$\"\n      class=\"o-settings\"\n    >\n      <div class=\"m-form-label-field\">\n        <label class=\"a-label\" for=\"map_style\">{{ '@pry.widget.map.style' | i18n }} :</label>\n        <pry-select\n          (ngModelChange)=\"changeStyle($event)\"\n          [items]=\"styles$ | async\"\n          [ngModel]=\"optionsCopy.style\"\n          bindLabel=\"label\"\n          bindValue=\"identifier\"\n          id=\"map_style\"\n        ></pry-select>\n      </div>\n\n      <div class=\"m-form-label-field\" *ngIf=\"optionsCopy.style === STYLE_FROM_URL\">\n        <label class=\"a-label\" for=\"style_URL\">{{ '@pry.widget.map.styleUrl' | i18n }}</label>\n        <input\n          id=\"style_URL\"\n          class=\"a-form-field\"\n          type=\"text\"\n          (input)=\"changeStyleURL($event)\"\n          [value]=\"optionsCopy.styleURL ?? ''\"\n        />\n      </div>\n\n      <pry-checkbox (ngModelChange)=\"changeAutoLayer($event)\" [ngModel]=\"optionsCopy.automaticLayers ?? false\">\n        {{ '@pry.widget.map.autoLayer' | i18n }}\n      </pry-checkbox>\n\n      <pry-checkbox (ngModelChange)=\"changeAttributions($event)\" [ngModel]=\"optionsCopy.attributions ?? false\">\n        {{ '@pry.widget.map.attributions' | i18n }}\n      </pry-checkbox>\n\n      <pry-checkbox (ngModelChange)=\"changeSlideOption($event)\" [ngModel]=\"hasSlideLayer$ | async\">\n        {{ '@pry.widget.map.slide.global' | i18n }}\n      </pry-checkbox>\n\n      <div class=\"o-layer-settings\" cdkDropListGroup cdkDragBoundary>\n        <h4 class=\"a-label\">{{ '@pry.widget.map.layerSettings.title' | i18n }}</h4>\n        <div class=\"u-display-flex -justify-center\">\n          <button class=\"a-btn a-btn--primary\" (click)=\"addLayerGroup()\" type=\"button\">\n            {{ '@pry.widget.map.layerSettings.addLayerGroup' | i18n }}\n          </button>\n        </div>\n        <div *ngFor=\"let group of layerGroups$ | async; let groupIdx = index\" class=\"o-layer-settings__group\">\n          <div class=\"m-form-label-field o-layer-settings__group-title\">\n            <label class=\"a-label\" for=\"map_layerGroupTitle-{{ groupIdx }}\">\n              {{ '@pry.widget.map.layerSettings.layerGroupName' | i18n }}<span class=\"-obligatory-red\">*</span\n              >{{ '@pry.widget.map.layerSettings.optionalColon' | i18n }}\n            </label>\n            <div class=\"u-display-flex\">\n              <pry-edit-input\n                editButtonTooltip=\"@pry.widget.map.layerSettings.editGroupName\"\n                (validated)=\"updateLayerGroup(group.name, $event)\"\n                [ngModel]=\"group.name === DEFAULT_LAYER_GROUP ? ('@pry.widget.map.noGroup' | i18n) : group.name\"\n              ></pry-edit-input>\n              <button\n                class=\"a-btn--icon-only a-tooltip o-layer-settings__delete-group\"\n                [attr.data-tooltip]=\"'@pry.widget.map.layerSettings.deleteGroup' | i18n\"\n                data-tooltip-position=\"left\"\n                (click)=\"deleteLayerGroup(group.name)\"\n              >\n                <pry-icon [height]=\"16\" [width]=\"16\" iconSvg=\"bin_normal\"></pry-icon>\n              </button>\n            </div>\n          </div>\n          <div class=\"m-form-radio-group\">\n            <div class=\"m-form-radio-group__item\">\n              <input\n                type=\"radio\"\n                id=\"multiselection-{{ groupIdx }}\"\n                [ngModel]=\"group.singleLayer\"\n                (ngModelChange)=\"updateLayerGroup(group.name, undefined, $event)\"\n                [value]=\"false\"\n                [name]=\"group.name\"\n              />\n              <label class=\"a-label\" for=\"multiselection-{{ groupIdx }}\">{{\n                '@pry.widget.map.layerSettings.multipleLayer' | i18n\n              }}</label>\n            </div>\n            <div class=\"m-form-radio-group__item\">\n              <input\n                type=\"radio\"\n                id=\"monoselection-{{ groupIdx }}\"\n                [ngModel]=\"group.singleLayer\"\n                (ngModelChange)=\"updateLayerGroup(group.name, undefined, $event, group.visibleLayers)\"\n                [value]=\"true\"\n                [name]=\"group.name\"\n              />\n              <label class=\"a-label\" for=\"monoselection-{{ groupIdx }}\">{{\n                '@pry.widget.map.layerSettings.singleLayer' | i18n\n              }}</label>\n            </div>\n          </div>\n          <div class=\"m-btn-group\">\n            <div class=\"u-display-flex -align-center\">\n              <button (click)=\"addLayer(group)\" class=\"a-btn -link-like\" type=\"button\">\n                + {{ '@pry.widget.map.addLayer' | i18n }}\n              </button>\n            </div>\n            <button (click)=\"toggleExpandAll(group)\" class=\"a-btn -link-like\" type=\"button\">\n              {{\n                layerSettingsExpandedState[group.name]\n                  ? ('@pry.widget.map.layerSettings.foldAll' | i18n)\n                  : ('@pry.widget.map.layerSettings.unfoldAll' | i18n)\n              }}\n            </button>\n          </div>\n          <div cdkDropList class=\"o-layer-settings__layers\" (cdkDropListDropped)=\"drop($event, group)\" [attr.data-layer-group]=\"group.name\">\n            <ng-container *ngFor=\"let layer of optionsCopy?.layers; let i = index\">\n              <div\n                *ngIf=\"layer.group === group.name\"\n                class=\"o-layer-settings__layer-wrapper\"\n                cdkDrag\n                [cdkDragData]=\"layer\"\n                [cdkDragDisabled]=\"layerSettingsExpandedState[layer.title!]\"\n              >\n                <div class=\"drag-placeholder\" *cdkDragPlaceholder></div>\n                <div class=\"o-layer-settings__layer-header\">\n                  <div class=\"u-display-flex -align-center\">\n                    <pry-icon\n                      [class.-disabled]=\"layerSettingsExpandedState[layer.title!]\"\n                      class=\"drag-handle\"\n                      [height]=\"16\"\n                      [width]=\"16\"\n                      iconSvg=\"drag_indicator\"\n                    ></pry-icon>\n                    <button\n                      class=\"a-btn--icon-only unfold-layer\"\n                      (click)=\"toggleLayerExpand(layer, group)\"\n                      type=\"button\"\n                    >\n                      <pry-icon\n                        [height]=\"5\"\n                        [width]=\"9\"\n                        [iconSvg]=\"layerSettingsExpandedState[layer.title!] ? 'chevron_top' : 'chevron_bottom'\"\n                      ></pry-icon>\n                    </button>\n                    <h5 class=\"a-h5\">{{ layer.title ?? ('@pry.widget.map.layer' | i18n: { index: i + 1 }) }}</h5>\n                  </div>\n                  <button\n                    class=\"o-layer-settings__delete-layer a-btn--icon-only a-tooltip\"\n                    [attr.data-tooltip]=\"'@pry.widget.map.layerSettings.deleteLayer' | i18n\"\n                    data-tooltip-position=\"left\"\n                    (click)=\"deleteLayer(i, layer)\"\n                  >\n                    <pry-icon [height]=\"16\" [width]=\"16\" iconSvg=\"bin_normal\"></pry-icon>\n                  </button>\n                </div>\n                <div *ngIf=\"layerSettingsExpandedState[layer.title!]\" class=\"o-layer-settings__layer-content\">\n                  <div class=\"o-settings__popup__content__fields__content\">\n                    <pry-range\n                      [ngModel]=\"(layer?.opacity ?? 100) + ''\"\n                      (ngModelChange)=\"changeOpacity(layer, $event)\"\n                      labelTranslate=\"@pry.widget.map.opacity\"\n                      min=\"0\"\n                      max=\"100\"\n                    ></pry-range>\n\n                    <fieldset>\n                      <legend class=\"u-visually-hidden\">\n                        {{ '@pry.widget.map.layerOptions' | i18n: { index: i + 1 } }}\n                      </legend>\n                      <div class=\"m-form-label-field\">\n                        <pry-edit-input\n                          label=\"@pry.widget.map.layerTitle\"\n                          editButtonTooltip=\"@pry.widget.map.layerSettings.editLayerTitle\"\n                          (validated)=\"changeTitle($event, layer, group)\"\n                          [ngModel]=\"layer.title\"\n                        ></pry-edit-input>\n                      </div>\n                      <div class=\"m-form-label-field\" *ngIf=\"!['geoserver', 'auto'].includes(layer.type)\">\n                        <label class=\"a-label\" for=\"map_layerType\">{{\n                          '@pry.widget.map.layerType.title' | i18n\n                        }}</label>\n                        <pry-select\n                          (ngModelChange)=\"changeLayerType($event, i)\"\n                          [items]=\"layerTypes\"\n                          [ngModel]=\"layer.type\"\n                          i18nPrefix=\"@pry.widget.map.layerType.\"\n                          id=\"map_layerType\"\n                        ></pry-select>\n                      </div>\n\n                      <div class=\"m-form-label-field\" *ngIf=\"['geoserver', 'wms'].includes(layer.type)\">\n                        <ng-container *ngIf=\"getAsWmsType(layer) as wmslayer\">\n                          <label class=\"a-label\" for=\"map_layerStyle\">{{ '@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                      <div class=\"m-form-label-field\">\n                        <pry-checkbox (ngModelChange)=\"changeFit($event, layer)\" [ngModel]=\"layer.fit\">\n                          {{ '@pry.widget.map.fit' | i18n }}\n                        </pry-checkbox>\n                      </div>\n\n                      <div\n                        *ngIf=\"\n                          layer.type !== 'relation' &&\n                          layer.type !== 'wms' &&\n                          layer.type !== 'wmts' &&\n                          layer.type !== 'geoserver' &&\n                          layer.type !== 'featurelayer' &&\n                          layer.type !== 'vectortile' &&\n                          layer.type !== 'rastertile' &&\n                          layer.type !== 'auto'\n                        \"\n                        class=\"m-form-label-field\"\n                      >\n                        <label class=\"a-label\" for=\"map_classes\">{{ '@pry.widget.map.classes' | i18n }}</label>\n                        <pry-select\n                          (ngModelChange)=\"changeClasses($event, layer)\"\n                          [items]=\"usedClasses$ | async\"\n                          [multiple]=\"true\"\n                          [ngModel]=\"layer.classes\"\n                          bindLabel=\"name\"\n                          bindValue=\"id\"\n                          id=\"map_classes\"\n                        ></pry-select>\n                      </div>\n                    </fieldset>\n                  </div>\n\n                  <fieldset\n                    *ngIf=\"\n                      layer.type !== 'relation' &&\n                      layer.type !== 'wms' &&\n                      layer.type !== 'wmts' &&\n                      layer.type !== 'geoserver' &&\n                      layer.type !== 'featurelayer' &&\n                      layer.type !== 'vectortile' &&\n                      layer.type !== 'rastertile'\n                    \"\n                  >\n                    <legend class=\"u-visually-hidden\">{{ '@pry.widget.map.locationAttr' | i18n }}</legend>\n                    <ng-container\n                      *ngIf=\"\n                        layer\n                          | geometryFieldsFor: { resultSet: resultSet$, classes: layer.classes, type: layer.type }\n                          | async as fields\n                      \"\n                    >\n                      <div\n                        *ngIf=\"\n                          [\n                            'heatmap',\n                            'bubble',\n                            'marker',\n                            'point',\n                            'line',\n                            'polygon',\n                            'multi-line',\n                            'multi-polygon'\n                          ].indexOf(layer.type) >= 0\n                        \"\n                      >\n                        <div class=\"m-form-label-field\">\n                          <label class=\"a-label\" for=\"map_locationAttribute_both\">{{\n                            '@pry.widget.map.locationAttribute.both' | i18n\n                          }}</label>\n                          <pry-select\n                            (ngModelChange)=\"changeLocationAttributes($event, layer)\"\n                            [items]=\"fields\"\n                            [ngModel]=\"layer.attribute\"\n                            bindLabel=\"name\"\n                            bindValue=\"name\"\n                            id=\"map_locationAttribute_both\"\n                          ></pry-select>\n                        </div>\n                      </div>\n\n                      <div *ngIf=\"['heatmap', 'bubble'].indexOf(layer.type) >= 0\">\n                        <div class=\"m-form-label-field\">\n                          <label class=\"a-label\" for=\"map_intensityAttribute\">{{\n                            '@pry.widget.map.intensityAttribute' | i18n\n                          }}</label>\n                          <pry-select\n                            (ngModelChange)=\"changeIntensityAttributes($event, layer)\"\n                            [items]=\"fields\"\n                            [ngModel]=\"layerHasIntensity(layer).intensityAttribute\"\n                            bindLabel=\"name\"\n                            bindValue=\"name\"\n                            id=\"map_intensityAttribute\"\n                          ></pry-select>\n                        </div>\n                      </div>\n                    </ng-container>\n                  </fieldset>\n\n                  <fieldset\n                    *ngIf=\"\n                      layer.type === 'wms' ||\n                      layer.type === 'geoserver' ||\n                      layer.type === 'wmts' ||\n                      layer.type === 'featurelayer' ||\n                      layer.type === 'vectortile' ||\n                      layer.type === 'rastertile'\n                    \"\n                  >\n                    <ng-container *ngIf=\"layer.type !== 'geoserver'\">\n                      <div class=\"m-form-label-field\">\n                        <label class=\"a-label\" for=\"map_wms_url\">{{ '@pry.widget.map.wms.url' | i18n }}</label>\n                        <input\n                          id=\"map_wms_url\"\n                          class=\"a-form-field\"\n                          type=\"text\"\n                          (input)=\"changeUrl($event, layer)\"\n                          [value]=\"layer.url\"\n                        />\n                      </div>\n                    </ng-container>\n\n                    <div class=\"m-form-label-field\" *ngIf=\"layer.type === 'wms' || layer.type === 'wmts'\">\n                      <label class=\"a-label\" for=\"map_wms_paramLayer\">{{\n                        '@pry.widget.map.wms.paramLayer' | i18n\n                      }}</label>\n                      <input\n                        id=\"map_wms_paramLayer\"\n                        class=\"a-form-field\"\n                        type=\"text\"\n                        (input)=\"changeParamLayer($event, layer)\"\n                        [value]=\"layer.paramLayer\"\n                      />\n                    </div>\n\n                    <div class=\"m-form-label-field\" *ngIf=\"layer.type === 'wmts'\">\n                      <label class=\"a-label\" for=\"map_wms_matrixSet\">{{\n                        '@pry.widget.map.wms.matrixSet' | i18n\n                      }}</label>\n                      <input\n                        id=\"map_wms_matrixSet\"\n                        class=\"a-form-field\"\n                        type=\"text\"\n                        (input)=\"changeMatrixSet($event, layer)\"\n                        [value]=\"layer.matrixSet\"\n                      />\n                    </div>\n\n                    <div class=\"m-form-label-field\" *ngIf=\"layer.type === 'wmts'\">\n                      <label class=\"a-label\" for=\"map_wms_style\">{{ '@pry.widget.map.wms.style' | i18n }}</label>\n                      <input\n                        id=\"map_wms_style\"\n                        class=\"a-form-field\"\n                        type=\"text\"\n                        (input)=\"changeParamStyle($event, layer)\"\n                        [value]=\"layer.style\"\n                      />\n                    </div>\n\n                    <div class=\"m-form-label-field\" *ngIf=\"layer.type === 'wms' || layer.type === 'geoserver'\">\n                      <legend class=\"u-visually-hidden\">{{ '@pry.widget.map.tile' | i18n }}</legend>\n                      <pry-checkbox\n                        (ngModelChange)=\"changeParamTiled($event, layer)\"\n                        [ngModel]=\"layer?.paramTiled ?? false\"\n                      >\n                        {{ '@pry.widget.map.wms.paramTiled' | i18n }}\n                      </pry-checkbox>\n                    </div>\n                  </fieldset>\n\n                  <fieldset *ngIf=\"layer.type === 'marker'\">\n                    <legend class=\"u-visually-hidden\">{{ '@pry.widget.map.clustering' | i18n }}</legend>\n                    <div class=\"m-form-label-field\">\n                      <pry-checkbox (ngModelChange)=\"changeClustered(layer, $event)\" [ngModel]=\"layer.clustered\">\n                        {{ '@pry.widget.map.clustered' | i18n }}\n                      </pry-checkbox>\n                    </div>\n                    <div *ngIf=\"layer.clustered\">\n                      <pry-range\n                        [ngModel]=\"layer.clustered\"\n                        (ngModelChange)=\"changeClusterDistance(layer, $event)\"\n                        labelTranslate=\"@pry.widget.map.clusterDistance\"\n                        min=\"1\"\n                        max=\"500\"\n                      ></pry-range>\n                    </div>\n                  </fieldset>\n\n                  <div class=\"m-form-label-field\" *ngIf=\"optionsCopy.slide ?? false\">\n                    <label class=\"a-label\" for=\"slide_select\">{{ '@pry.widget.map.slide.title' | i18n }}</label>\n                    <pry-select\n                      (ngModelChange)=\"changeSlide($event, layer)\"\n                      [items]=\"slides\"\n                      [ngModel]=\"layer.slide ?? 'all'\"\n                      bindLabel=\"label\"\n                      bindValue=\"id\"\n                      id=\"slide_select\"\n                    ></pry-select>\n                  </div>\n\n                  <div class=\"m-form-label-field\" *ngIf=\"optionsCopy.attributions\">\n                    <label class=\"a-label\" for=\"attribution\">{{ '@pry.widget.map.attribution' | i18n }}</label>\n                    <input\n                      id=\"attribution\"\n                      class=\"a-form-field\"\n                      type=\"text\"\n                      (input)=\"changeAttribution($event, layer)\"\n                      [value]=\"layer.attribution ? layer.attribution : ''\"\n                    />\n                  </div>\n                  <div class=\"m-form-label-field\">\n                    <label class=\"a-label\" for=\"map_layerType\">{{ '@pry.widget.map.order' | i18n }}</label>\n                    <input\n                      id=\"map_layer_order\"\n                      class=\"a-form-field\"\n                      type=\"number\"\n                      (input)=\"updateOrder($event, layer)\"\n                      [value]=\"layer.order ?? -1\"\n                    />\n                  </div>\n                </div>\n              </div>\n            </ng-container>\n          </div>\n        </div>\n      </div>\n    </pry-settings>\n  </pry-widget-header>\n\n  <div\n    class=\"m-btn-group -map-selection-choice -vertical\"\n    [class.-with-header]=\"displayHeader$ | async\"\n    [class.-closed]=\"!(actionMenuOpen$ | async)\"\n  >\n    <div class=\"-vertical\">\n      <ng-container *ngFor=\"let action of basicActions$ | async\">\n        <button\n          type=\"button\"\n          class=\"a-btn a-btn--icon-only a-tooltip a-tooltip--{{ action }}\"\n          (click)=\"changeSelection(action)\"\n          [attr.data-tooltip]=\"'@pry.widget.map.' + action | i18n\"\n          data-tooltip-position=\"right\"\n        >\n          <pry-icon [iconSvg]=\"action\"></pry-icon>\n          <span class=\"u-visually-hidden\">{{ '@pry.widget.map.' + action | i18n }}</span>\n        </button>\n      </ng-container>\n    </div>\n\n    <button\n      type=\"button\"\n      class=\"a-btn a-btn--icon-only a-tooltip -map-toggle\"\n      id=\"open_menu\"\n      [attr.aria-expanded]=\"actionMenuOpen$ | async\"\n      aria-controls=\"export_type\"\n      aria-haspopup=\"menu\"\n      (click)=\"toggleMenu()\"\n    >\n      <pry-icon\n        [iconSvg]=\"(actionMenuOpen$ | async) ? 'chevron_top' : 'chevron_bottom'\"\n        [width]=\"12\"\n        [height]=\"24\"\n      ></pry-icon>\n      <span class=\"u-visually-hidden\">{{ '@pry.widget.map.open' | i18n }}</span>\n    </button>\n  </div>\n\n  <div class=\"m-btn-group -map-selection-choice -map-export\" [class.-with-header]=\"displayHeader$ | async\">\n    <button\n      type=\"button\"\n      class=\"a-btn a-btn--icon-only a-tooltip\"\n      id=\"export_card\"\n      aria-expanded=\"false\"\n      aria-controls=\"export_type\"\n      aria-haspopup=\"menu\"\n      [attr.data-tooltip]=\"'@pry.widget.map.export' | i18n\"\n      data-tooltip-position=\"right\"\n      (click)=\"export()\"\n    >\n      <pry-icon iconSvg=\"file_download\"></pry-icon>\n      <span class=\"u-visually-hidden\">{{ '@pry.widget.map.export' | i18n }}</span>\n    </button>\n  </div>\n\n  <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 m-map-layer-action__container--layers\" [class.-hidden]=\"!layersTabOpen\">\n      <h4 class=\"a-h4\">{{ '@pry.widget.map.layerSettings.selectLayers' | i18n }}</h4>\n      <ng-container *ngFor=\"let group of layerGroups$ | async\">\n        <div class=\"m-map-layer-action__title m-layer-switcher__group-title\">\n          <h5 class=\"a-h5\">\n            {{ group.name === DEFAULT_LAYER_GROUP ? ('@pry.widget.map.noGroup' | i18n) : group.name }}\n          </h5>\n        </div>\n        <ng-container *ngIf=\"!group.singleLayer; else singleLayer\">\n          <ng-container *ngFor=\"let layer of optionsCopy.layers; let index = index\">\n            <ng-container *ngIf=\"layer.group === group.name\">\n              <div class=\"m-map-layer-action__title m-layer-switcher__title\" [class.-hidden]=\"!layersTabOpen\">\n                <pry-checkbox\n                  [ngModel]=\"isLayerVisible(layer, group)\"\n                  (change)=\"changeVisibility(group, layer)\"\n                  id=\"checkbox-layer-{{ index }}\"\n                ></pry-checkbox>\n                <label class=\"a-label\" for=\"checkbox-layer-{{ index }}\">\n                  {{ layer.title ?? ('@pry.widget.map.missingTitle' | i18n) }}\n                </label>\n              </div>\n            </ng-container>\n          </ng-container>\n        </ng-container>\n        <ng-template #singleLayer>\n          <div class=\"m-layer-switcher--radios\">\n            <div class=\"m-map-layer-action__title m-layer-switcher__title\" [class.-hidden]=\"!layersTabOpen\">\n              <input\n                type=\"radio\"\n                [name]=\"group.name\"\n                id=\"radio-no-layer\"\n                [ngModel]=\"group.visibleLayers.length\"\n                [value]=\"0\"\n                (change)=\"changeVisibility(group)\"\n              />\n              <label class=\"a-label\" for=\"radio-no-layer\">{{ '@pry.widget.map.layerSettings.noLayer' | i18n }}</label>\n            </div>\n            <ng-container *ngFor=\"let layer of optionsCopy.layers; let index = index\">\n              <ng-container *ngIf=\"layer.group === group.name\">\n                <div class=\"m-map-layer-action__title m-layer-switcher__title\" [class.-hidden]=\"!layersTabOpen\">\n                  <input\n                    type=\"radio\"\n                    [name]=\"group.name\"\n                    [id]=\"'radio-layer-' + index\"\n                    [ngModel]=\"group.visibleLayers[0]\"\n                    [value]=\"layer.title\"\n                    (change)=\"changeVisibility(group, layer)\"\n                  />\n                  <label class=\"a-label\" for=\"radio-layer-{{ index }}\">{{ layer.title ?? 'MISSING TITLE' }}</label>\n                </div>\n              </ng-container>\n            </ng-container>\n          </div>\n        </ng-template>\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      <h4 class=\"a-h4\">{{ '@pry.widget.map.legendsTitle' | i18n }}</h4>\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          <h5 class=\"a-h5\">{{ geoLayer.title }}</h5>\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", "alwaysShowAutosuggestedValues", "externalAutocompleteService", "bindValue", "bindLabel", "iconSize", "bindIcon", "template", "i18nPrefix", "bindClasses", "loading", "elementRef"], outputs: ["searched", "cleared", "clicked"] }, { 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: i2.PryEditInputComponent, selector: "pry-edit-input", inputs: ["label", "editButtonTooltip", "confirmButtonTooltip"], outputs: ["validated"] }, { kind: "directive", type: i7.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i7.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: i7.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i7.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "component", type: PryWidgetMapCssComponent, selector: "pry-widget-map-css" }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.GetSecuredImagePipe, name: "getSecuredImage" }, { kind: "pipe", type: i2.I18nPipe, name: "i18n" }, { kind: "pipe", type: GeometryFieldsForPipe, name: "geometryFieldsFor" }, { kind: "pipe", type: WidgetMapLegendUrlPipe, name: "legendUrl" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", 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]=\"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          [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" }]
+            args: [{ selector: 'pry-widget-map', template: "<pry-widget-map-css></pry-widget-map-css>\n<div class=\"o-widget o-widget--map\">\n  <pry-widget-header\n    [datasourceIds]=\"(datasourceIds$ | async) ?? []\"\n    *ngIf=\"displayHeader$ | async\"\n    [widgetIndex]=\"widgetIndex\"\n    [manifest]=\"manifest\"\n    (manifestModified)=\"manifestModified.emit($event)\"\n    [headerOptions]=\"(displayHeader$ | async) ?? {}\"\n    #header\n  >\n    <pry-settings\n      (saveTriggered)=\"emitManifest()\"\n      (changeTitle)=\"changeWidgetTitle($event)\"\n      [headerPresent]=\"displayHeader$ | async\"\n      [widgetIndex]=\"widgetIndex\"\n      [header]=\"header\"\n      [open$]=\"open$\"\n      class=\"o-settings\"\n    >\n      <div class=\"m-form-label-field\">\n        <label class=\"a-label\" for=\"map_style\">{{ '@pry.widget.map.style' | i18n }} :</label>\n        <pry-select\n          (ngModelChange)=\"changeStyle($event)\"\n          [items]=\"styles$ | async\"\n          [ngModel]=\"optionsCopy.style\"\n          bindLabel=\"label\"\n          bindValue=\"identifier\"\n          id=\"map_style\"\n        ></pry-select>\n      </div>\n\n      <div class=\"m-form-label-field\" *ngIf=\"optionsCopy.style === STYLE_FROM_URL\">\n        <label class=\"a-label\" for=\"style_URL\">{{ '@pry.widget.map.styleUrl' | i18n }}</label>\n        <input\n          id=\"style_URL\"\n          class=\"a-form-field\"\n          type=\"text\"\n          (input)=\"changeStyleURL($event)\"\n          [value]=\"optionsCopy.styleURL ?? ''\"\n        />\n      </div>\n\n      <pry-checkbox (ngModelChange)=\"changeAutoLayer($event)\" [ngModel]=\"optionsCopy.automaticLayers ?? false\">\n        {{ '@pry.widget.map.autoLayer' | i18n }}\n      </pry-checkbox>\n\n      <pry-checkbox (ngModelChange)=\"changeAttributions($event)\" [ngModel]=\"optionsCopy.attributions ?? false\">\n        {{ '@pry.widget.map.attributions' | i18n }}\n      </pry-checkbox>\n\n      <pry-checkbox (ngModelChange)=\"changeSlideOption($event)\" [ngModel]=\"hasSlideLayer$ | async\">\n        {{ '@pry.widget.map.slide.global' | i18n }}\n      </pry-checkbox>\n\n      <div class=\"o-layer-settings\" cdkDropListGroup cdkDragBoundary>\n        <h4 class=\"a-label\">{{ '@pry.widget.map.layerSettings.title' | i18n }}</h4>\n        <div class=\"u-display-flex -justify-center\">\n          <button class=\"a-btn a-btn--primary\" (click)=\"addLayerGroup()\" type=\"button\">\n            {{ '@pry.widget.map.layerSettings.addLayerGroup' | i18n }}\n          </button>\n        </div>\n        <div *ngFor=\"let group of layerGroups$ | async; let groupIdx = index\" class=\"o-layer-settings__group\">\n          <div class=\"m-form-label-field o-layer-settings__group-title\">\n            <label class=\"a-label\" for=\"map_layerGroupTitle-{{ groupIdx }}\">\n              {{ '@pry.widget.map.layerSettings.layerGroupName' | i18n }}<span class=\"-obligatory-red\">*</span\n              >{{ '@pry.widget.map.layerSettings.optionalColon' | i18n }}\n            </label>\n            <div class=\"u-display-flex\">\n              <pry-edit-input\n                editButtonTooltip=\"@pry.widget.map.layerSettings.editGroupName\"\n                (validated)=\"updateLayerGroup(group.name, $event)\"\n                [ngModel]=\"group.name === DEFAULT_LAYER_GROUP ? ('@pry.widget.map.noGroup' | i18n) : group.name\"\n              ></pry-edit-input>\n              <button\n                class=\"a-btn--icon-only a-tooltip o-layer-settings__delete-group\"\n                [attr.data-tooltip]=\"'@pry.widget.map.layerSettings.deleteGroup' | i18n\"\n                data-tooltip-position=\"left\"\n                (click)=\"deleteLayerGroup(group.name)\"\n              >\n                <pry-icon [height]=\"16\" [width]=\"16\" iconSvg=\"bin_normal\"></pry-icon>\n              </button>\n            </div>\n          </div>\n          <div class=\"m-form-radio-group\">\n            <div class=\"m-form-radio-group__item\">\n              <input\n                type=\"radio\"\n                id=\"multiselection-{{ groupIdx }}\"\n                [ngModel]=\"group.singleLayer\"\n                (ngModelChange)=\"updateLayerGroup(group.name, undefined, $event)\"\n                [value]=\"false\"\n                [name]=\"group.name\"\n              />\n              <label class=\"a-label\" for=\"multiselection-{{ groupIdx }}\">{{\n                '@pry.widget.map.layerSettings.multipleLayer' | i18n\n              }}</label>\n            </div>\n            <div class=\"m-form-radio-group__item\">\n              <input\n                type=\"radio\"\n                id=\"monoselection-{{ groupIdx }}\"\n                [ngModel]=\"group.singleLayer\"\n                (ngModelChange)=\"updateLayerGroup(group.name, undefined, $event, group.visibleLayers)\"\n                [value]=\"true\"\n                [name]=\"group.name\"\n              />\n              <label class=\"a-label\" for=\"monoselection-{{ groupIdx }}\">{{\n                '@pry.widget.map.layerSettings.singleLayer' | i18n\n              }}</label>\n            </div>\n          </div>\n          <div class=\"m-btn-group\">\n            <div class=\"u-display-flex -align-center\">\n              <button (click)=\"addLayer(group)\" class=\"a-btn -link-like\" type=\"button\">\n                + {{ '@pry.widget.map.addLayer' | i18n }}\n              </button>\n            </div>\n            <button (click)=\"toggleExpandAll(group)\" class=\"a-btn -link-like\" type=\"button\">\n              {{\n                layerSettingsExpandedState[group.name]\n                  ? ('@pry.widget.map.layerSettings.foldAll' | i18n)\n                  : ('@pry.widget.map.layerSettings.unfoldAll' | i18n)\n              }}\n            </button>\n          </div>\n          <div cdkDropList class=\"o-layer-settings__layers\" (cdkDropListDropped)=\"drop($event, group)\" [attr.data-layer-group]=\"group.name\">\n            <ng-container *ngFor=\"let layer of optionsCopy?.layers; let i = index\">\n              <div\n                *ngIf=\"layer.group === group.name\"\n                class=\"o-layer-settings__layer-wrapper\"\n                cdkDrag\n                [cdkDragData]=\"layer\"\n                [cdkDragDisabled]=\"layerSettingsExpandedState[layer.title!]\"\n              >\n                <div class=\"drag-placeholder\" *cdkDragPlaceholder></div>\n                <div class=\"o-layer-settings__layer-header\">\n                  <div class=\"u-display-flex -align-center\">\n                    <pry-icon\n                      [class.-disabled]=\"layerSettingsExpandedState[layer.title!]\"\n                      class=\"drag-handle\"\n                      [height]=\"16\"\n                      [width]=\"16\"\n                      iconSvg=\"drag_indicator\"\n                    ></pry-icon>\n                    <button\n                      class=\"a-btn--icon-only unfold-layer\"\n                      (click)=\"toggleLayerExpand(layer, group)\"\n                      type=\"button\"\n                    >\n                      <pry-icon\n                        [height]=\"5\"\n                        [width]=\"9\"\n                        [iconSvg]=\"layerSettingsExpandedState[layer.title!] ? 'chevron_top' : 'chevron_bottom'\"\n                      ></pry-icon>\n                    </button>\n                    <h5 class=\"a-h5\">{{ layer.title ?? ('@pry.widget.map.layer' | i18n: { index: i + 1 }) }}</h5>\n                  </div>\n                  <button\n                    class=\"o-layer-settings__delete-layer a-btn--icon-only a-tooltip\"\n                    [attr.data-tooltip]=\"'@pry.widget.map.layerSettings.deleteLayer' | i18n\"\n                    data-tooltip-position=\"left\"\n                    (click)=\"deleteLayer(i, layer)\"\n                  >\n                    <pry-icon [height]=\"16\" [width]=\"16\" iconSvg=\"bin_normal\"></pry-icon>\n                  </button>\n                </div>\n                <div *ngIf=\"layerSettingsExpandedState[layer.title!]\" class=\"o-layer-settings__layer-content\">\n                  <div class=\"o-settings__popup__content__fields__content\">\n                    <pry-range\n                      [ngModel]=\"(layer?.opacity ?? 100) + ''\"\n                      (ngModelChange)=\"changeOpacity(layer, $event)\"\n                      labelTranslate=\"@pry.widget.map.opacity\"\n                      min=\"0\"\n                      max=\"100\"\n                    ></pry-range>\n\n                    <fieldset>\n                      <legend class=\"u-visually-hidden\">\n                        {{ '@pry.widget.map.layerOptions' | i18n: { index: i + 1 } }}\n                      </legend>\n                      <div class=\"m-form-label-field\">\n                        <pry-edit-input\n                          label=\"@pry.widget.map.layerTitle\"\n                          editButtonTooltip=\"@pry.widget.map.layerSettings.editLayerTitle\"\n                          (validated)=\"changeTitle($event, layer, group)\"\n                          [ngModel]=\"layer.title\"\n                        ></pry-edit-input>\n                      </div>\n                      <div class=\"m-form-label-field\" *ngIf=\"!['geoserver', 'auto'].includes(layer.type)\">\n                        <label class=\"a-label\" for=\"map_layerType\">{{\n                          '@pry.widget.map.layerType.title' | i18n\n                        }}</label>\n                        <pry-select\n                          (ngModelChange)=\"changeLayerType($event, i)\"\n                          [items]=\"layerTypes\"\n                          [ngModel]=\"layer.type\"\n                          i18nPrefix=\"@pry.widget.map.layerType.\"\n                          id=\"map_layerType\"\n                        ></pry-select>\n                      </div>\n\n                      <div class=\"m-form-label-field\" *ngIf=\"['geoserver', 'wms'].includes(layer.type)\">\n                        <ng-container *ngIf=\"getAsWmsType(layer) as wmslayer\">\n                          <label class=\"a-label\" for=\"map_layerStyle\">{{ '@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                      <div class=\"m-form-label-field\">\n                        <pry-checkbox (ngModelChange)=\"changeFit($event, layer)\" [ngModel]=\"layer.fit\">\n                          {{ '@pry.widget.map.fit' | i18n }}\n                        </pry-checkbox>\n                      </div>\n\n                      <div\n                        *ngIf=\"\n                          layer.type !== 'relation' &&\n                          layer.type !== 'wms' &&\n                          layer.type !== 'wmts' &&\n                          layer.type !== 'geoserver' &&\n                          layer.type !== 'featurelayer' &&\n                          layer.type !== 'vectortile' &&\n                          layer.type !== 'rastertile' &&\n                          layer.type !== 'auto'\n                        \"\n                        class=\"m-form-label-field\"\n                      >\n                        <label class=\"a-label\" for=\"map_classes\">{{ '@pry.widget.map.classes' | i18n }}</label>\n                        <pry-select\n                          (ngModelChange)=\"changeClasses($event, layer)\"\n                          [items]=\"usedClasses$ | async\"\n                          [multiple]=\"true\"\n                          [ngModel]=\"layer.classes\"\n                          bindLabel=\"name\"\n                          bindValue=\"id\"\n                          id=\"map_classes\"\n                        ></pry-select>\n                      </div>\n                    </fieldset>\n                  </div>\n\n                  <fieldset\n                    *ngIf=\"\n                      layer.type !== 'relation' &&\n                      layer.type !== 'wms' &&\n                      layer.type !== 'wmts' &&\n                      layer.type !== 'geoserver' &&\n                      layer.type !== 'featurelayer' &&\n                      layer.type !== 'vectortile' &&\n                      layer.type !== 'rastertile'\n                    \"\n                  >\n                    <legend class=\"u-visually-hidden\">{{ '@pry.widget.map.locationAttr' | i18n }}</legend>\n                    <ng-container\n                      *ngIf=\"\n                        layer\n                          | geometryFieldsFor: { resultSet: resultSet$, classes: layer.classes, type: layer.type }\n                          | async as fields\n                      \"\n                    >\n                      <div\n                        *ngIf=\"\n                          [\n                            'heatmap',\n                            'bubble',\n                            'marker',\n                            'point',\n                            'line',\n                            'polygon',\n                            'multi-line',\n                            'multi-polygon'\n                          ].indexOf(layer.type) >= 0\n                        \"\n                      >\n                        <div class=\"m-form-label-field\">\n                          <label class=\"a-label\" for=\"map_locationAttribute_both\">{{\n                            '@pry.widget.map.locationAttribute.both' | i18n\n                          }}</label>\n                          <pry-select\n                            (ngModelChange)=\"changeLocationAttributes($event, layer)\"\n                            [items]=\"fields\"\n                            [ngModel]=\"layer.attribute\"\n                            bindLabel=\"name\"\n                            bindValue=\"name\"\n                            id=\"map_locationAttribute_both\"\n                          ></pry-select>\n                        </div>\n                      </div>\n\n                      <div *ngIf=\"['heatmap', 'bubble'].indexOf(layer.type) >= 0\">\n                        <div class=\"m-form-label-field\">\n                          <label class=\"a-label\" for=\"map_intensityAttribute\">{{\n                            '@pry.widget.map.intensityAttribute' | i18n\n                          }}</label>\n                          <pry-select\n                            (ngModelChange)=\"changeIntensityAttributes($event, layer)\"\n                            [items]=\"fields\"\n                            [ngModel]=\"layerHasIntensity(layer).intensityAttribute\"\n                            bindLabel=\"name\"\n                            bindValue=\"name\"\n                            id=\"map_intensityAttribute\"\n                          ></pry-select>\n                        </div>\n                      </div>\n                    </ng-container>\n                  </fieldset>\n\n                  <fieldset\n                    *ngIf=\"\n                      layer.type === 'wms' ||\n                      layer.type === 'geoserver' ||\n                      layer.type === 'wmts' ||\n                      layer.type === 'featurelayer' ||\n                      layer.type === 'vectortile' ||\n                      layer.type === 'rastertile'\n                    \"\n                  >\n                    <ng-container *ngIf=\"layer.type !== 'geoserver'\">\n                      <div class=\"m-form-label-field\">\n                        <label class=\"a-label\" for=\"map_wms_url\">{{ '@pry.widget.map.wms.url' | i18n }}</label>\n                        <input\n                          id=\"map_wms_url\"\n                          class=\"a-form-field\"\n                          type=\"text\"\n                          (input)=\"changeUrl($event, layer)\"\n                          [value]=\"layer.url\"\n                        />\n                      </div>\n                    </ng-container>\n\n                    <div class=\"m-form-label-field\" *ngIf=\"layer.type === 'wms' || layer.type === 'wmts'\">\n                      <label class=\"a-label\" for=\"map_wms_paramLayer\">{{\n                        '@pry.widget.map.wms.paramLayer' | i18n\n                      }}</label>\n                      <input\n                        id=\"map_wms_paramLayer\"\n                        class=\"a-form-field\"\n                        type=\"text\"\n                        (input)=\"changeParamLayer($event, layer)\"\n                        [value]=\"layer.paramLayer\"\n                      />\n                    </div>\n\n                    <div class=\"m-form-label-field\" *ngIf=\"layer.type === 'wmts'\">\n                      <label class=\"a-label\" for=\"map_wms_matrixSet\">{{\n                        '@pry.widget.map.wms.matrixSet' | i18n\n                      }}</label>\n                      <input\n                        id=\"map_wms_matrixSet\"\n                        class=\"a-form-field\"\n                        type=\"text\"\n                        (input)=\"changeMatrixSet($event, layer)\"\n                        [value]=\"layer.matrixSet\"\n                      />\n                    </div>\n\n                    <div class=\"m-form-label-field\" *ngIf=\"layer.type === 'wmts'\">\n                      <label class=\"a-label\" for=\"map_wms_style\">{{ '@pry.widget.map.wms.style' | i18n }}</label>\n                      <input\n                        id=\"map_wms_style\"\n                        class=\"a-form-field\"\n                        type=\"text\"\n                        (input)=\"changeParamStyle($event, layer)\"\n                        [value]=\"layer.style\"\n                      />\n                    </div>\n\n                    <div class=\"m-form-label-field\" *ngIf=\"layer.type === 'wms' || layer.type === 'geoserver'\">\n                      <legend class=\"u-visually-hidden\">{{ '@pry.widget.map.tile' | i18n }}</legend>\n                      <pry-checkbox\n                        (ngModelChange)=\"changeParamTiled($event, layer)\"\n                        [ngModel]=\"layer?.paramTiled ?? false\"\n                      >\n                        {{ '@pry.widget.map.wms.paramTiled' | i18n }}\n                      </pry-checkbox>\n                    </div>\n                  </fieldset>\n\n                  <fieldset *ngIf=\"layer.type === 'marker'\">\n                    <legend class=\"u-visually-hidden\">{{ '@pry.widget.map.clustering' | i18n }}</legend>\n                    <div class=\"m-form-label-field\">\n                      <pry-checkbox (ngModelChange)=\"changeClustered(layer, $event)\" [ngModel]=\"layer.clustered\">\n                        {{ '@pry.widget.map.clustered' | i18n }}\n                      </pry-checkbox>\n                    </div>\n                    <div *ngIf=\"layer.clustered\">\n                      <pry-range\n                        [ngModel]=\"layer.clustered\"\n                        (ngModelChange)=\"changeClusterDistance(layer, $event)\"\n                        labelTranslate=\"@pry.widget.map.clusterDistance\"\n                        min=\"1\"\n                        max=\"500\"\n                      ></pry-range>\n                    </div>\n                  </fieldset>\n\n                  <div class=\"m-form-label-field\" *ngIf=\"optionsCopy.slide ?? false\">\n                    <label class=\"a-label\" for=\"slide_select\">{{ '@pry.widget.map.slide.title' | i18n }}</label>\n                    <pry-select\n                      (ngModelChange)=\"changeSlide($event, layer)\"\n                      [items]=\"slides\"\n                      [ngModel]=\"layer.slide ?? 'all'\"\n                      bindLabel=\"label\"\n                      bindValue=\"id\"\n                      id=\"slide_select\"\n                    ></pry-select>\n                  </div>\n\n                  <div class=\"m-form-label-field\" *ngIf=\"optionsCopy.attributions\">\n                    <label class=\"a-label\" for=\"attribution\">{{ '@pry.widget.map.attribution' | i18n }}</label>\n                    <input\n                      id=\"attribution\"\n                      class=\"a-form-field\"\n                      type=\"text\"\n                      (input)=\"changeAttribution($event, layer)\"\n                      [value]=\"layer.attribution ? layer.attribution : ''\"\n                    />\n                  </div>\n                  <div class=\"m-form-label-field\">\n                    <label class=\"a-label\" for=\"map_layerType\">{{ '@pry.widget.map.order' | i18n }}</label>\n                    <input\n                      id=\"map_layer_order\"\n                      class=\"a-form-field\"\n                      type=\"number\"\n                      (input)=\"updateOrder($event, layer)\"\n                      [value]=\"layer.order ?? -1\"\n                    />\n                  </div>\n                </div>\n              </div>\n            </ng-container>\n          </div>\n        </div>\n      </div>\n    </pry-settings>\n  </pry-widget-header>\n\n  <div\n    class=\"m-btn-group -map-selection-choice -vertical\"\n    [class.-with-header]=\"displayHeader$ | async\"\n    [class.-closed]=\"!(actionMenuOpen$ | async)\"\n  >\n    <div class=\"-vertical\">\n      <ng-container *ngFor=\"let action of basicActions$ | async\">\n        <button\n          type=\"button\"\n          class=\"a-btn a-btn--icon-only a-tooltip a-tooltip--{{ action }}\"\n          (click)=\"changeSelection(action)\"\n          [attr.data-tooltip]=\"'@pry.widget.map.' + action | i18n\"\n          data-tooltip-position=\"right\"\n        >\n          <pry-icon [iconSvg]=\"action\"></pry-icon>\n          <span class=\"u-visually-hidden\">{{ '@pry.widget.map.' + action | i18n }}</span>\n        </button>\n      </ng-container>\n    </div>\n\n    <button\n      type=\"button\"\n      class=\"a-btn a-btn--icon-only a-tooltip -map-toggle\"\n      id=\"open_menu\"\n      [attr.aria-expanded]=\"actionMenuOpen$ | async\"\n      aria-controls=\"export_type\"\n      aria-haspopup=\"menu\"\n      (click)=\"toggleMenu()\"\n    >\n      <pry-icon\n        [iconSvg]=\"(actionMenuOpen$ | async) ? 'chevron_top' : 'chevron_bottom'\"\n        [width]=\"12\"\n        [height]=\"24\"\n      ></pry-icon>\n      <span class=\"u-visually-hidden\">{{ '@pry.widget.map.open' | i18n }}</span>\n    </button>\n  </div>\n\n  <div class=\"m-btn-group -map-selection-choice -map-export\" [class.-with-header]=\"displayHeader$ | async\">\n    <button\n      type=\"button\"\n      class=\"a-btn a-btn--icon-only a-tooltip\"\n      id=\"export_card\"\n      aria-expanded=\"false\"\n      aria-controls=\"export_type\"\n      aria-haspopup=\"menu\"\n      [attr.data-tooltip]=\"'@pry.widget.map.export' | i18n\"\n      data-tooltip-position=\"right\"\n      (click)=\"export()\"\n    >\n      <pry-icon iconSvg=\"file_download\"></pry-icon>\n      <span class=\"u-visually-hidden\">{{ '@pry.widget.map.export' | i18n }}</span>\n    </button>\n  </div>\n\n  <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 m-map-layer-action__container--layers\" [class.-hidden]=\"!layersTabOpen\">\n      <h4 class=\"a-h4\">{{ '@pry.widget.map.layerSettings.selectLayers' | i18n }}</h4>\n      <ng-container *ngFor=\"let group of layerGroups$ | async\">\n        <div class=\"m-map-layer-action__title m-layer-switcher__group-title\">\n          <h5 class=\"a-h5\">\n            {{ group.name === DEFAULT_LAYER_GROUP ? ('@pry.widget.map.noGroup' | i18n) : group.name }}\n          </h5>\n        </div>\n        <ng-container *ngIf=\"!group.singleLayer; else singleLayer\">\n          <ng-container *ngFor=\"let layer of optionsCopy.layers; let index = index\">\n            <ng-container *ngIf=\"layer.group === group.name\">\n              <div class=\"m-map-layer-action__title m-layer-switcher__title\" [class.-hidden]=\"!layersTabOpen\">\n                <pry-checkbox\n                  [ngModel]=\"isLayerVisible(layer, group)\"\n                  (change)=\"changeVisibility(group, layer)\"\n                  id=\"checkbox-layer-{{ index }}\"\n                ></pry-checkbox>\n                <label class=\"a-label\" for=\"checkbox-layer-{{ index }}\">\n                  {{ layer.title ?? ('@pry.widget.map.missingTitle' | i18n) }}\n                </label>\n              </div>\n            </ng-container>\n          </ng-container>\n        </ng-container>\n        <ng-template #singleLayer>\n          <div class=\"m-layer-switcher--radios\">\n            <div class=\"m-map-layer-action__title m-layer-switcher__title\" [class.-hidden]=\"!layersTabOpen\">\n              <input\n                type=\"radio\"\n                [name]=\"group.name\"\n                id=\"radio-no-layer\"\n                [ngModel]=\"group.visibleLayers.length\"\n                [value]=\"0\"\n                (change)=\"changeVisibility(group)\"\n              />\n              <label class=\"a-label\" for=\"radio-no-layer\">{{ '@pry.widget.map.layerSettings.noLayer' | i18n }}</label>\n            </div>\n            <ng-container *ngFor=\"let layer of optionsCopy.layers; let index = index\">\n              <ng-container *ngIf=\"layer.group === group.name\">\n                <div class=\"m-map-layer-action__title m-layer-switcher__title\" [class.-hidden]=\"!layersTabOpen\">\n                  <input\n                    type=\"radio\"\n                    [name]=\"group.name\"\n                    [id]=\"'radio-layer-' + index\"\n                    [ngModel]=\"group.visibleLayers[0]\"\n                    [value]=\"layer.title\"\n                    (change)=\"changeVisibility(group, layer)\"\n                  />\n                  <label class=\"a-label\" for=\"radio-layer-{{ index }}\">{{ layer.title ?? 'MISSING TITLE' }}</label>\n                </div>\n              </ng-container>\n            </ng-container>\n          </div>\n        </ng-template>\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      <h4 class=\"a-h4\">{{ '@pry.widget.map.legendsTitle' | i18n }}</h4>\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          <h5 class=\"a-h5\">{{ geoLayer.title }}</h5>\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: () => [{ 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
                 }, {
@@ -2398,6 +2539,7 @@ const enTranslations = {
                 layer: 'Layer n°{{index}}',
                 layerOptions: 'Layer options',
                 layerTitle: 'Layer Label',
+                order: 'Order of the layer',
                 layerType: {
                     title: 'Type',
                     heatmap: 'Heatmap',
@@ -2474,7 +2616,26 @@ const enTranslations = {
                 zoomIn: 'Zoom In',
                 zoomOut: 'Zoom Out',
                 slideTitle: 'Displayed data',
-                layerLoadError: 'Error loading in layer data'
+                layerLoadError: 'Error loading in layer data',
+                layerSettings: {
+                    title: 'Configure layers',
+                    addLayerGroup: 'Add layer group',
+                    layerGroupName: 'Layer group title',
+                    optionalColon: '',
+                    singleLayer: 'Single layer selection',
+                    multipleLayer: 'Multi layer selection',
+                    unfoldAll: 'Unfold all layers',
+                    foldAll: 'Fold all layers',
+                    noLayer: 'No layer',
+                    selectLayers: 'Select layers to display',
+                    group: 'Group',
+                    deleteGroup: 'Delete group',
+                    deleteLayer: 'Delete layer',
+                    editLayerTitle: 'Edit layer title',
+                    editGroupName: 'Edit group name'
+                },
+                missingTitle: 'Missing title',
+                noGroup: 'Without group'
             }
         }
     }
@@ -2495,6 +2656,7 @@ const frTranslations = {
                 layer: 'Couche n°{{index}}',
                 layerOptions: 'Options de la couche',
                 layerTitle: 'Libellé de la couche',
+                order: 'Ordre de la couche',
                 layerType: {
                     title: 'Type',
                     heatmap: 'Chaleur',
@@ -2571,7 +2733,27 @@ const frTranslations = {
                 zoomIn: 'Zoomer',
                 zoomOut: 'Dézoomer',
                 slideTitle: 'Données affichées',
-                layerLoadError: 'Erreur de chargement de la couche'
+                layerLoadError: 'Erreur de chargement de la couche',
+                layerSettings: {
+                    title: 'Paramétrer les couches :',
+                    addLayerGroup: 'Ajouter un groupe de couche',
+                    layerGroupName: 'Titre du groupe de couche',
+                    optionalColon: ' :',
+                    singleLayer: 'Mono sélection',
+                    multipleLayer: 'Multi sélection',
+                    unfoldAll: 'Tout déplier',
+                    foldAll: 'Tout réplier',
+                    noLayer: 'Aucune couche',
+                    selectLayers: 'Sélectionnez les couches à afficher :',
+                    group: 'Groupe',
+                    deleteGroup: 'Supprimer le groupe',
+                    deleteLayer: 'Supprimer la couche',
+                    confirmDelete: 'Est-ce que vous êtes sûr de vouloir supprimer ce groupe de couches ?',
+                    editLayerTitle: 'Modifier le titre de la couche',
+                    editGroupName: 'Modifier le nom du groupe'
+                },
+                missingTitle: 'Titre manquant',
+                noGroup: 'Sans groupe'
             }
         }
     }
@@ -2600,7 +2782,9 @@ class WidgetMapModule extends BaseWidgetModule {
             PryToggleModule,
             PryOverlayModule,
             PryI18nModule,
-            PryRangeModule], exports: [WidgetMapComponent, GeometryFieldsForPipe, PryWidgetMapCssComponent, WidgetMapLegendUrlPipe] }); }
+            PryRangeModule,
+            PryEditInputModule,
+            DragDropModule], exports: [WidgetMapComponent, GeometryFieldsForPipe, PryWidgetMapCssComponent, WidgetMapLegendUrlPipe] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: WidgetMapModule, imports: [CommonModule,
             FormsModule,
             OverlayModule,
@@ -2612,7 +2796,9 @@ class WidgetMapModule extends BaseWidgetModule {
             PryToggleModule,
             PryOverlayModule,
             PryI18nModule,
-            PryRangeModule] }); }
+            PryRangeModule,
+            PryEditInputModule,
+            DragDropModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: WidgetMapModule, decorators: [{
             type: NgModule,
@@ -2630,7 +2816,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImpor
                         PryToggleModule,
                         PryOverlayModule,
                         PryI18nModule,
-                        PryRangeModule
+                        PryRangeModule,
+                        PryEditInputModule,
+                        DragDropModule
                     ],
                     exports: [...components]
                 }]
@@ -2640,5 +2828,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { CqlUtils, GeometryFieldsForPipe, InteractionManager, LayerSlider, NON_MANDATORY_FIT_LAYER_TYPES, PryWidgetMapCssComponent, SelectionInteraction, TOOLTIP_PADDING, WidgetMapComponent, WidgetMapLayerService, WidgetMapLegendUrlPipe, WidgetMapModule, WidgetMapUtils, XMLUtils };
+export { CqlUtils, DEFAULT_LAYER_GROUP, GeometryFieldsForPipe, InteractionManager, LayerSlider, NON_MANDATORY_FIT_LAYER_TYPES, PryWidgetMapCssComponent, SelectionInteraction, TOOLTIP_PADDING, WidgetMapComponent, WidgetMapLayerService, WidgetMapLegendUrlPipe, WidgetMapModule, WidgetMapUtils, XMLUtils };
 //# sourceMappingURL=provoly-dashboard-widgets-widget-map.mjs.map