@provoly/dashboard 0.13.4 → 0.13.6

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

@@ -21,7 +21,7 @@ import { fromLonLat, toLonLat, get, transform } from 'ol/proj';
 import { register } from 'ol/proj/proj4';
 import { Vector, TileWMS, WMTS, XYZ, Cluster } from 'ol/source';
 import proj4 from 'proj4';
-import { map, combineLatest, filter, BehaviorSubject, startWith, debounceTime, delay, mergeMap, of, from, distinctUntilChanged } from 'rxjs';
+import { map, combineLatest, filter, catchError, throwError, of, BehaviorSubject, startWith, debounceTime, delay, mergeMap, from, distinctUntilChanged } from 'rxjs';
 import LayerSwitcher from 'ol-layerswitcher';
 import { Control, ScaleLine } from 'ol/control';
 import BaseEvent from 'ol/events/Event';
@@ -42,6 +42,8 @@ import tokml from 'geojson-to-kml';
 import * as i1 from '@ngrx/store';
 import VectorTile from 'ol/source/VectorTile';
 import WMTSTileGrid from 'ol/tilegrid/WMTS';
+import * as i1$1 from '@angular/common/http';
+import { HttpHeaders } from '@angular/common/http';
 
 class AddressSearchedEvent extends BaseEvent {
     // @ts-ignore
@@ -1155,17 +1157,101 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImpor
                 }]
         }], ctorParameters: function () { return [{ type: i1.Store }]; } });
 
