udp-stencil-component-library 25.18.2-beta.1 → 25.18.2-beta.11

package/dist/components/map-component2.js

@@ -1,583 +1 @@
-import { p as proxyCustomElement, H, h } from './index2.js';
-import Map from 'ol/Map';
-import View from 'ol/View';
-import TileLayer from 'ol/layer/Tile';
-import OSM from 'ol/source/OSM';
-import VectorLayer from 'ol/layer/Vector';
-import VectorSource from 'ol/source/Vector';
-import { Zoom, FullScreen } from 'ol/control';
-import proj4 from 'proj4';
-import { register } from 'ol/proj/proj4';
-import { defaults, DragRotateAndZoom } from 'ol/interaction';
-import { Overlay } from 'ol';
-import { a as getFilteredData, b as getMapFeatures, c as getFilteredLayerOptionsByRole, h as hasStyles, d as getLayer, e as getLayerStringArrayFromArray, s as setSelectedLayersList } from './udp-map-utils.js';
-import { g as getSelectInteraction } from './map-interactions.js';
-import { Point, LineString, Polygon } from 'ol/geom';
-import { D as DrawBaseLayerId, P as PopoverOverlayId } from './common.js';
-import { debounce } from 'lodash';
-import { d as defineCustomElement$a } from './feature-details-card2.js';
-import { d as defineCustomElement$9 } from './feature-details-popup2.js';
-import { d as defineCustomElement$8 } from './stencil-icon-button2.js';
-import { d as defineCustomElement$7 } from './udp-adornment2.js';
-import { d as defineCustomElement$6 } from './udp-ambient-tool-tip2.js';
-import { d as defineCustomElement$5 } from './udp-badge2.js';
-import { d as defineCustomElement$4 } from './udp-icon2.js';
-import { d as defineCustomElement$3 } from './udp-menu-item2.js';
-import { d as defineCustomElement$2 } from './udp-pop-over2.js';
-import { d as defineCustomElement$1 } from './unity-typography2.js';
-
-const udpMapCss = ":host{display:block}.zoomControl{left:'auto';right:'20';top:'20'}.iconButtonWrapper{padding:var(--spacing-04)}#featureDetailsPopOverContainer{position:absolute;z-index:1000}.hidden-controls .ol-zoom,.hidden-controls .ol-attribution{display:none}.ol-control{width:fit-content !important}";
-
-const MapComponent = /*@__PURE__*/ proxyCustomElement(class MapComponent extends H {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        this.data = []; //Feature data (in either Geo-JSON format or not). Geo-JSON format :  [{type: string, id: string, geometry: { type: 'Point' | 'LineString' | 'Polygon',coordinates: Coordinate},properties: any}]
-        this.isGeoJsonFormat = true; //Boolean stating if the data is in Geo-JSON format
-        this.enableZoom = true; //Allow Zoom
-        this.mapZoom = 17; //Default map zoom
-        this.mapCenter = [0, 0]; //Default map center
-        this.mapHeight = '80vh';
-        this.mapProjection = ''; //Map feature projection used
-        this.filterPanel = ''; //Custom filter panel
-        this.enableTileSelection = true; //Allows selecting tile layer
-        this.tileLayersOptions = []; //List of tile layers visible on the map
-        this.defaultTileOptionName = ''; //Default tile layer name
-        this.layerOptions = []; //List of options for vector layers
-        this.initialSelectedLayers = []; //Vector layers selected in the layer filter on initital map load
-        this.bulkSelectedFeaturesActionPanel = ''; //Custom action panel for selected features
-        this.filterLayersByRole = false; //Enable filtering layers by role
-        this.layerKeySeparator = ''; //Layerkey seperator to get the current feature layer when adding layers with features to the map
-        this.filteredLayerOptionsByRole = []; //Filtered layer options by role
-        this.readOnlyMap = false; //Map is read only (Setting true removes the add, edit, delete functionality)
-        this.enableViewFeature = true; //Enables viewing a selected feature
-        this.bulkSelectionActive = false; //State - if bulk selection is active
-        this.splitActive = false; //State - if bulk split is active
-        this.enableDragBox = false; //State - if dragbox is active
-        this.enableAddNewFeature = true;
-        this.readOnlyLayers = []; //List of layers that are read only
-        this.popoverPrimaryActions = [];
-        this.popoverMoreIconButtonActions = [];
-        this.hideMessageIconPopover = false;
-        this.popoverCardConfig = {};
-        this.minZoom = 0; //Min zoom of the map view
-        this.maxZoom = 28; //Max zoom of the map view
-        this.definedProjection = false;
-        this.popoverContainer = null;
-        this.showPopOver = false;
-        this.isReadOnlyFeature = false;
-        this.mapFeatures = [];
-        this.initializeMap = (popOverElement, mapElement) => {
-            var _a;
-            this.definedProjection = this.registerProjection(this.crs);
-            this.filterLayerOptions();
-            let allLayers = [];
-            if (this.tileLayersOptions && ((_a = this.tileLayersOptions) === null || _a === void 0 ? void 0 : _a.length) > 0) {
-                for (let option of this.tileLayersOptions) {
-                    const tileLayer = new TileLayer({
-                        source: option === null || option === void 0 ? void 0 : option.source,
-                        properties: { value: option === null || option === void 0 ? void 0 : option.name, isBaseTile: true },
-                        visible: this.defaultTileOptionName ? (option === null || option === void 0 ? void 0 : option.name) === this.defaultTileOptionName : true,
-                    });
-                    allLayers[allLayers.length] = tileLayer;
-                }
-            }
-            else {
-                const openStreetMapTileLayer = new TileLayer({
-                    source: new OSM(),
-                    properties: { value: 'Open Street Map', isBaseTile: true },
-                    visible: true,
-                });
-                allLayers[allLayers.length] = openStreetMapTileLayer;
-            }
-            //Adding base layer for drawing new features
-            allLayers.push(new VectorLayer({
-                source: new VectorSource({}),
-                properties: { id: DrawBaseLayerId },
-            }));
-            const mapView = new View({
-                center: this.mapCenter,
-                zoom: this.mapZoom,
-                projection: this.mapProjection,
-                minZoom: this.minZoom,
-                maxZoom: this.maxZoom,
-            });
-            this.mapInstance = new Map({
-                target: mapElement,
-                layers: allLayers,
-                view: mapView,
-                interactions: defaults().extend([new DragRotateAndZoom()]),
-                controls: [new Zoom(), new FullScreen()],
-                overlays: [
-                    new Overlay({
-                        element: popOverElement,
-                        autoPan: { animation: { duration: 250 } },
-                        id: PopoverOverlayId,
-                    }),
-                ],
-            });
-            this.mapInstance.on('moveend', debounce(() => {
-                this.getMapExtentAndZoom();
-            }, 500));
-            this.setVectorLayers();
-            this.addSelectInteraction();
-            if (this.handleSetMapComponent) {
-                this.handleSetMapComponent(this.mapInstance);
-            }
-        };
-        ///////////////////////////////////////////////////METHODS//////////////////////////////////////////////////////////////////
-        this.setVectorLayers = () => {
-            let filteredData = getFilteredData(this.data, this.isGeoJsonFormat, this.geoJsonMappingConfig, this.filterPanel, this.filterPanelCallback);
-            this.mapFeatures = getMapFeatures(filteredData, this.crs, this.definedProjection, this.mapProjection, this.mapDataProjection, this.getFilteredMapData);
-            let visibleLayersOnLoad = this.getVisibleLayersOnLoad(this.layerOptions);
-            this.addVectorLayersToMap(this.mapFeatures, visibleLayersOnLoad);
-            this.updateIntialSelectedLayersVisibility();
-        };
-        this.clearVectorLayers = () => {
-            var _a, _b, _c;
-            const layers = (_c = (_b = (_a = this.mapInstance) === null || _a === void 0 ? void 0 : _a.getLayers()) === null || _b === void 0 ? void 0 : _b.getArray()) !== null && _c !== void 0 ? _c : [];
-            layers.forEach((layer) => {
-                if (layer instanceof VectorLayer && layer.get('id') !== DrawBaseLayerId) {
-                    // Remove only vector layers that are not the draw base layer
-                    this.mapInstance.removeLayer(layer);
-                }
-            });
-        };
-        //================================================REGISTER PROJECTION=========================================
-        this.registerProjection = (crs) => {
-            if ((crs === null || crs === void 0 ? void 0 : crs.length) > 0) {
-                proj4.defs(crs);
-                register(proj4);
-                return true;
-            }
-            return false;
-        };
-        //===========================ADDING VECTOR LAYERS AND LAYER VISIBILITY=========================================
-        this.filterLayerOptions = () => {
-            let options = this.filterLayersByRole
-                ? getFilteredLayerOptionsByRole(this.user, this.layerRoles, this.layerOptions)
-                : this.layerOptions;
-            this.handleSetFilteredLayerOptionsByRole(options);
-        };
-        this.addVectorLayersToMap = (features, layersToAddToMap) => {
-            var _a;
-            if (features && this.mapInstance) {
-                if (this.getVectorLayerSources) {
-                    (_a = this.getVectorLayerSources(layersToAddToMap, features)) === null || _a === void 0 ? void 0 : _a.forEach((layerObj) => {
-                        var _a;
-                        const src = new VectorSource({ features: (_a = layerObj === null || layerObj === void 0 ? void 0 : layerObj.features) !== null && _a !== void 0 ? _a : [] });
-                        const vectorLayer = new VectorLayer({
-                            source: src,
-                            properties: { value: layerObj === null || layerObj === void 0 ? void 0 : layerObj.layer },
-                            style: this.getFeatureStyles,
-                        });
-                        this.mapInstance.addLayer(vectorLayer);
-                    });
-                }
-                else {
-                    for (let layer of layersToAddToMap) {
-                        const layerFeatures = features === null || features === void 0 ? void 0 : features.filter(feature => {
-                            const featureProperties = feature.getProperties();
-                            if (this.getFeatureStyles) {
-                                let style = this.getFeatureStyles(feature);
-                                if (hasStyles(style)) {
-                                    feature.setStyle(style);
-                                }
-                            }
-                            const currentFeatureLayer = getLayer(this.layerKeys, this.layerKeySeparator, featureProperties);
-                            return layer === currentFeatureLayer;
-                        });
-                        const src = new VectorSource({ features: layerFeatures });
-                        const vectorLayer = new VectorLayer({ source: src, properties: { value: layer } });
-                        this.mapInstance.addLayer(vectorLayer);
-                    }
-                }
-            }
-        };
-        this.getVisibleLayersOnLoad = (layerOptions) => {
-            const filteredLayersByRole = this.filterLayersByRole
-                ? getFilteredLayerOptionsByRole(this.user, this.layerRoles, layerOptions)
-                : layerOptions;
-            const visibleLayersOnLoad = getLayerStringArrayFromArray(filteredLayersByRole);
-            return visibleLayersOnLoad;
-        };
-        this.updateLayerVisibility = (visibleLayerNames, changeTileLayer = false) => {
-            var _a, _b;
-            let type = changeTileLayer ? TileLayer : VectorLayer;
-            (_b = (_a = this.mapInstance) === null || _a === void 0 ? void 0 : _a.getLayers()) === null || _b === void 0 ? void 0 : _b.forEach(layer => {
-                if (layer instanceof type) {
-                    visibleLayerNames.includes(layer.get('value')) || layer.get('id') === DrawBaseLayerId
-                        ? layer.setVisible(true)
-                        : layer.setVisible(false);
-                }
-            });
-        };
-        //=============================================FEATURE STYLES======================================================
-        this.insertFeatureStyles = () => {
-            if (this.getFeatureStyles) {
-                this.mapInstance.getLayers().forEach(layer => {
-                    if (layer instanceof VectorLayer) {
-                        let src = layer.getSource();
-                        src.getFeatures().forEach(feature => {
-                            let style = this.getFeatureStyles(feature);
-                            if (hasStyles(style)) {
-                                feature.setStyle(style);
-                            }
-                        });
-                    }
-                });
-            }
-        };
-        //=============================================FEATURE SELECTION=======================================================
-        this.addSelectInteraction = () => {
-            getSelectInteraction(this.splitActive, this.handleSetCurrentSelectedFeature, this.handleSetSelectedFeatureProperties, this.handleOnCloseFeaturePopover, this.handleSetSelectedFeatureOnSelect, this.showPopper, this.getSelectedFeatureStyles, this.handleAddInteraction, this.enableDragBox, this.handleUpdateSelectInteraction, this.handleGetAdditionalFeaturePropertiesOnSelect);
-        };
-        this.handleUpdateSelectInteraction = (value) => {
-            this.selectInteraction = value;
-        };
-        this.handleSetCurrentSelectedFeature = (value) => {
-            this.currentSelectedFeature = value;
-        };
-        this.handleSetShowPopOver = (show) => {
-            this.showPopOver = show;
-        };
-        this.showPopper = (feature) => {
-            if (!this.enableDragBox && !this.enableAddNewFeature && !this.splitActive && feature) {
-                const popoverOverlay = this.mapInstance.getOverlayById(PopoverOverlayId);
-                if (popoverOverlay) {
-                    if (feature.getGeometry() instanceof Point) {
-                        popoverOverlay.setPosition(feature.getGeometry().getCoordinates());
-                    }
-                    else if (feature.getGeometry() instanceof LineString) {
-                        popoverOverlay.setPosition(feature.getGeometry().getCoordinates()[0]);
-                    }
-                    else if (feature.getGeometry() instanceof Polygon) {
-                        popoverOverlay.setPosition(feature.getGeometry().getCoordinates()[0][0]);
-                    }
-                }
-                this.showPopOver = true;
-            }
-        };
-        this.handleOnCloseFeaturePopover = (event) => {
-            if (this.additionalOnclosePopover) {
-                this.additionalOnclosePopover(event);
-            }
-            if (this.setSelectedFeatureIdExternal) {
-                this.setSelectedFeatureIdExternal(null);
-            }
-            this.showPopOver = false;
-        };
-        this.handleAddInteraction = interaction => {
-            this.mapInstance.addInteraction(interaction);
-        };
-        this.handleShowMarkerFromExternal = (featureId) => {
-            var _a, _b;
-            if (featureId && this.mapFeatures && this.selectInteraction) {
-                const featureToSelect = (_a = this.mapFeatures) === null || _a === void 0 ? void 0 : _a.find(feature => (feature === null || feature === void 0 ? void 0 : feature.getId()) === featureId);
-                const featureProperties = featureToSelect === null || featureToSelect === void 0 ? void 0 : featureToSelect.getProperties();
-                if (featureToSelect) {
-                    this.handleSetSelectedFeatureProperties(featureToSelect);
-                    const layer = getLayer(this.layerKeys, this.layerKeySeparator, featureProperties);
-                    //select the layer if not already selected
-                    const filteredLayerStrings = getLayerStringArrayFromArray(this.filteredLayerOptionsByRole);
-                    if (!((_b = this.selectedLayers) === null || _b === void 0 ? void 0 : _b.includes(layer)) &&
-                        (filteredLayerStrings === null || filteredLayerStrings === void 0 ? void 0 : filteredLayerStrings.includes(layer)) &&
-                        this.handleSetSelectedLayers) {
-                        const newSelectedLayers = [...this.selectedLayers, layer];
-                        this.handleSetSelectedLayers(newSelectedLayers);
-                        this.updateLayerVisibility(newSelectedLayers);
-                    }
-                    const selectedFeatures = this.selectInteraction.getFeatures();
-                    // Get previously selected features (to handle deselection)
-                    const previouslySelected = selectedFeatures.getArray().slice();
-                    // Clear existing selection
-                    selectedFeatures.clear();
-                    // Select the new feature
-                    selectedFeatures.push(featureToSelect);
-                    // Manually trigger the select event
-                    this.selectInteraction.dispatchEvent({
-                        type: 'select',
-                        selected: [featureToSelect], // New selected feature
-                        deselected: previouslySelected, // Previously selected features
-                        mapBrowserEvent: null, // No actual map event
-                    });
-                    // TODO: handle when no feature on the map to select by showing alert
-                }
-            }
-        };
-    }
-    //////////////////////////////////////////////////////////INITIALIZE MAP/////////////////////////////////////////////////////
-    componentDidLoad() {
-        requestAnimationFrame(() => {
-            this.popoverContainer = this.el.shadowRoot.querySelector('#featureDetailsPopOverContainer');
-            const mapElement = this.el.shadowRoot.querySelector('#map');
-            if (this.popoverContainer && mapElement) {
-                this.initializeMap(this.popoverContainer, mapElement);
-            }
-        });
-    }
-    /////////////////////////////////////////////////////////////WATCHERS////////////////////////////////////////////////////////
-    reinitializeMap() {
-        this.clearVectorLayers();
-        this.setVectorLayers();
-    }
-    resetPopover() {
-        this.showPopOver = false; // Reset popover visibility when data changes
-    }
-    updateProjection() {
-        if (this.crs) {
-            this.definedProjection = this.registerProjection(this.crs);
-        }
-    }
-    updateFilteredLayerOptions() {
-        this.filterLayerOptions();
-    }
-    handleSelectFeatureOnMap() {
-        var _a;
-        if (this.selectedFeatureIdExternal && ((_a = this.selectInteraction) === null || _a === void 0 ? void 0 : _a.getActive())) {
-            this.handleShowMarkerFromExternal(this.selectedFeatureIdExternal);
-        }
-        else if (this.selectedFeatureIdExternal && this.setSelectedFeatureIdExternal) {
-            // When the select interaction is not activated, let's reset this value so that
-            // when the feature is selected again, it will be handled properly
-            this.setSelectedFeatureIdExternal(null);
-        }
-    }
-    updateReadOnlyLayers() {
-        var _a;
-        if (this.selectedFeatureProperties) {
-            const layer = getLayer(this.layerKeys, this.layerKeySeparator, this.selectedFeatureProperties);
-            this.isReadOnlyFeature = (_a = this.readOnlyLayers) === null || _a === void 0 ? void 0 : _a.includes(layer);
-        }
-    }
-    handleUpdateInitialSelectedLayersVisibility() {
-        this.updateIntialSelectedLayersVisibility();
-    }
-    updateMapView() {
-        if (this.mapInstance) {
-            const currentCenter = this.mapInstance.getView().getCenter();
-            const currentZoom = this.mapInstance.getView().getZoom();
-            this.mapInstance.setView(new View({
-                center: currentCenter,
-                zoom: currentZoom,
-                projection: this.mapProjection,
-            }));
-        }
-    }
-    updateMapCenter() {
-        var _a;
-        if (this.mapInstance && this.mapCenter) {
-            (_a = this.mapInstance.getView()) === null || _a === void 0 ? void 0 : _a.setCenter(this.mapCenter);
-        }
-    }
-    updateFeatureStyles() {
-        if (this.mapInstance) {
-            this.insertFeatureStyles();
-        }
-    }
-    updateMinZoom() {
-        var _a, _b;
-        if (this.mapInstance && this.minZoom) {
-            (_b = (_a = this.mapInstance) === null || _a === void 0 ? void 0 : _a.getView()) === null || _b === void 0 ? void 0 : _b.setMinZoom(this.minZoom);
-        }
-    }
-    updateMaxZoom() {
-        var _a, _b;
-        if (this.mapInstance && this.maxZoom) {
-            (_b = (_a = this.mapInstance) === null || _a === void 0 ? void 0 : _a.getView()) === null || _b === void 0 ? void 0 : _b.setMaxZoom(this.maxZoom);
-        }
-    }
-    getMapExtentAndZoom() {
-        if (this.handleGetZoomExtent) {
-            const extent = this.mapInstance.getView().calculateExtent(this.mapInstance.getSize());
-            const zoom = this.mapInstance.getView().getZoom();
-            this.handleGetZoomExtent(zoom, extent);
-        }
-    }
-    updateIntialSelectedLayersVisibility() {
-        let currentSelectedLayers = setSelectedLayersList(this.filteredLayerOptionsByRole, this.initialSelectedLayers);
-        this.updateLayerVisibility(currentSelectedLayers);
-        if (this.handleSetSelectedLayers) {
-            this.handleSetSelectedLayers(currentSelectedLayers);
-        }
-    }
-    //////////////////////////////////////////////////////////RENDER/////////////////////////////////////////////////////
-    render() {
-        return (h("div", { key: '6440b60c5df675d7a69aed4e5e5e6b25330496ef' }, h("div", { key: '497c3f51fe5ea88db661db6c2769b2645f4bb0b2', id: "map", style: { height: this.mapHeight, width: '100%', overflow: 'hidden' } }, h("slot", { key: 'fd4d944a1e6b7e45262fe0ec6f3aede2f0e07db9' })), h("div", { key: 'af32abb9573ac1adb672bca7c8ace2897576896b', id: "featureDetailsPopOverContainer" }, h("feature-details-popup", { key: '9d294a0a51f7b8b1c61179037809935544c6444e', currentSelectedFeature: this.currentSelectedFeature, data: this.selectedFeatureProperties, coordinates: this.selectedFeatureCoordinates, enableViewFeature: this.enableViewFeature, handleViewFeature: this.handleViewFeature, showPopOver: this.showPopOver, isReadOnly: this.isReadOnlyFeature, additionalOnclosePopover: this.handleOnCloseFeaturePopover, primaryActions: this.popoverPrimaryActions, moreIconActions: this.popoverMoreIconButtonActions, getMessage: this.getMessagePopover, getMessageIcon: this.getMessageIconPopover, hideMessageIcon: this.hideMessageIconPopover, cardConfig: this.popoverCardConfig, popoverWidth: this.popoverWidth, popoverContainer: this.popoverContainer }))));
-    }
-    get el() { return this; }
-    static get watchers() { return {
-        "data": ["reinitializeMap", "resetPopover"],
-        "layerOptions": ["reinitializeMap", "updateFilteredLayerOptions"],
-        "mapDataProjection": ["reinitializeMap"],
-        "mapProjection": ["reinitializeMap", "updateMapView"],
-        "crs": ["updateProjection"],
-        "layerRoles": ["updateFilteredLayerOptions"],
-        "user": ["updateFilteredLayerOptions"],
-        "selectedFeatureIdExternal": ["handleSelectFeatureOnMap"],
-        "readOnlyLayers": ["updateReadOnlyLayers"],
-        "selectedFeatureProperties": ["updateReadOnlyLayers"],
-        "initialSelectedLayers": ["handleUpdateInitialSelectedLayersVisibility"],
-        "mapCenter": ["updateMapCenter"],
-        "getMapStyles": ["updateFeatureStyles"],
-        "minZoom": ["updateMinZoom"],
-        "maxZoom": ["updateMaxZoom"]
-    }; }
-    static get style() { return udpMapCss; }
-}, [257, "map-component", {
-        "handleSetMapComponent": [8, "handle-set-map-component"],
-        "data": [16],
-        "isGeoJsonFormat": [4, "is-geo-json-format"],
-        "geoJsonMappingConfig": [8, "geo-json-mapping-config"],
-        "enableZoom": [4, "enable-zoom"],
-        "mapZoom": [2, "map-zoom"],
-        "mapCenter": [8, "map-center"],
-        "mapHeight": [1, "map-height"],
-        "crs": [8],
-        "mapProjection": [1, "map-projection"],
-        "mapDataProjection": [1, "map-data-projection"],
-        "getFilteredMapData": [8, "get-filtered-map-data"],
-        "getVectorLayerSources": [8, "get-vector-layer-sources"],
-        "getFeatureStyles": [8, "get-feature-styles"],
-        "getSelectedFeatureStyles": [8, "get-selected-feature-styles"],
-        "filterPanel": [1, "filter-panel"],
-        "filterPanelCallback": [8, "filter-panel-callback"],
-        "enableTileSelection": [4, "enable-tile-selection"],
-        "tileLayersOptions": [16],
-        "defaultTileOptionName": [1, "default-tile-option-name"],
-        "layerOptions": [16],
-        "initialSelectedLayers": [16],
-        "bulkSelectedFeaturesActionPanel": [1, "bulk-selected-features-action-panel"],
-        "handleSetSelectedFeaturesOnBulkSelect": [8, "handle-set-selected-features-on-bulk-select"],
-        "handleSetSelectedFeatureOnSelect": [8, "handle-set-selected-feature-on-select"],
-        "filterLayersByRole": [4, "filter-layers-by-role"],
-        "layerKeys": [16],
-        "layerKeySeparator": [1, "layer-key-separator"],
-        "user": [8],
-        "layerRoles": [8, "layer-roles"],
-        "filteredLayerOptionsByRole": [16],
-        "handleSetFilteredLayerOptionsByRole": [8, "handle-set-filtered-layer-options-by-role"],
-        "readOnlyMap": [4, "read-only-map"],
-        "enableViewFeature": [4, "enable-view-feature"],
-        "handleViewFeature": [8, "handle-view-feature"],
-        "bulkSelectionActive": [4, "bulk-selection-active"],
-        "splitActive": [4, "split-active"],
-        "enableDragBox": [4, "enable-drag-box"],
-        "selectFeatureInteraction": [8, "select-feature-interaction"],
-        "handleSetSelectedFeatureProperties": [8, "handle-set-selected-feature-properties"],
-        "selectedFeatureCoordinates": [16],
-        "selectedFeatureProperties": [8, "selected-feature-properties"],
-        "enableAddNewFeature": [4, "enable-add-new-feature"],
-        "selectedFeatureIdExternal": [8, "selected-feature-id-external"],
-        "setSelectedFeatureIdExternal": [16],
-        "readOnlyLayers": [16],
-        "additionalOnclosePopover": [8, "additional-onclose-popover"],
-        "popoverPrimaryActions": [16],
-        "popoverMoreIconButtonActions": [16],
-        "getMessagePopover": [16],
-        "getMessageIconPopover": [16],
-        "hideMessageIconPopover": [4, "hide-message-icon-popover"],
-        "popoverCardConfig": [8, "popover-card-config"],
-        "popoverWidth": [1, "popover-width"],
-        "handleGetZoomExtent": [8, "handle-get-zoom-extent"],
-        "selectedLayers": [16],
-        "handleSetSelectedLayers": [8, "handle-set-selected-layers"],
-        "handleGetAdditionalFeaturePropertiesOnSelect": [16],
-        "minZoom": [2, "min-zoom"],
-        "maxZoom": [2, "max-zoom"],
-        "currentSelectedFeature": [32],
-        "definedProjection": [32],
-        "popoverContainer": [32],
-        "showPopOver": [32],
-        "isReadOnlyFeature": [32],
-        "selectInteraction": [32],
-        "mapFeatures": [32],
-        "mapInstance": [32]
-    }, undefined, {
-        "data": ["reinitializeMap", "resetPopover"],
-        "layerOptions": ["reinitializeMap", "updateFilteredLayerOptions"],
-        "mapDataProjection": ["reinitializeMap"],
-        "mapProjection": ["reinitializeMap", "updateMapView"],
-        "crs": ["updateProjection"],
-        "layerRoles": ["updateFilteredLayerOptions"],
-        "user": ["updateFilteredLayerOptions"],
-        "selectedFeatureIdExternal": ["handleSelectFeatureOnMap"],
-        "readOnlyLayers": ["updateReadOnlyLayers"],
-        "selectedFeatureProperties": ["updateReadOnlyLayers"],
-        "initialSelectedLayers": ["handleUpdateInitialSelectedLayersVisibility"],
-        "mapCenter": ["updateMapCenter"],
-        "getMapStyles": ["updateFeatureStyles"],
-        "minZoom": ["updateMinZoom"],
-        "maxZoom": ["updateMaxZoom"]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["map-component", "feature-details-card", "feature-details-popup", "stencil-icon-button", "udp-adornment", "udp-ambient-tool-tip", "udp-badge", "udp-icon", "udp-menu-item", "udp-pop-over", "unity-typography"];
-    components.forEach(tagName => { switch (tagName) {
-        case "map-component":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, MapComponent);
-            }
-            break;
-        case "feature-details-card":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$a();
-            }
-            break;
-        case "feature-details-popup":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$9();
-            }
-            break;
-        case "stencil-icon-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$8();
-            }
-            break;
-        case "udp-adornment":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$7();
-            }
-            break;
-        case "udp-ambient-tool-tip":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$6();
-            }
-            break;
-        case "udp-badge":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$5();
-            }
-            break;
-        case "udp-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "udp-menu-item":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "udp-pop-over":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-        case "unity-typography":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-
-export { MapComponent as M, defineCustomElement as d };
-//# sourceMappingURL=map-component2.js.map
-
-//# sourceMappingURL=map-component2.js.map
+import{p as e,H as t,h as i,t as s}from"./index2.js";import o from"ol/Map";import a from"ol/View";import r from"ol/layer/Tile";import n from"ol/source/OSM";import l from"ol/layer/Vector";import d from"ol/source/Vector";import{Zoom as h,FullScreen as p}from"ol/control";import c from"proj4";import{register as u}from"ol/proj/proj4";import{defaults as m,DragRotateAndZoom as f}from"ol/interaction";import{Overlay as y}from"ol";import{a as v,b,c as g,h as F,d as M,e as S,s as O}from"./udp-map-utils.js";import{g as w}from"./map-interactions.js";import{Point as P,LineString as j,Polygon as L}from"ol/geom";import{D as k,P as x}from"./common.js";import{debounce as E}from"lodash";import{d as z}from"./feature-details-card2.js";import{d as C}from"./feature-details-popup2.js";import{d as Z}from"./stencil-icon-button2.js";import{d as I}from"./udp-adornment2.js";import{d as V}from"./udp-ambient-tool-tip2.js";import{d as R}from"./udp-badge2.js";import{d as A}from"./udp-icon2.js";import{d as B}from"./udp-menu-item2.js";import{d as D}from"./udp-pop-over2.js";import{d as T}from"./unity-typography2.js";const G=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.data=[],this.isGeoJsonFormat=!0,this.enableZoom=!0,this.mapZoom=17,this.mapCenter=[0,0],this.mapHeight="80vh",this.mapProjection="",this.filterPanel="",this.enableTileSelection=!0,this.tileLayersOptions=[],this.defaultTileOptionName="",this.layerOptions=[],this.initialSelectedLayers=[],this.bulkSelectedFeaturesActionPanel="",this.filterLayersByRole=!1,this.layerKeySeparator="",this.filteredLayerOptionsByRole=[],this.readOnlyMap=!1,this.enableViewFeature=!0,this.bulkSelectionActive=!1,this.splitActive=!1,this.enableDragBox=!1,this.enableAddNewFeature=!0,this.readOnlyLayers=[],this.popoverPrimaryActions=[],this.popoverMoreIconButtonActions=[],this.hideMessageIconPopover=!1,this.popoverCardConfig={},this.minZoom=0,this.maxZoom=28,this.definedProjection=!1,this.popoverContainer=null,this.showPopOver=!1,this.isReadOnlyFeature=!1,this.mapFeatures=[],this.initializeMap=(e,t)=>{var i;this.definedProjection=this.registerProjection(this.crs),this.filterLayerOptions();let s=[];if(this.tileLayersOptions&&(null===(i=this.tileLayersOptions)||void 0===i?void 0:i.length)>0)for(let e of this.tileLayersOptions){const t=new r({source:null==e?void 0:e.source,properties:{value:null==e?void 0:e.name,isBaseTile:!0},visible:!this.defaultTileOptionName||(null==e?void 0:e.name)===this.defaultTileOptionName});s[s.length]=t}else{const e=new r({source:new n,properties:{value:"Open Street Map",isBaseTile:!0},visible:!0});s[s.length]=e}s.push(new l({source:new d({}),properties:{id:k}}));const c=new a({center:this.mapCenter,zoom:this.mapZoom,projection:this.mapProjection,minZoom:this.minZoom,maxZoom:this.maxZoom});this.mapInstance=new o({target:t,layers:s,view:c,interactions:m().extend([new f]),controls:[new h,new p],overlays:[new y({element:e,autoPan:{animation:{duration:250}},id:x})]}),this.mapInstance.on("moveend",E((()=>{this.getMapExtentAndZoom()}),500)),this.setVectorLayers(),this.addSelectInteraction(),this.handleSetMapComponent&&this.handleSetMapComponent(this.mapInstance)},this.setVectorLayers=()=>{let e=v(this.data,this.isGeoJsonFormat,this.geoJsonMappingConfig,this.filterPanel,this.filterPanelCallback);this.mapFeatures=b(e,this.crs,this.definedProjection,this.mapProjection,this.mapDataProjection,this.getFilteredMapData);let t=this.getVisibleLayersOnLoad(this.layerOptions);this.addVectorLayersToMap(this.mapFeatures,t),this.updateIntialSelectedLayersVisibility()},this.clearVectorLayers=()=>{var e,t,i;(null!==(i=null===(t=null===(e=this.mapInstance)||void 0===e?void 0:e.getLayers())||void 0===t?void 0:t.getArray())&&void 0!==i?i:[]).forEach((e=>{e instanceof l&&e.get("id")!==k&&this.mapInstance.removeLayer(e)}))},this.registerProjection=e=>(null==e?void 0:e.length)>0&&(c.defs(e),u(c),!0),this.filterLayerOptions=()=>{let e=this.filterLayersByRole?g(this.user,this.layerRoles,this.layerOptions):this.layerOptions;this.handleSetFilteredLayerOptionsByRole(e)},this.addVectorLayersToMap=(e,t)=>{var i;if(e&&this.mapInstance)if(this.getVectorLayerSources)null===(i=this.getVectorLayerSources(t,e))||void 0===i||i.forEach((e=>{var t;const i=new d({features:null!==(t=null==e?void 0:e.features)&&void 0!==t?t:[]}),s=new l({source:i,properties:{value:null==e?void 0:e.layer},style:this.getFeatureStyles});this.mapInstance.addLayer(s)}));else for(let i of t){const t=null==e?void 0:e.filter((e=>{const t=e.getProperties();if(this.getFeatureStyles){let t=this.getFeatureStyles(e);F(t)&&e.setStyle(t)}const s=M(this.layerKeys,this.layerKeySeparator,t);return i===s})),s=new d({features:t}),o=new l({source:s,properties:{value:i}});this.mapInstance.addLayer(o)}},this.getVisibleLayersOnLoad=e=>{const t=this.filterLayersByRole?g(this.user,this.layerRoles,e):e;return S(t)},this.updateLayerVisibility=(e,t=!1)=>{var i,s;let o=t?r:l;null===(s=null===(i=this.mapInstance)||void 0===i?void 0:i.getLayers())||void 0===s||s.forEach((t=>{t instanceof o&&(e.includes(t.get("value"))||t.get("id")===k?t.setVisible(!0):t.setVisible(!1))}))},this.insertFeatureStyles=()=>{this.getFeatureStyles&&this.mapInstance.getLayers().forEach((e=>{e instanceof l&&e.getSource().getFeatures().forEach((e=>{let t=this.getFeatureStyles(e);F(t)&&e.setStyle(t)}))}))},this.addSelectInteraction=()=>{w(this.splitActive,this.handleSetCurrentSelectedFeature,this.handleSetSelectedFeatureProperties,this.handleOnCloseFeaturePopover,this.handleSetSelectedFeatureOnSelect,this.showPopper,this.getSelectedFeatureStyles,this.handleAddInteraction,this.enableDragBox,this.handleUpdateSelectInteraction,this.handleGetAdditionalFeaturePropertiesOnSelect)},this.handleUpdateSelectInteraction=e=>{this.selectInteraction=e},this.handleSetCurrentSelectedFeature=e=>{this.currentSelectedFeature=e},this.handleSetShowPopOver=e=>{this.showPopOver=e},this.showPopper=e=>{if(!this.enableDragBox&&!this.enableAddNewFeature&&!this.splitActive&&e){const t=this.mapInstance.getOverlayById(x);t&&(e.getGeometry()instanceof P?t.setPosition(e.getGeometry().getCoordinates()):e.getGeometry()instanceof j?t.setPosition(e.getGeometry().getCoordinates()[0]):e.getGeometry()instanceof L&&t.setPosition(e.getGeometry().getCoordinates()[0][0])),this.showPopOver=!0}},this.handleOnCloseFeaturePopover=e=>{this.additionalOnclosePopover&&this.additionalOnclosePopover(e),this.setSelectedFeatureIdExternal&&this.setSelectedFeatureIdExternal(null),this.showPopOver=!1},this.handleAddInteraction=e=>{this.mapInstance.addInteraction(e)},this.handleShowMarkerFromExternal=e=>{var t,i;if(e&&this.mapFeatures&&this.selectInteraction){const s=null===(t=this.mapFeatures)||void 0===t?void 0:t.find((t=>(null==t?void 0:t.getId())===e)),o=null==s?void 0:s.getProperties();if(s){this.handleSetSelectedFeatureProperties(s);const e=M(this.layerKeys,this.layerKeySeparator,o),t=S(this.filteredLayerOptionsByRole);if(!(null===(i=this.selectedLayers)||void 0===i?void 0:i.includes(e))&&(null==t?void 0:t.includes(e))&&this.handleSetSelectedLayers){const t=[...this.selectedLayers,e];this.handleSetSelectedLayers(t),this.updateLayerVisibility(t)}const a=this.selectInteraction.getFeatures(),r=a.getArray().slice();a.clear(),a.push(s),this.selectInteraction.dispatchEvent({type:"select",selected:[s],deselected:r,mapBrowserEvent:null})}}}}componentDidLoad(){requestAnimationFrame((()=>{this.popoverContainer=this.el.shadowRoot.querySelector("#featureDetailsPopOverContainer");const e=this.el.shadowRoot.querySelector("#map");this.popoverContainer&&e&&this.initializeMap(this.popoverContainer,e)}))}reinitializeMap(){this.clearVectorLayers(),this.setVectorLayers()}resetPopover(){this.showPopOver=!1}updateProjection(){this.crs&&(this.definedProjection=this.registerProjection(this.crs))}updateFilteredLayerOptions(){this.filterLayerOptions()}handleSelectFeatureOnMap(){var e;this.selectedFeatureIdExternal&&(null===(e=this.selectInteraction)||void 0===e?void 0:e.getActive())?this.handleShowMarkerFromExternal(this.selectedFeatureIdExternal):this.selectedFeatureIdExternal&&this.setSelectedFeatureIdExternal&&this.setSelectedFeatureIdExternal(null)}updateReadOnlyLayers(){var e;if(this.selectedFeatureProperties){const t=M(this.layerKeys,this.layerKeySeparator,this.selectedFeatureProperties);this.isReadOnlyFeature=null===(e=this.readOnlyLayers)||void 0===e?void 0:e.includes(t)}}handleUpdateInitialSelectedLayersVisibility(){this.updateIntialSelectedLayersVisibility()}updateMapView(){if(this.mapInstance){const e=this.mapInstance.getView().getCenter(),t=this.mapInstance.getView().getZoom();this.mapInstance.setView(new a({center:e,zoom:t,projection:this.mapProjection}))}}updateMapCenter(){var e;this.mapInstance&&this.mapCenter&&(null===(e=this.mapInstance.getView())||void 0===e||e.setCenter(this.mapCenter))}updateFeatureStyles(){this.mapInstance&&this.insertFeatureStyles()}updateMinZoom(){var e,t;this.mapInstance&&this.minZoom&&(null===(t=null===(e=this.mapInstance)||void 0===e?void 0:e.getView())||void 0===t||t.setMinZoom(this.minZoom))}updateMaxZoom(){var e,t;this.mapInstance&&this.maxZoom&&(null===(t=null===(e=this.mapInstance)||void 0===e?void 0:e.getView())||void 0===t||t.setMaxZoom(this.maxZoom))}getMapExtentAndZoom(){if(this.handleGetZoomExtent){const e=this.mapInstance.getView().calculateExtent(this.mapInstance.getSize()),t=this.mapInstance.getView().getZoom();this.handleGetZoomExtent(t,e)}}updateIntialSelectedLayersVisibility(){let e=O(this.filteredLayerOptionsByRole,this.initialSelectedLayers);this.updateLayerVisibility(e),this.handleSetSelectedLayers&&this.handleSetSelectedLayers(e)}render(){return i("div",{key:"1ba9e0b45f86eb8d47187f94e407e335df9905a9"},i("div",{key:"9d756fc99c3d7c37316ca5143f3bb576b8274e70",id:"map",style:{height:this.mapHeight,width:"100%",overflow:"hidden"}},i("slot",{key:"4046b6d0e58041db6f91975d708fd53be87d720b"})),i("div",{key:"5e571b4c5454f2e33392fbe3d5eba5f3f08c7392",id:"featureDetailsPopOverContainer"},i("feature-details-popup",{key:"1de46400d02cea8b41307b8102df4c99412294df",currentSelectedFeature:this.currentSelectedFeature,data:this.selectedFeatureProperties,coordinates:this.selectedFeatureCoordinates,enableViewFeature:this.enableViewFeature,handleViewFeature:this.handleViewFeature,showPopOver:this.showPopOver,isReadOnly:this.isReadOnlyFeature,additionalOnclosePopover:this.handleOnCloseFeaturePopover,primaryActions:this.popoverPrimaryActions,moreIconActions:this.popoverMoreIconButtonActions,getMessage:this.getMessagePopover,getMessageIcon:this.getMessageIconPopover,hideMessageIcon:this.hideMessageIconPopover,cardConfig:this.popoverCardConfig,popoverWidth:this.popoverWidth,popoverContainer:this.popoverContainer})))}get el(){return this}static get watchers(){return{data:[{reinitializeMap:0},{resetPopover:0}],layerOptions:[{reinitializeMap:0},{updateFilteredLayerOptions:0}],mapDataProjection:[{reinitializeMap:0}],mapProjection:[{reinitializeMap:0},{updateMapView:0}],crs:[{updateProjection:0}],layerRoles:[{updateFilteredLayerOptions:0}],user:[{updateFilteredLayerOptions:0}],selectedFeatureIdExternal:[{handleSelectFeatureOnMap:0}],readOnlyLayers:[{updateReadOnlyLayers:0}],selectedFeatureProperties:[{updateReadOnlyLayers:0}],initialSelectedLayers:[{handleUpdateInitialSelectedLayersVisibility:0}],mapCenter:[{updateMapCenter:0}],getMapStyles:[{updateFeatureStyles:0}],minZoom:[{updateMinZoom:0}],maxZoom:[{updateMaxZoom:0}]}}static get style(){return":host{display:block}.zoomControl{left:'auto';right:'20';top:'20'}.iconButtonWrapper{padding:var(--spacing-04)}#featureDetailsPopOverContainer{position:absolute;z-index:1000}.hidden-controls .ol-zoom,.hidden-controls .ol-attribution{display:none}.ol-control{width:fit-content !important}"}},[257,"map-component",{handleSetMapComponent:[8,"handle-set-map-component"],data:[16],isGeoJsonFormat:[4,"is-geo-json-format"],geoJsonMappingConfig:[8,"geo-json-mapping-config"],enableZoom:[4,"enable-zoom"],mapZoom:[2,"map-zoom"],mapCenter:[8,"map-center"],mapHeight:[1,"map-height"],crs:[8],mapProjection:[1,"map-projection"],mapDataProjection:[1,"map-data-projection"],getFilteredMapData:[8,"get-filtered-map-data"],getVectorLayerSources:[8,"get-vector-layer-sources"],getFeatureStyles:[8,"get-feature-styles"],getSelectedFeatureStyles:[8,"get-selected-feature-styles"],filterPanel:[1,"filter-panel"],filterPanelCallback:[8,"filter-panel-callback"],enableTileSelection:[4,"enable-tile-selection"],tileLayersOptions:[16],defaultTileOptionName:[1,"default-tile-option-name"],layerOptions:[16],initialSelectedLayers:[16],bulkSelectedFeaturesActionPanel:[1,"bulk-selected-features-action-panel"],handleSetSelectedFeaturesOnBulkSelect:[8,"handle-set-selected-features-on-bulk-select"],handleSetSelectedFeatureOnSelect:[8,"handle-set-selected-feature-on-select"],filterLayersByRole:[4,"filter-layers-by-role"],layerKeys:[16],layerKeySeparator:[1,"layer-key-separator"],user:[8],layerRoles:[8,"layer-roles"],filteredLayerOptionsByRole:[16],handleSetFilteredLayerOptionsByRole:[8,"handle-set-filtered-layer-options-by-role"],readOnlyMap:[4,"read-only-map"],enableViewFeature:[4,"enable-view-feature"],handleViewFeature:[8,"handle-view-feature"],bulkSelectionActive:[4,"bulk-selection-active"],splitActive:[4,"split-active"],enableDragBox:[4,"enable-drag-box"],selectFeatureInteraction:[8,"select-feature-interaction"],handleSetSelectedFeatureProperties:[8,"handle-set-selected-feature-properties"],selectedFeatureCoordinates:[16],selectedFeatureProperties:[8,"selected-feature-properties"],enableAddNewFeature:[4,"enable-add-new-feature"],selectedFeatureIdExternal:[8,"selected-feature-id-external"],setSelectedFeatureIdExternal:[16],readOnlyLayers:[16],additionalOnclosePopover:[8,"additional-onclose-popover"],popoverPrimaryActions:[16],popoverMoreIconButtonActions:[16],getMessagePopover:[16],getMessageIconPopover:[16],hideMessageIconPopover:[4,"hide-message-icon-popover"],popoverCardConfig:[8,"popover-card-config"],popoverWidth:[1,"popover-width"],handleGetZoomExtent:[8,"handle-get-zoom-extent"],selectedLayers:[16],handleSetSelectedLayers:[8,"handle-set-selected-layers"],handleGetAdditionalFeaturePropertiesOnSelect:[16],minZoom:[2,"min-zoom"],maxZoom:[2,"max-zoom"],currentSelectedFeature:[32],definedProjection:[32],popoverContainer:[32],showPopOver:[32],isReadOnlyFeature:[32],selectInteraction:[32],mapFeatures:[32],mapInstance:[32]},void 0,{data:[{reinitializeMap:0},{resetPopover:0}],layerOptions:[{reinitializeMap:0},{updateFilteredLayerOptions:0}],mapDataProjection:[{reinitializeMap:0}],mapProjection:[{reinitializeMap:0},{updateMapView:0}],crs:[{updateProjection:0}],layerRoles:[{updateFilteredLayerOptions:0}],user:[{updateFilteredLayerOptions:0}],selectedFeatureIdExternal:[{handleSelectFeatureOnMap:0}],readOnlyLayers:[{updateReadOnlyLayers:0}],selectedFeatureProperties:[{updateReadOnlyLayers:0}],initialSelectedLayers:[{handleUpdateInitialSelectedLayersVisibility:0}],mapCenter:[{updateMapCenter:0}],getMapStyles:[{updateFeatureStyles:0}],minZoom:[{updateMinZoom:0}],maxZoom:[{updateMaxZoom:0}]}]);function U(){"undefined"!=typeof customElements&&["map-component","feature-details-card","feature-details-popup","stencil-icon-button","udp-adornment","udp-ambient-tool-tip","udp-badge","udp-icon","udp-menu-item","udp-pop-over","unity-typography"].forEach((e=>{switch(e){case"map-component":customElements.get(s(e))||customElements.define(s(e),G);break;case"feature-details-card":customElements.get(s(e))||z();break;case"feature-details-popup":customElements.get(s(e))||C();break;case"stencil-icon-button":customElements.get(s(e))||Z();break;case"udp-adornment":customElements.get(s(e))||I();break;case"udp-ambient-tool-tip":customElements.get(s(e))||V();break;case"udp-badge":customElements.get(s(e))||R();break;case"udp-icon":customElements.get(s(e))||A();break;case"udp-menu-item":customElements.get(s(e))||B();break;case"udp-pop-over":customElements.get(s(e))||D();break;case"unity-typography":customElements.get(s(e))||T()}}))}export{G as M,U as d}