udp-stencil-component-library 1.0.0

package/dist/esm/map-component_2.entry.js

@@ -0,0 +1,830 @@
+import { r as registerInstance, h, a as getElement } from './index-CaIWDYyq.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 { Select, Draw, defaults, DragRotateAndZoom } from 'ol/interaction';
+import { Feature, Overlay } from 'ol';
+import { h as hasStyles, a as getFilteredData, b as getMapFeatures, c as getFilteredLayerOptionsByRole, d as getLayer, e as getLayerStringArrayFromArray, s as setSelectedLayersList } from './udp-map-utils-_3wImzvq.js';
+import { Point, LineString, Polygon } from 'ol/geom';
+import * as turf from '@turf/turf';
+import { createBox } from 'ol/interaction/Draw';
+import { transformExtent } from 'ol/proj';
+import { click } from 'ol/events/condition';
+import { first, debounce } from 'lodash';
+import { S as SelectFeatureInteractionId, D as DrawBaseLayerId, P as PopoverOverlayId } from './common-CwN0FuAf.js';
+import 'ol/format/GeoJSON';
+
+const getSelectInteraction = (splitActive, handleSetCurrentSelectedFeature, handleSetSelectedFeatureProperties, handleSetShowPopOver, handleSetSelectedFeatureOnSelect, showPopper, getSelectedFeatureStyles, handleAddInteraction, enableDragBox, handleUpdateSelectInteraction, handleGetAdditionalFeaturePropertiesOnSelect) => {
+    const selectInteraction = new Select({
+        condition: e => {
+            return click(e);
+        },
+        multi: false,
+        hitTolerance: 30,
+    });
+    selectInteraction.set('id', SelectFeatureInteractionId);
+    selectInteraction.on('select', async (event) => {
+        if (!enableDragBox && !splitActive) {
+            if (event.selected.length > 0) {
+                const currentFeature = first(event.selected);
+                if (handleGetAdditionalFeaturePropertiesOnSelect) {
+                    let additionalProperties = await handleGetAdditionalFeaturePropertiesOnSelect(event.selected);
+                    if (additionalProperties && typeof additionalProperties === 'object') {
+                        Object.keys(additionalProperties).forEach(key => {
+                            currentFeature.values_[`${key}`] = additionalProperties[key];
+                        });
+                    }
+                }
+                handleSetCurrentSelectedFeature(currentFeature);
+                if (handleSetSelectedFeatureOnSelect) {
+                    handleSetSelectedFeatureOnSelect(currentFeature);
+                }
+                handleSetSelectedFeatureProperties(currentFeature);
+                showPopper(currentFeature);
+                if (getSelectedFeatureStyles) {
+                    let styles = getSelectedFeatureStyles(currentFeature);
+                    if (hasStyles(styles)) {
+                        currentFeature.setStyle(styles);
+                    }
+                }
+            }
+            else {
+                handleSetSelectedFeatureProperties(null);
+                handleSetShowPopOver(false);
+            }
+        }
+    });
+    handleUpdateSelectInteraction(selectInteraction);
+    handleAddInteraction(selectInteraction);
+};
+const getBulkSelectDrawInteraction = (map, bulkSelectionType, projection, handleSetBulkSelectionActive, handleSetEnableDragBox, handleSetSelectedFeatureProperties, clearSelectFeatureInteraction, currentBulkSelectDrawInteraction, handleSetCurrentBulkSelectDrawInteraction, handleRemoveInteraction, handleAddInteraction, selectedFeatureByBoxSelection, handleSetSelectedFeatureByBoxSelection, handleSetSelectedBulkSelectionType, getSelectedFeatureStyles, handleSetSelectedFeaturesOnBulkSelect) => {
+    handleSetBulkSelectionActive(true);
+    handleSetEnableDragBox(true);
+    handleSetSelectedFeatureProperties(null);
+    handleSetSelectedFeatureByBoxSelection([]);
+    handleSetSelectedBulkSelectionType(bulkSelectionType);
+    clearSelectFeatureInteraction();
+    if (map) {
+        if (currentBulkSelectDrawInteraction) {
+            handleRemoveInteraction(currentBulkSelectDrawInteraction);
+        }
+        const drawOption = { type: 'Circle' };
+        if (bulkSelectionType === 'box') {
+            drawOption.geometryFunction = createBox();
+        }
+        else if (bulkSelectionType === 'polygon') {
+            drawOption.type = 'Polygon';
+        }
+        else if (bulkSelectionType === 'lasso') {
+            drawOption.type = 'Polygon';
+            drawOption.freehand = true;
+        }
+        const boxSelectionInteraction = new Draw(drawOption);
+        handleSetCurrentBulkSelectDrawInteraction(boxSelectionInteraction);
+        handleAddInteraction(boxSelectionInteraction);
+        boxSelectionInteraction.setActive(true);
+        let selectedFeatures = [];
+        boxSelectionInteraction.on('drawend', (event) => {
+            handleRemoveInteraction(currentBulkSelectDrawInteraction);
+            let boxExtent = event.feature.getGeometry().getExtent();
+            boxExtent = transformExtent(boxExtent, map.getView().getProjection(), projection);
+            map.getLayers().forEach((layer) => {
+                if (layer instanceof VectorLayer) {
+                    let src = layer.getSource();
+                    const featuresInBox = src.getFeaturesInExtent(boxExtent).filter(feature => {
+                        return feature.getGeometry().intersectsExtent(boxExtent) && !selectedFeatureByBoxSelection.includes(feature);
+                    });
+                    if (getSelectedFeatureStyles) {
+                        featuresInBox.forEach(f => {
+                            let style = getSelectedFeatureStyles(f);
+                            if (hasStyles(style)) {
+                                f.setStyle(style);
+                            }
+                        });
+                    }
+                    selectedFeatures.push(...featuresInBox);
+                }
+            });
+            if (selectedFeatures.length > 0) {
+                let newFeatures = (selectedFeatureByBoxSelection === null || selectedFeatureByBoxSelection === void 0 ? void 0 : selectedFeatureByBoxSelection.length) > 0 ? [...selectedFeatureByBoxSelection, ...selectedFeatures] : selectedFeatures;
+                handleSetSelectedFeatureByBoxSelection(newFeatures);
+                if (handleSetSelectedFeaturesOnBulkSelect) {
+                    handleSetSelectedFeaturesOnBulkSelect(selectedFeatureByBoxSelection);
+                }
+            }
+            handleSetEnableDragBox(false);
+            boxSelectionInteraction.setActive(false);
+        });
+        handleSetCurrentBulkSelectDrawInteraction(boxSelectionInteraction);
+    }
+};
+const getAddFeatureDrawInteraction = (map, selectedLayer, selectedType = 'Point', handleRemoveInteraction, currentInteraction, handleSetCurrentInteraction, handleGetFeatureObject, handleEnableAddNewFeature, handleSetSelectedFeatureProperties, handleAddInteraction, addMultipleFeatures, addNewFeature) => {
+    var _a, _b, _c, _d;
+    if (handleSetSelectedFeatureProperties) {
+        handleSetSelectedFeatureProperties(null);
+    }
+    handleEnableAddNewFeature(true);
+    if (currentInteraction) {
+        handleRemoveInteraction(currentInteraction);
+    }
+    let source = new VectorSource();
+    if (selectedLayer) {
+        (_a = map === null || map === void 0 ? void 0 : map.getLayers()) === null || _a === void 0 ? void 0 : _a.forEach(layer => {
+            if (layer instanceof VectorLayer) {
+                if (selectedLayer.value === layer.getProperties().value) {
+                    source = layer.getSource();
+                }
+            }
+        });
+    }
+    else {
+        source = (_d = (_c = (_b = map === null || map === void 0 ? void 0 : map.getLayers()) === null || _b === void 0 ? void 0 : _b.getArray()) === null || _c === void 0 ? void 0 : _c.find(layer => layer instanceof VectorLayer && layer.get('id') === DrawBaseLayerId)) === null || _d === void 0 ? void 0 : _d.getSource();
+    }
+    const addFeatureDrawInteraction = new Draw({ source: source, type: selectedType.value });
+    handleSetCurrentInteraction(addFeatureDrawInteraction);
+    addFeatureDrawInteraction.on('drawend', function (event) {
+        const feature = event.feature;
+        let featureGeom = feature.getGeometry();
+        if (featureGeom instanceof Point || featureGeom instanceof LineString || featureGeom instanceof Polygon) {
+            let featureObject = {
+                feature: feature,
+                type: selectedType,
+                coordinates: featureGeom.getCoordinates(),
+                geometry: featureGeom,
+                layer: selectedLayer,
+                source: source,
+            };
+            if (handleGetFeatureObject) {
+                handleGetFeatureObject(featureObject);
+            }
+            if (!addMultipleFeatures) {
+                addNewFeature();
+            }
+        }
+    });
+    handleAddInteraction(addFeatureDrawInteraction);
+};
+const getSplitInteraction = (map, selectedLayer, currentInteraction, handleSetCurrentInteraction, handleSetSplitActive, handleRemoveInteraction, handleAddInteraction, handleRetrieveSplitFeature) => {
+    if (currentInteraction) {
+        handleRemoveInteraction(currentInteraction);
+    }
+    handleSetCurrentInteraction(null);
+    handleSetSplitActive(true);
+    let source = new VectorSource();
+    map.getLayers().forEach(layer => {
+        if (layer instanceof VectorLayer) {
+            if (selectedLayer.value === layer.getProperties().value) {
+                source = layer.getSource();
+            }
+        }
+    });
+    const splitInteraction = new Draw({ source: source, type: 'LineString' });
+    handleSetCurrentInteraction(splitInteraction);
+    splitInteraction.on('drawend', function (event) {
+        const feature = event.feature;
+        const geometry = feature.getGeometry();
+        if (geometry instanceof LineString) {
+            const coords1 = geometry.getCoordinates();
+            const splitCoordinates = turf.lineString(coords1);
+            let intersections;
+            let splitLineString1 = new Feature();
+            let splitLineString2 = new Feature();
+            source.getFeatures().forEach(currentFeature => {
+                const currentFeatureGeometry = currentFeature.getGeometry();
+                if (currentFeatureGeometry instanceof LineString) {
+                    let coords2 = currentFeatureGeometry.getCoordinates();
+                    const currentCoordinates = turf.lineString(coords2);
+                    intersections = turf.lineIntersect(currentCoordinates, splitCoordinates);
+                    if (intersections.features.length > 0) {
+                        const intersection = intersections.features[0].geometry.coordinates;
+                        const splitCoords1 = [currentCoordinates.geometry.coordinates[0], intersection];
+                        const splitCoords2 = [intersection, currentCoordinates.geometry.coordinates[1]];
+                        splitLineString1 = new Feature({
+                            geometry: new LineString(splitCoords1),
+                            name: 'Split LineString 1',
+                        });
+                        splitLineString2 = new Feature({
+                            geometry: new LineString(splitCoords2),
+                            name: 'Split LineString 2',
+                        });
+                    }
+                }
+            });
+            source.removeFeature(feature);
+            source.removeFeature(event.feature);
+            source.addFeature(splitLineString1);
+            source.addFeature(splitLineString2);
+            let splitFeatureDetails = {
+                originalFeature: feature,
+                newFeature1: splitLineString1,
+                newFeature2: splitLineString2,
+            };
+            if (handleRetrieveSplitFeature) {
+                handleRetrieveSplitFeature(splitFeatureDetails);
+            }
+        }
+    });
+    handleAddInteraction(splitInteraction);
+    handleSetCurrentInteraction(splitInteraction);
+};
+
+const udpMapCss$1 = ":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 = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        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.anchorElement = 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 },
+            }));
+            this.anchorElement = mapElement;
+            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.handleSetShowPopOver, 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(() => {
+            const popOverElement = this.el.shadowRoot.querySelector('#featureDetailsPopOverContainer');
+            const mapElement = this.el.shadowRoot.querySelector('#map');
+            if (popOverElement && mapElement) {
+                this.initializeMap(popOverElement, 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: '931d1aad100ff110d19fd1c85b1b7ecd1ba18c23' }, h("div", { key: '5e159392b3417ebd435056ccb7c7149418591405', id: "map", style: { height: this.mapHeight, width: '100%', overflow: 'hidden' } }, h("slot", { key: '6f6d1af49d66c4cfe106942b915bbc3f1d03775b' })), h("div", { key: '8caf1fb6099581a3df3690f780a11f2600f2ac1e', id: "featureDetailsPopOverContainer" }, h("feature-details-popup", { key: 'd1269ca5fa1198220e46cd27938f520509599a9a', currentSelectedFeature: this.currentSelectedFeature, data: this.selectedFeatureProperties, coordinates: this.selectedFeatureCoordinates, enableViewFeature: this.enableViewFeature, handleViewFeature: this.handleViewFeature, popOverAnchorElement: this.anchorElement, 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 }))));
+    }
+    get el() { return getElement(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"]
+    }; }
+};
+MapComponent.style = udpMapCss$1;
+
+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 UdpMapToolbar = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.mapTitle = ''; //Title appearing on map
+        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.bulkSelectedFeaturesActionPanel = ''; //Custom action panel for selected features
+        this.refreshButtonTooltip = ''; //Custom tooltip message on refresh button
+        this.readOnlyMap = false; //Map is read only (Setting true removes the add, edit, delete functionality)
+        this.enableAdd = true; //Enables adding a new feature by drawing on the map
+        this.addMultipleFeatures = true; //When adding features by drawing, add multiple features
+        this.enableSplitFeature = true; //Enables splitting linestrings on the map
+        this.filteredLayerOptionsByRole = []; //Layer options filtered by role
+        this.enableDragBox = false; //Boolean - if dragbox interaction is currently active
+        this.splitActive = false; //Boolean - if split interaction is currently active
+        this.enableAddNewFeature = false; //Show the button to add a new feature by drawing on the map
+        this.readOnlyLayers = [];
+        this.selectedTile = { label: 'Open Street Map', value: 'Open Street Map' };
+        this.selectedBulkSelectionType = 'box';
+        this.selectedFeatureByBoxSelection = [];
+        this.tileSelectOptions = [{ label: 'Open Street Map', value: 'Open Street Map' }];
+        this.newFeatureObjectsAdded = [];
+        this.showSplitButton = false;
+        ///////////////////////////////////////////////////METHODS//////////////////////////////////////////////////////////////////
+        this.setEnableDragBox = (set) => {
+            this.handleSetEnableDragBox(set);
+        };
+        this.setBulkSelectonActive = (active) => {
+            this.handleSetBulkSelectionActive(active);
+        };
+        //================================================CHANGING CURRENT MAP TYPE=========================================
+        this.getTileLayerOptions = () => {
+            this.tileSelectOptions = this.tileLayersOptions.map(tile => {
+                return { label: tile === null || tile === void 0 ? void 0 : tile.name, value: tile === null || tile === void 0 ? void 0 : tile.name };
+            });
+            this.selectedTile = this.tileSelectOptions.filter(t => t.value === this.defaultTileOptionName)[0];
+        };
+        this.handleSelectTile = (value) => {
+            var _a;
+            if (!value)
+                return;
+            this.selectedTile = value;
+            if (this.enableTileSelection && ((_a = this.tileLayersOptions) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+                const newTileLayer = this.tileLayersOptions.find(tile => (tile === null || tile === void 0 ? void 0 : tile.name) === value.value);
+                if (!newTileLayer)
+                    return;
+                // Remove previous base tile layers
+                const layersToRemove = this.map
+                    .getLayers()
+                    .getArray()
+                    .filter(layer => layer.get('isBaseTile'));
+                layersToRemove.forEach(layer => {
+                    this.map.removeLayer(layer);
+                });
+                // Add the new tile layer
+                const tileLayer = new TileLayer({
+                    source: newTileLayer.source,
+                    visible: true,
+                    zIndex: 0,
+                    properties: {
+                        value: newTileLayer.name,
+                        isBaseTile: true,
+                    },
+                });
+                this.map.getLayers().insertAt(0, tileLayer);
+            }
+        };
+        this.handleSelectLayers = (value) => {
+            if (this.handleSetSelectedLayers) {
+                this.handleSetSelectedLayers(value);
+            }
+            this.updateLayerVisibility(value);
+            if (this.handleSelectLayersCallback) {
+                this.handleSelectLayersCallback(value);
+            }
+        };
+        this.updateLayerVisibility = (visibleLayerNames, changeTileLayer = false) => {
+            var _a, _b;
+            let type = changeTileLayer ? TileLayer : VectorLayer;
+            (_b = (_a = this.map) === 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);
+                }
+            });
+        };
+        //============================================BULK SELECTION=======================================================
+        this.bulkSelectDraw = (bulkSelectionType, projection) => {
+            getBulkSelectDrawInteraction(this.map, bulkSelectionType, projection, this.setBulkSelectonActive, this.setEnableDragBox, this.handleSetSelectedFeatureProperties, this.clearSelectFeatureInteraction, this.currentBulkSelectDrawInteraction, this.handleSetCurrentBulkSelectDrawInteraction, this.handleRemoveInteraction, this.handleAddInteraction, this.selectedFeatureByBoxSelection, this.handleSetSelectedFeatureByBoxSelection, this.handleSetSelectedBulkSelectionType, this.getSelectedFeatureStyles, this.handleSetSelectedFeaturesOnBulkSelect);
+        };
+        this.clearSelectFeatureInteraction = () => {
+            if (this.selectFeatureInteraction) {
+                this.selectFeatureInteraction.getFeatures().clear();
+                this.selectFeatureInteraction.setActive(false);
+            }
+        };
+        this.handleSetCurrentBulkSelectDrawInteraction = (interaction) => {
+            this.currentBulkSelectDrawInteraction = interaction;
+        };
+        this.handleSetSelectedFeatureByBoxSelection = (value) => {
+            this.selectedFeatureByBoxSelection = value;
+        };
+        this.handleSetSelectedBulkSelectionType = (type) => {
+            this.selectedBulkSelectionType = type;
+        };
+        this.handleCancelBulkSelectDraw = () => {
+            this.setBulkSelectonActive(false);
+            this.setEnableDragBox(false);
+            this.currentBulkSelectDrawInteraction.setActive(false);
+            this.map.removeInteraction(this.currentBulkSelectDrawInteraction);
+        };
+        this.handleBulkUnselectFeatures = () => {
+            if (this.selectedFeatureByBoxSelection.length > 0 && this.getFeatureStyles) {
+                this.selectedFeatureByBoxSelection.forEach(feature => {
+                    let style = this.getFeatureStyles(feature);
+                    if (hasStyles(style)) {
+                        feature.setStyle(style);
+                    }
+                });
+            }
+            this.setEnableDragBox(false);
+            this.setBulkSelectonActive(false);
+            this.selectedFeatureByBoxSelection = [];
+            if (this.handleSetSelectedFeaturesOnBulkSelect) {
+                this.handleSetSelectedFeaturesOnBulkSelect([]);
+            }
+        };
+        //=======================================ADDING FEATURES===================================================
+        this.startDrawingMapFeature = (selectedLayer, selectedType = 'Point') => {
+            getAddFeatureDrawInteraction(this.map, selectedLayer, selectedType, this.handleRemoveInteraction, this.currentAddFeatureDrawInteraction, this.handleSetCurrentInteraction, this.handleGetFeatureObject, this.handleEnableAddNewFeature, this.handleSetSelectedFeatureProperties, this.handleAddInteraction, this.addMultipleFeatures, this.addNewFeature);
+        };
+        this.handleGetFeatureObject = (feature) => {
+            this.newFeatureObjectsAdded = [...this.newFeatureObjectsAdded, ...[feature]];
+        };
+        this.handleAddInteraction = (interaction) => {
+            this.map.addInteraction(interaction);
+            this.currentAddFeatureDrawInteraction = interaction;
+        };
+        this.handleRemoveInteraction = (interaction) => {
+            this.map.removeInteraction(interaction);
+            this.currentAddFeatureDrawInteraction = null;
+        };
+        this.handleSetCurrentInteraction = (interaction) => {
+            this.currentAddFeatureDrawInteraction = interaction;
+        };
+        this.cancelAddNewFeature = () => {
+            this.handleEnableAddNewFeature(false);
+            this.map.removeInteraction(this.currentAddFeatureDrawInteraction);
+        };
+        this.addNewFeature = () => {
+            this.handleEnableAddNewFeature(false);
+            this.map.removeInteraction(this.currentAddFeatureDrawInteraction);
+            if (this.handleAddNewFeatures) {
+                this.handleAddNewFeatures(this.newFeatureObjectsAdded);
+            }
+        };
+        //=========================================SPLITTING FEATURES=========================================================
+        this.handleStartSplitting = (selectedLayer) => {
+            this.handleSetSplit(true);
+            this.splitActive = true;
+            getSplitInteraction(this.map, selectedLayer, this.currentSplitInteraction, this.handleSetCurrentSplitInteraction, this.handleSetSplit, this.handleRemoveInteraction, this.handleAddInteraction, this.handleRetrieveSplitFeature);
+        };
+        this.handleSetSplit = (split) => {
+            this.handleSetSplitActive(split);
+            this.showSplitButton = split;
+        };
+        this.handleRetrieveSplitFeature = (split) => {
+            this.splitFeatureDetails = split;
+        };
+        this.handleSetCurrentSplitInteraction = (interaction) => {
+            this.currentSplitInteraction = interaction;
+        };
+        this.handleCancelSplit = () => {
+            this.handleSetSplit(false);
+            this.splitActive = false;
+            this.handleRemoveInteraction(this.currentSplitInteraction);
+            this.currentSplitInteraction = null;
+        };
+        this.handleSaveSplit = () => {
+            this.handleSetSplit(false);
+            this.handleRemoveInteraction(this.currentSplitInteraction);
+            this.currentSplitInteraction = null;
+            this.handleSplitFeature(this.splitFeatureDetails);
+        };
+    }
+    componentWillLoad() {
+        var _a;
+        if (this.tileLayersOptions && ((_a = this.tileLayersOptions) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+            this.getTileLayerOptions();
+        }
+    }
+    /////////////////////////////////////////////////////////////WATCHERS////////////////////////////////////////////////////////
+    updateTileSelectOptions() {
+        var _a;
+        if (this.tileLayersOptions && ((_a = this.tileLayersOptions) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+            this.getTileLayerOptions();
+        }
+    }
+    //////////////////////////////////////////////////////////RENDER/////////////////////////////////////////////////////
+    render() {
+        return (h("map-toolbar", { key: '0c0c477eb063ec6bfe3c3698f8ac758ca7dbc2f6', map: this.map, mapTitle: this.mapTitle, layerOptions: this.layerOptions, handleSelectLayers: this.handleSelectLayers, visibleLayers: this.selectedLayers, tileOptions: this.tileSelectOptions, handleSelectTile: this.handleSelectTile, selectedTile: this.selectedTile, enableTileSelection: this.enableTileSelection, filterPanel: this.filterPanel, enableDragBox: this.enableDragBox, selectedFeatureByBoxSelection: this.selectedFeatureByBoxSelection, handleUnselectFeatures: this.handleBulkUnselectFeatures, selectedFeaturesActionPanel: this.bulkSelectedFeaturesActionPanel, handleCancelBoxSelection: this.handleCancelBulkSelectDraw, handleBulkSelectionTypeOnChange: this.bulkSelectDraw, mapProjection: this.mapProjection, refreshEvent: this.handleRefresh, refreshButtonTooltip: this.refreshButtonTooltip, enableAddNewFeature: this.enableAddNewFeature, handleStartDrawingMapFeature: this.startDrawingMapFeature, cancelAddNewFeature: this.cancelAddNewFeature, addNewFeature: this.addNewFeature, enableSplit: this.enableSplitFeature, handleStartSplitting: this.handleStartSplitting, handleCancelSplit: this.handleCancelSplit, handleSaveSplit: this.handleSaveSplit, readOnlyMap: this.readOnlyMap, enableAdd: this.enableAdd, addMultipleFeatures: this.addMultipleFeatures, showSplitButton: this.showSplitButton, readOnlyLayers: this.readOnlyLayers, addFeaturePanelConfig: this.addFeaturePanelConfig }));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "tileLayersOptions": ["updateTileSelectOptions"]
+    }; }
+};
+UdpMapToolbar.style = udpMapCss;
+
+export { MapComponent as map_component, UdpMapToolbar as udp_map_toolbar };
+//# sourceMappingURL=map-component.udp-map-toolbar.entry.js.map
+
+//# sourceMappingURL=map-component_2.entry.js.map