+class XMLUtils {
+    static find(childs, name) {
+        for (let i = 0; i < childs.length; i++) {
+            const node = childs[i];
+            if (node.nodeName === name) {
+                return node;
+            }
+        }
+        return null;
+    }
+    static findAll(childs, name) {
+        const result = [];
+        for (let i = 0; i < childs.length; i++) {
+            const node = childs[i];
+            if (node.nodeName === name) {
+                result.push(node);
+            }
+        }
+        return result;
+    }
+    static findWith(childs, attribute, value) {
+        for (let i = 0; i < childs.length; i++) {
+            const node = childs[i];
+            const attrNode = XMLUtils.find(node.childNodes, attribute);
+            if (attrNode?.textContent === value) {
+                return node;
+            }
+        }
+        return null;
+    }
+}
+
 class WidgetMapLegendUrlPipe {
+    constructor(httpClient) {
+        this.httpClient = httpClient;
+        this.parser = new DOMParser();
+    }
     transform(geoLayer) {
         if (geoLayer && geoLayer.url) {
             const layerUrlWithQmark = geoLayer.url.indexOf('?') === -1 ? geoLayer.url + '?' : geoLayer.url;
             const layerUrlWithService = layerUrlWithQmark.indexOf('&SERVICE=') === -1 ? layerUrlWithQmark + '&SERVICE=WMS' : layerUrlWithQmark;
             const layerUrlWithVersion = layerUrlWithService.indexOf('&VERSION=') === -1 ? layerUrlWithService + '&VERSION=1.3.0' : layerUrlWithService;
-            return `${layerUrlWithVersion}&REQUEST=GetLegendGraphic&format=image%2Fpng&LAYER=${geoLayer.paramLayer}&LEGEND_OPTIONS=fontName:Ubuntu`;
+            return this.httpClient
+                .get(`${layerUrlWithVersion}&REQUEST=GetCapabilities`, {
+                headers: new HttpHeaders({
+                    Accept: 'text/html, application/xhtml+xml, */*',
+                    'Content-Type': 'application/x-www-form-urlencoded'
+                }),
+                responseType: 'text'
+            })
+                .pipe(map((response) => {
+                const doc = this.parser.parseFromString(response, 'application/xml');
+                const errorNode = doc.querySelector('parsererror');
+                if (errorNode) {
+                    return '';
+                }
+                else {
+                    const WMSCapability = XMLUtils.find(doc.childNodes, 'WMS_Capabilities');
+                    if (WMSCapability) {
+                        const Capabilities = XMLUtils.find(WMSCapability.childNodes, 'Capability');
+                        if (Capabilities) {
+                            const Layer = XMLUtils.find(Capabilities.childNodes, 'Layer');
+                            if (Layer) {
+                                let matchingLayer = XMLUtils.findWith(Layer.childNodes, 'Name', geoLayer.paramLayer);
+                                const split = geoLayer.paramLayer.split(':');
+                                if (!matchingLayer && split.length >= 2) {
+                                    // Try again, splitting on ":" in the name to ignore namespace if present
+                                    matchingLayer = XMLUtils.findWith(Layer.childNodes, 'Name', split[split.length - 1]);
+                                }
+                                if (matchingLayer) {
+                                    const matchingStyle = XMLUtils.find(matchingLayer.childNodes, 'Style');
+                                    if (matchingStyle) {
+                                        const legendUrl = XMLUtils.find(matchingStyle.childNodes, 'LegendURL');
+                                        if (legendUrl) {
+                                            const resource = XMLUtils.find(legendUrl.childNodes, 'OnlineResource');
+                                            if (resource) {
+                                                // @ts-ignore
+                                                return resource.getAttribute('xlink:href');
+                                            }
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+                return '';
+            }), catchError((err) => {
+                console.error(err);
+                return throwError(err);
+            }));
         }
-        return '';
+        return of('');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: WidgetMapLegendUrlPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: WidgetMapLegendUrlPipe, deps: [{ token: i1$1.HttpClient }], target: i0.ɵɵFactoryTarget.Pipe }); }
     static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.1.6", ngImport: i0, type: WidgetMapLegendUrlPipe, name: "legendUrl" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: WidgetMapLegendUrlPipe, decorators: [{
@@ -1173,7 +1259,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImpor
             args: [{
                     name: 'legendUrl'
                 }]
-        }] });
+        }], ctorParameters: function () { return [{ type: i1$1.HttpClient }]; } });
 
 class WidgetMapComponent extends DataWidgetComponent {
     constructor(store, snackBar, translateService, tooltipFactoryService, geocodingService, overlay, viewContainerRef, symbolService, injector, widgetMapLayerService, el) {
@@ -1816,11 +1902,11 @@ class WidgetMapComponent extends DataWidgetComponent {
         this.interactionManager.layerSwitchControl?.hidePanel();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: WidgetMapComponent, deps: [{ token: i1.Store }, { token: i2.PrySnackbarService }, { token: i2.PryI18nService }, { token: i2.TooltipFactoryService }, { token: i2.GeocodingService }, { token: i3.Overlay }, { token: i0.ViewContainerRef }, { token: i2.SymbolService }, { token: i0.Injector }, { token: WidgetMapLayerService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: WidgetMapComponent, selector: "pry-widget-map", viewQueries: [{ propertyName: "mapRef", first: true, predicate: ["map"], 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: "address", first: true, predicate: ["address"], 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          [itemsAsOption]=\"true\"\n          [items]=\"styles$ | async\"\n          [ngModel]=\"optionsCopy.style\"\n          bindLabel=\"label\"\n          bindValue=\"identifier\"\n          id=\"map_style\"\n          class=\"a-pry-select\"\n        ></pry-select>\n      </div>\n\n      <pry-checkbox (ngModelChange)=\"changeFit($event)\" [ngModel]=\"optionsCopy.fit ?? false\">\n        {{ '@pry.widget.map.fit' | 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      <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=\"layer.type !== 'geoserver'\">\n              <label class=\"a-label\" for=\"map_layerType\">{{ '@pry.widget.map.layerType.title' | i18n }}</label>\n              <pry-select\n                (ngModelChange)=\"changeLayerType($event, i)\"\n                [bindData]=\"true\"\n                [itemsAsOption]=\"true\"\n                [items]=\"layerTypes\"\n                [labelTranslate]=\"true\"\n                [ngModel]=\"layer.type\"\n                baseTranslate=\"@pry.widget.map.layerType.\"\n                class=\"a-pry-select\"\n                id=\"map_layerType\"\n              ></pry-select>\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              \"\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                [itemsAsOption]=\"true\"\n                [items]=\"classes$ | async\"\n                [multiple]=\"true\"\n                [ngModel]=\"layer.classes\"\n                bindLabel=\"name\"\n                bindValue=\"id\"\n                class=\"a-pry-select\"\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                  [itemsAsOption]=\"true\"\n                  [items]=\"fields\"\n                  [ngModel]=\"layer.attribute\"\n                  bindLabel=\"name\"\n                  bindValue=\"name\"\n                  id=\"map_locationAttribute_both\"\n                  class=\"a-pry-select\"\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                  [itemsAsOption]=\"true\"\n                  [items]=\"fields\"\n                  [ngModel]=\"layerHasIntensity(layer).intensityAttribute\"\n                  bindLabel=\"name\"\n                  bindValue=\"name\"\n                  id=\"map_intensityAttribute\"\n                  class=\"a-pry-select\"\n                ></pry-select>\n              </div>\n            </div>\n          </ng-container>\n        </fieldset>\n\n        <fieldset\n          *ngIf=\"\n            layer.type === 'wms' ||\n            layer.type === 'wmts' ||\n            layer.type === 'featurelayer' ||\n            layer.type === 'vectortile' ||\n            layer.type === 'rastertile'\n          \"\n        >\n          <legend class=\"u-visually-hidden\">{{ '@pry.widget.map.tile' | i18n }}</legend>\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\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'\">\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.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)\"\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 class=\"m-btn-group -selection-choice\" [style.transform]=\"bottomLeft$ | async\">\n    <ng-container *ngFor=\"let action of basicActions$ | async\">\n      <button\n        type=\"button\"\n        class=\"a-btn a-btn--icon-only\"\n        (click)=\"interactionManager.selectionInteraction.changeSelection(action)\"\n        [class.-selected]=\"interactionManager.selectionInteraction.selectionType === action\"\n        [pryTooltip]=\"infoTooltipAction\"\n        pryTooltipPosition=\"bottom\"\n        aria-describedby=\"infoTooltipAction\"\n        [pryTooltipContext]=\"{ action: action }\"\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\n    <button\n      type=\"button\"\n      class=\"a-btn a-btn--icon-only\"\n      id=\"export_card\"\n      aria-expanded=\"false\"\n      aria-controls=\"export_type\"\n      aria-haspopup=\"menu\"\n      [pryTooltip]=\"infoTooltipDown\"\n      pryTooltipPosition=\"bottom\"\n      aria-describedby=\"infoTooltipDown_widgetMap\"\n      *ngIf=\"(actions$ | async)?.includes('export')\"\n    >\n      <pry-icon iconSvg=\"file_download\" (click)=\"displayExportType($event)\"></pry-icon>\n      <span class=\"u-visually-hidden\">{{ '@pry.widget.map.export' | i18n }}</span>\n    </button>\n\n    <button\n      type=\"button\"\n      class=\"a-btn a-btn--icon-only\"\n      (click)=\"uploader.click()\"\n      [pryTooltip]=\"infoTooltipLoad\"\n      aria-describedby=\"infoTooltipLoad_widgetMap\"\n      pryTooltipPosition=\"bottom\"\n      *ngIf=\"(actions$ | async)?.includes('upload')\"\n    >\n      <pry-icon iconSvg=\"file_upload\"></pry-icon>\n      <span class=\"u-visually-hidden\">{{ '@pry.widget.map.import' | i18n }}</span>\n    </button>\n    <input hidden type=\"file\" #uploader (change)=\"import($event)\" />\n  </div>\n\n  <div\n    class=\"ol-control m-layer-legend\"\n    *ngIf=\"((legendLayers$ | async)?.length ?? 0) > 0\"\n    [style.top.px]=\"legendTop$ | async\"\n  >\n    <button class=\"m-layer-legend__toggle\" (click)=\"toggleLegendWindow()\">\n      <pry-icon iconSvg=\"legend\" [width]=\"22\" [height]=\"22\"></pry-icon>\n    </button>\n    <ng-container *ngFor=\"let geoLayer of legendLayers$ | async; let index = index\">\n      <div class=\"m-layer-legend__title\" [class.-hidden]=\"!legendTabOpen\">\n        {{ geoLayer.title }}\n        <ng-container *ngIf=\"isLayerRendered(geoLayer)\">\n          <button class=\"m-layer-legend__toggle\" (click)=\"toggleLegend(index)\">\n            <pry-icon\n              [iconSvg]=\"legendTab === index ? 'chevron_top' : 'chevron_bottom'\"\n              [width]=\"22\"\n              [height]=\"22\"\n            ></pry-icon>\n          </button>\n        </ng-container>\n        <ng-container *ngIf=\"!isLayerRendered(geoLayer)\">\n          <pry-icon [iconSvg]=\"'close'\" [width]=\"22\" [height]=\"22\"></pry-icon>\n        </ng-container>\n      </div>\n      <div\n        class=\"m-layer-legend__image\"\n        [class.-hidden]=\"!legendTabOpen || legendTab !== index || !isLayerRendered(geoLayer)\"\n        [style.max-height.px]=\"legendHeight$ | async\"\n      >\n        <ng-container *ngIf=\"!imageNotProvided[index] && (geoLayer | legendUrl)\">\n          <img\n            [src]=\"geoLayer | legendUrl\"\n            [alt]=\"'@pry.widget.map.legend' | i18n : { layer: geoLayer.title }\"\n            (error)=\"imageNotProvided[index] = true\"\n          />\n        </ng-container>\n        <ng-container *ngIf=\"imageNotProvided[index]\">\n          <p class=\"m-layer-legend__error\">{{ '@pry.widget.map.legendNotProvided' | i18n }}</p>\n        </ng-container>\n      </div>\n    </ng-container>\n  </div>\n\n  <div [style.height.px]=\"height$ | async\" class=\"o-map-wrapper\">\n    <div class=\"o-map\">\n      <div #map id=\"map\"></div>\n    </div>\n  </div>\n\n  <ng-template #infoTooltipAction let-action=\"action\">\n    <div class=\"m-tooltip\" role=\"tooltip\" id=\"infoTooltipAction\" aria-hidden=\"true\">\n      <span class=\"m-tooltip__text\">{{ '@pry.widget.map.' + action | i18n }}</span>\n    </div>\n  </ng-template>\n\n  <ng-template #infoTooltipDown>\n    <div class=\"m-tooltip\" role=\"tooltip\" id=\"infoTooltipDown_widgetMap\" aria-hidden=\"true\">\n      <span class=\"m-tooltip__text\">{{ '@pry.widget.map.export' | i18n }}</span>\n    </div>\n  </ng-template>\n\n  <ng-template #infoTooltipLoad>\n    <div class=\"m-tooltip\" role=\"tooltip\" id=\"infoTooltipLoad_widgetMap\" aria-hidden=\"true\">\n      <span class=\"m-tooltip__text\">{{ '@pry.widget.map.import' | i18n }}</span>\n    </div>\n  </ng-template>\n\n  <div #popup class=\"m-tooltip m-tooltip--popup\" [hidden]=\"true\" role=\"tooltip\">\n    <div #popupContent></div>\n  </div>\n  <div\n    #address\n    class=\"m-tooltip m-tooltip--address tooltip-address\"\n    [style.display]=\"'none'\"\n    (click)=\"hideAddress()\"\n  ></div>\n  <ng-template\n    #exportTypeTemplate\n    class=\"m-context-menu-wrapper\"\n    id=\"export_type\"\n    aria-hidden=\"true\"\n    aria-label=\"TODO-access\"\n    aria-labelledby=\"export_card\"\n  >\n    <div class=\"m-context-menu\">\n      <ul class=\"m-context-menu__list\">\n        <li class=\"m-context-menu__list__item\">\n          <button type=\"button\" class=\"a-btn -link-like\" (click)=\"export('png')\">\n            <span class=\"u-visually-hidden\">{{ '@pry.action.exportAsFormat' | i18n }} </span> PNG\n          </button>\n        </li>\n        <li class=\"m-context-menu__list__item\">\n          <button type=\"button\" class=\"a-btn -link-like\" (click)=\"export('kml')\">\n            <span class=\"u-visually-hidden\">{{ '@pry.action.exportAsFormat' | i18n }} </span> KML\n          </button>\n        </li>\n        <li class=\"m-context-menu__list__item\">\n          <button type=\"button\" class=\"a-btn -link-like\" (click)=\"export('geoJSON')\">\n            <span class=\"u-visually-hidden\">{{ '@pry.action.exportAsFormat' | i18n }} </span> GeoJSON\n          </button>\n        </li>\n      </ul>\n    </div>\n  </ng-template>\n</div>\n", dependencies: [{ kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.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: ["saveTriggered", "changeTitle"] }, { kind: "component", type: i2.PryWidgetHeaderComponent, selector: "pry-widget-header", inputs: ["manifest", "additionalOptions", "headerOptions", "displayCount", "datasourceIds", "widgetIndex"], outputs: ["manifestModified"] }, { kind: "component", type: i2.PrySelectComponent, selector: "pry-select", inputs: ["labelTranslate", "baseTranslate", "translationFn", "translationFnArgs", "clearable", "multiple", "multipleClearRight", "placeholder", "isForm", "required", "name", "readonly", "items", "itemsAsOption", "bindData", "bindValue", "bindLabel", "bindIcon", "iconSize", "templateLabel", "templateOption", "autocomplete"] }, { kind: "component", type: i2.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "component", type: i7.PryCheckboxComponent, selector: "pry-checkbox", inputs: ["circle"] }, { kind: "directive", type: i2.PryTooltipDirective, selector: "[pryTooltip]", inputs: ["pryTooltip", "styleReversed", "pryTooltipContext", "pryTooltipPosition", "pryTooltipShowDelay"] }, { 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: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.I18nPipe, name: "i18n" }, { kind: "pipe", type: GeometryFieldsForPipe, name: "geometryFieldsFor" }, { kind: "pipe", type: WidgetMapLegendUrlPipe, name: "legendUrl" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: WidgetMapComponent, selector: "pry-widget-map", viewQueries: [{ propertyName: "mapRef", first: true, predicate: ["map"], 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: "address", first: true, predicate: ["address"], 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          [itemsAsOption]=\"true\"\n          [items]=\"styles$ | async\"\n          [ngModel]=\"optionsCopy.style\"\n          bindLabel=\"label\"\n          bindValue=\"identifier\"\n          id=\"map_style\"\n          class=\"a-pry-select\"\n        ></pry-select>\n      </div>\n\n      <pry-checkbox (ngModelChange)=\"changeFit($event)\" [ngModel]=\"optionsCopy.fit ?? false\">\n        {{ '@pry.widget.map.fit' | 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      <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=\"layer.type !== 'geoserver'\">\n              <label class=\"a-label\" for=\"map_layerType\">{{ '@pry.widget.map.layerType.title' | i18n }}</label>\n              <pry-select\n                (ngModelChange)=\"changeLayerType($event, i)\"\n                [bindData]=\"true\"\n                [itemsAsOption]=\"true\"\n                [items]=\"layerTypes\"\n                [labelTranslate]=\"true\"\n                [ngModel]=\"layer.type\"\n                baseTranslate=\"@pry.widget.map.layerType.\"\n                class=\"a-pry-select\"\n                id=\"map_layerType\"\n              ></pry-select>\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              \"\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                [itemsAsOption]=\"true\"\n                [items]=\"classes$ | async\"\n                [multiple]=\"true\"\n                [ngModel]=\"layer.classes\"\n                bindLabel=\"name\"\n                bindValue=\"id\"\n                class=\"a-pry-select\"\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                  [itemsAsOption]=\"true\"\n                  [items]=\"fields\"\n                  [ngModel]=\"layer.attribute\"\n                  bindLabel=\"name\"\n                  bindValue=\"name\"\n                  id=\"map_locationAttribute_both\"\n                  class=\"a-pry-select\"\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                  [itemsAsOption]=\"true\"\n                  [items]=\"fields\"\n                  [ngModel]=\"layerHasIntensity(layer).intensityAttribute\"\n                  bindLabel=\"name\"\n                  bindValue=\"name\"\n                  id=\"map_intensityAttribute\"\n                  class=\"a-pry-select\"\n                ></pry-select>\n              </div>\n            </div>\n          </ng-container>\n        </fieldset>\n\n        <fieldset\n          *ngIf=\"\n            layer.type === 'wms' ||\n            layer.type === 'wmts' ||\n            layer.type === 'featurelayer' ||\n            layer.type === 'vectortile' ||\n            layer.type === 'rastertile'\n          \"\n        >\n          <legend class=\"u-visually-hidden\">{{ '@pry.widget.map.tile' | i18n }}</legend>\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\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'\">\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.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)\"\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 class=\"m-btn-group -selection-choice\" [style.transform]=\"bottomLeft$ | async\">\n    <ng-container *ngFor=\"let action of basicActions$ | async\">\n      <button\n        type=\"button\"\n        class=\"a-btn a-btn--icon-only\"\n        (click)=\"interactionManager.selectionInteraction.changeSelection(action)\"\n        [class.-selected]=\"interactionManager.selectionInteraction.selectionType === action\"\n        [pryTooltip]=\"infoTooltipAction\"\n        pryTooltipPosition=\"bottom\"\n        aria-describedby=\"infoTooltipAction\"\n        [pryTooltipContext]=\"{ action: action }\"\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\n    <button\n      type=\"button\"\n      class=\"a-btn a-btn--icon-only\"\n      id=\"export_card\"\n      aria-expanded=\"false\"\n      aria-controls=\"export_type\"\n      aria-haspopup=\"menu\"\n      [pryTooltip]=\"infoTooltipDown\"\n      pryTooltipPosition=\"bottom\"\n      aria-describedby=\"infoTooltipDown_widgetMap\"\n      *ngIf=\"(actions$ | async)?.includes('export')\"\n    >\n      <pry-icon iconSvg=\"file_download\" (click)=\"displayExportType($event)\"></pry-icon>\n      <span class=\"u-visually-hidden\">{{ '@pry.widget.map.export' | i18n }}</span>\n    </button>\n\n    <button\n      type=\"button\"\n      class=\"a-btn a-btn--icon-only\"\n      (click)=\"uploader.click()\"\n      [pryTooltip]=\"infoTooltipLoad\"\n      aria-describedby=\"infoTooltipLoad_widgetMap\"\n      pryTooltipPosition=\"bottom\"\n      *ngIf=\"(actions$ | async)?.includes('upload')\"\n    >\n      <pry-icon iconSvg=\"file_upload\"></pry-icon>\n      <span class=\"u-visually-hidden\">{{ '@pry.widget.map.import' | i18n }}</span>\n    </button>\n    <input hidden type=\"file\" #uploader (change)=\"import($event)\" />\n  </div>\n\n  <div\n    class=\"ol-control m-layer-legend\"\n    *ngIf=\"((legendLayers$ | async)?.length ?? 0) > 0\"\n    [style.top.px]=\"legendTop$ | async\"\n  >\n    <button class=\"m-layer-legend__toggle\" (click)=\"toggleLegendWindow()\">\n      <pry-icon iconSvg=\"legend\" [width]=\"22\" [height]=\"22\"></pry-icon>\n    </button>\n    <ng-container *ngFor=\"let geoLayer of legendLayers$ | async; let index = index\">\n      <div class=\"m-layer-legend__title\" [class.-hidden]=\"!legendTabOpen\">\n        {{ geoLayer.title }}\n        <ng-container *ngIf=\"isLayerRendered(geoLayer)\">\n          <button class=\"m-layer-legend__toggle\" (click)=\"toggleLegend(index)\">\n            <pry-icon\n              [iconSvg]=\"legendTab === index ? 'chevron_top' : 'chevron_bottom'\"\n              [width]=\"22\"\n              [height]=\"22\"\n            ></pry-icon>\n          </button>\n        </ng-container>\n        <ng-container *ngIf=\"!isLayerRendered(geoLayer)\">\n          <pry-icon [iconSvg]=\"'close'\" [width]=\"22\" [height]=\"22\"></pry-icon>\n        </ng-container>\n      </div>\n      <div\n        class=\"m-layer-legend__image\"\n        [class.-hidden]=\"!legendTabOpen || legendTab !== index || !isLayerRendered(geoLayer)\"\n        [style.max-height.px]=\"legendHeight$ | async\"\n      >\n        <ng-container *ngIf=\"geoLayer | legendUrl | async as url\">\n          <img\n            [src]=\"url\"\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 | async)\">\n          <p class=\"m-layer-legend__error\">{{ '@pry.widget.map.legendNotProvided' | i18n }}</p>\n        </ng-container>\n      </div>\n    </ng-container>\n  </div>\n\n  <div [style.height.px]=\"height$ | async\" class=\"o-map-wrapper\">\n    <div class=\"o-map\">\n      <div #map id=\"map\"></div>\n    </div>\n  </div>\n\n  <ng-template #infoTooltipAction let-action=\"action\">\n    <div class=\"m-tooltip\" role=\"tooltip\" id=\"infoTooltipAction\" aria-hidden=\"true\">\n      <span class=\"m-tooltip__text\">{{ '@pry.widget.map.' + action | i18n }}</span>\n    </div>\n  </ng-template>\n\n  <ng-template #infoTooltipDown>\n    <div class=\"m-tooltip\" role=\"tooltip\" id=\"infoTooltipDown_widgetMap\" aria-hidden=\"true\">\n      <span class=\"m-tooltip__text\">{{ '@pry.widget.map.export' | i18n }}</span>\n    </div>\n  </ng-template>\n\n  <ng-template #infoTooltipLoad>\n    <div class=\"m-tooltip\" role=\"tooltip\" id=\"infoTooltipLoad_widgetMap\" aria-hidden=\"true\">\n      <span class=\"m-tooltip__text\">{{ '@pry.widget.map.import' | i18n }}</span>\n    </div>\n  </ng-template>\n\n  <div #popup class=\"m-tooltip m-tooltip--popup\" [hidden]=\"true\" role=\"tooltip\">\n    <div #popupContent></div>\n  </div>\n  <div\n    #address\n    class=\"m-tooltip m-tooltip--address tooltip-address\"\n    [style.display]=\"'none'\"\n    (click)=\"hideAddress()\"\n  ></div>\n  <ng-template\n    #exportTypeTemplate\n    class=\"m-context-menu-wrapper\"\n    id=\"export_type\"\n    aria-hidden=\"true\"\n    aria-label=\"TODO-access\"\n    aria-labelledby=\"export_card\"\n  >\n    <div class=\"m-context-menu\">\n      <ul class=\"m-context-menu__list\">\n        <li class=\"m-context-menu__list__item\">\n          <button type=\"button\" class=\"a-btn -link-like\" (click)=\"export('png')\">\n            <span class=\"u-visually-hidden\">{{ '@pry.action.exportAsFormat' | i18n }} </span> PNG\n          </button>\n        </li>\n        <li class=\"m-context-menu__list__item\">\n          <button type=\"button\" class=\"a-btn -link-like\" (click)=\"export('kml')\">\n            <span class=\"u-visually-hidden\">{{ '@pry.action.exportAsFormat' | i18n }} </span> KML\n          </button>\n        </li>\n        <li class=\"m-context-menu__list__item\">\n          <button type=\"button\" class=\"a-btn -link-like\" (click)=\"export('geoJSON')\">\n            <span class=\"u-visually-hidden\">{{ '@pry.action.exportAsFormat' | i18n }} </span> GeoJSON\n          </button>\n        </li>\n      </ul>\n    </div>\n  </ng-template>\n</div>\n", dependencies: [{ kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.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: ["saveTriggered", "changeTitle"] }, { kind: "component", type: i2.PryWidgetHeaderComponent, selector: "pry-widget-header", inputs: ["manifest", "additionalOptions", "headerOptions", "displayCount", "datasourceIds", "widgetIndex"], outputs: ["manifestModified"] }, { kind: "component", type: i2.PrySelectComponent, selector: "pry-select", inputs: ["labelTranslate", "baseTranslate", "translationFn", "translationFnArgs", "clearable", "multiple", "multipleClearRight", "placeholder", "isForm", "required", "name", "readonly", "items", "itemsAsOption", "bindData", "bindValue", "bindLabel", "bindIcon", "iconSize", "templateLabel", "templateOption", "autocomplete"] }, { kind: "component", type: i2.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "component", type: i7.PryCheckboxComponent, selector: "pry-checkbox", inputs: ["circle"] }, { kind: "directive", type: i2.PryTooltipDirective, selector: "[pryTooltip]", inputs: ["pryTooltip", "styleReversed", "pryTooltipContext", "pryTooltipPosition", "pryTooltipShowDelay"] }, { 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: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.I18nPipe, name: "i18n" }, { kind: "pipe", type: GeometryFieldsForPipe, name: "geometryFieldsFor" }, { kind: "pipe", type: WidgetMapLegendUrlPipe, name: "legendUrl" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", 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          [itemsAsOption]=\"true\"\n          [items]=\"styles$ | async\"\n          [ngModel]=\"optionsCopy.style\"\n          bindLabel=\"label\"\n          bindValue=\"identifier\"\n          id=\"map_style\"\n          class=\"a-pry-select\"\n        ></pry-select>\n      </div>\n\n      <pry-checkbox (ngModelChange)=\"changeFit($event)\" [ngModel]=\"optionsCopy.fit ?? false\">\n        {{ '@pry.widget.map.fit' | 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      <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=\"layer.type !== 'geoserver'\">\n              <label class=\"a-label\" for=\"map_layerType\">{{ '@pry.widget.map.layerType.title' | i18n }}</label>\n              <pry-select\n                (ngModelChange)=\"changeLayerType($event, i)\"\n                [bindData]=\"true\"\n                [itemsAsOption]=\"true\"\n                [items]=\"layerTypes\"\n                [labelTranslate]=\"true\"\n                [ngModel]=\"layer.type\"\n                baseTranslate=\"@pry.widget.map.layerType.\"\n                class=\"a-pry-select\"\n                id=\"map_layerType\"\n              ></pry-select>\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              \"\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                [itemsAsOption]=\"true\"\n                [items]=\"classes$ | async\"\n                [multiple]=\"true\"\n                [ngModel]=\"layer.classes\"\n                bindLabel=\"name\"\n                bindValue=\"id\"\n                class=\"a-pry-select\"\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                  [itemsAsOption]=\"true\"\n                  [items]=\"fields\"\n                  [ngModel]=\"layer.attribute\"\n                  bindLabel=\"name\"\n                  bindValue=\"name\"\n                  id=\"map_locationAttribute_both\"\n                  class=\"a-pry-select\"\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                  [itemsAsOption]=\"true\"\n                  [items]=\"fields\"\n                  [ngModel]=\"layerHasIntensity(layer).intensityAttribute\"\n                  bindLabel=\"name\"\n                  bindValue=\"name\"\n                  id=\"map_intensityAttribute\"\n                  class=\"a-pry-select\"\n                ></pry-select>\n              </div>\n            </div>\n          </ng-container>\n        </fieldset>\n\n        <fieldset\n          *ngIf=\"\n            layer.type === 'wms' ||\n            layer.type === 'wmts' ||\n            layer.type === 'featurelayer' ||\n            layer.type === 'vectortile' ||\n            layer.type === 'rastertile'\n          \"\n        >\n          <legend class=\"u-visually-hidden\">{{ '@pry.widget.map.tile' | i18n }}</legend>\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\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'\">\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.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)\"\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 class=\"m-btn-group -selection-choice\" [style.transform]=\"bottomLeft$ | async\">\n    <ng-container *ngFor=\"let action of basicActions$ | async\">\n      <button\n        type=\"button\"\n        class=\"a-btn a-btn--icon-only\"\n        (click)=\"interactionManager.selectionInteraction.changeSelection(action)\"\n        [class.-selected]=\"interactionManager.selectionInteraction.selectionType === action\"\n        [pryTooltip]=\"infoTooltipAction\"\n        pryTooltipPosition=\"bottom\"\n        aria-describedby=\"infoTooltipAction\"\n        [pryTooltipContext]=\"{ action: action }\"\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\n    <button\n      type=\"button\"\n      class=\"a-btn a-btn--icon-only\"\n      id=\"export_card\"\n      aria-expanded=\"false\"\n      aria-controls=\"export_type\"\n      aria-haspopup=\"menu\"\n      [pryTooltip]=\"infoTooltipDown\"\n      pryTooltipPosition=\"bottom\"\n      aria-describedby=\"infoTooltipDown_widgetMap\"\n      *ngIf=\"(actions$ | async)?.includes('export')\"\n    >\n      <pry-icon iconSvg=\"file_download\" (click)=\"displayExportType($event)\"></pry-icon>\n      <span class=\"u-visually-hidden\">{{ '@pry.widget.map.export' | i18n }}</span>\n    </button>\n\n    <button\n      type=\"button\"\n      class=\"a-btn a-btn--icon-only\"\n      (click)=\"uploader.click()\"\n      [pryTooltip]=\"infoTooltipLoad\"\n      aria-describedby=\"infoTooltipLoad_widgetMap\"\n      pryTooltipPosition=\"bottom\"\n      *ngIf=\"(actions$ | async)?.includes('upload')\"\n    >\n      <pry-icon iconSvg=\"file_upload\"></pry-icon>\n      <span class=\"u-visually-hidden\">{{ '@pry.widget.map.import' | i18n }}</span>\n    </button>\n    <input hidden type=\"file\" #uploader (change)=\"import($event)\" />\n  </div>\n\n  <div\n    class=\"ol-control m-layer-legend\"\n    *ngIf=\"((legendLayers$ | async)?.length ?? 0) > 0\"\n    [style.top.px]=\"legendTop$ | async\"\n  >\n    <button class=\"m-layer-legend__toggle\" (click)=\"toggleLegendWindow()\">\n      <pry-icon iconSvg=\"legend\" [width]=\"22\" [height]=\"22\"></pry-icon>\n    </button>\n    <ng-container *ngFor=\"let geoLayer of legendLayers$ | async; let index = index\">\n      <div class=\"m-layer-legend__title\" [class.-hidden]=\"!legendTabOpen\">\n        {{ geoLayer.title }}\n        <ng-container *ngIf=\"isLayerRendered(geoLayer)\">\n          <button class=\"m-layer-legend__toggle\" (click)=\"toggleLegend(index)\">\n            <pry-icon\n              [iconSvg]=\"legendTab === index ? 'chevron_top' : 'chevron_bottom'\"\n              [width]=\"22\"\n              [height]=\"22\"\n            ></pry-icon>\n          </button>\n        </ng-container>\n        <ng-container *ngIf=\"!isLayerRendered(geoLayer)\">\n          <pry-icon [iconSvg]=\"'close'\" [width]=\"22\" [height]=\"22\"></pry-icon>\n        </ng-container>\n      </div>\n      <div\n        class=\"m-layer-legend__image\"\n        [class.-hidden]=\"!legendTabOpen || legendTab !== index || !isLayerRendered(geoLayer)\"\n        [style.max-height.px]=\"legendHeight$ | async\"\n      >\n        <ng-container *ngIf=\"!imageNotProvided[index] && (geoLayer | legendUrl)\">\n          <img\n            [src]=\"geoLayer | legendUrl\"\n            [alt]=\"'@pry.widget.map.legend' | i18n : { layer: geoLayer.title }\"\n            (error)=\"imageNotProvided[index] = true\"\n          />\n        </ng-container>\n        <ng-container *ngIf=\"imageNotProvided[index]\">\n          <p class=\"m-layer-legend__error\">{{ '@pry.widget.map.legendNotProvided' | i18n }}</p>\n        </ng-container>\n      </div>\n    </ng-container>\n  </div>\n\n  <div [style.height.px]=\"height$ | async\" class=\"o-map-wrapper\">\n    <div class=\"o-map\">\n      <div #map id=\"map\"></div>\n    </div>\n  </div>\n\n  <ng-template #infoTooltipAction let-action=\"action\">\n    <div class=\"m-tooltip\" role=\"tooltip\" id=\"infoTooltipAction\" aria-hidden=\"true\">\n      <span class=\"m-tooltip__text\">{{ '@pry.widget.map.' + action | i18n }}</span>\n    </div>\n  </ng-template>\n\n  <ng-template #infoTooltipDown>\n    <div class=\"m-tooltip\" role=\"tooltip\" id=\"infoTooltipDown_widgetMap\" aria-hidden=\"true\">\n      <span class=\"m-tooltip__text\">{{ '@pry.widget.map.export' | i18n }}</span>\n    </div>\n  </ng-template>\n\n  <ng-template #infoTooltipLoad>\n    <div class=\"m-tooltip\" role=\"tooltip\" id=\"infoTooltipLoad_widgetMap\" aria-hidden=\"true\">\n      <span class=\"m-tooltip__text\">{{ '@pry.widget.map.import' | i18n }}</span>\n    </div>\n  </ng-template>\n\n  <div #popup class=\"m-tooltip m-tooltip--popup\" [hidden]=\"true\" role=\"tooltip\">\n    <div #popupContent></div>\n  </div>\n  <div\n    #address\n    class=\"m-tooltip m-tooltip--address tooltip-address\"\n    [style.display]=\"'none'\"\n    (click)=\"hideAddress()\"\n  ></div>\n  <ng-template\n    #exportTypeTemplate\n    class=\"m-context-menu-wrapper\"\n    id=\"export_type\"\n    aria-hidden=\"true\"\n    aria-label=\"TODO-access\"\n    aria-labelledby=\"export_card\"\n  >\n    <div class=\"m-context-menu\">\n      <ul class=\"m-context-menu__list\">\n        <li class=\"m-context-menu__list__item\">\n          <button type=\"button\" class=\"a-btn -link-like\" (click)=\"export('png')\">\n            <span class=\"u-visually-hidden\">{{ '@pry.action.exportAsFormat' | i18n }} </span> PNG\n          </button>\n        </li>\n        <li class=\"m-context-menu__list__item\">\n          <button type=\"button\" class=\"a-btn -link-like\" (click)=\"export('kml')\">\n            <span class=\"u-visually-hidden\">{{ '@pry.action.exportAsFormat' | i18n }} </span> KML\n          </button>\n        </li>\n        <li class=\"m-context-menu__list__item\">\n          <button type=\"button\" class=\"a-btn -link-like\" (click)=\"export('geoJSON')\">\n            <span class=\"u-visually-hidden\">{{ '@pry.action.exportAsFormat' | i18n }} </span> GeoJSON\n          </button>\n        </li>\n      </ul>\n    </div>\n  </ng-template>\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          [itemsAsOption]=\"true\"\n          [items]=\"styles$ | async\"\n          [ngModel]=\"optionsCopy.style\"\n          bindLabel=\"label\"\n          bindValue=\"identifier\"\n          id=\"map_style\"\n          class=\"a-pry-select\"\n        ></pry-select>\n      </div>\n\n      <pry-checkbox (ngModelChange)=\"changeFit($event)\" [ngModel]=\"optionsCopy.fit ?? false\">\n        {{ '@pry.widget.map.fit' | 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      <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=\"layer.type !== 'geoserver'\">\n              <label class=\"a-label\" for=\"map_layerType\">{{ '@pry.widget.map.layerType.title' | i18n }}</label>\n              <pry-select\n                (ngModelChange)=\"changeLayerType($event, i)\"\n                [bindData]=\"true\"\n                [itemsAsOption]=\"true\"\n                [items]=\"layerTypes\"\n                [labelTranslate]=\"true\"\n                [ngModel]=\"layer.type\"\n                baseTranslate=\"@pry.widget.map.layerType.\"\n                class=\"a-pry-select\"\n                id=\"map_layerType\"\n              ></pry-select>\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              \"\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                [itemsAsOption]=\"true\"\n                [items]=\"classes$ | async\"\n                [multiple]=\"true\"\n                [ngModel]=\"layer.classes\"\n                bindLabel=\"name\"\n                bindValue=\"id\"\n                class=\"a-pry-select\"\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                  [itemsAsOption]=\"true\"\n                  [items]=\"fields\"\n                  [ngModel]=\"layer.attribute\"\n                  bindLabel=\"name\"\n                  bindValue=\"name\"\n                  id=\"map_locationAttribute_both\"\n                  class=\"a-pry-select\"\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                  [itemsAsOption]=\"true\"\n                  [items]=\"fields\"\n                  [ngModel]=\"layerHasIntensity(layer).intensityAttribute\"\n                  bindLabel=\"name\"\n                  bindValue=\"name\"\n                  id=\"map_intensityAttribute\"\n                  class=\"a-pry-select\"\n                ></pry-select>\n              </div>\n            </div>\n          </ng-container>\n        </fieldset>\n\n        <fieldset\n          *ngIf=\"\n            layer.type === 'wms' ||\n            layer.type === 'wmts' ||\n            layer.type === 'featurelayer' ||\n            layer.type === 'vectortile' ||\n            layer.type === 'rastertile'\n          \"\n        >\n          <legend class=\"u-visually-hidden\">{{ '@pry.widget.map.tile' | i18n }}</legend>\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\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'\">\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.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)\"\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 class=\"m-btn-group -selection-choice\" [style.transform]=\"bottomLeft$ | async\">\n    <ng-container *ngFor=\"let action of basicActions$ | async\">\n      <button\n        type=\"button\"\n        class=\"a-btn a-btn--icon-only\"\n        (click)=\"interactionManager.selectionInteraction.changeSelection(action)\"\n        [class.-selected]=\"interactionManager.selectionInteraction.selectionType === action\"\n        [pryTooltip]=\"infoTooltipAction\"\n        pryTooltipPosition=\"bottom\"\n        aria-describedby=\"infoTooltipAction\"\n        [pryTooltipContext]=\"{ action: action }\"\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\n    <button\n      type=\"button\"\n      class=\"a-btn a-btn--icon-only\"\n      id=\"export_card\"\n      aria-expanded=\"false\"\n      aria-controls=\"export_type\"\n      aria-haspopup=\"menu\"\n      [pryTooltip]=\"infoTooltipDown\"\n      pryTooltipPosition=\"bottom\"\n      aria-describedby=\"infoTooltipDown_widgetMap\"\n      *ngIf=\"(actions$ | async)?.includes('export')\"\n    >\n      <pry-icon iconSvg=\"file_download\" (click)=\"displayExportType($event)\"></pry-icon>\n      <span class=\"u-visually-hidden\">{{ '@pry.widget.map.export' | i18n }}</span>\n    </button>\n\n    <button\n      type=\"button\"\n      class=\"a-btn a-btn--icon-only\"\n      (click)=\"uploader.click()\"\n      [pryTooltip]=\"infoTooltipLoad\"\n      aria-describedby=\"infoTooltipLoad_widgetMap\"\n      pryTooltipPosition=\"bottom\"\n      *ngIf=\"(actions$ | async)?.includes('upload')\"\n    >\n      <pry-icon iconSvg=\"file_upload\"></pry-icon>\n      <span class=\"u-visually-hidden\">{{ '@pry.widget.map.import' | i18n }}</span>\n    </button>\n    <input hidden type=\"file\" #uploader (change)=\"import($event)\" />\n  </div>\n\n  <div\n    class=\"ol-control m-layer-legend\"\n    *ngIf=\"((legendLayers$ | async)?.length ?? 0) > 0\"\n    [style.top.px]=\"legendTop$ | async\"\n  >\n    <button class=\"m-layer-legend__toggle\" (click)=\"toggleLegendWindow()\">\n      <pry-icon iconSvg=\"legend\" [width]=\"22\" [height]=\"22\"></pry-icon>\n    </button>\n    <ng-container *ngFor=\"let geoLayer of legendLayers$ | async; let index = index\">\n      <div class=\"m-layer-legend__title\" [class.-hidden]=\"!legendTabOpen\">\n        {{ geoLayer.title }}\n        <ng-container *ngIf=\"isLayerRendered(geoLayer)\">\n          <button class=\"m-layer-legend__toggle\" (click)=\"toggleLegend(index)\">\n            <pry-icon\n              [iconSvg]=\"legendTab === index ? 'chevron_top' : 'chevron_bottom'\"\n              [width]=\"22\"\n              [height]=\"22\"\n            ></pry-icon>\n          </button>\n        </ng-container>\n        <ng-container *ngIf=\"!isLayerRendered(geoLayer)\">\n          <pry-icon [iconSvg]=\"'close'\" [width]=\"22\" [height]=\"22\"></pry-icon>\n        </ng-container>\n      </div>\n      <div\n        class=\"m-layer-legend__image\"\n        [class.-hidden]=\"!legendTabOpen || legendTab !== index || !isLayerRendered(geoLayer)\"\n        [style.max-height.px]=\"legendHeight$ | async\"\n      >\n        <ng-container *ngIf=\"geoLayer | legendUrl | async as url\">\n          <img\n            [src]=\"url\"\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 | async)\">\n          <p class=\"m-layer-legend__error\">{{ '@pry.widget.map.legendNotProvided' | i18n }}</p>\n        </ng-container>\n      </div>\n    </ng-container>\n  </div>\n\n  <div [style.height.px]=\"height$ | async\" class=\"o-map-wrapper\">\n    <div class=\"o-map\">\n      <div #map id=\"map\"></div>\n    </div>\n  </div>\n\n  <ng-template #infoTooltipAction let-action=\"action\">\n    <div class=\"m-tooltip\" role=\"tooltip\" id=\"infoTooltipAction\" aria-hidden=\"true\">\n      <span class=\"m-tooltip__text\">{{ '@pry.widget.map.' + action | i18n }}</span>\n    </div>\n  </ng-template>\n\n  <ng-template #infoTooltipDown>\n    <div class=\"m-tooltip\" role=\"tooltip\" id=\"infoTooltipDown_widgetMap\" aria-hidden=\"true\">\n      <span class=\"m-tooltip__text\">{{ '@pry.widget.map.export' | i18n }}</span>\n    </div>\n  </ng-template>\n\n  <ng-template #infoTooltipLoad>\n    <div class=\"m-tooltip\" role=\"tooltip\" id=\"infoTooltipLoad_widgetMap\" aria-hidden=\"true\">\n      <span class=\"m-tooltip__text\">{{ '@pry.widget.map.import' | i18n }}</span>\n    </div>\n  </ng-template>\n\n  <div #popup class=\"m-tooltip m-tooltip--popup\" [hidden]=\"true\" role=\"tooltip\">\n    <div #popupContent></div>\n  </div>\n  <div\n    #address\n    class=\"m-tooltip m-tooltip--address tooltip-address\"\n    [style.display]=\"'none'\"\n    (click)=\"hideAddress()\"\n  ></div>\n  <ng-template\n    #exportTypeTemplate\n    class=\"m-context-menu-wrapper\"\n    id=\"export_type\"\n    aria-hidden=\"true\"\n    aria-label=\"TODO-access\"\n    aria-labelledby=\"export_card\"\n  >\n    <div class=\"m-context-menu\">\n      <ul class=\"m-context-menu__list\">\n        <li class=\"m-context-menu__list__item\">\n          <button type=\"button\" class=\"a-btn -link-like\" (click)=\"export('png')\">\n            <span class=\"u-visually-hidden\">{{ '@pry.action.exportAsFormat' | i18n }} </span> PNG\n          </button>\n        </li>\n        <li class=\"m-context-menu__list__item\">\n          <button type=\"button\" class=\"a-btn -link-like\" (click)=\"export('kml')\">\n            <span class=\"u-visually-hidden\">{{ '@pry.action.exportAsFormat' | i18n }} </span> KML\n          </button>\n        </li>\n        <li class=\"m-context-menu__list__item\">\n          <button type=\"button\" class=\"a-btn -link-like\" (click)=\"export('geoJSON')\">\n            <span class=\"u-visually-hidden\">{{ '@pry.action.exportAsFormat' | i18n }} </span> GeoJSON\n          </button>\n        </li>\n      </ul>\n    </div>\n  </ng-template>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i1.Store }, { type: i2.PrySnackbarService }, { type: i2.PryI18nService }, { type: i2.TooltipFactoryService }, { type: i2.GeocodingService }, { type: i3.Overlay }, { type: i0.ViewContainerRef }, { type: i2.SymbolService }, { type: i0.Injector }, { type: WidgetMapLayerService }, { type: i0.ElementRef }]; }, propDecorators: { mapRef: [{
                 type: ViewChild,
                 args: ['map']
@@ -2063,5 +2149,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { DEFAULT_HEATMAP_RADIUS, DEFAULT_MAP_CENTER, DEFAULT_RADIUS_INTENSITY_FACTOR, DEFAULT_ZOOM_MAX, DEFAULT_ZOOM_MIN, DEFAULT_ZOOM_START, EMPTY_MAP_STYLE, GeometryFieldsForPipe, InteractionManager, SelectionInteraction, WidgetMapComponent, WidgetMapLayerService, WidgetMapLegendUrlPipe, WidgetMapModule, exportMapAsGeoJSON, exportMapAsImage, exportMapAsKML, geometryForLayer, getCircleFeatureFromItem, getFeatureFromItem, getLinkFeature, getMapAsPng, populateIntensityAttribute, populateLocationAttribute };
+export { DEFAULT_HEATMAP_RADIUS, DEFAULT_MAP_CENTER, DEFAULT_RADIUS_INTENSITY_FACTOR, DEFAULT_ZOOM_MAX, DEFAULT_ZOOM_MIN, DEFAULT_ZOOM_START, EMPTY_MAP_STYLE, GeometryFieldsForPipe, InteractionManager, PryWidgetMapCssComponent, SelectionInteraction, WidgetMapComponent, WidgetMapLayerService, WidgetMapLegendUrlPipe, WidgetMapModule, exportMapAsGeoJSON, exportMapAsImage, exportMapAsKML, geometryForLayer, getCircleFeatureFromItem, getFeatureFromItem, getLinkFeature, getMapAsPng, populateIntensityAttribute, populateLocationAttribute };
 //# sourceMappingURL=provoly-dashboard-widgets-widget-map.mjs.map